@charset "utf-8";
@import url("share.css");
/* CSS Document */
hr{ border-top: rgba(0, 119, 93, 1) 1px solid;}

/**in_banner**/

.in_banner_area{ position: relative; overflow: hidden; width: 93%; margin: 100px auto 0px auto; border-radius: 14px; z-index: 2;} 
.in_banner_area img{ width: 100%;}
.in_slogin_area{ width: 90%; position: absolute; z-index: 3; margin-left: auto; left: 0px; margin-right: auto; right: 0px; top:25%; font-family: "Noto Sans TC", sans-serif; font-style: italic; text-shadow: 0px 0px 5px #000; font-weight: 700; font-size: 30px; color: #fff; line-height: 50px; letter-spacing: 2px;}
.in_slogin_area span.title_line img{ width: 170px; }

/****/
.in_main_area{ overflow: hidden; width: 93%; margin:-15px auto auto auto; background-color: #fff; padding-bottom: 0.5%;}

/**breadcrumb**/
.breadcrumb_area{ background-color: #f1f1f1; padding: 22px 15px 10px 15px; border-radius: 0px 0px 14px 14px;}
ol.breadcrumb{ padding: 0px; margin-bottom: 0px; background-color: transparent;}
ol.breadcrumb li{ font-size: 16px;}
ol.breadcrumb li a{	color: #000;}
ol.breadcrumb li a:hover, ol.breadcrumb li a:focus{	text-decoration: none;	color: var(--green);}
.breadcrumb-item{ color: #000;}
.breadcrumb-item.active { color: var(--red); font-weight: bold;}
/****/

/**second_menu_area**/
.second_menu_area{ border-bottom: 1px solid #e4e4e4; position: relative;}
.second_menu_area .second_menu ul{ margin: 15px auto; padding: 0px; display: flex; align-items: center; justify-content: center; list-style: none;}
.second_menu_area .second_menu ul li{ text-align: center; margin: auto 3px;}
.second_menu_area .second_menu ul li a{ line-height: 40px; color: #000; text-decoration: none; font-size: 100%; display: block; padding: 0px 30px;}
.second_menu_area .second_menu ul li a:hover{ color:var(--red); background-color: #f1f1f1;}
.second_menu_area .second_menu ul li.current a{ border: 1px solid var(--green);}
.second_menu_area .second_menu ul li.current a:hover{ background-color: #fff; }

/**second_menu_area_mobile**/
.second_menu_area .line {  cursor: pointer; display: none; padding: 16px; position: inherit; z-index: 2; top: 0px;}
.second_menu_area .line .menu, .second_menu_area .line .menu::before, .second_menu_area .line .menu::after { background: #fff; content: '';  display: block; height: 2px; position: absolute; transition: background ease .3s, top ease .3s .3s, transform ease .3s; width: 20px;}
.second_menu_area .line .menu::before { top: -6px;}
.second_menu_area .line .menu::after { top: 6px;}
/**/
#menu:checked + .line .menu { background: transparent;}
#menu:checked + .line .menu::before { transform: rotate(45deg);}
#menu:checked + .line .menu::after { transform: rotate(-45deg);}
#menu:checked + .line .menu::before, #menu:checked + .line .menu::after {top: 0; transition: top ease .3s, transform ease .3s .3s;}
/**/
#menu:checked ~ .menu-list { width: 200px;}
/**/
input#menu { display: none; }

/****/
.in_container{ overflow: hidden; padding-top: 3%;}
.in_container a{ color: #252c2a;}
.in_container a:hover, .in_container a:focus{ color: var(--green); text-decoration: none; transition: 0.3s ease-in-out;}

.in_container_title { max-width: 1440px; width: 90%; margin :auto auto 25px auto ; text-align: left;}
.in_container_title h1{ position: relative; font-size: 36px; font-weight: bold; padding: 80px 0px 15px 0px; margin: 0px; line-height: 1.4; text-align: center;}
.in_container_title h1::before{ position: absolute; content: ""; background: url("../images/img_line.svg") no-repeat left; width: 100px; height: 3px; left: 0px; right: 0px; margin: auto; bottom: 0px;}

.in_container_text{ background: url("../images/service_area_bg.jpg") no-repeat center top;}


/**about**/
.about_introduction_area{ overflow: hidden; position: relative; width: 100%;}
.about_introduction_area::after{ position: absolute; content: ""; width: 100%; background: url("../images/about_text_bg.jpg") no-repeat right; height: 550px; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; z-index: 1;}
.introduction_main{ max-width: 1440px; width: 90%; margin: auto; display: flex; justify-content: center; align-items: center; position: relative; z-index: 9;}
.boss_photo{ flex-basis: 465px; position: relative;}
.boss_photo::after {position: absolute; content: ""; width: 15px; height: 220px; background-color: var(--green); left: 0; right: 0px; top: 0px; bottom: 0px; margin: auto 0px auto auto;}
.introduction_text{flex-basis: 860px; margin-left: 8%;}
.introduction_text .text_title{ max-width: 540px; width: 90%; position: relative; color: #454545; font-size: 36px; font-family: var(--title_font); font-style: italic; font-weight: 700; padding: 10px 0px 20px 30px;line-height: 1.4;}
.introduction_text .text_title span{ color:var(--green);}
.introduction_text .text_title::after, .introduction_text .text_title::before{ position: absolute; content: ""; width: 25px; height: 25px;}
.introduction_text .text_title::after{ background: url("../images/title_arr_left.png");  left: 0px; top: 0px;}
.introduction_text .text_title::before{ background: url("../images/title_arr_right.png");  right: 0px; bottom: 0px;}

.text_main{ margin: 5% auto auto 5%;}
.text_main strong{ color: var(--red);}

/**introduction_car**/
.introduction_car, .introduction_family{ position: relative; overflow: hidden;}
.introduction_car{  margin: 6% auto auto auto; padding: 0 3%;min-height: 1100px;}
.family_photo{ position: absolute; z-index: 1; bottom: 0px;left: 0; width: 100%;}
.family_photo img{ width: 100%;}

.introduction_car_main, .introduction_family_main{z-index: 9; text-align: center;}
.introduction_car_main { position: relative; }
.car_main_title{ font-size: 36px; font-family: var(--title_font); font-style: italic; font-weight: 700; margin: 3% 0;line-height: 1.4; padding: 0 5px;}
.car_main_text{ line-height: 1.4; }
.slogan_green, .slogan_red{ font-size: 24px; color: #fff; font-family: var(--title_font); font-style: italic; font-weight: 700;}
.slogan_green, .slogan_red{ background: var(--green); max-width: 550px; margin:2% auto; line-height: 40px; }

.introduction_family{ min-height: 750px; }
.introduction_family .family_photo{ top: 0px;}
.introduction_family_main{ position: absolute; width: 680px; height: 420px; background-color: #fffc; right: 5%; bottom: 10%; padding-top: 10px;}
.slogan_red{ background: var(--red);}

.service_area{ overflow: hidden; width: 100%; background: url("../images/service_area_bg.jpg") no-repeat center;  padding: 5% 0px; }
.service_area .car_main_title{ text-align: center; margin-bottom: 1%;}
.service_main{ max-width: 1366px; width: 90%; margin:2% auto; overflow: hidden;}
.service_main_con{ width: 33%; padding: 0 10px;}
.service_item{ position: relative; max-width: 580px; height: 240px; width: 100%; margin: 5% auto; border-radius: 30px; border: 2px solid var(--green); padding: 20px;}
.service_item::after{ position: absolute; font-family: bootstrap-icons !important; content: "\F7E1"; font-size: 40px; bottom: -1px; right: 6%;}
.service_item_title{ color: var(--green) ; text-align: center; padding-bottom: 10px; font-size: 20px; font-family: var(--title_font); font-style: italic; font-weight: 700; border-bottom: 1px solid #e8e8e8;line-height: 1.25;}
.service_item_text{ padding-top: 10px; font-size: 17px; line-height: 1.25;}

.store_photo_area{ width: 94%; margin:5% auto auto auto; overflow: hidden;}
.store_photo_area .row{ align-items: center;}
.store_main_photo{ text-align: center;}
.store_photo{ width: 95%; margin: auto auto auto 10px;}
.store_photo_title{ position: relative; font-size: 36px; font-family: var(--title_font); font-style: italic; font-weight: 700; margin-bottom: 2%; padding-left: 20px;}
.store_photo_title::after{ position: absolute; content: ""; width: 45%; height: 1px; background-color:var(--green) ; right: 2%; top: 55%;}
.store_photo .slick-slide{ margin:10px;}
.store_photo .slick-slide img{ width:100%;}
.store_photo .slick-prev:before, .store_photo .slick-next:before{ color: #c47b2e; font-size: 28px;}

/**forex_cart**/
.forex_cart{ max-width: 1320px; width: 90%; margin: 3% auto 5% auto;}
.forex_cart_item{ margin: 3% auto; position: relative; display: flex; align-items: flex-end; justify-content: flex-start; padding-bottom: 20px;}
.forex_cart_item.ml-4{ margin-left: 8%!important;}
.forex_cart_item::after{position: absolute; content: ""; width: 100%; height: 1px; background-color:#aaaaaa; bottom: 0px; right: 0px; left: 50px;}

.forex_cart_photo{ position: relative; padding: 50px 0px 0px 50px; flex-basis: 370px;}
.forex_cart_photo img{ position: relative; right: 0px; bottom: 0px;}
.forex_cart_set{ position: absolute; z-index: 3; left: 0px; top: 0px;}
.forex_cart_set .step_number-green, .forex_cart_set .step_number-red{ width: 100px; height: 100px; border-radius: 100px;}
.forex_cart_set .step_munber{ font-size: 280%;}

.forex_cart_text{ margin-left: 2%;}
.forex_cart_title{ color: #000; font-size: 26px; font-weight: bold;}
.forex_cart_info{}
.forex_cart_text img{ margin-left: 20px;}
.forex_cart_info ul{ margin: 20px auto auto 0px; padding: 0px 0px 0px 25px;}
::marker { color:var(--green);}

/**tariff_calculation_area**/
.tariff_calculation_area{ width: 90%; margin: auto;}
.tariff_calculation_info{ max-width: 750px; width: 100%; margin: auto;}
.calculation_title{ font-size: 26px; color: #000; font-weight: bold; text-align: center;}
.calculation_text{ margin: 4% auto;}
.calculation_list{margin: auto auto 4% auto; display: flex; align-items: center; justify-content: center;}
.calculation_list .text-left{flex-basis: 550px; display: flex; align-items: center;}
.list_title{ font-family: var(--title_font); font-size: 22px; color: #000; font-weight: 600; font-style: italic; padding-right: 10px; text-align: right; flex-basis: 200px;} 
.arr_color{ color:var(--green); padding-top: 3px; padding-right: 3px;}
.arr_color-red{color: var(--red); padding-top: 3px; padding-right: 3px;}

.bi-play-fill::before{ font-size: 20px;}

.calculation_example{ margin: 6% auto;}
.calculation_example .row{ align-items: center; margin-left: 0px; margin-right: 0px;}
.calculation_example .boss_photo{ max-width: 520px; margin: auto;}
.calculation_example .boss_photo::after{ right: -15px;}
.calculation_example .calculation_list{ margin: 2% auto;}
.calculation_example .list_title{ flex-basis: 190px;}
.calculation_example .calculation_list .text-left{ flex-basis: 700px; font-size: 17px;}
.text_color_style{font-family: var(--title_font); font-size: 20px; color: var(--green); font-weight: 600; font-style: italic;}

.regulations_area{margin: 6% auto;}
.note_area{max-width: 1000px; width: 90%; margin: auto;}
.note_area a{color: var(--green);}
.note_area a:hover, .note_area a:focus{ color: var(--red);}
.note_text{ color: var(--red); font-weight: bold;}

/**table**/
.table_scroll { overflow-x: auto;}
.table_scroll > table { min-width: 700px;}

table.datatable{ max-width: 1000px; width: 100%; background-color: #d8ffe1; border: 2px solid var(--green); margin: 15px auto;}
table.datatable th, table.datatable td{ line-height: 42px; border-right: 1px solid #6af289;}
table.datatable th{ font-size: 110%; text-align: center; padding: 3px 10px; background-color: var(--green); color: #fff; font-weight: bold; }
table.datatable td{ font-size: 100%; text-align: left;  padding: 3px 40px; border-bottom: 1px solid #fff; border-right: 1px solid #fff;}
.table-striped tbody tr:nth-of-type(odd) { background-color: #ededed;}

/**pro_area_index**/
.pro_area_index { max-width: 1170px; width: 90%; margin: 3% auto;}
.proindex_item_area{ max-width: 540px; width: 100%; margin: 3% auto;}
.item_photo{ background-color: #fcfcfc; border: 7px solid #fff; border-radius: 20px; overflow: hidden; position: relative; padding-bottom: 69%; height: 0; line-height: 0; z-index: 1; transition: all 0.5s ease 0s;  margin: 10px; box-shadow: 0px 0px 8px #e2e2e2;}
.item_photo:hover{border: 7px solid var(--green); border-radius: 20px;}
.item_photo img { transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.item_photo:hover img { transform: scale(1.05, 1.05); }

.item_title{ font-size: 24px; font-style: italic; font-weight: bolder; text-align: center; padding-top: 10px;}
.item_title a{ color: var(--green); display: block;}

/**pro_detail_area**/

.pro_detail_main{ overflow: hidden; width: 90%; margin: auto;}
.pro_detail_area{ max-width: 1280px; width: 100%; margin: auto;}
.pro_detail_area .col-lg-6{ margin-left: 0px; margin-right: 0px;}
/****/
.item-slick.slick-slide.slick-current.slick-active{outline: none!important;}
.slider-for, .slider-nav{ max-width: 580px; width: 100%; margin: auto auto 10px auto;}
.slider-nav{width: 100%; margin: auto;}
.detail_photo { overflow: hidden; position: relative; background-color: #fdfbfb; height: 0; line-height: 0; z-index: 1; transition: all 0.5s ease 0s;}
.detail_photo{ padding-bottom: 100%; }

.slider-nav{width: 100%; margin: auto; overflow: hidden;}
.slider-nav	.item-slick{width: 133px; height: 133px; margin: auto 8px; outline: none!important; cursor: pointer; border: 1px solid #000;}		
.slider-nav .item-slick img{ max-width: 100%; background-size: cover; background-position: center;}
.slick-arrow{position: absolute;top: 50%;z-index: 50;}
.slick-prev{left: 0;}
.slick-next{right: 0;}
.slider-nav .slick-prev:before, .slider-nav .slick-next:before{ color: var(--red);}


/**pro_info_detail_text**/
.pro_info_detail_text{ margin:auto auto 5% auto;}
.pro_info_detail_title{ font-family: var(--title_font); font-size: 24px; color: var(--green); font-weight: 700; font-style: italic; padding-bottom: 5px; border-bottom: 1px solid #c4c4c4;}
ul.no_list{ list-style: none; margin: 0px; padding: 0px;}
.equipment_title{font-family: var(--title_font); font-size: 20px; font-weight: 700; font-style: italic;}
ul.equipment_main{ width: 100%; list-style: none; margin: 2% 0px; padding: 0px; }
ul.equipment_main .col-xl-4{ padding-left: 0px; padding-right: 0px;}
ul.equipment_main .equipment_title_B{ max-width: 100%!important;flex: 0 0 100%!important;}

ul.equipment_main li .bi-check2-circle{color: var(--red); font-size: 20px;}
ul.equipment_main ul.no_list{ margin: 3% auto 5% auto;}
ul.equipment_main ul.no_list li{ line-height: 30px;}
ul.equipment_main ul.no_list .list-gray{ color: #999;}
ul.equipment_main ul.no_list .list-gray .bi-check2-circle{color: #999;}

/**pro_de_tabs**/
#tabs nav { width: 100%; margin: auto;}
.pro_de_tabs{ margin:8% auto;}
.nav-tabs { border-bottom: 1px solid var(--red); padding-bottom: 4px;}
.nav-tabs .nav-link{ border-radius: 0px; font-size: 22px; letter-spacing: 2px; font-weight: 500; margin: auto 2px;}
.nav-tabs a.nav-link { background-color: #dedede;}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #fff; background-color: var(--green); border-color: transparent transparent var(--green);}
.nav-tabs .nav-link:hover { color: #fff; background-color: var(--greenhover); border-color: transparent transparent var(--greenhover);}

.tab-content{ padding: 10% 5%; background-color: #fff;}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;} 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


/****/
.back_list{ margin:20px auto 70px auto; display: flex; justify-content: center; align-items: center;}
.back_list_prev, .back_list_main, .back_list_next{ margin: auto;}
.back_list_prev a, 
.back_list_main a, 
.back_list_next a{ font-size: 24px; color: var(--green); border: 1px solid var(--green); line-height: 40px; width: 40px; height: 40px; text-decoration: none; text-align: center; margin: auto; display: block;}
.back_list_prev a:hover, .back_list_prev a:focus, 
.back_list_main a:hover, .back_list_main a:focus, 
.back_list_next a:hover, .back_list_next a:focus{ background-color: var(--greenhover); color: #fff;}
.bi-caret-left-fill::before, .bi-grid-fill::before, .bi-list-task::before{ line-height: 40px;}

/**pagination**/
.page_nav{ margin:20px auto 70px auto;}
.pagination { justify-content: center; align-items: center;}
.pagination a { font-size: 18px; color: var(--green); background-color: #fff; border: 1px solid var(--green); display: block; line-height: 40px; width: 40px; height: 40px; text-decoration: none; text-align: center; margin: auto 7px;}
.pagination a.active { background-color: var(--red); color: #fff;}
.pagination a:hover:not(.active) {color:#fff; background-color:var(--greenhover);}


/**news**/
.news_list_area{ max-width: 1366px; width: 90%; margin: auto; overflow: hidden;}
.news_list_all {max-width: 380px; width: 100%; background-color: #fff; margin: auto;overflow: hidden; margin-bottom: 15%; box-shadow: 0px 0px 8px #e2e2e2; padding-bottom: 15px;}
.news_photo { overflow: hidden; position: relative; padding-bottom: 57%; height: 0; line-height: 0; z-index: 1; border: 1px solid var(--green);}
.in_news_date{ margin: 20px 15px 0px 15px;}
.in_news_date span{ font-family: var(--number_font); font-weight: 700;}
.in_news_date span.year{ color:var(--red); opacity: .6; padding-right: 10px;}
.in_news_date span.date{ color:var(--red);}

.in_news_contact{ margin: auto 15px; padding: 0px 0px 10px 0px;}
.in_news_contact .title{ font-size: 20px; font-weight: 600;}
.in_news_contact .dec{ font-size: 90%;}
.in_news_contact .title a{ color: var(--green);}
.in_news_contact .title a:hover, .in_news_contact .title a:focus{ color: var(--red); text-decoration: none; transition: 0.3s ease-in-out;}

.news_list_all .more{ margin: auto 15px 15px auto!important;}
.news_list_all .more a:hover, .news_list_all .more a:focus{ padding-left: 10px; color: var(--red); text-decoration: none;}

/****/
.news_list_content{ max-width: 1170px; width: 90%; margin: auto;}
.news_list_content .in_news_date{ background-color: #fff; padding: 5px 20px; border-radius: 20px; border:1px solid var(--green);}
.news_list_content .in_news_date .date_info{ text-align: right;}
.news_detail{ margin:5% auto;}
.news_detail .title{ text-align: center; font-weight: bold; color: var(--green); font-size: 24px; margin-bottom: 20px; }
.news_detail img{ margin-bottom: 20px; border: 1px solid var(--green);}
.news_detail a{ color: #c47b2e; overflow-wrap: break-word;}
.news_detail a:hover{ color: #00775d; }


/**qa_area_index**/

.qa_area_index { max-width: 1280px; width: 90%; margin: 3% auto;}
.qa_item_area{ max-width: 350px; width: 100%; margin: 3% auto;}
.qa_item_area .item_photo{ background-color: #fcfcfc; border: 7px solid #fff; border-radius: 20px; overflow: hidden; position: relative; padding-bottom: 67%; height: 0; line-height: 0; z-index: 1; transition: all 0.5s ease 0s;  margin: 10px; box-shadow: 0px 0px 8px #e2e2e2;}
.qa_item_area .item_photo:hover{border: 7px solid var(--green); border-radius: 20px;}
.qa_item_area .item_photo img { transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.qa_item_area .item_photo:hover img { transform: scale(1.05, 1.05); }
.item_title{ font-size: 24px; font-style: italic; font-weight: bolder; text-align: center; padding-top: 10px;}
.item_title a{ color: var(--green); display: block;}

/****/
.aq_area{ max-width: 1280px; width: 89%; margin: auto;}
.aq_area .card-header h2 .btn{ margin-top: 15px; padding-right: 40px; white-space:inherit;}
.aq_area .card-header h2{ position: relative; padding: 0px 0px 20px 70px;}
.aq_area .card-header h2::before{ position: absolute; content: ""; background: url("../images/q_arr.png") no-repeat left top; width: 60px; height: 60px; left: 0px; top: 0px;}
.aq_area .card-header button[aria-expanded="false"]:after{ top: 0px; bottom: inherit;}
.aq_area .card-header button[aria-expanded="true"]:after{ top: 0px; bottom: inherit;}
.aq_area .card-body{ background: url("../images/a_arr.png")no-repeat 10px 10px; padding: 30px 10px 20px 70px; margin-left: 15px;}
.aq_area .card-body ul{ margin:20px auto;}
.accordion{ margin: auto auto 20% auto;}
.accordion .card{ background-color: transparent; border: 0px; border-radius:0px; }
.accordion > .card > .card-header{ margin-bottom: inherit; }
.card-header{ background-color: transparent; border-bottom: 1px solid var(--red); padding: 0px;}
.card-header h2{ margin: 20px 0px 0px 0px; padding: 0px 0px 0px 10px;}
.card-header h2 .btn{ color: #000; font-size: 24px; line-height: 36px; font-weight:700; padding: 0px 0px 5px 0px; border-radius: 0px; letter-spacing: inherit; }

.card-header button {position: relative; }
.card-header button[aria-expanded="true"]:after {
	position: absolute; 
	color: #fff;
	text-align: center;
	content: "\2212";
	background-color: var(--red);
	width: 36px;
	height: 36px;
	border-radius: 36px;
	line-height: 34px;
	right: 0px;
	bottom: 3px;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.card-header button[aria-expanded="false"]:after {
	position: absolute; 
	color: #fff;
	text-align: center;
	content: "\002b";
	background-color: var(--red);
	width: 36px;
	height: 36px;
	border-radius: 36px;
	line-height: 34px;
	right: 0px;
	bottom: 3px;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.btn-link:hover, .btn-link:focus { color:var(--redhover); text-decoration: none;}
.btn.focus, .btn:focus { outline: 0; box-shadow: 0 0 0 0 rgba(0,123,255,.25);}

.card-body{padding: 2rem;}
.card-body .row, .pro_text .row { flex-direction: row-reverse;}
.mold_photo{ text-align: center; }
.mold_photo img{ border-right: 6px solid var(--orange); border-left: 6px solid var(--orange);}


/**contact**/
.note{ max-width: 1170px; width: 100%;	margin: auto;}
.note .red{ color: #ff0000;}
.contact_form{ max-width: 1170px; width: 100%; margin: auto; padding: 25px;}

.contact_form ul{ 
	margin: 0px auto;
	padding: 0px;
	width: 96%;
	list-style: none;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.contact_form ul li.width-full { display: block; width: 100%;}
.contact_form ul li select {
    color: #535353;
	font-weight: inherit;
    padding: 0 0 0 15px;
    width: 100%;
    height: 50px;
    line-height: 50px;
	background-color: #f5f5f5;
	appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; 
}
.contact_form ul li select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

.contact_form ul li select.minimal:focus {
  background-image:
    linear-gradient(45deg, green 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, gray 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: gray;
  outline: 0;
}


.contact_form ul li select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000;}
.contact_form select, .contact_form input, .contact_form option, .contact_form textarea, .contact_form input[type=radio] + label, .contact_form input[type=checkbox] + label{
	transition: all 0.5s;
    box-sizing: border-box;
    outline: none;
    background: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.contact_form ul li {
    display: inline-block;
    width: 49%;
    margin: 15px 10px 15px 0px;
}
.contact_form ul li input {	
	font-weight: inherit;
    padding: 0 15px;
    width: 100%;
    height: 50px;
    line-height: 50px;
}
.contact_form ul li input::placeholder, .contact_form ul li textarea::placeholder { color: #535353;}
.contact_form ul li.contact-msg {
    display: block;
    width: 100%;
}
.contact_form ul li textarea {
    padding: 10px 15px;
    width: 100%;
    height: 100px;
    line-height: 20px;
	font-weight: inherit;
}
.contact_form ul.contact-btn li{
	display: flex;
	justify-content: center;
    max-width: 25%;
	margin: auto;
}
.contact_form button.contact-clean {
	width: 120px;
    padding: 5px 0;
    height: auto !important;
    color: #000;
    border-radius: 40px;
    background-color: #d0d0d0;
    border: solid 1px rgba(0, 0, 0, 0.1);
}
.contact_form button.contact-send {
	width: 120px;
    padding: 5px 0;
    margin-left: 20px;
    height: auto !important;
    color: #fff;
    border-radius: 40px;
    background-color: var(--green);
    border: solid 1px white;
}
.contact_info ol{ margin: 30px auto; padding: 0px 0px 0px 25px;}
.contact_info ol li{ font-size: 20px; line-height: 32px;}

/****/
.contact_address{ overflow: hidden; margin: 5% auto;}
.contact_address_info{ display: flex; flex-direction: column; align-items: center; max-width: 350px; width: 90%; min-height: 270px; border: 1px solid #8dbc88; border-radius: 20px; box-shadow: 0px 0px 8px #e2e2e2; margin: 10px auto; padding-top: 12%;}
.contact_address_info .icon .fa-map-marker:before, .contact_address_info .icon .fa-phone:before, .contact_address_info .icon .fa-envelope-o:before{ color: #c47b2e; font-size: 300%;}
.contact_address_info .title{ color: #00775d; font-weight: 700; font-size: 24px; margin: 5% auto;}
.contact_address_info .address{ line-height: 26px; padding: 0px 20px; text-align: center;}

.address_map {
  position: relative;
  padding-bottom: 26%; 
  height: 0;
  overflow: hidden;
}
.map_style{ padding-bottom: 0px!important;}
.address_map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/****/

@media all and (max-width: 1536px) {
	.in_slogin_area{top: 16%;}
	.introduction_car{min-height: 920px;}
	.introduction_family { min-height: 600px;}
	.list_title{font-size: 20px;}
	.calculation_example .list_title{flex-basis: 260px;}

	
}
@media all and (max-width: 1440px) {
	.introduction_family { min-height: 568px;}	
}
@media all and (max-width: 1366px) {
	.in_slogin_area{ font-size: 24px; line-height: 40px;}
	.introduction_car { min-height: 830px;}
	.introduction_family { min-height: 530px; }
	.store_photo_title::after{ width: 20%;}
	.store_photo{ width: 90%;}
    
    .service_item_text{font-size: 16px;}
}
@media all and (max-width: 1280px) {
	.equipment_title{ font-size: 100%;}
    .service_main_con{ width: 50%; }
    .service_item{padding: 5%;}
	.service_item_title{font-size: 18px;}
}
@media all and (max-width: 1024px) {
	.in_slogin_area { top: 8%;}
	.introduction_text .text_title, .car_main_title{font-size: 30px;}
	.introduction_family_main{ height: inherit;}
	.introduction_family { min-height: 400px; }
	.forex_cart_item.ml-4 { margin-left: 0 !important;}
	.forex_cart_photo{ flex-basis: inherit;}
	.forex_cart_text{ width: 70%;}
	.forex_cart_set .step_number-green, .forex_cart_set .step_number-red{ width: 80px; height: 80px;}
	.forex_cart_set .step_title{ padding: 0px;}
	.forex_cart_set .step_munber { font-size: 200%; padding-top: 0px;}
	.calculation_example .list_title { flex-basis: 320px;}
	.calculation_list{ flex-direction: column;}
	.list_title, .calculation_list .text-left, .calculation_example .list_title, .calculation_example .calculation_list .text-left{flex-basis: inherit; padding-right: 0px; font-size: 19px;}
	.calculation_list{ margin: auto auto 2% auto;}
	.calculation_title{ margin-top: 5%;}
	.text_color_style, .calculation_title.text-left, .calculation_title{ text-align: center!important; font-size: 20px;}
	
	/**pro**/
	.item_photo{padding-bottom: 68%;}
	.slider-nav .item-slick{ width: 100px; height: 100px;}
	.slick-prev {left: 15px;}
}
@media all and (max-width: 991px) {
	.in_banner_area{ margin-top: 80px;}
	.breadcrumb_area{ border-radius: 0px;}
	.second_menu_area .line { display: block; background: var(--green); width: 100%; height: 42px; padding: 0px; position: inherit; margin-bottom: 0px; border-radius:0px 0px 14px 14px; }
	.second_menu_area .line .menu, .second_menu_area .line .menu::before, .second_menu_area .line .menu::after { background: #fff; width: 30px;}
	.second_menu_area .line .menu {top: 20px; left: 30px; }
	.second_menu{ display: none;}
	.second_menu_area .second_menu ul{ margin: 5px auto; flex-direction: column;}
	.second_menu_area .second_menu ul li{ margin: 3px auto; width: 90%;}
	.second_menu_area .second_menu ul li a{ line-height: 34px; padding: 0px;}
	/****/
	.introduction_main{ flex-direction: column;}
	.boss_photo::after{ right: -15px;}
	.boss_photo{flex-basis: inherit;}
	.introduction_text{ margin-left: inherit; margin-top: 2%; flex-basis:inherit;}
	.about_introduction_area::after{ top: inherit;}
	.introduction_text .text_title{ max-width: 450px; width: 100%; text-align: center; margin: auto; padding: 10px 30px 20px 30px;}
	.text_main{ margin: auto;}
	.family_photo{position: inherit;}
	.introduction_family{ min-height: inherit;}
	.introduction_family_main{ position: inherit; width: 100%; margin: auto; right: inherit; background-color: #fcfcfc; padding-bottom: 10px;}
	.introduction_family_main .car_main_title.mt-5{ margin-top: 10px!important;}
	.service_item{ height: 200px;}
	.store_photo_title{ margin-top: 3%;}
	.store_photo{ width: 85%; margin: auto;}
	.store_photo .slick-prev:before, .store_photo .slick-next:before{ font-size: 22px;}
	.store_photo .slick-slide{ margin:0px;}
	.slogan_green, .slogan_red{ text-align: center; padding: 0px 20px;}
	.car_main_text { width: 90%; margin: auto;}
	.car_main_text br{ display: none;}
    .service_main_con{ width: 100%; }
    .service_item_title{font-size: 20px;}
	
	/****/
	.forex_cart_item{ flex-direction: column; align-items: center; justify-content: flex-start;}
	.forex_cart_item::after{ left: 0px;}
	.forex_cart_text{ width: 100%; margin-left: inherit; margin-top: 3%;}
	.forex_cart_photo{ padding: 40px 0px 0px 40px; margin: auto auto auto 0px;}
	.slick-prev {left: 0px;}
	.slider-nav .item-slick{ width: 85px; height: 85px;}
	.pro_info_detail{ margin-top: 5%;}
	/****/
	.aq_area .card-header h2 .btn{ font-size: 20px;}
    

}
@media all and (max-width: 853px) {
	.slider-nav{ margin: auto;}

}
@media all and (max-width: 820px) {
	.item_photo {padding-bottom: 66%;}

	/***/
	.contact_address_info{ max-width: 90%; width: 90%; margin: 20px auto; min-height: inherit; padding: 30px 0px;}
	.contact_address_info .title{margin: 1% auto;}
	.contact_form ul li{ width: 100%; margin: 10px 0px;	}
	
}
@media all and (max-width: 768px) {
	.forex_cart_title{ font-size: 22px;}
	.forex_cart_info ul{ margin-top: 10px;}
	.calculation_example .calculation_list .text-left, .calculation_list .text-left{font-size: 16px; line-height: 24px;}
	.calculation_list .text-left{ align-items: flex-start;}
	.calculation_list, .calculation_example .calculation_list{ border-bottom: 1px solid #7cd290; padding-bottom: 10px;}
	.item_title{ font-size: 20px; padding-top: 0px;}
	.aq_area .card-header h2::before{ width: 40px;height: 40px; background-size: 100%;}
	.aq_area .card-header h2{ padding: 0px 0px 0px 50px;}
	.aq_area .card-header h2 .btn{margin-top: 0px;}
	.aq_area .card-body{ padding: 70px 15px 15px 15px; margin-left: 0px; background-position: center 10px;}
}
@media all and (max-width: 600px) {
	.service_item{ height: 220px; padding: 20px 15px 30px 15px;}
	.introduction_text .text_title, .car_main_title, .slogan_green, .slogan_red, .store_photo_title{ font-size: 20px;}
}
@media all and (max-width: 576px) {
	ul.equipment_main ul.no_list{ margin: auto;}
    ul.equipment_main .equipment_title_B{ padding: 10px 0;}
}
@media all and (max-width: 540px) {
	.in_container_title h1{ font-size: 30px; padding-top: 40px;}
	.car_main_title{ padding: 0px 25px;}
	.forex_cart_text .float-right{ float: inherit!important;}
	.forex_cart_text img{ display: block; margin: 15px auto 15px 0px;}
	.forex_cart_title {font-size: 20px; }
	.forex_cart_set{ position: inherit;}
	.forex_cart_photo{ padding: 0px; margin: auto;}
	.forex_cart_set .step_number-green, .forex_cart_set .step_number-red{ margin: 10px auto;}
	.forex_cart_photo img{ position: inherit; width: 100%; right: inherit; bottom: inherit;}
	.slick-prev { left: 15px;}
	.slick-next { right: 15px;}

	.nav-tabs .nav-link{ font-size: 110%; padding: 5px 10px; margin-bottom: 2px; width: 100%;}
	
	/****/
	table.datatable td{ padding: 3px 10px; font-size: 100%; line-height: 26px;}
	table.datatable{line-height: 30px;}	
	.contact_form ul.contact-btn li{ max-width: 50%;}
	.contact_form .contact-clean, .contact_form .contact-send{border-radius: 20px;line-height: 36px;}
	.contact_form{ padding: 10px;}

	.back_list_next{ width: inherit;}
	.back_list_prev span, .back_list_main span, .back_list_next span{width: 30px; height: 30px; line-height: 30px;}
	.bi-caret-left-fill::before, .bi-grid-fill::before, .bi-caret-right-fill::before{ line-height: 30px;}	
	.address_map{padding-bottom: 50%;}	
	.card-header h2 .btn{ font-size: 20px; font-weight: 600;}
	.aq_area .card-header h2 .btn { font-size: 18px; line-height: 28px; padding-bottom: 15px;}
}

@media all and (max-width: 414px) {
	.introduction_text .text_title span{ display: block;}
	.service_item{ padding: 15px 15px 30px 15px;}
    .service_item_title{font-size: 16px;}
	.card-header h2 .btn{ padding-right: 40px; white-space: inherit!important;} 
	.card-header button[aria-expanded="true"]::after{ width: 28px; height: 28px; line-height: 28px;}
	.card-header button[aria-expanded="false"]::after{  width: 28px; height: 28px; line-height: 28px;}
	
}
@media all and (max-width: 360px) {
	.in_slogin_area{ font-size: 20px; line-height: 30px;}
	.in_slogin_area span.title_line img { width: 110px;}
	.service_item { height: inherit;}
		
}
@media all and (max-width: 320px) {

	/****/
	.related_pro_title a{ font-size: 90%; line-height: 24px;}
	.related_products .col-6{ flex: 0 0 100%;  max-width: 100%;}

	.address_map{padding-bottom: 80%;}
	.card-header h2 .btn { font-size: 18px; font-weight: 700;}
	.aq_area .card-header h2::before{ width: 30px;height: 30px; background-size: 100%;}
	.aq_area .card-header h2 { padding: 0px 0px 0px 35px; }
	.aq_area .card-header h2 .btn { font-size: 16px; line-height: 26px; }
	
}
@media all and (max-width: 280px) {
	.pagination a { font-size: 15px; line-height: 28px; width: 28px; height: 28px; margin: 0px 2px;}
	.item_photo { padding-bottom: 64%;}
	.in_news_contact .title { font-size: 100%;}
	.card-header h2 .btn{line-height: 24px;}
	.qa_item_area .item_photo{ padding-bottom: 63%;}
}