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

body,html{position:relative;width:100%; overflow-x:hidden;background:#42170b;color:#fff;font:16px/1.5 "Noto Serif TC";}
.full-bg{position:relative;width:100%;height:1200px;margin:0 auto;overflow:hidden; z-index: 1; background:url(../images/bg.jpg) no-repeat center top; }
.wrapper{position:relative;width:1240px;height:100%;margin:0 auto;z-index:10; }
.header { height:300px; position:relative; padding-top:10px }
.logo { width:240px; }
.logo img { display:block; width:100%  }

/*.top-btns { position:absolute; right:50px; top:50px; }
.top-btns a { position: absolute; display:block; width: 85px; height: 84px; background: url(../images/btn1.png) no-repeat 0 0; text-align:center; line-height:84px; }
.top-btns a:hover { background-image:url(../images/btn1-hover.png); }
.top-btns a.b1 { right:150px; top: 0; }
.top-btns a.b2 { right:50px; top: 50px; }
.top-btns a.b3 { right:0; top: 150px; }
.top-btns a.b4 { width: 138px; height: 115px; box-sizing: border-box; padding-right: 10px; line-height: 112px; background: url(../images/fb-btn.png) no-repeat center center; right:-100px; top: 50px; }
.top-btns a.b4:hover { filter:brightness(1.2); }*/

.lang { position: absolute; right: 0; top: 20px;  z-index: 2; color: #fff; display:flex; align-items:center; justify-content:center; background:#0a2736; line-height:28px; border-radius:4px; padding:5px 0; }
.lang a { display: block; height: 20px; line-height: 20px; color: #fff; margin: 0 5px; width:40px; text-align:center; }
.lang a:nth-child(1) { border-right:1px solid #fff; }
.lang a:hover, .lang a.on { color: #4fdfff; }


.content { position: relative; height:800px; }
.buildings { height:500px; position:relative; }
.build1, .build2, .build3 { position:absolute; cursor:pointer; }
.build1 { right: 170px; bottom: 0; width:288px; height:286px; background:url(../images/castle1.png) no-repeat center center; }
.build2 { left: 526px; top: 0; width:309px; height:214px; background:url(../images/castle2.png) no-repeat center center; }
.build3 { left: 200px; bottom: 153px; width:161px; height:201px; background:url(../images/ship.png) no-repeat center center; }
.build1:hover, .build2:hover, .build3:hover { filter:brightness(1.2); }
.balloon { position: absolute; left: 0; bottom: 0; width:136px; height:195px; background:url(../images/balloon.png) no-repeat center center; animation: float 60s ease-in-out infinite; opacity: 0.9; }
.slogan { width: 787px; margin: 0 auto; text-align:center; }
.slogan img { display:block; width:100%; }


@keyframes float {
  0% { /*bottom:-400px; left:0; */ transform: translate(0, 400px); }
  100% { /*bottom:1000px; left:-200px;*/ transform: translate(-200px, -900px); }
}


/*common*/
.popbox { display: none; z-index: 999; width: 100%; height: 100%; position: fixed; left: 0; top: 0; align-items: center; }
.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: 540px; background: #fffadb; position: relative; margin: 0 auto; z-index: 1113; color:#162430; }
.msgbox.box1 { width:800px; }
.castle1-box .msgbox { width: 964px; height: 525px; background: url(../images/box1.png) no-repeat center center; }
.castle2-box .msgbox { width: 1039px; height: 606px; background: url(../images/box2.png) no-repeat center center; }
.castle3-box .msgbox { width: 1013px; height: 593px; background: url(../images/box3.png) no-repeat center center; }

.event-content { width:46%; margin:0 0 0 50px; text-align:center; }
.event-content .txt { word-break:break-word; font-size:24px; margin:30px 0; font-weight:bold; }
.event-content .time { font-size:40px; font-weight:bold; }
.event-btn { display:block; width:301px; height:78px; background:url(../images/btn.png) no-repeat 0 0; line-height:78px; color:#fff; font-size:28px; margin: 0 auto; }
.event-btn:hover { filter:brightness(1.2); }

.castle2-box .event-content { margin:100px 0 0 50px; }
.castle3-box .event-content { margin:80px 0 0 50px; }




a.close { z-index: 22; position: absolute; right:-20px; top: -20px; width: 62px; height: 62px; line-height: 62px;  background:url(../images/close.png) no-repeat 0 0; font-size:0; }
a.close:hover { filter:brightness(1.2); }
.msg .msgcont { position: relative; width: 100%; box-sizing:border-box; padding: 60px 50px 50px 50px;  }
#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:#162430; }



.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:210px;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}
.footer.footer-show{height:auto;max-height:200px;padding:20px 0}

.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; }

/*cn*/
/*body[data-lang="cn"] .prize-record { background-image:url(../images/record-btn-en.png); }
body[data-lang="cn"] .wheel li { box-sizing:border-box; padding:0 30px; line-height:1.2 }
body[data-lang="cn"] .build1 { background:url(../images/cn/castle1.png) no-repeat center center; }
body[data-lang="cn"] .build2 { background:url(../images/cn/castle2.png) no-repeat center center; }
body[data-lang="cn"] .build3 { background:url(../images/cn/ship.png) no-repeat center center; }
body[data-lang="cn"] .castle1-box .msgbox { background: url(../images/cn/box1.png) no-repeat center center; }
body[data-lang="cn"] .castle2-box .msgbox { background: url(../images/cn/box2.png) no-repeat center center; }
body[data-lang="cn"] .castle3-box .msgbox { background: url(../images/cn/box3.png) no-repeat center center; }*/