@import "./common.less";

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

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

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

main {
	flex: 1;
}
header{
    padding: var(--p30) 0;
    .layui-nav .layui-nav-item a{
        font-size: var(--ft24);
        color: #000;
    }
    .layui-main{
        .flex-center;
    }
    position: sticky;
    background: #fff;
    .layui-nav .layui-nav-item a:hover, .layui-nav .layui-this a {
    color: var(--ftc);
    text-decoration: none;
}
.layui-nav .layui-this:after, .layui-nav-bar{
    display: none;
}
}
footer {
	padding: var(--p30) 0;
	--main: 1800px;
	background: #000;
	color: #fff;
	font-size: var(--ft18);

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

	ul {
		.d-flex;
		.al-c;
		gap: vaR(--p20);

		span {
			color: vaR(--ftc);
		}

		a {
			transition: all 0.3s;
		}

		a:hover {
			opacity: 0.8;
		}
	}
}


.Ques {
	padding: var(--p150) 0;
	background: var(--ftc);
	color: #000;

	h1 {
		text-align: center;
		font-size: vaR(--ft36);
	}

	ul {

		margin-top: vaR(--p40);
		.d-grid;
		gap: var(--p20);
	}

	h5 {
		margin-bottom: var(--p30);
		font-size: vaR(--ft18);
		font-weight: normal;
		text-align: center;
	}

	li {
		.flex-column-center;
	}

	.layui-btn {
		border-radius: ;
		width: 380px;
		margin: 0 auto;
		display: inline-block;
		--btn: 90px;
		--btn_size: var(--ft24);
		background: #000;
		color: #fff;
	}
}


.layui-btn {
	--before_color: #000;
	position: relative;

	border-radius: 46px;
	&::after {}

	&::after,
	&::before {
		content: "";
		position: absolute;
		border: 2px solid var(--before_color);
		width: calc(100% +10px);
		height: calc(var(--btn)) +5px;
		border-radius: 46px;
		/* 简写为 */
		inset: -10px;
		/* 添加动画 */
		animation: pathRotate 8s infinite linear;
	}

	&::after {
		animation-delay: -4s;
	}


	&:hover {
		opacity: 1;

		&::after,
		&::before {
			animation-play-state: paused;
	
		}
	filter: brightness(1.1);
	}
}
.abtn{
    width: 570px;
    padding: 0 var(--p40);
    --btn:120px;
    color: #000;
    --btn_size:var(--ft30);
    --btn_color:var(--ftc);
	--before_color:var(--ftc);
	&:hover{
	    background:  var(--ftc);
	}
}
    h5{
            display: inline-block;
            font-size: var(--ft36);
        }
.BtnBox {
    padding: var(--p100) 0 vaR(--p70);
    ul{
        padding-top: var(--p50);
        border-top: 3px solid #000;
        	li {
        	    
        		.flex-column-center;
        		.jc-fe;
        	}
        h5{
            margin-bottom: var(--p30);
        }
        
    }
}
.BtnBox2{
    ul{
        .d-flex;
        .al-fe;
        .jc-sa;
    }
}
.Video{
    background: var(--ftc);
    ul{
        .d-grid;
        .grid2;
        gap: var(--p100);
    }
    li{
        .d-flex;
        .flex-column;
        .jc-s;
        .al-c;
    }
    h5{
    }
    video{
        background: #000;
        margin-top: var(--p30);
        width: 100%;
        max-width: 100%;
        aspect-ratio:72/36 ;
    }
}
.BtnBox1{
    
    ul{
        .d-grid;
        
    }
}
.Text{
    font-size: var(--ft24);
    line-height: 1em;
    .Block{
        padding: var(--p100) var(--p50);
        margin: 0 var(--p80);
        background: var(--ftc);
    }
    h5{
    line-height: 1.2em;
        margin-bottom: var(--p30);
    }
    .Info{
        margin-bottom: var(--p40);
        .d-grid;
        grid-template-columns: 0.8fr 1fr;
        .al-fe;
        
    }
  
}
.index_swiper{
    width: 100%;
    height: auto;text-align: center;
  
    h1{
          color: var(--ftc);
    font-size: var(--ft36);
    }
  .SwiperItem{
      aspect-ratio:1920/600 ;
        height: auto;
    }
}
@keyframes pathRotate {

	0%,
	100% {
		clip-path: inset(0 0 98% 0);
	}

	25% {
		clip-path: inset(0 98% 0 0);
	}

	50% {
		clip-path: inset(98% 0 0 0);
	}

	75% {
		clip-path: inset(0 0 0 98%);
	}
}

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

@media only screen and (max-width: 990px) {
    .navMobile li,
    .menu_button .line{
        stroke: #000;
    }
    .layui-btn{
        --btn:40px !important;
        --btn_size:var(--ft14) !important;
    }
    .Text .Info,
    .Video ul,
    .BtnBox2 ul{
        gap: var(--p40);
        .d-grid;
        .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) {}