section.landing--page--cloudep2020{
    background-image: url(/asset?u=https%3A%2F%2Fcloud.z.com%2Fth%2Fthemes%2Fcloud-zcom-html%2Fimages%2Fhigh-secure-vps%2Fbg-header.jpg);
    background-position: center;
    background-size: cover;
    height: auto;
    padding:20px 0;
    overflow: hidden;
    float: left;
    vertical-align: top;
    width: 100%;
}
section.landing--page--cloudep2020 .boxR {
  width: 60%;
  float: left;
  text-align: left;
  margin:3% 0 0 0;
}
section.landing--page--cloudep2020 .boxR h1 {
  font-family: "db_heaventmed", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 4rem;
  padding: 0;
  margin:0 0 10px 0;
  text-align: left;
  color: #fff;
  line-height: 1;
}
section.landing--page--cloudep2020 .boxR h1 span {color:#ffd800;}
section.landing--page--cloudep2020 .boxR h2 {
  font-family: "db_heaventregular", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 30px;
  padding: 0;
  margin:0;
  text-align: left;
  color: #fff;
  line-height: 1;
}
section.landing--page--cloudep2020 .boxR ul {
    width: 100%;
    float: left;
    padding:2% 0 20px 20px;
    margin: 0;
    list-style: none;
}
section.landing--page--cloudep2020 .boxR ul li {
    width: 100%;
    float: left;
    margin:5px 0;
}
section.landing--page--cloudep2020 .boxR ul li img {
    width: 24px;
    float: left;
    margin-top:7px;
}
section.landing--page--cloudep2020 .boxR ul li p {
  font-family: "db_heaventlight", "Open Sans", "Tahoma", "Arial", sans-serif;
  margin:2px 0;
  text-align: left;
  padding:0 0 0 45px;;
  color: #fff;
  line-height: 1.3;
  font-weight: normal;
  font-size: 24px;
}
section.landing--page--cloudep2020 .boxR ul li p span {color:#ffd800;}
section.landing--page--cloudep2020 .center {
    width: 100%;
    float: left;
}
section.landing--page--cloudep2020 .center ul{
    width: 100%;
    float: left;
    justify-content: center!important;
    padding: 0;
    margin:1% 0;
}
section.landing--page--cloudep2020 .center ul li{
    display: inline-block;
    padding: 0;
    margin:0;
}
section.landing--page--cloudep2020 .center ul li p.btn-price {
    font-family: "db_heaventlight", "Open Sans", "Tahoma", "Arial", sans-serif;
    width: fit-content;
    background:#000000;
    padding: 10px 20px;
    text-align: center;
    line-height: 1.4;
    color: #ffd800;
    font-size: 24px;
    margin:8px 5px;
}
section.landing--page--cloudep2020 .center ul li p.btn-price span {
    font-family: "db_heaventregular", "Open Sans", "Tahoma", "Arial", sans-serif;
    font-size: 30px;
    text-align: center;
}
section.landing--page--cloudep2020 .center ul li p.btn-contact {
    font-family: "db_heaventregular", "Open Sans", "Tahoma", "Arial", sans-serif;
    width: fit-content;
    background:#ffd800;
    padding:12px 20px 11px 20px;
    text-align: center;
    line-height: 1.4;
    color: #000;
    font-size: 28px;
    margin:8px 5px;
}
section.landing--page--cloudep2020 .center ul li p.btn-contact a {color:#000;text-decoration: none;}
section.landing--page--cloudep2020 .center ul li p.btn-contact:hover {color:#fff;text-decoration: none;background:#ffa200;}

/*block 1*/
section.page--cloudep2020--block1{
    background-image: url(/asset?u=https%3A%2F%2Fcloud.z.com%2Fth%2Fthemes%2Fcloud-zcom-html%2Fimages%2Fhigh-secure-vps%2Fbg-block1.jpg);
    background-position: center;
    background-size: cover;
    height: auto;
    padding:40px 0;
    overflow: hidden;
    float: left;
    vertical-align: top;
    width: 100%;
}
section.page--cloudep2020--block1 h1 {
  font-family: "db_heaventmed", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 3rem;
  padding:15px 5%;
  margin:1% auto;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  line-height: 1;
  width: fit-content;
}
section.page--cloudep2020--block1 .borderB {
    width: 8%;
    height: 5px;
    background: #e50000;
    margin: 2% auto 4% auto;
}
section.page--cloudep2020--block1 p {
  font-family: "db_heaventlight", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 26px;
  padding:5%;
  margin:1% auto;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  color: #d4d4d4;
  line-height: 1.3;
  width: fit-content;
}

/*block 2*/
section.page--cloudep2020--block2{
    background-image: url(/asset?u=https%3A%2F%2Fcloud.z.com%2Fth%2Fthemes%2Fcloud-zcom-html%2Fimages%2Fhigh-secure-vps%2Fbg-block2.jpg);
    background-position: center;
    background-size: cover;
    height: auto;
    padding:80px 0 60px 0;
    overflow: hidden;
    float: left;
    vertical-align: top;
    width: 100%;
}
section.page--cloudep2020--block2 h1 {
  font-family: "db_heaventmed", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 3rem;
  padding:15px 0;
  margin:0;
  text-align: left;
  color: #fff;
  line-height: 1;
}
section.page--cloudep2020--block2 .borderB {
    width: 8%;
    height: 5px;
    background: #e50000;
    margin: 1% auto 4% auto;
    float: left;
}
section.page--cloudep2020--block2 p {
  font-family: "db_heaventlight", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 26px;
  margin:1% auto;
  text-align: left;
  color: #d4d4d4;
  line-height: 1.3;
  float: left;
}

/*block 3*/
section.page--cloudep2020--block3{
    background-image: url(/asset?u=https%3A%2F%2Fcloud.z.com%2Fth%2Fthemes%2Fcloud-zcom-html%2Fimages%2Fhigh-secure-vps%2Fbg-block3.jpg);
    background-position: center;
    background-size: cover;
    max-height: auto;
    padding:60px 0;
    overflow: hidden;
    float: left;
    vertical-align: top;
    width: 100%;
}
section.page--cloudep2020--block3 h1 {
  font-family: "db_heaventmed", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 3rem;
  padding:15px 0;
  margin:0;
  text-align: left;
  color: #fff;
  line-height: 1;
}
section.page--cloudep2020--block3 .borderB {
    width: 8%;
    height: 5px;
    background: #e50000;
    margin: 1% 0 4% 0;
    text-align: left;
}
section.page--cloudep2020--block3 p {
  font-family: "db_heaventlight", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 26px;
  margin:1% auto;
  text-align: left;
  color: #d4d4d4;
  line-height: 1;
  float: left;
  width: 60%;
}

/*block 4*/
section.page--cloudep2020--block4{
    background-image: url(/asset?u=https%3A%2F%2Fcloud.z.com%2Fth%2Fthemes%2Fcloud-zcom-html%2Fimages%2Fhigh-secure-vps%2Fbg-block4.jpg);
    background-position: center;
    background-size: cover;
    height: auto;
    padding:60px 0;
    overflow: hidden;
    float: left;
    vertical-align: top;
    width: 100%;
}
section.page--cloudep2020--block4 .boxR {
  width: 60%;
  float: right;
  text-align: left;
  margin:3% 0 0 0;
}
section.page--cloudep2020--block4 .boxR h1 {
  font-family: "db_heaventmed", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 3rem;
  padding:15px 0;
  margin:0;
  text-align: left;
  color: #fff;
  line-height: 1;
}
section.page--cloudep2020--block4 .boxR .borderB {
    width: 14%;
    height: 5px;
    background: #e50000;
    margin: 1% 0 4% 0;
    text-align: left;
}
section.page--cloudep2020--block4 .boxR p {
  font-family: "db_heaventlight", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 26px;
  margin:1% auto;
  text-align: left;
  color: #d4d4d4;
  line-height: 1.3;
  float:left
}

/*system example*/
section.page--system--example{
    background:#fff;
    height: auto;
    padding:40px 0;
    float: left;
    vertical-align: top;
    width: 100%;
}
section.page--system--example h1 {
  font-family: "db_heaventmed", "Open Sans", "Tahoma", "Arial", sans-serif;
  font-size: 32px;
  padding:15px 0;
  margin:0;
  text-align: center;
  color: #000;
  line-height: 1.4;
}
section.page--system--example .borderB {
    width: 8%;
    height: 5px;
    background: #e50000;
    margin: 2% auto 4% auto;
}
.w3-bar-item {
    font-family: "db_heaventlight", "Open Sans", "Tahoma", "Arial", sans-serif;
    background:#f5f5f5;
    color: #000;
    border:none;
    font-size: 18px;
    padding: 10px 20px;
    margin:2px;
}
.w3-bar-item a:hover {background:#000;color:#fff;}
.w3-red, .w3-hover-red a {
    color: #fff!important;
    background-color: #000!important;
    border:none;
}
.w3-red, .w3-hover-red:hover {
    color: #fff!important;
    background-color: #000!important;
    border:none;
}
.w3-container {margin-top:4%;}

/*form*/
section.feature-content {
    padding: 60px 0;
    font-family: 'db_heaventregular', "Open Sans", "Tahoma", "Arial", sans-serif;
    width: 100%;float: left;
    background:#313131;
}
section.feature-content h2.title {
    font-family: 'db_heaventregular', "Open Sans", "Tahoma", "Arial", sans-serif;
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 45px;
    color:#000;
}
section.feature-content h2.title.center {
    text-align: center;
}
section.feature-content p.caption {
    font-family: 'db_heaventregular', "Open Sans", "Tahoma", "Arial", sans-serif;
    font-size: 2.2rem;
    line-height: 1.1
}
section.feature-content p.caption > span {
    color: #d62825;
}
section.feature-content img {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}
/* ========================================== */
/* Quatations inform                          */
/* ========================================== */
section.feature-content.quatations-inform {
    background-color: #f5f5f5;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
section.feature-content.quatations-inform.is-success {
    color: #fff;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
section.feature-content.quatations-inform #frmQuatations:after {
    content: '';
    display: table;
    clear: both;
}
section.feature-content.quatations-inform .form-group {
    float: left;
    width: 100%;
    padding: 0 15px;
    margin-bottom: 30px;
}
section.feature-content.quatations-inform .form-group.half-w {
    width: 50%;
}
section.feature-content.quatations-inform .form-group > input.input-text {
    display: block;
    width: 100%;
    line-height: 50px;
    height: 50px;
    padding: 0 15px;
    font-size: 16px;
    font-size: 1.23077rem;
    -moz-transition: border-color .2s ease-in-out;
    -o-transition: border-color .2s ease-in-out;
    -webkit-transition: border-color .2s ease-in-out;
    transition: border-color .2s ease-in-out;
    font-size: 1.6rem;
    background: #fff;
    border: 1px #dcdcdc solid;
    color: #646464;
}
section.feature-content.quatations-inform .form-group > label {
    display: block;
    font-size:24px;
    line-height: 1;
    margin-top: 0;
    background: transparent;
    position: relative;
    font-weight: normal;
    top: 0px;
    font-family: 'db_heaventmed', "Open Sans", "Tahoma", "Arial", sans-serif;
    color:#272727;
}
section.feature-content.quatations-inform .form-group > label > span.valid-tips {
    display: inline;
    padding: 0 5px;
    color: #d62825;
    margin-left: 5px;
}
section.feature-content.quatations-inform .form-group > input.input-text:focus {
    border-color: #d62825;
}
section.feature-content.quatations-inform .form-group > select.input-select {
    display: block;
    width: 100%;
    height: 50px;
    font-size: 1.6rem;
}
section.feature-content.quatations-inform .form-group > textarea {
    width: 100%;
    padding: 5px 14px;
    font-size: 1.6rem;
    height: 120px;
    background: #fff;
    border: 1px #dcdcdc solid;
    color: #646464;
}
section.feature-content.quatations-inform button {
    margin: 0 auto;
    display: block;
    font-size: 1.8rem;
    width: fit-content;
    padding: 2% 6%;
}
section.feature-content.quatations-inform button > i {
    font-size: 1rem;
    font-weight: bold;
    margin-left: 7px;
}
section.feature-content.quatations-inform button > i:before {
    font-size: inherit;
    position: relative;
    top: 0;
    right: 0;
    margin-top: 0;
    color: #fff;
}
section.feature-content.quatations-inform .form-group > span.remark {
    color: #d62825;
    line-height: 1;
    font-size: 1.8rem;
}
section.feature-content.quatations-inform.is-success {
    background-color: #d62825;
}
section.feature-content.is-success h2.title > span {
    color: #fff;
}
#frmQuatations-msg {
    position: relative;
    overflow: hidden;
    padding: 0 0 30px;
    display: none;
}
#frmQuatations-msg h3.title {
    font-size: 3rem;
    text-align: center;
    color: #fff;
}
#frmQuatations-msg p.caption {
    font-size: 2.2rem;
    text-align: center;
    color: #fff;
}
#frmQuatations-msg label.is-check {
    display: block !important;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    border-width: 1px;
    border-style: solid;
    /*border-color: #dcdcdc;*/
    border-color: #f9f9f9;
    background-color: #fff;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    outline: none;
    position: relative;
    -moz-transition: border-color 0.5s ease-in-out;
    -o-transition: border-color 0.5s ease-in-out;
    -webkit-transition: border-color 0.5s ease-in-out;
    transition: border-color 0.5s ease-in-out;
    -moz-box-shadow: rgba(0,0,0,0.2) 2px 2px 5px;
    -webkit-box-shadow: rgba(0,0,0,0.2) 2px 2px 5px;
    box-shadow: rgba(0,0,0,0.2) 2px 2px 5px;
    border-radius: 50%;
    color: #646464;
}
#frmQuatations-msg label.is-check:before {
    content: "";
    display: block;
    position: absolute;
    height: 0;
    border-style: solid;
    border-color: #d62825;
    border-width: 0;
    top: 0;
    left: 36px;
    width: 0;
    height: 0;
    box-shadow: rgba(4, 4, 4, 0.5) 4px 4px 5px;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#frmQuatations-msg label.is-check.active:before {
    border-width: 0 6px 6px 0;
    width: 20px;
    height: 50px;
    top: -9px;
    left: 28px;
}
#frmQuatations-msg .btn {
    background-color: #b2211e;
    display: table;
    margin: 0 auto;
    font-size: 1.8rem;
}
#frmQuatations-msg .btn > i {
    font-weight: bold;
    font-size: 1rem;
    position: relative;
    top: 3px;
}
#frmQuatations-msg .btn > i:before {
    color: #fff;
    position: relative;
    top: auto;
    right: auto;
    margin-top: 0;
}

@media (max-width: 600px) {
    /*form*/
    section.feature-content{padding: 30px 0;}
    section.feature-content h2.title{font-size: 34px;margin: 0 0 8% 0;}    
    section.cloudERP--server2019{padding:20px 0;}
}

@media (max-width: 480px) {
    section.landing--page--cloudep2020{background-image: url(/asset?u=https%3A%2F%2Fcloud.z.com%2Fth%2Fthemes%2Fcloud-zcom-html%2Fimages%2Fhigh-secure-vps%2Fbg-header-sp.svg);padding-top:50%;}
    section.landing--page--cloudep2020 .boxR{width: 100%;margin-top:3%;}
    section.landing--page--cloudep2020 .boxR h1 {font-size: 40px;text-align: center;}
    section.landing--page--cloudep2020 .boxR h2 {font-size: 26px;text-align: center;}

    section.page--cloudep2020--block1 h1,
    section.page--cloudep2020--block2 h1,
    section.page--cloudep2020--block3 h1,
    section.page--cloudep2020--block4 .boxR h1{font-size: 30px;}

    section.page--cloudep2020--block1,
    section.page--cloudep2020--block2,
    section.page--cloudep2020--block3,
    section.page--cloudep2020--block4{padding: 20px 0;}

    section.page--cloudep2020--block1 .borderB,
    section.page--cloudep2020--block2 .borderB,
    section.page--cloudep2020--block3 .borderB,
    section.page--cloudep2020--block4 .boxR .borderB {height: 3px;width: 15%;}

    section.page--cloudep2020--block1 p,
    section.page--cloudep2020--block2 p,
    section.page--cloudep2020--block3 p,
    section.page--cloudep2020--block4 .boxR p{font-size: 22px;line-height: 1;}
    section.page--cloudep2020--block3 p{width: 70%;}
/*form*/
section.feature-content.quatations-inform .form-group{padding: 0;}
section.feature-content.quatations-inform{padding: 20px 0;}
section.feature-content h2.title {font-size: 28px;margin-bottom: 3%;}
section.feature-content.quatations-inform .form-group.half-w{width: 100%;}
section.feature-content.quatations-inform button {font-size: 20px;padding:2% 10%;}
section.feature-content.quatations-inform .form-group > label{font-size: 20px;}
section.feature-content.quatations-inform .form-group > input.input-text{font-size: 18px;}

}