.page-index .block-title { font-weight: 700; font-size: 50px; line-height: 1; }

.index-kv-outer { min-height: 95vh; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: -20%; overflow: hidden; }

.index-kv-outer .circle-outer { position: relative; width: 70%; aspect-ratio: 1/1; max-width: 1900px; }

.index-kv-outer .circle-outer:after { content: ''; display: block; background: url(../images/index/index-circle.png) no-repeat center; background-size: 100% auto; aspect-ratio: 1/1; position: absolute; left: -36%; top: -59%; width: 142%; -webkit-animation: circleRotateReverse 200s 0s infinite linear; animation: circleRotateReverse 200s 0s infinite linear; -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); z-index: -1; }

.index-kv-outer .circle { overflow: hidden; border-radius: 100%; position: absolute; left: -29%; top: -52%; width: 127%; aspect-ratio: 1/1; -webkit-transform: translateZ(0); transform: translateZ(0); }

.index-kv-outer.debug * { border: 1px dotted #aaa; }

.index-kv-outer.debug .inner-circle { border: 1px solid red; }

.index-kv-outer.debug .circle-outer:after { border: 1px solid blue; }

.index-kv-outer .inner-circle { position: absolute; pointer-events: none; }

@media screen and (max-width: 1200px) { .index-kv-outer { margin-bottom: -25%; }
  .index-kv-outer .circle { top: -43%; }
  .index-kv-outer .circle-outer:after { left: -36%; top: -49%; } }

@media screen and (max-width: 1100px) { .index-kv-outer { margin-bottom: -30%; } }

@media screen and (max-width: 1000px) { .index-kv-outer { margin-bottom: -45%; } }

@media screen and (max-width: 900px) { .index-kv-outer { margin-bottom: 0; overflow: hidden; -ms-flex-wrap: wrap; flex-wrap: wrap; min-height: initial; }
  .index-kv-outer .circle { top: -43%; width: 159%; }
  .index-kv-outer .circle-outer { width: 100%; margin-top: -20%; margin-left: -20%; }
  .index-kv-outer .circle-outer:after { left: -40%; top: -54%; width: 180%; } }

.index-slide { width: 100%; top: 28%; height: 100%; }

.index-slide .swiper-slide { height: auto; overflow: hidden; opacity: 0; -webkit-transition: 1000ms opacity; -o-transition: 1000ms opacity; transition: 1000ms opacity; position: absolute; left: 0; top: 0; }

.index-slide .swiper-slide-active { opacity: 1; position: relative; }

.index-slide .imgbox .bg { max-width: initial; width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.index-slide .imgbox .inner-circle { position: absolute; width: 95%; top: -25%; left: 3%; aspect-ratio: 1/1; -webkit-animation: circleRotate 10s 0s infinite linear; animation: circleRotate 10s 0s infinite linear; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }

.index-slide .slide1 .bg { position: absolute; top: 1%; left: -9%; width: 110%; }

.index-slide .slide2 .bg { position: absolute; left: 22%; top: 10%; }

.index-slide .slide3 .bg { position: absolute; left: 22%; top: 12%; }

.index-slide .slide4 .bg { position: absolute; top: 7%; }

.index-slide.macos .inner-circle { top: 3%; }

.index-slide.macos .slide1 .bg { top: 31%; }

.index-slide.macos .slide2 .bg { top: 40%; }

.index-slide.macos .slide3 .bg { top: 40%; }

.index-slide.macos .slide4 .bg { top: 37%; }

@media screen and (max-width: 1200px) { .index-slide .slide2 .bg { left: 23%; top: 9%; }
  .index-slide .slide3 .bg { left: 23%; top: 7%; }
  .index-slide.ios .inner-circle { top: 3%; }
  .index-slide.ios .slide1 .bg { top: 30%; }
  .index-slide.ios .slide2 .bg { top: 39%; }
  .index-slide.ios .slide3 .bg { top: 37%; }
  .index-slide.ios .slide4 .bg { top: 37%; left: -6%; } }

.index-kv-outer .index-slide-pagination { width: auto; bottom: auto; position: absolute; margin-top: 20px; text-align: left; bottom: 60px; right: 400px; left: auto; }

.index-kv-outer .index-slide-pagination .swiper-pagination-bullet { background: #DCD6C8; opacity: 1; }

.index-kv-outer .index-slide-pagination .swiper-pagination-bullet-active { background: #9B8D62; opacity: 1; }

@media screen and (max-width: 1680px) { .index-kv-outer .index-slide-pagination { top: 80%; bottom: auto; } }

@media screen and (max-width: 1470px) { .index-kv-outer .index-slide-pagination { top: 70%; } }

@media screen and (max-width: 1200px) { .index-kv-outer .index-slide-pagination { top: 60%; right: 25%; } }

@media screen and (max-width: 1000px) { .index-kv-outer .index-slide-pagination { top: 50%; right: 25%; } }

@media screen and (max-width: 900px) { .index-kv-outer .index-slide-pagination { width: 100%; top: 0; margin-bottom: 50px; position: relative; right: 0; text-align: center; } }

.slide-txt-outer { position: absolute; right: 40px; top: 20%; width: 60%; height: 500px; margin-left: auto; margin-right: 40px; }

.slide-txt-outer .scroll-hint { width: 55px; height: 90px; margin-left: auto; margin-right: auto; margin-bottom: 5%; margin-left: 80%; -webkit-animation: scrollhint 3s 0s infinite alternate; animation: scrollhint 3s 0s infinite alternate; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); cursor: pointer; }

.slide-txt-outer .scroll-hint > img { max-width: 100%; }

@media screen and (max-width: 1680px) { .slide-txt-outer { margin-right: 0; }
  .slide-txt-outer .scroll-hint { margin-bottom: 0; margin-top: 5%; } }

@media screen and (max-width: 1200px) { .slide-txt-outer { margin-right: 0; top: 15%; } }

@media screen and (max-width: 1100px) { .slide-txt-outer { margin-right: 0; } }

@media screen and (max-width: 900px) { .slide-txt-outer { height: auto; width: calc(100% - 20px); position: relative; margin-top: 7%; right: 20px; }
  .slide-txt-outer .scroll-hint { display: none; } }

@media screen and (max-width: 650px) { .slide-txt-outer { margin-top: 12%; } }

@-webkit-keyframes scrollhint { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
  50% { -webkit-transform: translateY(0px); transform: translateY(0px); }
  100% { -webkit-transform: translateY(5px); transform: translateY(5px); } }

@keyframes scrollhint { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
  50% { -webkit-transform: translateY(0px); transform: translateY(0px); }
  100% { -webkit-transform: translateY(5px); transform: translateY(5px); } }

.index-slide-txt { height: 465px; margin-right: 0; }

.index-slide-txt .swiper-slide { height: auto; position: absolute; left: 0; top: 0; }

.index-slide-txt .swiper-slide-active { height: auto; position: relative; }

.index-slide-txt .txt, .index-slide-txt .txt-m { text-align: right; opacity: 0; -webkit-transition: 1s all; -o-transition: 1s all; transition: 1s all; }

.index-slide-txt .zh { color: #41200A; font-size: 4.7vw; font-weight: 700; white-space: nowrap; line-height: 1.2; }

.index-slide-txt .en { font-family: "Poppins", sans-serif; font-size: 2.5vw; font-weight: 200; color: #9B8D62; line-height: 1.2; margin-top: 15px; }

.index-slide-txt .txt-m { display: none; }

.index-slide-txt .swiper-slide-active .txt, .index-slide-txt .swiper-slide-active .txt-m { opacity: 1; }

.index-slide-txt .special { color: #fff; text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }

@media screen and (max-width: 2000px) { .index-slide-txt { margin-right: 0; } }

@media screen and (max-width: 1680px) { .index-slide-txt { height: auto; } }

@media screen and (max-width: 900px) { .index-slide-txt .txt-m { display: block; }
  .index-slide-txt .txt { display: none; } }

@media screen and (max-width: 600px) { .index-slide-txt .zh { font-size: 30px; }
  .index-slide-txt .en { font-size: 20px; } }

@media screen and (max-width: 370px) { .index-slide-txt .zh { font-size: 24px; }
  .index-slide-txt .en { font-size: 16px; } }

@-webkit-keyframes circleRotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@keyframes circleRotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@-webkit-keyframes circleRotateReverse { 0% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } }

@keyframes circleRotateReverse { 0% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } }

.lang-en .index-slide-txt .zh { white-space: normal; }

.debug-mode { -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); border: 1px solid red; }

.debug-mode .circle:after { content: ''; display: block; width: 10px; height: 10px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: blue; z-index: 1; }

.debug-mode .index-slide .imgbox .inner-circle { border: 1px solid red; }

.debug-mode .index-slide .imgbox .inner-circle:after { content: ''; display: block; width: 12px; height: 12px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: red; }

.index-fresh { position: relative; margin-bottom: 5%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 0; }

.index-fresh .inner { width: 30%; margin-left: 21%; position: relative; margin-right: 3%; }

.index-fresh .block-title { margin-bottom: 23px; text-align: right; line-height: 1.2; }

.index-fresh .txt { width: 400px; line-height: 1.8; font-size: 20px; font-weight: 300; position: absolute; right: 80px; }

.index-fresh .slogan { font-family: "Poppins", sans-serif; font-weight: 200; font-size: 78px; position: absolute; white-space: nowrap; left: 15%; margin-top: 180px; line-height: 1; z-index: 1; }

.index-fresh .dash-vertical { background: url(../images/index/dash-vertical.gif) repeat-y top center; background-size: 100% auto; width: 13px; height: 216px; position: absolute; top: 120px; right: 26px; }

.index-fresh .dash-vertical:before { content: ''; display: block; width: 100%; position: absolute; top: 0; height: 20px; background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), to(white)); background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, white 100%); background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, white 100%); background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 100%); }

.index-fresh .dash-vertical:after { content: ''; display: block; width: 100%; position: absolute; bottom: 0; height: 30px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white)); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%); }

.index-fresh .bg { position: relative; overflow: hidden; width: 46%; }

.index-fresh .bg img { width: 100%; max-width: initial; }

.index-fresh .bg .dash-animate { position: absolute; left: 20px; top: 10px; width: 100%; height: calc(100% - 20px); pointer-events: none; }

@media screen and (max-width: 1700px) { .index-fresh { padding-bottom: 12%; } }

@media screen and (max-width: 1300px) { .index-fresh { padding-bottom: 15%; }
  .index-fresh .inner { width: 40%; margin-left: 11%; } }

@media screen and (max-width: 1100px) { .index-fresh { padding-bottom: 25%; } }

@media screen and (max-width: 980px) { .index-fresh .block-title { font-size: 30px; }
  .index-fresh .txt { width: auto; font-size: 15px; right: 80px; }
  .index-fresh .dash-vertical { right: 34px; top: 80px; }
  .index-fresh .inner { margin-left: 0; padding-left: 15px; width: 50%; }
  .index-fresh .bg { width: 50%; } }

@media screen and (max-width: 810px) { .index-fresh { -ms-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: 280px; overflow: hidden; }
  .index-fresh .block-title { font-size: 46px; }
  .index-fresh .dash-vertical { top: 120px; }
  .index-fresh .inner { width: 100%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
  .index-fresh .bg { width: 100%; position: relative; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-bottom: 5%; }
  .index-fresh .bg > img { width: 80%; margin-right: 0; margin-left: auto; }
  .index-fresh .bg .dash-animate { width: 80%; left: auto; right: -10px; top: 5px; }
  .index-fresh .slogan { font-size: 60px; margin-top: 150px; left: auto; right: 0; } }

@media screen and (max-width: 550px) { .index-fresh { padding-bottom: 240px; }
  .index-fresh .block-title { font-size: 30px; }
  .index-fresh .dash-vertical { top: 80px; }
  .index-fresh .slogan { font-size: 40px; } }

@media screen and (max-width: 410px) { .index-fresh .txt { font-size: 13px; } }

@-webkit-keyframes border-dance { 0% { background-position: 0 0, 100% 100%, 0 100%, 100% 0; }
  100% { background-position: 100% 0, 0 100%, 0 0, 100% 100%; } }

@keyframes border-dance { 0% { background-position: 0 0, 100% 100%, 0 100%, 100% 0; }
  100% { background-position: 100% 0, 0 100%, 0 0, 100% 100%; } }

@-webkit-keyframes dash-animation { from { background-position: 0 0; }
  to { background-position: 3000px 0; } }

@keyframes dash-animation { from { background-position: 0 0; }
  to { background-position: 3000px 0; } }

.fresh-bg-slide .swiper-slide { position: absolute; left: 0; top: 0; opacity: 0; -webkit-transition: 50ms opacity; -o-transition: 50ms opacity; transition: 50ms opacity; }

.fresh-bg-slide .swiper-slide-active { position: relative; opacity: 1; }

.lang-en .index-fresh { margin-bottom: 6%; }

.lang-en .index-fresh .slogan { margin-top: 220px; }

@media screen and (max-width: 810px) { .lang-en .index-fresh .slogan { font-size: 40px; margin-top: 150px; } }

.index-service { position: relative; text-align: center; padding-top: 3.6%; margin-bottom: 3%; }

.index-service .block-title { margin-bottom: 1.5%; }

.index-service .block-title .zh { display: block; margin-bottom: 15px; }

.index-service .block-title .en { font-family: "Poppins", sans-serif; font-weight: 200; font-size: 78px; display: block; }

.index-service:after { background: #F3F0EB; width: 100%; height: 90%; position: absolute; top: 0; left: 0; z-index: -1; content: ''; }

@media screen and (max-width: 1100px) { .index-service { padding-left: 15px; padding-right: 15px; } }

@media screen and (max-width: 950px) { .index-service { padding-top: 10%; } }

@media screen and (max-width: 550px) { .index-service { padding-top: 15%; padding-bottom: 15%; }
  .index-service:after { height: 100%; padding-bottom: 50px; }
  .index-service .block-title { margin-bottom: 5%; }
  .index-service .block-title .zh { margin-bottom: 5px; }
  .index-service .block-title .en { font-size: 26px; } }

.userhtml .service-list { list-style: none; list-style: none; padding-left: 0; }

.service-list { max-width: 1080px; margin-left: auto; margin-right: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.service-list > li { width: 30%; position: relative; }

.service-list > li:hover .imgbox:after { opacity: 1; -webkit-transition: 500ms all; -o-transition: 500ms all; transition: 500ms all; }

.service-list > li:hover .icon { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.service-list .imgbox { width: 100%; padding-bottom: 100%; border-radius: 100%; overflow: hidden; position: relative; }

.service-list .imgbox > img { position: absolute; }

.service-list .imgbox:after { content: ''; display: block; background: rgba(153, 153, 153, 0.7); position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 1; opacity: 0; -webkit-transition: 500ms all; -o-transition: 500ms all; transition: 500ms all; mix-blend-mode: multiply; border-radius: 100%; }

.service-list h3 { font-size: 28px; margin-bottom: 20px; font-weight: 500; }

.service-list .icon { left: 50%; top: 50%; -webkit-transform: translate(-50%, 250%); -ms-transform: translate(-50%, 250%); transform: translate(-50%, 250%); z-index: 2; width: 80px; -webkit-transition: 500ms all; -o-transition: 500ms all; transition: 500ms all; }

.service-list .bg { max-width: 100%; max-height: 100%; }

.service-list a:hover { text-decoration: none; }

@media screen and (max-width: 800px) { .service-list { padding-left: 5%; padding-right: 5%; }
  .service-list > li { width: 100%; margin-bottom: -3%; }
  .service-list > li > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .service-list > li .imgbox { width: 50%; aspect-ratio: 1/1; padding-bottom: 0; }
  .service-list > li h3 { width: 50%; }
  .service-list > li:nth-child(odd) .imgbox { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
  .service-list > li:nth-child(odd) h3 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; text-align: left; padding-left: 5%; }
  .service-list > li:nth-child(even) .imgbox { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
  .service-list > li:nth-child(even) h3 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; text-align: right; padding-right: 5%; }
  .service-list .icon { width: 50px; } }

@media screen and (max-width: 550px) { .service-list h3 { font-size: 20px; } }

.block-step { background: url(../images/index/stepbg.png) no-repeat right top; background-size: 650px auto; padding-top: 7%; }

.block-step .btn-more:after { position: absolute; right: 15px; top: 50%; margin-top: -2px; content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 3px 0 3px 5.2px; border-color: transparent transparent transparent #7F4918; }

.block-step .btn-more:hover { text-decoration: none; }

.block-step .btn-more:hover:after { border-color: transparent transparent transparent #fff; }

.block-step .inner { max-width: 1040px; margin-left: auto; margin-right: auto; }

.block-step .step-outer-m { display: none; }

@media screen and (max-width: 1100px) { .block-step { background: url(../images/index/stepbg.png) no-repeat right 5%; background-size: 40% auto; }
  .block-step .step-outer { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; margin-left: -25px; }
  .block-step .inner { padding-left: 15px; height: 650px; } }

@media screen and (max-width: 980px) { .block-step .step-outer { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); margin-left: -16%; }
  .block-step .inner { padding-left: 15px; height: 600px; } }

@media screen and (max-width: 780px) { .block-step { background: url(../images/index/stepbg.png) no-repeat right 180px; background-size: 80% auto; }
  .block-step .inner { height: auto; }
  .block-step .step-outer-m { display: block; margin-bottom: 10%; padding-left: 15px; padding-right: 15px; }
  .block-step .step-outer { display: none; } }

.step-inner { width: 1040px; height: 400px; position: relative; margin-left: auto; margin-right: auto; }

.step-inner.debug > div { border: 1px solid red; }

.step-inner > div { font-size: 0; position: absolute; cursor: pointer; -webkit-transition: 500ms all; -o-transition: 500ms all; transition: 500ms all; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }

.step-inner > div.active { pointer-events: none; }

.step-inner > div.active:hover { opacity: 1; }

.step1 { width: 190px; height: 355px; left: 0; top: 10px; z-index: 0; background-image: url(../images/index/step1a.png); }

.step1.active, .step1.hover, .step1.done:hover { background-image: url(../images/index/step1.png); }

.step1.done { background-image: url(../images/index/step1a.png); }

.step2 { width: 344px; height: 308px; left: 156px; top: 88px; z-index: 0; background-image: url(../images/index/step2a.png); }

.step2.active, .step2:hover, .step2.done:hover { background-image: url(../images/index/step2.png); }

.step2.done { background-image: url(../images/index/step2b.png); }

.step3 { width: 253px; height: 327px; left: 446px; top: 19px; z-index: 0; background-image: url(../images/index/step3a.png); }

.step3.active, .step3:hover, .step3.done:hover { background-image: url(../images/index/step3.png); z-index: 2; }

.step3.done { background-image: url(../images/index/step3b.png); }

.step4 { width: 339px; height: 268px; left: 580px; top: 0; z-index: 1; background-image: url(../images/index/step4a.png); }

.step4.active, .step4:hover, .step4.done:hover { background-image: url(../images/index/step4.png); }

.step4.done { background-image: url(../images/index/step4b.png); }

.step5 { width: 374px; height: 261px; right: 0; bottom: -16px; z-index: 0; background-image: url(../images/index/step5a.png); }

.step5.active, .step5.done:hover { background-image: url(../images/index/step5.png); }

.step5.done, .step5:hover { background-image: url(../images/index/step5.png); }

.lang-en .step1 { background-image: url(../images/index/step1a-en.png); }

.lang-en .step1.active, .lang-en .step1.hover, .lang-en .step1.done:hover { background-image: url(../images/index/step1-en.png); }

.lang-en .step1.done { background-image: url(../images/index/step1a-en.png); }

.lang-en .step2 { background-image: url(../images/index/step2a-en.png); }

.lang-en .step2.active, .lang-en .step2:hover, .lang-en .step2.done:hover { background-image: url(../images/index/step2-en.png); }

.lang-en .step2.done { background-image: url(../images/index/step2b-en.png); }

.lang-en .step3 { background-image: url(../images/index/step3a-en.png); }

.lang-en .step3.active, .lang-en .step3:hover, .lang-en .step3.done:hover { background-image: url(../images/index/step3-en.png); z-index: 2; }

.lang-en .step3.done { background-image: url(../images/index/step3b-en.png); }

.lang-en .step4 { background-image: url(../images/index/step4a-en.png); }

.lang-en .step4.active, .lang-en .step4:hover, .lang-en .step4.done:hover { background-image: url(../images/index/step4-en.png); }

.lang-en .step4.done { background-image: url(../images/index/step4b-en.png); }

.lang-en .step5 { background-image: url(../images/index/step5a-en.png); }

.lang-en .step5.active, .lang-en .step5.done:hover { background-image: url(../images/index/step5-en.png); }

.lang-en .step5.done, .lang-en .step5:hover { background-image: url(../images/index/step5-en.png); }

.lang-cn .step1 { background-image: url(../images/index/step1a-cn.png); }

.lang-cn .step1.active, .lang-cn .step1.hover, .lang-cn .step1.done:hover { background-image: url(../images/index/step1-cn.png); }

.lang-cn .step1.done { background-image: url(../images/index/step1a-cn.png); }

.lang-cn .step2 { background-image: url(../images/index/step2a-cn.png); }

.lang-cn .step2.active, .lang-cn .step2:hover, .lang-cn .step2.done:hover { background-image: url(../images/index/step2-cn.png); }

.lang-cn .step2.done { background-image: url(../images/index/step2b-cn.png); }

.lang-cn .step3 { background-image: url(../images/index/step3a-cn.png); }

.lang-cn .step3.active, .lang-cn .step3:hover, .lang-cn .step3.done:hover { background-image: url(../images/index/step3-cn.png); z-index: 2; }

.lang-cn .step3.done { background-image: url(../images/index/step3b-cn.png); }

.lang-cn .step4 { background-image: url(../images/index/step4a-cn.png); }

.lang-cn .step4.active, .lang-cn .step4:hover, .lang-cn .step4.done:hover { background-image: url(../images/index/step4-cn.png); }

.lang-cn .step4.done { background-image: url(../images/index/step4b-cn.png); }

.lang-cn .step5 { background-image: url(../images/index/step5a-cn.png); }

.lang-cn .step5.active, .lang-cn .step5.done:hover { background-image: url(../images/index/step5-cn.png); }

.lang-cn .step5.done, .lang-cn .step5:hover { background-image: url(../images/index/step5-cn.png); }

.step-intro-outer { height: 200px; padding-top: 40px; margin-bottom: 5%; position: relative; }

.step-intro-outer > div { opacity: 0; position: absolute; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); -webkit-transition: 500ms all; -o-transition: 500ms all; transition: 500ms all; left: 0; }

.step-intro-outer > div.active { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; position: relative; }

.step2-intro, .step3-intro, .step4-intro, .step5-intro { border: 1px solid #7F4918; border-radius: 80px; padding: 10px 35px; position: relative; }

.step2-intro .arrow, .step3-intro .arrow, .step4-intro .arrow, .step5-intro .arrow { width: 70px; position: absolute; top: -35px; }

.step2-intro .row, .step3-intro .row, .step4-intro .row, .step5-intro .row { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; padding-left: 3%; padding-right: 3%; margin-bottom: 10px; }

.step2-intro h3, .step3-intro h3, .step4-intro h3, .step5-intro h3 { font-weight: 700; font-size: 20px; color: #7F4918; }

.step2-intro h4, .step3-intro h4, .step4-intro h4, .step5-intro h4 { border-bottom: 1px solid #7F4918; font-size: 16px; color: #7F4918; padding: 5px 5px; margin-bottom: 5px; }

.step2-intro p, .step3-intro p, .step4-intro p, .step5-intro p { color: #798781; font-weight: 300; font-size: 13px; }

.step2-intro .img-txt, .step3-intro .img-txt, .step4-intro .img-txt, .step5-intro .img-txt { max-height: 94px; max-width: 90%; margin-top: 3%; margin-left: auto; margin-right: auto; }

.step3-intro h4, .step4-intro h4, .step5-intro h4 { border-bottom: 0; margin-bottom: 0; white-space: nowrap; text-align: center; margin-top: 5px; }

.step3-intro img, .step4-intro img, .step5-intro img { max-width: 80%; max-height: 70px; margin-left: auto; margin-right: auto; }

.step2-intro .arrow { left: 260px; }

.step2-intro .col1 { width: 14%; }

.step2-intro .col2 { width: 51%; }

.step2-intro .col3 { width: 20%; }

.lang-en .step2-intro h3 { font-size: 11px; }

.step3-intro { display: inline-block; margin-left: 386px; }

.step3-intro .arrow { left: 50%; margin-left: -35px; }

.step3-intro .col1 { width: 31%; }

.step4-intro { display: inline-block; margin-left: 605px; }

.step4-intro .arrow { left: 50%; margin-left: -35px; }

.step4-intro .col1 { width: 48%; }

.step4-intro .col1:nth-child(1) img { max-width: 70%; }

.step4-intro .col1:nth-child(2) img { max-width: 100%; }

.step5-intro { display: inline-block; margin-left: 750px; min-width: 270px; }

.step5-intro .arrow { width: 30px; top: 0; left: 3px; }

.step5-intro .col1 { width: 45%; }

.step5-intro .col2 { width: 52%; }

@media screen and (max-width: 1100px) { .step5-intro { margin-left: calc(100% - 285px); } }

@media screen and (max-width: 980px) { .step5-intro { margin-left: calc(100% - 260px); } }

@media screen and (max-width: 850px) { .step5-intro { margin-left: calc(100% - 220px); } }

@media screen and (min-width: 1300px) { .step-inner { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; }
  .step-intro-outer { margin-top: 8%; }
  .step2-intro .arrow { left: 215px; }
  .step3-intro { margin-left: 392px; }
  .step4-intro { margin-left: 645px; }
  .step5-intro { margin-left: 850px; } }

.block-env { background: url(../images/index/env-bg.jpg) no-repeat top center; padding-top: 4%; padding-bottom: 46%; position: relative; }

@media screen and (min-width: 1920px) { .block-env { background: url(../images/index/env-bg.jpg) no-repeat top center; background-size: cover; } }

@media screen and (max-width: 1730px) { .block-env { padding-bottom: 49%; } }

@media screen and (max-width: 1600px) { .block-env { background-size: 120% auto; padding-bottom: 51%; } }

@media screen and (max-width: 1410px) { .block-env { background-size: 120% auto; padding-bottom: 50%; } }

@media screen and (max-width: 1360px) { .block-env { background-size: 130% auto; padding-bottom: 53%; } }

@media screen and (max-width: 1200px) { .block-env { background-size: 135% auto; padding-bottom: 52%; } }

@media screen and (max-width: 1100px) { .block-env { background-size: 140% auto; padding-bottom: 51%; } }

@media screen and (max-width: 1000px) { .block-env { padding-bottom: 49%; } }

@media screen and (max-width: 900px) { .block-env { padding-bottom: 41%; } }

@media screen and (max-width: 850px) { .block-env { padding-bottom: 37%; } }

@media screen and (max-width: 760px) { .block-env { background: url(../images/index/env-bg-m.jpg) no-repeat top center; background-size: 100% auto; padding-top: 10%; padding-bottom: 59%; } }

.lang-en .block-env { padding-bottom: 39%; }

@media screen and (max-width: 1730px) { .lang-en .block-env { padding-bottom: 45%; } }

@media screen and (max-width: 1600px) { .lang-en .block-env { padding-bottom: 37%; } }

@media screen and (max-width: 1410px) { .lang-en .block-env { padding-bottom: 46%; } }

@media screen and (max-width: 1360px) { .lang-en .block-env { padding-bottom: 49%; } }

@media screen and (max-width: 1200px) { .lang-en .block-env { padding-bottom: 48%; } }

@media screen and (max-width: 1100px) { .lang-en .block-env { padding-bottom: 47%; } }

@media screen and (max-width: 1000px) { .lang-en .block-env { padding-bottom: 45%; } }

@media screen and (max-width: 900px) { .lang-en .block-env { padding-bottom: 37%; } }

@media screen and (max-width: 850px) { .lang-en .block-env { padding-bottom: 33%; } }

@media screen and (max-width: 760px) { .lang-en .block-env { padding-bottom: 55%; } }

.env-steps-m { display: none; }

@media screen and (max-width: 760px) { .env-steps-m { display: block; padding-left: 15px; padding-right: 15px; max-width: 80%; margin-left: auto; margin-right: auto; margin-top: 6%; } }

.env-steps { margin-top: 10%; width: 955px; height: 382px; position: relative; -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; margin-left: auto; margin-right: auto; }

.env-steps > img { position: absolute; width: 100px; }

.env-steps .env-step1.active, .env-steps .env-step2.active, .env-steps .env-step4.active { -webkit-animation: envstep .5s 0s forwards; animation: envstep .5s 0s forwards; }

.env-steps .bg { width: 100%; left: 0; top: 167px; }

.env-steps .env-step1 { width: 66px; height: 55px; left: 45px; top: 115px; opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }

.env-steps .env-step2 { width: 65px; height: 84px; left: 255px; top: 86px; opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }

.env-steps .env-step3 { width: 366px; height: 291px; left: 335px; top: 83px; opacity: 0; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }

.env-steps .env-step3.active { -webkit-animation: envstep2 .5s 0s forwards; animation: envstep2 .5s 0s forwards; }

.env-steps .env-step4 { width: 39px; height: 100px; left: 860px; top: 71px; opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }

.env-steps .env-step5-outer { width: 735px; height: 197px; top: 0; left: 119px; position: absolute; opacity: 0; -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); -webkit-transition: 300ms opacity, 1s -webkit-clip-path; transition: 300ms opacity, 1s -webkit-clip-path; -o-transition: 300ms opacity, 1s clip-path; transition: 300ms opacity, 1s clip-path; transition: 300ms opacity, 1s clip-path, 1s -webkit-clip-path; }

.env-steps .env-step5-outer.active { opacity: 1; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }

@media screen and (max-width: 1500px) { .env-steps { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); margin-top: 5%; } }

@media screen and (max-width: 1300px) { .env-steps { margin-top: 5%; } }

@media screen and (max-width: 1100px) { .env-steps { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } }

@media screen and (max-width: 950px) { .env-steps { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); margin-left: auto; left: -100px; } }

@media screen and (max-width: 760px) { .env-steps { display: none !important; } }

@-webkit-keyframes envstep { 0% { opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px); }
  100% { opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }

@keyframes envstep { 0% { opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px); }
  100% { opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }

@-webkit-keyframes envstep2 { 0% { opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8); }
  100% { opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes envstep2 { 0% { opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8); }
  100% { opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }

/*# sourceMappingURL=index2.css.map */