@charset "utf-8";
.product .breadcrumb{ margin-bottom:0; }
/*顏色*/
.product .color li a:before{ content:''; display:inline-block; border:solid 1px transparent; width:16px; height:16px; border-radius:50%; margin:0 6px;}
.product .color li.white a:before ,.products .color li.white a:before{ border:solid 1px #929BA4; } /*白色*/
.product .color li.black a:before ,.products .color li.black a:before{ background:#221e1f; } /*黑色*/
.product .color li.blue a:before ,.products .color li.blue a:before{ background:#5050ff; } /*藍色*/
.product .color li.green a:before ,.products .color li.green a:before{ background:#87ba71; } /*綠色*/
.product .color li.yellow a:before ,.products .color li.yellow a:before{ background:#FFD700; } /*黃色*/
.product .color li.orange a:before ,.products .color li.orange a:before{ background:#f4a158; } /*橘色*/
.product .color li.pink a:before ,.products .color li.pink a:before{ background:#FFC0CB; } /*粉色*/
.product .color li.red a:before ,.products .color li.red a:before{ background:#e1603d; } /*紅色*/
.product .color li.purple a:before ,.products .color li.purple a:before{ background:#8e78bf; } /*紫色*/
.product .color li.other a:before ,.products .color li.other a:before{ border:solid 1px #929BA4; background:linear-gradient(315deg, #fff  0%, #fff 26%, #929ba4 27%, #929ba4 34%, #fff 35%, #FFF 46%, #929ba4 47%, #929ba4 53%, #fff 54%, #fff 65%, #929ba4 66%, #929ba4 73%, #fff 74%, #fff 100%); } /*其他*/
.product .top-banner{ position:relative; width:100%; height:195px; display:flex; align-items:center; justify-content:flex-end;} 
.product .top-banner .wp{ position:absolute; top:0; left:0; width:100%; height:100%; }
.product .top-banner .wp{ background-image:url('../product/images/top-banner-all.jpg'); background-size:cover; background-position:center center; }
.product .top-banner .wp:after{ content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.2);}
.product .top-banner .title{ position:relative; padding:0 20px; width:50%; height:100%; display:flex; flex-direction:column; justify-content:center; color:#fff; } 
.product .top-banner h1{ margin-bottom:.2em;}
.product .top-banner a.description-open{ transition:all .6s cubic-bezier(.25,.1,.25,1); }
.product .top-banner a.description-open:hover{ color:#414d61; }
.product .top-banner .title .description{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; background:#414d61; padding:30px 60px; text-align:left; pointer-events:none; opacity:0; transition:opacity .6s cubic-bezier(.25,.1,.25,1);}
.product .top-banner .title .description.open{ opacity:1; pointer-events:auto; }
.product .top-banner .title .description a{position:absolute; top:30px; left:20px;  font-size:1.6rem; width:1em; height:1em; opacity:.7; transition:all .6s; }
.product .top-banner .title .description a:hover{ opacity:1; }
.product .top-banner .title .description a.close:before,.product .top-banner .title .description a.close:after{ content:''; display:block; width:100%; height:1px; background:#fff; position:absolute; top:50%; left:50%;}
.product .top-banner .title .description a.close:before{ transform:translate(-50%,-50%) rotate(45deg); }
.product .top-banner .title .description a.close:after{ transform:translate(-50%,-50%) rotate(-45deg); }
.product .top-banner .title .description h3{ margin-bottom:.4em; }
.product .main{ display:flex; }
.product aside{ flex:1 1 220px; padding:40px 20px 40px 0; border-right:solid 1px #707070;} 
.product aside h3{ position:relative; font-size:1.8rem; border-top:solid 1px #929BA4; padding:.8em 1.5em; cursor:pointer; }
.product aside h3:after{ position:absolute; right:.4em; content:'\f054'; font-weight:600; color:#929BA4; }
.product aside h3.ui-state-active{  }
.product aside h3.ui-state-active:after{ content:'\f078'; }
.product aside ul ,.product aside .btn-box{ padding:10px 0;}
.product aside ul li a{ color:#929BA4; padding:.5em 0; width:100%; display:flex; justify-content:center; align-items:center;} 
.product aside ul li a:hover{ color:#414d61;}
.product aside form{ padding:25px 0;  border-top:solid 1px #929BA4;}
.product aside form li{ width:80px; text-align:left; margin:0 auto .4em;  }
.product aside form li:nth-last-of-type(1){ margin-bottom:0; }
.product aside .radio-style li{ position:relative; }
.product aside .radio-style li label{ font-size:1.4rem; color:#747A7F;}
.product aside .radio-style li input[type="radio"]{ position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.product aside .radio-style li input[type="radio"] + label:before{ content:'\f111'; padding-right:.35em;}
.product aside .radio-style li input[type="radio"]:checked + label:before{ content:'\f058'; font-weight:900; color:#E1603D;}
.product aside .select-style{ border:none; }
.product aside .select-style:after{ display:none; }
.product aside .select-style li{ position:relative; outline:0; border-radius:3px; border:solid 1px #929BA4; background:#fff; color:#747A7F; /*width:100%;*/}
.product aside .select-style li:after{ position:absolute; right:3px; top:-2px; content:'\f0dd'; padding:0; pointer-events:none; font-weight:900; font-size:1.3rem;} 
.product aside .select-style li select{ font-size:1.4rem; position:relative; background:transparent; box-sizing:border-box; border:0; padding:.2em 1em .2em .4em; width:100%; outline:none; color:#747A7F;}
.product aside .select-style li select option{ font-size:1.4rem; border:none; outline:none; padding:.4rem; }
.product aside .select-style li select option:disabled{ background:#ccc; color:#fff;}
.product aside .select-style li::-ms-expand{ display:none; }
.product aside .btn{ font-size:1.4rem; margin:0; padding:.6em 1.3em;}
.product .collection{ flex:2 2 960px; flex-direction:column; padding:20px; } 
.product .collection .select-box{ display:flex; justify-content:flex-end; align-items:center;}
.product .collection .select-box label{ margin-right:1em; font-size:1.6rem; color:#747A7F;} 
.product .select-style{ position:relative; display:inline-block; outline:0; border-radius:3px; background:#fff; color:#747A7F; border:solid 1px #929BA4; font-size:1.6rem;  } 
.product .select-style:after{ content:'\f0d7'; font-weight:600; position:absolute; right:0; top:50%; transform:translateY(-50%); display:inline-block; padding:0 .4em; pointer-events:none;}
.product .select-style select{ position:relative; background:transparent; box-sizing:border-box; border:0; padding:.4em 1.5em .4em .6em; outline:0; color:#747A7F; font-size:1.6rem; } 
.product .select-style select option{ font-size:1.6rem; border:none; outline:0; }
.product .collections{ display:flex; flex-wrap:wrap; padding-left:20px; margin-bottom:60px;}
.product .collections a ,.products .collections a{ padding:0 10% 20px; }
.product .collections .wp{ position:relative; width:100%; }
.product .collections .wp img ,.products .collections .wp img{width:100%;}
.product .collections .text_box p ,.products .collections .text_box p{ color:#747A7F; }
.product .collections .text_box p:nth-of-type(2) span ,.products .collections .text_box p:nth-of-type(2) span{ border-left:solid 1px #747A7F; padding:0 .6em; }
.product .collections .text_box p:nth-of-type(2) span:nth-of-type(1) ,.products .collections .text_box p:nth-of-type(2) span:nth-of-type(1){ border:none; }
.product .collections .text_box p.price ,.products .collections .text_box p.price{ margin-top:.6em; }
.product .collections .text_box p.price:after ,.products .collections .text_box p.price:after{ content:'元'; padding-left:.2em;}




.products .collections{ display:flex; flex-wrap:wrap; }
.products .collections li{ width:calc(100% / 3); margin:0 0 30px; text-align:center; }
.products .collections .wp{ position:relative; width:180px; margin:0 auto; }
.products .related-product .collections{ display:block; }
.products .related-product .collections a{ padding:0 20px; }
.products .main{ display:block; padding:0;}
.products .product-short-description{ color:#221E1F; margin:2.5em 0;}
.products .product-short-description li{ display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:.4em; } 
.products .product-short-description .th:after{ content:'│'; color:#929BA4; padding:0 .4em 0 .6em;}
.products .color{ display:flex; }
.products .top-container{ display:flex; width:calc(100% - 200px); margin:50px 0 0 200px; }
.products .slider-container{ flex:0 0 500px; position:relative; z-index:0; padding:60px 0; width:100%; max-width:1300px; margin:0 auto;} 
.products .slider-container .slider-for{ width:500px;  overflow:hidden;}
.products .slider-container .slider-nav{ position:absolute; top:0; left:-100px; width:80px; height:500px; overflow:hidden;}
.products .slider-container .slider-nav img{ width:80px;  margin:10px 0; border:1px solid #e1e1e1;}
.products .slider-container .slider-nav img.slick-current{ border-color:#414d61; }
.products .info-container{ flex:1 2 300px; padding:50px 0 0 50px; text-align:left;}
.products .info-container h2{ font-size:2.4rem; padding:.6em 0;}
.products .info-container .btn-box .btn{ min-width:4em; margin-right:.5em; }
.products .info-container .btn-box .btn:nth-last-of-type(1){ margin-right:0; }
.products .tabs{ background:url(../product/images/tabs-bg-all.jpg) center center fixed; background-size:cover; padding-bottom:20px; }
.products .tabs .tabs-nav{ display:flex; color:#fff; }
.products .tabs .tabs-nav li{ transition:background .6s; }
.products .tabs .tabs-nav li:hover{ color:#414D61; background:#aeb5bb;}
.products .tabs .tabs-nav li.ui-tabs-active{ background:#747A7F; }
.products .tabs .tabs-nav li.ui-tabs-active:hover{ color:inherit; }
.products .tabs .tabs-nav li.ui-tabs-active a:hover{ cursor:default; }
.products .tabs .tabs-nav a{ padding:.8em 3em;; min-width:4em; box-sizing:content-box; }
.products .tabs .tabs-box{ text-align:left; width:60%; padding:20px 30px; margin:20px 0 0; background:#fff; font-size:1.6rem;}
.products .tabs .tabs-box > p{ margin-bottom:1.4em; }
.products .related-product{ padding:30px 0; }
.products .related-product h2{ margin-bottom:40px 0; }
.products .related-product .collections{ position:relative; padding:0 60px; }
.products .related-product .collections .slick-list{ overflow:hidden; }
.products .related-product .collections button{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; font-size:0; color:#929BA4; background:transparent; cursor:pointer; transition:color .6s;}
.products .related-product .collections button:before{ font-size:4rem; font-weight:900; }
.products .related-product .collections button.slick-prev{ left:30px; }
.products .related-product .collections button.slick-next{ right:30px; }
.products .related-product .collections button.slick-prev:before{ content:'\f053';}
.products .related-product .collections button.slick-next:before{ content:'\f054'; }


.products .color li{ margin:0 6px; }
.products .color li a{ width:16px; height:16px; border-radius:50%; border:solid 1px #929BA4;}
.products .color li.other a{background:linear-gradient(315deg, #fff  0%, #fff 26%, #929ba4 27%, #929ba4 34%, #fff 35%, #FFF 46%, #929ba4 47%, #929ba4 53%, #fff 54%, #fff 65%, #929ba4 66%, #929ba4 73%, #fff 74%, #fff 100%); } /*其他*/



/* desktops,iPad pro */
@media (max-width:1199.98px){
.product .top-banner{}
.product .collections{ margin-top:30px; padding-left:0;}
.product .collections li{ width:calc(100% / 3); }

.products .top-container{ width:100%; margin:0; }
.products .slider-container{ flex:0 0 45%; padding:0px; }
.products .slider-container .slider-for{ height:520px;  }
.products .slider-container .slider-nav{ display:none; }
.products .slider-container .slick-dots{ position:absolute; bottom:0; width:100%; display:flex; justify-content:center; } 
.products .slider-container .slick-dots button{ font-size:0; width:12px; height:12px; background:transparent; border:2px solid #929ba4; border-radius:50%; margin:12px 8px;} 
.products .slider-container .slick-dots .slick-active button{ background:#929ba4; }
.products .info-container{ flex:1 2 65%; }
.products .info-container .btn-box .btn{ padding:.6em 1.3em; }


}
/* tablets,iPad */
@media (max-width:991.98px){
.product .collections li{ width:calc(100% / 2); margin:30px 0; }

.products .collections li{ width:calc(100%); margin:30px 0; }
.products .slider-container .slider-for{ width:360px; height:400px;  }
.products .info-container .btn-box .btn{ min-width:auto; }
.products .tabs .tabs-box{ width:70%; }
.products .collections li{ width:calc(100% / 2); }



}
/* phone */
@media (max-width:767.98px){
.product .top-banner h1{ font-size:3rem; }
.product .top-banner .title{ width:100%; }
.product .collection{ padding:20px 0; }
.product .collection .filter-container{ display:flex; justify-content:space-between; align-items:center; width:100%; padding:10px 0; }
.product .collection .filterToggle:before{ content:'\f0b0'; font-weight:600; color:#414d61; font-size:2rem;}
.product .collection .filterToggle{ border-right:solid 1px #ccc; padding:5px 20px 5px 0; }
.product .collection .filter-container.fixed{ position:fixed; padding:10px 40px; z-index:90; background:#929ba4; left:0; } 
.product .collection .filter-container.fixed .filterToggle:before{ color:#fff; }
.product .collection .filter-container.fixed .filterToggle{ border-color:#747A7F; }
.product aside{ z-index:99; background:#fff; position:fixed; top:0; width:100%; height:100%; left:0; border:none; padding:80px 40px 40px; overflow:auto; transition:all .6s; transform:translateX(-100%);}
.product aside.open{ transform:translateX(0%); }
.product aside ul li a{ padding:1em 0; }
.product aside a.close{position:absolute; top:30px; left:40px; font-size:1.6rem; width:1em; height:1em; opacity:.7; transition:all .6s; }
.product aside a.close:before, .product aside a.close:after {content:''; display:block; width:100%; height:1px; background:#000; position:absolute; top:50%; left:50%; }
.product aside a.close:before{transform:translate(-50%,-50%) rotate(45deg); }
.product aside a.close:after{transform: translate(-50%,-50%) rotate(-45deg); }
.product aside form{ padding:35px 0; }
.product aside ul ,.product aside .btn-box{ padding:15px 0; }
.product aside form li{ margin-bottom:.8em; width:90px; }
.product aside .radio-style li label,.product aside .select-style li select,.product aside .btn{ font-size:1.6rem; }

.product .collections li{ width:100%; }
.product .collections li a{ padding:0 15% 20px; }

.products .top-container{ flex-direction:column; }
.products .slider-container .slider-for{ width:90vw; height:100vw; }
.products .info-container{ padding:0; }
.products .info-container .btn-box{ width:75%; margin:2.5em auto; }
.products .info-container .btn-box .btn{ width:100%; box-sizing:border-box; margin:.5em auto; }
.products .tabs .tabs-nav li.ui-tabs-active{ background:#414d61; }
.products .tabs .tabs-nav a{ padding:.8em 1.5em;  }
.products .tabs .tabs-box{ width:100%;  }




}
/* PC */
@media (min-width:1200px){
.product .main{ padding:0 40px;}
.product .collections li{ width:calc(100% / 3 - 40px); border:solid 1px transparent; margin:20px 0; }
.product .collections li:hover{ border:solid 1px #eee; }
.product .collections li:nth-of-type(3n+2){ margin-left:60px; margin-right:60px; }

.products .tabs{ min-height:600px;}
.products .related-product .collections button:hover{ color:#414D61; }


}