/******************************************
 * Commone CSS
 * Date   : 2016-5-16
 * Author : XiangYun 亭云科技
 * Net    : http://www.tingyunkeji.com
 *****************************************/
/** 初始化 **/
@charset "utf-8";
html, body, div, dl, dd, dt, ul, ol, li, a, i, font, label, span, form, input, select, textarea, h1, h2, h3, h4, h5 { margin:0px; padding:0px; font:12px Tahoma,'Microsoft Yahei','Simsun'}
body { color:#333}
a { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; text-decoration:none; cursor:pointer; color:#707070}
i { display:-moz-inline-stack; display:inline-block; font-style:normal}
table{ border-collapse:collapse; border-spacing:0px}
ol, ul, li { list-style:none}
img { border:0px none}
input[type=text], input[type=button], input[type=submit], input[type=reset] { -webkit-appearance:none; font-size:100%; outline:none 0}
select { padding:0px}
textarea { resize:none}
::-webkit-scrollbar-thumb { background:#b0b0ae; -webkit-border-radius:4px}
::-webkit-scrollbar-thumb:hover { background:#9f9f9f; -webkit-border-radius:4px}
::-webkit-scrollbar { width:6px}
::-webkit-scrollbar-track-piece { background:#eaeaea; -webkit-border-radius:0}


/** 工具 **/
.clear { clear:both}
.fl { float:left}
.fr { float:right}
.psa { position:absolute}
.psr { position:relative}
.psf { position:fixed}
.vat { vertical-align:top}
.vam { vertical-align:middle}
.vab { vertical-align:bottom}
.cp { cursor:pointer}
.db { display:block}
.di { display:inline-block}
.dn { display:none}
.tal { text-align:left}
.tac { text-align:center}
.tar { text-align:right}
.oh { overflow:hidden}
.oxs { overflow:hidden; overflow-x:scroll}
.oys { overflow:hidden; overflow-y:scroll}
.ha { height:auto; overflow:auto}
.ml5 { margin-left:5px}
.ml10 { margin-left:10px}
.ml15 { margin-left:15px}
.ml20 { margin-left:20px}
.ml30 { margin-left:30px}
.mt5 { margin-top:5px}
.mt10 { margin-top:10px}
.mt15 { margin-top:15px}
.mt20 { margin-top:20px}
.mt30 { margin-top:30px}
.pt5 { padding-top:5px}
.pt5 { padding-top:5px}
.pt10 { padding-top:10px}
.pt15 { padding-top:15px}
.pt20 { padding-top:20px}
.pt30 { padding-top:30px}
.fs13 { font-size:13px}
.fs14 { font-size:14px}
.fs15 { font-size:15px}
.fs16 { font-size:16px}
.editorDetail p:first-child { margin-top:0px}
.editorDetail img { max-width:100%}
.emptyTip { clear:both; font-size:12px; color:#888; padding:30px 0; margin:0px; text-align:center; overflow:hidden}


.YPMsg { position:fixed; padding:15px 20px; background:rgba(0,0,0,0.7); z-index:-1; border-radius:8px; color:#fff; font-size:15px; line-height:20px; max-width:400px; text-align:center;}
.loading { display:none; width:0px; height:0px}
.loading > div { position:fixed; width:100%; height:100%; top:0px; left:0px; background:rgba(0,0,0,0.2); z-index:999; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; z-index:9990}
.loading > div > div { background:rgba(0,0,0,0.8); padding:20px; border-radius:10px;}
.ldi,.ldi>div{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}.ldi{display:block;font-size:0;color:#fff}.ldi.la-dark{color:#fff}.ldi>div{display:inline-block;float:none;background-color:currentColor;border:0 solid #ddd}.ldi{width:32px;height:32px}.ldi>div{width:32px;height:32px;background:transparent;border-width:2px;border-bottom-color:transparent;border-radius:100%;-webkit-animation:ball-clip-rotate 1s linear infinite;animation:ball-clip-rotate 1s linear infinite}.ldi.la-sm{width:16px;height:16px}.ldi.la-sm>div{width:16px;height:16px;border-width:1px}.ldi.la-2x{width:48px;height:48px}.ldi.la-2x>div{width:48px;height:48px;border-width:4px}.ldi.la-3x{width:96px;height:96px}.ldi.la-3x>div{width:96px;height:96px;border-width:6px}@-webkit-keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}


html, body {  height:100%; overflow:hidden}
.tingyun { float:left; width:100%; height:100%; min-width:1200px; overflow:hidden}
.section { width:1200px; height:100%; margin:0 auto}
.section > table, .section > table > tbody, .section > table > tbody > tr { width:1200px; height:100%}
.section > table > tbody > tr > td { position:relative; width:100%; height:100%; vertical-align:middle}


@-webkit-keyframes logoRot {
	0%{transform:rotateY(0deg);-webkit-transform:rotateY(0deg);width:}
	10%{transform:rotateY(90deg);-webkit-transform:rotateY(90deg);}
	20%{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);}
	30%{transform:rotateY(270deg);-webkit-transform:rotateY(270deg);}
	40%{transform:rotateY(360deg);-webkit-transform:rotateY(360deg);}
	100%{transform:rotateY(360deg);-webkit-transform:rotateY(360deg);}
}

/** 首页顶部导航 **/
.indexNav { position:fixed; top:0; width:100%; height:60px; z-index:101; width:100%; text-align:center; background:#333; background:rgba(0, 0, 0, 0.5)}
.indexNav > div{ width:100%; height:63px; margin:0 auto; position:relative; min-width:860px;}
.indexNav > div .logo { float:left; margin-left:20px}
.indexNav > div .logo i { width:45px; height:45px; float:left; padding:7px 0}
.indexNav > div .logo i.ico img { width:45px; height:45px; -webkit-animation:logoRot 5s linear infinite}
.indexNav > div .logo i.name { height:30px; width:133px; float:left; padding:13px 0; margin-left:10px}
.indexNav > div .logo i.name img { height:30px; width:133px}
.indexNav > div .fr{ margin-top:15px;} 
.indexNav > div .menu { height:60px; line-height:60px; position:absolute; top:0px; right:20px}
.indexNav .menu a { position:relative; color:#fff; width:80px; margin-right:5px; text-align:center; height:60px;}
.indexNav .menu a > i { position:absolute; left:0px; width:100%; height:0px; background:#3ab5fb; border-top:2px solid #1d8ccb; opacity:0; transition:all .3s ease-out; -webkit-transition:all .3s ease-out;}
.indexNav .menu a > b { position:absolute; left:0px; font-size:15px; display:inline-block; font-weight:normal; width:100%; line-height:60px}
.indexNav .menu a.selected > i, .indexNav .menu a:hover > i { height:58px; background:#3ab5fb; opacity:0.3}

/*载入比例*/
.loadRate { position:fixed; top:0px; left:0px; width:100%; height:3px}
.loadRate > div { width:0%; height:100%; background:#27affd; box-shadow:0px 0px 20px #92d7ff}

/** 首页内容容器 **/
.idxWrap { width:100%; height:100%; overflow:hidden; z-index:11; background:#fff center no-repeat; background-size:cover}
.idxWrap .title > .img,.idxServ .title > .img img { float:left}
.idxWrap .title > .text { border:1px solid #FFF; border-radius:50%; height:52px; width:52px; color:#FFF; font-size:30px; font-family:"楷体"; text-align:center; line-height:52px; margin-top:15px; margin-left:42px; float:left}
.idxWrap .title > .heitext{ color:#696969; border:1px solid #696969}
.idxWrap .title > .ico { height:52px; width:52px; background:url(/com/img/text_ico.png) no-repeat; float:left;margin-top:15px; margin-left:30px}

/** 首页Banner **/
.idxBanner { position:relative; width:100%; height:100%}
.idxBanner .videoWrap { position:absolute; width:100%; height:100%; top:0px; left:0px; background:#161616; opacity:0.8; z-index:3}
.idxBanner video { position:absolute; top:0px; z-index:2}
div.idxWrap.idxServ, div.idxCase.idxWrap, div.idxWrap.idxCustomer, div.idxWrap.idxQuality, div.idxWrap.idxAbout, div.idxWrap.idxContact { background:no-repeat center; background-size:cover}

/** 首页服务 **/
.idxServ .title { height:auto; overflow:hidden}
.idxServ ul { width:100%; height:auto; margin-top:50px; overflow:hidden}
.idxServ ul li { width:20%; float:left; text-align:center; position:relative; background:rgba(0,0,0,0)}
.idxServ ul li > div { position:relative; z-index:12; width:100%; height:200px; background:url(/com/img/service_bg.png) center no-repeat}
.idxServ ul li > div > i { width:100%; height:195px; background:url(/com/img/ser_ico.png) 68px 65px no-repeat}
.idxServ ul li h1, .idxServ ul li h2 { width:100%; text-align:center; margin-top:20px; color:#ffffff; font-size:16px; position:relative; z-index:11}
.idxServ ul li h2 { font-size:14px}
.idxServ ul li.phone > div > i { background-position:76px -195px}
.idxServ ul li.app > div > i { background-position:78px -490px}
.idxServ ul li.html5 > div > i { background-position:80px -763px}
.idxServ ul li.weixin > div > i { background-position:75px -1115px}

/** 首页案例 **/
.idxCase .title .ico.case { background-position:0 -146px}
.idxCase .case { width:1230px; margin-left:-30px; overflow:hidden; margin-top:20px}
.idxCase .case  div { height:240px; float:left; padding:20px 0 0 30px}
.idxCase .case  div a.img { width:370px; height:240px; position:relative; overflow:hidden; border-radius:5px}
.idxCase .case  div a.img img { width:370px; height:240px}
.idxCase .case  div a.img .text { width:310px; height:240px; overflow:hidden; color:#FFF; position:absolute; left:0px; top:-240px; background:url(/com/img/casebg.png); background:#fff; background:rgba(0, 0, 0, 0.5); padding:0 30px; transition:all .3s ease-out; -webkit-transition:all .3s ease-out;}
.idxCase .case  div a.img .text .casetitle { width:315px; border-bottom:1px dashed #FFF; height:60px; line-height:60px; margin-top:20px; font-size:18px; text-align:center}
.idxCase .case  div a.img .text .casetext { width:315px; height:95px; overflow:hidden;text-align:left; margin-top:15px; font-size:14px;letter-spacing:1px}
.idxCase .case  div a.img:hover .text { opacity:1; top:0px}
.idxCase .more { width:100%; text-align:center; float:left;  padding-top:50px}
.idxCase .more > a { padding:10px 18px; font-size:18px; color:#3598db; border:1px solid #3598db;border-radius:2px; padding-right:33px; background:url(/com/img/more.png) 95px center no-repeat; cursor:pointer; transition:all .3s ease-out; -webkit-transition:all .3s ease-out;}
.idxCase .more > a:hover { color:#5eb6f2; border:1px solid #5eb6f2}


/** 首页客户 **/
.idxCustomer .title .ico.customer { background-position:0 -302px}
.idxCustomer .customer { float:left; width:1225px; margin-left:-25px; margin-top:50px}
.idxCustomer .customer li { float:left; width:277px; height:111px; margin:12.5px 0 0 12.5px}
.idxCustomer .customer li a { width:277px; height:111px; border-radius:5px; background:center no-repeat; background-size:cover; transition:all .3s ease-out; -webkit-transition:all .3s ease-out}
.idxCustomer .customer li a:hover { width:302px; height:136px; margin:-12.5px 0 0 -12.5px}

/** 首页品质 **/
.idxQuality .title .ico.quality { background-position:0 -484px}
.idxQuality .quality { width:1275px; height:auto; overflow:hidden; margin-left:-105px; margin-top:20px; float:left;}
.idxQuality .quality dl { margin-left:100px}
.idxQuality .quality dl dd { width:310px; height:300px; border-radius:5px; float:left; margin-left:80px}
.idxQuality .quality dl dd > div { margin:0 10px; text-align:center; border-bottom:1px dashed #FFF}
.idxQuality .quality dl dd > div > i { background:url(/com/img/quality_ico.png); width:90px; height:111px}
.idxQuality .quality dl dd > p { padding:0 20px; text-align:center; color:#FFF; margin-top:20px; line-height:26px; letter-spacing:1px; text-indent:2em; text-align:left}
.idxQuality .quality dl dd.web { background:rgba(92,171,227,.85)}
.idxQuality .quality dl dd.web > div > i { background-position:-653px 30px}
.idxQuality .quality dl dd.web > div > i.google { background-position:-790px 30px}
.idxQuality .quality dl dd.web > div > i.apple { background-position:-953px 30px}
.idxQuality .quality dl dd.app { background:rgba(231,116,147,.85)}
.idxQuality .quality dl dd.app > div > i.lft { background-position:-389px 29px}
.idxQuality .quality dl dd.app > div > i.rgt { background-position:-532px 29px}
.idxQuality .quality dl dd.weixin { background:rgba(105,218,232,.85)}
.idxQuality .quality dl dd.weixin > div > i.lft { background-position:-251px 35px}
.idxQuality .quality dl dd.weixin > div > i.rgt { background-position:-112px 38px}

/** 首页关于 **/
.idxAbout .title .ico.about { background-position:0 -679px}
.idxAbout .about { width:1200px; height:auto; overflow:hidden; padding-top:20px}
.idxAbout .about > div .intro { width:386px; min-height:300px;text-align:center; margin-top:50px; float:left;border-top:1px solid #FFF; position:relative}
.idxAbout .about > div .intro .aboutcon { width:300px; height:auto; text-align:center;position:absolute; top:-45px; right:0px}
.idxAbout .about > div .intro .aboutcon .ico { width:85px; height:85px; background:url(/com/img/about_ico.png) no-repeat}
.idxAbout .about > div .intro .aboutcon .wenben { width:300px; height:auto; text-align:center; margin-top:25px}
.idxAbout .about > div .intro .aboutcon .wenben > .biaoti { font-size:20px; color:#FFF}
.idxAbout .about > div .intro .aboutcon .wenben > i.text { font-size:14px; color:#FFF; margin-top:15px; line-height:25px; letter-spacing:1px; text-align:left; text-indent:2em}
.idxAbout .about .jiahao { font-size:30px; color:#FFF; float:left; margin-top:25px}
.idxAbout .about > div .Strength { width:300px; float:left}
.idxAbout .about > div .Strength .aboutcon > .ico { background-position:0 -286px}
.idxAbout .about > div .Culture .aboutcon { left:0px}
.idxAbout .about > div .Culture .aboutcon > .ico { background-position:0 -589px}


/** 首页联系 **/
.idxContact .slogan { text-align:center; width:100%; margin-top:0px; float:left; border-bottom:1px dashed #CCCCCC; padding-bottom:40px;}
.idxContact .telphone { width:882px; margin:0 185px; margin-top:30px; float:left}
.idxContact .telphone img { margin:0px 25px; float:left}
.idxContact .telphone .border { width:305px; height:1px;border-top:1px dashed #acacac; float:left; margin-top:20px}
.idxContact  dl { width:1067px; height:auto; overflow:hidden; float:left; margin:0px 0 0 185px}
.idxContact  dl > dd { text-align:left; float:left; margin-right:115px; margin-top:50px;}
.idxContact  dl > dd > i { color:#6e6e6e; font-size:14px; line-height:30px}
.idxContact  dl > dd:last-child{ margin-top:40px;}
.idxContact  dl > dd:last-child > i{ width:150px; height:150px; border:1px solid #3bb6fd; border-radius:2px; background: no-repeat center; background-size:cover}


/** 左边导航 **/
.leftNav{ width:100px; height:auto; position:fixed; top:40%; left:20px; z-index:100}
.leftNav > a{ display:block; width:13px; height:16px; border:1px solid transparent; position:relative; overflow:hidden; border-radius:10px; margin-top:12px; overflow:hidden; transition:all .3s cubic-bezier(0.1,0.6,0.9,1); -webkit-transition:all .3s cubic-bezier(0.1,0.6,0.9,1)}
.leftNav > a:first-child{ margin-top:0}
.leftNav > a div { width:10px; height:10px; background:none}
.leftNav > a div > i.ico { width:10px; height:10px; background:#27affd; border-radius:50%; float:left; margin:3px 3px 3px 3px}
.leftNav > a div > i.text { font-size:12px; color:#27affd; height:16px;line-height:16px; display:none; vertical-align:top}
.leftNav > a.selected, .leftNav > a:hover { border:1px solid #27affd; background:#27affd; width:47px; box-shadow:0px 0px 15px #67c6fc}
.leftNav > a.selected div, .leftNav > a:hover div { width:auto; height:16px; padding-right:6px; }
.leftNav > a.selected div > i.ico, .leftNav > a:hover div > i.ico{ display:block; background:#dceef9}
.leftNav > a.selected div > i.text, .leftNav > a:hover div > i.text {display:block; color:#fff}

/** 右边浮窗 **/
.sidebar{position:fixed; right:0; top:50%; margin-top:-80px; width:55px;}
.suspenWrap { width:70px; height:auto; position:fixed; top:50%; border-radius:2px; right:20px; z-index:666; margin-top:-110px;}
.suspenWrap > div, .suspenWrap > a{ width:48px; height:48px; background:url(/com/img/right_ico.png) -3px -1px no-repeat; margin-top:10px; position:relative; cursor:pointer; float:left; transition:all .2s cubic-bezier(0.1,0.6,0.9,1); -webkit-transition:all .2s cubic-bezier(0.1,0.6,0.9,1)}
.suspenWrap > div > div, .suspenWrap > a > div { display:none}
.suspenWrap > div:hover > div, .suspenWrap > a:hover > div { display:block}
.suspenWrap > a.qq:hover{ background-position:-52px -1px}
.suspenWrap > div.tel{background-position: -3px -246px}
.suspenWrap > div.tel:hover{background-position: -52px -246px}
.suspenWrap > div.wx{background-position: -3px -494px}
.suspenWrap > div.wx:hover{background-position: -52px -494px}
.suspenWrap > div.ly{background-position: -3px -772px}
.suspenWrap > div.ly:hover{background-position: -52px -772px}
.suspenWrap > div.top{background-position: -3px -1050px}
.suspenWrap > div.top:hover{background-position: -52px -1050px}
.suspenWrap > div:first-child{ margin-top:0}
.suspenWrap > div > div, .suspenWrap > a > div { position:absolute; right:48px; z-index:10}
.suspenWrap > div > div .zixun, .suspenWrap > a > div .zixun{ width:100px; height:50px; background:url(/com/img/rightbg.png); color:#FFF; font-size:18px;line-height:50px; border-radius:5px; text-align:center; position:relative; margin-right:20px}
.suspenWrap > div > div .sj, .suspenWrap > a > div .sj{ width:9px; height:13px; background:url(/com/img/sj_ico.png) no-repeat; position:absolute; right:11px; top:18px}
.suspenWrap > a.qq > div div .zixun{ margin-left:-72px}
.suspenWrap > a.qq > div div .sj{ right:11px}
.suspenWrap > div > div .telphone{ width:200px;}
.suspenWrap > div > div .telphone input[type=text]{ width:120px; height:33px; border:1px solid #FFF; background:none; border-top-left-radius:3px; border-bottom-left-radius:3px;float:left; margin:8px 0 8px 8px; color:#FFF; font-size:14px; padding-left:10px;}
.suspenWrap > div > div .telphone input[type=text]::-webkit-input-placeholder{color:#FFF;}
.suspenWrap > div > div .telphone input[type=text]:-ms-input-placeholder{color:#FFF;}
.suspenWrap > div > div .telphone input[type=submit]{ width:50px; height:35px;background:none; border:none; border:1px solid #FFF; color:#FFF; line-height:32px; float:left; border-left:none; margin:8px 0;border-top-right-radius:3px; border-bottom-right-radius:3px; font-size:14px; cursor:pointer}
.suspenWrap > div > div .weixin{ width:150px; height:150px;}
.suspenWrap > div > div .weixin > i{ width:130px; height:130px; margin:10px; }
.suspenWrap > div > div .weixin > i img{ width:130px; height:130px;}
.suspenWrap > div > div .liuyan{ width:220px; height:auto; padding-bottom:10px;}
.suspenWrap > div > div .liuyan .name{ border:none; width:50px; height:33px; line-height:31px;border-bottom-left-radius:3px;border-top-left-radius:3px; border:1px solid ; border-right:none;margin:10px 0px 0 10px;float:left; font-size:14px; float:left; margin-top:10px 10px 0 10px;}
.suspenWrap > div > div .liuyan input[type=text]{ width:135px; margin-left:0; border-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px; margin:10px 10px 0 0px;}
.suspenWrap > div > div .liuyan textarea{ width:190px; height:70px; border:1px solid #FFF; background:none; border-radius:3px; float:left; margin:8px; color:#FFF; padding:8px 0 0 8px; font-size:14px; margin:10px}
.suspenWrap > div > div .liuyan textarea::-webkit-input-placeholder{color:#FFF;}
.suspenWrap > div > div .liuyan textarea:-ms-input-placeholder{color:#FFF;}
.suspenWrap > div > div .liuyan input[type=submit]{width:200px; height:35px; text-align:center; line-height:35px; background:#FFF; color:#64c0ef; float:left; margin:0 10px; border-radius:3px;}

/*欢迎页*/
.welcome{ position:relative; width:100%; height:100%;background:url(/com/img/welcome.jpg) no-repeat center; background-size:cover; overflow:hidden; z-index:888}
.welcome table{ width:1200px; height:100%; margin:0 auto; overflow-x:hidden}
.welcome table tr td{ width:100%; height:100%; text-align:center}
.welcome table tr td > div > i { vertical-align:middle}
.welcome table tr td > div > i img { width:312px; height:115px}
.welcome table tr td > div > i:first-child img { width:120px; height:120px; -webkit-animation:logoRot 5s linear infinite;}



/** 首页Banner **/
.flexslider { position:relative; width:1000px; height:100%; margin:0 auto; overflow:hidden; z-index:5}
.flexslider > div { position:relative; width:1000px; height:100%}
.flexslider ul.slides, .flexslider ul.slides li { width:100%; height:100%}
.flexslider ul.slides li a { width:100%; height:100%; background:no-repeat center; background-size:auto }
.flex-control-nav { width:100%; position:absolute; bottom:30px; text-align:center; z-index:6 }
.flex-control-nav li { margin:0 10px; display:inline-block; zoom:1; *display:inline; }
.flex-control-paging li { height:8px; line-height:8px; overflow:hidden}
.flex-control-paging li a { width:40px; height:4px; vertical-align:bottom; overflow:hidden; text-indent:99em; cursor:pointer; background:#fafafa; opacity:.8; transition:all .3s ease-out; -webkit-transition:all .3s ease-out; border-radius:2px}
.flex-control-paging li a.flex-active { height:4px; background:#27affd}