/*메인*/

.slick-dotted.slick-slider{margin-bottom: 0}
.slick-dots {bottom: 2.6rem;}
.slick-dots li button{background: rgba(255,255,255,0.6); border-radius: 100%;}
.slick-dots li button:before {content: ""; background-color: #fff; width: 100%;height: 100%; border-radius: 100%;}
.slick-dots li button:hover:before{background: rgba(255,255,255,0.8);}
.slick-dots li.slick-active button{background: rgba(255,255,255,1)}

.m-sec00{position: relative;}
.visual-num{position: absolute; bottom:2rem; right: 2rem; font-size: 1rem; color: #fff; background-color: rgba(0,0,0,0.6); border-radius: 100px; padding:.4rem 1rem; }
.main-visual{position: relative;}
.mainslide-swiper-pagination{position:absolute; bottom:20px !important; left:50% !important; transform: translateX(-50%); text-align:center; z-index:10;}
.mainslide-swiper-pagination span{width:12px; height:12px; opacity: 0.7; background:#ccc; margin:0 6px !important;}
.mainslide-swiper-pagination span.swiper-pagination-bullet-active{background:#f00059; opacity: 1;}
/*.main-visual div.box{}*/
.main-visual div.box a{width: 100%; aspect-ratio:4/3; height:100%;}
.main-visual div.box img{width: 100%; height: 100%; object-fit: cover;}
.main-visual div.box .txt-box{left: 2rem; top:30%; position: absolute; color: #fff; z-index: 1; line-height: 1.5;}

/*.main-visual div.box .visual-txt-box {position: absolute; top:50%; left:10%; transform:translateY(-50%); z-index:2; width:auto; height:auto; padding: 2rem;}*/
.main-visual div.box .visual-txt-box{width:100%; height:100%; max-width:1280px; margin:0 auto; position: relative;}
.main-visual div.box .visual-txt-box .visual-txt{position:absolute; top:50%; left:0; transform: translateY(-50%); z-index:3; width:fit-content; height:auto; padding: 2rem;}
.main-visual div.box .visual-txt-box .visual-txt:after{position: absolute; background: rgb(0 0 0 / 34%); /*background:rgba(0,0,0,0.9); filter: blur(80px);*/ top:0; left: 0; z-index:-1; display: block; width: 100%; height: 100%; content: "";}
.main-visual div.box .visual-txt-box .visual-txt p{padding-bottom:10px;}
.main-visual div.box .visual-txt-box .visual-txt p:last-child{padding-bottom:0;}
.main-visual div.box .visual-txt-box .visual-txt p.large{/*font-size:44px;*/font-size:52px; font-weight:bold;}
.main-visual div.box .visual-txt-box .visual-txt p.medium{/*font-size:26px;*/font-size:30px;}
.main-visual div.box .visual-txt-box .visual-txt p.small{/*font-size:18px;*/font-size:24px;}
/*.main-visual div.box .visual-txt-box .visual-txt{position:absolute; z-index:3;}*/
/*.main-visual div.box .visual-txt-box-bg{position: absolute; background:linear-gradient(90deg, #000000, transparent); top:0; left: 0; right:0; z-index:9; display: block; width: 100%; height: 100%; content: "";}*/

.main-btn{border: 1px solid #ddd; border-radius: 100px; padding: 1.7rem; color: #666; font-size: 1.4rem; display: flex; align-items: center; justify-content: center;}
.main-btn > i {padding-left:12px; }
.main div.m-sec01 > div.flex > div{width: 20%; padding-bottom: 2rem; text-align: center; font-size:1.2rem;}
.main div.m-sec01 > div.flex > div img{padding: .5rem .5rem 0; max-width: 100%;}
.main div.m-sec02 div.x-scroll.flex > div{width: 60%; flex: 0 0 auto; margin-right: 2rem;}
.main div.m-sec02 div.x-scroll::-webkit-scrollbar {background-color:#fff;width: 0px; height: 0;}
.main div.m-sec02 div.img-box{overflow: hidden; border-radius: 20px; position: relative; width: 100%;aspect-ratio:3/4;}
.main div.m-sec02 div.img-box:after{position: absolute; background:linear-gradient(0deg, #000000, transparent, transparent); top:0; left: 0; display: block; width: 100%; height: 100%; content: "";}
.main div.m-sec02 div.img-box > img{width: 100%; height: 100%; object-fit: cover;}
.main div.m-sec02 div.img-box > div.txt-box{position: absolute; width: 80%; bottom:3rem; left: 50%; transform: translateX(-50%); z-index: 1; color: #fff;}
.main div.m-sec04 div.flex{flex-wrap: wrap;}
.main div.m-sec04 div.flex > div {width: 48.5%; margin-bottom: 3%; margin-right: 3%; padding: 2.8rem 1.6rem; border-radius: 6px; background-color: #f5f5f5;}
.main div.m-sec04 div.flex > div dl dt{font-size: 1.4rem; font-weight: 800;}
.main div.m-sec04 div.flex > div dl dd{padding-top: 1.6rem; font-size: 1.6rem; font-weight: 800;}
.main div.m-sec04 div.flex > div:nth-child(2n){margin-right: 0;}

.title_mf{
    display: flex;
    align-items: center;
    padding-right:10px;
}
.m-sec-bn-in{
    max-width:1000px;
}
/*.product_wrap{*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*}*/
/*.pd_tix_box{*/
/*    position: relative;*/
/*    width:100%;*/
/*    height:100%;*/
/*    background:#ddd;*/
/*    border-radius:15px;*/
/*}*/
/*.pd_tix_box .sec04_img{*/
/*    width:100%;*/
/*    height:100%;*/
/*}*/
/*.pd_tix_box .sec04_img img{*/
/*    width:100%;*/
/*    height:100%;*/
/*    border-radius:15px;*/
/*}*/
/*.product_r{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    flex-wrap: wrap;*/
/*}*/
/*.product_r .product_r_in{*/
/*    display: flex;*/
/*}*/
/*.product_r .product_r_in > div{*/
/*    position: relative;*/
/*    width:auto;*/
/*    margin:0 0 20px 20px;*/
/*    background:#ddd;*/
/*    border-radius:15px;*/
/*}*/
/*.product_r .product_r_in:nth-child(3) > div{*/
/*    margin-bottom:0;*/
/*}*/
/*.product_r .product_r_in div .sec04_img{*/
/*    width:100%;*/
/*    height:100%;*/
/*}*/
/*.product_r .product_r_in div .sec04_img img{*/
/*    width:100%;*/
/*    height:100%;*/
/*    border-radius:15px;*/
/*}*/
/*.sec04_prod_title{*/
/*    position:absolute;*/
/*    bottom:0;*/
/*    left:0;*/
/*    padding:10px 20px;*/
/*    background:rgba(0,0,0,0.6);*/
/*    width:100%;*/
/*    border-radius:0 0 15px 15px;*/
/*}*/
/*.sec04_prod_title p{*/
/*    color:#fff;*/
/*    font-size:22px;*/
/*    font-weight:500;*/
/*}*/
.product_wrap{
    display:grid;
    grid-template-columns: 384px 1fr; /* ← 왼쪽 틱스패스 폭 고정 */
    gap:24px;
    align-items:start;
}

/* 왼쪽 고정 카드(틱스패스) */
.product_l .sec04_prod_box a{
    display:block;
    border-radius:18px;
    overflow:hidden;
    position:relative;
}
.product_l .sec04_img{
    /* 왼쪽 카드는 정사각형 느낌 (원하면 값 조정) */
    aspect-ratio: 1 / 1;
}
.product_l .sec04_img img{
    width:100%; height:100%; object-fit:cover; display:block;
}
.product_l .sec04_prod_title{
    position:absolute;
    left:0px;
    bottom:0px;
    color:#fff;
    font-weight:700;
    font-size:18px;
    padding:10px 20px;
    background:rgba(0,0,0,0.6);
    width:100%;
    border-radius:0 0 15px 15px;
}

/* 오른쪽 영역: 카드가 없어져도 자동 재배치 */
.product_r{
    display:grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr)); /* 자동 3열 */
    gap:16px 16px;
}

/* 중간 래퍼를 그리드에 녹여서(플랫하게) sec04_prod_box들만 그리드 아이템이 되게 */
.product_r_in{ display:contents; }

/* 오른쪽 카드 공통 */
.product_r .sec04_prod_box a{
    display:block;
    border-radius:18px;
    overflow:hidden;
    position:relative;
}
.product_r .sec04_img{
    aspect-ratio: 16 / 9;   /* 오른쪽은 와이드 비율 */
    width:100%;
    height:185px;
}
.product_r .sec04_img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.sec04_prod_title{
    position:absolute;
    left:0px;
    bottom:0px;
    color:#fff;
    font-weight:700;
    font-size:18px;
    padding:10px 20px;
    background:rgba(0,0,0,0.6);
    width:100%;
    border-radius:0 0 15px 15px;
}
/* 여백/초기화 (필요시) */
.sec04_prod_box{ margin:0; }
.sec04_prod_box img{ display:block; }

/*팝업*/
/*.drawer{height:auto !important;}*/
.drawer .popupSwiper{width:100%; height:100%; position: relative;}
.drawer .popupSwiper a{width:100%; height:100%;}
.drawer .popupSwiper a img{width:100%; height:100%; object-fit:cover;}
.drawer .visual-num{width:50px; height:24px; position:absolute; left:auto; right:1.4rem; bottom:1.4rem; font-size:1.4rem;}

/*개인정보처리방침*/
.page_wrap{max-width:1280px; margin:0 auto; padding:50px 20px; color:#555;}
.page_wrap .content_wrap{width:100%;}
.page_wrap h3{color:#222; font-size:34px;}
.page_wrap .content_wrap .box{margin-top:20px;}
.page_wrap .content_wrap .box p{line-height:24px;}
.page_wrap .content_wrap .box p span{padding-right:4px;}
.page_wrap .content_wrap .box h5{padding:10px 0; color:#222;}
.page_wrap .content_wrap .box ul > li{padding-bottom:4px; line-height:24px; padding-left:10px;}
.page_wrap .content_wrap .box ul > li .li_in{padding-left:5px;}
.page_wrap .content_wrap .box table{width:100%; border-top:1px solid #222; margin:5px 0 10px;}
.page_wrap .content_wrap .box table th{border-bottom: 1px solid #ddd; border-right:1px solid #ddd; background:#f7f7f7; padding:10px; text-align:center; font-weight:normal; color:#222;}
.page_wrap .content_wrap .box table th:last-child{border-right:0;}
.page_wrap .content_wrap .box table td{border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd; padding:10px; line-height:22px; font-size:14px;}
.page_wrap .content_wrap .box table td:first-child{border-left:0;}
.page_wrap .content_wrap .box table td:last-child{border-right:0;}
.page_wrap .content_wrap .box table .text_center{text-align:center;}



/*이용약관*/
.page_wrap .content_wrap .box ul li ul{padding:5px 0;}
@media screen and (max-width: 1320px){
    .main-visual div.box .visual-txt-box .visual-txt{
        left:30px;
    }
}
@media (max-width: 1200px){
    .product_wrap{ grid-template-columns: 340px 1fr; }
    .product_r{ grid-template-columns: repeat(3, minmax(200px,1fr)); }
}

@media screen and (max-width:1024px){
    .product_wrap{ grid-template-columns: 1fr; gap:14px; }   /* 모바일: 틱스패스가 상단으로 */
    .product_r{ grid-template-columns: repeat(2, minmax(200px,1fr)); gap:14px; }
    .product_l .sec04_img{ aspect-ratio: 16 / 9; } /* 모바일에선 비율 맞춤(선택) */
}
@media screen and (max-width:768px){
    .main-visual div.box .visual-txt-box .visual-txt{
        left:20px;
    }
    .page_wrap h3{font-size:26px;}
    .page_wrap .content_wrap .box{font-size:14px;}
    .main div.m-sec01 > div.flex > div img{
        max-width:80px;
    }
}
@media (max-width: 560px){
    .main-visual div.box .visual-txt-box .visual-txt{
        top:30px;
        transform: translate(0, 0);
        padding:10px;
    }
    .main-visual div.box .visual-txt-box .visual-txt p.large{
        font-size:28px;
    }
    .main-visual div.box .visual-txt-box .visual-txt p.medium{
        font-size:18px;
        padding-bottom: 4px;
    }
    .main-visual div.box .visual-txt-box .visual-txt p.small{
        font-size:15px;
        padding-bottom: 2px;
    }
    .product_r{ grid-template-columns: 1fr; }
}

@media screen and (min-width:640px) {
    .main-visual div.box a {aspect-ratio: 4 / 2.5;}

}