/* CSS Document */
@charset "utf-8";

*:focus {
  outline: none;
}

html,
body {
  width: 100%;
  height: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fiedldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

ol,
ul,
li {
  list-style: none;
}

html {
  font-size: 62.5%;
}

body {
  color: #EFDAAE;
  -webkit-overflow-scrolling: touch;
  background: #bf504c;
}

input,
select,
textarea,
button {
  vertical-align: middle;
  -webkit-appearance: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

a,
a:link {
  text-decoration: none;
  outline: none;
}

.hide {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

img {
  width: 100%;
  height: 100%;
}
.flex{
  display: flex;
  height: 1.466667rem;
  align-items: center;
}
.container {
  position: relative;
}

.head-model {
  position: fixed;
  top: 0;
  width: 100%;
  background: url(../img/top-bg.png) center top repeat;
  background-size: 100%;
  z-index: 14;
}

.head-model .logo {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: .36rem;
}

.head-model .t {
  margin-left: .146667rem;
  font-weight: 400;
  width: 4rem;
}

.head-model .t-name {
  font-size: .426667rem;
}

.head-model .t-intro {
  margin-top: .1rem;
  font-size: .346667rem;
  color: #EFDAAE;
}
.pop-img{
  display: block;
  margin: 0 auto;
  height: auto;
}
.btn {
  background: url(../img/btn.png) center top no-repeat;
  background-size: 100%;
}

.title {
  width: 10rem;
  height: 4rem;
  margin: 0 auto;
}

.head-model .btn-download {
  width: 3.026667rem;
  height: 1.36rem;
  padding: .32rem .666667rem;
  font-size: .373333rem;
  color: #ffffff;
  font-weight: lighter;
  position: absolute;
  right: .093333rem;
  top: .2rem;
}

.con1 {
  margin: 0 auto;
  height: 18.306667rem;
  background: url(../img/bg_01.jpg) center top no-repeat;
  background-size: 100% auto;
}

.con1 .btn-lg {
  background: url(../img/btn-lg.png) center top no-repeat;
  background-size: 100%;
  width: 4.626667rem;
  height: 1.76rem;
  color: #ffffff;
  font-weight: lighter;
  font-size: .533333rem;
  padding: .373333rem 1.2rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 14.333333rem;
}

.con2 {
  margin: 0 auto;
  height: 21.946667rem;
  background: url(../img/bg_02.jpg) center top no-repeat;
  background-size: 100% auto;
}

.con2 .title-01 {
  background: url(../img/title_01.png) center top no-repeat;
  background-size: 100%;
}

.con2 .container {
  top: -2.666667rem;
}

.con2 .role-model {
  background: url(../img/frame-bg.png) center top no-repeat;
  background-size: 100%;
  width: 9.8rem;
  height: 15.133333rem;
  position: relative;
  top: -1rem;
}

.con2 .role-model .role-frame {
  background: url(../img/role-bg.png) center top no-repeat;
  background-size: 100%;
  width: 8.6rem;
  height: 10.2rem;
  margin: 0 auto;
  position: relative;
  top: .373333rem;
  left: .106667rem;
  overflow: hidden;
}

.con2 .role-model .role {
  background: url(../img/role.png) center top no-repeat;
  background-size: 100%;
  width: 8.306667rem;
  height: 9.906667rem;
  margin: 0 auto;
  position: relative;
  top: .133333rem;
}

.con2 .role-model .role .video-bg {
  width: 3.053333rem;
  height: 2.16rem;
  border-radius: .08rem;
  background: url(../img/video-bg.png) center top no-repeat;
  background-size: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.con2 .role-model .role .video-bg .btn-play {
  width: 1.8rem;
  height: 1.68rem;
}

.con2 .role-model .text-frame {
  background: url(../img/intro-bg.png) center top no-repeat;
  background-size: 100%;
  width: 10rem;
  height: 4.32rem;
  margin: .4rem auto 0;
  padding-top: .533333rem;
}

.con2 .role-model .text-frame li{
  list-style:disc;
  text-indent: -0.04rem;
}
.con2 .role-model .text-frame .t-intro {
  width: 7.866667rem;
  color: #A24A3D;
  font-size: .346667rem;
  font-weight: 400;
  margin: 0 auto;
  line-height: .64rem;
  position: relative;
  left: .333333rem;
}

.t-org {
  color: #E65344;
}



.con3 {
  margin: 0 auto;
  height: 20.133333rem;
  background: url(../img/bg_03.jpg) center top no-repeat;
  background-size: 100% auto;
}

.con3 .title-02 {
  background: url(../img/title_02.png) center top no-repeat;
  background-size: 100% auto;
}

.con3 .container {
  top: -5.133333rem;
}

.con3 .feature {
  background: url(../img/content-bg-04.png) center top no-repeat;
  background-size: 100% auto;
  width: 9.32rem;
  height: 8.146667rem;
  margin: 0 auto;
  position: relative;
  top: -0.866667rem;
}
.con3 .feature::after{
  content: '';
  display: block;
  position: absolute;
  background: url(../img/shape-01.png) center top no-repeat;
  background-size: 100% auto;
  width: 3.386667rem;
  height: .853333rem;
  right: 0;
  bottom: -0.293333rem;
}
.con3 .hr{
  height: .013333rem;
}
.con3 .feature .swiper-container{
  margin-top: .266667rem;
}
.swiper-container {
  width: 8.24rem;
  height: 4.04rem;
  top: 1.16rem;
  background: url(../img/swiper-con-bg.png) center top no-repeat;
  background-size: 100%;
}

.carousel-button-prev {
  background: url(../img/arrow-left.png) center top no-repeat;
  background-size: 100%;
  width: .573333rem;
  height: .52rem;
  position: absolute;
  left: .213333rem;
  top: 3.2rem;
  z-index: 9;
}

.carousel-button-next {
  background: url(../img/arrow-right.png) center top no-repeat;
  background-size: 100%;
  width: .573333rem;
  height: .52rem;
  position: absolute;
  z-index: 9;
  right: .213333rem;
  top: 3.2rem;
}

.feature .title-with-arrow {
  position: absolute;
  top: .6rem;
  left: 0;
  right: 0;
}

.title-with-arrow {
  width: 8.666667rem;
  margin: 0 auto;
  text-align: center;
  font-size: .48rem;
  font-weight: bold;
  color: #BE4E44;
}

.title-with-arrow::before {
  content: '';
  background: url(../img/t_left.png) center top no-repeat;
  background-size: 100% auto;
  display: inline-block;
  width: .573333rem;
  height: .226667rem;
  position: relative;
  left: -0.1rem;
}

.title-with-arrow::after {
  content: '';
  background: url(../img/t_right.png) center top no-repeat;
  background-size: 100% auto;
  display: inline-block;
  width: .573333rem;
  height: .226667rem;
  position: relative;
  right: -0.1rem;
}

.circle-red {
  display: inline-block;
  width: .32rem;
  height: .32rem;
  background: #d9514c;
  border-radius: 50%;
  line-height: .32rem;
  font-size: .293333rem;
  font-weight: bold;
  color: #FFF2E3;
  text-align: center;
  margin-right: .15rem;
}

.intro {
  width: 8rem;
  margin: 0 auto;
  position: relative;
  top: 1.333333rem;
  display: flex;
  left: .4rem;
}

.t-intro {
  width: 7.466667rem;
  font-size: .346667rem;
  font-weight: 400;
  line-height: .64rem;
  color: #A24A3D;
}

.con3 .pop-model {
  width: 9.453333rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative;
  top: .266667rem;
}

.con3 .scroll {
  background: url(../img/scroll-bg.png) center top no-repeat;
  background-size: 100%;
  width: 4.68rem;
  height: 4.973333rem;
  position: relative;
}

.con3 .scroll .role-text {
  text-align: center;
  font-size: .346667rem;
  font-weight: bold;
  color: #B73E22;
  margin-top: .333333rem;
}

.con3 .scroll .role {
  width: 4.186667rem;
  height: 3.88rem;
  margin: .106667rem auto 0;
  position: relative;
}

.con3 .scroll .role.role-1 {
  background: url(../img/role-dongyun.png) center top no-repeat;
  background-size: 100%;
}
.con3 .scroll.scroll-01::after{
  content: "";
  display: block;
  background: url(../img/shape-01.png) center top no-repeat;
  background-size: 100%;
  width: 3.026667rem;
  height: .853333rem;
  position: absolute;
  top: 3.88rem;
  left: -1.453333rem;
}
.con3 .scroll.scroll-02::after{
  content: "";
  display: block;
  background: url(../img/shape-01.png) center top no-repeat;
  background-size: 100%;
  width: 3.026667rem;
  height: .853333rem;
  position: absolute;
  top: .08rem;
  right: -0.2rem;
}
.con3 .scroll .role.role-2 {
  background: url(../img/role-xingxianying.png) center top no-repeat;
  background-size: 100%;
}

.con3 .scroll .btn-pop {
  width: 2.96rem;
  height: 1.2rem;
  font-size: .4rem;
  font-weight: lighter;
  color: #FFFFFF;
  margin: 0 auto;
  padding: .28rem .586667rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
}

.con4 {
  margin: 0 auto;
  height: 20.133333rem;
  background: url(../img/bg_04.jpg) center top no-repeat;
  background-size: 100% auto;
}

.con4 .title-03 {
  background: url(../img/title_03.png) center top no-repeat;
  background-size: 100%;
}

.con4 .container {
  top: -6.44rem;
}

.con4 .scrape {
  width: 9.32rem;
  height: 8.146667rem;
  margin: -0.96rem auto 0;
  background: url(../img/content-bg-04.png) center top no-repeat;
  background-size: 100%;
  font-size: .346667rem;
  position: relative;
}

.con4 .scrape::before {
  content: "";
  background: url(../img/rope_top.png) center top no-repeat;
  background-size: 100%;
  width: .346667rem;
  height: .48rem;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: .1rem;
}

.con4 .hr {
  height: .013333rem;
}
.con4 .scrape .title-with-arrow{
  margin-top: .666667rem;
}
.con4 .scrape .top-text {
  text-align: center;
  font-weight: 400;
  color: #BE4E44;
  font-size: .346667rem;
  margin: .266667rem 0;
}

.con4 .scrape-img {
  width: 8.16rem;
  height: 4.933333rem;
  margin: 0 auto;
}

.con4 .feature {
  margin: .573333rem auto 0;
  background: url(../img/content-bg-04.png) center top no-repeat;
  background-size: 100% auto;
  width: 9.32rem;
  height: 8.146667rem;
  position: relative;
}

.con4 .feature .intro {
  width: 98%;
  left: .3rem;
  top: 1.6rem;
}

.con4 .feature .carousel-button-next {
  right: .2rem;
  top: 3.306667rem;
}

.con4 .feature .carousel-button-prev {
  left: .2rem;
  top: 3.306667rem;
}

.con4 .feature .intro .t-intro {
  width: 8.453333rem;
  white-space:  nowrap;
}

.con4 .feature::before {
  background: url(../img/rope_02.png) center top no-repeat;
  background-size: 100%;
  content: '';
  width: .333333rem;
  height: 1.533333rem;
  display: block;
  position: absolute;
  left: 1.92rem;
  top: -1.04rem;
}

.con4 .feature::after {
  background: url(../img/rope_02.png) center top no-repeat;
  background-size: 100%;
  content: '';
  width: .333333rem;
  height: 1.533333rem;
  display: block;
  position: absolute;
  right: 1.92rem;
  top: -1.04rem;
}
.con4 .feature .swiper-container{
  top: 1.533333rem;
}
.con4 .award-model {
  background: url(../img/content-bg-04.png) center top no-repeat;
  background-size: 100%;
  width:9.32rem;
  height: 8.146667rem;
  margin: 0 auto;
  position: relative;
  top: .573333rem;
}

.con4 .award-model::before {
  background: url(../img/rope_02.png) center top no-repeat;
  background-size: 100%;
  content: '';
  width: .333333rem;
  height: 1.533333rem;
  display: block;
  position: absolute;
  left: 1.92rem;
  top: -1.04rem;
}

.con4 .award-model::after {
  background: url(../img/rope_02.png) center top no-repeat;
  background-size: 100%;
  content: '';
  width: .333333rem;
  height: 1.533333rem;
  display: block;
  position: absolute;
  right: 1.92rem;
  top: -1.04rem;
}

.con4 .award-model .title-with-arrow {
  margin-top: .666667rem;
}

.con4 .award-model .award-img {
  width: 8.16rem;
  height: 4.92rem;
  margin: .266667rem auto 0;
  text-align: center;
}

.con4 .award-model .award-text {
  font-size: .346667rem;
  font-weight: 400;
  color: #BE4E44;
  line-height: .48rem;
  text-align: center;
  margin: .266667rem auto 0;
}

.con5 {
  margin: 0 auto;
  height: 20.133333rem;
  background: url(../img/bg_05.jpg) center top no-repeat;
  background-size: 100% auto;
}

.con5 .title-04 {
  background: url(../img/title_04.png) center top no-repeat;
  background-size: 100%;
}

.con5 .container {
  top: 4rem;
}

.con5 .new-role-model {
  width: 9.32rem;
  height: 13.053333rem;
  background: url(../img/content-bg-03.png) center top no-repeat;
  background-size: 100%;
  margin: 0 auto;
  position: relative;
  top: -0.933333rem;
}

.con5 .new-role-model .role-img {
  background: url(../img/drawing-01.png) center top no-repeat;
  background-size: 100%;
  width: 8.346667rem;
  height: 5.173333rem;
  margin: 0 auto;
  position: relative;
  top: .8rem;
}

.bold{
  font-weight: bold;
}
.con5 .new-role-model .role-intro{
  margin-top:.933333rem;
  font-size: .346667rem;
font-weight: 400;
color: #A24A3D;
line-height: .64rem;
}
.con5 .new-role-model .role-intro .t{
  background:url(../img/text-bg.png) center left no-repeat;
  background-size: 100%;
  width: 2.666667rem;
  height: .64rem;
  padding-left: .266667rem;
  font-size: .346667rem;
font-weight: bold;
color: #BE4E44;
flex-shrink: 0;
position: relative;
left: .333333rem;
line-height: .64rem;
margin: .133333rem 0; 
}
.con5 .new-role-model .role-intro .content{
  position: relative;
  width: 8.506667rem;
  margin: 0 auto;
  left: .2rem;
}

.con6 {
  margin: 0 auto;
  height: 20.133333rem;
  background: url(../img/bg_06.jpg) center top no-repeat;
  background-size: 100% auto;
}

.con6 .title-05 {
  background: url(../img/title_05.png) center top no-repeat;
  background-size: 100%;
}

.con6 .container {
  top: 1.6rem;
}
.con6 .optimization-model.op-1{
  background: url(../img/optimization-bg-01.png) center top no-repeat;
  background-size: 100%;
  height: 7.173333rem;
}
.con6 .optimization-model.op-2{
  background: url(../img/optimization-bg-01.png) center top no-repeat;
  background-size: 100%;
  height: 7.173333rem;
}
.con6 .optimization-model.op-3{
  background: url(../img/optimization-bg-02.png) center top no-repeat;
  background-size: 100%;
  height: 8.48rem;
}
.con6 .optimization-model{
  width: 10rem;
  margin: 0 auto .48rem;
  position: relative;
  animation: open .4s linear both;
  overflow: hidden;
  margin-bottom: -1rem;
}
.con6 .optimization-model .title-with-arrow{
  position: relative;
  top: .6rem;
font-size: .533333rem;
}
.con6 .optimization-model .text-model{
  width: 8.4rem;
  font-size: .346667rem;
  font-weight: 400;
  color: #A24A3D;
  line-height: .64rem;
  margin: .666667rem auto 0;
  position: relative;
  left: .266667rem;
}
.con6 .text-model .t-dot{
  list-style: disc;
  text-indent: -0.04rem;
  margin-left: 1rem;
}
.con6 .text-model .t-sub{
  margin-left: .6rem;
}
.con6 .btn-group{
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  position: relative;
  top: -0.933333rem;
  justify-content: center;
}
.con6 .btn-group .btn-long{
  background: url(../img/btn-long.png) center top;
  background-size: 100%;
  width: 8.92rem;
  height: 1.226667rem;
  font-size: .533333rem;
font-weight: lighter;
color: #FFFFFF;
text-align: center;
line-height: 1.226667rem;
margin-bottom: .266667rem;
z-index: 9;
}
.fade {
  position: fixed;
  top: 0%;
  left: 0%;
  background: black;
  z-index: 15;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=75);
  width: 100%;
  height: 100%;
  display: none;
}

.alert {
  position: fixed;
  z-index: 16;
  display: none;
  left: 50%;
  top: 50%;
}

.benefit {
  width: 100%;
}

.benefit iframe{
  width: 100%;
  height: auto;
  display: block;

}

.img-large{
  width: 9.866667rem;
}
.pop{
  background:url(../img/pop-bg.png) center top;
  background-size: 100%;
  width: 9.76rem;
  height: 13.493333rem;
}
#myVideo {
  width: 8.693333rem;
  height: 5rem;
}
.pop .alert-close{
  position: absolute;
  right: .453333rem;
  top: .36rem;;
}
.pop .pop-title{
  width: 8.426667rem;
  height: 2.573333rem;
  margin: 0 auto;
  position: relative;
  top: 1.48rem;
}
.pop .title-01{
  background:url(../img/pop-title-01.png) center top;
  background-size: 100%;
}
.pop .title-02{
  background:url(../img/pop-title-02.png) center top;
  background-size: 100%;
}
.pop .swiper-container{
  width: 7.973333rem;
  height: 3.906667rem;
}
.pop .pop-swiper{
  width: 7.973333rem;
  height: 4.666667rem;
  margin: 0 auto;
  position: relative;
  top: -0.133333rem;
}
.pop .swiper-pagination {
  width: 7.973333rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: .666667rem;
}
.pop .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 .253333rem;
  width: .306667rem;
height: .306667rem;
border: .026667rem solid #A33837;
opacity: 1;
background-color: transparent;
}
.pop .swiper-pagination-bullets .swiper-pagination-bullet-active {
  padding: .053333rem;
background: #A33837;
background-clip: content-box;
}
.intro-model{
  margin-top: .933333rem;
}
.pop .row{
  display: flex;
  width: 8.133333rem;
  margin: 0 auto;
  position: relative;
  left: -0.066667rem;
}
.pop .content{
  font-size: .346667rem;
font-weight: 400;
color: #A24A3D;
line-height: .586667rem;
}
#integralSystem.pop .content{
  line-height: .64rem;
}
.pop .circle-red{
  width: .32rem;
  height: .32rem;
  flex-shrink: 0;
  font-size: .293333rem;
  line-height: .32rem;
}
.alert-close {
  width: .453333rem;
  height: .413333rem;
  display: block;
  margin: 0.333333rem auto 0;
  background: url(../img/pop-close.png) no-repeat;
  background-size: 100%;
}
/* 动画 */
@keyframes open {
  0%   {height: 0;}
  100% {height: 8.48rem;}
}