@charset "UTF-8";
.special-banner {position: relative;}
.special-banner img{width: 100%;}
.special-banner .text{position: absolute; top: 50%; left: 0; right: 0;margin: auto; text-align: center;}
.special-banner .text h1{color: #fff;}
.special-banner .text p{font-size: 22px;color: #fff;}
.special-banner .text .btn{border:1px solid #fff; border-radius: 6px; padding: 5px 20px; font-size: 18px;color: #fff;}
.special-banner:hover .text .btn{background: #007fdc; border-color: #007fdc}

.dateline{background: #FAFAFA; width: 100%;text-align: center;padding: 40px 0 50px}
.dateline .dateline-wrapper{display: flex; justify-content: center;gap:50px;position: relative;}
.dateline .dateline-wrapper:before{content: ""; height: 1px; background: #00000026; width: 80%; position: absolute; top: 32px;}
.dateline .dateline-item{position: relative; z-index: 1}
.dateline .icon{background: url(../img/special-bgicon.png) center no-repeat; width: 66px;font-size: 28px; font-weight: 600;line-height: 56px;background-size: 100%; color: #fff;margin: 0 auto 20px;}
.dateline .title{font-size: 18px; margin-bottom: 10px;}
.dateline .date{font-size: 18px; color: #222222}

.active-step h3{font-size: 32px;}
.active-step .step-wrapper{display: flex; justify-content: center;gap:10px;position: relative;}
.active-step .step-wrapper .step-item{width: 25%}
.active-step .step-wrapper .step-item:nth-child(1) .step{background-image: url(../img/special01.png);}
.active-step .step-wrapper .step-item:nth-child(2) .step{background-image: url(../img/special02.png);}
.active-step .step-wrapper .step-item:nth-child(3) .step{background-image: url(../img/special03.png);}
.active-step .step-wrapper .step-item:nth-child(4) .step{background-image: url(../img/special04.png);}
.active-step .step{position: relative; text-align: center;background-repeat: no-repeat; background-position: center; width: 174px; height: 128px; margin: 0 auto}
.active-step .step i{font-size: 28px; font-style: normal; line-height: 128px; font-weight: 600}
.active-step .step:after{content: "";background: linear-gradient(90deg, #0080DD 0%, #4BB49C 50%, #FFB32F 100%); width: 54px; height: 10px; position: absolute;bottom: -10px;right: 0}
.active-step .txt{font-size: 18px;margin-top: 20px; text-align: center;}

.special-case h3{font-size: 32px;}
.special-case .case-wrapper{display: flex;}
.special-case .case-item{flex: 1; padding: 0 10px; text-align: center;}
.special-case .case-item img{width: 100%;}
.special-case .case-item .title{font-size: 18px;margin:20px 0 16px; line-height: 1.2; font-weight: 600}
.special-case .case-item .desc{font-size: 16px;}
.special-case .caseshow-wrapper{position: relative;width: 100%;}
.special-case .caseshow-wrapper .caseshow-item {position: absolute;width: calc(25% - 15px)}
.video{position: relative;}
.video i{font-size: 3rem; position: absolute; top: 0;left: 0;right: 0; bottom: 0; margin: auto; color: rgba(255,255,255,.6); width: 48px; height: 48px;}
.video a:hover i{color: rgba(244,173,52,.9);}
.special-case .caseshow-wrapper .caseshow-item .img{position: relative;}
.special-case .caseshow-wrapper .caseshow-item img,.special-case .caseshow-wrapper .caseshow-item video{width: 100%}
.special-case .caseshow-wrapper .caseshow-item a span{position: absolute; bottom: 10px; left: 10px; color: #fff}

.special-rule .container{padding: 0}
.special-rule .rule-wrapper{background: #FAFAFA; padding: 45px;}
.special-rule .rule-wrapper h3{font-size: 32px;}
.special-rule .rule-flex{display: flex; justify-content: center;gap:50px;position: relative; gap:100px;}
.special-rule .rule-item{text-align: center;}
.special-rule .rule-item .icon{margin-bottom: 20px;}
.special-rule .rule-item .title{font-size: 18px;text-align: center;}
.special-rule .rule-desc{font-size: 18px; max-width: 1000px;margin: 40px auto 0;}

.special-award h3{font-size: 32px;}
.special-award h3 span{font-size: 48px; color: rgba(255, 179, 47, 1)}
.special-award .award-wrapper{display: flex; justify-content: center;gap:60px;position: relative;}
.special-award .award-wrapper .item{ align-self: flex-end;}
.special-award .award-wrapper .item .info{background: linear-gradient(180deg, #0080DD 0%, #FFFFFF 100%);border-radius: 0px 0px 12px 12px; text-align: center;padding: 10px 10px 20px; box-shadow: 0 0 10px 0 rgba(53, 57, 69, 0.1)}
.special-award .award-wrapper .item:nth-child(2) .info{background: linear-gradient(180deg, #4BB49C 0%, #FFFFFF 100%);}
.special-award .award-wrapper .item:nth-child(3) .info{background: linear-gradient(180deg, #FFB32F 0%, #FFFFFF 100%);}
.special-award .award-wrapper .item .info h2 {font-size: 30px;}
.special-award .award-wrapper .item:nth-child(2) h2{padding: 10px 0;}
.special-award .award-wrapper .item .info h2 span{font-size: 50px;}
.special-award .award-wrapper .item .info h3{font-size: 20px; border-bottom: 1px solid #3E3E3E4D; padding-bottom: 5px;}
.special-award .award-wrapper .item:nth-child(2) .info h3{padding-bottom: 20px;}
.special-award .award-wrapper .item .info .desc,.special-award .award-wrapper .item .info .desc p{font-size: 20px;}
.special-award .best{box-shadow: 0 0 10px 0 rgba(53, 57, 69, 0.1); border-radius: 12px;padding: 30px 0 10px; text-align: center;}
.special-award .best .besttxt .tit{font-size: 30px;font-weight: 600; color: #0080DD}
.special-award .best .besttxt .tit span{font-size: 52px}
.special-award .best .besttxt .tit img{width: 90px; margin-left: 20px;}
.special-award .best .besttxt p{color: #0080DD;}

.newsletter-area{background: linear-gradient(90deg, #0080DD 0%, #4BB49C 50%, #FFB32F 100%)}
.newsletter-wrapper{background: none}
.newsletter-content .section-main-title{color: #fff;}
.newsletter-content p{color: #fff;max-width: 100%; font-size: 18px;}
.newsletter-content p a{text-decoration: underline;}
.newsletter-content .text-btn{color: #fff;background: #0080DD; padding: 8px 20px; border-radius: 8px; text-transform: uppercase; font-size: 16px;}
.newsletter-wrapper{padding: 40px 0 0;}

.special-new h3{font-size: 32px;}
.special-new .new-wrapper1{position: relative;}
.special-new .single-product{box-shadow: none}

.choose-right .accordion-item{border-bottom: 1px solid rgba(0, 0, 0, 0.3); border-top: none; border-right: none; border-left: none; border-radius: 0; margin-bottom: 10px}
.choose-right .accordion-button{padding: 10px 0; font-weight: 400}
.choose-right .accordion-button::after{top: 10px;content: "\f078"}
.choose-right .accordion-button:not(.collapsed)::after{top: 10px;content: "\f077"; right: 20px}

.christmasform{padding: 40px; background: #fff; border-radius: 12px;}
.christmasform h1{color:rgba(255, 179, 47, 1); font-size: 34px;}
.christmasform h3{font-size: 20px;margin-bottom: 20px;}
.christmasform .title{font-size: 16px; color: #000; line-height: 40px; font-weight: 500}
.christmasform .christmas-goods{border-radius: 12px; overflow: hidden;position: relative;}
.christmasform .christmas-goods img{width: 100%}
.christmasform .christmas-goods .goodsinfo{position: absolute; bottom: 20px;left: 20px; right: 20px; margin: auto; display: flex; color: #fff; justify-content: space-between;}
.christmasform .christmas-goods .goodsinfo h2{color: #fff;}
.christmasform .christmas-goods .goodsinfo p{color: #fff;margin: 0}
.christmasform .christmas-goods .goodsinfo .info{align-self: flex-end}
.christmasform .christmas-goods .goodsinfo .gbtn{align-self: flex-end}
.christmasform .christmas-goods .goodsinfo .btn-special{border:1px solid #fff; border-radius: 6px; padding: 5px 20px; font-size: 18px;color: #fff;}
.christmasform .nice-select {border: 1px solid var(--clr-common-border);height: 48px;line-height: 38px;padding-left: 14px;width: 100%;color: #575757;margin-bottom: 15px;}
.christmasform .nice-select .list{width: 100%;}
.christmasform .share{display: flex; justify-content: space-between;border: 1px solid var(--clr-common-border);height: 48px;line-height: 48px;border-radius: 4px}
.christmasform .share label{padding-left: 14px;color: #575757;}

.s-banner img{width: 100%}
.registration ::placeholder,.registration .input-outline, .registration .textarea-outline,.registration.christmasform .nice-select,.registration .input-label{font-size: 14px;}