@charset "utf-8";
body { width:100%; margin: 0; background: #f2f7fd; font-family: "苹方";}
*{ margin: 0; padding: 0; list-style: none;}

.banner{ margin-top:5rem;  height: 33.125rem;}
.banner .owl-theme .owl-controls{ margin-top:-3rem; height:25rem; }

.banner .thumbnail{color: white; padding-top: 6rem;}
.banner .thumbnail h1{font-size: 3rem; font-weight: bolder; }
.banner .thumbnail p{font-size:1.5rem; line-height: 1.5; color: rgba(225,225,225,.9); margin-bottom: 1.5rem;}
.banner .thumbnail .btn_link{display: block; margin-top: 2.5rem; width: 8rem; line-height: 2.5rem; color:white; border-radius: 4px;
background-image: linear-gradient(to right, #4285ff , #5a55e8); text-align: center; font-size:1.25rem;}
	
.banner .item{height: 33.125rem;}
.banner .item.pageTemp01{background-color: #131681;  background: url("../../images/template/banner.png") no-repeat center;}

.conterbox { width:1200px; margin: 0 auto; clear: both; }
.mainbox { float:left; width: 100%; background: #fff; margin: 30px 0 40px; padding: 20px 0 30px;}

.template_list { float:left; width:100%; padding-left: 24px; box-sizing:border-box; }
.template_list li { float:left; margin-right:10px; margin-top: 10px; font-size: 14px; line-height: 26px; color: #333; height: 28px; border-radius: 5px; background: #f2f2f2; }
.template_list li a { text-decoration: none; color: #333; display: block; ; padding: 0 10px;}
.template_list li.flnow { background: #2b74e3; color: #fff;}
.template_list li.flnow a { color: #fff;}

.template_main { float:left; width: 100%;}
.template_main li { float:left; width: 270px; margin: 24px 0 0 24px;}
/*.template_main li .tempimg { float:left; width: 270px; height:180px; border-radius: 6px; background: #eee; }*/
.template_main li .tempimg { float:left; width: 270px; height:370px; border-radius: 6px; background: #fff; overflow: hidden; position: relative; }
.template_main li .tempimg .look { position: absolute; z-index:8; left: 50%; bottom: 0; margin-left: -46px; width: 92px; height: 32px;  background:url("../../images/template/zoom.png") no-repeat 0 0; z-index: 5; opacity: .9;}
.template_main li .tempimg .look:hover{opacity: 1;}
.template_main li .tempimg img{float:left;}

.template_main li .temptxt { float:left; width:270px; height: 22px; margin-top: 8px; line-height: 22px;} 
.template_main li .temptxt .temptit {float:left; font-size:16px; font-weight: normal; margin-left: 2px; color: #000;}
.template_main li .temptxt .temptit span { float:left; margin-top: 2px; margin-right: 2px;}
.template_main li .temptxt .biaoxian { float:right; height: 22px; padding: 0 6px; border-right: 4px; background: #f2f7fd; font-size: 14px; font-weight: normal; color: #555;}

.template_main li a:hover .temptxt .temptit { color:#005bff}
.template_main li .tempimg:hover { opacity: 1}

footer { float:left; width:100%;}


@media (min-width:906px) and (max-width:1199px){
	.conterbox { width:906px;}
	.mainbox { margin: 30px 0; }
}

@media (min-width:612px) and (max-width:905px){
	.conterbox { width:612px;}
	.mainbox { margin: 30px 0;}
}

@media (min-width:318px) and (max-width:611px){
	.conterbox { width:318px;}
	.mainbox { margin: 30px 0;}
	
	.conterbox { width:96%;}
	.mainbox { margin: 20px 0 30px; padding: 10px 0;}
	.template_list { padding-left: 4%;}
	.template_main li {float: left; width:44%; margin-left:4%; margin-top: 10px;}
	.template_main li .tempimg { width: 100%; height: auto;}
	.template_main li .tempimg img { max-width: 100%; height: auto;}
	.template_main li .temptxt { width:100%; margin-top:4px;}
	.template_main li .temptxt .biaoxian { display: none;}
}

@media only screen and (max-width: 40em) {
	    .banner{margin-top: 3.75rem;}
	    .banner,.banner .item{height: 18.75rem !important; text-align: left;}
        .banner .thumbnail{padding: 1rem 0 0 0.5rem; text-align: center;}
		.banner .item.pageTemp01{background-color: #131681;  background-size:auto 18.75rem; background-position: 27% 110%;}
}