/*** 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 }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
body { line-height:1; font-family:"SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif; }
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 }

/*** Home ***/
.wrap { position: relative; z-index: 9; width: 1500px; margin: 0 auto; }
.wrap .logo { width: 240px; height: 120px; background: url(../images/logo.png) no-repeat; text-indent: -9999px; position: absolute; top: 40px; left: 0; }
.wrap .contact { position: absolute; right: 0; top: 90px; color: #999999; font-size: 18px; font-weight: lighter; }
.wrap .content { overflow: hidden; padding-top: 220px; }
.wrap .content .slogan { float: left; margin: 110px 0 0 30px; height: 360px; font-weight: lighter; }
.wrap .content .slogan h1 { color: #000; font-size: 48px; font-weight: bold; height: 60px; line-height: 60px; padding-bottom: 10px; }
.wrap .content .slogan h1 span { color: #FFC100; margin-left:15px; }
.wrap .content .slogan p { color: #999; font-size: 16px; line-height: 2; }
.wrap .content .img { width: 520px; height: 470px; background: url(../images/img.png) no-repeat; float: right; }
.download { margin-top: 40px; }
.download a { float: left; font-weight:bold; margin-right: 30px; width: 220px; font-size: 20px; box-shadow: 4px 10px 20px rgba(0, 0, 0, 0.1); height: 80px; color: #fff; line-height: 80px; text-decoration: none; text-align: center; border-radius: 10px; }
.download a span { font-weight:normal; font-size:16px; margin-left:10px; }
.download .btn_apple { background-color: #000; }
.download .btn_android { background-color: #FFC100; }
.copyright { position: absolute; bottom: 80px; color: #d6d6d6; font-size: 14px; width: 100%; text-align: center; z-index:999; }
.copyright a { margin-left:10px; color:#d6d6d6; text-decoration:none; }
.copyright a:hover { color:#666; }
@media screen and (max-width:1600px) {
	.wrap { width: 1200px; }
}
#cloud { position: fixed; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; }
#cloud div { position: relative; z-index: 1; background-size: auto 100%; background-repeat: no-repeat; }
#cloud .cloudBg { position: absolute; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; }
#cloud .cloudBg::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; background: #FFF; }
.cloud1 { left:600px; top: 80px; background-image: url('../images/cloud.png'); height: 60px; animation: cloud 150s linear infinite; -webkit-animation: cloud 150s linear infinite; -moz-animation: cloud 150s linear infinite; -o-animation: cloud 150s linear infinite; }
.cloud2 { left: 1100px; top: 150px; background-image: url('../images/cloud.png'); height: 100px; animation: cloud 90s linear infinite; -webkit-animation: cloud 90s linear infinite; -moz-animation: cloud 90s linear infinite; -o-animation: cloud 90s linear infinite; }
.cloud3 { left: 100px; top: 260px; background-image: url('../images/cloud.png'); height: 60px; animation: cloud 50s linear infinite; -webkit-animation: cloud 50s linear infinite; -moz-animation: cloud 50s linear infinite; -o-animation: cloud 50s linear infinite; }
.cloud4 { left: 750px; top: 500px; background-image: url('../images/cloud.png'); height: 55px; animation: cloud 30s linear infinite; -webkit-animation: cloud 30s linear infinite; -moz-animation: cloud 30s linear infinite; -o-animation: cloud 30s linear infinite; }
@keyframes cloud {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 100vw 0, 100vw 0; }
}
@-webkit-keyframes cloud {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 100vw 0, 100vw 0; }
}
@-moz-keyframes cloud {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 100vw 0, 100vw 0; }
}
@-o-keyframes cloud {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 100vw 0, 100vw 0; }
}