/* http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/



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;

}





/* -------------------------------- 



Primary style



-------------------------------- */

*, *::after, *::before {

  box-sizing: border-box;

}



html {

  font-size: 62.5%;

}



body {

  font-size: 1.6rem;

 font-family:"Microsoft Yahei","微软雅黑",arial,"\5b8b\4f53";

  color: #767070;

  background-color: #ffffff;

}



a {

  color: #ccd0c1;

  text-decoration: none;

}



/* -------------------------------- 



Slider



-------------------------------- */

.cd-slider-wrapper {

  position: relative;

  height: 100vh;

 width:100%; float:left;

}

@media only screen and (min-width: 900px) {

  .cd-slider-wrapper {

    padding:0px;

  }

}



.cd-slider {

  position: relative;

  z-index: 1;

  height: 100%;

  overflow: hidden;min-width:1200px;

}

.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: url(../images/img-1.jpg);

}

.cd-slider li:nth-of-type(2) .image {

  background: url(../images/img-2.jpg);

}

.cd-slider li:nth-of-type(3) .image {

  background: url(../images/img-3.jpg);

}

.cd-slider li:nth-of-type(4) .image {

  background: url(../images/img-4.jpg);

}

.cd-slider .image {

  background-size: cover;

}

.cd-slider .content {

  padding: 30px;

  color: #ffffff;

  background-color: #005ca7;

  -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: #ec8516;

}

.cd-slider li:nth-of-type(3) .content {

  background-color: #005ca7;

}

.cd-slider li:nth-of-type(4) .content {

  background-color: #005ca7;

}

.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 <div> 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.5rem;

    margin-bottom: 0;

  }

  .cd-slider h2, .cd-slider p {

    line-height: 2;

  }

}

@media only screen and (min-width: 1170px) {

  .cd-slider .content {

    padding: 0 90px;

  }

  .cd-slider h2 {

    font-weight: 300;

  }

}



/* -------------------------------- 



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%;

  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;

  }

}