.section1 .cont1 {
  background-color: #dbf0fb;
  border-radius: .3rem;
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  margin-bottom: .6rem
}

@media (max-width:767px) {
  .section1 .cont1 {
    display: block;
    margin-bottom: .4rem
  }
}

.section1 .cont1:after {
  content: "";
  display: block;
  background: url(../image/social_responsibility_img6.png) no-repeat 50%;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transform: translate3d(100%, 100%, 0);
  -moz-transform: translate3d(100%, 100%, 0);
  transform: translate3d(100%, 100%, 0);
  -webkit-transition: opacity 3s cubic-bezier(.19, 1, .22, 1), -webkit-transform 3s cubic-bezier(.19, 1, .22, 1);
  transition: opacity 3s cubic-bezier(.19, 1, .22, 1), -webkit-transform 3s cubic-bezier(.19, 1, .22, 1);
  -moz-transition: transform 3s cubic-bezier(.19, 1, .22, 1), opacity 3s cubic-bezier(.19, 1, .22, 1), -moz-transform 3s cubic-bezier(.19, 1, .22, 1);
  transition: transform 3s cubic-bezier(.19, 1, .22, 1), opacity 3s cubic-bezier(.19, 1, .22, 1);
  transition: transform 3s cubic-bezier(.19, 1, .22, 1), opacity 3s cubic-bezier(.19, 1, .22, 1), -webkit-transform 3s cubic-bezier(.19, 1, .22, 1), -moz-transform 3s cubic-bezier(.19, 1, .22, 1);
  width: 5.39rem;
  height: 4.68rem
}

.section1 .cont1 .item-img {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  position: relative;
  width: 48.7%;
  min-height: 27.6vw
}

@media (max-width:767px) {
  .section1 .cont1 .item-img {
    width: 100%;
    min-height: 65.25vw
  }
}

.section1 .cont1 .item-img:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1
}

.section1 .cont1 .item-img b {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}


.section1 .cont1 .item-text {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  align-items: center;
  width: 51.3%;
  padding: .8rem 0.6rem
}

@media (max-width:767px) {
  .section1 .cont1 .item-text {
    width: 100%;
    padding: .4rem
  }
}

.section1 .cont1 .item-text .title {
  margin-bottom: .22rem;
  font-size: .42rem;
  color: #082d43;
  font-weight: 600;
}

@media (max-width:767px) {
  .section1 .cont1 .item-text .title {
    text-align: center;
    font-weight: 700
  }
}

@media (max-width:1024px) {
  .section1 .cont1 .item-text .title {
    font-size: .62rem
  }
}

@media (max-width:991px) {
  .section1 .cont1 .item-text .title {
    font-size: .72rem
  }
}

@media (max-width:767px) {
  .section1 .cont1 .item-text .title {
    font-size: .44rem
  }
}

.section1 .cont1 .item-text .desc {
  line-height: 2;
  font-size: .16rem
}

@media (max-width:1024px) {
  .section1 .cont1 .item-text .desc {
    font-size: .3rem
  }
}

@media (max-width:991px) {
  .section1 .cont1 .item-text .desc {
    font-size: .4rem
  }
}

@media (max-width:767px) {
  .section1 .cont1 .item-text .desc {
    font-size: .3rem
  }
}

.section1 .cont1 .item-text .desc p:not(:last-child) {
  margin-bottom: .3rem
}

.section1 .cont1.is-inview:after {
  -webkit-transition-delay: .6s;
  -moz-transition-delay: .6s;
  transition-delay: .6s;
  opacity: 1;
  -webkit-transform: translate3d(25%, 25%, 0);
  -moz-transform: translate3d(25%, 25%, 0);
  transform: translate3d(25%, 25%, 0)
}

.section1 ul {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex
}

@media (max-width:991px) {
  .section1 ul {
    display: block
  }
}

.section1 ul li {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  position: relative;
  border-radius: .3rem;
  overflow: hidden;
  -webkit-transition: opacity 3s cubic-bezier(.19, 1, .22, 1), -webkit-box-shadow .3s, -webkit-transform 3s cubic-bezier(.19, 1, .22, 1);
  transition: opacity 3s cubic-bezier(.19, 1, .22, 1), -webkit-box-shadow .3s, -webkit-transform 3s cubic-bezier(.19, 1, .22, 1);
  -moz-transition: box-shadow .3s, transform 3s cubic-bezier(.19, 1, .22, 1), opacity 3s cubic-bezier(.19, 1, .22, 1), -moz-transform 3s cubic-bezier(.19, 1, .22, 1);
  transition: box-shadow .3s, transform 3s cubic-bezier(.19, 1, .22, 1), opacity 3s cubic-bezier(.19, 1, .22, 1);
  transition: box-shadow .3s, transform 3s cubic-bezier(.19, 1, .22, 1), opacity 3s cubic-bezier(.19, 1, .22, 1), -webkit-box-shadow .3s, -webkit-transform 3s cubic-bezier(.19, 1, .22, 1), -moz-transform 3s cubic-bezier(.19, 1, .22, 1);
  background-color: #dbf0fb;
  height: 20.83vw;
  width: 49%;
  margin-bottom: .45rem
}

@media (max-width:1024px) {
  .section1 ul li {
    height: 25vw
  }
}

@media (max-width:991px) {
  .section1 ul li {
    height: 40vw
  }
}

@media (max-width:767px) {
  .section1 ul li {
    height: auto
  }
}

@media (max-width:991px) {
  .section1 ul li {
    width: 100%
  }
}

@media (max-width:767px) {
  .section1 ul li {
    margin-bottom: .4rem
  }
}

.section1 ul li .item-img {
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  -moz-transition: transform .3s, -moz-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s, -moz-transform .3s;
  position: absolute;
  height: 100%
}

@media (max-width:767px) {
  .section1 ul li .item-img {
    position: relative;
    height: 48vw
  }
}

.section1 ul li .item-img:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1
}

.section1 ul li .item-img b {
  display: block;
  height: 100%;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
  background-size: cover;
}

.section1 ul li .item-img h2 {
  position: absolute;
  z-index: 2;
  color: #fff;
  width: 100%;
  text-align: center;
  -webkit-transition: opacity .3s;
  -moz-transition: opacity .3s;
  transition: opacity .3s;
  top: 20%;
  font-size: .3rem
}

@media (max-width:767px) {
  .section1 ul li .item-img h2 {
    display: none
  }
}

@media (max-width:1024px) {
  .section1 ul li .item-img h2 {
    font-size: .48rem
  }
}

@media (max-width:991px) {
  .section1 ul li .item-img h2 {
    font-size: .58rem
  }
}

@media (max-width:767px) {
  .section1 ul li .item-img h2 {
    font-size: .4rem
  }
}

.section1 ul li .item-text {
  z-index: 1;
  height: 100%;
  background-color: #dbf0fb;
  top: 0;
  left: 100%;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  -moz-transition: transform .5s, -moz-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s, -moz-transform .5s;
  position: absolute;
  -webkit-transform: translateX(.75rem);
  -moz-transform: translateX(.75rem);
  -ms-transform: translateX(.75rem);
  transform: translateX(.75rem);
  width: 54.5%;
  padding: .5rem .45rem .5rem .35rem
}

@media (max-width:767px) {
  .section1 ul li .item-text {
    position: static;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
  }
}

@media (max-width:1024px) {
  .section1 ul li .item-text {
    width: 69.5%
  }
}

@media (max-width:991px) {
  .section1 ul li .item-text {
    width: 50%
  }
}

@media (max-width:767px) {
  .section1 ul li .item-text {
    width: 100%
  }
}

@media (max-width:1024px) {
  .section1 ul li .item-text {
    padding: .4rem
  }
}

@media (max-width:991px) {
  .section1 ul li .item-text {
    padding: .8rem
  }
}

@media (max-width:767px) {
  .section1 ul li .item-text {
    padding: .4rem
  }
}

.section1 ul li .item-text:after {
  content: "";
  height: 100%;
  background: url(../images/social/social_responsibility_img7.png) no-repeat 50%;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  right: -webkit-calc(100% - 2px);
  right: -moz-calc(100% - 2px);
  right: calc(100% - 2px);
  display: block;
  width: .74rem
}

@media (max-width:767px) {
  .section1 ul li .item-text:after {
    display: none
  }
}

.section1 ul li .item-text .title {
  font-size: .30rem;
  color: #082d43;
  margin-bottom: .15rem;
  font-weight: 600;
}

@media (max-width:767px) {
  .section1 ul li .item-text .title {
    text-align: center;
    font-weight: 700
  }
}

@media (max-width:1024px) {
  .section1 ul li .item-text .title {
    font-size: .48rem
  }
}

@media (max-width:991px) {
  .section1 ul li .item-text .title {
    font-size: .58rem
  }
}

@media (max-width:767px) {
  .section1 ul li .item-text .title {
    font-size: .4rem
  }
}

.section1 ul li .item-text .desc {
  font-size: 16px;
  line-height: 1.6;
  color: #082d43;
}

.section1 ul li .item-btn {
  position: absolute;
  z-index: 2;
  bottom: .26rem;
  right: .40rem
}

@media (max-width:767px) {
  .section1 ul li .item-btn {
    display: none
  }
}

.section1 ul li .item-btn .common-btn {
  background-color: #fff;
  position: relative;
  cursor: pointer
}

.section1 ul li .item-btn .common-btn .icon:after,
.section1 ul li .item-btn .common-btn .icon:before {
  content: "\e632";
  color: #00b0ec
}

.section1 ul li .item-btn .common-btn:hover:after {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1)
}

.section1 ul li .item-btn .common-btn.active:after {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1)
}

.section1 ul li .item-btn .common-btn.active .icon:after,
.section1 ul li .item-btn .common-btn.active .icon:before {
  content: "\e634"
}

.section1 ul li:hover .item-img b {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05)
}

.section1 ul li.active .item-img {
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  -moz-transition: transform .5s, -moz-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s, -moz-transform .5s;
  -webkit-transform: translateX(-30%);
  -moz-transform: translateX(-30%);
  -ms-transform: translateX(-30%);
  transform: translateX(-30%)
}

@media (max-width:1024px) {
  .section1 ul li.active .item-img {
    -webkit-transform: translateX(-53%);
    -moz-transform: translateX(-53%);
    -ms-transform: translateX(-53%);
    transform: translateX(-53%)
  }
}

@media (max-width:991px) {
  .section1 ul li.active .item-img {
    -webkit-transform: translateX(-28%);
    -moz-transform: translateX(-28%);
    -ms-transform: translateX(-28%);
    transform: translateX(-28%)
  }
}

@media (max-width:767px) {
  .section1 ul li.active .item-img {
    -webkit-transform: translateX(-80%);
    -moz-transform: translateX(-80%);
    -ms-transform: translateX(-80%);
    transform: translateX(-80%)
  }
}

.section1 ul li.active .item-img h2 {
  opacity: 0
}

.section1 ul li.active .item-text {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%)
}

@media (max-width:1440px) {
  .section1 ul li .item-text .desc {
    font-size: 14px;
  }

}

/*# sourceMappingURL=1e426e87e8c5f45b8bd3a992063e77cd.css.map*/