@charset "utf-8";

/*1024px*/
@media (min-width:1024px) {

/* ------ 公用样式 ------ */
.pc{display:block;}
.wap{display:none;}
.wrap{max-width:1440px; margin:0 auto;}
.flex{display: flex; align-items: center; flex-wrap: wrap;}



/* --- 分页 --- */
.page-showpage{margin-top:50px; margin-bottom:50px; justify-content: center;}
.page-showpage a{display:inline-block; border:1px solid #efefef; padding:7px 15px; border-radius:4px; margin-left:5px; margin-right:5px;}
.page-showpage a.now{ background:#333; color:#fff; border:1px solid #333; }



/* --- top --- */
.page-top{background: #ECECEC; height: 30px; text-align: center; line-height: 30px; }
.page-top .swiper-slide{cursor: pointer; color: #999;}



/* --- header --- */
.page-header{background: #fff; position: relative; z-index: 300;}
.page-header .box{padding: 18px 30px; }

/* inner box */
.page-header .inner-box{width: 50%;}

/* roll */
.page-header.roll{position:fixed; left:0; top:0; width:100%; z-index:300; background:#fff;}



/* --- link --- */
.page-link{margin-left: auto;}

/* li */
.page-link li {margin-left: 30px; position: relative;}
.page-link li .show{ height: 50px; line-height: 50px;}

/* hide */
.page-link li .hide{display: none; box-shadow: 0 3px 8px #ccc; }

/* hover */
.page-link li:hover .hide{display: block; position: absolute; right: 0; top: 50px; background: #fff; z-index: 300; width: 200px;} 
.page-link li:hover .hide a{display: block; height: 40px; line-height: 40px; padding-left: 15px; border-bottom: 1px solid #efefef;}






/* --- logo --- */
.page-logo{margin-right: 65px;}
.page-logo img{width: 115px;}



/* --- search --- */
.page-search{width: 70%; background: #F8F8F8; height: 40px; position: relative;}

/* show */
.page-search .show{height: 100%;}
.page-search .show input{width: 90%; height: 100%; background: none; border: none; padding-left: 16px;}
.page-search .show button{width: 10%; height: 100%; background: none; border: none; cursor: pointer;}
.page-search .show .iconfont{font-size: 22px; color: #999;}

/* hide */
.page-search .hide{position: absolute; left: 0; top: 40px; width: 100%; background: #fff; padding: 16px; z-index: 300; box-shadow: 0 3px 8px #ccc; display: none;} 
.page-search .hide h3{font-size: 14px; margin-bottom: 16px; color: #999;}
.page-search .hide ul li{line-height: 35px}
.page-search .hide ul li a{display: block; padding-left: 15px; color: #494949;}
.page-search .hide ul li a:hover{background: #F8F8F8;}



/* --- nav --- */
.page-nav{border-top: 1px solid #ececec; border-bottom: 1px solid #ececec;  height: 56px; position: relative; padding: 0 30px;}

/* li */
.page-nav li{ padding-right: 30px;}

/* show */
.page-nav li .show{ line-height: 56px; cursor: pointer;  color: #888; transition: all .3s;font-size: 14px; text-align: center; text-transform:uppercase;}

/* hide */
.page-nav li .hide{position: absolute; left: 0; top: 55px; width: 100%; opacity: 0; pointer-events: none; z-index:0 ; visibility: hidden;}
.page-nav li .hide .box{display: flex; justify-content: center; padding: 30px 0; position: relative; background: #fff; }

/* subType */
.page-nav li .hide .subType{margin-right: 100px; display: flex;}
.page-nav li .hide .subType dl{margin-right: 80px;}
.page-nav li .hide .subType dl dt{font-size: 14px; color: #888; margin-bottom: 10px;}
.page-nav li .hide .subType dl dd em{display: block; line-height:28px;}

/* photo */
.page-nav li .hide .photo{margin-top: 10px;}
.page-nav li .hide .photo .pic{margin-bottom: 10px; width: 204px; height: 204px;}
.page-nav li .hide .photo .title a::after{content: "\e65f"; font-family: iconfont; }

/* hover */
.page-nav li:hover .show{color: #666;}
.page-nav li:hover .hide{pointer-events: auto; visibility: visible; opacity: 1; transition: opacity 100ms linear 20ms;}



/* --- mask --- */
.page-mask{ left: 0; width: 100%; height: 100%; position: fixed; z-index: 0; background-color:rgba(0,0,0,0.5); opacity: 0; pointer-events: none; }
.page-mask.show{opacity: 1; transition: opacity 100ms linear 20ms;  z-index: 200;}



/* --- ensure --- */
.page-ensure {border-top: 1px solid #efefef; border-bottom: 1px solid #efefef; padding: 30px 0;}
.page-ensure .item{text-align: center; width: 33.333%;}
.page-ensure .item h3{font-size: 18px; margin-bottom: 5px;}
.page-ensure .item .text{color: #999; font-size: 16px;}



/* --- path --- */
.page-path{height: 43px; padding: 0 30px; line-height: 43px;}
.page-path .home{color: #999;}



/* --- footer --- */
.page-footer{padding: 60px 0 80px 0;}
.page-footer .wrap{display:flex;}

/* sitemap */
.page-footer .sitemap{ display: flex;}
.page-footer .sitemap dl{margin-right: 100px;}
.page-footer .sitemap dt{margin-bottom: 10px;}
.page-footer .sitemap dd em{display: block; line-height: 165%;}
 
/* contact */
.page-footer .contact{margin-left: auto;}
.page-footer .contact .text{margin-bottom: 10px; color: #999;}
.page-footer .contact .input{display: flex; align-items: center; margin-bottom: 10px;}
.page-footer .contact .input input{width: 90%; background: #F8F8F8; border: none; height: 53px; padding-left: 16px;}
.page-footer .contact .input button{width: 10%; height: 53px; border: none; background:#494948; color: #fff; cursor: pointer;}
 
/* follow */
.page-footer .follow .iconfont{font-size: 25px; margin-left: 5px;} 



/* --- copyright --- */
.page-copyright{ background: #ececec; height: 30px; padding: 0 30px; font-size: 12px; line-height: 30px; color: #999;}
.page-copyright em{margin-right: 20px;}



/* --- color --- */
.page-color {width: 20px; height: 20px; border: 1px solid #ddd; padding: 1px; border-radius: 100%; margin-right: 8px;}
.page-color:hover{border: 1px solid #333; }
.page-color.active{border: 1px solid #333; }
.page-color em{display: block; width: 16px; height: 16px; border-radius: 100%;}

.page-color .blue{background: #6B93AD;}
.page-color .green{background: #AAAD00;}
.page-color .gray{background: #656468;}
.page-color .multicolour{ background: url(../images/multicolour.png) no-repeat; background-size: cover;}
.page-color .opal{ background: url(../images/opal.png) no-repeat; background-size: cover;}
.page-color .red{ background: #B50018}
.page-color .white{ background: #fff}



/* --- recommended --- */

/* column */
.page-recommended .column h2{font-size: 55px; font-weight: lighter; padding: 40px 0;}

/* content */
.page-recommended .content{display: flex;}

/* swiper */
.page-recommended .content .swiper-container{width: 92%;}
.page-recommended .content .box .pic{margin-bottom: 8px;}
.page-recommended .content .box .name{margin-bottom: 8px; line-height: 125%; min-height: 20px;}

/* swiper - color */
.page-recommended .content .box .color{margin-top: 10px;}
.page-recommended .content .box .color span{margin-right: 5px;}

/* arrow */
.page-recommended .content .arrow{width: 4%; cursor: pointer; margin-top: 100px;}
.page-recommended .content .arrow .iconfont{font-size: 36px;}
.page-recommended .content .arrow-next{text-align: right;} 



/* --- input --- */
.page-input{position: relative;}

/* input */
.page-input input{width: 100%; height: 53px; border: none; border-bottom: 2px solid #efefef; transition: all .3s; position: relative; z-index: 30; background: none;}
.page-input input:focus{ border-bottom: 2px solid #494949;}

/* label */
.page-input label{position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; transition: all .3s; z-index: 0;}
.page-input label.top{height: 20px;  top: -10px;}



/* --- list --- */
.page-list .item{border-bottom: 1px solid #efefef; padding: 30px 0;}
.page-list .item .title{font-size: 35px; font-weight: 200; margin-bottom: 10px;}
.page-list .item .text strong{display: block; margin-bottom: 20px;}
.page-list .item .text p{line-height: 180%; margin-bottom: 20px; font-size: 14px; color: #666;}
.page-list .item ul{margin-left: 15px; margin-bottom: 30px;}
.page-list .item ul li{list-style-type: disc; line-height: 220%;}



/* --- related --- */
.page-related{background: #f9f9f9; padding: 20px; position: sticky; top:200px;}
.page-related .title{font-weight: bolder; margin-bottom: 10px; font-size: 14px;}
.page-related li{margin-bottom: 10px;}
.page-related li a{border-bottom: 1px solid #ccc;}









/* ------ Home ------ */

/* --- banner --- */
.home-banner {height: 600px;}
.home-banner .swiper-container{height: 100%;}
.home-banner .swiper-wrapper{height: 100%;}
.home-banner .swiper-slide{height: 100%;}
.home-banner .swiper-slide .box{height: 100%; padding: 0 5%}
.home-banner .swiper-slide .box .title{font-size: 55px; font-weight: lighter; margin-bottom: 16px;}
.home-banner .swiper-slide .box a{display: block; width: 100%; }
.home-banner .swiper-slide .box a:hover{color: #333;}
.home-banner .swiper-pagination-bullet-active{background: #333;}



/* --- service --- */
.home-service{ margin-top: 80px;}
.home-service .item{display: flex; align-items: center; margin-bottom: 32px;}

/* content */
.home-service .item .content{width:38%; padding: 0 32px;}
.home-service .item .content h2{font-size: 55px; font-weight: lighter; margin-bottom: 10px;}
.home-service .item .content h2 a{color: #333;}
.home-service .item .content .text{font-size: 15px; margin-bottom: 10px; color: #999;}
.home-service .item .content .more a::after{content: "\e65f"; font-family: iconfont; margin-left: 10px;}

/* pic */
.home-service .item .pic{width: 60%;}

/* item - a */
.home-service .item-a .content{order: 1;}
.home-service .item-a .pic{order: 2;}

/* item - b */
.home-service .item-b .content{order: 2; text-align: right;}
.home-service .item-b .pic{order: 1;}







/* ------ inner ------ */
.inner{display: flex;}
.inner-header.roll{position:relative;}


/* --- column --- */
.inner-column h2{font-size: 55px; font-weight: lighter; margin-bottom: 20px;}
.inner-column .text{font-size: 14px; color: #666; line-height: 180%;}



/* --- category --- */
.inner-category{}

/* photo */
.inner-category .photo{width: 50%;}
.inner-category .photo img{width: 100%;}

/* content */
.inner-category .content{width: 50%; padding: 0 12%;}
.inner-category .content h2{font-size: 55px; font-weight: lighter; margin-bottom: 16px;}
.inner-category .content .text{line-height: 150%; color: #999;}


/* --- side --- */
.inner-side{width: 10%; padding:20px 30px;}



/* --- right --- */
.inner-right{width: 90%; margin-top: 15px;}



/* --- type --- */
.inner-type{margin-bottom: 32px; border-bottom: 1px solid #efefef; padding-bottom: 20px;}

/* column */
.inner-type .column{ margin-bottom: 20px; cursor: pointer;}
.inner-type .column h3{font-size: 14px;}
.inner-type .column .icon{margin-left: auto; transition: all .3s;}
.inner-type .column .icon.close{transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);-o-transform: rotate(180deg)}

/* column */
.inner-type .list li{display: flex; align-items: center; margin-bottom: 16px; cursor: pointer; color: #666;}
.inner-type .list li .icon{margin-right: 8px; font-size: 18px;}
.inner-type .list li .icon::before{content: "\e608"; font-family: iconfont; color: #ccc;}
.inner-type .list li.active .icon::before{content: "\e609"; font-family: iconfont; color: #333;}



/* --- sort --- */
.inner-sort{ position: relative; margin-bottom: 20px; cursor: pointer; width: 200px;}

/* hide */
.inner-sort .hide{position: absolute; left: 0; top: 30px; background: #fff; padding: 20px; box-shadow: 0 3px 8px #ccc; display: none; z-index: 200;}
.inner-sort .hide li{margin-bottom:2px; border-bottom: 1px solid #fff;}
.inner-sort .hide li:hover{border-bottom: 1px solid #ccc;}



/* --- product --- */
.inner-product{ overflow: hidden;}
.inner-product .item{width: 20%; padding-right: 20px; padding-bottom: 32px;}

/* pic */
.inner-product .item .pic{position: relative; margin-bottom: 8px;}
.inner-product .item .pic .tag{position: absolute; left: 0; top: 0; background: #ECECEC; height: 30px; line-height: 30px; padding: 0 20px;}

/* name */
.inner-product .item .name{height: 20px; overflow: hidden; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 5px;}

/* price */
.inner-product .item .price{margin-bottom: 8px;}

/* color */
.inner-product .item .color{display: flex; align-items: center;}



/* --- details --- */
.details-info{padding: 20px 30px; display: flex; margin-bottom: 30px;}

/* photo */
.details-photo{width: 60%;}
.details-photo .big{margin-bottom: 20px; position: relative;}

/* arrow */
.details-photo .big .arrow{position: absolute; top: 45%; z-index: 200; background: #fff; width: 60px; height: 60px; border-radius: 100px; text-align: center; line-height: 60px; font-size: 25px; font-weight: bolder; cursor: pointer; background-color:rgba(255,255,255,0.6);}
.details-photo .big .arrow-next{right: 5%;}
.details-photo .big .arrow-prev{left: 5%;}

/* content */
.details-content{width: 38%; margin-left: auto;}

/* title */
.details-content .goods-title{margin-bottom: 10px;}
.details-content .goods-title h1{font-size: 40px; font-weight: lighter;}

/* price */
.details-content .goods-price{ border-bottom: 1px solid #efefef; padding-bottom: 15px; margin-bottom: 20px;}
.details-content .goods-price .price{font-size: 35px; }
.details-content .goods-price .tag{background: #f5f5f5; height: 30px; padding: 0 10px; line-height: 30px; margin-left: 15px; color: #999;}

/* color */
.details-content .goods-color {margin-bottom: 30px;}
.details-content .goods-color .column{margin-bottom: 20px;}
.details-content .goods-color .column .text{margin-left: 10px;}
.details-content .goods-color .list li{width: 69px; height: 69px; display: flex; align-items: center; border: 2px solid #efefef; margin-right: 10px;}
.details-content .goods-color .list li.now{ border: 2px solid #333;}
.details-content .goods-color .list li:hover{ border: 2px solid #333;}

/* shield */
.details-content .goods-shield{background: url(../images/dun.svg) no-repeat 0 center; background-size: 20px; padding-left: 30px; color: #666; }

/* info */
.details-content .goods-info{border-top: 1px solid #efefef; margin-top: 30px; padding-top: 30px;}
.details-content .goods-info .hd{margin-bottom: 30px;}
.details-content .goods-info .hd li{margin-right: 30px; border-bottom: 2px solid #fff; padding-bottom: 5px; cursor: pointer; color: #666;}
.details-content .goods-info .hd li.on{ border-bottom: 2px solid #333; color: #333; font-weight: bolder;}
.details-content .goods-info .bd .box {color: #666}
.details-content .goods-info .bd .box p{margin-bottom: 15px;}
.details-content .goods-info .bd .box ul{margin-left: 15px; margin-bottom: 20px;}
.details-content .goods-info .bd .box li{list-style-type: disc; line-height: 220%;}

/* other */
.details-content .goods-other .help a{text-decoration: underline;}
.details-content .goods-other .follow{margin-left: auto;}
.details-content .goods-other .follow .icon{font-size: 25px;}
.details-content .goods-other .follow a:hover .icon{color: #333;}

/* video */
.details-video{ padding: 0 15px;}

/* photo */
.details-video .photo .item{width: 50%; padding: 0 15px; margin-bottom: 30px;}
.details-video .photo .item img{width: 100%;}
.details-video .photo .item .pic{margin-bottom: 20px;}
.details-video .photo .item .title{font-size: 18px;}

/* video */
.details-video .video video{width: 100%;}

/* recommended */
.details-recommended{padding: 50px 0; border-bottom: 1px solid #efefef; padding-bottom: 100px;}




/* --- contact --- */
.inner-contact{padding: 50px 0; border-bottom: 1px solid #efefef;}

/* column */
.inner-contact .inner-column{margin-bottom: 30px;}

/* box */
.inner-contact .box{display: flex;}
.inner-contact .box .item{width: 50%;}

/* column */
.inner-contact .column h3{font-size: 40px; margin-bottom: 30px; font-weight: lighter; }

/* content */
.inner-contact .content p{line-height: 200%; padding-right: 30px; font-size: 14px;}
.inner-contact .content ul {margin-left: 15px; margin-bottom: 20px;}
.inner-contact .content ul li{list-style-type: disc; line-height: 220%;}
.inner-contact .content a{border-bottom: 1px solid #ccc;}




/* --- register --- */
.inner-register{padding: 50px 0; display: flex;}

/* left */
.inner-register .left{width: 50%; padding: 0 150px;}

/* right */
.inner-register .right{width: 50%; text-align: center;}

/* register */
.inner-register .register{width: 80%; margin: 0 auto;}

/* list */
.inner-register .register-list{margin-top: 80px;}
.inner-register .register-list .item{margin-bottom: 25px; position: relative;}
.inner-register .register-list .item .select select{width: 100%; height: 53px; border: none; background: #f8f8f8; padding-left: 15px; border-bottom: 2px solid #efefef;}
.inner-register .register-list .item .select select:hover{border-bottom: 2px solid #494949;}

/* tips */
.inner-register .tips{margin-bottom: 30px;}
.inner-register .tips li{margin-bottom: 10px;}
.inner-register .tips li input{margin-right: 10px;}
.inner-register .tips li p{width: 90%;}

/* dep */
.inner-register .dep p{margin-bottom: 20px; line-height: 150%; color: #666;} 

/* button */
.inner-register .button {text-align: right;}
.inner-register .button input{padding: 7px 25px; border: 1px solid #333; background: none; cursor: pointer; transition: all .3s;}
.inner-register .button input:hover{background: #494949; color: #fff;}




/* --- recycling --- */
.inner-recycling {padding: 50px 0; display: flex;}

/* left */
.inner-recycling .left{width: 50%; padding: 0 150px;}

/* right */
.inner-recycling .right{width: 50%; text-align: right;}




/* --- returns --- */
.inner-returns {padding: 50px 0;}
.inner-returns .wrap{display: flex;}

/* left */
.inner-returns .left{width: 50%; }

/* right */
.inner-returns .right{width: 45%; margin-left: auto; position: relative;}
.inner-returns .right .page-related{position:sticky;}




/* --- about --- */

/* banner */
.about-banner{height: 662px; display: flex; justify-content: flex-end; align-items: center;}
.about-banner .content{width: 60%; font-size: 45px; font-weight:200; line-height: 125%; padding: 0 8%;}
.about-banner .content p{text-align: right; font-size: 16px; font-weight: 400; margin-top: 30px;} 

/* inner-about */
.inner-about {margin-bottom: 80px; border-bottom: 1px solid #efefef; padding-bottom: 80px;}
.inner-about .item{padding: 80px 0; padding-bottom: 0; }
.inner-about .item .pic{width: 50%;}
.inner-about .item .content{width: 50%; padding: 0 4%;}
.inner-about .item .content .title{font-size: 36px; font-weight: 200; margin-bottom: 20px;  line-height: 125%;}
.inner-about .item .content .dep p{margin-bottom: 20px; line-height: 150%; font-size: 14px; color: #666;}

/* nth */
.inner-about .item.item-a .pic{order: 1;}
.inner-about .item.item-a .content{order: 2;}
.inner-about .item.item-b .pic{order: 2;}
.inner-about .item.item-b .content{order: 1;}





/* --- delivery --- */
.inner-delivery  {padding: 50px 0;}

/* tab */
.inner-delivery .tab {border-bottom: 1px solid #efefef; margin-top: 50px; padding-bottom: 10px; margin-bottom: 50px;}
.inner-delivery .tab ul{ justify-content: center;}
.inner-delivery .tab ul li{height: 40px; line-height: 40px; margin: 0 20px; cursor: pointer; color: #bbb; position: relative;}
.inner-delivery .tab ul li::before{content: ""; left: 0; width: 100%; height: 1px; background: #efefef; position: absolute; bottom: -11px;}
.inner-delivery .tab ul li.on{color: #494949;}
.inner-delivery .tab ul li.on::before{ background: #494949;}

/* box */
.inner-delivery .bd .box {display: flex;}

/* table */
.inner-delivery .bd .table{width: 50%;}
.inner-delivery .bd .table table{width: 100%; background: #f9f9f9; text-align: center;}
.inner-delivery .bd .table table th{padding: 10px 0; border-bottom: 1px solid #efefef; font-weight: bolder;}
.inner-delivery .bd .table table td{padding: 10px; color: #666; }
.inner-delivery .bd .table table td p{line-height: 180%;}

/* other */
.inner-delivery .bd .other{width: 47.9%; margin-left: auto; position: relative;}
.inner-delivery .bd .other .page-related{position:sticky;}

/* left */
.inner-delivery .bd .left{width: 47.9%;}
.inner-delivery .bd .left .page-list .item:first-child{padding-top: 0;}

/* info */
.inner-delivery .bd .other-info{ background: #f9f9f9; padding: 20px; margin-bottom: 30px;} 
.inner-delivery .bd .other-info .item{display: flex; align-items: center; margin-bottom: 20px;}
.inner-delivery .bd .other-info .item .icon{width: 15%;}
.inner-delivery .bd .other-info .item .icon svg{width: 30px;}
.inner-delivery .bd .other-info .item .title{width: 20%; font-size: 16px;} 
.inner-delivery .bd .other-info .item .text p{line-height: 200%;}





/* --- faq --- */
.inner-faq{}
.inner-faq  .wrap {padding: 50px 10%;}

/* search */
.faq-search{ border-radius: 10px; padding: 50px; margin-top: 30px; background: #f9f9f9;}
.faq-search .select .special-flexselect{width: 100%; height: 45px; line-height: 45px; border: 1px solid #ddd; padding-left: 20px; font-size: 14px;}


/* list  */
.faq-list{padding: 50px 0;}

/* list - column */
.faq-list .box .column{cursor: pointer; font-size: 26px; font-weight: bold; border-bottom: 1px solid #E0E0E0; height: 72px; line-height: 72px; position: relative; color: #41B2EC;}
.faq-list .box .column::after{content: "\e6a6"; font-family: iconfont; position: absolute; right: 0; top: 0; line-height: 72px; color: #41B2EC; font-weight: bolder; transition: all .3s;}

/* list - list */
.faq-list .box .list{display: none;}
.faq-list .box .list .item{border-bottom: 1px solid #E0E0E0; min-height: 72px;}
.faq-list .box .list .item h3{line-height: 72px; font-size: 18px; padding-left: 35px; cursor: pointer; position: relative;}
.faq-list .box .list .item h3::before{content: "\e65f"; font-family: iconfont; margin-right: 10px; color: #333; font-weight: bolder; font-size: 14px;}
.faq-list .box .list .item .content{margin-bottom: 20px; padding-left: 35px; display: none;}
.faq-list .box .list .item .content p{ line-height: 180%; margin-bottom: 20px; color: #666;}

/* color */
.faq-list .box .list .item h3.color{ color: #41B2EC; font-weight: bolder;}
.faq-list .box .list .item h3.color::before{transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg)}

/* open */
.faq-list .box .column.open::after{transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg)}
.faq-list .box .list.open{display: block;}
.faq-list .box .list .item .content.open{display: block;}






}