@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
@font-face {
	font-family:'DFLi';
	src:url('DFLi.ttf');
	font-weight:normal;
    font-style:normal;
}



/*------------------------------------*\
    MAIN
\*------------------------------------*/
/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}
body {
	
	/*font-family: 'DFLi', sans-serif;*/
    font-family: 'Microsoft JhengHei',sans-serif;
	color:#333333;
	font-size:16px;
	line-height:22px;
	overflow-x: hidden;
	font-weight:400;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}
.clear:after { clear:both;}

.clear {*zoom:1; clear:both;}

img {max-width:100%;	vertical-align:bottom;}

a {	color:#000;	text-decoration:none;}

a:hover {text-decoration:none; color:inherit;}

a:focus {outline:0;text-decoration:none;}

a:hover, a:active {	outline:0;}

input:focus, textarea:focus, button:focus {	outline:0;	border:0;}

ul,li,h1,h2,h3,h4 {list-style-type:none;margin:0;padding:0}

p:not(:last-child){margin-bottom:25px;}

p:last-child{margin-bottom:0px;}


h3 {
    font-size: 24px;
    padding-bottom: 25px;
}




/*------------------------------------*\
	        HEADER
\*------------------------------------*/
.oxy {font-family: 'Oxygen', sans-serif;}
.logo-side img {
    max-width: 250px;
}

.header{padding:20px 0; position:absolute; top:0; left:0; width:100%; z-index:99;}

.lang span {
    height: 40px;
    width: 40px;
    background: #fff;
    display: inline-block;
    text-align: center;
    line-height: 40px;margin: 0 5px;
}
.lang {
    padding-bottom: 20px;
}

.lang span.active{color:#fff; background:#15d04e}

.nav_area > ul > li {    display: inline-block;    padding: 0 10px;   }

nav.nav_area {    padding-top: 10px;  padding-bottom:10px;  }

.nav_area ul li a { color: #fff; font-size: 19px;  display: inline-block; }

ul.sub-menu {    position: absolute;  background:#0d1d4c;      z-index: 555;	text-align:left;	padding:10px 0;   }

ul.sub-menu li a{color:#fff; line-height:20px;  padding:3px 10px 7px 10px; font-size:15px; display:inline-block; text-transform:capitalize;   } 

ul.sub-menu li{	display:block;}

ul.sub-menu li a{width:90%;}



ul.sub-menu li.menu-item-has-children {    position: relative;  }

ul.sub-menu li.menu-item-has-children .arrow{color:#fff;  padding-left: 0;  }

span.arrow  {  font-size:16px; color:#fff;   }

ul.menu {    position: relative;     z-index: 11;  }


.footer {
    padding: 40px 0;
    background: #0d1d4c;
    color: #fff;
   
}
.footer a{color:#fff; }
.footer ul li a {color:#fff; display:block; padding:0 0 10px 0;     line-height: normal;}

.top-footer{background:#f5f3ed; font-family: 'Oxygen', sans-serif;}

.fbox i {
    color: #17d04f;
}

.fbox h5 {    font-size: 18px; color:#333333;  }
.fbox h3 {    font-size: 24px;     font-weight: 700 ; color:#333333;     padding: 0; }

a.btn {
    color: #fff;
    background: #4d97e6;
    padding: 5px 20px;
    font-size: 19px;
    font-weight: 500;
    margin: 10px 0;
    border: 2px solid #4d97e6;
    border-radius: 3px;
	    white-space: nowrap;
}

a.btn:hover {background:transparent; color: #4d97e6; }

.footer .cms_content {
    min-height: auto;
}





/*------------------------------------*\
	        MAIN
\*------------------------------------*/

.container {    max-width: 1200px;    margin: 0 auto;    width: 100%;  }

.home-banner:before{content: '';
    display: block;
    width: 100%;
    height: 50%;
    background: url(../image/header-bg.png) no-repeat bottom center;
    background-size: cover;
    position: absolute;
    top: 0;z-index: 9;}

.home-banner .item {   height: 400px;   background-size: cover; font-family:'Bebas Neue', sans-serif; letter-spacing:2px;   }
.home-banner .item h2{ font-size:72px; color:#ff6600; }
.home-banner .item h3{ font-size:48px; color:#333; }
.slide-content { display: flex; align-items: flex-start; flex-direction: column; justify-content: center; height: 100%;    max-width: 1170px;
    margin: 0 auto;    padding: 0 15px; }
	
.home-banner .owl-theme .owl-nav.disabled+.owl-dots {margin-top: 0;position: absolute; bottom: 15px;    width: 100%;}	
.home-banner .owl-theme .owl-dots .owl-dot span {background:#fff; height:14px; width:14px;}
.home-banner .owl-theme .owl-dots .owl-dot.active span,.home-banner  .owl-theme .owl-dots .owl-dot:hover span { background: #15d04e; }


.home-middle {    margin-bottom: -100px;  }

.scope-item > img {width:100%; object-fit:cover;}

.scope-item:before{content:'';	display:block;	width:100%;	height:100%;	position:absolute;	top:0;	left:0;	background:#000;	opacity:.3; }

span.icon {    display: flex;    width: 65px;    height: 65px;    background: #15d04e;    z-index: 9;    position: absolute;    text-align: center;    align-items: center;    justify-content: center; }

span.icon:after { content: ''; border-right: 10px solid #15d04e; border-bottom: 10px solid transparent; position: absolute; bottom: -10px; right: 0; }

.scope-item h3 { font-size: 36px; position: absolute; bottom: 10px; right: 15px;  color: #fff;  font-weight: 700;  padding: 0;  }

h2.section-title.logo-title {    border-bottom: 3px solid #e5e5e5;    margin-bottom: 30px;    padding-bottom: 15px;  }

h2.section-title.logo-title:after{display:none;}

h2.section-title_long.logo-title {    border-bottom: 3px solid #e5e5e5;    margin-bottom: 30px;    padding-bottom: 15px;  }

h2.section-title_long.logo-title:after{display:none;}

.logo-slider.owl-theme .owl-nav [class*=owl-] {  height: 40px;  width: 40px;  text-align: center;  background: #15d04e;  color: #fff;  border-radius: 0;
    font-size: 24px;   }
.logo-slider.owl-theme .owl-nav {    position: absolute;    top: -110px;    right: 0;  }
.logo-slider.owl-carousel .owl-item img {    width: auto;  }
.logo-slider.owl-carousel .owl-item {    float: none;    display: inline-block;    vertical-align: middle;  }
.logo-item {    display: table;    margin: 0 auto;  }


.copyright a:hover{
    color: #007bff;
}

/*------------------------------------*\
	        SUBPAGE
\*------------------------------------*/

.pagination {    display: block;    margin: 0px;  }
.pagination .link1 {      color: #fff;    background: #656464; }
.pagination a {display: inline-block; height: 30px; width: 30px; vertical-align: middle; text-align: center; line-height: 30px; margin: 0 4px;   }
.pagination a.active {    background: #4d97e6;    color: #fff; }
.pagination a i {    height: 30px;    line-height: 30px; }

.pagination a.link {    padding-top: 6px;  }

.sidebar{background:#f5f5f5;}

ul.sidemenu > li:not(:last-child){border-bottom:1px solid #ccc; }

ul.sidemenu > li:before { content: "\f105";
    font-family: 'Font Awesome 5 Free';
    color: #333;
    display: inline-block;
    right: 15px;
    position: absolute;
    font-weight: 700;
    }

ul.sidemenu li li {    padding: 0 0 0 12px;font-size: 15px; 	 }


ul.sidemenu > li:hover {color:#ff6600; }

.sidebar > ul{   	position: relative;    padding-bottom:60px;    }

ul.sidemenu li {  cursor:pointer; position:relative;   padding: 15px  ;   font-weight:bold; font-size: 16px; color: #000; list-style:none !important;  }

ul.side-sub-menu {    padding: 8px 0;  }

ul.side-sub-menu li.active a{color:#000;}

label.side-title {
    background: #f65a1d;
    color: #fff;
    display: block;
    font-size: 25px;	
    font-weight: bold;
    padding: 15px 20px;
	
}

.breadcrumbs {    font-size: 18px;    font-weight: 700;  }

.banner{position:relative;}
.banner:before{content:''; display:block; width:100%; height:50%;  background:url(../image/header-bg.png) no-repeat bottom center; background-size:cover; position:absolute; top:0; }


.banner img{width:100%; height:450px; object-fit:cover; }


.section-title {font-size:45px; letter-spacing:2px;  text-align:center;  }
.section-title:after {content:''; display:block; width:100%; height:3px; background:#15d04e; max-width:50px; margin:15px auto;}

.section-title_long {font-size:45px; letter-spacing:2px;  text-align:center;  }
.section-title_long:after {content:''; display:block; width:100%; height:3px; background:#15d04e; margin:15px auto;}


.brand-box img {    height: 150px;    object-fit: contain;    display: table;    margin: 0 auto;   }
.brand-box {    margin-bottom: 60px;  }


.pro-item h2 {    padding: 15px 0;    border-top: 2px solid #499ade;    text-align: center;  }
.pro-item img {    height: 250px;    object-fit: contain;    object-position: center;  }
.pro-item {    padding: 15px;    box-shadow: 0 0 10px #f1e6e6;  margin-bottom:30px; }


.pro-banner {    margin-top: -25%;    padding: 15px;    background: rgb(255 255 255 / 31%);   }
.pro-banner img {    height: auto;  }

h2.pro-title {
    color: #0d1d4c;
    font-size: 38px;
    font-weight: 700;
    padding: 25px 0 15px 0;
    border-bottom: 2px solid #009bd3;
}

h2.pro-title:before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 38px;
    background: #15d04e;
    vertical-align: middle;
    margin-right: 25px;
}
h3.subtitle {
    background: #e6e6e6;
    padding: 10px 15px;
    margin-bottom: 25px;
}

.pro-desc b {color:#003399;}

.slider-for .slick-slide, .slider-nav .slick-slide  {
    height: auto;
}
.slick-slide img {
    display: block;
    margin: 0 auto;
}

.slider-nav .slick-slide  img{
    border:2px solid #f4f4f4;
}

.slider-nav .slick-slide {
    padding: 5px;
}

.slider-nav .slick-dots li button::before {
    font-size: 42px;
}

/*------------------------------------*\
	        MIN WIDTH
\*------------------------------------*/

.mb-40 {    margin-bottom: 40px;  }
ul.sub-menu li.menu-item-has-children i:before {    content: "\f105"; }





@media(min-width:992px){
	.sec-title .custom-drop {  position:absolute;  right: 0;    top: 0;  }
	
.nav_area ul li:hover ul.sub-menu {	display:block;}
.nav_area > ul > li > ul.sub-menu {   margin-top: 20px;  }

.nav_area > ul > li ul.sub-menu {transform-origin: 50% 0;  transform: scaleY(0) translateZ(0);  transition: transform 0.3s, opacity 0.3s; display: block;  }

ul.sub-menu {min-width: 150px;}

ul.sub-menu li ul.sub-menu {    left: 100%;    top: -10px;    width: 100%;  }

.nav_area > ul > li:hover > ul.sub-menu, .nav_area ul.sub-menu > li:hover > ul.sub-menu {   transform: scaleY(1) translateZ(0);   }

.nav_area ul li:hover ul.sub-menu {    display: block; }
	
ul.menu{display:block !important;    }

span.arrow{display: inline-block; padding-left:5px;}

label.toggle {    display: none;  }



}


@media(min-width:768px){	



}




/*------------------------------------*\
	        MAX WIDTH
\*------------------------------------*/
.wrapper {    overflow-x: hidden;  }

@media (max-width:1200px){
	.container {
    max-width: 100%;
}
}

@media (max-width:1100px){

	.nav_area > ul > li {padding-right:15px;}
	
	.nav_area > ul > li {		padding: 0 10px 0 0;  }
	.nav_area > ul > li a {    font-size: 16px;  }
	

}

@media (max-width:1024px){
	
	.section-title {font-size:34px;}
	
}


@media (max-width:991px){
	.pro-banner {margin-top:-100px;}
	.home-middle {    margin-bottom: -50px; }
	
	.header ul.menu  {    display: none; position:absolute; width:100%; left:0;  text-align: left;    background:#398dd8;  z-index:2;    padding: 15px 10px;    z-index: 10;  top: 60px;}
	
	.nav_area > ul > li {    padding: 0;  }
	
	ul.sub-menu li.menu-item-has-children .arrow{color:#fff;     top: 0;}
	
	.header .row {    align-items: center;  }
	
	.toggle {  color: #fff;    font-size: 22px;   margin:0;text-align: right;    display: block;  } 	
	
	.menu-side { position: initial;    }
	
	.nav_area ul li a {    line-height: 40px;    font-size: 14px; color:#fff; }
	
	nav.nav_area ul li{display:block;     position: relative;    border: 0; }
	
	span.arrow { position: absolute;  right: 0px;  color: #fff;  top: 10px;   width: 40px;    text-align: center;     height: 30px; 	}
		
	ul.sub-menu {    display: none;    position: relative;  	    background: transparent; padding:0; }	
	
	ul li .sub-menu li a {    line-height: 14px;  }	
	
	.header .container {    position: initial; }
	
	ul.sub-menu1 span.arrow {    right: 10px;    text-align: right;  }
	
	span.arrow.close-icon i:before {    content: '\f106';  }
	
	ul.sub-menu li.menu-item-has-children  span.arrow.close-icon i:before {    content: "\f106";  }
	
	nav.nav_area {    padding-top: 0;    padding-bottom: 0;  }
	
	span.headerarrow {    display: none;  }
	
	.banner img {height:200px;}
	
	
	
	.flogo {    text-align: center;    padding-bottom: 35px !important;  }
	ul.fmenu {    padding-bottom: 35px;  }

}


@media (max-width:767px){
	.home-banner .item {height:350px;}
	
	.scope-item {    margin-bottom: 20px;  }
	
	.footer img {   padding-bottom:25px; padding-top:25px;}
	
	.brand-box {    margin-bottom: 30px;  }
	
	.brand-box img {height:auto;}
	
	.fbox {    padding-bottom: 30px;  }
	.pro-item img {    height: 180px;  }
	
	h2.pro-title {font-size:24px;}
	
	
	.fbox h3 {font-size:20px;}
	.fbox h5 {    font-size: 16px; }
	
}


@media (max-width:550px){
.top-footer .col-6 {
    max-width: 100%;
    flex: 0 0 100%;
}

.banner img {
    height: 140px;
}

.section-title {
    font-size: 30px;
    letter-spacing: 0;
}
.home-banner .item {
    height: 250px;
}
	
}