body, button, dd, div, dl, form, h1, h2, h3, h4, h5, h6, html, img, input, li, ol, p, ul { margin: 0; padding: 0; border: 0 } * { -webkit-tap-highlight-color: transparent; } body { font-family: "Montserrat-Regular", sans-serif, "Arial", "Microsoft YaHei", "Helvetica Neue", Helvetica; background-color: #ffffff; overflow-x: hidden; } .big_title{ height: 72px; /* font-size: 48px; */ font-family: Montserrat-BoldItalic, Montserrat; font-weight: 700; color: #000; font-size:48px; } .small_title { height: 56px; font-size: 18px; font-family: Montserrat-Medium, Montserrat; font-weight: 500; color: #3D3D3D; line-height: 56px; } .Beautymakeup { display: flex; } .Beautymakeup .item { margin: 15px; position: relative; overflow: hidden; height: 440px; } .Beautymakeup .item img { width: 100%; height: 100%; transition: all .5s; } .Beautymakeup .item:hover img{ /* overflow: hidden; */ transform:scale(1.3，1.3);; -ms-transform:scale(1.3,1.3);; /* IE 9 */ -moz-transform:scale(1.3,1.3);; /* Firefox */ -o-transform:scale(1.3,1.3);; /* Opera */ -webkit-transform:scale(1.3,1.3); } .Beautymakeup .item:nth-child(1) { flex: 1; } .Beautymakeup .item:nth-child(2) { flex: 2; margin-right:0; } .Beautymakeup .item .mengban { padding-left: 23px; font-size: 24px; font-family: Montserrat-BoldItalic, Montserrat; font-weight: 700; color: #FFFFFF; line-height: 32px; /* display: none; */ position: absolute; bottom: 0; width: 100%; height: 15%; /* background: linear-gradient(to top,#000,#fff); */ opacity: .8; text-align: left; transition: all .3s linear; /* background-color: rgba(189, 234, 123, .5); */ } .Beautymakeup .item:hover .mengban { /* display: block; */ /* background: linear-gradient(to top,#000,#fff); */ background: linear-gradient(180deg, rgba(2,2,2,0) 0%, #020202 100%); height: 20%; } .Beautymakeup1 { display: flex; /* justify-content: space-between; */ } .Beautymakeup1 .item { margin: 15px; position: relative; overflow: hidden; flex: 1; height: 440px; } .Beautymakeup1 .row { margin: 15px 0 15px 15px; position: relative; overflow: hidden; flex: 2; display: flex; } .Beautymakeup1 .row>div { margin: 0; position: relative; overflow: hidden; flex: 2; } .Beautymakeup1 .row>div:nth-child(1){ margin-right: 15px; } .Beautymakeup1 .row>div:nth-child(2){ margin-left: 15px; } .Beautymakeup1 .item img { width: 100%; height: 100%; transition: all .5s; } .Beautymakeup1 .item:hover img{ /* overflow: hidden; */ transform:scale(1.3，1.3);; -ms-transform:scale(1.3,1.3);; /* IE 9 */ -moz-transform:scale(1.3,1.3);; /* Firefox */ -o-transform:scale(1.3,1.3);; /* Opera */ -webkit-transform:scale(1.3,1.3); } .Beautymakeup1 .item .mengban { /* display: none; */ padding-left: 23px; font-size: 24px; font-family: Montserrat-BoldItalic, Montserrat; font-weight: 700; color: #FFFFFF; line-height: 32px; position: absolute; bottom: 0; width: 100%; height: 15%; /* background: linear-gradient(to top,#000,#fff); */ opacity: .8; transition: all .3s linear; text-align: left; /* background-color: rgba(189, 234, 123, .5); */ } .Beautymakeup1 .item:hover .mengban { /* display: block; */ /* background: linear-gradient(to top,#000,#fff); */ background: linear-gradient(180deg, rgba(2,2,2,0) 0%, #020202 100%); height: 20%; } @media only screen and (max-width: 1200px) { body .homeclassify { /* width: 1600px; */ display: block; } body .homeclassify .left ,body .homeclassify .right { width: 100%; } body .homeclassify .left ul li:nth-child(1) ,body .homeclassify .right ul li:nth-child(1) { margin-bottom:0; } } *{ padding: 0; margin: 0; box-sizing: border-box; } a { text-decoration: none; } ul { list-style: none; } .homeclassify { /* width: 1600px; */ margin: auto; /* background-color: #ccc; */ display: flex; } .homeclassify .left ,.homeclassify .right { width: 50%; } .homeclassify .left ul li a , .homeclassify .right ul li a { display: flex; } .homeclassify .left ul li a .imgbox img ,.homeclassify .right ul li a .imgbox img{ width: 100%; } .homeclassify .left ul li a .imgbox , .homeclassify .left ul li a .texbox{ width: 50%; } .homeclassify .right ul li a .imgbox , .homeclassify .right ul li a .texbox { width: 50%; } .homeclassify .left ul li a .texbox , .homeclassify .right ul li a .texbox { display: flex; flex-direction: column; align-items: center; justify-content: center; } .homeclassify .left ul li a .texbox .button_classify, .homeclassify .right ul li a .texbox .button_classify{ /* width: 30%; height: 10%; */ padding: 10px 15%; border: 1px solid #000; text-align: center; color: #000; } .homeclassify .left ul li a .texbox .title_classify, .homeclassify .right ul li a .texbox .title_classify { font-size: 36px; color: #000; margin-bottom: 8%; font-weight: 600; } .homeclassify .left ul li a .texbox .button_classify:hover , .homeclassify .right ul li a .texbox .button_classify:hover { background-color: #000; color: #fff; } /* .homeclassify .left ul li:nth-child(1) ,.homeclassify .right ul li:nth-child(1) { margin-bottom:30px; } */ .homeclassify .left ul li:nth-child(1) a .imgbox ,.homeclassify .right ul li:nth-child(1) a .imgbox { position: relative; } .homeclassify .left ul li:nth-child(1) a .imgbox .sanjiao ,.homeclassify .right ul li:nth-child(1) a .imgbox .sanjiao{ position: absolute; right: 0; top: 50%; transform: translate(0,-50%); float: left; width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent #fff transparent transparent; } .homeclassify .left ul li:nth-child(2) a .imgbox ,.homeclassify .right ul li:nth-child(2) a .imgbox { position: relative; } .homeclassify .left ul li:nth-child(2) a .imgbox .sanjiao ,.homeclassify .right ul li:nth-child(2) a .imgbox .sanjiao{ position: absolute; left: 0; top: 50%; transform: translate(0,-50%); float: left; width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent transparent #fff; } @media only screen and (max-width: 1200px) { .Beautymakeup .item:nth-child(2) { flex: 1; } .Beautymakeup1 .row{ flex: 1; } .Beautymakeup1 .row>.more{ display: none } .Beautymakeup1 .row>div:nth-child(1){ margin-right: 0; } /* 屏幕小于1200显示移动端布局 */ body .offers-section .box { display: block; } body .offers-section .box ul { width:50% } /* body .offers-section .box ul li { flex:1 } */ } button, input, textarea, select { -webkit-appearance: none; resize: none; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } img { border: 0; max-width: 100%; vertical-align: middle; } .none { display: none; } .online_x { cursor: pointer; } button:hover, input[type=submit]:hover { cursor: pointer } button:focus, input:active, input:focus, textarea:focus { /* border: 0*/ outline: 0 none; outline-color: transparent; } a { color: #333; display: inline-block; } a:link { text-decoration: none } a:visited { text-decoration: none } a:hover { text-decoration: none; } a:active { text-decoration: none } li { list-style: none; } .clear { clear: both; font-size: 0; line-height: 0; height: 0; visibility: hidden } .clearfix:after, .clearfix:before { content: ""; display: table } .clearfix:after { clear: both } .clearfix { zoom: 1; /* display: f; */ } @font-face { font-family: "didotb"; src: url('../fonts/DIDOT BOLD_0.TTF'); } @font-face { font-family: "didot"; src: url('../fonts/DIDOT_0.TTF'); } /* 2023.2.27 */ @font-face { font-family: "Montserrat-Black"; src: url('../fonts/Montserrat-Black-2.otf'); } @font-face { font-family: "Montserrat-Bold"; src: url('../fonts/Montserrat-Bold-3.otf'); } @font-face { font-family: "Montserrat-ExtraBold"; src: url('../fonts/Montserrat-ExtraBold-4.otf'); } @font-face { font-family: "Montserrat-ExtraLight"; src: url('../fonts/Montserrat-ExtraLight-5.otf'); } @font-face { font-family: "Montserrat-ExtraLight"; src: url('../fonts/Montserrat-ExtraLight-5.otf'); } @font-face { font-family: "Montserrat-Light"; src: url('../fonts/Montserrat-Light-6.otf'); } @font-face { font-family: "Montserrat-Medium"; src: url('../fonts/Montserrat-Medium-7.otf'); } @font-face { font-family: "Montserrat-Regular"; src: url('../fonts/Montserrat-Regular-8.otf'); } @font-face { font-family: "Montserrat-SemiBold"; src: url('../fonts/Montserrat-SemiBold-9.otf'); } @font-face { font-family: "Montserrat-Thin"; src: url('../fonts/Montserrat-Thin-10.otf'); } .conwidth { max-width: 1400px; width: 100%; margin: auto; } .header.on { } .header.on .headbox { position: fixed; left: 0; top: 0; width: 100%; background: #FFFFFF; z-index: 11; } /* 2023.2.25 */ /* edit by river 2022-05-06 */ .header .head-top { border-bottom: 2px solid #000; } .header .head-top .box { padding: 5px 20px 0 20px; display: flex; justify-content: space-between; align-items: center; /* 2023.2.25 */ /* border-bottom: 2px solid #000; */ } .header .logo { float: left; } .header .logo img { vertical-align: sub; } .header .logo a { line-height: 70px; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .header.on .logo a { line-height: 60px; } .header .icongroup { float: right; } .header .icongroup ul li { float: left; margin-right: 28px; line-height: 70px; cursor: pointer; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .header .icongroup ul #iconbox_cart { position: relative; } .header .icongroup ul #iconbox_cart a:hover +.shoppingcart { display: block; } .header .icongroup ul #iconbox_cart .shoppingcart:hover { display: block; } .header .icongroup ul #iconbox_cart .shoppingcart { position: absolute; width: 400px; box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1); height: 400px; background: #fff; right: -100px; display: none; z-index:20; } .header .icongroup ul #iconbox_cart .shoppingcart .shopping_box { height: 280px; overflow:auto; } .header .icongroup ul #iconbox_cart .shoppingcart .shoppingcart_content { display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid #000; } .header .icongroup ul #iconbox_cart .shoppingcart .shoppingcart_content .left_img { width:65px; height:65px; line-height: 30px; border:1px solid #000 } .header .icongroup ul #iconbox_cart .shoppingcart .shoppingcart_content .left_img img { width:100% } .header .icongroup ul #iconbox_cart .shoppingcart .shoppingcart_content .content_txt { line-height: 40px; flex: 1; margin-left:20px; } .header .icongroup ul #iconbox_cart .shoppingcart .bottom_btn { width: 400px; /* height:60px; */ line-height: 50px; position:absolute ; bottom:0; left:50%; transform: translate(-50%,0) } .header .icongroup ul #iconbox_cart .shoppingcart .bottom_btn .bottom_txt { display: flex; justify-content: space-between; padding: 0 20px; line-height: 30px; } .header .icongroup ul #iconbox_cart .shoppingcart .bottom_btn .bottom_a { text-align: center; /* border: 1px solid; */ margin: 20px; background-color: #000; color:#fff } .header .icongroup ul #iconbox_language { position: relative; display: inline-block; } .header .icongroup ul #iconbox_language .dropdown-content{ display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; top: 60px; right: 0; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); /* padding: 12px 16px; */ z-index:10 } .header .icongroup ul #iconbox_language:hover .dropdown-content { display: block; } .header .icongroup ul #iconbox_language .dropdown-content p{ line-height:35px; font-size:14px; } .header .icongroup ul #iconbox_language .dropdown-content p:hover { background:#ccc; color:#000 } /* .header.on .icongroup ul li { line-height: 40px; } */ .header .icongroup ul li:last-child { margin-right: 0; } .header .icongroup ul li a, .header .icongroup ul li span { display: block; margin: auto; } .header .icongroup ul li a img, .header .icongroup ul li span img { width: 23px; height: 23px; } /*弹窗*/ .popup { } .popup>ul>li { /*display: none;*/ position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 12; width: 100%; height: 100vh; overflow: auto; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; z-index: -1; } .popup>ul>li.on { /*display: block;*/ opacity: 1; visibility: visible; z-index: 12; } .popup>ul>li .close { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; line-height: 36px; text-align: center; cursor: pointer; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .popup>ul>li .close:hover { -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px rgba(0,0,0,0.2); } .popup>ul>li .close img { width: 17px; height: 17px; } /*搜索弹窗*/ /* 品牌轮播图 */ .sw6 .swiper-container-vertical { height:300px } .sw6 .swiper-container-vertical .swiper-wrapper .swiper-slide ul { display:flex; flex-wrap:wrap; text-align:center } .sw6 .swiper-container-vertical .swiper-wrapper .swiper-slide ul li { width:25%; padding:0 10px; } .search-popup { position: absolute; left: 50%; top: 50%; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: auto; background: #FFFFFF; max-width: 1100px; width: 90%; padding: 60px 65px 51px; box-sizing: border-box; } .search-popup .search-div { overflow: hidden; border-bottom: #999999 solid 1px; } .search-popup .search-div .txt { float: left; width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: calc(100% - 40px); height: 40px; line-height: 40px; box-sizing: border-box; } .search-popup .search-div .btn { float: right; width: 30px; height: 40px; background: url(./images/img28.png) top 5px right no-repeat; background-size: 20px 22px; } .search-popup .search-div input { color: #333333; font-size: 16px; line-height: 40px; background: none; border: none; outline: none; } .search-popup .search-div input::-webkit-input-placeholder { color: #999999; } .search-popup .search-div input::-moz-placeholder { color: #999999; } .search-popup .search-div input:-moz-placeholder { color: #999999; } .search-popup .search-div input:-ms-input-placeholder { color: #999999; } .search-popup .tit { color: #333333; font-size: 16px; font-weight: bold; } .search-popup .letterbox { margin-top: 35px; } .search-popup .letter { margin-top: 15px; } .search-popup .letter a { float: left; min-width: 30px; height: 30px; line-height: 30px; color: #666666; font-size: 16px; text-align: center; margin-right: 5px; margin-bottom: 10px; } .search-popup .letter a:last-child { margin-right: 0; } /* 个人中心 */ /* 个人中心隐藏右边 */ .setting_address_container .clearfix:before ,.setting_address_container .clearfix:after{ content: none; } .user_top .i-title .t1 { font-size: 24px; font-family: Arial-Bold, Arial; font-weight: 700; color: #3D3D3D; line-height: 22px; height: 22px; -webkit-background-clip: text; /* -webkit-text-fill-color: transparent; */ } .user_top .i-title .singout { height: 22px; font-size: 14px; font-family: Arial-Regular, Arial; font-weight: 400; color: #767676; line-height: 22px; } @media only screen and (min-width: 991px) { .search-popup .letter a:hover, .search-popup .letter a.on { background: #f4f4f4; } } .search-popup .trending { margin-top: 20px; } .search-popup .trending-box { margin-top: 15px; position: relative; width: 100%; overflow: hidden; padding-bottom: 45px; } .search-popup .trending-box ul { width: 100%; padding-bottom: 45px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } .search-popup .trending-box ul::-webkit-scrollbar { /*滚动条整体样式*/ width: 100%; /*高宽分别对应横竖滚动条的尺寸*/ height: 2px; background: #ececec; } .search-popup .trending-box ul::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #000000; } .search-popup .trending-box ul::-webkit-scrollbar-track { /*滚动条里面轨道*/ /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */ border-radius: 10px; } .search-popup .trending ul li { display: inline-block; vertical-align: top; width: 175px; margin-right: 22px; } .search-popup .trending ul li:last-child { margin-right: 0; } .search-popup .trending-box a { display: block; width: 100%; } .search-popup .trending-box .imgbox { width: 100%; overflow: hidden; } .search-popup .trending-box .imgbox img { width: 100%; } .search-popup .trending-box .txtbox { padding: 10px 15px 0px; text-align: center; white-space: normal; } .search-popup .trending-box .txtbox .t1 { color: #333333; font-size: 14px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .search-popup .trending-box .txtbox .t2 { color: #333333; font-size: 18px; font-weight: bold; margin-top: 15px; margin-bottom: 10px; } .search-popup .trending .swiper-container-horizontal>.swiper-scrollbar { height: 2px; } .search-popup .trending .swiper-scrollbar-drag { background: #000000; } /*忘记密码*/ .forget-password { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 12; width: 100%; height: 100vh; overflow: auto; background: rgba(0,0,0,0.5); display: none; } .forget-password .box { position: absolute; left: 50%; top: 50%; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: auto; background: #FFFFFF; max-width: 860px; width: 90%; padding: 55px 80px; box-sizing: border-box; } .forget-password .box .tit { color: #000000; font-size: 24px; font-weight: bold; /*font-family: arial;*/ padding-bottom: 18px; border-bottom: #e1e1e1 solid 1px; } .forget-password .box .text { margin-top: 30px; } .forget-password .box .text .txt { color: #888888; font-size: 16px; line-height: 1.7; /*font-family: arial;*/ margin-bottom: 25px; } .forget-password .box .text .sp { /*font-family: arial;*/ color: #000000; font-size: 16px; margin-bottom: 7px; } .forget-password .box .text .inputli { width: 100%; padding: 0 15px; border: #000000 solid 1px; box-sizing: border-box; } .forget-password .box .text .inputli input { width: 100%; height: 40px; line-height: 40px; border: none; outline: none; background: none; color: #333333; font-size: 16px; } .forget-password .box .text .inputbtn { margin-top: 46px; max-width: 450px; width: 100%; background: #000000; height: 60px; line-height: 60px; border-radius: 30px; color: #ffffff; font-size: 18px; text-transform: uppercase; overflow: hidden; } .forget-password .box .text .inputbtn a { display: block; width: 100%; height: 60px; /* line-height: 60px; */ border: none; outline: none; background: none; color: #ffffff; font-size: 18px; text-transform: uppercase; cursor: pointer; text-align: center; } .forgrt_close { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; line-height: 36px; text-align: center; cursor: pointer; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .forgrt_close:hover { -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px rgba(0,0,0,0.2); } .forgrt_close img { width: 17px; height: 17px; } /**/ .showbtn { text-align: center; } .showbtn span, .showbtn a { display: inline-block; padding: 0 25px; /*2022/7/1*/ color: #ffffff; /* background: #000000; */ -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .showbtn span img { display: inline-block; vertical-align: text-top; } .search-popup .trending .showbtn span { font-size: 12px; line-height: 36px; border-radius: 18px; } .search-popup .trending .showbtn span img { margin-right: 5px; } .i-banner .showbtn span, .i-banner .showbtn a, .trending-product .proli .showbtn span, .brands-section .box ul li .showbtn span, .showbtn.btn2 span { height: 50px; line-height: 50px; /* border-radius: 25px; */ letter-spacing: 1px; } .i-banner .showbtn span, .i-banner .showbtn a { font-size: 16px; background: #FFFFFF; color: #020406; font-weight: bold; /* 2023.2.23 */ text-align: center; } .trending-product .proli .showbtn span, .showbtn.btn2 span { font-size: 16px; /* background: #000000; color: #ffffff; */ /* 2023.2.23 */ background: #fff; color:#000; /* 2023.2.28 */ border:1px solid #000; } .showbtn.delete span { height: 45px; line-height: 45px; font-size: 14px; background: #000000; color: #ffffff; border-radius: 23px; } .i-banner .showbtn span img, .i-banner .showbtn a img, .trending-product .proli .showbtn span img, .showbtn.btn2 span img { display: inline-block; vertical-align: sub; margin-right: 10px; } .showbtn.delete span img { display: inline-block; vertical-align: inherit; margin-right: 10px; } .offers-section .showbtn span { position: relative; z-index: 2; border: #333333 solid 1px; line-height: 46px; /* border-radius: 23px; */ background: transparent; color: #333333; font-size: 16px; overflow: hidden; } .brands-section .box ul li .showbtn span { /*position: relative;*/ /*z-index: 2;*/ font-size: 14px; /*2022/7/1*/ height: 45px!important; line-height: 45px; /*2022/7/1*/ border-radius: 0 !important; letter-spacing: 1px; overflow: hidden; } /*.brands-section .box ul li .showbtn span::before{ content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #ffab8d; border-radius: 25px; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .brands-section .box ul li:hover .showbtn span{ background: none; }*/ /*.brands-section .box ul li:hover .showbtn span{ border: #ffab8d solid 1px; }*/ @media only screen and (min-width: 991px) { .brands-section .box ul li:hover .showbtn span::before { -webkit-transform: scale(1); transform: scale(1); } } .swbox .showbtn span, .showbtn.btn1 span { height: 60px; /*2023/2/23*/ line-height: 60px;/*2023/2/23*/ /*border-radius: 20px;*/ /*2022/7/1*/ letter-spacing: 1px; /* background-color: #000; 2023/2/23 */ /* font-size: 14px; */ font-size: 24px; /*2023/2/23*/ border: 1px solid #000; color: #000; } .swbox .showbtn span img, .showbtn.btn1 span img { display: inline-block; vertical-align: text-bottom; margin-right: 8px; } a:hover .showbtn span, .lunbotu .showbtn a:hover { /* 2023.2.28 */ /* background: #ffab8d; */ background:#fff } @media only screen and (min-width: 991px) { .swbox .proli a:hover .showbtn span { background: #000;/*font-weight: bold;*/ /*2022/7/1*/ color:#fff } .set-product ul li a:hover .showbtn.delete span { background: #000000; } .trending-product .proli a:hover .showbtn span { /* background: #ffab8d; */ font-weight: bold; /* 2023.2.23 */ background: #000; color:#fff } .offers-section ul li:hover .showbtn span { color: #ffffff; font-weight: bold; /* border: #ffab8d solid 1px;background: #ffab8d; */ border: #000 solid 1px; } .offers-section ul li a:hover .showbtn span { background: none; } .offers-section ul li:hover .showbtn span::before { width: 100%; } } .offers-section ul li .showbtn span::before { content: ''; position: absolute; left: 0; top: 0; width: 0; z-index: -1; height: 100%; background: #000; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } /*语言弹窗*/ .lang-popup { position: absolute; left: 50%; top: 50%; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: auto; background: #FFFFFF; max-width: 756px; width: 90%; padding: 30px 25px 40px; box-sizing: border-box; } .lang-popup .box .tit { color: #333333; font-size: 18px; font-weight: bold; text-align: center; padding-bottom: 20px; border-bottom: #707070 solid 1px; } .lang-popup .box .wrap { margin-top: 25px; } .lang-popup .box .wrap .subtit { color: #333333; font-size: 16px; font-weight: bold; text-align: center; } .lang-popup .box .wrap .l-wrap { float: left; width: 50%; overflow: hidden; } .lang-popup .box .wrap .l-wrap ul { overflow-y: auto; overflow-x: hidden; padding-right: 35px; margin-top: 15px; height: 160px; } .lang-popup .box .wrap .l-wrap ul::-webkit-scrollbar { /*滚动条整体样式*/ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 100px; background: #ececec; border-radius: 10px; } .lang-popup .box .wrap .l-wrap ul::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #000000; border-radius: 10px; } .lang-popup .box .wrap .l-wrap ul::-webkit-scrollbar-track { /*滚动条里面轨道*/ border-radius: 10px; } .lang-popup .box .wrap .l-wrap ul li { color: #333333; font-size: 16px; font-weight: bold; padding: 10px 20px 10px 45px; margin-bottom: 5px; } .lang-popup .box .wrap .l-wrap ul li.on { background: #f4f4f4 url(./images/img35.png) 15px 12px no-repeat; } .lang-popup .box .wrap .r-wrap { float: left; width: 50%; overflow: hidden; box-sizing: border-box; padding-left: 35px; } .lang-popup .box .wrap .r-wrap .r-wrapli { margin-bottom: 30px; } .lang-popup .box .wrap .r-wrap .selbox { margin-top: 18px; } .lang-popup .box .wrap .r-wrap .selbox select { width: 100%; border: #333333 solid 1px; outline: none; line-height: 38px; height: 40px; color: #333333; font-size: 14px; padding-left: 15px; padding-right: 30px; background: #f4f4f4 url(./images/img36.png) center right 15px no-repeat; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; appearance: none; -moz-appearance: none; -webkit-appearance: none; } .lang-popup .box .wrap .r-wrap .selbox .bor { width: 100%; border: #333333 solid 1px; outline: none; line-height: 38px; height: 40px; color: #333333; font-size: 14px; padding-left: 15px; padding-right: 30px; background: #f4f4f4; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; filter: alpha(opacity=80); opacity: 0.8; } .lang-popup .box .savebtn { margin-top: 35px; text-align: center; } .lang-popup .box .savebtn a { display: inline-block; width: 225px; height: 40px; line-height: 40px; background: #000000; color: #ffffff; font-size: 14px; } /*收藏弹窗*/ .collect-popup { position: absolute; right: 15%; top: 120px; background: #FFFFFF; max-width: 320px; width: 90%; padding: 65px 18px 45px; box-sizing: border-box; } .collect-popup .box { text-align: center; } .collect-popup .box a { display: block; width: 100%; height: 50px; line-height: 50px; border-radius: 25px; margin-bottom: 20px; background: #000000; font-size: 18px; color: #ffffff; } .collect-popup .txt { color: #888888; font-size: 16px; line-height: 1.7; text-align: center; } /*登录弹窗*/ .login-popup { position: absolute; left: 50%; top: 50%; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: auto; background: #FFFFFF; max-width: 1100px; width: 90%; padding: 60px 70px 64px; box-sizing: border-box; } .login-popup .box { } .login-popup .box .tit { color: #000000; font-size: 24px; font-weight: bold; padding-bottom: 20px; /* 2022.2.25 */ /* border-bottom: #e1e1e1 solid 1px; */ } .login-popup .box .tit_1 { font-size: 14px; font-family: Montserrat-Regular, Montserrat; font-weight: 400; color: #3D3D3D; line-height: 17px; } .login-popup .box .l-box { float: left; width: 50%; padding-right: 6.5%; border-right: #e1e1e1 solid 1px; overflow: hidden; box-sizing: border-box; } .login-popup .box .l-box .wrap { margin-top: 34px; } .login-popup .box .l-box .sp { color: #000000; font-size: 16px; margin-bottom: 10px; } .login-popup .box .l-box .formli { margin-bottom: 20px; } .login-popup .box .l-box .inputli { width: 100%; padding: 0 15px; border: #000000 solid 1px; box-sizing: border-box; } .login-popup .box .l-box .inputli input { width: 100%; height: 40px; line-height: 40px; border: none; outline: none; background: none; color: #333333; font-size: 16px; } .login-popup .box .l-box .forgot { display: block; width: 100%; color: #888888; font-size: 16px; text-align: center; text-decoration: underline; /* 2023.2.25 */ margin:26px 0; } @media only screen and (min-width: 991px) { .login-popup .box .l-box .forgot:hover { color: #333333; } } .login-popup .box .formbtn { text-align: center; margin-top: 26px; width: 100%; background: #000000; height: 60px; line-height: 60px; /* 2023.2.25 */ /* border-radius: 30px; */ color: #ffffff; font-size: 18px; text-transform: uppercase; overflow: hidden; } .login-popup .box .formbtn input, .login-popup .box .formbtn a { display: block; width: 100%; height: 60px; line-height: 60px; border: none; outline: none; background: none; color: #ffffff; font-size: 18px; text-transform: uppercase; cursor: pointer; } .continue { margin-top: 30px; text-align: center; } .continue .txt { color: #333333; font-size: 18px; } .continue ul { margin-top: 50px; } .register .box .continue ul { margin-top: 30px; } .continue ul li { display: inline-block; width: 170px; height: 55px; line-height: 53px; border: #dfdfdf solid 1px; border-radius: 10px; margin-right: 25px; box-sizing: border-box; } .continue ul li:nth-child(2n) { margin-right: 0; } .continue ul li a { display: block; width: 100%; color: #757373; font-size: 18px; } .continue ul li img { display: inline-block; margin-right: 14px; } .login-popup .box .r-box { float: left; width: 50%; padding-left: 6.5%; overflow: hidden; box-sizing: border-box; } .login-popup .box .r-box .text { /* margin-top: 35px; */ margin: 35px auto; text-align:center; } /* 2023.2.25 */ .login-popup .box .r-box .text .conntent_a { display: flex; width: 100%; /* border:1px solid red" */ background: #FAD7D7; } .login-popup .box .r-box .text .LOGO_A { height:24px; margin-bottom: 17px; } .login-popup .box .r-box .text p { margin: 18px 0; height: 15px; font-size: 12px; font-family: Montserrat-SemiBold, Montserrat; font-weight: 600; color: #000000; line-height: 15px; } .login-popup .box .r-box .subtit { color: #000000; font-size: 18px; } .login-popup .box .r-box ul { margin-top: 20px; margin-bottom: 45px; color: #666666; font-size: 16px; line-height: 1.7; } .login-popup .box .r-box ul li { position: relative; padding-left: 20px; margin-bottom: 10px; } .login-popup .box .r-box ul li i { position: absolute; left: 8px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: #000000; } /*注册*/ .register { padding-top: 3.1%; padding-bottom: 5.7%; } .register .box { max-width: 960px; width: 100%; margin: 20px auto 0px; } .register .box .wrap { border-top: #e1e1e1 solid 1px; border-bottom: #e1e1e1 solid 1px; padding-top: 36px; padding-bottom: 36px; } .register .box .formli { margin-bottom: 40px; } .register .box .formli:last-child { margin-bottom: 0; } .register .box .sp { color: #000000; font-size: 16px; margin-bottom: 10px; } .register .box .half { float: left; width: 47%; margin-right: 6%; margin-bottom: 25px; } .register .box .half:nth-child(2n) { margin-right: 0; } .register .box .formli .half { float: none; margin-bottom: 15px; } .register .box .inputli { width: 100%; padding: 0 15px; border: #aaaaaa solid 1px; box-sizing: border-box; } .register .box .inputli input { width: 100%; height: 40px; line-height: 40px; border: none; outline: none; background: none; color: #333333; font-size: 14px; } .register .box .inputli input::-webkit-input-placeholder { color: #aaaaaa; } .register .box .inputli input:-moz-placeholder { color: #aaaaaa; } .register .box .inputli input::-moz-placeholder { color: #aaaaaa; } .register .box .inputli input:-ms-input-placeholder { color: #aaaaaa; } .register .box .formli .txt { color: #aaaaaa; font-size: 14px; line-height: 1.7; } .register .box .formli .tips { color: #333333; font-size: 14px; line-height: 1.7; } .register .box .formbtn { text-align: center; margin: 70px auto 0px; width: 41.6%; background: #000000; height: 60px; line-height: 60px; border-radius: 30px; color: #ffffff; font-size: 18px; text-transform: uppercase; overflow: hidden; } .register .box .formbtn input { display: block; width: 100%; height: 60px; line-height: 60px; border: none; outline: none; background: none; color: #ffffff; font-size: 18px; text-transform: uppercase; cursor: pointer; } .register .box .text { color: #888888; font-size: 16px; line-height: 1.7; margin-top: 50px; text-align: center; } /**/ /* .header .nav { border-top: #d9d9d9 solid 1px; border-bottom: #d9d9d9 solid 1px; } */ .header .nav .conwidth>ul>li { float: left;/*margin-right: 5px;*/ padding: 10px 0; } .header .nav .conwidth>ul>li:last-child { margin-right: 0; } .header .nav .conwidth>ul>li>a { border-bottom:2px solid #fff; padding: 0 12px; color: #333333; font-size: 13px; line-height: 40px; font-weight: 700; font-family: Montserrat-Bold; /* background-color: */ ; /*font-family: arial;*/ -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .header .nav .conwidth>ul>li:hover>a, .header .nav .conwidth>ul>li.on>a { border-bottom: 2px solid #000; color: #000; } .header .nav .conwidth>ul>li:hover>.navcell, .header .nav .conwidth>ul>li.on>.navcell { display:block; } /*下拉菜单*/ .header .navcell { position: absolute; left: 0; /* top: 143px; */ /* 2023.2.25 */ top: 96px; z-index: 11; width: 100%; padding-bottom: 40px; background: #FFFFFF; display: none; } .header.on .navcell { /* top: 102px; */ /* top:84px */ /* 2023.2.25 */ top:83px } /* 2023.2.25 */ .header.on .navcell .imglist .txt .t0 { font-size: 14px; font-family: Montserrat-Medium, Montserrat; font-weight: 500; color: #3D3D3D; line-height: 18px; margin:12px 0; } .header.on .navcell .imglist .txt .price { font-size: 14px; font-family: Montserrat-Bold, Montserrat; font-weight: 700; color: #000000; line-height: 14px; } .header .navcell .close { position: absolute; right: 40px; top: 20px; width: 20px; height: 20px; text-align: right; cursor: pointer; } .header .navcell .close img { width: 17px; height: 17px; } .header .navcell .navlist { float: left; padding-top: 25px; width: 54%; box-sizing: border-box; } .header .navcell .navlist ul { font-size: 0; } .header .navcell .navlist ul li { /*float: left; width: 180px; margin-right: 45px;*/ display: inline-block; vertical-align: top; width: 23.5%; margin-right: 2%; margin-bottom: 2%; } .header .navcell .navlist ul li:nth-child(4n) { margin-right: 0; } .header .navcell .navlist ul li:last-child { margin-right: 0; } .header .navcell .navlist ul li .tit a { color: #333333; font-size: 16px; font-weight: bold; } .header .navcell .navlist ul li a { display: block; width: 100%; color: #666666; font-size: 14px; line-height: 1.6; padding: 7px 5px 7px 18px; box-sizing: border-box; } .TRENDINGPRODUCTS { display:none; } @media only screen and (min-width: 991px) { .header .navcell .navlist ul li a:hover { background: #f4f4f4; } } .header .navcell .imglist { float: right; padding-right: 18px; padding-top: 35px; width: 44%; box-sizing: border-box; /* 2023.2.25 */ max-height: 500px; overflow-y: auto; } .header .navcell .imglist ul li { float: left; /* border:1px solid #ccc */ /*width: 300px; margin-left: 50px;*/ width: 47%; /* 2023.2.25 */ /* margin-right: 6%; */ margin-right: 3%; } .header .navcell .imglist ul li:last-child { margin-right: 0; } .header .navcell .imglist ul li a { display: block; width: 100%; } .header .navcell .imglist ul li .tit { color: #333333; font-size: 16px; font-weight: bold; } .header .navcell .imglist ul li .img { width: 100%; overflow: hidden; margin-top: 15px; border:1px solid rgba(0,0,0,0.2); /* padding-bottom: 12px; */ margin-bottom: 12px; } .header .navcell .imglist ul li .img img { width: 100%; } .header .navcell .imglist ul li .txt { /* padding-top: 10px; */ padding: 12px 0; } .header .navcell .imglist ul li .txt .t1 { color: #333333; font-size: 14px; font-weight: bold; line-height: 1.7; height: 72px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .header .navcell .imglist ul li .txt .t2 { color: #333333; font-size: 14px; margin-top: 10px; } /**/ .header .head-other .box { background: url(./images/top_banner.png) no-repeat left; background-size: 100%; height: 24px; } .header .head-other .box ul { text-align: center; font-size: 0; height: 24px; } .header .head-other .box ul li { display: inline-block; vertical-align: middle; margin-right: 45px; } .header .head-other .box ul li:last-child { margin-right: 0; } .header .head-other .box ul li a, .header .head-other .box ul li span { display: block; height: 24px; font-size: 12px; width: 100%; color: #FFFFFF; /*font-family: arial;*/ /* font-size: 16px; */ line-height: 24px; } @media only screen and (min-width: 991px) { .header .head-other .box ul li a:hover, .header .head-other .box ul li span:hover { text-decoration: underline; } } .header .head-other .box ul li img { display: inline-block; vertical-align: text-bottom; margin-right: 10px; } .header .head-other .wrap { background: #333333; text-align: center; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media only screen and (min-width: 991px) { .header .head-other .wrap:hover { background: #ffab8d; } } .header .head-other .wrap a { display: block; width: 100%; color: #ffffff; font-size: 16px; font-weight: bold; /*font-family: arial;*/ line-height: 1.7; padding: 10px 0px; } /**/ @media only screen and (max-width: 1088px) {.footer .foot-nav ul li a { padding: 0 10px !important; }}/*2022/7/7*/ @media only screen and (max-width: 1195px){ .summer .box2 ul li .txtbox .t1{ padding: 0 15px!important; } }/*2022/7/7*/ @media only screen and (max-width: 1145px){ .summer .box2 ul li .txtbox .t1{ padding: 0 10px!important; } }/*2022/7/7*/ @media only screen and (max-width: 1096px){ .summer .box2 ul li{ width: 24% !important; margin-right: 1.33% !important; } .summer .box2 ul li:nth-child(4n){ margin-right: 0!important; } }/*2022/7/7*/ @media only screen and (max-width: 1717px) { .partner-section,.brands-section,.favourites,.category-section,.trending-product,.summer { margin: 4% 0 !important; padding: 0!important; } .now-section{ margin: 0 0 40px 0!important;} .now-section .box{ margin: 0 !important; } .category-section .box ul li{ margin-bottom:0!important; } .summer .box2{ margin: 4%!important;} .summer .box2 ul{ padding: 0 !important; } .summer .box2 ul li{ margin-bottom: 0!important; } .brands-section .box ul li:nth-child(5),.brands-section .box ul li:nth-child(6){ margin-bottom: 0!important; } .brands-section .box ul li .txtbox{ padding-bottom: 0 !important; } }/*2022/7/7*/ @media only screen and (max-width: 1718px){ .brands-section .box ul li{ margin-bottom: 4%!important; } } @media only screen and (max-width: 1173px){ .now-section .contentli .swiper-slide{ width: 50%!important;} } .m-header { position: fixed; top: auto; width: 100%; z-index: 999; background-color: #fff; height: 48px; -o-transition: height .5s ease-in; -ms-transition: height .5s ease-in; -moz-transition: height .5s ease-in; -webkit-transition: height .5s ease-in; transition: height .5s ease-in; max-width: 1400px; margin-left: auto; margin-right: auto; border-bottom-width: 0; border-bottom-style: solid; border-bottom-color: #c4c4c4; display: none; } .m-header .box { /*display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-end;*/ text-align: center; } .menuIcon, .searchIcon, .accountIcon, .collectIcon { float: left; width: 48px; height: 48px; line-height: 48px;/*display: flex; align-items: center; justify-content: center; padding-left: 0; padding-right: 0; cursor: pointer; min-width: 48px; box-sizing: border-box; background: 0 0; border: 0; height: auto; min-height: 48px;*/ } .m-header .logo { /*box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding-left: 8px; padding-right: 8px; order: 3; flex-basis: 104px; flex-grow: 1;*/ float: left; width: calc(100% - 192px); text-align: center; height: 48px; line-height: 48px; padding-left: 8px; padding-right: 8px; box-sizing: border-box; } .m-header .logo a { /*box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding-left: 8px; padding-right: 8px; order: 3; flex-basis: 104px; flex-grow: 1; height: 100%; transition: flex-basis .3s ease-in; color: transparent; flex-shrink: 0; z-index: 3; background-color: transparent; padding-right: 0; padding-left: 0; display: flex;*/ } .m-header .logo img { max-width: 100%; max-height: 15px; } .menuIcon img { width: 24px; height: 24px; } .navbox { display: flex; position: fixed; flex-direction: column; top: 0; left: -80%; bottom: 0; width: 80%; max-width: 322px; filter: alpha(opacity=0); opacity: 0; -o-transition: left .1s ease-in, opacity .3s ease; -ms-transition: left .1s ease-in, opacity .3s ease; -moz-transition: left .1s ease-in, opacity .3s ease; -webkit-transition: left .1s ease-in, opacity .3s ease; transition: left .1s ease-in, opacity .3s ease; background-color: #fff; z-index: 300; overflow: hidden; } .navbox.on { -o-transition: left .2s ease-out, opacity .3s ease; -ms-transition: left .2s ease-out, opacity .3s ease; -moz-transition: left .2s ease-out, opacity .3s ease; -webkit-transition: left .2s ease-out, opacity .3s ease; transition: left .2s ease-out, opacity .3s ease; left: 0; filter: alpha(opacity=100); opacity: 1; } .navbox .nav-btn { position: sticky; display: flex; justify-content: space-between; flex-shrink: 0; align-items: center; background-color: #fff; padding-top: 16px; padding-right: 16px; padding-bottom: 16px; padding-left: 16px; border-bottom: none; z-index: 99; max-height: 48px; box-sizing: border-box; } .navbox .nav-btn .menuHomeButton { display: flex; padding-left: 0; align-items: center; display: none; } .navbox .nav-btn .menuBackButton { background: 0 0; padding: 0; font-family: "Work Sans", sans-serif; font-size: 16px; line-height: 1.5; letter-spacing: 0; color: #333; font-weight: 400; text-transform: none; color: #000; text-transform: none; display: none; align-items: center; border: 0; height: 24px; } .navbox .nav-btn .menuHomeButton.btnshow, .navbox .nav-btn .menuBackButton.btnshow { display: flex; } .navbox .nav-btn .menuHomeButton.btnshow img { width: 24px; } .navbox .nav-btn .menuBackButton.btnshow img { width: 14px; } .navbox .nav-btn .menuBackButton img { margin-right: 4px; margin-left: 0; } .navbox .nav-btn .menuCross { display: flex; align-items: center; border: 0; height: 24px; padding: 0; background: 0 0; margin-left: 0; } .navbox .nav-btn .menuCross img { width: 16px; } .m-head { position: relative; height: calc(100% - 48px); } .m-head ul { display: block; padding: 0; margin: 0; list-style-type: none; display: flex; flex-direction: column; flex-grow: 1; width: 100%; margin-top: 0; margin-bottom: 0; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; overflow-y: scroll; } .m-head ul li a { display: flex; align-items: center; justify-content: space-between; padding-left: 16px; padding-right: 16px; word-break: normal; width: 100%; box-sizing: border-box; height: 48px; font-size: 16px; line-height: 1.5; letter-spacing: 0; color: #333; font-weight: 400; } .m-head ul li a:hover { background: #f2f2f2; } .m-head ul li a img { float: right; width: 14px; } .m-head ul li .leveltwo, .m-head ul li .levelthree { display: none; -o-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -moz-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); padding: 0; margin: 0; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; -o-transition: transform .3s ease; -ms-transition: transform .3s ease; -moz-transition: transform .3s ease; -webkit-transition: transform .3s ease; transition: transform .3s ease; display: flex; background: #FFFFFF; } .m-head ul li .leveltwo.on, .m-head ul li .levelthree.on { -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } /**/ .m-header .overlay { transition: opacity .3s ease; position: fixed; top: 0; right: 0; bottom: 0; height: 100%; width: 100%; z-index: 10; background-color: rgba(0,0,0,.5); pointer-events: none; filter: alpha(opacity=0); opacity: 0; } .m-header .overlay.on { filter: alpha(opacity=100); opacity: 1; pointer-events: all; } .m-header .searchBox { -o-transition: opacity .3s ease; -ms-transition: opacity .3s ease; -moz-transition: opacity .3s ease; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; position: fixed; top: 0; right: 0; width: 100%; z-index: 300; pointer-events: none; filter: alpha(opacity=0); opacity: 0; } .m-header .searchBox.on { filter: alpha(opacity=100); opacity: 1; pointer-events: all; } .closeIcon { width: 48px; height: 48px; line-height: 48px; text-align: center; background-color: #f2f2f2; } .closeIcon img { } .m-header .searchBox .closeIcon { margin-left: 48px; } .m-header .collectBox .closeIcon { float: right; } .m-header .accountBox .closeIcon { float: right; margin-right: 0; } .m-header .searchBox .search-div { width: 100%; box-sizing: border-box; padding: 16px; background-color: #f2f2f2; } .m-header .searchBox .search-div form { border: #000000 solid 1px; background: #FFFFFF; } .m-header .searchBox .search-div .txt { float: left; width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: calc(100% - 40px); box-sizing: border-box; padding: 0 20px; } .m-header .searchBox .search-div input { color: #000000; font-size: 16px; height: 40px; line-height: 40px; background: none; outline: none; border: none; } .m-header .searchBox .search-div .btn { float: left; width: 40px; height: 40px; background: url(./images/img28.png) center no-repeat; } .collectBox { -o-transition: opacity .3s ease; -ms-transition: opacity .3s ease; -moz-transition: opacity .3s ease; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; position: fixed; top: 0; right: 48px; max-width: 350px; width: 100%; z-index: 300; pointer-events: none; filter: alpha(opacity=0); opacity: 0; } .m-header .collectBox.on { filter: alpha(opacity=100); opacity: 1; pointer-events: all; } .collectBox .box { text-align: center; padding-top: 20px; padding-bottom: 20px; margin-top: 48px; background-color: #f2f2f2; } .collectBox .box a { display: block; width: 70%; height: 40px; line-height: 40px; border-radius: 25px; margin: 15px auto 0px; background: #000000; font-size: 16px; color: #ffffff; } .collectBox .txt { padding-top: 15px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; color: #888888; font-size: 16px; line-height: 1.7; text-align: center; background-color: #ffffff; } .accountBox { -o-transition: opacity .3s ease; -ms-transition: opacity .3s ease; -moz-transition: opacity .3s ease; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; position: fixed; top: 0; right: 0; max-width: 400px; width: 100%; z-index: 300; pointer-events: none; filter: alpha(opacity=0); opacity: 0; } .m-header .accountBox.on { filter: alpha(opacity=100); opacity: 1; pointer-events: all; } .m-header .accountBox .wrap { clear: both; padding: 20px 20px 40px; background: #f2f2f2; } .m-header .accountBox .wrap .sp { color: #000000; font-size: 16px; margin-bottom: 10px; } .m-header .accountBox .wrap .formli { margin-bottom: 20px; } .m-header .accountBox .wrap .inputli { width: 100%; padding: 0 15px; border: #000000 solid 1px; box-sizing: border-box; } .m-header .accountBox .wrap .inputli input { width: 100%; height: 40px; line-height: 40px; border: none; outline: none; background: none; color: #333333; font-size: 16px; } .m-header .accountBox .wrap .forgot { display: block; width: 100%; color: #888888; font-size: 16px; text-align: center; text-decoration: underline; } .m-header .accountBox .wrap .forgot:hover { color: #333333; } .m-header .accountBox .wrap .formbtn { text-align: center; margin-top: 26px; width: 80%; margin: 15px auto; background: #000000; height: 40px; line-height: 40px; border-radius: 30px; color: #ffffff; font-size: 18px; text-transform: uppercase; overflow: hidden; } .m-header .accountBox .wrap .formbtn input, .m-header .accountBox .wrap .formbtn a { display: block; width: 100%; height: 40px; line-height: 40px; border: none; outline: none; background: none; color: #ffffff; font-size: 18px; text-transform: uppercase; cursor: pointer; } .continue ul { margin-top: 30px; } .continue ul li { /* 2023.2.25 */ /* width: 40%; */ width: 100%; /* margin-right: 5%; */ margin-bottom: 5%; height: 40px; line-height: 38px; box-sizing: border-box; } .continue ul li:nth-child(2n) { margin-right: 0; } .continue ul li img { max-height: 20px; } .continue ul li a { font-size: 16px; } /* followus */ .followus { height: 75px; background: #FFFFFF; border-top: 1px solid #DDDDDD; } .followus .content { display:flex; /* flex-direction: column; */ align-items: center; justify-content:center; } .followus .content .left { /* line-height: 75px; */ padding: 10px 20px; border-right:1px dashed #D8D8D8; font-weight:700; } .followus .content .right { } .followus .content .right ul { display:flex } .followus .content ul li { line-height: 75px; margin: 0 26px; } /*footer*/ .footer { /*padding-top: 60px;*//*2022/7/6*/ background: #000; } .footer .foot-top { padding: 30px 0 30px 0;/*2022/7/6*/ } .footer .foot-nav { /* float: left; */ /* width: 67.5%; */ } .footer .foot-nav ul { display: flex; justify-content: space-between; } .footer .foot-nav ul li { flex: 1; /* float: left; */ /* width: 27%; */ /* margin-right: 9.5%; */ /* display: flex; */ /* justify-content: space-between; */ } /*.footer .foot-nav ul li:nth-child(3n){margin-right:0;}*//*2022/7/6*/ .footer .foot-leftnav ul li { float: left !important; width: 27%!important; font-size: 14px; line-height: 1.7; margin-right: 0 !important; }/*2022/7/6*/ .footer .tit { color: #FFFFFF; font-size: 18px;/*2022/7/2*/ font-weight: bold; -webkit-box-sizing: border-box; box-sizing: border-box;/*margin-bottom: 15px;*//*2022/7/6*/ } .footer .drop-down .dropli{ margin: 15px 0 } .footer .subtit { color: #333333; font-size: 16px; line-height: 1.5; margin-bottom: 15px; } .footer .foot-nav ul li .tit { padding: 0px 20px; } .footer .foot-enter .tit { margin-bottom: 25px; } .footer .foot-nav ul li a { display: block; width: 100%; padding: 0 20px;/*2022/7/6*/ -webkit-box-sizing: border-box; box-sizing: border-box; color: #FFFFFF; font-size: 14px;/*2022/7/6*/ line-height: 1.7; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .footer .foot-nav ul li a img { display: inline-block; /*vertical-align: text-top;*/ vertical-align: middle; margin-right: 10px; } .footer .foot-nav ul li a:hover { background-color: #e4e4e4; } .footer .foot-enter { float: right; /*max-width: 320px;*//*2022/7/5*/ width: 28%; } .footer .foot-enter form { width: 100%; overflow: hidden; } .footer .foot-enter .txt { float: left; width: -moz-calc(100% - 45px); width: -webkit-calc(100% - 45px); width: calc(100% - 45px); box-sizing: border-box; border: #999999 solid 1px; padding: 0px 20px; } .footer .foot-enter input { width: 100%; height: 42px; line-height: 42px; background: none; outline: none; border: none; color: #333333; font-size: 14px; } .footer .foot-enter .btn { float: right; width: 45px; height: 44px; background: #000000 url(./images/img16.png) center no-repeat; } /*.footer .follow{ margin-top: 35px; }*/ .footer .follow .text { color: #333333; font-size: 16px;/*2022/7/2*/ margin: 20px 0 0 0;/*2022/7/4*/ font-weight: bold; } .footer .follow .foot_logo img { width: 100%; }/*2022/7/6*/ .footer .follow ul { margin-top: 15px; } .footer .follow ul li { position: relative; float: left; margin-right: 20px; } .footer .follow ul li:last-child { margin-right: 0; } .footer .follow ul li .box { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; position: absolute; top: 40px; left: 50%; margin-left: -50px; width: 100px; height: 100px; padding-bottom: 12px; z-index: 10; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); -webkit-transform: translate(0, 20px); transform: translate(0, 20px); visibility: hidden; } .footer .follow ul li:hover .box { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); visibility: visible; } .footer .follow ul li .code { background: #FFFFFF; } .footer .follow ul li .code img { width: 100px; height: 100px; } .footer .foot-bot { width: 100%; background-color: #000; padding: 20px 0px; border-top: #696363 solid 1px; } .footer .copyright { float: left; color: #999999; font-size: 16px; line-height: 1.5; padding-top: 10px; } .footer .copyright a { display: inline-block; color: #333333; } .footer .pay-way { display:flex; float: right; align-items: center; } .footer .pay-way .pay { color:#fff; } .footer .pay-way ul li { float: left; margin-right: 10px; /* border: #cacaca solid 1px; */ border-radius: 5px; width: 72px; line-height: 38px; height: 40px; text-align: center; box-sizing: border-box; } .footer .pay-way ul li span { display: block; width: 100%; } .footer .pay-way ul li span img { max-width: 100%; } .sidebar { position: fixed; right: 20px; bottom: 120px; z-index: 11; } .sidebar ul li { margin-bottom: 5px; } .sidebar ul li a, .sidebar ul li span { display: block; width: 52px; height: 52px; border: #d1d1d1 solid 1px; border-radius: 50%; box-sizing: border-box; text-align: center; line-height: 50px; background: #FFFFFF; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .sidebar ul li a img, .sidebar ul li span img { max-width: 100%; } .sidebar ul li .ic2 { display: none; } .sidebar ul li:hover .ic1 { display: none; } .sidebar ul li:hover .ic2 { display: inline-block; } .sidebar ul li.on a, .sidebar ul li:hover span { background: #000000; border: #000000 solid 1px; } /*banner*/ .lunbotu { position: relative; width: 100%; overflow: hidden; } .lunbotu .swiper-slide { position: relative; display: block; width: 100%; } .lunbotu .swiper-slide>img { width: 100%; } /*.lunbotu .swiper-slide a{ position: relative; display: block; width: 100%; } .lunbotu .swiper-slide a>img{ width: 100%; }*/ .oimg1 { display: block; width: 100%; } .oimg2 { display: none; width: 100%; } .oimg3 { display: none; width: 100%; } .i-banner { position: absolute; left: 50%; top: 50%; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } .i-banner .box { text-align: center; } .i-banner .box .t1 { font-family: "didotb"; color: #ffffff; font-size: 48px; } .i-banner .box .t2 { font-family: "didot"; color: #ffffff; font-size: 20px; line-height: 1.5; margin-top: 15px; margin-bottom: 40px; } .lunbotu>.swiper-pagination-bullets, .lunbotu .swiper-pagination-custom, .lunbotu .swiper-pagination-fraction { bottom: 40px; left: 0; width: 100%; } .lunbotu.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0px 5px; } .lunbotu .swiper-pagination-bullet { position: relative; display: inline-block; width: 45px; height: 4px; text-align: center; background: #6a6a6b; border-radius: 0; opacity: 1; box-shadow: none; -webkit-transition-duration: .3s; transition-duration: .3s; overflow: hidden; } .lunbotu .swiper-pagination-bullet-active { position: relative; opacity: 1; border-radius: 0; background-color: #ffffff; } /*index*/ .i-title { /* text-align: center; */ /* 2023.2.23 */ text-align:left; } .i-title .t1 { /* color: #333333; */ /*font-size: 36px; font-weight: bold;*/ /* 2023.2.23 */ height:72px; font-size:48px; font-family: Montserrat-BoldItalic, Montserrat; font-weight: 700; color:#000; line-height; /* 2023.2.23 */ /* font-size: 28px; font-family: "Work Sans", sans-serif; */ } /* 2023.2.23 */ .i-title .txt { height: 56px; font-size: 18px; font-family: Montserrat-BoldItalic, Montserrat; font-weight: 700; color: #3D3D3D; line-height: 56px; } .i-title .t2 { color: #333333; font-size: 18px; line-height: 1.7; } .beauty-box .i-title .t2 { margin-top: 3.5%; } .uppercase { /*text-transform: uppercase;*/ /*2022/7/2*/ } /*TRENDING PRODUCTS*/ /* .trending-product { padding-top: 4.68%; padding-bottom: 3.1%; } */ .trending-product .box { position: relative; max-width: 1525px; width: 100%; margin: auto; } .trending-product .swiper-container { position: relative; width: 100%; overflow: hidden; margin-top: 4%; } .trending-product .showbtn { text-align: left; } .trending-product .proli .showbtn span { border-radius: 0 !important; line-height: 45px !important; height: 45px; margin-bottom: 10px; } .trending-product .proli a:hover .showbtn span { font-weight: normal !important; } .proli { width: 100%;/*overflow: hidden;*/ } .proli a { display: block; width: 100%; } .proli .imgbox { position: relative; width: 100%; overflow: hidden; } .proli .imgbox .promotion { width:90px; height:97px; background-color: #f4d04b; position: absolute; top:0; left:0; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 5; } .proli .imgbox img { /* width: 100%; */ -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .proli .imgbox img.im1 { /*display: block;*/ } .proli .imgbox img.im2 { /*display: none;*/ position: absolute; visibility: hidden; filter: alpha(opacity=0); opacity: 0; } .set-product ul li .imgbox { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media only screen and (min-width: 991px) { .proli a:hover .imgbox img { -o-transform: scale(1.2); -ms-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); } a:hover .proli .imgbox img { -o-transform: scale(1.15); -ms-transform: scale(1.15); -moz-transform: scale(1.15); -webkit-transform: scale(1.15); transform: scale(1.15); } a:hover .proli .imgbox img.im1, .proli a:hover .imgbox img.im1 { /*display: none;*/ position: absolute; visibility: hidden; filter: alpha(opacity=0); opacity: 0; } a:hover .proli .imgbox img.im2, .proli a:hover .imgbox img.im2 { /*display: block;*/ position: static; visibility: visible; filter: alpha(opacity=100); opacity: 1; } .set-product ul li:hover .imgbox { -moz-box-shadow: 3px 0px 20px rgba(0,0,0,0.6); -webkit-box-shadow: 3px 0px 20px rgba(0,0,0,0.6); box-shadow: 3px 0px 20px rgba(0,0,0,0.6); } } .proli .imgbox .store-up { position: absolute; right: 20px; top: 20px; width: 20px; height: 20px; background: url(./images/img40.svg) center no-repeat; } .proli .imgbox .store-up.on { background: url(./images/img41.png) center no-repeat; } .proli .imgbox .deleteIcon { position: absolute; right: 20px; top: 20px; width: 20px; height: 20px; background: url(./images/love.png) center no-repeat; } .proli .txtbox { padding: 20px; text-align: center; } .beauty-box .rightbox .swbox .proli .txtbox { padding: 15px 10px; } .proli .txtbox .t1 { color: #333333; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; /* overflow: hidden; */ /*text-transform:uppercase; /*2022/7/1*/ /* font-size: 14px;2022/7/4 */ /*height:48px;*/ line-height: 1.5;/*2022/7/4*/ overflow: hidden; } .trending-product .box .proli a:hover .txtbox .t1 { text-decoration: underline; } .proli .txtbox .t2 { color: #333333; font-size: 12px; } .proli .txtbox .t2 .line { text-decoration: line-through; } .proli .txtbox .t3 { font-weight: bold; color: #333333; font-size: 24px;/*2023/2/23*/ margin: 15px 0 20px 0; /*2022/7/1*/ height:72px; line-height:72px } .proli .txtbox .w1 { margin-top: 15px; margin-bottom: 15px; } .proli .txtbox .w1 span { width: 50px; height: 50px; background-color: #F4D04B; position: absolute; top: 0; left: 0; font-size: 12px; font-weight: 700; font-family: Montserrat-Bold, Montserrat; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; } .proli .txtbox .w2 { margin-top: 8px; /* margin-bottom: 8px; */ } .proli .txtbox .w2 img { display: inline-block; vertical-align: middle; width: 12px !important; } .proli .txtbox .w2 .sp { display: inline-block; vertical-align: middle; margin-left: 5px; } .proli .txtbox .w2 .sp.oth { color: #999999; font-size: 14px; } .trending-product .swiper-button-next, .trending-product .swiper-button-prev { position: absolute; top: 23%; width: 42px; height: 84px; margin-top: 0; z-index: 10; cursor: pointer; -moz-background-size: 42px 48px; -webkit-background-size: 42px 48px; background-size: 42px 48px; background-position: center; background-repeat: no-repeat; } .trending-product .swiper-button-next, .trending-product .swiper-container-rtl .swiper-button-prev { background: url(./images/img51.png) #020202 no-repeat center; right: 0; left: auto; background-size:50%; /* 2023.2.23 */ /* width:70px; */ /* height:97px; */ /* background-color:#020202; */ } .trending-product .swiper-button-prev, .trending-product .swiper-container-rtl .swiper-button-next { /* background-image: url(./images/img50.png); */ background: url(./images/img50.png) #020202 no-repeat center; left: 0; right: auto; background-size:50%; /* 2023.2.23 */ /* width:70px; height:97px; background-color:#020202; */ /* opacity:1 */ } /*TOP OFFERS FOR YOU*/ .offers-section { padding-top: 3.1%; } .offers-section .box { margin-top: 4.28%; display:flex; } .offers-section .box ul { flex:1; } .offers-section .box ul li:nth-child(1){ margin-bottom: 62px; } .offers-section .box ul li a { display: block; width: 100%; overflow: hidden; /* background: #f9f9f9; */ background: #fff; } .offers-section .box .imgbox { float: left; width: 50%; overflow: hidden; } .offers-section .box ul li:nth-child(even) .imgbox { float: right; } .offers-section .box .imgbox img { width: 100%; } .offers-section .box .txtbox { float: left; width: 50%; overflow: hidden; text-align: center; /* padding-top: 10%; */ padding-top: 5%; /* position: relative; */ } .offers-section .box .imgbox { position: relative; } .offers-section .box ul li:nth-child(1) .imgbox .sanjiao { position: absolute; /* z-index: 10; */ top:45%; left: 89%; /* margin-left: -40px; */ /* margin-left: 110px; */ float: left; width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent #fff transparent transparent; } .offers-section .box ul li:nth-child(2) .imgbox .sanjiao { position: absolute; /* z-index: 10; */ top:43%; left: 0%; /* margin-left: -40px; */ /* margin-left: 110px; */ /* float: left; width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent #fff transparent transparent; */ width: 0; height: 0; border-left: 20px solid #fff; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .offers-section .box .txtbox .t1 { color: #333333; font-size: 14px; } .offers-section .box .txtbox .t2 { font-weight: bold; color: #333333; font-size: 36px; margin: 10px auto 25px; } /*PRODUCT CATEGORY*/ .category-section { padding-top: 4.68%; } .category-section .box { margin-top: 4%; } .category-section .box ul li { position: relative; float: left; width: 22.9%; margin-right: 2.8%; margin-bottom: 2.8%; -moz-box-shadow: 0px 0px 7px rgba(42,42,42,0.6); -webkit-box-shadow: 0px 0px 7px rgba(42,42,42,0.6); box-shadow: 0px 0px 7px rgba(42,42,42,0.6); box-sizing: border-box; } .category-section .box ul li:nth-child(4n) { margin-right: 0; } @media only screen and (min-width: 991px) { .category-section .box ul li:hover { -moz-box-shadow: 0px 0px 7px rgba(42,42,42,0.7); -webkit-box-shadow: 0px 0px 7px rgba(42,42,42,0.7); box-shadow: 0px 0px 7px rgba(42,42,42,0.7); } } .category-section .box ul li a { display: block; width: 100%; } .category-section .box ul li .imgbox { position: relative; width: 100%; overflow: hidden; text-align: center; background: #FFFFFF; } .category-section .box ul li i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(104,53,35,0.4); /*filter:alpha(opacity=0); opacity: 0;*/ filter: alpha(opacity=100); opacity: 1; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } /*@media only screen and (min-width: 991px){ .category-section .box ul li:hover i{ filter:alpha(opacity=100); opacity: 1; } }*/ @media only screen and (min-width: 991px) { .category-section .box ul li:hover i { background: rgba(104,53,35,0); } } .category-section .box ul li .imgbox img { width: 100%; /*filter:alpha(opacity=0); opacity: 0;*/ -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; filter: alpha(opacity=100); opacity: 1; } /*@media only screen and (min-width: 991px){ .category-section .box ul li:hover .imgbox img{ filter:alpha(opacity=100); opacity: 1; } }*/ .category-section .box ul li .txtbox { position: absolute; left: 50%; top: 50%; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; /**/ display: none; } .category-section .box ul li .txtbox .icon { text-align: center; } .category-section .box ul li .txtbox .icon img { display: inline-block; } .category-section .box ul li .txtbox .icon .ic1 { display: inline-block; } .category-section .box ul li .txtbox .icon .ic2 { display: none; } @media only screen and (min-width: 991px) { .category-section .box ul li:hover .txtbox .icon .ic1 { display: none; } .category-section .box ul li:hover .txtbox .icon .ic2 { display: inline-block; } } .category-section .box ul li .txt { position: absolute; left: 0; bottom: 35px; width: 100%; box-sizing: border-box; padding: 0px 20px; text-align: center; /*color: #444444;*/ color: #FFFFFF; font-size: 22px;/*2022/7/4*/ -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } /*@media only screen and (min-width: 991px){ .category-section .box ul li:hover .txt{ color: #FFFFFF; } }*/ /*TOP BRANDS*/ .brands-section { padding-top: 3.1%; } .brands-section .box { margin-top: 4%; } .brands-section .box ul { font-size: 0px; } .brands-section .box ul li { /*float: left;*/ display: inline-block; vertical-align: top; width: -moz-calc(95% / 3); width: -webkit-calc(95% / 3); width: calc(95% / 3); width: 31.66%; margin-right: 2.5%; margin-bottom: 2.5%; } .brands-section .box ul li:nth-child(3n) { margin-right: 0; } .brands-section .box ul li a { display: block; width: 100%; } .brands-section .box ul li .imgbox { width: 100%; overflow: hidden; } .brands-section .box ul li .imgbox img { width: 100%; -o-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } @media only screen and (min-width: 991px) { .brands-section .box ul li:hover .imgbox img { -o-transform: scale(1.1); -ms-transform: scale(1.1); -moztransform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } } .brands-section .box ul li .txtbox { padding: 20px 0px 40px; text-align: center; } .brands-section .box ul li .txtbox .t1 { color: #333333; font-size: 18px; font-weight: bold; border-bottom: #333 solid 1px; /*2022/7/1*/ text-transform: uppercase; padding: 0 0 10px 0; /*2022/7/1*/ } .brands-section .box ul li .txtbox .t2 { color: #666666; font-size: 14px;/*2022/7/4*/ margin: 20px 0; /*text-align: justify ;*//*2022/7/4*/ line-height: 1.5;/*2022/7/4*/ } /*NEW AND NOW*/ .now-section { } .now-section .box { margin-top: 35px; } .now-section .box .tabs { border-bottom: #ebebeb solid 1px; } .now-section .box .tabs ul { /* text-align: center; */ text-align: left; } .now-section .box .tabs ul li { position: relative; display: inline-block; /* vertical-align: top; */ vertical-align: center; padding: 0px 10px 20px; margin-right: 70px; color: #666666; font-size: 18px; cursor: pointer; } .now-section .box .tabs ul li:last-child { margin-right: 0; } .now-section .box .tabs ul li.on { color: #333333; font-weight: bold; font-size: 36px; font-family: Montserrat-BoldItalic; } .now-section .box .tabs ul li.on::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #333333; } .now-section .box .tabs ul li.on::after { content: ""; position: absolute; /* top: 100%; */ bottom:0; left: 0; right: 0; margin: auto; /* width: 0; */ height: 0; /* border-left: 7px solid transparent; */ /* border-right: 7px solid transparent; */ border-top: 8px solid #333333; } .swbox .txtbox { padding: 20px 0 0 0!important; text-align: left!important; }/*2022/7/1*/ .swbox .showbtn { text-align: left !important; }/*2022/7/1*/ .now-section .box .content { position: relative; margin-top: 60px; } .now-section .box .content .contentli { /*display: none;*/ position: absolute; left: 0; top: 0; z-index: -1; opacity: 0; visibility: hidden; overflow: hidden; } .now-section .box .content .contentli.on { /*display: block;*/ position: relative; opacity: 1; visibility: visible; z-index: 1; } .now-section .contentli .left { float: left; width: 380px; overflow: hidden; } .now-section .contentli .left a { display: block; width: 100%; } .now-section .contentli .left .imgbox { width: 100%; overflow: hidden; } .now-section .contentli .left .imgbox img { width: 100%; } .now-section .contentli .left .txtbox { background: #000000; padding: 11% 9%; /* text-align: center; */ text-align: left; } .now-section .contentli .left .txtbox .t1 { color: #ffffff; /* font-size: 16px; */ font-size: 24px; font-weight: bold; } .now-section .contentli .left .txtbox .t2 { color: #999898; font-size: 14px; /* margin: 10px auto; */ margin: 18px auto; } .now-section .contentli .left .txtbox .t3 span { color: #ffffff; /* font-size: 14px; */ font-size: 18px; font-weight: bold; /* text-decoration: underline; */ line-height: 40px; border:1px solid #fff; padding:10px 22px; } .now-section .contentli .right { /* float: right; */ float: left; margin-left:30px; width: -moz-calc(100% - 400px); width: -webkit-calc(100% - 400px); width: calc(100% - 400px); overflow: hidden; } .now-section .contentli .swiper-container { position: relative; width: 100%; overflow: hidden; } .now-section .contentli .swiper-slide { width: 290px; } .now-section .contentli .proli { text-align: center; } .now-section .contentli .proli img { max-width: 100%; width: auto; } .now-section .contentli .swbox { position: relative; /* padding: 0 30px; */ } .now-section .contentli .swbox .swiper-button-next, .now-section .contentli .swbox .swiper-button-prev { position: absolute; top: 28%; width: 24px; height: 24px; margin-top: 0; z-index: 10; cursor: pointer; -moz-background-size: 14px 24px; -webkit-background-size: 14px 24px; background-size: 14px 24px; background-position: center; background-repeat: no-repeat; } .now-section .contentli .swbox .swiper-button-next, .now-section .contentli .swbox .swiper-container-rtl .swiper-button-prev { background-image: url(./images/img74.png); /* right: 0; */ right: 30px; left: auto; /* 2023.2.23 */ width:70px; height:97px; background-color:#000 } .now-section .contentli .swbox .swiper-button-prev, .now-section .contentli .swbox .swiper-container-rtl .swiper-button-next { background-image: url(./images/img73.png); left: 0; right: auto; /* 2023.2.23 */ width:70px; height:97px; background-color:#000 } .now-section .contentli .swbox .swiper-button-next.swiper-button-disabled, .now-section .contentli .swbox .swiper-button-prev.swiper-button-disabled { filter: alpha(opacity=0); opacity: 0; } /**/ /* .partner-section { padding-top: 5.2%; padding-bottom: 3.1%; } */ .partner-section .conwidth .home_brand { display:flex; justify-content: space-between; align-items: center; } .partner-section .conwidth .home_brand .button { width: 320px; height: 64px; color: #000; /* background: #020202; */ border-radius: 0px 0px 0px 0px; opacity: 1; border: 2px solid #000000; text-align: center; line-height: 64px; font-size: 24px; font-weight: 700; font-family: Montserrat-BoldItalic, Montserrat; } .partner-section .conwidth .home_brand .button:hover { background: #020202; color: #fff; } .partner-section .box { margin: 4% 0 0 0; }/*2022/7/7*/ .partner-section .box ul li { float: left; /*2022/7/1*/ /* width: -moz-calc(100% / 5); width: -webkit-calc(100% / 5); width: calc(100% / 5); */ overflow: hidden; opacity: .7;/*2022/7/1*/ box-sizing: border-box;/*transition: all 0.4s ease;*/ /*2022/7/1*/ width: -moz-calc(100% / 4);/*2022/2/24*/ width: -webkit-calc(100% / 4);/*2022/2/24*/ width: calc(100% / 4); } @media only screen and (min-width: 991px) { .partner-section .box ul li:hover { /*-moz-box-shadow: 0px 0px 7px rgba(42,42,42,0.7); -webkit-box-shadow: 0px 0px 7px rgba(42,42,42,0.7); box-shadow: 0px 0px 7px rgba(42,42,42,0.7);*/ /*2022/7/1*/ opacity: 1;/*2022/7/1*/ } } .partner-section .box ul li a { display: block; width: 100%; overflow: hidden; text-align: center; } .partner-section .box ul li a img { max-width: 100%; } /**/ .obanner { position: relative; width: 100%; overflow: hidden; } .obanner>a { display: block; } .obanner>img { width: 100%; } .obanner .obtext { position: absolute; top: 50%; left: 50%; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: hidden; } .obanner .obtext .box { float: right; max-width: 720px; width: 100%; overflow: hidden; text-align: center; } .obanner .obtext .box .t1 { font-family: "didotb"; color: #fffffe; font-size: 48px; text-transform: uppercase; } .obanner .obtext .box .t2 { max-width: 520px; color: #ffffff; font-size: 18px; line-height: 1.7; margin: 15px auto 50px; } .obanner .obtext .box .t3 { font-family: 'NotoSansSC'; font-weight: bold; color: #fffffe; font-size: 60px; margin-bottom: 30px; } .obanner .obtext .box .img { padding-left: 35px; } .obanner .obtext .box .showbtn a { padding: 0px 30px; height: 50px; line-height: 50px; border: #ffffff solid 2px; border-radius: 25px; color: #ffffff; font-size: 16px; font-weight: bold; letter-spacing: 1px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (min-width: 991px) { .obanner .obtext .box .showbtn a:hover { background: #FFFFFF; color: #333333; } } /**/ .location { padding: 12px 0px; border-bottom: #eeeeee solid 1px; } @media only screen and (max-width: 1199px) { .location { padding: 0; } } .location .box { padding: 0px 18px; } .location .box span, .location .box a { color: #888888; font-size: 16px; line-height: 1.7; } .location .box a:hover, .location .box a.on { color: #333333; } .beauty-box { padding-top: 3%; padding-bottom: 5.2%; } .beauty-box .box { margin-top: 4.28%; } .beauty-box .leftbox { float: left; width: 33.3%; overflow: hidden; } .beauty-box .leftbox a { display: block; width: 100%; overflow: hidden; } .beauty-box .leftbox a img { width: 100%; } .beauty-box .rightbox { float: right; width: 65%; overflow: hidden; box-sizing: border-box; } .beauty-box .rightbox .swbox { position: relative; padding: 0 55px; } .beauty-box .swiper-button-next, .beauty-box .swiper-button-prev { position: absolute; top: 21%; width: 40px; height: 40px; margin-top: 0; z-index: 10; cursor: pointer; -moz-background-size: 7px 14px; -webkit-background-size: 7px 14px; background-size: 7px 14px; background-position: center; background-repeat: no-repeat; background-color: #333333; transition: all 0.4s ease; } .beauty-box .swiper-button-next:hover, .beauty-box .swiper-button-prev:hover { background-color: #f98e68; } .beauty-box .swiper-button-next, .beauty-box .swiper-container-rtl .swiper-button-prev { background-image: url(./images/img90a.png); right: 0; left: auto; } .beauty-box .swiper-button-prev, .beauty-box .swiper-container-rtl .swiper-button-next { background-image: url(./images/img90.png); left: 0; right: auto; } .bannerbg { position: relative; width: 100%; overflow: hidden; text-align: center; } .bannerbg>img { width: 100%; } .bannerbg .content { position: absolute; left: 50%; top: 50%; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .bannerbg .content .box { color: #fffffe; font-size: 36px; font-weight: bold; letter-spacing: 1px; } /*hot sell*/ .hot-sell { padding-top: 5.2%; padding-bottom: 4%; } .hot-sell .box { margin-top: 5.7%; } .hot-sell .box ul li { float: left; width: 23.35%; margin-right: 2.2%; margin-bottom: 2.2%; } .hot-sell .box ul li:nth-child(4n) { margin-right: 0; } /*结算*/ .settlement { padding-top: 40px; padding-bottom: 5.2%; } .gobtn { padding: 0px 18px; } .gobtn a { text-decoration: underline; color: #333333; font-size: 20px; line-height: 1.7; } .settlement .box { margin-top: 50px; padding: 0 18px; } .settlement .title { color: #333333; font-size: 30px; font-weight: bold; padding-bottom: 18px; border-bottom: #333333 solid 2px; margin-bottom: 30px; } .settlement .box .l-box { float: left; width: 67.5%; overflow: hidden; } .required-tips { color: #ff0000; font-size: 16px; text-align: right; } .settlement .box .l-box .wrap { margin-top: 20px; padding-bottom: 56px; border-bottom: #e5e5e5 solid 1px; } .settlement .formli { margin-bottom: 30px; } .settlement .formli .w1 { float: left; width: 37%; } .settlement .formli .w2 { float: left; width: 20.5%; } .settlement .formli .w3 { float: left; width: 30.7%; margin-right: 3.95%; } .settlement .formli .w3:nth-child(3n) { margin-right: 0; } .settlement .formli .half { float: left; width: 48.2%; margin-right: 3.6%; } .settlement .formli .half:nth-child(2n) { margin-right: 0; } .settlement .formli .inputli { border: #dadada solid 1px; box-sizing: border-box; padding: 0 15px; } .settlement .formli .selectli { border: #dadada solid 1px; box-sizing: border-box; } .settlement .formli .gap { margin-right: 2.75%; } .settlement .formli .sp { color: #000000; font-size: 16px; margin-bottom: 8px; } .settlement .formli .must { display: inline-block; color: #ff0000; } .settlement .formli input { color: #202020; font-size: 16px; line-height: 50px; background: none; border: none; outline: none; } .settlement .formli .bold input { font-weight: bold; } .settlement .formli input::-webkit-input-placeholder { color: #202020; } .settlement .formli input::-moz-placeholder { color: #202020; } .settlement .formli input:-moz-placeholder { color: #202020; } .settlement .formli input:-ms-input-placeholder { color: #202020; } .settlement .formli .selectli select { width: 100%; border: none; outline: none; line-height: 50px; height: 50px; color: #202020; font-size: 16px; padding-left: 15px; padding-right: 30px; background: url(./images/img96.png) center right 15px no-repeat; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; appearance: none; -moz-appearance: none; -webkit-appearance: none; } .settlement .formli .checki { margin-bottom: 10px; } .settlement .formli .checki .txt1 { display: inline-block; vertical-align: middle; margin-left: 10px; width: -moz-calc(100% - 35px); width: -webkit-calc(100% - 35px); width: calc(100% - 35px); font-size: 16px; color: #666666; } .settlement .formli .c-label { font-size: 0; cursor: pointer; } .settlement .formli .checki .c-label .choice-inp { display: none; } .settlement .formli .checki .choice-inp[type=checkbox]+span { display: inline-block; vertical-align: top; width: 20px; height: 30px; background: url(./images/img98.png) center no-repeat; background-size: 17px 17px; } .settlement .formli .checki .choice-inp[type=checkbox]:checked+span { display: inline-block; vertical-align: top; width: 20px; height: 30px; background: url(./images/img97.png) center no-repeat; background-size: 17px 17px; } .settlement .formli .checki .choice-inp[type=checkbox]:checked+span+div { } .settlement .formli .checki .choice-inp[type=radio]+span { display: inline-block; vertical-align: top; width: 20px; height: 30px; background: url(./images/img98.png) center no-repeat; background-size: 17px 17px; } .settlement .formli .checki .choice-inp[type=radio]:checked+span { display: inline-block; vertical-align: top; width: 20px; height: 30px; background: url(./images/img97.png) center no-repeat; background-size: 17px 17px; } .settlement .formbtn { overflow: hidden; } .settlement .formbtn div { float: left; margin-right: 40px; background: #000000; border-radius: 23px; } .settlement .formbtn div:last-child { margin-right: 0; } .settlement .formbtn div button { padding: 0 30px; color: #ffffff; font-size: 18px; height: 46px; line-height: 46px; background: none; border: none; outline: none; } .settlement .content { padding: 20px 0px; border-bottom: #e5e5e5 solid 1px; } .settlement .content .l-con { float: left; width: 50%; overflow: hidden; box-sizing: border-box; padding-top: 10px; } .settlement .content .l-con .tit { color: #000000; font-size: 20px; font-weight: bold; } .settlement .content .r-con { float: left; width: 50%; overflow: hidden; box-sizing: border-box; border-left: #e1e1e1 solid 1px; padding-left: 10%; padding-top: 10px; } .settlement .content .r-con ul li { margin-bottom: 20px; overflow: hidden; } .settlement .content .r-con ul li .t1 { float: left; width: 65%; text-align: left; color: #333333; font-size: 16px; line-height: 1.7; } .settlement .content .r-con ul li .t2 { float: right; width: 32%; text-align: right; color: #000000; font-size: 16px; line-height: 1.7; } .settlement .box .contbox { margin-top: 25px; text-align: right; } .settlement .box .contbox .cont { display: inline-block; max-width: 100%; } .settlement .box .contbox .cont .price { min-width: 520px; overflow: hidden; } .settlement .box .contbox .cont .price .t1 { float: left; color: #010101; font-size: 20px; line-height: 1.6; } .settlement .box .contbox .cont .price .t2 { float: right; color: #ffab8d; font-size: 30px; } .settlement .box .contbox .cont .agree { margin-top: 60px; } .settlement .box .contbox .cont .agree .choice[type=checkbox]+span { display: inline-block; vertical-align: top; width: 20px; height: 30px; background: url(./images/img98.png) center no-repeat; background-size: 17px 17px; } .settlement .box .contbox .cont .agree .choice[type=checkbox]:checked+span { display: inline-block; vertical-align: top; width: 20px; height: 30px; background: url(./images/img97.png) center no-repeat; background-size: 17px 17px; } .settlement .box .contbox .cont .agree .txt { display: inline-block; margin-left: 10px; width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: calc(100% - 40px); color: #888888; font-size: 16px; line-height: 1.7; text-align: left; } .settlement .box .settlebtn { margin-top: 30px; text-align: right; } .settlement .box .settlebtn a { display: inline-block; text-align: center; padding: 0 30px; background-color: #000000; color: #ffffff; font-size: 22px; border-radius: 25px; height: 50px; line-height: 50px; text-transform: uppercase; letter-spacing: 1px; } .settlement .box .r-box { float: right; width: 28.2%; overflow: hidden; } .settlement .box .r-box .btnbox { text-align: center; } .settlement .box .r-box .btnbox a { display: block; width: 90%; height: 50px; line-height: 50px; border-radius: 25px; margin: 0px auto 20px; background: #000000; text-transform: uppercase; font-size: 18px; color: #ffffff; } .settlement .box .r-box .txt { width: 90%; margin: 0 auto; color: #888888; font-size: 16px; line-height: 1.7; } /*购物车*/ .cart { padding-top: 20px; } .cart .title { color: #000; font-size: 18px; font-weight: bold; padding: 24px 18px; box-sizing: border-box; /* font-family: Montserrat-Light; */ } .cart .subheading { box-sizing: border-box; font-family: Montserrat-Light; font-size: 14px; padding: 0 18px ; font-weight: 400; color: #999; line-height: 17px; } .cart .title .sp { display: inline-block; margin-left: 5px; font-weight: normal; } .cart .box { margin-top: 45px; padding: 0px 18px; box-sizing: border-box; } .cart .tipsbox ul li { border: #ebebeb solid 1px; background: #f8f8f8; padding: 10px 0px; overflow: hidden; margin-bottom: 16px; } .cart .tipsbox ul li .icon { float: left; width: 50px; text-align: center; } .cart .tipsbox ul li .txt { float: left; width: -moz-calc(100% - 50px); width: -webkit-calc(100% - 50px); width: calc(100% - 50px); color: #333333; font-size: 16px; line-height: 1.7; } .order-items { /* border-top: #000000 solid 2px; */ } .order-items .table .clearfix:before { content: none; } .order-items .table .clearfix:after { content: none; } .order-items .table { width: 100%; /* 2023.3.1 */ /* border-top: #e5e5e5 solid 1px; */ /*overflow: hidden;*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; /* 2023.3.1 */ display:flex; flex-wrap: wrap; } .order-items .table .left { width:65% } .order-items .table .right { flex:1; margin-left:20px } .order-items .table .th { font-size: 0; border-bottom: #000000 solid 1px; } .order-items .table .td { display:flex; justify-content: space-between; } .order-items .table .th>li { display: inline-block; vertical-align: middle; width: -moz-calc((58% - 120px) / 4); width: -webkit-calc((58% - 120px) / 4); /* 2023.3.1 */ /* width: calc((58% - 120px) / 4); */ width: calc((58% - 120px) / 1); line-height: 30px; padding: 20px 0px; color: #333333; font-size: 16px; font-weight: normal; text-align: center; } .order-items .table .th>li:first-child { width: 42%; } .order-items .table .th>li:nth-child(2) { text-align: center; } .order-items .table .th>li:last-child { width: 120px; } .order-items .table .td { font-size: 0; border-bottom: #e5e5e5 solid 1px; } .order-items .table .td>li { /* display: inline-block; */ vertical-align: middle; text-align: center; font-size: 14px; /*font-family: arial;*/ display: flex; align-items: center; padding: 20px 0px; width: -moz-calc((58% - 120px) / 4); width: -webkit-calc((58% - 120px) / 4); width: calc((58% - 120px) / 4); vertical-align: top; /* 2023.3.1 */ /* padding: 40px 0px; */ text-align: center; } .order-items .table .td>li:first-child { width: 42%; } .order-items .table .td>li:nth-child(2) { text-align: center; /* 2023.3.1 */ display:none; } .order-items .table .td>li:last-child { width: 120px; } .order-items .table .td .goods { padding-left: 20px; overflow: hidden; /* 2023.3.1 */ display:flex; } .order-items .table .td .goods a { display: block; width: 100%; overflow: hidden; } .order-items .table .td .goods .img { float: left; width: 45%; text-align: center; overflow: hidden; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; /* 2023.3.1 */ flex:1; } .order-items .table .td .goods .img img { max-width: 90%; } .order-items .table .td .goods .txt { float: left; text-align: left; width: 50%; overflow: hidden; white-space: normal; flex:3; } .order-items .table .td .goods .txt .t1 { margin: 10px auto; color: #000000; font-size: 18px; /* 2023.3.1 */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .order-items .table .td .goods .txt ul { color: #777777; font-size: 14px; line-height: 2; margin-bottom: 35px; } .order-items .table .td .goods .txt .t2 { color: #000000; font-size: 14px; } .order-items .table .td .size { display: inline-block; max-width: 100%; box-sizing: border-box; color: #000000; font-size: 16px; height: 36px; line-height: 36px; padding: 0px 28px 0px 15px; cursor: pointer; background: #f8f8f8; border: #b0a6a6 dashed 1px; background: url(./images/img107.png) center right 12px no-repeat; } .order-items .table .td .size.modified { color: #ffab8d; border: #ffab8d dashed 1px; background: url(./images/img108.png) center right 12px no-repeat; } .order-items .table .td .number { color: #333333; } .order-items .table .td .unit-price { color: #000000; font-size: 16px; line-height: 40px; } .order-items .table .td .subtotal { color: #000000; font-size: 16px; line-height: 40px; } .operation { display: inline-block; color: #666666; font-size: 14px; } .operation .delete { line-height: 40px; } .order-details .boxli .logistics { margin-top: 20px; color: #666666; font-size: 14px; } .order-details .boxli .logistics .sp { display: inline-block; margin-left: 20px; /*font-family: arial;*/ color: #1e70bc; } .amount_box { margin-top: 20px; width: 77px; height: 25px; position: relative; } .list-select { float: left; padding-left: 20px; } .order-items table tr td .list-select { margin-top: 45px; } .list-select .c-label { height: 40px; color: #333333; font-size: 16px; cursor: pointer; } .c-label .choice-inp { display: none; } .list-select .choice-inp[type=checkbox]+span { display: inline-block; width: 20px; height: 20px; background: url(./images/img105.png) center no-repeat; position: relative; top: 3px; } .list-select .choice-inp[type=checkbox]:checked+span { display: inline-block; width: 20px; height: 20px; background: url(./images/img106.png) center no-repeat; position: relative; top: 3px; } .list-tit { display: inline-block; vertical-align: middle; line-height: 28px; } /*购买数量*/ .purchase-quantity { display: inline-block; margin: 0 auto; overflow: hidden; border-radius: 20px; border: #e5e5e5 solid 1px; display: flex; /* height:20px; */ justify-content: space-between; } .purchase-quantity .add { float: right; width: 44px; height: 42px; line-height: 42px; text-align: center; background-color: #f2f2f2; color: #000000; font-size: 18px; font-weight: bold; } .purchase-quantity .reduce { float: left; width: 44px; height: 42px; line-height: 42px; text-align: center; background-color: #f2f2f2; color: #000000; font-size: 22px; } .purchase-quantity .count { display: inline-block; width: 50px; margin: 0 auto; color: #000000; font-size: 18px; line-height: 42px; /*font-family: arial;*/ text-align: center;/*border-right: #dcdcdc solid 1px; border-left: #dcdcdc solid 1px;*/ } .purchase-quantity .count input { width: 100%; text-align: center; vertical-align: middle; } .cart .discount_code_list { float: right; padding: 40px 0px; } .cart .discount_code_item { display: flex; min-height: 40px; line-height: 40px; justify-content: space-between; } .cart .discount_code_item .reduce_price { width: 150px; text-align: right; color: #ec9373; } .cart .discount { text-align: right; padding: 40px 0px; } .cart .subtit { display: inline-block; vertical-align: middle; color: #000000; font-size: 20px; font-weight: bold; padding-right: 120px; } .cart .discount .formbox { position: relative; display: inline-block; vertical-align: middle; width: 510px; border: #dcdcdc solid 1px; border-radius: 25px; padding-right: 90px; box-sizing: border-box; overflow: hidden; } .cart .discount .formbox .t1 { float: left; width: 420px; padding: 0px 30px; box-sizing: border-box; overflow: hidden; } .cart .discount .formbox .t1 input { width: 100%; height: 48px; line-height: 48px; border: none; background: none; outline: none; color: #333333; font-size: 18px; } .cart .discount .formbox .t1 input::-webkit-input-placeholder { color: #aaaaaa; text-align: center; } .cart .discount .formbox .t1 input::-moz-placeholder { color: #aaaaaa; text-align: center; } .cart .discount .formbox .t1 input:-moz-placeholder { color: #aaaaaa; text-align: center; } .cart .discount .formbox .t1 input:-ms-input-placeholder { color: #aaaaaa; text-align: center; } .cart .discount .formbox .t2 { position: absolute; right: 0; top: 0; z-index: 10; width: 90px; box-sizing: border-box; overflow: hidden; background: #000000; border-radius: 25px; color: #FFFFFF; font-size: 18px; } .cart .discount .formbox .t2 input { width: 100%; height: 48px; line-height: 48px; border: none; background: none; outline: none; color: #FFFFFF; font-size: 18px; } .cart .total { text-align: right; /* padding: 40px 0px; */ /* 2023.3.1 */ padding: 20px; border: 1px solid #ccc; /* margin-left: 15px; */ } .cart .total .infor { /* display: inline-block; */ /* vertical-align: top; */ /* width: 510px; */ /* padding-left: 150px; */ /* box-sizing: border-box; */ /* 2023.3.1 */ /* border-left: #e1e1e1 solid 1px; */ } .cart .total .infor .price { display:flex; justify-content: space-between; padding: 20px 0; border-top:1px solid #D8D8D8 } .cart .total .infor ul li { margin-bottom: 20px; overflow: hidden; } .cart .total .infor ul li .t1 { float: left; width: 65%; text-align: left; color: #333333; font-size: 16px; line-height: 1.7; } .cart .total .infor ul li .t2 { float: right; width: 32%; text-align: right; line-height: 1.7; color: #000000; font-size: 16px; } .cart .total .infor ul li .t2 .sp { color: #ec9373; } .cart .otherbox { text-align: right; } .cart .otherbox .price { display: inline-block; width: 350px; overflow: hidden; } .cart .otherbox .price .t1 { float: left; color: #010101; font-size: 20px; line-height: 1.6; } .cart .otherbox .price .t2 { float: right; color: #ffab8d; font-size: 30px; } .cart .otherbox .btnbox { margin-top: 40px; } .cart .otherbox .btnbox a { width:100%; text-align: center; display: inline-block; margin-right: 30px; margin-bottom: 25px; border: #000000 solid 1px; /* padding: 0 30px; */ /* border-radius: 25px; */ line-height: 48px; height: 48px; color: #000000; font-size: 22px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .cart .otherbox .btnbox a:last-child { margin-right: 0; } .cart .otherbox .btnbox a.on { background: #000000; color: #FFFFFE; } @media only screen and (min-width: 991px) { .cart .otherbox .btnbox a:hover { background: #000000; color: #FFFFFE; } } /*best match*/ .best-match { padding-top: 3.65%; padding-bottom: 2.6%; } .best-match .box { margin-top: 5%; } .best-match .swiper-container { padding-bottom: 6%; } .best-match .swiper-pagination-bullet { width: 13px; height: 13px; display: inline-block; vertical-align: middle; border-radius: 8px; background: #cdcdcd; opacity: 1; } .best-match .swiper-pagination-bullet-active { opacity: 1; width: 15px; height: 15px; background: #333333; } /*Size modification*/ .size-modification { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 1000; width: 100%; height: 100vh; overflow: auto; background: rgba(0,0,0,0.6); display: none; } .size-modification .box { position: absolute; left: 50%; top: 50%; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: auto; max-width: 650px; width: 90%; max-height: 90%; overflow-y: auto; box-sizing: border-box; } .size-modification .sm-close { position: absolute; top: 20px; right: 20px; } .size-modification .sm-close img { -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (min-width: 991px) { .size-modification .sm-close img:hover { -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px rgba(0,0,0,0.2); } } .size-modification .wrap { background: #FFFFFF; padding: 3.8% 6.9%; box-sizing: border-box; } .size-modification .wrap .tit { padding-bottom: 30px; border-bottom: #e9e9e9 solid 1px; } .size-modification .wrap .tit .t1 { color: #333333; font-size: 30px; margin-bottom: 15px; } .size-modification .wrap .tit .t2 { color: #000000; font-size: 14px; } .size-modification .content { padding-top: 35px; padding-bottom: 20px; border-bottom: #e9e9e9 solid 1px; } .size-modification .content .imgbox { float: left; width: 41%; overflow: hidden; text-align: center; } .size-modification .content .imgbox img { max-width: 100%; } .size-modification .content .txtbox { float: left; width: 59%; overflow: hidden; padding-left: 2%; box-sizing: border-box; } .size-modification .content .txtbox .t1 { color: #000000; font-size: 18px; } .size-modification .content .txtbox ul { color: #777777; font-size: 14px; margin-top: 20px; min-height: 70px; } .size-modification .content .txtbox ul li { margin-bottom: 10px; } .size-modification .content .txtbox .size { margin-top: 15px; } .size-modification .content .txtbox .size .stit { color: #000000; font-size: 16px; } .size-modification .content .txtbox .size .capacity { margin-top: 20px; } .size-modification .content .txtbox .size .capacity a { float: left; margin-right: 20px; margin-bottom: 20px; min-width: 70px; text-align: center; border: #cccccc solid 1px; background-color: #f8f8f8; padding: 0px 10px; color: #888888; font-size: 16px; height: 38px; line-height: 36px; box-sizing: border-box; } .size-modification .content .txtbox .size .capacity a.on { color: #000000; border: #000000 solid 1px; } .size-modification .sizebtn { margin-top: 35px; margin-bottom: 20px; text-align: center; } .size-modification .sizebtn a { height: 50px; line-height: 50px; border-radius: 25px; padding: 0px 30px; background: #000000; color: #ffffff; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; } /*产品列表*/ .product { padding-top: 35px; padding-bottom: 75px; min-height: 400px; } .product .leftbox { float: left; width: 210px; margin-right: 30px; overflow: hidden; } .product .leftbox .selected { } .product .leftbox .tit { color: #333333; font-size: 20px; font-weight: bold; } .product .leftbox .selected ul { margin-top: 15px; } .product .leftbox .selected ul li { position: relative; padding-left: 25px; color: #333333; font-size: 16px; line-height: 1.6; margin-bottom: 10px; } .product .leftbox .selected ul li .icon { position: absolute; left: 0; top: 2px; width: 25px; height: 20px; background: url(./images/img111.png) left center no-repeat; background-size: 11px 11px; } .screen { margin-top: 20px; } .screen>ul>li { position: relative; padding-top: 25px; border-top: #d8d8d8 solid 1px; margin-bottom: 20px; } .screen>ul>li .subtit { position: relative; padding-right: 60px; font-weight: bold; color: #333333; font-size: 16px; line-height: 1.6; cursor: pointer; } .screen>ul>li .subtit .seemore { font-size:12px } .screen>ul>li .subtit .sp { display: block; width: 100%; } .screen>ul>li .subtit .ic { position: absolute; right: 0; top: 0; width: 20px; height: 100%; background: url(./images/img113.png) center no-repeat; background-size: 20px 20px; } .screen>ul>li.on .subtit .ic { background: url(./images/img114.png) center no-repeat; background-size: 20px 20px; } .screen>ul>li .del { display: none; position: absolute; right: 25px; top: 25px; z-index: 10; width: 20px; height: 25px; background: url(./images/img112.png) center no-repeat; background-size: 20px 20px; } .screen ul li ul { display: none; margin-top: 15px; height: 200px; overflow-y: auto; overflow-x: hidden; } .screen ul li.on ul { /*display: block;*/ } .screen ul li ul::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 100%; background: #f4f4f4; border-radius: 10px; } .screen ul li ul::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #000000; border-radius: 10px; } .screen ul li ul::-webkit-scrollbar-track { /*滚动条里面轨道*/ border-radius: 10px; } .screen ul li .check { } .screen ul li .check .txt { display: inline-block; vertical-align: middle; margin-left: 10px; font-size: 16px; color: #666666; } .screen ul li .check .c-label { font-size: 0; cursor: pointer; } .screen ul li .check .c-label .choice-inp { display: none; } .screen ul li .check .choice-inp[type=checkbox]+span { display: inline-block; vertical-align: top; width: 20px; height: 30px; background: url(./images/img115.png) center no-repeat; background-size: 20px 20px; } .screen ul li .check .choice-inp[type=checkbox]:checked+span { display: inline-block; vertical-align: top; width: 20px; height: 30px; background: url(./images/img116.png) center no-repeat; background-size: 20px 20px; } .screen ul li ul li { margin-bottom: 12px; } .product .rightbox { float: left; width: -moz-calc(100% - 330px); width: -webkit-calc(100% - 330px); width: calc(100% - 330px); overflow: hidden; } .product .rightbox .right-top { width: 100%; overflow: hidden; /* 2023.2.25 */ border-bottom: 1px solid #D8D8D8; display: flex; align-items: center; justify-content: space-between; } .product .rightbox .tit { float: left; width: 50%; overflow: hidden; } .product .rightbox .tit .t1 { color: #333333; font-size: 20px; font-weight: bold; margin-bottom: 5px; } .product .rightbox .tit .t2 { color: #333333; font-size: 14px; } .product .rightbox .optbox { float: right; max-width: 370px; /* 2023.2.27 */ /* width: 50%; */ width:20%; overflow: hidden; text-align: right; font-size: 0; } .product .rightbox .optbox .sp { display: inline-block; vertical-align: middle; /* width: 100px; */ color: #333333; font-size: 15px; text-align: left; } .product .rightbox .optbox .optdiv { display: inline-block; vertical-align: middle; width: -moz-calc(100% - 110px); width: -webkit-calc(100% - 110px); width: calc(100% - 110px); box-sizing: border-box; /* 2023.2.25 */ /* border: #333333 solid 1px; */ } .refinediv { display: none; text-align: center; line-height: 40px; height: 42px; color: #333333; font-size: 14px; padding-left: 15px; /* padding-right: 30px; */ background: url(./images/img36.png) center right 5px no-repeat; /* border: #333333 solid 1px; */ box-sizing: border-box; font-family: Montserrat-ExtraLight; } .refine { background: #f2f2f2; left: 0; right: 0; top: 100%; /* bottom: -100%; */ flex-direction: column; z-index: 9999; position: absolute; visibility: hidden; filter: alpha(opacity=0); opacity: 0; height: auto; } .refine.on { padding: 0 0 60px 0; height: unset; top: 0; bottom: 0; position: fixed; display: flex; visibility: visible; filter: alpha(opacity=100); opacity: 1; -o-transition: top .3s linear; -ms-transition: top .3s linear; -moz-transition: top .3s linear; -webkit-transition: top .3s linear; transition: top .3s linear; } .refine .title { position: relative; text-align: center; font-size: 20px; line-height: 60px; letter-spacing: 0; color: #333; font-weight: 600; } .refine .title .ic-close { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; line-height: 40px; text-align: center; } .refine .title .ic-close img { } .refine .title .ic-clear { position: absolute; left: 20px; top: 10px; font-weight: normal; color: #666666; font-size: 14px; line-height: 40px; } .refine .wrap { margin-bottom: 10px; } .refine .wrap ul li { position: relative; background: #fff; color: #333333; font-size: 16px; line-height: 1.7; padding: 12px 16px 12px 35px; border-bottom: 1px solid #d0d5da; } .refine .wrap ul li .icon { position: absolute; left: 0; top: 14px; display: inline-block; width: 35px; height: 20px; background: url(./images/img111.png) center no-repeat; background-size: 11px 11px; } .refine .box ul li { position: relative; background: #fff; } .refine .box ul li a { display: block; width: 100%; } .refine .box ul li a .sub { padding: 12px 16px; font-size: 16px; line-height: 1.5; overflow: hidden; border-bottom: 1px solid #d0d5da; } .refine .box ul li a .sub .sp { float: left; } .refine .box ul li a .sub .ic { float: right; width: 25px; height: 25px; transform: rotate(-90deg); background: url(./images/img113.png) center no-repeat; background-size: 20px 20px; } .refine .box ul li .twolevel { background: #f2f2f2; min-height: 100%; display: flex; flex-direction: column; left: 100%; right: -100%; top: 0; bottom: 0; position: fixed; -o-transition: left .15s ease-out, right .15s ease-out; -ms-transition: left .15s ease-out, right .15s ease-out; -moz-transition: left .15s ease-out, right .15s ease-out; -webkit-transition: left .15s ease-out, right .15s ease-out; transition: left .15s ease-out, right .15s ease-out; z-index: 1; } .refine .box ul li .twolevel.on { left: 0; right: 0; } .refine .box ul li .twolevel .subtit { position: relative; height: 60px; line-height: 60px; background: #f2f2f2; } .refine .box ul li .twolevel .subtit .ic2 { position: absolute; left: 0; top: 0; width: 30px; height: 100%; padding: 0px 16px 0px 0px; background: url(./images/img73.png) center no-repeat; background-size: 10px auto; } .refine .box ul li .twolevel .subtit .t2 { text-align: center; font-size: 20px; line-height: 60px; color: #333; font-weight: 600; } .refine .box ul li .twolevel ul li { padding: 15px; border-top: 1px solid #d0d5da; } .refine .box ul li .twolevel ul li .check { } .refine .box ul li .twolevel ul li .check .txt { display: inline-block; vertical-align: middle; margin-left: 10px; font-size: 16px; color: #666666; } .refine .box ul li .twolevel ul li .check .c-label { font-size: 0; cursor: pointer; } .refine .box ul li .twolevel ul li .check .c-label .choice-inp { display: none; } .refine .box ul li .twolevel ul li .check .choice-inp[type=checkbox]+span { display: inline-block; vertical-align: top; width: 20px; height: 30px; background: url(./images/img115.png) center no-repeat; background-size: 20px 20px; } .refine .box ul li .twolevel ul li .check .choice-inp[type=checkbox]:checked+span { display: inline-block; vertical-align: top; width: 20px; height: 30px; background: url(./images/img116.png) center no-repeat; background-size: 20px 20px; } .refine .btnbox { display: none; left: 0; right: 0; bottom: 0; padding: 8px; background: #f2f2f2; border-top: 1px solid #d0d5da; position: fixed; z-index: 2; } .refine.on .btnbox { display: block; } .refine .btnbox button { background-color: #000; border-width: 2px; border-style: solid; border-color: #000; font-family: "Work Sans", sans-serif; font-size: 15px; letter-spacing: .19px; text-transform: uppercase; color: #fff; line-height: 1.33; display: inline-block; -o-transition: background-color .2s; -ms-transition: background-color .2s; -moz-transition: background-color .2s; -webkit-transition: background-color .2s; transition: background-color .2s; padding: 12.5px 12px; border-radius: 6px; cursor: pointer; text-align: center; box-sizing: border-box; width: 100%; margin: unset; text-align: center; } .product .rightbox .optbox .optdiv select { width: 100%; border: none; outline: none; line-height: 38px; height: 40px; color: #333333; font-size: 14px; padding-left: 15px; padding-right: 30px; background: url(./images/img36.png) center right 15px no-repeat; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; appearance: none; -moz-appearance: none; -webkit-appearance: none; } .product .rightbox .listbox { margin-top: 30px; } .product .rightbox .listbox ul.goods_list li { float: left; /* width: 31.133%; */ width:25%; /* margin-right: 3.3%; */ /* margin-bottom: 5%; */ padding:0 16px; } .product .rightbox .listbox ul.goods_list li:nth-child(3n) { margin-right: 0; } .product .rightbox .listbox ul.goods_list li:nth-child(3n+1) { clear: both; } /*分页*/ .page { width: 100%; text-align: center; } .page-list { font-size: 0; } .page-list li { display: inline-block; margin-right: 10px; margin-bottom: 5px; } .page-list a { display: inline-block; vertical-align: top; padding: 0px 10px; min-width: 42px; height: 42px; line-height: 42px; text-align: center; /*font-family: arial;*/ font-size: 18px; color: #333333; border: #666666 solid 1px; overflow: hidden; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .page-list span { display: inline-block; vertical-align: top; padding: 0px 10px; min-width: 42px; height: 42px; line-height: 42px; text-align: center; /*font-family: arial;*/ font-size: 18px; color: #333333; border: #666666 solid 1px; overflow: hidden; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .page-list li:last-child { margin-right: 0; } .page-list a.fyprev { background: url(./images/img129.png) center no-repeat; } .page-list a.fynext { background: url(./images/img130.png) center no-repeat; } .page-list a.fyprev:hover { background: #000000 url(./images/img129a.png) center no-repeat; } .page-list a.fynext:hover { background: #000000 url(./images/img130a.png) center no-repeat; } .page-list li.active { background: #202020; } .page-list li.active span { color: #FFFFFF; } .page-list li.disabled span { color: #cccccc; border: 1px solid #dedede; } @media only screen and (min-width: 991px) { .page-list a:hover { color: #FFFFFF; background: #202020; } } /*产品详情*/ .product-details { padding-top: 35px; } .product-details .leftbox { float: left; width: 58%; overflow: hidden; } /**/ .pc-slide { width: 100%; margin: 0 auto; overflow: hidden; } .pc-slide .view { float: right; width: 86%; padding-left: 4%; overflow: hidden; box-sizing: border-box; } .view .swiper-container { width: 100%; } .view .swiper-slide .bimg { width: 100%; overflow: hidden; text-align: center; } .view .swiper-slide .bimg .fancy { display: block !important; } .view .swiper-slide .bimg img { width: 100%; } .enlarge { position: absolute; right: 10%; bottom: 11.3%; z-index: 11; width: 48px; height: 48px; background: url(./images/img137.png); background-size: 100% 100%; cursor: pointer; } .enlarge a { display: block; width: 100%; overflow: hidden; } /*.enlarge a img{ width: 100%; }*/ .view .arrow-left { background: url(./images/img135.png) no-repeat left top; background-size: 100% 100%; position: absolute; left: 10%; top: 50%; margin-top: -24px; width: 42px; height: 48px; z-index: 10; } .view .arrow-left:hover { background: url(./images/img135a.png) no-repeat left top; background-size: 100% 100%; } .view .arrow-right { background: url(./images/img136.png) no-repeat left bottom; background-size: 100% 100%; position: absolute; right: 10%; top: 50%; margin-top: -24px; width: 42px; height: 48px; z-index: 10; } .view .arrow-right:hover { background: url(./images/img136a.png) no-repeat left top; background-size: 100% 100%; } .preview { float: left; width: 14%; overflow: hidden; position: relative; } .preview .swiper-container { width: 100%; height: 100%; } .preview .swiper-slide { width: 100%; cursor: pointer; padding: 7px; box-sizing: border-box; } .preview .swiper-slide .simg { text-align: center; border: #e2e2e2 solid 1px; } .preview .swiper-slide.active-nav .simg { box-shadow: 0px 0px 7px rgba(42,42,42,0.6); } /**/ .product-details .rightbox { float: left; width: 42%; overflow: hidden; box-sizing: border-box; padding-left: 3.5%; } .product-details .rightbox .text { } .product-details .rightbox .text .t1 { color: #333333; font-size: 36px; font-weight: bold; } .product-details .rightbox .text .t2 { margin-top: 12px; cursor: pointer; } .product-details .rightbox .text .t2 a { display: block; width: 100%; } .product-details .rightbox .text .t2 img { display: inline-block; vertical-align: middle; } .product-details .rightbox .text .t2 .sp { display: inline-block; vertical-align: -webkit-baseline-middle; margin-left: 20px; color: #888888; font-size: 18px; } .product-details .rightbox .text .t3 { margin-top: 20px; color: #888888; font-size: 16px; line-height: 1.6; } .product-details .rightbox .size { margin-top: 25px; } .product-details .rightbox .subt { color: #000000; font-size: 16px; } .product-details .rightbox .size ul { margin-top: 20px; } .product-details .rightbox .size ul li { float: left; margin-right: 20px; margin-bottom: 20px; min-width: 70px; text-align: center; border: #cccccc solid 1px; background-color: #f8f8f8; box-sizing: border-box; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; cursor: pointer; } .product-details .rightbox .size ul li a { padding: 0px 10px; color: #888888; font-size: 16px; height: 36px; line-height: 36px; } .product-details .rightbox .size ul li:hover { border: #000000 solid 1px; } .product-details .rightbox .size ul li:hover a { color: #000000; } .product-details .rightbox .size ul li.on { border: #000000 solid 1px; } .product-details .rightbox .size ul li.on a { color: #000000; } .product-details .rightbox .quantity { margin-top: 15px; } .product-details .rightbox .purchase-quantity { margin-top: 15px; } .product-details .rightbox .purchase-quantity .count input { width: 100%; text-align: center; font-size: 14px; } .product-details .rightbox .total { margin-top: 40px; padding: 25px 0px; border-top: #e9e9e9 solid 1px; border-bottom: #e9e9e9 solid 1px; } .product-details .rightbox .total .sp1 { display: inline-block; /* margin-right: 35px; */ color: #f98e68; font-size: 28px; font-weight: bold; } .product-details .rightbox .total .sp2 { display: inline-block; color: #888888; font-size: 16px; } .product-details .rightbox .total .sp3 { display: inline-block; margin-left:16px; font-family: "Montserrat-Regular", sans-serif, "Arial", "Microsoft YaHei", "Helvetica Neue", Helvetica; color: #999; /* float:right; */ font-size: 12px; font-weight: 400; line-height: 68px; } .product-details .rightbox .total .sp2 span { display: inline-block; margin-left: 10px; text-decoration: line-through; } .product-details .rightbox .btn { margin-top: 40px; } .product-details .rightbox .btn a { width: 100%; height: 60px; line-height: 58px; padding: 0px 20px; box-sizing: border-box; margin-bottom: 30px; text-align: center; border-radius: 30px; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .product-details .rightbox .btn a.btn1 { border: #cccccc solid 1px; font-size: 18px; background: #000000; color: #ffffff; text-transform: uppercase; } .product-details .rightbox .btn a.btn1:hover { /* background: none; */ color: #fff; } .product-details .rightbox .btn a.btn2 { border: #cccccc solid 1px; font-size: 16px; color: #333333; position: relative; z-index: 10; } .product-details .rightbox .btn a img { display: inline-block; vertical-align: text-bottom; margin-right: 5px; } .product-details .rightbox .btn a img.ic2 { display: none; } .product-details .rightbox .btn a:hover img.ic1 { display: none; } .product-details .rightbox .btn a:hover img.ic2 { display: inline-block; } .product-details .rightbox .btn a.btn2:hover { background: #000000; color: #ffffff; } .product-details .rightbox .xintext { padding-bottom: 30px; border-bottom: #e9e9e9 solid 1px; } .product-details .rightbox .xintext .t1 { color: #000000; font-size: 16px; font-weight: bold; } .product-details .rightbox .xintext .t2 { margin-top: 15px; color: #888888; font-size: 16px; line-height: 1.6; } .product-details .rightbox .xintext ul { margin-top: 30px; color: #333333; font-size: 16px; } .product-details .rightbox .xintext ul li { margin-bottom: 10px; } .product-details .rightbox .xintext ul li img { display: inline-block; margin-right: 8px; } /**/ .paytext { padding: 20px 16px; background: #f8f8f8; } .paytext ul li { width: 100%; overflow: hidden; margin-bottom: 5px; } .paytext ul li .ic { float: left; width: 120px; overflow: hidden; } .paytext ul li .ic img { max-width: 100%; } .paytext ul li .txt { float: left; width: -moz-calc(100% - 120px); width: -webkit-calc(100% - 120px); width: calc(100% - 120px); color: #666666; font-size: 16px; line-height: 1.7; } .product-details .detailbox { position: relative; } .product-details .tagbox { position: absolute; left: 3.6%; top: 130px; z-index: 15; width: 160px; filter: alpha(opacity=0); opacity: 0; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .product-details .tagbox.fixed { position: fixed; filter: alpha(opacity=100); opacity: 1; } .product-details .tagbox ul li { margin-bottom: 10px; text-align: center; } .product-details .tagbox ul li span { position: relative; display: inline-block; min-width: 130px; background: #e9e9e9; border-radius: 20px; height: 40px; line-height: 40px; text-align: center; color: #000000; font-size: 16px; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; cursor: pointer; } .product-details .tagbox ul li.on span { color: #FFFFFF; font-weight: bold; border-radius: 25px; line-height: 44px; height: 50px; -moz-box-shadow: 0px 6px 8px rgba(10,2,5,0.22); -webkit-box-shadow: 0px 6px 8px rgba(10,2,5,0.22); box-shadow: 0px 6px 8px rgba(10,2,5,0.22); } .product-details .tagbox ul li.on span:before { content: ''; position: absolute; left: 50%; bottom: 12px; width: 30px; height: 2px; margin-left: -15px; background: #FFFFFF; } .product-details .tagbox ul li.on span { background: #000000; } .product-details .detailbox .conwidth>ul { margin-top: 30px; } .product-details .detailbox .conwidth>ul>li { /*padding-top: 102px; margin-top: -102px;*/ /* padding-top: 130px; margin-top: -130px; */ padding-bottom: 30px; } .product-details .fold-box { width: 58%; } /* .product-details .fold-box ul li { width: 100%; margin-bottom: 10px; } */ .product-details .detailbox .tit { color: #000000; font-size: 20px; font-weight: bold; } .product-details .fold-box ul li .tit { position: relative; padding-right: 70px; padding-left: 20px; height: 60px; line-height: 60px; background-color: #F8F8F8; box-sizing: border-box; } .product-details .fold-box ul li .ic { position: absolute; top: 0; right: 0; width: 70px; height: 100%; background: url(./images/img141.png) center no-repeat; } .product-details .fold-box ul li.on .ic { background: url(./images/img142.png) center no-repeat; } .product-details .fold-box ul li .text { display: none; padding: 20px 20px 40px; color: #666666; font-size: 16px; line-height: 1.6; } .product-details .frequently { margin-top: 30px; } .product-details .frequently ul { margin-top: 30px; border: #cccccc solid 1px; box-sizing: border-box; } .product-details .frequently ul li { position: relative; float: left; width: 34.28%; box-sizing: border-box; border-right: #cccccc solid 1px; } .product-details .frequently ul li:nth-child(3n) { width: 31.44%; padding-top: 25px; border-right: none; text-align: center; } .product-details .frequently ul li .addicon { position: absolute; right: -25px; top: 50%; margin-top: -24px; width: 48px; height: 48px; background: url(./images/img145.png) center no-repeat; } .product-details .frequently ul li a { display: block; width: 100%; overflow: hidden; padding: 20px 40px 20px 30px; box-sizing: border-box; } .product-details .frequently ul li .img { float: left; width: 100px; text-align: center; overflow: hidden; } .product-details .frequently ul li .img img { max-width: 100%; } .product-details .frequently ul li .txt { float: right; width: -moz-calc(100% - 120px); width: -webkit-calc(100% - 120px); width: calc(100% - 120px); overflow: hidden; } .product-details .frequently ul li .txt .t1 { color: #666666; font-size: 16px; line-height: 1.7; } .product-details .frequently ul li .txt .t2 { margin-top: 5px; font-weight: bold; color: #000000; font-size: 18px; line-height: 1.7; } .product-details .frequently ul li .total { color: #000000; font-size: 22px; font-weight: bold; text-align: center; margin-bottom: 15px; } .product-details .frequently ul li .addto { display: inline-block; background: #000000; width: auto; height: 50px; line-height: 50px; border-radius: 25px; padding: 0 30px; color: #FFFFFE; font-size: 16px; } .product-details .reviews .box { position: relative; margin-top: 25px; padding: 25px 0px; border-top: #e9e9e9 solid 1px; border-bottom: #e9e9e9 solid 1px; } /**/ .pop-up { display: flex; justify-content: center; align-items: center; top: 0; bottom: 0; left: 0; right: 0; position: fixed; z-index: 99999; background: rgba(0,0,0,0.5); } .pop-up .container { width: 100%; height: 100%; } .pop-up .container .wrapper { display: flex; justify-content: center; align-items: center; flex-basis: auto; flex-grow: 1; flex-shrink: 1; width: 100%; background-repeat: no-repeat; background-size: contain; background-position: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: move; position: relative; overflow: hidden; } .pop-up .container .wrapper .bigimage { position: relative; display: block; background: #000; flex: 0 0 auto; max-width: 100%; max-height: 100%; z-index: 2; touch-action: none; pointer-events: none; } .pop-up .container .wrapper .icon { color: #333; background: #fff; width: 42px; height: 42px; right: 16px; z-index: 3; cursor: pointer; box-sizing: border-box; position: absolute; border-radius: 50%; outline: 0; border-width: 1px; border-style: solid; border-color: #c4c4c4; } .pop-up .container .wrapper .icon[data-disabled=true] { cursor: not-allowed; border: 0; filter: alpha(opacity=60); opacity: .6; background: #ccc; } /**/ .product-details .reviews .summary-left { position: sticky; top: 130px; float: left; width: 34%; overflow: hidden; } .product-details .reviews .summary-left .score { width: 100%; overflow: hidden; } .product-details .reviews .summary-left .score span { display: inline-block; } .product-details .reviews .summary-left .score span img { display: inline-block; vertical-align: middle; } .product-details .reviews .summary-left .score .grade { display: inline-block; vertical-align: bottom; color: #333333; font-size: 24px; margin-left: 25px; } .product-details .reviews .summary-left .score .num { display: inline-block; vertical-align: -webkit-baseline-middle; margin-left: 20px; color: #333333; font-size: 16px; } .product-details .reviews .summary-left ul { margin-top: 30px; } .product-details .reviews .summary-left ul li { margin-bottom: 10px; } .product-details .reviews .summary-left ul li span { display: inline-block; vertical-align: middle; } .product-details .reviews .summary-left ul li .s1 { color: #333333; font-size: 16px; } .product-details .reviews .summary-left ul li .s2 { margin-right: 7px; margin-left: 5px; } .product-details .reviews .summary-left ul li .s3 { position: relative; width: 100px; white-space: nowrap; } .product-details .reviews .summary-left ul li .s3 .pillar { min-width: 4%; height: 15px; background: #000000; margin-right: 7px; } .product-details .reviews .summary-left ul li .s4 { color: #333333; font-size: 16px; } .product-details .reviews .summary-left .create { margin-top: 55px; } .product-details .reviews .summary-left .create a { color: #000000; font-size: 16px; } .product-details .reviews .summary-right { float: right; width: 65%; overflow: hidden; } .product-details .reviews .summary-right ul li { padding-bottom: 5.8%; margin-bottom: 4.5%; border-bottom: #e9e9e9 solid 1px; } .product-details .reviews .summary-right ul li:last-child { border-bottom: none; } .product-details .reviews .summary-right ul li .toptit { width: 100%; overflow: hidden; } .product-details .reviews .summary-right ul li .toptit .s1 { display: inline-block; vertical-align: middle; margin-right: 25px; color: #000000; font-size: 20px; font-weight: bold; } .product-details .reviews .summary-right ul li .toptit .s2 { display: inline-block; vertical-align: middle; } .product-details .reviews .summary-right ul li .toptit .s2 img { display: inline-block; vertical-align: middle; margin-right: 5px; } .product-details .reviews .summary-right ul li .txt { margin-top: 20px; color: #666666; font-size: 16px; line-height: 1.6; } .product-details .reviews .summary-right ul li .oth { width: 100%; overflow: hidden; margin-top: 20px; } .product-details .reviews .summary-right ul li .oth .t1 { display: inline-block; vertical-align: top; margin-right: 18px; color: #666666; font-size: 16px; line-height: 1.6; } .product-details .reviews .summary-right ul li .oth .t2 { display: inline-block; vertical-align: top; font-weight: bold; color: #000000; font-size: 16px; line-height: 1.6; } .product-details .reviews .summary-right ul li .subtit { margin-top: 20px; color: #000000; font-size: 18px; font-weight: bold; } .product-details .reviews .summary-right ul li .operate { margin-top: 15px; } .product-details .reviews .summary-right ul li .operate .btn { display: inline-block; vertical-align: middle; margin-right: 13px; border: #000000 solid 1px; padding: 0px 16px; height: 34px; line-height: 34px; color: #000000; font-size: 16px; } .product-details .reviews .summary-right ul li .operate .btn img { display: inline-block; vertical-align: middle; margin-right: 10px; } .product-details .reviews .summary-right ul li .operate .sp { display: inline-block; vertical-align: middle; padding-left: 20px; color: #333333; font-size: 16px; } .product-details .other-bought { padding-top: 5.5%; padding-bottom: 6%; } .product-details .other-bought .tit { margin-top: 10px; text-align: center; } .product-details .other-bought .box { margin-top: 5.5%; } .product-details .other-bought .box>ul>li { float: left; width: -moz-calc((100% - 75px) / 5); width: -webkit-calc((100% - 75px) / 5); width: calc((100% - 75px) / 5); margin-right: 16px; margin-bottom: 16px; /* padding-top: 40px; */ padding-bottom: 30px; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .product-details .other-bought .box ul li:nth-child(5n) { margin-right: 0; } @media only screen and (min-width: 991px) { .product-details .other-bought .box>ul>li:hover { -moz-box-shadow: 0px 0px 28px rgba(10,2,5,0.1); -webkit-box-shadow: 0px 0px 28px rgba(10,2,5,0.1); box-shadow: 0px 0px 28px rgba(10,2,5,0.1); } } .product-details .other-bought .box .imgbox { position: relative; width: 100%; overflow: hidden; } .product-details .other-bought .box .imgbox>img { display: block; margin: auto; max-width: 100%; } .product-details .other-bought .box .imgbox ul { position: absolute; left: 0; top: 50%; /*-webkit-transform: translateY(-50%); transform: translateY(-50%);*/ text-align: center; font-size: 0; width: 100%; /*display: none;*/ visibility: hidden; filter: alpha(opacity=0); opacity: 0; -o-transform: translateY(50px); -ms-transform: translateY(50px); -moz-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .m-bought { display: none; position: relative; width: 100%; overflow: hidden; padding-bottom: 50px; } .m-bought .swiper-pagination-bullet-active { opacity: 1; background: #000000; } .m-bought .swiper-container-horizontal>.swiper-pagination-bullets, .m-bought .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0; } @media only screen and (min-width: 991px) { .product-details .other-bought .box ul li:hover ul { /*display: block;*/ visibility: visible; filter: alpha(opacity=100); opacity: 1; -o-transform: translateY(0px); -ms-transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } } .product-details .other-bought .box .imgbox ul li { position: relative; display: inline-block; vertical-align: top; margin-right: 45px; } .product-details .other-bought .box .imgbox ul li:nth-child(2n) { margin-right: 0; } .product-details .other-bought .box .imgbox ul li a { display: block; width: 65px; height: 65px; line-height: 65px; text-align: center; border-radius: 33px; overflow: hidden; background: rgba(0,0,0,0.8); -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .product-details .other-bought .box .imgbox ul li a img { max-width: 45%; } .product-details .other-bought .box .imgbox ul li:hover a { background: rgba(249,142,104,0.8); } .product-details .other-bought .box .imgbox ul li .txt { position: absolute; left: 0; bottom: 80px; padding: 11px 10px; border-radius: 10px; min-width: 140px; box-sizing: border-box; background: #333333; color: #ffffff; font-size: 18px; /*display: none;*/ visibility: hidden; opacity: 0; -o-transform: translateY(-50px); -ms-transform: translateY(-50px); -moz-transform: translateY(-50px); -webkit-transform: translateY(-50px); transform: translateY(-50px); -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .product-details .other-bought .box .imgbox ul li:nth-child(2) .txt { left: auto; right: 0; min-width: 150px; } .product-details .other-bought .box .imgbox ul li:hover .txt { /*display: block;*/ visibility: visible; filter: alpha(opacity=100); opacity: 1; -o-transform: translateY(0px); -ms-transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } .product-details .other-bought .box .imgbox ul li .txt:before { content: ''; position: absolute; left: 20px; bottom: -11px; border-top: 12px solid #333333; border-left: 8px solid transparent; border-right: 8px solid transparent; } .product-details .other-bought .box .imgbox ul li:nth-child(2) .txt:before { content: ''; position: absolute; right: 20px; left: auto; bottom: -11px; border-top: 12px solid #333333; border-left: 8px solid transparent; border-right: 8px solid transparent; } .product-details .other-bought .box .txtbox { text-align: center; } .product-details .other-bought .box .txtbox a { padding: 0px 20px; } .product-details .other-bought .box .txtbox .t1 { color: #000000; font-size: 18px; line-height: 1.6; } .product-details .other-bought .box .txtbox .t2 { margin-top: 10px; color: #888888; font-size: 20px; } /**/ .summer { padding-top: 3.1%; } .summer .box1 { margin-top: 4.2%; } .summer .box1 ul li { float: left; width: 23.5%; margin-right: 2%; margin-bottom: 2%; padding: 2%; } .summer .box1 ul li:nth-child(4n) { margin-right: 0; } .summer .box2 { margin-top: 6%; } .summer .box2 ul { padding-bottom: 20px; } .summer .box2 ul li { float: left; width: 22%;/*2022/7/2*/ margin-right: 4%;/*2022/7/2*/ margin-bottom: 4.55%;/*-o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;*//*2022/7/2*/ } .summer .box2 ul li:nth-child(4n) { margin-right: 0;/*2022/7/2*/ } @media only screen and (min-width: 991px) { /*.summer .box2 ul li:hover{ -o-transform: translateY(-20px); -ms-transform: translateY(-20px); -moz-transform: translateY(-20px); -webkit-transform: translateY(-20px); transform: translateY(-20px); -moz-box-shadow: 7px 7px 15px rgba(10,2,5,0.3); -webkit-box-shadow: 7px 7px 15px rgba(10,2,5,0.3); box-shadow: 7px 7px 15px rgba(10,2,5,0.3); } */ /*2022/7/2*/ } .summer .box2 ul li a { display: block; width: 100%; } .summer .box2 ul li .imgbox { /* width: 100%;*//*2022/7/2*/ overflow: hidden; } .summer .box2 ul li .imgbox img { width: 100%; } .summer .box2 ul li .txtbox { padding: 30px 0px;/*2022/7/4*/ border: 1px solid #c4c4c4; /*2022/7/2*//*-o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;*/ /*2022/7/2*/ } @media only screen and (min-width: 991px) { /*.summer .box2 ul li:hover .txtbox{ padding: 25px 20px; }*//*2022/7/2*/ } .summer .box2 ul li .txtbox .t1 { color: #333333; padding: 0 20px;/*2022/7/1*/ font-size: 14px; /*2022/7/1*/ text-align: center;/*2022/7/1*/ line-height: 30px;/*2022/7/1*//* overflow: hidden;      word-break: break-all;     text-overflow: ellipsis;      display: -webkit-box;      -webkit-box-orient: vertical;      -webkit-line-clamp: 2;*/ } .summer .box2 ul li .txtbox .t2 { color: #888888; font-size: 16px;/*2022/7/1*/ line-height: 24px;/*2022/7/1*/ padding: 0 20px;/*2022/7/1*/ text-align: center;/*2022/7/1*/ margin-top: 10px; } .shop-banner { position: relative; } .shop-banner a { display: block; width: 100%; } .shop-banner a>img { width: 100%; } .shop-banner .obbg { display: none; width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .shop-banner a .text { position: absolute; left: 50%; top: 50%; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .shop-banner a .text .pic { width: 100%; overflow: hidden; } .shop-banner a .text .pic img { max-width: 100%; } .shop-banner a .text .tit { margin-top: 10px; font-family: 'NotoSanSC'; color: #fffffe; font-size: 50px; font-weight: bold; } .essential { padding-top: 4.68%; padding-bottom: 5%; } .essential .box { margin-top: 6.4%; } .essential .box ul li { float: left; width: 23.5%; margin-right: 2%; margin-bottom: 2%; } .essential .box ul li:nth-child(4n) { margin-right: 0; } .o-banner { position: relative; } .o-banner>a { display: block; width: 100%; } .o-banner>a>img { /*display: block;*/ width: 100%; } .o-banner .text { position: absolute; left: 50%; top: 50%; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .o-banner .text .t1 { font-family: "didotb"; color: #fffffe; font-size: 48px; } .o-banner .text .t2 { font-family: "didotb"; color: #fffffe; font-size: 60px; } .o-banner .text .t3 { font-family: "didot"; color: #ffffff; font-size: 20px; margin-top: 15px; } .o-banner .text .btn { text-align: center; margin-top: 40px; } .o-banner .text .btn span { display: inline-block; padding: 0px 30px; height: 52px; line-height: 52px; border: #ffffff solid 2px; border-radius: 26px; letter-spacing: 1.5px; color: #ffffff; font-size: 16px; font-weight: bold; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .o-banner .text .btn span:hover { background: #ffffff; color: #000000; } /*sale*/ .discount-area { padding-top: 3%; } .discount-area .box { position: relative; margin-top: 3.6%; } .discount-area .areabox .pic a { display: block; width: 100%; } .discount-area .areabox .pic a img { width: 100%; } .discount-area .box .areabox::before { content: ''; position: absolute; left: 0; bottom: 0; z-index: 8; width: 100%; height: 80px; background: #2e2e2e; } .discount-area .swtab { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; z-index: 9; width: -moz-calc(100% - 160px); width: -webkit-calc(100% - 160px); width: calc(100% - 160px); } .discount-area .swtab ul { text-align: center; font-size: 0; } .discount-area .swtab ul li { position: relative; display: inline-block; vertical-align: bottom; min-width: 21%; padding: 0px 30px; text-align: center; box-sizing: border-box; color: #fefefe; font-size: 18px; height: 80px; line-height: 80px; /*-webkit-transition: all 0.4s ease; transition: all 0.4s ease;*/ -o-transition: height 0.3s linear; -ms-transition: height 0.3s linear; -moz-transition: height 0.3s linear; -webkit-transition: height 0.3s linear; transition: height 0.3s linear; cursor: pointer; } .discount-area .swtab ul li::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 1px; height: 28px; border-right: #ffffff dashed 1px; } .discount-area .swtab ul li:last-child::before { border-right: none; } .discount-area .swtab ul li.on { height: 106px; line-height: 106px; font-weight: bold; color: #ffffff; background: #000000; } .discount-area .swtab ul li.on::before { border-right: #000000 dashed 1px; } .discount-area .swiper-button-next, .discount-area .swiper-button-prev { position: absolute; top: auto; bottom: 0; width: 80px; height: 80px; margin-top: 0; z-index: 10; cursor: pointer; -moz-background-size: 9px 15px; -webkit-background-size: 9px 15px; background-size: 9px 15px; background-position: center; background-repeat: no-repeat; } .discount-area .swiper-button-next, .discount-area .swiper-container-rtl .swiper-button-prev { background-image: url(./images/img179.png); right: 0; left: auto; } .discount-area .swiper-button-prev, .discount-area .swiper-container-rtl .swiper-button-next { background-image: url(./images/img178.png); left: 0; right: auto; } .connew { padding-top: 5%; padding-bottom: 4%; } .connew .box { margin-top: 6.3%; } .connew .box>ul { font-size: 0; } .connew .box>ul>li { display: inline-block; vertical-align: top; width: 23.65%; margin-right: 1.8%; margin-bottom: 1.8%; padding-top: 40px; padding-bottom: 30px; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .connew .box ul li:nth-child(4n) { margin-right: 0; } @media only screen and (min-width: 991px) { .connew .box>ul>li:hover { -moz-box-shadow: 0px 0px 28px rgba(10,2,5,0.1); -webkit-box-shadow: 0px 0px 28px rgba(10,2,5,0.1); box-shadow: 0px 0px 28px rgba(10,2,5,0.1); } } .connew .box .imgbox { position: relative; width: 100%; overflow: hidden; } .connew .box .imgbox>img { display: block; margin: auto; max-width: 100%; } .connew .box .imgbox ul { position: absolute; left: 0; top: 50%; /*-webkit-transform: translateY(-50%); transform: translateY(-50%);*/ text-align: center; font-size: 0; width: 100%; /*display: none;*/ visibility: hidden; filter: alpha(opacity=0); opacity: 0; -o-transform: translateY(50px); -ms-transform: translateY(50px); -moz-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } @media only screen and (min-width: 991px) { .connew .box ul li:hover ul { /*display: block;*/ visibility: visible; filter: alpha(opacity=100); opacity: 1; -o-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } } .connew .box ul li ul li { position: relative; display: inline-block; vertical-align: top; margin-right: 45px; } .connew .box ul li ul li:nth-child(2n) { margin-right: 0; } .connew .box ul li ul li a { display: block; width: 65px; height: 65px; line-height: 65px; text-align: center; border-radius: 33px; overflow: hidden; background: rgba(0,0,0,0.8); -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .connew .box ul li ul li a img { max-width: 45%; } .connew .box ul li ul li:hover a { background: rgba(249,142,104,0.8); } .connew .box .imgbox ul li .txt { position: absolute; left: 0; bottom: 80px; padding: 11px 10px; border-radius: 10px; min-width: 140px; width: 100%; box-sizing: border-box; background: #333333; color: #ffffff; font-size: 18px; /*display: none;*/ visibility: hidden; filter: alpha(opacity=0); opacity: 0; -o-transform: translateY(-50px); -ms-transform: translateY(-50px); -moz-transform: translateY(-50px); -webkit-transform: translateY(-50px); transform: translateY(-50px); -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .connew .box .imgbox ul li:nth-child(2) .txt { left: auto; right: 0; min-width: 150px; } @media only screen and (min-width: 991px) { .connew .box ul li ul li:hover .txt { /* display: block; */ -o-transform: translateY(0px); -ms-transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); visibility: visible; filter: alpha(opacity=0); opacity: 1; } } .connew .box .imgbox ul li.on .txt { -o-transform: translateY(0px); -ms-transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); visibility: visible; filter: alpha(opacity=100); opacity: 1; } .connew .box .imgbox ul li .txt:before { content: ''; position: absolute; left: 20px; bottom: -11px; border-top: 12px solid #333333; border-left: 8px solid transparent; border-right: 8px solid transparent; } .connew .box .imgbox ul li:nth-child(2) .txt:before { content: ''; position: absolute; right: 20px; left: auto; bottom: -11px; border-top: 12px solid #333333; border-left: 8px solid transparent; border-right: 8px solid transparent; } .connew .box .txtbox { text-align: center; } .connew .box .txtbox a { padding: 0px 20px; } .connew .box .txtbox .t1 { color: #000000; font-size: 18px; line-height: 1.6; } .connew .box ul li:hover .txtbox .t1, .connew .box .swiper-slide:hover .txtbox .t1 { color: #f98e68; } .connew .box .txtbox .t2 { margin-top: 10px; color: #888888; font-size: 20px; } /*退款页面*/ .return-refund { padding-top: 50px; padding-bottom: 4.68%; } .return-refund .box { } .return-refund .leftbox { float: left; width: -moz-calc(100% - 290px); width: -webkit-calc(100% - 290px); width: calc(100% - 290px); padding-right: 5.7%; box-sizing: border-box; } .return-refund .rightbox { float: right; width: 290px; overflow: hidden; } .return-refund .title.x1 { border-bottom: #000000 solid 2px; } .return-refund .title.x2 { border-bottom: #707070 solid 1px; } .return-refund .title .t1 { color: #000000; font-size: 28px; font-weight: bold; padding-bottom: 15px; } .return-refund .order-txt { padding-top: 25px; padding-bottom: 25px; width: 100%; overflow: hidden; } .return-refund .order-txt .t1 { float: left; width: 50%; overflow: hidden; color: #000000; font-size: 16px; line-height: 1.5; } .return-refund .order-txt .t2 { float: right; max-width: 50%; overflow: hidden; color: #f51e1e; font-size: 14px; line-height: 1.5; } .order-list { } .order-list .tit { background: #eeeeee; overflow: hidden; color: #333333; font-size: 16px; line-height: 1.6; padding: 12px 0px; } .order-list .w1 { float: left; width: 25%; text-align: center; } .order-list .w2 { display: flex; align-items: center; float: left; width: 44.6%; text-align: center; overflow: hidden; } .order-list .w2 .w2-1 { float: left; width: 58.6%; text-align: left; padding-left: 15px; box-sizing: border-box; } .order-list .w2 .w2-2 { float: left; width: 41.4%; } .order-list .w3 { float: left; width: 30.4%; text-align: center; overflow: hidden; } .order-list .w3 .w3-1 { float: left; width: 50%; } .order-list .w3 .w3-2 { float: left; width: 50%; } .order-list ul li { border-bottom: #dbdbdb solid 1px; } /* edit by river 2022-04-25 */ .order-list ul li .li_a { display: flex; align-items: center; width: 100%; padding: 5% 0; overflow: hidden; color: #333333; font-size: 16px; line-height: 1.5; } .order-list ul li .img { width: 100%; overflow: hidden; } .order-list ul li .img img { max-width: 100%; } .order-table { } .order-table ul li { padding: 5% 0; border-bottom: #e5e5e5 solid 1px; overflow: hidden; } .order-table ul li .w1 { float: left; width: 200px; overflow: hidden; } .order-table ul li .w2 { float: left; width: -moz-calc(100% - 200px); width: -webkit-calc(100% - 200px); width: calc(100% - 200px); overflow: hidden; } .order-table ul li .sp { color: #000000; font-size: 18px; padding-top: 8px; } .order-table ul li .reasons select { max-width: 300px; width: 100%; border: #000000 solid 1px; outline: none; line-height: 34px; height: 36px; color: #999999; font-size: 16px; padding-left: 15px; padding-right: 30px; background: url(./images/img36.png) center right 15px no-repeat; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; appearance: none; -moz-appearance: none; -webkit-appearance: none; } .order-table ul li .explain { max-width: 495px; width: 100%; padding: 15px 15px 0px; border: #000000 solid 1px; box-sizing: border-box; } .order-table ul li .explain textarea { width: 100%; height: 135px; border: none; outline: none; background: none; resize: none; color: #000000; font-size: 16px; line-height: 1.5; } .order-table ul li .explain textarea::-webkit-input-placeholder { /*font-family: arial;*/ font-family: sans-serif; color: #999999; } .order-table ul li .explain textarea::-moz-input-placeholder { /*font-family: arial;*/ font-family: sans-serif; color: #999999; } .order-table ul li .explain textarea::-ms-input-placeholder { /*font-family: arial;*/ font-family: sans-serif; color: #999999; } .order-table ul li .text-right { margin-top: 10px; margin-bottom: 10px; text-align: right; color: #999999; font-size: 16px; } .order-table ul li .text-tips { color: #999999; font-size: 16px; line-height: 1.5; margin-top: 5px; } .order-table ul li .upload { } .order-table ul li .upload ul { float: left; overflow: hidden; width: auto; } .order-table ul li .upload ul li { float: left; width: 82px; height: 82px; margin-right: 10px; padding: 0; } .order-table ul li .upload ul li img { width: 100%; } .order-table ul li .upload .operate { float: left; position: relative; width: 80px; height: 80px; line-height: 80px; border: #a0a0a0 dashed 1px; text-align: center; } .order-table ul li .upload .operate img { max-width: 100%; } .order-table ul li .upload .operate input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: none; border: none; outline: none; opacity: 0; } .order-table ul li ul { display: block; width: 100%; } .order-table ul li ul li { padding: 0; border-bottom: none; overflow: hidden; } .order-table ul li .txt { float: right; padding-right: 35px; color: #333333; font-size: 18px; } .order-table .order-btn { margin-top: 50px; text-align: right; } .order-table .order-btn .con { display: inline-block; text-align: center; } .order-table .order-btn .con .btn { border: #000000 solid 1px; height: 50px; line-height: 48px; padding: 0px 30px; text-align: center; box-sizing: border-box; font-size: 16px; border-radius: 25px; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .order-table .order-btn .con .btn1 { color: #000000; background: #ffffff; margin-right: 20px; } .order-table .order-btn .con .btn1:hover { color: #ffffff; background: #000000; } .order-table .order-btn .con .btn2 { color: #ffffff; background: #000000; } .order-table .order-btn .con .btn2:hover { color: #000000; background: none; } .return-refund .rightbox ul li { margin-bottom: 22.4%; } .return-refund .rightbox .wrap { } .return-refund .rightbox .touch { padding-top: 20px; padding-bottom: 20px; border-bottom: #e5e5e5 solid 1px; } .return-refund .rightbox .touch .t1, .return-refund .rightbox .touch .t3 { color: #333333; font-size: 16px; line-height: 1.8; } .return-refund .rightbox .touch .t2 { position: relative; padding-left: 50px; padding-top: 5px; color: #000000; font-size: 24px; margin: 15px auto; } .return-refund .rightbox .touch .t2 .ic { position: absolute; left: 0; top: 0; width: 35px; height: 35px; background: url(./images/img206.png) center no-repeat; background-size: 100% 100%; } .return-refund .rightbox .textbox { padding-top: 20px; } .return-refund .rightbox .textbox .ic { text-align: center; overflow: hidden; } .return-refund .rightbox .textbox .ic img { max-width: 100%; } .return-refund .rightbox .textbox .txt { margin-top: 20px; } .return-refund .rightbox .textbox .txt .t1 { color: #000000; font-size: 18px; text-align: center; } .return-refund .rightbox .textbox .txt .t2 { margin-top: 5px; line-height: 1.8; color: #333333; font-size: 16px; } /**/ .favourites { padding-top: 50px; padding-bottom: 50px; } .favourites .box { margin-top: 3.9%; } .favourites .box ul li { position: relative; float: left; width: 47%; /*2022/7/1*/ margin-right: 6%;/*2022/7/1*/ /*margin-bottom: 3.57%; border-bottom: #e7e7e7 solid 1px;*/ overflow: hidden; } /*.favourites .box ul li::before{ content: ''; position: absolute; left: 0; bottom: 0; z-index: 1; width: 0; height: 2px; background: #feaa8e; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }*//*2022/7/1*/ @media only screen and (min-width: 991px) { .favourites .box ul li:hover::before { width: 100%; } } .favourites .box ul li:nth-child(2n) { margin-right: 0; }/*2022/7/1*/ .favourites .box ul li a { position: relative; display: block;/*padding-bottom: 150px;*/ /*2022/7/1*/ } .favourites .box ul li .imgbox { width: 100%; overflow: hidden; } .favourites .box ul li .imgbox img { display: block; width: 100%; } .favourites .box ul li .txtbox { /*position: absolute; left: 0; bottom: 0; padding-top: 22px; padding-bottom: 30px; height: 150px;*/ box-sizing: border-box; -o-transition: height 0.5s ease; -ms-transition: height 0.5s ease; -moz-transition: height 0.5s ease; -webkit-transition: height 0.5s ease; transition: height 0.5s ease; background: #FFFFFF; } @media only screen and (min-width: 991px) { /*.favourites .box ul li:hover .txtbox{ height: 200px; }*/ /*2022/7/1*/ } .favourites .box ul li .txtbox .t1 { color: #131313; font-size: 18px;/*2022/7/4*/ text-transform: uppercase;/*2022/7/4*/ font-weight: bold; margin: 20px 0; /*2022/7/1*/ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .favourites .box ul li .txtbox .t2 { color: #888888; font-size: 14px;/*2022/7/4*/ /*text-align: justify ;*//*2022/7/4*/ line-height: 24px;/*2022/7/1*/ margin-bottom: 20px; /*2022/7/1*/ /*height: 54px;*/ /*2022/7/1*/ /*display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;*//*2022/7/2*/ overflow: hidden; } .favourites .box ul li .txtbox .btn { text-align: left;/*opacity: 0;*/ /*2022/7/1*/ /*visibility: hidden; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;*//*2022/7/1*/ } @media only screen and (min-width: 991px) { /*.favourites .box ul li:hover .txtbox .btn{ opacity: 1; visibility: visible; }*/ } .favourites .box ul li .txtbox .btn span { display: inline-block; padding: 0px 25px; /*height: 45px;*/ line-height: 45px; text-transform: uppercase;/*2022/7/1*/ color: #ffffff; font-size: 14px;/*2022/7/1*/ background: #000;/*border-radius: 23px;*/ } /*2022/7/1*/ .favourites .box ul li .txtbox .btn span:hover { background: #feaa8d; } .new-value { padding-top: 5.2%; } .new-value .box { margin-top: 6.2%; } /**/ .set-product { } .set-product ul li { float: left; width: 31.68%; margin-right: 2.48%; margin-bottom: 2.48%; } .set-product ul li:nth-child(3n) { margin-right: 0; } .set-product ul li a { padding-bottom: 20px; } /**/ .user-faq { padding-bottom: 40px; } .user-faq .title { font-size: 24px; font-weight: bold; } .user-faq ul { margin-top: 30px; } .user-faq ul li { border-bottom: #dbdbdb solid 1px; } .user-faq ul li .tit { position: relative; padding-right: 70px; padding-top: 22px; padding-bottom: 22px; line-height: 1.5; box-sizing: border-box; color: #000000; font-size: 16px; } .user-faq ul li .ic { position: absolute; top: 0; right: 0; width: 20px; height: 100%; background: url(./images/img200.png) top 27px right no-repeat; } .user-faq ul li.on .ic { background: url(./images/img201.png) top 27px right no-repeat; } .user-faq ul li .text { display: none; padding-bottom: 40px; color: #777777; font-size: 16px; line-height: 1.8; } /*选择支付*/ .select_payment { padding-top: 45px; padding-bottom: 6%; } .select_payment .title { /*font-family: arial;*/ color: #333333; font-size: 30px; font-weight: bold; padding-bottom: 18px; border-bottom: #000000 solid 2px; } .select_payment .box { padding: 35px 35px 0px; } .select_payment .order_infor { } .select_payment .order_infor ul { /*display: flex; justify-content: space-between; flex-wrap: wrap;*/ } .select_payment .order_infor ul li { float: left; min-width: 25%; margin-right: 5%; color: #333333; font-size: 18px; /*font-family: arial;*/ margin-bottom: 25px; } /*.select_payment .order_infor ul li:nth-child(3n){ margin-right: 0; }*/ .select_payment .order_infor ul li .sp { display: inline-block; color: #888888; } .select_payment .order_infor ul li .sp1 { display: inline-block; color: #f09a7b; } .select_payment .wrap { padding-top: 30px; } .select_payment .wrap .subtit { color: #000000; font-size: 20px; font-weight: bold; padding-bottom: 15px; border-bottom: #e1e1e1 solid 1px; } .select_payment .wrap ul { padding-top: 3.7%; padding-bottom: 3%; border-bottom: #e1e1e1 solid 1px; } .select_payment .wrap ul li { /* float: left; margin-bottom: 20px; margin-right: 40px; max-width: 160px; position: relative; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; border: #000000 solid 1px; */ /* background: url(./images/img221.png) center left 20px no-repeat; background-size: 29px 28px;*/ box-sizing: border-box; cursor: pointer; } .select_payment .wrap ul li.on { border: #000000 solid 1px; background: url(./images/img222.png) center left 20px no-repeat; background-size: 29px 28px; } .select_payment .wrap ul li:last-child { margin-right: 0; } .select_payment .wrap ul li .img { width: 100%; overflow: hidden; } .select_payment .wrap ul li .img img { max-width: 100%; } .select_payment .wrap .set_btn { margin-top: 50px; } .select_payment .wrap .set_btn a { display: inline-block; height: 48px; line-height: 48px; text-align: center; padding: 0px 30px; border-radius: 25px; background-color: #000000; border: #000000 solid 1px; color: #ffffff; font-size: 22px; /*font-family: arial;*/ text-transform: uppercase; } .select_payment .wrap ul li .selbtn { margin-bottom: 10px; } .select_payment .wrap ul li .selbtn .img { display: inline-block; vertical-align: middle; margin-left: 20px; width: -moz-calc(100% - 50px); width: -webkit-calc(100% - 50px); width: calc(100% - 50px); font-size: 16px; color: #666666; } .select_payment .wrap ul li .s-label { font-size: 0; cursor: pointer; } .select_payment .wrap ul li .s-label .choice-inp { display: none; } .select_payment .wrap ul li .selbtn .choice-inp[type=radio]+span { display: inline-block; vertical-align: middle; width: 29px; height: 28px;/* background: url(./images/img221.png) center no-repeat; background-size: 100% 100%;*/ } .select_payment .wrap ul li .selbtn .choice-inp[type=radio]:checked+span { display: inline-block; vertical-align: middle; width: 29px; height: 28px;/* background: url(./images/img222.png) center no-repeat; background-size: 100% 100%;*/ } /**/ @media only screen and (max-width: 1680px) { .collect-popup { right: 10%; } } @media only screen and (max-width: 1440px) { .conwidth { width: 90%; } .header .head-top .conwidth, .header .nav .conwidth, .header .head-other .conwidth { /* 2023.2.25 */ width: 104%; } .header .nav .conwidth>ul>li>a { padding: 0 15px; } .i-banner .box .t1 { font-size: 44px; } /*.i-title .t1{ font-size: 32px; }*/ .offers-section .box .txtbox .t2 { font-size: 32px; } .obanner .obtext .box .t1 { font-size: 44px; } .obanner .obtext .box .t2 { margin-bottom: 30px; } .obanner .obtext .box .t3 { font-size: 50px; } .o-banner .text .t1 { font-size: 44px; } .o-banner .text .t2 { font-size: 50px; } .shop-banner a .text .tit { font-size: 45px; } .bannerbg .content .box { font-size: 32px; } .product .leftbox { width: 270px; } .product .rightbox { width: -moz-calc(100% - 300px); width: -webkit-calc(100% - 300px); width: calc(100% - 300px); } .settlement .title { font-size: 28px; } .settlement .box .contbox .cont .agree { margin-top: 50px; } .settlement .box .settlebtn a { font-size: 20px; } .order-items .table .th>li { padding: 15px 0px; } .order-items .table .td>li { padding: 30px 0px; } .order-items .table .td>li .goods .txt ul { margin-bottom: 20px; } .cart .discount, .cart .total { padding: 30px 0px; } .cart .otherbox .btnbox a { font-size: 20px; } .purchase-quantity { display: block; max-width: 110px; overflow: hidden; box-sizing: border-box; font-size: 0; } .purchase-quantity .reduce, .purchase-quantity .add { /*width: 38px;*/ width: 30%; box-sizing: border-box; height: 36px; line-height: 36px; } .purchase-quantity .count { /*width: 45px;*/ width: 40%; line-height: 36px; } .discount-area .box .areabox::before { height: 75px; } .discount-area .swtab { width: -moz-calc(100% - 150px); width: -webkit-calc(100% - 150px); width: calc(100% - 150px); } .discount-area .swtab ul li { height: 75px; line-height: 75px; } .discount-area .swtab ul li.on { height: 92px; line-height: 92px; } .discount-area .swiper-button-next, .discount-area .swiper-button-prev { width: 75px; height: 75px; } .user-faq .title { font-size: 20px; } .return-refund .title .t1 { font-size: 22px; } .collect-popup { right: 5%; } /*选择支付*/ .select_payment .title { font-size: 28px; } .select_payment .wrap .set_btn a { font-size: 20px; } .category-section .box ul li .txt { font-size: 22px; } } @media only screen and (max-width: 1320px) { .header .nav .conwidth>ul>li>a { padding: 0 12px; } .i-banner .box .t1 { font-size: 40px; } /*.i-title .t1{ font-size: 30px; }*/ .offers-section .box .txtbox .t2 { font-size: 30px; } .obanner .obtext .box .t1 { font-size: 40px; } .obanner .obtext .box .t3 { font-size: 45px; } .o-banner .text .t1 { font-size: 40px; } .o-banner .text .t2 { font-size: 45px; } .shop-banner a .text .tit { font-size: 40px; } .settlement .box { margin-top: 40px; } .settlement .title { font-size: 26px; } .settlement .box .contbox .cont .agree { margin-top: 40px; } .discount-area .box .areabox::before { height: 70px; } .discount-area .swtab { width: -moz-calc(100% - 140px); width: -webkit-calc(100% - 140px); width: calc(100% - 140px); } .discount-area .swtab ul li { height: 70px; line-height: 70px; } .discount-area .swtab ul li.on { height: 86px; line-height: 86px; } .discount-area .swiper-button-next, .discount-area .swiper-button-prev { width: 70px; height: 70px; } .category-section .box ul li .txt { font-size: 20px; } } @media only screen and (max-width: 1240px) { .header .nav .conwidth>ul>li>a { padding: 0 9px; } .header .head-other .box ul li a, .header .head-other .box ul li span { font-size: 15px; } } /* 手机端首页查看更多在pc不显示 */ .viewall { display:none; } @media only screen and (max-width: 1199px) { /* 手机端首页查看更多只在手机端显示 */ .viewall { display:block; } /* 首页 2 */ .homeclassify .left ul li a .texbox .title_classify, .homeclassify .right ul li a .texbox .title_classify { font-size: 16px; font-weight: 600; color: #000; } .homeclassify .left ul li:nth-child(1) a .imgbox .sanjiao ,.homeclassify .right ul li:nth-child(1) a .imgbox .sanjiao { border-width: 10px; } .homeclassify .left ul li:nth-child(2) a .imgbox .sanjiao ,.homeclassify .right ul li:nth-child(2) a .imgbox .sanjiao { border-width: 10px; } /* 首页 3 */ .now-section .box .tabs ul li.on { font-size: 18px; } .now-section .box .tabs ul li.on::after { border-top: 4px solid #333333; } body .now-section .box .tabs ul::before { border-bottom:none } .lunbotu { padding-top:50px } .conwidth { width: 90%; padding-left: 4%; padding-right: 4%; box-sizing: border-box; } .header { display: none; } .m-header { display: block; } .footer .foot-nav ul li { width: 30%; margin-right: 5%; } .footer .pay-way { float: none; width: 100%; margin-bottom: 10px; } .footer .copyright { float: none; width: 100%; } .product .leftbox { width: 240px; } .product .rightbox { width: -moz-calc(100% - 270px); width: -webkit-calc(100% - 270px); width: calc(100% - 270px); } .product .rightbox .listbox ul.goods_list li { width: 48%; margin-right: 4%; } .product .rightbox .listbox ul.goods_list li:nth-child(3n) { /* margin-right: 4%; */ } .product .rightbox .listbox ul.goods_list li:nth-child(2n) { margin-right: 0; } .main { padding-top: 48px; } .register .box .formbtn { height: 50px; line-height: 50px; } .register .box .formbtn input { height: 50px; line-height: 50px; } .settlement { padding-bottom: 70px; } .location .box, .cart .title { padding: 0; } .cart { padding-top: 50px; } .cart .box { margin-top: 35px; padding: 0; } .cart .title { font-size: 24px; } .order-items .table .th>li:last-child, .order-items .table .td>li:last-child { width: 90px; } .order-items .table .td .goods { padding-left: 15px; } .order-items .table .td .goods .img { width: 35%; padding-right: 10px; box-sizing: border-box; } .order-items .table .td .goods .txt { width: 60%; } .order-items .table .td .goods .txt .t1 { margin-top: 0; } .order-items .table .td .goods .txt ul { margin-bottom: 10px; } .cart .subtit { font-size: 18px; } .cart .otherbox .btnbox a { font-size: 18px; } .cart .discount .formbox .t1 input, .cart .discount .formbox .t2 input, .cart .otherbox .btnbox a { height: 45px; line-height: 45px; } .best-match { padding-top: 70px; padding-bottom: 70px; } .best-match .box { margin-top: 50px; } .obanner .obtext .box .img img { max-height: 60px; } .shop-banner .obbg { display: block; padding: 15% 0; } .shop-banner a>img { display: none; } .shop-banner a .text .pic img { max-height: 56px; } .discount-area { padding-top: 50px; } .discount-area .box { margin-top: 40px; } .discount-area .box .areabox::before { height: 60px; } .discount-area .swtab { width: -moz-calc(100% - 120px); width: -webkit-calc(100% - 120px); width: calc(100% - 120px); } .discount-area .swtab ul li { font-size: 16px; height: 60px; line-height: 60px; } .discount-area .swtab ul li.on { height: 72px; line-height: 72px; } .discount-area .swiper-button-next, .discount-area .swiper-button-prev { width: 60px; height: 60px; } .connew { padding-top: 60px; padding-bottom: 60px; } .connew .box { margin-top: 40px; } .connew .box>ul>li { width: 31%; margin-right: 3.5%; margin-bottom: 3%; } .connew .box>ul>li:nth-child(4n) { margin-right: 3%; } .connew .box>ul>li:nth-child(3n) { margin-right: 0; } .favourites .box ul li a { padding-bottom: 26px; }/*2022/7/7*/ .favourites .box ul li .txtbox { padding-bottom: 25px; height: 135px; } .favourites .box ul li:hover .txtbox { height: 185px; } .favourites .box ul li .txtbox .t1 { font-size: 20px; } .favourites .box ul li .txtbox .t2 { font-size: 16px; height: 48px; } .set-product { padding-top: 60px; } .user-faq { padding-top: 50px; } .return-refund .title .t1 { font-size: 20px; } .return-refund .leftbox { width: -moz-calc(100% - 240px); width: -webkit-calc(100% - 240px); width: calc(100% - 240px); } .return-refund .rightbox { width: 240px; } /*忘记密码*/ .forget-password .box { padding: 45px 60px; } .forget-password .box .text .inputbtn { max-width: 360px; } .forget-password .box .text .inputbtn, .forget-password .box .text .inputbtn input { height: 50px; line-height: 50px; } } @media only screen and (max-width: 1024px) { /*20211008*/ .i-banner .box .t1 { /*font-size: 36px;*/ font-size: 45px; } .i-banner .box .t2 { font-size: 24px; } .i-banner .showbtn span, .i-banner .showbtn a { height: 60px; line-height: 60px; border-radius: 30px; font-size: 20px; } /*.i-title .t1{ font-size: 28px; }*/ .offers-section .box .txtbox .t2 { font-size: 28px; } .oimg3 { display: block; } .oimg1,.bannerbg { display: none; } .lunbotu>.swiper-pagination-bullets, .lunbotu .swiper-pagination-custom, .lunbotu .swiper-pagination-fraction { bottom: 30px; } .lunbotu .swiper-pagination-bullet { width: 30px; height: 3px; } .obanner .obtext .box { float: none; margin: auto; } /*.obanner .obtext .box .t1{ font-size: 36px; } .obanner .obtext .box .t3{ font-size: 40px; }*/ .obanner .obtext .box .t1 { font-size: 45px; } .obanner .obtext .box .t2 { font-size: 24px; } .obanner .obtext .box .showbtn a { height: 56px; line-height: 56px; border-radius: 30px; } .o-banner .text .t1 { /*font-size: 36px;*/ font-size: 45px; } /*.o-banner .text .t2{ font-size: 40px; }*/ .o-banner .text .t3 { font-size: 24px; } .shop-banner a .text .tit { font-size: 36px; } .trending-product { padding-top: 70px; padding-bottom: 50px; } .trending-product .swiper-container { margin-top: 40px; } .offers-section { padding-top: 60px; } .offers-section .box { margin-top: 40px; } .offers-section .box .txtbox { padding-top: 7%; } .offers-section .showbtn span { line-height: 42px; } .category-section { padding-top: 70px; } .category-section .box { margin-top: 40px; } .category-section .box ul li .txt { font-size: 18px; } .category-section .box ul li .txtbox .icon img { max-width: 54px; } .brands-section { padding-top: 50px; } .brands-section .box { margin-top: 40px; } .trending-product .proli .showbtn span, .brands-section .box ul li .showbtn span, .showbtn.btn2 span, .brands-section .box ul li .showbtn span { height: 45px; line-height: 45px; } .brands-section .box ul li .txtbox { padding: 30px 0px; } .now-section { padding-top: 0; margin-bottom:6% !important; }/*2022/7/7*/ .now-section .box { margin-top: 40px; } .now-section .box .tabs { border-bottom: none; } .now-section .box .tabs ul { position: relative; padding-bottom: 7px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } .now-section .box .tabs ul::before { content: ''; position: absolute; left: 0; bottom: 7px; width: 100%; height: 1px; border-bottom: #ebebeb solid 1px; } .now-section .box .tabs ul::-webkit-scrollbar { width: 0px; height: 0px; } .now-section .box .tabs ul::-webkit-scrollbar-button { background-color: rgba(0, 0, 0, 0); } .now-section .box .tabs ul::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0); } .now-section .box .tabs ul::-webkit-scrollbar-track-piece { background-color: rgba(0, 0, 0, 0); } .now-section .box .tabs ul::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0); } .now-section .box .tabs ul::-webkit-scrollbar-corner { background-color: rgba(0, 0, 0, 0); } .now-section .box .tabs ul::-webkit-scrollbar-resizer { background-color: rgba(0, 0, 0, 0); } .now-section .box .tabs ul::-webkit-scrollbar { width: 0px; height: 0px; } .now-section .box .tabs ul li { margin-right: 30px; } .partner-section { margin:6% 0!important; /*2022/7/7*/ } .partner-section .box { margin-top: 20px; } .partner-section .box ul li { width: 20%; } /**/ .beauty-box { padding-top: 70px; padding-bottom: 70px; } .beauty-box .box { margin-top: 50px; } .bannerbg .content .box { font-size: 28px; } .hot-sell { padding-top: 70px; padding-bottom: 70px; } .hot-sell .box { margin-top: 40px; } .hot-sell .box ul li { width: 31%; margin-right: 3.5%; } .hot-sell .box ul li:nth-child(4n) { margin-right: 3.5%; } .hot-sell .box ul li:nth-child(3n) { margin-right: 0; } .register { padding-top: 70px; padding-bottom: 70px; } .settlement .box .l-box { float: none; width: 100%; } .settlement .box .r-box { float: none; width: 100%; margin-top: 60px; } .settlement .box .r-box .btnbox { max-width: 360px; width: 100%; margin: 40px auto 30px; } .settlement .box .r-box .txt { text-align: center; } .best-match .swiper-container { padding-bottom: 50px; } .best-match .swiper-pagination-bullet { width: 10px; height: 10px; } .best-match .swiper-pagination-bullet-active { width: 12px; height: 12px; } .summer { padding-top: 70px; } .summer .box1 { margin-top: 50px; } .summer .box1 ul li { width: 31%; margin-right: 3.5%; margin-bottom: 2.5%; } .summer .box1 ul li:nth-child(4n) { margin-right: 3.5%; } .summer .box1 ul li:nth-child(3n) { margin-right: 0; } .summer .box2 { margin-top: 40px; } /*.summer .box2 ul li .txtbox .t1 { font-size: 20px; }*//*2022/7/7*/ .essential { padding-top: 70px; padding-bottom: 50px; } .essential .box { margin-top: 50px; } .essential .box ul li { width: 31%; margin-right: 3.5%; margin-bottom: 2.5%; } .essential .box ul li:nth-child(4n) { margin-right: 3.5%; } .essential .box ul li:nth-child(3n) { margin-right: 0; } .beauty-box .rightbox .swbox { padding: 0px 30px; } .discount-area .swtab ul { overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } .discount-area .swtab ul::-webkit-scrollbar { width: 0px; height: 0px; } .discount-area .swtab ul::-webkit-scrollbar-button { background-color: rgba(0, 0, 0, 0); } .discount-area .swtab ul::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0); } .discount-area .swtab ul::-webkit-scrollbar-track-piece { background-color: rgba(0, 0, 0, 0); } .discount-area .swtab ul::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0); } .discount-area .swtab ul::-webkit-scrollbar-corner { background-color: rgba(0, 0, 0, 0); } .discount-area .swtab ul::-webkit-scrollbar-resizer { background-color: rgba(0, 0, 0, 0); } .discount-area .swtab ul::-webkit-scrollbar { width: 0px; height: 0px; } .size-modification .wrap { padding: 5% 6%; } .size-modification .wrap .tit { padding-bottom: 20px; } .size-modification .wrap .tit .t1 { font-size: 28px; } .size-modification .sizebtn a { height: 48px; line-height: 48px; border-radius: 24px; } /*选择支付*/ .select_payment .title { font-size: 24px; } .select_payment .wrap ul { padding-top: 30px; padding-bottom: 10px; } .select_payment .wrap ul li { padding-top: 15px; padding-bottom: 15px; margin-right: 5%; padding-left: 60px;/* background: url(./images/img221.png) center left 20px no-repeat; background-size: 25px 24px;*/ } .select_payment .wrap ul li.on { /* background: url(./images/img222.png) center left 20px no-repeat; background-size: 25px 24px;*/ } .select_payment .wrap .set_btn { margin-top: 40px; } .select_payment .wrap .set_btn a { font-size: 18px; } } @media only screen and (max-width: 991px) { /*.i-banner .box .t1{ font-size: 32px; }*/ .i-banner .box .t1 { font-size: 36px; } .i-banner .box .t2 { font-size: 24px; } .i-banner .showbtn span, .i-banner .showbtn a { height: 50px; line-height: 50px; border-radius: 25px; font-size: 16px; } /*.obanner .obtext .box .t1{ font-size: 32px; }*/ .footer { padding-top: 50px; } .footer .foot-top { padding-bottom: 50px; } .footer .foot-nav { width: 48%; margin-right: 4%; } .footer .foot-nav ul li { float: none; width: 100%; border-bottom: #373737 solid 1px; } .footer .tit { font-size: 16px; } .footer .foot-nav ul li .tit { line-height: 45px; margin-bottom: 0; padding: 0; } .footer .foot-nav ul li .drop-down { display: none; padding-bottom: 20px; } .footer .foot-leftnav ul li { display: none !important; float: none!important; margin: 0!important; }/*2022/7/6*/ .footer .foot-nav ul li a { padding: 5px 20px; } .footer .foot-enter { width: 48%; } .footer .foot-enter .tit { margin-bottom: 15px; } .footer .foot-enter input { height: 38px; line-height: 38px; } .footer .foot-enter .btn { height: 40px; } .footer .follow .text { font-size: 16px; } /*index*/ .trending-product { padding-top: 60px; padding-bottom: 40px; margin-top: 2%!important; } .offers-section { padding-top: 50px; } .offers-section .box .txtbox .t2 { font-size: 24px; } .category-section { padding-top: 60px; } .category-section .box ul li { width: 48%;/*2022/7/7*/ margin-right:4%; /*2022/7/7*/ margin-bottom: 3.5%; }/*2022/7/7*/ .category-section .box ul li:nth-child(2n) { margin-right:0; /*2022/7/7*/ margin-bottom: 4%;/*2022/7/7*/ } .category-section .box ul li:nth-child(4n) { margin-right: 0;/*2022/7/7*/ } .category-section .box ul li:nth-child(1n) { margin-bottom: 4% !important;/*2022/7/7*/ } .brands-section .box ul li { width: 48%; margin-right: 4%; } .brands-section .box ul li:nth-child(3n) { margin-right: 4%; } .brands-section .box ul li:nth-child(2n) { margin-right: 0; } .now-section .box .tabs ul li { margin-right: 20px; } .now-section .box .content { margin-top: 40px; } .now-section .contentli .left { float: none; width: 100%; margin: auto; text-align: center; } .now-section .contentli .right { float: none; width: 100%; margin-top: 30px; } .partner-section { padding-top: 60px; padding-bottom: 60px; } .partner-section .box ul li { width: 33.33%; padding: 30px 0 0 0; } .beauty-box { padding-top: 60px; padding-bottom: 60px; } .beauty-box .box { margin-top: 40px; } .beauty-box .leftbox { float: none; width: 100%; margin-right: 0; } .beauty-box .rightbox { margin-top: 40px; float: none; width: 100%; } .bannerbg .content .box { font-size: 24px; } .hot-sell { padding-top: 60px; padding-bottom: 60px; } .hot-sell .box ul li { width: 48%; margin-right: 4%; } .hot-sell .box ul li:nth-child(4n) { margin-right: 4%; } .hot-sell .box ul li:nth-child(3n) { margin-right: 4%; } .hot-sell .box ul li:nth-child(2n) { margin-right: 0; } .register { padding-top: 60px; padding-bottom: 60px; } .settlement { padding-bottom: 60px; } .settlement .title { font-size: 24px; } .register .box .formbtn { margin-top: 50px; } .settlement .formli input, .settlement .formli .selectli select { height: 40px; line-height: 40px; } .settlement .formbtn div input { font-size: 16px; } .cart .discount .formbox .t1 { width: 100%; padding: 0px 20px; } .cart .discount .formbox .t2 input { font-size: 16px; } .settlement .box .settlebtn a { font-size: 18px; } .order-items .table .th>li { padding: 10px 0px; } .order-items .table .td>li { padding: 20px 0px; } .order-items .table .td>li:first-child, .order-items .table .th>li:first-child { width: -moz-calc(100% - 300px); width: -webkit-calc(100% - 300px); width: calc(100% - 300px); } .order-items .table .td>li:nth-child(2), .order-items .table .th>li:nth-child(2), .order-items .table .td>li:nth-child(3), .order-items .table .th>li:nth-child(3) { /* display: none; */ } .order-items .table .td>li:last-child, .order-items .table .th>li:last-child { width: 60px; } .order-items .table .td>li, .order-items .table .th>li { width: 120px; } .cart .subtit { padding-right: 20px; } .cart .discount .formbox { display: block; width: 100%; margin-top: 30px; } .cart .discount, .cart .total { text-align: left; } .cart .total .infor { display: block; width: 100%; padding-left: 0; border-left: none; margin-top: 20px; } .cart .total .infor ul li { margin-bottom: 5px; } .cart .otherbox .btnbox a { font-size: 16px; } .best-match { padding-top: 60px; padding-bottom: 60px; } .best-match .box { margin-top: 40px; } .summer { padding-top: 50px; } .summer .box1 { margin-top: 40px; } .summer .box1 ul li { width: 48%; margin-right: 4%; margin-bottom: 3%; } .summer .box1 ul li:nth-child(4n) { margin-right: 4%; } .summer .box1 ul li:nth-child(3n) { margin-right: 4%; } .summer .box1 ul li:nth-child(2n) { margin-right: 0; } .summer .box2 { margin-top: 30px; } .summer .box2 ul li { width: 48% !important; margin-right: 4% !important; margin-bottom: 4% !important;/*2022/7/7*/ } .summer .box2 ul li:nth-child(3n) { margin-right: 4%; } .summer .box2 ul li:nth-child(2n) , .summer .box2 ul li:nth-child(4n) { margin-right: 0 !important; } .summer .box2 ul li .txtbox .t1 { font-size: 18px; } .obanner .obtext .box .t1 { /*font-size: 42px;*/ font-size: 36px; } .obanner .obtext .box .t2 { font-size: 22px; } .obanner .obtext .box .showbtn a { height: 50px; line-height: 50px; border-radius: 25px; } .obanner .obtext .box .t3 { font-size: 36px; margin-bottom: 20px; } .obanner .obtext .box .img img { max-height: 56px; } /*.obanner .obtext .box .showbtn a{ height: 45px; line-height: 45px; }*/ /*.o-banner .text .t1{ font-size: 32px; }*/ .o-banner .text .t1 { /*font-size: 42px;*/ font-size: 36px; } .o-banner .text .t2 { /*font-size: 36px;*/ font-size: 32px; } .o-banner .text .t3 { font-size: 24px; } .o-banner .text .btn { margin-top: 30px; } .o-banner .text .btn span { height: 49px; line-height: 49px; } /*.o-banner .text .btn span{ height: 45px; line-height: 45px; }*/ .shop-banner a .text .pic img { max-height: 48px; } .shop-banner a .text .tit { font-size: 32px; } .essential { padding-top: 60px; padding-bottom: 40px; } .essential .box { margin-top: 40px; } .essential .box ul li { width: 48%; margin-right: 4%; margin-bottom: 3%; } .essential .box ul li:nth-child(4n) { margin-right: 4%; } .essential .box ul li:nth-child(3n) { margin-right: 4%; } .essential .box ul li:nth-child(2n) { margin-right: 0; } .product .leftbox { display: none; } .product .rightbox { float: none; width: 100%; } .product .rightbox .optbox { float: none; width: 100%; max-width: 100%; /* padding-top: 20px; */ overflow: hidden; } .product .rightbox .optbox .sp { display: none; } .product .rightbox .optbox .optdiv { float: left; width: 48%; margin-right: 4%; display: block; } .refinediv { float: left; width: 48%; display: block; } .product .rightbox .tit { float: none; /* width: 100%; */ } /**/ .discount-area .swtab { position: static; margin-bottom: 30px; width: 100%; } .discount-area .swtab ul { text-align: left; } .discount-area .swtab ul li { vertical-align: top; padding: 0px 20px; color: #000000; height: 40px; line-height: 40px; } .discount-area .swtab ul li.on { height: 40px; line-height: 40px; } .discount-area .box .areabox::before { display: none; } .discount-area .swiper-button-next, .discount-area .swiper-button-prev { top: 50%; bottom: auto; margin-top: -30px; } .connew { padding-top: 50px; } .connew .box>ul>li { width: 48%; margin-right: 4%; padding-top: 30px; padding-bottom: 25px; } .connew .box>ul>li:nth-child(4n) { margin-right: 4%; } .connew .box>ul>li:nth-child(3n) { margin-right: 4%; } .connew .box>ul>li:nth-child(2n) { margin-right: 0; } .favourites .box { margin-top: 40px; } .favourites .box ul li { width: 48%; margin-right: 4%; margin-bottom: 4%; } .favourites .box ul li:nth-child(3n) { margin-right: 4%; } .favourites .box ul li:nth-child(2n) { margin-right: 0; } .favourites .box ul li:hover .txtbox { height: 135px; } .set-product { padding-top: 40px; } .set-product ul li { width: 48%; margin-right: 4%; margin-bottom: 3%; } .set-product ul li:nth-child(3n) { margin-right: 4%; } .set-product ul li:nth-child(2n) { margin-right: 0; } .user-faq { padding-top: 40px; } .user-faq ul { margin-top: 20px; } .user-faq ul li .tit { padding-right: 50px; padding-top: 18px; padding-bottom: 18px; } .user-faq ul li .ic { background: url(./images/img200.png) top 21px right no-repeat; } .user-faq ul li.on .ic { background: url(./images/img201.png) top 21px right no-repeat; } .user-faq ul li .text { padding-bottom: 30px; } .user-faq .title { font-size: 16px; } .return-refund .leftbox { float: none; width: 100%; padding-right: 0; } .return-refund .rightbox { float: none; width: 100%; margin-top: 50px; } .return-refund .rightbox ul li { margin-bottom: 50px; } .order-list .w2 { width: 50%; } .order-list .w3 { width: 25%; } .product-details .other-bought .box .imgbox ul li a { width: 54px; height: 54px; line-height: 54px; } .product-details .other-bought .box .imgbox ul li .txt { bottom: 70px; font-size: 16px; } .product-details .other-bought .box .imgbox ul li a { width: 54px; height: 54px; line-height: 54px; } .connew .box .imgbox .txt { bottom: 70px; font-size: 16px; } } @media only screen and (max-width: 768px) { .footer .foot-nav { width: 100%; margin-right: 0; } .footer .foot-enter { margin-top: 30px; max-width: 100%; width: 100%; margin-right: 0; } /*忘记密码*/ .forget-password .box .tit { font-size: 22px; } .forget-password .box .text { margin-top: 25px; } .forget-password .box .text .inputbtn { margin-top: 36px; } /*选择支付*/ .select_payment { padding-bottom: 50px; } .select_payment .title { font-size: 22px; } .select_payment .box { padding-left: 0; padding-right: 0; } .select_payment .wrap { padding-top: 25px; } .select_payment .wrap ul li { padding-top: 10px; padding-bottom: 10px; padding-left: 20px;/* background: url(./images/img221.png) center left 20px no-repeat; background-size: 22px 21px;*/ } .select_payment .wrap ul li.on { /* background: url(./images/img222.png) center left 20px no-repeat; background-size: 22px 21px;*/ } .select_payment .order_infor ul li { font-size: 16px; } /*20211008*/ /*.product .rightbox .listbox ul.goods_list li{ width:100%; }*/ .product .rightbox .listbox ul.goods_list li:nth-child(3n+1) { clear: none; } .trending-product .swiper-button-next, .trending-product .swiper-button-prev { top: 29%; } /*.category-section .box ul li .txt { font-size: 16px; }*//*2022/7/7*/ } @media only screen and (max-width: 767px) { .i-title .t1 { font-size: 24px; } .obanner .obtext .box .t1 { font-size: 28px; } .obanner .obtext .box .t2 { font-size: 16px; } .proli .txtbox .t1 { font-size: 16px; } .trending-product { padding-top: 50px; } .trending-product .swiper-container { margin-top: 30px; } .offers-section .box .txtbox { padding-top: 4%; } .offers-section .box .txtbox .t2 { font-size: 22px; } .now-section .box .tabs ul li { margin-right: 20px; } .category-section .box ul li { width: 48%; margin-right: 4%; margin-bottom: 4%; } .category-section .box ul li:nth-child(3n) { margin-right: 4%; } .category-section .box ul li:nth-child(2n) { margin-right: 0; } .brands-section .box ul li .txtbox { padding: 25px 0px; } .brands-section .box ul li .txtbox .t1 { font-size: 20px; } .brands-section .box ul li .txtbox .t2 { margin-bottom: 20px; } .now-section .box .content { margin-top: 30px; } .now-section .box .tabs ul li { margin-right: 15px; } .beauty-box { padding-top: 50px; padding-bottom: 50px; } .bannerbg .content .box { font-size: 22px; } .hot-sell { padding-top: 50px; padding-bottom: 50px; } .register { padding-top: 50px; padding-bottom: 50px; } .settlement { padding-top: 30px; padding-bottom: 50px; } .gobtn a { font-size: 18px; } .settlement .box { margin-top: 30px; } .settlement .title { font-size: 22px; border-bottom: #333333 solid 1px; } .settlement .box .l-box .wrap { padding-bottom: 40px; } .settlement .formli { margin-bottom: 0; } .settlement .formli .w1, .settlement .formli .w2, .settlement .formli .w3, .settlement .formli .half { float: none; width: 100%; margin-bottom: 25px; } .settlement .formli .w3:last-child { margin-bottom: 0; } .settlement .formbtn { margin-top: 20px; } .settlement .formbtn div input { height: 42px; line-height: 42px; } .settlement .content .l-con { float: none; width: 100%; padding-top: 0; } .settlement .content .r-con { float: none; width: 100%; border-left: none; padding-left: 0px; padding-top: 20px; } .settlement .content .r-con ul li { margin-bottom: 5px; } .settlement .box .contbox .cont .agree { margin-top: 20px; } .settlement .box .settlebtn a { font-size: 16px; height: 45px; line-height: 45px } .settlement .box .r-box .btnbox { margin: 30px auto 20px; } .settlement .box .r-box .btnbox a { font-size: 16px; height: 45px; line-height: 45px; } .purchase-quantity .reduce, .purchase-quantity .add { height: 32px; line-height: 32px; } .purchase-quantity .count { line-height: 32px; } .shop-banner .obbg { padding: 18% 0; } .obanner .obtext .box .img img { max-height: 50px; } .obanner .obtext .box .t3 { font-size: 32px; } /*.obanner .obtext .box .showbtn a{ border: #ffffff solid 1px; }*/ /*.o-banner .text .t1{ font-size: 28px; } .o-banner .text .t2{ font-size: 32px; } .o-banner .text .btn{ margin-top: 20px; }*/ .shop-banner a .text .tit { font-size: 28px; } .shop-banner a .text .pic img { max-height: 40px; } .operation .delete img { max-width: 25px; } .order-items .table .td .goods .txt .t1 { font-size: 16px; } .order-items .table .td .goods .txt ul { line-height: 1.5; } .order-items .table .td>li:first-child, .order-items .table .th>li:first-child { width: -moz-calc(100% - 260px); width: -webkit-calc(100% - 260px); width: calc(100% - 260px); } /* .order-items .table .td>li:nth-child(2), .order-items .table .th>li:nth-child(2), .order-items .table .td>li:nth-child(3), .order-items .table .th>li:nth-child(3) { display: none; } */ .order-items .table .td>li, .order-items .table .th>li { width: 100px; } .best-match { padding-top: 50px; padding-bottom: 50px; } .best-match .box { margin-top: 30px; } .order-table .order-btn .con .btn { height: 44px; line-height: 42px; } .return-refund .order-txt .t1, .return-refund .order-txt .t2 { float: none; width: 100%; max-width: 100%; } .return-refund .order-txt .t2 { margin-top: 12px; } .return-refund .rightbox .textbox { padding-top: 30px; } .summer .box2 ul li .txtbox .t2 { font-size: 16px; } } @media only screen and (max-width: 690px) { .trending-product .swiper-button-next, .trending-product .swiper-button-prev { top: 25%; } .oimg2 { display: block; } .oimg3 { display: none; } /* 2023.2.25 */ } @media only screen and (max-width: 640px) { /*20220308*/ .i-banner .box .t1 { font-size: 32px; } .i-banner .box .t2 { font-size: 22px; margin-top: 10px; margin-bottom: 30px; } .i-banner .showbtn span, .i-banner .showbtn a { padding: 0px 25px; height: 48px; line-height: 48px; } } @media only screen and (max-width: 576px) { /**/ .collectBox { max-width: calc(100% - 48px); width: calc(100% - 48px); } .accountBox { max-width: 100%; } .m-header .accountBox .wrap .formbtn input, .m-header .accountBox .wrap .formbtn a { font-size: 16px; } .i-title .t1 { font-size: 22px; } .i-title .t2 { font-size: 16px; } /*.i-banner .box .t1{ font-size: 28px; } .i-banner .box .t2{ margin-top: 10px; margin-bottom: 15px; }*/ /*.i-banner .box .t1{ font-size: 32px; }*/ .i-banner .box .t2 { font-size: 18px; } .i-banner .showbtn span, .i-banner .showbtn a { height: 45px; line-height: 45px; border-radius: 23px; } .lunbotu>.swiper-pagination-bullets, .lunbotu .swiper-pagination-custom, .lunbotu .swiper-pagination-fraction { bottom: 20px; } /*.obanner .obtext .box .t1{ font-size: 24px; }*/ .obanner .obtext .box .t2 { margin-bottom: 20px; } .obanner .obtext .box .showbtn a { height: 42px; line-height: 42px; } /*.o-banner .text .t1{ font-size: 32px; }*/ .o-banner .text .t2 { font-size: 28px; } .o-banner .text .t3 { font-size: 18px; } .obanner .obtext .box .t3 { font-size: 28px; } .o-banner .text .btn span { height: 43px; line-height: 43px; } /**/ .footer { padding-top: 40px; } .footer .foot-top { padding-bottom: 40px; } .footer .foot-nav { float: none; width: 100%; margin-right: 0; } .footer .foot-nav ul li a { padding: 5px 15px; } .footer .foot-enter { float: none; width: 100%; max-width: 100%; margin-top: 30px; } /**/ .trending-product { padding-bottom: 30px; } .trending-product .swiper-button-next, .trending-product .swiper-button-prev { top: 33%; } .offers-section { padding-top: 40px; } .offers-section .box { margin-top: 30px; } .offers-section .box ul li { margin-bottom: 10px; } .offers-section .box .imgbox { float: none; width: 100%; } .offers-section .box .txtbox { float: none; width: 100%; padding-top: 30px; padding-bottom: 30px; } .now-section .box .content { margin-top: 20px; } .partner-section .box { margin-top: 30px; } .category-section { padding-top: 40px; } .category-section .box { margin-top: 30px; } .category-section .box ul li .txtbox .icon img { max-width: 40px; } .category-section .box ul li .txt { padding: 0 10px; } .brands-section .box { margin-top: 30px; } /*20211008*/ .category-section .box ul li,.favourites .box ul li,.brands-section .box ul li,.summer .box2 ul li{ width: 100%!important; margin-right: 0!important; }/*2022/7/7*/ .brands-section .box ul li:nth-child(4n),.brands-section .box ul li:nth-child(5n),.brands-section .box ul li:nth-child(6n){ margin-bottom:4%!important; }/*2022/7/7*/ .summer .box2{ margin: 0!important; } .now-section .contentli .swiper-slide{ width:100%; } /*.brands-section .box ul li{ float: none; width: 100%; margin-right: 0; margin-bottom: 10px; }*/ .brands-section .box ul li .txtbox { padding: 30px 0px; } .partner-section { padding-top: 50px; padding-bottom: 40px; } .partner-section .box ul li { width: 50%; } .beauty-box { padding-top: 40px; padding-bottom: 40px; } .beauty-box .box { margin-top: 30px; } .bannerbg .content .box { font-size: 20px; } .hot-sell { padding-top: 40px; padding-bottom: 40px; } .hot-sell .box { margin-top: 30px; } /*20211008*/ /*.hot-sell .box ul li{ width: 100%; margin-right: 0 !important; margin-bottom: 20px; }*/ .register { padding-top: 40px; padding-bottom: 40px; } .register .box .formbtn { margin-top: 40px; } .register .box .text { margin-top: 30px; } .register .box .formli { margin-bottom: 20px; } .register .box .half { width: 100%; margin-right: 0; margin-bottom: 20px; } .settlement .formbtn div { margin-right: 25px; } .register .box .formbtn, .register .box .formbtn input { height: 45px; line-height: 45px; font-size: 16px; } .order-items .table .th { display: none; } .order-items .table .td>li:first-child, .order-items .table .th>li:first-child { float: none; width: 100%; padding-bottom: 0; } .list-select { padding-left: 0; } .order-items .table .td>li .goods .txt ul { margin-bottom: 10px; } .order-items .table .td>li, .order-items .table .th>li { width: 35%; } .purchase-quantity { max-width: 110px; margin-left: 0; } .order-items .table .td>li:last-child, .order-items .table .th>li:last-child { width: 30%; text-align: right; } .cart .discount .formbox { margin-top: 20px; } .cart .otherbox .btnbox a { display: block; margin: 0px auto 10px; text-align: center; } .obanner .obtext .box .img img { max-height: 45px; } .obanner .obtext .box .t1 { font-size: 28px; } .obanner .obtext .box .t2 { font-size: 18px; } .obanner .obtext .box .showbtn a { height: 45px; line-height: 45px; border-radius: 23px; } /*.obanner .obtext .box .t3{ font-size: 28px; margin-bottom: 15px; }*/ .shop-banner a .text .tit { font-size: 26px; } .shop-banner a .text .pic img { max-height: 34px; } .o-banner .text .t1, .i-banner .box .t1 { font-size: 28px; } .o-banner .text .t2 { font-size: 24px; } .summer { padding-top: 40px; } .summer .box1 { margin-top: 30px; } /*20211008*/ /*.summer .box1 ul li{ float: none; width: 100%; margin-right: 0; margin-bottom: 30px; } .summer .box2 ul li{ float: none; width: 100%; margin-right: 0; margin-bottom: 30px; } .essential .box ul li{ float: none; width: 100%; margin-right: 0; margin-bottom: 30px; }*/ .beauty-box .rightbox .swbox { padding: 0px 25px; } .product { padding-bottom: 0px; } .product .rightbox .tit .t1 { font-size: 18px; } /*20211008*/ /*.product .rightbox .listbox ul.goods_list li{ width: 100%; margin-right: 0; margin-bottom: 30px; }*/ .page-list a, .page-list span { min-width: 36px; height: 36px; line-height: 36px; } .discount-area { padding-top: 40px; } .discount-area .box { margin-top: 30px; } .connew { padding-bottom: 40px; } .connew .box { margin-top: 30px; } /*20211008*/ .connew .box>ul>li { /*width: 100%; margin-right: 0; margin-bottom: 30px;*/ padding-top: 15px; padding-bottom: 15px; } /**/ .favourites { padding-top: 40px; padding-bottom: 40px; } .favourites .box { margin-top: 30px; } /*20211008*/ /*.favourites .box ul li{ width: 100%; margin-right: 0; margin-bottom: 30px; }*/ .set-product { padding-top: 30px; } /*20211008*/ /*.set-product ul li{ width: 100%; margin-right: 0; margin-bottom: 30px; }*/ .return-refund { padding-top: 40px; } .order-list ul li a { display: block; } .order-list .tit { display: none; } .order-list .w2 { align-items: stretch; width: 75%; } .order-list .w3 { width: 75%; padding-left: 15px; box-sizing: border-box; } .order-list .w3 .o-quantity { text-align: left; } .order-list .w2 .w2-1, .order-list .w3 .w3-1 { width: 65%; } .order-list .w2 .w2-2, .order-list .w3 .w3-2 { width: 35%; } .order-table ul li .w1 { float: none; width: 100%; } .order-table ul li .w2 { float: none; margin-top: 12px; width: 100%; } .order-table ul li ul li { overflow: hidden; } .order-table ul li ul li .w1 { float: left; width: 50%; margin-top: 0px; } .order-table ul li ul li .w2 { float: left; width: 50%; } .order-table ul li .sp { font-size: 16px; } .order-table ul li .reasons select { max-width: 100%; } .return-refund .order-txt { padding-bottom: 10px; } .product-details .other-bought .box .imgbox ul li a { width: 42px; height: 42px; line-height: 42px; } .product-details .other-bought .box .imgbox ul li .txt { bottom: 60px; } /*忘记密码*/ .forget-password .box { padding: 40px 50px; } .forget-password .box .tit { font-size: 20px; } .forget-password .box .text .inputbtn { margin-left: auto; margin-right: auto; } .forget-password .box .text .inputbtn, .forget-password .box .text .inputbtn input { font-size: 16px; height: 45px; line-height: 45px; } /*选择支付*/ .select_payment { padding-top: 40px; } .select_payment .title { font-size: 20px; padding-bottom: 12px; } .select_payment .box { padding-top: 25px; } .select_payment .wrap .subtit { font-size: 18px; } .select_payment .order_infor ul li { margin-bottom: 15px; } .select_payment .wrap .set_btn a { font-size: 16px; height: 45px; line-height: 45px; } .product-details .detailbox .conwidth>ul>li { padding-top: 0; margin-top: 0; } } @media only screen and (max-width: 480px) { /*20220308*/ .i-banner .box .t1 { font-size: 26px; } .i-banner .box .t2 { font-size: 16px; margin-bottom: 25px; } .i-banner .showbtn span, .i-banner .showbtn a { padding: 0px 25px; height: 42px; line-height: 42px; font-size: 14px; } /*忘记密码*/ .forget-password .box { padding: 30px 30px 40px; } .forget-password .box .tit { padding-bottom: 10px; } .forget-password .box .text { margin-top: 15px; } .forget-password .box .text .txt { margin-bottom: 15px; } .forget-password .box .text .inputbtn { margin-top: 30px; } /*选择支付*/ .select_payment { padding-top: 30px; } .select_payment .wrap ul { padding-top: 25px; padding-bottom: 5px; } .select_payment .wrap ul li { padding-right: 30px; padding-left: 30px;/* background: url(./images/img221.png) center left 12px no-repeat; background-size: 20px 19px;*/ } .select_payment .wrap ul li.on { /* background: url(./images/img222.png) center left 12px no-repeat; background-size: 20px 19px;*/ } .trending-product .swiper-button-next, .trending-product .swiper-button-prev { top: 30%; } } @media only screen and (max-width: 375px) { .i-banner .box .t1 { font-size: 28px; } .i-banner .box .t2 { font-size: 16px; margin-bottom: 30px; } .i-banner .showbtn span, .i-banner .showbtn a { height: 42px; line-height: 42px; border-radius: 21px; } .o-banner .text .t1 { font-size: 28px; } .o-banner .text .t2 { font-size: 24px; } .o-banner .text .t3 { font-size: 16px; } .o-banner .text .btn span { height: 38px; line-height: 38px; } .obanner .obtext .box .t1 { font-size: 28px; } .obanner .obtext .box .t2 { font-size: 16px; } .obanner .obtext .box .showbtn a { height: 42px; line-height: 42px; border-radius: 21px; } /*选择支付*/ .select_payment .wrap ul li { padding-right: 35px; padding-left: 35px;/* background: url(./images/img221.png) center left 10px no-repeat; background-size: 17px 16px;*/ } .select_payment .wrap ul li.on { /* background: url(./images/img222.png) center left 10px no-repeat; background-size: 17px 16px;*/ } } /* Tiamo 20221.8.7 */ .popup-prod-carousel { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 999; display: none; } .popup-prod-carousel .w1000 { position: relative; max-width: 840px; width: 100%; height: 100vh; margin: 0 auto; } .popup-prod-carousel .view .swiper-slide { position: relative; height: -moz-calc(100vh - 86px); height: -webkit-calc(100vh - 86px); height: calc(100vh - 86px); text-align: center; overflow: hidden; } .popup-prod-carousel .view .swiper-slide .pic { position: relative; left: 0; top: 0; height: 100%; } .popup-prod-carousel .preview { width: 100%; padding: 8px 0; } .popup-prod-carousel .preview .swiper-slide { width: 70px; padding: 4px; filter: alpha(opacity=75); opacity: .75; } .popup-prod-carousel .preview .active-nav.swiper-slide { filter: alpha(opacity=100); opacity: 1; } .popup-prod-carousel .close { position: absolute; top: 12%; right: 0%; width: 36px; height: 36px; /*background-color: #fff; border-radius: 50%;*/ cursor: pointer; z-index: 9; } .popup-prod-carousel .btn-box { position: absolute; bottom: 10px; right: 15px; z-index: 9; } .popup-prod-carousel .btn { position: relative; width: 42px; height: 42px; /*border-radius: 50%; border: 1px solid #c4c4c4; background-color: #fff;*/ font-size: 26px; color: #333; line-height: 42px; text-align: center; margin-bottom: 10px; cursor: pointer; } .popup-prod-carousel .btn.on { filter: alpha(opacity=50); opacity: .5; cursor: auto; } .popup-prod-carousel .add { background: url(./images/23.png); background-size: 100% 100%; } .popup-prod-carousel .subtr { background: url(./images/24.png); background-size: 100% 100%; } /*.popup-prod-carousel .add::after, .popup-prod-carousel .subtr::after { position: absolute; content: ""; top: 50%; left: 50%; width: 20px; height: 2px; background-color: #333; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .popup-prod-carousel .add::before { position: absolute; content: ""; top: 50%; left: 50%; width: 2px; height: 20px; background-color: #333; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }*/ .popup-prod-carousel .view img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -o-transition: all .5s; transition: all .5s; transition: all .5s; -webkit-transition: all .5s; transition: all .5s; } .popup-prod-carousel .view img.on { transform: translate(-50%, -50%) scale(1.4); -ms-transform: translate(-50%, -50%) scale(1.4); -webkit-transform: translate(-50%, -50%) scale(1.4); -o-transform: translate(-50%, -50%) scale(1.4); -moz-transform: translate(-50%, -50%) scale(1.4); } .popup-add-cart { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); z-index: 999; display: none; } .popup-add-cart .w830 { position: absolute; top: 50%; left: 50%; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 830px; background-color: #fff; padding: 10px 50px 70px; } .popup-add-cart .box { display: flex; } .popup-add-cart .img { width: 390px; } .popup-add-cart .title { display: flex; justify-content: space-between; align-items: center; padding: 27px 0; border-bottom: 1px solid #e5e5e5; } .popup-add-cart .title .h1 { font-size: 18px; color: #000000; line-height: 26px; font-weight: bold; } .popup-add-cart .text-box { width: -moz-calc(100% - 390px); width: -webkit-calc(100% - 390px); width: calc(100% - 390px); padding: 40px 0 0 30px; } .popup-add-cart .text-box .h1 { font-size: 26px; color: #333333; font-weight: bold; } .popup-add-cart .data { margin-top: 40px; padding-bottom: 18px; border-bottom: 1px solid #e9e9e9; } .popup-add-cart .item { margin-bottom: 14px; } .popup-add-cart .item:last-child { margin-bottom: 0; } .popup-add-cart .name { font-size: 18px; color: #333333; line-height: 26px; } .popup-add-cart .number { font-size: 18px; color: #888888; line-height: 26px; } .popup-add-cart .number-2 { font-size: 24px; color: #f98e68; font-weight: bold; } .popup-add-cart .text { font-size: 18px; color: #666666; line-height: 26px; text-align: center; margin-top: 20px; } .popup-add-cart .btn-box { margin: 0 auto; margin-top: 24px; max-width: 330px; } .popup-add-cart .btn-2 { display: block; width: 100%; height: 48px; line-height: 48px; text-align: center; border-radius: 25px; border: 1px solid #000000; -o-transition: all .3s; -ms-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; } .popup-add-cart .btn-3 { font-size: 18px; color: #fff; background-color: #000000; } .popup-add-cart .btn-3:hover { color: #000; line-height: 48px; border: 1px solid #000000; background: none; } .popup-add-cart .btn-4 { font-size: 16px; color: #000; line-height: 48px; border: 1px solid #000000; margin-top: 15px; } .popup-add-cart .btn-4:hover { font-size: 16px; color: #fff; line-height: 48px; background-color: #000000; } .popup-add-cart .close { cursor: pointer; } @media only screen and (max-width: 1199px) { .product-details .leftbox { width: 100%; } .product-details .rightbox { width: 100%; /* 2023.3.1 */ /* padding-left: 0; */ margin-top: 20px; } .product-details .rightbox .btn { display: flex; justify-content: space-between; align-items: center; } .product-details .rightbox .btn>a { display: inline-block; vertical-align: top; width: 48%; } .product-details .fold-box { width: 100%; } .product-details .frequently ul { display: flex; flex-wrap: wrap; } .product-details .frequently ul li { width: 50%; } .product-details .frequently ul li:nth-child(3) { width: 100%; border-top: #cccccc solid 1px; padding: 25px 0; } } @media only screen and (max-width: 1024px) { .product-details .reviews .summary-left { width: 100%; } .product-details .reviews .summary-right { width: 100%; margin-top: 30px; } .product-details .other-bought .box>ul>li { width: -moz-calc((100% - 75px) / 2); width: -webkit-calc((100% - 75px) / 2); width: calc((100% - 75px) / 2); } .product-details .reviews .summary-left { position: relative; top: 0; } .product-details .reviews .summary-left .create { margin-top: 30px; } .popup-prod-carousel .view .swiper-slide { display: flex; justify-content: center; align-items: center; } .popup-prod-carousel .view .swiper-slide img { width: 90%; height: auto; vertical-align: top; } .popup-prod-carousel .close { top: 5%; } .popup-add-cart .w830 { width: 90%; box-sizing: border-box; } } @media only screen and (max-width: 991px) { .popup-add-cart .img { width: 300px; } .popup-add-cart .text-box { width: -webkit-calc(100% - 300px); width: calc(100% - 300px); } } @media only screen and (max-width: 768px) { .product-details .tagbox { display: none; } .product-details .frequently ul li { width: 100%; } .product-details .frequently ul li:nth-child(2) { border-top: #cccccc solid 1px; } .product-details .frequently ul li a { padding: 25px 30px; } .product-details .frequently ul li .addicon { right: auto; top: auto; left: 58px; bottom: -24px; z-index: 9; } .popup-prod-carousel .close { right: 5%; } .popup-add-cart .w830 { padding: 10px 30px 50px; } .popup-add-cart .box { flex-wrap: wrap; } .popup-add-cart .img { margin: 0 auto; } .popup-add-cart .text-box { width: 100%; padding: 20px 0 0; } .popup-add-cart .text-box .h1 { font-size: 20px; } .popup-add-cart .data { margin-top: 20px; } .popup-add-cart .number-2 { font-size: 16px; } .product-details .other-bought .box>ul>li { width: 100%; margin-right: 0; } /*20211008*/ /*.product-details .other-bought .box>ul, .connew .box>ul{ display: none; } .m-bought{ display: block; }*/ .product-details .detailbox .conwidth>ul>li { padding-top: 0; margin-top: 0; } } @media only screen and (max-width: 540px) { .view .arrow-left, .view .arrow-right { width: 30px; height: 33px; background-size: cover; } .enlarge { width: 30px; height: 30px; } .paytext { padding: 15px; } .paytext ul li { display: flex; align-items: center; } .paytext ul li .txt { font-size: 14px; } .product-details .rightbox .text .t1 { font-size: 20px; } .product-details .rightbox .text .t2 .sp { font-size: 14px; } .product-details .rightbox .text .t3 { font-size: 14px; } .product-details .rightbox .size ul li a { font-size: 14px; } .product-details .rightbox .total { margin-top: 30px; padding: 15px 0; } .product-details .rightbox .total .sp1 { font-size: 18px; margin-right: 15px; } .product-details .rightbox .total .sp2 { font-size: 14px; } .purchase-quantity .reduce { width: 34px; height: 34px; line-height: 34px; } .purchase-quantity .count { width: 34px; height: 34px; line-height: 34px; } .purchase-quantity .add { width: 34px; height: 34px; line-height: 34px; } .product-details .rightbox .btn { margin-top: 30px; } .product-details .rightbox .btn>a { height: 44px; line-height: 42px; border-radius: 21px; font-size: 14px; } .product-details .rightbox .btn a.btn1 { font-size: 14px; } .product-details .rightbox .btn a.btn2 { font-size: 14px; } .product-details .rightbox .xintext .t2 { font-size: 14px; } .product-details .rightbox .xintext ul { margin-top: 20px; } .product-details .rightbox .xintext { padding-bottom: 20px; } .product-details .fold-box ul li .tit { height: 44px; line-height: 44px; font-size: 16px; border-radius: 22px; } .product-details .fold-box ul li .text { font-size: 14px; } .product-details .detailbox .tit { font-size: 16px; } .product-details .frequently ul li a { padding: 20px; } .product-details .frequently ul li .txt .t1 { font-size: 14px; } .product-details .frequently ul li .txt .t2 { font-size: 16px; } .product-details .frequently ul li .addicon { width: 30px; height: 30px; border-radius: 50%; bottom: -15px; } .product-details .frequently ul li .total { font-size: 16px; } .product-details .frequently ul li .addto { height: 44px; line-height: 44px; border-radius: 22px; font-size: 14px; } .product-details .reviews .summary-right ul li .toptit .s1 { font-size: 16px; margin-right: 15px; } .product-details .reviews .summary-right ul li .txt { font-size: 14px; } .product-details .reviews .summary-right ul li .oth .t1 { font-size: 14px; margin-right: 15px; } .product-details .reviews .summary-right ul li .toptit { display: flex; align-items: center; } .product-details .reviews .summary-right ul li .toptit .s2 { font-size: 0; } .product-details .reviews .summary-right ul li .subtit { font-size: 16px; } .product-details .reviews .summary-right ul li:last-child { padding-bottom: 0; } .product-details .reviews .summary-right ul li .operate .btn { font-size: 14px; margin-bottom: 15px; } .product-details .reviews .summary-right ul li .operate .btn img { width: 16px; } .product-details .reviews .summary-right ul li .operate .sp { font-size: 14px; padding-left: 0; } .product-details .reviews .box { padding-bottom: 0; } .product-details .other-bought { padding: 0; } .product-details .other-bought .box>ul>li { padding-top: 0; } /*.product-details .other-bought .box>ul>li { width: -moz-calc((100% - 30px) / 2); width: -webkit-calc((100% - 30px) / 2); width: calc((100% - 30px) / 2); margin-right: 15px; padding-bottom: 0; }*/ .product-details .other-bought .box>ul>li:nth-child(2n) { margin-left: 15px; margin-right: 0; } .product-details .other-bought .box .txtbox a { padding: 0; } .product-details .other-bought .box .txtbox .t1 { font-size: 16px; } .product-details .other-bought .box .txtbox .t2 { font-size: 16px; } .product-details .tagbox { display: none; } .popup-prod-carousel .close { width: 30px; height: 30px; } .popup-prod-carousel .btn { width: 30px; height: 30px; line-height: 30px; } .popup-add-cart .w830 { padding: 10px 20px 30px; } .popup-add-cart .title { padding: 10px 0; } .popup-add-cart .title .h1 { font-size: 16px; } .popup-add-cart .img { width: 200px; } .popup-add-cart .text-box .h1 { font-size: 16px; } .popup-add-cart .item { margin-bottom: 5px; } .popup-add-cart .name { font-size: 14px; } .popup-add-cart .number { font-size: 14px; } .popup-add-cart .number-2 { font-size: 16px; } .popup-add-cart .text { font-size: 14px; margin-top: 15px; } .popup-add-cart .btn-box { margin-top: 15px; } .popup-add-cart .btn-2 { width: 200px; height: 38px; line-height: 38px; font-size: 14px; border-radius: 20px; margin: 0 auto; } .popup-add-cart .btn-4 { margin-top: 10px; } .popup-add-cart .data { margin-top: 10px; } .product-details .detailbox .conwidth>ul>li { padding-top: 0; margin-top: 0; } } .page-1 .title { font-size: 28px;/*2022/7/2*/ color: #333333; line-height: 60px; text-align: center;/*font-weight: bold;*/ } .article-sharing { margin-top: 24px; } .article-sharing .box { min-height: 470px; margin-top: 60px; padding: 50px 50px 80px 50px; background-color: #f7f7f8; box-sizing: border-box; margin-top: 120px; } .article-sharing .box .wrap { display: flex; align-items: flex-end; margin-top: -120px; } .article-sharing .box .name { width: 40px;/*2022/7/2*/ margin-right: 20px; } .article-sharing .box .img { width: 600px; margin-right: 80px; } .article-sharing .box .img img { width: 100%; } .article-sharing .box .text-box { width: -moz-calc(100% - 726px); width: -webkit-calc(100% - 726px); width: calc(100% - 726px); } .article-sharing .box .tips { font-size: 18px; color: #9f9f9f; line-height: 30px; } .article-sharing .box .h1 { font-size: 30px; color: #000000; line-height: 40px; margin-top: 12px; } .article-sharing .box .time { font-size: 18px; color: #888888; line-height: 26px; } .article-sharing .box .text { font-size: 16px; color: #888888; line-height: 30px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; margin-top: 27px; } @media only screen and (max-width: 1198px) { .article-sharing .box .text { line-height: 22px; } } .article-sharing .box .btn-box { margin-top: 20px; text-align: right;/*display: flex; justify-content: flex-end;*/ } .article-sharing .box .btn { position: relative; z-index: 2; display: inline-block; text-align: center; font-size: 16px; color: #ffffff; height: 46px; line-height: 46px; padding: 0 30px; background: #000000; border-radius: 23px; box-sizing: border-box; } .article-sharing .box .btn::before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #ffab8d; border-radius: 23px; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } @media only screen and (min-width: 991px) { .article-sharing .box .btn:hover::before { -webkit-transform: scale(1.01); transform: scale(1.01); } } .article-sharing .list-box { font-size: 0; margin: 0 -32px; margin-top: 65px; box-sizing: border-box;/*column-count: 3; column-gap: 0;*/ } .article-sharing .list-box .item { /*break-inside: avoid;*/ display: inline-block; vertical-align: top; width: 33.33%; padding: 0 32px; margin-bottom: 50px; box-sizing: border-box;/*-o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;*/ } /*.article-sharing .list-box .item:hover{ -o-transform: translateY(-20px); -ms-transform: translateY(-20px); -moz-transform: translateY(-20px); -webkit-transform: translateY(-20px); transform: translateY(-20px); }*/ .article-sharing .list-box a { display: block; box-sizing: border-box; } .article-sharing .list-box .item img { width: 100%; } .article-sharing .list-box .text-box { width: 100%; padding: 8px 0 15px; border-bottom: 1px solid #e9e9e9; box-sizing: border-box; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .article-sharing .list-box .tag { font-size: 16px; color: #000000; line-height: 40px; -o-transition: all .3s; -ms-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; } .article-sharing .list-box .h1 { font-size: 20px;/*2022/7/2*/ color: #000000; line-height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 14px; -o-transition: all .3s; -ms-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; } .article-sharing .list-box .text { font-size: 16px; color: #888888; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -o-transition: all .3s; -ms-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; } .article-sharing .list-box .time { font-size: 16px; color: #aaaaaa; line-height: 26px; margin-top: 20px; -o-transition: transform 0.4s ease, padding 0s ease; -ms-transition: transform 0.4s ease, padding 0s ease; -moz-transition: transform 0.4s ease, padding 0s ease; -webkit-transition: transform 0.4s ease, padding 0s ease; transition: transform 0.4s ease, padding 0s ease; } @media only screen and (min-width: 991px) { .article-sharing .list-box .item:hover .text-box { -o-transform: translateY(-30px); -ms-transform: translateY(-30px); -moz-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); padding: 8px 10px 15px 20px; border-bottom: 1px solid #000000; background-color: #000000; z-index: 2; } } @media only screen and (min-width: 991px) { .article-sharing .list-box .item:hover .tag { color: #cccccc; } .article-sharing .list-box .item:hover .h1 { color: #ffffff; } .article-sharing .list-box .item:hover .text { color: #888888; } .article-sharing .list-box .item:hover .time { color: #aaaaaa; } } .our-editors { margin-top: 75px; } .our-editors .list-box { margin: 0 -38px; margin-top: 100px; box-sizing: border-box; } .our-editors .item { float: left; width: 33.33%; padding: 0 38px; box-sizing: border-box; margin-bottom: 60px; } .our-editors .item a { display: block; } .our-editors .item .img { height: 265px; background-size: cover; background-position: center; text-align: center; } .our-editors .item .img-2 { position: relative; top: -40px; filter: alpha(opacity=0); opacity: 0; -o-transform: translateY(10px); -ms-transform: translateY(10px); -moz-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .our-editors .text-box { height: 157px; padding: 20px 0 38px; border-bottom: 1px solid #e9e9e9; box-sizing: border-box; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .our-editors .h1 { font-size: 24px; color: #000000; line-height: 40px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .our-editors .text { font-size: 16px; color: #888888; line-height: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 10px; } @media only screen and (min-width: 991px) { .our-editors .item:hover a { background-color: #000000; padding: 0 20px; } .our-editors .item:hover .img-1 { display: none; } .our-editors .item:hover .img-2 { -o-transform: translateY(0px); -ms-transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); filter: alpha(opacity=100); opacity: 1; } .our-editors .item:hover .text-box { background-color: #000000; padding: 43px 0 15px; border-bottom: 1px solid #000000; } .our-editors .item:hover .h1 { color: #ffffff; } .our-editors .item:hover .text { color: #888888; } } .our-editors .more { width: 70px; height: 70px; margin: 0 auto; margin-bottom: 90px; cursor: pointer; } @media only screen and (max-width: 1440px) { .article-sharing .box { height: auto; padding-bottom: 70px; } .article-sharing .box .wrap { margin-top: 0; } .article-sharing .box .img { width: 500px; } .article-sharing .box .text-box { width: -moz-calc(100% - 626px); width: -webkit-calc(100% - 626px); width: calc(100% - 626px); } .our-editors .item .img { height: 240px; } /*.our-editors .item:hover .img { background: none !important; }*/ .our-editors .text-box { height: 129px; padding: 15px 0; } .our-editors .item:hover .text-box { padding: 15px 0; height: 129px; } } @media only screen and (max-width: 1366px) { .article-sharing .list-box { margin: 0 -20px; margin-top: 50px; } .article-sharing .list-box .item { padding: 0 20px; } .our-editors .list-box { margin: 0 -20px; margin-top: 60px; } .our-editors .item { padding: 0 20px; } } @media only screen and (max-width: 1280px) { .article-sharing .box { padding: 50px; } .article-sharing .box .wrap { align-items: center; } .article-sharing .box .img { width: 400px; margin-right: 54px; } .article-sharing .box .text-box { width: -moz-calc(100% - 500px); width: -webkit-calc(100% - 500px); width: calc(100% - 500px); } } @media only screen and (max-width: 1199px) { .our-editors .item .img { height: 210px; } } @media only screen and (max-width: 1024px) { .article-sharing .box { margin-top: 70px; } .article-sharing .box .wrap { flex-wrap: wrap; } .article-sharing .box .img { width: -moz-calc(100% - 46px); width: -webkit-calc(100% - 46px); width: calc(100% - 46px); margin-right: 0; } .article-sharing .box .text-box { width: 100%; margin-top: 20px; } .article-sharing .box .btn-box { justify-content: center; } /*.article-sharing .list-box { column-count: 2; }*/ .article-sharing .list-box .h1 { font-size: 20px; margin-top: 5px; } .our-editors .item { width: 50%; } .our-editors .item .img { height: 265px; padding: 0 25px; } } @media only screen and (max-width: 991px) { .our-editors .item .img { padding: 0; } .now-section .contentli .swiper-slide{ width: 50% !important;} } @media only screen and (max-width: 768px) { .our-editors .item .img { height: 210px; } .article-sharing .list-box .item { width: 50%; } } @media only screen and (max-width: 640px) { /**/ .page-1 .title { font-size: 20px; line-height: 40px; } .article-sharing { margin-top: 0; } .article-sharing .box { margin-top: 30px; padding: 20px; } .article-sharing .box .name { width: 14px; } .article-sharing .box .img { width: calc(100% - 34px); } .article-sharing .box .tips { font-size: 14px; } .article-sharing .box .h1 { font-size: 16px; line-height: 30px; margin-top: 0; } .article-sharing .box .time { font-size: 14px; } .article-sharing .box .text { font-size: 14px; margin-top: 10px; } .article-sharing .box .btn { font-size: 14px; line-height: 40px; } .article-sharing .list-box .tag { font-size: 14px; line-height: 20px; } .article-sharing .list-box .h1 { font-size: 16px; margin-top: 0; } .article-sharing .list-box .text { font-size: 14px; line-height: 20px; } .article-sharing .list-box .time { font-size: 14px; margin-top: 0; } .article-sharing .list-box { margin: 0 -10px; margin-top: 30px; } .article-sharing .list-box .item { padding: 0 10px; margin-bottom: 40px; } .our-editors { margin-top: 20px; } .our-editors .item .img { height: 180px; } .our-editors .h1 { font-size: 16px; } .our-editors .text { font-size: 14px; margin-top: 0; } .our-editors .item .img-2 { top: -20px; } .our-editors .more { width: 40px; height: 40px; margin-bottom: 50px; } .our-editors .item { padding: 0 10px; margin-bottom: 40px; } .our-editors .list-box { margin: 0 -10px; margin-top: 40px; } } @media only screen and (max-width: 540px) { .our-editors .item .img { height: 130px; } /*20211008*/ /*.article-sharing .list-box .item{ width: 100%; }*/ } @media only screen and (max-width: 480px) { .article-sharing .list-box { column-count: 1; } .our-editors .item { width: 100%; } .our-editors .item .img { height: auto; } .article-sharing .list-box .item { margin-bottom: 30px; } .our-editors { margin-top: 0; } .our-editors .list-box { margin-top: 30px; } .our-editors .item { margin-bottom: 30px; } } .product-details-2 .title { padding-bottom: 22px; border-bottom: 1px solid #000000; margin-top: 55px; } .product-details-2 .title .h1 { font-size: 36px; color: #000000; line-height: 40px; } .product-details-2 .title .info { display: flex; align-items: center; margin-top: 28px; } .product-details-2 .title .time { display: flex; align-items: center; font-size: 18px; color: #333333; line-height: 1; padding-right: 20px; margin-right: 20px; border-right: 1px solid #333333; } .product-details-2 .title .time img { margin-right: 10px; } .product-details-2 .title .s-1 { font-size: 18px; color: #333333; line-height: 1; text-decoration: underline; } .product-details-2 .title .s-2 { font-size: 16px; color: #000000; line-height: 33px; border: 1px solid #333; padding: 0 14px; margin-left: 40px; } .product-details-2 .text { font-size: 20px; /*color: #888888;*/ /*2022/7/1*/ line-height: 40px; margin-top: 65px; } .turn-pages { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; margin-top: 60px; margin-bottom: 135px; border-top: 1px solid #d2d2d2; } .turn-pages .arrow { font-size: 20px; color: #000000; line-height: 30px; } .turn-pages .return { font-size: 20px; color: #ffffff; line-height: 50px; background-color: #000; border-radius: 25px; padding: 0 55px; } @media only screen and (max-width: 480px) { .product-details-2 .title { margin-top: 30px; } .product-details-2 .title .h1 { font-size: 20px; line-height: 30px; } .product-details-2 .title .time { font-size: 14px; padding-right: 10px; margin-right: 10px; } .product-details-2 .title .s-1 { font-size: 14px; } .product-details-2 .title .s-2 { margin-left: 20px; font-size: 14px; line-height: 24px; } .product-details-2 .title .info { margin-top: 10px; } .product-details-2 .text { margin-top: 30px; font-size: 14px; line-height: 30px; } .turn-pages { padding-top: 20px; margin-top: 30px; margin-bottom: 50px; } .turn-pages .arrow { font-size: 14px; } .turn-pages .return { font-size: 14px; line-height: 40px; border-radius: 20px; padding: 0 30px; } } .brands .nav-1 { display: flex; margin-top: 40px; } .brands .nav-1 .name { width: 90px; font-size: 24px; color: #333333; line-height: 40px; } .brands .nav-1 .nav { /*width: -moz-calc(100% - 90px); width: -webkit-calc(100% - 90px); width: calc(100% - 90px);*/ position: relative; display: flex; align-items: center; flex-wrap: wrap; padding-left: 90px; box-sizing: border-box; } .brands .nav-1 .nav a { width: 40px; height: 40px; line-height: 40px; font-size: 20px; color: #333333; text-align: center; margin-right: 10px; margin-bottom: 10px; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; border: #d9d9d9 solid 1px; box-sizing: border-box; } .brands .nav-1 .nav a.on { color: #fff; background-color: #feaa8e; border: #feaa8e solid 1px; } .brands .nav-1 .nav a.name { position: absolute; left: 0; top: 0; width: 90px; text-align: left; border: none; } .brands .nav-1 .nav a.on.name { color: #333333; background: none; } @media only screen and (min-width: 1025px) { .brands .nav-1 .nav a:hover { color: #fff; background-color: #feaa8e; border: #feaa8e solid 1px; } .brands .nav-1 .nav a.name:hover { color: #333333; background: none; border: none; } } .brands .nav-2 { display: flex; margin-top: 70px; } .brands .nav-2 .name { width: 90px; font-size: 26px; color: #000000; font-weight: bold; } .brands .nav-2 .nav { width: -moz-calc(100% - 90px); width: -webkit-calc(100% - 90px); width: calc(100% - 90px); display: flex; align-items: center; flex-wrap: wrap; } .brands .nav-2 img { max-height: 100%; } .brands .nav-2 .nav a { position: relative; z-index: 1; width: 25%; height: 170px; box-sizing: border-box; text-align: center; } .brands .nav-2 .nav a::before { content: ''; position: absolute; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; border: 4px solid #feaa8e; box-sizing: border-box; -o-transform: scale(0.6); -ms-transform: scale(0.6); -moz-transform: scale(0.6); -webkit-transform: scale(0.6); transform: scale(0.6); -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; filter: alpha(opacity=0); opacity: 0; } .brands .nav-2 .nav a.on::before, .brands .nav-2 .nav a:hover::before { -o-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); filter: alpha(opacity=100); opacity: 1; } /*.brands .nav-2 .nav a.on { border: 4px solid #feaa8e; }*/ .brands .nav-3 { margin-top: 80px; padding: 60px 0 50px;/*border-top: 1px solid #e9e9e9;*/ } .brands .nav-3 .name { width: 90px; font-size: 26px; color: #000000; font-weight: bold; } .brands .nav-3 .nav { display: flex; align-items: center; flex-wrap: wrap; /* height: 510px; overflow-y: auto;*/ padding-right: 30px; margin-top: 30px; margin-bottom: 30px; } .brands .nav-3 .nav::-webkit-scrollbar { /*滚动条整体样式*/ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .brands .nav-3 .nav::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #000000; } .brands .nav-3 .nav::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 5px; background: #eeeeee; } .brands .nav-3 .nav a { position: relative; z-index: 1; width: 25%; height: 170px; line-height: 170px; text-align: center; } /* .brands .nav-3 .nav a::before { content: ''; position: absolute; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; border: 4px solid #000; box-sizing: border-box; -o-transform: scale(0.6); -ms-transform: scale(0.6); -moz-transform: scale(0.6); -webkit-transform: scale(0.6); transform: scale(0.6); -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; filter: alpha(opacity=0); opacity: 0; } */ /* .brands .nav-3 .nav a.on::before, .brands .nav-3 .nav a:hover::before { -o-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); filter: alpha(opacity=100); opacity: 1; } */ .brands .nav-3 img { max-height: 100%; } @media only screen and (max-width: 1440px) { .brands .nav-2 .nav a::before, .brands .nav-3 .nav a::before { border: 3px solid #000; } } @media only screen and (max-width: 1280px) { .brands .nav-2 .nav a::before, .brands .nav-3 .nav a::before { border: 2px solid #feaa8e; } } @media only screen and (max-width: 991px) { .brands .nav-2 .nav a { width: 33.33%; } .brands .nav-3 .nav a { width: 33.33%; } .brands .nav-3 { margin-top: 50px; } .prod-carousel .view { float: none; width: 100%; padding-left: 0; } .prod-carousel .preview { float: none; width: 100%; margin-bottom: 20px; } .view .arrow-right { right: 0; } .view .arrow-left { left: 0; } } @media only screen and (max-width: 640px) { .brands .nav-2 .nav a { height: 120px; } .brands .nav-3 .nav { /*height: 360px;*/ } .brands .nav-3 .nav a { height: 120px; line-height: 120px; } } @media only screen and (max-width: 480px) { .brands .nav-1 { margin-top: 30px; } .brands .nav-1 .name { width: 60px; font-size: 18px; line-height: 1; } /*.brands .nav-1 .nav { width: calc(100% - 60px); }*/ .brands .nav-1 .nav { padding-left: 60px; } .brands .nav-1 .nav a.name { width: 60px; font-size: 18px; } .brands .nav-1 .nav a { width: 30px; height: 30px; line-height: 30px; font-size: 14px; margin-right: 5px; } .brands .nav-2 { margin-top: 30px; } .brands .nav-2 .name { width: 60px; font-size: 18px; } .brands .nav-2 .nav { width: calc(100% - 60px); } .brands .nav-2 .nav a { width: 25%; height: 80px; } .brands .nav-3 { margin-top: 30px; padding: 30px 0 50px; } .brands .nav-3 .name { width: 40px; font-size: 18px; } .brands .nav-3 .nav { width: calc(100% - 40px);/*height: 240px;*/ } .brands .nav-3 .nav a { /*width: 25%;*/ height: 80px; line-height: 70px; padding: 5px; box-sizing: border-box; } } /* end */ /*S 8/8*/ /*S 个人会员左边*/ .setting_address_container { /*font-family: Arial;*/ } .setting_address_container .btns { text-align: center; min-width: 150px; line-height: 50px; border-radius: 30px; background: #000000; font-size: 16px; color: #FFFFFF; box-sizing: border-box; padding: 0 20px; text-transform: uppercase; -o-transition: all .4s; -ms-transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; transition: all .4s; } .setting_address_container .btns:hover { background: #ffab8d; } .setting_address_container .i-title { padding: 63px 0 30px; } .setting_wrapper { padding: 65px 0 100px 0; /* border-top: 1px solid #dbdbdb; */ display: flex; justify-content: space-between; } .setting_left { color: #000000; /* width: 315px; */ width:375px; float: left; } .setting_left .name { font-size: 24px; font-weight: bold; } .setting_left .sign_out { margin: 20px 0 28px; } .setting_left .small_title { font-size: 18px; line-height: 2.7; color: #666666; padding-top: 10px; border-top: 1px solid #ededed; } .setting_left .small_title a { color: #666666; display: block; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .setting_left .small_title a:hover, .setting_left .small_title a.on { font-weight: bold; color: #000000; } .setting_left .setting_link { } .setting_left .setting_link .setting_link_tit { display:flex; justify-content: space-between; /* vertical-align: middle; */ align-items: center; } .setting_left .setting_link .setting_link_tit a { height: 17px; font-size: 14px; font-family: Source Han Sans CN-Regular, Source Han Sans CN; font-weight: 400; color: #3D3D3D; line-height: 17px; } .setting_left li .icon{ width: 24px; height: 24px; background-color: #000; border-radius: 50%; text-align: center; margin-right:5px ; } .setting_left .setting_link li { } .setting_left .setting_link li .contactinformation { width: 350px; height: 150px; background-image: url(./images/information.png); background-repeat: no-repeat; background-size: 100% 100%; margin-top: 20px; display: flex; flex-direction: column; justify-content: space-around; padding: 15px; } .setting_left .setting_link li .contactinformation p { font-size:14px; color:#fff; } .setting_left .setting_link .tit { font-size: 24px; font-weight: bold; /* padding: 30px 0 15px 0; */ /* border-bottom: 1px solid #ededed; */ color: #3d3d3d; line-height: 23px; font-weight: 700; } .setting_left .link_list { padding: 20px 0; font-size: 18px; color: #666666; line-height: 1.35; } .setting_left .link_list a { /* color: #666666; */ color: #3d3d3d; font-size: 14px; font-weight: 400; line-height: 17px; display: block; /* margin-bottom: 15px; */ margin: 23px 0; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .setting_left .link_list a:hover { font-weight: bold; color: #000000; text-decoration: underline; } .setting_left .contact { display: flex; flex-direction: row; justify-content: space-between; margin: 15px 0; } .setting_left .icon_iphone { width: 31px; height: 31px; border-radius: 50%; background: #000000; text-align: center; } .setting_left .number { width: -moz-calc(100% - 35px); width: -webkit-calc(100% - 35px); width: calc(100% - 35px); font-size: 24px; font-weight: bold; color: #fff; } /*E 个人会员左边*/ /*S 个人会员右边*/ .setting_address_container .setting_right { width: -moz-calc(100% - 400); width: -webkit-calc(100% - 400px); width: calc(100% - 400px); float: right; } /*地址*/ .address_list { padding: 18px 0; } .address_list li { font-size: 16px; color: #666666; /* display: inline-block; */ /* width: -moz-calc(50% - 18px); */ /* width: -webkit-calc(50% - 18px); */ /* width: calc(50% - 18px); */ /* padding-right: 30px; */ /* display: inline-block; */ /* vertical-align: top; */ box-sizing: border-box; /* border-right: 1px solid #ededed; */ /* border-top: 1px solid #ededed; */ } .address_list li:nth-child(1), .address_list li:nth-child(2) { border-top: 0; } .address_list li:nth-child(even) { margin-left: 30px; } .address_list .status { padding: 25px 0 20px; border-bottom: 1px solid #dbdbdb; cursor: pointer; } .address_list .status:hover { text-decoration: underline; } .address_list .details { color: #000000; padding: 28px 0 20px; } .address_list .btns_sum { margin-bottom: 30px; } .address_list .btns_sum a { margin: 20px 20px 0 0; display: inline-block; vertical-align: top; } .address_none { font-size: 18px; line-height: 2; color: #000000; padding-bottom: 60px; } .add_address_form { font-size: 16px; } .add_address_form li { width: -moz-calc(50% - 18px); width: -webkit-calc(50% - 18px); width: calc(50% - 18px); /*float: left;*/ display: inline-block; vertical-align: top; margin-bottom: 25px; } .add_address_form .layui-form dd { width: 100%; margin: 0 !important; } .add_address_form dd { width: 30%; display: inline-block; vertical-align: top; position: relative; } .add_address_form dd:after { content: ''; position: absolute; right: 20px; top: 48px; background: url("./images/icon_arrow.png") no-repeat; width: 15px; height: 15px; background-size: cover; } .add_address_form dd:nth-child(even) { margin: 0 calc(5% - 6px); } .add_address_form li:nth-child(even) { margin-left: 30px; } .add_address_form .place { margin-bottom: 8px; } .add_address_form dd .text { color: #999999; } .add_address_form .req_star { color: #ff0000; } .add_address_form .text { border: 1px solid #dadada; padding: 20px; font-size: 16px; width: 100%; box-sizing: border-box; color: #000000; position: relative; -o-transition: all .4s; -ms-transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; transition: all .4s; } .add_address_form .text:focus { border-color: #000000; } .setting_radio { margin: 20px 0; cursor: pointer; font-size: 16px; color: #000000; padding-left: 35px; background: url("./images/icon_gou.png") center left no-repeat; } .setting_radio.on { background: url("./images/icon_gou_on.png") center left no-repeat; } .setting_right { } .setting_right .add_btns { } .setting_right .add_btns .btns { width: 210px; margin-right: 20px; } .setting_index_container { } .setting_index_container .index1_wrapper { } .index1_wrapper li { width: -moz-calc(50% - 18px); width: -webkit-calc(50% - 18px); width: calc(50% - 18px); display: inline-block; vertical-align: top; border-radius: 10px; background: #f4f4f4; } .index1_wrapper li:nth-child(2) { margin-left: 30px; } .index1_wrapper li:nth-child(3) { width: 100%; margin: 0; } .index1_wrapper .title { /* background: #f8f8f8; */ color: #333333; padding: 0 20px; font-size: 20px; font-weight: bold; line-height: 50px; } .index1_wrapper .title a { /* color: #ffab8d; */ color:#1C70F6; font-weight: normal; font-size: 18px; float: right; } .index1_wrapper .title img { vertical-align: top; margin-top: 13px; } .index1_wrapper .desc { font-size: 14px; line-height: 40px; color: #3D3D3D; box-sizing: border-box; padding: 15px 20px 35px; } .index1_wrapper .to_list { width: 100%; display: flex; flex-direction: row; justify-content: center; /* border: 1px solid #d8d8d8; */ } .to_list a { width: 20%; text-align: center; margin: 20px 0; border-right: 1px solid #d8d8d8; cursor: pointer; } .to_list a:last-child { border-right: 0; } .to_list .icon { max-width: 50px; width: 30%; margin: 5px auto; } .to_list .tips { font-size: 16px; color: #000000; line-height: 1.2; padding-bottom: 5px; } .index2_wrapper { margin: 50px 0; } .req_tips { font-size: 16px; padding-bottom: 20px; } .req_tips .right { float: right; color: #ff0000; } .req_tips .radio_sex { } .req_tips .radio_sex a { margin-left: 20px; cursor: pointer; background: url("./images/icon_radius1.jpg") center left no-repeat; padding-left: 22px; } .req_tips .radio_sex a.on { background-image: url("./images/icon_radius_on.jpg"); } .win_change { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 100; display: none; } .win_change .bg { width: 100%; height: 100vh; background: rgba(0, 0, 0, .5); } .win_change .container { width: 90%; max-width: 1152px; background: #FFFFFF; position: absolute; top: 50%; left: 50%; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-sizing: border-box; padding: 50px; } .win_change h3.title { position: relative; font-size: 28px; font-weight: bold; color: #000000; padding: 18px 0; border-bottom: 1px solid #dddddd; } .win_change .title .close { width: 17px; position: absolute; top: 0; right: 0; cursor: pointer; } .win_change .req_tips { padding: 50px 0; } .req_tips .add_address_form li { width: 100%; margin: 25px 0 0 !important; } .win_change .text_wrapper { position: relative; } .add_address_form .yan { position: absolute; top: 35%; right: 20px; z-index: 2; } .add_address_form .yan:after { content: ''; width: 20px; height: 1px; background: #000000; -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); display: block; position: absolute; top: 50%; left: 0; filter: alpha(opacity=0); opacity: 0; -o-transition: all .5s; -ms-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; } .add_address_form .yan.hide:after { -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); filter: alpha(opacity=100); opacity: 1; } .win_change .btns { text-align: center; min-width: 240px; margin: 30px 0; line-height: 50px; border-radius: 30px; background: #000000; font-size: 16px; color: #FFFFFF; box-sizing: border-box; padding: 0 20px; text-transform: uppercase; -o-transition: all .4s; -ms-transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; transition: all .4s; } .nav_list_pc { /*font-size: 18px;*//*2022/7/29*/ /* display: flex; */ /* flex-direction: row; */ /* justify-content: space-between; */ text-align: center; margin-bottom: 20px; } .nav_list_pc a { color: #222; box-sizing: border-box; border-right: 1px solid #dddddd; padding: 0 20px; cursor: pointer; position: relative; margin: 15px 0; white-space: nowrap; } .nav_list_pc a.on { color: #ffab8d; } .nav_list_pc a.on:after { content: ''; position: absolute; bottom: -15px; left: 0; width: 100%; background: #ffab8d; height: 1px; } .nav_list_pc a:last-child { border-right: 0; } .nav_list { } .nav_list a { text-align: center; color: #222; cursor: pointer; line-height: 3; /* padding: 15px 0; */ display: inline-block; } .nav_list_pc a.on { color: #ffab8d; font-weight: bold;/* border-bottom: 1px solid #ffab8d; */ } .table_order { width: 100%; text-align: center; margin-bottom: 50px; } .table_order th { padding: 10px; font-weight: lighter; background: #f8f8f8; color: #666666; font-size: 16px; line-height: 2; } .table_order td { padding: 30px 2px; border-bottom: 1px solid #ededed; } .table_order .link { margin: 10px 0; display: block; font-size: 14px; color: #000000; text-decoration: underline; } .table_order .link:hover { color: #ffab8d; } .pc_show { display: block; } .pc_none { display: none; } .order_list { font-size: 14px; color: #666666; } .order_list li { border-top: 1px solid #dddddd; padding-top: 10px; } .order_list li:first-child { border-top: 0; } .order_list .left { width: 100px; display: inline-block; vertical-align: top; } .order_list dl { width: -moz-calc(100% - 110px); width: -webkit-calc(100% - 110px); width: calc(100% - 110px); display: inline-block; vertical-align: top; line-height: 1.5; margin-top: 10px; } .order_list dd { color: #000000; margin-bottom: 4px; } .order_list .number { float: right; } .order_list .btns_sum1 { text-align: right; margin: 10px 0 20px; } .order_list .link { text-align: center; border: 1px solid #333333; color: #333333; background: transparent; margin-left: 5px; } .o_details_top1 { border-bottom: 1px solid #dddddd; } .o_details_top li { width: 30%; float: left; box-sizing: border-box; box-sizing: border-box; } .o_details_top li .title { font-size: 18px; font-weight: bold; color: #000000; padding: 0 0 15px 0; border-bottom: 1px solid #dddddd; } .o_details_top li:nth-child(2) { width: 50%; } .o_details_top li:nth-child(2) .title { padding: 0px 5% 15px; } .o_details_top li:nth-child(3) { width: 20%; } .o_details_top .desc { font-size: 16px; line-height: 1.8; padding: 10px 0 20px 0; color: #333333; } .o_details_top li:nth-child(2) .desc { padding: 10px 5% 20px; } .o_details_top .desc dd { margin-top: 12px; } .o_details_center { width: 68%; float: right; font-size: 16px; line-height: 2; padding-right: 20%; box-sizing: border-box; padding: 12px 0; border-bottom: 1px solid #ddd; } .o_details_center dd { padding-right: 20%; box-sizing: border-box; font-size: 16px; line-height: 1.8; color: #000000; display: block; } .o_details_center .l { float: left; font-weight: bold; } .o_details_center .r { float: right; } .win_change { } .win_change .t1 { width: 40%; float: left; box-sizing: border-box; padding-right: 5%; } .win_change .t2 { width: 60%; float: left; box-sizing: border-box; padding-right: 11%; } .win_change .table { font-size: 16px; line-height: 1.8; color: #999999; padding: 7px 0; max-height: 50vh; overflow-y: auto; } .win_change .table dt { color: #000000; padding: 10px 0; } .win_change .table dd { padding: 10px 0; } .order_details_list { } .order_details_list .tit { background: transparent; color: #000; font-weight: bold; font-size: 18px; border-bottom: 2px solid #000; padding-top: 25px; } .order_details_list .w1 { max-width: 100px; white-space: nowrap; } .order_details_list .subtit { font-size: 16px; color: #333333; font-weight: bold; } .order_details_list .milliliter { color: #999999; } .order_details_list .milliliter img { margin-right: 5px; } .order_details_list ul { border-bottom: 2px solid #000000; margin-bottom: 40px; } .order_details_list ul li:last-child { border-bottom: 0; } .setting_right .return { text-align: right; padding-top: 40px; } .setting_right .return a { color: #000000; margin-left: 10px; text-decoration: underline; } /*E 个人会员右边*/ @media only screen and (max-width: 1440px) { .win_change .table { font-size: 15px; } .nav_list_pc a { padding: 0 2.5%; margin: 10px 0; font-size: 13px; } .setting_right .add_btns .btns { width: 180px; margin-right: 15px; } .address_list li { font-size: 15px; } .setting_left { width: 290px; } .setting_address_container .setting_right { width: -moz-calc(100% - 400px); width: -webkit-calc(100% - 400px); width: calc(100% - 400px); } .setting_left .number, .setting_left .name, .setting_left .setting_link .tit { font-size: 20px; } .setting_left .small_title a, .setting_left .link_list { font-size: 15px; } .setting_address_container .btns { min-width: 125px; line-height: 45px; font-size: 15px; padding: 0 15px; } .setting_address_container .i-title { padding: 45px 0 20px; } .nav_list_pc { text-align: left; border-bottom: 1px solid #ddd; margin-bottom: 20px; } .nav_list_pc a { padding: 0 2%; } .nav_list_pc a.on:after { bottom: -10px; } } .tab_z { display: none; } /* 大屏下隐藏夏日专题手机端braner图 */ .bannerbg1 { display: none; } .bannerbg { display: block; } @media only screen and (max-width: 1199px) { /* 商品详情页 */ .product-details .other-bought .box .txtbox a { margin-top: 20px; } /* 手机端个人中心隐藏右边部分 */ .setting_left { display:none; } .order-items .table .td { display: block; } /* 购物车 */ .order-items .table .clearfix:before { content: ""; display:block; } .order-items .table .clearfix:after { content: ""; display:block; } .order-items .table .right { margin-left:0 } /* 品牌页 */ .brands .nav-3 .nav { padding-right:0; } .brands-main .brands .nav-3 .nav { display:flex; justify-content: space-between; } /* 首页折扣模块 */ .discount_Mobile { width: 40px; height: 44px; background-color: #F4D04B; position: absolute; top: 0; left: 0; font-size: 12px; font-weight:700; font-family: Montserrat-Bold, Montserrat; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; } /* 产品列表 */ .product .rightbox .listbox .goods_list li{ width: 50% !important; } body .goods_list .showbtn { display:none; } /* 手机端个人中心 */ /* 用户信息 */ body .userinfo { display: flex; align-items: center; justify-content: space-between; } body .tabs_nav_ul { height:auto; } body .tabs_nav_ul li { display: flex; flex-direction: column; align-items: center; font-size: 12px; line-height:20px; } body .tabs_nav_ul li { margin:0; padding: 10px; } /* 2023.3.9 */ /* .order-items .table .td { display: block; } */ .bannerbg1 { display: block; width:100% } .bannerbg1 a { width:100% } .bannerbg { display: none; } /* 我的订单 */ body .pc_show { display:none; } body .pc_none { display: block; } body .setting_wrapper { display: block; } .pc_none .swiper-wrapper { font-size:12px; } /* branner图 */ .tab_z { display: block; width: 100%; /* height: 720px; */ /* margin: 100px auto; */ /* border: 1px solid #ccc; */ } .tab_z .tab_list { height: 39px; /* border: 1px solid #ccc; */ /* background-color: #f1f1f1; */ margin-bottom: 5px; } .tab_z .tab_list ul{ display: flex; justify-content: space-between; overflow: hidden; overflow-x: auto; white-space: nowrap; margin-top:20px } .tab_z .tab_list ul::-webkit-scrollbar { display: none; } .tab_z .tab_con { /* height: 720px; */ } .tab_z .tab_list li { /* float: left; */ font-size: 16px; height: 39px; line-height: 39px; /* padding: 0 20px; */ text-align: center; cursor: pointer; margin-right: 24px; } .tab_z .tab_list .current { /* background-color: #c81623; */ border-bottom: 2px solid #000; color: #000; font-weight:600; font-family: Montserrat-BoldItalic, Montserrat; font-size:22px; } .tab_z .tab_con .items_b { display: none; } .tab_z .tab_con .items_b ul { display:flex; justify-content: space-between; flex-wrap: wrap; } .tab_z .tab_con .items_b ul li { position: relative; width: 47%; /* padding: 16px; */ margin-bottom:20px } .tab_z .tab_con .items_b ul li:nth-child(1){ background-color:#000; display:none; } #block84 { display:none; } .inner_a { color:#fff; padding: 10px; } .inner_a a { color:#fff; } .inner_a .tit { margin-bottom: 8px; font-family: Montserrat-Bold, Montserrat; font-weight: bold; color: #FFFFFF; } .inner_a .tit1 { word-wrap: break-word; /* height: 32px; */ font-size: 12px; font-family: Montserrat-Medium, Montserrat; font-weight: 500; color: #FFFFFF; } .inner_a .btn { width: 80px; height: 25px; /* line-height: 21px; */ margin-top: 15px; /* padding: 5px 10px; */ line-height: 25px; font-size: 12px; text-align: center; opacity: 1; border: 1px solid #FFFFFF; } .tab_z .tab_con .viewall img { vertical-align: baseline; } .tab_z .tab_con .viewall a { text-decoration: underline; } .viewall a , .viewall-blog a{ text-decoration: underline; } .tab_z .tab_con .viewall { text-align:center; height: 26px; font-size: 13px; font-family: Montserrat-BoldItalic, Montserrat; font-weight: normal; color: #000000; line-height: 26px; margin-bottom: 20px; } .tab_z .tab_con .items_b ul li:nth-child(1) .inner .tit { color:#fff } .tab_z .tab_con .items_b ul li:nth-child(1) .inner .tit1 { color:#fff } .tab_z .tab_con .items_b ul li:nth-child(1) .inner .btn { color:#fff; width: 66px; /* height: 21px; */ border-radius: 0px 0px 0px 0px; opacity: 1; border: 1px solid #FFFFFF; } .tab_z .tab_con .items_b ul li img { /* width:100%; */ /* padding:10px; */ } .tab_z .tab_con .items_b ul li .inner .tit{ /* height: 35px; */ font-size: 12px; font-family: Montserrat-Medium, Montserrat; font-weight: 500; color: #3D3D3D; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top:12px; /* line-height: 35px; */ } .tab_z .tab_con .items_b ul li .inner .tit1 { height: 34px; font-size: 12px; font-family: Montserrat-Bold, Montserrat; font-weight: bold; color: #000000; line-height: 34px; text-align: center; } .tab_z .tab_con .items_b ul li .inner .btn { width: 112px; height: 34px; border-radius: 0px 0px 0px 0px; opacity: 1; border: 1px solid #000000; text-align:center; line-height:34px; /* margin-top: 8px; */ margin:0 auto; } /* TRENDINGPRODUCTS 手机端 */ /* 隐藏PC端模块 */ #trending-product78 { display:none; } .TRENDINGPRODUCTS { display:block; margin: 20px auto; } .TRENDINGPRODUCTS .top{ /* height:600px; */ text-align: center; } .TRENDINGPRODUCTS .top .tit_a { font-family: Montserrat-BoldItalic, Montserrat; font-weight: 700; color: #000; margin-bottom: 10px; } .TRENDINGPRODUCTS .top .tit_b { font-size: 14px; font-family: Montserrat-ExtraLight; color: #999; margin-bottom: 10px; } .TRENDINGPRODUCTS .bottom { text-align:center; height: 26px; font-size: 13px; font-family: Montserrat-BoldItalic, Montserrat; font-weight: normal; color: #000000; line-height: 26px; } .TRENDINGPRODUCTS .top .tit_a{ font-size:22px; height:26px; } .TRENDINGPRODUCTS .content ul { display:flex; flex-wrap: wrap; justify-content: space-between; } .TRENDINGPRODUCTS .content ul li { position: relative; width: 47%; /* padding:0; */ margin-bottom: 20px; } .TRENDINGPRODUCTS .content ul li .items .commodity_tit { /* height: 34px; */ font-size: 11px; font-family: Montserrat-Medium, Montserrat; font-weight: 500; color: #3D3D3D; /* line-height: 34px; */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top:12px; } .TRENDINGPRODUCTS .content ul li .items .commodity_price { height: 34px; font-size: 11px; font-family: Montserrat-Bold, Montserrat; font-weight: bold; color: #000; line-height: 34px; text-align: center; } .TRENDINGPRODUCTS .content ul li .items .commodity_btn { text-align:center; line-height: 35px; width: 112px; height: 35px; border-radius: 0px 0px 0px 0px; opacity: 1; border: 1px solid #000000; font-family: "Montserrat-Regular", sans-serif, "Arial", "Microsoft YaHei", "Helvetica Neue", Helvetica; font-size: 16px; margin: 0 auto; } /* TRENDING BRANDS */ .sw6 .swiper-container-vertical { height: 100px; margin: 30px 0; } .partner-section .conwidth .home_brand { display:block; } body .i-title .t1, body .big_title { height: 26px; text-align: center; margin-bottom: 10px; } body .i-title .t2 { text-align: center; } .partner-section .conwidth .home_brand .button { display:none; } /* BEST SELLERS */ .Beautymakeup1 .item ,.Beautymakeup .item{ height: 150px; } .Beautymakeup .item .mengban,.Beautymakeup1 .item .mengban { font-size: 12px; line-height: 15px; padding-left: 10px; height: 40% !important; } body .big_title { height: 26px; text-align: center; } body .small_title { text-align: center; } .big_title { font-size:22px; } /* 底部 */ .footer .foot-nav ul { display:block; }} .footer { padding-top: 0; /* background: #000; */ } .win_change .t2 { padding-right: 0; } .win_change .container { padding: 10%; } .win_change .btns { min-width: 200px; line-height: 45px; font-size: 15px; padding: 0 15px; } .add_address_form dd:after { top: 39px; right: 5px; background-size: 10px; } .add_address_form .text { padding: 10px; font-size: 14px; } .setting_right .add_btns .btns { width: 180px; margin-right: 6px; margin-bottom: 10px; } .address_list .btns_sum a { margin: 10px 10px 0 0; } .setting_wrapper { width: 92%; margin: 0 auto; padding: 40px 0; } .setting_left, .setting_address_container .setting_right { width: 100%; float: none; } .setting_left .setting_link li:first-child { display: none; } .setting_left .small_title a { width: -moz-calc(50% - 4px); width: -webkit-calc(50% - 4px); width: calc(50% - 4px); display: inline-block; vertical-align: top; } .setting_address_container .btns { min-width: 110px; line-height: 40px; font-size: 14px; padding: 0 10px; } .setting_left .setting_link .tit { padding: 20px 0 7px; } .setting_left .sign_out { margin: 12px 0 18px; } .setting_address_container .i-title { padding: 35px 0 16px; } } @media only screen and (max-width: 991px) { .win_change .table { font-size: 13px; line-height: 1.5; } .win_change .table dt { padding: 5px 0; } .win_change .table dd { padding: 7px 0; } .nav_list { font-size: 12px; } .nav_list a { color: #000; padding: 0; } .nav_list a.on { color: #ffab8d; border-bottom: 1px solid #ffab8d; } .pc_show { display: none; } .pc_none { display: block; } .win_change h3.title { font-size: 20px; } .win_change .req_tips { padding: 20px 0; } .win_change .container { padding: 5%; } .req_tips { font-size: 14px; padding-bottom: 5px; } .index2_wrapper { margin: 20px 0 0; } .to_list a:nth-child(even) { border-right: 0; } .to_list a { border-bottom: 1px solid #ddd; width: calc(50% - 4px); vertical-align: top; margin: 0; padding: 5px; box-sizing: border-box; margin-bottom: -1px; } .index1_wrapper .title { font-size: 16px; } .index1_wrapper li, .index1_wrapper li:nth-child(2) { width: 100%; margin: 10px 0; } .index1_wrapper .desc { font-size: 14px; line-height: 2; padding: 10px 10px 30px; } .index1_wrapper .title a { font-size: 14px; } .index1_wrapper .title a img { width: 17px; margin-top: 16px; } .index1_wrapper .to_list { display: block; padding: 0; text-align: center; } .add_address_form .place, .setting_radio { font-size: 14px; } .setting_radio { background-size: 17px; padding-left: 20px; } .add_address_form li:nth-child(even), .add_address_form li { width: 100%; margin: 10px 0; } .setting_wrapper { padding: 20px 0; } .setting_left { margin-bottom: 20px; } .setting_left .contact { margin: 8px 0; } .setting_address_container .btns { min-width: 95px; line-height: 36px; font-size: 12px; padding: 0 8px; } .setting_left .number, .setting_left .name, .setting_left .setting_link .tit { font-size: 16px; } .setting_left .small_title a, .setting_left .link_list { font-size: 13px; } .setting_left .small_title { line-height: 2; } .setting_left .icon_iphone { width: 23px; height: 23px; } .o_details_top li:nth-child(2), .o_details_top li:nth-child(1), .o_details_top li:nth-child(3) { width: 100%; padding: 0; margin: 0 0 20px; } .o_details_top li:nth-child(2) .desc, .o_details_top li:nth-child(2) .title { padding-left: 0; padding-right: 0; } .o_details_center { width: 100%; padding: 0; } .o_details_top li:nth-child(2) .desc, .o_details_center { font-size: 14px; } .o_details_top .desc dd { margin-top: 7px; } .o_details_top li .title, .o_details_top li:nth-child(2) .title { font-size: 16px; padding: 0 0 7px 0; } } @media only screen and (max-width: 767px) { .win_change h3.title { font-size: 15px; } .to_list .tips { font-size: 14px; line-height: 1.5; } .address_list li { font-size: 13px; } .address_list .details { padding: 18px 0 14px; } .address_list li, .address_list li:nth-child(even), .address_list li:nth-child(1), .address_list li:nth-child(2) { width: 100%; padding: 10px 15px 25px; border: 1px solid #ededed; margin: 10px 0; } } /*E 8/8*/ /**/ .homebox { padding-top: 30px; padding-bottom: 70px; min-height: 500px; } .homebox .home_left { /* float: left; */ float:right; width: 240px; } .homebox .subtit { /*font-family: arial;*/ font-weight: bold; font-size: 24px; color: #333333; padding-bottom: 18px; border-bottom: #333333 solid 3px; } .homebox .tit { /*font-family: arial;*/ font-weight: bold; font-size: 28px; color: #333333; padding-bottom: 20px; border-bottom: #dcdcdc solid 1px; } .homebox .home_left .tit { border-bottom: #333333 solid 3px; } .homebox .home_left .wrap { margin-top: 12px; } .homebox .home_left .wrap ul li a, .homebox .home_left .wrap ul li span { padding: 14px 0px; color: #999999; font-size: 16px; } .homebox .home_left .wrap.wrap1 ul li a, .homebox .home_left .wrap.wrap1 ul li span { color: #333333; } .homebox .home_left .wrap ul li.on a, .homebox .home_left .wrap ul li:hover a, .homebox .home_left .wrap ul li.on span, .homebox .home_left .wrap ul li:hover span { font-weight: bold; color: #000000; } .homebox .home_left .wrap.wrap1 ul li.on a, .homebox .home_left .wrap.wrap1 ul li:hover a, .homebox .home_left .wrap.wrap1 ul li.on span, .homebox .home_left .wrap.wrap1 ul li:hover span { font-weight: normal; color: #000000; } .homebox .home_right { /* float: right; */ float:left; background-color: #fff; width: -moz-calc(100% - 285px); width: -webkit-calc(100% - 285px); width: calc(100% - 285px); } .homebox .home_right .faq_banner { width:100%; margin-bottom: 20px; } .homebox .home_right .faq_banner img { width:100%; } .homebox .home_txt { padding: 40px 45px; color: #333333; font-size: 16px; line-height: 1.8; } .home-faq { margin-top: 30px; } .home-faq ul li { -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; border-bottom: #ffffff solid 1px; margin-bottom: 10px; } .home-faq ul li:last-child { margin-bottom: 0; } .home-faq ul li.on { /* border-left: #dbdbdb solid 1px; border-right: #dbdbdb solid 1px; border-bottom: #dbdbdb solid 1px;*/ } .home-faq ul li .crosshead { position: relative; padding-left: 20px; padding-right: 70px; padding-top: 16px; padding-bottom: 16px; line-height: 1.5; box-sizing: border-box; color: #444444; font-size: 18px; border: #ffffff solid 1px; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; background: #f8f8f8; cursor: pointer; } /* .home-faq ul li.on .crosshead { color: #000000; border: #000000 solid 1px; } */ .home-faq ul li .ic { position: absolute; top: 0; right: 0; width: 60px; height: 100%; background: url(./images/img141.png) top 25px center no-repeat; background-size: 20px 10px; } .home-faq ul li.on .ic { background: url(./images/img142.png) top 25px center no-repeat; background-size: 20px 10px; } .home-faq ul li .text { display: none; padding-top: 20px; padding-bottom: 25px; padding-left: 20px; padding-right: 20px; color: #777777; font-size: 16px; line-height: 1.8; } @media only screen and (max-width: 1280px) { .homebox .tit { font-size: 24px; } } @media only screen and (max-width: 1199px) { .homebox { padding-bottom: 60px; } .homebox .home_left { float: none; width: 100%; display: none; } .homebox .home_right { float: none; width: 100%; } .homebox .home_txt { padding: 35px 25px; } } @media only screen and (max-width: 768px) { .home-faq ul li .crosshead { padding-top: 12px; padding-bottom: 12px; padding-right: 60px; } .home-faq ul li .ic { width: 50px; height: 100%; background: url(./images/img141.png) top 20px center no-repeat; background-size: 16px 8px; } .home-faq ul li.on .ic { background: url(./images/img142.png) top 20px center no-repeat; background-size: 16px 8px; } .homebox .home_txt { padding: 30px 0px; } } @media only screen and (max-width: 540px) { .homebox { padding-bottom: 50px; } .homebox .tit { font-size: 22px; padding-bottom: 15px; } } /* add by river */ .form_input_danger { border: 1px solid #ccc; } .check_address_list { display: flex; flex-wrap: wrap; justify-content: space-between; } .check_address_item { width: 49%; box-sizing: border-box; padding: 20px; /* border: 1px dashed #dedede; */ margin-bottom: 20px; } .check_address_item_on { /* border: 1px solid #000000; */ } .check_address_item .btn_select { border: 1px solid #000000; color: #000000; padding: 8px 20px; text-align: center; margin-top: 10px; cursor: pointer; width: 100px; } .check_address_item .btn_select_gray { color: #ccc; border: 1px solid #eeeeee; } .formli select.text { border: 1px solid #dadada; padding: 20px; font-size: 16px; width: 100%; box-sizing: border-box; color: #000000; position: relative; -o-transition: all .4s; -ms-transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; transition: all .4s; } .formli .text:focus { border-color: #000000; } @media only screen and (max-width: 768px) { .check_address_item { width: 100%; } } /** member comment */ .member_comment_right { width: 100%; font-size: 16px; } .member_comment_right .comment_item { display: flex; margin-top: 20px; margin-bottom: 20px; } .member_comment_right .comment_left_t { margin-right: 10px; width: 120px; } .member_comment_right .comment_right_con { width: 100%; } .member_comment_right .comment_textarea { border: 1px solid #000; width: 100%; height: 60px; font-size: 14px; } .member_comment_right .comment_btn_con { margin-top: 30px; margin-left: 120px; } .member_comment_right input[type="radio"] { appearance: button; -moz-appearance: button; /* Firefox */ -webkit-appearance: button; /* Safari and Chrome */ } .member_comment_right .comment_score_label { margin-right: 20px; } .member_comment_right image { vertical-align: middle; } .member_comment_right .comment_btn { text-align: center; min-width: 200px; max-width: 200px; line-height: 50px; border-radius: 30px; background: #000000; font-size: 16px; color: #FFFFFF; box-sizing: border-box; padding: 0 20px; text-transform: uppercase; -o-transition: all .4s; -ms-transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; transition: all .4s; cursor: pointer; } .member_comment_right .comment_btn:hover { background: #ffab8d; } .feedback_overlay { transition: opacity .3s ease; position: fixed; top: 0; right: 0; bottom: 0; height: 100%; width: 100%; z-index: 100; background-color: rgba(0,0,0,.5); pointer-events: none; display: none; } .feedbackBox { position: fixed; bottom: 20%; left: 30%; max-width: 40%; width: 40%; z-index: 111300; background-color: #fff; display: none; } .feedbackBox .feedbackBoxInner { padding: 0 20px 20px 20px; } .feedbackBox .feedbackHeader { height: 80px; line-height: 80px; position: relative; border-bottom: 1px solid #000; } .feedbackBox .feedbackHeader .title { text-align: center; font-size: 18px; font-weight: bold; } .feedbackBox .closeIcon { position: absolute; right: 0px; top: 20px; width: 36px; height: 36px; line-height: 36px; text-align: center; cursor: pointer; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; background-color: #fff; } .feedbackBox .feedbackBoxCon { padding: 10px 30px 30px 30px; } .feedbackBoxCon .sp { color: #666666; font-size: 14px; height: 32px; line-height: 32px; } .feedbackBoxCon .inputli input { border: 1px solid #000; font-size: 14px; height: 36px; line-height: 36px; width: 100%; } .feedbackBoxCon .inputli textarea { border: 1px solid #000; font-size: 14px; height: 120px; line-height: 26px; } .feedbackBoxCon .feedback_submit { text-align: center; } .feedbackBoxCon .btn_feedback_submit { color: #fff; background-color: #000000; text-align: center; height: 48px; line-height: 48px; width: 160px; font-size: 16px; font-weight: bold; margin-top: 10px; cursor: pointer; } /*20210928*/ .home_contact { margin-top: 50px; } .home_contact form { float: left; max-width: 640px; /*width: 100%;*/ width: 70%; margin: auto; } .home_contact .formli { margin-bottom: 25px; } .home_contact .formli:last-child { margin-bottom: 0; } .home_contact .formli .sp { color: #777777; font-size: 16px; margin-bottom: 8px; } .home_contact .formli .must { display: inline-block; color: #ff0000; } .home_contact .formli .inputli { border: #dadada solid 1px; box-sizing: border-box; padding: 0 15px; border-radius: 5px; } .home_contact .formli .textareali { border: #dadada solid 1px; box-sizing: border-box; padding: 10px 15px; border-radius: 5px; } .home_contact .formli .selectli { border: #dadada solid 1px; box-sizing: border-box; border-radius: 5px; } .home_contact .formli input { width: 100%; color: #202020; font-size: 16px; line-height: 44px; background: none; border: none; outline: none; } .home_contact .formli textarea { color: #202020; font-size: 16px; line-height: 1.7; background: none; border: none; outline: none; padding: 0; width: 100%; height: 100px; } .home_contact .formli .selectli select { width: 100%; border: none; outline: none; line-height: 44px; height: 44px; color: #202020; font-size: 16px; padding-left: 15px; padding-right: 30px; background: url(./images/img96.png) center right 15px no-repeat; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; appearance: none; -moz-appearance: none; -webkit-appearance: none; } .home_contact .formbtn { box-sizing: border-box; border-radius: 5px; background: #000000; text-align: center; margin-top: 40px; } .home_contact .formbtn input { color: #FFFFFF; font-size: 18px; line-height: 50px; background: none; border: none; outline: none; } .home_contact .infor { float: left; max-width: 25%; margin-left: 5%; } .home_contact .infor ul li { margin-bottom: 20px; } .home_contact .infor .t1 { color: #333333; font-size: 20px; margin-bottom: 10px; } .home_contact .infor .t2 { color: #333333; font-size: 16px; } @media only screen and (max-width: 991px) { .home_contact { margin-top: 40px; } .home_contact .formli input { line-height: 40px; } .home_contact .formli .selectli select { height: 40px; line-height: 40px; } .home_contact .formbtn input { line-height: 44px; } .home_contact form { float: none; width: 100%; margin-bottom: 40px; } .home_contact .infor { float: none; max-width: 640px; width: 100%; margin: auto; } } @media only screen and (max-width: 576px) { .home_contact { margin-top: 30px; } .home_contact .infor .t1 { font-size: 18px; } } /*首页*/ .trending-product .swiper-container-autoheight .swiper-wrapper, .now-section .swiper-container-autoheight .swiper-wrapper { -webkit-align-items: stretch; align-items: stretch; } .trending-product .proli, .now-section .proli { position: relative; height: 100%; } .trending-product .proli a, .now-section .proli a { height: 100%; /* display: flex; */ width: 100%; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-content: flex-start; align-items: stretch; position: relative; box-sizing: border-box; } .trending-product .proli .txtbox { padding: 20px 0 0 0; /*2022/7/1*/ text-align: left; /*2022/7/1*/ } .now-section .proli .txtbox { padding-bottom: 0; } .trending-product .showbtn, .now-section .showbtn { /*position: absolute; bottom: 20px; left: 0; right: 0; margin: auto;*/ } .brands-section .box ul { display: flex; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch; } .brands-section .box ul li { position: relative; } .brands-section .box ul li .txtbox { /*padding-bottom: 80px;*/ /*2022/7/1*/ text-align: left !important; /*2022/7/1*/ } .brands-section .showbtn { /* position: absolute; bottom: 30px; left: 0; right: 0; margin: auto;*//*2022/7/1*/ text-align: left !important; /*2022/7/1*/ } @media only screen and (max-width: 1024px) { /*.trending-product .proli .txtbox{ padding-bottom: 65px; } .brands-section .box ul li .txtbox{ padding-bottom: 75px; }*/ } /*summer shop*/ .summer .box1 ul { /* display: flex; */ flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch; } .summer .box1 ul li .proli { position: relative; height: 100%; } .summer .box1 ul li .proli a { height: 100%; } .summer .box1 ul li .txtbox { padding-bottom: 60px; } .summer .box1 .showbtn { position: absolute; bottom: 20px; left: 0; right: 0; margin: auto; } /*Cosmetics*/ .goods_list { display: flex; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch; } .goods_list li .proli { position: relative; height: 100%; } .goods_list li .proli:hover .showbtn { opacity:.8; } .goods_list li .proli a { /* height: 100%; */ } .goods_list li .txtbox { padding: 20px 0 20px 0; text-align: left; } .goods_list .showbtn { /* display: none; */ opacity: 0; position: absolute; /* 2022.2.28 */ /* bottom: 20px; left: 0; right: 0; */ /* left: 50%; top: 35%; transform: translate(-50%,-50%); */ /* text-align: left; */ margin: auto; top: 35%; left: 50%; transform: translate(-50%, -50%); } /* .goods_list .showbtn:hover { } */ .goods_list .showbtn span { padding: 0 25px; line-height: 45px; height: 45px; border-radius: 0!important; } @media only screen and (max-width: 1024px) { .goods_list li .txtbox { padding-bottom: 65px; } } .set-product ul { display: flex; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch; } .set-product ul li .proli { position: relative; height: 100%; } .set-product ul li .proli a { height: 100%; } .set-product ul li .txtbox { padding-bottom: 45px; } .set-product .showbtn { position: absolute; bottom: 20px; left: 0; right: 0; margin: auto; } .search-popup .trending-box .swiper-wrapper { -webkit-align-items: stretch; align-items: stretch; } .search-popup .trending-box a { position: relative; height: 100%; } .search-popup .trending-box .txtbox { padding-bottom: 36px; } .search-popup .trending-box .showbtn { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; } .beauty-box .rightbox .swiper-wrapper { -webkit-align-items: stretch; align-items: stretch; } .beauty-box .rightbox .proli { position: relative; height: 100%; } .beauty-box .rightbox .proli a { height: 100%; } .beauty-box .rightbox .swbox .proli .txtbox { padding-bottom: 50px; } .beauty-box .rightbox .showbtn { position: absolute; bottom: 10px; left: 0; right: 0; margin: auto; } .hot-sell .box ul { display: flex; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch; } .hot-sell .box ul li .proli { position: relative; height: 100%; } .hot-sell .box ul li .proli a { height: 100%; } .hot-sell .box ul li .txtbox { padding-bottom: 65px; } .hot-sell .box .showbtn { position: absolute; bottom: 20px; left: 0; right: 0; margin: auto; } /*20211008*/ @media only screen and (max-width: 501px) { /*index*/ .brands-section .box ul li { float: none; width: 100%; margin-right: 0; margin-bottom: 10px; } /*sale/new*/ .product-details .other-bought .box>ul, .connew .box>ul { display: none; } .m-bought { display: block; } /*summer shop*/ .summer .box1 ul li { float: none; width: 100%; margin-right: 0; margin-bottom: 30px; } .summer .box2 ul li { float: none; width: 100%; margin-right: 0; margin-bottom: 30px; } .essential .box ul li { float: none; width: 100%; margin-right: 0; margin-bottom: 30px; } /*new*/ .favourites .box ul li { width: 100%; margin-right: 0; margin-bottom: 30px; } .set-product ul li { width: 100%; margin-right: 0; margin-bottom: 30px; } /*product*/ .product .rightbox .listbox ul.goods_list li { width: 100%; margin-right: 0; margin-bottom: 30px; } /*blog*/ .article-sharing .list-box .item { width: 100%; } .our-editors .item { width: 100%; } /*hot sell*/ .hot-sell .box ul li { width: 100%; margin-right: 0 !important; margin-bottom: 20px; } } /*20211009*/ .best-match .swiper-wrapper { -webkit-align-items: stretch; align-items: stretch; } .best-match .swiper-container .proli { position: relative; height: 100%; } .best-match .swiper-container .proli a { height: 100%; } .best-match .swiper-container .proli .txtbox { padding-bottom: 70px; } .best-match .swiper-container .proli .showbtn { position: absolute; bottom: 20px; left: 0; right: 0; margin: auto; } /*20211011*/ .brands .nav-1 { background: #FFFFFF; margin-top: 0; margin-bottom: 30px; } .brands .nav-1.act { position: fixed; top: 100px; left: 0; right: 0; z-index: 10; width: 100%; margin: auto; background: #FFFFFF; border-bottom: #d9d9d9 solid 1px; } .brands .nav-1 .conwidth { display: flex; flex-wrap: wrap; padding-top: 40px; } .brands .nav-3 li { margin-top: 0; margin-bottom: 0; } .brands .nav-3 { margin-top: 0px; padding: 0; } .brands .nav-3 li .name { display: block; padding-top: 20px; } .brands .nav-3 li { display: block; } @media only screen and (max-width: 1199px) { .brands .nav-1.act { top: 48px; } } @media only screen and (max-width: 480px) { .brands .nav-1 .conwidth { padding-top: 20px; } } @media only screen and (min-width: 992px) { .trending-product .swiper-slide { max-width: 332px; overflow: hidden; } } @media only screen and (min-width: 1199px) { .search-popup .trending-box .swiper-slide { max-width: 180px; overflow: hidden; } } @media only screen and (max-width: 991px) { /*20220308*/ .i-banner .box { width: 80%; text-align: left; padding-left: 5%; box-sizing: border-box; } .i-banner .showbtn { text-align: left; } /*.i-banner{ left: 0; top: 0; transform: none; width: 100%; height: 100%; } .i-banner .box .t1, .i-banner .box .t2{ display: none; } .i-banner .showbtn span, .i-banner .showbtn a{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; padding: 0; }*/ } /*20211203*/ .collect_unlogin_box { position: absolute; right: 0; top: 10px; width: 100%; padding-bottom: 15px; z-index: 2; text-align: right; font-size: 0; } .collect_unlogin_box .icon { position: relative; z-index: 1; display: inline-block; margin-right: 10px; text-align: center; width: 40px; height: 40px; background: url(./images/img40.svg) center no-repeat; border-radius: 50%; overflow: hidden; -webkit-transition: all 0.6s ease; cursor: pointer; transition: all 0.6s ease; /* display: none; */ } .collect_unlogin_box .icon:hover { background: url(./images/img41a.svg) center no-repeat; } .collect_unlogin_box .icon.on { background: url(./images/img41b.svg) center no-repeat; } .popup_up { position: absolute; right: 5px; top: 50px; visibility: hidden; background-color: #fff; justify-content: space-between; border-radius: 4px; border-width: 1px; border-style: solid; border-color: #333; height: auto; padding: 5px 0px 5px 5px; box-shadow: 0 5px 5px 0 rgba(0,0,0,0.5); z-index: 15; } .popup_up.show { display: flex; visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; } @keyframes fadeIn { 0% { opacity:0 } 100% { opacity:1 }; } @-webkit-keyframes fadeIn { 0% { opacity:0 } 100% { opacity:1 }; } .popup_up .text { display: flex; align-items: center; flex-wrap: wrap; font-size: 14px; line-height: 20px; letter-spacing: .2px; color: #333; font-weight: 400; text-align: left; color: #333; font-weight: 700; padding: 10px; word-break: break-word; } .popup_up .text a { display: inline-block; width: auto; height: auto; margin-right: 5px; color: #333; text-decoration: underline; } .popup_close_button { display: flex; align-items: center; margin-right: 8px; width: 30px; } .popup_close_button span { width: 24px; height: 24px; line-height: 24px; border-radius: 12px; overflow: hidden; background: #ccc; text-align: center; cursor: pointer; } .popup_close_button span img { max-width: 45%; } .popup_close_button:after { position: absolute; top: -6px; width: 10px; height: 10px; background: #fff; content: ""; transform: rotate(45deg); left: 72px; border: 1px solid #000; border-right-color: #fff; border-bottom-color: #fff; } .popup_up.show .popup_close_button:after { right: 18px; left: auto; } /* 2022-03-02 增加PRE ORDER */ .ico_per_order { width: 113px; height: 35px; position: absolute; left: 0; top: 0; z-index: 10000; text-align: center; line-height: 35px; font-weight: bold; color: #fff; background: url(./images/bg_per_order.png) no-repeat; background-size: 100% 100%; } /* 2022-04-13修复品牌页面定位问题 */ .brands .nav-3 li:last-child { min-height: 360px; } @media only screen and (max-width: 768px) { .brands .nav-3 li:last-child { min-height: 300px; } } @media only screen and (max-width: 540px) { .brands .nav-3 li:last-child { min-height: 200px; } } /* 2022-05-25 新增板块内容 */ /*.header .head-top{ background: #0d3e66; } .header.on .logo a{ line-height: 120px; } .header .nav{ border-top: none; border-bottom: none; } .header .nav .conwidth>ul{ white-space: nowrap; } .header .nav .conwidth>ul>li{ float: none; display: inline-block; margin-right: 10px; height: 120px; line-height: 120px; } .header .nav .conwidth>ul>li:last-child{ margin-right: 0; } .header .nav .conwidth>ul>li>a{ color: #ffffff; } .header .nav .conwidth>ul>li:hover>a, .header .nav .conwidth>ul>li.on>a{ background: #FFFFFF; color: #0d3e66; } .header .navcell{ top: 120px; } .header.on .navcell{ top: 120px; } .header .navcell .imglist ul li .tit{ line-height: 1; } .header.on .icongroup ul li{ line-height: 120px; } .header .icongroup ul li a{ color: #FFFFFF; } .brands .nav-1.act{ top: 120px; } .brands .nav-1 .conwidth{ padding-top: 15px; padding-bottom: 5px; } @media only screen and (max-width: 1199px){ .brands .nav-1.act{ top: 48px; } .m-header .logo img{ max-height: 40px; } }*/ .comh1 { /*font-family: arial;*/ color: #0d3e66; font-size: 40px; font-weight: bold; } .jcmall_part1 .comh1 { margin-bottom: 20px; } .jcmall_part2 .comh1, .jcmall_part3 .comh1 { text-transform: uppercase; text-align: center; } .comp { /*font-family:arial;*/ color: #0d3e66; font-size: 14px; line-height: 2; } .jcmall_part1 { position: relative; width: 100%; } .jcmall_part1 .img { width: 100%; overflow: hidden; } .jcmall_part1 .img img { width: 100%; } .om2 { display: none; } .jcmall_part1 .box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } .jcmall_part1 .box .txt { width: 50%; } .jcmall_part2 { padding-top: 90px; } .jcmall_part2 .box { margin-top: 7.2%; } .jcmall_part2 .box ul { display: flex; align-items: stretch; flex-wrap: wrap; } .jcmall_part2 .box>ul>li { position: relative; float: left; width: -webkit-calc((100% - 45px) / 4); width: -moz-calc((100% - 45px) / 4); width: calc((100% - 45px) / 4); margin-right: 15px; margin-bottom: 60px; box-shadow: 0px 0px 10px rgba(0,9,17,0.18); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; overflow: hidden; display: flex; flex-wrap: wrap; align-content: flex-end; } .jcmall_part2 .box>ul>li:nth-child(4n) { margin-right: 0; } .jcmall_part2 .box>ul>li:hover { transform: translateY(-20px); } .jcmall_part2 .box>ul>li>a { display: block; width: 100%; } .jcmall_part2 .box ul li .img { width: 100%; overflow: hidden; text-align: center; } .jcmall_part2 .box ul li .img img { max-width: 100%; } .jcmall_part2 .box ul li .txt { text-align: center; padding: 20px 20px 10px; } .jcmall_part2 .box ul li:hover .txt { opacity: 0; } .jcmall_part2 .box ul li .txt .t1 { color: #0d3e66; font-size: 16px; /*font-family: arial;*/ margin-bottom: 10px; } .jcmall_part2 .box ul li .txt .t2 { color: #0d3e66; font-size: 14px; /*font-family: arial;*/ margin-bottom: 10px; } .jcmall_part2 .box ul li .txt .t3 { font-weight: bold; color: #0d3e66; font-size: 20px;/*font-family: arial;*/ } .jcmall_part2 .box ul li .iconbox { position: absolute; left: 0; bottom: -100%; width: 100%; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .jcmall_part2 .box ul li:hover .iconbox { bottom: 0; } .jcmall_part2 .box ul li .iconbox ul li { float: left; width: 50%; } .jcmall_part2 .box ul li .iconbox ul li:nth-child(odd) { background: #c9d5ea; } .jcmall_part2 .box ul li .iconbox ul li:nth-child(even) { background: #0d3e66; } .jcmall_part2 .box ul li .iconbox ul li a { display: block; width: 100%; height: 120px; text-align: center; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; /*font-family: arial;*/ color: #ffffff; font-size: 14px; } .jcmall_part2 .box ul li .iconbox ul li img { display: block; margin: auto; } .jcmall_part2 .box ul li .iconbox ul li p { display: block; width: 100%; /*font-family: arial;*/ color: #ffffff; font-size: 14px; margin-top: 5px; } .jcmall_part3 { padding-top: 30px; } .jcmall_part3 .box { position: relative; z-index: 1; margin-top: 90px; padding-bottom: 30px; } .jcmall_part3 .box:before { content: ''; position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: 86%; background: #0d3e66; } .jcmall_part3 .box .swiper-container { padding: 0px 120px; } .jcmall_part3 .box .prompt { position: relative; background: #FFFFFF; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; margin-bottom: 20px; height: 100%; } .jcmall_part3 .box .prompt:hover { box-shadow: 0px 14px 10px rgba(0,9,17,0.16); } .jcmall_part3 .box .prompt .img { width: 100%; overflow: hidden; } .jcmall_part3 .box .prompt .img img { width: 100%; } .jcmall_part3 .box .prompt .txt { padding: 20px 20px 30px; box-sizing: border-box; } .jcmall_part3 .box .prompt .txt .t1 { /*font-family: arial;*/ color: #0d3e66; font-size: 14px; margin-bottom: 10px; } .jcmall_part3 .box .prompt .txt .t2 { /*font-family: arial;*/ font-weight: bold; color: #0d3e66; font-size: 20px; margin-bottom: 10px; } .jcmall_part3 .box .prompt .txt .t3 { /*font-family: arial;*/ color: #0d3e66; font-size: 14px; } .jcmall_part3 .box .prompt .more { position: absolute; left: 0; top: 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; background: rgba(13,62,102,0.5); } .jcmall_part3 .box .prompt:hover .more { top: 0; } .jcmall_part3 .box .prompt .more a { width: 170px; height: 46px; line-height: 46px; margin: auto; border: #FFFFFF solid 2px; /*font-family: arial;*/ font-weight: bold; color: #ffffff; font-size: 16px; text-align: center; } .jcmall_part3 .box .btn { margin-top: 20px; text-align: center; } .jcmall_part3 .box .btn a { min-width: 260px; height: 45px; line-height: 45px; margin: auto; box-sizing: border-box; padding: 0px 20px; background: #c9d5ea; /*font-family: arial;*/ color: #0d3e66; font-size: 14px; } .jcmall_part3 .swiper-button-next, .jcmall_part3 .swiper-button-prev { position: absolute; top: 50%; width: 50px; height: 50px; margin-top: -25px; z-index: 10; cursor: pointer; -moz-background-size: 27px 50px; -webkit-background-size: 27px 50px; background-size: 27px 50px; background-position: center; background-repeat: no-repeat; } .jcmall_part3 .swiper-button-next, .jcmall_part3 .swiper-container-rtl .swiper-button-prev { background-image: url(./images/202205/img10.png); right: 70px; left: auto; } .jcmall_part3 .swiper-button-prev, .jcmall_part3 .swiper-container-rtl .swiper-button-next { background-image: url(./images/202205/img9.png); left: 70px; right: auto; } .jcmall_part3 .swiper-button-next:hover, .jcmall_part3 .swiper-container-rtl .swiper-button-prev:hover { background-image: url(./images/202205/img12.png); } .jcmall_part3 .swiper-button-prev:hover, .jcmall_part3 .swiper-container-rtl .swiper-button-next:hover { background-image: url(./images/202205/img11.png); } .jcmall_part4 { padding: 55px 35px; box-sizing: border-box; } .jcmall_part4 .swiper1 { padding-bottom: 50px; } .swiper1 .swiper-pagination-bullet-active { background: #0d3e66; } .swiper1.swiper-container-horizontal>.swiper-pagination-bullets, .swiper1 .swiper-pagination-custom, .swiper1 .swiper-pagination-fraction { bottom: 0; } .swiper1.swiper-container-horizontal>.swiper-pagination-bullets, .swiper1 .swiper-pagination-custom,.service { display: flex; } .service .item:hover .item_tit{ display:block; } .service .item:hover { text-decoration: underline; } .service .item { position: relative; } .service .item .item_tit{ display:none; position: absolute; width:60%; top:48px; height: 38px; background: #FFFFFF; box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.302); border-radius: 19px; left: 50%; transform: translateX(-50%); } .service .item .item_tit .triangle { position: absolute; display: inline-block; height: 0; width: 0; top: -24px ; left: 50%; transform: translateX(-50%); border-top: 12px solid transparent; border-bottom: 12px solid #fff; border-left: 12px solid transparent; border-right: 12px solid transparent; } .service .item .item_tit .tit { display: flex; justify-content: center; align-items: center; height: 100%; font-size: 12px; font-family: Source Han Sans CN-Regular, Source Han Sans CN; font-weight: 400; color: #3D3D3D; line-height: 17px; } .swiper1.swiper-container-horizontal>.swiper-pagination-bullets, .swiper1 .swiper-pagination-custom,.service , .item { flex: 1; height: 48px; margin-left: 2px; background: rgba(0,0,0,0.1); opacity: 1; border-radius:0; text-align: center; line-height: 48px; font-family: Source Han Sans CN-Bold; font-weight: 700; } .swiper1.swiper-container-horizontal>.swiper-pagination-bullets, .swiper1 .swiper-pagination-custom,.service , .item:nth-child(1){ margin-left: 0px; } .jcmall_part4 .blogdiv { position: relative; padding: 22px; background: #FFFFFF; cursor: pointer; } .jcmall_part4 .blogdiv .img { width: 100%; overflow: hidden; } .jcmall_part4 .blogdiv .img img { width: 100%; } .jcmall_part4 .blogdiv .ic { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background: rgba(13,62,102,0.12); display: flex; align-items: center; justify-content: center; opacity: 0; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .jcmall_part4 .blogdiv:hover .ic { opacity: 1; } .jcmall_part4 .popcontent { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); /*z-index: -1; opacity: 0; visibility: hidden;*/ z-index: 99; display: none; } /*.jcmall_part4 .popcontent.on{ z-index: 99; opacity: 1; visibility: visible; }*/ .jcmall_part4 .popcontent .closewrap { position: absolute; right: 30px; top: 20px; z-index: 10; cursor: pointer; } .jcmall_part4 .popcontent .box { position: absolute; left: 50%; top: 50%; max-width: 1000px; max-height: 90vh; overflow-y: auto; width: 90%; margin: auto; transform: translate(-50%, -50%); padding: 30px 30px 30px 20px; box-sizing: border-box; background: #FFFFFF; } .jcmall_part4 .popcontent .swiper2 .swiper-slide { opacity: 0 !important; } .jcmall_part4 .popcontent .swiper2 .swiper-slide-active { opacity: 1 !important; } .jcmall_part4 .popcontent .divdetail .img { float: left; width: 60%; overflow: hidden; } .jcmall_part4 .popcontent .divdetail .img img { width: 100%; } .jcmall_part4 .popcontent .divdetail .txt { float: left; width: 40%; padding-left: 30px; box-sizing: border-box; } .jcmall_part4 .popcontent .divdetail .tit { position: relative; padding-left: 70px; padding-right: 35px; padding-bottom: 25px; border-bottom: #c9d6e9 solid 1px; } .jcmall_part4 .popcontent .divdetail .tit .ic { position: absolute; left: 0; top: 0; width: 60px; } .jcmall_part4 .popcontent .divdetail .tit .ic img { max-width: 100%; } .jcmall_part4 .popcontent .divdetail .tit .t1 { /*font-family: arial;*/ font-weight: bold; color: #0d3e66; font-size: 16px; padding-top: 8px; margin-bottom: 8px; } .jcmall_part4 .popcontent .divdetail .tit .t2 { /*font-family: arial;*/ color: #888888; font-size: 16px; } .jcmall_part4 .popcontent .divdetail .version { margin-top: 90px; } .jcmall_part4 .popcontent .divdetail .version .t1 { /*font-family: arial;*/ color: #0d3e66; font-size: 16px; margin-bottom: 40px; } .jcmall_part4 .popcontent .divdetail .version .t2 { /*font-family: arial;*/ color: #0d3e66; font-size: 14px; } .jcmall_part4 .popcontent .paginationbox { position: absolute; right: 0; bottom: 10%; width: 40%; padding-left: 30px; box-sizing: border-box; } .jcmall_part4 .popcontent .paginationbox .cont { padding-top: 15px; border-top: #c9d6e9 solid 1px; /*font-family: arial;*/ color: #0d3e66; font-size: 14px; } .jcmall_part4 .popcontent .paginationbox .swiper-pagination { position: static; width: auto; display: inline-block; } .jcmall_part4 .arrowsbox { position: absolute; right: 0; top: 100px; width: 40%; padding-left: 30px; padding-right: 30px; box-sizing: border-box; } .jcmall_part4 .arrowsbox .swiper-button-next, .jcmall_part4 .arrowsbox .swiper-button-prev { position: absolute; top: 0; width: 40px; height: 40px; margin-top: 0; z-index: 10; cursor: pointer; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .jcmall_part4 .arrowsbox .swiper-button-next, .jcmall_part4 .swiper2.swiper-container-rtl .swiper-button-prev { background-image: url(./images/202205/img28.png); right: 0; left: auto; } .jcmall_part4 .arrowsbox .swiper-button-prev, .jcmall_part4 .swiper2.swiper-container-rtl .swiper-button-next { background-image: url(./images/202205/img27.png); left: 30px; right: auto; } .jcmall_part4 .swiper2 .swiper-button-next.swiper-button-disabled { background-image: url(./images/202205/img30.png); opacity: 1; } .jcmall_part4 .swiper2 .swiper-button-prev.swiper-button-disabled { background-image: url(./images/202205/img29.png); opacity: 1; } .jcmall_part5 { padding-top: 50px; padding-bottom: 30px; background: #0d3e66 url(./images/202205/img13.png) top 20px right no-repeat; } .jcmall_part5 .box { max-width: 540px; width: 90%; margin: auto; } .jcmall_part5 .box .img { text-align: center; overflow: hidden; margin-bottom: 15px; } .jcmall_part5 .box .img img { max-width: 66%; } .jcmall_part5 .box .sp { color: #ffffff; font-size: 14px;/*font-family: arial;*/ } .jcmall_part5 .box .sp a { font-weight: bold; color: #FFFFFF; } .jcmall_part5 .box .formbox { width: 100%; overflow: hidden; background: #FFFFFF; margin-top: 10px; margin-bottom: 20px; } .jcmall_part5 .box .formbox .txt { float: left; width: -webkit-calc(100% - 80px); width: -moz-calc(100% - 80px); width: calc(100% - 80px); box-sizing: border-box; padding: 0px 20px; background: none; border: none; outline: none; /*font-family: arial;*/ color: #333333; font-size: 16px; height: 60px; line-height: 60px; } .jcmall_part5 .box .formbox .txt::-webkit-input-placeholder { color: #999999; } .jcmall_part5 .box .formbox .txt::-moz-placeholder { color: #999999; } .jcmall_part5 .box .formbox .txt:-moz-placeholder { color: #999999; } .jcmall_part5 .box .formbox .txt:-ms-input-placeholder { color: #999999; } .jcmall_part5 .box .formbox .btn { float: left; width: 80px; height: 60px; background: #c9d5ea url(./images/202205/img15.png) center no-repeat; background-size: 40% auto; border: none; outline: none; } @media only screen and (max-width: 1440px) { .comh1 { font-size: 36px; } .jcmall_part2 { padding-top: 80px; } .jcmall_part3 .box { margin-top: 80px; } } @media only screen and (max-width: 1280px) { .jcmall_part2 { padding-top: 70px; } .jcmall_part2 .box { margin-top: 70px; } .jcmall_part3 .box { margin-top: 70px; } } @media only screen and (max-width: 1199px) { /*.om2{ display: block; } .om1{ display: none; } .jcmall_part1 .img{ position: relative; } .jcmall_part1 .img:before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.15); }*/ } @media only screen and (max-width: 1024px) { .comh1 { font-size: 32px; } .jcmall_part1 .comh1 { margin-bottom: 15px; } .jcmall_part2 .box { margin-top: 60px; } .jcmall_part2 .box>ul>li { width: -webkit-calc((100% - 30px) / 3); width: -moz-calc((100% - 30px) / 3); width: calc((100% - 30px) / 3); margin-bottom: 50px; } .jcmall_part2 .box>ul>li:nth-child(4n) { margin-right: 15px; } .jcmall_part2 .box>ul>li:nth-child(3n) { margin-right: 0; } .jcmall_part2 .box ul li .iconbox ul li a { height: 100px; } .jcmall_part3 .box { margin-top: 60px; } .jcmall_part3 .box .swiper-container { padding: 0px 50px; } .jcmall_part3 .swiper-button-next, .jcmall_part3 .swiper-container-rtl .swiper-button-prev { right: 0; } .jcmall_part3 .swiper-button-prev, .jcmall_part3 .swiper-container-rtl .swiper-button-next { left: 0; } .jcmall_part3 .swiper-button-next, .jcmall_part3 .swiper-button-prev { -moz-background-size: auto 80%; -webkit-background-size: auto 80%; background-size: auto 80%; background-position: center; background-repeat: no-repeat; } .jcmall_part4 .popcontent .divdetail .img { width: 55%; } .jcmall_part4 .popcontent .divdetail .txt, .jcmall_part4 .arrowsbox, .jcmall_part4 .popcontent .paginationbox { width: 45%; } .jcmall_part4 .popcontent .divdetail .version .t1 { margin-bottom: 25px; } } @media only screen and (max-width: 991px) { .jcmall_part1 .box .txt { width: 100%; } } @media only screen and (max-width: 768px) { .comh1 { font-size: 30px; } .jcmall_part2 { padding-top: 60px; } .jcmall_part2 .box { margin-top: 50px; } .jcmall_part2 .box>ul>li { width: -webkit-calc((100% - 15px) / 2); width: -moz-calc((100% - 15px) / 2); width: calc((100% - 15px) / 2); margin-bottom: 40px; } .jcmall_part2 .box>ul>li:nth-child(4n) { margin-right: 15px; } .jcmall_part2 .box>ul>li:nth-child(3n) { margin-right: 15px; } .jcmall_part2 .box>ul>li:nth-child(2n) { margin-right: 0; } .jcmall_part3 .box { margin-top: 50px; } .jcmall_part3 .box .swiper-container { padding: 0px 40px; } .jcmall_part3 .swiper-button-next, .jcmall_part3 .swiper-button-prev { width: 40px; height: 40px; margin-top: -20px; } .jcmall_part4 { padding: 45px 25px; } .jcmall_part4 .swiper1 { padding-bottom: 40px; } .jcmall_part4 .arrowsbox { top: 90px; } .jcmall_part4 .popcontent .divdetail .tit { padding-bottom: 20px; } .jcmall_part4 .popcontent .divdetail .version { margin-top: 70px; } .jcmall_part4 .popcontent .divdetail .version .t1 { margin-bottom: 10px; } /*.jcmall_part4 .popcontent .divdetail .version .t2{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }*/ .jcmall_part4 .popcontent .paginationbox { bottom: 5px; } .jcmall_part4 .popcontent .paginationbox .cont { padding-top: 10px; } .jcmall_part4 .arrowsbox .swiper-button-next, .jcmall_part4 .arrowsbox .swiper-button-prev { width: 36px; height: 36px; } .jcmall_part5 .box .formbox .txt { height: 54px; line-height: 54px; } .jcmall_part5 .box .formbox .btn { height: 54px; } } @media only screen and (max-width: 640px) { .comh1 { font-size: 28px; } .jcmall_part2 .box ul li .iconbox ul li a { height: 90px; } .jcmall_part3 .box .prompt .txt .t2 { font-size: 18px; } .jcmall_part4 .popcontent .box { padding: 40px 20px 25px 20px; } .jcmall_part4 .popcontent .divdetail .img { width: 100%; } .jcmall_part4 .popcontent .divdetail .txt, .jcmall_part4 .arrowsbox, .jcmall_part4 .popcontent .paginationbox { width: 100%; padding-left: 0px; } .jcmall_part4 .popcontent .divdetail .txt { margin-top: 25px; padding-bottom: 50px; } .jcmall_part4 .popcontent .divdetail .version { margin-top: 20px; } .jcmall_part4 .arrowsbox { top: 50%; margin-top: -45px; } .jcmall_part4 .arrowsbox .swiper-button-prev, .jcmall_part4 .swiper2.swiper-container-rtl .swiper-button-next { left: 0; } .jcmall_part4 .popcontent .closewrap { right: 20px; top: 10px; } } @media only screen and (max-width: 540px) { .comh1 { font-size: 24px; } .jcmall_part2 { padding-top: 50px; } .jcmall_part2 .box { margin-top: 40px; } .jcmall_part2 .box ul { display: block; } .jcmall_part2 .box>ul>li { float: none; width: 100%; margin-right: 0 !important; margin-bottom: 30px; } .jcmall_part2 .box ul li .txt { padding-bottom: 20px; } .jcmall_part2 .box ul li .iconbox ul li a { height: 90px; } .jcmall_part3 { padding-top: 40px; } .jcmall_part3 .box { margin-top: 40px; } .jcmall_part3 .box .swiper-container { padding: 0px 50px; } .jcmall_part3 .swiper-button-next, .jcmall_part3 .swiper-button-prev { -moz-background-size: auto 70%; -webkit-background-size: auto 70%; background-size: auto 70%; background-position: center; background-repeat: no-repeat; } .jcmall_part4 { padding: 30px 20px 40px; } .jcmall_part4 .popcontent .divdetail .tit { padding-left: 60px; padding-bottom: 15px; } .jcmall_part4 .popcontent .divdetail .tit .ic { width: 50px; } .jcmall_part4 .popcontent .divdetail .tit .t1 { padding-top: 4px; margin-bottom: 5px; } .jcmall_part4 .popcontent .divdetail .txt { margin-top: 20px; } .jcmall_part5 .box .formbox .txt { width: -webkit-calc(100% - 70px); width: -moz-calc(100% - 70px); width: calc(100% - 70px); height: 50px; line-height: 50px; font-size: 15px; } .jcmall_part5 .box .formbox .btn { width: 70px; height: 50px; } } /* edit by river 2022-06-08 移动端点击按钮不变色 */ @media only screen and (max-width: 768px) { /* a:hover .showbtn span, .lunbotu .showbtn a:hover { background: #000000; } */ .lunbotu .showbtn a:hover { background: #000000; } } .layer-ext-moon a.layui-layer-btn0 { background-color: #000000; border-color: #000000; } /* add by river 2022-06-01 fix mobile page style */ @media only screen and (max-width: 768px) { .page-list { margin-bottom: 20px; } .page-list li:not(.active) { display: none; } } /* add by river 2022-12-19 footer language switch*/ .footer-language-box{display:flex;align-items:center;font-size:14px;margin-top:20px;} .footer-language-box .h20{height:20px;overflow:hidden;clear:both;} .footer-language-box .nice-select{width:180px;padding:0 10px;height:38px;border:1px solid #999;position:relative;box-shadow:0 0 5px #999;background:#fff url(./images/selct-box-a2.jpg) no-repeat right center;} .footer-language-box .nice-select input{display:block;width:100%;height:38px;line-height:38px;border:0;outline:0;background:none;} .footer-language-box .nice-select ul{width:100%;display:none;position:absolute;left:-1px;top:38px;overflow:hidden;background-color:#fff;max-height:150px;overflow-y: auto;border: 1px solid #999;border-top: 0;box-shadow: 0 3px 5px #999;z-index: 9999;} .footer-language-box .nice-select ul li{float:none;width:100%;height:30px;line-height:30px;overflow: hidden;cursor: pointer;} .footer-language-box .nice-select ul li a{padding:0 10px;display:block;font-size:14px;} .footer-language-box .nice-select ul li.on{background-color:#e0e0e0;} .footer-language-box .img-log{width:28px; height:28px; border-radius: 50%; overflow: hidden; margin-right: 8px;} .footer-language-box .img-log img{width:100%; height:100%; object-fit: cover;} .footer-language-box input{font-size:14px;}