@charset "utf-8";
/*
  danny 201902
  1. $Mobile
  2. $Pad
  3. $橫的版型
  4. $Pc
  5. $1025~1279
*/






/* $Mobile
--------------------------------------------------------------------------------------*/

h3{ font-size: 2.0rem; font-weight: bold; color: #000; text-align: center; margin: 0 0 0 0; }
.contact-container{}
/* contact header */
.contact_header-box{ width: 100%; min-height: 100px; background: url(../images/contact_header_bg--mobile.jpg); background-size: cover; box-sizing: border-box; padding: 10px 0 10px 0; position: relative; }
.contact_header-box p{ font-size: 1.2rem; line-height: 1.5em; color: #222; width: 80vw; margin: 5px auto 0; }
.contact_header-box ul{ width:100%; margin: 0 auto; display: flex; justify-content: center; font-size: 1.2rem; flex-wrap: wrap;}
.contact_header-box ul li { background:#ffffe7; border-radius:50px; padding:5px; margin:5px 5px 0;}


/* 設定連結的定位 */
.custom-tooltip {
  position: relative;
  text-decoration: none;
}

/* 製作提示框本體：預設隱藏 (原 ::after 改為 .tooltip-box) */
.custom-tooltip .tooltip-box {
  position: absolute;
  bottom: -40px;               
  left: 50%;
  transform: translateX(-50%);
  background-color: #333; 
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s;
  z-index: 999;
  /* 新增：讓內建的文字和圖片能完美垂直對齊 */
  display: flex;
  align-items: center;
  gap: 4px; /* 文字與圖片的間距 */
}

/* 新增：控制提示框內圖片的大小與對齊 */
.custom-tooltip .tooltip-img {
  width: 16px;   /* 依需求調整圖片寬度 */
  height: 16px;  /* 依需求調整圖片高度 */
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
}

/* 當滑鼠移上去時 (:hover)，立刻顯示提示框 */
.custom-tooltip:hover .tooltip-box {
  opacity: 1;
  visibility: visible;
  transition: .5s;
}

.contact_header-box ul li.link { background:#f0850c ; color: #fff; transition: .5s; }
.contact_header-box ul li.link:hover { background:#9246B6 ; transition: .5s; }




/* contactform-box  */
.contactform-box{ display: flex; flex-wrap: wrap; width: 95%; font-size: 1.2rem; color: #7e619b; margin: 10px auto 0; box-sizing: border-box; padding: 0 0 0 0; }
.contactform-box>li{ list-style: none; display: flex; align-items: center; width: 48.5%; box-sizing: border-box; padding: 8px 0px 8px 10px; border-radius: 3px; margin: 0 1% 0 0; position: relative; }
.contactform-box>li img{ margin: 0 0 0 5px; }
.contactform-box>li>ul{ display: flex; width: 100%; }
.contactform-box>li>ul>li{ display: flex; align-items: center; width: 33%; }
.contactform-box>li>ul>li .select-container{ width: 80%; }
.contactform-box>li>ul>li span{ margin: 0 5px; }
.contactform-box .w100{ width: 98%; }
.contactform-box .w100>label{ width: auto; min-width: 60px; }
.contactform-box>li>label{ min-width: 130px; margin: 0 15px 0 0; }
label.mark{ position: relative;}
label.mark:after{content:'*'; font-size:1rem; color:red; position: absolute; left:-10px; top:0;}
/* input */
.contactform-box input{ width: 500px; height: 40px; line-height: 40px; border-radius: 15px; border: 1px solid #cfcfcf; font-size: 1.2rem; color: #222; box-sizing: border-box; padding: 0 15px; }
.contactform-box input::placeholder { color: #ccc; font-size: 1.2rem; }
.contactform-box .w20{ width: 42px; height: auto; line-height: 1.5em; margin: 0 5px 0 5px; border-bottom: 1px solid #ccc; }
/* select */
.contactform-box .select-container{ width: 500px; height: 40px; border-radius: 15px; border: 1px solid #cfcfcf; box-sizing: border-box; padding: 0 0 0 0; position: relative; }
.contactform-box .select-container:after{ content: '\f0d7'; color: #000; font-weight: 600; font-size: 2rem; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.contactform-box .select-container>span{ display: inline-block; width: 100%; color: #ccc; cursor: pointer; font-size: inherit; font-weight: 400; }
.contactform-box .select-container>ul{ background: #fff; font-size: 1.5rem; display: none; position: relative; z-index: 999;	}
.contactform-box .select-container>ul>li{ height: 35px; line-height: 35px; background: #b5ddd4; box-sizing: border-box; padding: 0 0; margin: 0 0 1px 0; cursor: pointer; }
.contactform-box select{ background: transparent; width: 100%; padding: 0px 10px; font-size: 1.2rem;  color: #222; line-height: 1;  border: 0;  border-radius: 0;  height: 38px;  -webkit-appearance: none; box-sizing: border-box;  position: absolute; }
/* textarea */
.contactform-box textarea{ font-size: inherit; resize:none; width: 500px; height:40px; min-height:40px; line-height: 40px; border-radius: 15px; border: 1px solid #cfcfcf; box-sizing: border-box; padding: 0px 15px 15px; transition:all .6s; overflow: hidden; }
.contactform-box textarea:focus{ border-color:#0e9f7f; }
.contactform-box textarea:focus{ resize:vertical; height:10em; min-height:10em;  }
/* btn */
.contactform_btn{ display: flex; justify-content: center; align-items: center; width: 140px; height: 40px; line-height: 40px; box-sizing: border-box; border-radius: 20px; border: 1px solid #7e619b; color: #7e619b; margin: 10px auto 30px; transition: all 0.6s cubic-bezier(.23,1,.32,1); }
.contactform_btn:hover{ background: rgba(126,97,155,0.7); color: #fff; }
.contactform_btn a{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 2rem;  text-align: center; letter-spacing: 3px; }
.contactform_btn a:hover{ text-decoration: none; }




/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){

h3{ font-size: 2.0rem; font-weight: bold; color: #000; text-align: center; margin: 0 0 0 0; }
.contact-container{}
.contact_header-box{ width: 100%; min-height: 100px; background: url(../images/contact_header_bg--mobile.jpg); background-size: cover; box-sizing: border-box; padding: 20px 0 20px 0; position: relative; }
.contact_header-box p{ font-size: 1.2rem; line-height: 1.5em; color: #222; width:520px; margin: 5px auto 0; }
.contact_header-box ul{ width: 100%; margin: 0 auto; display: flex; justify-content: center; font-size: 1.6rem;}
.contact_header-box ul li{ background:#ffffe7; border-radius:50px; padding:5px 15px; margin:5px 5px 0;}





/* contactform-box  */
.contactform-box{ display: flex; flex-wrap: wrap; width: 100%; max-width: 620px; font-size: 1.4rem; color: #7e619b; margin: 30px auto 0; box-sizing: border-box; padding: 0 0 0 0; }
.contactform-box>li{ list-style: none; display: flex; align-items: center; width: 48.5%; box-sizing: border-box; padding: 8px 20px; border-radius: 3px; margin: 0 1% 0 0; position: relative; }
.contactform-box>li>ul{ display: flex; width: 100%; }
.contactform-box>li>ul>li{ display: flex; align-items: center; width: 33%; }
.contactform-box>li>ul>li .select-container{ width: 80%; }
.contactform-box>li>ul>li span{ margin: 0 5px; }
.contactform-box .w100{ width: 98%; }
.contactform-box .w100>label{ width: auto; min-width: 100px; }
.contactform-box>li>label{ min-width: 130px; margin: 0 15px 0 0; }
label.mark{ position: relative;}
label.mark:after{content:'*'; font-size:1rem; color:red; position: absolute; left:-10px; top:0;}
/* input */
.contactform-box input{ width: 500px; height: 40px; line-height: 40px; border-radius: 15px; border: 1px solid #cfcfcf; font-size: 1.4rem; color: #222; box-sizing: border-box; padding: 0 15px; }
.contactform-box input::placeholder { color: #ccc; font-size: 1.4rem; }
.contactform-box .w20{ width: 42px; height: auto; line-height: 1.5em; margin: 0 5px 0 5px; border-bottom: 1px solid #ccc; }
/* select */
.contactform-box .select-container{ width: 500px; height: 40px; border-radius: 15px; border: 1px solid #cfcfcf; box-sizing: border-box; padding: 0 0 0 0; position: relative; }
.contactform-box .select-container:after{ content: '\f0d7'; color: #000; font-weight: 600; font-size: 2rem; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.contactform-box .select-container>span{ display: inline-block; width: 100%; color: #ccc; cursor: pointer; font-size: inherit; font-weight: 400; }
.contactform-box .select-container>ul{ background: #fff; font-size: 1.5rem; display: none; position: relative; z-index: 999;	}
.contactform-box .select-container>ul>li{ height: 35px; line-height: 35px; background: #b5ddd4; box-sizing: border-box; padding: 0 0; margin: 0 0 1px 0; cursor: pointer; }
.contactform-box select{ background: transparent; width: 100%; padding: 0px 15px; font-size: 1.4rem;  color: #222; line-height: 1;  border: 0;  border-radius: 0;  height: 38px;  -webkit-appearance: none; box-sizing: border-box;  position: absolute; }
/* textarea */
.contactform-box textarea{ font-size: inherit; resize:none; width: 500px; height:40px; min-height:40px; line-height: 40px; border-radius: 15px; border: 1px solid #cfcfcf; box-sizing: border-box; padding: 0px 15px 15px; transition:all .6s; overflow: hidden; }
.contactform-box textarea:focus{ border-color:#0e9f7f; }
.contactform-box textarea:focus{ resize:vertical; height:10em; min-height:10em;  }
/* btn */
.contactform_btn{ display: flex; justify-content: center; align-items: center; width: 140px; height: 40px; line-height: 40px; box-sizing: border-box; border-radius: 20px; border: 1px solid #7e619b; color: #7e619b; margin: 20px auto 30px; transition: all 0.6s cubic-bezier(.23,1,.32,1); }
.contactform_btn:hover{ background: rgba(126,97,155,0.7); color: #fff; }
.contactform_btn a{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 2rem;  text-align: center; letter-spacing: 3px; }
.contactform_btn a:hover{ text-decoration: none; }










}





/* $橫的版型 */
@media screen and (orientation:landscape){ 


}





/* $Pc
--------------------------------------------------------------------------------------*/
@media screen and (min-width: 1025px){

h3{ font-size: 3.0rem; font-weight: bold; color: #000; text-align: center; margin: 0 0 0 0; }
.contact-container{}
.contact_header-box{ width: 100%; height:200px; background: url(../images/contact_header_bg.jpg); background-size: cover; box-sizing: border-box; padding: 20px 0; position: relative; }
.contact_header-box p{ font-size: 1.6rem; line-height: 1.5em; color: #222; width:700px; margin: 5px auto 0; }
.contact_header-box ul{ width: 100%; margin: 0 auto; display: flex; justify-content: center; font-size: 1.6rem;}
.contact_header-box ul li{ background:#ffffe7; border-radius:50px; padding:5px 15px; margin:5px 5px 0;}





/* contactform-box  */
.contactform-box{ display: flex; flex-wrap: wrap; width: 100%; max-width: 620px; font-size: 1.6rem; color: #7e619b; margin: 30px auto 0; box-sizing: border-box; padding: 0 0 0 0; }
.contactform-box>li{ list-style: none; display: flex; align-items: center; width: 48.5%; box-sizing: border-box; padding: 8px 20px; border-radius: 3px; margin: 0 1% 0 0; position: relative; }
.contactform-box>li>ul{ display: flex; width: 100%; }
.contactform-box>li>ul>li{ display: flex; align-items: center; width: 33%; }
.contactform-box>li>ul>li .select-container{ width: 80%; }
.contactform-box>li>ul>li span{ margin: 0 5px; }
.contactform-box .w100{ width: 98%; }
.contactform-box .w100>label{ width: auto; min-width: 100px; }
.contactform-box>li>label{ min-width: 130px; margin: 0 15px 0 0; }
label.mark{ position: relative;}
label.mark:after{content:'*'; font-size:1rem; color:red; position: absolute; left:-10px; top:0;}
/* input */
.contactform-box input[typ^=select]{ width: 500px; height: 40px; line-height: 40px; border-radius: 15px; border: 1px solid #cfcfcf; font-size: 1.6rem; color: #222; box-sizing: border-box; padding: 0 15px; }
.contactform-box input::placeholder { color: #ccc; font-size: 1.6rem; }
.contactform-box .w20{ width: 42px; height: auto; line-height: 1.5em; margin: 0 5px 0 5px; border-bottom: 1px solid #ccc; }
/* select */
.contactform-box .select-container{ width: 500px; height: 40px; border-radius: 15px; border: 1px solid #cfcfcf; box-sizing: border-box; padding: 0 0 0 0; position: relative; }
.contactform-box .select-container:after{ content: '\f0d7'; color: #000; font-weight: 600; font-size: 2rem; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.contactform-box .select-container>span{ display: inline-block; width: 100%; color: #ccc; cursor: pointer; font-size: inherit; font-weight: 400; }
.contactform-box .select-container>ul{ background: #fff; font-size: 1.5rem; display: none; position: relative; z-index: 999;	}
.contactform-box .select-container>ul>li{ height: 35px; line-height: 35px; background: #b5ddd4; box-sizing: border-box; padding: 0 0; margin: 0 0 1px 0; cursor: pointer; }
.contactform-box select{ background: transparent; width: 100%; padding: 0px 15px; font-size: 1.6rem;  color: #222; line-height: 1;  border: 0;  border-radius: 0;  height: 38px;  -webkit-appearance: none; box-sizing: border-box;  position: absolute; }
/* textarea */
.contactform-box textarea{ font-size: inherit; resize:none; width: 500px; height:40px; min-height:40px; line-height: 40px; border-radius: 15px; border: 1px solid #cfcfcf; box-sizing: border-box; padding: 0px 15px 15px; transition:all .6s; overflow: hidden; }
.contactform-box textarea:focus{ border-color:#0e9f7f; }
.contactform-box textarea:focus{ resize:vertical; height:10em; min-height:10em;  }
/* btn */
.contactform_btn{ display: flex; justify-content: center; align-items: center; width: 140px; height: 40px; line-height: 40px; box-sizing: border-box; border-radius: 20px; border: 1px solid #7e619b; color: #7e619b; margin: 25px auto 1%; transition: all 0.6s cubic-bezier(.23,1,.32,1); }
.contactform_btn:hover{ background: rgba(126,97,155,0.7); color: #fff; }
.contactform_btn a{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 2rem;  text-align: center; letter-spacing: 3px; }
.contactform_btn a:hover{ text-decoration: none; }





}





/* $1025~1279
--------------------------------------------------------------------------------------*/
@media screen and (min-width:1025px) and (max-width:1279px){


}