﻿
/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: #ffffff;
  background-color: #22283f;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
@media only screen and (min-width: 1050px) {
  body::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
}

a {
  color: #267481;
  text-decoration: none;
}
/* -------------------------------- 

Main Components 

-------------------------------- */
@media only screen and (min-width: 1050px) {
  body[data-hijacking="on"] {
    overflow: hidden;
  }
}

.cd-section {
  height: 100vh;
  position: relative;
}
.cd-section h2 {
  line-height: 100vh;
  text-align: center;
  font-size: 2.4rem;
}
.cd-section:first-of-type > div {
  background-color: #2b334f;
}
.cd-section:first-of-type > div::before {
  /* alert -> all scrolling effects are not visible on small devices */
  content: '';
  position: absolute;
  width: 100%;
  text-align: center;
  top: 20px;
  z-index: 2;
  font-weight: bold;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: #6a7083;
}
.cd-section:nth-of-type(2) > div {
  background-color: #2e5367;
}
.cd-section:nth-of-type(3) > div {
  background-color: #267481;
}
.cd-section:nth-of-type(4) > div {
  background-color: #fcb052;
}
.cd-section:nth-of-type(5) > div {
  background-color: #f06a59;
}
[data-animation="parallax"] .cd-section > div, [data-animation="fixed"] .cd-section > div, [data-animation="opacity"] .cd-section > div {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
[data-animation="parallax"] .cd-section:first-of-type > div, [data-animation="fixed"] .cd-section:first-of-type > div, [data-animation="opacity"] .cd-section:first-of-type > div {
  background-image: url("../images/img-1.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(2) > div, [data-animation="fixed"] .cd-section:nth-of-type(2) > div, [data-animation="opacity"] .cd-section:nth-of-type(2) > div {
  background-image: url("../images/img-2.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(3) > div, [data-animation="fixed"] .cd-section:nth-of-type(3) > div, [data-animation="opacity"] .cd-section:nth-of-type(3) > div {
  background-image: url("../images/img-3.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(4) > div, [data-animation="fixed"] .cd-section:nth-of-type(4) > div, [data-animation="opacity"] .cd-section:nth-of-type(4) > div {
  background-image: url("../images/img-4.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(5) > div, [data-animation="fixed"] .cd-section:nth-of-type(5) > div, [data-animation="opacity"] .cd-section:nth-of-type(5) > div {
  background-image: url("../images/img-5.jpg");
}
@media only screen and (min-width: 1050px) {
  .cd-section h2 {
    font-size: 4rem;
    font-weight: 300;
  }
  [data-hijacking="on"] .cd-section {
    opacity: 0;
    /*visibility: hidden;*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  [data-hijacking="on"] .cd-section > div {
    visibility: visible;
  }
  [data-hijacking="off"] .cd-section > div {
    opacity: 0;
  }
  [data-animation="rotate"] .cd-section {
    /* enable a 3D-space for children elements */
    -webkit-perspective: 1800px;
    -moz-perspective: 1800px;
    perspective: 1800px;
  }
  [data-hijacking="on"][data-animation="rotate"] .cd-section:not(:first-of-type) {
    -webkit-perspective-origin: center 0;
    -moz-perspective-origin: center 0;
    perspective-origin: center 0;
  }
  [data-animation="scaleDown"] .cd-section > div, [data-animation="gallery"] .cd-section > div, [data-animation="catch"] .cd-section > div {
    box-shadow: 0 0 0 rgba(25, 30, 46, 0.4);
  }
  [data-animation="opacity"] .cd-section.visible > div {
    z-index: 1;
  }
}

@media only screen and (min-width: 1050px) {
  .cd-section:first-of-type > div::before {
    display: none;
  }
}
@media only screen and (min-width: 1050px) {
  .cd-section > div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  [data-hijacking="on"] .cd-section > div {
    position: absolute;
  }
  [data-animation="rotate"] .cd-section > div {
    -webkit-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    -o-transform-origin: center bottom;
    transform-origin: center bottom;
  }
}

.cd-vertical-nav {
  /* lateral navigation */
  position: fixed;
  z-index: 15;
  right: 3%;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: none;
}
.cd-vertical-nav a {
  display: block;
  height: 40px;
  width: 40px;
  /* image replace */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  
}
.cd-next{background: url(../images/cd-icon-arrow.png) no-repeat center center;transition:all .5s;-webkit-transition:all .5s;border: 2px solid #fff;background-position: 0 0px;}
.cd-prev{ background: url(../images/cd-icon-select.png)no-repeat center center;transition:all .5s;-webkit-transition:all .5s;border: 2px solid #fff;background-position: 0 0px;}
.cd-next:hover{ background-position: 0 -40px;border: 2px solid #3fa38a;}
.cd-prev:hover{background-position: 0 -40px;border: 2px solid #3fa38a;}

.cd-vertical-nav a.cd-prev {

  margin-bottom: 10px;
}
.cd-vertical-nav a.inactive {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
@media only screen and (min-width: 1050px) {
  .cd-vertical-nav {
    display: block;
  }
}


.nightBox { position: relative; height: 100vh; }
.nightBox .contBox { background: #fff1d0; height: 100%; position: relative; overflow: hidden; }
.nightBox .contBox .content1320 { height: 100%; }
.nightBox .contBox .leftBox { position: absolute; left: 0; }
.nightBox .contBox .leftBox .title { padding-top: 20%; }
.nightBox .contBox .leftBox .ch { font-size: 30px; color: #099877; line-height: 110px; }
.nightBox .contBox .leftBox .ch span { font-size: 340px; line-height: 110px; color: #ea622c; }
.nightBox .contBox .leftBox .en { font-size: 45px; color: #099877; font-weight: bold; opacity: .4; }
.nightBox .contBox .leftBox .list { width: 90%; }
.nightBox .contBox .leftBox .list li { display: none; }
.nightBox .contBox .leftBox .list li:first-child { display: block; }
.nightBox .contBox .leftBox .list .tit { font-size: 24px; color: #444444; margin-bottom: 30px; }
.nightBox .contBox .leftBox .list .text { font-size: 14px; color: #505050; line-height: 28px; }
.nightBox .contBox .rightBox { float: right; width: 50%; right: 0px; top: 0px; bottom: 0; position: absolute; }
.nightBox .contBox .rightBox ul { transition-timing-function: cubic-bezier(0.09, 0.72, 0.4, 1.62); -webkit-transition-timing-function: cubic-bezier(0.09, 0.72, 0.4, 1.62); }
.nightBox .contBox .rightBox ul img { min-height: 100%; }
.nightBox .iconBox { width: 100%; position: absolute; z-index: 10; height: 214px; bottom: 5%; text-align: center; background: rgba(255,255,255,.8); background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0)); /* Safari 5.1 - 6 */ background: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0)); /* Opera 11.1 - 12*/ background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0)); /* Firefox 3.6 - 15*/ background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0)); /* 鏍囧噯鐨勮娉� */ }
.nightBox .iconBox ul { display: inline-block; overflow: hidden; height: 100%; }
.nightBox .iconBox ul li { cursor: pointer; transition-duration: .5s; -webkit-transition-duration: .5s; float: left; width: 11.11111%; height: 100%; float: left; }
.nightBox .iconBox ul li .icon { width: 52px; position: relative; top: 0; height: 52px; text-align: center; background: url(); background: url(../images/joinicon1.png)no-repeat; border-radius: 50%; margin: 38px auto 31px; position: relative; top: 0; transition-duration: .5s; -webkit-transition-duration: .5s; border: 1px solid transparent; }
.nightBox .iconBox ul li .icon.icon1 { background-position: 13px center; }
.nightBox .iconBox ul li .icon.icon2 { background-position: -36px center; }
.nightBox .iconBox ul li .icon.icon3 { background-position: -85px center; }
.nightBox .iconBox ul li .icon.icon4 { background-position: -136px center; }
.nightBox .iconBox ul li .icon.icon5 { background-position: -183px center; }
.nightBox .iconBox ul li .icon.icon6 { background-position: -232px center; }
.nightBox .iconBox ul li .icon.icon7 { background-position: -281px center; }
.nightBox .iconBox ul li .icon.icon8 { background-position: -325px center; }
.nightBox .iconBox ul li .icon.icon9 { background-position: -374px center; }
.nightBox .iconBox ul li .text { color: #000000; font-size: 14px; position: relative; top: 0; }
.nightBox .iconBox ul li .en { font-size: 12px; text-transform: uppercase; line-height: 40px; }
.nightBox .iconBox ul li.active, .nightBox .iconBox ul li:hover { background: #5ad7b9; }
.nightBox .iconBox ul li.active .icon, .nightBox .iconBox ul li:hover .icon { background-image: url(../images/joinicon2.png); top: -5px; border: 1px solid #fff; }
.nightBox .iconBox ul li.active .text, .nightBox .iconBox ul li:hover .text { font-size: 16px; color: #fff; top: 5px; }
.nightBox .iconBox ul li.active .en, .nightBox .iconBox ul li:hover .en { font-size: 14px; }

/*footer*/
.footBox{ }
.footBox a:link, .footBox a:visited { color: #646464; }
.footBox a:active, .footBox a:hover { color: #222; }
.footBox { box-sizing: content-box; background-color: #f3f3f3; padding: 38px 5% 30px; color: #959595; width: 90%; z-index: 2; position: absolute; bottom: 0; left: 0; z-index: 100;}
.linkDL dd { float: right; display: block; font-size: 14px; width: 36%; }
.linkDL dd.lin2 { width: 18%; }
.linkDL dd.lin2 .t { color: #646464; margin-bottom: 25px; text-transform: uppercase; font: 23px/1 "futura_lightregular", "times new roman", "microsoft yahei"; }
.linkDL dd.lin1 { color: #787878; }
.linkDL dd.lin1 .pk { margin-bottom: 25px; }
.linkDL dd.lin1 .br { display: block; }
.linkDL dd.lin0 { width: 46%; display: block; }
.footnav { text-align: right; padding-top: 80px; }
.footnav span { padding: 0px 10px; color: #b4b4b4; }
.sharpBox { float: right; }
.sharpBox a { width: 35px; height: 35px; transition: .4s; -webkit-transition: .4s; background: url(../images/sharp.png) no-repeat; display: block; float: left; margin-left: 20px; position: relative; top: 0; }
.sharpBox a.i1 { background-position: 0px 0px; }
.sharpBox a.i2 { background-position: -54px 0px; }
.sharpBox a.i3 { background-position: -110px 0px; }
.sharpBox a.i4 { background-position: -162px 0px; }
.sharpBox a.i5 { background-position: -218px 0px; }
.sharpBox a.i6 { background-position: -267px 0px; }
.sharpBox a:hover { top: -10px; }
.sharpBox .lt { font-size: 14px; color: #7f7f7f; float: left; }
/*pageTit*/