﻿* {-webkit-user-select:none;-moz-user-select:none;user-select:none;}
html {width:100%;height:100%;}
body {background-color:#02677a;font-size:16px;color:#333;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box;width:100%;height:100%;position:relative;margin:0;padding:0;font-family:Heiti SC,Helvetica,Droidsansfallback,Droid Sans}
a,b,blockquote,body,button,dd,dfn,div,dl,dt,em,font,form,h1,h2,h3,i,iframe,img,input,label,li,ol,p,span,strong,table,tbody,td,ul {padding:0;margin:0;list-style:none;font-style:normal}
img {vertical-align:middle;border:none}
article,aside,footer,header,nav,section {display:block}
button,input,select,textarea {font-size:100%;font-family:inherit}
a {text-decoration:none;}

.page {position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;transition:opacity 1s;transform:translate3d(0,0,0); }
.page .head {position:absolute;top:0;left:0;width:100%;height:40px;z-index:10;padding:10px 0 10px 0;background:url(../images/headbg.png) top repeat-x;background-size:auto 100%;}
.page .headbox {width:auto;margin:0 auto;max-width:1600px;height:40px;padding:0 20px;}
.page .pagebg {position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;}
.page .pagebg svg {display:block;width:100%!important;height:100%!important;}
.pagebgshadow {position:fixed;top:0;left:0;width:100%;height:100%;z-index:2;opacity:.95;pointer-events:none;overflow:hidden;}
.pagebgshadow img {display:block;width:120%;height:120%;position:relative;left:-10%;top:-10%;}
.page .head .logo {float:left;height:40px;position:relative;transform:scale(1.2);transform-origin:left top;}
.page .head .logo svg {display:block;height:40px!important;width:auto!important;}
.page .head .logo .language {position:absolute;left:120%;top:0;height:40px;line-height:40px;color:#00ffff;font-size:12px;}
.nav {float:right;font-size:0;text-align:right;}
.nav li {display:inline-block;color:#00ffff;font-size:13px;vertical-align:top;line-height:40px;}
.nav li.sg {padding:0 20px;font-size:10px;width:2px;height:60px;padding:0;margin:0 20px;position:relative;top:-10px;transform:rotate(20deg)}
.nav li.sg svg {display:block;width:100%!important;height:100%!important;position:relative;opacity:0.7;}
.nav li a {color:#00ffff;transition:all 0.2s;display:inline-block;}
.nav li a:hover {color:#fff;transform:scale(1.2)}
.nav ul {display:inline-block;}
.foot {position:absolute;left:0;bottom:0;width:100%;height:auto;padding:10px 0 10px 0;height:40px;line-height:40px;background:url(../images/footbg.png) border-box repeat-x; background-size:auto 100%;z-index:10;}
.footbox {max-width:1600px;margin:0 auto;color:#00ffff;padding:0 20px;}
.footbox .copyright {float:left;font-size:12px;text-align:center;}
.footbox ul {display:block;font-size:0;float:right;}
.footbox ul li {font-size:12px;display:inline-block;margin-left:20px;height:20px;}
.footbox ul li.sg {font-size:10px;position:relative;transform:rotate(160deg);width:2px;height:20px;}
.footbox ul li.sg svg {display:block;width:100%!important;height:50px!important;position:relative;bottom:25px; opacity:0.7;}
.footbox ul li a {color:#00ffff;transition:all 0.2s;display:inline-block;}
.footbox ul li a:hover {color:#fff;transform:scale(1.2)}
.worldbox {z-index:1;width:100%;height:100%;overflow:hidden;top:0%;left:0%;position:absolute;-webkit-overflow-scrolling:touch;}
.worldbox.auto {overflow:auto;}
.world {position:absolute;z-index:0;top:10%;left:50%;width:80%;height:auto;cursor:grab;transform:translate3d(0,0,0);transition:all 0.5s;margin-left:-40%;}
/*.anibg1 {display:none;background:url(../images/space.svg) center no-repeat;background-size:cover;position:fixed;top:0;left:0;width:300%;height:300%;z-index:0;opacity:1;animation:anibg1 linear 6s infinite;}
.anibg2 {display:none;background:url(../images/space.svg) center no-repeat;background-size:cover;position:fixed;top:0;left:0;width:300%;height:300%;z-index:0;opacity:0;transform:rotateY(180deg);animation:anibg2 linear 6s infinite;}*/
@keyframes anibg1 {0%{opacity:0.3}50%{opacity:0}100%{opacity:0.3}}
@keyframes anibg2 {0%{opacity:0}50%{opacity:0.3}100%{opacity:0}}
.world img {display:block;width:100%;height:100%;opacity:0.5;transition:opacity 0.5s;}
.world .worldimg {filter:blur(3px)}
.world .worldimg.ok {filter:blur(0);opacity:1;}
.mapbox {position:absolute;z-index:3;transform:translate3d(0,0,0);transition:all 0.3s;}
.maptag {position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;transform:translate3d(0,0,0);transition:all 0.3s;}
.maptag.mouse {cursor:ew-resize}
.maptag .tag {position:absolute;width:0;height:0;z-index:3;opacity:1;transition:all 0.4s;transition:all 0.3s;}
.maptag .tag .gq {width:65px;height:80px;background:url(../images/maptag.svg) center no-repeat;padding:5px 5px 20px 5px;box-sizing:border-box;position:absolute;top:-80px;left:-33px;transform:scale(0.7) translate3d(0,0,0);}
.maptag .tag .gq span {display:block;width:55px;height:55px;border-radius:50%;box-sizing:border-box;padding:2px;}
.maptag .tag .gq img {display:block;height:100%;width:100%;box-sizing:border-box;padding:10px 0 5px 6px;}
.maptag .tag .info {/*position:absolute;bottom:65px;background-color:#fff;border:3px solid #37a49e;padding:5px 10px;border-radius:50px;left:-60px;*/display:none;}
.maptag .tag .info h3 {color:#37a49e;white-space:nowrap;}
/*.maptag .tag a:before {content:"";display:block;position:absolute;width:32px;height:32px;border-radius:50px;z-index:0;border:8px solid #37a49e;bottom:43px;left:-45px;}
.maptag .tag a:hover .info h3 {color:#f60;}
.maptag .tag a:hover .info {border-color:#f60;}*/
.maptag .tag.build {z-index:1;}
.maptag .tag.build .gq {filter:grayscale(1);opacity:1!important;}
    /*.maptag .tag.build a {opacity:1}
.maptag .tag.build .info {opacity:0;transition:all 0.3s;display:block;width:100px;height:100px;border-radius:50%;overflow:hidden;padding:5px;border.maptag.active .tag.sel .gq:3px solid #37a49e!important;left:-58px;bottom:-10px;}
.maptag .tag.build a:before {display:none;}
.maptag .tag.build .gq {background:url(../images/maptag2.svg) center no-repeat;}
.maptag .tag.build a.showbuild {opacity:1;}
.maptag .tag.build a.showbuild .gq {background:url(../images/maptag.svg) center no-repeat;}
.maptag .tag.build a.showbuild .info {opacity:1;}
.maptag .tag.build a.showbuild .info img {display:block;width:100%;height:100%;border-radius:50%;}*/
.maptag.active .tag {opacity:1;}
.maptag.active .tag.sel {transition:all 0.3s;opacity:1;z-index:4;}
.maptag.active .tag .gq {background:url(../images/maptag2.svg) center no-repeat;opacity:0.5!important;}
.maptag.active .tag.sel .gq {background:url(../images/maptag.svg) center no-repeat;opacity:1!important;animation:tagactive2 linear 2s infinite;transform:scale(1.2)!important;transform-origin:center bottom;}
.maptag.active .tag.build.sel .gq {opacity:1!important;}
.maptag.active .tag.sel .info {position:absolute;top:10px;width:300px;left:-150px;padding:0px;border-radius:15px;border:5px solid rgba(0,0,0,0.5);font-size:12px;display:block;box-sizing:border-box;height:auto;overflow:hidden;padding-bottom:36px;z-index:1;}
.maptag.active .tag.sel .info h3 {display:block;padding:8px 10px 0 10px;background-color:#fff;font-size:14px;position:relative;z-index:2;border-radius:10px 10px 0 0;}
.maptag.active .tag .info .infotxt {background-color:#fff;padding: 0px 10px 8px 10px;position:relative;z-index:1;border-radius:0 0 10px 10px;min-height:0px;box-shadow:0 0 5px rgba(0,0,0,0.3);color:#666;}
.maptag.active .tag .gobtn {background-color:#37a49e;padding:20px 10px 8px 10px;text-align:center;position:absolute;z-index:0;bottom:0;width:100%;box-sizing:border-box;color:#fff;font-weight:bold;font-size:14px;display:block;}
.maptag.active .tag a:active .info .gobtn {background-color:#02677a}
.maptag.active .tag.build .info {padding-bottom:0;overflow:visible;left:-40px;width:auto;}
.maptag.active .tag.build .info h3 {padding-left:15px;white-space:nowrap;}
.maptag.active .tag.build .gobtn {display:none;}
.maptag.active .tag.build .info .infotxt {text-align:center;font-size:10px;padding-top:0px;height:10px;z-index:3;box-shadow:none; white-space:nowrap;padding-left:15px;padding-bottom:10px;}
.maptag.active .tag.build .info .infotxt:before {content:"";display:block;width:80px;height:80px;background:url(../images/building.gif) center no-repeat #fff;background-size:100% 100%;border-radius:50%; overflow:hidden;margin:0 auto 5px auto;border:5px solid rgba(0,0,0,0.7);position:absolute;top:-50px;z-index:3;left:-80px;}

.menubtn, .navclosebtn {display:none;}
.menubg {display:block;transition:all 0.3s;top:50%;left:50%;opacity:0;width:0%;height:0%;overflow:hidden;z-index:0;transform:translate3d(0,0,0);}

.bottomnav {position:absolute;left:0;bottom:0;height:auto;width:100%;text-align:center;z-index:5;font-size:0;white-space:normal;}
.bottomnavbox {width:100%;height:auto;padding:0px 0 60px 0;position:relative;}
.bottomnav:before {content:"";display:block;z-index:0;position:absolute;left:0;top:35px;width:100%;height:100%;background:rgba(0,0,0,0.3);transition:height 0.5s;}
.bottomnav ul {display:block;font-size:0;}
.bottomnav .tag {display:inline-block;font-size:12px;vertical-align:top;text-align:center;padding:0px 0 10px 0;width:70px;position:relative;top:0px;transition:all 0.3s;transform-origin:center bottom;transform:scale(0.9);}
.bottomnav .tag.build {filter:grayscale(1);opacity:0.6!important;}
.bottomnav .tag.build .gq {background-color:#ccc;}
.bottomnav .tag .gq {display:block;width:60px;height:60px;overflow:hidden;line-height:60px;border-radius:50%;overflow:hidden;background-color:#fff;margin:0 auto 5px auto;box-shadow:0 3px 8px rgba(0,0,0,0.3);font-size:16px;font-weight:bold;}
.bottomnav .tag .gq span {display:block;width:100%;height:100%;}
.bottomnav .tag img {display:inline;width:auto;height:50%;vertical-align:middle;}
.bottomnav .tag h3 {font-size:12px;font-weight:normal;color:#fff;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;padding:0 5px;}
.bottomnav .tag.asia .gq span {font-size:16px;text-align:center;color:#fff;background-color:#e066d6;border:4px solid #fff;font-weight:bold;width:100%;height:100%;box-sizing:border-box;border-radius:50%;line-height:52px;}
.bottomnavbox.active .tag {opacity:1;top:0px;transform:scale(0.85);}
.bottomnavbox.active .tag.sel {opacity:1;top:0px;transform:scale(1)}
.bottomnavbox.active .tag.build.sel {opacity:1!important;}
.bottomnavbox .tag .infotxt, .bottomnavbox .tag .gobtn {display:none;}
@keyframes tagactive2 {0%{transform:scale(1.2)}50%{transform:scale(1)}100%{transform:scale(1.2)}}

.tag.asia .gq img {display:none;}
.tag.asia .gq span {display:block;font-size:16px;line-height:49px;text-align:center;color:#fff;background-color:#e066d6;border:0px solid #fff;font-weight:bold;}
.tag.asia .gq span:before {content:"ASIA";}

.mailbtn {display:block;text-align:center;font-size:0;padding-top:50px;}
.mailbtn a {display:inline-block;position:relative;left:-5px;}
.mailbtn a span {display:inline-block;width:60px;height:60px;border-radius:50%;border:5px solid #ddd;position:relative;z-index:1;vertical-align:top;left:13px;}
.mailbtn a span svg {display:block;width:100%!important;height:100%!important; box-sizing:border-box;padding:10px;fill:#ccc!important;}
.mailbtn a b {display:inline-block;font-size:18px;height:40px;line-height:40px;padding:0 15px 0 10px;border-radius:0 40px 40px 0;border:5px solid #ddd;position:relative;z-index:2;vertical-align:top;margin-top:10px;border-left:0;background-color:#fff;color:#333;font-family:Impact;font-weight:normal;}

.infobox {display:block;position:absolute;z-index:0;top:0;left:0;padding:20px 20px 27px 20px;width:100%;height:100%;box-sizing:border-box;background-color:rgba(0,0,0,0.5);border:0px solid transparent;opacity:0;}
.infoboxbg {position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;}
.infobox .cont {position:relative;background-color:#fff;border-radius:20px;margin:0px auto;box-shadow:0 0 20px rgba(0,0,0,0.5);max-width:1200px;padding:20px;font-size:14px;line-height:150%;box-sizing:border-box;height:100%;overflow:auto;z-index:2;opacity:0;transition:all 0.5s;display:block;top:0;left:0;transform:scale(0.8);border-bottom:40px solid #fff;-webkit-overflow-scrolling:touch;}
.infobox .cont h2 {font-size:24px;text-align:center;padding:0 0 10px 0;}
.infobox h3 {font-size:16px;padding-top:30px;}
.infobox .cont p {text-indent:10px;margin:15px 0;}
.infoclosebtn {position:absolute;width:50px;height:50px;left:50%;margin-left:-25px;bottom:5px;font-size:20px;line-height:55px;text-align:center;color:#fff;z-index:3;border-radius:100px;padding:0px;background-color:#37a49e;display:block;transition:all 0.3s;transition-delay:0.5s;transform:scale(0);opacity:0;}
body.showinfo .infoclosebtn {transform:scale(1);opacity:1;}
/*.infobox p.img {text-align:center;font-size:0;}
.infobox p.img img {display:inline-block;width:40%;}
.infobox p.space {height:40px;display:block;}*/
.infobox .cont h2 {border-top:1px solid #ddd;padding-top:20px;}
.infobox .cont h2:first-child {border-top:0px;}

.infoclosebtn:active {background-color:#218680}
body.showinfo .infobox {}
body.showinfo .infobox.about,
body.showinfo.services .infobox.services,
body.showinfo.privacy .infobox.privacy,
body.showinfo.contact .infobox.contact
{display:block;opacity:1;z-index:8;}
body.showinfo.about .cont.about,
body.showinfo.services .cont.services,
body.showinfo.privacy .cont.privacy,
body.showinfo.contact .cont.contact
{height:100%;opacity:1;transform:scale(1)}

.servicebox {font-size:0;text-align:center;padding:30px 0 0 0;}
.servicebox>div {border:1px solid #ddd;border-radius:15px;padding:10px;width:46%;margin:0 2%;box-shadow:0 5px 10px rgba(0,0,0,0.2);box-sizing:border-box;display:inline-block;vertical-align:top;}
.servicebox>div img {display:block;width:70%;margin:10px auto 5px auto;max-width:300px;}
.servicebox>div div.img {padding-bottom:20px;background-color:#f3f3f3;border-radius:10px;padding:10px;box-shadow:0 0 15px rgba(0,0,0,0.05) inset;box-sizing:border-box;margin:10px 0;text-align:left;}
.servicebox>div div.img:last-child {margin-bottom:0;}
.servicebox>div h2 {display:block;border-radius:10px;background-color:#f3f3f3;padding:15px 0!important;margin-bottom:10px;box-shadow:0 0 15px rgba(0,0,0,0.05) inset;}
.xtitle {font-size:16px; font-weight:bold;position:relative;padding-left:45px;}
.xtitle span {width:40px;height:40px;position:absolute;top:0;left:0;background:url(../images/xt1.png) center no-repeat;background-size:100% 100%;color:#fff;font-size:20px;line-height:40px;text-align:center;}
.servicebox>div:last-child .xtitle span {background:url(../images/xt2.png) center no-repeat;background-size:100% 100%;}
.xtitle h4 {display:block;margin:0;padding:10px 0 5px 0;text-align:left;font-size:18px;line-height:20px;height:auto;text-transform:uppercase;color:#666;}
.xtitle h5 {display:block;text-align:left;margin:0;padding:0;font-size:14px;color:#999;font-weight:normal;line-height:16px;}
.xtitle em {display:inline-block;background-color:#258ffc;padding:0 20px;border-radius:20px;line-height:24px;font-size:14px;text-transform:uppercase;color:#fff;margin:10px 0 0 0;}
.servicebox>div:last-child .xtitle em {background-color:#f9950a;}

font, body.showinfo .infobox .cont font, body .nav li font, body .footbox ul li a font {display:none;}
html.langen body font.langen, 
html.langtw body font.langtw, 
html.langbr body font.langbr {display:inline!important;}
.showchangelang {display:none;position:absolute;top:0;left:0;width:100%;height:100%;}
.showchangelang .bg {position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-color:rgba(0,0,0,0.8)}
.showchangelang .sclbox {position:absolute;top:50%;left:0%;width:100%;height:80px;margin:-40px auto auto auto;font-size:0;text-align:center;z-index:1;}
.showchangelang .sclbox a {display:inline-block;width:80px;height:80px;box-sizing:border-box;text-align:center;line-height:80px;font-size:12px;color:#fff;background-color:#37a49e;margin:8px;border-radius:100px;transition:all 0.2s;cursor:pointer;}
.showchangelang .sclbox a:hover {transform:scale(1.1)}
.showchangelang .sclbox a:active {background-color:#15bfb6;transform:scale(1.1)}
body.scl .showchangelang {display:block;z-index:20;}

.cometogo {display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);z-index:0;opacity:0;transition:opacity 1s;}
.cometogo.show {z-index:30;opacity:1;transition-delay:1s;}
.cometogo .box {position:relative;width:100%;text-align:left;padding:30px 0;line-height:20px;font-size:14px;color:#fff;background-color:#37a49e;vertical-align:middle;display:inline-block;}
.cometogo .box .sbox {width:auto;max-width:800px;padding:0 20px;text-align:left;margin:0 auto;}
.cometogo .box .sbox dt {font-size:22px;font-weight:bold;padding-bottom:10px;}
.cometogo .box .sbox dd {font-size:18px;line-height:30px;}
.cometogo .box .sbox dd b {color:#ff3;}
.cometogobtn {padding-top:10px;text-align:right;}
.cometogobtn a {display:inline-block;border-radius:30px;height:40px;line-height:40px;padding:0 20px;margin:10px;background-color:#fff;color:#37a49e;transition:all 0.2s;}
.cometogobtn a:active, .cometogobtn a:hover  {transform:scale(1.1)}

.hideimgbox {position:absolute;top:150%;left:150%;width:0;height:0;overflow:hidden;}
.bottomwelcome {position:absolute;left:0;bottom:100%;height:auto;z-index:0;width:100%;text-align:center;color:#fff;padding:0px 20px 90px 20px;font-size:28px;box-sizing:border-box;line-height:150%;opacity:0;text-align:center;transition:all 0.5s;}
.bottomwelcome span.more {position:absolute;bottom:20px;text-align:center;left:0;width:100%;opacity:0;transition:opacity 1s;background:url(../images/bottomwelcomebg.png) center 19px no-repeat;background-size:80% 2px;font-size:0;transition:all 0.5s;}
.bottomwelcome span.more a {display:inline-block;color:#fff;background-color:#042334;font-size:14px;border-radius:50px;height:40px;line-height:40px;padding:0 20px;}
.bottomwelcome.show {z-index:4;opacity:1;}
.bottomwelcome>div {opacity:0;transform:translate3d(0,0,0);display:inline-block;padding:8px 10px;line-height:100%;}
.bottomwelcome>div.remove {display:none;}
.huoban {display:inline-block;border-radius:100px;padding:5px 5px 5px 70px;background-color:#fff;min-height:60px;text-align:left;color:#333;font-size:0;position:relative;}
.huoban .face {width:60px;height:60px;overflow:hidden;border-radius:50%;margin-right:10px;box-sizing:border-box;border:1px solid #ddd;display:block;position:absolute;top:50%;left:5px;margin-top:-30px;}
.huoban .face img {display:block;width:100%;height:100%;}
.huoban div.txt h3 {display:block;height:20px;font-size:12px!important;color:#37a49e;font-style:initial;line-height:20px;}
.huoban div.txt {display:table-cell;margin:0;padding:0px 10px 0 5px;font-size:14px!important;height:auto;line-height:16px;vertical-align:middle;width:100%;box-sizing:border-box;max-width:350px;}
.huoban div.txt font {vertical-align:middle;}
.huoban div.txt b {color:#f60;}

.anifadeup {animation:fadeup 1s forwards;display:inline-block!important}
.anifadedown {animation:fadedown 1s forwards;display:inline-block!important;}
.anifadeleft {animation:fadeleft 1s forwards;display:inline-block!important;}
.faderightout {animation:faderightout 0.5s forwards;display:inline-block!important;}
.anifadeout {animation:fadeout 0.5s forwards;display:inline-block!important;}
@keyframes fadeup {0%{position:relative;top:50px;opacity:0;}100%{position:relative;top:0px;opacity:1;}}
@keyframes fadedown {0%{position:relative;top:-40px;opacity:0;}100%{position:relative;top:0px;opacity:1;}}
@keyframes fadeleft {0%{position:relative;left:100px;opacity:0;}100%{position:relative;left:0;opacity:1;}}
@keyframes fadeout {0%{position:relative;opacity:1;transform:scale(1)}100%{position:relative;opacity:0;transform:scale(1)}}
@keyframes faderightout{0%{left:0;opacity:1;position:relative;}100%{left:-150px;opacity:0;position:relative;}}

@media screen and (max-width:768px) {
    .bottomnav .tag {top:0px;}
    .bottomwelcome {font-size:16px;padding-bottom:55px;}
    .bottomwelcome span.more {background-size:120% 2px;bottom:10px;}
    .servicebox {padding-top:5px;}
    .servicebox>div {width:100%;margin:0 0 25px 0;}
    .page .head .logo {transform:scale(1)}
    .infobox div.img {padding-top:10px;}
    .infobox div.img img {display:block;width:90%;max-width:400px;}
    .infobox .cont h2 {font-size:18px;}
    .maptag.active .tag.sel .info {width:200px;left:-100px;}
    .maptag.active .tag.build .info {left:-40px;width:auto;}
    .maptag.active .tag.ar.sel .info,
    .maptag.active .tag.za.sel .info,
    .maptag.active .tag.au.sel .info,
    .maptag.active .tag.br.sel .info
    {top:auto;bottom:80px;}
    .page .head {padding:5px 0;}
    .page .headbox {padding:0 0px 0 10px;}
    .foot {padding:5px 0;height:30px;line-height:30px;}
    .footbox {padding:0 20px 0 10px;}
    .nav li {font-size:12px;}
    .nav li.sg {margin:0 15px;}
    .bottomnav {-webkit-overflow-scrolling:touch;padding-top:0px;}
    .bottomnavbox {overflow:visible;position:relative;white-space:nowrap;padding:0px 5px 40px 5px;width:auto;display:block;overflow:auto;}
}
@media screen and (max-width:320px) {
    .nav li.sg {margin: 0 10px;}
    .footbox ul li {margin-left:10px;}
    .bottomwelcome {display:none!important;}
    .mapbox {margin-top:40px!important;}
}