@import "./common.less";

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

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

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

}
 .message-modal {
        display: none; /* 默认隐藏 */
        position: fixed;
        z-index: 1000; /* 确保在最上层 */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.5); /* 黑色背景带透明度 */
    }

    /* 弹窗内容 */
    .message-modal-content {
        background-color: #fefefe;
        margin: 10% auto; /* 垂直居中，距离顶部10% */
        padding: 20px;
        border: 1px solid #888;
        width: 80%; /* 宽度可以根据需要调整 */
        max-width: 500px; /* 最大宽度 */
        border-radius: 8px;
        position: relative; /* 为了让关闭按钮绝对定位 */
    }

    /* 关闭按钮 */
    .message-close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

    .message-close:hover,
    .message-close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
.message{


.input{
       padding: 10px 5px;
    color: black;
    border-bottom: 1px solid #ccc;
    
 span{
     color: red;
 }    
}
input{
    padding: 0 5px;
}
.submit{
   border-radius: 28px;
   width: 50%;
    margin: 0 auto;
    padding: 14px;
    background-color: #386d19; 
}
}
.message_title{
      color: rgb(0 0 0 / 65%);;
    font-size: var(--ft36);
    line-height: var(--ft48);
    font-weight: bold;
   text-align: center;
}
.message_sub{
    color: rgba(0,0,0,0.8);
    font-size: var(--ft16);
    line-height: var(--ft20);
        text-align: center;
    padding: 10px 0px;
}
.message form{
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--p20);
    margin-top: var(--p40);
}
footer {
	background: #000000;
	color: #fff;

	nav {
		.d-flex;
		.al-fs;
		gap: var(--p60);
		flex-wrap: wrap;

		li {
			text-align: center;
			min-width: 136px;

		}

		dl {
			margin-top: vaR(--p30);
			.d-grid;
			gap: var(--p10);

			dd {
				text-align: center;
				opacity: 0.8;
			}
		}
	}

	.qrcode {
		.item {
			.flex-column-center;
			gap: var(--p10);
		}

		flex-wrap: wrap;

		li {
			width: 170px;
			aspect-ratio: 1/1;
			border-radius: 55px;
			border: 1px solid #FFFFFF;
		}
	}

	.title {
		font-weight: bold;
		line-height: 1em;
		font-size: var(--ft18);
	}

	.info {
		.d-grid;
		gap: var(--p10);
		font-size: vaR(--ft14);
		margin-top: vaR(--p30);

	}

	.layui-main {
		padding: var(--p60) 0 var(--p50);

		.d-flex;
		.jc-s;
		.al-fs;
		flex-wrap: wrap;
		gap: var(--p40);



	}

	.foot {
		border-top: 1px solid #D8D8D8;
		font-size: var(--ft14);
		.flex-center;
		padding: vaR(--p20) 0;
		text-align: center;
	}

}

header {
    --main:1000px;
	padding: var(--p20) 0;
	position: fixed;
	top: 0;

// 	.layui-btn {
// 		background: #fff;
// 		color: #000;
// 		font-weight: bold;
// 		--btn: 44px;
// 		--btn_size: var(--ft30);
// 		border-radius: 24px;
// 		border: none;

// 		&:hover {
// 			background: #fff;
// 			color: #000;
// 		}
// 	}

	.layui-nav .layui-nav-item {
		margin: 0 var(--p20);
	}

	.layui-nav .layui-nav-item a {
		font-size: var(--ft18);
	}

	.layui-nav .layui-nav-item>a {
transition: all 0.3s;
		color: #fff;
	}
	.layui-nav .layui-nav-item>a:hover{
	    opacity: 0.8;
	}
	.layui-nav .layui-nav-item dl a {
		text-align: center;
		padding: 5px;
		font-size: 16px;
	}

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

	.layui-nav .layui-nav-more {
		display: none;
	}
	&.bgcolor{
	    background: rgba(0,0,0,0.8);
	        box-shadow: 0px 9px 24px 0px rgba(2, 2, 2, 0.48);
	}
}
.index_swiper{
    color: #fff;
    text-align: center;
    background-color: #fff;
    span{
        font-size: vaR(--ft36);
        border-bottom: 1px solid #fff;
    }
    h1{
        
        margin-top: vaR(--p70);
        font-size: var(--ft60);
        line-height: 1em;
    }
    h5{
        font-size:var(--ft22) ;
    }
    .item{
        .flex-column-center;
    aspect-ratio: 1920/700;
    padding-top: var(--p200) 0 var(--p100); 
        *{
            transition: all 0.3s;
        position: relative;
        z-index: 2;
    }
    }

    .img{
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1;
        position: absolute;
    }
}
.shuzi {
    padding-bottom: var(--p100);
	.title {
		text-align: center;
		font-size: var(--ft33);

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

	ul {
		margin-top: var(--p100);
		.d-grid;
		.grid4;
		.al-fs;
		.jc-s;

	}

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

	.num {
	    margin-bottom: var(--p20);
		color: #FF6C4C;
		font-size: var(--ft48);
	}
}


main {
	flex: 1;
}

.IndexYewu {
	.bg_img;
	padding: vaR(--p20) 0;

	.layui-main {
		--main: 1600px;
		max-width: 85%;
	}

	.row {
		.d-grid;
		gap: vaR(--p70);
		grid-template-columns: 1fr 1fr;
	}

	h1 {
		font-size: vaR(--ft63);
		color: #fff;
	}

		.img {
			margin-bottom: -50px;
			.d-flex;
			.jc-fe;
             height: var(--p200);
             position: relative;
			img {
			  bottom: 0;
                height: fit-content;
			    position: absolute;
				right: -10%;
				height: 100%;
			}
		}
	.item {
		padding: var(--p50);
		color: #fff;
		background: linear-gradient(-54deg, #505050, #201F1F);
		box-shadow: 0px 1px 51px 0px rgba(2, 2, 2, 0.43);

		h5 {
			margin-top: vaR(--p30);
			font-size: var(--ft36);
		}

		.sub {
			padding-right: var(--p200);
			margin-top: vaR(--p20);
			line-height: 2em;
			font-size: var(--ft24);

		}
		.img{
		    height: var(--p150);
		    img{
    height: fit-content;
		    }
		}

	}
	.item:not(.item1){
	    margin-right: var(--p50);
	    .img img{
	        right: -20%;
	    }
	}

	.item+.item {
		margin-top: var(--p30);
	}

	.item1 {
		margin-top: vaR(--p140);
		padding: var(--p70) var(--p20) 0 var(--p50);
		background: linear-gradient(-54deg, #FF7272, #B91919);
		box-shadow: 0px 9px 24px 0px rgba(2, 2, 2, 0.48);

		.img{
		    height: var(--p200);
		  
		}
		
	}
}

.shiyong {
	color: #fff;
	padding: vaR(--p100) 0;
	.bg_fixed;

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

	.layui-btn {
		color: #000;
		font-weight: bold;
		border-radius: 8px;
		margin-top: vaR(--p90);
		--btn: 40px;
		color: #fff;
		--btn_color: #FF6C4C;
		padding: 0 var(--p30);
		transition: all 0.3s;

		&:hover {
			background: #FF6C4C;
			color: #fff;
			padding: 0 var(--p50);
		}

	}
}

.funeng {
	padding: vaR(--p100) 0 var(--p90);
	background: linear-gradient(180deg, #fff 30%, #F1F1F4);

	h1 {
		margin: var(--p20) 0;
		text-align: center;
		font-size: var(--ft33);
	}

	ul {
		margin-top: vaR(--p100);
		.d-grid;
		.grid4;
		text-align: center;
		font-size: var(--ft33);
	}

	li {
		.flex-column-center;
		background: #fff;
		aspect-ratio: 1/1;
		padding: var(--p20);
		border: 1px solid #EBEBEB;
	}

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





}
	.Indextitle {
		text-align: center;
		position: relative;
		padding: var(--p50) 0 var(--p20);

		h1 {
			margin-top: vaR(--p40);
			font-size: var(--ft36);
		}

		.sub {
			margin-top: vaR(--p40);
			font-size: var(--ft18);
		}

		.en {
			white-space: nowrap;
			top: 50%;
			left: 50%;

			text-transform: uppercase;
			transform: translate(-50%, -50%);
			font-size: 245px;
			font-weight: normal;
			position: absolute;
			z-index: 0;
			color: #F9F9F9;

		}

		* {
			position: relative;
			z-index: 1;
		}
	}
.en {
	font-size: var(--ft18);

}

.comTitle {
    position: relative;
    
		font-size: var(--ft18);
		*{
		    position: relative;
		    z-index: 2;
		}
	h5 {
	    letter-spacing: 4px;
		margin: var(--p10) 0;
		font-size: var(--ft36);
		font-weight: normal;
	}

	.hr {
		width: 109px;
		height: 6px;
		margin: 0 auto 4px;
		background: linear-gradient(-90deg,#fff ,#FF6C4C );
		border-radius: 3px;
	}
	.key{
	    color: #F9F9F9;
	    font-size: var(--ft150);
	    z-index: 0;
	    top: 0;
	    line-height: 1em;
	    white-space: nowrap;
	    text-transform: uppercase;
	    position: absolute;
	}
}

.AboutText {
	.Block {
		.d-grid;
		grid-template-columns: 0.85fr 1fr;
		gap: var(--p40);

	}

	.img {
	        box-shadow: 0px 0px 24px 0px rgba(2, 2, 2, 0.48);
	    border-radius: 10px;
		flex-shrink: 0;
	}

	h5 {

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

	.con {
		line-height: 2em;
		margin-top: vaR(--p40);
		font-size: var(--ft18);
	}

}

.AboutList {

	ul {
	    
    color: #fff;
		margin-top: var(--p30);
		.d-grid;
	
		gap: var(--p30);
		font-size: var(--ft60);
		    text-align: center;
    padding-bottom: 0;
    .key{
        font-size: var(--ft24);
	    margin-bottom: vaR(--p40);
    }
    *{
        position: relative;
        z-index: 2;
    }
    .img{
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    	li{
	    aspect-ratio: 1920/700;
	    padding: vaR(--p150) 0;
	}

	h5 {
line-height: 1.1em;
		font-size: var(--ft60);
	}
	}

}

.Soult {
	.List {
	    margin: vaR(--p100) 0;
		.d-grid;
		.grid3;
		gap: vaR(--p130);
		h5{
		    font-size: var(--ft20);
		    text-align: center;
		    
		font-weight: normal;
		margin: var(--p20) 0;
		}
		.con{
		    
		}
	}
	
.comTitle{
    text-align: center;
    margin-bottom: var(--p60);
}




	.item0{
	    --main:1500px
	}
	section{
	    .bg_img;
	    background-color: #fff;
	}

}

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

@media only screen and (max-width: 990px) {
	footer nav li {
		min-width: auto;
	}

	.IndexYewu .item1 {
		border-radius: 20px;
	}

	.funeng img,
	.IndexYewu .item .img img,
	.shuzi img {
		max-height: 50px;
	}

	footer .qrcode .item img {
		max-width: 50px;
	}

	.funeng ul {
		.grid2;
	}

	.IndexYewu .row {
		.grid1;
	}

	.AboutText .Block {
		.d-grid;
		.grid1;
	}

	.AboutText .img {
		max-width: 100%;
	}

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

	footer .layui-main .qrcode li {
		width: 80px;
		border-radius: 8px;
	}

	.logo img {
		max-height: 30px;

	}

	header .layui-btn,
	.shiyong .layui-btn {
		--btn: 40px;
	}
.index_swiper .item{
	    padding: 60px 0 40px;
    aspect-ratio: unset;
	}
	.Indextitle .en{
	    font-size: 60px;
	}
	.IndexYewu .img{
	    margin-bottom: 0;
	}
	.Soult .List .img_box img{
	    max-height: 40px;
	}
	.comTitle .key{
	    font-size: 50px;
	}
		.Soult .List{
		    .grid1;
		}
		.AboutList ul li{
		    aspect-ratio: auto;
		    padding: 40px 0;
		}
		.AboutText .img{
		    max-width: 50%;
		    margin: 0 auto;
		}
		.navMobile  {
		    background: rgba(0,0,0,0.5);
		}
}

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