@charset "utf-8"; /* css document */ @font-face { font-family: 'jin'; src: ; } * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; bblr: expression(this.onfocus=this.blur()); /*ie使用*/ outline-style: none; /*ff使用*/ } /*去除a标签带来的虚框*/ h1, h2, h3, h4, h5, h6 { font-weight: normal; } input, textarea, select { outline: none; } textarea { resize: none; } img { border: none; } .clear { clear: both; } body { font-family: arial, "微软雅黑", helvetica, sans-serif; } .inner { width: 1200px; margin: 0 auto; } .bg1 { background: url(/uploads/image/zimg/banner1.png); } .bg2 { background: url(/uploads/image/zimg/banner2.png); } .bg3 { background: url(/uploads/image/zimg/banner3.png); } #banner { height: 700px; } .flickerplate { position: relative; width: 100%; height: 700px; background-color: #e6e6e6; overflow: hidden } .flickerplate ul.flicks { width: 10000%; height: 100%; padding: 0px; margin: 0px; list-style: none } .flickerplate ul.flicks>li { float: left; width: 1%; height: 100%; background-position: center; background-size: cover; display: table; position: relative; } .flickerplate ul li:nth-child(1) .pht1 { position: absolute; left: 16%; top: 10%; background-image: url(/uploads/image/zimg/banner1_2.png); } .flickerplate ul li:nth-child(2) .pht1 { position: absolute; left: 25%; top: 30%; background-image: url(/uploads/image/zimg/banner2_2.png); } .flickerplate ul li:nth-child(3) .pht1 { position: absolute; left: 5%; top: 15%; background-image: url(/uploads/image/zimg/banner3_2.png); } .flickerplate ul.flicks>li .flick-inner { height: 100%; padding: 10px; color: #fff; display: table-cell; vertical-align: middle } .flickerplate ul.flicks>li .flick-inner .flick-content { max-width: 68.75em; margin-left: auto; margin-right: auto } @media only screen and (max-width: 43.813em) { .flickerplate ul.flicks>li .flick-title { font-size: 1.667em } } .flickerplate ul.flicks>li .flick-title span.flick-block-text, .flickerplate ul.flicks>li .flick-sub-text span.flick-block-text { padding: 12px 18px; background-color: rgba(0, 0, 0, 0.6) } .flickerplate .arrow-navigation { position: absolute; height: 80%; width: 10%; top: 10%; z-index: 100; overflow: hidden } .flickerplate .arrow-navigation .arrow { display: block; height: 100%; width: 90%; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out } .flickerplate .arrow-navigation:hover, .flickerplate .arrow-navigation .arrow:hover { cursor: pointer } .flickerplate .arrow-navigation.left .arrow { opacity: 0; margin: 0px 0px 0px 50%; background-image: ; background-repeat: no-repeat; background-position: left } .flickerplate .arrow-navigation.right .arrow { opacity: 0; margin: 0px 0px 0px -50%; background-image: ; background-repeat: no-repeat; background-position: right } .flickerplate .arrow-navigation.left.hover .arrow { opacity: 1; margin: 0px 0px 0px 20% } .flickerplate .arrow-navigation.right.hover .arrow { opacity: 1; margin: 0px 0px 0px -20% } .flickerplate .dot-navigation { position: absolute; bottom: 15px; width: 100%; text-align: center; z-index: 100 } .flickerplate .dot-navigation ul { text-align: center; list-style: none; padding: 0px 15px } .flickerplate .dot-navigation ul li { display: inline-block; float: none } .flickerplate .dot-navigation .dot { width: 14px; height: 14px; margin: 0px 6px; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out; -o-transition: background-color 0.2s ease-out; -ms-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out } .flickerplate .dot-navigation .dot:hover { cursor: pointer; background-color: rgba(255, 255, 255, 0.6) } .flickerplate .dot-navigation .dot.active { background-color: #fff } .flickerplate .dot-navigation.left, .flickerplate .dot-navigation.left ul { text-align: left } .flickerplate .dot-navigation.right, .flickerplate .dot-navigation.right ul { text-align: right } .flickerplate.flicker-theme-dark .arrow-navigation.left .arrow { background-image: } .flickerplate.flicker-theme-dark .arrow-navigation.right .arrow { background-image: } .flickerplate.flicker-theme-dark .dot-navigation .dot { background-color: rgba(0, 0, 0, 0.12) } .flickerplate.flicker-theme-dark .dot-navigation .dot:hover { background-color: rgba(0, 0, 0, 0.6) } .flickerplate.flicker-theme-dark .dot-navigation .dot.active { background-color: #000 } .flickerplate.flicker-theme-dark ul.flicks li .flick-inner { color: rgba(0, 0, 0, 0.9) } .flickerplate.flicker-theme-dark ul.flicks li .flick-inner .flick-content .flick-sub-text { color: rgba(0, 0, 0, 0.9) } .flickerplate.flicker-theme-dark ul.flicks li .flick-inner .flick-content .flick-title span.flick-block-text, .flickerplate.flicker-theme-dark ul.flicks li .flick-inner .flick-content .flick-sub-text span.flick-block-text { background-color: rgba(255, 255, 255, 0.5) } .flickerplate ul.flicks li.flick-theme-dark .flick-inner { color: rgba(0, 0, 0, 0.9) } .flickerplate ul.flicks li.flick-theme-dark .flick-inner .flick-content .flick-sub-text { color: rgba(0, 0, 0, 0.9) } .flickerplate ul.flicks li.flick-theme-dark .flick-inner .flick-content .flick-title span.flick-block-text, .flickerplate ul.flicks li.flick-theme-dark .flick-inner .flick-content .flick-sub-text span.flick-block-text { background-color: rgba(255, 255, 255, 0.5) } .flickerplate.animate-transform-slide ul.flicks { -webkit-perspective: 1000; -webkit-backface-visibility: hidden; transform: translate3d(0%, 0px, 0px); -webkit-transform: translate3d(0%, 0px, 0px); -webkit-transition: -webkit-transform 0.6s; -o-transition: -o-transform 0.6s; -moz-transition: -moz-transform 0.6s; transition: transform 0.6s } .flickerplate.animate-transition-slide ul.flicks { position: relative; left: 0%; -webkit-transition: left 0.4s ease-out; -moz-transition: left 0.4s ease-out; -o-transition: left 0.4s ease-out; -ms-transition: left 0.4s ease-out; transition: left 0.4s ease-out } .flickerplate.animate-jquery-slide ul.flicks { position: relative; left: 0% } .flickerplate.animate-scroller-slide { padding-bottom: 0px; overflow: auto } .flickerplate.animate-scroller-slide ul.flicks { position: auto }