@media screen and (max-width: 840px){

  .title1{ font-size: 4.6vw;}
  .wrap-detail .wrap-path{padding-top: 0;padding-bottom: 7vw;}
   .wrap-path .home{ display:none; }
  .wrap-path .home .t{
    font-size: 3.6vw;
    margin-right: 2vw;
}
.wrap-path .home i{
    font-size: 4vw;
}
.wrap-path .depth{
    padding: 2vw 4vw;
    font-size: 3vw;
    margin-right: 1.8vw;
    margin-left:0;
    border-color: #d5e0e5;
}
.wrap-path .depth:hover{ background:#000000; border-color:#000; color:#ffc72c; }


.wrap-detail-info .head-detail-info{ display:none; }
.wrap-detail > .inner-detail{ margin-top:9.45vw; }
.wrap-detail-thumb .item .ico_360{position:absolute;left: 2vw;top: 2vw;width: 12vw;height: 12vw; opacity: 1; z-index:5}
.wrap-detail-info{}
.head-detail-info h1{
    font-size: 7vw;
    line-height: 1.2;
}
.head-detail-info h2{}
.head-detail-info .box-summary{
    margin-top: 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.head-detail-info .box-summary .price{
    font-size: var(--fz-nl);
    line-height: 1;
}
.head-detail-info .box-summary .btn{}

.btn-type2{
    font-size: 3vw;
    padding: 3vw 4vw;
}
.btn-type2 i{margin-top: -1px;}
.btn-type2 i + span{ margin-left:1vw;}
.btn-type2.small{font-size: 2.4vw;padding: 2.4vw 3vw;}

.wrap-detail .detail_lft{
    height: auto;
    max-height: none;
    min-height: auto;
    width: 100%;
    top: 0;
    position: relative;
    min-width: 100%;
}   
.wrap-detail-thumb{
    height: 0;
    padding-bottom: 110%;
}

.detail-pagenate{display: none;}


.swiper-prev.type4,
.swiper-next.type4{width: 7vw;height: 7vw;top: calc(50% - 3.5vw);}
.slider-LIKE1 .swiper-prev.type4,
.slider-LIKE1 .swiper-next.type4{top: calc(50% - 12.5vw);}
.slider-TECHNICAL1 .swiper-prev.type4,
.slider-TECHNICAL1 .swiper-next.type4{top: calc(50% - 12.5vw);}

.swiper-prev.type4{left: 2vw;}
.swiper-next.type4{right: 2vw;}
.swiper-prev.type4:before,
.swiper-next.type4:before{ font-size:4vw; }

.wrap-detail-thumb .swiper-prev.type4,
.wrap-detail-thumb .swiper-next.type4{top:50%;bottom:auto;}
.wrap-detail-thumb .swiper-prev.type4{left: 2vw;}
.wrap-detail-thumb .swiper-next.type4{ right:2vw; }

.wrap-detail .detail_rgh{ margin-top: 8vw; }
.detail-step1{margin-top: 8vw;}
.detail-step1 h2{font-size: 5vw;}
.detail-step1 .cont{margin-top: 3vw;}
.detail-step1 .cont .btn{  }

.wrap-color-select{}
.wrap-color-select h2{margin-top: 0; font-size:5vw;}
.wrap-color-select h2 .inr{ margin-left: -8vw; display: flex; flex-wrap: wrap; }
.wrap-color-select h2 .inr span{ position: relative; margin-left: 4vw; padding-left: 4vw; }
.wrap-color-select h2 span:after{ top:calc(50% - 2.5vw); width:1px; height:5vw; }
.btn_prd_select .inner_select{
    display: flex;
    margin-left: -2vw;
    margin-top: -2vw;
}
.btn_prd_select .item{
    margin-top: 2vw;
    margin-left: 2vw;
    width: 20vw;
    height: 20vw;
    border-radius: 4px;
}
.btn_prd_select .item .img{
    width: 55%;
    height: 55%;
}

.btn-txt1{ font-size: 3vw; }
.btn-txt1 .t + i{margin-left: 2vw;font-size: 4.5vw;line-height: 0;}

.wrap-sizeBanner{border:1px #d7e3e8 solid;border-radius:3px;}
.wrap-sizeBanner > a{
    padding: 0 10vw 0 4vw;
    min-height: 18vw;
}
.wrap-sizeBanner .img{
    min-width: 15vw;
    margin-top: 2vw;
}
.wrap-sizeBanner .t{margin-left: 5vw;font-size: 3.2vw;line-height: 1.4;padding: 2vw 0;}
.wrap-sizeBanner .circle{
    position: absolute;
    right: 2vw;
    bottom: 2vw;
    width: 5vw;
    height: 5vw;
    font-size: 2vw;
}
.wrap-sizeBanner:hover{ border-color:#000; }

.wrap-description h2{
    font-size: 4.7vw;
    margin-bottom: 4vw;
}
.wrap-description .cont{
    font-size: 4vw;
    line-height: 1.5;
}
.wrap-description .cont b{
    font-weight: 600;
}

.wrap-spec h2{font-size: 7vw;}
.wrap-spec .list{  }
.wrap-spec .list >li{  }
.wrap-spec .list .head{padding: 4vw 0 4vw;}
.wrap-spec .list .head .t{font-size: 4.1vw;}
.wrap-spec .list .head  i{font-size: 5vw;}
.wrap-spec .list .cont{margin-top: -1px;font-weight:300;line-height:1.5; font-size:4vw;}
.wrap-spec .list .cont > .inner{ padding:4vw 0 4vw;  }

.head-type1{ margin-bottom: 5vw; display: flex; flex-direction: column;}
.lineupSlide .head-type1{margin-bottom: 5vw;display: flex;flex-direction: row;justify-content: space-between;}
.head-type1 .title{font-size: 5vw;}
.lineupSlide .fz-tit1{font-size: 4.6vw;}
.head-type1 .txt1{font-size: 3.3vw;margin-top: 1vw;}

.wrap-comes-with{display: flex;border-radius: 10px;padding: 4vw 3vw;flex-wrap: wrap; justify-content:center;}
.wrap-comes-with img{}
.wrap-comes-with .item{
    width: 38vw;
    margin: 4vw 2vw;
}
.wrap-comes-with .thumb{
    width: 100%;
    display: inline-flex;
    height: 22vw;
    justify-content: center;
    align-items: center;
}
.wrap-comes-with .thumb img{
    max-width: 100%;
    max-height: 29vw;
}
.wrap-comes-with .cont{
    font-size: 3.4vw;
    color: #000;
    margin-top: 1vw;
}
.wrap-comes-with .cont .t1{
    font-weight: var(--fw-b);
}
.wrap-comes-with .cont .t2{
    font-size: var(--fz-ss);
    margin-top: 1vw;
}

.box-prd-thumb{
    position: relative;
}
.box-prd-thumb .thumb{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background: #f5f8fa;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
.box-prd-thumb a.thumb:hover{background-color: #eaeaea;}
.box-prd-thumb .thumb .bg{
    position: absolute;
    left: calc(50% - 26%);
    top: calc(50% - 26%);
    width: 52%;
    height: 52%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}
.box-prd-thumb .cont{
    margin-top: 4vw;
}
.box-prd-thumb .cont .t1{font-size: 3.4vw;}
.box-prd-thumb .cont .t2{margin-top: 1vw;}

.btn-video .btn{
    width: 10vw;
    height: 10vw;
}
.btn-video.lg .btn{
    width: 12vw;
    height: 12vw;
}



.box-prd-normal .thumb{ border-radius: 4px; }
.box-prd-normal .cont{margin-top: 4vw;}
.box-prd-normal .cont .t1{ font-size: 3.6vw; }
.box-prd-normal .cont .logo{ margin-top: 3vw; }
.box-prd-normal .cont .logo img{max-width:60%;max-height: 8vw;}

.modal > .inner{position: relative;background-color: #fff;width: 94vw;border-radius: 8px;overflow: hidden;margin: 0 auto;}
.modal > .inner:after{content: '';display: block;clear: both;}
.modal > .inner .modal_header {padding: 4vw 4vw;padding-right: 13vw;background-color: #fff;position: relative;line-height: 1.2;}
.modal > .inner .modal_header > h2 {font-size: 5vw;}
.modal > .inner .modal_header .close{position: absolute;right: 4vw;top: 3.7vw;font-size: 6vw;}
.modal > .inner .modal_content { overflow-y: auto; overflow-x: hidden; }
.modal > .inner .modal_content > .inner {padding: 4vw 4vw 7vw;}
.modal > .inner .modal_content > .inner:after { content: ''; display: block; clear: both; }
.modal > .inner .modal_footer { padding: 10px 20px; border-top: 1px solid #e4e6ea; }
.modal > .inner .modal_footer .btn_group { margin-top: 0; }
.modal button.modal_close {position: absolute;top: 12px;right: 0.667em;z-index: 3;/* width: 19px;height: 19px; */overflow: hidden;}
.modal .modal_header button.modal_close { top: 50%; margin-top: -1.333em; color: #202429; }
.modal.lg{width: 90%; max-width: 1210px;}

.tbl_type1 thead th span{
    font-size: 3vw;
    padding: 3vw 2vw;
}
.tbl_type1 thead th:first-child span{
    border-radius: 3px 0 0 3px;
}
.tbl_type1 thead th:last-child span{
    border-radius: 0 3px 3px 0;
}
.tbl_type1 tbody td{ font-size: 3vw; padding: 3vw 2vw; }
.tbl_type1 tbody tr:nth-child(even){ background:#f3f6f8; }

.txt-layout-type1{}
.txt-layout-type1 .area{margin-top: 8vw;display: flex;flex-direction: column;}
.txt-layout-type1 .area .title_layout{min-width: auto;margin-right: 0;width: auto;font-size: 4vw;margin-bottom: 2vw;}
.txt-layout-type1 .area .cont_layout p{ margin-top:3vw; }
.txt-layout-type1 .area .cont_layout .lay2{display:flex;justify-content: space-between; margin-top: 3vw;}
.txt-layout-type1 .area .cont_layout .lay2 > *{ width:45%; }

.wrap-video-detail2{ max-width: 1000px; margin: 0 auto; }
.wrap-video-detail2 .cont{
    margin-top: 5vw;
}
.wrap-video-detail2 .cont .ico{
    width: 6vw;
    min-width: 6vw;
}
.wrap-video-detail2 .cont .ico img{ width:5vw; }
.wrap-video-detail2 .cont .rgh{
    flex-grow: 1;
    margin-left: 2vw;
    font-size: 3vw;
}
.wrap-video-detail2 .cont .t1{font-weight: var(--fw-b);}
.wrap-video-detail2 .cont .t2{margin-top: 1vw;line-height: 1.5;}

.wrap-style-cody{
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
}
.wrap-style-cody .inner-cody{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #f5f8fa;
}
.wrap-style-cody .item{
    position: absolute;
    left: 0;
    top: 0;
}
.wrap-style-cody .item.n1{left: 67%;top: 6%;width: 14%;height: 12%;}
.wrap-style-cody .item.n2{left: 34%;top: 12%;width: 30%;height: 30%;}
.wrap-style-cody .item.n3{left: 19%;top: 46%;width: 16%;height: 15%;}
.wrap-style-cody .item.n4{left: 40%;top: 46%;width: 23%;height: 45%;}

.wrap-style-cody .item .img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.wrap-style-cody .item .bubble{position:absolute;left:0;top:0;display:none;cursor: pointer;}
.wrap-style-cody .item .circle{ width: 2vw;height: 2vw; border: 1vw #ffc72c solid; }
.wrap-style-cody .item.n1 .circle{left: 25%;top: 47%;}
.wrap-style-cody .item.n2 .circle{left: 48%;top: 53%;}
.wrap-style-cody .item.n3 .circle{left: 33%;top: 21%;}
.wrap-style-cody .item.n4 .circle{left: 45%;top: 13%;}
.wrap-style-cody .item .bubble .inner_bubble{
    width: 43vw;
    border-radius:5px;
    z-index: 1;
    font-size: 3vw;
    padding: 2vw;
}

.wrap-style-cody .item .bubble .arr{
 width: 7px;
 height: 7px;
 border-top: 1px solid #000;
 border-right: 1px solid #000;
 transform: rotate(315deg);
 background-color: #fff;
 position: absolute;
 left: 20px;
 top: -4px;
 z-index: 2;
}
.wrap-style-cody .item.n1 .bubble .arr{left: 35vw;top: -1vw;}
.wrap-style-cody .item.n2 .bubble .arr{left: 18.6vw;top: -1vw;}
.wrap-style-cody .item.n3 .bubble .arr{left: 10vw;top: -1vw;}
.wrap-style-cody .item.n4 .bubble .arr{left: 29.6vw;top: -1vw;}

.wrap-style-cody .item.n1 .bubble{left:auto;right: 42vw;top: 8vw; width: auto;}
.wrap-style-cody .item.n2 .bubble{left:auto;right: 30vw;top: 15.9vw; width: auto;}
.wrap-style-cody .item.n3 .bubble{left:auto;left: -5vw;top: 6.5vw; width: auto;}
.wrap-style-cody .item.n4 .bubble{left:auto;right: 38vw;top: 8vw; width: auto; }
.wrap-style-cody .item .bubble .h{font-weight: var(--fw-b);}
.wrap-style-cody .item .bubble .t1{
    font-size: 2.8vw;
    margin-top: 1vw;
    overflow: hidden;
}
.wrap-style-cody .item .bubble .t1 .inr{margin-left: -3vw;display: flex;flex-wrap: wrap;}
.wrap-style-cody .item .bubble .t1 .inr span{position: relative;margin-left: 1.5vw;padding-left: 1.5vw;}
.wrap-style-cody .item .bubble .t1 .inr span:after{position:absolute;left:0;top: calc(50% - 5px);width:1px;height: 10px;background:#aaa;content:"";}
.wrap-style-cody .item .bubble .t2{
    font-size: 2.9vw;
    margin-top: 1vw;
}
.wrap-style-cody .item.hov .circle{
  background: #000000;
}
.wrap-style-cody .item.hov .bubble{ display: block; }


.wrap-models-mobile{ 
    position: fixed;left: 0;bottom: -80%;width: 100%;height: 80%;z-index: 10;background-color: transparent; display: block;
    transition: bottom 400ms cubic-bezier(0.550, 0.055, 0.675, 0.190); /* easeInCubic */
    transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); /* easeInCubic */
}
.wrap-models-mobile .btn_open{position: absolute;left: calc(50% - 6.5vw);top: -6.5vw;width: 13vw;height: 13vw;border-radius: 50%;background-color: #fff;display: flex;align-items: center;justify-content: center;font-size: 5vw;z-index: 1;box-shadow: 0px -3px 12px 0px rgb(0 0 0 / 9%);-webkit-box-shadow: 1px 0px 17px 3px rgb(0 0 0 / 9%);-moz-box-shadow: 0px -3px 12px 0px rgb(0 0 0 / 9%);
    transition: all 400ms cubic-bezier(0.550, 0.055, 0.675, 0.190); 
    transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
}
.wrap-models-mobile .btn_open i{ 
    margin-top:-6vw; 
    transition: all 400ms cubic-bezier(0.550, 0.055, 0.675, 0.190); 
    transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
}

.wrap-models-mobile > .inner-models-mobile{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 15px 15px 0 0;
    box-shadow: 0px -3px 12px 0px rgb(0 0 0 / 9%);
    -webkit-box-shadow: 0px -3px 12px 0px rgb(0 0 0 / 9%);
    -moz-box-shadow: 0px -3px 12px 0px rgb(0 0 0 / 9%);
    overflow-x: hidden;
    overflow-y: auto;
    left: 0;
    bottom: 0;
}
.wrap-models-mobile .scroll-models-mobile{ margin:11vw 4.5vw; }
.wrap-models-mobile .wrap-models .thumb{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vw;
    height: 27vw;
}
.wrap-models-mobile .wrap-models .thumb img{
    max-width: 60%;
    max-height: 22vw;
}


.wrap-models-mobile .wrap-models .name .h_1{
    font-size: 4vw;
    font-weight: var(--fw-b);
    min-height: 11.6vw;
}
.wrap-models .name .t_1{
    font-size: var(--fz-ss);
    text-transform: uppercase;
    margin-top: 1vw;
}
.wrap-models .name .arr{
    margin-top: 1vw;
    position: relative;
}
.wrap-models .name .arr .select-type2{position:absolute;left: calc(50% - 24.5vw);top: 11vw;display:none;}
.wrap-models .name .arr.active .select-type2{ display:block;}

.wrap-models .name .arr > a{
    font-size: 6vw;
    width: 8vw;
    display: inline-block;
    height: 7vw;
}
.wrap-models .name .arr > a > i{
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
    display: inline-flex;
}
.wrap-models .name .arr.active > a > i{
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.wrap-models .info{
    margin-top: 17px;
}

.wrap-models-mobile.active{position: fixed;left: 0;bottom: 0;width: 100%;height: 92%; background-color: transparent;}
.wrap-models-mobile.active .btn_open{top: -7.5vw;}
.wrap-models-mobile.active .btn_open i{m;margin-top: 0;-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}    

.select-type2{width: 47vw; border-radius: 3vw;}
.select-type2 .inner-select-type2{
    max-height: 63vw;
    margin: 3vw 2vw;
    overflow: hidden;
    overflow-y: auto;
}
.select-type2 .lst-select-type2{
    margin: 2vw 2vw 1vw;
}
.select-type2 .lst-select-type2 >li{
    text-align: left;
    margin-bottom: 1.7vw;
}

.select-type2 .lst-select-type2 >li > a i{
    font-size:3.7vw;
}
.select-type2 .lst-select-type2 >li > a .t{
    flex-grow: 1;
    margin-left: 0.5vw;
}

    .lst-type1{}
.lst-type1 li{border-bottom: 1px #e0e8ed solid;padding: 3.5vw 0;}
.lst-type1 li:last-child{ border-bottom: 0; }
.lst-type1 li p.h_1{
    font-size: 2.5vw;
}
.lst-type1 li p.t_1{
    margin-top: 6px;
    font-weight: var(--fw-b);
} 

.wrap-help-type1{ display: inline-flex; position: relative; }
.wrap-help-type1 .ico{}
.wrap-help-type1 .box_help{}
.wrap-help-type1 .box_help:after{}
.wrap-help-type1 .box_help{position: absolute;left: 0px;top: 34px;color: #000;background: #fff;border: 1px #000 solid;border-radius: 5px;padding: 10px 15px;width: 280px;font-size: 13px;font-weight: 600;box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.1);-webkit-box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.1);-moz-box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.1);opacity: 0;pointer-events: none;user-select: none;}
.wrap-help-type1 .ico:hover + .box_help{ opacity:1; }
.wrap-help-type1 .box_help .arr{
    width: 7px;
    height: 7px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(315deg);
    background-color: #fff;
    position: absolute;
    left: 8px;
    top: -5px;
}

.btn-more2{
    display: inline-flex;
    align-items: center;
    border: 1px #d5e0e5 solid;
    display: flex;
    border-radius: 1vw;
    padding: 2.7vw 2vw;
    justify-content: flex-end;
}
.btn-more2 > i{
    width: 5vw;
    height: 5vw;
    font-size: 2.3vw;
    margin-left: 6vw;
}



}