@charset "utf-8";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import "font-awesome.min.css";
@import "pe-icon-7-stroke.css";
@import "et-line.css";
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,300,600');
@import url('http://fonts.googleapis.com/css?family=Raleway:100,300,400,500,600,700,800');
@import url('http://fonts.googleapis.com/css?family=Crimson+Text');
@import url('http://fonts.googleapis.com/css?family=Charmonman:400,700');
/* CSS Document */

/* HTML:*/
.loader {
  width: 50px;
  padding: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #666666;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}

body {font-family: 'Open Sans', sans-serif; color: #111111 !important; letter-spacing: 1px;}
button {cursor: pointer;}
h1 {font-weight: 900!important;}
h1,h2,h3,h4,h5 {font-family: "Open Sans", 新細明體, sans-serif; letter-spacing: 1px; line-height: 1.4;}
header .logo img { width: 98px; height: auto; transition: all 0.4s ease 0s;}
.fixed-nav .logo img { width: 64px; height: auto; transition: all 0.4s ease 0s;}
.fixed-nav { position: fixed!important;top:0; left: 0; width: 100%; z-index: 9999; background: #FFF;}
.drop { top:15px} 
.fixed-nav .drop {top:28px} 
header .nav {padding-top: 10px; padding-bottom: 10px; transition: all 0.4s ease 0s;}
header .fixed-nav.nav {padding-top: 0; padding-bottom: 0; transition: all 0.4s ease 0s;}
header .drop {padding-top: 24px; }
header.fixed-nav .drop {padding-top: 16px; }
.monospace  {font-family: monospace;}
.Charmonman {font-family: "Charmonman";}
.Crimson    {font-family: "Crimson Text";}

.ellipsis{ overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; overflow: hidden;}
.ellipsis-evn{ overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;overflow: hidden;}
.ellipsis-odd{ overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal;overflow: hidden;}

.social-icons li a .svg { color:#111;}
.social-icons li a, .social-icons li a i, .social-icons li a .svg {
	-webkit-transition: all .3s ease 0s;
	-moz-transition: all .3s ease 0s;
	-ms-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
}
.social-icons li a:hover { background: #393939;}
.social-icons li a:hover i,.social-icons li a:hover .svg {color: #fff;}

.breadcrumb li { position: relative;}
.breadcrumb li::after { position: absolute; right:-20px; top:0; content: ">"; color:#ccc; }
.breadcrumb li:last-child:after { display: none;}

.gift-carousel .owl-nav { position: absolute;  left:0; top:50%; width: 100%; display: flex; justify-content:space-between; align-items: center; z-index: 10;}
.gift-carousel .owl-nav button.owl-prev span, .gift-carousel .owl-nav button.owl-next span { font-size: 4rem!important; color:#fff!important; margin-top: -20px;}
.gift-carousel .owl-nav button.owl-prev, .gift-carousel .owl-nav button.owl-next { background: rgba(0,0,0,0.5)!important; display: flex; justify-content:center; align-items: center; width: 50px; height: 80px; border-radius: 0; margin:0 ;}



/* FCK Box */
.fck-box p,.fck-box span {font-size: 14px; line-height: 2; color:#777}
.fck-box img { max-width: 100%; height: auto !important; display: inline-block; margin-left: auto; margin-right: auto;  margin-top: 1rem; margin-bottom: 1rem}
.fck-box iframe { margin: 1rem auto ; max-width: 100% !important; }
.fck-box ul { list-style-type: disc; list-style-position: outside; padding-left: 20px;}
.fck-box ol { list-style-type:decimal; list-style-position: outside; padding-left: 20px;}
.fck-box li, .fck-box p{ margin-bottom: 1rem; }
.fck-box table  {width: 100%; max-width: 100%; margin: 1rem auto;}
.fck-box table>tbody>tr:nth-of-type(odd) { background-color: #f9f9f9;}
.fck-box table>tbody>tr>td,
.fck-box table>tbody>tr>th,
.fck-box table>tfoot>tr>td,
.fck-box table>tfoot>tr>th,
.fck-box table>thead>tr>td,
.fck-box table>thead>tr>th { padding: 8px; line-height: 1.5; border: 1px solid #ccc;}
/*---------------------------
          responsive
----------------------------*/
/*2xl*/
@media only screen and  (max-width: 1536px) {
    
}

/*xl*/
@media only screen and  (max-width: 1280px) {

}

/*lg*/
@media only screen and (max-width: 1024px) {
  header .logo img { width: 70px; height: auto; transition: all 0.4s ease 0s;}
  header .drop ,header.fixed-nav .drop {padding-top: 0; }
}
    
/*md*/
@media only screen and  (max-width: 768px) {

}

/*sm*/
@media only screen and  (max-width: 480px) {
.logo img { width: 200px; height: auto; max-width:100%;}
  }