@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(./notosanstc.woff2) format('woff2');
}

* {  padding: 0;  margin: 0;  box-sizing: border-box;flex-shrink: 0;}
html{ font-family: Noto Sans TC, sans-serif; }
html,body{height: 100%; position: relative;}
h1,h2,h3,h4,h5,h6{  font-weight: normal;}
button {  border: none;  cursor: pointer;  background-color: #fff;}
select {  color: #808080;  outline: none;   appearance: none;  -moz-appearance: none;  -webkit-appearance: none;}
input,textarea {  outline: none;  border: none;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {  -webkit-appearance: none;}
input[type="number"] {  -moz-appearance: textfield;}
input:focus,select:focus {  outline: none; }
a {  outline: none;  text-decoration: none;  color: inherit;   display: inline-block;  cursor: pointer;}
a:link,a:visited,a:hover,a:active{ text-decoration:none;}
span { display: inline-block;}
ul { list-style: none;}
.text-c{ text-align: center;}
.text-r{ text-align: right;}
.text-l{ text-align: left;}
.clearfix::after {  content: '';  display: block;  clear: both;  width: 0;   height: inherit;   float: left;} 
.oh{overflow: hidden;}
.oa{ overflow:auto;}
.nowrap{white-space: nowrap;}
.omit,.cssddd{	white-space: nowrap;	overflow: hidden; 	text-overflow:ellipsis; }
.omit-two{  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;}
.transition{-webkit-transition: all 0.2s ease-in 0;  transition: all 0.2s ease-in 0s;}
.hoverOp,.hoverS{-webkit-transition: all 0.2s;   transition: all 0.2s;}
.pc-page .hoverBs:hover,.m-page .hoverBs:active,.hoverBsm:active{-webkit-filter: brightness(1.2); filter: brightness(1.2);}
.underline{text-decoration: underline !important;}
.bold{font-weight: bold;}
.event-none{pointer-events: none;}
.fl{float: left;}
.fr{float: right;}
.shrink{flex-shrink:0;}
.wrap{flex-wrap: wrap;}
.flex1{flex: 1; }
.flex{ display: flex !important; }
.flex-cr{ display: flex; flex-direction: column-reverse; }
.flex-ra{ display: flex; justify-content: space-around; }
.flex-column{ display: flex !important; flex-direction: column;}
.flex-wrap{ display: flex !important; flex-wrap: wrap;}
.flex-ac{ display: flex !important; align-items: center;}
.flex-cc{ display: flex !important; align-items: center; justify-content: center;}
.ai-c{ align-items: center;}
.jc-c{ justify-content: center;}
.jc-s{ justify-content: start;}
.jc-e{ justify-content: end;}
.jc-sb{ justify-content: space-between;}
.db { display: block !important;}
.dn { display: none !important;}
.pr { position: relative;}
.pa { position: absolute;}
.pf { position: fixed;}
.l0{left: 0;}
.t0{top: 0;}
.r0{right:0;}
.b0{bottom:0;}
.lt_center {  left: 50%;  top: 50%;  transform: translate(-50%,-50%);}
.l_center{  left: 50%;  transform: translateX(-50%);}
.t_center{  top: 50%;  transform: translateY(-50%);}
.color_fff{color: #fff;}
.z-index {  z-index: 3;}
.w100 {  width: 100%;}
.w50{ width: 50%;}
.w33{ width: 33.3%;}
.w25{ width: 25%;}
.w20{ width: 20%;}
.h100 {  height: 100%;}
.h50{ height: 50%;}
.h33{ height: 33.3%;}
.h25{ height: 25%;}
.h20{ height: 20%;}
.wh100 {  width: 100%;  height: 100%;}
.origin-lt{transform-origin: left top !important; -webkit-transform-origin: left top !important;}
.origin-lc{transform-origin: left center !important; -webkit-transform-origin: left center !important;}
.origin-lb{transform-origin: left bottom !important; -webkit-transform-origin: left bottom !important;}
.origin-ct{transform-origin: center top !important; -webkit-transform-origin: center top !important;}
.origin-ct20{transform-origin: center 20% !important; -webkit-transform-origin: center 20% !important;}
.origin-cc{transform-origin: center center !important; -webkit-transform-origin: center center !important;}
.origin-cb{transform-origin: center bottom !important; -webkit-transform-origin: center bottom !important;}
.origin-rt{transform-origin: right top !important; -webkit-transform-origin: right top !important;}
.origin-rc{transform-origin: right center !important; -webkit-transform-origin: right center !important;}
.origin-rb{transform-origin: right bottom !important; -webkit-transform-origin: right bottom !important;}
.op0{opacity: 0;}
.op10{opacity: .1;}
.op20{opacity: .2;}
.op30{opacity: .3;}
.op40{opacity: .4;}
.op50{opacity: .5;}
.op60{opacity: .6;}
.op70{opacity: .7;}
.op80{opacity: .8;}
.op90{opacity: .9;}
.op100{opacity: 1;}
.pop_win{ z-index:9000; width:100%; height:100%; position:fixed;  left:0px; top:0px; display: none;}
.pop_win .pwin_bg{width: 100%;height: 100%; background: #000; opacity: .7; filter: alpha(opacity=70); }
.pop_win .pwin_box{ position:absolute; left:50%; top:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); animation:downIn2 .6s ease-out both; -webkit-animation:downIn2 .6s ease-out both;}
#loading .loading-img{ width: 2.8vw; }
#toast .toast-content{
  max-width: 50vw;
  font-size: 1.28vw;
  text-align: center;
  line-height: 1.5;
  padding:0.4vw 1.2vw;
  border-radius: 0.5vw;
  background: #000;
  color: #fff;
  z-index: 10000;
  display: block;
}
#toast .pwin_bg{
  opacity: 0.3!important;
}

@media screen and (orientation: portrait) {
  #loading .loading-img{ width: 5.4vw; }
  #toast .toast-content{
    font-size: 2.78vw;
    padding:1.28vw 3.2vw;
    border-radius: 1.5vw;
  }
}