/* BASIC css start */
.overflow_h {overflow:hidden;}

#detailpage {z-index:1000000000!important;}
#MK_basketpage {
    z-index: 1000000001 !important;
}
#contentWrap {width:100%;}
#contentWrap .wrapper {width:1360px; margin:0 auto;}
.shortping_header {background:#f4f1ea;}
.shortping_tit {padding:58px 0px; text-align:center;}
.shortping_tit h2 {font-size:28px; color:#000; font-weight:600; line-height:34px;}
.shortping_tit h2 p {font-size:14px; color:#999 line-height:20px;}

.shortform_top {background:#f7f7f7; text-align:center; padding:50px 0 20px;}
.shortform_top .swiper-container, .formList .swiper-container {overflow:hidden;}
.shortform_top h2 {font-size:22px; color:#000; margin-bottom:10px; font-weight:600;}
.shortform_top p {font-size:16px; color:#000; margin-bottom:40px;}
.cateSlide {padding:0 0 40px;}
.cateSlide .swiper-container {padding:0 10px;}
.cateSlide .swiper-wrapper {justify-content: center;}
.cateSlide .swiper-slide {width:auto;}
.cateSlide .swiper-slide a {display:inline-block; margin:0 15px; line-height:35px; color:#000; font-size:14px;}
.cateSlide .swiper-slide.active a {border-bottom:2px solid #000; font-weight:600;}
.section {padding-top:35px;}

.formList h2 {display:none;}
.formList h2 span {display:inline-block; font-size:14px; color:#000; font-weight:500; margin-left:10px;}

.formList {display:none; padding:30px 0;}
.formList.active {display:block;}
.formList .swiper-wrapper {gap:50px 20px; flex-wrap: wrap;}
.formList .swiper-slide {position:relative; width: calc((100% - 40px) / 3); border-radius:4px; overflow:hidden;}
.formList .swiper-slide .cnt {position: absolute; padding: 2px 8px; background-color: rgba(0, 0, 0, 0.4); border-radius: 15px; top: 15px; left: 15px; color: #fff; font-size: 10px;}
.formList .swiper-slide .cnt img {width:12px; margin-right:2px; vertical-align:middle;}
.formList .swiper-slide .img {}
.formList .swiper-slide img {width:100%;}
.formList .swiper-slide .detail {background:#FAF8EF; display:flex; gap:5px; margin-top:10px; border-radius:4px; overflow:hidden; padding:20px 25px; flex-direction: column;}
.formList .swiper-slide .detail h2 {font-size:16px; display:block; font-weight:600}
.formList .swiper-slide .detail .thumb {width:80px; height:80px;}
.formList .swiper-slide .detail .thumb img {object-fit:cover;}
.formList .swiper-slide .detail .prd-icons {display:none;}
.formList .swiper-slide .detail .table-opt {display:none;}
.formList .swiper-slide .detail .sns-btns {display:none;}
.formList .swiper-slide .detail .f-btns {display:none;}
.formList .swiper-slide .detail .txt-wrap {display: flex; flex-direction: column; justify-content: center; gap:4px;}
.formList .swiper-slide .detail .txt-wrap .cate {font-size:18px; font-weight:700; color:#111;}
.formList .swiper-slide .detail .txt-wrap .ptit {font-size:14px; color:#6B6B6B;}


.formView {display:none; position:fixed; top:0; left:0; width:100%; height:100vh; background: rgba(0, 0, 0, 0.7); z-index: 100000;}
.formView.active {display:block;}
.formView .formViewContent {
    background:#000;
    position: absolute;
    width: 400px;
    min-height: 700px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    height: 711px;
}
.formView .swiper-container {height:100%; border-radius:8px; overflow: hidden; background:#000;}
.formView .swiper-slide .video-wrap {height:100%; background:#000;}
.formView .swiper-slide .video-wrap iframe {width:100%; height:100%;}

.formView .swiper-slide .controlWrap {position:absolute; bottom:30px; padding:0 16px; width: 100%; box-sizing: border-box;}
.formView .swiper-slide .controlWrap h2 {display:none;}
.formView .swiper-slide .control {width:100%; box-sizing:border-box; display:flex; gap:10px;}
.formView .swiper-slide .control .detail {display:none;}
.formView .swiper-slide .control .detail:first-child {display:flex; width:100%;}
.formView .swiper-slide .control .detail .prd-icons {display:none;}
.formView .swiper-slide .control .detail .brand {display:block!important; font-weight:700;}
.formView .swiper-slide .control .productMore {width:64px; height:64px; border-radius:4px; background:#fff; text-align: center; display: flex; flex-direction: column; justify-content: center; flex-shrink: 0;}

.formView .swiper-slide .controlWrap.open {background:#fff; padding-bottom:30px; padding-top:30px; bottom:0; top:0; overflow:auto;}
.formView .swiper-slide .controlWrap.open h2 {display:block; line-height:40px; font-size:16px; font-weight:600; margin-bottom:10px; position:relative;}
.formView .swiper-slide .controlWrap.open h2 a {position:absolute; top:0; right:-15px; width:40px; height:40px; line-height:40px; font-size:14px; text-align:center; }
.formView .swiper-slide .controlWrap.open .control {background:#fff; flex-direction: column;}
.formView .swiper-slide .controlWrap.open .control .detail {display:flex; height:auto;}
.formView .swiper-slide .controlWrap.open .control .productMore {display:none;}
.formView .swiper-slide .controlWrap.open .control .thumb {height:auto;}
.formView .swiper-slide .controlWrap.open .control .detail {position:relative; border-radius:0;}
.formView .swiper-slide .controlWrap.open .control .detail .priceWrap {display:block!important; margin-top:5px;}
.formView .swiper-slide .controlWrap.open .control .detail .priceWrap .price {display:flex; gap:5px; font-size:15px;}
.formView .swiper-slide .controlWrap.open .control .detail .priceWrap .price .dc_per {color:#FF5C35; font-weight:600;}
.formView .swiper-slide .controlWrap.open .control .detail .priceWrap .price .normal {color:#000; font-weight:600}
.formView .swiper-slide .controlWrap.open .control .detail .priceWrap .price .consumer {text-decoration:line-through; color:#999; font-size:12px;}
.formView .swiper-slide .controlWrap.open .control .detail .f-btns {display:block;}
.formView .swiper-slide .controlWrap.open .control .detail .f-btns > * {display:none;}
.formView .swiper-slide .controlWrap.open .control .detail .f-btns .btn_wish {display:block; width:24px; height:24px; text-indent:-9999px; position:absolute; top:0; right:-4px;}
.formView .swiper-slide .controlWrap.open .control .detail .f-btns .btn_wish #MS_btn_wish {display:block; width:24px; height:24px; background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0563 18.9607L10.9781 18.8888L5.50312 13.8044C4.54375 12.9138 4 11.6638 4 10.3544V10.2513C4 8.0513 5.5625 6.1638 7.725 5.7513C8.95625 5.5138 10.2156 5.79818 11.2188 6.50443C11.5 6.70443 11.7625 6.93568 12 7.2013C12.1312 7.0513 12.2719 6.9138 12.4219 6.78568C12.5375 6.68568 12.6562 6.59193 12.7812 6.50443C13.7844 5.79818 15.0437 5.5138 16.275 5.74818C18.4375 6.16068 20 8.0513 20 10.2513V10.3544C20 11.6638 19.4562 12.9138 18.4969 13.8044L13.0219 18.8888L12.9438 18.9607C12.6875 19.1982 12.35 19.3326 12 19.3326C11.65 19.3326 11.3125 19.2013 11.0563 18.9607ZM11.4719 8.86068C11.4594 8.8513 11.45 8.8388 11.4406 8.8263L10.8844 8.2013L10.8812 8.19818C10.1594 7.3888 9.06875 7.02005 8.00625 7.22318C6.55 7.5013 5.5 8.77005 5.5 10.2513V10.3544C5.5 11.2451 5.87188 12.0982 6.525 12.7044L12 17.7888L17.475 12.7044C18.1281 12.0982 18.5 11.2451 18.5 10.3544V10.2513C18.5 8.77318 17.45 7.5013 15.9969 7.22318C14.9344 7.02005 13.8406 7.39193 13.1219 8.19818L13.1187 8.2013L13.1156 8.20443L12.5594 8.82943C12.55 8.84193 12.5375 8.8513 12.5281 8.8638C12.3875 9.00443 12.1969 9.08255 12 9.08255C11.8031 9.08255 11.6125 9.00443 11.4719 8.8638V8.86068Z' fill='%23666666'/%3E%3C/svg%3E%0A");}
.formView .swiper-slide .controlWrap.open .control .detail .f-btns .btn_wish #MS_btn_wish.wish-on {background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0563 18.9607L10.9781 18.8888L5.50312 13.8044C4.54375 12.9138 4 11.6638 4 10.3544V10.2513C4 8.0513 5.5625 6.1638 7.725 5.7513C8.95625 5.5138 10.2156 5.79818 11.2188 6.50443C11.5 6.70443 11.7625 6.93568 12 7.2013C12.1312 7.0513 12.2719 6.9138 12.4219 6.78568C12.5375 6.68568 12.6562 6.59193 12.7812 6.50443C13.7844 5.79818 15.0437 5.5138 16.275 5.74818C18.4375 6.16068 20 8.0513 20 10.2513V10.3544C20 11.6638 19.4562 12.9138 18.4969 13.8044L13.0219 18.8888L12.9438 18.9607C12.6875 19.1982 12.35 19.3326 12 19.3326C11.65 19.3326 11.3125 19.2013 11.0563 18.9607Z' fill='%23FF5C32'/%3E%3C/svg%3E");}








.formView .swiper-slide video {width: 100%; height: 100%; object-fit: cover; object-position: center center; position: relative; z-index: 0; pointer-events: none;}
.formView .swiper-slide .video-progress {position: absolute; bottom: 10px; width: 100%; height:2px; display:block;}
.formView .swiper-slide .video-progress span {display:block; vertical-align:top; background:#fff; height:2px;}

.formView .formViewClose {position:absolute; line-height:40px; top:0; right:-74px; color:#fff; font-size: 16px; z-index: 100; width:64px; height:64px; background:rgba(0,0,0,0.4); border-radius:8px; border:1px solid #666666; box-sizing:border-box;}
.formView .formViewClose svg {position:absolute; top:50%; left:50%; margin-top:-12px; margin-left:-12px;}

.formView .productMore span {font-size:16px; font-weight:600;}
.formView .formPagination {position:absolute; line-height:40px; bottom:30px; right:-74px; color:#fff; font-size: 16px; z-index: 100; display:flex; gap:10px; flex-direction: column;}
.formView .formPagination > a {position:relative; width:64px; height:64px; background:rgba(0,0,0,0.4); border-radius:8px; display:block; border:1px solid #666666; box-sizing:border-box;}
.formView .formPagination > a svg {position:absolute; top:50%; left:50%; margin-top:-12px; margin-left:-12px;}
.formView .formViewHeader .formViewMute {position:absolute; line-height:40px; top:10px; right:55px; color:#fff; font-size: 16px; z-index: 100;}
.formView .formViewHeader .formViewPlay {position:absolute; line-height:40px; top:10px; right:10px; color:#fff; font-size: 16px; z-index: 100;}
.formView .formViewHeader .formViewPlay:after {content:'STOP';}
.formView .formViewHeader .formViewPlay.play:after {content:'PLAY';}
.formView .formViewHeader .formViewClose i {position:absolute; left:0; font-size:14px; margin-top:-7px; top:50%}
@keyframes progress {
    0%{
        width:0;
    }
    100%{
        width:100%;
    }
}


.formView .detail {height:64px; background:#fff; display:flex; gap:10px; border-radius:4px; overflow:hidden;}
.formView .detail .thumb {width:64px; height:64px;}
.formView .detail .thumb img {object-fit:cover; width:100%;}
.formView .detail .MK-product-icons {display:none;}
.formView .detail .table-opt {display:none;}
.formView .detail .sns-btns {display:none;}
.formView .detail .f-btns {display:none;}
.formView .detail .txt-wrap {display: flex; flex-direction: column; justify-content: center; gap:4px;}
.formView .detail .txt-wrap .cate {font-size:18px; font-weight:700; color:#111;}
.formView .detail .txt-wrap .ptit {font-size:13px; color:#6B6B6B; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:90%;}



.visual .swiper-wrapper { display:flex; }
.visual .swiper-wrapper .swiper-slide { width:750px !important; }
.visual .swiper-wrapper img { width:750px !important; }
.visual .swiper-button-prev { position:absolute; left:calc(50% - 414px); top:50%; transform:translate(-50%, -25%); z-index:1; transition:background 0.3s; width: 70px; height: 70px; }
.visual .swiper-button-next { position:absolute; right:calc(50% - 414px); top:50%; transform:translate(50%, -25%); z-index:1; transition:background 0.3s; width: 70px; height: 70px; }
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content:"" !important; }

.visual:hover .swiper-button-prev, .visual:hover .swiper-button-next { background: rgba(0,0,0,0.7); }


.boarderUseInfo{
    padding:40px 0;
    margin:0 15px;
}

.boarderUseInfo ol li{
    position:relative;
    padding-left:15px;
    font-size:11px;
    color:#777;
    line-height:18px;
}

.boarderUseInfo ol li span{
    position:absolute;
    top:0;
    left:0;
    font-size:11px;
    line-height:18px;
    color:#111;
}

.boarderUseInfo ul{
    display:flex;
    justify-content:center;
    gap:10px;
    width:100%;
    margin:0 auto;
}

.boarderUseInfo ul li{
    border-radius:50px;
    overflow:hidden;
    transition: box-shadow 0.3s;
    border:1px solid #aaa;
}
.boarderUseInfo ul li:hover {
    box-shadow:0 0 10px rgba(0,0,0,0.1);
}

.boarderUseInfo ul li:nth-child(4n){
    margin-right:0;
}
.boarderUseInfo ul li:nth-child(){}

.boarderUseInfo ul li a{
    display:block;
    line-height:40px;
    text-align:center;
    font-size:14px;
    background:#fff;
    font-weight:500;
    padding:2px 28px;
}

.boarderUseInfo ul li.active a{
    background:#111;
    color:#fff;
    font-weight:700;
}

/* BASIC css end */