@import url("https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css");
@import url("https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.css");
#box_article{
  display:block;
  width:100%;
  background:url(../images/2024fathers/bg_sky.jpg) #C5E7FD;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
 /*  background:#F3F3F3; */
  padding: 50px 0 80px;
}
#main_article{
  display:block;
  width:100%;
  max-width: 1200px;
  background:#fff;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(22, 86, 150, 0.445);
}

.banner-hero{
  display:block;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
  border-radius: 20px 20px 0 0;
}
.banner-hero img{
  display:block;
  width: 100%;height: auto;
}

.part_article{
  display:block;
  width: 88%;
  margin: 50px auto;
  padding: 0 30px;
}
.part_article h2{
  font-size: 30px;
  font-weight: bold;
  color: #df0615;
  line-height: 45px;
  letter-spacing: 1px
}
.part_article p{
  font-size: 18px;
  line-height: 30px;
  text-align: justify;
  margin: 20px 0;
}
.part_article .science-pic2{
  width: 80%;
  margin: 30px auto;
}
.part_article .subtitle{
  display: block;
  width: 100%;
  height: auto;
  margin-top: 30px;
}
.part_article .box_yt{
  display: block;
  width: 560px;
  height: 315px;
  margin: 60px auto 30px auto;
}
.part_article .box_yt2{
  display: block;
  width: 640px;
  height: 360px;
  margin: 30px auto 0 auto;
}
.part_article hr{
  width: 100%;
  border:5px solid #df0615;
  margin-bottom: 50px;
}

.part_article .subpic-01,
.part_article .subpic-02{
  display: inline-block;
  height:auto;
  vertical-align:top;
  margin-top: 50px;
}
.part_article .subpic-01{
  width: 52.5%;
}
.part_article .subpic-02{
  width: 45.5%;
}
.part_article .note{
  font-size: 15px;
  color: #7c7c7c;
  margin-bottom: 60px;
}
.pinkBG_article{
  background: linear-gradient(to top, #C5E7FD, rgba(255, 255, 255, 0.5), #C5E7FD);
  margin: 30px;
  border-radius: 30px;
}

#myslider{
	display: block;
	position: relative;
	overflow: hidden;
  width: 70%;
	height: 600px;
  margin: 30px auto 50px auto;
}
#myslider img{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: auto;
	opacity: 0;
  filter: alpha(opacity=0);
	-webkit-animation: round 12s linear infinite;
          animation: round 12s linear infinite;
}

@-webkit-keyframes round {
  8.33% {
    opacity: 1;
    filter: alpha(opacity=100);
    left: 0;
    /* 0 - 1 秒 滑入 */
  }
  33.33% {
    opacity: 1;
    filter: alpha(opacity=100);
    left: 0;
    /* 1- 4 秒靜止 */
  }
  41.66% {
    opacity: 1;
    filter: alpha(opacity=100);
    left: -100%;
    /* 4-5 秒滑出 */
  }
  50% {
    opacity: 0;
    filter: alpha(opacity=0);
    left: -100%;
    /* 5-6 秒變透明 */
  }
  58.33% {
    opacity: 0;
    filter: alpha(opacity=0);
    left: 100%;
    /* 6-7 秒回到起始位置 */
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    left: 100%;
    /* 7-12 秒回到起始位置 */
  }
}
@keyframes round {
  8.33% {
    opacity: 1;
    filter: alpha(opacity=100);
    left: 0;
    /* 0 - 1 秒 滑入 */
  }
  33.33% {
    opacity: 1;
    filter: alpha(opacity=100);
    left: 0;
    /* 1- 4 秒靜止 */
  }
  41.66% {
    opacity: 1;
    filter: alpha(opacity=100);
    left: -100%;
    /* 4-5 秒滑出 */
  }
  50% {
    opacity: 0;
    filter: alpha(opacity=0);
    left: -100%;
    /* 5-6 秒變透明 */
  }
  58.33% {
    opacity: 0;
    filter: alpha(opacity=0);
    left: 100%;
    /* 6-7 秒回到起始位置 */
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    left: 100%;
    /* 7-12 秒回到起始位置 */
  }
}
#myslider img:nth-child(2) {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

#myslider img:nth-child(3) {
  -webkit-animation-delay: 8s;
  animation-delay: 8s;
}
/* #myslider img:nth-child(2) {
	-webkit-animation-delay: 0s;
					animation-delay: 0s;
}

#myslider img:nth-child(1) {
	-webkit-animation-delay: 5s;
					animation-delay: 5s;
} */

/*2024新增花瓣落下動畫*/
#box_flower{
  position: fixed;
  width: 100%;
  top:150px;
  z-index: 100;
}
.snowflake {
   width: 40px;
   height: auto;
  /* color: #fff;
  font-size: 3em;
  font-family: Arial;
  text-shadow: 0 0 1px #000; */
}
.snowflake img{
  display: block;
  width: 100%;
  height: auto;
  /* opacity: 0.5; Add this line to set the opacity to 50% */
 }

@-webkit-keyframes snowflakes-fall{
  0%{top:-10%}
  100%{top:100%}
}
@-webkit-keyframes snowflakes-shake{
  0%{-webkit-transform:translateX(0px);transform:translateX(0px)}
  50%{-webkit-transform:translateX(80px);transform:translateX(80px)}
  100%{-webkit-transform:translateX(0px);transform:translateX(0px)}
}
@keyframes snowflakes-fall{
  0%{top:-10%}
  100%{top:100%}
}
@keyframes snowflakes-shake{
  0%{transform:translateX(0px)}
  50%{transform:translateX(80px)}
  100%{transform:translateX(0px)}
}
.snowflake{
  position:fixed;
  top:-10%;
  z-index:9999;
  -webkit-user-select:none;-moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running
}
.snowflake:nth-of-type(0){
  left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}
.snowflake:nth-of-type(1){
  left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}
.snowflake:nth-of-type(2){
  left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}
.snowflake:nth-of-type(3){
  left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}
.snowflake:nth-of-type(4){
  left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}
.snowflake:nth-of-type(5){
  left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}
.snowflake:nth-of-type(6){
  left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}
.snowflake:nth-of-type(7){
  left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}
/* .snowflake:nth-of-type(8){
  left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}
.snowflake:nth-of-type(9){
  left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s} */

/*2024-07 新增文章折疊效果*/
#readme{
  display: block;
  position: relative;
  height: 200px;
  overflow: hidden;
  transition: height 0.5s ease;
}
.gradient-bg{
  display: block;
  position: absolute;
  bottom: 0;
  background-image: linear-gradient(to top, white, transparent);
  height: 50px;
  width: 100%;
}
#readme.expanded {
  height: auto;
}
#readme.expanded .gradient-bg {
  opacity: 0;
}
.rmopen{
  display: block;
  width: fit-content;
  margin: 20px auto;
  padding: 10px 30px;
  border:1px solid #df0615;
  border-radius: 50px;
  text-align: center;
  font-size: 20px;
  color: #df0615;
  letter-spacing: 2px;
  text-decoration: none;
  cursor: pointer;
}

/*2024-07 新增圖片輪播*/
#myCarousel {
  --f-carousel-slide-height: 60%;
  --f-carousel-spacing: 10px;
  height: fit-content;
  width: 80%;
  margin: 20px auto;
}
#myCarousel .f-carousel__slide {
  padding: 20px;
  /* background: #eee;
  border: 1px solid #111; */
}
#myCarousel .f-carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.f-carousel {
  --f-button-width: 38px;
  --f-button-height: 38px;

  --f-button-svg-width: 16px;
  --f-button-svg-height: 16px;
  --f-button-svg-stroke-width: 2.5;

  --f-button-color: rgb(71 85 105);
  --f-button-border-radius: 50%;
  --f-button-shadow: 0 6px 12px -2px rgb(50 50 93 / 25%), 0 3px 7px -3px rgb(0 0
          0 / 30%);

  --f-button-bg: white;
  --f-button-hover-bg: #fff;
  --f-button-active-bg: #fff;
  margin: 0 -5px;
}

@media screen and (max-width:1100px){
  #main_article{
    max-width: 90%;
  }
  .part_article{
    width: 90%;
  }
  .part_article .science-pic2{
    width: 100%;
  }
  #myslider{
    height:560px
  }
}

@media screen and (max-width:800px){
  .part_article{
    width: 100%;
  }
  .part_article p{
    font-size: 25px;
    line-height: 40px;
  }
  .part_article .note{
    font-size: 20px;
    line-height:33px;
    margin-bottom: 60px;
  }
  .part_article .box_yt,
  .part_article .box_yt2{
    width: 500px;
    height: 281px;
  }
  #myslider{
    height:400px
  }
  #myCarousel {
    width: 100%;
    margin: 20px auto;
  }
  #myCarousel .f-carousel__slide {
    padding: 5px;
  }
  .f-carousel {
    margin: 0 ;
  }
  #readme{
    height: 380px;
  }
}
@media screen and (max-width:700px){
  #myslider{
    width: 85%;
    height:430px
  }
}