@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=Outfit:wght@100..900&display=swap');
@import url("search.css");

/* CSS Document */

body{ font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-size: 18px; color:var(--text); line-height: 28px; font-weight: 400; background-color: #fbfcfa;}
/**color**/
:root {
	--text:#5a5a54;
	--black:#050505;
	--green:#129794;
	--blue: #0d6fb8;
	--bluehover:#018af0;
}

a, a:hover{	transition: 0.3s ease-in-out; text-decoration: none;}
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-weight: 400; font-size: 18px; line-height: 30px;}
::marker{ color: var(--green); font-size: 1.3rem;}
/**top**/


.scrollToTop { display: inline-block; background-color: var(--green); width: 50px; height: 50px; border-radius: 50px; text-align: center; position: fixed; bottom: 28%; right: 20px; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 999;}
.scrollToTop::after { content: "\F145";	font-family: bootstrap-icons !important; font-weight: 600; font-size: 2em; line-height: 54px; color: #fff;}
.scrollToTop:hover { cursor: pointer; text-decoration: none; background-color: var(--blue);}
.scrollToTop:hover::after {color: #fff!important;}
.scrollToTop:active { background-color: #4a1068;}
.scrollToTop.show {	opacity: 1;	visibility: visible;}



/****/
h1 { font-family: "Outfit", sans-serif; font-size: 36px; font-weight: 600; color: var(--black); position: relative; margin: 0px; padding: 0px 0px 5px 0px;}
h2, h3, h4, h5, h6{ color: var(--blue); font-weight: 500;}
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;}

/**pro**/
.index_pro_area { overflow: hidden; padding-top: 3%;}
.index_pro_main{ max-width: 1440px; width: 90%; margin: auto; position: relative;}
.index_pro_title, 
.appilication_title,
.index_news_title, 
.index_Q_A_title { font-size: 36px; color: #000; font-weight: 700; position: relative; line-height: 38px; text-align: center; padding-bottom: 25px; margin-bottom: 2%;}
.index_pro_title::before, 
.appilication_title::before, 
.index_news_title::before, 
.index_Q_A_title::before{ position: absolute; content: ""; background: url("../images/title_line.png"); width: 140px; height: 12px; left: 0px; margin-left: auto; right: 0px; margin-right: auto; bottom:0px;}

.index_pro_main .slick-carousel{ padding: 2%;}

.slide-content{ max-width: 320px; width: 100%; margin: auto;}
.index_proitem_photo{ overflow: hidden; position: relative; padding-bottom: 100%; height: 0; line-height: 0; z-index: 1;}

.index_proitem_photo::after{ position: absolute; content: ""; width: 300px; height:300px; background: #d3d3d2; opacity: 1;}
.index_proitem_photo::after{ left: 0px; top: 0px; border-radius: 30px; transition: all 0.5s ease 0s; }
.index_proitem_photo:hover::after { left: 20px; top: 20px; opacity: 1;}

.index_proitem_photo img { border: 1px solid var(--green); border-radius: 30px; transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.index_proitem_photo:hover img {transform: scale(0.95, 0.95);}

.index_proitem_title{ text-align: center; padding-top: 20px;}
.index_proitem_title a{ display: block; color: var(--black); font-size: 20px; font-weight: 500;}
.index_proitem_title a:hover, .index_proitem_title a:focus{ color: var(--blue); text-decoration: none;}

.index_pro_area .slick-prev, .index_pro_area .slick-next{ width: 42px; height: 42px; top: inherit; top: 50%; background-color: #fff; border:1px solid var(--green); border-radius: 100px; transition: all 0.5s ease 0s;}
.index_pro_area .slick-prev:hover, .index_pro_area .slick-next:hover{ background-color: #f0f0f0;}

.index_pro_area .slick-prev:before, .index_pro_area .slick-next:before{ color: #282828; font-size: 24px; line-height: 44px; font-family: bootstrap-icons !important;}
.index_pro_area .slick-next:before{ content: "\F138";}
.index_pro_area .slick-prev:before{ content: "\F12F";}

/**about**/

.index_about_area { overflow: hidden; position: relative; background: url("../images/index_about_bg.jpg") repeat left top; margin: 3% auto; box-shadow: 0px 0px 15px #f5f5f5;}
.index_about_main{ width: 100%; margin:3% 0px 5% 0px; display: flex; position: relative;}

.index_about_photo{ max-width: 910px; width: 100%; position: relative;}
.index_about_photo .index_about_text{ position: absolute; right: 20%; bottom: 20%; z-index: 9; }
.index_about_text .title{ color: #cec9c9; font-size: 28px; font-weight: 700; padding-bottom: 10px; position: relative; text-shadow: 3px 3px 0px #094b78;}
.index_about_text .title::before{ position: absolute; content: ""; width: 75%; height: 1px; background-color: #fff; left: 0px; bottom: 0px;}
.index_about_slogin{ font-size: 42px; line-height: 50px; font-weight: 700; color:#fff; margin-top: 5%; text-shadow: 3px 3px 0px #094b78;}

.index_about_photo .office_photo_main{ position: relative; left: 0px; top: 0px;}
.index_about_photo .office_photo_main img{ border-radius: 0px 30px 0px 0px;}
.index_about_photo .office_photo{ position: absolute; right: 0px; top: 50px;}
.index_about_photo .office_photo img{border-radius: 30px;}


.index_about_area .about_text { margin-left: 3%; margin-top: 3%; width: 100%; position: relative;}
.index_about_area .about_text::after{ position: absolute; content: ""; width: 490px; height: 38px; background-color: var(--blue); right: 0px; bottom: 0px; border-radius: 30px 0px 0px 30px;}

.index_about_area .about_text h1{ font-size: 40px; color: #9fa0a0; font-weight: 700; text-transform: uppercase; margin: 0px; padding: 0px; }
.index_about_area .about_text .text_info{ width: 70%; margin: 2% 0px 0px 0px; font-size: 20px; font-weight: 500;}
.index_about_area .about_text .text_info p{ font-size: 20px; font-weight: 500;}

/**more**/
.about_text .text_info .more { margin: auto 40% auto auto; display: flex; justify-content: flex-end; align-items: center;}
.about_text .text_info .more span.icon{ display: block; overflow: hidden; width: 40px; height: 40px; border: 1px solid var(--green); border-radius: 40px; text-align: center; margin-right: 10px; }
.about_text .text_info .more .bi-arrow-right-short::before { font-size: 1.5em; line-height: 40px;}

.about_text .text_info .more span.text a{ font-size: 20px; color: var(--black); font-weight: 500; display: block; position: relative; padding-bottom: 5px;}
.about_text .text_info .more span.text a:hover, .about_text .text_info .more span.text a:focus:hover { color: var(--blue);}
.about_text .text_info .more span.text a::before{ position: absolute; content: "";  width: 50px; height: 1px; background-color: var(--green); bottom: 0px; transition: all 0.5s ease 0s; }
.about_text .text_info .more span.text a:hover::before{ width: 0px;}

/**more_all**/

.more { display: flex; justify-content: flex-start; align-items: center;}
.more span.icon{ display: block; overflow: hidden; width: 40px; height: 40px; border: 1px solid var(--green); border-radius: 40px; text-align: center; margin-right: 10px; }
.more .bi-arrow-right-short::before { font-size: 1.5em; line-height: 40px;}

.more span.text a{ font-size: 20px; color: var(--black); font-weight: 500; display: block; position: relative; padding-bottom: 5px;}
.more span.text a:hover, .about_text .text_info .more span.text a:focus:hover { color: var(--blue);}
.more span.text a::before{ position: absolute; content: "";  width: 50px; height: 1px; background-color: var(--green); bottom: 0px; transition: all 0.5s ease 0s; }
.more span.text a:hover::before{ width: 0px;}



/**appilication**/
.index_appilication_area{ max-width: 1440px; width: 98%; margin: auto;}
.index_appilication_area .row{ margin: 5% auto;}
.appilication_main_info{ background: #fff; border:1px solid var(--green); border-radius: 30px; padding: 5% 5% 2% 5%;margin-bottom: 40px;}
.appilication_main_info .title{ font-size: 30px; line-height: 38px; color: var(--blue); font-weight: 700;}
.appilication_main_info .list{ color: var(--black); font-size: 20px; line-height: 36px; font-weight: 600;}
.appilication_main_info .list ul li { line-height: 36px; }

.appilication_item{ max-width: 400px; margin:auto auto 8% auto;}
.appilication_item .photo{overflow: hidden; position: relative; padding-bottom: 74.8%; height: 0; line-height: 0; z-index: 1; box-shadow: 0px 0px 5px #aeaeae; background-color: #fff; border-radius: 30px; }
.appilication_item .photo img{ transform: scale(1.01, 1.01); transition: all 0.5s ease 0s; }
.appilication_item .photo:hover img {transform: scale(1.05, 1.05); }
.appilication_info { margin: 20px 0px 0px 20px;}
.appilication_info .title{ font-size: 20px; font-weight: 500; }
.appilication_info .title a{color: var(--black); display: block; line-height: 24px;}
.appilication_info .title a:hover, .appilication_info .title a:focus { color: var(--bluehover);}
.appilication_info .description{ font-size: 16px; line-height: 24px; color: #535353; margin-top: 10px;}
.appilication_more{ display: flex; align-items: center; justify-content: center; }
.appilication_more > .text{ font-size: 30px; font-weight: 700; color: var(--blue); margin-right: 2%;}


/**index_news_area**/
.index_news_area{ overflow: hidden; position: relative; background: url("../images/index_about_bg.jpg") repeat left top; margin: 3% auto 0px auto; box-shadow: -5px -5px 15px #f5f5f5;}
.index_news_main{ max-width: 1400px; width: 90%; margin:3% auto; overflow: hidden;}
.row.index_news_item{ margin: 5% auto 2% auto;}
.index_news_list_left .news_main{ align-items: center; margin: 0px;}
.index_news_list_left .news_main .news_photo{ max-width: 590px; overflow: hidden; position: relative; padding-bottom: 57%; height: 0; line-height: 0; z-index: 1; border: 1px solid var(--green); border-radius: 10px;}

.news_main .news_info{ display: flex; align-items: center; padding: 20px;}
.news_main .news_info .date{ padding-right: 3%;}
.news_main .news_info .date span { display: block; text-align: center;}
.news_main .news_info .date span.year_month{ color: #535353;}
.news_main .news_info .date span.day{ color: var(--green); font-size: 60px; line-height: 60px; font-weight: 900; margin-top: 5%;}
.news_main .news_info .text_info{ position: relative; padding-left: 3%; }
.news_main .news_info .text_info::before{ position: absolute; content: ""; width: 1px; height: 100%; background-color:#565656; left: 0px; top: 0px;}
.news_main .news_info .text_info .name{ font-size: 20px; font-weight: 600;}
.news_main .news_info .text_info .name a{color: var(--black); }
.news_main .news_info .text_info .name a:hover, .index_news_list_left .news_main .news_info .text_info .name a:focus{ color: var(--bluehover);}
.news_main .news_info .text_info .contact{ font-size: 16px; line-height: 24px; margin-top: 2%;}

.index_news_list_right{ margin-left: 2%;}
.index_news_list_right .news_main{ display: flex; margin-bottom: 2%;}
.index_news_list_right .news_main .news_photo{ width: 360px!important; overflow: hidden; position: relative; padding-bottom: 16%; height: 0; line-height: 0; z-index: 1; border: 1px solid var(--green); border-radius: 10px;}
.index_news_list_right .news_main .news_info{ padding: 0px 20px;}

.index_news_area .more { justify-content: center; align-items: center; }

/**index_Q_A**/
.index_Q_A_area{ background: url("../images/index_Q_A_area_bg.jpg") no-repeat center top; background-size: cover; padding: 4%;}
.index_Q_A_title{ color: #fff;}
.index_Q_A_main{ width: 90%; margin: auto; }
.index_Q_A_main .text{ color: #fff; text-align: center; font-size: 24px;}
.index_Q_A_list{ display: flex; margin: 3% auto; align-items: center; justify-content: center;}

.index_Q_A_list .item{ width: 100%; background-color: #fff; height: 195px; border-radius: 10px; padding: 1.8% 0px; margin: 2% 1%; position: relative;}
.index_Q_A_list .item .title{ font-size: 22px; color: var(--blue); font-weight: 600; text-align: center;}
.index_Q_A_list .item .title span{ display: block; font-size: 20px; color: var(--text); margin-bottom: 10px;}
.index_Q_A_list .item .icon{ text-align: center; position: absolute; bottom: 25px; left: 0px; right: 0px; margin-left: auto; margin-right: auto;}
.index_Q_A_list .item .icon .bi{ color:var(--green);}
.index_Q_A_list .item .more span.icon{ position: absolute;bottom: -20px; left:0px; margin-left: auto; right: 0px; margin-right: auto;}
.index_Q_A_list .item .more span.icon a{ background-color: #fff; display: block; transition: 0.3s ease-in-out; }
.index_Q_A_list .item .more span.icon a:hover{ background-color: var(--bluehover);}
.index_Q_A_list .item .more span.icon a:hover .bi{ color:#fff; }

.index_Q_A_main .more{ justify-content: center; align-items: center; margin: 3% auto 1% auto; }
.index_Q_A_main .more span.icon{ background-color: #fff;}
.index_Q_A_main .more span.text a{ color: #fff;}

/****/



/****/

@media all and (max-width: 1536px) {
	.index_about_area .about_text::after{width: 40%;}
	.index_about_slogin{ font-size: 34px; line-height: 42px;}
	.index_about_photo .index_about_text{ right: 30%; bottom: 30%;}
	.index_about_photo .office_photo_main{ left: inherit; right: 5%;}
	.index_about_area .about_text .text_info{ width: 90%;}
	.index_Q_A_list .item .title{ font-size: 20px;}
	
}
@media all and (max-width: 1440px) {
	.slide-content{ max-width: 290px;}
	.index_proitem_photo::after{ width: 270px; height:270px;}
	.index_Q_A_area{ padding: 4% 2%;}
	.index_Q_A_main{ width: 100%;}
}
@media all and (max-width: 1366px) {
	.slide-content{ max-width: 270px;}
	.index_proitem_photo::after{ width: 250px; height:250px;}
	.index_about_area .about_text h1{ font-size: 54px;}
}
@media all and (max-width: 1280px) {
	.index_pro_title, .appilication_title, .index_news_title, .index_Q_A_title{ font-size: 30px; line-height: 30px;}
	.index_about_photo .index_about_text{ bottom: 40%;}
	.appilication_main_info{ padding: 3% 5% 2% 5%;}

}
@media all and (max-width: 1024px) {
	.index_about_main{flex-direction: column;}
	.index_about_photo .index_about_text { bottom: 10%;}
	.appilication_main_info .title{ font-size: 26px; line-height: 30px;}
	.appilication_main_info .list{ margin: auto;}
	.appilication_main_info .list ul li { line-height: 28px;}
	.appilication_main_info{ padding: 2%;}
	.index_news_list_left .news_main .news_photo{ max-width: inherit; padding-bottom: 37%;}
	.news_main .news_info .text_info .contact{ margin-top: 0px;}
	.index_news_list_right{ margin-left: 0px; margin-top: 2%;}
	.index_Q_A_list .item .title{ font-size: 18px; line-height: 24px;}
	
}
@media all and (max-width: 991px) {
	.appilication_main_info{ margin-bottom: 25px;}
}
@media all and (max-width: 800px) {
	.index_about_photo .office_photo{ right: 3%;}
	.index_about_area .about_text h1{ font-size: 44px;}
	.appilication_main_info .title{ font-size: 22px;}
	.appilication_more{ flex-direction: column; margin-bottom: 8%;}
	.appilication_more .text{ margin-right: 0; margin-bottom: 3%; text-align: center; font-size: 28px; font-weight: 600;}
	.index_pro_area .slick-prev { left: 0px;}
	.index_pro_area .slick-next{ right: 0px;}
	.index_news_list_left .news_main .news_photo{padding-bottom: 48%;}
}
@media all and (max-width: 712px) {
	.index_about_photo .index_about_text{ right: 34%;}
	.index_about_area .about_text h1{ font-size: 34px;}
	
}
@media all and (max-width: 640px) {
	.slide-content{ max-width: 320px;}
	.index_proitem_photo::after{ width: 300px; height:300px;}
	.index_pro_area .slick-prev { left: 5%;}
	.index_pro_area .slick-next{ right: 5%;}
	.index_about_photo .office_photo{ text-align: right; top: 5%;}
	.index_about_photo .office_photo img { max-width: 80%;}
	.index_news_list_left .news_main .news_photo{ padding-bottom: 56%;}
	.index_news_list_right .news_main{ flex-direction: column;}
	.index_news_list_right .news_main .news_photo{ width: 100%!important; padding-bottom: 56%;}
	.index_news_list_right .news_main .news_info{ padding: 20px;}
	.index_Q_A_list{ flex-direction: column;}
	.index_Q_A_list .item{ width: 80%; margin: 3% auto; height: 160px;}
	
}

@media all and (max-width: 540px) {	
	.scrollToTop{ width: 38px; height: 38px; right: 10px;}
	.scrollToTop::after{ line-height: 46px;}
	.index_about_text .title{ font-size: 24px;}
	.index_about_slogin { font-size: 28px; line-height: 32px;}
	.index_about_photo .office_photo{ top: 3%}
	.index_about_photo .office_photo img{ max-width: 68%;}
	.index_about_area .about_text .text_info, .index_about_area .about_text .text_info p{ font-size: 18px;}
	.appilication_main_info .list{ margin-top: 3%;}
	.appilication_more .text{ font-size: 20px;}
	.news_main .news_info .text_info .name{ font-size: 18px; font-weight: 500;}
	.index_proitem_title a{ font-size:17px; }
	.appilication_main_info .list ul{ margin: 0px; padding: 0px 0px 0px 15px;}
	.appilication_main_info .list ul li{ line-height: 24px;}
	.index_Q_A_main .more{ margin-top: 8%;}
	
}
@media all and (max-width: 480px) {
	.index_pro_area .slick-prev { left: 1%;}
	.index_pro_area .slick-next{ right: 1%;}
	.index_about_slogin{ font-weight: 500; font-size: 26px;}
	.index_about_text .title{ font-size: 20px;}
	.index_about_area .about_text h1{ font-size: 24px;}
	
}
@media all and (max-width: 430px) {
	.index_pro_main .slick-carousel{ padding: 0px;}
	.slide-content{ max-width: 300px;}
	.index_proitem_photo::after{ width: 280px; height:280px;}
	.index_pro_area .slick-prev, .index_pro_area .slick-next{ width: 30px; height: 30px;}
	.index_pro_area .slick-prev::before, .index_pro_area .slick-next::before{ font-size: 20px; line-height: 34px;}
	.index_about_photo .office_photo{ top: 0px;}
	.index_about_photo .office_photo img{ max-width: 55%;}
	.index_about_slogin{ font-size: 22px;}
	.index_pro_title, .appilication_title, .index_news_title, .index_Q_A_title{ font-size: 26px; line-height: 26px;}
	.appilication_main_info{padding: 5%; }
	.appilication_main_info .title{ font-weight: 600; font-size: 18px; line-height: 24px;}
}
@media all and (max-width: 414px) {
	.index_Q_A_list .item{ margin: 5% auto;}
}
@media all and (max-width: 393px) {
	.slide-content{ max-width: 280px;}
	.index_proitem_photo::after{ width: 260px; height:260px;}
	.index_pro_area .slick-prev { left: 0%; z-index: 9;}
	.index_pro_area .slick-next{ right: 0%;}
	.news_main .news_info{flex-direction: column; padding: 10px; align-items: flex-start;}
	.news_main .news_info .date{ padding-right: 0px; display: flex; align-items: flex-end;}
	.news_main .news_info .date span.day{ font-size: 22px; line-height: inherit; padding-left: 10px;}
	.index_news_list_right .news_main .news_info{ padding: 10px;}
	.index_Q_A_main .text{font-size: 18px;}
}
@media all and (max-width: 384px) {
	.index_about_text .title{font-size: 18px;}
	.index_about_slogin{ font-size: 20px; line-height: 24px;}
	.index_about_photo .office_photo img{max-width: 50%;}
}
@media all and (max-width: 344px) {
	body, p, td, li, label{font-size: 17px; line-height: 22px; }
	.index_about_text .title{ font-size: 15px;}
	.index_about_area .about_text h1{ font-size: 18px;}
	.index_about_area .about_text .text_info, .index_about_area .about_text .text_info p{ font-size: 17px; line-height: 22px; font-weight: 400;}
	.index_about_area .about_text .text_info{ margin-left: 3%;}
}
@media all and (max-width: 320px) {
	.index_about_slogin{font-size: 18px;}
	.index_about_area .about_text h1{ font-size: 16px;}
	.slide-content{ max-width: 260px;}
	.index_proitem_photo::after{ width: 235px; height:235px;}
}
@media all and (max-width: 280px) {
	.slide-content{ max-width: 240px;}
	.index_proitem_photo::after{ width: 220px; height:220px;}
	.index_about_photo .index_about_text{right: 25%;}
	.index_about_photo .office_photo img{ max-width: 38%;}
}
@media all and (max-width: 240px) {
	.slide-content{ max-width: 200px;}
	.index_proitem_photo::after{ width: 180px; height:180px;}
	.in_pro_index .index_proitem_photo::after{ width: 165px; height:165px;}
	.index_about_photo .index_about_text{right: 18%;}
	.index_about_text .title{ padding-bottom: 0px;}
	.index_about_photo .office_photo img{border-radius: 10px; max-width: 30%;}
	.index_Q_A_list .item .title{ font-size: 16px; line-height: 20px;}
}