/* bannner */

.swiper1 { --swiper-pagination-color: var(--main-theme-color); --swiper-theme-color: var(--main-theme-color);}
.swiper1 .swiper-slide { position: relative;}
.swiper1 .swiper-slide img { width: 100%;}
.swiper1 .swiper-slide .swiper-absolute { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.swiper1 .swiper-slide .swiper-absolute .main { height: 100%; display: flex; justify-content: center; flex-direction: column;}
.swiper1 .swiper-slide .swiper-absolute .main .swiper-content { padding-right: 46.5%;}
.swiper1 .swiper-slide .swiper-absolute .main .swiper-content h1, .swiper1 .swiper-slide .swiper-absolute .main .swiper-content h2 { font-family: 'NotoSans Bold'; font-size: 60px; color: var(--white-theme-color); line-height: 60px;}
.swiper1 .swiper-slide .swiper-absolute .main .swiper-content p { line-height: 30px; color: var(--white-theme-color); margin: 35px 0 55px;}
.swiper1 .swiper-slide .swiper-absolute .main .swiper-content2 h2 { color: var(--sub-theme-color);}
.swiper1 .swiper-slide .swiper-absolute .main .swiper-content2 p { color: var(--sub-theme-color);}

.swiper1 .swiper-slide-active .swiper-absolute { animation: text 1.5s ease-out forwards;}
@keyframes text { from { top: 100%;} to { top: 0;}}
@-webkit-keyframes text { from { top: 100%;} to { top: 0;}}

.swiper-pagination1 { margin-bottom: 20px;}


@media screen and (max-width: 1440px) {
    .swiper1 .swiper-slide .swiper-absolute .main .swiper-content h1, .swiper1 .swiper-slide .swiper-absolute .main .swiper-content h2 { font-size: 48px; line-height: 56px;}
}

@media screen and (max-width: 1280px) {
    .swiper1 .swiper-slide .swiper-absolute .main .swiper-content h1, .swiper1 .swiper-slide .swiper-absolute .main .swiper-content h2 { font-size: 36px; line-height: 48px;}
    .swiper1 .swiper-slide .swiper-absolute .main .swiper-content p { margin: 20px 0 35px;}
}

@media screen and (max-width: 1024px) {
    .swiper1 .swiper-slide .swiper-absolute .main .swiper-content h1, .swiper1 .swiper-slide .swiper-absolute .main .swiper-content h2 { font-size: 30px; line-height: 40px;}
    .swiper1 .swiper-slide .swiper-absolute .main .swiper-content p { margin: 15px 0 25px;}
    
    .swiper-pagination1 { margin-bottom: 10px;}
}

@media screen and (max-width: 768px) {
    .swiper1 .swiper-slide .swiper-absolute .main .swiper-content h1, .swiper1 .swiper-slide .swiper-absolute .main .swiper-content h2 { margin-bottom: 25px;}
    .swiper1 .swiper-slide .swiper-absolute .main .swiper-content p { display: none;}
}

@media screen and (max-width: 640px) {
    .swiper1 .swiper-slide .swiper-absolute .main .swiper-content { padding-right: 25%;}
    .swiper1 .swiper-slide .swiper-absolute .main .swiper-content h1, .swiper1 .swiper-slide .swiper-absolute .main .swiper-content h2 { font-size: 24px; line-height: 30px;}
    
    .swiper-pagination1 { margin-bottom: 5px;}
}

@media screen and (max-width: 480px) {
    .swiper1 .swiper-slide .swiper-absolute .main .swiper-content { padding-right: 0;}
    .swiper1 .swiper-slide .swiper-absolute .main .swiper-content h1, .swiper1 .swiper-slide .swiper-absolute .main .swiper-content h2 { font-size: 22px; line-height: 24px; margin-bottom: 20px;}
}





/* public */

.more { display: flex;}
.more span { display: inline-block; font-family: 'NotoSans Bold'; font-size: 18px; color: var(--white-theme-color); line-height: 48px; padding: 0 20px; margin-right: 2px; background-color: var(--main-theme-color); transition: all .3s ease;}
.more i { display: inline-block; width: 50px; height: 48px; background-color: var(--main-theme-color); background-image: url(../images/arrow-01.png); background-repeat: no-repeat; background-position: center;}
.more:hover span { margin-right: 10px;}

.title h3 { font-family: 'NotoSans Bold'; font-size: 48px; color: var(--sub-theme-color); line-height: 48px;}
.title p { line-height: 30px; margin: 35px 0 55px;}

.headline { text-align: center;}
.headline h2 { font-family: 'NotoSans Bold'; font-size: 60px; color: var(--sub-theme-color); line-height: 60px;}
.headline p { color: #666; margin-top: 24px;}


@media screen and (max-width: 1440px) {
    .title h3 { font-size: 36px; line-height: 44px;}
    
    .headline h2 { font-size: 48px; line-height: 48px;}
}

@media screen and (max-width: 1280px) {
    .title h3 { font-size: 30px; line-height: 36px;}
    .title p { margin: 25px 0 50px;}
    
    .headline h2 { font-size: 36px; line-height: 36px;}
    .headline p { margin-top: 20px;}
}

@media screen and (max-width: 1024px) {
    .more span { font-size: 16px; line-height: 40px; padding: 0 15px;}
    .more i { width: 43px; height: 40px; background-size: 13px 10px;}
    
    .title h3 { font-size: 24px; line-height: 30px;}
    
    .headline h2 { font-size: 30px; line-height: 30px;}
    .headline p { margin-top: 15px;}
}





/* about */

.at-bg { background-color: var(--white-theme-color); padding-top: 125px;}
.at-bg .flex { align-items: center;}

.at-bg .at-ig { width: 42%;}
.at-bg .at-ig img { width: 100%;}

.at-bg .at-tx { width: 50%;}
.at-bg .at-tx h2 { font-family: 'NotoSans Bold'; font-size: 60px; color: var(--sub-theme-color); line-height: 60px;}
.at-bg .at-tx p { line-height: 30px; margin: 35px 0 55px;}


@media screen and (max-width: 1440px) {
    .at-bg .at-tx h2 { font-size: 48px; line-height: 56px;}
}

@media screen and (max-width: 1280px) {
    .at-bg .at-tx h2 { font-size: 36px; line-height: 48px;}
    .at-bg .at-tx p { margin: 25px 0 50px;}
}

@media screen and (max-width: 1024px) {
    .at-bg { padding-top: 100px;}
    .at-bg .at-tx h2 { font-size: 30px; line-height: 40px;}
}

@media screen and (max-width: 768px) {
    .at-bg .flex { flex-wrap: wrap;}
    
    .at-bg .at-ig { width: 100%;}
    
    .at-bg .at-tx { width: 100%; margin-top: 50px;}
}

@media screen and (max-width: 640px) {
    .at-bg { padding-top: 75px;}
}

@media screen and (max-width: 480px) {
    .at-bg { padding-top: 50px;}
    
    .at-bg .at-tx { margin-top: 35px;}
    .at-bg .at-tx p { margin: 20px 0 35px;}
}





/* new-energy */

.ny-bg { background-color: var(--white-theme-color); padding-top: 125px;}
.ny-bg .flex { align-items: center;}

.ny-bg .ny-tx { width: 42%;}
.ny-bg .ny-tx a { display: block;}
.ny-bg .ny-tx img { width: auto !important; max-width: 100%; height: auto !important;}

.ny-bg .ny-ig { width: 50%;}
.ny-bg .ny-ig img { width: 100%;}


@media screen and (max-width: 1024px) {
    .ny-bg { padding-top: 100px;}
}

@media screen and (max-width: 768px) {
    .ny-bg .flex { flex-wrap: wrap;}
    
    .ny-bg .ny-tx { width: 100%;}
    
    .ny-bg .ny-ig { width: 100%; margin-top: 50px;}
}

@media screen and (max-width: 640px) {
    .ny-bg { padding-top: 75px;}
}





/* automobile-transmission */

.an-bg { background-color: var(--white-theme-color); padding-top: 125px;}
.an-bg .flex { align-items: center; background: url(../images/automobile-transmission-01.jpg) no-repeat center; background-size: cover; padding: 120px 60px;}

.an-bg .an-tx { width: 46%;}
.an-bg .an-tx h3 { color: var(--white-theme-color);}
.an-bg .an-tx p { color: var(--white-theme-color);}

.an-bg .an-ig { width: 49%;}
.an-bg .an-ig img { width: 100%;}


@media screen and (max-width: 1024px) {
    .an-bg { padding-top: 100px;}
    .an-bg .flex { padding: 100px 50px;}
}

@media screen and (max-width: 768px) {
    .an-bg .flex { flex-wrap: wrap;}
    
    .an-bg .an-tx { width: 100%;}
    
    .an-bg .an-ig { width: 100%; margin-top: 75px;}
}

@media screen and (max-width: 640px) {
    .an-bg { padding-top: 75px;}
    .an-bg .flex { padding: 75px 25px;}
}

@media screen and (max-width: 480px) {
    .an-bg .flex { padding: 50px 20px;}
    
    .an-bg .an-ig { margin-top: 60px;}
}





/* construction-machinery */

.cy-bg { background-color: var(--white-theme-color); padding-top: 125px;}
.cy-bg .main { position: relative;}
.cy-bg img { width: 100%;}

.cy-bg .cy-tx { position: absolute; left: 52.5%; top: 6.2%; width: 47.5%;}

.cy-bg .cy-lt { position: absolute; left: 0; top: 0; width: 280px;}
.cy-bg .cy-rt { position: absolute; right: 0; bottom: 0; width: 300px;}


@media screen and (max-width: 1280px) {
    .cy-bg .cy-tx { left: 50%; top: 5%;}
    
    .cy-bg .cy-lt { width: 250px;}
    .cy-bg .cy-rt { width: 270px;}
}

@media screen and (max-width: 1100px) {
    .cy-bg .cy-tx { top: 0;}
    
    .cy-bg .cy-lt { width: 200px;}
    .cy-bg .cy-rt { width: 220px;}
}

@media screen and (max-width: 1024px) {
    .cy-bg { padding-top: 100px;}
    .cy-bg img { margin-top: -35px;}
    
    .cy-bg .cy-tx { position: relative; left: 0; width: 100%;}
    
    .cy-bg .cy-lt { display: none;}
    .cy-bg .cy-rt { bottom: 5%;}
}

@media screen and (max-width: 640px) {
    .cy-bg { padding-top: 75px;}
    .cy-bg img { margin-top: 0;}
    
    .cy-bg .cy-rt { width: 200px;}
}

@media screen and (max-width: 480px) {
    .cy-bg img { margin-top: 15px;}
    
    .cy-bg .cy-rt { width: 150px;}
}





/* advantage */

.ae-bg { background-color: var(--white-theme-color); padding: 125px 0;}
.ae-bg ul { flex-wrap: wrap; margin-top: 128px;}
.ae-bg ul li { width: 33.333333%; background-color: var(--white-theme-color); padding: 0 40px 30px; text-align: center; cursor: pointer; transition: all .5s ease;}
.ae-bg ul li:nth-child(n+4) { margin-top: 90px;}
.ae-bg ul li dl { width: 96px; height: 96px; background-color: #f7f7f7; margin: -48px auto 25px; padding-top: 19px; transition: all .5s ease;}
.ae-bg ul li dl img { transition: all .3s ease;}
.ae-bg ul li h4 { font-family: 'NotoSans Bold'; font-size: 36px; color: var(--sub-theme-color); line-height: 36px;}
.ae-bg ul li p { line-height: 30px; margin-top: 21px;}

.ae-bg ul li:hover { background: #f7f7f7 url(../images/why-bg.jpg) no-repeat left top;}
.ae-bg ul li:hover dl { background-color: var(--main-theme-color);}
.ae-bg ul li:hover dl img { filter: brightness(0) invert(1);}


@media screen and (max-width: 1440px) {
    .ae-bg ul li h4 { font-size: 30px; line-height: 30px;}
}

@media screen and (max-width: 1280px) {
    .ae-bg ul li dl { width: 86px; height: 86px; margin-top: -43px; padding-top: 18px;}
    .ae-bg ul li dl img { width: 50px;}
    .ae-bg ul li h4 { font-size: 24px;}
}

@media screen and (max-width: 1024px) {
    .ae-bg { padding: 100px 0;}
    .ae-bg ul { margin-top: 100px;}
    .ae-bg ul li:nth-child(n+4) { margin-top: 70px;}
}

@media screen and (max-width: 768px) {
    .ae-bg ul li { width: 50%;}
    .ae-bg ul li:nth-child(n+3) { margin-top: 70px;}
}

@media screen and (max-width: 640px) {
    .ae-bg { padding-bottom: 45px;}
}

@media screen and (max-width: 480px) {
    .ae-bg ul li { width: 100%; padding: 0 0 30px;}
    .ae-bg ul li:nth-child(n+2) { margin-top: 70px;}
}





/* solution */

.sn-bg { align-items: center; background-color: #303030;}
.sn-bg .sn-tx { width: 50%; padding: 0 40px 0 22%;}
.sn-bg .sn-tx .title h3 { color: var(--white-theme-color);}
.sn-bg .sn-tx .title p { color: var(--white-theme-color);}

.sn-bg .sn-tx ul li { align-items: center; position: relative;}
.sn-bg .sn-tx ul li:nth-child(n+2) { margin-top: 50px;}
.sn-bg .sn-tx ul li:nth-child(n+2):after { content: ""; position: absolute; left: 22px; top: -40px; width: 1px; height: 30px; background-color: var(--main-theme-color);}
.sn-bg .sn-tx ul li dl { width: 46px; height: 46px; line-height: 46px; font-family: 'NotoSans Bold'; font-size: 24px; color: var(--white-theme-color); text-align: center; background-color: var(--main-theme-color); border-radius: 50%; z-index: 2; position: relative;}
.sn-bg .sn-tx ul li dl:after { content: ""; position: absolute; left: -10px; top: -10px; right: -10px; bottom: -10px; background: rgba(255,255,255,.05); border-radius: 50%; z-index: 1;}
.sn-bg .sn-tx ul li p { width: calc(100% - 70px); color: #fff; line-height: 30px;}

.sn-bg .sn-ig { width: 50%;}
.sn-bg .sn-ig img { width: 100%;}


@media screen and (max-width: 2048px) {
    .sn-bg .sn-tx { padding-left: 15.35%;}
}

@media screen and (max-width: 1920px) {
    .sn-bg .sn-tx { padding-left: 13%;}
}

@media screen and (max-width: 1680px) {
    .sn-bg .sn-tx { padding: 75px 40px 85px 7.75%;}
}

@media screen and (max-width: 1440px) {
    .sn-bg .sn-tx { padding-left: 3.5%;}
}

@media screen and (max-width: 1280px) {
    .sn-bg { flex-wrap: wrap;}
    .sn-bg .sn-tx { width: 100%; padding: 75px 3.5% 85px;}
    
    .sn-bg .sn-ig { width: 100%;}
}

@media screen and (max-width: 1024px) {
    .sn-bg .sn-tx { padding: 65px 3.5% 75px;}
}

@media screen and (max-width: 640px) {
    .sn-bg .sn-tx { padding: 50px 15px 60px;}
}





/* products */

.ps-bg { background-color: var(--white-theme-color); padding-top: 125px;}
.ps-bg .ps-ls { margin-top: 80px; position: relative;}
.ps-bg .ps-ls .swiper2 a { display: block;}
.ps-bg .ps-ls .swiper2 a .ps-ig { border: 1px solid #c9c9c9; overflow: hidden;}
.ps-bg .ps-ls .swiper2 a .ps-ig img { width: 100%; transition: all .75s ease;}
.ps-bg .ps-ls .swiper2 a .ps-nm { font-size: 18px; color: var(--font-theme-color); line-height: 30px; text-align: center; padding: 15px; transition: all .5s ease;}

.ps-bg .ps-ls .swiper-button-prev2, .ps-bg .ps-ls .swiper-button-next2 { width: 60px; height: 60px; opacity: 1; background-color: #222; background-repeat: no-repeat; background-position: center; background-size: 8px 14px; text-indent: 96px; overflow: hidden; border-radius: 50%; transition: all .5s ease;}
.ps-bg .ps-ls .swiper-button-prev2 { background-image: url(../images/arrow-02.png); left: -100px;}
.ps-bg .ps-ls .swiper-button-next2 { background-image: url(../images/arrow-03.png); right: -100px;}

.ps-bg .ps-ls .swiper2 a:hover .ps-ig img { transform: scale(1.135,1.135);}
.ps-bg .ps-ls .swiper2 a:hover .ps-nm { color: var(--main-theme-color);}
.ps-bg .ps-ls .swiper-button-prev2:hover, .ps-bg .ps-ls .swiper-button-next2:hover { background-color: var(--main-theme-color);}


@media screen and (max-width: 1680px) {
    .ps-bg .ps-ls .swiper-button-prev2, .ps-bg .ps-ls .swiper-button-next2 { display: none;}
}

@media screen and (max-width: 1024px) {
    .ps-bg { padding-top: 100px;}
    .ps-bg .ps-ls { margin-top: 60px;}
    .ps-bg .ps-ls .swiper2 a .ps-nm { font-size: 16px;}
}

@media screen and (max-width: 768px) {
    .ps-bg { padding-top: 75px;}
    .ps-bg .ps-ls { margin-top: 50px;}
}





/* news */

.ns-bg { background-color: var(--white-theme-color); padding: 125px 0;}
.ns-bg ul { margin-top: 80px;}
.ns-bg ul li { width: 30.5%;}
.ns-bg ul li img { width: 100%;}
.ns-bg ul li dl { background: url(../images/time.png) no-repeat center left; background-size: 20px 20px; color: #999; line-height: 20px; padding-left: 30px; margin-top: 25px;}
.ns-bg ul li h4 { margin: 21px 0 37px;}
.ns-bg ul li h4 a { font-family: 'NotoSans Bold'; font-size: 18px; color: var(--sub-theme-color); line-height: 30px; transition: all .3s ease;}
.ns-bg ul li:hover h4 a { color: var(--main-theme-color);}


@media screen and (max-width: 1024px) {
    .ns-bg { padding: 100px 0;}
    .ns-bg ul { margin-top: 60px;}
}

@media screen and (max-width: 640px) {
    .ns-bg { padding: 75px 0;}
    .ns-bg ul { flex-wrap: wrap; margin-top: 50px;}
    .ns-bg ul li { width: 100%;}
    .ns-bg ul li:nth-child(n+2) { margin-top: 50px;}
    .ns-bg ul li h4 { margin: 16px 0 32px;}
}