/* * name: slide.css * version: v1.35 * update: .arrs全局样式;增加unable样式;禁止WP设备默认触屏事件； * date: 2014-10-15 */ .slide {margin: 0 auto; height: 680px; background-color: #fff; overflow: hidden; position: relative; -ms-touch-action: none; touch-action: none;} /*图片位置默认自动宽度*/ .slide ul img{max-width: none;width: 100%;height:auto;} /*图片位置绝对定位*/ .slide ul img.abs{max-width: none;width: 1900px;height:562px;position: absolute;left: 50%;margin-left: -950px;top: 50%;margin-top: -281px;} .slide_wrap {position:relative;width:100%;height:100%;overflow:hidden;*zoom:1;} .slide_c {float:left;width: 100%;height:100%;overflow: hidden;z-index: 1;} /* * 自定义添加动画效果 */ .slide_c{height: 100%;line-height: 0;opacity: 0;transition: opacity 1300ms linear;-webkit-transition: opacity 1300ms linear;} .slide_c.active {opacity: 1;z-index: 10;} .slide_c a > img {line-height: 0;width: 100%;position: relative;transition: transform 5s ease;-webkit-transition: transform 5s ease;transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);} .slide_c.active a > img{transform: matrix(1, 0, 0, 1, 0, 0);-webkit-transform: matrix(1, 0, 0, 1, 0, 0);} /* * 滚动广告标题 */ .slide_tool {position: absolute;z-index: 98;width: 100%;height: 58px;line-height: 58px;margin-top: -58px;background: rgba(0,0,0,.5);} /* * 滚动广告标题-左侧工具 */ .slide_nav {display: none;position: absolute;left: 50%;bottom: 20px;z-index: 3;} .slide_nav a{display: inline-block;overflow: hidden;text-indent: 9999px;border-radius: 50%;width: 10px;height: 10px;margin: 0 4px;cursor: pointer;background-color: #fff;} .slide_nav a.on{background-color: #0362b6;} /* */ .flex-direction-nav{ left: 0;top:40%;width: 100%; position:absolute; z-index:20;} .flex-direction-nav a{ display:block; width:2%; padding-top: 4%; overflow:hidden; position:absolute; z-index:20;background-size: 100% auto;background-position: center;background-repeat: no-repeat;} .flex-direction-nav a.flex-prev{ left:4%; background-image: url(?/Theme/Home/widgets/tslide/arrow_left.png);} .flex-direction-nav a.flex-next{ right:4%; background-image: url(?/Theme/Home/widgets/tslide/arrow_right.png);} .flex-direction-nav a.flex-prev:hover{ } .flex-direction-nav a.flex-next:hover{ } @-webkit-keyframes arrow { 0% { opacity: 0; -webkit-transform: translate3d(0px, 0px, 0px); } 33% { opacity: 1; } 66% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0px, 10px, 0px); } } .ban-content{ width:100%;height: 100%; position:absolute; left:0; top:0; z-index:10;} .ban-content:before{ content:""; } .conlist{ position:relative;width:100%;height: 100%; } .conlist li{ position:absolute; left:0; top:0;width:100%;height: 100%; text-align: center; opacity:0; visibility:hidden;} .conlist li span{ -moz-transition: all ease-in-out 0.6s; -webkit-transition: all ease-in-out 0.6s; -o-transition: all ease-in-out 0.6s; -ms-transition: all ease-in-out 0.6s; transition: all ease-in-out 0.6s; } .conlist li span.size1{display: block;color:#0662b8; font-size:60px; line-height:1.5;font-weight: bold;opacity:0; visibility:hidden;-webkit-transform: translateY(100%);-ms-transform: translateY(100%);-o-transform: translateY(100%);transform: translateY(100%);} .conlist li span.size1 strong{color: #cf0101} .conlist li span.size2{display: block;color:#67739d; font-size:24px; line-height:1.5;text-transform: uppercase;opacity:0; visibility:hidden;-webkit-transform: translateY(200%);-ms-transform: translateY(200%);-o-transform: translateY(200%);transform: translateY(200%);-webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s;} .conlist li.on{ opacity:1; visibility:visible;} .conlist li.on span{ opacity:1; visibility:visible;-webkit-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0);} .muble{ height:44px; position:relative; background:#12d5af; padding-left:92px;} .muble:before{ content:""; width:92.9%; height:100%;position:absolute; left:0; bottom:0;} .num{ position:relative;} .num b,.num i{ display:inline-block; float:left; color:#fff; font-size:16px; line-height:44px;font-weight: normal;} .num i{ margin:0 14px;} /*.blogo{ } .blogo img{ position:relative; z-index:5;} .blogo i{ display:block; width:181px; height:163px; background:url(?/Theme/Home/widgets/tslide/../images/point.png) center no-repeat; position:absolute; right:73px; bottom:100px; transition:320ms;} .flexbo{ position:fixed; left:85px; top:26.5%; padding-right:70px; padding-bottom:22px; z-index:10;} */ /* * PcMode-max */ /*@media only screen and (min-width: 1200px) { .slide{height: 560px!important} .slide ul img{ max-width: none; width: 1920px!important; height:560px!important; position: absolute; left: 50%; margin-left: -960px; top: 50%; margin-top: -280px; } }*/ /* * PcMode-min */ /*@media only screen and (min-width: 1024px) and (max-width: 1200px) { .slide_tool { position: relative; height: 100px; margin: 0; padding: 15px 0; background-color: #fff } .section_xhdg{ padding-top: 0 } .slide_nav{ height: 100px } .slide_nav_l { padding: 65px 25px 0 58px; } .slide_nav_l a i { top: 10px; left: 20px; font-size: 38px; } .slide_nav_l a strong { top: 25px; left: 68px; font-size: 24px; } .slide_nav_r h3 { font-size: 24px; } .slide_search{ height: 100px } .widget-search-hot { padding: 15px 8%; } }*/ /* * Pad */ @media only screen and (min-width: 640px) and (max-width: 1024px) { .content-wr{padding: 25px 44px 0;} .conlist li h3{font-size: 20px;} } /* * phone */ @media only screen and (max-width: 640px) { .muble{padding-left: 62px;} .flex-direction-nav{top: 30%;} .flex-direction-nav a{width: 6%;padding-top: 12%;} .flex-direction-nav a.flex-prev{left: 28px;} .flex-direction-nav a.flex-next{right: 28px;} }