/* ------------my fonts-------------- */
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap");
html { width: 100%; height: 100%; }

body { font-family: "Roboto"; font-size: 14px; }

ul { list-style-type: none; }
ul li { list-style-type: none; }

a { color: #15e3bd; text-decoration: none; }
a:hover { text-decoration: none; color: #15e3bd; }

.fix-nav { background: transparent; position: fixed; top: 0px; z-index: 10000; width: 100%; transition: 0.8s; }

.bg-nav { background: #000000c4; position: fixed; }

.navbar-brand { padding: 20px 0 0 0; }
.navbar-brand img { width: 100%; height: auto; }

.navbar-top { width: 100%; padding: 0; display: flex; justify-content: flex-end; margin: 0; }
.navbar-top li { padding-left: 8px; margin: 0; font-size: 14px; }
.navbar-top li .nav-link { display: block; color: #fff; text-decoration: none; font-weight: 100; text-transform: uppercase; }
.navbar-top li.nav-item { position: relative; }
.navbar-top li.nav-item:hover .sub-nav { visibility: visible; opacity: 1; }
.navbar-top li .lagu-link { border: 1px solid #fff; border-radius: 100%; height: 35px; width: 35px; padding: 6px; text-align: center; }

.top-banner { width: 100%; overflow: hidden; position: relative; background-attachment: fixed; }
.top-banner .box-all-slice { position: absolute; width: 100%; top: 60%; left: 0; z-index: 20; }
.top-banner .box-all-slice .content-slice { width: 790px; margin: auto; text-align: center; color: #fff; font-size: 26px; font-weight: 100; line-height: 28px; }
.top-banner .box-all-slice .content-slice span { font-weight: 700; }
.top-banner video { z-index: 1; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }

.box-about { width: 100%; padding: 0; transition: 0.3s; background: url("../images/bg-content.jpg") top center no-repeat; background-size: 100% 100%; }
.box-about .box-tt-mex { padding: 150px 0 70px 0; }
.box-about .box-tt-mex img { max-width: 100%; height: auto; }
.box-about .box-text { color: #fff; font-size: 16px; line-height: 32px; font-weight: 100; padding-bottom: 120px; }

.box-office { width: 100%; position: relative; background: url("../images/bg-office.jpg") no-repeat center top; background-size: 100% 100%; padding: 0; }
.box-office .content-office { background-image: linear-gradient(to bottom, rgba(61, 61, 61, 0.3), rgba(17, 24, 31, 0.9)); width: 100%; min-height: 350px; padding: 350px 0 40px 0; }
.box-office .content-office .info-office { max-width: 800px; margin: 0 auto; }
.box-office .content-office .info-office .carousel-control-prev { width: 7%; font-size: 40px; left: -50px; }
.box-office .content-office .info-office .carousel-control-next { width: 7%; font-size: 40px; right: -50px; }

.text-office { text-align: center; color: #fff; padding: 30px 0; font-size: 16px; font-weight: 100; }
.text-office .tt-text { font-weight: 900; font-size: 48px; margin: 0; padding: 0; }

.bt-view-all { text-align: center; font-size: 18px; text-transform: uppercase; color: #fff; font-weight: 700; width: 230px; padding: 10px 15px; border: 1px solid #fff; margin: 25px auto; display: block; text-decoration: none; }
.bt-view-all:hover { color: #fff; text-decoration: none; }

.box-our-factory { width: 100%; background: url("../images/bg-factor.jpg") no-repeat top center; background-size: 100% 100%; padding: 50px 0; }
.box-our-factory .content-factory { max-width: 800px; margin: auto; color: #fff; }
.box-our-factory .content-factory .factory-info { max-width: 630px; background: #00000070; padding: 30px; margin: 20px auto; font-size: 20px; font-weight: 100; text-align: center; }
.box-our-factory .content-factory .factory-info .col-lg-6 span { display: block; padding: 10px; }

.box-contact { width: 100%; background: url("../images/bg-contact.jpg") no-repeat top center; background-size: 100% 100%; padding: 30px 0; }
.box-contact .box-form-send { width: 100%; background: #21252a url("../images/bg-form.jpg") no-repeat bottom right; padding: 40px 100px 10px; }
.box-contact .box-form-send .txt-contact { width: 100%; height: 40px; margin-bottom: 20px; background: transparent; border: none; border-bottom: 1px solid #444a50; color: #fff; font-weight: 300; font-style: italic; outline: none; }
.box-contact .box-form-send .txt-contact ::placeholder { text-transform: uppercase; font-weight: 100; font-size: 18px; color: #fff; }
.box-contact .box-form-send .txt-contact :-ms-input-placeholder { text-transform: uppercase; font-weight: 100; font-size: 18px; color: #fff; }
.box-contact .box-form-send .txt-contact :-ms-input-placeholder { text-transform: uppercase; font-weight: 100; font-size: 18px; color: #fff; }
.box-contact .box-form-send .textarea-contact { width: 100%; height: 60px; background: transparent; border: none; border-bottom: 1px solid #444a50; color: #fff; font-weight: 300; font-style: italic; outline: none; }
.box-contact .box-address-contact { background: #000000ad; color: #ffffff; display: flex; padding: 15px; margin-bottom: 20px; }
.box-contact .box-address-contact .address-l { width: 50%; padding: 15px; font-size: 15px; line-height: 28px; font-weight: 300; }
.box-contact .box-address-contact .address-l p { font-weight: 700; margin: 0; }

/* -- footer ---- */
.footer { background: #2b2b2c url("../images/bg-footer.jpg") no-repeat center; width: 100%; color: #fff; }
.footer .footer-content { width: 100%; display: flex; padding: 40px 0; font-size: 14px; font-weight: 100; }
.footer .footer-content .copyright { width: 70%; text-transform: uppercase; }
.footer .footer-content .design-by { width: 30%; text-align: right; text-transform: uppercase; }
.footer .footer-content .design-by a { color: #fff; text-decoration: none; }
.footer .footer-content .design-by a:hover { color: #f9d102; }

.animatable { /* initially hide animatable objects */ visibility: hidden; /* initially pause animatable objects their animations */ -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; }

/* show objects being animated */
.animated { visibility: visible; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-play-state: running; -moz-animation-play-state: running; -ms-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; }
.animated.moveUp { -webkit-animation-name: moveUp; -moz-animation-name: moveUp; -o-animation-name: moveUp; animation-name: moveUp; }
.animated.moveRight { -webkit-animation-name: moveRight; -moz-animation-name: moveRight; -o-animation-name: moveRight; animation-name: moveRight; }
.animated.moveLeft { -webkit-animation-name: moveLeft; -moz-animation-name: moveLeft; -o-animation-name: moveLeft; animation-name: moveLeft; }

@keyframes moveUp { 0% { opacity: 1; transform: translateY(100px); }
  100% { opacity: 1; transform: translateY(0); } }
@keyframes moveRight { 0% { opacity: 1; transform: translateX(-100px); }
  100% { opacity: 1; transform: translateX(0); } }
@keyframes moveLeft { 0% { opacity: 1; transform: translateX(100px); }
  100% { opacity: 1; transform: translateX(0); } }
.project-page-nav { background: #fff; }
.project-page-nav .navbar-top li .nav-link { color: #000; font-weight: 300; }
.project-page-nav .navbar-top li .nav-link:hover { text-decoration: none; color: #ff0000; }
.project-page-nav .navbar-top li .lagu-link { border: 1px solid #000; }

.banner-top-project { width: 100%; height: 190px; background: url("../images/bg-contact.jpg") no-repeat 0 -377px; background-size: 100% auto; margin-top: 90px; }

.box-tt-project { width: 60%; color: #fff; font-size: 47px; font-weight: 700; padding: 60px 0 0 10px; line-height: 47px; }
.box-tt-project span { display: block; font-size: 15px; font-weight: 100; line-height: 25px; padding-top: 10px; }

.box-breadcrumb { width: 40%; text-align: right; padding-top: 80px; color: #fff; font-size: 15px; font-weight: 100; }
.box-breadcrumb a { color: #ed3237; font-weight: 700; text-decoration: none; }

.nav-all-project { padding: 30px 0; display: flex; justify-content: center; }
.nav-all-project li { padding: 0 20px; font-size: 14px; }
.nav-all-project li span { color: #ed3237; font-weight: 700; }
.nav-all-project li a { color: #1b1e21; text-decoration: none; }

.figure { filter: grayscale(100%); cursor: pointer; }
.figure img { height: 200px; }
.figure:hover { filter: none; }
.figure .figure-caption { font-weight: 700; }

.pagination-project { display: flex; width: 100%; padding: 30px 0; justify-content: center; }
.pagination-project li { padding: 0 5px; }
.pagination-project li a { display: block; border: 1px solid #e2e2e2; padding: 5px 15px; text-align: center; color: #1b1e21; font-size: 14px; }
.pagination-project li a:hover { border: 1px solid #ed3237; color: #ed3237; }
.pagination-project li a.active { border: 1px solid #ed3237; color: #ed3237; }

.pic-about { padding: 70px 20px 70px 0; }
.pic-about img { max-width: 100%; height: auto; }

.box-text-about { padding: 70px 0 100px; background: url("../images/intermax2.png") no-repeat center bottom; }
.box-text-about .box-tt-mex { padding: 20px 0; }
.box-text-about .box-tt-mex img { max-width: 100%; height: auto; }
.box-text-about .box-text { color: #000; font-size: 16px; line-height: 32px; font-weight: 300; }

.box-our-reward { color: #000; font-size: 16px; line-height: 32px; font-weight: 300; text-align: center; padding: 30px; }
.box-our-reward p { font-size: 48px; font-weight: 700; }

.box-info-par { padding: 40px; text-align: center; font-weight: 300; font-size: 14px; }
.box-info-par img { margin: 0 auto 20px; width: 100%; max-width: 160px; height: auto; display: block; }

.box-breadcrumb-detail { width: 100%; text-align: center; padding: 40px 0 15px; }
.box-breadcrumb-detail span { background: #f2f2f2; padding: 5px 10px; font-weight: 300; }

.title-big-detail { padding: 0 40px 40px 40px; text-align: center; font-size: 48px; font-weight: 900; width: 100%; }

.box-banner-project-detail { display: flex; flex-wrap: wrap; background: #f2f2f2; width: 100%; margin-bottom: 25px; }
.box-banner-project-detail .col-l { width: 40%; padding: 15px 30px; line-height: 30px; font-size: 16px; }
.box-banner-project-detail .col-l .box-text-dd { width: 100%; padding: 5px 0; border-bottom: 1px solid #e3e3e3; display: flex; }
.box-banner-project-detail .col-l .box-text-dd .col-l-dd { width: 40%; }
.box-banner-project-detail .col-l .box-text-dd .col-r-dd { width: 60%; font-weight: 700; text-align: right; }
.box-banner-project-detail .col-r { width: 60%; }
.box-banner-project-detail .col-r img { width: 100%; height: auto; }

::-webkit-scrollbar { /* Webkit */ width: 0; height: 0; }

.hs__wrapper { width: 100%; }

.hs { display: flex; overflow-x: scroll; justify-content: space-between; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */ -webkit-overflow-scrolling: touch; margin: 0; padding: 0; }
.hs__item { flex-grow: 1; flex-shrink: 0; flex-basis: calc(25% - 12px * 2 - 5px); margin: 12px; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; user-select: none; max-width: 25%; }
.hs__item:last-child:after { content: ""; display: block; position: absolute; width: 12px; height: 1px; right: calc(12px * 2 * -1); }
.hs__item:first-child { margin-left: calc(12px * 2); }
.hs__item__description { z-index: 1; align-self: flex-start; margin: 10px 0; }
.hs__item__subtitle { color: #aaa; display: block; }
.hs__item__image__wrapper { position: relative; width: 100%; height: 0; padding-bottom: 100%; }
.hs__item__image { pointer-events: none; position: absolute; width: 100%; height: 100%; object-fit: cover; }
.hs__item1 { flex-grow: 1; flex-shrink: 0; flex-basis: calc(35% - 12px * 2 - 5px); margin: 12px; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; user-select: none; max-width: 33%; }
.hs__item1:last-child:after { content: ""; display: block; position: absolute; width: 12px; height: 1px; right: calc(12px * 2 * -1); }
.hs__item1:first-child { margin-left: calc(12px * 2); }
.hs__item1__description { z-index: 1; align-self: flex-start; margin: 10px 0; }
.hs__item1__subtitle { color: #aaa; display: block; }
.hs__item1__image__wrapper { position: relative; width: 100%; height: 0; padding-bottom: 100%; }
.hs__item1__image { pointer-events: none; position: absolute; width: 100%; height: 100%; object-fit: cover; }
.hs__item2 { flex-grow: 1; flex-shrink: 0; flex-basis: calc(100%); margin: 12px; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; user-select: none; }
.hs__item2:last-child:after { content: ""; display: block; position: absolute; width: 12px; height: 1px; right: calc(12px * 2 * -1); }
.hs__item2:first-child { margin-left: calc(12px * 2); }
.hs__item2__description { z-index: 1; align-self: flex-start; margin: 10px 0; }
.hs__item2__subtitle { color: #aaa; display: block; }
.hs__item2__image__wrapper { position: relative; width: 100%; height: 0; padding-bottom: 100%; }
.hs__item2__image { pointer-events: none; position: absolute; width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) and (pointer: coarse) { .hs__wrapper .hs__arrows { display: none; }
  .hs__wrapper .hs__item { flex: 1 0 calc(23% - 12px * 2); } }
@media only screen and (hover: none) and (pointer: coarse) and (max-width: 990px) { .hs__wrapper .hs__item { flex: 1 0 calc(45% - 12px * 2); } }

.title-category { color: #000; font-weight: 900; font-size: 30px; position: relative; margin: 20px 0 10px; }
.title-category:after { width: 30px; height: 4px; background: #ed3237; position: absolute; top: 50%; right: 0; content: ''; }

.nav-category-left { width: 100%; margin: 0; padding: 0; }
.nav-category-left li { padding: 0; margin-bottom: 5px; display: block; cursor: pointer; border: 1px solid #eeeeee; font-size: 20px; }
.nav-category-left li:hover { border: 1px solid #ed3237; }
.nav-category-left li:hover .icon-ero-d { color: #ed3237; }
.nav-category-left li.active { border: 1px solid #ed3237; }
.nav-category-left li.active .icon-ero-d { color: #ed3237; }
.nav-category-left li .nav-link-ca { display: block; padding: 10px; color: #000; font-weight: 400; }
.nav-category-left li .nav-link-ca .icon-b { font-size: 27px; margin-right: 10px; }
.nav-category-left li .nav-link-ca .icon-ero-d { font-size: 13px; float: right; margin-top: 10px; }
.nav-category-left li .block-sup-nav { padding: 5px 10px; }
.nav-category-left li .block-sup-nav .b-sup-nav { margin: 5px 0; }
.nav-category-left li .block-sup-nav .b-sup-nav .sup-nav { color: #000; text-decoration: none; display: block; }
.nav-category-left li .block-sup-nav .b-sup-nav .sup-nav .icon-ero-l { margin-right: 10px; font-size: 14px; }
.nav-category-left li .block-sup-nav .b-sup-nav .sup-nav-more { display: block; padding: 5px 10px; color: #ed3237; font-weight: 700; text-decoration: none; }
.nav-category-left li .block-sup-nav .b-sup-nav .sup-nav-more .icon-ero-l { margin-right: 10px; font-size: 14px; }

.head-chair { width: 100%; background: #f5f5f5; padding: 5px; margin: 30px 0; }
.head-chair .icon-tt-chair { font-size: 30px; margin-top: 7px; }
.head-chair .text-tt { color: #000; font-weight: 700; font-size: 30px; padding: 0; line-height: 30px; margin-top: 5px; }
.head-chair .box-sort { width: 180px; }
.head-chair .box-sort select { width: 100%; border: 1px solid #e2e2e2; background: #ffffff; outline: none; padding: 5px; height: 40px; font-weight: 300; }

.block-pro-factory { margin: 0 0 30px 0; padding: 0; width: 100%; cursor: pointer; }
.block-pro-factory:hover .pic-b { border: 2px solid #ed3237; }
.block-pro-factory:hover .text-info-b .title-b { color: #ed3237; }
.block-pro-factory:hover .box-bt .bt-call { background: #ed3237; color: #fff; }
.block-pro-factory:hover .box-bt .bt-view { background: #000000; color: #fff; }
.block-pro-factory .pic-b { height: 288px; overflow: hidden; border: 2px solid #ffffff; }
.block-pro-factory .pic-b img { width: 100%; height: auto; max-height: 288px; }
.block-pro-factory .text-info-b { width: 100%; height: 85px; overflow: hidden; padding: 10px 0; font-size: 14px; font-weight: 300; }
.block-pro-factory .text-info-b .title-b { font-weight: 900; font-size: 20px; display: block; color: #000; }
.block-pro-factory .text-info-b .title-b:hover { color: #ed3237; }
.block-pro-factory .box-bt { width: 100%; display: flex; margin-top: 10px; }
.block-pro-factory .box-bt .bt-call { width: 60%; margin-right: 5px; border: 1px solid #ed3237; color: #ed3237; font-weight: 700; font-size: 15px; text-align: center; padding: 10px; text-decoration: none; display: block; }
.block-pro-factory .box-bt .bt-call:hover { background: #ed3237; color: #fff; }
.block-pro-factory .box-bt .bt-view { width: 40%; margin-left: 5px; border: 1px solid #000000; color: #000000; font-weight: 700; font-size: 15px; text-align: center; padding: 10px; text-decoration: none; display: block; }
.block-pro-factory .box-bt .bt-view:hover { background: #000000; color: #fff; }

.box-best-sale { display: flex; border-bottom: 1px solid #f3f3f3; padding: 10px 0; }
.box-best-sale .box-thumb { width: 30%; padding-right: 10px; }
.box-best-sale .box-thumb img { width: 100%; height: auto; }
.box-best-sale .box-text { width: 70%; }
.box-best-sale .box-text p { margin: 0; padding: 0 0 2px 0; font-size: 16px; font-weight: 700; }

.block-text-detail { padding-top: 30px; }
.block-text-detail .title-big { font-size: 30px; font-weight: 900; margin-bottom: 10px; }
.block-text-detail .tag-cate { border-bottom: 1px solid #f5f5f5; border-top: 1px solid #f5f5f5; font-size: 16px; padding: 10px 0; width: 100%; }
.block-text-detail .tag-cate .tt-tag { color: #000; font-weight: 700; }
.block-text-detail .tag-cate .red-color { color: #ed3237; }
.block-text-detail .text-info-content { font-size: 16px; line-height: 30px; font-weight: 300; padding: 10px 0; }
.block-text-detail .text-call { font-size: 24px; font-weight: 900; color: #ed3237; }
.block-text-detail .lab-call { width: 220px; text-align: center; font-size: 16px; border: 1px solid #1b1e21; padding: 7px 15px; margin: 30px 0; font-weight: 700; }
.block-text-detail .box-social { border-bottom: 1px solid #f5f5f5; font-size: 16px; padding: 10px 0; width: 100%; display: flex; flex-wrap: wrap; }
.block-text-detail .box-social p { width: 100%; margin: 0; padding: 0; font-weight: 700; }
.block-text-detail .box-social img { margin-right: 10px; }

.box-text-description { font-size: 16px; line-height: 30px; padding-top: 20px; padding-bottom: 20px; }
.box-text-description .tt-desctiption { font-size: 30px; font-weight: 900; padding-bottom: 20px; }

.box-tt-pro-other { display: flex; justify-content: space-between; width: 100%; padding: 40px 15px 0; }
.box-tt-pro-other .c-tt { width: 70%; font-weight: 900; font-size: 48px; }
.box-tt-pro-other .c-control { width: 15%; padding-top: 15px; cursor: pointer; }
.box-tt-pro-other .c-control a { font-size: 40px; color: #d3d3d3; margin-left: 10px; }
.box-tt-pro-other .c-control a:hover { color: #ff0000; }

.block-pro-other { padding: 0; width: 100%; display: flex; flex-wrap: wrap; }

.nav-news-left { width: 100%; margin: 0; padding: 0; }
.nav-news-left li { padding: 0; margin-bottom: 5px; display: block; cursor: pointer; border-bottom: 1px solid #eeeeee; font-size: 16px; }
.nav-news-left li .nav-link-ca { display: block; padding: 10px 0; color: #000; font-weight: 400; }
.nav-news-left li .nav-link-ca i { display: none; }
.nav-news-left li .nav-link-ca:hover { color: #ed3035; font-weight: 700; }
.nav-news-left li .nav-link-ca:hover i { font-size: 15px; display: inline-block; }
.nav-news-left li .nav-link-ca span { background: #f5f5f5; float: right; width: 30px; text-align: center; color: #ed3237; font-size: 12px; padding: 5px; border-radius: 6px; }

.box-content-news { margin-top: 40px; display: flex; flex-wrap: wrap; }
.box-content-news .box-pic { width: 45%; padding-right: 30px; }
.box-content-news .box-pic img { width: 100%; height: auto; }
.box-content-news .box-text-content-news { width: 55%; font-size: 16px; font-weight: 300; }
.box-content-news .box-text-content-news .title-text-news { font-weight: 900; font-size: 30px; line-height: 36px; }
.box-content-news .box-text-content-news .title-text-news a { color: #000; text-decoration: none; }
.box-content-news .box-text-content-news .title-text-news a:hover { color: #ed3237; }
.box-content-news .box-text-content-news .text-day { font-size: 14px; color: #9c9c9c; padding: 10px 0; }

.box-content-news-detail { padding-top: 40px; font-size: 16px; }
.box-content-news-detail img { width: 100%; height: auto; margin: 15px 0; }
.box-content-news-detail .title-big { font-size: 30px; font-weight: 900; margin-bottom: 10px; }

.pb40 { padding-bottom: 40px; }

.box-map { width: 100%; }
.box-map img { width: 100%; height: auto; }

.box-address-contact1 { background: #393637; margin-top: -80px; display: flex; flex-wrap: wrap; font-size: 16px; color: #fff; padding-top: 20px; padding-bottom: 20px; font-weight: 300; line-height: 30px; }
.box-address-contact1 .tt-address { font-weight: 900; padding-bottom: 10px; }

.box-form-contact1 { width: 100%; padding: 40px 70px; }
.box-form-contact1 .text-how-can { text-align: center; font-size: 16px; font-weight: 300; line-height: 30px; }
.box-form-contact1 .text-how-can .text-tt { font-size: 48px; display: block; font-weight: 900; padding: 10px 0 15px; }
.box-form-contact1 .form-contact { padding: 40px 0; display: flex; flex-wrap: wrap; }
.box-form-contact1 .form-contact .txt-text { width: 30%; margin: 10px 15px; border: 0; border-bottom: 1px solid #1d2124; height: 40px; outline: none; font-size: 18px; }
.box-form-contact1 .form-contact .txt-textra { width: 100%; margin: 10px 15px; border: 0; border-bottom: 1px solid #1d2124; height: 60px; outline: none; font-size: 18px; }
.box-form-contact1 .form-contact .bt-send-contact { width: 180px; font-weight: 700; font-size: 18px; border: 1px solid #1b1e21; text-align: center; color: #000; outline: none; text-transform: uppercase; background: #fff; padding: 10px; margin: 30px auto; cursor: pointer; }

@media (max-width: 767px) { .project-page-nav { background: transparent; }
  .project-page-nav .navbar-top li .nav-link { color: #fff; font-weight: 300; }
  .project-page-nav .navbar-top li .lagu-link { border: 1px solid #000; }
  .figure img { height: auto; max-height: 200px; }
  .banner-top-project { background: url("../images/bg-contact.jpg") no-repeat 0 0px; background-size: 100%; margin-top: 0; padding-right: 10px; }
  .box-tt-project { width: 60%; font-size: 30px; padding: 90px 0 0 10px; line-height: 30px; }
  .box-tt-project span { line-height: normal; font-size: 12px; }
  .box-breadcrumb { width: 40%; padding-top: 100px; font-size: 13px; }
  .nav-all-project { flex-wrap: wrap; padding: 15px 0; }
  .nav-all-project li { padding: 0 10px; font-size: 12px; }
  .nav-all-project li span { color: #ed3237; font-weight: 700; }
  .nav-all-project li a { color: #1b1e21; text-decoration: none; }
  .title-big-detail { font-size: 24px; }
  .box-banner-project-detail { display: flex; flex-wrap: wrap; background: #f2f2f2; width: 100%; margin-bottom: 25px; }
  .box-banner-project-detail .col-l { width: 100%; padding: 15px 30px; line-height: 30px; font-size: 16px; }
  .box-banner-project-detail .col-l .box-text-dd { width: 100%; padding: 5px 0; border-bottom: 1px solid #e3e3e3; display: flex; }
  .box-banner-project-detail .col-l .box-text-dd .col-l-dd { width: 40%; }
  .box-banner-project-detail .col-l .box-text-dd .col-r-dd { width: 100%; font-weight: 700; text-align: right; }
  .box-banner-project-detail .col-r { width: 100%; }
  .pic-about { padding: 15px 0; text-align: center; }
  .pic-about img { width: 100%; height: auto; }
  .box-text-about { padding: 20px 0 100px; }
  .box-tt-pro-other { padding: 20px 15px 0; }
  .box-tt-pro-other .c-tt { width: auto; font-size: 24px; }
  .box-tt-pro-other .c-control { width: auto; }
  .box-tt-pro-other .c-control a { font-size: 20px; }
  .block-pro-factory .pic-b { height: auto; }
  .box-content-news .box-pic { width: 100%; padding-right: 0; }
  .box-content-news .box-text-content-news { width: 100%; }
  .box-form-contact1 { padding: 20px 10px; }
  .box-form-contact1 .text-how-can .text-tt { font-size: 24px; padding: 10px 0 15px; }
  .box-form-contact1 .form-contact .txt-text { width: 100%; }
  .head-chair { margin: 15px 0; }
  .head-chair .icon-tt-chair { font-size: 20px; }
  .head-chair .text-tt { font-size: 18px; line-height: 25px; }
  .head-chair .box-sort { width: 140px; }
  .icon-nav-mb { width: 40px; height: 35px; border-radius: 5px; background: #f3f3f3; display: block; padding: 4px 8px; cursor: pointer; margin-top: 10px; }
  .icon-nav-mb span { display: block; width: 100%; height: 2px; background: #8e8f90; margin: 5px 0; }
  .nav-category-left-mb { margin-top: 45px; padding: 0 10px; position: absolute; width: 240px; height: 100vh; background: #fff; z-index: 100; top: 0px; left: 0px; transition: 0.3s; transform: translateX(-100%); overflow-y: scroll; }
  .nav-category-left-mb.open { transform: translateX(0%); right: 0; }
  .hs__item { max-width: none; }
  .hs__item1 { max-width: none; } }
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 979px) { .banner-top-project { height: 250px; background: url("../images/bg-contact.jpg") no-repeat 0 -590px; margin-top: 0px; }
  .box-tt-project { padding: 100px 0 0 10px; }
  .box-breadcrumb { padding-top: 120px; }
  .figure img { height: auto; }
  .figure .figure-caption { font-weight: 700; }
  .box-tt-pro-other { padding: 20px 15px 0; }
  .box-tt-pro-other .c-tt { width: 45%; font-size: 24px; }
  .box-tt-pro-other .c-control a { font-size: 20px; }
  .hs__wrapper { width: 100%; }
  .block-pro-factory .pic-b { height: auto; }
  .pic-about { padding: 25px 0 15px 0; text-align: center; }
  .pic-about img { width: 100%; height: auto; }
  .box-text-about { padding: 20px 0 100px; }
  .box-form-contact1 { padding: 20px 10px; }
  .box-form-contact1 .text-how-can .text-tt { font-size: 24px; padding: 10px 0 15px; }
  .box-form-contact1 .form-contact .txt-text { width: 100%; } }
@media (min-width: 980px) and (max-width: 1024px) { .banner-top-project { background: url("../images/bg-contact.jpg") no-repeat 0 -610px; }
  .hs__wrapper { width: 100%; }
  .block-pro-factory .pic-b { height: auto; }
  .box-form-contact1 { padding: 20px 10px; }
  .box-form-contact1 .text-how-can .text-tt { font-size: 24px; padding: 10px 0 15px; } }
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
@media (max-width: 767px) { .top-banner .box-all-slice { top: 40%; }
  .top-banner .box-all-slice .content-slice { width: 320px; font-size: 16px; line-height: 19px; }
  .navbar-dark { background: transparent; }
  .navbar-dark .navbar-toggler { border-color: transparent !important; }
  .bg-nav { background: #000000c4; }
  .body-container { overflow: hidden; margin: 0; padding: 0; }
  .mb-nav-top { position: absolute; width: 240px; height: 100vh; background: #000000db; z-index: 100; top: 0px; right: -100px; transition: 0.3s; transform: translateX(100%); }
  .mb-nav-top .bt-close { width: 35px; height: 35px; background: #000000db; color: #fff; position: absolute; top: 0; left: -35px; padding: 5px 10px; }
  .mb-nav-top .navbar-top { width: 220px; flex-direction: column; margin: 0; transition: 0.3s; }
  .mb-nav-top .navbar-top li .nav-link { color: #fff; }
  .mb-nav-top .navbar-top li .nav-link i { margin: 2px 0 0 3px; font-size: 15px; float: right; }
  .mb-nav-top .navbar-top li.nav-item { position: relative; }
  .mb-nav-top .navbar-top li.nav-item:hover .sub-nav { visibility: visible; opacity: 1; height: auto; }
  .mb-nav-top .navbar-top li.nav-item .sub-nav { margin: 0; padding: 0; background: transparent; position: relative; left: 0; top: 0; height: 0; }
  .mb-nav-top .navbar-top li.nav-item .sub-nav li { padding: 10px 0; margin: 0 17px; border-bottom: none; }
  .mb-nav-top .navbar-top li.nav-item .sub-nav li .sub-link { color: #fff; }
  .mb-nav-top .navbar-top li .lagu-link { border: 1px solid #fff; border-radius: 100%; height: 35px; width: 35px; padding: 6px; text-align: center; margin-left: 12px; }
  .mb-nav-top.in { transform: translateX(0); right: 0; }
  .box-smark-nav { width: 0; height: 0; position: absolute; top: 0; left: 0; z-index: 500; visibility: hidden; }
  .box-smark-nav.box-show { background: #1b1e21c4; width: 100%; height: 100%; visibility: visible; position: fixed; }
  .box-about { padding: 20px; background: #232a32; }
  .box-about .box-tt-mex { padding: 10px; }
  .box-about .box-text { padding-bottom: 20px; }
  .box-office .content-office { padding: 20px 0; }
  .box-office .content-office .info-office .carousel-control-prev { left: 20px; }
  .box-office .content-office .info-office .carousel-control-next { right: 20px; }
  .text-office { padding: 15px 0; }
  .text-office .tt-text { font-size: 28px; }
  .box-our-factory { background-size: 100% 100%; padding: 15px 0; }
  .box-our-factory .content-factory .factory-info { padding: 15px 0; margin: 5px auto; font-size: 17px; }
  .box-contact { background-size: 100% 100%; padding: 10px 0; }
  .box-contact .box-form-send { padding: 40px 20px 10px; }
  .box-contact .box-address-contact { padding: 10px 0; }
  .box-contact .box-address-contact .address-l { font-size: 12px; line-height: 20px; }
  .footer .footer-content { flex-wrap: wrap; padding: 20px 0; font-size: 12px; }
  .footer .footer-content .copyright { width: 100%; text-align: center; }
  .footer .footer-content .design-by { width: 100%; text-align: center; } }
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 979px) { .navbar-dark { background: transparent; }
  .navbar-dark .navbar-toggler { border-color: transparent !important; }
  .bg-nav { background: #000000c4; }
  .body-container { overflow: hidden; margin: 0; padding: 0; }
  .mb-nav-top { position: absolute; width: 240px; height: 100vh; background: #000000db; z-index: 100; top: 0px; right: -100px; transition: 0.3s; transform: translateX(100%); }
  .mb-nav-top .bt-close { width: 35px; height: 35px; background: #000000db; color: #fff; position: absolute; top: 0; left: -35px; padding: 5px 10px; }
  .mb-nav-top .navbar-top { flex-direction: column; margin: 0; transition: 0.3s; }
  .mb-nav-top .navbar-top li .nav-link { color: #fff; }
  .mb-nav-top .navbar-top li .nav-link i { margin: 2px 0 0 3px; font-size: 15px; float: right; }
  .mb-nav-top .navbar-top li.nav-item { position: relative; }
  .mb-nav-top .navbar-top li.nav-item:hover .sub-nav { visibility: visible; opacity: 1; height: auto; }
  .mb-nav-top .navbar-top li.nav-item .sub-nav { margin: 0; padding: 0; background: transparent; position: relative; left: 0; top: 0; height: 0; }
  .mb-nav-top .navbar-top li.nav-item .sub-nav li { padding: 10px 0; margin: 0 17px; border-bottom: none; }
  .mb-nav-top .navbar-top li.nav-item .sub-nav li .sub-link { color: #fff; }
  .mb-nav-top .navbar-top li .lagu-link { border: 1px solid #fff; border-radius: 100%; height: 35px; width: 35px; padding: 6px; text-align: center; margin-left: 12px; }
  .mb-nav-top.in { transform: translateX(0); right: 0; }
  .mb-nav-top.in .box-mask { display: block; }
  .box-smark-nav { width: 0; height: 0; position: absolute; top: 0; left: 0; z-index: 500; visibility: hidden; }
  .box-smark-nav.box-show { background: #1b1e21c4; width: 100%; height: 100%; visibility: visible; position: fixed; }
  .box-about .box-tt-mex { padding: 20px 0 10px 0; }
  .box-about .box-text { font-size: 14px; line-height: 20px; padding-bottom: 25px; }
  .box-office .content-office { padding: 150px 0 40px 0; }
  .box-office .content-office .info-office .carousel-control-prev { left: 0px; }
  .box-office .content-office .info-office .carousel-control-next { right: 0px; }
  .text-office .tt-text { font-size: 30px; }
  .box-our-factory { background-size: 100% 100%; padding: 30px 0; }
  .box-contact { background-size: 100% 100%; } }
@media (min-width: 980px) and (max-width: 1024px) { .mb-nav-top .bt-close { width: 35px; display: none; }
  .box-about .box-tt-mex { padding: 20px 0 10px 0; }
  .box-about .box-text { font-size: 14px; line-height: 20px; padding-bottom: 25px; }
  .box-office .content-office { padding: 150px 0 40px 0; }
  .box-office .content-office .info-office .carousel-control-prev { left: 0px; }
  .box-office .content-office .info-office .carousel-control-next { right: 0px; }
  .box-our-factory { background-size: 100% 100%; padding: 30px 0; }
  .box-contact { background-size: 100% 100%; } }

/*.gamma-single-view{z-index: 99999!important;}*/
/*.gamma-single-view img{left: 0!important; display: inline-block;width: 100%!important}*/
/*.gamma-buttons button{position: relative;z-index: 999999}*/
.box-our-factory{position: relative;z-index: 1}
.body-container .navbar-brand{padding-top: 0px}
/* Medium devices (desktops, 992px and up) */
/* Large devices (large desktops, 1200px and up) */

/*# sourceMappingURL=main.css.map */