@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;500&display=swap');

@font-face {
	font-family:'Microsoft JhengHei';
	src:url('Microsoft JhengHei.ttf');
	font-weight:normal;    
}

@font-face {
	font-family:'Microsoft JhengHei';
	src:url('Microsoft JhengHei Bold.ttf');
	font-weight:bold;
    
}

/*------------------------------------*\
    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: 'Barlow', sans-serif;
	color:#000;
	font-size:18px;
	line-height:26px;
	overflow-x: hidden;
	font-weight:500;
}
/* 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;}

 .container{max-width:1200px;}





/*------------------------------------*\
	        HEADER
\*------------------------------------*/

.top-header {
    padding: 30px 0;
	background:#232855;
}
.bottom-header{
	background:#338bc7;
}
.header .container {    position: relative;  }

.menu-bar {  position:relative;  }

.nav_area > ul > li {    display: inline-block;}


.nav_area ul li:last-child{padding-right:0; border-right:0;  }

.nav_area ul li a { color: #fff; font-size: 16px; font-weight:400;  display:inline-block; padding:10px 8px}
.nav_area ul li a:hover{background:#7dcafe;color:#000;}

ul.sub-menu {    position: absolute;  background:#338bc7;      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:block; text-transform:capitalize;   } 

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




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;   }
.menu-bar ul.menu {color: #fff;
    position: relative;
    z-index: 11;
}


.footer {position: relative;background:#3da5ec;color:#fff;padding:40px 0;}
.footer-logos img{padding-left:20px;vertical-align:middle;}

.copyright {
    font-weight: 400;
    font-size: 14px;
	text-align:right;
	padding-top:10px;
}
.wrapper{position:relative;}

a.btn {       
    white-space: nowrap;
    color: #fff;
	background:#338bc7;
    padding: 5px 20px;
    font-size: 18px;
    font-weight: 500;
    margin: 10px 0;
    border: 2px solid #338bc7;
    border-radius:50px;
}

a.btn:hover {background:#fff; color: #338bc7; }

a.btn.black-btn {
    background: #000;
    border-color: #000;
}


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



.home-slider {
	background:url(../image/slider-bg.png) repeat left top;
	
}
.wrapper .owl-theme .owl-nav {
    margin-top: 0;
    position: absolute;
    top: 40%;
    max-width: 1300px;
    display: flex;
    justify-content: space-between;
    left: 0;
    right: 0;
    padding: 0 15px;
    margin: 0 auto;
    width: 100%;
}

.owl-theme .owl-nav .owl-prev {
    left: -50px;
    position: relative;
}

.owl-theme .owl-nav .owl-next {
    right: -50px;
    position: relative;
}


.home-slider.owl-carousel .slider-content {

}
.slider-content h2 {
    font-size: 60px;
    font-weight: 700;
	letter-spacing: 2px;
}
.slider-content h2:after{
	content: "";
	width:87px;
	height:3px;
	background:#cdf547;
	display:block;
	margin:30px 0;
}

.slider-content p{
    font-size: 26px;
    font-weight: 400;
	line-height:30px;
}

.home-slider.owl-theme .owl-dots{
    text-align: center;
}

.owl-theme .owl-dots .owl-dot span{
	  background: #000;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
    background: #320bb7;
}
h2.section-title img {
	display:block;
	margin:0 auto;
	padding-bottom:15px;
}
h2.section-title span{
	display:block;
	font-size:21px;
	font-weight:bold;
	    text-transform: initial;
}

h2.section-title {
    font-size: 32px;
    font-weight: 700;
}

.about-section h2{
    margin-bottom: 30px;
}
.about-section {
	background:url(../image/about-bg.png) no-repeat right top;
	background-size:cover;
	position:relative;
}
.about-section:before,.about-btm-setion:before,.banner:before{
    content: "";
    background: #00000047;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.about-btm-setion{
		background:#3469ed url(../image/about-bg-btm.png) no-repeat left top;
	position:relative;
}
.about-btm-setion li {
    font-size: 15px;
    font-weight: 400;
    list-style-type: disc;
    margin-left: 20px;
}
.about-btm-setion .btn {
    background: transparent;
    color: #fff;
    border-color: #fff;
	margin-top:15px;
}
/*------------------------------------*\
	        SUBPAGE
\*------------------------------------*/



.banner {position:relative; overflow: hidden;}
h1.page-title {
    position: absolute;
    bottom: 100px;
    color: #fff;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    left: 0;
    right: 0;
	padding: 0 15px;
    font-size: 55px;
    font-weight: 700;
	text-align:center;
}

.main{
	background:url(../image/pro-bg.png) no-repeat center;
	background-size:cover;
}

.title{
	font-size:36px;
	text-transform:uppercase;
	color:#232855;
	font-weight:700;
}

.cloud-img img{
	padding-bottom:50px;
}

.app-item{
	background:#c8e0f0;
	height: 100%;
}

.app-item h3{
	color:#232855;
	font-size:24px;
	font-weight:700;
	padding: 20px 20px 25px 20px;
}

.app-item  p{
	color:#232855;
	text-align:justify;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:25px;
}

.subtitle{
	font-size:24px;
	font-weight:700;
	color:#338bc7;
}


.title2{
	font-size:36px;
	color:#232855;
	font-weight:500;
}

ul.list li{
	position:relative;
	padding:0 0 5px 20px;
}

ul.list li:before {
    content: '\f111';
    font-weight: 900;
    color: #aaffc7;
    font-family: 'Font Awesome 5 Free';
    font-size: 7px;
    top:3px;
    position: absolute;
    left: 0;
}

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

@media(min-width:992px){
.nav_area ul li:hover ul.sub-menu {	display:block;}

.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:none; padding-left:5px; font-size: 12px; color:#000;}

label.toggle {    display: none;  }

.nav_area ul li a img {
    vertical-align: middle;
	max-width: 20px;
    margin-right: 5px;
}
}


@media(min-width:768px){	
ul.side-menu {
    display: block !important;
}

.sidebar .widget-title { pointer-events:none; }

}


.floating {
    position: fixed;
    bottom: 0;
    right: 70px;
    z-index: 9999;
}

/*------------------------------------*\
	        MAX WIDTH
\*------------------------------------*/
.wrapper {    overflow-x: hidden;  }
.home-slider.owl-theme .owl-nav.disabled {
    display: none;
}

@media (max-width:1100px){

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

}

@media (max-width:1024px){

}


@media (max-width:991px){
	
	.banner img {height:250px;}
	
	.container {    max-width: 100%;  }

	
	
	ul.menu  { 
    position: fixed;
    width: 80%;
    left: 0;
    text-align: left;
    background:#338bc7;
    z-index: 1000;
    padding: 15px 10px;
    top: 0;
    height: 100%;
    left: -100%;
    transition: all .4s;}
	
	ul.menu.open {left:0;}
	
	a.news-btn, a.eclass {    display: none;  }
	
	
	.header .row {    align-items: center;  }
	.toggle {
    cursor: pointer;
    color: #fff;
    font-size: 22px;
    margin: 0;
    text-align: right;
    display: block;
    position: absolute;
    right: 15px;
    bottom: 50px;
    z-index: 99999;
}
	
	.logo img {
    max-width: 200px;
}
	nav.nav_area ul li.menu-item-has-children a {
    display: inline-block;
    width: 90%;
    line-height: 20px;
    padding: 0 0 20px 0;
}
	
	.nav_area ul li a {    line-height: 40px;    font-size: 14px; color:#fff; }
	
	nav.nav_area ul li{display:block; border-bottom: 1px solid rgb(255 255 255 / 31%);    position: relative;    border: 0;  padding:0 0 10px 0;}
	
	span.arrow {
    position: absolute;
    right: 10px;
    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-menu 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";  }
	
	.home-slider.owl-carousel .owl-item img{height:300px;}

	
	.home-slider.owl-carousel .slider-content {bottom: 40px;}
	
	.slider-content h2 {font-size: 26px;}
    .slider-content h4 {font-size: 18px;}
	h1.page-title {    font-size: 26px;  }
	
	.header {
    position: relative;
}

h2.section-title {
    font-size: 26px;
    font-weight: 700;
}

.footer-logos img {
    display: table;
    margin: 15px auto;
}

a.btn {
    display: table;
    margin: 20px auto;
}

.footer-logos {
    text-align: center;
}

}


@media (max-width:767px){

.title2 {font-size:26px;}

.sidebar h3.widget-title {
    margin-bottom: 20px;
}
}


@media (max-width:576px){

	
}


.logo .logo2 { margin-right: 30px; margin-left: 10px; }
.logo .logo1 img { max-height: 64px; }
@media (max-width: 991px) {
    .logo .logo1 img {
        max-width: 150px;
    }
    .logo .logo2 img {
        max-width: 300px;
    }
}
@media (max-width: 550px) {
    .logo .logo1 img {
        max-width: 100px;
    }
    .logo .logo2 img {
        max-width: 200px;
    }
}