@import "./common.less";

body {
	font: 16px;
	color: #000;
	// 	zoom: 0.7;

	@media (max-width: 768px) {}
}

footer {
	color: #fff;
	background: #6DB0BB;

	.footer1 {
		padding: var(--p70) 0;
		font-size: var(--ft30);

		ul {
			.d-flex;
			.jc-se;
			.al-c;
			gap: var(--p20);
			flex-wrap: wrap;

			li {
				.d-flex;
				.al-c;
				flex-direction: column;
				gap: var(--p10);

				.img {
					overflow: visible;
					flex-shrink: 0;
				}

				&:hover {
					img {
						animation: 1s 0.2s bounceIn both;

					}
				}
			}
		}
	}

	.footer2 {
		border-top: 1px solid rgba(255, 255, 255, 0.3);
		padding: var(--p50) 0;
		font-size: var(--ft20);

		ul {
			.d-flex;
			.jc-s;
			.al-c;
			gap: var(--p20);
			flex-wrap: wrap;

			li {
				.d-flex;
				.al-c;
				gap: var(--p10);

				.img {
					flex-shrink: 0;
				}
			}
		}
	}

}

.img_100 {
	overflow: hidden;
}

.About {
	.Text {
		h1 {
			text-align: center;
			color: var(--ftc);
			font-size: var(--ft50);
		}

		.s_content {
			margin-top: var(--p50);
			font-size: var(--ft32);
			line-height: 1.7em;
		}

		video {
			width: 100%;

			background: #000;
			margin-top: var(--p50);
		}
	}

	.List1 {
		margin-top: var(--p80);
		.d-grid;
		gap: var(--p60);

		li {
			.img {
				height: var(--ft36);
			}

			gap: var(--p15);
			.d-flex;
			.al-fs;

			.sub {
				font-size: var(--ft32);
				color: #2C2C2C;
			}

			p {
				margin-bottom: var(--p30);
				;
				font-size: var(--ft36);
			}
		}
	}

	.List2 {
		margin-top: var(--p80);
		.d-flex;
		.al-c;
		.jc-s;
		gap: var(--p40);

		li {
			text-align: center;
			font-size: var(--ft44);

			.img {
				margin-bottom: var(--p30);
				overflow: visible;
			}

			&:hover {
				img {
					animation: 1s 0.2s bounceIn both;

				}
			}
		}
	}

	.List3 {
		margin-top: var(--p80);
		gap: var(--p30);

		.title {
			transition: all 0.5s;
			font-size: var(--ft30);
			padding: var(--p20);
			gap: var(--p20);
			.flex-center;
			color: #fff;
			background: linear-gradient(-83deg, #1592A5, #1ED7F3);
		}

		li:hover {
			transition: all 0.5s;
			box-shadow: 3px 6px 8px rgba(0, 0, 0, 0.2);

			.title {
				gap: var(--p30);
			}

			.img {
				img {
					transition: all 0.5s;
					scale: 1.1;
				}

			}
		}

	}
}

@keyframes bounceIn {

	0%,
	20%,
	40%,
	60%,
	80%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		-webkit-transform: scale3d(0.9, 0.9, 0.9);
		transform: scale3d(0.9, 0.9, 0.9);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		-webkit-transform: scale3d(0.97, 0.97, 0.97);
		transform: scale3d(0.97, 0.97, 0.97);
	}

	to {
		opacity: 1;
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}
}

.bounceIn {
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
}

header {
	position: sticky !important;
	background: #fff;
	transform: all 0.5s;
	box-shadow: 3px 6px 8px rgba(27, 119, 133, 0.1);

	.layui-main {
		padding: var(--p10) 0;
		.d-flex;
		.al-c;
		.jc-s;
	}

	.layui-nav {
		width: 700px;
		max-width: 100%;
		.d-flex;
		.jc-s;
	}

	.layui-nav .layui-this:after,
	.layui-nav-bar {
		display: none;
	}

	.layui-nav .layui-nav-item>a {
		font-size: var(--ft22);
		color: #000;
	}

	.layui-nav .layui-this>a,
	.layui-nav .layui-nav-item>a:hover {
		color: var(--ftc);
	}

	&.bgcolor {}
}

.Contact {
	h1 {
		text-align: center;
		color: var(--ftc);
		font-size: var(--ft50);
		margin-bottom: var(--p50);
	}
}
[lay-on]{
    cursor: pointer;
}

.ContactSwiper {
	background: #F6FEFF;
}

.ProductMain {
	min-height: 80vh;

	h1 {
		text-align: center;
		color: var(--ftc);
		font-size: var(--ft50);
		margin-bottom: var(--p50);
	}

	.ProductBox {
		.d-flex;
		.al-fs;

		.Nav {
			min-width: 300px;
			padding-right: var(--p60);
			margin-right: var(--p60);
			border-right: 1px solid rgba(63, 63, 63, 0.3);

			h2 {
				font-size: var(--ft36);
				color: var(--ftc);
				margin-bottom: var(--p60);
			}

			nav {
				.d-grid;
				gap: var(--p50);
				font-size: var(--ft28);

				.item.active {
					color: var(--ftc);
				}
			}
		}

		.Body {
			ul {
				.d-grid;
				.grid3;
				gap: var(--p30);
				font-size: var(--ft28);
				text-align: center;

				.img {
					margin-bottom: var(--p20);
					aspect-ratio: 1/1;
					border-radius: 16px;
					box-shadow: 3px 6px 8px rgba(27, 119, 133, 0.1);
				}
			}
		}
	}
}

.ContactInfo {

	ul {
		margin-top: -50px;
		.d-grid;
		.grid3;
		gap: var(--p30);

		li {
			background: linear-gradient(-83deg, rgba(21, 146, 165, 0.8), rgba(38, 198, 222, 0.8));
			border-radius: 4px;
			position: relative;
			padding: var(--p50) var(--p10);
			color: #fff;
			text-align: center;

			h5 {
				font-size: var(--ft32);
			}

			p {
				margin-top: var(--p30);
				font-size: var(--ft28);
                position: relative;
                z-index: 1;
			}

			.img {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
			}
		}


	}
}

.ContactSwiper {
	.swiper-slide {
		width: auto;
	}

	.swiper+.swiper {
		padding-left: var(--p50);
		margin-top: var(--p100);
	}

	.img {
		width: 281px;
		aspect-ratio: 1/1;
		border-radius: 16px;
		box-shadow: 3px 6px 8px rgba(27, 119, 133, 0.1);
	}
}

@media only screen and (max-width: 1400px) {}


.TitleCom {
	.d-flex;
	.al-c;
	.jc-c;
	gap: var(--p50);
	text-align: center;

	h1 {
		font-size: var(--ft30);
		color: var(--ftc);
	}

	p {
		color: #737373;
		font-size: var(--ft18);
		margin-top: var(--p10);
	}
}

.IndexVideo {
	.bg_img;

	video {
		background: #000;
		margin-top: vaR(--p60);
		width: 100%;
	}
}

.IndexProduct {
	background: #F8F8F8;

	ul {
		margin-top: var(--p50);
		.d-flex;
		.al-c;
		.jc-s;
		gap: vaR(--p30);
		font-size: var(--ft24);
		text-align: center;

		.img {
		    max-width: 100%;
			width: 220px;
			aspect-ratio: 1/1;
			border-radius: 50%;
		}

		p {
			margin-top: var(--p40);
		}
	}
}
.IndexProductContent{
    ul{
        .d-grid;
        gap: var(--p20);
        grid-template-columns: repeat(12,1fr);
    }
    li:first-child{
        
		grid-column: span 8;
		grid-row: span 2;
    }
    li{
        position: relative;
		grid-column: span 4;
		overflow: hidden;
		&.active{
			box-shadow: 3px 6px 8px rgba(0, 0, 0, 0.2);
		    .content{
		        opacity: 1;
		        height: auto;
		    }
		}
    }
    .content{
        position: absolute;
        bottom: 0;
        height: 0;
        overflow: hidden;
		transition: all 0.5s;
		opacity: 0;
        p{
        background: #6DB0BB;
        color: #fff;
        font-size: var(--ft22);
        line-height: 1.7em;
        padding: var(--p30) var(--p40);
            
        }
    }
}
section{
    padding: var(--p60) 0;
}
.IndexShiLi{
       ul{
        margin-top: var(--p40);
           .d-grid;
           gap: var(--p30);
           li{
               .d-grid;
               grid-template-columns:  1fr 460px;
               gap: vaR(--p60);
               .al-c;
           }
           li:nth-child(even){
                direction: rtl;
                hr{
                    margin-right: auto;
                }
           }
           h5{
               color: #00323A;
               font-size: var(--ft30);
           }
           hr{
               width: 100px;
            height: 4px;
            background: #6DB0BB;
            margin: var(--p40) 0;
           }
           .sub{
               color: #00323A;
               line-height: 1.7em;
               font-size: var(--ft24);
           }
           .en{
               color: #81A9B0;
               font-size: var(--ft14);
               margin-top: vaR(--p40);
           }
       }
}
.IndexNewProduct {
    ul{
        margin-top: var(--p40);
       .d-grid;
       .grid3;
       gap: var(--p15);
       .title{border: 4px solid #FFFFFF;
           background: #6DB0BB;
           text-align: center;
           color: #fff;
           font-size: var(--ft20);
           padding: var(--p25);
       }
       .img{
           aspect-ratio:390/340 ;
           border: 4px solid #FFFFFF;border-bottom: none;
       }
    }
}
.IndexAbout{
     ul{
        margin-top: var(--p40);
           li{
               .d-grid;
               .grid2;
               gap: var(--p50);
               h5{
                   border-radius: 22px;
                border: 1px solid #444444;
                padding: 5px var(--p15);
                font-size: var(--ft22);
                display: inline-block;
               }
               .sub{
                   margin-top: var(--p50);
                font-size: var(--ft20);
                color: #3F3F3F;
                line-height: 1.7em;
               }
               dl{
                   margin-top: vaR(--p50);
                   	column-count: 4;
                   	text-align: center;
	column-gap: var(--p30);
	column-rule: 2px solid #00000020;
	p{
	    margin-top: var(--p20);
	}
               }
           }
     }
}

@media only screen and (max-width: 990px) {
	body {
		zoom: 1;
	}

	footer .footer1 ul li .img {
		width: 60px;
	}

	.ProductMain .ProductBox {
		.d-grid;
		gap: var(--p30);

	}

	.ProductMain .ProductBox .Nav {
		padding: 0;
		margin: 0;
		border: none;
	}
	.IndexShiLi ul li,
	.IndexAbout ul li{
	    .grid1;
	}
}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 751px) and (max-width: 1400px) {}

@media only screen and (min-width: 751px) {}