html, body, div, h1, h2, h3, p, ul, li, table, th, td {
  margin: 0;
  padding: 0;
}
body {
  min-width: 1000px;
  padding-top: 64px;
  background: #fff;
  color: #333;
  font: 14px/1.5 "Microsoft YaHei", "PingFang SC", "Source Han Sans CN", SimSun, Arial, sans-serif;
  text-align: left;
}
a { color: inherit; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: none; }
img { border: 0; vertical-align: top; }
ul { list-style: none; }
.container { width: 900px; margin: 0 auto; }
.clearfix:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; }
.clearfix { zoom: 1; }
.accessible-title { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.section-title { height: 36px; font-size: 24px; line-height: 36px; font-weight: bold; text-align: center; color: #333; }
#features, #formats, #advantages, #tutorial, #reviews { scroll-margin-top: 80px; }

.header { position: fixed; left: 0; top: 0; z-index: 1000; width: 100%; height: 64px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .05); }
.brand { float: left; height: 64px; color: #333; font-size: 16px; font-weight: bold; line-height: 64px; }
.brand img { float: left; width: 30px; height: 30px; margin: 17px 8px 0 0; }
.brand span { float: left; }
.header-nav { float: left; margin-left: 32px; }
.header-nav a { float: left; display: block; padding: 0 14px; color: #777; font-size: 14px; line-height: 64px; transition: color .2s; }
.header-nav a:hover { color: #f88476; }
.login-btn { float: right; width: 80px; height: 32px; margin-top: 16px; background: #f88476; color: #fff; font-size: 14px; line-height: 32px; text-align: center; border-radius: 6px; transition: background-color .2s; }
.login-btn:hover, .primary-btn:hover { background: #f57567; }

.hero { height: 500px; background: #fffaf4 url("../images/hero-bg.jpg") center center no-repeat; }
.hero-inner { position: relative; height: 500px; }
.hero-copy { position: absolute; z-index: 2; left: 0; top: 50%; width: 390px; height: 280px; margin-top: -140px; animation: heroEnter .55s ease-out both; }
.hero h1 { height: 40px; font-size: 32px; line-height: 40px; color: #333; }
.hero-description { margin-top: 8px; color: #999; font-size: 16px; line-height: 26px; }
.primary-btn { display: inline-block; width: 162px; height: 40px; background: #f88476; color: #fff; font-size: 16px; line-height: 40px; text-align: center; border-radius: 6px; box-shadow: 0 4px 12px rgba(248, 132, 118, .18); transition: background-color .2s, box-shadow .2s, transform .2s; }
.primary-btn:hover { box-shadow: 0 6px 16px rgba(248, 132, 118, .3); transform: translateY(-1px); }
.hero-download { margin-top: 30px; }
.hero-more { display: inline-block; width: 100px; height: 38px; margin-left: 12px; color: #f88476; font-size: 14px; line-height: 38px; text-align: center; border: 1px solid #f88476; border-radius: 6px; transition: background-color .2s; }
.hero-more:hover { background: #fff5f2; }
.windows-icon { display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; }
.hero-badges { margin-top: 30px; color: #666; font-size: 14px; line-height: 20px; }
.hero-badges span { position: relative; display: inline-block; margin-right: 24px; padding-left: 22px; }
.badge-dot { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; }
.hero-meta { margin-top: 20px; color: #aaa; font-size: 12px; line-height: 20px; }
.hero-meta span { margin-right: 16px; }
.hero-picture { position: absolute; z-index: 1; left: 420px; top: 50%; width: 480px; height: 320px; margin-top: -160px; animation: heroEnter .55s ease-out both; }
.hero-product-frame { background: #fff; border-radius: 8px; box-shadow: 0 16px 44px rgba(159, 99, 79, .16); animation: heroFloat 5s ease-in-out infinite; }
.hero-product-frame img { display: block; width: 480px; height: 260px; border-radius: 8px; }
.hero-float-label { position: absolute; display: block; padding: 8px 12px; background: #fff; background: rgba(255, 255, 255, .92); color: #f88476; font-size: 12px; line-height: 20px; border-radius: 6px; box-shadow: 0 6px 18px rgba(159, 99, 79, .12); }
.hero-float-label b { font-size: 20px; font-weight: normal; }
.label-format { left: -24px; top: 42px; }
.label-batch { right: -16px; bottom: 28px; }
.label-safe { right: 24px; top: -16px; }
@keyframes heroEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.features { height: 688px; }
.features .section-title { padding-top: 16px; }
.feature-tabs { height: 74px; margin-top: 40px; }
.feature-tab { position: relative; float: left; display: block; width: 180px; height: 74px; color: #999; text-align: center; transition: color .2s; }
.feature-tab img { display: block; width: 38px; height: 38px; margin: 0 auto; transition: transform .2s; }
.feature-tab span { display: block; height: 24px; font-size: 16px; line-height: 24px; }
.feature-tab i { display: block; width: 84px; height: 4px; margin: 4px auto 0; background: #fff; transition: background-color .2s; }
.feature-tab.active { color: #333; }
.feature-tab.active i { background: #f88476; }
.feature-tab:hover { color: #f88476; }
.feature-tab:hover img { transform: translateY(-2px); }
.feature-detail { margin-top: 24px; }
.conversion-screen { position: relative; height: 306px; overflow: hidden; background: #fff; }
.feature-state { position: absolute; left: 0; top: 0; display: none; width: 900px; height: 220px; }
.feature-state-first { display: block; }
.video-preview { position: absolute; top: 24px; width: 370px; height: 190px; overflow: hidden; border-radius: 8px; }
.video-preview img { width: 370px; height: 190px; }
.video-preview span { position: absolute; left: 10px; top: 10px; width: 50px; height: 24px; background: #55472e; color: #fff; font-size: 12px; line-height: 24px; text-align: center; border-radius: 4px; }
.preview-left { left: 24px; }
.preview-right { left: 506px; }
.conversion-mark { position: absolute; left: 432px; top: 100px; width: 36px; height: 36px; }
.conversion-mark img { width: 36px; height: 36px; }
.wide-preview { position: absolute; left: 24px; top: 24px; width: 852px; height: 190px; overflow: hidden; border-radius: 8px; }
.wide-preview img { position: absolute; left: -10px; top: -10px; }
.format-badge { position: absolute; left: 10px; top: 10px; width: 60px; height: 24px; background: #999; color: #fff; font-size: 12px; line-height: 24px; text-align: center; border-radius: 4px; }
.badge-center-right { left: 436px; }
.preview-divider { position: absolute; left: 426px; top: 0; width: 1px; height: 190px; background: #fff; }
.wide-action { position: absolute; left: 424px; top: 93px; width: 52px; height: 52px; background: #fff; background: rgba(255, 255, 255, .82); border-radius: 26px; box-shadow: 0 4px 16px rgba(0, 0, 0, .08); }
.wide-action img { width: 36px; height: 36px; margin: 8px; }
.split-half { width: 420px; }
.split-left { left: 24px; }
.split-right { left: 468px; }
.progress-track { position: absolute; left: 24px; top: 239px; width: 852px; height: 10px; overflow: hidden; background: #f2f2f2; border-radius: 6px; }
.progress-value { width: 80%; height: 10px; background: #f88476; border-radius: 6px; transition: width .35s ease; }
.progress-split-mask { position: absolute; left: 31.5%; top: 0; display: none; width: 32px; height: 10px; background: #fff; }
.progress-split-mask i { display: block; width: 2px; height: 10px; margin: 0 auto; background: #f88476; }
.progress-copy { position: absolute; left: 24px; top: 258px; width: 852px; color: #999; font-size: 14px; line-height: 24px; }
.progress-copy span:first-child { float: left; }
.progress-copy span:last-child { float: right; }
.feature-summary { height: 119px; margin-top: 16px; border-bottom: 1px solid #fafafa; }
.feature-tags { height: 32px; }
.feature-tags span { display: inline-block; height: 24px; margin-right: 8px; padding: 3px 12px; border: 1px solid #f5a095; color: #666; font-size: 14px; line-height: 24px; border-radius: 6px; }
.feature-summary p { margin-top: 8px; color: #999; font-size: 14px; line-height: 24px; }

.formats { height: 456px; padding-top: 56px; }
.format-intro { height: 24px; margin-top: 12px; color: #999; font-size: 14px; line-height: 24px; text-align: center; }
.format-panel { height: 132px; margin-top: 32px; padding: 20px; background: #fff; box-shadow: 0 8px 30px #f8f1ee; }
.format-column { float: left; width: 420px; }
.format-column-last { margin-left: 20px; }
.format-column h3 { height: 24px; color: #555; font-size: 16px; line-height: 24px; }
.format-column h3 span { float: right; color: #aaa; font-size: 12px; font-weight: normal; }
.format-chips span { float: left; display: block; width: 60px; height: 28px; margin: 8px 6px 0 0; background: #fff7f4; color: #888; font-size: 12px; line-height: 28px; text-align: center; border: 1px solid #f7ece8; border-radius: 4px; transition: color .2s, border-color .2s, transform .2s; }
.format-chips span:hover { color: #f88476; border-color: #f88476; transform: translateY(-2px); }
.conversion-pairs { height: 72px; margin-top: 24px; text-align: center; }
.conversion-row-last { margin-top: 8px; }
.conversion-pairs span { display: inline-block; height: 16px; margin: 0 6px; padding: 8px 14px; background: #fff7f4; color: #777; font-size: 13px; line-height: 16px; border-radius: 16px; }
.format-features { height: 24px; margin-top: 20px; color: #999; font-size: 12px; line-height: 24px; text-align: center; }
.format-features span { display: inline-block; margin: 0 14px; }

.applications { height: 576px; overflow: hidden; background: #fff9f7; background: linear-gradient(120deg, #fffaf5 0%, #fff 48%, #fff4f5 100%); }
.applications-inner { padding-top: 32px; }
.applications-intro { height: 24px; margin-top: 8px; color: #aaa; font-size: 14px; line-height: 24px; text-align: center; }
.applications-picture { display: block; width: 639px; height: 436px; margin: 8px auto 0; }

.other-features { padding-top: 56px; }
.other-stage { position: relative; height: 540px; margin-top: 40px; }
.other-picture { position: absolute; display: block; }
.edit-picture { left: 430px; top: 0; width: 470px; height: 260px; }
.gif-picture { left: 0; top: 280px; width: 480px; height: 260px; }
.feature-copy { position: absolute; width: 390px; }
.feature-copy h3 { height: 36px; color: #333; font-size: 18px; line-height: 36px; font-weight: normal; }
.feature-copy h3 img { float: left; width: 36px; height: 36px; margin-right: 10px; }
.feature-copy p { margin-top: 16px; color: #999; font-size: 14px; line-height: 26px; }
.edit-copy { left: 0; top: 65px; }
.gif-copy { left: 510px; top: 355px; }
.stage-arrow { position: absolute; top: 210px; width: 64px; height: 64px; background: #fff; border: 1px solid #f6f6f6; border-radius: 32px; box-shadow: 0 4px 16px #f4f4f4; transition: box-shadow .2s; }
.stage-arrow:hover { box-shadow: 0 6px 20px #eaeaea; }
.stage-arrow img { display: block; width: 40px; height: 40px; margin: 11px auto 0; }
.arrow-left { left: -96px; }
.arrow-right { right: -96px; }
.mini-feature-grid { height: 96px; margin-top: 32px; }
.mini-feature-item { float: left; width: 190px; height: 64px; margin-right: 20px; padding: 16px 10px; background: #fffaf8; border-radius: 6px; transition: box-shadow .2s, transform .2s; }
.mini-feature-item.last { margin-right: 0; }
.mini-feature-item:hover { box-shadow: 0 6px 18px #f5ebe7; transform: translateY(-2px); }
.mini-feature-item img { float: left; width: 32px; height: 32px; margin-right: 10px; }
.mini-feature-item h3 { font-size: 14px; line-height: 22px; }
.mini-feature-item p { color: #999; font-size: 12px; line-height: 20px; }

.advantages { height: 314px; margin-top: 56px; margin-bottom: 56px; }
.advantage-list { height: 158px; margin-top: 40px; }
.advantage-item { float: left; width: 132px; height: 158px; margin-right: 60px; text-align: center; }
.advantage-item.last { margin-right: 0; }
.advantage-item img { display: block; width: 66px; height: 60px; margin: 0 auto; }
.advantage-item h3 { margin-top: 12px; font-size: 16px; line-height: 24px; font-weight: normal; }
.advantage-item p { margin-top: 6px; color: #999; font-size: 12px; line-height: 18px; }
.center-button { text-align: center; }
.advantages .center-button { margin-top: 40px; }

.tutorial { height: 328px; }
.tutorial-panel { height: 196px; margin-top: 40px; background: #fff8f9; }
.tutorial-step { position: relative; float: left; width: 220px; height: 176px; padding: 20px 40px 0; text-align: center; }
.step-icon { height: 56px; }
.step-icon img { display: block; width: 35px; height: 41px; margin: 0 auto; }
.tutorial-step h3 { margin-top: 4px; font-size: 14px; line-height: 24px; }
.tutorial-step p { color: #999; font-size: 12px; line-height: 20px; }
.step-arrow { position: absolute; left: -10px; top: 78px; width: 20px; height: 20px; }

.reviews { height: 644px; }
.review-list { height: 512px; margin-top: 40px; }
.review-row { position: relative; height: 128px; }
.review-avatar { position: absolute; top: 6px; width: 80px; height: 80px; border-radius: 40px; }
.avatar-left { left: 0; }
.avatar-right { right: 0; }
.review-content { width: 386px; padding: 12px 16px; background: #fff; color: #999; font-size: 12px; line-height: 18px; box-shadow: 0 3px 12px #f4f4f4; }
.content-left { margin-left: 104px; }
.content-right { margin-left: 378px; }

.footer { height: 344px; background: #fffaf4 url("../images/hero-bg.jpg") center center no-repeat; }
.footer-benefits { height: 118px; padding-top: 56px; }
.footer-benefit { float: left; width: 225px; text-align: center; }
.footer-benefit img { display: block; width: 46px; height: 46px; margin: 0 auto; }
.footer-benefit h3 { margin-top: 8px; font-size: 18px; line-height: 24px; }
.footer-benefit p { color: #999; font-size: 14px; line-height: 24px; }
.footer .center-button { margin-top: 32px; }
.footer .primary-btn { width: 210px; height: 48px; line-height: 48px; }
.footer .site-copyright { margin-top: 22px; color: #b3a89f; font-size: 12px; line-height: 18px; text-align: center; }

.back-top { position: fixed; right: 24px; bottom: 24px; z-index: 999; display: block; width: 56px; height: 56px; background: #fff; color: #f88476; font-size: 18px; line-height: 20px; text-align: center; border: 1px solid #f7ece8; border-radius: 28px; box-shadow: 0 6px 20px #eee; transition: box-shadow .2s, transform .2s; }
.back-top span { display: block; color: #999; font-size: 12px; line-height: 16px; }
.back-top:hover { box-shadow: 0 8px 24px #e5e5e5; transform: translateY(-2px); }
.service-widget { position: fixed; right: 24px; bottom: 100px; z-index: 1001; display: block; width: 64px; height: 64px; background: #f88476; color: #fff; font-size: 14px; line-height: 20px; text-align: center; border-radius: 6px; box-shadow: 0 6px 20px #eee; }
.service-widget:hover { background: #f57567; }
.service-widget-icon { display: block; width: 22px; height: 22px; margin: 6px auto 0; }
.service-widget-label { display: block; padding-top: 2px; font-size: 12px; line-height: 16px; }
.service-popup { position: absolute; right: 76px; bottom: 0; display: none; width: 134px; padding: 10px; background: #fff; color: #777; border: 1px solid #f3e8e4; border-radius: 6px; box-shadow: 0 8px 26px #eee; }
.service-popup img { display: block; width: 110px; height: 110px; margin: 0 auto 4px; }
.service-popup b { display: block; font-size: 12px; line-height: 20px; font-weight: normal; }
.service-widget:hover .service-popup { display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero-copy, .hero-picture, .hero-product-frame { animation: none; }
  .primary-btn, .feature-tab, .feature-tab img, .format-chips span, .back-top { transition: none; }
}