@charset "UTF-8";
:root {
  --popup-bg-background-color: rgba(0, 0, 0, 0.178);
  --popup-bg-backdrop-filter: blur(4px);
  --bottom-popup-overflow: hidden;
  --right-popup-border-radius-pc: 15px 0 0 15px;
  --bottom-popup-border-radius-mobile: 16px 16px 0 0;
  --bottom-popup-header-font-size-mobile: 18px;
  --bottom-popup-header-line-height-mobile: normal;
  --bottom-popup-header-font-weight-mobile: 400;
  --bottom-popup-header-padding-mobile: 0;
  --bottom-popup-header-box-shadow-mobile: 0px 1px 4px 0px rgba(0, 0, 0, 0.07);
  --bottom-popup-header-min-height-mobile: 48px;
  --bottom-popup-body-padding-mobile: 24px 24px 36px 24px;
}

@media (max-height: 576px) {
  .bottomPopup-m {
    line-height: var(--bottom-popup-title-line-height-mobile);
    font-size: var(--bottom-popup-title-font-size-mobile);
    line-height: var(--bottom-popup-title-line-height-mobile);
    font-weight: var(--bottom-popup-title-padding-mobile);
  }
}

/*
視窗共用動畫

視窗外面黑色背景 Com_PopupBg

半遮套組(靠右半遮PC+置底半遮M) Com_halfPopup

靠右半遮(只有PC) Com_rightPopup-pc

置底半遮(只有M) Com_bottomPopup

*/
/*視窗外面黑色背景*/
.Com_PopupBg {
  overflow: hidden;
  transition: 0.6s;
  background-color: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  display: none;
}

.active.Com_PopupBg {
  background-color: rgba(0, 0, 0, 0.178);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

/*半遮套組(靠右半遮PC+置底半遮M)*/
.Com_halfPopup {
  transition: 0.6s ease-in-out;
  right: -100dvw;
}
@media (max-width: 576px) {
  .Com_halfPopup {
    right: auto;
    bottom: -100dvh;
  }
}

.active .Com_halfPopup {
  right: 0;
}
@media (max-width: 576px) {
  .active .Com_halfPopup {
    right: auto;
    bottom: 0;
  }
}

/*靠右半遮-PC*/
@media (min-width: 576px) {
  .Com_rightPopup-pc {
    transition: 0.6s ease-in-out;
    right: -100dvw;
  }
  .active .Com_rightPopup-pc {
    right: 0;
  }
}
/*置底半遮*/
.Com_bottomPopup {
  transition: 0.6s ease-in-out;
  bottom: -100dvh;
}

.active .Com_bottomPopup {
  bottom: 0;
}/*# sourceMappingURL=CSS_component.css.map */