main{font-family: 'Manrope';overflow: hidden; word-break: keep-all;}

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.quick{position: fixed;bottom: 45px;right: 45px;z-index: 1000;display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 20px;}
.quick .circle_line {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.quick .circle_line::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--gradient-angle),
        var(--circle-color),
        var(--circle-color),
        #fff,
        var(--circle-color),
        var(--circle-color)
    );
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotate 3s linear infinite;
}

.quick .circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;align-items: center;justify-content: center;
    text-align: center;
    font-size: 13px;font-weight: 600;color: #fff;
    line-height: 1.3846;
}
.quick .circle.blue{font-size: 20px;}

.quick .circle_line:has(.blue) {
    --circle-color: #0b386d;
}
.quick .circle_line:has(.red) {
    --circle-color: #e71a28;
}
.quick .circle_line:has(.yellow) {
    --circle-color: #f5a100;
}
.quick .circle_line:has(.green) {
    --circle-color: #3fb679;
}

.quick .circle.blue{background: #0b386d;}
.quick .circle.red{background: #e71a28;}
.quick .circle.yellow{background: #f5a100;}
.quick .circle.green{background: #3fb679;}

@keyframes rotate {
    0% {
        --gradient-angle: 0deg;
    }
    100% {
        --gradient-angle: 360deg;
    }
}






















/* 공통 */
.bar{width: clamp(35px, calc(53 / 1920 * 100vw), 53px);}
.main .s1{
    position: relative;
    background-image: url(/asset/img/main/main_bg.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-top: 196px;
    padding-bottom: 370px;
}
.main .s1 .tit{width: fit-content;display: flex;align-items: center;gap: 40px;}
.main .s1 .tit > div{overflow: hidden;}
.main .s1 .tit > div:nth-child(1) img{width: clamp(450px, calc(810 / 1920 * 100vw), 810px);}
.main .s1 .tit > div:nth-child(2) img{width: clamp(5px, calc(5 / 1920 * 100vw), 5px);}
.main .s1 .tit > div:nth-child(3) img{width: clamp(280px, calc(388 / 1920 * 100vw), 388px);}

.main .s2{
    position: relative;
    background-image: url(/asset/img/main/main_bg_2.jpg);
    background-size: cover;
    background-position: center 50px;
    background-repeat: no-repeat;
}
.main .s2 ._obj{position: absolute;bottom: 0;right: 0;width: 100%;}
.main .s2 ._obj img{width: 100%;}
.main .s2 .txt_logo{position: absolute;bottom: -40px;;left: 0;z-index: 1;}

.main .s2 .date{display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 30px;padding-top: 100px;}
.main .s2 .date > div{overflow: hidden;}
.main .s2 .date strong{font-size: 60px;font-weight: 800;letter-spacing: -0.02em;display: block;}
.main .s2 .date small{font-size: 18px;font-weight: 500;letter-spacing: -0.02em;color: #777777;display: block;}

.main .s2 .bx_wrap{display: flex;align-items: center;justify-content: center;gap: 30px;padding-top: 60px;}
.main .s2 .bx_wrap .bx{max-width: 360px;width: 100%;box-sizing: border-box;border-radius: 20px;    padding: 30px;padding-top: 40px;display: flex;align-items: center;justify-content: center;flex-direction: column;min-height: 385px;}
.main .s2 .bx_wrap .bx .bx_tit{font-size: 24px;font-weight: 700;letter-spacing: -0.02em;color: #fff;padding-top: 10px;padding-bottom: 35px;text-align: center;line-height: 1.3;min-height: 108px;box-sizing: border-box;}
.main .s2 .bx_wrap .bx .inner{background: #fff;width: 100%;border-radius: 20px;    padding: 50px 0;display: flex;align-items: center;justify-content: center; flex-direction: column;gap: 10px;box-sizing: border-box;}
.main .s2 .bx_wrap .bx .inner i{font-size: 20px;color: black;}
.main .s2 .bx_wrap .bx .inner p{font-size: 18px;font-weight: 700;letter-spacing: -0.02em;color: #000;}
.main .s2 .bx_wrap .bx .inner small{font-size: 18px;font-weight: 700;letter-spacing: -0.02em;color: #e71a28;font-style: italic;text-align: center;line-height: 1.3;}
.main .s2 .bx_wrap .bx .inner small ._addsup{top: 5px;}
.main .s2 .bx_wrap .bx .inner small._small{font-size: .95em;}
.main .s2 .bx_wrap .bx.red{background: #e71a28;}
.main .s2 .bx_wrap .bx.blue{background: #0080CC;}
.main .s2 .bx_wrap .bx.yellow{background: #f5a100;}
.main .s2 .bx_wrap .bx.green{background: #096c45;}
.main .s2 .bx_wrap sup {vertical-align: super;font-size: 0.8em;position: relative;}

.main .s2 .profileBx{padding-top: 280px;padding-bottom: 200px;}
.main .s2 .profileBx .tit strong{font-size: 60px;font-weight: 800;letter-spacing: -0.02em;color: #fff;padding-top: 10px;display: block;line-height: 1.3;}
.main .s2 .profileBx .tit > div{overflow: hidden;}
.main .s2 .profileBx .imgBx{padding-top: 90px;display: flex;align-items: flex-start;justify-content: center;gap: 50px;}
.main .s2 .profileBx .imgBx .profile img{border-radius: 20px; max-width: 100%;}
.main .s2 .profileBx .imgBx .profile strong{font-size: 24px;font-weight: 700;letter-spacing: -0.02em;color: #fff;text-align: center;display: block;padding-top: 30px;line-height: 1.3;}
.main .s2 .profileBx .imgBx .profile > div{overflow: hidden;}
.main .s2 .profileBx .imgBx .profile p{font-size: 16px;font-weight: 500;letter-spacing: -0.02em;color: rgba(255, 255, 255, 0.7);line-height: 1.6;text-align: center;padding-top: 25px;}

/* swiper 추가 */
.main .s2 .profile_swiper{padding-top: 60px;position: relative;}
.main .s2 .profile_swiper .swiper-slide{width: 100%;}
.main .s2 .profile_swiper .swiper-slide .profile{display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 10px;box-sizing: border-box;}
.main .s2 .profile_swiper .swiper-slide .profile img{border-radius: 20px; max-width: 100%;}
.main .s2 .profile_swiper .swiper-slide .profile strong{font-size: 24px;font-weight: 700;letter-spacing: -0.02em;color: #fff;text-align: center;display: block;padding-top: 30px;line-height: 1.3;}
.main .s2 .profile_swiper .swiper-slide .profile > div{overflow: hidden;}
.main .s2 .profile_swiper .swiper-slide .profile p{font-size: 16px;font-weight: 500;letter-spacing: -0.02em;color: rgba(255, 255, 255, 0.7);line-height: 1.6;text-align: center;padding-top: 10px;}

.main .s2 .swiperBx{position: relative;}
.main .s2 .swiperBx .controlBx{position: absolute;top: 45%;right: 0;transform: translateY(-50%);display: flex;align-items: center;justify-content: space-between;width: 100%;z-index: 12;}
.main .s2 .swiperBx .controlBx .swiper-button-next,
.main .s2 .swiperBx .controlBx .swiper-button-prev{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.main .s2 .swiperBx .controlBx .swiper-button-prev{position: relative;left: -5%;}
.main .s2 .swiperBx .controlBx .swiper-button-next{position: relative;right: -5%;}
/* swiper 끝 */

.main .s3{position: relative;
    background-image: url(/asset/img/main/main_bg_3.jpg);
    background-size: cover;
    background-position: center -50%;
    background-repeat: no-repeat;
    padding-bottom: 150px;
}
.main .s3 ._obj{position: absolute; top: 0;left: 0;width: 100%;}
.main .s3 ._obj img{width: 100%;}
.main .s3 .cont{padding-top: 300px;display: flex;align-items: flex-start;padding-bottom: 200px;}
.main .s3 .cont strong{font-size: 60px;font-weight: 800;letter-spacing: -0.02em;color: black;padding-top: 10px;display: block;}
.main .s3 .cont .left{max-width: 720px;width: 100%;}
.main .s3 .cont .left > div{overflow: hidden;}
.main .s3 .cont .right{width: 100%;}
.main .s3 .cont .right > div{overflow: hidden;}
.main .s3 .cont .selectBx{padding-top: 50px;max-width: 600px;}
.main .s3 .cont .selectBx ._select{position: relative;}
.main .s3 .cont .selectBx ._select i{position: absolute;right: 30px;top: 50%;transform: translateY(-50%);font-size: 18px;color: #999999;pointer-events: none;}
.main .s3 .cont .selectBx h3{font-size: 20px;font-weight: 600;letter-spacing: -0.02em;color: black;padding-bottom: 10px;}
.main .s3 .cont .selectBx select{width: 100%;padding: 14px 20px;border-radius: 25px;font-size: 16px;font-weight: 500;letter-spacing: -0.02em;color: #999999;background: #eaeaea;border: none; appearance: none; -moz-appearance: none; -webkit-appearance: none;}
.main .s3 .cont .selectBx select:nth-child(2){margin-bottom: 35px;}


.main .s3 .formBx{display: flex;align-items: center;}
.main .s3 .formBx .left{max-width: 720px;width: 100%;}
.main .s3 .formBx .left strong{font-size: 60px;font-weight: 800;letter-spacing: -0.02em;color: black;padding-top: 10px;display: block;}
.main .s3 .formBx .left .tit > div{overflow: hidden;}
.main .s3 .formBx .left p{font-size: 18px;font-weight: 500;letter-spacing: -0.02em;color: #777777;padding-top: 20px;line-height: 1.6;}
.main .s3 .formBx .blueBx{background: #1d3865;border-radius: 30px;padding: 65px;padding-bottom: 55px;}
.main .s3 .formBx .blueBx .form_row{margin-top: 30px;}
.main .s3 .formBx .blueBx .form_row:first-child{margin-top: 0;}
.main .s3 .formBx .blueBx .form_row label{font-size: 20px;font-weight: 600;letter-spacing: -0.02em;color: #fff;}
.main .s3 .formBx .blueBx .form_row label em{color: #e99a2f;}
.main .s3 .formBx .blueBx .form_row input{max-width: 580px;width: 100%;padding: 14px 20px;border-radius: 25px;font-size: 16px;font-weight: 400;letter-spacing: -0.02em;color: #999999;background: #fff;border: none;display: block;margin-top: 15px;box-sizing: border-box;}
.main .s3 .formBx .right{width: 100%; max-width: 720px;}
.main .s3 .formBx .blueBx .form_row ._select{position: relative; margin-top: 15px;}
.main .s3 .formBx .blueBx .form_row ._select select{margin-top: 0;appearance: none;  -moz-appearance: none; -webkit-appearance: none;}
.main .s3 .formBx .blueBx .form_row select{width: 100%;padding: 14px 20px;border-radius: 25px;font-size: 16px;font-weight: 400;letter-spacing: -0.02em;color: #999999;background: #fff;border: none;display: block;margin-top: 15px;box-sizing: border-box;}
.main .s3 .formBx .blueBx .form_row ._select i{
	position: absolute; top: 50%; right: 30px; transform: translateY(-50%);
	font-size: 18px;
    color: #999999;
}
.main .s3 .formBx .blueBx span{font-size: 14px;font-weight: 400;letter-spacing: -0.02em;color: #fff;padding-top: 30px;display: block;text-align: center;line-height: 1.3;}
.main .s3 .formBx .blueBx span em{margin-right: 5px;}
.main .s3 .formBx .blueBx span strong{font-weight: 700;}

.main .s3 .formBx .right .submit{display: flex;align-items: center;justify-content: center;}
.main .s3 .formBx .right button{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    background: #e99a2f;
    border-radius: 25px;
    padding: 14px 20px;
    letter-spacing: -0.02em;
    color: #fff;
    border: none;
    cursor: pointer;
    margin-top: 30px;
    box-sizing: border-box;
}
.main .s3 .formBx .right button span{font-size: 20px;font-weight: 700;letter-spacing: -0.02em;color: #fff;}
.main .s3 .formBx .right button i{font-size: 20px;}

.main .s3 .sponsor{padding-top: 200px;}
.main .s3 .sponsor .tit{text-align: center;}
.main .s3 .sponsor .tit strong{font-size: 60px;font-weight: 800;letter-spacing: -0.02em;color: black;padding-top: 10px;display: block;}
.main .s3 .sponsor .tit > div{overflow: hidden;}

/* 마퀴 */
.main .s3 .marqueeArea{padding-top: 90px; width: 100%; overflow: hidden;}
.main .s3 .marqueeArea .box{
    display: flex;
}
.main .s3 .marqueeArea .box > div{
    display: flex; gap: 70px;
    width: fit-content; padding-right: 70px;
    animation: marquee 60s linear infinite;
}
.main .s3 .marqueeArea .box div .imgBx{}
.main .s3 .marqueeArea .box div .imgBx img{max-width: unset; mix-blend-mode: darken;}



@media screen and (max-width: 1680px) {
    .main .s2 .txt_logo{display: none;}
    .main .s2 .date strong{font-size: 52px;}
    .main .s2 .profileBx .tit strong{font-size: 52px;}


    .main .s3 .cont strong {font-size: 52px;}
    .main .s3 .formBx .left strong{font-size: 52px;}
    .main .s3 .sponsor .tit strong{font-size: 52px;}
}
@media screen and (max-width: 1440px) {
    .main .s1 .wrap{display: flex;align-items: center;justify-content: center;}
    .main .s2 .date strong{font-size: 48px;}
    .main .s2 .profileBx .tit strong{font-size: 48px;}

    .main .s3 .cont strong {font-size: 48px;}
    .main .s3 .formBx .left strong{font-size: 48px;}
    .main .s3 .sponsor .tit strong{font-size: 48px;}
}
@media screen and (max-width: 1280px) {
    .main .s1 {background-position: 100% bottom}

    .main .s2 .bx_wrap {
        flex-wrap: wrap;
        max-width: 750px; /* 360px * 2 + gap 30px */
        margin: 0 auto;
    }
    .main .s2 .bx_wrap .bx {
        max-width: 360px; /* 기존 박스 사이즈 유지 */
    }
    
    .main .s2 .date strong {font-size: 42px;}
    .main .s2 .bx_wrap .bx .bx_tit {font-size: 22px;}
    /* .main .s2 .bx_wrap .bx .inner{max-width: 270px;} */
    .main .s2 .profileBx .tit strong{font-size: 42px;}
    .main .s2 .profileBx .imgBx{flex-wrap: wrap; max-width: 1024px; margin: 0 auto;}
    .main .s2 .profileBx .imgBx .profile strong {font-size: 22px;}

    
    .main .s3 .cont{gap: 30px;}
    .main .s3 .cont .left{width: 50%;}
    .main .s3 .cont .right{width: 50%;}
    .main .s3 .cont strong {font-size: 42px;}
    .main .s3 .formBx{flex-direction: column;gap: 40px;}
    .main .s3 .formBx .left{text-align: center;}
    .main .s3 .formBx .left strong{font-size: 42px;}
    .main .s3 .sponsor .tit strong{font-size: 42px;}

}

@media screen and (max-width: 1024px) {
    /* .main .s2 .bx_wrap .bx {max-width: 290px;} */
    .main .s2 .txt_logo{display: none;}
    .main .s2 .date strong{font-size: 38px;}
    .main .s2 .date small {font-size: 16px;}
    /* .main .s2 .bx_wrap .bx .bx_tit {font-size: 18px;} */
    .main .s2 .bx_wrap .bx .inner p {font-size: 16px;}
    .main .s2 .bx_wrap .bx .inner small {font-size: 16px;}
    .main .s2 .profileBx .tit strong{font-size: 38px;}


    .main .s3 .cont strong {font-size: 38px;}
    .main .s3 .formBx .left strong{font-size: 38px;}
    .main .s3 .sponsor .tit strong{font-size: 38px;}

}
@media screen and (max-width: 820px) {
    .main .s1{
        position: relative;
        background-image: url(/asset/img/main/main_bg_mob.png);
        padding-top: max(20vw,140px);
        padding-bottom: 40vw;
        background-position: center bottom;
        background-size: 100% auto;
    }

    .main .s1 .tit{flex-direction: column;gap: 0;}
    .main .s1 .tit > div:nth-child(1) img{width: calc(450/820*100vw); min-width: 240px; max-width: unset;}
    .main .s1 .tit > div:nth-child(2) img{width: 3px; max-width: unset;}
    .main .s1 .tit > div:nth-child(3) img{width: calc(280/820*100vw); min-width: 220px; max-width: unset;}
    .main .s1 .tit > div:nth-child(2){transform: rotate(270deg);}

    .main .s2 {background-position: center 300px}
    .main .s2 .bx_wrap .bx{max-width:360px;}
    .main .s2 .date{gap: 15px;}
    .main .s2 .date strong{font-size: 32px;}
    .main .s2 .bx_wrap{flex-direction: column;}
    .main .s2 .profileBx .imgBx .profile strong {font-size: 20px;}
    .main .s2 .profileBx {
        padding-top: 80px;
        padding-bottom: 100px;
    }
    .main .s2 .profileBx .tit strong {font-size: 32px;padding: unset;}
    .main .s2 .profileBx .imgBx{padding-top: 40px;}
    .main .s2 .profileBx .imgBx .profile{max-width: 280px;}

    .main .s3 .cont{padding-top: 100px;padding-bottom: 100px;}
    .main .s3 .cont{flex-direction: column;}
    .main .s3 .cont .left{width: 100%;}
    .main .s3 .cont .right{width: 100%;}
    .main .s3 .cont strong {font-size: 32px;padding: unset;}
    .main .s3 .formBx .left strong {font-size: 32px;padding: unset;}
    .main .s3 .cont .selectBx h3 {font-size: 18px;}
    .main .s3 .formBx .left p{font-size: 16px;}
    .main .s3 .formBx .left p br{display: none;}

    .main .s3 .formBx .right button span {font-size: 18px;}
    .main .s3 .formBx .right button i {font-size: 18px;}
    .main .s3 .sponsor .tit strong {font-size: 32px;padding: unset;}
    .main .s3 .sponsor{padding-top: 150px;}
}
@media screen and (max-width: 500px) {
    .main .s2 {background-position: center 300px}
    /* .main .s2 .date strong {font-size: 26px;} */
    .main .s2 .profileBx .imgBx {flex-direction: column;align-items: center;}
    /* .main .s2 .profileBx .tit strong {font-size: 26px;} */
    /* .main .s3 .cont strong {font-size: 26px;} */
    .main .s3 .formBx .blueBx{padding: 30px;}
    /* .main .s3 .formBx .left strong {font-size: 26px;} */
    /* .main .s3 .sponsor .tit strong {font-size: 26px;} */
    .main .s3 .formBx .blueBx .form_row label {font-size: 18px;}
    .main .s3 .formBx .blueBx .form_row input {font-size: 14px;}
    .main .s3 .formBx .blueBx .form_row select{font-size: 14px;}
    .main .s3 .formBx .right button span {font-size: 16px;}
    .main .s3 .formBx .right button i{font-size: 16px;}
    /* .main .s3 .marqueeArea .box::after{
        content: '';
        display: block;
        z-index: 1; position: absolute;
        top: 0; left: 0;
        width: 15.62vw; height: 100%;
        background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 90%);
        
    } */
}
@media screen and (max-width: 360px) {
    .main .s1 {padding-bottom: 200px}
    .main .s2 .date strong {font-size: 26px;}
    .main .s2 .date small {font-size: 14px;}
    .main .s2 .profileBx .tit strong {font-size: 26px;}
    .main .s2 .profileBx .imgBx .profile p {font-size: 14px;}
    .main .s2 .profileBx .imgBx .profile{max-width: 240px;}
    .main .s2 .bx_wrap .bx .bx_tit {font-size: 20px;}

    .main .s3 .cont strong {font-size: 26px;}
    .main .s3 .formBx .left strong {font-size: 26px;}
    .main .s3 .sponsor .tit strong {font-size: 26px;}
    .main .s3 .formBx .blueBx{padding: 30px;}
    .main .s3 .cont .selectBx select {font-size: 14px;}

    .main .s2 .bx_wrap .bx .inner p {font-size: 15px;}
    .main .s2 .bx_wrap .bx .inner small {font-size: 15px;}

}

/* swiper 추가 */
@media screen and (max-width: 1680px) {
    .main .s2 .swiperBx .controlBx{position: unset;justify-content: center;transform: unset;gap: 40px;}
    .main .s2 .swiperBx .controlBx{padding-top: 40px;}
    .main .s2 .swiperBx .controlBx .swiper-button-prev{position: relative;left: unset;}
    .main .s2 .swiperBx .controlBx .swiper-button-next{position: relative;right: unset;}
}
@media screen and (max-width: 1024px) {
    .main .s2 .profile_swiper .swiper-slide .profile strong {font-size: 22px;}
}
@media screen and (max-width: 820px) {
    .main .s2 .profile_swiper .swiper-slide .profile p{padding: 0;}
}
@media screen and (max-width: 500px) {
    .main .s2 .profile_swiper .swiper-slide .profile strong {font-size: 20px;}
}
@media screen and (max-width: 360px) {
    .main .s2 .swiperBx .controlBx {
        padding-top: 20px;
    }
    
}