@charset "utf-8";







@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&display=swap');



@import url('../templates/font-awesome-pro/css/all.min.css');



@import url('../scripts/swiper-8/swiper-bundle.min.css');



@import url('../scripts/fancybox-4/dist/fancybox.css');







/************************************************************************************



CSS RESET



*************************************************************************************/







*{margin:0; padding:0;outline:0;}



html{height:100%;}



h1{font-size:1.5em;}



h2{font-size:1.4em;}



h3{font-size:1.3em;}



h4{font-size:1.2em;}



h5{font-size:1.1em;}



h6{font-size:1em;}



a{text-decoration:none;} 



p{padding: 0 0 10px 0;}



img{border:0; border-spacing:0; max-width: 100%;}



img, embed{vertical-align:middle;}



html, body, div, span, applet, object, iframe,



h1, h2, h3, h4, h5, h6, blockquote, pre,



a, abbr, acronym, address, big, cite, code,



del, dfn, em, font, ins, kbd, q, s, samp,



small, strike, strong, sub, sup, tt, var,



dl, dt, dd, ol, ul, li,



fieldset, form, label, legend,



table, caption, tbody, tfoot, thead, tr, th, td, img, embed {margin: 0; padding: 0; outline: 0;}



:focus {outline: 0;}



ol, ul {list-style: none;}



table {border-collapse: collapse; border-spacing: 0; border: 1px solid #eee}



table td, table th {border: 1px solid #eee; padding: 3px 10px;}



caption, th, td {font-weight: normal;}



blockquote:before, blockquote:after, q:before, q:after {content: "";}



blockquote, q {quotes: "" "";}



strong, b, h1, h2, h3, h4, h5, h6 {font-weight:500;}



em {font-style:italic;}



sup {vertical-align: super;}







input[type=text], input[type=password], input[type=file], input[type=submit], input[type=reset], input[type=search], textarea, button {-webkit-appearance: none; -moz-appearance: none; appearance: none;}







input[type=number]::-webkit-inner-spin-button {opacity: 1;}







/************************************************************************************



Reset HTML5 Elements to Block



*************************************************************************************/







main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}







/************************************************************************************



CSS WEBSITE



*************************************************************************************/







html {background-color: #000;}



body {



	font-family: 'Roboto', Arial, Helvetica, sans-serif;



	font-weight: 400;



	font-size: 16px;



	color: #000;



	line-height: 22px;



}



.css_body {	



	background: #fff;



	-webkit-text-size-adjust: 100%;



	word-wrap: break-word;



	max-width: 1920px;



	margin: 0 auto;



	height: auto;



	min-height: 100%;



}







#wrapper {position: relative; height: 100%;}







.min_wrap {width: 1140px; margin: 0 auto; padding: 0 15px;}



.min_wrap2 {}



.sty_cont {



	padding: 0 90px;



	-webkit-box-sizing: border-box;



	-moz-box-sizing: border-box;



	box-sizing: border-box;



}



.img_hover:hover {opacity: 0.9;}







.icon_web {}







.font_sty {}







/************************************************************************************



CSS HEADER



*************************************************************************************/







#header {



	background: rgb(102,102,102);



    background: linear-gradient(180deg, rgba(102,102,102,1) 0%, rgba(0,0,0,1) 100%);



	min-height: 50px;



	color: #fff;



	position: sticky;



	top: 0;



	z-index: 111;



}



#header .min_wrap {



	display: -webkit-flex;



	display: -moz-flex;



	display: -ms-flex;



	display: -o-flex;



	display: flex;



	justify-content: space-between;



	color: #9d9d9d;



}



.ul_mn {



	display: -webkit-flex;



	display: -moz-flex;



	display: -ms-flex;



	display: -o-flex;



	display: flex;



	font-size: 16px;



	margin: 0 -15px;



}



.ul_mn > li {position: relative;}



.ul_mn > li > a {



	display: block;



	line-height: 50px;



	color: #9d9d9d;



	text-transform: capitalize;



	padding: 0 15px;



	-webkit-transition: color .3s;



	-o-transition: color .3s;



	transition: color .3s;



}



.ul_mn > li.active > a,



.ul_mn > li:hover > a {color: #fff;}



.ul_mn > li > a .fa-sharp {font-size: 14px;}



.ul_mn > li:hover .mn_child_01 {display: block;}



.mn_child_01 {



	background-color: #fff;



	position: absolute;



	top: 50px; left: 0;



	z-index: 11;



	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);



	box-shadow: 0 0 10px rgba(0,0,0,0.1);



	white-space: nowrap;



	padding: 10px 0;



	min-width: 200px;



	font-size: 14px;



	overflow-y: auto;



	max-height: 80vh;



	display: none;



}



.mn_child_01 > li {padding: 10px 0; border-bottom: 1px solid #f1f1f1;}



.mn_child_01 > li:last-child {border-bottom: 0;}



.mn_child_01 > p {padding-top: 10px; padding-bottom: 5px;}



.t_mn_child_01 {display: block; text-transform: capitalize; color: #888; padding: 0 20px;}



.sub_mn_child_01 > li > a {color: #333; padding: 3px 20px; display: block;}



.sub_mn_child_01 > li:hover > a {background-color: #f5f5f5; color: #000;}







.search {position: relative; padding-top: 6px;}



.ipt_seah {



	width: 200px; height: 34px;



	background-color: #fff;



	border: 0;



	border-radius: 4px !important;



	padding: 0 34px 0 12px;



}



.but_seah {



	cursor: pointer;



	width: 34px; height: 34px;



	border: 0;



	text-align: center;



	line-height: 34px;



	position: absolute;



	top: 6px; right: 0;



	background: none;



	font-size: 16px;



}







/************************************************************************************



CSS CONTAINER



*************************************************************************************/







#container {min-height: 85vh;}







.slide {height: 400px; background: url(../imgs/img-demo/slide.jpg) #000 no-repeat center center;}



.swiper1 {}



.swiper1 .swiper-slide {



	display: -webkit-flex;



	display: -moz-flex;



	display: -ms-flex;



	display: -o-flex;



	display: flex;



	justify-content: center;



	align-items: center;



	color: #fff;



	font-size: 60px;



	line-height: 1;



	height: 400px;



	font-weight: 600;



	padding: 0 15%;



	-webkit-box-sizing: border-box;



	-moz-box-sizing: border-box;



	box-sizing: border-box;



}



.swiper1 .swiper-slide a {color: #fff;}







.b_cont {padding: 30px 0;}



.til_b_cont {



	padding: 20px 0;



	font-size: 40px;



	line-height: 1.2;



	font-weight: 500;



}



.des_b_cont {padding-bottom: 10px; color: #333;}



.des_b_cont a:hover {text-decoration: underline;}







.list_b_cont {



	display: -webkit-flex;



	display: -moz-flex;



	display: -ms-flex;



	display: -o-flex;



	display: flex;



	flex-wrap: wrap;



	margin: 0 -15px;



	padding-top: 20px;



}



.list_b_cont > li {



	-webkit-box-sizing: border-box;



	-moz-box-sizing: border-box;



	box-sizing: border-box;



	width: 33.33333%;



	padding: 0 15px;



}



.til_list_b_cont {



	color: #007aff;



	font-weight: 400;



	padding-bottom: 10px;



	font-size: 24px;



	line-height: 1.2;



}







.f_page {



	position: relative;



	display: -webkit-flex;



	display: -moz-flex;



	display: -ms-flex;



	display: -o-flex;



	display: flex;



	justify-content: space-between;



	align-items: flex-start;



	padding: 30px 0 60px 0;



	margin-left: -15px;



	margin-right: -15px;



}



.l_f_page {



	width: 25%; 



	padding: 0 15px;



	-webkit-box-sizing: border-box;



	-moz-box-sizing: border-box;



	box-sizing: border-box;



}



.r_f_page {



	width: 75%;



	padding: 0 15px;



	-webkit-box-sizing: border-box;



	-moz-box-sizing: border-box;



	box-sizing: border-box;



}



.mn_l_f_page {



	padding: 19px;



	border: 1px solid #e3e3e3;



	border-radius: 4px;



	background-color: #f5f5f5;



}



.list_mn_l_f_page > li {padding-bottom: 15px;}



.list_mn_l_f_page > li:last-child {padding-bottom: 0;}



.list_mn_l_f_page > li.active .til_list_mn_l_f_page a {color: #007aff;}



.til_list_mn_l_f_page {



	text-transform: capitalize;



	border-bottom: 1px solid #cecece;



	padding-bottom: 5px;



}



.til_list_mn_l_f_page a {color: #000;}



.sub_list_mn_l_f_page {padding-top: 10px;}



.sub_list_mn_l_f_page > li > a {color: #888; display: block; padding: 3px 7px;}



.sub_list_mn_l_f_page > li.active > a,



.sub_list_mn_l_f_page > li > a:hover {text-decoration: underline; color: #007aff;}







.til_f_page {



	font-size: 40px;



	line-height: 1.2;



	font-weight: 500;



	padding-bottom: 20px;



}



.in_f_page {padding: 0 15px; width: 100%;}



.list_ds > li {padding: 30px 0; border-bottom: 1px solid #eee; position: relative;}



.list_ds > li:last-child {border-bottom: 0;}



.til_list_ds {font-weight: 400; font-size: 24px; line-height: 1.2; padding-bottom: 10px;}



.ts_null {color: #666; padding-bottom: 20px;}



.tool_list_ds {



	display: inline-block;



	border: 1px solid #ccc;



	border-radius: 4px;



	font-size: 14px;



	vertical-align: middle;



	position: relative;



}



.tool_list_ds > li {display: inline-block; border-right: 1px solid #ccc; margin-left: -4px;}



.tool_list_ds > li:first-child {margin-left: 0;}



.tool_list_ds > li:last-child {border-right: 0;}



.tool_list_ds > li > a {



	display: block;



	padding: 6px 12px;



	color: #777;



}



.tool_list_ds > li > a:hover {background-color: #e6e6e6; color: #000;}







.form_f_contact {



	max-width: 50%;



	margin: auto;



}



.ul_form_f_contact > li {margin-bottom: 20px; position: relative;}



.ul_form_f_contact > li:last-child {margin-bottom: 0;}



.ipt_f_contact {



	width: 100%; height: 44px;



	padding: 0 15px;



	border-radius: 4px;



	border: 0;



	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);



	box-shadow: 0 0 5px rgba(0,0,0,.1);



	font-size: 14px;



	-webkit-transition: .3s;



	-o-transition: .3s;



	transition: .3s;



}



.tarea_f_contact {



	width: 100%;



	padding: 10px 15px;



	border-radius: 4px;



	border: 0;



	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);



	box-shadow: 0 0 5px rgba(0,0,0,.1);



	font-size: 14px;



	height: 150px;



	resize: vertical;



	-webkit-transition: .3s;



	-o-transition: .3s;



	transition: .3s;



}



.ipt_f_contact:focus, .tarea_f_contact:focus {



	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.15);



	box-shadow: 0 0 10px rgba(0,0,0,.15);



}



.but_f_contact {



	width: 100%; height: 44px;



	border: 0;



	cursor: pointer;



	color: #fff;



	border-radius: 4px;



	text-transform: uppercase;



	font-size: 15px;



	font-weight: 600;



	background-color: #007aff;



}



.but_f_contact:hover {opacity: .8;}



.img_capcha {



	display: inline-block; 



	width: auto; height: 36px;



	position: absolute;



	top: 4px; right: 4px;



	z-index: 1;



	border-top-right-radius: 2.5px;



	border-bottom-right-radius: 2.5px;



}







/************************************************************************************



CSS FOOTER



*************************************************************************************/







#footer {border-top: 1px solid #eee; padding: 20px 0; font-size: 12px; line-height: 16px; color: #444; text-align: center;}



#footer a {}



#footer a:hover {text-decoration: underline;}







/************************************************************************************



CSS PLUS



*************************************************************************************/







.f-detail {line-height: 1.6;}



.f-detail img {padding: 5px 0; max-width: 100% !important; height: auto !important;}



.f-detail a {color: #007aff;}



.f-detail a:hover {text-decoration: underline;}



.f-detail iframe {max-width: 100% !important;}



.f-detail code {



	background-color: #f9f2f4;



	padding: 2px 4px;



	border-radius: 4px;



}



.f-detail pre {



	display: block;



	padding: 9.5px;



    margin: 15px 0;



    font-size: 13px;



    line-height: 1.42857143;



    color: #333;



    word-break: break-all;



    word-wrap: break-word;



    background-color: #f5f5f5;



    border: 1px solid #ccc;



    border-radius: 4px;



}



.f-detail pre code {



    padding: 0;



    white-space: pre-wrap;



    background-color: transparent;



    border-radius: 0;



}







.f-detail table tr {background: #fff;}



.f-detail table tr:nth-child(2n) {background: #f9f9f9;}



.f-detail table td {padding: 10px;}







.f-detail ul, .f-detail ol {margin-top: 10px; margin-bottom: 10px;}







.f-detail ul li {list-style: disc; margin-left: 40px;}



.f-detail ol li {list-style: decimal; margin-left: 40px;}







.tag {padding: 20px 0 0 0; font-size: 11px; overflow: hidden; font-family: 'Roboto';}



.tag span {color: #939393; padding: 2px 5px 2px 23px; background: #F1F1F1 url(../imgs/icontag.png) no-repeat 5px 5px; display: block; float: left; margin: 0 3px 3px 0;}



.tag a {padding: 2px 5px; color: #656565; background: #F1F1F1; display: block; float: left;	margin: 0 3px 3px 0;}



.tag a:hover {background: #E2E2E2;}







.error-sty {color: #f70000; font-weight: 400; padding: 5px 0px; font-size: 11px;}







a{color: #007aff;}



a:hover {}



a[href^="tel:"], a[href^="mailto:"] {}







.clear {clear:both; height: 0; float: none;}







.box-sizing-fix {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}



.img_object_fit {object-fit: cover; -moz-object-fit: cover; -webkit-object-fit: cover; -o-object-fit: cover; -ms-object-fit: cover;}



::-webkit-input-placeholder {opacity: 1;} ::-moz-placeholder {opacity: 1;} :-ms-input-placeholder {opacity: 1;} :-moz-placeholder {opacity: 1;}



.sty_slec {-webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}



.sty_slec::-ms-expand {display: none;}



.sty_transition {-webkit-transition: ease 0.3s; -moz-transition: ease 0.3s; -o-transition: ease 0.3s; -ms-transition: ease 0.3s; transition: ease 0.3s;}



.hover_img {-webkit-transition: .3s; -o-transition: .3s; transition: .3s;}



.hover_img:hover {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05);}







.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}



.clearfix {display: inline-block;}



* html .clearfix {height: 1%;}



.clearfix {display: block;}







select option {font-size: 12px; padding: 0px 5px;}







input, textarea, select, button {font-family: 'Roboto Flex', Arial, Helvetica, sans-serif; color: #777;}



button:active {opacity: 0.9;}







html {scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.2) #ddd;}



::-webkit-scrollbar {width: 8px; height: 8px; background: #ddd;}



::-webkit-scrollbar-thumb {width: 8px; background-color: rgba(0,0,0,0.2);}



::-webkit-scrollbar-track {padding: 3px;}







#star img {display: inline-block; width: auto; height: 18px; position: relative; top: -1px;}







.page {



	font-size: 14px; 



	text-align: center;



	text-transform: uppercase; 



	padding-top: 30px;



	font-weight: 400;



	-webkit-box-sizing: border-box;



	-moz-box-sizing: border-box;



	box-sizing: border-box;



}



.PageNum a {



	display: inline-block; 



	color: #000; 



	background-color: #fff;



	padding: 3px 10px; 



	margin: 0px 3px 5px 0px; 



	border: 1px solid #fff;



	border-radius: 2px;



}



.PageNum a:hover {color: #000; background-color: #eee; border-color: #eee;}



.PageNum span {



	border-radius: 2px;



	display: inline-block; 



	color: #000; 



	padding: 3px 10px; 



	margin: 0px 3px 5px 0px; 



	background-color: #eee;



	border: 1px solid #eee;



	font-weight: 500;



}







/************************************************************************************



MENU MOBILE



*************************************************************************************/







.icon_menu_mobile {



	display: block;



	width: 50px; height: 50px;



	line-height: 50px;



	cursor: pointer;



	text-align: center;



	user-select: none;



}



.icon_menu_mobile::before {



	font-family: "Font Awesome 6 Pro";



	font-weight: 900;



	content: "\e195";



}



.icon_menu_mobile.active::before {font-weight: 300;	content: "\e59b";}







/************************************************************************************



RESPOSIVE



*************************************************************************************/







.r_hea_rwd {



	display: none;



	position: absolute;



	top: 0; right: 0;



}



.click_s {



	cursor: pointer;



	display: block;



	width: 50px; height: 50px;



	text-align: center;



	line-height: 50px;



	font-size: 16px;



	user-select: none;



	border-right: 1px solid rgba(255,225,255,.25);



}







@media only screen and (min-width: 1921px) {



	



}







@media only screen and (max-width: 1180px) and (min-width: 769px) {



	



}







@media only screen and (max-width: 1024px) {



	html, body {-webkit-overflow-scrolling: touch; overflow-x: hidden;}



	.min_wrap, .min_wrap2 {width: 96%; padding: 0;}



	



	#header .min_wrap {display: block;}



	.search {



		position: absolute;



		padding-top: 0;



		top: 0; left: 0; right: 0; bottom: 0;



		padding: 8px 2% 0 2%;



		z-index: 11;



		background: rgb(102,102,102);



        background: linear-gradient(180deg, rgba(102,102,102,1) 0%, rgba(0,0,0,1) 100%);		



	}



	.search.active {display: block;}



	.ipt_seah {width: 100%;}



	.but_seah {top: 8px; right: 2%;}



	.r_hea_rwd {



		display: -webkit-flex;



		display: -moz-flex;



		display: -ms-flex;



		display: -o-flex;



		display: flex;



	}



	.swiper1 .swiper-slide {font-size: 40px; line-height: 40px;}



	.til_b_cont, .til_f_page {font-size: 30px;}



	.til_list_b_cont, .til_list_ds {font-size: 20px;}



	.nav_mn.active {



		position: absolute;



		top: 0; left: 0; right: 0;



		background: rgb(102,102,102);



        background: linear-gradient(180deg, rgba(102,102,102,1) 0%, rgba(0,0,0,1) 100%);		



	}



	.nav_mn.active .ul_mn > li {display: block; padding: 0 2%;}



	.nav_mn.active .ul_mn > li:nth-child(1) {border-bottom: 1px solid rgba(255,255,255,.25);} 



	.ul_mn {display: block;}



	.ul_mn > li > a {color: #fff; font-weight: 500;}



	.mn_child_01 {right: 0;}



	.search {display: none;}



	



	.b_cont {padding: 4% 0;}



	



	.ul_mn > li {display: none;}



	.ul_mn > li:nth-child(1) {display: block;}



	.ul_breacrum {white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;}



	.f-detail table {display: block; overflow-x: auto; margin: 20px 0; border: 0;}



}







@media only screen and (max-width: 1023px) {



	.f_page {padding: 4% 0; margin: 0;}



	.in_f_page {padding: 0;}



	.form_f_contact {max-width: 75%;}



	.list_ds > li {padding: 20px 0;}



	.f_page {flex-direction: column-reverse;}



	.l_f_page, .r_f_page {width: 100%; padding: 0;}



	.l_f_page {padding-top: 20px;}



}







@media only screen and (max-width: 480px) {



	.min_wrap, .min_wrap2 {width: 94%; padding: 0;}



	



	.nav_mn.active .ul_mn > li {padding: 0 3%;}



	.search {padding-left: 3%; padding-right: 3%;}



	.but_seah {right: 3%;}



	.slide {height: 300px;}



	.swiper1 .swiper-slide {font-size: 30px; line-height: 30px; padding: 0 10px; height: 300px;}



	.til_b_cont, .til_f_page {font-size: 26px;}



	.list_b_cont {margin: 0; display: block;}



	.list_b_cont > li {width: auto; padding: 10px 0;}



	.form_f_contact {max-width: 100%;}



	.tool_list_ds {



		display: -webkit-flex;



		display: -moz-flex;



		display: -ms-flex;



		display: -o-flex;



		display: flex;



	}



	.tool_list_ds > li {margin-left: 0;}



}