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

* {margin:0px; padding:0px;user-select:none}
img{-webkit-user-drag: none;}

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;700&family=Cormorant+Garamond:wght@600;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Serif+TC:wght@600;700&display=swap');
/*font-family: 'Almarai', sans-serif;
font-family: 'Cormorant Garamond', serif;
font-family: 'Noto Sans TC', sans-serif;
font-family: 'Noto Serif TC', serif;*/


body, html {position:relative; width:100%; font-size:16px; font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:400; color:black; overflow-x:clip; background:white; background-size:cover; scroll-behavior:smooth;}
a, input, button {text-decoration:none; outline:none !important;}
a:hover, a:focus, a:active, a:visited {text-decoration:none; cursor:pointer !important; outline:none !important;}
ul, li {list-style:none;}

.back_to_top {font-family:Arial,sans-serif; font-size:14px; font-weight:300; text-transform:none; color:#fff; text-align:center; text-transform:uppercase; display:none; background:black; width:60px; padding:10px 0px; cursor:pointer; position:fixed; right:0; bottom:0; z-index:9999 !important;}
.back_to_top .material-icons {vertical-align:bottom; margin-bottom:-5px;}


/* ---------- loading ---------- */
#loading {position: fixed; background: #8f2b29; top: 0; left: 0; right: 0; bottom: 0;z-index: 1000;}
#loading .centerbox {position: absolute; top: 50%; left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 90%; max-width: 400px;
}
#loading .loader {display: block; width: 48px; height: 48px;
  border: 5px solid white;
  border-bottom-color: transparent;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-animation: rotation 1.5s linear infinite;
          animation: rotation 1.5s linear infinite;
  margin: 0 auto 15px;
}
#loading .loading_text {font-family: 'Almarai', sans-serif; font-size: 18px; color: #FFF; text-align: center; margin-bottom: 15px;}
#loading .loading_text::after {content: "...";
  -webkit-animation: load_dot 1s alternate linear infinite;
          animation: load_dot 1s alternate linear infinite;
}
#loading .loading_bar {height: 5px; background: #8f2b29; border-radius: 10px; overflow: hidden;}
#loading .loading_bar .progress {background: white; width: 1%; height: 5px; -webkit-transition: all 1s; transition: all 1s;}
  
@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg); transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg); transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg); transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg); transform: rotate(360deg);
  }
}
@-webkit-keyframes load_dot {
  0% {content: ".";}
  50% {content: "..";}
  100% {content: "...";}
}
@keyframes load_dot {
  0% {content: ".";}
  50% {content: "..";}
  100% {content: "...";}
}


/* ---------- header ---------- */
header {position:fixed; top:0; z-index:100; height:90px; width:100vw; display:flex; align-items:flex-start; justify-content:flex-start; border-bottom:1px solid #e7e7e7; background:white;}
header .hd_logo img {width:90px; height:90px;}
header .nav {height:90px; position:relative; display:flex; align-items:center; justify-content:flex-start; background:white; z-index:10;}
header .nav li {position:relative;}
header .nav li:hover {background:#8f2b29;}
header .nav a {display:flex; flex-wrap:wrap; padding:22.5px 12px; align-items:center; color:black; font-size:20px; text-align:center; font-family:'Noto Serif TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:600;}
header .nav a span {width:100%;}
header .nav li p {width:100%; font-family:'Cormorant Garamond',sans-serif; font-size:14px; color:#8f2b29; font-weight:700;}
header .nav li:hover a {background:#8f2b29; color:white; cursor:pointer;}
header .nav li:hover p {color:white;}

header .nav .sub {display:block; position:absolute; width:100%;}
header .nav .sub a {box-sizing:border-box; padding:12px 10px; background:#F2EFE9; font-size:18px; text-align:center; justify-content:center;}
header .nav li:hover .sub a {background:#F2EFE9; color:black;}
header .nav .sub a:hover {background:#8f2b29 !important; color:white !important;}

header .sns {position:absolute; top:23px; left:auto; right:20px; display:flex;}
header .sns li {margin:0px 7px;}
header .sns li img {width:40px; height:40px;}

header #menu_toggle, header .mb_sns {display:none;}

.menu_ham {position:fixed; top:17px; right:15px; height:27px; width:30px; cursor:pointer; z-index:21; transition:opacity 0.25s ease;}
.menu_ham span {background:#8f2b29; border:none; height:3px; width:100%; position:absolute; top:0; left:0; transition:all 0.35s ease; cursor:pointer;}
.menu_ham span:nth-child(2) {top:11px;}
.menu_ham span:nth-child(3) {top:22px;}
.menu_ham.active .top {transform:translateY(11px) translateX(0) rotate(45deg); background:#8f2b29;}
.menu_ham.active .middle {opacity:0; background:#8f2b29;}
.menu_ham.active .bottom {transform:translateY(-11px) translateX(0) rotate(-45deg); background:#8f2b29;}

header .arrow {display:none;}



@media screen and (max-width:820px) {

  /* ---------- header ---------- */
  header {height:60px; display:block; background:white; position:fixed; top:0; z-index:99; border-bottom:1px solid #e7e7e7;}
  header .hd_logo {position:relative; z-index:25;}
  header .hd_logo img {width:60px; height:auto;}
  header .opn_menu {display:block; position:fixed; z-index:10; z-index:10; top:0; left:0; height:0%; width:100%; overflow:scroll; background:white; opacity:0; visibility:hidden; transition:opacity 0.35s, visibility 0.35s, height 0.35s;}
  header .opn_menu.open {opacity:1; visibility:visible; height:100vh; overflow:scroll;}
  header .opn_menu nav {position:relative; /*top:50%; transform:translateY(-50%);*/ height:calc(100vh - 70px); top:70px; overflow:scroll; padding-bottom:100px;}
  header .nav {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; position:relative;}
  header .nav li {width:100%; border-bottom:1px solid #e6e6e6;}

  header .nav a {font-size:18px; padding:15px; position:relative;}
  header .nav li:hover a, header .nav a:hover {background:white; color:black;}
  header .nav a:hover p, header .nav li:hover p {color:#8f2b29;}

  header .nav .sub {position:relative; padding-bottom:10px;}
  header .nav li:hover, header .nav li:hover .sub a {background:white;}
  header .nav .sub li {border-bottom:0px;}
  header .nav .sub a {font-size:16px; background:white;}
  header .nav .sub a:hover {background:white !important; color:black !important;}

  header .nav .mb_sns {display:flex; flex-wrap:nowrap; justify-content:center; align-items:center;}
  header .nav .mb_sns img {width:30px; height:30px;}

  header #menu_toggle, header .mb_sns {display:block;}

  header .sns {display:none;}

  header .arrow {
    width: 15px !important;
    height: 15px;
    display: inline-block;
    position: absolute;
    top:50%; right:25%; transform:translateY(-50%);
  }
  header .arrow span {
    top: 8px;
    position: absolute;
    width: 9px !important;
    height: 2px;
    background-color: black;
    display: inline-block;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  header .arrow span:first-of-type {
    left: 0px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  header .arrow span:last-of-type {
    right: 0px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  header .arrow.active span:first-of-type {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  header .arrow.active span:last-of-type {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

}