@charset "utf-8";

/* author maqibin */
@charset "utf-8";

/* CSS Document */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0;}

table { border-collapse:collapse;}

fieldset,img { border:0;}

address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal;}

ol,ul { list-style:none;}

caption,th { text-align:left;}

h1,h2,h3,h4,h5,h6 { font-size:100%;	font-weight:normal;}

q:before,q:after { content:'';}

abbr,acronym { border:0;}

:focus { outline:0; }

/** 重置表格元素 **/

table { border-collapse: collapse;}

/** 清除浮动 **/

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}  

.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}



/*统一字体样式*/

body,button,input,select,textarea { font:12px/1.5 tahoma, arial, \5b8b\4f53;}

select, input, button, textarea{font: 100% Tahoma,Helvetica,Arial,sans-serif;}



/*文字排版*/

.f12{font-size:12px}

.f14{font-size:14px}

.fb{font-weight:bold}  

.fn{font-weight:normal}

.t2{text-indent:2em}

.lh24{ line-height:24px;}

.unl{text-decoration:underline;}  

.no_unl{text-decoration:none;}

.cor{ color:#f00;}

/*边框*/

.bor{ border:1px #ddd solid;}



/*定位*/

.tl{text-align:left}  

.tc{text-align:center}  

.tr{text-align:right}  

.bc{margin-left:auto;margin-right:auto;}  

.fl{float:left;display:inline}  

.fr{float:right;display:inline}  

.cb{clear:both}  

.cl{clear:left}  

.cr{clear:right}

.vm{vertical-align:middle}  

.pr{position:relative}  

.pa{position:absolute}  

.abs-right{position:absolute;right:0}  

.zoom{zoom:1}  

.hidden{visibility:hidden}  

.none{display:none} 

.ovh{overflow:hidden;}

/*长度高度*/  

.w{width:100%}

.h{height:100%}



 /*边距*/ 

.m10{margin:10px}  

.mt10{margin-top:10px}

.mb10{margin-bottom:10px}

.ml10{margin-left:10px} 

.mr10{margin-right:10px}  



.p10{padding:10px;}  

.pt10{padding-top:10px}

.pb10{padding-bottom:10px}

.pl10{padding-left:10px}  

.pr10{padding-right:10px}



/*颜色*/

.red{ color:#f00; padding-left:10px;}

.cor_666{ color:#666;}

/*通栏横切结构样式*/

.area{ width:1100px; margin:0 auto;}  



/*链接*/

a{ text-decoration:none; color:#666;}

a:hover{ text-decoration:none;}

::-webkit-scrollbar-thumb {

width: 6px;

border-radius: 3px;

background: #aaa;

}

::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece {

width: 6px;

border-radius: 3px;

background: #f0f0f0;

}

/*case*/


.tab_search { padding: 20px 0 20px }

.tab_search .fl a { width: 212px; height: 58px; margin-right: 10px; line-height: 58px; background: #e4e4e4; display: inline-block; text-align: center; font-size: 18px; color: #999; font-family: "Microsoft Yahei", "微软雅黑", Arial, STHeiti, Tahoma, Helvetica; }

.tab_search .fl a.on { background: #5ba707; color: #fff; position: relative }
.tab_search .fl a:hover{ background: #5ba707; color: #fff; }

.tab_search .fl a.on:after { content: ""; position: absolute; z-index: 100; top: 58px; display: inline-block; width: 0; height: 0; border: 10px solid transparent; left: 50%; margin-left: -10px; border-color: #5ba707 transparent transparent transparent; }

.tab_search .fr input { width: 200px; height:38px; line-height:38px; padding: 10px; border: 0; color: #999; background: #e4e4e4; float: left; font-size: 18px; font-family: "Microsoft Yahei", "微软雅黑", Arial, STHeiti, Tahoma, Helvetica; }

.searchBtn { width: 48px; height: 58px; background: url(../images/case_search_btn.png) no-repeat; display: inline-block; float: left; cursor: pointer; border:0;}

.Public-box { margin-bottom: 20px }

.Public-box .case-nav { width: 200px; }

.Public-box .case-nav li { height: 50px; line-height: 50px; border-left: 10px solid #f7f7f7; background: #f7f7f7; padding-left: 20px; color: #999; font-family: "Microsoft Yahei", "微软雅黑", Arial, STHeiti, Tahoma, Helvetica; margin-bottom: 2px; font-size: 14px; cursor: pointer }

.Public-box .case-nav li a{ display:block; height:50px;}
.Public-box .case-nav li a:hover{ color:#FFF;}


.Public-box .case-nav li:hover{background: #333; border-left: 10px solid #5ba707; color: #fff;}
.Public-box .case-nav li.on { background: #333; border-left: 10px solid #5ba707; color: #fff; position: relative }
.Public-box .case-nav li.on a{color: #fff;}

.Public-box .case-nav li.on:after { content: ">"; position: absolute; right: 10px; color: #fff; top: 0px }

#nav_uls { border: 4px solid #f7f7f7; width: 860px; padding: 15px }

.case_list { position: relative; }

.case_item { display: inline-block; width: 140px; height: 120px; overflow:hidden; float: left; text-align: center; cursor: pointer; }

.icon_wrapper { position: relative; width: 80px; height: 80px; border-radius: 100%; display: block; margin: 0 auto }

.icon_wrapper div { width: 72px; height: 72px; display: block; -moz-border-radius: 50px;     -webkit-border-radius: 50px;  
   border-radius: 50px;  border: 2px solid #5ba707; overflow:hidden; }

.icon_wb_case:after { content: ""; position: absolute; width: 80px; height: 80px; display: block; left: 0; top: 0; background:#000; filter:alpha(opacity=30); opacity:.3; border-radius: 100%; }

.case_item.on .icon_wb_case:after { content: ""; position: absolute; z-index: 100; top: 100px; display: inline-block; width: 0; height: 0; border: 10px solid transparent; left: 50%; margin-left: -10px; border-color: transparent transparent #f7f7f7 transparent; background: none }

.wb_case_desc { background: url(../images/case_desc_bg.png) no-repeat; height: 645px; position: relative; margin-top: 20px }

.swipe { width: 240px; height: 390px; overflow: hidden; position: absolute; left: 155px; top: 97px }

.swipe ul { position: relative }

.swipe ul img { width: 240px; height: 390px; }

.swipe ul li { width: 240px; height: 390px; float: left; overflow: hidden; display: inline-block; position: relative; }

.case_ewm_info { position: absolute; left: 490px; top: 115px; width: 300px }

.case_ewm_info img { margin: 0 auto; display: block }

.case_ewm_info h3 { text-align: center; font-size: 14px; font-weight: bold; color: #5ba707; margin: 40px 0 10px 0 }

.case_ewm_info p { color: #999; line-height: 24px }

.iphone-index { position: absolute; bottom: 0; width: 100%; height: 50px; line-height: 50px; overflow: hidden; text-align: center; }

.iphone-index i { display: inline-block; width: 10px; height: 10px; overflow: hidden; border-radius: 10px; background: #ccc; margin: 0 5px; }

.iphone-index i.hover { background: #1cc820; }