/* Css Class */
.cl-bg{ padding:85px 2.5%;}
.cl-bg ul li{ float:left; width:15%; margin-right:2%; height:425px; background-position:center; background-repeat:no-repeat; background-size:cover; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
.cl-bg ul li:nth-of-type(6){ margin-right:0;}
.cl-bg ul li a{ display:block; width:100%; height:425px; position:relative;}
.cl-bg ul li a span{ display:block; position:absolute; bottom:0; left:0; width:100%; height:60px; line-height:40px; font-size:15px; color:#505050; text-align:center; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}

.cl-bg ul li dl{ width:150px; margin:auto; padding-top:110px; overflow:hidden; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
.cl-bg ul li dl h2{ font-family:"MyriadPro-Cond"; font-size:48px; line-height:48px; color:#fff; text-transform:uppercase; font-weight:normal;}
.cl-bg ul li dl h3{ font-family:"MyriadPro-Cond"; font-size:38px; line-height:38px; color:#fff; text-transform:uppercase; font-weight:normal;}
.cl-bg ul li dl h4{ font-size:18px; line-height:30px; color:#fff;}
.cl-bg ul li dl h5{ width:80px; height:30px; line-height:30px; text-align:center; background-color:#fff; color:#094098; font-size:15px; margin-top:10px;  border-radius:15px; -webkit-border-radius:15px; opacity:0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}

.cl-bg ul li:hover{ background-position:center -20px;}
.cl-bg ul li:hover a span{ background:#fff; line-height:60px; font-weight:600;}
.cl-bg ul li:hover dl{ padding-top:80px;}
.cl-bg ul li:hover dl h5{ opacity:1; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=1)";}

@media screen and (max-width:1440px){ 
.cl-bg{ padding:65px 2.5%;}
.cl-bg ul li{ height:320px;}
.cl-bg ul li a{ height:320px;}
.cl-bg ul li a span{ height:48px; line-height:32px;}

.cl-bg ul li dl{ width:120px; padding-top:77px;}
.cl-bg ul li dl h2{ font-size:38px; line-height:38px;}
.cl-bg ul li dl h3{ font-size:30px; line-height:30px;}

.cl-bg ul li:hover a span{ line-height:48px;}
.cl-bg ul li:hover dl{ padding-top:50px;}
}

@media screen and (max-width:1024px){ 
.cl-bg{ padding:45px 2.5% 20px;}
.cl-bg ul li{ width:31.2%; margin-right:3.2%; height:425px; margin-bottom:25px;}
.cl-bg ul li:nth-of-type(3n+0){ margin-right:0;}
.cl-bg ul li a{ height:425px;}
.cl-bg ul li a span{ height:60px; line-height:40px;}

.cl-bg ul li dl{ width:150px; padding-top:110px;}
.cl-bg ul li dl h2{ font-size:48px; line-height:48px;}
.cl-bg ul li dl h3{ font-size:38px; line-height:38px;}

.cl-bg ul li:hover{ background-position:center -30px;}
.cl-bg ul li:hover a span{ line-height:60px;}
.cl-bg ul li:hover dl{ padding-top:80px;}
}

@media screen and (max-width:800px){ 
.cl-bg ul li{ height:320px;}
.cl-bg ul li a{ height:320px;}
.cl-bg ul li a span{ height:48px; line-height:32px;}

.cl-bg ul li dl{ width:120px; padding-top:77px;}
.cl-bg ul li dl h2{ font-size:38px; line-height:38px;}
.cl-bg ul li dl h3{ font-size:30px; line-height:30px;}

.cl-bg ul li:hover a span{ line-height:48px;}
.cl-bg ul li:hover dl{ padding-top:50px;}
}

@media screen and (max-width:480px){ 
.cl-bg{ padding:25px 2.5% 10px;}
.cl-bg ul li{ width:48.5%; margin-right:3%; height:275px; margin-bottom:15px;}
.cl-bg ul li:nth-of-type(3n+0){ margin-right:3%;}
.cl-bg ul li:nth-of-type(2n+0){ margin-right:0;}
.cl-bg ul li a{ height:275px;}
.cl-bg ul li a span{ height:40px; line-height:30px; font-size:14px;}

.cl-bg ul li dl{ width:120px; padding-top:53px;}
.cl-bg ul li dl h2{ font-size:38px; line-height:38px;}
.cl-bg ul li dl h3{ font-size:30px; line-height:30px;}

.cl-bg ul li:hover{ background-position:center -30px;}
.cl-bg ul li:hover a span{ line-height:40px;}
.cl-bg ul li:hover dl{ padding-top:30px;}
}

@media screen and (max-width:414px){ 
.cl-bg ul li:hover{ background-position:center -20px;}
}

/* Css Apply */
.al-bg{ background:url(../Images/index_31.png) no-repeat top center; background-size:cover; padding:85px 0;}
.al-bg dl{ font-size:16px; color:#888; text-align:center;}
.al-bg dl h1{ font-size:32px; color:#094098; margin-bottom:12px; line-height:30px;}
.al-bg ul{ padding-top:48px;}
.al-bg ul li{ float:left; width:19.6%; margin-right:0.5%; margin-bottom:10px;}
.al-bg ul li:nth-of-type(5n){ margin-right:0;}
.al-bg ul li a div{ width:100%; overflow:hidden; position:relative;}
.al-bg ul li a div img{ width:100%; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
.al-bg ul li a:hover div img{ -transform:scale(1.08,1.08); -webkit-transform:scale(1.08,1.08);}
.al-bg ul li a span{ display:block; font-size:15px; text-align:center; line-height:30px; padding:10px 0; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
.al-bg ul li a:hover span{ background-color:#094098; color:#fff}
.al-bg .al-all{ width:180px; height:50px; margin:auto;}
.al-bg .al-all a{ display:block; width:180px; height:50px; line-height:50px; margin-top:20px; background-color:#094098; text-align:center; font-family:"vi-logo-font-Gotham-Book"; color:#fff; border-radius:25px; -webkit-border-radius:25px;}
.al-bg .al-all a:hover{ background-color:#0c5fe3;}

@media screen and (max-width:1440px){ 
.al-bg{ padding:65px 0;}
}

@media screen and (max-width:1024px){ 
.al-bg{ padding:45px 0;}
.al-bg dl{ font-size:15px;}
.al-bg dl h1{ font-size:30px; margin-bottom:10px;}
.al-bg ul{ padding-top:28px;}
.al-bg ul li{ width:32.3%; margin-right:1.55%; margin-bottom:10px;}
.al-bg ul li:nth-of-type(5n){ margin-right:1.55%;}
.al-bg ul li:nth-of-type(3n+0){ margin-right:0;}
.al-bg ul li:nth-of-type(10){ display:none;}
.al-bg .al-all a{ margin-top:10px;}
}

@media screen and (max-width:480px){ 
.al-bg{ padding:35px 0;}
.al-bg dl{ font-size:14px;}
.al-bg dl h1{ font-size:24px; margin-bottom:5px;}
.al-bg ul{ padding-top:20px;}
.al-bg ul li{ width:48.5%; margin-right:3%; margin-bottom:10px;}
.al-bg ul li:nth-of-type(5n){ margin-right:3%;}
.al-bg ul li:nth-of-type(3n+0){ margin-right:3%;}
.al-bg ul li:nth-of-type(10){ display:block;}
.al-bg ul li:nth-of-type(2n+0){ margin-right:0;}
.al-bg ul li a span{ font-size:14px; padding:5px 0;}
.al-bg .al-all{ width:120px; height:40px;}
.al-bg .al-all a{ width:120px; height:38px; line-height:38px; border-radius:19px; -webkit-border-radius:19px;}
}

/* Css Products */
.ig-bg{ padding:85px 2.5%;}
.ig-bg dl{ font-size:16px; color:#888; text-align:center;}
.ig-bg dl h1{ font-size:32px; color:#094098; margin-bottom:12px; line-height:30px;}
.ig-bg ul{ padding-top:48px;}
.ig-bg ul li{ float:left; width:23.5%; margin-right:2%; height:260px; margin-bottom:40px; background-color:#fff; overflow:hidden; box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.05); transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
.ig-bg ul li:nth-of-type(4n){ margin-right:0;}
.ig-bg ul li:nth-of-type(9){ display:none;}
.ig-bg ul li a{ display:block; width:100%; height:100%; color:#666; line-height:24px; padding-right:20px;}
.ig-bg ul li a .ig-gg{ float:left; width:176px; height:260px; overflow:hidden; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
.ig-bg ul li a .ig-gg img{ width:176px; height:260px; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
.ig-bg ul li:hover a .ig-gg img{ -transform:scale(1.08,1.08); -webkit-transform:scale(1.08,1.08);}
.ig-bg ul li a h3{ font-size:18px; margin-bottom:15px; padding-top:45px; color:#333; font-weight:normal;}
.ig-bg ul li a h3 font{ font-family:"vi-logo-font-Gotham-Book"; color:#094098; font-weight:600;}

.ig-bg ul li:hover{ box-shadow:0 0 8px 4px rgba(0, 0, 0, 0.12); -webkit-box-shadow:0 0 8px 4px rgba(0, 0, 0, 0.12);}
.ig-bg ul li:hover a{ background-color:#094098; color:#fff;}
.ig-bg ul li:hover a .ig-gg{ margin-right:20px;}
.ig-bg ul li:hover a h3{ color:#fff;}
.ig-bg ul li:hover a h3 font{ color:#fff;}

.ig-bg .ig-all{ width:180px; height:50px; margin:auto;}
.ig-bg .ig-all a{ display:block; width:180px; height:50px; line-height:50px; margin-top:10px; background-color:#094098; text-align:center; font-family:"vi-logo-font-Gotham-Book"; color:#fff; border-radius:25px; -webkit-border-radius:25px;}
.ig-bg .ig-all a:hover{ background-color:#0c5fe3;}

@media screen and (max-width:1440px){ 
.ig-bg{ padding:65px 2.5%;}
.ig-bg ul li{ width:31.3%; margin-right:3.05%; margin-bottom:40px;}
.ig-bg ul li:nth-of-type(4n){ margin-right:3.05%;}
.ig-bg ul li:nth-of-type(9){ display:block;}
.ig-bg ul li:nth-of-type(3n+0){ margin-right:0;}
}

@media screen and (max-width:1280px){ 
.ig-bg ul li a{ line-height:22px;}
.ig-bg ul li a h3{ margin-bottom:10px; padding-top:30px;}
}

@media screen and (max-width:1024px){ 
.ig-bg{ padding:45px 2.5%;}
.ig-bg dl{ font-size:15px;}
.ig-bg dl h1{ font-size:30px; margin-bottom:10px;}
.ig-bg ul{ padding-top:28px;}
.ig-bg ul li{ width:48.5%; margin-right:3%; margin-bottom:25px;}
.ig-bg ul li:nth-of-type(4n){ margin-right:3%;}
.ig-bg ul li:nth-of-type(9){ display:none;}
.ig-bg ul li:nth-of-type(3n+0){ margin-right:3%;}
.ig-bg ul li:nth-of-type(2n+0){ margin-right:0;}
.ig-bg ul li a{ line-height:24px;}
.ig-bg ul li a h3{ margin-bottom:15px; padding-top:45px;}
}

@media screen and (max-width:800px){ 
.ig-bg ul li a{ line-height:22px;}
.ig-bg ul li a h3{ font-size:16px; margin-bottom:10px; padding-top:30px;}
}

@media screen and (max-width:640px){ 
.ig-bg ul li{ width:100%; margin-right:0;}
.ig-bg ul li:nth-of-type(4n){ margin-right:0;}
.ig-bg ul li:nth-of-type(3n+0){ margin-right:0;}
.ig-bg ul li a{ line-height:24px;}
.ig-bg ul li a h3{ font-size:18px; margin-bottom:15px; padding-top:45px;}
}

@media screen and (max-width:480px){ 
.ig-bg{ padding:25px 2.5%;}
.ig-bg dl{ font-size:14px; padding:0 45px;}
.ig-bg dl h1{ font-size:24px; margin-bottom:5px;}
.ig-bg ul{ padding-top:20px;}
.ig-bg ul li{ width:48.5%; margin-right:3%; height:auto; margin-bottom:10px; background:none; box-shadow:0 0 0 0; -webkit-box-shadow:0 0 0 0;}
.ig-bg ul li:nth-of-type(3n+0){ margin-right:3%;}
.ig-bg ul li:nth-of-type(2n+0){ margin-right:0;}
.ig-bg ul li a{ padding-right:0;}
.ig-bg ul li a .ig-gg{ float:inherit; width:100%; height:auto;}
.ig-bg ul li a .ig-gg img{ width:100%; height:auto;}
.ig-bg ul li a h3{ font-size:14px; margin-bottom:0; padding:5px 0; text-align:center;}
.ig-bg ul li a p{ display:none;}
.ig-bg .ig-all{ width:120px; height:40px;}
.ig-bg .ig-all a{ width:120px; height:38px; line-height:38px; border-radius:19px; -webkit-border-radius:19px;}
}

/* Css About */
.ab-bg{ width:100%; background:#094098;}
.ab-tx, .ab-ig{ float:left; width:50%; height:600px; overflow:hidden;}
.ab-tx-db{ height:420px; margin-left:5%;}
.ab-tx-nm h3{ padding-top:93px; font-size:30px; color:#fff; font-weight:normal;}
.ab-tx-nm h4{ margin:4px 0 64px; font-size:20px; color:#fff; font-weight:normal;}
.ab-tx-db dl{ width:78%; line-height:30px; color:#e3e3e3; text-align:justify; text-justify:in-word;}
.ab-tb{ height:180px; border-top:solid 1px #2757a5; overflow:hidden;}
.ab-tb li{ float:left; width:25%; height:180px; border-left:solid 1px #2757a5;}
.ab-tb li p{ margin:0 auto; padding-top:43px; width:140px; height:180px; font-size:15px; color:#fff;}
.ab-tb li p span{ font-size:38px; line-height:60px;}
.ab-tb li p samll{ font-size:12px;}
.ab-tb .ab-btn a{ display:block; width:16px; height:30px; margin:74px auto 0; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
.ab-tb .ab-btn a:hover{ padding-left:10px;}
.ab-ig{ height:600px; overflow:hidden;}
.ab-ig a{ display:block; width:100%; height:600px; background:url(../Images/index_51.jpg) no-repeat center; background-size:cover; transition:all .5s ease-in-out; -webkit-transition:all .5s ease-in-out;}
.ab-ig a:hover{ -transform:scale(1.08,1.08); -webkit-transform:scale(1.08,1.08);}

@media screen and ( max-width:1440px ){
.ab-tx, .ab-ig{ height:500px;}
.ab-tx-db{ height:350px;}
.ab-tx-nm h3{ padding-top:65px;}
.ab-tx-nm h4{ margin:4px 0 35px;}
.ab-tx-db dl{ width:85%;}
.ab-tb{ height:150px;}
.ab-tb li{ height:150px;}
.ab-tb li p{ padding-top:35px; width:120px; height:150px;}
.ab-tb li p span{ font-size:30px; line-height:50px;}
.ab-tb .ab-btn a{ margin:60px auto 0;}
.ab-ig{ height:500px;}
.ab-ig a{ height:500px;}
}

@media screen and ( max-width:1280px ){
.ab-tx, .ab-ig{ width:100%; height:420px;}
.ab-tx{ height:auto;}
.ab-tx-db{  height:auto; padding:50px 0;}
.ab-tx-nm h3{ padding-top:0;}
.ab-tx-db dl{ width:88%;}
.ab-ig{ height:420px;}
.ab-ig a{ height:420px;}
}

@media screen and ( max-width:640px ){
.ab-ig{ height:300px;}
.ab-tx-db{ padding:35px 0;}
.ab-tx-nm h3{ font-size:24px;}
.ab-tx-nm h4{ font-size:18px; margin:4px 0 25px;}	
.ab-tb{ height:230px;}
.ab-tb li{ width:50%; height:115px; border-bottom:solid 1px #2757a5;}
.ab-tb li p{ padding-top:23px; width:110px; height:115px; font-size:14px;}
.ab-tb li p span{ font-size:24px; line-height:40px;}
.ab-ig{ height:300px;}
.ab-ig a{ height:300px;}
}

@media screen and ( max-width:414px ){
.ab-tx-db dl{ line-height:24px;}
}

@media screen and ( max-width:375px ){
.ab-ig{ height:250px;}
.ab-ig{ height:250px;}
.ab-ig a{ height:250px;}
}

/* Css News */
.ns-bg{ padding:85px 2.5%;}
.ns-bg li{ float:left; width:30%; margin-right:5%; overflow:hidden;}
.ns-bg li:nth-of-type(3){ margin-right:0;}
.ns-bg li a icon{ display:block; width:80px; height:80px; border:1px solid #b0b0b0; border-radius:50%; -webkit-border-radius:50%; background-image:url(../Images/index_61.png); background-repeat:no-repeat; background-position:center; background-size:34px 34px; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
.ns-bg li a dl{ font-family:"vi-logo-font-Gotham-Book"; font-size:15px; color:#094098; margin-top:22px; margin-bottom:7px;}
.ns-bg li a span{ font-size:15px; font-weight:600;}
.ns-bg li a p{ margin-top:7px; font-family:Microsoft YaHei; color:#666; line-height:22px;}
.ns-bg li a:hover icon{ border:1px solid #094098; background-color:#094098; background-image:url(../Images/index_62.png);}

@media screen and ( max-width:1440px ){
.ns-bg{ padding:65px 2.5%;}
}

@media screen and ( max-width:1024px ){
.ns-bg{ padding:45px 2.5%;}
}

@media screen and ( max-width:800px ){
.ns-bg{ padding:25px 2.5%;}
.ns-bg li{ width:100%; margin-right:0; margin-bottom:0; border-bottom:1px solid #e0e0e0; padding-bottom:20px;}
.ns-bg li:nth-of-type(3){ border-bottom:none;}
.ns-bg li a icon{ display:none;}
.ns-bg li a dl{ margin-top:20px;}
}