body { background-color: #efefef;font-size: 16px;color: #000; font-family:NotoSansHans-Bold;} 
.fontlight{font-family:NotoSansHans-Light;}
ul { margin: 0; padding: 0}
ul li{ list-style: none;}
::-webkit-scrollbar {    width: .3rem;    height: .3rem;    background-color: rgba(0,0,0,.4);}
::-webkit-scrollbar-track {  border-radius: 0;}
::-webkit-scrollbar-thumb {    border-radius: 0;    background-color: rgba(0,0,0,.4);    transition: all .2s;    border-radius: .5rem;}

a{ color: #000;}
a:hover,a:active,a:link{ color: #000; }
input:-internal-autofill-selected, input:-webkit-autofill {
    -webkit-text-fill-color: transparent !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color: transparent;
    background-image: none;
    transition: background-color 50000s ease-in-out 0s;
}
section{ padding-bottom: 0;}
section .top .item.center{ color: #7b7a7b;}
section .title{  padding: 30px 0 20px 0;font-size: 33px;}
section .title span.icon{ font-size: 36px;}
section>div,section>ul{padding-top: 30px;clear: both; }
section .icon-selected{ font-size: 36px;color: #000; }

.roleList { text-align: center;}
.roleList .group{ margin: 0 auto;}
.roleList .item {display: inline-block;width: auto;padding-bottom: 23px;}
.roleList .item span,.roleList .item label{ float: left;cursor: pointer; }
.roleList .item span{   height: 40px; display: inline-block;}
.roleList .item span i{display: none;}
.roleList .item.active span { display: block;border-bottom: solid 5px #000;   }
.roleList .item label{ padding-left: 10px;}

.citycascade-select-block { display: inline-block; } 
.countryselect {text-align: center;margin: 40px 0px 20px 0;height: 40px;position: relative; }
.citycascade-select-block input {
    font-size: 24px;
    font-weight: bold;
    height: 40px !important;
    line-height: 40px !important;
    padding-bottom: 20px;
    min-width: 200px;
    text-align: center !important;
    text-indent: 0 !important;
    width: 300px !important;
    position: absolute;
    left: 0;
}
.citycascade-select-block span.icon{ float: left;width: 40px;height: 40px; }
.citycascade-select-block .Country-set, .citycascade-select-block .State-set, .citycascade-select-block .City-set {
    border: 0 !important;
    width: 200px;
    min-width: 200px;
    max-width: 100%;
    height: 34px !important;
    line-height: 34px !important;
    position: inherit;
}
.citycascade-select-block .city-select{ width: 200px;}
.citycascade-select-block .Country-set{border-bottom: solid 5px #000 !important;text-align: center;
    float: none !important;margin: 0 auto;position: unset !important; }
/*.citycascade-select-block input{ min-width: 200px; max-width: 100%; 
    width: auto !important;}*/

.versionList{width: 100%;height: 70px;display: none;}
.versionList li{ text-align: center;width: 33%;/*float: left;*/font-size: 86px;display: none;cursor: pointer;margin: 0 auto;}
.versionList li.active{ display: block;}

.default-version{ height: 170px;text-align: center;}
.default-version .icon{ padding-top: 0px;font-size:86px;}
.priceList{ padding-top: 30px; height: 100px;text-align: center; display: none; }
.priceList li{ text-align: center;/*width: 33%;float: left;*/position: relative;text-align: center;height: 70px; }
.priceList li .main { width:165px;margin: 0 auto; display: none; }
.priceList li.active .main{ display: block;}
.priceList li .line{ width: 100%;height: 5px;background-color: #000;clear: both;}
.priceList li .icon-selected{ position: absolute;top: -15px;left: 45%;color: #000;}
.priceList li .price{ font-size: 26px;padding: 10px 0 10px 0;}
.priceList li .trynow  { position: relative;cursor: pointer; }
.priceList li .trynow span{ clear: both;line-height: 30px;width: 100%;display: inline-block;padding-bottom: 10px;}
.priceList li .trynow span.bold{ font-weight: bold;line-height: 50px;font-size: 20px;height: 50px;}
.priceList li .trynow span.icon.icon-to{ position: absolute;right: -15px;font-size: 40px;top: 25px;width: 30px;} 

.priceList li{display: none}
.priceList li.active{display: inline-block}

.functionList{width: 100%;}
.functionList table{ display: none;width: 100%;background-color: #fff; }
.functionList table.active{ display: inline-table;}
.functionList table td.name{ width: 30%;font-weight: bold;font-size: 30px;padding-left: 10px;}
.functionList table td.icon{ width:20%;font-size: 80px;}
.functionList table td.function{ width: 50%;}
.functionList table td.function .desc{ font-weight: bold;font-size: 20px;}
.functionList table td.function ul {width: 100%;clear: both;padding-bottom: 80px;}
.functionList table td.function ul li { position: relative;}
.functionList table td.function ul li label{padding-right: 30px;}
.functionList table td.function ul li .icon{ position: absolute;right: 10px;border: solid 1px #000;border-radius: 50%}
.functionList table td.function ul li.enabled.false{ color: #c3c4c4;}
.functionList table td.function ul li.enabled.false .icon{ color: #c3c4c4;border: solid 1px #c3c4c4;}


.compare{ padding: 20px;text-align: center;    font-size: 18px;}
 input:focus{ outline: none; } 

.form-group{ min-height: 60px;clear: both; }
.form-group input[type='text'],.form-group .input { font-size: 14px;font-weight: bold;text-align: center;border: 0px;height: 30px;line-height: 30px;
    margin: 0 auto; }
.form-group .verifytip{ clear: both;display: none;font-size: 12px;color: #7b7a7b;  }
.gray{color: #7b7a7b;cursor: pointer; }
.gray a,.gray a{color: #7b7a7b;}
.gray a:hover {color: #000000;text-decoration: underline;}
.iti__flag,.iti__flag-box{ display: none !important;}
.iti--separate-dial-code .iti__selected-dial-code {
    margin-left: 6px;
    width: 32px;
    height: 26px;
    line-height: 26px;
}
.iti__flag {
     box-shadow: 0px 0px .5px 0px #888; 
}
#btnApply {
    max-width: 100%;
    height: 90px;
    border-radius: 0px;
    line-height: 30px;
    padding: 0;
    cursor: pointer;
    border: 0;
    font-weight: bold;
    display: inline-block;
    display: inline-block;
    font-size: 60px;
    text-align: center;
}
#btnApply .launch{
    clear: both;
    font-size: 16px;
    display: none;
}
#btnApply:hover .launch {
    display: block;
}
.form-group input[type='text'].error,.form-group .input .error {
    /*-webkit-transition: border linear .2s,-webkit-box-shadow linear .5s;
    border-color: rgba(0,0,0,.75);
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,3);*/
    border-bottom: solid 1px #000000;
}

.input-prepend.input-append {
    min-height: 32px;
    margin: 0 auto;
}
    .input-prepend.input-append input, .input-prepend.input-append .add-on { float: left; }
    .input-prepend.input-append input { width: 70%; }
    .input-prepend.input-append .add-on {
        width: 100px;
        height: 30px;
        margin-bottom: 5px;
        border-radius: 0;
        border-left: 0;
        background-color: #fff;
        color: #161519;
        line-height: 30px;
    }
#applyresult {
    background-color: #000;
    color: #c3c4c4;
    font-size: 14px;
}
section#applyresult  .title{padding-top: 150px;padding-bottom: 10px; }
#applyresult .version { padding: 30px; }
    #applyresult .version, #applyresult .version span {
        color: #fff200;
        font-size: 26px;
    }
#applyresult .centre {
    display: inline-block;
    width: 135px;
    text-align: left;
    font-size: 33px;
    padding-bottom: 13px;
}
#applyresult a, #applyresult a:hover, #applyresult a:active, #applyresult a:link { color: #7b7a7b; }
    #applyresult #result{ line-height: 30px;height: 120px; }
    #applyresult #result >div{ display: none; }
#applyresult #loading { height: 120px; }
#applyresult .support-bottom {
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
}
    #applyresult .support-bottom img { padding-bottom: 40px; }
.versionselect {text-align: center;margin: 40px 0px;height: 40px;width: 100%; }
.versionselect .nav  {width: auto;width: 400px;float: none; margin: 0 auto;border: 0; }
.versionselect .nav li { min-width: 200px;width: auto; float: left;font-size: 24px;text-align: center; color: #7b7a7b; }
.versionselect .nav li.active{ border-bottom: 5px solid;color: #000; }
.versionselect .nav li a,.versionselect .nav li a:hover,.versionselect .nav li a:focus {background-color: transparent;padding: 0;border: 0;color: #7b7a7b; }
.versionselect .nav li.active a{ color: #000;}
.tab-content .content{ display: none;}
.tab-content .content.active{ display: block;}
.functionList .topbar>div,.functionList .maincontent>div{ float: left; }
.functionList .version{ text-align: center;padding: 30px 0 0px 0;cursor: pointer; }

.functionList.content{ margin: 0 0;}
.funclist>.block{width: 100%;clear: both;min-width: 50px;min-height: 60px; font-size: 18px; }
.funclist>.block .moudle-name{ font-size: 24px;text-align: left;height: 80px;padding-top: 15px;padding-left: 30px;}
.functions .item{ text-align: center;height: 60px;line-height: 1.3;}
.functions .item.func{ padding-left: 30px;text-align: left;clear: both; }
.functions .item.func> span{ display: inline-block;float: left;}
.functions .item >.icon.func{ font-size: 30px;width: 46px;height: 46px;text-align: center;line-height: 36px;} 
.functions .item >.funcname{ width: 280px;padding-top: 5px;} 
.functions .item.enabled{ text-align: center;}
.functions .icon.icon-accomplished { color: #7b7a7b;border-radius: 50%; font-size: 30px; background: #fff; }
.functions .icon.icon-accomplished[isenable='true']  { color: #7b7a7b; }
.functions .icon.icon-accomplished[isenable='false'] {display: none;}
.functions .icon.icon-accomplished:before{ vertical-align:baseline;}

.funclist .moudles{ font-size: 24px;text-align: center; }
.funclist .moudles .icon{ font-size:60px;display: inline-block;}
.funclist .moudles >div{ padding-top: 10px;}
.functionList .price,.functionList .group{ width: 100%; text-align: center;line-height: 30px; padding: 0 7px;font-size: 19px; }
.functionList .group .item{border-right: 1px solid;margin: 10px 0;font-size: 18px;font-family:NotoSansHans-Light;}
.functionList .price >div,.functionList .group >div{ float: left;}
.functionList .price >div .main{ display: inline-block; }
.functionList .price >div .main .line{ width: 100%;height: 5px;background-color: transparent;clear: both; }
.functionList .price >div[versionid].active .main .line{ font-size: 18px;font-family: NotoSansHans-Bold;background-color: #000 }
.functionList .price >div[versionid] .main .property{ display: none;font-family: NotoSansHans-Light; }
.functionList .price >div[versionid].active .main .property{ display: block; }
.functionList .buildown {font-size: 30px;padding: 0;text-align: left;}
.functionList .controlbar { width: 100%; text-align: center; height: 40px;}
.functionList .controlbar .icon{ font-size: 30px;cursor: pointer;line-height: 40px;    padding-top: 20px;display: inline-block;} 
.functionList div[versionid].active  .icon.icon-accomplished{ color: #000;background: #fff200;  }
.functionList div[versionid].active .icon.icon-accomplished[isextras='true'] {
    color: #fff200 !important;
    background: #000 !important;
}
.funclist>.block:last-child .moudle-name{ display: none; }
.funclist>.block:last-child .item{ font-size: 24px; padding-left: 0px; line-height: 110px;height: 110px;}
.funclist>.block:last-child .item .icon.func{ font-size: 60px; }
.funclist>.block:last-child .moudles{ width: 0 !important;}
.funclist>.block:last-child .functions{ width: 100%!important;}
.funclist>.block:last-child .item .icon.func{ width: 15%;margin-top: 26px;}
.funclist>.block:last-child .item  .funcname{ padding-left: 30px;  }
.funclist>.block:last-child .item  .icon.icon-accomplished{ margin-top: 30px;}
.funclist>.block:last-child .item >.funcname{ padding-top: 0;}
.sample {
    margin: 0 auto;
    display: table;
    clear: both;
}
    .sample li {
        display: inline-block;
        float: left;
    }
    .sample .icon.icon-accomplished {
        border-radius: 50%;
        font-size: 30px;
        background: #fff;
        padding-top: 0px;
        margin-top: 15px;
        height: 30px;
    }
.sample .icon.icon-accomplished.select {
    color: #000;
    background: #fff200;
}
.sample .icon.icon-accomplished.extras {
    color: #fff200 !important;
    background: #000 !important;
}
    .sample .icon, .sample .text {
        float: left;
        display: inline-block;
        line-height: 60px;
    }
        .sample .text {
            padding: 0 20px 0 10px;
        }
@media (min-width: 320px) {
    .container {
        padding-right: 10px;
        padding-left: 10px;
    }
    section {
        display: block;
    }
    section#main{ display: none;}
    section .title{ padding-top: 0px;}
    .versionselect {
        display: none;
    }
    .roleList .item {
        padding-right: 10px;
        padding-left: 10px;
        font-size: 18px;
    }
    section#applyresult .title {
        padding-top: 100px;
    }
    .roleList .item {
        padding-bottom: 10px;
    }
    .functionList {
        display: none;
    }
    .functionList table.active {
        display: none;
    }
    section#applyform{ padding-bottom: 200px;}
    #applyresult .support-bottom {
        display: none;
    }
    #roleSelect{ display: block;}
    .tab-content .content.active#functionList {
        display: none;
    }
    .form-group input[type='text'],.input-prepend.input-append {
        width: 300px;
    }
     .form-group input[type='text']#DomainName {
        width: 200px;
    } 
}
@media (min-width: 768px) {
    .container {
        padding-right: 15px;
        padding-left: 15px;
    }
    section{ display: block;}
    section#phone{ display: none;}
    section#main{ display: block;}
    section .title{ padding-top: 30px;}
    .versionselect {
        display: block;
    } 
    .roleList .item {
        padding-right: 30px;
        padding-left: 30px;
        font-size: 24px;
    }
    .roleList .item {
        padding-bottom: 23px;
    }
    .functionList {
        display: block;
    }
    .funclist>.block{font-size: 14px; }
    .functions .icon.icon-accomplished, .sample .icon.icon-accomplished {
        font-size: 24px;
        height: 24px;
    }
    .functionList .version {
        font-size: 40px;
        height: 80px;
    }
    .functionList .version.active {
        font-size: 50px;
        padding-top: 20px;
    }
    section#applyresult .title {
        padding-top: 150px;
    }
    .functionList table.active {
        display: inline-table;
    }
    #roleSelect{ display: none;}
    #applyresult .support-bottom {
        position: fixed;
    }
    .tab-content .content {
        display: none;
    }
    .tab-content .content.active#functionList ,   .tab-content .content.active#roleSelect{
        display: block;
    }
    .form-group input[type='text'],.input-prepend.input-append,.form-group .input {
        width: 500px;
    }
    .form-group input[type='text']#DomainName {
        width: 399px;
    }
}
@media (min-width: 1024px) {
    .functionList table.active {
        display: inline-table;
    }
    #applyresult .support-bottom {
        display: block;
    }
    .functionList .version {
        font-size: 50px;
        height: 90px;
    }
    .functionList .version.active {
        font-size: 60px;
        padding-top: 20px;
    }
    .funclist > .block { font-size: 13px; }
    .functions .icon.icon-accomplished, .sample .icon.icon-accomplished {
        font-size: 26px;
        height: 26px;
    }
}
@media (min-width: 1366px) {
    .container {
        max-width: 1300px;
    }
    .functionList .version {
        font-size: 60px;
        height: 100px;
    }
    .functionList .version.active {
        font-size: 80px;
        padding-top: 10px;
    }
    .funclist > .block { font-size: 14px; }
}
@media (min-width: 1680px) {
    .container {
        max-width: 1600px;
    }
    .funclist .moudles .icon {
        font-size: 80px;
    }
    .funclist > .block { font-size: 16px; }
    .functions .icon.icon-accomplished, .sample .icon.icon-accomplished {
        font-size: 30px;
        height: 30px;
    }
}
@media (min-width: 2880px) {
    .container {
        max-width: 2000px;
    }
    .funclist .moudles .icon {
        font-size: 80px;
    }
    .funclist > .block { font-size: 18px; }
}