@import "./common.less";
@font-face{
    font-family: "Regular";
    src:url("/public/home/font/Regular.otf")
}
@font-face{
    font-family: "Bold";
    src:url("/public/home/font/Bold.otf")
}

body {
	font-size: var(--ft16);
	font-family: 'Regular';
	color: #333;
	.d-flex;
	.flex-column;
	min-height: 100vh;

	@media (max-width: 768px) {}
}
  .layui-btn{
      padding:0 3vw;
  }
.videoDialog{
    max-width: 100%;
    video{
        width: 100%;
        height: 100%;
    }
    .layui-layer-content{
        overflow: hidden;
    }
}
.index_swiper {
    position: relative;
	--swiper-pagination-color: #fff;
	--swiper-pagination-bullet-inactive-color:#fff;
	 --swiper-pagination-bullet-inactive-opacity:0.5;
        .swiper{
            width: 100vw;
            position: relative;
            z-index: 10;
        }
    .bg{
        background: #000;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 0;
        object-fit: cover;
    }
 
	.swiper-pagination-bullet {
		transition: all 0.5s;
		width: 20px;
		border-radius: 16px;
	}

	.swiper-pagination-bullet-active {
		width: 40px;
		
	}
	h2{
	    font-size: var(--ft44);
	    
	}
    .SwiperItem{
        position: relative;
        color: #fff;
        z-index: 9;
        .flex-center;
        text-align: center;
        width: 100vw;
        height: 100vh;
           .block{
            position: relative;
            z-index: 2;
        }
    }
	.swiper-slide-active {
	    position: relative;
	    z-index: 20;
		.t2,
		.t3,
		.t1 {
			transform: translateY(0);
			opacity: 1;

		}
	}

	.t2,
	.t3,
	.t1 {
		transform: translateY(100px);
		opacity: 0;
		transition: all 1s;
	}

	.t2 {
margin-top: var(--p40);
		transition-delay: 0.2s;
	}

	.t3 {

		transition-delay: 0.4s;
	}
}
.indexMain {
	background: #fff;
	.About {
	    .Card{
	        .al-c;
	    }
	    .sub{
	        .line-clamp7;
	    }
	    .layui-btn{
	        background: #fff;
	        color: #333;
	        margin-top: vaR(--p30);
	        &:before{
	            background: #000;
	        }
	        &:hover{
	            color: #fff;
	        }
	    }
	}
}

.Main {
	background: #F6F6F6;
	padding-top: var(--p80);
}

.indexMain {}

.IndexParent {
	ul {
		margin-top: vaR(--p50);
		.d-grid;
		.grid4;
		gap: var(--p20);

		li {
			transition: all 0.5s;
			position: relative;
			bottom: 0;

			&:hover {
				bottom: 10px;
				border-radius: 16px;
				box-shadow: 1px 1px 10px rgb(0 0 0 / 8%);
			}
		}
	}
}

.h1 {
	font-size: var(--ft60);
	color: #333;
	text-align: center;
	font-family: 'Bold';
	font-weight: normal;
}

main {
	flex: 1;
}

header {
	.layui-nav .layui-nav-more {
		right: unset;
		margin-left: 2px;
	}
    .nav {
        font-family: "Bold";
    }
	.layui-main {
		transition: all 0.5s;

		margin: auto;
		padding: var(--p20) 0;

		.layui-nav .layui-nav-item {
			line-height: 2.5em;
			margin-left: 6vw;
		}

		.layui-nav .layui-this:after,
		.layui-nav-bar {
			height: 1px;
			background: #fff;
		}

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

		.layui-nav {
			.layui-nav-child {

				top: calc(100% + 10px);
				border: none;
				padding: var(--p10) 0;
				left: 50%;
				transform: translateX(-50%) !important;
				background: #333333;

				a {
					background: initial !important;
					padding: 5px var(--p30);
					color: #fff !important;
					text-align: center;
					line-height: 2em !important;

					&:active,
					&:hover {
						background: initial !important;
						text-decoration: underline !important;
					}
				}
			}
		}

	}

	transition: all 0.5s;
	background: rgba(0, 0, 0, 0.55);

    &.index{
        // background: rgba(255,255,255,0.11);
    }
	&.bgcolor {
		background: rgba(0, 0, 0, 0.8);

		.layui-main {

			padding: var(--p10) 0;
		}
	}


}

.Work {
	font-size: var(--ft20);

	.sub {
		text-align: center;
		margin-top: var(--p40);
	}

	ul {
		li {
			margin-top: var(--p60);
		}

		p {
			padding: var(--p30) 0;
			text-align: center;

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

footer {
	border-top: 1px solid #eee;
	text-align: center;
	padding: var(--p15) 0;
	color: #999999;
	font-size: var(--ft14);
}

.Contact {
	h1 {
		margin-bottom: var(--p50);
	}

	.Card {
		.d-grid;
		.grid2;
		gap: var(--p60);
	}

	.title {
		font-size: vaR(--ft20);

		b {
			margin-right: 20px;
			color: #333;
			font-size: var(--ft50);
		}
	}

	form {
		margin-top: var(--p30);
	}

	.form_item {
		margin-bottom: vaR(--p20);
	}

	.label {
		margin-bottom: var(--p10);
	}

	.tips {
		font-size: var(--ft20);
	}

	.layui-btn {
		margin-top: var(--p20);
		min-width: 200px;
		&::before{
		    background: #fff;
		}
		&:hover{
		    color: #000;
		}
	}
}

.About {
	font-size: var(--ft20);

	.Card {
		.d-grid;
		.grid2;
		line-height: 2em;
		gap: var(--p80);
		margin-top: var(--p60);

		.img {
			img {

				box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);
				border-radius: 10px;
			}
		}
	}

	.s_content {
		margin-top: var(--p100);

	}
}

.IndexWork {
	background: #F9F9F9;
	font-size: vaR(--ft20);

	.sub {
		margin-top: var(--p30);
		text-align: center;
	}

	ul {
		.d-grid;
		.grid3;
		gap: var(--p50);
		margin-top: var(--p40);

		.img {
			aspect-ratio: 430/290;
			margin-bottom: var(--p10);
			position: relative;

			&::before {
			    z-index: 1;
				display: block;
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0,0.5);
			}
		}

		font-size: var(--ft30);
		text-align: center;
.item {
		display: block;

		&:hover {
			.img {
				&::before {
				background: rgba(0, 0, 0,0);
				}

				box-shadow: 1px 1px 10px rgb(0 0 0 / 8%);
			}
		}
	}
	}

	

}

.navMobile .child {
	dl {
		margin-top: var(--p10);
		.d-grid;
		gap: 8px;
	}
}

.navMobile {
	li>a {
		display: block;
	}
}

.navMobile .child {
	>a {

		&::after {
			display: inline-block;
			font-family: layui-icon !important;
			font-style: normal;
			content: "\e61a";
		}
	}
}

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

@media only screen and (max-width: 990px) {
	.Main {
		padding-top: 60px;
	}

	body {
		--btn: 40px;
		--btn_size: 14px;
		--input: 40px;
		--input_size: 14px;
	}

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

	.About .Card {
		.grid1;

	}
	.index_swiper .t1{
	    img{
	        width: 40px;
	    }
	}
.IndexWork ul,
	.IndexParent ul {
		.grid2;
	}

	.Contact .Card {
		.grid1;

		.img_box1 {
			img {
				max-width: 50vw;
			}
		}
	}
	.index_swiper .SwiperItem{
	    height: 50vh;
	}
}

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