@charset "utf-8";



.story-wrap {

  background: url(../images/-c06_-_56cb-a0c3-ca7e.jpg) no-repeat center 0;

  background-size: cover;

  height: 100%;

  text-align: center;

}



.story {

  margin: 0 auto;

  width: 707px;

  height: initial;

  background: url(../images/-c06_-_56cs-532a-a16e_con.png) repeat 0 0;

  background-size: 100% auto;

  padding: 0px 85px 0;

  position: relative;

}



.story:before {

  content: '';

  position: absolute;

  width: 707px;

  height: 120px;

  top: -120px;

  left: 0px;

  background: url(../images/-c06_-_56cs-532a-a16e_top.png) no-repeat 0 0;

  background-size: 100% auto;

}
.story:after {

  content: '';

  position: absolute;

  width: 707px;

  height: 80px;

  bottom: -79px;

  left: 0px;

  background: url(../images/-c06_-_56cs-532a-a16e_bottom.png) no-repeat 0 0;

  background-size: 100% auto;

}


.story p {

  font-size: 16px;

  font-weight: 700;

  margin: 0 auto;

  color: #3e3e3e;

}



.story-wrap .content,

.map-wrap .content {

  padding: 260px 0 150px;

}



.map-wrap {

  overflow: hidden;

  height: 100%;

  position: relative;

}



.map-wrap .content {

  background-size: cover;

}



.map1 {

  background: url(../images/-c06_-_56cb-c0f9-ef8_.jpg) no-repeat center 0;

}



.map2 {

  background: url(../images/-c06_-_56cb-49a8-7b71.jpg) no-repeat center 0;

}



.map3 {

  background: url(../images/-c06_-_56cb-b26c-2b46.jpg) no-repeat center 0;

}

.map4 {

  background: url(../images/-c06_-_56cb-_6ef-8579.jpg) no-repeat center 0;

}




.pic-box {

  position: relative;

}



.pic-modal {

  position: absolute;

  bottom: 16px;

  right: 17px;

  width: 54px;

  height: 54px;

  background: url(../images/23f7c8bed99888366ecddcf405c7c40a.png) no-repeat top;

  cursor: pointer;

  border: none;

  background-size: 100% auto;

}



.pic-modal:hover {

  background-position-y: -54px;

}



.pic-caption {

  margin: 50px 0 0;

}



.pic-caption h3 {

  font-size: 20px;

  line-height: 30px;

  color: #292929;

  margin: 0 0 20px;

  font-weight: 700;

}



.pic-caption h3 span {

  margin-right: 9px;

  padding: 3px 8px 5px;

  background-color: #0875f0;

  font-weight: 400;

  color: #fff;

}



/* .map2 .pic-caption h3 span {

  background-color: #2a617a;

} */



/* .map3 .pic-caption h3 span {

  background-color: #295991;

}
 */


.pic-caption p {

  margin: 0;

  font-size: 16px;

}



@media (max-width: 1000px) {

  .map-tit {

    width: 50%;

  }

}



@media (max-width: 991px) {

  .pic-box {

    margin: 20px 0 0;

  }

}



@media (max-width: 767px) {

  .story {

    width: 7.07rem;

    

    
    padding: 10px 30px;
    

    line-height: 0.4rem;

  }



  .story:before {

    width: 7.07rem;

    
    top: -1rem;

  }


  .story:after {

    width: 7.07rem;

    
    

  }

  .story p {

    font-size: 14px;

  }



  .map-wrap .content {

    padding: 250px 0;

  }

}







@media (max-width: 480px) {

  .story-wrap .content {

    padding: 150px 0;

  }



  .map-wrap .content {

    padding: 250px 0;

  }



  .map1 {

    background-position: 40% 0;

  }



  .map2 {

    background-position: 7% 0;

  }


}