/*-----기본-----*/
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;}
#wrap img { border:none; }
#wrap i{vertical-align:inherit;}

.hidden {clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px;}

@media (max-width:500px){
	#header .mob2 { display: none; }
}

/*헤더*/
#header{position:relative;z-index:99999;}
#header .header-cont{position:relative;}
#header .header-link {background:#269C7D;padding:0 4.9rem;display:flex;}
#header .header-link a {color: #fff; font-size: 1rem; font-weight: 600; line-height: 0.75rem; padding:0.65rem 2rem;min-width:7.2rem;text-align:center;position: relative; padding-right: 2.5rem; }

@media (max-width:768px){
	#header .header-link a span { display: none; }
}

#header .header-link a:nth-child(2), #header .header-link a:nth-child(3) { padding: 0.65rem 0.95rem; padding-right: 2.5rem; }
#header .header-link a:first-child { background: #00403A; }
#header .header-link a:nth-child(2) { background: #00694E; }
#header .header-link a:first-child:before { background: #00403A; content: ''; height: 2.05rem; width: 5.4rem; left: -5.4rem; position: absolute; top: 0; }
#header .header-link a:after { background: #fff url('/images/default/main/header-link01.svg')no-repeat center center; content: ''; height: 1.05rem; width: 1.05rem; right: 1rem; position: absolute; top: 50%; transform: translateY(-50%); border-radius: 50%; }
#header .header-link a:nth-child(2):after { background: #fff url('/images/default/main/header-link02.svg')no-repeat center center; }
#header .header-link a.on {background:#fff;color:#333;border-right:none;}
/* #header .header-link a:hover{color:#269C7D;} */

#header .header_inner {padding:0 2.5rem ;margin:0 auto;display:flex;justify-content:space-between;height:4.5rem;align-items:center;position:relative;
background:#fff;}
#header .header_inner #nav > ul {display:flex;gap:0 4rem;}
#header .header_inner #nav > ul > li{height:4.5rem;}
#header .header_inner #nav > ul > li > div:not(.depth-div) {display:flex;justify-content:center;align-items:center;height:100%;}
#header .header_inner #nav > ul > li:hover > div:first-child {border-bottom: 2px solid #269C7D;}
#header .header_inner #nav > ul > li:hover > div:first-child > a {color:#269C7D}
#header .header_inner #nav > ul > li > div > a {color: #333; font-size: 1rem; font-weight: 600;    height: 100%; display: flex; align-items: center;}
#header .header_inner #nav > ul > li > ul {z-index: 10;display:none;position: absolute; width:100%; left:0; top:4.5rem;  box-sizing:border-box; text-align:center;padding:3.25rem 10.8rem 2rem calc(30% + 2.5rem);flex-wrap:wrap;display:none;border-top:1px solid #ddd;overflow:hidden;gap:1.75rem 1.25rem;justify-content:flex-start;align-items:flex-start;}

#header .header_inner #nav > ul > li > ul > li {width:calc((100% - (1.25rem * 3)) / 4);position:relative;}
#header .header_inner #nav > ul > li > ul > li > a {border-radius: 0.5rem; border: 1px solid #DDD; background: #F4F5F8;display:block;padding:0.9rem;color: #666; font-size: 0.9rem; font-weight: 600; line-height: 0.9rem;height:100%;}
#header .header_inner #nav > ul > li > ul > li > a:hover {border:1px solid #269C7D;color:#269C7D;background:#fff;}
#header .header_inner #nav > ul > li > ul > li > a.newBlank{display:flex;justify-content:center;align-items:center;gap:0 5px;}
#header .header_inner #nav > ul > li > ul > li > a.newBlank:after{content: ''; width: 0.9rem; height: 0.9rem; background: url(/images/default/content/navi-blank.svg) no-repeat center center; background-size: cover;}
#header .header_inner #nav > ul > li > ul > li > a.newBlank:hover:after{background:url(/images/default/content/navi-blank-on.svg)no-repeat center center;background-size:cover;}



#header .header_inner .header-right {display:flex;align-items:center;gap:0 1rem;}
#header .header_inner .header-right .search-btn {width:2.25rem;height:2.25rem;display:inline-block;background:url(/images/default/main/header-search-icon.svg)no-repeat center center;background-size:cover;z-index:999;position:relative;}
#header .header_inner h1{z-index:999;}

#header .header_inner .header-right .search-btn.on {background:url(/images/default/main/header-x-icon.svg)no-repeat center center;background-size:cover;}


.depth-div{background:url(/images/default/main/menu-intro-bg.png)no-repeat center right;    animation-duration: 0.5s;width:30%;height:0;position: absolute;z-index: 10;left: 0;top: 4.5rem;}


.menu-intro {display: none;border-radius:0;padding:3.25rem 1rem  0  10.75rem;}
.menu-intro span {color: #FFF; font-size: 0.9rem; font-weight: 400; line-height: 1.4rem;display:block;opacity: 0.8;margin-top:1.25rem;}
.menu-intro strong {color: #FFF; font-size: 2rem; font-weight: 700; line-height: 2rem;display:block;padding-left:0.65rem;position:relative}
.menu-intro strong:before{content:'';position:absolute;width:0.4rem;height:0.4rem;background:#FABE00;left:0;top:0;}




.header-bg {z-index: 2;position: absolute; width:100%; left:0; top:4.5rem;  box-sizing:border-box; text-align:center; background:#fff; animation-duration:1s;    animation-direction: alternate; animation-fill-mode: forwards;box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.10);height:0;transition-duration: 0.5s;display:none;height:19.85rem;background:#fff url(/images/default/main/menu-intro-bg.png)no-repeat left top;background-size: 30% 100%;}
#header.over .header-bg{display:block;}



/*-----사이트맵 버튼-----*/
#header .btn-gnb-menu{width:1.95rem;height:1.6rem;position:relative;z-index:999;}
#header .btn-gnb-menu span{display: inline-block;width: 100%;height: 2px;background-color: #2D3748;-webkit-transition: all 0.25s;transition: all 0.25s;}
#header .btn-gnb-menu button{width:100%;height:100%;display:flex; flex-direction:column;justify-content: space-between}


#header.open .btn-gnb-menu span:nth-child(1) {
	transform: translateY(0.7rem) rotate(45deg);
}
#header.open .btn-gnb-menu span:nth-child(2) {
	opacity: 0;
}
#header.open .btn-gnb-menu span:nth-child(3) {
	opacity: 0;
}
#header.open .btn-gnb-menu span:nth-child(4) {
	transform: translateY(-0.7rem) rotate(-45deg);
}
@keyframes slide_down {
  from {
    transform: translateX(0px) translateY(-30px);
	opacity:0;
  }
  to {
    transform: translateX(0px) translateY(0px);
	opacity:1;
  }
}



/*사이트맵*/
#header #navi{background:#fff url(/images/default/main/site-bg.png)no-repeat right bottom+2.5rem; position:fixed; top:0; right:-100%; width:100%; height:100%; padding-top:0; overflow:hidden;  z-index:20; transition:right 0.45s;overflow-y:scroll;display:flex;padding:4.5rem 2.5rem 1rem 2.5rem;gap:0 5rem;align-items: flex-start;}
#header.open #navi{transition:right 0.45s; right:0px;overflow:hidden;}

#header #navi .site-img {width:30rem;height:41rem;border-radius:1.25rem;background:url(/images/default/main/navi-img.png)no-repeat center center;background-size:cover;}
#header #navi .site-img p {color: #FFF; font-size: 1.5rem; font-weight: 700; line-height: 1.5rem;padding:3.25rem 2.5rem;}
#header #navi > ul {flex:1;display:flex; flex-direction:column;gap:2rem 0;margin-top:1.27rem;overflow-y:scroll;}
#header #navi > ul > li {display:flex;gap:0 4rem;}
#header #navi > ul > li > div > a {color: #333; font-size: 1.5rem; font-weight: 700; line-height: 1.5rem;width:8.65rem;display:inline-block;}
#header #navi > ul > li > ul {flex:1;display:flex;flex-wrap:wrap;gap:0.75rem 0;}
#header #navi > ul > li > ul > li { padding:0.5rem 1.5rem; display: flex; justify-content: center; align-items: center; max-height: 1.9rem; }
#header #navi > ul > li:nth-child(3) { align-items: flex-start; padding-top: 0.25rem; }
#header #navi > ul > li:nth-child(4) { align-items: flex-start; padding-top: 0.25rem; }
#header #navi > ul > li:nth-child(5) { align-items: flex-start; }
#header #navi > ul > li > ul > li > a {text-align:center;color:#333;font-size:0.9rem;font-weight:600;}
#header #navi > ul > li > ul > li > ul > li {display:none;}
#header.open  .header-link  {display:none;}

#header #navi > ul { overflow-y: hidden; }

#header #navi > ul > li:hover > div > a {color:#269C7D;}
#header #navi > ul > li > ul > li > a:hover{color:#269C7D;font-weight:600;text-decoration : underline;
  text-underline-position : under;
text-decoration-thickness: 1px;
}

#header #navi > ul > li > ul > li > a.newBlank { display: flex; align-items: center; gap: 0.25rem; }
#header #navi > ul > li > ul > li > a.newBlank:after{content:'';width:0.9rem;height:0.9rem;background:url(/images/default/content/navi-blank.svg)no-repeat center center;background-size:cover;}
#header #navi > ul > li > ul > li > a.newBlank:hover:after{background:url(/images/default/content/navi-blank-on.svg)no-repeat center center;background-size:cover;}


#header #navi .navi-links { display: flex; position: absolute; left:37.5rem;bottom:3.77rem; gap: 4.7rem; padding-top: 1.8rem; width: 100%; max-width: 56rem; border-top: 1px solid #ddd;}
#header #navi .navi-link { gap:0 0.75rem;display:flex;}
#header #navi .navi-link a{padding:0.8rem 1.25rem;border-radius: 0.5rem; background:  #269C7D;color: #FFF; font-size: 0.9rem; font-weight: 600; line-height: 0.9rem;display:flex;gap:0 0.25rem;} 
#header #navi .navi-link a:after{content:'';display:block;width:0.9rem;height:0.9rem;background:url(/images/default/main/share-icon.svg)no-repeat center center;background-size:cover;}
#header #navi .navi-links .link-title { color: #333; font-size: 1.5rem; font-weight: 700; line-height: 1.5rem;width:9.45rem;display:inline-block; }

@media (max-width:1700px){
	#header #navi .navi-links { display: none; }
}

#header .header-search{position:absolute;width:100%;background:#fff;padding:5.4rem 0;border-top: 1px solid #ddd;display:none;z-index: 9999;}
#header .header-search form {width:31.4rem;margin:0 auto;}
#header .header-search label {color: #333; text-align: center; font-size: 1.5rem; font-weight: 700; line-height: 1.5rem; letter-spacing: -0.0075rem;display:block;}
#header .header-search input[type="text"] {border:1px solid #333;border-radius:1rem;background:#fff;padding:0 1.5rem;height:3.5rem;flex:1;} 
#header .header-search input[type="text"]::placeholder {color: #888; font-size: 0.9rem; font-weight: 400; letter-spacing: -0.0045rem;}

#header .header-search input[type="text"]:focus{border: 2px solid #269C7D;}

#header .header-search input[type="submit"]{width:3.5rem;height:3.5rem;border-radius: 1rem; background: #269C7D url(/images/default/main/form-search.svg)no-repeat center center;border:1px solid #269C7D;font-size:0 !important;}

#header .header-search form > div {display:flex;gap:0.4rem;margin-top:1.5rem;}

#menuAll .link-zone { display: none; }
@media (max-width:1200px){
	#header.open #navi { gap: 0; }
	#menuAll .link-zone {display:flex; gap: 0.5rem;}
	#menuAll .link-zone  > div{padding:0.8rem 1.25rem;border-radius: 0.5rem; background: #269C7D;color: #FFF; font-size: 0.9rem; font-weight: 600; line-height: 0.9rem;display:flex;gap:0 0.25rem;}
	#menuAll .link-zone  > div > a { color: #fff; display: flex; gap: 0.25rem; }
	#menuAll .link-zone  > div > a:after {content:'';display:block;width:0.9rem;height:0.9rem;background:url(/images/default/main/share-icon.svg)no-repeat center center;background-size:cover;}
	#menuAll .link-zone  > div:not(:last-child):after{content:'';display:block;position:absolute;width:1px;height:15px;right:0;top:50%;transform: translateY(-50%);background:#ddd;}
}

/*팝업 롤링 추가*/
.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%;}


#footer{background:#232733;padding:5rem 0 4rem }
#footer .footer-top {display:flex;justify-content:space-between;    align-items: flex-end;}
#footer .footer-top .footer-tit {color: #C1C3CC; font-size: 1.3rem; font-weight: 700; line-height: 1.3rem;margin-top:1.5rem;}
#footer .footer-bottom{ padding-top:2rem; margin-top:2rem; border-top:1px solid rgba(255,255,255,0.2); display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; align-items:end; position:relative; }
#footer .footer-info{ grid-column:1; grid-row:1; }

#footer .footer-bottom ul {display:flex;gap:0 1rem;}
#footer .footer-bottom ul li {color: #FFF; font-size: 0.9rem; font-weight: 400; line-height: 0.9rem; letter-spacing: -0.0045rem;}
#footer .footer-bottom ul li b{color:#797C86;font-weight:700;margin-right:0.4rem;}
#footer .footer-bottom p.copy{ grid-column:1; grid-row:2; color:#FFF; font-size:0.8rem; font-weight:400; letter-spacing:-0.004rem; opacity:0.35; margin-top:2rem; }

#footer .footer-links{ grid-column:2; grid-row:1 / 3; display:flex; flex-direction:column; align-items:flex-end; gap:1.25rem; }
#footer .footer-bottom .privacy-link{ color: #269C7D; font-size: 0.9rem; font-weight: 400; line-height: 1; letter-spacing: -0.0045rem; }
#footer .footer-bottom .privacy-link:hover{ text-decoration:underline; text-underline-position:under; }
#footer .footer-bottom .sns-links{ display:flex; gap:0.5rem; }

#footer .footer-bottom .insta { width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; background: #fff; border-radius: 2.5rem; box-shadow: 5px 15px 20px 0 rgba(40, 96, 120, 0.05); flex: 0 0 3rem; }
#footer .footer-bottom .insta img { width: 100%; height: 100%; max-width: 1.8rem; max-height: 1.8rem; }

@media (max-width:767px){
	#footer .footer-bottom{ display:flex; flex-direction:column; align-items:flex-start; }
	#footer .footer-bottom ul li { line-height: 1.2; }
	#footer .footer-info{ width:100%; order:1; }
	#footer .footer-links{ width:100%; order:2; align-items:flex-start; gap:1rem; margin-top:1rem; }
	#footer .footer-bottom p.copy{ width:100%; order:3; margin-top:1rem; }
}

#footer .sites { display: flex; gap: 0.35rem; }
#footer  .site_shotcut {width:100%; max-width:15.2rem;border-radius:10px;color:#fff;}
#footer .site_shotcut dl{position:relative;}
#footer .site_shotcut .site_click {position:relative; display: inline-flex; height: 2.95rem; align-items: center; line-height: 2.95em; width:15.2rem; padding: 0 1rem; text-align:left; opacity:1; transform:none; -webkit-transform:none; transition:none; -webkit-transition:none;font-family:'Pretendard Variable','Noto Sans KR','나눔고딕', 'Nanum Gothic', 'sans-serif';font-size:0.85rem;color:#333;background:#fff;border-radius:0.25rem;border-radius:2.5rem;}
#footer .site_shotcut:nth-child(2) .site_click { max-width: 11.65rem; }

/* #footer .site_shotcut:nth-child(1) .site_click:after { content:''; position:absolute; width:1.35rem; top:50%; height:1.35rem; background:#232733 url(/images/default/main/site-link.svg)no-repeat center center;border-radius:50%;right:0.6rem;transform:translateY(-50%);transition: transform 0.2s ease; transform: translateY(-50%) rotate(0); } */
#footer .site_shotcut .site_click:after { content:''; position:absolute; width:1.35rem; top:50%; height:1.35rem; background:#232733 url(/images/default/main/bottom-arrow.svg)no-repeat center center;border-radius:50%;right:0.6rem;transform:translateY(-50%);transition: transform 0.2s ease; transform: translateY(-50%) rotate(0); }
#footer .site_shotcut.on .site_click:after {  transform: translateY(-50%) rotate(-180deg); }


#footer .site_shotcut .site_click:hover{transition:all .5s; }
#footer .site_shotcut .site_list { position:absolute; bottom:2.8rem;width:100%; right: 0; display:none;  background-color:#EEF0F5;border-radius:0.5rem; }
#footer .site_shotcut .site_list li { padding:.5rem 1rem; }

#footer .site_shotcut .site_list li a { display:inline-block;color: #333; font-size: 0.9rem; font-weight: 400; line-height: 0.9rem; letter-spacing: -0.004rem;position:relative}
#footer .site_shotcut .site_list li a:hover:after{content:'';position:absolute;width:100%;height:1px;background:#666;bottom:0;left:0;}
#footer .site_shotcut .site_list li a:hover {color:#444}
#footer .site_shotcut .site_list li:hover{color:#2C7CE6;}
#footer .site_shotcut.on .site_click {color:#444;background:#fff;}
#footer .site_shotcut.on .site_click:after {  border-color: #444;}

#header #navi h1{display:none;}

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

@media (max-width:1600px){
	#header #navi .navi-link{bottom:1rem;}
	#header #navi > ul{height:calc(100% - 5rem);}
	#header #navi .site-img{height:100%;width:40%;}
	#header #navi{gap:0 3.5rem;}
	#header #navi .navi-link{left:calc(40% + 1rem  + 3.5rem);}
	#header #navi .site-img p{padding:2.5rem 1.5rem;}
	#footer h1 img {width:11rem;}
	

}
@media (max-width:1500px){
	#header .header-link{padding:0 1rem;}
	#header .header_inner{padding:0 1rem;}
	.menu-intro{padding-left:1rem;}
	#header .header_inner #nav > ul > li > ul{padding-right:1rem;gap:1rem;padding-left:calc(30% + 1rem)}
	
	#header .header_inner #nav > ul > li > ul > li {    width: calc((100% - (1rem * 3)) / 4);}
	#header #navi > ul > li{gap:0 1.5rem;}
	#header #navi > ul > li > div > a{font-size:1.3rem;line-height:1.3;}
	#header #navi > ul > li > ul > li > a{padding:0.5rem ;}
		#header .header_inner h1 img{width:11rem;}
	#header .header_inner #nav > ul{gap:0 2rem;}
	

}

@media (max-width:1200px){
	#header #navi .site-img{display:none;}
	#header #navi{width: 90%;display:flex; flex-direction:column;gap:2rem 0;}
	#header.open #navi:before { content: ''; background: rgba(0, 0, 0, 0.6); position: absolute; width: 20%; height: 100%; left: -20%; top: 0; }
	#header.open #navi {overflow: inherit;}
	#header #navi{ overflow-y: auto !important; height: 100vh;}
	#header #navi > ul{ overflow: visible !important; }
	#header.open #navi{ overflow-y: auto !important; }
	#header.open .header_inner h1 {z-index:1;}
	#header #navi .navi-link{position:relative;left:auto;bottom:auto;display:none;}
	
	#header #navi > ul{height:auto;width:100%;gap:0;margin-top:0;}
	#header #navi > ul > li {flex-direction:column;}
	#header #navi > ul > li > ul{flex-direction:column;border-radius: 0.4rem; background: #F4F5F8;padding:0.8rem;display:block; width: 100%;}
	#header #navi > ul > li > ul > li:not(:last-child){margin-bottom:0.75rem;} 
	#header #navi > ul > li > div > a {padding:1.25rem 0;font-size:19px;display:block;}
	#header #navi > ul > li > ul > li > a {color:#444;font-weight:500;}
	#header #navi h1{display:block;position:absolute;left:1rem;top:1.5rem;}
	#header #navi h1 img {width:11rem;}
	
	#header #navi{background:#fff; z-index: 999;}
	#header .header_inner .header-right { position: relative; z-index: 1000; }
	
	#header #navi > ul > li > ul > li { justify-content: flex-start; padding: 0; }
	
	#header { position: relative; }
	#header.open::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 998; }
}


/********************************************************
■ 태블릿
********************************************************/
@media (max-width:1030px){
	html{font-size:16px;}
    body{font-size:1rem}
	#wrap{font-size:1rem;}
	.tablet{display:block;}
	
	
	#header .header_inner #nav > ul{display:none;}
	#header #navi{padding:4.5rem 1rem 1rem 1rem;}

	#footer .footer-bottom ul{flex-direction:column;gap:0.5rem 0;
}
	

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


}


/********************************************************
■ 모바일
********************************************************/
@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:500px){
	#header #navi .navi-link{ flex-direction:column;gap:0.4rem;}
	#header .header-link{padding:0;flex-wrap:wrap;}
	#header .header-link a{width:calc(100% / 3);min-width:auto; padding: 0.65rem 0.95rem !important; }
	#header .header-link a::after { display: none; }
	#footer .footer-top {flex-direction:column;align-items:flex-start;gap:25px 0;}
	#footer{padding:3rem 0 3rem;}
	#footer .footer-bottom ul li b{display:block;margin-bottom:5px;}
	#header .header-search form{width:100%;padding:0 1rem;}
}

.dim {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4); z-index: 900;}

.search-dim {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4); z-index: 900;}

.top-btn{position:fixed; right:1rem; bottom:1rem; cursor:pointer; z-index:10; display: none;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.10);width:2.75rem;height:2.75rem;border-radius:0.5rem;}
.top-btn img {width:100%;}
@media (max-width:500px){
	.top-btn img{width:3rem;}
}