@charset "utf-8";

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


/* layout */
#wrap {	min-width:320px; line-height:1.5em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased; }
.inner { width:1200px;	position:relative;	margin-left:auto;	margin-right:auto; }
.s-inner { width:1200px;	position:relative;	margin-left:auto;	margin-right:auto; overflow:hidden}
.m-inner { width:1200px;	position:relative;	margin-left:auto;	margin-right:auto; overflow:hidden}

/* 타블렛 가로 */

@media all and (max-width:1599px) {	
.m-inner {width:100%;}
}

@media all and (max-width:1399px) {	
.inner {width:100%;}
.s-inner {width:94%;}
}

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

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

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

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

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

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



/*header*/

#header{width:100%; background:#fff; position:absolute; top:0; left:0; z-index:999;}
#content { padding-top: 185px; }


.top{width:100%;  position:relative;  border-bottom: 1px solid #c5c5c5;  height:35px;}
.topmenu{position:relative; width:1200px; margin:0 auto; text-align:right;}
.topmenu ul li{display:inline-block; float:right; font-size:13px; height:35px; line-height:35px; box-sizing:border-box; padding:0 15px;}
.topmenu ul li.logins{ text-align:center;   background:#162e4e; box-sizing:border-box; }
.topmenu ul li.logins a{color:#fff;}
.topmenu ul li.joins{text-align:center; color:#fff; background:#0e3c6e; box-sizing:border-box;}
.topmenu ul li.joins a{color:#fff;}


.logoarea{width:100%;  position:relative; text-align:center; padding:25px 0px; box-sizing:border-box; overflow:hidden;}




.m_tel {display:none;}
#logo {  text-align: center; padding: 7px 0; }
.t-tel { position: absolute; right:0; top: 39px;  }
.t-tel dl { }
.t-tel dl dt { float:left;  margin-right:10px;  }
.t-tel dl dt img {width:100%; max-width:35px;  }
.t-tel dl dd { float:left; color:#464646; font-size: 1.5em; font-family: 'GmarketSansLight';  margin-right:10px; line-height:40px; }
.t-tel dl dd span {font-family: 'GmarketSansMedium';  }




#navPC { width:100%; position:relative; background:url('/include/js/main1/bg01.jpg')center; overflow:hidden; border-top: 2px solid #162e4e;}
#navPC:before{ content:""; width:100%; height:50px; background:#fff; display:block; z-index:0;border-bottom: 1px solid #c5c5c5; 
			   position:absolute; top:0; left:0;  }
#navPC #gnb{ width:100%; position:relative; z-index:1;  }
#navPC .depth1 { width:20%; float:left; text-align:center; position:relative; border-right: 1px solid #c5c5c5;  }
#navPC .depth1:first-child { border-left: 1px solid #c5c5c5; }
#navPC .depth1>div{font-size:17px; line-height:50px; position:relative; color:#000;  font-weight:500;}
#navPC .depth1>div span{cursor:pointer; }
#navPC .depth2{display:none; padding:0.8em 0;  height:250px; box-sizing:border-box; text-align:left; padding-left:25px; }
#navPC .depth1:first-child .depth2{}
#navPC .depth2 li{font-size:16px; padding:5px 0; font-family:'Noto Sans Korean'; }
#navPC .depth1:hover .depth2{background:#FFF;}
#navPC .depth1:hover div{color:#fff; font-size:17px; background:#162e4e;}
#navPC .depth2 li:hover{color:#0099cc; font-weight:500; }

#header .headerTop>div.navM_open{display:none; position:absolute; top:0; padding:35px 0; right:0; cursor:pointer; z-index:100;}
#header .navM_open span{display:block; width:30px; height:2px; background:#555; position:relative;}
#header .navM_open span.m{margin:6px 0px;}
#header .navM_open:hover span.m{right:0; }

#navMobile{ overflow-y:scroll;transform:translateX(100%); transition: all ease 0.8s 0s;  position:fixed; width:280px; z-index:99; right:0; top:0; height:100%; box-sizing:border-box; background:#FFF; }
#navMobile .nav_top { box-sizing:border-box; background:#53bfe7; padding:20px 15px; overflow: hidden; }
#navMobile .nav_top a{ color:#FFF; margin-right:7px;  font-size: 1em; }
#navMobile .depth1{border-bottom:1px solid #ddd; font-size: 14px;}
#navMobile .depth1>div{padding:15px 15px; line-height:1em; font-weight:500; cursor:pointer; display: block; }
#navMobile .depth2{display:none; border-top:1px solid #ddd;}
#navMobile .depth2 li{box-sizing:border-box; padding:10px 25px; border-top:1px dotted #ddd; font-size: 13px; background:#f2f6f8}
#navMobile .depth1:hover>div{color:#53bfe7}
#navMobile .depth2 li:hover>a{font-weight:500; color:#54d9c8;}
#navMobile .depth2 li:first-child{border-top:0;}
#navMobile .depth2 li>span{padding:0 0px 10px;box-sizing:border-box; display:block}
#navMobile .depth2 li:hover>span{font-weight:500; color:#6ABE49; cursor:pointer;}


.gnbBG{position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:10;  display:none; opacity:0; transition: all ease 2s 0s; top:0; left:0;}

body.open,
html.open{overflow:hidden;}


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

#navPC .depth1>div { font-size: 1.15em; }
.topmenu{width:100%;}
}

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

   .go-top {display:none;}
	.m_logo{height:80px; padding-left:15px; border-bottom:1px solid #ddd;  padding-top:20px !important; line-height:80px;box-sizing:border-box;  text-align:left; }
	.m_logo img{width:70%;}
	#header.open #navMobile{transform:translateX(0%); transition: all ease 0.8s 0s;}
	#header.open .navM_open { top:-10px !important;}
	#header.open .navM_open span{background:#000;}
	#header.open .navM_open span.m{display:none;}
	#header.open .navM_open span.t{transform: rotate(45deg); transition-duration: 300ms;   transition-property: all;   transition-timing-function: ease;}
	#header.open .navM_open span.b{transform: rotate(-45deg); transition-duration: 300ms;   transition-property: all;   transition-timing-function: ease; top:-2px;}
	#header.open .gnbBG{ display:block; opacity:1; transition: all ease 2s 1s;}

	#header { border-bottom:1px solid #ddd; }
	#header .headerTop #logo { padding: 20px 0; }
	#header .headerTop #logo img{height:50px}
	#content { padding-top: 90px; }
	#navPC { display: none; }

	.t-tel dl { display: none; }

	.m_tel {display: block;  position: absolute; left: 0; top:50%; margin-top: -25px; }
	.m_tel a img { height:50px; }


	
	#header .headerTop>div.navM_open{display:block; }
}


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

	#content { padding-top: 70px; }

	#header .headerTop{}
	#header .headerTop #logo { padding: 10px 0;}
	#header .headerTop #logo img{height:40px}
	#header .headerTop>div.navM_open{padding:24px 0;}
	#navMobile .nav_top { padding:20px 15px; }
	#navMobile .nav_top h1 { }
	#navMobile .nav_top a { font-size: 1.0em; }
	#header.open .headerTop>div.navM_open{padding:27px 0;}

	#header .navM_open span { width: 25px; }

	.m_tel { margin-top: -20px; }
	.m_tel a img { height:40px; }
}

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

#content { padding-top: 60px; }
#header .headerTop #logo { padding: 15px 0;}

.m_tel { margin-top: -15px; }
.m_tel a img { height:30px; }

#header .headerTop>div.navM_open{padding:22px 0;}
#header.open .headerTop>div.navM_open{padding:24px 0; }

}


#footer { position: relative; width: 100%; overflow: hidden; background:#f7f7f7; padding: 2% 0; }
#footer ul {   }
#footer ul li{float:left; font-size:14px;}
#footer ul li:first-child { width:80%; text-align:right; padding-right:35px; box-sizing:border-box;}
#footer ul li:last-child { width:20%;  text-align:right;}
#footer p { font-family: 'Noto Sans KR'; color:#b5b5b5; font-size: 0.85em; margin:0 0 0 7px; letter-spacing:0; }


.copymenu{width:100%;  border-top: 1px solid #c5c5c5; height:55px; line-height:55px; ; font-size:14px;}
.copy{width:1200px; text-align:right; margin:0 auto; height:55px; line-height:55px;  border-left: 1px solid #c5c5c5; 
 border-right: 1px solid #c5c5c5;
}
.copy span{padding-right:20px;}
.mobileshow{display:none;}

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

#footer h1 img { max-width: 25%; }
.copy{width:100%; text-align:center; font-size:13px;   border-left: 0px solid #c5c5c5; 
 border-right: 0px solid #c5c5c5;}
 .mobileshow{display:block;}
}


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

#footer h1 img { max-width: 20%; }
#footer ul { margin-top: 2.5vw; }
#footer p { margin-top: 1.5vw; }
#footer ul li{float:left; font-size:12.5px; line-height:20px;}
#footer ul li:first-child { width:100%; text-align:center; padding-right:0px; box-sizing:border-box;}
#footer ul li:last-child { width:20%;  text-align:right; display:none; }

}

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

#footer { padding: 5% 0; }
#footer h1 img { max-width: 25%; }

}

@media all and (max-width:480px) {
#footer ul li:first-child { margin-top:0 px;}
#footer h1 img { max-width: 30%; }
#footer ul li { margin:0px;  font-size:12.5px;}

}