@charset "utf-8";
@import url('font.css');

#wrap{position:relative; width:100%; height:100%}
#header{position:relative; width:100%; z-index:200}
#container{position:relative}
#footer{position:relative}
#contents{position:relative}
.main_grid{position: relative; width: 1420px; margin:0 auto}
.grid1{position:relative; padding-left: 60px; padding-right: 60px}
.t_dsp, .t_dspi, .m_dsp, .m_dspi{display:none;}

/* ==========================================================================
   Variable
   ========================================================================== */
:root {
--left-sidewidth: 241px;
--main_gap1: 60px;
--main-gold1: #b99764;
--main-gold2: #a98a5b;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
#header .inner_header{position:fixed; width:100%; }
#header .inner_header .bg_header{position:absolute; top: -105px; width:100%; height:100%; background:#fff; border-bottom: 1px solid #eaeaea; box-sizing: border-box; transition:.5s ease-in-out}
#header .inner_header .row_header{width:100%; box-sizing:border-box;}
#header .inner_header .row_header .inner_sc{position: relative; display: flex; justify-content: center; align-items: center; padding-top: 25px; height: 105px; box-sizing: border-box; transition:.5s ease-in-out}
#header .inner_header .row_header h1{position: absolute; left: 0;}
#header .inner_header .row_header h1 img{width: 111px; animation:fadeEffect .5s; /*transition:.3s ease-in-out .4s*/}
#header .inner_header .row_header h1 .img2{display:none}
#header .inner_header .row_header .right_set{position: absolute; right: 0; display: flex; align-items: center;}

#gnb > ul{display: flex;}
#gnb > ul > li{margin: 0 10px;}
#gnb > ul > li > a{display:block; padding:13px 12px; font-size: 18px; font-weight:700; color:#fff; letter-spacing: 0; text-transform:uppercase; transition:color .2s ease-in-out}
#gnb > ul > li > a:hover{color:#ddd}
#header .inner_header .row_header .btn_contact a{display: flex; justify-content: center; align-items: center; height: 35px; width:122px;  border:1px solid var(--main-gold1); background-color: var(--main-gold1); border-radius:18px; transition: .5s;}
#header .inner_header .row_header .btn_contact span{display: inline-block; font-weight: 700; color: #fff; line-height: 26px; padding-left: 23px; background: url('../images/common/ico_calendar1.png') no-repeat 0 calc(50% + 1px); background-size: 18px auto;}
/*#header .inner_header .row_header .btn_contact a:hover{ border-color: #fff; background-color: #fff;}
#header .inner_header .row_header .btn_contact a:hover span{color: var(--main-gold1);}*/

#btn_m_allmenu{width:30px; height:40px; font-size:0; background:url('../images/common/ico_hamburg1.png') no-repeat right center; background-size: 16px auto; cursor:pointer; margin-left: 8px; transition:.5s ease-in-out;}
#header .inner_header.fixed .bg_header{top:0}
#header .inner_header.fixed .row_header .inner_sc{padding-top: 0; height: 80px;}
#header .inner_header.fixed .row_header h1 .img1{display:none}
#header .inner_header.fixed .row_header h1 .img2{display:inline}
#header .inner_header.fixed #gnb > ul > li > a{color:#222}
#header .inner_header.fixed #gnb > ul > li > a:hover,
#header .inner_header.fixed #gnb > ul > li > a.active{color: var(--main-gold1)}
#header .inner_header.fixed #btn_m_allmenu{background-image: url('../images/common/ico_hamburg1_1.png')}

/* ==========================================================================
   FOOTER
   ========================================================================== */
#footer .inner_footer{display: flex; padding-top:30px; padding-bottom: 60px}
#footer .logo{padding-top: 8px; margin-right: 37px;}
#footer .logo img{width: 39px;}
#footer .address{letter-spacing:0}
#footer .address address{font-size:13px; color:#666; line-height:22px}
#footer .address address span{font-family:'Roboto', sans-serif; font-size:13px; font-weight:bold; color:#b99764; margin-left:15px; text-transform:uppercase;}
#footer .address address span:first-child{margin-left:0}
#footer .address .copyright{margin-top:6px; font-size:11px; font-weight:400; color:#555; letter-spacing:0.7px; text-transform:uppercase;}
#family_site{position:relative; width:236px; text-align:left; margin-left: auto; box-sizing:border-box; z-index:100}
#family_site .select{position:absolute; left:0; width:100%; height:42px; line-height:42px; padding-left:13px; border-left:1px solid transparent; border-right:1px solid transparent; font-family:'Roboto', sans-serif; font-size:14px; font-weight:bold; color:#222; letter-spacing:0; text-transform: uppercase; border-bottom:1px solid #222; background:#fff url('../images/common/arw3_1.png') no-repeat right 9px center; background-size:10px auto; cursor:pointer; user-select:none; box-sizing:border-box; transition: ease-in-out .2s;}
#family_site .list_family{position:absolute; bottom:41px; left:0; max-height:0; width:100%; background-color:#fff; overflow:hidden; box-sizing:border-box; transition:max-height ease-in-out .5s;}
#family_site .list_family > ul{border:1px solid #eeeee6;}
#family_site .list_family > ul > li > a{display:block; line-height:41px; padding-left:14px; font-size:14px; font-weight:400; color:#222; box-sizing:border-box; user-select:none}
#family_site .list_family > ul > li > a:hover{color:#5a5a55}
#family_site .list_family > ul > li > a > span{font-family:'Roboto', sans-serif; font-size:13px; color:#666; letter-spacing:0}
#family_site .list_family > ul > li > a > span:before{content:""; display:inline-block; width:1px; height:12px; background-color:#d2d2d2; margin:0 10px 0 5px}
#family_site.on .select{border-left:1px solid #eeeee6; border-right:1px solid #eeeee6; background-image:url('../images/common/arw3_2.png')}
#family_site.on .list_family{max-height:290px;}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
[data-sidebar]{position:fixed; right:0; width:340px; height: 100%; z-index:1051} /*너비 넣어야 함, sidebar 필수*/
[data-sidebar-overlay]{display:none; position:fixed; top:0; left:0; opacity:0; width:100%; height:100%; min-height:inherit; z-index:1048}
#sidebar + .overlay{background-color: #000; cursor:pointer}
#sidebar{background-color:#fff; overflow:hidden; transform:translate(100%)}
#sidebar.open{transform:translate(0)}
#sidebar .inner{position:relative; width:100%; height:100%; padding:0 20px; box-sizing:border-box; overflow-y:auto}
#sidebar .inner::-webkit-scrollbar{display: none}
#sidebar .top_sidenav{position:relative; padding:25px 0 22px; border-bottom:1px solid #222;}
#sidebar .top_sidenav .logo img{width:111px}
#sidebar .top_sidenav .btn_x{position:absolute; top:36px; right:0; cursor:pointer}
#sidebar .top_sidenav .btn_x img{width:14px}
#sidebar .sidenav{position:relative;}
#main_menu{border-top:1px solid #222; }
#main_menu > li{border-bottom: 1px solid #eaeaea}
#main_menu > li > a{display:block; position:relative; padding: 20px 0; font-weight: bold; color: #222; text-transform: uppercase; box-sizing:border-box; transition:.2s ease-in-out}
#main_menu > li > a.active{color:var(--main-gold1)}