@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');


*{ font-family: "Noto Sans TC", "Roboto Condensed", sans-serif; font-weight: normal; letter-spacing: 1px;}
/* ::selection {
	background: #fffce4;
	color: #ff7d9f;
} */
html{ margin: 0; padding: 0;}
body{ margin: 0; padding: 0; background: #1e1e23;}
img{ display: block;}
a{ text-decoration: none;}
a.text{ position: relative; padding: 0 0 0 20px; color: #163bb5; text-decoration: none;}
a.text::before{ position: absolute; top: 2px; left: 2px; display: block; content: ""; width: 15px; height: 15px; background: url(../images/icon_link.png);}

::-webkit-scrollbar { width: 5px; background-color: #fff;}
::-webkit-scrollbar-thumb { background-color: #b3b3b3;}

input, select, textarea{ padding: 0; font-weight: normal; border: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: transparent;}
input:focus, select:focus, textarea:focus{ padding: 0; border: none; outline: none; background: transparent;}
::placeholder { color: #aaa;}

@media (max-width:500px){
html{ font-size: 12px;}
::-webkit-scrollbar{ width: 0;}
a.text::before{ top: 1; width: 11px; height: 11px; background-size: contain;}
}


/*-- 主選單 --*/
header{ position: fixed; top: 10px; left: 50px; display: flex; width: calc(100% - 100px); border-radius: 40px; overflow: hidden; transition: .3s; z-index: 3;}
header:hover{ background: rgba(255,255,255,1);}
header::before{ position: absolute; top: 80px; left: 15px; display: block; width: calc(100% - 30px); height: 1px; background: #ddd;}
header:has(nav):hover::before{ content: '';}
header::after{ display: block; content: ''; background: rgba(255,255,255,0.8); width: 100%; height: 100%; position: absolute; backdrop-filter: blur(15px); z-index: -1;}

header .home{ margin: 0 -29px 0 0; height: 80px;}
header .home img{ height: 80px;}
header nav{ display: flex; flex-wrap: wrap; width: 556px;}
header nav>a{ position: relative; padding: 0 25px; line-height: 80px; color: #663333; text-align: center; transition: .3s;}
header nav>a:hover{ color: #ff5555;}
header nav>a.active{ color: #ff5555;}
header nav>a.active::after{ position: absolute; bottom: 0; left: 0; display: block; content: ''; background: #ff5555; width: 100%; height: 5px;}
header nav>a i{ position: absolute; top: 50%; right: 0; display: block; width: 6px; height: 6px; background: #f55d5a; border-radius: 50px; transform: translate(-20px, -12px); animation: 1s nav_dot infinite ease-in-out;}
@keyframes nav_dot {
    0%{ opacity: 0;}
	50%{ opacity: 1;}
	100%{ opacity: 0;}
}
header nav ul{ margin: 0; padding: 0; width: 84px; height: 0; list-style: none; overflow: hidden; opacity: 0; transition: .3s;}
header nav:hover ul{ padding: 20px 0; height: 120px; opacity: 1;}
header nav ul+ul{ width: 118px;}
header nav ul li{ text-align: center;}
header nav ul li a{ display: block; padding: 5px 0; color: #663333; font-size: 0.875rem; transition: .3s;}
header nav ul li a:hover{ color: #ff5555;}

.header_member{ margin: 0 0 0 auto;}
.header_member a{ position: relative; display: inline-block; padding: 0 15px 0 33px; line-height: 80px; color: #663333; text-align: center; transition: .3s;}
.header_member a+a::before{ position: absolute; display: block; content: ''; top: 32px; left: 0; width: 1px; height: 15px; border-left: 1px solid rgba(255, 255, 255, 0.1);}
.header_member a:hover{ color: #ff5555;}
.header_member span{ padding: 0 0 0 10px;}
.header_member a.member{ background: url(../images/btn_person_off.png) center left 15px no-repeat;}
.header_member a.member:hover{ background: url(../images/btn_person_on.png) center left 15px no-repeat;}
.header_member a.logout{ background: url(../images/btn_logout_off.png) center left 15px no-repeat;}
.header_member a.logout:hover{ background: url(../images/btn_logout_on.png) center left 15px no-repeat;}
.header_member a.login{ background: url(../images/btn_login_off.png) center left 15px no-repeat;}
.header_member a.login:hover{ background: url(../images/btn_login_on.png) center left 15px no-repeat;}
.header_gameStart{ height: 80px;}
.header_gameStart img{ height: 80px; transition: .3s;}
.header_gameStart img:hover{ filter: brightness(1.1);}
.header_download, .header_social, .header_close{ display: none;}

@media (max-width:1280px){
	header::before{ top: 70px;}

	header .home{ height: 70px;}
	header .home img{ height: 70px;}
	header nav{ width: 496px;}
	header nav>a{ padding: 0 19px; line-height: 70px;}
	header nav>a i{ transform: translate(-15px, -10px);}
	header nav ul{ width: 72px;}
	header nav ul+ul{ width: 106px;}

	.header_member a{ line-height: 70px;}
	.header_member a+a::before{ top: 27px;}
	.header_gameStart{ height: 70px;}
	.header_gameStart img{ height: 70px;}
}

@media (max-width:1180px){
	header{ flex-direction: column; top: 0; left: 100%; width: 400px; height: 100vh; padding: 0 20px; background: rgba(255,255,255,1); transform: translate(0, 0); border-radius: 0; overflow: auto; box-sizing: border-box; transition: .5s;}
	header.on{ transform: translate(-100%, 0);}
	header:has(nav):hover::before{ display: none;}
	header .home{ margin: 0; height: auto;}
	header .home img{ margin: 20px auto 0; height: 100px;}
	header::after{ display: none;}

	header nav{ margin: 25px 0 0; width: 100%; flex-direction: column; order: 4;}
	header nav>a{ position: relative; padding: 0; display: flex; align-items: center; line-height: 4rem; text-align: left; border-top: 1px solid #663333;}
	header nav>a::before{ position: absolute; right: 0; display: block; content: ''; width: 13px; height: 2px; background-color: #ff5555;}
	header nav>a::after{ position: absolute; right: 0; display: block; content: ''; width: 13px; height: 2px; background-color: #ff5555; transform: rotate(90deg); transition: .3s;}
	header nav>a.active::after{ position: absolute; left: unset; bottom: unset; right: 0; display: block; content: ''; width: 13px; height: 2px; background-color: #ff5555; transform: rotate(90deg); transition: .3s;}
	header nav>a.on::after{ transform: rotate(0deg);}
	header nav>a.active{ background: none;}
	header nav>a:nth-last-of-type(1){ border-bottom: 1px solid #392121;;}
	header nav>a i{ transform: translate(-20px, -10px);}
	header nav ul{ display: none; width: 100%; height: auto; padding: 10px 0; background: #fff5f5; opacity: 1; transition: none;}
	header nav:hover ul{ padding: 10px 0; height: auto;}
	header nav ul+ul{ width: 100%;}
	header nav ul li a{ padding: 0.5rem 20px; font-size: 1rem; text-align: left;}
	header nav>a:nth-of-type(1){ order: 1;}
	header nav>a:nth-of-type(2){ order: 3;}
	header nav>a:nth-of-type(3){ order: 5;}
	header nav>a:nth-of-type(4){ order: 7;}
	header nav>a:nth-of-type(5){ order: 9;}
	header nav ul:nth-of-type(1){ order: 2;}
	header nav ul:nth-of-type(2){ order: 4;}
	header nav ul:nth-of-type(3){ order: 6;}
	header nav ul:nth-of-type(4){ order: 8; display: none;}
	header nav ul:nth-of-type(5){ order: 10; display: none;}
	header nav>a:nth-of-type(5)::before,header nav>a:nth-of-type(5)::after{ display: none;}

	.header_member{ margin: 0; text-align: center; order: 2;}
	.header_gameStart{ position: sticky; left: 0; bottom: 0; height: auto; margin: 0; order: 10; background: rgba(255,255,255,0.8);}
	.header_gameStart img{ width: calc(100% + 40px); height: auto; margin: 0 0 0 -20px;}
	.header_download{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; order: 3;}
	.header_download a{ width: calc(( 100% - 10px ) / 2);}
	.header_download a img{ width: 100%;}

	.header_social{ display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; order: 5; margin: 20px 0;}
	.header_social a{ width: 50px;}
	.header_social a img{ width: 100%;}

	.header_close{ position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer;}
	.header_close::after{ position: absolute; display: block; content: ''; width: 30px; height: 3px; border-radius: 50px; background: #242430; transform: rotate(45deg);}
	.header_close::before{ position: absolute; display: block; content: ''; width: 30px; height: 3px; border-radius: 50px; background: #242430; transform: rotate(-45deg);}
}
@media (max-width:400px){
	header{ width: 100vw;}
}

/*-- 假漢堡 --*/
.mobile_header{ display: none;}
@media (max-width:1180px){
	.mobile_header{ position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; height: 70px; width: 100%; background: rgba(255,255,255,0.9); z-index: 2;}
	.mobile_header a{ height: 70px;}
	.mobile_header a img{ max-height: 100%;}
	.header_open{ position: relative; right: 20px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer;}
	.header_open::after{ position: absolute; display: block; content: ''; width: 30px; height: 3px; border-radius: 50px; background: #242430; transform: translate(0,-5px);}
	.header_open::before{ position: absolute; display: block; content: ''; width: 25px; height: 3px; border-radius: 50px; background: #242430; transform: translate(2px,5px); transition: .3s;}
	.header_open:hover::before{ width: 30px; transform: translate(0,5px);}
}
@media (max-width:500px){
	.mobile_header{ height: 60px;}
	.mobile_header a{ height: 60px;}
}



/*-- 首頁 --*/
.index_all{ position: relative; overflow: hidden;}
video{ position: absolute; top: 0; left: 50%; transform: translate(-50%,0); width: 100%; min-width: 2000px;}

.kv_m{ display: none;}
.index_social{ position: absolute; top: 120px; right: 50px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;}
.index_social a{ position: relative;}
.index_social img{ width: 62px;}
.index_social img:nth-of-type(2){ position: absolute; top: 0; left: 0; opacity: 0; transition: .3s;}
.index_social a:hover img:nth-of-type(2){ opacity: 1;}
.index_download{ position: relative; display: flex; justify-content: center; gap: 10px; margin: 610px 10px 50px;}
.index_download img{ width: 210px;}
@media (max-width:1080px){
	.index_social{ top: 80px; right: 10px;}
	.index_download a{ width: 210px;}
	.index_download img{ width: 100%;}
}
@media (max-width:750px){
	video{ display: none;}
	.kv_m{ position: absolute; top: 0; left: 0; display: block; width: 100%;}
	.index_social{ position: relative; top: 0; right: 0; flex-direction: row; justify-content: center; gap: 15px;}
	.index_social a{ border-radius: 200px; border: 1px solid #eee;}
	.index_social img{ width: 50px;}
	.index_social img:nth-of-type(2){ opacity: 1;}
	.index_download{ flex-wrap: wrap; margin: 120vw 10px 20px;}
	.index_download a{ max-width: calc((80% - 10px) / 2);}
}

/*-- 首頁最新消息 --*/
.index_news{ position: relative; padding: 50px 0; background: #fff;}
.index_news>div{ display: flex; flex-wrap: wrap; max-width: 1300px; margin: 0 auto; padding: 0 10px;}
.index_news_left{ width: calc(100% - 886px);}
.index_news_left h3{ display: flex; justify-content: space-between ; margin: 0 0 15px; padding: 0 0 10px; font-size: 1.25rem; color: #222; border-bottom: 1px solid #333;} 
.index_news_left>a{ display: flex; align-items: center; padding: 12px 0 0; color: #222; transition: .3s;}
.index_news_left>a:hover{ color: #ff5555;}
.index_news_left>a i{ margin: 0 10px 0 0; padding: 0 5px; font-size: 0.75rem; font-style: normal; border-radius: 2px; color: #fff;}
.index_news_left>a i.announcement{ background: #ff5555;}
.index_news_left>a i.event{ background: #4145ff;}
.index_news_left>a i.odds{ background: #33bb99;}
.index_news_left>a i.system{ background: #ffc210;}
.index_news_left>a p{ flex: 1; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.index_news_left>a span{ margin: 0 0 0 auto; padding: 0 0 0 10px;}
.index_news_right{ position: relative; margin: 0 0 0 30px; width: 856px; max-width: 100%;}
.index_news_right .slick-slider{ border-radius: 20px; overflow: hidden;}
.index_news_right img{ max-width: 100%;}
.index_news_right ul.slick-dots{ position: absolute; bottom: 5px; left: 15px; display: flex; margin: 0; padding: 0; width: calc(100% - 30px); list-style: none; background: rgba(255,255,255,0.2); border-radius: 50px; overflow: hidden;}
.index_news_right ul.slick-dots li{ flex: 1; height: 10px; text-indent: -9999px; background: #ff5555; cursor: pointer; opacity: 0; transition: .3s;}
.index_news_right ul.slick-dots li.slick-active{ background: #ff5555; opacity: 1;}
.index_news_right ul.slick-dots li:not(.slick-active):hover{ background: #ff5555; opacity: 0.6;}
.index_news_right button.slick-prev{ position: absolute; top: 10px; right: 120px; width: 34px; height: 34px; background: url(../images/btn-prev.png) center no-repeat rgba(255,255,255,0.8); border: none; text-indent: -9999px; border-radius: 50px; cursor: pointer; z-index: 1;}
.index_news_right button.slick-next{ position: absolute; top: 10px; right: 15px; width: 34px; height: 34px; background: url(../images/btn-next.png) center no-repeat rgba(255,255,255,0.8); border: none; text-indent: -9999px; border-radius: 50px; cursor: pointer; z-index: 1;}
.index_news_right .slider_counter{ position: absolute; top: 10px; right: 55px; display: flex; align-items: center; justify-content: center; width: 60px; line-height: 34px; color: #ff5555; background: rgba(255,255,255,0.8); border-radius: 50px; z-index: 1;}

@media (max-width:1280px){
	.index_news>div{ justify-content: center;}
	.index_news_left{ width: 856px; max-width: 100%; margin: 20px 0 0 0; order: 2;}
	.index_news_right{ max-width: 100%; order: 1; margin: 0;}
}
@media (max-width:750px){
	.index_news{ margin: 20px 0 0 0; padding: 30px 0 50px;}
}
@media (max-width:500px){
	.index_news{ padding: 10px 0 30px 0;}
	.index_news_left{ display: flex; flex-direction: column; margin: 10px 0 0 0;}
	.index_news_left h3{ order: 1; align-items: center; margin: 20px auto 0; padding: 0; font-size: 2.8rem; line-height: 2.8rem; font-weight: 600; border-bottom: none;}
	.index_news_left h3 span{ display: none;}
	.index_news_left h3 a{ display: flex; align-content: start; justify-content: center; width: 200px; font-size: 1rem; line-height: 4em; color: #fff; background: linear-gradient(rgba(255, 159, 159, 1), rgba(255, 85, 85, 1)); border-radius: 50px; transition: .3s;}
	.index_news_left h3 a::before{ display: block; content: '更多新聞';}
	.index_news_left h3 a img{ display: none;}
	.index_news_right{ max-width: calc(100% + 20px);}
	.index_news_right .slick-slider{ border-radius: 0;}
	.index_news_right ul.slick-dots li{ height: 3px;}
	.index_news_right button.slick-prev{ right: 104px;}
	.index_news_right button.slick-next{ right: 10px;}
	.index_news_right .slider_counter{ display: none;}
}

/*-- 首頁遊戲介紹 --*/
.index_gameinfo{ position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 0 10px; height: 750px; background: url(../images/index_gameinfo_bg.webp) center; background-size: cover;}
.index_gameinfo>div{ display: flex; flex-direction: column; height: 100%; padding: 30px 0; box-sizing: border-box;}
.index_gameinfo br{ display: none;}
.index_gameinfo h3{ margin: 0 auto; max-width: 1300px; font-size: 3.75rem; text-align: center; color: #222; font-family: 'Helvetica','Noto Sans TC'; font-weight: 600;}
.index_gameinfo p{ margin: 0 auto 40px; max-width: 1600px; font-size: 1.25rem; text-align: center; color: #222;}
.index_gameinfo a{ display: block; margin: auto auto 0; width: 200px; line-height: 60px; border: 3px solid #fff; background: linear-gradient(rgba(255, 159, 159, 1), rgba(255, 85, 85, 1)); text-align: center; color: #fff; border-radius: 50px; transition: .3s;}
.index_gameinfo a:hover{ filter: brightness(1.1);}
@media (max-width:750px){
	.index_gameinfo{ height: 550px; background: url(../images/index_gameinfo_bg.webp) center left 50%;}
	.index_gameinfo br{ display: block;}
	.index_gameinfo h3{ margin: 0 auto 10px; line-height: 1.2em; font-size: 3rem;}
	.index_gameinfo p{ margin: 0 auto 20px; font-size: 1rem;}
	.index_gameinfo a{ line-height: 4em; border: 0;}
}

/*-- 首頁職業介紹 --*/

.job_slider_box{ position: relative; z-index: 1;}
.job_slider_box>div{ position: relative; max-width: 1920px; margin: 0 auto;}
.job_slider_box .job_info{ position: absolute; top: 24.5%; left: 15%; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 260px; z-index: 6;}
.job_slider_box .job_info h3{ margin: 0; line-height: normal; font-size: 3.75rem; font-weight: 600; color: #242430;}
.job_slider_box .job_info p{ margin: 0 0 40px; line-height: normal; font-size: 1.25rem; color: #242430; text-align: center;}
.job_slider_box .job_info a{ display: block; margin: auto auto 0; width: 200px; line-height: 60px; border: 3px solid #fff; background: linear-gradient(rgba(48, 48, 62, 1), rgba(31, 31, 42, 1)); text-align: center; color: #fff; border-radius: 50px; transition: .3s;}
.job_slider_box .job_info a:hover{ filter: brightness(1.1);}
.job_slider_box img{ pointer-events: none;}
.job_slider_box .txt{ position: absolute; top: 95px; max-width: 100%;}
.job_slider_box.job_01 .ch{ position: relative; margin: 0 0 0 29%; z-index: 3;}
.job_slider_box.job_01 .ch-back{ position: absolute; bottom: 0; left: 39%; z-index: 1;}
.job_slider_box.job_02 .ch{ position: relative; margin: 0 0 0 30%; z-index: 3;}
.job_slider_box.job_02 .ch-back{ position: absolute; bottom: 0; left: 47%; z-index: 1;}
.job_slider_box.job_03 .ch{ position: relative; margin: 0 0 0 22%; z-index: 3;}
.job_slider_box.job_03 .ch-back{ position: absolute; bottom: 0; left: 50%; z-index: 1;}
.job_slider_box.job_04 .ch{ position: relative; margin: 0 0 0 31%; z-index: 3;}
.job_slider_box.job_04 .ch-back{ position: absolute; bottom: 0; left: 57%; z-index: 1;}
.job_slider_box.job_05 .ch{ position: relative; margin: 0 0 0 31%; z-index: 3;}
.job_slider_box.job_05 .ch-back{ position: absolute; bottom: 0; left: 47%; z-index: 1;}
.job_slider_box .fog{ position: absolute; width: 100%; bottom: 0; left: 0; z-index: 4;}
.index_job_slider .ch{ transform: translate(20px, 0); transition: .3s;}
.index_job_slider .slick-active .ch{ transform: translate(0, 0);}
.index_job_slider .ch-back{ transform: translate(-20px, 0); transition: .3s;}
.index_job_slider .slick-active .ch-back{ transform: translate(0, 0);}

.job_slider_box.job_01{ background-image: url(../images/1_bg.webp), url(../images/line.png); background-position: center, center; background-repeat: no-repeat, repeat; background-color: #fff;}
.job_slider_box.job_02{ background-image: url(../images/2_bg.webp), url(../images/line.png); background-position: center, center; background-repeat: no-repeat, repeat; background-color: #fff;}
.job_slider_box.job_03{ background-image: url(../images/3_bg.webp), url(../images/line.png); background-position: center, center; background-repeat: no-repeat, repeat; background-color: #fff;}
.job_slider_box.job_04{ background-image: url(../images/4_bg.webp), url(../images/line.png); background-position: center, center; background-repeat: no-repeat, repeat; background-color: #fff;}
.job_slider_box.job_05{ background-image: url(../images/5_bg.webp), url(../images/line.png); background-position: center, center; background-repeat: no-repeat, repeat; background-color: #fff;}

.index_job_slider .slick-prev{ position: absolute; top: 50%; left: 5%; transform: translate(0, -50%); width: 120px; height: 120px; background: url(../images/arr_prev.webp) no-repeat center rgba(255,255,255,0.7); background-size: contain; border-radius: 100px; text-indent: -9999px; border: none; z-index: 1; cursor: pointer; transition: .3s;}
.index_job_slider .slick-next{ position: absolute; top: 50%; right: 5%; transform: translate(0, -50%); width: 120px; height: 120px; background: url(../images/arr_next.webp) no-repeat center rgba(255,255,255,0.7); background-size: contain; border-radius: 100px; text-indent: -9999px; border: none; z-index: 1; cursor: pointer; transition: .3s;}
.index_job_slider .slick-prev:hover, .main_job_slider .slick-next:hover{ background-color: #fff;}

.index_job_slider .slick-dots{ position: absolute; bottom: 60px; left: 50%; transform: translate(-50%, 0); display: flex; gap: 10px; list-style: none; margin: 0; padding: 0;}
.index_job_slider .slick-dots li{ width: 112px; height: 112px;}
.index_job_slider .slick-dots li:nth-of-type(1){ background: url(../images/1_btn.png) center no-repeat; background-size: contain; cursor: pointer;}
.index_job_slider .slick-dots li:nth-of-type(1).slick-active{ background: url(../images/1_btn_h.png) center no-repeat; background-size: contain;}
.index_job_slider .slick-dots li:nth-of-type(2){ background: url(../images/2_btn.png) center no-repeat; background-size: contain; cursor: pointer;}
.index_job_slider .slick-dots li:nth-of-type(2).slick-active{ background: url(../images/2_btn_h.png) center no-repeat; background-size: contain;}
.index_job_slider .slick-dots li:nth-of-type(3){ background: url(../images/3_btn.png) center no-repeat; background-size: contain; cursor: pointer;}
.index_job_slider .slick-dots li:nth-of-type(3).slick-active{ background: url(../images/3_btn_h.png) center no-repeat; background-size: contain;}
.index_job_slider .slick-dots li:nth-of-type(4){ background: url(../images/4_btn.png) center no-repeat; background-size: contain; cursor: pointer;}
.index_job_slider .slick-dots li:nth-of-type(4).slick-active{ background: url(../images/4_btn_h.png) center no-repeat; background-size: contain;}
.index_job_slider .slick-dots li:nth-of-type(5){ background: url(../images/5_btn.png) center no-repeat; background-size: contain; cursor: pointer;}
.index_job_slider .slick-dots li:nth-of-type(5).slick-active{ background: url(../images/5_btn_h.png) center no-repeat; background-size: contain;}

.index_job_slider .slick-dots li button{ display: none;}

@media (max-width:1400px){
	.job_slider_box .job_info{ left: 12%;}
	.job_slider_box.job_01 .ch{ margin: 0 0 0 23%;}
	.job_slider_box.job_01 .ch-back{ left: 28%;}
	.job_slider_box.job_02 .ch{ margin: 0 0 0 27%;}
	.job_slider_box.job_02 .ch-back{ left: 42%;}
	.job_slider_box.job_03 .ch{ margin: 0 0 0 19%;}
	.job_slider_box.job_03 .ch-back{ left: 50%;}
	.job_slider_box.job_04 .ch{ margin: 0 0 0 28%;}
	.job_slider_box.job_04 .ch-back{ left: 61%;}
	.job_slider_box.job_05 .ch{ margin: 0 0 0 60%;}
	.job_slider_box.job_05 .ch-back{ left: 13%;}
	.index_job_slider .slick-prev{ width: 80px; height: 80px;}
	.index_job_slider .slick-next{ width: 80px; height: 80px;}
}
@media (max-width:1100px){
	.job_slider_box.job_01 .ch{ margin: 0 0 0 20%;}
	.job_slider_box.job_01 .ch-back{ left: 45%; display: none;}
	.job_slider_box.job_02 .ch{ margin: 0 0 0 30%;}
	.job_slider_box.job_02 .ch-back{ left: 22%; display: none;}
	.job_slider_box.job_03 .ch{ margin: 0 0 0 16%;}
	.job_slider_box.job_03 .ch-back{ left: 45%; display: none;}
	.job_slider_box.job_04 .ch{ margin: 0 0 0 28%;}
	.job_slider_box.job_04 .ch-back{ left: 58%; display: none;}
	.job_slider_box.job_05 .ch{ margin: 0 0 0 28%;}
	.job_slider_box.job_05 .ch-back{ left: 35%; display: none;}
}
@media (max-width:900px){
	.job_slider_box.job_01,.job_slider_box.job_02,.job_slider_box.job_03,.job_slider_box.job_04,.job_slider_box.job_05{ background-size: 200%, auto; background-position: 45% center, center;}
	.job_slider_box .job_info{ position: relative; top: 0; left: 0; height: 100%; margin: 100px auto 0;}
	.job_slider_box .job_info img{ display: none;}
	.job_slider_box .job_info p{ display: none;}
	.job_slider_box .job_info a{ margin: auto 0 30px 0;}
	.job_slider_box .txt{ top: 0;}
	.job_slider_box.job_01 .ch{ position: relative; left: 50%; bottom: 0; transform: translate(-75%, 0); margin: 0; height: 500px;}
	.job_slider_box.job_01 .ch-back{ left: 50%; display: block; height: 500px; transform: translate(-40%, 0);}
	.job_slider_box.job_02 .ch{ position: relative; left: 50%; bottom: 0; transform: translate(-60%, 0); margin: 0; height: 500px;}
	.job_slider_box.job_02 .ch-back{ left: 50%; display: block; height: 500px; transform: translate(-20%, 0);}
	.job_slider_box.job_03 .ch{ position: relative; left: 50%; bottom: 0; transform: translate(-75%, 0); margin: 0; height: 500px;}
	.job_slider_box.job_03 .ch-back{ left: 50%; display: block; height: 500px; transform: translate(-15%, 0);}
	.job_slider_box.job_04 .ch{ position: relative; left: 50%; bottom: 0; transform: translate(-75%, 0); margin: 0; height: 500px;}
	.job_slider_box.job_04 .ch-back{ left: 50%; display: block; height: 500px; transform: translate(5%, 0);}
	.job_slider_box.job_05 .ch{ position: relative; left: 54%; bottom: 0; transform: translate(-75%, 0); margin: 0; height: 500px;}
	.job_slider_box.job_05 .ch-back{ left: 36%; display: block; height: 500px; transform: translate(5%, 0);}

	.index_job_slider .slick-dots{ bottom: unset; top: 30px;}
	.index_job_slider .slick-dots li{ width: 56px; height: 56px;}
}
@media (max-width:750px){
	.job_slider_box .job_info a{ border: 0; line-height: 4em;}
	.job_slider_box .job_info h3{ font-size: 3em;}
}
@media (max-width:500px){
	.job_slider_box.job_01 .ch{ height: 300px;}
	.job_slider_box.job_01 .ch-back{ height: 300px;}
	.job_slider_box.job_02 .ch{ height: 300px;}
	.job_slider_box.job_02 .ch-back{ height: 300px;}
	.job_slider_box.job_03 .ch{ height: 300px;}
	.job_slider_box.job_03 .ch-back{ height: 300px;}
	.job_slider_box.job_04 .ch{ height: 300px;}
	.job_slider_box.job_04 .ch-back{ height: 300px;}
	.job_slider_box.job_05 .ch{ height: 300px; left: 58%;}
	.job_slider_box.job_05 .ch-back{ height: 300px; left: 25%;}
}


/*-- 首頁影音介紹 --*/
.index_video{ position: relative; padding: 60px 10px; background: url(../images/bg_media.webp) center; background-size: cover;}
.index_video h3{ margin: 0 auto; max-width: 1300px; font-size: 3.75rem; text-align: center; color: #222; font-family: 'Helvetica', 'Arial'; font-weight: 600;}
.index_video p{ margin: 0 auto 40px; max-width: 1600px; font-size: 1.25rem; text-align: center; color: #222;}
.index_video>div{ display: flex; gap: 10px; flex-wrap: wrap; max-width: 1300px; margin: 0 auto;}
.index_video_left{ width: 61.54%; border-radius: 20px; overflow: hidden;}
.index_video_left img{ max-width: 100%;}
.index_video_left ul.slick-dots{ position: absolute; bottom: 5px; left: 15px; display: flex; margin: 0; padding: 0; width: calc(100% - 30px); list-style: none; background: rgba(255,255,255,0.2); border-radius: 50px; overflow: hidden;}
.index_video_left ul.slick-dots li{ flex: 1; height: 10px; text-indent: -9999px; background: #ff5555; cursor: pointer; opacity: 0; transition: .3s;}
.index_video_left ul.slick-dots li.slick-active{ background: #ff5555; opacity: 1;}
.index_video_left ul.slick-dots li:not(.slick-active):hover{ background: #ff5555; opacity: 0.6;}
.index_video_left button.slick-prev{ position: absolute; top: 10px; right: 120px; width: 34px; height: 34px; background: url(../images/btn-prev.png) center no-repeat rgba(255,255,255,0.8); border: none; text-indent: -9999px; border-radius: 50px; cursor: pointer; z-index: 1;}
.index_video_left button.slick-next{ position: absolute; top: 10px; right: 15px; width: 34px; height: 34px; background: url(../images/btn-next.png) center no-repeat rgba(255,255,255,0.8); border: none; text-indent: -9999px; border-radius: 50px; cursor: pointer; z-index: 1;}
.index_video_left .slider_counter{ position: absolute; top: 10px; right: 55px; display: flex; align-items: center; justify-content: center; width: 60px; line-height: 34px; color: #ff5555; background: rgba(255,255,255,0.8); border-radius: 50px; z-index: 1;}



.index_video_right{ display: flex; flex-direction: column; justify-content: space-between; width: calc(38.46% - 10px);}
.index_video_right>div{ position: relative; display: flex; align-items: center; justify-content: center;}
.index_video_right>div::after{ position: absolute; content: ''; width: 80px; height: 80px; background: url(../images/btn_playIcon.webp) no-repeat; background-size: contain; cursor: pointer; pointer-events: none;}
.index_video_right img{ max-width: 100%; border-radius: 20px; cursor: pointer; transition: .3s;}
.index_video_right img:hover{ filter: brightness(1.2);}

.overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.7); z-index: 4;}
.close{ margin: 0 0 20px; transition: .5s ease-in-out; cursor: pointer;}
.close:hover{ transform: rotate(180deg); }
.media{ position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100vh; z-index: 5;}
.media>div{ width: 107vh; height: 60vh; max-width: 100%;}
.embed-container { position: relative; overflow: hidden; max-width: 100%; height: 100%;}
.embed-container iframe,.embed-container object,.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media (max-width:1280px){
	.index_video>div{ max-width: 856px;}
}
@media (max-width:750px){
	.index_video{ padding: 30px 10px;}
	.index_video h3{ margin: 0 auto 10px; line-height: 1.2em; font-size: 3rem;}
	.index_video p{ margin: 0 auto 20px; font-size: 1rem;}
	.index_video_left{ width: 100%;}
	.index_video_right{ width: 100%; flex-direction: row; gap: 10px;}
}
@media (max-width:500px){
	.index_video{ padding: 30px 0;}
	.index_video_left{ max-width: calc(100% + 20px); border-radius: 0;}
	.index_video_left ul.slick-dots li{ height: 3px;}
	.index_video_left button.slick-prev{ right: 104px;}
	.index_video_left button.slick-next{ right: 10px;}
	.index_video_left .slider_counter{ display: none;}
	.index_video_right{ padding: 0 10px;}
	.index_video_right>div::after{ width: 40px; height: 40px;}
}

/*-- 頁腳 --*/
.game_footer{ background: #1e1e23; color: #fff; font-size: 0.875rem; border-top: 5px solid #353539;}
.game_footer>div{ display: flex; max-width: 1300px; margin: 0 auto; padding: 60px 10px;}
.game_footer_left{ margin: 0 30px 0 0; padding: 3px; background: #fff;}
.game_footer_right{ position: relative; display: flex; flex-direction: column; flex: 1; align-items: baseline;}
.game_footer_right i{ display: inline-block; background: #353539; padding: 8px 15px; font-style: normal;}
.game_footer_right span{ position: relative; display: flex; align-items: center; margin: auto 0 0 0; width: 100%; background: #e57b1d;}
.game_footer_right span img{ margin: 0 0 0 auto;}
.game_footer_right span b{ flex: 1; display: block; padding: 8px 15px; background: #353539;}
.game_footer_right span b br{ display: none;}
.footer_social{ position: absolute; top: 0; right: 0;}
.footer_social a{ display: inline-block; width: 55px;}
.footer_social a img{ width: 100%;}
@media (max-width:1080px){
	.game_footer>div{ align-items: flex-start;}
	.game_footer_right span b br{ display: block;}
}
@media (max-width:750px){
	.game_footer>div{ flex-direction: column; align-items: center;}
	.game_footer_left{ margin: 0 auto;}
	.game_footer_left img{ width: 120px;}
	.game_footer_right{ align-items: center; margin: 20px 0 0 0;}
	.game_footer_right span b br{ display: block;}
	.footer_social{ position: static; display: flex; gap: 15px; margin: 20px 0 0 0;}
	.footer_social a{ width: 50px;}
}
@media (max-width:500px){
	.game_footer>div{ padding: 30px 10px;}
}

.gravity_footer{ display: flex; align-items: center; max-width: 1300px; margin: 0 auto; padding: 30px 10px; font-size: 0.875rem; border-top: 1px solid #353539;}
.gravity_footer img{ width: 130px; margin: 0 15px 0 0;}
.gravity_footer a{ padding: 0 15px; color: #fff; text-decoration: none;}
.gravity_footer a+a{ border-left: 1px solid #fff;}
.gravity_footer i{ margin: 0 0 0 auto; color: #fff; font-style: normal; font-size: 0.75rem;}
@media (max-width:1340px){
	.gravity_footer{ margin: 0 10px; padding: 30px 0;}
}
@media (max-width:1080px){
	.gravity_footer{ flex-direction: column;}
	.gravity_footer i{ margin: 10px 0 0 0; text-align: center;}
}
@media (max-width:500px){
	.gravity_footer a{ padding: 0 5px; }
}

/*-- 內頁上方輪播 --*/
.main_slider_bg{ display: flex !important; justify-content: center; min-width: 1300px; overflow: hidden;}
.main_news_slider{ position: relative;}
.main_news_slider ul.slick-dots{ position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); display: flex; margin: 0; padding: 0; width: 1300px; max-width: 100%; list-style: none; background: rgba(255,255,255,0.2);}
.main_news_slider ul.slick-dots li{ flex: 1; height: 10px; text-indent: -9999px; background: #ff9900; cursor: pointer; opacity: 0; transition: .3s;}
.main_news_slider ul.slick-dots li.slick-active{ background: #ff5555; opacity: 1;}
.main_news_slider ul.slick-dots li:not(.slick-active):hover{ background: #ff5555; opacity: 0.6;}
.main_news_slider button.slick-prev{ position: absolute; bottom: 20px; right: 0; margin-right: calc(50% - 544px); width: 34px; height: 34px; background: url(../images/btn-prev.png) center no-repeat rgba(255,255,255,0.8); border: none; text-indent: -9999px; border-radius: 50px; cursor: pointer; z-index: 1;}
.main_news_slider button.slick-next{ position: absolute; bottom: 20px; right: 0; margin-right: calc(50% - 650px); width: 34px; height: 34px; background: url(../images/btn-next.png) center no-repeat rgba(255,255,255,0.8); border: none; text-indent: -9999px; border-radius: 50px; cursor: pointer; z-index: 1;}
.main_news_slider .slider_counter{ position: absolute; bottom: 20px; right: 0; margin-right: calc(50% - 610px); display: flex; align-items: center; justify-content: center; width: 60px; line-height: 34px; color: #ff5555; background: rgba(255,255,255,0.8); border-radius: 50px; z-index: 1;}

@media (max-width:1320px){
	.main_slider_bg{ min-width: 100%;}
	.main_slider_bg img{ width: 130%;}
	.main_news_slider button.slick-prev{ right: 116px; margin: 0;}
	.main_news_slider button.slick-next{ right: 10px; margin: 0;}
	.main_news_slider .slider_counter{ right: 50px; margin: 0;}
}
@media (max-width:1080px){
	.main_news_slider{ margin: 70px 0 0 0;}
}
@media (max-width:500px){
	.main_news_slider{ margin: 60px 0 0 0;}
	.main_news_slider ul.slick-dots{ left: 15px; bottom: 5px; width: calc(100% - 30px); transform: translate(0,0);}
	.main_news_slider ul.slick-dots li{ height: 3px;}
	.main_news_slider .slider_counter{ display: none;}
}

/*-- 內頁最新消息 --*/
.main_all{ padding: 60px 0; background: #fff;}
.main_all h3{ margin: 0 auto; max-width: 1300px; font-size: 2.5rem; text-align: center; font-family: 'Helvetica','Noto Sans TC'; font-weight: 600;}

.news_top{ display: flex; gap: 10px; max-width: 1300px; margin: 60px auto 0; padding: 0 10px;}
.news_tabs{ display: flex; flex: 1; border-bottom: 3px solid #333;}
.news_tabs i{ display: flex; align-items: center; justify-content: center; flex: 1; font-style: normal; font-size: 1.125rem; border: 1px solid #aaa; border-bottom: 0; cursor: pointer; transition: .3s;}
.news_tabs i+i{ border-left: 0;}
.news_tabs i:not(.active):hover{ flex: 1.5;}
.news_tabs i.active{ background: #333; color: #fff; border: 1px solid #333;}
.search{ display: flex; justify-content: flex-end; position: relative; height: 60px; border: 1px solid #aaa; flex: 0.5;}
.search img.submin{ position: absolute; top: 0; right: 0; cursor: pointer; transition: .3s; opacity: 0;}
.search img.submin:hover{ opacity: 1;}
.search input{ width: calc(100% - 60px); padding: 0 10px; box-sizing: border-box; font-size: 1.125rem;}

.news_list{ max-width: 1300px; padding: 0 10px; margin: 30px auto;}
.news_list a{ display: flex; align-items: center; padding: 0 20px; color: #222; border-bottom: 1px solid #ffeeee; transition: .3s;}
.news_list a:nth-of-type(1){ border-top: 1px solid #ffeeee;}
.news_list a:hover{ background: #f9f9f9;}
.news_list a.sticky{ background: #fff5f5;}
.news_list a.sticky:hover{ background: #f9f9f9;}
.news_list a i{ margin: 0 15px 0 0; padding: 0 5px; font-size: 0.75rem; font-style: normal; border-radius: 2px; color: #fff;}
.news_list a i.announcement{ background: #ff5555;}
.news_list a i.event{ background: #4145ff;}
.news_list a i.odds{ background: #33bb99;}
.news_list a i.system{ background: #ffc210;}
.news_list a p{ flex: 1; margin: 0; line-height: 60px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.news_list a span{ margin: 0 0 0 auto; padding: 0 0 0 10px;}

.path{ display: flex; justify-content: center; text-align: center; transition: .3s;}
.path i:hover{ background: #222;}
.path i{ position: relative; border: 1px solid #eee; cursor: pointer;}
.path i img:nth-of-type(2){ position: absolute; top: 0; left: 0; opacity: 0; transition: .3s;}
.path i:hover img:nth-of-type(2){ opacity: 1;}
.path div{ position: relative; display: flex; margin: 0 5px;}
.path div::after{ position: absolute; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; content: '選擇頁面'; z-index: 1; opacity: 0; pointer-events: none;}
.path div:hover::after{ background: #333; color: #fff; opacity: 1;}
.path div span{ position: absolute; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; border: 1px solid #eee; cursor: pointer; box-sizing: border-box; pointer-events: none;}
.path div:hover span{ opacity: 0;}
.path div select{ width: 114px; border: 1px solid #eee; font-size: 1rem; text-align: center; opacity: 0; cursor: pointer;}
.gift_list .path{ margin: 30px 0 0 0;}

.news_main{ max-width: 1300px; padding: 40px 10px 0; margin: 0 auto;}
.news_title{ margin: 0 0 30px;}
.news_title p{ flex: 1; margin: 0; padding: 0 0 10px; font-size: 1.5rem; line-height: 1.8em; border-bottom: 1px solid #eee;}
.news_date{ display: flex; align-items: center; justify-content: left; margin: 0 0 10px;}
.news_date i{ margin: 0 10px 0 0; padding: 0 5px; font-size: 1rem; font-style: normal; border-radius: 2px; color: #fff;}
.news_date i.announcement{ background: #ff5555;}
.news_date i.event{ background: #4145ff;}
.news_date i.odds{ background: #33bb99;}
.news_edit{ padding: 0 0 30px; line-height: 1.8em; border-bottom: 1px solid #eee;}
.news_edit img{ max-width: 100%;}
.news_main .back{ display: block; margin: 30px auto 0; width: 200px; line-height: 60px; border: 1px solid #eee; text-align: center; color: #000; transition: .3s;}
.news_main .back:hover{ background: #333; color: #fff;}
@media (max-width:750px){
	.main_all{ padding: 30px 0;}
	.news_top{ margin: 30px auto 0;}
	.news_main{ padding: 20px 10px 0;}
	.news_title{ margin: 0 0 10px;}
	.news_edit{ padding: 0 0 20px;}
	.news_main .back{ margin: 20px auto 0;}
}
@media (max-width:500px){
	.search{ height: 45px; flex: 1;}
	.search img{ width: 45px;}
	.search input{ width: calc(100% - 45px);}
	.news_list{ margin: 20px 0; }
	.news_list a{ padding:  0 10px;}
	.news_list a i{ margin: 0 10px 0 0;}
	.news_list a p{ line-height: 45px;}
	.path i img{ width: 45px;}
	.news_title p{ font-size: 1rem;}
	.news_main .back{ line-height: 3em;}
}

/*-- 錯誤頁面 --*/
.ghostring_404{ max-width: 1300px; margin: 0 auto;}
.news_top+.ghostring_404{ margin: 60px auto 0;}
.news_list+.ghostring_404{ margin: 60px auto;}
.ghostring_404 h3{ max-width: 600px; margin: 0 auto 30px;}
.ghostring_404 p{ max-width: 600px; margin: 0 auto 20px; text-align: center;}
.ghostring_404 a{ display: block; margin: 60px auto 0; width: 200px; line-height: 60px; border: 1px solid #eee; text-align: center; color: #000; transition: .3s;}
.ghostring_404 a:hover{ background: #333; color: #fff; }

.ghostring{ display: block; max-width: 400px; margin: 0 auto; animation: 10s ghostring_a infinite linear;}
@keyframes ghostring_a {
    0%,33.3%,66.6%,100%{ transform: translate(0,0); opacity: 1;}
	16.5%,83.1%{ transform: translate(0,15px); opacity: 0;}
	49.8%{ transform: translate(0,-15px); opacity: 1;}
}
.ghostring_s{ display: block; max-width: 400px; margin: 0 auto 30px;}
.ghostring_s b{ display: block; width: 118px; height: 30px; background: #eee; border-radius: 50%; animation: 10s ghostring_c infinite ease-in-out;}
@keyframes ghostring_c {
    0%{ margin-left: 0;}
	45%{ margin-left: calc(100% - 118px);}
	50%{ margin-left: calc(100% - 118px);}
	95%{ margin-left: 0%;}
	100%{ margin-left: 0%;}
}
.ghostring img{ animation: 10s ghostring_b infinite ease-in-out;}
@keyframes ghostring_b {
    0%{ margin-left: 0; transform: scaleX(-1);}
	45%{ margin-left: calc(100% - 118px); transform: scaleX(-1);}
	50%{ margin-left: calc(100% - 118px); transform: scaleX(1);}
	95%{ margin-left: 0%; transform: scaleX(1); opacity: 0;}
	100%{ margin-left: 0%; transform: scaleX(-1); opacity: 1;}
}
@media (max-width:750px){
.ghostring_404{ padding: 0 10px;}
.ghostring_404 a{ line-height: 3em;}
.ghostring{ max-width: 50%;}
.ghostring img{ width: 59px;}
.ghostring_s{ max-width: 50%;}
.ghostring_s b{ width: 59px; height: 15px;}
@keyframes ghostring_c {
    0%{ margin-left: 0;}
	45%{ margin-left: calc(100% - 59px);}
	50%{ margin-left: calc(100% - 59px);}
	95%{ margin-left: 0%;}
	100%{ margin-left: 0%;}
}
@keyframes ghostring_b {
    0%{ margin-left: 0; transform: scaleX(-1);}
	45%{ margin-left: calc(100% - 59px); transform: scaleX(-1);}
	50%{ margin-left: calc(100% - 59px); transform: scaleX(1);}
	95%{ margin-left: 0%; transform: scaleX(1); opacity: 0;}
	100%{ margin-left: 0%; transform: scaleX(-1); opacity: 1;}
}
}
@media (max-width:500px){
	.news_list+.ghostring_404{ margin: 60px auto 20px;}
	.ghostring_404 h3{ margin: 0 auto 10px;}
	.ghostring_404 a{ margin: 20px auto 0;}
}

/*-- 登入註冊 --*/
.member_in{ max-width: 740px; margin: 0 auto; padding: 0 10px; transition: .3s;}
.tips{ margin: 60px 0 0; padding: 40px 60px; background: #eee; text-align: center;}
.tips p{ display: inline-block; margin: 0; text-align: left;}
.tips span{ color: #dc1818;}
.social_btn{ margin: 60px 0 0;}
.social_btn>a{ display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; max-width: 300px; height: 40px; border: 1px solid #dadce0; border-radius: 4px; color: #3c4043; font-size: 14px; transition: .3s; cursor: pointer;}
.social_btn>a:hover{ background: #f8fafe; border: 1px solid #d4e2fb;}
.social_btn>a img{ margin: 0 10px 0 0; width: 20px;}


.member_in center>div>div>div>div{ width: 602px; max-width: 100%; height: 60px; font-size: 1rem;}
.member_in center>div>div>div>div span{ font-family: "Noto Sans TC", "Roboto Condensed", sans-serif !important; font-weight: normal !important; letter-spacing: 1px;}
@media (max-width:750px){
	.tips{ margin: 30px 0; padding: 20px 30px;}
	.social_btn{ margin: 30px 0 0;}
}

/*-- 註冊條款 --*/
.agree{ max-width: 740px; margin: 60px auto 0; padding: 0 10px;}
.agree+.agree{ margin: 40px auto 0;}
.agree .title{ display: flex; align-items: center; margin: 0 0 10px;}
.agree .title i{ display: block; margin: 0 10px 0 0; width: 18px; height: 18px; line-height: 18px; background: #ff9900; border-radius: 50px; text-align: center; font-size: 0.75rem; font-style: normal; color: #fff;}
.agree_info{ padding: 30px; background: #eee; color: #333; line-height: 1.8em; text-align: justify;}
.agree_info>div{ height: 300px; padding: 0 10px 0 0; overflow: auto;}
.agree_info p{ margin: 0 0 20px; text-indent: calc(2em + 2px);}
.agree_info h4{ margin: 0 0 30px; padding: 10px; text-align: center; font-size: 1.125rem; background: #fff;}
.agree_info h5{ margin: 0 0 5px; font-size: 1rem; font-weight: 500;}
.agree_info ul{ margin: 0 0 20px; padding-left: calc(2em + 2px);}
.agree_info ul li+li{ margin: 10px 0 0 0;}
.agree_info ul ul li+li{ margin: 0;}
.agree label{ cursor: pointer; display: flex; align-items: center; justify-content: center; margin: 20px 0 0; padding: 0 10px; line-height: 60px; border: 1px solid #eee; transition: .3s;}
.agree label:hover{ border: 1px solid #ff9900;}
.agree label:has(input:checked){ border: 1px solid #ff9900;}
.agree label input{ display: none;}
.agree label span{ position: relative; display: flex; align-items: center; justify-content: center; margin: 0 5px 0 0; width: 17px; height: 17px; background: #eee; border-radius: 50px;}
.agree label span::before{ position: absolute; content: ''; width: 11px; height: 11px; border-radius: 50px; background: #aaa; transition: .3s;}
.agree label input:checked+span::before{ background: #ff9900;}
.agree_btn{ max-width: 740px; margin: 10px auto 0; padding: 0 10px;}
.confirm_btn{ display: block; padding: 0 10px; line-height: 60px; border: 1px solid #eee; transition: .3s; text-align: center; color: #eee;}
.confirm_btn.active{ background: #ff9900; color: #fff;}
@media (max-width:750px){
	.agree{ margin: 30px auto 0;}
	.agree+.agree{ margin: 30px auto 0;}
	.agree_info{ padding: 10px 20px;}
	.agree_info>div{ padding: 0;}
	.agree label{ margin: 10px 0 0 0; line-height: 3em;}
	.confirm_btn{ line-height: 3em;}
}
@media (max-width:500px){
	.agree_info{ padding: 10px}
	.agree_info>div{ padding: 0 10px 0 0;}
	.agree label span{ width: 12px; height: 12px;}
	.agree label span::before{ width: 8px; height: 8px;}
}

/*-- 會員資料 --*/
.member_info{ max-width: 740px; margin: 60px auto 0; padding: 0 10px;}
.member_form{ display: flex; gap: 40px; margin: 60px 0 0;}
.member_form .member_info_left img{ max-width: 100%;}
.member_form .member_info_left p{ margin: 0; padding: 10px 0; text-align: center;}
.member_form .member_info_left.google p{ background: #f39f9c; color: #a72d29;}
.member_form .member_info_left.apple p{ background: #9f74a6; color: #3e0d47;}
.member_form .member_info_left.facebook p{ background: #b8b388; color: #524e30;}
.member_form .member_info_right{ flex: 1; min-width: 0;}
.member_form .member_info_right h4{ display: flex; align-items: center; margin: 0; font-size: 1rem; line-height: 1em;}
.member_form .member_info_right h4::before{ display: block; content: ''; margin: 0 10px 0 0; width: 5px; height: 16px;}
.member_form .member_info_right h4:not(:nth-of-type(1)){ margin: 30px 0 0 0;}
.member_form .member_info_right.google h4::before{ background: #f39f9c;}
.member_form .member_info_right.apple h4::before{ background: #9f74a6;}
.member_form .member_info_right.facebook h4::before{ background: #b8b388;}
.member_form .member_info_right.voucher h4::before{ background: #dfeefe;}
.member_form .member_info_right h5{ display: flex; margin: 30px 0 0 0; color: #aaa; font-size: 0.875rem; line-height: 1em;}
.member_form .member_info_right b+h5{ margin: 10px 0 0 0;}
.member_form .member_info_right h5 i{ width: 5px; height: 5px; background: #dc1818; border-radius: 10px;}
.member_form .member_info_right p{ display: flex; align-items: center; gap: 10px; margin: 15px 0 0 0; padding: 0 0 10px; border-bottom: 1px solid #eee;}
.member_form .member_info_right p i{ padding: 3px 8px; font-style: normal; font-size: 0.875rem; background: #eee;}
.member_form .member_info_right p i.on{ background: #c6ffe1;}
.member_form .member_info_right p span{ padding: 3px 8px; font-style: normal; font-size: 0.875rem; border: 1px solid #eee; cursor: pointer;}
.member_form .member_info_right p input{ flex: 1; font-size: 1rem; min-width: 0;}
.member_form .member_info_right p select{ font-size: 1rem; cursor: pointer;}
.member_form .member_info_right b{ display: block; margin: 5px 0 0 0; font-weight: normal; font-size: 0.75rem; text-align: right; color: #dc1818;}
.member_form .member_info_right>a{ display: block; margin: 30px 0 0 0; padding: 0 10px; line-height: 60px; border: 1px solid #eee; transition: .3s; text-align: center; color: #000;}
.member_form .member_info_right>a:hover{ background: #333; color: #fff;}
@media (max-width:750px){
	.member_info{ margin: 30px 0 0 0;}
	.member_form{ flex-direction: column; align-items: center; margin: 30px 0 0 0;}
	.member_form .member_info_left{ max-width: 100%;}
	.member_form .member_info_right{ width: 100%;}
	.member_form .member_info_right h5{ margin: 20px 0 0 0;}
	.member_form .member_info_right p{ margin: 10px 0 0 0;}
	.member_form .member_info_right>a{ margin: 20px 0 0 0; line-height: 3em;}
}

/*-- 世界觀 --*/
.main_all.gameintro{ display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 10px; height: 100vh; background: url(../images/intro_bg.webp) center no-repeat; background-size: cover;}
.gameintro h3{ margin: 0 auto 20px; max-width: 1300px; font-size: 3.75rem; text-align: center; color: #fff; font-family: 'Helvetica', 'Arial'; font-weight: 600;}
.gameintro h3 span{ display: block; padding: 5px 0 0 0; font-size: 1.25rem; border-top: 1px solid rgba(255,255,255,0.2);}
.gameintro p{ margin: 0 auto 120px; max-width: 1300px; font-size: 1.25rem; text-align: center; color: #fff;}
@media (max-width:750px){
	.gameintro h3{ margin: 0 auto 10px; font-size: 3rem;}
	.gameintro p{ margin: 0 auto 60px; font-size: 1rem;}
}

/*-- 遊戲特色 --*/
.main_all.gamefeature{ display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 80vh 10px 0; background: url(../images/feature_bg.webp) center top no-repeat; background-size: cover; background-color: #7fc6dc;}
.gamefeature article{ display: flex; justify-content: center; border-radius: 20px; overflow: hidden;}
.gamefeature article+article{ margin: 60px 0 0 0;}
.gamefeature article:last-child{ margin: 60px 0 120px;}
.gamefeature article img{ width: 64%;}
.gamefeature div{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 440px; padding: 0 10px; background: linear-gradient(to top left, #354d6e, #4873af); box-sizing: border-box;}
.gamefeature h3{ margin: 0 auto 20px; font-size: 3rem; text-align: center; color: #fff; font-family: 'Helvetica', 'Arial'; font-weight: 600;}
.gamefeature p{ margin: 0 auto 0; max-width: 390px; font-size: 1.25rem; text-align: center; color: #fff;}
@media (max-width:1080px){
	.gamefeature article+article{ margin: 20px 0 0 0;}
	.gamefeature article:last-child{ margin: 20px 0 60px;}
	.gamefeature h3{ font-size: 2rem;}
	.gamefeature p{ font-size: 1rem;}
}
@media (max-width:750px){
	.gamefeature article{ flex-direction: column;}
	.gamefeature article img{ width: 100%;}
	.gamefeature div{ width: 100%; padding: 20px 10px;}
	.gamefeature h3{ margin: 0 auto 5px;}
	.gamefeature article:nth-of-type(2) div{ order: 1;}
}
@media (max-width:500px){
	.main_all.gamefeature{ padding: 60vh 10px 0;}
	.gamefeature article:last-child{ margin: 20px 0 30px;}
}

/*-- 職業介紹 --*/
.main_all.jobintro{ position: relative; padding: 0; min-height: 1040px; background: url(../images/job-btn_bg.webp) center no-repeat; background-size: cover;}
.jobintro .job_btn{ display: flex; align-items: center; justify-content: center; gap: 30px; padding: 160px 0 80px;}
.jobintro .job_btn a{ position: relative;}
.jobintro .job_btn a img{ width: 100%;}
.jobintro .job_btn a img:nth-of-type(2){ position: absolute; top: 0; left: 0; opacity: 0; transition: .3s;}
.jobintro .job_btn a:hover img:nth-of-type(2){ opacity: 1;}
.jobintro .job_btn a.active{ animation: job_btn 0.5s ease-in-out forwards; pointer-events: none;}
@keyframes job_btn {
    0%{ transform: translate(0,0px); opacity: 1;}
	100%{ transform: translate(-10px,0); opacity: 0;}
}
@media (max-width:1700px){
	.jobintro .job_btn{ position: relative; width: calc(100% - 60px); left: 30px;}
}
@media (max-width:1400px){
	.jobintro .job_btn{ position: relative; width: calc(100% - 100px); left: 50px;}
}
@media (max-width:1180px){
	.jobintro .job_btn{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 50%; left: 0; margin: 0 auto; padding: 90px 0 0 0;}
}
@media (max-width:1024px){
	/* .jobintro .job_btn{ flex-wrap: wrap;} */
}
@media (max-width:500px){
	.jobintro .job_btn{ gap: 5px; padding: 90px 0 0;}
}

.jobintro .main_job_container{ position: relative; width: 100%; margin: 0 auto; height: 0; opacity: 0; overflow-y: hidden;}
.main_job_container.active{ position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); height: 1040px; animation: main_job_container 0.3s ease-in-out forwards; animation-delay: 0.8s;}
@keyframes main_job_container {
    0%{ opacity: 0;}
	100%{ opacity: 1;}
}

.job_content{ position: relative; height: 1040px; overflow: hidden;}
.job_content .job_name{ position: absolute; bottom: 13%; max-width: 100%;}
.job_content .job_kv{ position: absolute; left: 50%; transform: translate(-80%,0); background: url(../images/magiccircle.png) center no-repeat; background-size: contain;}
.job_content .fog{ position: absolute; width: 100%; bottom: 0; left: 0; z-index: 4;}
.job_content article{ position: absolute; top: 240px; right: 50%; transform: translate(140%,0); max-width: 460px; text-align: center; color: #fff; z-index: 5;}
.job_content article h4{ display: inline-flex; align-items: center; background: #222; margin: 0 0 30px; padding: 5px 20px; font-size: 1.5rem; line-height: 1em; border-radius: 50px;}
.job_content article h4 img{ margin: 0 10px 0 0; height: 36px; border-radius: 50px; background: #fff;}
.job_content article h3{ margin: 0 0 10px; font-size: 3.75rem; line-height: 1em; color: #222;}
.job_content article span{ font-size: 1.5rem; line-height: 1em; color: #222;}
.job_content article p{ padding: 15px 30px; background: rgba(255,255,255,0.7); text-align: left; font-size: 1rem; line-height: 1.8rem; color: #222; border-radius: 20px;}
.job_content article>div{ display: flex; justify-content: space-between; margin: 40px 0;}

.job_close{ position: absolute; top: 120px; right: 5%; background: rgba(255,255,255,0.7); border-radius: 100px; z-index: 1; cursor: pointer; transition: .3s; opacity: 0; pointer-events: none;}
.job_close:hover{ background: #fff;}
.job_close.active{ animation: main_job_container 0.3s ease-in-out forwards; animation-delay: 0.8s; pointer-events: visible;}
.job_close img{ width: 100%;}
.main_job_slider .slick-prev{ position: absolute; top: 50%; left: 5%; transform: translate(0, -50%); width: 120px; height: 120px; background: url(../images/arr_prev_1.webp) no-repeat center rgba(255,255,255,0.7); background-size: contain; border-radius: 100px; text-indent: -9999px; border: none; z-index: 1; cursor: pointer; transition: .3s;}
.main_job_slider .slick-next{ position: absolute; top: 50%; right: 5%; transform: translate(0, -50%); width: 120px; height: 120px; background: url(../images/arr_next_1.webp) no-repeat center rgba(255,255,255,0.7); background-size: contain; border-radius: 100px; text-indent: -9999px; border: none; z-index: 1; cursor: pointer; transition: .3s;}
.main_job_slider .slick-prev:hover, .main_job_slider .slick-next:hover{ background-color: #fff;}
@media (max-width:1600px){
	.job_content .job_name{ bottom: 5%;}
	.job_content .job_kv{ transform: translate(-70%,0);}
	.job_content article{ transform: translate(120%, 0);}
}
@media (max-width:1400px){
	.job_content .job_kv{ top: 50%; transform: translate(-80%, -50%); width: 70%;}
	.job_content article{ transform: translate(120%, 0);}
	.main_job_slider .slick-prev{ width: 80px; height: 80px;}
	.main_job_slider .slick-next{ width: 80px; height: 80px;}

	.job_close{ width: 80px;}
}
@media (max-width:1180px){
	.job_content .job_name{ bottom: unset; top: 110px;}
	.job_content .job_kv{ position: relative; width: 80%; left: 10%; top: 5%; transform: translate(0,0);}
	.job_content article{ transform: translate(50%, 0); top: unset; bottom: 0; right: 50%; max-width: calc(100% - 40px); width: calc(100% - 40px); z-index: 6;}
	.job_content article>div{ display: none;}
	.job_close{ top: 90px; right: 20px;}
	.main_job_slider .slick-prev{ left: 20px;}
	.main_job_slider .slick-next{ right: 20px;}
}
@media (max-width:1024px){
	.jobintro .job_btn{ display: grid; grid-template-columns: repeat(2, 1fr); width: 40%; margin: 0 auto; left: 0;}
	.job_content article{ width: 60%; max-width: 60%;}
	.job_content article>div{ display: flex; justify-content: center; gap: 10px; margin: 20px 0;}
	.job_content article>div img{ width: 80px;}
}
@media (max-width:600px){
	.jobintro .job_btn{ width: 60%;}
	.job_content .job_kv{ width: 120%; left: 50%; transform: translate(-50%, 0);}
	.job_content article{ width: calc(100% - 40px); max-width: calc(100% - 40px);}
	.job_close{ width: 40px;}
	.main_job_slider .slick-prev{ width: 40px; height: 40px;}
	.main_job_slider .slick-next{ width: 40px; height: 40px;}
}
@media (max-width:500px){
	.main_all.jobintro{ min-height: 900px;}
	.job_content{ height: 900px;}
	.job_content .job_name{ top: 80px;}
	.job_content .job_kv{ width: 125%;}
	.job_close{ top: 80px;}
}

/*-- 管理規章 --*/
.regulation section{ max-width: 1300px; padding: 0 10px; margin: 60px auto 0;}
.regulation section article+article{ margin: 30px 0 0 0;}
.regulation section h4{ margin: 0 0 30px; color: #ff5555; font-size: 1.25rem;}
.regulation section p{ margin: 0 0 0 20px; padding: 0 0 0 20px; border-left: 1px solid #ccc; line-height: 1.8em;}
.regulation section p.gery{ color: #999;}
.regulation section h5{ display: flex; align-items: center; margin: 0 0 20px; font-size: 1rem;}
.regulation section h5 i{ display: inline-flex; justify-content: center; align-items: center; margin: 0 10px 0 0; width: 18px; height: 18px; font-size: 0.875rem; border-radius: 50px; background: #222; color: #fff; font-style: normal; line-height: 1em;}
.regulation section h5 span{ flex: 1;}
.regulation section .penalty{ display: flex; margin: 20px 0 0 20px; padding: 20px 0; background: #f9f9f9; border-radius: 20px;}
.regulation section .penalty div{ flex: 1; padding: 0 20px;}
.regulation section .penalty div i{ display: inline-block; margin: 0 0 10px; padding: 5px 15px; font-size: 0.875rem; font-style: normal; color: #999; background: #fff; border-radius: 50px;}
.regulation section .penalty div span{ display: block; line-height: 1.8em;}
/* .regulation section .penalty div span b{ background: linear-gradient( transparent 0%, transparent 50%, #fff666 50%, #fff666 100%);} */
.regulation section .penalty div+div{ border-left: 1px dashed #ccc;}
@media (max-width:750px){
	.regulation section{ margin: 30px auto 0;}
	.regulation section article+article{ margin: 10px 0 0 0;}
	.regulation section h4{ margin: 0 0 10px;}
	.regulation section h5{ margin: 0 0 10px;}
	.regulation section .penalty{ margin: 10px 0 0 20px; padding: 10px 0;}
	.regulation section .penalty div i{ margin: 0 0 05px; width: 100%; box-sizing: border-box; text-align: center;}
}

/*-- FAQ+1:1 --*/
.inquiry{ max-width: 1300px; padding: 0 10px; margin: 60px auto 0;}
.inquiry iframe{ width: 100%; height: 1000px; border: none;}
@media (max-width:750px){
	.inquiry{ margin: 30px auto 0;}
	.inquiry iframe{ height: 200vw;}
}

/*-- 儲值專區 --*/
.redeem{ max-width: 740px; margin: 0 auto; padding: 0 10px;}
.redeem .redeem_list{ display: flex; flex-wrap: wrap; gap: 20px; margin: 60px 0 0 0; padding: 0 0 30px; border-bottom: 1px solid #eee;}
.redeem .redeem_item{ display: flex; flex-direction: column; width: calc((100% - 60px)/4);}
.redeem_item label{ position: relative; display: flex; flex-direction: column; flex: 1; background: #ffeeee; cursor: pointer; border: 1px solid #ffeeee; transition: .3s;}
.redeem_item label:hover{ border: 1px solid #ffd6e5; box-shadow: inset 0 0 10px 5px #fff;}
.redeem_item i{ position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; background: #ffdede; border-radius: 50px; transition: .3s;}
.redeem_item .order_static{ position: absolute; top: -7px; right: -9px; pointer-events: none; opacity: 0; transition: .3s;}
.redeem_item b{ margin: auto 10px 10px; padding: 7px 0; background: #fff; color: #ff5555; font-weight: normal; text-align: center; font-size: 0.875rem;}
.redeem_item span{ padding: 12.5px 0; background: #ff5555; color: #fff; text-align: center; line-height: 1.2rem; font-size: 0.875rem; transition: .3s;}
.redeem_item p{ margin: 15px 0; text-align: center;}
.redeem_item label:has(input:checked){ background: #ddeeff; border: 1px solid #ddeeff;}
.redeem_item label:has(input:checked) i{ background: #fff;}
.redeem_item label:has(input:checked) .order_static{ opacity: 1;}
.redeem_item label:has(input:checked) span{ background: #66aaff;}

.redeem .next{ display: block; margin: 30px auto 0; width: 200px; line-height: 60px; border: 1px solid #eee; text-align: center; color: #000; transition: .3s;}
.redeem .next:hover{ background: #333; color: #fff;}

.confirmation{ display: flex; gap: 40px; align-items: flex-start; margin: 60px 0 0 0;}
.confirmation_info_left{ position: relative; background: #ddeeff;}
.confirmation.fail .confirmation_info_left{ background: #ffeeee;}
.confirmation_info_left img{ max-width: 100%;}
.confirmation_info_left i{ position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; background: #fff; border-radius: 50px;}
.confirmation_info_left .order_static{ position: absolute; top: -7px; right: -9px; pointer-events: none;}
.confirmation_info_right{ flex: 1;}
.confirmation_info_right h4{ display: flex; align-items: center; margin: 0; font-size: 1rem; line-height: 1em;}
.confirmation_info_right h4::before{ display: block; content: ''; margin: 0 10px 0 0; width: 5px; height: 16px; background: #ddeeff;}
.confirmation.fail .confirmation_info_right h4::before{ background: #ffeeee;}
.confirmation_info_right h5{ display: flex; margin: 30px 0 0 0; color: #aaa; font-size: 0.875rem; line-height: 1em;}
.confirmation_info_right p{ display: flex; align-items: center; gap: 10px; margin: 15px 0 0 0; padding: 0 0 10px; border-bottom: 1px solid #eee;}
.redeem .confirmation_info_right .next{ width: 100%;}

.redeem .payment{ margin: 60px 0 0 0; padding: 0 0 30px;}
.redeem .payment h4{ display: flex; align-items: center; margin: 0; font-size: 1rem; line-height: 1em;}
.redeem .payment h4::before{ display: block; content: ''; margin: 0 10px 0 0; width: 5px; height: 16px; background: #ddeeff;}
.redeem .payment h4:not(:nth-of-type(1)){ margin: 30px 0 0 0;}
.redeem .payment h5{ display: flex; margin: 30px 0 0 0; color: #aaa; font-size: 0.875rem; line-height: 1em;}
.redeem .payment p{ display: flex; align-items: center; gap: 10px; margin: 15px 0 0 0; padding: 0 0 10px; border-bottom: 1px solid #eee;}
.redeem .payment div{ display: flex; gap: 20px; flex-wrap: wrap; margin: 30px 0 0 0;}
.redeem .payment label{ width: calc((100% - 40px) / 3); cursor: pointer; border: 1px solid #eee; box-sizing: border-box; transition: .3s;}
.redeem .payment label input{ display: none;}
.redeem .payment label img{ max-width: 100%;}
.redeem .payment label span{ display: block; padding: 8px 0; background: #eee; font-size: 0.875rem; text-align: center; transition: .3s;}
.redeem .payment label:hover{ border: 1px solid #ddeeff;}
.redeem .payment label:hover span{ background: #ddeeff;}
.redeem .payment label:has(input:checked){ border: 1px solid #ddeeff;}
.redeem .payment label:has(input:checked) span{ background: #ddeeff;}

@media (max-width:750px){
	.redeem .redeem_list{ margin: 30px 0 0 0;}
	.redeem .redeem_item{ width: calc((100% - 40px)/3);}
	.redeem .next{ margin: 20px auto 0;}

	.confirmation{ flex-direction: column; align-items: center; margin: 30px 0 0 0;}
	.confirmation_info_right{ width: 100%;}
	.confirmation_info_right h5{ margin: 20px 0 0 0;}
	.confirmation_info_right p{ margin: 10px 0 0 0;}

	.redeem .payment{ margin: 30px 0 0 0;}
	.redeem .payment h5{ margin: 20px 0 0 0;}
	.redeem .payment p{ margin: 10px 0 0 0;}
}
@media (max-width:500px){
	.redeem .redeem_list{ gap: 10px;}
	.redeem .redeem_item{ width: calc((100% - 20px)/3);}
	.redeem_item i{ width: 30px; height: 30px;}
	.redeem_item .order_static{ width: 40px;}
	.redeem_item b{ margin: auto 5px 5px;}
	.redeem_item span{ padding: 10px 0;}
	.redeem .next{ line-height: 3em;}

	.confirmation_info_left i{ width: 30px; height: 30px;}
	.confirmation_info_left .order_static{ width: 40px;}

	.redeem .payment div{ margin: 20px 0 0 0; gap: 10px;}
	.redeem .payment label{ width: calc((100% - 20px) / 3);}
}

.redeem .lazyporing{ margin: 60px 0 0;}
.redeem .lazyporing img{ position: relative; margin: 0 auto; animation: 3s lazyporing infinite ease-in-out; transform-origin: bottom center; z-index: 1;}
.redeem>p{ text-align: center;}
@keyframes lazyporing {
    0%{ transform: scale(1,1);}
	50%{ transform: scale(1.1,0.9);}
	100%{ transform: scale(1,1);}
}
.redeem .lazyporing b{ display: block; margin: 0 auto; width: 156px; height: 30px; background: #eee; border-radius: 50%; transform: translate(0, -17px); animation: 3s lazyporing_shadow infinite ease-in-out;}
@keyframes lazyporing_shadow {
    0%{ width: 130px; transform: translate(0, -20px); background: #eee;}
	50%{ width: 156px; transform: translate(0, -25px); background: #ddd;}
	100%{ width: 130px; transform: translate(0, -20px); background: #eee;}
}
@media (max-width:750px){
	.redeem .lazyporing{ margin: 30px 0 0;}
	.redeem .lazyporing img{ width: 77px;}
	.redeem .lazyporing b{ height: 15px;}
	@keyframes lazyporing_shadow {
		0%{ width: 70px; transform: translate(0, -9px); background: #eee;}
		50%{ width: 77px; transform: translate(0, -12px); background: #ddd;}
		100%{ width: 70px; transform: translate(0, -9px); background: #eee;}
	}
}


/*-- 遊戲啟動 --*/
.gamestart{ max-width: 1300px; margin: 0 auto;}
.gamestart h3{ max-width: 600px; margin: 0 auto 30px;}
.gamestart p{ max-width: 600px; margin: 0 auto 20px; text-align: center;}
.gamestart a{ display: block; margin: 60px auto 0; width: 200px; line-height: 60px; border: 1px solid #eee; text-align: center; color: #000; transition: .3s;}
.gamestart a:hover{ background: #333; color: #fff; }

.playporing{ position: relative; margin: 0 auto 40px; width: 170px;}
.playporing img{ position: absolute; top: 0; left: 0; max-width: 100%; transform-origin: center bottom;}
.playporing img.deviling{ position: relative; animation: 1s deviling infinite ease-in-out;}
@keyframes deviling {
	0%{ transform: scale(1, 1);}
	40%{ transform: scale(1, 1);}
	50%{ transform: scale(1.05, 0.95);}
	60%{ transform: scale(1, 1);}
	100%{ transform: scale(1, 1);}
}
.playporing img.gamepad{ animation: 1s gamepad infinite ease-in-out;}
@keyframes gamepad {
	0%{ transform: translate(0,-20px);}
	30%{ transform: translate(0,-15px);}
	50%{ transform: translate(0,0);}
	70%{ transform: translate(0,-15px);}
	100%{ transform: translate(0,-20px);}
}
@media (max-width:750px){
	.gamestart a{ line-height: 3em;}
	.playporing{ width: 100px; margin: 20px auto;}
}
@media (max-width:500px){
	.gamestart h3{ margin: 0 auto 10px;}
	.gamestart a{  margin: 20px auto 0;}
}


/*-- 我的禮包 --*/
.gift_list{ max-width: 740px; margin: 60px auto 0; padding: 0 10px;}
.gift_list article{ margin: 60px 0 0; padding: 5px; background: #ffeeee; box-sizing: border-box;}
.gift_list article.expired{ background: #eee;}
.gift_list article+article{ margin: 20px 0 0;}
.gift_list article:nth-of-type(even){ background: #ddeeff;}
.gift_list article.expired:nth-of-type(even){ background: #eee;}
.gift_list article>div{ display: flex; align-items: center; padding: 15px; border: 1px dashed #fff;}
.gift_list article i{ background: url(../images/gift_icon01.png) no-repeat center; background-size: contain;}
.gift_list article:nth-of-type(even) i{ background: url(../images/gift_icon02.png) no-repeat center;}
.gift_list article i img{ opacity: 0;}
.gift_list article.expired i img{ opacity: 1; filter: grayscale(100%);}
.gift_list article h4{ margin: 0 30px; max-width: 50%;}
.gift_list article p{ margin: 0; font-size: 0.875rem;}
.gift_list article span{ display: inline-block; padding: 3px 10px; background: #fff; font-size: 0.75rem;}
.gift_list article hr{ margin: 3px 0; height: 1px; border: 0; background: #fff;}
.gift_list article>div>div{ flex: 1; text-align: right;}
.gift_list article a{ display: block; margin: 10px 0 0 auto; padding: 5px 0; max-width: 300px; background: #ffdfdf; color: #000; font-size: 1.125rem; text-align: center; transition: .3s;}
.gift_list article:nth-of-type(even) a{ background: #cde3ff;}
.gift_list article a:hover{ filter: brightness(1.02);}
.gift_list article.expired a{ background: #ccc; cursor: default;}
@media (max-width:750px){
	.gift_list{ margin: 0 auto;}
	.gift_list article{ margin: 30px 0 0 0;}
	.gift_list article h4{ margin: 0 15px;}
}
@media (max-width:500px){
	.gift_list article+article{ margin: 10px 0 0;}
	.gift_list article>div{ flex-wrap: wrap;}
	.gift_list article i img{ width: 40px;}
	.gift_list article h4{ margin: 0 0 0 15px; max-width: max-content; flex: 1;}
	.gift_list article p{ display: flex; justify-content: space-between; align-items: center;}
	.gift_list article p br{ display: none;}
	.gift_list article hr{ display: none;}
	.gift_list article>div>div{ display: flex; flex-direction: column; flex: auto; width: 100%; border-top: 1px solid #fff; margin: 10px 0 0 0; padding: 10px 0 0 0;}
	.gift_list article a{ max-width: 100%; width: 100%;}
}


/*-- 注意事項 --*/
.notice{ margin: 60px 0 -60px; padding: 40px 0; background: #eee;}
.notice ol{ max-width: 1320px; margin: 0 auto; padding: 0 10px 0 35px; box-sizing: border-box;}
.notice ol li+li{ margin: 5px 0 0 0;}
@media (max-width:750px){
	.notice{ margin: 30px 0 -30px;}
}

/*-- 驗證 --*/
.recaptcha{ margin: 20px 0 0 0; font-size: 0.875rem; text-align: center;}