body{ background: #f6f2eb; }
/* intro */
.intro{position:fixed; top:0; left:0; width:100%; height:100% ;z-index:9999; background:#064225; display:flex; justify-content:center; align-items:center;}
.intro .inner{position:relative; width:100%; height:100%; display:flex; justify-content:center; align-items:center;}
.intro .logo_1,.intro .logo_2{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.intro .logo_2{opacity:0;}
.intro svg{display:block;} 
body.is-intro{overflow:hidden;} 

._mo{ display: none; }
main {overflow: hidden;}

/* s1 */
.s1 .wrap{ width: 100%; height: 100vh;  position: relative; }
.s1 .wrap .swiper.bg{ position: relative; height: 100%; }
.s1 .wrap .bg .swiper-slide .imgBx img{ width: 100%; height: 100%; object-fit: cover; }
.s1 .wrap .txtBx{ width: 100%; text-align: center; position: absolute; bottom: 100px; left: 50%; z-index: 100; transform: translateX(-50%); color: #fff;}
.s1 .wrap .txtBx p{ text-align: center; }
.s1 .wrap .txtBx h3{ font-family: 'Libertinus Serif Display'; font-size: 60px; letter-spacing: -0.025em; margin-bottom: 20px; }
.s1 .wrap .txtBx .copy{ font-size: 20px; letter-spacing: -0.025em; }
.s1 .swiper-wrapper { transition-timing-function: ease-in-out; }
.s1 .wrap .swiper-slide .imgBx{ width: 100%; height: 100%; }
.s1 .wrap .swiper-slide .imgBx img{ width: 100%; height: 100%; object-fit: cover; }
.s1 .wrap .swiper-button-next,
.s1 .wrap .swiper-button-prev
{ color: #fff !important; width: 30px;height: 29px; position: absolute; top: 50%; transform: translateY(-50%); }
.s1 .wrap .swiper-button-next{ right: 78px; }
.s1 .wrap .swiper-button-prev{ left: 78px; }
.s1 .wrap .pagination_wrap{ position: absolute; bottom: 34px; z-index: 99; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; }
.s1 .wrap .pagination_wrap span{ font-family: 'Pretendard'; font-size: 14px; color: #fff; letter-spacing: -0.025em; }
.s1 .wrap .pagination_wrap .total{ color: rgba(255, 255, 255, 0.2); }
.s1 .wrap .pagination_wrap .swiper-pagination{ position: relative !important; width: 54px; height: 2px; background: rgba(255, 255, 255, 0.2); top: auto !important; left: auto !important; overflow: hidden; }
.s1 .wrap .pagination_wrap .swiper-pagination-progressbar-fill{ background: #fff !important; }

/* s2 */
.s2{ width: 100%; padding: 180px 0; font-family: 'Libertinus Serif Display';}
.s2 > div{ width: 100%; display: flex; align-items: center; justify-content: space-between; }
.s2 > div .left,
.s2 > div .right{ position: relative; }
.s2 .imgBx{ 
    width: 370px; 
    /* height: 530px;  */
    position: relative; overflow: hidden;
}
.s2 .imgBx::after{ display: block; content: ''; padding-top: calc(530 / 370 * 100%); }
.s2 .imgBx img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
.s2 .objBx { position: absolute; pointer-events: none; max-width: 230px; }
.s2 .left .objBx{ right: -20%; bottom: -28%; }
.s2 .right .objBx{ left: -27%; top: -20%; }
.s2 .list{ display: flex; flex-direction: column; }
.s2 .list li{ font-size: 68px; letter-spacing: -0.025em; line-height: calc(90 / 68); text-align: center; color: #bab7b2; cursor: pointer;   }
/* .s2 .list li:hover{ color: #3a3a3a; transition: ease .4s; } */
.s2 .list li.active { color: #3a3a3a; transition: ease .3s; }

/* s3 */
.s3 .wrap{ width: 100%; height: 100vh; position: relative; }
.s3 .wrap .imgBx{ width: 100%; height: 100%; position: relative; }
.s3 .wrap .imgBx img{ width: 100%; height: 100%; object-fit: cover; }
.s3 .wrap .txtBx{ position: absolute; bottom: 76px; left: 240px; color: #fff; letter-spacing: -0.025em; }
.s3 .wrap .txtBx h3{ font-family: 'Libertinus Serif Display'; font-size: 80px; line-height: calc(96 / 80); margin-bottom: 44px; }
.s3 .wrap .txtBx p{ font-size: 20px; line-height: calc(32 / 20); word-break: keep-all; }

/* s4 */
.s4{ background: #f6f2eb; width: 100%; padding: 120px 0 180px; overflow: visible; }
.s4 .cont .inner{ position: relative; }
.s4 .cont .inner .keyword{ margin-bottom: 56px; font-family: 'roboto'; font-size: 18px; letter-spacing: -0.025em; line-height: calc(30 / 18); color: #3a3a3a; text-align: center; }
.s4 .cont .inner .horizon{ margin-bottom: 80px; width: 100%; overflow: hidden; }
.s4 .cont .inner .horizonWrap{ position: relative; width: 100%; display: flex; align-items: center; }
.s4 .cont .inner .obj{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; }
.s4 .cont .inner .horizon{ width: 100%; }
.s4 .inner .horizon ul{ display: flex; flex-wrap: nowrap; gap: 40px; height: 100%; width: max-content; padding-left: 75%; }
.s4 .inner .horizon ul li{ max-width: 280px; }
.s4 .inner .horizon ul li .imgBx{ aspect-ratio: 280 / 380; }
.s4 .inner .horizon ul li .imgBx img{ width: 100%; height: 100%; object-fit: cover; }
.s4 .inner .txtBx{ width: 95%; margin: 0 auto; color: #3a3a3a; letter-spacing: -0.025em; }
.s4 .inner .txtBx > div .tit{ display: flex; align-items: center; justify-content: center; gap: 20px; }
.s4 .inner .txtBx > div .tit p{ font-family: 'Libertinus Serif Display'; font-size: 54px; line-height: calc(86 / 54); }
.s4 .inner .txtBx > div .tit .line{ width: 70px; height: 2px; background: #3a3a3a; }
.s4 .inner .txtBx > div .txt{ margin: 32px 0; }
.s4 .inner .txtBx > div .txt p{ text-align: center; font-size: 20px; line-height: calc(32 / 20); }
.s4 .inner .btn{ 
    width: 100px; height: 40px; border-radius: 20px; background: transparent; border:1px solid #3a3a3a; 
    text-align: center; align-content: center; margin: 0 auto; cursor: pointer;  transition: background .3s ease-in, color .3s ease-in;
}
.s4 .inner .btn a{ color: #3a3a3a; font-size: 15px; line-height: calc(30 / 15); }
.s4 .inner .btn:hover { background: #a9b8a3; border: none; }
.s4 .inner .btn:hover a{ color: #fff; }
/* s5 */
.s5 { position: relative; width: 100%; }
.s5 .cont { width: 100%; height: 100vh; display: flex; position: relative; z-index: 2; overflow: hidden; }
.s5 .cont .left { flex: 1; height: 100%; position: relative; overflow: hidden; }
.s5 .cont .left .main-swiper { width: 100%; height: 100%; }
.s5 .cont .left .left_list { position: relative; width: 100%; height: 100%; }
.s5 .cont .left .left_list .imgBx { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.s5 .cont .left .left_list .imgBx img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s5 .cont .left .main-swiper .swiper-button-next,
.s5 .cont .left .main-swiper .swiper-button-prev { color: #fff !important; width: 30px; height: 29px; z-index: 50; }
.s5 .cont .left .main-swiper .swiper-pagination {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    z-index: 100 !important; display: flex; justify-content: center; gap: 8px;
}
.s5 .cont .left .main-swiper .swiper-pagination-bullet { width: 10px; height: 10px; background: #fff; opacity: 0.4; }
.s5 .cont .left .main-swiper .swiper-pagination-bullet-active { opacity: 1; background: #fff; }
.s5 .cont .right { background: #ded6c8; flex: 1; height: 100%; overflow: hidden; position: relative; box-sizing: border-box; }
.s5 .cont .right .brandConts { width: 100%; height: 100%; position: relative; }
.s5 .cont .right .sub_list {
    position: absolute; top: 0; left: 0; width: 100%; 
    visibility: hidden; opacity: 0;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 80px;
}
.s5 .cont .right .sub_list.on { visibility: visible; opacity: 1; }
.s5 .cont .right .sub_list .imgBx { width: 388px; position: relative; aspect-ratio: 388 / 397; flex-shrink: 0; }
.s5 .cont .right .sub_list .imgBx::after{ content: ''; padding-top: calc(397 / 388 * 100%); }
.s5 .cont .right .sub_list .imgBx img { width: 100%; height: 100%; object-fit: cover; }
.s5 .cont .right .titArea {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 50; width: 100%; text-align: center; pointer-events: none;
}
.s5 .cont .right .tit { display: none; opacity: 0; }
.s5 .cont .right .tit.on { display: block; opacity: 1; }
.s5 .cont .right .tit span {
    font-family: 'Libertinus Serif Display'; font-size: 200px;
    letter-spacing: -0.025em; color: #3a3a3a; white-space: nowrap;
}
.s5 .dummyBx { position: relative; }
.s5 .dummyBx > div { position: relative; height: 80vh; width: 100%; }

/* s6 */
.s6{ padding: 224px 0 0; }
.s6 .wrap{ width: 100%; }
.s6 .partners{ width: 95%; max-width: 1440px; margin: 0 auto; color: #3a3a3a; }
.s6 .txtBx .keyword{ display: block; font-family: 'roboto'; font-size: 18px; letter-spacing: -0.025em; line-height: calc(30 / 18); text-align: center; margin-bottom: 30px; }
.s6 .txtBx h3{ font-family: 'Libertinus Serif Display'; font-size: 54px; letter-spacing: -0.025em; text-align: center; margin-bottom: 60px; }
.s6 .txtBx p{ font-size: 20px; line-height: calc(32 / 20); letter-spacing: -0.025em; text-align: center; margin-bottom: 130px; }
.s6 .logo_list{ width: 100%; display: flex; align-items: center; justify-content: center; gap:105px; flex-wrap: nowrap; }
.s6 .logo_list + .logo_list{ margin-top: 85px; }
.s6 .logo_list > div{ width: calc((100% - 420px) / 4); display: flex; justify-content: center; }
.s6 .logo_list > div .imgBx{ width: fit-content; align-content: center; }
.s6 .logo_list > div .imgBx img{ width: 100%; opacity: 0.2; }
.s6 .logo_list > div:hover .imgBx img{ opacity: 1; transition: ease .4s; }
.s6 .contact{ cursor: none; margin: 140px 0; padding: 140px 0;  }
.s6 .contact > div{ position: relative; }
.s6 .marqueeBx{ width: 100%; display: flex; gap: 40px; align-items: center; white-space:  nowrap; overflow: hidden; position: relative; z-index: 10; pointer-events: auto;}
.s6 .marquee_track{ width: max-content; display: flex; align-items: center; gap: 40px; flex-shrink: 0; }
.s6 .marqueeBx .txt{ font-family: 'Libertinus Serif Display'; font-size: 130px; letter-spacing: -0.025em; color: #3a3a3a; white-space: nowrap; }
.s6 .marqueeBx .line{ width: 120px; height: 2px; background: #3a3a3a; flex-shrink: 0; display: inline-flex; }
.s6 .objBx { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.s6 .objBx .imgBx { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 244px; display: flex; align-items: center; justify-content: center; }
.s6 .objBx .imgBx img { display: block; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#cursor {
    position: fixed;  top: 0; left: 0;
    /* border: 1px solid #3a3a3a; width: 20px; height: 20px; border-radius: 50%; */
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; z-index: 9999; opacity: 0; 
}
#cursor p {font-family: 'roboto'; color: #fff; font-size: 15px; letter-spacing: -0.025em; margin: 0;  opacity: 0; white-space: nowrap;}

/* @keyframes marquee{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-100%);
  }
} */


@media screen and (max-width: 1600px){
    .s2 .list li{ font-size: 56px; }
    .s3 .wrap .txtBx{ left: 100px; }
    /* .s4 .inner .horizon ul{ gap: 28px; } */
    .s4 .inner .horizon ul li{ max-width: 250px; }
    .s5 .cont .right .tit span{ font-size: 160px; }
}
@media screen and (max-width: 1500px){
    .s5 .cont .right .tit span{ font-size: 180px; }
}

@media screen and (max-width: 1280px){
    .s2 .imgBx{ width: 320px; }
    .s2 .objBx{ max-width: 140px; }
    .s2 .left .objBx{ bottom: -17%; }
    .s2 .right .objBx{ left: -9%; top: -14%; }
    .s2 .list li{ font-size: 42px; }
    .s3 .wrap .txtBx h3{ font-size: clamp(56px, 60/1280*100vw, 60px); }
    .s3 .wrap .txtBx p{ font-size: 18px; }
    .s4 .inner .horizon ul{ gap: 24px; }
    /* .s4 .inner .horizon ul li{ max-width: 224px; } */
    .s5 .cont .right .tit span{ font-size: clamp(120px, 146/1280*100vw, 146px); }
}

@media screen and (max-width: 1024px){
    .s1 .wrap .txtBx h3{ font-size: clamp(48px, 56/1024*100vw, 56px); }
    .s2{ padding: 120px 0; }
    .s2 > div{ position: relative; }
    .s2 > div .left,
    .s2 > div .right{ position: unset; }
    /* .s2 .imgBx{ display: none; } */
    .s2 .imgBx{ width: 230px; }
    .s2 .imgBx::before{  
        content: '';  position: absolute; inset: 0; z-index: 5;
        background: rgba(255, 255, 255, 0.1); 
    }
    .s2 .objBx{ max-width: 112px; }
    .s2 .left .objBx{ bottom: -17%; left: 4%; right: unset; }
    .s2 .right .objBx{ right: 0; left: unset; }
    .s3 .wrap{ height: 80vh; }
    .s3 .wrap .txtBx{ left: 30px; bottom: 30px; }
    .s3 .wrap .txtBx h3{ font-size: 60px; margin-bottom: 34px; }
    .s3 .wrap .txtBx p{ font-size: 18px; }
    .s4 .cont{ padding:0; }
    /* .s4 .horizon{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; } */
    .s4 .horizon{ overflow: hidden; }
    /* .s4 .inner .horizon ul{ padding-left:0; gap:20px; } */
    .s4 .inner .horizon ul{ padding-left:0; gap:20px; width: auto; flex-wrap: wrap; justify-content: center; }
    /* .s4 .inner .horizon ul li{ flex:0 0 auto; width:240px; } */
    /* .s4 .inner .horizon ul li{ flex:0 0 auto; width:calc((100% - 60px) / 3); } */
    .s4 .inner .horizon ul li{ flex:0 0 auto; width: calc(100% / 3 - (20px * (3 - 1) / 3)); }
    .s4 .inner .txtBx{ margin-top: 20px; }
    .s4 .inner .txtBx > div .tit p{ font-size: 42px; }
    .s4 .inner .txtBx > div .tit .line{ width: 60px; }
    .s4 .inner .txtBx > div .txt p{ font-size: 18px; }
    .s4 .cont .inner .keyword{ margin-bottom: 50px; }
    .s4 .cont .inner .horizon{ margin-bottom: 80px; }
    .s4 .cont .inner .obj{ top: 95%; transform: translateX(-50%); }
    .s5 .cont .right .tit span{ font-size: 100px; }
    .s6 .logo_list{ gap: 80px; }
    .s6 .logo_list > div:hover .imgBx img{ opacity: 0.2; }
    .s6 .marqueeBx .txt{ font-size: 90px; }
    .s6 .objBx .imgBx{ width: 190px; }
}

@media screen and (max-width: 820px){
    .s1 .wrap .txtBx h3{ font-size: clamp(30px, calc(46 / 820 * 100vw), 46px); }
    .s1 .wrap .swiper-button-next{ right: 30px; }
    .s1 .wrap .swiper-button-prev{ left: 30px; }
    /* .s2 > div{ display: block; }
    .s2 > div .right{ display: flex; justify-content: flex-end; } */
    .s2 .imgBx{ display: none; }
    /* .s2 .imgBx{ width: clamp(170px, calc(210/820*100vw), 210px); } */
    .s2 .list{ gap: 20px; }
    .s2 .list li{ font-size: clamp(36px, calc(40/820*100vw), 40px); padding: 0; }
    .s3 .wrap .txtBx h3{ font-size: 46px; }
    .s3 .wrap .txtBx p{ font-size: 16px; }
    .s4{ padding: 80px 0; }
    .s4 .cont .inner .horizon{ overflow-x: auto; }
    .s4 .cont .inner .horizon::-webkit-scrollbar{ display: none; }
    .s4 .inner .horizon ul{ display: flex; gap: 20px; width: max-content; padding: 0 20px; }
    .s4 .inner .txtBx > div .tit p{ font-size: 38px; }
    .s4 .inner .txtBx > div .txt p{ font-size: 16px; }
    .s4 .cont .inner .obj{ display: none; }
    .s5 .cont{ flex-direction: column-reverse; }
    .s5 .cont .right .tit span{ font-size: 80px; }
    .s6{ padding: 80px 0 0; }
    /* .s6 .partners{ margin-bottom: 180px; } */
    .s6 .contact{ padding-top: 180px; }
    .s6 .txtBx h3{ font-size: 48px; }
    .s6 .marqueeBx .txt{ font-size: 56px; }
    .s6 .objBx .imgBx{ width: 160px; }
    .s6 .logoBx._pc{ display: none; }
    .s6 .logoBx._mo{ display: flex; }
    .s6 .logo_list{ gap: 40px; flex-wrap: wrap; }
    .s6 .logo_list + .logo_list{ margin-top: 40px; }
    .s6 .logo_list > div{ width: calc((100% - 160px) / 4); }

    #cursor{ display: none; }
}
@media screen and (max-width: 500px){
    .s1 .wrap .txtBx h3{ font-size: 28px; }
    .s1 .wrap .txtBx .copy{ font-size: 16px; }
    .s1 .wrap .swiper-button-prev{ left: 10px; }
    .s1 .wrap .swiper-button-next{ right: 10px; }
    .s2{ padding: 80px 0; }
    .s2 .list{ gap: 20px; }
    .s2 .list li{ font-size: 36px; }
    .s2 .imgBx{ display: none; }
    .s2 .objBx{ max-width: 80px; }
    /* .s2 .left .objBx{ right: 0; bottom: -70%; } */
    /* .s2 .right .objBx{  top: -70%; } */
    .s3 .wrap .txtBx h3{ font-size: 28px; margin-bottom: 28px; }
    .s3 .wrap .txtBx p{ font-size: 14px; }
    .s4 .inner .txtBx > div .tit{ gap: 12px; }
    .s4 .inner .txtBx > div .tit p{ font-size: 28px; }
    .s4 .inner .txtBx > div .txt p{ font-size: 15px; word-break: keep-all; }
    .s4 .inner .txtBx > div .tit .line{ width: 42px; }
    .s4 .inner .txtBx > div .txt p > br{ display: none; }
    .s5 .cont .right .tit span{ font-size: 60px; }
    .s5 .cont .right .sub_list .imgBx{ width: 320px; }
    .s6 .logo_list{ gap: 40px; }
    /* .s6 .logo_list + .logo_list{ margin-bottom: 40px; } */
    .s6 .logo_list > div{ width: calc((100% - 80px) / 2); }
    .s6 .logo_list > div .imgBx{ width: 90px; }
    .s6 .txtBx h3{ font-size: 32px; margin-bottom: 32px; }
    .s6 .txtBx p{ font-size: 14px; margin-bottom: 60px; }
    .s6 .marqueeBx .txt{ font-size: 48px; }
    .s6 .objBx .imgBx{ width: 130px; }
}
@media screen and (max-width: 360px){
    .s2 .list li{ font-size: 26px; }
    .s6 .logo_list > div .imgBx{ width: 80px; }
    .s4 .inner .txtBx > div .txt p{ word-break: keep-all; }
    .s4 .inner .txtBx > div .tit{ gap: 10px; }
}