:root {
	  --centerContent-width: 16rem;
 }
 
/* 公共 */
.title{ font-size: var(--font-size-12);  line-height: 1.85; }
.promotion{background-color: var(--color-gray-484848);  min-height: 100vh; color: var(--color-gray-dcdcde); background:#0c1417 url(../images/promotion/promotion_bg.jpg) no-repeat top center; background-size: 100% auto;}
.promotion .banner{width: 100%; height: 100vh; /*background: url(../images/promotion/banner.jpg) no-repeat top center;  background-size: cover;*/ position: relative;}
.promotion .banner .word{ right: 1.6rem; position: absolute; top: 50%; transform: translateY(-50%);  font-size:var(--font-size-20); line-height: 1.48rem; text-align: right;  width: 50%;}
.standard{width: 100%; /*background: url(../images/promotion/p1_bg.png) no-repeat top center; background-size: cover;*/padding-top: 0.84rem; }
.standard .title{ width: var(--centerContent-width); margin: 0 auto; font-family:'SOURCEHANSANSCN-BOLD';}
.standard .message{font-family:'SOURCEHANSANSCN-REGULAR'; width: var(--centerContent-width); margin: 0 auto; display: flex; justify-content: space-between; padding-bottom: 1.04rem;}
.standard .message .t{font-size:var(--font-size-8); margin-bottom: 0.1rem;}
.standard .message .con{font-size: var(--font-size-2); line-height:1.6; width: 7.6rem;}
.standard .message .con p{ position: relative; padding-left: 0.22rem;}
.standard .message .con p::before{ content: ""; display: block; width: 0.1rem; height: 0.1rem; background-color: var(--color-gray-dcdcde); border-radius: 50%; position: absolute; left: 0; top: 0.1rem; }
.standard .from{ width: var(--centerContent-width); margin: 0 auto; margin-bottom: 1.34rem;}
.standard .from img{width: 100%;} 
.storeList{width: var(--centerContent-width); margin: 0 auto; display: flex;  flex-wrap: wrap; justify-content: space-between; padding-bottom: 1.24rem;}
.storeList .p0{width: 100%; margin-bottom: 0.32rem;}
.storeList .p1,.storeList .p2{width: 7.84rem;}
.requirement{ background: url(../images/promotion/p3_bg.jpg)no-repeat top center; background-size: cover; height: 100vh; width: 100%;}
.requirement .title{width: var(--centerContent-width); margin: 0 auto; text-align: center; padding-top: 1.38rem; margin-bottom: 0.16rem;}
.requirement .content{width: var(--centerContent-width); margin: 0 auto; display: flex; justify-content: center; font-size: var( --font-size-8); height: 0.66rem;}
.requirement .content a{ height: 100%; display: block; width: 4.04rem; line-height: 0.66rem; text-align: center; position: relative; cursor: pointer; opacity: 0.5;  transition: all 0.5s;}
.requirement .content a::before{ position: absolute; content: ""; width: 1.66rem; height: 0.03rem; background-color: var(--color-gray-dcdcde); left: 50%; bottom: 0; transform: translateX(-50%) scaleX(0); opacity: 0; transition: all 0.5s; }
.requirement .content a.on{opacity: 1;}
.requirement .content a:hover::before, .requirement .content a.on::before{ transform: translateX(-50%) scaleX(1); opacity: 1;}
.requirement ul{width: var(--centerContent-width); margin: 0 auto; margin-top: 0.98rem; position: relative;}
.requirement ul li{opacity: 0; visibility: hidden; transition: all 0.5s; display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between; position: absolute; top: 0; left: 0;}
.requirement ul li.on{opacity: 1; visibility: visible;}
.requirement .box{ width: 3.78rem; height: 2.12rem; border: rgba(220, 220, 220, 0.5) 1px solid;  font-size: var(--font-size-2); margin-bottom: 0.42rem; }
.requirement .box .t{height: 0.42rem; line-height: 2.3; text-align: center; border-bottom: rgba(220, 220, 220, 0.5) 1px solid; width: 3.28rem; margin: 0 auto; padding-top: 0.16rem;}
.requirement .box .con{ padding: 0.2rem 0.12rem 0;  text-align: justify; line-height: 1.4; text-align: center;}

.process{background: url(../images/promotion/p4_bg.jpg)no-repeat top center; background-size: cover; height: 100vh; width: 100%;}
.process .title{width: var(--centerContent-width); margin: 0 auto; text-align: center; padding-top: 1.38rem; margin-bottom: 0.16rem;}
.process .suTitle{width: 11.9rem; margin: 0 auto; text-align: center; line-height: 1.6; font-size: var(--font-size-2);}
.process .content{width: var(--centerContent-width); margin: 0 auto; display: flex; justify-content: center; font-size: var( --font-size-8); height: 0.66rem;}
.process .content a{ height: 100%; display: block; width: 4.04rem; line-height: 0.66rem; text-align: center; position: relative; cursor: pointer; opacity: 0.5;  transition: all 0.5s;}
.process .content a::before{ position: absolute; content: ""; width: 1.66rem; height: 0.03rem; background-color: var(--color-gray-dcdcde); left: 50%; bottom: 0; transform: translateX(-50%) scaleX(0); opacity: 0; transition: all 0.5s; }
.process .content a.on{opacity: 1;}
.process .content a:hover::before, .process .content a.on::before{ transform: translateX(-50%) scaleX(1); opacity: 1;}
.process ul{width: 100%; position: relative; margin-top: 0.5rem;}
.process ul li{opacity: 0; visibility: hidden; transition: all 0.5s; display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between; position: absolute; top: 0; left: 0;}
.process ul li.on{opacity: 1; visibility: visible;}
.process .step{width: var(--centerContent-width); margin: 0 auto; display: flex; flex-wrap:wrap; justify-content: space-between; }
.process .step .item{width:33.33%; height: 2.38rem; display: flex; align-items: center;}
.process .step .item .num{width:0.98rem;margin-left: 0.24rem;}
.process .step .item .num img{width: 100%;}
.process .step .item .word{ min-height: 1.1rem; margin-left: 0.1rem; width: 80%;}
.process .step .item dt{font-size: var(--font-size-6); line-height: 1.6;}
.process .step .item p{ position: relative; padding-left: 0.22rem; font-size: var(--font-size-2);}
.process .step .item p::before{ content: ""; display: block; width: 0.1rem; height: 0.1rem; background-color: var(--color-gray-dcdcde); border-radius: 50%; position: absolute; left: 0; top: 0.1rem; }
.process .step .item:nth-child(1),.process .step .item:nth-child(2),.process .step .item:nth-child(3){border-bottom: var(--color-gray-dcdcde) 1px solid;}



.joinUs{background: url(../images/promotion/p5_bg.jpg)no-repeat top center; background-size: cover; height: 100vh; width: 100%; display: flex; justify-content: center; align-items: end;}
.joinUs .word{ margin-bottom: 0.94rem; width: 6.52rem; text-align: center; color: var(--color-gray-dcdcde);}
.joinUs .word .title{line-height: 2.5;}
.joinUs .mail{display: flex; justify-content: center; align-items: center;  font-size: var(--font-size-3); cursor: pointer; height: 1.12rem; width: 100%; border: var(--color-gray-dcdcde) 1px solid; color: var(--color-gray-dcdcde);}
.joinUs .mail img{width:0.5rem; margin-right: 0.18rem;}


@media (max-width: 768px){
    :root {
	  --centerContent-width: 6.9rem;
 }
 
 .promotion{background-image:url(../images/promotion/promotion_bg_mb.jpg)}
 .promotion .banner{ height: 15.94rem;}
 .promotion .banner .word{right: 0.4rem; transform:initial; top: 4.2rem; width: 98%;}
 .standard{padding-top: 0;}
 .standard .message{flex-direction: column; align-items: center;}
 .standard .message li{width: 100%;}
 .title{ line-height: 2.08;}
 .standard .message{ margin-top: 0.34rem;}
 .standard .message .t{ line-height: 2.6; margin-bottom: 0.2rem; margin-left: 0.2rem;}
 .standard .message .con{width: 96%; text-align: justify; line-height: 1.16;}
 .standard .message .con p{padding-left: 0.6rem; margin-bottom: 0.58rem;}
 .standard .message .con p::before{ margin-left: 0.36rem;}
/* 修改滚动条bar颜色为--color-yellow */
.standard .from::-webkit-scrollbar-thumb {
  background-color: var(--color-yellow);
}
.standard .from::-webkit-scrollbar {
  width: 6px;
  background: transparent;
  display: block;
}
.standard .from {
  overflow-x: scroll;
  scrollbar-color: var(--color-yellow) transparent;
  scrollbar-width: thin;
  padding-bottom: 0.4rem;
}
 .standard .from img{width: 16rem;}
 .storeList .p0, .storeList .p1, .storeList .p2{width: 100%; margin-bottom: 0.5rem;}
 .requirement{height:30.86rem; background-image: url(../images/promotion/p3_bg_mb.jpg)}
 .requirement .title{padding-top:0.74rem; margin-bottom: 0.44rem;}
 .requirement .content a{line-height: 0.72rem;}
 .requirement ul{ margin-top: 0.74rem;}
 .requirement .box{width: 100%; height:2.96rem;margin-bottom: 0.36rem;}
 .requirement .box .t{ width: 86%; height: 0.66rem; line-height: 2.3; padding-top: .1rem;}
 .requirement .box .con{ padding: 0.22rem 0.4rem 0; line-height: 1.84;}
 .process{ height: 20.86rem; background-image: url(../images/promotion/p4_bg_mb.jpg)}
 .process .title{line-height: 1.2;}
 .process .suTitle{width: var(--centerContent-width); margin: 0.38rem auto; line-height: 1.8; }
 .process .step{margin-top: 0.38rem;}
 .process .step .item{width: 100%; border-bottom: var(--color-gray-dcdcde) 1px solid;}
 .process .step .item:last-child{ border-bottom: none;}
 .process .step .item .word{height: auto; }
 .joinUs{ background-image: url(../images/promotion/p5_bg_mb.jpg);}
 .joinUs .word{margin-bottom: 2.94rem;}
}