/* google fonts Start */
/* cyrillic-ext */
@font-face{
	font-family:'Raleway';
	font-style:normal;
	font-weight:100 900;
	src:url(../fonts/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
	unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face{
	font-family:'Raleway';
	font-style:normal;
	font-weight:100 900;
	src:url(../fonts/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
	unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face{
	font-family:'Raleway';
	font-style:normal;
	font-weight:100 900;
	src:url(../fonts/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
	unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face{
	font-family:'Raleway';
	font-style:normal;
	font-weight:100 900;
	src:url(../fonts/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
	unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
	font-family:'Raleway';
	font-style:normal;
	font-weight:100 900;
	src:url(../fonts/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* google fonts End */

/* commom Start */
body{
	color:#000;
	font-family:"Raleway", Arial, "微軟正黑體", "Microsoft JhengHei", "新細明體" , PMingLiU, sans-serif;
	background:#F5F5F5 url(../images/bg_b.png);
	padding-bottom:9rem;
}

@media (max-width: 1199px) {
	body{padding-top:66px;padding-bottom:5rem;}
}

/*.center-blocks{}*/
/*.bottom-blocks{background:#7B4E2C url(../images/bg_w.png);}*/
/*.footer-blocks{}*/

.block-title,
.bottomblock-title,
.footerblock-title{font-weight:bold;color:#000;}

/* btn-box-dark Start */
.btn-box-dark{
	display:inline-flex;
	align-items:center;
	gap:4px;
	padding:12px 20px;
	font-size:14px;
	font-weight:bold;
	color:#000;
	/*border:2px solid #000;*/
	border-radius:30px;
	text-decoration:none;
	overflow:hidden;
	cursor:pointer;
	position:relative;
}
.btn-box-dark:hover{color:#000;}
.arrow{
	width:18px;
	height:18px;
	position:relative;
}
.arrow path{transition:transform 0.3s ease;}
.btn-box-dark:hover .arrow path{animation:slideArrow 0.6s;}

@keyframes slideArrow{
	0%{
		transform:translate(0, 0);
		opacity:1;
	}
	50%{
		transform:translate(6px, -6px);
		opacity:0;
	}
	51%{
		transform:translate(-6px, 6px);
		opacity:0;
	}
	100%{
		transform:translate(0, 0);
		opacity:1;
	}
}
/* btn-box-dark End */
/* commom End */

/* slogan Start */
.slogan{margin-bottom:100px;margin-top:20px;}
.slogan-sub{position:relative;display:inline-block;}
.slogan-sub:before{
	content:'';
	display:block;
	width:2px;
	height:56px;
	background:#000;
	margin:0px auto 16px 8px;
}
.slogan-sub span{
	display:inline-block;
	font-weight:bold;
	letter-spacing:0.48em;
	transform:rotate(90deg);
	transform-origin:10px 10px;
	transition:all 0.35s ease;
}
.slogan:hover .slogan-sub span{transform:rotate(0deg);}
.slogan-content{padding-left:100px;}
.slogan-content .h2{font-weight:bold;}
.slogan-content .slogan-txt{line-height:2;}

@media (max-width: 767px) {
	.slogan{margin-bottom:60px;}
	.slogan-sub:before{margin:0px auto 12px 10px;height:35px;}
	.slogan-sub span{font-size:12px;}
	.slogan-content{padding-left:40px;padding-right:20px;}
	body{padding-bottom:3rem;}
}
/* slogan End */

/* subject Start */
.subject a{display:block;margin-bottom:20px;}
.subject .bi{font-size:60px;}
.subject .h5{font-weight:bold;margin:15px 0px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.subject .btn-box-dark{padding:12px 0px;margin-top:10px;}
.subject a:hover .btn-box-dark{
	color:#7B4E2C;
	background:linear-gradient(90deg, #B48A5C 0%, #7B4E2C 100%);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
}
.subject a:hover .btn-box-dark .arrow path{animation:slideArrow 0.6s;}
.subject .subject-txt{max-width:100%;height:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

.subject .mask{
	color:#000;
	background:linear-gradient(90deg, #B48A5C 0%, #7B4E2C 100%);/* 這是 hover 時的漸層 */
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	transition:all 0.35s ease;
}
/* 初始狀態用單色（覆蓋文字顏色）*/
.subject .mask.initial{
	background:none;
	-webkit-text-fill-color:#000;
	color:#000;
}
/* hover 時套用漸層（變色）*/
.subject .mask.initial:hover{
	background:linear-gradient(90deg, #B48A5C 0%, #7B4E2C 100%);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	color:transparent;
	transform:translateY(-2px);
}
/* subject End */

/* footer Start */
footer .footer{background:#000;color:#FFF;padding:50px 0px;}
footer .footer a{color:#FFF;}
footer .footer a:hover,
footer .footer a:focus{color:#FFF;}

footer .footer-menu{margin-bottom:0px;}
footer .footer-menu a{display:block;font-size:14px;padding:2px 0px;}
footer .footer-menu li:first-child a{font-size:16px;font-weight:bold;padding:0px 0px 20px;cursor:default;}
footer .footer-menu .bi{color:#5C5C5C;margin-right:10px;}

footer .social{text-align:right;}
footer .social a{display:inline-block;padding:0px 10px;}

footer .footer-border{border-top:1px solid rgba(255,255,255,0.2);margin:30px 0px;}
footer .footer-info{font-size:12px;color:rgba(255,255,255,0.5);}
footer .footer-info a{color:rgba(255,255,255,0.5);}

footer .footer-nav{text-align:right;}
footer .footer-nav ul{display:inline-block;}
footer .footer-nav li{float:left;margin:0px 5px;position:relative;}
footer .footer-nav li:after{
	content:'';
	position:absolute;
	left:50%;
	bottom:0px;
	width:0px;
	height:0px;
	border-left:3px solid transparent;
	border-right:3px solid transparent;
	border-bottom:3px solid rgba(255,255,255,0);
	transform:translateX(-50%);
}
footer .footer-nav li:hover:after{border-bottom:3px solid rgba(255,255,255,1);}
footer .footer-nav a{font-size:12px;color:rgba(255,255,255,0.5);}

footer .position-fixed.z-3{z-index: 3;}
@media (max-width: 767px) {
	footer .footer{padding:30px 0px;}
	footer .social{text-align:left;margin-bottom:20px;}
	footer .footer-info{text-align:center;margin-bottom:20px;}
	footer .footer-info span{display:block;}
	footer .footer-nav{text-align:center;}
}
/* footer End */

/* totop:floating-list Start */
#totop{display:none;}
.floating-list{
	position:fixed;
	right:-100px;
	bottom:100px;
	width:144px;
	z-index:99;
	color:#000;
	backdrop-filter:blur(10px);
	background:hsla(0,0%,100%,.7);
	box-shadow:0px 0px 15px rgba(0,0,0,.1);
	/*border:1px solid #E0E5EB;*/
	border-right:none;
	border-bottom:none;
	border-radius:10px;
	transition:all .3s ease-out;
}
.floating-list:hover{right:0px;}
.floating-list li{/*border-bottom:1px solid #E0E5EB;*/}
.floating-list a{display:inline-block;padding:10px;color:#000;}
.floating-list .bi{display:inline-block;width:44px;text-align:center;}

.floating-list a span{position:relative;}
.floating-list a span:after{
	content:'';
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
	height:1px;
	background:#000;
	transform:scaleX(0);
	transform-origin:bottom right;
	transition:transform .3s ease-out;
}
.floating-list a:hover span:after{
	transform:scaleX(1);
	transform-origin:bottom left;
}
/* totop:floating-list End */

/* header-search Start */
.header-search form{width:40px;height:40px;}

.header-search{
	position:fixed;
	right:45px;
	top:30px;
	display:flex;
	justify-content:center;
	align-items:center;
	width:40px;
	height:40px;
	margin:0px;
	border-radius:50%;
	z-index:999;
}
.nav-search{
	position:absolute;
	width:100px;
	height:58px;
	right:-9px;
	top:-9px;
	backdrop-filter:blur(10px);
	background:hsla(0,0%,100%,.7);
	box-shadow:0px 0px 15px rgba(0,0,0,.1);
	border-radius:35px;
	display:flex;
	align-items:center;
	opacity:0;
	transition:.5s;
}
.nav-search.open{width:320px;opacity:1;}
.nav-search input[type="text"]{
	width:100%;
	height:100%;
	border:none;
	border-radius:35px;
	background:transparent;
	padding:20px;
}
.nav-search input:focus{outline:none;box-shadow:none;}
.nav-search-icon{
	width:100%;
	height:100%;
	cursor:pointer;
	backdrop-filter:blur(10px);
	background:hsla(40,20%,97%,.7);
	box-shadow:0px 0px 15px rgba(0,0,0,.1);
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
}
.nav-search-icon svg{display:block;width:50%;}

@media (max-width: 1199px) {
	.header-search{
		right:20px;
		top:86px;
	}
	.nav-search.open{width:300px;}
}
/* header-search End */

/* share-buttons Start */
ul.share-buttons{list-style:none;padding:0px;margin:0px 0px 10px;}
ul.share-buttons li{display:inline-block;width:40px;height:40px;float:left;margin:0px 3px;}
ul.share-buttons li:first-child{margin-left:0px;}
ul.share-buttons li:last-child{margin-right:0px;width:auto;height:auto;}

ul.share-buttons li a{display:inline-block;width:40px;height:40px;background-color:#FF0000;border-radius:30px;position:relative;}
ul.share-buttons li a:before{
	position:absolute;
	width:40px;
	height:40px;
	line-height:40px;
	font-family:"Font Awesome 6 Free";
	color:#FFF;
	text-align:center;
}

ul.share-buttons li.share-buttons-email a{background-color:#000;}
ul.share-buttons li.share-buttons-email a:before{content:"\f0e0";font-size:16px;line-height:42px;}

ul.share-buttons li.share-buttons-googleplus a{background-color:#DC4B38;}
ul.share-buttons li.share-buttons-googleplus a:before{content:"\f0d5";font-size:16px;line-height:42px;}

ul.share-buttons li.share-buttons-facebook a{background-color:#3C5B99;}
ul.share-buttons li.share-buttons-facebook a:before{font-family:"Font Awesome 6 Brands";content:"\f39e";font-size:20px;line-height:42px;}

/*line*/
iframe.line-it-button{
	width:40px !important;
	height:40px !important;
	padding:5px 0px 0px 5px;
	background:#06C755;
	border-radius:30px;
}
/* share-buttons End */