@import url("common.css");
body {font-size: 18px; font-weight: 400; }
.layui-container {width: 1500px;padding-left: 15px; padding-right: 15px;}
a:hover {text-decoration: none;color: var(--activeColor);}

/* 首页 */
nav>ul>li>a {display: block;padding: 10px 20px;}
nav>ul>li>a:hover {color: var(--activeColor);}
nav>ul>li.active >a {color: var(--activeColor);}
nav ol { min-width: 100%; z-index: 9; box-shadow: 0 -1px 3px rgba(0,0,0,0.1)}
nav ol>li>a {display: block;padding: 4px 15px; color: #333;background-color: var(--whiteColor); border-bottom: 1px solid rgba(0, 0, 0, 0.1); white-space: nowrap; text-transform: uppercase;}
nav ol>li>a:hover {opacity: 0.9;color: #000;}
nav ol>li>a>img {width: 18px; height: 12px;}

.logo {width:440px;}
.pro-nav {padding:30px; display: flex;}
.pro-nav .left {width: 300px; border-right: 1px solid #ddd;}
.pro-nav .right {flex: 1;margin-left: 20px;}
.pro-nav .left >a {display: block;line-height: 3;padding:0 15px;}
.pro-nav .left >a.active {background-color: var(--activeColor); color: #fff;}
.pro-nav .lists .con {display: flex;}
.pro-nav .lists .con a {display: block;width: 23%; overflow: hidden;margin:0 1% 30px 1%;}
.pro-nav .lists .con a img {width: 100%;height: 180px; object-fit: contain;}
.pro-nav .lists .con a .name {text-align: center; font-size: 14px;}


.block-about {background: url(../images/about_block_bg.jpg) right 50px no-repeat;}
.block-about-link a {border: 1px solid var(--normalgrayColor); color: var(--darkgrayColor); font-weight: 400; line-height: 50px; padding: 0 20px; border-radius: 100px; display: inline-block;}
.block-about-link a:hover {border: 1px solid var(--activeColor); color: var(--whiteColor); background-color: var(--activeColor);}
.block-product .item {background-color: #fff;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); overflow: hidden;transition: all 0.5s;}
.block-product .item:hover {box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);}
.block-product .item img {width: 100%; height: 100%; object-fit: contain; transition: all 0.5s;}
.block-product .item:hover img {transform: scale(1.2);}
.block-why,.block-news,footer {background-color: #F7FCFF;}
.block-why-list .item {width: 470px; background-color: #fff; margin-bottom: 30px;transition: all 0.5s;}
.block-why-list .item:hover {box-shadow: 0 5px 20px rgba(0,0,0,0.15); transform: translateY(-15px);}
.block-why-list .item img {width: 100%;}
.block-why-list .item h4,.block-why-list .item p {padding: 0 15px; text-align: center;}
.block-why-list .item h4 {font-size: 20px;}
.block-why-list .item p {line-height: 1.5;padding-bottom: 15px;}

.block-shili {background: url(../images/block_bg.jpg) center 80px no-repeat;}
.block-shili .item a {display: inline-block; transition: all 0.3s;}
.block-shili .item a:hover {display: inline-block; transform: translateX(15px);}
.block-shili .item p {max-height: 320px; overflow-y: auto;}
.block-news .item {width: 49%;margin-bottom: 30px; transition: all 0.5s;}
.block-news .item:hover {box-shadow: 0 5px 15px rgba(0,0,0,0.15); transform: translateY(-15px);}
.block-news .item .img {overflow: hidden;}
.block-news .item img {width: 100%; height: 100%; object-fit: cover; background-color: #fff;transition: all 0.5s;}
.block-news .item:hover img {transform: scale(1.1);}
.block-news .item .con {background-color: #f7f7f7;padding: 10px 15px;}
.block-news .item .date {aspect-ratio: 1/1; width: 100px; background-color: var(--activeColor); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;font-size: 24px;font-weight: bold; line-height: 1.5; margin-right: 15px;}
.block-news .item .date p {font-size: 18px; font-weight: normal;}
.block-news .item .txt .t {line-height: 1.2; margin-bottom: 7px;}
.block-news .item .txt p {line-height: 1.5; font-size: 16px;}

.block-lianxi {background: url(../images/block_lianxi_bg.jpg) center no-repeat #fff;}
.block-lianxi .card {background-color: #1F22F5; width: 700px;margin: 0 auto;padding: 50px 30px; color: #fff; text-align: center;}
.block-lianxi .card a {display: inline-block; transition: all 0.5s;}
.block-lianxi .card a:hover {color: #333; padding:10px 40px; background-color: #ff0;}

footer .lianxi .t {border-left: 5px solid var(--activeColor); padding-left: 10px;line-height: normal; font-size: 32px; font-weight: bold;}
.form div {margin-bottom: 10px;}
.plat-list a {display: flex; width: 33.33333%;align-items: center; justify-content: center; margin-bottom: 15px;}
.lianxi-list {align-items: baseline;}
.lianxi-list div {width: 110px;font-weight: bold;}
.lianxi-list p {line-height: 1.5;}
.lianxi-list i {font-size: 24px; }

/* about.page */
.about-video .video {box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); aspect-ratio: 16/9;}
.about-con .line {background-color: var(--activeColor); height: 4px; width: 200px; overflow: hidden;}
.about-youshi {background-color: #F7FCFF;}
.about-youshi .item {display: flex; justify-content: space-between;margin-bottom: 80px; align-items: center;}
.about-youshi .item .txt {flex: 1; padding-left: 40px;}
.about-youshi .item .txt .t {line-height: 1.5; font-weight: bold; margin-bottom: 30px;}
.about-youshi .item .txt p {font-size: 18px;}
.about-youshi .item.flex-row-reverse .txt {padding-left: 0; padding-right: 40px;}
.about-workshop .t {line-height: normal; border-left: 5px solid var(--activeColor); padding-left: 10px; font-size: 28px; font-weight: bold;}
.about-wlsp-list {display: flex; flex-wrap: wrap; justify-content: space-between;}
.about-wlsp-list >div {width: 32.3%; margin-bottom: 20px;}
.about-wlsp-list img {width: 100%; height: 100%; object-fit: cover;}
.about-about-con p {word-break: break-all; margin-bottom: 30px;}
.about-about-img {width: 616px;}

.news-box .item {padding: 30px 0;}
.news-box .item:hover {background-color: #f7f7f7;}
.news-box .item .no {width: 60px; border-top: 4px solid var(--activeColor); text-align: center; font-size: 36px; font-weight: bold;margin-right: 15px;}
.news-box .item .img {width: 250px;aspect-ratio: 4/3; margin-right: 20px;background-color: #fff;}
.news-box .item .img img {width: 100%; height: 100%; object-fit: cover;}
.news-box .item .right {flex: 1;}
.news-detail {background-color: #F2F5FE;}
.news-detail .procate a {color: var(--activeColor); display: block;}
.news-detail .detail p {margin-bottom: 20px;}
.lianxi-icon-list span {font-size: 40px;margin-right: 15px;}
.lianxi-icon-list p {padding-top: 8px; font-size: 32px;}
.lianxi-liuyan .left {width: 40%; background: url(../images/lianxi_bg.jpg) center no-repeat; background-size: cover;}
.lianxi-liuyan .right {width: 60%;background-color: #E3ECF3;}
#form-lianxi .item {width: 47%; margin-bottom: 15px;}
#form-lianxi label {font-size: 24px;}
#form-lianxi label span {color: #f00;}

.product-page .item {background-color: #fff;padding-top: 60px; padding-bottom: 60px;}
.product-page .item:nth-child(even) {background-color: #E3ECF3;}
.product-page h1 {font-size: 36px;line-height: normal; }
.product-page h1 a {color: var(--activeColor);}
.product-page p {font-size: 16px;}
.get-quote {display: inline-block;border: 3px solid var(--activeColor); padding: 3px 20px; color: var(--activeColor); font-size: 24px;}
.get-quote:hover {background-color: var(--activeColor); color: #fff;}
.learn-more {margin-top: 15px; display: inline-block; font-size: 20px;border-bottom: 2px solid var(--activeColor); color: var(--activeColor);}
.product-page .right {margin-left: 30px; height: 400px;}
.product-page .right img {width: 100%; height: 100%; object-fit: contain; }
.prodetail img.proimg  {width: 100%; height: 100%; object-fit: contain; background-color: #f9f9f9;}
.xijie {background-size: cover;margin-bottom: 60px;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);}
.xijie .back-drop {display: flex; padding: 50px; backdrop-filter: blur(30px); filter: brightness(1.2);background-color: rgba(255, 255, 255, 0.6);}
.xijie .left {width: 40%;}
.xijie .right {width: 60%; margin-left: 50px;}
.xijie .t {font-size: 48px;font-weight: bold; color: var(--activeColor);line-height: normal;}
.xijie .txt {margin-top: 15px;}
.xijie .right img {width: 100%; height: 100%; object-fit: contain;}
.prodetail-canshu {background-color: #E3ECF3; padding: 50px 0;}
.prodetail-canshu .canshu {padding: 30px;}
.prodetail-canshu .canshu img {max-width: 100%!important;}

.btn-menu {display: none;}

/*
@media only screen and (max-width: 767px)  {
	.layui-container {width: auto;}
	.logo {width:240px;display:flex; justify-content:center; align-items:center;}
	.logo >img {width:100%;}
	.btn-menu {display:inline-flex; width:38px; height:38px;background-color:#f7f7f7; justify-content:center; align-items:center;}
	nav {position:fixed; left:0; right:0; bottom:0; top:89px; background-color:#fff;  z-index:3;}
	nav >ul {flex-direction:column;}
	
	.banner img {width:100%;}
}
*/