@import "./common.less";

body {
	font: 16px;
	color: #434343;
	.d-flex;

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

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

main {
	flex: 1;
	background: #F0EFF0;

}
.swiper-pagination{
    padding-bottom:  var(--p20);
}
.swiper-pagination-bullet{
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    background: initial;
    opacity: 1;
    margin: 0 10px !important;
}
.swiper-pagination-bullet-active{
    background: #fff;
}
.authMain{
    .d-flex;
    flex-direction: column;
}
.authPage{
    padding: var(--p100) var(--p30);
    flex: 1;
    form{
        margin: 0 auto;
        width: 585px;
        max-width: 100%;
    }
    p{
        padding: var(--p10) var(--p40);
        font-size: var(--ft18);
    }
    .search{
        padding: 1px 2px 1px var(--p40);
        background: #F0EFF0;
box-shadow: 0px 4px 9px 3px rgba(7,0,2,0.12);
border-radius: 30px;border: 1px solid #312C2A;
.d-flex;
.al-c;
input{
    border: none;
    flex: 1;
    background: initial;
    padding-left: 0;
    &:focus{
        box-shadow: none;
    }
}
button{
    cursor: pointer;
    background: var(--ftc);
    height: 56px;
    .flex-center;
    aspect-ratio: 16/9;
    border-radius: 50%;
}
    }
}
.svgItem {
	--size: 50px;
	--sizef: -50px;
	overflow: hidden;
	transition: all 0.5s;
	--color: #000;

	.img_box {

		width: var(--size);
		margin: 0 auto;
	}

	img {
		height: var(--size);
		width: 100%;

		filter: drop-shadow(var(--color) var(--size) 0);
		transform: translateX(var(--sizef));
	}

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

		img {
			filter: drop-shadow(var(--ftc) var(--size) 0);
		}
	}

	span {
		display: inline-block;
		margin-top: var(--p10);
		font-size: 10px;
	}
}

.topImg {
	width: 100%;
	height: calc(100vh - 75px - 110px);

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
.topBanner{
    width: 100%;
	height: calc(100vh - 75px - 110px);
	.swiper{
	    width: 100%;
	    height: 100%;
	}
}
header {
	--main: 1130px;
	height: 100px;
	background: var(--ftc);
	position: relative !important;
	color: #fff;
    transition: all 0.5s;
	.layui-main {
		position: unset;
	}

	ul {
		.d-flex;
		.al-c;
		gap: var(--p40);

		li {
			font-size: var(--ft20);

			>a {
				position: relative;
				line-height: 75px;
				display: inline-block;

				&::before {
					transition: all 0.5s;
					display: block;
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					right: 100%;
					height: 3px;
					color: #fff;
					background: #fff;
				}
			}

			&:hover,
			&.layui-this {
				>a::before {
					right: 0;
				}

			}

			dl {
				transition: all 0.5s;
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				height: 0;
				.d-flex;
				.al-c;
				.jc-c;
				overflow: hidden;
				gap: var(--p80);
				background: rgba(0, 0, 0, 0.5);

				.svgItem {
					--color: #fff;
					text-align: center;
					--size: 40px;
					--sizef: -40px;

				}
			}

			&:hover {
				dl {
					height: 110px;
				}
			}

		}
	}

	.layui-main {
		.d-flex;
		.al-c;
		.jc-s;
	}

	.ft {
		.d-flex;
		.al-c;
		gap: var(--p20);
		color: #Fff;

		span {
			width: 1px;
			height: 28px;
			background: #fff;
		}
	}
    &.fixed{
        position: fixed !important;
        top: 0;
    }
    &.hide{
        top: -110px;
    }

}

.topNav {
	background: #fff;
	color: #434343;

	.nav1 {
		padding: var(--p10) 0;
		.flex-center;

		ul {
			.flex-center;
			gap: var(--p90);
		}

		.svgItem {
			--color: #434343;
			text-align: center;
			--size: 40px;
			--sizef: -40px;
		}

		height: 110px;
	}

	box-shadow: 0px 3px 11px 1px rgba(7, 0, 2, 0.15);

	.child {
		.flex-center;
		gap: var(--p100);
		padding: var(--p20);
		font-size: var(--ft20);
		border-top: 1px solid #D9D9D9;

		.item {
			transition: all 0.5s;
			padding: 0 var(--p50);

		}
	}
}

.videoPage {

	padding-top: var(--p50);

	ul {
		.d-grid;
		.grid3;
		gap: var(--p30) var(--p25);

		.item {
			background: #fff;
			border-radius: 8px;
			border: 1px solid #D9D9D9;
			overflow: hidden;
			transition: all 0.5s;

			.img {
				aspect-ratio: 448/258;
			}

			.content {
				padding: var(--p20);
				text-align: center;
				font-size: var(--ft18);
				color: #262626;

				p {

					.line-clamp1;
				}
			}

			&:hover {
				box-shadow: 0px 3px 11px 1px rgba(7, 0, 2, 0.15);
			}
		}
	}
}

.FilePage {
	padding-top: var(--p50);

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

		.listItem {
			.title {
				background: #D9D9D9;
				border-radius: 16px;
				padding: var(--p20) var(--p30);
				font-size: var(--ft24);
				cursor: pointer;

				i {
					display: inline-block;
					margin-right: 5px;
					transition: all 0.5s;
				}
			}

			.content {
				padding: 0 var(--p20);
				display: none;

				ul {
					.d-grid;
					.grid2;
					gap: 0 var(--p30);
				}

				.item {
					.d-flex;
					.al-c;
					.jc-s;
					gap: var(--p10);

					img {
						flex-shrink: 0;
						;
					}

					.img {
						max-width: var(--p30);
					}

					.text {
						flex: 1;
						.d-flex;
						.al-c;
					}

					p {
						border-bottom: 1px solid rgba(0, 0, 0, 0);

						transition: all 0.5s;

						.line-clamp1;
					}

					padding: var(--p25) var(--p10);
					border-bottom: 1px dashed #D9D9D9;

					&:hover {
						p {

							border-color: var(--ftc);
						}

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

			&.open {
				.title {
					i {

						transform: rotate(90deg);
					}
				}

			}
		}
	}
}

.h100 {
	min-height: 100vh;
	width: 100vw;
}
.aboutMain{
    text-align: center;
        font-size: var(--ft24);
    section{
        padding-top: var(--p60);
    }
    h1{
        font-weight: normal;
        font-size: var(--ft36);
        margin-bottom: var(--p50);
    }
    .s_content{
        line-height: 2em;
        min-height: 400px;
    }
}
.ContactPage {
	.bg_img;
	.h100;

	.tabs {
		background: rgba(47, 39, 38, 0.8);
		box-shadow: 0px 6px 20px 4px rgba(7, 0, 2, 0.16);
		border-radius: 12px;
		border: 1px solid #370C0C;
		margin: var(--p100) auto;
		width: 550px;
		max-width: 100%;
		padding: var(--p50) var(--p60);

		.head {
			background: #FFFFFF;
			border-radius: 12px;
			overflow: hidden;
			.d-flex;
			font-size: var(--ft20);

			.item {
			    text-align: center;
				padding: var(--p10) var(--p25);
				border-radius: 12px;
                flex: 1;
                cursor: pointer;
				&.layui-this {
					background: var(--ftc);
					color: #fff;
				}
			}
		}
		.body{
		    color: #fff;
		    min-height: 150px;
			font-size: var(--ft20);
		    .item{
		        padding: var(--p50) 0 0;
		        h2{
		            font-size: var(--ft24);
		            margin-bottom: var(--p10);
		        }
		    }
		}
	}
}
.aboutListMain{
    li{
        padding: var(--p50) 0;
        overflow: hidden;
    }
    h1{
		font-size: var(--ft48);
        font-weight: normal;
    }
      h2{
		            font-size: var(--ft24);
        font-weight: normal;
    }
    .sub{
		            font-size: var(--ft30);
        margin-top: var(--p30);
    }
    li:nth-child(odd){
        .title{
            .d-flex;
            .al-c;
            gap: var(--p20);
        }
    }
    
    li:nth-child(even){
       text-align: right;
       color: #fff;
    }
    
     li:nth-child(4n+2){
         background: #312C2A;
         
     }
      li:nth-child(4n+4){
         background: var(--ftc);
         
     }
}
.productMian{
    min-height: calc(100vh - 110px);
    section{
        padding-top: var(--p50);
    }
    .layui-main{
        .d-grid;
        grid-template-columns: 260px 1fr;
        gap: var(--p25);
    }
    aside{
        font-size: var(--ft18);
        border-top: 1px solid  #D9D9D9;
        .itemType{
            .d-flex;
            .al-c;
            gap: 8px;
            padding: var(--p15) 10px;
             a{
                 cursor: pointer;
                .line-clamp1;
            }
             i{
                 margin-left: auto;
                transition: all 0.5s;
                display: inline-block;
            }
            .label{
                border-radius: 4px;
                border: 1px solid #A31B1B;
                font-size: 14px;
                padding: 2px 5px;
                color: var(--ftc);
                text-align: center;
                line-height: 1em;

            }
        }
       
        .item{
            display: block;
            border-bottom:  1px solid #D9D9D9;
            
            
        
            &:hover{
                .itemType{
                    cursor: pointer;
                   a{
                       font-weight: bold;
                   }
               }
            }
            
            &.open{
                i{
                transform: rotate(-180deg);
             
                }
            }
           &.active{
               .itemType{
                   a{
                       font-weight: bold;
                   }
               }
             
           }
        }
        ul{
            li{
                
            padding-left: 1em;
            }
        }
        dl{
            padding-left: 1em;
          
                   
                   dd{
                       
                      padding: var(--p15) 0;
                   }
                   a:hover,
                   a.active{
                       color: var(--ftc);
                   }
          
        }
   
        
    }
}
.productList{
    .d-grid;
    .grid4;
    gap: var(--p60) var(--p25);
    .item{
        transition: all 0.5s;
                text-align: center;
        .img{
            border-radius: 8px;
            aspect-ratio: 4 / 4;
        }
        .content{
            padding: var(--p20) 10px;
            .title{
                .line-clamp1;
                font-size: var(--ft18);
                color: #262626;
            }
            .sub{
                .line-clamp1;
                color: #8C8C8C;
                
            }
        }
        &:hover{
          background: #FFFFFF;
            box-shadow: 0px 3px 11px 1px rgba(7,0,2,0.15);
            border-radius: 8px;
        }
    }
    
}
.productDetailsNav{
    padding: var(--p15) 0;

    .layui-main{
        .d-flex;
        .jc-s;
        .al-c;
    }
    .layui-btn{
        flex-shrink: 0;
        --btn:40px;
        background: #fff;border-radius: 20px;
border: 1px solid #A31B1B;
color: var(--ftc);
    }
    .layui-breadcrumb a{
        font-size: var(--ft18);
        color: #434343 !important;
    }
    .layui-breadcrumb span[lay-separator]{
        font-size: var(--ft18);
        color: #434343 !important;
        margin: 0 4px;
    }
    .layui-breadcrumb *:last-child{
        font-weight: bold;
    }
}
.showpro.productDetail{
	.bigSwiper{aspect-ratio: 4/4 !important;}
}
.productDetail{
        .info{
        .d-grid;
        gap: var(--p50);
        grid-template-columns: var(--width) 1fr;
        .bigSwiper{aspect-ratio: 16/9;
            
            .swiper{
                width: 100%;
                height: 100%;
            }
            .swiper-slide{
                border-radius: 10px;
            }
            
        }
        .smallSwiper{
            height: var(--width);
            .d-flex;
            .jc-s;
            .flex-column;
            .al-c;
            gap: var(--p20);
            .swiper{
    width: 100%;
            }
            .swiper-slide-thumb-active{
                border: 2px solid var(--ftc);
            }
            .swiper-slide{
                aspect-ratio: 16/9;
            }
            .img_100{
                border-radius: 10px;
                aspect-ratio: 1/1;
            }
        }
    }
    section {
        padding-top: var(--p50);
    }
    .layui-main {
        padding: 0 var(--p20);
    }
    
    /* 电脑端默认保持 1040px */
    --width: 1040px; 
    
  
    
    .content,
    .title {
        width: var(--width);
        max-width: 100%;
    }
    .sub{
        font-size: var(--ft24);
        margin: var(--p60) 0 var(--p50);
    }
    .title{
        font-size: var(--ft36);
        text-align: center;
        margin-bottom: var(--p40);
        
    }
    .s_content{
        font-size: var(--ft18);
    }
    .prev,
    .next{
        cursor: pointer;
    }
}
    .IndexSwiper {
        width: 100vw;
        height: 100vh;
    
    background: #f2f2f2;
        
    }
.indexText{
    padding: var(--p80) 0;
    --main:1130px;
    width: 100vw;
    height: 100vh ;
    background: linear-gradient(0,  #BFBFBF 50%, transparent 50%);
    .hr{
        
    }
    .Text1{
       text-align: center;
       .d-flex;
       .flex-column;
       .al-c;
       h1{
           font-size:var(--ft45) ;
           color: #000;
       }
       .sub{
           margin-top: var(--p20);
           font-size: var(--ft14);
       }
       .hr{
           margin: var(--p25) auto var(--p60);
           width: 2px;
            height: 46px;
            background: #000000;
       }
    }
    .Card{
          .d-flex;
       .flex-column;
       .jc-s;
        .bg_img;
           font-size: var(--ft24);
        padding: var(--p60) var(--p100);
        color: #fff;
        min-height: 500px;
        .hr{
           margin: var(--p25) 0 var(--p50);
            width: 2px;
            height: 46px;
            background: #FFFFFF;
        }
        .sub{
            margin-top: auto;
        }
    }
}
.indexPhoto{
    width: 100vw;
    height: 100vh ;
    .bg_fixed;
    .d-flex;
    .al-fe;
    .jc-c;
    padding: var(--p100) 0;
    .layui-btn{
        background: initial;
        border-color: #fff;
        width: 203px;
        max-width: 100%;
    }
}
.indexInfo{
    --main:1000px;
       width: 100vw;
    min-height: 100vh ;
    padding: var(--p100 ) 0;
    .Text{
        text-align: center;
        .flex-column-center;
             font-size: var(--ft12);
        .t1{
            margin-top: var(--p25);
        }
         .t2{
            margin-top: var(--p15);
        }
    }
    ul{
        margin-top: var(--p40);
        .d-grid;
        .grid4;
        gap: var(--p15);
        li{
            .bg_img;
            min-height: 360px;
            .d-flex;
            .al-fe;
            .content{
                width: 100%;color: #F2F2F2;
                padding: var(--p10);
               background: rgba(0,0,0,0.7); 
               font-size: var(--ft9);
               line-height: 1.7em;
                .t1{
                    padding: var(--p10) 0 var(--p20);
                    font-size: var(--ft14);
                }
                
            }
        }
    }
}
.indexProduct{
    position: relative;
        width: 100vw;
    height: 100vh;
    .bigSwiper{
        width: 100%;
        height: 100%;
        .swiper-slide{
            height: 100%;
        }
    }
    .bigSwiper{
    	img{
    		width:100%;
    		height:auto;
    		aspect-ratio: 16/9;
    	}
    }
    .smallSwiper{
        padding: var(--p20) 0;
        --main:1400px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        background: rgba(0,0,0,0.7);
        color: #fff;
        text-align: center;
        .swiper-button-prev, .swiper-button-next{
            display: block;
            color: #fff;
            --swiper-navigation-size: 20px;
            margin: 0 10px;
        }
         .swiper-slide{
         .item{
             transition: all 0.5s;
            padding: var(--p10) 5px;
            border-radius: 10px;
         }
         }
    .item:hover ,
      .swiper-slide-thumb-active  .item{
                background-color: rgba(255, 255, 255, 0.15);
            -webkit-transform: scale(1.05);
            -moz-transform: scale(1.05);
            -ms-transform: scale(1.05);
            transform: scale(1.05);
        }
         .img{
            aspect-ratio: 16/9;
            border-radius: 10px;
            text-align: center;
            margin-bottom: var(--p10);
        }
    }
}
.indexHeader{
    --main:1000px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: rgba(19, 19, 19, 0.5);
    padding: var(--p15) 0;
    .layui-main{
        .d-flex;
        .al-c;
        .jc-s;
    }
}
.showHead{
    cursor: pointer;
}
.indexBanner{
    width: 100%;
    height: 100vh;
    .swiper-slide{
        height: 100%;
    }
    .swiper-pagination{
        color: #fff;
        bottom: 25%;
        .d-flex;
        .al-fe;
        .jc-fs;
            gap: 5px;
            line-height: 1em;
            left: 8%;
        .line{
            width: 150px;
            height: 3px;
            background: #fff;
        }
    }
}
@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {
    header .layui-main{
        padding: 15px 0;
    }
    .indexProduct {
        height: auto;
            aspect-ratio: 16 / 9;
    }
    .indexText,
    .indexBanner{
        height: auto;
    }
    .indexText .Card,
  .indexInfo,
    .indexText{
        min-height: auto;
    }
    .indexPhoto{
        height: auto;
        min-height: 50vh;
    }
    .productDetail .layui-main{
        padding: 0;
    }
    .productDetail .info{
        grid-template-columns:1fr
    }
	
    .productDetail .info .bigSwiper .swiper-slide img{
    aspect-ratio:4 /4;
    }
	
    .authMain{
        display: block;;
    }
    .authPage{
        padding: 40px 0;
    }
    .authPage .search button{
        height: 45px;
        padding: 10px;
    }
	.h100 {
		min-height: auto;
	}
    .ContactPage{
        min-height: auto;
    }
    .topBanner,
	.topImg {
		height: 30vh;
	}
.swiper-pagination-bullet{
    width: 8px;
    height: 8px;
}
	.topNav .nav1 {
		height: auto;
	}

	.topNav .nav1 .svgItem {
		--size: 20px;
		--sizef: -20px;

	}
	.indexInfo ul,
.productList,
	.videoPage ul {
		.grid2;
	}
.productMian .layui-main,
	.FilePage .List .listItem .content ul {
		.grid1;
	}
	.indexProduct .smallSwiper{
	    position: unset;
	}
	.indexText{
		background:unset
	}
	.indexText .Card{
	 min-height:150px;
	}
	.indexHeader{
	max-height:100px;
	}
	.indexHeader .layui-main .img_box img{
		width:120px;
	}
	.indexHeader .layui-main .img_box.showHead img{
		width:30px;
	}
	.indexProduct .bigSwiper img{
	 aspect-ratio: 16 / 9;
	}
	.productDetail .info .smallSwiper .img_100{
	aspect-ratio: 4 / 4;
	}
.productDetail .info .smallSwiper{
	height:auto;
	flex-direction: row;
}
.showpro .smallSwiper .next img{
	transform: rotate(-90deg);
}
.showpro .smallSwiper .prev img{
	transform: rotate(-90deg);
}

}

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