@charset "utf-8";
/* CSS Document */

.clear{height:0; clear:both; font-size:0em!important;}

img{width:100%; height:auto;border:0px;}

a{width:100%; height:100%; }
a:hover{cursor:pointer;}

.txtcolor1{color:#ffc09d}
.txthidden{font-size: 5px;position: absolute;bottom:0;right:0;opacity:0;z-index: -999;pointer-events: none;}
.txtline{display:inline-block;}


.btn_set{transition:all 0.5s;cursor:pointer;}
.btn_bg{position: absolute;top:0;left:0;z-index: -3;}
.btn_fire{position: absolute;top:0;left:0;z-index: -1;opacity:0;mix-blend-mode:hard-light;}
.btn_txt{position: relative;}
.btn_set:hover .btn_fire{animation: shinyb 0.7s infinite ease-out;}


.pagetxt1{width:76%;margin: 0.5% auto; font-size: 1.2rem;line-height: 1.6rem; text-align: center;color:#483122;font-family: "fz-shu-song-gb18030", serif;font-weight: 900;text-shadow:0 0 10px rgba(255, 255,255, .7),0 0 8px rgba(255, 255,255, 0.9),0 0 4px rgba(255, 255,255, 0.8), 0 0 6px rgba(255, 255,255, 0.8)}

.pagetxt1 span{display:inline-block;}

.pagetxt1_2{width:76%;margin: 0 auto; font-size: 1.1rem;line-height: 1.6rem; text-align: center;color:#4c4943;font-family: "fz-shu-song-gb18030", serif;font-weight: 900;text-shadow:0 0 10px rgba(255, 255,255, .7),0 0 8px rgba(255, 255,255, 0.9),0 0 4px rgba(255, 255,255, 0.8), 0 0 6px rgba(255, 255,255, 0.8)}
/*.pagetxt2{width:80%;margin: 0 auto 6rem; line-height: 2rem; text-align: center;color:#902415;font-weight: 900;}*/

.page_dec_l,.page_dec_r{width:40%;max-width: 263px;position: absolute;top:50%;z-index: -2;pointer-events: none;}
.page_dec_l{left: 3%;}
.page_dec_r{right: 3%}

/*-----------標題---------*/
.title{width:96%; max-width:550px;position: relative;margin: 0 auto -1%;}
.titles{width:96%; max-width:630px;position: relative;margin: 3rem auto 0.5rem;}

/*-----------抽獎結果---------*/
.page_result_set{width:96%;max-width: 640px;min-height: 136px; padding:1rem;position: absolute;bottom:-8%;left:50%;transform:translateX(-50%);z-index:9;display: none;}
.page3_result_set{width:96%;max-width: 640px;min-height: 136px; padding:1rem;position: relative; margin: 0 auto; visibility: hidden;}
.page_result{font-family: "fz-shu-song-gb18030", serif;font-weight: 600;font-style: normal; line-height:1.2rem;position:relative;display: flex;  height: 136px;  align-items: center;justify-content:center;/*文字垂直置中*/filter:drop-shadow(0px 0px 5px rgba(62,51,44,1));}
.frame_feel_l,.frame_feel_r{width:12%;max-width: 24px;position: absolute;z-index: 5;}
.frame_feel_l{top:-6.5%;left: -3%;}
.frame_feel_r{top:-8.5%;right: -3%;transform:rotate(180deg);}
.frame_bg{width:100%;height: 100%;position: absolute;left: 0;top:3%;z-index: -1;filter: drop-shadow(0px 0px 3px rgba(62,51,44,0.78));background-image:url("../images/frame_deco_lt.png"),url("../images/frame_deco_rt.png"),url("../images/frame_deco_rb.png"),url("../images/frame_deco_lb.png"),url("../images/frame_bg.jpg");
	background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
	background-position:left top,right top,right bottom,left bottom,center top;
}
.frame_underbg{width:100.7%;height: 106%;position: absolute;left: 0;top:0;z-index: -2;background-color:#bc3727 ;/*filter: drop-shadow(5px 5px 5px rgba(75,86,84,0.78));*/}
.frame_deco2{width:15%;max-width: 67px;position: absolute;right: 1%;bottom:-2%;z-index: 1;}
.result_txt{font-size: 28px;text-align: center;color:#935812;line-height: 136px;z-index: 5;}
.result_txt::before{content: '恭喜獲得';font-family: "fz-shu-song-gb18030", serif;font-weight: 600;font-style: normal;}
.result_txt > span{display:inline-block;}


.page_block{width:100%;max-width:1920px;position: relative;z-index:2;overflow: hidden;
	background-image:url("../images/content_bg_bottom.webp"),url("../images/content_bg.webp");
	background-size:auto auto,auto auto;
	background-repeat: no-repeat,no-repeat;
	background-position:center bottom,center top;
}



.page1_char_l{width:79%;max-width: 590px;position: absolute;left: -38%;top:0;z-index: -1;pointer-events: none;animation:move_left 1.2s forwards ease-out;}
.page1_char_r{width:77%;max-width: 574px;position: absolute;right: -33%;top:-3%;z-index: -1;pointer-events: none;animation:move_right 1.2s forwards ease-out;}


.page1txt1{font-size: 1.8rem;text-align: center;color:#935812;line-height: 2.5rem;}
.page1txt2{font-size: 1.2rem;text-align: center;color:#4b678e;line-height: 2rem;}
.page1txt3{font-size: 1.5rem;padding-right: 0.5rem;color:#4c4943;line-height: 2.2rem;}

.redenve_block{width:80%;max-width: 754px;margin: 0 auto;position: relative;}
.redenve_light{position: absolute;right: 0;top:0;z-index: 3;animation:shinyb 3s infinite ease-out;mix-blend-mode:screen;opacity:0;}
.page1_btn{width: 30%;max-width: 355px; position: relative;margin: 0 auto;}
.page1_btn_cloud_l,.page1_btn_cloud_r{width: 30%;max-width: 100px;position: absolute;z-index: 3;}
.page1_btn_cloud_l{top:16%;left: -6%;}
.page1_btn_cloud_r{top:35%;right: -8%;}

.btn_light{width:100%;position: absolute;left: 0;bottom:0;z-index: 2;mix-blend-mode:lighten;opacity:0;transition:all 0.5s;}
.btnx1{width:34%;max-width: 218px; margin: 0.5rem auto 0;position: relative; transition:all 0.5s;filter: drop-shadow(0px 2px 4px rgba(62,51,44,0.78));}
.btnx1:hover{filter:brightness(110%) ;transform:translateY(-4%);}
.btnx1:hover .btn_light{opacity:1;}
.btnx2{width:90%;max-width: 600px; margin: 0.5rem auto 2rem;z-index: 9;position: relative;}
.btnx2 ul{display:flex;flex-direction:row;align-items:center;justify-content:space-around;}
.btnx2 li{width:40%;max-width: 218px; margin: 1rem auto; position: relative;transition:all 0.5s;}
.btnx2 li:hover{filter:brightness(110%) ;transform:translateY(-4%);}
.btnx2 li:hover .btn_light{opacity:1;}



.p1_award ul{width:90%;max-width:870px;margin: 0 auto; position: relative;display:flex;flex-direction:row;justify-content:center;align-items: center;flex-wrap: wrap;}
.p1_award li{width:33.3%;max-width: 230px;margin: 0 3%;position: relative;background:url("../images/award_bg.png") no-repeat;background-size:cover;}

.firework_p1_1{width: 36%;max-width: 360px;position: absolute;bottom:-8%;left:-9%;z-index: 5;display: none;}
.firework_p1_2{width: 30%;max-width: 360px;position: absolute;bottom:-20%;right:-4%;z-index: 5;display: none;}

.page1_link{display:inline-block; font-size: 1.2rem;margin-bottom: 10rem;}
.page1_link a{color:#ccefff;text-decoration:underline;}
.page1_link > span{display:inline-block;}



.page2_char_l{width:25%;max-width: 470px;position: absolute;left: 0%;top:13%;z-index: 3;pointer-events: none;animation:move_right 1.2s forwards ease-out;}
.page2_char_r{width:31%;max-width: 600px;position: absolute;right: -1%;top:15%;z-index: 3;pointer-events: none;animation:move_left 1.2s forwards ease-out;}

.page2_slot{width:96%; max-width: 1000px;position: relative; margin: -1rem auto 5%;z-index: 6;}
.slot{position: relative;z-index: 3}
.slot_bg{position: absolute;left: 0;top:0; z-index: -1}
.slot_roll_box{width:77.5%;position: absolute;left: 11%;top:35%; z-index: 1}
.slot_mask{-webkit-mask: url("../images/slot_mask.png") no-repeat top center;
	mask: url("../images/slot_mask.png") no-repeat top center;-webkit-mask-size: 100% auto;mask-size: 100% auto;display:flex;flex-direction:row;}

.slot_roll_1,.slot_roll_2,.slot_roll_3{display:flex;flex-direction:column;position: relative;}
.slot_roll_1{margin:auto 9%;}
.slot_roll_2{margin:auto 2%;}
.slot_roll_3{margin:auto 9%;}
.slot_a_run{animation: spin .3s infinite cubic-bezier(0.5, 0.1, 0.5, 1);}
 @keyframes spin {
    0% {
      transform: translateY(0); /* 第一個物件 */
    }
    20% {
      transform: translateY(-100%); /* 第二個物件 */
    }
    40% {
      transform: translateY(-200%); /* 第三個物件 */
    }
    60% {
      transform: translateY(-300%); /* 第四個物件 */
    }
    80% {
      transform: translateY(-400%); /* 第五個物件 */
    }
    100% {
      transform: translateY(0); /* 回到第一個物件，實現循環 */
    }
  }

.slot_win{display: none;}
.slot_win_i1{background:url("../images/slot_a1.png") no-repeat center center;background-size:cover;}
.slot_win_i2{background:url("../images/slot_a2.png") no-repeat center center;background-size:cover;}
.slot_win_i3{background:url("../images/slot_a3.png") no-repeat center center;background-size:cover;}
.slot_win_i4{background:url("../images/slot_a4.png") no-repeat center center;background-size:cover;}
.slot_win_i5{background:url("../images/slot_a5.png") no-repeat center center;background-size:cover;}
.slot_win_i6{background:url("../images/slot_a6.png") no-repeat center center;background-size:cover;}
.slot_win_set{position: absolute;left: 0;top:12%; z-index: 5;pointer-events: none;animation: big 1s infinite linear;}
.slot_shiny{width:30%;position: absolute;left: 9%;top:45%; z-index: 4;animation: shinyb 0.7s infinite ease-out;mix-blend-mode:screen;pointer-events: none;display: none;}
.win{display: block;}
.slot_stopp{position: absolute;left: 0;top:1%; z-index: 3;pointer-events: none;display: none;}
.slotdown{animation:slotdown 0.2s forwards ease-out;}
@keyframes slotdown {
	0% {transform: translateY(10%);}
	100% {transform: translateY(0);}	  
	}

.btn_stop{width: 18%;max-width: 355px; position: absolute;right: -2%;bottom:27%;z-index: 4;}
.slot_congra_set{width: 36%;max-width: 360px;position: absolute;top:15%;z-index: 7;left:50%;transform:translateX(-50%);/*置中*/}
.slot_congra{opacity:0;}
.slot_congra_move{animation: congra 0.7s forwards ease-out;}

@keyframes congra {
	0% {transform: scale(0) translateY(-100%);opacity:0;}
	100% {transform: scale(1) translateY(0);opacity:1;}
	}	

.firework_p2_1{width: 36%;max-width: 360px;position: absolute;bottom:33%;left:-6%;z-index: 5;display: none;}
.firework_p2_2{width: 30%;max-width: 360px;position: absolute;bottom:-3%;right:0%;z-index: 5;display: none;animation-delay:0.5s;}

.p2_award ul{width:90%;max-width:870px;margin: 0 auto; position: relative;display:flex;flex-direction:row;justify-content:center;align-items: center;flex-wrap: wrap;}
.p2_award li{width:33.3%;max-width: 230px;margin: 0 3%;position: relative;background:url("../images/award_bg.png") no-repeat;background-size:cover;}


.page3_char_l{width:28%;max-width: 452px;position: absolute;left: -2%;top:13%;z-index: -1;pointer-events: none;animation:move_right 1.2s forwards ease-out;}
.page3_char_r{width:32%;max-width: 610px;position: absolute;right: -2%;top:15%;z-index: -1;pointer-events: none;animation:move_left 1.2s forwards ease-out;}
.page3_dec{width:100%;max-width: 1165px;position: absolute;left:50%;transform:translateX(-50%);top:0;z-index: -1;}
.page3_amount{width:80%;max-width: 311px;margin: 1% auto; padding:0.6rem 0 0.3rem;position: relative; background:url("../images/page3_amount.png") no-repeat center center;background-size:cover;font-size:1.6rem;line-height: 1.7rem;font-family: "fz-shu-song-gb18030", serif;font-weight: 600;font-style: normal;text-shadow:0 0 10px rgba(57, 43, 38, .7),0 0 8px rgba(57, 43, 38, 0.9),0 0 4px rgba(57, 43, 38, 0.8), 0 0 6px rgba(57, 43, 38, 0.8);text-align: center;vertical-align: top;color:#feda4a;letter-spacing: 0.15rem;}
.page3_amount::before{content: '持有點數:';font-size:1.3rem;color:#fff6de}
.p3_award{max-width: 1200px; margin: 0 auto;position: relative;color:#fff6de;padding-top: 3.5%;}
.p3_award ul{width:84%;margin: 0 auto; position: relative;display:flex;flex-direction:row;justify-content:center;align-items: center;flex-wrap:wrap;}
.p3_award li{width:33.3%;max-width: 335px;padding:4% 0 3%;position: relative;background:url("../images/page3_award_bg.png") no-repeat center center;background-size:100% ;filter: drop-shadow(0px 2px 4px rgba(62,51,44,0.78));}
.p3_award_name{width:80%;max-width: 220px;margin:1% auto;position: relative;}
.p3_award_box{display:flex;flex-direction:row;justify-content:center;}
.p3_award_pic{width:30%;max-width: 72px;margin: 1%;position: relative;}
.p3_award_btn{width:48%;max-width: 170px;position: relative;transition:all 0.3s;}
.p3_award_btn:hover{filter:brightness(110%) ;transform:translateY(-3%);}
.p3_award_point{display:flex;flex-direction:column;}
.p3_award_point p{font-family: "fz-shu-song-gb18030", serif;font-weight: 600;font-style: normal;text-align: left; font-size:19px;padding-left: 5px; line-height: 38px; text-shadow:0 0 10px rgba(57, 43, 38, .7),0 0 8px rgba(57, 43, 38, 0.9),0 0 4px rgba(57, 43, 38, 0.8), 0 0 6px rgba(57, 43, 38, 0.8);}
.p3_award_point p:nth-child(1)::before{content: '所需點數:';}
.p3_award_point p:nth-child(2)::before{content: '可兌換數量:';}
.p3_award_amount_box{display:flex;flex-direction:row;justify-content:center;align-items:center;white-space:nowrap;}
.p3_award_amount{margin-left: 6%;padding-left:.5rem;vertical-align:middle;color:#4d3617;position:relative;border: #ddcba8 1px solid; height: 2.4rem; line-height: 2.4rem; font-size: 1.2rem;position:relative;}


.page4_char_l{width:40%;max-width: 740px;position: absolute;left: -3%;top:16%;z-index: -1;pointer-events: none;animation:move_right 1.2s forwards ease-out;}
.page4_char_r{width:47%;max-width: 880px;position: absolute;right: -10%;top:4%;z-index: -1;pointer-events: none;animation:move_left 1.2s forwards ease-out;}

.p4_award_page_box{width:3rem;margin: 4% auto;position: relative;}
.p4_award_page{padding:0 .5rem ;vertical-align:middle;color:#4d3617;position:relative;border: #ddcba8 1px solid; height: 2.4rem; line-height: 2.4rem; font-size: 1.2rem;position:relative;}

.ujinfo_box{width:90%;max-width: 800px; margin:2% auto 1%;color:#6c5231;font-size:1.1rem;font-family: "adobe-fan-heiti-std", sans-serif;font-weight: 400;font-style: normal;text-shadow:0 0 10px rgba(255, 255,255, .7),0 0 8px rgba(255, 255,255, 0.9),0 0 4px rgba(255, 255,255, 0.8), 0 0 6px rgba(255, 255,255, 0.8)}
.ujinfo_box ul{display:flex;flex-direction:row;justify-content: space-between ;line-height: 2rem;}
.ujinfo_box li:nth-child(1)::before{content: '遊戲帳號:';}
.ujinfo_box li:nth-child(2)::before{content: '角色GID:';}
.ujinfo_box li:nth-child(3)::before{content: '伺服器:';}

.form{width:90%;max-width: 800px;margin:0 auto .2rem;display:flex;flex-direction:row;font-family: "adobe-fan-heiti-std", sans-serif;font-weight: 400;}
.tab_title1,.tab_title2{color:#fdefd2;font-size:1.1rem;text-align: center; line-height: 2.5rem;margin:auto 0.1rem;background:rgba(190,56,39,0.7);}
.tab1,.tab2{color:#6c5231;font-size:1.1rem;text-align: center; line-height: 2.5rem;margin:auto 0.1rem;background:rgba(255,245,220,0.7);}
.tab_title1,.tab1{width:60%}
.tab_title2,.tab2{width:40%}

.notice{width:90%;max-width:870px;margin:1rem auto 10rem;text-align: justify;line-height: 1.8;color:#4c3413;font-family: "adobe-fan-heiti-std", sans-serif;font-weight: 400;font-style: normal;text-shadow:0 0 10px rgba(255, 255,255, .7),0 0 8px rgba(255, 255,255, 0.9),0 0 4px rgba(255, 255,255, 0.8), 0 0 6px rgba(255, 255,255, 0.8)}
.notice ol{list-style-position:inside;}
.notice li{text-indent: -1em;}
.notice_hd{color:#9d3700;}



@media (max-width:1680px){
	.page3_char_l,.page3_char_r{display:none;}


@media (max-width:1480px){
	.page2_char_l,.page2_char_r,.page4_char_l,.page4_char_r{display:none;}
}


@media (max-width:1280px){
	.page_dec_l,.page_dec_r,.page3_dec{display:none;}

}


@media (max-width:1200px){
	.p3_award ul{width:96%;}
	.p3_award li{width:50%;margin: 1% 0;}

}
	

@media (max-width:1024px){
	.page1_char_l,.page1_char_r{display:none;}
	.p3_award{width:96%;}
	.notice{margin:1rem auto 5rem 2rem;}

	
}


@media (max-width:737px){
	.frame_feel_l,.frame_feel_r{display: none;}
	.frame_underbg{width:104%;height: 104%;position: absolute;left: -2%;top:-2%;z-index: -2;}
	.frame_bg{width:100%;height: 94%;}
	.pagetxt1{width:80%;font-size: 1.1rem;}
	.redenve_block{width:100%;}
	.page1_btn{width: 50%;}
	.p1_award ul,.p2_award ul{display:flex;flex-wrap:wrap;}
	.p1_award li,.p2_award li{width:48%;margin: 1%;}
	.p3_award li{width:87%;padding:8% 0;}
	.ujinfo_box ul{display:flex;flex-direction:column;}
	.ujinfo_box li:nth-child(1),.ujinfo_box li:nth-child(2),.ujinfo_box li:nth-child(3){width:100%}
	
}
@media (max-width:640px){
	.btnx1{width:55%;}
	.btnx2 li{width:50%;}
	.slot{margin:6% auto 25%;}
	.btn_stop{width: 50%;position: absolute;left:50%;transform:translateX(-50%);bottom:-25%;}
	.page_result_set{bottom:-35%;}
	
}


@media (max-width:430px){
	.result_txt{font-size: 23px;}
	.page_result_set{min-height: 100px;}
	.page_result{height: 100px;}
	.notice{width:80%;margin:1rem auto 5rem 4rem;}
	.ujinfo_box{width:80%;}
	.form{width:81%;}

}