@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; } 
.in_banner_area img {width: 100%;}
.in_slogin_area{ font-family: var(--slogin_font) ; position: absolute; z-index: 3; right: 4%; top:60%; display: flex;}
.in_slogin_area .slogin_title{ font-size: 58px; line-height: 58px; font-weight: 500; color:var(--white); margin-bottom: 20px;}
.in_slogin_area .slogin-s{color:var(--white); margin-left: 25px; overflow:hidden; }
.in_slogin_area .slogin-s span { display: block;}
.in_slogin_area .slogin-s span.name_E{ 
	font-family: var(--eng_font) ;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 2px;
	padding: 0px 0px 4px 4px;	
	border-bottom: 4px solid var(--red);
}
.in_slogin_area .slogin-s span.slogin_text{ 
	font-size: 30px;
	line-height: 30px;
	padding-top: 10px;
	letter-spacing: 2px;
}


/****/
.in_main_area{ overflow: hidden; 
background: url("../images/in_main_bg_bottom.png"),url("../images/in_main_bg_top.png");
background-repeat: no-repeat, no-repeat;
background-position: left bottom, right top; padding-bottom: 15%;
background-color: #f7f7f7;}

/**breadcrumb**/
.breadcrumb_area{ max-width: 1440px; width: 90%; margin: 20px auto;}
ol.breadcrumb{ padding: 0px; margin-bottom: 0px; background-color: transparent;}
ol.breadcrumb li{ font-size: 90%; }
ol.breadcrumb li a{	color: var(--text);}
ol.breadcrumb li a:hover, ol.breadcrumb li a:focus{	text-decoration: none;	color: var(--redHeavy);}
.breadcrumb-item{ color: var(--red);}
.breadcrumb-item.active { color: var(--red);}


.in_container{ overflow: hidden; padding-top: 4%;}
.in_container_title { max-width: 1440px; width: 90%; margin:80px auto 25px auto; text-align: left;}
.in_container_title h1{ position: relative; font-size: 36px; padding: 0px 15px; margin: 0px; line-height: 42px; text-align: center;}

.in_container_text{ overflow: hidden; max-width: 1280px; width:90%; margin: auto;}
.in_container_text a{ color: var(--text);}
.in_container_text a:hover, .in_container_text a:focus{	color: var(--red);	text-decoration: none; transition: 0.3s ease-in-out;}


/**about**/
.about_office_area { overflow: hidden; max-width: 1440px; width: 90%; margin: auto auto 40px auto; }
.office_photo{ position: relative; overflow: hidden; padding-bottom: 50px;max-width: 574px; width: 100%; margin: auto;}
.office_photo img{ position: relative; z-index: 3; padding: 0px 0px 0px 38px;}
.office_photo::before{ position: absolute; content: ""; background: url("../images/in_about_photo_sh.jpg"); width: 500px; height: 415px; z-index: 1; left: 0px; top: 50px;}

.about_office_text .title { font-size: 36px; position: relative; padding-bottom: 10px;}
.about_office_text .title::before { position: absolute; content: ""; width: 50px; height: 3px; background-color: var(--red); bottom: 0px; left: 0px;}
.about_text{ padding: 30px 0px;}
.about_text strong{ color: var(--red);}
.about_text_photo{ margin: auto 0px auto auto; display: flex; justify-content: flex-end; align-items: center;}
.about_text_photo div{ padding: 5px 0px 5px 5px;} 

/**brand**/
.about_brand_area{ background: url("../images/in_about_process_photo_bg.jpg") no-repeat top right; margin-top: 10%;}
.about_brand_area_main{overflow: hidden; max-width: 1440px; width: 90%; margin: auto; padding: 3% 0; display: flex;}

.brand_text{ margin: auto auto auto 3%;}
.brand_photo{margin: 1% auto auto auto;}
.brand_title img{ height: 50px;}
.brand_title span.title{font-size: 36px; position: relative; padding-bottom: 10px; margin-left: 20px;}
.brand_title span.title::before{ position: absolute; content: ""; width: 50px; height: 3px; background-color: var(--red); bottom: 0px; left: 0px;}

.brand_item{ margin: 20px 0px; font-size: 94%; font-weight: bold;}
.brand_item span{ display: block; width: 250px; text-align: center; background-color: #fff; font-size: 22px; font-weight: bold; color: var(--red); line-height: 50px; border-radius: 20px 0px 20px 0px; border: 1px solid var(--red);}

/**about_proitem_area**/
.about_proitem_area{ max-width: 1260px; width: 90%; margin: 3% auto;}
.about_proitem_area .title{font-size: 36px; position: relative; padding-bottom: 10px; max-width: 150px; margin: auto;}
.about_proitem_area .title::before { position: absolute; content: ""; width: 50px; height: 3px; background-color: var(--red); bottom: 0px; left: 0px;}
.about_proitem_area  .sec_text{ font-size: 100%; font-weight: inherit; padding: 10px 0px 30px 0px; text-align: center;}
.about_proitem_photo{display: flex; align-items: center; align-content: center;}

.about_proitem_photo .big{ max-width: 810px; width: 100%; margin:0px; }
.about_proitem_photo .small{  margin: 0px auto auto 15px;}
.about_proitem_photo .small div img{max-width: 410px;}

/**pro_area_index**/
.pro_area_index { max-width: 1170px; width: 90%; margin: 3% auto;}
.proindex_item_area{ max-width: 480px; width: 100%; margin: 3% auto;}
.item_photo{ overflow: hidden; position: relative; padding-bottom: 56%; height: 0; line-height: 0; z-index: 1; transition: all 0.5s ease 0s;  margin: 5% 10px;}
.item_photo::before{ position: absolute; content: ""; background: #d1d1d1; width: 240px; height: 145px; left: 0px; top: 0px; }
.item_photo:hover::before{ background:var(--red); transition: all 0.5s ease 0s; }
.item_photo img { margin: 6px;}


.item_title{ font-size: 24px; font-weight: bolder; text-align: center; display: flex; /*align-items: center;*/ justify-content: center;}
.item_title::before{ /*position: absolute;*/ content: ""; background: url("../images/item_title_arr.png") no-repeat; width: 16px; min-width: 16px; height: 16px; /*padding-left: 85px;*/ margin: 7px 10px 0 0;}
.item_title a{ color: var(--text); display: block; text-align: left;}
.item_title a:hover{color: var(--red);}


/**/

/**pro_detail_area**/
.pro_detail_main{ max-width: 1440px; width: 90%; margin: auto; overflow: hidden;}
.pro_detail_main .row{ align-items: center;}
.pro_detail_area{ margin: auto;}
.detail_photo{overflow: hidden; position: relative; padding-bottom: 76%; background-color: #fdfbfb;   height: 0; line-height: 0; z-index: 1; transition: all 0.5s ease 0s;}
.owl-nav{ display: none; }

.owl-dots {text-align: center; -webkit-tap-highlight-color: transparent;}
.owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline;}
.owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #b4b4b4; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease;  border-radius: 30px;}
.owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span { background:var(--red);}
.owl-carousel .owl-item img{ border: 10px solid #fff;}


/**pro_info_detail_text**/
.pro_info_detail_text{ font-size: 20px; line-height: 36px; margin:10px auto auto auto; position: relative;}
.pro_info_detail_title{ font-size: 20px;  font-weight: 600; color:var(--red); margin-bottom: 25px; }

.detal_link{ display: flex; margin: 5% auto;}
.detal_link .back_list{ margin: auto 0px auto auto;}

.link_area_icon{ max-width: 160px; width: 90%;}
.link_area_icon a{ color: #fff; display: block; line-height: 46px; text-align: center; font-size: 24px; font-weight: 600; background-color: #282828; border-radius: 20px;}
.link_area_icon a .bi-pencil-square::before{ color: #fff; font-size: 24px;}
.link_area_icon a .bi { transition: all 0.4s ease-out 0s; margin-left: 10px;}
.link_area_icon a .bi:hover {}
.link_area_icon a:hover{ color: #fff; background-color:var(--red); opacity: 0.8;}

/**pro_de_tabs**/
.pro_de_info{ background: #fff; border-radius: 30px; box-shadow: 0px 0px 15px #cccccc; margin:5% 2%; padding: 3% 5%;}
.pro_de_info_title{ font-size: 22px; font-weight: bold; color: #fff; background-color: var(--redHeavy); width: 178px; line-height: 47px; text-align: center; border-radius: 20px 0px 0px 0px;}
.pro_de_info_main { margin-top: 5px; border-top-color: var(--redHeavy) ; border-top-style: solid; padding: 15px 10px;}
.pro_de_info_photo {text-align: center;}
/****/

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

table.datatable{ width: 100%; background-color: #fff; border: 1px solid var(--text); margin: 15px auto;}
table.datatable th, table.datatable td{ line-height: 42px; border-right: 1px solid var(--text);}
table.datatable th{ font-size: 130%; text-align: center; padding: 3px 10px; background-color: var(--redHeavy); color: #fff; font-weight: 600;}
table.datatable td{ font-size: 110%; text-align: left;  padding: 3px 40px; }

table.datatable tr{	border-top: 1px solid var(--text); border-bottom: 1px solid var(--text);}
.table-striped tbody tr:nth-of-type(odd) {  background-color: #f2f2f2;}

/****/
.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(--text); border: 1px solid #333333; display: block; line-height: 40px; width: 40px; height: 40px; text-decoration: none; text-align: center; margin: auto;}
.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(--red); color: #fff;}
.bi-caret-left-fill::before, .bi-grid-fill::before, .bi-list-task::before{ line-height: 40px;}

/**pagination**/
.page_nav{ margin: 10% auto auto auto;}
.pagination { justify-content: center; align-items: center;}
.pagination a { color: var(--text); font-size: 18px; font-size: 500; border: 1px solid #333333; 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; border: 1px solid var(--red); }
.pagination a:hover:not(.active) { color:var(--white); background-color: var(--redHeavy);}

/**news**/
.news_list_area{ max-width: 1366px; width: 90%; margin: auto; overflow: hidden;}
.news_list_all {max-width: 380px; min-height: 390px; width: 100%; background-color: #fff; margin: auto; position: relative; margin-bottom: 10%; }
.news_photo { overflow: hidden; position: relative; padding-bottom: 95%; height: 0; line-height: 0; z-index: 1; transition: all 0.5s ease 0s; box-shadow: 0px 0px 8px #e2e2e2; margin: 10px;}

.news_list_all .link_more{ position: absolute; right: 0px; bottom: 0px;}

/****/
.news_list_content{ max-width: 1280px; width: 90%; margin: auto; background-color: #fff; box-shadow: 0px 0px 15px #cccccc;}
.news_list_content .news_date .date{ float: left; margin-right: 10px;}
.news_list_content .news_date .year::after{ width: 80%;}
.news_detail{ max-width: 750px; width: 90%; margin:5% auto;}
.news_detail img{ margin: 5% auto;}
.news_detail a{ color: var(--text); overflow-wrap: break-word;}
.news_detail a:hover{ color:var(--red); }

/**process_area**/
.in_container .index_service_main{ max-width: 1000px; width: 90%; margin: auto; padding-bottom: 5%; overflow: hidden;}
.in_process_area{ display: flex; align-items: center;}
.in_process_area .setp{ left:0px;}

.in_process_area .service_item_detail{ height: 165px; margin: 0px 0px 5% 0px;}
.in_process_area .service_item_detail_t{ margin-left: 3%; max-width: 240px;}
.in_process_area .service_item_text{ height: 125px; left: 40px;}

.in_process_area .icon_text_title{ font-size: 22px; font-weight: bold; position: relative; padding: 5px 0px; margin: 20px auto 10px auto;}
.in_process_area .icon_text_title::before{ position: absolute; content: ""; background-color: var(--red); width: 47px; height: 3px; bottom: 0px; left: 0px;}

.in_container .service_note{margin-top: 5%; }

/**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: #4a1068;
    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: 1024px) {
	.in_main_text{ padding-top: 30px;}
	.about_office_text{ margin: 3%;}
	.about_brand_area_main{ flex-direction: column;}
	.brand_text{ margin: 3% auto;}
	.about_brand_area{ background-size: cover;}
	.about_proitem_photo { flex-direction: column; flex-wrap: wrap; align-items: center;}
	.about_proitem_photo .small{ display: flex; margin: 10px auto;}

	.contact_form ul li{ width: 48%;}

}
@media all and (max-width: 820px) {
	.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;	}
	.about_proitem_photo .big{ max-width: inherit;}
	.about_proitem_photo .big img{ width: 100%;}
	.about_proitem_photo .small div img{ max-width: inherit; width: 100%;}
}
@media all and (max-width: 767px) {
	.about_proitem_photo .small{ flex-direction: column;}
	.about_proitem_photo .small div img{ width: 100%; max-width: inherit;}
	.news_list_content .news_date .year::after{ width: 60%;}
	
}
@media all and (max-width: 600px) {
	.in_process_area .service_item_detail_t{ margin-left: 8%;}
}
@media all and (max-width: 540px) {
	.in_slogin_area{ flex-direction: column; top: 40%;}
	.in_slogin_area .slogin_title{ font-size: 30px; line-height: 30px;}
	.in_slogin_area .slogin-s{ margin-left: 0px;}
	.in_slogin_area .slogin-s span.name_E{ font-size: 14px; line-height: 18px;}
	.in_slogin_area .slogin-s span.slogin_text{ font-size: 20px; line-height: 20px;}
	.office_photo img{ padding-left: 15px;}
	.office_photo::before{ height: 230px;}
	.brand_title img { height: 40px;}
	.about_office_text .title, .brand_title span.title{ font-size: 28px;}
	.brand_item span{ font-size: 20px;}
	.small .mb-4{ margin-bottom: 10px!important;}

	ol.breadcrumb li{ line-height: 24px;}
	.in_container_title h1{font-size: 24px; line-height: 26px;}
	
	.in_process_area{ flex-direction: column; align-items: normal; margin: auto auto 5% auto; width: 80%; border-bottom: 1px solid #ccc;}
	.in_process_area .service_item_detail{ margin: 0px;}
	.in_process_area .setp, .in_process_area .service_item_text{ margin: 0px;}
	.in_process_area .service_item_text{ left: 0px;}
	.in_process_area .service_item_detail_t { margin: 0px 0px 10px 20px;}
	.in_process_area .icon_text_title{ margin-top: 0px;}
	
	/****/
	table.datatable td{ padding: 3px 10px; font-size: 100%; line-height: 26px;}
	table.datatable{line-height: 30px;}
	.nav-tabs .nav-link{ font-size: 110%; padding: 5px 10px; width: 100%; border-radius: 0px;}

	
	.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;}

	.link_area_icon{ margin: auto; max-width: 150px;}
	.link_area_icon a{ font-size: 110%;}
	
	.address_map{padding-bottom: 50%;}	
}

@media all and (max-width: 414px) {
	.in_main_text { padding-top: 35px; }
	.in_container_title{ margin: 25px auto;}
	.in_main_text { padding-top: 0px;}	
	.contact_form ul.contact-btn li{ max-width: 100%;}
	.contact_info ol{ margin: 20px 0px;}
	.contact_info ol li{ font-size: 18px; line-height: 28px;}
	.item_photo{ padding-bottom: 55%;}
	.detal_link{ flex-direction: column;}
	.detal_link .back_list{ margin: 5% auto;}

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

@media all and (max-width: 375px) {
	.in_container_title h1 { font-size: 24px; line-height: 28px;}	
	.news_list_content .news_date .year::after{ width: 50%;}
}
@media all and (max-width: 360px) {
		
}
@media all and (max-width: 320px) {
	.in_slogin_area .slogin_title{ margin-bottom: 10px;}
	.in_slogin_area{ right: 8%;}
	.in_slogin_area .slogin_title { font-size: 24px; line-height: 24px; }
	.in_slogin_area .slogin-s span.name_E { font-size: 13px; line-height: 18px; }
	.in_slogin_area .slogin-s span.slogin_text{ padding-top: 5px;}
	.office_photo::before { height: 170px;}

	/****/
	.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%;}
	.step_text{ display: inherit;}
	.step_number { width: 100%; margin: auto;}
	.number{ margin: auto;}
	.step_info{ width: 100%; font-size: 90%; line-height: 20px; padding-left: 5px;}
}
@media all and (max-width: 280px) {
	.pagination a { font-size: 15px; line-height: 28px; width: 28px; height: 28px; margin: 0px 2px;}
	
}