@charset "utf-8";

/* CSS Document */
html, body {font-size: 12px;margin: 0px;padding: 0px;text-decoration: none;font-family:'寰蒋闆呴粦',Arial,Helvetica,sans-serif;background: #fff; text-align: left;-webkit-text-size-adjust: none;}
a {	color: #3c3c3c;text-decoration: none;outline: 0px none; star:expression(this.onFocus=this.blur()); transition:all .35s;}
a:hover, a:active { color: #f74845;}
* { margin: 0px;padding: 0px;list-style: none;}
table {	border-collapse: collapse;}
ul, li {list-style: none;border: 0 none;padding: 0px;}
form {margin: 0px;}
img {border: 0px none;text-align-last: center;vertical-align: middle;_azimuth:expression(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "images/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("', '').replace('")', ''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")), this.pngSet=true);}
center {text-align: left;	color: #999;height: 50px;}
::-webkit-scrollbar-track-piece {background-color:#000;}
::-webkit-scrollbar {width:5px;height:5px;}
::-webkit-scrollbar-thumb { cursor:pointer; background-color:#f74845; border-radius:30px; background-clip:padding-box;min-height:28px;}
::-webkit-scrollbar-thumb:hover {background-color:#ff7a78;}
#dhtmltooltip {z-index: 100;visibility: hidden;	position: absolute;text-align: left;border: 1px solid #ccc;}
#clear, .clear {clear: both;float: none!important;background: none;width: 0 !important;	height: 0 !important;}
#noData, .noData {color: #ccc;font-size: 14px;text-align: left;padding: 50px 0px;}
.fl{ float:left;}
.fr{ float:right;}
.font_color_white{ color:#fff;}
.font_color_black{ color:#3c3c3c;}
.my-skin .layui-layer-btn a{background-color:#666;border:1px solid #666;}
.fade{ opacity:0!important;}
.fadeIn{ opacity:1!important;}
.fadeInUp{ opacity:0; transform:translateY(-110%);}
.pl_2per{ padding-left:2%;}
.w10per{width:10%;}
.w20per{width:20%;}
.w30per{width:30%;}
.w40per{width:40%;}
.w50per{width:50%;}
.w60per{width:60%;}
.w70per{width:70%;}
.w80per{width:80%;}
.w90per{width:90%;}
.w100per{width:100%;}

/*header TOP*/
header{ position:fixed; z-index:999; left:0;top:0; width:100%; height:72px; transition:all .35s;}
header>.logo{ position:absolute; z-index:9; left:50px; top:0; line-height:72px;}
header>.menu{ position:absolute; z-index:9; right:50px;}
header>.menu>ul{display:block;}
header>.menu>ul>li{display:inline-block; line-height:72px; font-size:14px; opacity:1;}
header>.menu>ul>li>a{display:block; padding:0 18px; line-height:72px; font-size:14px;}
header>.menu>ul>li>a:hover{ color:#666666 !important;}
header>.menu>ul>li.A>a{ color:#f74845;}
header>.menu>ul>li>a.gray{color:#666; opacity:.5;}
header>.menu>ul>li:nth-child(1){-webkit-transition:all 0.5s ease-out 0.4s;-moz-transition:all 0.5s ease-out 0.4s;-ms-transition:all 0.5s ease 0.4s;-o-transition:all 0.5s ease-out 0.4s;transition:all 0.5s ease-out 0.4s;}
header>.menu>ul>li:nth-child(2){-webkit-transition:all 0.5s ease-out 0.5s;-moz-transition:all 0.5s ease-out 0.5s;-ms-transition:all 0.5s ease 0.5s;-o-transition:all 0.5s ease-out 0.5s;transition:all 0.5s ease-out 0.5s;}
header>.menu>ul>li:nth-child(3){-webkit-transition:all 0.5s ease-out 0.6s;-moz-transition:all 0.5s ease-out 0.6s;-ms-transition:all 0.5s ease 0.6s;-o-transition:all 0.5s ease-out 0.6s;transition:all 0.5s ease-out 0.6s;}
header>.menu>ul>li:nth-child(4){-webkit-transition:all 0.5s ease-out 0.7s;-moz-transition:all 0.5s ease-out 0.7s;-ms-transition:all 0.5s ease 0.7s;-o-transition:all 0.5s ease-out 0.7s;transition:all 0.5s ease-out 0.7s;}
header>.menu>ul>li:nth-child(5){-webkit-transition:all 0.5s ease-out 0.8s;-moz-transition:all 0.5s ease-out 0.8s;-ms-transition:all 0.5s ease 0.8s;-o-transition:all 0.5s ease-out 0.8s;transition:all 0.5s ease-out 0.8s;}
header>.menu>ul.font_color_white>li>a{color:#fff;}
header>.menu>ul.font_color_white>li>a:hover{ color:#fff !important;}
header>.menu>ul.font_color_white>li.A>a{ color:#ff8886;}
header>.toggle{ position:absolute;z-index:8;top:50%;right:50px;width:30px; margin-top:-12px;height:24px; opacity:0; cursor:pointer; transition:all .3s ease-out .8s;}
header>.toggle em{position:absolute;top:0px;left:0px;width:100%;height:4px;background-color:#fff;border-radius:5px; transition:all .35s;}
header>.toggle em:nth-child(2){top:10px;}
header>.toggle em:nth-child(3){top:20px;}
header.active{ background:rgba(0,0,0,.2) !important;}
header.active>.toggle:hover em:nth-child(1){transform:translateY(-2px);}
header.active>.toggle:hover em:nth-child(3){transform:translateY(2px);}
header.active_notransparent{background:rgba(0,0,0,1) !important;}
header.active_notransparent>.menu>ul>li>a{ color:#fff;}
header.active_notransparent>.menu>ul>li.A>a{ color:#f74845;}
header>.bgmask{ display:none; position:fixed; z-index:1; left:0; top:0; width:100%;height:100%; background:rgba(0,0,0,.3);}
header.bg_color_black{background:rgba(0,0,0,1);}


@media only screen and (max-width: 1080px){
  header{height:60px;}
  header>.logo{left:20px;line-height:60px;}
  header>.menu{ position:fixed; z-index:9; height:100%; right:-250px; background:#000;}
  header>.menu>ul{display:block; width:250px; padding-top:30%;}
  header>.menu>ul>li{ display:block; padding:5px 0;transform:translateY(0) !important;}
  header>.menu>ul>li>a{padding:0 18px; line-height:42px; font-size:16px; font-weight:bold; color:#666;}
  header>.menu>ul>li.A>a{ background:#f74845; color:#fff;}
  header>.toggle{ opacity:1; right:20px;}
  header.active_notransparent>.menu>ul>li>a{ color:#666;}
  header.active_notransparent>.menu>ul>li.A>a{ color:#fff;}

}


@media only screen and (max-width: 780px){
  header>.logo img{height:34px;}
  header>.toggle{width:28px; margin-top:-10px;height:20px;}
  header>.toggle em{height:4px; border-radius:10px;}
  header>.toggle em:nth-child(2){top:8px;}
  header>.toggle em:nth-child(3){top:16px;}

}

@media only screen and (max-width: 420px){
  header>.logo img{height:28px;}
  header>.toggle{width:24px; margin-top:-8px;height:16px;}
  header>.toggle em{height:3px; border-radius:10px;}
  header>.toggle em:nth-child(2){top:6px;}
  header>.toggle em:nth-child(3){top:12px;}

}

/*END*/


/*mak TOP*/
#mak{ display:none; position:fixed;z-index:1001; top:0; left:0; width:100%;height:100%; background:#fff; overflow:hidden;}
#mak>div{ position:absolute; z-index:1; left:0; top:0; width:100%;height:100%; transition:all .35s;}
#mak>.txt0{background:url("../images/banner_slogan_0.png") no-repeat; background-position:50% 50%;background-size: cover;}
#mak>.txt1{background:url("../images/banner_slogan_1.png") no-repeat; background-position:50% 50%;background-size: cover;}
#mak>.txt2{background:url("../images/banner_slogan_2.png") no-repeat; background-position:50% 50%;background-size: cover;}
#mak>.txt3{background:url("../images/banner_slogan_3.png") no-repeat; background-position:50% 50%;background-size: cover;}
#mak>.txt4{background:url("../images/banner_slogan_4.png") no-repeat; background-position:50% 50%;background-size: cover;}
/*END*/




/*banner TOP*/
#banner{ position:relative; width:100%; margin:0 auto; overflow:hidden;}
#banner>.slogan{ position:absolute; z-index:99; left:0; top:0; width:100%;height:100%; text-align:left;}
#banner>.slogan>div{ position:absolute; z-index:1; left:0; top:0; width:100%;height:100%; transition:all .35s;}
#banner>.slogan>.txt0{background:url("../images/banner_slogan_0.png") no-repeat; background-position:55%;background-size: cover;}
#banner>.slogan>.txt1{background:url("../images/banner_slogan_1.png") no-repeat; background-position:55%;background-size: cover;}
#banner>.slogan>.txt2{background:url("../images/banner_slogan_2.png") no-repeat; background-position:55%;background-size: cover;}
#banner>.slogan>.txt3{background:url("../images/banner_slogan_3.png") no-repeat; background-position:55%;background-size: cover;}
#banner>.slogan>.txt4{background:url("../images/banner_slogan_4.png") no-repeat; background-position:55%;background-size: cover;}
#banner>.videobox{ position:relative; z-index:1; opacity:1;}
#banner .videobox>video{position: absolute; z-index:1; top: 0;left: 0;right: 0;bottom: 0;margin:0 auto;min-width: 50%;min-height: 60%;}
#banner>.imgbox{ display:none; opacity:0; margin:0 auto;}
#banner>.maskbox{ position:absolute; z-index:9; left:0; top:0; width:100%;height:100%; opacity:1; background:url("../images/banner_mask.png") no-repeat; background-position:0 0; background-size: cover; overflow:hidden}

@media only screen and (max-width:1080px){
  #banner>.slogan>.txt0{background-position:55%;}
  #banner>.slogan>.txt1{background-position:55%;}
  #banner>.slogan>.txt2{background-position:55%;}
  #banner>.slogan>.txt3{background-position:55%;}
  #banner>.slogan>.txt4{background-position:55%;}
  #banner>.videobox{ display:none; opacity:0;}
  #banner>.maskbox{ opacity:0;}
  #banner>.imgbox{ opacity:1; display:block; background:url("../images/banner.jpg") no-repeat; background-position:0 0;background-size:cover;}
}

@media only screen and (max-width:680px){
  #banner>.slogan>.txt0{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt1{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt2{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt3{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt4{background-position:55%; background-size:auto 50%;}
}

@media only screen and (max-width:520px){
  #banner>.slogan>.txt0{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt1{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt2{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt3{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt4{background-position:55%; background-size:auto 50%;}
}
@media only screen and (max-width:480px){
  #banner>.slogan>.txt0{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt1{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt2{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt3{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt4{background-position:55%; background-size:auto 50%;}
}
@media only screen and (max-width:420px){
  #banner>.slogan>.txt0{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt1{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt2{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt3{background-position:55%; background-size:auto 50%;}
  #banner>.slogan>.txt4{background-position:55%; background-size:auto 50%;}
}
/*END*/





/*main TOP*/

#main{ position:relative; margin:0 auto;}
#main>.service{ width:100%; margin:0 auto; background:#f0f0f0;}
#main>.service>.wrap{ width:92%; max-width:1500px; margin:0 auto;}
#main>.service>.wrap>.left-wrap, #main>.service>.wrap>.right-wrap{ position:relative; width:50%;}
#main>.service .tit{ position:relative; padding:50px 0 20px 0; font-size:24px; text-align:left;}
#main>.service .tit:after{ position:absolute; z-index:1; left:0; bottom:0; width:10px; height:2px; content:'';}
#main>.service .txt{ width:90%; padding:20px 0; font-size:16px; letter-spacing:1px; text-align:left; line-height:30px; color:#3c3c3c;}
#main>.service .link{ text-align:left;}
#main>.service .link>a{display: inline-block; line-height: 26px; height: 26px; font-size: 13px;margin-bottom: 14px;padding: 0 12px;border-radius: 18px;margin-right: 10px;transition: all 0.3s ease 0s;}
#main>.service .more{ padding:50px 0;}
#main>.service .more>a{position: relative;display:block;width:42px;height:42px;border-radius: 50%;transition: background 0.3s ease 0s;overflow: hidden;}
#main>.service .more.black>a{ position:relative; border:1px solid #aaa;}
#main>.service .more.black>a:after{ position:absolute; z-index:1; left:50%; top:50%; width:0; height:0; opacity:0; overflow:hidden; background:#3c3c3c;border-radius: 50%; content:'';transition: all 0.3s ease 0s;}
#main>.service .more.black>a>i{ position:relative; z-index:9; display:block;width:100%;height:100%; background:url("../images/icon_arrow_right_black.png") no-repeat; background-position:50% 50%;}
#main>.service .more.black>a:hover>i{background:url("../images/icon_arrow_right_white.png") no-repeat; background-position:50% 50%;}
#main>.service .more.black>a:hover:after{width:100%;height:100%; left:0; top:0; opacity:1;}
#main>.service .more.black>a:hover{ background:#3c3c3c; border:1px solid #3c3c3c;}
#main>.service .more.white>a{ position:relative; border:1px solid #fff;}
#main>.service .more.white>a:after{ position:absolute; z-index:1; left:50%; top:50%; width:0; height:0; opacity:0; overflow:hidden; background:#fff;border-radius: 50%; content:'';transition: all 0.3s ease 0s;}
#main>.service .more.white>a>i{ position:relative; z-index:9; display:block;width:100%;height:100%; background:url("../images/icon_arrow_right_white.png") no-repeat; background-position:50% 50%;}
#main>.service .more.white>a:hover>i{background:url("../images/icon_arrow_right_black.png") no-repeat; background-position:50% 50%;}
#main>.service .more.white>a:hover:after{width:100%;height:100%; left:0; top:0; opacity:1;}
#main>.service .more.white>a:hover{ background:#fff; border:1px solid #fff;}
#main>.service .web-design{ padding:0 50px; height:380px; background:#fff; overflow:hidden;}
#main>.service .web-design .more{padding:20px 0;}
#main>.service .web-design>.tit:after{ background:#3c3c3c;}
#main>.service .web-design>.link>a{border: 1px solid #828282;color: #3c3c3c;}
#main>.service .web-design>.link>a:hover{ background:#3c3c3c; border:1px solid #3c3c3c; color:#fff;}
#main>.service .pic{ margin:0 auto; overflow:hidden;}
#main>.service .pic>a{position:relative; display:block;}
#main>.service .pic img{ width:100%; height:auto; transition:all .35s;}
#main>.service .pic>a:after{position:absolute; z-index:2; left:0; top:50%; width:100%;height:0; opacity:0; background:#000; content:''; transition:all .35s;}
#main>.service .pic>a>.see{position:absolute; z-index:9; left:50%; top:50%; margin-left:-60px; margin-top:-18px; width:120px;height:36px; line-height:36px; font-size:15px; font-family:'寰蒋闆呴粦 Light'; font-weight:normal; color:#fff;text-align:center; opacity:0; transition:all .35s;}
#main>.service .pic>a>.see:before{position:absolute; z-index:1; left:0; bottom:-5px; width:100%;height:1px; opacity:.7; background:#fff; content:''; transition:all .35s;}
#main>.service .pic>a:hover:after{ top:0; height:100%; opacity:.5;}
#main>.service .pic>a:hover img{transform:scale(1.03);}
#main>.service .pic>a:hover .see{ opacity:1;}
#main>.service .pic>a:hover .see:before{ width:20px; left:50%; margin-left:-10px;}
#main>.service .about-us{ position:relative; z-index:9; margin-top:-196px; transition:all .3s;}
#main>.service .about-us:after{ position:absolute; z-index:2; left:0; top:0; width:100%;height:196px; background:rgba(255,255,255,.7); content:'';}
#main>.service .about-us>.con{ position:absolute; z-index:4; left:50px; top:0;}
#main>.service .about-us .tit{ padding-bottom:0;color:#fff; font-size:36px;}
#main>.service .about-us .txt{ padding:15px 0; color:#fff;}
#main>.service .mobile-app{ position:relative; height:380px; overflow:hidden; padding:0 50px; background:#f74845;}
#main>.service .mobile-app>.tit{ color:#fff;}
#main>.service .mobile-app>.tit:after{ background:#fff;}
#main>.service .mobile-app>.txt{ color:#fff;}
#main>.service .mobile-app>.link>a{border: 1px solid #fff;color: #fff;}
#main>.service .mobile-app>.link>a:hover{ background:#fff; border:1px solid #fff; color:#f74845;}
#main>.service .mobile-app>.more.white>a:hover>i{background:url("../images/icon_arrow_right_red.png") no-repeat; background-position:50% 50%;}

#main>.works{ margin:0 auto; padding:80px 0;}
#main>.works>.wrap{width:92%; max-width:1500px;position:relative;margin:0 auto;}
#main>.works .tit{ position:relative; padding:50px 130px 20px 130px; font-size:24px; text-align:right;}
#main>.works .tit:after{ position:absolute; z-index:1; right:130px; bottom:0; width:10px; height:2px; background:#3c3c3c; content:'';}
#main>.works .txt{ padding:20px 130px; font-size:16px; letter-spacing:1px; text-align:right; line-height:24px; color:#3c3c3c;}
#main>.works .container{ width:90%; max-width:1240px;margin:0 auto;}
#main>.works .container .swiper-slide{ position:relative; margin:30px auto; }
#main>.works .container .swiper-slide>img{ width:100%;height:auto; left:0; top:0;}
#main>.works .container .swiper-slide>.pc{ position:relative; z-index:1; }
#main>.works .container .swiper-slide>.pad{position:absolute; z-index:6; right:115px; bottom:15px;}
#main>.works .container .swiper-slide>.phone{position:absolute; z-index:9; right:0; bottom:0;}
#main>.works .container .swiper-pagination {position: relative!important; padding:50px 0;}
#main>.works .container .swiper-pagination-bullet { margin:0 15px; width:5px;height:5px;border-radius:2px;background:#5a5a5a;opacity: 1;}
#main>.works .container .swiper-pagination-bullet-active{ background:#f74845 !important;}


#main>.customer{ position:relative; margin:0 auto;overflow:hidden;}
#main>.customer>.container{ position:absolute; z-index:9; left:50%;top:6%; margin-left:-38%; width:76%;}
#main>.customer>.container>ul{ width:100%; margin:0 auto;}
#main>.customer>.container>ul>li{display:block;float:left; width:20%;text-align:center;cursor: pointer; transition:all .35s;}
#main>.customer>.container>ul>li>a{display:block;}
#main>.customer>.container>ul>li>a>img{ width:100%;height:auto;}
#main>.customer>.container>ul>li:hover{transform:translateY(-10px);}
#main>.customer>.bg{ position:relative; z-index:1; width:100%;height:100%; transition:all .35s;}
#main>.customer>.bg>img{width:100%; height:auto;}
#main>.customer>.box{position:absolute; z-index:3; left:0; top:0; width:100%;height:100%;opacity:0; background-size:cover; transition:all .5s;}

@media only screen and (max-width: 1680px){
  #main>.customer>.container{ top:4%;}
}

@media only screen and (max-width: 1320px){
  #main>.service .txt{ font-size:15px;line-height:28px;}
}

@media only screen and (max-width: 1280px){
  #main>.service .txt{ font-size:14px;line-height:24px;}
  #main>.service .link>a{line-height: 21px; height: 23px; font-size: 13px;margin-bottom: 10px;}
  #main>.service .more>a{width:36px;height:36px;}
}
@media only screen and (max-width:1080px){
  #main>.service>.wrap{ width:100%;}
  #main>.service>.wrap>.left-wrap, #main>.service>.wrap>.right-wrap{ width:100%; float:none;}
  #main>.service .txt{width:100%;}
  #main>.service .web-design{ width:86%; padding:0 7%; margin:0 auto; height:auto;}
  #main>.service .about-us{ margin-top:0;}
  #main>.service .about-us>.con{ left:50%; top:0; width:86%;margin-left:-43%;}
  #main>.service .mobile-app{ width:86%; padding:0 7%; margin:0 auto; height:auto;}
  #main>.works .tit{ padding:50px 80px 20px 80px;}
  #main>.works .tit:after{ right:80px;}
  #main>.works .txt{ padding:20px 80px;}
  #main>.works .container .swiper-pagination {padding:30px 0;}
}


@media only screen and (max-width:780px){
  #main>.service .more{padding:80px 0;}
  #main>.works .tit{ padding:50px 50px 20px 50px;}
  #main>.works .tit:after{ right:50px;}
  #main>.works .txt{ padding:20px 50px;}
  #main>.works .container .swiper-pagination {padding:10px 0;}
}

@media only screen and (max-width:480px){
  #main>.service .more{padding:50px 0;}
  #main>.service .link>a{line-height: 19px; height: 20px; font-size: 12px;margin-bottom: 8px;}
  #main>.service .about-us:after{height:196px;}
  #main>.service .about-us .tit{padding-top:20px; font-size:30px; padding-right:0;}
  #main>.works{padding:30px 0;}
  #main>.works .tit{width:90%; margin:0 auto; padding:20px 0;}
  #main>.works .tit:after{right:0;}
  #main>.works .txt{width:90%; margin:0 auto;padding:20px 0;}
}

@media only screen and (max-width:340px){
  #main>.service .tit{font-size:22px;}
  #main>.service .txt{ font-size:12px;line-height:20px;}
  #main>.works .tit{ font-size:22px;}
  #main>.works .txt{ font-size:12px; line-height:20px;}
}
/*END*/





/*about TOP*/

#about>.banner{ position:relative; overflow:hidden; background: radial-gradient(200% 100% at bottom center, #0070aa, #0b2570, #000035, #000);background: radial-gradient(220% 105% at top center, #000 10%, #000035 40%, #0b2570 65%, #0070aa);background-attachment: fixed;overflow: hidden; margin:0 auto;}
#about>.banner>.slogan{ position:absolute; z-index:5; left:50%; top:30%; margin-left:-40%; width:80%; color:#fff; text-align:center;}
#about>.banner>.slogan>.tit{ padding:10px 0; font-size:48px;}
#about>.banner>.slogan>.txt{ font-size:24px;line-height:50px;}
#about>.banner>.scene {position:relative; z-index:1; background: #282886; opacity:0.3;}
#about>.banner>.scene path:first-child {fill: #4f4fea;}
#about>.banner>.scene path:nth-child(2) {fill: #0c27cf;}
#about>.banner>.scene path:nth-child(3) {fill: #13269c;}
#about>.banner>.scene path:nth-child(4) {fill: #242468;}
#about>.banner>.scene path:nth-child(5) {fill: #2648e6;}
#about>.banner>.scene path:nth-child(6) {fill: #2c31b0;}
#about>.banner>.scene path:nth-child(7) {fill: #262689;}
#about>.history{ width:90%; max-width:1400px; margin:0 auto; padding:100px 0;}
#about>.history>.tit{ padding:10px 0; font-size:48px; text-align:center;}
#about>.history>.subtit{ font-size:24px;line-height:50px; text-align:center;}
#about>.history>.container{ margin:0 auto; padding:100px 0;}
#about>.history>.container>.line{ position:relative; z-index:1; width:0;height:1px; background:#ccc; content:''; animation:lineWidth .8s infinite;animation-iteration-count:1;animation-fill-mode : forwards;}
#about>.history>.container>.item{ position:relative; z-index:4; top:-10px; padding-left:2%; text-align:left;}
#about>.history>.container>.item:nth-of-type(1){ width:36%;}
#about>.history>.container>.item:nth-child(2){ width:30%;}
#about>.history>.container>.item:nth-child(3){ width:24%;}
#about>.history>.container>.item>.peg{ width:17px;height:17px; border-radius:100%; background:#f74845;}
#about>.history>.container>.item>.year{ padding-top:40px; font-size:40px; font-weight:bold; font-family:"Arial"; color:#ff284b;}
#about>.history>.container>.item>.txt{font-size:14px; line-height:28px; color:#3c3c3c;}
#about>.advantage{ width:100%; margin:0 auto; overflow:hidden;}
#about>.advantage>.item{ position:relative; float:left;}
#about>.advantage>.item>.container{ position:absolute; z-index:5; left:50%; top:50%; margin-top:-50px; margin-left:-35%; width:70%;}
#about>.advantage>.item>.container>.icon{width:20%; text-align:left;}
#about>.advantage>.item>.container>.txt{ width:80%; text-align:left; font-size:16px; color:#fff; line-height:30px; letter-spacing:1px;}
#about>.advantage>.item>.bg{text-align:left; margin:0 auto;}
#about>.advantage>.item>.bg>img{ width:100%;height:auto;}
#about>.profile{ background:url("../images/about_profile_bg.png") no-repeat; background-position: center right; padding:190px 0; margin:0 auto; }
#about>.profile>.container{ position:relative;width:90%;max-width:1400px; margin:0 auto;}
#about>.profile>.container>.content{ width:38%;text-align:left;}
#about>.profile>.container>.content>.tit{font-size:48px;}
#about>.profile>.container>.content>.txt{font-size:20px; line-height:1.6; letter-spacing:2px; color:#666; margin-top:30px;}
#about>.profile>.container>.statistics{ width:50%;}
#about>.profile>.container>.statistics>.item{ position:relative; float:left; padding-top:60px; padding-right:3%;}
#about>.profile>.container>.statistics>.item:after{position:absolute; z-index:1;left:0; bottom:-20px; width:50px;height:4px; background:#3a3a3a; content:'';}
#about>.profile>.container>.statistics>.item>.num{ position:relative;height:100px; line-height:100px; padding:10px 0;}
#about>.profile>.container>.statistics>.item>.num>span{ display:block; float:left; font-size:100px; font-family:"Arial"; letter-spacing:-4px;}
#about>.profile>.container>.statistics>.item>.num>span.plus{ font-size:60px;}
#about>.profile>.container>.statistics>.item>.txt{color:#3c3c3c; font-size:16px;}



@media only screen and (max-width: 1460px){
  #about>.banner>.slogan>.tit{ font-size:42px;}
  #about>.banner>.slogan>.txt{ font-size:20px;line-height:36px;}
  #about>.history{ padding:80px 0;}
  #about>.history>.tit{ font-size:42px;}
  #about>.history>.subtit{ font-size:20px;line-height:36px;}
  #about>.history>.container>.item>.year{ padding-top:36px; font-size:36px;}
  #about>.history>.container>.item>.txt{font-size:13px; line-height:24px;}
  #about>.advantage>.item>.container{  margin-left:-40%; width:80%;}
  #about>.advantage>.item>.container>.icon{width:20%; text-align:left;}
  #about>.advantage>.item>.container>.icon>img{width:80%;height:auto;}
  #about>.advantage>.item>.container>.txt{ font-size:14px; line-height:24px;}
  #about>.profile{ background-size:80% auto; padding:180px 0;}
  #about>.profile>.container>.content>.tit{font-size:42px;}
  #about>.profile>.container>.content>.txt{font-size:20px; line-height:36px;}
  #about>.profile>.container>.statistics>.item>.num{ height:80px; line-height:80px;}
  #about>.profile>.container>.statistics>.item>.num>span{ font-size:80px;}
  #about>.profile>.container>.statistics>.item>.num>span.plus{ font-size:50px;}
  #about>.profile>.container>.statistics>.item>.txt{font-size:14px;}
}

@media only screen and (max-width: 1080px){
  #about>.history>.tit{ font-size:38px;}
  #about>.history>.container>.item{ width:30% !important; padding-left:3%;}
  #about>.advantage>.item>.container{ margin-top:-100px; margin-left:-45%; width:90%;}
  #about>.advantage>.item>.container>.icon{ float:none !important; width:25%; margin:0 auto; text-align:center;}
  #about>.advantage>.item>.container>.icon>img{width:auto;height:auto;}
  #about>.advantage>.item>.container>.txt{ float:none!important; width:100%; padding:20px 0; margin:0 auto; font-size:13px; text-align:center;}
  #about>.profile>.container>.content{ width:30%;}
  #about>.profile>.container>.content>.tit{font-size:38px;}
  #about>.profile>.container>.content>.txt{font-size:16px; line-height:30px;}
  #about>.profile>.container>.statistics{ width:60%;}
  #about>.profile>.container>.statistics>.item>.num{ height:70px; line-height:70px;}
  #about>.profile>.container>.statistics>.item>.num>span{ font-size:70px;}
  #about>.profile>.container>.statistics>.item>.num>span.plus{ font-size:40px;}
  #about>.profile>.container>.statistics>.item>.txt{font-size:12px;}
}

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

  #about>.history{ padding:100px 0;}
  #about>.history>.container{ position:relative; padding:50px 0;}
  #about>.history>.container>.line{ position:absolute; z-index:1; left:0; top:0; width:1px;height:100px; animation:lineHeight .8s infinite;animation-iteration-count:1;animation-fill-mode : forwards;}
  #about>.history>.container>.item{ position:relative; z-index:4; top:0; float:none!important; width:94% !important; padding-left:6%;}
  #about>.history>.container>.item>.peg{ display:none; width:16px;height:16px;}
  #about>.history>.container>.item>.year{ position:relative; padding-top:0 !important; font-size:36px;}
  #about>.history>.container>.item:after{ position:absolute; z-index:1; left:-8px; top:12px; width:16px; height:16px; background:#f74845; border-radius:100%; content:'';}
  #about>.history>.container>.item>.txt{ padding-bottom:30px; font-size:13px; line-height:24px;}
  #about>.advantage>.item{ width:100%; float:none!important;}
  #about>.advantage>.item>.container{ margin-top:-100px; margin-left:-30%; width:60%;}
  #about>.advantage>.item>.bg>img{ width:100%;max-height:300px;}
  #about>.profile{ background-position: center center; background-size:100% auto; padding:120px 0;}
  #about>.profile>.container>.content{ float:none !important; width:100%;}
  #about>.profile>.container>.statistics{ float:none!important; width:100%;}
  #about>.profile>.container>.statistics>.item>.num{height:90px; line-height:90px;}
  #about>.profile>.container>.statistics>.item>.num>span{ font-size:90px;}
  #about>.profile>.container>.statistics>.item>.num>span.plus{ font-size:50px;}
  #about>.profile>.container>.statistics>.item>.txt{font-size:16px;}
}

@media only screen and (max-width: 640px){
  #about>.banner>.slogan>.tit{ font-size:36px;}
  #about>.banner>.slogan>.txt{ font-size:16px;line-height:30px;}
  #about>.history{ padding:40px 0;}
  #about>.history>.tit{ font-size:36px;}
  #about>.history>.subtit{ font-size:14px;line-height:24px;}
  #about>.history>.container>.item>.year{ font-size:32px;}
  #about>.advantage>.item>.container{ margin-top:-70px; margin-left:-45%; width:90%;}
  #about>.advantage>.item>.container>.icon{ width:16%;}
  #about>.advantage>.item>.container>.icon>img{width:100%;height:auto;}
  #about>.advantage>.item>.container>.txt{ padding:10px 0; font-size:12px; letter-spacing:normal;}
  #about>.profile{ background-position: center bottom; background-size:100% auto; padding:60px 0;}
  #about>.profile>.container>.content>.tit{font-size:32px; text-align:center;}
  #about>.profile>.container>.content>.txt{ padding:10px 0; font-size:14px; line-height:24px;}
  #about>.profile>.container>.statistics>.item{ padding-top:30px; width:33%; padding-right:0;}
  #about>.profile>.container>.statistics>.item>.num{height:50px; line-height:50px;}
  #about>.profile>.container>.statistics>.item>.num>span{ font-size:50px;}
  #about>.profile>.container>.statistics>.item>.num>span.plus{ font-size:32px;}
  #about>.profile>.container>.statistics>.item>.txt{ min-height:32px; font-size:12px; padding-right:20px;}

}

/*END*/



/*services TOP*/

#services{ margin:0 auto;}
#services>.wechat-smallprogram{ margin:0 auto;background:#f74845;}
#services>.web-design{margin:0 auto; background:#c5edf8;}
#services>.e-commerce{margin:0 auto; background:#fff;}
#services>.mobile-app{margin:0 auto; background:#e8e8e8;}
#services>.wechat-smallprogram .img>.pic1{ position:absolute; z-index:5; left:0; bottom:-90px;}
#services>.wechat-smallprogram .img>.pic2{ position:relative; z-index:1; left:45px; bottom:-50px;}
#services>.web-design .img>.pic1{ position:relative; z-index:5; right:-20px; bottom:0;}
#services>.web-design .img>.pic1{ position:absolute; z-index:9; right:0; bottom:0;}
#services>.e-commerce .img>.pic1{ position:absolute; z-index:5; left:0; top:0;}
#services>.e-commerce .img>.pic2{ position:relative; z-index:1; left:0; bottom:0;}
#services>.mobile-app .img>.pic1{ position:absolute; z-index:9; left:0; bottom:0;}
#services>.mobile-app .img>.pic2{ position:absolute; z-index:5; left:0; bottom:0;}
#services>.mobile-app .img>.pic3{ position:absolute; z-index:3; left:0; bottom:0;}
#services>.mobile-app .img>.pic4{ position:relative; z-index:2; left:0; bottom:0;}
#services .container{ position:relative;max-width:83%; margin:0 auto;}
#services .container>.img{ position:relative; width:58%;}
#services .container>.img img{ width:100%; height:auto;}
#services .container>.con{ width:40%; padding-top:18%; text-align:left;}
#services .container>.con>.tit{ font-size:48px;}
#services .container>.con>.txt{ padding:40px 0; width:500px; font-size:16px; line-height:30px; letter-spacing:1px;}
#services .container>.con>.project{ width:88%; line-height:30px;}
#services .container>.con>.project>span{display:inline-block; letter-spacing:1px; font-size:16px; padding-right:40px;}
#services .container>.con>.project>span:last-child{ padding-right-left:0 !important;}



@media only screen and (max-width: 1460px){
  #services .container>.con>.tit{ font-size:44px;}
  #services .container>.con>.txt{ width:100%; font-size:14px; line-height:25px; padding:25px 0;}
  #services .container>.con>.project{ width:100%;}
  #services .container>.con>.project{ line-height:25px;}
  #services .container>.con>.project>span{font-size:14px;}
}
@media only screen and (max-width: 1080px){
  #services>.wechat-smallprogram .img>.pic1{ bottom:-60px;}
  #services>.wechat-smallprogram .img>.pic2{ bottom:-30px;}
  #services .container>.con>.tit{ font-size:36px;}
  #services .container>.con>.project>span{padding-right:25px;}
}

@media only screen and (max-width: 780px){
  #services>.wechat-smallprogram .img>.pic1{ position:absolute; z-index:5; left:0; bottom:-10px;}
  #services>.wechat-smallprogram .img>.pic2{ position:relative; z-index:1; left:10px; bottom:5px;}
  #services .container>.con>.tit{ font-size:24px;}
  #services .container>.con>.txt{ font-size:12px; line-height:20px; padding:15px 0;}
  #services .container>.con>.project{ line-height:20px;}
  #services .container>.img{width:44%;}
  #services .container>.con{ width:50%; padding-top:6%;}
}


@media only screen and (max-width: 420px){
  #services .container>.img{ float:none!important; width:100%;}
  #services .container>.con{ float:none!important; width:100%; padding-top:10%;}
  #services .container>.con>.tit{ font-size:20px;}
  #services>.wechat-smallprogram{padding-top:60px;}
  #services>.wechat-smallprogram .img>.pic1{ bottom:20px;}
  #services>.wechat-smallprogram .img>.pic2{ bottom:40px;}
  #services>.wechat-smallprogram .con, #services>.e-commerce .con{ text-align:right;}
  #services>.wechat-smallprogram>.container>.con>.project>span, #services>.e-commerce>.container>.con>.project>span{padding-right:0; padding-left:25px;}

}
/*END*/



/*works TOP*/

#works{ position:relative; margin:0 auto;}
#works>.container{ width:92%; max-width:1400px; margin:0 auto; padding:160px 0 100px 0;}
#works>.container>ul{display:block; margin:0 auto;}
#works>.container>ul>li{ display:block; float:left; width: 32.2%;margin-right: 1.7%;margin-bottom: 30px;}
#works>.container>ul>li:nth-child(3n){ margin-right:0 !important;}
#works>.container>ul>li>.img{ text-align:center; margin:0 auto; overflow:hidden;}
#works>.container>ul>li>.img>a{display:block;position:relative;}
#works>.container>ul>li>.img>a>img{ width:100%;height:auto; transition:all .5s}
#works>.container>ul>li>.img>a:after{position:absolute; z-index:2; left:0; top:0; width:100%;height:100%; opacity:0; background:#000; content:''; transition:all .35s;}
#works>.container>ul>li>.img>a>.see{position:absolute; z-index:9; left:50%; top:50%; margin-left:-60px; margin-top:-18px; width:120px;height:36px; line-height:36px; font-size:16px; font-weight:bold; font-family:'寰蒋闆呴粦'; font-weight:normal; color:#fff;text-align:center; opacity:0; transition:all .35s;}
#works>.container>ul>li>.img>a>.see:before{position:absolute; z-index:1; left:0; bottom:-5px; width:100%;height:1px; opacity:.7; background:#fff; content:''; transition:all .35s;}
#works>.container>ul>li>.img>a:hover:after{ opacity:.7;}
#works>.container>ul>li>.img>a:hover img{transform:scale(1.03);}
#works>.container>ul>li>.img>a:hover .see{ opacity:1;}
#works>.container>ul>li>.img>a:hover .see:before{ width:20px; left:50%; margin-left:-10px;}
#works>.container>ul>li>.con{width:86.5%;padding: 22px 6.5% 7px 6.5%; margin:0 auto;border: 1px solid #f2f2f2;}
#works>.container>ul>li>.con>.tit{position: relative;font-size: 18px;line-height: 30px;height: 30px;}
#works>.container>ul>li>.con>.tit>a{ color:#3c3c3c;}
#works>.container>ul>li>.con>.label{line-height: 24px;font-size: 12px;min-height: 24px; color:#999;}
#works>.container>ul>li>.con>.links {position:relative; display: block;margin-top: 28px;border-top: 1px solid #e5e5e5;line-height: 36px;}
#works>.container>ul>li>.con>.links>a{ position:relative; display:block; font-size:14px; color:#6e6e6e;}
#works>.container>ul>li>.con>.links>a:after{ position:absolute; z-index:3; right:0; top:50%; margin-top:-8px; width:15px; height:16px; opacity:.3; background:url("../images/icon_arrow_right_black.png") no-repeat; background-position:50% 50%; content:''; transition:all .35s;}
#works>.container>ul>li>.con>.links>a:hover{color:#3c3c3c;}
#works>.container>ul>li>.con>.links>a:hover:after{ opacity:1;}
#works>.container>.more{ text-align:center; margin:0 auto; padding:50px 0;}
#works>.container>.more>a{ display:inline-block; padding:20px 40px; background:#eee;font-size:15px; font-weight:bold; color:#888;}
#works>.container>.more>a:hover{background:#f74845; color:#fff; box-shadow:4px 4px 10px rgba(0,0,0,.1);}
#works>.container>.more>.loading{ display:block; color:#ccc;font-size:14px;}
#works>.container>.more>.loading>img{display:inline-block; height:65px; width:auto;}

#works>.banner{ position:relative; margin:0 auto; text-align:center;}
#works>.banner>.content{ position:absolute; z-index:3; left:50%; bottom:10px; margin-left:-700px; width:92%; max-width:1400px; text-align:left;}
#works>.banner>.content>.tit{ font-size:40px; font-weight:bold; color:#fff;}
#works>.banner>.content>.label{ padding:10px 0; font-size:14px; color:#fff;}
#works>.banner>.img>img{ width:100%;height:auto;}
#works>.view{width:92%; max-width:1400px; margin:0 auto;}
#works>.view>.describe{ border-bottom:1px solid #e6e6e6; padding:30px 0 20px 0;}
#works>.view>.describe>.con{ width:60%; text-align:left;}
#works>.view>.describe>.con>.txt{ font-size:14px; color:#666; line-height:24px;}
#works>.view>.describe>.con>.links{ padding-top:10px; text-align:left;}
#works>.view>.describe>.con>.links>a{display:inline-block; position:relative;padding:7px 50px; border:1px solid #aaa;transition: background 0.3s ease 0s;overflow: hidden;}
#works>.view>.describe>.con>.links>a:hover{ color:#fff; background:#3c3c3c; border:1px solid #3c3c3c;}
#works>.view>.describe>.logo{width:16%; text-align:right;}
#works>.view>.describe>.logo>img{ width:100%;height:auto;}
#works>.view>.content{ padding:40px 0;}
#works>.view>.content>div{ padding:0; text-align:center; margin:0 auto;}
#works>.view>.content>div img{max-width:100%;height:auto;}
#works>.pageurl{ position:fixed; z-index:99; right:50px; bottom:50px; width:52px;}
#works>.pageurl>.prev{ position:relative; display:block; height:52px; margin:6px auto;}
#works>.pageurl>.prev>a{display:block; position:relative; z-index:9; display:block;width:100%;height:100%; background:rgba(0,0,0,.3); border-radius: 50%;transition: background 0.3s ease 0s;overflow: hidden;}
#works>.pageurl>.prev>a:after{ position:absolute; z-index:1; left:50%; top:50%; width:0; height:0; opacity:0; overflow:hidden; background:#3c3c3c;border-radius: 50%; content:'';transition: all 0.3s ease 0s;}
#works>.pageurl>.prev>a>i{ position:relative; z-index:9; display:block;width:100%;height:100%; background:url("../images/icon_arrow_left_white.png") no-repeat; background-position:50% 50%;}
#works>.pageurl>.prev>a:hover:after{width:100%;height:100%; left:0; top:0; opacity:1;}
#works>.pageurl>.prev>a:hover{ background:#3c3c3c;}
#works>.pageurl>.back{display:block; height:52px;margin:6px auto;}
#works>.pageurl>.back>a{display:block; position:relative;display:block;width:100%;height:100%;background:rgba(0,0,0,.3);border-radius: 50%;transition: background 0.3s ease 0s;overflow: hidden;}
#works>.pageurl>.back>a:after{ position:absolute; z-index:1; left:50%; top:50%; width:0; height:0; opacity:0; overflow:hidden; background:#3c3c3c;border-radius: 50%; content:'';transition: all 0.3s ease 0s;}
#works>.pageurl>.back>a>i{ position:relative; z-index:9; display:block;width:100%;height:100%; background:url("../images/icon_arrow_back_white.png") no-repeat; background-position:50% 50%;}
#works>.pageurl>.back>a:hover:after{width:100%;height:100%; left:0; top:0; opacity:1;}
#works>.pageurl>.back>a:hover{ background:#3c3c3c;}
#works>.pageurl>.next{display:block;height:52px;margin:6px auto;}
#works>.pageurl>.next>a{display:block; position:relative;display:block;width:100%;height:100%;background:rgba(0,0,0,.3);border-radius: 50%;transition: background 0.3s ease 0s;overflow: hidden;}
#works>.pageurl>.next>a:after{ position:absolute; z-index:1; left:50%; top:50%; width:0; height:0; opacity:0; overflow:hidden; background:#3c3c3c;border-radius: 50%; content:'';transition: all 0.3s ease 0s;}
#works>.pageurl>.next>a>i{ position:relative; z-index:9; display:block;width:100%;height:100%; background:url("../images/icon_arrow_right_white.png") no-repeat; background-position:50% 50%;}
#works>.pageurl>.next>a:hover:after{width:100%;height:100%; left:0; top:0; opacity:1;}
#works>.pageurl>.next>a:hover{ background:#3c3c3c;}

@media only screen and (max-width: 1080px){
  #works>.container{ padding:100px 0 0 0;}
  #works>.pageurl{ right:30px; bottom:30px;}
  #works>.view>.describe>.con{ width:60%;}
  #works>.view>.describe>.logo{width:32%;}
}


@media only screen and (max-width:640px){
  #works>.container>ul>li{ width: 47.2%;margin-right:5%;}
  #works>.container>ul>li:nth-child(3n){ margin-right: 5%!important;}
  #works>.container>ul>li:nth-child(2n){ margin-right:0 !important;}
  #works>.container>ul>li>.con>.links>a{ font-size:13px;}
  #works>.container>.more{ padding:30px 0;}

}

@media only screen and (max-width:420px){
  #works>.container>ul>li{ float:none;width: 100%; margin-right:0 !important;}
  #works>.container>.more>a{ display:block; padding:12px 0; font-size:14px;}
  #works>.view>.describe>.con{ width:100%;}
  #works>.view>.describe>.con>.txt{ font-size:12px; line-height:20px;}
  #works>.view>.describe>.logo{width:45%;}
  #works>.pageurl{right:20px; bottom:20px;width:32px;}
  #works>.pageurl>.prev{ height:32px;}
  #works>.pageurl>.back{height:32px;}
  #works>.pageurl>.next{height:32px;}

}

/*END*/


/*job TOP*/

#job{ margin:0 auto; background:#eaeaea;}
#job>.banner{ margin:0 auto; text-align:center;}
#job>.banner>img{ width:100%;height:auto;}
#job>.container{ position:relative; width:92%; max-width:1500px; background:#fff; margin:0 auto;}
#job>.container>.img{ position:relative; z-index:1; width:50%; height:100%; text-align:left; background:url("../images/job_img.jpg") no-repeat; background-size:100% 100%;}
#job>.container>.img>img{ width:100%;height:auto; transition:all 1s;}
#job>.container>.content{ position:relative; z-index:9; margin-top:-145px; width:50%; padding-top:55px; text-align:left; background:#fff;}
#job>.container>.content .tit{ position:relative; margin:0 60px; padding:25px 0;color:#3c3c3c; font-size:30px;}
#job>.container>.content .tit:after{ position:absolute; z-index:1; left:0; bottom:0; width:13px;height:2px; background:#3c3c3c; content:'';}
#job>.container>.content .subtit{ margin:0 60px; padding:15px 0; color:#3c3c3c; font-size:20px;}
#job>.container>.content .txt{ padding:15px 0; margin:0 60px; color:#3c3c3c;}
#job>.container>.content .txt>p{display:block; font-size:14px; line-height:28px; margin-bottom:25px;}

#job>.item{ position:relative; width:92%; max-width:1100px; margin:0 auto; padding:100px 0;}
#job>.item>.nav{ padding-bottom:50px; text-align:center; margin:0 auto;}
#job>.item>.nav>a{display:inline-block; font-size:18px; color:#3c3c3c; padding:0 15px;}
#job>.item>.nav>a.A{color:#f74845;}
#job>.item>.swiper-container{ width:780px; padding:30px 0;}
#job>.item>.swiper-container .swiper-slide{background:#eaeaea;}
#job>.item>.swiper-container .swiper-slide>.icon{ width:24%;line-height:180px; text-align:left;}
#job>.item>.swiper-container .swiper-slide>.content{ width:76%; text-align:left;}
#job>.item>.swiper-container .swiper-slide>.content>.name{ font-size:24px;}
#job>.item>.swiper-container .swiper-slide>.content>.txt{ padding:20px 0; line-height:25px; font-size:14px; color:#666;}
#job>.item>.button-prev{position:absolute; z-index:3; left:0;top:50%; height:42px;}
#job>.item>.button-prev>a{display:block; position:relative;display:block;width:42px;height:42px;border:1px solid #aaa;border-radius: 50%;transition: background 0.3s ease 0s;overflow: hidden;}
#job>.item>.button-prev>a:after{ position:absolute; z-index:1; left:50%; top:50%; width:0; height:0; opacity:0; overflow:hidden; background:#3c3c3c;border-radius: 50%; content:'';transition: all 0.3s ease 0s;}
#job>.item>.button-prev>a>i{ position:relative; z-index:9; display:block;width:42px;height:42px; background:url("../images/icon_arrow_left_black.png") no-repeat; background-position:50% 50%;}
#job>.item>.button-prev>a:hover>i{background:url("../images/icon_arrow_left_white.png") no-repeat; background-position:50% 50%;}
#job>.item>.button-prev>a:hover:after{width:100%;height:100%; left:0; top:0; opacity:1;}
#job>.item>.button-prev>a:hover{ background:#3c3c3c; border:1px solid #3c3c3c;}
#job>.item>.button-next{position:absolute; z-index:3; right:0;top:50%; height:42px;}
#job>.item>.button-next>a{display:block; position:relative;display:block;width:42px;height:42px;border:1px solid #aaa;border-radius: 50%;transition: background 0.3s ease 0s;overflow: hidden;}
#job>.item>.button-next>a:after{ position:absolute; z-index:1; left:50%; top:50%; width:0; height:0; opacity:0; overflow:hidden; background:#3c3c3c;border-radius: 50%; content:'';transition: all 0.3s ease 0s;}
#job>.item>.button-next>a>i{ position:relative; z-index:9; display:block;width:42px;height:42px; background:url("../images/icon_arrow_right_black.png") no-repeat; background-position:50% 50%;}
#job>.item>.button-next>a:hover>i{background:url("../images/icon_arrow_right_white.png") no-repeat; background-position:50% 50%;}
#job>.item>.button-next>a:hover:after{width:100%;height:100%; left:0; top:0; opacity:1;}
#job>.item>.button-next>a:hover{ background:#3c3c3c; border:1px solid #3c3c3c;}


@media only screen and (max-width: 1280px){
  #job>.container>.img{ position:absolute;}
  #job>.container>.img>img{display:none;}
  #job>.container>.content{ padding-top:30px;}

}
@media only screen and (max-width: 1080px){
  #job>.container{ width:100%;}
  #job>.container>.content{ float:none; width:100%;margin-top:0;}
  #job>.container>.content .tit{ font-size:26px;}
  #job>.container>.content .subtit{ font-size:18px;}
  #job>.container>.content .txt{ height:auto; margin:10px 60px 30px 60px; padding:0; overflow-x:hidden; overflow-y:auto;}
  #job>.container>.content .txt::-webkit-scrollbar-track-piece {background-color:#fff;}
  #job>.container>.content .txt::-webkit-scrollbar-thumb { background-color:#f74845; border-radius:30px;}
  #job>.container>.img{ position:relative; float:none; width:100%;}
  #job>.container>.img>img{display:block; width:100%;height:auto;}
}
@media only screen and (max-width: 980px){
  #job>.item>.swiper-container{ width:83%;}
}
@media only screen and (max-width: 780px){
  #job>.item>.swiper-container{ width:92%;}
  #job>.item>.swiper-container .swiper-slide>.icon{ width:18%;}
  #job>.item>.swiper-container .swiper-slide>.icon>img{ width:70px;height:auto;}
  #job>.item>.swiper-container .swiper-slide>.content{ width:82%;}
  #job>.item>.button-prev, #job>.item>.button-next{display:none;}
}
@media only screen and (max-width: 420px){
  #job>.container>.content .tit{ width:83%; margin:0 auto; font-size:22px;}
  #job>.container>.content .subtit{width:83%; margin:0 auto;  font-size:18px;}
  #job>.container>.content .txt{ width:83%; font-size:12px; line-height:20px; margin:10px auto 30px auto;}



  #job>.item{ padding:50px 0;}
  #job>.item>.nav{ padding-bottom:0 !important;}
  #job>.item>.nav>a{display:inline-block; float:left; width:33.3%; font-size:14px; padding:5px 0;}
  #job>.item>.swiper-container .swiper-slide>.icon{float:none !important; width:100%; line-height:inherit;}
  #job>.item>.swiper-container .swiper-slide>.content{float:none!important; width:100%;}
  #job>.item>.swiper-container .swiper-slide>.content>.name{ padding:10px 0; font-size:16px;}
}

/*END*/






/*footer TOP*/
footer{background:#f6f6f6; margin:0 auto;}
footer>.gotop{ text-align:center; padding:20px 0; margin:0 auto;}
footer>.gotop>a{position: relative;display:block; margin:0 auto; width:46px;height:46px;border-radius: 50%;transition: background 0.3s ease 0s;overflow: hidden;}
footer>.gotop>a{ position:relative; border:1px solid #aaa;}
footer>.gotop>a:after{ position:absolute; z-index:1; left:50%; top:50%; width:0; height:0; opacity:0; overflow:hidden; background:#3c3c3c;border-radius: 50%; content:'';transition: all 0.3s ease 0s;}
footer>.gotop>a>i{ position:relative; z-index:9; display:block;width:46px;height:46px; background:url("../images/icon_gotop_black.png") no-repeat; background-position:50% 50%; background-size:100% auto;}
footer>.gotop>a:hover>i{background:url("../images/icon_gotop_white.png") no-repeat; background-position:50% 50%; background-size:100% auto;}
footer>.gotop>a:hover:after{width:100%;height:100%; left:0; top:0; opacity:1;}
footer>.gotop>a:hover{ background:#3c3c3c; border:1px solid #3c3c3c;}
footer>.container{width:90%; max-width:1350px; padding:50px 0; margin:0 auto;}
footer>.container>div{width:315px;}
footer>.container>div .tit{ padding:16px 0; color:#242424;font-size:15px; font-weight:bold; border-bottom:1px solid #e3e3e3;}
footer>.container>div .con{ padding:20px 0; text-align:left;}
footer>.container>.contact>.con>p{ display:block; padding:3px 0; font-size:14px; color:#3c3c3c;}
footer>.container>.contact>.con>p>span{display:inline-block;}
footer>.container>.contact>.con>p img{ width:12px;height:auto;}
footer>.container>.qrcode{ margin:0 auto;}
footer>.container>.qrcode>.con>img{ width:105px;height:auto; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%); transition:all .35s;}
footer>.container>.qrcode>.con>img:hover{-webkit-filter: grayscale(0);-moz-filter: grayscale(0);-ms-filter: grayscale(0);-o-filter: grayscale(0);filter: grayscale(0); }
footer>.container>.linechat>.con>p{display:block; padding:3px 0;}
footer>.container>.linechat>.con>p>a{ display:inline-block; background:#f6f6f6 url("../images/icon_linechat_qq_black.png") no-repeat; background-position:25px 50%; background-size:15px auto; padding:0 30px 0 45px; height:33px; line-height:33px; text-align:center; border:1px solid #e3e3e3;}
footer>.container>.linechat>.con>p>a:hover{ background:#2f2f2f url("../images/icon_linechat_qq_white.png") no-repeat; background-position:25px 50%; background-size:15px auto; border:1px solid #2f2f2f; color:#fff;}
footer>.copyright{width:100%; background:#222; margin:0 auto;}
footer>.copyright>.wrap{width:90%; max-width:1350px; padding:20px 0; margin:0 auto; position:relative;}
footer>.copyright .copy{padding:8px 0 3px 0; font-size:15px; color:#777;}
footer>.copyright .txt{padding:5px 0 8px 0; font-size:14px; color:#777;}
footer>.copyright .icp{width:150px; text-align:center; color:#666; font-size:14px; position:absolute; right:230px; top:52px;}
footer>.copyright .icp a{color:#666;}
footer>.copyright .gongan{width:210px; text-align:center; color:#666; font-size:14px; position:absolute; right:0; top:25px;}
footer>.copyright .gongan a{color:#666;}
footer>.copyright .gongan img{margin:auto; display:block; margin-bottom:6px;}



@media only screen and (max-width: 1080px){
  footer>.gotop>a{ width:36px;height:36px; line-height:36px;}
  footer>.gotop>a>i{ width:30px;height:30px; margin:0 auto;}
  footer>.container>div{ width:30%; margin-right:5%;}
  footer>.container>.linechat{float:left;}
  footer>.container>.qrcode{ float:left; margin-right:0 !important;}

}
@media only screen and (max-width: 780px){
  footer>.container>div{ width:48%; margin-right:0;}
  footer>.container>.linechat{float:right;}
  footer>.container>.qrcode{float:none;}
  footer>.copyright .icp{display:none;}
  footer>.copyright .gongan{display:none;}
}
@media only screen and (max-width: 640px){
  footer>.container{ padding:0 0 20px 0;}
  footer>.container>div{ width:100%; float:none !important;}
  footer>.container>.linechat>.tit{display:none;}
  footer>.container>.linechat>.con{ padding:0;}
  footer>.container>.linechat>.con>p{display:inline-block; padding:3px 3% 3% 0;}
}


/*END*/


.worktips{font-size:14px; text-align:right; color:#ccc; padding:0 0 25px 0;}
.worktips img{margin:-2px 8px auto auto;}




/*delay TOP*/

.delay100{-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}
.delay200{-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
.delay300{-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}
.delay400{-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
.delay500{-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
.delay600{-webkit-animation-delay: 0.6s;animation-delay: 0.6s;}
.delay700{-webkit-animation-delay: 0.7s;animation-delay: 0.7s;}
.delay800{-webkit-animation-delay: 0.8s;animation-delay: 0.8s;}
.delay900{-webkit-animation-delay: 0.9s;animation-delay: 0.9s;}
.delay1000{-webkit-animation-delay: 1s;animation-delay: 1s;}
.delay1100{-webkit-animation-delay: 1.1s;animation-delay: 1.1s;}
.delay1200{-webkit-animation-delay: 1.2s;animation-delay: 1.2s;}
.delay1300{-webkit-animation-delay: 1.3s;animation-delay: 1.3s;}
.delay1400{-webkit-animation-delay: 1.4s;animation-delay: 1.4s;}

/*END*/

@keyframes lineWidth{
  from { width:0;}
  to {width:100%;}
}
@-webkit-keyframes lineWidth{
  from { width:0;}
  to {width:100%;}
}
@keyframes lineHeight{
  from { height:0;}
  to {height:100%;}
}
@-webkit-keyframes lineHeight{
  from { height:0;}
  to {height:100%;}
}


#links{background:#222; padding:30px 0 40px 0; border-top:1px solid #2c2c2c;}
#links>div{max-width:1350px; margin:auto;}
#links .tit{background:#333; color:#777177; font-size:14px; display:inline-block; padding:5px 12px 5px 12px;}
#links .tit img{height:24px !important; margin-top:-2px;}
#links .items{margin:15px 0 0 0;}
#links .items>a{display:inline-block; font-size:13px; color:#666; margin-right:1px; transition:all .2s; padding:4px 10px 6px 10px;}
#links .items>a:hover{background:#2c2c2c; color:#bbb;}

@media only screen and (max-width: 780px){
  #links{display:none;}
}