.focus{height:100%;overflow:hidden;position:relative; margin-top:0px;} .opacity0{opacity: 0;transition: all 1s ease 0s;} .opacity1{opacity: 1;transition: all 1s ease 0s;} .focus_s{position:absolute;left:50%;bottom:5%;height:13px;overflow:hidden;width:100%;z-index:9;margin:0 0 0 -30px;} .focus_s li{float:left;cursor:pointer;overflow:hidden;margin-right:10px;width:10px; height:8px; margin-left:2px; background:#fff; cursor:pointer; } .focus_s li.active{background:#f60; width:10px;} .focus_m ul{opacity:1;filter:alpha(opacity=100);} .focus_m ul li{width:100%;height:100%;position:absolute;top:0;left:0;} .focus_m .wk_wrap{width:100%;height:100%;position:relative;} .focus_m ul li img{ width:100%;} .focus_m ul li#id0 .wk_banner_1 { position: absolute; top:calc( 50% - 175px ) ; left:0; opacity: 0; transition: all 1s ease 0s; } .focus_m ul li#id0.opacity1 .wk_banner_1 { left: 30%; opacity: 1; transition-delay: 800ms; transition: all 1s ease 0s;} .focus_m ul li#id0 .wk_banner_2 { position: absolute; top:50%; left: 50%; width: 0px; height: 0px; opacity: 0; transition: all 1s ease 0s; } .focus_m ul li#id0.opacity1 .wk_banner_2 { top:calc( 50% - 138px ); left:calc( 50% - 300px ); width: 600px; height: 275px; opacity: 1; transition: all 1s ease 0s;} .focus_m ul li#id0 .wk_banner_2 img{ width:100%; } .focus_m ul li#id0 .wk_banner_3 { position: absolute; top:calc( 50% - 175px ) ; right: 0px; opacity: 0; transition: all 1s ease 0s; } .focus_m ul li#id0.opacity1 .wk_banner_3 { right: 30%; opacity: 1; transition-delay: 800ms; transition: all 1s ease 0s;} .focus_m ul li#id1 .wk_banner_1 { position: absolute; top:calc( 50% - 90px - 10px ); left: 0px; opacity: 0; transition: all 1s ease 0s; } .focus_m ul li#id1.opacity1 .wk_banner_1 {left:calc( 50% - 370px ); opacity: 1;} .focus_m ul li#id1 .wk_banner_2 { position: absolute; top:calc( 50% + 10px ); right: 0px; opacity: 0; transition: all 1s ease 0s; } .focus_m ul li#id1.opacity1 .wk_banner_2 { right:calc( 50% - 320px ); opacity: 1;} .focus_m ul li#id1 .wk_banner_3 { position: absolute; bottom: 0px; left: 50%; z-index: 10; width: 160px; height: 38px; opacity: 0; transition: all 1s ease 0s; } .focus_m ul li#id1 .wk_banner_3 a { display: block; width: 158px; border: 1px solid #fff; color: #fff; text-align: center; font-size: 17px; line-height: 36px; cursor: pointer;} .focus_m ul li#id1.opacity1 .wk_banner_3 { bottom: 40%; opacity: 1; transition-delay: 600ms;} .focus_m ul li#id2 .wk_banner_1 { position: absolute; top:0%; left:calc( 50% - 332px ); opacity: 0; transition: all 1s ease 0s; } .focus_m ul li#id2.opacity1 .wk_banner_1 { top:calc( 50% - 145px - 10px ); opacity: 1; transition: all 1s ease 0s;} .focus_m ul li#id2 .wk_banner_2 { position: absolute; top: 100%;left:calc( 50% - 332px ); opacity: 0; transition: all 1s ease 0s; } .focus_m ul li#id2.opacity1 .wk_banner_2 { top:calc( 50% + 10px ); opacity: 1; transition: all 1s ease 0s;} .focus_m ul li#id2 .wk_banner_3 {width:4%;} @media only screen and (max-width: 760px) { .focus_m ul li#id0 .wk_banner_1 {top:5%; width:3%;height:87.5%; } .focus_m ul li#id0.opacity1 .wk_banner_2 { top:calc( 50% - 35% ); left:calc( 50% - 25% ); width: 50%; height: 68%;} .focus_m ul li#id0 .wk_banner_3 {top:5%; width:3%;height:87.5%;} .focus_m ul li#id1 .wk_banner_1 {top:10%;width:60%;} .focus_m ul li#id1.opacity1 .wk_banner_1 {left:20%;width:60%;} .focus_m ul li#id1 .wk_banner_2 {width:54%;top:30%;} .focus_m ul li#id1.opacity1 .wk_banner_2 {right:20%;} .focus_m ul li#id1 .wk_banner_3 {width:14%;height:10%;width:54%;bottom:40%;} .focus_m ul li#id1 .wk_banner_3 a {} .focus_m ul li#id2 .wk_banner_1 {left:22%;width:55%;} .focus_m ul li#id2.opacity1 .wk_banner_1 { top:5%; } .focus_m ul li#id2 .wk_banner_2 {left:22%;} .focus_m ul li#id2.opacity1 .wk_banner_2 { top:50%;} } .focus_l,.focus_r{position:absolute;display:block;width:30px;height:45px;overflow:hidden;z-index:2;top:50%;} .focus_l{left:0;} .focus_r{right:0;} .focus_l b,.focus_r b{position:absolute;z-index:1;display:block;width:30px;height:45px;overflow:hidden;opacity:0.3;filter:alpha(opacity=30);cursor:pointer;} .focus_l span,.focus_r span{display:inline-block;position:relative;z-index:2;width:30px;height:45px;cursor:pointer;} .focus_l span{left:5px;background-image:url(l.png);background-size:100% auto;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/index_scroll_x/l.png');} .focus_r span{left:5px;background:url(r.png) 0 0 no-repeat;background-size:100% auto;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/index_scroll_x/r.png');} .focus_l:hover b,.focus_r:hover b{opacity:0.5;filter:alpha(opacity=50);}