@charset "utf-8";
/* CSS Document */



#about{margin:0 auto;overflow:hidden;padding:0;}
#about>.about_ico{background:#ececec; text-align:center;margin:0 auto;padding:80px 0;}
#about>.about_ico>.wrap{ width:86%; max-width:1300px;margin:0 auto; text-align:center; font-size:16px; color:#666;}
#about>.about_ico>.wrap>span{display: inline-block;}
#about>.about_ico>.wrap>span>img{ position:relative; margin-top:-10px; display:inline-block; width:auto; height:28px; margin-right:10px;}
#about>.about_ico>.wrap>em{ display: inline-block;padding: 0 10px; font-style: normal; color: #666; }
#about .summary{padding-top:100px; box-sizing:border-box; background:#fff;}
#about .summary>.wrap{width:70%;margin:0 auto;}
#about .summary .tit{font-size:24px; font-weight:normal; color:#0071bc; text-align:left;}

#about .profile{ background:#fff; margin:0 auto;padding:3% 0;}
#about .profile>.title{ padding:30px 0; font-size:24px; color:#4d4d4d;box-sizing:border-box; padding-left:10%;  width:70%;margin:0 auto; text-align:left;}
#about .profile>.text{ box-sizing:border-box; width:70%;margin:0 auto; padding-left:10%; padding-bottom:100px; font-size:14px; color:#666; line-height:24px; text-align:left; column-count: 2;column-gap:100px;}
#about .profile>.text>p{padding-bottom:30px;}
#about .profile>.text>p.eh100{ height:80px; padding-top:20px;}
#about .profile>.text>p .ico{position:relative; vertical-align: top; margin-right:6px;}
#about .profile>.text>p .t1,#about .profile>.text>p .t2,#about .profile>.text>p .t3{ display:inline-block; height: 50px; line-height: 50px; }
#about .profile>.text>p .t1{ margin-right:15px;}
#about .profile>.text>p .t2{ margin-right:15px;}
#about .profile>.img{width:100%; position:relative;}
#about .profile>.img>.box-l{width:60%;text-align:left;overflow:hidden;}
#about .profile>.img>.box-r{ position:absolute;z-index:3; right:0;bottom:0; width:37%; height:100%; box-sizing:border-box; overflow:hidden; text-align:right;}
#about .profile>.img img{ width:100%;height:auto; transition:all 1s;}
#about .profile>.img>.box-r img{ width:100%;height:100%;}

#about .profile>.img img:hover{transform:scale(1.1);}


#about .workshop{ position:relative; margin:0 auto; background:#fff;}
#about .workshop .swiper-slide{width:auto!important;overflow: hidden;}
#about .workshop .swiper-slide>a{position: relative; display: block;}
#about .workshop .swiper-slide>a img{ position:relative; height:450px; width:auto;object-fit: cover;  transition:all .6s;}
#about .workshop .swiper-slide>a:after{ position:absolute;z-index:34;left:0;top:0; width:100%;height:100%; background:#000;opacity:0; content:'';transition:all .6s;}
#about .workshop .swiper-slide>a:before{position: absolute;z-index: 50; left: 50%;top: 50%; margin-top: -20px; margin-left: -70px; transform: translateY(-50px); width: 140px;height: 40px; line-height: 40px; opacity: 0; text-align: center; background: #0071bc; border-radius: 50px; color: #fff; font-size: 1.2rem; content: '播放恒一宣传片'; transition: all .8s;}
#about .workshop .swiper-slide>a:hover:after{opacity:.6;}
#about .workshop .swiper-slide>a:hover:before{opacity:1; transform: translateY(0);}
#about .workshop .button-next{ position:absolute;z-index:9; right:30px; top:50%; margin-top:-20px; width:40px; height:40px;outline:none; background:url("../img/icon_arrow_solidcircle_right_black.png") no-repeat; background-position:50% 50%; background-size:100% auto;opacity:.2; cursor:pointer; transition:all .35s;}
#about .workshop .button-next:hover{ background:url("../img/icon_arrow_solidcircle_right_blue.png") no-repeat; background-position:50% 50%; background-size:100% auto;opacity:.8; cursor:pointer; transition:all .35s;}
#about .workshop .button-prev{ position:absolute;z-index:9; left:30px; top:50%; margin-top:-20px; width:40px; height:40px;outline:none; background:url("../img/icon_arrow_solidcircle_left_black.png") no-repeat; background-position:50% 50%; background-size:100% auto;opacity:.2; cursor:pointer; transition:all .35s;}
#about .workshop .button-prev:hover{ background:url("../img/icon_arrow_solidcircle_left_blue.png") no-repeat; background-position:50% 50%; background-size:100% auto;opacity:.8; cursor:pointer; transition:all .35s;}



/*
#about .summary{padding:50px; padding-top:100px; box-sizing:border-box; background:#fff;}
#about .summary>.title{font-size:24px; font-weight:700; color:#02a7e7; text-align:center;}
#about .summary>.text{width:60%;margin:0 auto;padding:30px 0; text-align:center; font-size:13px; color:#666; line-height:28px;}
#about .profile{margin:0 auto; background:#fff;}
#about .profile>.container>.img{width: 50%;;position: relative;overflow: hidden;}
#about .profile>.container>.img img{ width:auto;height:100%; transition:all 1s;}
#about .profile>.container>.img img:hover{transform:scale(1.1);}
#about .profile>.container>.content{position: relative;width:50%;padding:60px 80px; padding-bottom:0 !important; box-sizing:border-box;}
#about .profile>.container>.content>.box{ width:70%; text-align:left; white-space:normal;overflow:hidden;}
#about .profile>.container>.content>.box>.title{font-weight: bold;font-size: 30px;color: #333333;letter-spacing: 1px;}
#about .profile>.container>.content>.box .text p{font-size: 14px;color: #666666;line-height: 26px;margin-top: 32px;}
#about .profile>.container>.content>.box .text p>strong{ display:inline-block; font-size:16px !important;}
#about .profile>.container:nth-child(2)>.content>.box{ float:right;}

*/

#about .statistics{ overflow:hidden; margin:0 auto; padding:120px 0; background:url("../img/statistics_img_bg.jpg") no-repeat; background-size:cover;}
#about .statistics>.wrap{margin:0 auto; width:100%; max-width:1200px;}
#about .statistics .item{margin-bottom:12px;}
#about .statistics .item>.box-left{background: #026ab5;width: 340px;padding:170px 0;margin-right: 12px;transition: all 1s;}
#about .statistics .item>.box-left .text{font-size: 18px;color: #fff;line-height: 30px;font-weight: bold;text-align: center;transition:all .5s;}
#about .statistics .item>.box-left .years{font-size: 60px;color: #fff;text-align: center;font-weight: bold;margin-top: 20px;margin-bottom: 40px;transition:all .5s;}
#about .statistics .item>.box-left .years>span {font-size:16px;color: #fff;line-height: 30px;transition:all .5s;}
#about .statistics .item>.box-left:hover{background:#fff;}
#about .statistics .item>.box-left:hover .text, #about .statistics .item>.box-left:hover .years, #about .statistics .item>.box-left:hover .years>span{ color:#026ab5;}
#about .statistics .item>.box-right{ width:calc(100% - 352px);}
#about .statistics .item>.box-right .box-ins-up{margin:0 auto 12px auto; width:100%; position:relative;}
#about .statistics .item>.box-right .box-ins-up>.box-profile{ width:400px; height:280px; border: 1px solid rgba(255,255,255,.3);padding: 90px 40px 70px 40px; box-sizing:border-box; text-align:left;transition: all .8s;}
#about .statistics .item>.box-right .box-ins-up>.box-profile .icon{width: 83px;margin-bottom: 15px;}
#about .statistics .item>.box-right .box-ins-up>.box-profile .icon>img{ width:100%;height:auto;}
#about .statistics .item>.box-right .box-ins-up>.box-profile .text{font-size: 18px;color: #fff;line-height: 30px;max-height: 30px;overflow: hidden;}
#about .statistics .item>.box-right .box-ins-up>.box-profile:hover{border:1px solid rgba(255,255,255,.7);}
#about .statistics .item>.box-right .box-ins-up>.box-honor{ width:437px; height:280px; padding:70px 30px; box-sizing:border-box; background:#fff; position: relative; text-align:left; transition: all .8s;}
#about .statistics .item>.box-right .box-ins-up>.box-honor>.icon{position:absolute;z-index:3; right:40px; bottom:60px; width:90px;height:90px;overflow:hidden;}
#about .statistics .item>.box-right .box-ins-up>.box-honor>.icon>img{ position:absolute;left:0;top:0; width:100%; height:auto;opacity:.5;}
#about .statistics .item>.box-right .box-ins-up>.box-honor>.title {font-size: 18px;color: #444;line-height: 30px;font-weight: bold;max-height: 30px;overflow: hidden;margin-bottom: 10px;transition: all .8s;}
#about .statistics .item>.box-right .box-ins-up>.box-honor>.text>p{padding-top:5px; font-size:14px; font-weight:600; color:#666; transition:all .5s;}
#about .statistics .item>.box-right .box-ins-up>.box-honor>.text>p a{display:inline-block; transition:all .5s;}
#about .statistics .item>.box-right .box-ins-up>.box-honor>.text>p a>span{font-size:20px; color:#026ab5; transition:all .5s;}
#about .statistics .item>.box-right .box-ins-up>.box-honor>.text>p a:hover>span{color:#fff; text-decoration:underline;}
#about .statistics .item>.box-right .box-ins-up>.box-honor:hover{background:#026ab5;}
#about .statistics .item>.box-right .box-ins-up>.box-honor:hover .title{color:#fff;}
#about .statistics .item>.box-right .box-ins-up>.box-honor:hover .text>p{color:rgba(255,255,255,.8);}
#about .statistics .item>.box-right .box-ins-up>.box-honor:hover .text>p a{color:rgba(255,255,255,1)}
#about .statistics .item>.box-right .box-ins-up>.box-honor:hover .text>p a>span{color:rgba(255,255,255,1)}
#about .statistics .item>.box-right .box-ins-up>.box-honor:hover .icon>img{ top:-90px;opacity:1;}
#about .statistics .item>.box-right .box-ins-down>.box-staff{ width:400px; height:246px; padding:70px 30px; box-sizing:border-box; background:#fff; position: relative; text-align:left; transition: all .8s;}
#about .statistics .item>.box-right .box-ins-down>.box-staff>.icon{position:absolute;z-index:3; right:40px; bottom:60px; width:90px;height:90px;overflow:hidden;}
#about .statistics .item>.box-right .box-ins-down>.box-staff>.icon>img{ position:absolute;left:0;top:0; width:100%; height:auto;opacity:.5;}
#about .statistics .item>.box-right .box-ins-down>.box-staff>.title {font-size: 18px;color: #444;line-height: 30px;font-weight: bold;max-height: 30px;overflow: hidden;margin-bottom: 10px;transition: all .8s;}
#about .statistics .item>.box-right .box-ins-down>.box-staff>.text{padding-top:3px; font-size:60px; font-weight:600; color:#026ab5;transition:all .5s;}
#about .statistics .item>.box-right .box-ins-down>.box-staff:hover{background:#026ab5;}
#about .statistics .item>.box-right .box-ins-down>.box-staff:hover .title{color:#fff;}
#about .statistics .item>.box-right .box-ins-down>.box-staff:hover .text{color:rgba(255,255,255,1);}
#about .statistics .item>.box-right .box-ins-down>.box-staff:hover .icon>img{ top:-90px;opacity:1;}
#about .statistics .item>.box-right .box-ins-down>.box-field{ width:437px; height:246px; padding:70px 30px; box-sizing:border-box; border: 1px solid rgba(255,255,255,.3); position: relative; text-align:left; transition: all .8s;}
#about .statistics .item>.box-right .box-ins-down>.box-field>.icon{position:absolute;z-index:3; right:10px; bottom:60px; width:120px;height:120px;overflow:hidden;}
#about .statistics .item>.box-right .box-ins-down>.box-field>.icon>img{ position:absolute;left:0;top:0; width:100%; height:auto;opacity:1;}
#about .statistics .item>.box-right .box-ins-down>.box-field>.title {font-size: 18px;color: #fff;line-height: 30px;font-weight: bold;max-height: 30px;overflow: hidden;margin-bottom: 10px;transition: all .8s;}
#about .statistics .item>.box-right .box-ins-down>.box-field>.text{padding-top:5px; box-sizing:border-box; padding-right:100px; font-size:14px; color:#fff;transition:all .5s;}
#about .statistics .item>.box-right .box-ins-down>.box-field:hover{border:1px solid rgba(255,255,255,.7);}
#about .statistics .item>.box-factory {width: 545px; height:280px; padding:20px 20px 15px 35px;border: 1px solid rgba(255,255,255,.3);box-sizing:border-box; text-align:left;transition: all .8s;}
#about .statistics .item>.box-factory .con{width:33%;}
#about .statistics .item>.box-factory .con>.title{font-size:18px;color: #fff;font-weight: bold;}
#about .statistics .item>.box-factory .con>.title>span{font-size:60px;}
#about .statistics .item>.box-factory .con>.text{font-size:14px;color: #fff;line-height: 24px;}
#about .statistics .item>.box-factory .img{padding:0;}
#about .statistics .item>.box-factory .img>img{max-width:100%;height:auto;}
#about .statistics .item>.box-application{ width:645px; height:280px; padding:70px; box-sizing:border-box; background:#fff; position: relative; text-align:left; transition: all .8s;}
#about .statistics .item>.box-application>.icon{ position:relative; width:90px;height:90px;overflow:hidden;}
#about .statistics .item>.box-application>.icon>img{ position:absolute;left:0;top:0; width:100%; height:auto;opacity:.5;}
#about .statistics .item>.box-application>.text{padding-top:5px; font-size: 14px;color: #666;line-height: 24px;transition:all .5s;}
#about .statistics .item>.box-application:hover{background:#026ab5;}
#about .statistics .item>.box-application:hover .text{color:rgba(255,255,255,1);}
#about .statistics .item>.box-application:hover .icon>img{ top:-90px;opacity:1;}


#about .history{ overflow:hidden; margin:0 auto;padding:80px 0;}
#about .history>.title{ position:relative; width:86%; max-width:1300px; margin:0 auto; font-size: 30px; color: #333; text-align:center;font-weight: 600;}
#about .history>.title:after{position:absolute;z-index:3;left:50%;bottom:-10px; margin-left:-25px; width:50px;height:2px; background:#026ab5;content:'';}
#about .history>.container{ position:relative; margin:0 auto;padding:70px 0 20px 0; width:90%; max-width:1000px;}
#about .history>.container .prev{ position:absolute;z-index:3;left:-30px;bottom:10px; width:40px; height:40px; background:url("../img/icon_arrow_noline_left_black.png") no-repeat; background-size:100% auto;opacity:.2; transition:all .35s;}
#about .history>.container .prev:hover{left:-36px;opacity:.6;}
#about .history>.container .next{ position:absolute;z-index:3;right:-30px;bottom:10px; width:40px; height:40px; background:url("../img/icon_arrow_noline_right_black.png") no-repeat; background-size:100% auto;opacity:.2; transition:all .35s;}
#about .history>.container .next:hover{right:-36px;opacity:.6;}
#about .history>.container .text{ position:relative; width:100%; height:100px; padding:50px 0;}
#about .history>.container .text .swiper-wrapper:hover{z-index:11; position:relative;}
#about .history>.container .text .swiper-slide{ text-align:center;font-size:16px; line-height:30px;color:#666;}
#about .history>.container .text .swiper-container{width:100%; height:100%;}
#about .history>.container .years{ position:relative; width:100%; margin:10px auto;}
#about .history>.container .years:after{position:absolute;z-index:1;left:0;bottom:30px; width:100%;height:1px;background:#ddd;content:'';}
#about .history>.container .years .swiper-container{position:relative;z-index:99; width:80%; height:130px; margin:0 auto; text-align:center;}
#about .history>.container .years .swiper-slide{font-size:18px; padding-top:60px; box-sizing:border-box; font-family:Arial; font-weight:600; color:#333; text-align:center; transition:all .35s;}
#about .history>.container .years .swiper-slide:after{ position:absolute;z-index:3;left:50%; bottom:28px; margin-left:-3px; width:6px;height:6px; background:#666; border-radius:100%; content:''; transition:all .35s;}
#about .history>.container .years .swiper-slide:before{position:absolute;z-index:3;left:50%;bottom:10px; margin-left:-15px; width:30px;height:30px;opacity:0; box-shadow:0 0 8px rgba(0,0,0,.2); background:#fff;border:1px solid #ddd; border-radius:100%; content:''; transition:all .35s;}
#about .history>.container .years .active-nav{position:relative; padding-top:0; bottom:0; z-index:11; color:#026ab5;font-size:60px;}
#about .history>.container .years .active-nav:after{background:#026ab5;}
#about .history>.container .years .active-nav:before{margin-left:-20px; width:40px;height:40px;opacity:1;}

#about .history>.more{ text-align:center;margin:0 auto; padding-bottom:50px;}
#about .history>.more>a{display:inline-block;padding:0 50px; height:58px; line-height:58px; border:2px solid transparent; outline:none; font-size:18px; color:#fff; background:#026ab5; cursor:pointer; border-radius:50px;box-sizing:border-box;overflow:hidden; transition:all .35s;}
#about .history>.more>a:hover{background:none; border:2px solid #026ab5; color:#026ab5;}

@media only screen and (max-width: 1650px){
  #about .profile>.text>p .t1,#about .profile>.text>p .t2,#about .profile>.text>p .t3{}
}

@media only screen and (max-width: 1500px){
  #about .profile>.text>p.eh100{ height:auto;}



}

@media only screen and (max-width: 1420px){
  #about .summary>.text{width:80%;}

}

@media only screen and (max-width: 1360px){
  /*
  #about .profile>.container>.content{padding:30px 60px;}
  #about .profile>.container>.content>.box{ width:100%;}
  #about .profile>.container>.content>.box .text p{margin-top: 28px;}

  */
  #about .profile>.title{ padding-left:6%;}
  #about .profile>.text{ padding-left:6%;}
  #about .workshop .swiper-slide img{ height:360px;}

}
@media only screen and (max-width: 1200px){

  #about .profile>.title{ padding-left:0;}
  #about .profile>.text{ padding-left:0;}
  /*
  #about .profile>.container>.img{float:none;width: 100%; }
  #about .profile>.container>.img>img{ width:100%;height:auto;}
  #about .profile>.container>.content{float:none;width:100%; padding-bottom: 60px!important;}
  #about .profile>.container>.content>.box{ width:100%;}
  #about .profile>.container>.content>.box>.title{font-size: 24px;}
  */

  #about .statistics .item{padding:0 60px; box-sizing:border-box; margin-bottom:12px;}
  #about .statistics .item>.box-left{ float:none; width: 100%;padding:30px 0;margin-right: 0; margin-bottom:12px;}
  #about .statistics .item>.box-left .text{font-size: 18px;}
  #about .statistics .item>.box-left .years{font-size: 30px;margin-top:10px;margin-bottom: 20px;}
  #about .statistics .item>.box-left .years>span {font-size:14px;}
  #about .statistics .item>.box-right{ float:none; width:100%;}
  #about .statistics .item>.box-right .box-ins-up{margin:0 auto 12px auto; width:100%; position:relative;}
  #about .statistics .item>.box-right .box-ins-up>.box-profile{ float:none; width:100%; height:auto;padding:40px; margin-bottom:12px;}
  #about .statistics .item>.box-right .box-ins-up>.box-profile .icon{width: 60px;}
  #about .statistics .item>.box-right .box-ins-up>.box-profile:hover{border:1px solid rgba(255,255,255,.7);}
  #about .statistics .item>.box-right .box-ins-up>.box-honor{ width:100%; height:auto; padding:40px;}
  #about .statistics .item>.box-right .box-ins-up>.box-honor>.icon{bottom:20px;}
  #about .statistics .item>.box-right .box-ins-up>.box-honor>.text>p{ display:inline-block; width:40%;}
  #about .statistics .item>.box-right .box-ins-down>.box-staff{ float:none; width:100%; height:auto; padding:40px;}
  #about .statistics .item>.box-right .box-ins-down>.box-staff>.text{font-size:40px;}
  #about .statistics .item>.box-right .box-ins-down>.box-field{ float:none; width:100%; height:auto; padding:40px; margin-bottom:12px;}
  #about .statistics .item>.box-right .box-ins-down>.box-field>.icon{ bottom:20px;}
  #about .statistics .item>.box-factory { float:none; width: 100%; height:auto; padding:20px 40px; margin-bottom:12px;}
  #about .statistics .item>.box-application{ float:none; width:100%; height:auto; padding:40px;}
  #about .history>.title{font-size:24px;}

}

@media only screen and (max-width: 870px){
  #about .profile>.text{ column-count:auto;column-gap:normal;}
  #about .profile>.img>.box-l{width:100%; float:none; margin-bottom:3%;}
  #about .profile>.img>.box-r{ position:relative;width:100%; float:none;}
  #about .profile>.img>.box-r img{ height:auto;}

  #about .workshop .swiper-slide img{ height:280px;}
}

@media only screen and (max-width: 640px){

  #about>.about_ico>.wrap>span{display: block; padding-bottom: 5px;}
  #about>.about_ico>.wrap>em{display: none;}

  #about .summary{padding:30px;}
  /*
  #about .summary>.text{width:90%; line-height:26px;}
  #about .profile>.container>.content{padding:30px;}
  

  */
  #about .statistics{padding:20px;}
  #about .statistics .item{padding:0;}
  #about .statistics .item>.box-right .box-ins-up>.box-honor>.icon{right:20px; bottom:40px;}
  #about .statistics .item>.box-right .box-ins-up>.box-honor>.text>p{ display:block; width:100%;}
  #about .statistics .item>.box-factory .con{width:100%;}

  #about .history>.container{ width:70%;}
  #about .history>.container .text .swiper-slide{font-size:14px; line-height:26px;}
  #about .history>.container .years .active-nav{font-size:50px;}
  #about .history>.more>a{height:48px; line-height:48px;font-size:16px;}


  #about .workshop .swiper-slide {width: 100%!important;}





}



@media only screen and (max-width: 440px){
	
	#about .profile>.text>p .t1,#about .profile>.text>p.eh100 .t2,#about .profile>.text>p.eh100 .t3{ display:block;}

}