@charset "utf-8";

@font-face { font-family: Michelia; src: url("./Michelia.otf");}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

body {background-color:#EAE9E4;opacity: 0; transition: opacity 1s ease;}
body.fade-out { opacity: 0;}
body.fade-in { opacity: 1;
}

*{font-family: "Noto Sans TC", sans-serif; font-weight: 300; }


a {color:#4E4539; transition: color 1s 500ms;}
a:hover {color:#706A41;}

html {  scroll-behavior: smooth;}

.desktop {display:block!important; }
.mobile  {display:none!important;}

.greentxt {color:#706A41!important;}




/***********footer*************/
.footer{width:100%; height:auto; font-weight: 200; background-image: url('../img/footer/femio-footer-bg.webp'); background-repeat: no-repeat; background-position: center center; /* Optional: centers the image */ background-size: cover; color: #EAE9E4; padding-bottom: 30px; }
.footer-inner {width:100%; max-width: 850px; margin: 0 auto; display:flex; -webkit-flex-wrap:wrap; /* Safari 6.1+ */ flex-wrap: wrap;  -webkit-justify-content: left; /* Safari 6.1+ */ justify-content: left;}
.footer-left {width:70%; }
.footer-right {width:25%; margin-left: 5%; }
.footer-rightSoical, .footer-leftSolgan {padding-top:30px;}
.footer-leftSolgan {font-size:20px; letter-spacing:18px; font-weight: 200;}
.footer-rightSoical {text-align: right;}
.footer-rightSoical img {width:17%; margin: 0 10px;}
.footer-leftInfo    {padding-top: 60px;}
.footer-leftInfo p  {line-height: 2.1;}
.footer-rightLogo   {padding-top: 60px;}
.footer-rightLogo  img {width:100%; padding-top: 25px;}
.footer-CopyRight  {width:100%; max-width: 850px; margin: 0 auto; margin-top: 20px; border-top: 1px solid #F3F2ED; display:flex; -webkit-flex-wrap:wrap; /* Safari 6.1+ */ flex-wrap: wrap;  -webkit-justify-content: center; /* Safari 6.1+ */ justify-content: center; }
.footer-tnc        {width:50%; text-align: left; font-size: 12px; margin-top: 5px;}
.footer-copy        {width:50%; text-align: right; font-size: 12px; margin-top: 5px;}
.footer a          {color: #EAE9E4; text-decoration: none;}

/***********shortcut*************/
.femioShortCut     { width: 64px; height: auto; position: fixed; right: 0px;  bottom: 150px;line-height: 0px;}
.femioShortCut img {width:100%;padding: 0px; margin: 0px;}


/***********form *************/
.formContainer  {width:100%; max-width:1000px; margin: 0 auto; height: auto; display:flex; -webkit-flex-wrap:wrap; /* Safari 6.1+ */ flex-wrap: wrap;  -webkit-justify-content: center; /* Safari 6.1+ */ justify-content: center; margin-top:100px; margin-bottom: 150px;}
.formLeft       {width:55%; height: auto;}
.formRight      {width:40%; height: auto; padding-left: 5%; margin-top: 60px;}
.formRight img  {width:100%;}
.formApplyTxt   {font-size:32px; color:#706A41; font-weight: 900; letter-spacing: 4px; line-height: 70px;}
.formApplyTitle {font-size:35px; color: #4E4539; font-weight: bold; letter-spacing: 4px;  line-height: 10px;}
.formApplyTitle2 {font-size:65px; color: #706A41; font-weight: bold; letter-spacing: 16px; }
/****form area*****/
.formArea       {width:100%; height: auto; margin-top: 30px; display:flex; -webkit-flex-wrap:wrap; /* Safari 6.1+ */ flex-wrap: wrap;  -webkit-justify-content: center; /* Safari 6.1+ */ justify-content: center;}
.formAreaName   {width:100%; height: 40px; margin-top: 10px; margin-bottom: 10px; }
.formAreaPhone  {width:48%; height: 40px; margin-right: 2%; margin-top: 10px; margin-bottom: 10px;}
.formAreaEmail  {width:48%; height: 40px; margin-left: 2%; margin-top: 10px; margin-bottom: 10px; }
.formAreaDate  {width:48%; height: 40px; margin-right: 2%; margin-top: 10px; margin-bottom: 10px;}
.formAreaTime  {width:48%; height: 40px; margin-left: 2%; margin-top: 10px; margin-bottom: 10px; }
.formAreaPara  {width:100%; height: 80px; margin-top: 10px; margin-bottom: 50px; margin-top: 30px;  }
.formAreaPara textarea {width:100%; height: 120px; background:#EAE9E4;}
.formAreaName input, .formAreaPhone input, .formAreaEmail input, .formAreaDate input, .formAreaTime input {width:100%; border: 0px;outline: none;height: 40px; background: none; border-bottom:  1px solid #4E4539;}
.formAreaName input:focus, .formAreaPhone input:focus, .formAreaEmail input:focus, .formAreaDate input:focus, .formAreaTime input:focus  {font-weight: 700; color:#706A41; border-radius: 10px;   box-shadow: 0 0 5px rgba(112, 106, 65, 0.5); /* Glowing effect *//* Smooth transition */}
.formAreaName input:hover, .formAreaPhone input:hover, .formAreaEmail input:hover, .formAreaDate input:hover, .formAreaTime input:hover  {border-radius: 10px;   box-shadow: 0 0 5px rgba(112, 106, 65, 0.9); /* Glowing effect *//* Smooth transition */}
.formAreaTnC {margin-top:30px;}
.formAreaTnC, .formAreaAdv   {width:100%; height: 40px; text-align: left;}
.formAreaBtn   {width:100%; height: auto; margin-top:30px; text-align: left;}






/******************video******************/
.videoArea   {width:100%; max-width: 1000px; height: 500px; margin: 0 auto; background-color: #4E4539; margin-top: 150px;}
























































@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 {display:none!important; }
.mobile  {display:block!important;}	
	
	
	
	
/***********footer*************/
.footer{width:100%; height:auto; padding-bottom: 50px;  background-image: url('../img/footer/femio-footer-bg.jpg'); background-repeat: no-repeat; background-position: 100% center; /* Optional: centers the image */ background-size: cover; color: #EAE9E4; }
.footer-inner {width:100%; max-width: 850px; 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;}
.footer-left {width:100%; }
.footer-right {width:100%; margin-left: -5%; }
.footer-rightSoical, .footer-leftSolgan {padding-top:30px;}
.footer-leftSolgan {font-size:20px; letter-spacing:18px; font-weight: 200; text-align: center;}
.footer-rightSoical {text-align: center;}
.footer-rightSoical img {width:10%; margin: 0 10px;}
.footer-leftInfo    {padding-top: 50px;}
.footer-leftInfo p  {width:90%; margin: 0 auto; line-height: 2.1; text-align: center;}
.footer-rightLogo   {padding-top: 0px; text-align: center;}
.footer-rightLogo  img {width:40%; padding-top: 50px;}
.footer-CopyRight   {width:90%; margin: 20px auto 0 auto;}
.footerINFO {order:2;}	
.footerLOGO {order:1;}	
.footer-tnc        {width:100%; text-align: center; font-size: 12px; margin-top: 10px;}
.footer-copy        {width:100%; text-align: center; font-size: 12px; margin-top: 10px;}	
	

/***********shortcut*************/
.femioShortCut     { width: 45px; height: auto; position: fixed; right: 0px;  bottom: 50px;line-height: 0px;}
.femioShortCut img {width:100%;padding: 0px; margin: 0px;}
	
	
/***********form *************/
.formContainer  {width:100%; max-width:1300px; height: auto; display:flex; -webkit-flex-wrap:wrap; /* Safari 6.1+ */ flex-wrap: wrap;  -webkit-justify-content: left; /* Safari 6.1+ */ justify-content: left; margin-top:100px; margin-bottom: 150px;}
.formLeft       {width:95%; height: auto; margin: 0 auto; padding-bottom: 70px; text-align: center;}
.formRight      {width:60%; height: auto; margin: 0 auto; padding-left: 0%;}
.formRight img  {width:100%;}	
.formApplyTxt   {font-size:32px; color:#706A41; font-weight: 900; letter-spacing: 4px; line-height: 50px;}
.formApplyTitle {font-size:26px; color: #4E4539; font-weight: bold; letter-spacing: 4px;  line-height: 50px;}
.formApplyTitle2 {font-size:47px; color: #706A41; font-weight: bold; letter-spacing: 15px;   line-height: 50px;}
.formApplyTitle3  {margin-top:30px;}
/****form area*****/
.formArea       {width:90%; height: auto; margin:0 auto; margin-top: 30px;}	
.formAreaPhone  {width:100%; height: 40px; margin-right: 0%; margin-top: 15px; margin-bottom: 15px;}
.formAreaEmail  {width:100%; height: 40px; margin-left: 0%; margin-top: 15px; margin-bottom: 15px; }
.formAreaDate  {width:100%; height: 40px; margin-right: 0%; margin-top: 15px; margin-bottom: 15px;}
.formAreaTime  {width:100%; height: 40px; margin-left: 0%; margin-top: 15px; margin-bottom: 15px; }	
.formAreaTnC, .formAreaAdv {margin-top:30px;}
.formAreaBtn   {width:100%; height: auto; margin-top:30px; text-align: center;}
	
	

	
	
	
	
	
	
	
	
	
	
	
	

	
}