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

@font-face {
font-family: 'Cubic_11';
src: url('../img/Cubic_11_1.000_R.ttf');
font-weight: 400;
font-style: normal;
font-display: swap;
}

body {
font-family: 'Cubic_11', Arial, sans-serif;
}

div,p{transition: all 0.15s linear;}

a, a:active,a:hover { text-decoration: none; color: aqua;}

body{ 
background-color: #000;
font-family: "Huninn", sans-serif,;
}
.bt {text-indent: -999px;overflow: hidden;cursor:pointer;}
[v-cloak]{display: none;}

/********************** load **********************/
.load {
width: 100vw;
height: 100vh;
background: url(../img/loadbg.jpg) no-repeat center top;
background-size: cover;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
z-index: 999;
position: relative;
}
.loadnbg {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
z-index: 999;
position: relative;
}
/*.loadbg {transform: scale(1.1);}*/
.loading p{
color: #fdcb4c;
font: normal 400 2.6rem / 1.5 "Huninn", sans-serif;
text-align: center;
}
.loadseer {
width: 117px;
height: 168px;
background-image: url(../img/loadpic.png);
position: relative;
margin: 1rem auto;
animation-name: oxxo;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: step-start;
}
@keyframes oxxo {
0%   { background-position:0px 0;}
12.5%{ background-position:117px 0;}
25%  { background-position:234px 0;}
37.5%{ background-position:351px 0;}
50%  { background-position:468px 0;}
62.5%{ background-position:585px 0;}
75%  { background-position:702px 0;}
87.5%{ background-position:819px 0;}
100% { background-position:936px 0;}
}
.progress{    
height: 2rem;
border-radius: 1rem;
}
/**********************load_e**********************/

/*********************scroll*********************/
/*scrollbar優化*/
::-webkit-scrollbar { width: 6px;} 
::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, .5); height:5px;} /* 滑軌背景色 */
::-webkit-scrollbar-thumb { background-color: rgba(236,132,41,1);} /* 滑塊顏色 */
::-webkit-scrollbar-button { background-color: rgba(0,0,0,0); height: 10px;} /* 滑軌兩頭監聽按鈕色 */
::-webkit-scrollbar-corner { background-color: black;} /* 橫向滾動條和縱向滾動條相交處尖角的顏色*/
/******************************** btn ********************************/

.btn_massage{
background: url(../img/btn_massage.png) no-repeat top center;
background-size: contain;
width: 173px;
height: 64px;
margin: 0 auto;
filter: drop-shadow(0px 10px 0px rgba(0, 0, 0, 0.3));
}
.btn_login{
background: url(../img/btn_login.png) no-repeat top center;
background-size: contain;
width: 168px;
height: 67px;
margin: 16px auto 0;
filter: drop-shadow(0px 10px 0px rgba(0, 0, 0, 0.2));
}

.btn_massage:hover,.btn_login:hover{ 
cursor: pointer;
transform: scale(.95);
}
.vecode{
border: 0;
width: 118px;
height: 36px;
float: left;
font-size: 2.5rem;
text-align: center;
top: 2px;
position: relative;
font-family: 'Cubic_11';
}
.form-control,.form-control:focus{background-color: #ffffff00;}
/******************************** page01 ********************************/
#section1{ 
background: #000 url(../img/bg_01.jpg) no-repeat top center;
background-size: cover;
}
.kv{
background: url(../img/kv_01.png) no-repeat top center;
background-size: cover;
width: 100vw;
height: 100vh;
z-index: 0;
position: absolute;
top: 0;
}
.bg_massage{
background: url(../img/bg_massage.png) no-repeat top center;
background-size: 100%;
width: 914px;
height: 105px;
margin: 66px auto 0;
padding-top: 60px;
z-index: 1;
position: relative;
}
#inputmiminb,#inputmimifd,#inputmasg{
width: 282px;
height: 43px;
margin: 2px 0 0 136px;
background-color: #ffffff00;
border: none;
font-size: 2.3rem;
color: yellow;
float: left;
font-family: 'Cubic_11';
}
#inputmimifd{	float: right;}
#inputmasg{
margin: 10px 0;
padding: 17px 20px;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
color: #e1e1e1;
font-size: 2.02rem;
text-align: justify;
background-color: #051a2a;
border: 2px solid #3572e4;
}
textarea.form-control.rewards {
min-height: 220px;
}
.black{
background-color: rgb(0 0 0 / 50%);
width: 100vw;
height: 100vh;
z-index: 999;
position: absolute;
top: 0;
padding: 24px;
}
.black .modal-dialog{ transform: translateY(20%);}

.box_login{
background: url(../img/box_login.png) no-repeat top center;
background-size: contain;
height: 520px;
line-height: 1.42;
color: #e1e1e1;
text-align: justify;
font-size: 1.48em;
padding: 190px 71px 0;
}
.box_login .entry{
    background-color: #051a2a;
    left: 118px;
    position: relative;
    margin-bottom: 5px;
    border-radius: 0;
    height: 37px;
    border: 0px;
    width: 236px;
    color: #feff62;
    font-size: 1.8rem;
    top: 1px;
    padding-top: 6px;
    font-family: 'Cubic_11';
}
.form-check-input:checked {
background-color: #0dcaf0;
border-color: #0dcaf0;
}
.form-check-input {
width: 1.2em;
height: 1.2em;
margin-top: 3px;
}
.form-check-label, .mb-2 a {
display: inline-block;
color: #5bfffd !important;
font-size: 1.2rem;
}
.form-check-input[type=checkbox] {
border-radius: 0em;
}
/******************************** page01e ********************************/

/******************************** page02 ********************************/
#section2{ 
background: #000 url(../img/bg_02.jpg) no-repeat top center;
background-size: cover;
}
.msgbox01{
background: url(../img/box_message_01.png) no-repeat top center;
background-size: cover;
width: 100%;
height: 104px;
padding: 48px 35px 0;
}
.msgbox02{
background: url(../img/box_message_02.png) repeat top center;
background-size: contain;
width: 100%;
padding: 0 40px;
font-family: 'Cubic_11';
}
.msgbox03{
background: url(../img/box_message_03.png) no-repeat top center;
background-size: contain;
width: 100%;
height: 110px;
padding: 0 40px;
font-family: 'Cubic_11';
}

.tle{
background: url(../img/tle.png) no-repeat top center;
background-size: contain;
width: 100%;
height: 140px;
margin: 0 auto 10px;
filter: drop-shadow(0px 6px 0px rgba(99, 112, 123, .4));
}
.box{
min-height: 200px;
line-height: 1.2;
color: #e1e1e1;
text-align: justify;
font-size: 1.46em;
}
.prev,.next{
border: none;
color: #80eaff;
font-size: 1.6rem;
font-family: 'Cubic_11';
text-align: center;
left: 0px;
position: relative;
cursor: pointer;
float: left;
bottom: -30px;
}
.next{float: right;}

.msgboxs{
background: url(../img/box_message_s.png) no-repeat top center;
background-size: contain;
width: 24%;
height: 220px;
margin: .5%;
padding: 3%;
font-size: 1.3em;
font-family: 'Cubic_11';
color: #e1e1e1;
cursor: pointer;
filter: drop-shadow(0px 6px 0px rgba(99, 112, 123, .3));
text-align: left;
}
.msgboxs:hover{
transform: scale(1.05);
}
.blockquote{
color: #ffff7b;
font-size: 2.6rem;
margin-bottom: .7rem;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
padding: 25px 14px;
background: url(../img/arrow_right.png) no-repeat center top;
background-size: 100%;
/*animation: moven 2s ease-out infinite;*/
}
@keyframes moven{
0% { opacity: 0; transform: translate(-20px, 0px);}
50% { opacity: 1;}
100% { opacity: 0; transform: translate(0px, 0px);}
}
.carousel-control-prev-icon {
background: url(../img/arrow_left.png) no-repeat center top;
background-size: 100%;
/*animation: movep 2s ease-out infinite;*/
}
@keyframes movep{
0% { opacity: 0; transform: translate(20px, 0px);}
50% { opacity: 1;}
100% { opacity: 0; transform: translate(0px, 0px);}
}

.container.board{
width: 920px;
margin-bottom: 20px;
top: -5vh;
position: relative;
}
.btn {
position: relative;
border: none;
background-color: #051a2a;
color: #80eaff;
font-size: 1.6rem;
padding: 10px 16px;
margin: 14px 4px;
border-radius: 30px;
font-family: 'Cubic_11';
filter: drop-shadow(0px 6px 0px rgba(99, 112, 123, .7));
letter-spacing: 2px;
}
.btn:hover{
color: #f9ff09;
}
.seer{    
background: url(../img/seer.png) no-repeat center top;
background-size: contain;
width: 159px;
height: 290px;
top: 54%;
left: -28%;
position: absolute;
transform-origin: bottom;
animation: movseer 2s ease-out infinite;
}
@keyframes movseer{
0% { transform: scaleY(1)}
50% {  transform: scaleY(.98)}
100% {  transform: scaleY(1)}
}

.nono{
background: url(../img/nono.png) no-repeat center top;
background-size: 100%;
width: 171px;
height: 222px;
top: 6%;
right: -30%;
position: absolute;
transform: scale(.9);
animation: movnono 1s ease-out infinite;
}
@keyframes movnono{
0% { top: 6%;}
50% {  top: 8%;}
100% {  top: 6%;}
}

.remind{
background: url(../img/remind.png) no-repeat center top;
background-size: contain;
width: 140px;
height: 50px;
transform: translateY(-24px);
position: relative;
margin: -26px auto;
animation: movremind 1s ease-out infinite;
}
@keyframes movremind{
0% { transform: translateY(-28px);}
50% {  transform: translateY(-24px);}
100% {  transform: translateY(-28px);}
}
/******************************** page02e ********************************/

/******************************** footer ********************************/


/******************************** lightbox ********************************/
.modal{ margin: 6% 0; }
.form-group {
background-color: #fff0;
margin-bottom: 5px;
}
.modal-backdrop.in {
filter: alpha(opacity=75);
opacity: .8;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0);
}
.modal-content {
position: relative;
background-color: #fff0;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 0px solid #999;
border: 0px solid rgba(0,0,0,.2);
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0,0,0,0);
box-shadow: 0 3px 9px rgba(0,0,0,0);
}
.modal-header {
border-bottom: 0px solid #e5e5e5;
}
.modal-content .close { 
background: url(../img/close.png) no-repeat;
background-size: 100%;
width: 45px;
height: 45px;
top: -3px;
right: -20px;
opacity: 1;
cursor: pointer;
z-index: 9999;
position: absolute;
border: none;
filter: drop-shadow(1px 1px 0px rgba(255, 255, 255, 1));
}
.serialbox00 .form-control,.serialbox01 .form-control{
font-size: 21px;
position: relative;
border-radius: 0;
padding: 0px 7px 0;
font-family: 'Microsoft JhengHei',微軟正黑體;
color: #a5a199;
margin-bottom: 6px;
height: 40px;
border: 0;
}
.serial_btn {
background: url(../images/lightbox_03btn.png) no-repeat center top;
background-size: 100%;
position: relative;
width: 120px;
height: 51px;
top: 150px;
left: 79px;
cursor: pointer;
}
.serial_btn:hover {
-webkit-filter: drop-shadow(0px 0px 10px rgb(15, 128, 254));
filter: drop-shadow(0px 0px 10px rgb(15, 128, 254));
}
.mobi{ display: none;}

.btnf5 {
    width: 25px;
    height: 21px;
    background: url(../img/btn_f5.png) no-repeat center top;
    background-size: cover;
    right: 317px;
    top: 323px;
    position: absolute;
    cursor: pointer;
    z-index: 10;
}
#verify_id{
    width: 100px;
    height: 33px;
    margin: 2px 2px 4px;
    top: -4px;
    left: -8px;
    position: relative;
    font-size: 1.8rem;
    color: #feff62;
    background-color: #061a29;
    font-family: 'Cubic_11';
    padding: 8px;
    border: none;
}
/********************************lightbox********************************/
@media (min-width: 1280px) and (max-width: 1600px){

}
@media only screen and (max-width: 576px){

.load {
background: url(../img/loadbg_m.jpg) no-repeat center top;
background-size: cover;
}
.loadbg { transform: scale(1);}

#section1{ 
background: #000 url(../img/bgm_01.jpg) no-repeat top center;
background-size: cover;
}
#section2{ 
background: #000 url(../img/bgm_02.jpg) no-repeat top center;
background-size: cover;
}	
.kv {
background: url(../img/kvm_01.png) no-repeat top center;
background-size: contain;
width: 100vw;
height: 100vh;
z-index: 0;
position: absolute;
top: 0;
}
.black { padding: 24px;}

.box_login {
background: url(../img/box_login_m.png) no-repeat top center;
background-size: contain;
height: 500px;
line-height: 1.42;
color: #e1e1e1;
text-align: justify;
font-size: 1.48em;
padding: 157px 37px 0;
}

.box_login .entry {
left: 97px;
position: relative;
margin-bottom: 5px;
border-radius: 0;
height: 37px;
border: 0px;
width: 200px;
color: #feff62;
font-size: 1.65rem;
top: 2px;
}	

.vecode { width: 96px;}	
.form-check-label, .mb-2 a { font-size: 1.3rem;}
.btn_login, .btn_Signout{ margin: 8px auto 0; width: 48%;}
	
.bg_massage {
background: url(../img/bg_massage_m.png) no-repeat top center;
background-size: 100%;
width: 100%;
height: 143px;
margin: 0 auto;
padding-top: 46px;

}
.page01_bg{ 
padding: 6%;
transform: translateY(-15%);
}
#inputmiminb, #inputmimifd {
width: 244px;
height: 40px;
margin: 1px 0 9px 120px;
border: none;
font-size: 2rem;
padding-top: 7px;
}	
#inputmimifd { float: none;}	
#inputmasg{
width: 100%;
min-height: 27vh;
font-size: 1.7rem;
padding: 14px 17px;
border: 2px solid #3572e4;
margin: 1% auto 4%;
}
.container.board{width: 100%;}	
.tle {
background: url(../img/tle_m.png) no-repeat top center;
background-size: contain;
width: 100%;
height: 120px;
}
.msgboxs{
height: 96px;
font-size: 0.74em;
line-height: 1.16;
}	
.mobi{ display: flex;}
.modal { margin: 15% 0; padding: 4%;}
.blockquote { font-size: 2.1rem;}
.nono,.seer{ display: none;}
.msgbox01 {
height: 82px;
padding: 36px 35px 0;
}
.msgbox03 {
height: 87px;
padding: 0 40px;
}
.prev,.next{ bottom: -24px;}
.remind{
right: 11px;
top: 8px;
width: 90px;
height: 30px;
margin: -16px auto;	
}	
.btnf5{
top: 289px;
right: 224px;
	}
}