@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Allura|Noto+Sans+TC:300,400|Noto+Serif+TC:300,500|PT+Serif|Cormorant+Infant:wght@500&display=swap');
/* CSS Document */


/*
font-family: 'Allura', cursive;
font-family: 'Noto Sans TC', sans-serif;
font-family: 'Noto Serif TC', serif;
font-family: 'PT Serif', serif;
font-family: 'Oswald', sans-serif;
font-family: 'Cormorant Infant', serif;
*/

/*animation*/
.animatimg{
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-webkit-transition: all 1000ms ease-out;
	-o-transition: all 1000ms ease-out;
	-moz-transition: all 1000ms ease-out;
	transition: all 1000ms ease-out;}	

a:hover .animatimg{
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);}

.imgR{left: 50px;opacity: 0}
.imgL{left: -50px;opacity: 0}
.imgT{top:-50px;opacity: 0}
.imgB{top:50px;opacity: 0}
.imgO{opacity: 0}
.imgsh{
	position: relative;
	animation:scrollshow 1.5s;
	animation-fill-mode:forwards;
	animation-direction:alternate;
}



@keyframes scrollshow{
	to{ left: 0; top:0; opacity:1 }
	
}
@keyframes bannerhei{
	to{ height: 58%; }
	
}

*{ margin:0; padding:0;text-decoration:none; }
body,div,li,ul,div,img,a,input,textarea,form{margin:0; padding:0; box-sizing: border-box; }
body{ font-family:"Noto Sans TC", "Arial Unicode MS", serif; font-weight: 400; color: #3b2c2f; background: #fff url("../images/back00.jpg") top }
img{border:0}
li{list-style: none}
html,body,.wap{ height: 100%; }


/*menu*/

.wap{position:  relative}
.top{ background: #fff;  position: fixed; top:0; z-index: 50; width: 100% }
.menubox{max-width: 100%; width: 750px;  margin: auto}
.logo{  margin:0; padding: 5px; position:relative; text-align: center; }
.logo img{ height:40px; max-width: 90% ;  }

.menu{ position:relative;  display:block; min-height:25px; height:55px; margin-bottom:0;  }

.menu ul{ height: 100%; width: 100%;  text-align:center;  font-size: 13.5px; border: double #000; border-left: none; border-right:none }
.menu li{ display:inline-table; position: relative;width:125px; height:100%;  text-align:center; }
.menu li:before{content: '｜' ; display:table-cell;vertical-align: middle; margin: 0; padding: 0; }
.menu li:first-child:before {display: none}
.menu li a{ display:table-cell;vertical-align: middle; line-height: 20px; position:relative; z-index: 2; color: #000; }
.menu li .btn { padding:5px 10px; text-align:center;  }

.menu li .btns{ position: absolute; left: 0; top:100%; padding-top: 5px; width: 100%; height:auto; overflow: hidden  }
.menu span{ font-size: 14.5px; color: #1AB0CF; display:block;}


.menubtn{display: none; height: 28px; width: 28px;margin:8px 5px;border-radius: 5px;  background:  url(../images/btn_menu.png) center no-repeat; background-size:27px auto; z-index: 100}
.mobile{ display: none; position: fixed; width: 150px; max-width: 100%; top: 0; left: 0; height: 100%; background: #000; z-index: 100}
.mobile ul{margin: 80px auto;}
.mobile a{ display: block; width: 100%; height: 100%;  color: #aaa; text-decoration: none; font-size: 16px; border-bottom: 1px solid #333;}
.mobile a .btn{ width: 100%;  text-align: center; padding:10px 0;  }
.mobile span{ display: none}
.mobile a:hover{ color:#fff; background: #000; }

.banner {
	width: 100%;height: 10%;background: #ddd; background-size: cover; background-repeat: no-repeat;
	animation:bannerhei 1s forwards ease-in;
}

.c_partone {height: 100%; padding-top: 135px;}
.c_partthre { padding-top: 135px;}
.content_menu {}

.content {width:90%; max-width:1360px; margin: auto;}
	


.title_en{font:500  50px Cormorant Infant;}
.title_cn{font-size: 16px; border:solid 5px #5a4f51; border-top: none; border-bottom:none;
	display: inline-block; width: 400px; max-width: 100%; padding:0 20px; margin: 10px 0; color: #5a4f51;
}
.title_cn2{ border-right:none;  padding:10px; text-align: center}
.title_down{padding:0 30px; font-size: 20px; text-align: right; position: absolute; bottom:10px; right: 0; opacity: 0;transition: all 500ms ease;}
.title_down p:nth-child(1){font-size: 14px;}
.title_down p:nth-child(2){font:500  30px Cormorant Infant;}

.titlebox{padding-top: 3.5%}
.bg{min-height: 50%; position: relative;background: rgba(255,255,255,0.8)}
.bg2{background: rgba(255,255,255,0);}
.di{display: table; height: 100%}	
.dis{display: table-cell;}
.disn{display: table-row;  }


.p1-1{width: 420px; max-width: 42%; padding:60px 10px ;}
.p1-2{position: absolute; height: 100%; width: 55%; top:0; right: 0; overflow: hidden}
.p1-3 li{width: 48%; display: inline-block; min-height: 100px; padding: 10px 0; vertical-align: top}
.p1-4{width: 650px; max-width: 55%; padding:60px 5%; text-align: left; display: inline-block}
.p1-5{position: absolute; height: 100%; width: 45%; top:0; mix-blend-mode: multiply; }

.p2-1{width: 58%; float: left; overflow: hidden; text-align: center}
.p2-1 img{min-width: 100%; min-height: 100%; display: inline-block}
.p2-1 img{max-width: 900px;}
.p2-2{width: 42%; float: left; padding:5% 10px 10px 5%; color: #5a4f51}

.hcase{padding:10% 0;}
.hcase_tit{font:600 38px Noto Serif TC;}
.hcase_ww{margin: 20px 0; padding: 30px 0; line-height: 30px; font:400 16px Noto Sans TC; }

.btnl_line{height: 1px; background: #000; margin: 30px 0 50px 0; position: relative}
.btnl_more{background: #5a4f51; display: inline-block; padding: 5px 0; color: #fff; border-radius: 5px; width: 40%;  min-width: 100px; text-align: center; position: absolute; margin-top: -15px; margin-left: 60%}
.btnlink a{color:#5a4f51; font-size: 20px; display: block; margin: 5px;}
.btnlink a div{background-color: #5a4f51; height: 45px; width: 45px; border-radius: 5px; display: inline-block; margin-right: 10px; vertical-align: middle}
.btnlink a:hover div,.btnl_more:hover{background-color: #553d41}
.btnlink .btnl_map div{  background-image:  url('../images/icon_map.png'); }
.btnlink .btnl_tel div{ background-image: url('../images/icon_tel.png') }


.classic {position: relative; padding-top: 10%;}
.classic li{
	width: 19.9%; float: left; display: inline-block; padding: 18px; position:relative; top: 0; left: 0;transition: all 500ms ease;
}
.classic li:first-child{ width: 40%; }
.classic .contbox{width: 100%; height: 100%;background-color: #000;border-radius: 10px; overflow: hidden; position: relative}
.classic .imgbox{width: 100%; height: 100%;background-size: cover; opacity:1}
.classic .txtbox{position: absolute; z-index: 100; top: 0; left: 0; margin-top: 20px;  width: 100%; height: 100%;  text-align: center;font-size: 21px; color: #fff; opacity:0;transition: all 500ms ease; display: table}
.classic .txtbox span{ display:table-cell; vertical-align: middle}

.classic li a:hover .imgbox{opacity: 0.5}
.classic li a:hover .txtbox{opacity: 1; margin-top: 0;}



.p4-1{width: 850px; max-width: 60%; padding:60px 10px ; }
.p4-1 input,.p4-1 textarea{  width: 100%; height: 50px; padding: 6px 2.5%; margin: 3px auto;  background: #837e7a; font-size:18px ; border:1px solid #5a4f51;  color: aliceblue; border-radius: 5px; }
.p4-1 textarea{ height:150px;padding: 6px 2.5%; margin: 3px auto 10px auto; }
.p4-1 button{ border: 0; padding: 10px;font-size: 18px; cursor: pointer}
.p4-2{position: absolute; height: 100%; width: 40%; top:0; right: 0; overflow: hidden}


.news{ width:100%; max-width:550px; padding:20px 5px;   min-height:420px; }

.news li{background:#Fff; text-align:left; border:1px solid #5a4f51; width:100%; margin-bottom:10px; padding: 5px; vertical-align: super; } 
.news li a:hover >.photo img{ opacity:.6}

.news .photo{   width:110px; height:100px; margin:0 4% 0 1%;  max-width: 30%; display:inline-block;  background:#CCC;  overflow:hidden; }
.news .photo img{ height:100%; max-width:100%;}
.news .newsword{ max-width: 65%; display:inline-block;  color: #222}
.news .date{ font-size: 14px; opacity: .8 }

.news .newstitle{  padding:10px 0; height:32px;  font-weight:bold; font-size:21px; line-height: 21px;  color: #5a4f51 }
.news .listword{ padding:5px 0; height:58px; font-size: 16px;}
.newstitle,.listword{text-overflow: ellipsis; white-space: pre-wrap; word-break: break-all; overflow: hidden}


.newscontent{display:table; width:100%; height:100px; max-width:900px;margin:0 auto; padding:20px 5px;background:#F5F5F5; }
.newscontent .newstop{min-height:50px; width:100%; padding:20px 0;}
.newscontent .date{ width:70px; text-align:center; display:table-cell}
.newscontent .day{color:#DFBE79; font-size:24px;}
.newscontent .ym{color:#DFBE79; border-top:#DFBE79 1px solid}
.newscontent .newstitle{ vertical-align:middle; padding:0 10px; display:table-cell; font-weight:bold;font-size:large}
.newscontent .newsww{text-align:left;  }
.newscontent > div{max-width:90%;margin:auto;}
.newscontent img{max-width:100%; height: auto}
#prepage,#nextpage,.pagelist a { display: inline-block; padding: 2px; margin: 2.5px;  min-width: 20px; text-align: center ; color:#5a4f51; }
.pagelist .act{background: #5a4f51; color: aliceblue}
.pagelist a:hover, .pagelist .act:hover{background: #553d41; color: aliceblue}



@media screen and (max-width:900px){
.logo{  float:none; width: auto; padding-left: 10px }
.logo img{max-height: 35px; max-width: 80%  }	
.menubtn{ display: block; position:fixed;}
.menu{  display: none; }
	
.c_partone {height: 100%; padding-top: 60px;}
.titlebox{padding-top: 10%}	


	
.di{display: block; height: auto}	
.dis{display: block}
.disn{display: none}
	
.p1-1{ max-width: 100%; }
.p1-2{position:relative; width: 100%; height:200px; }
.p1-3 li{width: 100%; display:block;}
.p1-4{ max-width: 100%;  display: block}	
.p1-5{position:relative; width: 100%; height:300px; }
	
	
.p2-1{ width: 100%; }
.p2-1 img{ max-width: 100%; min-height: auto; }	
.p2-2{ width: 100%; }	


.p4-1{ max-width: 100%; }
.p4-2{position:relative; width: 100%; height:350px; }
	
.news{ padding:100px 5px 20px 5px; }
}

@media screen and (max-width:1200px){
	.classic li{width: 25%; padding: 12px}
	.classic li:first-child{ width: 50%; }

}

@media screen and (max-width:600px){
	.classic li{width: 50%; }
	.classic li:first-child{ width: 100%; }
	.classic .txtbox{ margin-top: 0;  font-size: 18px;  opacity:1;}

}