@charset "utf-8";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* CSS Document */

body{ font-family: "Microsoft JhengHei", sans-serif; font-optical-sizing: auto; font-size: 18px; color: #454545; line-height: 32px; font-weight: 500; word-break: break-word;}

/**color**/
:root {
	--text:#454545;
	--red: #d21130;
	--redhover:#af1128;
	--green: #198f3b;
	--greenhover:#13662b;
	--title_font:"Noto Sans TC", sans-serif;
	--number_font:"Roboto", sans-serif;
}

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

.imageCenter, .imageCenter a, a.imageCenter{ 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-weight: 500; font-size: 18px;}

/**top**/

.scrollToTop { display: inline-block; background-color:var(--red); width: 48px; height: 48px; border-radius: 100px; text-align: center; position: fixed; bottom: 10vh; right: 5px; 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: #fff;}
.scrollToTop:hover { cursor: pointer; text-decoration: none; background-color: var(--redhover);}
.scrollToTop:hover::after {color: #fff!important;}
.scrollToTop:active { background-color: var(--redhover);}
.scrollToTop.show {	opacity: 1;	visibility: visible;}

/**online_valuation**/
.online_valuation{ position: fixed; z-index: 99; right: 0px; top: 25vh; width: 60px; border-radius: 7px 0px 0px 7px; background: var(--red);}
.online_valuation .title{ background-color: var(--redhover); border-radius: 7px 0px 0px 0px; width: 100%; text-align: center;}
.online_valuation .title span{ display: block; width: 25px; margin: auto 0px auto 13px; padding: 15px 0px; color: #fff; font-size: 20px; letter-spacing: 4px; writing-mode: vertical-lr;}
.online_valuation .title span.mobile_arr{ display: none;}

.online_valuation .smo_area { width: 25px; margin: 15px auto 15px 15px;}
.online_valuation .smo_area .bi { color: #fff; 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, .smo_area .messenger, .smo_area .line{ padding: 5px 0px;}

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


/**index_news_area**/
.index_news_area{ overflow: hidden; background-color: #f2f2f2; border-bottom: 1px solid #d0d0d0;}
.index_news_main{ max-width: 1440px; width: 90%; margin: 30px auto; display: flex; align-items: flex-start;}

/* index_news_owl_arr */
.index_news_main .owl-nav { position: absolute; right: -100px; top: 22px;}
.index_news_main .owl-nav > div { background: var(--red); border-radius: 100px; color: #fff; display: inline-block; width: 34px; height: 34px; margin: 0 3px; text-align: center;   transition: all .3s; line-height: 24px; padding: 5px 0px;}

.owl-carousel .owl-nav .owl-prev span, .owl-carousel .owl-nav .owl-next span{ display: block; position: relative; }
.owl-carousel .owl-nav .owl-prev span::after, .owl-carousel .owl-nav .owl-next span::after{ position: absolute; font-family:'Bootstrap-icons'; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; font-size: 24px; line-height: 24px; padding: 5px 0px;}
.owl-carousel .owl-nav .owl-prev span::after{ content: "\F12C";}
.owl-carousel .owl-nav .owl-next span::after{ content: "\F135";}
.index_news_main .owl-nav > div:hover {opacity: .7;}

/**index_news_title**/
.index_news_title{ font-family: var(--title_font); font-style: italic; font-weight: 700; font-size: 36px; letter-spacing: 2px; position: relative; padding: 50px 25px 50px 50px;}
.index_news_title::after, .index_news_title::before{ position: absolute; content: "";}
.index_news_title::after{ background-color: #dedede; width: 1px; height: 110px; top: 23px; right: 0px;}
.index_news_title::before{ background: url("../images/title_bg.png") no-repeat; left: 0px; top:0px; width: 86px; height: 97px;}

.index_news_list{ display: flex; align-items: flex-end; }
.index_news_main .owl-carousel{ max-width: 1000px; width: 100%; margin: auto auto auto 0px; padding-left: 40px; }


.index_news_date{ background: #fff; width: 80px; height: 70px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.index_news_date span{ font-family: var(--number_font); font-size: 24px; display: block; font-weight: 700;}
.index_news_date span.year{ color:var(--red); opacity: .6; }
.index_news_date span.date{ color:var(--red);}

.index_news_contact{ margin:0px 0px 0px 15px; }
.index_news_contact .title{ font-size: 105%; font-weight:bolder; margin-top: 5px;}
.index_news_contact .title a{ color: var(--green); }
.index_news_contact .title a:hover, .index_news_contact .title a:focus{ text-decoration: none; color: var(--redhover);}
.index_news_contact .dec{ font-size: 90%; line-height: 24px; padding-bottom: 10px;}
.news_more{ padding-left: 3%;}

/**more**/
.more{ width: 155px; position: relative; margin:0px 0px 5px 5%; right: 0px;}
.more::after{ position: absolute; content: ""; background: url("../images/arr_photo.png")no-repeat; right: 8px; top: 5px; height: 25px; width: 63px;}
.more a, .more a:active{ font-family: var(--title_font); font-style: italic; font-weight: 700; font-size: 18px; color: #000; padding-left:15px;}
.more a:hover, .more a:focus{ padding-left: 10px; color: var(--red); text-decoration: none;}


/**index_main**/
.index_main_area{ overflow: hidden; background: url("../images/contact_bg.png") no-repeat center top; background-size: cover;}

/**index_about**/
.index_about_area{ padding: 5% 0px; position: relative;}
.index_about_photo { clip-path: polygon(0 0, 52% 0, 35% 100%, 0% 100%); position: relative; z-index: 3; }
.index_about_text_bg{ width: 64%; min-height: 620px; background-color: #f5f5f5; clip-path: polygon(22.5% 0, 100% 0, 100% 100%, 0% 100%); position: absolute; right: 0px; top: 20%; z-index: 1;}
.index_about_text_area{ font-family:var(--title_font); font-style: italic; overflow: hidden; background: url("../images/logo_bg.png") no-repeat 80% 50px; margin-left: 20%; padding-top: 8%;}

.index_title{ position: relative; padding: 40px 25px 50px 50px; font-size: 36px; font-family:var(--title_font); font-style: italic; font-weight: 700; letter-spacing: 2px; line-height: 1.4;}
.index_title::before{ position: absolute; content: ""; background: url("../images/title_bg.png") no-repeat; left: 0px; top:0px; width: 86px; height: 97px;}
.index_title h1 { margin: 0px; padding: 0px; font-family: var(--title_font); font-style: italic;}

.index_about_text { max-width: 710px; width: 90%; font-size: 110%; font-weight: 400; line-height: 36px; }
.text-color01{ color:var(--green);}
.text-color02{ color:var(--red);}
.index_about_more{ max-width: 710px; width: 90%; position: relative; min-height: 40px; overflow: hidden;}
.index_about_more .more{ position: absolute; right: 0px;}

/**index_forex_car**/
.index_forex_car .index_title{ max-width: 500px; margin: auto;}
.process_area { position: relative; margin: 3% auto 10% auto;}

.porcess_step-odd, .porcess_step-even { position: relative; max-width: 920px; width: 90%; margin: auto; display: flex; align-items: center;}
.porcess_step-odd .step_photo{ left: 0px;}
.porcess_step-even .step_photo{ right: 0px;}

.step_photo { position: absolute;}
.step_photo img{ border-radius: 300px;}

.step_text_area{ display: flex; align-items: stretch; min-height: 120px; background-color: #fff; width: 100%; border-radius:42px; box-shadow: 0px 0px 10px #cfcfcf;}
.porcess_step-odd .step_text_area{ justify-content: space-between; border: 1px solid var(--green); margin-left: 3px; margin-right: 20px;}
.porcess_step-even .step_text_area{ flex-direction: row-reverse; justify-content: flex-end; border: 1px solid var(--red); margin-left: 20px; margin-right: 30px;}

.step_text{ font-size: 180%; font-weight: bolder; text-align: center; display: flex; align-items: center; justify-content: center; width: 68%; line-height: 1.25; }
.porcess_step-odd .step_text{ margin-left: 180px; }
.porcess_step-even .step_text{}

.step_number-green, .step_number-red{display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 120px;}
.step_number-green { background: linear-gradient(to right,  #0e5f20 0%,#228f3b 100%); border-radius: 0px 42px 42px 0px;}
.step_number-red { background: linear-gradient(to right,  #d21130 0%,#a90f28 100%); border-radius: 42px 0px 0px 42px;}

.step_title, .step_munber {color: #fff; font-weight: bolder; font-family: "Oswald", sans-serif;}
.step_title{ text-transform: uppercase; padding: 5px 0px;}
.step_munber{font-size: 380%; padding-top: 5px; }
.arr_down { text-align: center; padding: 2% 0px;}
.arr_down img{ width: 38px;}

/****/
.car_info_icon{ max-width: 1170px; width: 84%; margin: auto auto 5% auto;}
.info_icon_area{ border:1px solid #809e63; width: 160px; height: 160px; border-radius: 160px; position: relative; text-align: center; margin: auto;}
.info_icon_area .bi {font-size: 450%; line-height: 150px; position: absolute; margin: auto; left: 0px; right: 0px; z-index: 1;color: #2e2e2e;}
.label_new, .label_detail { top: 25%; right: 25%; position: absolute; z-index: 3; background-color: #d2132f; color: #fff; line-height: 20px; border-radius: 5px;}

.label_new{ font-size: 14px; font-weight: bold; width: 40px; height: 20px; }
.label_detail{ width: 35px; height: 30px;}
.label_detail i::before{ color: #fff;}
.label_detail .bi{ font-size: 110%; line-height: normal!important;}

.car_info_icon_text{ font-weight: bold; margin-top: 15%; text-align: center;}
.car_info_icon_text a{ color: #2e2e2e; }


/****/

@media all and (max-width: 1920px) {

}
@media all and (max-width: 1536px) {
	.online_valuation{ width: 52px;}
	.online_valuation .title span{ margin-left: 8px;}
	.online_valuation .smo_area{ margin-left: 10px;}
	.owl-carousel .owl-nav .owl-prev span::after, .owl-carousel .owl-nav .owl-next span::after { line-height: 40px;}	
}
@media all and (max-width: 1440px) {
	.online_valuation{ width: 50px;}
	.index_news_main .owl-nav{right: -30px;}
}
@media all and (max-width: 1366px) {
	.online_valuation{ width: 48px;}
	.index_news_main .owl-nav{right: -10px;}
	.scrollToTop{ width: 40px; height: 40px;}
	.scrollToTop::after{line-height: 40px;}
	
}
@media all and (max-width: 1280px) {
	body, p, td, li, label { font-size: 98%; line-height: 26px;}
	.online_valuation{ width: 44px;}
	.online_valuation .title span{ margin-left: 3px;}
	.online_valuation .smo_area .bi{ font-size: 20px;}
	.scrollToTop{ width: 32px; height: 32px;}
	.scrollToTop::after {line-height: 35px;}
	.index_news_main{ margin: 2% auto;}
	.index_news_title{ font-size: 28px; letter-spacing: 1px;}
	.index_news_main .owl-carousel{ width: 80%;}
	.index_news_main .owl-nav{ top: -30px;}
	.index_about_photo {clip-path: polygon(0 0, 57% 0, 40% 100%, 0% 100%);}
	.index_about_photo img{ height: 550px;}
	.index_about_text_bg{ width: 60%; min-height: inherit; padding-bottom: 2%;}
	.index_about_text_area{margin-left: 20%; background-size: 50%;}
	.index_title, .index_title h1{ font-size: 28px; letter-spacing: 1px;}
	.step_text_area{ min-height: 100px;}
	.step_photo img{ width: 86%;}
	.porcess_step-even .step_photo { right: -28px;}
}

@media all and (max-width: 1024px) {
	.online_valuation .title span{ font-size: 110%;}
	.online_valuation .smo_area{ margin: 10px auto 10px 10px;}
	.index_news_main { margin: 1% auto;}
	.index_news_main .owl-carousel{ padding-left: 20px;}
	.index_news_title{ padding-right: 20px;}
	.index_news_main .owl-carousel { width: 77%;}
	.index_news_main .owl-nav {top: 10px;}
	.index_news_list{ flex-direction: column; align-items: flex-start;}
	.index_news_date{ flex-direction: row; align-items: center; width: inherit; height: inherit; padding: 5px; }
	.index_news_date span{font-size: 90%;}
	.news_more{ padding-left: 0px;}
	.index_news_contact{ margin: 0px;}
	.more{ width: 140px;}
	.more a, .more a:active{ font-size: 90%;}
	.more::after{ top: 0px;}
	.index_about_area{ padding-top: 0px;}
	.index_about_photo{clip-path: inherit;}
	.index_about_photo img { height: inherit;}
	.index_about_text_bg{position: inherit; width: 100%; clip-path: inherit;}
	.index_about_text_area{ margin-left: inherit; width: 78%; margin: auto; padding-top: 2%;}
	.index_about_text{ max-width: inherit; width: 100%;}

}
@media all and (max-width: 991px) {	
	.online_valuation{ right: -50px; top: 15%; width: 80px; display: flex; align-items: stretch; transition: 0.3s; border-radius: 8px 0px 0px 8px;}
	.online_valuation:hover{ right: 0px;}
	.online_valuation .title{ width: 40px; border-radius: 8px 0px 0px 8px; }
	.online_valuation .title span{ width: inherit; margin: auto; padding: 10px 0px 0px 2px; letter-spacing: 6px;}
	.online_valuation .title span.mobile_arr{ display: block; padding-left: 4px;}
	.online_valuation .smo_area{ margin: 5px auto;}
	.smo_area .tel, .smo_area .mail, .smo_area .messenger, .smo_area .line { padding: 3px 0px;}
	
	.index_news_main .owl-nav > div{ width: 30px; height: 30px; border-radius: 0px;} 
	.owl-carousel .owl-nav .owl-prev span::after, .owl-carousel .owl-nav .owl-next span::after{ line-height: 34px;}
	.step_photo img { width: 75%;}
	.step_text_area { min-height: 90px; width: 94%;}
	.step_text{ font-size: 130%;}
	.step_title{ padding: 0px;}
	.step_munber{ font-size: 330%;}	
	
}
@media all and (max-width: 853px) {
	.index_news_main .owl-carousel { width: 70%;}
	.scrollToTop::after {line-height: 30px;}
}
@media all and (max-width: 767px) {
	.index_news_title::before, .index_title::before{ background-size: 80%;}
	.index_news_title, .index_title{ font-size: 20px; padding-top: 40px; padding-left: 35px;}
	.index_title h1{font-size: 20px;}
	.arr_down img { width: 25px;}
	
	
	.index_forex_car .index_title{max-width: 207px;}
	.info_icon_area{width: 120px; height: 120px;}
	.label_new, .label_detail{ top: 10%; right: 0; left: 0px; margin: auto; }
	.label_detail{ height: 25px;}
	.info_icon_area .bi{line-height: 135px;}
	.car_info_icon_text{margin-top: 10%;}
}
@media all and (max-width: 712px) {	
	.scrollToTop{ right: 8px;}
		.index_news_date span{ line-height: 24px;}
	.index_news_main .owl-nav {right: 0px;}
	.index_news_main .owl-carousel {width: 64%; }
	
	.process_area{ width: 90%; margin: 0px auto 5% auto;}
	.step_photo { position: inherit; text-align: center; margin: 10px auto;}
	.step_photo img{ width: auto;}
	
	.porcess_step-odd, .porcess_step-even{ display:inherit ;}
	.porcess_step-odd .step_text_area, .porcess_step-even .step_text_area{ margin-left: inherit; margin-right: inherit; margin-top: 3%;}
	.step_text_area {min-height: inherit; width: 90%;}
	.step_number-green, .step_number-red{ flex-direction: row; align-items: center; justify-content: center;}
	.step_munber{ font-size: 270%; padding: 10px 5px;}
	.step_title{ padding: 5px 0px 5px 5px;}
	.porcess_step-odd .step_text { margin-left: inherit;}
	.porcess_step-even .step_photo{ right: inherit;}
	.step_text {font-size: 110%; padding: 0px 15px;}
	.step_text img{ height: 70%;}
	.car_info_icon_text { margin: 5% auto; }
}
@media all and (max-width: 540px) {
	.index_about_text{ font-size: 100%; line-height: 30px;}
	.step_photo img { width: 50%;}


}
@media all and (max-width: 480px) {
	 .scrollToTop::after {line-height: 30px;}
	.index_news_main{ flex-direction: column;}
	.index_news_title::after{ display: none;}
	.index_news_title, .index_title{ padding-bottom: 15px;}
	.index_news_main .owl-carousel { width: 90%; }
	.index_news_main .owl-nav { top: -45px;}
	.news_more{ position: relative; right: -40%;}
	.step_number-green, .step_number-red{ width: 80px;}
}

@media all and (max-width: 390px) {	
	.info_icon_area { width: 110px; height: 110px;}
	.info_icon_area .bi-car-front{ font-size: 360%;}
}
@media all and (max-width: 360px) {
	.step_text{ font-size: 100%; line-height: 24px;}
	.step_text img{ height: 50%;}
	.news_more { position: relative; right: -25%; }
}
	
@media all and (max-width: 320px) {
	.car_info_icon_text{ font-size: 90%;}
	.index_about_text_area, .car_info_icon{ width: 76%;}
	.info_icon_area { width: 100px; height: 100px;}
	.info_icon_area .bi-car-front { font-size: 310%;}
	.info_icon_area .bi { line-height: 120px;}	
	.news_more{right: -0%;}
	

}
@media all and (max-width: 280px) {
	.scrollToTop::after { line-height: 35px; }
	.step_text_area{ border-radius: 20px;}
	.step_number-green{border-radius: 0px 20px 20px 0px;}
	.step_number-red{border-radius: 20px 0px 0px 20px;}
	.step_munber{font-size: 200%;}
	.car_info_icon .col-6{ flex: 0 0 100%;  max-width: 100%;}
	
	

}