.top-container {height: 99px; overflow: visible; z-index: 3}
.top-first-row {display: flex; justify-content: center;max-width:1024px;margin:0 auto;}
.top-logo {margin: 15.25px auto; width: 107.5px;height: 38.5px;transform: scale(1.2,1.2);}
.top-menu {z-index: 99;position: absolute;width:100%;font-size: 1.1rem;}
.top-menu-item {width: 25%;height: 30px;text-align: center;line-height: 30px;cursor: pointer;color:black;}
.top-menu-item a {display:inline-block;line-height: 30px;height: 30px;}
.top-menu-item a:hover {border-bottom:2px solid #737373;}
.top-menu-item a.active {border-bottom:2px solid #969696;}
.top-menu-main {display: flex;max-width:1024px;margin:0 auto;}
.top-menu-sub {background-color: rgba(0,0,0,0.75);width:100%;animation:fade-in 0.5s;}
.top-menu-sub-hover {max-height: 100px;}
.top-menu-sub-inner {max-width:1024px;margin:0 auto;display:flex;}
.top-menu-sub-group {width: 25%;}
.top-menu-sub-item {text-align: center;height: 30px;line-height: 30px;color:white}
.top-menu-sub-item a {display: inline-block;height: 30px;line-height: 30px;text-decoration: none;color:white;}
.top-menu-sub-item a:hover {text-decoration: underline;}

.top-lang-menu {position: absolute;right:20px;top:20px;}
.top-lang-menu a {margin-left:1rem;}
.top-lang-menu a:hover {text-decoration: underline;}

.bottom-nav {}
.bottom-logo {background-image:url(assets/logo.svg);background-size:contain;background-repeat:no-repeat;width:126px;height:25px;margin:1rem auto;}
.bottom-footer {background-color: #6D6E72;color: white;padding: 1rem;width: 100%;display: flex;justify-content: space-around;}
.bottom-footer a {text-align: center;cursor:pointer;text-decoration: none;color:white;}
.bottom-footer a:hover {text-decoration: underline;}
.belt {width:100%;background-color:#6d6e71;color:white;padding:2rem 0;}
.belt-content {max-width:60%;display: flex;margin:0 auto;}
.belt-image {flex:0.3;}
.belt-image-inner {margin:0 auto;max-width:100px;display: block;}
.belt-body {flex:0.7;padding-left:2rem;}
.belt-body p {margin-bottom:1rem;}

.building-feature {max-width:60%;margin:0 auto 2rem auto;display:flex;}
.building-feature-image {flex:0.4;background-size:contain;background-repeat: no-repeat;background-position:100% 100%;}
.building-feature-info {flex:0.5;display:flex;flex-direction: column;justify-content: flex-start;padding-left:2rem;}
.building-feature-title {font-size: 1.1rem;font-weight:800;font-family:"agbold";margin-bottom: 1rem;}
.building-feature-body {color:#2c2c2c;font-size: 1rem;margin-bottom:1rem;}
.building-feature-link {display: flex;align-items: center;line-height: 1rem;font-size:1rem;}
.building-feature-link a {text-decoration: none;color:#2c2c2c;display: inline-block;}
.building-feature-link a:hover {text-decoration: underline;}
.building-feature-link .link {margin-left:0.5rem;}
.glide {
  position: relative;
  width: 100%;
  box-sizing: border-box; }
  .glide * {
    box-sizing: inherit; }
  .glide__track {
    overflow: hidden; }
  .glide__slides {
    position: relative;
    width: 100%;
    list-style: none;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    touch-action: pan-Y;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    will-change: transform; }
    .glide__slides--dragging {
      user-select: none; }
  .glide__slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    white-space: normal;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent; }
    .glide__slide a {
      user-select: none;
      -webkit-user-drag: none;
      -moz-user-select: none;
      -ms-user-select: none; }
  .glide__arrows {
    -webkit-touch-callout: none;
    user-select: none; }
  .glide__bullets {
    -webkit-touch-callout: none;
    user-select: none; }
  .glide--rtl {
    direction: rtl; }

.carousal {position:relative;width: 720px;text-align: center;margin:2rem auto 2rem auto;}
.carousal:after {content: "";position:absolute;bottom:0;display:block;width:100%;height:100%;pointer-events: none;background: linear-gradient(90deg, rgba(255,255,255,0.7),rgba(255,255,255,0) 25%, rgba(255,255,255,0), rgba(255,255,255,0) 75%, rgba(255,255,255,0.7));}
.glide__arrow {border:none;color:black; position: absolute; display: block; top: 50%; z-index: 2; cursor: pointer; transition: opacity 150ms ease, border 300ms ease-in-out; transform: translateY(-50%); line-height: 40px; height:40px; width:40px; transform-origin: 50% 50%; background-image: url(assets/arrow.png);background-repeat:no-repeat;background-size:11px 21.5px;background-position: 50% 50%;}
.glide__arrow--left {left:-40px;transform: translateY(-50%) scaleX(-1);}
.glide__arrow--right {right:-40px;}


.carousal-one {}

.glide__slide {object-fit: cover;}



.developer {width:100%;margin:1.5rem 0 5rem 0;}
.developer-intro {display: flex;}
.developer-title {font-size:1rem;font-weight:800;font-family:"agbold";flex:0.3;text-align: right;padding-right:1rem;}
.developer-body {flex:0.7;}
.developer-body p {font-size:1rem;width:70%;color:#2c2c2c;margin-bottom:1rem;}


.floor {width:1024px;color:white;display:flex;height:368px;}
.floor-left {flex:0.4;background-color:#6d6e71;display:flex;}
.floor-right {flex:0.6;background-color:#A5A6AA;display:flex;justify-content: center;align-items: center;}

.floor-left-left {flex:0.6;display:flex;flex-direction: column;align-items: center;padding:2rem 0 2rem 2rem;justify-content: center;}
.floor-left-right {flex:0.4;display:flex;flex-direction: column;align-items: flex-start;justify-content:center;padding:3rem 2rem 2rem 0;}
.floor-title {font-size:1.3rem;text-align: center;font-weight:600;font-family: "Microsoft YaHei", Helvetica, Arial, sans-serif;}

.floor-range {justify-self: flex-end;color:white;font-size:1.1rem;margin-top:200px;}
.floor-area {justify-self: flex-end;color:white;font-size:1rem;}

.floor-gfx, .floor-gfx-active {background-repeat: no-repeat;background-size: contain;width:104.5px;height:138px;}
.floor-gfx {position:relative;background-image: url(assets/building.png);transform-origin: 50% 50%; transform: scale(1.2);-webkit-transform-origin: 50% 50%; -webkit-transform: scale(1.2);}
.floor-gfx-active-0 {position:absolute;background-image: url(assets/t1-active.png); }
.floor-gfx-active-1 {position:absolute;background-image: url(assets/t2-active.png); }
.floor-gfx-active-0-2 {position:absolute;background-image: url(assets/b-0-0.png); }
.floor-gfx-active-0-2 {position:absolute;background-image: url(assets/b-0-0.png); }
.floor-gfx-active-0-1 {position:absolute;background-image: url(assets/b-0-1.png); }
.floor-gfx-active-0-0 {position:absolute;background-image: url(assets/b-0-2.png); }

.floor-gfx-active-1-3 {position:absolute;background-image: url(assets/b-1-0.png); }
.floor-gfx-active-1-2 {position:absolute;background-image: url(assets/b-1-1.png); }
.floor-gfx-active-1-1 {position:absolute;background-image: url(assets/b-1-2.png); }
.floor-gfx-active-1-0 {position:absolute;background-image: url(assets/b-1-3.png); }

.floor-menu-title {height:2.5rem;line-height: 2.5rem;margin-bottom:1rem;color:#9a9a9a;font-weight: normal;font-size: 1.2rem;cursor:pointer;}
.floor-menu-title-active {color:white;font-weight: bold;cursor: default;}
.floor-menu-item {color:#9a9a9a;display:block;border-top: 1px solid white;border-bottom: 1px solid white;line-height:2rem;width:180px;margin-top:-1px;}
.floor-menu-item-active {color:white;}

.floor-submenu {margin:0 2rem 2rem 2rem;}
.floor-submenu-item {background-color: unset;font-size:0.8rem;line-height:2rem;margin-right:1rem;padding:0 2rem;text-align: center;display:inline-block;}
.floor-submenu-item-active {background-color:#F7951C;}

.floor-plan {display:block;width:319.5px;margin:0 auto;}

.floor-spec {width:70%;margin:100px auto;display:block;}


.building-one-arrow {background-image: url(assets/building-arrow.png);background-size: contain; width:4.5px;height:4px;top:39px;left:60px;position: absolute;}
.building-two-arrow {background-image: url(assets/building-arrow.png);background-size: contain; width:4.5px;height:4px;top:1px;left:84px;position: absolute;}
* { margin: 0; padding: 0; box-sizing: border-box;}
input, button, select, textarea, div, p, img { outline: none; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
body, html { height: 100%; width: 100%; font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
li { list-style: none; }
img { vertical-align: top; height: auto; }
body a { outline: none; blr: expression(this.onFocus=this.blur()); -webkit-tap-highlight-color: transparent; cursor: pointer; }
html { -webkit-text-size-adjust: none; }
body { background-color: white; font-family: "Microsoft YaHei", Helvetica, Arial, sans-serif;}

input, label, select, button, textarea { margin:0; border:0; padding:0; display:inline-block; vertical-align:middle; white-space:normal; background:none; line-height:1; }
input:focus { outline:0; }
input, textarea { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; }
button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
input[type=date], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=range], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week] { }
input[type=checkbox], input[type=radio] { width:13px; height:13px; }
input[type=file] { }
input[type=search] { -webkit-appearance:textfield; -webkit-box-sizing:content-box; }
::-webkit-search-decoration { display:none; }
button, input[type="reset"], input[type="button"], input[type="submit"] { /* Fix IE7 display bug */ overflow:visible; width:auto; }
::-webkit-file-upload-button { padding:0; border:0; background:none; } textarea { vertical-align:top; overflow:auto; }
select { }
select[multiple] { /* Move the label to the top */ vertical-align:top; }

@font-face {
  font-family: 'ag';
  src:  url(src/assets/ag.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'agbold';
  src:  url(src/assets/agbold.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
}

#app { font-family: 'ag'; display: flex; flex-direction: column; flex:1; min-height: 100%; }

.cursor-default {cursor:default;}
.cursor-pointer {cursor:pointer;}

.section {
  min-height: 400px;
}

.w30p {width:30%;}
.w70p {width:70%;}
.w60p {max-width: 60%;}
.w50p {max-width:52%;}

.enter {display:flex;align-items: center;justify-content: center;flex:1;flex-direction: column;}
.enter-logo {width: 162px;height: 58px;background-image: url(assets/logo.png);background-size: contain;background-repeat: no-repeat;}
.enter-button {cursor:pointer;width:107.5px;height:20px;display:flex;flex-direction: row;align-items:center;justify-content: center;margin-top:100px;}
.enter-button-arrow {width:13px;height:13px;background-image: url(assets/arrow.png);background-size: contain;background-repeat: no-repeat;}
.enter-button-text {width:31.5px;height:8.5px;background-image: url(assets/enter.png);background-size: contain;margin-left:10px;background-repeat: no-repeat;}

.content {flex:1;max-width: 1024px;margin:0 auto;}
.content-hero {width:100%;max-width:1024px;}
.content-image {width:60%;margin:2rem auto;display: block;}
.content-image-wide {width:100%;margin:2rem auto;display: block;}

.toggle-image {width:100%;display:block;}
.video-hero {width:100%;max-width:1024px;z-index: 0;}
.toggle-video {width:100%;display:block;}
.hero-button-play {width:26.5px;height:46px;background-image: url(assets/button-play.png);background-size:contain;background-repeat: no-repeat;    margin-top: -60px;margin-right: 20px;float: right;position:relative;}

.light-box, .video-light-box {z-index:99;position:fixed;top:0;bottom:0;left:0;right:0;background-color: rgba(0,0,0,0.7);display:flex;justify-content: center;align-items: center;}
.light-box-img {max-width:70%;max-height:90%;}

.video-light-box video {max-width:100%;max-height:90%;z-index:98;}

.intro {width:100%;margin:5rem auto;}
.intro-title {font-size:1.2rem;font-family:"agbold";text-align: center;margin:1rem auto;}
.intro-body {margin:0 auto;}
.intro-body p {font-size:1rem;color:#2c2c2c;text-align: justify; text-justify: distribute;;margin-bottom:1rem;}

.feature {width:100%;margin:1.5rem auto 5rem auto;text-align: center;}
.feature-intro {max-width: 370px;margin:0 auto;}
.feature-title {font-size: 1rem;font-weight:800;font-family:"agbold";margin: 1rem auto;}
.feature-body {}
.feature-body p {font-size:1rem;color:#2c2c2c;text-align: justify; text-justify: distribute;;}
.feature-link {display: flex;align-items: center;justify-content: center;margin: 1rem auto;}
.feature-link a {text-decoration: none;color:#6d6d6d;display: inline-block;}
.feature-link a:hover {text-decoration: underline;}
.feature-link .link {margin-left:10px;}

.toggle {max-width: 640px;display: flex;margin:1.5rem auto 3rem auto;overflow: hidden;}
.toggle-right {flex-direction: row-reverse;}
.toggle-side {flex:1;}
.toggle-carousal {height:auto;padding-top:3.8rem;}
.toggle-title {    font-size: 1.5rem; line-height: 1.8rem; padding: 1rem 0;}
.toggle-body {color:#999;font-size:1rem;}
.toggle-side-left {padding-right:1.5rem;}
.toggle-side-right {padding-left:1.5rem;}
.toggle-toggles a {display: block;font-size:1rem;width:100%;margin-bottom:1rem;padding-left:0.5rem;border:1px solid #bfbfbf;color:#bfbfbf;text-decoration: none;line-height: 2rem;cursor:default;}
.toggle-toggles a.active, .toggle-toggles a:hover {background-color:#bfbfbf;color:white;}
i.toggle-on {width:9px;float:right;background-image: url(assets/toggle-on.png);background-repeat: no-repeat;background-size: contain;height:2rem;background-position: 50% 50%;margin-right:5px;}
i.toggle-off {width:9px;float:right;background-image: url(assets/toggle-off.png);background-repeat:no-repeat;background-size: contain;height:2rem;background-position: 50% 50%;margin-right:5px;}
.link {display:inline-block;background-image: url(assets/link.png);background-size:contain;background-repeat: no-repeat;width:14px;height:4.5px;}
@keyframes fade-in {
  from {opacity:0;}
  to {opacity:1;}
}

.shake-horizontal {
	-webkit-animation: shake-horizontal 5s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	        animation: shake-horizontal 5s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-5-8 15:45:41
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-3px);
            transform: translateX(-3px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(3px);
            transform: translateX(3px);
  }
  80% {
    -webkit-transform: translateX(2px);
            transform: translateX(2px);
  }
  90% {
    -webkit-transform: translateX(-2px);
            transform: translateX(-2px);
  }
}
@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-3px);
            transform: translateX(-3px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(3px);
            transform: translateX(3px);
  }
  80% {
    -webkit-transform: translateX(2px);
            transform: translateX(2px);
  }
  90% {
    -webkit-transform: translateX(-2px);
            transform: translateX(-2px);
  }
}