@charset "utf-8";
/* CSS Document */
*{ margin: 0; padding: 0; scroll-behavior: smooth;}
body{ font-family:"Microsoft YaHei",Arial; font-size:100%; color:#000; max-width: 1920px; margin:0px auto; padding:0px; overflow-x:hidden;}
ol,ul,li,p,dl,dt,dd,h1,h2,h3,h4,h5,h6{ list-style:none outside none; margin:0px; padding:0px; font-size:100%; font-weight:normal;}
img { border:none; transition: 0.5s; max-width: 100%;}
a:link, a:visited { color: #222; text-decoration: none; outline:none;}
a:hover, a:active { color: #222; text-decoration: none; outline:none;}
.clear{ clear:both;}
.page_button a { color: #222; font-size: 14px; margin: 0 5px; padding: 0 8px; display: inline-block; width: auto; line-height: 24px; border: 1px rgba(0, 0, 0, 0.103) solid; box-sizing: border-box; border-radius: 5px;}
.page_button span { display: inline-block; padding: 0 8px; font-size: 14px; line-height: 24px; border-radius: 5px;}
.page_button span.current { border: 1px solid #cccccc; color: #dbc4b4; border-radius: 5px;}
.page_button a:hover { border: 1px solid #cccccc; color: #dbc4b4;border-radius: 5px;}
.iw_poi_title { color: #cc5522;}
:root {
    --style_color: #059344;
}

/* newshow------------------------------------ */
.newsshow { width: 100%;}
.newsshow_container { width: 95%; max-width: 1500px; margin: 50px auto;}
.newsshow_content { width: 100%;}
.newsshow_title { text-align: center; font-size: 22px; margin-bottom: 20px;}
.newsshow_title p { font-size: 16px; margin-top: 10px;}
.newsshow_text { padding: 20px 0; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc; margin-bottom: 30px;}
.newsshow_text>div { width:800px; max-width:100%; margin:0 auto; margin-bottom: 30px;}

.relevant_case {width: 95%; max-width: 1500px; margin:auto;}
.relevant_case .case_title p{height: 42px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;}
.relevant_case ul { display: flex; flex-wrap: wrap;}
.relevant_case li { flex: 0 1 30%; margin-bottom: 15px; text-align: center;}
.relevant_case li.on{margin: 0 5%;}
.relevant_case li:hover img { transform: scale(1.05); transition: 0.5s;}
.relevant_case li img { transition: 0.5s;}
.case_pic { overflow: hidden;}
.case_wb { line-height: 30px; background: rgb(123, 123, 138); margin-top: 15px; transition: 0.5s; color: #fff;}
.relevant-case li:hover .case_wb { background: rgb(168, 168, 200); transition: 0.5s;}
.toggle_button { display: flex; justify-content: space-between;}
.toggle_button a { background: var(--style_color); width: 100px; line-height: 40px; display: inline-block; text-align: center; color: #fff !important;}
.bdsharebuttonbox  { margin: 20px 0;}
.bdsharebuttonbox a { width: auto;}
.relevant_title { font-size: 20px; padding: 10px; margin-bottom: 15px; position: relative; text-align: center;}
.relevant_title::after { content: ''; position: absolute; top: 50%; left: 0; width: 2px; height: 60%; transform: translateY(-50%); backgroundd: var(--style_color);}
.relevant_news li { float: left; width: 45%; list-style-type: circle;  list-style-position: inside;}
.relevant_news li span { float: right; color: #b6b2b2;}
.relevant_news li:nth-of-type(even) { margin-left: 4%; padding-left: 5%; box-sizing: border-box;}
@media screen and (max-width:520px) {
	.relevant_case li{margin-left: 0!important;flex: 0 0 47.5%;margin-right: 0!important;}
	.relevant_case li:nth-child(2n){margin-left: 5%!important;}
}

/* productshow--------------------------------------------------- */
.product_show { padding: 110px 0 0; background: #efefef ;}
.product_show_container { border-top: 4px solid var(--style_color); width: 95%; max-width: 1300px; margin: auto; padding: 27px; background: #fff; box-sizing: border-box; display: flex;}
.product_show_container .left { flex: 0 1 50%; text-align: center;}
.product_show_container .right { flex: 0 1 50%; padding: 20px 30px; box-sizing: border-box;}
.product_show_container .right>div { height: 100%; display: flex; flex-direction: column;}
.product_show_title { font-size: 30px;; display: block; font-weight: bold; color: #090909;}
.product_show_content { margin: 30px 0 20px; padding: 25px 0; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;}
.hot_line { color: #303030; margin: auto; margin-left: 0; margin-bottom: 0;}
.hot_line a { margin-top: 10px; width: max-content; display: flex; align-items: center; padding: 12px 15px; border-radius: 10px; background: var(--style_color);}
.hot_line a span { color: #ffffff; font-family: Myriad_Pro; padding-left: 13px; margin-left: 13px; border-left: 1px solid rgba(255, 255, 255, 0.5);}
.product_show .item_middle { line-height: 60px; padding-left: 21px; font-size: 24px; color: #fff; width: 95%; margin: 50px auto 0; max-width: 1300px; background: var(--style_color); position: relative;}
.product_show .item_middle::after { content: ''; position: absolute; bottom: 0; left: 0; height: 25%; width: 100%; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 25%));}
.pro_introdution { padding: 20px 0; width: 95%; margin: auto; max-width: 1300px; position: relative; z-index: 1; box-sizing: border-box; background: #fff; display: block; justify-content: space-between;}
.pro_introdution::after { content: ''; position: absolute; left: -50%; top: 0; background: #fff; width: 200%; height: 100%; z-index: -1;}
.pro_introdution .left { flex: 0 1 78%;}
.introduction_title { display: flex; justify-content: space-between;  margin-bottom: 30px;}
.introduction_title p { font-size: 20px; color: #212121; padding: 10px 20px; color: #000; position: relative;}
.introduction_title p::after { content: ''; position: absolute; top: 50%; left: 0; width: 2px; height: 60%; transform: translateY(-50%); background: var(--style_color);}
.introduction_title a { display: block; font-size: 18px; color: #fff; width: 136px; line-height: 42px; background: #8fafca; text-align: center;}
.relevant_product { background: #fff; padding: 0 20px; box-sizing: border-box; flex: 0 1 20%;}
.relevant_text { color: #fff;  line-height: 32px; text-align: center; background: #c5c5c5; transition: 0.5s; height: 32px; overflow: hidden; padding: 0 10px;}
.relevant_content li:hover img { transform: scale(1.05); transition: 0.5s;}
.relevant_content li:hover .relevant_text { background: var(--style_color); transition: 0.5s;}
.relevant_content li img { transition: 0.5s;}
.relevant_content li + li { margin-top: 10px;}
.relevant_photograph { overflow: hidden;}
.productshow_button a { display: block; padding:5px 10px; color: #000; width: max-content; position: relative;}
.productshow_button a::after { content: ''; position: absolute; top: 50%; left: 0; width: 2px; height: 60%; transform: translateY(-50%); background: var(--style_color);}
.dd ul { display: block !important;}
.dd h4:after { margin-bottom: 0 !important;}


::-webkit-scrollbar {width:5px;height:8px;background-color:#fff;border-radius:4px; position:relative;}
::-webkit-scrollbar-thumb {background-color:#b1b1b1;border-radius:3px;}


@media screen and (max-width: 1024px) {
    .relevant_product { margin-top: 50px; padding: 0;}
    .relevant_content ul { display: flex; justify-content: space-between;}
    .relevant_content li { flex: 0 1 32%;} 
    .relevant_content li + li { margin-top: 0;}
    .relevant_title { font-weight: bold; color: var(--style_color_1d2088);}
    .product_container .right div>span { font-size: 24px;}
    .product_show_title { font-size: 24px;}
    
}
@media screen and (max-width: 768px) {
    .product_show { padding: 50px 0 0;}
    .product_container .right div>span { font-size: 22px;}
    .relevant_news ul { display: flex; flex-wrap: wrap;}
    .relevant_news li { width: 100%;}
    .relevant_news li:nth-of-type(even) { padding-left: 0; margin-left: 0;}
}
@media screen and (max-width: 700px) {
    .product_show_container { display: block;}
    .product_container .right div>span { font-size: 18px;}
    .relevant_content li:nth-of-type(n+3) { display: none;}
    .relevant_content li { flex: 0 1 49%;}
    .relevant_text { padding: 0 10px;}
    .product_show  { padding: 40px 0 50px;}
    .newsshow_title { font-size: 22px;}
    .introduction_title p { font-size: 16px; padding: 5px;}
    .productshow_button a { padding: 5px;}
    .newsshow_title { font-size: 18px;}
    .newsshow_title p { font-size: 14px;}
    .hot_line a span { font-size: 20px;}
    .product_show_container { padding: 15px;}
    .product_show_title { font-size: 20px;}
    .product_show_container .right { padding: 20px 0 0;}
    .product_show .item_middle { width: 100%; line-height: 45px; padding-left: 20px; font-size: 20px;}
    .product_show_content { margin: 20px 0; padding: 20px 0;}
}
/*基础配置*/


@font-face {
    font-family: DINCondensed;
    src: url(../fonts/D-DINCondensed.ttf);
}
@font-face {
    font-family: DINCondensedBold;
    src: url(../fonts/D-DINCondensed-Bold.ttf);
}


/* nav */
body { margin-top: 75px !important;}
.nav { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; background: url(../images/footer.jpg) center; background-size: cover; border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.indexBody { margin-top: 0 !important;}
.indexBody .nav { background: transparent;}
.navContainer { width: 95%; max-width: 1760px; margin: auto; display: flex; align-items: center; justify-content: space-between; position: relative;}
.navContainer .itemRight { display: flex; align-items: center;}
.headList { display: flex; flex: 1; margin-right: 40px;}
.headList li { padding: 0 40px;}
.headList li a { line-height: 75px; display: block; color: #fff;}
.headIcon a ~ a { margin-left: 15px;}
.mobile_menu { display: none;}
.mobile_menu div { width: 24px; height: 2px; background:var(--style_color);}
.mobile_menu div + div { margin-top: 5px;}
.mobile_sub_menu { display: none; width: 35%; position: fixed; right:-100%; height: 1000px; background: #fff; padding: 30px; box-sizing: border-box; transition: 0.5s; z-index: 10;}
.mobile_sub_menu>div>a { font-size: 16px; font-weight: bold;}
.mobile_sub_menu ul { padding-left: 20px;}
.mobile_sub_menu a { display: block; line-height: 32px; font-size: 15px;}
.toggleClass { right: 0%; transition: 0.5s;}
@media screen and (max-width: 1280px) {
    .headList li { padding: 0 20px;}
}
@media screen and (max-width: 1024px) {
    .navContainer { padding: 12px 0;}
    .navContainer .itemRight { margin: auto; margin-right: 0;}
    body { margin-top: 70px !important;}
    .headList { display: none;}
    .mobile_menu { flex: 0 1 10%; display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 18px;}
    .mobile_sub_menu { display: block;}
}
@media screen and (max-width:500px) {
    .headIcon { font-size: 0;}
    .headIcon img { max-width: 23%;}
    .navContainer .itemLeft { flex: 0 1 30%;}
    body { margin-top: 53px !important;}
    .headIcon a ~ a { margin-left: 10px;}
    .mobile_sub_menu { width: 60%; padding: 20px 20px;}
}



/* indexOne */
.indexOne { position: relative; overflow: hidden;}
.swiper_a li img { display: block;}
.swiper-pagination-a { position: absolute; bottom: 5% !important; text-align: center; z-index: 10;}
.swiper-pagination-a .swiper-pagination-bullet { width: 16px !important; height: 16px !important; background: #fff !important; margin: 0 10px !important;}
.oneLayout { position: absolute; left: 5%; top: 50%; transform: translateY(-50%); z-index: 10;}
.oneDiv1 { font-size: 28px; line-height: 1.5; color: #fff; text-transform: uppercase;}
.oneDiv2 { font-size: 20px; line-height: 1.5; margin: 60px 0; color: #fff;}
.oneDiv3 { width: 150px; line-height: 40px; text-align: center; border-radius: 20px; border: 1px solid #fff;}
.oneDiv3 a { display: block; color: #fff;}
@media screen and (max-width: 1024px) {
    .oneDiv1 { font-size: 24px;}
}
@media screen and (max-width: 768px) {
    .oneDiv1 { font-size: 28px;}
    .oneDiv2 { font-size: 18px;}
}
@media screen and (max-width: 500px) {
    .oneDiv1 { font-size: 14px; line-height: 1.5;}
    .oneDiv2 { font-size: 14px; margin: 25px 0;}
    .oneDiv2 br { display: none;}
    .oneDiv3 { font-size: 13px; width: max-content; padding: 0 10px; line-height: 28px;}
}



/* indexTwo */
.indexTwo { background: url(../images/bgTwo.jpg) center; background-size: cover; width: 100vw; height: 100vh; overflow: hidden;}
.twoContainer { width: 95%; margin: auto; max-width: 1600px; padding-top: 14vh;}
.twoContainer .itemLeft { flex: 0 1 35%; margin-right: 50px;}
.twoDiv1 { font-size: 60px; color: var(--style_color); font-weight: bold;}
.twoDiv1 span { font-size: 18px;}
.twoDiv2 { font-size: 36px; color: var(--style_color); text-transform: uppercase;}
.twoDiv3 { color: #fff; line-height: 24px; margin-top: 50px; line-height: 1.8;}
.twoDiv3 p + p { margin-top: 20px;}
.twoDiv4 { display: block; width: max-content; padding: 0 10px; line-height: 40px; text-align: center; background: #e60013; border-radius: 20px; margin: 25px 0 60px; color: #fff !important;}
.twoDiv5 { display: flex; justify-content: space-between; margin: auto;}
.twoDiv5 li { flex: 0 1 40%; color: #fff; text-align: center; margin-bottom: 20px;}
.twoDiv5 li div { font-size: 60px; font-family: Avenir;}
.twoDiv5 li p { font-size: 14px;}
.twoContainer .itemRight { display: flex; flex-direction: column; justify-content: space-between; display: none;}
.twoDiv6 { border-radius: 16px; overflow: hidden;}
.twoDiv7 { display: flex; justify-content: space-between;}
.twoDiv7 li { text-align: center;}
.twoDiv7 li p { font-size: 14px; color: #fff; margin-top: 8px;}
@media screen and (max-width: 1600px) {
    .twoContainer { padding-top: 12vh;}
    .twoDiv1 { font-size: 48px;}
    .twoDiv5 li div { font-size: 45px;}
    .twoContainer .itemLeft { flex: 0 1 45%;}
}
@media screen and (max-width: 1440px) {
    .twoContainer .itemRight { flex: 1;}
    .twoDiv7 { flex-wrap: wrap; margin-top: 20px;}
    .twoDiv7 li { margin-bottom: 10px;}
}
@media screen and (max-width: 1366px) {
    .twoDiv4 { margin: 30px 0 25px;}
}
@media screen and (max-width: 1280px) {
    .twoDiv3 { margin-top: 32px;}
    .twoDiv1 { font-size: 32px;}
    .twoDiv2 { font-size: 30px;}
    .twoDiv7 li { flex: 0 1 23%;}
}
@media screen and (max-width: 1024px) {
    .twoContainer .itemLeft { flex: 0 1 40%;}
    .twoDiv7 { display: none; justify-content: flex-start;}
    .twoDiv7 li { flex: 0 1 33%;}
    .twoDiv5 { flex-wrap: nowrap; width: 100%; margin: 20px 0;}
    .twoDiv5 li div { font-size: 32px;}
    .twoDiv4 { margin: 15px 0; display: none;}
    .twoContainer .itemRight { display: block; justify-content: space-evenly;}
    .twoContainer { padding-top: 10vh; display: block;}
    .twoDiv2 { font-size: 20px;}
    .twoDiv3 { margin-top: 12px;}
    .twoContainer .itemLeft { margin-right: 0; margin-bottom: 30px;}
    .twoDiv1 { font-size: 42px;}
    .twoDiv7 { flex-wrap: nowrap; margin-top: 40px;}
}
@media screen and (max-width: 768px) {
    .twoDiv7 { display: none;}
    .twoDiv1 { font-size: 40px;}
    .twoDiv5 { display: none;}
    .twoContainer { padding-top: 6vh;}
}
@media screen and (max-width: 500px) {
    .twoDiv1 { font-size: 22px;}
    .twoDiv2 { font-size: 15px; font-weight: bold;}
    .twoContainer { padding-top: 10vh;}
    .twoContainer .itemRight { display: none;}
    .twoDiv4 { font-size: 14px; line-height: 30px; width: 90px;}
    .twoDiv5 { flex-wrap: wrap;}
    .twoDiv5 li div { font-size: 24px;}
    .twoDiv3 { font-size: 13px;}
    .twoDiv3 p + p { margin-top: 12px;}
}




/* indexThree */
.indexThree { position: relative; overflow: hidden;}
.threeContainer li:nth-of-type(1) { width: 100vw; height: 100vh; background: url(../images/bgThree1.jpg) center; background-size: cover;}
.threeContainer li:nth-of-type(2) { width: 100vw; height: 100vh; background: url(../images/bgThree2.jpg) center; background-size: cover;}
.threeContainer li:nth-of-type(3) { width: 100vw; height: 100vh; background: url(../images/bgThree3.jpg) center; background-size: cover;}
.threeContainer li div { text-align: center; font-size: 36px; color: var(--style_color); margin: 15vh 0 20px; font-weight: bold;}
.threeContainer li p { color: #fff; text-align: center; line-height: 24px;}
.threeControl { position: absolute; bottom: 0%; height: 100%; width: 100%;}
.threeControl ul { height: 100%; display: flex; flex: 1;}
.threeControl li { height: 100%; position: relative; cursor: pointer; flex: 0 1 33.3%; text-align: center; color: #fff; opacity: 0.5; transition: 0.5s; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 5%; box-sizing: border-box;}
.threeControl li div { transition: 0.5s;}
.threeControl li p { transition: 0.5s; font-size: 30px; font-weight: bold; margin: 10px 0 15px;}
.threeControl li span { opacity: 0; transition: 0.5s;}
.threeControl li.on { opacity: 1;}
.threeControl li.on div, .threeControl li.on p, .threeControl li.on span { transform: translateY(-60px);}
.threeControl li.on span { opacity: 1;}
.threeControl li + li::after { content: ''; position: absolute; left: 0; bottom: 0; width: 1px; background: #fff; opacity: 0.5; height: calc(100vh - 75px);}
@media screen and (max-width: 1600px) {
    .threeContainer li div { font-size: 30px;}
}
@media screen and (max-width: 1440px) {
    .threeContainer li div { font-size: 24px;}
}
@media screen and (max-width: 1024px) {
    .threeControl li { padding-bottom: 30%;}
    .threeContainer li div { margin: 22vh 0 20px;}
    .threeControl li p { font-size: 20px;}
}
@media screen and (max-width: 768px) {
    .threeContainer li div { font-size: 28px;}
    .threeContainer li p { padding: 0 20px; box-sizing: border-box;}
    .threeContainer li p br { display: none;}
    .threeControl li p { font-size: 22px;}
}
@media screen and (max-width: 500px) {
    .threeControl li { padding-bottom: 5%;}
    .threeControl li p { margin: 8px 0 5px; font-size: 15px;}
    .threeControl li span { font-size: 12px;}
    .threeContainer li div { margin: 15vh 0 20px; font-size: 18px; text-align: left; padding: 0 12px; box-sizing: border-box;}
    .threeContainer li p { text-align: left; padding: 0 12px; font-size: 15px;}
    .threeControl li + li::after {  height: calc(100vh - 54px);}
}




/* four */
.four { width: 100vw; height: 100vh; background: url(../images/bgFour.jpg) center; background-size: cover; overflow: hidden;}
.fourContainer { width: 95%; margin: auto; max-width: 1600px; padding-top: 12vh;}
.fourContainer .itemTop div { color: #fff; text-align: center; font-size: 36px; font-weight: bold;}
.fourContainer .itemTop p { color: #fff; text-align: center; line-height: 24px; margin: 25px 0 55px;}
.fourContainer .itemBottom { height: max-content;}
.fourImg { margin-bottom: 25px;}
.fourImg img { border-radius: 16px;}
.fourLayout { position: absolute; transition: 1s;}
.fourIcon { display: flex; align-items: center; color: #fff; font-size: 24px; font-weight: bold; margin-bottom: 12px;}
.fourIcon img { margin-right: 10px;}
.fourContent { color: #fff; line-height: 24px; flex: 0 1 60%;}
.swiperFour ul { align-items: center; left: -18%;}
.swiperFour .swiper-slide { transition: 1s;}
.swiperFour .swiper-slide .fourLayout { visibility: hidden; opacity: 0;}
.swiperFour .swiper-slide-active .fourLayout { visibility: visible; opacity: 1;}
.swiperFour .swiper-slide-active { width: 43% !important;}
.swiperFour .swiper-slide-prev { width: 36% !important;}
.swiperFour .swiper-slide-next { width: 36% !important;}
.swiperFour { position: relative;}
.FourControl-prev { cursor: pointer; position: absolute; left: 14.6%; top: 50%; transform: translateY(-50%); z-index: 10;}
.FourControl-next { cursor: pointer; position: absolute; right: 15.5%; top: 50%; transform: translateY(-50%); z-index: 10;}
@media screen and (max-width: 1600px) {
    .fourContainer { padding-top: 10vh;}
    .fourContainer .itemTop p { margin: 20px 0 40px;}
}
@media screen and (max-width: 1440px) {
    .fourContainer .itemTop p { margin: 20px 0 50px;}
}
@media screen and (max-width: 1024px) {
    .swiperFour .swiper-slide-active { width: 50% !important;}
    .swiperFour .swiper-slide-prev { width: 40% !important;}
    .swiperFour .swiper-slide-next { width: 40% !important;}
    .swiperFour ul { left: -25.5%;}
    .four { background-size: 100% 150%; background-position-y: 0%;}
    .fourContainer { padding-top: 22vh;}
}
@media screen and (max-width: 768px) {
    .fourContainer .itemTop p br { display: none;}
    .fourContainer .itemTop div { font-size: 28px;}
    .swiperFour .swiper-slide-active { width: 60% !important;}
    .swiperFour .swiper-slide-prev { width: 50% !important;}
    .swiperFour .swiper-slide-next { width: 50% !important;}
    .swiperFour ul { left: -40%;}
    .fourLayout { display: block;}
    .fourIcon { font-size: 20px; margin-bottom: 18px;}
    .fourContainer { padding-top: 20vh;}
}
@media screen and (max-width: 500px) {
    .fourContainer { padding-top: 12vh;}
    .fourContainer .itemTop div { font-size: 18px; margin-bottom: 30px;}
    .fourContainer .itemTop p { margin: 12px 0 30px;}
    .fourIcon { font-size: 18px; margin-bottom: 10px;}
    .swiperFour .swiper-slide-active { width: 100% !important;}
    .swiperFour .swiper-slide-prev { width: 100% !important;}
    .swiperFour .swiper-slide-next { width: 100% !important;}
    .swiperFour ul { left: -110% !important;}
    .four { background-size: 100% 160%;}
    .FourControl-prev { left: 0; top: 75%; width: 20%;}
    .FourControl-next { right: 0; top: 75%; width: 20%;}
    .fourContainer .itemTop p { display: none;}
}



/* five */
.five { width: 100vw; height: 100vh; background: url(../images/bgFive.jpg) center; background-size: cover; overflow: hidden;}
.fiveContainer { width: 95%; margin: auto; max-width: 1600px; padding-top: 8vh;}
.fiveContainer .itemTop { text-align: center; color: #fff;}
.fiveContainer .itemTop div { font-size: 36px; font-weight: bold;}
.fiveContainer .itemTop p { line-height: 24px; margin: 25px 0 55px;}
.fiveContainer .itemTop br { display: none;}
.fiveContainer .itemBottom ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
.fiveContainer .itemBottom li { flex: 0 1 49%; margin: 0 0.5% 20px 0.5%; display: flex; padding: 15px; box-sizing: border-box; background: #fff; border-radius: 8px;}
.fiveImg { flex: 0 1 40%; overflow: hidden; border-radius: 8px; display: flex;}
.fiveLayout { flex: 1; margin-left: 15px; display: flex; flex-direction: column; justify-content: space-between;}
.fiveDiv1 { text-align: center; box-shadow: 0 5px 20px 0 #0593455b; line-height: 30px; border-radius: 20px; background: var(--style_color); color: #fff;}
.fiveDiv2 { padding: 8px 0 8px 8px; border-bottom: 1px solid #ccc; box-sizing: border-box; color: #222; line-height: 24px;}
.fiveDiv3 { border-radius: 8px; width: max-content; margin: 8px 0; padding: 2px 10px; line-height: 20px; font-size: 14px; text-align: center; background: #999; color: #fff;}
.fiveDiv4 { padding-left: 8px; box-sizing: border-box; color: #666666; line-height: 24px;}
@media screen and (max-width: 1600px) {
    .fiveDiv3 { margin: 5px 0;}
    .fiveContainer .itemTop div { margin-bottom: 40px;}
    .fiveContainer .itemTop p { display: none;}
}
@media screen and (max-width: 1440px) {
    .fiveDiv2 { padding-bottom: 10px; padding-top: 10px; padding-left: 0;}
    .fiveDiv4 { padding-left: 0;}
    .fiveLayout { margin-left: 15px;}
    .fiveDiv1 { font-size: 14px;}
    .fiveDiv2 { font-size: 14px;}
    .fiveDiv3 { font-size: 14px;}
    .fiveDiv4 { font-size: 14px;}
    .fiveContainer { padding-top: 10vh; width: 100%;}
}
@media screen and (max-width: 1366px) {
    .fiveImg { display: flex;}
}
@media screen and (max-width: 1024px) {
    .fiveContainer { padding-top: 5vh; width: 95%;}
    .fiveContainer .itemTop p { margin: 20px 0 30px;}
    .fiveContainer .itemTop p br { display: none;}
    .fiveContainer { padding-top: 10vh;}
    .fiveContainer .itemBottom li { display: block;}
    .fiveImg { height: 280px; align-items: center;}
    .fiveImg img { width: 100%;}
    .fiveLayout { margin-left: 0; margin-top: 12px;}
}
@media screen and (max-width: 768px) {
    .fiveContainer { padding-top: 4vh;}
    .fiveImg { height: 100px;}
    .fiveContainer .itemTop div { font-size: 28px; margin-bottom: 30px;}
    .fiveContainer .itemTop p { display: none;}
    .fiveDiv1 { font-size: 13px;}
    .fiveDiv2 { font-size: 13px;}
    .fiveDiv3 { font-size: 13px;}
    .fiveDiv4 { font-size: 13px;}
}
@media screen and (max-width: 500px) {
    .fiveContainer { padding-top: 9vh;}
    .fiveContainer .itemTop div { font-size: 18px; margin-bottom: 12px;}
    .fiveContainer .itemBottom ul { display: block;}
    .fiveImg { display: none;}
    .fiveDiv1 { width: auto; padding: 0 10px; line-height: 20px;}
    .fiveContainer .itemBottom li { padding: 10px; margin: 0; margin-bottom: 12px;}
    .fiveContainer .itemBottom li:nth-of-type(n+3) { display: none;}
    .fiveLayout { margin-top: 5px;}
}



/* six */
.six { width: 100vw; height: 100vh; background: url(../images/bgsix.jpg) center; background-size: cover; overflow: hidden;}
.sixContainer { width: 95%; margin: auto; max-width: 1600px; padding-top: 12vh;}
.sixContainer .itemTop { text-align: center; color: #fff;}
.sixContainer .itemTop div { font-size: 36px; font-weight: bold;}
.sixContainer .itemTop p { line-height: 24px; margin: 25px 0 55px;}
.sixContainer .itemBottom { display: flex; justify-content: space-between; align-items: flex-start;}
.sixImg { flex: 0 1 55%;}
.sixUl { margin-top: 20px; background: #fff; flex: 1; display: flex; flex-wrap: wrap; border: 1px solid #078c47; border-radius: 16px;}
.sixUl li { padding: 50px 40px 20px; box-sizing: border-box; flex: 0 1 50%; border-bottom: 1px solid #078c47; border-right: 1px solid #078c47;}
.sixUl li div { font-size: 24px; color: #059344; margin: 20px 0; font-weight: bold;}
.sixUl li p { line-height: 24px; color: #222222;}
.sixUl li:nth-of-type(n+3) { border-bottom: none;}
.sixUl li:nth-of-type(even) { border-right: none;}
@media screen and (max-width: 1600px) {
    .sixUl li { padding: 20px;}
}
@media screen and (max-width: 1440px) {
    .sixUl { margin-top: 0;}
}
@media screen and (max-width: 1366px) {
    .sixContainer .itemBottom { align-items: center;}
    .sixUl li div { font-size: 18px; margin: 16px 0;}
}
@media screen and (max-width: 1280px) {
    .sixContainer .itemBottom { align-items: center;}
}
@media screen and (max-width: 1024px) {
    .sixContainer { padding-top: 8vh;}
    .sixContainer .itemBottom { display: block;}
    .sixImg { text-align: center; height: 550px;}
    .sixImg img { height: 100%;}
    .sixContainer .itemTop p { margin: 20px 0 30px;}
}
@media screen and (max-width: 768px) {
    .sixContainer { padding-top: 6vh;}
    .sixContainer .itemTop p { display: none;}
    .sixContainer .itemTop div { font-size: 28px; margin-bottom: 30px;}
    .sixImg { height: 350px;}
    .sixUl li { padding: 25px 30px;}
    .sixUl li div { margin: 10px 0;}
}
@media screen and (max-width: 500px) {
    .sixContainer .itemTop div { font-size: 18px; margin-bottom: 12px;}
    .sixContainer { padding-top: 10vh;}
    .sixContainer .itemTop p br { display: none;}
    .sixImg { display: none;}
    .sixUl li div { font-size: 15px;}
    .sixUl li { padding: 10px;}
    .sixUl li p { font-size: 12px;}
}




/* about */
.aboutBanner { position: relative; height: 400px; background: url(../images/about.jpg) center; background-size: cover;}
.aboutBanner div { position: absolute; font-size: 32px; color: #fff; text-align: center; width: 100%; top: 50%; transform: translateY(-50%); text-transform: uppercase;}
@media screen and (max-width: 1024px) {
    .aboutBanner div { font-size: 28px;}
    .aboutBanner { height: 300px !important;}
}
@media screen and (max-width: 500px) {
    .aboutBanner div { font-size: 16px;}
    .aboutBanner { height: 180px !important;}
}




/* aboutOne */
.aboutOneContianer { width: 95%; margin: auto; max-width: 1346px; padding-top: 35px;}
.aboutOneContianer .itemTop img { border-radius: 16px;}
.aboutOneContianer .itemBottom { text-align: center; margin-top: 60px;}
.aboutOneDiv1 { font-size: 32px; color: #222;}
.aboutOneDiv2 { margin: 20px 0;}
.aboutOneDiv2 br { display: none;}
.aboutOneDiv2 p { color: #666; line-height: 24px; margin-bottom: 20px;}
.aboutOneList { margin: auto; padding: 15px; box-sizing: border-box; display: flex; justify-content: space-between; max-width: 934px; background: #fff; border-radius: 20px; position: relative; bottom: -25px; z-index: 1;}
.aboutOneList li { flex: 1;}
.aboutOneList li div { font-size: 60px; color: #e60013; font-family: Avenir;}
.aboutOneList li p { font-size: 14px; color: #666666; margin-top: 30px;}
@media screen and (max-width: 1024px) {
    .aboutOneContianer .itemBottom { margin-top: 36px;}
    .aboutOneDiv1 { font-size: 28px;}
    .aboutOneDiv2 { text-align: left;}
    .aboutOneDiv2 br { display: none;}
    .aboutOneList li div { font-size: 40px;}
    .aboutOneList li p { margin-top: 5px;}
}
@media screen and (max-width: 768px) {
    .aboutOneDiv1 { font-size: 24px;}
    .aboutOneDiv2 { margin: 20px 0 0 0;}
    .aboutOneDiv2 p { margin-bottom: 12px;}
    .aboutOneList { padding: 0 15px 15px;}
    .aboutOneList li div { font-size: 35px;}
}
@media screen and (max-width: 500px) {
    .aboutOneDiv1 { font-size: 18px; font-weight: bold;}
    .aboutOneDiv2 p { line-height: 2;}
    .aboutOneDiv2 { margin: 10px 0 0 0;}
    .aboutOneList { flex-wrap: wrap;}
    .aboutOneList li { flex: 0 1 50%;}
    .aboutOneList li div { font-size: 26px;}
    .aboutOneList li:nth-of-type(-n+2) { margin-bottom: 10px;}
}



/* aboutTwo */
.aboutTwo { background: #f5f5f5;}
.aboutTwoContainer { width: 95%; margin: auto; max-width: 1118px; padding: 100px 0 30px;}
.aboutTwoContainer ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
.aboutTwoContainer li { flex: 0 1 40%; margin-bottom: 30px;}
.aboutTwoImg img { border-radius: 16px;}
.aboutTwoLayout { display: flex; justify-content: space-between; margin-top: 20px;}
.aboutTwoIcon { margin-right: 20px;}
.aboutTwoContent { flex: 1;}
.aboutTwoContent div { font-size: 40px; color: #222; padding: 20px 0;}
.aboutTwoContent p { line-height: 24px; color: #666666;}
@media screen and (max-width: 1024px) {
    .aboutTwoContainer li { flex: 0 1 45%;}
    .aboutTwoContent div { font-size: 20px; padding: 0 0 15px;}
    .aboutTwoIcon { width: 12%;}
}
@media screen and (max-width: 768px) {
    .aboutTwoContainer li { flex: 0 1 48%;}
    .aboutTwoContainer { padding: 80px 0 30px;}
}
@media screen and (max-width: 500px) {
    .aboutTwoContainer ul { display: block;}
    .aboutTwoContent div { padding: 10px 0 15px; font-size: 16px; font-weight: bold;}
    .aboutTwoContainer { padding: 70px 0 20px;}
}



/* aboutThree */
.aboutThree { height: 787px; background: url(../images/bgAboutThree.jpg) center; background-size: cover;}
.aboutThreeContainer { text-align: center; padding: 75px 2% 0; box-sizing: border-box;}
.aboutThreeContainer div { font-size: 40px; color: #222222;}
.aboutThreeContainer p { color: #666666; margin-top: 20px;}
@media screen and (max-width: 1024px) {
    .aboutThreeContainer { padding-top: 40px;}
    .aboutThreeContainer div { font-size: 28px;}
    .aboutThreeContainer p { margin-top: 10px;}
    .aboutThree { height: 500px;}
}
@media screen and (max-width: 768px) {
    .aboutThreeContainer div { font-size: 24px;}
    .aboutThreeContainer p { display: none;}
    .aboutThree { height: 400px;}
}
@media screen and (max-width: 500px) {
    .aboutThree { display: none;}
}



/* solve */
.solveBanner { background: url(../images/solve.jpg) center;}
.caseList ul { display: flex; border-bottom: 1px solid var(--style_color); padding: 30px 0 10px; flex-wrap: wrap;}
.caseList li {padding: 10px 0; text-align: center;}
.caseList li a { padding: 7px 14px; color: #222; transition: 0.5s; border-radius: 20px; line-height: 1;}
.caseList li.current a { background: var(--style_color); border-radius: 20px; color: #fff;}
.caseList li:hover a { background: var(--style_color); color: #fff;}
.caseList .designList { display: block;}
.caseList .designList li { text-align: left;}
.case { width: 95%; margin: auto; max-width: 1346px;}
.caseContainer { padding: 50px 0 70px;}
.caseContainer li { float: left; width: 31%; margin: 0 1% 3% 1%;}
.caseImg img { transition: 0.5s; display: block;}
.caseImg { overflow: hidden; border-radius: 8px;}
.caseName { text-align: center; font-size: 16px; line-height: 24px; height: 24px; overflow: hidden; color: #222222; margin-top: 18px; justify-content: space-between;}
.caseName p { line-height: 24px; height: 24px; overflow: hidden; flex: 0 1 70%;}
.caseContainer li:hover img { transform: scale(1.05);}
.design { display: flex; }
.design .caseList { margin-right: 30px;}
.design .caseContainer { flex: 1;}
@media screen and (max-width: 1024px) {
    .caseList ul { display: flex !important; flex-wrap: nowrap; white-space: nowrap; overflow: auto; scrollbar-width: none; -ms-overflow-style: none;}
    .caseList ul::-webkit-scrollbar { display: none;}
    .design { display: block;}
}
@media screen and (max-width: 768px) {
    .caseList ul { padding: 10px 0;}
    .caseContainer { padding: 40px 0 50px;}
    .caseContainer li { width: 48%;}
    .caseName { padding: 0 10px; overflow: hidden; line-height: 24px; height: 24px;}
    .caseName p { overflow: hidden; line-height: 24px; height: 24px;}
}
@media screen and (max-width: 500px) {
    .caseList ul { padding: 8px 0;}
    .caseList li a { padding: 5px 12px;}
    .caseLi .caseName div { font-size: 12px !important;}
    .caseName { font-size: 15px; margin-top: 8px;}
}



/* case */
.caseBanner { background: url(../images/case.jpg) center;}
.caseLi .caseName { display: flex; align-items: center;}
.caseLi .caseName div { background: #e6e6e6; border-radius: 20px; font-size: 14px; color: #666666; width: 100px; line-height: 20px; text-align: center; margin-right: 12px;}







/* news */
.newsBanner { background: url(../images/news.jpg) center;}
.news { width: 95%; margin: auto; max-width: 1346px;}
.newsContainer { padding: 40px 0 60px;}
.newsContainer li { box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2); box-sizing: border-box; float: left; width: 31%; margin: 0 1% 3% 1%; background: #fff; overflow: hidden; border-radius: 8px;}
.newsLayout { padding: 25px 30px;}
.newsTitle { font-size: 20px; color: #222222; font-weight: bold; line-height: 1.5; height: 60px; overflow: hidden;}
.newsDate { margin: 8px 0 12px; display: flex; align-items: center; font-size: 14px; color: #cccccc;}
.newsDate img { margin-right: 4px;}
.newsContent { color: #666666; line-height: 1.5; height: 72px; overflow: hidden;}
.newsImg { overflow: hidden;}
.newsImg img { display: block;}
@media screen and (max-width: 1024px) {
    .newsLayout { padding: 15px 20px;}
    .newsTitle { height: 27px; font-size: 18px;}
}
@media screen and (max-width: 768px) {
    .newsContainer li { width: 48%;}
    .newsContainer { padding: 40px 0 50px}
}
@media screen and (max-width: 500px) {
    .newsContainer li { width: 100%; margin: 0 1% 8% 1%;}
}



/* contact */
.contactBanner { background: url(../images/contact.jpg) center;}
.contactContainer { width: 95%; margin: auto; max-width: 1346px; padding: 80px 0; display: flex; justify-content: space-between;}
.contactDiv1 { font-size: 24px; color: #222222;}
.contactDiv2 { margin-bottom: 10px;}
.contactContainer .itemLeft { display: flex; flex-direction: column; justify-content: space-around;}
.contactContainer .itemLeft p { color: #666666; line-height: 24px;}
.contactDiv3 { display: flex; text-align: center; color: #808080; font-size: 14px;}
.contactDiv3 div { margin-right: 40px;}
.contactContainer .itemRight { flex: 0 1 50%;}
#dituContent { border-radius: 16px; height: 400px !important;}
@media screen and (max-width: 1024px) {
    .contactContainer { padding: 50px 0;}
    .contactContainer .itemLeft { margin-right: 20px;}
    .contactDiv1 { font-size: 20px;}
    .contactDiv3 { text-align: left;}
    .contactDiv3 div { flex: 0 1 50%;}
}
@media screen and (max-width: 768px) {
    .contactDiv1 { font-size: 22px;}
    .contactContainer .itemLeft { justify-content: space-evenly;}
}
@media screen and (max-width: 500px) {
    .contactContainer { display: block; padding: 30px 0 50px;}
    #dituContent { height: 220px !important;}
    .contactDiv1 { font-size: 17px;}
    .contactDiv3 div { margin-right: 20px;}
    .contactDiv3 { font-size: 12px;}
    .contactContainer .itemLeft { margin-right: 0;}
    .contactDiv2 { margin: 10px 0; width: 50%;}
    .contactContainer .itemLeft p { line-height: 20px;}
    .contactDiv3 { margin: 12px 0;}
    .iw_poi_title { font-size: 12px;}
    .iw_poi_content { font-size: 12px;}
}




/* footer */
.footer { height: auto !important; background: url(../images/footer.jpg) center; background-size: cover;}
.footerContainer { width: 95%; margin: auto; max-width: 1600px;}
.footerContainer .itemTop { padding: 70px 0 35px; display: flex; justify-content: space-between;}
.footerList { display: flex; justify-content: space-between; flex: 0 1 50%; margin-right: 30px;}
.footerDiv1 h3 { color: #09df68; margin-bottom: 20px; font-size: 18px;}
.footerDiv1 a { color: #ffffff7a; margin-bottom: 12px; display: block; font-size: 14px;}
.footerImformation { display: flex; flex: 1;}
.footerDiv3 { margin-right: 30px; text-align: right;}
.footerDiv3 div { color: #004f03; display: flex; align-items: center; justify-content: center; margin: auto; margin-right: 0; width: 100px; height: 24px; background: #05e247; border-radius: 12px;}
.footerDiv3 img { margin-right: 5px;}
.footerDiv3 p { font-size: 36px; color: #fff; font-family: Avenir; margin: 6px 0 8px; font-weight: bold;}
.footerDiv3 span { color: #fff;}
.footerScan ul { display: flex; text-align: center;}
.footerScan li p { color: #fff; opacity: 0.5; font-size: 12px;}
.footerScan li { margin-left: 10px;}
.footerContainer .itemBottom { border-top: 1px dashed rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5); padding: 20px 0; line-height: 1.5; justify-content: space-between;}
.footerContainer .itemBottom a { color: rgba(255, 255, 255, 0.5);}
.footer a:hover { text-decoration: underline;}
.footerLogo { display: none;}
@media screen and (max-width: 1440px) {
    .footerScan ul { display: block;}
    .footerScan li { margin-bottom: 20px;}
}
@media screen and (max-width: 1280px) {
    .footerList { flex: 0 1 54%;}
    .footerLogo { display: none;}
}
/* @media screen and (max-width: 1024px) {
    .footerList { margin-right: 20px; flex: 0 1 40%;}
    .footerDiv3 p { font-size: 28px;}
    .footerDiv3 { margin-right: 12px;}
    .footerDiv1 h3 { font-size: 16px;}
    .footerContainer .itemBottom span { display: none;}
} */
@media screen and (max-width: 1024px) {
    .footerList { display: none;}
    .footerContainer .itemTop { padding: 40px 0 30px;}
    .footerImformation { justify-content: space-between; align-items: center;}
    .footerContainer .itemTop { display: block;}
    .footerDiv3 div { margin-right: 0; margin-left: 0;}
    .footerDiv3 { text-align: left;}
    .footerContainer .itemBottom { font-size: 14px;}
    .footerScan ul { display: flex;}
    .footerScan li { margin-bottom: 0;}
}
@media screen and (max-width: 768px) {
    .footerDiv3 p { font-size: 30px;}
    .footerContainer .itemBottom span { display: none;}
}
@media screen and (max-width: 500px) {
    .footerDiv3 { margin-right: 0;}
    .footerDiv3 p { font-size: 20px;}
    .footerScan ul { text-align: left; margin-top: 20px;}
    .footerScan ul li { flex: 0 1 50%; margin-left: 0;}
    .footerImformation { display: block;}
    .footerContainer .itemBottom { display: block; padding: 5px 0;}
    .footerContainer .itemTop { padding: 30px 0 25px;}
    .footerDiv3 div { font-size: 12px;}
    .footerScan li p { margin-top: 6px;}
}




.swiper_pagination_all { z-index: 10; position: fixed; right: 35px !important; top: 50%; transform: translateY(-50%);}
.swiper_pagination_all .swiper-pagination-bullet { outline: 2px solid transparent; transition: 0.5s; position: relative; background: #fff !important; margin: 24px auto !important; opacity: 1 !important;}
.swiper_pagination_all .swiper-pagination-bullet-active { background: transparent !important; width: 12px !important; height: 12px !important; outline: 2px solid #fff;}
.swiper_pagination_all .swiper-pagination-bullet:nth-child(1) { display: none !important;}
.swiper_pagination_all .swiper-pagination-bullet:nth-child(2)::before { content: 'ABOUT'; position: absolute; left: -80px; color: #fff; font-size: 14px; width: max-content; top: 50%; transform: translateY(-50%);}
.swiper_pagination_all .swiper-pagination-bullet:nth-child(3)::before { content: 'CASE'; position: absolute; left: -80px; color: #fff; font-size: 14px; width: max-content; top: 50%; transform: translateY(-50%);}
.swiper_pagination_all .swiper-pagination-bullet:nth-child(4)::before { content: 'ADVANDAGE'; position: absolute; left: -80px; color: #fff; font-size: 14px; width: max-content; top: 50%; transform: translateY(-50%);}
.swiper_pagination_all .swiper-pagination-bullet:nth-child(5)::before { content: 'CHOOSE'; position: absolute; left: -80px; color: #fff; font-size: 14px; width: max-content; top: 50%; transform: translateY(-50%);}
.swiper_pagination_all .swiper-pagination-bullet:nth-child(6)::before { content: 'DESIGN'; position: absolute; left: -80px; color: #fff; font-size: 14px; width: max-content; top: 50%; transform: translateY(-50%);}
.swiper_pagination_all .swiper-pagination-bullet:nth-child(7) { display: none !important;}
.swiper_pagination_all .swiper-pagination-bullet::before { opacity: 0; transition: 0.5s;}
.swiper_pagination_all .swiper-pagination-bullet-active::before { opacity: 1;}
@media screen and (max-width: 500px) {
    .swiper_pagination_all { right: 20px !important;}
    .swiper_pagination_all .swiper-pagination-bullet::before { left: -52px !important; font-size: 12px !important;}
    .swiper_pagination_all .swiper-pagination-bullet:nth-child(4)::before { left: -80px !important; font-size: 12px !important;}
    .swiper_pagination_all .swiper-pagination-bullet:nth-child(5)::before { left: -60px !important; font-size: 12px !important;}
}