@charset 'utf-8';


/* $Reset
--------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{margin:0;padding:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}ol,ul{list-style:none}q:before,q:after{content:''}abbr,acronym{border:0}a{background:transparent;text-decoration:none;color:inherit;cursor:pointer;line-height:1em;display:inline-block}a:active{outline:0}input,textarea,button,select,option{border:0;margin:0;outline:none;padding:0;font-size:1.6rem;font-family:'Noto Sans TC','Open Sans','Arial','Microsoft JhengHei','Apple LiGothic Medium',sans-serif;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none}select::-ms-expand{display:none}input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc}


/* $font
--------------------------------------------------------------------------------------*/
:before ,:after{ font-family:'icomoon','Microsoft JhengHei','Apple LiGothic Medium';}


/* $body,html
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; height: 100%; font-family:'Microsoft JhengHei','Apple LiGothic Medium', Arial, Helvetica, sans-serif; font-size:10px; background: #fff; }


/* $共用
--------------------------------------------------------------------------------------*/
/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}
img { width: 100%; line-height: 1; }
* { box-sizing: border-box; }

/* button reset、input reset、select reset */
button, input, select{ font-family:'Microsoft JhengHei','Apple LiGothic Medium', Arial, Helvetica, sans-serif; border: none; }
button { cursor: pointer; }


section { width: 100%; margin: 0 auto; padding: 40px 0; height: auto; }
section .container { width: 92%; max-width: 1100px; height: auto; margin: 0 auto; display: flex; flex-wrap: wrap; color: #011E41; position: relative; }
.C-FEF9E6 { background: #FEF9E6; }


h2 { width: fit-content; font-size: clamp(2.4rem, 1.8vw, 3rem); font-weight: bold; line-height: 1.5; color: #011E41; margin: 0 0 15px; }
h2 span.C-red { color: #E60113; }
h2 span.big { font-size: 1.2em; line-height: 1; }
h2.v2 { width: 100%; font-size: clamp(2.6rem, 2.2vw, 3.2rem); display: flex; justify-content: center; align-items: center; margin: 0 0 40px; }
h2.v2 img { width: auto; max-height: 1em; margin: 0 20px 0 0; }
h2.sp { font-size: clamp(2.6rem, 2.2vw, 3.2rem); color: #FF8300; text-align: center; margin: -20px auto 35px; display: flex; flex-direction: column; align-items: center; }
h2.sp span { white-space: nowrap; }
h2.sp span.big { font-size: 1.5em; line-height: 1; }
h2.sp font.udline { border-bottom: 2px solid #E60113; height: 50px; display: flex; }
h2.sp div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
h3 { width: fit-content; font-size: clamp(2.6rem, 2.2vw, 3.2rem); font-weight: bold; padding: 5px 25px; color: #ffffff; margin: 0 0 15px; border-radius: 30px; background:linear-gradient(to right, #171C61, #005CAB); }
h3 span { color: #FED400; }
h4 { width:100%; font-size: clamp(2.4rem, 1.8vw, 3rem); font-weight: bold; line-height: 1.5; color: #FF8300; margin:50px 0 20px; border-top: 2px solid #FFB927; display: flex; justify-content: center; }
h4>div { margin-top: -2.5rem; padding: 0 15px; background:#FEF9E6 ; }
h4>div.C-FFFFFF { background:#ffffff ; }
h4>div span { font-size: .6em; }
p { color: #011E41; }
p.note { font-size: 1.6rem; text-align: center; margin: 10px auto 0 auto; }

.btn1 { width: fit-content; padding: 10px 30px; background: #FF8300; font-size: clamp(2.4rem, 1.8vw, 3rem); font-weight: bold; border-radius: 10px; box-shadow: 0 3px 6px rgba(0, 0, 0, .3); cursor: pointer; transition: .5s; position: relative; display: flex; flex-wrap: nowrap; align-items: center; }
.btn1 img { width: auto; margin: 0 -10px 0 10px; }
.btn2 { width: fit-content; padding: 6px 15px; background: #FFB927; font-size: clamp(1.4rem, 1.5vw, 1.6rem); font-weight: bold; border-radius: 20px; transition: .5s; }
.btn1:hover,
.btn2:hover { background: #E60113; color: #ffffff; transition: .5s; }
.btn-box a { margin: 15px 15px 0 0; }
/* .btn1:after { content: ""; width: fit-content; height: 30px; background: url('../images/icon_hand.svg') no-repeat;  } */

.row-1 { width: 100%; display: flex; flex-direction: column; }
.row-1 .col-1 { width: 80%; align-self: center; }
.row-1 .col-2 { width: 100%; margin: 20px 0 0 0;}
.row-1 .col-2 ul { font-size: clamp(1.6rem, 1.5vw, 1.8rem); list-style: disc; margin:0 0 10px 1.4em; line-height:1.5; }

.row-2 { width: 100%; display: flex; }
.row-2 .col-1 { width: 40%; border-right: 1px solid #E6E6E6; justify-content: center; align-items: stretch; padding:10px 20px; }
.row-2 .col-2 { width: 60%; padding:20px 10px 50px 20px;}
.row-2 .col-1.square-logo { padding:10px 30px; }
.row-2 .col-1,
.row-2 .col-2 { display: flex; flex-direction: column; position: relative; }
.row-2 .col-2 .btn2 { position: absolute; right: 10px; bottom: 10px; }
/* .row-2 .col-1.new:before { content: "new"; font-size:clamp(1.4rem, 1.5vw, 1.6rem); color:#E60113; font-weight: bold; position: absolute; top: 10px; left: 10px; border: 1px solid; border-radius: 30px; padding: 0 10px 3px; } */
.new { width: fit-content; font-size:clamp(1.4rem, 1.5vw, 1.6rem); color:#E60113; font-weight: bold; border: 1px solid; border-radius: 30px; padding: 0 10px 3px; margin: 0 0 5px; }


ul.nav { width: 100%; display: flex; justify-content: center; align-items: center; font-size: clamp(1.4rem, 1.5vw, 1.8rem); background: #011E41; color: #fff; padding: 12px; flex-wrap: wrap; }
ul.nav li { width: calc(100% / 3); margin: 10px 0; padding: 0 5px; display: flex; align-items: center; justify-content: center; cursor:pointer; transition: .5s; border-right: 1px solid #fff; }
ul.nav li:last-child,
ul.nav li:nth-child(3) { border-right: none;}
ul.nav a { color: #fff; text-decoration: none; transition: .5s; }
ul.nav li:hover,
ul.nav a:hover { color: #FF8300; transition: .5s; }
ul.nav li.scroll-btn {scroll-margin-top: 100px;}
ul.nav li.active,
ul.nav li.active a { color: #FF8300; font-weight: bold; }
.sticky { min-height: 50px; position: fixed; top: 0; left: 0; right: 0; z-index: 999; display: flex; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }

section.kv { width: 100%; height: auto; display: flex; position: relative; background: url('../images/KV-bg-m.svg') no-repeat center center; background-size: cover; padding: 30px 0; }
section.kv .container { justify-content: center; align-items: center; flex-direction: column; flex-wrap: nowrap; }
section.kv .kv-wd { width: 94%; max-width: 1100px; margin: 0 0 20px; }

ul.type { width: 100%; display: flex; flex-wrap: wrap; }
ul.type li { width:calc((100% - 20px) / 2);  background: #ffffff; border-radius: 15px; padding: 15px 10px; margin: 0 20px 20px 0; font-size: clamp(1.4rem, 1.5vw, 1.6rem); color: #D09F3A; box-shadow: 0 0 8px rgba(0, 0, 0, .3); display: flex; flex-direction: column; }
ul.type li:nth-child(2n) { margin: 0 0 20px 0;}
ul.type li a { width: 100%; height: 100%; line-height: 1.2; }
ul.type li .tit { font-size: clamp(1.8rem, 1.5vw, 2.2rem); font-weight: bold; margin:3px 0 8px; line-height: 1; }
ul.type li .tit span { font-size: .7em; margin: 0 0 0 5px; }
ul.type li small { color:#E60113; margin-bottom: 3px; font-weight: bold; }

ul.type li:nth-child(n+7) { display: none; }
/* ul.bu li:nth-of-type(n+5) { display: none; } */
.toggleBtn { width: 100%; display: flex; justify-content: center; margin:0 auto; padding: 10px 20px; font-size: 18px; font-weight: bold; background-color: #FFB927; color: #fff; cursor: pointer; border-radius: 10px; transition: .5s; }
.toggleBtn:hover { background-color: #ff8300; transition: .5s; }
.toggleBtn.show-more::after { content: "查看全部 ▼"; }
.toggleBtn.show-less::after { content: "收合 ▲"; }

section.event-bd { background: url('../images/sec-bg.svg') no-repeat bottom center #FEF9E6; background-size: contain; }
ul.bu { width: 100%; display: flex; flex-wrap: wrap; }
ul.bu li { width:100%; background: #ffffff; border-radius: 15px; margin: 0 0 20px 0; font-size: clamp(1.8rem, 1.5vw, 2.2rem); color: #011E41; font-weight: bold; box-shadow: 0 0 8px rgba(0, 0, 0, .3);display: flex; }
ul.bu li span { color: #D09F3A; }
ul.bu li small { font-size: .7em; }

.pic-03 { width: 20vw; max-width: 180px; position: absolute; right: 0; bottom: -16vw; }

.step { display: flex; overflow: hidden; justify-content: center; }
.step .slide { width: 250px !important; position: relative; margin: 0 35px; display: flex; flex-direction: column; align-items: center; }
.step .slide .pic { position: relative; height: auto; overflow: hidden; }
.step .slide .text { font-size: clamp(1.6rem, 1.5vw, 1.8rem); color: #011E41; margin-top: 10px; line-height: 1.5; }
.step .slide .text .tit { font-size: clamp(2rem, 1.5vw, 2.4rem); font-weight: bold; color: #FF8300; margin-bottom: 5px; }

/* 預設所有圖片都有遮罩 */
.step .slide .pic:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); z-index: 2; pointer-events: none; border-radius: 24px; }
/* 移除中心圖片的遮罩 */
.step .slick-center .slide .pic:before { display: none; }

.slick-prev:before,
.slick-next:before { content: ''; width: 25px; height: 45px; background: url('../images/icon-arr.svg') no-repeat; background-size: contain; position: absolute; top: 0; left: 0; z-index: 10; cursor: pointer; transition: 0.3s; }
.slick-next:before { transform: rotateY(180deg); }
.slick-prev,
.slick-next { z-index: 10; }
.slick-prev { left: calc(50% - 165px); } 
.slick-next { right: calc(50% - 165px); } 

.video-container { width: 100%; max-width: 1100px; height: 0; margin: 50px auto 0 auto; padding-bottom: 56.25%; border-radius: 10px; border: 10px solid #fff; position: relative; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0;left: 0; width: 100%; height: 100%;}

.qa-item { width: 100%; border-bottom: 3px dotted #DEBE7C; padding: 5px 25px; }
.qa-item:first-of-type { border-top: 3px dotted #DEBE7C;}
.qa-label { font-size: clamp(2rem, 1.5vw, 2.4rem); flex-shrink: 0; font-weight: bold; text-align: right; }
.qa-label small { font-size: 0.8em; }
.question, .answer { display: flex; align-items: flex-start; gap: 10px; font-weight: bold; }
.qa-text { flex: 1; padding: .2em 0 0 0; line-height: 1.5; }
.qa-text a {color:#2b86e6; text-decoration:underline;}
.answer { display: flex; flex-direction: row; align-items: flex-start; height: 0; opacity: 0; overflow: hidden; font-size: clamp(1.6rem, 1.5vw, 1.8rem); padding: 0 0 5px 2.5em; line-height: 1.5; }
.answer .qa-text { font-weight: normal; }
.question { cursor: pointer; padding: 10px 0; position: relative; font-size: clamp(1.8rem, 1.5vw, 2rem); color: #FF8300; transition: .5s; }
.question:hover { color: #E60113; transition: .5s; }

footer { width: 100%; margin: 180px auto 0 auto; padding: 25px 0 120px 0; display: flex; justify-content: center; align-items: center; font-size: clamp(1.4rem, 1.5vw, 1.6rem); color: #ffffff; background: #011E41; text-align: center; }

/* .gototop { width: 40px; height: 40px; position: fixed; right: 0; bottom: 150px; color: #fff; font-size: clamp(1.2rem, 1.5vw, 1.4rem); font-weight: bold; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 10px 0 0 10px; background: #FF8300; box-shadow: 3px 3px 5px rgb(0 0 0 / 35%); z-index: 1000;  display: none; transition: .5s; } 
.gototop:hover {  background: #E60113; transition: .5s; } */


.side-btn-1 { width: 80px; position: fixed; right: 0px; bottom: 150px; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5px 6px; border-radius: 10px 0 0 10px; background: #FF8300; z-index: 100; }
.side-btn-2 {  width: 80px; position: fixed; right: 0px; bottom: 230px; color: #FF8300; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5px 6px; border-radius: 10px 0 0 10px; background: #fff; z-index: 100; text-decoration: none !important;}
.side-btn { box-shadow:0 3px 5px rgba(0, 0, 0, .30);}
.side-btn p { font-size: clamp(1.2rem, 1.5vw, 1.2rem); color: #fff; text-align: center; margin:0 ;line-height: 1.2; }
.side-btn p.tit { font-size: clamp(1.6rem, 1.5vw, 2rem); color: #fff; font-weight: bold; margin:0;line-height: 1.2; }
.side-btn p.s-tit { font-size: clamp(1.4rem, 1.5vw, 1.4rem); font-weight: bold; margin:0;line-height: 1.2; }
.side-btn img { margin: 5px 0; }
.side-btn-2 p { color: #011E41; line-height: 1.2; }
.side-btn-2 a.link { width: 100%; text-align: center; font-size: clamp(1.2rem, 1.5vw, 1.2rem); color: #fff; background: #FF8300; padding: 5px 10px; border-radius: 5px; margin: 5px 0 0; transition: .5s; text-decoration: none; }
.side-btn-2 a.link:hover { background: #E60113; transition: .5s; }
.side-btn-2 .close-side { width: 100%; font-size: clamp(1.6rem, 1.5vw, 2rem); display: flex; justify-content: flex-start; align-items: center; cursor: pointer; }

section.comingsoon { height: 100vh;display: flex; flex-direction: column; padding:0;}
section.comingsoon>.container { flex: 1; padding: 20% 0 0 0; justify-content: center; text-align: center; }
section.comingsoon>.container h2 { color:#FF8300 ; }

/* popup */
.popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; z-index: 1000; }
.popup-content { background: white; padding: 20px; border-radius: 10px; width: 90%; max-width: 700px; max-height: 70vh; overflow-y: auto; position: relative; font-size: 16px; line-height: 1.4; color: #011E41; display: flex; flex-direction: column; }
.popup-content ul { margin: 0 0 0 1.4em; list-style: decimal; }
.popup-content p, .popup-content ul li { margin: 0 0 5px 0; }
.popup-content a { color:#2b86e6; text-decoration:underline;}
.popup-content ul li span { color:#E60113; }
.popup-content ul.level-2 { list-style: disc; margin: 0px 0px 0px 1.5em;}
.popup-content ul.level-3 { list-style: circle; margin: 0 0 0 1.5em; }
.popup-content table { width: 100%; border-collapse:collapse; border-spacing:0; text-align: center; }
.popup-content table th { background: #011E41; color: #fff; }
.popup-content table td,
.popup-content table th { border: 1px solid #000; overflow:hidden; padding:10px 5px; word-break:normal;}
.popup.popup_qrcode .popup-content { align-items: center; }
.popup.popup_qrcode .popup-content img { width: auto;  max-height: 300px; }
.popup.popup_qrcode .popup-content p { font-size: clamp(1.8rem, 1.5vw, 2.4rem); color: #E60113; font-weight: bold; margin: 0 0 10px; }
.popup .close { position: absolute; top: 10px; right: .5em; font-size: 60px; cursor: pointer; color: #FFB927;}

/* 服務條款 */
.terms { font-size: clamp(1.4rem, 1.5vw, 1.6rem); line-height: 1.5; }
.terms p { margin: 0 0 5px 0;}
.terms a { color:#2b86e6; text-decoration:underline;}
.terms h2 { margin: 0 auto 30px auto;}
.terms h3 { font-size: clamp(2rem, 1.5vw, 2.2rem); line-height: 1.5; margin: 30px 0 10px 0; background:none; color:#FF8300; padding: 0;}
.terms ul.level-1 { list-style: decimal; margin: 0 0 0 1.5em; width: calc(100% - 1.5em); }
.terms ul.level-1>li { margin:0 0 10px 0;}
.terms ul.level-2 { list-style: disc; margin: 0 0 0 1.5em; }
.terms ul.level-3 { list-style: circle; margin: 0 0 0 1.5em; }
.terms .highlight { color:#E60113;}
.terms .table-wrapper { width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.terms .table-wrapper table { width: 100%; border-collapse:collapse; border-spacing:0; text-align: center; margin: 10px 0; }
.terms .table-wrapper table th { background: #ffb143;}
.terms .table-wrapper table td,
.terms .table-wrapper table th { border: 1px solid #000; overflow:hidden; padding:10px 5px; word-break:normal;}

/* warnimg */
.warning-drink{ width: 100%; height: 10vh; position: fixed; left: 0; bottom: 0; line-height: 0; z-index: 1000; background: #2a2a2a; }
.warning-drink img{ width: 100%; height: 100%; line-height: 0; }



/* ------------------ 
$pc
------------------ */
@media screen and (min-width: 1200px){
 html,body{ min-width: 100%; }


section { width: 100%; margin: 0 auto; padding: 60px 0; }

.btn2 { padding: 6px 20px; }

.row-1 { flex-direction: unset; }
.row-1 .col-1 { width: 40%; }
.row-1 .col-2 { width: calc(60% - 40px); margin: 0 0 0 40px;}

.row-2 .col-1 { padding:20px 30px; }
/* .row-2 .col-1.new {position: relative; padding-top: 40px;} */
.row-2 .col-1.square-logo { padding: 20px 45px; }

ul.nav { flex-wrap: nowrap; }
ul.nav li { width: auto; margin: 0; padding: 0 20px; justify-content: center; }
ul.nav li:nth-child(3) { border-right: 1px solid #fff;}
section.kv { background: url('../images/KV-bg.svg') no-repeat top center; background-size: cover; }

ul.type li { width:calc((100% - 40px) / 3);  }
ul.type li:nth-child(2n) { margin: 0 20px 20px 0;}
ul.type li:nth-child(3n) { margin: 0 0 20px 0;}
ul.bu li { width:calc((100% - 20px) / 2); margin: 0 20px 20px 0; }
ul.bu li:nth-child(2n) { margin: 0 0 20px 0;}

.pic-03 { width: 20vw; bottom: -60px; }

.video-container { padding-bottom: 36.6%; }

footer { margin: 0 auto; }

/* .gototop { width: 50px; height: 50px; right: 10px; bottom: 110px; border-radius: 10px; }  */
.side-btn-1 { width: 120px; bottom: 140px; padding: 10px; }
.side-btn-2 { width: 120px; bottom: 350px; padding: 10px; }


}


/* ----------------
$Pad PRO
---------------- */
@media screen and (min-width:1024px) and (max-width:1199.98px){

section { width: 100%; margin: 0 auto; padding: 60px 0; }

.btn2 { padding: 6px 20px; }

.row-1 { flex-direction: unset; }
.row-1 .col-1 { width: 40%; }
.row-1 .col-2 { width: calc(60% - 40px); margin: 0 0 0 40px;}

ul.nav { flex-wrap: nowrap; }
ul.nav li { width: auto; margin: 0; padding: 0 20px; justify-content: center; }
ul.nav li:nth-child(3) { border-right: 1px solid #fff;}
section.kv { background: url('../images/KV-bg-pad.svg') no-repeat top center; background-size: cover; }

ul.type li { width:calc((100% - 40px) / 3);  }
ul.type li:nth-child(2n) { margin: 0 20px 20px 0;}
ul.type li:nth-child(3n) { margin: 0 0 20px 0;}
ul.bu li { width:calc((100% - 20px) / 2); margin: 0 20px 20px 0; }
ul.bu li:nth-child(2n) { margin: 0 0 20px 0;}

.pic-03 { width: 13vw; bottom: -60px; }

/* .gototop { width: 50px; height: 50px; right: 10px; bottom: 110px; border-radius: 10px; }  */
.side-btn-1 { width: 120px; bottom: 140px; padding: 10px; }
.side-btn-2 { width: 120px; bottom: 350px; padding: 10px; }


}


/* ----------------
$Pad
---------------- */
@media screen and (min-width:768px) and (max-width:1023.98px){

section { width: 100%; margin: 0 auto; padding: 40px 0; }

.btn2 { padding: 6px 20px; }

.row-1 { flex-direction: unset; }
.row-1 .col-1 { width: 40%; }
.row-1 .col-2 { width: calc(60% - 40px); margin: 0 0 0 40px;}

ul.nav { flex-wrap: nowrap; }
ul.nav li { width: auto; margin: 0; padding: 0 20px; justify-content: center; }
ul.nav li:nth-child(3) { border-right: 1px solid #fff;}
section.kv { background: url('../images/KV-bg-pad.svg') no-repeat bottom center; background-size: contain; }
section.kv .kv-wd { width: 90%; }

ul.type li { width:calc((100% - 40px) / 3);  }
ul.type li:nth-child(2n) { margin: 0 20px 20px 0;}
ul.type li:nth-child(3n) { margin: 0 0 20px 0;}
ul.bu li { width:calc((100% - 20px) / 2); margin: 0 20px 20px 0; }
ul.bu li:nth-child(2n) { margin: 0 0 20px 0;}

.pic-03 { width: 13vw; bottom: -70px; }

/* .gototop { width: 50px; height: 50px; right: 10px; bottom: 110px; border-radius: 10px; }  */
.side-btn-1 { width: 120px; bottom: 140px; padding: 10px; }
.side-btn-2 { width: 120px; bottom: 350px; padding: 10px; }

}


/* ----------------
$Mobile
---------------- */
@media screen and (max-width:767.98px){ 

    html,body{ width: 100%; -webkit-text-size-adjust:none; }

    ul.nav {  padding: 5px; }
    ul.nav li { margin: 5px 0; }

}


/* ----------------
$Mobile small
---------------- */
@media screen and (max-width:320px){ 


}


/* ----------------
$橫的手機版型 
---------------- */
@media screen and (orientation:landscape){ 


}