@charset "utf-8";
@media only screen and (min-width:1025px) {
	.Header .Logo { opacity:0; transform: translate(-20px, 0px);
	animation:left-to-right_Ani 0.25s forwards linear; animation-delay:0;}
	.Header .Nav { opacity:0; transform: translate(20px, 0px);
	animation:right-to-left_Ani 0.25s forwards linear; animation-delay:0.25s;}
	.Header .TopMenu { opacity:0; transform: translate(20px, 0px);
	animation:right-to-left_Ani 0.25s forwards linear; animation-delay:0.5s;}
}
.HomeContent * { padding:0; margin:0; list-style:none; text-decoration:none;}
.HomeContent .swiper-button-next,
.HomeContent .swiper-button-prev { margin-top:-22px;}
.HomeContent img { display:block; max-width:100%; height:auto; float:left;
/*基礎動畫設定*/
transition:all .5s;}
.HomeContent h2 { display:block; width:100%; height:auto; overflow:hidden; text-align:center; font-size:2em; margin:0; margin-bottom:1em; padding:0; padding-bottom:0.5em; position:relative; color:#847348; font-family:'Arial','Helvetica','NotoSansCJKtc-Thin','微軟正黑體', sans-serif; font-weight:normal;}
.HomeContent h2:after { content:''; display:block; width:220px; height:5px; background-image: linear-gradient(90deg, rgba(187, 167, 113, 1) 0%, rgba(132, 116, 72, 1) 100%); position:absolute; left:50%; margin-left:-110px; bottom:0;}
.HomeContent p { display:block; width:100%; height:auto; overflow:hidden; margin-bottom:0.5em; text-align:justify; color:#003959; font-size:1em;}
.HomeContent a.more,
.HomeContent a.More{ display:block; width:auto; height:auto; line-height:2.25em; overflow:hidden; padding:0 1.5em; margin:1em auto; margin-bottom:2em; border:1px solid #847348; font-size:1em;
/*基礎動畫設定*/
transition:all .5s;
/*圓角*/
border-radius:1em;}
.HomeContent a.more:link,
.HomeContent a.more:visited { color:#847348;}
.HomeContent a.more:hover,
.HomeContent a.more:active { background:#847348; color:white;}
.HomeContent a.More:link,
.HomeContent a.More:visited { color:#847348;}
.HomeContent a.More:hover,
.HomeContent a.More:active { background:#847348; color:white;}
.HomeContent > div { width:100%; height:auto; overflow:hidden; padding:0 1.5em;
display:flex;
flex-wrap:wrap;
align-items: center;
justify-content:center;}
.HomeContent > div > div { width:100%; height:auto; overflow:hidden; margin:0 auto;
display:flex;
flex-wrap:wrap;}

.HomeContent > div.DefBanner { padding:0;}
.HomeContent .swiper-container-horizontal>.swiper-pagination-bullets,
.HomeContent .swiper-pagination-custom, .swiper-pagination-fraction { height:10px;
display:flex;
flex-wrap:wrap;
align-items: center;
justify-content:center;}
.HomeContent .swiper-pagination-bullet { width:15px; height:15px; border:1px solid #847348; background:none; opacity:1;}
.HomeContent .swiper-pagination-bullet:only-child { display:none;}
.HomeContent .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin:0 5px;}
.HomeContent .swiper-pagination-bullet-active { background:#847348; border:1px solid #847348;}

/*def-intro*/
.HomeContent > div.def-intro { min-height:48.9583333vw; background:url(/tw/Images/Layout/Home/def-about.jpg) bottom center no-repeat; background-size:cover;}
.HomeContent > div.def-intro > div { max-width:800px;}

/*def-link*/
.HomeContent > div.def-link { min-height:39.5833333vw; background:url(/tw/Images/Layout/Home/def-link.jpg) bottom center no-repeat; background-size:cover;}
.HomeContent > div.def-link > div { max-width:1024px;}
.HomeContent > div.def-link > div .tab-container { display:block; width:100%; height:auto; overflow:hidden; margin-bottom:2em;}
.HomeContent > div.def-link > div .tab-container .tab-content { width:100%; height:auto; overflow:hidden; margin-bottom:1.5em;
display:flex;
flex-wrap:wrap;
align-items: center;
justify-content:center;}
.HomeContent > div.def-link > div .tab-container .tab-content > span { display:inline-block; width:auto; height:auto; line-height:2.125em; overflow:hidden; padding:0 1.5em; margin:0 0.25em; border:1px solid #d1d1c5; color:#838383; cursor:pointer; font-size:1em;
/*基礎動畫設定*/
transition:all .5s;
/*圓角*/
border-radius:1em;}
.HomeContent > div.def-link > div .tab-container .tab-content > span:hover,
.HomeContent > div.def-link > div .tab-container .tab-content > span.active { color:#847348; border:1px solid #847348;}
.HomeContent > div.def-link > div .tab-container .swiper-container { padding-bottom:30px;}
.HomeContent > div.def-link > div .tab-container .swiper-container a { display:block; width:15em; height:auto; overflow:hidden; padding:0.5em; margin:0 auto;}
.HomeContent > div.def-link > div .tab-container .swiper-container a span { width:100%; height:auto; overflow:hidden; margin-bottom:0.5em; margin:0 auto;
display:flex;
flex-wrap:wrap;
align-items: center;
justify-content:center;}
.HomeContent > div.def-link > div .tab-container .swiper-container a span.photo { width:14em; height:14em; overflow:hidden; border:0.25em solid white; margin-bottom:1em; background:#f9f9f9;
/*圓角*/
border-radius:100%;
box-shadow:0.1em 0.1em 0.5em 0.2em rgba(0, 0, 0, 0.2);}
.HomeContent > div.def-link > div .tab-container .swiper-container a:hover span.photo img,
.HomeContent > div.def-link > div .tab-container .swiper-container a:active span.photo img { transform:scale(1.1);}
.HomeContent > div.def-link > div .tab-container .swiper-container a span.title { font-size:1.2em; color:#847348;}

/*def-news*/
.HomeContent > div.def-news { min-height:40.625vw; background:url(/tw/Images/Layout/Home/def-news.jpg) bottom center no-repeat; background-size:cover;}
.HomeContent > div.def-news > div { max-width:1280px;}

.HomeContent > div.def-news > div .def-news-box { padding:1em 0.5em; width:100%; height:auto; overflow:hidden;
display:flex;
flex-wrap:wrap;}
.HomeContent > div.def-news > div .def-news-box > div { height:auto; overflow:hidden;
display:flex;
flex-wrap:wrap;
align-items: center;
justify-content:center;}
.HomeContent > div.def-news > div .def-news-box .def-news-photo { width:490px; float:left;
box-shadow:0.1em 0.1em 0.5em 0.2em rgba(0, 0, 0, 0.2);}
.HomeContent > div.def-news > div .def-news-box .def-news-photo .swiper-wrapper { height:auto;}
.HomeContent > div.def-news > div .def-news-box .def-news-photo .swiper-slide { height:auto; background:black;
display:flex;
flex-wrap:wrap;}
.HomeContent > div.def-news > div .def-news-box .def-news-photo a { width:100%; height:auto; overflow:hidden; float:left;
display:flex;
flex-wrap:wrap;
align-items: center;
justify-content:center;}
.HomeContent > div.def-news > div .def-news-box .def-news-photo a .photo + img { display:none;}
.HomeContent > div.def-news > div .def-news-box .def-news-list { width:calc( 100% - 490px ); float:right; padding-left:2em;}
.HomeContent > div.def-news > div .def-news-box .def-news-list .list-news { display:block; width:100%; height:auto; overflow:hidden;}
.HomeContent > div.def-news > div .def-news-box .def-news-list .list-news li { display:block; width:100%; height:auto; overflow:hidden;}
.HomeContent > div.def-news > div .def-news-box .def-news-list .list-news li a { display:block; width:100%; height:auto; overflow:hidden;}
.HomeContent > div.def-news > div .def-news-box .def-news-list .list-news li a .TextBox { width:100%; height:auto; overflow:hidden; padding:0.25em;
display:flex;
flex-wrap:wrap;
align-items: center;}
.HomeContent > div.def-news > div .def-news-box .def-news-list .list-news li a .Title { display:block; width:calc( 100% - 100px ); height:auto; overflow:hidden; float:left; padding-right:10px; white-space:nowrap; text-overflow:ellipsis; font-size:1.2em; font-weight:bold;
/*基礎動畫設定*/
transition:all .5s;}
.HomeContent > div.def-news > div .def-news-box .def-news-list .list-news li a:hover .Title,
.HomeContent > div.def-news > div .def-news-box .def-news-list .list-news li a:active .Title{ color:#847348;}
.HomeContent > div.def-news > div .def-news-box .def-news-list .list-news li a .Time { display:block; width:100px; height:auto; overflow:hidden; float:left; color:#ccc;}

@media only screen and (min-width:0px) and (max-width:1024px) {
	.HomeContent h2 { margin-top:1.5em;}
	.HomeContent > div.def-news { padding:0 1em;}
	.HomeContent > div.def-news > div .def-news-box .def-news-photo { width:50%;}
	.HomeContent > div.def-news > div .def-news-box .def-news-list { width:50%; padding-left:1em;}
	.HomeContent > div.def-news > div .def-news-box .def-news-list .list-news li a .Title { width:100%; line-height:1.4; margin-bottom:0.25em; padding-right:0;}
	.HomeContent > div.def-news > div .def-news-box .def-news-list .list-news li a .Time { width:100%; line-height:1; color:#777;}
}

@media only screen and (min-width:0px) and (max-width:768px) {
	.HomeContent h2 { font-size:calc( 2em * 1.25 );}
	.HomeContent h2:after { width:180px; margin-left:-90px; height:4px;}
	.HomeContent p,
	.HomeContent a.more,
	.HomeContent a.More,
	.HomeContent > div.def-link > div .tab-container .tab-content > span { font-size:calc( 1em * 1.25 );}
	.HomeContent > div.def-link > div .tab-container .swiper-container a span.title,
	.HomeContent > div.def-news > div .def-news-box .def-news-list .list-news li a .Title { font-size:calc( 1.2em * 1.25 );}
	.HomeContent a.more,
	.HomeContent a.More{ width:114px;}
	
	.HomeContent > div.def-link > div .tab-container .swiper-container a { width:19em;}
	.HomeContent > div.def-link > div .tab-container .swiper-container a span.photo { width:18em; height:18em;}

    .HomeContent > div.def-news > div { display:block;}
    .HomeContent > div.def-news > div .def-news-box { max-width:512px; margin:0 auto;}
	.HomeContent > div.def-news > div .def-news-box .def-news-photo { width:100%; margin-bottom:2em;}
	.HomeContent > div.def-news > div .def-news-box .def-news-list { width:100%; padding-left:0;}
	.HomeContent > div.def-news > div .def-news-box .def-news-list .list-news li { margin-bottom:1em;}
	.HomeContent > div.def-news > div .def-news-box .def-news-list .list-news li a .Title { white-space:normal;}
	.HomeContent > div.def-news > div .def-news-box .def-news-list .list-news li a .Time { width:100%; line-height:1; color:#777;}
}

@media only screen and (min-width:0px) and (max-width:512px) {
	.HomeContent h2 { padding-bottom:0.25em; line-height:1.4;}
	.HomeContent h2:after { width:160px; margin-left:-80px; height:3px;}
	.HomeContent p,
	.HomeContent a.more,
	.HomeContent a.More,
	.HomeContent > div.def-link > div .tab-container .tab-content > span { font-size:calc( 1em * 1.5 );}
	.HomeContent > div.def-link > div .tab-container .swiper-container a span.title,
	.HomeContent > div.def-news > div .def-news-box .def-news-list .list-news li a .Title { font-size:calc( 1.2em * 1.5 );}
	
}

@media only screen and (min-width:0px) and (max-width:380px) {
	.HomeContent h2:after { width:140px; margin-left:-70px; height:2px;}
}