@charset "utf-8";
/*
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Serif+TC:wght@400;700&display=swap');
@import url('icofont/icofont.min.css');
@import url('animate-custom.css');
*/
/*============reset===============*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td, iframe, figure, figcaption { margin: 0; padding: 0; font-size: 100%; }
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video, main { display: block; }
table, table td { border-collapse: collapse; border-spacing: 0; border: none; }
fieldset, img { border: 0; vertical-align: bottom; }
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: inherit; font-weight: inherit; }
a, del, ins { text-decoration: none; }
ol, li { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
abbr, acronym { border: 0; font-variant: normal; }
sup, sub { vertical-align: baseline; }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0; border: 0; }
img {/*image-rendering:-webkit-optimize-contrast;*/ /*fixd Chrome Img Blur*//*-webkit-backface-visibility: hidden;*/ -ms-transform: translateZ(0);-webkit-transform: translateZ(0);transform: translateZ(0);}
/*============clear===============*/
.clear { clear: both; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*============iframe===============*/
.iframe-16x9 { position: relative; padding-bottom: 56.24%; height: 0; overflow: hidden; }
.iframe-4x3 { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; }
.iframe-16x9 iframe, .iframe-4x3 iframe, .googlemap iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*==============text-ver==================*/
.text-ver, .ideal-text h1, .ideal-text p, .about-text h1, .about-text p { writing-mode: tb-rl; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; white-space: nowrap;}
.text-hor { writing-mode: lr-tb; -ms-writing-mode: lr-tb; -webkit-writing-mode: horizontal-tb; -moz-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; }
/*============grids===============*/
.grid-max, .grid-large, .grid-middle, .grid-small, .grid-max, .grid-min, .grid-content { width: 90%; margin: 0 auto; position: relative; }
.grid-max { max-width: 1600px; }
.grid-large { max-width: 1440px; }
.grid-middle { max-width:1200px; }
.grid-small { max-width: 900px; }
.grid-1-12, .grid-2-12, .grid-3-12, .grid-4-12, .grid-5-12, .grid-6-12, .grid-7-12, .grid-8-12, .grid-9-12, .grid-10-12, .grid-11-12, .grid-3-8, .grid-5-8, .grid-1-2 { float: left; display: block; position: relative; }
.grid-1-12 { width: 8.3%; }
.grid-2-12 { width: 16.6%; }
.grid-3-12 { width: 25%; }
.grid-4-12 { width: 33.3%; }
.grid-5-12 { width: 41.6%; }
.grid-6-12 { width: 50%; }
.grid-7-12 { width: 58.3%; }
.grid-8-12 { width: 66.6%; }
.grid-9-12 { width: 75%; }
.grid-10-12 { width: 83.3%; }
.grid-11-12 { width: 91.6%; }
.grid-3-8 { width: 38%; }
.grid-5-8 { width: 62%; }
.grid-1-2 { width: 47%; }
.grid-right { float: right; }
.grid-space-right,.grid-space-left,.grid-space-right-small,.grid-space-left-small{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.grid-space-right-small{padding-right:5px;}
.grid-space-left-small{padding-left:5px;}
.grid-space-right{padding-right: 6%;}
.grid-space-left{padding-left: 6%;}
/*============style===============*/
body { font-family: "Lato", Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "儷黑 Pro", "LiHei Pro", sans-serif; font-size: 1em; /*color: #333;*/ word-wrap: break-word;}
/*.font-en, #header small, .text-en, .load-box{font-family: "Lato", Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "儷黑 Pro", "LiHei Pro", sans-serif;}
.font-text, h1, h2, h3, em{font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;}*/
p,.text0 { font-size: 1em; line-height: 2em; letter-spacing: 0.05em; }
p span, .br, h1 span, h2 span { display: inline-block; }
::selection { background: #9f8471; color: #fff; }
a { color: #9f8471;}
a:hover { color: #9f8471; }
a.button-line:before, .footer-info a:before{ position: absolute; content: ''; display: block; background-color: #D9E476; bottom:0; left:50%; width: 0px; height: 2px;}
a.button-line:hover:before, .footer-info a:hover:before{ width: 100%; left:0;}
strong { font-weight: bold; }
em, i { font-style: normal; }
big { font-size: 1.1em; }
small { font-size: 0.85em; }
h1,h2{font-weight: bold;}
h3, h4, h5, h6 { font-size: 1em; }
.title1,.title2,.title3,.title4{line-height: 1.25em;}
/*.title4{margin-bottom:3px;}*/
.title1{ font-size:3em;font-weight: bold;}
h1,.title2{ font-size:2.25em;font-weight: bold;}
.title3{ font-size:1.875em;}
h2,.title4{ font-size:1.5em;}
.title-en1{font-size:4.375em;line-height: 1em;font-weight: bold;}
.text1{font-size:1em; letter-spacing: 0.05em;line-height: 1.65em;}
.text2{font-size:0.9375em; letter-spacing: 0.05em;line-height: 1.65em;}
.nowrap{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.offscreen{position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);padding: 0 !important;border: 0 !important;height: 1px !important;width: 1px !important;overflow: hidden !important;}
.no-space{ letter-spacing: 0 !important;}
.space50{ letter-spacing:0.05em;}
.space400{ letter-spacing:0.4em;}
.space1000{ letter-spacing:1em;}
.line-height18{line-height:1.8em;}
.align-left{ float: left;}
.align-right{ float: right;}
.align-center{ margin: 0 auto;}
.text-center{text-align: center;}
.text-right{margin-right: 10px;}
.text-left{margin-left: 10px;}
.text-top{margin-top:25px;}
.text-bottom{margin-bottom:25px;}
.text-top2{margin-top:35px;}
.text-bottom2{margin-bottom:35px;}
.box-top{margin-top:60px;}
.box-bottom{ margin-bottom:60px;}
.box-top2{margin-top:80px;}
.box-bottom2{ margin-bottom:80px;}
.color-white{color: #fff !important;}
.color-black{color: #000 !important;}
.color1{color: #9f8471;}
.color2{color: #ccc;}
/*============base===============*/
body, html { height: 100%; }
.wrapper { min-height: 100%; width: 100%; position: relative;}
/*.main {+min-height: 100%; position: relative; padding-bottom: 60px; width: 100%; }
#footer { position: relative; width: 100%; margin-top: -60px; height: 60px; z-index: 5;}*/
/*============footer===============*/
.footer-copyright{position: absolute;right: 20px;bottom: 20px;font-size: 12px;}
.footer-copyright,.footer-copyright a{color: #555;}
.footer-copyright a:hover{color: #999;}
/*============main===============*/
.bg1{background: #111111; color:#ccc;}
.bg-black{background:#000; color:#ccc;}
.grid-container{position: relative; padding: 130px 0; }
.grid-section{ margin-bottom:115px;}
.grid-section2{ margin-bottom:70px;overflow: hidden;}
.grid-section2:last-child{margin-bottom:0px;}
.text-box{ position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.grid-item{ position:relative; display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} 
.flex-center-center{display: flex; align-items: center; justify-content: center;}
.flex-bottom{display: flex; align-items: flex-end;}
.item-5{width:101%;margin-bottom: -20px;}
.item-5 .grid-item{ width:19%; margin:0 1% 20px 0; float:left;}
.text-list li{padding-left: 20px;background-image: url('../images/list-icon.png'); background-repeat: no-repeat;background-size: 12px; background-position:left 10px;}

.title-line{position: relative; display: block;float: left; font-size:1.875em;line-height: 1em;font-weight: bold;color: #9f8471;margin-bottom: 20px;margin-top: 15px;clear: both;}
.title-line:before{content: ''; position: absolute;width:1440px;left: 100%;top:50%;margin-left: 15px; height: 1px;background: #e2dad4;}
.title-line+.grid-item{clear: both;}
.title-line:first-child{margin-top: 0;}
.title-num{counter-increment: category;}
.title-num h1{position: relative; padding-top: 20px; padding-left: 47px;}
.title-num h1:before {width: 40px; height: 40px;padding-top: 20px; line-height: 40px; font-size: 36px;font-weight:bold; position: absolute;top: 0; left: 0; content: counter(category,upper-latin); color: #ffffff; display: block;text-align:center;background-color: #9f8471;}

.img-box, .img-over-box { position: relative; display: block; text-align: center; overflow: hidden; }
.img-box img, .img-over-box img { width: 100%; height: auto; -ms-transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: transform 1000ms ease-out; -o-transition: transform 1000ms ease-out; -moz-transition: transform 1000ms ease-out; transition: transform 1000ms ease-out; }
.img-box img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
.img-h img, img.img-h{ height: 100%; width: auto;}
a:hover .img-box img, a.img-box:hover img, a:hover .img-over-box img, .button-in .img-over-box:hover img { -ms-transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
a .img-over-box:before, a .img-box:before{font-size: 40px;position: absolute;left: 0; top: 50%; margin-top: -20px;width: 100%; opacity: 0;z-index: 1;}
a:hover .img-over-box:before, a:hover .img-box:before{font-size: 30px;opacity: 1;}
/*==============form==================*/
form { position: relative; display: block;}
form .input-column,form .input-row,form .input-button { position: relative; display: block; line-height:0; margin-bottom:5px; width:50%; float:left; min-height: 50px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
form .input-space{padding-right:5px;}
form .input-row,form .input-button{ width:100%; clear:both;}
form .input-button{ margin-top: 20px;}
form input[type="text"], form input[type="password"], form input[type="tel"], form input[type="email"], form select, form textarea, .input-box{font-size: 16px; letter-spacing: 0.05em; height: 50px;line-height: 50px;padding: 0 15px; width: 100%; background-color:#2a2a2a; border-bottom: solid 1px transparent; color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
form textarea { height: 100px; line-height: 24px; padding-top: 8px;}
form select { line-height: 50px; padding:0;}
.input-box{line-height: 34px; padding-top: 10px;padding-left: 20px; height: auto; min-height: 215px;margin-bottom: 5px;}
form small { font-size: 16px; width: 15px; display: inline-block;text-align: center;}
form input:focus, form textarea:focus, form select:focus { border-bottom: solid 2px #9f8471;}
form input.error, form textarea.error, form select.error { border-bottom: solid 2px #cc0033; }
img.rand-img { position: absolute; right: 0px; bottom:2px; width:90px; height:48px;cursor: pointer;}
input[type="reset"], input[type="submit"],input[type="button"],input[type="file"],#submit{ display: inline-block; min-height: 20px; line-height:20px; padding:15px 0;width:170px; text-align: center; cursor: pointer;font-size: 18px;font-weight:bold; letter-spacing: 0.1em;background:#9f8471;color:#000; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
input[type="reset"]:hover, input[type="submit"]:hover, input[type="reset"]:focus, input[type="submit"]:focus,input[type="button"]:hover,#submit:hover{ /*color:#D9E476;*/}
.input-button input[type="submit"],#submit{ float: right;}
.input-button input[type="reset"]{filter: alpha(opacity=80); opacity: 0.8; width:48.5%; margin-right:1%;}
#result{text-align: center;}
input:-webkit-autofill,input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active  {/*-webkit-box-shadow: 0 0 0 40px #333 inset !important;*/transition: background-color 5000s ease-in-out 0s;}
input:-webkit-autofill {-webkit-text-fill-color: #fff !important;}
::-webkit-input-placeholder {color:#fff;}
:-ms-input-placeholder {color:#fff;}
::-moz-placeholder {color:#fff;}
::placeholder {color:#fff;}
/*============pswp===============*/
.pswp__bg { opacity: 0.9 !important;}
.pswp__caption__center { font-size: 15px !important;  max-width:inherit !important;}
.pswp__zoom-wrap { text-align: center; }
.pswp__zoom-wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.pswp__wrapper { line-height: 0; width: 100%; max-width: 1440px; position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; }
.pswp__video_wrapper { position: relative; padding-bottom:56.25%; height: 0; width: 100%; }
.pswp__video_wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
video { width: 100% !important; height: auto !important; }
.pswp__ui--fit .pswp__top-bar,.pswp__top-bar { background-color:transparent !important; }
.pswp__counter{font-size: 16px !important;}
@media screen and (max-height: 900px) {
.pswp__wrapper { max-width: 1280px;}
}
@media screen and (max-height: 800px) {
.pswp__wrapper { max-width: 1100px;}
}
@media screen and (max-height: 700px) {
.pswp__wrapper { max-width: 960px;}
}
@media screen and (max-height: 600px) {
.pswp__wrapper { max-width: 720px;}
}
@media screen and (max-width: 790px) and (orientation:landscape){
.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background:rgba(0, 0, 0, 0) !important;}
.pswp__counter, .pswp__caption{ display:none;}
}
/*============lazy===============*/
img.lazy,picture.lazy img{background-image: url('../images/loader.gif'); background-repeat: no-repeat; background-position: 50% 50%; }
img.lazy.lazy-loaded, picture.lazy.lazy-loaded img{background-image:none;}
picture.lazy img{ opacity: 0;-webkit-transition: opacity 500ms ease-out; -o-transition: opacity 500ms ease-out; -moz-transition: opacity 500ms ease-out; transition: opacity 500ms ease-out;}
picture.lazy.lazy-loaded img{opacity: 1;} 
/*============ie===============*/
.ie { position: fixed; display: block; top: 0; left: 0; z-index: 100; height: 100%; width: 100%; background: url(../images/bg-alpha.png) repeat; }
.ie div { position: relative; display: block; margin: 0 auto; margin-top: 5%; width: 90%; max-width: 600px; height: 300px; background-color: #000; padding: 3%; border: solid 1px #333; }
.ie-close { position: absolute; display: block; width: 50px; height: 35px; right: 0; top: 0; text-align: center; padding-top: 15px; }

.horizontal { display: block; }
.vertical { display: none; }
@media screen and (orientation:portrait){
.horizontal { display: none; }
.vertical { display:block; }
}
@media screen and (max-width: 1300px) {
.item-5{width:102%;}
.item-5 .grid-item{ width:23%; margin-right: 2%;}
}
@media screen and (max-width: 1100px) {
.item-5{width:103%;}
.item-5 .grid-item{ width:30%; margin-right: 3%;}
}
@media screen and (max-width: 1000px) {
 /*============main===============*/ 
.grid-1-12, .grid-2-12, .grid-3-12, .grid-4-12, .grid-5-12, .grid-6-12, .grid-7-12, .grid-8-12, .grid-9-12, .grid-10-12, .grid-11-12, .grid-3-8, .grid-5-8, .grid-1-2,.grid-right{ float: none; width: 100%; clear: both;}
.grid-space-right, .grid-space-left, .grid-space-right-small, .grid-space-left-small{ padding-right: 0;padding-left: 0;}
.grid-container { padding: 100px 0;}
.input-box {padding-bottom: 10px;min-height:auto;}
}
@media screen and (max-width: 800px) {
.item-5{width:105%;}
.item-5 .grid-item{ width:45%; margin-right: 5%;}
}
@media screen and (max-width: 600px) {
.box-top{margin-top:40px;}
.box-bottom{ margin-bottom:40px;}
.title-en {font-size: 50px;}
p, .text0 { line-height: 30px;}
form input[type="text"], form input[type="password"], form input[type="tel"], form input[type="email"], form select, form textarea, .input-box {padding-left:10px;padding-right: 10px;}
}
@media screen and (max-width: 500px) {
.item-5{width:100%;}
.item-5 .grid-item{ width:100%; margin-right: 0;}
}