/* Your custom CSS goes here */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
a,
span,
button,
div,
svg {
  margin: 0;
  padding: 0;
  transition: all ease 0.3s;
}

body {
  font-weight: 400;
  font-size: 18px;
  line-height: 32px;
  outline: none;
  font-family: "Noto Serif TC", serif !important;
}

.lxgw-font {
  font-family: "LXGW WenKai TC", serif !important;
}

/*Header Css*/
.csm-menu li.menu-item {
  margin: 0 15px;
  border-right: solid 1px #bbbbbb;
  bottom: 0px;
  transition: all ease-in 0.4s;
}

.csm-menu li.menu-item a {
  writing-mode: vertical-rl;
  text-orientation: upright;
  flex-direction: column;
  align-items: flex-start;
}

.csm-menu li.menu-item a span {
  font-size: 0.9rem;
  line-height: 0.9rem;
  color: #777777;
  margin-right: 15px;
  letter-spacing: 0.1rem;
}

.csm-menu li.menu-item:hover {
  bottom: 15px;
}

.csm-logo-sticky,
.csm-menu-sticky,
.csm-logo,
.csm-menu,
.csm-header-sticky {
  transition: all ease-in 2s;
}

.csm-logo-sticky,
.csm-menu-sticky {
  display: none;
  opacity: 0;
}

.csm-logo,
.csm-menu {
  display: block;
  opacity: 1;
}

/*Sticky Header Css*/
.csm-header-sticky.elementor-sticky--effects {
  height: auto;
  max-height: fit-content;
  background-color: #b95756;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.22);
}

.csm-menu-sticky li.menu-item {
  position: relative;
}

.csm-menu-sticky li.menu-item::before {
  content: "";
  display: block;
  width: 1px;
  height: 50%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.csm-menu-sticky li.menu-item a {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  transition: all ease-in 0.2s;
  bottom: 0px;
}

.csm-menu-sticky li.menu-item a span {
  font-size: 0.7rem;
  line-height: 0.7rem;
  color: #fff;
  transition: all ease-in 0.1s;
}

.csm-menu-sticky li.menu-item:hover a {
  bottom: 2px;
}

.csm-menu-sticky li.menu-item:hover a span,
.csm-menu-sticky li.menu-item:hover a {
  color: #f6c445 !important;
}

.elementor-sticky--effects .csm-logo,
.elementor-sticky--effects .csm-menu {
  display: none;
  opacity: 0;
}

.elementor-sticky--effects .csm-logo-sticky,
.elementor-sticky--effects .csm-menu-sticky {
  display: block;
  opacity: 1;
}

.csm-header-sticky.elementor-sticky--effects .elementor-menu-cart__toggle_button svg {
  fill: #fff;
}

.csm-header-sticky.elementor-sticky--effects .elementor-menu-cart__toggle_button:hover svg {
  fill: #f6c445;
}

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

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