@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'robotoblack';
    src: url('../roboto-black-webfont.woff2') format('woff2'),
         url('../roboto-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotobold';
    src: url('../fonts/roboto-bold-webfont.woff2') format('woff2'),
         url('../fonts/roboto-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotolight';
    src: url('../fonts/roboto-light-webfont.woff2') format('woff2'),
         url('../fonts/roboto-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'db_ozone_xlight';
    src: url('../fonts/db_ozone_x_li_v3.2-webfont.woff2') format('woff2'),
         url('../fonts/db_ozone_x_li_v3.2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body{
    font-size: 16px;
    overflow-x: hidden;
    color:#231f20;
    font-family: 'robotolight';
    line-height: 16px;
    color: #000;
    }
li{
  list-style: none;
  padding: 0px;
  margin: 0px;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-weight: 500;
}
p{margin-bottom: 10px;line-height: 22px;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
textarea {
    font-family: 'robotolight';
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box;
}
ul{padding: 0px;margin:0px;}
a{text-decoration:none;color:#000;}
a:hover{text-decoration:none;color:#21b7c5;}
button{border:none;padding: 0px;}
li{list-style: none;}
.clr{clear:both;}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.row{}
.row:before,header:before,.container:before,.container-1:before{
    display: table;
    content: " ";
}
.row:after, header:after,.container:after,.container-1:after{clear: both;}
.row:after, header:after,.container:after,.container-1:after{display: table;content: " ";}
.img-responsive{width:100%;height: auto;}
.top-page{background:url(../images/img-top.png)top center;height:747px;color:#fff;background-size:cover;}
.container{padding-left: 15px; padding-right: 15px;}
.logo{width:30%;float:left;}
.logo img{width:200px;}
.menu-top{width:70%;float:left;padding-top:40px;}
.right {
    float: right;
    width: auto;
    text-align: right;
}
.right nav ul li {
    display: inline-block;
    padding: 0px 12px;
    position: relative;
    border-right: 1px solid #3c6ba0;
    line-height:35px;
    margin-left: -4px;
}
.right nav ul li a{color:#fff;display: block;}
.right nav ul li a img{width: 24px;}
.right nav ul li a i{font-size:24px;}
.right nav ul li:nth-child(1){font-size: 18px;}
.right nav ul li:nth-child(1) a img{margin-right:7px;width:34px;vertical-align:middle;}
.right nav ul li:nth-child(5){border-right:none;}
.inner-pic{margin-top:6%;}
.detail-dsc{width:59%;display:inline-block;vertical-align:top;}
.detail-dsc {}
.detail-dsc h1{font-size:27px;color:#fff;text-transform:uppercase;margin-bottom:20px;
letter-spacing: 2px;}
.detail-dsc p:first-child{font-size:60px;color: #ffffff;margin-bottom: 20px;text-transform:uppercase; letter-spacing: 6px;line-height:60px;}
.detail-dsc p:nth-child(2){font-size:60px;color:#fff000;margin-bottom: 20px;text-transform:uppercase;letter-spacing:2px;font-family: 'robotobold';line-height:60px;}
.area-form{display:inline-block;width:35%;vertical-align:top;margin-left: 42px;position: relative;}
.inner-form{background:#fff;padding:30px;width: 100%;position: absolute;color:#000;}
.inner-form-border{background: #fff100; margin:15px 0 0 15px;width: 100%;height:375px;position:absolute;}
.inner-form h2{font-size:30px;text-transform: uppercase;text-align: center;margin-bottom: 30px;}
.form-group {
    margin-bottom: 15px;
    position: relative;
}
.form-control {
    display: block;
    width: 100%;
    padding:8px 12px 8px 50px;
    font-size:14px;
    line-height: 1.42857143;
    color:#555;
    background-color:#e5e5e5;
    border: 1px solid #e8e8e8;
    border-radius:10px;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-group i {
    position: absolute;
    top: 10px;
    color: #969696;
    left: 20px;
    font-size:18px;
}
.btn-form{background:#224099;color:#fff;padding: 10px 35px;text-align: center;font-size:15px;text-transform: uppercase;font-family: 'robotobold';letter-spacing: 2px;}
.a-btn{text-align: center;margin-top:30px;}
.area-product{margin-top:50px;margin-bottom: 50px;background: url(../images/bg-products.png) 0px 50px; height:733px;background-repeat: no-repeat;}
.topic{}
.topic h2{font-size:50px;margin-bottom:15px;}
.topic p{font-size:40px;font-family:'robotobold';text-transform: uppercase;}
.inner-product{margin-top: 50px;}
.inner-product ul li{
    width:31%;
    display:inline-block;
    background:#fff;
    margin: 10px 10px;
    box-shadow: 3px 3px 10px #4e4e4e;
    padding:20px;
    vertical-align:top;
    height:510px;
    position: relative;
}
/*.inner-product ul li:after {
    width: 0;
    height: 0;
    content: '';
    border-left: 159px solid transparent;
    border-right: 159px solid transparent;
    border-top:50px solid #fff;
    position: absolute;
    bottom:-50px;
    left: 0;
    text-shadow:0 1px 1px rgba(0,0,0,0.5);
}*/
.inner-product ul li h3{color:#224099;font-size:28px;text-align: center;margin-bottom:15px;margin-top:30px;font-family:'robotobold';}
.inner-product ul li p{padding:0px 10px;font-size:15px;}
.step{background: url(../images/bg-step.png)top center no-repeat; width: 100%;}
.inner-step{margin: 60px 0;}
.inner-step ul li{}
.s-right{float:right;width: 70%;}
.s-right figure{width:40%!important;}
.s-right .detail-step{width:50%!important;}
.inner-step ul li figure{width:27%;display:inline-block;vertical-align:top;}
.detail-step{width:34%;display: inline-block;vertical-align:top;margin-right: 30px;font-family: 'db_ozone_xlight';font-size: 25px;}
.p-step-right{width:30%;display: inline-block; text-align: right;margin-top: -50px;}
.number{position:relative;color:#224099;font-size:70px;font-family: 'robotobold';border-bottom: 1px dotted #224099;width:170px;margin-bottom:20px;}
.number-2{width: 220px;}
.number p{background: #fff;padding:5px;position: absolute;font-size:25px;bottom:10px;left:37px;}
.step .topic{margin-bottom: 30px;}
.box-store{}
.inner-store{position:relative;height:500px;}
.bg-inner-store{
    background: #f5f5f7;
    padding:55px;
    width: 100%;
    position: absolute;
    color: #000;
    box-shadow:0px 0px 15px #d2d2d2;
    position:relative;
}
.inner-store-border {
    background: #fff100;
    margin:15px 0 0 15px;
    width:100%;
    height:380px;
    position: absolute;
    box-shadow:6px 3px 15px #c3c3c3;font-size: 15px;
}
.bg-inner-store figure{display:inline-block;width:48%;vertical-align:top;}
.detail-store{
    display:inline-block;
    width:48%;
    position: absolute;
    top: 50%;
    left:74%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
.detail-store p{margin: 5px 0;}
.detail-store h2{font-size: 35px;margin-bottom:10px;}
.detail-store h3{font-size: 35px;color:#224099;font-family: 'robotobold';margin-bottom:30px;}
.circle {
    width: 120px;
    height: 120px;
    border-radius: 100%;
    background: #224099;
    position: absolute;
    top: -50px;
    left: -70px;
    z-index: 9;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 30px;
    padding-top: 45px;
    box-shadow: 3px 3px 10px #4e4e4e;
}
.circle span{font-family:'robotobold';}
.bg-store{
     background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #ebeced 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%,#ebeced 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%,#ebeced 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebeced',GradientType=0 ); /* IE6-9 */
}
.pic-store{
    width:75%;
    margin: 20px auto 0 auto;
    line-height:0;
}
.box-notify{background:#fff100;width:100%;height:220px;position: relative;}
.box-notify .c-left{width:35%;float:left;background:#224099;position: relative;height: 220px;text-align: right;padding-top:20px;}
.box-notify .c-left:after{
    content: '';
    width: 0;
    height: 0;
    top:0;
    border-top: 110px solid transparent;
    border-left: 46px solid #224099;
    border-bottom: 110px solid transparent;
    position: absolute;right: -46px;
}
.box-notify .c-right{
    width:50%;
    float:left;
    padding:0px 0px 0px 140px;
    position: absolute;
    top: 50%;
    left: 60%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
.box-notify .c-right ul li{margin: 10px 0px;font-size: 15px;line-height:22px;position: relative;}
.box-notify .c-right ul li:before {
    content: '-';
    position: absolute;
    left: -15px;
    width: 100%;
    font-size: 20px;
}
.box-notify .c-left img{width:196px;}
.box-contact{height:580px; background: url(../images/bg-contact.png)center top;width: 100%;padding-top:80px;background-repeat: no-repeat;margin-bottom: 30px;}
.box-contact .topic{color: #fff;margin-bottom:40px;}
.box-contact .topic p{margin-bottom:25px;}
.box-contact .topic h2{font-size: 40px;text-transform: uppercase;}
.inner-form-bottom-left{display:inline-block;width: 47%;padding-right: 30px;vertical-align:top;}
.inner-form-bottom-right{display:inline-block;width:51%;padding-left: 30px;vertical-align:top;}
.box-contact .form-control{background:#fff;border-radius:20px;}
.inner-form-bottom-right .c-left{display: inline-block;width:60%;vertical-align:top;}
.inner-form-bottom-right .c-right{display: inline-block;width:38%;}
.btn-send{background: #fff100;border-radius:20px;padding:10px 30px;color: #333;font-size: 15px;}
.box-contact textarea{height:159px;}
footer{text-align: center;color:#5d5d5d;padding: 20px 0;font-size: 24px;}
footer p:nth-child(2){font-family: 'robotobold';}
footer figure{margin-top:20px;}
footer figure img{width: 100px;}
/*--------------------------------@media--------------------------------------*/
@media (min-width:1024px){
    .inner-store{width:980px;margin:auto;}
}
@media (max-width:1200px){
    .box-notify .c-right {
        width: 70%;
    }
    .box-notify .c-left{width:30%;}
    .circle {top:0;left: 0px;}
}
@media (min-width:1025px){
    .container{width:1024px;margin:auto;padding: 0px;}
}
@media (max-width:1024px){
    .inner-pic{padding:0 15px 0 15px}
    .area-form{margin-left:0px;}
    .bg-inner-store{padding:20px;}
    .detail-store{
        width:48%;
        position: relative;
        top: 0;
        left: 0;
        margin-left: 20px;
        margin-right:0%;
        transform: none;
    }
    .inner-store-border{display:none;}
    .inner-store{height:400px;}
}
@media (max-width:1023px){
    .inner-product ul li{width:30%;padding:15px;}
    .btn-send{padding:12px;font-size: 16px;}
}
@media (max-width:990px){
    .box-notify{height:auto;}
    .box-notify .c-left{width:20%;background:none;height:150px;}
    .box-notify .c-left:after{display:none;}
    .box-notify .c-right{
        padding:20px;
        width:80%;
        position: relative;
        top:0;
        left:0%;
        transform: none;
    }
    .box-contact{padding-top:40px;}
    .box-contact .topic{margin-bottom:20px;}
    .box-notify .c-left img{width:100%;}
}
@media (max-width:800px){
    .right{text-align: center;}
    .nav-collapse li {
        display: block;
        text-align: center;
        padding: 10px;
    }
    .area-product,.box-contact{height: auto;}
    .nav-collapse li:last-child{border-bottom:none;}
    .circle {
        width: 100px;
        height: 100px;
        font-size:20px;
        text-align: center;
        line-height: 15px;
        padding-top: 40px; 
    }
}
@media (max-width:768px){
    .detail-dsc{width:100%;}
    .area-form{width:90%;margin:30px auto 0 auto;display: block;}
    .inner-form{position:relative;border:7px solid #fff100;padding:20px;}
    .inner-form-border{display: none;position: relative;}
    .top-page{height: auto;background-repeat: no-repeat;}
    .inner-product ul li{width:44%;}
    .inner-product{margin-top:30px;}
    .bg-inner-store{padding: 20px;}
    .inner-store{height: auto;}
    .bg-inner-store{position:relative;}
    .inner-form-bottom-left{width: 100%;padding-right: 0;}
    .inner-form-bottom-right{width:100%;padding-left:0;}
    .inner-form-bottom-right .c-left{width:100%;}
    .inner-form-bottom-right .c-right{width: 100%;text-align: center;}
    .btn-send{padding:12px 50px;}
}
@media (max-width:640px){
    .container{padding-left:15px;padding-right:15px;}
    .detail-dsc h2{font-size:30px;margin-bottom:10px;}
    .inner-product ul li{padding:0px;}
    .inner-product ul li h3{font-size:20px;}
    .bg-inner-store figure,.detail-store{width: 100%;margin-left:0px;}
    .bg-inner-store figure{margin-bottom:20px;}
    .logo img{width:150px;}
    .btn-form{width:100%;}
    .inner-form{padding:20px;}
    .right nav ul li{padding:0px 5px;}
    .right nav ul li a{font-size:15px;padding-right:5px;}
    .inner-form{padding: 30px 20px;}
    .detail-store{margin-left:5px;}
}
@media (max-width:480px){
    .topic h2,.topic p{font-size:30px; line-height:34px;}
    .p-step-right{display:none;}
    .detail-step{width:70%;margin-right: 0px;}
    .s-right{width: 100%;float:left;}
    .s-right figure{width:27%!important;}
    .s-right .detail-step{width: 70%!important;}
    .box-contact .topic p{margin-bottom:10px; }
    .number,.number-2{ width:100px;}
    .number-2{ width:140px;}
    .menu-top{padding-top:10px;}
    .logo img{width:100px;}
    .pic-store{width:100%;}
    .box-contact .topic h2{font-size:25px;}
    .detail-dsc p:first-child,.detail-dsc p:nth-child(2){font-size:50px;margin-bottom: 0px;}
    .detail-dsc h1{font-size:22px;margin-top:10px;}
}
@media (max-width:375px){
    .inner-product ul li{width:100%;margin:10px 0px; height:auto;}
    .top-page .container{padding-left:0px;padding-right:0px;}
    .right nav ul li:nth-child(1) a img{width: 27px;}
    .right nav ul li a i{font-size:20px;}
    .detail-dsc p:first-child,.detail-dsc p:nth-child(2){font-size:40px;margin-bottom: 0px;line-height: 45px;}
}

.error {
  color: red;
  font-size: 11px;
}