/*banner切换的样式*/
/* slide */
.slide-main{position:relative;}
.prev,.next{display:block;width:44px;height:44px;position:absolute;z-index:222;top:267px;overflow:hidden;cursor:pointer;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);_border:1px solid none;}
.prev{left:70px;}
.next{right:70px;}
.prev:hover,.next:hover,.nav-main a:hover,.nav-main a.cur{opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
.item{display:block;width:100%;height:5px;position:absolute;z-index:124;top:540px;left:0;text-align:center;}
.item a{display:inline-block;width:24px;height:5px;margin-right:11px;background:#444;opacity:0.3;-moz-opacity:0.3;filter:alpha(opacity=30);overflow:hidden;}
.item a.cur{background:#fff;}
.slide-box,.slide{display:block;width:100%;height:580px;overflow:hidden;}
.slide-box{position:relative;}
.slide{display:none;height:580px;padding-top:0px;background:#ff6900;position:relative;position:absolute;z-index:8;}
#bgstylea{background:url(/images/banner_1.jpg) top center no-repeat; background-size: cover;}
#bgstyleb{background:url(/images/banner_2.jpg) top center no-repeat; background-size: cover;}
#bgstylec{background:url(/images/banner_3.jpg) top center no-repeat; background-size: cover;}
#bgstyled{background:url(/images/banner_4.jpg) top center no-repeat; background-size: cover;}
.slide a{display:block;width:100%;height:490px;cursor:pointer;}
.obj-a,.obj-b,.obj-c,.obj-d,.obj-e,.obj-f{position:absolute;z-index:9;left:50%;}
.obj-a,.obj-b{width:952px;margin-left:-476px;text-align:center;}
.obj-a{display:block;height:352px;top:130px;}
.obj-b{top:396px;height:100px;}
.obj-c{display:block;top:200px;margin-left:-240px;}
.obj-d{top:228px;height:164px;}

.obj-e{width:466px;height:170px;margin-left:-320px;top:203px;z-index:12;}
.obj-f{width:692px;height:394px;top:408px;margin-left:-120px;}
.obj-c p{width:100px; display:block;font-size:16px;color:#fff;clear:both; border:1px solid #fff; text-align:center; padding:10px 0; margin-top:40px; margin-left:200px;}
.obj-b button{ background:#8bc13c; border:1px solid #8bc13c; color:#fff; padding:10px 14px; color:#fff; border-radius:4px;}
.obj-f button{background:none; border:1px solid #fff; color:#fff; padding:10px 40px; border-radius:40px; font-size:20px;}
.obj-f button:hover{ color:#90c12f; border:1px solid #90c12f;}
.banAnimate .obj-a{display:block;animation-name:baoAni;-webkit-animation:baoAni 0.4s linear 0s normal none;-moz-animation:baoAni 0.4s linear 0s normal none;animation:baoAni 0.4s linear 0s normal none;}
@-webkit-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
@-moz-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
@keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
.banAnimate .obj-b{display:block;animation-name:saAni;-webkit-animation:saAni 0.4s linear 0s normal none;-moz-animation:saAni 0.4s linear 0s normal none;animation:saAni 0.4s linear 0s normal none;}
@-webkit-keyframes saAni{from{opacity:0;-webkit-transform:scale(0,0);} to{opacity:1;-webkit-transform:scale(1,1);} }
@-moz-keyframes saAni{from{opacity:0;-moz-transform:scale(0,0);} to{opacity:1;-moz-transform:scale(1,1);} }
@keyframes saAni{from{opacity:0;transform:scale(0,0);} to{opacity:1;transform:scale(1,1);} }
.watch-code.code-show{display:block;animation-name:scode;-webkit-animation:scode 0.3s linear 0s normal none;-moz-animation:scode 0.3s linear 0s normal none;animation:scode 0.3s linear 0s normal none;}
@-webkit-keyframes scode{from{opacity:0;-webkit-transform:scale(1,0);transform-origin:left bottom;} to{opacity:1;-webkit-transform:scale(1,1); transform-origin: left bottom;} }
@-moz-keyframes scode{from{opacity:0;-moz-transform:scale(1,0); transform-origin:left bottom;} to{opacity:1;-moz-transform:scale(1,1);transform-origin:bottom bottom;} }
@keyframes scode{from{opacity:0;transform:scale(1,0);transform-origin:left bottom;} to{opacity:1;transform:scale(1,1);transform-origin: left bottom;} }
.banAnimate .obj-c,.banAnimate .obj-e{display:block;animation-name:saAnic;-webkit-animation:saAnic 0.3s linear 0s normal none;-moz-animation:saAnic 0.3s linear 0s normal none;animation:saAnic 0.3s linear 0s normal none;}
@-webkit-keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
@-moz-keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
@keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
.banAnimate .obj-d,.banAnimate .obj-f{display:block;animation-name:saAnid;-webkit-animation:saAnid 0.3s linear 0s normal none;-moz-animation:saAnid 0.3s linear 0s normal none;animation:saAnid 0.3s linear 0s normal none;}
@-webkit-keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }
@-moz-keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }
@keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }

/*banner的背景以及上边的文字哈*/
.banner{ height:580px; overflow:hidden; width: 100%; background:url(/images/banner_1.jpg) top center no-repeat; background-size: cover;}
.banner .pic1{ height:580px; overflow:hidden; width: 100%; background:url(/images/banner_2.jpg) center center no-repeat; background-size: cover;}
.banner .pic2{ height:580px; overflow:hidden; width: 100%; background:url(/images/banner_3.jpg) top center no-repeat; background-size: cover;}
.banner .word{ padding-top:180px;position: relative;}
.banner .word h1{ text-align:center; color:#fff; margin-bottom:60px;}
.banner .word ul{ padding-left:0; list-style:none; color:#fff; overflow:hidden; text-align:center; margin-bottom:36px;}
.banner .word ul li{ width:50%; font-size:24px; float:left; text-align:center;}
.banner .word ul li .point{ margin-right:10px; }
.banner .word p{ clear:both; text-align:center;}
.banner .word p .btn{ text-align:center; display:inline-block; border:1px solid #fff; color:#fff; padding:10px 40px; border-radius:40px; font-size:20px;}
.banner .word p .btn:hover{ color:#90c12f; border:1px solid #90c12f;}
@media (max-width: 768px)
{
.banner{ height:370px; background:url(../../images/diy/banner_4.png) top center no-repeat; background-size:cover;}
/*.banner .pic1{ height:370px; overflow:hidden; width: 100%; background:url(../../images/diy/frontpage-slide-3.jpg) top center no-repeat; background-size: cover;}
.banner .pic2{ height:370px; overflow:hidden; width: 100%; background:url(../../images/diy/frontpage-slide-3.jpg) top center no-repeat; background-size: cover;}*/
.banner .word{ padding:100px 0;}
.banner .word h1{font-size:28px; margin-bottom:20px; }
.banner .word ul{ margin-bottom:0px;}
.banner .word ul li{font-size:16px; width:50%; margin-bottom:10px;}
.banner .word ul .first{ margin-right:0;}

}

@media (max-width: 660px)
{
.banner .word ul li{ width:100%;}
}