body{ font-family: 'Noto Sans SC', system-ui, sans-serif; font-size: 14px; line-height: 150%; margin: 0px; padding: 0px; background: #000000; min-width: 1400px; color: #ffffff; font-weight: lighter;}
body.no-scroll{ overflow: hidden;}
img{ width: 100%; height: auto; border: 0px;}
a{ color: #ffffff; text-decoration: none;}
a:hover{ color: #ffffff; text-decoration: underline;}
form{ margin: 0px; padding: 0px;}
ul, li{ margin: 0px; padding: 0px; list-style-type: none;}
input, select, textarea{ margin: 0px; padding: 5px 10px; font-family: 'Noto Sans SC', system-ui, sans-serif; font-size: 14px; vertical-align: middle;}

.input_error{ border: 1px solid #ff0000 !important; background: #fff7f7 !important; color: #ff0000;}
.msg{ color: #ff0000;}
.remark{ color: #999999;}
.clear{ clear: both;}

/*****Public*****/
.pic-bigger img{ transition-delay: 0s; transition-duration: 0.5s; transition-property: all; transition-timing-function: ease;
-moz-transition-delay: 0s; -moz-transition-duration: 0.5s; -moz-transition-property: all; -moz-transition-timing-function: ease;
-webkit-transition-delay: 0s; -webkit-transition-duration: 0.5s; -webkit-transition-property: all; -webkit-transition-timing-function: ease;
-o-transition-delay: 0s; -o-transition-duration: 1s; -o-transition-property: all; -o-transition-timing-function: ease;}
.pic-bigger:hover img{ transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2);}

.template{ display: none;}
.section-fade{ opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease;}
.section-fade.visible{ opacity: 1; transform: translateY(0);}
.main-bg{ width: 100%; height: 100%; clear: both; position: fixed; top: 0px; left: 0px; background: url(../image/goods_bg.jpg) center no-repeat; background-size: 100% 100%; font-size: 0px; line-height: 0px;}
.wrap{ width: 100%; min-width: 1200px; height: auto; clear: both; position: absolute; top: 0px; left: 0px; z-index: 1;}

/*****Header*****/
.header{ width: 100%; min-width: 1400px; height: 1080px; clear: both; background: #000000; position: relative; overflow: hidden;}
.header-sub{ height: 149px !important; overflow: hidden;}
.header .slogan{ width: 1920px; height: 1080px; clear: both; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); font-size: 0px; line-height: 0px;}
.header .slogan img{ width: 100%; height: auto;}
.header .top{ width: 1400px; height: 148px; clear: both; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); z-index: 10; background: url(../image/header_bg.png) top center no-repeat; border-bottom: 1px solid rgba(255,255,255,0.7);}
.header .top.small{ height: 120px !important; border-bottom: 0px;}
.header .top .logo{ width: 159px; height: 55px; margin: 0 auto; padding-top: 30px; clear: both; font-size: 0px; line-height: 0px;}
.header .top .nav{ width: auto; height: 36px; clear: both; position: absolute; left: 0px; bottom: 0px; font-size: 16px; color: #ffffff; font-weight: normal; text-transform: uppercase; justify-content: center;}
.header .top .nav .li{ width: auto; height: 36px; margin-right: 40px; float: left; position: relative; opacity: 1; transition: opacity 0.2s ease;}
.header .top .nav .li a{ display: block; width: 100%; height: 100%; color: #ffffff; text-decoration: none;}
.header .top .nav:hover .li{ opacity: 0.58;}
.header .top .nav .li:hover{ opacity: 1;}
.header .top .nav .li .line, .header .top .nav:hover .li.on .line{ display: none;}
.header .top .nav .li.on .line{ display: block; width: 18px; height: 3px; clear: both; position: absolute; left: 0px; bottom: -1px; background: #ab0300; font-size: 0px; line-height: 0px;}
.header .top .search{ width: auto; height: 36px; clear: both; position: absolute; right: 0px; bottom: 0px; font-size: 16px; color: #ffffff;}
.header .top .search a{ display: block; color: #ffffff; text-decoration: none; display: flex;}
.header .top .search .icon{ display: inline-block; width: 21px; height: 21px; padding-right: 8px; fill: #ffffff;}
.header .buts{ width: auto; height: auto; clear: both; position: absolute; top: 25px; right: 35px; z-index: 100; font-size: 16px; color: #ffffff; display: flex;}
.header .buts .li{ display: inline-block; width: auto; height: auto; margin-left: 20px; position: relative;}
.header .buts .li a{ color: #ffffff; text-decoration: none;}
.header .buts .li .icon{ display: inline-block; width: 20px; height: 20px; fill: #ffffff; vertical-align: middle; margin-top: -4px;}
.header .buts .li .mark{ width: auto; height: 17px; line-height: 17px; padding: 0 5px; clear: both; position: absolute; top: -5px; left: 14px; z-index: 1; background: #ff0000; border: 1px solid #000000; border-radius: 18px; text-align: center; font-size: 12px; color: #ffffff; display: none;}
.header .buts .li .mark.achieve{ animation: scale 0.3s linear;}
.header .buts .li.language{ margin-top: 1px; padding-right: 5px;}
.header .buts .li.language .icon{ margin-right: 5px; margin-top: -5px;}

/*****Footer*****/
.footer{ width: 100%; height: auto; margin: 0 auto; padding-top: 70px; clear: both; background: rgba(0,0,0,0.7); position: relative;}
.footer .cot{ width: 1400px; height: auto; margin: 0 auto; padding-bottom: 80px; clear: both; overflow: hidden;}
.footer .cot .logo{ width: 140px; height: 48px; float: left; font-size: 0px; line-height: 0px;}
.footer .cot .text{ width: 300px; height: auto; margin-top: -3px; padding-left: 80px; float: left;}
.footer .cot .text .title{ width: 100%; height: auto; clear: both; font-size: 16px; color: #ffffff; text-transform: uppercase;}
.footer .cot .text .content{ width: 100%; height: auto; padding-top: 20px; clear: both; font-size: 14px; color: #ffffff; line-height: 140%;}
.footer .cot .accept{ width: auto; height: auto; float: right;}
.footer .cot .accept .payment{ width: auto; height: auto; clear: both; overflow: hidden; display: flex;}
.footer .cot .accept .payment .li{ width: 50px; height: auto; margin-left: 15px; float: left; border-radius: 5px; font-size: 0px; line-height: 0px; overflow: hidden;}
.footer .cot .accept .social{ width: auto; height: auto; padding-top: 30px; padding-left: 15px; clear: both; overflow: hidden; display: flex;}
.footer .cot .accept .social .li{ width: 24px; height: auto; margin-right: 15px; float: left; font-size: 0px; line-height: 0px;}
.footer .copyright{ width: 1400px; height: auto; margin: 0 auto; clear: both; border-top: 1px solid #333333;}
.footer .copyright .txt{ width: 100%; height: auto; margin: 0 auto; padding: 25px 0px 35px 0px; clear: both; text-align: center; font-size: 13px; color: #888888;}
.footer .copyright .txt img{ vertical-align: middle;}
.footer .copyright .txt a{ color: #ffffff;}

/*****Main*****/
.promotion{ width: 100%; height: 287px; clear: both; background: #000000; position: relative;}
.promotion .banner{ width: 1400px; height: auto; clear: both; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); display: flex; gap: 28px;}
.promotion .banner .li{ width: 448px; height: 240px; border: 1px solid #ffffff; box-sizing: border-box; border-radius: 15px; font-size: 0px; line-height: 0px; overflow: hidden;}
.promotion .banner .li img{ width: 100%; height: auto; min-height: 240px;}

.goods{ width: 100%; max-width: 1920px; height: 1080px; margin: 0 auto; clear: both; position: relative; overflow: hidden;}
.goods .shadow{ transition: transform 0.3s ease; will-change: transform;}
.goods .shadow-left{ width: 683px; height: 323px; clear: both; position: absolute; top: 240px; left: 90px; background: url(../image/goods_bg_l.png) center no-repeat; font-size: 0px; line-height: 0px;}
.goods .shadow-right{ width: 606px; height: 323px; clear: both; position: absolute; top: 610px; right: 130px; background: url(../image/goods_bg_r.png) center no-repeat; font-size: 0px; line-height: 0px;}
@media (max-width: 1700px) {
    .goods .shadow-left{ left: 0px;}
    .goods .shadow-right{ right: 0px;}
}
.goods .cot{ width: 1400px; height: auto; margin: 0 auto; clear: both; position: relative;}
.goods .cot .text{ width: 100%; height: auto; padding-top: 90px; clear: both;}
.goods .cot .text .title{ width: 100%; height: auto; clear: both; font-size: 36px; color: #ffffff; line-height: 125%;}
.goods .cot .text .abstract{ width: 530px; height: auto; padding-top: 15px; clear: both; font-size: 16px; color: #ffffff; line-height: 140%;}
.goods .cot .list{ width: 100%; height: auto; clear: both; position: absolute; top: 300px; left: 0px;}
.goods .cot .list .li{ width: 450px; height: auto; margin-left: 25px; float: left; position: relative; transform: skewX(-1deg);}
.goods .cot .list .li a{ display: block; text-decoration: none;}
.goods .cot .list .li .pic{ width: 450px; height: 450px; clear: both; border: 1px solid #444444; box-sizing: border-box; border-radius: 15px; font-size: 0px; line-height: 0px; overflow: hidden; transition: all 0.5s ease;}
.goods .cot .list .li .pic img{ width: 100%; height: auto; min-height: 450px;}
.goods .cot .list .li .txt{ width: 98%; height: auto; margin: 0 auto; padding-top: 18px; clear: both; overflow: hidden;}
.goods .cot .list .li .txt .title{ width: 350px; height: auto; float: left; font-size: 18px; color: #ffffff; line-height: 135%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.goods .cot .list .li .txt .price{ width: auto; height: auto; float: right; font-size: 20px; color: #ffffff; font-weight: normal;}
.goods .cot .list .li:nth-child(1){ margin-left: 0px; margin-top: 50px;}
.goods .cot .list .li:nth-child(2){ margin-top: 170px;}
.goods .cot .list .li:nth-child(3){ padding-top: 65px;}
.goods .cot .list .li:nth-child(3) .txt{ position: absolute; padding-top: 0px; top: 0px; left: 1%;}
.goods .cot .list .li:hover .pic{ border: 1px solid #000000; transform: translateY(-5px); box-shadow: 0px 10px 25px rgba(0,0,0,0.58);}

.brand{ width: 100%; height: 1080px; margin: 0 auto; clear: both; background: #000000; position: relative; overflow: hidden;}
.brand .shadow{ width: 100%; height: 100%; clear: both; position: relative; font-size: 0px; line-height: 0px; overflow: hidden;}
.brand .shadow img{ width: 100%; height: auto; position: absolute; top: 50%; transform: translateY(-25%); opacity: 0.2; filter: blur(15px);}
.brand .cot{ width: 1400px; height: auto; clear: both; position: absolute; top: 0px; left: 50%; transform: translateX(-50%);}
.brand .cot .text{ width: 100%; height: 240px; clear: both; font-size: 36px; color: #ffffff; line-height: 125%; display: flex; align-items: center;}
.brand .cot .details{ width: 100%; height: auto; clear: both; position: absolute; top: 245px; left: 0px;}
.brand .cot .details .li{ width: 100%; height: auto; clear: both; position: absolute; top: 0px; left: 0px;}
.brand .cot .details .li .pic{ width: 450px; height: 540px; clear: both; position: absolute; top: 0px; left: 0px; background: #000000; border: 1px solid #444444; border-radius: 15px; font-size: 0px; line-height: 0px; overflow: hidden;}
.brand .cot .details .li .pic img{ width: 100%; height: auto; min-height: 540px; opacity: 0.2;}
.brand .cot .details .li .txt{ width: 650px; height: auto; clear: both; position: absolute; top: -5px; right: 0px; display: none;}
.brand .cot .details .li .txt .title{ width: 100%; height: auto; clear: both; font-size: 42px; color: #ffffff; line-height: 125%; text-transform: uppercase;}
.brand .cot .details .li .txt .abstract{ width: 100%; height: auto; padding-top: 30px; clear: both; font-size: 18px; color: #ffffff; line-height: 140%;}
.brand .cot .details .li:nth-child(1){ top: 0px; z-index: 4;}
.brand .cot .details .li:nth-child(1) .pic{ left: 240px;}
.brand .cot .details .li:nth-child(2){ top: 60px; z-index: 3;}
.brand .cot .details .li:nth-child(2) .pic{ left: 160px;}
.brand .cot .details .li:nth-child(3){ top: 120px; z-index: 2;}
.brand .cot .details .li:nth-child(3) .pic{ left: 80px;}
.brand .cot .details .li:nth-child(4){ top: 180px; z-index: 1;}
.brand .cot .details .li:nth-child(4) .pic{ left: 0px;}
.brand .cot .details .li.on{ z-index: 10;}
.brand .cot .details .li.on .pic{ border: 1px solid #ffffff; box-shadow: 0px 0px 25px rgba(0,0,0,0.58);}
.brand .cot .details .li.on .pic img{ opacity: 1;}
.brand .cot .details .li.on .txt{ display: block;}

.designer{ width: 100%; height: 1000px; margin: 0 auto; clear: both; background: #000000; position: relative; overflow: hidden;}
.designer .cot{ width: 1400px; height: auto; margin: 0 auto; clear: both; position: relative;}
.designer .cot .text{ width: 950px; height: auto; padding-top: 80px; float: right; text-align: right; font-size: 24px; color: #ffffff; line-height: 130%;}
.designer .cot .details{ width: 100%; height: auto; clear: both; position: absolute; top: 320px; left: 0px; display: flex;}
.designer .cot .details .li{ width: auto; height: auto; margin-left: 1px; float: left; flex: 1; position: relative;}
.designer .cot .details .li:first-child{ margin-left: 0px;}
.designer .cot .details .li .default{ width: 100%; height: 465px; clear: both; position: relative; display: block;}
.designer .cot .details .li .default .title{ width: auto; height: auto; padding: 22px 0px 0px 22px; clear: both; font-size: 30px; color: #ffffff; text-transform: uppercase; writing-mode: vertical-lr;}
.designer .cot .details .li .default .pic{ width: 100%; height: 100%; clear: both; position: absolute; top: 0px; left: 0px; font-size: 0px; line-height: 0px; overflow: hidden; opacity: 0.4;}
.designer .cot .details .li .default .pic img{ width: auto; height: 100%; position: absolute; top: 0px; left: -20%;}
.designer .cot .details .li .current{ width: 100%; height: 560px; clear: both; background: url(../image/designer_bg.jpg) center no-repeat; background-size: 100% 100%; position: absolute; top: 0px; left: 0px; opacity: 0;}
.designer .cot .details .li .current .pic{ width: 330px; height: 200px; clear: both; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); border: 1px solid #ffffff; border-radius: 15px; box-shadow: 0px 25px 30px rgba(0,0,0,0.4); font-size: 0px; line-height: 0px; overflow: hidden;}
.designer .cot .details .li .current .pic img{ width: 100%; height: auto; min-height: 200px;}
.designer .cot .details .li .current .txt{ width: 88%; height: auto; margin: 0 auto; padding-top: 265px; clear: both; opacity: 0; transition: all 0.6s ease 0.3s;}
.designer .cot .details .li .current .txt .title{ width: 100%; height: auto; margin: 0 auto; clear: both; text-align: center; font-size: 30px; color: #ffffff; line-height: 125%; font-weight: bold;}
.designer .cot .details .li .current .txt .abstract{ width: 100%; height: auto; margin: 0 auto; padding-top: 20px; clear: both; text-align: center; font-size: 18px; color: #ffffff; line-height: 140%;}
.designer .cot .details .li .current .but{ width: 180px; height: 42px; clear: both; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); border: 1px solid rgba(255,255,255,0.5); border-radius: 42px; font-size: 14px; color: #ffffff; overflow: hidden; opacity: 0; transition: all 0.5s ease 0.5s;}
.designer .cot .details .li .current .but:before{ width: 0; height: 0; content: ''; position: absolute; top: 50%; left: 50%;  background: #000000; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease;}
.designer .cot .details .li .current .but a{ display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 10; color: #ffffff; display: flex; align-items: center; justify-content: center;}
.designer .cot .details .li.on{ flex: 3.8; transition: all 0.4s ease;}
.designer .cot .details .li.on .default{ display: none;}
.designer .cot .details .li.on .current{ opacity: 1;}
.designer .cot .details .li.on .current .txt{ padding-top: 205px; opacity: 1;}
.designer .cot .details .li.on .current .but{ bottom: 45px; opacity: 1;}
.designer .cot .details .li.on .current .but:hover:before{ width: 300px; height: 300px;}

.news{ width: 100%; height: auto; margin: 0 auto; clear: both; background: #000000; position: relative; overflow: hidden;}
.news .shadow{ width: 100%; height: 715px; clear: both; background: #0c0c0c; position: absolute; top: 0px; left: 0px; z-index: -1;}
.news .cot{ width: 1400px; height: auto; margin: 0 auto; clear: both;}
.news .cot .title{ width: 100%; height: 140px; line-height: 140px; clear: both; font-size: 36px; color: #ffffff;}
.news .cot .list{ width: 100%; height: auto; clear: both; overflow: hidden;}
.news .cot .list .li{ width: 332px; height: auto; margin: 0px 0px 60px 24px; float: left;}
.news .cot .list .li a{ display: block; text-decoration: none;}
.news .cot .list .li .pic{ width: 100%; height: 190px; clear: both; border-radius: 15px; overflow: hidden; font-size: 0px; line-height: 0px;}
.news .cot .list .li .pic img{ width: 100%; height: auto; min-height: 190px;}
.news .cot .list .li .txt{ width: 100%; height: auto; padding-top: 12px; clear: both;}
.news .cot .list .li .txt .time{ width: 100%; height: auto; clear: both; font-size: 14px; color: #888888;}
.news .cot .list .li .txt .title{ width: 100%; height: auto; padding-top: 5px; clear: both; font-size: 16px; color: #ffffff; line-height: 140%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;}
.news .cot .list .li:nth-child(-n+2){ width: 688px;}
.news .cot .list .li:nth-child(-n+2) .pic{ height: 360px;}
.news .cot .list .li:nth-child(-n+2) .pic img{ min-height: 360px;}
.news .cot .list .li:nth-child(-n+2) .txt .title{ font-size: 20px; -webkit-line-clamp: 1;}
.news .cot .list .li:nth-child(1){ margin-left: 0px;}
.news .cot .list .li:nth-child(3){ margin-left: 0px;}
.news .cot .but{ width: 180px; height: 42px; margin: 0px auto 58px auto; clear: both; border: 1px solid rgba(255,255,255,0.5); border-radius: 42px; font-size: 14px; color: #ffffff; position: relative; overflow: hidden;}
.news .cot .but:before{ width: 0; height: 0; content: ''; position: absolute; top: 50%; left: 50%;  background: #ffffff; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease;}
.news .cot .but a{ display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 10; color: #ffffff; display: flex; align-items: center; justify-content: center;}
.news .cot .but:hover:before{ width: 300px; height: 300px;}
.news .cot .but:hover a{ color: #000000;}

/*****Sub*****/
.sub-wrap{ width: 100%; height: auto; clear: both; background: #000000;}
.sub{ width: 1400px; height: auto; margin: 0 auto; clear: both; position: relative;}
.sub .title{ width: 100%; height: 90px; clear: both; border-bottom: 1px solid #333333;}
.sub .title .txt{ width: auto; height: 90px; line-height: 90px; clear: both; position: absolute; left: 0px; top: 0px; z-index: 1; font-size: 36px; color: #ffffff;}
.sub .title .position{ width: auto; height: 90px; line-height: 90px; float: right; text-align: right; font-size: 14px; color: #888888;}
.sub .title .position a{ color: #888888;}
.sub .title .position a:hover{ color: #ffffff; text-decoration: underline;}
.sub .title .position span{ padding: 0px 8px;}

.sub .menu{ width: 100%; height: auto; padding: 20px 0px; clear: both; text-align: center; overflow: hidden;}
.sub .menu .li{ display: inline-block; width: auto; height: 38px; line-height: 38px; margin: 0px 15px 0px 15px; font-size: 18px; color: #ffffff;}
.sub .menu .li a{ color: #ffffff;}
.sub .menu .li.on{ font-weight: normal;}

.sub .content{ width: 100%; height: auto; min-height: 500px; padding-bottom: 60px; clear: both;}
.sub .content .cot{ width: 100%; height: auto; margin: 0 auto; padding: 25px 0px 0px 0px; clear: both; font-size: 18px; color: #ffffff; line-height: 170%; overflow: hidden;}
.sub .content .cot .p-cot{ width: 1000px; height: auto; margin: 0 auto; clear: both;}
.sub .content .cot .p-cot img{ width: auto; height: auto; margin-top: 8px; border-radius: 15px;}
.sub .content .cot .p-cot p{ margin: 0px; padding: 0px 0px 15px 0px;}
.sub .content .cot .explain{ width: 100%; height: auto; padding-bottom: 40px; clear: both; font-size: 16px; color: #999999; line-height: 170%; overflow: hidden;}

/*****News*****/
.sub .s-news{ width: 1000px; height: auto; margin: 0 auto; clear: both;}
.sub .s-news .li{ width: 100%; height: auto; clear: both; border-top: 1px solid #222222; overflow: hidden;}
.sub .s-news .li:first-child{ border-top: 0px;}
.sub .s-news .li a{ display: block; width: 100%; height: 100%; padding: 40px 0px; overflow: hidden; text-decoration: none;}
.sub .s-news .li .pic{ width: 270px; height: auto; max-height: 200px; float: left; border-radius: 15px; font-size: 0px; line-height: 0px; overflow: hidden;}
.sub .s-news .li .pic img{ width: 100%;}
.sub .s-news .li .txt{ width: 700px; height: auto; padding-right: 0px; float: right;}
.sub .s-news .li .txt .n-title{ width: 100%; height: auto; margin-top: -4px; clear: both; font-size: 22px; color: #ffffff; line-height: 140%;}
.sub .s-news .li .txt .n-time{ width: 100%; height: auto; padding-top: 5px; clear: both; font-size: 12px; color: #aaaaaa;}
.sub .s-news .li .txt .n-time span{ padding-right: 15px;}
.sub .s-news .li .txt .n-abstract{ width: 100%; height: auto; padding-top: 5px; clear: both; font-size: 14px; color: #888888; line-height: 150%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;}
.sub .s-news .li:hover .txt .n-title{ color: #aaaaaa;}

.sub .s-details{ width: 1000px; height: auto; margin: 0 auto; padding-top: 20px; clear: both; overflow: hidden;}
.sub .s-details .n-tit{ width: 100%; height: auto; clear: both; text-align: center; font-size: 36px; color: #ffffff; line-height: 135%;}
.sub .s-details .n-time{ width: 100%; height: auto; padding-top: 5px; clear: both; text-align: center; font-size: 14px; color: #888888;}
.sub .s-details .n-time span{ padding: 0 8px;}
.sub .s-details .n-time span .icon{ width: 20px; height: 20px; margin-right: 4px; fill: #888888; vertical-align: middle; margin-top: -2px;}
.sub .s-details .n-cot{ width: 100%; height: auto; padding-top: 30px; clear: both; text-align: justify; font-size: 18px; color: #ffffff; line-height: 170%; overflow: hidden;}
.sub .s-details .n-cot img{ width: auto; height: auto; margin-top: 8px; border-radius: 15px;}
.sub .s-details .n-cot p{ margin: 0px; padding: 0px 0px 15px 0px;}
.sub .s-details .n-share{ width: auto; height: 60px; margin-top: 30px; clear: both; float: right; font-size: 14px;}
.sub .s-details .n-more{ width: 100%; height: auto; margin: 40px auto 0 auto; padding-top: 25px; clear: both; border-top: 1px solid #333333;}
.sub .s-details .n-more .li{ width: 100%; height: auto; clear: both; font-size: 14px; color: #888888;}
.sub .s-details .n-more .li a{ color: #888888;}

/*****Picture*****/
.sub .s-pic{ width: 100%; height: auto; clear: both; text-align: center; font-size: 0px; position: relative;}
.sub .s-pic .li{ display: inline-block; width: 300px; height: auto; margin: 20px 15px 20px 15px;}
.sub .s-pic .li a{ display: block; width: 100%; height: 100%; text-decoration: none;}
.sub .s-pic .li .pic{ width: 100%; height: 200px; clear: both; border-radius: 15px; font-size: 0px; line-height: 0px; overflow: hidden;}
.sub .s-pic .li .pic img{ width: 100%; height: auto; min-height: 200px;}
.sub .s-pic .li .txt{ width: 100%; height: 50px; line-height: 50px; clear: both; text-align: center; font-size: 16px; color: #ffffff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;}
.sub .s-pic .li a:hover .txt{ color: #666666;}

/*****Shop*****/
.shop{ width: 100%; height: auto; padding-bottom: 50px; clear: both; overflow: visible; position: relative;}
.shop .search{ width: 800px; height: auto; margin: 0 auto; padding-top: 65px; clear: both; opacity: 0; transform: translateY(58px); transition: all 0.5s ease;}
.shop .search .cot{ width: 100%; height: auto; clear: both; background: #0e0e0e; border: 1px solid #444444; box-sizing: border-box; border-radius: 55px; position: relative; overflow: hidden; display: flex;}
.shop .search .cot input{ width: 100%; height: 55px; line-height: 55px; padding: 0px 84px 1px 30px; border: 0px; background: none; box-shadow: none; outline-style: none; outline-width: 0px; outline-color: transparent; font-size: 20px; color: #ffffff; font-weight: lighter;}
.shop .search .cot .but{ width: 84px; height: 55px; position: absolute; top: 0px; right: 0px; z-index: 1; cursor: pointer;}
.shop .search .cot .but .icon{ width: 28px; height: 28px; fill: #888888; padding: 13px 28px;}
.shop .search .cot:hover .but .icon{ fill: #eeeeee;}
.shop .search.show{ opacity: 1; transform: translateY(0);}

.shop .toolbar{ width: 100%; height: 88px; padding-top: 80px; clear: both; background: #000000; position: sticky; top: 0px; z-index: 10; overflow: hidden;}
.shop .toolbar.sticky{ border-bottom: 1px solid #444444;}
.shop .toolbar .cot{ width: 1400px; height: auto; margin: 0 auto; clear: both; position: relative;}
.shop .toolbar .cot a{ display: block; color: #ffffff; text-decoration: none;}
.shop .toolbar .cot .txt{ display: inline-block; font-size: 14px; color: #ffffff; cursor: pointer;}
.shop .toolbar .cot .txt .icon{ width: 20px; height: 20px; margin-right: 4px; fill: #ffffff; vertical-align: middle; margin-top: -3px;}
.shop .toolbar .cot .txt.compare{ float: right;}
.shop .toolbar .cot .compare-cot{ width: auto; height: 80px; clear: both; position: absolute; top: 50%; right: 0px; transform: translateY(-50%); display: flex;}
.shop .toolbar .cot .compare-cot .clist{ width: auto; height: auto;}
.shop .toolbar .cot .compare-cot .clist .txt{ width: auto; height: 80px; line-height: 80px; font-size: 16px; color: #ffffff;}
.shop .toolbar .cot .compare-cot .clist .cgoods{ width: auto; height: 80px; display: flex;}
.shop .toolbar .cot .compare-cot .clist .cgoods .li{ width: 80px; height: 80px; margin-right: 8px; border: 1px solid #888888; box-sizing: border-box; border-radius: 10px; font-size: 0px; line-height: 0px; overflow: hidden; position: relative;}
.shop .toolbar .cot .compare-cot .clist .cgoods .li img{ width: 100%; height: auto; min-height: 80px;}
.shop .toolbar .cot .compare-cot .clist .cgoods .li .close{ width: 14px; height: 14px; position: absolute; top: 4px; right: 4px; z-index: 1; background: #ffffff; border-radius: 100%; font-size: 0px; line-height: 0px; cursor: pointer; user-select: none;}
.shop .toolbar .cot .compare-cot .clist .cgoods .li .close .icon{ width: 10px; height: 10px; padding: 2px; fill: #000000;}
.shop .toolbar .cot .compare-cot .buts{ width: auto; height: auto; margin: 19px 0px 0px 40px;}
.shop .toolbar .cot .compare-cot .buts .but{ display: inline-block; width: auto; height: 42px; margin-left: 10px; padding: 0 80px; background: #ffffff; border: 1px solid #ffffff; box-sizing: border-box; border-radius: 42px; font-size: 14px; color: #ffffff; position: relative; overflow: hidden;}
.shop .toolbar .cot .compare-cot .buts .but:before{ width: 0; height: 0; content: ''; position: absolute; top: 50%; left: 50%;  background: #000000; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease;}
.shop .toolbar .cot .compare-cot .buts .but a{ display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 10; color: #000000; display: flex; align-items: center; justify-content: center;}
.shop .toolbar .cot .compare-cot .buts .but:hover:before{ width: 300px; height: 300px;}
.shop .toolbar .cot .compare-cot .buts .but:hover a{ color: #ffffff;}
.shop .toolbar .cot .compare-cot .buts .but.disabled{ opacity: 0.5;}
.shop .toolbar .cot .compare-cot .buts .but.disabled a{ cursor: auto;}
.shop .toolbar .cot .compare-cot .buts .but.disabled:hover:before{ width: 0px; height: 0px;}
.shop .toolbar .cot .compare-cot .buts .but.disabled:hover a{ color: #000000;}
.shop .toolbar .cot .compare-cot .buts .but.cancel{ padding: 0 60px; background: #000000; border: 1px solid #444444; color: #ffffff;}
.shop .toolbar .cot .compare-cot .buts .but.cancel a{ color: #ffffff;}
.shop .toolbar .cot .compare-cot .buts .but.cancel:before{ background: #111111;}

.shop .details{ width: 100%; height: auto; clear: both;}
.shop .list{ width: 1410px; height: auto; margin: 0 auto; padding: 30px 0px 40px 0px; clear: both; overflow: hidden;}
.shop .list .li{ width: 272px; height: auto; margin: 0px 5px 10px 5px; float: left; background: #ffffff; border-radius: 15px; overflow: hidden; opacity: 0; transform: translateY(30px); transition: all 0.5s ease; position: relative;}
.shop .list .li a{ display: block; text-decoration: none;}
.shop .list .li .pic{ width: 100%; height: 272px; clear: both; font-size: 0px; line-height: 0px; overflow: hidden;}
.shop .list .li .pic img{ width: 100%; height: auto; min-height: 272px;}
.shop .list .li .txt{ width: 90%; height: auto; margin: 0 auto; clear: both; border-top: 1px solid #f0f0f0;}
.shop .list .li .txt .title{ width: 100%; height: 43px; padding-top: 10px; clear: both; text-align: center; font-size: 16px; color: #000000; line-height: 125%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.shop .list .li .txt .param{ width: 100%; height: auto; clear: both; text-align: center; font-size: 14px; color: #888888;}
.shop .list .li .txt .price{ width: 100%; height: auto; padding: 15px 0px 20px 0px; clear: both; text-align: center; font-size: 20px; color: #000000;}
.shop .list .li .select{ width: 24px; height: 24px; clear: both; position: absolute; top: 15px; right: 15px; z-index: 2; font-size: 0px; line-height: 0px;}
.shop .list .li .select input{ display: inline-block; width: 100%; height: 100%; border: 1px solid #000000; accent-color: #333333; background: none; box-shadow: none; outline-style: none; outline-width: 0px; outline-color: transparent;}
.shop .list .li.show{ opacity: 1; transform: translateY(0);}
.shop .list .li:hover{ transform: translateY(-8px); box-shadow: 0px 10px 25px rgba(0,0,0,0.58);}

.popup-filter .cot{ width: 580px !important;}
.popup-filter .cot form{ width: 100%; height: 100%;}
.popup-filter .filter{ width: 92%; height: calc(100% - 90px); margin: 0 auto; padding: 0 4%; clear: both; overflow-y: auto; position: relative; scrollbar-width: none; -ms-overflow-style: none;}
.popup-filter .filter::-webkit-scrollbar{ display: none;}
.popup-filter .filter::-webkit-scrollbar{ width: 0px; height: 0px; background: transparent;}
.popup-filter .filter .li{ width: 100%; height: auto; clear: both; border-top: 1px solid #444444; overflow: hidden;}
.popup-filter .filter .li:first-child{ border-top: 0px;}
.popup-filter .filter .li .ftit{ width: 20%; height: auto; padding: 15px 0px; float: left; font-size: 16px; color: #000000; line-height: 135%;}
.popup-filter .filter .li .fcot{ width: 75%; height: auto; float: right;}
.popup-filter .filter .li .fcot .fli{ width: 100%; height: auto; clear: both; border-top: 1px solid #dddddd; clear: both;}
.popup-filter .filter .li .fcot .fli:first-child{ border-top: 0px;}
.popup-filter .filter .li .fcot .fli .fltit{ width: 100%; height: auto; padding: 15px 0px; clear: both; font-size: 14px; color: #888888; cursor: pointer;}
.popup-filter .filter .li .fcot .fli .fltit .icon{ width: 18px; height: 18px; float: right; fill: #888888; vertical-align: middle; margin-top: 1px;}
.popup-filter .filter .li .fcot .fli .fltit .icon.reduce{ display: none;}
.popup-filter .filter .li .fcot .fli .flcot{ width: 100%; height: auto; padding-bottom: 8px; clear: both; display: none;}
.popup-filter .filter .li .fcot .fli .flcot .flcli{ width: 100%; height: auto; padding-bottom: 5px; clear: both; overflow: hidden; display: flex; align-items: center;}
.popup-filter .filter .li .fcot .fli .flcot .flcli label{ margin-right: 30px;}
.popup-filter .filter .li .fcot .fli .flcot .flcli input{ display: inline-block; width: 18px; height: 18px; margin-right: 8px; border: 1px solid #000000; accent-color: #ffffff; background: none; box-shadow: none; outline-style: none; outline-width: 0px; outline-color: transparent; margin-top: -5px;}
.popup-filter .filter .li .fcot .fli .flcot .flcli span{ display: inline-block; font-size: 16px; color: #000000;}
.popup-filter .buts{ width: 100%; height: 90px; padding: 17px 4% 0px 4%; clear: both; position: absolute; bottom: 0px; left: 0px; background: #ffffff; border-top: 1px solid #eeeeee; box-sizing: border-box; text-align: right;}
.popup-filter .buts .but{ display: inline-block; width: auto; height: 55px; margin-left: 10px; padding: 0 80px; background: #000000; border: 1px solid #000000; box-sizing: border-box; border-radius: 15px; font-size: 16px; color: #ffffff; position: relative; overflow: hidden;}
.popup-filter .buts .but:before{ width: 0; height: 0; content: ''; position: absolute; top: 50%; left: 50%;  background: #ffffff; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease;}
.popup-filter .buts .but a{ display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 10; color: #ffffff; display: flex; align-items: center; justify-content: center;}
.popup-filter .buts .but:hover:before{ width: 300px; height: 300px;}
.popup-filter .buts .but:hover a{ color: #000000;}
.popup-filter .buts .but.clear{ padding: 0 60px; background: #ffffff; color: #000000;}
.popup-filter .buts .but.clear a{ color: #000000;}
.popup-filter .buts .but.clear:before{ background: #f9f9f9;}

.popup-compare .cot{ width: 100% !important; background: #000000 !important;}
.popup-compare .cot .title{ height: 100px !important; line-height: 100px !important; color: #ffffff !important;}
.popup-compare .cot .title .close{ fill: #ffffff !important;}
.popup-compare .cot .content{ height: calc(100% - 100px) !important; border-top: 1px solid #000000 !important;}
.popup-compare .compare{ width: 100%; height: 100%; margin: 0 auto; clear: both; overflow-y: auto; position: relative; scrollbar-width: none; -ms-overflow-style: none;}
.popup-compare .compare::-webkit-scrollbar{ display: none;}
.popup-compare .compare::-webkit-scrollbar{ width: 0px; height: 0px; background: transparent;}
.popup-compare .compare .clist{ width: 100%; height: auto; clear: both; overflow: visible; position: relative;}
.popup-compare .compare .list{ width: 1400px; height: auto; margin: 0 auto; padding-bottom: 90px; clear: both}
.popup-compare .compare .list.sticky{ padding-top: 60px; padding-bottom: 0px; background: #000000; position: sticky; top: 0px; z-index: 1;}
.popup-compare .compare .list .ptit{ width: 100%; height: auto; clear: both; font-size: 40px; color: #ffffff; line-height: 125%; text-transform: uppercase;}
.popup-compare .compare .list .pcot{ width: 100%; height: auto; clear: both; display: flex;}
.popup-compare .compare .list .pcot.picture{ padding-top: 50px;}
.popup-compare .compare .list .li{ width: 25%; height: auto; margin-right: 10px; clear: both; flex: 1;}
.popup-compare .compare .list .li:last-child{ margin-right: 0px;}
.popup-compare .compare .list.sticky .li{ border-bottom: 1px solid #444444; box-sizing: border-box;}
.popup-compare .compare .list .li .ctit{ width: 100%; height: auto; padding-bottom: 25px; clear: both; overflow: hidden;}
.popup-compare .compare .list .li .ctit a{ display: block; text-decoration: none;}
.popup-compare .compare .list .li .ctit .pic{ width: 80px; height: 80px; float: left; border-radius: 10px; font-size: 0px; line-height: 0px; overflow: hidden;}
.popup-compare .compare .list .li .ctit .pic img{ width: 100%; height: auto; min-height: 80px;}
.popup-compare .compare .list .li .ctit .txt{ width: calc(100% - 115px); height: auto; margin-top: -4px; padding-right: 20px; float: right;}
.popup-compare .compare .list .li .ctit .txt span{ display: block; font-size: 16px; color: #ffffff; line-height: 135%;}
.popup-compare .compare .list .li .ctit .txt span.price{ display: block; padding-top: 8px;}
.popup-compare .compare .list .li .ccot{ width: 100%; height: auto; clear: both;}
.popup-compare .compare .list .li .ccot .pic{ width: 100%; aspect-ratio: 1 / 1; border-radius: 15px; font-size: 0px; line-height: 0px; overflow: hidden;}
.popup-compare .compare .list .li .ccot .pic img{ width: 100%; height: 100%; object-fit: fill;}
.popup-compare .compare .list .li .ccot .cli{ width: 100%; height: auto; clear: both;}
.popup-compare .compare .list .li .ccot .cli .pic{ margin-top: 30px}
.popup-compare .compare .list .li .ccot .cli .clattr{ width: 92%; height: auto; padding-top: 15px; color: #ffffff; font-size: 16px; color: #ffffff; line-height: 135%;}
.popup-compare .compare .list .li .ccot .cli .clitem{ width: 100%; height: auto; padding-top: 25px; clear: both;}
.popup-compare .compare .list .li .ccot .cli .clitem .clili{ width: 100%; height: auto; padding-bottom: 15px; clear: both;}
.popup-compare .compare .list .li .ccot .cli .clitem .clili .clitit{ width: 100%; height: auto; clear: both; font-size: 14px; color: #888888;}
.popup-compare .compare .list .li .ccot .cli .clitem .clili .clicot{ width: 100%; height: auto; padding-top: 2px; clear: both; font-size: 18px; color: #ffffff; line-height: 135%;}

/*****Goods Details*****/
.goods-details{ width: 1400px; height: auto; margin: 0 auto; padding: 40px 0px 80px 0px; clear: both;}
.goods-details .details{ width: 100%; height: auto; padding-top: 40px; clear: both; overflow: visible; position: relative; display: flex; align-items: flex-start; gap: 0;}
.goods-details .details .details-left{ width: 880px; height: auto; float: left;}
.goods-details .param{ width: 100%; height: auto; padding-top: 10px; clear: both;}
.goods-details .param .whole{ width: 100%; height: auto; clear: both; border-radius: 15px; text-align: center; font-size: 0px; line-height: 0px; overflow: hidden;}
.goods-details .param .whole img{ width: 100%; height: auto;}
.goods-details .param .list{ width: 100%; height: auto; padding-top: 60px; clear: both;}
.goods-details .param .list .li{ width: 100%; height: auto; padding-bottom: 100px; clear: both; overflow: hidden; position: relative;}
.goods-details .param .list .li .txt{ width: 500px; height: auto; min-height: 500px; float: left;}
.goods-details .param .list .li .txt .title{ width: 100%; height: auto; clear: both; font-size: 40px; color: #ffffff; line-height: 125%; text-transform: uppercase;}
.goods-details .param .list .li .txt .attribute{ width: 100%; height: auto; padding-top: 12px; clear: both; font-size: 18px; color: #ffffff; line-height: 135%;}
.goods-details .param .list .li .txt .item{ width: 100%; height: auto; padding-top: 20px; clear: both;}
.goods-details .param .list .li .txt .item .ili{ width: 100%; height: auto; padding-bottom: 15px; clear: both;}
.goods-details .param .list .li .txt .item .ili .tit{ width: 100%; height: auto; clear: both; font-size: 14px; color: #888888;}
.goods-details .param .list .li .txt .item .ili .cot{ width: 100%; height: auto; padding-top: 2px; clear: both; font-size: 20px; color: #ffffff; line-height: 135%;}
.goods-details .param .list .li .pic{ width: 500px; height: auto; clear: both; position: absolute; top: 0px; right: 0px; border-radius: 15px; font-size: 0px; line-height: 0px; overflow: hidden;}
.goods-details .param .list .li .pic img{ width: 100%; height: auto;}
.goods-details .param .list .li:not(:first-child) .attribute{ width: 350px;}
.goods-details .param .list .li:not(:first-child) .item{ width: 350px;}
.goods-details .param .list .li:nth-child(odd) .txt{ width: 350px; float: right;}
.goods-details .param .list .li:nth-child(odd) .pic{ left: 0px; right: auto;}
.goods-details .param .list .li:first-child .txt{ width: 500px !important; float: left !important;}
.goods-details .param .list .li:first-child .txt .title{ display: none;}
.goods-details .param .list .li:first-child .pic{ right: 0px !important; left: auto !important;}

.goods-details .comment{ width: 100%; height: auto; padding-bottom: 70px; clear: both; overflow: hidden;}
.goods-details .comment .tit{ width: 100%; height: auto; clear: both; font-size: 40px; color: #ffffff; line-height: 125%;}
.goods-details .comment .cot{ width: 600px; height: auto; padding-top: 50px; float: right;}
.goods-details .comment .cot .list{ width: 100%; height: auto; clear: both;}
.goods-details .comment .cot .list .li{ width: 100%; height: auto; clear: both; overflow: hidden;}
.goods-details .comment .cot .list .li .pic{ width: 60px; height: 60px; margin-top: 15px; float: left; border-radius: 60px 15px 60px 60px; font-size: 0px; line-height: 0px; overflow: hidden;}
.goods-details .comment .cot .list .li .pic img{ width: 100%; height: auto; min-height: 60px;}
.goods-details .comment .cot .list .li .txt{ width: 525px; height: auto; padding: 15px 0px; float: right; border-bottom: 1px solid #333333;}
.goods-details .comment .cot .list .li .txt .name{ width: 100%; height: auto; clear: both; font-size: 16px; color: #ffffff;}
.goods-details .comment .cot .list .li .txt .time{ width: 100%; height: auto; padding-top: 0px; clear: both; font-size: 14px; color: #888888;}
.goods-details .comment .cot .list .li .txt .content{ width: 100%; height: auto; padding-top: 5px; clear: both; font-size: 16px; color: #ffffff; line-height: 135%;}
.goods-details .comment .cot .list .li .txt .like{ width: auto; height: auto; margin-top: 10px; float: left; font-size: 14px; color: #888888; cursor: pointer;}
.goods-details .comment .cot .list .li .txt .like .icon{ width: 20px; height: 20px; margin-right: 3px; fill: #888888; vertical-align: middle; margin-top: -5px;}
.goods-details .comment .cot .list .li .txt .like.on{ color: #ffffff;}
.goods-details .comment .cot .list .li .txt .like.on .icon{ fill: #ffffff;}
.goods-details .comment .cot .more{ width: auto; height: auto; margin-top: 20px; padding-left: 75px; clear: both; overflow: hidden; user-select: none;}
.goods-details .comment .cot .more .li{ width: 30px; height: 30px; margin-right: 30px; float: left; border: 1px solid #333333; border-radius: 100%; cursor: pointer;}
.goods-details .comment .cot .more .li .icon{ width: 22px; height: 22px; padding: 4px; fill: #888888;}
.goods-details .comment .cot .more .li.left{ transform: scaleX(-1);}
.goods-details .comment .cot .more .li.disabled{ opacity: 0.5; cursor: auto;}

.goods-details .details .details-right{ width: 450px; height: auto; padding-bottom: 70px; position: sticky; top: 40px; align-self: flex-start; margin-left: auto; background: transparent;}
.goods-details .details-right .title{ width: 100%; height: auto; clear: both; font-size: 32px; color: #ffffff; line-height: 125%;}
.goods-details .details-right .price{ width: 100%; height: auto; padding-top: 25px; clear: both; font-size: 28px; color: #ffffff; font-weight: normal;}
.goods-details .details-right .quantity{ width: 100%; height: auto; padding-top: 80px; clear: both;}
.goods-details .details-right .quantity .txt{ display: inline-block; font-size: 16px; color: #ffffff;}
.goods-details .details-right .quantity .amount{ display: inline-block; margin-left: 20px; vertical-align: middle; margin-top: -4px; user-select: none;}
.goods-details .details-right .quantity .amount .icon{ display: inline-block; width: 18px; height: 18px; margin: 0px 5px 0px 5px; fill: #888888; cursor: pointer; vertical-align: middle;}
.goods-details .details-right .quantity .amount .icon.disabled{ fill: #444444; cursor: auto;}
.goods-details .details-right .quantity .amount input{ display: inline-block; width: 35px; height: 35px; padding: 0px 0px 1px 0px; border: 0px; background: none; box-shadow: none; outline-style: none; outline-width: 0px; outline-color: transparent; text-align: center; font-size: 16px; color: #ffffff; font-weight: lighter;}
.goods-details .details-right .buts{ width: 100%; height: auto; margin-top: 25px; clear: both;}
.goods-details .details-right .buts .but{ width: 400px; height: 60px; line-height: 60px; float: left; background: #ffffff; border: 1px solid #444444; box-sizing: border-box; border-radius: 15px; font-size: 18px; color: #000000; position: relative; overflow: hidden;}
.goods-details .details-right .buts .but:before{ width: 0; height: 0; content: ''; position: absolute; top: 50%; left: 50%;  background: #000000; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease;}
.goods-details .details-right .buts .but a{ display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 10; color: #000000; display: flex; align-items: center; justify-content: center;}
.goods-details .details-right .buts .but:hover:before{ width: 500px; height: 500px;}
.goods-details .details-right .buts .but:hover a{ color: #ffffff;}
.goods-details .details-right .buts .icon{ width: 30px; height: 30px; margin-top: 12px; float: right; fill: #ffffff; cursor: pointer; transition: all 0.5s ease;}
.goods-details .details-right .buts .icon.on{ fill: #ff0000; animation: scale 0.3s linear;}
.goods-details .details-right .sku{ width: 100%; height: auto; padding-top: 40px; clear: both;}
.goods-details .details-right .sku .tit{ width: 100%; height: auto; clear: both; font-size: 16px; color: #ffffff; line-height: 135%;}
.goods-details .details-right .sku .tit span.sku-tit{ font-weight: normal;}
.goods-details .details-right .sku .tit span a{ color: #ffffff; text-decoration: none;}
.goods-details .details-right .sku .cot{ width: 100%; height: auto; padding-top: 8px; clear: both; overflow: hidden;}
.goods-details .details-right .sku .cot .li{ width: 107px; height: auto; margin: 15px 5px 0px 0px; float: left; cursor: pointer; opacity: 0.5; transition: all 0.5s ease;}
.goods-details .details-right .sku .cot .li a{ display: block; text-decoration: none;}
.goods-details .details-right .sku .cot .li .pic{ width: 107px; height: 107px; clear: both; border-radius: 10px; font-size: 0px; line-height: 0px; overflow: hidden;}
.goods-details .details-right .sku .cot .li .pic img{ width: 100%; height: auto; min-height: 107px;}
.goods-details .details-right .sku .cot .li .txt{ width: 100%; height: auto; padding-top: 6px; clear: both; text-align: center; font-size: 16px; color: #ffffff;}
.goods-details .details-right .sku .cot .li.on{ opacity: 1;}

.goods-details .recommend{ width: 100%; height: auto; clear: both; overflow: hidden;}
.goods-details .recommend .tit{ width: 270px; height: auto; float: left;}
.goods-details .recommend .tit .txt{ width: 100%; height: auto; clear: both; font-size: 40px; color: #ffffff; line-height: 125%; text-transform: uppercase;}
.goods-details .recommend .tit .but{ width: 180px; height: 42px; margin-top: 50px; clear: both; border: 1px solid rgba(255,255,255,0.5); border-radius: 42px; font-size: 14px; color: #ffffff; position: relative; overflow: hidden;}
.goods-details .recommend .tit .but:before{ width: 0; height: 0; content: ''; position: absolute; top: 50%; left: 50%;  background: #ffffff; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease;}
.goods-details .recommend .tit .but a{ display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 10; color: #ffffff; display: flex; align-items: center; justify-content: center;}
.goods-details .recommend .tit .but:hover:before{ width: 300px; height: 300px;}
.goods-details .recommend .tit .but:hover a{ color: #000000;}
.goods-details .recommend .cot{ width: 1128px; height: auto; padding-top: 100px; float: right; overflow: hidden;}
.goods-details .recommend .cot .li{ width: 272px; height: auto; margin: 0px 0px 10px 10px; float: left; background: #ffffff; border-radius: 15px; overflow: hidden; transition: all 0.5s ease;}
.goods-details .recommend .cot .li a{ display: block; text-decoration: none;}
.goods-details .recommend .cot .li .pic{ width: 100%; height: 272px; clear: both; font-size: 0px; line-height: 0px; overflow: hidden;}
.goods-details .recommend .cot .li .pic img{ width: 100%; height: auto; min-height: 272px;}
.goods-details .recommend .cot .li .txt{ width: 90%; height: auto; margin: 0 auto; clear: both; border-top: 1px solid #f0f0f0;}
.goods-details .recommend .cot .li .txt .title{ width: 100%; height: 43px; padding-top: 10px; clear: both; text-align: center; font-size: 16px; color: #000000; line-height: 125%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.goods-details .recommend .cot .li .txt .param{ width: 100%; height: auto; clear: both; text-align: center; font-size: 14px; color: #888888;}
.goods-details .recommend .cot .li .txt .price{ width: 100%; height: auto; padding: 15px 0px 20px 0px; clear: both; text-align: center; font-size: 20px; color: #000000;}
.goods-details .recommend .cot .li:hover{ transform: translateY(-8px); box-shadow: 0px 10px 25px rgba(0,0,0,0.58);}

.popup-shopcart .cot{ width: 450px !important; position: absolute; right: 0px;}
.popup-shopcart .cot form{ width: 100%; height: 100%;}
.popup-shopcart .cot .title span.amount{ display: inline-block; padding-left: 5px; font-size: 14px; color: #888888; margin-top: -30px;}
.popup-shopcart .cot .content{ border-top: 0px !important;}
.popup-shopcart .shopcart{ width: 100%; height: 100%; clear: both;}
.popup-shopcart .shopcart .list{ width: 84%; height: calc(100% - 170px); margin: 0 auto; padding: 0 8%; clear: both; overflow-y: auto; position: relative; scrollbar-width: none; -ms-overflow-style: none;}
.popup-shopcart .shopcart .list::-webkit-scrollbar{ display: none;}
.popup-shopcart .shopcart .list::-webkit-scrollbar{ width: 0px; height: 0px; background: transparent;}
.popup-shopcart .shopcart .list .sli{ width: 100%; height: auto; padding: 20px 0px; clear: both; border-top: 1px solid #f3f3f3; overflow: hidden; display: grid; grid-template-columns: 100px 1fr; gap: 20px;}
.popup-shopcart .shopcart .list .sli:first-child{ border-top: 0px;}
.popup-shopcart .shopcart .list .sli .pic{ width: 100px; height: 100px; border: 1px solid #dddddd; box-sizing: border-box; border-radius: 15px; font-size: 0px; line-height: 0px; overflow: hidden; position: relative;}
.popup-shopcart .shopcart .list .sli .pic img{ width: 100%; height: auto; min-height: 100px;}
.popup-shopcart .shopcart .list .sli .pic .explain{ width: 80%; height: 100%; padding: 0 10%; clear: both; background: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; z-index: 1; text-align: center; display: grid; align-items: center; font-size: 14px;}
.popup-shopcart .shopcart .list .sli .txt{ width: auto; height: auto; position: relative;}
.popup-shopcart .shopcart .list .sli .txt .stitle{ clear: both; font-size: 16px; color: #000000; line-height: 135%;}
.popup-shopcart .shopcart .list .sli .txt .stitle a{ color: #000000;}
.popup-shopcart .shopcart .list .sli .txt .sprice{ padding-top: 5px; clear: both; font-size: 18px; color: #333333;}
.popup-shopcart .shopcart .list .sli .txt .samount{ width: 100px; height: 35px; margin-top: 20px; clear: both; border: 1px solid #888888; box-sizing: border-box; border-radius: 5px; overflow: hidden; display: grid; grid-auto-flow: column;}
.popup-shopcart .shopcart .list .sli .txt .samount .icon{ width: 18px; height: 18px; margin: 7px 0px 0px 5px; font-size: 0px; line-height: 0px; fill: #888888; cursor: pointer;}
.popup-shopcart .shopcart .list .sli .txt .samount .icon.disabled{ fill: #dddddd; cursor: auto;}
.popup-shopcart .shopcart .list .sli .txt .samount .amount{ width: 30px; height: 33px; line-height: 33px; text-align: center; font-size: 16px; color: #000000;}
.popup-shopcart .shopcart .list .sli .txt .sremove{ width: auto; height: 35px; line-height: 35px; clear: both; position: absolute; bottom: 0px; right: 0px; font-size: 12px; color: #000000;}
.popup-shopcart .shopcart .list .sli .txt .sremove a{ color: #000000; text-decoration: underline;}
.popup-shopcart .checkout{ width: 100%; height: 170px; padding: 0px 8%; clear: both; position: absolute; bottom: 0px; left: 0px; background: #ffffff; border-top: 1px solid #eeeeee; box-sizing: border-box;}
.popup-shopcart .checkout .total{ width: 100%; height: auto; padding-top: 15px; clear: both; font-size: 16px; color: #000000;}
.popup-shopcart .checkout .total span{ width: auto; height: auto; float: right; text-align: right; font-size: 18px; color: #000000; font-weight: normal;}
.popup-shopcart .checkout .explain{ width: 100%; height: auto; padding: 5px 0px 15px 0px; clear: both; font-size: 14px; color: #888888; line-height: 135%;}
.popup-shopcart .checkout .cbuts{ width: 100%; height: auto; clear: both; overflow: hidden;}
.popup-shopcart .checkout .cbuts .but{ display: inline-block; width: auto; height: 55px; margin-right: 10px; padding: 0 80px; background: #000000; border: 1px solid #000000; box-sizing: border-box; border-radius: 15px; font-size: 16px; color: #ffffff; position: relative; overflow: hidden;}
.popup-shopcart .checkout .cbuts .but:before{ width: 0; height: 0; content: ''; position: absolute; top: 50%; left: 50%;  background: #ffffff; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease;}
.popup-shopcart .checkout .cbuts .but a{ display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 10; color: #ffffff; display: flex; align-items: center; justify-content: center;}
.popup-shopcart .checkout .cbuts .but:hover:before{ width: 300px; height: 300px;}
.popup-shopcart .checkout .cbuts .but:hover a{ color: #000000;}
.popup-shopcart .checkout .cbuts .but.clear{ padding: 0 60px; background: #ffffff; color: #000000;}
.popup-shopcart .checkout .cbuts .but.clear a{ color: #000000;}
.popup-shopcart .checkout .cbuts .but.clear:before{ background: #f9f9f9;}



/*****Checkout*****/
.checkout{ width: 100%; height: auto; padding-bottom: 100px; clear: both; position: relative;}
.checkout .cot{ width: 1000px; height: auto; margin: 0 auto; padding-top: 120px; clear: both; overflow: visible; position: relative; display: flex;}

.checkout-logo{ width: 149px; height: auto; clear: both; font-size: 0px; line-height: 0px; position: absolute; top: 40px; right: 0px;}
.checkout-order{ width: 350px; height: auto; padding-top: 35px; clear: both; position: sticky; top: 0px; align-self: flex-start;}

.summary-items{ clear: both;}
.summary-item{ display: flex; gap: 15px; padding: 10px 0;}
.summary-item .item-img{ width: 80px; height: 80px; border-radius: 10px; overflow: hidden; flex-shrink: 0; position: relative; background: #1a1a1a; border: 1px solid #1a1a1a; box-sizing: border-box; font-size: 0; line-height: 0;}
.summary-item .item-img img{ width: 100%; height: 100%; object-fit: cover;}
.summary-item .item-info{ flex: 1; min-width: 0;}
.summary-item .item-info .name{ font-size: 14px; color: #ffffff; margin-bottom: 4px; line-height: 135%;}
.summary-item .item-info .spec{ font-size: 14px; color: #888888;}
.summary-item .item-price{ font-size: 16px; color: #ffffff; flex-shrink: 0; text-align: right;}

.summary-totals{ margin-top: 10px; padding: 12px 0px; border-top: 1px solid #333333;}
.summary-totals .total-row{ display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 16px; color: #888888;}
.summary-totals .total-row .value{ color: #ffffff;}
.summary-totals .total-row.grand{ padding-top: 20px; margin-top: 10px; border-top: 1px solid #1a1a1a; font-size: 18px; color: #ffffff;}
.summary-totals .total-row.grand .value{ width: 100%; text-align: right; font-size: 22px; color: #ffffff;}
.summary-totals .total-row.grand .value span.total-txt{ font-size: 16px; padding-right: 12px;}

.checkout-form{ flex: 1; padding: 70px 100px 0px 0px; display: flex; flex-direction: column; justify-content: center; gap: 60px;}
.checkout-form .section{ width: 100%; height: auto; clear: both;}
.checkout-form .section .stit{ width: 100%; height: auto; clear: both; font-size: 40px; color: #ffffff; line-height: 135%;}
.checkout-form .section .stit.small{ font-size: 20px;}
.checkout-form .section .scot{ width: 100%; height: auto; padding-top: 25px; clear: both;}
.checkout-form .section .scot .items{ width: 100%; height: auto; clear: both; display: flex; flex-direction: column; justify-content: center; gap: 15px;}
.checkout-form .section .scot .item{ background: #000000; border: 1px solid #282828; box-sizing: border-box; border-radius: 15px; transition: all 0.5s ease; display: flex; gap: 15px; padding: 16px 20px;}
.checkout-form .section .scot .item .info{ flex: 1; min-width: 0;}
.checkout-form .section .scot .item .info .itit{ font-size: 16px; color: #ffffff; line-height: 135%;}
.checkout-form .section .scot .item .info .icot{ padding-top: 10px; font-size: 14px; color: #888888; line-height: 135%;}
.checkout-form .section .scot .item .info .icot.unique{ padding-top: 0px;}
.checkout-form .section .scot .item .info .icot span{ display: block;}
.checkout-form .section .scot .item .info .itip{ display: none;}
.checkout-form .section .scot .item .right{ font-size: 16px; color: #ffffff; flex-shrink: 0; text-align: right;}
.checkout-form .section .scot .item .right .icon{ width: 17px; height: 17px; fill: #ffffff;}
.checkout-form .section .scot .item .right .icon.flip{ transform: scaleY(-1);}
.checkout-form .section .scot .item .right .pay-icon{ font-size: 0; line-height: 0px; display: flex;}
.checkout-form .section .scot .item .right .pay-icon .pli{ width: 40px; height: auto; margin-left: 5px; border-radius: 3px; overflow: hidden;}
.checkout-form .section .scot .item.big{ padding: 20px;}
.checkout-form .section .scot .item.improve{ border: 1px dashed #555555;}
.checkout-form .section .scot .item.pointer{cursor: pointer;}
.checkout-form .section .scot .item.textarea{ width: 100%; height: 80px; resize: none; font-size: 14px; color: #ffffff; font-weight: lighter;}
.checkout-form .section .scot .item .iadd{ width: 100%; padding: 10px 0px; text-align: center; font-size: 16px; color: #ffffff;}
.checkout-form .section .scot .item .iadd .icon{ display: block; width: 30px; height: 30px; margin: 0 auto; padding-bottom: 2px; fill: #ffffff;}
.checkout-form .section .scot .more{ text-align: right; font-size: 14px; color: #ffffff;}
.checkout-form .section .scot .more a{ color: #ffffff; text-decoration: underline;}
.checkout-form .submit-btn{ width: 100% !important;}
.checkout-form .submit-btn.on:hover:before{ width: 580px; height: 580px;}
.checkout-form .section .scot .item:hover{ background: #0e0e0d; border: 1px solid #555555;}
.checkout-form .section .scot .item.on{ background: #0e0e0d; border: 1px solid #888888;}
.checkout-form .section .scot .item.on .info .itip{ display: block;}

.popup-address .cot{ width: 580px !important; height: 90% !important; background: #000000 !important; border: 1px solid #888888; box-sizing: border-box; border-radius: 15px; position: absolute; top: 5%; left: 50%; margin-left: -290px; overflow: hidden;}
.popup-address .cot .title{ color: #ffffff !important;}
.popup-address .cot .title .close{ fill: #ffffff !important;}
.popup-address .cot .content{ border-top: 1px solid #333333 !important;}
.popup-address .address{ width: 92%; height: calc(100% - 80px); margin: 0 auto; padding: 0 4%; clear: both; overflow-y: auto; position: relative; scrollbar-width: none; -ms-overflow-style: none;}
.popup-address .address::-webkit-scrollbar{ display: none;}
.popup-address .address::-webkit-scrollbar{ width: 0px; height: 0px; background: transparent;}
.popup-address .address .profile-form{ width: 100%; padding: 20px 0 25px 0;}
.popup-address .buts{ width: 100%; height: 80px; padding: 15px 4% 0px 4%; clear: both; position: absolute; bottom: 0px; left: 0px; background: #000000; border-top: 1px solid #1a1a1a; box-sizing: border-box; text-align: right;}
.popup-address .buts .but{ display: inline-block; width: auto; height: 48px; margin-left: 10px; padding: 0 80px; background: #ffffff; border: 1px solid #ffffff; box-sizing: border-box; border-radius: 15px; font-size: 16px; color: #000000; position: relative; overflow: hidden;}
.popup-address .buts .but:before{ width: 0; height: 0; content: ''; position: absolute; top: 50%; left: 50%;  background: #000000; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease;}
.popup-address .buts .but a{ display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 10; color: #000000; display: flex; align-items: center; justify-content: center;}
.popup-address .buts .but:hover:before{ width: 300px; height: 300px;}
.popup-address .buts .but:hover a{ color: #ffffff;}
.popup-address .buts .but.clear{ padding: 0 60px; background: #000000; border: 1px solid #888888; color: #ffffff;}
.popup-address .buts .but.clear a{ color: #ffffff;}
.popup-address .buts .but.clear:before{ background: #000000;}

.popup-payment .cot{ width: 100% !important; background: rgba(0,0,0,0.7) !important;}
.popup-payment .cot .content{ height: 100% !important; border-top: 1px solid #000000 !important;}
.popup-payment .payment{ width: 100%; height: 100%; margin: 0 auto; clear: both; text-align: center; font-size: 18px; color: #ffffff; line-height: 135%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.popup-payment .payment span{ display: block;}
.popup-payment .payment a{ font-size: 16px; color: #ffffff; text-decoration: underline;}




/*****User*****/
.user{ width: 100%; height: auto; padding-bottom: 100px; clear: both; position: relative;}
.user .login{ width: 1000px; height: auto; margin: 0 auto; padding-top: 80px; clear: both; position: relative; display: flex;}

.login-logo{ width: 149px; height: auto; clear: both; font-size: 0px; line-height: 0px; position: absolute; top: 40px; right: 0px;}
.login-brand{ width: 320px; height: auto; clear: both;}
.login-brand .slogan{ padding-top: 50px; font-size: 35px; color: #ffffff; line-height: 125%; text-transform: uppercase;}
.login-brand .slogan span{ display: block; color: #ff0000;}
.login-brand .brand-line{ width: 30px; height: 1px; background: #ff0000; margin: 20px 0 35px 0;}
.login-brand .desc{ font-size: 16px; color: #888888; line-height: 135%;}

.login-form-panel{ flex: 1; padding: 100px 0px 0px 100px; display: flex; flex-direction: column; justify-content: center;}
.login-form-panel .form-title{ font-size: 40px; color: #ffffff; line-height: 125%; margin-bottom: 8px;}
.login-form-panel .form-subtitle{ font-size: 14px; color: #888888; margin-bottom: 35px;}
.login-form-panel .form-subtitle a{ margin-left: 5px; color: #ffffff;}
.login-form-panel .form-subtitle a:hover{ color: #ffffff;}

.login-field-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 15px;}
.login-field{ width: 100%; margin-bottom: 25px; position: relative;}
.login-field label{ display: block; font-size: 14px; color: #888888; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px;}
.login-field .input-wrap{ width: 100%; height: 52px; position: relative; display: flex;}
.login-field .input-wrap input{ width: 100%; height: 100%; padding: 0px; background: #000000; border: 0px; border-bottom: 1px solid #444444; font-size: 16px; color: #ffffff; font-weight: lighter; outline: none; box-shadow: none; outline-style: none; outline-width: 0px; outline-color: transparent; transition: border-color 0.3s ease;}
.login-field .input-wrap input::placeholder{ color: #444444;}
.login-field .input-wrap input:focus{ border-color: #888888;}
.login-field .input-wrap .field-icon{ position: absolute; top: 50%; left: 0px; transform: translateY(-50%); width: 20px; height: 20px; fill: #888888;}
.login-field .input-wrap.has-icon input{ padding-left: 30px;}
.login-field .input-wrap .toggle-pwd{ position: absolute; top: 50%; right: 0px; transform: translateY(-50%); width: 22px; height: 22px; fill: #888888; cursor: pointer; transition: fill 0.3s;}
.login-field .input-wrap .toggle-pwd:hover{ fill: #ffffff;}

.login-options{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; font-size: 14px;}
.login-options .remember{ display: flex; align-items: center; color: #888888; cursor: pointer; user-select: none;}
.login-options .remember input[type="checkbox"]{ width: 16px; height: 16px; margin-right: 8px; accent-color: #000000; background: none; box-shadow: none; outline-style: none; outline-width: 0px; outline-color: transparent; cursor: pointer;}
.login-options .remember a{ padding: 0 5px;}
.login-options .explain{ align-items: center; color: #888888;}
.login-options .forgot{ color: #888888; text-decoration: none;}
.login-options .forgot:hover{ color: #ffffff;}

.submit-btn{ width: 250px; height: 55px; clear: both; background: #ffffff; border: 1px solid #ffffff; box-sizing: border-box; border-radius: 15px; font-size: 16px; color: #000000; text-transform: uppercase; position: relative; overflow: hidden; opacity: 0.5;}
.submit-btn:before{ width: 0; height: 0; content: ''; position: absolute; top: 50%; left: 50%;  background: #000000; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease;}
.submit-btn a{ display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 10; color: #000000; display: flex; align-items: center; justify-content: center; cursor: default;}
.submit-btn:hover:before{ width: 0px; height: 0px;}
.submit-btn:hover a{ color: #000000; text-decoration: none;}
.submit-btn.on{ opacity: 1;}
.submit-btn.on a{ cursor: pointer;}
.submit-btn.on:hover:before{ width: 300px; height: 300px;}
.submit-btn.on:hover a{ color: #ffffff; text-decoration: underline;}
.submit-btn.submit-margin{ margin-top: 15px;}

/*****UserCenter*****/
.user-center{ width: 100%; background: #000000;}
.user-header-bar{ width: 100%; height: 200px; position: relative; overflow: hidden;}
.user-header-bar::before{ content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: radial-gradient(ellipse at right center, rgba(171,3,0,0.1) 0%, transparent 70%);}
.user-header-content{ width: 1400px; margin: 0 auto; display: flex; align-items: center; height: 100%; position: relative; z-index: 1;}
.user-avatar-area{ display: flex; align-items: center; gap: 30px;}
.user-avatar-area .avatar{ width: auto; height: auto; position: relative;}
.user-avatar-area .avatar .pic{ width: 100px; height: 100px; clear: both; border-radius: 50%; border: 2px solid #444444; font-size: 0; line-height: 0; overflow: hidden;}
.user-avatar-area .avatar .pic img{ width: 100%; height: 100%; object-fit: cover;}
.user-avatar-area .avatar .edit-badge{ position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; background: #ab0300; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.user-avatar-area .avatar .edit-badge svg{ width: 17px; height: 17px; fill: #ffffff;}
.user-avatar-area .info .name{ font-size: 30px; color: #ffffff; line-height: 125%;}
.user-avatar-area .info .email{ padding-top: 2px; font-size: 14px; color: #888888;}
.user-stats-row{ display: flex; gap: 50px; margin-left: auto;}
.user-stats-row .stat{ text-align: center; cursor: pointer;}
.user-stats-row .stat .num{ font-size: 28px; color: #ffffff;}
.user-stats-row .stat .label{ font-size: 14px; color: #888888; margin-top: 5px;}

.user-main{ width: 1400px; margin: 0 auto; display: flex; gap: 40px; padding: 40px 0 80px 0;}
.user-sidebar{ width: 260px; flex-shrink: 0;}
.user-sidebar .menu-group{ background: #0a0a0a; border: 1px solid #222222; border-radius: 15px; overflow: hidden;}
.user-sidebar .menu-group .group-title{ padding: 20px 24px 10px; font-size: 14px; color: #555555; text-transform: uppercase; letter-spacing: 1px;}
.user-sidebar .menu-group .menu-item{ display: flex; align-items: center; gap: 12px; padding: 16px 24px; font-size: 16px; color: #888888; cursor: pointer; transition: all 0.3s; position: relative; text-decoration: none;}
.user-sidebar .menu-group .menu-item:hover{ color: #ffffff; background: #111111;}
.user-sidebar .menu-group .menu-item.on{ color: #ffffff; background: #111111;}
.user-sidebar .menu-group .menu-item.on::before{ content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 24px; background: #ab0300; border-radius: 0 3px 3px 0;}
.user-sidebar .menu-group .menu-item svg{ width: 20px; height: 20px; fill: currentColor;}
.user-sidebar .menu-group .menu-item .badge{ margin-left: auto; min-width: 22px; height: 22px; line-height: 22px; padding: 0 6px; background: #ab0300; border-radius: 11px; text-align: center; font-size: 12px; color: #ffffff;}
.user-sidebar .menu-group .menu-item.logout{ color: #ab0300;}

.user-content{ flex: 1; min-width: 0;}
.user-content .section-title{ font-size: 32px; color: #ffffff; margin-bottom: 40px; display: flex; justify-content: space-between;}
.user-content .section-title .title-actions{ display: flex; gap: 10px; font-size: 14px; color: #888888;}

/*****Orders*****/
.order-tabs{ display: flex; gap: 0; margin-bottom: 25px; border-bottom: 1px solid #222222;}
.order-tabs .tab{ padding: 12px 24px; font-size: 16px; color: #888888; cursor: pointer; position: relative; transition: all 0.3s;}
.order-tabs .tab:hover{ color: #ffffff;}
.order-tabs .tab.on{ color: #ffffff;}
.order-tabs .tab.on::after{ content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 12px; height: 2px; background: #ab0300; border-radius: 1px;}

.order-card{ background: #0a0a0a; border: 1px solid #222222; border-radius: 15px; margin-bottom: 18px; overflow: hidden; transition: border-color 0.3s;}
.order-card:hover{ border-color: #444444;}
.order-card .order-header{ display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; background: #0e0e0e; border-bottom: 1px solid #222222; font-size: 14px;}
.order-card .order-header .order-id{ color: #888888;}
.order-card .order-header .order-id span{ color: #ffffff; margin-left: 8px;}
.order-card .order-header .order-status{ font-weight: normal; text-transform: uppercase; font-size: 13px; letter-spacing: 1px;}
.order-card .order-header .order-status.pending{ color: #ffaa00;}
.order-card .order-header .order-status.shipped{ color: #4488ff;}
.order-card .order-header .order-status.delivered{ color: #44cc44;}
.order-card .order-header .order-status.cancelled{ color: #888888;}
.order-card .order-body{ padding: 20px 24px; display: flex; align-items: center; gap: 20px;}
.order-card .order-body .product-img{ width: 100px; height: 100px; border-radius: 10px; overflow: hidden; flex-shrink: 0; font-size: 0; line-height: 0; background: #1a1a1a;}
.order-card .order-body .product-img img{ width: 100%; height: 100%; object-fit: cover;}
.order-card .order-body .product-info{ flex: 1; min-width: 0;}
.order-card .order-body .product-info .name{ font-size: 17px; color: #ffffff; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.order-card .order-body .product-info .spec{ font-size: 14px; color: #888888;}
.order-card .order-body .product-info .spec span{ margin-right: 20px;}
.order-card .order-body .product-price{ font-size: 20px; color: #ffffff; text-align: right; flex-shrink: 0;}
.order-card .order-body .product-price .qty{ font-size: 14px; color: #888888; margin-top: 4px;}
.order-card .order-footer{ display: flex; justify-content: space-between; align-items: center; padding: 15px 24px; border-top: 1px solid #222222; font-size: 14px;}
.order-card .order-footer .total{ color: #888888;}
.order-card .order-footer .total span{ color: #ffffff; font-size: 20px; margin-left: 6px;}
.order-card .order-footer .actions{ display: flex; gap: 10px;}
.order-card .order-footer .actions .btn{ padding: 8px 22px; border-radius: 8px; font-size: 14px; cursor: pointer; transition: all 0.3s;}
.order-card .order-footer .actions .btn-primary{ background: #ffffff; color: #000000; border: 1px solid #ffffff;}
.order-card .order-footer .actions .btn-primary:hover{ background: #ab0300; color: #ffffff; border-color: #ab0300;}
.order-card .order-footer .actions .btn-outline{ background: transparent; color: #ffffff; border: 1px solid #444444;}
.order-card .order-footer .actions .btn-outline:hover{ border-color: #888888;}

/*****Favorites*****/
.favorites-grid{ padding-bottom: 25px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;}
.fav-card{ background: #ffffff; border-radius: 15px; overflow: hidden; transition: all 0.5s ease; position: relative;}
.fav-card:hover{ transform: translateY(-8px); box-shadow: 0px 10px 25px rgba(0,0,0,0.58);}
.fav-card .fav-img{ width: 100%; aspect-ratio: 1/1; background: #1a1a1a; overflow: hidden; font-size: 0; line-height: 0;}
.fav-card .fav-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s;}
/*.fav-card:hover .fav-img img{ transform: scale(1.08);}*/
.fav-card .fav-remove{ position: absolute; top: 12px; right: 12px; z-index: 1; width: 30px; height: 30px; background: rgba(0,0,0,0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.3s;}
.fav-card:hover .fav-remove{ opacity: 1;}
.fav-card .fav-remove svg{ width: 16px; height: 16px; fill: #ffffff;}
.fav-card .fav-remove:hover{ background: #ab0300;}
.fav-card .fav-info{ padding: 10px 15px 20px 15px;}
.fav-card .fav-info .name{ font-size: 16px; color: #000000; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.fav-card .fav-info .spec{ font-size: 14px; color: #888888; margin-bottom: 12px;}
.fav-card .fav-info .bottom{ padding-top: 4px; display: flex; justify-content: space-between; align-items: center;}
.fav-card .fav-info .price{ font-size: 20px; color: #000000;}

/*****Profile*****/
.profile-section{ background: #0a0a0a; border: 1px solid #222222; border-radius: 15px; padding: 30px 30px 40px 30px; margin-bottom: 25px;}
.profile-section .sec-title{ font-size: 18px; color: #ffffff; margin-bottom: 30px; display: flex; align-items: center; gap: 10px;}
.profile-section .sec-title svg{ width: 20px; height: 20px; fill: #ab0300;}

.profile-form{ width: 70%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; position: relative;}
.profile-form .field{ width: 100%;}
.profile-form .field.full{ grid-column: 1 / -1;}
.profile-form .field label{ display: block; font-size: 14px; color: #888888; margin-bottom: 2px;}
.profile-form .field input, .profile-form .field select, .profile-form .field textarea{ width: 100%; height: 52px; padding: 0px; background: none; border: 0px; border-bottom: 1px solid #444444; font-size: 16px; color: #ffffff; font-weight: lighter; outline: none; box-shadow: none; outline-style: none; outline-width: 0px; outline-color: transparent; transition: border-color 0.3s ease;}
.profile-form .field input::placeholder, .profile-form .field textarea::placeholder{ color: #444444;}
.profile-form .field textarea{ height: 100px; resize: vertical;}
.profile-form .field input:focus, .profile-form .field select:focus, .profile-form .field textarea:focus{ border-color: #888888;}
.profile-form .field select{ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0px center;}
.profile-form .field input[type="date"]::-webkit-calendar-picker-indicator{ filter: invert(1);}
.profile-form .avatar{ width: 120px; height: 120px; clear: both; position: absolute; top: 0; right: -240px; border-radius: 50%; border: 2px solid #444444; font-size: 0; line-height: 0; overflow: hidden; cursor: pointer;}
.profile-form .avatar img{ width: 100%; height: 100%; object-fit: cover;}
.profile-form .avatar input{ display: none;}
.profile-form .default{ display: flex; align-items: center; color: #888888; cursor: pointer; user-select: none;}
.profile-form .default input[type="checkbox"]{ width: 16px; height: 16px; margin-right: 8px; accent-color: #000000; background: none; box-shadow: none; outline-style: none; outline-width: 0px; outline-color: transparent; cursor: pointer;}

/*****Address*****/
.address-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;}
.addr-card{ background: #0a0a0a; border: 1px solid #222222; border-radius: 15px; padding: 24px; position: relative; transition: border-color 0.3s;}
.addr-card:hover{ border-color: #444444;}
.addr-card.default{ border-color: #ab0300;}
.addr-card .default-tag{ position: absolute; top: 0; right: 24px; padding: 4px 12px; background: #ab0300; font-size: 11px; color: #ffffff; border-radius: 0 0 6px 6px; text-transform: uppercase; letter-spacing: 1px;}
.addr-card .name-phone{ font-size: 17px; color: #ffffff; margin-bottom: 10px;}
.addr-card .name-phone span{ margin-right: 20px;}
.addr-card .addr-detail{ font-size: 14px; color: #888888; line-height: 160%; margin-bottom: 16px;}
.addr-card .addr-actions{ display: flex; gap: 15px; font-size: 14px;}
.addr-card .addr-actions a{ color: #888888; text-decoration: none; cursor: pointer; transition: color 0.3s;}
.addr-card .addr-actions a:hover{ color: #ffffff;}
.addr-card .addr-actions a.set-default{ color: #ab0300;}

.addr-add-card{ background: transparent; border: 2px dashed #333333; border-radius: 15px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; transition: all 0.3s; min-height: 180px;}
.addr-add-card:hover{ border-color: #888888;}
.addr-add-card svg{ width: 36px; height: 36px; fill: #555555;}
.addr-add-card:hover svg{ fill: #ffffff;}
.addr-add-card span{ font-size: 15px; color: #888888;}
.addr-add-card:hover span{ color: #ffffff;}

/*****Points*****/
.points-overview{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px;}
.points-card{ background: #0a0a0a; border: 1px solid #222222; border-radius: 15px; padding: 30px; text-align: center;}
.points-card .pt-num{ font-size: 42px; color: #ffffff; font-weight: normal; margin-bottom: 6px;}
.points-card .pt-num.accent{ color: #ab0300;}
.points-card .pt-label{ font-size: 14px; color: #888888;}

.points-level{ background: #0a0a0a; border: 1px solid #222222; border-radius: 15px; padding: 30px; margin-bottom: 25px;}
.points-level .level-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.points-level .level-header .current{ font-size: 18px; color: #ffffff;}
.points-level .level-header .current span{ color: #ab0300;}
.points-level .level-header .next{ font-size: 14px; color: #888888;}
.points-level .level-bar{ width: 100%; height: 8px; background: #222222; border-radius: 4px; overflow: hidden; margin-bottom: 10px;}
.points-level .level-bar .fill{ height: 100%; background: linear-gradient(90deg, #ab0300, #dd3333); border-radius: 4px; transition: width 0.8s ease;}
.points-level .level-tips{ display: flex; justify-content: space-between; font-size: 13px; color: #555555;}

.points-history{ background: #0a0a0a; border: 1px solid #222222; border-radius: 15px; overflow: hidden;}
.points-history .history-header{ display: grid; grid-template-columns: 2fr 1.5fr 1fr 1fr; padding: 16px 24px; background: #0e0e0e; font-size: 14px; color: #888888; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #222222;}
.points-history .history-row{ display: grid; grid-template-columns: 2fr 1.5fr 1fr 1fr; padding: 18px 24px; font-size: 15px; border-bottom: 1px solid #111111; align-items: center; transition: background 0.2s;}
.points-history .history-row:hover{ background: #0e0e0e;}
.points-history .history-row:last-child{ border-bottom: none;}
.points-history .history-row .desc{ color: #ffffff;}
.points-history .history-row .date{ color: #888888;}
.points-history .history-row .amount{ font-weight: normal;}
.points-history .history-row .amount.plus{ color: #44cc44;}
.points-history .history-row .amount.minus{ color: #ff4444;}
.points-history .history-row .balance{ color: #ffffff;}

/*****Address Modal*****/
.addr-modal-overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; display: none; align-items: center; justify-content: center;}
.addr-modal-overlay.show{ display: flex;}
.addr-modal{ width: 600px; background: #0a0a0a; border: 1px solid #333333; border-radius: 20px; overflow: hidden;}
.addr-modal .modal-header{ padding: 24px 30px; border-bottom: 1px solid #222222; display: flex; justify-content: space-between; align-items: center;}
.addr-modal .modal-header h3{ font-size: 20px; color: #ffffff; margin: 0; font-weight: normal;}
.addr-modal .modal-header .close-modal{ width: 30px; height: 30px; fill: #888888; cursor: pointer; transition: fill 0.3s;}
.addr-modal .modal-header .close-modal:hover{ fill: #ffffff;}
.addr-modal .modal-body{ padding: 30px;}
.addr-modal .modal-body .profile-form{ display: block;}
.addr-modal .modal-body .profile-form .field{ margin-bottom: 18px;}
.addr-modal .modal-body .profile-form .field.row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px;}
.addr-modal .modal-footer{ padding: 20px 30px; border-top: 1px solid #222222; display: flex; justify-content: flex-end; gap: 12px;}
.addr-modal .modal-footer .btn{ padding: 10px 30px; border-radius: 10px; font-size: 15px; cursor: pointer; transition: all 0.3s;}
.addr-modal .modal-footer .btn-cancel{ background: transparent; color: #ffffff; border: 1px solid #444444;}
.addr-modal .modal-footer .btn-cancel:hover{ border-color: #888888;}
.addr-modal .modal-footer .btn-save{ background: #ffffff; color: #000000; border: 1px solid #ffffff;}
.addr-modal .modal-footer .btn-save:hover{ background: #ab0300; color: #ffffff; border-color: #ab0300;}















/*****Language*****/
.popup-language .cot{ width: 100% !important;}
.popup-language .cot .title{ height: 100px !important; line-height: 100px !important;}
.popup-language .cot .content{ height: calc(100% - 100px) !important; border: 0px !important;}
.popup-language .language{ width: 100%; height: 100%; margin: 0 auto; clear: both; overflow-y: auto; position: relative; scrollbar-width: none; -ms-overflow-style: none;}
.popup-language .language::-webkit-scrollbar{ display: none;}
.popup-language .language::-webkit-scrollbar{ width: 0px; height: 0px; background: transparent;}
.popup-language .language .lcot{ width: 800px; height: auto; margin: 0 auto; padding-top: 70px; clear: both; overflow: hidden;}
.popup-language .language .lcot .ltit{ width: 100%; height: auto; clear: both; font-size: 50px; color: #000000; line-height: 100%; text-transform: uppercase;}
.popup-language .language .lcot .lang{ width: 520px; height: auto; padding-top: 80px; float: right; overflow: hidden; display: flex; flex-wrap: wrap;}
.popup-language .language .lcot .lang .li{ width: 33%; height: auto; padding-bottom: 15px; font-size: 18px; color: #000000; line-height: 135%;}
.popup-language .language .lcot .lang .li a{ color: #000000;}



















/*****Search*****/
.sub-search{ width: 880px; height: 55px; margin: 0 auto; clear: both; background: #f3f3f3;}
.sub-search input{ width: 660px; height: 55px; line-height: 50px; margin: 0px; padding: 0px 20px; float: left; font-size: 18px; color: #333333; border: 0px; background: none; box-shadow: none; outline-color: invert; outline-style: none; outline-width: 0px; border: none; border-style: none; text-shadow: none; appearance: none; user-select: text; outline-color: transparent;}
.sub-search .but{ width: 120px; height: 55px; float: right; background: url(../image/search.png) center no-repeat #cccccc; font-size: 0px; line-height: 0px;}
.sub-search .but a{ display: block; width: 100%; height: 100%;}

/*****Feedback*****/
.feedback{ width: 1000px; height: auto; margin: 0 auto; padding: 10px 0 20px 0; clear: both;}
.feedback .f-exp{ width: 100%; height: auto; margin: 0 auto; clear: both; font-size: 16px; color: #ff0000;}
.feedback .f-cot{ width: 100%; height: auto; margin: 0 auto; padding-top: 20px; clear: both; font-size: 16px; color: #333333; line-height: 170%; overflow: hidden;}

/*****Form*****/
.form .li{ width: 100%; height: auto; padding-bottom: 15px; clear: both;}
.form .li .ftit{ width: 100%; height: auto; padding-bottom: 8px; clear: both; font-size: 16px;}
.form .li .ftit span{ color: #FF0000;}
.form .li .input{ width: 100%; height: auto; padding: 6px; clear: both; background: #fcfcfc; border: 1px solid #e7e7e7; box-sizing: border-box; font-size: 16px;}
.form .li .short{ width: 300px; position: relative;}
.form .li .input textarea{ width: 100%; height: 150px; padding: 0px; border: 0px; background: none; font-size: 14px; border: 0px; background: none; box-shadow: none; outline-color: invert; outline-style: none; outline-width: 0px; border: none; border-style: none; text-shadow: none; appearance: none; user-select: text; outline-color: transparent;}
.form .li .input input{ width: 100%; height: 24px; line-height: 24px; border: 0px; background: none; font-size: 14px; border: 0px; background: none; box-shadow: none; outline-color: invert; outline-style: none; outline-width: 0px; border: none; border-style: none; text-shadow: none; appearance: none; user-select: text; outline-color: transparent;}
.form .li .input select{ width: 100%; height: 30px; line-height: 24px; border: 0px; background: none; font-size: 14px; border: 0px; background: none; box-shadow: none; outline-color: invert; outline-style: none; outline-width: 0px; border: none; border-style: none; text-shadow: none; outline-color: transparent;}
.form .li .input select.small{ width: 120px; margin-right: 10px;}
.form .li .short .verify{ width: auto; height: auto; clear: both; position: absolute; top: 0px; right: -85px; font-size: 0px; line-height: 0px;}
.form .li .short .verify img{ width: 70px;}
.form .li .upload{ width: 100%; height: auto; clear: both; overflow: hidden;}
.form .li .upload .pli{ width: 100px; height: 100px; line-height: 85px; margin-right: 20px; float: left; border: 1px solid #dddddd; text-align: center; font-size: 60px; color: #eeeeee; font-family: iconfont; cursor: pointer; overflow: hidden; position: relative;}
.form .li .upload .pli:hover{ color: #cccccc;}
.form .li .upload .pli img{ width: 100px; height: 100px;}
.form .but{ width: 120px; height: 50px; line-height: 50px; margin-top: 20px; padding: 0px 20px; float: left; background: #1d454b; text-align: center; font-size: 18px; color: #ffffff; cursor: pointer;}
.form .but:hover{ background: #f88400; transition: all ease-in 0.3s;}

/*****Page*****/
.page{ width: 100%; height: auto; margin: 0 auto; padding: 20px 0px; clear: both; font-size: 14px; text-align: center;}
.page a{ display: inline-table; padding: 7px 15px; margin: 0 5px; border: 1px solid rgba(255,255,255,0.3); box-sizing: border-box; border-radius: 5px; text-align: center; color: #ffffff; text-decoration: none;}
.page a:hover{ background: #ffffff; color: #000000;}
.page a.on{ background: #ffffff; color: #000000;}
.page span{ display: inline-table; padding: 5px 4px;}

.load{ width: 100%; height: auto; min-height: 40px; margin: 0 auto; padding: 20px 0px; clear: both; text-align: center;}
.load .load-icon{ width: 30px; height: 30px; fill: #ffffff; animation: rotate 1s linear infinite;}
.load .load-txt{ width: 100%; height: auto; clear: both; text-align: center; font-size: 14px; color: #888888;}
.load .no-data{ padding-top: 0px;}
.load .no-data.distance{ padding-top: 40px;}

.no-data{ width: 300px; height: auto; margin: 0 auto; padding: 100px 0px 80px 0px; clear: both; text-align: center;}
.no-data .icon{ width: 200px !important; height: 200px !important; margin-left: -10px !important; fill: #444444 !important;}
.no-data .txt{ width: 100% !important; height: auto !important; clear: both !important; font-size: 16px !important; color: #888888 !important;}

/*Popup*/
.popup{ width: 100%; height: 100%; clear: both; background: rgba(0,0,0,0.4); position: fixed; top: 0px; left: 0px; z-index: 1000; visibility: hidden; opacity: 0; }
.popup.show{ visibility: visible; opacity: 1;}
.popup .cot{ width: 100%; height: 100%; clear: both; background: #ffffff;}
.popup .cot .title{ width: 100%; height: 80px; line-height: 80px; clear: both; text-align: center; font-size: 30px; color: #000000; position: relative;}
.popup .cot .title .close{ width: 30px; height: 30px; clear: both; position: absolute; top: 25px; right: 20px; fill: #444444; cursor: pointer; transition: all 0.4s ease;}
.popup .cot .title .close:hover{ transform: rotate(180deg);}
.popup .cot .content{ width: 100%; height: calc(100% - 80px); clear: both;  border-top: 1px solid #eeeeee; box-sizing: border-box; overflow-y: auto; position: relative;}

/*Toast*/
.toast{ padding: 15px 22px; position: fixed; top: 25px; right: 25px; z-index: 2000; background: #1a1a1a; border-radius: 5px; font-size: 14px; color: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transform: translateX(120%); opacity: 0; transition: transform 0.4s ease;}
.toast.show{ transform: translateX(0); opacity: 1;}
.toast.success{ background: #44cc44;}
.toast.error{ background: #ff4444;}
.toast.info{ background: #4488ff;}

/*Message*/
.message{ width: auto; height: auto; padding: 180px 0px 250px 0px; clear: both; background: #000000;}
.message .icon{ width: 60px; height: 60px; margin: 0 auto; clear: both; font-size: 0px;}
.message .icon img{ width: 100%; height: auto;}
.message .text{ width: auto; height: auto; padding-top: 25px; clear: both; text-align: center; font-size: 24px;}
.message .text span{ display: block; padding-top: 12px; font-size: 14px; color:#888888; line-height: 125%;}
.message .text span a{ color: #888888;}

@keyframes rotate{
    0% {transform: rotate(0deg)}
    50% {transform: rotate(180deg)}
    100% {transform: rotate(360deg)}
}
@keyframes rotate_half{
    0% {transform: rotate(0deg)}
    100% {transform: rotate(180deg)}
}
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes scale{ 
	0% {transform: scale(1);}
  50% {transform: scale(1.5);}
  100% {transform: scale(1);}
}