/* This stylesheet generated by Transfonter (https://transfonter.org) on August 29, 2017 10:29 AM */
@font-face {
  font-family: 'Roboto';
  src: url(/event/apec2017/fonts/Roboto-Thin.eot);
  src: url(/event/apec2017/fonts/Roboto-Thin.eot?#iefix) format('embedded-opentype'), url(/event/apec2017/fonts/Roboto-Thin.woff2) format('woff2'), url(/event/apec2017/fonts/Roboto-Thin.woff) format('woff'), url(/event/apec2017/fonts/Roboto-Thin.ttf) format('truetype'), url(/event/apec2017/fonts/Roboto-Thin.svg#Roboto-Thin) format('svg');
  font-weight: 100;
  font-style: normal;
}
/*
 * @Author: Nokey
 * @Date: 2017-10-24 14:29:26
 * @Last Modified by: Nokey
 * @Last Modified time: 2017-10-24 19:00:57
 */
* {
  margin: 0;
  padding: 0;
  line-height: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}
html {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
  background-color: #fff;
}
body {
  height: 100%;
  font-size: 1.4rem;
  font-family: 'Microsoft Yahei', 'Hiragino Sans GB', Helvetica, sans-serif;
  background-color: #fff;
}
ul,
ol {
  list-style: none;
}
a {
  text-decoration: none;
}
hr {
  border: 0;
  width: 100%;
  border-top: 1px solid #cbcbcb;
}
em {
  font-style: normal;
}
input,
textarea {
  font-family: Helvetica, 'Microsoft Yahei', 'Hiragino Sans GB', sans-serif;
  outline: none;
  border: none;
}
input:focus,
textarea:focus {
  outline: none;
}
i {
  font-style: normal;
}
img {
  outline: none;
  border: 0 !important;
}
::selection {
/*Webkit,Opera9.5+,Ie9+*/
  background: #b5a25d;
  color: #fff;
}
::-moz-selection {
/*Mozilla Firefox*/
  background: #b5a25d;
  color: #fff;
}
::-ms-clear {
  display: none;
}
::-ms-reveal {
  display: none;
}
.link {
  cursor: pointer;
}
#app {
  height: 100%;
}
.home {
  height: 100%;
  font-family: sans-serif;
}
.container {
  height: 749px;
  position: relative;
  background: #e9e6dc;
}
@media screen and (orientation: portrait) {
  .page1 .pcContentWrapper {
    top: 6.8%;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .page1 .middle {
    top: 0;
    bottom: 0;
    background: url(/event/apec2017/images/1d5f3fd4bab328ce68eaa0aa33b5f5d6.png) no-repeat;
    background-size: 100% 100%;
  }
  .page1 .logo2017 {
    position: absolute;
    left: 30px;
    height: 85px;
    top: 60px;
    opacity: 0;
    transform: translateY(50%);
  }
  .page1 .logo2017 img {
    height: 100%;
    width: auto;
  }
  .page1 .logo {
    position: absolute;
    left: 110px;
    top: 60px;
    height: 80px;
    border-left: 2px solid #404c57;
    padding-left: 10px;
    display: block;
  }
  .logoTop {
    font-weight: bold;
    font-size: 20px;
  }
  .logoBottom {
    font-size: 6px;
  }
}
@media screen and (orientation: landscape) {
  .page1 .pcContentWrapper {
    top: 0;
    background: url(/event/apec2017/images/30b20be4483a74695f092fb075d31e01.png) no-repeat;
    background-size: 100% 100%;
  }
  .page1 .PCHeaderWrapper {
    display: none;
  }
  .page1 .logo2017 {
    position: absolute;
    top: 64px;
    left: -100px;
    height: 100px;
    opacity: 0;
    transform: translateY(50%);
  }
  .page1 .logo {
    position: absolute;
    top: 64px;
    left: -10px;
    width: 200px;
    height: 100px;
    border-left: 2px solid #404c57;
    padding-left: 20px;
  }
  .page1 .logo2017 img {
    height: 100%;
    width: auto;
  }
  .page1 .middle {
    right: 9.7%;
  }
}
@media screen and (max-width: 736px) and (orientation: landscape) {
  .page1 .logo2017 {
    top: 50px;
  }
  .page1 .logo {
    top: 50px;
  }
}
@media screen and (max-width: 641px) and (orientation: landscape) {
  .page1 .logo2017 {
    top: 10px;
    left: -83px;
  }
  .page1 .logo {
    top: 10px;
    left: 0;
    font-size: 18px;
  }
}
@media screen and (max-width: 481px) and (orientation: landscape) {
  .page1 .logo2017 {
    top: 5px;
    left: -69px;
    height: 70px;
  }
  .page1 .logo {
    padding-left: 13px;
    top: 5px;
    left: -10px;
    font-size: 12px;
    height: 70px;
  }
}
@media screen and (max-width: 370px) {
  .page1 .logo {
    padding-top: 10px;
  }
}
@media screen and (max-width: 700px) and (orientation: landscape) {
  .page1 .leftArrowArea {
    right: -220px;
  }
  .page1 .rightArrowArea {
    right: -220px;
  }
}
.HeaderContainer {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 20;
}
@media screen and (orientation: portrait) {
  .HeaderContainer {
    height: 6.8%;
  }
  .PCHeaderWrapper {
    display: none;
  }
  .MobileHeaderWrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #404c57;
  }
  .MobileHeaderWrapper img {
    height: 100%;
  }
  .MobileHeaderWrapper .backHomeMobile {
    float: right;
  }
}
@media screen and (orientation: landscape) {
  .HeaderContainer {
    height: 3%;
  }
  .MobileHeaderWrapper {
    display: none;
  }
  .PCHeaderWrapper {
    background: #404c57;
    position: absolute;
    width: 100%;
    height: 100%;
  }
}
.container {
  height: 749px;
  position: relative;
  background: #e9e6dc;
}
.textArea {
  color: #fff;
  line-height: normal;
  padding-left: 30px;
  text-shadow: 0 1.5px 1px #000;
  font-size: 21px;
  background: url(/event/apec2017/images/74d794f15dd71a43bff6c5291135dcc1.png) no-repeat;
  background-position: left 10px;
  background-size: 10px;
  opacity: 0;
  transform: translateY(50%);
}
@media screen and (orientation: portrait) {
  .page2 .pcContentWrapper {
    right: 0;
    bottom: 0;
    left: 0;
  }
  .page2 .middle {
    top: 0;
    bottom: 0;
    background: url(/event/apec2017/images/4df6598fcb116a70864b98b443db01f1.png) no-repeat;
    background-size: cover;
  }
  .textArea {
    margin: 0 15px 10px 15px;
  }
}
@media screen and (orientation: landscape) {
  .page2 .pcContentWrapper {
    top: 0;
    background: url(/event/apec2017/images/50db9cac81f72d352c4546459351fd2e.png) no-repeat;
    background-size: 100% 100%;
  }
  .page2 .middle {
    top: 0;
    bottom: 0;
    right: 9.7%;
    left: 9.7%;
  }
  .page2 .PCHeaderWrapper {
    display: none;
  }
  .textArea {
    margin-bottom: 10px;
  }
  .page2 .rightArrowArea {
    bottom: 60px;
  }
}
@media screen and (max-width: 481px) {
  .textArea {
    font-size: 14px;
    background-position: left 6px;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .textArea {
    margin: 0 25px 10px 25px;
  }
}
@media screen and (max-width: 700px) and (orientation: landscape) {
  .textArea {
    font-size: 18px;
  }
  .page2 .leftArrowArea {
    right: -220px;
  }
  .page2 .rightArrowArea {
    right: -220px;
  }
}
@media screen and (max-width: 641px) and (orientation: landscape) {
  .textArea {
    font-size: 14px;
  }
}
.container {
  height: 749px;
  position: relative;
  background: #e9e6dc;
}
.pcContentWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10;
}
.middle {
  top: 6.5%;
  right: 16%;
  bottom: 0;
  left: 16%;
  position: absolute;
}
.mobileContentWrapper {
  width: 100%;
  height: 100%;
}
.centerBarArea {
  width: 16%;
  height: 100%;
  display: inline-block;
}
.centerBarArea img {
  width: 100%;
  height: 100%;
}
.centerMainArea {
  width: 84%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  padding-right: 10px;
  padding-left: 10px;
}
.centerMainArea .centerMainAreaTop {
  width: 100%;
  margin-top: 22px;
  opacity: 0;
}
.centerMainArea .centerMainAreaTop .leftTopPIC {
  width: 80%;
  height: 100%;
  padding-right: 5px;
}
.centerMainArea .centerMainAreaTop .rightTopPIC {
  width: 20%;
  height: 100%;
}
.centerMainAreaTitle {
  width: 100%;
  height: auto;
  font-size: 30px;
  text-align: right;
  padding-top: 10px;
  opacity: 0;
  margin-bottom: 15px;
  transform: translateY(50%);
}
.centerMainAreaTitle img {
  width: 100%;
  height: auto;
}
.video-wrapper {
  width: 100%;
  top: 0;
  left: 0;
  position: relative;
}
.video-container {
  width: 110%;
  position: relative;
  padding: 5% 0 5% 10%;
  margin: 0 0 0 -9%;
  background: url(/event/apec2017/images/b00533df5033c41f55a02b16129a6338.png) no-repeat;
  background-size: cover;
  z-index: 5;
}
.video-container img {
  width: 100%;
  z-index: 1;
  top: 0;
  left: 0;
}
.video-content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
@media screen and (orientation: portrait) {
  .middle {
    top: 8%;
    right: 0;
    bottom: 5.5%;
    left: 0;
    padding-top: 0;
  }
  .logo {
    display: none;
  }
  .leftArrowArea {
    display: none;
  }
  .rightArrowArea {
    display: none;
  }
  .middleLeft {
    display: none;
  }
  .middleRight {
    display: none;
  }
  .middleCenterGreyLayer {
    width: 100%;
    height: 100%;
  }
  .middleCenterwrapper {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  .centerMainAreaBottom {
    width: 40%;
    height: auto;
    position: absolute;
    bottom: 15px;
    right: 5px;
  }
}
@media screen and (orientation: landscape) {
  .logo {
    position: absolute;
    left: -100px;
    width: 200px;
    height: 90px;
  }
  .logoTop {
    font-weight: bold;
    font-size: 25px;
  }
  .logoBottom {
    font-size: 11px;
  }
  .leftArrowArea {
    position: absolute;
    right: -240px;
    width: 200px;
    top: 50px;
  }
  .leftArrowArea img {
    width: 30px;
    height: 30px;
  }
  .leftArrowWords {
    width: 150px;
    margin: 0 0 0 10px;
    display: inline-block;
  }
  .imgArea {
    display: inline-block;
  }
  .rightArrowArea {
    position: absolute;
    right: -240px;
    width: 200px;
    bottom: 150px;
  }
  .rightArrowArea img {
    width: 30px;
    height: 30px;
  }
  .rightArrowWords {
    width: 20px;
    margin: 0 20px 0 20px;
    display: inline-block;
  }
  .middleLeft {
    width: 20%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    opacity: 0;
  }
  .middleLeft img {
    width: 100%;
    height: auto;
    margin-top: 100px;
  }
  .middleLeft .backHome {
    width: 50px;
    bottom: 14.5%;
    position: absolute;
    z-index: 2;
    height: auto;
    right: 28px;
  }
  .middleCenter {
    width: 60%;
    height: 100%;
    position: relative;
    display: inline-block;
    vertical-align: top;
  }
  .middleRight {
    width: 20%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    position: relative;
    opacity: 0;
    z-index: 2;
  }
  .middleRight img {
    width: 100%;
    bottom: 11.5%;
    position: absolute;
    z-index: 2;
    height: auto;
  }
  .middleCenterGreyLayer {
    height: 100%;
    width: 100%;
    border-right: 10px solid #404c57;
    position: relative;
    z-index: 2;
  }
  .middleCenterwrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 10.35%;
  }
  .centerMainAreaBottom {
    width: 40%;
    height: auto;
    position: absolute;
    bottom: 2.3%;
    right: 5px;
  }
  .greyBottom {
    position: absolute;
    height: 12.1%;
    right: 29.9%;
    bottom: 0;
    left: 29.9%;
  }
  .greyBottom-content {
    position: absolute;
    width: 100%;
    height: 80%;
    background: #404c57;
    bottom: 0;
    left: 0;
  }
}
@media screen and (max-width: 736px) and (orientation: landscape) {
  .centerMainAreaTitle {
    margin: 0;
    padding: 0;
    font-size: 20px;
  }
}
@media screen and (max-width: 736px) and (orientation: landscape) {
  .centerMainArea .centerMainAreaTop {
    margin-top: 10px;
  }
  .centerMainAreaTitle {
    font-size: 14px;
  }
}
@media screen and (max-width: 670px) and (orientation: landscape) {
  .logoTop {
    font-size: 20px;
  }
  .logo {
    top: 7px;
    left: -80px;
    font-size: 18px;
  }
}
@media screen and (max-width: 481px) and (orientation: landscape) {
  .logoTop {
    font-size: 14px;
  }
  .logo {
    top: 7px;
    left: -72px;
    font-size: 12px;
  }
}
@media screen and (max-width: 370px) {
  .logoTop {
    font-size: 14px;
  }
  .logo {
    font-size: 12px;
  }
  .centerMainAreaTitle {
    font-size: 16px;
  }
}
@media screen and (min-width: 1148px) {
  .middle {
    right: 24%;
    left: 24%;
  }
  .greyBottom {
    right: 34.5%;
  }
}
.FooterContainer {
  width: 100%;
  height: 12.1%;
  left: 0;
  bottom: 0;
  position: absolute;
}
@media screen and (orientation: portrait) {
  .PCFooterWrapper {
    display: none;
  }
  .FooterContainer {
    height: 4.3%;
  }
  .MobileFooterWrapper {
    position: absolute;
    background: #404c57;
    width: 100%;
    height: 100%;
  }
}
@media screen and (orientation: landscape) {
  .MobileHeaderWrapper {
    display: none;
  }
  .PCFooterWrapper {
    position: relative;
    height: 100%;
  }
  .PCFooterBlue {
    background: #c3dada;
    width: 85%;
    height: 100%;
    z-index: 0;
  }
  .PCFooterGold {
    background: #bfae62;
    width: 100%;
    height: 89%;
    position: absolute;
    bottom: 0;
    z-index: 1;
  }
  .PCFooterGrey {
    background: #404c57;
    width: 50%;
    height: 80%;
    position: absolute;
    bottom: 0;
    z-index: 2;
  }
  .page-copyright {
    position: absolute;
    left: 35%;
    bottom: 30%;
    z-index: 21;
    color: #aaa;
    font-size: 12px;
    width: 30%;
    text-align: center;
  }
  .page-copyright p {
    line-height: 1.2;
  }
}