@charset "utf-8";
/* CSS Document */
body,html{background: black;width: 100%;overflow-x: hidden;}
*{ margin: 0;padding: 0;box-sizing: border-box;font-family: "Noto Sans SC", sans-serif;}
button,a{cursor: pointer;}
.bg{background:url(../images/bg.jpg) center top no-repeat #000;width:100%; position:relative; height:1850px;}
.content{width:1020px; margin:0 auto; position:relative; padding-top:425px;}
.fs_index{display:block;position:absolute;width:180px;height:87px;left:45px;top:20px;text-indent: -9999px;}
.top_link{ position:absolute; left:730px; top:51px; width:270px;}
.top_link a{ display:block; height:36px; margin-right:20px; width:132px; text-align:center; background:#4826b1; line-height:36px; text-decoration:none; color:#fff;float: left;font-size: 12px;}
.wrap{width: 100%;position: relative;}
.navi-wrap{position: relative;z-index: 3;height: 127px;width: 100%;display: flex;justify-content: center;align-items: flex-end;}
.navi-wrap a{display: block;width: 278px;margin: 0 15px;text-indent: -9999px;}
.navi-btn01{height: 127px;background: url(../images/top_btn01.png) no-repeat;}
.navi-btn01:hover,.navi-btn01-active{background-position: 0 -127px;}
.navi-btn02{height: 114px;background: url(../images/top_btn02.png) no-repeat;}
.navi-btn02:hover,.navi-btn02-active{background-position: 0 -114px;}
.navi-btn03{height: 117px;background: url(../images/top_btn03.png) no-repeat;}
.navi-btn03:hover,.navi-btn03-active{background-position: 0 -117px;}
.content1-wrap{position: relative;z-index: 2;background: url(../images/content1_bg.png) no-repeat;width: 1000px;height: 1200px;margin-top: -50px;}
.event1-top{text-align: center;font-weight: bold;color: white;line-height: 100px;padding-top: 60px;font-size: 22px;}
.event-style{display: flex;width: 100%;flex-wrap: wrap;justify-content: center;}
.event-style span{display: block;line-height: 40px;padding-top: 7px; background: url(../images/awardTitle_bg.png) no-repeat;width: 216px;height: 57px;margin: 0 26px 25px;text-align: center;font-size: 16px;color: #fde89c;font-weight: bold;text-shadow:1px 1px 2px #342810,-1px -1px 2px #342810,1px -1px 2px #342810,-1px 1px 2px #342810;}
.content1-intro{width: 850px;margin: 0 auto;font-weight: bold;}
.content1-intro p{font-size: 16px;color: white;line-height: 36px;}
.content1-intro p span{color: #b074ff;}
.content1-intro h2{line-height: 72px;color: #b074ff;font-size: 22px;padding-left: 35px;}
.rule-1 h2{background: url(../images/arrow_1.png) left center no-repeat;}
.rule-2 h2{background: url(../images/arrow_2.png) left center no-repeat;}
.rule-3 h2{background: url(../images/arrow_3.png) left center no-repeat;}
.rule-3{margin-bottom: 30px;}
.apply-btn{display: block;margin: 0 auto;background: url(../images/apply_btn.png) no-repeat;width: 385px;height: 153px;border: 0;text-indent: -9999px;}
.apply-btn:hover{background-position: 0 -153px;}
.apply-result{text-align: center;display: block;text-decoration: underline;line-height: 60px;font-size: 16px;color: #00ffff;font-weight: bold;}

.content2-wrap{position: relative;z-index: 2;background: url(../images/content2_bg.png) no-repeat;width: 1000px;height: 800px;margin-top: -50px;}
.content2-wrap h2{text-align: center;color: white;line-height: 100px;padding-top: 60px;font-size: 22px;}
.content2-wrap ul{width: 850px;margin: 0 auto;font-weight: bold;}
.content2-wrap ul li{padding-left: 35px;list-style: none;font-size: 22px;color: #b074ff;line-height: 60px;}
.content2-wrap ul li span{color: #ffff00;}
.content2-style1{background: url(../images/arrow_1.png) left 20px no-repeat;}
.content2-style2{background: url(../images/arrow_2.png) left 20px no-repeat;}
.content2-style3{background: url(../images/arrow_3.png) left 20px no-repeat;}
.content2-style4{background: url(../images/arrow_4.png) left 20px no-repeat;margin-bottom: 60px;}
.content2-style5{background: url(../images/arrow_5.png) left 20px no-repeat;}
.content2-style5 p{font-size: 16px;color: white;line-height: 36px;}
.content2-style5 p strong{color: #b074ff;}

.content3-wrap{position: relative;z-index: 2;background: url(../images/content3_bg.png) no-repeat;width: 1000px;height: 1200px;margin-top: -50px;}
.content3-navi{position: relative;z-index: 3;height: 220px;width: 100%;display: flex;justify-content: center;align-items: center;}
.content3-navi a{display: block;background: url(../images/shopTitle_bg.png) no-repeat;width: 202px;height: 42px;text-align: center;font-size: 16px;color: white;font-weight: bold;line-height: 42px;margin: 0 6px;}
.content3-navi a.cur{background-position: 0 -42px;}
#point_coupon .time{text-align: center;line-height: 40px;width: 100%;font-size: 22px;color: white;font-weight: bold;margin-top: -40px;margin-bottom: 50px;}
.item-list{width: 98%;margin: 0 auto;overflow: hidden;}



.item-wrap{width: 20%;float: left;margin-bottom: 50px;}
.item-wrap div{width: 160px;border:1px solid #313752;padding-top: 40px;margin: 0 auto 20px;background: white;position: relative;}
.item-wrap.hot div::after{content: "";display: block;width: 75px;height: 25px;background: url(../images/hot.png) no-repeat;position: absolute;left: 0;top: 0;}
.item-wrap.limit div::after{content: "";display: block;width: 75px;height: 25px;background: url(../images/limit.png) no-repeat;position: absolute;left: 0;top: 0;}
.item-wrap div img{display: block;height: 50px;margin: 0 auto;}
.item-wrap div .item-point{height: 50px;background: #313752;text-align: center;line-height: 50px;font-size: 18px;color: white;font-weight: bold;}
.item-wrap div .item-name{text-align: center;line-height: 20px;color: #7d7d7d;font-size: 14px;width: 80%;margin: 0 auto;height: 65px;display: flex;justify-content: center;align-items: center;}
.no-item{text-align: center;color: white;font-size: 18px;font-weight: bold;width: 100%;}

.item-wrap button{border: 0;width: 120px;height: 36px;font-size: 16px;color: white;font-weight: bold;background: #7926e7;display: block;margin: 0 auto;}

#point_record,#coupon_record{width: 666px;margin: 0 auto;}
.record-top{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;height: 75px;border-bottom: 4px dotted #7926e7;}
.record-top p{text-align: center;width: 25%;text-align: center;line-height: 75px;font-size: 22px;color: #b074ff;font-weight: bold;}
.record-list{width: 100%;position: relative;}
.record-detail{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;height: 60px;}
.record-detail p{text-align: center;width: 25%;text-align: center;line-height: 75px;font-size:16px;color: #fff;font-weight: bold;}

/* ====== 弹出 ====== */
.modal{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.7);z-index: 999;align-items: center;justify-content: center;display: flex;}
.modal-content{padding: 80px 0;background: #330077;width: 700px;position: relative;border: 4px solid white;}
.close-btn{position: absolute;top: 30px;right: 30px;background: url(../images/close.png) no-repeat;width: 34px;height: 34px;border: 0;text-indent: -9999px;cursor: pointer;}
.distid-select-wrap,.role-select-wrap{margin: 0 auto; margin-bottom: 30px;width: 100%;display: flex;justify-content: left;flex-wrap: wrap;}
.distid-select-wrap label,.role-select-wrap label{display: block;font-weight: bold;line-height: 30px;width: 210px;text-align: right;margin-right: 15px;font-size: 16px;color: white;font-weight: bold;}
.distid-select-wrap select,.role-select-wrap select{width: 240px;height: 30px;font-size: 16px;font-weight: bold;}

.modal-btn-wrap{text-align: center;margin-top: 20px;display: flex;justify-content: center;}
.modal-btn-wrap button{margin: 0 8px;display: block;border: 0;width: 120px;height: 36px;background: #7926e7;font-size: 16px;color: white;font-weight: bold;}


.select-tips{text-align: center;font-size: 16px;color: white;font-weight: bold;line-height: 60px;}

.apply-info{width: 100%;display: flex;justify-content: left;flex-wrap: wrap;margin-bottom: 30px;}
.apply-info p{font-weight: bold;line-height: 30px;width: 310px;text-align: right;margin-right: 15px;font-size: 16px;color: white;font-weight: bold;}
.apply-info input,.apply-info select{width: 240px;height: 30px;font-size: 16px;font-weight: bold;}
.apply-info-tips{text-align: center;font-size: 16px;color: #b074ff;font-weight: bold;line-height: 60px;}

.my-info{display: flex;width: 100%;justify-content: center;margin-bottom: 30px;}
.my-info p{font-size: 16px;color: white;font-weight: bold;margin-right: 5px;}
.my-info p span{color: #b074ff;}
.back-info p{text-align: center;font-size: 16px;color: white;font-weight: bold;}
.coupon-info p{width: 96%;margin: 0 auto;text-align: center;font-size: 16px;color: white;font-weight: bold;}
.coupon-info p span{color: #b074ff;}
.wings-wrap{display: flex;width: 100%;justify-content: center;height: 90px;align-items: center;}
.wings-wrap img{display: block;margin: 0 10px;height: 80px;}

/* ====== Toast ====== */
.toast-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:10000;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;}
.toast{background:rgba(0,0,0,.85);color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:bold;text-align:center;min-width:160px;max-width:320px;box-shadow:0 4px 12px rgba(0,0,0,.4);pointer-events:auto;animation:toastIn .3s ease;}
.toast.toast-success{border:1px solid #4caf50;}
.toast.toast-error{border:1px solid #f44336;}
.toast.toast-info{border:1px solid #7926e7;}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}