body{color: var(--font-color); font-family: "Source Sans Pro",sans-serif;}
a{text-decoration:none; color: var(--default-light-color);}
a:hover{color: var(--default-low-color); border-color: var(--default-low-color); }
h1, h2, h3, h4, h5, h6{font-family: "Bitter",serif; margin: 0px; color: var(--default-light-color);}

.top-message{position:relative; top: 0px; left: 0px; padding: 10px 40px 10px 50px; background-color: #cc3300; color: #fff; z-index: 5; text-align:center;}
.top-message i{position:absolute; top: 5px; right: 5px; width: 20px; height: 20px; font-size: 20px; color: #bbb; cursor:pointer;}
.top-message i:hover{color: #fff;}
.top-message a{color:#fff; font-weight:bold;}
.top-message a:hover{color: var(--default-low-color);}
.top-message .new{position:absolute; top: 0px; left: 0px; width: 50px; height: 50px; background-image: url(../images/icon_new.gif); background-size:contain; background-position:center; background-repeat:no-repeat;}

.show-hide-top-message{position:absolute; top: 0px; left:auto; right: 0px; padding: 10px; background-color: #cc3300; color: #bbb; font-size: 20px; text-align:center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; cursor:pointer; z-index:9;}
.show-hide-top-message:hover{color: #fff;}
.show-hide-top-message > *{pointer-events:none;}

.menu-top{position:relative; top: 0px; left: 0px; width: 100%; height: 130px; font-family: "Bitter",serif; font-size: 0px;}
.menu-top .site-main-navigation{display:inline-block; width: calc(100% - 200px);}
.menu-top .site-main-navigation ul li a{padding: 20px !important; font-size: 20px !important; line-height: 20px;}
.menu-top .language-list{position:relative; top: 0px; left: 0px; width: 100%; height: 30px; text-align:right; white-space:nowrap; overflow:hidden;}
.menu-top .language-list select{position:relative; top: 0px; left: 0px; width:auto; height:100%; border: 0px; outline: 0px; color: var(--default-light-color); font-weight: bold; line-height: 20px; border-radius: 5px; background-color: transparent;}
.menu-top .language-list a{position:relative; top: 0px; left: 0px; width: auto; height: 20px; display:inline-block; vertical-align: top; margin: 5px 0px 5px 15px; white-space:nowrap;}
.menu-top .language-list a img{position:relative; top: 0px; left: 0px; width: auto; height:100%; display:inline-block; vertical-align: middle; margin-right: 5px;}
.menu-top .language-list a span{position:relative; top: 0px; left: 0px; width: auto; height:auto; display:inline-block; vertical-align: middle; font-size: 16px; line-height: 20px;}
.menu-top .logo{position:relative; top: 0px; left: 0px; width: 200px; height: 54px; display:inline-block; vertical-align: top; background: url(../images/logo-top.png) no-repeat; background-size:cover; float: right;}

.marketing-bar{position:relative; top: 0px; left: 0px; width: 100%; height: auto; background-color: var(--default-light-color); color: var(--font-light-color); font-family: "Bitter",serif;}
.marketing-bar a{position:relative; top: 0px; left: 0px; width: 20%; height: 100%; color: var(--font-light-color); display:inline-block; vertical-align: top; overflow:hidden; padding: 10px; text-align: center;}
.marketing-bar a:hover{color: var(--border-color);}
.marketing-bar a > *{position:relative; top: 0px; left: 0px; width:auto; height:auto; margin: 10px auto; pointer-events: none; display: block;}
.marketing-bar a > span:first-child{font-weight: bold; font-size: 18px;}
.marketing-bar a > span:last-child{font-weight: normal; font-style: italic;}

.slider .slide .next, .slider .slide .back{display:none;}
.slide .item-comment{position:absolute; top: 0px; left: 0px; bottom:auto; right:auto; width: 100%; height: 100%; border-top-left-radius: 0px; border-top-right-radius: 0px; background-color: transparent;}
.slide .item-comment:before{content: ''; position:absolute; top: 0px; left: 0px; width: 65%; height: 100%; background-color: rgba(0, 0, 0, 0.45);}

.slider .promotion{position:relative; top: 0px; left: 0px; width:auto; height: auto; padding: 40px; margin: 20px; border-radius: 10px; background-color: rgba(0, 0, 0, 0.45); display:inline-block; max-width: 60%;}
.slider .promotion h2{text-transform:uppercase; color: #ffb900; font-size: 28px; line-height: 40px; margin-bottom: 20px;}
.slider .promotion p{color: #fff; font-size: 18px; line-height: 28px;}
.slider .promotion .btn-contact{position:relative; top: 0px; left: 0px; width:auto; height:auto; padding: 5px 20px; background-color: #ffb900; color: #fff; border-radius: 5px;  margin: 10px 0px; text-transform:uppercase; display:inline-block;}
.slider .promotion .btn-hotline{font-size: 28px; color: #ffb900; line-height: 28px;}
.slider .promotion .btn-contact:hover{background-color: #faa11b;}
.slider .promotion .btn-hotline:hover{color: #faa11b;}

.slider .wrap{position:relative; top: 0px; left: 0px; width:auto; height: auto; padding: 40px; margin: 20px; border-radius: 10px; background-color: rgba(0, 0, 0, 0.45); display:inline-block; max-width: 60%;}
.slider .wrap h2{color: #ffb900; font-size: 28px; line-height: 40px; margin-bottom: 20px;}
.slider .wrap p{color: #fff; font-size: 18px; line-height: 28px;}

.site-main-navigation ul li ul li a{background-color: #F4F4F4; border-top: 2px solid var(--default-light-color);}

.home-product{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.home-product .header{position:relative; top: 0px; left: 0px; width: 65%; height:auto; margin: 50px auto;}
.home-product .header h2{font-size: 48px; line-height: 60px; margin-block: 24px;}
.home-product .header p{font-size: 20px; line-height: 28px; margin-top: 0px; margin-bottom: 24px;}
.home-product .product-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
/*.home-product .product-list a{position:relative; top: 0px; left: 0px; height: 450px; display:inline-block; vertical-align: top;  background: rgb(187,189,188);
                              background: linear-gradient(120deg, rgba(187,189,188,1) 0%, rgba(10,10,10,0) 90%); border: 1px solid rgb(187,189,188); padding: 5px; overflow:hidden;}
.home-product .product-list a:nth-child(1){width: calc(60% - 10px); margin-right: 10px; margin-bottom: 10px;}
.home-product .product-list a:nth-child(2){width: calc(40% - 10px); margin-left: 10px; margin-bottom: 10px;}
.home-product .product-list a:nth-child(3){width: calc(33% - 10px); margin-right: 10px; margin-top: 10px;}
.home-product .product-list a:nth-child(4){width: calc(34% - 20px); margin-left: 10px; margin-right: 10px; margin-top: 10px;}
.home-product .product-list a:nth-child(5){width: calc(33% - 10px); margin-left: 10px; margin-top: 10px;}
.home-product .product-list a img{width: 100%; height: 100%; object-fit:contain; vertical-align: top;}
.home-product .product-list a:hover:after{content: ''; position: absolute; top: auto; left: 0px; bottom: 0px; width: 100%; height: 100%; max-height: 100%; background-color: rgba(0,0,0,0.45); animation:slide-up .2s ease-in-out; -webkit-animation: slide-up .2s ease-in-out;
    -moz-animation: slide-up .2s ease-in-out; z-index: 1;}
.home-product  .product-list a .product-info{position:absolute; top:auto; left: 0px; bottom: 0px; width: 100%; height:auto; padding: 24px; display:none; z-index: 2; color: #fff;}
.home-product  .product-list a .product-info h2{color: #fff; font-size: 24px; line-height: 28px;}
.home-product .product-list a:hover .product-info{display:block; animation: fade-in .2s ease-in-out;}
.home-product .product-list a:hover img{filter:grayscale(1) opacity(0.5);}*/
.home-product .product-list a{position:relative; top: 0px; left: 0px; width: calc(33% - 20px); height:auto; display:inline-block; vertical-align: top; padding: 0px; margin: 10px; border: 1px solid var(--border-color); overflow:hidden; text-align: center;}
.home-product .product-list a img{object-fit:contain; max-height: calc(100% - 102px);}
.home-product .product-list a .product-info{position:absolute; top:auto; left: 0px; bottom: 0px; width: 100%; height:auto; max-height: 50%; background-color: #F4F4F4; padding: 5px; overflow: hidden;}
.home-product .product-list a .product-info h4{position:relative; top: 0px; left: 0px; width: 100%; height:auto; max-height: 72px; font-size: 16px; line-height: 24px; overflow: hidden;}
.home-product .product-list a .product-info p{position:relative; top: 0px; left: 0px; width: 100%; height: 60px; max-height: 60px; color: var(--default-light-color); text-align: center; margin-top: 0px; font-size: 16px; line-height: 20px; overflow: hidden; font-weight:300;}
.home-product .product-list a:hover .product-info{max-height: 100%; height: 100%; animation:full-height .2s ease-in-out; -webkit-animation: full-height .2s ease-in-out; -moz-animation: full-height .2s ease-in-out;}
.home-product .product-list a:hover .product-info p{max-height: 144px;}
.home-product .product-list a .more-info{position: absolute; top:auto; left: 25%; bottom: 20px; width: 50%; height:auto; font-family: "Source Sans Pro",sans-serif; padding: 5px; margin:auto; border: 2px solid var(--default-light-color); color: var(--default-light-color); text-align: center; font-size: 20px; display:none;}
.home-product .product-list a .more-info:hover{border-color: var(--default-low-color); color: var(--default-low-color);}
.home-product .product-list a:hover .more-info{display: inline-block; animation: fade-in .2s ease-in-out;}

.home-video{position:relative; top: 0px; left: 0px; width: 100%; height:auto; margin-top: 30px; padding-top: 40px; padding-bottom: 40px; background-color: #f1f1f1;}
.home-video .media-item{position:relative; top: 0px; left: 0px; width: calc(50% - 10px); height: 100px; display: inline-block; vertical-align: top; background-size: 100%; background-repeat:no-repeat; background-position:center; cursor:pointer;}
.home-video .media-item i{position: relative; color: #fff; opacity: 0.7; font-size: 40px; top: 50%; left: 50%; margin-left: -20px; margin-top: -20px;}
.home-video .media-item:hover i{color: #666;}
.home-video .media-item:nth-child(1){margin-right: 10px;}
.home-video .media-item:nth-child(2){margin-left: 10px;}

.overlay{position:fixed; top:0px; left:0px; right:0px; bottom:0px; width:auto; height:auto; background-color: transparent; background-repeat:no-repeat; background-size:cover;}

.popup{ position:absolute; top:100px; left:100px; width:auto; height:auto; max-width: 100%; max-height: 100%; background-color: #fff; border:0px solid var(--default-light-color); outline: 0px; box-shadow: var(--popup-shadow); border-radius: 10px; overflow:hidden; }

.popup .popup-header{position:absolute; top:0px; left:0px; right:0px; bottom:auto; width:auto; height:32px; padding:0px; margin:0px; background-color: var(--default-light-color);}
.popup .popup-header .popup-title{position:absolute; top:6px; left:0px; right:0px; width: 60%; height:20px; padding: 0px 5px; text-align:left; text-transform: capitalize; color: #fff; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.popup .popup-main{position:absolute; top:32px; left:0px; right:0px; bottom:0px; width:auto; height:auto; padding:0px; margin:0px; background-color: #fff; transform: unset;}

.control-box{position:absolute; top:0px; left:auto; right:0px; bottom:auto; width:auto; height: 31px; white-space:nowrap; z-index:4;}
.control-box .btn{position:relative; top:0px; left:0px; width: 46px; height: 100%; display:inline-block; overflow:hidden; background-color: transparent; background-repeat:no-repeat; background-size:cover; background-position:center center;}
.control-box .minimize-button{background-image:url(../images/minimize-window-normal.png);}
.control-box .minimize-button:hover{background-image:url(../images/minimize-window-light.png);}
.control-box .maximize-button{background-image:url(../images/max-window-normal.png);}
.control-box .maximize-button:hover{background-image:url(../images/max-window-light.png);}
.control-box .close-button{background-image:url(../images/close-window-normal.png);}
.control-box .close-button:focus{border: 0px; outline: 0px;}
.control-box .close-button:hover{background-image:url(../images/close-window-light.png);}

.products .header{position:relative; top: 0px; left: 0px; width: 65%; height:auto; padding: 0px; margin:40px auto;}
.products .header h2{font-size: 48px; line-height: 60px;}
.products .header p{font-size: 20px; line-height: 28px; margin: 40px 0px 0px 0px;}

.products .category-list{position:relative; top: 0px; left: 0px; width: 65%; height:auto; padding: 0px; margin: auto; display: block;}
.products .category-list a{position:relative; top: 0px; left: 0px; width: calc(33% - 20px); height:auto; padding: 10px; margin: 10px; display:inline-block; vertical-align: top; border: 2px solid var(--default-light-color); font-size: 20px;}
.products .category-list a:hover{color: var(--default-low-color); border-color: var(--default-low-color); }
.products .category-list a span{position:relative; top: 0px; left: 0px; width: calc(100% - 15px); height:auto; display:inline-block; vertical-align: middle; margin-right: 5px;}
.products .category-list a i{position:relative; top: 0px; left: 0px; display:inline-block; vertical-align: middle;}
.products .product-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 40px 0px; font-size: 0px;}
.products .product-list a{position:relative; top: 0px; left: 0px; width: calc(25% - 20px); height:auto; display:inline-block; vertical-align: top; padding: 0px; margin: 10px; border: 1px solid var(--border-color); overflow:hidden; text-align: center;}
.products .product-list a img{object-fit:contain; max-height: calc(100% - 74px);}
.products .product-list a .product-info{position:absolute; top:auto; left: 0px; bottom: 0px; width: 100%; height:auto; max-height: 50%; background-color: #F4F4F4; padding: 5px; overflow: hidden;}
.products .product-list a .product-info h4{position:relative; top: 0px; left: 0px; width: 100%; height:auto; max-height: 72px; font-size: 16px; line-height: 24px; overflow: hidden;}
.products .product-list a .product-info p{position:relative; top: 0px; left: 0px; width: 100%; height:auto; max-height: 60px; color: var(--default-light-color); text-align: center; margin-top: 0px; font-size: 16px; line-height: 20px; overflow: hidden; font-weight:300;}
.products .product-list a:hover .product-info{max-height: 100%; height: 100%; animation:full-height .2s ease-in-out; -webkit-animation: full-height .2s ease-in-out; -moz-animation: full-height .2s ease-in-out;}
.products .product-list a:hover .product-info p{max-height: 144px;}
.products .product-list a .more-info{position: absolute; top:auto; left: 25%; bottom: 20px; width: 50%; height:auto; font-family: "Source Sans Pro",sans-serif; padding: 5px; margin:auto; border: 2px solid var(--default-light-color); color: var(--default-light-color); text-align: center; font-size: 20px; display:none;}
.products .product-list a .more-info:hover{border-color: var(--default-low-color); color: var(--default-low-color);}
.products .product-list a:hover .more-info{display: inline-block; animation: fade-in .2s ease-in-out;}

.product-detail .product-img{position:absolute; top: 35px; left: 35px; bottom: 35px; right: auto; width: calc(30% - 35px); height: auto; padding: 0px; overflow: hidden;}
.product-detail .product-img img{border: 1px solid var(--border-color); max-height: 100%; border-radius: 10px;}
.product-detail .product-content{position:absolute; top: 35px; left: auto; bottom: 35px; right: 35px; width: calc(70% - 70px); height: auto; padding: 0px; border: 1px solid var(--border-color); border-radius: 10px; overflow:hidden;}
.product-detail .product-content .data{position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 20px; overflow-x:hidden; overflow-y:auto;}
.product-detail .product-content .data h4{font-size: 24px; line-height: 32px;}

.category-list{position:relative; top: 0px; left: 0px; width: 30%; height:auto; padding-right: 40px; display:inline-block; vertical-align: top;}
.category-list a{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 10px; margin-bottom: 20px; border: 2px solid var(--default-light-color); font-size: 20px; display: block;}
.category-list a:hover{color: var(--default-low-color); border-color: var(--default-low-color); }
.category-list a span{position:relative; top: 0px; left: 0px; width: calc(100% - 15px); height:auto; display:inline-block; vertical-align: middle; margin-right: 5px;}
.category-list a i{position:relative; top: 0px; left: 0px; display:inline-block; vertical-align: middle;}

.product-article-detail{padding-top: 40px; padding-bottom: 40px;}
.product-article-detail .product-content{position:relative; top: 0px; left: 0px; width: 70%; height:auto; padding-left: 0px; display:inline-block; vertical-align: top;}
.product-article-detail .product-content h1{font-size: 28px; line-height: 34px;}
.product-article-detail .product-content .description{font-style: italic; margin: 30px 0px;}

.article-detail{width: 75%; padding-top: 40px; padding-bottom: 40px;}
.article-detail h1{font-size: 48px; line-height: 60px;}

.about-us{padding-top: 40px; padding-bottom: 40px;}
.about-us .header{position: relative; top: 0px; left: 0px; width: 65%; height:auto; margin: 0px auto 40px auto;}
.about-us .header h2{font-size: 38px; line-height: 46px;}
.about-us .header p{font-size: 18px; line-height: 25px;}
.about-us .solution h2{text-align: center; margin-block: 20px;}
.about-us .solution .video-player{position:relative; top: 0px; left: 0px; width: calc(50% - 20px); height:auto; padding: 0px; margin: 0px 20px 0px 0px; display:inline-block; vertical-align: top; overflow:hidden;}
.about-us .solution .video-list{position:relative; top: 0px; left: 0px; width: calc(50% - 20px); height:auto; padding: 0px; margin: 0px 0px 0px 20px; display:inline-block; vertical-align: top; overflow:hidden;}
.about-us .solution .video-list .item{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 10px; margin: 0px; border-bottom: 1px solid var(--border-color); overflow: hidden; cursor: pointer;}
.about-us .solution .video-list .item:hover, .about-us .solution .video-list .item.selected{background-color: var(--border-color);}
.about-us .solution .video-list .item:active{content: ''; display: block; clear: both;}
.about-us .solution .video-list .item:last-child{border-bottom: 0px;}
.about-us .solution .video-list .item .avatar{position:relative; top: 0px; left: 0px; width: 100px; height: 100px; border-radius: 50%; background-color: var(--default-light-color); background-repeat: no-repeat; background-size: auto; background-position: center; display:inline-block; vertical-align: top; float: left;}
.about-us .solution .video-list .item .title{position:relative; top: 0px; left: 0px; width: calc(100% - 110px); height:auto; display:inline-block; vertical-align: top; font-weight: bold; margin: 0px 0px 10px 10px; float:right;}
.about-us .solution .video-list .item .description{position:relative; top: 0px; left: 0px; width: calc(100% - 110px); height:auto; display:inline-block; vertical-align: top; margin: 0px 0px 10px 0px; float:right;}
.about-us .solution .video-list .item:nth-child(1) .avatar{background-image: url(../images/90650370.png);}
.about-us .solution .video-list .item:nth-child(2) .avatar{background-image: url(../images/14496767.png);}
.about-us .solution .video-list .item:nth-child(3) .avatar{background-image: url(../images/45832413.png);}

.about-us .link{position:relative; top: 0px; width: 100%; height:auto; padding: 20px 10px; margin: 20px 0px; background-color: var(--border-color);}
.about-us .link a{position:relative; top: 0px; left: 0px; width: calc(33% - 20px); height: auto; margin: 0px 10px; display:inline-block; vertical-align: top; color: #000;}
.about-us .link a > *{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.about-us .link a img{height: auto; margin: 10px 0px; object-fit:contain; object-position: center center; background-color: #fff;}
.about-us .link a span:first-child{font-weight: bold;}
.about-us .go-to-contact{position:relative; top: 0px; left: 0px; width: 100%; padding: 20px 0px; text-align: center;}
.about-us .go-to-contact a{position:relative; top: 0px; left: 0px; width:auto; padding: 10px 20px; color: #fff; background-color: var(--default-light-color); border-radius: 20px;}
.about-us .go-to-contact a:hover{background-color: var(--default-low-color);}

.contact-us{position:relative; top: 0px; left: 0px; width: 100%; height:auto; font-size: 0px;}
.contact-us .banner{background-image: url(../images/contact-us.jpg);}
.contact-us .contact-us-content{padding-top: 40px; padding-bottom: 40px;}
.contact-us .contact-us-content .feedback{position:relative; top: 0px; left: 0px; width: calc(50% - 40px); height: auto; margin: 20px; display:inline-block; vertical-align: top; font-size: 16px;}
.contact-us .contact-us-content .contact-form button{border: 0px; color: #fff; background-color: var(--default-light-color); padding: 10px 20px; cursor:pointer; border-radius: 20px; font-size: 18px; line-height: 20px;}
.contact-us .contact-us-content .contact-form button:hover{background-color: var(--default-low-color);}
.contact-us .our-branch{position:relative; top: 0px; left: 0px; width: calc(50% - 40px); height:auto; margin: 20px; display:inline-block; vertical-align: top;}
.contact-us .our-branch .our-branch-map{position:relative; top: 0px; left: 0px; width: 100%; height: auto; border: 1px solid #ababab; margin: 20px 0px 0px 0px; padding: 0px;background: url(../images/our-brach-map.png) no-repeat; background-size:contain; background-position: top left;}
.contact-us h4{font-size: 18px; line-height: 24px;}
.contact-us .our-location{position:relative; top: 0px; left: 0px; width: calc(100% - 40px); height:auto; padding: 0px; margin: 20px;}
.contact-us .our-location .map{position:relative; top: 0px; left: 0px; width: 100%; height:450px; margin: 20px 0px 0px 0px;}

.map-embed{position:relative; top: 0px; left: 0px; width: 100%; height:auto; overflow: hidden;}

.banner{position:relative; top: 0px; left: 0px; width: 100%; height:auto; background-repeat:no-repeat; background-size: cover; overflow:hidden;}
.banner:after{content: ''; position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgb(146,144,0); filter:opacity(0.7); background: linear-gradient(125deg, rgba(146,144,0,1) 0%, rgba(0,0,0,0) 100%); z-index: 0}
.banner:before{content: ''; position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%); z-index: 0;}
.banner > *{z-index: 1;}
.banner .wrap{height: 100%;}
.banner h1{position:absolute; top: auto; left: 24px; bottom: 40px; width: auto; height:auto; padding: 20px; background-color: rgba(0,0,0,0.25); color: #fff; font-size: 26px; display:inline-block;}
.banner img{position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; display:inline-block; vertical-align: top; z-index: -1; pointer-events:none;}

/*.news-banner{background-image: url(../images/tin-tuc-bg.png);}*/
.article-container{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding-top: 40px; padding-bottom: 40px;}
.article-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.article-list a{position:relative; top: 0px; left: 0px; width: calc(33% - 20px); height:auto; margin: 0px 10px 20px 10px; padding: 10px; border: 1px solid var(--border-color); display:inline-block; vertical-align: top;}
.article-list a img{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:inline-block; vertical-align: top; margin-bottom: 20px; object-fit:contain; object-position: top center;}
.article-list a h2{position:relative; top: 0px; left: 0px; width: 100%; height: 48px; font-size: 20px; line-height: 24px; overflow:hidden;}
.article-list a p, .article-list a .publish-date, .article-list a button {display:none;}
.article-list.has-relate-category{position:relative; top: 0px; left: 0px; width: 70%; height:auto; padding-left: 0px; display:inline-block; vertical-align: top;}

.article-details{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.article-details h1{font-size: 32px; line-height: 36px;}
.article-details .publish-date{display:none;}
.article-details .description{font-style: italic;}
.article-details .relate-news{position:relative; top: 0px; left: 0px; width: 100%; height:auto; margin-top: 20px;}
.article-details .relate-news .title{position:relative; top: 0px; left: 0px; padding-top: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); font-weight: bold; font-size: 24px;}
.article-details .relate-news a{position:relative; top: 0px; left: 0px; width: 100%; height:auto; margin-bottom: 20px; font-size: 0px; display: block;}
.article-details .relate-news a:after{content: ''; display: block; clear: both;}
.article-details .relate-news a img{position:relative; top: 0px; left: 0px; width: 200px; border: 1px solid var(--border-color); display:inline-block; vertical-align: top; margin-right: 10px; object-fit: cover; object-position: center; float: left;}
.article-details .relate-news a .publish-date{display:none;}
.article-details .relate-news a h4{position:relative; top: 0px; left: 0px; width: calc(100% - 210px); height:auto; display:inline-block; vertical-align: top; font-size: 16px;}
.article-details .relate-news a p{position:relative; top: 0px; left: 0px; width: calc(100% - 210px); height:auto; display:inline-block; vertical-align: top; font-size: 16px; color: #000;}
.article-details.has-relate-category{position:relative; top: 0px; left: 0px; width: 70%; height:auto; padding-left: 0px; display:inline-block; vertical-align: top;}

.tool-tip{position:fixed; top: 0px; left: 0px; width:auto; height:auto; padding: 3px 10px; text-align:center; border-radius: 5px; background-color: rgba(0, 0, 0, 0.7); color: #fff; display:none;}
.tool-tip:before{content: ''; position:absolute; top: 100%; left: calc(50% - 4px); width: 8px; height: 8px; border: 4px solid rgba(0,0,0,0.7); border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent;}
.tool-tip.tool-tip-left:before{top: calc(50% - 4px); left: 100%; border-left-color: rgba(0,0,0,0.7); border-top-color: transparent; border-right-color: transparent; border-top-color: transparent;}
.tool-tip.tool-tip-right:before{top: calc(50% - 4px); left: -8px; border-left-color: transparent; border-top-color: transparent; border-right-color: rgba(0,0,0,0.7); border-top-color: transparent;}

.pager{margin: 20px 0px;}

.footer{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 12px 0px; background-color: var(--border-color); color: var(--footer-font-color); font-size: 16px; line-height: 22px;}
.footer .address{position:relative; top: 0px; left: 0px; width: calc(100% - 160px); display: inline-block; vertical-align: top;}
.footer .address strong{color: #000;}
.footer .logo{position:relative; top: 0px; left: 0px; width: 160px; height:auto; display:inline-block; vertical-align: top; float: right;}
.footer .logo img{position:relative; top: 0px; left: 0px; width: 100%; height:auto; vertical-align: top;}
.footer .footer-addon{padding-top: 12px; padding-bottom: 12px; border-top: 1px solid rgba(116,116,116,0.7); text-align: right;}

.free-trial{position:fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 999; width: 100%; height: 100%; background-color: rgba(0,0,0,0.25);}
.free-trial .content{position:absolute; top: 50%; left: 50%; width: 400px; height: 450px; max-width: 100%; max-height: 100%; transform:translate(-50%, -50%); text-align:center; padding: 60px 0px; background-image:url(../images/trail-bg.png); background-repeat:no-repeat; background-size:contain; background-position:center;
                     filter: drop-shadow(0 4px 15px rgba(0,0,0,.5));
}
.free-trial .content i{position:absolute; top: 0px; left: auto; right: 0px; font-size: 24px; cursor:pointer; color: #999;}
.free-trial .content i:hover{color: #fff;}

@media only screen and (max-width: 768px){
    body{padding-top: 0px;}
    .site-main-navigation{position:relative; height:auto;}
    .site-main-navigation .mobile-nav-control{position:relative; border-bottom: 0px; box-shadow: none; height:auto;}
    .site-main-navigation .mobile-nav-control i{margin-top: 12px; color: var(--default-low-color);}
    .marketing-bar{height:auto; overflow:auto; padding: 10px 0px;}
    .marketing-bar a{width: 100%; padding: 0px 0px 5px  0px; margin: 10px 0px; text-align: left; border-bottom: 2px solid var(--font-light-color);}
    .marketing-bar a > *{margin: 0px;}
    .marketing-bar a i{display:none;}

    .slider .wrap{display:none;}

    .footer .logo{float:none; margin-bottom: 10px; width: 100%; text-align: right;}
    .footer .logo img{display:inline-block; width: 160px;}
    .footer .address{width: 100%; text-align: right;}
    .footer .address p{text-align:right;}

    .popup{top: 0px; left: 0px; width: 100%; height: 100%; border-radius: 0px; border-width: 0px; box-shadow: none;}
    .control-box .maximize-button{display:none;}
    .product-detail .product-img{top: 0px; left: 0px; width: 100%; height: 285px; padding: 35px 20px 0px 20px;}
    .product-detail .product-img img{border: 0px; width: 100%; object-fit:contain; border-radius: 0px;}
    .product-detail .product-content{top: 295px; left: 0px; bottom: 0px; right: 0px; width: 100%; height:auto; border-radius: 0px; border-left: 0px; border-right: 0px; border-bottom: 0px;}

    .article-detail{width: 100%;}

    .about-us .link a{width: 100%; margin: 10px 0px;}
    .about-us .link a img{height:auto !important;}

    .contact-us .wrap .map{width: 100%; margin-left: 0px; margin-right: 0px;}
    .contact-us .wrap .feedback{width: 100%; margin-left: 0px; margin-right: 0px;}
    .contact-us .wrap .contact-form .col-md-5, .contact-us .wrap .contact-form .col-md-6, .contact-us .wrap .contact-form .col-md-4,
    .contact-us .wrap .contact-form .col-md-10{padding-left: 0px; padding-right: 0px;}

    .contact-us .our-branch{width: 100%; margin: 0px;}
    .contact-us .our-location{width: 100%; margin: 0px;}

    .article-container .category-list{display:none;}
    .article-container .article-list.has-relate-category{width: 100%;}

    .menu-top{height:auto; padding-bottom: 20px;}
    .site-main-navigation > ul{position:relative; top: 0px; left: 0px; width:100vw; height:auto; margin: 20px -24px 0px; background-color: #fff;}
    .site-main-navigation ul li > ul{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
    .site-main-navigation ul li a i{position:relative; top: 0px; left: 0px; width: 30px; height: 30px; font-size: 30px; margin-left: 0px; margin-right: 0px; text-align: right; display: inline-block; vertical-align:middle;}
    .site-main-navigation ul li a span{position:relative; top: 0px; left: 0px; width: calc(100% - 30px); height:auto; display:inline-block; vertical-align:middle;}
}

@media only screen and (min-width: 1025px) {
    .slider{height: 700px;}
    .slide .slide-item-list img{height: 700px;}
    .slide .item-comment h2{font-size: 48px; line-height: 60px; color: #fff; text-align: left; width: 65%; padding: 20px;}
    .slide .item-comment p{font-size: 18px; line-height: 28px; margin-left: 90px; margin-top: 40px; width: calc(65% - 100px);}
}

@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .slider{height: 360px;}
    .slide .slide-item-list img{height: 360px;}
    .slide .item-comment{position:relative; width: 100%; height:auto; padding: 24px 0px;}
    .slide .item-comment:before{width: 100%;}
    .slide .item-comment h2{position:relative; font-size: 36px; line-height: 44px; color: #fff; text-align: left; width: 100%;}
    .slide .item-comment p{font-size: 16px; line-height: 25px; width: 100%;}
    .slider .wrap p{line-height: 22px;}
    .slider .wrap h2{line-height: 32px; font-size: 24px;}
    .slider .wrap{padding: 20px;}
    .home-product .header{width: 100%;}
    .home-product .header h2{font-size: 38px; line-height: 46px;}
    .home-product .header p{font-size: 18px; line-height: 25px;}
    .home-product .product-list a{width: calc(50% - 20px);}
    .home-product .product-list a .product-info p{height: 60px;}

    .products .header{width: 100%;}
    .products .header h2{font-size: 38px; line-height: 46px;}
    .products .header p{font-size: 18px; line-height: 25px;}
    .products .category-list{width: 100%; font-size: 0px;}
    .products .category-list a{width: calc(50% - 20px); margin: 10px;}

    .products .product-list a{width: calc(33% - 20px); margin: 10px;}

    .product-article-detail .category-list{display:none;}
    .product-article-detail .product-content{width: 100%;}

    .article-detail h1{font-size: 38px; line-height: 46px;}

    .about-us .header{width: 100%;}
    .about-us .header h2{font-size: 38px; line-height: 46px;}
    .about-us .header p{font-size: 18px; line-height: 25px;}
    .about-us .solution .video-player{width: 100%; margin-right: 0px;}
    .about-us .solution .video-list{width: 100%; margin-left: 0px; margin-top: 20px;}

    .contact-us .our-branch{width: 100%; margin: 0px;}
    .contact-us .our-location{width: 100%; margin: 0px;}
    .contact-us .contact-us-content .feedback{width: 100%; margin-left: 0px; margin-right: 0px;}

    .article-container .category-list{display:none;}
    .article-container .article-list.has-relate-category{width: 100%;}
    .article-container .article-details.has-relate-category{width: 100%;}
}

@media only screen and (max-width: 600px) {
    .slider{height: 220px;}
    .slide .slide-item-list img{height: 220px;}
    .slide .item-comment{position:relative; width: 100%; height:auto; padding: 24px 0px;}
    .slide .item-comment:before{width: 100%;}
    .slide .item-comment h2{position:relative; font-size: 24px; line-height: 32px; color: #fff; text-align: left; width: 100%;}
    .slide .item-comment p{font-size: 16px; line-height: 25px; margin-left: 0px; width: 100%}
    .home-product .header{width: 100%;}
    .home-product .header h2{font-size: 28px; line-height: 34px;}
    .home-product .header p{font-size: 18px; line-height: 25px;}
    .home-product .product-list a img{object-position: top;}
    .home-product .product-list a{width: 100%; margin-left: 0px; margin-right: 0px;}
    .home-product .product-list a .product-info p{height: 60px;}

    .home-video .media-item:nth-child(1){width: 100%; margin-right: 0px; margin-bottom: 20px;}
    .home-video .media-item:nth-child(2){width: 100%; margin-left: 0px; margin-block: 20px;}

    .products .header{width: 100%;}
    .products .header h2{font-size: 28px; line-height: 34px;}
    .products .header p{font-size: 18px; line-height: 25px;}
    .products .category-list{width: 100%;}
    .products .category-list a{width: 100%; margin: 10px 0px;}

    .products .product-list a{width: 100%; margin: 10px 0px;}

    .product-article-detail .category-list{display:none;}
    .product-article-detail .product-content{width: 100%;}

    .article-detail h1{font-size: 28px; line-height: 34px;}

    .about-us .header{width: 100%;}
    .about-us .header h2{font-size: 28px; line-height: 34px;}
    .about-us .header p{font-size: 18px; line-height: 25px;}
    .about-us .solution .video-player{width: 100%; margin-right: 0px;}
    .about-us .solution .video-list{width: 100%; margin-left: 0px; margin-top: 20px;}

    .banner{display:none;}
    .article-container .article-list a{width: 100%; margin-left: 0px; margin-right: 0px;}
    .article-container .article-details.has-relate-category{width: 100%;}

    .article-details .relate-news a{padding-bottom: 10px; border-bottom: 1px solid var(--border-color);}
    .article-details .relate-news a img{width: 100%; margin-bottom: 10px;}
    .article-details .relate-news a h4{width: 100%;}
    .article-details .relate-news a p{display:none;}
}

@media only screen and (min-width: 769px) {
    
}

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

@-webkit-keyframes slide-up {
      0% { opacity: 0; -webkit-transform: translateY(100%); }   
    100% { opacity: 1; -webkit-transform: translateY(0); }
}

@-webkit-keyframes full-height {
      0% { -webkit-transform: translateY(100%);}   
    100% { -webkit-transform: translateY(0); }
}

@-webkit-keyframes fade-in {
      0% { opacity: 0; }   
    100% { opacity: 1; }
}