/* BASIC css start */
/* 이동버튼 */    
.move{position: fixed; right: 5%; top: 40%;z-index:25}
.move ul{}
.move ul li{margin: 10px 0;}
.move ul li a{display: block;  border-radius: 50%; width: 16px; height: 16px;position: relative;border:1px solid rgba(0,0,0,0);transition:all .4s;}
.move ul li a span{width: 6px; height: 6px; border-radius: 50%; background-color: #7d7d7d;text-indent: -9999px;  position: absolute; top: 50%;left: 50%; transform: translate(-50%,-50%); transition:all .4s;}
.move ul li a.on{border: 1px solid #000;transition:all .4s;}
.move ul li a.on span{background-color: #000;transition:all .4s;}
        
#contents{padding-top:0}
        
/* 섹션공통 */        
section{width: 100%;height: 100vh; }
section .sec_inner{width: 100%; margin: 0 auto; height: 100%;}
section .shop_now{font-family: 'Pretendard' , sans-serif; font-size: 12px; color: #000;padding-bottom: 5px; border-bottom: 1px solid #000;font-weight: 600;letter-spacing: 1px; display: inline-block;}
section .shop_now span{display: inline-block;margin-left: 25px;}
section .shop_now span img{transform:scale(.66);display:inline-block; margin-top:3px}
section p.tit{font-family: 'Noto Sans KR', sans-serif;letter-spacing: -.2px; }
.start{transition: all 1s; opacity: 0;}
.end{opacity: 1 !important;transition: all 1s;margin-top:-30px}        


/* sec1 */
#sec1{background: url(https://vittz.hgodo.com/ov/mobile/m_main.webp) no-repeat center center ;background-size: cover;}
#sec1 h2{font-family: 'Pretendard', serif; color: #000; font-size: 34px;font-weight:900; line-height:1.2;letter-spacing:0px; } 
#sec1 .sec_inner{position: relative;}
#sec1 .sec_inner .sec1_cont{text-align: left;position: absolute; top: 80%; left: 5%; transition: all 1s;opacity:0;}
#sec1 .sec_inner .sec1_cont .sec1_logo{}
#sec1 .sec_inner .sec1_cont .sec1_logo img{transform:scale(.66)}
#sec1 .sec_inner .sec1_cont p.tit{font-family: 'Pretendard Medium', sans-serif; color: #000; font-size: 20px; margin: 15px 0 20px;font-weight: 500; letter-spacing: -.2px;}

        
 /* sec2 */
#sec2{overflow:hidden; padding-top:100px;}
#sec2 .thumb{width:90%;height:35%;position:relative; margin: 0 auto;}
#sec2 .txt_cont{width: 100%;height: 50%; background-color: #f5f5f5; text-align:center; padding:50px 0;display:flex; flex-direction:column; align-items:center; justify-content:center}
#sec2 .txt_cont h2{font-family: 'Pretendard', serif; font-size: 31px; font-weight: 500;letter-spacing: 4px; color:#000;margin-top:10px}
#sec2 .txt_cont p.tit{color: #666; font-size: 14.5px;line-height:1.5; font-weight: 400; margin:23px 0; letter-spacing:-.6px; word-spacing:1.3px}
#sec2 .txt_cont .shop_now{}
#sec2 img{width: 100%; background-size: cover;}


/* sec3 
#sec3{}
#sec3>div{width: 100%;height: 50%;}
#sec3 .sec3_left{background: url(//skin.makeshop.co.kr/skin/branded/MO_img/sec3.png) no-repeat top center; background-size: cover;position: relative;}
#sec3 .sec3_left .sec3L_cont{text-align: center; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);width:100%}
#sec3 .sec3_left .sec3L_cont h2{font-family: 'Pretendard', serif; color: #fff; font-size: 40px;font-weight:600; line-height:1.2} 
#sec3 .sec3_left .sec3L_cont p.tit{font-size: 13px; margin: 15px 0 20px;}
#sec3 .sec3_left .sec3L_cont .shop_now{color: #fff; border-color: #fff;}
#sec3 .sec3_right{background-color: #f5f5f5;position: relative;}
#sec3 .sec3_right .sec3R_cont{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; }
#sec3 .sec3_right .sec3R_cont .swiper{width: 90%;padding-bottom:50px}
#sec3 .sec3_right .sec3R_cont .swiper ul{}
#sec3 .sec3_right .sec3R_cont .swiper ul li{width: 49%;}
#sec3 .sec3_right .sec3R_cont .swiper ul li a{display:block; width:100%; }
#sec3 .sec3_right .sec3R_cont .swiper ul li a img{width:100%;}
#sec3 .swiper-pagination-bullet-active{width: 20px;border-radius: 10px;background-color: #000;}*/


#sec3 {
    overflow:hidden; padding-top:60px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
}

#sec3 .container {
    display: flex;
    flex-wrap: wrap; /* 모바일에서 행으로 쌓이도록 설정 */
    margin: 0px; /* 기본 마진 축소 */
}

#sec3 .button-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 22px; /* 모바일에 맞게 텍스트 크기 축소 */
}

#sec3 .button-table td, #sec3 .button-table th {
    font-family: 'Pretendard', sans-serif;
}

#sec3 .button-row {
    display: table-row;
    background-color: white;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

#sec3 .button-row:hover {
    color: #ff6400;
}

#sec3 .button-row td {
    padding: 14px 10px; /* 모바일에 맞게 패딩 축소 */
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    text-align: left;
}

#sec3 .button-row td.left {
    font-weight: bold;
    font-size: 24px; /* 모바일 크기 조정 */
}

#sec3 .button-row td.right {
    text-align: right;
}

#sec3 .left, .right {
    flex: 1;
    padding: 10px; /* 모바일에서 여백 축소 */
}

#sec3 .left {
    text-align: left;
}

#sec3 .right {
    text-align: right;
    padding-top: 10px;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    #sec3 .container {
        flex-direction: column; /* 모바일에서 수직 정렬 */
        margin: 10px; /* 모바일 마진 감소 */
    }

    #sec3 .left {
        text-align: center; /* 이미지 중앙 정렬 */
        flex: none;
        margin-bottom: 10px; /* 아래 여백 추가 */
    }

    #sec3 .right {
        text-align: center; /* 텍스트 중앙 정렬 */
        flex: none;
    }

    #sec3 .button-table {
        font-size: 20px; /* 텍스트 크기 축소 */
    }

    #sec3 .button-row td.left {
        font-size: 22px; /* 왼쪽 텍스트 크기 축소 */
    }

    #sec3 video {
        width: 100%; /* 비디오 폭을 100%로 설정 */
    }
}


/* sec4 */
/*#sec4{background: url(//skin.makeshop.co.kr/skin/branded/MO_img/sec4.png) no-repeat center center; background-size: cover;}
#sec4 .sec_inner{display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: center;width:100%;padding:13% 15%;}
#sec4 .sec_inner h2{margin-bottom: 35px; font-family: 'Pretendard', serif; font-size: 31px; color: white; text-align: center; font-weight: 600;}
#sec4 .sec_inner .swiper{width:100%; padding-bottom:40px}
#sec4 .sec_inner ul{width:100%; }
#sec4 .sec_inner ul li{width:100%; height:100%}
#sec4 .sec_inner ul li>a{display: block;width: 100%;overflow:hidden; height:70%}
#sec4 .sec_inner ul li .thumb{width: 100%;height:100%}
#sec4 .sec_inner ul li .thumb img{width: 100%;height:100%; object-fit:cover}
#sec4 .sec_inner ul li .text_area{width: 100%; background-color: #fff;  padding:13px; position: relative;height:30%}
#sec4 .sec_inner ul li .text_area h3{padding-top: 2px; text-align: center;font-family: 'Pretendard' , sans-serif; color: #000; font-size: 14px; margin-bottom: 10px; font-weight: 800;}
#sec4 .sec_inner ul li .text_area p{font-family: 'Noto Sans KR', sans-serif; font-size: 10.5px; color: #7f7f7f; font-weight: 500; width:95%; margin:0 auto;letter-spacing:-.5px}
#sec4 .sec_inner ul li .text_area .plus{position: absolute; bottom: 10px; right: 15px;}
#sec4 .sec_inner ul li .text_area .plus img{display: inline-block; transform:scale(.6)}
#sec4 .sec_inner .swiper .swiper_btn_prev{position:absolute; left:0; bottom:0; z-index:9}
#sec4 .sec_inner .swiper .swiper_btn_prev a{display:block}
#sec4 .sec_inner .swiper .swiper_btn_next{position:absolute; right:0; bottom:0; z-index:9}
#sec4 .sec_inner .swiper .swiper_btn_next a{display:block}
#sec4 .swiper-pagination-fraction{bottom:0 !important}
#sec4 .swiper-pagination{color:rgba(255,255,255,.7); z-index:6 !important}
#sec4 .swiper-pagination-current{color:#fff}

*/


               #sec4 {
            margin: 0;
            padding: 0;
            font-family: 'Montserrat Black', 'Pretendard Regular', Arial, sans-serif;
        }

        @font-face {
            font-family: 'Montserrat Black';
            src: url('https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm45_bZF3gnD-w.ttf') format('truetype');
            font-weight: 900;
        }

        @font-face {
            font-family: 'Pretendard Regular';
            src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2');
            font-weight: 400;
        }
        
        @font-face {
            font-family: 'Pretendard ExtraBold';
            src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff2/Pretendard-ExtraBold.woff2') format('woff2');
            font-weight: 400;
        }
        
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #sec4 .header {
            text-align: center;
            padding: 20px 0 40px;
            color: #000;
            font-size: 40px;
            margin-top: 100px;
            text-align: center;
            font-family: 'Montserrat', sans-serif;
            font-weight:900;
        }

        /*#sec4 .header h1 {
            font-size: 24px;
            font-weight: bold;
            color: #000;
        }*/
        
        #sec4 .swiper {
            width: 100%;
        }

        #sec4 .swiper-slide {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            background-color: #fff;
        }

        #sec4 .image-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #sec4 .main-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        #sec4 .sub-images {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 10px;
        }

        #sec4 .sub-image-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 49%;
        }

        #sec4 .sub-image {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

     #sec4 .swiper-pagination {
            padding: 10px 0;
            position: relative;
            font-family: 'Montserrat', sans-serif;
            font-weight:900;
        }

        #sec4 .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            background-color: #bbb;
            opacity: 1;
            margin: 0 5px;
            border-radius: 50%;
        }

        #sec4 .swiper-pagination-bullet-active {
            background-color: #000;
        }
        
        #sec4 .swiper-slide .title {
            font-size: 18px;
            margin-top: 10px;
            text-align: left;
            font-family: 'Pretendard', sans-serif;
            font-weight: 900;
            color: #000;
        }
      
/* BASIC css end */