@charset "utf-8";

:root {
    --font-main: 'Paperlogy', sans-serif;
    --color-main: #1d56bc;
	--color-sub: #003675;
	--color-point: #e71825;
	--color-main1: #f41c62;/*culture 사이트 포인트 컬러*/
}
/* a:hover { color:var(--color-main); } */
.red {color:#ff3300}

/****************************************************************
	Form Style
****************************************************************/

input[type="text"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {max-width:100%; box-sizing:border-box; outline:0;}
* + textarea {margin-top:10px;}
/* textarea {line-height:1.8em !important;} */
textarea.bak {border-radius:10px; background:#f4f5f9; border:none; padding:10px 14px;}

@media ( min-resolution :.001dpcm) {_:-o-prefocus,.box_file ul li>img {margin-bottom:-3px;}}
@-moz-document url-prefix () {
	input [type="button"],
	input[type="submit"] {line-height:14px;}
}

textarea {padding:10px 14px;}
input[type="radio"] {margin-top:-3px; margin-left:7px;}
input[type="checkbox"] {padding:0}
td input[type="radio"]:first-child,
div input[type="radio"]:first-child {margin-left:0px;}
input[type="button"],
input[type="submit"] {cursor:pointer; border:none;}

input[type="button"].full,
input[type="submit"].full,
input[type="text"].full,
input[type="number"].full,
input[type="search"].full,
input[type="file"].full,
textarea.full,
select.full {width:100%; box-sizing:border-box; margin-left:0 !important; margin-right:0 !important;}

input[type="radio"],
input[type="checkbox"] {position:absolute; opacity:0; z-index:-999; width:0; height:0;}
input[type="radio"] + label,
input[type="checkbox"] + label {display:inline-block; vertical-align:middle; position:relative; padding:0.3rem 0 0.3rem 3.5rem; }
input[type="radio"] + label:before,
input[type="checkbox"] + label:before {content:""; display:block; position:absolute; width:2rem; height:2rem; left:0; top:50%; margin-top:-1rem; background:no-repeat 50% 50% #fff; border-radius:0.5rem; border:1px solid #ccd1de; box-sizing:border-box; transition:.3s all; -webkit-transition:.3s all; font-size:1.6rem; font-weight:700; text-align:center;}
input[type="radio"] + label:before {border-radius:50%!important;}
input[type="radio"]:checked + label:before {background:var(--color-main1); border:2px solid var(--color-main1); box-shadow: 0 0 0 3px #fff inset;}
input[type="checkbox"]:checked + label:before {content:"\eb7b"; border-color:var(--color-main1); background:var(--color-main1);font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased; color:#fff; line-height:1em;}


input[type="radio"][disabled] + label:before,
input[type="radio"][readonly] + label:before,
input[type="checkbox"][disabled] + label:before,
input[type="checkbox"][readonly] + label:before { pointer-events: none;}
input[type="radio"][disabled]:checked + label:before,
input[type="radio"][readonly]:checked + label:before {background:#d8dce0; border:2px solid #d8dce0; box-shadow: 0 0 0 3px #fff inset; pointer-events: none;}
input[type="checkbox"][disabled]:checked + label:before,
input[type="checkbox"][readonly]:checked + label:before {background-color:#d8dce0; border-color:#d8dce0; pointer-events: none;}

input[type="radio"] + label.no-txt,
input[type="checkbox"] + label.no-txt {width:2rem; min-height:2rem; overflow:hidden; text-indent:-999px; margin:0; padding-left:0;}

input[name*="matrixRow"] {position:Relative; opacity:1; z-index:0;  width:18px; height:18px; left:0; top:.75em; margin-top:-9px; background:no-repeat 50% 50% #fff; border-radius:100%; border:1px solid #ccd1de; box-sizing:border-box;}


input[type="radio"] + label.chk-onoff,
input[type="checkbox"] + label.chk-onoff {width:6rem; height:2.8rem; border-radius:5rem; background:#d8dce0; overflow:hidden; text-indent:-999px;}
input[type="radio"] + label.chk-onoff:before,
input[type="radio"] + label.chk-onoff:after,
input[type="checkbox"] + label.chk-onoff:before,
input[type="checkbox"] + label.chk-onoff:after {transition:.3s all; -webkit-transition:.3s all;}
input[type="radio"] + label.chk-onoff:before,
input[type="checkbox"] + label.chk-onoff:before {content:""; display:block; position:absolute; top:50%; left:5px; margin-top:-1rem; width:2rem; height:2rem; border-radius:100%; background:#fff; border:none !important;}
input[type="radio"] + label.chk-onoff:after,
input[type="checkbox"] + label.chk-onoff:after {content:"OFF"; display:block; position:absolute; right:10px; top:50%; text-indent:0; font-weight:600; letter-spacing:-.02em; transform:translateY(-50%); -webkit-transform:translateY(-50%); color:#fff; font-size:1.1rem; }
input[type="radio"]:checked + label.chk-onoff,
input[type="checkbox"]:checked + label.chk-onoff {background:#19b921;}
input[type="radio"]:checked + label.chk-onoff:before,
input[type="checkbox"]:checked + label.chk-onoff:before {left:35px;}
input[type="radio"]:checked + label.chk-onoff:after,
input[type="checkbox"]:checked + label.chk-onoff:after {content:"ON"; right:32px;}
input[type="radio"] ~ label,
input[type="checkbox"] ~ label {margin-right:1em;}
input[type="radio"][disabled] + label.chk-onoff,
input[type="checkbox"][disabled] + label.chk-onoff,
input[type="radio"][readonly] + label.chk-onoff,
input[type="checkbox"][readonly] + label.chk-onoff,
input[type="radio"][disabled]:checked + label.chk-onoff,
input[type="checkbox"][disabled]:checked + label.chk-onoff,
input[type="radio"][readonly]:checked + label.chk-onoff,
input[type="checkbox"][readonly]:checked + label.chk-onoff {background-color:#000;}

input[type="radio"] + label.chk-box:before,
input[type="checkbox"] + label.chk-box:before {display:none;}
input[type="radio"] + label.chk-box,
input[type="checkbox"] + label.chk-box {padding-left:0;}
input[type="radio"]:checked + label.chk-box,
input[type="checkbox"]:checked + label.chk-box {font-weight:800; color:#02c7ff;}

input[disabled] + label,
input[readonly] + label {opacity:0.3;  pointer-events: none;}

.btn, select, input[type="text"], input[type="submit"], input[type="file"], input[type="password"]
{height:4.4rem;  border-radius:0.5rem; border:1px solid #dedede; padding:0 1.5rem; font-size:1.5rem; background:#fff; display:inline-block; margin:0.2rem 0.2rem 0.2rem 0; }

select {-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; padding-right:3rem; position:relative; background:#fff url(../../twms/common/images/selectbg.png) no-repeat top 1.7rem right 1rem!important; margin:0.1rem; padding-right:3rem!important;}

input[readonly] {background:#f4f5f9 !important; pointer-events: none;}
input[readonly]::placeholder { color: #b0b3c0; opacity: 1; }

input[type="file"] {width:100%; height:auto; padding:1rem; background:#f4f5f9;}


/*********************************************
	Button
*********************************************/

ul.list-icon {display:flex; flex-wrap:wrap; margin-bottom:3rem;}
ul.list-icon li {width:10rem; background:#fff; border-radius:1rem; border:1px solid #dedede; text-align:center; padding:1rem; font-size:1.4rem; margin-right:0.5rem;}
ul.list-icon li i {font-size:3rem; display:block;}

.btn {font-weight:500;border: 1px solid #333!important;background:#fff!important;opacity:1;transition:all .2s;color: #333;}
.btn.red {border:1px solid #e61e60!important; background:#e61e60!important; color:#fff;} 
.btn.blue {border:1px solid #4763e4!important; background:#4763e4!important; color:#fff;} 
.btn.indigo {border:1px solid #1c2d7c!important; background:#1c2d7c!important; color:#fff;} 
.btn.gray {border:1px solid #7d8191!important; background:#7d8191!important; color:#fff;} 

.btn.small { height:3rem; padding:0 1rem; font-size:1.4rem;}
.btn.down {border:1px solid #0167ba!important;color:#0167ba;padding-left:4rem;background: url(/culture/portal/images/common/btn_down_blue.png) no-repeat left 1.5rem center !important;}
.btn.down i {color:#0167ba;}
.btn.view {padding-left:4rem; background: url(/culture/portal/images/common/btn_view.png) no-repeat left 1.5rem center !important;}
.btn:hover {box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, 0.16);}

a.btn {height:4.6rem; align-content: center; transform: translateY(1px);}
a.btn.small { height:3.2rem; padding:0 1rem; }
label.btn {align-content: center;}

.noclick,
.noclick + label {pointer-events: none !important; cursor: not-allowed;}
.noclick + label {filter: grayscale(1);}
select.noclick {background-color: #f5f5f5 !important;}

textarea {border-radius:0.5rem; border:1px solid #dedede; padding:1.5rem; font-size:1.4rem; background:#fff;}


/* ********************
전역설정 (레이아웃)
********************** */
#wrap {overflow:hidden;}
#wrap:after {content:''; display:block; width:100%; height:100%; background:rgba(0,0,0,0.6); position:absolute; top:0; left:0; z-index:90; backdrop-filter: blur(3px); opacity:0; visibility:hidden; pointer-events:none; transition: all 0.3s ease;}
#wrap.on:after {opacity:1; visibility:visible; pointer-events:auto;}

/* skip navigation */
#skipNav {position:absolute; margin:0 auto; z-index:99999; top:0; left:0; right:0;}
#skipNav a {position:absolute; display:block; text-align:center; color:#fff; font-size:1.5rem; top:-10000px; left:0; z-index:10000; background:var(--color-main); padding:1rem;}
#skipNav a:hover,  #skipNav a:focus, #skipNav a:active {  position:absolute; top:0;z-index:10000; width:100%; overflow:hidden;}

.Masthead {background:#f0f0f0; padding:1rem 0; font-size:1.5rem; z-index:100; position:relative;}
.Masthead p {display:flex; align-items: center;}
.Masthead p:before { content:''; display:inline-block; width:2.6rem; height:1.8rem; background:url(/common/images/flag.jpg) no-repeat 0 50%; border:1px solid #dedede; margin-right:0.5rem; transform: translateY(-0.1rem); flex-shrink: 0;}

/* slide 전역설정*/
.slide-stop[disabled],
.slide-start[disabled] {display:none!important;}
.slide-progress {background:#dedede; height:0.5rem; border-radius:1rem; position:relative!important; opacity:1!important;}
.slide-progress > div {background:var(--color-sub); position:absolute; top:0;}
.swiper-pagination-fraction {width:auto!important;}



/* ********************
 해당 폴더 내 layout.css 
********************** */

body {position:relative; font-size:1.8rem; word-break: keep-all;}
.dv-wrap {width:1600px; margin:0 auto; position:relative;}
.overflow {overflow:hidden;}
@media (max-width:1648px){ /* UI/UX 기준 +48px */
	.dv-wrap {width:calc(100% - 48px); }
}
@media (max-width:1056px){ /* UI/UX 기준 +32px */
	.dv-wrap {width:calc(100% - 32px);}
}

/* main topSlide */
.topSlide-wrap {background:#fff; position:relative; border-bottom:1px solid #dedede; padding:1rem 0; z-index:100; }
.topSlide-wrap > * {z-index:0;}
.topSlide-wrap .swiper-slide {/*background:var(--color-main);*/ height:20rem; text-align:center;}
.topSlide-wrap .swiper-slide img {max-height:20rem; margin:0 auto;}
.topSlide-wrap .controll {display:flex; align-items:center; z-index:1; font-size:1.6rem; position:absolute; bottom:0; right:0;}
.topSlide-wrap .controll .slide-pagination span{color:#fff;}
.topSlide-wrap .controll .slide-pagination span:first-child:after {content:''; display:inline-block; width:0.6rem; height:0.6rem; border-radius:50%; background:rgba(255,255,255,0.5); margin:0 0.6rem 0 1rem; transform: translateY(-0.3rem);}
.topSlide-wrap .controll .slide-btn {display:flex; align-items:center; margin-left:2rem;}
.topSlide-wrap .controll button,
.topSlide-wrap .controll a {width:4rem; height:4rem; background:rgba(0,0,0,0.7);  display:flex; align-items:center; justify-content: center;}
.topSlide-wrap .controll button span,
.topSlide-wrap .controll a span {text-indent:-9999px; }
.topSlide-wrap .controll i {color:#fff; font-size:2rem;}

/* headerWrap */
#headerWrap { background:#fff; z-index:100; position:relative;}
body.sticky #headerWrap { position: fixed; top: 0; left: 0; width: 100%;  }/* 스크롤시 sticky 메뉴 설정 */
#headerWrap > div {display:flex; justify-content: space-between; align-items:center; flex-wrap:wrap; }
#headerWrap h1 {order:2; height:10rem; display:flex; align-items:center;}
.headerTop{order:1;}
#headerWrap .mainNav {order:3;}
#headerWrap .gnb {order:4;}




/* header-top(하위 사이트 및 언어설정) */
.headerTop{order:1; position:relative; height:4rem; display:flex; justify-content: space-between; align-items: center; width:100%; font-family: 'Paperlogy'; font-size:1.6rem; }
.headerTop:before { position: absolute; bottom: 0px;left: 50%; width: 2000px; margin-left: -1000px; height: 1px;  content: "";  z-index: 0;background:#ddd; }
.site-all{position:relative; display:flex; align-items:center;}
.site-all .site-link{display:flex;}
.site-all .site-link li a{ padding:0 15px; line-height:4rem; display:block;}
.site-all .site-link li a.on{font-weight:600; color:#fff; background:var(--color-sub);}
.f-site{z-index:1; z-index: 999999; position:relative;}
.f-site button{position: relative; z-index:1; padding:0.3rem 2rem 0.5rem 2rem; display: block; border-radius:0.5rem; background:var(--color-point);color:#fff; }
.f-site button span{position:relative;   font-size:1.4rem; }
.f-site ul{display:none; position: absolute;  width: 100%;  top:3rem; z-index: 0; border-radius:0.5rem; padding:0.5rem 1rem; background: #fff; border:1px solid #dedede;}
.f-site ul li{border-bottom:1px solid #ddd;}
.f-site ul li:last-child{border-bottom:none;}
.f-site ul li a{ color:#333; display:block; font-size:1.4rem; text-align:left; padding:0.5rem 0;}
.f-site ul li.m-family{display:none;}
@media (max-width:1056px){
	.site-all .site-link {display:none;}
	.f-site ul li.m-family{display:block;}
}
.topright{display: flex; align-items: center; color:#727272;}
.topright .language {position:relative;  font-size:1.4rem; height:4rem; align-content:center;  }
.topright .language button { opacity:0.5;}
.topright .language button i {font-size:1.6rem;margin-left:0.2rem;}
.topright .language ul {display:none; position:absolute; top:3.5rem; right:0; background:#fff; padding:1rem; border-radius:0.5rem; border:1px solid #dedede;}
.topright .language ul li {padding:0.5rem 0; font-size:1.3rem;}
.topright .language button:hover {opacity:1; text-decoration: underline;}
@media (max-width:1024px){
.topright a.koreaFlag {margin-right:10px;}
.topright a.koreaFlag:after {display:none;}
}

/* Gnb 설정 */
.gnb {display:flex; font-family: var(--font-main);}
.gnb>a {text-align:center; margin-left:2rem;  color:#515151;}
.gnb>a:first-child {margin-left:0;}
.gnb>a i {font-size:2.4rem; display:block; }
.gnb>a span {font-size:1.6rem;}
.gnb>a.moMenu {display:none;}
.gnb>a:hover {color:var(--color-main);}
.gnb>a:hover span {font-weight:700; text-decoration: underline;}
.gnbSearch {position:absolute; top:4rem; left:0; width:100%; background:#dedede; border-bottom:0;  display:none;}
.gnbSearch:before {content:''; display:block; width:2560px; height:100%; position:absolute; top:0; left:calc(50% - 1280px); background:#dedede; z-index:0;}
.gnbSearch > div {display:flex; flex-direction:column; align-items:center; height:10rem; justify-content: center; position:relative;}
.gnbSearch > div > * {z-index:1;}
.gnbSearch > div .form input {height:4rem; border-radius:0.5rem; padding:0 1rem;}
.gnbSearch > div .form input[type="text"] {width:50rem;}
.gnbSearch > div .form input[type="submit"] {width:10rem; background:var(--color-main); color:#fff;}
.gnbSearch > div .hash {font-size:1.4rem; color:#666; margin-top:0.5rem;}
.gnbSearch > div .hash a {margin:0 0.5rem;}
.gnbSearch > div a.close {position:absolute; top:1rem; right:0;}

@media (max-width:1056px){
	.gnb a.moMenu {display:block;}
	.gnb a.join {display:none;}
	.gnb>a {margin-left:1rem;}
}

.mainNav {font-family: var(--font-main);padding:0;width: calc(100% - 40rem);margin-left:5rem;}
.mainNav>ul{display:flex; justify-content: space-around;}
.mainNav>ul>li>a { display:block; height:10rem; align-content:center; padding:3rem 0; font-size:2.4rem; font-weight:600;}
.mainNav .depth1.on .depth2{visibility: visible; opacity:1;}
.mainNav .depth2 {visibility: hidden;position:absolute;top:10rem;left: 50%;width: auto;padding: 2rem 2rem;transition:all .3s;transform: translateX(-50%);opacity:0;transition: all 0.3s ease;}
.mainNav .depth2>* {z-index:1; position:relative;}
.mainNav .depth2:before {content:'';display:block;width:100%;height:100%;position:absolute;top:0;left: 0;/* left:calc(50% - 1280px); */background:#fff;border-radius: 1rem;z-index:0;}
/*.mainNav .depth2:after {content:''; display:block; width:100%; height:1px; position:absolute; top:0; left:calc(50% - 1280px); background:#dedede; z-index:0;}*/
.mainNav .depth2>div {width: 30rem;display:flex;flex-wrap:wrap;justify-content: space-between;}
.mainNav .depth2>div .title-wrap {font-family: var(--font-main); width:30rem; }
.mainNav .depth2>div .title-wrap .title {font-size:3rem; font-weight:700;}

.mainNav .depth2>div>ul {width:calc(100% - 32rem); display:flex; flex-wrap:wrap; font-size:1em; width:100%;}
.mainNav .depth2>div>ul>li {width:calc(25% - 2rem);/* margin-left:2rem; */width:100%; margin-bottom:1rem;}
.mainNav .depth2>div>ul>li>a {border:1px solid #dedede; border-radius:1rem; display:block; padding:1.6rem; margin-bottom:.5rem;}
.mainNav .depth2>div>ul>li>a:hover{border:1px solid var(--color-main); background:var(--color-main); color:#fff;}
.mainNav .depth2>div>ul>li:last-child{margin-bottom:0;}
.mainNav .depth2>div>ul>li>ul>li>a {font-size:1.6rem; padding:0.5rem; display:block; word-break:break-word;}
.mainNav .depth2>div>ul>li>ul>li>a:hover{text-decoration:underline;}
.mainNav .depth2>div>ul>li>ul>li>a:before {content:''; display:inline-block; width:0.6rem; height:0.6rem; border-radius:50%; background:var(--color-main); transform: translateY(-0.3rem); margin-right:0.5rem;}
.mobileWrap {display:none;}

@media (max-width:1280px){
	.mainNav {width:calc(100% - 40rem);}
	.mainNav>ul>li>a {font-size:2rem;}
	.mainNav .depth2>div .title-wrap {display:none;}
	.mainNav .depth2>div>ul {width:100%;}
}

@media (max-width:1056px){
	.mainNav {display:none;}
	.mobileWrap {display:none; width:100%; height:100%; background:rgba(0,0,0,0.8); position:absolute; top:0; z-index:101; backdrop-filter: blur(3px);}
	.mobileWrap .mobileNav {width:30rem; background:#fff; height:100%; position:fixed; top:0; right:-30rem; transition:all .2s;}
	/* .mobile-menu-open {overflow: hidden;} */
	.mobile-menu-open .mobileWrap .mobileNav {right:0;}

	.mobileNav a {position:relative;}
	.mobileNav .moTit {border-bottom:1px solid #dedede; text-align:center; padding:2rem;}
	.mobileNav .depth2 .title-wrap {display:none;}
	.mobileNav ul li a {display:block;}
	.mobileNav ul li a + .depth2,
	.mobileNav ul li a + ul {display:none;}

	.mobileNav>ul>li>a {padding:2rem; border-bottom:1px solid #dedede; font-weight:600;}
	.mobileNav>ul>li>a:has(+.depth2) {padding-right:3rem;}
	.mobileNav>ul>li>a:has(+.depth2):after {content:'\ea4e'; display:block; transform: translateY(-0.1rem); position:absolute; top:calc(50% - 1rem); right:1rem; font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased;}
	.mobileNav>ul>li.on>a:has(+.depth2):after {transform: translateY(-0.3rem) rotate(180deg);}	
	.mobileNav .depth2 {padding:1rem; background:#f2f2f2;}
	.mobileNav .depth2>div>ul {border:1px solid #dedede; background:#fff; border-radius:0.5rem; padding:1rem;}
	.mobileNav .depth2>div>ul>li>a {border-bottom:1px dashed #dedede; padding:1rem;}
	.mobileNav .depth2>div>ul>li>a:has(+ul) {padding-right:3rem;}
	.mobileNav .depth2>div>ul>li>a:has(+ul):after {content:'\ea4e'; display:block; transform: translateY(-0.1rem); position:absolute; top:calc(50% - 1rem); right:1rem; font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased;}
	.mobileNav .depth2>div>ul>li.on>a:has(+ul):after {transform: translateY(-0.3rem) rotate(180deg);}
	.mobileNav .depth2>div>ul>li:last-child>a {border-bottom:none;}
	.mobileNav .depth2>div>ul>li>ul {background:#f2f2f2; padding:1rem;}
	.mobileNav .depth2>div>ul>li>ul>li>a {font-size:1.6rem; padding:0.5rem; display:block;}
	.mobileNav .depth2>div>ul>li>ul>li>a:before {content:''; display:inline-block; width:0.6rem; height:0.6rem; border-radius:50%; background:var(--color-main); transform: translateY(-0.3rem); margin-right:0.5rem;}

}

.mobileNav a[target="_blank"] span::after,
.mainNav a[target="_blank"] span::after {content: "\ecaf"; display:inline-block; margin-left:0.5rem;  font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased; font-weight: 400; } 
.mobileNav .depth2 a[target="_blank"] span::after,
.mainNav .depth2 a[target="_blank"] span::after {transform: translateY(-0.1rem); font-size:1.8rem; opacity:0.5;}

#container {position:relative; z-index:80; }

/* ********************
 서브페이지 컨텐츠 영역
********************** */
#sub-container { position:relative; z-index:80; padding:6rem 0 10rem; }
#sub-container .dv-wrap { display:flex; justify-content:space-between; align-items: flex-start; }
#sub-container #content { width:calc(100% - 35rem); }

/* subnav (LNB) */
.subnav { width:30rem; font-family: var(--font-main);}
.subnav-tit { background: var(--color-sub); color: #fff; height:12rem; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 2.8rem; font-weight:600; gap: 1rem; border-radius:1rem 1rem 0 0; }
.subnav-list { border: 1px solid #e1e1e1; border-top: none; background: #fff; border-radius: 0 0 1rem 1rem; overflow: hidden; }
.subnav-list a {word-break:break-word;}

.subnav-list > li { border-bottom: 1px solid #f1f1f1; }
.subnav-list > li:last-child { border-bottom: none; }
.subnav-list > li > a { display: block; padding: 2rem 2.5rem; font-size: 1.8rem; font-weight: 500; transition: all 0.3s; position: relative; }
.subnav-list > li > a:hover { color: var(--color-main); background: #f8faff; }
.subnav-list > li.on > a { color: var(--color-main); background: #f8faff; font-weight: 700; }
.subnav-list > li.has-depth > a:after { content: '\ea4e'; font-family: 'remixicon'; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); font-size: 2rem; font-weight: 400; transition: transform 0.3s; color: #ccc; }
.subnav-list > li.has-depth.on > a:after { transform: translateY(-50%) rotate(180deg); color: var(--color-main); }

/* subnav depth3 */
.subnav-list .depth3 { background: #fdfdfd; padding: 1rem 0; border-top: 1px solid #f1f1f1; display: none; }
.subnav-list .depth3 li > a { display: block; padding: 1rem 2.5rem 1rem 4rem; font-size: 1.6rem; color: #727272; position: relative; transition: all 0.2s; }
.subnav-list .depth3 li > a:before { content: ''; position: absolute; top:2rem; left: 2.8rem; width: 0.4rem; height: 0.4rem; background: #ccc; border-radius: 50%; transform: translateY(-50%); }
.subnav-list .depth3 li > a:hover,
.subnav-list .depth3 li.on > a { color: var(--color-main); font-weight: 600; }
.subnav-list .depth3 li.on > a:before { background: var(--color-main); }
.subnav-list .depth3 > li.has-depth > a {padding: 1rem 5rem 1rem 4rem;}
.subnav-list .depth3 > li.has-depth > a:after { content: '+';  position: absolute; top:0.7rem; right:2.5rem; font-size: 2rem; font-weight: 400; transition: transform 0.3s; color: #ccc; }
.subnav-list .depth3 > li.has-depth.on > a:after { content: '-'; color: var(--color-main); font-size:3rem; top:0.2rem;}


/* subnav depth3 */
.subnav-list .depth4 { background: #fff; padding:0.5rem; border: 1px solid #f1f1f1; display: none; border-radius:1rem; margin:0 1rem 1rem 2.5rem;}
.subnav-list .depth4 li > a { display: block; padding:0.8rem 1rem 0.8rem 3rem; font-size: 1.5rem; color: #727272; position: relative; transition: all 0.2s; }
.subnav-list .depth4 li > a:before { content: ''; position: absolute; top:2rem; left:1.4rem; width: 0.8rem; height: 0.3rem; background: #ccc; border-radius:1rem; transform: translateY(-50%); }
.subnav-list .depth4 li > a:hover,
.subnav-list .depth4 li.on > a { color: var(--color-main); font-weight: 600; }
.subnav-list .depth4 li.on > a:before { background: var(--color-main); }



/* spop */
.spot {border-bottom:1px dashed #dedede; padding-bottom:3rem; position:relative; margin-bottom:5rem; z-index:2;}
.spot h2 {font-weight: 700; color:#111; font-size:3.6rem; margin:1rem 0 2rem; word-break:break-word;}

.breadcrumb-wrap ol {display:flex; align-items:center; gap:1rem; width:calc(100% - 15rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.breadcrumb-wrap ol li a {font-size:1.6rem; color:#727272;}
.breadcrumb-wrap ol li a span {border-bottom:1px solid #dedede;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width:30rem; display:inline-block; align-content:center; transform: translateY(0.6rem);}
.breadcrumb-wrap ol li a:hover span {border-bottom:1px solid var(--color-main); color:var(--color-main);}
.breadcrumb-wrap ol li a:after {content:'\ea6e'; font-family:'remixicon'; font-size:1.6rem; color:#ccc; margin-left:1rem;}
.breadcrumb-wrap ol li:last-child a {font-weight:600; color:#111;}
.breadcrumb-wrap ol li:last-child a:after {display:none;}
.breadcrumb-wrap ol li:first-child a:before{content:'\ee1e'; font-family:'remixicon'; font-size:2rem; color:#111; margin-right:1rem; transform: translateY(0.2rem); display:inline-block;}

.spot-btn {display:flex; gap:1rem; position:absolute; bottom:2rem; right:0;}
.spot-btn i {font-weight:500;}
.spot-btn > a:hover {color:var(--color-main);}
.spot-btn > a:hover i {color:var(--color-main);}
.spot-btn .shareWrap {position:relative;}
.spot-btn .share {display:none; position:absolute; top:calc(100% + 1rem); left:calc(50% - 7.5rem); background:#fff; border:1px solid #dedede; padding:1rem; border-radius:1.5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); flex-direction:column; gap:1rem; min-width:15rem; font-size:1.6rem; text-align:center;}	
.spot-btn .share:before {content:''; display:block; width:10px; height:10px; background:#fff; border-left:1px solid #dedede; border-top:1px solid #dedede; position:absolute; top:-5px; left:calc(50% - 5px); transform: rotate(45deg);}
.spot-btn .share.active {display:flex;}	
.spot-btn .sB {border:1px solid #dedede; padding:0.5rem 1rem; border-radius:1.5rem; width:4rem; height:4rem; display:flex; justify-content:center; align-items:center;}
.spot-btn .sB span {text-indent: -9999px;}
.spot-btn .sB i {font-size:2.4rem;}
.spot-btn .sB.active {border-color:var(--color-sub); background:var(--color-sub); color:#fff;}
.spot-btn .sB.active i {color:#fff;}

@media (max-width: 1280px) {
	.subnav { width:20%;}
	#sub-container #content { width: calc(80% - 3rem); }
}
@media (max-width: 1056px) {
    #sub-container { padding: 4rem 0 6rem; }
    .subnav { display: none; } /* 모바일에서는 서브 메뉴를 숨기거나 별도 UI(드롭다운 등)로 처리 */
    #sub-container #content { width: 100%; }
		
}
@media (max-width: 768px) {
	.spot h2 {width:calc(100% - 5rem);}
	.breadcrumb-wrap {width:100%; }
	.breadcrumb-wrap ol {gap:0.5rem; flex-wrap:wrap;}
	.breadcrumb-wrap ol li a:after {margin-left:0.5rem;}
	.breadcrumb-wrap ol li a {display:flex; align-items:center;}
	.breadcrumb-wrap ol li:first-child a:before{margin-right:0.5rem;}
	.breadcrumb-wrap ol li:nth-of-type(2) a span{  width:1em; text-indent: -9999px; position:relative; border-bottom:0; }
	.breadcrumb-wrap ol li:nth-of-type(2) a span:after {content:'···'; text-indent:0; position:absolute; top:0; left:0; text-align: center;} 
	.breadcrumb-wrap ol li:first-child a:before{ transform: translateY(0); } 
	.spot-btn {top:0.5rem; right:0;}
	.spot-btn .sB.print {display:none;}

	.spot-btn .share {top:5rem; left:auto; right:0; border-radius:1rem;}	
	.spot-btn .share:before {top:-5px; left:auto; right:12px;  }
}

.subtab { position:relative; margin-bottom:5rem; z-index:1;}
.subtab > div {display:grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); justify-content:flex-start; align-items:center; gap:1rem;}
.subtab > div a {display:flex; justify-content:center; align-items:center; font-size:1.8rem; font-weight:500; color:#666; padding:1.5rem 1rem; border:1px solid #dedede; border-radius:0.5rem;  }
.subtab > div a:hover {color:var(--color-main);}
.subtab > div a.active {background:var(--color-main); color:#fff; font-weight:700; border-color:var(--color-main);}
.subtab > div a span {width:100%; display:inline-block; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.subtab > div a[target="_blank"] span {width:calc(100% - 2rem);  }
.subtab > div a[target="_blank"]:after {content:'\ecaf'; font-family:'remixicon'; font-size:1.6rem; color:#ccc; margin-left:0.5rem;}
.subtab > div p {display:none;}

.subtab .all {display:none;}
.subtab .all:hover {color:var(--color-main);}
.subtab .all.active {background:var(--color-main); color:#fff; font-weight:700; border-color:var(--color-main);}

@media (max-width: 768px) {
	.subtab {position:relative;}
	.subtab .all {display:flex; justify-content:space-between; align-items:center; font-size:1.8rem; font-weight:500; color:#666; padding:1.5rem 1rem; border:1px solid #dedede; border-radius:0.5rem;}
	.subtab .all[aria-expanded="true"] {background:var(--color-main); color:#fff; font-weight:700; border-color:var(--color-main);}
	.subtab .all:after {content:'\EA4E'; font-family:'remixicon'; font-size:1.6rem; color:#ccc; margin-left:0.5rem; font-size:2rem; transition:all 0.3s ease;}
	.subtab .all[aria-expanded="true"]:after {transform: rotate(180deg);}
	.subtab > div {display:none; position:absolute; top:100%; left:0; width:100%; border:1px solid #dedede; border-radius:0.5rem;	padding:1rem; background:#fafafa; z-index:10; gap:0.5rem;}
	
	.subtab > div a { background:#fff; padding:0.7rem;}
	.subtab > div.active {display:grid!important;}
	
}

#conts img {max-width:100%!important; height:auto!important;}

/* 카카오맵 표출 오류 정정 */
#conts .root_daum_roughmap img {max-width: none !important;}

/****************************************************************
	Satisfaction Survey Style
****************************************************************/
.satisfaction { margin-top: 6rem; border: 1px solid #eeeeee; background: #ffffff; }
.satisfaction .survey-container { padding: 4rem; background: #f8f8f8; }

/* 설문 상단: 질문 및 라디오 버튼 */
.satisfaction .survey-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2rem; padding-bottom:2.5rem; border-bottom: 1px dashed #dcdcdc; }
.satisfaction .survey-question { display: flex; align-items: center; gap: 1.5rem; }
.satisfaction .survey-question .emoji { font-size: 3.2rem; }
.satisfaction .survey-question strong { font-size: 2rem; color: #111; font-weight: 800; }

.satisfaction .survey-rating ul { display: flex; align-items: center; gap: 2rem; }
.satisfaction .survey-rating li { position: relative; }
.satisfaction .survey-rating input[type="radio"] { position: absolute; left: 0; opacity: 0; width: 0; height: 0; }
.satisfaction .survey-rating label { display: flex; align-items: center; gap: 0.8rem; font-size: 1.6rem; color: #555; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.satisfaction .survey-rating label::before { content: ''; display: inline-block; width: 1.8rem; height: 1.8rem; border: 1px solid #cccccc; border-radius: 50%; background: #ffffff; box-sizing: border-box; }
.satisfaction .survey-rating input[type="radio"]:checked + label::before { border: 4px solid #0468d7; background:none!important;}
.satisfaction .survey-rating input[type="radio"]:checked + label { color: #111; font-weight: 700; }
.satisfaction .survey-rating input[type="radio"]:focus-visible + label { outline: 2px solid #0468d7; outline-offset: 2px; border-radius: 4px; }

/* 설문 하단: 의견 입력 섹션 */
.satisfaction .survey-bottom { padding-top:2.5rem; }
.satisfaction .survey-opinion { display: flex; height:5rem; align-items:center;}
.satisfaction .survey-opinion input[type="text"] { flex: 1; height: 100% !important; border: 1px solid #dddddd; border-right: none; padding: 0 2rem; font-size: 1.6rem; color: #111; background: #ffffff; border-radius:0;}
.satisfaction .survey-opinion button { width: 14rem; height: 100%; background: #777; color: #ffffff; border: none; font-size: 1.6rem; font-weight: 700; cursor: pointer; transition: 0.3s; }
.satisfaction .survey-opinion button:hover { background: #555; }

/* 설문 푸터: 부서 정보 */
.satisfaction .survey-footer { padding: 2.5rem 4rem; background: #ffffff; }
.satisfaction .survey-footer ul { display: flex; align-items: center; gap: 4rem; flex-wrap: wrap; }
.satisfaction .survey-footer li { display: flex; align-items: center; gap: 1rem; font-size: 1.6rem; color: #111111; }
.satisfaction .survey-footer li i { font-size: 2.2rem; color: #333333; }
.satisfaction .survey-footer li strong { color: #111111; font-weight: 700; }
.satisfaction .survey-footer li span { font-weight: 500; }

@media (max-width: 1024px) {
	.satisfaction .survey-container { padding: 3rem; }
	.satisfaction .survey-top { flex-direction: column; align-items: flex-start; padding-bottom: 2.5rem; }
	.satisfaction .survey-rating ul { flex-wrap: wrap; gap: 1.5rem 2rem; }
	.satisfaction .survey-footer { padding: 2rem 3rem; }
}

@media (max-width: 768px) {
	.satisfaction .survey-container { padding: 2rem; }
	.satisfaction .survey-question .emoji { font-size: 2.8rem; }
	.satisfaction .survey-question strong { font-size: 1.8rem; }
	.satisfaction .survey-opinion { height: 5rem; flex-wrap:wrap;}
	.satisfaction .survey-opinion input[type="text"] { width:70%;}
	.satisfaction .survey-opinion button { width:30%; font-size: 1.5rem; }
	.satisfaction .survey-footer { padding: 1.5rem 2rem; }
	.satisfaction .survey-footer ul { gap: 1.5rem 2rem; }
}


/* ********************
 푸터 설정
********************** */
#footerWrap { background: #f2f2f2; border-top: 1px solid #dedede; font-family: var(--font-main); position: relative; z-index: 90; }

/* footerTop: 관련 사이트 선택 */
.footerTop { border-bottom: 1px solid #dedede; background: #fff; }
.f-site-links { display: flex; width: 100%; }
.f-select { flex: 1; border-right: 1px solid #dedede; position: relative; }
.f-select:last-child { border-right: none; }
.f-select button { width: 100%; height: 6.4rem; background: #fff; text-align: left; padding: 0 2.5rem; font-size: 1.6rem; font-weight: 500; display: flex; justify-content: space-between; align-items: center; color: #333; }
.f-select button:after { content: '+'; font-size: 2.4rem; font-weight: 300; color: #666; transition: transform 0.3s; }
.f-select button.active:after { transform: rotate(45deg); }
.f-select ul { display: none; position: absolute; bottom: 100%; left: -1px; width: calc(100% + 2px); background: #fff; border: 1px solid #dedede; border-bottom: none; z-index: 10; padding: 1rem 0; }
.f-select ul li a { display: block; padding: 0.8rem 2.5rem; font-size: 1.5rem; color: #666; }
.f-select ul li a:hover { background: #f9f9f9; color: var(--color-main); }

/* footerMid: 로고, 정보, 퀵링크, SNS */
.footerMid { padding: 5rem 0 4rem; }
.footerMid .dv-wrap { display: flex; justify-content: space-between; align-items: center; }
.f-logo-info { display: flex; flex-direction: column; gap: 3rem; }

.f-info { font-size: 1.6rem; color: #444; line-height: 1.8; }
.f-info address { font-style: normal; margin-bottom: 1rem; font-size: 1.8rem; color: #333; }
.f-info p { margin-bottom: 0.2rem; }
.f-info p strong { font-weight: 700; color: #000; }

.f-quick-sns { display: flex; flex-direction: column; align-items: flex-end; gap: 2.5rem; }
.f-quick { display: flex; flex-direction: column; gap: 1rem; align-items: flex-end; }
.f-quick a { font-size: 1.8rem; font-weight: 600; color: #333; display: flex; align-items: center; gap: 0.5rem; }
.f-quick a i { font-size: 2rem; color: #999; }
.f-quick a:hover { color: var(--color-main); }

.f-sns { display: flex; gap: 1rem; }
.f-sns a { display: flex; align-items: center; justify-content: center; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: #fff; border: 1px solid #dedede; font-size: 2.2rem; color: #333; transition: all 0.3s; }
.f-sns a:hover { background: var(--color-main); border-color: var(--color-main); color: #fff; transform: translateY(-3px); }

/* footerBot: 법적 고지 및 카피라이트 */
.footerBot { border-top: 1px solid #dedede; padding: 3rem 0; }
.footerBot .dv-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 3rem; }
.f-bot-top { display: flex; justify-content: space-between; align-items: center; }
.f-legal { display: flex; gap: 2.5rem; }
.f-legal a { font-size: 1.7rem; color: #444; font-weight: 500; }
.f-legal a.point { color: var(--color-main); font-weight: 700; }
.f-legal a:hover { text-decoration: underline; }
.f-copy { font-size: 1.5rem; color: #888; font-family: 'Arial', sans-serif; }

.f-agency { background: #fff; border: 1px solid #e5e5e5; border-radius: 0.5rem; padding: 1.2rem 2rem; display: flex; align-items: center; gap: 1rem; width: 100%; }
.f-agency img { height: 2rem; }
.f-agency p { font-size: 1.6rem; color: #444; }

@media (max-width: 1056px) {
    .footerTop .dv-wrap { width: 100%; }
    .f-site-links { flex-wrap: wrap; }
    .f-select { flex: none; width: 50%; border-bottom: 1px solid #dedede; }
    .f-select:nth-child(even) { border-right: none; }
    .f-select:nth-child(3), .f-select:nth-child(4) { border-bottom: none; }
    
    .footerMid .dv-wrap { flex-direction: column; gap: 4rem; text-align: center; align-items: center; }
    .f-logo-info { flex-direction: column; gap: 2rem; align-items: center; }
    .f-quick-sns { align-items: center; width: 100%; }
    .f-quick { align-items: center; justify-content: center; flex-direction: row;}
    
    .footerBot .dv-wrap { flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
    .f-bot-top { flex-direction: column; align-items: center; gap: 1.5rem; width: 100%; }
    .f-legal { flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
    .f-agency { justify-content: center; }
}

/****************************************************************
	layerPop
****************************************************************/
.layerPop-wrap {position:fixed; z-index:1000; border:1px solid #111; background:#111; max-width:calc(100% - 2rem);} 
.layerPop-wrap img {max-width:100%; display:none;}
.layerPop-wrap img.pcAtchImg {display:block;}
.layerPop-wrap .layerPop-form {display:flex; justify-content:space-between; padding:0 1rem 0.6rem;}
.layerPop-wrap .layerPop-form button {background:#333; color:#fff; padding:0.5rem 1rem 0.2rem 1rem; border-radius:0.4rem; font-size:1.4rem; border:1px solid #000;}
.layerPop-wrap .layerPop-form button:hover {background:#444;}

@media (max-width: 1056px) {
	.layerPop {height:100%; width:100%; background:rgba(0,0,0,0.6); position:fixed; z-index:1000; top:0; left:0; backdrop-filter: blur(2px);}
	.layerPop-wrap {top:1rem!important; left:1rem!important;}
	.layerPop-wrap + .layerPop-wrap {top:10rem!important;}
	.layerPop-wrap + .layerPop-wrap + .layerPop-wrap{top:20rem!important;}
	
	.layerPop-wrap img.mblAtchImg {display:block;}
	.layerPop-wrap:has(img.mblAtchImg) img.pcAtchImg{display:none;}
}