@import "./normalize.css";
@import "./font.css?v=3.0";
@import "./variables.css?v=2.0";
@import "./grid.css?v=2.0";
@import "./icon.css?v=3.0";
@import "./nav.css?v=2.0";
@import "./drawer.css?v=2.0";
@import "./section/00-section.css?v=2.0";
@import "./section/01-brand.css?v=2.1";
@import "./section/02-tree.css?v=2.2";
@import "./section/03-why.css?v=3.0";
@import "./section/04-evaluate.css?v=3.0";
@import "./section/05-how.css?v=3.0";
@import "./section/06-where.css?v=3.0";
@import "./section/07-trivia.css?v=3.0";
@import "./section/08-activity.css?v=3.0";
@import "./section/09-esg.css?v=2.1";
@import "./section/10-contact.css?v=4.0";
@import "./section/11-more.css?v=3.0";
@import "./footer.css?v=2.0";
@import "./modal.css?v=5.0";

html, body {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--text-size-xs);
  background-color: var(--color-5);
  scroll-behavior: smooth; /* Not support Safari */
  line-height: 1.5;
}

body.disableScroll {
  touch-action: none; /* for iOS Safari */
}

* {
  -webkit-overflow-scrolling: touch;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a {
  text-decoration: none;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

hr {
  background-image: url(../../assets/eggfreezing/egg.png); /* webp 檔案大小更大不採用 */
  background-size: contain;
  border: 0;
  max-width: 1424px;
  width: 100%;
  height: 13px;
}

h1, h2 {
  margin: 0;
  letter-spacing: 2.4px;
}

h1 {
  color: var(--color-1);
  font-size: var(--text-size-xl);
  font-family: var(--sans-medium);
  font-weight: normal;
}

h2 {
  color: var(--color-12);
  font-size: var(--text-size-lg);
  font-family: var(--sans-light);
  font-weight: 300;
  min-width: 265px; /* for 手機版標題靠左 */
  width: 68vw;
  text-align: left;
  letter-spacing: 0.74px;
}

h3 {
  width: 100%;
  color: var(--color-7);
  margin-top: 0;
  font-family: var(--sans-bold);
  font-weight: 700;
}

p {
  margin: 0;
  line-height: 1.5;
}

figcaption {
  font-size: var(--text-size-md);
  color: var(--color-7);
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.absolute {
  position: absolute;
}

.text-highlight {
  color: var(--color-7);
}

.circle {
  border-radius: 50%;
}

#contact-button {
  position: fixed;
  right: 0;
  bottom: 20vh;
  width: 75px;
  height: 140px;
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  z-index: 1;
  filter: drop-shadow(var(--shadow-3));
}

.webp #contact-button {
  background-image: url(../../assets/eggfreezing/contact.webp);
}

.no-webp #contact-button {
  background-image: url(../../assets/eggfreezing/contact.png);
}

.shadow {
  position: fixed;
  z-index: 2;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.shadow-main {
  background-color: var(--shadow-1);
}

.pionter {
  cursor: pointer;
}

.pe-none {
  pointer-events: none;
}

.loader {
  border: 5px solid var(--color-9);
  border-top: 5px solid var(--color-7);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1.5s linear infinite;
}

.medium {
  font-family: var(--sans-medium);
}

.bold {
  font-family: var(--sans-bold);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media screen and (min-width: 1024px) {
  h1 {
    font-size: var(--text-size-xxxl);
  }
  
  h2 {
    font-size: var(--text-size-xxl);
    letter-spacing: 4px;
    width: auto;
    min-width: auto;
  }
}