@charset "utf-8";
/* =========================================================
   공통 컨텐츠 요소 
   ========================================================= */
.container {max-width: 1500px; margin: 0 auto;}
.commonTitle {font-size: 40px; font-weight: 600; color: var(--main-color); }

@media screen and (max-width: 1600px) {
    .container {max-width: 100%; padding: 0 60px;}
}

@media screen and (max-width: 1400px) {
    .container {padding: 0 32px;}
}

@media screen and (max-width: 1024px) {
    .commonTitle {line-height: 1; font-size: 28px;}
}

@media screen and (max-width: 768px) {
    .container {padding: 0 20px;}
    .commonTitle {font-size: 24px;}
}

/* sec1 */
.sec1 .mainContWrap {display:block; width: 100%; position:relative;}
.sec1 .main_slide_nav {position: absolute; bottom: 45px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; z-index: 1;}
.sec1 .main_slide_nav .main_btn {width: 12px; height: 22px; background-repeat: no-repeat; background-size: 100%; flex-shrink: 0; cursor: pointer;}
.sec1 .main_slide_nav .main_prev {background-image: url('/humanframe/theme/sea_2026/assets/img/main/main_slide_prev.png');}
.sec1 .main_slide_nav .main_next {background-image: url('/humanframe/theme/sea_2026/assets/img/main/main_slide_next.png');}
.sec1 .main_pagenation {margin: 0 30px 0 40px; display: flex; align-items: center; gap: 30px;}
.sec1 .main_pagenation .swiper-pagination-bullet {width: 12px; height: 12px; background: var(--main-color); opacity: 0.3; margin: 0 !important;}
.sec1 .main_pagenation .swiper-pagination-bullet-active {opacity: 1;}
.sec1 .main_slide_nav .btn-pause {display: block; width: 14px; height: 14px; margin-right: 40px; background-repeat: no-repeat; background-size: 100%; background-image: url('/humanframe/theme/sea_2026/assets/img/main/main_slide_stop.png'); color: transparent;}
.sec1 .main_slide_nav .btn-pause.on {width: 13px; background-image: url('/humanframe/theme/sea_2026/assets/img/main/main_slide_play.png');}

@media screen and (max-width: 1024px) {
	.sec1 .main_slide_nav {bottom: 30px;}
	.sec1 .main_pagenation {margin: 0 20px 0 30px; gap: 20px;}
	.sec1 .main_slide_nav .btn-pause {margin-right: 30px;}
}

@media screen and (max-width: 768px) {
	.sec1 .main_slide_nav {bottom: 20px;}
	.sec1 .main_slide_nav .main_btn {width: 10px; height: 18px;}
	.sec1 .main_pagenation {margin: 0 15px 0 20px; gap: 15px;}
	.sec1 .main_slide_nav .btn-pause {width: 12px; height: 12px; margin-right: 20px;}
	.sec1 .main_slide_nav .btn-pause.on {width: 11px;}
	.sec1 .main_pagenation .swiper-pagination-bullet {width: 10px; height: 10px;}
}

@media screen and (max-width: 480px) {
	.sec1 .main_slide_nav {bottom: 15px;}
	.sec1 .main_slide_nav .main_btn {width: 8px; height: 15px;}
	.sec1 .main_pagenation {gap: 10px; margin: 0 10px 0 15px;}
	.sec1 .main_slide_nav .btn-pause {margin-right: 15px; width: 10px; height: 10px;}
	.sec1 .main_slide_nav .btn-pause.on {width: 8px; height: 9px;}
	.sec1 .main_pagenation .swiper-pagination-bullet {width: 8px; height: 8px;}
}
/* sec1 */

/* sec2 */
.sec2 {padding: 50px 0 40px 0; border-bottom: 1px solid var(--main-color);}
.sec2 .visitorInner {display: flex; gap: 137px;}
.sec2 .visitorTitleArea {flex-shrink: 0;}
.sec2 .visitorContentArea {flex: 1; display: flex; justify-content: space-between; align-items: center; }
.sec2 .visitorInfoList {width: 100%; display: flex; gap: 0; align-items: flex-start; }
.sec2 .visitorInfoItem {width: 33.333%; position: relative; padding: 5px 30px; border-right: 1px solid #e1e1e1;}
.sec2 .visitorInfoItem:first-child {border-left: 1px solid #e1e1e1;}
.sec2 .visitorInfoItem:last-child {border-right: none;}
.sec2 .visitorInfoItem dt {font-weight: 600; font-size: 26px; color: #111111; display: flex; align-items: center; gap: 7px; margin-bottom: 21px; line-height: 1;}
.sec2 .visitorInfoItem dd {font-size: 18px; color: #666666; line-height: 1.5; word-break: keep-all;}
.sec2 .visitorBtnGroup {display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;}
.sec2 .visitorBtn {display: inline-flex; align-items: center; justify-content: center; width: 169px; height: 52px; font-size: 18px; font-weight: 600; transition: all 0.3s;}
.sec2 .btnOutline { background-color: #fff; color: var(--main-color); border: 1px solid var(--main-color); }
.sec2 .btnPrimary {background-color: var(--main-color); color: #fff; border: 1px solid var(--main-color); }
.sec2 .btnOutline:hover {background-color: var(--main-color); color: #fff;}

@media screen and (max-width: 1400px) {
    .sec2 .visitorInner {gap: 100px;}
}

@media screen and (max-width: 1280px) {
    .sec2 .visitorInner {gap: 70px;}
}

@media screen and (max-width: 1024px) {
    .sec2 .visitorInner {gap: 30px;}
    .sec2 .visitorContentArea {align-items: flex-start; gap: 20px;}
    .sec2 .visitorInfoList {flex-direction: column;}
    .sec2 .visitorInfoItem {width: 100%; border: none !important; display: flex; align-items: center; gap: 27px; padding: 0; margin-bottom: 15px;}
    .sec2 .visitorInfoItem:last-child {margin-bottom: 0;}
    .sec2 .visitorInfoItem dt {font-size: 21px; min-width: 117px; flex-shrink: 0; margin-bottom: 0;}
    .sec2 .visitorBtn {width: 140px; height: 48px;}
    .sec2 .pcBr {display: none;}
}

@media screen and (max-width: 768px) {
    .sec2 {padding: 30px 0;}
    .sec2 .visitorInner {flex-direction: column; align-items: stretch; gap: 22px;}
    .sec2 .visitorTitleArea {width: 100%; margin-bottom: 0;}
    .sec2 .visitorContentArea {flex-direction: column; align-items: stretch;}
    .sec2 .visitorInfoList {flex-direction: column; width: 100%;}
    .sec2 .visitorInfoItem {gap: 20px;}
    .sec2 .visitorInfoItem dt {min-width: 90px; font-size: 18px;}
    .sec2 .visitorInfoItem dd {font-size: 16px;}
    .sec2 .visitorBtnGroup {flex-direction: row; gap: 0; }
    .sec2 .visitorBtn {flex: 1; width: auto;}
}
/* sec2 */

/* sec3 */
.sec3 {padding: 120px 0; border-bottom: 1px solid var(--main-color);}
.sec3 .commonTitle {margin-bottom: 50px; text-align: center;}
.sec3 .exhibList {display: flex; justify-content: space-between; gap: 70px;}
.sec3 .exhibItem {flex: 1; display: block; color: #111111;}
.sec3 .imgBox {background-color: #f8f8fa; display: flex; justify-content: center; align-items: center; padding: 45px 0; margin-bottom: 37px;}
.sec3 .imgWrap {width: 282px; height: 400px; overflow: hidden;}
.sec3 .imgWrap img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block;}
.sec3 .exhibItem:hover .imgWrap img, .exhibItem:focus .imgWrap img {transform: scale(1.05);}
.sec3 .location {margin-bottom: 20px; color: var(--main-color); font-size: 22px; font-weight: 700; position: relative; padding-left: 12px;}
.sec3 .location::before {content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--main-color); }
.sec3 .title {font-size: 26px; font-weight: 600; margin-bottom: 15px;}
.sec3 .info {font-size: 18px; color: #666666;}
.sec3 .divider {color: #dddddd; margin: 0 6px;}
.sec3 .infoPlace {position: relative; padding-left: 12px; margin-left: 10px;}
.sec3 .infoPlace::before {content: ""; position: absolute; left: 0; top: 6px; width: 1px; height: 14px; background-color: #dddddd; }
.sec3 .moBr {display: none;}

@media screen and (max-width: 1024px) {
    .sec3 {padding: 50px 0;}
    .sec3 .exhibList {gap: 20px;}
    .imgBox {padding: 35px 0; margin-bottom: 30px;}
    .sec3 .imgWrap {width: 204px; height: 304px;}
    .sec3 .location {font-size: 18px; margin-bottom: 10px;}
    .sec3 .location::before {top: 10px;}
    .sec3 .title {font-size: 21px; margin-bottom: 6px;}
    .sec3 .info {line-height: 1.6;}
    .sec3 .divider {display: none;}
    .sec3 .moBr {display: block;}
}

@media screen and (max-width: 768px) {
    .sec3 {padding: 40px 0;}
    .sec3 .commonTitle {text-align: left; margin-bottom: 21px;}
    .sec3 .exhibList {flex-direction: column; gap: 40px;}
    .sec3 .imgBox {padding: 25px 0; margin-bottom: 21px;}
    .sec3 .imgBox .imgWrap {width: 162px; height: 242px;}
    .sec3 .title {font-size: 18px;}
    .sec3 .info {font-size: 16px;}
}
/* sec3 */

/* sec4 */
.viewAll {position: absolute; right: 0; bottom: 0; font-size: 18px; color: #111111; font-weight: 500;}
.viewAll:hover {text-decoration: underline;}
.sec4 {padding: 120px 0; border-bottom: 1px solid var(--main-color);}
.sec4 .titleWrap {display: flex; justify-content: center; align-items: flex-end; position: relative; margin-bottom: 49px;}
.sec4 .commonTitle {margin-bottom: 0; text-align: center;}
.sec4 .programList {display: flex; justify-content: space-between; gap: 40px;}
.sec4 .programCard {flex: 1; display: block; text-decoration: none; color: #111111; min-width: 0;}
.sec4 .thumbBox {position: relative; margin-bottom: 39px;}
.sec4 .thumbWrap {width: 100%; overflow: hidden;}
.sec4 .thumbWrap img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; aspect-ratio: 345 / 345;}
.sec4 .programCard:hover .thumbWrap img, .programCard:focus .thumbWrap img {transform: scale(1.05);}
.sec4 .badge {position: absolute; top: 10px; right: 10px; z-index: 1; font-size: 18px; padding: 8px 13px;}
.sec4 .statusIng {background-color: var(--main-color); color: #fff;}
.sec4 .statusEnd {background-color: #e1e1e1; color: #444444;}
.sec4 .cardTitle {font-size: 26px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; margin-bottom: 15px;}
.sec4 .cardDate {font-size: 18px; color: #666666; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.sec4 .cardTarget {font-size: 18px; color: #666666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
@media screen and (max-width: 1024px) {
    .sec4 {padding: 50px 0;}
    .sec4 .programList {gap: 20px;}
    .sec4 .thumbBox {margin-bottom: 30px;}
    .sec4 .badge {font-size: 16px; padding: 6px 11px;}
    .sec4 .cardTitle {font-size: 21px; margin-bottom: 10px;}
}
@media screen and (max-width: 768px) {
    .viewAll {position: static; line-height: 1;}
    .sec4 {padding: 40px 0;}
    .sec4 .titleWrap {justify-content: space-between; margin-bottom: 21px;}
    .sec4 .commonTitle {text-align: left;}
    .sec4 .programList {gap: 40px 20px; flex-wrap: wrap;}
    .sec4 .programCard {flex: 0 0 calc(50% - 10px);}
    .sec4 .thumbBox {margin-bottom: 20px;}
    .sec4 .cardTitle {font-size: 18px; margin-bottom: 6px;}
    .sec4 .cardDate {font-size: 16px; line-height: 1.6; margin-bottom: 0;}
    .sec4 .cardTarget {font-size: 16px; line-height: 1.6;}
}

@media screen and (max-width: 480px) {
    .viewAll {font-size: 14px;}
    .sec4 .programList {gap: 30px 20px;}
    .sec4 .badge {padding: 4px 9px; font-size: 14px; top: 8px; right: 8px;}
}
/* sec4 */

/* sec5 */
.sec5 {padding: 120px 0;}
.sec5 .titleWrap {position: relative; margin-bottom: 30px;}
.sec5 .titleWrap .commonTitle {line-height: 1;}
.sec5 .sec5Notice, .sec5 .sec5Icon {display: flex; gap: 70px;}
.sec5 .sec5Notice {margin-bottom: 60px;}
.sec5 .sec5Col {flex: 1; min-width: 0; display: flex; flex-direction: column;}
.sec5 .noticeList, .sec5 .dataList {height: 424px; border-top: 1px solid #121212;}
.sec5 .noticeList li, .sec5 .dataList li { border-bottom: 1px solid #ebebeb;}
.sec5 .noticeList li {height: 25%;}
.sec5 .noticeList a {display: flex; justify-content: space-between; align-items: center; height: 100%;}
.sec5 .noticeList a:hover, .noticeList a:focus {background-color: #fcfcfc; }
.sec5 .noticeTitle {flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 50px; color: #111111; font-size: 22px; font-weight: 600;}
.sec5 .noticeDate {color: #666666; font-size: 18px; flex-shrink: 0;}
.sec5 .dataList li {height: 33.333%;}
.sec5 .dataList a {display: flex; align-items: center; gap: 20px; height: 100%;}
.sec5 .dataList a:hover, .dataList a:focus {background-color: #fcfcfc }
.sec5 .dataThumb {width: 100px; height: 100px; flex-shrink: 0; overflow: hidden;}
.sec5 .dataThumb img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease;}
.sec5 .dataList a:hover img, .dataList a:focus img {transform: scale(1.05);}
.sec5 .dataInfo {flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center;}
.sec5 .dataTitle {font-weight: 600; font-size: 22px; color: #111111; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.sec5 .dataDate {font-size: 18px; color: #666666;}
.sec5 .shortcutGroup {flex: 1; display: flex; gap: 21px;}
.sec5 .scBox {flex: 1; display: flex; box-sizing: border-box; text-decoration: none; transition: transform 0.2s;}
.sec5 .scBox:hover {transform: translateY(-2px);}
.sec5 .grayBoxes .scBox {background-color: #f8f8fa; flex-direction: column; align-items: center; justify-content: center; height: 160px; gap: 28px;}
.sec5 .grayBoxes .scText {color: #121212; font-weight: 700; font-size: 18px; text-align: center; word-break: keep-all;}
.sec5 .borderBoxes .scBox {position: relative; height: 160px; padding: 30px 25px; justify-content: space-between; align-items: flex-start; border: 1px solid var(--main-color); color: var(--main-color); transition: all 0.2s; background-repeat: no-repeat !important; background-position: top 30px right 25px !important;}
.sec5 .borderBoxes .scBox:first-child {background-image: url('/humanframe/theme/sea_2026/assets/img/main/sec5_icon2.png');}
.sec5 .borderBoxes .scBox:last-child {background-image: url('/humanframe/theme/sea_2026/assets/img/main/sec5_icon2-2.png');}
.sec5 .borderBoxes .scBox:first-child:hover {background-image: url('/humanframe/theme/sea_2026/assets/img/main/sec5_icon2_hover.png');}
.sec5 .borderBoxes .scBox:last-child:hover {background-image: url('/humanframe/theme/sea_2026/assets/img/main/sec5_icon2-2_hover.png');}
.sec5 .borderBoxes .scBox:hover {background: var(--main-color); color: #fff;}
/* .sec5 .borderBoxes .scBox:nth-child(2) {background-color: var(--main-color); border: 1px solid var(--main-color); color: #fff;} */
.sec5 .borderBoxes .scText {font-weight: 600; font-size: 22px; word-break: keep-all; }
.sec5 .goLink {position: absolute; font-size: 18px; bottom: 30px; left: 30px;}

@media screen and (max-width: 1024px) {
    .sec5 {padding: 50px 0;}
    .sec5 .sec5Notice, .sec5 .sec5Icon {flex-direction: column; gap: 50px;}
    .sec5 .sec5Notice {margin-bottom: 50px;}
    .sec5 .noticeList, .sec5 .dataList {height: auto;}
    .sec5 .noticeList a {padding: 27px 0;}
    .sec5 .dataList a {padding: 16px 0;}
    .sec5 .noticeTitle, .sec5 .dataTitle, .sec5 .borderBoxes .scText {font-size: 21px;}
}

@media screen and (max-width: 768px) {
    .sec5 {padding: 40px 0;}
    .sec5 .titleWrap {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 21px;}
    .sec5 .noticeTitle {font-size: 18px;}
    .sec5 .noticeDate {font-size: 16px;}
    .sec5 .dataThumb {width: 80px; height: 80px;}
    .sec5 .dataTitle {font-size: 18px; margin-bottom: 8px;}
    .sec5 .grayBoxes .scBox {height: 136px; gap: 15px;}
    .sec5 .borderBoxes .scBox {height: 136px; padding: 25px 20px; background-position: top 25px right 20px !important;}
    .sec5 .borderBoxes .scText {font-size: 18px;}
    .sec5 .dataDate {font-size: 16px;}
    .sec5 .goLink {bottom: 25px; left: 20px; font-size: 16px;}
    .sec5 .scIcon {width: 32px;}
}

@media screen and (max-width: 480px) {
    .sec5 .shortcutGroup {gap: 11px;}
    .sec5 .grayBoxes .scBox {height: 120px;}
    .sec5 .grayBoxes .scText {font-size: 16px;}
    .sec5 .sec5Icon {gap: 30px;}
    .sec5 .borderBoxes {flex-direction: column;}
    .sec5 .borderBoxes .scBox {padding: 21px 21px 59px 21px; background-position: top 21px right 21px !important;}
    .sec5 .goLink {bottom: 21px; left: 21px;}
}
/* sec5 */