html {
  height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti', SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
}
.ui.blue.button,
.ui.blue.buttons .button {
  background-color: #4090eb;
  font-weight: normal;
}
.ui.blue.button:hover,
.ui.blue.buttons .button:hover {
  background-color: #1678c2;
}
body {
  font-family: 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti', SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
  overflow-y: scroll;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #eef0f1;
  font-size: 13px;
}
body .wrapper {
  width: 100%;
}
body .ui.blue.button {
  border-radius: 2px;
}
body .ui.basic.blue.button {
  color: #4090eb !important;
  box-shadow: 0 0 0 1px #4090eb inset !important;
}
body .hide {
  display: none;
}
body a {
  color: #4090eb;
}
body .ui.container {
  width: 1100px;
}
body .pull-right {
  float: right;
}
body .clear-fix {
  clear: both;
}
.navbar.ui.menu {
  height: 59px;
  margin-bottom: 0;
  border: none;
  border-bottom: 1px solid #eaeaea;
  border-radius: 0;
  box-shadow: none;
}
.navbar.ui.menu .logo.item img {
  width: 135px !important;
}
.footer {
  height: 70px;
  color: #999;
  background-color: #232527;
  font-size: 12px;
}
.footer .ui.grid > .row {
  padding: 0;
}
.footer .contact.column {
  padding-top: 15px;
  text-align: left;
}
.footer .feedback.column {
  padding-top: 15px !important;
  text-align: right;
}
.footer .feedback.column i.icon {
  margin: 0 2px 0 5px;
}
.download.ui.modal {
  min-width: 720px;
}
.download.ui.modal .header {
  color: #666;
  font-weight: normal;
}
.download.ui.modal .header img {
  padding: 0;
}
.download.ui.modal .content {
  padding: 14px 0 0;
}
.download.ui.modal .content .section {
  padding: 30px 24px;
}
.download.ui.modal .content .section h3 {
  font-size: 16px;
  color: #666;
  font-weight: normal;
  margin-bottom: 24px;
}
.download.ui.modal .content .section .download.button {
  width: 178px;
  padding: 13px 0;
  border-radius: 3px;
  font-size: 12px;
}
.download.ui.modal .content .section .download.button i.icon {
  margin-right: 2px;
  font-size: 18px;
}
.download.ui.modal .content .section .download.button i.icon.windows {
  transform: translateY(2px);
}
.download.ui.modal .content .section.v2 {
  margin-top: 24px;
  background: #eef0f1;
}
.index.page .section {
  padding: 40px 0;
  border-top: 1px solid #e1e1e1;
}
.index.page .section h3 {
  text-align: center;
  color: #666;
  font-size: 18px;
  font-weight: normal;
}
.index.page .section p.subtitle {
  margin-bottom: 30px;
  text-align: center;
  color: #999;
  font-size: 13px;
}
.index.page .hero {
  padding-top: 40px;
  background-color: white;
}
.index.page .hero.animated .interfaces-box {
  opacity: 1;
}
.index.page .hero.animated .interfaces-box .list-ui {
  transition: all 0.5s;
  transform: translateX(0);
  opacity: 1;
}
.index.page .hero.animated .interfaces-box .compare-ui {
  transition: all 0.5s 0.5s;
  transform: translateX(0);
  opacity: 1;
}
.index.page .hero .ui.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.index.page .hero .interfaces-box .vjs-big-play-button {
  background: none;
  border: none;
  transform: translateY(-30px);
}
.index.page .hero .interfaces-box .vjs-big-play-button:focus {
  outline: none;
}
.index.page .hero .intro-box {
  min-width: 480px;
  width: 480px;
  margin: 70px 30px 0;
}
.index.page .hero .intro-box h2 {
  text-align: center;
  color: #444;
  font-size: 24px;
  font-weight: normal;
}
.index.page .hero .intro-box p {
  margin-top: 30px;
  color: #666;
  font-size: 13px;
  line-height: 24px;
}
.index.page .hero .intro-box .downloads {
  padding: 45px 40px;
}
.index.page .hero .intro-box .downloads .column {
  text-align: center;
}
.index.page .hero .intro-box .downloads .column .button {
  margin-bottom: 10px;
  border-radius: 3px;
}
.index.page .hero .intro-box .downloads .column .ver {
  transform: translateY(-5px);
  color: #999;
}
.index.page .hero .intro-box .downloads .column a.link {
  font-size: 13px;
}
.index.page .compare.section {
  background-color: #eef0f1;
}
.index.page .compare.section .diff-section .formats {
  margin-top: -10px;
  margin-bottom: 20px;
  text-align: center;
}
.index.page .compare.section .diff-section .formats .ui.menu {
  box-shadow: none;
  font-size: 13px;
}
.index.page .compare.section .diff-section .formats .ui.menu .item {
  padding: 10px 20px;
}
.index.page .compare.section .diff-section .formats .ui.menu .item span {
  padding-right: 20px;
}
.index.page .compare.section .diff-section .diff-box {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.index.page .compare.section .diff-section .diff-box .images {
  position: relative;
  overflow: hidden;
  width: 1100px;
  height: 380px;
  background: #aaa url("/static/img/loading.1e715f0551cd.svg") no-repeat center center;
}
.index.page .compare.section .diff-section .diff-box .images .original,
.index.page .compare.section .diff-section .diff-box .images .compressed {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  height: 100%;
}
.index.page .compare.section .diff-section .diff-box .images .original img,
.index.page .compare.section .diff-section .diff-box .images .compressed img {
  width: 1100px;
  opacity: 0;
}
.index.page .compare.section .diff-section .diff-box .images .original:before,
.index.page .compare.section .diff-section .diff-box .images .compressed:before {
  position: absolute;
  top: 0;
  display: inline-block;
  width: 70px;
  margin: 5px;
  padding: 1px 15px;
  text-align: center;
  color: white;
  border-radius: 1px;
  background-color: rgba(0, 0, 0, 0.3);
  font-size: 12px;
}
.index.page .compare.section .diff-section .diff-box .images .original {
  z-index: 2;
  border-right: 1px solid rgba(0, 0, 0, 0.5);
}
.index.page .compare.section .diff-section .diff-box .images .original:before {
  z-index: 2;
  left: 0;
  content: '鍘嬬缉鍓�';
}
.index.page .compare.section .diff-section .diff-box .images .compressed:before {
  z-index: 1;
  right: 0;
  content: '鍘嬬缉鍚�';
}
.index.page .compare.section .diff-section .diff-box .images.gif img {
  transform: translateY(-80px);
}
.index.page .compare.section .diff-section .diff-box .images.ready img {
  opacity: 1;
}
.index.page .compare.section .diff-section .diff-box .stats {
  text-align: center;
  color: #999;
  background-color: white;
  font-size: 12px;
  line-height: 46px;
}
.index.page .compare.section .diff-section .diff-box .stats em {
  margin: 0 4px;
  color: #666;
  font-size: 16px;
}
.index.page .compare.section .diff-section .diff-box .stats a.download {
  margin-right: 20px;
  margin-left: -1000px;
}
.index.page .features.section {
  background-color: #f8f8f8;
}
.index.page .features.section .benefits {
  padding-bottom: 20px;
  text-align: center;
  color: #999;
}
.index.page .features.section .scenes {
  padding-top: 20px;
  border-top: 1px solid #e7e7e7;
}
.index.page .features.section .scenes .column .ui.card {
  width: 300px;
  height: 380px;
  margin: 0 auto 30px auto;
  border-radius: 2px;
}
.index.page .features.section .scenes .column .ui.card .image {
  height: 220px;
}
.index.page .features.section .scenes .column .ui.card .image img {
  border-radius: 2px 2px 0 0;
}
.index.page .features.section .scenes .column .ui.card .jobs {
  position: relative;
  z-index: 1;
  width: 120px;
  margin: -30px auto 0 auto;
  text-align: center;
  color: #fff;
  border-radius: 100px;
  background-color: #000000;
  line-height: 30px;
}
.index.page .features.section .scenes .column .ui.card .quote {
  margin: 10px 20px 0 20px;
  text-align: left;
  color: #999;
  font-size: 12px;
  line-height: 22px;
}
.index.page .features.section .scenes .column .ui.card .quote:before,
.index.page .features.section .scenes .column .ui.card .quote:after {
  margin: 0 -25px;
  color: #ddd;
  font-family: Icons;
  font-size: 18px;
}
.index.page .features.section .scenes .column .ui.card .quote:before {
  float: left;
  content: '\f10d';
}
.index.page .features.section .scenes .column .ui.card .quote:after {
  float: right;
  content: '\f10e';
}
.index.page .features.section .scenes .column .buy.ui.card {
  background-image: url("/static/img/slogan.74fbff677365.png");
  text-align: center;
  border: 1px solid #7dbce0;
  background: #b5dbf1 no-repeat 12px 12px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  .index.page .features.section .scenes .column .buy.ui.card {
    background-image: url("/static/img/slogan@2x.8af2a110e94b.png");
    background-size: 275px 300px;
  }
}
.index.page .features.section .scenes .column .buy.ui.card .button {
  margin-top: 302px;
  padding: 13px 20px;
  border-radius: 2px;
  font-weight: normal;
}
.index.page .trust.section {
  text-align: center;
  background-color: #f0f0f0;
}
.index.page .trust.section .ui.divided.grid:not([class*='vertically divided']) > .row > .column {
  box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.05);
}
.index.page .trust.section .reasons.grid .column h4 {
  margin-top: -26px;
  margin-bottom: 5px;
  color: #666;
  font-size: 16px;
  font-weight: normal;
}
.index.page .trust.section .reasons.grid .column p {
  color: #999;
  font-size: 13px;
}
.index.page .trust.section .reasons.grid .column .button {
  color: #4090eb;
  font-size: 13px;
  font-weight: normal;
}
.index.page .trust.section .reasons.grid .column .button i {
  float: left;
  margin-top: -2px;
  margin-right: 5px;
  font-size: 16px;
}
.index.page .download-footer {
  padding-top: 40px;
  background-color: #333538;
}
.index.page .download-footer > .ui.grid {
  padding: 1em;
}
.index.page .download-footer img.uis {
  position: absolute;
  bottom: 0;
  left: 120px;
}
.index.page .download-footer .actions.column {
  padding: 50px 30px 50px 0;
  text-align: center;
}
.index.page .download-footer .actions.column h3 {
  padding-bottom: 10px;
  letter-spacing: 3px;
  color: #a2a2a2;
  font-size: 28px;
  font-weight: normal;
}
.index.page .download-footer .actions.column .downloads.ui.grid {
  width: 400px;
  margin: 0 auto;
}
.index.page .download-footer .actions.column .ui.button {
  border-radius: 2px;
  font-weight: normal;
}
.index.page .download-footer .actions.column .ui.button.inverted {
  width: 150px;
  box-shadow: 0 0 0 1px white inset !important;
}
.index.page .download-footer .actions.column .ui.button.inverted:hover {
  box-shadow: 0 0 0 1px #bbb inset !important;
}
.index.page .download-footer .actions.column .ver {
  transform: translateY(7px);
  color: #999;
}
.index.page .download-footer .actions.column a.link {
  display: inline-block;
  width: 150px;
  margin-top: 10px;
  text-align: center;
  color: white;
}
.index.page .download-footer .actions.column a.link:hover {
  color: #ddd;
}
.order.page {
  height: 100%;
  padding-top: 10px;
  background-color: #eef0f1;
}
.order.page input[type=text],
.order.page input[type=number],
.order.page input[type=checkbox],
.order.page textarea {
  border-radius: 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05) inset;
}
.order.page input[type=text]:focus,
.order.page input[type=number]:focus,
.order.page input[type=checkbox]:focus,
.order.page textarea:focus {
  border-radius: 0;
}
.order.page .ui.divider {
  opacity: 0.5;
}
.order.page .steps {
  text-align: center;
  line-height: 90px;
}
.order.page .steps h2 {
  display: inline-block;
  color: #dadada;
  font-size: 24px;
}
.order.page .steps h2.active {
  color: #666;
}
.order.page .steps i.right.arrow {
  margin: 0 30px;
  color: #666;
}
.order.page .steps i.right.arrow:before {
  float: left;
  margin-top: -39px;
}
.order.create.page .order.form {
  width: 600px;
  margin: 0 auto 100px auto;
  color: #666;
}
.order.create.page .order.form .fields {
  clear: both;
}
.order.create.page .order.form .InputField {
  position: relative;
}
.order.create.page .order.form .InputField .red.pointing.label {
  position: absolute;
  top: 4px;
}
.order.create.page .order.form .InputField .red.pointing.label.left {
  left: 100%;
  margin-right: -100%;
}
.order.create.page .order.form .InputField .red.pointing.label.right {
  transform: translateX(-120%);
}
.order.create.page .order.form .InputField label + .red.pointing.label {
  top: 26px;
}
.order.create.page .order.form .CheckboxField {
  position: relative;
}
.order.create.page .order.form .CheckboxField .red.pointing.label {
  position: absolute;
}
.order.create.page .order.form .CheckboxField .red.pointing.label.right {
  top: -3px;
  transform: translateX(-110%);
}
.order.create.page .order.form .inline.field label,
.order.create.page .order.form .field label {
  font-size: 13px;
  font-weight: normal;
}
.order.create.page .order.form .inline.field small,
.order.create.page .order.form .field small {
  display: inline-block;
  color: #999;
  font-size: 12px;
}
.order.create.page .order.form .inline.field small a.action,
.order.create.page .order.form .field small a.action {
  margin-right: 10px;
  color: #999;
  border-bottom: 1px dotted #999;
}
.order.create.page .order.form .head {
  background-image: url("/static/img/pay_bill_bg_top.6141ef47f5c6.png");
  height: 20px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  .order.create.page .order.form .head {
    background-image: url("/static/img/pay_bill_bg_top@2x.2382617f7e65.png");
    background-size: 600px 20px;
  }
}
.order.create.page .order.form .body {
  background-image: url("/static/img/pay_bill_bg_body.b15ca9ff8687.png");
  padding: 30px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  .order.create.page .order.form .body {
    background-image: url("/static/img/pay_bill_bg_body@2x.cfc2f86f6c6a.png");
    background-size: 600px 10px;
  }
}
.order.create.page .order.form .tail {
  background-image: url("/static/img/pay_bill_bg_footer.7089eb369bb9.png");
  height: 50px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  .order.create.page .order.form .tail {
    background-image: url("/static/img/pay_bill_bg_footer@2x.ece3be08512b.png");
    background-size: 600px 50px;
  }
}
.order.create.page .order.form .ui.divider {
  margin: 20px 0;
}
.order.create.page .order.form .total-price {
  margin-bottom: 30px;
  text-align: center;
}
.order.create.page .order.form .total-price h4 {
  color: #4090eb;
  font-size: 24px;
}
.order.create.page .order.form .quantity .input {
  margin-top: -10px;
}
.order.create.page .order.form .quantity .input input {
  width: 80px;
  text-align: center;
  border-width: 1px 0;
}
.order.create.page .order.form .quantity .input input::placeholder {
  color: #aaa;
}
.order.create.page .order.form .quantity .input .button {
  border-radius: 0;
}
.order.create.page .order.form .quantity small {
  margin: 10px -5px 10px 10px;
}
.order.create.page .order.form .invoice .invoice-checkbox {
  float: left;
  margin-right: 10px;
}
.order.create.page .order.form .agreement pre {
  line-height: 22px;
  background-color: white;
  padding: 5px;
  white-space: pre-line;
  color: #444;
}
.order.create.page .order.form .agreement pre b {
  color: #db2828;
}
.order.create.page .order.form .action {
  text-align: center;
}
.order.create.page .order.form .action .button {
  margin: 0;
  font-size: 14px;
}
.order-confirm.ui.modal {
  margin-top: -150px;
}
.order-confirm.ui.modal .actions {
  text-align: center !important;
}
.order.success.page {
  padding-bottom: 0px;
}
.order.success.page .result.ui.segments {
  position: relative;
  width: 586px;
  margin: 0 auto;
  color: #666;
  border: 1px solid #e3e4e4;
  border-radius: 2px;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.03);
}
.order.success.page .result.ui.segments .main.ui.segment {
  background-color: #f6f6f6;
}
.order.success.page .result.ui.segments .main.ui.segment .ribbon {
  position: absolute;
  top: 0;
  left: 0;
}
.order.success.page .result.ui.segments .main.ui.segment h1 {
  margin: -5px 0 30px 0;
  text-align: center;
  font-size: 32px;
  font-weight: normal;
}
.order.success.page .result.ui.segments .main.ui.segment .codes {
  padding: 15px;
  /*text-align: center;*/
  max-height: 225px;
  overflow-y: auto;
}
.order.success.page .result.ui.segments .main.ui.segment .codes p {
  color: #4090eb;
  font-family: monospace;
  /*font-size: 20px;*/
  line-height: 24px;
}
.order.success.page .result.ui.segments .main.ui.segment .codes p .code-type{
  display: inline-block;
  width: 55px;
}
.order.success.page .result.ui.segments .main.ui.segment .codes p .code{
  cursor: pointer;
  width: 225px;
  display: inline-block;
}
.order.success.page .result.ui.segments .main.ui.segment .codes p .code-date{
  width: 143px;
  display: inline-block;
  margin-left: 8px;
}
.order.success.page .result.ui.segments .main.ui.segment .codes p .code-copy{
  cursor: pointer;
  display: none;
}
.order.success.page .result.ui.segments .main.ui.segment .extra {
  margin-top: 20px;
  text-align: center;
}
.order.success.page .result.ui.segments .main.ui.segment .extra p {
  color: #999;
}
.order.success.page .result.ui.segments .main.ui.segment .extra .backup {
  margin-top: 20px;
}
.order.success.page .result.ui.segments .main.ui.segment .extra .backup > * {
  display: inline-block;
  margin: 5px;
}
.order.success.page .result.ui.segments .downloads.ui.segment {
  padding: 20px;
  text-align: center;
  border-top: none;
  background-color: #ededed;
}
.order.success.page .result.ui.segments .downloads.ui.segment .ui.button {
  margin: 10px;
}
.alert-box {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  background-color: rgba(0,0,0,.6);
  border: 1px solid #ddd;
  z-index: 1000;
  text-align: center;
  color: #fff;
  border-radius: 5px;
}
.alert-box.active {
  display: block;
}