@charset "UTF-8";
html{font-size:15px; width:100%; height: 100vh; overflow-x: hidden;}
html, body{margin:0; padding: 0;}
body{width:100%;}
*, body, div, p, input, button, a, strong, td, li, i, h1, h2, h3, h4, h5, strong, button, span, .btn, select, select option{font-size:1rem; line-height:1.6; font-weight:normal; font-family:Arial, "Noto Sans TC", '微軟正黑體'; text-decoration:none; text-shadow:none; margin:0; padding:0; color:#333;}
.fancybox-container *{color:#fff;}
a{text-decoration:none; font-weight:normal;}
a:hover{text-decoration:none; transition:All 0.2s ease;}
ul, ol, li{margin:0; padding:0;}
ul, ol{margin-left:1rem;}
[type=text], textarea{width:calc(100% - 1rem); height:1.5rem; padding: 0.3rem 0.5rem; background-clip:padding-box;border:0px solid #ced4da; border-radius:.25rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; margin-bottom: 1rem;}
[type=text]:focus, textarea:focus{box-shadow: 0 0 6px #0d95e8;}
textarea{resize:none; height: 5rem;}
img{max-width:100%; height:auto;}
hr{border:none; border-bottom:1px #E5E9EF solid; margin-bottom:15px;}
h1, h2, h3, h4, h5, h6, strong{font-weight:bold;}
h1{font-size:2.18rem;}
h2{font-size:1.8rem;}
h3{font-size:1.6rem;}
h4, h4 *{font-size:1.4rem;}
h5{font-size:1.2rem;}
.btn{background: #2788e3; border:1px #2788e3 solid; padding: 5px 15px; color:#fff; font-size: 1.1rem; display: inline-block; cursor: pointer;}
.btn *{color:#fff;}
.btn:hover{background: #fff; color:#2788e3;}
.btn:hover *{color:#fff;}
.btn.facebook{background: #3b5998; color:#fff; border:#3B5998;}
.bh .btn{color:#fff;}
table{border-collapse:collapse;}
section{width:calc(100% - 20px); max-width:1180px; margin:0 auto; position:relative;}
section:after{content: ''; display: block; clear: both;}
select{background: #fff; border:none; font-size: 0.8rem; border-radius: 2px; padding: 2px 5px;}
select option{font-size: 0.6rem; border-radius: 2px;}
iframe{max-width: 100%;}
.hideit{display:none;}
.sabrosus{text-align:center;}
.sabrosus a{border:1px #ccc solid;}
.sabrosus a:nth-child(1){border-radius: 5px 0 0 5px;}
.sabrosus a:nth-last-child(1){border-radius: 0 5px 5px 0;}
.sabrosus a, .sabrosus a:visited{padding:5px; min-width:20px; margin:20px 0; color:#483C2A; display:inline-block;}
.sabrosus a .fa{color:#483C2A;}
.sabrosus a.current, .sabrosus a:hover, .sabrosus a:hover .fa{background:#EFEFEF; color:#483C2A;}
.bh{clear:both; text-align:right; margin:1rem 0;}
.bh a{line-height:1.6; color:#333; border:1px #333 solid; width:6rem; text-align: center; display: inline-block;}
.bh a:hover{background: #333; color:#fff;}
.slick-arrow{position: absolute; z-index: 901; top:calc(50% - 2.25rem); background: rgba(102, 102,102,0.4); padding: 1rem 0; border:none; width:3rem; height: 4.2rem; overflow: hidden; opacity: 0; transition:All 0.2s ease;}
.slick-prev{padding-left: 1rem;}
.slick-prev:after{content: ''; display: inline-block; width:2rem; height: 2rem; border:3px #fff solid; border-left:none; border-top:none; transform: rotate(135deg);}
.slick-next{right:0px; padding-right: 1rem;}
.slick-next:after{content: ''; display: inline-block; width:2rem; height: 2rem; border:3px #fff solid; border-right:none; border-bottom:none; transform: rotate(135deg);}
.slick-dots{width:100%; margin: 0; text-align: center; position: absolute; bottom: 0rem;}
.slick-dots li{display: inline-block; list-style: none; width:1rem; height: 1rem; margin:0 0.5rem; border-radius: 0.7rem; box-shadow: 0 0 0.4rem rgba(255,255,255,.5); border:1px rgba(255,255,255,255.6) solid;}
.slick-dots li.slick-active{background: #fff;}
.slick-dots li button{display: none;}
#indexBanners{position: relative;}
#indexBanners:hover .slick-arrow{opacity: 1;}
#indexBanners .item{width:100vw; height: 500px; display: block; background: no-repeat center; background-size: cover; position: relative; overflow: hidden;}
#indexBanners .item *{color:#000;}
#indexBanners .item div{background: rgba(255,255,255,0.6); padding: 6rem 4rem; color:#fff; position: absolute; left:-25%; top:0; display: inline-block; width:25%; height: 100%;}
#indexBanners .item div .title{line-height:1.2; margin-bottom: 1rem; opacity: 0; margin-left:-100px;}
#indexBanners .item div .info{display: block; margin-bottom: 2rem; opacity: 0; margin-left:-100px; font-size:1.1rem;}
#indexBanners .item div .btn{color:#fff; border:1px #fff solid; border-radius: 5px; margin-top:5rem; padding: 0.4rem 1rem; display: inline-block; font-size: 0.8rem; opacity: 0;}
#indexBanners .item.slick-current div{left:0; transition:All 1s ease;}
#indexBanners .item.slick-current div .title{opacity: 1; transition:All 1s ease; margin-left:0px;}
#indexBanners .item.slick-current div .info{opacity: 1; transition:All 0.8s 0.3s ease; margin-left:0px;}
#indexBanners .item.slick-current div .btn{opacity: 1; transition:All 0.4s 1s ease; margin-top:1rem;}
#indexBanners .slick-dots{bottom: 1rem;}
header{position: fixed; z-index: 902; left:0; top:0; background:rgba(255,255,255,0.7); width:100%; display: block;}
header section{padding:10px 0;}
#logo{display: inline-block;}
#logo img{max-width:60vw; height: auto;}
nav{float:right; margin-top:5px;}
nav > ul{margin:0; padding: 0;}
nav > ul > li{list-style: none; display: inline-block; margin: 0; padding: 0; position: relative;}
nav > ul > li > a{display: inline-block; font-size:1.2rem; line-height:1; color:#000; text-decoration: none; padding:5px 10px;}
nav > ul > li:hover > a{color:#2788e3;}
nav > ul > li .submenu{position: absolute; z-index: 900; background: #483C2A; margin:-2px 0 0 0.8rem; width:120px; border-top:2px #fff solid; opacity: 0; display: none;}
nav > ul > li .submenu a{display: block; padding: 5px 1rem; line-height: 2;}
nav > ul > li:hover .submenu{transition:All 0.3s ease; opacity: 1; display: block;}
nav > ul > li a .icon{margin:-2px 0 0 5px;}
main{padding:67px 0 50px 0;}
aside{width:230px; float: left;}
aside a{display: block; font-size:1.2rem; line-height:1.1; padding:10px 10px; margin-bottom:1rem;}
aside a.current{font-weight: bold; background:#2788e3; color:#fff;}
article{width:calc(100% - 280px); float: right;}
article.one{width:100%; max-width:1000px; margin:0 auto; float: none;}
article .tools{text-align: right;}
article .tools a{display: inline-block; background:#2788e3; color:#fff; padding:5px 10px; line-height: 1; margin:0 0 2rem 1rem;}
#showNav{position: fixed; z-index: 901; right:10px; top:10px; display: none; color:#000; font-size: 2rem; cursor: pointer;}
#page_banner{background:no-repeat center; background-size:cover; padding-bottom:48%; margin:0 0 5rem 0; position: relative; background-image:url('../images/banner.jpg');}
body#page #page_banner{padding-bottom:60%;}
body#pageaboutUs #page_banner{background-image:url('../images/banner_aboutUs.jpg');}
body#pagenews #page_banner{background-image:url('../images/banner_news.jpg');}
body#pagelinks #page_banner{background-image:url('../images/banner_links.jpg');}
body#pagemedias #page_banner{background-image:url('../images/banner_medias.jpg');}
body#pagealbums #page_banner{background-image:url('../images/banner_albums.jpg');}
body#pagecontactUs #page_banner{background-image:url('../images/banner_contactUs.jpg');}
#index_links{text-align: center;}
#index_links a{display: inline-block; margin:1rem 20px; width:calc(50% - 40px);
	float: left;}
#index_links a:nth-last-child(1){float: right;}
#index_links a img{width:100%;}
#d{margin-bottom: 3rem;}
#indexAboutUs, #indexAboutUsImg{margin:8rem 0;}
#indexAboutUs{width:40%; float: left;}
#indexAboutUsImg{width:50%; float: right;}
#aboutUsInfo{background: #F1F1F2; margin-bottom: 5rem;}
#aboutUsInfo section{background: #fff; max-width: 800px; padding: 2rem 3rem; top:-3.6rem;}
#aboutUsInfo section:after{content: ''; display: block; clear: both;}
#aboutUsInfo .title{float: left; font-size: 2.4rem; line-height: 1.2; font-weight: bold; color:#483C2A; padding: 5rem 4rem 20% 5rem; width:calc(50% - 8rem); height:0;}
#aboutUsInfo .title div{font-size: 1.2rem;}
#aboutUsInfo .info{float: left; width:48%;}
#indexAboutUs .btn, #aboutUsInfo .btn{color:#80C1C4; font-size: 1.1rem;  line-height:1.2; margin-top:0.8rem; display: inline-block; border-left:4px #80C1C4 solid; padding-left: 0.5rem; position: relative; width:5rem;}
#indexAboutUs .btn img, #aboutUsInfo .btn img{position: absolute; top: -0.2rem; margin-left: 0.5rem;}
.eventBox{height: 140px; padding-top: 460px; background: no-repeat center; background-size: cover;}
.eventBoxInfo{width:50%; padding: 2rem 3rem; position: relative; float: right; background: #fff; margin-top:-10rem;}
.eventBoxInfo .title{margin-left:-1rem;}
.eventBoxImgs{display: inline-block; float: left; width:40%; margin-top:1rem; margin-bottom: 2rem;}
.eventBoxImgs img{width:100%;}
#goTop{position: fixed; z-index: 900; right: 1rem; bottom: 5rem; width:1rem; height: 1rem; border:2px #666 solid; border-left:none; border-bottom: none; transform:rotate(-45deg); display: none;}
footer{background: #2788e3;}
footer, footer *{color:#fff;}
footer section{font-size: 0.9rem; padding:10px 15px;}
footer .tools{float: right; margin-top:1.5rem;}
footer .tools a{margin-left:1rem;}
footer .logo{float: left; margin-right: 2rem;}
#footer_info{background:#60adf5;}
#footer_info section{padding:10px 15px;}
#footer_info, #footer_info *{color:#fff;}
ul.c3, ul.c4{margin:0; padding: 0;}
ul.c3 li{list-style: none; vertical-align: top; display: inline-block; width:calc(33% - 40px); margin:0 0 3rem 40px; position: relative;}
ul.c3 li:nth-child(1), ul.c3 li:nth-child(3n + 1), ul.c4 li:nth-child(4n + 1){clear:left; margin-left:0;}
ul.c3 li .img{width:100%; display: block; background:no-repeat center; background-size: cover; padding-bottom:60%; border-radius: 10px;}
ul.c3 li .d{color:#999; margin:0 1rem 1rem 1rem;}
ul.c3 li .infoBox{margin:0 15px 10px 15px;}
ul.c3 li .title{display: block; font-size: 1.2rem; font-weight: bold; margin:1rem 1rem 0 1rem;}
ul.c3 li .more{color:#359ca9;}
ul.c4 li{list-style: none; vertical-align: top; display: inline-block; width:calc(25% - 25px); margin:0 0 3rem 20px; position: relative;}
ul.c4 li .img{width:100%; display: block; background:no-repeat center; background-size: cover; padding-bottom:60%; border-radius: 10px; opacity:0.7;}
ul.c4 li:hover .img{opacity: 1;}
.cols3_list{margin:3rem 0; padding: 0;}
.cols3_list:after{content: ''; display: block; clear: left;}
.cols3_list li{list-style: none; display: inline-block; margin:0 1rem 2rem 1rem; padding-bottom: 1rem; float: left; border:1px #F1F1F2 solid; width:calc(33% - 2rem); text-align: center; background: #fff;}
.cols3_list li:hover{background: #EFEFEF; transition:All 0.2s ease;}
.cols3_list li .img{width:100%; height: 0; display: block; padding-bottom: 72%; background: no-repeat center; background-size: cover;}
.cols3_list li .d{font-size: 0.8rem; text-align: center; margin: 1rem 0;}
.cols3_list li .title{text-align: center; margin:1rem 1rem 2rem 1rem;}
.cols3_list li .type{float: left; background:#359ca9; color:#fff; display: inline-block; margin-top:1rem; float: left; padding:5px 10px; line-height: 1;}
.cols3_list li .info{margin:0 1rem 1rem 1rem; text-align: center;}
.cols3_list li .btn{display: inline-block; background: #333; color:#fff; width:150px; line-height: 2; text-align: center; margin:0 auto;}
.mobile{display: none;}
.mobile-x{display: inline-block;}
.fl{float:left;}
.fr{float:right;}
.clearup:after{content: ''; display: block; clear: both;}
img.fl, div.fl{float:left; margin:0 1.4rem 1.4rem 0;}
img.fr, div.fr{float:right; margin:0 0 1.4rem 1.4rem;}
.clear{clear:both; height:0; line-height:0; display:block;}
.tag_title{color:#483C2A; text-align: center; margin:3rem 0 0 0;}
.tag_title + hr{width:5rem; border-color:#CFC39F; border-width: 2px; margin:0.5rem auto 3rem auto;}
#maps{width:calc(100% - 1.5rem); box-shadow: 1.5rem 1.5rem 0 #DCF4F4; margin: 3rem 0;}
#index_news{background:#60adf5; padding:4rem 0 0 0; margin:8rem 0 8rem 0;}
#index_news ul{margin-top:-10rem;}
.shareToBox{float: right;}
.contactUsInfo{width:50%; float: left;}
.contactUsInfo div{padding: 3rem 0.5rem 3rem 8rem;}
.contactUsInfo div h4{position: relative;}
.contactUsInfo div h4:before{content: ''; display: inline-block; width:50px; height: 50px; background: no-repeat center; background-size: auto 100%; position: absolute; left:-70px;}
.contactUsInfo div:nth-child(1){background: #ECE3CB;}
.contactUsInfo div:nth-child(1) h4:before{background-image: url('../images/icon_contactUs01.png');}
.contactUsInfo div:nth-child(2){background:#D2C6A2;}
.contactUsInfo div:nth-child(2) h4:before{background-image: url('../images/icon_contactUs02.png');}
.contactUsForm{float: right; width:calc(50% - 3rem); padding: 1.5rem; background: #EAE7E1;}
.contactUsForm h5{font-size: 1.1rem; margin-bottom: 1.5rem;}
.contactUsForm .w50{width:45%; float: left;}
.contactUsForm .w50:nth-child(3){margin-left: 2rem;}
.contactUsForm .w50:nth-child(6){margin-left:12px;}
.contactUsForm .btn{display: block; background: #483C2A; color:#fff; font-weight: bold; font-size: 1.4rem; line-height: 2; letter-spacing: 1rem; border:none; width:100%; border-radius: 3px; margin: 1rem 0; cursor: pointer;}
.ckn{max-width:100px; display: inline-block; float: left;}
#ckn{height:40px;}

@media screen and (max-width:1020px) {
	nav{display: none;}
	nav .menu li{display: block; width:90%;}
	nav .menu li .submenu{position: static; margin:-2px 0 0 0.8rem; padding-left:2rem; width:calc(90% - 2rem);}
	#showNav{display: inline-block;}
}
@media screen and (max-width:900px) {
	header .tools{width:60vw; top:0.5rem; text-align: right;}
	#officeBox .info{width:80%; float: none; margin:2rem auto; padding: 1.5rem 2rem;}
	#officeOptionList li{width:calc(100% - 2rem); margin:2rem 1.5rem;}
	.cols3_list li{width:calc(100% - 2rem);}
	.contactUsInfo{width:100%; float: none; margin-top:0;}
	.contactUsForm{float: none; width:calc(100% - 3rem);}
	.contactUsForm .w50{width:42%;}
	#indexBanners .item div{padding: 1rem 2rem 3rem 2rem; top:auto; bottom: 0; display:block; width:100%; height: auto;}
	#indexBanners .item div .btn{margin-top:5rem; margin-left:10rem;}
	#indexBanners .item.slick-current div .btn{margin-top:5rem; margin-left:0;}
	#indexAboutUs, #indexAboutUsImg{width:100%; float:none;}
	#indexAboutUsImg{margin:3rem 0 0 0;}
	aside, article, article.one{width:100%; float: none;}
	aside{margin-bottom:2rem;}
	aside a{display: inline-block; margin:0 1.5rem 1rem 0;}
	footer .menu a{margin-bottom: 1rem;}
	#officeBox{background-size: auto 100%;}
	ul.c3 li, ul.c4 li{width:calc(50% - 20px); float: left; maring-left:0;}
	ul.c3 li:nth-child(even), ul.c4 li:nth-child(even){float: right;}
	ul.c3 li:nth-child(1), ul.c3 li:nth-child(3n + 1), ul.c4 li:nth-child(1), ul.c4 li:nth-child(4n + 1){clear:none; margin-left:20px;}
	ul.c3 li:nth-child(2n + 1), ul.c4 li:nth-child(2n + 1){margin-left:0; clear:both;}
	#index_links a{margin:1rem auto;}
}
@media screen and (max-width:660px){
	.fl, .fr, div.fl, div.fr, img.fl, img.fr{float:none;}
	div.fl, div.fr, img.fl, img.fr{margin:0 1rem 1rem 0;}
	.mobile{display: inline-block;}
	.mobile-x{display: none;}
}
@media screen and (max-width:540px) {
}
@media print{
	html, body{width:100%; height:auto; overflow:auto;}
}