@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;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:16px; }
#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:#2c2c2c;	height: 300px;  padding: 50px 0 72px; }


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

@media all and (max-width:976px) {
	#wrap { font-size: 15px; } 
}

/* 타블렛 가로 미만 ~ 모바일 */
@media all and (max-width:767px) {
	/*#content, .inner {width:95%;}*/
	#wrap { font-size: 14px; } 
}

@media screen and (max-width:640px) {
	#wrap { font-size: 2vw; }
}

@media screen and (max-width:568px) {
	#wrap { font-size: 2.3vw; }
}

@media screen and (max-width:480px) {
	#wrap { font-size: 2.5vw; }
}






/* 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 .top_t{width: 100%; height: 130px; position: relative; border-bottom: 1px solid #eaeaea;}
#header .top_t .logo{position: absolute; left: 50%; transform: translateX(-50%); margin-top: 16px;}
#header .top_t .logo a{}
#header .top_t .logo a img{}
#header .top_t .btn{display: flex; justify-content: flex-end; align-items: center; height: 130px;}
#header .top_t .btn li{margin-left: 10px;}
#header .top_t .btn li a{}
#header .top_t .btn li a img{}

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

.menuToggle {
    display: none;
    position: absolute;
    margin-top: 24px;
    cursor: pointer;
    
}
.menuToggle img{max-width: 38px;width: 100%;}

#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: 1.4em;
    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%;}

#header .top_b{border-bottom: 1px solid #eee;}
#header .top_b #gnb{display: flex; justify-content: center;}
#header .top_b #gnb li{}
#header .top_b #gnb li a{font-size: 18px; color: #212121; padding: 23px; display: inline-block;}

#header .top_b.scroll{position: fixed; z-index: 999; background-color: #fff; width: 100%; top: 0;}

@media all and (max-width:1240px){
    #header .top_t{height: 90px; position: fixed; width: 100%; top: 0; z-index: 999; background-color: #fff;}
    #header .top_t .logo{margin-top: 15px; margin-left: 0;}
    #header .top_t .logo a img{max-width: 160px; width: 100%;}
    #header .top_t .btn{height: 90px;}
    .menuToggle {display: block;}
    .moMenu{display: block;}
    #header .top_b{display: none;}
}
@media all and (max-width:480px){
    #header .top_t{height: 72px;}
    #header .top_t .logo{margin-top: 10px;}
    #header .top_t .btn{height: 72px;}
    #header .top_t .btn li{margin-left: 6px;}
    #header .top_t .btn li a img{max-width: 36px; width: 100%;}
	 #header .top_t .logo a img{max-width: 140px; width: 100%;}
    .menuToggle{margin-top: 22px;}
    .menuToggle img{max-width: 30px;}
}


/* footer */
#footer{}
#footer .f_logo{text-align: center; padding-bottom: 38px; border-bottom: 1px solid #444;}
#footer .f_logo img{max-width: 262px; width: 100%;}
#footer .info{text-align: center; margin-top: 50px;}
#footer .info span{font-size: 0.9em; color: rgba(255,255,255,0.5); display: inline-block; margin: 0 8px;}
#footer .info span a{font-size: 1.125em; color: #666; display: inline-block; margin-bottom: 0.5em; font-weight: 400; text-decoration: underline}
#footer .copy{text-align: center;font-size: 0.875em; color: rgba(255,255,255,0.5); background: #2c2c2c; padding: 10px 0 30px;}

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