@charset "utf-8";

body{ margin:0px; padding:0px; font-size:12px;font-family:'tahoma2';color:#898989;line-height:1; background:#FFF;}
ul,li,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,ol,form,input{ margin:0px; padding:0px;}
input,textarea { font-family: "PINGFANG_MEDIUM"; border: none; outline: none; background: none; }
ul,li{ list-style:none}
img{border:0px; padding:0px; 
/* display: block; */
}
a{ color:#5c5c5c; text-decoration:none}

.loadContainer{ width: 100%; min-height: 100vh; background: url(../images/bg.jpg) center center no-repeat; background-size:cover; display: flex;flex-direction: column;}
.loadContainer .yuyan{ padding-left: 40px; height: 30px; background: url(../images/a2.png) left center no-repeat; background-size:auto 100%; position: absolute; right: 50px; top: 20px; cursor: pointer; padding-right: 30px;}
.loadContainer .yuyan p{ height: 30px; color: #fff; line-height: 30px;  font-size: 16px;}
.loadContainer .yuyan:after{ background: url(../images/a1.png); width: 16px; height: 8px; background-size:100% 100%; content: ''; right: 0; top: 50%; transform: translateY(-50%); position: absolute; transition: 0.5s}
.loadContainer .yuyan.on:after{ transform: translateY(-50%) rotate(180deg);}
.loadContainer .yuyan ul{ display: none; width: 120px; top: 40px; position: absolute; height: auto; background: #fff; left: 0; overflow-y: scroll;}
.loadContainer .yuyan ul li{ transition: 0.5s; height: 30px; line-height: 30px; text-align: center; font-size: 16px;}
.loadContainer .yuyan ul li:hover{ background: #ff9000; color: #fff;}

.loadContainer .Nr {
    flex: 0.7;                    /* 占据剩余空间 */
    display: flex;
    flex-direction: column;
    justify-content: center;    /* 垂直居中 */
}

.loadContainer .logo{ width: 100%;}
.loadContainer .logo img{ display: block; margin: 0 auto;}
.loadContainer .list{ padding-top: 35px;}
.loadContainer .list .bt{ padding: 0 0 20px 0;}
.loadContainer .list .bt img{ display: block; margin: 0 auto;}
.loadContainer .list input{ display: block; margin: 0 auto; border-radius:8px; padding: 0 15px; font-size: 20px; letter-spacing: 2px; width: 390px; height: 48px; border: 2px solid #9f9f9f; box-sizing: border-box; background: #fcfcfc;}
.loadContainer .list .text{ text-align: center; font-size: 30px; color: #fff; text-shadow: -2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-2px 2px 0 #000,0 2px 0 #000,2px 2px 0 #000;}
.loadContainer .list button{ cursor: pointer; width: 315px; background: url(../images/M_07.png); height: 72px; background-size:100% 100% ; margin: 20px auto; display: block; border: none; line-height: 65px; text-align: center; text-shadow: -2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-2px 2px 0 #000,0 2px 0 #000,2px 2px 0 #000; font-size: 32px; color: #fff;}
.loadContainer .list button img{ margin-right: 5px; display: inline-block; vertical-align: middle; transform: translateY(-2px);}

.loadContainer .tips {
    display: flex;
    align-items: flex-start;
    padding: 15px 35px;

    margin-top: auto;   /* 把 tips 推到最底部 */
    margin-left: auto;  /* 把 tips 推到最右边 */
}


.loadContainer .tips img {
    margin-right: 10px;      /* 图片右边距 */
    width: 50px;             /* 固定图片宽度 */
    height: auto;
    flex-shrink: 0;          /* 防止图片被压缩 */
}

.loadContainer .tip-text {
    flex: 1;                 /* 占据剩余空间 */
}

.loadContainer .tip-text p {
    color: #ff9000;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 1px;      /* p标签之间的间距 */
}

.loadContainer .Nr2{ padding-top: 25px;}
.loadContainer .tab{ width: 650px; margin: 0 auto; padding-top: 30px;}
.loadContainer .tab table{ width: 100%;}
.loadContainer .tab table td{ font-size: 24px; color: #fff; position: relative;  text-shadow: -2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-2px 2px 0 #000,0 2px 0 #000,2px 2px 0 #000; height: 40px;}
.loadContainer .Nr2 button{ cursor: pointer; width: 315px; background: url(../images/M_07.png); height: 72px; background-size:100% 100% ; margin: 20px auto; display: block; border: none; line-height: 65px; text-align: center; text-shadow: -2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-2px 2px 0 #000,0 2px 0 #000,2px 2px 0 #000; font-size: 32px; color: #fff;}
.loadContainer .list2{ width: 650px; margin: 0 auto;}
.loadContainer .list2 .bt{ width: 100%; margin-bottom: 20px; border-radius:20px; overflow: hidden;}
.loadContainer .list2 .bt img{ display: block; width: 100%; height: auto;}
.loadContainer .list2 ul{ overflow: hidden;}
.loadContainer .list2 ul li{position: relative; float: left; width: 208px; border-radius:12px; overflow: hidden; float: left; margin: 0 2% 10px 0;}
.loadContainer .list2 ul li:nth-child(3n){ margin-right: 0;}

.loadContainer .list2 ul li a {
    display: block;
    position: relative;
}

.loadContainer .list2 ul li img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.loadContainer .list2 ul li .num {
    position: absolute;
    inset: 0;
}

.loadContainer .list2 ul li .num p {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 2px #693202;
    margin: 0;
}

.loadContainer .list2 ul li .num .title {
        top: 4%;
        font-size: clamp(16px, 4vw, 22px);
    }

    .loadContainer .list2 ul li .num .price {
        top: 61%;
        font-size: clamp(18px, 4.5vw, 24px);
    }

    .loadContainer .list2 ul li .num .buy {
        top: 80%;
        font-size: clamp(16px, 4vw, 22px);
    }
.top{ width: 100%; max-width: 1280px; margin: 0 auto; background: url(../images/index_01.jpg) repeat-x; background-size:auto 100%; height: 90px; line-height: 90px; }
.top .topBox{ position: relative; width: 100%; padding: 0 20px; box-sizing: border-box; max-width: 1280px; margin: 0 auto; height: 100%;}
.top .logo{ float: left; height: 100%; line-height: 90px;}
.top .logo a{ display: block; height: 100%;}
.top .logo img{ display: inline-block; vertical-align: middle; height: 60px; width: auto;}
.top select{ width: 160px; height: 54px; border-radius:6px; background: #fff; border: 1px solid #767477; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); }

.banner{ width: 100%; max-width: 1280px; margin: 0 auto;}
.banner img{ display: block; width: 100%; height: auto;}

.indexContainer{ width: 100%; max-width: 1280px; margin: 0 auto; padding: 10px; box-sizing: border-box;}
.indexContainer .layer1{ width: 100%; padding: 0 40px 25px 40px; box-sizing: border-box; background: #2d568e; border: 2px solid #c9e2e7; border-radius:15px;}
.indexContainer .layer1 .bt{ height: 65px; line-height: 65px; font-size: 24px; color: #fff; text-shadow: -2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-2px 2px 0 #000,0 2px 0 #000,2px 2px 0 #000;}
.indexContainer .layer1 .inp input{ padding: 0 12px; box-sizing: border-box; font-size: 20px; color: #fff; width: 570px; height: 54px; border: 2px solid #66a4d8; position: relative; border-radius: 10px; background: #16273b;}
.indexContainer .layer1 .inp input::placeholder{ color: #fff;text-shadow: -2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-2px 2px 0 #000,0 2px 0 #000,2px 2px 0 #000; font-weight: bold;}
.indexContainer .layer1 .inp p{ height: 44px; line-height: 44px;}
.indexContainer .layer1 button{ width: 570px; background: none; border: none;}
.indexContainer .layer1 button img{ display: block; width: 100%; height: auto;}
.indexContainer .layer1 .tab{ width: 100%;}
.indexContainer .layer1 .tab table{ width: 100%;}
.indexContainer .layer1 .tab td{ font-size: 38px; height: 100px; color: #fff;  text-shadow: -2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-2px 2px 0 #000,0 2px 0 #000,2px 2px 0 #000;}

.indexContainer .layer2{  width: 100%; box-sizing: border-box; background: #2d568e; border: 2px solid #c9e2e7; border-radius:15px; padding: 0 30px 65px 30px; margin-top: 35px;}
.indexContainer .layer2 .bt{ width: 100%; height: 92px; line-height: 92px;}
.indexContainer .layer2 .bt .box{line-height: 92px; width: 50%; float: left;}
.indexContainer .layer2 .bt .box b{ vertical-align: middle; font-size: 32px; color: #fff; text-shadow: -2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-2px 2px 0 #000,0 2px 0 #000,2px 2px 0 #000;}
.indexContainer .layer2 .bt .box span{ height: 54px; line-height: 50px; box-sizing: border-box; font-size: 32px; margin-left: 15px; display: inline-block; vertical-align: middle; padding: 0 39px; border: 2px solid #66a4d8; border-radius:18px; background: #16263b;}
.indexContainer .layer2 .bt .box span i{font-style: inherit; background-image: linear-gradient(#ffb811,#fff064); -webkit-background-clip: text; color: transparent;  font-weight: bold; }
.indexContainer .layer2 .bt .box ul{ float: right; height: 92px; line-height: 92px;}
.indexContainer .layer2 .bt .box ul li{ height: 92px; line-height: 92px; float: left; margin-left: 12px;}
.indexContainer .layer2 .bt .box ul li select{ font-size: 24px; text-indent: 30px; border: 2px solid #7d7d7d; border-radius:6px; background: #fff; width: 215px; height: 54px;}
.indexContainer .layer2 .list{ width: 100%; padding-top: 70px; width: 100%;}
.indexContainer .layer2 .list ul{ width: 100%;}
.indexContainer .layer2 .list ul li{ cursor: pointer;  width: 23.5%; float: left; margin: 0 2% 55px 0;}
.indexContainer .layer2 .list ul li:nth-child(4n){ margin-right: 0;}
.indexContainer .layer2 .list ul li .icon{border-radius:18px 18px 0 0; position: relative; width: 100%; height: 250px;}
.indexContainer .layer2 .list ul li .icon img{ display: block; width: 100%; height: 250px;}
.indexContainer .layer2 .list ul li .icon .zf{ background: url(../images/indexIcon_11.png); width: 163px; height: 109px; background-size:100% 100%; text-align: center; line-height: 90px; font-size: 34px; color: #fff;text-shadow: 0 4px 2px #693202; position: absolute; left: 0; top: -34px;}
.indexContainer .layer2 .list ul li .icon p{ width: 100%; text-align: center; position: absolute; font-size: 38px; color: #fff;text-shadow: 0 4px 2px #693202; left: 0; bottom: 20px;}
.indexContainer .layer2 .list ul li .text{ border-radius:0 0 18px 18px; font-size: 42px; color: #fff; text-shadow: 0 4px 2px #693202; background: url(../images/index_11.jpg); width: 100%; height:80px; line-height: 74px; text-align: center; background-size:100% 100% ;}
.indexContainer .layer2 .list ul li.on .text{ background: url(../images/index_13.jpg); background-size:100% 100% ;}
.indexContainer .layer3{width: 100%; box-sizing: border-box; background: #2d568e; border: 2px solid #c9e2e7; border-radius:15px; padding: 0 30px 0 30px; margin-top: 35px;}
.indexContainer .layer3 .bt{ width: 100%; height: 130px; line-height: 130px; font-size: 42px; color: #fff;text-shadow: -2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-2px 2px 0 #000,0 2px 0 #000,2px 2px 0 #000;}
.indexContainer .layer3 ul{ overflow: hidden;}
.indexContainer .layer3 ul li{ line-height: 144px; width: 48%; height: 154px; background: #fff; float: left; margin: 0 4% 0 0; border-radius:10px; border: 5px solid #2d558e; box-sizing: border-box; cursor: pointer; padding: 0 35px;}
.indexContainer .layer3 ul li img{ display: inline-block; vertical-align: middle; }
.indexContainer .layer3 ul li:last-child{ margin-right: 0;}
.indexContainer .layer3 ul li.on{ border: 5px solid #92ecff; background: #dcf9ff url(../images/index_29.jpg) right bottom no-repeat;}
.indexContainer .layer3 .pay{ overflow: hidden;height: 180px; line-height: 180px;}
.indexContainer .layer3 .pay dl{ float: right; overflow: hidden;}
.indexContainer .layer3 .pay dl dd{ float: left; margin-left: 35px; line-height: 180px; vertical-align: middle; font-size: 60px; color: #fff;text-shadow: -2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-2px 2px 0 #000,0 2px 0 #000,2px 2px 0 #000;}
.indexContainer .layer3 .pay dl dd img{ display: inline-block; vertical-align: middle;}

.indexContainer .layer4{width: 100%; box-sizing: border-box; background: #2d568e; border: 2px solid #c9e2e7; border-bottom: 0; border-radius:15px 15px 0 0; padding: 30px 30px 40px 30px; margin-top: 35px;}
.indexContainer .layer4 p{ margin-bottom: 20px; line-height: 50px; font-size:42px; color: #fff; text-shadow: -2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-2px 2px 0 #000,0 2px 0 #000,2px 2px 0 #000;}

.footer{ width: 100%; max-width: 1280px; margin: 0 auto; background: url(../images/index_32.jpg); height: 315px; background-size:cover ; padding-top: 65px; box-sizing: border-box;}
.footer ul{ text-align: center;}
.footer ul li{ display: inline-block; margin: 0 22px; width: 345px; height: 102px;}
.footer ul li img{ display: block; width: 100%; height: 100%;}
.footer p{ text-align: center; line-height: 32px; color: #fff; padding-top: 25px; font-size: 22px; color: #fff;}
.footer p a{ color: #fff;}


@media (max-width:1280px ) {
	.top{ height: 60px;}
	.top .topBox{ width: 100%; height: 60px;}
	.top .logo{ line-height: 60px;}
	.top .logo img{ height: 50%; width: auto;}
	.top select{ width: 100px; height: 40px;}
	.loadContainer .list input{ display: block; margin: 0 auto; border-radius:8px; padding: 0 15px; font-size: 20px; letter-spacing: 2px; width: 300px; height: 48px; border: 2px solid #9f9f9f; box-sizing: border-box; background: #fcfcfc;}
	.loadContainer .list button{ cursor: pointer; width: 280px; background: url(../images/M_07.png); height: 72px; background-size:100% 100% ; margin: 20px auto; display: block; border: none; line-height: 65px; text-align: center; text-shadow: -2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-2px 2px 0 #000,0 2px 0 #000,2px 2px 0 #000; font-size: 32px; color: #fff;}
    .loadContainer .list button img{ margin-right: 5px; display: inline-block; vertical-align: middle; transform: translateY(-2px);}
	.indexContainer .layer1{ width: 100%; padding: 0 2% 2% 2%;}
	.indexContainer .layer1 .tab td{ height: 1.5rem; font-size: .8rem;}
	.indexContainer .layer2{ padding:0 2% 2% 2%;}
	.indexContainer .layer2 .bt .box b{ font-size: .64rem;}
	.indexContainer .layer2 .bt{ height: auto; overflow: hidden;}
	.indexContainer .layer2 .list{ padding-top: 1rem;}
	.indexContainer .layer2 .bt .box{ line-height: 2rem;}
	.indexContainer .layer2 .bt .box span{ display: inline-block; text-align: center; width: auto;  margin: 0; font-size: .64rem; padding: 0 .8rem; vertical-align: top; margin-right: 2rem;}
	.indexContainer .layer2 .list ul li{ width: 32%; margin: 0 2% 1rem 0;}
	.indexContainer .layer2 .list ul li:nth-child(4n){ margin-right: 2%;}
	.indexContainer .layer2 .list ul li:nth-child(3n){ margin-right: 0;}
	.indexContainer .layer2 .bt .box ul li select{ font-size: .64rem; width: 5rem; height: 2rem; text-indent: .3rem;}
	.indexContainer .layer2 .list ul li .icon{ height: auto;}
	.indexContainer .layer2 .bt .box ul{ height: auto;}
	.indexContainer .layer2 .bt .box ul li{ float: right; margin: 0; display: block; height: auto; line-height: 1; margin-top: .4rem;}
	.indexContainer .layer2 .list ul li .icon img{ height: auto;}
	.indexContainer .layer2 .list ul li .icon p{ font-size: .64rem;}
	.indexContainer .layer2 .list ul li .text{ height: ;}
	.indexContainer .layer2 .list ul li .icon .zf{ width: 3.2rem; height: 2.2rem; line-height: 1.8rem; font-size: .68rem; top: -.68rem;}
	.indexContainer .layer2 .list ul li .text{ width: 100%; height: 1.5rem; line-height: 1.5rem; font-size: .64rem;;}
	.indexContainer .layer1 .inp input{ width: 100%;}
	.indexContainer .layer1 button{ width: 100%;}
	.indexContainer .layer3 .bt{ height: 2rem; line-height: 2rem; font-size: .64rem;}
	.indexContainer .layer3 ul li{ height: 3rem; border:.1rem solid ##2d568e; line-height: 2.8rem; padding: 0 1rem; }
	.indexContainer .layer3 ul li.on{border: .1rem solid #92ecff; background-size:auto 30%;}
	.indexContainer .layer3 ul li img{ height: 50%; width: auto; vertical-align: middle;}
	.indexContainer .layer3 ul li:last-child img{ height: 35%; width: auto;}
	.indexContainer .layer3 .pay{ height: 3.2rem;}
	.indexContainer .layer3 .pay dl dd{ height: 3.2rem; line-height: 3.2rem; font-size: 1.2rem;}
	.indexContainer .layer3 .pay dl dd img{ height: 50%; width: auto;}
	.indexContainer .layer4 p{ font-size: 1rem; line-height: 1.5rem;}
	.footer ul{ width: 100%; padding: 0 4%; box-sizing: border-box; overflow: hidden;}
	.footer ul li{ float: left; width: 49%; margin: 0 2% 0 0; height: auto;}
	.footer ul li:last-child{ margin-right: 0;}
	
	.loadContainer .logo img{ width: 80%; margin: 0 auto;}
	.loadContainer .tab{ width: 100%; padding: 0 2%; box-sizing: border-box;}
	.loadContainer .tab table td{ font-size: 16px;}
	.loadContainer .list2{ width: 100%; padding: 0 2%; box-sizing: border-box;}
	.loadContainer .Nr2 button{ cursor: pointer; width: 250px; background: url(../images/M_07.png); height: 72px; background-size:100% 100% ; margin: 20px auto; display: block; border: none; line-height: 65px; text-align: center; text-shadow: -2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-2px 2px 0 #000,0 2px 0 #000,2px 2px 0 #000; font-size: 32px; color: #fff;}
	.loadContainer .list2 ul li{ width: 49%; margin: 0 2% 10px 0;}
	.loadContainer .list2 ul li:nth-child(3n){ margin-right: 2%;}
	.loadContainer .list2 ul li:nth-child(2n){ margin-right: 0;}
	.loadContainer .list2 ul li .num .title {
        top: 4%;
        font-size: clamp(16px, 4vw, 22px);
    }

    .loadContainer .list2 ul li .num .price {
        top: 65%;
        font-size: clamp(18px, 4.5vw, 24px);
    }

    .loadContainer .list2 ul li .num .buy {
        top: 81%;
        font-size: clamp(16px, 4vw, 22px);
    }
}