@import url('/css/animate.css');
.wow {animation: fadeIn 1.5s both;-webkit-animation: fadeIn 1.5s both;animation-duration: 1s;-webkit-animation-duration: 1s;animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}

header{border-bottom:1px solid rgb(179 179 179 / 30%)}
header #cis{-webkit-filter:contrast(0) brightness(0%);filter:contrast(0) brightness(0%)}
header #rightBox a svg{fill: #000;}
#wrap .workframe{padding-top: 100px;position:relative;display:flex;z-index:10}
.wow{animation:fadeIn 1.5s both;-webkit-animation:fadeIn 1.5s both;animation-duration:1s;-webkit-animation-duration:1s;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
.bannerArea{clear:both;width: 1%;flex:auto 1}
.bannerArea .Txt{position: relative;z-index:10;width: 100%;}
.bannerArea .title-box{color:#000;z-index:10;padding: 10px 30px;}
.bannerArea .title-box h2{float:left;font-weight:400;font-size: 22px;line-height:180%;color:#333333;letter-spacing:3.5px;padding-bottom: 80px;display:flex;flex-direction:column}
.bannerArea .title-box h2 span{font-size: 14px;margin-top: 16px;color:#898989;letter-spacing:1.5px}
.bannerArea .title-box h3{padding-bottom:0;font-size:15px;line-height:26px;letter-spacing:4px;font-weight:400;word-spacing:100vw;left:28px;top:350px;position:absolute;writing-mode:vertical-rl}
.bannerArea .title-box h3:before{content:'';position:absolute;width:80px;height:1px;top: -75px;left: 10px;z-index:0;background-color:var(--primary);opacity:.2;transform:rotate(135deg) translateX(20px);transition:all 1.1s ease-in-out;-webkit-transition:all 1.1s ease-in-out}
.bannerArea .title-box em{position:relative;display:block;font-size: 38px;line-height: 46px;letter-spacing: 1px;clear:both;position:absolute;top:60px}
.bannerArea .title-box:before{left:-20px;top:0px;width:20px;height:70%;border-left:solid 1px var(--primary);border-top:solid 1px var(--primary);position:absolute;content:'';display:block;opacity:.2;z-index:10}
.bannerText{position:relative;display:flex;flex-direction:column;align-items:center;z-index:3;margin-bottom:30px}
.bannerText .pag_tit{float: left;font-weight: 400;font-size: 22px;line-height: 180%;color: #333333;letter-spacing: 3.5px;display: flex;flex-direction: column;}
.bannerText .pag_tit:after{z-index:5;position:absolute;top:48%;left:-10.4vw;transform:translateY(-50%);color:rgba(11,49,143,.05);font-family:EB Garamond,Times,serif;font-size:max(2.6666666667em,8.5333333333vw);line-height:1;text-transform:uppercase;content:attr(data-headingEn)}
.bannerText em{font-style:inherit;display: block;font-size: 38px;line-height: 46px;letter-spacing: 1px;clear: both;margin-bottom: 5px;}
.bannerText::after{content:"";position:absolute;bottom:-20px;display:block;width: 40px;height:1px;background: #a8a8a8;margin:30px auto 0}
.bannerArea .bannerBox .Img{max-height:670px}
.bannerArea .illustration-box{position:absolute;left:-268px;bottom:-30px;opacity:0.5}
.bread{position:absolute;top:35%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);margin-bottom:50px;padding:20px 0;z-index:10}
.webBox .wrapper{background-image:url(/images/39/img-s-f-bg.jpg)}

/* sub_banner */
#sub_banner {width: 100%;height: 510px;position: relative;overflow: hidden;}
#sub_banner:before{position:absolute;content:'';width:100%;height: 550px;background: linear-gradient(to bottom,#000000a6 0%,transparent 100%);top:0;z-index:1}
#sub_banner a {height: 100%;background: no-repeat 50% 100% / cover;}
header {background: -webkit-linear-gradient(rgb(0 0 0 / 0%),rgb(0 0 0 / 0%));}

/* wrap */
#wrap {padding: 9rem 0 2rem 0;position: relative;min-height: 400px;background-image: url(/images/39/img-s-bg.jpg);background-repeat: no-repeat;}
#wrap:after{content:'';position:absolute;background:url(/images/39/img-about-img02.png);width: 950px;height: 630px;background-repeat:no-repeat;top: -60px;right: 0px;opacity: 0.15;}

/* top_title */
#top_title{margin-bottom: 50px;margin: 1rem 0rem 0rem 0rem;padding: 0 0 1rem 0;display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding: 10px 10px 0px;}
#top_title .pag_tit {text-align: center;padding: 0;font-weight: 600;margin-bottom: 15px;line-height: 120%;letter-spacing: 0px;color: var(--primary);}

/* waylink */
.waylink ol {text-align: center;display: flex;align-items: center;}
.waylink ol li , .waylink ol li a {letter-spacing: 0.5px;font-weight: 300;font-size: 12px;vertical-align: inherit;}
.waylink ol li:after {margin: 0 6px;display: inline-block;font-weight: 100;font-size: 12px;content: "/";}
.waylink ol li:last-child:after { margin: 0; content: ""; }

/* aside */
aside {margin: 1vw auto 1vw;z-index: 10;}
aside #sidebtn { padding: 10px 20px; width: calc(100% - 40px); z-index: 2; }
aside #sidebtn:before { position: absolute; width: 100%; height: 100%; background: rgba(var(--white-rgb), .1); top: 0; left: 0; transition: .4s cubic-bezier(.23,1,.32,1); content: ""; }
aside #sidebtn i { top: calc((100% - 16px) / 2); right: 20px; }
aside >ul >li b[data-action="sideOpen"] { position: absolute; padding: 5px 20px; display: block; top: calc((100% - 42px) / 2); right: 0; cursor: pointer; }
aside >ul >li b[data-action="sideOpen"] i:before { content: "\f067"; }
aside >ul >li[data-type="2"] b[data-action="sideOpen"] i:before { content: "\f068"; }
aside >ul >li h4 a {padding: 10px 20px;font-weight: 400;font-size: 17px;letter-spacing: 1.2px;color: #656565;}
aside >ul >li.action h4 a {color: #232323;}
aside >ul >li ul.subUL {position: absolute;width: 170px;background: rgb(29 29 29 / 76%);left: calc(50% - 85px);z-index: 5;opacity: 0;}
aside >ul >li ul.sub2UL { margin-left: 10px; }
aside >ul >li ul.subUL li >div { position: relative; }
aside >ul >li ul.subUL li a {padding: 10px 10px;display: block;color: #fff;text-align: center;}
aside >ul >li ul.subUL li [data-action="sideOpen"] { display: none; }
aside >ul >li ul.sub2UL li a { color: var(--complement); }

/* content_wrap */
#content_wrap {padding: 3vw 0 3vw 0;position: relative;width: calc(100% - 320px);}
#content_wrap #Onlinetime{padding-bottom: 10px;margin-bottom: 0px;font-weight: 500;color: var(--info);padding: 10px 15px;}
#content_wrap:after{right:-70px;top:188px;width:1px;height: 120%;border-left:solid 1px var(--primary);position:absolute;content:'';display:block;opacity:.15}
.eformsDesc{border-bottom:1px solid #cecece;padding-bottom:25px;margin:10px 0 50px;font-size:17px}


/* list_box */
#book_list li{margin-top:20px;margin-bottom:20px;width: calc((100%/3 - 30px));}
#article_list .info_box{background-color:#ffffff;}
#book_list.list_box li h3{height: 30px;font-weight:400;font-size:17px;color:#000;-webkit-line-clamp: 1;margin: 0;font-family: "Noto Sans TC", 'sans-serif';}
#book_list li h3{color: #666666;height: auto;font-size: 18px;letter-spacing: 0.5px;margin: 0;}
#book_list li .info_box p{display: none;}

/* describe */
#describe {margin-bottom: 1vw;padding: 10px 40px;}
#describe * { vertical-align: bottom; }


/* article_list */
#article_list li{position:relative;}
#article_list li:before{pointer-events:none;content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:4px solid #e0e0e0;-webkit-transition:all 0.4s ease;transition:all 0.4s ease;opacity:0;}
#article_list img {height: 300px;}
#article_list .info_box {padding: 25px 30px;background: none;}
#article_list .info_box h3{margin: 0;height: auto;font-size: 18px;font-weight: 500;color: #231f17;text-align: left;}
#article_list .info_box article { font-weight: 300; }
#article_list .info_box .plus{position:absolute;bottom: 30px;right:10px;pointer-events:none;width:30px;height:30px;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
#article_list .info_box .plus::before,#article_list .info_box .plus::after{content:"";position:absolute;top:50%;left:0;margin-top:-1px;width:100%;height:2px;background-color:#616161;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
#article_list .info_box .plus::after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}


/* top_title */
#top_title .pag_tit{line-height:120%;font-weight:400;letter-spacing:5px}
#top_title .newsDate{padding:8px 0;font-size:12px;color:#818181;letter-spacing:1px;text-transform:uppercase}
#top_title .newsDate b{font-size:14px;font-weight:400}
#top_title .newsDate .date{display:inline-block;font-size:14px;font-weight:400;color:#888;font-family:'Poppins',sans-serif}
#top_title .classTitle{position:relative;display:inline-block;padding:3px 5px;margin-left:20px;margin-right:5px;font-weight:400;font-size:14px;background-color: #0a0a0a;color:#fff}
#top_title .classTitle::before{content:"";position:absolute;top:50%;left:-15px;width:9px;height:2px;background-color:#ccc}
#top_title .articleTitle{border-bottom:1px solid #d6d6d6;color:#232323;font-weight: 500;font-size:22px;margin-bottom:20px;padding: 10px 0 20px 0;letter-spacing:0.5px;width:100%}
#news_list li{padding-bottom:30px}
#news_list li::before{pointer-events:none;content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:4px solid #e0e0e0;-webkit-transition:all 0.4s ease;transition:all 0.4s ease;opacity:0}
#news_list li img{height:320px}
#news_list li .info_box{padding:15px;width:calc(100% - 90px);left:20px;bottom:0}
#news_list li .info_box p *{font-weight:100;font-size:14px}
#news_list li .info_box p a{margin-right:10px;padding:0 2px;max-width:calc(100% - 82px);height:23px;z-index:2}
#news_list li .newsDate{padding:8px 0;font-size:12px;color:#818181;letter-spacing:1px;text-transform:uppercase}
#news_list li .newsDate b{font-size:14px;font-weight:400}
#news_list li .newsDate .date{display:inline-block;font-size:14px;font-weight:400;color:#888}
#news_list li .newsDate .classTitle{position:relative;display:inline-block;padding:3px 5px;margin-left:20px;margin-right:5px;font-weight:400;font-size:14px;background-color: #2e2e2e;color:#fff}
#news_list li .newsDate .classTitle::before{content:"";position:absolute;top:50%;left:-15px;width:9px;height:2px;background-color:#ccc}
#news_list li h3{height:65px;font-size:18px;font-weight:500;color:#231f17;margin-bottom:10px;-webkit-line-clamp:2}
#news_list li .text{-webkit-line-clamp:3;height:83px;display:none}
#news_list li .plus{position:absolute;bottom:50px;right:10px;pointer-events:none;width:30px;height:30px;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
#news_list li .plus::before,#news_list li .plus::after{content:"";position:absolute;top:50%;left:0;margin-top:-1px;width:100%;height:2px;background-color:#616161;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
#news_list li .plus::after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}



/* book_list */
#book_list .row img{height: 250px;object-fit: contain;object-position: bottom;}
#book_list .row .info_box{padding:20px 15px 20px;width:calc(100% - 30px);bottom:0;left:0;position:relative}

/* album_list */
#album_list {grid-gap: 15px;display: grid;grid-template-columns: repeat(4, 1fr);margin-bottom: 30px;}
#album_list >div { margin-bottom: 15px; }
#album_list >div .d_block{display: inline-block;}
#album_list >div .d_block p{font-size: 16px;margin: 10px;color: #000;display: none;}
#album_list >div .d_block img {width: 100%;height: 300px;object-fit: cover;object-position: revert;}


/* faq_list */
#faq_list #faqitem{margin-bottom:20px}
#faq_list #faqitem .title{padding:10px 5px 10px 5px;background:#3330;margin-bottom:15px;margin:0;padding:5px 10px;border-bottom:1px solid #e4e4e4}
#faq_list #faqitem .title{font-size:16px;color:#000;display:flex;align-items:center;border-left:5px solid #000;padding-left:15px;background-color:#f3f3f3}
#faq_list #faqitem .title span{font-family:'Lato',sans-serif;font-size:24px;float:left;display:inline-block;text-align:center;margin-right:20px}
#faq_list #faqitem .title label{padding:0 0 0 10px;width:40px}
#faq_list #faqitem .title font{width:calc(100% - 50px);font-size:18px}
#faq_list #faqitem .info{font-size:14px;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;border-left:5px solid #9d8a69;margin:0px 0 15px;padding-left:15px;padding-top:10px}
#faq_list .current .info{margin:0px 0 15px;transition:none;border-left:5px solid #9d8a69;padding-left:15px;display:flex;align-items:center}
#faq_list #faqitem .info span,#faq_list .current .info span{display:inline-block;text-align:center;color:#9d8a69;margin-right:20px;float:left;font-size:24px}
#faq_list #faqitem .info article{width:calc(100% - 80px);display:inline-block;padding-top:5px;margin-left:50px}
#faq_list #faqitem .info .expSpan{letter-spacing:0.5px;line-height:190%;position:relative;font-size:16px;display:flex;justify-content:flex-start;padding:0 0 15px 0}
#faq_list #faqitem .info .expSpan .routeSpan{width:100px;color:var(--secondary)}
#faq_list #faqitem .info .expSpan .busSpan{width:20px;color:var(--primary);font-family:'Noto Sans TC','Noto Sans TC',serif}
#faq_list #faqitem .info .expSpan p{word-break:break-word;width:calc(100% - 30px);font-family:'Noto Sans TC','Noto Sans TC',serif;color:#2a2a2a;letter-spacing:0}
.textEditor ul{counter-reset:numli;margin-bottom:30px}
.textEditor li{margin:0px 0px 5px 20px;list-style-type:circle;list-style-position:inherit;color:#5c5b5b;font-size:17px;font-weight:400;line-height:1.73;letter-spacing:0.8px;padding-left:5px;position:relative}


/* pagenav */
#pagenav {padding: 40px 0 20px;}
#pagenav a , #pagenav strong { margin: 0 10px; display: inline-block; font-weight: 400; vertical-align: middle; }
#pagenav a:first-child , #pagenav a:last-child { line-height: 9px; }
#pagenav strong { color: var(--primary); }
#pagenav a[class^="page-"] { float: left; width: calc(50% - 20px); display: block; }
#pagenav a[class^="page-"] font { width: calc(100% - 22px); display: inline-block; vertical-align: text-top; }
#pagenav a[class^="page-"] i { margin: 0 10px 0 0; display: inline-block; }
#pagenav a.page-next { float: right; text-align: right; }
#pagenav a.page-next font { text-align: right; }
#pagenav a.page-next i { margin: 0 0 0 10px; }


/* form_box */
.form_box{display:flex;flex-wrap:wrap;justify-content:space-between;flex-direction:row-reverse}
.form_box .description_box{width: 38%;padding: 0 20px;}
.form_box p.note{font-weight:bold;display:flex;align-items:flex-end;border-bottom:1px solid #dad4d4;position:relative;margin-bottom:27px;padding-bottom:20px}
.form_box p.note:after{content:'';position:absolute;left:0;bottom:-2px;width:30px;height:2px;background: var(--primary);}
.form_box p.note b{font-size:20px;margin-right:10px;color:var(--primary)}
.form_box p.note .red,.form_box p label span{color:#e82929}
.form_box p label{color:#000}
.form_box p{margin-bottom: 15px;width:calc((100% / 1) - 0px);margin-right:30px;font-family: "Noto Sans TC", sans-serif;}
input,textarea{padding: 7px 0px 7px 20px;background-color:#fafafa;width:calc(100% - 20px);font-weight: 400;font-family: "Noto Sans TC", 'Poppins', sans-serif;}
.form_box p select{background: url(/images/39/arrow.png) no-repeat scroll 100% center #ffffff;background-repeat: no-repeat;background-position: 98% 50%;padding: 15px 10px;}
.form_box input#Checknum {margin-right: 10px;width: calc(100% - 100px);}
.form_box #btnOK {padding: 5px 10px;width: 250px;color: #fff;}
.form_box h1{width: 100%;}



/* g-map */
#g-map {position: relative;margin: 0;width: 100%;}
#g-map a{z-index: 10;}
#g-map:before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; content: ""; }
#g-map iframe {position: relative;width: 100%;height: 340px;z-index: 1;}


@media screen and (min-width: 1441px){
	.workframe {width: var(--width-xxl);margin: auto;}
}
@media screen and (max-width: 1440px){
	#content_wrap{
    width: calc(100% - 300px);
}
}
@media screen and (min-width: 1281px){
	#article_list li:hover:before{-webkit-transform:translate(-20px,20px);transform:translate(-20px,20px);opacity:1}
	#article_list li:hover .info_box .plus{right:40px}
	aside >ul{padding:0 15px;margin-bottom: 70px;}
	aside >ul >li{overflow:hidden;position:relative;display:inline-block}
	aside >ul li b[data-action="sideOpen"]{display:none}
	aside >ul >li:hover{overflow:visible}
	aside >ul >li:hover h4 a{color:#9d8a69}
	aside >ul >li:after{content:"";background:#ccc;position:absolute;width:1px;height:100%;right:0px;top:0}
	aside >ul >li.action{box-shadow:4px 7px 30px #d4d3d3b5;position:relative;background:rgb(243 243 243 / 52%)}
	aside >ul >li:last-child:after{opacity:0}
	aside >ul >li:before{content:"";border-left:3px solid var(--primary);width:5px !important;position:absolute;left:0;top:0;z-index:2;background:rgb(243 243 243 / 52%);height:100% !important;opacity:0;transform:scale(0);transition:.5s}
	aside >ul >li.action:before{opacity:1;transform:scale(1);transition:.5s}
	aside >ul >li:hover ul.subUL{opacity:1}
	#news_list li:hover .info_box{bottom:30px}
	#news_list li:hover .info_box{bottom:30px}
	#news_list li:hover::before{-webkit-transform:translate(-20px,20px);transform:translate(-20px,20px);opacity:1}
	#news_list li:hover .plus{right:40px}
	header #webmenu nav >ul >li >p a span{color: #000;}
}
@media screen and (max-width: 1280px){
	aside {position: relative;width: 500px;margin: 2vw auto 5vw;}
	aside #sidebtn {display: inline-block;background: #e8e8e8;}
	aside #sidebtn font{color: #2b2b2b;}
	aside >ul { position: absolute; overflow: hidden; margin-top: 1px; width: 100%; height: 0; background: rgba(var(--black-rgb), .85); top: 0; left: 0; z-index: 1; }
	aside >ul.open {height: auto;border-width: 1px;top: 50px;background-color: #f6f6f6;}
	aside >ul >li { position: relative; }
	aside >ul >li h4 a { padding: 10px 15px; }
	aside >ul >li ul.subUL {overflow: hidden;width: 100%;height: 0;background: rgb(232 232 232 / 40%);top: 0;left: 0;}
	aside >ul >li.action h4 a{border: 0px;}
	aside >ul >li ul.subUL li a{color: #7b7b7b;text-align: left;padding: 10px 16px;}
	aside >ul.open >li[data-type="2"] >ul { position: relative; height: auto; top: auto; bottom: 0; opacity: 1; }
	#news_list li img {height: 230px;}
	#sub_banner{height: 370px;}
	.bread{top:45%}
	.bannerArea .Txt{width:100%}
	.form_box{display:flex;flex-direction:column}
	.form_box .description_box,#form1{width: auto;/* padding: 0; */}
	#content_wrap:after{right: 0;}
	#content_wrap{padding:6vw 0 1vw 0;width:calc(100% - 270px)}
	#wrap{padding: 5rem 0 1rem 0;}
	#wrap .workframe{display:flex;flex-direction:column;align-items:flex-start;width:88%;padding-top: 20px;}
	#album_list{-moz-column-count:1;-webkit-column-count:1;column-count:1;grid-template-columns:repeat(2,1fr)}
	.bannerArea .title-box em{font-size:40px}
	.bannerArea .title-box h3{display:none}
	.bannerArea .title-box{position:relative;padding:20px 10px}
	.bannerArea .title-box h2{padding-bottom: 20px;padding-top: 10px;font-size:21px}
	.bannerArea .title-box h2 span{display:none}
	.bannerArea .title-box em{top: -10px;font-size:30px}
	.bannerArea,#content_wrap{width:100%}
	.bannerArea{height: 110px;}
	.bannerArea .title-box:before,#content_wrap:after,.bannerArea .illustration-box{display:none}
	#content_wrap{padding:3vw 0 1vw 0}
}
@media (max-width:1180px){
	#news_list li .plus{display:none}
	#news_list li .info_box{width:calc(100% - 20px)}
	#news_list li img{height:280px}
	#news_list li{width:calc((100% / 2 ) - 30px)}
	#describe{padding: 10px 10px;}
}
@media screen and (max-width: 1024px){
	#article_list img{height:35vw}
	#top_title .pag_tit:before{display:none}
	#top_title .pag_tit{font-size:24px;margin-bottom:10px}
	#top_title{margin:0rem 0rem 1rem 0rem;padding:0 15px 10px 15px}
	.waylink ol{padding:10px 0 0 0}
	#g-map,.content_box{width:100%;padding:0}
	#g-map iframe{height:260px}
	#news_list li{width: calc((100% / 2) - 30px);}
	#book_list .row img{
    height: 200px;
}
}
@media screen and (max-width: 761px){
	#book_list li{
    width: calc((100% / 2 - 30px));
    margin-bottom: 0;
}
	#book_list .row img { height: 350px; }
	#faq_list #faqitem .info article{margin-left: 20px;}
}
@media screen and (max-width: 640px){
	#article_list li{margin: 20px 0;}
	#article_list img{height: 70vw;}
	#content_wrap{padding-bottom:1vw;padding-top: 1vw;}
	aside{width:100%;margin:3vw auto 8vw}
	#album_list{-moz-column-count:1;-webkit-column-count:1;column-count:1;grid-template-columns:repeat(1,1fr)}
	.form_box input#Checknum{width: calc(100% - 100px);}
	#news_list li{margin-left:0;margin-right:0}
	#news_list li{width: calc((100% / 1 ) - 0px);}
	#album_list >div .d_block img{height:100%}
	#form1{
    padding: 10px 15px;
}
	#book_list li{width: calc(100% - 30px);}
	#book_list .row img {height: 100%;}
}
@media screen and (max-width: 500px){
	#top_title .pag_tit:before {right: -224px;}
	#sub_banner {height: 230px;}
}