/* Css Flash */
.swiper1 { --swiper-pagination-color: #fff; --swiper-theme-color: #fff;}
.swiper1 .swiper-slide a{ display:block; width:100%; height:100%;}
.swiper1 .swiper-slide a img{ width:100%;}
.swiper1 .swiper-slide a img:nth-child(2){ display:none;}
.swiper-pagination1 { margin-bottom: 16px;}
@media screen and (max-width: 1024px) {
    .swiper1 .swiper-slide a img:nth-child(1){ display:none;}
    .swiper1 .swiper-slide a img:nth-child(2){ display:block;}
    .swiper-pagination1 { margin-bottom: 4px;}
}


/* Css About */
.ab-bg { background: url(../Images/abBg-01.jpg) no-repeat center top; background-size: cover;}
.ab-bg .ab-tx { width: 42%; padding: 150px 0;}
.ab-bg .ab-tx h2 { font-family: 'KabelBold'; font-size: 48px; font-weight: normal; color: #d01500; text-transform: uppercase;}
.ab-bg .ab-tx h3 { font-family: 'OPPOSans-Bold'; font-size: 36px; font-weight: normal; color: #333; margin-top: 14px;}
.ab-bg .ab-tx p { font-size: 16px; color: #333; line-height: 36px; margin-top: 64px;}
.ab-bg .ab-tx ul { margin-top: 76px;}
.ab-bg .ab-tx ul li div h1 { font-family: 'Barlow Condensed'; font-size: 60px; font-weight: normal; color: #333; letter-spacing: 0; line-height: 46px;}
.ab-bg .ab-tx ul li div span { display: block; font-size: 16px; color: #666; margin-top: 11px;}
.ab-bg .ab-tx ul li dl { width: 20px; height: 20px; background-color: #d01500; border-radius: 50%; font-family: 'OPPOSans-Bold'; font-size: 12px; color: #fff; text-align: center; line-height: 20px; margin-left: 3px;}
.ab-bg .ab-tx a { display: block; width: 200px; height: 50px; background: #d01500 url(../Images/jt.png) no-repeat 150px center; margin-top: 82px; font-size: 18px; color: #fff; padding: 0 30px; line-height: 50px; -webkit-border-radius: 25px; border-radius: 25px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.ab-bg .ab-tx a:hover{ padding: 0 20px; background-position: 160px center;}
@media screen and (max-width: 1920px) {
    .ab-bg .ab-tx { width: 42%; padding: 100px 0;}
    .ab-bg .ab-tx h3 { margin-top: 9px;}
    .ab-bg .ab-tx p { line-height: 30px; margin-top: 57px;}
    .ab-bg .ab-tx ul { margin-top: 69px;}
}
@media screen and (max-width: 1440px) {
    .ab-bg .ab-tx { width: 46%; padding: 100px 0;}
    .ab-bg .ab-tx h2 { font-size: 36px;}
    .ab-bg .ab-tx h3 { font-size: 30px; margin-top: 12px;}
    .ab-bg .ab-tx p { font-size: 15px; line-height: 30px; margin-top: 40px;}
    .ab-bg .ab-tx ul { width: 85%; margin-top: 59px;}
    .ab-bg .ab-tx ul li div h1 { font-size: 54px; line-height: 44px;}
    .ab-bg .ab-tx ul li div span { font-size: 15px; margin-top: 9px;}
    .ab-bg .ab-tx a { width: 180px; height: 44px; background-position: 135px center; margin-top: 62px; font-size: 16px; padding: 0 25px; line-height: 44px;}
    .ab-bg .ab-tx a:hover{ padding: 0 15px; background-position: 125px center;}
}
@media screen and (max-width: 1024px) {
    .ab-bg { background-image: url(../Images/abBg-02.jpg);}
    .ab-bg .ab-tx { width: 100%; padding: 50px 0;}
    .ab-bg .ab-tx h2 { font-size: 30px; text-align: center;}
    .ab-bg .ab-tx h3 { font-size: 24px; text-align: center; margin-top: 9px;}
    .ab-bg .ab-tx p { font-size: 14px; line-height: 28px; margin-top: 28px;}
    .ab-bg .ab-tx ul { width: 60%; margin: 43px auto 0;}
    .ab-bg .ab-tx ul li div h1 { font-size: 48px; line-height: 40px;}
    .ab-bg .ab-tx ul li div span { font-size: 14px; margin-top: 6px;}
    .ab-bg .ab-tx ul li dl { width: 16px; height: 16px; font-size: 10px; line-height: 16px; margin-left: 4px;}
    .ab-bg .ab-tx a { width: 150px; height: 35px; background-position: 115px center; background-size: 15px 9px; margin: 47px auto 0; font-size: 14px; padding: 0 20px; line-height: 35px;}
    .ab-bg .ab-tx a:hover{ padding: 0 20px; background-position: 115px center;}
}
@media screen and (max-width: 800px) {
    .ab-bg .ab-tx ul { width: 80%;}
}
@media screen and (max-width: 480px) {
    .ab-bg .ab-tx { padding: 35px 0;}
    .ab-bg .ab-tx h2 { font-size: 24px;}
    .ab-bg .ab-tx h3 { font-size: 20px; margin-top: 8px;}
    .ab-bg .ab-tx p { margin-top: 22px;}
    .ab-bg .ab-tx ul { width: 100%; margin-top: 33px;}
    .ab-bg .ab-tx ul li div h1 { font-size: 42px; line-height: 34px;}
    .ab-bg .ab-tx ul li div span { margin-top: 5px;}
    .ab-bg .ab-tx ul li dl { margin-left: 3px;}
    .ab-bg .ab-tx a { width: 134px; height: 31px; background-position: 104px center; background-size: 15px 9px; margin-top: 37px; padding: 0 15px; line-height: 31px;}
    .ab-bg .ab-tx a:hover{ padding: 0 15px; background-position: 104px center;}
}


/* Css Classifications */
.fl-bg { background: url(../Images/flBg.jpg) no-repeat center; background-size: cover; padding-bottom: 100px}
.title { color: #fff; text-align: center; padding: 80px 0 65px;}
.title h2 { font-family: 'KabelBold'; font-size: 48px; font-weight: normal; text-transform: uppercase;}
.title h3 { font-family: 'OPPOSans-Bold'; font-size: 36px; font-weight: normal; margin-top: 9px;}
.fl-ls a { display: block; width: 31%; position: relative; -webkit-transition: all .5s ease; transition: all .5s ease;}
.fl-ls a:hover { margin-top: -25px;}
.fl-ls a img { display: block; width: 100%;}
.fl-ls a img:nth-child(2) { display: none;}
.fl-ls a .fl-tx { position: absolute; left: 0; top: 0; width: 100%; text-align: center; padding: 14.75% 12.5% 0;}
.fl-ls a .fl-tx h4 { font-family: 'OPPOSans-Bold'; font-size: 30px; font-weight: normal; color: #333;}
.fl-ls a .fl-tx h5 { width: 20px; height: 3px; background-color: #d01500; margin: 19px auto 14px;}
.fl-ls a .fl-tx p { font-size: 14px; color: #666; line-height: 24px;}
@media screen and (max-width: 1440px) {
    .title { color: #fff; text-align: center; padding: 80px 0 65px;}
    .title h2 { font-size: 36px;}
    .title h3 { font-size: 30px; margin-top: 12px;}
    .fl-ls a .fl-tx h4 { font-size: 24px;}
}
@media screen and (max-width: 1024px) {
    .fl-bg { padding-bottom: 65px}
    .title { padding: 50px 0 35px;}
    .title h2 { font-size: 30px;}
    .title h3 { font-size: 24px; margin-top: 9px;}
    .fl-ls a { background-color: #fff; overflow: hidden;}
    .fl-ls a:hover { margin-top: 0;}
    .fl-ls a .fl-tx h4 { font-size: 20px;}
    .fl-ls a .fl-tx h5 { margin: 15px auto 9px;}
    
}
@media screen and (max-width: 800px) {
    .fl-ls a { padding-top: 50px;}
    .fl-ls a .fl-tx { padding: 14.75% 5% 0;}
}
@media screen and (max-width: 640px) {
    .fl-ls { flex-wrap: wrap;}
    .fl-ls a { width: 100%; padding-top: 0; display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse;}
    .fl-ls a:nth-child(n+2) { margin-top: 25px;}
    .fl-ls a img { width: 50%;}
    .fl-ls a img:nth-child(2) { display: block;}
    .fl-ls a img:nth-child(1) { display: none;}
    .fl-ls a .fl-tx { position: relative; width: 50%; text-align: left; padding: 0 0 0 25px;}
    .fl-ls a .fl-tx h5 { margin: 15px 0 9px;}
}
@media screen and (max-width: 480px) {
    .fl-bg { padding-bottom: 40px}
    .title { padding: 35px 0 30px;}
    .title h2 { font-size: 24px;}
    .title h3 { font-size: 20px; margin-top: 8px;}
    .fl-ls a { padding: 5px 0;}
    .fl-ls a:nth-child(n+2) { margin-top: 20px;}
    .fl-ls a .fl-tx { padding-left: 15px;}
}
@media screen and (max-width: 375px) {
    .fl-ls a { padding: 10px 0;}
}


/* Css Products */
.ig-bg { background: url(../Images/igBg.jpg) no-repeat center bottom; background-size: cover; padding-bottom: 100px;}
.ig-bg .title h2 { color: #d01500;}
.ig-bg .title h3 { color: #333;}
.ig-ls { flex-wrap: wrap;}
.ig-ls li { display: block; width: 23.285714%; background-color: #fff; border: 2px solid #fff; -webkit-transition: all .3s ease; transition: all .3s ease;}
.ig-ls li:nth-child(n+5) { margin-top: 2.85%;}
.ig-ls li:hover { border-color: #d01500;}
.ig-ls li .ig-is { display: block; overflow: hidden;}
.ig-ls li .ig-is img { width: 100%; -webkit-transition: all .5s ease; transition: all .5s ease;}
.ig-ls li:hover .ig-is img{ -webkit-transform: scale(1.1);transform: scale(1.1);}
.ig-ls li .ig-nm { display: block; font-size: 16px; color: #333; text-align: center; margin-top: 11px;}
.ig-ls li .ig-an { width: 180px; height: 35px; background: url(../Images/igAn.jpg) no-repeat center; margin: 32px auto 33px; overflow: hidden; -webkit-border-radius: 5px; border-radius: 5px;}
.ig-ls li .ig-an a { display: block; width: 50%; font-size: 14px; color: #333; text-align: center; line-height: 35px;}
.ig-ls li .ig-an a:nth-child(1) { color: #fff;}
@media screen and (max-width: 1024px) {
    .ig-bg { padding-bottom: 65px;}
    .ig-ls li .ig-nm { font-size: 14px; margin-top: 10px;}
    .ig-ls li .ig-an { width: 128px; height: 25px; background-size: 128px 25px; margin: 17px auto 23px;}
    .ig-ls li .ig-an a { font-size: 12px; line-height: 25px;}
}
@media screen and (max-width: 640px) {
    .ig-ls li { width: 48.5%;}
    .ig-ls li:nth-child(n+3) { margin-top: 3%;}
}
@media screen and (max-width: 480px) {
    .ig-bg { padding-bottom: 40px;}
}


/* Css Strength */
.sl-bg { background: url(../Images/slBg.jpg) no-repeat center; background-size: cover; padding-bottom: 125px;}
.sl-tx { padding-top: 234px; position: relative;}
.gallery-top .swiper-slide { padding-right: 56%;}
.gallery-top h4 { font-family: 'OPPOSans-Bold'; font-size: 30px; font-weight: normal; color: #fff;}
.gallery-top p { font-size: 18px; color: #fff; line-height: 36px; margin-top: 29px;}
.gallery-thumbs { margin-top: 128px;}
.gallery-thumbs .swiper-slide { font-family: 'OPPOSans-Bold'; font-size: 24px; font-weight: normal; color: #333; background-color: #fff; line-height: 88px; padding: 0 25px; cursor: pointer; -webkit-border-radius: 10px; border-radius: 10px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.gallery-thumbs .swiper-slide dl { float: right; width: 44px; height: 44px; margin-top: 22px; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-transition: all .3s ease; transition: all .3s ease;}
.gallery-thumbs .swiper-slide:nth-child(1) dl { background-image: url(../Images/sl01.png);}
.gallery-thumbs .swiper-slide:nth-child(2) dl { background-image: url(../Images/sl02.png);}
.gallery-thumbs .swiper-slide:nth-child(3) dl { background-image: url(../Images/sl03.png);}
.gallery-thumbs .swiper-slide:nth-child(4) dl { background-image: url(../Images/sl04.png);}
.gallery-thumbs .swiper-slide:hover, .gallery-thumbs .swiper-slide-thumb-active { color: #fff; background-color: #d01500;}
.gallery-thumbs .swiper-slide:nth-child(1):hover dl, .gallery-thumbs .swiper-slide-thumb-active:nth-child(1) dl { background-image: url(../Images/sl01-02.png);}
.gallery-thumbs .swiper-slide:nth-child(2):hover dl, .gallery-thumbs .swiper-slide-thumb-active:nth-child(2) dl { background-image: url(../Images/sl02-02.png);}
.gallery-thumbs .swiper-slide:nth-child(3):hover dl, .gallery-thumbs .swiper-slide-thumb-active:nth-child(3) dl { background-image: url(../Images/sl03-02.png);}
.gallery-thumbs .swiper-slide:nth-child(4):hover dl, .gallery-thumbs .swiper-slide-thumb-active:nth-child(4) dl { background-image: url(../Images/sl04-02.png);}
.sl-tx .sl-ig { position: absolute; top: 2%; right: -11.45%; width: 49.35%;}
.sl-tx .sl-ig img { width: 100%;}
@media screen and (max-width: 1780px) {
    .sl-tx .sl-ig { right: 0;}
}
@media screen and (max-width: 1440px) {
    .sl-bg { padding-bottom: 100px;}
    .sl-tx { padding-top: 209px;}
    .gallery-top h4 { font-size: 24px;}
    .gallery-top p { font-size: 16px; line-height: 32px; margin-top: 26px;}
    .gallery-thumbs { margin-top: 109px;}    
    .gallery-thumbs .swiper-slide { font-size: 20px; line-height: 78px; padding: 0 20px;}
    .gallery-thumbs .swiper-slide dl { width: 38px; height: 38px; margin-top: 20px; background-size: 38px 38px;}
}
@media screen and (max-width: 1024px) {
    .sl-bg { padding-bottom: 65px;}
    .sl-tx { padding-top: 140px;}
    .gallery-top h4 { font-size: 20px;}
    .gallery-top p { font-size: 14px; line-height: 30px; margin-top: 17px;}
    .gallery-thumbs { margin-top: 93px;}
    .gallery-thumbs .swiper-slide { font-size: 18px; line-height: 58px; padding: 0 15px;}
    .gallery-thumbs .swiper-slide dl { width: 28px; height: 28px; margin-top: 15px; background-size: 28px 28px;}
}
@media screen and (max-width: 640px) {
    .sl-tx { padding-top: 0;}
    .gallery-top .swiper-slide { padding-right: 0; margin-top: 35px;}
    .gallery-thumbs { margin-top: 58px;}
    .gallery-thumbs .swiper-slide { line-height: 50px; padding: 0 12px;}
    .gallery-thumbs .swiper-slide dl { width: 24px; height: 24px; margin-top: 13px; background-size: 24px 24px;}
    .sl-tx .sl-ig { position: relative; top: inherit; right: inherit; width: 90%; margin: 0 5%;}
}
@media screen and (max-width: 480px) {
    .sl-bg { padding-bottom: 40px;}
    .gallery-thumbs { margin-top: 43px;}
}


/* Css News */
.ns-bg { background-color: #f5f5f5; padding-bottom: 125px;}
.ns-bg .title h2 { color: #d01500;}
.ns-bg .title h3 { color: #333;}
.ns-zb { width: 32%; flex-wrap: wrap; align-content: space-between; overflow: hidden;}
.ns-zb a { display: block; width: 100%; height: 100%; background: url(../Images/nsBg.jpg) no-repeat center; background-size: cover; -webkit-transition: all .5s ease; transition: all .5s ease;}
.ns-zb a:hover { -webkit-transform: scale(1.1);transform: scale(1.1);}
.ns-yb { width: 66%; flex-wrap: wrap;}
.ns-yb a { display: block; width: 48.484848%; height: 264px; background-color: #fff; padding: 40px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.ns-yb a:nth-child(n+3) { margin-top: 3.030304%;}
.ns-yb a h5 { font-size: 14px; font-weight: normal; color: #999; letter-spacing: 1px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.ns-yb a h4 { font-family: 'OPPOSans-Bold'; font-size: 24px; font-weight: normal; color: #333; margin: 17px 0 35px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.ns-yb a p { font-size: 14px; color: #666; line-height: 24px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.ns-yb a:hover { background-color: #d01500;}
.ns-yb a:hover h5, .ns-yb a:hover h4, .ns-yb a:hover p { color: #fff;}
@media screen and (max-width: 1440px) {
    .ns-bg { padding-bottom: 100px;}
    .ns-yb a h4 { font-size: 20px; margin: 17px 0 34px;}
}
@media screen and (max-width: 1280px) {
    .ns-yb a { padding: 30px;}
}
@media screen and (max-width: 1024px) {
    .ns-bg { padding-bottom: 65px;}
    .ns-zb { display: none;}
    .ns-yb { width: 100%;}
    .ns-yb a { height: 200px; padding: 25px;}
    .ns-yb a h5 { font-size: 13px;}
    .ns-yb a h4 { font-size: 18px; margin: 13px 0 20px;}
}
@media screen and (max-width: 640px) {
    .ns-yb a { width: 100%; height: auto;}
    .ns-yb a:nth-child(n+2) { margin-top: 25px;}
}
@media screen and (max-width: 480px) {
    .ns-bg { padding-bottom: 40px;}
    .ns-yb a { padding: 15px;}
    .ns-yb a:nth-child(n+2) { margin-top: 20px;}
}