﻿@charset "utf-8";
@import "page.css";

#mweb_why{width:100%;padding:80px 0}
#mweb_why .list .img{width:40%; text-align:right}
#mweb_why .list .img img{width:90%}
#mweb_why .list .text{width:50%;padding-top:10px}
#mweb_why .list .text .title big{font-size:30px;display:block}
#mweb_why .list .text .title small{font-size:14px;display:block;color:#999;margin-top:10px}
#mweb_why .list .text .tisp{padding:20px 0}
#mweb_why .list .text .info{padding:20px 0}
#mweb_why .list .text .info p{padding:10px 0}
#mweb_why .list .text .info p  i{margin-right:10px;font-size:24px;line-height:30px;vertical-align:middle}
#mweb_why .list .text .more_btn{text-align:left}

#mweb_web{width:100%;padding:80px 0;background:#f8f8f8}
#mweb_web .list{margin-top:50px;}
#mweb_web .list ul li{float:left;width:50%;background:#fff}
#mweb_web .list ul li .img{float:left;width:50%;overflow:hidden}
#mweb_web .list ul li .img img{width:100%}
#mweb_web .list ul li .text{float:right;width:50%;padding:60px 30px 0}
#mweb_web .list ul li .text big{display:block;font-size:18px}
#mweb_web .list ul li .text small{display:block;font-size:14px;line-height:24px;color:#999}
#mweb_web .list ul li:nth-child(3) .img{float:right}
#mweb_web .list ul li:nth-child(3) .text{float:left}
#mweb_web .list ul li:nth-child(4) .img{float:right}
#mweb_web .list ul li:nth-child(4) .text{float:left}

#mweb_gn{width:100%;padding:80px 0;}
#mweb_gn .wrap{overflow:inherit}
#mweb_gn .list{margin-top:20px}
#mweb_gn .list ul li{float:left;width:calc((100% - 90px) / 4);margin-right:30px;border:1px solid #eee;padding:20px ;margin-top:30px}
#mweb_gn .list ul li:nth-child(4n){margin-right:0}
#mweb_gn .list ul li .icon{float:left;width:20% ;padding-top:10px;}
#mweb_gn .list ul li .icon i{font-size:36px;color:#888}
#mweb_gn .list ul li .info big{display:block;font-size:18px}
#mweb_gn .list ul li .info small{display:block;font-size:14px;color:#999;line-height:24px;height:72px;overflow:hidden}
#mweb_gn .list ul li:hover{border:1px solid #3c6ef0;}
#mweb_gn .list ul li:hover{-webkit-transform:translatey(-10px);-ms-transform:translatey(-10px);-o-transform:translatey(-10px);transform:translatey(-10px);box-shadow:0px 0px 12px 0px rgba(0,0,0,0.06);}
#mweb_gn .list ul li:hover .icon i{color:#3c6ef0}

#mweb_td{width:100%;padding:80px 0;}
#mweb_td .list{margin-top:50px}
#mweb_td .list ul li{float:left;width:calc((100% - 120px) / 5);background:#f8f8f8;margin-right:30px}
#mweb_td .list ul li:last-child{margin-right:0}
#mweb_td .list ul li .img{overflow:hidden}
#mweb_td .list ul li .img img{width:100%}
#mweb_td .list ul li .info{padding:20px;}
#mweb_td .list ul li .info big{display:block;font-size:18px}
#mweb_td .list ul li .info small{display:block;font-size:14px;color:#999;line-height:24px;height:100px;margin-top:10px}

@media (max-width:800px){
	#mweb_why{padding:.8rem 0}
	#mweb_why .list .img{float:inherit;width:100%}
	#mweb_why .list .img img{width:100%}
	#mweb_why .list .text{float:inherit;width:100%;padding-top:.3rem}
	#mweb_why .list .text .title big{font-size:.3rem;}
	#mweb_why .list .text .title small{font-size:.23rem;margin-top:.1rem}
	#mweb_why .list .text .tisp{padding:.2rem 0}
	#mweb_why .list .text .info{padding:.2rem 0}
	#mweb_why .list .text .info p{padding:.1rem 0}
	#mweb_why .list .text .info p  i{margin-right:.1rem;font-size:.3rem;line-height:.36rem;}	
	
	#mweb_web{padding:.8rem 0;}
	#mweb_web .list{margin-top:.2rem;}
	#mweb_web .list ul li{float:inherit;width:100%;background:#fff;margin-top:.3rem}
	#mweb_web .list ul li .img{float:inherit;width:100%}
	#mweb_web .list ul li .img img{width:100%}
	#mweb_web .list ul li .text{float:inherit;width:100%;padding:.3rem}
	#mweb_web .list ul li .text big{ font-size:.28rem}
	#mweb_web .list ul li .text small{font-size:.23rem;line-height:.36rem;}
	
	#mweb_gn{padding:.8rem 0;}
	#mweb_gn .list{margin-top:.2rem}
	#mweb_gn .list ul li{float:inherit;width:100%;margin-right:0;padding:.2rem ;margin-top:.3rem}
	#mweb_gn .list ul li .icon{float:left;padding-top:.1rem;}
	#mweb_gn .list ul li .icon i{font-size:.5rem;}
	#mweb_gn .list ul li .info big{font-size:.28rem}
	#mweb_gn .list ul li .info small{font-size:.23rem;line-height:.36rem;height:auto;}

	#mweb_td{padding:.8rem 0;}
	#mweb_td .list{margin-top:.2rem}
	#mweb_td .list ul li{float:inherit;width:100%;margin-right:0;margin-top:.3rem}
	#mweb_td .list ul li .info{padding:.3rem;}
	#mweb_td .list ul li .info big{ font-size:.28rem}
	#mweb_td .list ul li .info small{;font-size:.23rem;line-height:.36rem;height:auto;margin-top:.1rem}

}