@media screen and (min-width:750px) {
  .banner {position: relative;width: 100%;height:auto; overflow: hidden;}
.banner img {width: 100%;height:auto;}
.banner div {width: 40%;text-align: center;}
.banner div h1, 
.banner div h2,
.banner div a {position: absolute;display: inline-block;color: #ffffff;}
.banner div h1 {font-size:60px; bottom:50%; margin-bottom:80px;}
.banner div h2 {font-size: 36px;font-family: "SimHei"; bottom:50%;}
.banner div a {top:50%; margin-top:108px;background: #5eaeeb;font-size: 30px;width:234px;height:58px;text-align:center; line-height:58px;}
.commentary {width: 100%; height: 556px;background: #ffffff; text-align: center;}
.commentary h1 {margin-top: 80px;font-size: 40px;}
.commentary h2 {margin-top: 15px;font-size: 18px; color: #888888;}
.commentary .commentaryImg {text-align: center;}
.commentary .commentaryImg li {
    width: 264px;
    height: 210px;
    position: relative;
}
.commentary .commentaryImg .comfor{}
.commentary .commentaryImg img {
    margin: 0 auto;
}
.commentary .commentaryImg .ulTop {
    display: flex;
    width: 1226px;
    margin: 0 auto;
    margin-top: 110px;
    justify-content: space-around;
}
.commentary .commentaryImg .ulTop span {font-size: 20px;color: #333333;position: absolute;bottom: 0px;display: block;width: 100%;}
.Propaganda {width: 100%; height: 650px;background: #fafafa;}
.Propaganda .left {width: 25%;float: left;margin-left: 424px; margin-top: 208px;}
.Propaganda .left h1 {font-size: 36px;}
.Propaganda .left span {display: block;width: 150px;height: 3px;background: #d2d2d2;margin-top: 45px;}
.Propaganda .left h2 {font-size: 16px;color: #888888; margin-top: 45px; font-weight: 500;}
.Propaganda .right { float: right; margin-top: 78px;margin-right: 300px;} 
.Propaganda .right img { margin-left: 20px;float:left;}
.conter {width: 100%;height: 650px; background: #ffffff;}
.conter .left {float: left;margin-top: 78px; margin-left: 386px;}
.conter .left img {width: 593px;height: 445px;}
.conter .right {width: 25%;float: right;margin-right: 320px;margin-top: 208px;}
.conter .right h1 {font-size: 36px;}
.conter .right span {display: block;width: 150px;height: 3px;background: #d2d2d2; margin-top: 45px;}
.conter .right h2 {font-size: 16px;color: #888888;margin-top: 45px;font-weight:500;line-height: 1.5;}
.image {position: relative;width: 100%;height: 650px;}
.image .imageText {position: absolute;width: 27%; margin-left: 346px; margin-top: 162px; z-index: 99;}
.image .imageText h1 {font-size: 36px;}
.image .imageText span {display: block; width: 150px;height: 3px;background: #d2d2d2;margin-top: 45px;}
.image .imageText h2 {font-size: 16px;color: #888888;margin-top: 45px;line-height:  1.5;}
.image img {width: 100%; height: 650px;}
.Endorsement {width: 100%;height: 652px; background: #ffffff;}
.Endorsement .left {float: left; margin-top: 60px; margin-left: 382px;}
.Endorsement .left img { width: 390px; height: 490px;}
.Endorsement .right { width: 25%; margin-top: 175px; margin-right: 287px; float: right;}
.Endorsement .right h1 {font-size: 36px;}
.Endorsement .right span {display: block; width: 150px; height: 3px; background: #d2d2d2; margin-top: 45px;}
.Endorsement .right h2 {font-size: 16px;color: #888888;margin-top: 45px;line-height: 1.5;}
.conterBtn { width: 100%;height: 213px; background: #fafafa; text-align: center;}
.conterBtn h1 {display: inline-block; font-size: 26px; margin-top: 50px;}
.conterBtn a { width: 180px; height: 50px;line-height: 50px;display: block;color: #ffffff;background: #76cc23;
font-size: 20px; border-radius: 5px; margin: 25px auto;}
}


@media screen and (min-width: 960px) and (max-width: 1024px) {
  .banner { height: 419px;}
  .banner div { width: 15%; }
  .banner div h1 {top: 121px; font-size: 56px;}
  .banner div h2 {top: 212px; font-size: 30px;}
  .banner div a { top: 200px; }
  .banner img { width: 100%; height: auto;}
  .commentary { height: 435px;}
  .commentary h1 { margin-top: 40px;}
  .commentary .commentaryImg .ulTop { margin-top: 20px; margin-left: 0; }
  .commentary .commentaryImg .ulTop .last { margin-top: 34px; }
  .commentary .commentaryImg .ulTop img { width: 200px; margin: 20px 10px;}
  .Propaganda { height: 518px; }
  .Propaganda .left { margin-left: 60px; margin-top: 185px; }
  .Propaganda .left h1 { font-size: 24px; }
  .Propaganda .left span { margin-top: 20px;}
  .Propaganda .left h2 {font-size: 14px; margin-top: 20px;}
  .Propaganda .right { margin-right: 40px; margin-top: 25px;}
  .Propaganda .right img { margin-left: 18px; }
  .conter { height: 430px;}
  .conter .left { margin-top: 50px; margin-left: 0px;}
  .conter .left img {width: 480px; height: 325px;margin-left: 35px;}
  .conter .right { margin-top: 100px; margin-right: 50px;}
  .conter .right h1 { font-size: 24px;}
  .conter .right span {margin-top: 20px; }
  .conter .right h2 { font-size: 14px;  margin-top: 20px;}
  .image { height: 500px; }
  .image img { height: 500px;}
  .image .imageText { margin-left: 90px; margin-top: 90px;}
  .image .imageText h1 {font-size: 24px;}
  .image .imageText span { margin-top: 20px;}
  .image .imageText h2 {font-size: 14px; margin-top: 20px;}
  .Endorsement {height: 518px;}
  .Endorsement .left {margin-top: 0px; margin-left: 80px;}
  .Endorsement .right { margin-right: 90px;}
  .Endorsement .right h1 { font-size: 24px;}
  .Endorsement .right span { margin-top: 20px;}
  .Endorsement .right h2 { font-size: 14px; margin-top: 20px; } 
 }

@media screen and (min-width: 1024px) and (max-width: 1200px) {
   .banner {height: auto;}
  .banner div { width: 15%;}
  .banner div h1 {top: 180px;}
  .banner div h2 {top: 270px; font-size: 32px;}
  .banner div a { top: 265px; }
  .banner img {width: 100%; height:auto; }
  .commentary {}
  .commentary h1 { margin-top: 40px;}
  .commentary .commentaryImg .ulTop {}
  .commentary .commentaryImg .ulTop .last {}
  .commentary .commentaryImg .ulTop img {}
  .Propaganda {height: 518px;}
  .Propaganda .left {margin-left: 85px; margin-top: 185px;}
  .Propaganda .left h1 { font-size: 24px;}
  .Propaganda .left span { margin-top: 20px; }
  .Propaganda .left h2 {font-size: 14px; margin-top: 20px;}
  .Propaganda .right {margin-right: 40px; margin-top: 25px; }
  .Propaganda .right img { margin-left: 40px;}
  .conter {height: 430px;}
  .conter .left { margin-top: 50px;margin-left: 65px;}
  .conter .left img {width: 480px; height: 325px;}
  .conter .right {margin-top: 100px;margin-right: 85px;}
  .conter .right h1 {font-size: 24px;}
  .conter .right span { margin-top: 20px;}
  .conter .right h2 { font-size: 14px; margin-top: 20px;}
  .image { height: 500px;}
  .image img { height: 500px;}
  .image .imageText {margin-left: 115px; margin-top: 115px;}
  .image .imageText h1 {font-size: 24px;}
  .image .imageText span { margin-top: 20px; }
  .image .imageText h2 {font-size: 14px; margin-top: 20px;}
  .Endorsement { height: 518px; }
  .Endorsement .left { margin-top: 0px; margin-left: 80px;}
  .Endorsement .right { margin-right: 160px; }
  .Endorsement .right h1 { font-size: 24px; }
  .Endorsement .right span { margin-top: 20px;}
  .Endorsement .right h2 {font-size: 14px;margin-top: 20px;} 
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .banner div { width: 15%;}
  .banner div h1 {top: 165px;}
  .banner div h2 {top: 275px; }
  .banner div a {top: 284px;}
  .banner img { width:100%; height: auto;}
  .commentary { height:435px;}
  .commentary h1 {margin-top:40px;}
  .commentary .commentaryImg .ulTop { margin-top:20px; margin-left:0;}
  .commentary .commentaryImg .ulTop .last {margin-top: 34px;}
  .commentary .commentaryImg .ulTop img {width: auto;margin: 25px auto 2px;height: 134px;}
  .Propaganda {height:518px;}
  .Propaganda .left {margin-left: 85px; margin-top: 185px; }
  .Propaganda .left h1 { font-size: 30px; }
  .Propaganda .left span {margin-top: 20px;}
  .Propaganda .left h2 {font-size: 16px; margin-top: 20px;}
  .Propaganda .right {margin-right: 40px; margin-top: 25px;}
  .Propaganda .right img { margin-left: 40px;}
  .conter {height: 430px;}
  .conter .left { margin-top: 50px;margin-left: 65px; }
  .conter .left img { width: 480px; height: 325px;}
  .conter .right {margin-top: 100px;margin-right: 85px;}
  .conter .right h1 {font-size: 30px;}
  .conter .right span { margin-top: 20px;}
  .conter .right h2 { font-size: 16px; margin-top: 20px; }
  .image {height: 500px;}
  .image img {height: 500px;}
  .image .imageText {margin-left: 115px; margin-top: 115px; }
  .image .imageText h1 {font-size: 30px;}
  .image .imageText span {margin-top: 20px;}
  .image .imageText h2 {font-size: 16px; margin-top: 20px;}
  .Endorsement {height:518px;}
  .Endorsement .left {margin-top: 0px; margin-left: 80px;}
  .Endorsement .right {margin-right: 160px;}
  .Endorsement .right h1 {font-size: 30px;}
  .Endorsement .right span {margin-top: 20px; }
  .Endorsement .right h2 {font-size: 16px; margin-top: 20px;} 
}

@media screen and (min-width: 1400px) and (max-width: 1600px) {
  .banner {height: auto;}
  .banner div {width: 15%;}
  .banner img {width: 100%;height: auto;}
  .commentary {height: 435px;}
  .commentary h1 {margin-top: 40px;}
  .commentary .commentaryImg .ulTop {margin-top: 20px; margin-left: 0;}
  .commentary .commentaryImg .ulTop .last {margin-top: 34px;}
  .commentary .commentaryImg .ulTop img {width: 208px; margin: 16px 50px;}
  .Propaganda {height: 600px;}
  .Propaganda .left {margin-left: 130px;margin-top: 215px;}
  .Propaganda .right {margin-right: 115px;margin-top: 75px;}
  .Propaganda .right img {margin-left: 40px;}
  .conter {height: 485px;}
  .conter .left {margin-top: 90px; margin-left: 195px; }
  .conter .left img {width: 527px; height: 358px;}
  .conter .right {margin-top: 145px; margin-right: 160px;}
  .image {height: 500px;}
  .image img {height: 500px;}
  .image .imageText {margin-left: 115px; margin-top: 115px;}
  .Endorsement {height: 600px;}
  .Endorsement .left {margin-top: 45px; margin-left: 190px;}
  .Endorsement .right {margin-top: 215px;margin-right: 185px;}
}

@media screen and (min-width: 750px) and (max-width: 1226px){
    .commentary .commentaryImg .ulTop{width:100%;}
}

@media screen and (max-width: 750px){
    .mbanner {background:url('../img/XC/brandmbg.jpg') no-repeat center; background-size:cover; color:#fff;}
    .mbanner h3 {font-size:.6rem;padding-top: .64rem;}
    .mbanner p {font-size: .36rem;padding-top:.2rem;color:#fff;}
    .mbanner a {margin-top: .4rem;color:#fff;background:#5eaeeb;}
    
    .commentary {width:100%; height: auto; overflow: hidden; box-sizing: border-box; padding: 0 .24rem; text-align: center;}
    .commentary h1 {font-size:.34rem; font-weight: bold; padding-top:.46rem;}
    .commentary h2 {font-size: .24rem;color:#999999;padding-top:.2rem;}
    .commentary ul {width:100%; display: flex; flex-wrap: wrap; justify-content: space-around; padding-top:.46rem;}
    .commentary ul li {width:2.7rem; height:auto; padding-bottom:.6rem;}
    .commentary ul li img {height:1.55rem; margin-bottom: .1rem; width:auto;}
    .commentary ul li:nth-child(4) img {    width: 100%;height: auto;padding-bottom: .34rem;}
    .commentary ul li span {font-size:.26rem;}

    .Propaganda , .conter , .image , .Endorsement{width:100%; height: auto; overflow: hidden; box-sizing: border-box; padding: 0 .24rem; text-align: left; background:#fafafa;}
    .Propaganda h1 , .conter h1 , .image h1 , .Endorsement h1{font-size:.34rem; font-weight: bold; padding-top:.2rem; line-height: .9rem; position: relative;}
    .Propaganda h1::after , .conter h1::after, .image h1::after , .Endorsement h1::after {
      content: ''; width: .8rem; height: .03rem; background: #d2d2d2; position: absolute; left: 0; bottom: 0;
    }
    .Propaganda h2 , .conter h2 , .image h2 , .Endorsement h2{font-size:.26rem; line-height: .42rem; color:#999999; padding-top:.2rem;}
    .Propaganda .right {width:100%; position: relative; text-align: center;}
    .Propaganda .right img {display:inline-block; width:2.65rem; margin:.4rem .1rem .48rem;}
    .conter img , .image img {width:90%; margin-top:.4rem;}
    .Endorsement img {width:54%; margin-top:.4rem; margin-bottom:.45rem;}
    .conter , .Endorsement , .conter{background: #fff !important;}

}