/* Css Flash */
.swiper1{ width:100%; height:800px;}
.swiper1 .swiper-slide{ background-repeat:no-repeat; background-position:center; background-size:cover;}
.flash01{ background-image:url(../Images/flash01.jpg);}
.flash02{ background-image:url(../Images/flash02.jpg);}
.flash03{ background-image:url(../Images/flash03.jpg);}
.flash04{ background-image:url(../Images/flash04.jpg);}
.flash05{ background-image:url(../Images/flash05.jpg);}
@media screen and (max-width:1680px){.swiper1{ height:700px;}}
@media screen and (max-width:1440px){.swiper1{ height:600px;}}
@media screen and (max-width:1366px){.swiper1{ height:570px;}}
@media screen and (max-width:1280px){.swiper1{ height:535px;}}
@media screen and (max-width:1024px){ 
.swiper1{ height:500px;}
.flash01{ background-image:url(../Images/mobile01.jpg);}
.flash02{ background-image:url(../Images/mobile02.jpg);}
.flash03{ background-image:url(../Images/mobile03.jpg);}
.flash04{ background-image:url(../Images/mobile04.jpg);}
.flash05{ background-image:url(../Images/mobile05.jpg);}
}
@media screen and (max-width:800px){.swiper1{ height:400px;}}
@media screen and (max-width:640px){.swiper1{ height:320px;}}
@media screen and (max-width:480px){.swiper1{ height:240px;}}
@media screen and (max-width:414px){.swiper1{ height:210px;}}
@media screen and (max-width:375px){.swiper1{ height:190px;}}
@media screen and (max-width:320px){.swiper1{ height:175px;}}

/* Css About */
.ab-bg{ padding:100px 0 120px; background-color:#f9f9f9;}
.h4{ font-family:"Montserrat-Bold-3"; font-size:24px; color:#333; text-transform:uppercase; text-align:center; line-height:18px;}
.h2{ font-size:22px; font-weight:900; color:#333; text-align:center; margin-top:14px;}
.h5{ font-size:14px; font-weight:normal; color:#888; text-align:center; margin:14px 0 45px;}
.ab-bg p{ color:#666; text-align:center; line-height:30px; margin-top:41px;}
.ab-bg a{ display:block; width:100px; height:30px; line-height:28px; font-family:"Montserrat-Regular-8"; font-size:12px; color:#c0c0c0; text-align:center; border:1px solid #e8e8e8; margin:57px auto 0; -webkit-border-radius:15px; border-radius:15px; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ab-bg a:hover{ color:#fff; border-color:#db2b43; background-color:#db2b43;}
@media screen and (max-width:1440px){ 
.ab-bg{ padding:80px 0 100px;}
}
@media screen and (max-width:1024px){ 
.ab-bg{ padding:50px 0 60px;}
.h4{ font-size:20px; line-height:16px;}
.h2{ font-size:20px; margin-top:12px;}
.h5{ margin:14px 0 30px;}
.ab-bg p{ line-height:28px; margin-top:31px;}
.ab-bg a{ width:88px; height:28px; line-height:26px; margin-top:43px;}
}
@media screen and (max-width:800px){ 
.ab-bg{ padding:40px 0 50px;}
.ab-bg p{ margin-top:21px;}
.ab-bg a{ margin-top:33px;}
}
@media screen and (max-width:640px){ 
.ab-bg{ padding:30px 0 40px;}
.h4{ font-size:18px; line-height:14px;}
.h2{ font-size:16px; margin-top:8px;}
.h5{ font-size:12px; margin:5px 0 19px;}
.ab-bg p{ line-height:24px; margin-top:16px;}
.ab-bg a{ margin-top:30px;}
}
@media screen and (max-width:480px){ 
.ab-bg{ padding:25px 0 30px;}
}

/* Css Products */
.ps-bg{ padding:100px 0 120px; background-color:#fff;}
.ps-ls{ width:100%; height:600px; position:relative;}
.ps-lb{ width:100%; height:100%; border:1px solid #f0f0f0; border-bottom:none;}
.ps-lb a{ display:block; float:left; width:25%; height:300px; border-right:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; overflow:hidden; position:relative;}
.ps-lb a:nth-of-type(1), .ps-lb a:nth-of-type(2), .ps-lb a:nth-of-type(3){ height:299px;}
.ps-lb a:nth-of-type(3n){ margin-right:25%; border-right:none;}
.ps-lb a img{ width:82.8%; margin:-10px 8.6% 0;}
.ps-lb a .ps-bj{ position:absolute; left:0; top:0; z-index:10; width:100%; height:100%; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ps-lb a:hover .ps-bj{ -webkit-box-shadow:0px 0px 25px #f0f0f0 inset; box-shadow:0px 0px 25px #f0f0f0 inset;}
.ps-lb a .ps-tx{ position:absolute; left:0; bottom:22px; z-index:20; width:100%; color:#333; text-align:center; height:40px; line-height:20px; overflow:hidden;}
.ps-lb a .ps-tx span{ display:block; font-family:"Montserrat-Regular-8"; color:#db2b43;}
.ps-ig{ position:absolute; right:0; top:0; z-index:10; width:25%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover;}
.ps-ig a{ display:block; width:100%; height:100%;}
.ps-bg .ps-ls:nth-of-type(2){ margin-top:-1px;}
.ps-bg .ps-ls:nth-of-type(2) .ps-lb a:nth-of-type(3n){ margin-right:0; border-right:none;}
.ps-bg .ps-ls:nth-of-type(2) .ps-lb a:nth-of-type(3n+1){ margin-left:25%;}
.ps-bg .ps-ls:nth-of-type(2) .ps-ig{ right:inherit; left:0;}
@media screen and (max-width:1440px){ 
.ps-bg{ padding:80px 0 100px;}
}
@media screen and (max-width:1120px){ 
.ps-ls{ height:520px;}
.ps-lb a{ height:260px;}
.ps-lb a:nth-of-type(1), .ps-lb a:nth-of-type(2), .ps-lb a:nth-of-type(3){ height:259px;}
}
@media screen and (max-width:1024px){ 
.ps-bg{ padding:50px 0 60px;}
.ps-ls{ height:476px;}
.ps-lb a{ height:238px;}
.ps-lb a:nth-of-type(1), .ps-lb a:nth-of-type(2), .ps-lb a:nth-of-type(3){ height:237px;}
.ps-lb a .ps-tx{ bottom:17px;}
}
@media screen and (max-width:950px){ 
.ps-ls{ height:442px;}
.ps-lb a{ height:221px;}
.ps-lb a:nth-of-type(1), .ps-lb a:nth-of-type(2), .ps-lb a:nth-of-type(3){ height:220px;}
}
@media screen and (max-width:800px){ 
.ps-bg{ padding:40px 0 50px;}
.ps-ls{ height:auto;}
.ps-lb a{ width:33.333333%; height:245px;}
.ps-lb a:nth-of-type(1), .ps-lb a:nth-of-type(2), .ps-lb a:nth-of-type(3){ height:245px;}
.ps-lb a:nth-of-type(3n){ margin-right:0;}
.ps-ig{ display:none;}
.ps-bg .ps-ls:nth-of-type(2) .ps-lb{ border-bottom:none;}
.ps-bg .ps-ls:nth-of-type(2) .ps-lb a:nth-of-type(3n+1){ margin-left:0;}
}
@media screen and (max-width:720px){ 
.ps-lb a{ height:225px;}
.ps-lb a:nth-of-type(1), .ps-lb a:nth-of-type(2), .ps-lb a:nth-of-type(3){ height:225px;}
}
@media screen and (max-width:640px){ 
.ps-bg{ padding:30px 0 40px;}
.ps-lb a{ height:200px;}
.ps-lb a:nth-of-type(1), .ps-lb a:nth-of-type(2), .ps-lb a:nth-of-type(3){ height:200px;}
}
@media screen and (max-width:480px){ 
.ps-bg{ padding:25px 0 30px;}
.ps-lb a{ width:50%; height:225px;}
.ps-lb a:nth-of-type(3n){ border-right:1px solid #f0f0f0;}
.ps-lb a:nth-of-type(2n){ border-right:none;}
.ps-lb a:nth-of-type(1), .ps-lb a:nth-of-type(2), .ps-lb a:nth-of-type(3){ height:225px;}
.ps-lb a .ps-tx{ bottom:12px;}
.ps-bg .ps-ls:nth-of-type(2) .ps-lb a:nth-of-type(3){ border-right:1px solid #f0f0f0;}
}
@media screen and (max-width:414px){ 
.ps-lb a{ height:195px;}
.ps-lb a:nth-of-type(1), .ps-lb a:nth-of-type(2), .ps-lb a:nth-of-type(3){ height:195px;}
}
@media screen and (max-width:375px){ 
.ps-lb a{ height:175px;}
.ps-lb a:nth-of-type(1), .ps-lb a:nth-of-type(2), .ps-lb a:nth-of-type(3){ height:175px;}
}
@media screen and (max-width:320px){ 
.ps-lb a{ height:150px;}
.ps-lb a:nth-of-type(1), .ps-lb a:nth-of-type(2), .ps-lb a:nth-of-type(3){ height:150px;}
}

/* Css Class */
.fl-bg{ padding:100px 0; background: url(../Images/flBg.jpg) no-repeat center; background-size:cover;}
.swiper2{ width:100%; height:600px;}
.fl-ig{ display:block; width:37.5%; height:100%; margin-left:50%; padding-top:20%; background-repeat:no-repeat; background-position:center; background-size:cover;}
.fl-tx{ margin-left:-42%;}
.fl-tx h2{ font-family:"Montserrat-Regular-8"; font-size:30px; font-weight:normal; color:#db2b43;}
.fl-tx h3{ font-size:24px; font-weight:900; color:#333; margin-top:14px;}
.swiper-button-next,.swiper-button-prev{ top:auto; margin-top:0; width:50px; height:50px; border:1px solid #db2b43; background-image:url(../Images/jt01.png); background-position:center; background-repeat:no-repeat; background-size:12px 20px; -webkit-border-radius:50%; border-radius:50%; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.swiper-button-next:hover,.swiper-button-prev:hover{ background-color:#db2b43; background-image:url(../Images/jt02.png);}
.swiper-button-next{ bottom:39%; right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg);}
.swiper-button-prev{ top:39%; left:auto; right:0;}
.fl-bg .main{ position:relative;}
.fl-zb{ position:absolute; left:0; top:0; z-index:10; width:28%;}
.fl-zb .h4{ text-align:left;}
.fl-zb .h2{ text-align:left;}
.fl-zb .h5{ text-align:left;}
.fl-db{ position:absolute; left:0; bottom:0; z-index:20; width:305px; height:160px; background:url(../Images/flZb.png) no-repeat center; background-size:cover;}
@media screen and (max-width:1120px){ 
.swiper2{ height:520px;}
.swiper-button-next{ bottom:38%;}
.swiper-button-prev{ top:38%;}
.fl-db{ width:229px; height:120px; background-size:229px 120px;}
}
@media screen and (max-width:1024px){ 
.fl-bg{ padding:60px 0;}
.fl-tx h2{ font-size:24px;}
.fl-tx h3{ font-size:18px; margin-top:3px;}
.swiper2{ height:475px;}
.swiper-button-next,.swiper-button-prev{ width:40px; height:40px;}
.fl-db{ width:191px; height:100px; background-size:191px 100px;}
}
@media screen and (max-width:800px){ 
.fl-bg{ padding:50px 0;}
.swiper2{ height:500px;}
.fl-ig{ width:50%; margin-left:25%; padding-top:25%;}
.swiper-button-next,.swiper-button-prev{ width:30px; height:30px; background-size:6px 10px;}
.swiper-button-next{ bottom:41%; right:10px;}
.swiper-button-prev{ top:41%; right:10px;}
.fl-zb{ position:relative; width:100%;}
.fl-zb .h4{ text-align:center;}
.fl-zb .h2{ text-align:center;}
.fl-zb .h5{ text-align:center; padding:0 5%;}
.fl-db{ display:none;}
}
@media screen and (max-width:640px){ 
.fl-bg{ padding:40px 0;}
.swiper2{ height:400px;}
}
@media screen and (max-width:480px){ 
.fl-bg{ padding:30px 0;}
.swiper2{ height:350px;}
.fl-ig{ width:60%; margin-left:20%;}
.fl-tx{ margin-left:-30%;}
.swiper-button-next{ bottom:38%;}
.swiper-button-prev{ top:38%;}
}
@media screen and (max-width:414px){ 
.swiper2{ height:305px;}
.swiper-button-next{ bottom:36%;}
.swiper-button-prev{ top:36%;}
}
@media screen and (max-width:375px){ 
.swiper2{ height:280px;}
}
@media screen and (max-width:320px){ 
.swiper2{ height:240px;}
.swiper-button-next{ bottom:35%;}
.swiper-button-prev{ top:35%;}
}

/* Css News */
.ns-bg{ padding-top:100px; background-color:#fff;}
.ns-ls a{ display:block; float:left; width:33.333333%; height:600px; position:relative;}
.ns-by{ width:100%; height:100%; background-color:#fff; border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0;}
.ns-ls a:nth-of-type(1) .ns-by{ border-left:1px solid #f0f0f0;}
.ns-ls a:nth-of-type(3) .ns-by{ border-right:1px solid #f0f0f0;}
.ns-ig{ position:absolute; left:0; bottom:0; z-index:10; width:100%; height:300px; overflow:hidden;}
.ns-ls a:nth-of-type(2) .ns-ig{ top:0;}
.ns-ig dl{ width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ns-ls a:hover .ns-ig dl{ -webkit-transform:scale(1.05,1.05); transform:scale(1.05,1.05);}
.ns-tx{ position:absolute; left:0; top:0; z-index:20; width:100%; height:300px; padding:0 45px; display:flex; justify-content:center; flex-direction:column;}
.ns-ls a:nth-of-type(2) .ns-tx{ top:inherit; bottom:0;}
.ns-tx h2{ font-size:18px; color:#333; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ns-ls a:hover .ns-tx h2{ color:#db2b43;}
.ns-tx span{ font-family:"vi-logo-font-Gotham-Book"; font-size:12px; color:#a0a0a0; margin-top:4px;}
.ns-tx p{ color:#666; margin-top:13px;}
@media screen and (max-width:1440px){ 
.ns-bg{ padding-top:80px;}
}
@media screen and (max-width:1024px){ 
.ns-bg{ padding-top:50px;}
.ns-ls a{ height:480px;}
.ns-ig{ height:240px;}
.ns-tx{ height:240px; padding:0 25px;}
.ns-tx h2{ font-size:16px;}
.ns-tx span{ margin-top:0;}
.ns-tx p{ margin-top:8px;}
}
@media screen and (max-width:800px){ 
.ns-bg{ padding-top:40px;}
.ns-ls a{ height:450px;}
.ns-ig{ height:185px;}
.ns-tx{ height:265px; padding:0 20px;}
}
@media screen and (max-width:640px){ 
.ns-bg{ padding-top:30px;}
.ns-ls a{ width:100%; height:590px; margin-right:0; margin-top:25px;}
.ns-ls a:nth-of-type(1){ margin-top:0;}
.ns-by{ border-left:1px solid #f0f0f0; border-right:1px solid #f0f0f0;}
.ns-ig{ top:0; height:445px;}
.ns-tx{ top:inherit; bottom:0; height:145px;}
.ns-tx p{ height:48px;}
}
@media screen and (max-width:480px){ 
.ns-bg{ padding-top:25px;}
.ns-ls a{ height:500px; margin-top:20px;}
.ns-ig{ height:335px;}
.ns-tx{ height:165px;}
.ns-tx p{ height:72px;}
}
@media screen and (max-width:414px){ 
.ns-ls a{ height:455px;}
.ns-ig{ height:290px;}
}
@media screen and (max-width:375px){ 
.ns-ls a{ height:427px;}
.ns-ig{ height:262px;}
}
@media screen and (max-width:320px){ 
.ns-ls a{ height:389px;}
.ns-ig{ height:224px;}
}