@charset "utf-8";

/**************************************************
*
*   layout.css
*
***************************************************/
#wrap {overflow: hidden;}

/* 헤더(header) */
#hd {position: relative; z-index: 200;}
#hd .exhib-promotion {padding: 12px 10px; gap: 8px; background-color: #000; color: #fff; display: flex; justify-content: center; align-items: center; text-align: center;}
#hd .exhib-promotion .d-day {font-weight: 800; color: var(--com-sub-color-01); display: flex; align-items: center; gap: 3px;}
#hd .exhib-promotion .d-day .num {background-color: var(--com-sub-color-01); color: #000; border-radius: 3px; padding: 4px;}
#hd .exhib-promotion .link {padding: 8px 20px; border: 1px solid #d9d9d9; border-radius: 10px;}
#hd .exhib-promotion .link:where(:hover,:focus) {background-color: var(--com-sub-color-01); border-color: var(--com-sub-color-01);}

#hd-bar {border-bottom: 1px solid #ddd; padding: 0 var(--com-mobile-pdlr); position: relative; background-color: #fff;}
#hd-bar .inner {width: 100%; max-width: 1800px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0 20px;}
#hd-bar .etc-list {display: flex; align-items: center; gap: 0 20px;}
#hd-bar .etc-list a {display: block;}
#hd-bar .etc-list a:where(:hover,:focus) {transform: translateY(-7px);}

#gnb {width: auto;}
#gnb .dep1-list {display: flex;}
#gnb .dep1-list > li {position: relative;}
#gnb .dep1 {height: 100px; padding: 0 25px; font-size: 20px; font-weight: 600; color: #000; display: flex; justify-content: center; align-items: center; text-align: center;}
#gnb .dep2-list {display: none; padding: 10px 0; min-width: 212px; background-color: var(--com-sub-color-01); position: absolute; top: calc(100% - 20px); left: 50%; transform: translateX(-50%); z-index: 100;}

#gnb .dep2 {padding: 10px 20px; display: block; text-align: center; font-size: 17px; font-weight: 600; word-break: keep-all; background-color: var(--com-sub-color-01);}
#gnb .dep2:where(:hover,:focus) {filter: brightness(0.92);}

@media screen and (max-width: 1400px) {
    #hd-bar .inner {padding: 20px 0;}
    #gnb {display: none;}
}

@media screen and (max-width: 1080px) {
    #hd .exhib-promotion {font-size: 14px;}
    #hd .exhib-promotion .link {padding: 8px 15px;}

    #hd-bar .logo {width: 150px;}
    #hd-bar .etc-list {gap: 15px;}
    #hd-bar .etc-list a {width: 25px;}
}

/* 팝업 메뉴 */
#popup-menu {opacity: 0; pointer-events: none; width: 100%; height: 100vh; padding: 50px; position: fixed; top: 0; left: 0; z-index: 500; background-color: rgba(0, 0, 0, 0.9); display: flex; flex-direction: column; transition: all 0.4s;}
#popup-menu.active {opacity: 1; pointer-events: auto;}
#popup-menu .hd-box {display: flex; justify-content: space-between; align-items: center; color: #fff; margin-bottom: 50px;}
#popup-menu .btn-cls {font-size: 50px; color: #fff;}
#popup-menu .btn-cls:where(:hover,:focus) {transform: rotate(90deg);}
#popup-menu .menu-list {max-height: 100%; color: #888; text-align: center; overflow: auto; margin: auto 0;}
#popup-menu .menu-list::-webkit-scrollbar {width: 14px;}
#popup-menu .menu-list::-webkit-scrollbar-thumb {border: 4px solid #333; background-color: #aaa; border-radius: 20px;}
#popup-menu .menu-list::-webkit-scrollbar-track {background-color: #333;}
#popup-menu .menu-list > li {display: flex; flex-direction: column;}
#popup-menu .menu-list > li:not(:last-of-type) {margin-bottom: 20px;}
#popup-menu .dep1 {font-size: 50px;}
#popup-menu .dep1.active {color: var(--com-sub-color-01);}
#popup-menu .dep1:where(:hover,:focus) {color: var(--com-sub-color-01);}
#popup-menu .dep2-list {display: flex; flex-direction: column; margin-top: 15px; gap: 10px; overflow: hidden;}
#popup-menu .dep2 {font-size: 18px; font-weight: 800;}
#popup-menu .dep2:where(:hover,:focus) {color: var(--com-sub-color-01);}

@media screen and (max-width: 1080px) {
    #popup-menu {padding: 25px;}
    #popup-menu .hd-box {margin-bottom: 20px;}
    #popup-menu .hd-box img {width: 150px;}
    #popup-menu .btn-cls {font-size: 40px;}
    #popup-menu .dep1 {font-size: 40px;}
}

@media screen and (max-width: 768px) {
    #popup-menu .dep1 {font-size: 35px;}
    #popup-menu .dep2 {font-size: 16px;}
    #popup-menu .dep2-list {gap: 5px;}
}

@media screen and (max-width: 480px) {
    #popup-menu {padding: 20px;}
    #popup-menu .hd-box img {width: 120px;}
    #popup-menu .btn-cls {font-size: 25px;}
    #popup-menu .dep1 {font-size: 30px;}
    #popup-menu .dep2 {font-size: 14px;}
    #popup-menu .dep2-list {margin-top: 10px;}
}

/* 통합검색 */
#global-srch {display: none; width: 100%; padding: 40px 0; position: absolute; top: 100%; left: 0; border-top: 1px solid #ddd; background-color: #fff; z-index: 200; color: #000;}
#global-srch .btn-cls {position: absolute; top: 20px; right: 40px; font-size: 45px;}
#global-srch .btn-cls:where(:hover,:focus) {transform: rotate(90deg);}
#global-srch .btn-cls i {font-weight: 800;}
#global-srch .srch-box {width: 100%; max-width: 740px; margin: 0 auto; padding: 0 var(--com-mobile-pdlr);}
#global-srch .input-box {--wh: 65px; position: relative; height: var(--wh); border: 3px solid #000; display: flex;}
#global-srch .input-box input {width: 100%; height: 100%; border: none; padding-left: 25px; font-size: 20px; font-weight: 600; outline: none; background-color: transparent; padding-right: 20px;}
#global-srch .btn-srch {flex-shrink: 0; width: var(--wh); display: flex; justify-content: center; align-items: center;}
#global-srch .btn-srch:where(:hover,:focus) {background-color: var(--com-sub-color-01);}
#global-srch .tags {display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 5px 10px; margin-top: 20px;}
#global-srch .tags li {}
#global-srch .tags a {display: block; min-width: 120px; padding: 10px; border: 1px solid #aaa; border-radius: 50px; font-weight: 600;}
#global-srch .tags a:where(:hover,:focus) {background-color: var(--com-sub-color-01);}
#glob-srch-bg-active {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 50;}

@media screen and (max-width: 1080px) {
    #global-srch {padding-top: 60px; padding-bottom: 30px;}
    #global-srch .input-box {--wh: 57px;}
    #global-srch .input-box input {font-size: 18px; padding: 0 17px;}
    #global-srch .tags {gap: 5px; margin-top: 15px;}
    #global-srch .tags a {font-size: 14px; min-width: 100px;}
    #global-srch .btn-cls {top: 13px; right: 20px; font-size: 30px;}
    #global-srch .btn-srch img {width: 22px;}
}

@media screen and (max-width: 768px) {
    #hd-bar .inner {padding: 15px 0;}
    #hd-bar .logo {width: 120px;}
    #hd-bar .etc-list {gap: 10px;}
    #hd-bar .etc-list a {width: 22px;}

    #global-srch {padding-top: 25px; padding-bottom: 0;}
    #global-srch .btn-cls {position: static; padding: 8px 0; width: 100%; background-color: #fff; border-top: 1px solid #aaa; font-size: 25px; margin-top: 25px;}
    #global-srch .btn-cls:where(:hover,:focus) {background-color: var(--com-sub-color-01); transform: none;}
    #global-srch .btn-srch img {width: 20px;}
    #global-srch .input-box {--wh: 52px;}
    #global-srch .input-box input {font-size: 16px; padding: 0 15px;}
    #global-srch .tags a {font-size: 13px; padding: 7px; min-width: 80px;}
}





/* 푸터(footer) */
#ft {background-color: #111; color: #fff; margin-top: 50px; padding: 0 var(--com-mobile-pdlr);}
#ft > .com-inner-1500 {gap: 30px; display: flex; justify-content: space-between; align-items: center; padding: 50px 0;}
#ft .etc-info {}
#ft :where(.list-01,.list-02) {display: flex; align-items: center; flex-wrap: wrap; gap: 5px 0;}
#ft .list-01 {font-size: 18px; margin-top: 30px;}
#ft .list-01 li {position: relative;}
#ft .list-01 li:not(:last-of-type) {padding-right: 20px; margin-right: 20px;}
#ft .list-01 li:not(:last-of-type)::before {content: ""; position: absolute; width: 1px; height: 84%; top: 50%; right: 0; transform: translateY(-50%); background-color: #555;}
#ft .list-01 a {}
#ft .list-01 a:where(:hover,:focus) {color: var(--com-sub-color-01);}
#ft :where(.list-02, .txt-copyright) {font-size: 15px;}
#ft .list-02 {margin-top: 30px;}
#ft .list-02 li {position: relative;}
#ft .list-02 li:not(:last-of-type) {padding-right: 15px; margin-right: 15px;}
#ft .list-02 li:not(:last-of-type)::before {content: ""; position: absolute; width: 1px; height: 84%; top: 50%; right: 0; transform: translateY(-50%); background-color: #555;}
#ft .txt-copyright {margin-top: 10px; color: #888;}
#ft .sns-list {display: flex; gap: 10px; flex-shrink: 0;}
#ft .sns-list a {display: block;}
#ft .sns-list a:where(:hover,:focus) {filter: brightness(0.8); transform: translateY(-8px);}

@media screen and (max-width: 1080px) {
    #ft > .com-inner-1500 {padding: 40px 0;}
    #ft .list-01 {font-size: 15px; margin-top: 25px;}
    #ft :where(.list-02, .txt-copyright) {font-size: 13px;}
    #ft .list-01 li:not(:last-of-type) {margin-right: 10px; padding-right: 10px;}
    #ft .list-02 {margin-top: 20px;}
    #ft .list-02 li:not(:last-of-type) {margin-right: 10px; padding-right: 10px;}
    #ft .etc-info img {width: 150px;}
    #ft .txt-copyright {margin-top: 7px;}
    #ft .sns-list {gap: 15px;}
}

@media screen and (max-width: 768px) {
    #ft > .com-inner-1500 {flex-wrap: wrap-reverse; justify-content: center; gap: 50px;}
    #ft .etc-info {text-align: center;}
    #ft .etc-info img {margin: 0 auto;}
    #ft :where(.list-01,.list-02) {justify-content: center;}
    

}


/*  240306, 기존 비엔날레 메인 */
/*** 서브 컨텐츠 부분 ****/
.subContainer {width: 100%; min-height: 700px; padding:0 0 80px;}
.subContainer .inner1220 {}

/*서브 왼쪽 메뉴부분*/
.subContainer .sAsideMenu {float:left; width: 17.4%; box-sizing: border-box;}
.sAsideMenu .top {width: 100%; background-color:#e5e5e5; border:1px solid #ddd; border-top: none; text-align: center; padding: 23px 5px 22px; position: relative; box-sizing: border-box;}
.sAsideMenu .top:before {content:""; position: absolute; left:calc(50% - 44px); bottom: -3px; width: 88px; height: 4px; background-color: #252525; /*z-index: 100;*/}
.sAsideMenu .top .icon {margin-bottom: 8px; }
.sAsideMenu .top h5 {color: #252525; letter-spacing: 0; margin-bottom: 3px;}
.sAsideMenu .top h2 {font-size:18px; font-weight:600; color: #252525;}

/*서브왼쪽메뉴부분*/
.sAsideMenu .sAsideMul {width: 100%; border:1px solid #ddd; border-top: 1px solid #ddd; border-top:none; box-sizing: border-box;}
.sAsideMenu .sAsideMul > li {border-top:1px solid #ddd;}
.sAsideMenu .sAsideMul > li:first-child {border-top:none;}
.sAsideMenu .sAsideMul > li > a {display: block; box-sizing: border-box; padding:24px 5px 22px; font-size: 16px; font-weight: 500; color:#999; text-align: center; line-height: 19px; transition: all 0.2s ease;}
.sAsideMenu .sAsideMul > li:hover > a {font-weight: 600; color:#555;}
.sAsideMenu .sAsideMul > li.active > a {color:#252525; font-weight: 600;}

.sAsideM_Sub {width: 100%;}
.sAsideM_Sub li {width: 100%;}
.sAsideM_Sub li a {display: block; padding:10px 5px 8px; background-color:#eee; text-align: center; color: #444; font-weight: 500;}
.sAsideM_Sub li.active a {background-color:#797979; color:#fff;}


/*서브 오른쪽 컨텐츠부분*/
.subContainer .sSubConSection {float:left; width: 82.6%; box-sizing: border-box; padding:50px 0 0 50px;}
.subContainer .sSubConSection:after { visibility: hidden;display:block;font-size: 0;content:".";clear: both;height: 0;*zoom:1;}
.sSubConSection .subTitle {width: 100%; box-sizing: border-box; padding:0 0 33px; border-bottom:1px solid #ddd; margin-bottom: 33px;}
.sSubConSection .subTitle:after { visibility: hidden;display:block;font-size: 0;content:".";clear: both;height: 0;*zoom:1;}
.sSubConSection .subTitle h2 {float:left; font-size: 27px; font-weight: 600; color:#252525;}
.sSubConSection .subNavUl {float:right; padding-top: 20px;}
.sSubConSection .subNavUl:after { visibility: hidden;display:block;font-size: 0;content:".";clear: both;height: 0;*zoom:1;}
.sSubConSection .subNavUl li {float:left; line-height: 12px; font-size: 15px; color:#bbb; padding:0 7px; position: relative;}
.sSubConSection .subNavUl li:before {content:"\276D"; color:#bbb; position: absolute; left:-1px; top: 0px;}
.sSubConSection .subNavUl li:first-child:before {content:"";}
.sSubConSection .subNavUl li:last-child {color:#252525; font-weight: 500;}

@media all and (max-width:1000px){
	/*** 서브 컨텐츠 부분 ****/
	.subContainer {min-height: auto; padding:0 0 40px;}
	.subContainer .inner1220 {}

	/*서브 왼쪽 메뉴부분*/
	.subContainer .sAsideMenu {display: none;}

	/*서브 오른쪽 컨텐츠부분*/
	.subContainer .sSubConSection {float:none; width:100%; padding:20px 0 0 0px;}
	.sSubConSection .subTitle {padding:0 0 15px; margin-bottom: 20px;}
	.sSubConSection .subTitle h2 {float:none; font-size: 20px;}
	.sSubConSection .subNavUl {float:none; padding-top: 10px;}
	.sSubConSection .subNavUl li {float:left; line-height: 12px; font-size: 15px; color:#bbb; padding:0 7px; position: relative;}
	.sSubConSection .subNavUl li:before {content:"\276D"; color:#bbb; position: absolute; left:-1px; top: 0px;}
	.sSubConSection .subNavUl li:first-child:before {content:"";}
	.sSubConSection .subNavUl li:first-child {padding-left: 0;}
	.sSubConSection .subNavUl li:last-child {color:#252525; font-weight: 500;}
}


@media all and (max-width:850px) {
	
	/* 모바일에서 테이블 처리 - 스크롤바 생성 */
	.table_wrap_mobile {overflow-x:scroll;}
	.table_wrap_mobile table {width:750px;}
	.table_wrap_mobile table th {font-size:0.80em !important;}
	.table_wrap_mobile table td {font-size:0.80em !important;}
	
	/* 스크롤 처리 하지 않을 테이블에 dontwantScroll 클래스 추가 */
	.table_wrap_mobile .dontwantScroll {width:100%;}
	.m_table_wrap { overflow-x:scroll; }
		
			
}


/* container */
#container{position:relative;margin-bottom:35px; padding-top: 80px;}
#container:after{content:"";display:block;clear:both;height:0;visibility:hidden}
#container:before{content:"";display:block;position:absolute;top:0;width:100%;border:1px dotted #eeeeee}
#container .container-wrap{position:relative;margin:0 auto;min-width:1281px;max-width:1440px;box-sizing:border-box}/*width 설정*/
#container .container-wrap:after{content:"";display:block;clear:both;height:0;visibility:hidden}
#container .section{position:relative}
#container .location{padding:15px 0 0 5px;line-height:13px;font-size:14px;color:#767676;}
#container .location .home{position:relative;margin-right:2px;width:17px;height:14px}
#container .location .home.type{padding-left:20px;}
#container .location .home.ir span,
#container .location .home:after{content:"";display:block;position:absolute;top:0;left:0;width:17px;height:14px;background:#fff url('/www/@resource/images/common/ico_home.png') 0 2px no-repeat}
#container .location .flow{position:relative;width:5px;height:14px}
#container .location .flow.ir span,
#container .location .flow:after{content:"";display:block;position:absolute;top:0;left:0;width:5px;height:14px;background:#fff url('/www/@resource/images/common/ico_location_arrow.png') 0 2px no-repeat}
#container .location .step{margin:0 4px}
#container .location strong.step{color:#222222}
#container .cont-header{position:relative;margin:16px 0 70px;height:220px}
#container .cont-header .title{height:220px;text-align:center}
#container .cont-header .title strong{display:block;padding-top:27px}
#container .cont-header .title span{display:block;margin-top:15px;font-size:13px;line-height:16px;color:#ffffff}
#container .cont-wrap{min-height:435px;margin-bottom:40px}
#container .cont-wrap:after{content:"";display:block;clear:both;height:0;visibility:hidden}

/* spon */
#container .spon{position:relative;margin:150px 0 25px 0;height:50px;background:#fff;text-align:center}
#container .spon h2{visibility:hidden;overflow:hidden;position:absolute;top:-1px;left:-1px;width:1px;height:1px;font-size:0;line-height:0}
#container .spon:after{content:"";display:block;clear:both;height:0;visibility:hidden}
#container .spon .slider-wrap{position:relative;margin:0 auto}
#container .spon .slider-wrap:after{content:"";display:block;clear:both;height:0;visibility:hidden}
#container .spon .slider{overflow:hidden;margin:0 50px;height:50px}
#container .spon ul:after{content:"";display:block;clear:both;height:0;visibility:hidden}
#container .spon ul li{display:block;margin:0 20px;width:130px !important;height:50px;text-align:left}
#container .spon ul li img{/*display:block;*/width:130px;height:50px}
#container .spon .direction:after{content:"";display:block;clear:both;height:0;visibility:hidden}
#container .spon .direction a span.ir,
#container .spon .direction a{display:block;position:absolute;top:0;width:24px;height:50px;text-indent: 999em; overflow: hidden;}
#container .spon .direction a.prev{left:0}
#container .spon .direction a.next{right:0}
#container .spon .direction a span.ir,
#container .spon .direction a:after{content:"";display:block;position:absolute;top:0;width:24px;height:50px;background-color:#fff;background-image:url('/www/@resource/images/common/btn_spon_arrow.png');background-repeat:no-repeat}
#container .spon .direction a.prev span.ir,
#container .spon .direction a.prev:after{background-position:0 0}
#container .spon .direction a.next span.ir,
#container .spon .direction a.next:after{background-position:0 100%}

.layout1024 #container .container-wrap{min-width:1024px;max-width:1280px; margin: 0 20px}

@media screen and (max-width: 1000px){
	#container {padding-top: 60px;}
}

/*container*/
.layout800 #container .container-wrap{min-width:320px;max-width:100%}
.layout800 #container:before{content:"";display:block;clear:both;height:0;visibility:hidden}
.layout800 #container .location{display:none}
.layout800 #container .cont-header{display:none}
.layout800 #container .cont-primary h3{visibility:hidden;overflow:hidden;position:absolute;top:-1px;left:-1px;width:1px;height:1px;font-size:0;line-height:0}
.layout800 #container .cont-aside{display:none;position:relative;width:100%;height:45px;text-align:center;background-color:#f0efef;z-index:100}
.layout800 #container .cont-aside h2{display:none}
.layout800 #container .cont-aside .lnb{width:100%;height:45px;border-bottom:0 none}
.layout800 #container .cont-aside .lnb:after{content:"";display:block;clear:both;height:0;visibility:hidden}
.layout800 #container .cont-aside .lnb h3{display:block;float:left;position:relative;padding:0 8px;font-size:15px;font-weight:bold;height:45px;line-height:47px;color:#555555;border:0 none;background-color:transparent;background-image:none}
.layout800 #container .cont-aside.type .lnb h3{padding:0 8px; background-color:transparent;}
.layout800 #container .cont-aside .lnb .wrap+ .wrap h3:after{content:"";display:block;position:absolute;top:17px;left:0;width:1px;height:10px;background-color:#767676}
.layout800 #container .cont-aside .lnb h3.active{color:#141414}
.layout800 #container .cont-aside .lnb ul,
.layout800 #container .cont-aside .lnb h3.active + ul{display:none}
.layout800 #container .cont-aside .direct{display:none}
.layout800 #container .cont-primary{float:none !important}
.layout800 #container .cont-sidebar{display:none}
.layout800 #container .spon{margin: 20px 0 25px 0}
.layout800 #content .section.first .sec-wrap1 .sec-box1 .banner .bx-wrapper .bxslider li a img{width: 100%}

/* 2020-10-29 CSS 수정 */
.gab10 {width: 100%; height: 10px;}
.gab20 {width: 100%; height: 20px;}
.gab30 {width: 100%; height: 30px;}
.gab40 {width: 100%; height: 40px;}
.gab50 {width: 100%; height: 50px;}
.gab60 {width: 100%; height: 60px;}
.gab70 {width: 100%; height: 70px;}
.gab80 {width: 100%; height: 80px;}
.gab90 {width: 100%; height: 90px;}
.gab100 {width: 100%; height: 100px;}

/* 캘린더 */
.fc-day-header {background-color: #f9f9f9; padding: 0px 0;}
.fc-day-header span {color:#222; font-size: 15px;}
.fc-day-header.fc-sat span {color:#004af1;font-size: 15px;}
.fc-day-header.fc-sun span {color:#ca001c; font-size: 15px;}
.fc th {line-height: 45px !important;}
.fc-basic-view .fc-body .fc-row {min-height: 7em !important;}


@media all and (max-width:1000px) {
  .gab10 {width: 100%; height: 5px;}
  .gab20 {width: 100%; height: 10px;}
  .gab30 {width: 100%; height: 15px;}
  .gab40 {width: 100%; height: 20px;}
  .gab50 {width: 100%; height: 25px;}
  .gab60 {width: 100%; height: 30px;}
  .gab70 {width: 100%; height: 35px;}
  .gab80 {width: 100%; height: 40px;}
  .gab90 {width: 100%; height: 45px;}
  .gab100 {width: 100%; height: 50px;}
  
}




/* 페이지 탑 버튼 */
#btn-page-top {position: fixed; bottom: 20px; right: 20px; z-index: 40; box-shadow: 0 0 10px #aaa;}
#btn-page-top button {--wh: 70px; width: var(--wh); height: var(--wh); font-size: 45px; display: flex; justify-content: center; align-items: center; background-color: var(--com-sub-color-01); color: #000;}
#btn-page-top button:where(:hover,:focus) {filter: brightness(0.9);}
#btn-page-top i {font-weight: 800;}

@media screen and (max-width: 1080px) {
    #btn-page-top {bottom: 15px; right: 15px;}
    #btn-page-top button {--wh: 55px; font-size: 35px;}
}


/***************************************************
*
*       서브페이지
*
****************************************************/
/* 서브페이지 탑 01 */
#sp-top-01 {padding: 0 var(--com-mobile-pdlr); margin-top: 80px;}
#sp-top-01 > .inner {width: 100%; max-width: 1600px; margin: 0 auto; position: relative; padding-top: 13px; padding-left: 35px;}
#sp-top-01 .lt-icon {--wh: 26px; width: var(--wh); height: var(--wh); position: absolute; top: 0; left: 0; background-color: #101820; clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 50%, 50% 100%, 0 100%);}
#sp-top-01 .menu-big-title {color: #000; font-weight: 600; font-size: 60px; margin-bottom: 15px;}
#sp-top-01 .breadcrumbs {display: flex; flex-wrap: wrap; align-items: center; color: #888;}
#sp-top-01 .breadcrumbs li {}
#sp-top-01 .breadcrumbs a {}
#sp-top-01 .breadcrumbs a:where(:hover,:focus) {text-decoration: underline; text-underline-position: under;}
#sp-top-01 .breadcrumbs a.active {color: #333; font-weight: 800;}
#sp-top-01 .breadcrumbs :where(.arrow, .home) {font-size: 18px;}

/* 서브페이지 탑 02 */
#sp-top-02 {width: 100%; height: 300px; background: url("/resources/img/2024/bg_sub_top_01.jpg") no-repeat center center; background-size: cover; margin-top: 40px;}

/* 서브페이지 container */
#sp-container {padding: 0 var(--com-mobile-pdlr) 100px; margin-top: 70px;}
#sp-container > .inner {width: 100%; max-width: 1560px; margin: 0 auto; display: flex; gap: 50px; align-items: flex-start;}

/* 서브페이지 left menu */
#snb {width: 210px; flex-shrink: 0; color: #999; border: 1px solid #ddd; text-align: center;}
#snb .menu-big-title {font-size: 18px; color: #252525; background: #e5e5e5 url("/resources/img/2024/icon_snb_top.png") no-repeat center top 20px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 58px 10px 23px; position: relative;}
#snb .menu-big-title::before {content: ""; width: 43%; height: 4px; background-color: #000; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);}
#snb .menu-list {}
#snb .menu-list > li:not(:last-of-type) {border-bottom: 1px solid #ddd;}
#snb .menu-list a {}
#snb .menu-list .dep-01 {min-height: 65px; padding: 10px; display: flex; justify-content: center; align-items: center; font-weight: 600; background-color: #fff;}
#snb .menu-list .dep-01:where(:hover,:focus) {color: #000;}
#snb .menu-list .dep-01.active {color: #000;}
#snb .menu-list .dep-02-list {display: none;}
#snb .menu-list .dep-01.active + .dep-02-list {display: block;}
#snb .menu-list .dep-02-list > li {border-top: 1px solid #ddd;}
#snb .menu-list .dep-02 {display: block; padding: 10px; font-size: 14px; color: #444; background-color: #eee; font-weight: 500;}
#snb .menu-list .dep-02:not(.active):where(:hover,:focus) {filter: brightness(0.9);}
#snb .menu-list .dep-02.active {background-color: #797979; color: #fff;}

/* 서브페이지 내용 */
#sp-content {width: 100%; min-width: 0;}
/* border: 2px solid red; */

/* 서브페이지 모바일 메뉴 */
#sp-mobile-menu-box {display: none;}

@media screen and (max-width: 1080px) {
    #sp-top-01 {margin-top: 40px;}
    #sp-top-01 > .inner {padding-top: 10px; padding-left: 23px;}
    #sp-top-01 .menu-big-title {font-size: 40px; margin-bottom: 10px;}
    #sp-top-01 .breadcrumbs {font-size: 15px;}
    #sp-top-01 .breadcrumbs :where(.arrow, .home) {font-size: 17px;}
    #sp-top-01 .lt-icon {--wh: 21px;}

    #sp-top-02 {height: 200px; margin-top: 25px;}

    #snb {display: none;}

    #sp-container {margin-top: 45px; padding-bottom: 40px;}

    #sp-mobile-menu-box {display: block; margin-bottom: 40px;}
    #sp-mobile-menu-box > li:not(:last-of-type) {margin-bottom: 5px;}
}

@media screen and (max-width: 768px) {
    #sp-top-01 > .inner {padding-top: 8px; padding-left: 18px;}
    #sp-top-01 .menu-big-title {font-size: 30px; margin-bottom: 5px;}
    #sp-top-01 .lt-icon {--wh: 16px;}
    #sp-top-01 .breadcrumbs {font-size: 14px;}
    #sp-top-01 .breadcrumbs :where(.arrow, .home) {font-size: 16px;}

    #sp-top-02 {height: 150px; margin-top: 20px;}

    #sp-container {margin-top: 35px; padding-bottom: 0;}

}












@media screen and (max-width: 1560px) {
    
}
@media screen and (max-width: 1400px) {
    
}
@media screen and (max-width: 1240px) {
    
}
@media screen and (max-width: 1080px) {
    
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 480px) {
    
}