@charset "UTF-8";
:root {
--color1: #004786;
--color2: #faa53a;
--color3: #ec2979;
}


/* =================================================== 共用設定 =================================================== */
html,
body {
  background:url("../images/bg_color3.jpg")top center repeat;
  background-size: auto;
}

.container {
    position: relative;
    z-index: 1;
}


.container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/side_deco.png") top center repeat-y;
    background-size: auto;
    z-index: 99;
    pointer-events: none; 
}



/* ------------------ color ------------------ */
.hightlight .font h4,
.hightlight_5p .font h4,
.collect_5x6 .s-row h4,
.triple .font h4,
.collect_5x6 .special,
.box-mix ul.quotes li,
.alternate ul:nth-child(odd) li:first-child {
  background: url("../images/bg_color1.jpg");
}

.half ul,
.alternate ul:nth-child(even) li:last-child {
  background: url("../images/bg_color5.jpg");
}

.scene .font p {color:#fff;}
.blk_item { background:url("../images/bg_color3.jpg") top center repeat;}
.scene .font .price big,.hightlight .font .price big,.hightlight_5p .font .price big,.alternate .font .price big{color:var(--color3);}


/* ------------------ BG ------------------ */
.blk_body {
    max-width: 1280px;
    margin: 0 auto 40px;
    padding: 12px 0;
    border-radius:2em;
    background:url("../images/bg_color5.jpg") top center repeat;
}

  @media screen and (max-width: 991px) {
    .blk_body {
        max-width: 100%;
        border-radius:0 0;
        margin: 0 auto 0;
      }
	  
	/* ------------------ 版型調整 ------------------ */
	.boxmixbg .box-mix:nth-child(2) {flex-direction: column-reverse;}  
	  
  }




/* ------------------ 架構標 ------------------ */
  .blk_head {
      position: relative;
      margin: 80px auto 0;
      background: url("../images/bg_color1.jpg") top center repeat;
      border-radius: 2em 2em 0 0;
  }

  .blk_head::before {
      content: "";
      position: absolute;
      width: min(38%, 272px);
      aspect-ratio: 272 / 24;
      right: 40%;
      top: -5%;
      transform: translateY(-50%);
      background: url("../images/blk_head_deco.png") center / contain no-repeat;
      pointer-events: none;
      z-index: 1;
  }

  .btt small {
      width: 1200px;
      background: url("../images/bg_color2.jpg");
      padding: 12px 0;
      margin: 10px auto -12px;
  }

	h2.btt {
		font-size: clamp(2.4rem, 4vw + 1rem, 4rem);
    color:#fff;
    position:relative;
	}

  h2.btt::after {
      content: "";
      position: absolute;
      top: -44%;
      left: 3%;
      width: 100%;
      max-width: 1153px;
      aspect-ratio: 1153 / 232;
      background: url("../images/btt_deco.png") top center no-repeat;
      background-size: contain;
      z-index: 1;
      pointer-events: none;
  }

  .half ul h3,
  h3.stt{
    width:80%;
      color: var(--color1);
      font-size: clamp(1.6rem, 1.8vw + 1rem, 3rem);
      background-color: #fff;
      padding: 0.2em 0.5em;
      border-radius: 999em;
      border: 2px solid var(--color1);
    }


  .half ul h3:before,
  .stt:before {
    content: "☑";
    font-weight: 700;
    color: #faa53a;
    padding-right: 0.5em;
  }

.blk_pre h2.btt::after { display: none;}
.blk_pre .blk_head {margin: 20px auto 0;}




/* =========================
   M版 
========================= */
@media screen and (max-width: 991px) {
    .blk_head { margin-top: 12%;}

    .blk_head::before {
    right: 33%;
}


  h2.btt::after {
      content: "";
      position: absolute;
      top: 30%;
      left: 0%;
      width: 100%;
      background-size: 100%;
      z-index: 1;
      pointer-events: none;
  }

    .blk_head {
        margin: 4vw auto -2vw;
    }
    
    article.blk_item {
        margin: 0 auto;
        padding: 1vw 0;
    }



}






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

.kvitem {position: absolute;}

.kv_title {
    top: calc((117 / 1920) * 100%);
    left: calc((680 / 1920) * 100%);
    width: calc((562 / 1920) * 100%);
    animation:bounceIn 3s;
    animation-delay: 0s;
}

.kv_title_1 {
    top: calc((1162 / 1920) * 100%);
    left: calc((726 / 1920) * 100%);
    width: calc((472 / 1920) * 100%);
    animation: flipInX 2s;
    animation-delay: 1s;
    animation-fill-mode: backwards;
}

.kv_sale {
    top: calc((1278 / 1920) * 100%);
    left: calc((760 / 1920) * 100%);
    width: calc((430 / 1920) * 100%);
    animation: rubberBand 2s;
    animation-delay: 1s;
    animation-fill-mode: backwards;
}

.kv_good1 {
    top: calc((142 / 1920) * 100%);
    left: calc((588 / 1920) * 100%);
    width: calc((148 / 1920) * 100%);
    transform-origin: center center;
    animation: goods-shake-1 1.8s steps(1) 2s infinite;
}

.kv_good2 {
    top: calc((515 / 1920) * 100%);
    left: calc((522 / 1920) * 100%);
    width: calc((138 / 1920) * 100%);
    transform-origin: center center;
    animation: goods-shake-2 2.2s steps(1) 2.3s infinite;
}

.kv_good3 {
    top: calc((190 / 1920) * 100%);
    left: calc((1222 / 1920) * 100%);
    width: calc((155 / 1920) * 100%);
    transform-origin: center center;
    animation: goods-shake-1 2s steps(1) 2.5s infinite;
}

.kv_good4 {
    top: calc((539 / 1920) * 100%);
    left: calc((1384 / 1920) * 100%);
    width: calc((182 / 1920) * 100%);
    transform-origin: center center;
    animation: goods-shake-2 1.6s steps(1) 2.2s infinite;
}

.kv_good5 {
    top: calc((1315 / 1920) * 100%);
    left: calc((560 / 1920) * 100%);
    width: calc((151 / 1920) * 100%);
    transform-origin: center center;
    animation: goods-shake-1 1.6s steps(1) 2.7s infinite;
}

@keyframes goods-shake-1 {
  0%, 100% {
    transform: rotate(0deg); /* 原位靜止 */
  }
  50% {
    transform: rotate(-6deg); /* 瞬間卡到左傾 6 度 */
  }
  75% {
    transform: rotate(5deg); /* 瞬間卡到右傾 5 度 */
  }
}
/* 模式 B：縮放 + 雙向歪斜 */
@keyframes goods-shake-2 {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  40% {
    transform: rotate(7deg) scale(1.05); /* 瞬間卡到右歪 + 微放大 */
  }
  80% {
    transform: rotate(-5deg) scale(0.98); /* 瞬間卡到左歪 + 微縮小 */
  }
}



/* =================================================== 版身設定 =================================================== */
/* ------------------  go_btn------------------ */
.go_btn {
	margin: 30px auto;
}

.go_btn a {
    display: block;
    width: fit-content;
    height: auto;
    margin: 0 auto;
    padding: 0 30px;
    border: 2px solid #fff;
    border-radius: 999em;
    text-align: center;
    color: #fff;
    font-size: 2.5rem;
    line-height: 2;
    letter-spacing: 1px;
    background: url("../images/bg_color1.jpg");
    box-shadow: 0 7px #014885;
    transition: .2s;
}

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

@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);
	}
}