@charset "utf-8";

.pc2 { display:inherit!important;}
.mobile2 { display:none!important;}
body { overflow-x: hidden;}
.index_bg {
    /* background-image: url(../images/bg1.jpg?v=1); */
    width: 100%;
    display: block;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size:cover;
background: linear-gradient(to bottom, #ffe070 0%, #ffce46 100%);


}


.link:hover {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 1;
    transition: opacity 0.35s, -webkit-transform 0.7s;
    transition: opacity 0.35s, transform 0.7s;
    transition: opacity 0.35s, transform 0.7s, -webkit-transform 0.7s;
    will-change: opacity, transform;
    -webkit-filter: brightness(1.08);
    cursor: pointer;
}
.link2:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
    transition: opacity 0.35s, -webkit-transform 0.7s;
    transition: opacity 0.35s, transform 0.7s;
    transition: opacity 0.35s, transform 0.7s, -webkit-transform 0.7s;
    will-change: opacity, transform;
    -webkit-filter: brightness(1.08);
    cursor: pointer;
}
.link ,.link2 {transition: opacity 0.35s, transform 0.7s;will-change: opacity, transform;}
.logo-title {padding: 40px 0;}
.login_box {text-align: center;padding-top: 20px;}
.login_title_bar {position: absolute; z-index: 1; background: #ec9430; color: #fff; line-height: 50px; width: 100%; max-width: 80px; border-radius: 40px; font-weight: bold;}
.login_li {position: relative; width: 100%; max-width: 400px; background: #fff; border-radius: 40px; padding: 6px;margin: 0 auto 20px;box-shadow: 3px 5px 5px 0px rgb(0 0 0 / 55%);}
.form-control2 {width: 100%; max-width: 400px;padding: 10px 7px 10px 90px; border-radius: 40px; border: 0; position: relative;background: #fff!important;}
.index-enter {width: 100%;max-width: 200px;margin: 0 auto 20px;padding: 4px;border-radius: 30px; overflow: hidden; border: 1px #fff solid; background: linear-gradient(to bottom, #f15a29 0%, #fbb040 100%);}
.loginbt {width: 100%;height: 100%; position: relative; border-radius: 40px; color: #fff; padding: 3px;background: #000;}
.loginbt span {text-shadow: 0em 1px 3px black,0em 1px 3px black,0em 1px 3px black;font-size: 20px;font-weight: 600;}


  :root {
      --primary: #ec9430;
      --primary-dark: #eb9330;
      --primary-deep: #db6e0d;
      --primary-light: #fff1df;
      --primary-soft: #fff8ef;

      --white: #ffffff;
      --ink: #24313a;
      --ink-soft: #5f6870;
      --line: #efd8bc;
      --success: #28745d;

      --shadow-sm: 0 8px 24px rgba(55, 35, 15, 0.08);
      --shadow-md: 0 18px 48px rgba(55, 35, 15, 0.14);
      --shadow-lg: 0 26px 70px rgba(55, 35, 15, 0.18);

      --radius-sm: 14px;
      --radius-md: 22px;
      --radius-lg: 30px;
      --container: 1120px;
      
      	--r: 22px;
	--r-lg: 30px;
	--container: 980px
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }



    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    a {
      -webkit-tap-highlight-color: transparent;
    }

    .page-shell {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
    }

    .page-shell::before,
    .page-shell::after {
      position: absolute;
      z-index: -1;
      width: 280px;
      height: 280px;
      content: "";
      border: 48px solid rgba(236, 148, 48, 0.08);
      border-radius: 50%;
    }

    .page-shell::before {
      top: 150px;
      left: -170px;
    }

    .page-shell::after {
      right: -190px;
      bottom: 120px;
    }

    .container {
      width: min(calc(100% - 32px), var(--container));
      margin-inline: auto;
    }

    /* ===== Header ===== */
    .site-header {
      padding: 22px 0 12px;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 84px;
      padding: 16px 22px;
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid rgba(236, 148, 48, 0.18);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .brand {
      display: inline-flex;
      gap: 13px;
      align-items: center;
      min-width: 0;
    }

    .brand-mark {
      display: grid;
      flex: 0 0 auto;
      width: 52px;
      height: 52px;
      place-items: center;
      color: var(--white);
      font-size: 21px;
      font-weight: 900;
      letter-spacing: -0.06em;
      background:
        linear-gradient(145deg, #f6b15e, var(--primary) 48%, var(--primary-dark));
      border-radius: 17px;
      box-shadow: 0 10px 22px rgba(236, 148, 48, 0.28);
      transform: rotate(-4deg);
    }

    .brand-text {
      min-width: 0;
    }

    .brand-name {
      display: block;
      overflow: hidden;
      font-size: clamp(20px, 3vw, 28px);
      font-weight: 900;
      line-height: 1.2;
      letter-spacing: 0.03em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .brand-subtitle {
      display: block;
      margin-top: 2px;
      color: var(--ink-soft);
      font-size: 13px;
      letter-spacing: 0.08em;
    }

    .header-tag {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 10px 14px;
      color: var(--primary-deep);
      font-size: 14px;
      font-weight: 800;
      background: var(--primary-light);
      border: 1px solid rgba(236, 148, 48, 0.24);
      border-radius: 999px;
    }

    .header-tag::before {
      width: 8px;
      height: 8px;
      content: "";
      background: var(--primary);
      border-radius: 50%;
      box-shadow: 0 0 0 5px rgba(236, 148, 48, 0.12);
    }

    /* ===== Hero ===== */
    .hero1 {
      padding: 12px 0 20px;
    }

    .hero-card {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: clamp(40px, 7vw, 82px) clamp(22px, 7vw, 76px);
      text-align: center;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 239, 0.93)),
        linear-gradient(135deg, var(--white), var(--primary-light));
      border: 1px solid rgba(236, 148, 48, 0.28);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
    }

    .hero-card::before {
      position: absolute;
      z-index: -1;
      top: -220px;
      right: -120px;
      width: 440px;
      height: 440px;
      content: "";
      background: radial-gradient(circle, rgba(236, 148, 48, 0.24), rgba(236, 148, 48, 0));
      border-radius: 50%;
    }

    .hero-card::after {
      position: absolute;
      z-index: -1;
      bottom: -160px;
      left: -100px;
      width: 360px;
      height: 360px;
      content: "";
      background: radial-gradient(circle, rgba(204, 116, 22, 0.14), rgba(204, 116, 22, 0));
      border-radius: 50%;
    }

    .hero-kicker {
      display: inline-flex;
      gap: 9px;
      align-items: center;
      justify-content: center;
      padding: 9px 16px;
      margin-bottom: 22px;
      color: var(--primary-deep);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.12em;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(236, 148, 48, 0.28);
      border-radius: 999px;
      box-shadow: var(--shadow-sm);
    }

    .hero-kicker svg {
      width: 18px;
      height: 18px;
    }

    .hero-date {
      margin: 0 0 8px;
      color: var(--primary-dark);
      font-size: clamp(27px, 5vw, 52px);
      font-weight: 900;
      line-height: 1.15;
      letter-spacing: 0.02em;
    }

    .hero-title {
      margin: 0;
      color: #de1574;
      font-size: clamp(56px, 11vw, 112px);
      font-weight: 950;
      line-height: 1.08;
      letter-spacing: 0.06em;
      text-indent: 0.06em;
      text-shadow: 0 6px 0 rgba(236, 148, 48, 0.10);
    }

    .hero-title-en {
    margin: 8px 0 0;
    color: #de1574;
    font-size: clamp(20px, 3.4vw, 40px);
    font-weight: 800;
    }

    .location {
      display: inline-flex;
      gap: 8px;
      align-items: flex-start;
      justify-content: center;
      max-width: 100%;
      padding: 13px 18px;
      margin-top: 22px;
      color: #5d3a19;
      font-size: clamp(15px, 2.4vw, 20px);
      font-weight: 700;
      background: rgba(255, 255, 255, 0.75);
      border: 1px solid rgba(236, 148, 48, 0.22);
      border-radius: 999px;
    }

    .location svg {
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      margin-top: 4px;
      color: var(--primary-dark);
    }

    .hero-decoration {
      position: absolute;
      pointer-events: none;
      opacity: 0.52;
    }

    .hero-decoration.left {
      bottom: 28px;
      left: 34px;
      width: 84px;
      transform: rotate(-12deg);
    }

    .hero-decoration.right {
      top: 30px;
      right: 36px;
      width: 95px;
      transform: rotate(13deg);
    }

    /* ===== Registration information ===== */
    .registration-section {
      padding: 20px 0;
    }

    .section-card {
      position: relative;
      padding: clamp(24px, 5vw, 44px);
      background: var(--white);
      border: 1px solid rgba(236, 148, 48, 0.22);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
    }

    .section-heading {
      margin: 0 0 24px;
      text-align: center;
    }

    .section-eyebrow {
      display: block;
      margin-bottom: 7px;
      color: var(--primary-dark);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    .section-title {
      margin: 0;
      font-size: clamp(28px, 4.6vw, 42px);
      line-height: 1.2;
      letter-spacing: 0.04em;
    }

    .registration-panel {
      display: block;
      grid-template-columns: 1fr auto 1fr;
      gap: 22px;
      align-items: stretch;
      max-width: 840px;
      margin: 0 auto;
    }

    .date-item {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: center;
    min-width: 0;
    padding: 22px;
    background: linear-gradient(145deg, var(--primary-soft), #ffffff);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    justify-content: center;
        color: #de1574;
    }

    .date-icon {
      display: grid;
      flex: 0 0 auto;
      width: 52px;
      height: 52px;
      place-items: center;
      color: var(--white);
      background: linear-gradient(145deg, var(--primary), var(--primary-dark));
      border-radius: 16px;
      box-shadow: 0 10px 22px rgba(236, 148, 48, 0.23);
    }

    .date-icon svg {
      width: 25px;
      height: 25px;
    }

    .date-label {
      display: block;
      color: var(--ink-soft);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .date-value {
      display: block;
      margin-top: 2px;
      font-size: clamp(18px, 2.7vw, 24px);
      font-weight: 900;
      line-height: 1.3;
    }

    .timeline-arrow {
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      align-self: center;
      color: var(--primary-dark);
      background: var(--primary-light);
      border-radius: 50%;
    }

    .timeline-arrow svg {
      width: 22px;
      height: 22px;
    }

    /* ===== Actions ===== */
    .action-section {
      padding: 4px 0 20px;
    }

    .action-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .action-button {
      position: relative;
      display: flex;
      gap: 18px;
      align-items: center;
      min-height: 118px;
      padding: 24px 26px;
      overflow: hidden;
      border: 0;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-md);
      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
            border: 1px #fff solid;
    }

    .action-button::before {
      position: absolute;
      top: -40%;
      left: -38%;
      width: 40%;
      height: 180%;
      content: "";
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.42),
        transparent
      );
      transform: rotate(18deg);
      transition: left 0.65s ease;
    }

    .action-button:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
    }

    .action-button:hover::before {
      left: 120%;
    }

    .action-button:active {
      transform: translateY(-1px) scale(0.99);
    }

    .action-button:focus-visible {
      outline: 4px solid rgba(236, 148, 48, 0.28);
      outline-offset: 4px;
    }

    .action-button.primary {
      color: var(--white);
      background:
        linear-gradient(135deg, #f5aa52 0%, #e91c76 46%, var(--primary-dark) 100%)
    }

    .action-button.secondary {
      color: var(--primary-deep);
      background: var(--white);
      border: 2px solid rgba(236, 148, 48, 0.42);
    }

    .action-icon {
      display: grid;
      flex: 0 0 auto;
      width: 58px;
      height: 58px;
      place-items: center;
      border-radius: 18px;
    }

    .primary .action-icon {
      color: var(--primary-deep);
      background: rgba(255, 255, 255, 0.9);
    }

    .secondary .action-icon {
      color: var(--white);
      background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    }

    .action-icon svg {
      width: 27px;
      height: 27px;
    }

    .action-copy {
      min-width: 0;
      text-align: left;
    }

    .action-title {
      display: block;
      font-size: clamp(24px, 3.5vw, 34px);
      font-weight: 900;
      line-height: 1.2;
      letter-spacing: 0.04em;
    }

    .action-description {
      display: block;
      margin-top: 5px;
      font-size: 14px;
      font-weight: 700;
      opacity: 0.84;
    }

    .action-arrow {
      display: grid;
      width: 42px;
      height: 42px;
      margin-left: auto;
      place-items: center;
      border-radius: 50%;
      transition: transform 0.25s ease;
    }

    .primary .action-arrow {
      color: var(--primary-deep);
      background: rgba(255, 255, 255, 0.88);
    }

    .secondary .action-arrow {
      color: var(--primary-dark);
      background: var(--primary-light);
    }

    .action-button:hover .action-arrow {
      transform: translateX(5px);
    }

    .action-arrow svg {
      width: 20px;
      height: 20px;
    }

    /* ===== Notice ===== */
    .notice-section {
      padding: 0 0 52px;
    }

    .notice-card {
      position: relative;
      overflow: hidden;
      padding: clamp(26px, 5vw, 46px);
      background:
        linear-gradient(150deg, #fffaf3, #ffffff 55%, #fff4e6);
      border: 1px solid rgba(236, 148, 48, 0.24);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
    }

    .notice-card::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 9px;
      height: 100%;
      content: "";
      background: linear-gradient(180deg, #f5aa52, var(--primary-dark));
    }

    .notice-header {
      display: flex;
      gap: 16px;
      align-items: center;
      margin-bottom: 20px;
    }

    .notice-icon {
      display: grid;
      flex: 0 0 auto;
      width: 54px;
      height: 54px;
      place-items: center;
      color: var(--white);
      background: linear-gradient(145deg, var(--primary), var(--primary-dark));
      border-radius: 17px;
      box-shadow: 0 12px 25px rgba(236, 148, 48, 0.24);
    }

    .notice-icon svg {
      width: 27px;
      height: 27px;
    }

    .notice-title {
      margin: 0;
      font-size: clamp(25px, 4vw, 36px);
      line-height: 1.2;
    }

    .notice-subtitle {
      margin: 4px 0 0;
      color: var(--ink-soft);
      font-size: 14px;
    }

    .notice-list {
      display: grid;
      gap: 5px;
      padding: 0;
      margin: 0;
      list-style: none;
      counter-reset: notice;
    }

    .notice-list li {
      position: relative;
      padding: 18px 20px 18px 20px;
      color: #414141;
      font-size: clamp(15px, 2.5vw, 15px);
      font-weight: 400;
      line-height: 1.75;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(236, 148, 48, 0.17);
      border-radius: 17px;
      counter-increment: notice;
    }

    .notice-list li::before {
      position: absolute;
      top: 17px;
      left: 18px;
      display: grid;
      width: 30px;
      height: 30px;
      place-items: center;
      color: var(--white);
      font-size: 14px;
      font-weight: 900;
     /* content: counter(notice); */
      background: var(--primary);
      border-radius: 50%;
    }

    .highlight {
      color: var(--primary-dark);
    }

    .notice-badge {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 8px 13px;
      margin-top: 18px;
      color: var(--success);
      font-size: 14px;
      font-weight: 800;
      background: #eaf6f2;
      border: 1px solid rgba(40, 116, 93, 0.18);
      border-radius: 999px;
    }

    .notice-badge svg {
      width: 18px;
      height: 18px;
    }

    /* ===== Footer ===== */
    .site-footer {
      padding: 0 0 34px;
      text-align: center;
      color: var(--ink-soft);
      font-size: 13px;
    }

    /* ===== Entry animation ===== */
    .reveal {
      animation: fade-up 0.7s both;
    }

    .reveal.delay-1 {
      animation-delay: 0.08s;
    }

    .reveal.delay-2 {
      animation-delay: 0.16s;
    }

    .reveal.delay-3 {
      animation-delay: 0.24s;
    }

@keyframes fade-up {
      from {
        opacity: 0;
        transform: translateY(22px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
.page-logo {margin-top: 10px;}
.location svg { height: auto;width: 30px;}
.date-value span {display: inline-block;}


.wrap {
	width: min(calc(100% - 32px),var(--container));
	margin: auto;
	padding: 26px 0 54px
}
.hero {
	position: relative;
	overflow: hidden;
	padding: clamp(30px,6vw,54px);
	margin-bottom: 22px;
	color: #fff;
	background: linear-gradient(135deg,#f7b35f,var(--primary) 48%,var(--primary-dark));
	border-radius: var(--r-lg);
	box-shadow: 0 26px 70px rgba(62,38,14,.18)
}
.hero:before {
	position: absolute;
	top: -150px;
	right: -80px;
	width: 330px;
	height: 330px;
	content: "";
	background: rgba(255,255,255,.12);
	border-radius: 50%
}
.hero-badge {
	position: relative;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 8px 14px;
	margin-bottom: 13px;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .13em;
	background: rgba(255,255,255,.17);
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 999px
}
.hero h1 {
	position: relative;
	margin: 0;
	font-size: clamp(34px,6vw,58px);
	line-height: 1.15;
}
.hero p {
	position: relative;
	max-width: 720px;
	margin: 10px 0 0;
	font-size: clamp(15px,2.3vw,18px);
	font-weight: 650
}
.card {
	margin-bottom: 22px;
	overflow: hidden;
	background: rgba(255,255,255,.97);
	border: 1px solid rgba(236,148,48,.24);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow)
}
.card-head {
	display: flex;
	gap: 15px;
	align-items: center;
	padding: 22px 26px;
	background: linear-gradient(135deg,var(--primary-soft),#fff);
	border-bottom: 1px solid rgba(236,148,48,.2)
}
.iconbox {
	display: grid;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	place-items: center;
	color: #fff;
	background: linear-gradient(145deg,var(--primary),var(--primary-dark));
	border-radius: 16px;
	box-shadow: 0 10px 22px rgba(236,148,48,.23)
}
.iconbox svg {
	width: 24px;
	height: 24px
}
.card-head h2 {
	margin: 0;
	font-size: clamp(22px,3.4vw,30px);
	line-height: 1.2
}
.card-head p {
	margin: 4px 0 0;
	color: var(--muted);
	font-size: 14px
}
.card-body {
	padding: clamp(22px,4.8vw,38px)
}
.grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 22px 20px
}
.field.full {
	grid-column: 1/-1
}
.label {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #000;
    background: inherit;
}
.req {
	color: var(--danger)
}
.control {
	position: relative
}
.fic {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 17px;
	width: 21px;
	height: 21px;
	color: var(--primary-dark);
	pointer-events: none;
	transform: translateY(-50%)
}
.input,.select {
	width: 100%;
	min-height: 58px;
	padding: 13px 48px 13px 52px;
	color: var(--ink);
	font-size: 16px;
	font-weight: 700;
	outline: none;
	background: #fffdfa;
	border: 2px solid var(--line);
	border-radius: 14px;
	transition: .22s
}
.input::placeholder {
	color: #d6d6d6;
	font-weight: 600
}
.input:hover,.select: hover {
	border-color: rgba(236,148,48,.62)
}
.input:focus,.select: focus {
	background: #fff;
	border-color: var(--primary);
	box-shadow: 0 0 0 5px rgba(236,148,48,.14),0 10px 24px rgba(65,42,18,.08);
	transform: translateY(-1px)
}
.select {
	cursor: pointer;
	appearance: none;
	background-image: linear-gradient(45deg,transparent 50%,var(--primary-dark) 50%),linear-gradient(135deg,var(--primary-dark) 50%,transparent 50%);
	background-repeat: no-repeat;
	background-position: calc(100% - 24px) 26px,calc(100% - 17px) 26px;
	background-size: 7px 7px,7px 7px
}
.help {
	display: flex;
	gap: 7px;
	align-items: flex-start;
	margin: 8px 2px 0;
	color: var(--muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
            color: #505050;
}
.help svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	color: var(--primary-dark)
}
.help strong {
	color: var(--primary-deep)
}
.info {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 17px 18px;
	margin-bottom: 24px;
	color: #684014;
	font-size: 14px;
	font-weight: 700;
	background: var(--primary-light);
	border: 1px solid rgba(236,148,48,.27);
	border-left: 5px solid var(--primary);
	border-radius: 15px
}
.info svg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--primary-dark)
}
.empty {
	display: grid;
	padding: 34px 20px;
	color: var(--muted);
	text-align: center;
	place-items: center;
	background: var(--primary-soft);
	border: 2px dashed rgba(236,148,48,.32);
	border-radius: var(--r);
    margin-bottom: 30px;
}
.empty svg {
	width: 42px;
	height: 42px;
	margin-bottom: 9px;
	color: var(--primary)
}
.empty strong {
	display: block;
	color: var(--ink);
	font-size: 18px
}
.friend-list {
	display: grid;
	gap: 18px
}
.friend {
	position: relative;
	overflow: hidden;
	padding: 24px;
	background: linear-gradient(145deg,#fff,var(--primary-soft));
	border: 1px solid rgba(236,148,48,.25);
	border-radius: var(--r);
	box-shadow: var(--shadow-sm);
	animation: up .34s ease both
}
.friend:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 7px;
	height: 100%;
	content: "";
	background: linear-gradient(var(--primary),var(--primary-dark))
}
.friend h3 {
	display: flex;
	gap: 11px;
	align-items: center;
	margin: 0 0 19px;
	font-size: 20px
}
.num {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	color: #fff;
	font-size: 14px;
	background: var(--primary);
	border-radius: 50%
}
.agreements {
	display: grid;
	gap: 13px
}
.agree {
	position: relative;
	display: flex;
	gap: 13px;
	align-items: flex-start;
	padding: 17px 18px;
	cursor: pointer;
	background: #fffdfa;
	border: 1px solid var(--line);
	border-radius: 15px;
	transition: .2s
}
.agree:hover {
	background: var(--primary-soft);
	border-color: rgba(236,148,48,.5);
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px)
}
.agree input {
	position: absolute;
	opacity: 0
}
.box {
	display: grid;
	flex: 0 0 auto;
	width: 25px;
	height: 25px;
	margin-top: 1px;
	place-items: center;
	background: #fff;
	border: 2px solid #c8b399;
	border-radius: 7px;
	transition: .2s
}
.box svg {
	width: 16px;
	height: 16px;
	color: #fff;
	opacity: 0;
	transform: scale(.55);
	transition: .18s
}
.agree input:checked+.box {
	background: var(--primary);
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(236,148,48,.14)
}
.agree input:checked+.box svg {
	opacity: 1;
	transform: scale(1)
}
.copy {
	font-size: 15px;
	font-weight: 700
}
.copy small {
	display: block;
	margin-top: 2px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 400
}
.message {
	display: none;
	padding: 15px 18px;
	margin-bottom: 18px;
	font-size: 14px;
	font-weight: 400;
	border-radius: 14px
}
.message.show {
	display: block
}
.message.error {
	color: #81271f;
	background: #fff0ee;
	border: 1px solid rgba(189,59,49,.22)
}
.message.success {
	color: #205d4a;
	background: #eaf6f2;
	border: 1px solid rgba(40,116,93,.22)
}
.submit {
	text-align: center;
	padding-top: 8px
}
.btn {
	position: relative;
	display: inline-flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	min-width: min(100%,300px);
	min-height: 62px;
	padding: 15px 30px;
	overflow: hidden;
	color: #fff;
	font-size: 20px;
	font-weight: 950;
	letter-spacing: .08em;
	cursor: pointer;
	background: linear-gradient(135deg,#f5aa52,var(--primary) 48%,var(--primary-dark));
	border: 0;
	border-radius: 17px;
	box-shadow: 0 15px 30px rgba(236,148,48,.3);
	transition: .24s
}
.btn:before {
	position: absolute;
	top: -50%;
	left: -44%;
	width: 38%;
	height: 200%;
	content: "";
	background: linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
	transform: rotate(19deg);
	transition: left .65s
}
.btn:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 42px rgba(236,148,48,.35)
}
.btn:hover:before {
	left: 120%
}
.btn:active {
	transform: translateY(-1px) scale(.99)
}
.btn svg {
	width: 23px;
	height: 23px
}
a.btn {
	text-decoration: none
}
.btn-secondary {
	color: var(--primary-deep);
	background: #fffdfa;
	border: 2px solid rgba(236,148,48,.45);
	box-shadow: 0 10px 24px rgba(62,38,14,.08)
}
.btn-secondary:hover {
	color: var(--primary-deep);
	background: var(--primary-soft);
	border-color: rgba(236,148,48,.62);
	box-shadow: 0 16px 32px rgba(62,38,14,.12)
}
.btn-danger {
	color: #fff;
	background: linear-gradient(135deg,#e9657a,#d6334f 52%,#b3243d);
	box-shadow: 0 15px 30px rgba(189,40,68,.28)
}
.btn-danger:hover {
	box-shadow: 0 22px 42px rgba(189,40,68,.34)
}
.submit-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	padding-top: 8px
}
.submit-actions .btn {
	flex: 1 1 220px;
	max-width: 320px
}
.summary-value {
	display: flex;
	align-items: center;
	min-height: 58px;
	padding: 13px 18px 13px 52px;
	color: var(--ink);
	font-size: 16px;
	font-weight: 700;
	background: #fffdfa;
	border: 2px solid var(--line);
	border-radius: 14px
}
.summary-value.is-highlight {
	color: var(--primary-deep);
	font-size: 18px
}
.summary-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: 13px;
	font-weight: 800;
	border-radius: 999px
}
.summary-tag-free {
	color: #205d4a;
	background: #eaf6f2
}
.summary-tag-paid {
	color: #9b1d3a;
	background: #fff0f5
}
.hero-success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 10px;
	color: #fff;
	background: rgba(255,255,255,.2);
	border: 2px solid rgba(255,255,255,.35);
	border-radius: 50%
}
.hero-success-icon svg {
	width: 28px;
	height: 28px
}
.note {
	text-align: center;
	margin: 12px 0 0;
	color: var(--muted);
	font-size: 13px;
	font-weight: 650
}
@keyframes up {
	from {
	opacity: 0;
	transform: translateY(12px)
}
to {
	opacity: 1;
	transform: none
}
}


/* ===== 親友門票費用統計：新增 CSS ===== */
.fee-summary[hidden] {
  display: none !important;
}

.fee-summary {
  margin-top: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, #fffaf3, #ffffff);
  border: 1px solid rgba(236, 148, 48, 0.34);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(62, 38, 14, 0.10);
  animation: feeSummaryIn 0.35s ease both;
    margin-bottom: 20px;
}

.fee-summary-head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 20px 22px;
  color: #000;
  background: linear-gradient(135deg, #fff0dc, #fff8ef);
  border-bottom: 1px solid rgba(236, 148, 48, 0.22);
}

.fee-summary-icon {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #ffffff;
  background:linear-gradient(145deg,var(--primary),var(--primary-dark));
  border-radius: 15px;
  box-shadow: 0 10px 22px rgba(236, 148, 48, 0.25);
}

.fee-summary-icon svg {
  width: 25px;
  height: 25px;
}

.fee-summary-head strong {
  display: block;
  font-size: 20px;
  line-height: 1.3;
}

.fee-summary-head small {
  display: block;
  margin-top: 3px;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.fee-summary-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 22px 22px;
}

.fee-row {
  padding: 15px 16px;
  background: #ffffff;
  border: 1px solid #ecd7bd;
  border-radius: 14px;
}

.fee-row span,
.fee-total-row span {
  display: block;
  color: #667079;
  font-size: 13px;
  font-weight: 700;
}

.fee-row strong {
  display: block;
  margin-top: 3px;
  color: #27323a;
  font-size: 20px;
  line-height: 1.3;
}

.fee-row-charge strong {
  color: #de1574;
}

.fee-formula {
  grid-column: 1 / -1;
  padding: 11px 15px;
  color: #b80000;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  background: #fff0dc;
  border-radius: 12px;
}

.fee-total-row {
  display: flex;
  grid-column: 1 / -1;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  color: #ffffff;
  /* background: linear-gradient(135deg, #ffa440, #e05000); */
  background: #de1574;
  border-radius: 15px;
  box-shadow: 0 12px 26px rgba(236, 148, 48, 0.24);
}

.fee-total-row span {
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
}

.fee-total-row strong {
  font-size: clamp(25px, 4vw, 34px);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.fee-summary-note {
  padding: 0 22px 20px;
  margin: 0;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.65;
}

@keyframes feeSummaryIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .fee-summary {
    border-radius: 17px;
  }

  .fee-summary-head {
    padding: 17px 16px;
  }

  .fee-summary-body {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .fee-formula,
  .fee-total-row {
    grid-column: auto;
  }

  .fee-total-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .fee-summary-note { padding: 0 16px 17px; }
}

.notice-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0 26px;
  padding: 6px;
  background: #fff4e8;
  border: 1px solid rgba(219, 110, 13, 0.18);
  border-radius: 16px;
}

.notice-tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  color: #8f4b0d;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 12px;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.notice-tab-button:hover {
  background: rgba(255, 255, 255, 0.72);
}

.notice-tab-button.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #f5aa52, #ec9430 52%, #fa722e);
  box-shadow: 0 8px 18px rgba(219, 110, 13, 0.24);
}

.notice-tab-button:active {
  transform: scale(0.985);
}

.notice-tab-button:focus-visible {
  outline: 4px solid rgba(236, 148, 48, 0.28);
  outline-offset: 2px;
}

.notice-tab-button-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.notice-tab-button-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.notice-tab-panel[hidden],
.faq-answer[hidden] {
  display: none !important;
}

.notice-tab-panel > .notice-stitle:first-child {
  margin-top: 0;
}

/* FAQ 區塊 */
.faq-intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 0 2px;
}

.faq-intro strong {
  color: #743906;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
}

.faq-intro span {
  color: #765f4d;
  font-size: 14px;
  line-height: 1.6;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(116, 57, 6, 0.14);
  border-radius: 15px;
  box-shadow: 0 7px 20px rgba(83, 47, 18, 0.07);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.faq-item:hover {
  border-color: rgba(236, 148, 48, 0.34);
}

.faq-item.is-open {
  border-color: rgba(236, 148, 48, 0.48);
  box-shadow: 0 10px 24px rgba(219, 110, 13, 0.11);
}

.faq-question-heading {
  margin: 0;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 62px;
  padding: 17px 20px 17px 62px;
  color: #000;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  position: relative;
}

.faq-question-number {
  position: absolute;
  top: 50%;
  left: 18px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--white);
  font-size: 14px;
  font-weight: 900;
  background: var(--primary);
  border-radius: 50%;
  transform: translateY(-50%);
  flex: 0 0 auto;
}

.faq-question-text {
  flex: 1 1 auto;
  min-width: 0;
}

.faq-section-title {
  margin-top: 28px;
}

.faq-body > .faq-section-title:first-child {
  margin-top: 0;
}

.faq-body .faq-list + .faq-section-title {
  margin-top: 36px;
}

.faq-question:hover {
  color: #bd650f;
  background: #fffaf5;
}

.faq-question:focus-visible {
  outline: 4px solid rgba(236, 148, 48, 0.25);
  outline-offset: -4px;
}

.faq-toggle-icon {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: #fff1e1;
  border-radius: 50%;
}

.faq-toggle-icon::before,
.faq-toggle-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  content: "";
  background: #d47317;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq-toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-question[aria-expanded="true"] .faq-toggle-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
  padding: 0 20px 19px;
}

.faq-answer::before {
  display: block;
  height: 1px;
  margin-bottom: 15px;
  content: "";
  background: linear-gradient(
    90deg,
    rgba(236, 148, 48, 0.4),
    rgba(236, 148, 48, 0.05)
  );
}

.faq-answer p {
  margin: 0;
  color: #414141;
  font-size: 15px;
  line-height: 1.85;
}

html[lang="en"] .notice-tab-button,
html[lang="en"] .faq-question,
html[lang="en"] .faq-answer p {
  word-break: normal;
}

.notice-stitle { font-size: 22px; margin-top: 40px; font-weight: 600; color: #000000; padding-left: 6px; margin-bottom: 5px;}
.notice-stitle span {background: #ec9430; color: #fff; display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 90%; font-size: 16px; margin-right: 6px;}
.people-check  {color: #000; background:#fff0af;border: 2px solid rgba(236, 148, 48, 0.42);    padding: 24px 26px;border-radius: var(--radius-md);}
.people-check .action-title , .people-check .action-description {text-align: center;}
.people-check .action-title {color: #ed5301;}
.people-check .action-description {color: #9d020e;}
.copy strong {color: var(--primary-deep);}
.notice-fancybox-link {
  color: inherit;
  text-decoration: none;
}
.notice-fancybox-link:hover,
.notice-fancybox-link:focus {
  color: var(--primary-deep);
}
.notice-body {}
.fancybox-content {max-width: 900px!important;border-radius: 20px;}
.notice-lightbox {
  padding: 24px 28px;
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.notice-lightbox-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 20px;
  border-bottom: 2px solid #f5aa52;
  margin-bottom: 8px;
}
.notice-lightbox .notice-stitle:first-child {
  margin-top: 16px;
}

.logo-home img {max-height: 40px!important;}
.language-switcher-container { display: flex; justify-content: space-between!important; align-items: center!important;}
.back-home {border: 1px solid #ec9430;color: #8f4b0d; padding: 4px 24px;border-radius: 9px;cursor: pointer;font-size: 15px;background: #fff;}
.back-home:hover,.back-home:focus {color: #fc7001;}
.form-control2::placeholder {color: #d5d5d5;}
.banner-text {text-align: center;background: #fffdf0;font-size: 14px; color: #d27a07;font-weight: 600;line-height: 1.2; padding-bottom: 10px;}

@media (max-width: 640px) {
  .notice-lightbox {
    padding: 20px 14px;
  }
}
@media only screen and (max-width: 1680px) {
	
}

@media only screen and (max-width: 1600px) {

    
}


@media only screen and (max-width: 1440px) {
    
}
    
@media only screen and (max-width: 1400px) { 
}

@media only screen and (max-width: 1366px) {

}


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

}


@media only screen and (max-width: 1210px){

}


@media only screen and (max-width: 1200px){

}

@media only screen and (max-width: 1199px) {
.col-xxs-66 { flex: 0 0 50%;max-width: 50%;}
}

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

}



@media only screen and (max-width: 992px){

   
}







/* iphone 12 pro  */
@media only screen and (max-width: 926px){
    

}



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


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

@media only screen and (max-width: 779px) {

}





@media only screen and (max-width: 768px) {
.pc2 { display:none!important;}
.mobile2 { display: inherit!important;}
    .mlogo {width: 100%;max-width: 74%;position: absolute;left: 50%;margin-left: -37%;top: 10px;}
    .container {
        width: min(calc(100% - 22px), var(--container));
      }

      .site-header {
        padding-top: 11px;
      }

      .header-inner {
        min-height: 72px;
        padding: 12px 14px;
        border-radius: 18px;
      }

      .brand-mark {
        width: 46px;
        height: 46px;
        border-radius: 14px;
      }

      .brand-subtitle,
      .header-tag {
        display: none;
      }

      .hero-card {
        border-radius: 24px;
      }

      .hero-decoration {
        opacity: 0.25;
      }

      .hero-decoration.left {
        bottom: 14px;
        left: 10px;
        width: 56px;
      }

      .hero-decoration.right {
        top: 14px;
        right: 12px;
        width: 58px;
      }

      .location {
        width: 100%;
        border-radius: 18px;
      }

      .registration-panel {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .timeline-arrow {
        transform: rotate(90deg);
        justify-self: center;
      }

      .action-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .action-button {
        min-height: 104px;
        padding: 20px;
      }

      .action-icon {
        width: 52px;
        height: 52px;
      }

      .notice-card {
        border-radius: 24px;
      }



      .notice-list li::before {
        top: 16px;
        left: 17px;
      }
    .people-total .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr))!important;gap: 5px;}
    .people-check .action-title {font-size: 20px;}
    .people-check {padding: 24px 16px;}
    
}


@media only screen and (max-width: 767px) {
.col-xxs-6 { width: 50%;}
	.col-xxs-4 { width: 33.333%;}
	.col-xxs-3 { width: 25%;padding: 5px;}
    .walk-qrcode {max-width: 100%;display: inline-flex;}
        .integral-stitle {font-size: 16px;}
        .integral-poing {font-size: 42px;}
    
    .wrap {
	width: min(calc(100% - 22px),var(--container));
	padding-top: 12px
}
.hero,.card {
	border-radius: 23px
}
.card-head {
	padding: 19px 18px;
            line-height: 1.5;
}
.card-body {
	padding: 20px 16px 24px
}
.grid {
	grid-template-columns: 1fr;
	gap: 18px
}
.field.full {
	grid-column: auto
}
.friend {
	padding: 21px 16px
}
.btn {
	width: 100%
}
    
   
	}



/* iphone 8 w */
@media only screen and (max-width: 667px) {

 
}




@media only screen and (max-width: 640px) {
   .notice-tabs {
    gap: 6px;
    margin: 18px 0 20px;
    padding: 5px;
    border-radius: 14px;
  }

  .notice-tab-button {
    min-height: 48px;
    padding: 10px 12px;
    font-size: 15px;
    border-radius: 10px;
  }

  .notice-tab-button-icon {
    width: 20px;
    height: 20px;
  }

  .faq-intro {
    display: block;
    margin-bottom: 13px;
  }

  .faq-intro strong,
  .faq-intro span {
    display: block;
  }

  .faq-intro strong {
    margin-bottom: 4px;
    font-size: 20px;
  }

  .faq-question {
    min-height: 58px;
    padding: 15px 15px 15px 56px;
    font-size: 15px;
  }

  .faq-question-number {
    left: 15px;
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .faq-toggle-icon {
    width: 28px;
    height: 28px;
  }

  .faq-answer {
    padding: 0 15px 16px;
  }

  .faq-answer p {
    font-size: 14px;
    line-height: 1.8;
  }
    
    .label {font-size: 16px;margin-bottom: 0;}
    .input, .select {font-size: 14px;font-weight: 600;}
    
    
}




@media only screen and (max-width: 573px) {

}


@media only screen and (max-width: 480px) {
   
    .notice-list li {font-size: 14px;}
    .card-head p {font-size: 13px;}
    .logo-home img {max-height: 25px !important;}
	}



@media only screen and (max-width: 428px) {
 .hero-kicker {
        font-size: 12px;
      }

      .hero-title {
        font-size: 52px;
      }

      .hero-title-en {
        font-size: 17px;
        letter-spacing: 0.08em;
      }

      .action-button {
        gap: 13px;
      }

      .action-description {
        /* display: none; */
      }

      .action-arrow {
        width: 20px;
        height: 20px;
      }
    .location {font-size: 14px;padding: 7px 5px;}
    .location svg {width: 25px;}
    .notice-stitle {font-size: 18px;}
    .btn {font-size: 15px;}
    .back-home {padding: 8px 14px;font-size: 13px;}
    .banner-text {font-size: 11px;}
    
}



@media only screen and (max-width: 414px) {

}




@media only screen and (max-width: 390px) {

}




@media only screen and (max-width: 375px) {

}

@media only screen and (max-width: 360px) {

}


@media screen and (orientation: landscape) {

}

 @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
    }