@charset "utf-8";
/**
 * @overview:  Global Style
 * @author:  David YIN, 1268765@qq.com
 * @lastUpdate: 2015-10
 */
@font-face {
    font-family: 'CaviarDreams';
    src: url('../font/caviardreams-webfont.eot');
    src: url('../font/caviardreams-webfont.eot#iefix') format('embedded-opentype'),
    url('../font/caviardreams-webfont.woff') format('woff2'),
    url('../font/caviardreams-webfont.woff') format('woff'),
    url('../font/caviardreams-webfont.ttf') format('truetype'),
    url('../font/caviardreams-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Champagne&Limousines';
    src: url('../font/champagne__limousines-webfont.eot');
    src: url('../font/champagne__limousines-webfont.eot#iefix') format('embedded-opentype'),
    url('../font/champagne__limousines-webfont.woff') format('woff2'),
    url('../font/champagne__limousines-webfont.woff') format('woff'),
    url('../font/champagne__limousines-webfont.ttf') format('truetype'),
    url('../font/champagne__limousines-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* =Reset default browser CSS. Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
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, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0;}
:focus { outline:0;}
ol, ul { list-style:none;}
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal;}
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse:separate; border-spacing:0;}
caption, th, td { font-weight:normal; text-align:left;}
blockquote:before, blockquote:after,
q:before, q:after { content:'';}
blockquote, q { quotes:'' '';}
a img { border:0;}
.clear:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; font-size:0;}
.clear { min-height:1%;}
/* =TouchPal site style
-------------------------------------------------------------- */
body { font: 100%/1.5 'Champagne&Limousines', 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#363636;}
a { color:#363636; text-decoration:none;}
.container { display:none;}
.homepage { position:absolute; top:0; bottom:0; width:100%; overflow:hidden;}
.header { position:fixed; z-index:99; width:100%;}
.aboutus .header { position:absolute;}
.header-bg { position:absolute; height:100%; width:100%; background:#fff; opacity:0.7; filter:alpha(opacity=70);}
.header-in { position:relative; margin:0 2.73%; padding:1.13% 0 0.59%;}
.navigator { position:absolute; z-index:0; top:26%; right:0; width:100%;}
.navigator li { float:right;margin-left:2.27%;}
.navigator li a { font-size:190%; font-weight:400; color:#00547e;}
.navigator li .active, .navigator li a:hover { border-bottom:1px solid #00547e;}
.logo { position:relative; z-index:1; width:10.5%;}
.logo a { display:block;}
.logo img { width:100%;}
.index-content { position:absolute; z-index:0; top:0; right:0; bottom:0; left:0; padding-top:9.5%; overflow:hidden; text-align:center; color:#fff; background:url('../images/bg.jpg')/*TODO 首页背景图*/ no-repeat 50% 50%; background-size:cover;}
.index-content h2 { font-size:400%;}
.index-content h3 { font-size:165%;}
.index-content h4 { position:relative; height:0; padding-bottom:3.5%;}
.index-content h4 span { position:absolute; left:0; width:100%; height:100%;}
.index-content h4 img { height:95%;}
.slide-box { position:relative; padding-top:1.2%;}
.slide-ios, .slide-android { position:absolute; width:12%;margin-top:10px;}
.slide-ios:hover, .slide-android:hover {transform:scale(1.05);transform-origin:50% 50%;-webkit-transform:scale(1.05);-webkit-transform-origin:50% 50%;-moz-transform:scale(1.05);-moz-transform-origin:50% 50%;}
.slide-android { left:35%; opacity:0; filter:alpha(opacity=0);}
.slide-ios { left:17%; opacity:0; filter:alpha(opacity=0);}
.slide-page { display:none; position:absolute; top:0; right:0; bottom:0; left:0; overflow:hidden; background-size:cover;}
.slide-page.active { display:block;}
.page-1 { padding-top:9.5%; text-align:center; background:url('../images/ios_bg_1.jpg') no-repeat 50% 50%;}
.page-1 h2 img { width:27.5%;}
.page-2 { background:url('../images/ios_bg_2.jpg') no-repeat 50% 50%;}
.page-3 { background:url('../images/ios_bg_3.jpg') no-repeat 50% 50%;}
.page-4 { background:url('../images/ios_bg_4.jpg') no-repeat 50% 50%;}
.page-android .page-1 { background:url('../images/android_bg_1.jpg') no-repeat 50% 50%;}
.page-android .page-2 { background:url('../images/android_bg_2.jpg') no-repeat 50% 50%;}
.page-android .page-3 { background:url('../images/android_bg_3.jpg') no-repeat 50% 50%;}
.page-android .page-4 { background:url('../images/android_bg_4.jpg') no-repeat 50% 50%;}
.video-box { position:absolute; top:18%; left:27.5%; width:14%; padding:4.3% 2.0% 4.5% 1.7%; background:url('../images/gif_i_bg.png') no-repeat 50% 50%; background-size:cover;}
.video-box video, .video-box img { width:100%;}
.page-android .video-box { padding:4.1% 1.75% 4.5% 1.50%; background:url('../images/gif_a_bg.png') no-repeat 50% 50%; background-size:cover;}
.text-desc { position:absolute; top: 33.3%; left:48.5%; width:33.3%; color:#fff;}
.text-desc h2 { font-size:700%;}
.text-desc p { font-size:260%;}
.slide-nav { position:fixed; top:50%; right:2.73%; margin-top:-49px;}
.slide-nav li { height:10px; width:10px; margin:10px 0; border:1px solid #fff; cursor:pointer; border-radius:50%;}
.slide-nav .active { background:#fff;}
.fun { width:65%; margin:auto; padding-top:3%;}
.fun li { float:left; width:33.3%;}
.fun p { font-size:180%; line-height:1; color:#fff;}
.fun-f p, .fun-u p { border-right:1px solid #fff;}
.fun-bg { position:relative; height:0; width:61%; margin:0 auto 8%; padding-bottom:61%; border-radius:14%; overflow:hidden; box-shadow:7px 7px 25px 0 rgba(0, 0, 0,.35);}
.fun-f .fun-bg {
    background:-moz-linear-gradient(left bottom, #f29d00, #ffde00);
    background:-webkit-linear-gradient(left bottom, #f29d00, #ffde00);
    background:-ms-linear-gradient(left bottom, #f29d00, #ffde00);
    background:linear-gradient(left bottom, #f29d00, #ffde00);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f29d00', endColorstr='#ffde00',GradientType=0);
}
.fun-u .fun-bg {
    background:-moz-linear-gradient(left bottom, #00e0c9, #00a6e1);
    background:-webkit-linear-gradient(left bottom, #00e0c9, #00a6e1);
    background:-ms-linear-gradient(left bottom, #00e0c9, #00a6e1);
    background:linear-gradient(left bottom, #00e0c9, #00a6e1);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e0c9', endColorstr='#00a6e1',GradientType=0);
}
.fun-n .fun-bg {
    background:-moz-linear-gradient(left bottom, #7a22a2, #bc4cb6);
    background:-webkit-linear-gradient(left bottom, #7a22a2, #bc4cb6);
    background:-ms-linear-gradient(left bottom, #7a22a2, #bc4cb6);
    background:linear-gradient(left bottom, #7a22a2, #bc4cb6);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a22a2', endColorstr='#bc4cb6',GradientType=0);
}
.fun-wrap { position:absolute; top:0; left:0; height:100%; width:100%;}
.fun-bg img { position:absolute; display:block; top:0; left:0; height:100%;}
.footer { position:absolute; z-index:9; width:100%; bottom:0;}
.aboutus .footer { position:relative; padding-bottom:1px;}
.footer-in { margin:1.17% 2.73%; border-top:1px solid #4d4d4d; border-bottom:1px solid #4d4d4d; font:100%/2.1 'CaviarDreams', 'Helvetica Neue', Helvetica, Arial, sans-serif;}
.footer a:hover { color:#fff;}
.copy-right { float:right;}
.user-agreement { display:inline-block; padding-right:1.45%; border-right:1px solid #4d4d4d;}
.privacy-policy { padding-left:1.45%;}
.sociality { position:fixed; z-index:9; bottom:10%; left:2.73%;}
.download { position:fixed; z-index:9; width:9%; bottom:10%; right:2.73%;}
.download a { display:block; margin-top:5%;}
.download img { display:block; width:100%;}
.aboutus { position:absolute; top:0; right:0; bottom:0; left:0; background:#ccc;}
.title {text-align:center;}
.title img { width:25%;}
.intro { position:relative; z-index:0; height:100%; background:url('../images/about_bg_1.jpg') 50% 50% no-repeat; background-size:cover;}
.intro-in { position:absolute; bottom:0; background:rgba(0, 0, 0, .7);}
.intro-content { width:65%; margin:auto; padding:2% 0; color:#fff; font-size:180%;}
.news { position:relative; z-index:-1; padding-top:41.5%; background:url('../images/about_bg_2.jpg') no-repeat fixed 50% 50%;}
.news-in { position:relative; padding:3% 10%; text-align:center;}
.news-in {
    background:-moz-linear-gradient(left, #00a2be, #003351);
    background:-webkit-linear-gradient(left, #00a2be, #003351);
    background:-ms-linear-gradient(left, #00a2be, #003351);
    background:linear-gradient(left, #00a2be, #003351);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a2be', endColorstr='#003351',GradientType=1);
}
.news-content { padding:2% 0; text-align:left; color:#fff; border-bottom:1px solid #fff;}
.news-content img { float:left; width:20%; margin-right:20px;}
.news-content h3 { font-size:200%;}
.news-content h3 a { color:#fff;}
.news-content h4 { font-size:140%;}
.news-content p { font-size:180%;}
.news-content:last-child { border-bottom:none;}
.news .more { display:inline-block; padding-top:3%; font-size:200%; color:#fff;}
.partner { position:relative; padding-top:32%; background:url('../images/about_bg_3.jpg') no-repeat fixed 50% 50%; background-size:cover;}
.partner-in .title { padding:2% 0;}
.partner-in .title {
    background: -moz-linear-gradient(left, #f16324, #fadc21);
    background: -webkit-linear-gradient(left, #f16324, #fadc21);
    background: -ms-linear-gradient(left, #f16324, #fadc21);
    background: linear-gradient(left, #f16324, #fadc21);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f16324', endColorstr='#fadc21',GradientType=1);
}
.partner-in .title img { width:15%;}
.logos { width:100%;}
#twitter-widget-0, .fb_iframe_widget { display:inline-block; vertical-align:middle;}
#magpie{
    width: 24rem;
    height: 12rem;
    position: absolute;
    top: 13rem;
    background: url(../images/web_popup.jpg) center center no-repeat;
    background-size: 100% auto;
    right: 0rem;
    -webkit-transform: translate3d(100%,0,0);
	-moz-transform: translate3d(100%,0,0);
	-ms-transform: translate3d(100%,0,0);
	-o-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
	-webkit-animation: webPopup 1s .5s linear forwards;
	-moz-animation: webPopup 1s .5s linear forwards;
	-ms-animation: webPopup 1s .5s linear forwards;
	-o-animation: webPopup 1s .5s linear forwards;
	animation: webPopup 1s .5s linear forwards;
}
@-webkit-keyframes webPopup {
	0%{
		-webkit-transform: translate3d(100%,0,0);
	}
	100%{
		-webkit-transform: translate3d(0,0,0);
	}
}
@-moz-keyframes webPopup {
	0%{
		-moz-transform: translate3d(100%,0,0);
	}
	100%{
		-moz-transform: translate3d(0,0,0);
	}
}
@-ms-keyframes webPopup {
	0%{
		-ms-transform: translate3d(100%,0,0);
	}
	100%{
		-ms-transform: translate3d(0,0,0);
	}
}
@keyframes webPopup {
	0%{
		transform: translate3d(100%,0,0);
	}
	100%{
		transform: translate3d(0,0,0);
	}
}