@charset "utf-8";

/* mobile gnb ani */
@-webkit-keyframes fade {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
@keyframes fade {
  0% { opacity: 0;}
  100% { opacity: 1;}
}


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.04em; line-height:1.5; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased; overflow-x: hidden;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1.6rem; }
#headerwrap { position:relative; width:100%; height:140px; z-index:999999; }
.container {	width:100%;	position:relative; 	margin:0 auto;	}
.inner {	width:1240px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1240px;	position:relative;	margin-left:auto;	margin-right:auto;}
#footer {	width:100%;	clear:both;	position:relative;	margin:0 auto;	background:#1f1f1f; padding: 50px 0 72px; }


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

/* 타블렛 가로 */
@media all and (max-width:1480px) {
    
}

@media all and (max-width:1280px) {
    
}

@media all and (max-width:976px) {
    html { font-size: 60% !important; }
    #footer {padding: 50px 0 120px; }
}

@media all and (max-width:767px) {
    html { font-size: 0.55rem !important; }
}

@media all and (max-width:480px) {
  html { font-size: 2.1vw !important; }
}







/* layout */

.col-12 { position: relative; width: 100%; margin: 0 auto; }
.col-s-12 { position: relative; width: 1400px; margin: 0 auto; }

.col-9 { position: relative; width: 75%; float: left; overflow:hidden;  box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.col-7 { position: relative; width: 60%; float: left; overflow:hidden;  box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
.col-6 { position: relative; width: 50%; float: left; overflow:hidden;  box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.col-5 { position: relative; width: 40%; float: left; overflow:hidden;  box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.col-4 { position: relative; width:33.33%; float: left; overflow:hidden;  box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.col-3 { position: relative; width:25%; float: left; overflow:hidden;  box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.col-2 { position: relative; width:16.66%; float: left; overflow:hidden;  box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

.col-s-3 { position: relative; width:25%; float: left; overflow:hidden;  box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.col-s-4 { position: relative; width:33.33%; float: left; overflow:hidden;  box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.col-s-6 { position: relative; width: 50%; float: left; overflow:hidden;  box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

.show-1400 { display: block; }
.hide-1400 { display: none; }

@media screen and (max-width:1299px) {

.col-s-12 { width: 100%; } 

}

@media screen and (max-width:1199px) {

.show-1199 { display: block; }
.hide-1199 { display: none; }

}


@media screen and (max-width:977px) {

}

@media screen and (max-width:767px) {

.col-3 { width: 100%; }
.col-6 { width: 100%; }
.col-9 { width: 100%; }

.col-s-3 { width: 50%; }

.show-767 { display: block; }
.hide-767 { display: none; }

}

@media screen and (max-width:640px) {

.col-7 { width: 100%; }
.col-5 { width: 100%; }

.col-s-6 { width: 100%; }


.show-640 { display: block; }
.hide-640 { display: none; }

}

@media screen and (max-width:568px) {

.col-4 { width: 100%; }

}

@media screen and (max-width:480px) {

.col-s-3 { width: 100%; }


}

@media screen and (max-width:320px) {



}

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

#header #logo { font-size:0; padding-left:50px; z-index:9997; position:relative}
#header #logo a { width:75px; height:46px;}
#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:#222; }
.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 {display: flex;}
#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.7rem; display: flex; align-items: center; height: 80px;; position:relative; width: auto; padding: 0 20px; cursor: pointer;letter-spacing:0;}
#gnb_pc > ul > li > div  a { color:#111;   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:80px;}
#header.scroll .hd_bx { line-height:70px;  }

#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 {font-size: 1.6rem; padding: 0 14px;}
}

@media all and (max-width:1599px){
    #header #logo { padding-left:20px }
    #header #logo img{max-width: 240px;}
    #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 .sns { padding-right:90px}
    .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: 220px;}
    #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:46px; height:46px }
    #gnb_mo { padding: 60px 0; }
    
    #header .sns { padding-right:60px}
    #header #logo img{max-width: 200px;}
    .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{}
#footer .f_logo{text-align: center; padding-bottom: 38px; border-bottom: 1px solid #444;}
#footer .f_logo img{max-width: 282px; width: 100%;}
#footer .info{text-align: center; margin-top: 20px;}
#footer .info span{font-size: 1.4rem; 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;}
#footer ul{display: flex; justify-content: center; margin-top: 20px;}
#footer ul a{color: #fff; font-size: 1.4rem; opacity: 0.5;}
/* #footer ul a{background: #959595; color: #fff; border-radius: 5px; padding: 5px 10px;font-size: 1.4rem;} */

@media all and (max-width:690px){
    #footer{height: auto !important;}
    #footer .f_logo{padding-bottom: 16px;}
    #footer .f_logo img{max-width: 42vw;}
    #footer .info{margin-top: 25px;}
}

#Quick { position: fixed; width: 85px; top: 50%; right:20px; z-index:99; transform: translateY(-50%);}
#Quick ul {padding:20px 10px;  border-radius:40px; background:rgba(255,255,255,0.95); border:1px solid #f9f9f9;  box-shadow:3px 3px 5px rgba(85,85,85,0.1);  }
#Quick ul li {text-align:center;margin-top:1em;}
#Quick ul li:first-child{margin-top: 0;}
#Quick ul li:last-child {}
#Quick ul li a { display: block;}
#Quick ul li a p { font-size:1.4rem; font-weight:600; color:#686868}
#Quick ul li a img {width:100%; max-width: 50px;}
#Quick ul li a:hover p {color:#222}

@media all and (max-width:1140px) {
	#Quick {  width: 64px; }
	#Quick ul {padding:8px}
	#Quick ul li a p {display:none}
}
@media all and (max-width:976px) {
  #Quick { width: 100%; top: auto; bottom: 0; transform: translateY(0%); right: 0;}
  #Quick ul li a img{width: 40px;}
  #Quick ul {padding:5px; border-radius: 0; box-shadow: none; display: flex; align-items: flex-end; background-color: #fff;}
  #Quick ul li{width: 50%;}
  #Quick ul li a p {display:block; font-size: 1.3rem; margin-top: 5px;}
  #Quick ul li a p br{display:none}
}