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

.banner_template {height:106px; background:url(../images/template/banner_template.jpg) center top no-repeat;}

/* 颜色选择 */
.color {clear:both; padding-left:15px; }
.color strong,.template_type strong {float:left; font-weight:bold;}
.color a {float:left;display:block;width:24px;height:24px;margin:0px 5px; background:url(../images/template/color.png);}
.color .black {background-position:0 0;}
.color .black:hover{background-position:0 -32px;}
.color .blue {background-position:-32px 0;}
.color .blue:hover{background-position:-32px -32px;}
.color .green {background-position:-64px 0;}
.color .green:hover{background-position:-64px -32px;}
.color .yellow {background-position:-96px 0;}
.color .yellow:hover{background-position:-96px -32px;}
.color .red {background-position:-128px 0;}
.color .red:hover{background-position:-128px -32px;}
.color .purple {background-position:-160px 0;}
.color .purple:hover{background-position:-160px -32px;}


.pagination {text-align:center;}
.pagination li a {height: 38px;

    padding: 8px 14px;
    border: 1px solid #eee;
    text-decoration: none;
    margin: 0px 3px 10px 3px;
    color: #a9a9a9;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;}

	@media (min-width: 768px) {
.pagination {display:block; width:560px; margin:0px auto;}
	}

.template_type a {float:left;display:block;width:180px; padding-left:10px;  background:url(../images/base/dot_gray.gif) left center no-repeat;}


#focus {  clear: both;  }
    #focus ul { clear: both; padding: 0px; margin: 0px; }
        #focus ul li {     padding: 0px; margin: 0px; text-align:center;}




#list-view li {

}

.list-view {
float:left; 
width:23%; 

text-align:center;  
margin:0 0px 5px; 
padding:0px  1%; 
vertical-align:100%;
overflow:hidden;
} 	

.img-wrap {
	margin:0 auto;   
	width:90%;  
	height:140px;
	overflow:hidden; 
	/*非IE的主流浏览器识别的垂直居中的方法*/
	vertical-align:middle;
	/*设置水平居中*/                
	display: table-cell; 
	text-align:center;							
	/* 针对IE的Hack */
	*display: block;
	*font-size: 139px;/*约为高度的0.873，200*0.873 约为175*/
	*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
	padding:5%;
 border:1px solid #ddd;
	background:url(../images/template/pic_bg.gif) left top no-repeat;
	overflow:hidden;
}

.img-wrap  a {
  display:block;
  height:160px;
  overflow:hidden; 
}

.img-wrap img {
  display:block;
  width:220px;
  width:80%\0;
  _width:220px;
  margin:0px auto;
  vertical-align:middle;
   /*非IE的主流浏览器识别的垂直居中的方法*/
  display: table-cell;
  vertical-align:middle;
  /*设置水平居中*/
  text-align:center;
  /* 针对IE的Hack */
  *display: block;
  *font-size: 220px;/*约为高度的0.873，200*0.873 约为175*/
  *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
  overflow:hidden;
  }


#list-view .list-view h5 img {border:none;width:32px;height:12px;margin-left:10px;}
#list-view .list-view h5 {clear:both; height:22px;line-height:22px;margin:0px; padding:0px; overflow:hidden;clear:both;font-weight:normal;font-size:14px;}
#list-view .list-view h5 a.green {color:#209B04;}

.template-pic-visual {position: absolute; left:15%; top:5%; padding:8px 5px; background:#3385ff; color:#fff;font-size:12px;z-index:999;border-radius: 3px; font-size:14px;
-moz-box-shadow:3px 3px 8px #999;
-webkit-box-shadow:3px 3px 8px #999;
box-shadow:3px 3px 8px #999;}


.photo { }
.photo a {position:relative;display:block; overflow:hidden;padding:25px 15px; height:0px; }

.photo_img { overflow:hidden;}
.photo a span {display:none;cursor:hand; text-align:left;font:bold 16px/30px Verdana, Arial;}
.photo a:hover span {margin:0 2px;padding:0px 10px;height:50px; line-height:50px;background:#555;display:block;position:absolute;bottom:2px;left:0;right:0;color:#fff;filter:alpha(opacity=56);-moz-opacity:0.8;opacity:0.8;}
.photo img {}
.photo_img img { position:relative;width:100%; transition: 12000ms;}





.template-iphone {position:absolute;right:0;bottom:0;width:150px;height:300px; padding:34px 7px 0px 7px;background:url(../images/template/iphone.png) left top no-repeat;z-index:999;overflow:hidden;}
.template-iphone div {height:251px;}


.mobile_photo {float:left; width:192px; height:454px; background:url(../images/template/mobile_photo_bg.jpg) left top no-repeat;  margin:10px 15px; overflow:hidden;}
.mobile_photo a {position:relative;display:block; width:192px; height:390px;  padding:58px 20px;  overflow:hidden;}
.mobile_photo_img {position:absolute; height:278px; overflow:hidden; }
.mobile_photo a:hover {text-decoration:none;overflow:hidden;background:url(../images/template/mobile_photo_hover.jpg) left top no-repeat;  }
.mobile_photo a span {display:none;cursor:hand;text-align:center;height:32px;line-height:32px;text-align:center;}
.mobile_photo a:hover span {width:160px;background:#2769B5;display:block;position:absolute;bottom:56px;left:20px;color:#fff;filter:alpha(opacity=56);-moz-opacity:0.8;opacity:0.8;}overflow:hidden;
.mobile_photo img {width:190px;overflow:hidden;}
.mobile_white {position:absolute;top:0;left:0;width:198px; height:366px; background:url(../images/template/mobile_photo_bg_w.png) 9px 11px no-repeat; }
.mobile_photo_img img {position:relative;width:159px;transition: 12000ms;}

.con{position}






#mobile_show {width:300px;height:700px; margin:auto 0px; padding:88px 10px 0px 12px; overflow:hidden; background:url(../images/template/mobile.jpg) left top no-repeat; }
.mobile_show {height:452px;margin:0px; padding:0px; position:relative;overflow:hidden;border: 1px solid #eee;}
.mobile_show_box {position:absolute; left:0; top:0; right:-17px; bottom:0; overflow-x:hidden; overflow-y:scroll;}
.mobile_show img {width:264px; }

.buy_box strong { font-weight:bold; color:#000;}

.buy_box,.buy_box a {color:#555;}
.buy_box h5 {clear:both; height:37px;line-height:37px; padding-left:55px; font-size:20px; font-weight:bold;}

.buy_box p {clear:both; line-height:40px; padding-left:55px; }
.buy_box p span {float:left;}
.buy_box p strong {padding:0px 5px; color:#555; font-size:14px; font-weight:bold; text-decoration:underline;}



.buy_box .buy_btn,.buy_box .buy_reg,.buy_box .buy_b,.buy_box .buy_f {display:block; height:40px; line-height:40px;  padding:0px 50px 0px 30px; background:url(../images/buy/buy_btn.gif) right center no-repeat;  font-size:18px; color:white; border-radius:2px;}
.buy_box .buy_reg { background:url(../images/buy/buy_reg.gif) right center no-repeat; }
.buy_box .buy_b { background:url(../images/buy/buy_b.gif) right center no-repeat; }
.buy_box .buy_f { background:url(../images/buy/buy_f.gif) right center no-repeat; }

.buy_box .q {font-size:22px; font-weight:bold; color:#4A90D8; }


.news_list {padding:30px; border:1px solid #eee; border-top:0px;  font-size:16px; }
.news_list li {line-height:50px; border-bottom:1px dotted #ccc;background:url(../images/base/icon01.gif) left 18px no-repeat;padding-left:15px;}




.divScrollBar{background-color:#ddd;position:absolute;opacity:0.5; filter:Alpha(opacity=50);}
.divScrollBar:hover{opacity:1; filter:Alpha(opacity=100);}

.center {width:192px; margin:0px auto;}




.btn-slide { display: block; margin-left:15px;} 
.vip-free-btn {color:#fff;background:#FF4961;border-color:#FF4961;}
.template-type-visual,
.template-type-responsive,
.template-type-wap,
.template-type-pc,
.template-type,
.template-type-pc a
{float:left;}

.template-type-wap {margin:0px 25px;}
.template-type-visual,.template-type-pc {margin-right:25px;}

#template-type-box {  clear:both;  padding-top:55px; display: none; }
@media (max-width: 768px) {
min-height: 688px;
}


#projectlist .projectitem .projectitem_content {
	display: block;
	overflow: hidden;
	padding:30px;
}

@media (max-width: 768px) {
#projectlist .projectitem .projectitem_content {padding:30px 0px;}
.template-type-pc {margin:0px;}
.template-type {clear:both; margin-top:15px; }
}

#projectlist .projectitem .projectitem_content img {
	float: none;
	height: auto;
	max-height:100%;
	max-width:500px;
	transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
@media (max-width: 768px) {
#projectlist .projectitem .projectitem_content img {
max-width:100%;
}
}


#projectlist .pro-mask a.preview, #projectlist .pro-mask a.ontrial, #projectlist .pro-mask a.pro-details { width: 31%; border: 1px solid #198DDD; border-radius: 3px; height: auto; padding: 0px; text-align: center; line-height: 30px; display: inline-block; background: #198DDD; margin: 0; color: #fff; font-size: 12px; transition: all 0.3s ease-out 0s; }
#projectlist .pro-mask a.preview { background-color: #26c79d; border: 1px solid #26c79d; }
#projectlist .pro-mask a.preview:hover { background-color: #00C0FF; border: 1px solid #00C0FF; }
#projectlist .pro-mask a.pro-details { background-color: #fff; border: 1px solid #00C0FF; color: #00C0FF; }
#projectlist .pro-mask a.pro-details:hover { background-color: #00C0FF; color: #fff; }
#projectlist .pro-mask a.ontrial:hover { background-color: #00C0FF; border: 1px solid #00C0FF; }
#projectlist .pro-mask { width: 70%; border-radius: 3px; padding: 1.2% 0; position: absolute; top: 50%; left: 50%; margin-left: -35%; margin-top: 0px; background: rgba(255, 255, 255, 1); opacity: 0; transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.4); }
#projectlist .projectitem .project_img:hover .pro-mask { opacity: 1; }

.project_img { min-height: 325px; margin-bottom:30px; text-align:center;}
@media (max-width: 768px) {
.project_img {min-height:220px; margin-bottom:0px;}
}

/*
.project_img { height:340px; overflow:hidden; margin-bottom:30px; }
@media (max-width: 768px) {
.project_img {height:200px;}
}
*/
#projectlist .pro-mask a { display: none; }
#projectlist .projectitem div.project_info p.title { color: #505050; font-size: 18px; font-family: "HELVETICANEUELTPRO-THEX", "Arial", "微软雅黑"; transition: all ease-out .3s;line-height:20px; }
#projectlist .projectitem .projectitem_content:hover img { transform: scale(1.08, 1.08); -moz-transform: scale(1.08, 1.08); -webkit-transform: scale(1.08, 1.08); -o-transform: scale(1.08, 1.08); line-height:20px; }

#projectlist .projectitem { line-height:12px; text-align:center; }
p.projectitem-subtitle { color:#999; font-size:12px; }


.hide {display:none;}

.projectitem-title,.projectitem-subtitle {position:relative; z-index:999;}

@media (max-width: 468px) {
.btn-slide {margin-left:0px;}
.search-input {margin:10px 0px;}
}