@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;700;900&display=swap');
@import url(../fonts/style.css);
@import url("https://use.typekit.net/qjc4wzl.css");
/*
  danny 20230104
  1. $Reset
  2. $font
  3. $body,html
  4. $共用
  5. $Mobile
  6. $Pad
  7. $橫的版型
  8. $Pc
  9. $1025~1279
  
  update
  . reset
  . import Noto Sans TC、icomoon
  . before after preset icomoon
  . body font-size 10px
*/

/* $Reset
--------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{margin:0;padding:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}ol,ul{list-style:none}q:before,q:after{content:''}abbr,acronym{border:0}a{background:transparent;text-decoration:none;color:inherit;cursor:pointer;line-height:1em;display:inline-block}a:active{outline:0}input,textarea,button,select,option{border:0;margin:0;outline:none;padding:0;font-size:1.6rem;font-family:'Noto Sans TC','Open Sans','Arial','Microsoft JhengHei','Apple LiGothic Medium',sans-serif;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none}select::-ms-expand{display:none}input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc}





/* $font
--------------------------------------------------------------------------------------*/
:before ,:after{ font-family:'icomoon','Microsoft JhengHei','Apple LiGothic Medium';}





/* $body,html
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; height: 100%; font-family:'Microsoft JhengHei','Apple LiGothic Medium', Arial, Helvetica, sans-serif; font-size:10px; background: #6cbab4; }

/* kv */
.kv-box{ height: 580px; background: #F8F4DD; position: relative; overflow: hidden; }
.kv-box .bg.pc{ display: none; }
.kv-box .bg.mobile{ width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.kv-box .kv-img{ width: 90vw;  position: absolute; left: 50%; top: 30%; transform: translate(-50%,-46%);  }
.kv-box .kv-img>img{ width: 100%; max-height: 630px;}
.kv-box .kv-img.mobile>img{ width: 100%; max-height: 630px;}
.kv-box .pc{ display: none; }
.kv-box .mobile{ display: block }
.header-box{ width: 100%; height: 60px; background: #fff; display: flex; justify-content: space-between; align-items: center; position: fixed; left: 0; top: 0; box-sizing: border-box; padding: 0 2vw; background: rgba(255,255,255,0.95); z-index: 2;  }
.header-box.active{ width: 100vw; height: 100vh; flex-direction: column; justify-content: center; align-items: center;  }
.header-box .menu{ display: flex; flex-direction: column; gap: 30px 0; font-size: 2rem; font-weight: bold; color: #57412a; margin: 30px 0 0 0; display: none;  }
.header-box.active .menu{ display: flex;   }
.header-box .menu>li{ display: flex; align-items: center; cursor: pointer; }
.header-box .menu>li:before{ content: ''; width: 12px; height: 12px; border-radius: 100%; box-sizing: border-box; border: 3px solid #8DC642; margin: 0 5px 0 5px; }
.kv-box .logo>a, .kv-box .logo img{ width: 100%; line-height: 0; }
/* hamburger-box */
.hamburger-box{ width: 24px; height: 20px; position: fixed; cursor: pointer; right: 3vw; top: 5vw; z-index: 2;  }
.hamburger-box li{ width: 100%; height: 2px; background: #137F62; position: absolute; transition:all .3s cubic-bezier(0.39, 0.575, 0.565, 1); }
.hamburger-box li:nth-child(1){ top: 0; }
.hamburger-box li:nth-child(2){ top: 8.5px;  }
.hamburger-box li:nth-child(3){ bottom: 0; }
.hamburger-box.active>li:nth-child(1){ transform:rotate(45deg); top:50%; }
.hamburger-box.active>li:nth-child(2){ opacity:0; }
.hamburger-box.active>li:nth-child(3){ transform:rotate(-45deg); top:50%; }

.top-ad { width: 100%; height: 80px; background: linear-gradient(to right, #FEDF88, #FFCDA2); display: flex; justify-content: center; align-items: center; margin-top: 60px; padding: 5px 10px; box-sizing: border-box; }
.top-ad a,
.top-ad picture,
.top-ad img { height: 100%; width: 100%; }
.top-ad img { object-fit: contain; }

/* common */
.common-box{ width: 100%; box-sizing: border-box; padding: 0 20px 0 20px; margin: 50px auto 0 auto; }
/* .common-box>.tit{ display: flex; justify-content: center; align-items: center; margin: 0 auto 10px auto; width: 90vw; } */
.common-box>.tit{ font-size: 2.4rem; font-weight: bold; color: #ffe969; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto 10px auto; width: fit-content;  }
.common-box>.tit:before{ content: ''; width: 120%; height: 2px; background: #ffe969; margin: 0 0 10px 0;  }
.common-box>.tit:after{ content: ''; width: 120%; height: 2px; background: #ffe969; margin: 10px 0 20px 0;  }
.common-box>.tit img{ width: 100%; }
.common-box .subtit{ font-size: 2rem; font-weight: bold; color: #EE6E00; text-align: center; display: flex; justify-content: center; align-items: center;}
.common-box .subtit:before{ content: ''; width: 9px; height: 9px; border-radius: 100%; border: 3px solid #8DC642; margin: 0 10px 0 0; }
.common-box .subtit:after{ content: ''; width: 9px; height: 9px; border-radius: 100%; border: 3px solid #8DC642; margin: 0 0 0 10px; }
/* whtie box */
.common-box .white-box{ width: 100%; border-radius: 15px; background: #fff; box-sizing: border-box; padding: 30px 15px 30px 15px; box-shadow: 2px 2px 0px 2px #d0ccb9; }
/* passport */
.common-box .passport-list{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 30px 0 0 0; }
.common-box .passport-list>li{ width: 80vw; height: 80vw; border-radius: 100%; background: #F8F4DD; box-sizing: border-box; padding: 20px 30px 20px 30px; display: flex; flex-direction: column; justify-content: center; align-items: center;  }
.common-box .passport-list>li>.img-box{ margin: 0 0 10px 0; }
.common-box .passport-list>li+li{ margin: 15px 0 0 0; }
.common-box .passport-list .txt-box{ font-size: 1.6rem; line-height: 1.58; color: #231815; text-align: center;  }
.common-box .passport-list .txt-box>.tit{ font-weight: bold; }
/* step */
.common-box .step-box{ box-sizing: border-box; padding: 30px 10px 20px 10px; background: #fff; border-radius: 30px; margin: 0 0 30px 0; }
.common-box .step-list{ display: flex; align-items: center; flex-direction: column; flex-wrap: wrap; margin:0px 0 0 0; border-radius: 30px; background: #fff; box-sizing: border-box; padding: 10px 20px 10px 20px; }
.common-box .step-list>li{ width: 85%; margin: 0 0 30px 0; }
.common-box .step-list>li.arrow{ width: auto; }
.common-box .step-list>li.arrow:after{ content: '\e98c'; font-size: 5rem; color: #137f62; }
.common-box .step-list .img-box>img{ width: 100%; }
.common-box .step-list .txt-box{ font-size: 1.6rem; line-height: 1.58; color: #aa8250; margin: 10px 0 0 0; }
.common-box .step-tit{ display: flex; align-items: center; font-size: 2rem; font-weight: bold; color: #EE6E00; }
.common-box .step-tit:before{ content: ''; width: 50px; height: 50px; border-radius: 100%; background: #ffeebe; margin: 0 -30px 0 0;  }
.common-box .step-list .txt-box a{ text-decoration: underline; font-weight: bold; color: #ff9123; }
.common-box .info-img{ display: flex; justify-content: center; align-items: center; width: 90vw; margin: 0 auto; }
.common-box .info-img img{ width: 100%; }
.common-box .slick-slide img{ width: 100%; }
.common-box .slick-dots{ display: flex; justify-content: center; align-items: center; margin: 10px 0 0 0; }
.common-box .slick-dots li{ width: 15px; height: 15px; border-radius: 100%; background: #137F62; opacity: 0.3; text-indent: -9999px; }
.common-box .slick-dots li.slick-active{ opacity: 1; }
.common-box .slick-dots li+li{ margin: 0 0 0 10px; }
.common-box .hasslick .txt-box{ margin: 5px 0 0 0; }
.common-box .pic-info { width: 95%; height: 250px; margin: 20px auto; display: block; } 
/* video */
.common-box .video-box{ width: 100%; height: 0; border-radius: 15px; padding-bottom: 56.25%; position: relative; overflow: hidden; box-shadow: 3px 3px 0px 3px #d6d3a5; }
.common-box .video-box iframe{ width:100%; height:100%; position:absolute; left:0; top:0; }
/* qa */
.common-box .qa-list>li{ transition: all .4s cubic-bezier(.4,0,.2,1); }
.common-box .qa-list>li+li{ margin: 15px 0 0 0; }
.common-box .qa-list .q-txt{ font-size: 2rem; font-weight: bold; line-height: 1.58; color: #137F62; cursor: pointer; transition: all .4s cubic-bezier(.4,0,.2,1);  }
.common-box .qa-list .q-txt:hover{ color: #EE6E00; }
.common-box .qa-list>li.active .q-txt:after{ content: ''; display: block; border-bottom: 5px dotted #F2DA4D; margin: 20px 0 20px 0; }
.common-box .qa-list .a-txt{ font-size: 1.6rem; line-height: 1.58; color: #956B36; display: none; }
.common-box .qa-list>li.active .a-txt{ display: block; }
.common-box .qa-list .qa-flex{ display: flex; flex-direction: column; font-size: 1.6rem; line-height: 1.58; color: #aa8250; }
.common-box .qa-list .qa-flex .col-1,.common-box .qa-list .qa-flex .col-2{ width: 100%; margin: 0 0 10px 0; }
.common-box .qa-list .qa-flex img{ width: 100%; }
.common-box .qa-list .qa-flex .tit{ font-weight: bold; }
.common-box .qa-list .qa-flex .note{ color: #E40819; }
.common-box .qa-list .qa-flex .img-box{ width: 100%; margin: 10px 0 0 0; }
/* note */
.common-box .note-list{ font-size: 1.6rem; line-height: 1.58; color: #231815; list-style: decimal; margin: 0 0 0 25px; }
.common-box .note-list a{ color: #956B36; text-decoration: underline; }
/* info */
.common-box .info-txt{ font-size: 1.6rem; color: #231815; line-height: 1.58; text-align: center; margin: 0 0 20px 0; }

/* footer */
footer{ height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1.3rem; line-height: 1.58; color: #231815; background: #137F62; margin: 120px 0 0 0; box-sizing: border-box; padding: 0 10px 0 10px; text-align: center;  }

/* gototop */
.gototop{ position: fixed; right: 5px; bottom: 30px; font-size:4rem; color: #ffeebe; transition: all .4s cubic-bezier(.4,0,.2,1); cursor: pointer; display: none; }
.gototop:hover{ color: #ff9123; }
.btn-gonow { width: 40px; position: fixed; right: 5px; bottom: 80px; opacity: 0.8; }
.btn-gonow img { width: 100%; }
.btn-gonow:hover{ bottom: 90px; }

/* pup */
.pup-box{ display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: rgba(0, 0, 0, .9); position: fixed; left: 0; top: 0; display: none; }
.pup-box .pup-video{ width: 80vw; position: relative; display: flex;  }
.pup-box .pup-video video{ width: 100%; border: 3px solid #AA8250; }
.pup-box .pup-video .close{ position: absolute; right: 0px; top: -38px; color: #fff; font-size: 3rem; cursor: pointer; transition: all .2s cubic-bezier(.4,0,.2,1); }
.pup-box .pup-video .close:hover{ color: #ff9123; }


/* font style */
.font--bold{ font-weight: bold; }

.maintain { width: 100vw; height: 100vh; font-size: 2.4rem; font-weight: bold; color: #6a5439; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.maintain img { width: 90%; max-width: 320px; margin:-40px 0 40px; }


/* $共用
--------------------------------------------------------------------------------------*/
/*----清除浮動技巧----*/
.clearfix:before,.clearfix:after {content: ' ';display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
/*----清除浮動技巧----*/

/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}

/* float */
.floatL{ float: left;}
.floatR{ float: right;}

/* button reset、input reset、select reset */
button, input, select{ font-family:'Microsoft JhengHei','Apple LiGothic Medium', Arial, Helvetica, sans-serif; border: none; }

/* font style */
.bold{ font-weight: bold; }


/* $Mobile
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; -webkit-text-size-adjust:none; }






/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){
/* hamburger-box */
.kv-box{ height: 620px;  }
.hamburger-box{ top: 3vw;  }

}





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


}





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

html,body{ min-width: 100%;  }

/* kv */
.kv-box{ width: 100%; height: 600px; position: relative; overflow: hidden; }
.kv-box .bg.pc{ width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; }
.kv-box .bg.mobile{ display: none; }
.kv-box .kv-img{ width: 50vw; max-width: 690px;  position: absolute; left: 50%; top: 55%; transform: translate(-50%,-50%);  }
.kv-box .kv-img>img{ width: 100%; max-height: 500px;}
.kv-box .pc{ display: block; }
.kv-box .mobile{ display: none; }
.header-box{ width: 100%; height: 70px; display: flex; justify-content: space-between; align-items: center; position: fixed; left: 0; top: 0; box-sizing: border-box; padding: 0 2vw;  }
.header-box .menu{ display: flex; flex-direction: row; gap: 0 10px; font-size: 1.8rem; font-weight: bold; margin: 0; }
.header-box .menu>li{ display: flex; align-items: center; cursor: pointer; }
.header-box .menu>li:before{ content: ''; width: 12px; height: 12px; border-radius: 100%; box-sizing: border-box; margin: 0 5px 0 5px; }
.kv-box .logo{ width: auto;  }
.kv-box .logo>a, .kv-box .logo img{ width: 100%; line-height: 0; }
/* hamburger-box */
.hamburger-box{ display: none; }

.top-ad { height: 60px; margin-top: 70px; }

/* common */
.common-box{ width: 100%; max-width: 1200px; box-sizing: border-box; padding: 0 20px 0 20px; margin: 40px auto; }
.common-box>.tit{ font-size: 3.6rem; font-weight: bold; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto 10px auto; width: fit-content;  }
.common-box>.tit:before{ content: ''; width: 120%; height: 2px; margin: 0 0 10px 0;  }
.common-box>.tit:after{ content: ''; width: 120%; height: 2px; margin: 10px 0 20px 0;  }
.common-box>.tit img{ width: auto; }
.common-box .subtit{ font-size: 3rem; font-weight: bold; text-align: center; display: flex; justify-content: center; align-items: center; }
.common-box .subtit:before{ content: ''; width: 9px; height: 9px; border-radius: 100%; margin: 0 10px 0 0; }
.common-box .subtit:after{ content: ''; width: 9px; height: 9px; border-radius: 100%; margin: 0 0 0 10px; }
/* whtie box */
.common-box .white-box{ width: 100%; border-radius: 30px; box-sizing: border-box; padding: 30px 30px 30px 30px; }
/* passport */
.common-box .passport-list{ display: flex; flex-direction: row; justify-content: center; align-items: center; margin: 30px 0 0 0; }
.common-box .passport-list>li{ width: 310px; height: 310px; border-radius: 100%; box-sizing: border-box; padding: 20px 40px 30px 40px; display: flex; flex-direction: column; justify-content: center; align-items: center;  }
.common-box .passport-list>li>.img-box{ margin: 0 0 10px 0; }
.common-box .passport-list>li+li{ margin: 0 0 0 30px; }
.common-box .passport-list .txt-box{ font-size: 1.8rem; line-height: 1.58; text-align: center;  }
.common-box .passport-list .txt-box>.tit{ font-weight: bold; }
/* step */
.common-box .step-box{ box-sizing: border-box; padding: 40px 10px 30px 10px; border-radius: 30px; margin: 0 0 60px 0; }
.common-box .step-list{ display: flex; flex-direction: row; gap:60px 1.33%; flex-wrap: wrap; margin: 20px 0 0 0; justify-content: center; align-items: start;  }
.common-box .step-list.hasarrow{ align-items: center; }
.common-box .step-list>li{ width: 24%; max-width: 265px; }
.common-box .step-list>li.arrow{ width: auto; }
.common-box .step-list>li.arrow:after{ content: '\e98b'; font-size: 5rem; }
.common-box .step-list .img-box>img{ width: 100%; }
.common-box .step-list .txt-box{ font-size: 1.8rem; line-height: 1.58; margin: 30px 0 0 0; }
.common-box .step-tit{ display: flex; align-items: center; font-size: 2.4rem; font-weight: bold; }
.common-box .step-tit:before{ content: ''; width: 50px; height: 50px; border-radius: 100%; margin: 0 -30px 0 0;  }
.common-box .step-list .txt-box a{ text-decoration: underline; font-weight: bold; }
.common-box .info-img{ display: flex; justify-content: center; align-items: center; width: auto; }
.common-box .info-img img{  width: auto; }
.common-box .slick-slide img{ width: 100%; }
.common-box .slick-dots{ display: flex; justify-content: center; align-items: center; margin: 10px 0 0 0; }
.common-box .slick-dots li{ width: 15px; height: 15px; border-radius: 100%; opacity: 0.3; text-indent: -9999px; }
.common-box .slick-dots li.slick-active{ opacity: 1; }
.common-box .slick-dots li+li{ margin: 0 0 0 10px; }
.common-box .hasslick .txt-box{ margin: 5px 0 0 0; }
/* video */
.common-box .video-box{ width: 100%; height: 0; border-radius: 30px; padding-bottom: 56.25%; position: relative; overflow: hidden; }
.common-box .video-box iframe{ width:100%; height:100%; position:absolute; left:0; top:0; }
/* qa */
.common-box .qa-list>li{ transition: all .4s cubic-bezier(.4,0,.2,1); }
.common-box .qa-list>li+li{ margin: 15px 0 0 0; }
.common-box .qa-list .q-txt{ font-size: 2.4rem; font-weight: bold; line-height: 1.58; cursor: pointer;  }
.common-box .qa-list>li.active .q-txt:after{ content: ''; display: block; margin: 20px 0 20px 0; }
.common-box .qa-list .a-txt{ font-size: 1.8rem; line-height: 1.58; display: none; }
.common-box .qa-list>li.active .a-txt{ display: block; }
.common-box .qa-list .qa-flex{ display: flex; flex-direction: row; justify-content: space-between; font-size: 1.8rem; line-height: 1.58; }
.common-box .qa-list .qa-flex .col-1,.common-box .qa-list .qa-flex .col-2{ width: 49%; }
.common-box .qa-list .qa-flex .tit{ font-weight: bold; }
.common-box .qa-list .qa-flex .img-box{ width: 100%; margin: 10px 0 0 0; }
/* note */
.common-box .note-list{ font-size: 1.8rem; line-height: 1.58; list-style: decimal; margin: 0 0 0 25px; }
/* info */
.common-box .info-txt{ font-size: 2rem; line-height: 1.58; text-align: center; margin: 0 0 20px 0; }

/* footer */
footer{ height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1.6rem; line-height: 1.58; margin: 60px 0 0 0;  }

/* gototop */
.gototop{ position: fixed; right: 20px; bottom: 60px; font-size: 5rem; transition: all .4s cubic-bezier(.4,0,.2,1); cursor: pointer; display: none; }
.btn-gonow { width: 50px; position: fixed; right: 20px; bottom: 120px; opacity: 1; }
.btn-gonow:hover{ bottom: 135px; }


/* pup */
.pup-box{ display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: rgba(0, 0, 0, .9); position: fixed; left: 0; top: 0; display: none; }
.pup-box .pup-video{ width: 370px; position: relative; display: flex;  }
.pup-box .pup-video video{ width: 300px; }
.pup-box .pup-video .close{ position: absolute; right: 5px; top: 5px; color: #fff; font-size: 4rem; cursor: pointer; transition: all .2s cubic-bezier(.4,0,.2,1); }
.pup-box .pup-video .close:hover{ color: #ff9123; }



 


}





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


}