@charset "utf-8";

/* banner */
.banner{
    background: url(./../../../../img/www/second/design_bg.png) center center no-repeat;
    background-size: 1920px auto;
    height: 400px;
    position: relative;
  }
  .banner img{
    width: 1200px;
    display: block;
    margin: 0 auto;
  }
.banner .sign{height:98px;width: 1200px;background:#fff;box-shadow:0px 2px 20px 0px rgba(0,0,0,0.1);left: 50%;margin-left: -600px;bottom: -49px;position: absolute;text-align: center;}
.banner .sign p:first-child{font-size: 20px;line-height: 26px;padding-top: 20px;color: #333;}
.banner .sign p:last-child{font-size: 18px;line-height: 24px;color: #999;margin-top: 8px;font-family: ArialMT,Arial;}

.hd{text-align: center;}
.hd h4{font-size:24px;font-weight:bold;color:#333;line-height:31px;letter-spacing:1.6px;}
.hd p{font-size:14px;font-family:ArialMT,Arial;color:#283649;line-height:16px;margin: 8px 0 32px;font-family: ArialMT,Arial;letter-spacing: 0.93px;}

.card{padding: 109px 0 60px 0;}
.card .imgBox{margin-top: 32px;}
.card .imgBox img{width: 1200px;display: block;margin: 0 auto;}

.exchange{padding: 40px 0 67px 0;background:#215aa9 url("../../../../img/www/second/design_bg01.png") center center no-repeat; background-size: 100% auto;}
.exchange .hd h4{color: #fff;}
.exchange .hd p{color: #fff;}
.exchange .imgBox{margin-top: 39px;}
.exchange .imgBox img{width: 100%;height: auto;}

.derive{padding: 60px 0 0;}
.derive .imgBox img{width: 1200px;display: block;margin: 0 auto;}

.share{padding: 60px 0 81px 0;}
.shareIn{width: 1200px;margin: 0 auto;}
.share .imgBox{margin-top: 0px;position: relative;height: 509px;}
.share .imgBox .item{position: absolute;top: 50%;transform: translateY(-50%);width: 740px;height: 416px;}
.share .imgBox .item:first-child{left: 0;z-index: 900;}
.share .imgBox .item:last-child{right: 0;z-index: 800;}
.share .imgBox .item img{width: 100%;height: auto;}
.share .imgBox a{width:320px;height:72px;text-align: center;background:#283649;border-radius:36px;line-height: 72px;display: block;position: absolute;bottom: -7px;left: 50%;margin-left: -160px;color: #fff;cursor: pointer;opacity: 0;}
.share .imgBox a span{font-size: 20px;font-weight: 500;color: #fff;float: left;margin-left: 84px;}
.share .imgBox a em{display: block;border: solid 6px transparent;border-left-color: #fff;float: left;margin-top: 30px;margin-left: 40px;}
.share .imgBox .on{z-index: 1000!important;width: 852px;height: 509px;transform: translateY(-47%);}
.share .imgBox .on img{width: 100%;height: auto;}
.share .imgBox .on a{opacity: 1;}

.designDetail img{
  max-width: 100%;
}

@media screen and (max-width:1200px){
  .banner img{
    margin-left: 48px;
  }
}
@media screen and (min-width:1920px){
  .banner{
    background: url(./../../../../img/www/second/design_bg.png) center center no-repeat;
    background-size: 100% auto;
  }
}