:root{
    --main-sec1-padding: 10.416666%;
    --main-sec1-bfs: 96px;
    --main-sec1-mfs: 64px;
    --main-sec1-sfs: 20px;

    --main-sec2-bfs: 72px;
    --main-sec2-mfs: 32px;
    --main-sec2-sfs: 28px;

    --main-sec4-tit: 72px;
    --main-sec4-subtit: 22px;

    --main-sec5-h1: 72px;
    --main-sec5-h2: 48px;
    --main-sec5-btn-fs: 32px;
}

.main{
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.main .section{
    position: relative;
    box-sizing: border-box;
}
.sec-01{
    background: #000;
}

.sec-01 .main_video{
    position: relative;
    padding-bottom: 56.25%;
    width: 100%;
    height: 0;
    overflow: hidden;
}
.sec-01 .main_video iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.sec-01 .main_video .bg_video{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}

.sec-01 .main_video img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.sec-01 .content_box{
    opacity: 0;
    position: absolute;
    top:0;
    left: var(--main-sec1-padding);
    right: var(--main-sec1-padding);
    display: flex;
    align-items: center;
    height: 100%;
    z-index: 99;
}

.sec-01 .content_box h1{
    color: #FFF;
    font-family: var(--eng-bold-font);
    font-size: var(--main-sec1-bfs);
    font-style: normal;
    font-weight: normal;
    line-height: 100%;
}
.sec-01 .content_box h1 span{
    font-size: var(--main-sec1-mfs);
}
.sec-01 .content_box .info{
    color: #FFF;
    font-family : var(--kor-font);
    font-size: var(--main-sec1-sfs);
    font-weight: 500;
    line-height: 160%; /* 32px */
    margin: 8.686% 0;
}

.sec-01 .btns{
    width: fit-content;
    font-size: var(--main-sec2-sfs);
    font-family: var(--eng-regular-font);
    vertical-align: middle;
    border-radius: 32px;
    background: #fff;
    padding: 16px 80px;
}
.sec-01 .btns *{
    color: #000;
}
.sec-01 .btns a i{
    display: inline-block;
    width: 25px;
    height: 16px;
    background: url('/dev/assets/img/main/btn_arrow_right.svg') no-repeat;
    margin-left: 8px;
}
.sec-01 .btns.move{
    transform: translateX(-26px);
    transition-property: all;
    transition-duration: 1s;
}
.sec-01 .btns .arrow{
    display: inline-block;
    width: 26px;
    height: 26px;
    background: url('/dev/assets/img/main/btn_arrow_border_wt.svg')no-repeat;
    margin-top: 1px;
}
.sec-01 .btns.move .arrow{
    transform: translateX(110px);
    transition-property: all;
    transition-duration: 1s;
    background: url('/dev/assets/img/main/btn_arrow_back_wt.svg')no-repeat;
}

.sec-01 .btns .btn_name{
    vertical-align: top;
    line-height: 26px;
    padding-left: 4px;
}

.sec-01 .txt_active_01{
    animation: fadein 1200ms;
    animation-delay: 1s;
    -moz-animation: fadein 1200ms; /* Firefox */
    -moz-animation-delay:1s;
    -webkit-animation: fadein 1200ms; /* Safari and Chrome */
    -webkit-animation-delay:1s;
    -o-animation: fadein 3200ms; /* Opera */

    opacity: 0;
    animation-fill-mode: forwards;
}
.sec-01 .txt_active_02{
    animation: fadein 1200ms;
    animation-delay: 1.5s;
    -moz-animation: fadein 1200ms; /* Firefox */
    -moz-animation-delay:1.5s;
    -webkit-animation: fadein 1200ms; /* Safari and Chrome */
    -webkit-animation-delay:1.5s;
    -o-animation: fadein 3200ms; /* Opera */

    opacity: 0;
    animation-fill-mode: forwards;
}

.sec-01 .bg_video.out {
    animation: fadeout 1200ms;
    animation-delay: 1s;
    -moz-animation: fadeout 1200ms; /* Firefox */
    -moz-animation-delay: 1s;
    -webkit-animation: fadeout 1200ms; /* Safari and Chrome */
    -webkit-animation-delay: 1s;
    -o-animation: fadeout 1200ms; /* Opera */
    animation-fill-mode: forwards;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.sec-02{
    padding: 160px 0;
    text-align: center;
}
.sec-02 .title_wrap .cate{
    color: #ABACAE;
    font-family: var(--eng-regular-font);
    font-size: var(--main-sec2-mfs);
    font-weight: 300;
    line-height: 100%; /* 32px */
}
.sec-02 .title_wrap .tit{
    color: #000;
    font-family: var(--eng-bold-font);
    font-size: var(--main-sec2-bfs);
    font-weight: normal;
    line-height: 100%; /* 32px */
    padding: 20px 0 64px 0;
}

.sec-02 .btns{
    width: fit-content;
    margin: 8px auto 0 auto;
    font-size: var(--main-sec2-sfs);
    font-family: var(--eng-regular-font);
    vertical-align: middle;
}
.sec-02 .btns.move{
    transform: translateX(-26px);
    transition-property: all;
    transition-duration: 1s;
}
.sec-02 .btns .arrow{
    display: inline-block;
    width: 26px;
    height: 26px;
    background: url('/assets/img/main/btn_arrow_wt.svg')no-repeat;
    margin-top: 1px;
}
.sec-02 .btns.move .arrow{
    transform: translateX(130px);
    transition-property: all;
    transition-duration: 1s;
    background: url('/assets/img/main/btn_arrow_bk.svg')no-repeat;
}

.sec-02 .btns .btn_name{
    vertical-align: top;
    line-height: 26px;
    padding-left: 4px;
}

.sec-02 .slide_box {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    max-width: 1920px;
}
.sec-02 .slide_box .inner{
    margin: 95px 0;
}
/* 슬라이더 내 각 슬라이드 아이템 스타일 */
.sec-02 .slide_box .slide_list li {
    position: relative;
    width: 31.25%;
    transform: scale(0.733333333);
    transition: all 0.3s;
}
.sec-02 .slide_box .slide_list li a {
    display: block;
}
.sec-02 .slide_box .slide_list li .img {
    overflow: hidden;
    display: block;
    position: relative;
    padding-bottom: 140%;
}
.sec-02 .slide_box .slide_list li .img img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

.sec-02 .slide_box .slide_list li.swiper-slide-active{
    transform: scale(1);
}

/* 이전 및 다음 슬라이드의 여백 조정 */
.sec-02 .slide_box .slide_list li.swiper-slide-prev {
    margin-right: -2.1%;
    margin-left: 2.1%;
}
.sec-02 .slide_box .slide_list li.swiper-slide-next {
    margin-right: 2.1%;
    margin-left: -2.1%;
}

/* 화면상 첫 번째 및 마지막 슬라이드의 여백 조정 */
.sec-02 .slide_box .slide_list li.first {
    margin-right: -8.35%;
    margin-left: 8.35%;
}
.sec-02 .slide_box .slide_list li.last {
    margin-right: 8.35%;
    margin-left: -8.35%;
}
.sec-02 .slide_box .swiper-pagination{
    position: relative;
}
.sec-02 .slide_box .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    background: #CECFD1;
    margin: 0 6px;
}
.sec-02 .slide_box .swiper-pagination-bullet-active{
    width: 24px;
    height: 12px;
    background-color: #C12033 !important;
    border-radius: 6px;
}

.sec-03 .video_box {
    width: 100vw;
    max-width: 1440px;
    height: 56.25vw;
    max-height: 810px;
    margin: 0 auto;
    padding-bottom: 160px;
}
.sec-03 .video_box iframe{
    width: 100%;
    height: 100%;
}

.sec-04{
    padding: 160px 0;
    background: #F5F5F5;
    text-align: center;
}

.sec-04 .title_wrap .tit{
    font-family: var(--eng-bold-font);
    font-size: var(--main-sec4-tit);
    font-weight: normal;
    line-height: 100%; /* 72px */
}

.sec-04 .title_wrap .sub_tit{
    font-family: var(--eng-regular-font);
    font-size: var(--main-sec4-subtit);
    font-weight: 400;
    line-height: 100%; /* 22px */
    margin: 16px 0 72px;
}

.sec-04 .instagram_data{
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    max-width: 1240px;
    justify-content: center;
}
.sec-04 .instagram_data li{
    width: 100%;
    height: 100%;
    max-width: 292px; max-height: 292px;
}
.sec-04 .instagram_data li a{
    position: relative;
    display: block;
    background-size: 100%;
    transition: background-size .3s ease;
    -moz-transition: background-size .3s ease;
    -webkit-transition: background-size .3s ease;
    width: 100%;
    padding-top: 100%;
}
.sec-04 .instagram_data li a .darken {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sec-04 .instagram_data li a .darken .icon_insta{
    background: url(/assets/img/main/icon_insta.svg) no-repeat;
    background-size: 100%;
    width: 10.9589041%;
    height: 10.9589041%;
    display: inline-block;
}
.sec-04 .instagram_data li:hover a{
    background-size: 110% !important;
}
.sec-04 .instagram_data li:hover .darken {
    opacity: 1;
}
.sec-04 .instagram_data li img{
    width: 100%;
    height: 100%;
}

.sec-05 .parallax_container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background-image: url(/assets/img/main/sec5_bg.jpg?v=1);
    background-attachment: fixed !important;
    background-position: 50% center;
    background-repeat: no-repeat;
    background-size: cover;
}
.sec-05 .image_container {
    position: relative;
    max-height: 544px;
    height: 544px;
    clip-path: inset(0);
}
.sec-05 .image_container .image {
    object-fit: cover;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.sec-05 .image_container .content {
    background-color: transparent;
    text-align: center;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
}

.sec-05 .content h1{
    color: #FFF;
    font-family: var(--eng-bold-font);
    font-size: var(--main-sec5-h1);
    font-style: normal;
    font-weight: normal;
    line-height: 100%;
    margin-bottom: 72px;
}

.sec-05 .content h2{
    color: #FFF;
    font-family: var(--eng-regular-font);
    font-size: var(--main-sec5-h2);
    font-style: normal;
    font-weight: normal;
    line-height: 100%;
    margin-bottom: 72px;
}

.sec-05 .content .btns{
    display: flex;
    gap: 24px;
    margin: 0 auto;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.sec-05 .content .btns li{
    width: 280px;
    height: 80px;
    font-family: var(--eng-regular-font);
    font-size: var(--main-sec5-btn-fs);
    font-weight: 400;
    line-height: 80px; /* 32px */
    color: #fff;
    border: 1px solid #FFF;
    /*cursor: pointer;*/
}
.sec-05 .content .btns li a {
    width: 100%;
    height: 100%;
    display: block;
    color: #fff;
}
/*.sec-05 .content .btns li:last-child a.pc:before{
    content: "MUSINSA";
}*/
.sec-05 .content .btns li a:hover{
    background: #fff;
    color: #000;
    transition: background 0.5s ease-in-out;
}
/*.sec-05 .content .btns li:last-child a.pc:hover:before{
    content: "Coming DEC!";
}*/


/* 태블릿 */
/*@media screen and (max-width: 1240px){
    !* 1024 기준 px (721 ~ 1440) *!
    body{
        background: orangered;
    }
    :root{
        --main-sec1-padding: 32px;
        --main-sec1-bfs: 48px;
        --main-sec1-sfs: 13px;

        --main-sec2-bfs: 34px;
        --main-sec2-mfs: 20px;
        --main-sec2-sfs: 20px;
    }

    .sec-01 .main_video{
        width: 100vw;
        height: calc(100vw* 1.775);
        padding-bottom: 0;
    }

    .sec-01 .content_box{
        align-items: end;
        margin-top: -80px;
    }
    .pc{display: none;}
    .mo_video{display: block !important;}
}*/
/* 모바일 */
@media screen and (max-width: 750px){
    /* 360 기준 px (~ 720) */
    :root{
        --main-sec1-padding: 32px;
        --main-sec1-bfs: 48px;
        --main-sec1-mfs: 32px;
        --main-sec1-sfs: 13px;

        --main-sec2-bfs: 34px;
        --main-sec2-mfs: 20px;
        --main-sec2-sfs: 20px;

        --main-sec4-tit: 34px;
        --main-sec4-subtit: 20px;

        --main-sec5-h1: 32px;
        --main-sec5-h2: 26px;
        --main-sec5-btn-fs: 20px;
    }

    .sec-01 .main_bg img{
        width: 100vw;
        height: calc(100vw* 1.775);
        padding-bottom: 0;
    }

    .sec-01 .content_box{
        align-items: center;
        height: 100%;
        margin-top: 130px;
    }
    .sec-01 .content_box .info{
        margin: 13% 0;
    }
    .sec-01 .content_box h1{
        letter-spacing: -0.5px;
        word-break: break-all;
    }
    .sec-01 .btns{
        padding: 12px 44px;
    }
    .sec-01 .btns a i{
        width: 25px;
        height: 10px;
        background: url('/dev/assets/img/main/btn_arrow_right_mo.svg');
    }
    .sec-01 .btns.move .arrow {
        transform: translateX(90px);
    }
    .sec-02{padding: 4rem 0;}
    .sec-02 .title_wrap .tit{padding: 0.75rem 0 2rem 0;}
    .sec-02 .btns{margin: 0 auto;}
    .sec-02 .slide_box{margin-top: 48px;}
    .sec-02 .slide_box .inner{margin: 0;}
    .sec-02 .slide_box .slide_list li {
        width: 69.333333%;
        transform: scale(0.8461538);
    }

    .sec-02 .slide_box .slide_list li.swiper-slide-prev,
    .sec-02 .slide_box .slide_list li.swiper-slide-next {
        margin: 0;
    }
    .sec-02 .slide_box .swiper-pagination{
        margin-top: 48px;
    }
    .sec-02 .slide_box .swiper-pagination-bullet {
        width: 9.6px;
        height: 9.6px;
        margin: 0 4.8px;
    }
    .sec-02 .slide_box .swiper-pagination-bullet-active {
        width: 19.2px;
        height: 9.6px;
    }
    .sec-02 .slide_box .btn{display: none;}
    .sec-02 .btns.move .arrow {transform: translateX(98px);}
    .sec-03 .video_box{
        width: 100vw;
        height: calc(100vw* 1.775);
        padding-bottom: 0;
    }

    .sec-04{padding: 4rem 0;}
    .sec-04 .title_wrap .sub_tit{margin: 8px 0 40px;}
    .sec-04 .instagram_data{gap: 12px;}
    .sec-04 .instagram_data li{
        max-width: 39.466666666%;
        max-height: 39.466666666%;
    }
    .sec-05 .image_container{
        max-height: 374px;
        clip-path: inset(0);
    }
    /*.sec-05 .image_container .image {
        object-fit: fill;
    }*/

    .sec-05 .content h1{
        margin-bottom: 40px;
    }
    .sec-05 .content h2{
        margin-bottom: 40px;
    }
    .sec-05 .content .btns{
        width: 59.7333333%;
        max-width: 224px;
        gap: 16px;
    }
    .sec-05 .content .btns li{
        width: 100%;
        height: 64px;
        line-height: 64px;
    }
    .sec-05 .parallax_container{background-position: 57% center;}


}