/*  页面重置样式  */
body,p,h1,h2,h3,h4,h5,li,span,i,ul,img,a,strong,input,button,textarea,select,dd,dl,dt,ol{
	margin:0;
	padding:0;
	word-wrap:break-word;
}
h1,h2,h3,h4,h5,h6{
	font-weight: normal;
}
body{
	font-family:"Arial","microsoft yahei";
	font-size:14px;
	line-height: 1;
	color:#333;
}
*{
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
li{
	list-style-type:none;
	float:left;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
a,area{
	text-decoration:none;
	outline:none;
	color: #000;
}
img{
	border:none;
	vertical-align:middle;
}
i,var,em{
	font-style:normal;
}
button{
	font-family:"Arial","microsoft yahei";
	font-size: 14px;
	outline:none;
	cursor: pointer;
	border: none;
	line-height: 1;
}
input[type="submit"]{
	border: none;
}
iframe{
	border: none;
}
input,select,textarea{
	outline:none;
	font-family:"Arial","microsoft yahei";font-size: 14px;
}
textarea{
	resize:none;
	overflow-y:auto;
}
.at{
	margin:0 auto;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.clear{
	clear:both;
}
.dt{
	display: table;
	width: 100%;
}
.fl-w{
	float: left;
	width: 100%;
}
.hide{
	display: none;
}
.ver-container{
	display: table;
	width: 100%;
	text-align: center;
}
.ver-container > * {
	vertical-align: middle;
	display: table-cell;
}

[class*=icon]{
	font-family:"iconfont" !important;
	font-size:16px;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

[class*=ico]{
	vertical-align: middle;
	display: inline-block;
}
.wid {
  width: 1200px;
  margin: 0 auto;
}
body,
html {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 99;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 60px;
}
.container .logo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
  flex-direction: column;
}
.container .logo .imgs {
  padding: 20px 0;
}
.container .webs {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ccc;
  font-size: 16px;
  position: relative;
  margin-top: -20px;
}
.container .webs em {
  margin: 0 5px;
}
.container .button {
  width: 100%;
  text-align: center;
  padding: 10px 0;
}
.container .button button {
  width: 422px;
  height: 98px;
  background: url("../img/a29e92_422x98.png") center no-repeat;
  background-size: 100% 100%;
  transform: scale(0.9);
}
.container .logo .text {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .logo .text .box {
  width: 108px;
  height: 108px;
  position: relative;
}
.container .logo .text .box ul {
  width: 100%;
  transform: translateY(0%);
  position: relative;
  height: 100%;
}
.container .logo .box ul li {
  width: 100%;
  height: 100%;
  float: left;
}
.container .logo .text .box ul li img {
  width: 100%;
}
.container .logo .text .box:nth-child(2).active ul,
.container .logo .text .box:nth-child(4).active ul {
  animation: progressAnimation2 1s linear;
}
.container .logo .text .box:nth-child(1).active ul,
.container .logo .text .box:nth-child(3).active ul {
  animation: progressAnimation 1s linear;
}
.container .logo .box {
  width: 100%;
  height: 108px;
  position: relative;
  overflow: hidden;
}
.container .logo .box ul {
  width: 100%;
  position: relative;
  height: 464px;
  z-index: 999;
  transform: translateY(0%);
}
.container .logo .box ul li {
  width: 100%;
  float: left;
  height: 100%;
}
@keyframes progressAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-700%);
  }
}
@keyframes progressAnimation2 {
  0% {
    transform: translateY(-700%);
  }
  100% {
    transform: translateY(0%);
  }
}

@media screen and (max-width: 1200px) {
  .container .logo img {
    width: 360px;
  }
}
@media screen and (max-width: 993px) {
  .container .logo img {
    width: 280px;
  }
  .container .logo .text .box {
    width: 78px;
    height: 78px;
  }
  .container .logo .text .box ul li img {
    width: 100%;
    height: 100%;
  }
  .container .logo {
    padding: 10px 0;
  }
}
@media screen and (max-width: 768px) {
  .container .button {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wid {
    padding-left: 3%;
    padding-right: 3%;
  }
  .container .webs {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .container .webs .lines {
    padding: 10px 0;
  }
  .container .button button {
    transform: scale(0.6);
  }
  body,
  html {
    overflow: hidden;
  }
  .container .button button {
    width: 318px;
    height: 74px;
  }
  .container .logo .text .box {
    width: 54px;
    height: 54px;
  }
  .container .logo .text .box ul li img {
    width: 100%;
    height: 100%;
  }
  .container .logo .imgs {
    padding: 0;
  }
  .container .logo .imgs img {
    width: 240px;
  }
}

/* 背景视频替换 */
.bg-video {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  background: #000;
}
.container {
  z-index: 99;
}

/* KY brand logo replacement */
.container .ky-brand {
  padding: 20px 16px 35px;
}
.container .ky-brand .ky-main-logo {
  width: min(88vw, 920px);
  max-height: 38vh;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
}
@media screen and (max-width: 768px) {
  .container .ky-brand {
    padding: 10px 12px 22px;
  }
  .container .ky-brand .ky-main-logo {
    width: 92vw;
    max-height: 32vh;
  }
}

/* 2026-05-12 第二页调整：LOGO 缩小下移，按钮半透明，减少遮挡背景 MP4 */
.container {
  justify-content: center;
  padding-bottom: 0;
  transform: translateY(46px);
}
.container .ky-brand {
  padding: 0 16px 18px;
}
.container .ky-brand .ky-main-logo {
  width: min(76vw, 680px);
  max-height: 26vh;
  object-fit: contain;
}
.container .button {
  padding: 0;
}
.container .button button {
  width: 360px;
  height: 84px;
  background: url("../img/a29e92_422x98.png") center center / contain no-repeat transparent;
  opacity: 0.72;
  transform: scale(1);
  border: 0;
  box-shadow: none;
}
.container .button button:hover,
.container .button button:active {
  opacity: 0.9;
}

@media screen and (max-width: 768px) {
  .container {
    transform: translateY(30px);
  }
  .container .ky-brand {
    padding: 0 12px 12px;
  }
  .container .ky-brand .ky-main-logo {
    width: min(82vw, 460px);
    max-height: 24vh;
  }
  .container .button button {
    width: 300px;
    height: 70px;
    transform: scale(1);
    opacity: 0.72;
  }
}

/* 2026-05-12 再次调整：第二页 LOGO 大幅缩小并下移，减少遮挡 MP4 */
.container {
  justify-content: center !important;
  padding-bottom: 0 !important;
  transform: translateY(95px) !important;
}
.container .ky-brand {
  padding: 0 16px 10px !important;
}
.container .ky-brand .ky-main-logo {
  width: min(52vw, 460px) !important;
  max-height: 18vh !important;
  object-fit: contain !important;
  opacity: 0.95;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45)) !important;
}
.container .button {
  padding: 0 !important;
}
.container .button button {
  width: 230px !important;
  height: 54px !important;
  background: url("../img/a29e92_422x98.png") center center / contain no-repeat transparent !important;
  opacity: 0.46 !important;
  transform: scale(1) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.container .button button:hover,
.container .button button:active {
  opacity: 0.68 !important;
}

@media screen and (max-width: 768px) {
  .container {
    transform: translateY(70px) !important;
  }
  .container .ky-brand {
    padding: 0 12px 8px !important;
  }
  .container .ky-brand .ky-main-logo {
    width: min(58vw, 320px) !important;
    max-height: 16vh !important;
  }
  .container .button button {
    width: 190px !important;
    height: 44px !important;
    opacity: 0.46 !important;
  }
}


/* 2026-05-12 最终调整：第二页品牌放到底部中间，按钮改成「傳奇對決 始於開元」 */
html, body {
  overflow: hidden !important;
  background: #000 !important;
}
.container {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 18px clamp(30px, 7.5vh, 86px) !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: none !important;
}
.container .logo,
.container .ky-brand {
  width: 100% !important;
  padding: 0 0 clamp(10px, 1.8vh, 18px) !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  pointer-events: none !important;
}
.container .ky-brand .ky-main-logo,
.container .logo img.ky-main-logo {
  width: clamp(260px, 30vw, 440px) !important;
  max-width: 86vw !important;
  max-height: 20vh !important;
  object-fit: contain !important;
  opacity: 0.94 !important;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.56)) !important;
}
.container .button {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: auto !important;
}
.container .button .ky-cta,
.container .button button {
  position: relative !important;
  width: min(86vw, 430px) !important;
  height: clamp(48px, 6.6vh, 72px) !important;
  min-height: 48px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 50% 0%, rgba(255,226,146,.28), transparent 54%),
    linear-gradient(90deg, rgba(78,6,5,.46), rgba(150,24,17,.62), rgba(78,6,5,.46)) !important;
  border: 1px solid rgba(255, 218, 133, .72) !important;
  border-radius: 999px !important;
  color: #fff4c5 !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow:
    0 0 0 1px rgba(117, 49, 8, .42) inset,
    0 0 16px rgba(255, 188, 69, .20),
    0 8px 26px rgba(0, 0, 0, .34) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  letter-spacing: .12em !important;
  font-weight: 800 !important;
  font-family: "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", "Arial", sans-serif !important;
}
.container .button .ky-cta::before,
.container .button button::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px 9px !important;
  border: 1px solid rgba(255, 223, 142, .46) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}
.container .button .ky-cta::after,
.container .button button::after {
  content: "" !important;
  position: absolute !important;
  left: 16% !important;
  right: 16% !important;
  bottom: 8px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 145, .85), transparent) !important;
  pointer-events: none !important;
}
.container .button .ky-cta span,
.container .button button span {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: clamp(20px, 2.4vw, 34px) !important;
  line-height: 1 !important;
  text-shadow:
    0 2px 0 rgba(74, 22, 0, .95),
    0 0 10px rgba(255, 214, 124, .32) !important;
}
.container .button .ky-cta:hover,
.container .button button:hover,
.container .button .ky-cta:active,
.container .button button:active {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 0 0 1px rgba(117, 49, 8, .42) inset,
    0 0 24px rgba(255, 188, 69, .34),
    0 10px 28px rgba(0, 0, 0, .38) !important;
}
@media screen and (max-width: 768px) {
  .container {
    padding: 0 14px max(34px, env(safe-area-inset-bottom)) !important;
    justify-content: flex-end !important;
  }
  .container .ky-brand .ky-main-logo,
  .container .logo img.ky-main-logo {
    width: min(74vw, 310px) !important;
    max-height: 18vh !important;
  }
  .container .logo,
  .container .ky-brand {
    padding-bottom: 10px !important;
  }
  .container .button .ky-cta,
  .container .button button {
    width: min(86vw, 340px) !important;
    height: 52px !important;
  }
  .container .button .ky-cta span,
  .container .button button span {
    font-size: clamp(18px, 5.4vw, 24px) !important;
    letter-spacing: .06em !important;
  }
}
@media screen and (max-height: 620px) {
  .container {
    padding-bottom: 22px !important;
  }
  .container .ky-brand .ky-main-logo,
  .container .logo img.ky-main-logo {
    width: clamp(220px, 26vw, 340px) !important;
    max-height: 16vh !important;
  }
  .container .button .ky-cta,
  .container .button button {
    height: 48px !important;
  }
}

/* 2026-05-12 按要求微调：招牌正中偏下、按钮拉开距离、按钮改成图二同款金红牌匾风格 */
.container {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 18px clamp(58px, 8.8vh, 118px) !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: none !important;
}
.container .logo,
.container .ky-brand {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 clamp(26px, 3.9vh, 46px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  pointer-events: none !important;
}
.container .ky-brand .ky-main-logo,
.container .logo img.ky-main-logo {
  width: clamp(350px, 31.5vw, 520px) !important;
  max-width: 88vw !important;
  max-height: 21vh !important;
  object-fit: contain !important;
  opacity: .96 !important;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.58)) !important;
}
.container .button {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  pointer-events: auto !important;
}
.container .button .ky-cta,
.container .button button {
  position: relative !important;
  width: clamp(300px, 24vw, 390px) !important;
  height: clamp(58px, 5.2vw, 78px) !important;
  min-height: 58px !important;
  padding: 0 34px !important;
  border: 1px solid rgba(255, 221, 137, .86) !important;
  border-radius: 0 !important;
  clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 32%),
    radial-gradient(circle at 50% 0%, rgba(255,236,160,.28), transparent 60%),
    linear-gradient(90deg, rgba(80,8,6,.88), rgba(150,24,16,.92) 30%, rgba(105,12,10,.93) 50%, rgba(150,24,16,.92) 70%, rgba(80,8,6,.88)) !important;
  color: #fff0bd !important;
  opacity: .96 !important;
  transform: none !important;
  box-shadow:
    0 0 0 2px rgba(95, 30, 0, .58) inset,
    0 0 0 4px rgba(228, 159, 59, .18) inset,
    0 0 19px rgba(255, 185, 72, .20),
    0 10px 26px rgba(0,0,0,.38) !important;
  overflow: visible !important;
  cursor: pointer !important;
  letter-spacing: .11em !important;
  font-weight: 900 !important;
  font-family: "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", "Arial", sans-serif !important;
  backdrop-filter: blur(1.5px) !important;
  -webkit-backdrop-filter: blur(1.5px) !important;
}
.container .button .ky-cta::before,
.container .button button::before {
  content: "" !important;
  position: absolute !important;
  inset: 6px 16px !important;
  border: 1px solid rgba(255, 228, 142, .55) !important;
  clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%) !important;
  pointer-events: none !important;
}
.container .button .ky-cta::after,
.container .button button::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -10px !important;
  width: 84% !important;
  height: calc(100% + 20px) !important;
  transform: translateX(-50%) !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,226,142,.78) 12%, transparent 23%, transparent 77%, rgba(255,226,142,.78) 88%, transparent 100%),
    radial-gradient(circle at 50% 0, rgba(255,235,162,.88) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 100%, rgba(255,235,162,.88) 0 2px, transparent 3px) !important;
  pointer-events: none !important;
}
.container .button .ky-cta span,
.container .button button span {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  white-space: nowrap !important;
  font-size: clamp(23px, 2vw, 34px) !important;
  line-height: 1 !important;
  color: #fff2bd !important;
  text-shadow:
    0 2px 0 rgba(78, 18, 0, .96),
    0 0 9px rgba(255, 224, 139, .36) !important;
}
.container .button .ky-cta:hover,
.container .button button:hover,
.container .button .ky-cta:active,
.container .button button:active {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 0 0 2px rgba(95, 30, 0, .58) inset,
    0 0 0 4px rgba(228, 159, 59, .22) inset,
    0 0 28px rgba(255, 190, 76, .34),
    0 12px 28px rgba(0,0,0,.42) !important;
}
@media screen and (max-width: 768px) {
  .container {
    padding: 0 14px max(54px, calc(env(safe-area-inset-bottom) + 42px)) !important;
    justify-content: flex-end !important;
  }
  .container .logo,
  .container .ky-brand {
    padding-bottom: 28px !important;
  }
  .container .ky-brand .ky-main-logo,
  .container .logo img.ky-main-logo {
    width: min(78vw, 390px) !important;
    max-height: 18vh !important;
  }
  .container .button .ky-cta,
  .container .button button {
    width: min(70vw, 310px) !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 24px !important;
  }
  .container .button .ky-cta span,
  .container .button button span {
    font-size: clamp(18px, 5.4vw, 24px) !important;
    letter-spacing: .055em !important;
  }
}
@media screen and (max-height: 620px) {
  .container {
    padding-bottom: 34px !important;
  }
  .container .logo,
  .container .ky-brand {
    padding-bottom: 22px !important;
  }
  .container .ky-brand .ky-main-logo,
  .container .logo img.ky-main-logo {
    width: clamp(300px, 28vw, 430px) !important;
    max-height: 18vh !important;
  }
  .container .button .ky-cta,
  .container .button button {
    width: clamp(270px, 21vw, 340px) !important;
    height: 54px !important;
    min-height: 54px !important;
  }
}

.container {
  min-height: 100vh !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.container .logo,
.container .ky-brand {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 0 18px 0 !important;
  margin: 0 !important;
}

.container .ky-brand .ky-main-logo,
.container .logo img.ky-main-logo {
  width: clamp(350px, 31.5vw, 520px) !important;
  max-width: 88vw !important;
  height: auto !important;
  max-height: 21vh !important;
  object-fit: contain !important;
}

.container .button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.container .button .ky-cta,
.container .button button {
  width: clamp(300px, 24vw, 390px) !important;
  height: clamp(58px, 5.2vw, 78px) !important;
  margin: 0 !important;
}

@media screen and (max-width: 768px) {
  .container {
    min-height: 100vh !important;
    height: 100vh !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .container .logo,
  .container .ky-brand {
    padding: 0 0 12px 0 !important;
  }

  .container .ky-brand .ky-main-logo,
  .container .logo img.ky-main-logo {
    width: min(78vw, 390px) !important;
    max-height: 18vh !important;
  }

  .container .button .ky-cta,
  .container .button button {
    width: min(70vw, 310px) !important;
    height: 54px !important;
  }
}