@charset "utf-8"; @font-face{ font-family: 'mbold'; src:'../font/Montserrat-SemiBold.otf' ; } @font-face{ font-family: 'mmedium'; src:'../font/Montserrat-Medium.otf' ; } @font-face{ font-family: 'mregular'; src:'../font/Montserrat-Regular.otf' ; } @font-face{ font-family: 'mlight'; src:'../font/Montserrat-Light.otf' ; } @font-face{ font-family: 'sef'; src:'../font/SourceSerifVariable-Roman.ttf' ; } html, body, div, span, iframe, map, img, a img, samp, hr, h1, h2, h3, h4, h5, h6, b, blockquote, a, address, code, dl, dt, dd, ol, ul, li, form, label, table, tr, td, th{ padding: 0; margin: 0; border: 0; font-weight: normal; font-family: 'mlight', Arial, Helvetica, sans-serif; list-style:none;} html, body { position: relative; height: 100%;} body{ background:#fff; font:normal 12px/22px "mlight"; overflow-x: hidden; } body::-webkit-scrollbar { width:2px;} body::-webkit-scrollbar-track { background: rgba(232, 232, 232, 1);} body::-webkit-scrollbar-thumb { background: #e51d34;} img{ border:0; max-width: 100%; } input,button,a { outline: none;} button { border: none; cursor: pointer;} a{ text-decoration:none; color:#000; } a:hover{ color:red; } .clear { clear:both;} .clearfix { zoom:1;} .clearfix:after { content:''; display:block; height:0; clear:both;} div { box-sizing:border-box;} strong {font-weight: bold;} .dn { display: none;} #screen { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; background: rgba(0,0,0,0.5);} .fcc {display: flex;display: -webkit-flex;justify-content: center;align-items: center;} .fsc {display: flex;display: -webkit-flex;justify-content: flex-start;align-items: center;} /*cookieAlt*/ .cookieAlt { z-index: 30; position: fixed; width: 698px; padding: 58px 40px 72px; background: #ffffff; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 92%; border-radius: 10px; } .cookieAlt img { display: block; margin: 0 auto 30px;} .cookieAlt h2 { text-align: center; line-height: 1; font-weight: bold; font-size:46px; margin-bottom: 35px;} .cookieAlt p { text-align:center; font-size: 18px; color:#333333; margin-bottom: 55px;} .cookieAlt a { max-width: 100%; overflow: hidden; font-size: 16px; display: block; text-align: center; position: relative; width: 345px; line-height: 48px; border-radius: 48px;} .cookieAlt a.upAge { transition: all .3s; margin: 0 auto 22px; color: #ffffff; background: #0779b2;} .cookieAlt a.upAge:hover { background: #e51d34;} .cookieAlt a.downAge { margin: 0 auto; color: #333333; background: #e1e1e1;} .cookieAlt a span { position: relative; z-index: 2;} #agreenCover { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10;} /*通用样式*/ .warning { line-height: 38px; font-size: 14px; color: #999999; background: #000000; text-align: center;} .warning span {display: inline-flex; position: relative;} .warning i,.topTip i { cursor: pointer; display: block; top: 14px; position: absolute; background: url(../images/close.png) center no-repeat; width: 10px; height: 10px; right: -120px;} .topTip { text-align: center; line-height: 38px; background-image: linear-gradient(to right,#74a94a,#0779b2);} .topTip span { color: #ffffff; font-size: 14px; display: inline-flex; position: relative;} .headerCont { max-width: 92%; height: 80px; align-items: center; width: 1536px; margin: 0 auto; display: flex;justify-content: space-between;} .headerRight { flex: 1; display: flex; justify-content: space-between;} .headerTool { align-items: center; display: flex;} .toolEnter ul { display: flex; align-items: center;} .toolEnter li { margin-left: 20px;} .toolEnter img { display: block;} .logo { display: block; margin-right: 10.6vw; width: 175px;} .logo img { display: block; width: 100%;} .nav ul { display: flex;} .nav li { position: relative; margin-right: 34px;} .nav li:last-child { margin-right: 0;} .nav li h2 a{ line-height: 80px; transition: all .4s; font-size: 14px; color: #333333;} .nav li:hover h2 a { color: #0779b2;} .nav li::after { content: ''; transition: all .4s; opacity: 0; z-index: 3; background: url(../images/sj.png) center no-repeat; width: 18px; height: 9px; bottom:0; left: 50%; margin-left: -9px; position: absolute;} .nav li:hover::after { opacity: 1;} .nav li dl { display: none; box-shadow:0 0 15px rgba(0,0,0,0.1); padding: 16px 0; top: 80px; z-index: 2; position: absolute; width: 184px; left: 50%; margin-left: -92px; background: #ffffff; border-radius: 0 0 8px 8px;} .nav li dl dt a { display: block; padding: 8px 8px 8px 32px; position: relative; line-height: 20px; color: #333333; font-size: 14px; transition: all .4s;} .nav li dl dt a::after { content: ''; background: url(../images/navEnter.png) center no-repeat; left: 10px; opacity: 0; top: 50%; transform: translateY(-50%); position: absolute; display: block; opacity: 0; width: 6px; height: 10px; transition: all .4s;} .nav li dl dt a:hover { color: #0779b2;} .nav li dl dt a:hover::after { opacity: 1; left: 15px;} .headerSearch { align-items: center; padding: 0 10px; width: 143px; height: 26px; display: flex; border: 1px solid #f1f1f1;} .headerSearch input,.headerSearch button { box-sizing: border-box; border: none;} .headerSearch input { width: calc(100% - 13px);} .headerSearch input::placeholder { color:#f1f1f1;} .headerSearch button { cursor: pointer; background: url(../images/search.png) center no-repeat; width: 13px; height: 13px; display: block;} .toolEnter li { position: relative; height: 80px; display: flex; align-items: center; justify-content: center;} .toolEnter li::after {content: ''; transition: all .4s; opacity: 0; z-index: 3; background: url(../images/sj.png) center no-repeat; width: 18px; height: 9px; bottom:0; left: 50%; margin-left: -9px; position: absolute;} .toolEnter li:hover::after { opacity: 1;} .toolEnter li a { position: relative;} .toolEnter li a i { display: block; width: 12px; line-height: 12px; background: #b3020c; color: #ffffff; text-align: center;position:absolute; right: -6px; top: -4px; border-radius: 50%; font-size: 10px; font-style: normal;} .carSub { right: -66px; display: none; z-index: 2; width: 290px; border-radius: 10px; padding: 4px 20px 20px; background: #ffffff;box-shadow:0 0 15px rgba(0,0,0,0.1); position: absolute; top: 80px;} .carSub h2 { color: #333333; font-size: 14px; border-bottom: 1px solid #e5e5e5; line-height:24px; padding: 15px 0;} .carSub dt { padding: 20px 0; border-bottom: 1px solid #e5e5e5; display: flex; justify-content: space-between;} .carPic { margin-right: 9px; width: 80px; height: 60px; overflow: hidden; border-radius: 5px;} .carPic img { display: block; width: 100%; height: 100%; object-fit: cover;} .carText { flex: 1;} .carText h3 { font-size: 14px; color: #333333; line-height: 14px; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;} .carText p { font-size: 14px; color: #333333;} .carText p b { color: #d72c2d;} .toolEnter dt span { cursor: pointer;} .carSub span { color: #666666;} .carSub span:hover { color: #d72c2d;} .total { line-height: 25px; padding: 15px 0; text-align: right; color: #666666; font-size: 16px;} .total span { color: #d72c2d;} .carSub a.checkOut { text-align: center; line-height: 38px; display: block; color: #ffffff; background: #0779b2; font-size: 14px; border-radius: 5px;} .toolEnter li:hover .carSub { display: block;} .banner { width: 1536px; max-width: 92%; margin: 0 auto;} .banner img { display: block; width: 100%;} .banner span { background: #ffffff;} .container { width: 1536px; margin: 0 auto; max-width: 92%;} .activeSwiper { margin: 50px 0 40px;} .activeSwiper .swiper {padding: 10px 0;} .activeSwiper .swiper-slide { overflow: hidden; position: relative; padding: 16px; transition: all .4s; text-align: center; border-radius: 5px; height: 168px;} .ticketTitle { line-height: 32px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center;} .ticketTitle span { width: 32px; height: 32px; border-radius: 3px; background: rgba(255,255,255,.3); display: flex; justify-content: center; align-items: center;} .ticketTitle svg { color: #ffffff; display: block; width: 20px;} .ticketTitle svg path,.ticketTitle svg polygon { stroke: #fff;} .ticketTitle p { font-size: 18px; font-weight: bold;color: #ffffff;} .ticketDesc p { text-align: left; color: #ffffff; font-weight: bold; font-size: 16px; line-height: 20px; margin-bottom: 4px;} .ticketDesc span { display: block; text-align: left; color: #ffffff; font-size: 12px; line-height: 16px; margin-bottom: 16px; color: #ffffff;} .activeSwiper .swiper-slide.blueTitcke { background-image: linear-gradient(to right bottom,#3b82f6,#2563eb);} .activeSwiper .swiper-slide.redTicket { background-image: linear-gradient(to right bottom,#ef4444,#dc2626);} .activeSwiper .swiper-slide.yellowTicket { background-image: linear-gradient(to right bottom,#facc15,#eab308);} .activeSwiper .swiper-slide.greenTicket { background-image: linear-gradient(to right bottom,#22c55e,#16a34a);} .activeSwiper .swiper-slide.purpleTicket { background-image: linear-gradient(to right bottom,#a855f7,#9333ea);} .activeSwiper .swiper-slide.orangeTicket { background-image: linear-gradient(to right bottom,#f97316,#ea580c);} .activeSwiper .swiper-slide.indigoTicket { background-image: linear-gradient(to right bottom,#6366f1,#4f46e5);} .activeSwiper .swiper-slide.tealTicket { background-image: linear-gradient(to right bottom,#14b8a6,#0d9488);} .activeSwiper .swiper-slide:before { content: ''; pointer-events: none; background: rgba(255,255,255,.1); width: 80px; height: 80px; position: absolute;right: -40px; top: -40px; border-radius: 50%;} .activeSwiper .swiper-slide::after { content: ''; pointer-events: none; background: rgba(255,255,255,.1); width: 80px; height: 80px; position: absolute;left: -45px; bottom: -45px; border-radius: 50%;} .circleLeft { width: 24px; height: 24px; display: block; position: absolute; border-radius: 50%; background:#ffffff; left: -16px; top: 50%; margin-top: -12px;} .circleRight { width: 24px; height: 24px; display: block; position: absolute; border-radius: 50%; background: #ffffff; right: -16px; top: 50%; margin-top: -12px;} .activeSwiper .getNow { display: flex; justify-content: center; align-items: center; line-height: 36px; color: #000; font-weight: bold; border-radius: 6px; background: #ffffff;} .activeSwiper .reveived {cursor: not-allowed; display: none; justify-content: center; align-items: center; line-height: 36px; border-radius: 6px; color: #ffffff; background: rgb(117,126,137);} .activeSwiper .getNow span { margin-right: 6px; display: flex; align-items: center;} .activeSwiper .getNow span svg { width: 14px; fill:#ffffff;} .activeSwiper .reveived span { margin-right: 6px; display: flex; align-items: center;} .activeSwiper .reveived span svg { width: 14px; display: block;} .activeSwiper .reveived span svg path {stroke: #fff;} .activeSwiper .reveived span svg line,.activeSwiper .reveived span svg circle,.activeSwiper .reveived span svg rect {stroke: #fff;} .activeSwiper .swiper-slide.geted .reveived { display: flex;} .activeSwiper .swiper-slide.geted .getNow { display: none;} .activeSwiper .swiper-slide:hover { box-shadow: 0 0 10px rgba(0,0,0,0.2);} .activeSwiper .swiper-button-prev:after,.activeSwiper .swiper-button-next:after { font-size: 16px; color: #ffffff;} .activeSwiper .swiper-slide i { font-style: normal; position: absolute; right: 10px; top: 10px; display: none; padding: 0 8px; border-radius: 20px; background: rgba(0,0,0,0.5); color: #ffffff; font-size: 12px;} .activeSwiper .swiper-slide.geted i { display: block;} .activeSwiper .swiper-slide .ticketBg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;} .homeTitle { line-height: 1; margin-bottom: 50px; font-size: 46px; font-family: 'sef'; color: #333333;} .newArrivals { margin-bottom: 75px;} .arrivalSwiper img{ display: block; width: 100%;} .arrivalText { position: absolute; bottom: 88px; left: 0; width: 100%; padding: 0 96px;} .arrivalText h2 { font-size: 36px; font-family: 'mbold'; font-weight: bold; color: #444444; line-height: 1; margin-bottom: 20px;} .arrivalText p { font-size: 32px; color: #3c3c3c;} .arrivalBtn { margin-top: 45px; display: flex;} .arrivalBtn a { margin-right: 10px; justify-content: center; transition: all .4s; width: 160px; border-radius: 48px; overflow: hidden; background: #ffffff; display: inline-flex; padding:15px 0; line-height: 18px; font-size: 16px; color: #333333; position: relative;} .arrivalBtn a:nth-child(1) { background: #e51d34; color: #ffffff;} .arrivalBtn a:nth-child(1) span { color: #ffffff;} .arrivalBtn a::after { content: ''; background: #0779b2; transition: all .4s; position: absolute; left: -100%; top: 0; width: 100%; height: 100%;} .arrivalBtn a:nth-child(2):hover::after { left: 0;} .arrivalBtn a span { position: relative; z-index: 2; transition: all .4s; font-size: 16px; color: #333333;} .arrivalBtn a:hover span { color: #ffffff;} .arrivalSwiper .swiper-slide { position: relative; overflow: hidden; border-radius: 10px;} .arrivalSwiper .swiper-slide img { width: 100%; height: 100%; display: block; transition: all .8s;} .arrivalSwiper .swiper-slide:hover img { transform: scale(1.1);} .arrivalSwiper .swiper-button-prev,.arrivalSwiper .swiper-button-next { transition: all .4s; opacity: .5; width: 50px; height: 50px; background: #ffffff; border-radius: 50%;} .arrivalSwiper .swiper-button-prev::after,.arrivalSwiper .swiper-button-next::after { font-size: 16px; font-weight: bold; color: #666;} .arrivalSwiper .swiper-button-prev:hover,.arrivalSwiper .swiper-button-next:hover { opacity: 1;} .hotSwiper .swiper { width: 100%; height: 100%; margin-left: auto; margin-right: auto;} .hotSwiper .swiper-slide { background: #fff;/* Center slide text vertically */ display: flex;} .hotSwiper .swiper-slide a { display: block; width: 100%;} .hotSwiper ul { gap: 20px; flex-wrap: wrap; display: flex;} .hotSwiper li { width: calc((100% - 60px)/4); gap: 20px;} .hotPic { margin-bottom:15px; width: 100%;position: relative; padding-top: 100%; overflow: hidden; border-radius: 10px;} .hotPic img { transition: all .8s; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} .hotText h2 { transition: all .4s; font-weight: bold; font-size: 18px; color: #333333; overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; line-height: 1.2;margin-bottom: 10px;} .hotText p { font-size: 14px; color: #333333; line-height: 1; margin-bottom: 10px;} .star { margin-bottom: 14px; display: flex;} .star img { display: block; margin-right: 5px;} .hotText span { font-weight: bold; font-size: 16px; color: #e51d34;} .hotText .starList { margin-bottom: 14px;} .hotSelling { margin-bottom: 75px;} .hotSwiper .swiper-slide:hover .hotPic img { transform: scale(1.1);} .hotSwiper .swiper-slide:hover h2 { color: #0779b2;} .hotSwiper { position: relative;} .hotSwiper .swiper-button-prev { left: -40px;} .hotSwiper .swiper-button-next { left: auto; right:-40px} .hotSwiper .swiper-button-prev::after,.hotSwiper .swiper-button-next::after { font-size: 16px; font-weight: bold; color: #666;} .promotion { margin-bottom: 70px;} .promotionTop { background: #f4f4f4; border-radius: 10px; overflow: hidden; display: flex;} .promotionImg { width: 50%; overflow: hidden;} .promotionImg img { height: 100%; object-fit: cover; transition: all .8s; display: block; width: 100%;} .promotionImg:hover img { transform: scale(1.1);} .promotionText { width: 50%; padding: 50px 80px;} .promotionText h2 { margin-bottom: 15px; font-size: 36px; color: #444444; font-weight: bold; line-height: 1;} .promotionText p { margin-bottom: 25px; font-size: 32px; color: #3c3c3c;} .promotionText b { display: block; font-size: 16px; color: #3c3c3c; line-height:1.5;} .promotionSwiper { position: relative; margin-top: 32px;} .promotionSwiper .swiper-button-prev { left: -40px;} .promotionSwiper .swiper-button-next { left: auto; right:-40px} .promotionSwiper .swiper-button-prev::after,.promotionSwiper .swiper-button-next::after { font-size: 16px; font-weight: bold; color: #666;} .promotionSwiper .swiper-slide:hover .hotPic img { transform: scale(1.1);} .promotionSwiper .swiper-slide:hover h2 { color: #0779b2;} .vapa .promotionTop { flex-direction: row-reverse;} .blog { margin-bottom: 60px; padding-top: 80px; background-image: linear-gradient(to bottom,#f2f7f4 0%,#ffffff 280px);} .blog ul { flex-wrap: wrap; display: flex;} .blog li { margin-right: 30px; width: calc(25% - 22.5px);} .blog li:nth-child(4n) { margin-right: 0;} .blogImg { height:232px; border-radius: 8px; margin-bottom: 25px; overflow: hidden;} .blogImg img { display: block; width: 100%; height: 100%; object-fit: cover; transition: all .8s;} .blog li:hover .blogImg img { transform: scale(1.1);} .blogText h2 { transition: all .4s; margin-bottom: 15px; font-size: 18px; font-weight: bold; color: #333333; line-height: 28px; height: 56px; overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} .blogText span { margin-bottom: 15px; display: block; font-size: 14px; color: #666666; line-height: 1;} .blogText p { word-break: break-all; margin-bottom: 35px; overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp:3;-webkit-box-orient: vertical; font-size: 14px; height: 63px; color: #999999; line-height: 1.5;} .blogText a { transition: all .4s; display: inline-flex; align-items: center; font-size: 12px; color: #999999; text-transform: uppercase;} .blogText a i { margin-left: 24px; display: block; background: url(../images/moreArr.png) center no-repeat; width: 5px; height: 9px;} .blogText a:hover { letter-spacing: 1px;} .blog li:hover .blogText h2 { color: #0779b2;} .homeVide { height: 580px; border-radius: 10px; overflow: hidden; position: relative; margin: 60px auto 70px;} .homeVide video,.homeVide img{ height: 100%; object-fit: cover; display: block; width: 100%;} .homeVide span { transition: all .8s; cursor: pointer; display: block; background: url(../images/play.png) center no-repeat; width: 55px; height: 55px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2;} .homeVide span:hover { transform: translate(-50%,-50%) rotate(360deg);} .serviceTip { margin-bottom: 55px;} .serviceTip ul { display: flex; justify-content: space-between;} .serviceTip li { display: flex;} .serviceTip li img { margin-right: 20px; display: block;} .serviceTip li h2 { font-weight: bold; font-size: 24px; margin-bottom: 10px;} .serviceTip li p { font-size: 16px; color: #333333; line-height: 22px; max-width: 230px;} .serviceTip li:nth-child(1) h2 { color: #e51d34;} .serviceTip li:nth-child(2) h2 { color: #005b2c;} .serviceTip li:nth-child(3) h2 { color: #0779b2;} .serviceTip li:nth-child(4) h2 { color: #e5c21d;} .footer {padding-top: 80px; background:url(../images/footBg.jpg) center bottom no-repeat #191919;} .footerTopLeft { width: 475px;} .mission { margin-bottom: 75px;} .mission h2 { line-height: 1; margin-bottom: 15px; font-size: 22px; color: #ffffff;} .mission p { font-size: 14px; line-height:1.5; color: rgba(255,255,255,.3);} .footerTop { display: flex;justify-content: space-between;} .footContact h2 { line-height: 1; margin-bottom: 20px; font-size: 18px; color: #ffffff;} .contactLink { display: flex; align-items: center;} .contactLink a { margin-right: 8px;} .footerLink ul { display: flex;} .footerLink li { margin-right: 110px;} .footerLink li:last-child { margin-right: 0;} .footerLink h2 { white-space: nowrap; line-height: 1; margin-bottom: 25px;} .footerLink h2 a { font-size: 18px; color: #ffffff;} .footerLink p { white-space: nowrap; line-height: 1; margin-bottom: 20px; font-size: 14px; transition: all .4s;} .footerLink p:last-child { margin-bottom: 0;} .footerLink a { color: #666666; transition: all .4s;} .footerLink p:hover { transform: translateX(5px);} .footerLink p:hover a { color: #ffffff;} .letterPay { border-top: 1px solid #4f4f4f; border-bottom: 1px solid #4f4f4f; margin-top: 75px; padding: 60px 0; display: flex; justify-content: space-between;} .newLetter h2 { line-height: 1; font-size: 18px; margin-bottom: 20px; color: #ffffff;} .newLetter p { font-size: 14px; color: rgba(255,255,255,.3); line-height: 1; margin-bottom: 25px;} .mailForm { display: flex; justify-content: space-between; width: 240px; height: 36px; align-items: center; background: #ffffff; padding: 0 20px; border-radius: 5px;} .mailForm button { background: url(../images/footMail.png) center no-repeat; border: none; display: block; width: 20px; height: 14px;cursor: pointer;} .mailForm input { flex: 1; width: calc(100% - 25px); box-sizing: border-box; border: none;} .payType p { color: #333; opacity: .3; font-size: 14px; line-height: 1; margin-bottom: 25px;} .payList { display: flex; align-items: end;} .payList a { margin-left: 10px;} .payList svg { width: auto; height: 40px;} .footerNotice { font-size: 14px; padding: 55px 0; line-height: 1.5; color: rgba(255,255,255,.5);} .inBanner { height: 250px; object-fit: cover;} .inBanner img { height: 100%; width: 100%; display: block; object-fit: cover;} /*about*/ .aboutPage { padding: 80px 0;} .aboutCont { border-top: 4px solid #2866b1; background-image: linear-gradient(to bottom,#b8d9e9 0%,#ffffff 50%); padding: 125px 0 70px;} .aboutCont h2 { margin-bottom: 32px; text-align: center; font-size: 32px; color: #333333;} .aboutCont h2 a { color: #1558aa;} .aboutCont p { width: 755px; max-width: 92%; margin: 0 auto 20px; font-size: 18px; line-height: 28px; text-align: center;} .aboutCont p:last-child { margin-bottom: 0;} /*contact*/ .contactDesc {text-align: center;} .contactDesc h2 { font-size: 34px; color: #333333; line-height: 1; margin-bottom: 25px;} .contactPage { padding: 80px 0;} .contactDesc { background: #f2f2f2; border-radius: 10px; padding: 65px 0 55px;} .contactDesc p { line-height: 26px; font-size: 14px; color:#666666; width: 860px; margin: 0 auto; max-width: 100%;} .formTitle { margin: 45px 0 40px; text-align: center; font-size: 14px; color: #666666;} .formTitle a { color: #e51d34; position: relative;} .formTitle a img { position: absolute; top: -14px; right: -4px; display: block;} .contactForm { border: 1px solid #e5e5e5; border-radius: 10px; padding: 55px 40px;} .contactForm li { margin-bottom: 40px;} .contactForm h3 { font-size: 14px; color: #333333; line-height: 1; margin-bottom: 15px;} .contactForm textarea { box-sizing: border-box; width: 100%; height: 100px; border: 1px solid #e5e5e5; border-radius:3px; outline: none;resize: none; font-family: 'mlight'; padding: 10px; font-size: 14px; color: #333;} .formGroup { margin-bottom: 30px; display: flex;} .formGroup:last-child { margin-bottom: 0;} .groupSlide { width: 300px; margin-right: 60px;} .groupSlide input,.groupSlide select { font-size: 14px; color: #333; padding-left: 10px; width: 100%; height: 38px; border-radius: 3px; box-sizing: border-box; border: 1px solid #e5e5e5;} .groupSlide h4 { line-height: 1; margin-bottom: 15px; font-size: 14px; color: #666666;} .groupSlide:last-child { margin-right: 0;} .formBar { border-top: 1px solid #e5e5e5; padding-top: 30px;} .possible { display: flex; align-items: center;} .labelCont span { margin-right: 7px; display: block; background: url(../images/contactIcon3.png) center no-repeat; width: 14px; height: 14px;} .labelCont input[type="radio"]:checked+span { background:url(../images/contactIcon2.png) center no-repeat} .labelCont { display: flex; align-items: center;} .labelCont label { color:#666666; font-size: 14px; cursor: pointer; margin-right: 14px; display: flex; align-items: center; position: relative;} .labelCont label input { cursor: pointer; width: 100%; position: absolute; left: 0; top: 0; height: 100%; opacity: 0;} .mailInpt { max-width: calc(100% - 117px);} .possible p { font-size: 14px; color: #666666; margin-right: 55px;} .uploadBar { border: 1px solid #e5e5e5; width: 137px; height: 137px; overflow: hidden;} .uploadBar img,#preview{ width: 100%!important; margin: 0!important; height: 100%!important; object-fit: cover!important; object-position: center!important;} .uploadNotice { font-size: 14px; opacity: .5; color: #333333; line-height: 1; margin: 12px 0 38px;} .subNotice { border-top: 1px solid #e5e5e5; font-size: 14px; color: #333333; opacity: .8; padding-top: 15px; padding-bottom: 60px;} .contactForm button { display: block; color: #ffffff; font-size: 14px; width: 122px; height: 38px; border-radius: 14px; border-radius:3px; background: #e51d34; cursor: pointer; border: none; margin: 0 auto; transition: all .4s;} .contactForm button:hover { background: #0779b2;} .newsPage li { margin-bottom: 35px;} .fpage { display: flex; justify-content: center;} .fpage a { display: flex; justify-content: center; align-items: center; width: 38px; height: 38px; transition: all .4s; border: 1px solid #e5e5e5; margin: 0 5px; border-radius: 3px; font-size: 15px; color: #999999;} .fpage a:hover,.fpage a.cur { background: #b5020c; border: 1px solid #b5020c; color: #ffffff;} .fpage a.prevPage { background: url(../images/prevPage.png) center no-repeat;} .fpage a.nextPage { background: url(../images/nextPage.png) center no-repeat;} .fpage a.prevPage:hover { background: url(../images/prevPageon.png) center no-repeat #b5020c;} .fpage a.nextPage:hover { background: url(../images/nextPageon.png) center no-repeat #b5020c;} .newsPage { padding-bottom: 80px;} .newsPage .fpage { padding-top: 60px; border-top: 1px solid #e5e5e5; } .newsPage.blog { background: none;} /**/ .location { background: #f8f8f8;} .locationCont { overflow-x: auto; white-space: nowrap; font-size: 14px; line-height: 52px;} .locationCont::-webkit-scrollbar { display: none;} .locationCont a { transition: all .4s; color: #666666; font-size: 14px;} .locationCont a:nth-child(1) {background: url(../images/home.png) left center no-repeat; padding-left: 17px;} .locationCont span { margin: 0 10px; color: #a5a5a5;} .locationCont b { color: #333333;} .locationCont a:hover { color:#0779b2 ;} .articleCont { padding: 75px 0;} .articleTitle { margin-bottom: 50px;} .articleTitle h2 { margin-bottom: 20px; font-size: 46px; font-weight: bold; color: #333333; line-height: 54px;} .articleTitle span { font-size: 18px; color: #333333;} .articleDesc p { margin-bottom: 25px; font-size: 16px; color: #666666; line-height: 26px;} .articleDesc h2 { margin-bottom: 30px; font-size: 32px; font-weight: bold; color: #333333; line-height: 42px;} .articleDesc h3 { font-size: 24px; color: #333333; font-weight: bold; line-height: 34px; margin-bottom: 15px;} .articlePage { padding-top: 55px; margin-top: 50px; border-top: 1px solid #e5e5e5;} .articlePage p { line-height: 28px; margin-bottom: 20px; font-size: 18px; color: #666666;} .articlePage p a { color: #666; transition: all .4s;} .articlePage p a:hover { color: #0779b2;} .articlePage p:last-child { margin-bottom: 0;} .related { background: #f9f9f9; padding:75px 0;} /*faq*/ .basePage { align-items: start; padding: 80px 0; display: flex; justify-content: space-between;} .baseMenu { margin-right: 60px; width: 330px; border: 1px solid #e8e8e8;} .baseMenu li a { display: block; transition: all .4s; font-size: 16px; line-height: 24px; color: #666666; position: relative; padding: 18px 18px 18px 75px;} .baseMenu li a:before { content: ''; transition: all .4s; background: url(../images/listTag.png) center no-repeat; position: absolute; left: 52px; top: 50%; transform: translateY(-50%); width: 5px; height: 10px;} .baseMenu li a:hover { color: #e51d34;} .baseMenu li a:hover:before { background: url(../images/listTagon.png) center no-repeat;} .baseMenu li.cur a { color: #e51d34;} .baseMenu li.cur { background: #f5f5f5;} .baseMenu li.cur a:before { background: url(../images/listTagon.png) center no-repeat;} .baseTitle { display: flex; align-items: center; justify-content: space-between; font-size: 24px; line-height: 1; padding-bottom: 20px; border-bottom: 4px solid #e51d34;} .baseDesc { flex: 1;} .baseArticle { padding-top: 25px;} .baseArticle li { margin-bottom: 30px;} .baseArticle li h2 { color: #333333; font-weight: bold; font-size: 24px; font-weight: bold; line-height: 34px; margin-bottom: 20px;} .baseArticle li p { font-size: 16px; color:#666666; line-height: 26px;} /**/ .productPage { padding: 60px 0; display: flex; justify-content: space-between;} .productSearch { display: flex; border: 1px solid #f2f2f2; border-radius: 4px; overflow: hidden;} .productSearch button { width: 56px; height: 32px; background: url(../images/searchWhite.png) center no-repeat #b5020c; border: none; cursor: pointer; outline: none; display: block; transition: all .4s;} .productSearch input { text-indent: 10px; width: calc(100% - 56px); flex: 1; box-sizing: border-box; height: 32px; border: none; display: block;} .productSearch button:hover {background: url(../images/searchWhite.png) center no-repeat #0779b2;} .typeList li h2 { font-weight: bold; font-size: 18px; color:#333333; line-height: 1; margin-bottom: 28px;} .typeList li p { margin-bottom: 16px; font-size: 14px; color: #666666; background: url(../images/proIcon4.png) left center no-repeat; line-height: 18px; padding-left: 25px; cursor: pointer;} .typeList li p:last-child { margin-bottom: 0;} .typeList li p.cur { color: #b5020c; background: url(../images/proIcon3.png) left center no-repeat;} .typeList li { border-bottom: 1px solid #cccccc; padding-bottom: 30px; margin-bottom: 30px;} .typeList li:last-child { padding-bottom: 0; cursor: pointer; margin-bottom: 30px; border: none;} .typeList { border-top: 1px solid #cccccc; padding-top: 30px; margin-top: 30px;} .theme-green .back-bar .pointer { border: 4px solid #e51d34; background: #ffffff;} .theme-green .back-bar .selected-bar { background: #e51d34;} .slider-container .back-bar .pointer-label { opacity: 0;} .theme-green .scale span { display: none;} .rangNum { display: flex; align-items: center;} .rangNum span { width: 78px; padding: 0 9px; font-size: 16px; color: #666666; display: flex; justify-content: space-between; align-items: center; height: 30px; border: 1px solid #cccccc; border-radius: 5px;} .rangNum span input { background: none; border: none; max-width: calc(100% - 15px); border: none; text-align: right; padding: 0; color: #333333;} .rangNum i { display: block; font-style: normal; font-size: 16px; color: #666666; margin: 0 20px;} .slider-container { margin-bottom: 30px;} .typeList button { transition: all .4s; display: block; background: #e51d34; width: 120px; height: 36px; color: #ffffff; font-size: 16px; border: none; border-radius: 5px;} .typeList button:hover { background: #0779b2;} .productList { flex: 1;} .productType { width: 300px; margin-right: 97px;} .searchTop {flex-wrap: wrap; margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center;} .selectedType { display: flex; align-items: center;} .selectedType p { white-space: nowrap; font-size: 12px; color: #666666;} .typeGroup { display: flex; flex-wrap: wrap;} .typeGroup span { display: block; margin-right:9px; font-size: 12px; color: #b5020c; position: relative;} .typeGroup span i { cursor: pointer; display: none; background: url(../images/proIcon1.png) center no-repeat #f5f5f5; width: 14px; height: 14px; border-radius: 50%; right: 6px; top: -5px; position: absolute;} .typeGroup span::after { content: '|'; color: #cccccc; margin-left: 9px;} .typeGroup span:last-child::after { display: none;} .typeGroup span:last-child i { right: -8px;} .typeGroup span:hover i { display: block;} .selectedType b { background: url(../images/proIcon1.png) 9px center no-repeat #f5f5f5; display: inline-flex; cursor: pointer; padding: 0 9px 0 20px; font-size: 10px; color: #999999; text-transform: uppercase;} .sortType { display: flex; align-items: center;} .sortType p { color: #666666;} .sortType select { font-size: 12px; color: #666666; width: 175px; height: 30px; border: 1px solid #e5e5e5; background: #f6f6f6; outline: none;} .productList ul { display: flex; flex-wrap: wrap;} .productList li { width: calc(33.33% - 20px); margin-bottom: 30px; margin-right: 30px;} .productList li:nth-child(3n) { margin-right: 0;} .productList li:hover .hotPic img { transform: scale(1.1);} .productList li:hover h2 { color: #0779b2;} .productDetail { display: flex; align-items: start; justify-content: space-between; margin-top: 63px; margin-bottom: 90px;} .proSwiper { margin-right: 6.77vw; position: relative; border-radius: 10px; position: relative; background: #f8f8f8; padding-bottom: 65px; width: 753px;} .proSwiper .mySwiper2 { height: 500px; width: 500px; max-width: 100%; } .proSwiper .mySwiper { height: 100px; width: 450px; margin: 0 auto;box-sizing: border-box;} .proSwiper .mySwiper .swiper-slide { border: 1px solid #e2e2e2; border-radius: 3px; background: #ffffff; overflow: hidden; opacity: 0.4; } .proSwiper .mySwiper .swiper-slide-thumb-active { opacity: 1;} .proSwiper .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover;} .bottomSwiper { position: relative; width: 500px; margin: 0 auto;} .bottomSwiper .swiper-button-prev { left: 0; color: #676767;} .bottomSwiper .swiper-button-next { right: 0; left: auto; color: #676767;} .bottomSwiper .swiper-button-prev::after,.bottomSwiper .swiper-button-next::after { font-size: 16px; font-weight: bold;} .sellTag { z-index: 2; position: absolute; left: 20px; top: 20px; display: flex;} .sellTag span { margin-right: 10px; border-radius: 4px; font-size: 16px; display: block; width: 66px; height: 32px; text-align: center; line-height: 32px; color: #ffffff;} .sellTag span:nth-child(1) { background: #0779b2;} .sellTag span:nth-child(2) { background: #e51d34;} .proIntroduce { padding-top: 10px; flex: 1;} .introduceTit h2 { line-height: 46px; margin-bottom: 10px; font-weight: bold; font-size: 36px; color: #333333;} .introduceTit .star,.introduceTit .starList { margin-bottom: 20px;} .introduceTit p { line-height: 1; margin-bottom: 32px; font-size: 26px; font-weight: bold; color: #e51d34;} .introduceTit p span { margin-right: 15px; text-decoration: line-through; color: #333333; font-weight: bold; font-size: 26px;} .introduceTit b { display: block; font-size: 22px; color: #333333; font-weight: bold;} .introduceOffer { margin: 30px 0; background: #f8f8f8; border-radius: 10px; padding: 23px 20px;} .introduceOffer h2 { font-weight: bold; font-size: 22px; color: #333333; line-height: 1; margin-bottom: 15px;} .introduceOffer p { font-size: 18px; line-height: 28px; margin-bottom: 15px;} .introduceOffer a { transition: all .4s; display: inline-flex; padding: 0 23px; line-height: 48px; border-radius: 6px; background: #70a840; color: #ffffff; font-weight: bold; font-size: 18px;} .introduceOffer a:hover { background: #e51d34;} .typeChose li h2 { font-size: 22px; font-weight: bold; color: #333333; line-height: 1; margin-bottom: 20px;} .skuSlide { display: flex; gap: 20px; flex-wrap: wrap;} .skuSlide span { cursor: pointer; display: inline-flex; position: relative; border: 1px solid #e5e5e5; line-height: 24px; font-size: 18px; color: #333333; padding: 12px 20px; border-radius: 4px;} .skuSlide span.cur { color: #e51d34; border: 1px solid #f28e99;} .skuSlide span.cur::after { content: ''; position: absolute; background: url(../images/choseCheck.png) center no-repeat; right: 0; top: 0; width: 27px; height: 26px;} .quantityCont { display: flex; align-items: start;} .quantityCont p { margin-right: 20px; line-height: 48px; font-weight: bold; font-size: 22px; color: #333333;} .actionButtons { align-items: center;} .typeChose li { margin-bottom: 28px;} .numControlBar { overflow: hidden; border-radius: 8px; display: flex; justify-content: space-between; border: 1px solid #d8d8d8; background: #f8f8f8;} .numControlBar a { display: flex; align-items: center; justify-content: center; width: 50px; height: 48px; font-size:32px; color: #666666;} .numControlBar input { border: none; border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; font-size: 18px; width: 60px; padding: 0; box-sizing: border-box; text-align: center;} .numChose b { display: block; line-height: 1; margin-top: 10px; font-size: 18px; color:#333333} .numChose b span { color: #e51d34;} .proIntroduce button.addCar { display: block; width: 100%; color: #ffffff; background: #e51d34; line-height: 68px; border-radius: 8px; font-size: 24px; border: none; margin: 32px 0; cursor: pointer;} .proIntroduce .actionButtons .addCar { font-size: 16px; line-height: 50px; font-size: 24px;} .proIntroduce .actionButtons.noClick button { opacity: .5;cursor: not-allowed; pointer-events: none;} .descSlide { width: 1536px; max-width: 92%; margin: 0 auto;} .applySub { display: flex; gap: 10px;} .applySub img { display: block;} .intHd { margin-bottom: 32px; display: flex; border-bottom: 1px solid #cccccc; justify-content: center; gap: 80px;} .intHd span { position: relative; display: block; font-size: 26px; color: #333333; font-weight: bold; cursor: pointer; padding: 0 40px; line-height: 70px;} .intHd span::after { content: ''; transition: all .4s; width: 0; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); background: #e51d34; height: 5px;} .intHd span.cur::after { width: 100%;} .descSlide { padding-bottom: 120px;} .descSlide img { display: block; margin: 0 auto; max-width: 100%;} .relatedProduct { background-image:linear-gradient(to bottom,#f7f7f7,#ffffff); padding: 80px 0;} .userPage { padding: 25px 0 60px; background: #f2f2f2;} .userPage .location { background: #f2f2f2;} .userHeader { background: #ffffff; height: 76px; display: flex; justify-content: space-between; align-items: center;} .userControl { position: relative;} .userControl h2 a{ display: flex; align-items: center; line-height: 76px; cursor: pointer;} .userControl h2 img { display: block;} .userControl h2 span { margin: 0 10px; font-size: 14px; color:#333333} .controlSub { display: none; width: 160px; box-shadow: 0 0 10px rgba(0,0,0,0.05); background: #ffffff; z-index: 2; position: absolute; left: 50%; transform: translateX(-50%); top:76px;} .controlSub a { transition: all .4s; font-size: 14px; color:#666666; line-height: 45px; padding-left: 30px; display: flex; align-items: center;} .controlSub a i { margin-right: 10px; display: flex; justify-content: center; align-items: center; width: 16px; height: 16px;} .controlSub a i img { display: block;} .controlSub a:hover { color: #ffffff; background: #e51d34;} .controlSub a:hover img {filter:brightness(100)} .userControl:hover .controlSub { display: block;} .userCont { margin: 25px auto 0; display: flex; align-items: start; justify-content: space-between;} .userMenu { margin-right: 30px; background: #ffffff; width: 364px; padding: 34px 0;} .userMenu a { transition: all .4s; display: flex; align-items: center; line-height: 52px; padding-left: 45px; transition: all .4s; font-size: 16px; color: #333333;} .userMenu a i { display: flex; justify-content: center; align-items: center; width: 16px; height: 16px; margin-right: 7px;} .userMenu a:hover,.userMenu a.cur { background: #e51d34; color: #ffffff;} .userMenu a:hover i,.userMenu a.cur i {filter:brightness(100)} .userDetail { background: #ffffff; flex: 1;} .accountInfor { padding: 50px 30px;} .accountTitle { display: flex; justify-content: space-between; align-items: center; font-size: 22px; line-height: 1; color: #333333; margin-bottom: 32px;} /**/ .order_type { border-bottom: 1px solid #eee; margin-bottom: 20px;} .order_type ul { display: flex;} .order_type li { position: relative; padding: 0 16px; margin: 0!important;} .order_type li a { transition: all .4s; line-height: 2.5; font-size: 14px; color: #6B7280;} .order_type li a span { color: #6B7280;} .order_type li.cur a { color: #000000;} .order_type li.cur a span { color: #6B7280;} .order_type li:hover a { color: #000000;} .order_type li.cur::after { content: ''; position: absolute; bottom: 0; width: 100%; left: 0; height: 2px; background: #000000;} .userIcons { margin-bottom: 40px; display:flex; align-items: center; border: 1px solid #f2f2f2; padding: 40px; background: #fbfbfb;} .uploadIcon { margin-right: 46px; width: 72px; height: 72px; border-radius: 50%; overflow: hidden;} #imghead { width: 100%; height: 100%; display: block; object-fit: cover; margin: 0!important;} .uploadText h2 { font-size: 14px; color: #333333; line-height: 1; margin-bottom: 22px;} .uploadText a { border-radius:3px; display: inline-flex; font-size: 14px; color: #ffffff; background: #e51d34; padding: 0 16px; line-height: 28px; margin-bottom: 12px;} .uploadText p { font-size: 14px; color: #666666;} .userDetail .formBar { padding: 0; border: none;} .userDetail li { margin-bottom: 30px;} .userDetail button.saveBtn { display: block; padding: 0 15px; min-width: 138px; line-height: 42px; text-align: center; border-radius: 3px; color: #ffffff; background: #e51d34; font-size: 16px; border:none;} .groupSlide input[readonly] { background: #f2f2f2; color: #666666;} .groupSlide { position: relative;} .groupSlide input[type="button"] { margin-left: 10px; border:none; height: 38px; width: 107px; background: #2a67b1;text-indent: 0; color: #ffffff; cursor: pointer; position: absolute;} .carNotice { background: #f2f2f2; line-height: 1; padding: 15px 0; font-size: 14px; color: #666666;} .carCont { padding:75px 0} .carTable th { background: #f8f8f8; line-height: 55px; font-size: 16px; color: #333333; font-weight: bold;} .carTable { overflow-x: auto;} .carTable table { min-width:800px;} .carTable .carProduct { display: inline-flex; align-items: center;} .carTable .carProduct span { font-size: 16px; font-weight: bold; color: #333333;} .carTable .carProduct img { margin-right: 40px; width: 172px;} .carTable td { font-size: 16px; color: #333333; border-bottom: 1px solid #e5e5e5; align-items: center;} .carTable td:not(:nth-child(2)){ text-align: center;} .carTable th:nth-child(2) { text-indent: 36px; text-align: left;} .spinner { display: inline-flex; width: 100px; height: 25px;} .spinner input { text-align: center; border: none; background: none; padding: 0; width: 50px;} .spinner button { flex: 1; color: #333333;} .carTable td:last-child { width: 100px;} .totalCont { margin-top: 60px; display: flex; align-items: start; justify-content: space-between;} .totalNum { text-align: right;} .totalNum p { line-height: 42px; font-size: 32px; color: #333333;} .totalNum p span { font-weight: bold; color: #e51d34;} .totalNum b { display: block; font-size: 16px; color: #666666;} .totalPay { display: flex;} .totalPay a { margin-right: 18px;} .subBtn { margin-top: 60px; display: flex; align-items: center; justify-content: end;} .subBtn a { margin-left: 25px; font-size: 16px; width: 240px; border-radius: 5px; line-height: 42px; text-align: center;} .subBtn a.keepShopping { margin-left: 0; color: #666666; border: 1px solid #cccccc;} .subBtn a.debrief { color: #ffffff; background: #e51d34; border: 1px solid #e51d34;} .carRelated .homeTitle { text-align: center;} .carRelated { background-image: linear-gradient(to bottom,#d8ecf7 0%,#ffffff 280px);} .carSuccess { text-align: center; padding: 150px 0 185px;} .carSuccess img { display: block; margin: 0 auto 20px;} .carSuccess p { font-size: 24px; color: #333333; line-height: 28px; margin-bottom: 50px;} .carSuccess .subBtn { justify-content: center;} .pointsCont { background: url(../images/pointsBg.jpg) center no-repeat; background-size: cover; border-top: 1px solid #e5e5e5; display: flex; justify-content: space-between; align-items: center; padding: 45px 60px 45px 55px;} .pointsDetail { display: flex; align-items: center;} .pointsDetail img { margin-right: 45px;} .detailText p { font-size: 22px; color: #333333; line-height: 1; margin-bottom:15px} .detailText span { font-weight: bold; font-size: 48px; color:#e51d34; font-family: 'mbold';} .pointsCont a { display: flex; line-height: 32px; padding: 0 28px; border-radius: 4px; background: #e51d34; color: #ffffff; font-size: 14px;} .pointsTable { margin-top: 55px;} .pointsTable h2 { font-weight: bold; font-size: 18px; line-height: 1; margin-bottom: 20px;} .pointsTable table { width: 100%;} .pointsTable th { background: #f5f5f5; font-weight: bold; font-size: 16px; color: #333333; line-height: 48px;} .pointsTable td { color: #666666; font-size: 14px; border-bottom: 1px solid #f5f5f5; padding: 40px 0; text-align: center;} .pointsTable td .addNum { color: #e51d34;} .pointsTable td .reduceNum { color: #118339;} .confirmation { padding: 80px 0 120px; background: #f2f2f2;} .confirmTitle { font-size:34px; color: #333333; line-height: 1; margin-bottom: 42px;} .confirmInfor { max-width: calc(100% - 404px); flex: 1; background: #ffffff; padding: 50px 30px;} .orderView { width: 394px; margin-left: 30px; background: #ffffff; padding: 30px;} .confirmFlex { display: flex; align-items: start; justify-content: space-between;} .inforTitle { font-size: 24px; font-weight:400; line-height: 1; color: #333333; margin-bottom: 28px;} .confirmInfor li { margin-bottom: 30px;} .confirmInfor li input { border: 1px solid #e5e5e5; border-radius: 3px; padding: 0; text-indent: 20px; font-size: 14px; color: #666666; width: 100%; height: 50px; box-sizing: border-box;} .confirmInfor li select { outline: none; border: 1px solid #e5e5e5; border-radius: 3px; padding: 0 20px; font-size: 14px; color: #666666; width: 100%; height: 50px;text-indent: 0;} .cellSelect { display: flex; gap: 34px;} .methodSlide { margin-bottom: 40px; border: 1px solid #e5e5e5; border-radius: 3px; padding: 25px 20px; cursor: pointer;} .methodSlide p { font-size: 18px; line-height: 24px; color: #333333;} .methodSlide span { display: block; line-height: 24px; font-size: 14px; color: #666666;} .invoiceChose { margin-bottom: 20px; display: flex; align-items: center;} .invoiceChose span { font-size: 14px; color: #666666; display: flex; height: 80px; cursor: pointer; border: 1px solid #e5e5e5; border-radius: 3px; padding: 0 10px; box-sizing: border-box; width: 180px; margin-right: 25px; justify-content: center; align-items: center; text-align: center;} .invoiceChose span.cur { border: 1px solid #e51d34;} .invioceDesc h2 { display: flex; align-items: center; font-size: 14px; color: #e51d34;} .invioceDesc h2 img { margin-left: 20px;} .inviceDescSub { margin-top: 20px; position: relative; border-radius: 7px; letter-spacing: .6px; box-shadow: 0 0 10px rgba(0,0,0,0.1); padding: 12px 16px; font-size: 12px; color: #666666; line-height: 16px;} .inviceDescSub::after {content: ''; z-index: 3; background: url(../images/sj.png) center no-repeat; width: 18px; height: 9px; top:-9px; left: 30px; position: absolute;} .orderProduct li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e5e5e5;} .productInfor { max-width: calc(100% - 60px); display: flex; align-items: center;} .proImg { min-width: 90px; max-width: 90px; margin-right: 16px;} .productInfor .proText { flex: 1; max-width: calc(100% - 96px);} .orderProduct { border-top: 1px solid #e5e5e5;} .proText p {overflow: hidden;text-overflow: ellipsis; white-space: nowrap; font-weight: bold; font-size: 14px; color: #333333; line-height: 1; margin-bottom: 10px;} .proText span { display: block; font-size: 12px; color: #666;} .proCost { min-width: 60px; text-align: right; font-size: 14px; color: #333333;} .orderInfor li { line-height: 32px; margin-bottom: 13px; display: flex; justify-content: space-between;} .totalOrder i,.totalOrder b { display: block; text-align: right;} .orderInfor li p { color: #666666; font-size: 14px;} .orderInfor li>span { display: flex; align-items: center; color: #666666;} .orderInfor li span img { display: block; margin-right: 10px;} .totalOrder i { font-size: 20px; color: #e51d34; font-style: normal;} .totalOrder b { display: block; font-size: 12px; color: #666666;} .orderInfor .couponEnter { display: block; background: url(../images/listTagon.png) right center no-repeat; padding-right: 12px; font-size: 14px; color: #e51d34;} .referrerInp { border: 1px solid #cccccc; height: 42px; text-indent: 20px; border-radius: 7px; width: 226px; padding: 0;} .referrCont { align-items: center;} .orderInfor button { color: #ffffff; background: #e51d34; border: none; border-radius: 6px; font-size: 16px; width: 100%; line-height: 44px; margin-top: 20px;} .checkPolic { margin-top: 25px; position: relative; display: flex; justify-content: space-between;} .checkPolic span { margin-top: 2px; margin-right: 9px; display: block; width: 16px; height: 16px; border: 1px solid #eee; border-radius: 3px; box-sizing: border-box;} .checkPolic input { cursor: pointer; opacity: 0; position: absolute; left: 0; top: 0;} .checkPolic p { max-width: calc(100% - 25px); font-size: 14px; color: #666666; line-height: 20px;} .checkPolic p a { color: #e51d34; text-decoration: underline; display: inline-block;} .checkPolic input:checked+span { background: url(../images/checkOn.png) center no-repeat;} .accountTitle a.addAdress { padding: 0 20px; background: #e51d34; display:block; line-height: 32px; font-size: 14px; color: #ffffff;border-radius: 3px;} .adressTable table { width: 100%;} .adressTable th { line-height: 48px; font-weight: bold; background: #f5f5f5;} .adressTable td { border-bottom: 1px solid #f5f5f5; padding: 25px 0; line-height: 22px; text-align: center; color: #666666; font-size: 14px;} .adressTable td p { display: inline-block; max-width: 170px;} .addressControl a { margin-left: 15px;} .addressControl a:nth-child(1) { margin-left: 0;} .addAlt { display: none; z-index: 20; background: #ffffff; width:750px; max-width: 92%; position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);} .addTitle { font-size: 18px; color: #333333; display: flex; justify-content: space-between; align-items: center; padding: 0 30px; line-height: 76px; border-bottom: 1px solid #e5e5e5;} .addTitle span { display: block; background: url(../images/wrong.png) center no-repeat; width: 14px; height: 14px; transition: all .4s;} .addTitle span:hover { transform: rotate(360deg); cursor: pointer;} .adreesForm { padding: 42px 30px 0; overflow-y: auto;} .gapBox { display: flex;} .gapSlide:nth-child(1) { width: 211px; margin-right: 30px;} .gapSlide:nth-child(2) { flex: 1;} .adreesForm li input,.adreesForm li select { display: block; width: 100%; outline: none; border: 1px solid #e5e5e5; border-radius: 3px; height: 38px; text-indent: 10px; padding: 0; box-sizing: border-box;} .adreesForm li p { font-size: 14px; color: #666666; line-height: 1; margin-bottom: 16px;} .adreesForm li p i { color: #f11111;} .adreesForm li { margin-bottom: 22px;} .adreesForm li input { margin-bottom: 9px;} .adreesForm li input:last-child { margin-bottom: 0;} .formNotice { font-size: 14px; color: #999999; line-height: 1;} .addAlt button { margin-left: 30px; font-size: 16px; margin-top: 40px; margin-bottom: 35px; display: block; width: 138px; height: 42px; color: #ffffff; border-radius: 3px; background: #e51d34;} .agreenSet { font-size: 14px; color: #666666; display: flex; align-items: center; position: relative;} .agreenSet input {cursor: pointer; opacity: 0; position: absolute; left: 0; top: 0;} .agreenSet span {margin-right: 9px; display: block; width: 16px; height: 16px; border: 1px solid #eee; border-radius: 3px; box-sizing: border-box;} .agreenSet input:checked+span { background: url(../images/checkOn.png) center no-repeat;} .orderList li { flex-direction: column; border-bottom: 1px solid #e5e5e5; padding-bottom: 30px; margin-bottom: 30px; display: flex; justify-content: space-between;} .orderLeft { gap: 16px; display: flex; flex-direction: column;} .orderSlide { display: flex; justify-content: space-between;} .orderPrice { font-weight: bold; text-align: right; color: #333333; font-size: 18px;} .orderPic { margin-right: 28px; width: 110px; height: 110px; border: 1px solid #e5e5e5; border-radius: 3px; overflow: hidden;} .orderPic img { display: block; width: 100%; height: 100%; object-fit: cover;} .orderText h2 { font-weight: bold; font-size: 16px; line-height: 1; margin-bottom:10px;} .tagList { margin-bottom:30px; display: flex; } .tagList span { display: inline-flex; padding: 0 12px; border-radius: 3px; background: #ededed; line-height: 20px; font-size: 12px; color: #666666;} .orderText p { font-size: 12px; color: #666666;} .orderControl h2 { font-size: 18px; color: #333333; line-height: 1; margin-bottom: 10px;} .orderControl p { color: #333333; font-size: 14px; opacity: .5; line-height: 1;} .orderBtn { display: flex;} .orderBtn a { margin-left: 10px; border-radius: 26px; padding: 0 20px; line-height:32px; display: block; font-size: 12px;} .orderBtn a:nth-child(1){ margin-left: 0; color: #666; border: 1px solid #e5e5e5;} .orderBtn a.payBtn{ color: #fff; background: #e51d34; border: 1px solid #e51d34;} .orderBtn a.removeOreder {color: #374151; background: #F4F4F4; border: 1px solid #D1D5DB;} .orderBtn a.cancle-order {color: #374151; background: #F4F4F4; border: 1px solid #D1D5DB;} .orderList li:last-child { padding-bottom: 0; margin-bottom: 0; border: none;} .orderNumber { display: flex; justify-content: space-between; align-items: center;} .numberText p { font-size: 14px; color: #666666; line-height: 26px;} .orderNumber a { border-radius: 26px; background: #f2f2f2; font-size: 12px; color: #666666; display: block; padding: 0 20px; line-height: 26px; border: 1px solid #e7e7e7;} .orderStep h3 { font-size: 18px; color: #333333; line-height: 1; margin-bottom: 13px;} .orderStep h4 { font-size: 14px; color: #666666;} .orderStep { margin-top: 38px; border-top: 1px solid #ececec; padding: 38px 48px; background: #f8f8f8;} .orderStep dl { border-top: 1px solid #dfdfdf; margin-top: 15px; padding-top: 30px;} .orderStep dt { position: relative; padding: 0 0 38px 20px;} .orderStep dt p { margin-bottom: 8px; line-height: 18px; font-size: 14px; color: #333333;} .orderStep dt span { display: block; line-height: 1; font-size: 14px; color: #999999;} .orderStep dt:before { content: ''; background: #000000; left: -3px; top:5px; display: block; position: absolute; width: 8px; height: 8px; border-radius: 50%;} .orderStep dt::after { content: ''; position: absolute; left:0; width: 1px; top: 16px; bottom: 0; background: #dfdfdf;} .orderStep dt:last-child::after { display: none;} .proFlex { display: flex; align-items: center;} .listProduct { padding-top: 40px;} .listProduct td img { margin-right: 36px; width: 124px;} .proTable table { width: 100%;} .proTable td:not(:nth-child(1)) { text-align: center;} .proTable th:nth-child(1) { text-align: left;} .proTable td { padding: 10px 0; font-size: 16px; color: #666666; border-bottom: 1px solid #f5f5f5;} .proTable th { font-size: 16px; color: #999999; border-bottom: 1px solid #f5f5f5;padding-bottom: 22px;} .proTable td:last-child { font-size: 16px; color: #333333;} .costInfor { padding: 16px 0; border-bottom: 1px solid #f5f5f5;} .costInfor p{ font-size: 14px; color: #666666; line-height: 42px; display: flex; justify-content: end; align-items: center;} .costInfor p span { font-size: 14px; color: #666666; min-width: 148px; text-align: right;} .costInfor p b { display: block;min-width: 148px; text-align: right; font-size: 18px; color: #e51d34;} .delivery {border-bottom: 1px solid #f5f5f5; padding-bottom: 40px; padding-top: 40px;} .delivery p { font-size: 14px; color: #333333; margin-bottom: 30px; display: flex; align-items: center;} .delivery p span { min-width: 185px; font-size: 14px; color: #999999;} .delivery p:last-child { margin-bottom: 0;} .methodList { display: flex; align-items: center;} .methodList a { margin-right: 8px; overflow: hidden; display: block; width: auto; height: 38px; border-radius: 4px; border: 1px solid #ebebeb;} .payMethod { padding: 40px 0; border-bottom: 1px solid #f5f5f5;} .invoicesCont { display: flex; align-items: start;} .invoicesCont h3 { margin-right: 40px; font-size: 14px; color: #999999; display: flex; align-items: center; line-height: 24px;} .invoicesCont h3 img { display: block; margin-left: 18px;} .invoiceDesc { flex: 1;} .invoices { padding-top: 40px;} .invoiceDesc p { line-height: 24px; font-size: 14px; color: #333333; margin-bottom: 20px;} .invoiceDesc span { display: block; line-height: 1; font-size: 14px; color: #999999;} .couponsList ul { flex-wrap: wrap; display: flex; justify-content: space-between;} .couponsList li { align-items: center; display: flex; justify-content: space-between; padding: 7px 5px; width: calc(50% - 15px); box-sizing: border-box; border: 1px solid #e5e5e5; margin-bottom: 24px;} .couponsTicket { color: #ffffff; height: 98px; width: 221px; display: flex; justify-content: center; align-items: center; flex-direction: column;} .couponsBlue .couponsTicket { background: url(../images/coupons1.png) center no-repeat; background-size: 100% 100%;} .couponsYellow .couponsTicket { background: url(../images/coupons2.png) center no-repeat; background-size: 100% 100%;} .couponsRed .couponsTicket { background: url(../images/coupons3.png) center no-repeat; background-size: 100% 100%;} .couponsGreen .couponsTicket { background: url(../images/coupons4.png) center no-repeat; background-size: 100% 100%;} .couponsList li.passed .couponsTicket { opacity: .5; filter: grayscale(100%);} .couponsList li.passed a { background: rgb(164,164,164); cursor: not-allowed; pointer-events: none;} .couponsDesc { flex: 1; text-align: center;} .couponsTicket h2 { margin-bottom: 14px; font-size: 48px;} .couponsTicket h2 sup { font-size: 24px;} .couponsTicket p { text-align: center; line-height: 1.2; font-size: 12px;} .couponsDesc a { font-size: 14px; color: #ffffff; line-height: 34px; display: block; width: 100px; height: 34px; border-radius: 34px; margin: 0 auto 10px;} .couponsDesc p { font-size: 12px; color: #666666; line-height: 18px;} .couponsBlue .couponsDesc a { background-image: linear-gradient(to bottom,#00cdf8,#0071d5);} .couponsYellow .couponsDesc a { background-image: linear-gradient(to bottom,#fbf137,#e5ad1e);} .couponsRed .couponsDesc a { background-image: linear-gradient(to bottom,#fb355f,#e51d34);} .couponsGreen .couponsDesc a { background-image: linear-gradient(to bottom,#5ded9b,#349656);} .resignCont { max-width: 92%; width: 544px; margin: 60px auto;} .bannerText { position: absolute; left: 0; width: 100%; text-align: center; top: 95px;} .resignTop { position: relative;} .resignTop img { display: block; width: 100%;} .bannerText h2 { line-height: 1; font-size: 46px; color: #333333; margin-bottom: 35px;} .bannerText p { font-size: 16px; color: #333333; line-height: 20px;} .resignForm li { display: flex; margin-bottom: 20px; align-items: center; justify-content: space-between;} .resignForm li input[type="text"],.resignForm li input[type="password"] { text-indent: 20px; border-radius: 8px; border: 1px solid #e5e5e5; box-sizing: border-box; height: 48px; flex: 1; display: block;} .resignForm { padding: 45px 54px 40px;} .resignForm li input[type="button"] { border-radius: 8px; cursor: pointer; color: #ffffff; font-size: 16px; margin-left: 17px; width: 178px; height: 48px; border: none; background: #235793;} .resignForm button { transition: all .4s; margin-bottom: 20px; display: block; width: 100%; border-radius: 8px; height: 48px; background: #e51d34; font-size: 16px; color: #ffffff;} .resignForm button:hover { background: #235793;} .resignNotice { text-align: center;} .resignNotice p { font-size: 14px; color: #666666; line-height: 24px;} .resignNotice p a.member { color: #0c4b9b;} .resignNotice p a.signIn { color: #e51d34;} .resignNotice p a.signIn:hover { color: #0c4b9b;} .resignNotice p a.member:hover { color: #e51d34;} .forget { margin-bottom: 20px; text-align: right;} .forget a { font-size: 18px; color: #245897;} .otherLogin { margin-top: 30px; font-size: 16px; color: #666666; display: flex; justify-content: center; align-items: center; font-style: normal;} .otherLogin i { margin: 0 20px; display: block; width: 59px; height: 1px; background: #cccccc;} .otherType { padding: 25px 0; display: flex; justify-content: center; align-items: center;} .otherType a { display: block; width: 34px; margin: 0 8px;} .mobMenu { display: none;} /*review*/ .carproDesc { display: flex; flex-direction: column;} .descSlide { width: 1480px; max-width:92%; margin: 0 auto;} .reviewNum { border: 1px solid #E5E7EB; border-radius: 12px; padding: 17px 60px; display: flex; justify-content: space-between; align-items: center;} .basedCont { text-align: center;} .basedCont p { line-height:42px; font-size: 34.45px; font-weight: bold; color: #111827;} .basedCont span { color: #4B5563; font-size: 13.56px;} .basedCont .starList { margin: 0 auto; } .starList {width: 85px; background: url(../images/starMode.png); height: 17px;} .starList b { display: block; height: 17px; background: url(../images/starOn.png);} .rankList li { display: flex; align-items: center;} .rankList p { font-size: 14px; display: flex; align-items: center; margin-right: 35px;} .rankList p img { display: block; width: 12px; margin-left: 4px;} .stepCont { width: 605px; background: #E5E7EB; height: 8px; border-radius: 8px; overflow: hidden;} .stepCont b { display: block; height: 8px; border-radius: 8px; background: #FACC15;} .reviewNum a.writeReview { display: block; background: #C33229; border-radius: 8px; line-height: 48px; padding: 0 24px; color: #ffffff; font-size: 15.5px; transition: all .4s;} .reviewNum a.writeReview:hover { background: rgb(168,42,38);} .reviewTitle { margin: 25px 0; display: flex; justify-content: space-between; align-items: center;} .reviewTitle p { font-size: 15px; color: #000000;} .reviewSearch select { padding: 0 20px; outline: none; margin-left: 15px; border-radius: 8px; border: 1px solid #D1D5DB; height: 38px; font-size: 15px;} .reviewSearch select:focus { border: 1px solid #C33229;} .reviewInforTitle { display: flex; justify-content: space-between;} .reviewUser { width: 48px; height: 48px; overflow: hidden; border-radius: 50%; margin-right: 16px;} .reviewUser img { width: 100%; height: 100%; object-fit: cover;} .reviewTag { display: flex; justify-content: space-between; flex: 1; align-items: start;} .reviewList li { transition: all .4s; margin-bottom: 15px; border: 1px solid #E5E7EB; border-radius: 12px; padding: 17px;} .reviewList li:hover { box-shadow: 0 0 10px rgba(0,0,0,0.2);} .tagLeft p { font-weight: bold; font-size: 15px; line-height: 24px; margin-bottom: 10px;} .reviewStarDetail { margin-right: 8px; display: flex; align-items: center;} .reviewStarDetail img { width: 16px; display: block; margin: 0;} .reviewStar { line-height: 16px; display: flex; align-items: center;} .reviewStar span { color:#4B5563; font-size: 14px;} .reviewTitme { color: #6B7280; font-size: 14px; line-height: 24px;} .reviewDetail { padding: 14px 0 12px 64px;} .reviewImg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;} .reviewImg img { display: flex; width: 80px; margin: 0; height: 80px; object-fit: cover;} .detailTitle { font-size: 15px; line-height: 24px; color: #111827; font-weight: bold; margin-bottom: 10px;} .detailDesc { font-size: 15px; color: #374151; line-height: 22.5px; margin-bottom: 15px;} #star{position:relative; display: flex; align-items: center;} #star span{ margin-left: 5px; font-size: 14px; color: #4B5563;} #star span i { font-style: normal;} #star li{float:left; margin-right: 4px; width:20px; height: 20px; cursor:pointer;text-indent:-9999px;background:url(../images/starEmpty.png) center no-repeat; background-size: 100%!important;} #star strong{color:#f60;padding-left:10px;} #star li.on{background:url(../images/starOn.png) center no-repeat;} #star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(../images/starOn.png) no-repeat;padding:7px 10px 0;} #star p em{color:#f60;display:block;font-style:normal;} .reviewAlt { max-width: 92%; display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #ffffff; border-radius: 20px; width: 672px; padding: 26px 24px; z-index: 20;} .reviewAltTit { margin-bottom: 26px; display: flex; justify-content: space-between; align-items: center;} .reviewAltTit p { font-size: 22px; font-weight: bold; line-height: 32px;} .reviewAltTit img { display: block;} .reviewAltTit span { cursor: pointer; transition: all .4s;} .reviewAltTit span:hover { transform: rotate(180deg);} .reviewForm dt { margin-bottom: 24px;} .reviewForm dt:last-child { margin-bottom: 0;} .reviewForm dt p { font-size: 14px; line-height: 20px; margin-bottom: 8px; color: #374151;} .reviewForm dt input[type="text"] { font-size: 16px; box-sizing: border-box; width: 100%; border: 1px solid #D1D5DB; border-radius: 8px; padding: 0 17px; height: 50px;} .reviewForm dt textarea { font-family: '微软雅黑'; box-sizing: border-box; width: 100%; border: 1px solid #D1D5DB; border-radius: 8px; outline: none; padding: 14px 17px; font-size: 16px; line-height: 1.5; resize: none; height: 146px;} .imgClick { cursor: pointer; width: 128px; height: 128px; border-radius: 8px; border:2px dashed #D1D5DB; display: flex; flex-direction: column; justify-content: center; align-items: center;} .imgClick img { margin-bottom: 12px;} .imgClick p { font-size: 14px; color: #6B7280;} .imgAll li { margin-right: 20px; overflow: hidden; border-radius: 8px; width: 128px; height: 128px;} .imgAll li img { width: 100%; height: 100%; object-fit: cover;} .uploadCont { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: start;} .imgAll ul { display: flex; flex-wrap: wrap;} .uploadTag { font-size: 14px; color: #6B7280; line-height: 20px; margin-top: 8px;} .reviewButton { margin-top: 12px; display: flex; justify-content: space-between; gap:16px} .reviewButton a {flex: 1; text-align: center; display: block; border-radius: 8px; font-weight: bold; box-sizing: border-box; font-size: 15.5px; line-height:48px;} .reviewButton a:nth-child(1) { border: 1px solid #D1D5DB; color: #374151;} .reviewButton a:nth-child(2) { background: #C33229; color: #ffffff;} .emptyCont { padding: 30px 0 60px; display: flex; flex-direction: column; justify-content: center; align-items: center;} .emptyCont img { display: block; margin: 0 auto 24px;} .emptyCont p { font-size: 17px; line-height: 28px; margin-bottom: 8px;} .emptyCont p a { transition: all .4s; text-decoration: underline; font-weight: bold; color: rgba(0,0,0,.85);} .emptyCont p a:hover { color: #C33229;} .emptyCont span { color: #6B7280; display: block; line-height: 24px; font-size: 15px;} .delImg { position: absolute; background: #000; text-align: center; line-height:16px; right: 5px; top: 5px; font-style: normal; color: #ffffff; width: 16px; height: 16px; border-radius: 50%;} .imgAll li { position: relative;} .orderState { display: flex; justify-content: space-between; align-items: center;} .orderInduce { display: flex;} .orderControl { margin-top: 16px; padding: 22px 0; border-top: 1px solid #F3F4F6; display: flex; align-items: start; justify-content: space-between;} .orderState p { display: flex; align-items: center; gap:10px} .orderState p span { font-size: 13px; color: #6B7280;} .orderState p i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #6B7280;} .stateTag { display: block; padding: 0 12px; line-height: 24px; border-radius: 24px;} .stateTag.Completed { background: #E5E7EB;} .stateTag.Payment { color: #92400E; background: #FEF3C7;} .stateTag.Delivery { color: #1E40AF; background: #DBEAFE;} .stateTag.Closed { background: #E5E7EB;} .orderList ul {margin-bottom: 30px; border-bottom: 1px solid #E5E7EB;} .orderText .comment-order { display: inline-flex; border-radius: 26px; padding: 0 20px; line-height: 32px; margin-top: 10px; font-size: 12px; color: #fff; background: #e51d34; border: 1px solid #e51d34;} .pickFlex { font-size: 16px; justify-content: center; width: 220px; z-index: 10; height: 50px; border-radius: 50px; background: #ffffff; display: flex; align-items: center; box-shadow:0 0 10px rgba(0,0,0,0.2); line-height: 3; font-size: 14px;} .pickFlex span { background: #ef4444; width: 24px; height:24px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 12px;} .pickFlex span svg { display: flex; width: 14px; height: 14px;} .pickFlex span svg path {stroke: #ffffff;} .pickSuccess { z-index: 10; position: fixed; left: 50%; top: 32px; transform: translateX(-50%); display: none;} .productDesc { padding: 1em 0; border-top: 1px solid #d4d4d4; font-size: 18px; line-height: 1.5; color: #666666;} .mySwiper2 .swiper-slide:hover { cursor: zoom-in; /* 放大镜效果 */ /* 或者 */ cursor: -webkit-zoom-in; /* 针对WebKit浏览器 */ } #videoCover {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; background: rgba(0,0,0,0.5);} .videoAlt video { display: block; width: 100%;} .closeVideo { opacity: 0; z-index: 2; cursor: pointer; transition: all .5s; background: url(../images/closeV.png) center no-repeat #000; border-radius:50%; width: 40px; height: 40px; display: block; position: absolute; right: 10px; top: 10px;} .closeVideo:hover { transform: rotate(360deg);} .videoAlt:hover .closeVideo { opacity: 1;} .videoAlt { display: none; z-index: 200; width: 1100px; position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 90%;} @media screen and (max-width: 1680px) { .productDesc { font-size: 16px;} .homeTitle { font-size: 40px; margin-bottom: 40px;} .blog { padding: 40px 0 0;} .introduceTit h2 { font-size: 28px;} .introduceTit p,.introduceTit p span { font-size: 20px;} .introduceTit p { margin-bottom: 20px;} .introduceTit b { font-size: 18px;} .proSwiper { margin-right: 40px;} .skuSlide span { font-size: 16px;} .introduceOffer h2 { font-size: 18px;} .introduceOffer p { font-size: 16px;} .introduceOffer { margin: 20px 0;} } @media screen and (max-width: 1440px) { .proSwiper { width: 500px;} .proSwiper .mySwiper2 { width: 400px; height: 400px;} .bottomSwiper { width: 400px;} .proSwiper .mySwiper { width: 350px; height: 72px;} .confirmation { padding: 50px 0;} .articleCont { padding: 50px 0;} .articleTitle h2 { font-size: 32px; line-height: 40px;} .userMenu { width:280px;} .userMenu a { padding-left: 20px;} .adreesForm { max-height: 70vh;} .nav li { margin-right: 10px;} .aboutPage { padding: 50px 0;} .homeTitle { font-size: 32px; margin-bottom: 32px;} .arrivalSwiper .swiper-button-prev, .arrivalSwiper .swiper-button-next { width: 32px; height: 32px;} .newArrivals { margin-bottom: 50px;} .hotSelling { margin-bottom: 50px;} .promotionText h2 { font-size: 28px;} .promotionText p { font-size: 22px;} .promotionText b { font-size: 14px;} .serviceTip li h2 { font-size: 16px;} .serviceTip li img { width: 50px;} .footerLink li { margin-right: 5.2vw;} .aboutCont { padding: 80px 0 50px;} .aboutCont h2 { font-size: 26px;} .articlePage { padding-top: 30px; margin-top: 30px;} .articlePage p a { font-size: 16px;} .totalNum p { font-size: 32px;} .carCont { padding: 50px 0;} .carRelated,.contactPage { padding: 50px 0;} .contactDesc { padding: 40px 4%;} .contactDesc h2 { font-size: 26px;} .basePage,.relatedProduct { padding: 50px 0;} .baseTitle { font-size: 36px;} /*review*/ .reviewAltTit { margin-bottom: 15px;} .reviewForm dt { margin-bottom: 10px;} } @media screen and (max-width: 1280px) { .baseArticle li h2 { font-size: 16px; line-height: 1.5; margin-bottom: 10px;} .baseArticle li p { font-size: 14px; line-height: 24px;} .baseArticle li { margin-bottom: 10px;} .baseMenu li a { font-size: 14px;} .baseArticle { padding: 20px 0;} .baseTitle { font-size: 20px; padding-bottom: 0; border-bottom: 2px solid #e51d34;} .basePage { padding: 30px 0;} .contactDesc h2 { font-size: 20px; margin-bottom: 10px;} .contactDesc p { font-size: 13px; line-height: 1.5;} .confirmation { padding:30px 0;} .carRelated { padding: 30px 0;} .articlePage p a,.articlePage p { font-size: 14px; line-height: 1.25;} .articleTitle { margin-bottom: 20px;} .articleDesc p { font-size:14px; line-height:20px; margin-bottom: 14px;} .articleTitle h2 { font-size: 26px; line-height: 30px;} .articleDesc h2 { font-size: 20px; line-height: 24px; margin-bottom: 20px;} .articleDesc h3 { font-size: 16px;} .accountTitle a.addAdress { font-size: 12px; padding: 0 10px;} .accountTitle { font-size: 14px; margin-bottom: 20px;} .userMenu a { font-size: 14px; line-height: 40px;} .userMenu,.baseMenu,.productType {z-index: 20; margin: 0; padding: 0; background: #f5f5f7; position: fixed; right: -305px; bottom: 0; top: 60px; width: 280px;} .productType {padding: 20px 0;} .baseMenu li a:before { left: 15px;} .baseMenu li a { padding: 10px 10px 10px 35px;} .hideState { background: url(../images/about_pic1.png); width: 25px; height: 41px; position: absolute; left: -25px; top: 150px; display: block; background-size: 100% auto; } .accountRight { display: flex; align-items: center;} .mobMenu { margin-left: 10px; display: block;line-height: 32px; display: block; background: url(../images/pos_bg2.png) left center no-repeat; padding-left: 25px; background-size: 20px auto; font-size: 12px; color: #e51d34; } .userPage { padding: 0 0 60px;} .userCont { margin-top: 0;} .accountInfor { width: 100%; padding: 10px 10px 20px;} .aboutCont h2 { font-size: 20px;} .aboutCont { padding: 40px 0;} .aboutPage { padding: 20px 0;} .blog {padding-top: 20px;} .promotionSwiper .swiper-button-prev { left: 0;} .promotionSwiper .swiper-button-next { right: 0;} .promotionSwiper { margin-top: 20px;} .hotSelling { margin-bottom: 20px;} .arrivalBtn a span { font-size: 12px;} .arrivalBtn a {padding: 5px 0; width: 100px; font-size: 12px; white-space: nowrap;} .arrivalText { padding: 0 50px; bottom: auto; top: 50%; transform: translateY(-50%); text-align: center;} .arrivalBtn { justify-content: center; margin-top: 10px;} .arrivalText h2 { font-size:16px; margin-bottom: 10px;} .newArrivals { margin-bottom: 20px;} .arrivalText p { font-size: 12px;} .menubox{ display: block; position: absolute;right: 4%; top: 10px; width:45px; height: 40px;opacity: 1;pointer-events: auto;transition: 0.3s;} .menubox div{position: absolute;left: 20px;width: 30px;height: 2px;background-color: #e51d34;transition: 0.6s;} .menubox div:nth-child(1){top: 9px;} .menubox div:nth-child(2){top: 19px;} .menubox div:nth-child(3){top: 29px;} .menubox.on div:nth-child(1){top: 19px;transform: rotateZ(45deg);} .menubox.on div:nth-child(2){top: 19px;opacity: 0;} .menubox.on div:nth-child(3){top: 19px;transform: rotateZ(-45deg);} .headerCont { height: 60px;} .header { position: fixed; left: 0; top: 0; top: 0; width: 100%; box-shadow: 0 0 10px rgba(0,0,0,0.2); background: #ffffff; z-index: 20; height: 60px;} body { padding-top: 60px;} .userHeader {position: fixed; left: 0; top: 0; top: 0; width: 100%; box-shadow: 0 0 10px rgba(0,0,0,0.2); background: #ffffff; z-index: 20; height: 60px; max-width: 100%; padding: 0 4%;} .userControl h2 a { line-height: 60px;} .adressTable { overflow-x: auto;} .adressTable table { min-width: 600px;} .controlSub { right: 0; top: 60px; transform: translate(0); left: auto;} .banner { margin-top: 20px;} .headerRight { left: -200px; width: 200px; height: calc(100vh - 60px); position: fixed; z-index: 20; background: #ffffff; top: 60px;} .nav ul { flex-direction: column;} .nav li { margin: 0;} .headerRight { flex-direction: column;} .nav li h2 a { line-height: 40px; font-size: 16px;} .nav li h2 i { transition: all .5s; background: url(../images/menuEnter.png) center no-repeat; width: 8px; height: 14px; background-size: 100% auto; position: absolute; right:15px; top: 50%; margin-top: -7px;} .nav li dl {padding: 0 ; position: static; box-shadow: none; width: 100%; margin: 0; transform: translate(0);} .nav li h2 { text-indent: 20px; position: relative;} .headerTool { flex-direction: column;} .headerSearch { width: 180px;} .nav li.cur h2 i { transform: rotate(90deg);background: url(../images/menuEnteron.png) center no-repeat; background-size: 100% auto;} .nav li dl dt a { font-size: 12px;} .warning,.topTip { display: none;} .logo { width: 120px;} .activeSwiper .swiper-slide p { font-size: 12px;} .activeSwiper .swiper-slide { padding: 10px; height: auto; position: relative; overflow: hidden; border-radius: 6px; z-index: 2;} .activeSwiper .swiper-button-next,.activeSwiper .swiper-button-prev { color: #ffffff;} .activeSwiper .swiper-button-next:after,.activeSwiper .swiper-button-prev:after { font-size: 14px; color: #ffffff;} .activeSwiper { margin: 10px 0;} .activeSwiper .swiper-button-next { left: auto; right: 0;} .activeSwiper .swiper-button-prev { left: 0;} .homeTitle { margin-bottom: 20px; font-size: 24px;} .hotSwiper .swiper-button-prev { left:0} .hotSwiper .swiper-button-next{ right: 0;} .promotionText { padding: 50px 40px;} .promotion { margin-bottom: 20px;} .blog { margin-bottom: 40px;} .footerTop { flex-direction: column;} .footerLink li { margin: 0;} .footerLink ul { justify-content: space-between;} .footer { padding-top: 40px;} .mission { margin-bottom: 20px;} .footContact { margin-bottom: 20px;} .toolEnter li { margin: 0 20px;} .theme-green { width: 100%!important;} .searchTop { position: relative; justify-content: start;} .selectedType { margin-right: 20px;} .searchTop .mobMenu { position: absolute; right: 0;} .scrollBox { padding: 0 20px; height: 100%; overflow-y: auto;} .theme-green { width:100%!important} .rangNum { width: 100%; justify-content: space-between;} .rangNum i { font-size: 14px; margin: 0;} /*review*/ .stepCont { width: 405px;} } .skuSlide span.noClick {opacity: 0.5; cursor: not-allowed; pointer-events: none;background: #eee;} .descFlex { display: flex; justify-content: space-between; margin: 15px auto;} .descFlex>div { width: calc(50% - 7.5px);} .descImg img { display: block; width: 100%;} .descFlex.flexReverse { flex-direction: row-reverse;} .descArticle p { font-size: 18px;} @media screen and (max-width: 1200px) { } @media screen and (max-width: 1080px) { .promotionTop { flex-direction: column!important;} .promotionImg { width: 100%} .promotionText { width: 100%; padding: 20px;} .promotionText h2 { font-size: 20px; margin-bottom: 10px;} .promotionText p { font-size: 16px; margin-bottom: 10px;} .promotionText .arrivalBtn { justify-content: start!important;} .totalCont { flex-direction: column; margin-top: 20px;} .totalNum { text-align: left;} .totalPay img { height: 30px;} .totalPay a { margin-right: 10px;} .totalNum p { font-size:16px;} .totalNum b { font-size: 14px;} .carCont { padding: 30px 0;} } @media screen and (max-width: 780px){ .newLetter p { font-size: 12px; line-height: 1.5;} .newLetter h2 { font-size: 16px; margin-bottom: 10px;} .payList img { height: 32px;} .mission h2 { font-size: 16px; margin-bottom: 10px;} .mission p { font-size: 12px;} .footerLink h2 a { font-size: 16px;} .footerLink h2 { margin-bottom: 12px;} .footContact h2 { font-size: 14px; margin-bottom: 12px;} .footerNotice { padding: 20px 0; font-size: 12px;} .letterPay { padding: 20px 0; flex-direction: column; margin-top: 20px;} .footerLink li { margin-bottom: 20px; width: 50%;} .footerLink p { font-size: 12px; margin-bottom: 12px;} .footerLink ul {flex-wrap: wrap;} .footerTopLeft { width: 100%;} .hotSwiper ul { gap: 10px;} .hotSwiper li { width: calc(50% - 5px);} .hotText h2 { margin-bottom: 5px; font-size: 14px;} .hotText p { font-size: 12px; margin-bottom: 5px;} .star { margin-bottom: 5px;} .hotText span { font-size: 14px;} .blog ul { flex-wrap: wrap; justify-content: space-between;} .blog li { margin: 0 0 2%; width: 49%;} .blogImg { margin-bottom: 10px; height: 110px;} .blogText h2 { margin-bottom: 5px; font-size: 16px; line-height: 20px; height: 40px;} .blogText span { font-size: 12px; margin-bottom: 5px;} .blogText p { margin-bottom: 5px; font-size: 12px; height: 54px;} .homeVide { margin: 20px auto; height: 200px;} .homeVide span { width: 32px; height: 32px; background-size: 100% auto!important;} .serviceTip ul { justify-content: space-between; flex-wrap: wrap;} .serviceTip li { margin-bottom: 2%; width:49%;} .serviceTip li img { margin-right: 10px; width:24px} .serviceTip li h2 { margin-bottom: 0; font-size: 14px;} .serviceTip li p { font-size: 12px;} .tipText { width: calc(100% - 34px);} .serviceTip { margin-bottom: 20px;} .blog { margin-bottom: 20px;} .inBanner { height: 200px;} .aboutCont p { font-size: 16px; line-height: 1.5;} .articleTitle h2 { font-size: 20px; line-height: 1.25; margin-bottom: 10px;} .articleTitle span { font-size: 14px;} .articleDesc h2 { font-size: 18px; line-height: 1.25; margin-bottom: 10px;} .articleDesc h3 { line-height: 1.25; margin-bottom: 10px;} .homeTitle { font-size: 20px;} .articleCont { padding: 30px 0;} .carNotice { font-size: 12px;} .carTable .carProduct img { width: 100px;} .carTable .carProduct span { font-size: 14px;} .subBtn { margin-top: 20px;} .subBtn a.debrief,.subBtn a.keepShopping { font-size: 12px;} .carSuccess { padding: 30px 4%;} .carSuccess p { font-size: 16px;} .groupSlide { width: 100%; flex: 1; margin: 0 0 10px;} .formGroup { flex-wrap: wrap; flex-direction: column;} .userDetail li { margin-bottom: 10px;} .formGroup{ margin-bottom: 10px;} .userDetail button.saveBtn { margin: 20px auto 0;} .confirmFlex { flex-direction: column;} .confirmInfor { max-width: 100%; padding: 20px;} .confirmTitle { font-size: 20px; margin-bottom: 20px;} .inforTitle { font-size: 16px; margin-bottom: 10px;} .confirmInfor li { margin-bottom: 10px;} .cellSelect { flex-direction: column; gap: 10px;} .methodSlide { padding: 10px; margin-bottom: 10px;} .invoiceChose { flex-direction: column;} .invoiceChose span { width: 100%; margin: 0 0 10px;} .orderView { width: 100%; margin: 10px 0 0; padding: 20px;} .contactPage { padding: 30px 0;} .contactDesc { padding: 30px 4%;} .formTitle { margin: 20px 0;} .contactForm { padding: 20px;} .contactForm li { margin-bottom: 10px;} .possible p { margin-right: 10px; font-size: 13px;} .contactForm h3 { line-height: 1.25;} .subNotice { padding-bottom: 20px;} .userDetail li { flex: 1; width: 100%;} .couponsDesc { margin-left: 20px;} .couponsTicket h2 { margin-bottom: 5px; font-size: 20px;} .couponsTicket h2 sup { font-size: 12px;} .couponsTicket p { font-size: 12px;} .couponsDesc p { white-space: nowrap;} .couponsTicket { height: 80px;} .bannerText { top: auto; bottom: 20px;} .bannerText h2 { font-size: 20px; margin-bottom: 10px;} .bannerText p { font-size: 12px; line-height: 1.25;} .resignForm { padding: 20px 0;} .resignCont { margin: 30px auto;} .forget a { font-size: 14px;} .otherLogin { margin-top: 10px;} .otherType { padding: 10px 0;} .resignForm li { margin-bottom: 10px;} .forget { margin-bottom: 10px;} .orderList li { padding-bottom:20px; margin-bottom: 20px; flex-direction: column;} .orderPic { margin-right:20px;} .orderControl h2,.orderControl p { text-align: left; margin-bottom: 10px;} .orderControl p { margin-bottom: 20px;} .orderControl { margin-top: 20px;} .orderStep { margin-top: 20px; padding: 20px;} .orderStep dl { padding-top: 15px;} .proTable { overflow-x: auto;} .proTable table { min-width: 500px;} .listProduct td img { margin-right: 15px; width: 80px;} .proTable td { font-size: 14px;} .proTable th { padding-bottom: 10px;} .costInfor p { line-height: 32px; justify-content: space-between;} .delivery p { justify-content: space-between; text-align: right;} .delivery p span { min-width: 125px; text-align: left;} .listProduct { padding-top: 20px;} .payMethod { padding: 20px 0;} .invoices { padding-top: 20px;} .invoicesCont { flex-direction: column;} .invoiceDesc p { margin-bottom: 0;} .userIcons { padding: 20px 10px;} .uploadIcon { margin: 0 auto 20px;} .userIcons { flex-direction: column; text-align: center;} .uploadText h2 { margin-bottom: 10px;} .pointsCont { align-items: center; padding: 20px;} .pointsDetail { margin-bottom: 0;} .detailText p { font-size: 16px; margin-bottom: 0;} .detailText span { font-size: 20px;} .pointsDetail img { width: 32px; margin-right:12px;} .pointsTable { margin-top: 20px;} .pointsTable h2 { font-size: 16px;} .pointsTable th { font-size: 14px;} .pointsTable td { padding: 20px 0; font-size: 12px;} .scrollBox { overflow-y: auto; height: 100%; padding: 0 20px;} .typeList { padding-top: 20px; margin-top: 20px;} .typeList li h2 { font-size: 16px; margin-bottom: 16px;} .typeList li { padding-bottom: 20px; margin-bottom: 20px;} .searchTop { flex-direction: column;align-items: start;} .selectedType { margin-bottom: 10px;} .searchTop .mobMenu { bottom: 0;} .productList li { width: 49%; margin: 0 0 10px;} .productList ul { margin-bottom: 20px; justify-content: space-between;} .fpage a { font-size: 12px; width: 26px; height: 26px; margin: 0 2px;} .productPage { padding: 30px 0;} .productDetail { flex-direction: column;} .proSwiper { width: 100%;} .proSwiper .mySwiper2 { height: auto; width: 90%;} .bottomSwiper { width: 90%;} .proSwiper .mySwiper { width: 100%; height: auto;} .productDetail { margin: 30px auto;} .sellTag span { font-size: 14px;} .proSwiper { padding-bottom: 20px;} .introduceTit h2 { font-size:18px; margin-bottom: 10px; line-height: 1.25;} .introduceTit .star { margin-bottom: 10px;} .introduceTit p, .introduceTit p span { font-size: 16px;} .introduceTit p { margin-bottom: 10px;} .introduceOffer a { font-size: 14px; line-height: 2.5; height: auto;} .introduceOffer p { font-size: 14px;} .typeChose li h2 { font-size: 16px; margin-bottom: 10px;} .skuSlide span { font-size: 12px; padding:5px 10px;} .skuSlide { gap: 10px;} .numControlBar a { height: 30px; width: 30px;} .numControlBar input { width:90px;} .quantityCont p { font-size: 16px; line-height: 32px;} .proIntroduce button.addCar { font-size: 16px; line-height: 2.5; height: auto;} .applySub img { height: 30px;} .productArt { padding: 0 4%;} .intHd span { font-size: 16px; margin: 0; padding: 0 5px; line-height: 2.5;} .intHd span::after { height: 2px; bottom: 0;} .descSlide { padding-bottom: 30px;} .relatedProduct { padding: 30px 0;} .relatedProduct .promotionSwiper .hotPic { height: 200px;} .intHd { gap: 40px;} .newsPage .fpage { padding: 30px 0; margin-top: 30px;} .cookieAlt h2 { font-size:14px; margin-bottom: 20px;} .cookieAlt p { margin-bottom: 20px; font-size: 12px;} .cookieAlt { padding: 20px;} .cookieAlt a { font-size: 14px; line-height: 32px; width: 160px;} .cookieAlt a.upAge { margin-bottom: 10px;} .order_type ul { flex-direction: row; justify-content: start; overflow-x: auto; padding: 10px 0;} .order_type li {width: auto; flex: auto; margin-right: 20px!important; white-space: nowrap; line-height: 1.5;} /*review*/ .basedCont { margin-bottom: 10px;} .reviewTitle { flex-direction: column; justify-content: start; align-items: start;} .reviewSearch select { font-size: 14px; margin-left: 0; margin-right: 20px;} .reviewSearch { margin-top: 10px;} .reviewAlt { padding: 15px;} .reviewForm dt { margin-bottom: 10px;} .reviewForm dt input[type="text"] { font-size: 14px;} .reviewForm dt textarea { height: 100px; font-size: 14px;} .reviewButton a { line-height: 32px; font-size: 14px;} .imgClick { width:80px; height:80px;} .imgAll li { width: 80px; height: 80px; margin-right: 6px;} .imgAll li img { width: 100%; height: 100%; object-fit: cover;} .imgClick p { display: none;} .imgClick img { margin: 0;} .orderInfor li { margin-bottom: 6px;} .points-discount { font-size: 12px;} .buyerMessageArea { padding: 10px!important; width:190px!important;} .referrerInp { text-indent: 10px; width: 190px;} .payList svg { height: 35px;} /**/ .orderControl { flex-direction: column;} .orderState { flex-direction: column; align-items: start;} .productDesc { font-size: 14px;} .descFlex { flex-direction: column!important;} .descFlex>div { width: 100%;} .descImg { margin-bottom: 10px;} }