@charset "utf-8";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

/* CSS Document */

/**color**/
:root {
	--text:#373737;
	--red: #e50012;
	--white:#ffffff;
	--redHeavy:#d2132f;
	--slogin_font:"Noto Sans TC", sans-serif;
	--main_font:"Microsoft JhengHei", sans-serif;
	--eng_font:"Kumbh Sans", sans-serif;
}

body{ font-family: var(--main_font) ; font-size: 18px; font-weight: 400; color: var(--text); line-height: 31px; }

a, a:hover{	text-decoration: none; transition: 0.3s ease-in-out;}
img { max-width:100%; height: auto;}

.imageCenter, .imageCenter a{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;  z-index: 10;}
.imageCenter img { max-height: 100%;}
p, td, li, label { font-size: 18px; font-weight: 400;}

/**top**/
.scrollToTop { display: inline-block; background-color: var(--red); width: 50px; height: 50px; border-radius: 50px; text-align: center; position: fixed; bottom: 13%; right: 12px; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 1000;}
.scrollToTop::after { content: "\F286";	font-family: bootstrap-icons !important; font-weight: 600; font-size: 1.5em; line-height: 48px; color: var(--white);}
.scrollToTop:hover { cursor: pointer; text-decoration: none; background-color: var(--redHeavy);}
.scrollToTop:hover::after {color: var(--white)!important;}
.scrollToTop:active { background-color: var(--redHeavy);}
.scrollToTop.show {	opacity: 1;	visibility: visible;}
/****/
/**online_valuation**/
.online_valuation{ position: fixed; display: flex; flex-direction: column-reverse; z-index: 99; right: 12px; bottom: 23%; width: 56px; background: #dbdbdb;}
.online_valuation .title{ width: 100%; text-align: center;}
.online_valuation .title span{ display: block; margin: auto; padding: 5px 0px 15px 5px; color: var(--red); line-height: 20px; writing-mode: vertical-lr;}
.online_valuation .title span b{ display: block; color:#3c3c3c; font-size: 65%; text-transform: uppercase;}
.online_valuation .title span.mobile_arr{ display: none;}

.online_valuation .smo_area { width: 25px; margin: 15px auto 15px 15px;}
.online_valuation .smo_area .line { padding: 0 0 10px 0; border-bottom: 1px solid #fff;}
.online_valuation .smo_area .bi { color: var(--red); font-size: 24px; transition: all 0.4s ease-out 0s;}
.online_valuation .smo_area .bi:hover { opacity: 0.5;}
.smo_area .tel, .smo_area .mail { padding: 5px 0px; border-bottom: 1px solid var(--white);}
/*.smo_area .tel { pointer-events: none; cursor: text;}*/



/****/
h1 { font-family: var(--slogin_font); font-size: 36px; font-weight: 600; color: var(--redHeavy); position: relative; margin: 0px; padding: 0px 0px 5px 0px;}
h2, h3, h4, h5, h6{ color: var(--red); font-weight: 600;}
h2{ font-size: 30px;}
h3{ font-size: 26px;}
h4{ font-size: 24px;}
h5{ font-size: 22px;}
h6{ font-size: 20px;}

/**index_main**/
.index_main_area{ overflow: hidden; padding-top: 100px;}
.index_about_area { 
	overflow: hidden; 
	background: url("../images/square_line.svg"), url("../images/index_text_bg.jpg");
	background-position: 98% 95%, right top;
	background-size: 40%, cover;
	background-repeat: no-repeat, no-repeat ; 
	padding: 3% 8% 8% 8%; 
	display: flex;
	margin-right: 10%;
}
.index_about_area .about_photo{ flex: 1 auto; position: relative; z-index: 1;}
.index_about_area .about_text{ max-width: 570px; width: 80%; padding-top: 50px;}
.index_about_area .about_text h1 {position: relative; font-family: var(--slogin_font); color: var(--redHeavy); font-size: 36px; line-height: 36px; font-weight: 600; padding: 0px 0px 0px 50px;}
.index_about_area .about_text h1::after, .index_about_area .about_text h1::before { position: absolute; content: ""; width: 18px; height: 18px;}
.index_about_area .about_text h1::after{ background-color: #d3d3d3; left: 18px; top: 18px;}
.index_about_area .about_text h1::before{ background-color: #fdfdfd;left: 0px; top: 0px;}

.sec_text {font-family: var(--slogin_font); font-weight: 500; font-size: 24px; color: #000; letter-spacing: 2px; margin: 25px 0px; padding-left: 50px;}
.about_text_info{ padding-left: 50px;}

/**more**/
.link_more{ width: 190px;}
.link_more img{	width: 48px; height: 10px;}
.link_more a{ display: flex; align-items: center; justify-content: center; color: var(--white); line-height: 50px; text-decoration: none; background-color: var(--red);	transition: background 0.5s ease;}
.link_more a:hover{	background-color: var(--redHeavy);}
.link_more img { margin-left: 15px;	margin-top: 2px;}
.link_more a:hover img.arrow_move {	animation: slide1 1s ease-in-out infinite;	margin-left: 15px;}

/**pro**/
.index_pro_area { 
	overflow: hidden; 
	background: url("../images/square_line-pro.svg"), url("../images/index_text_bg_pro.png");
	background-position: 20% 95%, left top;
	background-size: 40%, cover;
	background-repeat: no-repeat, no-repeat ; 
	padding: 5% 0% 3% 8%; 
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	margin-left: 10%;
	margin-top: 6%;
}
.index_pro_main, .index_service_main{ position: relative; z-index: 3;}

.index_pro_title {position: relative; font-family: var(--slogin_font); color: var(--redHeavy); font-size: 36px; line-height: 36px; font-weight: 600; padding: 0px 0px 0px 50px;}
.index_pro_title::after, .index_pro_title::before { position: absolute; content: ""; width: 18px; height: 18px;}
.index_pro_title::after{ background-color: #d3d3d3; left: 18px; top: 18px;}
.index_pro_title::before{ background-color: #fdfdfd;left: 0px; top: 0px;}
.index_pro_dec{ margin: 25px 0px;}

.index_pro_item_all { max-width: 710px; width: 96%;}
.index_pro_item { width: 150px; height: 150px; position: relative;}
.index_pro_item a { display: block; padding: 20px 0px 10px 0px; border: 1px solid #707070; text-align: center;}
.index_pro_item a span { display: block; font-size: 20px; color: var(--text); font-weight: bold; line-height: 21px; padding-top: 20px;}
.index_pro_item a span:hover{ color: var(--red);}
.index_pro_item a img{ width: 77px; height: 77px; opacity: 0.4; transition: all 0.3s ease;}
.index_pro_item a:hover { border: 1px solid var(--red);}
.index_pro_item a:hover img{ opacity: 1;}
.index_pro_item_all .link_more{ margin: 5% 0px auto auto;}

/**service**/
.index_service_area { 
	overflow: hidden; 
	background: url("../images/index_text_bg_service.png") no-repeat;
	background-size: cover;
	padding: 5% 0% 3% 8%; 
	margin-top: 6%;
}
.index_service_title {position: relative; font-family: var(--slogin_font); color: var(--redHeavy); font-size: 36px; line-height: 36px; font-weight: 600; padding: 0px 0px 0px 50px; max-width: 200px; margin: auto;}
.index_service_title::after, .index_service_title::before { position: absolute; content: ""; width: 18px; height: 18px;}
.index_service_title::after{ background-color: #d3d3d3; left: 18px; top: 18px;}
.index_service_title::before{ background-color: #fff;left: 0px; top: 0px;}
.index_service_main{max-width: 1280px; width: 100%; margin: auto;}

.index_service_item.row{ margin: 8% 4% 8% 0px;}
.index_service_item_01.row{margin: 8% auto 8% 4%; }

.service_item_detail{ position: relative; max-width: 220px; width: 100%; margin: auto;}
.setp{ display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f5f5f5; width: 80px; height: 80px; border-radius: 100px; position: absolute; top: 0px; right: 0px; z-index: 3; border: 1px solid #d2d2d2;}
.setp span{ display: block; text-align: center;}

.text-e, .text-n{ font-family: var(--eng_font); font-weight: 600;}
.text-e{ text-transform: uppercase; font-size: 80%; line-height: 16px; }
.text-n{ color: var(--red);  font-size: 36px;}

.service_item_text{ display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--white); max-width: 180px; width: 90%; height: 170px; border: 1px solid #d2d2d2; border-radius: 32px; position: relative; z-index: 1; top: 40px;}
.icon_text{ font-weight: bold; padding-top: 10px;}
.service_note{text-align: center; font-weight: bold; font-size: 20px; text-underline-offset: 8px; text-decoration: underline; text-decoration-color: var(--red);}

.index_news_area{ overflow: hidden; display: flex; margin: 5% auto;}

.index_news_area .about_text{ max-width: 1140px; width: 100%; padding-top: 50px;}

.index_news_item{ margin: 5% auto;}
.index_news_item .slick-prev, .index_news_item .slick-next{ width: 28px; height: 28px; top: inherit; bottom: -40px;}
.index_news_item .slick-prev {left: inherit; right: 55px;}
.index_news_item .slick-next{ right: 15px;}
.index_news_item .slick-prev:before, .index_news_item .slick-next:before{ color: #4b4b4b; font-size: 28px; font-family: bootstrap-icons !important;}
.index_news_item .slick-next:before{ content: "\F133";}
.index_news_item .slick-prev:before{ content: "\F129";}
.slide-content{ max-width: 350px; min-height: 390px; width: 100%; position: relative; margin: 15px; box-shadow: 0px 0px 8px #e2e2e2; }
.news_date{ padding: 5% 6%;}
.news_date span{ display: block; font-family: var(--eng_font); font-weight: 600;}
.news_date .date{ color: #767676;}
.news_date .year{ color: var(--redHeavy); font-size: 30px; position: relative; line-height: 30px;}
.news_date .year::after{ position: absolute; content: ""; width: 70%; height: 1px; background-color: #d3d3d3; top: 15px; right: 0px;}
.news_title{ font-size: 20px; padding: 3% 6%;} 
.news_title a{ color: var(--text); font-weight: bold;}
.news_title a:hover{ color:var(--red);}

.news_info{padding: 0px 6%; font-size: 98%;}
.index_news_item .link_more{ width: 145px; height: 39px; position: absolute; right: 0px; bottom: 0px;}
.index_news_item .link_more a{ line-height: 38px; font-size: 90%;}



/****/

@media all and (max-width: 1536px) {
	.scrollToTop{ bottom: 5%;}
	.online_valuation{ bottom: 15%;}
	.index_news_area .about_text{ margin-right: 2%;}
}
@media all and (max-width: 1440px) {
	.index_main_area{ padding-top: 50px;}
	.index_about_area{ margin-right: 5%; padding: 3% 3% 3% 0px;}
	.index_pro_area{ margin-left: 5%; padding: 3% 0% 3% 3%;}
}
@media all and (max-width: 1366px) {
	.scrollToTop{ width: 40px; height: 40px;}
	.scrollToTop::after{line-height: 40px;}
	.index_pro_item{ width: 140px; height: 140px;}
}
@media all and (max-width: 1280px) {
	.index_news_area .about_photo{flex: none; width: 35%; }
	.index_news_area .about_text{ padding-top: 30px; width: 75%; margin-right: inherit;}
	.index_news_item{max-width: 720px; width: 90%; margin: auto; padding-bottom: 80px;}
	.slide-content{ max-width: 330px; min-height: 350px;}
}

@media all and (max-width: 1024px) {
	.index_about_area{ margin-right: auto; flex-direction: column; align-items: center;}
	.index_about_area .about_text{ max-width: inherit; padding-top: 0px;}
	.index_pro_area{ margin-left: auto; flex-direction: column; align-items: center; padding:0px 0px 3% 0px;}
	.index_pro_area .about_photo { width: 100%; text-align: right;}
	.index_pro_main{ width: 90%; margin: auto;}
	.index_service_area{ padding: 4%; }
	.service_item_detail{ margin:5% auto;}
	
	.index_news_area .about_photo, .index_news_area .about_text{ width: 100%; position: relative;}
	.index_news_area .about_photo{ position: absolute;}
	.index_news_area .about_photo img{ opacity: 0.5;}
	.slide-content{ background-color: #ffffffd6;}
	.index_news_area .index_pro_title{ max-width: 400px; margin: auto auto 3% auto;}
	.index_service_item.row, .index_service_item_01.row{ margin: auto;}
}
@media all and (max-width: 853px) {
	.index_pro_item { width: 170px;  height: 170px; margin: auto;}
	.setp{ width: 60px; height: 60px; margin: auto; left: 0px; right: 0px;}
	.service_item_text{ margin: auto; left: 0px; right: 0px;}
	.text-e{font-size: 70%;}
	.text-n{ font-size: 110%; line-height: 20px;}
	.service_item_detail { margin: 10% auto; }
}
@media all and (max-width: 991px) {
	.scrollToTop { bottom: 10%;}
	.online_valuation { bottom: 18%; }
	.index_main_area { padding-top: 0px; }
	.smo_area .tel { pointer-events: initial;}
	.online_valuation { right: -52px; width: 100px; align-items: center; flex-direction: row; transition: 0.3s;}
	.online_valuation:hover{ right: 0px;}
	.online_valuation .smo_area{  width: 40px; margin: auto 10px auto auto; text-align: center;}
	.online_valuation .title{ width: 50px;}
	.online_valuation .title span{padding: 15px 10px 0px 10px;}
	.online_valuation .title span.mobile_arr{ display: block; padding-left: 10px; padding-bottom: 15px;}
	.service_note{ margin-top: 3%;}

}
@media all and (max-width: 767px) {
	.index_about_area .about_text{ width: 90%;}
	.sec_text{ font-size: 20px;}

}
@media all and (max-width: 540px) {	
	.scrollToTop{ right: 8px;}
	.link_more{width: 150px;}
	.link_more a{ font-size: 90%; line-height: 40px;}
	.index_service_item .col-sm-6, .index_service_item_01 .col-sm-6{ flex: 0 0 100%;  max-width: 100%;}
	.slide-content{ max-width: inherit;}
}
@media all and (max-width: 412px) {
	.index_pro_item { width: 140px;  margin: auto;}
	.index_about_area .about_text h1, .index_pro_title, .index_service_title{ font-size: 30px; line-height: 30px;}
	.service_note { margin-top: 20%;}
}
@media all and (max-width: 320px) {
	.index_pro_item{ width: 110px;}

}
@media all and (max-width: 280px) {
	.banner_more{ top: 180px; left: 30px; }

}