/* --------------------------------common-------------------------------- */
section .btn_wrap {display: none;}
@media screen and (max-width:1024px) {
    section .btn_wrap {display: flex;}
    .title_wrap .btn_more {display: none;}
    .title_wrap .title {flex-direction: column; justify-content: flex-start; align-items: flex-start;}
}
/* --------------------------------common end-------------------------------- */


/* --------------------------------main_vis-------------------------------- */
.main_vis {width: 100%; margin-top: -90px; overflow: hidden;}
.main_vis .swiper_main_vis .swiper-slide {position: relative; width: 100%; height: 100vh; min-height: 540px; background-size: cover; background-position: center; background-repeat: no-repeat; /*height: 0; padding-top: calc((980 / 1920) * 100%);*/}
.main_vis .swiper_main_vis .swiper-slide a {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.main_vis .swiper_main_vis .swiper-slide h2 {position: absolute; left: calc((296 / 1920) * 100%); top: calc((404 / 980) * 100%); font-size: 3.5rem; font-weight: 800; color: #fff; line-height: 135%;}
.main_vis .swiper_main_vis .swiper_control_wrap {position: absolute; left: calc((296 / 1920) * 100%); top: calc((350 / 980) * 100%); z-index: 1;}
.main_vis .swiper_main_vis .swiper-pagination-wrap {display: flex; gap: 0.75rem;}
.main_vis .swiper_main_vis .swiper-pagination-bullet {display: block; width: 0.875rem; height: 0.875rem; border-radius: 100px; background-color: #fff; border: 1px solid #222; opacity: 1;}
.main_vis .swiper_main_vis .swiper-pagination-bullet-active {width: 2.5rem; background-color: #877EFF;}
/*라이브피드*/
.main_vis .live_feed {position: absolute; left: 0; bottom: 0; width: 100%; z-index: 10;}
.main_vis .sum {position: absolute; left: 0; top: 0; width: 30%; height: 100%; background-color: rgba(34, 34, 34, 0.80); z-index: 11; backdrop-filter: blur(10px);}
.main_vis .sum p {display: flex; align-items: center; justify-content: center; gap: 1rem; height: 100%; color: #fff; font-size: 2.25rem; font-weight: 800;}
.main_vis .sum p::before {content: ""; display: block; width: 2.25rem; height: 2.25rem; background: url(/front/images/common/ico_clab_white.svg) no-repeat center/100% auto;}
/*라이브피드 css 버전*/
/*.main_vis .marquee_wrap {display: flex; align-items: center; width: calc(100% - 30%); margin-left: 30%; background-color: rgba(96, 73, 234, 0.80); color: #fff;}*/
/*.main_vis .marquee_wrap .ico {margin: 0 1rem 0 2rem; width: 1.5rem; height: 1.5rem; background: url(/front/images/common/ico_megaphone.svg) no-repeat center/100% auto;}*/
/*.main_vis .marquee_inner {position: relative; height: 100%; overflow: hidden }*/
/*.main_vis .marquee_track {display: flex; gap: 3.5rem; width: 100%; animation: marqueeLoop 35s linear infinite;}*/
/*.main_vis .marquee {display: flex; align-items: center; height: 5rem; gap: 3.5rem; white-space: nowrap;}*/
/*.main_vis .marquee span {font-size: 1.125rem; color: #fff; font-weight: 600;}*/
/*.main_vis .marquee strong {font-weight: 800;}*/
/*라이브피드 슬라이드 버전*/
/*.main_vis .swiper_marquee_wrap {display: flex; align-items: center; width: calc(100% - 30%); margin-left: 30%; background-color: rgba(96, 73, 234, 0.80); color: #fff;}*/
/*.main_vis .swiper_marquee_wrap .swiper-wrapper {    transition-timing-function: linear !important;}*/
/*.main_vis .swiper_marquee_wrap .ico {margin: 0 1rem 0 2rem; width: 1.5rem; height: 1.5rem; background: url(/front/images/common/ico_megaphone.svg) no-repeat center/100% auto;}*/
/*.main_vis .swiper_marquee_wrap {position: relative; height: 100%; overflow: hidden }*/
/*.main_vis .swiper_marquee_wrap .swiper-slide {display: flex; justify-content: center; align-items: center; width: auto; height: 5rem; overflow: hidden;}*/
/*.main_vis .swiper_marquee_wrap .swiper-slide span {font-size: 1.125rem; color: #fff; font-weight: 600;}*/
/*.main_vis .swiper_marquee_wrap .swiper-slide strong {font-weight: 800;}*/
/*라이브피드 js 버전*/
.main_vis .marquee_wrap {display: flex; align-items: center; width: calc(100% - 30%); margin-left: 30%; background-color: rgba(96, 73, 234, 0.80); backdrop-filter: blur(10px); overflow:hidden;}
.main_vis .marquee_wrap .ico {margin: 0 1rem 0 2rem; width: 1.5rem; height: 1.5rem; background: url(/front/images/common/ico_megaphone.svg) no-repeat center/100% auto;}
.main_vis .marquee_inner {overflow: hidden; flex: 1;}
.main_vis .marquee_track {display: inline-flex; gap: 3.5rem; will-change: transform;}
.main_vis .marquee_item {display: inline-flex; align-items: center; white-space: nowrap; height: 5rem; gap: 3.5rem;}
.main_vis .marquee_item span {font-size: 1.125rem; color: #fff; font-weight: 600;}
.main_vis .marquee_item strong {font-weight: 800;}
@media screen and (max-width:1200px) {
    .main_vis {margin-top: 0;}
    .main_vis .swiper_main_vis .swiper-slide h2 {top: calc((364 / 980) * 100%);}
    .main_vis .swiper_main_vis .swiper_control_wrap {top: calc((310 / 980) * 100%);}
    .main_vis .sum p {font-size: 1.75rem;}
}/* lg */
@media screen and (max-width:1024px) {
    .main_vis .swiper_main_vis .swiper-slide h2 {font-size: 3rem;}
    .main_vis .sum p {font-size: 1.5rem;}
}/* md */
@media screen and (max-width:767px) {
    .main_vis .swiper_main_vis .swiper_control_wrap {display: block;}
    /*라이브피드*/
    .main_vis .live_feed,
    .main_vis .sum {position: static;}
    .main_vis .sum {width: 100%; padding: 1.33rem 5%; font-size: 2.167rem;}
    .main_vis .sum p {justify-content: left; gap: 0.667rem; font-size: 2.167rem;}
    .main_vis .sum p::before {width: 2.667rem; height: 2.667rem;}
    .main_vis .marquee_wrap {width: 100%; margin-left: 0;}
    .main_vis .marquee_wrap .ico {width: 2rem; height: 2rem; margin-left: 5%;}
    /*라이브피드 css 버전*/
    /*.main_vis .marquee_track {gap: 1rem;}*/
    /*.main_vis .marquee {gap: 1rem; height: 4.5rem;}*/
    /*.main_vis .marquee span {font-size: 1.33rem;}*/
    /*라이브피드 js 버전*/
    .main_vis .marquee_track {gap: 1rem;}
    .main_vis .marquee_item {height: 4.5rem; gap: 1rem;}
    .main_vis .marquee_item span {font-size: 1.33rem}
}/* sm */
@media screen and (max-width:600px) {
    .main_vis .swiper_main_vis .swiper-slide {height: 128vw; background-position: center center;}
    .main_vis .swiper_main_vis .swiper-slide h2 {left: 5%; top: auto; bottom: calc((78 / 456) * 100%);}
    .main_vis .swiper_main_vis .swiper_control_wrap {left: 50%; top: auto; bottom: calc((24 / 456) * 100%); transform: translateX(-50%);}
}/* xsm */
/* --------------------------------main_vis end-------------------------------- */


/* --------------------------------main_sec_01-------------------------------- */
.main_sec_01 {position: relative; min-height: 100vh; background-color: #F8F8F8;}
.main_sec_01 .banner {position: absolute; width: 40vw; height: 100vh; max-height: 1080px; /*padding-bottom: calc((1080 / 1920) * 100%);*/ background-size: cover; background-position: center; background-repeat: no-repeat;}
.main_sec_01 .banner .text_box {position: absolute; left: calc((80 / 808) * 100%); bottom: 6.25rem; width: 80%; color: #222222; word-break: keep-all;}
.main_sec_01 .banner .text_box i{display: inline-block; margin-bottom: 1rem; width: 3.063rem; height: 3.063rem; background: url(/front/images/common/title_ico_01.svg) no-repeat center/100% auto;}
.main_sec_01 .banner h3 {margin-bottom: 1rem; font-size: 2.875rem; font-weight: 800; line-height: 132%;}
.main_sec_01 .banner p {opacity: 0.8; font-size: 1.875rem;}
.main_sec_01 .list_wrap {width: 100%; padding: 7.5rem 0 calc(7.5rem + 5rem) 45%;}
/*list*/
.main_sec_01 .list {display: flex; gap: 7.5rem 2rem; flex-wrap: wrap;}
.main_sec_01 .list li {flex: calc((100% - (2rem * 1))/2) 0 0;}
.main_sec_01 .list li:nth-child(even) {transform: translateY(5rem);}
.main_sec_01 .list a {position: relative; display: block;}
.main_sec_01 .list figure {width: 100%; height: 0; padding-bottom: calc((242 / 376) * 100%); border: 1px solid #222; background-size: cover; background-position: center; background-repeat: no-repeat;}
.main_sec_01 .list .logo {width: auto; height: 2.5rem; margin-bottom: 0.5rem;}
.main_sec_01 .list .logo img {display: block; width: auto; height: 100%;}
.main_sec_01 .list .list_tit {font-size: 1.5rem;}
.main_sec_01 .clap_box {gap: 0.5rem; margin-bottom: 1rem;}
.main_sec_01 .clap_box p {display: block; font-family: 'Pretendard', sans-serif; font-size: 1.125rem;}
.main_sec_01 .clap_box p::before {display: none;}
.main_sec_01 .clap_box .ico {position: relative; width: 2.125rem; height: 1.938rem;}
.main_sec_01 .clap_icon_static {display: block; width: 100%; height: 100%; background: url(/front/images/common/ico_clab_modi.png) no-repeat center/100% auto; transition: opacity 0.2s ease;}
.main_sec_01  .clap_icon_lottie {position: absolute; left: 50%; top: 50%; width: 3.5rem; height: 3.5rem; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; transform: translate(-50%,-50%);}
.main_sec_01 .list a:hover .clap_box .clap_icon_static {opacity: 0;}
.main_sec_01 .list a:hover .clap_box .clap_icon_lottie {opacity: 1;}
@media screen and (max-width:1400px) {
    .main_sec_01 .banner h3 {font-size: 2.5rem;}
    .main_sec_01 .banner p {font-size: 1.75rem;}
}/* md */
@media screen and (max-width:1024px) {
    .main_sec_01 {min-height: unset; padding: 7.5rem 0;}
    .main_sec_01 .banner {display: none;}
    .main_sec_01 .list_wrap {padding: 0;}
    /*list*/
    .main_sec_01 .list {gap: 4.5rem 2rem;}
    .main_sec_01 .list li {flex: calc((100% - (2rem * 2))/3) 0 0;}
    .main_sec_01 .list li:nth-child(even) {transform: translateY(0);}
}/* md */
@media screen and (max-width:767px) {
    .main_sec_01 {padding: 5rem 0;}
    .main_sec_01 .list li {flex: calc((100% - (2rem * 1))/2) 0 0;}
    .main_sec_01 .clap_box .ico {width: 1.875rem; height: 1.875rem;}
    .main_sec_01 .clap_icon_lottie {width: 2.875rem; height: 2.875rem;}
}/* sm */
@media screen and (max-width:500px) {
    .main_sec_01 .list li {flex: 100% 0 0;}
}/* xsm */
/* --------------------------------main_sec_01 end-------------------------------- */


/* --------------------------------main_sec_02-------------------------------- */
.main_sec_02 {padding: 7.5rem 0; background-color: #fff; overflow-x: hidden;}
.main_sec_02 .swiper-slide {width: 22.5vw !important;}
@media screen and (max-width:1200px) {
    .main_sec_02 .swiper-slide {width: 25vw !important;}
}
@media screen and (max-width:1024px) {
    .main_sec_02 .swiper-slide {width: 33vw !important;}
}
@media screen and (max-width:767px) {
    .main_sec_02 {padding: 5rem 0;}
    .main_sec_02 .swiper-slide {width: calc((100% - (2rem * 1))/2) !important;}
}
@media screen and (max-width:500px) {
    .main_sec_02 .swiper-slide {width: 100% !important;}
}
/* --------------------------------main_sec_02 end-------------------------------- */


/* --------------------------------main_sec_03-------------------------------- */
.main_sec_03 {padding: 7.5rem 0; background-color: #F8F8F8;}
.main_sec_03 .partner_list .ani {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; background-color: #6049EA; border: none;}
.main_sec_03 .partner_list h6 {font-size: 1.875rem; font-weight: 800; color: #fff; line-height: 140%; text-align: center; word-break: keep-all;}
/*박수 모션*/
.clab_lottie{width: 7.875rem; height: 7.875rem;}

.clap_wrap {position: relative;}
.clap_wrap .clap_front {display: block; z-index: 3; width: 3.5rem; height: 3.5rem; background: url(/front/images/common/ico_clap_f.svg) center center / contain no-repeat;}
.clap_wrap .clap_back {display: block; position: absolute; top: calc(50% + 0.125rem); left: calc(50% + 1.375rem); transform: translate(-50%,-50%) rotate(-2deg); z-index: 1; width: 3.5rem; height: 3rem; background: url(/front/images/common/ico_clap_b.svg) center center / contain no-repeat;}
.clap_wrap::before {opacity: 0; content: ''; display: block; position: absolute; top: calc(50% - 2.25rem); right: 50%; width: 0.5rem; height: 0.5rem; background: url(/front/images/common/ico_clap_s_01.svg) center center / contain no-repeat;}
.clap_wrap::after {opacity: 0; content: ''; display: block; position: absolute; top: calc(50% - 2.25rem); right: calc(50% - 1.375rem); width: 0.5rem; height: 0.5rem; background: url(/front/images/common/ico_clap_s_02.svg) center center / contain no-repeat;}
.clap_front {animation: clap_f 1.6s .6s infinite ease-in-out;}
.clap_back {animation: clap_b 1.6s .6s infinite ease-in-out;}
.clap_wrap::before {animation: clap_s_01 1.6s 0.62s infinite ease-in-out;}
.clap_wrap::after {animation: clap_s_02 1.6s 0.6s infinite ease-in-out;}
@keyframes clap_f {
    0% {transform: translate(0, 0);}
    10% {transform: translate(1px , 1px);}
    20% {transform: translate(0, 0);}
    35% {transform: translate(0, 0);}
    42% {transform: translate(1px , 1px);}
    50% {transform: translate(0, 0);}
    60% {transform: translate(1px , 1px);}
    70% {transform: translate(0, 0);}
    80% {transform: translate(0, 0);}
    90% {transform: translate(1px , 1px);}
    100% {transform: translate(0, 0)}
}
@keyframes clap_b {
    0% {transform: translate(-50%,-50%) rotate(0deg);}
    10% {transform: translate(calc(-50% - 1px),calc(-50% - 1px)) rotate(-2deg);}
    20% {transform: translate(-50%,-50%) rotate(0deg);}
    35% {transform: translate(-50%,-50%) rotate(0deg);}
    42% {transform: translate(calc(-50% - 1px),calc(-50% - 1px)) rotate(-2deg);}
    50% {transform: translate(-50%,-50%) rotate(0deg);}
    60% {transform: translate(calc(-50% - 1px),calc(-50% - 1px)) rotate(-2deg);}
    70% {transform: translate(-50%,-50%) rotate(0deg);}
    80% {transform: translate(-50%,-50%) rotate(0deg);}
    90% {transform: translate(calc(-50% - 1px),calc(-50% - 1px)) rotate(-2deg);}
    100% {transform: translate(-50%,-50%) rotate(0deg);}
}
@keyframes clap_s_01 {
    0% {opacity: 0;}
    10% {opacity: 1; transform: translateY(0);}
    20% {opacity: 1; transform: translateY(-1px);}
    35% {opacity: 1; transform: translateY(-1px);}
    42% {opacity: 1; transform: translateY(0);}
    50% {opacity: 0;}
    60% {opacity: 1; transform: translateY(0);}
    70% {opacity: 1; transform: translateY(-1px);}
    80% {opacity: 1; transform: translateY(-1px);}
    90% {opacity: 1; transform: translateY(0);}
    100% {opacity: 1;}
}
@keyframes clap_s_02 {
    0% {opacity: 0; transform: translateY(0);}
    10% {opacity: 1;}
    20% {opacity: 1; transform: translateY(-1px);}
    35% {opacity: 1; transform: translateY(0);}
    42% {opacity: 1; transform: translateY(-1px);}
    50% {opacity: 0; transform: translateY(0);}
    60% {opacity: 1; transform: translateY(0);}
    70% {opacity: 1; transform: translateY(-1px);}
    80% {opacity: 1; transform: translateY(0);}
    90% {opacity: 1; transform: translateY(-1px);}
    100% {opacity: 1; transform: translateY(0);}
}
@media screen and (max-width:767px) {
    .main_sec_03 {padding: 5rem 0;}
}
@media screen and (max-width:500px) {
    .main_sec_03 .partner_list .ani {display: none;}
}
/* --------------------------------main_sec_03 end-------------------------------- */


/* --------------------------------main_sec_04-------------------------------- */
.main_sec_04 {position: relative; padding: 10rem 0; background-color: #F8F8F8;}
.main_sec_04::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 30%; background-color: #222;}
.main_sec_04 .banner_wrap {position: relative; padding: 4.75rem 5rem; border: 2px solid #222; background-color: #fff; overflow: hidden; z-index: 2;}
.main_sec_04 .banner_wrap > * {position: relative; z-index: 3;}
/* 배경 전환용 가상 요소 */
.main_sec_04 .banner_wrap::before {content: ""; position: absolute; right: 0; bottom: 0; inset: 0; background-image: var(--bg-image); background-size: 30% auto; background-position: right 10% bottom; background-repeat: no-repeat; z-index: 0; opacity: 1; transition: opacity 0.6s ease;}
.main_sec_04 .banner_wrap::before {opacity: 1;}
.main_sec_04 .banner_wrap:not(.active)::before {opacity: 0;}
.main_sec_04 .banner_wrap h3 {margin-bottom: 1rem; font-size: 1.5rem; font-weight: 700; line-height: 134%;}
.main_sec_04 .slide_wrap {width: 60%; margin-bottom: 3.25rem; font-size: 2.875rem; color: #222; font-weight: 800;}
.main_sec_04 .slide_wrap::after {content: "시작됩니다."; display: block; }
.main_sec_04 .swiper-container {height: 4.5rem; overflow: hidden;}
.main_sec_04 .swiper-slide {background-color: #fff;}
.main_sec_04 .swiper-slide span {position: relative; display: inline-block; padding-bottom: 0.5rem; line-height: 120%;}
.main_sec_04 .swiper-slide span::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #222;}
@media screen and (max-width:1200px) {
    .main_sec_04 .slide_wrap {font-size: 2.5rem;}
}
@media screen and (max-width:1024px) {
    .main_sec_04 .swiper-container {height: 8rem;}
    .main_sec_04 .slide_wrap {width: 50%;}
    .main_sec_04 .banner_wrap::before {background-size: 40% auto;}
    .main_sec_04 .swiper-slide span:nth-of-type(2) {margin-top: 0.5rem;}
}
@media screen and (max-width:767px) {
    .main_sec_04 {padding: 5rem 0;}
    .main_sec_04 .banner_wrap {padding: 4rem 2.66rem 19rem;}
    .main_sec_04 .banner_wrap::before {background-position: center bottom; background-size: auto 17rem;}
    .main_sec_04 .slide_wrap {width: 100%; margin-bottom: 2rem;}
}
/* --------------------------------main_sec_04 end-------------------------------- */


/* --------------------------------main_sec_05-------------------------------- */
.main_sec_05 {position: relative; padding: 2.5rem 0; background-color: #222; color: #fff;}
.main_sec_05 h4 {margin-bottom: 1rem; font-size: 1.5rem; font-weight: 700; line-height: 140%;}
.main_sec_05 .flex_wrap {display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 3rem; border-bottom: 2px solid #fff;}
.main_sec_05 h3 {font-size: 2.875rem; font-weight: 800; line-height: 132%;}
@media screen and (max-width:1024px) {
    .main_sec_05 {padding: 1.667rem 0 3.33rem;}
    .main_sec_05 .flex_wrap {flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3.5rem; padding-bottom: 2.667rem;}
    .main_sec_05 h3 {font-size: 2.667rem;}
    .main_sec_05 a {font-size: 1.667rem;}
}
/* --------------------------------main_sec_05 end-------------------------------- */