@charset "UTF-8";
/* CSS Document */

/*基本*/
body{ margin:0; padding:0;background-color: #c3e5fe;}




/*全BOX版面*/
.WRAPPER { position: relative; display:block; margin: 0 auto; padding: 0; width:100%;  min-width:1220px; overflow:hidden;}
.WRAPPER img { border:0px; vertical-align:bottom;}
.WRAPPER a { text-decoration:none;}
		@media screen and (max-width:959px){
		.WRAPPER { min-width: inherit; padding-bottom:0px; }
		.WRAPPER img {  width:100%;  height:auto;}
	}
/*滑過會亮*/	
.go_bt2 {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.go_bt2:hover { 
   filter:brightness(104%);
  /*-webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
      -ms-transform:translateY(-10px);
       -o-transform:translateY(-10px);
          transform:translateY(-10px);*/
		  }
/*滑過上移*/
.go_bt4 {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.go_bt4:hover { 
  -webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
      -ms-transform:translateY(-10px);
       -o-transform:translateY(-10px);
          transform:translateY(-10px);
		  }

/*上移*/
.bnn {
	
}
.bnn a img {
	transition-duration: 0.1s;
	backface-visibility: hidden;
	transform: translateZ(0);
	display: block;
	margin: 0;
	padding: 0px;
	width: 100%;
	height: auto;
	text-align: left;
}

/*背景*/
.main01  { z-index:0; position:absolute; top:0; left:0; width:100%; min-width:100%; height:1354px; background: url(index_01.jpg) no-repeat center top ;}
.main02  { z-index:0; position:absolute; top:0; left:0; width:100%; min-width:100%; height:845px; background: url(index_02.jpg) no-repeat center top ;}
.main03  { z-index:0; position:absolute; top:0; left:0; width:100%; min-width:100%; height:915px; background: url(index_03.jpg) no-repeat center top ;}
.main04  { z-index:0; position:absolute; top:0; left:0; width:100%; min-width:100%; height:965px; background: url(index_04.jpg) no-repeat center top ;}
.main05  { z-index:0; position:absolute; top:0; left:0; width:100%; min-width:100%; height:828px; background: url(index_05.jpg) no-repeat center top ;}
.main06  { z-index:0; position:absolute; top:0; left:0; width:100%; min-width:100%; height:768px; background: url(index_06.jpg) no-repeat center top ;}
.main07  { z-index:0; position:absolute; top:0; left:0; width:100%; min-width:100%; height:906px; background: url(index_07.jpg) no-repeat center top ;}
.main08  { z-index:0; position:absolute; top:0; left:0; width:100%; min-width:100%; height:244px; background: url(index_08.jpg) no-repeat center top ;}
.mo4  { z-index:0; position:absolute; top:0; left:0; max-width:100%; height:auto; background: url(main_mb_03.jpg) no-repeat center top ;background-size: 100% auto;}


/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { display:block;} 
.Area .go_bt {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.Area .go_bt:hover {
  -webkit-transform:scale(0.95);
     -moz-transform:scale(0.95);
      -ms-transform:scale(0.95);
       -o-transform:scale(0.95);
          transform:scale(0.95);}
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}
	@media screen and (max-width:960px){
		.Area1220 { width:100%;}
		.Area960 { width:100%;}
		/*區塊_切割*/
		.Area_1bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_1bn a { float:left; margin:0 0 2% 0; padding:0; width:100%; list-style: none;}
		.Area_2bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_2bn a { float:left; margin:0 1% 2%; padding:0; width:48%; list-style: none;}
		.Area_3bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_3bn a { float:left; margin:0 1% 2% ; padding:0; width:31.3%; list-style: none;}
		.Area_1bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_1bn_nopadding a { float:left; margin:0; padding:0; width:100%; list-style: none;}
		.Area_2bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_2bn_nopadding a { float:left; margin:0; padding:0; width:50%; list-style: none;}
		.Area_3bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_3bn_nopadding a { float:left; margin:0; padding:0; width:33.3%; list-style: none;}
	}


/*版頭*/

	
/*隱鑶*/
.for_pc {}
.for_phone { display:none !important;}
	@media screen and (max-width:959px){
		.for_pc { display:none !important;}
		.for_phone { display: inherit !important;}
	}



/*購買按鈕*/

.fixed-buy-btn {
	position: fixed;
	right: 0;
	top: 50vh; /* 你可以根據需要調整 */
	transform: translateY(-50%);
	z-index: 100;
	width: 60px;
  }
  
  .fixed-buy-btn img {
	width: 100%;
	height: auto;
	display: block;
  }
  
  /* 小螢幕調整 */
  @media (max-width: 999px) {
	.fixed-buy-btn {
	  width: 10vw;
	  right: 0;
	  top: 50vh; /* 你可以根據需要調整 */
	  transform: translateY(-50%);
	}
  }


/*輪播*/
  .swiper {
	width: 1220px;
	height: auto;
  }

  .swiper-slide {
	text-align: center;
	font-size: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
  }

  .swiper-position{
    display: grid;
    justify-content: center;
    padding-top: 275px;
  }

    /* 小螢幕調整 */
	@media (max-width: 999px) {
		.swiper {
			width: 100vw;
			height: auto;
		  }
		  .swiper-position-mb{
			position: absolute;
			top:32%;
			left: 0%;
		  }
	}

	/*影片置入*/
	.video-wrapper {
		position: relative; /* 讓子元素可以absolute定位 */
		width: 100%;
		height: 100vh; /* 根據你的背景尺寸可以自己調整 */
		overflow: hidden;
	  }
	  
	  /* 每個影片容器 */
	  .video-container {
		margin: 0 auto;
		width: 920px; /* 調整大小 */
		aspect-ratio: 16/9; /* 保持16:9比例，現代瀏覽器支援 */
		border-radius: 20px;
	  }
	  
	  /* 內部的iframe影片 */
	  .video-container iframe {
		width: 100%;
		height: 100%;
		border-radius: 20px;
	  }
	  
	  /* 你可以針對每個影片做不同定位 */
	  #video1-pc {
		margin-top: 243px;
		border: 2px solid #fff;
		background-color: #fff;
	  }
	  #video2-pc {
		margin-top: 243px;
		border: 2px solid #fff;
		background-color: #fff;
	  }
	  #video3-pc {
		margin-top: 175px;
	  }

    /* 小螢幕調整 */
	@media (max-width: 999px) {
		.video-wrapper {
			height: 100%; /* 根據你的背景尺寸可以自己調整 */
		  }
		.video-container-mb {
			position: absolute;
			width: 92vw; /* 調整大小 */
			aspect-ratio: 16/9; /* 保持16:9比例，現代瀏覽器支援 */
			border-radius: 20px;
		  }
		  /* 內部的iframe影片 */
		  .video-container-mb iframe {
			width: 100%;
			height: 100%;
			border-radius: 20px;
		  }
		#video1 {
			top: 28.5%;
			left: 4%;
		  }
		  #video2 {
			top: 28.5%;
			left: 4%;
		  }
		  #video3 {
			top: 23%;
			left: 4%;
		  }
	}