@import "./common.less";

body {
	font-size: var(--ft16);
	color: #000;
	.d-flex;

	.flex-column;
	min-height: 100vh;

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

main {
	flex: 1;
}

footer {
	color: #fff;
	background: var(--ftc);
	font-size: var(--ft14);
	padding: var(--p40) 0;

	nav {
		font-size: var(--ft30);
		.d-flex;
		.al-c;
		flex-wrap: wrap;
		gap: var(--p60);

		a {
			transition: all 0.3s;
		}

		a:hover {
			opacity: 0.8;
		}
	}

	.foot1 {
		.d-flex;
		.al-c;
		flex-wrap: wrap;
		gap: var(--p100);
	}

	.foot2 {
		margin-top: vaR(--p50);
		.d-flex;
		.al-c;
		flex-wrap: wrap;
		gap: var(--p20);

		.info {
			.d-flex;
			gap: var(--p60);
			flex-wrap: wrap;

			li {
			    
		font-size: var(--ft26);
				p {
		font-size: var(--ft23);
					margin-bottom: var(--p20);
				}

				.img_box {
					font-size: var(--ft18);
					gap: 10px;
				}

			}

		}

		.qrcode {
			flex: 1;
			.d-flex;
			flex-wrap: wrap;
			gap: var(--p100);
			.jc-fe;

			.img_box {
				max-width: 120px;
			}
		}

	}

}

.Case {
	font-size: vaR(--ft18);
	color: #343434;

	ul {
		.d-grid;
		gap: var(--p100);
		margin-top: var(--p150);
	}

	.item1 {
		.d-flex;
		.al-fs;
		gap: var(--p60);
	}

	.img {
		flex-shrink: 0;
	}

	.item {
		.title {
			.d-flex;
			.jc-s;
			.al-fe;

			h1 {
				flex: 1;
				text-align: center;
				font-size: var(--ft60);
			}
		}
	}
}

header {
	transition: all 0.5s;
	background: #fff;

	.layui-main {
		padding: var(--p30) 0;
		transition: all 0.5s;
	}

	.layui-nav .layui-nav-item {
		margin-left: var(--p40);
		line-height: 3em;
	}

	.layui-nav .layui-nav-item>a {
		padding: 0;

		color: #20263C;
		font-size: var(--ft18);
	}

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

	&.bgcolor {
		box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);

		.layui-main {
			padding: var(--p20) 0;
		}
	}

	.layui-nav .layui-nav-more {
		margin-left: 2px;
		right: 0;
		position: relative;
	}
}

.NewsNaV {
	.d-flex;
	.al-c;
	flex-wrap: wrap;
	color: #20263C;
	font-size: var(--ft18);
	margin-bottom: var(--p50);

	.img_box {
		margin-right: var(--p20);
	}

	.item {
		margin-right: var(--p100);

		&.active {
			color: var(--ftc);

			&::after {
				display: block;
				content: '';
				width: 100%;
				background: var(--ftc);
				height: 4px;
				border-radius: 2px;
			}
		}
	}
}

.navMobile {
	color: #20263C;

	li {
		border-bottom: 1px solid #ddd;
	}
}

.menu_button .line {

	stroke: #20263C;
}

.index_swiper {
    &.Index{
        	.swiper {
	    	aspect-ratio: 1920/960;
	
    	}
    }
	.swiper {
		aspect-ratio: 1920/800;
		height: 100%;
	}

	img {
// 		width: 100%;
// 		height: auto;
// 		min-height: 100%;
// 		transition: 1s linear 2s;
// 		transform: scale(1.1, 1.1);
	}

	.swiper-slide-active img,
	.swiper-slide-duplicate-active img {
// 		transition: 6s linear;
// 		transform: scale(1, 1);
	}
}
.IndexParent{
    h1{
        text-align: center;
        color: var(--ftc);
        font-weight: normal;
        font-size: var(--ft32);
        margin-bottom: var(--p30);
    }
    ul{
        .flex-center;
        flex-wrap: wrap;
        gap: var(--p30);
    }
}

.AboutInfo {
	h1 {
		font-weight: normal;
		color: var(--ftc);
		font-size: vaR(--ft50);
	}

	.key {
		color: var(--ftc);
		font-size: vaR(--ft30);

	}

	.grid-row {
	    font-weight: bold;
		color: #20263C;
		font-size: vaR(--ft18);
		margin-top: vaR(--p50);
		.d-grid;
		gap: var(--p50) var(--p60);
	}

	background: rgba(32, 38, 60, 0.04);
}



.ProductMain {

	.title {
		font-size: var(--ft30);
		.flex-center;
		.jc-fs;
		gap: var(--p10);
		margin-bottom: var(--p40);
		img{
			max-width:164px;
		}
	}


	section {
		padding: var(--p40);
	}

	.Card {
		.d-grid;
		grid-template-columns: 290px 1fr;
		gap: var(--p50);

		.Nav {
			.block {
				position: sticky;
				top: 0;
			}

			ul {
				border-radius: 8px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
            	li.active {
            	    	.item {
					background: var(--ftc);
					color: #fff;
                    }
					.iItem {
						display: none;
					}

					.iItem2 {
						display: block;
					}

					.aitem {}
					.child{
					    display: block;
					}
						.layui-icon-right{
						    
                        transform: rotate(90deg);
						}
				}
				.item {
					.d-flex;
					.jc-s;
					padding: var(--p15) vaR(--p15);
					cursor: pointer;

				
				}
				.aitem2{
				    .d-flex;
				    .al-c;
				    flex: 1;
				    height: 55px;
				    padding: var(--p15) var(--p20) var(--p15) var(--p30);
				    &.active{
				        
background: #FFE3E5;
				    }
				}

				.child {
				}

				dl {
				    position: relative;
				    &:before{
				        position: absolute;
				        display: block;
				        content: '';
				        left: 0;
				        width: 2px ;
				        top: 0;
				        bottom: 27px;
					       background: #CBCBCB;
				    }
					margin-left: vaR(--p25);
					dd{
					    .d-flex;
					    .al-c;
					    i{
					        width: 32px ;
					        height: 2px ;
					       background: #CBCBCB;;
					    }
					}
				}

				.layui-icon-right {
					display: inline-block;
					transition: all 0.5s;
				}

				.aitem {
					.d-flex;
					.al-c;
					gap: vaR(--p10);

				}

				.iItem2 {
					display: none;
				}
			}

			.Form {
				margin-top: vaR(--p50);

				h1 {
					background: var(--ftc);
					color: #fff;
					padding: var(--p10) var(--p20);
					font-weight: normal;
					font-size: vaR(--ft20);
				}

				border-radius: 8px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

				form {
					.d-grid;
					gap: vaR(--p10);
					padding: var(--p10);

					.layui-input,
					.layui-select,
					.layui-textarea {
						--input: 40px;
						border: none;
						border-radius: 6px;
						background: rgba(236, 236, 236, 1);
					}

					.layui-textarea {
						height: 100px;
					}

					.layui-btn {
						border-radius: 6px;
						width: 100%;
					}
				}
			}
		}
	}
}
.ProductList{
    .d-grid;
    .grid3;
    gap: var(--p40);
    .item{
        display: block;
        .img{
            aspect-ratio: 1/1;
            transition: all  0.3s;
        }
        .t1{
            
            font-size: var(--ft18);
            text-align: center;
            .line-clamp1;
            b{
                margin-right: var(--p10);
            }
        }
        .layui-btn{
            display: block;
            padding: 0 var(--p10);
            --btn:35px;
            transition: all 0.3s;
            margin: var(--p15) auto;
            --btn_color:#b7b7b7;
        }
        &:hover{
    //         .img{
                
    // transform: rotateY(180deg);
    //         }
                .layui-btn{
                    --btn_color:var(--ftc);
                    padding: 0 var(--p30);
                }
        }
    }
}

.ComLog {
	font-size: var(--ft24);
	text-align: center;
	color: var(--ftc);
}
.IndexProduct{
  
    ul{
        .d-grid;
        .grid4;
        gap: var(--p70) var(--p10);
        .item{
            
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 6px  rgba(0, 0, 0, 0.16);
        &:hover{
            
            .imgLogo{
                background: var(--ftc);
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.18);
                
                animation: 1s 0.2s bounceIn both;
                img{
                    
  filter: grayscale(100%) brightness(200%);
                }
        }
        
        h5{
            color: var(--ftc);
        }
        } 
        }
        .img{
            aspect-ratio: 365/282;
        }
        .block{
        padding-bottom: var(--p30);
            position: relative;
        }
        .img2{
            top: -57px;
            position: relative;
            left: 50%;
            .flex-center;
            transform: translateX(-50%);
         
        }
        .imgLogo{
            padding: vaR(--p10);
               width: 114px;
            
            aspect-ratio: 1/1;
            border-radius: 50%;
            background: #fff;
            transition: all 0.3s;
            
        }
        h5{
            font-weight: normal;
            font-size: vaR(--ft24);
            margin-top: -40px;
            text-align: center;
            
        }
    }
}
.ContactMain {

	background: #F6F6F6;
}

.ContactInfo {
	.Text1 {
		color: var(--ftc);
		text-align: right;
		.d-flex;
		.al-c;
		.jc-s;

		.img {
			max-height: 600px;
			position: relative;
			top: var(--p130);

			img {
			}
		}

		h1 {
			font-weight: normal;
			font-size: var(--ft120);
			line-height: 1em;
		}

		h2 {
			font-weight: normal;
			font-size: var(--ft110);
			line-height: 1em;
		}
	}

	.Text2 {
		padding: var(--p50) 0;
		background: #b51f09;
		color: #fff;

		ul {
			.img {
				height: 80px;
				margin-bottom: var(--p10);
			}

			.d-flex;
			.jc-fe;
			.al-c;
			gap: var(--p200);

			li {
			font-size: var(--ft20);
				.flex-column-center;

			}

			.title {
				.flex-center;
				font-size: vaR(--ft40);
			}

			text-align: center;
		}
	}
}

.ContactForm {
	color: #20263C;
	.bg_img;
	padding: var(--p150) 0;
	min-height: 100vh;

	.layui-main {
		.d-grid;
		.grid2;
		gap: var(--p140);
		;
		flex-wrap: wrap;
	}

	.Text {
		max-width: 100%;

		h1 {
			font-weight: normal;

			font-size: var(--ft40);
		}

		.sub {
			margin-top: vaR(--p20);
			font-size: var(--ft24);
		}

		.con {
			margin-top: vaR(--p20);
		}
	}

	.Form {
		max-width: 100%;
		padding:var(--p30) var(--p30);
		border-radius: 6px;
		background: rgba(255,255,255,0.6);

		h1 {
			font-weight: normal;

			margin-bottom: var(--p10);
			font-size: var(--ft24);
		}

		.sub {
			margin-bottom: var(--p30);
		}

		.layui-input,
		.layui-select,
		.layui-textarea {
			background: rgba(255, 255, 255, 0.8);
			border: none;
			margin-bottom: var(--p20);
		}

		.foot {
			margin-top: vaR(--p50);
			.flex-center;
		}

		.layui-btn {
			width: 80%;
			border-radius: 25px;
		}
	}
}

.NewCard {
	gap: var(--p40);

	.swiper-pagination {
		bottom: var(--p80);

		.swiper-pagination-bullet {
			opacity: 1;
			background: #fff;
		}

		.swiper-pagination-bullet-active {
			background: var(--ftc);
		}
	}

	.swiper {
		background: #FFFFFF;

		.CardItem {
			.img {
				aspect-ratio: 758/572;

			}

			.block {
				text-align: center;
				padding: var(--p20);
				font-size: var(--ft24);
			}

			.t1 {
				.line-clamp1;
			}
		}

		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.18);
	}

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

		.item {

			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.18);
			display: block;

			.img {
				aspect-ratio: 1/1;
				background: var(--ftc);
				.flex-center;
				flex-wrap: wrap;
				width: 84px;
				padding: var(--p10);
			}

			.title {
				color: #fff;
				.d-flex;
				.al-c;
				background: #20263C;

				.t1 {
					font-size: vaR(--ft24);
					padding: var(--p20);

					p {
						.line-clamp1;

					}
				}
			}

			.block {
				padding: var(--p20);

			}

			.sub {
				.line-clamp2;
				min-height: 3.2em;
			}
		}
	}
}

.ProductPage {
	padding: var(--p40) 0;
	font-size: var(--ft20);

	h1 {
		font-size: var(--ft60);
		text-align: center;
		margin-bottom: var(--p60);
	}

	.foot {
		font-size: var(--ft30);
		margin-top: vaR(--p30);
		padding-bottom: var(--p200);

		dl {
			.d-flex;
			.al-fs;
			gap: var(--p10);
			flex-wrap: wrap;
		}
	}
}

.NewList {
	margin-top: var(--p40);

	.item {
		padding: var(--p20);
		.d-grid;
		border-bottom: 1px solid #E8E8E8;
		;
		gap: var(--p20);
		grid-template-columns: 1fr 25%;
		transition: all 0.3s;

		.img {
			aspect-ratio: 390/231;
		}

		h5 {
			font-size: vaR(--ft20);
		}

		.date {
			margin: var(--p10) 0;
			.d-flex;
			.al-c;
			gap: var(--p10);

			i {
				font-size: var(--ft24);
			}
		}

		.sub {
			.line-clamp2;
			min-height: 3em;
			margin-bottom: var(--p20);
		}

		.layui-btn {
			border-radius: 0;
			background: initial;
			border-color: var(--ftc);
			color: var(--ftc);
		}

		&:hover {

			background: #F0F0F0;

			h5 {
				color: var(--ftc);
			}
		}
	}
}

.detailsMain {
	h3 {
		font-size: var(--ft30);
		text-align: center;
	}

	.date {
		text-align: center;
		margin: var(--p20) 0 var(--p30);
	}

	.content {
		margin: var(--p40) 0;
		padding: var(--p60) 0;
		border-top: 1px solid #707070;

		border-bottom: 1px solid #707070;
	}

	.foot {
		padding-top: var(--p40);
		.d-grid;
		gap: var(--p20);
	}
}
.ProductMainDetails{
     .mySwiper{
        margin-top: var(--p30);
    }
    .swiperBox{
        --swiper-navigation-size:var(--ft20);
        --swiper-navigation-color: var(--ftc); --swiper-pagination-color: var(--ftc);
        position: relative;
        padding:0 var(--p30);
    }
    .swiper-button-prev{
        left: 0;
    } .swiper-button-next{
        right: 0;
    }
    .img{
        
        aspect-ratio: 1/1;
    }
    .img1{
        cursor: pointer;
        aspect-ratio: 1/1;
        border: 1px solid #fff;
        transition: all 0.3s;
        opacity: 0.8;
    }
    .swiper-slide-thumb-active{
      
            border-color: var(--ftc);
            opacity: 1;
      
    }
    .title{
        margin-top: vaR(--p80);
        color: var(--ftc);
        font-size: var(--ft24);
        padding-bottom: var(--p10);
        margin-bottom: var(--p40);
        border-bottom: 1px solid rgba(112, 112, 112, 1);
    }
    h1{
        font-size: vaR(--ft36);
        font-weight: normal;
    }
    .foot{
        margin-top: vaR(--p40);
        .d-flex;
        gap: var(--p10);
        .layui-btn{
            flex: 1;
        }
    }
    .grid-row{
        gap:var(--p40)
    }
}
 .IndexProduct  .title{
            font-size: var(--ft30);
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
    gap: var(--p10);
    margin-bottom: var(--p40);
    }
.AboutHoner {
    
     color: #20263C;
	h1 {
	    font-size: var(--ft30);
		.flex-center;
		.jc-fs;
		gap: var(--p10);
	}

}
.ProductMain .title,
.AboutHoner h1,
 .IndexProduct  .title{
     color: #20263C;
 }
@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {
    .ProductList{
        .grid2;
    }
	.NewCard .List .item .img {
		width: 40px;
	}

	:root {
		--input: 40px;
		--input_size: 13px;
		--btn: 40px;
		--btn_size: 13px;
	}

	.ContactInfo .Text1 .img img {
		max-height: 200px;
	}

	.ContactInfo .Text2 ul .img {
		height: 30px;
	}
.ProductMain .Card,
	.ContactForm .layui-main {
		.grid1;
	}

	.logo img {
		max-height: 30px;
	}

	.Case .item .title {
		.flex-column;
	}

	.Case .img img {
		max-width: 50%;
	}

	.Case .item,
	.Case .item1 {
		flex-wrap: wrap;
	}

	.footerLogo img {
		max-height: 30px;
	}

	footer .foot2 .info li .img_box img {
		max-height: 20px;
	}

	footer .foot2 .qrcode .img_box img {
		width: 80px;
	}

	.NewsNaV img {
		max-width: 40px;
	}
.IndexProduct ul{
    .grid2;
}
.AboutHoner h1,
 .title{
    img{
        max-width: 50px;
    }
}
.IndexProduct ul .imgLogo{
    padding: 15px;
    width:60px;
}
.IndexProduct ul .img2{
    top: -24px;
}
.IndexProduct ul h5{
    margin-top: -20px;
}
	.NewCard .swiper-pagination {
		bottom: 50px;
	}
	.ContactInfo .Text1 h2,
	.ContactInfo .Text1 h1{
	    font-size: 20px;
	}
}


@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) {}