/* ========== 基礎樣式 ========== */
html {
	scroll-behavior: smooth;
}

a:hover {
	text-decoration: none;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* ========== header style ========== */
header {
	min-width: 100%;
	background: #fff;
	position: fixed;
	top: 0;
	z-index: 10000;
}

.taogo-event-header .inner-content {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.taogo-event-header .inner-content .logo-content {
	width: unset;
}

.taogo-event-header .promote-content {
	display: none;
}

/* ========== Banner區域 ========== */
.decorator-float-img {
	opacity: 0;
  transform: translateY(8px);
  animation: revealAfterRing 220ms ease-out forwards;
  animation-delay: 0.55s;
}

.decorator-float-1 {
	height: auto;
	position: absolute;
	left: calc(280 / 1920 * 100%);
	top: calc(800 / 1920 * 100%);
	width: clamp(20px, calc(53 / 1920 * 100vw), 53px);
}

.decorator-float-2 {
	height: auto;
	position: absolute;
	left: calc(520 / 1920 * 100%);
	top: calc(150 / 1920 * 100%);
	width: clamp(20px, calc(24 / 1920 * 100vw), 24px);
}

.decorator-float-3 {
	height: auto;
	position: absolute;
	z-index: 1;
	left: calc(565 / 1920 * 100%);
	top: calc(700 / 1920 * 100%);
	width: clamp(20px, calc(55 / 1920 * 100vw), 55px);
}

.decorator-float-4 {
	height: auto;
	position: absolute;
	z-index: 1;
	left: calc(888 / 1920 * 100%);
	top: calc(185 / 1920 * 100%);
	width: clamp(20px, calc(46 / 1920 * 100vw), 46px);
}

.decorator-float-5 {
	height: auto;
	position: absolute;
	z-index: 1;
	right: calc(560 / 1920 * 100%);
	top: calc(1250 / 1920 * 100%);
	width: clamp(20px, calc(24 / 1920 * 100vw), 24px);
}

.decorator-float-6 {
	height: auto;
	position: absolute;
	z-index: 1;
	right: calc(280 / 1920 * 100%);
	top: calc(750 / 1920 * 100%);
	width: clamp(20px, calc(55 / 1920 * 100vw), 55px);
}

.decorator-person-left {
	height: auto;
	position: absolute;
	left: calc(200 / 1920 * 100%);
	top: calc(380 / 1920 * 100%);
	min-width: 250px;
	width: clamp(100px, calc(398 / 1920 * 100vw), 398px);
}
.decorator-person-right {
	height: auto;
	position: absolute;
	right: calc(280 / 1920 * 100%);
	top: calc(328 / 1920 * 100%);
	min-width: 250px;
	width: clamp(100px, calc(439 / 1920 * 100vw), 439px);
}

.bg-hero {
  position: absolute;
	z-index: 2;
	bottom: calc(-488 / 1920 * 100%);
  left: 49%;
  transform: translate(-50%, -50%);
  height: auto;
	min-width: 465px;
	width: clamp(260px, calc(689 / 1920 * 100vw), 689px);
	opacity: 0;
	animation-delay: 0.5s;
	overflow: hidden;
	animation:
    fadeInTitle 1s ease-out 1s forwards,
    swingSequence 1.5s ease-in-out 1s infinite;
}

.bg-ribbons {
	position: absolute;
	/* bottom: calc(-15 / 1920 * 100%); */
	bottom: calc(8 / 1920 * 100%);
  left: 50%;
  transform: translate(-50%, -50%);
	height: auto;
	min-width: 1112px;
	width: clamp(1112px, calc(1788 / 1920 * 100vw), 1788px);
	opacity: 0;
	overflow: hidden;
	animation: ribbonsAfterRing 0.8s ease-out forwards;
  animation-delay: 0.8s;
}

.bg-ring-left {
	position: absolute;
	top: calc(-100 / 1920 * 100%);
	left: calc(748 / 1920 * 100%);
  transform: translate(-50%, -50%);
	min-width: 180px;
	width: clamp(180px, calc(272 / 1920 * 100vw), 272px);
	animation: ringLeftIn 0.5s ease-in-out forwards;
}
.bg-ring-right {
	position: absolute;
	top: calc(-100 / 1920 * 100%);
	right: calc(762 / 1920 * 100%);
  transform: translate(-50%, -50%);
	min-width: 180px;
	width: clamp(180px, calc(272 / 1920 * 100vw), 272px);
	animation: ringRightIn 0.5s ease-in-out forwards;
}

/* ========== 主視覺區域 ========== */
@keyframes ringLeftIn {
  0%  {
		transform: translate(0%, 0%) rotate(320deg); 
	}
  100% {
		transform: translate(-6.9%, 0%) rotate(360deg);
	}
}

@keyframes ringRightIn {
  0% {
		transform: rotate(37deg);
	}
  100% {
		transform: translate(11.9%, 0%) rotate(0deg);
	}
}

.ribbons-container {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	opacity: 0;
  transform: translate(-50%, 0%);
	left: 50%;
	bottom: -12px;
	max-width: 1788px;
	min-width: 1000px;
	width: clamp(100px, calc(1788 / 1920 * 100vw), 1788px);
	height: auto;
  animation: ribbonsAfterRing 2s ease-in-out forwards;
  animation-delay: 1000s;
	overflow: hidden;
}

@keyframes ribbonsAfterRing {
  0% { opacity: 0; transform: translate(-50%, 0%); }
	20% { opacity: 0.2; transform: translate(-50%, 0%); }
	30% { opacity: 0.3; transform: translate(-50%, 0%); }
	40% { opacity: 0.4; transform: translate(-50%, 0%); }
	50% { opacity: 0.5; transform: translate(-50%, 0%); }
	60% { opacity: 0.6; transform: translate(-50%, 0%); }
	70% { opacity: 0.7; transform: translate(-50%, 0%); }
	80% { opacity: 0.8; transform: translate(-50%, 0%); }
	90% { opacity: 0.9; transform: translate(-50%, 0%); }
  100% { opacity: 1; transform: translate(-50%, 0%); }
}

.hero-container {
	max-width: 689px;
	min-width: 400px;
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(260px, calc(689 / 1920 * 100vw), 689px);
	z-index: 2;
	opacity: 0;
  animation-delay: 0.5s;
	overflow: hidden;
	animation:
    fadeInTitle 1s ease-out 1s forwards,
    swingSequence 1.5s ease-in-out 1s infinite;
}

@keyframes fadeInTitle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rotateShake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  15%, 85% { transform: translate(-50%, -50%) rotate(3deg); }
  50% { transform: translate(-50%, -50%) rotate(-3deg); }
}

@keyframes swingSequence {
  /* 初始回正 */
  0% { transform: translate(-50%, -50%) rotate(0deg); }

  /* 快速搖擺 */
  5% { transform: translate(-50%, -50%) rotate(6deg); }
  10% { transform: translate(-50%, -50%) rotate(-6deg); }
  15% { transform: translate(-50%, -50%) rotate(5deg); }
  20% { transform: translate(-50%, -50%) rotate(-5deg); }
  25% { transform: translate(-50%, -50%) rotate(4deg); }
  30% { transform: translate(-50%, -50%) rotate(-4deg); }
  35% { transform: translate(-50%, -50%) rotate(0deg); }

  /* 停一下 */
  45% { transform: translate(-50%, -50%) rotate(0deg); }
  55% { transform: translate(-50%, -50%) rotate(0deg); }

  /* 再搖擺（幅度較小、節奏較慢一點點） */
  /* 65% { transform: translate(-50%, -50%) rotate(3deg); }
  75% { transform: translate(-50%, -50%) rotate(-3deg); }
  85% { transform: translate(-50%, -50%) rotate(2deg); }
  95% { transform: translate(-50%, -50%) rotate(-2deg); } */

  /* 循環回正 */
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

/* ========== 浮動元素 ========== */
/* 左側浮動盒子 */
.floating-1 {
	display: none;
	position: absolute;
	top: 350px;
}

.floating-2 {
	display: none;
	position: absolute;
	top: 100px;
}

.floating-3 {
	display: none;
	position: absolute;
	top: 340px;
}

.floating-4 {
	display: none;
	position: absolute;
	top: 100px;
}

.floating-5 {
	display: none;
	position: absolute;
	bottom: 25%;
}

.floating-6 {
	display: none;
	position: absolute;
	top: 330px;
}

.float-img {
	width: auto;
	height: auto;
	max-width: 166px;
	opacity: 0;
  transform: translateY(8px);
  animation: revealAfterRing 220ms ease-out forwards;
  animation-delay: 0.25s;
}

@keyframes revealAfterRing {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; }
}

/* ========== 內容區域 ========== */
.outer-box {
  position: relative;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	border: 2px solid #1156df;
	border-radius: 20px;
	z-index: 2;
	padding: 24px 16px;
}

.inner-box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -48.5%);
	width: 100%;
	height: 98%;
	background-color: #bcbeff;
	border: 2px solid #1156df;
	border-radius: 20px;
	z-index: 0;
}

/* ========== 內容盒子 ========== */

/* 步驟 */
.steps-title {
	display: flex;
	justify-content: center;
	padding: 40px 16px 20px;
}

.steps-title .title-img {
	max-width: 343px;
}

.steps-content {
	padding: 0 20px 40px;
}

.steps-item {
	border: 2px solid #1156df;
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0px 5px 0px -1px #bcbeff,
	0 6px 0 0px #1156df;
	padding: 30px 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 首選淘購 */
.business-title {
	display: flex;
	justify-content: center;
	padding: 40px 16px 20px;
}

.business-title .title-img {
	max-width: 343px;
}

.business-content {
	display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
	padding: 0 20px 40px;
}

.business-item {
	border: 2px solid #1156df;
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0px 5px 0px -1px #bcbeff,
	0 6px 0 0px #1156df;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 第二個內容盒子 */
.tutorial-container {
	border: 2px solid #1156df;
	border-radius: 20px;
	background-color: #e6e7ff;
	box-shadow: 0px 5px 0px -1px #bcbeff,
	0 6px 0 0px #1156df;
	font-weight: bold;
}

/* ========== 教學區域 ========== */
/* 集運教學內容區 */
.tutorial-title {
	border-bottom: 2px solid #1156df;
}

.tutorial-content {
	display: flex;
	flex-direction: column;
	padding: 30px 1rem;
	border-bottom: 2px solid #1156df;
}

.tutorial-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.tutorial-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	width: 95px;
}

.tutorial-icon {
	height: 95px;
}

.tutorial-text {
	text-align: center;
	font-size: 1.25rem;
	color: #333;
}

.tutorial-title .title-img {
	max-width: 182px;
}

/* 代付教學內容區 */
.df-tutorial-content {
	display: flex;
	flex-direction: column;
	padding: 30px 1rem;
	border-bottom: 3px;
}

.tutorial-details {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.df-tutorial-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.df-tutorial-desc {
	text-align: center;
	font-size: 1.25rem;
	color: #333;
}

/* 圖片源切換組件 */
.source-switch {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.source-switch img {
	height: 95px;
}

/* ========== 注意事項區域 ========== */
.notice-area {
	background-color: #cbcbff;
	padding-bottom: 40px;
}

.notice-title {
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.notice-heading {
	color: black;
	font-size: 27px;
	font-weight: bold;
	margin-left: 10px;
	margin-right: 10px;
	letter-spacing: 0.2em;
}

.notice-content {
	/* padding: 1rem; */
	font-weight: bold;
	font-size: 1rem;
	margin: 0 auto;
	line-height: 1.5;
	color: #222222;
	border-radius: 20px;
	margin: 0 20px;
}

.notice-content .box-content {
	padding: 30px 16px;
	text-align: left;
}

.notice-item {
	display: flex;
	align-items: start;
	margin-bottom: 0.5rem;
}

.notice-item-num {
	margin-right: 0.5rem;
}

/* ========== 按鈕和聯繫信息 ========== */
/* 按鈕容器 */
.btn-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	text-align: center;
	margin: 1.75rem 0;
}

.action-btn {
	padding: 0.75rem;
	border-radius: 9999px;
	background-color: #333;
	color: white;
	width: 100%;
	min-width: 144px;
	max-width: 210px;
	text-align: center;
	transition: background-color 0.3s;
	box-shadow: 1px 3px 1px 1px #1156df;
}

.action-btn:hover,
.action-btn:active,
.action-btn:focus {
	background-color: #ff726f;
	text-decoration: none;
}

/* 聯繫信息區域 */
.contact-info {
	margin-bottom: 1.25rem;
}

.service-time {
	display: flex;
	flex-direction: column;
}

.service-schedule {
	display: flex;
	flex-direction: column;
	margin-left: 3rem;
}

.schedule-item {
	margin-top: 0.5rem;
}

/* ========== 側邊菜單 ========== */
.fixed-side-menu {
	display: none;
	position: fixed;
	top: 355px;
	right: 0;
	z-index: 30;
}

.fixed-side-menu-container {
	background-color: #1156df;
	border-top-left-radius: 3.3rem;
	border-bottom-right-radius: 3.3rem;
	width: 8.3125rem;
	height: 355px;
	padding: 19px 18px;
	padding-right: 12px;
	font-size: 24px;
	color: white;
	box-shadow: 0px 9px 0px -4px #ff726f, 0 10px 0 0px #1156df;
}

.menu-image-link {
	display: block;
	position: relative;
}

.menu-image {
	display: block;
}

.menu-image-hover {
	display: none;
}

/* 懸停效果 */
.menu-image-link:hover .menu-image {
	display: none;
}

.menu-image-link:hover .menu-image-hover {
	display: block;
	cursor: pointer;
}

.menu-divider {
	border-top: 1px solid white;
	width: 100%;
	height: 1px;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.menu-link {
	display: flex;
	width: 102px;
	height: 40px;
	align-items: center;
}

.menu-link:hover {
	color: #feeb1d;
}

.menu-link-tall {
	height: 75px;
	text-align: center;
	justify-content: center;
	line-height: normal;
}

/* ========== 移動導航 ========== */
.mobile-navbar {
	display: none;
	width: 100%;
	background-color: #1156df;
	position: sticky;
	bottom: 0;
	max-height: 90px;
	z-index: 4;
}

.mobile-navbar-list {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 15px;
	padding-top: 12px;
	padding-bottom: 12px;
	font-size: 16px;
	gap: 12px;
}

.mobile-navbar-link {
	display: inline-block;
	width: 100%;
	color: black;
	background-color: white;
	border-radius: 0.75rem;
	padding: 10px 20px;
	min-width: 80px;
	text-align: center;
	font-weight: bold;
	border: 2px solid #ff7765;
	border-bottom-width: 5px;
	line-height: 1.19;
}

.mobile-navbar-link:hover,
.mobile-navbar-link:focus,
.mobile-navbar-link:active {
	background-color: #feeb1d;
	border-color: #ff7765;
}

/* 不同顏色的導航鏈接 */
.mobile-navbar-link-yellow {
	border-color: #ffc000;
}

.mobile-navbar-link-orange {
	border-color: #ff7800;
}

.mobile-navbar-link-blue {
	border-color: #00d8ff;
	padding: 10px 5px;
}

.mobile-navbar-link-green {
	border-color: #0ab923;
}

/* ========== 工具類 ========== */
.responsive-img {
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.curved-shape {
	clip-path: ellipse(800px 98% at 50% 0%);
}

.desktop-only {
	display: none;
}

.mobile-only {
	display: block;
}

/* ========== 動畫效果 ========== */
/* 左右滑入動畫 */
@keyframes slideInLeft {
	0% {
		transform: translateX(-100%) rotate(-16deg);
		opacity: 0.5;
	}
	85% {
		transform: translateX(0) rotate(-16deg);
		opacity: 1;
	}
	100% {
		transform:  rotate(0deg);
		opacity: 1;
	}
}

@keyframes slideInRight {
	0% {
		transform: translateX(100%) rotate(16deg);
		opacity: 0.5;
	}
	85% {
		transform: translateX(0) rotate(16deg);
		opacity: 1;
	}
	100% {
		transform:  rotate(0deg);
		opacity: 1;
	}
}

/* 從上往下的動畫 */
@keyframes slideInFromTop {
	0% {
		transform: translateY(-300px); /* 起始位置，數值越大，距離越遠 */
	}
	100% {
		transform: translateY(0);
	}
}

/* 修改浮动动画，确保不会改变不透明度 */
@keyframes float1 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-15px);
	}
	100% {
		transform: translateY(0);
	}
}

/* 浮動動畫效果 */
@keyframes float2 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-15px);
	}
	100% {
		transform: translateY(0);
	}
}

/* 浮動並閃爍動畫 */
@keyframes floatAndBlink {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(-15px);
		opacity: 0.5;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/* 縮放動畫 */
@keyframes flashShrink {
	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		transform: translate(-50%, -50%) scale(0.5);
	}
}

/* 從上往下平滑滑入的動畫 */
@keyframes smoothDropIn {
	0% {
		transform: translateY(-200%); /* 起始位置在元素高度的两倍之上 */
		opacity: 1; /* 一开始就是可见的 */
	}
	100% {
		transform: translateY(0); /* 结束位置是元素的正常位置 */
		opacity: 1;
	}
}

/* 動畫類 */
.person-slide-left {
	opacity: 0;
	animation: slideInLeft 1.5s ease-out 1.5s forwards;
}

.person-slide-right {
	opacity: 0;
	animation: slideInRight 1.5s ease-out 1.5s forwards;
}

.animate-float1 {
	animation: float1 3s ease-in-out infinite;
}

.animate-float2 {
	animation: float2 3.5s ease-in-out infinite;
}

.animate-float3 {
	animation: float2 2.5s ease-in-out infinite;
}

.animate-float4 {
	animation: float2 4s ease-in-out infinite;
}

/* ========== 響應式樣式 ========== */
@media (min-width: 640px) {
	/* 頭部 */
	.taogo-event-header .promote-content {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.taogo-event-footer {
		min-width: 1200px;
	}

	/* 內容區 */
	.outer-box {
		border-width: 4px;
		border-radius: 40px;
		padding: 60px 80px;
	}
	.inner-box {
		width: 98%;
		height: 98%;
		border-width: 4px;
		border-radius: 40px;
		transform: translate(-50%, -49%);
	}

	/* 步驟 */
	.steps-content {
		padding-bottom: 100px;
	}

	.steps-title {
		padding: 100px 16px 40px;
	}

	.steps-title .title-img {
		max-width: 790px;
	}

	.steps-item {
		width: 570px;
		padding: 50px 48px;
		border-radius: 40px;
		border-width: 4px;
		box-shadow: 0px 10px 0px -4px #bcbeff,
			0 10px 0 0px #1156df;
	}
	

	/* 首選淘購 */
	.business-content {
		gap: 40px;
		max-width: 1180px;
		width: 100%;
		margin: auto;
		padding-bottom: 100px;
	}

	.business-title {
		padding: 100px 16px 40px;
	}

	.business-title .title-img {
		max-width: 870px;
	}

	.business-item {
		max-width: 570px;
		border-radius: 40px;
		border-width: 4px;
		box-shadow: 0px 10px 0px -4px #bcbeff,
			0 10px 0 0px #1156df;
	}

	.business-item .title-img {
		max-width: 376px;
	}

	.tutorial-links {
		gap: 2rem;
	}

	.tutorial-item {
		gap: 2rem;
		width: auto;
	}

	.tutorial-text {
		font-size: 1.75rem;
	}

	.tutorial-details {
		gap: 2rem;
	}

	.tutorial-container {
		width: 1180px;
		border-radius: 40px;
		border-width: 4px;
		box-shadow: 0px 10px 0px -4px #bcbeff,
			0 10px 0 0px #1156df;
	}

	.tutorial-content,
	.df-tutorial-content {
		padding: 2.5rem;
	}

	.tutorial-title,
	.tutorial-content {
		border-width: 4px;
	}

	.tutorial-title .title-img {
		max-width: 384px;
	}

	.df-tutorial-desc {
		font-size: 1.75rem;
	}

	/* 注意事項 */
	.notice-decorator {
		width: auto;
	}

	.notice-heading {
		font-size: 60px;
		margin-left: 30px;
		margin-right: 30px;
	}

	.notice-content {
		font-size: 1.125rem;
		max-width: 1117px;
		padding: 0.5rem;
		border-radius: 40px;
		margin: 0 auto;
	}
	
	.notice-content .box-content {
		padding: 60px 80px;
	}

	.btn-container {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 2.5rem 0;
	}

	.contact-info {
		line-height: 2;
	}

	/* 工具類 */
	.desktop-only {
		display: block;
	}

	.mobile-only {
		display: none;
	}

	.steps-area .steps-blink-1 {
		width: 100%;
		height: 100%;
		max-width: 32px;
		max-height: 32px;
		position: absolute;
		left: 100px;
		top: 150px;
	}

	.steps-area .steps-blink-2 {
		/* width: 100%; */
		height: 100%;
		max-width: 48px;
		max-height: 48px;
		position: absolute;
		right: 0;
		top: 36%;
	}

	.steps-area .steps-blink-3 {
		width: 100%;
		height: 100%;
		max-width: 48px;
		max-height: 48px;
		position: absolute;
		left: 0;
		bottom: 250px;
	}

	.business-area .business-decorator-1 {
		height: auto;
		max-width: 44px;
		max-height: 65px;
		position: absolute;
		left: 75px;
		top: calc(400 / 1920 * 100%);
		width: clamp(40px, calc(44 / 1920 * 100vw), 44px);
	}

	.business-area .business-decorator-2 {
		width: auto;
		max-width: 30px;
		max-height: 65px;
		position: absolute;
		right: 0;
		top: calc(700 / 1920 * 100%);
		width: clamp(30px, calc(30 / 1920 * 100vw), 30px);
	}

	.business-area .business-decorator-3 {
		height: auto;
		max-width: 20px;
		max-height: 58px;
		position: absolute;
		left: 0;
		top: calc(1450 / 1920 * 100%);
		width: clamp(20px, calc(20 / 1920 * 100vw), 20px);
	}
}

@media (min-width: 768px) {
	/* 側邊菜單在中等尺寸螢幕上顯示 */
	.fixed-side-menu {
		display: block;
	}

	/* 移動導航在中等尺寸螢幕上隱藏 */
	.mobile-navbar {
		display: none !important;
	}

	.tutorial-area .tutorial-blink-1 {
		display: block;
		left: 0;
		top: 43%;
	}

	.tutorial-area .tutorial-blink-2 {
		display: block;
		right: 30px;
		top: 300px;
	}

	.tutorial-area .tutorial-blink-3 {
		display: block;
		right: 30px;
		bottom: 300px;
	}

	.notice-content .notice-decorator-3 {
		display: block;
		left: -4%;
		top: 35%;
	}

	.notice-content .notice-decorator-4 {
		display: block;
		right: -4%;
		bottom: 250px;
	}
}

@media (min-width: 992px) {
	.taogo-event-header .inner-content {
		max-width: 1080px;
		width: 100%;
	}

	.taogo-event-header .inner-content .logo-content {
		width: 50%;
	}
}

@media (min-width: 1024px) {
	.floating-1 {
		display: block;
		left: 100px;
	}

	.floating-2 {
		display: block;
		left: 100px;
	}

	.floating-3 {
		display: block;
		left: 100px;
	}

	.floating-4 {
		display: block;
		left: 100px;
	}

	.floating-5 {
		display: block;
		right: 100px;
	}

	.floating-6 {
		display: block;
		right: 100px;
	}
}

@media (min-width: 1200px) {
	.bg-ring-left {
		left: calc(754 / 1920 * 100%);
	}
	.bg-ring-right {
		top: calc(-100 / 1920 * 100%);
		right: calc(767 / 1920 * 100%);
	}
}

@media (min-width: 1201px) and (max-width: 1209px) {
	.bg-ribbons {
		bottom: calc(-18 / 1920 * 100%);
	}
}

@media (min-width: 1210px) {
	.bg-ribbons {
		bottom: calc(-30 / 1920 * 100%);
	}
}

@media (min-width: 1260px) {
	.bg-ribbons {
		bottom: calc(-20 / 1920 * 100%);
	}

	.business-area .business-decorator-1 {
		left: 100px;
	}

	.steps-area .steps-blink-1 {
		left: 180px;
	}
}

@media (min-width: 1280px) {
	.bg-ribbons {
		bottom: calc(-30 / 1920 * 100%);
	}

	.bg-ring-left {
		top: calc(-90 / 1920 * 100%);
		left: calc(758 / 1920 * 100%);
	}
	.bg-ring-right {
		top: calc(-90 / 1920 * 100%);
		right: calc(770 / 1920 * 100%);
	}
}

@media (min-width: 1360px) and (max-width: 1499px) {
	.business-area .business-decorator-2 {
		right: 20px;
	}

	.business-area .business-decorator-1 {
		left: 150px;
	}
}

@media (min-width: 1460px) {
	.business-area .business-decorator-1 {
		left: 200px;
	}

	.steps-area .steps-blink-1 {
		left: 250px;
	}
}

@media (min-width: 1500px) and (max-width: 1699px) {
	.business-area .business-decorator-1 {
		left: 300px;
	}
	.business-area .business-decorator-2 {
		right: 80px;
	}

	.tutorial-area .tutorial-blink-1 {
		left: 30px;
	}

	.tutorial-area .tutorial-blink-2 {
		right: 100px;
	}

	.tutorial-area .tutorial-blink-3 {
		right: 100px;
	}
}

@media (min-width: 1536px) {
	.floating-1 {
		left: 300px;
	}

	.floating-2 {
		left: 550px;
	}

	.floating-3 {
		left: 585px;
	}

	.floating-4 {
		left: 46.5%;
	}

	.floating-5 {
		right: 28%;
	}

	.floating-6 {
		right: 270px;
	}

	.notice-content .notice-decorator-3 {
		left: -120px;
		top: 400px;
	}

	.notice-content .notice-decorator-4 {
		right: -75px;
		bottom: 250px;
	}

	.bg-ribbons {
		bottom: calc(-20 / 1920 * 100%);
	}

	.steps-area .steps-blink-2 {
		width: 100%;
		right: 100px;
	}
}

@media (min-width: 1690px) {
	.business-area .business-decorator-1 {
		left: 330px;
	}
}

@media (min-width: 1700px) {
	.steps-area .steps-blink-1 {
		left: 22%;
	}

	.steps-area .steps-blink-2 {
		right: 150px;
	}

	.steps-area .steps-blink-3 {
		left: 150px;
	}

	.business-area .business-decorator-2 {
		right: 200px;
	}

	.business-area .business-decorator-3 {
		left: 300px;
	}

	.tutorial-area .tutorial-blink-1 {
		left: 150px;
	}

	.tutorial-area .tutorial-blink-2 {
		right: 180px;
	}

	.tutorial-area .tutorial-blink-3 {
		right: 180px;
	}
}

@media (min-width: 1795px) {
	.business-area .business-decorator-1 {
		left: 380px;
	}

	.steps-area .steps-blink-2 {
		right: 230px;
	}

	.steps-area .steps-blink-3 {
		left: 220px;
	}
}

@media (min-width: 1799px) {
	.business-area .business-decorator-2 {
		right: 250px;
	}

	.tutorial-area .tutorial-blink-2 {
		right: 250px;
	}

	.tutorial-area .tutorial-blink-3 {
		right: 250px;
	}
}

@media (min-width: 1899px) {
	.business-area .business-decorator-1 {
		left: 430px;
	}
	.business-area .business-decorator-2 {
		right: 300px;
	}

	.tutorial-area .tutorial-blink-1 {
		left: 220px;
	}

	.tutorial-area .tutorial-blink-2 {
		right: 280px;
	}

	.tutorial-area .tutorial-blink-3 {
		right: 280px;
	}

	.steps-area .steps-blink-1 {
		left: 455px;
	}

	.steps-area .steps-blink-2 {
		right: 250px;
	}

	.steps-area .steps-blink-3 {
		left: 260px;
	}
}

@media (min-width: 1936px) {
	.bg-ribbons {
		bottom: 0;
	}
}