/* kv ---------------------------------------------------*/

.kv{
    background: var(--bg);
    padding: 12rem 5rem 0;
}

.kv_content{
    display: flex;
    gap: 2rem;
}

.kv_main{
    position: relative;
    flex: 1.56;
}

.kv_main_content{
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%; 
}

.kv_main_content.filter::after{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.70) 100%);
}

.kv_sub_content.filter::after{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.80) 100%);
}


.kv_head_title{
    font-family: var(--roboto);
    font-weight: 700;
    mix-blend-mode: difference;
    position: absolute;
    top: 3rem;
    left: 3rem;
    z-index: 1;
}

.kv_head_title::before{
    content: "";
    background: #fff;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-right: 1rem;
}

.kv_inner{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: end;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.kv_main .kv_inner{
    height: 75vh;
    padding: 3rem 3rem 5rem;
}

.kv_main_text h2{
    font-size: 4rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 2rem;
}

.kv_main_text p{
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 2;
}

.kv .arrow_btn{
    width: 5.5rem;
    height: 4rem;
}

.kv .arrow_btn img{
    width: 2rem;
}

.swiper{
    width: 100%;
}

.swiper1{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    overflow: hidden;
}

.swiper1 .slide1{
    background: url(../images/top/kv_main.jpg) center / cover no-repeat;
}

.swiper1 .slide2{
    background: url(../images/top/kv_main.jpg) center / cover no-repeat;
}

.swiper1 .slide3{
    background: url(../images/top/kv_main.jpg) center / cover no-repeat;
}

.swiper1 .swiper-wrapper{
    transition: 0.3s;
}

.kv_main_content:hover .swiper1 .swiper-wrapper{
    transform: scale(1.02);
}

.kv_sub{
    display: flex;
    flex-flow: column;
    gap: 2rem;
    flex: 1;
}

.kv_sub_content{
    position: relative;
    padding: 3rem;
    border-radius: 1rem;
    flex: 1;
}

.kv_sub_text h2{
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.kv_pick .kv_sub_text h2{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-bottom: 0;
}

.kv_sub_text p{
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.3;
}

.kv_pick_header{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.kv_pick_date{
    font-family: var(--roboto);
    font-size: 1.2rem;
    font-weight: 700;
}

.kv_pick_category{
    font-size: 1rem;
    font-weight: 600;
    padding: 0.3rem 1rem;
    border: solid 0.105rem #fff;
    border-radius: 10rem;
}

.kv_pick_title{
    text-decoration: underline;
}

.kv_news{
    padding: 4rem 0;
    display: flex;
    align-items: center;
}

.kv_news h2{
    font-family: var(--roboto);
    font-size: 3.2rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-right: 2.5rem;
}

.kv_news a{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.kv_news_header{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.kv_news_date{
    font-family: var(--roboto);
    font-size: 1.2rem;
    font-weight: 700;
}

.kv_news_category{
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border: solid 0.105rem #fff;
    border-radius: 10rem;
}

.kv_news_title{
    font-weight: 600;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}


/* about ---------------------------------------------------*/

.about{
    overflow: hidden;
}

.flow_text {
    overflow: hidden;
    display: flex;
    width: 100%;
    margin-inline: calc(50% - 50vw);
}

.flow_text_item {
    font-family: var(--roboto);
    font-size: 21rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    background: linear-gradient(to right, #0B0B0B 0%, #A9A9A9 36%, #0B0B0B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    padding: 0 3rem;
    flex-shrink: 0;
}

.flow_text_item:nth-child(odd) {
    animation: MoveLeft 50s -25s infinite linear;
}

.flow_text_item:nth-child(even) {
    animation: MoveLeft2 50s infinite linear;
}

@keyframes MoveLeft {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes MoveLeft2 {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
}

.about_content{
    display: flex;
    gap: 10rem;
    margin-top: -8rem;
    z-index: 1;
    position: relative;
}

.about_inner{
    display: flex;
    flex-flow: column;
    align-items: start;
    gap: 10rem;
}

.about_inner h1{
    font-size: 6.4rem;
    font-weight: 600;
    line-height: 1.5;
}

.about_inner h1 .titleUp{
    display: inline-block;
}

.about_inner p{
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.8;
}

.about_img{
    margin-top: 11rem;
}

.about_sp_img{
    display: none;
}

/* more btn ---------------------------------------------------*/

.more_btn{
    font-family: var(--roboto);
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.more_btn_inner{
    background: var(--black);
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 3rem 0 3rem 5.5rem;
    border-radius: 10rem;
    z-index: 1;
    position: relative;
}

.more_arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 2rem;
    overflow: hidden;
    position: relative;
}

.arrow {
    position: absolute;
    width: 2.5rem;
    height: auto;
}

.arrow_main {
    transition: transform 0.3s ease;
}

.arrow_enter {
    transform: translateX(-8rem);
    transition: transform 0.3s ease;
}

.more_btn:hover .arrow_main {
    transform: translateX(8rem);
}

.more_btn:hover .arrow_enter {
    transform: translateX(0);
}

.more_btn.grad_line::before{
    inset: -0.205rem;
    border-radius: 10rem;
}

.more_btn  .grad_line_under{
    inset: -0.205rem;
    border-radius: 10rem;
}


/* blank btn ---------------------------------------------------*/

.blank_btn{
    font-family: var(--roboto);
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    position: relative;
}

.blank_btn_inner{
    background: var(--black);
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 2.5rem 4rem;
    border-radius: 10rem;
    z-index: 1;
    position: relative;
}

.blank_arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    width: 1.5rem;
    overflow: hidden;
    position: relative;
}

.blank_btn .arrow {
    position: absolute;
    width: 2.5rem;
    height: auto;
}

.blank_btn .arrow_main {
    transition: transform 0.3s ease;
}

.blank_btn .arrow_enter {
    transform: translate(-6rem, 6rem);
    transition: transform 0.3s ease;
}

.blank_btn:hover .arrow_main {
    transform: translate(6rem, -6rem);
}

.blank_btn:hover .arrow_enter {
    transform: translate(0, 0);
}

.blank_btn.grad_line::before{
    inset: -0.205rem;
    border-radius: 10rem;
}

.blank_btn .grad_line_under{
    inset: -0.205rem;
    border-radius: 10rem;
}


/* section header ---------------------------------------------------*/

.section_header h2{
    font-family: var(--roboto);
    font-size: 10.4rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 5rem;
}

.section_header p{
    font-size: 2rem;
    font-weight: 600;
}


/* social ---------------------------------------------------*/

.social_ico{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 4rem;
}

.social_ico a{
    width: 5rem;
}

.social h3{
    font-family: var(--roboto);
    font-size: 4.6rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.youtube{
    display: grid;
    grid-template-columns: 1fr 128rem 1fr;
}

.youtube_inner{
    grid-column: 2/4;
    display: flex; 
    flex-flow: column;
    align-items: start;
    gap: 4rem;
    margin-top: 8rem;
    position: relative;
}

.youtube_img{
    overflow: hidden;
}

.youtube_img img{
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: 0.3s;
}

.youtube_content:hover .youtube_img img{
    transform: scale(1.02);
}

.youtube_content p{
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.5;
    margin-top: 2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: 0.3s;
}

.youtube_content:hover p{
    opacity: 0.3;
}

.swiper-button-prev,
.swiper-button-next{
    top: 0!important;
    left: auto!important;
    width: auto;
    height: auto;
    transition: 0.3s;
}

.swiper-button-prev{
    right: 18rem!important;
    transform: scaleX(-1);
}

.swiper-button-next{
    right: 8rem!important;
}

.swiper-button-prev svg,
.swiper-button-next svg{
    fill: none;
    color: #fff;
    width: 2.5rem;
    transition: 0.3s;
}

.swiper-button-prev:hover,
.swiper-button-next:hover{
    background: #fff;
    border-radius: 10rem;
}

.swiper-button-prev:hover svg,
.swiper-button-next:hover svg{
    color: var(--black);
}


/* sponsor ---------------------------------------------------*/

.sponsor{
    background: var(--bg);
}

.sponsor h2{
    font-family: var(--roboto);
    font-size: 4.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 5rem;
}

.sponsor_content{
    display: flex;
    gap: 6rem;
}

.sponsor_img{
    border-radius: 1rem;
    overflow: hidden;
    flex: 1;
}

@media (max-width: 1024px) {
    .kv_content{
        flex-flow: column;
        height: 80vh;
    }

    .kv_main{
        flex: 3;
    }

    .kv_main .kv_inner{
        height: 100%;
    }

    .kv_sub{
        flex-flow: row;
    }

    .kv_news.wrapper{
        max-width: 100%;
    }

    .kv_news a{
        flex-flow: column;
        align-items: start;
    }

    .about_img{
        display: none;
    }

    .about_sp_img{
        display: block;
    }

    .youtube{
        grid-template-columns: 1fr 90% 1fr;
    }

    .sponsor_content{
        gap: 3rem;
    }
}


@media (max-width: 767px) {
    /* kv */

    .kv{
        padding: 7rem 1rem 0;
    }

    .kv_content{
        height: 58rem;
        gap: 1rem;
    }

    .kv_main{
        flex: 1.8;
    }

    .kv_head_title{
        top: 1.5rem;
        left: 1.5rem;
        font-size: 1.2rem;
    }

    .kv_main .kv_inner{
        padding: 1.5rem;
    }

    .kv_main_text h2{
        font-size: 2.4rem;
        margin-bottom: 1rem;
    }

    .kv_main_text p{
        font-size: 1.2rem;
    }

    .kv .arrow_btn{
        display: none;
    }

    .kv_sub{
        gap: 1rem;
    }

    .kv_sub_content{
        padding: 1.5rem;
    }

    .kv_sub_text h2{
        font-size: 1.2rem;
        margin: 0;
    }

    .kv_sub_text p{
        display: none;
    }

    .kv_pick_header{
        gap: 1rem;
        margin-bottom: 0.5rem;
    }

    .kv_pick_date{
        font-size: 1rem;
    }

    .kv_pick_category{
        padding: 0.2rem 0.8rem;
    }

    .kv_news{
        flex-flow: column;
        align-items: start;
        gap: 1.5rem;
        padding: 2.5rem 0 3rem;
    }

    .kv_news h2{
        display: none;
    }

    .kv_news_date{
        font-size: 1rem;
    }

    .kv_news_category{
        font-size: 1rem;
        padding: 0.2rem 1rem;
    }

    /* about */

    .flow_text_item{
        font-size: 8.2rem;
    }

    .flow_text_item{
        font-size: 8.2rem;
    }

    .about_content{
        margin-top: -4rem;
    }

    .about_inner{
        gap: 3rem;
    }

    .about_inner h1{
        font-size: 4rem;
    }

    .about_inner p{
        font-size: 1.4rem;
    }

    .about_sp_img{
        width: 90%;
        margin: 1rem auto;
    }

    /* more btn */
    .more_btn{
        font-size: 1.8rem;
    }

    .more_btn_inner{
        padding: 2rem 0 2rem 3rem;
        gap: 3rem;
    }

    .more_arrow{
        width: 6rem;
    }

    .arrow{
        width: 2rem;
    }

    /* section header */

    .section_header h2{
        font-size: 5.6rem;
        margin-bottom: 3rem;
    }

    .section_header p{
        font-size: 1.4rem;
        line-height: 1.5;
    }

    .social h3{
        font-size: 4rem;
    }

    .youtube {
        grid-template-columns: 1fr 95% 1fr;
    }

    .youtube_inner{
        gap: 3rem;
    }

    .swiper-button-prev,
    .swiper-button-next{
        display: none;
    }

    .blank_btn{
        font-size: 1.8rem;
    }

    .blank_btn_inner{
        padding: 2rem 3rem;
    }

    .sponsor h2{
        font-size: 2.8rem;
        margin-bottom: 3rem;
    }

    .sponsor_content{
        gap: 1rem;
    }

    .sponsor_img{
        border: 0.2rem;
    }
}