.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;}
.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;}
.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;}
.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: 214px; margin: 25px 10px 2px 41px;}
  .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){
  .banner {margin-top:1.95rem;height: 6rem;width: auto;}
  .banner img {
    height: 100%;
    width: auto;
}
  .banner div {}
  .banner div h1, .banner div h2{}
  .banner div h1 {}
  .banner div h2 {}
  .banner div a {}


  .commentary {
    height: auto;
}
  .commentary h1 {
    font-size: 0.6rem;
    padding-top: 1rem;
    padding-bottom: 0;
    box-sizing: border-box;
    padding: 1.2rem .2rem 0 .2rem;
    margin: 0;
}
  .commentary h2 {
    margin-top: .3rem;
    box-sizing: border-box;
    padding: 0 .2rem;
}
  .commentary .commentaryImg li {
   width: 50%;
   height: auto;
   margin-bottom: .8rem;
  }
  .commentary .commentaryImg img {
    width: 75%;
    height: auto;
    margin-bottom: .2rem;
  }
  .commentary .commentaryImg .ulTop {
     margin-top: 1rem;
     width: 96%;
     flex-wrap: wrap;
     box-sizing: border-box;
     padding-bottom: 1rem;
  }
  .commentary .commentaryImg .ulTop span {position: static;}
  .Propaganda {width: 100%; height: 650px;background: #fafafa;}
  .Propaganda .left {}
  .Propaganda .left h1 {}
  .Propaganda .left span {}
  .Propaganda .left h2 {}
  .Propaganda .right {} 
  .Propaganda .right img { }
}