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

/* banner */
#banner{width: 100%; height: 645px;  overflow: hidden; position: relative;  margin: 0 auto;}
#banner div{width: 1px; height: 645px;  margin: 0 auto; position: relative;}
#banner div ul{position: relative; left: -960px; top: 0px; width:1920px; }
#banner div ul li{position: absolute; top: 0; left: 0; display: none}
#banner div ul li.cur{display: block}
#banner ol{position: absolute;bottom: 25px;right: 10%; margin:0; padding:0; z-index:9;}
#banner ol li{ display: inline-block; width:22px; height:22px; line-height: 22px; text-align: center; border:1px solid #60a1b5; color: #60a1b5; margin-right:15px; cursor:pointer; }
#banner ol li.cur{ border-color:#fff; color: #fff;}    

/* ?????? */
#notice{ width:100%; border-bottom:3px solid #e1104a; margin:0 auto; background:#fff;}
#notice .content div{ float:left; position:relative; margin:30px; width:340px; height:78px; border-right: 1px solid #d1d1d1;}
#notice .content div:last-child{border:none;}
#notice .content div span{ display:block; height:66px; background:url(../images/notice.png) no-repeat;}
#notice .content div span.case{width:75px; background-position:left;}
#notice .content div span.design{width:67px; background-position:-77px;}
#notice .content div span.guide{width:66px; background-position:right;}
#notice .content div a{ display:block; position:absolute; bottom:7px; left:100px; width:182px;}
#notice .content div h1{ font-size:22px; font-weight:bold; width:182px; }
#notice .content div p{ font-size:14px; color:#585858; width:183px; }
#notice .content div:last-child p{ width:211px;}

/* ???????????? */
#hotzone{ width:1920px; position:relative; left:50%; margin-left:-960px; background:#fff; border-bottom: 1px solid #e6e6e8; padding-bottom: 15px;}
#hotzone .title{ width:334px; margin:30px auto;}
#hotzone .nav li{ display:block; float:left; text-align:center; font-size:24px; width:233px; height:55px; line-height:55px; background:#FFF; margin-right:11px; border-radius:3px; position:relative; cursor:pointer; font-family: ??????????????????_GBK;}
#hotzone .nav li:hover{background: #c71129; color:#fff; }
#hotzone .nav li span{ position:absolute; bottom:-12px; left:50%; background:url(../images/arrow.png) center no-repeat; width:20px; height:12px; display:none;}
#hotzone .nav li:hover span{display: block;}
#hotzone .nav li:last-child{ margin-right: 0;}
#hotzone .main{ position:relative;}
#hotzone .main .cntBox{ width:6050px; position:relative; padding-top:40px;}
#hotzone .main .cnt{ width:1210px; float:left;}
#hotzone .main .cnt ul{ background:#FFF; margin-bottom:10px; position:relative; cursor:pointer;}
#hotzone .main .cnt ul li{float:left;width: 385px;height: 130px;background: #eeeef0;margin-left: 15px;margin-bottom: 20px;position:relative; }
#hotzone .main .cnt ul li img{ width: 160px;padding:7px;float:left;}
#hotzone .main .cnt ul li .header{ width:186px; float:right;padding: 10px; }
#hotzone .main .cnt ul li .header h2{ font-size:16px; width:100%;line-height: 30px;border-bottom: 1px solid #999;margin-bottom: 5px; }
#hotzone .main .cnt ul li .header p{ font-size:12px;text-indent: 0.5em; }
#hotzone .main .cnt ul li .footer{width:51%; position:absolute; right:0; bottom:0px;}
#hotzone .main .cnt ul li .footer .btn{ position:absolute; right:20px; bottom:6px; font-size:12px; color:#FFF; background:#cf122b; width:80px; height:20px; line-height:20px; text-align:center; border-radius:5px;}
#hotzone .icon_hz1{ display:inline-block; width:11px; height:15px; background:url(../images/icon_hotzone.png) left no-repeat; position:absolute; top:6px; left:0;}

#hotzone > .content > p{ text-align:center; font-size:13px;}
#hotzone > .content p b{ color:#b61d31; font-size:13px;}
#hotzone  > .content > p.pptt {text-align: center;
  margin-top: 20px;
  color: #c33;
    font-size: 19px;}
/* ???????????? */
#process{ width:1920px; position:relative; left:50%; margin-left:-960px; background:#eeeef0;padding-bottom: 30px;}
#process .title{ width:304px; margin:30px auto 10px;}
#process > .content > p{ text-align:center; font-size:19px;}
#process .main{ margin:25px auto 0; background:#FFF; height:300px; }
#process .main .left{ float:left;}
#process .main .middle{ float:left; padding:35px 28px; width:225px; }
#process .main .middle h1{ font-size:16px; font-weight:bold; margin-bottom:10px;}
#process .main .middle ul li{ list-style:disc; margin-left:12px; margin-bottom:3px;}
#process .main .middle ul li a{ display:inline-block; height:25px; line-height:25px; font-size: 13px;}

#process .main .right{ float:left; padding:37px 15px; width:527px;}
#process .main .right ul{ cursor:pointer;}
#process .main .right ul li{ float:left; width:103px; height:105px; padding-bottom: 10px; border-right:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4; }
#process .main .right ul li:nth-of-type(5),#process .main .right ul li:last-child{ border-right:none; width: 93px;}
#process .main .right ul li:nth-of-type(6),#process .main .right ul li:first-child{ width: 93px;}
#process .main .right ul li.noBor{border-bottom: none; padding-top: 20px; padding-bottom: 0; height: 90px; }
#process .main .right ul li p.spe{margin-left: 0; text-align: left;}
#process .main .right ul li a.spea{margin-left: 13px;}
#process .main .right ul li p.spe2{margin-left: 17px; text-align: right;}
#process .main .right ul li a.spea2{margin-left: 33px;}
#process .main .right ul li a{ display:block;margin:0px 28px; }
#process .main .right ul li p{ margin:20px auto 0; color:#a6a5a5; width:75px; font-size: 17px; text-align: center;}
#process .main .right span.icon_lc{ background:url(../images/icon_process.png) no-repeat; height:46px; display:block; }
#process .main .right span.icon_lc1{ width:39px;}
#process .main .right span.icon_lc2{ width:42px; background-position:-45px 0;}
#process .main .right span.icon_lc3{ width:47px; background-position:-93px 0;}
#process .main .right span.icon_lc4{ width:51px; background-position:-147px 0; margin-left: -2px;}
#process .main .right span.icon_lc5{ width:44px; background-position:-203px 0;}
#process .main .right span.icon_lc6{ width:46px; background-position:0 -51px;}
#process .main .right span.icon_lc7{ width:28px; background-position:-53px -51px; margin-left: 8px;}
#process .main .right span.icon_lc8{ width:47px; background-position:-91px -51px;}
#process .main .right span.icon_lc9{ width:47px; background-position:-152px -51px;}
#process .main .right span.icon_lc10{ width:41px; background-position:-209px -51px;}

/* ???????????? */
#case{ overflow:hidden;width: 1920px; position: relative; left: 50%; margin-left: -960px;  background-color: #eeeef0;}
#case .title{ width:304px; margin:30px auto 10px;;}
#case p{ width:100%; text-align:center; margin-top:20px;color: #c33;}
#case .tit{ font-size:19px;}
#case .more{width: 200px;margin: 10px auto; font-size:24px; background-color: #fff; color: #c33;text-align:center;display:block;}

#case .case_nav{ width:1210px; margin:20px auto;}
#case .case_nav li{ display:inline-block; width:128px;margin-bottom: 10PX;}
#case .case_nav li a{ cursor:pointer; margin:0 auto; font-size:20px; width:110px; line-height:40px; text-align:center; display:block; border-radius:4px; color:#fff;border: 1px solid #fff;}
#case .case_nav li a:hover{ color:#db0101;background-color: #fff;}

#case .main{ width:1210px; position: relative; overflow:hidden;margin: 0 auto;margin-top:20px;}
#case .main img{ width:100%;max-height:160px;}
#case .main li{overflow:hidden;position:relative;float:left;width:24%;margin:0.5%;background-color: #fff;}
#case .main li .cover{position:absolute;top:-40px;left:0;width:100%;height:100%;background:rgba(74,29,36,0.3); z-index:2; display: none;}
#case .main li .meta{width:100%;text-align:left;overflow:hidden;}
#case .main li .meta h3{font-weight:normal; overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
#case .main li .meta h3 a{color:#000; font-size: 18px; height:40px;line-height:40px;}
#case .main li .meta h3 i{border-right:5px solid #cf122b; margin-right: 10px; vertical-align: 1px; }
#case .main li:hover .cover{display: block;}

#loading{ display:none; position:absolute; text-align:center; width:100%; height:100%; background-color:rgba(0,0,0,0.5);}
#loading img{ width:319px!important; height:305px; margin-top:6%;}

/* ???????????? */
#team{ width:1920px; position:relative; left:50%; margin-left:-960px; background:#eeeef0;}
#team .title{ width:304px; margin:30px auto 10px;}
#team > .content > p{ text-align:center; font-size:19px;}
#team .main{ margin:-10px auto; height:697px; background:url(../images/team_bg.png) no-repeat; position:relative; }
#team .main .mx{ position:absolute; top:120px; right:70px; width:658px; height:245px;}
#team .main .mx p{ font-size:14px; text-indent:2em; line-height:2em; margin-bottom:5px;}
#team .main .sp{ position:absolute; bottom:30px; left:46px; width:1120px; height:332px; background:#f8b400;}
#team .main .sp .left { width:546px; height:332px; float:left;}
#team .main .sp .right{ width:560px; height:332px; float:left; position:relative;}
#team .main .sp .left .txt{ width:229px; margin:40px 30px; float:left;}
#team .main .sp .left .txt h1{ font-size:22px; font-weight:bold; color:#11100a; text-align:center; margin-bottom:18px;}
#team .main .sp .left .txt p{ font-size:14px; color:#11100a; text-indent:2em; line-height:1.5em; }
#team .main .sp .left .fig{ width:257px; float:left;}
#team .main .sp .left .fig a{ margin-top:8px; display:block;}
#team .main .sp .left .fig a img{ width:96%;}

video,#player{display: block; width:100%; height:315px; position: absolute; left: 0; top: 8px; cursor:pointer; }

/* ???????????? */
#service{ width:1920px; position:relative; left:50%; margin-left:-960px; background:#eeeef0;}
#service .title{ width:304px; margin:30px auto 10px;}
#service > .content > p{ text-align:center; font-size:19px;}
#service .main{ margin:25px auto 0; height:427px; background:#FFF; position:relative; }
#service .main .left,#service .main .right{ float:left; width:327px; height:427px; }
#service .main .left a{ display:block; width:303px; height:401px; margin:12px;}
#service .main .right a{ display:block; width:303px; height:401px; margin:12px 20px;}
#service .main .middle{float:left; width:555px; height:427px;}

#service .main .middle .boxSwip{width:555px; height:388px; overflow:hidden; }
#service .main .middle .box{width:555px; height:1131px; position:relative;}
#service .main .middle .box li{position:relative; width:480px; height:100px; border-bottom:1px solid #e9e9e9; padding:10px ; margin-bottom:10px;}
#service .main .middle .box li:nth-child(3n+0){ border-bottom:none;}
#service .main .middle .box li a{ display:block;}
#service .main .middle .box li a h1{ color:#9e9d9d; margin-bottom:10px;}
#service .main .middle .box li a p{ color:#1a1818; text-indent:1em;}

#service .main .middle .more{ width:555px; height:45px; margin-top:-10px;}
#service .main .middle .more .kanmore{ float:left; display:block; width:90px; height:28px; border:1px solid #b0afaf; color:#898888; text-align:center; line-height:28px; border-radius:4px; margin:8px 0 0 0;}
#service .main .middle .more .btn{ float:left; width:25px; height:25px; }
#service .main .middle .more .prev{ margin:8px 0 0 390px; background:url(../images/prev.png) no-repeat center;}
#service .main .middle .more .next{ margin:8px 0 0 16px; background:url(../images/next.png) no-repeat center;}

/* ???????????? */
#news{ width:1920px; position:relative; left:50%; margin-left:-960px; margin-top:0px; background-color:#fff;}
#news .title{ width:304px; margin:30px auto 10px;}
#news > .content > p{ text-align:center; font-size:19px;}
#news .main{ margin:25px auto; height:427px; background:#FFF; position:relative; }
#news .main .left{ float:left; width:300px; height:367px; padding:30px 0  30px 95px; position:relative;}

#news .main .left .toutiao{ width:260px; height:242px; background:rgba(220,51,53,0.85); position:absolute; top:100px; left:15px;}
#news .main .left .toutiao h2{ color:#FFF; font-size:14px; margin:10px;}
#news .main .left .toutiao h2 i{font-style:normal;background-color:#FFF; font-weight: 600;margin-right: 10PX;padding: 0 5px;color: #c33;display:block;float: left;}
#news .main .left .toutiao h3{ color:#FFF; font-size:24px; margin:20px auto; text-align:center;}
#news .main .left .toutiao p{ color:#FFF; margin:0 22px;font-size: 12px;}
#news .main .left .toutiao span{color:#FFF; float:right; margin-right:20px; margin-top:25px;}

#news .main .middle{float:left; width:528px; height:367px; padding:30px 0;}
#news .main .middle ul{width:528px; height:367px;}
#news .main .middle ul li{width:511px; height:75px; border-bottom:1px dotted #e9e9e9; padding:10px 0; position:relative; margin-left:20px;}
#news .main .middle ul li a{ display:block;}
#news .main .middle ul li a h1{ color:#1a1818; margin-bottom:5px; font-size: 18px;}
#news .main .middle ul li a p{ color:#959595; }

#news .main .right{ float:left; width:250px; height:370px; margin:30px 15px; border:1px solid #ccc;} 
#news .main .right .nav{ width:220px; height:51px; padding:0 15px;}
#news .main .right .nav h1{ float:left; width:110px; height:40px; font-size:18px; color:#959595; line-height:40px; text-align:center; border-bottom:2px solid #c9c9c9; margin:5px 0; cursor:pointer;}
#news .main .right ul{ width:230px; margin-top:0; padding:0 10px; position:absolute; display:none;}
#news .main .right ul li{ width:230px; height:42px; line-height:42px; border-bottom: 1px solid #e9e9e9;}
#news .main .right .nav h1:hover,#news .main .right .nav h1.cur{ border-color: #ec001f; color: #dd0000;}
#news .main .right ul li a{  font-size:12px; color:#959595;}

/* ???????????? */
#custom{ width:1920px; position:relative; left:50%; margin-left:-960px; background:#fff;}
#custom .title{ width:304px; margin:30px auto 10px;}
#custom > .content > p{ text-align:center; font-size:19px;}

.partner{width:1210px;margin:30px auto;}
.partner table{border-collapse:collapse;border:1px solid #e6e6e6;}
.partner table td{width:238px;height:138px;border:1px solid #e6e6e6;}
.partner table td .partner_box{width:150px;height:100px;padding:19px 44px;position:relative;z-index:1;}
.partner table td .partner_box2:hover{border:8px solid #f6f6f6;padding:11px 36px;}

.partner_box .cont1{width:150px;height:100px;position:absolute;top:19px;left:44px;z-index:2;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}  
.partner_box .cont2{width:150px;height:100px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;position:absolute;top:19px;left:44px;z-index:1;transform:rotateY(180deg);-ms-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-o-transform:rotateY(180deg);}  
.partner_box:hover .cont1{transform:rotateY(180deg);z-index:1;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;-ms-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-o-transform:rotateY(180deg);}
.partner_box:hover .cont2{transform:rotateY(360deg);z-index:2;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;-ms-transform:rotateY(360deg);-moz-transform:rotateY(360deg);-webkit-transform:rotateY(360deg);-o-transform:rotateY(360deg);}  
.partner_box:hover .cont2{z-index:2;}  
.partner_box .cont1{transition:all .5s linear 10ms;} 
.partner_box .cont2{transition:all .5s linear 10ms;} 

@media (max-width: 1199px){
	.wrap {border: 0; padding: 0; width: 965px; margin: 0 auto;}	
}
#case .main li .meta h3 a{font-size:14px;}