/* -------------------------------- Primary style -------------------------------- */ *, *::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; text-decoration: none; } /* -------------------------------- Slider -------------------------------- */ .cd-slider-wrapper { position: relative; height: 100vh; padding: 10px; } @media only screen and (min-width: 900px) { .cd-slider-wrapper { padding: 30px; } } .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/baike/1-1P119163514b5.jpg); } .cd-slider li:nth-of-type(2) .image { background-image: url(../../img/baike/2.jpg); } .cd-slider li:nth-of-type(3) .image { background-image: url(../.../img/baike/3.jpg); } .cd-slider li:nth-of-type(4) .image { background-image: url(../../img/baike/4.jpg); } .cd-slider li:nth-of-type(5) .image { background-image: url(../../img/baike/5.jpg); } .cd-slider li:nth-of-type(6) .image { background-image: url(../../img/baike/6.jpg); } .cd-slider .image { background-size: cover; } .cd-slider .content { padding: 30px; color: #ffffff; background-color: #767070; -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: #f3b96c; } .cd-slider li:nth-of-type(3) .content { background-color: #ccd0c1; } .cd-slider li:nth-of-type(4) .content { background-color: #BCEE68; } .cd-slider li:nth-of-type(5) .content { background-color: #CDB38B; } .cd-slider li:nth-of-type(6) .content { background-color: #B4CDCD; } .cd-slider h2 { font-size: 2.2rem; margin-bottom: .4em; } .cd-slider p { font-size: 1.4rem; } .cd-slider h2, .cd-slider p { line-height: 1.4; } @media only screen and (min-width: 900px) { .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 .cd-half-block { height: 100%; width: 50%; 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