@charset "utf-8";

/****index***/
.femioIndexContainer {width:100%; }

/********slider**********/
.slider-container { position: relative; max-width: 100%; width: 100%; background-color: #F3F2ED;}
.slider { position: relative; max-width: 100%; width: 100%; overflow: hidden;transition: height 0.5s ease; }
.slider img {position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity 1s ease;
    object-fit: cover; transform-origin: center center; animation: none;  }
.slider img.active { opacity: 1; animation: zoomInKeep 5s forwards; position: relative;  }
  @keyframes zoomInKeep {
	  0%   { transform: scale(1); }
    100% { transform: scale(1.1); }
  }
  /* PNG 中間 + 由低80px上升同fade in，只播一次 */
.overlay-png { position: absolute;  top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 40px));
    pointer-events: none; z-index: 10; width: 100%; max-width: 1000px; height: auto; opacity: 0;
    animation-name: fadeInUpOnce;  animation-duration: 5s; animation-fill-mode: forwards; animation-iteration-count: 1; /* 只播一次 */  }
  @keyframes fadeInUpOnce {
    to {
      transform: translate(-50%, -50%);
      opacity: 1;
    }
  }
.overlay-png img { width: 100%; }
.desktop-slider {  display: block;}
.mobile-slider {  display: none;}

.femioIndexSecond {width:100%; height:auto; background:#706A41; padding: 100px auto; }
.femioIndexLogoIntro {width:100%; max-width: 420px; margin:  0 auto; padding-top: 150px; text-align: center;}
.femioIndexLogoIntro img {width:100%;}
.femioIndexSecondTxt  {width:100%; max-width:800px; margin: 0 auto; line-height:2; color:#F3F2ED; padding-bottom: 50px;}


.femioIndexLine    {background-image: url("../img/index/indexSecond-line.webp");
  background-repeat: repeat; /* Prevents image repetition */
  background-position: center center; /* Centers the image */
  background-size: 100% 100%; /* Or contain, 100% 100%, etc. */
  width: 100%; /* Example div dimensions */
  height: 220px; }

.femioIndexThird {width:100%; max-width: 1000px; margin: 0 auto; color:#4E4539;padding-top: 100px; padding-bottom: 150px;}
.femioIndexThirdImg {width:100%; max-width:700px; margin: 0 auto; text-align: center;}
.femioIndexThirdImg img {width:100%;}

.femioIndexThirdTxt {width:100%; max-width: 800px; margin: 0 auto; line-height:2; color:#4E4539;}


.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
  }.marquee-content {
    display: inline-block;
    animation: marquee 600s linear infinite;
    color: #6E5A42;
    font-family: Michelia, sans-serif;
    font-size: 50px!important;
    letter-spacing: 9px;
    line-height: 43px; /* 跟 font-size 一致令 border 貼文字 */
    border-top: 1px solid #6E5A42;
    border-bottom: 1px solid #6E5A42;
    padding: 0;
    margin: 0 -2px; /* 微調左右邊距 */
	   
  }.marquee-content span {
    display: inline-block;
	font-family: Michelia;
	font-size:50px!important;
	letter-spacing: 9px;
	
  }

  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }


.femioIndex4 {width:100%; background-color:#6E5A42; background-image: url("../img/index/femio-index-img-02.webp");
  background-repeat: no-repeat; /* Prevents image repetition */
  background-position: center right; /* Centers the image */
  background-size: auto 100%; /* Or contain, 100% 100%, etc. */
  width: 100%; /* Example div dimensions */
  height: 644px; }

.femioIndex4Inner {width:100%; max-width: 800px; margin:0 auto;display:flex; -webkit-flex-wrap:wrap; /* Safari 6.1+ */ flex-wrap: wrap;  -webkit-justify-content: center; /* Safari 6.1+ */ justify-content: center; padding-top: 50px;}
.femioIndex4Left {width:50%; text-align: left;}
.femioIndex4LeftTitle {font-style:italic; color:#E0FF00; font-size: 30px; padding-top:100px;} 
.femioIndex4LeftP  {width:90%; color:#F2F1EC; margin-top: 40px; letter-spacing: 5px; line-height:2; background-color:#6E5A42;}
.femioIndex4Right {width:45%; margin-left: 5%; text-align: right;}
.femioIndex4Right img {width:100%;}




































/****************thank you*******************/
.thankyouContainer  {width:100%; background: #706A41; margin-top: 60px; padding-bottom: 100px;}
.thankyouInner      {width:100%; max-width: 1300px; margin: 0 auto;}
.thankyouInner img  {width:100%;}
.thankyouTxt        {font-size:18px; color:#F3F2ED; text-align: center; padding-top: 30px;}














@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

.desktop-slider {display: none; }
.mobile-slider { display: block;}


	
	
/**********index*************/	
.femioIndexLogoIntro {width:100%; max-width: 420px; margin:  0 auto; padding-top: 90px; text-align: center;}
.femioIndexLogoIntro img {width:70%;}
	.femioIndexSecondTxt {width:92%; margin:  0 auto;}	
.femioIndexLine     {background-image: url("../img/index/indexSecond-line.webp");
  background-repeat: repeat; /* Prevents image repetition */
  background-position: center center; /* Centers the image */
  background-size: cover; /* Or contain, 100% 100%, etc. */
  width: 100%; /* Example div dimensions */
  height: 120px;}	
	
.femioIndexThirdTxt {width:92%; max-width: 92%; margin: 0 auto; line-height:2; color:#4E4539;}	


.femioIndex4 {width:100%; background-color:#6E5A42; background-color:#6E5A42; background-image: url("../img/index/femio-index-img-04.webp");
  background-repeat: repeat; /* Prevents image repetition */
  background-position: center center; /* Centers the image */
  background-size: 100% 100%; /* Or contain, 100% 100%, etc. */
  width: 100%; /* Example div dimensions */
  height: auto;  }
.femioIndex4Inner {width:100%; max-width: 800px; margin:0 auto;display:flex; -webkit-flex-wrap:wrap; /* Safari 6.1+ */ flex-wrap: wrap;  -webkit-justify-content: center; /* Safari 6.1+ */ justify-content: center; padding-top: 50px; padding-bottom: 50px;}
.femioIndex4Left {width:95%; margin:0 auto; text-align: center; order:2;}
.femioIndex4LeftTitle {font-style:italic; color:#E0FF00; font-size: 30px; padding-top:50px;} 
.femioIndex4LeftP  {width:90%; color:#F2F1EC; margin:0 auto; margin-top: 40px; letter-spacing: 5px; line-height:2; background-color:rgba(255,255,255,0);}
.femioIndex4Right {width:90%; margin-left: 5%; margin-right: 5; text-align: center; order:1;}
.femioIndex4Right img {width:70%;}	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}