@charset "UTF-8";

*{ font-family: "Noto Serif TC", "Roboto Condensed", "Noto Sans TC", "微軟正黑體", sans-serif; letter-spacing: 1px; font-weight: normal;}
::selection {
	background: #323848;
	color: #c3b3a3;
}
html{ margin: 0; padding: 0;}
body{ margin: 0; padding: 0; background: #f2f2f2; overflow-x: hidden;}
img{ display: block;}
a{ text-decoration: none;}
a.text{ position: relative; margin: 0 0 0 5px; padding: 2px 5px 2px 22px; color: #a13838; text-decoration: none; background: #fff; font-size: 0.75rem;}
a.text::before{ position: absolute; top: 3px; left: 7px; display: block; content: ""; width: 13px; height: 13px; background: url(../images/icon_link.png); background-size: contain;}

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

/* ::-webkit-scrollbar { width: 5px; background-color: transparent;}
::-webkit-scrollbar-thumb { background-color: #160732;} */

footer{ background: #323848;}

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


.kv{ position: relative; max-width: 2000px; margin: 0 auto; background: url(../images/kvbg.jpg) center top no-repeat; background-color: #050706;}
.kv .fornt{ position: relative; width: 100%; background: url(../images/kv.png) center top no-repeat; z-index: 2;}
.kv .fornt img{ margin: 0 auto; max-width: 100%;}
.kv_m{ display: none;}
.kv .fornt a{ position: absolute; top: 20%; left: calc( 50% + 260px); display: block;}

.kv .snow{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.kv .snow span{ position: absolute; display: inline-block; width: 10px; height: 10px; background: #fff; border-radius: 50%; box-shadow: 0px 0px 10px 0px #fff; opacity: 0;}
@keyframes snowani {
    0%{ top: 60%; opacity: 0;}
	30%{ top: 40%; opacity: 1;}
	70%{ top: 20%; opacity: 1;}
	100%{ top: 0%; opacity: 0;}
}
.kv .snow span:nth-of-type(1){ left: 8%; animation-delay: 0s; transform: scale(0.8); animation: snowani 11s infinite linear;}
.kv .snow span:nth-of-type(2){ left: 10%; animation-delay: 0.5s; transform: scale(1); animation: snowani 12s infinite linear;}
.kv .snow span:nth-of-type(3){ left: 12%; animation-delay: 0.4s; transform: scale(0.9); animation: snowani 8s infinite linear;}
.kv .snow span:nth-of-type(4){ left: 30%; animation-delay: 0.3s; transform: scale(0.5); animation: snowani 14s infinite linear;}
.kv .snow span:nth-of-type(5){ left: 58%; animation-delay: 0s; transform: scale(0.7); animation: snowani 9s infinite linear;}
.kv .snow span:nth-of-type(6){ left: 70%; animation-delay: 0.7s; transform: scale(1); animation: snowani 13s infinite linear;}
.kv .snow span:nth-of-type(7){ left: 82%; animation-delay: 1.2s; transform: scale(1.1); animation: snowani 15s infinite linear;}
.kv .snow span:nth-of-type(8){ left: 90%; animation-delay: 1.5s; transform: scale(1.5); animation: snowani 10s infinite linear;}

@media (max-width:1440px){
.kv{ background-size: 138.888%;}
.kv .fornt{ background: none;}
.kv .fornt a{ top: 20%; left: 68%; width: 24.305%;}
}
@media (max-width:600px){
.kv_mid{ display: none;}
.kv_m{ display: block;}
.kv .fornt a{ top: 0; left: 22%; width: 53.305%;}
}

.nav{ margin: 0 0 120px; padding: 0 0 30px; background: linear-gradient(to top, #ede8e2, #f3f2f1);}
.nav ul{ display: flex; gap: 10px; justify-content: center; max-width: 1440px; margin: 0 auto; padding: 0; list-style: none;}
.nav ul li{ margin: 0; padding: 0; cursor: pointer;}
.nav ul li:nth-of-type(1){ background: url(../images/nav01_a.png) top center no-repeat; background-size: contain;}
.nav ul li:nth-of-type(2){ background: url(../images/nav02_a.png) top center no-repeat; background-size: contain;}
.nav ul li:nth-of-type(3){ background: url(../images/nav03_a.png) top center no-repeat; background-size: contain;}
.nav ul li:nth-of-type(4){ background: url(../images/nav04_a.png) top center no-repeat; background-size: contain;}
.nav ul li img{ max-width: 100%; opacity: 0; transition: .3s;}
.nav ul li:hover img{ opacity: 1;}
@media (max-width:1440px){
.nav ul{ gap: 5px; padding: 0 10px;}
}
@media (max-width:1025px){
.nav{ margin: 0 0 70px; padding: 0 0 10px;}
}

.content{ position: relative; max-width: 1270px; margin: 0 auto;}
.content_top{ height: 5px; background: url(../images/container_top.png) center top repeat-x;}
.content_btm{ height: 5px; background: url(../images/container_btm.png) center top repeat-x;}

.preorder{ padding: 25px; background: url(../images/container_mid.jpg); background-size: cover;}
.preorder>div{ position: relative; background: url(../images/container_mid_01.jpg) center no-repeat; background-size: cover; border: 1px solid #c3b3a3; box-shadow: rgba(177, 154, 130, 0.5) 3px 3px 60px 0px inset; text-align: center;}
.preorder>div.nobg{ padding: 30px 0; background: none;}
.update{ padding: 25px; background: url(../images/container_mid.jpg); background-size: cover;}
.update>div{ position: relative; background: url(../images/container_mid_02.jpg) center no-repeat; background-size: cover; border: 1px solid #c3b3a3; box-shadow: rgba(177, 154, 130, 0.5) 3px 3px 60px 0px inset; text-align: center;}
.update>div.nobg{ padding: 40px 0; background: none;}
.container_mid_shadow{ position: absolute; width: 100%; height: 100%; background: url(../images/container_mid_shadow.png) center top repeat-y; background-size: contain;}
.info{ position: relative; margin: -90px 0 0 0; z-index: 2;}
.info .title{ max-width: 100%; margin: 0 auto;}
.info .tips{ margin: 10px 0 60px 0;}
.info .tips span{ display: inline-flex; align-items: center; padding: 0 10px; height: 30px; background: #a83335; color: #fff; font-size: 0.875rem; line-height: 0.875rem;}
.info .tips span b{ display: inline-block; margin: 0 5px 0 0; width: 14px; height: 14px; background: #fff; border-radius: 50px; color: #a83335; font-size: 0.75rem; line-height: 14px;}
.info p{ margin: 0; color: #323848;}
.info p.turtle_info{ max-width: 600px; margin: 60px auto 20px; line-height: 1.8rem;}
.turtle_01{ max-width: 100%; margin: 0 auto;}

.login{ margin: 40px 0 0 0;}
.login p{ color: #a83335;}
.login ul{ display: flex; justify-content: space-around; margin: 20px 0 0 0; padding: 0; list-style: none;}
.login ul li{ position: relative; display: flex; justify-content: center; align-items: center; width: 25%; height: 160px; margin: 0; padding: 0; color: #fff; background: rgba(147,131,115,0.5); cursor: pointer; transition: .3s;}
.login ul li::after{ position: absolute; left: 10%; bottom: 10px; display: block; width: 80%; height: 1px; content: ''; background: #938373;  transition: .8s;}
.login ul li:hover{ background: rgba(147,131,115,1);}
.login ul li:hover::after{ background: #fff;}
.login ul li a{ color: #fff;}
.login ul li span{ display: inline-block; letter-spacing: 10px; transform: translate(5px,0); transition: .8s;}
.login ul li:hover span{ transform: translate(5px,-10px);}
.login ul li span i{ font-style: normal; font-size: 0.875rem; letter-spacing: 10px;}
.point_assassin{ margin: -100px auto 0; transform: translate(0, 22%); pointer-events: none;}
.point_turtle{ margin: -100px auto 0; transform: translate(0, 22%); pointer-events: none;}

.logout{ margin: 40px 0 0 0;}
.logout ul{ display: flex; justify-content: space-evenly; margin: 20px 0 0 0; padding: 0; list-style: none;}
.logout ul li{ position: relative; display: flex; flex-direction: column; width: 25%; margin: 0; padding: 0; text-align: left;}
.logout ul li:nth-of-type(3){ align-items: center;}
.logout ul i{ margin: 25px 0 0 0;}
.logout select{ padding: 5px 30px 5px 5px; background: rgba(147, 131, 115, 0.5); background-image: url(../images/arrow_select.png); background-position: center right; background-repeat: no-repeat; background-size: contain; border: 1px solid #938373; color: #323848; font-size: 1rem; cursor: pointer; transition: .3s;}
.logout select:hover{ border: 1px solid #a83335; }
.logout b{ margin: 0 0 5px 0; font-size: 0.875rem; color: #a83335;}
.logout select+b{ margin: 10px 0 5px 0;}
.logout a{ box-sizing: border-box;}
.logout .submit{ display: block; width: 100%; margin: 25px 0 10px 0; padding: 5px; color: #323848; background: rgba(147, 131, 115, 0.5); border: 1px solid #938373; text-align: center; transition: .3s;}
.logout .submit:hover{ border: 1px solid #a83335;}
.logout .logout_btn{ color: #a83335; text-align: center; border-bottom: 1px solid #a83335; font-size: 0.875rem;}

i.second_title{ display: block; padding: 20px 0 0; text-align: center; font-style: normal; font-size: 2.25rem; letter-spacing: 50px; transform: translate(25px,0); color: #fff;}

h3{ display: inline-block; margin: 0; padding: 0 20px; font-size: 2.25rem; background-image: linear-gradient(transparent 0% ,transparent 40%, rgba(248,246,244,0.6) 40%, rgba(248,246,244,0.6) 100%); border-bottom: 3px double rgba(248,246,244,0.6); color: #323848;}

.preorder .gift{ display: flex; gap: 10px; align-items: center; justify-content: space-evenly;}
.preorder .gift b{ width: 1px; height: 160px; background: #c3b3a3;}
.preorder .gift img{ max-width: 100%; margin: 0 auto;}
.preorder .gift p{ margin: 20px 0 10px; color: #323848;}
.preorder .gift span{ display: inline-block; margin: auto 0 0 0; padding: 5px 10px; background: rgba(147,131,115,0.5); color: #a83335; font-size: 0.875rem;}

.card{ display: flex; flex-wrap: wrap;}
.card b{ width: 1px; background: #c3b3a3;}
.card .left{ display: flex; justify-content: flex-end; align-content: flex-start; flex-wrap: wrap; gap: 20px; width: 60%; padding: 0 60px; box-sizing: border-box;}
.card .left>div{ width: calc((100% - 60px) / 4);}
.card .left img{ max-width: 100%; margin: 0 0 0 auto; cursor: pointer; filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2)); transition: .3s;}
.card .left img:hover,.card .left img.active{ filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));}
.card .right{ width: calc(40% - 1px); padding: 0 60px; box-sizing: border-box; text-align: left;}
.card .right p{ display: flex; align-items: flex-start; margin: 30px 0 0 0; color: #323848;}
.card .right p+p{ margin: 20px 0 0 0;}
.card .right span{ display: inline-block; margin: 0 10px 0 0; padding: 2px 10px; color: #a83335; background: rgba(147,131,115,0.5); font-size: 0.875rem; white-space: nowrap;}
.card .bottom{ width: 100%; margin: 30px 60px 0;}
.card .bottom p{ display: flex; align-items: flex-start; margin: 0; padding: 30px 40px; color: #323848; background: rgba(248,246,244,0.6); text-align: left;}
.card .bottom span{ display: inline-block; margin: 0 10px 0 0; padding: 2px 20px; color: #a83335; background: rgba(147,131,115,0.5); font-size: 0.875rem; white-space: nowrap;}

@media (max-width:1440px){
.content{ padding: 0 10px;}
.preorder>div.nobg{ padding: 20px 10px;}
.update>div.nobg{ padding: 30px 10px;}
}
@media (max-width:1025px){
i.second_title{ font-size: 1.5rem; letter-spacing: 30px; transform: translate(15px,0);}

.preorder .gift{ margin: 20px 0 0 0;}

.card .left{ gap: 10px; padding: 0 20px; box-sizing: border-box;}
.card .left>div{ width: calc((100% - 30px) / 4);}
.card .right{ padding: 0 20px;}
.card .right p{ margin: 20px 0 0 0;}
.card .right p+p{ margin: 10px 0 0 0;}
.card .bottom{ margin: 20px 20px 0;}
.card .bottom p{ padding: 20px;}
}
@media (max-width:600px){
.preorder>div{ padding: 0 10px;}
.update>div{ padding: 0 10px;}
.container_mid_shadow{ display: none;}
.info .tips{ margin: 10px 0 20px 0;}
.info .tips span{ display: flex;}
.info .tips span+span{ margin: 5px 0 0 0;}
.info p.turtle_info{ margin: 20px auto 10px;}

.login{ margin: 10px 0 0 0;}
.login ul li{ width: 33%; height: 100px; padding: 0 0 40px 0;}
.login ul li span{ letter-spacing: 4px; transform: translate(2px,0);}
.login ul li span i{ letter-spacing: 4px;}

.logout{ margin: 10px 0 0 0;}
.logout ul{ flex-direction: column; margin: 0;}
.logout ul li{ width: 100%;}
.logout ul li:nth-of-type(3){ align-items: flex-end;}
.logout ul i{ display: none;}
.logout b{ margin: 10px 0 2px 0;}
.logout select+b{ margin: 10px 0 2px 0;}
.logout .submit{ padding: 50px 5px;}

.point_assassin{ width: 95px;}
.point_turtle{ width: 130px; margin: -40px auto 0;}

i.second_title{  letter-spacing: 10px; transform: translate(5px,0);}

.preorder .gift{ margin: 10px 0 0 0; align-items: unset; flex-wrap: wrap;}
.preorder .gift div:nth-of-type(1),.preorder .gift div:nth-of-type(2),.preorder .gift div:nth-of-type(3),.preorder .gift div:nth-of-type(4){ display: flex; flex-direction: column; width: calc((100% - 20px) / 3);}
.preorder .gift b{ width: 100%; height: 1px;}
.preorder .gift div:nth-of-type(5){ width: calc(((100% - 20px) / 3) * 2);}
.preorder .gift div:nth-of-type(5) img{ width: 70%;}
.preorder .gift p{ margin: 10px 0 5px;}

.card{ flex-direction: column;}
.card b{ width: 100%; height: 1px;}
.card .left{ justify-content: center; gap: 10px; width: 100%; margin: 0 0 10px; padding: 0;}
.card .right{ width: 100%; margin: 10px 0 0 0; padding: 0;}
.card .bottom{ margin: 20px 0 0;}
.card .bottom p{ flex-direction: column; padding: 10px;}
.card .bottom span{ width: 100%; margin: 0 0 10px 0; padding: 5px 0; text-align: center;}
}


.act{ max-width: 1270px; margin: 60px auto 80px;}
.act img{ max-width: 100%;}
.act>div{ display: flex; flex-wrap: wrap; margin: 20px;}

.act_pic{ width: calc(100% - 360px);}
.act_info{ display: flex; flex-direction: column; width: 340px; margin: 0 0 0 20px; text-align: center;}
.act h2{ margin: 0; font-size: 3.125rem; color: #323848;}
.act b{ display: block; margin: 20px 0 0; padding: 5px 10px; background: #323848; color: #fff; font-weight: normal; font-size: 0.875rem;}
.act i{ display: block; margin: 10px 0 0; padding: 5px 10px; background: #a83335; color: #fff; font-style: normal; font-size: 0.875rem;}
.act p{ margin: 30px 0 0 0; color: #323848; text-align: left;}
.act a{ position: relative; margin: auto 0 0 0; padding: 30px 0; color: #fff; background: rgba(147, 131, 115, 0.5); transition: .3s;}
.act a::after{ position: absolute; left: 10%; bottom: 10px; display: block; width: 80%; height: 1px; content: ''; background: #938373;  transition: .8s;}
.act a:hover{ background: rgba(147,131,115,1);}
.act a:hover::after{ background: #fff;}
.act span{ display: flex; align-items: center; margin: 10px 0 0;}
.act span img{ margin: 0 10px;}
.act sub{ flex: 1; height: 2px; background: #cebe96;}
@media (max-width:1440px){
.act{ padding: 0 10px;}
}
@media (max-width:1025px){
.act>div{ align-items: center; flex-direction: column;}
.act_pic{ width: 80%;}
.act_pic img{ margin: 0 auto;}
.act_info{ width: 80%; margin: 20px 0 0 0;}
.act a{ margin: 20px 0 0 0;}
}
@media (max-width:600px){
.act{ margin: 30px auto}
.act_pic{ width: 100%;}
.act_info{ width: 100%;}
.act p{ margin: 20px 0 0 0;}
}


.note{ display: flex; justify-content: space-between; max-width: 1270px; margin: 60px auto 80px;}
.note .left h2{ margin: 0; font-size: 3.125rem; color: #323848;}
.note .left ol{ padding: 0 0 0 20px;}
.note .left li+li{ padding: 10px 0 0 0;}
.note .right{ display: flex; align-items: flex-end; flex-direction: column;}
.note .right .icon{}
.note .right .social{ display: flex; gap: 8px; margin: auto 0 10px 0;}
.note .right .download{ display: flex; gap: 8px;}
.note .right a{ transition: .3s;}
.note .right a:hover{ filter: brightness(1.3);}
@media (max-width:1440px){
.note{ padding: 0 10px;}
}
@media (max-width:1025px){
.note{ align-items: center; flex-direction: column;}
.note .left h2{ text-align: center;}
.note .right{ justify-content: center; flex-wrap: wrap; flex-direction: row;}
.note .right .icon{ width: 100%; margin: 20px 0 10px 0;}
.note .right .icon img{ margin: 0 auto;}
.note .right .social{ margin: 0 8px 0 0;}
}
@media (max-width:600px){
.note{ margin: 30px 0 40px;}
.note .left{ padding: 0 20px;}
.note .right img{ max-width: 100%;}
.note .right .icon img{ width: 108px;}
.note .right .social{ justify-content: center; width: 100%; margin: 0 0 10px;}
}

.jobs_slider{ position: relative; max-width: 1270px; margin: 100px auto 0;}
.job_pic{ position: relative; z-index: 2;}
.job_pic h3{ position: absolute; top: 0; left: 0; display: inline-block; margin: 0; padding: 0 20px; font-size: 3.75rem; background-image: linear-gradient(transparent 0%, transparent 40%, rgba(229, 224, 219, 1) 40%, rgba(229, 224, 219, 1) 100%); border-bottom: 3px double rgba(229, 224, 219, 1); color: #323848;}
.job_pic p{ position: absolute; bottom: 3%; right: 0; width: 500px; color: #fff; font-size: 1.625rem; line-height: 3rem; text-align: right;}
.job_pic span{ background: #323848; padding: 0 20px;}
.job_pic img{ max-width: 100%;}
.job_name_box{ position: absolute; left: 0; top: 90px; width: 100%;}
.job_name h5{ margin: 0; font-size: 5rem; line-height: 6rem;}
.job_name_box .slick-slide h5{ color: #e5e0db;}
.job_name_box .slick-current h5{ color: #323848;}
.slick-prev{ position: absolute; top: 0; right: 78px; width: 70px; height: 70px; background: url(../images/btn_prev.png); z-index: 3; border: none; cursor: pointer; text-indent: -9999px;}
.slick-next{ position: absolute; top: 0; right: 0px; width: 70px; height: 70px; background: url(../images/btn_next.png); z-index: 3; border: none; cursor: pointer; text-indent: -9999px;}
.slick-prev:hover,.slick-next:hover{ filter: hue-rotate(180deg);}
@media (max-width:1440px){
.jobs_slider{ padding: 0 10px;}
.job_name_box{ left: 10px; width: calc(100% - 20px);}
}
@media (max-width:1270px){
.job_name h5{ font-size: 4.5rem; line-height: 5rem;}
}
@media (max-width:1150px){
.job_name h5{ font-size: 3.8rem; line-height: 4.2rem;}
}
@media (max-width:1025px){
.job_name h5{ font-size: 3.4rem; line-height: 3.95rem;}
}
@media (max-width:920px){
.job_name h5{ font-size: 2.8rem; line-height: 3.1rem;}
}
@media (max-width:790px){
.job_name h5{ font-size: 2.4rem; line-height: 2.65rem;}
}
@media (max-width:700px){
.job_name h5{ font-size: 2rem; line-height: 2.2rem;}
}
@media (max-width:600px){
.jobs_slider{ margin: 30px 0 0 0;}
.job_pic h3{ padding: 0 5px; font-size: 2.25rem;}
.job_pic p{ width: 70%; font-size: 1rem; line-height: 1.6rem;}
.job_name_box{ top: 50px;}
.job_name h5{ font-size: 1.375rem; line-height: 1.5rem;}
.slick-prev{ top: 5px; right: 30px; width: 25px; height: 25px; background-size: contain;}
.slick-next{ top: 5px; right: 0px; width: 25px; height: 25px; background-size: contain;}
}

.silder_btmline{ position: relative; transform: translate(0, -75%); margin: 0 auto 100px; background: url(../images/silder_btmline.png) center no-repeat; z-index: 4;}
.silder_btmline img{ margin: 0 auto; max-width: 100%;}
@media (max-width:1440px){
.silder_btmline{ background: none;}
}
@media (max-width:1025px){
.silder_btmline{ transform: translate(0, -85%);}
}
@media (max-width:600px){
.silder_btmline{ margin: 0 0 70px; transform: translate(0, -100%);}
}


.bg_pic01{ position: absolute; right: 100%; top: 0; transform: translate(20%, -20%); width: 34.72%; pointer-events: none;}
.bg_pic02{ position: absolute; left: 100%; top: 30%; transform: translate(-15%, 0); width: 31.1%; pointer-events: none;}
.bg_pic03{ position: absolute; right: 100%; top: 80%; transform: translate(-12%, 0); width: 29.68%; pointer-events: none;}
.bg_pic04{ position: absolute; right: 100%; top: 70%; transform: translate(0, 0); width: 21.49%; pointer-events: none;}
.bg_pic05{ position: absolute; left: 100%; top: 10%; transform: translate(-20%, 0); width: 30.86%; pointer-events: none;}
.bg_pic06{ position: absolute; left: 100%; top: 55%; transform: translate(10%, 0); width: 29.21%; pointer-events: none;}
.bg_pic07{ position: absolute; right: 100%; top: 80%; transform: translate(10%, 0); width: 30.63%; pointer-events: none;}
.bg_pic08{ position: absolute; left: 100%; top: 125%; transform: translate(15%, 0); width: 22.6%; pointer-events: none;}
@media (max-width:1270px){
.bg_pic01,.bg_pic02,.bg_pic03,.bg_pic04,.bg_pic05,.bg_pic06,.bg_pic07,.bg_pic08{ display: none;}
}