@charset "utf-8";
html, body{ width: 100%; height: auto; }
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; list-style: none; }
*{margin: 0; padding: 0; -moz-box-sizing: border-box; /* Firefox */ -webkit-box-sizing: border-box; /* Safari */ box-sizing: border-box;}
a,button{ text-decoration: none; color: #333333; -webkit-font-smoothing: antialiased; }
body{ font-family: Arial, sans-serif,Varela Round; font-size: 14px; line-height: 25px; color: #333333; margin: 0 auto; -webkit-font-smoothing: none; /*chrome、safari*/ -moz-osx-font-smoothing: grayscale;/*firefox*/}
img{ display:block; padding: 0; margin: 0; max-width:100%; }
.clear{clear: both; height: 0;}
.clearfix:after{ content: "";clear: both; height: 0; display: block; }
.fl{float: left;}
.fr{float: right;}
.sk-body-bj{ background: #f2f3f7; padding-top: 10px; border-image: -webkit-linear-gradient( #f2f3f7, #ffffff) 1 1; }

.sk-head{ width: 100%; box-shadow: 0 2px 10px #dddddd; height: 80px; display: block; background: #ffffff; padding: 10px 20px; position: relative; }
.sk-hover-head{ position: fixed; left: 0; top: 0; width: 100%; z-index: 999; height: 60px; }
.sk-head-logo{ max-width: 90%; margin: auto; height: 100%;}
.sk-head-logo .sk-top-logo{ display: inline-block; height: 100%; }
.sk-head-logo .sk-top-logo img{ height: 100%; }
.sk-head-logo .sk-top-logo a{ display: block; height: 100%; }

.sk-dispaly-ul{ max-width: 95%; margin: auto; }
.sk-dispaly-li{ width: 100%; margin: 30px 0 0 0; display: inline-block; border:1px solid #dddddd; position: relative; }
.sk-dispaly-li .sk-dispaly-img{ width: 100%; height: 250px; overflow: hidden; display: block; }
.sk-dispaly-li .sk-dispaly-img img{ width: 100%; height: auto; display: block; position: relative; transform: translateY(0px); }

.sk-dispaly-li .sk-dispaly-p{ background-color:#ffffff;padding:12px;border-top:1px solid #eaeaea; font-size: 16px; height: auto; overflow: hidden; }
.sk-dispaly-li .sk-dispaly-btn{ text-align: center; background-color:#ffffff; border-top:1px solid rgba(244,244,244,1); padding:10px 15px 20px 15px; }
.sk-dispaly-li .sk-dispaly-btn i{ margin-right: 8px; }
.sk-dispaly-li .sk-dispaly-btn-1,.sk-dispaly-li .sk-dispaly-btn-2,.sk-dispaly-li .sk-dispaly-btn-3{ display: block; text-align: center; font-size: 12px; cursor:pointer; font-family:Microsoft YaHei; }
.sk-dispaly-li .sk-dispaly-btn-1,.sk-dispaly-li .sk-dispaly-btn-2{ width: 30%; padding:3px 0px; float: left; }
.sk-dispaly-li .sk-dispaly-btn-1{ background-color: #333; border:1px solid #333333; color:#ffffff; width: auto; padding: 3px 12px; }
.sk-dispaly-li .sk-dispaly-btn-2{ background-color: #fff; border:1px solid #e5e5e5; color:#494949; margin-left:5%;  }
.sk-dispaly-li .sk-dispaly-btn-3{ background-color: #ff6a00; border:1px solid #ff6a00; color:#ffffff; width: auto; padding:3px 5px; float: right; }

.sk-dispaly-li:hover{ box-shadow: 0 0 10px #cccccc; }
.sk-dispaly-li .sk-dispaly-img img:hover { transition: all 3s linear 0s; }
.sk-dispaly-li .sk-dispaly-btn-1:hover{ background-color: #585858!important; border-color: #585858!important; color: #fff!important; }
.sk-dispaly-li .sk-dispaly-btn-2:hover{ border-color: #e44e1e!important; background: #e44e1e; color: #ffffff; }
.sk-dispaly-li .sk-dispaly-btn-3:hover{ border-color: #666!important; background: #666!important; }

.sk-addnews-gif{ position: absolute; bottom: 10px; right: 10px; z-index: 10; }
.sk-addnews-gif img{ display: block; width: auto; max-height: 60px;  }

.sk-col-box{ min-height: 1px; padding-right: 15px; padding-left: 15px; float: left; }

.sk-icons{ position: relative; }
.sk-phone-demo{width:372px;height:757px;position:fixed;top:50%;left:50%;margin-left:-186px;margin-top:-379px;background:url(../images/phone_bg_big.png) no-repeat;display:none;z-index:10001;}
.sk-phone-demo i{ width:35px; height:35px; right:-40px; top:0; background:url(../images/icons.png) no-repeat; background-position:-254px -35px; cursor:pointer; position: absolute; display: inline-block;}
.sk-phone-demo iframe{ width:337px; height:575px; margin-left:19px; margin-top:91px; float:left; border:0; background:url(../images/loading.gif) center no-repeat;}

.sk-foot-bottom { text-align: left; padding-bottom: 20px; }
.sk-foot-bottom .tpl-link{ display: block; font-size: 14px; margin-bottom: 10px; padding: 0 20px; }
.sk-foot-bottom .tpl-link span,.sk-foot-bottom .tpl-link a{ margin-right: 12px; display: inline-block; }
.sk-foot-bottom .tpl-foot{ padding: 20px 20px 10px; border-top: 1px solid #dddddd; color: #999999; background: #ffffff; }
.sk-foot-bottom a:hover{ color: #e24310; }

.menu-nav-span{ display: block; margin-right: 60px; margin-top: 10px; width: 42px; height: 42px; border: 1px solid #ccc; border-radius: 3px; cursor: pointer; text-align: center; }
.menu-nav-span .fa{ display: block; width: 100%; height: 100%; font-size: 20px; color: #333; line-height: 42px; transition: all .8s; }
.menu-nav-span:hover .fa{ background: #fe5b0a; color: #fff; }
.menu-nav-span:hover{ border-color: #fe5b0a; }

.sk-hover-head .menu-nav-span{ margin-top: 0; }

/*模板分类*/
.header-nav{ width: 100%; height: 100%; overflow-y:auto; background: rgba(0,0,0,.8); z-index: 1001; padding-top: 120px; }
.header-nav-ul { max-width: 1200px; margin: 0 auto;  }
.header-nav-ul .header-nav-li{ float: left; width: 20%; text-align: center; padding: 0px 10px; margin-bottom: 15px; transition: all .8s; }
.header-nav-ul .header-nav-li .nav-a{ cursor: pointer; border: 1px solid #dddddd; background: rgba(255,255,255,.5); font-size: 14px; color: #fff; display: block; height: 45px; line-height: 45px; border-radius: 2px; }
.header-nav-ul .header-nav-li .nav-a:hover{ background-color: #fe610d; border-color: #fe610d; }

.menu-nav-close{ width: 42px; height: 42px; display: block; position: absolute;right: 30px; top: 50px; z-index: 1002; cursor:pointer; text-align: center; }
.menu-nav-close .fa{ display: block; width: 100%; height: 100%; font-size: 20px; color: #fff; line-height: 42px; transition: all .8s; }

.nav-pop-bd{ position: fixed; left: 0; top: 0; width: 100%; height: 100% !important; background: rgba(0,0,0,.7); display: none; overflow: hidden; z-index: 1000; }

.tpl-head-nav{ float: right; height: 100%; }
.tpl-head-nav .tpl-head-nav-a{ display: block; float: left; margin-right: 25px; padding: 0 10px; }
.tpl-head-nav .tpl-head-nav-class{ display: block; float: left; padding: 0 10px; }
.tpl-head-nav .tpl-head-nav-class .tpl-head-nav-span{ cursor: pointer; display: block; }
.tpl-head-nav .tpl-head-nav-class .tpl-head-nav-span,.tpl-head-nav .tpl-head-nav-a{ line-height: 60px; height: 60px; }
.tpl-head-nav-class .tpl-filter-div{ display: none; position: absolute; background: #fdfdfd; max-width: 800px; width: 96%; right: 2%; z-index: 99; box-shadow: 0px 3px 10px #999; }
.tpl-head-nav-class .tpl-filter-div .tpl-filter-title{ padding: 12px 15px 0; }
.tpl-head-nav-class .tpl-filter-div .tpl-filter-box{ display: block; padding: 12px 15px; }
.tpl-head-nav-class .tpl-filter-div .tpl-filter-a{ border: 1px solid #dddddd; padding: 3px 15px; font-size: 13px; color: #333; display: inline-block; border-radius: 20px; margin-right: 10px; margin-bottom: 10px; }
.tpl-head-nav-class .tpl-filter-div .tpl-filter-a:hover{ background: #e34a15; border-color: #e34a15; color: #ffffff; transition: all .8s; }

.sk-hover-head .tpl-head-nav .tpl-head-nav-class .tpl-head-nav-span,.sk-hover-head .tpl-head-nav .tpl-head-nav-a{ line-height: 40px; height: 40px; }

.tpl-head-nav .tpl-head-nav-class:hover .tpl-filter-div{ display: block; }

/*大于1501px，使用于横屏ipad*/
@media screen and (min-width: 1501px){
	.sk .sk-col-box{ width: 20%; }
}

/*小于1500px，大于1201px，使用于横屏ipad*/
@media screen and (max-width:1500px ) and (min-width: 1201px){
	.sk .sk-col-box{ width: 25%; }
}

/*小于1200px，大于993px，使用于横屏ipad*/
@media screen and (max-width:1200px ) and (min-width: 993px){
	.sk .sk-col-box{ width: 33.3333%; }
}

/*小于992px，大于641px，使用于竖屏ipad*/
@media screen and (max-width: 992px){
	.sk .sk-col-box{ width: 50%; }
	.sk-hover-head .tpl-head-nav .tpl-head-nav-class .tpl-head-nav-span,.sk-hover-head .tpl-head-nav .tpl-head-nav-a{ line-height: 30px; height: 30px; }
	.tpl-head-nav .tpl-head-nav-a{ margin-right: 12px; }
}

/*小于640px，大于320px，使用于横屏手机*/
@media screen and (max-width:640px) and (min-width: 320px){
	.sk .sk-col-box{ width: 100%; }
}
@media screen and (max-width:1024px){
	.sk-hover-head{ height: 40px; padding: 5px 0; }
	.sk-dispaly-li .sk-dispaly-btn-2{ display: none; }
	.sk-dispaly-li .sk-dispaly-btn { text-align: right; }
	.sk-dispaly-li .sk-dispaly-btn-1{ width: auto; padding: 3px 20px; }
	.sk-hover-head .sk-head-logo .sk-top-logo{ margin-left: 15px; }
	.tpl-head-nav .tpl-head-nav-class{ margin-right: 10px; }
}

/*分类导航*/
@media screen and (max-width:1200px ){
	.header-nav-ul .header-nav-li{ width: 33.3333%; }
	.menu-nav-span{ width: 32px; height: 32px; }
	.menu-nav-span .fa{ font-size: 16px; line-height: 32px; }
}
@media screen and (max-width:640px ){
	.header-nav-ul .header-nav-li{ width: 50%; }
	.menu-nav-close{ top: 10px; right: 10px; }
	.header-nav{ padding-top:70px; }
	.tpl-head-nav .tpl-head-nav-a{ display: none; }
	.tpl-head-nav-class .tpl-filter-div{ max-height: 450px; overflow-y: auto; }
}

@media screen and (max-width:480px ){
	.header-nav-ul .header-nav-li{ width: 75%; float: none; margin: 0 auto 15px; }
}