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

html,body{ margin:0 auto; padding: 0; background: url(../images/bg.jpg) repeat center; font-family: "微軟正黑體", Verdana;}
img{ display:block;}


.all{ max-width: 2000px; width: 100%; margin: 0 auto;}
.main{ position: relative; max-width: 1400px; width:100%; height: 100vh; margin: 0 auto;text-align: center; overflow-x: hidden;}

.cover{ position:relative;}
.cover img{ max-width: 100%; image-rendering: pixelated; transition: .5s;}
.cover .got1{ position:absolute; width: 5.4%; left: 12.05%; top: 5%; cursor: pointer; opacity: 0;}
.cover .got2{ position:absolute; width: 5.4%; left: 15%; top: 62.3%; cursor: pointer; opacity: 0;}
.cover .got3{ position:absolute; width: 5.4%; left: 45%; top: 32.7%; cursor: pointer; opacity: 0;}
.cover .got4{ position:absolute; width: 5.4%; left: 60%; top: 23%; cursor: pointer; opacity: 0;}
.cover .got5{ position:absolute; width: 5.4%; left: 74.4%; top: 60.6%; cursor: pointer; opacity: 0;}
.cover .got6{ position:absolute; width: 5.4%; left: 79.8%; top: 0%; cursor: pointer; opacity: 0;}
.cover .got_active{ opacity: 1;}

.main_title{ position: relative; width: 1397px; max-width: 90%; margin: 1% auto 0px;}
.main_title img{ max-width:100%; margin: 0 auto; image-rendering: pixelated;}
.main_title .main_title_b{ position: absolute; left: 0; top: 0;}
@media (max-width:1440px){
.main_title{ max-width: 50vw; margin: -4% auto 0px;}
}
@media (max-width:500px){
.main_title{ max-width: 90vw; margin: 2% auto 0px;}
}


.menu{ position: absolute; display:flex; width: 90%; max-width: 1600px; left: 50%; bottom: 20px; transform: translateX(-50%);}
.menu img{ width: 100%; image-rendering: pixelated;}
.menu>div{ position: relative; cursor: pointer;}
.menu>div>img:nth-of-type(1){ position: absolute; visibility: hidden;}
.menu>.btn_active>img:nth-of-type(1){ visibility: visible; top: 0; left: 0;}
.menu>.btn_active>img:nth-of-type(2){ visibility: hidden;}
@media (max-width:1440px){
.menu{ width: 70vw; bottom: 20px;}
}
@media (max-width:500px){
.menu{ width: 90vw; bottom: 20px;}
}


.ribbon{ position:fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1; animation: ribbon .5s; cursor: pointer;}
@keyframes ribbon {
0%{ top: -60px;}
100%{ top: 20px;}
}
.ribbon span{ position: absolute; top: 14px; left: 30px;}
@media (max-width:500px){
.ribbon{ top: 100%; left: 0; margin: -20px 0 0 0; transform: translateX(0); animation: ribbon_no; background: #f88090; font-size: 12px; line-height: 20px; height: 20px;  width: 100%; text-align: center;}
.ribbon img{ display:none;}
.ribbon span{ position: static;}
}



/*-----lightbox_a-----*/
.overlay_a{ display: none; position:fixed; top: 0; left: 0; z-index: 97; width: 100vw; height: 100vh; background: rgba(0,0,0,0.75);}
.overlay_a img{ position: absolute; top: 12px; right: 12px; cursor:pointer;}
.lightbox_a{ display: none; position: fixed; width: 600px; max-width: 100%; max-height: 400px; text-align: center; z-index: 98; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.lightbox_a .box_line{ width: calc(100% - 24px); height: 12px; margin: 0 auto; background: #eee;}
.lightbox_a .box{ background: #fff; overflow-y: auto; max-height: 376px; padding: 20px 20px 30px 20px; box-sizing: border-box; -webkit-overflow-scrolling: touch;}

.lightbox_a .box h3{ margin: 0 0 20px; color:#058dda; font-size: 30px; font-weight: bold;}
.lightbox_a .box p{ margin: 0 0 10px; font-size: 14px; line-height: 1.5em;}
.lightbox_a .box a{ display: inline-block; padding: 10px 15px; font-size: 14px; line-height: 1.5em; background: #058dda; border-radius: 50px; color: #fff; text-decoration: none;}
.laba{ position: absolute; right: -90px; top: 50px;}
@media (max-width:500px){
.lightbox_a{ max-width: 90%;}
.laba{ display:none;}
}


/*-----act01-----*/
.act01_pic01{ position:absolute; left: -36px; bottom: 12px;}
.act01_pic02{ position:absolute; right: -36px; bottom: 12px;}
@media (max-width:500px){
.act01_pic01{ display: none; width: 48px; left: -12px; bottom: -6px; image-rendering: pixelated;}
.act01_pic02{ display: none; width: 48px; right: -12px; bottom: -6px; image-rendering: pixelated;}
}


/*-----lightbox_b-----*/
.overlay_b{ position:fixed; display: none; top: 0; left: 0; z-index: 90; width: 100vw; height: 100vh; background: rgba(0,0,0,0.75);}
.overlay_b img{ position: absolute; top: 12px; right: 12px; cursor:pointer;}
.lightbox_b{ position: fixed; display: none; width: 700px; max-width: 100%; max-height: 400px; text-align: center; z-index: 98; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.lightbox_b .box_line{ width: calc(100% - 24px); height: 12px; margin: 0 auto; background: #eee;}
.lightbox_b .box{ background: #fff; overflow-y: auto; max-height: 376px; padding: 20px 50px 30px 50px; box-sizing: border-box; -webkit-overflow-scrolling: touch;}

.lightbox_b .box h3{ margin: 0 0 20px; color:#058dda; font-size: 30px; font-weight: bold;}
.lightbox_b .box p{ margin: 0 0 10px; font-size: 14px; line-height: 1.5em; text-align: left;}
.lightbox_b .box p.title{ color:#d7253b;}
.lightbox_b .box a{ display: inline-block; margin: 0 5px; padding: 10px 15px; font-size: 14px; line-height: 1.5em; background: #058dda; border-radius: 50px; color: #fff; text-decoration: none;}
.lightbox_b table{ width:100%; margin: 0 0 20px 0;}
.lightbox_b table tr{}
.lightbox_b table th{ background: #f88090; line-height: 2em; font-size: 14px;}
.lightbox_b table td{ font-size: 14px; line-height: 2em; border-bottom: 1px solid #f88090;}
.laba{ position: absolute; right: -90px; top: 50px;}
@media (max-width:500px){
.overlay_b{ display: none !important;}
.lightbox_b .box h3{ font-size: 18px;}
.lightbox_b{ max-width: 90%; position: relative; transform: unset; margin: 20px auto 0; max-height: 53vh; left: 0; top: 0;}
.lightbox_b .box_line{ height: 6px;}
.lightbox_b .box{ max-height: 48vh; padding: 20px 20px 30px 20px;}
.lightbox_b .box a{ margin: 0 2px; font-size: 10px; padding: 5px;}
	
.lightbox_b table th{ font-size: 12px;}
.lightbox_b table td{ font-size: 12px;}
.laba{ display:none;}
}


/*-----act02-----*/
.act_02_box>img{ margin: 0 auto; max-width: 95%;}
.act_02_box hr{ border: none; border-bottom:1px dashed #000; width: 85%; margin: 20px auto 0;}
@media (max-width:500px){
.act_02_box{ display:block;}
}

/*-----集氣條-----*/
.gas_bg{ position:relative; width:271px; margin: 0 auto;}
.gas_bg>img{ position:relative; z-index: 2;}
.gas{ position: absolute; top:5px; left: 5px; height: 31px; background: #a564fd; z-index: 1;}

/*-----act05-----*/
.act_05_box>img{ margin: 0 auto; max-width: 95%;}
@media (max-width:500px){
}



/*-----note-----*/
.note{ position:fixed; top:15px; right:15px; z-index: 1; cursor: pointer;}
.note>p{ writing-mode: vertical-lr; margin: 10px auto 0; color: #fff;}
.act_08_box ul{ margin: 0; padding: 0 0 0 20px; list-style: decimal; text-align: left; font-size: 14px;}
.act_08_box li{ padding: 0 0 10px 0;}
.act_08_box .box a{ background:none; color: #f00; padding: 0;}
.act_05_box>img{ margin: 0 auto; max-width: 95%;}
@media (max-width:500px){
.note>p{ display: none;}
}

/*-----outsite_buy-----*/
.outsite_buy{ position:fixed; top:15px; right:61px; z-index: 1; cursor: pointer;}
.outsite_buy p{ writing-mode: vertical-lr; margin: 10px auto 0; color: #fff;}
.outsite_buy a{ text-decoration:none;}

/*-----outsite_join-----*/
.outsite_join{ position:fixed; top:15px; right:106px; z-index: 1; cursor: pointer;}
.outsite_join p{ writing-mode: vertical-lr; margin: 10px auto 0; color: #fff;}
.outsite_join a{ text-decoration:none;}
@media (max-width:750px){
.outsite_buy,.outsite_join{ display:none;}
}


/*-----箭頭-----*/
.arrow{ position: absolute; right: -15px; animation: arrow 1s infinite;}
@keyframes arrow {
0%{ top: 12px; opacity: 0;}
50%{ top: 18px; opacity: 1;}
100%{ top: 24px; opacity: 0;}
}

/*捲軸樣式*/
::-webkit-scrollbar {  
    width: 5px;
    height: 5px;
 border-radius: 4px;
    background-color: #0c2029;
}  
  
::-webkit-scrollbar-track {    
    border-radius: 4px;
    background-color: #0c2029;
}  
  
::-webkit-scrollbar-thumb {  
    border-radius: 4px;
    background-color: #ddd;
}