/*yx_rotaion*/ @media (min-width: 706px){ .yx-rotaion{margin:0 auto;position: relative; overflow: hidden; width:100%; height: 444px;} .yx-rotation-t{color:#fff;font-size:16px;font-family:microsoft yahei;z-index:2;bottom:0;left:10px;line-height:40px} } @media (min-width:486px) and (max-width: 705px){ .yx-rotaion{margin:0 auto;position: relative; overflow: hidden; width:100%; height: 300px;} .yx-rotation-t{color:#fff;font-size:16px;font-family:microsoft yahei;z-index:2;bottom:0;left:10px;line-height:40px} } @media (min-width:300px) and (max-width: 486px){ .yx-rotaion{margin:0 auto;position: relative; overflow: hidden; width:100%; height: 200px;} .yx-rotation-t{color:#fff;font-size:16px;font-family:microsoft yahei;z-index:2;bottom:0;left:10px;line-height:40px; display:inline-block;width: calc(100% - 10rem);text-overflow:ellipsis;overflow:hidden;white-space:nowrap; } } .yx-rotaion .rotaion_list li{ width:100%; } .yx-rotaion .rotaion_list img { -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; width: 100%; object-fit: cover; } .yx-rotaion .rotaion_list img:hover { -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; transform:scale(1.05); } .yx-rotaion-btn,.yx-rotaion-title,.yx-rotation-focus,.yx-rotation-t,.yx-rotaion-btn{position:absolute} .yx-rotation-title{ position:absolute; width:100%; height:40px; line-height:40px; background:#000; filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;opacity:0.4; left:0; bottom:0; z-index:1} .yx-rotation-t:hover{ font-weight:bold; color:#fff; } .yx-rotation-focus span,.yx-rotaion-btn span{background:url(../images/ico.png) no-repeat;display:block;} .yx-rotation-focus{height:40px;line-height:40px;right:20px;bottom:0;z-index:2} .yx-rotation-focus span{width:12px;height:12px;line-height:12px;float:left;margin-left:5px;position:relative;top:14px;cursor:pointer;background-position:-24px -126px;text-indent:-9999px} .yx-rotaion-btn{width:100%;height:41px;top:50%;margin-top:-20px;} .yx-rotaion-btn span{width:41px;height:41px;cursor:pointer;filter:alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity:0.3;opacity:0.3;position:relative} .yx-rotaion-btn .left_btn{background-position:-2px -2px;float:left;left:10px} .yx-rotaion-btn .right_btn{background-position:-2px -49px;float:right;right:10px} .yx-rotaion-btn span.hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8} .yx-rotation-focus span.hover{background-position:-10px -126px} .rotaion_list{width:0;height:0;overflow:hidden;}