@charset "utf-8";
/* ===================================================	共用 =================================================== */
html,
body {
  background: url("../images/side_deco.png")bottom center repeat,var(--color1);
  background-size: 100% auto,100%;
}

.blk_bas { margin: 30px auto 20px;}

/* 針對架構工具調整 */
	@media screen and (max-width: 991px) {
		html,body  {background: var(--color1);}
		.blk_bas .blk_body > * { padding: 0 0;}
}




/* =================================================== 通用設定 =================================================== */
/* ------------------ BG ------------------ */
.block0 {
    position: relative;
    background: transparent;
}

/* 只有背景做漸淡 */
.block0::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color1);

    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 80%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        #000 80%,
        transparent 100%
    );

    pointer-events: none;
    z-index: 0;
}

/* block0 裡面的所有內容維持正常 */
.block0 > * {
    position: relative;
    z-index: 1;
}

.block2 article.blk_item {
    width: 98%;
    margin: 40px auto 20px;
    background: #fffbed;
    border-radius: 1em;
    padding: 1em 0;
}
.crosswise_3p {
    background: url("../images/blk_item_deco.png")top 9px center no-repeat;
    background-size: 30%;
    padding: 20px 0 0;
}
@media screen and (max-width: 991px) {
	.block2 article.blk_item {margin: 5vw auto;}
	.crosswise_3p {background: none; padding:0 0;}
}

/* ------------------ COLOR ------------------ */
:root {
--color1: #f9ff4e;
--color2: #ffc7d6;
--color3: #f15431;
--color4: #fffbed;
--color5: #4589e7;
}

.blk_body {
    background: var(--color2);
    border: 2px solid #000;
    border-radius: 1em;
}


.block0 .blk_body {
    background: none;
    border: none;
    border-radius: 0;
}

.blk_item {background: transparent;}
.rectangle_3p .font h4,.rectangle_3p .font .price big,.toptitle .font .price big,.topfive .font .price big,.crosswise_3p .font .price big ,.hightlight .font .price big,.crosswise .font .price big,.crosswise_3p .font .price big {color:var(--color3);}

.toptitle .font h4,.hightlight .font h4,.ranks {background: var(--color3);}
.half ul{background: var(--color4);border-radius: 1em;}


/* 元件調整 */
.rectangle_3p li,.crosswise li,.crosswise_3p li,.toptitle li {border-radius: 1em; border: 1px solid #000;}
.keywordB .keywordA li{background: var(--color3);}
.slick3item .slick-slide img,.slick-slide img,.banner img {border-radius: 1em;}





/* ------------------ 架構標 ------------------ */
@font-face { font-family: 華康圓體; src: url("../font/DFYuanStd-W9.otf");}

	h2.btt {
		font-family: 華康圓體;
		font-size: clamp(2rem, 4vw + 1rem, 4rem);
	}

	h3.stt{
		font-family: 華康圓體;
		font-size: clamp(1.7rem, 3.2vw + 0.4rem, 3.2rem);
		color: #fff;
	}

	.half ul h3 {
		font-family: 華康圓體;
		font-size: clamp(1.5rem, 2.5vw + 0.3rem, 2.5rem);
		width: fit-content;
		min-width: 70%;
		margin: 0 auto;
		padding: 15px 60px;
		background: url("../images/btt.png") center top / 100% auto no-repeat;
		box-sizing: border-box;
		background-size: contain;
	}

	.blk_head {
		position: relative;
		max-width: 786px;
		margin: 160px auto -30px;
		background: url("../images/btt.png") top center no-repeat;
		background-size: contain;
		aspect-ratio: 786 / 151;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.blk_head::before {
		content: "";
		position: absolute;
		width: min(80%,432px);
		aspect-ratio: 432 / 135;
		right: 20%;
		top: -18%;
		transform: translateY(-50%);
		background: url("../images/btt_deco.png") center/contain no-repeat;
		pointer-events: none;
		z-index: 1;
	}

	.blk_item_head {
		max-width: 100%;
		background: #4489e7;
		border-radius: 99em;
		width: fit-content;
		position: relative;
		margin: 0 auto;
		padding: 1em 5em;
		border: 1.5px solid #000;
	}

	.more {
		display: flex;
		font-size: 1em;
		color: #000;
		background-color: var(--color1);
		padding: 0.5em 1em;
		border-radius: 99em;
		position: relative;
		right: -2em;
		top: -1em;
		-webkit-transform: translateY(50%);
		transform: translateY(50%);
		z-index: 1;
	}

	.more:hover {
		color: #fff;
		background-color: var(--color3);
		-webkit-transition: 0.5s;
		transition: 0.5s;
		}




@media screen and (max-width: 991px) {
	.blk_body {
    border: none;
    border-radius: 0;
}
    .blk_head{
		width: 96vw;
        margin:20vw auto -5vw;
    }

	.blk_head::before {
		width: 70%;
		right: 15%;
		top: -29%;
	}

	.blk_item_head {
		width: 80%;
		padding: 2vw 4vw;
	}

	.more{right: 0em;}

}





/* =================================================== 版頭設定 =================================================== */
/* ------------------版頭動畫------------------ */
.kv-bg {width: 100%;}

.kvitem {position: absolute;}

.kv_title {
    top: calc((92 / 1920) * 100%);
    left: calc((411 / 1920) * 100%);
    width: calc((1058 / 1920) * 100%);
    animation: bounceInDown 3s;
    animation-fill-mode: backwards;
}

.kv_sale {
	top: calc((695 / 1920) * 100%);
    left: calc((1225 / 1920) * 100%);
    width: calc((263 / 1920) * 100%);
    animation: bounceIn 3s;
    animation-fill-mode: backwards;
}


/* ==========================================
	people 小人動動
   ========================================== */
.p1 {
	top: calc((770 / 1920) * 100%);
    left: calc((346 / 1920) * 100%);
    width: calc((143 / 1920) * 100%);
    animation:bounce 2.6s ease-in-out infinite;
	animation-delay: 0s;
    animation-fill-mode: backwards;
}

.p2 {
	top: calc((725 / 1920) * 100%);
    left: calc((1005 / 1920) * 100%);
    width: calc((103 / 1920) * 100%);
    animation:bounce 2.8s ease-in-out infinite;
	animation-delay: 1.3s;
    animation-fill-mode: backwards;
}

.p3 {
    top: calc((1190 / 1920) * 100%);
    left: calc((1150 / 1920) * 100%);
    width: calc((106 / 1920) * 100%);
    animation: tiptoe 2.5s ease-in-out infinite;
    animation-delay: 1.6s;
    transform-origin: center bottom;
}

@keyframes tiptoe {
    0%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-8px);
    }

    50% {
        transform: translateY(-12px);
    }

    60% {
        transform: translateY(-8px);
    }
}

.p4 {
    top: calc((1287 / 1920) * 100%);
    left: calc((1512 / 1920) * 100%);
    width: calc((165 / 1920) * 100%);
    animation:wobble 2.5s ease-in-out infinite;
	animation-delay: .5s;
    animation-fill-mode: backwards;
}


/* ==========================================
	眨眼小人
   ========================================== */
/* 左 */
.p5 {
    top: calc((907 / 1920) * 100%);
    left: calc((574 / 1920) * 100%);
    width: calc((96 / 1920) * 100%);
    animation-fill-mode: backwards;
}

/* 控制眼大小 */
.p5::before,
.p5::after{
    content:"";
    position:absolute;
    width:5px;
    height:5px;
    background:#1e1e1e;
    border-radius:50%;
    animation:blink 4.5s infinite;
}

/* 控制眼位置 */
.p5::before {
    left: 54%;
    top: 28%;
}

.p5::after{
    left: 67%;
    top: 28%;
}


/* 右 */
.p6 {
	top: calc((855 / 1920) * 100%);
    left: calc((749 / 1920) * 100%);
    width: calc((84 / 1920) * 100%);	
    animation-fill-mode: backwards;
}

/* 控制眼大小 */
.p6::before,
.p6::after{
    content:"";
    position:absolute;
    width:5px;
    height:5px;
    background:#1e1e1e;
    border-radius:50%;
    animation:playfulBlink 5s infinite;
}

/* 控制眼位置 */
.p6::before {
    left: 42%;
    top: 22%;
}

.p6::after{
	left: 56%;
    top: 22%;
}

/* 眼睛動效設定 */
@keyframes blink{
    0%,
    44%,
    46%,
    100%{
        transform:scaleY(1);
    }

    45%{
        transform:scaleY(0.1);
    }
}

@keyframes playfulBlink{

    0%,
    40%,
    43%,
    47%,
    50%,
    100%{
        transform:scaleY(1);
    }

    41%,
    42%{
        transform:scaleY(0.08);
    }

    48%,
    49%{
        transform:scaleY(0.08);
    }
}


/* ==========================================
	STAR 星星動動
   ========================================== */
/* 順時針持續旋轉 + 呼吸閃爍 */
@keyframes continuousRotateCW {

    0% {
        transform: rotate(0deg);
        opacity: 0.8;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }

    25% {
        transform: rotate(90deg);
        opacity: 0.9;
        filter: drop-shadow(0 0 6px rgba(255, 220, 100, 0.65));
    }

    50% {
        transform: rotate(180deg);
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(255, 220, 100, 0.9));
    }

    75% {
        transform: rotate(270deg);
        opacity: 0.9;
        filter: drop-shadow(0 0 6px rgba(255, 220, 100, 0.65));
    }

    100% {
        transform: rotate(360deg);
        opacity: 0.8;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }

}

/*  逆時針持續旋轉 + 呼吸閃爍 */
@keyframes continuousRotateCCW {

    0% {
        transform: rotate(0deg);
        opacity: 0.78;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45));
    }

    25% {
        transform: rotate(-90deg);
        opacity: 0.9;
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.65));
    }

    50% {
        transform: rotate(-180deg);
        opacity: 1;
        filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.85));
    }

    75% {
        transform: rotate(-270deg);
        opacity: 0.9;
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.65));
    }

    100% {
        transform: rotate(-360deg);
        opacity: 0.78;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45));
    }

}

/* 5顆星星共用設定 */
.star_1,
.star_2,
.star_3,
.star_4,
.star_5 {
    position: absolute;
    transform-origin: center center;
    will-change: transform, opacity, filter;
    /* 強制無限循環 */
    animation-iteration-count: infinite !important;
    /* 確保旋轉不中斷 */
    animation-timing-function: linear !important;
}

.star_1 {
    top: calc((965 / 1920) * 100%);
    left: calc((466 / 1920) * 100%);
    width: calc((40 / 1920) * 100%);
    animation-name: continuousRotateCW !important;
    animation-duration: 8s !important;
    animation-delay: 0s !important;
}

.star_2 {
    top: calc((835 / 1920) * 100%);
    left: calc((495 / 1920) * 100%);
    width: calc((66 / 1920) * 100%);
    animation-name: continuousRotateCCW !important;
    animation-duration: 6s !important;
    animation-delay: -1.5s !important;
}

.star_3 {
    top: calc((645 / 1920) * 100%);
    left: calc((720 / 1920) * 100%);
    width: calc((49 / 1920) * 100%);
    animation-name: continuousRotateCW !important;
    animation-duration: 3s !important;
    animation-delay: -1.2s !important;
}

.star_4 {
    top: calc((620 / 1920) * 100%);
    left: calc((817 / 1920) * 100%);
    width: calc((93 / 1920) * 100%);
    animation-name: continuousRotateCCW !important;
    animation-duration: 7s !important;
    animation-delay: -0.8s !important;
}

.star_5 {
    top: calc((1051 / 1920) * 100%);
    left: calc((1464 / 1920) * 100%);
    width: calc((66 / 1920) * 100%);
    animation-name: continuousRotateCW !important;
    animation-duration: 3.5s !important;
    animation-delay: -2s !important;
}




/* =================================================== 版身設定 =================================================== */
/* ------------------ 輪播點點 ------------------ */
.slick-dots li button:before{font-size: 40px !important; color: black !important; }
.slick-dots li.slick-active button:before{color:var(--color3) !important;}

/*------------------ KEYWORD ------------------ */
.keywordB .keywordA {margin: 20px auto 0;}
.block5 .keywordA ul { margin: 40px auto 0;}
.block5 .keywordA li {
    flex-grow: 0;
    text-align: center;
    overflow: hidden;
    padding: 10px 20px;
    background: #fffbed;
    border-radius: 99em;
    /* border: none; */
    box-shadow: none;
}
.keywordB .keywordA a {
    color: #fff;
    font-family: 華康圓體;
}

.keywordA li:hover,.keywordB .keywordA li:hover { background: var(--color5);}
.keywordA li:hover a { color: #fff;}
.keywordA a { display: block;font-family: 華康圓體;}

	@media screen and (max-width: 991px) {
		.block5 .keywordA ul { margin: 0px auto 0;}
	}


/* ------------------  menu  ------------------ */
.menustyle2 {
    border-radius: 99em;
    padding: 40px 0;
    background:var(--color3);
}
.menustyle2 a {font-family: 華康圓體;}
.menustyle2 .nav-link.active,.menustyle2 .nav-link:hover{
	background: var(--color5);
	color:#fff;
}

	@media screen and (max-width: 991px) {
		.menustyle2 {
				width:100%;
				border-radius: 0;
				padding: 0 0;
				border: none;
		}
	}



/* ------------------  go_btn------------------ */
.go_btn {
	margin: 30px auto;
}

.go_btn a {
    display: block;
    width: fit-content;
    height: auto;
    margin: 0 auto;
    padding: 0 30px;
    font-family: 華康圓體;
    border: 2px solid #fff;
    border-radius: 999em;
    text-align: center;
    color: #fff;
    font-size: 2.5rem;
    line-height: 2;
    letter-spacing: 1px;
    background: var(--color3);
    box-shadow: 0 7px #5f2d20;
    transition: .2s;
}

.go_btn a:hover {
	filter: brightness(70%);
	transform: translateY(4px);
	box-shadow: 0 2px #ea4127;
}

@media screen and (max-width: 991px) {
	.go_btn {
		margin: 3vw auto;
	}

	.go_btn a {
		padding: 0 5vw;
		font-size: 2rem;
		line-height: 4rem;
	}

	.go_btn a:hover {
		transform: translateY(3px);
	}
}