@charset "UTF-8";
@import url(all.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html{overflow-y:scrol}
*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-weight: normal;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,img{display:block}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after{content:"";content:none}
q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:focus{outline:none}
img{-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}html{overflow-y:scrol}

@media screen and (min-width:1200px){
	html.custom-scroll{overflow-y:scroll!important;}
	html.custom-scroll::-webkit-scrollbar{width:8px;border:none;-webkit-box-shadow:none;box-shadow:none; }
	html.custom-scroll::-webkit-scrollbar-track{background:#fcfcfc;}
	html.custom-scroll::-webkit-scrollbar-thumb{background:#8b8b8b;border-radius: 10px;}
	html.custom-scroll::-webkit-scrollbar-thumb:hover{background:#000;}
	html.custom-scroll.black::-webkit-scrollbar-track{background:#1c1c1c;}
	html.custom-scroll.black::-webkit-scrollbar-thumb:hover{background:#3e3f38;}
	html.custom-scroll::-webkit-scrollbar-thumb:hover{background:#636363;}
}

body{font-family: "Montserrat", "Noto Sans TC", sans-serif;font-size:13px;line-height:1.8em;color:#111;margin: 0; padding: 0;}
a{text-decoration:none;color:#000}
a:hover{color:#333}
.wrapper{overflow:hidden}
.header{position:fixed;top:0;left:0;width:100%;z-index:100;transition:background .6s,border-bottom .6s}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:20px 5vw 15px;}
.header.is-fixed{background:#fff;border-bottom:1px solid #ccc}
.logo{position:relative;height:22px;z-index:1}
.logo img,.logo svg{height:100%;width:auto;display:block;filter:none;transition:filter .6s}
.is-fixed .logo img,.is-fixed .logo svg{filter:none}
.menu{display:flex;gap:40px}
.menu-item{position:relative}
.menu-item a{position:relative;display:block;font-size:13px;color:#333}
.menu-item a .en{position:relative;display:block}
.menu-item a .tw{position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;opacity:0}
.menu-item a .en,.menu-item a .tw{transition:opacity .6s}
.menu-item a .en::after,.menu-item a .tw::after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:1px;background:#ccc;transition:width .6s ease}
.menu-item a:hover .tw{opacity:1}
.menu-item a:hover .tw::after{width:100%}
.menu-item a:hover .en{opacity:0}
.is-fixed .menu-item a{color:#333}
.is-fixed .menu-item a:hover{color:#000}

.menu-item.has-sub a{padding-right:20px}
.menu-item.has-sub a .tw{transform:translateX(-50%) translateX(-10px)}
.menu-item.has-sub a .arrow{position:absolute;right:0;top:50%;transform:translateY(-75%) rotate(45deg);width:6px;height:6px;border-right:1px solid #000;border-bottom:1px solid #000;transition:border-color .6s}
.is-fixed .menu-item.has-sub a .arrow{border-color:#333}
.is-fixed .menu-item.has-sub a:hover .arrow{border-color:#000}

.submenu{background:#fff;min-width:180px;padding:10px 0;z-index:10;box-shadow:0 5px 10px rgba(0,0,0,.1);display:none}
.submenu-wrapper{position:absolute;top:100%;left:50%;transform:translateX(-50%)}
.submenu-wrapper .hover-buffer{height:12px;background:rgba(0,0,0,0)}
.submenu a{position:relative;display:block;padding:10px 20px;font-size:13px;white-space:nowrap;text-align:center;transition:background .6s}
.has-sub .submenu a .tw{top:50%;transform:translate(-50%, -50%)}
.has-sub .submenu a .tw:after,.has-sub .submenu a .en:after{content:none}
.submenu a:hover,.submenu a.active{background:#f2f2f2}

.hamburger{position:fixed;right:5vw;top:27px;width:25px;cursor:pointer;display:none}
.hamburger-bar{height:1px;background:#999;margin:6px 0;transition:transform .6s}
.show-nav .hamburger-bar{background:#000}
.show-nav .hamburger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.show-nav .hamburger-bar:nth-child(2){transform:scale(0)}
.show-nav .hamburger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.top{width:100%;height:65vh;position:relative;overflow:hidden}
.top-img{position:absolute;top:0;width:100%;height:100%}
.top-img img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.top-img:after{content:"";position:absolute;top:0;width:100%;height:100%;background:#000;opacity:.1}

.container{padding:6vw 0;background:#f2f2f2}
.section{padding:6vw 0}
.inner{max-width:1600px;padding:0 5vw;margin:0 auto}

.pagetitle{color:#fff;font-size:44px;font-weight:normal;position:absolute;bottom:40px;right:0vw;left:5vw;z-index:5}
.pagetitle .en{display:block;width:-moz-fit-content;width:fit-content;font-family: "Times New Roman", "Noto Sans TC","微軟正黑體",sans-serif;}
.pagetitle .en::after{content:"";width:150%;margin:5px -25%;display:block}

.title{font-size:1.5rem;color:#000;font-weight:normal;margin-bottom:40px}
.title .tw{font-size:1rem}
.subtitle{font-size:1.25rem;color:#000;font-weight:normal;margin-bottom:20px}
.text{font-size:.875rem;margin-top:20px}
.text.tw,.text .tw{color:#333}
.text.en,.text .en{color:#888;font-size:.75rem}
.text{color:#bb9a73}
.subtext{font-size:.75rem;color:#888;margin-top:10px}

.scroll-down{position:absolute;left:50%;bottom:40px;width:20px;height:40px;border-radius:10px;border:1px solid #fff;transform:translateX(-50%);z-index:5;cursor:pointer}
.scroll-down:after{content:"";width:2px;height:10px;background:#fff;border-radius:1px;display:block;margin:10px auto 0;animation:scroll-down 1.2s infinite linear}

.scroll-up{position:fixed;right:calc(5vw*.5 + 18px);bottom:230px;font-size:.75rem;z-index:9;cursor:pointer;display:none}
.scroll-up-text{transform-origin:right bottom;transform:rotate(90deg);background:#f5f5f5;padding:2px 5px;transition:letter-spacing .3s}
.scroll-up-text:before{content:"";border-right:#333 solid 5px;border-top:rgba(0,0,0,0) solid 3px;border-bottom:rgba(0,0,0,0) solid 3px;display:inline-block;vertical-align:middle;margin-right:5px}
.scroll-up:hover .scroll-up-text{background:#d45f3e;border-color:#d45f3e;color:#fff;letter-spacing:3px}
.scroll-up:hover .scroll-up-text:before{border-right-color:#fff}

@media only screen and (max-width: 1600px) {
.scroll-up{position:fixed;right:calc(5vw*.5 + 30px);}
}

@media only screen and (max-width: 1280px) {
.scroll-up{position:fixed;right:calc(5vw*.5 + 35px);}
}

@keyframes scroll-down{
	0%{margin:10px auto 0;height:0}
	25%{margin:10px auto 0;height:10px}
	75%{margin:20px auto 0;height:10px}
	99.9%{margin:30px auto 0;height:0px}
	100%{margin:10px auto 0;height:0}
}

.loading{position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;z-index:200}
.loading-logo{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);clip-path:inset(0 100% 0 0);transition:clip-path .2s linear}
.loading-logo-bg{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);opacity:.2}
.loading-logo img, .loading-logo-bg{width: 200px;height: auto;}
@media screen and (max-width: 980px) {
.loading-logo img, .loading-logo-bg{width: 150px;height: auto;}
}

.fadeIn{opacity:0;transition:opacity 1s}
.fadeIn.show{opacity:1}
.fadeUp{opacity:0;transform:translateY(20px);transition:opacity 1.5s,transform 1.5s}
.fadeUp.show{opacity:1;transform:translateY(0px)}
.fadeDown{opacity:0;transform:translateY(-20px);transition:opacity 1.5s,transform 1.5s}
.fadeDown.show{opacity:1;transform:translateY(0px)}
.fadeLeft{opacity:0;transform:translateX(20px);transition:opacity 1.5s,transform 1.5s}
.fadeLeft.show{opacity:1;transform:translateX(0px)}
.clipLeft{clip-path:polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)}
.clipRight{clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)}
.clipUp{clip-path:polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)}
.clipDown{clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)}
.clipLeft,.clipRight,.clipUp,.clipDown{transition:clip-path 1s}
.clipLeft.show,.clipRight.show,.clipUp.show,.clipDown.show{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}
.show.delay-1{transition-delay:.2s}
.show.delay-2{transition-delay:.4s}
.show.delay-3{transition-delay:.6s}

@keyframes scroll-down{
	0%{margin:10px auto 0;height:0}
	25%{margin:10px auto 0;height:10px}
	75%{margin:20px auto 0;height:10px}
	99.9%{margin:30px auto 0;height:0px}
	100%{margin:10px auto 0;height:0}
}

.loading{position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;z-index:200}
.loading-logo{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);clip-path:inset(0 100% 0 0);transition:clip-path .2s linear}
.loading-logo-bg{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);opacity:.2}

.fadeIn{opacity:0;transition:opacity 1s}
.fadeIn.show{opacity:1}
.fadeUp{opacity:0;transform:translateY(20px);transition:opacity 1.5s,transform 1.5s}
.fadeUp.show{opacity:1;transform:translateY(0px)}
.fadeDown{opacity:0;transform:translateY(-20px);transition:opacity 1.5s,transform 1.5s}
.fadeDown.show{opacity:1;transform:translateY(0px)}
.fadeLeft{opacity:0;transform:translateX(20px);transition:opacity 1.5s,transform 1.5s}
.fadeLeft.show{opacity:1;transform:translateX(0px)}

.clipLeft{clip-path:polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)}
.clipRight{clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)}
.clipUp{clip-path:polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)}
.clipDown{clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)}
.clipLeft,.clipRight,.clipUp,.clipDown{transition:clip-path 1s}
.clipLeft.show,.clipRight.show,.clipUp.show,.clipDown.show{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}

.show.delay-1{transition-delay:.2s}
.show.delay-2{transition-delay:.4s}
.show.delay-3{transition-delay:.6s}

@media screen and (max-width: 980px){.header{z-index:300;}
.logo{z-index:301;}
.hamburger-bar{height:1px;background:#000;margin:6px 0;transition:transform .6s}
.is-fixed .hamburger-bar{background:#000;}
.show-nav .hamburger-bar{background:#000}
.menu{position:fixed;top:0;right:0;left:auto;width:100vw;min-width:0;height:100vh;padding:160px 0 20px;background:#fff;flex-direction:column;gap:0;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;transform:translateX(100%);transition:transform .6s ease;box-shadow:-8px 0 20px rgba(0,0,0,.08);z-index:299;text-align:center;font-family: "Times","Arial",sans-serif;}
.show-nav .menu{transform:translateX(0);}
.menu-item{position:relative;}
.menu-item a{padding:30px 11% 0;background:#fff;color:#000}
.menu-item a .tw:after,.menu-item a .en:after{content:none;}
.menu-item a .tw{left:5vw;transform:none;}
.menu-item.has-sub a{padding-right:calc(5vw + 48px);}
.menu-item.has-sub a .arrow{right:calc(41vw + 18.5px);border-color:#000;margin-top:15px;}
.menu-item.has-sub.is-open > a .arrow{transform:translateY(-25%) rotate(225deg);}
.menu-item.has-sub a .tw{transform:none;}
.submenu{padding:10px 0 10px 5vw;box-shadow:none;background:#fff;}
.submenu-wrapper{position:static;transform:none;margin-top:-1px;}
.submenu-wrapper .hover-buffer{height:0;}
.submenu a{padding:10px 50px;border-bottom:none;text-align:center;}
.submenu a .tw{left:20px;}
.has-sub .submenu a .tw{top:10px;left:-19px;}
.submenu a:hover,.submenu a.active{background:none;}
.submenu a:hover:before,.submenu a.active:before{border-color:#999;}
.hamburger{display:block;z-index:302;}
.menu-item a .tw{position:absolute;left:0;top:32px;transform:translateX(0);white-space:nowrap;opacity:0;width: 100%;text-align: center;}
.menu-item.has-sub a .tw{transform:translateX(0) translateX(0);text-align:center;padding-top:0px;}
}
@media screen and (max-width: 640px){
	html,body{font-size:14px}
	.logo{height:35px}
	.menu{padding-top:120px}
	.hamburger{top:22px}
	.container{padding:50px 0}
	.section{padding:50px 0}
	.title{margin-bottom:20px}
.menu-item a{padding:30px 16.5% 0;background:#fff;}
.submenu a{padding:10px 50px;border-bottom:none;text-align:center;}
.has-sub .submenu a .tw{left:-10px;}
.menu-item.has-sub a .arrow{right:calc(35vw + 8.5px);margin-top:16px;}
}

@media screen and (max-width: 1280px) {
.pagetitle{font-size:42px;}
.top{height:89vh;}
.menu-item a{font-size:15px;}
.submenu a{font-size:15px;}
}
@media screen and (max-width: 980px) {
.header{position:fixed;top:0;left:0;width:100%;height:70px;z-index:300;}
.header-inner{height:70px;padding:0 5vw;display:flex;align-items:center;}
.hamburger{position:fixed;right:5vw;top:22px;display:block;z-index:302;}
.pagetitle{font-size:36px;}
.top{height:70vh;}
}
@media screen and (max-width: 767px) {
.logo{height:17px;}
.pagetitle{font-size:24px;bottom:30px;}
.top{height:86vh;}
}
/*footer*/	
.footer{background:#282828;text-align: center;}
.footer-row{float:left;position:relative;width:100%; line-height:1.8em; color:#b3b3b3;background:#282828;}
.footer-row a {transition:500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;color:#b3b3b3;text-decoration: none;}
.footer-row a:hover{color: #fff;}
.footer-content{width:88%;margin:0 auto; padding:60px 0 50px; position:relative;}
.footer-title{width:100%;float:left;font-size:16px;position: relative;letter-spacing: 0.1em;margin-bottom: 45px}
.footer-title::after{  content: '';position: absolute; top:35px;left: 50%;margin-left: -1px; width: 1px;height: 20px; background-color: #999;}
.ftright{width:100%; float:left;}
.address{width:100%;float:left;margin-bottom: 20px;font-weight: 300;letter-spacing: 0.1em}
  .address ul{list-style-type:none; margin:0;}
  .address li{font-size:14px;line-height: 2.1em;}
  .address li a{font-weight: 300;}
.footer-social {width:100%;float:left;margin-bottom: 30px}
.footer-social a {display: inline-block;width:auto; line-height: 34px;margin:0 12px;font-size:16px; transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms; text-align:center; }
.footer-social a:hover { color:#fff; }
/*-- GILEs --*/
.miDownR{float:left;width:100%; margin:0; padding:0;font-size: 11px;text-align:center;line-height:20px; color:#b3b3b3;}
.GileLink a {font-size: 11px; color:#b3b3b3;text-decoration: none;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;margin-left: 10px}
.GileLink a:hover {font-size:11px; color: #666;text-decoration: none;}
@media only screen and (max-width: 1280px) {
.footer-content{padding:50px 0 40px;}
}
@media only screen and (max-width: 767px) {
.footer-content{padding:40px 0 30px;}	
.footer-social {margin-bottom: 15px}
.address{margin-bottom:15px;}
}

.clearfix:after{content: "";display: block;line-height: 0;clear: both;}
.clear{clear:both;overflow:hidden;height:0;font-size:0;display:block}

.siteway{width:100%;float: left;padding: 0 5%;margin:15px 0 0;color: #888;letter-spacing: 0.1em}
.siteway h1{float:left; line-height:1.5em;margin:0;font-size:12px;color: #888;}
.siteway h2{float:left; line-height:1.5em;margin:0;font-size:12px; }
.siteway h3{float:left; line-height:1.5em;font-size:12px;} 
.siteway h4{float:left; margin:0;line-height:1.5em;font-size:12px;} 
.siteway a{color: #888;transition:500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;text-decoration: none;}
.siteway a:hover {color: #231815;}
.siteway i{font-size:10px; margin:0 5px 0 0; padding-bottom: 2px; vertical-align: middle;}
.siteway span{ font-weight:600; font-size: 10px; margin-top: -5px; vertical-align:top}
.siteway span i{color: #888;margin:0 5px}

.siteway-inner{width:100%;float: left;padding: 0 5%;margin:79px 0 0;color: #888;letter-spacing: 0.1em}
.siteway-inner h1{float:left; line-height:1.5em;margin:0;font-size:12px;color: #888;}
.siteway-inner h2{float:left; line-height:1.5em;margin:0;font-size:12px; }
.siteway-inner h3{float:left; line-height:1.5em;font-size:12px;} 
.siteway-inner h4{float:left; margin:0;line-height:1.5em;font-size:12px;} 
.siteway-inner a{color: #888;transition:500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;text-decoration: none;}
.siteway-inner a:hover {color: #231815;}
.siteway-inner i{font-size:10px; margin:0 5px 0 0; padding-bottom: 2px; vertical-align: middle;}
.siteway-inner span{ font-weight:600; font-size: 10px; margin-top: -5px; vertical-align:top}
.siteway-inner span i{color: #888;margin:0 5px}
@media only screen and (max-width: 1200px) {
.siteway-inner{margin:69px 0 0;}
.siteway span{margin-top: 0; vertical-align:middle;}
.siteway-inner span{margin-top: 0; vertical-align:middle;}		
}