@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;700;900&display=swap');
@import url(../fonts/style.css);


/* $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: #b11e42; }


/* $共用
--------------------------------------------------------------------------------------*/
/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}
* { 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; }
p { font-size: 18px; color: #00263E; line-height: 1.4; }
.content { width: 96%; max-width: 1000px; padding: 0 20px; margin: 0 auto; position: relative; }

.slick-dots { position: relative; bottom: 0; margin: 10px 0 0 0; }
.slick-dots li button:before { font-size: 15px; color: #D0C8C9; opacity: 1;}
.slick-dots li.slick-active button:before {  color: #ECAE00; opacity: 1;}
.slick-slider .slick-track, .slick-slider .slick-list { box-shadow: 3px 3px 6px rgba(0, 0, 0, .25);}

.kv { width: 100%; height: auto; padding-top: 29.2%; margin: 0 0 30px 0; background: url('../images/kv_250625.png') no-repeat top center; background-size: cover; }
.banner img { width: 100%; border: 5px solid #fff; box-shadow: 8px 8px 6px rgba(0, 0, 0, .25); background: #fff; }

.features{ display: flex; justify-content: center; padding-bottom: 30px; }
.features img{ width: 50%; height: 100%; }
.video{ width: 50%; }
.video-container{ position: relative; padding-bottom: 56.25%; padding-top:0; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed{ position: absolute; top: 0;left: 0; width: 100%; height: 100%; }

table.menu { width: 100%; max-width: 1000px; margin: 0 auto; border-collapse:collapse; border-spacing:0; }
table.menu td,
table.menu th { border:1px solid #b5d5d4; font-size:14px; overflow:hidden; padding: 10px 20px; vertical-align: middle; }
table.menu td{ background:#ffffff; }
table.menu th{ background:#164240; color:#ffffff; text-align:center; vertical-align:center; font-size: clamp(1.6rem, 1.5vw, 1.8rem); }
table.menu .menu-name { display: flex; align-items: center; text-align:left; font-size: clamp(1.8rem, 1.5vw, 2.2rem); font-weight: bold; line-height: 1; }
table.menu .menu-name.new:before { content:"new"; width: 50px; height:30px; background:#b11e42 ; color:#fff;display: inline-flex; align-items: center; justify-content: center; font-size: clamp(1.2rem, 1.5vw, 1.4rem); border-radius: 50px; margin: 0 5px 0 0; }
table.menu .menu-name small { font-size: .7em; color:#787878; }
table.menu .menu-price { width: 20%; text-align:center; font-size: clamp(1.6rem, 1.5vw, 2rem); color: #b11e42; font-weight: bold;}
table.menu .menu-temp {  text-align: center; font-size: clamp(1.6rem, 1.5vw, 2rem); font-weight: bold; }

.icon_note { width: 200px; margin: 20px auto 0 auto; }
.icon_note a { width: 100%; }

.link { width: 100%; padding: 40px 0; }
.link .content {  display: flex; justify-content: center; }
.link a {  font-size: clamp(1.6rem, 1.5vw, 1.8rem); font-weight: bold; color:#fff; border:1px solid #b5d5d4; padding: 15px 12px; margin: 0 5px; display: flex; align-items: center; transition: .5s; }
.link a:hover { background: #b5d5d4; color:#164240 ; transition: .5s;  }
.link a img { margin-left: 5px; }

footer { width: 100%; font-size: 14px; background: #000; padding: 25px 20px; margin: 80px 0 0 0; color: #fff; display: inline-block; text-align: center; }
footer a { color: #fff; margin:10px 0 0; text-decoration: underline; transition: .5s; }
footer a:hover { color: #fff; transition: .5s; }

a.gototop { width: 40px; height: 40px; border-radius: 10px 0 0 10px; position: fixed; right: 0; bottom: 90px; background: #fff; color: #164240; font-size: 18px; display: flex; justify-content: center; align-items: center; z-index: 100; box-shadow: 3px 3px 5px rgba(0, 0, 0, .4); }



/* ------------------ 
$pc
------------------ */
@media screen and (min-width: 1200px){

    html,body{ min-width: 100%; }

    a.gototop { width: 60px; height: 60px; border-radius: 30px; position: fixed; right: 20px; bottom: 100px; font-size: 20px; display: flex; justify-content: center; align-items: center; z-index: 100; }

}


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

    a.gototop { width: 60px; height: 60px; border-radius: 30px; position: fixed; right: 20px; bottom: 100px; font-size: 20px; display: flex; justify-content: center; align-items: center; z-index: 100; }


}


/* ----------------
$Pad
---------------- */
@media screen and (min-width:768px) and (max-width:1023.98px){
    html,body{ min-width: 100%; }
    .content { width: 100%; max-width: 1200px; padding: 0 40px; margin: 0 auto; position: relative; }


}


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

    html,body{ width: 100%; -webkit-text-size-adjust:none; }
    .features{ flex-direction: column; }
    .features img{ width: 100%; }
    .video{ width: 100%; }

}


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


}


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


}