/*-----기본-----*/
html{font-size:20px;}
body{font-size:1rem}
.tablet{display:none;}
.mob{display:none;}
#wrap{position:relative; line-height:1.5; overflow:hidden; font-size: .9rem;
    margin: 0 auto;}
#wrap img { border:none; }
#wrap i{vertical-align:inherit;}
.word-split{overflow:hidden; opacity:0; }
.word-split.splitting{opacity:1.0; }
.word-split.splitting .word{overflow:hidden; line-height:1.1; display:inline-block;}
.word-split.splitting .char{display:inline-block; position:relative; font-size:inherit; font-family:inherit; font-weight:inherit; opacity:0; }


#header{height:4.5rem;position:absolute;left:0;top:0;z-index:999;width:100%;background:rgba(0,0,0,0.4);}
#header .header-inn{width:1720px;margin:0 auto;display:flex;justify-content:center;align-items:center;}
#header .header-inn #nav > ul {display:flex;align-items:center;}
#header .header-inn #nav > ul > li{padding:0 2.625rem;}
#header .header-inn #nav > ul > li > div{line-height:4rem;color:#fff;font-size:1rem;}
#header h1 {position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);z-index:999;}
#header .lang{position:absolute;right:6.5rem;color:#fff;height:4.5rem;top:0;line-height:4.5rem;cursor:pointer;font-size:0.9rem;width:3rem;background:url(/images/default/main/lang-bg.png)no-repeat center right;z-index:999;}



/*-----네비게이션-----*/
#header .header-inn #nav{}
#header .header-inn #nav ul {clear:both;  position:relative; box-sizing:border-box;height:100%;}
#header .header-inn #nav ul li { display:inline-block;width: auto; float:none; vertical-align:top;position:relative;}
#header .header-inn #nav ul li {position:relative; }
#header .header-inn #nav ul li a{text-align:center; color:#fff; display:inline-block; height:4.5rem; line-height:4.5rem; text-transform: uppercase; position:relative; transition: all .2s; -webkit-transition: all .2s; font-size:1rem;}

#header .header-inn #nav ul li ul {z-index: 10; position: absolute; width:10rem;  left:50%; margin-left:-5rem; top:4.5rem; padding:1.5rem 0 .5rem; box-sizing:border-box; text-align:center;background: linear-gradient(147deg, #2a9863 4.81%, #146f4c 58.59%, #014d39 88.52%);height:auto;   display: none;	animation-name: slide_down;	animation-duration:0.5s;    animation-duration: linear; animation-direction: alternate; animation-fill-mode: forwards;border-radius:0.5rem;}
#header .header-inn #nav ul li ul li {display:block;margin:0; margin-bottom:13px; line-height:1.5;}
#header .header-inn #nav ul li ul li a{display:block; color:#fff; font-size:0.9rem; padding:0; height:auto; font-weight: 500; line-height:1.5; transition: all .2s; -webkit-transition: all .2s;}
#header .header-inn #nav ul li ul li a:before{content:""; display:block; clear:both;}
#header .header-inn #nav ul li ul li a:hover{color:#fff; }
#header .header-inn #nav ul li.active > div > a{}
#header .header-inn #nav ul li.active ul li:after{display:none;}


/*-----회원서비스-----*/
.log_menu{position:absolute;right:8rem;top:50%;transform:translateY(-50%); color:#fff; font-size:0.75rem;}
.log_menu li{display:inline-block; margin-right:10px;}
.log_menu li a{color:#fff;}

/*-----언어별-----*/
#header .lang{position:absolute;font-size:0.9rem; color:#fff;right:6rem; top: 50%;  transform:translateY(-50%); height: 1.2rem; line-height: 1.2rem;}
#header .lang > a { display:inline-block; width:2.65rem; cursor:pointer;background:url(/images/default/main/arrow-bottom.svg)no-repeat center right; background-size:0.5rem; color:#fff;font-weight:600;}
#header .lang ul{display:none; background: rgb(0 0 0 / 50%);margin-top:0.65rem;}
#header .lang ul li{text-align:center; line-height: 1.8rem;}
#header .lang ul li a{color:#fff;font-size:0.8rem;}
.mob-lang{display: none;}


/*-----사이트맵 버튼-----*/
#header .btn-gnb-menu{position:absolute; right:0; top:0; width:4.5rem; height:4.5rem; cursor:pointer; z-index:9999;text-align:center; -webkit-transition: all 0.25s; transition: all 0.25s;background:#014d39;}
#header .btnAll {position:relative; display:block; width:1.6rem; height:1.15rem; margin:0 auto; top:50%;  transform:translateY(-50%);outline: none; z-index:9999;}
#header .btnAll span { display: inline-block; width: 100%; height: 2px; position: absolute; background-color: #fff; -webkit-transition: all 0.25s; transition: all 0.25s; }
#header .btnAll > span:nth-child(1) { top: 0; right:0;}
#header .btnAll > span:nth-child(2) { top: 0.5rem; right:0; }
#header .btnAll > span:nth-child(3) { top: 1rem; right:0;}
#header.open .btnAll > span{}
#header.open .btnAll > span:nth-child(1) { top: 0.5rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 1.5rem;}
#header.open .btnAll > span:nth-child(2) { top: 0; opacity: 0; width: 1.5rem;}
#header.open .btnAll > span:nth-child(3) { top: 0.5rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 1.5rem;}
@keyframes slide_down {
  from {
    transform: translateX(0px) translateY(-30px);
	opacity:0;
  }
  to {
    transform: translateX(0px) translateY(0px);
	opacity:1;
  }
}

#header a img {filter: brightness(3);}

/* 헤더 오버스크롤 */
#header.over,
#header.scroll{background:#fff; box-shadow: 1.2px 3.8px 22.8px 1.2px rgb(0 0 0 / 4%);}
#header.scroll a img,
#header.over a img { filter: brightness(1);}
#header.over .header_inner #nav ul li a,
#header.scroll .header_inner #nav ul li a,
#header.over a,
#header.scroll a{color:#444;}
#header.over .btn-gnb-menu ,
#header.scroll .btn-gnb-menu{background-color: #083C6B;}
#header.over .select_btn{color:#444;}

/*사이트맵*/
#header #navi{position:fixed; top:-100%; left:0; width:100%; height:100%; padding-top:0; overflow:hidden;  z-index:20; transition:top 0.45s;}
#header.open #navi{transition:top 0.45s; top:0px;}
#header.open #navi .navi-bg{position:absolute;width:100%;height:100%;left:0;top:0;background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);z-index:-1;}

#menuAll .top_menu{display:none;}
#menuAll h3{font-size:1.5rem; }
#menuAll .mobile_top{width:100%; height:100%; position:relative; display: flex; align-items: center;}
#menuAll .mobile_top:after{content:''; display:block; position:absolute; width:4.15rem; height:39.9rem; background:url('/images/default/main/sitemap-bg.png')no-repeat center center; background-size: cover; bottom:0; right:0.85rem;}
#menuAll .mobile_top h4{font-size:3rem; padding: 0 13%; color:#333;}
#menuAll .mobile_top > ul {display:flex;width:1720px;margin:0 auto;}
#menuAll .mobile_top > ul  > li {width:calc(100% / 6);color:#fff;padding:0 1.5%;}
#menuAll .mobile_top > ul  > li > div > a{color:#fff;font-size:1.5rem;font-weight:600;min-height:2.6em;height:3.9rem;margin-bottom:1rem;display:inline-block;}
#menuAll .mobile_top .mbtop > li > a{position:relative; color:#fff; font-size:1.4rem; line-height:1; font-weight: 600; margin-bottom:1.6rem;}
#menuAll .mobile_top > ul > li > a{display:block; position:relative; transition: all .5s; -webkit-transition: all .5s;}
#menuAll .mobile_top > ul > li > ul{}
#menuAll .mobile_top > ul > li > ul > li{position:relative;}
#menuAll .mobile_top > ul > li > ul > li:not(:last-child){padding-bottom:0.5rem;}
#menuAll .mobile_top > ul > li > ul > li:hover > a{color: #40af38; font-weight: 600; text-decoration: underline; text-underline-position:under;}
#menuAll .mobile_top > ul > li > ul > li > a{position: relative;  display:inline-block; width:auto; background:none;font-size:0.9rem; color:#fff; font-weight: 500; padding-left:0.7rem;}
#menuAll .mobile_top > ul > li > ul > li > a:after{content:''; display:block; position:absolute; width:5px; height:5px; background:#ddd; border-radius:50%; top:50%; transform:translateY(-50%); left:0;}
#menuAll .mobile_top > ul > li > ul > li:hover > a:after{background:#40af38;}
#menuAll .mobile_top > ul > li > ul > li > ul{margin:0.5rem 0 0 0.7rem;}
#menuAll .mobile_top > ul > li > ul > li > ul > li{}
#menuAll .mobile_top > ul > li > ul > li > ul > li a{font-size:0.8rem; color:#666; padding-left:0.4rem; position: relative;}
#menuAll .mobile_top > ul > li > ul > li > ul > li a:after{content:''; display:block; position:absolute; width:5px; height:1px; background:#666;  top:50%; transform:translateY(-50%); left:0;}
#menuAll .mobile_top > ul > li > ul > li > ul > li a:hover{color:#40af38;}
#menuAll .mobile_top > ul > li > ul > li > ul > li a:hover:after{background:#40af38;}
#menuAll .mobile_top > ul > li > ul > li > a strong{position: relative; color: #40af38; font-weight: 600; text-decoration: underline; text-underline-position:under;}

#header #menuAll .mobile_top > ul > li {opacity: 0;transform: translateY(-40px);transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li{    opacity: 1;transform: translateY(0);transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:before{content:'';position: absolute;top: -1.3rem;left: 12%;content: '';width: 0.6rem;height: 0.6rem;background-color:#2a9863;border-radius: 100%;opacity: 0;transform: translateY(-30px);transition: all 0.4s ease-in-out;
}
#header.open #menuAll .mobile_top > ul > li:hover:before{opacity: 1; transform: translateY(0);}
#header.open #menuAll .mobile_top > ul > li:nth-child(1){    transition-delay: .2s;transition-duration: 0.5s;padding-top:0;}
#header.open #menuAll .mobile_top > ul > li:nth-child(2){    transition-delay: .4s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(3){    transition-delay: .6s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(4){    transition-delay: .8s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(5){    transition-delay: 1.0s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(6){    transition-delay: 1.0s;transition-duration: 0.5s;}

@media (min-width: 2000px) {
	#menuAll .mobile_top{justify-content: center;}
	#menuAll .mobile_top .mbtop:after{width:calc(100% - 13rem);}
}

.footer-top{background:#01281e;}
.footer-top #nav > ul {display:flex;}
.footer-top #nav > ul > li {width:calc(100% / 6);position:relative;text-align:center;padding:2.5rem 0;}
.footer-top #nav > ul > li:not(:last-child):after{content:'';display:block;position:absolute;width:1px;height:100%;background:rgba(255,255,255,0.2);right:0;top:0;}
.footer-top #nav > ul > li > div > a{font-size:0.95rem;color:#fff;margin-bottom:1.25rem;display:block;}
.footer-top #nav > ul > li > ul > li > a {font-size:0.8rem;color:#b0b0b0;position:relative;}
.footer-top #nav > ul > li > ul > li > a:after{content:'';display:block;position:absolute;height:1px;bottom:-5px;left:0;width:0;transition-duration: 0.5s;background:#fff;}
.footer-top #nav > ul > li > ul > li > a:hover:after{width:100%;transition-duration: 0.5s;}
.footer-top #nav > ul > li > ul > li > a:hover{color:#fff;font-weight:bold;}
.footer-top #nav > ul > li > ul > li:not(:last-child) {margin-bottom:1rem;}

.footer{background:#002018;padding:3rem 0 3.5rem 0;}
.footer .left h1{margin-bottom:1.75rem;}
.footer .left ul {display:flex;gap:0.75rem;}
.footer .left ul li{font-size:0.8rem;color:#fff;}
.footer .left ul li span {color:#999;margin-right:0.45rem;}
.footer .left p.copy{color:#999;font-size:0.8rem;margin-top:4.5rem;} 

.footer .inner{display:flex;justify-content:space-between;}
.footer .right ul li:not(:last-child) {margin-bottom:1.25rem;}
.footer .right ul li a {font-size:0.8rem;color:#999;}
.footer .right ul li a img {margin-right:0.75rem;}

@media (max-width:1400px){
.footer .left {padding-right:1rem;}
.footer .left ul{flex-wrap:wrap;}
}

@media (max-width:1030px){
.footer-top{display:none;}

}


/*팝업 롤링 추가*/
.layerPopup {position:absolute;top:230px;left:10rem; width:450px; background:#fff;line-height:auto;z-index:99999;border:10px solid #15334F;box-shadow:0 0 4px rgba(0,0,0,0.2); padding-bottom:40px;}
.layerPopWrap{position:relative; width:100%; height:100%;}
.layerPopup ul li img{width:100%;}


/*퀵메뉴 */
.quick{position:fixed;right:0;bottom:2rem;display:flex; flex-direction:column;}
.quick a{width:3.75rem;display:flex;justify-content:center;align-items:center; flex-direction:column;}
.quick a span{    writing-mode: vertical-rl; text-orientation: sideways;font-size:15px;font-weight:600;}
.quick a:nth-child(1) {background:#2a9863;padding:1rem 0 ;}
.quick a:nth-child(1) span {color:#fff;}
.quick a:nth-child(2) {background:#f4d623;padding:1rem 0 ;}
.quick a:nth-child(2) span {color:#231715}
.quick a:nth-child(3) {height:3.45rem;background:#dee0e9;}
.quick a img{margin-top:0.5rem;}
.quick a:nth-child(3) img{margin-top:0;}


@media (max-width:1030px){
	.quick{right:1rem;}
	.quick a span{display:none;}
	.quick a{border-radius:50%;width:3rem;height:3rem;}
	.quick a img{margin-top:0;}
	.quick a:nth-child(3){height:3rem;}
	.quick a:not(:last-child){margin-bottom:0.75rem;}
}


/********************************************************
■ 레이아웃 변경
********************************************************/

@media (max-width:1720px){
	#header .header-inn {width:100%;padding:0 1rem;}
}
@media (max-width:1400px){
#header .header-inn #nav > ul > li{padding:0 1rem;}
}


@media (max-width:1300px){
	/*헤더*/
	#header .header_inner{width: 100%;}
	#header .header_inner #nav ul{}
	#header .header_inner #nav ul li a {font-size: .9rem; padding: 0 1.5rem;}
	
	#footer ul{left:80%;}
}



/********************************************************
■ 태블릿
********************************************************/
@media (max-width:1030px){
	html{font-size:16px;}
    body{font-size:1rem}
	#wrap{font-size:1rem;}
	.tablet{display:block;}

	#header{height:4rem;}
	/*헤더*/
	#header h1 img,
	.footer h1 img{width: 6rem; vertical-align:middle; }
	#header .header_inner {height: 4rem;}
	#header .header_inner #nav {display: none;}
	#header .header-inn #nav > ul > li{display:none;}
	#header.open .lang > a{background: url(/images/default/main/lang-bg-mob.png) no-repeat center right;
    background-size: 0.5rem;color:#333;}

	/*언어*/
	.option_list{top:4rem;right:4rem;}

		/*사이트맵*/
	#header .btn-gnb-menu{width:4rem;height:4rem;}
	#header.open #navi .navi-bg{background:#fff;backdrop-filter: blur(0);}
	#menuAll .mobile_top > ul{display:block;}
	#menuAll .mobile_top .mbtop > li > a{margin-bottom:0;}
	#menuAll .mobile_top > ul > li > ul > li > a:after{display:none;}

	/*-----회원서비스-----*/
	#wrap .log_menu{display:none;}
	#menuAll h3{text-align:center; padding:15px 0 10px; font-weight:normal; font-size:1.2rem; color:#fff;}
	#menuAll .log{display:block; width: 100%; position:absolute; left:0; top:0; padding-left:1.5rem; box-sizing:border-box; z-index:10;}
	#menuAll .log li{display:inline-block; height:4rem; line-height:4rem; color: #fff; position:relative;}
	#menuAll .log li a{padding: 0 1rem;}
	#menuAll .log li:after{right: .75rem; background: #000; width: 2px;}
	#menuAll .log li b{font-size:1.1rem;}
	#menuAll .log li.log_join a{padding-left:0;}
	#menuAll .log li.log_join:after{content : ""; display : block; position : absolute; right:0; top: 35%; width :1px; height : 30%; background:rgba(255, 255, 255, .3);}

	/*-----마이페이지-----*/
	#menuAll .membership{display: block; background: #DC4976; margin-top:4rem;}
	#menuAll .membership {clear:both;overflow:hidden;  }
	#menuAll .membership li {position: relative; float:left;width: 50%; border-bottom:1px solid rgba(255, 255, 255, .3); text-align:center; line-height:1;padding:1.3rem 0;}
	#menuAll .membership li:after{content : ""; display : block; position : absolute; right:0; top: 0; width :1px; height : 100%; background:rgba(255, 255, 255, .3);}
	#menuAll .membership li:nth-of-type(2n):after{display: none;}
	#menuAll .membership li a{color:#fff;}
	#menuAll .membership li i{vertical-align:middle; margin-right:5px; font-size:1.1rem;}

	/*전체메뉴*/
	#header #navi:after{content:'';display : block; position : absolute; left :0; top:0; width :100%; height : 4rem;background:#fff;}  


	#menuAll .mobile_top{width:100%;height:auto; background:transparent;border-top:1px solid #ddd;}
	#menuAll .mobile_top:before,
	#menuAll .mobile_top:after{display: none;}
	


    /*1차*/
	#menuAll .mobile_top .mbtop{border: 0; width: 100%; padding:0;margin-top:4rem; }
	#menuAll .mobile_top .mbtop > li{width: 100%; margin:0 !important;}
	#menuAll .mobile_top .mbtop > li:before{display:none;}
	#menuAll .mobile_top .mbtop > li > a{border:0; border-radius: 0; font-size:1.1rem; padding: 20px 1.5rem 14px; color:#333; }
	#menuAll .mobile_top .mbtop > li > a:before{display:none;}
    #navi ul.mbtop {width:100%; margin:0; padding:0;}
    #navi ul.mbtop li{margin:0; float:none; width:100%; border-bottom:1px solid rgba(0, 0, 0, .1); position:relative;}
	#navi ul.mbtop li:after{ content :"\e913"; display : block; position : absolute; right:1.5rem;  top:1rem; font-size:1.15rem; font-family:'xeicon'; font-weight:500; color:#333; }
	#navi ul.mbtop li.nosub:after{display:none;}


	#navi ul.mbtop > li > a {padding:0; background: none; text-align:left; display:block; width:100%; padding: 1rem;box-sizing:border-box; font-size:1.15rem;  font-weight: 700;  color:#262626;}
    #navi ul.mbtop li{position:relative;padding:0;}
	#navi ul.mbtop > li.open_li > a{}
    #navi ul.mbtop li.open_li:after{ content :"\e91a";}

    /*2차*/
    #navi ul.mbtop li ul {display:none; float:none; background-color:#efefef; position:relative; left:0; top:0; width:auto; height:auto; visibility:visible; padding: 2rem 1.5rem; margin-top:0; margin-left: 0;}
    #navi ul.mbtop li ul.on{display:block;}
	#navi ul.mbtop li ul li {float:none;border:none; box-sizing:border-box;  background: none; padding-left:0;}
    #navi ul.mbtop li ul li a {background:url(none);  height:auto; padding-left:0;  font-size:1rem; color:#333;}	
    #navi ul.mbtop li ul li:after,
	#navi ul.mbtop li ul li:before{display:none;}
    /*3차*/
    #navi ul.mbtop li ul li ul{display:none;border:none; height:0;background:none; margin:0; padding:0;}
    #navi ul.mbtop li ul li ul li {display:none;}
	

	/*팝업 롤링 추가*/
	.layerPopup {left:50% !important;  transform:translateX(-50%);}

	/*푸터*/
	#footer .inn{width:100%; padding:0 1rem;}
}


/********************************************************
■ 모바일
********************************************************/
@media (max-width:767px){
	html,body,#wrap{height:auto;}
	html{font-size:15px;}
    body{font-size:1rem; position:relative;}
	.web{display:none;}
	.mob{display:block;}

	/*팝업 롤링 추가*/
	.mobile_dim{width: 100%; height:100%; position: absolute; top: 0; left: 0; margin: 0; z-index: 1039; display: inline-block; background: rgba(0,0,0,0.5);}
	.layerPopup img{width:100% !important;}
	.layerPopup {left:5% !important;  transform:translateX(0%); width:90% !important; height:auto !important; top:130px;}
	.chkvsb{font-size:0.7rem !important;}
}


@media (max-width:767px){
.footer .right ul li {text-align:center;}
.footer .right ul li a img{margin-right:0;display:block;margin:0 auto;}
}