@charset "UTF-8";
/* =========================================================================

==base
==header
==banner
==index forum
==index video
==index news
==index editor
==index album
==index warning
==footer
==sign in
==breadcrumb + paginaition + no data + privacy
==video
==faq
==news
==schedule
==album
==about
==intro
==product
==forum
==login
==member
==RWD

========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

/* =========================================================================
==base
========================================================================= */
:root {
	--fs-BNTitle: 36px;
	--fs-BNTxt: 20px;
	--fs-sectionTitle: 48px;
	--fs-sectionTitleSM: 22px;
	--fs-sectionTitleEN: 20px;
	--fs-footerTitle: 22px;
	--fs-itemTitle: 20px;
	--fs-sidebarTitle: 24px;
	--fs-infoTitle: 28px;
	--fs-infoPrice: 26px;
	--fs-headerNav: 18px;
	--fs-normal: 16px;
	--fs-small: 14px;

	--section: 80px;
	--cnvs-header-height: 139px;

	--cnvs-themecolor: #00A0E9;
	--cnvs-themecolor-rgb: 0, 160, 233;
	--cnvs-deepblue: #06348B;
	--cnvs-yellow: #F5C520;
	--cnvs-orange: #FF7700;
	--cnvs-pink: #F72585;
	--cnvs-red: #A72626;
	--cnvs-txtgray: #777777;
}

/* ================= base ================= */
body,
.form-control {
	word-break: break-word;
	letter-spacing: 1px;
	line-height: 1.8;
	font-weight: 400;
	font-family: "Noto Sans TC", sans-serif;
	color: var(--cnvs-black);
}

.form-control::placeholder {
	color: var(--cnvs-contrast-600);
}

p:last-child,
ul:last-child,
ol:last-child,
li:last-child,
form:last-child,
.form-control:last-child {
	margin-bottom: 0;
}

a {
	color: var(--cnvs-black);
	transition: .3s ease;
}

a:hover {
	color: var(--cnvs-themecolor);
}

button {
	transition: .3s ease;
}

/* ================= ellipsis ================= */
.one-row { 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.two-row { 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.three-row { 
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}	

/* ==================== btn ==================== */
.btn-base {
	color: var(--cnvs-black);
	font-weight: 400;
	line-height: 1.8;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 11px 48px;
	gap: 4px;
	border-radius: 50px;
	background: linear-gradient(273deg, var(--cnvs-yellow) 5.28%, var(--cnvs-orange) 91.55%);
	position: relative;
	z-index: 2;
	transition: .3s ease;
}

.btn-base:hover {
	color: var(--cnvs-black);
}

.btn-base:after {
	content: '';
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	z-index: -1;
	opacity: 0;
	background: linear-gradient(273deg, var(--cnvs-orange) 5.28%, var(--cnvs-yellow) 91.55%);
	border-radius: 50px;
	transition: 0.3s ease-in;
}

.btn-base:hover:after {
	opacity: 1;
}

.btn-base i {
	line-height: 1;
}

/* ==================== title ==================== */
.section-title {
	position: relative;
	transform: skewX(-12deg);
	z-index: 1;
}

.section-title .en {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 auto 12px;
	max-width: 500px;
}

.section-title .en span {
	font-weight: 700;
	line-height: 1;
	font-size: var(--fs-sectionTitleEN);
}

.section-title .ch {
	display: block;
	position: relative;
	color: transparent;
	font-size: var(--fs-sectionTitle);
	font-weight: 700;
	line-height: 1.3;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
	background-image: url(../images/sectitle_bg.png);
	background-position: bottom;
	background-size: contain;
}

.section-title .ch:after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	text-shadow: 1px 1px 0 var(--cnvs-black),
							-1px -1px 0 var(--cnvs-black),
							0px 1px 0 var(--cnvs-black),
							1px 0px 0 var(--cnvs-black),
							-1px 1px 0 var(--cnvs-black),
							1px -1px 0 var(--cnvs-black),
							4px 3px 0 var(--cnvs-black);
}

.section-title.center .en {
	justify-content: center;
}

.section-title.center .ch:after {
	left: 50%;
	transform: translateX(-50%);
}

.item-title {
	font-size: var(--fs-itemTitle);
	color: var(--cnvs-black);
	line-height: 1.5;
	font-weight: 500;
	margin-bottom: 0;
}

.small-title {
	display: flex;
	color: var(--cnvs-white);
	font-size: var(--fs-sectionTitleSM);
	line-height: 1.5;
	background: linear-gradient(270deg, #00A0E9 0%, #06348B 100%);
}

.small-title .icons {
	position: relative;
	display: inline-flex;
	padding: 0;
}

.small-title .icons:after {
	content: '';
	display: inline-block;
	clip-path: polygon(0 0, 100% 0, 68% 100%, 0% 100%);
	background-color: var(--cnvs-yellow);
	width: 54px;
}

.small-title .icons img {
	position: absolute;
	top: 50%;
	left: 8px;
	transform: translateY(-50%);
	z-index: 1;
}

.small-title span {
	padding: 8px;
}

.footer-title {
	font-size: var(--fs-footerTitle);
	line-height: 1.5;
	color: var(--cnvs-white);
}

.sidebar-title {
	font-size: var(--fs-footerTitle);
	color: var(--cnvs-black);
}

.sidebar-title span {
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 8px;
	text-decoration-color: rgba(245, 197, 32, .3);
	text-underline-offset: -1px;
}

.info-title {
	font-size: var(--fs-infoTitle);
	color: var(--cnvs-black);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 8px;
	text-decoration-color: rgba(245, 197, 32, .3);
	text-underline-offset: -1px;
}

/* ==================== other ==================== */
@media (min-width: 576px) {
	.position-sm-absolute {
		position: absolute !important;
	}
}

@media (min-width: 992px) {
	.g-lg-5, .gx-lg-5 {
    --bs-gutter-x: 3rem;
	}
}

@media (min-width: 1200px) {
	.g-xl-5, .gx-xl-5 {
    --bs-gutter-x: 3rem;
	}
}

@media (min-width: 1520px) {
	.container {
		max-width: 1460px;
	}
}
	
.section {
	background-color: transparent;
	padding: var(--section) 0;
	margin: 0;
}

.h-color:hover {
	color: var(--cnvs-themecolor) !important;
}

.h-color-white:hover {
	color: var(--cnvs-white) !important;
}

.color-deepblue,
.h-color-deepblue:hover,
.h-color-deepblue:active {
	color: var(--cnvs-deepblue) !important;
}

.color-yellow,
.h-color-yellow:hover,
.h-color-yellow:active {
	color: var(--cnvs-yellow) !important;
}

.color-pink,
.h-color-pink:hover,
.h-color-pink:active {
	color: var(--cnvs-pink) !important;
}

.color-txtgray {
	color: var(--cnvs-txtgray) !important;
}

.bg-deepblue {
	background: var(--cnvs-deepblue) !important;
}

.bg-yellow,
.h-bg-yellow:hover,
.h-bg-yellow:active {
	background: var(--cnvs-yellow) !important;
}

.bg-red {
	background: var(--cnvs-red) !important;
}

.bg-pink,
.h-bg-pink:hover,
.h-bg-pink:active {
	background: var(--cnvs-pink) !important;
}

.text-underline-yellow {
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 8px;
	text-decoration-color: rgba(245, 197, 32, .3);
	text-underline-offset: -1px;
}

/* ================= preloader ================= */
#preloader {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 600;
}

#preloader img {
  width: 180px;
	animation: flip 2s infinite;
}

@keyframes flip {
	0% {
		transform: rotateY(180deg);
	}
	50% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(180deg);
	}
}

/* =========================================================================
==header
========================================================================= */
@media (min-width: 1500px) {
	.header-container.container {
		max-width: 1320px;
	}
}

#header-wrap,
.is-expanded-menu .sticky-header #header-wrap,
body:not(.is-expanded-menu) .sticky-header #header-wrap {
	background-color: var(--cnvs-themecolor);
}

/* =============== logo =============== */
.PC-header .logo {
	max-width: 150px;
}

/* =============== menu =============== */
.PC-header .menu-wrap a,
.menu-link {
	display: block;
	font-size: var(--fs-headerNav);
	font-weight: 600;
	line-height: 1.5;
	font-family: "Noto Sans TC", sans-serif;
	padding: 24px 0;
	color: var(--cnvs-white);
}

.PC-header .menu-wrap a:hover {
	color: var(--cnvs-yellow);
}

.PC-header .sep-line {
	width: 1px;
	height: 24px;
	background-color: var(--cnvs-white);
}

/* =============== top bar =============== */
#top-bar {
	font-size: 16px;
}

#top-bar i {
	font-size: 24px;
}

#top-bar .sns-wrap a {
	position: relative;
	overflow: hidden;
	padding: 0 1px;
}

#top-bar .sns-wrap a i {
	background-color: var(--cnvs-white);
	position: relative;
	z-index: 1;
}

#top-bar .sns-wrap a span {
	position: absolute;
	white-space: nowrap;
	left: -50%;
	opacity: 0;
	transition: .3s ease;
}

#top-bar .sns-wrap a:hover span {
	left: 33px;
	opacity: 1;
}

#top-bar .sns-wrap a.line:hover {
	padding-right: 45px;
}

#top-bar .sns-wrap a.facebook:hover {
	padding-right: 86px;
}

#top-bar .sns-wrap a.youtube:hover {
	padding-right: 75px;
}

#top-bar .sns-wrap a.instagram:hover {
	padding-right: 90px;
}

#top-bar .func-wrap a small {
	width: 16px;
	height: 16px;
	font-size: 10px;
	letter-spacing: 0;
	top: 0;
	left: 16px;
}

/* =============== search =============== */
.modal-backdrop {
	--bs-backdrop-opacity: 0.9;
}

#PCsearch .search-wrap {
	max-width: 800px;
}

#PCsearch input::placeholder {
	color: var(--cnvs-contrast-400);
}

#PCsearch .close-btn {
	top: 48px;
	right: 80px;
}

/* =========================================================================
==banner
========================================================================= */
#slider {
	aspect-ratio: 2000 / 1075;
}

.slider-caption .banner-title {
	font-size: var(--fs-BNTitle);
	line-height: 1.3;
	color: var(--cnvs-black);
	text-shadow: 1px 1px 0 var(--cnvs-white),
							-1px -1px 0 var(--cnvs-white),
							0px 1px 0 var(--cnvs-white),
							1px 0px 0 var(--cnvs-white),
							-1px 1px 0 var(--cnvs-white),
							1px -1px 0 var(--cnvs-white),
							3px 3px 0 var(--cnvs-white);
}

.slider-caption .banner-txt {
	font-size: var(--fs-BNTxt);
	line-height: 1.5;
	font-weight: 600;
	color: var(--cnvs-white);
	text-shadow: 2px 2px 0 var(--cnvs-black);
}

/* =============== pagination =============== */
.swiper-pagination {
	bottom: 16px !important;
}

.swiper-pagination span {
	width: 8px;
	height: 8px;
	border: 0;
	background-color: var(--cnvs-white);
	opacity: 0.4;
}

.swiper-pagination span.swiper-pagination-bullet-active {
	opacity: 1;
}

/* =========================================================================
==index forum
========================================================================= */
.forum-item:nth-child(2) {
	animation-delay: 0.1s;
}

.forum-item:nth-child(3) {
	animation-delay: 0.2s;
}

.forum-item:nth-child(4) {
	animation-delay: 0.3s;
}

.forum-item:nth-child(5) {
	animation-delay: 0.4s;
}

/* =========================================================================
==index video
========================================================================= */
.index-video-section::before {
	content: '';
	position: absolute;
	top: -28%;
	left: -3.69%;
	width: 570px;
	height: 570px;
	border-radius: 50%;
	background: var(--cnvs-pink);
	filter: blur(50px) opacity(0.3);
}

.index-video-section::after {
	content: '';
	position: absolute;
	bottom: -27.24%;
	right: -14.32%;
	width: 570px;
	height: 570px;
	border-radius: 50%;
	background: var(--cnvs-yellow);
	filter: blur(50px) opacity(0.4);
}

.index-video-section .img-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(6, 52, 139, 0.80);
}

.index-video-section .deco-img-1 {
	width: 31%;
	position: absolute;
	bottom: 0;
	left: 0;
}

.index-video-section .deco-img-2 {
	width: 400px;
	position: absolute;
	bottom: 115px;
	right: 90.625%;
	transform: translateX(100%);
}

.index-video-section .h1 {
	font-size: var(--fs-sectionTitleEN);
}

/* =========================================================================
==index news
========================================================================= */
.news-item-wrap {
	padding: 10px 0;
	border-radius: 15px;
}

.news-item {
	border-radius: 15px;
	border: 2px dashed var(--cnvs-pink);
	background-color: var(--cnvs-yellow);
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.35);
	transition: .3s ease;
}

.news-item .item-title {
	height: 60px;
}

/* =============== img =============== */
.news-item .img-wrap {
	border-radius: 15px;
}

.news-item .img-wrap img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: .3s ease;
}

/* =============== hover =============== */
.news-item:hover {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-deepblue);
}

.news-item:hover * {
	color: var(--cnvs-white) !important;
}

.news-item:hover .img-wrap img {
	transform: scale(1.08);
}

/* =============== pagination + nav =============== */
.index-news-section .swiper-free-mode>.swiper-wrapper {
	padding-bottom: 48px;
}

.index-news-section .swiper-pagination {
	position: static;
	width: fit-content;
	margin-top: -4px;
}

.index-news-section .swiper-pagination span {
	background-color: var(--cnvs-themecolor);
}

.index-news-section .swiper-pagination span:hover,
.index-news-section .swiper-pagination span.swiper-pagination-bullet-active {
	background-color: var(--cnvs-themecolor) !important;
}

.index-news-section [class*=swiper-button-] {
	position: static;
	margin-top: 0;
	width: 30px;
	height: 16px;
}

.index-news-section [class*=swiper-button-]::after {
	display: none;
}

.index-news-section [class*=swiper-button-].swiper-button-disabled {
	opacity: 0.4;
}

/* =============== deco img =============== */
.index-news-section .deco-img-1 {
	width: 330px;
	position: absolute;
	bottom: -10px;
	right: 25px;
}

/* =========================================================================
==index editor
========================================================================= */
.index-editor-section .img-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(6, 52, 139, 0.80);
}

.index-editor-section .editor-item {
	border-radius: 20px;
}

.index-editor-section .editor-item .item-img::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	z-index: 2;
	display: block;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
	transform: skewX(-25deg);
}

.index-editor-section .editor-item .item-img:hover::before {
	animation: shine 1s;
}

@keyframes shine {
  100% {
    left: 125%
  }
}

/* =============== deco img =============== */
.index-editor-section .editor-item .decoblur-pink::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 12.11%;
	transform: translateY(-50%);
	width: 302px;
	height: 302px;
	border-radius: 50%;
	background: var(--cnvs-pink);
	filter: blur(50px) opacity(0.4);
	z-index: -1;
}

.index-editor-section .editor-item .decoblur-yellow::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 12.11%;
	transform: translateY(-50%);
	width: 302px;
	height: 302px;
	border-radius: 50%;
	background: var(--cnvs-yellow);
	filter: blur(50px) opacity(0.5);
	z-index: -1;
}

.index-editor-section .img-decobg {
	width: 24.84%;
}

/* =========================================================================
==index album
========================================================================= */
.album-item {
	border-radius: 20px;
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.35);
}

.album-item::before {
	content: '';
	border-radius: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 3px dashed var(--cnvs-pink);
	z-index: 2;
}

.album-item .img-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: .3s ease;
}

.album-item:hover .img-wrap::before {
	opacity: 1;
}

.album-item .img-wrap img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

.album-item .item-title {
	opacity: 0;
	transition: .3s ease;
}

.album-item:hover .item-title {
	opacity: 1;
}

/* =============== deco img =============== */
.index-album-section .decobg-img {
	width: 86.8%;
}

.index-album-section .deco-img-1 {
	width: 240px;
	left: 38px;
}

.index-album-section .deco-img-2 {
	width: 495px;
}

/* =========================================================================
==index warning
========================================================================= */
.index-warning-section ul {
	margin-left: 36px;
}

/* =========================================================================
==footer
========================================================================= */
#footer *,
.copyrights * {
	color: var(--cnvs-white);
}

#footer a:hover,
#footer a:hover *,
.copyrights a:hover {
	color: var(--cnvs-yellow);
}

#footer .img-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(6, 52, 139, 0.80);
}

#footer .footer-menu li.adject-size {
	width: 119px;
}

/* =============== copyrights =============== */
.copyrights .sns-wrap {
	column-gap: 28px;
}

.copyrights .sns-wrap a {
	width: 36px;
	height: 36px;
}

/* =============== gotoTop =============== */
#gotoTop {
	width: 42px;
	height: 42px;
	border-radius: 6px;
	border: 2px solid var(--cnvs-yellow);
	background: linear-gradient(90deg, var(--cnvs-yellow) 0%, var(--cnvs-orange) 100%);
	transition: .3s ease;
}

#gotoTop:hover {
	border-color: var(--cnvs-pink);
}

#gotoTop::after {
	content: '';
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	z-index: -1;
	opacity: 0;
	background: linear-gradient(135deg, var(--cnvs-pink) 6.54%, var(--cnvs-orange) 94.05%);
	transition: 0.3s ease-in;
}

#gotoTop:hover::after {
	opacity: 1;
}

/* =============== float sns =============== */
.float-sns-wrap {
	right: -96px;
	z-index: 599;
}

.float-item {
	border-radius: 30px 0px 0px 30px;
	padding: 8px 16px;
}

.float-item i {
	font-size: 30px;
}

.float-sns-wrap .float-item:hover {
	transform: translateX(calc(-100% + 54px)); /* 54px = float-item最長寬度寬度(150px) - float-sns-wrap的right值(96px) */
}

/* =============== deco img =============== */
#footer::before {
	content: '';
	position: absolute;
	top: -91.33%;
	right: -12.5%;
	width: 570px;
	height: 570px;
	border-radius: 50%;
	background: var(--cnvs-pink);
	filter: blur(50px) opacity(0.4);
}

#footer::after {
	content: '';
	position: absolute;
	bottom: -97.37%;
	left: -8.07%;
	width: 570px;
	height: 570px;
	border-radius: 50%;
	background: var(--cnvs-themecolor);
	filter: blur(50px) opacity(0.4);
}

/* =============== deco img =============== */
.mobile-sns-wrap {
	position: fixed;
	bottom: 100px;
	right: 30px;
	z-index: 599;
}

.mobile-sns-wrap a {
	width: 38px;
	height: 38px;
}

.mobile-sns-wrap .sns-btn {
	width: 42px;
	height: 42px;
	font-size: 14px;
	background: linear-gradient(90deg, var(--cnvs-themecolor) 0%, var(--cnvs-deepblue) 100%);
	border: 2px solid var(--cnvs-deepblue);
	color: var(--cnvs-white);
	border-radius: 6px;
}

.mobile-sns-wrap .txt:after {
	content: '收合';
	transition: all 0.3s ease-in-out;
}

.mobile-sns-wrap.collapsed .txt:after {
	content: '展開';
}

.mobile-sns-wrap ul {
	transition: all 0.3s ease-in-out;
	overflow: hidden;
}

.mobile-sns-wrap.collapsed ul {
	max-height: 0;
	opacity: 0;
	margin-bottom: 0;
}

.mobile-sns-wrap:not(.collapsed) ul {
	max-height: 200px; /* 根據實際內容調整 */
	opacity: 1;
	margin-bottom: 0.5rem;
}

.mobile-sns-wrap > i {
	transition: all 0.3s ease-in-out;
	display: block;
	margin-bottom: 0.5rem;
}

.mobile-sns-wrap.collapsed > i {
	transform: rotate(0deg) translateY(16px);
}

.mobile-sns-wrap:not(.collapsed) > i {
	transform: rotate(180deg) translateY(-8px);
}

/* =========================================================================
==sign in
========================================================================= */
.sign-in-wrap {
	z-index: 999;
	background-color: rgba(0,0,0,0.6);
}

.sign-in-wrap .sign-in-item {
	padding: 32px;
	max-height: 90%;
	overflow: auto;
}

.sign-in-wrap .section-title .ch {
	font-size: 38px;
}

.sign-in-wrap .section-title .en {
	margin: 0 auto 8px;
}

.sign-in-wrap .section-title .en span {
	font-size: 16px;
}

.sign-in-wrap .section-title .en img {
	width: 6px;
}

.sign-in-wrap .sign-in-form {
	width: 538px;
	margin: 0 auto;
}

.sign-in-wrap .sign-in-form .item {
	position: relative;
	width: 70px;
	height: 70px;
	border: 2px solid var(--cnvs-yellow);
	font-size: 13px;
}

.sign-in-wrap .sign-in-form .item > div {
	transform: translateY(-2px);
}

.sign-in-wrap .sign-in-form .item img {
	width: 40px;
}

.sign-in-wrap .sign-in-form .item > img {
	display: none;
	width: 36px;
}

.sign-in-wrap .sign-in-form .item.active > img {
	display: block;
}

.sign-in-wrap .sign-in-form .item.active {
	border-color: var(--cnvs-themecolor);
	border-width: 2px;
}

.sign-in-wrap .sign-in-form .item.active::before {
	content: '';
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.5);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	border-radius: var(--bs-border-radius-lg);
}

.bl_check_name_ok,
.bl_check_name_repeat {
	display: flex;
}

.bl_check_name_ok i,
.bl_check_name_repeat i {
	line-height: 1;
}

/* =========================================================================
==breadcrumb + paginaition + no data + privacy
========================================================================= */
/* =============== breadcrumb =============== */
.breadcrumb-wrap {
	padding: 80px 0;
}

.breadcrumb-wrap + main .section {
	padding-top: calc(var(--section) + 30px);
}

.breadcrumb-wrap .section-title .ch:after {
	left: 50%;
	transform: translateX(-50%);
}

.breadcrumb-wrap .breadcrumb-menu {
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
}

.breadcrumb-wrap ul {
	width: fit-content;
	padding: 12px 48px;
	border: 5px solid var(--cnvs-white);
	max-width: calc(100% - 24px);
	margin: 0 auto;
}

.breadcrumb-wrap ul::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 3px dashed var(--cnvs-pink);
	border-radius: 50rem;
	z-index: -1;
}

.breadcrumb-wrap ul::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: var(--cnvs-pink);
	filter: blur(50px) opacity(0.5);
	z-index: -1;
}

.breadcrumb-wrap li:not(:last-child)::after {
	content: "\f234";
	font-family: bootstrap-icons !important;
	line-height: 1;
	vertical-align: -.125em;
	-webkit-font-smoothing: antialiased;
	color: var(--cnvs-white);
	margin: 0 12px;
}

.breadcrumb-wrap a:hover {
	color: var(--cnvs-yellow) !important;
}

/* =============== pagination =============== */
.page-link {
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	background-color: var(--cnvs-contrast-200);
	color: var(--cnvs-black);
}

/* =============== no data =============== */
.no-data {
	border: 1px solid var(--cnvs-deepblue);
	color: var(--cnvs-deepblue);
}

/* =============== privacy =============== */
.fbox-icon i {
	line-height: 2.1;
}

/* =========================================================================
==video
========================================================================= */
.above-category-wrap {
	background: #d3f0fd;
}

.above-category-wrap li a {
	font-size: var(--fs-headerNav);
}

.above-category-wrap li.active a {
	color: var(--cnvs-themecolor);
}

.info-decobg {
	width: 86.8%;
}

/* =========================================================================
==faq
========================================================================= */
.faq-wrap .position-sticky {
	top: calc(var(--cnvs-header-height-shrink) + (var(--section) + 40px));
}

.faq-wrap .toggle {
	--cnvs-toggle-base-color: var(--cnvs-heading-color);
	--cnvs-toggle-font-size: 1.125rem;
	--cnvs-toggle-title-color: var(--cnvs-heading-color);
	--cnvs-toggle-content-padding: 1.5rem 1.75rem;
	margin: 0 0 30px 0;
}

.faq-wrap .toggle-header {
border-radius: var(--cnvs-card-rounded);
font-weight: 600;
}

.faq-wrap .toggle-content {
padding: 1.5rem 0;
padding-bottom: .75rem;
opacity: .8;
margin-bottom: 0;
}

.faq-wrap .toggle-closed {
transition: .2s;
opacity: .2;
}

.faq-wrap .toggle-active .toggle-closed {
display: block;
transform: rotate(45deg);
opacity: 1;
}

/* =========================================================================
==news
========================================================================= */
/* =============== sidebar =============== */
.sidebar-item:not(:last-child) {
	margin-bottom: 48px;
}

/* category */
.sidebar-item .cate-wrap li.active {
	border-color: transparent !important;
}

.sidebar-item .cate-wrap li.active a {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

.sidebar-item .cate-wrap li small {
	color: var(--bs-secondary-rgb);
}

.sidebar-item .cate-wrap li.active small {
	color: var(--cnvs-white);
}

/* search */
.sidebar-item .search-wrap .form-control {
	border: 0;
	border-bottom: 1px solid var(--cnvs-deepblue);
}

/* hot */
.sidebar-item .hot-wrap .hot-item {
	transition: none;
}

.sidebar-item .hot-wrap .hot-item:hover {
	border-color: transparent !important;
}

.sidebar-item .hot-wrap .hot-item > div {
	border: 2px dashed transparent;
	transition: .3s ease;
}

.sidebar-item .hot-wrap .hot-item:hover > div {
	background-color: var(--cnvs-yellow);
	border: 2px dashed var(--cnvs-pink) !important;
}

/* share */
.share-wrap {
	position: sticky;
	top: calc(var(--cnvs-header-height) + 48px);
}

.share-wrap span {
	writing-mode: vertical-lr;
}

.share-wrap span::after {
	content: '';
	display: block;
	height: 18px;
	width: 1px;
	background-color: var(--cnvs-black);
	transform: rotate(20deg);
	margin: 8px;
}

.share-wrap .social-icon {
	--cnvs-socialicon-lineheight: calc(var(--cnvs-socialicon-size) - calc(var(--cnvs-socialicon-border) * 0.2));
}

.share-wrap .social-icon i {
	line-height: 40px;
}

.share-wrap .items {
	gap: 12px;
	background-color: rgba(var(--cnvs-themecolor-rgb), 0.2);
}

.share-wrap .items .btn_ {
	background-color: var(--cnvs-yellow);
}

/* =========================================================================
==schedule
========================================================================= */
/* =============== item =============== */
.schedule-list-wrap .schedule-item {
	border: 3px dashed var(--cnvs-pink);
	border-radius: 15px;
	background-color: var(--cnvs-white);
}

.schedule-list-wrap .schedule-item:hover {
	background-color: var(--cnvs-deepblue);
	border-color: var(--cnvs-themecolor);
}

.schedule-list-wrap .schedule-item:hover .date-wrap {
	color: var(--cnvs-white) !important;
}

.schedule-list-wrap .date-wrap,
.schedule-list-wrap .txt-wrap {
	padding: 24px 30px;
}

.schedule-list-wrap .date-wrap span {
	font-size: 48px;
}

.schedule-list-wrap .sep-line {
	width: 1px;
	height: 80px;
	background-color: var(--bs-border-color);
}

.schedule-list-wrap .info {
	margin-bottom: 6px;
}

.schedule-list-wrap .item-title {
	font-size: var(--fs-sidebarTitle);
}

.schedule-list-wrap .schedule-item:hover .item-title {
	color: var(--cnvs-white);
}

.schedule-list-wrap .schedule-item:hover .tag,
.schedule-list-wrap .schedule-item:hover .level,
.schedule-list-wrap .schedule-item:hover .intro {
	color: rgba(255, 255, 255, 0.7) !important;
}

.schedule-list-wrap .level::after {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	background-color: #999;
	border-radius: 20px;
	margin: 0 12px;
	transform: translateY(-3px);
}

/* =============== hot =============== */
.schedule-hot-wrap .date-wrap span {
	font-size: 24px;
}

.schedule-hot-wrap .date-wrap small {
	font-size: 13px;
}

.schedule-hot-wrap .sep-line {
	width: 1px;
	height: 45px;
	background-color: var(--bs-border-color);
}

.schedule-hot-wrap .item-title {
	font-size: 17px;
}

/* =============== cate =============== */
.schedule-cate-wrap .toggle.active {
	border: 0 !important;
}

.schedule-cate-wrap .toggle.active .toggle-header {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

.schedule-cate-wrap .toggle.active .toggle-title {
	color: var(--cnvs-white);
}

.schedule-cate-wrap .toggle.active .toggle-content > ul {
	border-bottom: 1px solid var(--bs-border-color);
}

.schedule-cate-wrap .toggle.active .toggle-content li.active a {
	color: var(--cnvs-themecolor);
}

/* =============== info =============== */
.schedule-info-wrap .tag::after,
.schedule-info-wrap .level::after {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	background-color: #999;
	border-radius: 20px;
	margin: 0 12px;
	transform: translateY(-3px);
}

/* =========================================================================
==album
========================================================================= */
/* =============== list =============== */
.album-list-wrap .album-item .img-wrap::before {
	background: rgba(0, 0, 0, 0.4);
	z-index: 1;
}

.album-list-wrap .album-item .img-wrap img {
	transition: .3s ease;
}

.album-list-wrap .album-item:hover .img-wrap img {
	transform: scale(1.05);
}

.album-list-wrap .album-item .txt-wrap::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
	width: 100%;
	height: 100%;
	z-index: -1;
}

.album-list-wrap .album-item .item-title {
	opacity: 1;
}

/* =============== info =============== */
.album-info-wrap .cover-img {
	border-radius: 20px;
}

.album-info-wrap .cover-img::before {
	content: '';
	border-radius: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 3px dashed var(--cnvs-pink);
	z-index: 2;
}

.more-img-wrap .img-wrap {
	margin: 0 16px 16px 0;
}

.more-img-wrap .img-wrap::after {
	content: '';
	position: absolute;
	bottom: -16px;
	right: -16px;
	width: 100%;
	height: 100%;
	background-color: rgba(var(--cnvs-themecolor-rgb), .2);
	border-radius: 10px;
	z-index: -1;
}

.more-img-wrap a .img {
	border-radius: 10px;
}

.more-img-wrap a .img::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.3);
	border-radius: 10px;
	opacity: 0;
	z-index: 1;
}

.more-img-wrap a:hover .img::before {
	opacity: 1;
}

.more-img-wrap a .img img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: .3s ease;
}

.more-img-wrap a:hover .img img {
	transform: scale(1.05);
}

/* =========================================================================
==about
========================================================================= */
.about-wrap-1 .deco-img {
	width: 430px;
}

.about-wrap-1 .aboutIcon-item {
	border-radius: 15px;
	padding: 30px 42px;
}

.about-wrap-1 .num-txt {
	font-size: 60px;
	font-weight: 900;
	top: -45px;
	right: 30px;
	color: #cbe8f5;
	font-style: italic;
}

.about-wrap-2 .bgimg-img {
	width: 40%;
	top: 50%;
	transform: translateY(-50%);
}

.about-wrap-2 .bgimg-img::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(6, 52, 139, .7);
	border-radius: 0 15px 15px 0;
}

.about-wrap-2 .bgimg-img {
	height: 100%;
}

.about-wrap-2 img {
	border-radius: 15px;
}

/* =========================================================================
==intro
========================================================================= */
/* =============== intro menu =============== */
.intro-menu-wrap .menu-item {
	transition: .3s ease;
}

.intro-menu-wrap .menu-item:hover {
	transform: translateY(-8px);
}

.intro-menu-wrap li .menu-item div {
	border: 4px solid transparent;
}

.intro-menu-wrap li.active .menu-item:hover {
	transform: none;
}

.intro-menu-wrap li.active .menu-item div {
	border: 4px solid var(--cnvs-pink);
}

.intro-menu-wrap li.active .menu-item p {
	color: var(--cnvs-pink);
}

.intro-menu-wrap .menu-item img {
	transform: translateY(-13px);
}

.intro-menu-wrap .menu-title {
	font-size: var(--fs-sidebarTitle);
}

/* =============== intro_2 =============== */
/* .scrollspy-menu .position-sticky {
	top: calc(var(--cnvs-header-height-shrink) + (var(--section) + 40px));
}

.scrollspy-menu .nav-pills .nav-link.active {
	background-color: var(--cnvs-themecolor);
}

.scrollspy-menu .nav-link:hover, 
.scrollspy-menu .nav-link:focus {
	color: var(--cnvs-themecolor);
}

.scrollspy-menu .nav-link.active:hover, 
.scrollspy-menu .nav-link.active:focus {
	color: var(--cnvs-white);
} */

.intro-lottery-wrap .lottery-item .small-title {
	border-radius: 20px 20px 0 0;
}

.intro-lottery-wrap .lottery-item .small-title .icons:after {
	border-radius: 20px 0 0 0;
}

.intro-lottery-wrap .lottery-item .small-title + div {
	border-radius: 0 0 20px 20px;
}

.intro-lottery-wrap .lottery-item .decoblur-yellow::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 12.11%;
	transform: translateY(-50%);
	width: 40%;
	height: 480px;
	border-radius: 50%;
	background: var(--cnvs-yellow);
	filter: blur(50px) opacity(0.5);
	z-index: -1;
}

.intro-lottery-wrap .lottery-item .decoblur-pink::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 12.11%;
	transform: translateY(-50%);
	width: 40%;
	height: 480px;
	border-radius: 50%;
	background: var(--cnvs-pink);
	filter: blur(50px) opacity(0.4);
	z-index: -1;
}

/* =========================================================================
==product
========================================================================= */
.pd-item .img-wrap img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: .3s ease;
}

.pd-item .img-wrap:hover img {
	transform: scale(1.05);
}

.pd-item .bi-heart-fill {
	color: var(--cnvs-themecolor);
}

.pd-item .item-title {
	font-size: var(--fs-headerNav);
	height: 53px;
}

/* =============== mobile menu =============== */
.pd-cate-mobile > div > div {
	height: 40px;
}

.pd-cate-mobile .toggle-icon.mobile {
	transform: translateY(4px);
}

.pd-cate-mobile .menu-list {
	top: 38px;
	background-color: #effaff;
	display: none;
}

.pd-cate-mobile .menu-list.show {
	display: block;
}

.pd-cate-mobile .menu-list .toggle:not(:last-child) {
	border-bottom: 1px solid var(--bs-border-color);
}

/* otehr cate */
.pd-cate-mobile.other-cate .toggle-icon {
	transform: translate(0);
}

.pd-cate-mobile.other-cate > div > div {
	height: auto;
}

.pd-cate-mobile.other-cate .menu-list {
	top: 45px;
}

/* =============== info =============== */
/* price */
.pd-info-price {
	font-size: var(--fs-infoPrice);
}

/* num */
.pd-num-wrap .quantity input {
	background-color: transparent;
	border: 1px solid var(--bs-border-color);
}

.pd-num-wrap .quantity .qty {
	border-right: none;
	border-left: none;
	width: 150px;
}

.pd-info-btn .btn-base.pdinfo-heart-btn {
	background: transparent;
	border: 2px solid var(--cnvs-themecolor);
	color: var(--cnvs-themecolor);
	padding: 9px 46px;
}

.pd-info-btn .btn-base.pdinfo-heart-btn:after {
	display: none;
}

.pd-info-btn .btn-base.pdinfo-heart-btn:hover {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

/* img */
.pdSwiper2 {
	--swiper-navigation-size: 18px;
}

.pdSwiper2 .swiper-slide a {
	aspect-ratio: 1 / 1;
}

.pdSwiper2 .swiper-slide a img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.pdSwiper .swiper-slide {
	border: 1px solid var(--bs-border-color);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pdSwiper .swiper-slide.swiper-slide-thumb-active {
	border: 2px solid var(--cnvs-deepblue);
}

.pdSwiper .swiper-slide img {
	opacity: 0.35;
}

.pdSwiper .swiper-slide.swiper-slide-thumb-active img {
	opacity: 1;
}

/* =========================================================================
==forum
========================================================================= */
/* =============== list board =============== */
.board-wrap {
	border-top: 2px solid var(--cnvs-themecolor);
	background-color: #effaff;
}

.board-wrap ul li a {
	background-color: var(--cnvs-white);
	border: 1px solid var(--bs-border-color);
}

.board-wrap ul li.active a {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

.board-list {
	height: 57px;
	overflow: hidden;
	transition: max-height 0.3s;
}

.board-list.expanded {
	height: 100%;
}

.board-toggle {
	cursor: pointer;
}

.board-toggle i {
	transition: transform 0.3s;
}

.board-wrap.expanded .board-toggle i {
	transform: rotate(180deg);
}

.board-toggle .toggle-text::after {
	content: "展開";
}

.board-wrap.expanded .board-toggle .toggle-text::after {
	content: "收合";
}

/* =============== list sort =============== */
.sort-wrap {
	width: 200px;
	cursor: pointer;
}

.sort-menu {
	width: calc(100% + 2px);
	left: -1px;
}

.sort-menu li:not(:last-child) {
	border-bottom: 1px solid var(--bs-border-color);
}

.sort-menu li a {
	background-color: var(--bs-light);
}

.sort-menu li a:hover {
	background-color: var(--bs-dark-bg-subtle)
}

/* =============== list forum item =============== */
.forum-table {
	table-layout: fixed;
}

.forum-table thead {
	border-top: 2px solid var(--cnvs-pink);
	background: var(--cnvs-deepblue);
	color: var(--cnvs-white);
}

.forum-table thead th {
	font-weight: 400;
}

.forum-table .theme {
	width: 60%;
}

.forum-table .avatar {
	width: 120px;
	position: relative;
}

.forum-table .avatar::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 20px;
	background-color: var(--bs-border-color);
}

.forum-table .avatar::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 20px;
	background-color: var(--bs-border-color);
}

.forum-table .author {
	position: relative;
}

.forum-table .author::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 20px;
	background-color: var(--bs-border-color);
}

.forum-table .avatar-img {
	width: 70px;
}

/* =============== list forum tag =============== */
.forum-tag {
	position: relative;
	overflow: hidden;
	background: var(--cnvs-yellow);
	padding: 0px 4px;
	color: var(--cnvs-white);
	border-radius: 2px;
	transform: translateY(3px);
}

.forum-tag::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	z-index: 2;
	display: block;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
	transform: skewX(-25deg);
	animation: shine 1s infinite;
}

.forum-tag.hot::after {
	animation: shine 1s infinite 0.3s;
}

/* =============== info forum follow =============== */
.follow-forum-btn {
	color: var(--cnvs-themecolor);
	background-color: var(--cnvs-white);
	white-space: nowrap;
}

.follow-forum-btn:hover,
.follow-forum-btn:active,
.follow-forum-btn.active {
	color: var(--cnvs-white);
	background-color: var(--cnvs-themecolor);
}

/* =============== poster =============== */
.preview-btn {
	background: transparent;
	border: 2px solid var(--cnvs-themecolor);
	color: var(--cnvs-themecolor);
	padding: 9px 46px;
}

.preview-btn:hover {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

.preview-btn::after {
	display: none;
}

/* =============== post =============== */
.floor-title {
	font-size: var(--fs-sectionTitleSM);
}

.forum-post-wrap .info-wrap {
	border-bottom: 1px dashed var(--bs-border-color);
}

.forum-post-wrap .thumb-wrap {
	background: linear-gradient(180deg, #00A0E9 0%, #06348B 100%);
	border-radius: var(--bs-border-radius-sm);
}

.forum-post-wrap .thumb-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, #00A0E9 0%, #06348B 100%);
	opacity: 0;
	border-radius: var(--bs-border-radius-sm);
	transition: .3s ease;
}

.forum-post-wrap .thumb-wrap:hover::after {
	opacity: 1;
}

.forum-post-wrap .thumb-wrap img {
	bottom: 3px;
	left: -19px;
}

.forum-post-wrap .thumb-wrap p {
	padding: 4px 0 6px 30px;
}

.forum-post-wrap .thumb-wrap .num {
	color: #ffff00;
	padding: 0px 6px 0 8px;
}

.forum-post-wrap .info-wrap .reply-line {
	width: 1px;
	height: 16px;
	background-color: var(--bs-border-color);
}

.forum-post-wrap .thumb-wrap.bottom-thumb img {
	bottom: 35px;
}

.forum-post-wrap .reply-content {
	border: 3px solid var(--bs-border-color);
	max-height: 150px;
	overflow: auto;
	background-color: #f5f5f5;
}

.forum-post-wrap .reply-content .txt-wrap * {
	opacity: 0.7;
}

/* =========================================================================
==login
========================================================================= */
/* =============== base =============== */
.login-wrap .position-sticky {
	top: calc(var(--cnvs-header-height-shrink) + (var(--section) + 40px));
}

.login-wrap input::placeholder {
	font-size: 15px;
}

input[type="date"] {
  cursor: pointer;
  padding-right: 2.5rem;
  position: relative;
	height: 46px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="date"]::-webkit-datetime-edit {
  padding: 0;
  margin: 0;
}

input[type="date"]::after {
	content: "\f1f6";
	font-size: 15px;
	font-family: bootstrap-icons !important;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.form-label small {
	display: inline-block;
	margin-left: 2px;
	transform: translateY(-2px);
}

/* =============== form left btn =============== */
.login-wrap .btn-base.login-btn {
	background: transparent;
	border: 2px solid var(--cnvs-themecolor);
	color: var(--cnvs-themecolor);
}

.login-wrap .btn-base.login-btn:hover {
	background: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

.login-wrap .btn-base.login-btn::after {
	display: none;
}

/* =============== captcha =============== */
.captcha-img {
	height: 28px;
}

.change-captcha {
	font-size: 13px;
	padding: 5px 9px;
}

.change-captcha i {
	transition: .3s ease;
}

.change-captcha:hover i,
.change-captcha:active i {
	transform: rotate(90deg);
}

/* =============== left decoimg =============== */
.login-wrap .form-decoimg {
	transform: translateY(calc(var(--section) + 20px));
	margin-top: calc(-1 * (var(--section) / 2 + 20px));
	max-width: 480px;
}

/* =========================================================================
==member
========================================================================= */
/* =============== sidebar wrap =============== */
.member-sidebar-wrap li {
	border-bottom: 1px solid var(--bs-border-color);
}

.member-sidebar-wrap li.active {
	border-color: transparent !important;
}

.member-sidebar-wrap li.active a {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

/* =============== sub menu =============== */
.member-submenu-wrap li a {
	padding: 6px 24px;
	border-width: 2px;
	background: linear-gradient(180deg, var(--cnvs-white) 0%, var(--cnvs-contrast-200) 100%) no-repeat;
	border: 1px solid var(--cnvs-contrast-400);
}

.member-submenu-wrap li a:hover,
.member-submenu-wrap li.active a {
	color: var(--cnvs-black);
	border: 1px solid var(--cnvs-yellow);
	background: linear-gradient(180deg, var(--cnvs-white) 0%, var(--cnvs-yellow) 100%) no-repeat;
}

/* =============== member =============== */
.member-wrap {
	padding: 30px;
	color: #555;
}

.member-wrap .list-title {
	width: 150px;
	color: var(--cnvs-black);
}

/* =============== member password =============== */
.loading {
	right: -105px;
}

/* =============== member table =============== */
.table-list table {
	position: relative;
	width: 100%;
	margin-bottom: 0;
	text-align: center;
}

.table-list table thead {
  border-bottom: 3px double #aaa;
}

.table-list table thead td {
	padding: 15px 5px;
	color: var(--cnvs-black);
}

.table-list table tbody td {
	padding: 10px;
}

/* =============== member like =============== */
.table-list table thead td.img {
	width: 120px;
}

.table-list table thead td.price {
	min-width: 100px;
}

.table-list table thead td.cart,
.table-list table thead td.delet {
	min-width: 100px;
}

/* =============== member level =============== */
.member-wrap .level-item {
	border: 1px solid var(--bs-border-color);
	padding: 15px;
	border-radius: 6px;
	height: 100%;
}

.member-wrap .level-item ul {
	font-size: 14px;
	padding-left: 16px;
}

/* =============== forum all =============== */
.forumAll-item {
	border: 2px dashed var(--cnvs-pink);
	background-color: var(--cnvs-white);
}

/* =============== forum record =============== */
.forum-record-wrap thead td:not(:first-child) {
	width: 170px;
}

.forum-record-wrap tbody tr:last-child {
	border: 0 !important;
}

/* =============== order history =============== */
.table-list .apply-btn {
	background-color: var(--cnvs-contrast-500);
	color: var(--cnvs-white);
	padding: 4px 10px;
	border-radius: 2px;
	margin-top: 2px;
}

.table-list .apply-btn:hover {
	background-color: var(--bs-danger);
}

.order-num {
	border: 1px solid var(--cnvs-yellow);
	background: linear-gradient(180deg, var(--cnvs-white) 0%, var(--cnvs-yellow) 100%) no-repeat;
}

.order-info .list-title {
	width: 100px;
	color: var(--cnvs-black);
}

.order-detail {
	padding-top: 30px;
	border-top: 3px double #aaa;
}

.order-detail .detail-title {
	width: 70px;
}

.order-detail .detail-price {
	width: 150px;
}

/* =============== task =============== */
.table-list table.table-task-wrap tbody td:first-child {
	padding: 0;
}

.table-list table.table-task-wrap tbody td:first-child a {
	max-width: 500px;
	width: 100%;
	margin: auto;
}

.table-list table.table-task-wrap tbody td a {
	display: block;
	padding: 10px;
	color: #555;
}

.table-list table.table-task-wrap tbody tr:hover a {
	color: var(--cnvs-themecolor);
}

/* =========================================================================
==RWD
========================================================================= */
@media (max-width: 1399px) {
	/* =============== index forum =============== */
	.forum-item:nth-child(5) {
		display: none !important;
	}

	/* =============== index video =============== */
	.index-video-section .deco-img-2 {
		width: 328px;
	}

	/* =============== index album =============== */
	.index-album-section .deco-img-1 {
		width: 195px;
	}

	.index-album-section .deco-img-2 {
		width: 396px;
	}

	/* =============== footer =============== */
	.footer-logo {
		width: 220px;
	}

	/* =============== product =============== */
	.pd-info-btn .btn-base {
		padding: 11px 36px;
	}

	.pd-info-btn .btn-base.pdinfo-heart-btn {
		padding: 9px 36px;
	}

	/* =============== login =============== */
	.login-wrap .form-decoimg {
		max-width: 400px;
	}

	/* =============== member =============== */
	.forum-record-wrap thead td:not(:first-child) {
		width: 140px;
	}
}

@media (max-width: 1199px) {
	/* =============== header =============== */
	.PC-header .logo {
		max-width: 130px;
	}

	/* =============== index forum =============== */
	.forum-item:nth-child(4) {
		display: none !important;
	}

	/* =============== index video =============== */
	.index-video-section .deco-img-2 {
		width: 290px;
		bottom: 84px;
    right: 92%;
	}

	/* =============== index news =============== */
	.index-news-section .deco-img-1 {
		width: 275px;
	}

	#footer .footer-menu ul {
		width: 300px;
	}

	#footer .footer-menu li,
	#footer .footer-menu li.adject-size {
		width: 125px;
	}

	/* =============== news =============== */
	.social-icon {
		--cnvs-socialicon-size: 2.2rem;
	}

	.share-wrap .items {
		gap: 16px;
	}

	.share-wrap span {
		writing-mode: horizontal-tb;
	}

	.share-wrap span::after {
		display: none;
	}

	.share-wrap .social-icon i {
    line-height: 35px;
	}

	/* =============== product =============== */
	.pd-num-wrap .quantity .qty {
		width: 100px;
	}

	/* =============== forum =============== */
	.follow-forum-btn {
		width: 100%;
	}

	/* =============== login =============== */
	.login-wrap .form-decoimg {
		max-width: 355px;
	}

	/* =============== member =============== */
	.avatar-img {
		width: 120px;
	}

	.forum-record-wrap thead td:not(:first-child) {
		width: 110px;
	}
}

@media (max-width: 991px) {
	.wow {
		animation-name: none !important;
		visibility: visible !important;
		opacity: 1;
	}

	/* ================= preloader ================= */
	#preloader img {
		width: 160px;
	}

	/* =============== base =============== */
	:root {
		--fs-BNTitle: 32px;
		--fs-BNTxt: 18px;
		--fs-sectionTitle: 44px;
		--fs-sectionTitleSM: 20px;
		--fs-sectionTitleEN: 18px;
		--fs-footerTitle: 20px;
		--fs-itemTitle: 18px;
		--fs-sidebarTitle: 22px;
		--fs-infoTitle: 26px;
		--fs-infoPrice: 24px;
		--fs-headerNav: 17px;

		--section: 60px;
		--cnvs-header-height: 137px;
	}

	.btn-base {
		padding: 10px 42px;
	}

	/* =============== header =============== */
	.logo-mobile {
		width: 120px;
		height: auto;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, -25%);
	}

	.cnvs-hamburger {
		--cnvs-hamburger-size: calc(1rem + 0.3vw);
	}

	.cnvs-hamburger .cnvs-hamburger-inner,
	.cnvs-hamburger .cnvs-hamburger-inner::before,
	.cnvs-hamburger .cnvs-hamburger-inner::after {
		background-color: var(--cnvs-white);
	}

	.menu-container {
		padding-top: 32px;
	}

	.PC-header .menu-wrap a, .menu-link {
		padding: 12px 0;
	}

	.menu-item:hover > .menu-link {
		color: var(--cnvs-yellow);
	}

	/* =============== index forum =============== */
	.forum-item:nth-child(4),
	.forum-item:nth-child(5) {
		display: flex !important;
	}

	/* =============== index album =============== */
	.index-album-section .adjust-position {
		margin-top: -138px;
	}

	.index-album-section .decobg-img {
		width: 100%;
	}

	/* =============== index warning =============== */
	.index-warning-section img {
		width: 120px;
	}

	.index-warning-section ul {
		margin-left: 24px;
	}

	/* =============== footer =============== */
	.copyrights .sns-wrap {
		column-gap: 24px;
	}

	.float-item {
		padding: 8px 12px;
	}

	.float-sns-wrap .float-item:hover {
		transform: translateX(calc(-100% + 43px)); /* 43px = float-item最長寬度寬度(150px) - float-sns-wrap的right值(96px) */
	}

	.float-item i {
		font-size: 26px;
	}

	/* =============== breadcrumb + paginaition + no data + privacy =============== */
	.breadcrumb-wrap {
		padding: 60px 0 70px;
	}

	.breadcrumb-wrap ul {
		padding: 10px 40px;
		font-size: 14px;
	}

	.breadcrumb-wrap li:not(:last-child)::after {
		margin: 0 8px;
	}

	.page-link {
		width: 44px;
		height: 44px;
	}

	.feature-box {
		--cnvs-featured-box-icon: 3.6rem;
	}

	/* =============== video =============== */
	.info-decobg {
		width: 100%;
	}

	/* =============== news =============== */
	.sidebar-item:not(:last-child) {
		margin-bottom: 36px;
	}

	.news-list-wrap .news-item {
		border-radius: 10px;
	}

	.news-item .img-wrap {
		border-radius: 10px;
	}

	.news-item .item-title {
		height: 54px;
	}

	/* =============== schedule =============== */
	.schedule-list-wrap .date-wrap,
	.schedule-list-wrap .txt-wrap {
		padding: 16px 24px;
	}

	/* =============== about =============== */
	.about-wrap-1 .section-title .ch:after,
	.about-wrap-2 .section-title .ch:after {
		left: 50%;
		transform: translateX(-50%);
	}

	.about-wrap-1 .aboutIcon-item {
		padding: 24px;
	}

 .about-wrap-1 .aboutIcon-item img {
	width: 70px;
 }

	.about-wrap-2 .bgimg-img {
		height: 430px;
		top: auto;
		transform: none;
		bottom: 0;
		width: 60%;
	}

	/* =============== intro =============== */
	.intro-menu-wrap .menu-item img {
		width: 110px;
	}

	/* =============== product =============== */
	.pd-item .item-title {
		height: 51px;
	}

	/* =============== forum =============== */
	.board-list {
		height: 55px;
	}
	
	.board-wrap,
	.forum-table thead,
	.forum-table .forum-item,
	.sort-wrap,
	.btn-base.post-btn {
		font-size: 15px;
	}

	.forum-table .theme {
		width: 54%;
	}

	.forum-table .avatar {
		width: 95px;
	}

	.forum-table .avatar-img {
		width: 55px;
	}

	.preview-btn {
		padding: 8px 42px;
	}

	.floor-item .person-info {
		width: 20%;
	}

	.floor-item .article-info {
		width: 80%;
	}

	.follow-forum-btn:hover,
	.follow-forum-btn:active {
		color: var(--cnvs-themecolor);
		background-color: var(--cnvs-white);
	}

	/* =============== member =============== */
	.member-sidebar-wrap {
		margin-bottom: 30px;
	}

	.member-sidebar-wrap li {
		border-bottom: none;
	}

	.member-sidebar-wrap li a {
		border: 1px solid var(--bs-border-color);
		font-size: 15px;
	}

	.member-sidebar-wrap li.active a {
		border-color: var(--cnvs-themecolor);
	}

	.avatar-img {
		width: 100px;
	}

	.forum-record-wrap thead td,
	.forum-record-wrap .forum-item {
		font-size: 15px;
	}

}

@media (max-width: 767px) {
	/* =============== header =============== */
	#top-bar .func-wrap {
		width: 100%;
	}

	/* =============== banner =============== */
	.bannerSwiper {
		aspect-ratio: 1 / 1;
	}

	/* =============== index album =============== */
	.index-album-section .adjust-position {
		margin-top: -93px;
	}

	/* =============== footer =============== */
	#footer .footer-menu ul,
	#footer .footer-menu li {
		width: auto;
	}

	#footer .footer-menu li.adject-size {
		width: 119px;
	}	

	/* =============== news =============== */
	.news-list-wrap .news-item {
		border-radius: 15px;
	}

	.news-item .img-wrap {
		border-radius: 15px;
	}

	/* =============== schedule =============== */
	.schedule-list-wrap .date-wrap span {
		font-size: 44px;
	}

	/* =============== about =============== */
	.about-wrap-2 .bgimg-img {
		height: 300px;
	}

	/* =============== forum =============== */
	.board-list {
		height: 46px;
	}

	.forum-table .avatar {
		width: 65px;
	}

	.forum-table .author,
	.forum-table .reply {
		width: 110px;
	}

	.forum-table th:nth-child(2),
	.forum-table td:nth-child(2) {
		display: none;
	}

	.forum-table .author::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background-color: var(--bs-border-color);
	}

	.floor-item .person-info {
		width: 25%;
		font-size: 15px;
	}

	.floor-item .article-info {
		width: 75%;
	}

	.forum-post-wrap .info-wrap {
		font-size: 15px;
	}

	.forum-post-wrap .thumb-wrap.bottom-thumb {
		font-size: 15px;
	}

	.forum-post-wrap .thumb-wrap.bottom-thumb img {
		bottom: 35px;
	}

	/* =============== sign in =============== */
	.sign-in-wrap .sign-in-item {
		padding: 16px;
	}

	.sign-in-wrap .sign-in-form {
    width: 468px;
	}

	.sign-in-wrap .sign-in-form .item {
		width: 60px;
		height: 72px;
	}

	.sign-in-wrap .sign-in-form .item > img {
		width: 36px;
	}

	.sign-in-wrap .sign-in-form .item img {
		width: 38px;
	}

	/* =============== member =============== */
	.member-wrap {
		padding: 24px;
	}

	.member-wrap .list-title {
		font-weight: 500;
	}

	.member-wrap.table-list:not(.table-keep) {
		border: 0 !important;
		padding: 0;
	}

	.table-list:not(.table-keep) table thead {
		display: none;
	}

	.table-list:not(.table-keep) table td:not(.img)::before {
		content: attr(data-title) " ";
		float: left;
		color: var(--cnvs-black);
		font-weight: 500;
		flex-shrink: 0;
	}

	.table-list:not(.table-keep) table td {
		display: block;
		text-align: right;
	}

	.table-list:not(.table-keep) table tbody td {
		display: flex;
		align-items: start;
		justify-content: space-between;
		column-gap: 24px;
		padding: 10px 30px;
		border-right: 1px solid var(--bs-border-color);
		border-left: 1px solid var(--bs-border-color);
	}

	.table-list:not(.table-keep) table tbody tr td:first-child {
		padding-top: 30px;
		border-top: 1px solid var(--bs-border-color);
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}

	.table-list:not(.table-keep) table tbody tr td:last-child {
		padding-bottom: 30px;
		margin-bottom: 20px;
		border-bottom: 1px solid var(--bs-border-color);
		border-bottom-right-radius: 3px;
		border-bottom-left-radius: 3px;
	}

	.table-list:not(.table-keep) table tbody tr:last-child td:last-child {
		margin-bottom: 0;
	}

	.total-img {
		width: 38px;
	}

	.table-list:not(.table-keep) tbody td.cart a {
		transform: translateX(-2px);
	}

	.member-wrap .level-item {
		padding: 24px;
	}

	.table-list table.table-task-wrap tbody tr:hover {
		background-color: transparent;
	}

	.table-list table.table-task-wrap tbody td a {
		padding: 0;
	}

	.table-list table.table-task-wrap tbody td:first-child {
		padding: 10px 30px;
	}
}

@media (max-width: 575px) {
	/* ================= preloader ================= */
	#preloader img {
		width: 145px;
	}

	/* =============== base =============== */
	:root {
		--fs-BNTitle: 28px;
		--fs-BNTxt: 17px;
		--fs-sectionTitle: 40px;
		--fs-sectionTitleEN: 16px;
		--fs-footerTitle: 18px;
		--fs-sidebarTitle: 20px;
		--fs-infoTitle: 24px;
		--fs-infoPrice: 22px;

		--section: 40px;
		--cnvs-header-height: 120px;
	}

	.btn-base {
		padding: 8px 36px;
	}

	/* =============== header =============== */
	.logo-mobile {
		width: 90px;
	}

	#PCsearch .close-btn {
		right: 0;
	}

	/* =============== index news =============== */
	.index-news-section .swiper-free-mode>.swiper-wrapper {
		padding-bottom: 24px;
	}

	/* =============== index album =============== */
	.index-album-section .section-title .ch:after {
		left: 50%;
		transform: translateX(-50%);
	}

	.index-album-section .adjust-position {
		margin-top: 0;
	}

	/* =============== index warning =============== */
	.index-warning-section {
		font-size: 14px;
	}

	/* =============== footer =============== */
	#footer .footer-menu ul {
		width: 300px;
	}

	#footer .footer-menu li,
	#footer .footer-menu li.adject-size {
		width: 125px;
	}
	
	#gotoTop {
		--cnvs-gotoTop-position-boxed-right: 20px;
	}

	/* =============== breadcrumb + paginaition + no data + privacy =============== */
	.breadcrumb-wrap ul {
		padding: 10px 16px;
	}
	
	.page-link {
		width: 36px;
		height: 36px;
		font-size: var(--fs-small);
	}

	.feature-box {
		--cnvs-featured-box-icon: 3.2rem;
	}

	.fbox-content {
		padding-left: 6px;
	}

	.fbox-icon i {
		font-size: 24px;
	}

	/* =============== album =============== */
	.more-img-wrap .img-wrap {
		margin: 0 12px 12px 0;
	}

	.more-img-wrap .img-wrap::after {
		bottom: -12px;
    right: -12px;
	}

	/* =============== about =============== */
	.about-wrap-1 .section-title .ch,
	.about-wrap-2 .section-title .ch {
		font-size: 32px;
	}

	.about-wrap-1 .section-title .ch:after,
	.about-wrap-2 .section-title .ch:after {
		font-size: 32px;
	}

	.about-wrap-1 .aboutIcon-item {
		padding: 24px 30px;
	}

	.about-wrap-2 .bgimg-img {
		height: 190px;
	}

	.schedule-list-wrap .tag::after {
		content: '';
		display: inline-block;
		width: 4px;
		height: 4px;
		background-color: #999;
		border-radius: 20px;
		margin: 0 12px;
		transform: translateY(-3px);
	}

	/* =============== intro =============== */
	.intro-menu-wrap .menu-item img {
		width: 80px;
	}

	.intro-menu-wrap .menu-title {
		font-size: 18px;
	}

	/* =============== product =============== */
	.pd-cate-mobile > div:nth-child(odd),
	.pd-list-wrap > div:nth-child(odd) {
		padding-right: 8px;
	}
	
	.pd-cate-mobile > div:nth-child(even),
	.pd-list-wrap > div:nth-child(even) {
		padding-left: 8px;
	}

	/* =============== forum =============== */
	.board-list {
		height: 45px;
	}

	.board-wrap,
	.forum-table thead,
	.forum-table .forum-item {
		font-size: 14px;
	}

	.forum-table small {
		font-size: 13px;
	}

	.forum-table small:last-child {
		font-size: 12px;
	}

	.forum-table .author,
	.forum-table .reply {
		width: 90px;
	}

	.preview-btn {
		padding: 6px 36px;
	}

	.floor-item .person-info {
		width: 26%;
	}

	.floor-item .article-info {
		width: 74%;
	}

	.forum-post-wrap .info-wrap,
	.floor-item .person-info,
	.forum-post-wrap .thumb-wrap.bottom-thumb {
		font-size: 14px;
	}

	.floor-item small {
		font-size: 13px;
	}

	.forum-post-wrap .thumb-wrap img {
		width: 32px;
	}

	.forum-post-wrap .thumb-wrap p {
		padding: 4px 0 4px 20px;
	}

	.reply-editor {
		font-size: 15px;
	}

	.follow-forum-btn {
		white-space: normal;
	}

	/* =============== sign in =============== */
	.sign-in-wrap .section-title .ch {
		font-size: 32px;
	}

	.sign-in-wrap .section-title .en {
		margin: 0 auto 6px;
	}

	.sign-in-wrap .sign-in-form {
		width: 302px;
	}
	
	.sign-in-wrap .sign-in-form .item {
		font-size: 12px;
		width: 54px;
		height: 64px;
	}
	
	.sign-in-wrap .sign-in-form .item img {
		width: 32px;
	}

	/* =============== login =============== */
	.login-wrap input::placeholder {
		font-size: 14px;
	}

	/* =============== member =============== */
	.member-sidebar-wrap li a {
		font-size: 14px;
	}

	.member-wrap {
		padding: 16px;
	}

	.member-wrap.table-keep {
		padding: 4px;
	}

	.total-img {
		width: 32px;
	}

	.member-wrap .level-item {
		padding: 15px;
	}

	.forum-record-wrap thead td,
	.forum-record-wrap .forum-item {
		font-size: 14px;
	}

	.forum-record-wrap thead td {
		padding: 6px 5px;
	}

	.forum-record-wrap thead td:last-child {
		width: 60px;
	}
	
	.forum-record-wrap small {
		font-size: 13px;
	}

	.table-list:not(.table-keep) table tbody td,
	.table-list table.table-task-wrap tbody td:first-child {
		padding: 10px 16px;
	}

	.table-list:not(.table-keep) table tbody tr td:first-child {
		padding-top: 16px;
	}

	.table-list:not(.table-keep) table tbody tr td:last-child {
		padding-bottom: 16px;
	}
	
	/* =============== footer =============== */
	.mobile-sns-wrap {
		right: 20px;
	}
}

@media(max-width:499px) {
	/* =============== login =============== */
	.captcha-wrap {
		flex-wrap: wrap;
	}

	.captcha-img {
		margin-left: 0 !important;
		margin-top: 12px;
	}

	.change-captcha {
		margin-top: 12px;
	}

	/* =============== breadcrumb + pagination + no data + privacy =============== */
	.breadcrumb-wrap .section-title .ch {
		font-size: 30px;
	}

	.sort-wrap,
	.post-btn {
		width: 50%;
	}

	.post-btn {
		padding: 8px 24px;
	}
}