/* -------------------------------- Primary style -------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } *, *::after, *::before { box-sizing: border-box; } html { font-size: 62.5%; } body { font-size: 1.6rem; font-family: "Fira Sans", sans-serif; color: #767070; background-color: #ffffff; } a { /*color: #ccd0c1;*/ color: #FFFEFE; text-decoration: none; } /* -------------------------------- Slider -------------------------------- */ .cd-slider-wrapper { position: relative; height: 90vh; padding-left: 10px;padding-right: 10px; } @media only screen and (min-width: 900px) { .cd-slider-wrapper { padding-left: 35px;padding-right: 35px; } } .cd-slider { position: relative; z-index: 1; height: 100%; overflow: hidden; } .cd-slider li { position: absolute; top: 0; left: 0; height: 100%; width: 100%; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.6s; -moz-transition: -moz-transform 0.6s; transition: transform 0.6s; } .cd-slider li.is-visible { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .cd-slider .cd-half-block { height: 50%; background-position: center center; background-repeat: no-repeat; } .cd-slider li:first-of-type .image { background-image: url(../img/news/1-1Q0110UU1464.jpg); } .cd-slider li:nth-of-type(2) .image { background-image: url(../img/news/1-1Q0100I9135L.jpg); } .cd-slider li:nth-of-type(3) .image { background-image: url(../img/news/1-1Q00FGS9606.jpg); } .cd-slider li:nth-of-type(4) .image { background-image: url(../img/news/1-1Q00PG154H0.jpg); } .cd-slider li:nth-of-type(5) .image { background-image: url(../img/news/1-1P9160I352134.jpg); } .cd-slider li:nth-of-type(6) .image { background-image: url(../img/news/1-1Q0051023245D.jpg); } .cd-slider .image { background-size: cover; } .cd-slider .content { padding: 30px; color: #ffffff; background-color: #DEB887; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cd-slider .light-bg { color: rgba(0, 0, 0, 0.6); } .cd-slider .btn { display: inline-block; background: rgba(0, 0, 0, 0.2); padding: 1em 1.6em; margin-top: 1em; font-size: 1.3rem; color: #ffffff; border-radius: 50em; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; } .no-touch .cd-slider .btn:hover { background: rgba(0, 0, 0, 0.6); } .cd-slider li:nth-of-type(2) .content { background-color: #E9967A; } .cd-slider li:nth-of-type(3) .content { background-color: #D19275; } .cd-slider li:nth-of-type(4) .content { background-color: #FFA07A; } .cd-slider li:nth-of-type(5) .content { background-color: #DAA520; } .cd-slider li:nth-of-type(6) .content { background-color: #BDB76B; } .cd-slider h2 { font-size: 2.2rem; margin-bottom: .4em; } .cd-slider p { font-size: 1.4rem; overflow: hidden; } .cd-slider h2, .cd-slider p { line-height: 1.4; } .cd-slider h2>a:link,.cd-slider h2>a:visited{ color: #fff; text-decoration: none; } .cd-slider h2>a:hover{ color: #366df0; } .cd-slider p>a{ color: #666; text-decoration: none; } /*阅读全文*/ .cd-slider .seeAll{ margin-top: 1vh; font-size: 1.8rem; } .cd-slider .seeAll>a:link,.cd-slider .seeAll>a:visited{ color: #FFFEFE;text-decoration: none; } .cd-slider .seeAll>a:hover{ color: #E7C3C3; } .cd-slider .seeIcon{ display: block;float: left; width: 25px;height: 12px; line-height: normal; position: relative;top: 1vh; background: url(../img/news/star_icon.png)no-repeat -66px 0px; } @media only screen and (min-width: 900px) { .cd-slider .seeIcon{ top: 2vh; } .cd-slider li { pointer-events: none; z-index: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: z-index 0s 0.6s; -moz-transition: z-index 0s 0.6s; transition: z-index 0s 0.6s; } .cd-slider li.is-visible { pointer-events: auto; z-index: 3; -webkit-transition: z-index 0s 0s; -moz-transition: z-index 0s 0s; transition: z-index 0s 0s; } .cd-slider li.is-visible.covered { /* list item still there, but covered by the list item entering the viewport (.is-visible) */ z-index: 2; } .cd-slider .image { height: 100%; width: 55%; float: right; } .cd-slider .content { height: 100%; width: 45%; float: right; } .cd-slider .cd-half-block.content { -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); -o-transform: translateX(200%); transform: translateX(200%); -webkit-transition: -webkit-transform 0.6s 0s ease-in-out; -moz-transition: -moz-transform 0.6s 0s ease-in-out; transition: transform 0.6s 0s ease-in-out; } .cd-slider .cd-half-block.image { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0s 0.3s; -moz-transition: -moz-transform 0s 0.3s; transition: transform 0s 0.3s; } .cd-slider li.is-visible .cd-half-block.content, .cd-slider li.is-visible .cd-half-block.image { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } .cd-slider li.is-visible .cd-half-block.content { -webkit-transition: -webkit-transform 0.6s 0s ease-in-out; -moz-transition: -moz-transform 0.6s 0s ease-in-out; transition: transform 0.6s 0s ease-in-out; } .cd-slider .content { /* vertically align its content */ display: table; padding: 0 40px; } .cd-slider .content > div { /* vertically align
inside div.content */ display: table-cell; /*使得内容一直保持高度上居中*/ vertical-align: middle; } .cd-slider .btn { padding: 1.4em 2em; font-size: 1.4rem; } .cd-slider p { font-size: 1.6rem; } .cd-slider h2 { font-size: 3.0rem; margin-bottom: 0; /*font-weight: bold;*/ } .cd-slider h2, .cd-slider p { line-height: 2; } } @media only screen and (min-width: 1170px) { .cd-slider .content { padding: 0 50px; } .cd-slider h2 { font-weight: 300; font-size: 3.0rem; } } /*不论任何屏幕下所呈现的样式*/ /* -------------------------------- Slider Navigation -------------------------------- */ .cd-slider-navigation { /* you won't see this element in the html but it will be created using jQuery */ position: absolute; z-index: 3; left: 50%; /*top: 10%;*/ right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 30px; } .cd-slider-navigation li { display: inline-block; margin: 0 .25em; } .cd-slider-navigation li.selected a { background-color: #ffffff; } .cd-slider-navigation a { display: block; height: 8px; width: 8px; border-radius: 50%; color: transparent; /* image replacement */ white-space: nowrap; text-indent: 100%; overflow: hidden; border: 1px solid #ffffff; } @media only screen and (min-width: 900px) { .cd-slider-navigation { padding: 0.5em 1em; background-color: rgba(0, 0, 0, 0.8); /* fixes a bug on Firefox with ul.cd-slider-navigation z-index */ -webkit-transform: translateZ(2px) translateX(-50%); -moz-transform: translateZ(2px) translateX(-50%); -ms-transform: translateZ(2px) translateX(-50%); -o-transform: translateZ(2px) translateX(-50%); transform: translateZ(2px) translateX(-50%); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .cd-slider-navigation.slider-animating { /* fixes a bug on Firefox with ul.cd-slider-navigation z-index */ -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } .cd-slider-navigation a { height: 40px; width: 40px; line-height: 40px; text-align: center; /* reset style */ text-indent: 0; border: none; border-radius: 0; color: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cd-slider-navigation li.selected a { background-color: transparent; color: #f3b96c; } }