/* 공통 */
#subContents {min-height: 500px; padding-top: 110px;}
.box {width: 100%; padding: 35px 0 !important; border-top: 1px solid #000; margin-top: 80px;}

.bg {position: relative; padding-top: 90px;}
.bg:before {content: ""; display: block; position: absolute; top: 56%; width: 100%; height: calc(100% - 30%); background-color: #f8f8f8; transform: translateY(-50%); z-index: -1;}

.listType01 li:not(:first-child) {margin-top: 10px;}
.listType01 dl {display: flex; justify-content: flex-start; align-items: flex-start; padding: 10px 0; font-size: 17px; line-height: 1.5; gap: 20px;}
.listType01 dl dt {min-width: 80px; font-weight: 700;}
.listType01 dl dd {color: #343434;}
.odd li:nth-child(odd) {background-color: #f9f9f9;}
.even li:nth-child(even) {background-color: #f9f9f9;}
.odd dl,
.even dl {padding: 15px 20px;}

/* tab*/
/* tab slide*/
.banner-slide-wrpper {position: relative; overflow: hidden;}
.banner-slide .swiper-slide {width: auto !important;}

/* tab list*/
.tabList,
.yearTab {padding: 40px 0; border-top: 2px solid #000;}
.tabListTit,
.yearTabTit {display: flex; display: -ms-flexbox; align-items: center;}
.tabListTit li,
.yearTabTit li {padding: 0 10px;}
.tabListTit li:first-child,
.tabListTit li a:first-child,
.yearTabTit li:first-child,
.yearTabTit li a:first-child {padding-left: 0;}
.tabListTit li a,
.yearTabTit li a {display: inline-block; color: #949494; font-size: 20px; font-weight: 600; padding: 0 10px; text-align: center; word-break: keep-all; transition: color .2s;}
.tabListTit li.active a,
.yearTabTit li.active a {color: #000;}

/* tab content*/
.tabCont {border-top: 1px solid #000;}
.tabCont .tabItem {display: none;}
.tabCont .tabItem.active {display: block;}

/* 탭이 처음에 숨겨져 있을 때 발생하는 문제 방지 */
.tabItem {display: block !important; visibility: hidden; height: 0;	overflow: hidden;}
.tabItem.active {visibility: visible; height: auto;	overflow: visible;}

/* tab btn*/
.tabBtn {display: flex; gap: 10px;}
.tabBtn .btn {width: 132px; height: 44px; padding: 0 5px; font-weight: 500; border-radius: 24px; color: #343434; text-align: center; line-height: 44px; cursor: pointer; white-space: nowrap; font-size: 15px; border: 1px solid #3f3f3f;}
.tabBtn .btn.on {background-color: #000; color: #fff;}

/* year tab*/
.yearItem, .tabItem {display: none;}
.yearItem.active, .tabItem.active {display: block;}
.yearTabCont .tabList {border-top: none; padding: 0 0 35px;}
.yearTabCont .tabList li.active a {background-color: #111; color: #fff;}
.yearTabCont .tabList li a { display: flex; align-items: center; justify-content: center; font-size: 15px; padding: 0 34px; border: 1px solid #111; border-radius: 50px; height: 45px; color: #333; font-weight: 500;}



/* board*/
.headerSec {display: flex; align-items: center; padding: 60px 0 20px; border-bottom: 1px solid #ccc; box-sizing: border-box; justify-content: space-between;}
.headerSec .item:nth-child(1) {flex: 1 0 auto; float: left; width: 65%;}
.headerSec .item.right {display: flex; align-content: space-between; flex-direction: column; justify-content: space-between;}
.headerSec .item .title {font-size: 32px; font-weight: 600; color: #131313; line-height: 1.5em; margin-top: 5px; word-break: keep-all;}

.item .btn {position: relative; display: inline-block; vertical-align: middle; max-width: 100%; width: 169px; height: 48px; padding: 0 30px; font-weight: 600; border-radius: 24px; color: #fff; text-align: center; line-height: 48px; background: #ff5959; cursor: pointer; white-space: nowrap;}

.bottom {padding-top: 15px;}
.bottom ul {display: flex; display: -webkit-flex; align-items: center; flex-wrap: wrap;}
.bottom ul > li {display: flex; align-items: center; color: #777; position: relative;}
.bottom ul > li:not(:last-child) {margin-right: 7px;}
.bottom ul > li + li {padding-left: 10px;}

.bodySec {padding: 60px 0 0;}
.infoList {display: flex;}
.infoList > ul {width: calc(100% / 2);}
.infoList > ul:not(:first-child) {margin-left: 30px;}
.infoList > ul > li:not(:first-child) {margin-top: 30px;}
.infoList dl dt {font-weight: 700; padding-bottom: 8px; color: #131313 !important;}
.infoList dl dt,
.infoList dl dd {font-size: 17px; color: #343434;}

.timeTable .timeTableTop {display: flex; justify-content: space-between; align-items: center; margin-bottom: 35px; flex-wrap: wrap;}
.timeTable .timeTableTop .title {font-size: 29px; font-weight: 600; color: #046f63;}
.timeTable .timeTableTop .host {font-size: 16px; color: #343434}

.upDateTxt {font-style: italic; color: #999; font-size: 17px;}

.timeTableBox > div {display: flex;  align-items: center; padding: 22px 30px;}
.timeTableBox .depth01:nth-child(odd) {background-color: #f9f9f9;}
.timeTableBox .depth01 > div:first-child {width: 30%;}
.timeTableBox .depth01 > div {width: calc(100% - 30%);}
.timeTableBox .depth01 > div div + div {margin-top: 20px;}
.timeTableBox .depth01 dl dt {font-weight: 700; padding-bottom: 8px;}
.timeTableBox .depth01 dl dt,
.timeTableBox .depth01 dl dd {font-size: 16px; line-height: 1.5;}

/* 지그재그 컨텐츠*/
.zigzagCont .zigzag {display: flex; align-items: center; justify-content: center; gap: 30px;}
.zigzagCont .zigzag:not(:first-child) {padding-top: 90px;}
.zigzagCont .zigzag .txt {width: 63%;}
.zigzagCont .zigzag .txt h3 {font-size: 32px; font-weight: 700; word-break: keep-all; overflow-wrap: break-word;}
.zigzagCont .zigzag .txt > span {display: block; font-size: 26px; font-weight: 700; color: #bbb; padding-top: 8px; word-break: keep-all; overflow-wrap: break-word;}
.zigzagCont .zigzag .txt > p {line-height: 1.7; color: #343434; font-size: 17px; padding-top: 30px;}
.zigzagCont .zigzag .img {width: 37%;}
.zigzagCont .zigzag .img .imgWrap {overflow: hidden; display: inline-block; border-radius: 12px; border: 1px solid #111;}
.zigzagCont .zigzag .img .imgWrap img {width: 100%; height: 100%; object-fit: cover;}
.zigzagCont .zigzag.reverse .img {display: flex; justify-content: end;}

/* 일반컨텐츠*/
.commCont .comm:not(:first-child) {padding-top: 90px;}
.commCont .comm .txt h3 {font-size: 32px; font-weight: 700; word-break: keep-all; overflow-wrap: break-word;}
.commCont .comm .txt:has(> h3):not(:has(> span)) h3 {padding-bottom: 35px;}
.commCont .comm .txt:has(> h3 + span) h3 {padding-bottom: 0;}
.commCont .comm .txt > span {display: block; font-size: 26px; font-weight: 700; color: #bbb; padding-top: 8px; word-break: keep-all; overflow-wrap: break-word;}
.commCont .comm .txt > p {line-height: 1.7; color: #343434; font-size: 17px; padding-top: 30px;}
.commCont .comm .txt .img {overflow: hidden; display: inline-block; border-radius: 12px;} /*border: 1px solid #dbdbdb;*/
.commCont .comm .txt .img img {width: 100%; height: 100%; object-fit: cover;}

/* 비디오 슬라이드*/
.slideBox .archiveContainer {position: relative; width: 90%; margin: 0 auto;}

.slideBox .archiveSwiper {position: relative; overflow: hidden; width: 100%; background: transparent; aspect-ratio: 16 / 9;}
.slideBox .archiveSwiper .swiper-slide iframe,
.slideBox .archiveSwiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover; border: none;}

.slideBox .thumbSwiper {display: flex; gap: 8px; width: 90%; margin: 20px auto 0; padding-bottom: 25px; cursor: grab;}
.slideBox .thumbSwiper .swiper-slide {aspect-ratio: 16 / 9; opacity: 0.5; transition: 0.3s;}
.slideBox .thumbSwiper .swiper-slide.active {opacity: 1; transform: scale(1.05);}
.slideBox .thumbSwiper .swiper-slide img { cursor: pointer; width: 100%; height: 100%; object-fit: cover; border: 2px solid #fff;}

.slideBox .archiveSwiper .swiper-button-next,
.slideBox .archiveSwiper .swiper-button-prev {z-index: 10;}

.slideBox .swiper-scrollbar {width: 100%; height: 6px; bottom: 0; left: 0;}


/* 서브비주얼*/
#subVis {padding-top: 60px;}
#subVis .subVisWrap {position: relative; width: 100%; height: 280px; background-image: url("../../images/sub/arteweek/sub_img.jpg"); background-size: cover; background-position: 50% 50%;}

/* 서브타이틀*/
#subVis .subVisTxt {position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; padding: 0 30px;}
#subVis .subVisTxt .title {color: #151515; font-size: 38px; font-weight: 700; word-break: keep-all; overflow-wrap: break-word;}

/* 로케이션*/
#subVis .location {margin-top: 15px;}
#subVis .location ul {display: flex; justify-content: center; align-items: center; flex-direction: row;}
#subVis .location ul li {position: relative;}
#subVis .location ul li:not(:last-child):after {display: inline-block; content: ''; margin: 4px 13px 0; background-color: rgba(51, 51, 51, 0.65); width: 3px; height: 3px; border-radius: 50%; vertical-align: middle;}
#subVis .location ul li a{display: inline-block; position: relative; line-height: 25px; vertical-align: top; color: rgba(51, 51, 51, 0.65); font-size: .95rem;}
#subVis .location ul li.on a {color: #333;}


/* 세계문화예술교육 주간 소개*/
.reference {display: flex; flex-wrap: wrap; align-items: center; gap: 2px;}
.reference li {flex: 0 0 calc(25% - 2px); border: 1px solid #000;}
.reference li a {display: flex; align-items: center; justify-content: center; height: 62px; padding: 0 10px; text-align: center; word-break: keep-all; overflow-wrap: break-word;}


/*프로그램*/
.noticeWrap {padding-top: 35px;}
.noticeWrap li {font-size: 15px; font-weight: 400; color: #052db7;}
.noticeWrap li:not(:first-child) {padding-top: 10px;}

	/* 아카이브*/
/* 이미지 + 텍스트*/
.archive .zigzagCont {margin-top: 80px;}
.archive .zigzagCont .zigzag {align-items: flex-start;}
.archive .zigzagCont .infoList {margin-top: 70px;}
.archive .infoList > ul > li:not(:first-child) {margin-top: 25px;}

/* 비디오 슬라이드*/
.archive .slideBox,
.archive .imgBox {margin-top: 80px;}
div.archive .commSwiper .swiper-button-prev:after,
div.archive.commSwiper .swiper-button-next:after,
div.archive .commSwiper .swiper-button-prev:after,
div.archive .commSwiper .swiper-button-next:after {display: none;}

/* 결과자료집, 프로그램북*/
.imgBox ul {display: flex; justify-content: space-between; align-items: center; gap: 10px;}
.imgBox ul li {flex: 1; overflow: hidden; display: inline-block; border-radius: 12px; border: 1px solid #111; height: 600px;}
.imgBox ul li img {width: 100%; height: 100%; object-fit: contain;}

/* 다운로드*/
.downInfo {padding: 35px 0 !important; margin-top: 120px; border-top: 1px solid #000;}
.downInfo h3 {font-size: 32px; font-weight: 700; word-break: keep-all; overflow-wrap: break-word; padding-bottom: 35px;}
.downInfo ul li {position: relative; padding: 6px 0 6px 65px;}
.downInfo ul li:not(:first-child) {margin-top: 8px;}
.downInfo ul li:before {content: ""; display: block; position: absolute; top: 50%; left: 20px; width: 32px; height: 27px; transform: translateY(-50%);}
.downInfo ul li.pdf:before {background: url("../../images/sub/arteweek/acpdf_icon.png") 50% 50% no-repeat;}

/* 사진*/
.photo .archiveContainer .swiper-slide {text-align: center;}
.photo .archiveContainer .swiper-slide img {width: 100%; height: auto; object-fit: cover;}





/* ---------- 반응형 ---------- */
/* 1240이하 PC*/
@media only screen and (max-width: 1280px) {
	/* 서브비주얼*/
	#subVis {padding-top: 35px;}
}

/* 1024이하 PC*/
@media only screen and (max-width: 1024px) {
	/* 세계문화예술교육 주간 소개*/
	.reference li {flex: 0 0 calc(33.333% - 2px);}

	/* 아카이브*/
	.archive .zigzagCont {margin-top: 65px;}
	.archive .zigzagCont .zigzag {flex-direction: column-reverse; gap: 40px;}
	.archive .zigzagCont .zigzag > div {width: 100% !important;}
	.archive .zigzagCont .infoList {margin-top: 45px;}

}

/* 768이하 PC*/
@media only screen and (max-width: 768px) {
	/* 공통 */
	#subContents {padding-top: 60px;}

	/* 지그재그 컨텐츠*/ /* 일반컨텐츠*/
	.zigzagCont .zigzag {flex-direction: column-reverse;}
	.zigzagCont .zigzag:not(:first-child),
	.commCont > div:not(:first-child) {padding-top: 60px !important;}
	.zigzagCont .zigzag > div {width: 100%;}
	.zigzagCont .zigzag .txt {padding-top: 15px;}
	.zigzagCont .zigzag .txt h3,
	.commCont .txt h3 {font-size: 27px !important;}

	.zigzagCont .zigzag .txt > p {padding-top: 15px;}
	.zigzagCont .zigzag .img .imgWrap {width: 100%; max-height: 360px;}
	.commCont .txt > span {font-size: 21px !important;}

	/* board*/
	.headerSec {flex-direction: column; align-items: flex-start;}
	.headerSec .item,
	.headerSec .item:nth-child(1) {width: 100%;}
	.headerSec .item .title {font-size: 27px !important;}
	.headerSec .item.right {margin-top: 20px;}

	.bottom {padding-top: 5px;}
	.item .btn {width: 160px; height: 44px;}

	.timeTable .timeTableTop .title {font-size: 27px;}
	.timeTable .timeTableTop .host {font-size: 15px;}

	/* tab*/
	/* tab list*/
	.tabList {padding: 32px 0;}
	.tabListTit li a,
	.yearTabTit li a {font-size: 19px;}

	/* year tab*/
	.yearTab {padding: 40px 0 30px;}
	.yearTabCont .tabList li a {padding: 0 30px; height: 40px;}


	/* 비디오 슬라이드*/
	.slideBox > div  {width: 100% !important;}


	/* 서브비주얼*/
	#subVis {padding-top: 20px;}
	#subVis .subVisWrap {height: 230px;}

	/* 서브타이틀*/
	#subVis .subVisTxt {padding: 0 10px;}
	#subVis .subVisTxt .title {font-size: 29px;}

	/* 로케이션*/
	#subVis .location {margin-top: 11px;}
	#subVis .location ul:has(li:nth-child(3)) li.home{position: relative;}
	#subVis .location ul:has(li:nth-child(3)) li.home::before{content: '...'; position: absolute; right: -4px; bottom:2px; color: rgba(51, 51, 51, 0.65); font-size: 14px;}
	#subVis .location ul li:not(:first-child):not(:last-child) {display: none;}
	#subVis .location ul:has(li:nth-child(3)) li:last-child:before {display: inline-block; content: ""; margin: 4px 10px 0; background-color: rgba(51, 51, 51, 0.65); width: 3px; height: 3px; border-radius: 50%; vertical-align: middle;}


	/* 세계문화예술교육 주간 소개*/
	.reference li {flex: 0 0 calc(50% - 2px);}


	/* 아카이브*/
	/* 이미지 + 텍스트*/
	.archive .zigzagCont {margin-top: 45px;}

	/* 비디오 슬라이드*/
	.archive .slideBox,
	.archive .imgBox {margin-top: 60px;}

	/* 사진*/
	.imgBox ul li {flex: none;}

	/* 다운로드*/
	.downInfo h3 {font-size: 27px;}
	.downInfo ul li {padding: 6px 0 6px 45px}
	.downInfo ul li:before {left: 0;}

}

/* 640이하 PC*/
@media only screen and (max-width: 640px) {
	/* 공통*/
	.box {margin-top: 70px;}

	/* board*/
	.bodySec {padding: 50px 0 0;}
	.infoList {display: block;}
	.infoList > ul {width: 100%;}
	.infoList > ul:not(:first-child) {margin-left: 0; margin-top: 25px;}
	.infoList > ul > li:not(:first-child) {margin-top: 25px;}

	/* 일반컨텐츠*/
	.listType01 dl {display: block;}
}

/* 460이하 PC*/
@media only screen and (max-width: 460px) {
	/* 공통 */
	/* 지그재그 컨텐츠*/ /* 일반컨텐츠*/
	.zigzagCont .zigzag .txt h3,
	.commCont .txt h3 {font-size: 24px !important;}
	.zigzagCont .zigzag .txt > p,
	.commCont .comm .txt > p,
	.commCont .txt > p,
	.listType01 dl dt,
	.listType01 dl dd {font-size: 16px;}
	.commCont .txt > span {font-size: 18px !important; padding-top: 5px;}
	.listType01 dl {padding: 10px;}

	/* board*/
	.headerSec .item .title {font-size: 24px !important;}
	.infoList dl dt,
	.infoList dl dd {font-size: 16px;}

	.timeTable .timeTableTop .host {padding-top: 5px;}


	/* 서브비주얼*/
	/* 서브타이틀*/
	#subVis .subVisTxt .title {font-size: 27px;}

	/* 로케이션*/
	#subVis .location ul:before {left: 71px;}
	#subVis .location ul li a {font-size: 14px;}


	/* 세계문화예술교육 주간 소개*/
	.reference li {flex: 0 0 100%;}


	/* 아카이브*/
	/* 사진*/
	.imgBox ul li {height: auto;}

	/* 다운로드*/
	.downInfo h3 {font-size: 24px;}
}