/*==========font-face==========*/

@font-face {

    font-family: Montserrat;

    src: url('../fonts/Montserrat-Thin.otf');

    font-style: normal;

    font-weight: 200

}

@font-face {

    font-family: Montserrat;

    src: url('../fonts/Montserrat-Light.otf');

    font-style: normal;

    font-weight: 300

}

@font-face {

    font-family: Montserrat;

    src: url('../fonts/Montserrat-Regular.otf');

    font-style: normal;

    font-weight: 400

}

@font-face {

    font-family: Montserrat;

    src: url('../fonts/Montserrat-Italic.otf');

    font-style: italic;

    font-weight: 400

}

@font-face {

    font-family: Montserrat;

    src: url('../fonts/Montserrat-Medium.ttf');

    font-style: normal;

    font-weight: 500

}

@font-face {

    font-family: Montserrat;

    src: url('../fonts/Montserrat-MediumItalic.otf');

    font-style: italic;

    font-weight: 500

}

@font-face {

    font-family: Montserrat;

    src: url('../fonts/Montserrat-Bold.ttf');

    font-style: normal;

    font-weight: 600

}

@font-face {

    font-family: Montserrat;

    src: url('../fonts/Montserrat-BoldItalic.otf');

    font-style: italic;

    font-weight: 600

}

@font-face {

    font-family: Montserrat;

    src: url('../fonts/Montserrat-ExtraBold.otf');

    font-style: normal;

    font-weight: 700

}

@font-face {

    font-family: Montserrat;

    src: url('../fonts/Montserrat-ExtraBoldItalic.otf');

    font-style: italic;

    font-weight: 700

}



@font-face {

    font-family: SVN-Bebas;

    src: url('../fonts/SVN-Bebas Neue Pro Thin.otf');

    font-style: normal;

    font-weight: 200

}

@font-face {

    font-family: SVN-Bebas;

    src: url('../fonts/SVN-Bebas Neue Pro Light.otf');

    font-style: normal;

    font-weight: 300

}

@font-face {

    font-family: SVN-Bebas;

    src: url('../fonts/SVN-Bebas Neue Pro Regular.otf');

    font-style: normal;

    font-weight: 400

}

@font-face {

    font-family: SVN-Bebas;

    src: url('../fonts/SVN-Bebas Neue Pro Italic.otf');

    font-style: italic;

    font-weight: 400

}

@font-face {

    font-family: SVN-Bebas;

    src: url('../fonts/SVN-Bebas Neue Pro Expanded Middle.otf');

    font-style: normal;

    font-weight: 500

}

@font-face {

    font-family: SVN-Bebas;

    src: url('../fonts/SVN-Bebas Neue Pro Expanded Middle Italic.otf');

    font-style: italic;

    font-weight: 500

}

@font-face {

    font-family: SVN-Bebas;

    src: url('../fonts/SVN-Bebas Neue Pro Expanded Bold.otf');

    font-style: normal;

    font-weight: 600

}

@font-face {

    font-family: SVN-Bebas;

    src: url('../fonts/SVN-Bebas Neue Pro Expanded Bold Italic.otf');

    font-style: italic;

    font-weight: 600

}

@font-face {

    font-family: SVN-Bebas;

    src: url('../fonts/SVN-Bebas Neue Pro Expanded ExtraBold.otf');

    font-style: normal;

    font-weight: 700

}

@font-face {

    font-family: SVN-Bebas;

    src: url('../fonts/SVN-Bebas Neue Pro Expanded ExtraBold Italic.otf');

    font-style: italic;

    font-weight: 700

}

@font-face {

    font-family: UTM-Micra;

    src: url('../fonts/UTM Micra.ttf');

    font-style: normal;

    font-weight: 500

}

@font-face {

    font-family: Tourney;

    src: url(../fonts/Tourney-Thin.ttf);

    font-style: normal;

    font-weight: 200

}

@font-face {

    font-family: Tourney;

    src: url(../fonts/Tourney-ThinItalic.ttf);

    font-style: italic;

    font-weight: 200

}

body,html{

    font-family: SVN-Bebas;

    color: #000;

    font-weight: 400;

    font-size: 16px;

}

a,a:hover{

    text-decoration: none;

}

/*==========#font-face==========*/



@media (min-width: 1200px){

    .container {

        max-width: 95%;

    }

}



@media (min-width: 1900px){

    .container {

        max-width: 1820px;

    }

    .main-menu > ul{

        margin-right: 15%;

    }

}



/*==========header==========*/

#header{

    width: 100%;

}

#header .top-nav{

    background-color: #ebebeb;

    width: 100%;

    display: flex;

    justify-content: flex-end;

}

#header .top-nav ul{

    list-style: none;

    padding-left: 0px;

    display: inline-block;

    margin-bottom: 0px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

}

#header .top-nav li{

    float: left;

    margin-left: 10px;

}

#header .top-nav,#header .top-nav li,#header .top-nav li a,#header .top-nav button{

    color: #999999;

    font-size: 15px;

}

#header .top-nav .dropdown button{

    background-color: transparent;

    border: none;

    outline: none;

    box-shadow: none;

}

a:hover{

    color: #ff9966;

}

#header .top-nav .dropdown .dropdown-item{

    padding: 5px 10px;

}

#header .top-nav .dropdown .dropdown-menu{

    padding: 0px;

}

#header .top-nav .dropdown .dropdown-toggle::after{

    position: relative;

    top: 2px;

}

#header .main-nav{

    padding: 15px 0;

}

#header .main-nav .body-nav{

    display: flex;

    align-items: center;

}

#header .main-nav .body-nav ul{

    list-style: none;

    padding-left: 0px;

}

#header .main-nav .body-nav ul li{

    float: left;

   /* padding: 5px 15px;*/

}

#header .main-nav .main-menu > ul > li, #header .main-nav .main-menu > ul > li a{

    color: #333;

    font-size: 18px;

    position: relative;

}

.button-contact{

    font-size: 18px;

}

#header .main-nav .main-menu > ul > li a{

}

#header .main-nav .main-menu > ul > li a:after{

    /*content: '';

    height: 4px;

    width: 67%;

    background-color: transparent;

    display: inline-block;

    position: absolute;

    left: 0px;

    bottom: 0px;*/

}

#header .main-nav .main-menu > ul > li a:hover{

    color: #f7ce0c;

}

#header .main-nav .main-menu > ul > li:hover a:after{

    background-color: #212c3d;

}

#header .main-nav .main-menu > ul > li.active a:after{

    background-color: #212c3d;

}

#header .main-nav .main-menu > ul > li.hot{

    background-color: #e88960;

    border-radius: 3px;

    margin-left: 15px;

    border-radius: 20px;

}

.button-hot{

    background-color: #ff9966;

    border-radius: 3px;

    margin-left: 15px;

    border-radius: 20px;

    display: inline-block;

    padding: 5px 20px;

    color: #fff !important;

    font-weight: bold;

    text-transform: uppercase;

    cursor: pointer;

}

.button-hot:hover{

    background-color: #212c3d;

    border: 1px solid #ff9966;

}

#header .main-nav .main-menu > ul > li.hot a{

    color: #fff !important;

}

#header .main-nav .main-menu > ul > li.hot:hover{

    background-color: #212c3d;

}

#header .main-nav .main-menu > ul > li.hot a:hover{

    color: #fff;

}

#header.header-fix{

    position: fixed;

    top: 0px;

    left: 0px;

    width: 100%;

    z-index: 9;

}

#header.header-fix .top-nav{

    display: none;

}

#header.header-fix .main-nav{

    background-color: #000000b0;

}

#header .logo img{

    transition: 0.3s;

    height: 91px;

}

#header.header-fix .logo img{

    height: 64px;

}

.h-fix{

    width: 100%;

    z-index: 9;

}

#header.h-fix .main-nav .main-menu > ul > li, #header.h-fix .main-nav .main-menu > ul > li a{

    font-family: Montserrat;

    color: #212c3d;

    font-weight: bold;

}

#header.header-fix .main-nav .main-menu > ul > li a{

    color: #fff;

}

/*==========#header==========*/



/*==========footer==========*/

footer{

    background-repeat: no-repeat;

    background-size: 100% 100%;

}

#footer{

    background-color: #000;

    padding-top: 10px;

    padding-bottom: 100px;

}

#footer h3{

    font-size: 24px;

    color: #bf942f;

    font-weight: bold;

    margin-bottom: 25px;

}

#footer p{

    font-size: 15px;

}

#footer ul{

    padding-left: 15px;

}

#footer ul li{

    margin-bottom: 5px;

}

#footer ul li,#footer ul li a{

    font-size: 17px;

    color: #fff;

}

/*==========#footer==========*/





/*==========main==========*/

.box1-slide .owl-stage{

    display: flex;

}

.box1-slide .owl-stage-outer{

    overflow: hidden;

}

.box1-slide .owl-nav{

    display: none;

}

h2{

    font-size: 30px;

    color: #212c3d;

    font-weight: 400;

}

.h2-des{

    font-size: 17px;

    color: #999;

}

.box-img{

    overflow: hidden;

    margin-bottom: 5px;

    display: inline-block;

}

.box-img img{

    transition: 0.3s;

    max-width: 100%;

}

.box-img img:hover{

    transform: scale(1.1);

}

.more-box2{

    font-size: 14px;

    color: #fff;

    font-weight: bold;

    padding: 6px 15px;

    background-color: #707070;

}

.more-box2:hover{

    color: #fff;

    background-color: #f7ce0c;

}

.item-box5{

    display: flex;

}

.box-des h3,.box-des h3 a{

    color: #999;

    font-size: 17px;

}

.box-des p{

    font-size: 14px;

    color: #999;

}

.des-status a{

    font-size: 10px;

    color: #666;

    border-right: 1px solid #666;

    margin-right: 10px;

    padding-right: 10px;

}

.des-status a:nth-child(1){

    font-weight: bold;

}

.des-status a:nth-child(2){

    color: #999;

}

.des-status a:last-child{

    border-right: none;

    padding-right: 0px;

    margin-right: 0px;

    color: #ccc;

}

.more-box5{

    font-size: 14px;

    color: #fff;

    font-weight: bold;

    padding: 6px 15px;

    background-color: #b48b29;

}

.more-box5:hover{

    background-color: #707070;

    color: #fff;

}

.ul-list-dv{

    list-style: none;

    padding-left: 0px;

}

.ul-list-dv li{

    display: flex;

    align-items: center;

    margin-bottom: 15px;

    padding: 10px 15px;

    background-color: #fff;

    position: relative;

}

.ul-list-dv li img{

    margin-right: 15px;

}

.ul-list-dv li h3{

    font-size: 20px;

    color: #666;

}

.ul-list-dv li p{

    font-size: 14px;

    color: #666;

    margin-bottom: 0px;

}

.back-gray-box5{

    background-color: #ebebeb;

}

.ul-list-dv .active:before{

    content: '';

    border-right: 10px solid #555;

    z-index: 9;

}

.ul-list-dv li:before{

    content: '';

    border-top: 10px solid transparent;

    border-right: 10px solid #fff;

    border-bottom: 10px solid transparent;

    border-left: 10px solid transparent;

    width: 0;

    height: 0;

    position: absolute;

    left: -20px;

    top: 10px;

}

.ul-list-dv li.active{

    background-color: #555;

}

.ul-list-dv li.active h3,.ul-list-dv li.active p{

    color: #fff;

}

.d6-flex{

    justify-content: center;

    flex-direction: column;

    align-items: stretch;

    flex-wrap: wrap-reverse;

    display: flex;

}

.box6-back{

    background-image: url(../img/bnh.png);

    background-repeat: no-repeat;

    background-size: 100% 100%;

    padding: 80px 0;

}

.box6-back h2,.box6-back p{

    color: #fff;

}

.div-local{

    display: flex;

    justify-content: space-between;

    margin-bottom: 40px;

}

.div-local a{

    font-size: 12px;

    font-weight: bold;

    color: #fff !important;

    padding: 11px 15px;

    background-color: #b48b29;

}

.form-home input{

    border: none;

    border-bottom: 2px solid #000;

    box-shadow: none;

    outline: none;

    border-radius: 0;

    color: #212c3d;

    font-weight: 400;

    font-size: 14px;

}

.form-home textarea{

    border: none;

    border-bottom: 2px solid #000;

    box-shadow: none;

    outline: none;

    border-radius: 0;

    color: #212c3d;

    font-weight: 400;

    font-size: 14px;

}

.form-home button{

    font-size: 14px;

    color: #fff;

    box-shadow: none;

    border: none;

    font-weight: 500;

    width: 100%;

    margin-left: 0px;

    border-radius: 0;

    text-transform: unset;

}

.slide-item{

    position: relative;

}

.slide-item img{

    object-fit: cover;

    width: 100%;

}

.content-slide{

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

}

.content-slide p{

    font-size: 24px;

    color: #fff;

    font-weight: bold;

    text-transform: uppercase;

}

.content-slide .h2{

    font-size: 72px;

    color: #fff;

    font-weight: bold;

    text-transform: uppercase;

}

.box1-slide .owl-dots{

    position: absolute;

    bottom: 0;

    left: 10px;

}

.box1-slide .owl-dots button{

    background-color: transparent;

    border: none;

    outline: none;

}

.box1-slide .owl-dots button span{

    display: inline-block;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background-color: #dadada;

}

.box1-slide .owl-dots button.active{

    

}

.box1-slide .owl-dots button.active span{

    width: 23px;

    height: 23px;

    background-color: #fff;

    position: relative;

    top: 4px;

}

.content-banner{

    position: absolute;

    left: 0px;

    right: 0px;

    bottom: 30%;

}

.content-banner h3{

    color: #fff;

    font-size: 30px;

    font-weight: 300;

    text-transform: uppercase;

}

.content-banner p{

    color: #fff;

    font-size: 18px;

    font-weight: 400;

    text-transform: uppercase;

}

.side-right{

    margin-bottom: 25px;

}

.right-search {

    height: auto;

    overflow: hidden;

    border: 1px solid #cdcccc;

    border-radius: 2px;

}

.right-search .form-group {

    margin-bottom: 0px !important;

}

.right-search button {

    background-color: #fff;

    border: none;

    box-shadow: none;

    padding: 8px 12px;

    margin-top: 1px;

    color: #707070;

}

.right-search button:before{

    content: '';

    height: 20px;

    width: 3px;

    background-color: #ffb600;

    display: inline-block;

    margin-right: 10px;

    position: relative;

    top: 2px;

}

.right-search .form-control {

    height: 40px !important;

    border: none;

    box-shadow: none;

    margin-bottom: 0px !important;

}

.matb5 {

    margin-bottom: 5px !important;

}

.side-cate {

    list-style: none;

    padding-left: 0px;

}

.side-cate > li {

    border-bottom: 1px dashed #d9d8d8;

    padding-top: 8px;

    padding-bottom: 3px;

}

.side-cate > li, .side-cate >li >a {

    font-size: 17px;

    color: #999;

    display: inherit;

    position: relative;

}

.side-tit {

    font-size: 20px !important;

    font-weight: bold;

    color: #333333;

    text-transform: uppercase;

}

.side-cate >li >a span{

    color: #fff;

    height: 18px;

    width: 18px;

    text-align: center;

    border-radius: 3px;

    background-color: #ffc73c;

    font-size: 14px;

    float: right;

}

.item-news-r h3,.item-news-r h3 a{

    color: #999;

    font-size: 15px;

}

.item-news-r p{

    color: #666;

    font-size: 14px;

}

.item-list-news h3,.item-list-news h3 a{

    color: #999;

    font-size: 20px;

}

.more{

    display: inline-block;

    padding: 7px 15px;

    color: #fff;

    background-color: #707070;

}

.item-list-news p{

    font-size: 14px;

    color: #999;

}

.pagin a, .pagin strong{

    color: #212c3d;

    display: inline-block;

    padding: 8px 8px 0px 3px;

    margin-right: 10px;

    font-weight: 500;

    font-size: 18px;

    line-height: 20px;

}

.pagin strong{

    color: #ff9966;

    border-bottom: 3px solid #ff9966;

}

.pagin a:hover{

    color: #ff9966;

    border-bottom: 3px solid #ff9966;

}

.ul-status {

    list-style: none;

    padding-left: 0px;

    width: 100%;

    display: inline-block;

    margin-bottom: 10px;

}

.ul-status li{

    font-size: 15px;

    float: left;

    margin-right: 15px;

}

.item-list-news{

    border-bottom: 1px solid #ccc;

    padding-bottom: 30px !important;

    margin-bottom: 40px !important;

}

/*==========#main==========*/

.content-text,.content-text p{

    font-weight: 700;

    font-size: 31px;

    margin-bottom: 0px;

    line-height: 40px;

    color: #000;

}

.content-text{

}

p,a{

   color: #000; 

}

.ul-content-text{

    list-style: none;

}

.ul-content-text li,.ul-content-text a{

    font-weight: bold;

    font-size: 16px;

} 

.f32{

    font-size: 28px !important;

}

.back-box-1{

    background-image: url(../img/bg-h1.png);

    background-size: 100%;

    padding: 230px 0 100px 0;

    background-repeat: no-repeat;

}

.box2-left{

    padding: 200px 0;

}

.p-fix{

    line-height: 32px;

}

.back-box-2{

    background-image: url(../img/bg-h2.png);

    background-size: cover;

    padding: 150px 0 150px 0;

    background-repeat: no-repeat;

}

.back-box-2 p, .back-box-2 a, .back-box-2 li{

    color: #fff;

}

.box-line-product{

    margin-top: 15px;

    background-color: #1c2534;

    padding: 25px 15px 5px 15px;

    height: 100%;

}

.box-line-product p{

    font-size: 14px;

    font-weight: 400;

}

.box-line-product p:first-child{

    font-weight: bold;

    font-size: 20px;

    line-height: 23px;

    border-bottom: 1px solid #fff;

    padding-bottom: 10px;

}

.box-line-product p:first-child span{

    font-size: 28px;

}

.d-flex{

    display: flex;

}

.box-line-product p:last-child{

    margin-bottom: 0px;

}

.back-cam{

    background-color: #ff9966;

    padding: 60px 0 40px;

}

.form-home input::placeholder,.form-home textarea::placeholder {

  color: #212c3d

}



.form-home input:-ms-input-placeholder,.form-home textarea:-ms-input-placeholder {

  color: #212c3d

}



.form-home input::-ms-input-placeholder,.form-home textarea::-ms-input-placeholder {

  color: #212c3d

}

.mt35{

    margin-top: 35px !important;

}

.mt124{

    margin-top: 124px !important;

}

.back-xam{

    background-color: #f7f7f7;

    padding: 50px 0;

}

.wraper{

    overflow: hidden;

}

.giuseart-mobile-contact-bar {

    display: none

}



.giuseart-pc-contact-bar {

    right: 13px;

    bottom: 70px;

    position: fixed;

    z-index: 998;

    margin-bottom: 0

}



.giuseart-pc-contact-bar li {

    width: 44px;

    height: 44px;

    overflow: hidden;

    margin-bottom: 0;

    list-style: none

}



.giuseart-pc-contact-bar li.facebook {

    margin-bottom: 8px;

    background: url(../img/ic-mesenger.png);

    background-repeat: no-repeat;

    background-size: 100% 100%;

}



.giuseart-pc-contact-bar li.hotline {

    background: url(../img/ic-hotline.png);

    background-repeat: no-repeat;

    background-size: 100% 100%;

    margin-bottom: 8px;

}



.giuseart-pc-contact-bar li.email {

    background: url(../img/ic-email.png);

    background-repeat: no-repeat;

    background-size: 100% 100%;

    margin-bottom: 8px;

}



.giuseart-pc-contact-bar li a {

    display: block;

    width: 44px;

    height: 44px

}



.main-menu{

    display: flex;

    justify-content: flex-end;

    width: 100%;

    padding-top: 9px;

    padding-left: 95px;

}



.menu-lang a{

    font-size: 14px;

    margin: 0 5px;

}



.menu-lang a.active{

    color: #fff;

    background-color: #212c3d;

    padding: 3px 5px;

    border-radius: 50%;

}



.ul-damme{

    list-style: none;

    padding-left: 0px;

}



.ul-damme li{

    float: left;

    margin-right: 90px;

    font-size: 58.22px;

    color: #212c3d;

    font-family: Tourney;

    font-weight: 200;

}



.button-text{

    font-size: 18px;

    font-weight: 400;

    position: relative;

}



.button-text:after{

    content: '';

    display: inline-block;

    height: 9px;

    width: 9px;

    background-image: url(../img/mt-cheo.png);

    position: absolute;

    top: 0px;

    right: -18px;

}



.button-text:hover:after{

    background-image: url(../img/mt-cheo-h.png);

}



.content-item-da{

    background-color: #212c3d;

    position: absolute;

    top: 0px;

    left: 0px;

    z-index: 1;

    right: 0px;

    bottom: 0px;

    padding: 24px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.content-item-da p,.content-item-da a, .content-item-da div, .content-item-da span, .content-item-da h3{

    color: #fff;

}



.content-item-da h3,.content-item-da h3 a{

    font-size: 30px;

    font-weight: 500;

}



.content-item-da p{

    font-size: 14px;

    font-weight: 200;

    display: flex;

    align-items: center;

    position: relative;

}



.content-item-da p:after{

    display: inline-block;

    content: '';

    width: 12px;

    height: 13px;

    background-image: url(../img/mt-cheo-2.png);

    background-size: 100% 100%;

    position: absolute;

    z-index: 2;

    top: 0px;

    right: 0px;

}



.content-item-da p span{

    display: inline-block;

    width: 100%;

    border-top: 1px solid #fff;

    margin-left: 15px;

    margin-right: 25px;

}



.item-da .content-item-da{

    display: none;

}



.item-da:hover .content-item-da{

    display: flex;

}



.row.fix2,.row.fix2 .row{

    margin-right: -2px !important;

    margin-left: -2px !important;

}

.row.fix2 > div,.row.fix2 .row > div{

    padding-left: 2px;

    padding-right: 2px;

}

.mb4{

    margin-bottom: 4px;

}

@media only screen and (max-width:499px) {

    .giuseart-mobile-contact-bar {

        left: 10px;

        bottom: 10px;

        position: fixed;

        z-index: 998;

        margin-bottom: 0;

        display: block !Important

    }

    .giuseart-mobile-contact-bar li {

        display: inline-block;

        float: left;

        margin-right: 7px;

        list-style: none

    }

    .giuseart-mobile-contact-bar li.facebook {

        margin-bottom: 8px;

        background: url(https://giuseart.com/wp-content/uploads/2020/03/fb.png);

        background-repeat: no-repeat

    }

    .giuseart-mobile-contact-bar li.zalo {

        background: url(https://giuseart.com/wp-content/uploads/2020/03/zl.png);

        background-repeat: no-repeat

    }

    .giuseart-mobile-contact-bar li a {

        display: block;

        width: 44px;

        height: 44px

    }

    .giuseart-mobile-contact-bar li.hotline {

        background: url(https://giuseart.com/wp-content/uploads/2020/03/p2.gif);

        background-repeat: no-repeat;

        background-size: 44px

    }

}

.box1-slide{

    position: relative;

}

.pl35{

    padding-left: 35px;

}

.pr35{

    padding-right: 35px;

}

.disi{

    display: inline-block;

}

.he702{

    height: 702px;

    object-fit: cover;

}

.he180{

    height: 180px;

    object-fit: cover;

}

.he341{

    height: 341px;

    object-fit: cover;

}

.he550{

    height: 550px;

    object-fit: cover;

}

.he494{

    height: 494px;

    object-fit: cover;

}

.he485{

    height: 485px;

    object-fit: cover;

}

.box-left-ser{

    padding-left: 15%;

}

.box-left-ser h2{

    font-size: 30px;

    color: #212c3d;

    font-weight: 400;

}

.box-left-ser p{

    font-size: 14.01px;

    font-weight: 400;

}

.ul-lis-service{

    list-style: none;

    padding-left: 0px;

}

.ul-lis-service  h3{

    font-size: 48.03px;

    font-weight: 600;

    color: #212c3d;

    border-bottom: 2px solid #212c3d;

    padding-bottom: 12px;

}

.ul-lis-service .content-li-service{

    border-bottom: 2px solid #212c3d;

    padding: 5px 0 15px 0;

    display: none;

}

.ul-lis-service .content-li-service p{

    font-size: 18px;

    font-weight: 500;

    color: #212c3d;

    line-height: 22px;

}

.ul-lis-service .content-li-service ul{

    list-style: none;

    padding-left: 0px;

}

.ul-lis-service .content-li-service ul li,.ul-lis-service .content-li-service ul li a{

    font-size: 14px;

    font-weight: 400;

}

.box-right-ser{

    padding-left: 60px;

}

.ul-lis-service > li{

    position: relative;

}

.ul-lis-service > li:before{

    height: 18px;

    width: 19px;

    display: inline-block;

    content: '';

    background-image: url(../img/plus.png);

    background-size: 100% 100%;

    position: absolute;

    right: 0px;

    top: 30px;

}

.ul-lis-service > li.open:before{

    background-image: url(../img/mini.png);

}

.ul-lis-service  li.open .content-li-service{

    display: block;

}

.content-right-ban,.content-left-ban{

    display: flex;

    align-items: center;

    padding-left: 30px !important;

}

.content-right-ban p{

    font-size: 39.65px;

    font-family: Tourney;

    font-weight: 200;

    color: #212c3d;

    line-height: 46px;

}

.content-left-ban p{

    font-weight: 500;

    font-size: 36px;

    line-height: 42px;

}

.button-plus{

    background-image: url(../img/butt-plus.png);

    background-size: 100% 100%;

    height: 26px;

    width: 26px;

    display: inline-block;

}

.button-plus:hover{

    background-image: url(../img/butt-plus-h.png);

}

.item-news .date-news{

    font-size: 14px;

    font-weight: 200;

    position: relative;

}

.item-news .date-news span{

    font-weight: 500;

}

.item-news h3,.item-news h3 a{

    font-size: 18px;

    font-weight: 500;

}

.item-news .date-news:after{

    height: 1px;

    width: 60px;

    display: inline-block;

    background-color: #212c3d;

    content: '';

    position: absolute;

    left: 0px;

    bottom: -20px;

}

#id-dkn{

    background-color: #212c3d;

}

.back-tim{

    display: flex;

    justify-content: center;

    align-items: center;

}

.back-tim p{

    color: #fff;

    font-size: 18px;

    font-weight: 500;

}

.box-partner{

    border-bottom: 1px solid #212c3d;

}

.box-partner h3{

    font-size: 30px !important;

    color: #212c3d !important;

    font-weight: 400 !important;

}

.footer-info h3{

    font-size: 36px !important;

    color: #212c3d !important;

    font-weight: 400 !important;

}

.footer-info h4{

    font-weight: bold;

    font-size: 18px;

    color: #212c3d;

}

.footer-info p{

    font-size: 14px !important;

}

.footer-info ul{

    list-style: none;

    padding-left: 0px !important;

}

.footer-info ul li,.footer-info ul li a{

    font-size: 14px !important;

    color: #212c3d !important;

    font-weight: 400;

}

.button-text-t {

    font-size: 36px;

    font-weight: 400;

    position: relative;

}

.button-text-t:after {

    content: '';

    display: inline-block;

    height: 15px;

    width: 15px;

    background-image: url(../img/arrow_c_t.png);

    position: absolute;

    top: 5px;

    right: -18px;

}

.button-text-t:hover:after {

    background-image: url(../img/arrow_c_t_h.png);

}

.footer-rule h3{

    font-size: 18px !important;

    font-weight: 500 !important;

    color: #212c3d !important;

    text-transform: uppercase;

}

.footer-rule p{

    font-size: 14px;

}

.ic-share{

    height: 32px;

    width: 32px;

    display: inline-block;

    background-size: 100% 100%;

    background-repeat: no-repeat;

}

.youtube{

    background-image: url(../img/ic-you.png);

}

.instagram{

    background-image: url(../img/ic-insta.png);

}

.facebook{

    background-image: url(../img/ic-face.png);

}

.be{

    background-image: url(../img/ic-be.png);

}

.youtube:hover{

    background-image: url(../img/ic-you-h.png) !important;

}

.instagram:hover{

    background-image: url(../img/ic-insta-h.png) !important;

}

.facebook:hover{

    background-image: url(../img/ic-face-h.png) !important;

}

.be:hover{

    background-image: url(../img/ic-be-h.png) !important;

}

.box-share a{

    margin-right: 15px;

}

#header.header-fix .main-nav .main-menu > ul > li.active a:after{

    background-color: #fff;

}

#header.header-fix .menu-lang a{

    color: #fff;

}

#header.header-fix .menu-lang .button-contact span{

    background-color: #fff;

}

.menu-lang{

    position: relative;

    top: -8px;

}

.button-contact{

    display: inline-block;

    position: relative;

    top: 4px;

    cursor: pointer;

    height: 45px;

    padding: 8px 15px 10px 25px;

    margin-left: 15px;

    background-color: #000;

    color: #fff;

    border-radius: 25px;

    font-family: Montserrat;

    font-weight: 600;

}

.button-contact span{

    display: block;

    width: 35px;

    height: 1.3px;

    background-color: #212c3d;

    margin-bottom: 5px;

}

#lof_go_top {

    background: url(../img/back-top.png) 50% 50% no-repeat;

    bottom: 135px;

    display: none;

    height: 39px;

    position: fixed;

    right: 13px;

    width: 39px;

    z-index: 99999;

    background-size: 100% 100%;

    cursor: pointer;

}

.box-contact{

    position: fixed;

    z-index: 10;

    top: 0px;

    right: 0px;

    height: 100vh;

    background-color: #212c3df7;

    padding: 80px 80px 80px 105px;

    display: none;

}

.box-contact-conect{

    position: fixed;

    z-index: 10;

    top: 0px;

    right: 0px;

    height: 100vh;

    background-color: #212c3df7;

    padding: 80px 40px 50px;

    display: none;

    overflow-y: auto;

    z-index: 99;

}

.close-contact{

    display: flex;

    height: 46px;

    width: 46px;

    justify-content: center;

    align-items: center;

    background-color: #ebebeb;

    position: fixed;

    top: 0px;

    right: 0px;

    cursor: pointer;

}

.close-contact-conect{

    display: flex;

    height: 46px;

    width: 46px;

    justify-content: center;

    align-items: center;

    background-color: #ebebeb;

    position: fixed;

    top: 0px;

    right: 0px;

    cursor: pointer;

}

.box-contact-logo{

    height: 50px;

}

.box-contact h3{

    font-size: 14px;

    font-weight: bold;

    color: #fff;

}

.bb-4{

    border-bottom: 4px solid #fff;

    padding-bottom: 17px;

}

.box-contact ul{

    list-style: none;

    padding-left: 0px;

}

.box-contact ul li,.box-contact ul li a{

    color: #fff;

    font-size: 14px;

    font-weight: 300;

}

.box-contact ul li{

    border-bottom: 1px solid #fff;

    padding: 15px 0;

}

.box-contact .youtube{

    background-image: url(../img/ic-you-w.png);

}

.box-contact .instagram{

    background-image: url(../img/ic-insta-w.png);

}

.box-contact .facebook{

    background-image: url(../img/ic-face-w.png);

}

.box-contact .be{

    background-image: url(../img/ic-be-w.png);

}

.ic-address,.ic-phone,.ic-email{

    position: relative;

}

.ic-address:before{

    width: 19px;

    height: 23px;

    display: inline-block;

    background-image: url(../img/ic-add.png);

    content: '';

    position: absolute;

    left: -32px;

    top: 20px;

}

.ic-phone:before{

    width: 20px;

    height: 20px;

    display: inline-block;

    background-image: url(../img/ic-phone.png);

    content: '';

    position: absolute;

    left: -32px;

    top: 20px;

}

.ic-email:before{

    width: 20px;

    height: 15px;

    display: inline-block;

    background-image: url(../img/ic-email2.png);

    content: '';

    position: absolute;

    left: -32px;

    top: 20px;

}

h1{

    font-size: 60px;

    font-weight: 500;

    color: #000;

}

.li-form button {

    padding: 0.282rem 0.8rem !important;

    background-color: #212c3d;

    border-radius: 0;

    border-color: #000;

    margin-bottom: 0px !important;

    color: #fff !important;

}

.li-form .form-group input {

    height: 35px;

    border-top-right-radius: 0;

    border-bottom-right-radius: 0;

    min-width: 270px;

    color: #666666;

    font-size: 14px !important;

    font-style: italic;

    border-color: #898e98;

    border-width: 2px;

    border-right: none;

}

.li-form .form-group {

    margin-right: 0px !important;

    margin-bottom: 0px !important;

}

.ul-cate-project{

    list-style: none;

    padding-left: 0px;

    margin-bottom: 0px;

}

.ul-cate-project li{

    float: left;

    margin-right: 60px;

}

.ul-cate-project li,.ul-cate-project li a{

    font-size: 18px;

    color: #212c3d;

}

.ul-cate-project li.active a,.ul-cate-project li:hover a{

    color: #ff9966;

}

.li-form{

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.more-da{

    display: inline-block;

    height: 124px;

    width: 124px;

    border: 1px solid #a1a6ad;

    border-radius: 50%;

    text-align: center;

    font-size: 14px;

    font-weight: 500;

    color: #212c3d;

    padding: 35px 0;

}

.more-da:hover{

    border: 1px solid #ff9966;

}

.more-da span{

    position: relative; 

}

.more-da span:after{

    display: inline-block;

    content: '';

    width: 12px;

    height: 15px;

    background-image: url(../img/dd.png);

    background-size: 100% 100%;

    position: absolute;

    bottom: -23px;

    left: 50%;

    transform: translateX(-50%);

}

.more-da:hover span:after{

    background-image: url(../img/dd-h.png);

}

.item-info label, .item-info p{

    font-size: 14.01px;

    margin-bottom: 0;

}

.item-info label{

    font-weight: 300;

    color: #999999;

}

.item-info p{

    font-weight: 500;

    color: #212c3d;



}

.box-tag h3,.box-tag li,.box-tag li a{

    font-size: 14px;

    color: #999999;

}

.box-tag h3{

    font-weight: 500;

}

.box-tag li,.box-tag li a{

    font-weight: 400;

}

.box-tag ul{

    list-style: none;

    padding-left: 0px;

}

.box-relate h3{

    font-size: 14px;

    font-weight: 500;

    color: #212c3d;

}

.button-text-ll {

    font-size: 56px;

    font-weight: 500;

    position: relative;

}

.button-text-ll:after {

    content: '';

    display: inline-block;

    height: 19px;

    width: 19px;

    background-image: url(../img/mt-cheo-ll.png);

    position: absolute;

    top: 15px;

    right: -26px;

}

.button-text-ll:hover:after {

    background-image: url(../img/mt-cheo-ll-h.png);

}

.content-writter img{

    max-width: 100% !important;

    height: auto !important;

}

.content-writter p{

    font-weight: 500;

    color: #000;

}

.content-left-ban.fix{

    padding-left: 0px !important;

}

.content-left-ban.fix p{

    font-size: 30px;

    line-height: 35px;

}

.content-left-ban.fix3 p{

    font-size: 30px;

    line-height: 35px;

    font-weight: 400;

}

.content-left-ban.fix2 p{

    font-size: 14px;

    line-height: unset;

}

.button-connect:after{

    content: '';

    display: inline-block;

    height: 12px;

    width: 15px;

    background-image: url(../img/arrow_r.png);

    background-size: 100% 100%;

    margin-left: 20px;

    position: relative;

    top: 2px;

}

.button-connect:hover:after{

    background-image: url(../img/arrow_r_h.png);

}

.item-da.fix-news .content-item-da{

    display: flex;

    background-color: #212c3d3b;

    justify-content: flex-end;

}

.item-da.fix-news .content-item-da p:after{

    content: unset;

}

.item-da.fix-news .content-item-da p span{

    width: unset;

    border-top: unset;

}

.item-da.fix-news .content-item-da p{

    font-size: 14px;

    font-weight: 300;

}

.item-da.fix-news .content-item-da .date-news{

    font-size: 18px;

    font-weight: 200;

}

.item-da.fix-news .content-item-da .date-news span{

    font-weight: 500;

    margin-left: 10px;

}

.item-da.fix-news .content-item-da h3,.item-da.fix-news .content-item-da h3 a{

    font-weight: 500;

    font-size: 36px;

}

.item-da.fix-news .content-item-da h3{

    line-height: 36px;

    margin-bottom: 20px;

}

.h1-news{

    font-weight: 500;

    font-size: 30px;

}

.date-news{

    font-size: 14px;

    color: #999;

    margin-top: 5px;

    margin-bottom: 0px;

}

.note-news{

    color: #212c3d;

    font-weight: 500;

}

.li-form.fix .form-group input{

    min-width: calc(100% - 43px);

    width: 100%;

}

.li-form.fix .form-group{

    float: left;

    min-width: calc(100% - 43px);

    width: calc(100% - 43px);

}

.button-back-news{

    font-size: 14px;

    font-weight: 500;

    color: #212c3d;

    position: relative;

    top: -8px;

}

.button-back-news:before{

    content: '';

    display: inline-block;

    height: 16px;

    width: 9px;

    background-image: url(../img/back-news.png);

    background-size: 100%;

    margin-right: 10px;

    position: relative;

    top: 3px;

}

.button-back-news:hover:before{

    background-image: url(../img/back-news-h.png);

}

.new-next{

    font-weight: 500;

    font-size: 30px;

    line-height: 30px;

}

.col-right h3{

    font-weight: bold;

    font-size: 24px;

    color: #212c3d;

    padding-bottom: 10px;

}

.col-right h3.borb{

    border-bottom: 7px solid #212c3d;

}

.col-right ul{

    list-style: none;

    padding-left: 0px;

}

.col-right ul li,.col-right ul li a{

    font-size: 18px;

    color: #212c3d;

}

.col-right ul li{

    border-bottom: 1px solid #212c3d;

    padding: 5px 0;

}

.col-right ul li:hover,.col-right ul li:hover a{

    color: #ff9966;

}

.col-right ul li a{

    display: inherit;

}

.col-right ul li a span{

    float: right;

}

.col-right ul li:last-child{

    border-bottom: none;

}

.form-home.fix input{

    border-top: 1px solid #000;

    padding-left: 0px;

}

.form-home.fix input::placeholder{

    color: #999;

    font-style: italic;

}

.content-text.fix p{

    font-family: Tourney;

    font-weight: 200;

}

.h3-about{

    font-size: 18px;

    font-weight: 500;

    color: #212c3d;

    position: relative;

}

.h3-about:after{

    content: '';

    display: inline-block;

    height: 6px;

    width: 72px;

    background-color: #212c3d;

    position: absolute;

    left: 0px;

    bottom: -40px;

}

.item-service h3{

    font-size: 48.03px;

    font-weight: 600;

    color: #212c3d;

    padding-bottom: 12px;

}

.item-service ul{

    list-style: none;

    padding-left: 0px;

}

.item-service ul li, .item-service ul li a{

    font-size: 14px;

    font-weight: 400;

}

.item-action span{

    font-size: 72px;

    font-weight: 200;

    color: #212c3d;

    line-height: 90px;

}

.item-action h3{

    font-size: 24px;

    font-weight: bold;

    color: #212c3d;

    margin-bottom: 30px;

}

.item-action p{

    font-size: 14.01px;

    color: #212c3d;

}

.content-text.fix2 p{

    font-size: 36px;

    font-family: Tourney;

    font-weight: 200;

    line-height: 40px;

}

.content-text.fix2 h3{

    font-size: 24px;

    font-weight: 500;

    color: #212c3d;

}

.content-text.fix2 .place{

    font-family: Kanit;

    font-size: 18px;

    color: #212c3d;

    font-weight: 400;

    line-height: 18px;

}

.box-contact-conect h3{

    font-size: 18px;

    color: #fff;

    font-weight: 500;

    position: relative;

    margin-bottom: 70px;

}

.box-contact-conect h3:after{

    content: '';

    display: inline-block;

    height: 6px;

    width: 144px;

    background-color: #fff;

    position: absolute;

    left: 0px;

    bottom: -40px;

}

.box-contact-conect label{

    color: #fff;

    font-size: 18px;

}

.box-contact-conect p{

    color: #fff;

    font-size: 14px;

    font-weight: 200;

}

.box-contact-conect a{

    font-size: 18px;

    color: #ff9966 !important;

}

.box-contact-conect h1{

    font-weight: 500;

    font-size: 48px;

    color: #fff;

}

.box-contact-conect .button-back-about{

    color: #fff !important;

    font-size: 14px !important;

}

.box-contact-conect .button-back-about i{

    font-size: 25px;

    position: relative;

    top: 4px;

    margin-right: 10px;

}

.box-contact-conect .button-back-about:hover{

    color: #ff9966 !important;

}

.box-contact-conect .form-home button{

    background-color: #fff;

    color: #212c3d !important;

    font-size: 14px !important;

    font-weight: 500;

}

.box-contact-conect .form-home button:hover{

    background-color: #ff9966;

    color: #fff !important;

}

.box-contact-conect .form-home input,.box-contact-conect .form-home textarea{

    background-color: transparent;

    color: #fff;

    border-bottom: 1px solid #fff;

    padding-left: 0px;

}

.box-contact-conect .form-home input::placeholder,.box-contact-conect .form-home textarea::placeholder{

    color: #fff;

    font-weight: 200;

}

.box-contact-conect .form-home .form-group{

    margin-bottom: 0px !important;

}

.box-contact-conect .form-home input{

    height: 50px;

}

.box-contact-conect .form-home textarea{

    padding-top: 15px;

}

#header.header-fix .main-nav .main-menu > ul > li a:hover:after,#header.header-fix .main-nav .main-menu > ul > li:hover a:after{

    background-color: #fff;

}

.button-contact i{

    height: 30px;

    width: 30px;

    text-align: center;

    background-color: #0066cc;

    line-height: 20px;

    padding: 6px;

    border-radius: 50%;

}

.work{

    font-size: 191px;

    font-family: UTM-Micra;

    line-height: 90px;

}

.item-play{

    position: relative;

}

.content-play{

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    background-color: #00000052;

}

.content-play:after{

    content: '';

    width: 70px;

    height: 70px;

    display: inline-block;

    background-image: url(../../img/ic-play.png);

    background-size: 100% 100%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

.item-project h3,.item-project h3 a{

    font-size: 34px;

    font-weight: 600;

}

.item-project p{

    font-family: Montserrat;

    font-size: 18px;

    font-weight: 600;

}

.view-p{

    font-size: 18px;

    color: #999 !important;

    font-family: Montserrat;

    font-weight: 600;

    margin-top: 20px;

}

.view-p:after{

    content: '';
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url(../../img/view-p.png);
    background-repeat: no-repeat;
    margin-left: 20px;
    position: relative;
    top: 4px;
    background-size: 100%;

}

.menu-button a {

    font-size: 14px;

    border: 3px solid #000;

    /* width: 120px; */

    display: inline-block;

    text-align: center;

    padding: 15px 30px;

    border-radius: 40px;

    font-size: 18px;

    font-weight: 700;

    font-family: Montserrat;

}

.menu-button a {

    border: 5px solid #000;

    color: #000 !important;

}

.box-about-bl{

    position: relative;

}

.box-about-bl-content{

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    padding-top: 100px;

}

.menu-button a:hover{

    border: 5px solid #06c !important;

    color: #06c !important !important;

}

.box-about-bl-content h2{

    font-size: 47px;

    color: #fff;

    font-weight: 600;

}

.box-about-bl-content p{

    font-size: 18px;

    font-weight: 600;

    font-family: Montserrat;

    color: #fff;

}

.menu-button.fix-w a{

    border: 5px solid #fff;

    color: #fff !important;

}

.box-ser{

    background-color: #000;

    color: #fff;

}

.box-ser h2{

    font-size: 47px;

    font-weight: 600;

    color: #fff;

}

.item-ser{

    border-top: 1px solid #fff;

}

.item-ser .ser-left{

    color: #fff;

    font-family: Montserrat;

    font-weight: 400;

    font-size: 51px;

}

.item-ser h3,.item-ser h3 a{

    color: #fff;

    font-size: 108px;

    font-weight: 600;

}

.item-ser p{

    color: #fff;

    font-family: Montserrat;

    font-weight: 600;

    font-size: 18px;

}

.text-hugo{

    color: #0066cc;

    font-family: UTM-micra;

    font-size: 54px;

}

.box-contact-in{

    margin-top: 120px;

}

.box-contact-in h2{

    font-weight: 600;

    font-size: 47px;

}

.box-contact-in h3{

    font-size: 24px;

    font-family: Montserrat;

    font-weight: 700;

}

.box-contact-in input, .box-contact-in button,.box-contact-in textarea{

    font-family: Montserrat;

    font-size: 18px;

    font-weight: 600;

}

.box-contact-in .form-control{

    padding-bottom: 20px;

    margin-top: 15px;

}

.box-contact-in  .button-hot{

    display: inline-block;

    width: auto !important;

    border: 3px solid #000;

    /* width: 120px; */

    display: inline-block;

    text-align: center;

    padding: 15px 30px;

    border-radius: 40px;

    font-size: 18px;

    font-weight: 700;

    font-family: Montserrat;

    background-color: #000;

}

.box-contact-in  button:hover{

    background-color: #0066cc;

    border: 3px solid #0066cc;

}

#footer div,#footer a,#footer p,#footer h3{

    color: #fff !important;

}

.view-p.fix-logo:after{

    height: 70px;

    width: 70px;

    background-image: url(../../img/view-pl.png);

}

.h3-dot{

    font-size: 20px;

    font-family: Montserrat;

    font-weight: 600 !important;

}

#footer .h3-dot{

    font-weight: 600 !important;

    font-size: 20px !important;

}

.h3-dot:before{

    content: '.';

    margin-right: 15px;

    font-size: 110px;

}

#footer p{

    font-family: Montserrat !important;

    font-weight: 400 !important;

    font-size: 18px !important;

}

#footer .view-p.fix-logo{

    font-size: 63px !important;

    font-family: UTM-micra !important;

    font-weight: 600 !important;

}

.f30{

    font-size: 30px !important;

}

#footer .f30{

    font-size: 30px !important;

}

.menu-inline{

    list-style: none;

    font-family: Montserrat;

    font-weight: 400;

    padding-left: 0 !important;

}

.menu-inline li{

    float: left;

    margin-right: 30px;

}

.menu-inline li,.menu-inline li a{

    font-family: Montserrat;

    font-weight: 400;

    font-size: 24px;

    color: #999;

    border: 5px solid transparent;

    padding: 15px 0;

    border-radius: 35px;

}

.menu-inline li.active a{

    font-weight: 600;

    color: #000;

    border: 5px solid #0066cc;

    padding: 7px 35px;

}

.menu-inline li a:hover{

    color: #0066cc;

}

.borb-d{

    border-bottom: 1px solid #000;

}

.text-hayzo{

    color: #0066cc;

    font-family: UTM-micra !important;

    font-size: 38px;

}

.content-writter ul,.ul-hayzo{

    list-style: none;

    padding-left: 0px;

}

.content-writter ul li,.ul-hayzo li{

    margin-bottom: 50px;

    font-family: Montserrat;

    font-weight: 600;

    font-size: 18px;

}

.content-writter ul li:before,.ul-hayzo li:before{

    content: '';

    display: inline-block;

    width: 34px;

    height: 21px;

    background-image: url(../../img/dot-li.png);

    background-size: 100% 100%;

    margin-right: 15px;

    position: relative;

    top: 4px;

}

.h2-d{

    font-weight: 600;

    font-size: 47px;

}

.p-d{

    font-family: Montserrat;

    font-weight: 600;

    font-size: 18px;

}

.h3-d{

    font-weight: 600 !important;

    font-size: 31px !important;

    line-height: 40px !important;

    font-family: SVN-Bebas !important;

}

.h3-d.fix-d{

    color: #000 !important;

}

.item-emp h3,.item-emp h3 a{

    font-weight: 600;

    font-size: 31px;
    text-align: center;

}

.item-emp p{

    font-family: Montserrat;

    font-size: 18px;
    text-align: center;

}

.item-comment h3{

    font-family: Montserrat;

    font-weight: 700;

    font-size: 24px;

    margin-bottom: 0;

}

.item-comment span{

    font-family: Montserrat;

    font-weight: 600;

    font-size: 18px;

}

.item-comment p{

    font-weight: 600;

    font-size: 62px;

    line-height: 70px;

    margin-top: 50px;

    font-family: SVN-Bebas !important;

    padding-bottom: 100px;

    position: relative;

}

.item-comment p:after{

    content: '';

    display: inline-block;

    width: 80px;

    height: 67px;

    background-image: url(../../img/pp.png);

    position: absolute;

    bottom: 0px;

    left: 50%;

    transform: translate(-50%);

}

.form-control{

    background-color: transparent;

}

.form-control:focus{

    background-color: transparent;

}

.menu-button.fix-but a{

    background-color: #0066cc !important;

    border: 5px solid #0066cc;

    color: #fff !important;

    padding: 5px 5px 5px 30px;

}

.menu-button.fix-but a i{

    height: 38px;

    width: 38px;

    text-align: center;

    line-height: 38px;

    border-radius: 50%;

    color: #0066cc;

    background-color: #fff;

    margin-left: 15px;

}

.menu-button.fix-but a:hover i{

    background-color: red;

}

.fix-page-contact .form-control{

    color: #fff !important;

    border: 1px solid #fff;

    padding-top: 15px;

    padding-bottom: 15px;

}

.fix-page-contact .form-control::placeholder{

    color: #fff;

}

.f62{

    font-size: 62px !important;

}

.content-ct p.big{

    font-size: 49px;

    font-weight: 600;

    color: #000;

    line-height: 49px;

    text-transform: uppercase;

}

.box-da-lg{

    background-color: #0066cc;

    padding-top: 70px;

    padding-bottom: 70px;

}

.button-contact.fix{

    padding: 12px 25px 14px 10px;

    height: 55px;

}

.box-da-lg h3,.box-da-lg h3 a,.box-da-lg p,.box-da-lg .view-p{

    color: #fff !important;

}

.box-da-lg .view-p:after{

    background-image: url(../../img/view-pl.png);

    background-size: 100% 100%;

}
.main-menu li a {
	border: 5px solid transparent;
    padding: 7px 35px;
    border-radius: 30px;
}
.main-menu li.active > a,.main-menu li a:hover{
	border: 5px solid #0066cc
}

.item-project img{
    height: 515px;
    object-fit: cover;
}
.item-project p{
    margin-bottom: 0px !important;
}
@media screen and (max-width: 991px){

    .hehe-mb{

        padding-left: 15px !important;

        padding-right: 15px !important;

    }

    .main-nav{

        position: relative;

    }

    .main-menu > ul{

        position: absolute;

        left: 0px;

        top: 60px;

        z-index: 9999;

        background-color: #000000b8;

        width: 100%;

        padding: 20px 0;

        display: none;

    }

    .main-menu > ul li a{

        color: #fff !important;

    }

    .main-menu > button{

        border: none;

        padding-top: 4px;

    }

    #header .logo img{

        height: 44px;

    }

    #header .main-nav .body-nav ul li{

        float: none !important;

    }

    #header .main-nav .body-nav ul li.active{

    }

    #header .main-nav .main-menu > ul > li.hot{

        display: inline-block;

        margin-top: 10px;

    }

    .back-cam{

        padding: 30px 10px;

    }

    .ul-content-text{

        padding-left: 0px;

        margin-top: 10px;

        margin-bottom: 0px;

    }

    br{

        display: none;

    }

    .back-box-1 {

        background-size: cover;

        background-position: top;

    }

    .box2-left{

        padding: 20px 15px;

    }

    .back-box-2{

        background-size: cover;

    }

    .pl-mb-5{

        padding-left: 0px !important;

    }

    .logo-fot{

        display: inline-block;

        margin-bottom: 30px;

    }

    .p-f{

        padding: 10px 15px !important;

        text-align: center;

    }

    .mt124{

        margin-top: 20px !important;

    }

    .tjm{

        text-align: justify;

    }

    .mtb0{

        margin-top: 0px !important;

    }

    .text-center-mobile{

        text-align: center !important;

    }

    .pl35{

        padding-left: 15px !important;

    }

    .pr35{

        padding-right: 15px !important;

    }

    .pl-5{

        padding-left: 15px !important;

    }

    .text-right{

        text-align: left !important;

    }

}

.box-fix-space-lg .row{

        margin-left: -5px;

        margin-right: -5px;

    }

    .box-fix-space-lg .col-6,.box-fix-space-lg .col-12{

        padding-left: 5px;

        padding-right: 5px;

    }
.content-writter br{
	display: block !important;
}
@media screen and (min-width: 1093px){

    .logo-fot{

        margin-top: 31px;

    }

}

@media screen and (min-width: 1200px){

    .main-nav .container-fluid{

        padding-left: 35px;

        padding-right: 35px;

    }

    

    .mh84{

        min-height: 112px;

        display: flex;

        flex-direction: column;

        justify-content: flex-end;

    }

    .logo-fot{

        margin-top: 5px;

    }

    .col-53{

        -webkit-box-flex: 0;

        -ms-flex: 0 0 54%;

        flex: 0 0 54%;

        max-width: 54%;

    }

    .col-47{

        -webkit-box-flex: 0;

        -ms-flex: 0 0 46%;

        flex: 0 0 46%;

        max-width: 46%;

    }

    .item-da.fix-news .content-item-da{

        padding: 40px 50px 30px;

        padding-right: 60%;

    }

}

@media screen and (min-width: 992px) and (max-width: 1199px){

    .mh84{

        min-height: 140px;

        display: flex;

        flex-direction: column;

        justify-content: flex-end;

    }

}

@media screen and (max-width: 1199px){

    .box-left-ser{

        padding-left: 15px !important;

    }

    .box-right-ser{

        padding-left: 15px !important;

    }

    .ul-lis-service h3{

        font-size: 30px;

    }

    .ul-lis-service > li:before{

        top: 10px;

    }

    .content-right-ban p{

        margin-top: 15px;

    }

    .back-tim{

        padding: 20px 0;

    }

    .footer-info h4{

        margin-top: 20px;

    }

    .box-share.mt-5{

        margin-top: 20px !important;

    }

    .p-tb-m{

        padding: 25px 0;

    }

    #id-dkn .mt-5{

        margin-top: 0px !important;

    }

    .menu-lang{

        padding-right: 0px;

        background-image: unset !important;

    }

    #header .logo img{

        height: 44px;

    }

    .text-center-m{

        text-align: center !important;

    }

    .ul-damme li {

        margin-right: 10px;

        font-size: 25px;

    }

    .box-btn-show-menu{

        display: block;

        width: 35px;

        height: 33px;

        padding: 5px;

        background: none;

        border: none;

        -webkit-box-shadow: none;

        box-shadow: none;

        outline: none;

        cursor: pointer;

        z-index: 99;

        background-color: #fff;

        border-radius: 5px;

        position: relative;

        top: -5px;

    }

    .box-btn-show-menu span{

        display: block;

        background: #0053cc;

        height: 2px;

        width: 25px;

        margin-top: 4px;

        margin-bottom: 4px;

        -webkit-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        transform: rotate(0deg);

        position: relative;

        left: 0;

        opacity: 1;

        pointer-events: none;

    }

    .box-btn-show-menu.active span:nth-child(1){

        position: absolute;

        top: 0;

        bottom: 0;

        left: 0;

        right: 0;

        margin: auto;

        -webkit-transform: rotate(135deg);

        -ms-transform: rotate(135deg);

        transform: rotate(135deg);

        opacity: 0.9;

    }

    .box-btn-show-menu.active span:nth-child(2) {

        height: 3px;

        visibility: hidden;

        background-color: transparent;

    }

    .box-btn-show-menu.active span:nth-child(3) {

        position: absolute;

        top: 0;

        bottom: 0;

        left: 0;

        right: 0;

        margin: auto;

        -webkit-transform: rotate(-135deg);

        -ms-transform: rotate(-135deg);

        transform: rotate(-135deg);

        opacity: 0.9;

    }

    #header .main-nav .body-nav ul li.active{

        margin-left: 0px !important;

    }

    .main-menu > ul > li a{

        display: inherit;

    }

    #header .main-nav .main-menu > ul > li a:after{

        width: 10%;

    }
    #header .main-nav .main-menu > ul > li{
        padding-left: 40px;
        padding-right: 40px;
    }
    #header .main-nav .main-menu > ul > li a{

        

    }

    .main-menu > ul{

        background-color: #fff !important;

    }

    .main-menu > ul li a{

        color: #000 !important;

    }

    #header .main-nav .main-menu > ul > li.active a:after{

        background-color: #fff !important;

    }

    .main-menu{

        padding-left: 25px;

    }

    .menu-lang{

        top: -14px;

    }

    .box-contact{

        padding: 80px 20px 80px 55px;

    }

    .li-form{

        flex-wrap: wrap;

    }

    .ul-cate-project{

        margin-bottom: 20px;

    }

    .ul-cate-project li{

        margin-right: 30px;

    }

    .item-info.mb-5{

        margin-bottom: 10px !important;

    }

    .content-right-ban, .content-left-ban{

        padding-left: 15px !important;

        margin-top: 15px;

        padding-right: 15px !important;

    }

    .content-writter .mt-10{

        margin-top: 40px !important;

    }

    .content-writter .mb-10{

        margin-bottom: 40px !important;

    }

    .button-text-ll{

        font-size: 40px;

    }

    .col-right{

        margin-top: 30px;

    }

    .item-service h3{

        font-size: 30px;

    }

    .h3-about{

        margin-bottom: 70px;

    }

    .content-text{

        padding-left: 15px !important;

    }

    .content-text.fix2 p{

        font-size: 26px;

    }

    .mt-10.mbm-fix{

        margin-top: 0 !important;

    }

    .mb-10.mbm-fix{

        margin-bottom: 0 !important;

    }

    .box-contact-conect h3.mt-10{

        margin-top: 0px !important;

    }

    .box-contact-conect{

        z-index: 9999;

        overflow-y: scroll;

        padding-bottom: 50px;

    }

    .button-back-about{

        margin-bottom: 20px;

        display: inline-block;

    }

    .box-contact-conect h1{

        margin-top: 40px;

    }

}
@media screen and (max-width: 1600px){

    #footer .view-p.fix-logo {
        font-size: 60px !important;
    }

}
@media screen and (max-width: 1366px){
    .view-p:after{
        width: 25px !important;
        height: 25px !important;
    }
    #footer .view-p.fix-logo {
        font-size: 45px !important;
    }

    .box-about-bl-content h2 {
        font-size: 40px;
    }
    .item-ser h3, .item-ser h3 a {
        font-size: 85px;
    }
    .work {
        font-size: 121px !important;
    }
    .box-contact-in{
        margin-top: 10px !important;
    }
    .box-about-bl-content{
        padding-top: 10px !important;
    }

}

@media screen and (max-width: 576px){

    .he702{

        height: 502px;

    }

    .box1-slide .owl-dots{

        bottom: 15px;

        right: 40px;

    }

    #header.header-fix .logo img{
        height: 44px;
    }
    .main-menu{
        justify-content: space-between;
    }
    .logo{
        position: relative;
        top: -5px;
    }
    .main-menu {
        padding-left: 10px;
    }
    .content-text, .content-text p {
        font-size: 28px !important;
    }
    .work {
        font-size: 70px !important;
    }
    .view-p span{
        display: none;
    }
    .text-hugo {
        font-size: 24px;
    }
    .item-ser h3, .item-ser h3 a {
        font-size: 38px;
    }
    .box-about-bl-content{
        background-color: #0066cb;
        position: static !important;
        padding-bottom: 40px;
        padding-top:30px;
        text-align: center !important;
    }
    .box-about-bl-content.fixit{
        position: absolute !important;
        background-color: unset !important;
    }
    .box-about-bl.fixit img{
        width: 100% !important;
        height: 840px;
        object-fit: cover;
    }
    .box-contact-in.fixit{
        margin-top: 10px !important;
    }
    .box-about-bl-content h2{
        font-size: 27px !important;
    }
    #footer .view-p.fix-logo{
        font-size: 17px !important;
    }
    #footer .view-p.fix-logo {
        font-size: 16px !important;
    }
    .view-p.fix-logo:after {
        height: 30px;
        width: 30px;
        background-image: url(../../img/view-pl.png);
        margin-left: 5px;
        background-size: 100%;
    }
    .box-about-bl-content .mb-5{
        margin-bottom: 20px !important;
    }
    .box-about-bl-content .menu-button{
        text-align: center !important;
    }
    .text-hayzo {
        font-size: 28px !important;
    }
    .box-about-bl-content.fixit .fixit2{
        margin-top: 80px;
    }
    .item-comment p{
        font-size: 32px;
    }
    .box-about-bl.fixit-img img{
        width: 100% !important;
        height: 540px;
        object-fit: cover;
    }
    .mt-m-0.mt-10{
        margin-top: 0px !important;
    }
     .mt-m-0 .box-contact-in{
        margin-top: 0px !important;
     }
     .backfff{
        background-color: #fff !important;
     }
     .item-project.fix-img-no img,.item-project img{
     	height: auto !important;
     	width: 100% !important;
     }
     .mbm20{
     	margin-bottom: 20px !important;
     }
}

@media screen and (min-width: 1601px){

    .box-about-bl-content{

        padding-top: 250px;

    }

    .fix-pad .box-about-bl-content{

        padding-top: 50px;

    }

}

@media screen and (min-width: 899px) and (max-width: 1919px){

    .work {
        font-size: 141px;
    }
    .content-text, .content-text p {
        font-size: 27px;
    }
    .text-hugo {
        color: #0066cc;
        font-family: UTM-micra;
        font-size: 34px;
    }

}




.mh84o{

    min-height: 84px;

}

.mh168o{

    min-height: 168px;

}

.footer .f32{

    font-size: 24px !important;

}

.logo-fot{

    width: 100px;

}

.mt-10{

    margin-top: 6rem!important;

}

.mb-10{

    margin-bottom: 6rem!important;

}
.qodef-qi-animated-text .qodef-e-character {
    display: inline-flex;
}
.qodef-qi-animated-text.qodef--appear-from-right .qodef-e-character, .qodef-qi-animated-text.qodef--appear-from-right .qodef-e-word {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity .25s, transform .45s cubic-bezier(.26,-.14,0,1.01);
}
.qodef-qi-animated-text.qodef--appear-fade.qodef-qi--appeared .qodef-e-character, .qodef-qi-animated-text.qodef--appear-fade.qodef-qi--appeared .qodef-e-word, .qodef-qi-animated-text.qodef--appear-from-bottom.qodef-qi--appeared .qodef-e-character, .qodef-qi-animated-text.qodef--appear-from-bottom.qodef-qi--appeared .qodef-e-word, .qodef-qi-animated-text.qodef--appear-from-left.qodef-qi--appeared .qodef-e-character, .qodef-qi-animated-text.qodef--appear-from-left.qodef-qi--appeared .qodef-e-word, .qodef-qi-animated-text.qodef--appear-from-right.qodef-qi--appeared .qodef-e-character, .qodef-qi-animated-text.qodef--appear-from-right.qodef-qi--appeared .qodef-e-word, .qodef-qi-animated-text.qodef--appear-from-top.qodef-qi--appeared .qodef-e-character, .qodef-qi-animated-text.qodef--appear-from-top.qodef-qi--appeared .qodef-e-word {
    opacity: 1;
    transform: translateX(0) translateZ(0);
}
.box1-slide-fix .owl-dots{
    display: none !important;
}
.box1-slide-fix .owl-stage{
    transition: 2s !important;
}
.main-menu ul > li{
    position: relative;
}
.main-menu ul > li > ul{
    position: absolute;
    min-width: 280px;
    padding-top: 20px;
    padding-bottom: 20px;
    display: none;
    background-color: #000000b0;
    top: 36px;
}
.main-menu ul > li > ul > li{
    width: 100%;
    display: initial;
    height: 45px;
}
.main-menu ul > li > ul > li a{
    width: 100%;
    display: inherit;
}
.main-menu ul > li:hover ul{
    display: block;
}
@media screen and (max-width: 991px){
    .main-menu ul > li > ul{
        position: static;
        display: block;
        background-color: transparent;
        padding-left: 15px !important;
    }
    .main-menu ul > li > ul > li{
        height: 45px;
        display: inline-block;
        margin-bottom: 15px;
    }
}