@charset "utf-8";
/* 공통영역 */
.sec_title {font-size: 6rem; font-weight: 700; color: #000; letter-spacing: 0.01em; line-height: 1.2; text-align: center; word-break: keep-all;}

@media screen and (max-width: 1024px) {
    .sec_title {font-size: 4rem;}
}
 
@media screen and (max-width: 768px) {
    .sec_title {font-size: 3.2rem;}
}

/* section1 */
#section1 {position: relative; height: 100vh;}
#section1 .s1_slide {height: 100%;}
#section1 .s1_slide img {width: 100%; object-fit: cover;}
#section1 .text_bx {position: absolute; top: 50%; left: 50%; transform: translateX(-50%); width: 170rem; z-index: 1; color: #fff; font-weight: 700;}
#section1 .text_bx .txt {font-family: 'Busan'; font-weight: 500; font-size: 6rem; margin-bottom: 2.5rem;}
#section1 .text_bx .tit {font-family: 'Busan'; font-weight: 500; font-size: 8.5rem; letter-spacing: -0.03em;}
#section1 .page_bx {position: absolute; left: 50%; transform: translateX(-50%); bottom: 3rem; width: 170rem; z-index: 1; display: flex; align-items: center; gap: 1.5rem;}
#section1 .page_bx .page {position: static; width: auto;}
#section1 .page_bx .swiper-pagination-bullet {width: 0.9rem; height: 0.9rem; background: #fff; opacity: 0.66;}
#section1 .page_bx .swiper-pagination-bullet-active {width: 7.5rem; opacity: 1; border-radius: 0.4rem;}
#section1 .page_bx .pause {font-size: 0; width: 1.2rem; height: 1.3rem; background-repeat: no-repeat; background-size: 100%; background-image: url('/humanframe/theme/mayor26/assets/img/main/s1_pause.png');}
#section1 .page_bx .pause.on {background-image: url('/humanframe/theme/mayor26/assets/img/main/s1_play.png'); width: 1.3rem; height: 1.5rem;}

@media screen and (max-width: 1700px) {
    #section1 .text_bx,
    #section1 .page_bx {width: auto; left: 4rem; transform: translateX(0);}
}

@media screen and (max-width: 1400px) {
    #section1 {height: auto;}
    #section1 .text_bx,
    #section1 .page_bx {left: 3rem;}
}

@media screen and (max-width: 1024px) {
    #section1 .text_bx,
    #section1 .page_bx {left: 2rem;}
    #section1 .text_bx {top: auto; bottom: 9.5rem;}
    #section1 .text_bx .txt {font-size: 4.1rem; margin-bottom: 1.5rem; text-shadow: 0 0 2rem rgba(0,0,0,0.7);}
    #section1 .text_bx .tit {font-size: 6rem; letter-spacing: -0.05em; text-shadow: 0 0 2rem rgba(0,0,0,0.7);}
}
 
@media screen and (max-width: 768px) {
    #section1 .text_bx {bottom: 7rem;}
    #section1 .text_bx .txt {font-size: 3.1rem; margin-bottom: 1rem;}
    #section1 .text_bx .tit {font-size: 4.5rem;}
    #section1 .page_bx .swiper-pagination-bullet-active {width: 4rem; border-radius: 1rem;}
}

@media screen and (max-width: 480px) {
   #section1 .text_bx .txt {font-size: 2.6rem;} 
   #section1 .text_bx .tit {font-size: 3.8rem;}
}
/* section1 */

/* section2 */
/* ========================================================
   PC 화면 (1281px 이상)일 때 section2의 AOS 기능을 강제로 끄기
   ======================================================== */
@media screen and (min-width: 1281px) {
    /* AOS가 작동하기 전 기본적으로 요소를 숨기는(opacity:0 등) 설정을 무력화합니다 */
    #section2[data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important; 
        visibility: visible !important;
    }
}
#section2 {position: absolute; top: 40rem; right: 2.6rem; z-index: 1;}
#section2 .section-inner {margin: auto; height: auto; display: flex; flex-direction: row-reverse; gap: 3.4rem;}
#section2 .tab_list {display: flex; flex-direction: column; gap: 1.5rem;}
#section2 .tab_list li a {width: 5.3rem; height: 14.7rem; display: flex; align-items: center; justify-content: center; border-radius: 2.6rem; border: 1px solid #fff; color: #fff; font-size: 1.7rem; font-weight: 700; writing-mode: vertical-lr;}
#section2 .tab_list li a.on {background: #fff; color: #222222;}
#section2 .board_bx {display: none; padding: 3.9rem 3.5rem 4.7rem 3.9rem; border-radius: 2rem; background: #fff; width: 48rem; min-height: 31.6rem;}
#section2 .board_bx .title_bx {display: flex; justify-content: space-between; align-items: center; margin-bottom: 3.5rem;}
#section2 .board_bx .title_bx h2.sec_title {font-size: 3rem; font-weight: 700; color: #000000; letter-spacing: -0.05em;}
#section2 .board_bx .board_list li {padding: 0 1rem; border-bottom: 1px solid #ececec;}
#section2 .board_bx .board_list li a {display: flex; align-items: center; justify-content: space-between; padding: 1.7rem 0; gap:20px}
#section2 .board_bx .board_list .tit {font-size: 1.8rem; font-weight: 700; color: #444; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#section2 .board_bx .board_list .date {font-size: 1.8rem; font-weight: 500; color: #555; letter-spacing: -0.02em;}
#section2 .board_bx.on {display: block;}

@media screen and (max-width: 1280px) {
    #section2 {position: static; padding: 4rem 0;}
    #section2 .section-inner {flex-direction: column;}
    #section2 .tab_container {position: absolute;}
    #section2 .tab_list {flex-direction: row; gap: 3rem;}
    #section2 .tab_list li {position: relative;}
    #section2 .tab_list li:first-child:before {content: ''; position: absolute; top: 0.5rem; right: -1.5rem; width: 0.1rem; height: 2.3rem; background: #cccccc;}
    #section2 .tab_list li a {width: auto; height: auto; color: #000; font-size: 2.8rem; opacity: 0.5; writing-mode: lr;}
    #section2 .tab_list li a.on {opacity: 1; color: #000;}
    #section2 .board_bx {width: 100%; padding: 0;}
    #section2 .board_bx .title_bx {justify-content: flex-end;}
    #section2 .board_bx .title_bx .link {height: 3rem; display: flex; align-items: center; justify-content: center;}
    #section2 .board_bx .title_bx h2.sec_title {display: none;}
}

@media screen and (max-width: 768px) {
    #section2 {padding: 3rem 0;}
    #section2 .tab_list li:first-child:before {top: 0.3rem; height: 2rem;}
    #section2 .tab_list li a {font-size: 2.4rem;}
    #section2 .board_bx .title_bx .link {height: 2.6rem;}
}

@media screen and (max-width: 480px) {
    #section2 .tab_list {gap: 2.4rem;}
    #section2 .tab_list li a {font-size: 2.2rem;}
    #section2 .tab_list li:first-child:before {right: -1.2rem;}
    #section2 .board_bx .title_bx {margin-bottom: 2.5rem;}
    #section2 .board_bx .title_bx .link {height: 2.4rem;}
    #section2 .board_bx .board_list .tit {font-size: 1.6rem;}
}
/* section2 */

/* section3 */
#section3 {padding: 16.9rem 0 27.6rem 0;}
#section3 .sec_title {margin-bottom: 14.4rem;}
#section3 .s3_list {display: flex; justify-content: center; gap: 3rem;}
#section3 .s3_list li {position: relative; width: 39.4rem; border-radius: 2rem; overflow: hidden;}
#section3 .s3_list li a {display: block; width: 100%; height: 100%;}
#section3 .s3_list li a img {transition: all 0.3s;}
#section3 .s3_list li .bg {width: 100%; object-fit: cover;}
#section3 .s3_list li .text_bx {position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 6rem 0 5rem 4rem;}
#section3 .s3_list li .tit {font-size: 3.5rem; font-weight: 700; color: #fff; letter-spacing: -0.025em; line-height: 1.2;}
#section3 .s3_list li .arrow {width: 4.3rem; height: 4.3rem; transform: translateY(2rem); opacity: 0; transition: all 0.3s;}
#section3 .s3_list li a:hover .arrow {transform: translateY(0); opacity: 1;}
#section3 .s3_list li a:hover img {transform: scale(1.05);}

@media screen and (max-width: 1280px) {
    #section3 .s3_list li .text_bx {padding: 5rem 0 5rem 4rem;}
    #section3 .s3_list li .tit {font-size: 3rem;}
}

@media screen and (max-width: 1024px) {
    #section3 {padding: 6rem 0;}
    #section3 .sec_title {margin-bottom: 4rem;}
    #section3 .s3_list {flex-wrap: wrap; gap: 2rem;}
    #section3 .s3_list li {width: calc(50% - 1rem); height: auto;}
}

@media screen and (max-width: 768px) {
    #section3 .s3_list li .text_bx {padding: 3.5rem 0 3.5rem 3rem;}
    #section3 .s3_list li .tit {font-size: 2.8rem;}
    #section3 .s3_list li .arrow {width: 3.8rem; height: 3.8rem;}
}

@media screen and (max-width: 480px) {
    #section3 {padding: 5rem 0;}
    #section3 .sec_title {margin-bottom: 3rem;}
    #section3 .s3_list li {width: 100%;}
}
/* section3 */

/* section4 */
#section4 {padding: 8.9rem 0 12.9rem 0; background: #f3f3f3;}
#section4 .sec_title {margin-bottom: 4.1rem;}
#section4 .tab_list {display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 6.8rem;}
#section4 .tab_list li a {display: block; padding: 1.4rem 3.5rem; border-radius: 3rem; border: 1px solid #000000; background: #fff; font-size: 1.8rem; font-weight: 700; letter-spacing: 0.01em; color: #000000;}
#section4 .tab_list li a.on {background: #000; color: #fff;}
#section4 .tab_bx {display: none; gap: 3.5rem;}
#section4 .tab_bx.on {display: flex;}
#section4 .tab_bx .tab_con {display: flex; gap: 3rem; width: calc(50% - 1.75rem);}
#section4 .tab_bx .long_bx {width: 40%; border-radius: 2rem; overflow: hidden; flex-shrink: 0;}
#section4 .tab_bx .long_bx li {position: relative; width: 100%; height: 100%;}
#section4 .tab_bx .short_bx {display: flex; flex-direction: column; gap: 3.5rem; width: calc(60% - 1.5rem);}
#section4 .tab_bx .short_bx li {position: relative; width: 100%; height: 100%; border-radius: 2rem; overflow: hidden;}
#section4 .tab_bx a {position: relative; display: block; width: 100%; height: 100%;}
#section4 .tab_bx a::before {content: ''; display: none; position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; background: linear-gradient(to top, #000, transparent); opacity: 0; transition: all 0.3s; z-index: 1;}
#section4 .tab_bx a:hover::before {opacity: 1;}
#section4 .tab_bx a img {display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.3s;}
#section4 .tab_bx .text_bx {display: none; position: absolute; bottom: 4.8rem; left: 2.8rem; opacity: 0; transition: all 0.3s; z-index: 2;}
#section4 .tab_bx a:hover img {transform: scale(1.05);}
#section4 .tab_bx .short_bx .text_bx {bottom: 1.8rem;}
#section4 .tab_bx a:hover .text_bx {bottom: 6.8rem; opacity: 1;}
#section4 .tab_bx .short_bx a:hover .text_bx {bottom: 3.8rem;}
#section4 .tab_bx .text_bx .badge {width: max-content; padding: 0.8rem 2rem; border-radius: 1.5rem; border: 1px solid #fff; font-size: 1.4rem; font-weight: 700; color: #fff; margin-bottom: 1.8rem;}
#section4 .tab_bx .text_bx .tit {font-size: 2.8rem; color: #fff; font-weight: 700; line-height: 1.2;} 

@media screen and (max-width: 1400px) {
    #section4 .tab_bx {gap: 3rem;}
    #section4 .tab_bx .tab_con {width: calc(50% - 1.5rem); gap: 3rem;}
    #section4 .tab_bx .short_bx {gap: 3rem;}
}

@media screen and (max-width: 1280px) {
    #section4 .tab_bx {gap: 2rem;}
    #section4 .tab_bx .tab_con {width: calc(50% - 1rem); gap: 2rem;}
    #section4 .tab_bx .short_bx {width: calc(60% - 1rem); gap: 2rem;}
    #section4 .tab_bx .text_bx {bottom: 1.8rem;}
    #section4 .tab_bx .short_bx a:hover .text_bx {bottom: 2.8rem;}
    #section4 .tab_bx a:hover .text_bx {bottom: 2.8rem;}
    #section4 .tab_bx .text_bx .tit {font-size: 2.2rem;}
}

@media screen and (max-width: 1024px) {
    #section4 {padding: 6rem 0;}
    #section4 .sec_title {margin-bottom: 3rem;}
    #section4 .tab_list {margin-bottom: 5rem;}
    #section4 .tab_list li a {padding: 1.2rem 3.2rem;}
    #section4 .tab_bx {flex-direction: column; gap: 4rem;}
    #section4 .tab_bx .tab_con {width: 100%;}
    #section4 .tab_bx .tab_con:nth-child(2) {flex-direction: row-reverse;}
    #section4 .tab_bx .short_bx {gap: 3rem;}
    #section4 .tab_bx .text_bx {bottom: 5rem;}
    #section4 .tab_bx a:hover .text_bx {bottom: 6rem;}
    #section4 .tab_bx .text_bx .tit {font-size: 2.8rem;}
}

@media screen and (max-width: 768px) {
    #section4 .tab_list {margin-bottom: 3.5rem;}
    #section4 .tab_bx {gap: 3rem;}
    #section4 .tab_bx .text_bx .tit {font-size: 1.8rem;}
    #section4 .tab_bx .text_bx {left: 2rem; bottom: 3rem;}
    #section4 .tab_bx a:hover .text_bx {bottom: 4rem;}
    #section4 .tab_bx .short_bx {gap: 2rem;}
    #section4 .tab_bx .short_bx a .text_bx {bottom: 1rem;}
    #section4 .tab_bx .short_bx a:hover .text_bx {bottom: 2rem;}
    #section4 .tab_bx .text_bx .badge {padding: 0.6rem 1.4rem; margin-bottom: 1rem;}
}

@media screen and (max-width: 480px) {
    #section4 {padding: 5rem 0;}
    #section4 .tab_bx {gap: 2rem;}
    #section4 .tab_bx .tab_con {gap: 1rem;}
    #section4 .tab_bx .short_bx {gap: 1.5rem;}
    #section4 .tab_list li a {padding: 1rem 2rem; font-size: 1.6rem;}
    #section4 .tab_bx .text_bx {left: 1rem;}
    #section4 .tab_bx .text_bx {bottom: 1rem;}
    #section4 .tab_bx .short_bx a .text_bx {bottom: 0;}
    #section4 .tab_bx a:hover .text_bx {bottom: 2rem;}
    #section4 .tab_bx .short_bx a:hover .text_bx {bottom: 1rem;}
    #section4 .tab_bx .text_bx .tit {font-size: 1.2rem;}
    #section4 .tab_bx .text_bx .badge {font-size: 1rem; padding: 0.4rem 1rem; margin-bottom: 0.7rem;}
}
/* section4 */