/*
   index.css
   <project>
   
   Created by wucj on 2018-05-16.
   https://segmentfault.com/u/shouzijiangs
   Copyright 2018 wucj. All rights reserved.
*/

body{ background-color: #ffffff;}

.layout1{ height: 742px;}
.layout1 .swiper-container{}
.layout1 .move{ position: absolute; top: 218px; width: 1200px; margin: 0 auto; left: 0; right: 0; color: #f4f5f7;}
.layout1 .move i,
.layout1 .move a{ display: block; color: #f4f5f7;}
.layout1 .move a.logo{}
.layout1 .move a.btn{ width: 160px; height: 42px; line-height: 42px; text-align: center; background: #12a7eb; border-radius: 20px; position: relative;}
.layout1 .move a.btn:after{ content: ''; background: url(../images/icon.png) 0 -15px no-repeat; width: 9px; height: 15px; position: absolute; right: 36px; top: 14px;}
.layout1 .move h3{ font-size: 36px; line-height: 88px; padding-top: 12px;}
.layout1 .move p{ padding-bottom: 64px; padding-left: 3px;}
.layout1_btn{ }
.layout1_btn ul{ position: absolute; top: -45px; z-index: 2; right: 0; border-radius: 5px; overflow: hidden;}
.layout1_btn ul li{ float: left; position: relative; cursor: pointer;}
.layout1_btn ul li.active:after{ display: none;}
.layout1_btn ul li:after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6);}
.layout1_btn ul li img{ width: 139px; height: 90px; display: block;}


.com_title{ height: 69px; line-height: 69px;}
.com_title h3{ font-weight: normal; font-size: 30px;}
.com_title h3 i{ color: #55c916;}
.com_title h3 i.i1{ color: #ec3825;}
.com_title h3 span{ color: #d7d7d7; font-size: 30px; font-family: 'Aharoni'; padding-left: 16px;}

.bg{ height: 1342px; background: url(../images/bg.jpg) center top no-repeat;}

.layout2{ padding-top: 0px;}
.layout2 .swiper-container{padding: 0 4px; margin: 0 -4px;}
.layout2 .swiper-container ul{ padding:10px 0 54px 4px;}
.layout2 .swiper-container ul li{float: left;margin-right: 24px;position: relative;}
.layout2 .swiper-container ul li:last-child{ margin: 0;}
.layout2 .swiper-container ul li img{ width: 100%; height: 100%; position: absolute; border-radius: 5px;}
.layout2 .swiper-container ul li p{ position: absolute; left: 16px; bottom: 26px; font-size: 14px; font-weight: bold; color: #ffffff;}
.layout2 .swiper-container ul li a{ display: block; width: 280px;height: 222px;}
.layout2 .swiper-container ul li a:after{content: '';position: absolute; top: 0; left: 50%; margin-left: -56px; width: 118px;height: 54px; background: url(../images/icon.png) 0 -95px no-repeat; opacity: 0; top: 224px; 
	transition:.3s all;
	-webkit-transition:.3s all;
}
.layout2 .swiper-container ul li a:hover{box-shadow: 0 2px 10px 0 #dee4e8;border-radius: 3px;}
.layout2 .swiper-container ul li a:hover:after{ top: 194px; opacity: 1;}
.layout2 .swiper-button-prev,
.layout2 .swiper-button-next{ width: 65px; height: 104px; }
.layout2 .swiper-button-prev{ left: -89px; background-position: -122px 0;}
.layout2 .swiper-button-next{ right: -89px; background-position: -191px 0;}
.layout2 .swiper-pagination{ position: absolute; right:103px; top: 35px;}
.layout2 .swiper-pagination-bullet{ margin-right: 10px; background: #d7d7d7; opacity: 1;}
.layout2 .swiper-pagination-bullet-active{ background: #55c916;}
.layout2 .more{ width: 98px; height: 28px; line-height: 28px; border: 1px solid #cacaca; color: #bbbbbb; text-align: center; display: block; border-radius: 15px; position: absolute; right: 3px; top: 25px;}
.layout2 .more:hover{ color: #fff; background: #55c916; border-color: #55c916;}

.layout3{}
.layout3 .cont{}
.layout3 .cont .cont_l{ width: 1200px; overflow: hidden; padding: 0 9px; margin: 0 -9px; padding-top: 10px;}
.layout3 .cont .cont_l ul{ width: 1300px; }
.layout3 .cont .cont_l ul li{ background: #ffffff; margin-right: 22px; margin-bottom: 20px; float: left;}
.layout3 .cont .cont_l ul li a{ display: block; width: 283px; height: 295px; border-radius: 5px; overflow: hidden;}
.layout3 .cont .cont_l ul li a:hover{box-shadow: 0 2px 10px 0 #dee4e8;border-radius: 3px;}
.layout3 .cont .cont_l ul li a:hover i{ background-position: -32px -34px;}
.layout3 .cont .cont_l ul li a:hover img{
	transform:scale(1.4);
	-webkit-transform:scale(1.4);
}
.layout3 .cont .cont_l ul li .img{ width: 283px; height: 224px; overflow: hidden;}
.layout3 .cont .cont_l ul li .img img{ width: 100%; height: 100%;
	transition: .6s all ease;
	-webkit-transition: .6s all ease;
}
.layout3 .cont .cont_l ul li .txt{ padding-left: 26px; padding-top: 6px; position: relative;}
.layout3 .cont .cont_l ul li .txt h3{ font-size: 16px; font-weight: normal; line-height: 34px;}
.layout3 .cont .cont_l ul li .txt p{ color: #a9a9a9;}
.layout3 .cont .cont_l ul li .txt i{ width: 28px; height: 28px; background-position: 0 -34px; position: absolute; right: 17px; top: 22px;}
.layout3 .cont .cont_r{ background: #ffffff; box-shadow:0 0 4px 0 #e3ebf1;border-radius: 3px; width: 276px; padding: 0 1px; height: 610px; position: relative; margin-top: 10px;}
.layout3 .cont .cont_r .title{ padding-top: 4px; line-height: 44px; color: #8994a4; font-size: 16px; padding-left: 19px; font-weight: normal;}
.layout3 .cont .cont_r ul{ }
.layout3 .cont .cont_r ul li{ position: relative;}
.layout3 .cont .cont_r ul li a{ display: block;}
.layout3 .cont .cont_r ul li a:hover{ background: #f4f9fb;}
.layout3 .cont .cont_r ul li dl{ padding: 24px 0 24px 20px;}
.layout3 .cont .cont_r ul li dl dt{}
.layout3 .cont .cont_r ul li dl dt img{ width: 65px; height: 65px;}
.layout3 .cont .cont_r ul li dl dd{ padding-left: 16px;}
.layout3 .cont .cont_r ul li dl dd h3{ font-size: 16px; font-weight: normal; line-height: 34px;}
.layout3 .cont .cont_r ul li dl dd p{ color: #aeb2b3;}
.layout3 .cont .cont_r ul li i{ width: 12px; height: 22px; background-position: -64px -34px; position: absolute; right: 17px; top: 50%; margin-top: -11px;}
.layout3 .cont .cont_r .more{ width: 232px; height: 50px; line-height: 50px; background: #c5ced8; text-align: center; color: #fff; display: block; margin:0 auto; border-radius: 5px; position: absolute; bottom: 20px; left: 0; right: 0;}
.layout3 .cont .cont_r .more:hover{ background: #f04938;}
.layout3 .cont .cont_r .more i{ width: 14px; height: 14px; background-position: -14px -15px; vertical-align: -2px; margin-right: 14px;}

.layout4{ padding-top: 70px;}
.layout4 ul{}
.layout4 ul li{ float: left; width: 25%;}
.layout4 ul li a{}
.layout4 ul li.li1 a:hover{ color: red;}
.layout4 ul li.li1 a:hover h3{ color: #2a8df6;}
.layout4 ul li.li1 a:hover p{ color: #7cb1f7;}
.layout4 ul li.li1 a:hover dt{ background-position: 0 -256px;}
.layout4 ul li.li2 a:hover{ color: red;}
.layout4 ul li.li2 a:hover h3{ color: #f2714b;}
.layout4 ul li.li2 a:hover p{ color: #dd846e;}
.layout4 ul li.li2 a:hover dt{ background-position: -82px -256px;}
.layout4 ul li.li3 a:hover{ color: red;}
.layout4 ul li.li3 a:hover h3{ color: #3ccf66;}
.layout4 ul li.li3 a:hover p{ color: #6ac583;}
.layout4 ul li.li3 a:hover dt{ background-position: -164px -256px;}
.layout4 ul li.li4 a:hover{ color: red;}
.layout4 ul li.li4 a:hover h3{ color: #e7b552;}
.layout4 ul li.li4 a:hover p{ color: #fec34a;}
.layout4 ul li.li4 a:hover dt{ background-position: -246px -256px;}
.layout4 ul li dl{}
.layout4 ul li dl dt{ float: left; width: 78px; height: 103px; }
.layout4 ul li dl dt.dt1{ background-position: 0 -149px;}
.layout4 ul li dl dt.dt2{ background-position: -82px -149px;}
.layout4 ul li dl dt.dt3{ background-position: -164px -149px;}
.layout4 ul li dl dt.dt4{ background-position: -246px -149px;}
.layout4 ul li dl dd{ float: left; padding-left: 14px;}
.layout4 ul li dl dd h3{ color: #35383d; font-size: 18px; font-weight: normal; line-height: 44px;}
.layout4 ul li dl dd p{ color: #a6aaad;}