/* ------------------
 * Global style
 * --------------- */
body {
  background-color: #FFF;
  color: #444;
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei","Microsoft Yahei", sans-serif;
  font-size: 15px;
}

a {
  color: #058;
  text-decoration: none;
}
a:hover, a:active {
  color: #444;
}
pre, code { 
  background: #F3F3F3;
  font-family: Menlo, Monaco, Consolas, "Lucida Console", "Courier New", monospace;
  font-size: .92857em;
}
code { padding: 2px 4px; color: #B94A48; }
pre {
  padding: 8px;
  overflow: auto;
  max-height: 400px;
}
pre code {
  display: block;
  padding: 3px;
  color: #444;
}

blockquote {
  margin: 1em 0;
  padding: 10px;
  border-left: 4px solid #ff9696;
  color: #666;
  background: #ffeded;
}

table {
    width: 100%;
    margin: 20px 0;
    border-spacing: 0;
    border-collapse: collapse;
    border: 1px solid #ddd;
}

table>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9
}

table>tbody>tr:hover {
    background-color: #f5f5f5
}

td,th {
    border-right: 1px solid #ddd;
    border-bottom: 3px solid #ddd;
    font-weight: 400;
    padding: 8px;
    text-align: left;
    vertical-align: middle;
    word-break: break-word;
    min-width: 70px;
}

th {
    font-weight: 700;
    padding-bottom: 10px;
    background: #f3f3f3;
}

td {
    border-bottom-width: 1px;
    vertical-align: middle;
}

tr>td:nth-child(2) img{
    max-width: 150px !important;
    max-height: 50px;
    vertical-align: bottom;
    margin: 0;
}

tr>td:nth-child(2) figure{
    margin:0;
}

tr>td:nth-child(2) .article-holder{
    display:none;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei","Microsoft Yahei", sans-serif;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea {
  padding: 5px;
  border: 1px solid #E9E9E9;
  width: 100%;

  border-radius: 2px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
textarea {
  resize: vertical;
}
.fl{
  float: left;
}
.fr{
  float: right;
}


/* Special link style */
.post-meta a,
.post-content a,
.widget a,
.comment-content a {
  border-bottom: 1px solid #EEE;
}

.post-meta a:hover,
.post-content a:hover,
.widget a:hover,
.comment-content a:hover {
  border-bottom-color: transparent;
}

/* ------------------
 * Header
 * --------------- */
.site-name{
	padding:20px 0;
	display: flex;
	flex-direction: row;
	align-items: stretch;
}
.logo {
	overflow: hidden;
	margin: 0;
	margin-top: 3px;
}

.logo a {
	display: block;
	overflow: hidden;
	font-size: 0;
}

.logo img {
	vertical-align: top;
	max-height: 50px;
	display: block;
}

.brand {
	font-size: 16px;
	float: left;
	position: relative;
	margin-left: 10px;
	overflow: hidden;
	flex: 1;
	color: #636363;
}

.brand .sitename{
	font-size: 30px;
	font-weight: bold;
}

.site-nav{
  margin-top: 30px;
  padding-left: 0;
  margin-bottom: 0;
  white-space: nowrap;
  text-align: right;
}
.site-nav li{
  list-style:none;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.site-nav li a{
  padding: 6px 10px;
  color: #000000;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}
.site-nav li:nth-last-child(2){
	padding-left: 10px;
	margin-left: 5px;
	border-left: 1px solid #eee;
}
.page-header .row::after {
    border-bottom: 1px solid #eee;
    margin-left: 10px;
    margin-right: 10px;
    display: block;
}

/* Navigation menu */
.nav{
  background:#0e5077;
}
#nav-menu {
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
}
#nav-menu a {
  display: block;
  padding: 12px 20px;
  border-bottom: none;
  color: #fff;
  float: left;
  font-family: Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
}
#nav-menu a:hover,
#nav-menu .current {
background: #043d5f;
}

.site-search{
  margin-top: 30px;
  padding-left: 0;
  margin-bottom: 0;
  white-space: nowrap;
  text-align: right;
}
.site-search li{
  list-style:none;
  display: inline-block;
  position: relative;
}
.site-search li a{
  padding: 6px 10px;
    color: #777;
    line-height: 20px;
    text-decoration: none;
}

.site-search li:last-child{
    padding-left: 15px;
    margin-left: 5px;
    border-left: 1px solid #eee;
}
.site-search li:last-child a{
  background:#0e5077;
    color:#fff;
    display: inline-block;
    border-radius: 3px;
}

.banner{
  margin: 0;
  padding: 40px 0 40px;
  background-color: #043d5f;
  color: #fff;
  text-align: center;
}
.banner h2{
  text-align:center;
}
.home-shortcuts {
    margin: 0;
    background: #25a2c7;
    color: #fff;
}
.home-shortcuts .lead {
    margin: 0;
    line-height: 55px;
}
.home-shortcuts ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.home-shortcuts li:first-child {
    border-left: 1px solid #0e88b0;
}
.home-shortcuts li {
    float: left;
    padding: 17px 10px;
    border-right: 1px solid #0e88b0;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}
.home-shortcuts li a {
    display: block;
    color: #fff;
    text-decoration: none;
}
.home-shortcuts li p {
    margin: 2px 0 0;
    text-transform: uppercase;
}
.index .txt-center{
  text-align:center;
}
.index h2{
  font-size: 32px;
  line-height: 38px;
  font-weight: 700;
}

.index h3{
  font-size: 24px;
  line-height: 38px;
  font-weight:700;
}

.index h4{
  font-size: 20px;
  line-height: 38px;
  font-weight:normal;
}

.index h4 a{
  background:#043d5f;
  color:#fff;
  padding:1px 2px;
  border-radius:4px;
}

li.product {
    padding: 30px 10px 5px;
    margin: 0;
    background: url(shadow-btm.png) center bottom no-repeat;
    text-align: center;
    width: calc(33.33% - 23px);
    display: inline-block;
}
 .price-table {
    padding: 0;
    margin: 0;
    background: #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .3);
}
.box>ul{
  text-align:center;
}
.box ul{
  list-style:none;
  margin: 0;
  padding: 0;
}

.price-table ul li {
    padding: 17px 0 15px;
    margin: 0;
    width: 100%;
    border-bottom: 1px solid #d9d9d9;
    color: #333;
    text-align: center;
    line-height: 16px;
    font-size: 14px;
    background: 0 0;
    list-style: none;
}

.price-table .top-head {
    background: #069;
    background: -moz-linear-gradient(top, #069 0, #004c66 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #069), color-stop(100%, #004c66));
    background: -webkit-linear-gradient(top, #069 0, #004c66 100%);
    background: -o-linear-gradient(top, #069 0, #004c66 100%);
    background: -ms-linear-gradient(top, #069 0, #004c66 100%);
    background: linear-gradient(to bottom, #069 0, #004c66 100%);
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
}
.price-table .top-head .top-area {
    padding: 15px 0;
    margin: 0;
    border-bottom: 1px solid #004662;
    -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -ms-text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.price-table .top-head .top-area h4 {
    padding: 0;
    margin: 0;
    font-weight: 400;
    color: #fff;
    line-height: 29px;
    font-size: 24px;
}
.price-table .top-head .price-area {
    padding: 15px 0;
    margin: 0;
    border-top: 1px solid #12688d;
    -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -ms-text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    color: #ffffbf;
    font-size: 16px;
}
.price-table .top-head .price-area .price {
    padding: 10px 0;
}
.price-table .top-head .price-area .price span {
    font-size: 38px;
}

a.order-button{
    padding: 13px 0;
    margin: 10px 25px;
    font-size: 16px;
    display: block;
    font-weight: 400;
    background: #4a92b7;
    background: -moz-linear-gradient(top, #4a92b7 0, #069 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4a92b7), color-stop(100%, #069));
    background: -webkit-linear-gradient(top, #4a92b7 0, #069 100%);
    background: -o-linear-gradient(top, #4a92b7 0, #069 100%);
    background: -ms-linear-gradient(top, #4a92b7 0, #069 100%);
    background: linear-gradient(to bottom, #4a92b7 0, #069 100%);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
    -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, .4);
    -moz-text-shadow: 0 0 1px rgba(0, 0, 0, .4);
    -ms-text-shadow: 0 0 1px rgba(0, 0, 0, .4);
    text-shadow: 0 0 1px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .4);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .4);
    color: #fff;
}

/* Search */
#search {
  position: relative;
  margin-top: 15px;
}
#search input {
  padding-right: 30px;
}
#search button {
  position: absolute;
  right: 4px;
  top: 2px;
  border: none;
  padding: 0;
  width: 24px;
  height: 24px;
  background: transparent url(img/icon-search.png) no-repeat center center;
  direction: ltr; /* fix RTL language */
  text-indent: -9999em;
}


.tutorial-entry {
                    padding: 40px 0;
                    background: #ffffff;
                }

                .entry-card {
                    background: #ffffff;
                    border-radius: 12px;
                    padding: 40px;
                    text-align: center;
                    margin: 0 auto;
                    box-shadow: 0 4px 20px rgba(0, 102, 135, 0.06);
                    border: 1px solid #eef2f7;
                    transition: all 0.3s ease;
                }

                .entry-card:hover {
                    box-shadow: 0 8px 30px rgba(0, 102, 135, 0.1);
                    border-color: #0e5077;
                    transform: translateY(-2px);
                }

                .icon-wrapper {
                    width: 80px;
                    height: 80px;
                    margin: 0 auto 20px;
                    background: #f8f9fa;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .icon-wrapper svg {
                    color: #0e5077;
                }

                .entry-content h3 {
                    margin: 0 0 15px 0;
                    font-size: 28px;
                    font-weight: 600;
                }

                .entry-content p {
                    margin: 0 auto 25px;
                    font-size: 16px;
                    line-height: 1.6;
                    max-width: 600px;
                }

                .entry-button {
                    display: inline-flex;
                    align-items: center;
                    gap: 8px;
                    padding: 12px 28px;
                    background-color: #0e5077;
                    color: white;
                    text-decoration: none;
                    border-radius: 6px;
                    font-size: 16px;
                    font-weight: 500;
                    transition: all 0.2s ease;
                }

                .entry-button:hover {
                    transform: translateX(4px);
                    text-decoration: none;
                    color: white;
                }

                .arrow-icon {
                    transition: transform 0.2s ease;
                }

                .entry-button:hover .arrow-icon {
                    transform: translateX(4px);
                }

                @media (max-width: 768px) {
                    .entry-card {
                        padding: 30px 20px;
                        margin: 0 15px;
                    }
                    .entry-content h3 {
                        font-size: 24px;
                    }
                    .entry-content p {
                        font-size: 15px;
                    }
                }
.faq-section {
                    padding: 40px 0;
                    background: #ffffff;
                }
                .section-header {
                    text-align: center;
                    margin-bottom: 40px;
                }
                .section-header h3 {
                    color: #2c3e50;
                    font-size: 28px;
                    font-weight: 600;
                    margin-bottom: 15px;
                    font-family: Raleway,"Helvetica Neue",Helvetica,Arial,sans-serif;
                }
                .faq-list {
                    margin: 0 auto;
                }
                .faq-item {
                    background: #ffffff;
                    border-radius: 12px;
                    padding: 25px 30px;
                    margin-bottom: 20px;
                    box-shadow: 0 4px 20px rgba(0, 102, 135, 0.06);
                    border: 1px solid #eef2f7;
                    transition: all 0.3s ease;
                }
                .faq-item:hover {
                    box-shadow: 0 8px 30px rgba(0, 102, 135, 0.1);
                    border-color: #0e5077;
                }
                .faq-question {
                    display: flex;
                    align-items: center;
                    margin-bottom: 15px;
                }
                .question-icon, .answer-icon {
                    width: 28px;
                    height: 28px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 600;
                    margin-right: 15px;
                    flex-shrink: 0;
                }

                .question-icon {
                    background: #e3f2fd;
                    color: #0e5077;
                }

                .answer-icon {
                    background: #fef2f2;
                    color: #dc3545;
                }

                .faq-question h4 {
                    margin: 0;
                    font-size: 18px;
                    font-weight: 700;
                }

                .faq-answer {
                    display: flex;
                    align-items: flex-start;
                    color: #666;
                    line-height: 1.6;
                }

                .faq-answer .answer-content {
                    flex: 1;
                }

                .faq-answer p {
                    margin: 0 0 10px 0;
                    font-size: 16px;
                }

                .faq-answer p:last-child {
                    margin-bottom: 0;
                }

                @media (max-width: 768px) {
                    .faq-item {
                        padding: 20px;
                    }

                    .faq-question h4 {
                        font-size: 16px;
                    }

                    .faq-answer p {
                        font-size: 15px;
                    }
                }

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
  #search button {
    background-image: url(img/icon-search@2x.png);
    -webkit-background-size: 24px 24px;
    -moz-background-size: 24px 24px;
    -o-background-size: 24px 24px;
    background-size: 24px 24px;
  }
}


/* ------------------
 * Main
 * --------------- */

#main {
    padding: 0;
    width: calc(100% - 360px);
    min-width: 360px;
}

.post {
  padding: 15px 0 15px;
  border-bottom: 1px solid #EEE;
  display: block;
  overflow: hidden;
}
.post>h1.post-title{
  font-size:24px;
  padding-bottom: 10px;
}
.post .fm{
  width: 140px;
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 4 / 2.5;
  border: 1px solid #c1c1c1;
  position: relative;
  margin-right: 15px;
  float: left;
}
.post .fm img{
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.post-title {
  margin: 0px 0 5px;
  font-size: 18px;
  font-weight: bold;
  line-height: 25px;
}

.post-meta {
  padding: 0 0 10px;
  color: #999;
  font-size: 12px;
  margin: 0;
  border-bottom: 1px solid #f2f2f2;
}
.post-meta li {
  display: inline-block;
  margin: 0 8px 0 0;
  padding-left: 12px;
  border-left: 1px solid #EEE;
}
.post-meta li:first-child {
  margin-left: 0;
  padding-left: 0;
  border: none;
}
.post-content {
  line-height: 1.5;
}
.post .tags {
  clear: both;
}

.post-near {
  list-style: none;
  margin: 30px 0;
  padding: 0;
  color: #999;
}
.post-near li {
  margin: 10px 0;
}

.archive-title {
    color: #000;
    font-size: 18px;
    margin: 25px 0px 0px;
}
.more {
  text-align: center;
}
.more a {
  border: none;
}
.protected .text {
  width: 50%;
}

/* Page nav */

.page-navigator {
  list-style: none;
  margin: 25px 0;
  padding: 0;
  text-align: center;
}
.page-navigator li {
  display: inline-block;
  margin: 0 4px;
}
.page-navigator a {
  display: inline-block;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
}
.page-navigator a:hover {
  background: #EEE;
  text-decoration: none;
}

.page-navigator .current a {
  color: #444;
  background: #EEE;
}

/* ------------------
 * Comment list
 * --------------- */
#comments {
  padding-top: 15px;
}
.comment-list, .comment-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comment-list li {
  padding: 14px;
  margin-top: 10px;
  border: 1px solid #EEE;
}
.comment-list li.comment-level-odd {
  background: #F6F6F3;
}
.comment-list li.comment-level-even {
  background: #FFF;
}
.comment-list li.comment-by-author {
  background: #FFF9E8;
}
.comment-list li .comment-reply {
  text-align: right;
  font-size: .92857em;
}
.comment-meta a {
  color: #999;
  font-size: .92857em;
}
.comment-author {
  display: block;
  margin-bottom: 3px;
  color: #444;
}
.comment-author .avatar {
  float: left;
  margin-right: 10px;
}
.comment-author cite {
  font-weight: bold;
  font-style: normal;
}

/* Comment reply */
.comment-list .respond {
  margin-top: 15px;
  border-top: 1px solid #EEE;
}
.respond .cancel-comment-reply {
  float: right;
  margin-top: 15px;
  font-size: .92857em;
}
#comment-form label {
  display: block;
  margin-bottom: .5em;
  font-weight: bold;
}
#comment-form .required:after {
  content: " *";
  color: #C00;
}

/* ------------------
 * secondary
 * --------------- */
#secondary {
  padding-top: 15px;
  word-wrap: break-word;
    width: 300px;
}
.widget {
  margin-bottom: 30px;
}
.widget-list {
  list-style: none;
  padding: 0;
}
.widget-list li {
  margin: 5px 0;
  line-height: 1.6;
}

.widget-list li ul {
  margin-left: 15px;
}

.coupon{
  background: #fafafa none repeat scroll 0 0;
  border: 2px dashed #000;
  box-sizing: border-box;
  margin: 10px 0 20px;
  padding: 10px 5px 10px 10px;
}

.coupon .coupon-title{
    font-size: 20px;
    margin: 5px 0 10px 0 !important;
  font-weight:bold;
}

.coupon .coupon-code{
  text-align: center;
}

.coupon .coupon-code a{
  background: #0e5077;
  margin: 0 auto;
  color: #fff;
  font-size: 18px;
  font-family: Microsoft Yahei;
  border-radius: 5px;
  padding: 2px 4px;
}

.coupon .coupon-desc{
  border-top: 1px dashed #ccc;
  padding:10px 0;
  font-size:15px;
  text-align: center;
}

.coupon .coupon-expire{
  color: green;
  text-align: center;
  margin-top: 5px;
  width: 100%;
  font-size: 14px;
}

/* ------------------
 * Footer 
 * --------------- */
#footer {
  margin: 0;
  padding: 20px 10px;
  background-color: #f8f8f8;
  border-top: 1px solid #ddd;
  color: #666;
}


/* -----------------
 * Error page
 * -------------- */
.error-page {
  margin-top: 100px;
  margin-bottom: 100px;
}


/* -----------------
 * Content format
 *--------------- */
.post-content, .comment-content {
  line-height: 1.5;
  word-wrap: break-word;
}
.post-content h2, .comment-content h2 {
  font-size: 1.28571em;
}
.post-content img, .comment-content img,
.post-content video, .comment-content video {
  max-width: 100%;
  border: 2px solid #eee;
  box-sizing: border-box;
}
.post-content a img,
.comment-content a img {
  background: #FFF;
  position: relative;
  bottom: -4px;  /* hidden img parent link border  */
}
.post-content hr, .comment-content hr {
  margin: 2em auto;
  width: 100px;
  border: 1px solid #E9E9E9;
  border-width: 2px 0 0 0;
}


/* -----------------
 * Misc
 *--------------- */
.aligncenter, div.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.alignleft {
  float: left;
}
.alignright {
  float: right;
}
img.alignleft {
  margin: 0 15px 0 0;
}
img.alignright {
  margin: 0 0 0 15px;
}


/* -----------------
 * APP Page
 *--------------- */
.page-app section{
	margin: 120px 0;
}
.page-app .hero{
	margin-top: 100px !important;
	max-width: 950px;
	margin:0 auto;
}

.page-app .hero,.page-app .feature hgroup,.page-app .download hgroup,.page-app .screenshot hgroup{
	text-align:center;
}

.page-app hgroup h1{
	font-size: 60px;
	line-height: 1.3;
	font-weight:bold;
}

.page-app hgroup h2{
	font-size: 35px;
	line-height: 1.3;
	font-weight:bold;
	margin: 0;
}

.page-app hgroup h1 span{
	font-size:40px;
}

.page-app hgroup p{
	font-size:20px;
	color: #636363;
	line-height: 32px;
}

.page-app hgroup mark{
	background: linear-gradient(to right, #84266d, #6f3985, #5d409a, #43489d);
    background-clip: text;
    color: transparent;
}

.page-app .hero .app-btn{
	margin: 40px 0 80px 0;
}

.page-app .hero .app-btn a{
	padding: 15px 40px;
	border-radius:5px;
	color:#fff;
	background:#181c25;
	display: inline-flex;
	font-size:20px;
	font-weight:400;
	text-align:center;
	line-height: 25px;
}

.page-app .hero .app-btn a[role=button] svg {
    width: auto;
    height: 25px;
    margin-left: 10px;
    margin-top: 0px;
}

.page-app .hero .app-btn a:first-child {
    background: #45479c;
    margin-right:20px;
}


a .icon-arrow-right {
    --icon-right-toggle-duration: 0.2s;
}

a .icon-arrow-right g.head {
    transform: translate(0);
}

a .icon-arrow-right g.head,a .icon-arrow-right path.line {
    transition-property: transform;
    transition-timing-function: ease-in-out;
}

a .icon-arrow-right path.line {
    transform: translate(0) scaleX(0);
    transform-origin: 14px;
}

a .icon-arrow-right g.head,a .icon-arrow-right path.line {
    transition-property: transform;
    transition-timing-function: ease-in-out;
}

a:hover .icon-arrow-right path.line {
    transform: translate(5px) scaleX(1);
}

a:hover .icon-arrow-right g.head {
    transform: translate(5px);
}


.page-app .hero .image {
    display: flex;
    position: relative;
    flex-direction: column;
}

.page-app .hero .image:before {
    z-index: 0;
    position: absolute;
    inset: -70px;
    background: linear-gradient(0deg, #a6000000 33%, #e9cbe8, #ddcef4, #d0d3f2, #cbd4f5);
    content: "";
    filter: blur(40px);
    opacity: .35;
}

.page-app .hero .image article.component {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    background-color: #fff;
    border-radius: 11px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px;
    box-shadow: none;
    height: 450px;
}

.page-app .hero .image:after {
    border-radius: 10px;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; 
    background: linear-gradient(to top, rgb(255 255 255) 0%, #ffffff00 100%);
    pointer-events: none;
}

.page-app .feature .grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 50px;
    grid-row-gap: 50px;
    display: grid;
    margin-top: 50px;
}

.page-app .feature .grid article {
    margin-bottom: 0;
    margin-block:0;
    padding: 30px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
}

.page-app .feature .icon{
	width:24px;
	height: 24px;
}
.page-app .feature .grid article h3 {
    font-size: 22px;
    font-weight: bold;
    display: inline;
    margin: 0;
    margin-left: 10px;
    vertical-align: top;
}

.page-app .feature .grid article svg {
    height: 26px;
    margin: 0;
}

.page-app .feature .grid article p {
    color: #636363;
    text-wrap: pretty;
    font-size: 17px;
    margin: 10px 0 0;
    line-height: 30px;
}

.page-app .download .zhongduan{text-align:center;}
.page-app .download .zhongduan .downloadLink{
    background: #eee;
    display: block;
    border-radius: 50%;
    padding: 30px;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.page-app .download .grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
    margin-top: 50px;
}

.page-app .download .downloadLink-btn{
	padding: 10px 15px;
	border-radius: 50px;
	color: #fff;
	background: #000000;
	display: inline-flex;
	font-size: 18px;
	font-weight: 400;
	text-align: center;
	font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif;
}

.page-app .screenshot .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 50px;
    grid-row-gap: 50px;
    display: grid;
    margin-top: 50px;
}

.page-app .screenshot .grid article {
    margin-bottom: 0;
    margin-block:0;
    padding: 5px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
}
.page-app .screenshot .grid article img{
    width:100%;
}

/* -----------------
 * Responsive
 *--------------- */
@media (max-width: 767px) {
  body {
  }
  #nav-menu a {
    float: none;
    display: inline-block;
    margin: 0 -2px;
  }
  #main{
    width:100%;
  }
  .post .fm{
    width: 90px;
    aspect-ratio: 1;
  }
  #secondary{
    width:100%;
  }
}

@media (max-width: 768px) {
  #header {
    text-align: center;
  }
}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}


/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
  display: none !important;
  visibility: hidden; }

/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.sr-only {
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/*
* Extends the .sr-only class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
  visibility: hidden; }