html > body main{padding:0}
section{align-items: center;margin-left:0 !important;margin-right:0 !important;gap: 0;}
section:last-child{padding-bottom: 60px;}
section .titWrap + .conWrapper{margin-top:0}
.btnWrap{margin-bottom: 80px;}
section > .titWrap{gap: 20px}


/* 여기부터 */
/* header{display: none;} */
main .typeDefault .swiper-pagination-bullet{width: 6px !important; height: 6px !important;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: 0 !important;}
body{margin-top: 0;padding-top: 0 !important; background-color: #fff;}

.mvGuides{
 img{-webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none}

    .top{position: relative;padding: 0;height: calc(100vh - var(--height-header));overflow: hidden;background-position: center; background-size: cover;background-repeat: no-repeat;margin-top: var(--height-header);}
    .pageid{position: relative;position: absolute; z-index: 2;;top: 50%; left: 50%; transform: translate(-50%, -50%);display: flex; gap: 1rem; flex-wrap: wrap; text-align: center; width: 100%; z-index: 2;}
    .pageid::before{position: absolute;;content: ""; width: 100vw; height: 100vh; background: #0000005e;left: 50%; top: 50%;z-index: 0; transform: translate(-50%, -50%);}
    .pageid *{color: #ffffff;width: 100%; position: relative ;z-index: 2;}
    .pageid h1{font-size: 4rem !important;}
    .KV{background: #000;position: absolute; z-index: 1;;top: 50%; left: 50%; transform: translate(-50%, -50%);width: 100%;height: 100%;}
    .KV img{opacity: 0.8; }

/* .triggerCon{min-height: 100vh; background: #fff; } */


.intro{text-align: center;}
/* .intro{text-align: center;background: linear-gradient(180deg, #e8ffe2, transparent);} */
.intro .titWrap{display: flex;flex-direction: column; gap: 1rem;}
.intro .titWrap div{text-align: center;max-width: 800px; margin:  0 auto;}

div:has(> .route){width: 100%; max-width: 1080px;}
.route {
    &{display: flex;min-width: 300px;width: 100%;            background: #d9e6f1;
        padding: 50px 20px;
        border-radius: 8px; margin: 0 auto;}
    li{width: 33.33%;;position: relative;;display: flex; flex-direction: column; gap: 2rem; justify-content: center; align-items: center; padding: 0 10px;}
    li::before{content: ""; position: absolute;width: 5px;height: 5px;   top: 50%;left: 50%;transform: translate(-50%, -50%); background: #000;}
    li:after{            content: ""; position: absolute;width: 100%;height: 2px;display: block;background: url(/movementlab/page/promotion/clubday24/img/dot.png);background-size: 5px;background-repeat: repeat-x; opacity: 0.4; 
        /* background-position: center; */
        /* margin: 0 7px; */
        filter: invert(1);top: 50%;left: 50%;transform: translate(-50%, -50%);}
    /* .conNum{border-bottom: 1px solid ; display: block; padding: 10px; width: fit-content;} */
}

.contentsBody{flex-direction: row; justify-content: center; align-items: flex-start; margin-bottom: 0 !important;}
.articleWrap{max-width: 800px; width: calc(100% - 26px);}
article{
    & + & {margin-top: 2rem;padding-top: 2rem; border-top: 1px solid #ddd;}
    &{ margin: 0 auto;display: flex; flex-direction: column; gap: 2rem;}
    /* &{max-width: 1080px; margin: 0 auto;display: flex; flex-direction: column; gap: 2rem;} */

    .conNum{font-weight: 200;}
    .titWrap{display: flex;flex-direction: column; gap: 1.2rem;text-align: center; margin: 0 auto;padding: 0;}
    .txtWrap{display: flex;flex-direction: column; gap: 1rem;}
    .txtWrap h6{font-weight: 600;}
    .txtWrap p{font-weight: 400; color: var(--tcMgray80); font-size: 1.1rem !important;}

    .infoWrap{margin: 2rem 0;padding: 2rem 0; width: 100% !important;}
    /* .infoWrap{margin: 2rem 0;border-top: 1px solid #ddd;padding: 2rem 0;border-bottom: 1px solid #ddd; width: 100% !important;} */
    .infoWrap ul{display: flex;flex-direction: column; gap: 0.4rem;}
    .infoWrap ul >li.title{font-weight: 600;color: var(--tcMgray80); border-radius: 100px; padding: 0.2rem 1rem; width: fit-content;background: #8b0000;margin-bottom: 1rem; color: #fff;}
    .infoWrap ul >li{display: flex; gap: 0.5rem;align-items: flex-start;color: var(--tcMgray60);font-size: 0.95rem; font-weight: 400;}
    .infoWrap ul >li *{font-size: inherit; font-weight: inherit; color: inherit;}
    .infoWrap ul >li i{width: 20px;text-align: center;line-height: 1.5;font-weight: 600;color:#8b0000;font-size: 1rem; flex-shrink: 0;}
    .infoWrap ul > li .em{color: #8b0000 !important; font-weight: 600 !important;}

    /* . {flex-direction: column; gap: 40px;} */
    .articleS{width: 100%; overflow: hidden;padding-bottom: 30px;}
    .articleS .imgCon{position: relative;width: 100%;font-size: 0;}
    .articleS .imgCon img{aspect-ratio: 1/1.4;width: 100%;display: block;}
    .articleS .swiper-slide .txtWrap{position: absolute; bottom: 0; left: 0; background: linear-gradient(0deg, black 50%, transparent); color: #fff !important;padding: 30px;}
    .articleS .swiper-slide .txtWrap *{color: #fff;}
    .articleS .swiper-slide .txtWrap h6{font-size: 32px  !important; font-weight: 700;}
    .articleS .swiper-slide .txtWrap p{font-size: 16px !important;}
    .articleS li{width: 70%;;border-radius: 10px; overflow: hidden;}
    /* .storyCon  .txtWrap{gap: 20px;max-width: 1400px;margin: 0 auto;} */

}


/* .triggerCon .contentsBody{display: flex; flex-direction: row;}
.contentsBody {justify-content: center; align-items: flex-start;max-width: 1400px;margin: 0 auto !important;}
.contentsBody article{
&{width: 30%; margin: 0 !important;}
.articleS li .imgCon img{aspect-ratio: 1/1.2;}
.articleS li{width: 100%; padding: 0 12px;}
} */
.infoBox{
    &{ max-width: unset; flex-direction: row;background: #0000000e; padding: 30px; border-radius: 6px;align-items: center; margin-bottom: 6rem;}
    .imgCon {max-width: 450px; width: 40%;border-radius: 12px;overflow: hidden;height: fit-content;}
    .txtWrap{width: 60%; display: flex; flex-direction: column; justify-content: space-between; height: -wedkit-fill-available;gap: 20px;}
    .txtWrap p{font-weight: 500; font-size: 0.95rem !important;}
    .imgCon img{aspect-ratio: 1.6/1;}
    .btnWrap{margin-bottom: 0;}
    .btn{font-size: 0.9rem; background-color: #fff;        padding: 10px 20px;}
}
}
/* 사이드 네비게이션 */
.sidebar-nav { padding: 60px 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: fit-content;position: sticky; top: 100px; min-width: 300px;z-index: 1; left: 48px; } 
.sidebar-list { padding: 4px 0; display: flex; gap: 4px;opacity: 0.4;line-height: 1.2;} 
.sidebar-list *{font-size: 16px;}
/* .sidebar-list:before {content: ""; display: inline-block;width: 2px;  background: var(--tcBlack); vertical-align: middle;line-height: 1;}  */
.sidebar-list.active {opacity: 1; } 
.sidebar-list.btnList{border-radius: 4px;opacity: 0.6;background: #f5f5f5;/* color: #ddd; */padding: 6px 10px;margin: 1rem 0;font-size: 0.8rem;transition: background 0.4s;}
.sidebar-list.btnList:hover{background: #e7e7e7;}
.sidebar-list.btnList a{display: flex;justify-content: center; align-content: center;gap: 0.4rem;}
.sidebar-list.btnList *{font-size: 14.5px; line-height: 1;}
.content-area{flex-direction: row; align-items: flex-start; padding: 0 2%;max-width: 1800px;margin: 0 auto; } 



.konaBox { border: none !important; margin-top: 4rem !important;}
.konaBox.-clone { border: none !important;
        padding: 20px !important;
        margin: 0;
        position: relative;
        position: fixed;
        width: fit-content;
        max-width: 740px;
        gap: 20px;
        background: #000000c0;
        box-shadow: 1px 1px 8px 1px #00000023;
        backdrop-filter: blur(20px);
        border-radius: 10px;
        bottom: 2vh;
        left: 50%;
        transform: translate(-50%, 100%);
        z-index: 10;
        width: 90%; align-items: center; justify-content: center;
        margin: 0 auto;
        opacity: 0;
        transition: 0.6s;
    }

        .konaBox.-clone.sticky{
            opacity: 1;
            transform: translate(-50%, 00%);
        }
.konaBox.-clone {
   
    .txtWrap{width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;height: -wedkit-fill-available;gap: 20px;}
    .txtWrap p{font-weight: 500; font-size: 1.1rem !important; align-items: center; color: #fff; }
.imgCon{width:100px; border-radius:6px; display:none;}
    .imgCon img{aspect-ratio: 1.6/1;}
    .btnWrap{margin-bottom: 0;}
    .btn{font-size: 0.9rem; background-color: #fff; padding:10px 16px; border-radius:8px; color:#555; border:none; height: fit-content;}
    .btnClose{color: #aaaaaa;
        font-size: 10px;
        background: #ffffff0e;
        border-radius: 100px;
        position: absolute;right: 10px;top: 10px; cursor: pointer;}
    }






.cloneFix{position: sticky; top: calc(var(--height-header)); left: 0 ;background-color: #fff; border-bottom: 1px solid #ddd;z-index: 11;color: var(--tcMgray60);display: flex;justify-content: center;flex-wrap: wrap;}

.cloneFix div{display: flex; justify-content: space-between; align-items: center;width: 100%; max-width: 800px;font-size: 14px; padding: 10px;}
.cloneFix div.scrollGauge {
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    height: 4px;
    background: rgba(0, 0, 0, 0.1); /* 트랙 */
    z-index: 9999;
    pointer-events: none;
    padding: 0;
  }

  .scrollGauge span {
    display: block;
    height: 100%;
    width: 0%;
    background: #000; /* fill 색상 */
    transition: width 0.2s ease;
  }

  div [class^="recommend"] .conWrapper{margin: 0 auto; padding: 0;}
  div [class^="recommend"] li[data-product-no] a{gap: 0 !important;}
  div [class^="recommend"] li[data-product-no] figure{border-radius: 8px;}
  div [class^="recommend"] li[data-product-no]  .-prices{display: none !important;}
  div [class^="recommend"] li[data-product-no]  .-brand{display: none !important;}
  div [class^="recommend"] li[data-product-no] figure{font-size: 0;}
  div [class^="recommend"] li[data-product-no] figure img{aspect-ratio: 1/1;}
  div [class^="recommend"] li[data-product-no] figure img:nth-child(1){opacity: 0;}
  div [class^="recommend"] [data-ref="promotion"] .-carousel.swiper ul.swiper-wrapper.col-4 li{width: calc(25% - 7.5px);}


  .prdWrap {
    &{overflow: hidden; width: 100%;}
    .swiper-wrapper{width: 100%;}
    .box {overflow: hidden; margin-bottom: 30px;}
    .box {display: flex;gap: 20px;;align-items: flex-start;position: relative;flex-direction: row;}
    .box .imgCon{overflow: hidden;border-radius: 2px;font-size: 0;width: 45%;max-width: 200px;}
    .box img {aspect-ratio: 1/1;width: 100%;}
  
  
    .box-content{width: -webkit-fill-available; display: flex; gap: 0px; flex-direction: column;}
    .box-title {font-size: 0.9rem;font-weight: 400;  display: flex; align-items: center;gap: 0 6px ;flex-wrap: wrap;}
    .box-title *{font-size: 1em; font-weight: 400;}
    .box-title i{opacity: 0.1;; font-size: 1rem; font-weight: 500;}
    .assistant{font-size: 0.8rem; font-weight: 400; color: var(--tcLgray40);width: 100%;}
    .description {font-size: 0.8rem;color: var(--tcMgray60);   overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1; font-weight: 400;-webkit-box-orient: vertical; line-height: 1.3;}
    .benefitWrap {display: flex;gap: 0.3rem 0.3rem; flex-wrap: wrap;}
    .benefit {background: #f3f1e7;padding: 0.2rem 0.5rem;border-radius: 4px;border: none;opacity: 1;font-size: 0.75rem;width:fit-content;gap: 0;}
   .priceWrap {font-size: 0.8rem; margin-top: 10px;}   
  .priceWrap li{display:flex; align-items: center;gap: 2px}
  .priceWrap li.priceOrignal{color:var(--tcMgray60)}
  .priceWrap li.priceMem *{font-size: 0.9rem;  font-weight: 400;}
  .priceWrap li.priceMem .present{color: #8b0000; font-weight: 700;}
}




main .mvGuides .infoBox.konaBox{margin: 0px auto  60px auto!important;}





@media (max-width: 1200px){
    .mvGuides{
        .top{max-height: 1100px;}
           .pageid h1{font-size: 3rem !important;}
         
           
           .txtWrap p{font-size: 14px !important;}
       
           .infoWrap{padding: 2rem 20px;}
           .infoWrap ul >li{font-size: 14px !important;}
           
           .articleS{padding-bottom: 20px;}       
           /* .articleS li{width: 48%; padding: 0 4px;} */
       
           article{
          & + &{margin-top: 30px;}
          &{gap: 1rem;}
            
          
            .txtWrap p{font-size: 14px !important;}
    
        }
       
    
       .infoBox{
           &{padding: 20px; align-items: center; margin-bottom: 30px; flex-direction: column;}
           .imgCon {max-width: 450px; width: 40%;border-radius: 12px;}
           .txtWrap{width: 60%; display: flex; flex-direction: column; justify-content: space-between; height: -wedkit-fill-available;gap: 20px;}
           .txtWrap p{font-size: 14px !important; line-height: 1.3;}
           .imgCon img{aspect-ratio: 1.6/1;}
           .btnWrap{margin-bottom: 0;}
           .btn{font-size: 12px; background-color: #fff;}
       }
       }
     

}



@media (max-width: 768px){
    .top{height: calc(80vh - var(--height-header))}
    main .mvGuides .infoBox.konaBox,.contentsBody{margin-bottom:  0 !important;}
    .mvGuides{
        /* .top{height: 100dvh;} */
           .pageid h1{font-size: 26px !important;}
           
/* .intro .titWrap div{text-align: left;} */
.intro .titWrap{padding: 0 15px;}
    & article {
        .titWrap {align-items: center;}
        .titWrap *,.titWrap p{text-align: center !important;}
    }
.route {
    &{width: 92%;   padding: 20px 0px;border-radius: 8px;}
    }
           article{

                .infoWrap{margin-top: 0;}
                /* .infoWrap ul{padding-left: 10px;} */
                .infoWrap ul >li{font-size: 13px !important;}     
               .infoWrap ul >li i{line-height: 1.2 !important;width: 24px ;text-align: center;}      
               .titWrap p{text-align: left;}
               .txtWrap p{font-size: 14px !important; line-height: 1.5;}
               .articleS li{padding: 0 2px;}
               .articleS li{padding: 0; width: 100%;}
               .articleS .swiper-slide .txtWrap{padding:25px;}
               .articleS .swiper-slide .txtWrap h6{font-size: 30px !important; font-weight: 700;line-height: 1.3;}
               .articleS .swiper-slide .txtWrap p{font-size: 12px !important;}
               .articleS .imgCon img{aspect-ratio: 1/1.5;width: 100%;}
          }
       
    
       .infoBox{
       
           &{padding: 20px; align-items: center; margin-bottom: 0 !important; flex-direction: column;gap: 20px;}
           .imgCon {max-width: unset; width: 100%;border-radius: 8px;}
           .txtWrap{width: 100%; }
           .txtWrap p{font-size: 14px !important; line-height: 1.5;}
           .imgCon img{aspect-ratio: 2/1;}
           .btnWrap{margin-bottom: 0;}
           .btn{font-size: 12px; background-color: #fff; width: fit-content; text-align: center;}
       }
       }


    .sidebar-nav{width: 100% ; background: #fff;z-index: 1;position: sticky; flex-direction: row;
        top: 50px; padding: 10px;
        justify-content: center;
        z-index: 2;
        overflow-x: scroll;
        scroll-snap-align: start; gap: 10px;}
   
        .sidebar-nav a{width: fit-content; padding: 6px}
        .sidebar-list *{font-size: 14px;}
        .sidebar-nav a > span{display: none;}
    .sidebar-nav::-webkit-scrollbar{display:none}  
    .sidebar-nav::-webkit-scrollbar-thumb {background:#828282 !important;}


    .cloneFix div{font-size: 12px; }

    .konaBox.-clone{.txtWrap p{text-align: center !important;}}
    .konaBox.-clone .btnClose{font-size: 10px;padding: 4px 10px;}


    div [class^="recommend"] [data-ref="promotion"] .-carousel.swiper ul.swiper-wrapper.col-4 li{width: calc(33.333% - 4px) !important;}
    div [class^="recommend"] [data-ref="promotion"] .-carousel.swiper ul.swiper-wrapper.col-4 li:nth-child(16){display: none;}



    .prdWrap {
        &{max-width: 400px; margin: 0 auto;}
     
        .box .imgCon{width: 30%;max-width: 150px;}
            

       .priceWrap {font-size: 0.8rem; margin-top: 10px;} 
    }


}