@charset "UTF-8";
/*=============================================
Hotel Style Value
=============================================*/
/* Flex */
/* 斷點 */
/*css 初始化 */
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
  margin: 0;
  padding: 0;
}

fieldset,
img,
input,
button {
  border: none;
  padding: 0;
  margin: 0;
  outline-style: none;
}

input {
  padding-top: 0;
  padding-bottom: 0;
  font-family: "SimSun", "宋体";
}

select,
input {
  vertical-align: middle;
}

select,
input,
textarea {
  font-size: 12px;
  margin: 0;
}

textarea {
  resize: none;
}

body {
  background: rgb(255, 255, 255);
  font-family: "JINS_Next", "Noto Sans TC", "Helvetica Neue", "Helvetica", "PingFang TC", "Arial", "Microsoft JhengHei", "微軟正黑體", sans-serif !important;
  letter-spacing: normal;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  color: #666666;
  text-decoration: none;
}

/*=============================================
Common
=============================================*/
* {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
select,
label,
.form-info,
.disclaimer {
  -webkit-user-select: text;
  user-select: text;
}

.view-body {
  font-family: "Noto Sans TC", sans-serif;
  background: #000000;
  height: 100dvh;
  width: 100dvw;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  background-image: url("../images/section01/bg.jpg");
  background-size: cover;
  background-position: center;
}
.view-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.view-body:has(.section-form) {
  background: #FFFFFF;
}
.view-body:has(.section-done) {
  background: #FFFFFF;
}
.view-body:has(.section-TERMS) {
  background: #FFFFFF;
}

.view-wrapper {
  transform: scale(0.1);
  position: absolute;
  width: 1080px;
  height: 1920px;
  overflow: hidden;
  text-align: center;
  transition: box-shadow 0.2s ease-in-out;
  box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.1);
  transform-origin: 0 0;
  background: url("../images/section01/bg.jpg") no-repeat;
}
.view-wrapper:has(.section-form) {
  background: #FFFFFF;
}
.view-wrapper:has(.section-done) {
  background: #FFFFFF;
}
.view-wrapper:has(.section-STYLE.show), .view-wrapper:has(.section-CONFIRM.show), .view-wrapper:has(.section-PREPARE.show), .view-wrapper:has(.section-COMPOSE.show) {
  background: transparent;
}
.view-wrapper:has(.section-TERMS) {
  background: #FFFFFF;
}

.logo-image {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 28px;
  left: 36px;
  z-index: 100;
}

/* Logo 可見性控制 */
.logo-blue {
  display: block;
}

.logo-white {
  display: none;
}

/* 當進入 SECTION_03 時，根據 HOTEL_ID 控制 logo 顯示 */
.section-STYLE[data-hotel="1"] ~ .logo-blue,
.section-STYLE[data-hotel="6"] ~ .logo-blue {
  display: block;
}

.section-STYLE[data-hotel="1"] ~ .logo-white,
.section-STYLE[data-hotel="6"] ~ .logo-white {
  display: none;
}

.section-STYLE[data-hotel="2"] ~ .logo-blue,
.section-STYLE[data-hotel="3"] ~ .logo-blue,
.section-STYLE[data-hotel="5"] ~ .logo-blue {
  display: none;
}

.section-STYLE[data-hotel="2"] ~ .logo-white,
.section-STYLE[data-hotel="3"] ~ .logo-white,
.section-STYLE[data-hotel="5"] ~ .logo-white {
  display: block;
}

.buttons {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 60px;
  z-index: 100;
  width: 100%;
  justify-content: center;
}

.button {
  min-width: 250px;
  background-color: #005AA0;
  border-radius: 24px;
  color: #FFFFFF;
  font-size: 42px;
  padding: 20px 10px;
  cursor: pointer;
  letter-spacing: 10px;
}

.form-button {
  min-width: 400px;
  background-color: #005AA0;
  border-radius: 24px;
  color: #FFFFFF;
  font-size: 42px;
  padding: 20px 10px;
  cursor: pointer;
  letter-spacing: 10px;
}

/*=============================================
    Loading Animation
=============================================*/
.section-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.loading-spinner {
  width: 80px;
  height: 80px;
  border: 6px solid rgba(255, 255, 255, 0.2);
  border-top: 6px solid #005AA0;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  color: #FFFFFF;
  font-size: 36px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 2px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*=============================================
     Menu
=============================================*/
.hamburger-menu {
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: 200;
}

.hamburger {
  margin: 0 auto;
  width: 80px;
  height: 80px;
  position: relative;
  z-index: 1000;
}
.hamburger .bar {
  padding: 0;
  width: 80px;
  height: 10px;
  background-color: #FFFFFF;
  display: block;
  border-radius: 6px;
  transition: all 0.4s ease-in-out;
  position: absolute;
}
.hamburger .bar.bar1 {
  top: 10px;
}
.hamburger .bar.bar2, .hamburger .bar.bar3 {
  top: 35px;
}
.hamburger .bar.bar3 {
  right: 0;
}
.hamburger .bar.bar4 {
  bottom: 10px;
}
.hamburger.hamburger .bar.bar1 {
  transform-origin: 5%;
}
.hamburger.hamburger .bar.bar4 {
  transform-origin: 5%;
}

.menu-content {
  position: fixed;
  z-index: 199;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  transition: all 0.3s ease-in-out;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.menu-content.show {
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-content .menu-content-inner {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 40px 80px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 70%;
  margin: 0 auto;
  margin-top: 25%;
}
.menu-content .menu-content-inner .menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-content .menu-content-inner .menu-list li {
  margin: 0;
  padding: 0;
}
.menu-content .menu-content-inner .menu-list li:not(:last-child) {
  border-bottom: 2px solid #333333;
}
.menu-content .menu-content-inner .menu-list li .menu-item {
  display: flex;
  align-items: center;
  padding: 40px 0;
  text-decoration: none;
  color: #333333;
  font-size: 42px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}
.menu-content .menu-content-inner .menu-list li .menu-item .menu-icon {
  color: #000000;
  font-size: 30px;
  margin-right: 15px;
  transition: all 0.3s ease;
}

.menu-toggle {
  position: absolute;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}
.menu-toggle:checked ~ .menu-content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.menu-toggle:checked + label > .hamburger .bar.bar1 {
  transform: rotate(45deg);
  height: 10px;
  width: 80px;
}
.menu-toggle:checked + label > .hamburger .bar.bar2 {
  transform: rotate(-45deg);
  height: 10px;
  background-color: transparent;
}
.menu-toggle:checked + label > .hamburger .bar.bar3 {
  transform: rotate(45deg);
  height: 10px;
  background-color: transparent;
}
.menu-toggle:checked + label > .hamburger .bar.bar4 {
  transform: rotate(-45deg);
  height: 10px;
  width: 80px;
}

/*=============================================
Section
=============================================*/
section {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.section-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/*=============================================
Section-INTRO
=============================================*/
.section-INTRO {
  position: relative;
  overflow: hidden;
  transition: opacity 0.3s ease-in-out;
}
.section-INTRO .intro-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 105;
}

.section-INTRO:not(.hide) ~ .hamburger-menu {
  display: none;
}

/*=============================================
Section-KV
=============================================*/
.section-KV .KV {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.section-KV .KV .kv-title {
  margin-top: 300px;
}
.section-KV .KV .kv-anniversary {
  margin-top: 30px;
}
.section-KV .KV .kv-info {
  margin-top: 250px;
  padding-right: 40px;
}
.section-KV .kv-ambassador {
  position: absolute;
  bottom: -400px;
  right: -80px;
}
.section-KV .button-start {
  cursor: pointer;
}

/*=============================================
Section-HOTEL
=============================================*/
.section-HOTEL .section-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.section-HOTEL .control-buttons {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: -50px;
}
.section-HOTEL .control-buttons .btn {
  width: 100px;
  height: 100px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}
.section-HOTEL .control-buttons .btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  transition: all 0.3s ease;
}
.section-HOTEL .control-buttons .btn.btn-prev::before {
  border-style: solid;
  border-width: 24px 40px 24px 0;
  border-color: transparent #000000 transparent transparent;
}
.section-HOTEL .control-buttons .btn.btn-next::before {
  border-style: solid;
  border-width: 24px 0 24px 40px;
  border-color: transparent transparent transparent #000000;
}
.section-HOTEL .control-buttons .btn:hover:not(:disabled) {
  transform: scale(1.1);
}
.section-HOTEL .control-buttons .btn:hover:not(:disabled)::before {
  transform: translate(-50%, -50%) scale(1.1);
}
.section-HOTEL .control-buttons .btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.section-HOTEL .control-buttons .btn:disabled::before {
  border-color: transparent #666666 transparent transparent;
}
.section-HOTEL .control-buttons .btn:disabled.btn-next::before {
  border-color: transparent transparent transparent #666666;
}

.hotel-list {
  height: 1300px;
  width: 100%;
  margin-top: -100px;
  overflow: hidden;
  margin: 0 auto;
}
.hotel-list .swiper-wrapper {
  height: 100%;
}
.hotel-list .swiper-slide {
  width: 900px !important;
  flex-shrink: 0;
}
.hotel-list .hotel-item {
  width: 100%;
  height: 100%;
  font-size: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../images/section02/select.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
.hotel-list .hotel-item.hotel-item-0 {
  background-position: 5px -5px;
  width: 120px !important;
  pointer-events: none;
}
.hotel-list .hotel-item.hotel-item-1 {
  background-position: 0 0;
}
.hotel-list .hotel-item.hotel-item-2 {
  background-position: -900px 0;
}
.hotel-list .hotel-item.hotel-item-3 {
  background-position: -1750px 0;
}
.hotel-list .hotel-item.hotel-item-4 {
  background-position: -2620px 0;
}
.hotel-list .hotel-item.hotel-item-5 {
  background-position: -3480px 0;
}
.hotel-list .hotel-item.hotel-item-6 {
  background-position: -4355px 0;
}
.hotel-list .hotel-item.hotel-item-7 {
  background-position: -5230px 0;
  width: 120px !important;
  pointer-events: none;
}

.hotel-info {
  max-width: 860px;
  margin: 0 auto;
  margin-top: 25px;
}

/*=============================================
Section-STYLE
=============================================*/
.section-STYLE .style-list .style-item {
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-clip-path: polygon(0% 35%, 100% 0%, 100% 65%, 0% 100%);
          clip-path: polygon(0% 35%, 100% 0%, 100% 65%, 0% 100%);
  transition: background-size 0.3s ease;
  position: relative;
  overflow: hidden;
}
.section-STYLE .style-list .style-item .reveal-overlay {
  position: absolute;
  inset: 0;
  background: rgb(0, 0, 0);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
  z-index: 2;
}
.section-STYLE .style-list .style-item .bg-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity, transform;
  z-index: 1;
  filter: saturate(0.6);
  transition: all 0.3s ease;
}
.section-STYLE .style-list .style-item.selected {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}
.section-STYLE .style-list .style-item.selected .bg-layer {
  filter: saturate(1);
  background-size: 110% !important;
  transition: all 0.3s ease;
}
.section-STYLE .style-list.items-2 {
  padding-top: 250px;
}
.section-STYLE .style-list.items-2 .style-item-1 {
  height: 714px;
}
.section-STYLE .style-list.items-2 .style-item-2 {
  height: 880px;
  margin: -220px 0;
}
.section-STYLE .style-list.items-3 {
  padding-top: 80px;
}
.section-STYLE .style-list.items-3 .style-item-1,
.section-STYLE .style-list.items-3 .style-item-3 {
  height: 660px;
}
.section-STYLE .style-list.items-3 .style-item-2 {
  height: 770px;
  margin: -200px 0;
}
.section-STYLE[data-hotel="1"] {
  background-image: url("../images/section03/bg-1.webp");
}
.section-STYLE[data-hotel="1"] .style-list .reveal-overlay {
  background: linear-gradient(135deg, rgb(80, 80, 80), rgb(160, 160, 160));
}
.section-STYLE[data-hotel="2"] {
  background-image: url("../images/section03/bg-2.webp");
}
.section-STYLE[data-hotel="2"] .style-list .reveal-overlay {
  background: linear-gradient(135deg, rgb(70, 110, 135), rgb(160, 190, 210));
}
.section-STYLE[data-hotel="3"] {
  background-image: url("../images/section03/bg-3.webp");
}
.section-STYLE[data-hotel="3"] .style-list .reveal-overlay {
  background: linear-gradient(135deg, rgb(71, 139, 63), rgb(135, 190, 127));
}
.section-STYLE[data-hotel="4"] {
  background-image: url("../images/section03/bg-4.webp");
}
.section-STYLE[data-hotel="4"] .style-list .reveal-overlay {
  background: linear-gradient(135deg, rgb(55, 95, 120), rgb(140, 185, 210));
}
.section-STYLE[data-hotel="5"] {
  background-image: url("../images/section03/bg-5.webp");
}
.section-STYLE[data-hotel="5"] .style-list .reveal-overlay {
  background: linear-gradient(135deg, rgb(190, 190, 190), rgb(255, 255, 255));
}
.section-STYLE[data-hotel="6"] {
  background-image: url("../images/section03/bg-6.webp");
}
.section-STYLE[data-hotel="6"] .style-list .reveal-overlay {
  background: linear-gradient(135deg, rgb(140, 140, 140), rgb(210, 210, 210));
}

/*=============================================
Section-CONFIRM
=============================================*/
.section-CONFIRM .style-preview {
  width: 100%;
  height: 100%;
}
.section-CONFIRM[data-hotel="1"] {
  background-image: url("../images/section03/bg-1.webp");
}
.section-CONFIRM[data-hotel="1"] .confirm-overlay {
  background: linear-gradient(135deg, rgb(80, 80, 80), rgb(160, 160, 160));
}
.section-CONFIRM[data-hotel="2"] {
  background-image: url("../images/section03/bg-2.webp");
}
.section-CONFIRM[data-hotel="2"] .confirm-overlay {
  background: linear-gradient(135deg, rgb(70, 110, 135), rgb(160, 190, 210));
}
.section-CONFIRM[data-hotel="3"] {
  background-image: url("../images/section03/bg-3.webp");
}
.section-CONFIRM[data-hotel="3"] .confirm-overlay {
  background: linear-gradient(135deg, rgb(71, 139, 63), rgb(135, 190, 127));
}
.section-CONFIRM[data-hotel="4"] {
  background-image: url("../images/section03/bg-4.webp");
}
.section-CONFIRM[data-hotel="4"] .confirm-overlay {
  background: linear-gradient(135deg, rgb(55, 95, 120), rgb(140, 185, 210));
}
.section-CONFIRM[data-hotel="5"] {
  background-image: url("../images/section03/bg-5.webp");
}
.section-CONFIRM[data-hotel="5"] .confirm-overlay {
  background: linear-gradient(135deg, rgb(190, 190, 190), rgb(255, 255, 255));
}
.section-CONFIRM[data-hotel="6"] {
  background-image: url("../images/section03/bg-6.webp");
}
.section-CONFIRM[data-hotel="6"] .confirm-overlay {
  background: linear-gradient(135deg, rgb(140, 140, 140), rgb(210, 210, 210));
}

/*=============================================
Section-PREPARE
=============================================*/
.section-PREPARE .style-prepare {
  width: 100%;
  height: 100%;
}
.section-PREPARE[data-hotel="1"] {
  background-image: url("../images/section03/bg-1.webp");
}
.section-PREPARE[data-hotel="1"] .prepare-overlay {
  background: linear-gradient(135deg, rgb(80, 80, 80), rgb(160, 160, 160));
}
.section-PREPARE[data-hotel="2"] {
  background-image: url("../images/section03/bg-2.webp");
}
.section-PREPARE[data-hotel="2"] .prepare-overlay {
  background: linear-gradient(135deg, rgb(70, 110, 135), rgb(160, 190, 210));
}
.section-PREPARE[data-hotel="3"] {
  background-image: url("../images/section03/bg-3.webp");
}
.section-PREPARE[data-hotel="3"] .prepare-overlay {
  background: linear-gradient(135deg, rgb(71, 139, 63), rgb(135, 190, 127));
}
.section-PREPARE[data-hotel="4"] {
  background-image: url("../images/section03/bg-4.webp");
}
.section-PREPARE[data-hotel="4"] .prepare-overlay {
  background: linear-gradient(135deg, rgb(55, 95, 120), rgb(140, 185, 210));
}
.section-PREPARE[data-hotel="5"] {
  background-image: url("../images/section03/bg-5.webp");
}
.section-PREPARE[data-hotel="5"] .prepare-overlay {
  background: linear-gradient(135deg, rgb(190, 190, 190), rgb(255, 255, 255));
}
.section-PREPARE[data-hotel="6"] {
  background-image: url("../images/section03/bg-6.webp");
}
.section-PREPARE[data-hotel="6"] .prepare-overlay {
  background: linear-gradient(135deg, rgb(140, 140, 140), rgb(210, 210, 210));
}

/*=============================================
Header Section
=============================================*/
.header-section {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 15px;
}
.header-section .logo-image {
  width: 80px;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.header-section .brand-text {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.header-section .brand-text .brand-name {
  font-size: 32px;
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.5px;
}
.header-section .brand-text .trademark {
  font-size: 18px;
  font-weight: 600;
  color: #666666;
  vertical-align: super;
  line-height: 1;
}

/*=============================================
Section-FORM Section-DONE
=============================================*/
.section-form {
  background-image: url("../images/form/bg-form.jpg");
  background-size: cover;
}
.section-form .section-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 420px;
}
.section-form .form-info {
  font-size: 42px;
  line-height: 1.6;
}
.section-form .form-info .celeb-name {
  text-decoration: underline;
}
.section-form .form-info b {
  color: #ab7456;
  font-size: 64px;
  font-weight: 700;
}
.section-form .form-info small {
  font-size: 24px;
}
.section-form .form-container {
  display: flex;
  gap: 30px;
  flex-direction: column;
  margin-top: 250px;
  width: 900px;
}
.section-form .form-container .form-group {
  display: flex;
  flex-direction: row;
  font-size: 32px;
}
.section-form .form-container .form-group label {
  color: #2e2923;
  font-weight: 700;
  min-width: 5em;
  text-align: left;
}
.section-form .form-container .form-group input,
.section-form .form-container .form-group select {
  border: 1px solid #dad8d7;
  font-size: 32px;
  padding: 5px;
  width: 400px;
}
.section-form .form-container .form-group select {
  width: 410px;
}
.section-form .form-container .form-group .time-range-group {
  display: flex;
  align-items: center;
  gap: 15px;
}
.section-form .form-container .form-group .time-range-group select {
  width: 180px;
  flex: 1;
}
.section-form .form-container .form-group .time-range-group .time-separator {
  color: #2e2923;
  font-weight: 700;
  font-size: 28px;
}
.section-form .submit-btn {
  width: 250px;
  min-width: 250px;
  margin-left: 230px;
}
.section-form .ambassador-image {
  position: absolute;
  right: -40px;
  top: 20%;
}

.section-done {
  background-image: url("../images/form/bg-done.jpg");
  background-size: cover;
}
.section-done .serial-number {
  color: #ffffff;
  font-size: 72px;
  font-weight: 700;
  margin-top: 320px;
  background-color: #777472;
  padding: 20px;
  border-radius: 5px;
  display: inline-block;
  width: 620px;
}
.section-done .buttons {
  bottom: 1150px;
  gap: 20px;
  width: 750px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-done .ambassador-image {
  position: absolute;
  right: -40px;
  bottom: 0;
}

.section-query .KV {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.section-query .KV .kv-title {
  margin-top: 300px;
}
.section-query .KV .kv-anniversary {
  margin-top: 30px;
}
.section-query .kv-ambassador {
  position: absolute;
  bottom: -400px;
  right: -80px;
}
.section-query .form-container {
  margin-top: 350px;
}
.section-query .form-container p {
  font-size: 64px;
}
.section-query .form-container input {
  border: 1px solid #000000;
  font-size: 60px;
  padding: 5px;
  width: 500px;
  margin: 50px 0;
  background-color: transparent;
}

/*=============================================
Section-COMPOSE
=============================================*/
.section-COMPOSE .buttons .info {
  position: absolute;
  top: -230px;
  font-size: 46px;
}
.section-COMPOSE .buttons .info .title {
  position: relative;
  font-size: 60px;
}
.section-COMPOSE .buttons .info .title::before, .section-COMPOSE .buttons .info .title::after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 20%;
}
.section-COMPOSE .buttons .info .title::before {
  right: 0.5em;
  margin-left: -50%;
}
.section-COMPOSE .buttons .info .title::after {
  left: 0.5em;
  margin-right: -50%;
}
.section-COMPOSE .frame-image-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.section-COMPOSE .frame-image-container .frame-image,
.section-COMPOSE .frame-image-container .frame-share-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
}
.section-COMPOSE .frame-image-container .frame-share-image {
  z-index: 10;
}
.section-COMPOSE .frame-image-container .background-image {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 5;
}
.section-COMPOSE .frame-image-container .photo {
  position: absolute;
  top: 25%;
  left: 25%;
  max-width: 500px;
  max-height: 500px;
  z-index: 6;
  cursor: move;
}
.section-COMPOSE .frame-image-container .photo img {
  width: 100%;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}

/*=============================================
Section-TERMS
=============================================*/
.section-TERMS {
  background-image: none;
  background-color: #ffffff;
  overflow-y: auto;
}

.section-TERMS + .hamburger-menu .hamburger .bar {
  background-color: #000000;
}

.terms-header {
  font-size: 36px;
  line-height: 1.6;
  font-weight: bold;
  margin-top: 300px;
  margin-bottom: 80px;
}

.terms-content {
  padding: 0 80px;
  text-align: left;
}
.terms-content .terms-item {
  margin-bottom: 20px;
}
.terms-content .step-item {
  margin-bottom: 30px;
}
.terms-content .step-tag {
  background-color: #44448a;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 30px;
  margin: 0 15px 0 0;
  font-size: 26px;
}
.terms-content h5 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}
.terms-content p,
.terms-content li {
  font-size: 32px;
  line-height: 1.6;
}
.terms-content ol,
.terms-content ul {
  padding-left: 35px;
  margin-bottom: 20px;
}
.terms-content ul {
  list-style: disc;
}