/*
 *  style.css by 453883682@qq.com
 */

.banner{  position: relative; height: 100vh;}
.ban-swiper{ position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
.ban-swiper .swiper-slide,
.ban-swiper .swiper-wrapper { transform: translate3d(0px,0,0);}
.ban-swiper .swiper-slide{ overflow: hidden; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.ban-img{  position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;}
.ban-img::before,
.ban-img::after{ display: block; content: ""; position: absolute; z-index: 1;}
.ban-img::before{ left: 0; top: 0; width: 100%; height: 50%; background: linear-gradient(to bottom,rgba(0,41,92,.93) 0%, rgba(0,0,0,0));}
.ban-img::after{ left: 0; top: 0; width: 33.33%; height: 100%; background: linear-gradient(to right,rgba(37,92,161,1) 0%, rgba(0,0,0,0));}
.ban-img .img-bg{ width: 100%; height: 100%; transform: scale(1.1); transition: all 1s;}
.ban-img .mobile{ display: none;}
.ban-text{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;}
.ban-tit{ line-height: 1.25; margin-bottom: .3rem; font-family: Arial; font-weight: 600;}
.ban-en{ text-transform: uppercase; margin: .2rem 0; max-width: 776px;}
.ban-line{ display: block; width: 100%; max-width: 4.08rem;}
.ban-line span{ display: block; width: 100%; height: 3px; max-height: .04rem; background-color: #FFFFFF; margin: .2rem 0;}
.ban-des{ max-width: 642px; line-height: 2; margin-bottom: .3rem;}
.ban-btn{ display: flex; align-items: center; justify-content: space-between; width: fit-content; min-width: 2.3rem; line-height: 47px; padding: 0 .25rem; background-color: var(--blue-color); border-radius: 24px; transition: all .3s;}
.ban-btn span{ padding: 0 5px; padding-right: .4rem;}
.ban-btn i{ position: relative; display: block; width: 5px; height: 5px; background-color: #FFFFFF; border-radius: 50%; transition: all .3s;}
.ban-btn i::before,
.ban-btn i::after{ display: block; content: ""; position: absolute; transition: all .3s;}
.ban-btn i::before{ width: 17px; height: 17px; border-radius: 50%; border: 1px solid #FFFFFF; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.ban-btn i::after{ width: .5rem; height: 1px; background-color: #FFFFFF; right: 0; top: 50%; transform: translateY(-50%);}
.ban-btn:hover{ background-color: var(--main-color);}
.ban-btn:hover i{ margin-right: 20px;}
.ban-btn:hover i::before{ width: 22px; height: 22px;}
.ban-btn:hover i::after{ transform: translateX(100%) scaleX(0.6); transform-origin: left center;}
.ban-swiper .swiper-slide-active .ban-img .img-bg{ transform: scale(1); transition: all 6s;}
.ban-page{ position: absolute; left: 0; right: 0; bottom: .4rem; line-height: 1; z-index: 2;}
.ban-page .swiper-pagination{ text-align: left; margin: 0 .1rem;}
.ban-page .swiper-pagination-bullet{ display: block; position: relative; width: 11px; height: 11px; max-width: .2rem; max-height: .2rem; border-radius: 50%; border: .02rem solid #FFFFFF; opacity: 1; margin: 0 .08rem;}
.ban-page .swiper-pagination-bullet-active{ background-color: #FFFFFF;}
.ban-prev i,
.ban-next i{ display: block;}
.ban-mouse{ position: relative; width: 16px; height: 20px; border: 2px solid #FFFFFF; border-radius: 6px; margin-left: auto;}
.ban-mouse i{ display: block; width: 2px; height: 4px; background-color: #FFFFFF; position: absolute; left: 50%; margin-left: -1px; top: 15%; animation: inArrow 2s linear infinite;}
.ban-page-num{ line-height: 1; margin-top: .3rem; font-family: 'DINPro-Bold';}

.box-bg{ position: relative; background-color: #FFFFFF; overflow: hidden; z-index: 1;}
.box1{ min-height: 100vh; padding: 1.2rem 0;}
.box1-left{ flex-shrink: 0; width: 40%; max-width: 525px; margin-right: .4rem;}
.box1-text{ line-height: 1.7; margin: .5rem 0; word-wrap: break-word; word-break: break-all; text-align: justify; hyphens: manual;}
.box1-text strong{ color: var(--blue-color);}
.box1-right{ width: 70%;}
.box1-map{ position: relative; width: 114.97%;}
.box1-map img{ width: 100%; height: auto;}
.box1-map-list{ list-style: none;}
.box1-map-list li{ width: 10px; height: 10px; border-radius: 50%; position: absolute; left: var(--x); top: var(--y); background-color: var(--color); z-index: 1;}
.box1-map-list li span{ display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; animation: aniScale 3s linear infinite; z-index: -1;}
.box1-map-list li span i{ display: block; width: 100%; height: 100%; border-radius: 50%; background-color: var(--color); opacity: .6;}
.box1-map-list li span:nth-child(2){ animation-delay: 1.5s;}

.box2-bg{ position: relative; padding: .9rem 0; background-color: #FFFFFF; z-index: 1;}
.box2-bg::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 50%; max-height: 437px; background-color: #00295C; z-index: -1;}
.box2-swiper{ position: relative; margin: .6rem 0 0;}
.box2-top{ position: relative;}
.box2-top .swiper-container{ width: calc(100% + .48rem); margin-left: -.24rem;}
.box2-top .swiper-slide{ padding: 0 .24rem 23px;}
.box2-top .swiper-btn span{ transform: translateY(-100%);}
.box2-link{ height: 100%; padding: .18rem .14rem 0; background-color: #FFFFFF; box-shadow: 0px 1px .2rem 0px rgba(7,0,2,0.11); overflow: visible;}
.box2-img{ padding-bottom: 67.06%;}
.box2-text{ overflow: hidden;}
.box2-title{ line-height: 1.25; margin: .2rem 0; text-transform: uppercase;}
.box2-con{ height: 90px; line-height: 30px; -webkit-line-clamp: 3; margin: .2rem 0;}
.box2-more{ opacity: 0; transform: translateY(25%); transition: all .6s linear;}
.box2-link:hover .box2-img .img-bg{ transform: scale(1.05);}
.box2-link:hover .box2-title{ color: var(--main-color);}
.box2-link:hover .box2-more{ transform: translateY(50%); opacity: 1;}
.box2-bot{ margin-top: .4rem;}
.box2-bot .box2-btn{ display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; max-width: .5rem; max-height: .5rem; border-radius: 50%; background-color: #f1f2f5; color: var(--main-color); cursor: pointer; transition: all .3s;}
.box2-bot .box2-btn:hover{ background-color: var(--main-color); color: #FFFFFF;}
.box2-bot .swiper-pagination{ flex: auto; height: 5px; max-height: .06rem; background-color: #eef1f2; margin: 0 .4rem; border-radius: 3px; overflow: hidden;}
.box2-bot .swiper-pagination-progressbar-fill{ background-color: #2256a2; border-radius: 3px;}

.box3-bg{ padding: .3rem 0; background-color: #FFFFFF; overflow: hidden;}
.box3-swiper{ position: relative; margin: .8rem 0;}
.box3-swiper .box3-link{ overflow: hidden;}
.box3-swiper .box3-img{ padding-bottom: 100%;}
.box3-swiper .box3-shadow{ position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 80%; background: linear-gradient(180deg, transparent 0%, rgba(0,24,65,1) 90%); transition: all .6s linear;}
.box3-swiper .box3-text{ position: absolute; left: 0; right: 0; bottom: 0; width: 90%; line-height: 1.25; padding: .3rem .15rem; margin: 0 auto;}
.box3-swiper .box3-link:hover .img-bg{ transform: scale(1.05);}
.box3-swiper .box3-link:hover .box3-shadow{ height: 100%;}

.box4-bg{ padding: .8rem 0; background: url(../images/box4-bg.png) center center fixed no-repeat; background-size: cover; overflow: hidden;}
.box4-swiper{ position: relative;}
.box4-text{ line-height: 1.67; margin: .56rem 0 .66rem;}
.box4-link{ position: relative;}
.box4-img{ padding-bottom: 71.91%;}
.box4-tab{ position: absolute; left: 0; right: 0; bottom: .2rem; text-align: center;}
.box4-tab li{ display: inline-block; vertical-align: middle; width: 12px; height: 12px; border-radius: 50%; max-width: .16rem; max-height: .16rem; margin: 0 .04rem; cursor: pointer;}
.box4-tab li span{ display: block; width: 100%; height: 100%; border-radius: 50%; background-color: var(--color);}
.box4-title{ line-height: 1.1; margin-top: .3rem; font-weight: normal;}
.box4-swiper .swiper-buttion span{ background-color: rgba(255, 255, 255, 0.1); transform: translateY(-100%);}
.box4-swiper .swiper-prev{ left: auto; right: 100%; margin-right: .2rem;}
.box4-swiper .swiper-next{ right: auto; left: 100%; margin-left: .2rem;}

.box5-bg{ padding: .8rem 0; background-color: #F4F6F8; overflow: hidden;}
.box5-bg .box-top{ margin: .4rem 0;}
.box5-swiper{ margin: .49rem 0;}
.box5-link{ overflow: hidden;}
.box5-img{ padding-bottom: 58.48%;}
.box5-text{ background-color: #FFFFFF; padding: 0 .4rem; overflow: hidden;}
.box5-title{ line-height: 1.5; height: 3em; margin: .35rem 0 .3rem;}
.box5-con{ margin: .3rem 0;}
.box5-time{ margin: .3rem 0;}
.box5-link:hover .img-bg{ transform: scale(1.05);}
.box5-link:hover .box5-title{ color: var(--main-color);}
.box5-bg .swiper-pagination{ width: 100%; height: 2px; background-color: #DFE0E1;}
.box5-bg .swiper-pagination-progressbar-fill{ background-color: var(--main-color);}


.about-bg{ padding: .3rem 0;}
.about-text{ margin: .9rem 0;}
.about-bg .box1-map{ margin: .9rem 0; width: 100%;}
.about-bg .box1-map-list li{ width: 14px; height: 14px;}

.pro-bg{ padding: .8rem 0;}
.pro-list{ margin: 0 -.24rem;}
.pro-list li{ width: 33.33%; padding: .22rem .24rem;}
.pro-link{ display: block; height: 100%; padding: .18rem .15rem; background: #FFFFFF; box-shadow: 0px 1px 32px 0px rgba(7,0,2,0.11);}
.pro-img{ padding-bottom: 67.06%; margin-bottom: .16rem;}
.pro-text{ max-width: 388px; margin: 0 auto; overflow: hidden;}
.pro-title{ line-height: 1.4; margin: .1rem 0; padding: .1rem 0; text-transform: uppercase; border-bottom: 1px solid #BFBFBF; transition: all .3s linear;}
.pro-con{ margin: .15rem 0; line-height: 1.6;}
.pro-link:hover .img-bg{ transform: scale(1.05);}
.pro-link:hover .pro-title{ color: var(--main-color);}

.case-bg{ padding: .7rem 0;}
.case-list li{ margin-bottom: .2rem;}
.case-top{ line-height: 1.1; padding: .15rem 0; cursor: pointer; transition: all .3s;}
.case-name{ flex-shrink: 0; text-transform: uppercase; margin-right: .44rem; overflow: hidden; font-weight: bold;}
.case-line{ flex: auto; height: 1px; background-color: #BFBFBF; overflow: hidden;}
.case-address{ flex: auto; overflow: hidden;}
.case-handle{ position: relative; flex-shrink: 0; width: 25px; height: 25px; line-height: 25px; border-radius: 50%; background-color: var(--blue-color); margin-left: auto; text-align: center; color: #FFFFFF;}
.case-handle i{ font-size: 12px;}
.case-text{ line-height: 1.6; padding: .3rem 0; background-color: #FFFFFF; margin-top: .06rem; margin-bottom: -.2rem; display: none;}
.case-item{ margin: 0 -3px;}
.case-item li{ width: 33.33%; padding: 3px;}
.case-link{ display: block; height: 100%; background-color: #F4F6F8;}
.case-img{ padding-bottom: 99.16%;}
.case-title{ line-height: 1.25; padding: .2rem .3rem; transition: all .3s; text-align: center;}
.case-list li.active .case-handle{ transform: rotate(-90deg);}
.case-link:hover .img-bg{ transform: scale(1.05);}
.case-link:hover .case-title{ color: var(--blue-color);}

.cooker-bg{ padding: .2rem 0 .6rem;}
.cooker-text{ line-height: 1.67; margin: .6rem 0;}
.cooker-text p strong{ font-size: 133%;}
.cooker-list{ margin: 0 -.14rem;}
.cooker-list > li{ width: 50%; padding: 0 .14rem; margin-bottom: .5rem;}
.cooker-list .box4-title{ margin: .3rem 0; transition: all .3s;}
.cooker-list .box4-link:hover .img-bg{ transform: scale(1.05);}
.cooker-list .box4-link:hover .box4-title{ color: var(--main-color);}

.news-top-bg{ padding: .7rem 0; background: #F4F6F8; overflow: hidden;}
.news-top{ margin: 0 -.3rem;}
.news-top li{ width: 33.33%; padding: .3rem;}
.news-bot-bg{ padding: .2rem 0;}
.news-list{ list-style: none; margin: .4rem 0;}
.news-list + .paging{ margin: .5rem 0;}
.news-link{ display: flex; align-items: center; padding: .6rem 0; border-bottom: 1px solid #BFBFBF; transition: all .3s;}
.news-time{ flex-shrink: 0; width: 25%; max-width: 2.1rem; min-height: 2.1rem; margin-right: .6rem; background: url(../images/news-time.png) center center no-repeat; background-size: cover;}
.news-time strong{ margin: .04rem 0;}
.news-time p{ margin: .04rem 0;}
.news-time i{ display: block; width: .8rem; max-width: 80%; height: 1px; margin: .1rem 0; background-color: #a7a9af;}
.news-text{ flex: auto; overflow: hidden;}
.news-title{ line-height: 1.5; margin: 0 0 .2rem;}
.news-con{ line-height: 1.5; height: auto; margin: .2rem 0 .3rem; -webkit-line-clamp: 2;}
.news-link:hover { border-bottom-color: var(--main-color);}
.news-link:hover .news-title{ color: var(--main-color);}
.news-link:hover .news1-top-more span{ background-color: transparent; color: #FFFFFF;}
.news-link:hover .news1-top-more span i{ transform: rotate(45deg);}

.news-detail{ padding: 1rem 0;}
.news-name{ max-width: 1295px; line-height: 1.2; margin: .2rem auto;}
.news-date{ position: relative; text-align: center; margin: .5rem 0; z-index: 1;}
.news-date::before{ display: block; content: ""; position: absolute; left: 0; top: 50%; margin-top: -2px; width: 100%; height: 1px; background-color: #BFBFBF; z-index: -1;}
.news-date span{ display: inline-flex; align-items: center; padding: 0 .15rem; background-color: #FFFFFF;}
.news-date span img{ display: block; width: 22px; height: auto; max-width: .24rem; margin-right: .1rem; margin-top: -2px;}
.news-info{ margin: .5rem 0; line-height: 1.67;}
.news-info{ line-height: 1.875; margin: .3rem 0;}
.news-info img{ display: block; max-width: 100% !important; height: auto !important; margin: .1rem auto;}

.download-bg{ position: relative; padding: .6rem 0; overflow: hidden;}
.download-bg:nth-child(2n){ background-color: #F4F6F8;}
.download-bg .case-top{ margin: .2rem 0;}
.download-list{ margin: .2rem -.3rem;}
.download-list li{ width: 50%; padding: .35rem .3rem;}
.download-link{ display: flex; align-items: center;}
.download-icon{ flex-shrink: 0; width: 122px; height: 122px; max-width: 1.4rem; max-height: 1.4rem; background-color: var(--main-color); margin-right: .4rem; transition: all .3s linear;}
.download-icon img{ width: .5rem; max-height: .5rem; transition: all 1s linear;}
.download-right{ flex: auto; overflow: hidden;}
.download-title{ line-height: 1.5; margin-bottom: .2rem; font-weight: normal;}
.download-link:hover .download-icon{ border-radius: .1rem;}
.download-link:hover .download-icon img{ transform: translateY(5px);}
.download-link:hover .download-title{ color: var(--main-color);}

.con-bg{ padding: .9rem 0;}
.con-bg:nth-child(2n + 1){ background-color: #F4F6F8;}
.con-list{ margin: 0 -.22rem;}
.con-list li{ width: 50%; padding: .19rem .22rem;}
.con-link{ height: 100%; min-height: 165px; padding: .2rem .5rem; background-color: #FFFFFF; transition: all .3s;}
.con-icon{ flex-shrink: 0; width: 76px; height: auto; max-width: .8rem; margin-right: .5rem;}
.con-right{ flex: auto; overflow: hidden;}
.con-title{ line-height: 1.1; margin-bottom: .1rem;}
.con-text{ line-height: 1.6;}
.con-text a{ color: #333333;}
.con-link:hover{ box-shadow: 0 .1rem .2rem rgba(0,0,0,0.1);}
.con-link:hover .con-icon img{ animation: swing 1s linear 1;}
.con-form-top{ line-height: 1.6; margin: .4rem 0;}
.con-form-top h3{ line-height: 1.6; margin: .1rem 0;}
.con-form{ margin: .4rem 0;}
.form-list{ margin: 0 -.25rem;}
.form-list li{ width: 50%; padding: .2rem .25rem;}
.form-list li.one{ width: 100%;}
.form-item{ position: relative; display: flex; align-items: flex-start; border-radius: .1rem; border: 1px solid #e0e0e0; transition: all .3s;}
.form-label{ flex-shrink: 0; padding: .2rem 0; color: #898989; line-height: 42px; padding-left: .3rem; margin-right: .1rem;}
.form-label span{ color: red;}
.form-input{ flex: auto; overflow: hidden; display: block; width: 100%; height: calc(42px + .4rem); padding: .2rem; line-height: 42px; border: none; background-color: transparent; transition: all .3s;}
.form-input:focus{ border-color: var(--main-color);}
textarea.form-input{ height: 120px;}
select.form-input{ appearance: none; background: url(../images/arrow.png) right .2rem center no-repeat;}
.form-list .box-more{ margin: 0 auto; text-align: left;}
.form-list .layui-input{ height: calc(42px + .4rem); padding: .2rem; line-height: 42px; border-radius: .1rem; border: none; padding-left: .4rem;}
.form-list .layui-form-select{ flex: auto;}
.form-list .layui-form-select dl{ top: calc(42px + .4rem);}
.form-list .layui-form-selectup dl{ top: auto; bottom: calc(42px + .4rem);}
.form-list .layui-form-select dl dd.layui-this{ background-color: var(--main-color);}
.form-list .layui-form-danger:focus-within{ border-color: var(--main-color);}
.form-list .form-item:focus-within{ border-color: var(--main-color);}

.art-list{ margin: .6rem -7px .3rem;}
.art-list li{ width: 33.33%; padding: 7px; margin-bottom: 0;}
.art-list .box4-img{ padding-bottom: 79.4%; background-color: #f5f5f5;}
.art-list .box4-img .img-bg{ background-size: contain;}
.art-list .box4-title{ margin: .1rem 0; font-weight: bold;}
.art-text{ padding: .15rem;}
.art-info{ margin: .1rem -.1rem;}
.art-info p{ padding: 0 .1rem;}