@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:90px 0;}
#about .profile>.title{ padding:30px 0; font-size:30px; color:#4d4d4d;box-sizing:border-box; width:70%;margin:0 auto; text-align:center; font-weight:bolder;}
#about .profile>.title>.en{text-align:left; color:#999; font-size:14px;}
#about .profile>.w70{width:70%; margin:auto;}
#about .profile>.w70 .text{ width:30%;margin:0 auto; font-size:18px; color:#666; line-height:30px; text-align:left; float:left; transition:all 0.1s;}
#about .profile .textp{ float:right; width:65%;}
#about .profile .textp img{width:100%;}
#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; padding:90px 0;}
#about .workshop>.title{ padding:30px 0; font-size:30px; color:#4d4d4d;box-sizing:border-box; width:70%;margin:0 auto; text-align:center; font-weight:bolder;}
#about .workshop>.title>.en{text-align:left; color:#999; font-size:14px;}
#about .workshop .swiper-slide{width:auto!important;cursor:move;}
#about .workshop .swiper-slide img{ position:relative; height:450px; width:auto; transition:all .6s;}
#about .workshop .swiper-slide: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:hover:after{opacity:.6;}
#about .workshop .button-next{ position:absolute;z-index:9; right:30px; top:50%; margin-top:-20px; width:40px; height:40px;outline:none; background:url("../images/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("../images/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("../images/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("../images/icon_arrow_solidcircle_left_blue.png") no-repeat; background-position:50% 50%; background-size:100% auto;opacity:.8; cursor:pointer; transition:all .35s;}


#about .customers{ position:relative; margin:0 auto; background:#fff; padding:90px 0;}
#about .customers>.title{ padding:30px 0; font-size:30px; color:#4d4d4d;box-sizing:border-box; width:70%;margin:0 auto; text-align:center; font-weight:bolder;}
#about .customers>.title>.en{text-align:left; color:#999; font-size:14px;}
#about .customers .wrap{margin:0 auto; width:100%; max-width:1600px;}
#about .customers .khlist{}
#about .customers .khlist ul{}
#about .customers .khlist li{ float:left; width:16%; margin:2%;}
#about .customers .khlist li img{ max-width:100%;}

#about .culture{ overflow:hidden; margin:0 auto; padding:90px 0;}
#about .culture>.title{ padding:30px 0; font-size:30px; color:#4d4d4d;box-sizing:border-box; width:70%;margin:0 auto; text-align:center; font-weight:bolder;}
#about .culture>.title>.en{text-align:left; color:#999; font-size:14px;}
#about .culture>.wrap{margin:0 auto; width:100%; max-width:1600px;}
#about .culture .whp{ float:left; width:50%; text-align:right}
#about .culture .whp img{max-width:100%;}
#about .culture .wht{ float:right; width:48%; text-align:left;}
#about .culture .wht ul li{ height:80px; margin:5% 0;}
#about .culture .wht ul li h1{ font-size:32px; color:#7aa8fb; line-height:50px;}
#about .culture .wht ul li p{ font-size:18px; line-height:30px;}
#about .culture .wht ul li span{ display:block; color:#fff;border-radius:50%; width:80px; height:80px; text-align:center; line-height:80px; font-weight:bolder; font-size:30px; float:left; margin-right:20px;}
#about .culture .wht ul li:nth-child(2n+1) span{ background:#4a8cfa;}
#about .culture .wht ul li:nth-child(2n) span{ background:#7aa8fb;}


#about .business{ overflow:hidden; margin:0 auto; padding-top:90px;/* background:url(../images/map.png) left bottom no-repeat; background-size:50%;*/}
#about .business>.title{ padding:30px 0; font-size:30px; color:#4d4d4d;box-sizing:border-box; width:70%;margin:0 auto; text-align:center; font-weight:bolder;}
#about .business>.title>.en{text-align:left; color:#999; font-size:14px;}
#about .business>.wrap{margin:0 auto; width:100%; position:relative;}
#about .business .dtt{ text-align:left; width:46%; font-size:30px; line-height:60px; position:absolute; top:50%; right:0px; transform:translateY(-50%);}
#about .business .dtp{ text-align:right; float:left; width:46%;}


#about .history{ overflow:hidden; margin:0 auto;padding-top:80px;}
#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("../images/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("../images/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: 2000px){
#about .profile>.w70 .text{ font-size:16px; line-height:25px;}
}
@media only screen and (max-width: 1700px){
#about .profile>.w70 .text{ line-height:22px;}
}

@media only screen and (max-width: 1650px){
  #about .profile>.text>p .t1,#about .profile>.text>p .t2,#about .profile>.text>p .t3{}
#about .culture .whp{ width:40%;}
#about .culture .wht{width:55%;}
}

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


}

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

}

@media only screen and (max-width: 1360px){
  #about .profile>.title{ padding-left:6%;}
  #about .profile>.text{ padding-left:6%;}
  #about .workshop .swiper-slide img{ height:360px;}
#about .profile>.w70 .text{width:100%;}
#about .profile>.w70 .textp{width:100%;}
#about .business .dtt{  font-size:18px;}
}
@media only screen and (max-width: 1200px){

  #about .profile>.title{ padding-left:0;}
  #about .profile>.text{ padding-left:0;}
  #about .history>.title{font-size:24px;}
  #about .customers .khlist li{width:21%;}
}
@media only screen and (max-width: 1020px){
#about .culture .wht{ width:58%;}
#about .culture .wht ul li{ height:60px;}
#about .culture .wht ul li h1{ font-size:25px; line-height:40px;}
#about .culture .wht ul li p{ font-size:15px; line-height:20px;}
#about .culture .wht ul li span{width:60px; height:60px;line-height:60px; font-size:25px;}

}
@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;}
  #about .business .dtt{ position:relative; width:90%;transform: translateY(0%); margin:auto;}
  #about .business .dtp{ float:none; width:100%;}
}
@media only screen and (max-width: 700px){
#about .culture .wht{ width:100%; float:none; margin:auto;}
#about .culture .wht ul li{height:auto; text-align:center; width:40%; float:left; margin:5%;}
#about .culture .wht ul li:nth-child(2n+1){clear:both;}
#about .culture .wht ul li span{ float:none; margin:auto;}
#about .culture .wht ul li h1{ font-size:20px;}
#about .culture .wht ul li p{ font-size:14px;}
#about .culture .whp{ width:80%; float:none; margin:auto;}
}
@media only screen and (max-width: 640px){
#about .profile>.w70{width:90%;}
  #about>.about_ico>.wrap>span{display: block; padding-bottom: 5px;}
  #about>.about_ico>.wrap>em{display: none;}
  #about .profile{padding:20px;}
  #about .workshop{padding:20px;}
  #about .customers{padding:20px;}
  #about .summary{padding:20px;}
  #about .history{padding:20px;}
  #about .culture{padding:20px;}
  #about .business{padding-top:20px;}
  #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 .business .dtt{  font-size:15px;}
  #about .customers .khlist li{width:29.33333%;}


}



@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;}
  #about .customers .khlist li{width:46%;}

}