/*==================================================
    General
==================================================*/

html,body{
  padding: 0;
  margin: 0; 
} 
html{height: 100% }
body{  
  font-family: 'Kanit', sans-serif;
  color:#323232;
  font-size: 18px; 
  font-weight: 400;
  font-style: normal;
  line-height: 1.8;
  margin: 0px;
  padding:0;  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 

  position: relative;
  overflow-x: hidden;

  background-color: #fff;
}

/*
font-family: 'Roboto', sans-serif;*/
 
b, strong{
  font-weight: 500; 
  font-family: inherit;
}
h1,h2,h3,h4,h5,h6{   
  margin:0;  
  color:#323232; 
  line-height: 1.4; 
  font-weight: 500; 
  font-family: inherit;
}  

.nowrap{ white-space: nowrap; }
 
a{
  color:inherit;
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
a:hover{ text-decoration: none; color: var(--color-secondary); }

.input-block{
  display: block; 
  position: relative;
  padding-bottom: 20px
}
.input-text{
  display: block; 
  padding-bottom: 7px
}
   
.form-control{
 -webkit-appearance: none;
  font-family: inherit;
  border-radius: 0; 
  color: #000000 !important;  
  padding: 0 15px;
  font-size: inherit;
  height: 45px;
  line-height: 45px; 
  border:2px solid #d2d2d2; /**/
  font-family: inherit;
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
.form-control.rounded{
  border-radius: 50px !important;
}
textarea.form-control{
  height: 150px;
  line-height: normal;
  padding-top: 15px;
}
 
.radio-group, 
.checkbox-group{ 
  padding-left:0; 
  position:relative;
  list-style-type:none;
  margin:0px;
  padding:0px;
  text-align:center;
  display:inline-block;
  vertical-align:top
}
.radio-group{ display:inline-block; position:relative}


.radio-group input[type="radio"],
.checkbox-group input[type="checkbox"] {
  /*display: none;*/
  visibility: hidden;
  opacity: 0;
  height: 0;
  position: absolute;
  width: 0
}
.checkbox-group label:before,
.radio-group label:before {
  content: "";
  display: inline-block;

  margin-right: 5px;
  position: absolute;
  left:0;
  top:3px;
  background-color:#ffffff;
  border:2px solid var(--color-secondary);
  width:25px;
  height:25px; 

   -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.radio-group label:before { 
   top:1px;
  width:22px;
  height:22px; 
  border:2px solid #c2c2c2;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
}

.thead-dark .checkbox-group label:before{border:2px solid #fff;}

.radio-group label,
.checkbox-group label {
  position:relative;
  padding-left:30px;
  padding-right:15px;
  text-align:left;
  margin:1px 0;
  display:block;
  font-weight:300;
  font-size:inherit;
  line-height:inherit;
  cursor:pointer;

  -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.checkbox-group label{color: inherit;}
.checkbox-group label span{ font-size: 12px; font-style: italic; color: #8f8f8f } 
.radio-group label{color: inherit; padding-left: 35px} 

 
.radio-group input[type="radio"]:checked + label:after{
  content: "";
  color: #ea6f21;
  background-color:var(--color-primary); 
  position:absolute;
  left: 4px;
  top: 5px;
  width: 14px;
  height: 14px;

  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
}
.checkbox-group input[type="checkbox"]:checked + label:after {
    content: "";
    color: #ea6f21;
  background-color:transparent;
  background-image: url(../img/icons/icon-radio-checked.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 17px; 
  position:absolute;
  left: 0px;
  top: 3px;
  width: 25px;
  height: 25px;
}

 
  
.checkbox-disable.checkbox-group label:before{
  background-color:#c0c0c0;
  border:2px solid #b1b1b1;
  cursor:default !important
}
.checkbox-disable.checkbox-group input[type="checkbox"]:checked + label:after {
  content:'';
}

.radio-group + .radio-group{ margin-left: 15px; }

.radio-group.no-text,
.checkbox-group.no-text{
  width: 29px;
  height: 29px;
  margin-top:-2px; 
} 
.form-control::-webkit-input-placeholder {
  color: #000000;
  opacity: 0.4;
}

.form-control::-moz-placeholder {
  color: #000000;
  opacity: 0.4;
}

.form-control:-ms-input-placeholder {
  color: #000000;
  opacity: 0.4;
}

.form-control::-ms-input-placeholder {
  color: #000000;
  opacity:0.4;
}

.form-control::placeholder {
  color: #000000;
  opacity:0.4;
}

.form-control:disabled, .form-control[readonly] {
  background-color: #EFECEC;
 
}

.custom-select{
  height: 45px;
  line-height: 41px;
  padding: 0 15px;
  font-size: inherit;
  color: var(--black);
  border-radius: 0;
  border: 2px solid #d2d2d2;
  font-family: inherit;
}
.custom-select option{ }

.select-block{
  position: relative;
  display: block;
}
.select-block:after{
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 2px;
  width: 45px;
  pointer-events: none;

  background: rgb(17,71,135); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(17,71,135,1) 0%, rgba(21,88,167,1) 33%, rgba(21,88,167,1) 50%, rgba(21,88,167,1) 67%, rgba(17,71,135,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(17,71,135,1) 0%,rgba(21,88,167,1) 33%,rgba(21,88,167,1) 50%,rgba(21,88,167,1) 67%,rgba(17,71,135,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(17,71,135,1) 0%,rgba(21,88,167,1) 33%,rgba(21,88,167,1) 50%,rgba(21,88,167,1) 67%,rgba(17,71,135,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#114787', endColorstr='#114787',GradientType=0 ); /* IE6-9 */
}
.select-block:before{
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width:10px;
  height:10px;
  margin-top: -7px;
  z-index: 9;
  vertical-align:top;
-webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);  

  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}

.select-block.red:after{
  background: rgb(199,37,47); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(199,37,47,1) 16%, rgba(220,50,62,1) 50%, rgba(199,37,47,1) 83%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(199,37,47,1) 16%,rgba(220,50,62,1) 50%,rgba(199,37,47,1) 83%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(199,37,47,1) 16%,rgba(220,50,62,1) 50%,rgba(199,37,47,1) 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7252f', endColorstr='#c7252f',GradientType=0 ); /* IE6-9 */

}
 
  
span.error{
  font-family: inherit;
  font-size: 12px;
  color: red;
  display: block;  
  
  position: absolute;
  top: 19px;
  left: 0;
  right: 0;

  display: none !important;
}  
 
.btn{
  padding: 0 40px;
  position: relative;
  
  border-radius: 0;
  border:0;
  height:45px;
  line-height: 45px; 
  font-family:'Kanit' ,sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  font-size:20px;
  overflow: hidden; 
  color: #fff;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c7252f+16,dc323e+50,c7252f+83 */
background: rgb(199,37,47); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(199,37,47,1) 16%, rgba(220,50,62,1) 50%, rgba(199,37,47,1) 83%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(199,37,47,1) 16%,rgba(220,50,62,1) 50%,rgba(199,37,47,1) 83%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(199,37,47,1) 16%,rgba(220,50,62,1) 50%,rgba(199,37,47,1) 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7252f', endColorstr='#c7252f',GradientType=0 ); /* IE6-9 */


  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
.btn.rounded{ border-radius: 15px  !important } 
.btn span{
  display: block;
  position: relative;
  z-index: 9;
  white-space: nowrap;
}
.btn:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0; 
   
  height:100%;
  z-index: 1;
  opacity: 0; 

  background-color: #000;
 
   -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
.pc .btn:hover{
  border-color: #000;
  color: #fff;
}
.pc .btn:hover:before{
  height: 100%;
  opacity: 1; 
}

.btn-blue{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#114787+0,1558a7+33,1558a7+50,1558a7+67,114787+100 */
  background: rgb(17,71,135); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(17,71,135,1) 0%, rgba(21,88,167,1) 33%, rgba(21,88,167,1) 50%, rgba(21,88,167,1) 67%, rgba(17,71,135,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(17,71,135,1) 0%,rgba(21,88,167,1) 33%,rgba(21,88,167,1) 50%,rgba(21,88,167,1) 67%,rgba(17,71,135,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(17,71,135,1) 0%,rgba(21,88,167,1) 33%,rgba(21,88,167,1) 50%,rgba(21,88,167,1) 67%,rgba(17,71,135,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#114787', endColorstr='#114787',GradientType=0 ); /* IE6-9 */

  color: #fff;
}
 
.btn-black{ 
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,434143+50,000000+100 */
  background: rgb(0,0,0); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(0,0,0,1) 1%, rgba(67,65,67,1) 50%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 1%,rgba(67,65,67,1) 50%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(0,0,0,1) 1%,rgba(67,65,67,1) 50%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

  color: #fff;
}  
.btn-outline-white{
  border:1px solid #fff;
  background-color:transparent;
  color: #fff;
}
.pc .btn-outline-white:hover {
  color: #000 !important;
  background-color: #fff; 
  border-color: #fff;
} 
.pc .btn-outline-white:hover svg path { fill: #000 }

.btn.has-arrow{ 
  padding: 0 40px 0 0;
  
}
.btn.has-arrow .text{
  padding: 0 20px;
}
.btn.has-arrow .icon{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-left: 1px solid rgba(255,255,255,0.4);
  width: 45px;
}
.btn.has-arrow .icon .arrow-right,
.btn.has-arrow .icon .arrow-left{
  width: 11px;
  height: 11px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  top: 18px;
  left: 14px;
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
.btn.has-arrow .icon .arrow-left{ left: 19px }
.pc .btn.has-arrow:hover .icon .arrow-right{ left: 18px; }
.pc .btn.has-arrow:hover .icon .arrow-left{ left: 14px; }

.btn.has-arrow .icon .icons{
  top: 10px;
  left: 12px;
}
.btn.btn-back span.text{ padding: 0 40px }

.btn.has-arrow.left{ padding: 0 0 0 45px; }
.btn.has-arrow.left .icon{
  right: auto;
  left: 0;
  border-left: 0;
   border-right: 1px solid rgba(255,255,255,0.4);
}
 

.btn svg,
.btn img{
  position: relative;
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
/*.pc .btn:hover svg,
.pc .btn:hover svg{
  left:7px;
}*/
 
.btn-link, 
.btn-link:hover, 
.btn-link:focus, 
.btn-link:active{
  background-color: transparent;
}
 

.btn:focus,.btn:active,
button:focus,button:active,
a:focus,a:active {
   outline: none !important;
   box-shadow: none!important;
}

.buttons{
  display: block; 
  text-align: center;
  padding-top: 50px;
  padding-bottom: 20px;
}
 
svg path,
svg rect,
svg line{ 
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}



/*==================================================
    Icon Setup
==================================================*/  

.icons{
  display:inline-block;
  position:relative;
  vertical-align:top;
  /*background-image:url(../img/icons.png);*/
  background-size: contain;
  background-repeat:no-repeat;
  background-position: 0 0;
}

.icon-search{
  width: 25px;
  height: 25px; 
  background-image:url(../img/icons/icon-search.svg);
} 
.icon-share{
  width: 16px;
  height: 16px; 
  background-image:url(../img/icons/icon-share.svg);
  opacity: 0.5;
  top: 7px;
  margin-right: 5px;
} 
.icon-share-facebook{
  width: 25px;
  height: 25px; 
  background-image:url(../img/icons/icon-share-facebook.svg);
} 
.icon-share-line{
  width: 25px;
  height: 25px; 
  background-image:url(../img/icons/icon-share-line.svg);
} 
.icon-pdf{
  width: 25px;
  height: 25px; 
  background-image:url(../img/icons/icon-pdf.svg);
} 


.inline-black{
  display: inline-block;
  padding: 0 10px
}
 
/**/

.arrow-left,
.arrow-right,
.arrow-up,
.arrow-down{
  position: absolute;
  left: 0;
  top: 0;
  width:5px;
  height:5px;
  vertical-align:top;

  border-top: 1px solid #676767;
  border-left: 1px solid #676767;

   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.arrow-left{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);  
}

.arrow-right{
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);  
}

.arrow-up{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);  
}
.arrow-down{
   margin-left:1px; 
   -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);  
}
 
.page{
  position: relative; 
  display: block;   
  overflow: hidden;   
  padding:120px 0 0;

  min-height: 400px;
  
}   
.container-fluid{
  max-width:100% ;  
  padding-left:100px;
  padding-right:100px;
  position: relative; 
}

.container{
  max-width: calc(1400px + 160px);
  padding-left: 80px;
  padding-right:80px; 
  position: relative;
  z-index: 9
}

@media (max-width: 1380px) {
  .container-fluid,
  .container{
    padding-left: 50px;
    padding-right: 50px;
  }
}
@media (max-width: 992px) {
  .container-fluid,
  .container{
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 767px) {
  .container-fluid,
  .container{
    padding-left: 25px;
    padding-right: 25px;
  }
}
.compensate-for-scrollbar{ margin-right: 0 !important } 
.compensate-for-scrollbar .header{ right: 0 } 
body.fancybox-active{ overflow: visible !important;padding-right: 0 !important  }
 

:root { 
  --color-blue:#203e7c;
  --color-red:#c91339;
  --color-gray:#737373;   
  --color-black:#141414; 
  --bordergray:#d3d2d2;
}
.gray{color: var(--gray)}
.blue{color: var(--color-blue)}
 .italic{font-style: italic;}
/*==================================================
    Header Setup
==================================================*/  

.header{
  display: block;
  position: fixed;
  padding:0;
  top: 0;
  left: 0;
  right: 0;
  padding: 0; 
  z-index: 1020; 
  background-color: #fff;   
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0);
}  

.navbar-brand {
  margin: 0;
  padding: 0;
  width: 90px; 
} 
.navbar-brand img{
  width: 100%
} 
.navbar-main{
  float: right;
  display: flex;
  height: 120px;
}
.section.section-nav-panel{padding: 0;}

.header,
.navbar-brand,
.navbar-main,
.nav-menu .nav-item a,
.nav-menu .nav-item a span:before{
   -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}
@media (min-width: 1025px) {
  .btn-icon{display: none !important;}
  .section.section-nav-panel{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    z-index: 1030;
  }
  .section.section-nav-panel .container{ position: relative; }
  .nav-panel{
    position: absolute;
    top: 0;
    right: 218px;
    z-index: 1010
  }
  .nav-menu{ margin-right:-6px;  }
  .nav-menu .nav-item{
    padding:0 4px;
  }
  .nav-menu .nav-item a{
    display: block;
    height: 120px;
    line-height: 120px;
    font-weight: 400;
    font-size: 20px;
  }
  .nav-menu .nav-item a span{
    display: block;
    position: relative;
    padding: 0 20px;
  }
  .nav-menu .nav-item a span:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 60%;
    opacity: 0;
    height: 30px;
    background-color: #fff; 
  }
  .nav-menu .nav-item.active a span:before,
  .pc .nav-menu .nav-item:hover a span:before{ top: calc(100% - 5px); opacity: 1; height: 5px;background-color: var(--color-blue); }

  .nav-menu .nav-item.active a,
  .pc .nav-menu .nav-item:hover a{ color: var(--color-blue) } 

  .scrolling .header{box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.2);}
  .scrolling .navbar-main{
    height: 90px;
  }
  .scrolling .navbar-brand{
    width: 75px;
  }
  .scrolling .nav-menu .nav-item a{
     height: 90px;
     line-height: 90px;
  }
}

.nav-followus{
  margin: -6px -7px 0 10px;
  padding-left: 12px;
  position: relative;
}
.nav-followus:before{
  content: '';
  position: absolute;
  top: 2px;
  bottom: -1px;
  left: -3px;
  border-left: 1px solid var(--bordergray);
}

.nav-followus .nav-item {
  padding:0 7px; 
}
.nav-followus .nav-item a{
  
  display: block;
}
.nav-followus .nav-item a svg,
.nav-followus .nav-item a img{
  width: 25px;
  height: 25px;
} 
.nav-followus .nav-item a svg path{ fill: var(--color-blue) }

/*==================================================
    Section - menu mobile
==================================================*/ 

.btn-icon{
  padding: 0;
  background: transparent !important;
  border:0 !important;
  width: 30px;
  height: 20px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  z-index: 999;
  padding:0 0;

  top: 1px;
  overflow: visible; 
  float: left;
}
.btn-icon:before{
  display: none;
}
.btn-icon .bar{
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -1px;
  width: 100%;
  height: 3px;
  background: var(--color-blue);
}
.btn-icon .bar:before, 
.btn-icon .bar:after {
    position: absolute;
    left: 50%;
    width: 100%;
    height: 100%;
    background: inherit;
    content: "";
    -webkit-transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
}
.btn-icon .bar:before {
  top: -9px;
}
.btn-icon .bar:after {
  top: 9px;
}
.pc .btn-icon:hover .bar:before, 
.pc .btn-icon:hover .bar:after {
  width: 70%;
}
  
.navbar-topbar .row{ position: relative; }
.navbar-topbar .row > div{ position: static; }

.preload {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 1022;
}
.nav-header{display: none;}
/*==================================================
    Responsive media queries
==================================================*/

@media (max-width: 1440px) {
  .nav-panel{ right:210px  }
  .nav-menu {margin-right: 5px;}
  .nav-menu .nav-item a span{ padding: 0 12px }
}
@media (max-width: 1380px) {
  .nav-panel{ right:185px  }
}

@media (max-width: 1200px) {
  .nav-menu .nav-item {padding: 0 2px;}
  .nav-menu .nav-item a{font-size: 18px}
}
@media (max-width: 1100px) {
  .nav-menu .nav-item a span{ padding: 0 8px }
}

@media (max-width: 1024px) {
  .page{ padding-top: 90px; }
  .scrolling .header{box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.2)}

  .breadcrumb-item + .breadcrumb-item::before{ padding-right: 10px }
  .navbar-brand{ width: 75px }
  .navbar-main{height: 90px}
  .btn-icon{display: block;}
  .nav-panel{
    position: fixed;
    top: 0; 
    left: 0;
    height: 100vh;
    width: 380px; 
    background-color: var(--color-blue);

    padding:0; 
 
    pointer-events: none;

    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  .section.section-nav-panel{ z-index: 1060; }
  .closing .nav-panel{ opacity: 1; pointer-events: auto; } 

  .nav-header{
    display: flex;
    background-color: #fff;
    height:90px;
    padding: 0 30px;
    -ms-flex-align: center;
    align-items: center;
    display: block;
  }
  .nav-header .navbar-brand{ width: 60px; margin-top: 20px}
  .nav-menu {
    display: block;
  }
  .nav-menu{ 
    margin: 0;
    padding: 20px 30px;
  }
  .nav-menu .nav-item{
    display: block;
  }
  .nav-menu .nav-item a{
    display: block;
    font-size: 20px;
    font-weight: 300;
    padding:10px 0; 
    border-bottom:1px solid rgba(255,255,255,0.1);
    position: relative;
    color: rgba(255,255,255,0.8);
    font-size: 20px;
  } 

  .nav-menu .nav-item.active a{color: rgba(255,255,255,1);}

  .header .nav-followus{ margin: -4px 25px 0 0;}
  .header .nav-followus::before{display: none;}

  .nav-close{
    position: absolute;
    right: 20px;
    top: 25px;
    cursor: pointer;
    height: 40px;
    width: 40px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
  .nav-close:before,
  .nav-close:after{
    position: absolute;
    top: 19px;
    left: 8px;
    content: "";
    width: 28px;
    height: 3px;
    background: #222;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .nav-close:before{
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .nav-close:after{
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .nav-close:hover:before,
  .nav-close:hover:after {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  .page-blocker{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:transparent;
    z-index: 1050;

    pointer-events: none;
    display: block;
    opacity: 0;

    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    background-color: rgba(0,0,0,0.9);
  }
 
  .menu-opened .page-blocker{
    pointer-events: auto;
    opacity: 1;
    cursor: pointer;
  }

  .menu-opened .nav-panel{
   -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}

@media (max-width: 767px) {
  .page{ padding-top: 70px }
  .navbar-brand{ width: 55px }
  .navbar-main {height: 70px;}
  .nav-panel{
    width: 280px;
  }
  .nav-menu{ padding: 20px 25px; }
  .nav-menu .nav-item a{ font-size: 18px; }

  .nav-header{height: 70px;}
  .nav-header .navbar-brand{ width: 55px; margin-top: 12px }

  .nav-close{right: 13px;top: 14px;}
}

@media (max-width: 450px) {
  .header .nav-followus{ margin-right: 15px; }
  .nav-followus .nav-item a svg, 
  .nav-followus .nav-item a img {
    width: 22px;
    height: 22px;
  }
}


/*==================================================
    Section - setup
==================================================*/ 

.section{
  display: block;
  position: relative;  
  padding:80px 0 ;
} 
.section.pt-15{ padding-top: 15px; }

.background{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  pointer-events: none; 
}
.background.contain{background-size: contain;}
.background.blur{
 -webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
transform: scale(1.1);
}
.background.blur:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:rgba(0,0,0,0.6);
}

.section-body{
  background-color: #f5f5f8;
  padding: 40px 0;
} 

.section-header{
  display: block;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 40px; 
}

.page-header{
  background-color: #000000;
}
.page-header .title-xl{
  position: relative;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px
}
.page-header .title-xl:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 70px;
  background-color: var(--color-red)
}
.page-header-info{
  background-color: transparent;
  padding:45px 0; 
}
.page-header-info p{ margin: 0; line-height: 1.3}

.row.space-0{ /*margin:0*/}
.row.space-0 > div{ padding:0}

.row.space-20{ margin:0 -20px; }
.row.space-20 > div{ padding:0 20px}

.title-xl{
  font-size: 55px;
  font-weight: 500;
}
.title-lg{
  font-size: 48px;
  font-weight: 500;
}
.title-md{
  font-size: 30px;
  font-weight: 500;
}
.title-sm{
  font-size: 26px;
  font-weight: 500;
}
.thin{ font-weight: 300 !important }
.light{ font-weight: 300 !important }
.regular{ font-weight: 400 !important }
.medium{ font-weight: 500 !important }
.bold{font-weight: 600 !important }
.italic{font-style: italic;}
 
.white{ color:  #fff !important }


.card{
  border:0;
  border-radius: 0;
}
.card-photo{
  display: block;
  position: relative;
  overflow: hidden;
  background-color: #222;
}
 .card-photo .photo{
  display: block;
  transform: scale(1.02);   

  -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.card-photo .photo img{ width: 100% }
.pc .card-photo:hover .photo{transform: scale(1.1); opacity: 0.7}
 
.card-photo.video:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  pointer-events: none;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80px;
  background-image: url(../img/icons/icon-play.png);
}

.card-info{
  background-color: #fff;
  padding: 15px;
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

   box-shadow: 0 0 40px rgba(0,0,0,0)
}
.main .card-info{ margin-bottom: 20px }
.card-info .card-body{
  padding: 30px 10px 10px
}
.card-info .btn{ height: 40px; line-height: 40px; font-size: 18px; }
.card-info .btn .text{ padding: 0 30px; }
.card-info .btn .icon{ width: 40px; }
.card-info .btn .icon .arrow-right{top: 14px; left: 11px;}
.card-info h2{ 
  line-height: 1.2;
  color: var(--color-black);
  color: var(--color-black);
  display: -webkit-box;
  height: 64px;  
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc .card-info h2:hover a{ opacity: 0.8 }
.card-info h2.oneline{ height: auto;margin-bottom: 15px; }
.card-info p.info{ line-height: 1.3; font-size: 20px; }
.card-info .date{ color: #737373; margin: 20px 0; }
.share-wrap{
  float: right;
  color: var(--color-gray);
  font-size: 16px;
}
.share-wrap .text{ display: inline-block; margin-right: 5px; }
.pc .share-wrap a:hover{ opacity: 0.7 }
.pc .card-info:hover{box-shadow: 0 0 40px rgba(0,0,0,0.1); z-index: 9}
.pc .card-info h;2:hover a{ color: var(--color-red) }

.breadcrumb{
  margin-bottom: 0;
  background-color: transparent;
  font-size: 14px;
  color: #000000;
  padding:10px 0;
}
.breadcrumb a{
  color: #000000;
}
.pc .breadcrumb a:hover{ text-decoration: underline; }

.breadcrumb-item.active{
  color: #104480
}
.breadcrumb-item + .breadcrumb-item{
  padding-left: 15px
}
.breadcrumb-item + .breadcrumb-item::before{
  content: '>';
  padding-right: 15px;
}

.article {
  display: block;
  font-size: 20px;
}


.article ul{
  list-style-type: none;
  margin:0;
  padding: 0; 
}
.article ul li{ 
  position: relative;
  padding: 0 0 0 18px;
  margin:0; 
}
.article ul li:before{
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  background-color: var(--color-black);
  border-radius: 50%
}

.article ol{ padding-left: 30px }

.article ol {
    counter-reset: list;
    margin: 0;
}

.article ol > li {
    list-style: none;
    position: relative;
}

.article ol > li:before {
    counter-increment: list;
    content:"(" counter(list) ") ";
    position: absolute;
    left: -1.4em;
}

.article h2{
  font-size: 45px;
  margin-bottom: 20px
}
.article p,
.article ul,
.article ol{ margin-bottom: 25px; }

.article ol li,
.article ul li{ margin-bottom: 25px }

.article .date{
  color: #737373;
  font-size: 18px;
  white-space: nowrap;
}

.article .share-wrap{
  float: right;
  color: #737373;
  font-size: 16px;
  border-left:1px solid #8f8f8f;
  padding-left: 15px;
  font-weight: 300;  
}

.article .tags{
  display:inline-block;
  background-color: #104480;
  color: #fff;
  font-weight: 400;
  font-weight: 300;
  font-size: 16px;
  padding: 5px 15px;
  margin-top: 15px;
}

.article-footer{
  display: block;
  border-top: 2px solid #d2d2d2;
  padding: 30px  0 50px;
  margin-top: 70px
}
/*==================================================
    Section - breadcrumb
==================================================*/ 
.section-breadcrumb{
  display: block;
  background-color:#f7f7f7;
  padding: 0 !important 
}

/*==================================================
    Section - banner
==================================================*/ 

.section-banner{ 
  background-color: #ccc;
  padding: 0 !important;
  overflow: hidden;
}
.swiper-banner .swiper-slide{ position: relative; }
.swiper-banner .img-bg {
  width: 100%;
  position: relative;
  pointer-events: none;
}
.swiper-banner .img-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 99%; 
  z-index: 10;
  pointer-events: none;
}

.banner-caption{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
}

.caption-wrap{
  position: absolute;
  top: 8vw;
  left: 0;
  z-index: 9;
  padding: 20px 0;
  width: 60vw;
  background-position: top right;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../img/thumb/banner-caption-texture.png);

  color: #fff;
  text-align: right;
}
.caption-wrap .container{ position: relative; }
.caption-wrap .inner{
  display: inline-block;
  padding-right: 7.6vw;
}
.caption-wrap .inner > span{
  display: block;
  font-style: italic;
  text-shadow: 2px 0 9px rgba(0,0,0,0.46);
  text-transform: uppercase;
  line-height: 0.95;
  text-align: left;
}
.caption-wrap .inner > span.f1{ font-size: 40px; font-family: 'Eurostile'; font-weight: bold; }
.caption-wrap .inner > span.f2{ font-size: 70px; font-family: 'Eurostile'; font-weight: bold; }
.caption-wrap .inner > span.f3{ font-size: 40px; font-weight: 400; text-align: right; }

.video-wrap{
  position: absolute;
  bottom: 8vw;
  left: 0;
  z-index: 9;
  width: 100%;
}
.video-wrap .videothumb{
  display: block;
  position: absolute;
  top: -40px;
  left: 80px;
  width: 225px; 
  background-color: #141414;
  padding: 10px;
  cursor: pointer;
}
.video-wrap .videothumb:before{
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;

  background-color: rgba(255,255,255,0.3);
  -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.pc .video-wrap .videothumb:hover:before{ background-color: rgba(255,255,255,0);}
.video-wrap .videothumb:after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;

  margin:-25px 0 0 -25px; 

  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/icons/icon-play.png);
}
.video-wrap .videothumb img{
  width: 100%;
}
.video-wrap .videobar{
  background-color: #141414;
  padding: 15px;
  width: 55vw; 
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
  padding:15px 40px 15px 245px;
  display: block;
}
.video-wrap .videobar p{
  margin: 0;
  display: inline-block;
  position: relative;
  padding-right: 20px;
}
.video-wrap .videobar .inner{
  display: inline-block;
  position: relative;
}
.video-wrap .videobar .arrow{
  position: absolute;
  right:0;
  top: 5px;
  bottom: 5px;
  border-right: 1px solid rgba(255,255,255,0.5);
}
.video-wrap .videobar .arrow .arrow-right{
  width: 12px;
  height: 12px;
  top: 12px;
  left: 10px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;

  -webkit-transition: all 0.1s ease-in-out;
   -moz-transition: all 0.1s ease-in-out;
   -o-transition: all 0.1s ease-in-out;
   -ms-transition: all 0.1s ease-in-out;
   transition: all 0.1s ease-in-out;
}

.pc .video-wrap:hover .videobar  .arrow .arrow-right{ left: 17px }
/*==================================================
    Section - book now
==================================================*/
.section-booknow{
  background-color: var(--color-blue);
  padding-top: 0 !important;
  padding-bottom: 170px;
}
.section-booknow .title-lg{ color: #fff; }

.section-booknow .button{
  display: block;
  text-align: center;
}

/*==================================================
    Section - Car Info
==================================================*/
.section-car-info{
  background-color: #fff;
  padding:0 !important; 
}
.section-car-info .background{
  width: 45%;
  height: 100%;
  left: auto;
  right: 0;
  background-position: top right;
  background-size: 1000px;

  background-image: url(../img/thumb/carinfo-texture--2.png);
}

.carinfo-box{
  display: block;
  position: relative;
  background-color: #fff;
  padding: 0; 
  position: relative;
  top: -90px;
  min-height: 200px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  overflow: hidden;
}
.carinfo-box .inner{
  position: relative;
  z-index: 99; 
}
.carinfo-box .row-01{
  display: block;
  padding: 100px 0 40px;
  position: relative;

}
.carinfo-box .row-01:before{
  content: '';
  position: absolute;
  top: 0;
  left: -1000px;
  right: 0;
  bottom: 0;
  
  background-image: url(../img/thumb/texture-gray.jpg);
  background-position: center center;
  background-repeat: no-repeat;
}
.carinfo-box .row-02{
  display: block;
  padding: 30px 0 80px;
  position: relative;
}
.carinfo-box .row-02 .inner{ padding-left: 10px; }
.carinfo-box .buttons{
  padding: 0;
  text-align: left;
}
.carinfo-box .buttons .btn {
  margin:0 10px; 
  overflow: visible;
  height: 42px;
  line-height: 42px;
  font-size: 20px;
}
.carinfo-box .buttons .btn + .btn:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -13px;
  border-left: 1px solid rgba(0,0,0,0.4);
}

.carinfo-box .title-xl{ font-size: 50px; line-height: 1; font-weight: 600;}
.carinfo-box .title-lg{ font-size: 40px; line-height: 1.2}
.carinfo-box h3.title-lg{ margin-top: 0px; margin-bottom:10px;  }
.carinfo-box p.title-lg{ color: var(--color-red); font-weight: 600; margin-bottom: 0; }
.carinfo-box p.text{font-size: 25px; margin-bottom:15px;font-weight: 500;  }

.carinfo-box .row-01 p.text{ padding-left: 10px }
.carinfo-box .img-car{
  position: relative; 
  z-index: 9;
  width: 90%;
  margin:0 auto;
  display: block; 
}

.carinfo-texture {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; 
  z-index: 9;
  pointer-events: none;
}
.carinfo-texture .texture {
  position: relative;
  display: block;
  width: 48.5%
}
.carinfo-texture .texture img{ width: 100%; }
 
.carinfo-texture .texture .item2{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.carinfo-box.main { top: 0; box-shadow: none; overflow: visible; padding-bottom:40px } 
.carinfo-box.main h3.title-lg{ font-size: 31px; line-height: 1.6; margin-top: 5px;}
.carinfo-box.main .title-lg{ font-size: 42px; margin-top: 20px;}
.carinfo-box.main .row-01{ padding: 50px 0 }
.carinfo-box.main .row-02{ padding: 60px 0 }
.carinfo-box.main .row-01::before{ right: -1000px !important; left: -1000px !important; background-repeat: repeat-x; }
.carinfo-box.main hr{ margin: 40px 0; }
.carinfo-box.main .img-car{ top: 100px; }

.carinfo-box.in-banner{
  background-color: transparent;
  margin:0 ;
  position: absolute;
  top: auto;
  left:80px;
  bottom: 4vw;
  box-shadow: none;
  min-height: 0
}
.carinfo-box.in-banner .row-01::before{display: none;}
.carinfo-box.in-banner .row-02{ padding-bottom: 0 }

.carinfo-box.in-banner .title-xl{ font-size: 70px; font-weight: 500}
.carinfo-box.in-banner h3.title-lg{ font-size: 50px; margin:0 }
.carinfo-box.in-banner p.title-lg{ font-size: 58px; color: #e90f1c }
.carinfo-box.in-banner .row-02 .inner{ padding-left: 60px }

.star{ color: var(--color-red); font-size: 20px;
display: inline-block;
position: relative;
top: -5px;}

.car-color p{ font-size: 30px; font-weight: 300; }
.color-list{
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0
}
.color-list li{
  display: inline-block;
  vertical-align: top; 
  border-radius: 50%;
  border:10px solid transparent;
}
.color-list li span{
  display: block; 
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%; 
  border:1px solid transparent;
}
.color-list li.white span{background-color: #fff;border:1px solid #f1f1f1;}
.color-list li.gray span{background-color: #9a9a9a;}
.color-list li.black span{background-color: #000;}

.color-list li.active{border:10px solid var(--color-blue);}
.color-list li.white.active span{ border:0; }

.carinfo-row{
  display: block;
  position: relative;
  padding:15px 0;
}
.carinfo-row .colunm{
  position: relative; 
  padding-left: 7px; 
  padding-right: 7px; 
}

.carinfo-row .colunm img{ width: 100%}
.carinfo-row .colunm:first-child{padding-left: 0}
.carinfo-row .colunm:last-child{padding-right: 0}

.car-model-article{
  display: block;
  position: absolute;
  font-size: 22px;
}
.car-model-article h3{ 
  font-size: 50px; 
  position: relative; 
  padding: 0 0 18px;
  margin-bottom: 25px;
}
.car-model-article h3:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 74px;
  background-color: var(--color-red)
}
.car-model-article h5{ 
  font-size: 28px; 
  position: relative;  
}
.car-model-article p{
  margin-bottom: 0
}
/*.row.img-group{ margin:0; -ms-flex-wrap: unset;flex-wrap: unset; }*/

.device .row.img-group{ margin:0; }
.carinfo-row.exterior{ /*margin-right:-20px*/ padding-top: 0; z-index: 200 }
.carinfo-row.exterior .colunm.c1{ width:10vw;}
.carinfo-row.exterior .colunm.c2{ width: 31vw;}  
.carinfo-row.exterior .colunm.c3{ width: 14vw;} 
.carinfo-row.exterior .colunm.c4{ width: 45vw;}

.carinfo-row.exterior .car-model-article { 
  left: 12vw;
  max-width: 40vw;
  bottom: 24vw;
}
 
.carinfo-row.utility .colunm.c1{ width:39vw; }
.carinfo-row.utility .colunm.c2{ width: 37vw;}  
.carinfo-row.utility .colunm.c3{ width: 24vw;}

.carinfo-row.utility .car-model-article { 
  left: 12vw;
  max-width: 40vw;
  bottom: 0;
}
.carinfo-row.performance .background{position: relative;}everlasting god 
.carinfo-row.performance .background img{width: 100%}
.carinfo-row.performance .row{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.carinfo-row.performance .car-model-article { position: relative;}

.carinfo-row.performance .colunm.c1{ width:55vw; text-align: center; }
.carinfo-row.performance .colunm.c2{ width: 45vw;} 

.carinfo-row.performance .colunm.c1 img{ width: 65%; margin-left: 10vw }

.carinfo-row.safety .car-model-article { 
  position: relative;
  margin-left: 11vw;
  margin-bottom: 50px
}
.carinfo-row.safety .container{ padding-left: 11vw; padding-right: 10px; max-width: 100% }
.swiper-safety{
  overflow: visible;
  margin-bottom: 15px;
}
.swiper-safety .swiper-slide img{ height: 20vw; }

.carinfo-texture.main { z-index: 100;}
.carinfo-texture.main img,
.carinfo-texture.utility img,
.carinfo-texture.performance img{ width: 100% }

.carinfo-texture.main .item1{ 
  position: absolute;
  top: 0;
  left: 0;
  width: 20vw; 
}
.carinfo-texture.main .item2{ 
  position: absolute;
  bottom:-2vw;
  right: 0;
  width: 35vw; 
}
.carinfo-texture.utility .item1{ 
  position: absolute;
  top:-15px;
  left: 0;
  width: 9vw; 
}
.carinfo-texture.performance .item1{ 
  position: absolute;
  top:-15px;
  right: 0;
  width: 17vw; 
}

.choose-car{
  display: block;
  margin-bottom: 40px
}

.choose-car .buttons{
  padding: 0;
  margin:0 -9px; 
  text-align: left;
}
.choose-car .buttons .btn{
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  padding: 0 30px;
  margin:0 9px; 
  overflow: visible;
}
.choose-car .buttons .btn + .btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -13px;
  border-left: 1px solid rgba(0,0,0,0.4);
}
 .section-buyingcar .choose-car .hgroup{ padding-bottom: 15px }
/*==================================================
    Section - Offer
==================================================*/
.section-offer{
  padding: 0 !important
}
.swiper-offer .background{
  position: relative;
}
.swiper-offer .img-bg{
  width: 100%;
  position: relative;
}
.swiper-offer .img-overlay{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.offer-caption{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 52vw;
  display: flex;
  text-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 3;
}
.offer-caption .inner{
  display: block;
  width: 100%;
}
.offer-caption h2{
  font-size: 45px;
  line-height: 1.2;
  color: var(--color-blue);
  font-style: italic;

  padding-left: 7vw;
}
.offer-caption h2 span{
  display:block;
  font-size: 35px;
}
.offer-caption p{ 
  margin: 0;
  line-height: 1.2;
  color: #fff;
  font-size: 32px;
  font-weight: 500;
  font-style: italic;

  padding-left: 7vw;
}

.offer-caption div.has-bg{
  display: block;
  position: relative;
  padding: 20px 0;
  margin-top:20px; 

  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
  background-image: url(../img/thumb/offer-caption-texture.png);
}
@media (min-width: 851px) {
  .swiper-banner .element1,
  .swiper-banner .element2,
  .swiper-banner .element3,

  .swiper-offer .element1,
  .swiper-offer .element2,
  .swiper-offer .element3 {
      -webkit-animation-duration: .9s;
      animation-duration: .9s;
      -webkit-animation-delay: .8s;
      animation-delay: .8s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: fadeOut;
      animation-name: fadeOut;
  }
 
  .swiper-banner .swiper-slide-active .element1,
  .swiper-offer .swiper-slide-active .element1{
      -webkit-animation-delay: 1.0s;
      animation-delay: 1.0s; 
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight;
  }

  .swiper-banner .swiper-slide-active .element2,
  .swiper-offer .swiper-slide-active .element2{
      -webkit-animation-delay: 1.2s;
      animation-delay:  1.2s; 
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight;
  }

  .swiper-banner .swiper-slide-active .element3,
  .swiper-offer .swiper-slide-active .element3{
      -webkit-animation-delay: 1.7s;
      animation-delay: 1.7s; 
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight;
  }   
}
.swiper-bann .swiper-slide,
.swiper-offer .swiper-slide{
  position: relative;
}
.offer-texture {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; 
  z-index: 9;
  pointer-events: none;
}
.offer-texture .texture{
  position: absolute;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.offer-texture .texture.item1{
  top: 0;
  left: 0;
  width: 7vw;
  height: 7vw;
  background-image: url(../img/thumb/offer-texture-1.png);
}
.offer-texture .texture.item2{
  top: 7vw;
  left: 0;
  width: 3.5vw;
  height: 3.5vw;
  background-image: url(../img/thumb/offer-texture-2.png);
}

.offer-texture .texture.item3{
  bottom: 0;
  right: 0;
  width: 15vw;
  height: 15vw;

  background-image: url(../img/thumb/offer-texture-3.png);
}
/*==================================================
    Section - Standard
==================================================*/ 
.section-standard{
  background-color: var(--color-blue);
  background-image: url(../img/thumb/texture.png);
  background-position: center center; 
  color: #fff;
}
.section-standard .title-lg{ color: inherit; }

.standard-item{
  display: block;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  max-width: 300px;
}
.standard-item .icon{
  display: block;
  margin:0 auto 30px;
  border-radius: 50%;
  background-color: var(--color-red);
  width: 135px;
  height: 135px; 
  position:relative;
  overflow: hidden;
}
.standard-item .icon:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border:2px solid #fff;
  border-radius: 50%; 

  -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.standard-item .icon img{ 
  width: 100%;
}
   
.pc .standard-item:hover .icon:before{
  border-width: 4px;

  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
} 
.standard-item h3{ 
  line-height: 1.4;
  color: inherit;
  font-weight: 400;
} 

.download-wrap{
  display: block;
  text-align: center;
  margin-top: 20px;
}
.download-wrap hr{ 
  border-color: rgba(255,255,255,0.4);
  margin-top:0;  
  margin-bottom: 40px;
}
.download-wrap .btn{ 
 margin-top:20px;  
}
.download-wrap .btn .text{ width: 300px; }
/*==================================================
    Section - highlight
==================================================*/ 

.section-highlight{ 
  background-color: #fff;
} 
.section-highlight .card-info{
  padding: 10px;
}
.section-highlight .buttons{ padding-top:30px; padding-bottom: 0}
.section-highlight .buttons .btn span.text{ width: 307px;}

/*==================================================
    Section - Service
==================================================*/ 
.section-service{
  background-color: #eeeeee; 
  background-image: url(../img/thumb/texture-gray.jpg);
  background-position: center center; 
}
.card-service {
  position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,0.10);
}
.card-service .background{
  position: relative;
  overflow: hidden;
}
.card-service .background > div{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.card-service .background > div.b1{
  position: relative;
}
.card-service .background img{
  width: 100%;
}
.card-service .hgroup{
  position: absolute;
  top: 0;
  left: 0;
  padding: 40px 0 0 40px;
}

.card-service .hgroup h2{
  font-size:52px;
  line-height: 1.1
}
.card-service .hgroup p{
  font-size: 40px;
  line-height: 1.2;
  font-weight: 500;
}
.card-service .buttons{
  padding: 0 !important
}
.card-service .btn{
  position: absolute;
  left: 40px;
  bottom: 40px;
}
.card-service .btn .text{ padding: 0 30px; }

.card-service.md{
  height: 189px;
  margin-bottom: 40px 
}
.card-service.md .background{
  position: absolute;
  width:50%;
  right: 0;
  left: auto;
  bottom: 0;
}
.card-service.md .background > div{
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
}
.card-service.md .background > div.b1{
  position: absolute;
  background-image: url(../img/thumb/photo-service-bg-1.png);
}
.card-service.md .background > div.b2{
  background-image: url(../img/thumb/photo-service-bg-2.png);
}
.card-service.md .background > div.b3{
  background-position: left bottom;
}
.card-service.md .caption{
  position: relative;
  padding:30px 0px 30px 35px;
  font-size: 20px;
  line-height: 1.3;
  width: 52.5%
}
.card-service.md .caption h4{
  font-size: 27px;
  color: var(--color-blue);
  font-weight: 500;
  margin-bottom:10px;
  line-height: 1.2
}
.card-service.md .caption h4.twoline{ margin-top: -10px; margin-bottom:5px; line-height: 1.2  }
/*==================================================
    Section - Innovation
==================================================*/   
.swiper-innovation .img-main{ width: 100% }
.innovation-caption{
  margin: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.innovation-caption > div{
  padding: 0
}  

.innovation-caption .box{
  display: block;
  height: 50%;
  position: relative;
}  
  
.innovation-caption .textbox{
  background-color: rgba(32,62,124,0.7);
  display: flex;
  color: #fff;
  padding: 30px;
  height: 100%;
  -ms-flex-align: center;
  align-items: center;
}
.innovation-caption .textbox h2{
  font-size: 48px;
  color: #fff;
  line-height: 1.2;
  margin-bottom:25px; 
  position: relative;
  padding-bottom: 22px;
}
.innovation-caption .textbox h2:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 4px;
  background-color: var(--color-red)
}
.innovation-caption .textbox h4{
  font-size: 28px;
  color: #fff;
  line-height: 1.2;
  margin-bottom:10px; 
}
.innovation-caption .textbox p{
  font-size: 20px;
  margin:0 ;
  line-height: 1.2
}
.innovation-caption .box.bottom .background{ background-position: center bottom; }
.innovation-caption .col-left .textbox{
  width: 50%;
  margin-left: auto;
}
.innovation-caption .col-right .textbox{
  width: 100%;
  background-color: rgba(0,0,0,0.7);
  padding: 0 60px
}
.innovation-caption .col-right .textbox .inner{
  display: inline-block;
  max-width: 799px
}

.swiper-innovation .swiper-button-prev{
  background-image: url(../img/icons/icon-prev-small.png);
  background-size: 30px;
}
.swiper-innovation .swiper-button-next{
  background-image: url(../img/icons/icon-next-small.png);
  background-size: 30px;
}

.swiper-button-prev{
  background-image: url(../img/icons/icon-prev-small.png);
  background-size: 30px;
}
.swiper-button-next{
  background-image: url(../img/icons/icon-next-small.png);
  background-size: 30px;
}

.pc .swiper-innovation .swiper-button-next:hover,
.pc .swiper-innovation .swiper-button-prev:hover{opacity: 0.8}

.pc .swiper-button-next:hover,
.pc .swiper-button-prev:hover{opacity: 0.8}

.swiper-pagination.innovation{ display: none; }

.swiper-safety .swiper-button-prev{ left: -7vw; }

/*.swiper-safety .swiper-button-prev{ left: 10vw; }
.swiper-safety .swiper-button-next{ right: 10vw; }*/



@media (min-width: 851px) {
  .innovation-caption .element1,
  .innovation-caption .element2,
  .innovation-caption .element3 {
      -webkit-animation-duration: .9s;
      animation-duration: .9s;
      -webkit-animation-delay: .8s;
      animation-delay: .8s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: fadeOut;
      animation-name: fadeOut;
  }
 
  .swiper-slide-active .innovation-caption .element1{
      -webkit-animation-delay: 1.0s;
      animation-delay: 1.0s; 
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight;
  }

  .swiper-slide-active .innovation-caption .element2{
      -webkit-animation-delay: 1.2s;
      animation-delay:  1.2s; 
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight;
  }

  .swiper-slide-active .innovation-caption .element3{
      -webkit-animation-delay: 1.7s;
      animation-delay: 1.7s; 
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight;
  }   
}

/*==================================================
  Section - Promotion
==================================================*/

.caption-promotion .row1,
.caption-promotion .row2{
  position: absolute;
  text-align: right;
  width: 60vw
}
.caption-promotion .row1{
  top: 20vw;
  padding-right: 10vw;
}
.caption-promotion .row1 h3{
  font-size: 40px;
  color: #fff;
  text-shadow: 2px 0 9px rgba(0,0,0,0.46);
  font-style: italic;
  line-height: 1.3;
  text-align: center;
  display: inline-block;
}
.caption-promotion .row1 h3 span.f2{
  display: block;
  font-size: 30px;
}
.caption-promotion .row2{
  bottom:3vw;
  padding-right: 5vw;
}
.caption-promotion .row2 h5{
  font-size:30px;
  color: #fff;
  text-shadow: 2px 0 9px rgba(0,0,0,0.46);
  font-style: italic;
  line-height: 1.3;
  font-weight: 600;
}
.caption-promotion .row2 h5 span{ font-size: 45px; }

/*==================================================
    Section - Related
==================================================*/
.section.section-related {
  padding: 50px 0 40px;
}
.section-related .background{
  background-repeat: repeat;
  background-size: auto;

}
.section-related .title-md{ margin-bottom: 10px; }
.section-related .card-info{ background-color: transparent; }
.section-related .card-info .date{ color: var(--color-black) }
.section-related .card-info .btn{ max-width: 190px; }
.pc .section-related .card-info:hover {
    box-shadow: 0 0 40px rgba(0,0,0,0.1);
    background-color: #fff;
    z-index: 9;
}
/*==================================================
    Section - News
==================================================*/
.title-group { 
  padding-bottom: 10px
}
.title-group .right{ text-align: right; }
.title-group .right .btn{
  height: 40px;
  line-height: 40px;
  width: 180px;
  padding: 0 10px
}

.news-box{
  display: block;
  margin-bottom: 40px
}

.pagination-box{
  margin-top: 30px;
  padding-top: 50px;
  border-top: 1px solid #d2d2d2;
}

.pagination .page-link {
  position: relative;
  display: block;
  padding: 0;
  margin-left: -1px; 
  height: 39px;
  width: 39px;
  line-height: 39px;
  text-align: center;
  color: #696969;
  font-size: 20px;
  background-color: #fff;
  border: 1px solid #dee2e6;
}
.page-item:first-child .page-link{
  margin-left: 0;
 border-radius: 0; 
}
.page-item:last-child .page-link {
  border-radius: 0;  
} 
.pagination .page-link.arrow{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cecdcd+0,dee0df+50,cecdcd+100 */
  background: rgb(206,205,205); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(206,205,205,1) 0%, rgba(222,224,223,1) 50%, rgba(206,205,205,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(206,205,205,1) 0%,rgba(222,224,223,1) 50%,rgba(206,205,205,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(206,205,205,1) 0%,rgba(222,224,223,1) 50%,rgba(206,205,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecdcd', endColorstr='#cecdcd',GradientType=0 ); /* IE6-9 */
}
.pagination .page-link.page-first{border-right: 1px solid #fff;}
.pagination .page-link.page-last{border-left: 1px solid #fff;}

.pagination .page-link.active,
.pc .pagination .page-link:hover{ background-color: #c7252f; color: #fff }
.pagination .page-link.active{ pointer-events: none; }

.icon-page-first,
.icon-page-prev,
.icon-page-last,
.icon-page-next{
  width: 20px;
  height: 20px;
  margin-top: 9px;
}
.icon-page-first{ background-image: url(../img/icons/icon-page-first.png); }
.icon-page-prev{ background-image: url(../img/icons/icon-page-prev.png); }
.icon-page-last{ background-image: url(../img/icons/icon-page-last.png); }
.icon-page-next{ background-image: url(../img/icons/icon-page-next.png); }

.pagination .page-link.arrow{
  position: relative;
}
.pagination .page-link.page-prev:before,
.pagination .page-link.page-next:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  opacity: 0;

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c7252f+0,de3342+50,c7252f+100 */
  background: rgb(199,37,47); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(199,37,47,1) 0%, rgba(222,51,66,1) 50%, rgba(199,37,47,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(199,37,47,1) 0%,rgba(222,51,66,1) 50%,rgba(199,37,47,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(199,37,47,1) 0%,rgba(222,51,66,1) 50%,rgba(199,37,47,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7252f', endColorstr='#c7252f',GradientType=0 ); /* IE6-9 */
}

.pagination .page-link.page-first:before,
.pagination .page-link.page-last:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  opacity: 0;

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1559a6+0,1c7ecb+50,1559a6+100 */
  background: rgb(21,89,166); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(21,89,166,1) 0%, rgba(28,126,203,1) 50%, rgba(21,89,166,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(21,89,166,1) 0%,rgba(28,126,203,1) 50%,rgba(21,89,166,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(21,89,166,1) 0%,rgba(28,126,203,1) 50%,rgba(21,89,166,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1559a6', endColorstr='#1559a6',GradientType=0 ); /* IE6-9 */

}

.pc .pagination .page-link.page-first:hover:before,
.pc .pagination .page-link.page-last:hover:before,
.pc .pagination .page-link.page-prev:hover:before,
.pc .pagination .page-link.page-next:hover:before{ opacity: 1 }

.device .pagination .page-link.page-first:before,
.device .pagination .page-link.page-last:before,
.device .pagination .page-link.page-prev:before,
.device .pagination .page-link.page-next:before{ opacity: 1 }

/*==================================================
    Section - About us
==================================================*/
.section-aboutus-header{
  background-color: var(--color-blue);
  background-image: url(../img/thumb/texture.png);
  background-position: center center;
  color: #fff;

  padding-top: 60px;
  padding-bottom: 195px;
}

 
.nav-aboutus{ margin-left:-50px; margin-bottom:70px;   }
.nav-aboutus li{
  padding:0 50px;
}
.nav-aboutus li a{
  display: block;
  height: 60px;
  line-height: 60px;
  font-weight: 400;
  font-size: 28px;
  position: relative;

}
.nav-aboutus li a:before{
  content: '';
  position: absolute;
  top:0;
  bottom: 0;
  left: -50px;
  border-left:1px solid rgba(255,255,255,0.3) 
}
.nav-aboutus li:first-child a:before{display: none;}
.nav-aboutus li a span{
  display: block;
  position: relative; 
  padding-bottom: 10px
}
.nav-aboutus li a span:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  opacity: 0;
  height: 5px;
  background-color: #fff; 

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.nav-aboutus li.active a span:before,
.pc .nav-aboutus li:hover a span:before{ bottom:0; opacity: 1;background-color: #fff; }
 
.aboutus-banner{
  display: block;
  margin-top: -195px;
}
.section-aboutus .article{
  padding-top: 50px;
}
.card-info.mission h2{ height: auto; margin-bottom: 10px }
.card-info.mission p{ font-size: 20px }

.section-vision{
  display: block; 
  background-color: #eeeeee;
  background-image: url(../img/thumb/texture-gray.jpg);
  color:var(--color-blue);
  text-align: center;
  padding: 70px 0;
}
.section-vision .article{
  font-size: 36px;
  font-weight: 500;
  line-height: 1.4; 
}
.section-vision .article p{ margin-bottom: 0 }

.section-vision .vision-texture img{
  position: absolute;
  top: 0;
  height: 100%;
}
.section-vision .vision-texture img.item1{
  left: 0;
}
.section-vision .vision-texture img.item2{
  right: 0;
}

/*==================================================
    Section - Buying car
==================================================*/
.section-banner-buyingcar{
  position: relative;
  display: block;
  padding: 0 !important
}
.banner-caption .text-info{
  font-size: 20px;
  padding-top: 40px;
  color: #323232 !important
}
.img-banner-group{
  display: block;
  position: relative;
}
.img-banner-group img{
  width: 100%
}
.img-banner-group img.img-bg{}
.img-banner-group img.img-overlay{
  position: absolute;
  top: 0;
  left: 0;
}

.section-buyingcar{
  padding: 60px 0
}
.section-buyingcar .hgroup{
  display: block;
  padding: 0 0 35px
}
.section-buyingcar .hgroup h3{
  font-size: 28px;
  color: #000;
}
.section-buyingcar .hgroup h3 .star{
 font-size: 20px; 
 display: inline-block;
 position: relative;
 top: -5px;
 margin-left: 3px;
}
.section-buyingcar .hgroup p{
  font-size: 20px
}
.section-buyingcar .btn{ padding: 0 20px; margin-bottom: 20px }
.section-buyingcar .btn svg,
.section-buyingcar .btn img{
  width: 22px;
  height: 22px;
  margin-top: -3px
}
.section-buyingcar .btn svg path{ fill: #fff }

.buyingcar-contactus .row > div.left{
  border-right: 1px solid #d2d2d2;
  padding-right: 40px;
}
.buyingcar-contactus .row > div.right{
  padding-left: 40px
}
.buyingcar-contactus .btn[type="submit"]{
  margin-top: 36px;
  margin-bottom: 0;
  padding: 0;
  min-width: 100%; ;
  font-size: 18px
}
.buyingcar-contactus .btn[type="submit"] .icon{ width: 40px }
.buyingcar-contactus .btn .icon .arrow-right{
  width: 9px;
  height: 9px;
  top: 19px;
}
.buyingcar-contactus .btn .text{ padding-left: 0; padding-right: 37px }

/*==================================================
    Section - Installment
==================================================*/

.section-installment{
  background-color: #eeeeee;
  background-image: url(../img/thumb/texture-gray.jpg);
  background-position: center center;
}
.section-installment .hgroup{
  display: block;
  padding-bottom: 40px
}
.section-installment .hgroup h2{
  font-size: 35px;
}
.section-installment .hgroup hr{
  margin:13px 0;
  width: 58px;
  border-top: 4px solid #c7252f;
}
.section-installment .hgroup p{
  font-size: 20px;
  margin: 0
}

.captcha-box{
  display: block;
  background-color: #ccc; 
  background-color: rgba(0,0,0,0.2);
  padding: 10px;
}
.captcha-function{
  display: inline-block;
  vertical-align:top;
  background-color: #fff; 
  height: 100%
}
.captcha-box .input-block{ padding-bottom: 0; }
.captcha-box .input-text{ font-size: 14px; padding-bottom: 0 }   
.captcha-box .form-control{
  font-size: 16px
}             

.row.row-space-10{ margin: 0 -10px }
.row.row-space-10 > div{ padding: 0 10px; }

.row.row-space-0{ margin: 0 0px }
.row.row-space-0 > div{ padding: 0 0px; }


.section-installment .btn{ width: 100%; margin-bottom:15px }
.section-installment .btn.has-arrow{ padding-right: 40px; }
.section-installment .btn.has-arrow .text{ padding: 0; text-align: center }

/*==================================================
    Section - Service   Province
==================================================*/

.section-service-province{
  padding: 50px 0;
  background-color: #eeeeee;
  background-image: url(../img/thumb/texture-gray.jpg);
  background-position: center center;
}
.section-service-province .btn:not(.has-arrow){ padding-left: 20px; padding-right: 20px }

.btn span.w22{
  width: 22px;
  height: 22px;
  display: inline-block;
  position: relative;
  top: -2px
}
.btn .icon-white svg path{ fill: #fff }

.section-service-province .title-md{ margin-bottom: 15px }
.section-service-province .input-block{ padding-bottom: 0 }
.section-service-province .btn-submit{
  width: 180px;
  margin-left: 20px;
  overflow: visible;
}
.section-service-province .btn-submit:after {
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -26px;
  border-left: 1px solid rgba(0,0,0,0.4);
}

.section-service-center{
  padding: 50px 0;
}
.service-center{ 
  padding: 0 360px 30px 60px;
  margin: 0 0 30px;
  list-style-type: none; 
  position: relative;
  border-bottom: 1px solid #b6b6b6;
}
.service-center:last-child{ border-bottom: 0 }
.service-center li{
  display: inline-block;
}

.service-center li.number{
  position: absolute;
  top: 0;
  left: 0;
}

.service-center li.number span{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-blue);
  color: #fff;
  text-align: center;
  display: block;
  font-size: 25px;
}

.service-center .list{
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: #c91339
} 
.service-center .list .icons{
  width: 16px;
  height: 16px;
  margin-top: 7px;
  margin-right: 5px;

  background-image: url(../img/icons/icon-check-circle.svg);
}

.service-center .list > div{
  padding-right: 18px;
}
.service-center .list > div + div:before{
  content: '/';
  position: relative;
  left: -4px;
}

.service-center li.info h3 .number{ display: none; }
.service-center li.contact{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  display: flex;
  padding-bottom: 30px;
}

.service-center li.contact .item{
  text-align: center;
  display: block;
  color: var(--color-blue);
  height: 100px;
  display: flex;
  border-left: 1px solid #b6b6b6;

  -ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.service-center li.contact .item.last{border-right: 1px solid #b6b6b6;}
.service-center li.contact .item .group{ margin:0 auto  }
.service-center li.contact .item svg,
.service-center li.contact .item img{
  width: 40px;
}
.service-center li.contact .item svg path{
  fill: var(--color-blue)
}
.service-center li.contact .item p{
  margin-top: 10px;
  margin-bottom: 0
}
.pc .service-center li.contact .item:hover{ color: var(--color-red) }
.pc .service-center li.contact .item:hover svg path{fill:  var(--color-red)}


/*==================================================
    Section - Contact us
==================================================*/
 

.section-contactus .row .right:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 15px;
  left: 0;
  border-left:1px solid #d2d2d2
}
.googlemap{
  display: block;
  background-color: #222;
  height: 415px;
  margin-right: 20px;
}
.company-info{
  display: block;
  padding: 30px 30px 40px;
  margin-right: 20px;
  background-color: #eeeeee;
  background-image: url(../img/thumb/texture-gray.jpg);
  background-position: center center;
  font-size: 20px;
  line-height: 1.3

}
.company-info h3{ margin-bottom: 5px; }
.company-info p{ margin-bottom: 20px }
.company-info p:last-child{ margin-bottom: 0 }
.company-info p .f-small{ font-size: 16px; white-space: nowrap; }

.form-contact{ padding-left: 20px; }
.form-contact .btn[type="submit"] { width: 200px; margin-top: 10px }

/*==================================================
    Footer
==================================================*/
.footer{
  background-color: #203e7c;
  padding: 50px 0;
  color: #ffffff;
}
.footer-info {
  font-size: 20px;
  line-height: 1.3;
}
.footer-info .navbar-brand{
  width: 87px;
  margin-bottom:20px; 
}
.footer-info h3{
  font-size: 28px;
  font-weight: 500;
  color: #fff;
}
.footer-info p{ margin: 0 0 10px}
.footer-info p .font-md{ font-size: 18px; }

.footer-links{
  display: inline-block;
  position: relative;
  padding-left: 50px;
  width: 475px;
}
.footer-links:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-left: 1px solid rgba(255,255,255,0.3)
}
.footer-links h3{
  font-size: 22px;
  color: #fff;
  font-weight: 500;
  margin-bottom:2px; 
}

.footer-links .links{
  padding:0;
  margin: 0 0 18px;
  list-style: none;
}
.footer-links .links li{
  display: block;
  padding:0;
 margin: 0 0 2px; 
}
.footer-links .links li a{
  display: block;
  padding-left: 20px;
  position: relative;
}
.footer-links .links li a:before{
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  width: 0; 
  height: 0; 
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  
  border-left: 6px solid #fff;
}
.pc .footer-links .links li a:hover{opacity: 0.8) }

.shotcut-menu{
  display: block;
  padding: 0;
  margin-right:-7px;
  list-style: none;
  font-size: 0;
  float: right;
  width: 417px
}
.shotcut-menu li{
  display: inline-block;
  vertical-align: top;
  width: 125px;
  height: 125px;
  margin: 7px;
}
.shotcut-menu li a{
  display: flex;
  width: 100%;
  height: 100%;
  background-color: var(--color-red);
  color: #fff;
  text-align: center;
  -ms-flex-align: center !important;
align-items: center !important;
}
.shotcut-menu li a .group{
  display: block;
  margin: -2px auto 0
}
.shotcut-menu li h4{
  font-size: 18px;
  color: #fff;
  font-weight: 400;
}
.shotcut-menu li .icon{
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto;
}
.shotcut-menu li .icon img,
.shotcut-menu li .icon svg{
  width: 100%;
  height: 100%;
}

.pc .shotcut-menu li a:hover { background-color:#e40c39  }

.shotcut-menu-sidebar{
  position: fixed;
  top: 120px;
  right: 0;
  width: 80px;
  padding: 0;
  margin:0;
  list-style: none; 
  z-index: 1020
}
.shotcut-menu-sidebar li{
  display: block;
 
  padding: 1px;
}
.shotcut-menu-sidebar li a{
  display: flex;
  position: relative;
  background-color: #c91339;
  width:80px;
  height: 80px;
  color: #fff;
  -ms-flex-align: center !important;
  align-items: center !important;
}
.pc .shotcut-menu-sidebar li a:hover{
  background-color: #222
}
.shotcut-menu-sidebar li .group{
  margin: 0 auto
}
.shotcut-menu-sidebar li .icon{
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 auto;
}
.shotcut-menu-sidebar li .icon svg,
.shotcut-menu-sidebar li .icon img{
  width: 100%;
  height: 100%;
}
.shotcut-menu-sidebar li h4{
  font-size: 13px;
  font-weight:300;
  color: #fff;
}

.footer-secondary{
  display: block;
  background-color: #000;
  color: #fff;
  font-weight: 300;
  padding: 10px 0;
  text-transform: uppercase;
  font-size: 16px;
}

.footer-secondary .float-rght{
  float: right;
  white-space: nowrap;
  display: flex;
  
}
.footer-secondary .nav-followus{
  margin-top: 0;
   margin: -6px -7px 0 20px; 
    padding-left: 5px; 
}
.footer-secondary .nav-followus:before{display: none;}
.footer-secondary .nav-followus li.sitemap{
  position: relative;
  padding-right: 20px;
  margin-right:10px; 
}
.footer-secondary .nav-followus li.sitemap:before{
  content: '';
  position: absolute;
  top: 2px;
  bottom: -1px;
  right: -3px;
  border-left: 1px solid rgba(255,255,255,0.5);
}
.footer-secondary .nav-followus li.sitemap a{ padding-top: 4px; } 
.footer-secondary .nav-followus .nav-item a svg{
  width: 22px;
  height: 22px;
}
.footer-secondary .nav-followus .nav-item a svg path{
  fill: #fff;
  
}

.pc .footer-secondary a:hover{ opacity: 0.7 }

/*==================================================
    Responsive media queries
==================================================*/

@media (min-width: 1119px) and (max-width: 1440px) {}    

@media (max-width: 1700px) {
   .innovation-caption .col-left .textbox{width: 365px}
}

@media (max-width: 1650px) {
  .car-model-article h5{ font-size: 1.7vw }
  .footer-info h3{ font-size: 25px; }
  .footer-info{ font-size: 20px; }
  .footer-info p .font-md{ font-size: 17px; }
  .footer-links h3{ font-size: 20px; }
}
@media (max-width: 1600px) {
  .carinfo-texture .texture{ width: 47.2vw;}

  .carinfo-box.in-banner .title-xl{ font-size: 4.5vw }
  .carinfo-box.in-banner h3.title-lg{font-size: 3vw}
  .carinfo-box.in-banner p.title-lg{font-size: 3.75vw}
  .carinfo-box.in-banner .row-02 .inner{ padding-left: 4vw }
}
 
@media (max-width: 1550px) {
  .footer-info{ font-size: 18px; }
  .footer-info h3{font-size: 22px;}
  .footer-links .links{font-size: 16px;}
  .footer-links .links li a{
    padding-left: 15px
  }
  .footer-links .links li a::before{
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #fff;
  }
  .shotcut-menu{width: 372px}
  .shotcut-menu li{
    width: 110px;
    height: 110px;
  }
  .shotcut-menu li .icon {
    width: 50px;
    height: 50px;
  }
  .shotcut-menu li h4{
    font-size: 16px;
  }
  .title-xl{ font-size: 50px }
  .title-lg{ font-size: 40px }
  .title-sm{font-size: 25px;}
  .btn{ font-size: 20px; }

  .car-model-article h3{ font-size: 40px }

  .download-wrap .btn .text {width: 270px;} 
  .standard-item .icon{ width: 120px; height: 120px; }
  .card-info p.info{font-size: 20px}

  .card-service .hgroup h2{ font-size: 3.2vw; }
  .card-service .hgroup p{font-size: 2.5vw}
  .card-service .btn {height: 40px; line-height: 40px;}
  .card-service .btn.has-arrow .icon .arrow-right{top:14px }

  .section-highlight .buttons .btn span.text {width: 288px;}

  .card-info h2{ height: 61px }
  .card-info .btn{ width: 100% }
  .card-info .btn .text{ padding: 0 }
  .card-info .share-wrap{font-size: 14px;}
  .card-info .icon-share {
    width: 14px;
    height: 14px;
  }
  .innovation-caption .textbox h2{ font-size: 35px; }
  .innovation-caption .textbox h4{ font-size: 23px; }
  .innovation-caption .textbox p{ font-size: 18px; font-weight: 300;}

  .innovation-caption .col-right .textbox{ padding: 0 40px }

  .carinfo-texture .texture{margin-left: -3vw;}
  .carinfo-box .row-01{ padding-top: 6vw;}
  .carinfo-box .row-02{ padding-bottom: 4vw; }

  .section-car-info .background{ width: 51% }

  .caption-wrap .inner > span.f1{ font-size: 32px; }
  .caption-wrap .inner > span.f2{ font-size: 60px; }
  .caption-wrap .inner > span.f3{ font-size: 32px; }

  .caption-promotion .row1 h3{ font-size: 35px; }
  .caption-promotion .row1 h3 span.f2{ font-size: 27px }
  .caption-promotion .row2 h5{ font-size: 25px; }
  .caption-promotion .row2 h5 span{ font-size: 35px; }

  .section-vision .vision-texture img.item1{left: -2vw;}
  .section-vision .vision-texture img.item2{right: -2vw;}
}

@media (max-width: 1450px) {
  .innovation-caption .textbox h2{font-size: 30px;margin-bottom: 20px;padding-bottom: 17px;}
  .innovation-caption .textbox h2::before{height: 3px}
  .innovation-caption .textbox h4{font-size: 20px;}
  .innovation-caption .textbox p{font-size: 16px; line-height: 1.3}
  .innovation-caption .col-left .textbox {width: 330px;}

  .offer-caption h2{font-size: 3vw;}
  .offer-caption h2 span{ font-size: 2.2vw; }
  .offer-caption p{ font-size: 2vw;}

  .carinfo-box .title-xl{ font-size: 42px;}
  .carinfo-box .title-lg{ font-size: 32px;} 

  .video-wrap .videothumb{
    width: 180px;
    padding: 5px;
    top: -23px;
    left: 50px;
  }
  .video-wrap .videothumb::before{
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
  }
  .video-wrap .videobar{ padding-left: 195px;}
  .video-wrap .videothumb::after{ width: 40px; height: 40px; margin-left:-20px; margin-top: -20px;  }

  .caption-wrap{ top: 7vw; }
  .caption-wrap .inner > span.f1{ font-size: 2vw; }
  .caption-wrap .inner > span.f2{ font-size: 4vw; }
  .caption-wrap .inner > span.f3{ font-size: 2vw; }

  .caption-promotion .row1 h3{ font-size: 2.5vw; }
  .caption-promotion .row1 h3 span.f2{ font-size: 2vw }

  .caption-promotion .row2 h5{ font-size: 1.8vw; }
  .caption-promotion .row2 h5 span{ font-size: 2.2vw; }

  .article h2{ font-size: 38px;margin-bottom: 15px; }
  .article p, 
  .article ul, 
  .article ol,
  .article ol li, 
  .article ul li {
    margin-bottom: 20px;
  }

  .section-related .card-info h2{
    height: 54px;
    font-size: 22px;
  }
  .section-related .card-info .card-body{ padding-top: 20px }

  .section-aboutus-header{ padding-top: 40px; }
  .nav-aboutus li a{ font-size: 26px }

  .carinfo-box.in-banner .row-01{ padding-top: 0; padding-bottom: 3vw }
  .carinfo-box.in-banner .row-01 p.text{ padding-left: 0; font-size: 20px; margin-bottom: 10px; margin-left: 0}
  .carinfo-box.in-banner .row-01 .buttons{ margin-left: -10px }
  .carinfo-box.in-banner .buttons .btn {
    line-height: 38px;
    height: 38px;
    font-size: 16px;
    padding: 0 30px
  }
  .carinfo-box.in-banner .row-02{ padding-top: 0 }
  .carinfo-box.in-banner .row-02 .inner{ padding-left: 2vw }


  .footer-info p .font-md{font-size: 14px;}
  .footer-links{ margin-right:-10px; width: 415px  }
  .footer-links h3 {font-size: 18px;}
}
@media (max-width: 1380px) {
  .banner-caption .text-info{ font-size: 18px }
  .carinfo-box.in-banner { left: 50px; text-align: left; }
  .carinfo-box.in-banner .title-xl{ font-size: 4vw }
  .carinfo-box.in-banner h3.title-lg{font-size: 2.5vw}
  .carinfo-box.in-banner p.title-lg{font-size: 3.20vw} 
  .carinfo-box.in-banner .row-01, 
  .carinfo-box.in-banner .row-02{ text-align: left; padding-left: 0 !important }
}

@media (max-width: 1350px) {
  .video-wrap .videothumb{
    width: 140px;
    top: -19px;
  }
  .video-wrap .videobar{
    font-size: 16px;
    padding: 10px 40px 10px 155px;
  }

  .shotcut-menu-sidebar{ top: 105px; }
  .shotcut-menu-sidebar{ width: 70px; }
  .shotcut-menu-sidebar li a{ width: 70px; height: 70px }
  .shotcut-menu-sidebar li .icon {
    width: 30px;
    height: 30px;
  }
  .shotcut-menu-sidebar li h4{ font-size: 12px; }

  .article{ font-size: 18px }
  .article h2{ font-size: 40px;}

  .card-service.md .caption{font-size: 18px}
  .section-vision .article{ font-size: 30px; }

  .captcha-box .input-text{ font-size: 13px }
}

@media (max-width: 1300px) {
  .shotcut-menu {width: 312px;}
  .shotcut-menu li{
    width: 90px;
    height: 90px;
  }
  .shotcut-menu li h4{ font-size: 14px; }
  .shotcut-menu li .icon {
    width: 40px;
    height: 40px;
  }
  .title-xl{ font-size: 40px }
  .title-lg{ font-size: 35px }
  .title-md{ font-size: 24px }
  .title-sm{font-size: 22px;}
  .btn{ font-size: 18px; }

  .download-wrap .btn .text {width: 238px;}

  .card-info p.info{font-size: 18px;}
  .card-info p.info br{display: none;}

  .card-service .hgroup{padding: 30px 0 0 30px;}
  .card-service .btn{ left: 30px; bottom: 30px; font-size: 18px}

  .card-info h2 {height: 53px;}
  .card-info .icon-share{ display: none; }

  .swiper-innovation .swiper-button-prev,
  .swiper-innovation .swiper-button-next{ background-size: 22px; }

  .carinfo-box p.text{ font-size: 20px; margin-left: 10px; }
  .carinfo-box .title-xl{ font-size: 35px;}
  .carinfo-box .title-lg{ font-size: 28px;} 

  .carinfo-row .colunm{ padding-left: 3px; padding-right: 3px; }
  .car-model-article h3{padding: 0 0 12px;margin-bottom: 20px;}
  .car-model-article h3::before{ height: 2px; width: 55px }
  .car-model-article p{ font-size: 1.6vw; line-height: 1.3; margin-top:10px  }

  .carinfo-row.exterior .car-model-article{ left: 12vw; }
  .carinfo-row.utility .car-model-article{ left: 6vw }

  .card-service.md .background{
    top: 3vw;
  }

  .section-buyingcar .hgroup p{ font-size: 16px }

  .service-center{ padding-right: 280px; }
  .service-center li.contact{ width: 260px; padding-bottom: 25px }
  .service-center li.contact .item svg, .service-center li.contact .item img{
    width: 30px;
  }
}   
@media (max-width: 1280px) {
  .card-service.md .caption{font-size: 18px}
  .card-service.md .caption h4{font-size: 22px; margin-bottom: 5px}

  .section.section-aboutus-header{ padding-top: 40px; padding-bottom: 120px }
  .aboutus-banner{ margin-top: -120px }
  .nav-aboutus{ margin-left: -30px; }
  .nav-aboutus li {padding: 0 30px;}
  .nav-aboutus li a{ 
    font-size: 24px;
    height: 50px;
    line-height: 50px; 
  }
  .nav-aboutus li a:before{ left: -30px;}
  .nav-aboutus li a span::before{height: 3px;}

  .section-vision .vision-texture img.item1{left: -4vw;}
  .section-vision .vision-texture img.item2{right: -4vw;}

  .section-buyingcar .row{ margin:0 -10px  }
  .section-buyingcar .row > div{ padding: 0 10px }
}
@media (max-width: 1199px) {
   
  .footer .row > div{position: static;}
  .footer-info{
    border-bottom:1px solid rgba(255,255,255,0.3);
    padding-bottom: 50px;
    margin-bottom: 50px 
  }
  .footer-links{
    padding-left: 0;
    margin-right: 0; 
    width: 100%
  }
  .footer-links:before{
    display: none;
  }
  .title-xl{ font-size: 35px }
  .title-lg{ font-size: 32px }
  .title-sm{font-size: 20px;}

  .shotcut-menu-sidebar{ display: none; }

  .shotcut-menu {
    position: absolute;
    top: 38px;
    right: 100px;
  }
  .standard-item .icon {
    width: 100px;
    height: 100px;
  }
  
  .card-info .btn{ 
    padding: 0 30px 0 0; 
    font-size: 14px;
    height: 30px;
    line-height: 30px; 
  }
  .card-info .btn .text{ padding: 0 }
  .card-info .btn.has-arrow .icon{
    width: 30px; 
  }
  .card-info .btn.has-arrow .icon .arrow-right{ 
    left: 8px;
    width: 8px;
    height: 8px;
    top: 11px;
  }
  .card-info .share-wrap .text{ display: none; }

  .carinfo-row.performance .background{
    position: absolute;
  }
  .carinfo-row.performance .background{position: absolute; background-image: url(../img/thumb/performance-texture.jpg);}
  .carinfo-row.performance .background img{display: none;}
  .carinfo-row.performance{ overflow: hidden; }
  .carinfo-row.performance .row{ position: relative; }
  
  .carinfo-row.performance .background{position: absolute; background-image: url(../img/thumb/performance-texture.jpg);}
  .carinfo-row.performance .background img{display: none;}
  .carinfo-row.performance .colunm.c1 img{ width: 60%; margin-top: 30px }

  .carinfo-box.main .img-car{ top: 0 }
  .carinfo-box.main .row-02{ padding:40px 0; }
  .carinfo-box.main .row-02 .inner{ padding-left: 0 }
  .carinfo-box.main .title-lg{ font-size: 32px }
  .carinfo-box.main h3.title-lg{ font-size: 26px }
  .car-color .title-sm{ font-size: 25px }
  .car-color p{ font-size: 25px }
  .color-list li{border: 5px solid transparent; margin: 0 2px}
  .color-list li.active {border: 5px solid var(--color-blue);}
  .color-list li span{ width: 30px; height: 30px; }

  .innovation-caption .col-left .textbox{ width: 100% }
  .innovation-caption .col-right .box.top{display: none;}
  .innovation-caption .col-right .box.bottom{height: 100%}

  .swiper-innovation .swiper-button-prev,
  .swiper-innovation .swiper-button-next{display: none;}

  .swiper-pagination.innovation{ display:block; }
  .swiper-pagination.innovation .swiper-pagination-bullet{
    border:0 !important; 
    width: 10px;
    height: 10px;
    margin: 0 4px;
  }

  .carinfo-texture .texture{width: 62.7%;}
  .carinfo-box .row-01{ padding-bottom: 2.5vw; }
  .carinfo-box .row-02{padding-top: 1.5vw;}

  .carinfo-box .buttons{ text-align: center; }
  .carinfo-box .img-car{ max-width: 60% }
  .carinfo-box .row-01:before{ left: 0 }
  .carinfo-box .row-01,
  .carinfo-box .row-02{
    padding: 50px 20px;
    text-align: center;
  }
  .carinfo-box .row-02{
    padding-top: 40px;
  }

  .card-photo.video::before{ background-size: 60px; }

  .card-service.md{ margin-bottom: 20px; }
  .card-service.md .background{ top: 0; width: 36% }
  .card-service.md .caption{ font-size: 20px;width: 41.5% }
  .card-service.md .caption h4{font-size: 24px}
  .card-service.md .caption h4.twoline{ white-space: nowrap; }


}

@media (max-width: 1024px) {
  .section{ padding: 70px 0 }
  .section.pt-15{ padding-top: 0 }

  .section-booknow{ padding-bottom: 110px }
  .section-booknow .section-header{ padding-bottom: 20px; }

  .section-car-info .background{
    width: 100%;
    left: 40vw;
    background-size: cover;
  }
  .carinfo-box{top: -60px}

  .breadcrumb{ padding:5px 0;  }
  .breadcrumb-item + .breadcrumb-item{ padding-left: 10px; }
  .breadcrumb-item + .breadcrumb-item::before{ padding-right: 10px; }

  .swiper-pagination.banner{ display: none; }

  .page-header-info{ padding: 30px 0 }
  .page-header-info p{ font-size: 14px; }

  .article{ font-size: 16px }
  .article h2{font-size: 30px}
  .article .date{ font-size: 14px }

  .row.space-0{ margin: 0 -10px; }
  .row.space-0 > div{ padding: 0 10px }
  .card-info{ padding: 0 !important; box-shadow: none !important }
  .card-info .date{ margin: 10px 0 20px; }
  .card-info h2{height: 50px;}
  .card-info .card-body{ padding-top: 20px }
  .main .card-info{ margin-bottom: 30px  }

  .section-related .card-info h2 {
    height: 44px;
    font-size: 18px;
  }
  .section-related .card-info .date{ font-size: 14px; }
  .section-related .card-info .btn{ max-width: 140px }

  .title-group{ padding-bottom: 20px }
  .title-group .right .btn {
    height: 35px;
    line-height: 35px;
    width: auto;
    padding: 0 40px;
    font-size: 14px
  }

  .section.section-aboutus-header{ padding-top: 30px; padding-bottom: 100px }
  .aboutus-banner{ margin-top: -100px }
  .nav-aboutus{ margin-left: -20px; margin-bottom: 50px;}
  .nav-aboutus li {padding: 0 20px;}
  .nav-aboutus li a{ 
    font-size: 20px;
    height: 40px;
    line-height: 40px; 
  }
  .nav-aboutus li a:before{ left: -20px;}
  .nav-aboutus li a span::before{height: 3px;}

  .section-vision .vision-texture img.item1{ left: -13vw }
  .section-vision .vision-texture img.item2{ right: -13vw }

  .carinfo-box.in-banner .row-02 .inner{ padding-left: 0 }
  .carinfo-box.in-banner .buttons .btn{
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    padding: 0 20px
  }
  .carinfo-box.in-banner .title-xl{ font-size: 3.5vw }
  .carinfo-box.in-banner h3.title-lg{font-size: 2.3vw; margin: 4px 0}
  .carinfo-box.in-banner p.title-lg{font-size: 3vw}

  .banner-caption .text-info{ display: none; }
  .carinfo-box.in-banner{ left: 30px }

  .section-installment .hgroup h2{ font-size: 30px }

  .section-contactus{ padding: 50px 0 }
}

@media (max-width: 991.98px) {
  .section{padding: 50px 0}
  .title-lg{font-size: 28px}
  .section-header{ padding-top: 40px; padding-bottom: 40px }
  .shotcut-menu{ right: 30px;top: 46px }
  .footer-info{font-size: 14px;}
  .footer-links h3{ margin-bottom:10px;  }
  .footer-links .links{font-size: 14px;}
  .footer-links .links li a::before{ top: 7px; }

  .shotcut-menu li{
    width: 80px;
    height: 80px;
    margin: 4px;
  }
  .shotcut-menu li h4{
    font-size: 12px;
  }
  .shotcut-menu li .icon {
    width: 35px;
    height: 35px;
  }

  .section-service .row{ margin: 0 -10px; }
  .section-service .row > div{ padding: 0 10px; }

  .card-service .btn{ 
    padding: 0 30px 0 20px; 
    font-size: 14px;
    height: 30px;
    line-height: 30px; 
  }
  .card-service .btn .text{ padding: 0 }
  .card-service .btn.has-arrow .icon{
    width: auto;
    border-left: 0
  }
  .card-service .btn.has-arrow .icon .arrow-right{ 
    left: auto !important; 
    right: 10px!important; 
    width: 8px;
    height: 8px;
    top: 11px;
  }
  .card-service .hgroup{padding: 20px 0 0 20px;} 
  .card-service .btn {
    left: 20px;
    bottom: 20px;
  }

  .section-booknow{ padding-bottom: 110px }
  .section-highlight .buttons .btn span.text{ width: 255px }

  .offer-caption div.has-bg{ padding: 15px 0; margin-top: 10px; }

  .video-wrap{left: 30px }
  .video-wrap .videothumb{
    width: 110px;
    padding: 5px;
    top: -15px;
    left: 0
  }
  .video-wrap .videothumb::before{
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
  }
  .video-wrap .videobar{ 
    padding-left: 95px;
    font-size: 12px;
    width: 55vw
  }
  .video-wrap .videothumb::after{ width: 30px; height: 30px; margin-left:-15px; margin-top: -15px;  }
  .video-wrap .videobar .arrow .arrow-right {
    width: 9px;
    height: 9px;
    top: 7px;
    left: 3px;
    border-top:1px solid #ffffff;
    border-left: 1px solid #ffffff;
  } 
  
  .swiper-banner .swiper-button-prev{ left: 15px; }
  .swiper-banner .swiper-button-next{ right: 15px; }

  .swiper-banner .swiper-button-prev,
  .swiper-banner .swiper-button-next{
    width: 30px;
    height: 30px;
    background-size: 20px;
    margin-top: -30px;
  }

  .carinfo-box.main .row-01{ padding:20px 0 30px  }
  .car-model-article h3{ font-size: 25px }
  .car-model-article h3 {
    padding: 0 0 7px;
    margin-bottom: 15px;
  }
  .car-model-article h3::before{ width: 35px; }
  .carinfo-row.exterior .car-model-article{ left: 11vw }

  .section-testimonial .section-header{
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .section-testimonial .buttons{ padding-top: 30px }

  .card-service.md .caption{ width: 52.5% }
  .section.section-related{ padding-bottom: 10px }
  .section-related .card-info{ margin-bottom: 30px }

  .section-vision .vision-texture img.item1{ left: -20vw }
  .section-vision .vision-texture img.item2{ display: none; }

  .section-buyingcar .hgroup h3{ font-size: 24px }
  .custom-select,
  .form-control ,
  .btn{
    height: 40px;
    line-height:38px;
  }
  .btn.has-arrow .icon{ width: 40px }
  .btn.has-arrow .icon .arrow-right, .btn.has-arrow .icon .arrow-left{top: 15px;left: 12px}
  .select-block:before{ right: 14px }
  .select-block:after{ width: 40px; }
  .section-buyingcar .btn svg, .section-buyingcar .btn img {
    width: 18px;
    height: 18px;
    margin-top: -3px;
   }
  .buyingcar-contactus .row > div.left{ padding-right: 25px }
  .buyingcar-contactus .row > div.right{ padding-left: 25px }
  .section-buyingcar .btn{
    height: 40px;
    line-height: 40px;
    font-size: 16px
  }
  .buyingcar-contactus .btn[type="submit"]{
    height: 40px;
    line-height: 40px;
    margin-top: 10px
  }
  .buyingcar-contactus .btn .icon .arrow-right{ top: 16px }

  .buyingcar-contactus.brochure .btn[type="submit"]{ margin-top: 35px }

  .section-installment .row.row-space-10{ margin: 0 -5px }
  .section-installment .row.row-space-10 > div{ padding: 0 5px }

  .section-service-province .btn-submit{ margin:20px 0 0; width: 50% }
  .section-service-province .btn-submit:after { display: none}

  .service-center {
    padding-right: 220px;
    padding-left: 45px;
     font-size: 16px
  }
  .service-center li.number span{
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
  }
  .service-center li.info p {line-height: 1.2;}

  .service-center li.contact{
    width: 184px
  }
  .service-center li.contact .item{ height: 80px }
  .service-center li.contact .item svg, .service-center li.contact .item img{ width: 25px }
  .service-center li.contact .item p{ font-size: 14px }

  .section-contactus{ padding: 0 0 !important; }
  .googlemap{
    height: 330px; 
    margin:0 -30px;
  }
  .company-info{
    margin:0 -30px;
    font-size: 18px
  }
  .company-info .title-sm{ font-size: 22px }
  .section-contactus .row .right::before{display: none;}

  .form-contact{
    padding:35px 0 0;  
  }
}

@media (max-width: 850px) {
  .innovation-caption{
    position: relative;
    height: auto;
  }
  .innovation-caption .textbox{background-color: rgba(32,62,124,1);}
  .innovation-caption .col-right .textbox{ background-color: rgba(0,0,0,1) } 
  .innovation-caption .col-right .textbox{ padding:100px 30px; }

}
 
@media (max-width: 767px) { 
  .breadcrumb{ font-size: 12px; }
  .section{ padding-top: 40px;padding-bottom: 40px; }
  .section.pt-15{ padding-top: 0; }
  .section-header{ 
    padding-top: 30px; 
    padding-bottom: 30px; 
  }

  .section-standard .section-header{
    padding-bottom: 30px;
    padding-top: 40px;
  }
  .standard-item{ margin-bottom: 20px; margin-top: 10px;}
  .standard-item .icon{ margin-bottom: 20px; }
  .download-wrap hr{ margin-bottom: 30px; }
  .footer-info { 
    padding-bottom: 20px;
    margin-bottom: 20px;

  }
  .shotcut-menu{
    position: relative;
    right: auto;
    top: auto;
    width: auto;
    margin: 0 -4px;
    float: none;

    border-top: 1px solid rgba(255,255,255,0.3);
    padding-top: 25px;
    margin-top: 10px;
  }
  .title-xl{ font-size: 25px }
  .title-lg{ font-size:25px }
 
  .section-highlight .buttons{ padding-top: 0; margin-bottom: 10px; }
  .section-highlight .buttons .btn{
    display: block;
    margin:5px auto;
    max-width: 300px; 
  }
  .section-highlight .buttons .btn span.text{ width: auto; }
  
  .card-info .card-body{ padding-top: 20px; padding-left: 0; padding-right: 0 }
  .card-info h2.oneline{ margin-bottom: 5px; }
 
  .buttons{ padding-bottom: 10px !important; padding-top: 5px !important}
  .card-info{ margin-bottom:20px  }
  .card-info .date{ margin-bottom: 10px }

  .innovation-caption .col-left .textbox{ padding: 5px 30px }
  .innovation-caption .col-right .textbox{ padding: 75px 30px }
  .innovation-caption .textbox h2{font-size: 25px;}
  .innovation-caption .textbox h4{font-size: 18px;}

  .section-booknow{ padding-top: 0 !important; padding-bottom: 100px; }
  .carinfo-box{top: -50px}
  .carinfo-box .title-xl{ font-size: 30px; line-height: 1.3}
  .carinfo-box .title-lg{ font-size: 24px;} 

  .section-car-info .background{display: none; }

  .banner-caption{
    position: relative;
    bottom: auto;
    background-color: rgba(0,0,0,0.85);
  }
  .caption-wrap{ top: -28vw; padding-top: 2.5vw; padding-bottom: 1vw; }
  .caption-wrap .inner{padding-right: 10.6vw;}
  .caption-wrap .inner > span{line-height: 1.2;}
  .video-wrap{
    position: relative;
    left:0;
    top: 0;
    padding: 5px 0;

  }
  .video-wrap .container{
    padding: 0 5px;
  }
  .video-wrap .videobar{
    position: absolute;
    top: 9px;
    left: 0;
    background-color: transparent;
  }
  .video-wrap .videobar .inner br{ display: none; }
  .video-wrap .videothumb{
    position: relative;
    top: 0;
    z-index: 9
  }
  .video-wrap .videobar{
    font-size: 14px;
    width: 100vw;
    padding-left: 125px;
  }
  .video-wrap .videobar .inner br{ display:inline-block; }
  .video-wrap .videobar .arrow{top: 0; bottom: 0;}
  .video-wrap .videobar .arrow .arrow-right{ left: 11px; top: 13px }

  .car-model-article{
    max-width: 500px !important;
    margin: 0 auto 30px;
    padding:0 25px;

    position: relative !important; 
    text-align: center !important;
    bottom: auto !important;
    left: auto !important;
    right:auto !important;
  }
  .car-model-article h3:before{
    left: 50%;
    margin-left: -20px;
  }
  .car-model-article h5 {font-size: 16px;}
  .car-model-article h5 br{display: none;}
  .car-model-article p{ font-size: 16px; }

  .color-list li span{ width: 20px; height: 20px; }
  .color-list li {border: 4px solid transparent;}
  .color-list li.active {border: 4px solid var(--color-blue);}
  .carinfo-row.exterior .car-model-article{ margin-bottom: 20px }
  .carinfo-row.utility .colunm.c1{ width: 100%; }
  .carinfo-row.utility .colunm.c2{ width: 61vw; padding-left: 0}
  .carinfo-row.utility .colunm.c3{ width: 39vw }

  .carinfo-box.main{ padding-bottom: 10px }
  .carinfo-box.main h3.title-lg{ font-size: 22px; margin-top: 0;  }
  .carinfo-box.main .title-lg{font-size: 25px;margin-top: 10px}

  .carinfo-row.performance .colunm.c1,
  .carinfo-row.performance .colunm.c2{ width: 100% }

  .carinfo-row.safety .container{ padding-left: 25px }
  .carinfo-row.safety{
    background-color: #f5f5f5;
    padding-top:30px 
  }
  .carinfo-row.safety .car-model-article{ margin-bottom: 30px; margin-left: 0 }
  .swiper-safety{ margin-bottom: 0 }
  .swiper-safety .swiper-slide img{ height: 28vw; }

  .swiper-safety .swiper-button-prev{ left: 15px }
  .swiper-safety .swiper-button-next{ right: 15px; }
  .swiper-safety .swiper-button-next, .swiper-safety .swiper-button-prev{ 
    width: 30px;
    height: 30px;
    background-size: 20px
  }
  .page-header .title-xl::before{ width: 40px }
  .carinfo-row.utility .car-model-article{ padding-top: 20px }
  .carinfo-row.safety .car-model-article{ padding-top: 10px }
  .carinfo-row.exterior{ background-color: #f5f5f5; margin-top: 15px; padding-top: 30px; padding-bottom: 0 }

  .carinfo-texture.main .item2{ bottom: -4vw }
  .carinfo-texture.utility .item1{ width: 13vw }

  .caption-promotion { padding: 2vw 0 15px }
  .caption-promotion .row1,
  .caption-promotion .row2{
    position: relative;
    top: auto;
    bottom: auto;
    padding-right: 0;
    width: 100vw;
    text-align: left;
    padding: 0 25px;
  }
  .caption-promotion .row1 h3,
  .caption-promotion .row1 h3 span.f2,
  .caption-promotion .row2 h5,
  .caption-promotion .row2 h5 span{
    font-weight: 400;
    font-size: 3.3vw;
    text-align: left;
  }

  .caption-promotion .row1 h3 span.f2{ display: inline; }
  .page-header-info {padding: 20px 0;}

  .article{ font-size: 16px }
  .article h2{font-size: 28px;margin-bottom: 15px;} 
  .article ol{ padding-left: 16px }
  .article p, .article ul, .article ol, .article ol li, .article ul li {
    margin-bottom: 15px;
  }
  .article .tags{ padding-top: 5px; padding-bottom: 5px; font-size: 12px }
  .article .share-wrap{font-size: 14px; line-height: 25px}
  .article .share-wrap .icon-share{ width: 12px; height: 12px }

  .article-footer{ 
    text-align: center;  
    margin-top: 40px;
  }
  .btn.btn-back { height: 40px; line-height: 40px; }
  .btn.btn-back span.text{ padding: 0 30px }
  .btn.has-arrow .icon .arrow-left{ top: 15px }

  .card-service.md {height: auto; padding-bottom: 150px}
  .card-service.md .caption{
    padding: 25px 20px 0px;
    width: 100%;
    font-size: 16px;
  }  
  .card-service.md .caption h4.twoline{ white-space: normal; margin-top: 0 }
  .card-service.md .background{
    top: auto;
    height: 155px;
    width: 280px;
  }

  .section-testimonial .buttons{ padding-top: 0px; padding-bottom: 0 !important }
  .section-service{ padding-top: 25px }
  .section-related .card-info h2{ height: auto; }

  .title-group{ padding-bottom: 20px }
  .title-group .right .btn {
    height: 30px;
    line-height: 30px;
    width: auto;
    padding: 0 20px;
    font-size: 14px
  }
  .news-box{ 
    margin-bottom: 30px;
    border-bottom: 1px solid #d2d2d2; 
  }
  .news-box:last-child{ border-bottom: 0; margin-bottom: 10px }

  .section.section-aboutus-header{ padding: 30px 0; }
  .aboutus-banner{
    margin: 0 -25px; 
  }
  .nav-aboutus{ margin: 0 }
  .nav-aboutus li{ padding:0 16px;  }
  .nav-aboutus li a{ font-size: 18px; }
  .nav-aboutus li a::before{ left: -16px; }
  .nav-aboutus li a span{ padding-bottom: 0 }
  .nav-aboutus li a span::before{ height: 2px }

  .section-aboutus .article{ padding-top: 30px; }
  .card-info.mission p{ font-size: 16px }

  .section-vision .article{ font-size: 20px }
  .section-vision .article{ font-size: 20px }
  .section-vision .article p br{ display: none; }

  .section-vision .vision-texture img.item1{
    left: -9vw;
    height: 50%;
  }

  .carinfo-box.in-banner{ left: 25px; bottom: 7vw }
  .carinfo-box.in-banner .title-xl{ font-size:5vw }
  .carinfo-box.in-banner h3.title-lg{font-size: 4vw; margin:3px 0}
  .carinfo-box.in-banner p.title-lg{font-size: 4.6vw}

  /*.carinfo-box.in-banner .row-01{ padding-bottom: 0 }
  .carinfo-box.in-banner .row-01 p.text{ font-size: 1vw; margin-bottom: 0 }*/

  .carinfo-box.in-banner.mobile{
    position: relative;
    left: 0;
    bottom: auto;
    padding: 20px 27px;
    margin: 0 -25px;
    background-image: url(../img/thumb/texture-gray.jpg);
    background-position: center center;
  }
  .carinfo-box.in-banner.mobile .buttons{ text-align: left; padding-bottom: 0 !important }
  .carinfo-box.in-banner .row-01{ padding: 0 }
  .carinfo-box.in-banner .row-01 p.text{ font-size: 16px; margin-bottom: 5px }

  .section-buyingcar{ padding-top: 0 }

  .section-buyingcar .hgroup{ padding: 30px 0 }
  .section-buyingcar .hgroup p{ margin-bottom: 0 }

  .buyingcar-contactus .row > div.left{ 
    padding-right: 10px;
    padding-bottom: 20px;
    margin-bottom: 0;
    border:0; 
    border-bottom:1px solid #d2d2d2; 
   }
  .buyingcar-contactus .row > div.right{ padding-left: 10px }

  .buyingcar-contactus.brochure .btn[type="submit"]{ margin-top: 0px }
  .buyingcar-contactus.brochure .hgroup{ padding-top: 20px }

  .choose-car{ margin-bottom:0  }
  .choose-car .buttons{ padding: 0 !important }
  .section-buyingcar .choose-car .hgroup {padding-bottom: 7px;}
  .choose-car .buttons .btn {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    padding: 0 20px;
  }

  .input-block{ padding-bottom: 15px }
  .captcha-box{ margin-bottom: 15px }
  .captcha-function{ height: auto; margin-bottom: 15px }
  .captcha-box .input-text{ font-size: 14px }

  .section-installment .hgroup{ padding-bottom: 20px } 
  .section-installment .hgroup h2{ font-size: 24px }
  .section-installment .hgroup p{font-size: 18px}
  .section-installment .hgroup hr {
    margin: 10px 0;
    width: 45px;
    border-top: 3px solid #c7252f;
  }

  .section-service-center{ padding: 0 }
  .service-center { 
    padding: 25px;
    margin: 0 -25px 0; 
    border:0;
  }
   .service-center:nth-child(even) { background-color: #f1f1f1 }
  .service-center li.number{display: none;}
  .service-center li.info h3{ font-size: 18px }
  .service-center li.info h3 .number{ display: inline-block; padding-right:5px;  }
  .service-center li.info p{ padding-top: 10px }
  .service-center li.contact{
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    display: block;

    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 0;

    border-top: 1px dotted  #b6b6b6;
  } 

  .service-center li.contact .item{
    border:0 !important;
    display: inline-block;
    padding-right: 20px;
    height: auto;
  }
  .service-center li.contact .item svg, .service-center li.contact .item img{
    display: inline-block;
    margin-right: 10px;
  }
  
  .service-center li.contact .item p { display: inline-block; }
  .service-center .list .icons {
    width: 15px;
    height: 14px;
    margin-top: 9px;}

  .googlemap{margin: 0 -25px; height: 250px;}
  .company-info{ 
    font-size: 16px; 
    margin: 0 -25px;
    padding: 20px 25px 30px 
  }
  
  .form-contact{ padding: 25px 0 }
  .company-info p.blue{ white-space: nowrap; }
  .company-info p .f-small{ font-size: 14px;  }
}

@media (max-width: 576px) {
  body{ font-size: 16px }
  .title-lg{ font-size: 24px }

  .page-header-info br{ display: none; }
  .section-highlight .buttons .btn{ max-width: 100% } 

  .section-service{ padding-bottom: 25px }
  .card-service{ margin-bottom: 20px }
  .card-service .hgroup h2{font-size: 5.8vw;}
  .card-service .hgroup p {font-size: 4.8vw;}
  .card-service .buttons{display: block;}

  .innovation-caption .textbox h2{font-size: 20px;}
  .innovation-caption .textbox h4{font-size: 16px;}

  .innovation-caption .col-left .textbox {padding: 5px 20px;}
  .innovation-caption .col-right .textbox{ padding:40px 20px;  }

  .innovation-caption .col-left .box.top{ height: 65% }
  .innovation-caption .col-left .box.bottom{ height: 35% }

  .footer{ padding: 30px 0; }
  .footer-info h3{ font-size: 20px; }
  .shotcut-menu li{
    margin: 0;
    width: 33.333%;
    padding: 4px;
    height: auto;
  }
  .shotcut-menu li a {
    display: flex; 
    padding: 15px 0;
  }
  .shotcut-menu li h4{
    margin-top: 5px;
  }

  .offer-caption div.has-bg{ margin-top: 1.5vw; padding: 2vw 0 }
  .swiper-offer .swiper-pagination{ bottom: 0 }
  .swiper-offer .swiper-pagination-bullet{ width: 10px; height: 10px; }

  .carinfo-box .img-car{ max-width: 90%; }
  .carinfo-texture .texture {width:93.5%;}

  .carinfo-box .row-01, 
  .carinfo-box .row-02{
    padding: 30px 0;
  }
  .carinfo-box .row-02{
    padding-top: 20px
  }

  .carinfo-box .buttons .btn{
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    padding: 0 20px;
    margin:0 4px; 
  }
  .carinfo-box .buttons .btn + .btn::after{ left: -8px }
  .carinfo-box p.text{ margin-left: 0; font-size: 18px }

  .carinfo-box.main .row-02{ padding: 20px 0 }
  .carinfo-box.main hr {margin: 20px 0;}

  .offer-caption h2,
  .offer-caption p{padding-left:0;}

  .section-booknow { padding-bottom: 70px;}
  .carinfo-box{ top: -40px; }
  .carinfo-box .title-xl{ font-size: 26px;}
  .carinfo-box .title-lg{ font-size: 22px;} 

  .carinfo-texture.utility .item1{ width: 18vw }

  .card-info h2{ height: auto; font-size: 18px !important }
  .card-info p.info{ font-size: 16px }
  .card-info .date{font-size: 14px}

  .footer-secondary {
    text-align: center;
    padding: 20px 0
   }
  .footer-secondary .float-rght{
    float: none;
    
  }
  .footer-secondary .float-rght > a{
    display: inline-block;
    vertical-align: top;
  }
  .footer-secondary .nav-followus{
    margin: 13px auto 0 auto;
  }

  .section.section-related{ padding:40px 0  }

  .pagination-box {
    margin-top: 20px;
    padding-top: 30px; 
  }
  .pagination .page-link{
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 16px
  }
  .icon-page-first, .icon-page-prev, .icon-page-last, .icon-page-next{ margin-top: 7px }
  .pagination .page-link.dotdotdot,
  .pagination .page-link.last{display: none;}
  .article h2{ font-size: 24px }
  .section-buyingcar .hgroup h3{ font-size: 22px }

  .section-service-province .title-md{ font-size: 20px }
  .section-service-province .btn:not(.has-arrow){ font-size:16px; padding-left: 15px; padding-right: 15px  }
}

@media (max-width: 400px) {
  .innovation-caption > div.col-left,
  .innovation-caption > div.col-right{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .innovation-caption .col-left .box.top{height: auto;}
  .innovation-caption .col-left .box.top .textbox{
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .innovation-caption .col-left .box.bottom {height: 150px;}

  .video-wrap .videobar{ padding-right: 50px; }
  .video-wrap .videobar .inner br{ display:none; }
}