@charset "utf-8";

/* 載入思源黑、明體 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap');

:root {
	--color1: #3eb620;
	--color2: #ff581e;
	--color3: #ffe400;
	--color-dark: #000000;
}

html {
	background: url("../images/bg-color1.jpg");
	scroll-behavior: smooth;
}

body {
	background-color: transparent !important;
	background: url("../images/side-deco-y.png")top center repeat-y;
	background-size: 100% auto;
}

.container {
	background: url("../images/side-deco.png") center 600px repeat-y;
}

@media screen and (max-width: 991px) {
	html {
		background-size: 15%;
	}

	.container {
		background: none;
	}
}


/* 針對架構工具調整 */
.blk_head,
.blk_body,
.blk_item {
	padding: 0;
	background-color: transparent !important;
}

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

	.blk_pre .tips a {
		padding: calc(var(--bs-gutter-x) * 0.2);
	}

	.blk_bas .blk_body>* {
		margin-top: 1vw;
		margin-bottom: 1vw;
	}
}


/*主視覺動畫*/
.kv-bg {
	width: 100%;
}

.kvitem {
	position: absolute;
}

.kv-tt {
	width: calc((725 / 1920)* 100%);
	top: calc((373 / 1920) * 100%);
	left: calc((581 / 1920) * 100%);
	animation: bounceIn 1.2s;
	animation-delay: .9s;
	animation-fill-mode: backwards;
}

.kv-p {
	width: calc((786 / 1920)* 100%);
	top: calc((1214 / 1920) * 100%);
	left: calc((567 / 1920) * 100%);
	animation: flipInX 1.2s;
	animation-delay: 1.4s;
	animation-fill-mode: backwards;
}

.kv-g3 {
	width: calc((1232 / 1920)* 100%);
	top: calc((254 / 1920) * 100%);
	left: calc((312 / 1920) * 100%);
	animation: bounceIn 1.2s;
	animation-delay: .5s;
	animation-fill-mode: backwards;
}

.kv-g2 {
	width: calc((1123 / 1920)* 100%);
	top: calc((301 / 1920) * 100%);
	left: calc((409 / 1920) * 100%);
	animation: bounceIn 1.2s;
	animation-delay: .3s;
	animation-fill-mode: backwards;
}

.kv-g1 {
	width: calc((1750 / 1920)* 100%);
	top: calc((242 / 1920) * 100%);
	left: calc((53 / 1920) * 100%);
	animation: bounceIn 1.2s;
	animation-delay: .15s;
	animation-fill-mode: backwards;
}

.kv-scroll-r, .kv-scroll-l {
    width: 100%;
    height: 4.8%;
    --bg-width: 75.3125vw;
    background: url("../images/kv-scroll-words.png") center repeat-x;
    background-size: var(--bg-width) auto;
}

.kv-scroll-r {
    top: calc((90 / 1920) * 100%);
    left: 0;
    animation: scroll-right 20s linear infinite;
}

.kv-scroll-l {
    top: calc((1829 / 1920) * 100%);
    left: 0;
    animation: scroll-left 20s linear infinite;
}

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

	.kv_m {
		position: relative;
	}

	.kv-p {
		width: calc((948 / 991) * 100%);
		top: calc((755 / 991) * 100%);
		left: calc((21 / 991) * 100%);
		animation-delay: .15s;
	}

	.kv-scroll-r, .kv-scroll-l {
		width: 100%;
		height: 4%;
		--bg-width: 200vw;
	}

	.kv-scroll-r {
	top: calc((51 / 991) * 100%);
			left: 0;
	}

	.kv-scroll-l {
	top: calc((952 / 991) * 100%);
			left: 0;
	}
}

@keyframes scroll-right {
	0% {
		background-position-x: calc(-1 * var(--bg-width));
	}

	100% {
		background-position-x: 0;
	}
}

@keyframes scroll-left {
	0% {
		background-position-x: 0;
	}

	100% {
		background-position-x: calc(-1 * var(--bg-width));
	}
}




/* blk0 */
.block0 {
	margin: 0 auto;
	background: url("../images/bg-color2.jpg");
	transform-style: preserve-3d;
}

.block0::after {
	display: flex;
	max-width: 1920px;
	height: 49px;
	position: relative;
	top: 48px;
	margin: -38px auto 0;
	background: url("../images/blk0-af.png")center top no-repeat;
	pointer-events: none;
	transform: translateZ(-1px);
	content: '';
}

@media screen and (max-width: 991px) {
	.block0 {
		background-size: 15%;
	}

	.block0::after {
		display: flex;
		height: 4vw;
		position: relative;
		top: 3.8vw;
		margin: -3vw auto 0;
		background: url("../images/blk0-af.png") center top no-repeat;
		background-size: 150%;
		content: '';
	}
}


/* 區塊 */
.blk_bas {
	margin: 210px auto 0px;
	max-width: 1240px;
	background: url("../images/bg-color2.jpg");
	transform-style: preserve-3d;
}

.blk_bas::before {
	content: '';
	width: 1240px;
	margin: 0 auto -45px;
	background: url("../images/blk-be.png")center top no-repeat;
	height: 46px;
	display: flex;
	top: -45px;
	right: 0px;
	position: relative;
	pointer-events: none;
	transform: translateZ(-1px);
}

.blk_bas::after {
	content: '';
	width: 1240px;
	margin: -56px auto 0px;
	background: url("../images/blk-af.png")center top no-repeat;
	height: 56px;
	display: flex;
	top: 55px;
	right: 0px;
	position: relative;
	pointer-events: none;
	transform: translateZ(-1px);
}

@media screen and (max-width: 991px) {
	.blk_bas {
		margin: 26vw auto 0;
		background-size: 15%;
		transform-style: preserve-3d;
	}

	.blk_bas::before {
		content: '';
		width: 100%;
		display: flex;
		margin: 0 auto -10vw;
		background: url("../images/blk-be.png")center top no-repeat;
		background-size: 100vw;
		height: 4vw;
		top: -3.5vw;
		position: relative;
		pointer-events: none;
		transform: translateZ(-1px);
	}

	.blk_bas::after {
		content: '';
		width: 100%;
		display: flex;
		margin: -5vw auto 0;
		background: url("../images/blk-af.png") center top no-repeat;
		background-size: 100vw;
		height: 5vw;
		top: 4.8vw;
		position: relative;
		pointer-events: none;
		transform: translateZ(-1px);
	}
}


/* 無區塊 */
.block_other.blk_bas {
	margin: 100px auto 50px;
	padding: 0;
	background: none;
}

.block_other.blk_bas::before,
.block_other.blk_bas::after {
	display: none;
}

@media screen and (max-width: 991px) {
	.block_other.blk_bas {
		margin: 10vw auto 6vw;
		padding: 0;
	}
}


/*文字標題*/

@font-face {
	font-family: TetsubinGothic;
	src: url("https://events.eslite.com/font/TetsubinGothic.otf");
}

.btt,
.stt,
.special_5p_1 .stt-sp h3,
.go_btn a {
	font-family: TetsubinGothic, 'Noto Sans TC';
}

.menustyle2 ul li a,
.ribbon,
.tabs .tabs-head a {
	font-family: 'Noto Sans TC';
}

big {
	color: var(--color2);
}

.btt {
	position: relative;
	width: 100%;
	height: 170px;
	margin: -100px auto 20px;
	padding: 40px 0 0;
	align-items: center;
	background: url("../images/btt-bg.png")top center no-repeat;
	color: var(--color-dark);
	font-size: 4.5rem;
	font-weight: 900;
	letter-spacing: 2px;
	z-index: 1;
}

.block0 .btt {
	margin: 20px auto 20px;
}

@media screen and (max-width: 991px) {
	.btt {
		height: 17vw;
		margin: -10vw auto 2vw;
		padding: 4.5vw 0 0;
		background-size: cover;
		font-size: 1.9rem;
		letter-spacing: 1px;
	}

	.block0 .btt {
		margin: 2vw auto 2vw;
	}
}

.notice {
	/* color: #fff; */
	letter-spacing: 0.5px;
}

@media screen and (max-width: 991px) {
	.notice {
		padding: .5em 2rem;
	}
}


/*元件調整*/

.ribbon {
	color: var(--color-dark);
	font-weight: 700;
	background: var(--color3);
}

.ribbon:before {
	border-bottom: solid 6px var(--color-dark);
}

.ribbon:after {
	border-left: 25px solid var(--color3);
	border-right: 25px solid var(--color3);
}

.toptitle li {
	padding: 0 0 15px;
}

.collect_5x6 .special {
	background: var(--color2);
}

.collect_5x6 .s-row img {
	margin: 0 auto;
}

.special_5p_1 {
	background: url("../images/h5psp-bg.png")top center no-repeat;
}

.special_5p_1 .stt-sp h3 {
	color: var(--color3);
	padding: 18px 0 0 250px;
}

.tabs .tabs-head {
	width: calc(100% - 300px);
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 20px;
}

.tabs .tabs-head li {
	background: #fff;
	border: 3px dashed var(--color-dark);
}

.tabs .tabs-head li.active {
	border: 3px dashed var(--color-dark);
	background: var(--color3);
}

.tabs .tabs-head li:hover {
	border: 3px dashed var(--color-dark);
	background: #e2e2e2;
}

.tabs .tabs-head a {
	color: var(--color-dark);
	font-weight: 700;
	line-height: 1.8rem;
}

.dis-for-zasshi3 {
	background: var(--color-dark);
}

.dis-for-zasshi3 big {
	color: var(--color3);
}

.zasshi3 ul li h4 {
	color: var(--color2);
}

.zasshi3-buy {
	background: var(--color2);
}

.hightlight3 .scene-nobox .sliderbg {
	background: var(--color3);
	border: 3px dashed var(--color-dark);
}

.hightlight3 .one-time ul.ot li:nth-child(2),
.hightlight3 .one-time ul.ot li:nth-child(6) {
	background: var(--color-dark);
}

.hightlight3 .one-time ul.ot li:nth-child(2) big {
	color: var(--color3);
}


.hightlight3 .one-time ul.ot li:nth-child(2) p,
.hightlight3 .one-time ul.ot li:nth-child(6) p {
	color: #fff;
}

.hightlight3 .one-time ul.ot li:nth-child(3) span {
	color: var(--color-dark);
}

.one-time.slider {
	margin: 0 auto;
}

.go_btn a {
	font-size: 2.4rem;
	color: #fff;
	background: var(--color-dark);
}

.go_btn a:hover {
	color: var(--color3);
}

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

	.banner {
		padding: 0 3vw;
	}

	.baseline_5pcs .ribbon::after {
		border-left: 6.1vw solid var(--color3);
		border-right: 6.1vw solid var(--color3);
	}

	.toptitle li {
		padding: 0 0 1.5vw;
	}

	.tabs .tabs-head {
		width: 80vw;
		gap: 2vw;
	}

	.tabs .tabs-head li,
	.tabs .tabs-head li.active,
	.tabs .tabs-head li:hover {
		border: 2px dashed var(--color-dark);
	}

	.tabs .tabs-head a {
		line-height: 1.5rem;
	}

	.special_5p_1 {
		background: none;
	}

	.special_5p_1 .stt-sp h3 {
		width: 100%;
		height: 14vw;
		margin: 2vw auto 1vw;
		padding: 0;
		align-items: center;
		background: url("../images/stt-bg.png")top center no-repeat;
		background-size: contain;
		color: var(--color3);
	}

	.hightlight3 .scene-nobox .sliderbg {
		border: 2px dashed var(--color-dark);
	}

	.go_btn a {
		font-size: 2rem;
	}
}


/*兩大品修正*/
.rectangle_3p.rectangle_2p ul {
	justify-content: space-evenly;
}

.rectangle_3p.rectangle_2p li {
	width: 500px;
	margin: 0 -40px 0;
	padding: 10px;
	background: transparent;
}

.rectangle_2p li:nth-child(even) {
	margin-top: 80px;
}

.rectangle_3p.rectangle_2p li img {
	width: 500px;
	height: auto;
}

.rectangle_3p.rectangle_2p li .font {
	width: 350px;
	margin-top: 20px;
	padding: 0 40px 10px;
	border: 3px dashed var(--color-dark);
	border-radius: 10px;
	color: var(--color-dark);
	background: #fff;
	-moz-box-shadow: none;
	box-shadow: none;
}

.rectangle_3p.rectangle_2p li .font h4 {
	margin-top: -23px;
	padding: 12px 25px;
	color: #fff;
	background: var(--color2);
	font-size: 1.5rem;
	line-height: 1.2;
	clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
}

.rectangle_3p.rectangle_2p .font p {
	font-size: 1.2rem;
	line-height: 1.2;
}

.rectangle_3p.rectangle_2p li .font .price {
	margin: 3px auto 10px;
	color: var(--color-dark);
}

.rectangle_3p.rectangle_2p li .font .price big {
	color: var(--color2);
	font-size: 2rem;
}

@media screen and (max-width: 991px) {
	.rectangle_3p.rectangle_2p {
		margin: 2vw auto;
	}

	.rectangle_3p.rectangle_2p li,
	.rectangle_3p.rectangle_2p ul li:first-child {
		width: 100%;
		margin: 2vw auto;
		padding: 0;
		text-align: center;
		background: transparent;
	}

	.rectangle_3p.rectangle_2p li .font {
		width: 100vw;
		margin-top: 5vw;
		padding: 0 8vw 3vw;
		border: 2px dashed var(--color-dark);
		border-radius: 10px;
		background: #fff;
		-moz-box-shadow: none;
		box-shadow: none;
	}

	.rectangle_2p ul li:first-child .font {
		padding: 0 8vw 3vw !important;

	}

	.rectangle_3p.rectangle_2p li img,
	.rectangle_3p.rectangle_2p ul li:first-child img {
		width: 100%;
		height: 80vw;
	}

	.rectangle_3p.rectangle_2p ul li:nth-child(3n+1) a {
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: center;
	}

	.rectangle_3p.rectangle_2p li .font {
		width: 90vw;
	}
}


/*輪播統一設定*/
.slick-dotted.slick-slider {
	margin-bottom: 0px !important;
}

.slick-dots li button:before {
	color: var(--color-dark) !important;
}

@media screen and (max-width: 991px) {
	.slider {
		margin: 2vw auto !important;
	}

	.slick-dotted.slick-slider {
		padding-bottom: 2vw !important;
	}
}


/**--  menu  --**/
.menustyle2 {
	width: 120px;
	border-radius: 99rem;
	border: 3px dashed var(--color-dark);
	background: #fff;
}

.menustyle2 .nav>* {
	border-bottom: none;
}

.menustyle2 ul {
	padding: 25px 0;
}

.menustyle2 a {
	font-weight: 700;
	color: var(--color-dark);
}

.menustyle2 .nav-link.active,
.menustyle2 .nav-link:focus {
	color: var(--color-dark);
	background: var(--color3);
}

.menustyle2 .nav-link:hover {
	color: var(--color-dark);
	background: #e2e2e2;
}

@media screen and (max-width: 991px) {
	.menustyle2 {
		width: 100%;
		padding: 1.5vw 1vw;
		border-radius: 0;
		border: 0px solid var(--color1);
		background: var(--color-dark);
	}

	.menustyle2 .nav>* {
		border-right: none;
	}

	.menustyle2 ul {
		padding: 0;
	}

	.menustyle2 .nav-pills .nav-link {
		border-radius: 99rem;
	}

	.menustyle2 a {
		padding: 0.5rem 1rem;
		font-size: 1rem;
		color: #fff;
	}

	.menustyle2 .nav-link.active,
	.menustyle2 .nav-link:focus,
	.menustyle2 .nav-link:hover {
		color: var(--color-dark);
		background: var(--color3);
	}

}


/*--  錨點微調 --*/
.target-fix {
	display: block;
	position: relative;
	top: 60px;
	height: 0;
	overflow: hidden;
}

@media screen and (max-width: 991px) {
	.target-fix {
		top: -7vw;
	}
}