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


/**news**/
#news{ position: relative;  margin: 0 auto; width:100%;  z-index:100; padding:3.8rem 0 3.6rem 0;  }
#sns-box{ position: relative;  margin: 0 auto; width:100%;  z-index:100; padding:3.8rem 0 4.6rem 0;  }

h2 span{ position: relative; display: inline-block; margin:0 auto;  }
#news h2{text-align:center;}

@media (min-width: 800px) {
h2 span::before{ content: ''; position: absolute; width: 110px; height: 118px; top:-36px; left: -150px;  background: url("../img/item01.png") top center no-repeat; background-size: 100% auto; }
h2 span::after{ content: ''; position: absolute; width: 120px; height: 108px; top: -26px; right: -160px;  background: url("../img/item02.png") top center no-repeat; background-size: 100% auto;}
	
	
}
@media (min-width:0px) and (max-width: 799px) {
h2 span::before{ content: ''; position: absolute; width: 70px; height: 60px; top:50%; margin-top: -30px; left: -90px; background: url("../img/item01.png") top center no-repeat; background-size: 100% auto; }
h2 span::after{ content: ''; position: absolute; width: 80px; height: 60px; top:50%; margin-top: -30px; right: -90px;  background: url("../img/item02.png") top center no-repeat; background-size: 100% auto;}
}

.toppage-btn{ position: relative; margin: 0 auto; padding: 4rem 0 3.2rem 0;z-index:100;}
.toppage-btn .Btn a{ font-size:1.5rem; padding: 1rem 4rem; line-height: 1.8rem;}
.toppage-btn .Btn a:after{
 	content: ""; position: absolute; top: 50%; right: 11px; width: 0.4em; height: 0.4em;
	background: transparent; border-top: 2px solid #fff; border-right: 2px solid #fff;
	box-shadow: 0 0 0 lightgray; transition: all 0.3s ease; transform: translate3d(0,-50%,0) rotate(45deg);	
}
.toppage-btn .Btn a:hover:after{right: 7px;}

/***********************************************/
/**SCROLLING**/
/***********************************************/
#stage { position: relative; overflow: hidden;  width: 100%; height:471px; z-index: 100;
  background-image: url("../img/img02.jpg");  background-size: 2845px 471px;
  -webkit-animation: slide 50s linear infinite;
          animation: slide 50s linear infinite;
}
@-webkit-keyframes slide {from { background-position-x: 0; } to {  background-position-x: -2845px; }}
@keyframes slide { from { background-position-x: 0; } to {  background-position-x: -2845px;}}
@media (min-width:0px) and (max-width: 799px) {
	#stage { overflow: hidden;  width: 100%; height:235px;  background-image: url("../img/img02.jpg");  background-size: auto 235px; -webkit-animation: slide 40s linear infinite; 
}/*@media*/
}
/***********************************************/
/*  SNS  */
/***********************************************/
.framebox{ border-radius: 30px; border: 4px solid #ffe75f; background: #fff; text-align: center;}
.framebox h3{ margin-top: -0.9rem;}
.framebox h3 span{ background:#fff; padding: 0 0.5rem;}

#sns-box .framebox{ width:96%;  max-width: 1080px;margin-left:auto; margin-right: auto;  }

#sns-box .Btn a:after{
 	content: ""; position: absolute; top: 50%; right: 11px; width: 0.4em; height: 0.4em;
	background: transparent; border-top: 2px solid #fff; border-right: 2px solid #fff;
	box-shadow: 0 0 0 lightgray; transition: all 0.3s ease; transform: translate3d(0,-50%,0) rotate(45deg);	
}
#sns-box .Btn a:hover:after{right: 7px;}

/***********************************************/
/*SNS TAB*/
/***********************************************/

#tabs{position: relative;width:100%; margin:0 auto;}
input[type="radio"]{display:none;}

.toggle-tabs{position: relative;display: flex; justify-content:center;align-items:center; gap:8px;flex-wrap: wrap;}
.toggle-tabs li{ width:calc( (100% - 72px) / 8 );position: relative;}

@media (min-width:0px) and (max-width: 699px) {
	.toggle-tabs li{ width:calc( (100% - 40px) / 4 );}
}/*@media*/

label{position: relative;
	display:flex; justify-content:center;align-items:center; flex-wrap: wrap; gap:0;
	margin-right:2px;
  border-radius:12px;
	padding: 0;
  font-family:Arial;
  font-size:95%;
  font-weight:700;
  cursor:pointer;
  text-shadow:1px 1px #fff;
	filter:alpha(Opacity=60 , Style=0);/*for ie*/ -moz-opacity:0.6;/* Moz + FF */ opacity:0.6;
}
label span{ width: 100%; display: block;}
label img{ width:54%; height: 54%; margin-top:0;transition-duration: .3s;  }
label::after{content: "";display: block;padding-bottom:100%; }
label:hover img{  width:70%; height: 70%;}
label:hover{ color:#707070;filter:alpha(Opacity=100 , Style=0);/*for ie*/ -moz-opacity:1;/* Moz + FF */ opacity:1;}

.tab{
	display:flex;justify-content:center;
	margin-top: 8px;
	background:#ffe75f;
	display:none;
	padding:20px 15px 30px 15px; 
   border-bottom-left-radius: 25px; border-bottom-right-radius: 25px;
}
.tab ul {display:flex;justify-content:center; flex-wrap: wrap; gap:16px;}
.tab ul li{ border-radius:30px; }
.tab ul li a:hover{background:#2583e5;}
.tab ul li a{ display: block;border-radius:30px;background: #1b64b0; padding: 6px 32px 6px 24px; color: #fff;font-weight:700;}
.tab ul li a{ position: relative; }
.tab ul li a:after{
 	content: ""; position: absolute; top: 50%; right: 11px; width: 0.4em; height: 0.4em;
	background: transparent; border-top: 2px solid #fff; border-right: 2px solid #fff;
	box-shadow: 0 0 0 lightgray; transition: all 0.3s ease; transform: translate3d(0,-50%,0) rotate(45deg);	
}
.tab ul li a:hover:after{right: 7px;}

#toggle-tab1:checked ~ .toggle-tabs li label[for="toggle-tab1"],#toggle-tab2:checked ~ .toggle-tabs li label[for="toggle-tab2"],#toggle-tab3:checked ~ .toggle-tabs li label[for="toggle-tab3"],#toggle-tab4:checked ~ .toggle-tabs li label[for="toggle-tab4"],#toggle-tab5:checked ~ .toggle-tabs li label[for="toggle-tab5"],#toggle-tab6:checked ~ .toggle-tabs li label[for="toggle-tab6"],#toggle-tab7:checked ~ .toggle-tabs li label[for="toggle-tab7"],#toggle-tab8:checked ~ .toggle-tabs li label[for="toggle-tab8"]{
  background:#f1efec; cursor:default;filter:alpha(Opacity=100 , Style=0);/*for ie*/ -moz-opacity:1;/* Moz + FF */ opacity:1;
}

#toggle-tab1:checked ~ .toggle-tabs li label[for="toggle-tab1"] img,#toggle-tab2:checked ~ .toggle-tabs li label[for="toggle-tab2"] img,#toggle-tab3:checked ~ .toggle-tabs li label[for="toggle-tab3"] img,#toggle-tab4:checked ~ .toggle-tabs li label[for="toggle-tab4"] img,#toggle-tab5:checked ~ .toggle-tabs li label[for="toggle-tab5"] img,#toggle-tab6:checked ~ .toggle-tabs li label[for="toggle-tab6"] img,#toggle-tab7:checked ~ .toggle-tabs li label[for="toggle-tab7"] img,#toggle-tab8:checked ~ .toggle-tabs li label[for="toggle-tab8"] img{
   width:70%; height: 70%;
}

#toggle-tab1:checked ~ #tab1,#toggle-tab2:checked ~ #tab2,#toggle-tab3:checked ~ #tab3,#toggle-tab4:checked ~ #tab4,#toggle-tab5:checked ~ #tab5,#toggle-tab6:checked ~ #tab6,#toggle-tab7:checked ~ #tab7,#toggle-tab8:checked ~ #tab8{
  display:block;
}

/***********************************************/
/*SWIPER*/
/***********************************************/
.swiper-container { width: 100%; height: 100%; background:#0e2444;}

.swiper-container .swiper-slide {
  text-align: center; position: relative;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img a,.swiper-slide img{ display: block; position: relative; width:100vw; }
.swiper-button-next, .swiper-button-prev{ height:100%;  top:0px; }


.swiper-pagination {
	display:flex; justify-content:center;align-items:center; flex-wrap: nowrap; gap:0;
    position: relative;
    text-align: center; 
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden { opacity: 0}

.swiper-pagination-bullet {
    width: 8px;
    height: 12px; flex:1;
    border-radius: 0;
    opacity: .2
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    appearance: none
}
.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer}
.swiper-pagination-white .swiper-pagination-bullet {   background: #fff}
.swiper-pagination-bullet-active { opacity: 1; background: #007aff}
.swiper-pagination-white .swiper-pagination-bullet-active { background: #fff}
.swiper-pagination-black .swiper-pagination-bullet-active { background: #000}
.swiper-pagination { bottom: 0px; left: 0; width: 100%; padding: 0;}
.swiper-pagination .swiper-pagination-bullet { margin: 0 }


/***********************************************/
/*NEWS BLOG*/
/***********************************************/
.post-time{color:#808080;}
.underline{ text-decoration:underline;}

.post-container {
  padding: 0 0 20px 0;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* 單一項目 */
.post-item {
  display: flex;
  flex-direction: column;
}

.post-media {
 width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.white{background: #fff;}
.post-media img {
  max-width: 100%;
  aspect-ratio: 4/3;
  height: auto;
  object-fit: contain;
}

.post-item p {
  margin: 0;
}

.post-item p + p {
  margin-top: 16px;
}
/* 滿版 */
.post-full {
   grid-column: 1 / -1;
  break-before: always;
}

.post-full .post-media {
  aspect-ratio: 16 / 7;
}


/* 手機 */
@media (max-width: 768px) {
  .post-container {
    grid-template-columns: 1fr;
  }
 .post-full {
    grid-column:auto;
  }
	 .post-item {
    flex: 1 1 100%;
  }

  /* 文字自動換行，不超出容器 */
  .post-item p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word; /* 保險用 */
  }

  /* 可以讓超長 URL 自動換行 */
  .post-item a {
    word-break: break-all;
  }
}


/***********************************************/
/**GALLERY BANNER**/
/***********************************************/
/* 外框 */
.gallery-banner {
  position: relative;
  width: 100%;
  height: 800px;  margin: 0 0 0 0; z-index:100;
}

@media (max-width: 768px) {
  .gallery-banner {
    height: auto;aspect-ratio: 9 / 6;
  }
}

/* 軌道 */
.gallery-track {
  position: relative; overflow: hidden;
  width: 100%;
  height: 100%;
}

/* 每張 */
.gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.gallery-slide.active {
  opacity: 1;
}

/* 背景模糊 */
.gallery-slide::before { 
  content: "";
  position: absolute;
  inset: -30px; /* 防白邊 */

  background-image: var(--img);
  background-size: cover;
  background-position: center;

  filter: blur(4px);
  transform: scale(1.05);
}

@media (max-width: 768px) {
 .gallery-slide::before {
  filter: blur(2px);
}
}

/* 按鈕 */
a.gallery-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 white-space: nowrap;
  padding: 12px 40px 12px 32px;
  border: 3px solid #fff;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-weight: 900;font-size:1.3rem;
	text-shadow:1px 1px 3px  rgba(0,0,0,0.5);

  backdrop-filter: blur(0px);
  z-index: 10; 
}
a.gallery-btn:after{
 	content: ""; position: absolute; top: 50%; right: 10px; width: 0.4em; height: 0.4em; 
	background: transparent; border-top: 2px solid #fff; border-right: 2px solid #fff;
	box-shadow: 0 0 0 lightgray; transition: all 0.3s ease; transform: translate3d(0,-50%,0) rotate(45deg);	
}
a.gallery-btn:hover {
  background: rgba(255,255,255,0.2);
}

a.gallery-btn:hover:after{right: 7px;}

/* 黃色斜線 

.gallery-banner::before,
.gallery-banner::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 12px;
  z-index: 20;
  pointer-events: none;

  background-image: repeating-linear-gradient(
    45deg,
    #ffd400 0px,
    #ffd400 2px,
    transparent 2px,
    transparent 4px
  );
}
*/
.gallery-banner::before { top: -12px; }
.gallery-banner::after { bottom: -12px; }


#lb-wrap{  position: relative; padding-bottom:2rem; background:rgba(255,212,0,0.4);}
.pt-20{ padding-top:3rem;}