@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;}
.bannerArea{clear:both;overflow:hidden;position:relative;z-index:1}
.bannerArea .Txt{position:absolute;top: 71%;left: 50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:10}
.bannerText{position:relative;display:flex;flex-direction:column;align-items:center;z-index: 3;margin-bottom: 30px;/* padding: 170px 0 0px 0; */}
.bannerText .pag_tit{text-align:center;margin-bottom:8px;margin-top: 15px;font-weight: 600;font-size: 36px;line-height: 140%;color: #ffffff;position: relative;font-family: 'Poppins', sans-serif;text-transform: uppercase;letter-spacing: 2.5px;}
.bannerText em{font-style:inherit;text-transform: uppercase;font-size: 20px;color: #ffffff;font-weight: 400;letter-spacing: 0.5px;line-height: 160%;font-family: 'Cormorant Garamond', serif;}
.bannerText::after{content:"";position:absolute;bottom:-20px;display: block;width: 70px;height: 1px;background: #c1b399;margin: 30px auto 0;}
.bannerArea .bannerBox .Img{max-height:670px}
.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}

/* 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 {z-index: 6;padding: 3rem 0 3rem 0;position: relative;min-height: 400px;}

/* 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 15px 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;}
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: 500;font-size: 17px;letter-spacing: 2.5px;color: #333333;}
aside >ul >li.action h4 a {color: #232323;letter-spacing: 2.5px;font-weight: 500;}
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: 1vw;}
#content_wrap #Onlinetime{padding-bottom: 10px;margin-bottom: 0px;font-weight: 500;color: var(--info);padding: 10px 15px;}

.eformsDesc{border-bottom:1px solid #cecece;padding-bottom:25px;margin:10px 0 50px;font-size:17px}

/* list_box */
.list_box li{margin-top:20px;margin-bottom:20px}
#article_list .info_box{background-color:#ffffff}
.list_box li h3{height: 38px;color:#000;-webkit-line-clamp: 1;font-weight: 600;font-size: 22px;line-height: 140%;margin: 0;}
#book_list li h3{color: #666666;height: auto;font-size: 22px;letter-spacing: 0.5px;margin: 0;}
#book_list li .info_box p{display:none}
.list_box li h3 a{
    font-size: 22px;
}

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


/* article_list */
#article_list img {height: 250px;}
#article_list .info_box {padding: 25px 30px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
#article_list .info_box article {font-weight: 500;margin: 5px 0 0;}
#article_list .info_box a{
    display: block;
    width: 100%;
    height: auto;
}

/* 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:#9d8a69;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: 28px;margin-bottom:20px;padding:10px 0;letter-spacing:0.5px;width:100%}


/* news_list */
#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:#9d8a69;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: 73px;font-size: 22px;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)}

/* product_area */
#product_area{padding: 0vw 0 2vw;}
#product_area .title_box p,#product_area .title_box .page_title{text-align: center;padding-left: 0;}
#product_area .title_box .page_title::before{display: none;}
#product_area ul li{padding: 0px;margin-bottom: 0;background-color: #fff;}
#product_area ul li .info_box{top: 280px;right: 0;z-index: 10;width: 100%;height: auto;margin: 0  0 0 auto;}
#product_area .row .img_box{}
#product_area img {height: 170px;object-fit: contain;}
#product_area .row .info_box >div {margin: auto;width: calc(100% - 0px);}
#product_area .row .info_box h3 {margin: 10px 0;padding-top: 10px;z-index: 5;overflow: hidden;white-space: nowrap;font-size: 17px;display: block;color: var(--info);text-align: center;height: 40px;}
#product_area .row .info_box .line {margin: 10px 0 20px;width: 50px;height: 4px;background: #172a88;opacity: .7;display: none;}
#product_area .row .info_box article {height: 45px;font-weight: 300;font-size: 16px;-webkit-line-clamp: 3;color: #000;}
#product_area .row .info_box .price { margin-top: 15px; min-height: 30px; }
#product_area .row .info_box .price font { margin-left: 20px; font-weight: 300; }


/* book_list */
#book_list .row img { height: 400px; }
#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: 50px 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;}
#form1{width:55%;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:20px;width:calc((100% / 1) - 0px);margin-right:30px}
input,textarea{padding:10px 10px;background-color:#fafafa;width:calc(100% - 20px)}

.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: 100px; }
.form_box #btnOK {padding: 5px 10px;width: 250px;color: #fff;}

/* 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 (min-width: 1281px){
	aside >ul{padding:0 15px}
	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}
	#product_area .row:hover .info_box .line{width:100%;background:#172a88}
	#book_list li:hover .info_box{}
	#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}
}
@media screen and (max-width: 1280px){
	aside {position: relative;width: 500px;margin: 1vw auto 3vw;}
	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; }
	#product_area .row .info_box {}
	#product_area .row .img_box {opacity: 1;}
	#news_list li img {height: 230px;}
	header #cis:before{}
	.bannerArea {height: 260px;padding-top: 60px;}
	.bannerText .pag_tit{font-size: 28px;margin-top: 5px;}
	.bannerText em{font-size:18px}
	#sub_banner{height: 370px;}
	.bread{top:45%}
	.bannerArea .Txt{top:63%;width:100%}
	.form_box{display:flex;flex-direction:column}
	.form_box .description_box,#form1{width: auto;}
	
}
@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)}
}
@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% / 1) - 60px)}
	#wrap{padding:2rem 0 3rem 0}
	#album_list {-moz-column-count: 1;-webkit-column-count: 1;column-count: 1;grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 761px){
	#product_area .list_box { margin: auto; width: 400px; }
	#product_area .row .info_box >div {width: calc(100% - 0px);}
	#product_area .row .info_box article { height: 50px; -webkit-line-clamp: 2; }
	#book_list .row img { height: 350px; }
	#faq_list #faqitem .info article{margin-left: 20px;}
}
@media screen and (max-width: 640px){
	#content_wrap {padding-bottom: 1vw;padding-top: 0vw;}
	aside {width: 100%;margin: 3vw auto 6vw;}
	#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% - 90px); }
	#product_area ul li{padding: 0px;margin: 0 0px 20px;}
	#product_area .row .info_box h3{right: -10px;}
	#news_list li{margin-left:0;margin-right:0}
	#news_list li{width:calc((100% / 1 ) - 30px)}
	#album_list >div .d_block img{height:100%}
}
@media screen and (max-width: 500px){
	#product_area .list_box { width: 100%; }
	#top_title .pag_tit:before {right: -224px;}
	#sub_banner {height: 230px;}
	.bannerArea{height:190px}
}