@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1rem; }
.inner {	width:1400px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1600px;	position:relative;	margin-left:auto;	margin-right:auto;}


/* 타블렛 가로 */
@media all and (max-width:1640px) {	
    .s-inner {width: 98%;}
}
@media all and (max-width:1399px) {	
.inner {width:94%;}
.s-inner {width:94%;}
}


/*Header*/
#header { position:fixed; width:100%; height:90px; box-sizing:border-box; z-index:300;  margin: 0 auto; display:flex; justify-content:space-between;align-items: center;font-family: 'Pretendard'; font-weight: bold;}
#header .hd_bx { line-height:90px;  }
#header .hd_mbx { display: none; }

#header #logo { font-size:0; padding-left:60px; z-index:9997; position:relative}
#header #logo a { width:136px; height:51px;}
#header #logo a.logo { display: block; background:url("/images/common/logo.png") no-repeat center center; background-size:auto 100%; }



.menuToggle { position: absolute; right:0; top:0; width:80px; height:80px; cursor:pointer; z-index:101; order:3; position:relative}
.menuToggle span { display:block;  height:3px;  position:absolute; top: 50%; left:50%; margin-left: -16px; transition:all 0.5s; background:#FFF; }
.menuToggle span.t { margin-top: -11px; width:34px;}
.menuToggle span.m { margin-top:-1px; width: 34px; }
.menuToggle span.b { margin-top: 9px; width:34px; }

/* #header.mo_on .menuToggle span.t {transform: rotate(45deg);  margin-top: 0;}
#header.mo_on .menuToggle span.m {width:0;}
#header.mo_on .menuToggle span.b {transform: rotate(-45deg); width:34px;  margin-top: 0;} */

#header.scroll .menuToggle span { background:#222}
#header.mo_on .menuToggle span { background:#222}




#gnb_pc {margin:0 auto}
#gnb_pc > ul > li {display:inline-block; vertical-align:top; text-align:center; position:relative;}
#gnb_pc > ul > li > div {display:block; font-size:1.8rem; line-height:100px; position:relative; width: auto; padding: 0 30px; cursor: pointer;letter-spacing:0;}
#gnb_pc > ul > li > div  a { color:#FFF;   font-weight:700 }
#gnb_pc > ul > li > ul { display: none; width:180px; background:rgba(3,78,162,.95); position: absolute; top: 100px; left: 50%; margin-left: -90px; }
#gnb_pc > ul > li > ul > li > a {display:block; width:100%; font-size:1.7rem; color:#fff; padding:1em 12px; line-height: 1.4em; border-bottom:1px solid rgba(255,255,255,0.2); box-sizing: border-box; }
#gnb_pc > ul > li > ul > li:last-child > a {border-bottom:0;}



#header .sns{display: flex; justify-content: flex-end; align-items: center; height: 130px;padding-right: 60px;}
#header .sns li{margin-left: 10px;}
#header .sns li a{width: 46px; display: inline-block;}
#header .sns li a img{width: 100%;}





#header.menu_on {background:#FFF}
#header.menu_on #logo a.logo { background:url("/images/common/logo_on.png") no-repeat center center; background-size:auto 100%; }
#header.menu_on #gnb_pc > ul > li > div  a,
#header.menu_on #gnb_pc .gnb_dp1>div>span{color:#222}
#header.menu_on #topRight p {color:#00a1e4}
#header.menu_on #topRight i { border:1px solid rgba(0,161,228,0.5); color:#00a1e4; }
#header.menu_on #topRight .tel-mo i {color:#FFF}


#header.scroll { height:90px;  }
#header.scroll .hd_bx { line-height:90px;  }

#header.scroll {background:#FFF}
#header.scroll #logo a.logo { background:url("/images/common/logo_on.png") no-repeat center center; background-size:auto 100% }
#header.scroll #gnb_pc > ul > li > div  a,
#header.scroll #gnb_pc .gnb_dp1>div>span{color:#222}
#header.scroll #topRight p {color:#00a1e4}
#header.scroll #topRight i { border:1px solid rgba(0,161,228,0.5); color:#00a1e4; }
#header.scroll #topRight .tel-mo i {color:#FFF}

#header.mo_on #logo a.logo { background:url("/images/common/logo.png") no-repeat center center; background-size:auto 100%; }

.moMenu{display: none; max-width: 50px;; position: absolute; right: 15px; top: 25px;}
.moMenu img{width: 100%;}

.menuToggle {
    display: none;
    position: absolute;
    cursor: pointer;
	top: 50%;
	transform: translateY(-50%);
	right: 2%;
    
}
.menuToggle img{max-width: 26px;width: 100%; filter: invert(1);}

#moGnb {
    display: none;
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    -ms-overflow-style: none;
}
#moGnb::before{
    content: '';
    background: rgba(0,0,0,0.8);
    width: 150vw;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: -50vw;
}
#header.mo_on #moGnb{display: block;}
#moGnb > ul > li > a {
    display: block;
    width: 100%;
    font-size: 2rem;
    color: #fff;
    line-height: 3em;
    box-sizing: border-box;
    padding: 0 2%;
    position: relative;
    text-align: center;
}

#moGnb > ul > li > ul > li > a {
    display: block;
    width: 100%;
    font-size: 1em;
    color: #fff;
    line-height: 45px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    background: #a5bd6e;
    box-sizing: border-box;
    padding: 0 2%;
}
#moGnb .smenu{padding: 0;}
#moGnb .smenu li{padding: 0;}

.moMenu.active{right: 300px;}

#moGnb{display: none;}
#moGnb #gnb{background-color: #fff;}

#moGnb .gnb_dp1_wrap{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;}


#gnb_mo { position:fixed; top:0; right:0; width:100%; height:100%; max-width:500px; padding: 80px 0;background:rgba(5,5,5, 0.90); overflow-y:scroll; -ms-overflow-style:none; z-index: 100; text-align: left;transition: all 0.4s ease; -webkit-transform: translateX(100%) rotate(0); -moz-transform: translateX(100%) rotate(0);-ms-transform: translateX(100%) rotate(0); -o-transform: translateX(100%) rotate(0);transform: translateX(100%) rotate(0); }
#gnb_mo > ul { border-top: 1px solid rgba(255,255,255,0.1); line-height:3.5em;}
#gnb_mo > ul > li > div {display:block; width:100%; font-size:1.75rem;  border-bottom:1px solid rgba(255,255,255,0.1); box-sizing:border-box; padding:0 1.5em; position:relative; cursor: pointer; }
#gnb_mo > ul > li > div:after {content:''; display:block; width:11px; height:1px; background:#fff; position:absolute; right:1em; top:50%; margin-top:-1px;}
#gnb_mo > ul > li > div:before {content:''; display:block; width:1px; height:11px; background:#fff; position:absolute; right:calc(1em + 5px); top:50%; margin-top:-6px; transition:all 0.5s;}
#gnb_mo > ul > li > div > a { color:#fff; }
#gnb_mo > ul > li > ul { display:none; }
#gnb_mo > ul > li > ul > li > a {display:block; width:100%; font-size:1em; color:#4b4b4b;padding:0 1.5em; font-weight: 500; border-bottom:1px solid #e1e1e1; background:#fff; box-sizing:border-box; line-height:3.5em;}

#gnb_mo > ul > li > div.on { background: #034ea2; }
#gnb_mo > ul > li > div.on:before {transform:rotate(90deg)}

/* #header.mo_on #gnb_mo {display:block;} */
#gnb_mo.m_menuOn{	-webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0);	-ms-transform: translateX(0) rotate(0);	-o-transform: translateX(0) rotate(0);	transform: translateX(0) rotate(0); }
    
    
    
@media all and (max-width:1780px){
    #gnb_pc > ul > li > div {padding: 0 20px;}
}
    
@media all and (max-width:1599px){
    #header #logo { padding-left:20px }
    #header #logo img{max-width: 200px;}
    #topRight {padding-right:0}
    #gnb_pc > ul > li > div { padding: 0 10px; }
}
    
@media all and (max-width:1399px){
    #header {height:80px; text-align: center; /* background:#FFF */}
    #header .hd_bx { line-height:80px; }
    #header .hd_mbx { display: block; }
    
    #gnb_pc {display:none;}
    #gnb_mo { text-align: left; }
    #header.menu_on #logo a.logo { background:url("/images/common/logo.png") no-repeat center center !important; background-size:auto 100%; }
    
    #header .sns {margin-left: auto; padding-right:110px}
    .menuToggle {display: block;}
    .moMenu{display: block;}
}
    
@media all and (max-width:976px){
    #header { height:70px; }
    
    /* #header #logo { padding-left:0}
    #header #logo a { height:45px;} */
    
    .menuToggle { width:70px; height:70px }
    #gnb_mo { padding: 70px 0; }
}
    
@media all and (max-width:767px) {
    #gnb_mo { max-width: 100%; }
    
    #header #logo { padding-left:10px }
    #header .sns { padding-right:80px}
    #header #logo img{max-width: 180px;}
    #header .sns li a{width: 35px;}
}

@media all and (max-width:568px){
    #header { height:60px; }
    #header #logo a { height:35px;width:175px; }
    #topRight .tel-mo i {width:60px; line-height:60px; }
    .menuToggle { width:40px; height:40px }
    #gnb_mo { padding: 60px 0; }
    
    #header .sns { padding-right:60px}
    #header #logo img{max-width: 160px;}
    .menuToggle span.t {width:25px;}
    .menuToggle span.m {width: 25px; }
    .menuToggle span.b {width:25px; }
    
    #header.scroll { height:60px;  }
    #header.scroll .hd_bx { line-height:60px;  }

    #header .sns li{margin-left: 5px;}
    #header .sns li a{width: 30px;}
}

/* footer */
#footer {	width:100%;	clear:both;	position:relative;	margin:0 auto;	background:#444444;	height: 250px;  padding: 50px 0; font-family:'Pretendard';}
#footer .f_logo{text-align: center;}
#footer .f_logo img{max-width: 136px; width: 100%;}
#footer .info{text-align: center; margin-top: 50px;}
#footer .info span{font-size: 1.6rem; color: rgba(255,255,255,0.5); display: inline-block; margin: 0 8px;}
#footer .copy{text-align: center;font-size: 1.4rem; color: rgba(255,255,255,0.5); margin-top: 10px;}

@media all and (max-width:690px){
    #footer{height: auto !important; padding: 20px 0 30px;}
    #footer .f_logo img{max-width: 100px;}
    #footer .info{margin-top: 25px;}
    #footer .info span{font-size: 1.4rem;}
    #footer .copy{font-size: 1rem;}
}