@charset "utf-8";
@import url(font-awesome/css/font-awesome.min.css);
@import url(font-awesome/css/font-awesome-ie7.min.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&family=Noto+Serif+TC:wght@400;600;700&display=swap');
@import url(ElegantIcons/style.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 { 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; }
/*============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; }
/*============animate===============*/
a, .visible, .header-tel, a i, .icon-box, .img-box img, .img-over-box img, a:before, #fp-nav,form input { -webkit-transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -moz-transition: all 250ms ease-in; transition: all 250ms ease-in; }
.button-icon a:hover{-ms-transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);}
.hidden { opacity: 0; }
.visible { opacity: 1; }
.fade { display: none; }
.delay-1 { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s; }
.delay-2 { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; animation-delay: .5s; }
.delay-3 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }
.delay-4 { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; }
.delay-list li { opacity: 0;opacity:1\9\0;/*IE9hack*/ -webkit-animation: fadeInUp 0.9s 1;  animation: fadeInUp 0.9s 1;  -webkit-animation-fill-mode: forwards;  animation-fill-mode: forwards;}
.delay-list li:nth-child(10n+1) {-webkit-animation-delay: 0.2s;  animation-delay: 0.2s;}
.delay-list li:nth-child(10n+2) {-webkit-animation-delay: 0.4s;  animation-delay: 0.4s;}
.delay-list li:nth-child(10n+3) {-webkit-animation-delay: 0.6s;  animation-delay: 0.6s;}
.delay-list li:nth-child(10n+4) {-webkit-animation-delay: 0.8s;  animation-delay: 0.8s;}
.delay-list li:nth-child(10n+5) {-webkit-animation-delay: 1.0s;  animation-delay: 1.0s;}
.delay-list li:nth-child(10n+6) {-webkit-animation-delay: 1.2s;  animation-delay: 1.2s;}
.delay-list li:nth-child(10n+7) {-webkit-animation-delay: 1.4s;  animation-delay: 1.4s;}
.delay-list li:nth-child(10n+8) {-webkit-animation-delay: 1.6s;  animation-delay: 1.6s;}
.delay-list li:nth-child(10n+9) {-webkit-animation-delay: 1.8s;  animation-delay: 1.8s;}
.delay-list li:nth-child(10n+10) {-webkit-animation-delay: 2.0s;  animation-delay: 2.0s;}

/*============grids===============*/
.grid-full, .grid-large, .grid-middle, .grid-small, .grid-max, .grid-min, .grid-content { margin: 0 auto; position: relative;display: block; }
.grid-full { max-width: 1920px!important; }
.grid-large { max-width: 1680px; }
.grid-middle { max-width:950px; }
.grid-small { max-width: 400px; }
.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-12-12{width: 100%;}
.grid-3-8 { width: 38%; }
.grid-5-8 { width: 62%; }
.grid-1-2 { width: 47%; }
.grid-1-8{width: 12.5%;}
.grid-2-8{width: 25%;}
.grid-3-8{width: 37.5%;}
.grid-4-8{width: 50%;}
.grid-5-8{width:62.5%;}

/*============style===============*/
body { font-family: "Noto Serif TC","新細明體", "PMingLiU", serif; color: #fff; word-wrap: break-word; background: #1b382a; }
.font-en, #header small, .text-box, .load-box,.pswp__caption__center,p,.context{ color: #fff; word-wrap: break-word;}
header{font-family:"Noto Sans TC", Arial, Helvetica, "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", Meiryo, "sans-serif";}
p { font-size: 19px; line-height: 30px; letter-spacing: 0.5px; color: #fff; }
p span, .br, h1 span, h2 span { display: inline-block; }
::selection { background: #324027; color: #fff; }
a { color: #fff;}
a:hover { color: #D9E476; }
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 { font-size: 55px;line-height:50px;letter-spacing: 5px; position: relative;font-weight: 700;white-space:pre-wrap;text-align: center;}
h2{ font-size: 30px; letter-spacing: 2px;margin-top: 20px;text-align: center; font-weight: 600; color: #d4d9ad;}
h2 strong{font-family: 'Times New Roman', Times, serif; font-weight: 400; font-size: 60px;}
h3 { font-size: 36px;color: #d4d9ad;font-weight: 600;letter-spacing:3px;}
h4{font-size: 22px;color: #aaa;font-weight: 600;letter-spacing:3px;}
h5, h6 { font-size: 1em; }
.offscreen{position: absolute;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);padding: 0;border: 0;height: 1px;width: 1px;overflow: hidden;}
.text-box{width: 100%; float: left;}
.img-caption{font-size: 20px; font-weight: 600; color:#d4d9ad; position: absolute;bottom: 20px;right: 20px;}
/*============base===============*/
body, html { height: 100%;}
.con{width: 75%;}
.dark{color: #607b71;}
img{width: 100%;}

/*============header===============*/
#header { position: fixed; display: block; top: 2%; right:2%; z-index: 102; text-align: right;-moz-text-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-text-shadow: 0px 0px 4px rgba(0,0,0,0.2); text-shadow: 0px 0px 4px rgba(0,0,0,0.2);}
.button-icon a{position: relative; display: inline-block; width: 80px; height: 65px; padding-top: 15px; color: #fff; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;white-space: nowrap;}
.button-icon i{ display: block;font-size: 26px; margin-bottom: 7px; }
.button-icon img{width: 30px;height: auto; margin-bottom: 5px;}
.button-icon small{ display: block; font-size: 13px;}

/*============load===============*/
.load-box{ position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 101; overflow: hidden; font-size: 0; line-height: 0;background:rgb(212, 218, 172,0.7); -webkit-transition: all 500ms ease-in; -o-transition: all 500ms ease-in; -moz-transition: all 500ms ease-in; transition: all 500ms ease-in;}
.load-box.active{ height: 0px;top: -2px;}
.loader{position: absolute;top:40%; left: 50%; width: 80px;margin-left: -40px; font-size: 12px; padding-top: 50px; text-align: center; color: #fff;}
.loader .dot {width: 10px; height: 10px;background: #fff; border-radius: 50%; position: absolute; top: calc(50% - 5px);}
.loader .dot1 {left: 15px;-webkit-animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;}
.loader .dot2 { left: 35px;-webkit-animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;}
.loader .dot3 { left: 55px;-webkit-animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;}
@-webkit-keyframes dot-jump {
0% {-webkit-transform: translateY(0);transform: translateY(0);}
100% { -webkit-transform: translateY(-15px); transform: translateY(-15px);}
}
/*============main===============*/
.mobile-hide,.w600-hide{display: block;}
.pc-hide,.w600-visible{display: none!important;}

.box{ /*max-width: 1920px; min-height: 100%;*/ margin: 0 auto;}
body{background-color: #1b382a;}
/*==============first==================*/
#index .grid-full{background: url(../images/index-bg.jpg) no-repeat center/cover;}
.traingle{position: absolute; bottom: -1px;}
#index .text-box{width: 5%; position: relative; text-align: center;writing-mode: tb-rl;
	-ms-writing-mode: tb-lr;-webkit-writing-mode: vertical-lr;-moz-writing-mode: vertical-lr;-ms-writing-mode: vertical-lr;writing-mode: vertical-lr;float: right;margin: 200px 15% 0 80%;}
.illustr-box{ width: 30%; max-width: 200px; left: 20%;bottom: 45%; position: absolute;}
.illustr-box img{position: absolute; width: 100%;}
#index .fp-tableCell{vertical-align:top;}

/*============second===============*/
.section2 {position: relative; overflow: hidden; /*overflow-y: visible;*/ margin-left:-1%;}
.section2 .grid-large{display: flex; align-items: center;}
.section2 .text-box{width: 70%; float: none; margin: 0 auto;}
.section2 h2{margin-top: 80px;}
.section2 .forester{margin-top: 110px;}
.section2 .tel{width:70%; margin: 20px auto 0; display: block;}
.section2 .illustr-box{ position: absolute; /*display: block; overflow: visible;*/ bottom: 40%; left: auto; right: 0%; z-index: 1;}
.section2 .img-caption{ right: 50px; bottom: -35px;}

/*============third===============*/
.section3 .grid-full{display: flex;}
.section3 .little_leaves{max-width: 67px;width: 50%; display: block; position: absolute;
    top: -70px;right: 280px;}
.section3 .img-box{position: relative;}
.section3 .img-box img{width:100%;}
.section3 .text-area{display: flex;}
.section3 .text-box{width: 70%; float: none; margin: auto; }
.section3 .text-box h2{text-align: right;}
.section3 .forester{margin-top: 20px;}
.section3 .txt{width: 100%; position: relative;}
.section3 .grid-7-12, .section3 .grid-5-12 {display: flex; align-items: center;}
/*============contact===============*/
/* #contact.box{padding-bottom: 150px; } */
#contact .forester{margin-top: 110px;}
#contact .tel{width:95%; margin: 20px auto 0; display: block;}
#contact .little_leaves{max-width: 67px;width: 50%; display: block; position: absolute;
    top: -110px;right: -25px;}
#contact .text-box{width: 50%; float: none; margin: 50px 20% auto auto; position: relative;}
#contact .text-ver{font-size: 24px; margin: 50px auto;float: left; white-space:normal;}
.form{float: left; background: url(../images/leves-img.png) no-repeat 80% 30%/200px;}
.form-box{width: 70%; float: none;  margin: 0 auto auto 5%;}
.tel-text{float: left;}
form { position: relative; display: block;}
form .input-column,form .input-row,form .input-button,form .select-row { position: relative; display: block; line-height:0; margin:0 0.8% 20px 0.8%; width:48%; float:left; min-height: 46px; color:#D4D9AD; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
form .input-row,.select-row{border-bottom: solid 1px rgba(96,126,36,0.4);}
form .input-row,form .input-button,form .select-row{ width:98%; clear:both;}
form .input-button{ margin-top: 40px;}
form label {position: relative;float: left;width: 19%;height: 46px; line-height: 46px; display: block;}
form input[type="text"], form input[type="password"], form select, form textarea, .input-box{font-size: 18px; font-family: "Noto Sans TC", Arial; line-height: 20px; padding-top: 13px; padding-bottom: 13px; height: 46px; width: 80%; float: right; background-color:transparent; color:#fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.select-row{color:#607e24; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
form select{border: none;}
form textarea { height: 150px; line-height: 24px; padding-top: 8px;}
form select {  width: 85%; /*margin-left: 20%;*/ float: right; line-height: 25px; padding: 0;}
.input-box{line-height: 24px; padding-top: 8px;height: inherit; min-height:50px;}
form small { font-size: 16px; width: 15px; display: inline-block; color:#93B421; font-weight:bold;text-align: center;}
form input:focus, form textarea:focus, form select:focus { border-bottom: solid 1px #1D392A;}
form input.error, form textarea.error, form select.error { border-bottom: solid 1px #CC3333; }
img.rand-img { position: absolute; right: 0px; bottom:1px; width:90px; height:49px;cursor: pointer;}
.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%;}
input[type="reset"], input[type="submit"],input[type="button"],input[type="file"],#submit{float: none; margin: 0 auto;display: inline-block; min-height: 20px; line-height:20px; padding:13px 0;width:100%; text-align: center; cursor: pointer;font-size: 20px; letter-spacing: 10px; color:#fff; background:#607e24;}
input[type="reset"]:hover, input[type="submit"]:hover, input[type="reset"]:focus, input[type="submit"]:focus,input[type="button"]:hover,#submit:hover{background:#0F1008;}
#result{color: #fff;}
@-webkit-keyframes autofill { to {color: #fff; background: transparent;} }
input:-webkit-autofill {-webkit-animation-name: autofill;-webkit-animation-fill-mode: both;}
.info-text{float: left;}
.info-tel:hover{border-bottom: solid 1px #D9E476;}
.input-button{margin: 10px 0; background: #1D392A;text-align: center;}

/*============ie===============*/
.ie { position: fixed; display: block; top: 0; left: 0; z-index: 200; height: 100%; width: 100%; background:#333; }
.ie-content { position: relative; display: block; margin: 0 auto; margin-top: 3%; width: 90%; max-width: 600px; height: 300px; background-color: #fff; padding: 3%; border: solid 1px #ddd;}
.ie h1,.ie p { margin-bottom: 10px; }
.ie-close { position: absolute; display: block; width: 50px; height: 35px; right: 0; top: 0; text-align: center; padding-top: 15px; }
.ie , .ie a{color:#000;}
.ie a:hover{text-decoration: underline;}
.lightbox-bg{ position: fixed; display: block; top: 0; left: 0; height: 100%; width: 100%;}

@media screen and (max-width: 1400px)and (max-height: 800px){
	
	.form-box{padding-top:15%;}
}

@media screen and (max-width: 1500px),(max-height: 750px) {
	.button-icon a{width: 65px;height: 55px;padding-top: 10px;}
	.button-icon i {font-size: 20px;}
	.button-icon small {font-size: 12px;}
	.button-icon img {width: 25px;}
	.button-down i{margin-left: -22px;font-size: 24px;bottom: 1%;}
	}
@media screen and (max-width: 1300px){
	
		/* h1{font-size: 47px;}
		h2{font-size: 25px;}
		h2 strong{font-size: 50px;} */
		#index .text-box{text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 5px,rgba(0, 0, 0, 0.7) 1px 1px 5px;}
		.section2 .illustr-box{width: 12%;}
		form label{width: 25%;}
		form input[type="text"], form input[type="password"], form select, form textarea, .input-box{width: 70%;}
		
	}
@media screen and (max-width: 1150px){
	/* form label{width: 20%;} */
	/* form input[type="text"], form input[type="password"], form select, form textarea, .input-box{width: 80%;} */
}
@media screen and (max-width: 1100px) {
.mobile-hide{display: none!important;}
.pc-hide{display: block!important;}
/* #index .grid-full{background-position: center -10px;} */
	.section2 .grid-large,.section3 .grid-full {display: block;}
	.grid-5-12,.grid-6-12,.grid-7-12{width: 100%;}
	.section2{margin-left: 0%; display: block;}
	.section2 .text-box,.section3 .text-box,#contact .text-box{width: 45%; margin: 70px auto;}
	.section2 .img-caption{right: 12%;}
	.section2 {overflow: auto;}
	.section2 .illustr-box{bottom: 20%;}
	.section3 .text-box,#contact .text-box{margin: 250px auto 70px auto; }
	.section3 .text-box h2{text-align: center;}
	.form-box{margin: 70px auto;}
	
}
@media screen and (max-width: 1000px){

h1{font-size: 40px;}
h2{font-size: 22px;}
h2 strong{font-size: 42px;}
.section2 h2{margin-top: 60px;}
.section2 .forester{margin-top: 90px;}
.img-caption{font-size: 18px;}

.section1 .illustr-box{left: 8%; bottom: 43%;}
#index .text-box{margin: 350px 15% auto auto;width: 10%;}
.section2{margin-left: 0%;}

}

@media screen and (max-width: 820px){
	
	.section2 .text-box,.section3 .text-box,#contact .text-box{width: 55%;}
	.grid-full{overflow: hidden;}
	.section1 .grid-full{overflow: visible;}
	/* .traingle{display: block!important;} */
}

@media screen and (max-width: 820px) and (orientation:landscape) , (max-width: 1000px) and (orientation:landscape){
#index .text-box{width: 50%; margin: 150px 20px auto;
	writing-mode:  lr-tb;
	-ms-writing-mode: lr-tb;-webkit-writing-mode: horizo​​ntal-tb;-moz-writing-mode:horizo​​ntal-tb;-ms-writing-mode: horizo​​ntal-tb;writing-mode: horizo​​ntal-tb;
}
#index .text-box h1{text-align: right;}
	.traingle{display: none!important;}
	.section1 .grid-full{overflow: hidden;}
}

@media screen and (max-width: 600px){
	.w600-hide{display: none!important;}
	.w600-visible{display: block!important;}
	#header{top: 0; right: 0;width: 100%; text-align: center; background: #19392a;}
	/* form label{width: 25%;} */
	
	.section3 .img-caption{text-align: center; left: 0;bottom: 20px;}
	.section3 .grid-7-12{display: block;}
}
@media screen and (max-width: 560px){
		/* form select{width: 65%;} */
		
		.section2 .text-box,.section3 .text-box,#contact .text-box{width: 70%;}
		.section3 .text-box, #contact .text-box{margin: 150px auto 50px auto;}
		#contact .forester{margin-top: 55px}
		.form-box{width: 80%;}
	}
	@media screen and (max-width: 480px){
		form label{ /*width: 40%;*/font-size: 15px;}
		
		.button-icon a {width: 50px;letter-spacing: -1px;}
		.section1 .illustr-box{bottom: 30%;}
		#index .text-box{width: 15%; margin-top: 200px;}
	}
	@media screen and (min-height: 820px){
		#index .text-box{margin-top: 250px;}
	}
	
@media screen and (max-width: 380px){
	/* .section1.box{padding-bottom:0;}
	.box{padding: 80px 0;} */
	form label{width: 40%;}
	form input[type="text"], form input[type="password"], form select, form textarea, .input-box{width: 60%;}
	.section2 .text-box,.section3 .text-box,#contact .text-box{width:80%;}
}