.div-title {
    font-size: 3.6rem;
}
.mail-small {
    font-size: 2rem;
}
.tel-small {
    font-size: 2.6rem;
}
/**
.footer-about {
    margin-top: 30px;
}
**/
.home-mt, .product-mt {
    margin-top: 100px;
}
.product-mt-60 {
    margin-top: 60px;
}
.product-mt-40 {
    margin-top: 40px;
}
.product-mt-80 {
    margin-top: 80px;
}
.product-pb-30 {
    padding-bottom: 30px;
}
.product-pb-100 {
    padding-bottom: 100px;
}

.product-pt-100 {
    padding-top: 100px;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #fffefe;
}

@font-face {
    font-family: 'Axiforma';
    src: url('/static/styles/font/Axiforma-Regular.otf');
}

body, h1, h2, h3, h4, h5, h6, p, table, td, div, input {
    font-family: Axiforma,PingFang SC,Helvetica Neue,Hiragino Sans GB,Microsoft Yahei,WenQuanYi Micro Hei,sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: auto;
    -moz-font-feature-settings: "liga","kern";
    text-rendering: optimizeLegibility;
}

h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
}

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #B7BFC9;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #B7BFC9;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #B7BFC9;
}
.form-control::-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #B7BFC9;
}

.landing-page p, .landing-page .btn-see-more {
}
.gery_bk{
    background:#F4F8FB !important;
}
.padding0{
    padding-right:0px;
}
.padding35{
    padding-top:20px;
}
.padding100{
     padding-bottom:100px;
}
.l_h{
    line-height:28px;
}

.mt_50{
    margin-top:50px;
}
.mt_80{
    margin-top:80px;
}
.mt_60{
    margin-top:60px;
}

.mt_d20{
   margin-top:-20px;
}

.mt_100{
    margin-top:100px;
}

.font-14 {
    font-size: 1.4rem;
}

.font-22 {
    font-size: 2.2rem;
}

.font-28 {
    font-size: 2.8rem;
}

.font-32 {
    font-size: 3.2rem;
}
.font-36 {
    font-size: 3.6rem;
}

.font-46 {
    font-size: 4.6rem;
}

.color-333 {
    color: #333333 !important;
}
.color-blue {
    color: #3B86FF !important;
}
.color-0A0D26 {
    color: #0A0D26 !important;
}

.hover-blue:hover{
    cursor: pointer;
    color: #3278d9 !important;
}

.font-26{ font-size:26px !important;}
.font-24{ font-size:24px !important;}
.font-20{ font-size:20px !important;}
.font-18{ font-size:18px !important;}
.font-16{ font-size:16px !important;}
.font-14{ font-size:14px !important;}
.font-13{ font-size:13px !important;}
.mt-0 { margin-top:0px !important;}
.mt-100 { margin-top:100px !important;}
.mt-80 { margin-top:80px !important;}
.mt-70 { margin-top:70px !important;}
.mt-60 { margin-top:60px !important;}
.mt-50 { margin-top:50px !important;}
.mt-45 { margin-top:45px !important;}
.mt-35 { margin-top:35px !important;}
.mt-30 { margin-top:30px !important;}
.mt-25 { margin-top:25px !important;}
.mt-20 { margin-top:20px !important;}
.mt-16 { margin-top:16px !important;}
.mt-18 { margin-top:18px !important;}
.mt-15 { margin-top:15px !important;}
.mt-5 { margin-top:5px !important;}
.mb-0 { margin-bottom:0px !important;}
.mb-14 { margin-bottom:14px !important;}
.mb-15 { margin-bottom:15px !important;}
.mb-20 { margin-bottom:20px !important;}
.mb-25 { margin-bottom:25px !important;}
.mb-30 { margin-bottom:30px !important;}
.mb-40 { margin-bottom:40px !important;}
.mb-45 { margin-bottom:45px !important;}
.mb-50 { margin-bottom:50px !important;}
.mb-60 { margin-bottom:60px !important;}
.mb-80 { margin-bottom:80px !important;}
.mb-100 { margin-bottom:100px !important;}
.mt-160 { margin-top:160px !important;}
.mt-140 { margin-top:140px !important;}
.mt-120 { margin-top:120px !important;}
.mt-20 { margin-top:20px !important;}
.mt-10 { margin-top:10px !important;}
.mt-30 { margin-top:30px !important;}
.mt-40 { margin-top:40px !important;}
.mr-10{ margin-right:10px !important;}
.mr-20 { margin-right:20px !important;}
.mr-30 { margin-right:30px !important;}
.ml-10{ margin-left:10px !important;}
.ml-15{ margin-left:15px !important;}
.ml-30 { margin-left:30px !important;}
.ml-40 { margin-left:40px !important;}
.ml-50 { margin-left:50px !important;}
.pt-10{ padding-top: 10px; }
.pt-20{ padding-top: 20px; }
.pt-30{ padding-top: 30px; }
.pt-40{ padding-top: 40px; }
.pt-50{ padding-top: 50px; }
.pt-70{ padding-top: 70px; }
.pt-80{ padding-top: 80px; }
.pt-90{ padding-top: 90px; }
.pt-100{ padding-top: 100px; }
.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pb-50 { padding-bottom: 50px; }
.pb-80 { padding-bottom: 80px; }
.pb-100 { padding-bottom: 100px; }
.pb-60{ padding-bottom: 60px; }
.pl-80{ padding-left: 80px; }
.pl-60{ padding-left: 60px; }
.pl-40{ padding-left: 40px; }
.pl-30{ padding-left: 30px; }
.pl-20{ padding-left: 20px; }
.pl-0{ padding-left: 0px; }
.pr-80{ padding-right: 80px; }
.pr-60{ padding-right: 60px; }
.pr-40{ padding-right: 40px; }
.pr-20{ padding-right: 20px; }
.pr-0{ padding-right: 0px; }
.pbt-10{ padding-top: 10px; padding-bottom: 10px; }
.pbt-20{ padding-top: 20px; padding-bottom: 20px; }
.pbt-30{ padding-top: 30px; padding-bottom: 30px; }
.plr-20{ padding-left: 20px; padding-right: 20px; }
.plr-30{ padding-left: 30px; padding-right: 30px; }
.plr-40{ padding-left: 40px; padding-right: 40px; }
.mlr-20{ margin-left: 20px; margin-right: 20px; }
.mlr-35{ margin-left: 35px; margin-right: 35px; }
.mlr-0{ margin-left: 0px; margin-right: 0px; }
.mbt-20{ margin-bottom: 20px; margin-top: 20px; }

.wd-15 {width: 15px;}
.wd-20 {width: 20px;}
.wd-28 {width: 28px;}
.wd-32 {width: 32px;}
.wd-48 {width: 48px;}
.wd-80 {width: 80px;}
.wd-90 {width: 90px;}
.wd-100 {width: 100px;}
.wd-110 {width: 110px;}
.hg-48 {height: 48px;}
.hg-80 {height: 80px}
.hg-100 {height: 100px}
.hg-250 {height: 250px}
.minHg-60 { min-height: 60px;}
.minHg-70 { min-height: 70px;}

.border-left-radius-6 {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

input.border-0 {
    border: 0px;
}

.color-fff{ color:#fff !important}
/* .color-gray{color:#878f92 !important} */
.color-gray{color:#8A97A9 !important}

.main_color{
    color:#195583 !important;
}
.bk_color{
 background-color:#195583 !important;
}

.b_r{
    border-radius:5px;
}
.m_r20{
    margin-right:20px;
}
.f_input{
height: 46px; width:400px; border-radius: 10px;border:1px solid #f2f2f2;
}
.f_input:focus{
             outline:none !important;
             box-shadow:none !important;
            border:1px solid #f2f2f2;                 
 }

 .bt_cs{
padding :10px 25px;
}

/* footer */
.container .about p {
    text-align: left;
}
.container .about ul {
    list-style: none;
    text-align: left;
    margin: 0;
    padding: 0;
    margin-top: 0px;
    float:left; 
}
.container .about ul li {
    line-height: 26px;
    font-size: 14px;
    color: #555;
    text-align: left;
    line-height: 26px;
}
.container .about ul li a {
    color: #555;
    font-size: 16px;
    text-decoration: none !important;
}
.container .about ul li a:hover {
    color: #1abc9c;
}
.container .about ul li .btn-default {
    background: #aaa;
    border: #aaa;
    color: #fff !important;
    font-size: 14px;
    padding: 3px 15px;
}
.container .about ul li .btn-default:hover {
    background: #1abc9c;
}
.container .about ul li a img {
    margin-bottom: 3px;
    margin-right: 5px;
}
.hr-line-footer-top {
  background-color: transparent;
  border-top: 1px solid #e5e4e4;
  color: transparent;
  height: 1px;
  margin: 20px 0;
}
.footer-text-color {
    color:#777 !important;
}

.hr-line-footer-top {
    background-color: transparent;
    border-top: 1px solid #e5e4e4;
    color: transparent;
    height: 1px;
    margin: 20px 0;
}
.copyright {
    color: #999 !important;
    padding-bottom:10px;
    position: relative;
}
.corpinfo {
    position: absolute;
    left:20px;
}
.navbar {margin-bottom:0px !important;}
.navbar-nav li a { line-height:30px !important; font-weight:normal !important}
.landing-page header{
    background: linear-gradient(0deg,rgba(244,248,251,1) 0%,rgba(255,255,255,1) 100%);
    /*background: url(../images/newhome/beijin.png) no-repeat;
    background-size: cover;
    background-position: center;*/
    /* height: 500px; */
    height: auto;
    padding-top: 0px;
    margin-bottom: 0px;
}

.navbar ul li ul.son {
    width: 141px;
    position: absolute;
    top: 65px;
    left: -1px;
    padding: 10px 0;
    border: 1px solid #e7e7e7;
    z-index: 9999;
    list-style:none;
    background:#fff;
    padding:0 10px;
    display:none;
}
.navbar ul li ul.son li{ height:45px; line-height:45px; text-align:center; border-bottom:1px solid #e7e7e7}
.navbar ul li ul.son li a{ display:block; line-height:45px !important;}
.navbar ul li ul.son li a:hover{ color:#333;}

.btn-index {
    border-radius:6px;
    border: 1px solid #fff;
    color: #fff;
    padding: 13px 40px;
}

.btn-primary {
    background-color: #337ab7;
    border-color: #337ab7;
    color: #ffffff;
}

.btn-index:hover{
    background:#fff;
    color: #1d5681;
}
.btn-detail {
    /* background:#1d5681; */
    background: #3B86FF;
    border-radius:6px;
    /* border: 1px solid #fff; */
    color: #fff;
    padding: 12px 40px;
}
.btn-detail:hover,
.btn-detail:focus{
    /* background:#226292; */
    background: #3278d9;
    color:#fff
}

.btn-purple {
    background-color:#6443bc !important;
    border-color:#6443bc !important;
}

.btn-purple:hover {
    border-color: #d9dbdd !important;
}

.btn-deepblue {
    background-color:#1668d1 !important;
    border-color:#1668d1 !important;
}

.btn-deepblue:hover {
    border-color: #d9dbdd !important;
}

.right-line{ border-right:1px solid #f5f5f5}
.back-f2f2f2{background:#f2f2f2}
.pl-20{padding-left:20px}
.home-input{ height:45px; outline:none !important;}
.home-input:focus{ outline:none !important; box-shadow: none !important  }
.home-btn{ height:45px;background:#3B86FF !important;border:none;}
.home-btn:hover{background:#3278d9 !important;}
.pl-0{ padding-left:0px !important;}
.pr-0{ padding-right:0px !important}



/* footer */
.container .about p {
    text-align: left;
}
.container .about ul {
    list-style: none;
    text-align: left;
    margin: 0;
    padding: 0;
    margin-top: 0px;
    float:left; 
}
.container .about ul li {
    line-height: 26px;
    font-size: 14px;
    color: #555;
    text-align: left;
    line-height: 26px;
}
.container .about ul li a {
    color: #878f92;
    font-size: 14px;
    text-decoration: none !important;
}
.container .about ul li a:hover {
    color: #878f92;
}
.container .about ul li .btn-default {
    background: #aaa;
    border: #aaa;
    color: #fff !important;
    font-size: 14px;
    padding: 3px 15px;
}
.container .about ul li .btn-default:hover {
    background: #1abc9c;
}
.container .about ul li a img {
    margin-bottom: 3px;
    margin-right: 5px;
}

.container .about .img-zhihu {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    color: #878f92;
    border: 1px solid #878f92;
    background: url(../images/zhihu_gray.png) no-repeat;
    background-size:60% 60%;
    background-position: center;
    display: inline-block;
    float:left;
}
.container .about .img-zhihu:hover {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #878f92;
    border-radius: 50%;
    background: url(../images/zhihu_white.png) no-repeat;
    background-size:60% 60%;
    background-position: center;
    background-color: rgb(34,98,146);
    display: inline-block;
    float:left;
}
.container .about .f-chat {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    color: #878f92;
    border: 1px solid #878f92;
    display: inline-block;
    float:left;
    margin-right:15px;
}
.container .about .f-chat:hover {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #ffffff;
    border: 1px solid #878f92;
    border-radius: 50%;
    background-color: rgb(34,98,146);
    display: inline-block;
    float:left;
    margin-right:15px;
}
.container .about .f-frontjs {
    width: 44px;
    height: 44px;
    background: url(../images/logo-frontjs-default.png) no-repeat;
    display: inline-block;
    border-radius:50%;
    background-size:cover;
    margin-left:10px;
 }
.container .about .f-frontjs:hover {
    width: 44px;
    height: 44px;
    border-radius:50%;
    background: url(../images/logo-frontjs-hover.png) no-repeat;
    background-size:cover;
}

.container .about .wxwb {
    margin-top: 20px;
    width: 150px;
}
.container .about .f-pgyer {
    width: 150px;
    display: block;
}
.container .about .f-tracup {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: url(../images/logo-tracup-default.png) no-repeat;
    background-size: cover;
    display: inline-block;
}
.container .about .f-tracup:hover {
    width: 44px;
    height: 44px;
    background: url(../images/logo-tracup-hover.png) no-repeat;
    background-size: cover;
}
.small-pgyer-logo{
    background: url(../images/pgyer-logo-footer-small.png) no-repeat;
    width:13px;
    height:18px;
    display: inline-block;
    background-size:cover;
    background-position: center;
    position: absolute;
}
.hr-line-footer-top {
  background-color: transparent;
  border-top: 1px solid #e5e4e4;
  color: transparent;
  height: 1px;
  margin: 20px 0;
}
.footer-text-color {
    color:#777 !important;
}
.bg-footer-dark{
    padding: 0px !important;
    background: #0E212F;
    color:#A2ADBB !important;
}
.bg-footer-dark p{
    color:#A2ADBB !important;
}
.bg-footer-dark a{
    color:#A2ADBB !important;
}
.bg-footer-dark a:hover{
    color:#fff !important;
}


.home-pen{
     position: absolute;
     left:620px;
     top:353px;
     width:112px;
}
.home-plant{
     position: absolute;
     left:400px;
     width:312px;
}
.home-coffee{
     position: absolute;
     right:-40px;
     top:215px;
     width:226px;
}
.home-mac{
     position: absolute;
     right:175px;
     top:57px;
     width:670px;
}

.home-header{ position: relative !important; padding-right:0px !important; padding-left:0px !important; }
@media (min-width: 1400px) and (max-width:1600px){
.home-pen{
     position: absolute;
     left:500px;
     top:372px;
     width:100px;
}
.home-plant{
     position: absolute;
     left:400px;
     width:280px;
}
.home-coffee{
     position: absolute;
     right:0px;
     top:270px;
     width:200px;
}
.home-mac{
     position: absolute;
     right:180px;
     top:128px;
     width:570px;
}
/* .home-header { width:1400px !important;} */
.home-header .row{ margin-left:20px !important;}
}


@media (min-width: 1200px) and (max-width:1399px){
.home-pen{
     position: absolute;
     left:500px;
     top:422px;
     width:70px;
}
.home-plant{
     position: absolute;
     left:460px;
     width:200px;
}
.home-coffee{
     position: absolute;
     right:0px;
     top:330px;
     width:140px;
}
.home-mac{
     position: absolute;
     right:120px;
     top:193px;
     width:480px;
}
/* .home-header { width:1200px !important;} */
.home-header .row{ margin-left:20px !important;}

}


@media (min-width: 1100px) and (max-width:1199px){
.home-pen{
     position: absolute;
     left:400px;
     top:453px;
     width:50px;
}
.home-plant{
     position: absolute;
     left:460px;
     width:140px;
}
.home-coffee{
     position: absolute;
     right:0px;
     top:400px;
     width:100px;
}
.home-mac{
     position: absolute;
     right:80px;
     top:250px;
     width:400px;
}
/* .home-header { width:1100px !important;} */
}



@media (min-width: 999px) and (max-width:1100px){
.home-pen{
     position: absolute;
     left:400px;
     top:453px;
     width:50px;
}
.home-plant{
     position: absolute;
     left:460px;
     width:140px;
}
.home-coffee{
     position: absolute;
     right:0px;
     top:400px;
     width:100px;
}
.home-mac{
     position: absolute;
     right:80px;
     top:250px;
     width:400px;
}
/* .home-header { width:999px !important;} */
}

.solgan{ padding-right:15px; padding-left:15px; }

@media  (max-width:999px){
.home-pen{
    display:none;
}
.home-plant{
    display:none;
}
.home-coffee{
    display:none;
}
.home-mac{
    display:none;
}
.landing-page header{ height:auto !important;}
.home-header {width:auto !important;}
.home-header .row{ margin-left:20px !important; margin-right:20px !important; text-align:center !important;margin-top:60px !important; margin-bottom:60px !important;}
}
.navbar-toggle{ margin-top:13px !important}
.navbar-toggle:hover{background:#2b3134 !important}

.topbanner {
    width: 100%;
    height: 190px;
    background: url(../images/login-top.png) center bottom no-repeat;
    background-size: cover;
    position: relative;
}

.login-container {
    max-width: 300px;
    margin:auto;
    margin-top: 30px;
    padding-top: 0;
}

.input-lg {
    font-size: 16px;
}

.btn-lg {
    font-size: 16px;
}

.btn-forget-pwd {
    margin-top: 15px !important;
    margin-bottom: 20px;
}

.banner-logo {
    position: absolute;
    width: 100%;
    bottom: 25px;
    text-align: center;
}

.brand {
    background-image: url(../images/logo-bug.png);
    background-size: 255px 66px;
    display: block;
    height: 66px;
    margin: 0 auto 35px;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.has-logged {
    margin-bottom: 20px;
    background-color: #f5f6f7;
    width: 100%;
    padding: 20px 20px 20px 20px;
    border-radius: 4px;
    position: relative;
    /*
    margin-top: 26px;
    */
}
.people-logo-setting {
    width: 50px;
    height: 50px;
    margin: 10px auto;
}
.btn-login, .btn-register {
    background-color:#145587;
    border-color:#337ab7;
}

.btn-register:active:focus, .btn-register:active:hover, .btn-login:active:focus, .btn-login:active:hover  {
    background-color: #3B86FF;
    border-color: #3B86FF;
}

.btn-login:hover, .btn-login:focus, .btn-login:active, .btn-login:active,  
.btn-register:hover, .btn-register:focus, .btn-register:active
{
    background-color: #3B86FF;
    border-color: #3B86FF;
}

.btn-success.disabled, .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled:active, .btn-success.disabled.active, .btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled]:active, .btn-success.active[disabled], fieldset[disabled] .btn-success, fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success.active {
    background-color: #226292;
    border-color: #226292;
}
.btnp {
    font-size: 18px;
    height: 46px;
    text-align: center;
    line-height: 44px;
    display: block;
    text-decoration: none !important;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.create_btn {
    margin-top: 50px;
    width: 200px;
    border: 1px solid #337ab7;
    color: #337ab7 !important;
}
.create_btn:hover{color:#fff !important;background:#337ab7}
.error-v4 h1 {
    color: #555;
    font-size: 40px;
    margin-top: 35px;
    line-height: 50px;
}
.error-v4 p.regret {
    color: #555;
    font-size: 24px;
}

/*about us */


.mt_100 {
    margin-top : 100px
}

.about_us p {
    line-height : 24px;
    color :#878f92 !important;
    padding :0px;
    font-size: 16px !important;
   /*** margin-bottom:24px;*/
}

.about_us .col-md-2 {
    padding:0px;
}

.about_us h4 {
    font-size: 20px;
    margin-bottom:24px;
    margin-top:50px;
    color:#333333 !important;
}

.history_log {
    margin-bottom:100px;
}
.about_us .history_log p {
    margin-bottom:0px;
}
.browser_notice {
    background-color:#d9534f;
    padding: 10px;
    color: #fff;
    text-align:center;
}
.a-login {
    /* border: 1px solid #90a0a5; */
    border-radius: 3px;
    padding: 7px 15px;
    background: #fff;
    color: #0e324d;
}

.a-sign {
    padding: 7px 15px;
    border-radius: 3px;
    /* background: #1d5681; */
    background: #3B86FF;
    color: #fff;
}
.client-title {
    font-size: 16px;
    font-family: Axiforma,PingFang SC;
    color: #333 !important;
    line-height: 1.2;
}
.client-subtitle {
    font-size: 12px;
    font-family: Axiforma,PingFang SC;
    color: #878f92 !important;
    line-height: 1.2;
}
.bb-1 {
   border-bottom: 1px solid #f3f3f3;
}
.client .bg-footer-dark {
    /* background: #f2f2f2 !important; */
    background: #0E212F !important;
}
.login-btn {
    padding-right: 4px ;
}
.login-btn:hover {
    color: #a9babf !important ;
}
.a-login:hover {
    /* border: 1px solid #a9babf !important; */
}

.a-sign:hover {
    /* background: #226292 !important; */
    background: #3278d9 !important;
}
.navbar-nav > li > a {
    outline: none;
}
.weight-normal {
    font-weight: normal;
}

.weight-500 {
    font-weight: 500;
}

.weight-600 {
    font-weight: 600;
}

.landing-page .col-center {
    margin: 0 auto;
}

.color-878f92 {
    color: #878f92;
}
.lh-157 {
    line-height: 1.571;
}
.lh-185 {
    line-height: 1.857;
}
.lh-149{
    line-height: 1.497;
}
.lh-15 {
    line-height: 1.5;
}
.lh-12 {
    line-height: 1.2;
}
nav.navbar-default .navbar-header .navbar-toggle {
    /* background-color: rgba(0, 0, 0, 0.5); */
    /* border: 1px solid rgba(0, 0, 0, 0.5); */
    background: #B9BCD2;
}

.two-year-overtime {
    font-family: Axiforma,PingFang SC;
    font-weight: 100;
    font-size: 30px;
    color: #fff;
    position: absolute;
    right: 19.3%;
    line-height: 1;
    bottom: 2px;
}

.noWrap{
    white-space:nowrap;
}

.flexRow{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.flexRowCenter{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.flexRowStartCenter{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.flexRowCenterStart{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
}

.flexRowAroundCenter {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
}

.flexRowbetweenCenter {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.flexRowEndCenter {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
}

.flexWrapRowCenter{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.flexColumn{
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.flexColumnStartCenter{
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: center;
}

.flexColumnStartAround{
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: space-around;
}

.flexColumnCenter{
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1280px) {
    .two-year-overtime {
      font-size: 20px;
    }
}

@media (max-width: 900px) {
    .two-year-overtime {
      font-size: 15px;
    }
}

@media (max-width: 762px) {
    .two-year-overtime {
        font-weight: 100;
        font-size: 40px;
        right: 10%;
    }
}
@media (max-width: 500px) {
    .two-year-overtime {
        font-size: 30px;
    }
}
.coupon-item.active {
    border: 1px solid #1d8bef;
    color: #6a6c6f;
}
.coupon-item {
    border-radius: 3px;
    background-color: #FFF;
    border: 1px solid #e6e5e5;
    width: 280px;
    line-height: 25px;
    overflow: hidden;
    cursor: pointer;
    display: block;
    float: left;
    margin: 0 30px 20px 0;
    padding: 7px 14px;
    color: #949b9e;
}
.pointer {
    cursor: pointer;
}

.price-strategy-banner {
    height: 360px;
    background: linear-gradient(0deg, #F4F8FB 0%, #FFFFFF 100%);
}
.price-strategy-banner .container {
    position: relative;
}
.price-strategy-banner h2 {
    padding: 100px 0px 16px;
}
.price-strategy-banner img {
    position: absolute;
    width: 430px;
    top: 10px;
    right: 48px;
}
.price-strategy-detail h4 {
    margin: 80px 0px 16px;
}
.price-strategy-detail h4 span {
    display: inline-block;
    margin-right: 16px;
    transform: scaleY(1.3);
    color: #3B86FF;
}
.price-strategy-detail p img {
    width: 56px;
    vertical-align: bottom;
    margin-left: 4px;
}
.price-strategy-detail .panel {
    border: 1px solid #FFF0E6;
    background: #FFFCFA;
    padding: 30px 40px;
    margin-top: 30px;
}
.price-strategy-detail .panel p {
    color: #738296;
    line-height: 28px;
    margin-bottom: 30px;
    font-weight: 400;
}
.price-strategy-detail .btn-copy {
    color: #3B86FF;
    background: #fff;
    border: 1px solid #3B86FF;
    min-width: 90px;
    outline: none;
}
.price-strategy-copy .btn-copy,
.price-strategy-copy .btn-copy:hover,
.price-strategy-detail .btn-copy:hover {
    min-width: 90px;
    background: #3B86FF;
    outline: none;
    color: #fff;
}
.price-strategy-copy .btn-copy.copied,
.price-strategy-detail .btn-copy.copied,
.price-strategy-detail .btn-copy.copied:hover {
    background: #E3EDFB;
    border-color: #E3EDFB;
    color: #3B86FF;
}
.price-strategy-copy .row {
    margin: 70px 0px;
}
.price-strategy-copy h5 {
    margin-top: 20px;
}

.play-icon {
    width: 112px;
    height: 112px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-top: -75px;
    margin-left: -56px;
    cursor: pointer;
    animation: breathing 2s linear infinite;;
    -webkit-animation: breathing 2s linear infinite;
}

@keyframes breathing {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.12)
    }

    100% {
        transform: scale(1)
    }
}
@-webkit-keyframes breathing {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.12)
    }

    100% {
        transform: scale(1)
    }
}

/* solution */
#solutionMenuContent.en p {
    height: 80px;
}
.solution-card {
    margin: 15px 0;
    padding: 30px 40px;
    background: linear-gradient(0deg, #F6F9FB 0%, #FFFFFF 100%);
    box-shadow: 0px 20px 40px 0px rgba(28, 70, 137, 0.05);
    border-radius: 8px;
    position: relative;
}

.header-solution-card {
    margin: 15px 0;
    padding: 30px 40px;
    background: linear-gradient(0deg, #F4F8FB 0%, #FAFCFE 100%);
    border-radius: 8px;
    position: relative;
}

.header-solution-card:hover {
    box-shadow: 0px 10px 20px 0px rgba(12, 43, 66, 0.1);
}

.site-input, .site-input:focus {
    box-shadow: 0px 10px 30px 0px rgba(12, 43, 66, 0.1);
    border-radius: 4px;
    height:45px; 
    outline:none !important;
}

.colon {
    width: 30px;
    position: absolute;
    top: -18px;
    left: 40px;
}

.tracupBg {
    width: 87px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.meeting-share .last {
    left: -65px;
}

/* metaverse */
.metaverse-banner {
    background-image:url('/static/images/metaverse/banner.png');
    background-size:100% 100%;
}
.metaverse-video .video {
    height: 350px;
}
.metaverse-video .video > div {
    position: relative;
}
.metaverse-video-btn {
    top: 48%;
    left: 50%;
    cursor: pointer;
    position: absolute;
    transform: translate(-50%, -50%);
}
.metaverse-feature {
    padding-top: 230px;
}
.metaverse-feature img {
    width: 76px;
    height: 48px;
}
.metaverse-speed-box {
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 20px 40px 0px rgba(12, 43, 66, 0.1);
}
.metaverse-speed-box img {
    width: 122px;
    height: 122px;
}

/* 0-768px */
@media screen and (max-width: 768px){
    .sub_mt10{
        margin-top:10px;
    }
    .div-title {
        font-size: 2.4rem;
    }
    .div-title1 {
        font-size: 2.6rem;
    }
    .tel-small {
        font-size: 2rem ;
    }
    .mail-small {
        font-size: 1.6rem ;
    }
    .footer-about {
        margin-top: 0px;
    }
    .footer-contact {
        margin-bottom: 10px;
    }
    .home-mt, .product-mt{
        margin-top: 50px;
    }
    .product-mt-60 {
        margin-top: 0px;
    }
    .product-mt-40 {
        margin-top: 0px;
    }
    .product-mt-80 {
        margin-top: 40px;
    }
    .product-pb-100 {
        padding-bottom: 50px;
    }

    .product-pt-100 {
        padding-top: 50px;
    }
    .navbar ul li ul.son {
        width: 100%;
        position: relative;
        top: 0px;
        left: -1px;
        padding: 0px;
        border: 1px solid #e7e7e7;
        z-index: 9999;
        list-style:none;
        background:#fff;
        padding:0px;
        display:none;
        border-left:none;
        border-right:none;
    }
    .navbar-nav {
        margin: 0px -15px;
    }

    .navbar {
        border: 0px; 
    }

    .meeting-share .first {
        margin-left: 30px;
    }
    .meeting-share .last {
        left: -18px;
    }

    .metaverse-banner {
        background-color: #0a0e29;
        background-image: unset;
    }

    .metaverse-video .video {
        height: 125px;
    }

    .metaverse-feature {
        padding-top: 120px;
    }

    .metaverse-feature .col-xs-12 {
        margin-top: 80px;
    }

    .metaverse-speed-box img {
        margin-right: auto !important;
    }

    .xs-ml-24 {
        margin-left: 24px;
    }

    .xs-mt-15 {
        margin-top: 15px;
    }
}

/* 768px - ∞ */
@media (min-width: 768px) { 
    .sm-flex-row-center{
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
    }

    .sm-flex-row{
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .sm-flex-row-start-center{
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
    }

    .sm-flex-row-center-start{
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: flex-start;
    }

    .sm-flex-row-end-center{
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        align-items: center;
    }

    .sm-flex-column-start{
        display: flex;
        flex-flow: column wrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
}

/* 1200px - ∞ */
@media (min-width: 1200px) {
    .lg-position-absolute {
        position: absolute;
    }
}

/* 1170px - ∞ */
@media (min-width: 1170px) {
    .fix-input-width {
        width: 500px;
        margin: 0 auto;
    }
}

/* 0-1200px */
@media (max-width:1200px){
    .cs_center{
        text-align:center;
    }
    .price-strategy-banner img {
        opacity: 0.1;
    }
}

/* 1400px - ∞ */
@media (min-width: 1400px){
    .container {
            width: 1200px !important;
        }
}