/*@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC&display=swap');*/
blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
dl,ol,ul{list-style:none}
img{border:0;cursor: none;}
table{border-spacing:0;border-collapse:collapse}
input,select,textarea{font:12px "Noto Serif TC",'Microsoft YaHei',simsun,tahoma;outline:0}
a{text-decoration:none;color:#fff;outline:0}
a:hover{text-decoration:none}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
.clearfix:after{display:block;height:0;font-size:0;visibility:hidden;clear:both;content:''}
.clearfix{zoom:1}
.clear{clear:both}
.hidden{line-height:99999px;overflow:hidden}
.relative{position:relative}
.fl{float:left}
.fr{float:right}
.fz14{font-size:14px}
.mt20{margin-top:20px}
@-webkit-keyframes arrowDown{to{-webkit-transform:translateY(10%);transform:translateY(10%)}}
@keyframes arrowDown{to{-webkit-transform:translateY(10%);transform:translateY(10%)}}
*{box-sizing:border-box}
body,html{position:relative;width:100%;height:100%;overflow:hidden}
body{min-width:1200px;background:#000;color:#fff;font:16px/1.5 "Noto Serif TC", "Microsoft Yahei"}
.full-bg{position:relative;width:100%;height:100%;margin:0 auto;overflow:hidden; z-index: 1;}
.wrapper{position:relative;width:1440px;height:100%; margin:0 auto;z-index:10; display: flex; align-items: center; justify-content: center; flex-direction:column; }
.contain{position:absolute;width:100%;height:100%;left:50%;top:0;margin-left:-50%;}
section{position:absolute;left:50%;top:0;margin-left:-50%;width:100%;max-width:1920px; height:100%}
.index-swiper{position:relative;z-index:2;width:100%;height:100%;overflow:hidden}
.index-swiper > .swiper-wrapper > .swiper-slide {position:relative;width:100%;height:100%; }
.page.p1 {background:url(../images/bg1.jpg) no-repeat center top; background-size:cover }
.page.p3 {background:url(../images/bg2.jpg) no-repeat center center; }
.page.p4 {background:url(../images/bg3.jpg) no-repeat center center; }
.page.p2 {background:url(../images/bg4.jpg) no-repeat center center; }
.page.p5 {background:url(../images/bg5.jpg) no-repeat center center; background-size:cover}
.tit3 { width: 100%; height: 134px; background: url(../images/en/tit-01.png) no-repeat center center; flex-shrink:0; }
.tit4 { width: 100%; height: 134px; background: url(../images/en/tit-02.png) no-repeat center center; flex-shrink:0; }
.tit2 { width: 100%; height: 134px; background: url(../images/en/tit-03.png) no-repeat center center; flex-shrink:0; }
.tit5 { width: 100%; height: 134px; background: url(../images/en/tit-04.png) no-repeat center center; flex-shrink:0; }

.lang { display:flex; align-items:center; justify-content:center; margin-left:10px;  border:1px solid #a162cb; border-radius:5px; display:flex; align-items:center; justify-content:center; }
.lang a { width:36%; background:none; height:30px; line-height:30px; background:#143c76; text-align:center; }
.lang a.on, .page-nav .lang a:hover {background:#2979d6; }
.lang select { color:#fff; background:#791c83; height:30px; line-height:30px; font-size:14px; }
.lang:before { display: block; content: ""; width: 22px; height: 30px; background: url(https://www.eudemons.com/en/images/lang/1.png) no-repeat center center #90289c; padding:0 4px; }

.side-nav { width: 0; height: 100%; position:absolute; right:0; top:0; z-index:4; box-sizing:content-box; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.side-nav.show { width: 209px}
.side-nav a { position: relative; z-index: 2; display:block; width:209px;height:69px; line-height: 22px; padding:0 10px 5px 55px;font-size:18px; text-align:center; font-weight:bold; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
.side-nav a span { background-image:-webkit-linear-gradient(90deg,#ece4f1 30%,#c6ace1 70%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-filter:drop-shadow(0 2px 3px #4e0b75) }
.side-nav a.on, .side-nav a:hover, .side-nav a.open-nav { background:url(../images/nav-a-on.png) no-repeat center right;color:#fcfce6 }
.side-nav a.open-nav:hover { filter:brightness(1.2); }
.side-nav a.on span, .side-nav a:hover span { background-image:-webkit-linear-gradient(90deg,#ebd09a 30%,#fcfce6 70%);-webkit-filter:drop-shadow(0 0 8px rgba(146,76,243,.2)) }
.nav { height: 100%; transition:all 0.5s ease-in-out; transform:translateX(209px); display:flex; align-items:center; justify-content:center; flex-direction:column; }
.nav:before { z-index: 1; content:'';position:absolute; top:0;right:0;width:100%;height:100%;background:rgba(25,9,40,.8); -webkit-mask-image: -webkit-linear-gradient(right, #87e0fd 0, #000 60%, rgba(5, 171, 224, 0)); }
.side-nav.show .nav { transform:translateX(0px); }
.side-nav a.open-nav { position: absolute; right: 0; top: 125px; transform:translateX(0px);transition:all 0.5s ease-in-out; }
.side-nav.show .open-nav { transform:translateX(209px); }


.logo { position: absolute; left: 0; top: 20px; display:block; text-align:center; width:240px; }
.logo img { width:100%; display:block; }
.login-content { position:absolute; right:0; top:50px; display:flex; align-items:center; justify-content:flex-end; }
.before-login, .after-login { display:none; align-items:flex-start; justify-content:flex-end; }
.after-login.show, .before-login.show { display:flex; }

.user-info { position: relative; line-height: 55px; padding: 0 5px; font-size:16px; color:#fff1d3; margin-right:5px; color:#fff;background-image:-webkit-linear-gradient(90deg,#fcc7ff 30%,#ffffe3 70%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-filter:drop-shadow(0 2px 3px #4e0b75) }
/*.user-info:before { position: absolute; display: block; content:""; width:17px; height:35px; left:-17px; top:0; background:url(../images/btn4-1.png) no-repeat 0 0; }
.user-info:after { position: absolute; display: block; content:""; width:11px; height:35px; right:-11px; top:0; background:url(../images/btn4-3.png) no-repeat 0 0; }*/

.login-btn { display: block; width: 171px; height: 55px; line-height: 55px; background:url(../images/btn-login.png) no-repeat center center; color:#fff1d3; text-align:center; font-size:16px; }
.top-btn { display:block; width:143px; height:32px; line-height:32px; background:url(../images/btn2.png) no-repeat center center; color:#15456e; text-align:center; margin:0 10px; flex-shrink:0; font-weight:bold; }

.login-btn:hover, .btn1:hover, .top-btn:hover { filter:brightness(1.2); }
.text-btn { color:#fff; text-decoration:underline; }
.text-btn:hover { color:yellow; text-decoration:underline; }
.btn1 { display:block; width:460px; height:139px; line-height:150px; background:url(../images/btn1.png) no-repeat center center; text-align:center; color:#fff; text-shadow:1px 1px 4px #73befe, 1px 1px 4px #73befe, 1px 1px 4px #73befe; font-size:20px; margin:0 20px; }
.p1 .wrapper { justify-content:flex-end; height:100%; width:90%; }
.slogan { /*position: absolute; left: 0; bottom: 150px;*/ width:80%; margin:0 auto;  }
.slogan img { display:block; width:100%; }
.sub-slogan { width:100%; height:56px; line-height:56px; color:#f3e9cb; font-size:28px; text-align:center; margin: 0 auto; font-style:italic; }
.sub-slogan b { color:#ffe28d; font-weight:bold; font-size:40px; }
.rwd-list { display:flex; align-items:center; justify-content:center; background:rgba(36, 148, 213, 0.6); border-radius:6px; padding:20px; }
.rwd-list li { margin: 0 10px; }
.rwd-pic { width:103px; height:101px; background:url(../images/rwdbg.png) no-repeat center center; display:flex; align-items:center; justify-content:center; }
.rwd-pic img { display:block; width:80%; }
.rwd-name { width:103px; text-align:center; line-height:1.2; font-weight:bold; color: #fff; text-shadow:1px 1px 0 #285282, 1px -1px 0 #285282, -1px 1px 0 #285282, -1px -1px 0 #285282, 2px 2px 0 #285282, 2px -2px 0 #285282, -2px 2px 0 #285282, -2px -2px 0 #285282; margin-top:5px; }
.reserve-btn a { display:block; width:362px; height:145px; background:url(../images/btn-index-order.png) center center; line-height:145px; font-weight:bold; font-size: 28px; color: #fff; text-align:center; -webkit-animation:aniBtnOrder .6s infinite linear alternate;animation:aniBtnOrder .6s infinite linear alternate }
.reserve-btn a:hover, .claim-btn a:hover { filter:brightness(1.2); }
.claim-btn { padding-bottom:40px; }
.claim-btn a { display:block; width:471px; height:154px; line-height: 163px; color: #fff7cb; font-size: 36px; font-weight: bold; text-shadow: 0 0 4px #390553, 0 0 4px #390553, 0 0 4px #390553; background:url(../images/claimbtn.png) no-repeat center center; margin:0 auto; text-align:center; }

.scroll-icon { width:100%; height:52px; line-height:10px; background:url(../images/scroll.png) no-repeat center center; text-align:center; color:#cfc4ef; font-size:18px; animation: floatAnimation 1s ease-in-out infinite; margin-top:10px; }

/*p2*/
.wrapper h2 { font-size:0; position:relative; z-index:2; }
.p2 .content { position: relative; width:1414px; height:749px; background:url(../images/wx-cont.png) no-repeat center center; box-sizing:border-box; padding:120px 160px; color:#fff; z-index:1; }
.quest-title { color:#785726; display: flex; align-items: center; justify-content: flex-start; line-height:2; }
.quest-title span { position:relative;  font-size:26px; font-weight:bold; padding:0 46px; }
.quest-title span:before, .quest-title span:after { content:""; width:40px; height:20px; position:absolute; top:50%; margin-top:-10px; background:url(../images/arrow1.png) no-repeat 0 0; }
.quest-title span:before { left:0; transform:scaleX(-1); }
.quest-title span:after { right:0; }
.quest-list { display:flex; align-items:center; justify-content:space-between; margin:10px auto; }
.quest-list li { width:480px; height:75px; line-height:75px; background:url(../images/quest-bg.png) no-repeat center center; display:flex; align-items:center; justify-content:flex-start; box-sizing:border-box; padding:0 20px 4px 20px; font-size:24px; font-weight:bold; }
.quest-icon { width:51px; height:50px; margin-right:10px; flex-shrink:0; }
.icon1 { background:url(../images/quest-icon1.png) no-repeat center center; }
.icon2 { background:url(../images/quest-icon2.png) no-repeat center center; }
.icon3 { width: 101px; height: 98px; background:url(../images/quest-icon3.png) no-repeat center center; }
.icon4 { width: 101px; height: 98px; background:url(../images/quest-icon4.png) no-repeat center center; }
.quest-name { width:170px; margin-right:10px; flex-shrink:0; color:#000; font-size:17px; line-height:1; }
.quest-progress { margin-right: 10px; width: 50px; text-align: center; color:#000; }
.quest-btn { width:165px; height:53px; background:url(../images/btn6.png) no-repeat 0 0; color:#442e07; line-height:53px; flex-shrink:0; text-align:center; font-size:18px }
.quest-btn.inactive { filter:grayscale(1); color:#383838; cursor:default; }
.share-btn { width:163px; height:51px; background:url(../images/btn7.png) no-repeat 0 0; color:#fff; line-height:49px; flex-shrink:0; text-align:center; font-size:18px; }

.quest-content { display:flex; align-items:center; justify-content:space-between; }
.avatars { position:relative; height:340px; width:600px; }
.avatars > p { position:absolute; text-align:center }
.avatar1 { z-index: 1; left: -80px; bottom: 0; width:439px; padding-top: 282px; background:url(../images/user1.png) no-repeat 0 0; }
.avatar2 { z-index:3; right: -20px; top: 0; width:337px; height:199px; background:url(../images/user2.png) no-repeat 0 0; }
.avatar3 { z-index:2; right: 130px; top: 0; width: 255px; height: 261px; background:url(../images/user3.png) no-repeat 0 0; }
.avatar2.dark, .avatar3.dark { filter:grayscale(1); }

.quest-list.ql2 { display:block; width:446px; }
.quest-list.ql2 li { width: 461px; height: 107px; background: url(../images/quest-bg2.png) no-repeat 0 0; padding:0; margin:20px 0; }
.quest-info { line-height:40px; margin-left:10px; }
.ql2 .quest-name { width:150px; }
.ql2 .quest-progress { color:#9f5512 }
.btn-invite { position: absolute; display:block; width:34px; height:33px; background:url(../images/btn-add.png) no-repeat 0 0; z-index:4; }
.b1 { right:128px; top:169px; }
.b2 { right:255px; top:136px; }
.btn-invite:hover { filter:brightness(1.2); }

.team-now-btn, .reserve-now-btn { position: absolute; left: 50%; margin-left: -210px; bottom: 20px; width: 420px; height:107px; background:url(../images/btn5.png) no-repeat center center; display:flex; align-items:center; justify-content:center; line-height:107px; font-size:28px; color:#663912; font-weight:bold; box-sizing:border-box; }
.team-now-btn:hover, .reserve-now-btn:hover { filter:brightness(1.2); }

/*p3*/
.p3 .content { position: relative; width:1250px; color:#0c4282; text-align:center; background:none; padding:0; height:auto; }
.p3 .quest-title { margin-bottom:20px; }
.milestone-list { display:flex; align-items:flex-start; justify-content:center; padding-bottom:20px; }
.milestone-list li { width:268px;height:672px;margin:0 5px;padding:126px 0 0; background:url(../images/order-li.png) center center; text-align:center; box-sizing:border-box; flex-shrink:0 }
.milestone-list li.on { background-image: url(../images/order-li-on.png) }
.milestone-list li:nth-child(even) { margin-top:40px; }
.num-title { color:#f3d686; font-size:45px; font-weight:bold; }
.item-pic { margin:90px auto 60px; }
.item-name { width:80%; margin:0 auto; line-height:1.2; font-size:15px; color:#fff; }
.milestone-list li h4{margin-bottom:17px;font-size:48px;position:relative;z-index:1;color:#a193b1; -webkit-filter:drop-shadow(0 0 8px rgba(146,74,243,.3))}
.milestone-list li.on h4 { color:#ccc3d7; background-image: -webkit-linear-gradient(90deg, #d7aa64 0, #ffe186 60%, #ffec80 56%, #f6f0b2 37%, #fbfee1 0); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
.milestone-list li > a { display: block; width:160px;height:47px; line-height: 40px; padding-bottom:5px; margin: 0 auto; font-size:16px; background: url(../images/btn-get-on.png) no-repeat; center center;}
.milestone-list li > a.no { background-image: url(../images/btn-get.png)}
.milestone-list li > a.get:hover,.milestone-list li>a.no:hover{-webkit-filter:brightness(1);filter:brightness(1)}
.milestone-list li:nth-of-type(3),.milestone-list li:nth-of-type(5){height:675px}
.milestone-list li:nth-of-type(2),.milestone-list li:nth-of-type(4){margin-top:49px}
.milestone-list li.on .order-item-pic,.milestone-list li.on .order-rew{opacity:1}

.order-item{position:relative;z-index:2;margin:10px auto;opacity: 0.8}
.sp .order-item { margin:60px auto; }
.milestone-list li.on .order-item { opacity:1 }
.order-item .order-rew{position:relative;width:100%;height:100%;background:url(../images/order-item.png) no-repeat center center}
.order-item .order-rew > p {position:relative;z-index:2;background:url(../images/tit-order-rew.png) no-repeat center center;color:#fefefe;line-height:1.2;text-shadow:0 0 6px rgba(165,75,216,.6),0 1px 0 #7f67b5,0 -1px 0 #7f67b5,-1px 0 0 #7f67b5,1px 0 0 #7f67b5; height: 51px; font-size: 18px; width:100%; margin:0 auto; position:absolute; bottom:-5px; left:0; padding:0 50px; box-sizing:border-box; }
.order-item img {top:-5px}
.order-item:hover {z-index:3}
.order-item:hover .pop-tips{opacity:1!important}
.order-item-pic { width: 181px; margin: -29px auto 0; }
.order-item-pic img{display:block;width:100%}
.order-progress{ border-radius:6px; width:1325px;height:11px;border-radius:6px position:relative;margin:0 auto;background:rgba(65,33,103,.5);border:1px solid #804eae}
.order-progress span{border-radius:6px; display:block;position:relative;background-color:#c074ce;background-image:-webkit-linear-gradient(0deg,#804eae 30%,#c074ce 70%);height:100%;max-width:100%}
.order-progress span::after{content:'';position:absolute;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);background:url(../images/i-flag.png) no-repeat center center;right:-20px;width:43px;height:43px}
.pop-tips-02 { width:265px; height:163px; background: url(../images/pop-tips-02.png) no-repeat; display:flex; align-items:center; justify-content:center; bottom:100px; margin-left:-132px; }
.pop-tips { position:absolute; left:50%; padding:0 12px 20px; color:#cec0de; font-size: 16px; opacity: 0; line-height: 1.2}

.event-hint { width: 90%; margin: 0 auto; margin-top:10px; color: #fff; font-size:20px; padding-top: 20px; }

/*p4*/
.p4 .wrapper { overflow:visible; }
.p4 .content{position:relative;width:1450px; text-align:center;background:0 0;padding:0;height:auto}
.prediction-lists{display:flex;justify-content:center;position:relative;margin:60px 0 0}
.prediction-lists.done{margin-top:-33px}
.prediction-lists::before{content:'';position:absolute;top:-279px;left:-149px;width:615px;height:710px;background:url(../images/light.png) no-repeat;opacity:0;pointer-events:none;transition:all .5s}
.prediction-lists.show::before{opacity:1}
.prediction-lists.s1::before{transform:translate(350px,0)}
.prediction-lists.s2::before{transform:translate(680px,0)}
.prediction-lists.s3::before{transform:translate(1020px,0)}
.prediction-lists li{position:relative;transform:skewY(5deg);width:293px;height:587px;margin:0 22px;text-align:center}
.prediction-lists li:nth-of-type(1),.prediction-lists li:nth-of-type(4){margin-top:-55px}
.prediction-lists li:nth-of-type(2){margin-top:69px}
.prediction-lists li:nth-of-type(3){margin-top:49px}
.prediction-lists li>div{position:absolute;top:0;left:0;width:100%;height:100%;background:center/cover no-repeat}
.prediction-lists li>div{background-image:url(../images/prediction-li.png)}
.prediction-lists li.open>div{background-image:url(../images/prediction-li-on.png)}
.prediction-lists li strong{display:block;font-size:62px;line-height:1.1;text-align:center;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px rgba(106, 100, 184, .1)) drop-shadow(0 0 1px #6a5dc7);color:#beb6da;background-image:linear-gradient(90deg,#beb6da 30%,#827cc6 70%)}
.prediction-lists li.open strong{color:#e3e1f4;background-image:linear-gradient(90deg,#e3e1f4 30%,#827cc6 70%)}
.prediction-lists li.light strong{color:#e6e5cd;background-image:linear-gradient(90deg,#e6e5cd 30%,#e3e2a6 70%);margin-bottom:20px}
.prediction-lists li h5{font-size:30px; font-weight:bold; line-height:1.2 }
.prediction-lists li:nth-child(4) h5 { font-size:26px; }
.prediction-lists li h6{font-size:24px}
.pre-b{color:#c3bce1;text-align:left;text-shadow:0 0 6px rgba(106,100,184,.5)}
.tit-nor{color:#f9e38a;background-image:-webkit-linear-gradient(90deg,#fefed8 30%,#f9e38a 70%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-filter:drop-shadow(0 0 9px rgba(255, 147, 42, .16)) drop-shadow(0 2px 3px rgba(51, 42, 106, .3))}
.pre-a{opacity:0;z-index:0;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.pre-a.show{opacity:1;z-index:2;-webkit-transform:rotateX(0);transform:rotateX(0);-webkit-transition:all .3s;transition:all .3s}
.pre-a>div{height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
.pre-a h6,.pre-a p{color:#eae9ff;text-shadow:0 2px 2px #332a6a;font-size:16px; padding: 0 20px; box-sizing: border-box;}
.pre-a a{display:block;width:223px;height:46px;font-size:19px;line-height:46px;background:url(../images/btn-detail.png) center/cover no-repeat;color:#7c5436;margin:0 auto}
.p4 .wrapper h3{background:url(../images/tit-04.png) center/contain no-repeat}
.p4 .wrapper>h4{color:#e1ceff;text-align:center}
.update-hint { font-size:120%; padding-top:20px; color:#fff; }

/*p5*/
.p5 .content{position:relative;width:1400px;color:#0c4282;text-align:center;background:0 0;padding:0;height:auto}
.p5 .wrapper h3{background:url(../images/tit-05.png) center/contain no-repeat; height:134px; margin-top:-3px}
.gift-mod{ width: 1056px; text-align:center}
.gift-lists{display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; position:relative; background:url(../images/gift-ul.png) center/cover no-repeat; width:1056px; height:518px; margin:-28px 0 0 -9px; padding-left:86px; font-size:27px; line-height:36px}
.gift-lists li{position:relative; color:#fffbf1; width:294px; height:453px}
.gift-lists li h4{ width: 200px; text-shadow:0 2px 3px #46426e; padding-top:31px; text-align: center;}
.gift-lists li img{display:block; margin:0 auto}
.gift-lists li>span{position:absolute; padding:0 5px 5px 0; background:url(../images/gift-num.png) center/cover no-repeat; color:#9e5f14; top:145px; right:42px; width:53px; height:53px; font-size:21px; line-height: 46px;}
.gift-lists li:nth-of-type(1){padding:157px 0 0}
.gift-lists li:nth-of-type(1) h4{-webkit-transform:rotate(-17deg); transform:rotate(-17deg); margin-left:90px}
.gift-lists li:nth-of-type(2){padding:108px 0 0; margin-left:-11px}
.gift-lists li:nth-of-type(2) h4{padding-top:35px; margin-left: 50px;}
.gift-lists li:nth-of-type(3){padding:141px 0 0}
.gift-lists li:nth-of-type(3) h4{-webkit-transform:rotate(21deg); transform:rotate(21deg); margin-left:10px; }
.gift-lists li:hover .pop-tips{opacity:1}
.gift-lists li .pop-tips{bottom:260px}
.price{color:#9d99b0; font-style:italic; margin:-61px 0 3px; font-size:23px}
.price p{ background-image:-webkit-linear-gradient(90deg,#fef9e3 30%,#f2d88e 70%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight: bold;}
.price p span{font-size:43px}
.price>span{text-decoration:line-through; }
.btn-buy{display:block; margin:0 auto; background:url(../images/btn-buy.png) center/cover no-repeat; color:#7c5436; width:371px; height:81px; font-size:34px; line-height:61px; font-weight: bold;}
.gift-tips{color:#edecf6; width:906px; height:123px; margin:13px 0 0 63px; padding:8px 40px 0; background:url(../images/gift-tips.png) no-repeat; font-size:22px; line-height:31px}
.p5{background:url(../images/p5.jpg) center no-repeat}

/*common*/
.popbox { display: none; z-index: 999; width: 100%; height: 100%; position: fixed; left: 0; top: 0; align-items: center; }
#commonbox.popbox { z-index:1000; }
.popbox.show { display: flex; }
.mask{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; filter: alpha(opacity=40); z-index: 1112;}
.msgbox { width: 564px; height: 479px; background: url(../images/box2.png) no-repeat 0 0; position: relative; margin: 0 auto; z-index: 1113; color:#fff }
.msgbox.box1 { width:813px; height:537px; background: url(../images/box1.png) no-repeat 0 0; }
.msgbox.pop-invite3 { background:none; width:auto; height:auto; }

a.close { z-index: 22; position: absolute; right:-6px; top:-20px; width: 44px; height: 44px; background: url(../images/close.png) no-repeat 0 0; text-align: center; color: #fff; font-size: 0; }
a.close:hover { filter:brightness(1.2); }
.msg .msgcont { position: relative; width: 100%; box-sizing:border-box; padding: 60px 90px;  }
#commonbox .msg .msgcont { height:310px; display:flex; align-items:center; justify-content:center; padding: 120px 90px 30px 90px;  }
.box1 .msg .msgcont { padding: 50px 70px; }
#rule-box h2 { margin-bottom:20px; }
.rule-content { position: relative; font-size:16px; height:300px; overflow-y:auto; padding:0 15px; }
.rule-content p { padding:5px 0; }
.rule-content table { width:100%; margin:5px auto; }
.rule-content td, .rule-content th { border:1px solid #4668a7; text-align:center; }

.msgcont h2 { text-align:center; font-size:140%; font-weight:bold; color:#ffe091; }

.login-form { margin:20px auto 0; }
.login-form li { display:flex; align-items:center; justify-content:flex-start; padding: 10px 0; }
.login-form label { width:30%; text-align:right; }
.login-form li select, .login-form li input { height:36px; line-height:36px; border:none; width:56%; padding: 0 1%; flex-shrink:0; font-size:18px; }
.box-btns { display:flex; align-items:center; justify-content:center; }
.btn3 { display: block; width:190px; height:68px; line-height:68px; background:url(../images/btn10.png) no-repeat center center; font-weight:bold; text-align:center; }
.btn3:hover { background-image:url(../images/btn10-hover.png); color:purple }
.prize-content { margin-top:20px; }
.prize-content table { width:100%; text-align:center; }
.prize-content th { background:#641a76; color:#fff; line-height:2.4 }
.prize-content td { border:1px solid transparent; border-bottom-color:#ccc; line-height:2.4; }
.prize-content td:nth-child(2), .prize-content th:nth-child(2) { width:400px; }
.prize-content th p, .prize-content td p { width:400px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 10px; margin:0 auto; box-sizing:border-box; }
.scroll-prize { height:240px; overflow:auto; }

.share-code { width:232px; height:46px; line-height:46px; text-align:center; color:#fff; }
.copy-code { display: block; text-align: center; width:90px; height:42px; line-height:42px; }
.copy-code:hover, .share-code:hover { filter:brightness(1.2); }

 
.swiper-pagination-bullet { height:auto; display:block; background:none; color:; opacity:1; width: auto; }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin:0;}
.swiper-pagination-bullet-active { background:none; opacity:1; width: auto; }

.min-msg { min-height:180px; display:flex; align-items:center; justify-content:center; }
.login-form li input.vcode { width:30%;  }
.login-form li.v-code img { width:25%; vertical-align:middle; margin-left:1% }


.invite-type { display:flex; align-items:center; justify-content:center; margin-top:50px; }
.invite-type li { width:45%; padding: 0 2%; display:flex; align-items:center; justify-content:center; flex-direction:column; height:280px; box-sizing:content-box; }
.invite-type li:nth-child(1) { border-right:1px solid #5378a5 }
.invite-type h3 { font-size:24px; font-weight:bold; color:#fff; width:100%; text-align:center; }

.code-ipt { width:80%; padding: 0 15px; display:block; margin: 20px auto; background:#edece5; color:#344e73; border:none; height:50px; line-height:50px; font-size:20px; border:2px solid #5378a5; border-radius:50px; }
.btn4 { display: block; width:300px; height:98px; line-height:98px; background:url(../images/btn11.png) no-repeat center center; font-weight:bold; text-align:center; }
.btn4:hover { background-image:url(../images/btn11-hover.png); }
.code-form { display:flex; align-items:center; justify-content:center; margin-top:30px; }
.copy-code { display:block; width:78px; height:43px; background:url(../images/btn9.png) no-repeat center center; color:purple; font-size:14px; }
.code-form .code-ipt { width:60%; margin:0; height:40px; line-height:40px; margin-right:10px; }


/*card box*/
.pop-invite {width:1728px;height:1121px;background:url(../images/card2.png) no-repeat center center}
/*.pop-invite2 { background-image:url(../images/card.png) }*/
.pop-invite a.close {right:90px;top:205px;width:84px;height:84px;background:url(../images/invite-close.png) no-repeat center center}
.pop-invite .msgcont{position:absolute;top:186px;left:200px;width:1030px;height:790px}
.contact-invite{ padding:0 0 50px 30px}
.pop-invite2 .contact-invite{ padding:30px 0 30px 30px}
.contact-invite label{ margin-right:10px; white-space:nowrap; }

.contact-invite li{text-align:left;margin-bottom:15px; color:#88edff; font-size:32px; font-weight:bold; padding:10px 0; }
.pop-invite2 .contact-invite li  { margin-bottom:10px }


.pop-invite2 .contact-invite li{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
.pop-invite2 .info{height:185px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:0 0 0 48px}
.pop-invite2 .info p{margin-left:25px}
.pop-invite2 .info .img-box{position:relative;width:175px;height:175px}
.pop-invite2 .info img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:180px}


.contact-invite .btn-change{top:-22px;left:500px;position:absolute;content:'';width:99px;height:96px;background:url(https://img5.99.com/my/activity/2024/01/qssq/img/icon-sz.png) no-repeat}
.contact-invite .li-ch>div{position:relative;margin:-5px 0 0 70px}
.contact-invite .li-ch>div span{display:inline-block;margin:0;width:246px}
.contact-invite select{appearance:none;-moz-appearance:none;-webkit-appearance:none;background:url(https://img5.99.com/my/activity/2024/01/qssq/img/icon-select.png) no-repeat scroll 192px center transparent;background-size:47px 35px;padding-right:40px}
.contact-invite select:-ms-expand{display:none}
.contact-invite input::-webkit-input-placeholder{color:purple}
.contact-invite input::-moz-placeholder{color:purple}
.contact-invite input::-moz-placeholder{color:purple}
.contact-invite input::-ms-input-placeholder{color:purple}

.btn-accept{position:absolute;bottom:-20px;left:360px;width:389px;height:140px;background:url(../images/invite-btn.png) no-repeat center center; line-height: 141px; text-align:center; color:#102f7f; font-size:32px; font-weight:bold; transform:rotate(-4deg); }
/*.btn-share{background:url(https://img5.99.com/my/activity/2024/01/qssq/img/btn-share2.png) no-repeat}*/




/*my card*/
.contact-invite span{position:relative;z-index:1;display:block;margin:-5px 0 0 70px;width:516px;height:55px;overflow:hidden;line-height:55px;border-radius:55px;background:#fffdf4;border:1px solid #efdcb8;  margin-top: 10px;}
.contact-invite input,.contact-invite select,.contact-invite textarea{width:100%;height:55px;padding:0 10px;color:purple;font-size:24px;line-height:55px;border-radius:55px}
.contact-invite input{padding:0 40px;}
.contact-invite select{text-align:center}
.contact-invite option{font-size:12px}

.pro-list{position:relative;left:0;top:0;width:690px;height:178px}
.pro-list .swiper-container{width:660px;padding:20px 10px;margin:12px 10px;-webkit-transform:rotate(2deg);transform:rotate(2deg)}
.pro-list .swiper-container a{ display: block; position:relative;width:139px;height:139px; margin: 0 auto;}
.pro-list .swiper-container a span{will-change:transform;position:absolute;z-index:2;top:-16px;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);font-size:22px;color:#4c3303;background:#fff;word-break:keep-all;padding:1px 6px;display:none}
.pro-list .swiper-container a:hover span{display:block}
.pro-list .swiper-container a:after { pointer-events:none;content:'';position:absolute;top:-54px;left:-50px;width:229px;height:237px; background: url(../images/male/avatar/warrior.png) no-repeat center center; }

.pro-list .swiper-container a[data-name="warrior"].male:after { background-image: url(../images/male/avatar/warrior.png) }
.pro-list .swiper-container a[data-name="warrior"].male.on:after { background-image: url(../images/male/avatar/warrior-hover.png) }

.pro-list .swiper-container a[data-name="mage"].male:after { background-image: url(../images/male/avatar/mage.png) }
.pro-list .swiper-container a[data-name="mage"].male.on:after { background-image: url(../images/male/avatar/mage-hover.png) }

.pro-list .swiper-container a[data-name="vampire"].male:after { background-image: url(../images/male/avatar/vampire.png) }
.pro-list .swiper-container a[data-name="vampire"].male.on:after { background-image: url(../images/male/avatar/vampire-hover.png) }

.pro-list .swiper-container a[data-name="shadowknight"].male:after { background-image: url(../images/male/avatar/shadowknight.png) }
.pro-list .swiper-container a[data-name="shadowknight"].male.on:after { background-image: url(../images/male/avatar/shadowknight-hover.png) }

.pro-list .swiper-container a[data-name="swordman"].male:after { background-image: url(../images/male/avatar/swordman.png) }
.pro-list .swiper-container a[data-name="swordman"].male.on:after { background-image: url(../images/male/avatar/swordman-hover.png) }

.pro-list .swiper-container a[data-name="necromancer"].male:after { background-image: url(../images/male/avatar/necromancer.png) }
.pro-list .swiper-container a[data-name="necromancer"].male.on:after { background-image: url(../images/male/avatar/necromancer-hover.png) }

.pro-list .swiper-container a[data-name="paladin"].male:after { background-image: url(../images/male/avatar/paladin.png) }
.pro-list .swiper-container a[data-name="paladin"].male.on:after { background-image: url(../images/male/avatar/paladin-hover.png) }

.pro-list .swiper-container a[data-name="ranger"].male:after { background-image: url(../images/male/avatar/ranger.png) }
.pro-list .swiper-container a[data-name="ranger"].male.on:after { background-image: url(../images/male/avatar/ranger-hover.png) }


.pro-list .swiper-container a[data-name="warrior"].female:after { background-image: url(../images/female/avatar/warrior.png) }
.pro-list .swiper-container a[data-name="warrior"].female.on:after { background-image: url(../images/female/avatar/warrior-hover.png) }

.pro-list .swiper-container a[data-name="mage"].female:after { background-image: url(../images/female/avatar/mage.png) }
.pro-list .swiper-container a[data-name="mage"].female.on:after { background-image: url(../images/female/avatar/mage-hover.png) }

.pro-list .swiper-container a[data-name="vampire"].female:after { background-image: url(../images/female/avatar/vampire.png) }
.pro-list .swiper-container a[data-name="vampire"].female.on:after { background-image: url(../images/female/avatar/vampire-hover.png) }

.pro-list .swiper-container a[data-name="shadowknight"].female:after { background-image: url(../images/female/avatar/shadowknight.png) }
.pro-list .swiper-container a[data-name="shadowknight"].female.on:after { background-image: url(../images/female/avatar/shadowknight-hover.png) }

.pro-list .swiper-container a[data-name="swordman"].female:after { background-image: url(../images/female/avatar/swordman.png) }
.pro-list .swiper-container a[data-name="swordman"].female.on:after { background-image: url(../images/female/avatar/swordman-hover.png) }

.pro-list .swiper-container a[data-name="necromancer"].female:after { background-image: url(../images/female/avatar/necromancer.png) }
.pro-list .swiper-container a[data-name="necromancer"].female.on:after { background-image: url(../images/female/avatar/necromancer-hover.png) }

.pro-list .swiper-container a[data-name="paladin"].female:after { background-image: url(../images/female/avatar/paladin.png) }
.pro-list .swiper-container a[data-name="paladin"].female.on:after { background-image: url(../images/female/avatar/paladin-hover.png) }

.pro-list .swiper-container a[data-name="ranger"].female:after { background-image: url(../images/female/avatar/ranger.png) }
.pro-list .swiper-container a[data-name="ranger"].female.on:after { background-image: url(../images/female/avatar/ranger-hover.png) }

.pro-list .tit{position:absolute;top:-60px;left:-40px;width:186px;height:61px;background:url(../images/invite-title.png) no-repeat 0 0; text-align:center; color:#fff; font-size:26px; line-height:60px; }
.pro-list .btn-next,.pro-list .btn-prev{position:absolute;width:84px;height:85px;z-index:2}
.pro-list .btn-prev{top:43px;left:-15px;background:url(https://img5.99.com/my/activity/2024/01/qssq/img/btn-prev.png) center/contain no-repeat}
.pro-list .btn-next{top:70px;right:-15px;background:url(https://img5.99.com/my/activity/2024/01/qssq/img/btn-next.png) center/contain no-repeat}
.tab-gender{position:absolute;top:233px;left:-5px;width:106px; z-index: 2;}
.tab-gender a{ display: block; width:106px;height:106px;position:relative}
.tab-gender .boy { background:url(../images/invite-male.png) no-repeat center center ; }
.tab-gender .boy.on, .tab-gender .boy:hover { background-image:url(../images/invite-male-hover.png); }
.tab-gender .girl { background:url(../images/invite-female.png) no-repeat center center ; }
.tab-gender .girl.on, .tab-gender .girl:hover { background-image:url(../images/invite-female-hover.png); }

.footer{max-height:0;width:100%;position:fixed;left:0;bottom:0;z-index:1000;background:#000;transition:all .3s linear;color:#fff;text-align:center;font-size:14px}
.footer .wrapper{height:auto;padding:0}
#footerBtn{position:absolute;right:10px;top:-40px;width:220px;height:40px;line-height:40px;text-align:center;background:#000;border-top-left-radius:20px;border-top-right-radius:20px;color:#fff;font-size:14px;text-decoration:none;border-bottom:none;display: flex; align-items: center; justify-content: center;}
#footerBtn i { display: block; width:0; height:0; border:5px solid transparent; border-top-color:#fff; margin-left:5px; margin-top:6px; }
.footer.footer-show{height:auto;max-height:200px;padding:20px 0}
.footer.footer-show #footerBtn i { border-top-color:transparent; border-bottom-color:#fff; margin-top:-6px; }

.footer .social a { display: inline-block; *display: inline; *zoom: 1; width: 48px; height: 48px; background: url(https://www.eudemons.com/en/images/pic.png) no-repeat 0 0; text-indent: -999em; vertical-align: middle; margin: 0 5px; }
.footer .social a.fb { background-position: -291px -326px; }
.footer .social a.yt { background-position: -359px -326px; }
.footer .copyright { padding-top: 5px; }
.footer .copyright a { color: #fff; text-indent: 0; background: none; width: auto; height: auto; margin: 0 5px; vertical-align: middle; }
.footer .copyright a:hover { text-decoration: underline; }

/*202501new version*/
.card-slogan1 { position: relative; padding:60px 0 0 0; text-align:center; color: #e1aded; font-size:48px; font-weight:bold; text-align:left; display:flex; align-items:center; justify-content:flex-start; line-height:1.2; }
.card-slogan1:after,  .card-slogan1:before{ content:""; display:block; width:55px; height:24px; background:url(../images/arrow2.png) no-repeat center center; margin-left:10px; }
.card-slogan1:before { margin-left:0; margin-right:10px; transform:rotate(180deg); }
.card-slogan2 { padding: 0 90px 34px 0 ; text-align:center; color: #e1aded; font-size:32px; font-weight:bold; width:680px;  }

/*news pop*/
.pop-box{display:none;position:fixed;left:0;top:0;z-index:999;width:100%;height:100%;background:rgba(0,0,0,.7)}
.pop-box.show{display:block}
.pop{position:fixed;left:50%;top:50%;z-index:13;background:url(../images/pop-bg.png) no-repeat;width:620px;height:406px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;-webkit-animation:aniPop .5s;animation:aniPop .5s}
.pop-t{position:relative;z-index:5;min-height:50px}
.pop-m{position:relative}
.pop-close{position:absolute;right:-33px;top:-10px;z-index:20;width:28px;height:26px;background:url(../images/pop-close.png) no-repeat;line-height:500px;overflow:hidden;-webkit-transition:all .5s;transition:all .5s}
.pop-close:hover{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.pop-news .pop-cont{color:#cfcdff;text-align:left}
.pop-news .news-cont{padding-right:20px;overflow-x:hidden}
.pop-news .news-cont p{text-indent:2em}
.pop-news .news-cont p span{color:#fcec9a;font-weight:700}
.pop-news .news-cont p a{color:#cfcdff;text-decoration:underline}
.pop-news .news-cont .p-t0{text-indent:0;text-align:center}
.pop-news{width:1130px;height:466px;background:url(../images/pop-bg-news.png) no-repeat}
.pop-news .pop-t{min-height:35px}
.pop-news .pop-close{top:-30px}
.pop-news .pop-cont{padding:0 40px 0 443px}
.pop-news .pop-cont>img{position:absolute;top:-109px;left:0}
.pop-news .pop-cont>a{top:160px;width:126px;height:99px;background:url(../images/btn-next.png) no-repeat;-webkit-transition:all .5s;transition:all .5s}
.pop-news .pop-cont>a.btn-prev{left:-100px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.pop-news .pop-cont>a.btn-prev:hover{-webkit-transform:translate(-10px,0) rotate(180deg);transform:translate(-10px,0) rotate(180deg)}
.pop-news .pop-cont>a.btn-next{right:-120px}
.pop-news .pop-cont>a.btn-next:hover{-webkit-transform:translate(10px,0);transform:translate(10px,0)}
.pop-news .pop-cont h4{font-size:40px;line-height:1.1; }
.pop-news .news-cont{height:290px;margin-top:31px;line-height:38px}
.pop-news .news-cont .a-link{font-size:21px}

/*en*/
body[data-lang="en"] { font: 14px/1.5 "Noto Serif TC", "Microsoft Yahei"; }
body[data-lang="cn"] .pop-news .pop-cont h4{font-size:47px; letter-spacing:5px}
body[data-lang="cn"] .gift-lists li h4 { letter-spacing:1px; text-indent:1px;  }

body[data-lang="cn"] .tit3 { background-image: url(../images/cn/tit-01.png); }
body[data-lang="cn"] .tit4 { background-image: url(../images/cn/tit-02.png); }
body[data-lang="cn"] .tit2 { background-image: url(../images/cn/tit-03.png); }
body[data-lang="cn"] .tit5 { background-image: url(../images/cn/tit-04.png); }

body[data-lang="pt"] .scroll-icon { font-size:15px;  }
body[data-lang="pt"] #footerBtn { width:340px; }
body[data-lang="pt"] .tit3 { background-image: url(../images/pt/tit-01.png); }
body[data-lang="pt"] .tit4 { background-image: url(../images/pt/tit-02.png); }
body[data-lang="pt"] .tit2 { background-image: url(../images/pt/tit-03.png); }
body[data-lang="pt"] .tit5 { background-image: url(../images/pt/tit-04.png); }
body[data-lang="pt"] .pop-news .pop-cont h4 {font-size: 34px;}
body[data-lang="pt"] .card-slogan1 { font-size:38px; }
body[data-lang="pt"] .share-btn { font-size:14px; }
/*body[data-lang="en"] .tit2 { background-image:url(../images/tit-01.png); }
body[data-lang="en"] .tit3 { background-image:url(../images/tit-01.png); }
body[data-lang="en"] .claim-btn a { background-image:url(../images/en/claimbtn.png); }
body[data-lang="en"] .login-btn { }
body[data-lang="en"] .sub-slogan { font-size:24px; }
body[data-lang="en"] .rwd-list { align-items:flex-start; }
body[data-lang="en"] .reserve-btn a { font-size:30px }
body[data-lang="en"] .btn-accept { font-size:26px; }
body[data-lang="en"] .quest-list li { font-size:14px; }

body[data-lang="cn"] .item-name { font-size:18px; }*/

.pop ::-webkit-scrollbar{width:8px;height:8px}
.pop ::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}
.pop ::-webkit-scrollbar-track:hover{background:#eaeaea}
.pop ::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}
.pop ::-webkit-scrollbar-thumb:hover{background:#a8a8a8}
.pop ::-webkit-scrollbar-thumb:active{background:#8d8d8d}
.pop ::-webkit-scrollbar-corner{background:#f1f1f1}

@media screen and (max-width: 1440px) {
    .wrapper { width:90%; }
}


@keyframes aniBtnOrder{
	to{-webkit-transform:scale(1.1);transform:scale(1.1)}
}
@keyframes floatAnimation{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}