/* === CSS RESET === */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* === End of CSS RESET === */

html, body {height: 100%;}
body {color: #FFF; font-family: Microsoft YaHei; overflow-x: hidden; overflow-y: hidden;}

.section {min-width: 1200px;}
.loader {width: 100%; height: 100%; background: #FFF url(../images/ripple.gif) no-repeat fixed center; position: absolute; z-index: 100;}
.header {position: fixed; left: 0; right: 0; top: 0; z-index: 99;}
.footer {margin-top: 15px; text-align: center;}
.footer>p {line-height: 15px; font-size: 8px; color: #EEE;}
.footer>p>a {color: #EEE;}
.header-wrapper {width: 80%; min-width: 900px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px;}
.logo {float: left;}
.logo>a>img {width: 230px; height: 74px;}
.accounts {float: right; margin: 15px 13px 12px 15px; padding: 10px;}
.accounts>div {display: inline-block; font-size: 15px;}
.accounts a {text-decoration: none; color: #FFFFFF;}
.accounts a:hover {color: #FF6464;}
.navigator {float: right;}
.menu>li {margin: 10px; padding: 10px; display: inline-block; font-size: 20px;}
.menu>li:hover, #menu>li.active {background: rgba(255, 255, 255, .2);}
.slide-navigator {
    position: absolute; bottom: 40px; left:50%; font-size:0; z-index:10; min-width: 300px;
    transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%);
}
.slide-navigator>li {float: left; width: 36px; height: 36px; margin: 15px;}
.slide-navigator>li>a {display: block; width: 100%; height: 100%;}
.slide-navigator>li>a>span {display: block; width: 100%; height: 100%; cursor: pointer;}
.slide-navigator>li>a>span {background-repeat: no-repeat; background-position:center; opacity: 0.5;}
span.page {background-size: 24px 24px;}
.slide-navigator>li>a>span:hover, .slide-navigator>li>a>span.active {opacity: 0.9; background-size: 30px 30px;}
span.left {background-image: url(../images/left.png); background-size: 36px 36px;}
span.right {background-image: url(../images/right.png); background-size: 36px 36px;}
span.dsp {background-image: url(../images/dsp.png);}
span.ssp {background-image: url(../images/ssp.png);}
span.dmp {background-image: url(../images/dmp.png);}
span.mdc {background-image: url(../images/mdc.png);}
span.adc {background-image: url(../images/adc.png);}
span.rainbow {background-image: url(../images/rainbow.png);}
span.iphone {background-image: url(../images/iphone.png);}
span.about {background-image: url(../images/about.png);}
span.beijing {background-image: url(../images/location-0.png);}
span.shanghai {background-image: url(../images/location-1.png);}
span.web {background-image: url(../images/web.png);}
span.c {background-image: url(../images/c.png);}
span.op {background-image: url(../images/op.png);}
span.ios {background-image: url(../images/ios.png);}
span.and {background-image: url(../images/and.png);}
span.bd {background-image: url(../images/bd.png);}
.site-title-piece {display: inline-block;}
.site-title-piece>img {position: relative;}
.site-subtitle-piece {display: block; margin-bottom: 10px;}
.site-subtitle-piece>img {position: relative; border-style: solid; border-color: #FFF; border-width: 2px 0; padding: 4px 0;}
.view {text-align: center; background: #FFF; color: #333;}
.paragraph {margin: 50px 15%; padding: 0 10px; height: 100%; position: relative; text-align: left; border-style: solid; border-color: #EEE; border-width: 0 1px;}
.paragraph>img {padding: 10px;}
.paragraph>.text {width: 70%; padding-left: 10px;}
.paragraph-decoration {position: absolute; opacity: 0.4;}
.title-cn {color: #38C; font-size: 30px; padding: 10px 0 5px 0;}
.title-en {color: #38C; font-size: 20px; padding-left: 5px; text-transform: capitalize;}
.title-small {color: #38C; font-size: 0.8em; padding: 5px;}
.text-hr {color: #CCC; border-style: dashed; margin: 4px;}
.text {font-size: 0.8em; line-height: 180%; letter-spacing: 0.1em; text-align: justify;}
.indent {text-indent: 2.2em;}
.map {width: 720px; height: 540px;}
/*
.price-tab {font-size: 1em; margin: 10px 0; color: #444444; line-height: 46px; width: 100%; text-align: center;}
.price-tab th {background: #95c2ef; color: #fff; font-size: 1.1em;}
.price-tab .tr_co_b {background: #eef5fc;}
.price-tab .tr_co_g {background: #fafafa;}
*/
a.dummylink {text-decoration: none; color: #56AAFF; font-size: 1.1em; line-height: 2em;}
a.dummylink:hover {color: #95C2EF;}

#section-0 {
    background: #847289;
    background: -webkit-radial-gradient(bottom right, circle, #F8D0D8 1%, #10153A 90%, #10153A 100%);
    background: -moz-radial-gradient(bottom right, circle, #F8D0D8 1%, #10153A 90%, #10153A 100%);
    background: -o-radial-gradient(bottom right, circle, #F8D0D8 1%, #10153A 90%, #10153A 100%);
    background: -ms-radial-gradient(bottom right, circle, #F8D0D8 1%, #10153A 90%, #10153A 100%);
}

#section-1 {
    background: #86A4E3;
    background: -webkit-linear-gradient(45deg, #7BE7D7 1%, #7BE7D7 40%, #86A4E3 100%);
    background: -moz-linear-gradient(45deg, #7BE7D7 1%, #7BE7D7 40%, #86A4E3 100%);
    background: -o-linear-gradient(45deg, #7BE7D7 1%, #7BE7D7 40%, #86A4E3 100%);
    background: -ms-linear-gradient(45deg, #7BE7D7 1%, #7BE7D7 40%, #86A4E3 100%);
}

#section-2 {
    background: #F09850;
    background: -webkit-radial-gradient(top left, circle, #F09850 1%, #F09850 30%, #D03050 100%);
    background: -moz-radial-gradient(top left, circle, #F09850 1%, #F09850 30%, #D03050 100%);
    background: -o-radial-gradient(top left, circle, #F09850 1%, #F09850 30%, #D03050 100%);
    background: -ms-radial-gradient(top left, circle, #F09850 1%, #F09850 30%, #D03050 100%);
}

#section-3 {
    background: #003060;
    background: -webkit-linear-gradient(30deg, #003060 1%, #003060 20%, #30B0D0 100%);
    background: -moz-linear-gradient(30deg, #003060 1%, #003060 20%, #30B0D0 100%);
    background: -o-linear-gradient(30deg, #003060 1%, #003060 20%, #30B0D0 100%);
    background: -ms-linear-gradient(30deg, #003060 1%, #003060 20%, #30B0D0 100%);
}

#section-4 {
    background: #95C2EF;
    background: -webkit-radial-gradient(top left, ellipse, #56AAFF 1%, #95C2EF 70%, #95C2EF 100%);
    background: -moz-radial-gradient(top left, ellipse, #56AAFF 1%, #95C2EF 70%, #95C2EF 100%);
    background: -o-radial-gradient(top left, ellipse, #56AAFF 1%, #95C2EF 70%, #95C2EF 100%);
    background: -ms-radial-gradient(top left, ellipse, #56AAFF 1%, #95C2EF 70%, #95C2EF 100%);
}

#section-5 {
    background: #C0C0C0;
    background: -webkit-radial-gradient(top left, ellipse, #E0E0E0 1%, #A0A0A0 70%, #C0C0C0 100%);
    background: -moz-radial-gradient(top left, ellipse, #E0E0E0 1%, #A0A0A0 70%, #C0C0C0 100%);
    background: -o-radial-gradient(top left, ellipse, #E0E0E0 1%, #A0A0A0 70%, #C0C0C0 100%);
    background: -ms-radial-gradient(top left, ellipse, #E0E0E0 1%, #A0A0A0 70%, #C0C0C0 100%);
}

#section-6 {
    background: #FF99CC;
    background: -webkit-radial-gradient(top left, ellipse, #FF99CC 1%, #FF99CC 30%, #99CCFF 100%);
    background: -moz-radial-gradient(top left, ellipse, #FF99CC 1%, #FF99CC 30%, #99CCFF 100%);
    background: -o-radial-gradient(top left, ellipse, #FF99CC 1%, #FF99CC 30%, #99CCFF 100%);
    background: -ms-radial-gradient(top left, ellipse, #FF99CC 1%, #FF99CC 30%, #99CCFF 100%);
}