@import url("jssor.css");
@import url("layout.css");
@import url("notosanstc.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');/*宋體*/


#loader.loadComplete,
#loader.loadComplete > span {
  visibility: hidden;
  opacity: 0;
}

.delighter {
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  opacity: 0;
}

.delighter.started {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}


.wrapper{
	background:url(../images/lastbg.jpg) repeat-y;
}
.banner{
	width:100%;
	height:100vh;
	background:url(../images/banner.jpg) no-repeat center center fixed;
	background-size:cover;
	padding:50px 0 0 0;
	box-sizing:border-box;
}
.logo{
	width:270px;
	margin:0 0 0 80%;
}
.biglogo{
	width:850px;
	margin:4% auto 0 auto;
}
.subtitle{
	width:470px;
	margin:0 auto;
}
.list{
	width:185px;
	float:right;
	margin:1% 1% 0 0;
}
.list li{
	width:185px;
	height:43px;
	margin:0 0 10px 0;
	text-indent:-9999px;
}
.list li a{
	display:block;
	width:185px;
	height:43px;
	transition: all 400ms ease;
}
.list li.fb a{
	background:url(../images/fb.png) no-repeat 135px 0;
}
.list li.tel a{
	background:url(../images/tel.png) no-repeat 135px 0;
}
.list li.reserve a{
	background:url(../images/reserve.png) no-repeat 135px 0;
}
.list li.place a{
	background:url(../images/location.png) no-repeat 135px 0;
}
.list li.fb a:hover{
	background:url(../images/fb.png) no-repeat;
}
.list li.tel a:hover{
	background:url(../images/tel.png) no-repeat;
}
.list li.reserve a:hover{
	background:url(../images/reserve.png) no-repeat ;
}
.list li.place a:hover{
	background:url(../images/location.png) no-repeat ;
}



.intro{
	background:url(../images/aboutbg.jpg) no-repeat top center;
	overflow:hidden;
	padding:8% 0 0 0;
	box-sizing:border-box;
}

.leaves{
	width:15%;
	float:left;
	margin:5% 5% 0 0;
}
.introarea{
	width:80%;
	float:right;
	background:url(../images/bg.png) no-repeat right bottom;
	background-size:contain;
	min-height:1000px;
}

.introtext{
	width:100%;
	background:url(../images/introbg.png) no-repeat ;
	padding:150px 0 0 0;
	box-sizing:border-box;
	min-height:440px;
}

.sun{
	font-size:3rem;
	letter-spacing:8px;
	color:#4e443a;	
	font-family: 'Noto Serif TC', serif;
	font-weight:700;
}
.sun span{
	font-family: 'Noto Serif TC', serif;
	font-weight:700;
	padding:0 40px;
	box-sizing:border-box;
}
.river{
	font-size:2.6rem;
	letter-spacing:8px;
	color:#4e443a;	
	font-family: 'Noto Serif TC', serif;
	font-weight:700;
	padding:5% 0 0 17%;
	box-sizing: border-box;
}
.river span{
	font-family: 'Noto Serif TC', serif;
	font-weight:700;
	padding:0 40px;
	box-sizing:border-box;
}
.slogan{
	width:820px;
	height:auto;
	margin:8% auto;
	display:block;
}
.slogan_rwd{
	display:none;
	width:66%;
	margin:8% auto;
}
.life{
	overflow:hidden;
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.life li{
	float:left;
}
.life li:nth-child(1){
	width:30%;
}	
.life li:nth-child(2){
	width:40%;
}	
.life li:nth-child(3){
	width:30%;
}
.box{	
}
.box p{
	text-align:center;
	font-family: 'Noto Serif TC', serif;
}
.bird{
	width:90%;
}
.style1{
	color:#4e443a;
	font-weight:600;
	font-size:3.1rem;
	letter-spacing:2px;
}
.style2{
	color:#145d14;
	font-weight:900;
	font-size:3.1rem;
	letter-spacing:2px;
	padding:40px 0;
	box-sizing:border-box;
}
.style3{
	color:#4e443a;
	font-weight:600;
	font-size:3.1rem;
	letter-spacing:1px;
	padding:10% 0 0 0;
	box-sizing:border-box;
}
.life li.treearea{
	position:relative;
}
.tree{
	width:336px;
	height:auto;
	position:absolute;
	bottom:0;
	right:0;
}


.contact{
	overflow:hidden;
	padding:5% 0 0 0;
	box-sizing:border-box;
}
.c_left{
	width:50%;
	float:left;
	padding:0 4% 0 3%;
	box-sizing:border-box;
}
.c_right{
	width:50%;
	float:right;
	padding:0 3% 0 0;
	box-sizing:border-box;
}
.flybird{
	width:250px;
}
.c_box{
	width:85%;
	height:auto;
	margin:0 0 0 15%;
}
.c_box img{
	margin:0 0 5% 0;
}
.c_box p{
	text-align:center;
}
.text-1{
	font-size:2rem;
	letter-spacing:8px;
	color:#fff;
	text-shadow:5px 5px 15px #999;
	font-weight:bold;
}
.t1{
	font-family: Arial, Helvetica, sans-serif;
	font-weight:500;
	font-size:4rem;
}
.t2{
	padding:0 10px;
	box-sizing:border-box;
}
.text-2{
	font-size:2rem;
	letter-spacing:5px;
	color:#fff;
	text-shadow:5px 5px 15px #999;
	font-weight:bold;
	padding:20px 0;
	box-sizing:border-box;

}
.c_text{
	background:url(../images/c_light.png) no-repeat 150px top ;
	padding:8% 0 6% 0;
	box-sizing:border-box;
}
.c_text h6{
	font-size:2.8rem;
	color:#4e443a;
	font-family: 'Noto Serif TC', serif;
	font-weight:900;
	letter-spacing:5px;
}
.c_text p{
	font-size:1.9rem;
	line-height:1.4;
	font-weight:900;
	color:#c1b93c;
	letter-spacing:5px;
	padding:30px 0 20px 0;
	box-sizing:border-box;
}
.form{
	width:650px;
	overflow:hidden;
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.form li{
	padding:15px 0;
	box-sizing:border-box;
}
.form li:nth-child(odd){
	width:34%;
	float:left;
}
.form li:nth-child(even){
	width:64%;
	float:right;
}
.form li:last-child{
	width:100%;
}
.form li input[type="text"]{
	width:100%;
	height:44px;
	padding:5px;
	box-sizing:border-box;
}
.form li:nth-last-child(2) input[type="text"]{
	width:60%;
}
.code{
	width:30%;
	float:right;
}
.form li:nth-child(odd) p{
	font-size:1.75rem;
	line-height:44px;
	font-weight:bold;
	color:#4e443a;
	float:left;
}
.form li:nth-child(odd) span{
	font-size:1.22rem;
	display:inline;
	padding:4px 12px;
	background:#000;
	color:#fff;
	float:right;
	margin:7px 0 0 0;
}

.form li input[type="submit"]{
	width:100%;
	background:#000;
	font-size:20px;
	color:#fff;
	font-weight:bold;
	height:52px;
	margin:20px 0 0 0;
}
#reload-img{
	width:30%;
	float:right;
}
#reload-img img{
	width:100%;
	height:auto;
}

.house{
	margin:0 0 100px 0;
}
.maparea{
	width:100%;
	padding:6% 3% 2% 3%;
	box-sizing:border-box;
	background:url(../images/mapbg.jpg) no-repeat left bottom;
}
.mapleft{
	width:65%;
	float:left;
}
.mapright{
	width:35%;
	float:left;
    padding:2% 2% 0 3%;
	box-sizing:border-box;
}
.maptext{
	width:75%;
	height:auto;
	padding:10% 0;
	box-sizing:border-box;
}
.mapt1{
	font-size:2.4rem;
	color:#4e443a;
	font-family: 'Noto Serif TC', serif;
	font-weight:700;
	letter-spacing:5px;
	padding:20% 0;
	box-sizing:border-box;
}
.mapt2{
	font-size:1.9rem;
	color:#4e443a;
	font-family: 'Noto Serif TC', serif;
	font-weight:700;
	margin:0 0 10% 0;
}
.mapt2 span{
	font-family: 'Noto Serif TC', serif;
	font-weight:700;
	color:#145d14;
	padding:0 5% 0 0;
	box-sizing:border-box;
}
.mapt3{
	font-size:1.9rem;
	color:#4e443a;
	font-family: 'Noto Serif TC', serif;
	font-weight:700;
}
.mapt3 span{
	font-family: 'Noto Serif TC', serif;
	font-weight:700;
	color:#145d14;
	padding:0 5% 0 0;
	box-sizing:border-box;
}
.f-info{
	text-align:center;
	font-size:1.4rem;
	padding:15px 0;
	font-weight:bold;
	color:#fff;
}

@media (max-width: 1440px) {
.logo{
	width:250px;
	margin:0 0 0 80%;
}
.biglogo{
	width:45%;
}
.subtitle{
	width:30%;
}	
.mapleft{
	width:62%;
}
.mapright{
	width:38%;
	padding:2% 0 0 3%;
}
.mapt1{
	font-size:2.2rem;
}
.mapt2{
	font-size:1.8rem;
}
}


@media (max-width: 1366px) {
.form{
	width:100%;
}
}

@media (max-width: 1024px) {
.logo{
	margin:0 auto;
}
.slogan{
	width:77%;
	margin:8% auto;
}
.life li{
	float:none;
}
.life li:nth-child(1){
	width:100%;
}
.life li:nth-child(2){
	width:100%;
}
.life li:nth-child(3){
	width:100%;
}
.bird{
	width:45%;
}
.tree{
	width:300px;
	position:relative;
	margin:0 auto;
}
.style3{
	padding:5% 0 ;
}
.c_left{
	width:100%;
	float:none;
	padding:0 3%;
}
.c_right{
	width:100%;
	float:none;
	padding:0 5%;
}
.c_box{
	margin:0 auto;
}
.mapleft{
	width:55%;
}
.mapright{
	width:45%;
    padding:3%;
}
.maptext{
	padding:2% 0 5% 0;
}
.mapt1{
	padding:10% 0;
}
}
@media (max-width: 820px) {
.banner{
	height:65vh;
}
}

@media (max-width: 768px) {
.leaves{
	width:250px;
	float:none;
	margin:1% 0 0 0;
}
.introarea{
	width:100%;
	float:none;
	min-height:800px;
	padding:0 0 0 5%;
	box-sizing:border-box;
}

}

@media (max-width: 640px) {
.mapleft{
	width:100%;
}
.mapright{
	width:100%;
    padding:3%;
}
.maptext{
	width:70%;
}
}

@media (max-width: 480px) {
.logo{
	width:200px;
}
.biglogo{
	width:60%;
}
.subtitle{
	width:50%;
}	
.list{
	
}
.introarea{
	min-height:600px;
}
.sun{	
}
.sun span{
	padding:0 25px;
}
.river{
	padding:8% 0 0 17%;
}
.river span{
	padding:0 25px;
}
.slogan{
	display:none;
}
.slogan_rwd{
	display:block;
}
.tree{
	width:180px;
}
.form li{
	padding:5px 0;
}
.form li:nth-child(odd){
	width:100%;
	float:none;
}
.form li:nth-child(even){
	width:100%;
	float:none;
}
.form li:nth-child(odd) span{
	font-size:1.22rem;
	padding:4px 12px;
	background:#000;
	color:#fff;
	float:left;
	margin:10px 0 0 5px;
}
.form li:nth-last-child(3){
	overflow:hidden;
}
#reload-img{
	width:30%;
	float:right;
}
#reload-img img{
	width:100%;
	height:auto;
}
.intro{
	overflow: inherit;
}
.list{
	width:140px;
    margin:3% 1% 0 0;
}

.list li{
	width:140px;
	height:33px;
	margin:0 0 10px 0;
}
.list li a{
	width:140px;
	height:33px;
}
.list li.fb a{
	background:url(../images/fb.png) no-repeat 100px 0;
	background-size:cover;
}
.list li.tel a{
	background:url(../images/tel.png) no-repeat 100px 0;
	background-size:cover;
}
.list li.reserve a{
	background:url(../images/reserve.png) no-repeat 100px 0;
	background-size:cover;
}
.list li.place a{
	background:url(../images/location.png) no-repeat 100px 0;
	background-size:cover;
}
.list li.fb a:hover{
	background:url(../images/fb.png) no-repeat;
	background-size:cover;
}
.list li.tel a:hover{
	background:url(../images/tel.png) no-repeat;
	background-size:cover;
}
.list li.reserve a:hover{
	background:url(../images/reserve.png) no-repeat ;
	background-size:cover;
}
.list li.place a:hover{
	background:url(../images/location.png) no-repeat ;
	background-size:cover;
}
}