* { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
html { width: 100%; height: 100%; overflow: hidden; }
html *, html *:before, html *:after { box-sizing: inherit; }
body { width: 100%; height: 450px; box-sizing: border-box; font-size: 16px; font-family: 'PT Sans', sans-serif; color: #0C385F; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }
.hidden { display: none !important; opacity: 0; animation: none !important; transition: none !important; }

.top { display: none; position: relative; width: calc(100vw - 40px); height: 50px; margin: 0 auto; z-index: 1; }
.top .h-masthead { display: block; position: relative; width: 268px; height: 100%; text-indent: -9999px; vertical-align: middle; background-image: url(../images/scmp-logo.png); background-size: 82%; background-position: 0 50%; background-repeat: no-repeat; overflow: hidden; z-index: 2; }
.top .h-title { display: none; position: relative; font-size: 1.1em; line-height: 28px; }
.top .h-buttons .h-button { position: absolute; top: 10px; width: 30px; border-radius: 50%; text-align: center; line-height: 30px; z-index: 1; cursor: pointer; transition: color .5s ease; }
.top .h-buttons .h-button.facebook-button { right: calc(35px - .2em); font-size: 1.4em; }
.top .h-buttons .h-button.twitter-button { right: -.2em; font-size: 1.3em; }
.top .h-buttons .h-button:hover { color: #1266B1; transition: color .2s ease; }

.bottom { display: none; position: relative; width: calc(100% - 40px); max-width: 660px; margin: 50px auto 0 auto; padding-bottom: 20px; border-top: 1px solid; }
.bottom .f-menu { margin-bottom: 15px; }
.bottom .f-menu li { display: inline-block; float: left; width: 20%; }
.bottom .f-menu li a { font-size: .95em; font-family: 'PT Sans Narrow', sans-serif; font-weight: 600; text-decoration: none; line-height: 20px; color: #768EA2; transition: color .5s ease; }
.bottom .f-menu li a:hover { color: #477EAD; transition: color .2s ease; }
.bottom .f-menu:after { content: ''; display: table; clear: both; }
.bottom .f-disclaimer { font-size: .9em; font-family: 'PT Sans Narrow', sans-serif; }

.container { position: relative; width: 100%; max-width: 660px; height: 450px; margin: 0 auto; background: #FCFEFF; z-index: 0; overflow: hidden; }
.header { position: absolute; top: 0; left: 0; width: 100%; background: #CADAE0; z-index: 1; height: 40px; }
.header .h-title { position: absolute; top: 0; left: 20px; width: calc(100% - 40px); padding: 0 10px; font-size: 1.4em; font-family: 'PT Sans Narrow', sans-serif; font-weight: 600; z-index: 0; margin-top: 10px; line-height: 1.2; }
.header.header-range { background: none; }

.footer { position: absolute; bottom: 0; left: 0; width: 50%; height: 30px; z-index: 1; }
.footer .f-source { position: absolute; top: 0; left: 20px; font-size: .85em; font-family: 'PT Sans Narrow', sans-serif; line-height: 30px; }
.footer .f-source a { color: #0C385F; transition: color .5s ease; }
.footer .f-source a:hover { color: #1266B1; transition: color .2s ease; }

.main { position: absolute; left: 0; width: 100%; background: #CADAE0; z-index: 0; height: 410px; top: 40px; }
.main .controls { position: absolute; top: 0; right: 20px; width: 40px; z-index: 3; }
.main .controls .control { display: block; position: relative; box-sizing: content-box; width: 100%; font-size: 1.5em; text-align: center; line-height: 40px; background: #FCFEFF; cursor: pointer; transition: color .5s ease, opacity .5s ease; }
.main .controls .control:hover { color: #1266B1; transition: color .2s ease, opacity .5s ease; }
.main .controls .control.prev-button { border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom: 2px solid #FCFEFF; }
.main .controls .control.prev-button:after { content: ''; position: absolute; top: 100%; left: 10%; width: 80%; height: 2px; background: #D4E5EC; }
.main .controls .control.prev-button:hover:before { animation: arrow-up .7s; }
.main .controls .control.next-button { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.main .controls .control.next-button:hover:before { animation: arrow-down .7s; }
.main .controls .control.reload-button { margin-top: 10px; border-radius: 4px; font-size: 1.7em; }

.main .controls .control.control-blink { animation: arrow-blink 1.4s infinite 3s; }
.main .controls .control.control-inactive { color: #D4E5EC; cursor: default; }
.main .controls .control.control-inactive:hover { color: #D4E5EC; }
.main .controls .control.control-inactive:hover:before { animation: none; }
.main .controls .control.control-inactive.reload-button { opacity: 0; pointer-events: none; transition: opacity .2s ease; }

.main .map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.main .map svg { position: absolute; top: 0%; left: calc(50% - 320px); width: 660px; height: 450px; transform-origin: 60% 0; transform: scale(.9, .9); }
.main .map.enlarge svg { transform: scale(1.1, 1.1); left: calc(50% - 255px); }
.main .map:before { content:''; width: 100%; height:50px; position: absolute; z-index: 10; background:linear-gradient(to bottom, rgba(202,218,224,1) 0%, rgba(202,218,224,0) 100%); }
.main.frame-9 .map.cn:before, .main.frame-8 .map.hk:before { content:''; width: 100%; height:410px; position: absolute; z-index: 10; background:rgba(202, 218, 224, 0.75); }
.main .map svg text, .main .map svg tspan { font-family: 'PT Sans Narrow'; font-weight: 700; fill: #566c7f; }

.main.frame-0 #b2-cn,
.main.frame-1 #b2-cn,
.main.frame-2 #b2-cn,
.main.frame-3 #b2-cn, 
.main.frame-0 #b3-cn,
.main.frame-1 #b3-cn,
.main.frame-2 #b3-cn,
.main.frame-3 #b3-cn { opacity: 0 }
.main.frame-0 #b4-cn polygon,
.main.frame-1 #b4-cn polygon,
.main.frame-2 #b4-cn polygon,
.main.frame-3 #b4-cn polygon { fill:#dcf4f6 }
.main.frame-4 .map #train path,
.main.frame-5 .map #train path,
.main.frame-6 .map #train path,
.main.frame-7 .map #train path,
.main.frame-8 .map #train path,
.main.frame-9 .map #train path,
.main.frame-4 .map #train polygon,
.main.frame-5 .map #train polygon,
.main.frame-6 .map #train polygon,
.main.frame-7 .map #train polygon,
.main.frame-8 .map #train polygon,
.main.frame-9 .map #train polygon {fill:#F47373;} 
.map #b2-cn, 
.map #b3-cn, 
.map #b4-cn polygon {fill:#F47373; opacity: 1}

#b2-lift-1-line, #b3-lift-1-line, #b3-lift-2-line, #level-b1-m, #level-b2-m, #level-b3-m, #level-b4-m  {  opacity: 0 }
#b3-lift-1-line line , #b3-lift-2-line line { stroke: #e57b00 }
#b2-direction-1, #b2-direction-2, #b2-direction-3, #b3-direction-1, #b3-direction-2, #b3-direction-3  { opacity: 0;  }
.main .map.cn #b3, .main .map.cn #b1 , .main .map.cn #b3-lift-2, .main .map.cn #b3-lift-3 { opacity: 0 }
.main .map.hk #b2, .main .map.hk #b2-lift-1, .main .map.hk #b2-lift-2 { opacity: 0 }

.frame-4 .map.enlarge.cn svg { top: -15%; }
.frame-5 .map.enlarge.cn svg { top: -15%; }
.frame-6 .map.enlarge.cn svg { top: -3%; }
.frame-7 .map.enlarge.cn svg { top: -3%; }
.frame-8 .map.enlarge.cn svg { top: -3%; }
.frame-9 .map.enlarge.cn svg { top: -3%; }

.frame-4 .map.enlarge.hk svg { top: -6%; left: calc(50% - 300px); }
.frame-5 .map.enlarge.hk svg { top: -24%; left: calc(50% - 300px); }
.frame-6 .map.enlarge.hk svg { top: -24%; left: calc(50% - 300px); }
.frame-7 .map.enlarge.hk svg { top: -24%; left: calc(50% - 300px); }
.frame-8 .map.enlarge.hk svg { top: -24%; left: calc(50% - 300px); }
.frame-9 .map.enlarge.hk svg { top: -24%; left: calc(50% - 300px); }

.frame-4 .map.cn #b2-lift-1-line { opacity: 1;  stroke-width: 2px; stroke-dasharray: 4 8; animation: 5s lift-up infinite linear .5s; }
.frame-6 .map.cn #b2-direction-1 { opacity: 1 ;transition: .3s all ease .5s; animation: 2s blink infinite .5s}
.frame-7 .map.cn #b2-direction-2 { opacity: 1 ;transition: .3s all ease .5s; animation: 2s blink infinite .5s}
.frame-8 .map.cn #b2-direction-3 { opacity: 1 ;transition: .3s all ease .5s; animation: 2s blink infinite .5s}

.frame-4 .map.hk #b3-lift-2-line  { opacity: 1;  stroke-width: 2px; stroke-dasharray: 4 8; animation: 5s lift-down infinite linear .5s; }
.frame-5 .map.hk #b3-direction-1 { opacity: 1 ;transition: .3s all ease .5s; animation: 2s blink infinite}
.frame-5 .map.hk #b1 { opacity: .2; }
.frame-6 .map.hk #b3-direction-2 { opacity: 1 ;transition: .3s all ease .5s; animation: 2s blink infinite .5s}
.frame-6 .map.hk #b1 { opacity: .2; }
.frame-7 .map.hk #b3-direction-3 { opacity: 1 ;transition: .3s all ease .5s; animation: 2s blink infinite .5s}
.frame-7 .map.hk #b3-lift-1-line  { opacity: 1;  stroke-width: 2px; stroke-dasharray: 4; animation: 5s lift-down infinite linear .5s; }
.frame-7 .map.hk #b1 { opacity: .2; }
.main .toggle { position: absolute; bottom: 35px; text-align: center; font-size: .9em; z-index: 5; right: 10px; left: auto;  }
.main.frame-0 .toggle, .main.frame-1 .toggle, .main.frame-2 .toggle { opacity: 0;   }
.main.frame-0 .keys.cn-autho, .main.frame-1 .keys.cn-autho, .main.frame-2 .keys.cn-autho, .main.frame-3 .keys.cn-autho, .main.frame-8.hk .keys.cn-autho, .main.frame-9.cn .keys.cn-autho { opacity: 0;   }

#frame-3 .title { width: 150px; text-align: center;  }
.main.frame-3 .toggle { opacity: 1; right: auto; bottom: 308px; transition: .3s opacity .5s ease; left: 20px; width: 150px;}
.main.frame-3 .toggle .toggle-btn { color: #0c385f; box-shadow: 0 0 5px #cadae0;background: #ffffff;;   }
.main.frame-9.cn .toggle, .main.frame-8.hk .toggle { bottom:auto; top: 65px; left:30px; right:auto;  width:180px; animation: .3s try .5s; animation-fill-mode: forwards; opacity:0;}
.main.frame-9.cn .toggle .toggle-btn , .main.frame-8.hk .toggle .toggle-btn { h height: 3; height: 40px; line-height: 35px; font-size: 1.2em; }

.main .toggle .toggle-btn { padding: 2px 6px; cursor: pointer; background: #b5cbd3; color: #0c385f; font-family: "PT Sans Narrow"; font-weight: 700;;  }
.main .toggle .toggle-btn-hk:hover  { color: #ffd81a;  }
.main .toggle .toggle-btn-cn:hover  { color: #6bd6ff;  }

.main .toggle .toggle-btn-cn { border-bottom: 2px solid #d4e5ec; border-top-right-radius: 4px; border-top-left-radius: 4px;  }
.main .toggle .toggle-btn-hk { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;  }
.main .toggle .toggle-btn-cn.active {  background: #6bd6ff; color: #052541;  }
.main .toggle .toggle-btn-hk.active { background: #ffd81a; color: #4d4104;  }

.main .frames { position: absolute; top: 0; left: 20px; width: calc(100% - 40px); height: 100%; z-index: 2; }
.main .frames .frame.inactive, .main .frames .frame .cn, .main .frames .frame .hk { display: none }
.main .frames.cn .frame .cn { display: block }
.main .frames.hk .frame .hk { display: block }

.main .frames .frame { position: relative; box-sizing: border-box; width: 100%; }
.main .frames .frame .title { position: absolute; top: 0; left: 0; max-width: calc(100% - 55px); padding: 10px; border-radius: 4px; line-height: 1.4; background: rgba(252, 254, 255, 0.8); transition: opacity .5s ease; font-size: .9em; }
.main .frames .frame .title.title-inactive { opacity: 0; pointer-events: none; }
.main .frames .frame .title .title-label { font-weight: 600; }
.main .frames.cn .frame .title { background: #daf5ff;  }
.main .frames.hk .frame .title { background: #fcf6d1;  }

#frame-9 #share-topic { margin-top: 140px; }
#frame-9 .try { font-weight: 700; margin-top: 10px; color: #da5858; width: 200px;  }


.main .keys { position: absolute;  font-size: .9em; font-family: 'PT Sans Narrow'; background: rgba(202, 218, 224, 0.9); height: 20px;  }
.main .keys .label {  width: 10px; height: 10px; display: inline-block; margin-right: 5px;  margin-left: 3px;  }
.main .keys.cn-autho {  bottom: 8px;  right: 10px; background: rgba(202, 218, 224, 0.85);  }
.main .keys.cn-autho .label { background: #f47373; width: 10px; height: 10px; display: inline-block; margin-right: 5px;  }

.keys-wrapper { opacity: 0 ; top: 0px; position: relative; }
.frame-5.hk .keys-wrapper, .frame-6.hk .keys-wrapper, .frame-6 .keys-wrapper, .frame-7 .keys-wrapper, .frame-8.cn .keys-wrapper { opacity: 1; top: -10px;  }
#b2-ic, #b3-ic, #b2-gate {opacity: 0}
.frame-5.hk #b2-ic, .frame-6.hk #b2-ic, .frame-6 #b2-ic, .frame-7 #b2-ic, .frame-8.cn #b2-ic { opacity: 1; 	}
.frame-5.hk #b3-ic, .frame-6.hk #b3-ic, .frame-6 #b3-ic, .frame-7 #b3-ic, .frame-8.cn #b3-ic { opacity: 1; }
.frame-5.hk #b2-gate, .frame-6.hk #b2-gate, .frame-6 #b2-gate, .frame-7 #b2-gate, .frame-8.cn #b2-gate { opacity: 1; }

.keys.waiting { top: 180px; left: 20px;  }
.keys.cn-office { top: 160px; left: 20px;  }
.keys.cn-area { top: 140px; left: 20px;  }
.keys.hk-area { top: 120px; left: 20px;  }

.keys.waiting .label { background: #c5c2a1;  }
.keys.cn-office .label { background: #66ab52;  }
.keys.cn-area .label { background: #9fc57d;  }
.keys.hk-area  .label { background: #86abb9;  }


.main .frames .frame .share-block { display: block; margin-bottom: 10px; }
.main .frames .frame .share-block .share { display: inline-block; float: left; padding: 10px; border-radius: 4px; font-size: 1.1em; background: #FCFEFF; transition: background .5s ease; }
.main .frames .frame .share-block .share:hover { transition: background .2s ease; }
.main .frames .frame .share-block .share .share-title { display: inline-block; float: left; line-height: 1.7; }
.main .frames .frame .share-block .share .share-title .ion { float: left; width: 1.42em; height: 1.42em; margin-right: .25em; margin-left: -.3em; font-size: 1.2em; text-align: center; line-height: 1.42; color: #768EA2; }
.main .frames .frame .share-block .share .share-buttons { display: inline-block; float: left; margin-left: .3em; }
.main .frames .frame .share-block .share .share-buttons:after { content: ''; display: table; clear: both; }
.main .frames .frame .share-block .share .share-buttons .share-button { display: inline-block; float: left; width: 1.55em; height: 1.55em; margin-left: .5em; border-radius: 4px; font-size: 1.1em; text-align: center; line-height: 1.55; color: #fff; cursor: pointer; transition: background .5s ease; }
.main .frames .frame .share-block .share .share-buttons .share-button:hover { transition: background .2s ease; }
.main .frames .frame .share-block .share .share-buttons .share-button.facebook-button { background: #6D90D8; }
.main .frames .frame .share-block .share .share-buttons .share-button.facebook-button:hover { background: #3B5998 }
.main .frames .frame .share-block .share .share-buttons .share-button.twitter-button { width: 1.7em; height: 1.7em; font-size: 1em; line-height: 1.7; background: #5DB7D8; }
.main .frames .frame .share-block .share .share-buttons .share-button.twitter-button:hover { background: #0084B4; }
.main .frames .frame .share-block .share .share-buttons .share-button.whatsapp-button { width: 1.7em; height: 1.7em; font-size: 1em; line-height: 1.7; background: #68DA89; }
.main .frames .frame .share-block .share .share-buttons .share-button.whatsapp-button:hover { background: #0DC142; }

.main .frames .frame .share-block.share-social .share:hover .share-title .ion { transform-origin: 50% 50%; animation: arrow-forward 1s ease; }
.main .frames .frame .share-block.share-link .share { color: #0C385F; }
.main .frames .frame .share-block.share-link.share-topic .share { color: #fff; background: #477EAD; }
.main .frames .frame .share-block.share-link.share-topic .share .share-title .ion { color: #fff; }
.main .frames .frame .share-block.share-link.share-topic .share:hover { background: #5E99CC; }
.main .frames .frame .share-block.share-link.share-topic .share:hover .share-title .ion:before { content: '\f2fc'; }
.main .frames .frame .share-block.share-link.share-fb .share:hover { background: #E4EDFF; }
.main .frames .frame .share-block.share-link.share-fb .share:hover .share-title .ion { transform-origin: 0 75%; animation: thumbs-up 1s ease; }
.main .frames .frame .share-block:after { content: ''; display: table; clear: both; }

.scmp-d .main .frames .frame .share-block .share .share-buttons .share-button.whatsapp-button { display: none !important; }

.share-page { height: 100%; overflow: auto; }
.share-page .top { display: block; }
.share-page .bottom { display: block; }
.share-page .container { margin-top: 20px; }

@keyframes blink {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes try {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes arrow-blink {
  0% { background: #FCFEFF; }
  50% { background: #FFC1BE; }
  100% { background: #FCFEFF; }
}
@keyframes arrow-up {
  0% { transform: none; }
  30% { transform: translateY(-.15em); }
  100% { transform: none; }
}
@keyframes arrow-down {
  0% { transform: none; }
  30% { transform: translateY(.15em); }
  100% { transform: none; }
}
@keyframes arrow-left {
  0% { transform: none; }
  30% { transform: translateX(-.15em); }
  100% { transform: none; }
}
@keyframes arrow-right {
  0% { transform: none; }
  30% { transform: translateX(.15em); }
  100% { transform: none; }
}
@keyframes arrow-forward {
  0% { transform: translateX(0); }
  50% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}
@keyframes thumbs-up {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}
@keyframes lift-up {
  0% { stroke-dashoffset: 80;;}
  100% { stroke-dashoffset: 0; }
}
@keyframes lift-down {
  0% { stroke-dashoffset: 80;;}
  100% { stroke-dashoffset: 0; }
}
@media screen and (min-width: 500px) {
  .top { width: calc(100vw - 80px); }
  .bottom { width: calc(100% - 80px); }
  .header .h-title { left: 40px; width: calc(100% - 80px); padding: 0 15px; font-size: 1.4em; }
  .main .toggle { right: 10px; left: auto; }
  .footer .f-source { left: 20px }
  .main .controls { top: 5px; right: 40px; }
  .main .frames { left: 40px; width: calc(100% - 80px); }
  .main.frame-3 .toggle { left: 40px; }
  .main .frames .frame .title { top: 5px; padding: 10px 15px; font-size: .9em; }
  .main .frames .frame .share-block { margin-top: 5px; margin-bottom: 15px; font-size: 1.05em; }
  .main .frames .frame .share-block .share { padding: 10px 15px; }
  .main .map.enlarge svg { transform: scale(1.2, 1.2);left: calc(50% - 300px); }
  .keys-wrapper, .main.frame-9.cn .toggle, .main.frame-8.hk .toggle { left: 50px }
}
@media screen and (min-width: 600px) {
  .top { width: calc(100vw - 120px); }
  .bottom { width: calc(100% - 120px); }

  .header { }
  .header.header-box { background: #CADAE0; }
  .header .h-title { left: 60px; width: calc(100% - 120px); }
  .main .toggle { right: 10px; left: auto; }
  .footer .f-source { left: 20px }
  .main .controls { right: 60px; }
  .main .map svg {  transform: scale(1, 1);  left: calc(50% - 320px);  top: -9%;; }
  .main .frames { left: 60px; width: calc(100% - 120px); }
  .main.frame-3 .toggle { left: 60px; }
  .main .map.enlarge svg { transform: scale(1.3, 1.3);left: calc(50% - 290px); }
  .frame-4 .map.enlarge.cn svg, .frame-5 .map.enlarge.cn svg { top:-35%; }
  .keys-wrapper, .main.frame-9.cn .toggle, .main.frame-8.hk .toggle { left: 60px; }
}
@media screen and (min-width: 700px) {
  .top { width: calc(100% - 60px); }
  .top .h-masthead:after { content: none; }
  .top .h-title { display: block; position: absolute; top: 10px; left: 235px; padding-left: 10px; border-left: 1px solid; font-size: 1.25em; }
  .bottom { width: 100%; }
}
@media screen and (max-width: 440px) {
  .top .h-title { width: 100%; padding: 0; }
  .bottom .f-menu li a { font-size: .9em; }
  .share-page .container { margin-top: 10px; }
  .main .map svg {  left: calc(50% - 320px);  top: 0%;  transform: scale(.9, .9);; }
  .main .frames .frame .share-block .share .share-title { margin-bottom: .1em; }
  .main .frames .frame .share-block .share .share-buttons { display: block; float: none; margin-bottom: .1em; margin-left: 1.1em; }
  .main .frames .frame .share-block.share-link .share .share-title { margin-bottom: 0; }
  .main .map.enlarge svg { transform: scale(1, 1);left: calc(50% - 270px); }
  .main .map.enlarge.hk svg { top: -10% }
  .frame-4 .map.enlarge.cn svg { top: -15%; }
  .frame-5 .map.enlarge.cn svg { top: -15%; }
  .frame-6 .map.enlarge.cn svg { top: -3%; }
  .frame-7 .map.enlarge.cn svg { top: -3%; }
  .frame-8 .map.enlarge.cn svg { top: -3%; }
  .frame-9 .map.enlarge.cn svg { top: -3%; }
  .main .map svg #b2-ic tspan , .main .map svg #b3-ic tspan, .main .map svg #b2-gate text { font-size: .9em; }
}
@media screen and (max-width: 380px) {
  .top { width: calc(100vw - 20px); }
  .top .h-masthead { width: 220px; }
  .top .h-title { font-size: 1.1em; }
  .top .h-buttons .h-button.facebook-button { right: calc(30px - .2em); }
  .bottom { width: calc(100% - 20px); margin-top: 30px; }
  .bottom .f-menu li { width: 25%; }
  .share-page .container { margin-top: 0; }

  .header .h-title { left: 0; width: calc(100% - 20px); font-size: 1.2em; }
  .main .toggle { right: 10px; }
  .footer .f-source { left: 10px }

  .main .controls { right: 10px; width: 34px; }
  .main .controls .control { font-size: 1.3em; line-height: 34px; }
  .main .controls .control.reload-button { font-size: 1.5em; }

  .main .map svg { top: 0%; transform: scale(.9, .9); left: calc(50% - 300px); }

  .main .frames { left: 10px; width: calc(100% - 20px); }
  .main.frame-3 .toggle { left: 10px; bottom: 320px; }
  .main .frames .frame .title { max-width: calc(100% - 44px); padding: 6px 10px; font-size: .9em; }

  .main .frames .frame .share-block { font-size: .95em; }
  .main .frames .frame .share-block .share { padding: 6px 10px; }
  .main .frames .frame .share-block .share .share-buttons .share-button { width: 30px; height: 30px; line-height: 30px; }
  .main .frames .frame .share-block .share .share-buttons .share-button.twitter-button { width: 30px; height: 30px; line-height: 30px; }
  .main .frames .frame .share-block .share .share-buttons .share-button.whatsapp-button { width: 30px; height: 30px; line-height: 30px; }
  .main .map.enlarge svg {left: calc(50% - 340px); }
  .map.enlarge #level-b1-m, .map.enlarge #level-b2-m, .map.enlarge #level-b3-m, .map.enlarge #level-b4-m { opacity: 1 }
  .map.enlarge #level-b1, .map.enlarge #level-b2, .map.enlarge #level-b3, .map.enlarge #level-b4 { opacity: 0 }
  .main.frame-9.cn .toggle, .main.frame-8.hk .toggle { left: 10px; }
  .keys-wrapper { left: -10px; }
  .frame-4 .map.enlarge.cn svg { top: -10%; }
  .frame-5 .map.enlarge.cn svg { top: -10%; }
  .frame-6 .map.enlarge.cn svg { top: 13%; }
  .frame-7 .map.enlarge.cn svg { top: 13%; }
  .frame-8 .map.enlarge.cn svg { top: 13%; }
  .frame-9 .map.enlarge.cn svg { top: 13%; }
}
@media screen and (max-width: 330px) {
  .header .h-title { left: 0; width: calc(100%); font-size: 1.1em; }
  .main .map { top: 5px; }
  .main .map svg { left: calc(50% - 280px); top: 0%; transform: scale(.9, .9); }

  .main .frames .frame .title { font-size: .85em; }
  .main .frames .frame .share-block { font-size: .9em; }
  .main .map.enlarge svg {left: calc(50% - 330px); }

}
@media screen and (max-width: 300px) {
  .top .h-masthead { width: 200px; }

  .header .h-title { font-size: 1.1em; left: 0; }
  .main .map svg { top: 0; left: calc(50% - 260px); }
  .main .frames .frame .title { max-width: calc(100% - 39px); }
  .main .frames .frame .share-block .share .share-title .ion { margin-right: .1em; }
  .main .frames .frame .share-block .share .share-buttons { margin-left: .95em; }
  .main .map.enlarge svg { }

}