@charset "utf-8";

body{ font-family:'Noto Sans TC',"微軟正黑體", "新細明體", "Arial Unicode MS"}

.container-fluid{ max-width:1200px;}

.footer{
	color:#fff;
	background-color:#30426a;
	text-align:center;
	padding:24px 15px;
}
.footer a{ color:#0FC;}

.share{margin:8px 0;}
.share img{margin:0 2px;}

.backtop{
	position:fixed;
	z-index:999;
	width:48px;
	height:48px;
	left:100%;
	top:100%;
	margin-top:-64px;
	margin-left:-64px;
	padding:5px;
	background-color:rgba(000,000,000,0.5);
	text-align:center;
	color:#fff;
	font-size:1.3rem;
	border-radius:4px;
	cursor:pointer;
	-webkit-transition: background 0.3s; /* Safari */ 
	transition: background 0.3s;
}
.backtop:hover{ background-color:#66f;}


.title_line{
	width:60px;
	height:4px;
	background-color:#30426a;
	margin:30px auto;
}


.navbar{ padding:0px;}
.navbar-brand{ margin-left:15px;}
@media (min-width:768px){.navbar-brand{ margin-left:0;}}
.navbar-toggler{ margin:15px;}
.navbar-nav .nav-item .nav-link{ padding:15px;}
.navbar-nav .nav-item .nav-link:hover{ background-color:#999;}



.menu_header{ position:fixed; z-index:9000; top:0; left:0; width:240px; height:100%; background-color:#30426a; -webkit-transition: margin 0.3s; /* Safari */ transition: margin 0.3s; overflow-y: auto;}

.menu_header img{ margin:12px 0;}

.menu_close{ left:100%; margin-left:0px;}
.menu_open{ left:100%; margin-left:-240px;}

.menu_header .container-fluid{ padding:0; position:relative; max-width:1200px;}


@media (min-width:992px){
	.menu_header{ position:fixed; width:100%; height:auto; background:#fff; border-bottom:0px solid #30426a; overflow-y:visible; -moz-box-shadow:0 4px 15px -2px gray; -webkit-box-shadow:0 4px 15px -2px gray; box-shadow:0 4px 15px -2px gray;}
	.menu_open, .menu_close{ left:0; margin-left:0;}
	.menu_header .container-fluid{ padding:0 15px;}
}

.logo_big{ display:none}
.logo_big img{ -webkit-transition: all 0.3s; /* Safari */ transition: all 0.3s; width:280px; height:auto; margin-top:15px;}
@media (min-width:992px){
	.logo_big{ display: block; text-align:center;  float:left;}
	.logo_big img{ width:300px; margin-top:18px; margin-bottom:18px;}
}
/*@media (min-width:1200px){
	.logo_big img{ width:300px; margin-top:22px; margin-bottom:16px;}
}*/


.menu_ul{list-style:none; padding:0;}
.menu_ul li{ border-bottom:1px dotted #66F;}

.menu_ul li a{ color:#fff; display:block; font-size:1.1rem; -webkit-transition: background 0.3s; /* Safari */ transition: background 0.3s;  padding:15px;}
.menu_ul li a:hover, .menu_ul li a:focus{ text-decoration:none; background-color:#66F;}

.menu_ul li a span{ display:block; font-size:0.8rem;}


@media (min-width:992px){
	.menu_ul{ text-align:center; border-radius:4px; height:34px; float:right; margin-top:0px;}
	.menu_ul li{ float:left; border:none; position:relative;}
	.menu_ul li a{ color:#555; font-size:1rem; width:auto; text-align:center; padding:32px 10px;}
	.menu_ul li a:hover, .menu_ul li a:focus{ color:#30426a; background-color:transparent;}
	.menu_ul .mobile_home{ display:none;}
}
@media (min-width:1200px){
	.menu_ul li a{ font-size:1rem; width:auto; text-align:center; padding:32px 18px;}
}


.mobile_hide{ background-color:#000; opacity:0; position:fixed; z-index:8999; top:0; left:0; width:100%; height:100%;}

.mobile_header{ background-color:#fff; position:fixed; z-index:8900; height:72px; width:100%; border-bottom:0px solid #30426a; -moz-box-shadow:0 4px 15px -2px gray; -webkit-box-shadow:0 4px 15px -2px gray; box-shadow:0 4px 15px -2px gray;}

.mobile_header img{ margin:15px 0 0 15px;}

.iconbar{float:right; width:48px; height:36px; margin:15px 15px 0 15px; border:2px solid #525269; border-radius:4px; cursor:pointer; background-position:center; background-repeat:no-repeat;-webkit-transition: background 0.2s; /* For Safari 3.1 to 6.0 */ transition: background 0.2s;}

.iconbar_open{background-image:url(../img/iconbar.png);}
.iconbar_close{background-image:url(../img/iconbar2.png); border-color:#30426a;}

.menu_title{ margin:3px 15px; padding-top:15px; padding-bottom:16px; color:#fff; font-family:Verdana, Geneva, sans-serif;}

@media (min-width:992px){
	.mobile_hide{ display:none;}
	.mobile_header{ display:none;}
	.iconbar_close{ display:none;}
	.menu_title{ display:none;}
}

.menu_ul .mobile_language{ color:#fff; margin:10px 15px; border:none;}
.menu_ul .mobile_language a{ display:inline-block; padding:10px 16px; font-size:0.9rem; border:1px solid #fff; border-radius:5px;}
.menu_ul .mobile_language a:hover,
.menu_ul .mobile_language a.active{ background-color:#fff; color:#2a2b83;}
@media (min-width:992px){
	.menu_ul .mobile_language{ display:none;}
}

.search_nav{ display:none;}
@media (min-width:992px){
	.search_nav{ position:absolute; padding:0; list-style:none; top:2px; left:100%; width:400px; margin-left:-430px; text-align:right; display:block;}
	.search_nav li{ display:inline-block; font-size:0.8rem; margin-left:15px;}
	.search_nav li a{ color:#2a2b83;}
	.search_nav li a:hover{ color:#946cad; text-decoration:none;}
}
@media (min-width:1200px){
	.search_nav{ margin-left:-445px;}
}

.menu_ul .sub_nav{ display:none;}
@media (min-width:992px){
	.menu_ul .sub_nav{ position:absolute; top:88px; -moz-box-shadow:0 4px 15px -2px gray; -webkit-box-shadow:0 4px 15px -2px gray; box-shadow:0 4px 15px -2px gray;}
	.menu_ul .sub_nav a{ background-image:none; padding:15px 15px; margin:0; border-top:0px dotted #ccc; background-color:#333; color:#ccc; width:200px; margin-left:0; font-size:0.9rem; text-align:left; }
	.menu_ul .sub_nav a:hover{background-color:#555; color:#fff; border-bottom:none;}
}
@media (min-width:1600px){
	.menu_ul .sub_nav a{width:220px; margin-left:0; padding:15px 30px;}
}

@media (min-width:992px){
	.nav_about:hover .sub_nav_about,
	.nav_product:hover .sub_nav_product,
	.nav_solution:hover .sub_nav_solution,
	.nav_news:hover .sub_nav_news,
	.nav_contact:hover .sub_nav_contact{ display:block;}
}
.fadeInRight{
  -webkit-animation: fadeInRight 0.4s; /* Safari 4+ */
  -moz-animation:    fadeInRight 0.4s; /* Fx 5+ */
  -o-animation:      fadeInRight 0.4s; /* Opera 12+ */
  animation:         fadeInRight 0.4s; /* IE 10+, Fx 29+ */
}

.nav_divide{ display:none;}
@media (min-width:992px){
	.nav_divide{width:1rem; color:#555; margin-top:30px; display:inline-block;}
}
@media (min-width:1200px){
	.nav_divide{margin-top:30px;}
}




.top_blank{ height:72px;}
@media (min-width:992px){
	.top_blank{ height:88px;}
}


.carousel-fade .carousel-inner .carousel-item {
	height: 320px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	
	-webkit-transform: translateX(0);
	transform: translateX(0);
	transition-property: opacity;
	-webkit-transition-duration: 1.0s;
    -moz-transition-duration: 1.0s;
    -o-transition-duration: 1.0s;
    transition-duration: 1.0s;
	
	position:relative;
	
}
.carousel-fade .carousel-inner .carousel-item,
.carousel-fade .carousel-inner .active.carousel-item-left,
.carousel-fade .carousel-inner .active.carousel-item-right {
	opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right {
	opacity: 1;
}

.carousel-caption{ top:110px; text-shadow: 0px 0px 5px #000, 0px 0px 10px #333, 0px 0px 15px #555;}
.carousel-caption h2{ animation-duration:1s; font-weight:900;}
.carousel-caption p{ margin:15px 0; animation-delay:0.5s; animation-duration:1s; display:none;}

@media (min-width:992px){
	.carousel-fade .carousel-inner .carousel-item { height:480px;}
	.carousel-caption h2{ font-size:2.8rem; animation-duration:1s;}
	.carousel-caption p{ font-size:1.2rem; display:block; max-width:1040px; margin-left:auto; margin-right:auto;}
	.carousel-caption{ top:160px;}
}
@media (min-width:1600px){
	.carousel-fade .carousel-inner .carousel-item { height:640px;}
	.carousel-caption h2{ font-size:2.8rem; animation-duration:1s;}
	.carousel-caption p{ font-size:1.2rem;}
	.carousel-caption{ top:240px;}
}


@keyframes animatedBackground {
    0% {transform: scale(1.0);}
    100% {transform: scale(1.2);}
}
@-moz-keyframes animatedBackground {
    0% {transform: scale(1.0);}
    100% {transform: scale(1.2);}
}
@-webkit-keyframes animatedBackground {
    0% {transform: scale(1.0);}
    100% {transform: scale(1.2);}
}
@-ms-keyframes animatedBackground {
    0% {transform: scale(1.0);}
    100% {transform: scale(1.2);}
}
@-o-keyframes animatedBackground {
    0% {transform: scale(1.0);}
    100% {transform: scale(1.2);}
}


.carousel-item .top_banner_pic{
	display:none;
}
.carousel-item .top_banner_pic img{
}
@media (min-width:992px){
.carousel-item .top_banner_pic{ 
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	animation: animatedBackground 12s infinite alternate;
    -moz-animation: animatedBackground 12s infinite alternate;
    -webkit-animation: animatedBackground 12s infinite alternate;
    -ms-animation: animatedBackground 12s infinite alternate;
    -o-animation: animatedBackground 12s infinite alternate;
}
.carousel-item .top_banner_pic img{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:auto;
	height:auto;
	min-width: 100%;
  	min-height: 100%;
}
}



.scroll_down{ display:none;}
@media (min-width:992px){
	.scroll_down{ height:64px; width:28px; border:3px solid #fff; border-radius:14px; position:absolute; z-index:99; top:100%; left:50%; margin-top:-120px; margin-left:-14px;-webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */ transition: all 0.3s; display:block;}
	.scroll_down:hover{ border:3px solid #09f;}
	.scroll_item{ height:16px; width:4px; border-radius:2px; background-color:#fff; margin:15px auto;}
	.scroll_down:hover .scroll_item{ background-color:#09f;}
}




.view_lg{ display:none;}
@media (min-width:992px){
	.view_sm{ display:none;}
	.view_lg{ display:block;}
}






.prev-alt{ background-color:#30426a; color:#fff; position:absolute; z-index:555; cursor:pointer; top:50%; left:0%; padding:14px 15px 16px 15px; transform:translate(0,-50%); opacity:0.75;}
.prev-alt:hover{ opacity:1;}
.next-alt{ background-color:#30426a; color:#fff; position:absolute; z-index:555; cursor:pointer; top:50%; left:100%; padding:14px 15px 16px 15px; transform:translate(-100%,-50%); opacity:0.75;}
.next-alt:hover{ opacity:1;}


.top_title{ color:#555;}

.top_more{ margin:30px 0 15px 0;}
.top_more a{ padding:15px 40px; background-color:#30426a; color:#fff; -webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */ transition: all 0.2s;}
.top_more a:hover{ background-color:#66F; text-decoration:none;}
.top_more a i{ margin-right:10px;}


.top_block1{ padding:80px 0; color:#777;}
.top_block1 .container-fluid{ height:100%; position:relative;}


.top_tech_pic{ background-position:center; background-size:cover; height:320px; margin-bottom:30px;  -moz-box-shadow:0 4px 15px -2px gray; -webkit-box-shadow:0 4px 15px -2px gray; box-shadow:0 4px 15px -2px gray;}

.top_tech_text .top_title{ font-size:3rem; letter-spacing:-2px;}
.top_tech_text .top_title span{ color:#30426a; display:block;}
.top_tech_text h3{ margin:30px 0;}
.top_tech_text p{ line-height:1.8rem;}

@media (min-width:992px){ 
	.top_block1{ height:880px; padding:0;}
	
	.top_tech_pic{ position:absolute; z-index:5; top:128px; height:640px; width:50%; margin-bottom:0;}
	.top_tech_text{ position:absolute; z-index:4; top:128px; left:calc(50% + 60px); width:calc(50% - 80px); background-color:#fff; padding:0 15px;}
	
	.top_tech_border{ position:absolute; z-index:3; top:80px; left:calc(50% - 60px); border:4px solid #30426a; width:50%; height:640px;}
	.top_tech_border .top_more{ padding-top:590px; text-align:center;}
}
@media (min-width:1200px){ 
	.top_tech_text .top_title{ font-size:4rem;}
	.top_tech_text{ padding:0 30px;}
}


.top_block2{ background-color:#30426a; color:#fff; padding:80px 0; height:600px; text-align:center; background-image:url(../img/top_bg2.jpg); background-size:cover; background-position:center;}
.top_block2 .top_title{ color:#fff;}
.top_block2 h3{ margin:30px 0;}

.top_product_slick{}

.top_product_con{}
.top_product_con h4{ color:#555;}
.top_product_con ul{ padding:0px 30px; list-style:none; color:#777; height:6rem;}
.top_product_con ul li{ display:inline-block;}
.top_product_con ul li::after{ content:",";}
.top_product_con ul li:last-child::after{ content:"..."}

.top_product_pic{ height:480px; background-position:center; background-size:cover; position:relative; margin:15px 0; -webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */ transition: all 0.2s;}
.top_product_con:hover .top_product_pic{ height:500px; margin-top:-20px;}
.top_product_pic a{ position:absolute; width:100%; height:100%; background-color:#1585cd; opacity:0; -webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */ transition: all 0.2s; display:block;}
.top_product_pic a:hover{ opacity:0.5;}
@media (min-width:992px){
	.top_product_pic{ margin:15px;}
}

@media (min-width:1200px){ 
	.top_block2 .top_title{ font-size:4rem;}
}


.top_block3{ padding:440px 0 80px 0;}
.top_block3 .container-fluid{ height:100%; position:relative;}

.top_news_pic{ background-position:center; background-size:cover; height:320px; margin-bottom:30px;  -moz-box-shadow:0 4px 15px -2px gray; -webkit-box-shadow:0 4px 15px -2px gray; box-shadow:0 4px 15px -2px gray;}

.top_news_text .top_title{ font-size:3rem; letter-spacing:-2px;}
.top_news_text .top_title span{ color:#30426a;}
.top_news_text h3{ margin:30px 0;}
.top_news_text p{ line-height:1.8rem;}


.top_news_con{ border-bottom:1px solid #ccc; padding-bottom:15px; margin-bottom:15px; position:relative;}
.top_news_con a{ position:absolute; top:0; left:0; width:100%; height:100%; background-color:#FFF; opacity:0;-webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */ transition: all 0.2s;}
.top_news_con a:hover{ opacity:0.4;}
.top_news_con:hover .top_news_con_date{background-color:#66f;}

.top_news_con_date{ width:120px; height:26px; font-size:1rem; text-align:center; color:#fff; background-color:#30426a; margin-bottom:10px;}
.top_news_con_date span::before{ content:"/";}


@media (min-width:992px){ 
	.top_block3{ height:1240px; padding:480px 0 0 0;}
	
	.top_news_pic{ position:absolute; z-index:5; top:0px; left:50%; height:640px; width:50%; margin-bottom:0;}
	.top_news_text{ position:absolute; z-index:4; top:0px; left:0; width:calc(50% - 30px); background-color:#fff; padding:0 15px;}
	
	.top_news_border{ position:absolute; z-index:3; top:-50px; left:80px; border:4px solid #30426a; width:50%; height:640px;}
	.top_news_border .top_more{ padding-top:590px; text-align:center;}

	
	.top_news_con_date{ width:88px; height:88px; font-size:3rem; line-height:2.4rem; padding-top:12px; margin-bottom:0; text-align:center; color:#fff; background-color:#30426a; float:left;}
	.top_news_con_date span{ font-size:0.8rem; display:block;}
	.top_news_con_date span::before{ content:"";}
	.top_news_con_text{ margin-left:104px;}
	.top_news_con_text h4,
	.top_news_con_text p{ white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; -webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */ transition: all 0.2s;}
	
}
@media (min-width:1200px){ 
	.top_news_text .top_title{ font-size:4rem;}
	.top_news_text{ padding:0 30px;}
}




.top_contact_block{ padding:32px 0; background-color:#ededed; }

.top_contact_text{ text-align:center;}
@media (min-width:992px){ .top_contact_text{ text-align:left;}}
.top_contact_text ul{ list-style:none; padding:0; font-size:0.95rem; margin-top:10px; color:#555;}



.site_map{ display:none;}
@media (min-width:992px){.site_map{ display:block;}}
.site_map_con h5 a{color:#30426a; font-size:1.1rem;}
.site_map_con ul{ list-style:none; padding:0; font-size:0.95rem;}
.site_map_con ul li a{color:#555;}

.site_map_con h5 a:hover,
.site_map_con ul li a:hover{ color:#66f; text-decoration:none;}


.guide{ margin-top:32px; margin-bottom:32px;}
.guide a{ color:#fff; background-color:#30426a; padding:12px 16px; -webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */ transition: all 0.2s;}
.guide a:hover{ text-decoration:none; background-color:#66f; color:#fff;}
@media (min-width:768px){.guide{ display:none;}}



.page_banner{ background-position:center; background-size:cover; height:400px; position:relative;}
.page_banner h3{ text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,0); color:#fff; text-shadow: 0px 0px 5px #000, 0px 0px 10px #333, 0px 0px 15px #555;}


.page_bread{ background-color:#30426a; margin:0; font-size:0.9rem; display:table; width:100%; position:relative;}
.page_bread .container-fluid{}
.page_bread .breadcrumb { background:none; float:right; text-align:left;   padding:15px 0 0 0;}
.page_bread .breadcrumb li{ border-radius:0; color:#fff;}
.page_bread .breadcrumb li::before{ color:#fff;}
.page_bread .breadcrumb a{ color:#fff;}
.page_bread .breadcrumb a:hover{color:#FC6; text-decoration:none;}


.page_anchor{ position:absolute; top:-88px;}



.about_block1{ padding: 80px 0; color:#777; position:relative;}
.about_block1 .container-fluid{ height:100%; position:relative;}

.page_about_pic{ background-position:center; background-size:cover; height:320px; margin-bottom:30px;  -moz-box-shadow:0 4px 15px -2px gray; -webkit-box-shadow:0 4px 15px -2px gray; box-shadow:0 4px 15px -2px gray;}

.page_about_text .top_title{ font-size:3rem; letter-spacing:-2px;}
.page_about_text .top_title span{ color:#30426a;}
.page_about_text h3{ margin:30px 0;}
.page_about_text p{ line-height:1.8rem;}



@media (min-width:992px){ 
	.about_block1{ height:720px; padding:0;}
	
	.page_about_pic{ position:absolute; z-index:5; top:80px; left:50%; height:640px; width:50%; margin-bottom:0;}
	.page_about_text{ position:absolute; z-index:4; top:180px; left:0; width:calc(50% - 30px); background-color:#fff; padding:0 15px;}
	
	.page_about_border{ position:absolute; z-index:3; top:120px; left:80px; border:4px solid #30426a; width:50%; height:640px;}
	.page_about_border .top_more{ padding-top:590px; text-align:center;}
	
	.about_block1 .page_about_pic{height:480px;}
	.about_block1 .page_about_border{height:480px;}

}
@media (min-width:1400px){ 
	.page_about_text .top_title{ font-size:4rem;}
	.page_about_text{ padding:0 30px;}
}


.about_block2{ background-color:#30426a; color:#fff; padding:80px 0; text-align:center; background-image:url(../img/top_bg2.jpg); background-size:cover; background-position:center; position:relative;}
.about_block2 .container-fluid{ max-width:1200px;}
.about_block2 .top_title{ color:#fff;}
.about_block2 h3{ margin:30px 0;}

.page_team_con{ margin:15px 0;}
.page_team_pic{ border:4px solid #fff; width:150px; height:150px; padding-top:30px; border-radius:50%; text-align:center; margin:0 auto 15px auto;}
.page_team_pic img{ width:80px; height:auto; margin:0 auto 15px auto;}

@media (min-width:1200px){ 
	.about_block2 .top_title{ font-size:4rem;}
}


.about_block3{ padding: 80px 0; color:#777; position:relative;}
.about_block3 .container-fluid{ height:100%; position:relative;}
@media (min-width:992px){ 
	.about_block3{ height:880px; padding:0;}
	
	.about_block3 .page_about_pic{left:0;}
	.about_block3 .page_about_text{ position:absolute; z-index:4; top:180px; left:calc(50% + 60px); width:calc(50% - 80px); background-color:#fff; padding:0 15px;}
	.about_block3 .page_about_border{ position:absolute; z-index:3; top:120px; left:calc(50% - 60px); border:4px solid #30426a; width:50%; height:640px;}
	
}


.about_block4{ background-color:#30426a; color:#fff; padding:80px 0; text-align:center; background-image:url(../img/about_bg4.jpg); background-size:cover; background-position:center;}
.about_block4 .top_title{ color:#fff;}
.about_block4 h3{ margin:30px 0;}

.page_certificate_pic img{ width:100%; height:auto;}
@media (min-width:1200px){ 
	.about_block4 .top_title{ font-size:4rem;}
}


.business_block1{ padding:80px 0; text-align:center; color:#777;}
.business_block1 .top_title span{ color:#30426a;}

/*.business_pic{ margin-top:30px;}
.business_pic img{max-width:720px; width:100%; height:auto;}*/


.page_business_row .col-xl-3{ margin-top:15px; margin-bottom:15px; position:relative;}
.page_business_con{ background-color:#ededed; text-align:left; position:relative; height:100%;}
.page_business_title{ background-color:#30426a; color:#fff; padding:15px; font-size:1.6rem; position:absolute; top:160px; width:200px;}
.page_business_pic{ height:200px; background-position:center; background-size:cover;}
.page_business_text{ padding:45px 15px 15px 15px;}
.page_business_text ul{ padding:0; list-style:none;}
.page_business_text ul li{ border-bottom:1px solid #ccc; padding-bottom:10px; margin-bottom:10px;}
.page_business_text ul li a{ color:#30426a;}
.page_business_text ul li a::before{ content:"》"}

@media (min-width:1200px){
	.business_block1 .top_title{ font-size:4rem;}
}


.tech_block1{ padding: 80px 0; color:#777;}
.tech_block1 .container-fluid{ height:100%; position:relative;}
@media (min-width:992px){ 
	.tech_block1{ height:880px; padding:0;}
}

.tech_block2{ background-color:#30426a; color:#fff; padding:80px 0; text-align:center; background-image:url(../img/top_bg2.jpg); background-size:cover; background-position:center;}
.tech_block2 .top_title{ color:#fff;}
.tech_block2 h3{ margin:30px 0;}

.tech_block3{ padding: 80px 0; color:#777;}
.tech_block3 .container-fluid{ height:100%; position:relative;}

.tech_block3 .page_about_text h3 span{color:#30426a; font-size:3rem;}

@media (min-width:992px){ 
	.tech_block3{ height:600px; padding:0;}
	.tech_block3 .page_about_pic{left:0; height:440px;}
	.tech_block3 .page_about_text{ position:absolute; z-index:4; top:180px; left:calc(50% + 60px); width:calc(50% - 80px); background-color:#fff; padding:0 15px;}
	.tech_block3 .page_about_border{ position:absolute; z-index:3; top:120px; left:calc(50% - 60px); border:4px solid #30426a; width:50%; height:440px;}
}

.tech_block4{ padding: 80px 0; color:#777;}
.tech_block4 .container-fluid{ height:100%; position:relative;}

.tech_block4 .page_about_text h3 span{color:#30426a; font-size:3rem;}
@media (min-width:992px){ 
	.tech_block4{ height:600px; padding:0;}
	.tech_block4 .page_about_pic{ height:440px; top:40px;}
	.tech_block4 .page_about_text{ top:140px;}
	.tech_block4 .page_about_border{ height:440px; top:80px;}
}




.side_nav_title_wrapper{ padding:20px 0 14px 0; background-color:#30426a; color:#fff;}
.side_nav_title{ padding-left:30px; font-size:1.2rem;}
.side_nav_title span{ font-size:2rem;}

.side_nav ul{ padding:0; list-style:none;}
.side_nav ul li{ }
.side_nav ul li a{ padding:10px 15px 10px 30px; color:#555; background-image:url(../img/arrow.png); background-repeat:no-repeat; background-position:-60px 16px; background-size:auto 12px; overflow:hidden; display:block; -webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */ transition: all 0.2s;}
.side_nav ul li a:hover,
.side_nav ul li a.active{ color:#30426a; text-decoration:none; background-position:10px 16px;}
.side_nav ul .side_nav_sub li{}
.side_nav ul .side_nav_sub li a{ font-size:0.9rem; padding:2px 15px 2px 45px; background-image:none;}


.product_block{ padding:80px 0; color:#777;}
.product_title{ color:#555; border-bottom:1px solid #ccc; margin-bottom:15px; padding-bottom:15px;}


.page_product_con{ margin:15px 0; position:relative; -webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */ transition: all 0.2s;}
.page_product_con:hover{ transform:translateY(-15px); -moz-box-shadow:0 4px 15px -2px gray; -webkit-box-shadow:0 4px 15px -2px gray; box-shadow:0 4px 15px -2px gray;}
.page_product_con a{ position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; opacity:0; -webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */ transition: all 0.2s;}
.page_product_con a i{ font-size:3rem; margin-top:128px; padding-top:22px; color:#fff; background-color:#30426a; width:96px; height:96px; border-radius:50%;}
.page_product_con a:hover{ opacity:0.8;}
.page_product_pic{ height:200px; background-position:center; background-size:cover;}
.page_product_text{ padding:15px;}
.page_product_text h4{ border-bottom:1px solid #ccc; padding-bottom:15px; margin-bottom:15px;}



.product_detail_intro_pic img{ width:100%; height:auto;}
.product_feature_title{ border-left:8px solid #30426a; padding-left:15px; }

.product_album_con{ margin:15px 0; text-align:center; position:relative;}
.product_album_con a{ position:absolute; top:0; left:0; width:100%; height:100%; background-color:#fff; opacity:0; -webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */ transition: all 0.2s;}
.product_album_con a:hover{ opacity:0.4;}
.product_album_pic{ height:200px; background-position:center; background-size:cover;}
.product_album_text{ margin:15px 0; font-size:0.9rem;}

.solution_page{ padding:80px 0; color:#777;}
/*.solution_page .page_title{ margin:30px 0 10px 0;}*/
.page_solution_pic{ height:300px; background-position:center; background-size:cover; margin-bottom:30px; -moz-box-shadow:0 4px 15px -2px gray; -webkit-box-shadow:0 4px 15px -2px gray; box-shadow:0 4px 15px -2px gray;}
.solution_block1 .page_title{ margin:30px 0;}
.solution_page .content_title{ color:#30426a; padding-bottom:10px; font-size:1.5rem;}

.content_wrap .row .list_box{ padding:15px;}
.content_wrap .row .list_box:nth-child(odd){ background:#e7f1ff;}
.content_wrap ul{ padding-left:1.7rem;}
.step_list{ list-style:decimal;}
.step_list li{ padding-bottom:7px; border-bottom:1px dashed #CCC;}

@media (min-width: 992px) {
	.content_wrap .row .list_box{ padding:25px;}
}

.maintenance_info{ padding:30px 0;}
.maintenance_info h3{ font-size:1.7rem; font-weight:bold; color:#30426a;}
@media (min-width:992px){ 
	.maintenance_info{ padding:30px 70px;}
}

.maintenance_block1{ padding: 80px 0; color:#777;}
.maintenance_block1 .container-fluid{ height:100%; position:relative;}

.maintenance_block1 .page_about_text h3 span{color:#30426a; font-size:3rem;}

@media (min-width:992px){ 
	.maintenance_block1{ height:880px; padding:0;}
	.maintenance_block1 .page_about_pic{ height:720px;}
	.maintenance_block1 .page_about_text{}
	.maintenance_block1 .page_about_border{ height:720px;}
}

.page_maintenance_dl dt{ line-height:1.2rem;}
.page_maintenance_dl dd{ line-height:1.2rem;}


.maintenance_block2{ padding: 80px 0; color:#777;}
.maintenance_block2 .container-fluid{ height:100%; position:relative;}

.maintenance_block2 .page_about_text h3 span{color:#30426a; font-size:3rem;}

@media (min-width:992px){ 
	.maintenance_block2{ height:960px; padding:0;}
	.maintenance_block2 .page_about_pic{left:0; height:800px;}
	.maintenance_block2 .page_about_text{ position:absolute; z-index:4; top:180px; left:calc(50% + 60px); width:calc(50% - 80px); background-color:#fff; padding:0 15px;}
	.maintenance_block2 .page_about_border{ position:absolute; z-index:3; top:120px; left:calc(50% - 60px); border:4px solid #30426a; width:50%; height:800px;}
}


.maintenance_block3{ padding: 80px 0; color:#777;}
.maintenance_block3 .container-fluid{ height:100%; position:relative;}

.maintenance_block3 .page_about_text h3 span{color:#30426a; font-size:3rem;}

.page_maintenance_ul{ padding:0; list-style:none;}
.page_maintenance_ul li{ display:inline-block;}
.page_maintenance_ul li::after{ content:", "}
.page_maintenance_ul li:last-child::after{ content:"";}

@media (min-width:992px){ 
	.maintenance_block3{ height:560px; padding:0;}
	.maintenance_block3 .page_about_pic{ height:400px;}
	.maintenance_block3 .page_about_text{}
	.maintenance_block3 .page_about_border{ height:400px;}
}


.maintenance_block4{ padding: 80px 0; color:#777;}
.maintenance_block4 .container-fluid{ height:100%; position:relative;}

.maintenance_block4 .page_about_text h3 span{color:#30426a; font-size:3rem;}

@media (min-width:992px){ 
	.maintenance_block4{ height:560px; padding:0;}
	.maintenance_block4 .page_about_pic{left:0; height:400px;}
	.maintenance_block4 .page_about_text{ position:absolute; z-index:4; top:180px; left:calc(50% + 60px); width:calc(50% - 80px); background-color:#fff; padding:0 15px;}
	.maintenance_block4 .page_about_border{ position:absolute; z-index:3; top:120px; left:calc(50% - 60px); border:4px solid #30426a; width:50%; height:400px;}
}

.maintenance_block5{ padding: 80px 0; color:#777;}
.maintenance_block5 .container-fluid{ height:100%; position:relative;}

.maintenance_block5 .page_about_text h3 span{color:#30426a; font-size:3rem;}


@media (min-width:992px){ 
	.maintenance_block5{ height:560px; padding:0;}
	.maintenance_block5 .page_about_pic{ height:400px;}
	.maintenance_block5 .page_about_text{ top:220px;}
	.maintenance_block5 .page_about_border{ height:400px;}
}


.news_block1{ padding: 80px 0; color:#777;}
.news_block1 .top_title{ font-size:3rem; letter-spacing:-2px; text-align:center}
.news_block1 .top_title span{ color:#30426a;}
.news_block1  h3{ margin:30px 0; text-align:center}


.page_news_con{ position:relative; color:#777; border-bottom:1px solid #ccc; padding-bottom:15px; margin-bottom:15px;}
.page_news_pic{ height:240px; background-position:center; background-size:cover;}
.page_news_text h4{ color:#555;}
.page_news_date{ margin:10px 0;}
.page_news_date span{ margin-right:5px; background-color:#30426a;}
.page_news_date a{ margin-left:10px; color:#30426a;}

@media (min-width:992px){
	.page_news_pic{ width:320px; height:200px; float:left;}
	.page_news_text{ margin-left:340px;}
}
@media (min-width:1200px){
	.page_news_pic{ width:320px; height:200px; float:left;}
	.page_news_text{ margin-left:340px;}
	
	.news_block1 .top_title{ font-size:4rem;}
}


.pagination .page-item .page-link{ color:#30426a;}
.pagination .page-item.active .page-link{ background-color:#30426a; border-color:#30426a; color:#fff;}
.pagination { justify-content: center;}



.news_detail_block{ padding:80px 0; color:#777;}
.news_detail_block .container-fluid{ max-width:1200px;}
.news_detail_block .news_detail_title{ color:#555; border-bottom:1px solid #ccc; margin-bottom:15px; padding-bottom:15px;}

.news_detail_content img{ max-width:100%; height:auto;}

.back_btn{ margin:30px 0;}
.back_btn a{ padding:15px 40px; background-color:#30426a; color:#fff; border-radius:0; -webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */ transition: all 0.2s;}
.back_btn a:hover{ background-color:#66f; text-decoration:none;}

.page_news_date_ul{ padding:0; list-style:none;}
.page_news_date_ul li{ display:inline-block; margin-right:10px;}

.news_share_line a{ color:#00b900; font-size:1.6rem; float:left; margin-bottom:-12px;}

.page_news_link{ margin:30px 0;}
.page_news_link a{ color:#369;}







.contact_block1{ padding: 80px 0; color:#777;}
.contact_block1 .container-fluid{ height:100%; position:relative;}

.contact_block1 form{}
.contact_block1 form .form-group textarea{border-radius:0; padding:25px; background-color:#ededed;}
.contact_block1 form .form-group input{ border-radius:0; padding:25px; background-color:#ededed;}
.contact_block1 form .form-group select{ border-radius:0; padding:0 22px; background-color:#ededed; height:52px;}
.contact_block1 form .form-group button{ background-color:#30426a; border-color:#30426a; color:#fff; border-radius:0; padding:15px 0; width:118px; text-align:center; }
.contact_block1 form .form-group button[type="reset"]{background-color:#ccc; border-color:#ccc; color:#555;}


.page_contact_pic{ background-position:center; background-size:cover; height:auto; margin-bottom:30px;  -moz-box-shadow:0 4px 15px -2px gray; -webkit-box-shadow:0 4px 15px -2px gray; box-shadow:0 4px 15px -2px gray;  background-color:#30426a; color:#fff;}

.page_contact_text .top_title{ font-size:3rem; letter-spacing:-2px;}
.page_contact_text .top_title span{ color:#30426a;}
.page_contact_text h3{ margin:30px 0;}
.page_contact_text p{ line-height:1.8rem;}

.page_contact_pic iframe{ height:240px;}
.page_contact_info{ padding:15px;}



@media (min-width:992px){ 
	.contact_block1{ height:1080px; padding:0;}
	
	.page_contact_pic{ position:absolute; z-index:5; top:80px; left:50%; height:800px; width:50%; margin-bottom:0;}
	.page_contact_pic iframe{ height:640px;}
	
	.page_contact_text{ position:absolute; z-index:4; top:180px; left:0; width:calc(50% - 30px); background-color:#fff; padding:0 15px;}
	
	.page_contact_border{ position:absolute; z-index:3; top:120px; left:80px; border:4px solid #30426a; width:50%; height:880px;}
	.page_contact_border .top_more{ padding-top:590px; text-align:center;}
	
	.page_contact_info{ padding:30px 45px;}

}
@media (min-width:1400px){ 
	.page_contact_text .top_title{ font-size:4rem;}
	.page_contact_text{ padding:0 30px;}
}


/*========================================================
                   知識中心文章排版與分類設定
=========================================================*/

.page_banner h1{ text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; text-shadow: 0px 0px 5px #000, 0px 0px 10px #333, 0px 0px 15px #555;}
.page_banner .page_banner_title{ font-size: 2rem; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; text-shadow: 0px 0px 5px #000, 0px 0px 10px #333, 0px 0px 15px #555;}
.page_banner h1 span,.page_banner .page_banner_title span{ font-size:1.2rem;}

.page_block{ padding: 80px 0; color:#777; position:relative;}

.page_subtitle{ font-size:3rem; letter-spacing:-2px; font-weight: 700; color:#555;}
.page_subtitle span{ color:#30426a; }
.page_title{ margin:30px 0; font-weight:700; color:#777;}
/*.page_title2{ padding-bottom:30px; font-size:1.5rem;}*/

@media (min-width:1200px){ 
	.page_subtitle{ font-size:4rem;}
}

.home_banner_more{margin: 45px auto; text-shadow: none;}
.home_banner_more a{ padding:10px 30px; border-radius: 0px; background-color:#30426a; color:#fff; -webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */ transition: all 0.3s;}
.home_banner_more a i{margin-left: 15px; -webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */ transition: all 0.3s;}
.home_banner_more a:hover{background-color:#6666ff; color:#fff; text-decoration: none;}

.page_knowledge_item{margin:15px 0; padding: 0px; transition: all 0.3s; transition-timing-function: ease-in;}
.page_knowledge_text h4{ font-size:1.2rem; font-weight:700; color:#555; margin-bottom: 15px;}
.page_knowledge_pic{ height:240px; border-radius: 0px; margin-bottom: 15px; overflow: hidden;}
.page_knowledge_pic img{ width:100%; height:100%; object-fit: cover; object-position: center center; transition: all 0.3s;}
.page_knowledge_item:hover .page_knowledge_pic img{ transform:scale(1.2); }
@media (min-width:992px){
	.page_knowledge_pic{height: 240px;}
}

.price-filters {
    list-style: none;
    padding: 0;
    margin: 0;
}
.price-filters li {
    display: inline-block;
    margin: 5px;
}
.price-filters a {
    display: block;
    padding: 10px 20px;
    background: #f5f5f5;
    color: #333;
    border-radius: 0px;
    text-decoration: none;
    transition: all 0.3s;
}
.price-filters a:hover, .price-filters a.active {
    background: #30426a;
    color: #fff;
}

.content-list-container {
	background: #f9f9f9;
	border: 1px solid #aaa;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
	box-shadow: 0 1px 1px rgba(0,0,0,.05);
	display: table;
	margin: 0 auto 30px;
	padding: 30px;
	position: relative;
	width: auto;
}
.content-list-container a {
	color: #444;
	box-shadow: none;
	text-decoration: none;
	text-shadow: none;
	display: inline-flex;
	align-items: stretch;
	flex-wrap: nowrap
}
.content-list-title-container {
	position: relative;
}
.content-list-title {
	font-size: 20px;
	font-weight: bold;
	color: #111;
}
.content-list-info {
	color :#C50808;
	font-size: 0.9rem;
	margin-top: 6px;
}
.content-list-title-toggle {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	border: 1px solid #444;
	padding: 4px 6px;
	line-height: 20px;
}
.content-list-detail ul {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: item;
	line-height: 32px;
}
.content-list-detail ul li {
	margin-bottom: 2px !important;
	font-weight: 700;
}
.content-list-detail ul li a::before {
	content: counters(item, '.', decimal) '. ';
	display: inline-block;
	counter-increment: item;
	flex-grow: 0;
	flex-shrink: 0;
	margin-right: .2em;
	float: left;
}
.content-list-detail ul li a:hover {
	text-decoration: underline;
}
.content-list-detail ul li ul li {
	margin-bottom: 0px !important;
	font-weight: 500;
}
.content-list-detail ul li ul li a {
	color: #666;
	font-size: 1rem;
}
.content-list-detail ul ul {
	margin-left: 1.5em;
}

.article-style a[id*="a"] {
	position: relative;
	top: -100px;
}
.article-style img{
	width:100%;
}
.article-style a,
.article-style a:hover,
.article-style a:focus,
.article-style a:active,
.article-style a:visited {
    text-decoration: none!important;
}
.article-style  {
	max-width: 1280px;
	margin: 0 auto;
}
.article-style h1 {
	color: #bb2c2b;	
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 1.8rem;
}
.article-style h2 {
	color: #30426a;
	margin: 0 0 10px 0;
	border-left: 9px solid #09406e;
	padding-left: 15px;
	font-weight: 700;
	font-size: 1.5rem;
}
.article-style h3 {
	color:#30426a;
	font-weight: 700;
	font-size: 1.3rem;
}
.article-style h4 {
	color: #448599 ;
	font-weight: 700;
	font-size: 1.2rem;
}
.article-style h5 {
	color: #4e4499;
	font-weight: 900;
	font-size: 1.1rem;
}
.article-style p {
	margin-bottom: 10px;
}
.article-style p img.img1,.article-style img.img1 {
	display: block;
	max-width: 100% !important;
	height: auto !important;
	margin: 40px auto;
}
.article-style ol li strong,  .article-style ul li strong {
	font-weight: 700;
}
.article-style iframe {
	margin: 40px auto;
}

.knowledge_category {
	width: 100%;
	box-shadow: 0 0 5px #adadad;
	border-radius: 0px;
	padding: 25px 30px 30px;
}
.knowledge_category h2 {
	font-size: 1.5rem;
	margin-bottom: 10px;
	font-weight: 900;
}
.knowledge_category ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
	font-weight: bold;
}
.knowledge_category > ul > li {
	margin-bottom: 16px;
}
.knowledge_category ul li{
	padding: 5px 0;
}
.knowledge_category a {
	text-decoration: none;
	color: #555;
}
.knowledge_category a:hover {
	color: #000;
	text-decoration: underline;
}
.knowledge_category h2 {
	color: #111;
	margin: 0 0 20px 0;
	font-weight: 700;
	font-size: 1.5rem;
	border-left: none;
	padding-left: 0px!important;
}
.knowledge_category h2:after {
	content: '';
	display: block;
	width: 48px;
	height: 2px;
	background-color: #30426a;
	margin: 20px 0;
}

.page_news_release {
	margin: 0 0 20px 0;
	text-align: left;
}
.page_news_release span {
	margin-right: 10px;
	background-color: #9EC7EB;
	color: #111;
	padding: 5px 20px;
	border-radius: 0px;
	font-size: 1rem;
}
.page_news_date {
	margin: 10px 0;
	text-align: right;
}
.page_news_date span {
	margin-right: 10px;
	background-color: #30426a;
	color: #fff;
	padding: 5px 20px;
	border-radius: 0px;
	font-size: 1rem;
}

.related-articles-section {
	margin-top: 40px;
}
.article-card {
	display: block;
	padding: 20px 20px 25px;
	text-decoration: none;
	color: #111;
	background-color: #E5E5E5;
	border: 1px solid #ddd;
	transition: all 0.3s ease;
}
.article-card:hover {
	color: inherit;
	text-decoration: none;
	background-color: #DCEAF6;
	transform: translateY(-2px);
}
.related-title {
	font-size: 1.5rem;
	font-weight: 900;
	color: #0F67B1;
	margin-bottom: 20px;
}
.article-title {
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 30px;
	margin-bottom: 10px;
}
.article-subtitle {
	font-size: 0.9rem;
	line-height: 24px;
	margin-bottom: 0 !important;
}
.articles-img img {
	width: 100%;
	padding-top: 6px;
}

.knowledge_author {
	margin-top: 40px;
	margin-bottom: 40px;
}
.knowledge_author h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: #30426a;
	margin-bottom: 20px;
}
.knowledge_author_box {
	display: flex;
	align-items: center;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 0px;
	background: #f9f9f9;
}
.knowledge_author_img {
	width: 80px;
	height: 80px;
	margin-right: 20px;
	flex-shrink: 0;
}
.knowledge_author_info h3 {
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 5px;
}
.knowledge_author_info p {
	font-size: 0.95rem;
	margin-bottom: 0;
	color: #666;
}



/*========================================================
                      文章排版風格設定
=========================================================*/

/*文字顏色*/

.article-style .f-c01 {
	color: #0e5dab;
}
.article-style .f-c02 {
	color: #ca3d3a;
}
.article-style .f-c03 {
	color: #02542d;
}
.article-style .f-c04 {
	color: #1e2774;
}
.article-style .f-c05 {
	color: #a04a24;
}
.article-style .f-c06 {
	color: #006666;
}

/*文字樣式*/
.article-style .f-s01 {
	margin-left: 5px;
	margin-right: 5px;
	border-bottom: 2px solid #0e5dab;
	padding-bottom: 2px;
}
.article-style .f-s02 {
	margin-left: 5px;
	margin-right: 5px;
	border-bottom: 2px solid #800000;
	padding-bottom: 2px;
}
.article-style .f-s03 {
	margin-left: 5px;
	margin-right: 5px;
	border-bottom: 2px solid #02542d;
	padding-bottom: 2px;
}
.article-style .f-s04 {
	margin-left: 5px;
	margin-right: 5px;
	border-bottom: 2px solid #1e2774;
	padding-bottom: 2px;
}
.article-style .f-s05 {
	margin-left: 5px;
	margin-right: 5px;
	border-bottom: 2px solid #a04a24;
	padding-bottom: 2px;
}
.article-style .f-s06 {
	margin-left: 5px;
	margin-right: 5px;
	border-bottom: 2px solid #006666;
	padding-bottom: 2px;
}

/*背景色*/
.article-style .f-b01 {
	padding: 2px 8px;
	margin: 0 5px;
	color: #fff;
	background-color: #0e5dab;
}
.article-style .f-b02 {
	padding: 2px 8px;
	margin: 0 5px;
	color: #fff;
	background-color: #800000;
}
.article-style .f-b03 {
	padding: 2px 8px;
	margin: 0 5px;
	color: #fff;
	background-color: #02542d;
}
.article-style .f-b04 {
	padding: 2px 8px;
	margin: 0 5px;
	color: #fff;
	background-color: #1e2774;
}
.article-style .f-b05 {
	padding: 2px 8px;
	margin: 0 5px;
	color: #fff;
	background-color: #a04a24;
}
.article-style .f-b06 {
	padding: 2px 8px;
	margin: 0 5px;
	color: #fff;
	background-color: #006666;
}

/* 文字大小 */
.article-style .f-t01 {
	display: inline-block;
	font-size: 1.2rem;
	padding: 0 2px;
}
.article-style .f-t02 {
	display: inline-block;	
	font-size: 1.4rem;
	padding: 0 2px;
}
.article-style .f-t03 {
	display: inline-block;	
	font-size: 1.6rem;
	padding: 0 2px;
}
.article-style .f-t04 {
	display: inline-block;	
	font-size: 1.8rem;
	padding: 0 2px;
}
.article-style .f-t05 {
	display: inline-block;	
	font-size: 2rem;
	padding: 0 2px;
}

/* 文章表格 */
.article-style.table-s1 {
	text-align: left;
	margin: 0 0 20px 0;
	font-size: 15px;
	border: 1px solid #c0bebe;
	border-collapse: separate;
    background-color: #fff;
    box-shadow: 0px 0px 7px #e4e4e4;
}
.article-style .table-s1 tr:nth-child(2n+1) {
	background-color: #F3F3F3;
}
.article-style .table-s1 th {
	background-color: #09406E;
	color: #fff;
	font-weight: bold;
	padding: 10px 10px !important;
	text-align: center;	
	border-top: 0 !important;
	border-bottom: 1px solid #c0bebe;
    border-right: 1px solid #fff;
}
.article-style .table-s1 th:last-of-type {
    border-right: 1px solid #c0bebe;
}
.article-style .table-s1 td {
	padding: 5px 10px !important;
	border: 1px solid #c0bebe;
	text-align: center;
	vertical-align: middle;
}
.article-style .table-s1 td.bg1 {
	background-color: #DCEAF6;
	font-weight: bold;
	color: #555;
}

.article-style .table-s2 th {
	background-color: #0f67b1;
}
.article-style .table-s2 td.bg1 {
	background-color: #f2f7fc;
}
/* cta 樣式 */
.cta-block-lixin {
  background-color: #fff2f2;
  color: #4a4a4a;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  max-width: 700px;
  margin: 40px auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  font-family: "Noto Sans TC", sans-serif;
}
.cta-block-lixin .cta-title {
  font-size: 22px;
  font-weight: 700;
  color: #c1252c;
  margin-bottom: 12px;
}
.cta-block-lixin .cta-sub {
  font-size: 16px;
  color: #4a4a4a;
  margin-bottom: 28px;
}
.cta-block-lixin .cta-button {
  display: inline-block;
  background-color: #c1252c;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}
.cta-block-lixin .cta-button:hover {
  background-color: #a01f24;
}




/* 精選推薦文章 */
.related-articles-section {
  color: #111;
}

.section-title {
	font-size: 24px;
	margin-bottom: 40px;
	border-left: 4px solid #c8aa7d;
	padding-left: 12px;
	font-family: 'Noto Serif TC', serif;
}
/*
.articles-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
*/
.article-card {
	display: block;
	padding: 20px 25px 15px;
	text-decoration: none;
	color: #111;
	background-color: #E5E5E5;
	border: 1px solid #adadd;
	transition: all 0.3s ease;
}

.article-card:hover {
	color: #fff;
	background-color: #bb2c2b;
	transform: translateY(-2px);
}

.related-title {
	font-size: 1.5rem;
	font-weight: 900;
	color: #bb2c2b;
	margin-bottom: 20px;
}

.article-title {
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 30px;
	margin-bottom: 10px;
}
.article-subtitle {
	font-size: 0.9rem;
	line-height: 24px;
}
.articles-img img {
	width: 100%;
}



/*框框樣式*/
.article-style .frame-style {
	background-color: #fdfdfd;
    border: 1px solid #ddd;
	border-radius: 10px;
	padding: 25px 25px 25px;
	box-shadow: 3px 3px 10px #00000010;
	margin-bottom: 40px;
}
.article-style .frame-style ul {
	padding-left: 20px;
	margin: 0;
}
.article-style .frame-style li {
	margin-bottom: 6px;
}
.article-style .frame-style li:last-of-type {
	margin-bottom: 0;
}
.article-style .frame-style strong {
	color: #458BD0;
}
.article-style .frame-style01 h3 {
	color: #0e5dab
}
.article-style .frame-style02 h3 {
	color: #a68445;
}
.article-style .frame-style03 h3 {
	color: #02542d;
}
.article-style .frame-style04 h3 {
	color: #1e2774;
}
.article-style .frame-style01 p.title strong {
	color: #e36c09e6;
}



/*你可能會喜歡樣式*/
.article-style .box-style {
	background-color: #fdfdfd;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 40px;
	color: #111;
    border-left: 4px solid #13c5fb;	
}
.article-style .box-style a {
	color: #111;
}
.article-style .box-style a:hover {
	text-decoration: underline;
}
.article-style .box-style > p {
	font-size: 1.4rem;
	font-weight: 700;
}
.article-style .box-style01 {
    border-left: 4px solid #0e5dab;
}
.article-style .box-style01 > p {
	color: #0e5dab;
}
.article-style .box-style02 {
    border-left: 4px solid #ca3d3a;
}
.article-style .box-style02 > p {
	color: #ca3d3a;
}
.article-style .box-style03 {
    border-left: 4px solid #02542d;
}
.article-style .box-style03 > p {
	color: #02542d;
}
.article-style .box-style04 {
    border-left: 4px solid #1e2774;
}
.article-style .box-style04 > p {
	color: #1e2774;
}
.article-style .box-style05 {
    border-left: 4px solid #a04a24;
}
.article-style .box-style05 > p {
	color: #a04a24;
}

@media (max-width: 767px) {
	.article-style .box-style {
		padding: 30px 20px 20px 20px;
	}
}


/*無序列表樣式*/
.article-style .ul-style {
  list-style: none;
  padding-left: 0 !important;
}
.article-style .ul-style.bb li {
	border-bottom: 1px dashed #ccc;
	padding-bottom: 10px;
}
.article-style .ul-style li {
  position: relative;
  padding-left: 28px;
  margin: 10px 0;
  line-height: 1.6;
}
.article-style .ul-style li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0e5dab;
}
.article-style .ul-style01 li::before {
  background: #0e5dab;
}
.article-style .ul-style02 li::before {
  background: #ca3d3a;
}
.article-style .ul-style03 li::before {
  background: #02542d;
}
.article-style .ul-style04 li::before {
  background: #1e2774;
}
.article-style .ul-style05 li::before {
  background: #a04a24;
}
.article-style .ul-style06 li::before {
  background: #006666;
}


/*有序列表樣式*/
.article-style .ol-style {
  list-style: none;
  counter-reset: num;
  padding-left: 0;
}
.article-style .ol-style.bb li {
	border-bottom: 1px dashed #ccc;
	padding-bottom: 10px;
}
.article-style .ol-style li {
  counter-increment: num;
  margin: 12px 0;
  padding-left: 30px;
  position: relative;
  line-height: 1.6;
}

.article-style .ol-style li::before {
  content: counter(num);
/*  content: counter(num) ".";*/
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background: #0e5dab;
  color: #fff;
  font-weight: bold;
  border-radius: 3px;
}

.article-style .ol-style01 li::before {
  background: #0e5dab;
}
.article-style .ol-style02 li::before {
  background: #ca3d3a;
}
.article-style .ol-style03 li::before {
  background: #02542d;
}
.article-style .ol-style04 li::before {
  background: #1e2774;
}
.article-style .ol-style05 li::before {
  background: #a04a24;
}
.article-style .ol-style06 li::before {
  background: #006666;
}


/*步驟列表樣式*/
.article-style .diy-steps {
	list-style: none;
	padding-left: 0;
}
.article-style .diy-steps li {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
.article-style .diy-steps.bb li {
	border-bottom: 1px dashed #ccc;
	padding-bottom: 10px;
}
.article-style .diy-steps li strong {
	display: inline-block;
	min-width: 70px;
	padding: 1px 8px;
	margin-right: 15px;
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	flex-shrink: 0;
}
.article-style .diy-steps li span {
  line-height: 1.6;
  flex: 1;
}
@media (max-width: 767px) {
	.article-style .diy-steps li {
		align-items: flex-start;
	}
}

/* 箭頭標籤本體 */
.article-style .diy-arrow li strong {
	display: inline-block;
	padding: 6px 40px 6px 20px;
	font-weight: bold;
	text-align: center;
	position: relative;
	clip-path: polygon(0 15%, calc(100% - 30px) 15%, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, calc(100% - 30px) 85%, 0 85%);
}
@media (max-width: 767px) {
	.article-style .diy-arrow li {
		align-items: center;
	}
}



/* FAQ樣式 */
.article-style .faq-style ul {
	list-style: none;
	margin: 0;
	padding: 0;
    font-weight: 700; 
}
.article-style .faq-style ul li {
	margin-bottom: 20px;
}
.article-style .faq-style p.title {
	margin: 0;
}
.article-style .faq-style p.title strong {
	display: block;
	font-size: 1rem;
	font-weight: normal;
}
.article-style .faq-style p.txt {
	display: block;
	margin: 5px 0 10px 0px;
	font-weight: normal;
}

.article-style .faq-style-frame01 p.title strong {
    border-bottom: 1px solid var(--border-color);
	padding-bottom: 10px;	
}
.article-style .faq-style-frame02 p.txt {
    padding-left: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--black005);
    border-radius: 8px;
}
.article-style .faq-style-frame03 p.title strong {
    border-bottom: 1px solid var(--border-color);
	padding-bottom: 10px;
}
.article-style .faq-style-frame03 p.txt {
    padding-left: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--black005);
    border-radius: 8px;
}
.article-style .faq-style-frame04 ul li {
    border-bottom: 1px solid var(--black010);
	padding: 0px 20px 10px 20px;
}
.article-style .faq-style-frame05 ul li {
    border: 1px solid var(--black010);
	padding: 20px 20px 10px 20px;
	background-color: var(--black005);
}
.article-style .faq-style-frame06 p.title strong {
	background-color: #e3e3e3;
    font-weight: bold;
    color: var(--black);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 8px;
}
.article-style .faq-style-frame06 p.txt {
    padding: 8px 16px;
}
.article-style .faq-style-icon p.title strong, 
.article-style .faq-style-icon p.txt {
	position: relative;
	padding-left: 30px;
}
.article-style .faq-style-icon p.title strong::before {
	content: "Q";
	font-weight: bold;
	position: absolute;
	top: -2px;
	left: 0;
	z-index: 1;
	display: inline-block;
	background: #b58c3c;
	color: #fff;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	text-align: center;
	line-height: 24px;
	margin-right: 8px;
}
.article-style .faq-style-icon p.txt::before {
	content: "A";
	font-weight: bold;
	display: inline-block;
	position: absolute;
	top: 2px;
	left: 0;
	z-index: 1;
	background: #0F67B1;
	color: #fff;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	text-align: center;
	line-height: 22px;
	margin-right: 6px;
}
.article-style .faq-style-icon2 p.title strong, 
.article-style .faq-style-icon2 p.txt {
	position: relative;
	padding-left: 40px;
}
.article-style .faq-style-icon2 p.title strong::before {
	top: 15px;
	left: 10px;
}
.article-style .faq-style-icon2 p.txt::before {
	top: 15px;
	left: 10px;
}
.article-style .faq-style-icon2 ul {
	list-style: none;
	margin: 0;
	padding: 0;
    font-weight: 400; 
}
.article-style .faq-style-icon2 ul li {
	margin-bottom: 5px;
}




/*========================================================
                    其他可能樣式
=========================================================*/

:root {
	--black: #333;
	--gray: #777;
	--gray-black: #555;
	--gray-light: #888;
	--white: #fff;
	--border-color: #dee2e6;
	--color01: #0F67B1;
	--color02: #B8934F;
	--color03: #ca3d3a;
	--color04: #3A3A38;
	--color05: #8F8C85;
	--color06: #eeebe6;
	--black005: #00000005;
	--black010: #00000010;
	--black020: #00000020;
	--black050: #00000050;
}


/* CSS：支援動態標籤的框 */
.article-style .dynamic-tip {
    border: 1px solid var(--black020);
    background-color: var(--white);
    padding: 25px;
    margin: 30px 0;
    position: relative;
    border-radius: 8px;
}
.article-style .dynamic-tip .tag {
    position: absolute;
    top: -10px;
    left: 20px;
    background: var(--color01);
    color: var(--white);
    padding: 2px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
}
.article-style .dynamic-tip p {
    margin: 10px 0 0 0;
    color: var(--gray-black);
}	

	
/* 新增：垂直流程樣式 */
.article-style .timeline-steps {
    padding-left: 20px;
    border-left: 2px solid var(--color01);
    margin: 30px 0 30px 10px;
}
.article-style .timeline-steps .step-item {
    position: relative;
    padding-bottom: 30px;
    padding-left: 25px;
}
.article-style .timeline-steps .step-item::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 5px;
    width: 12px;
    height: 12px;
    background: var(--white);
    border: 3px solid var(--color01);
    border-radius: 50%;
}
.article-style .timeline-steps .step-title {
    font-weight: bold;
    color: var(--color03);
    font-size: 1.1rem;
    margin-bottom: 5px;
}
.content-wrap {
    padding-top: 60px;
    padding-bottom: 60px;
    /* background-color: #fff; */
    overflow: hidden;
}	
/* 新增：優勢卡片橫排樣式 */
.article-style .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 40px 0;
}
.article-style .feature-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    padding: 30px 20px;
    text-align: center;
    border-radius: 12px;
    transition: 0.3s;
    border-top: 4px solid var(--color01);
}
.article-style .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--black010);
}
.article-style .feature-card .num {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--color01);
    margin-bottom: 0;
    display: block;
}
.article-style .feature-card h4 {
    position: relative;
    color: var(--color04);
    margin-bottom: 10px;
    z-index: 1;
}
.article-style .feature-card p {
    color: var(--color05);
}	
	
	
/* 新增：注意/警告框樣式 */
.article-style .warning-note {
    background-color: #fff9f0; /* 極淺橘色 */
    border: 1px dashed #e6c17a;
    padding: 10px 20px;
    border-radius: 8px;
    margin: 30px 0;
}
.article-style .warning-note .title {
    color: #b33e3e; /* 警告紅，可適度加入 */
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.article-style .warning-note .title::before {
    content: '';
    margin-right: 8px;
}


/* 新增：帶有裝飾背景的數字步驟 */
.article-style .step-card-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 40px 0;
}
.article-style .step-card {
    flex: 1;
    min-width: 250px;
    background: var(--white);
    border-top: 5px solid var(--color01);
    padding: 20px 20px 20px;
    box-shadow: 0 5px 15px var(--black010);
    position: relative;
    overflow: hidden;
}
.article-style .step-card .step-num {
    position: absolute;
    right: -10px;
    bottom: -10px;
    font-size: 5rem;
    font-weight: 900;
    color: var(--black020); /* 極淡米色 */
    line-height: 1;
    opacity: 0.5;
}
.article-style .step-card h3 {
    color: var(--color01);
    font-size: 1.25rem;
    margin-bottom: 10px;
}
.article-style .step-card p {
    font-size: 0.95rem;
    color: var(--gray-black);
    position: relative;
    z-index: 1;
}
	
/* 新增：關鍵字/術語樣式 */
.article-style .tag-container {
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 30px 0;
}
.article-style .tag-container span {
    display: inline-block;
    padding: 5px 15px;
    margin: 5px;
    background: var(--white);
    border: 1px solid var(--color01);
    color: var(--color04);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
}
.article-style .tag-container .tag-title {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--color04);
}

/* 新增：側邊大標籤清單 */
.article-style .side-tab-list {
    margin: 40px 0;
}
.article-style .side-tab-item {
    display: flex;
    background: var(--white);
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 3px 3px 10px var(--black010);
}
.article-style .side-tab-num {
    background: var(--color01);
    color: var(--white);
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 900;
    flex-shrink: 0;
}
.article-style .side-tab-text {
    padding: 20px;
}
.article-style .side-tab-text strong {
    display: block;
    font-size: 1.1rem;
    color: var(--color01);
    margin-bottom: 5px;
}




/* 新增：對話泡泡樣式 */
.article-style .chat-tip {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border-color);
    padding: 20px 25px;
    border-radius: 20px;
    margin: 0;
}
.article-style .chat-tip .tip-label {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--color01);
    color: var(--white);
    padding: 2px 12px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
}
	
/* 新增：方塊對比樣式 */
.article-style .grid-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 30px 0;
}
.article-style .compare-box {
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}
.article-style .box-pro {
    background: #f0f7f0; /* 極淡綠，代表優點 */
    border: 1px solid #c2e0c2;
    color: #2e7d32;
}
.article-style .box-con {
    background: #fdf2f2; /* 極淡紅，代表缺點 */
    border: 1px solid #f5c6cb;
    color: #c82333;
}
.article-style .compare-box i {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
}
/* 新增：章節總結框樣式 */
.article-style .focus-summary {
    border: 2px solid var(--color01);
    background-color: var(--white);
    padding: 30px;
    margin: 40px 0;
    position: relative;
    border-radius: 4px;
}
.article-style .focus-summary .focus-title {
    position: absolute;
    top: -16px;
    left: 20px;
    background: var(--color01);
    color: var(--white);
    padding: 2px 20px;
    font-weight: bold;
    font-size: 1.1rem;
    border-radius: 2px;
}
.article-style .focus-summary ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 10px 0 0 0;
}
.article-style .focus-summary ul li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 12px !important;
}
.article-style .focus-summary ul li:last-of-type {
    margin-bottom: 0 !important;
}
.article-style .focus-summary ul li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: var(--color01);
    font-weight: bold;
}

/* 新增：側邊註解樣式 */
.article-style .remark-text {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--color01);
    padding: 5px 15px;
    margin: 20px 0;
    font-size: 0.9rem;
    color: var(--black);
    font-style: italic;
}

/* 新增：不對稱弧形裝飾塊 */
.article-style .curved-header {
    background: var(--white);
    color: var(--black);
    padding: 30px;
    border-radius: 40px 0 40px 0; /* 左上與右下圓角 */
    margin: 40px 0;
    border: 1px solid var(--border-color);	
    border-left: 8px solid var(--color01);
}
.article-style .curved-header .title {
    color: var(--color01) !important;
	margin: 0;
    font-size: 1.1rem;
	font-weight: bold;
}
.article-style .curved-header p {
    margin-bottom: 0;
    opacity: 0.85;
}

/* 新增：亮點漸變條樣式 */
.article-style .glow-bar {
    background: #fff;
    border: 1px solid var(--border-color);	
    border-left: 5px solid var(--color01);	
    padding: 15px 25px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.article-style .glow-bar .label {
    font-weight: 900;
    color: var(--color01);
    margin-right: 20px;
    font-size: 1.2rem;
}	

/* 新增：日系簡約導讀 */
.article-style .index-grid {
}
.article-style .index-item {
    flex: 1;
    min-width: 250px;
    padding: 25px;
    background: var(--white);
    border-radius: 2px;
    box-shadow: 3px 3px 10px var(--black010);
    border: 1px solid var(--black010);
    display: flex;
    align-items: flex-start;
	margin-bottom: 20px;

}
.article-style .index-item .num {
    font-size: 1.5rem;
    font-family: 'Times New Roman', serif;
    font-weight: 900;
    margin-right: 20px;
    color: var(--color01);
}
.article-style .index-item .text b {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 5px;
}
	
/* 新增：浮空數據裝飾 */
.article-style .stat-bar {
    display: flex;
    justify-content: space-around;
    padding: 30px;
    background: var(--white);
    border-radius: 2px;
    box-shadow: 0 15px 35px var(--black005);
    margin: 40px 0;
}
.article-style .stat-unit {
    text-align: center;
}
.article-style .stat-unit .val {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    color: var(--color01);
}
.article-style .stat-unit .label {
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: var(--gray);
}
/* 修改：支援 Font-Icon 的圓圈樣式 */
.article-style .feature-box {
    display: flex;
    align-items: center;
    padding: 25px;
    background: var(--white);
    border: 1px solid var(--color06); /* 改為細邊框更精緻 */
    margin: 30px 0;
    border-radius: 12px;
    transition: 0.3s;
    box-shadow: 3px 3px 10px var(--black010);
}
.article-style .feature-icon-wrap {
    width: 65px;
    height: 65px;
    background: var(--color01); /* 金色背景 */
    color: var(--white);       /* 圖示顏色 */
    border-radius: 50%;
    margin-right: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem; /* 控制圖示大小 */
}
.article-style .feature-icon-wrap2 {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    font-size: 1rem;
}

.article-style .feature-content h5 {
    margin: 0 0 8px 0;
    color: var(--color01);
    font-weight: bold;
    font-size: 1.15rem;
}

.article-style .feature-content p {
    margin: 0;
    font-size: 1.1rem;
    color: var(--gray-black);
    line-height: 1.6;
}	


.article-style .geo-box {
  max-width: 100%;
}

.article-style .geo-card {
  display: block;
  position: relative;
  background: #fff;
  border: 1px solid #999;
  margin-bottom: 20px;
  padding: 20px;
  text-decoration: none;
}
.article-style .geo-card::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 7px;
  right: -7px;
  bottom: -7px;
  background: #ddd;
  z-index: -1;
  transition: 0.3s;
}
.article-style .geo-title {
  margin: 0 !important;
	font-weight: 900;
  color: #bb2c2b;
}
.article-style .geo-desc {
  margin: 0 !important;
  color: #666;
}


/* 萬用可點擊區塊樣式 (套用在 <a> 上) */
.article-style .clickable-block {
    display: flex;         
    align-items: center;   
    width: 100%;               
    background-color: #ffffff;
    padding: 12px 24px;
    border-radius: 12px;   
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    -webkit-tap-highlight-color: transparent; 
    transition: all 0.25s ease-in-out; 
	color: #333 !important;
}
.article-style .clickable-block .block-icon {
    margin-right: 14px;
    color: #fff;
	background-color: #0F67B1;
	border-radius: 50%;
	padding: 7px;
    display: flex;
    align-items: center;
}
.article-style clickable-block .block-text {
    font-weight: 500;
	color: #666 !important;
}
@media (hover: hover) {
    .article-style .clickable-block:hover {
        background-color: #fff;   
        border-color: #0F67B1;       
        transform: translateY(-3px); 
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); 
    }
}
/* 服務項目及徵信價格的樣式 */
.badge-list {
	max-width: 1200px;
	margin: 40px auto;
}
.badge-item {
	display: flex;
	text-decoration: none;
	background: #fff;
	margin-bottom: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	overflow: hidden;
	transition: transform 0.2s;
	align-items: center;
}
.badge-side {
	background: #10b981;
	color: #fff;
	padding: 5px 40px 10px 25px;
	font-weight: bold;
	clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
	display: flex;
	align-items: center;
	align-self: stretch;
}
.badge-item.badge-item-news .badge-side {
	background: #3b82f6;
}
.badge-item.badge-item-1 .badge-side {
	background: #10b982;
}
.badge-item.badge-item-2 .badge-side {
	background: #3b82f6;
}
.badge-item.badge-item-3 .badge-side {
	background: #af8d5f;
}
.badge-item.badge-item-4 .badge-side {
	background: #6d7c48;
}
.badge-item.badge-item-5 .badge-side {
	background: #d4aa3c;
}
.badge-item.badge-item-6 .badge-side {
	background: #be522b;
}
.badge-body {
	padding: 15px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.badge-title {
	color: #1e293b;
	font-weight: 600;
	margin-bottom: 4px;
}
.badge-info {
	font-size: 1rem;
	color: #64748b;
	line-height: 1.6;
	background: #fff;
}
.badge-arrow {
	margin-right: 30px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #cbd5e1;
	transition: all 0.3s ease;
}
.badge-arrow i {
	font-size: 14px;
}
.badge-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.badge-item:hover .badge-arrow {
	background: #10b981;
	color: #ffffff;
	transform: translateX(5px);
}
.badge-item.badge-item-news:hover .badge-arrow {
	background: #3b82f6;
}
.badge-item.badge-item-1:hover .badge-arrow {
	background: #10b982;
}
.badge-item.badge-item-2:hover .badge-arrow {
	background: #3b82f6;
}
.badge-item.badge-item-3:hover .badge-arrow {
	background: #af8d5f;
}
.badge-item.badge-item-4:hover .badge-arrow {
	background: #6d7c48;
}
.badge-item.badge-item-5:hover .badge-arrow {
	background: #d4aa3c;
}
.badge-item.badge-item-6:hover .badge-arrow {
	background: #be522b;
}
/*========================================================
                      CTA 按鈕設定
=========================================================*/

.wrapper_cta {
	display: block;
	text-align: center;
	padding: 1vh 0;
	font-weight: bold;
}

.button_cta {
	padding: 0.45em 4em;
	text-align: center;
	text-decoration: none;
	color: #111;
	background-color: linear-gradient(to bottom, #bb2c2b, #cc3f3c);
	border: 2px solid #111;
	display: inline-block;
	border-radius: 0.3em;
	transition: all 0.2s ease-in-out;
	position: relative;
	overflow: hidden;
}

.button_cta:before {
	content: "";
	background-color: rgba(255, 255, 255, 0.5);
	height: 100%;
	width: 3em;
	display: block;
	position: absolute;
	top: 0;
	left: -4.5em;
	transform: skewX(-45deg) translateX(0);
	transition: none;
}

.button_cta:hover {
	background: linear-gradient(to bottom, #0F67B1, #09406E);
	color: #fff;
	border: 2px solid #DCEAF6;
}

.button_cta:hover:before {
	transform: skewX(-45deg) translateX(40em);
	transition: all 1s ease-in-out;
}

.wrapper_cta .fa {
	padding-right: 5px;
}

.button_cta2 {
	padding: 0.45em 4em;
	text-align: center;
	text-decoration: none;
	color: #fff !important;
	font-weight: bold;
	background: #0F67B1;
	border: 2px solid #e9e3de;
	display: inline-block;
	border-radius: 0.3em;
	transition: all 0.2s ease-in-out;
	position: relative;
	overflow: hidden;
}

.button_cta2:before {
	content: "";
	background-color: rgba(255, 255, 255, 0.5);
	height: 100%;
	width: 3em;
	display: block;
	position: absolute;
	top: 0;
	left: -4.5em;
	transform: skewX(-45deg) translateX(0);
	transition: none;
}

.button_cta2:hover:before {
	transform: skewX(-45deg) translateX(40em);
	transition: all 1s ease-in-out;
}

.button_cta3 {
	color: #fff !important;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	background-color: #09406E;
	padding: 10px 30px;
	border-radius: 8px;
	display: inline-block;
}

.button_cta3:hover {
	background-color: #0F67B1;
}

.wrapper_cta2 {
	background-color: #ffffff;
	/* CTA 背景白色，和底色有對比 */
	border: 2px solid #e0e0e0;
	/* 淺灰邊框增加層次感 */
	border-radius: 12px;
	/* 圓角 */
	padding: 40px 40px;
	/* 內距 */
	max-width: 600px;
	/* 控制寬度 */
	margin: 40px auto;
	/* 居中 */
	text-align: center;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	/* 輕微陰影增加浮雕感 */
}

.wrapper_cta2 .title {
	font-size: 24px;
	font-weight: 700;
	color: #222222;
	/* 深色文字突出標題 */
	margin-bottom: 20px;
	line-height: 1.4;
}

.wrapper_cta2 .desc {
	font-size: 16px;
	color: #555555;
	/* 次要文字稍微柔和 */
	margin-bottom: 30px;
	line-height: 1.6;
}

.wrapper_cta2 .cta {
	display: inline-block;
	background-color: #0F67B1;
	/* 主 CTA 顏色，可視覺吸睛 */
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	padding: 14px 28px;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.3s ease;
	margin-bottom: 7px;
}

.wrapper_cta2 .cta:hover {
	background-color: #458BD0;
	/* 滑鼠懸停效果 */
	box-shadow: 0 4px 15px #9EC7EB;
	transform: translateY(-2px);
}
.wrapper_cta2 .cta .fa{ 
	padding-right:5px;
}