/*** /////// Haptik-WL /////////////////////////***/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');



body{ font-family: "Montserrat","Noto Sans TC", sans-serif; letter-spacing: 0.5px;} 

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 { font-family: "Montserrat","Noto Sans TC", sans-serif; line-height: 1.4!important; }

.navbar-brand h1{line-height:normal!important;}
.navbar-brand h1 img{ width: 120px;}
@media (max-width: 768px) {
.navbar-brand h1 img{ width: 100px;}	
}

/*** Spinner Start ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease-out, visibility 0s linear .5s;
    z-index: 99999;
 }

 #spinner.show {
     transition: opacity .8s ease-out, visibility 0s linear .0s;
     visibility: visible;
     opacity: 1;
 }

@media (max-width: 768px) {
.p-5{ padding: 1rem!important;}
.mb-5{ margin-bottom:1rem!important; }
}
	
	
	
.text-right{ text-align: right; }
.text-left{ text-align: left; }



/*** Spinner End ***/

.back-to-top {
    position: fixed;
    right: 25px;
    bottom: 80px;
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    z-index: 99;
}
@media (max-width: 768px) {
.back-to-top { right: 10px; width: 45px; height: 45px; bottom: 43px;}
}


.btn {
    text-transform: uppercase;
    font-weight: 500;
    transition: .5s;

}

.btn-primary {
    /*box-shadow: inset 0 0 0 0 var(--bs-dark);*/
}


.btn.btn-primary:hover {
    /*box-shadow: inset 200px 0 0 0 var(--bs-dark) !important;*/
    /*color: var(--bs-primary) !important;*/
}

.btn.btn-dark {
    /*box-shadow: inset 0 0 0 0 var(--bs-primary);*/
}

.btn.btn-dark:hover {
    /*box-shadow: inset 200px 0 0 0 var(--bs-primary);*/
    /*color: var(--bs-dark) !important;*/
}



/*** Topbar Start ***/

.search-btn {
    position: relative;
    width: 100%;
    padding: 0 0 0 25px;
}

.search-btn .form-group {
    width: 100%;
}

.search-btn button {
    position: absolute;
    right: 25px;
}

@media (max-width: 992px) {
    .search-btn {
        display: none;
    }
}

@media (max-width: 768px) {
    .topbar {
        flex-direction: column;
    }
    .search-btn {
        display: none;
    }
    .topbar-info {
        flex-direction: column;
    }
    .topbar-info a {
        padding: 0 0 10px 0;
    }
    .topbar-icon {
        padding: 0 0 10px 0;
    }
}

@media (max-width: 576px) {
    .topbar-top {
        display: none;
    }
}

/*** Topbar End ***/

/*** Navbar Start ***/
.navbar .navbar-nav {
    padding: 15px 0;
}

.navbar .navbar-nav .nav-link {
    padding: 15px;
    color: var(--bs-dark);
    font-weight: 500;
    font-size: 16px;
    outline: none;
    transition: .5s;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active  {
    color: var(--bs-primary);
    transition: .5s;
}




.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 800;
    vertical-align: middle;
    margin-left: 8px;
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        transition: .5s;
        opacity: 0;
    }
}

.dropdown .dropdown-menu a:hover,
.dropdown .dropdown-menu a.active {
    background: var(--bs-dark);
    color: var(--bs-primary);
}

.navbar .nav-item:hover .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    transition: .5s;
    opacity: 1;
}

.navbar-toggler {
    /*background: var(--bs-secondary);*/
    color: var(--bs-light) !important;
    padding: 5px 12px;
    /*border: 2px solid var(--bs-primary) !important;*/
}


.footer-link{ color:#fff!important; padding: 15px 1.5em;}
a.footer-link:hover{ color:#009CDD!important;}

.footer-link1{ color:#ccc!important; text-decoration: underline; font-size:14px!important;}
a.footer-link1:hover{ text-decoration:none; font-weight: 700;}

#collapsefooter { }
#collapsefooter .dropdown-item{}

/*** Navbar End ***/






/*** Carousel Start ***/




.carousel-item {
    position: relative;
	text-align:center;
    height: 700px;
    /*margin-top: 3.9em;*/
	overflow: hidden;
}

.carousel-item img{position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);}

.carousel-item::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, .4);
}

.carousel-caption {
    height: 100%;
    display: flex;
    align-items: center;
    text-align: start;
    z-index: 1;
}

@media (max-width: 500px) {
.carousel-item img{ height: 700px;}	
.carousel-caption{
    right: 5%;
    left: 5%;	
}
}
/*@media (min-width: 2500px) {
	.carousel-item img{ width:100%; height: auto; }
	
}*/


.carousel-control-prev {
    width: 80px;
    /*height: 60px;*/
    position: absolute;
    /*top: 50%;*/
    left: 0;
    /*background: var(--bs-primary);*/
    /*border-radius: 0 30px 30px 0;*/
    transition: .5s;
    opacity: 1;
	border: none!important;
}
.carousel-control-prev:hover{
	background-color:transparent!important;
	box-shadow:none!important;
}


.carousel-control-next {
    width: 80px;
    /*height: 60px;*/
    position: absolute;
    /*top: 50%;*/
    right: 0;
    /*background: var(--bs-primary);*/
    border-radius: 30px 0 0 30px;
    transition: .5s;
    opacity: 1;
	border: none !important;
}
.carousel-control-next:hover{
	background-color:transparent!important;
	box-shadow:none!important;
}


#carouselId .carousel-indicators li {
    width: 160px;
    height: 40px;
	line-height: 40px;
    /*background: var(--bs-dark);*/
    /*border: 2px solid var(--bs-primary);*/
	border: 1px solid #fff;
    border-radius: 24px;
    margin: 0 10px 30px 10px;
	opacity: 1;
	text-indent: inherit;
	text-align: center;
	background-color:transparent;
	color: #fff;
	/*background-clip:inherit;*/
	font-weight:600;
}

#carouselId .carousel-indicators li.active {
   /* background: var(--bs-primary);*/
	background-color:#fff;
	color: #000;
}
@media (max-width: 768px) {
	.carousel-indicators{
		margin-right: 2%;
		margin-left: 2%;
	}
	/*.carousel-indicators [data-bs-target]{
		width: auto;
        height: auto;
	}	*/
	#carouselId .carousel-indicators li {
		font-size: 13px;
		height: 2px;
		padding: 0 3px;
		margin: 0 2px 30px 2px;
	}
	#carouselId .carousel-indicators li.active {
		color:#3668e4;
	}
}






#carouselId-2 .carousel-indicators li {
    width: 8px;
    height: 8px;
    /*background: var(--bs-dark);*/
    /*border: 2px solid var(--bs-primary);*/
    margin: 0 5px 30px 5px;
	opacity: 1;
	text-indent: inherit;
	text-align: center;
	background-color:#fff;
	color: #fff;
	/*background-clip:inherit;*/
	border-radius: 50%;
	border: none;
}

#carouselId-2 .carousel-indicators li.active {
	background-color: #3668e4;
	width: 52px;
	border-radius: 15px!important;
	
}


@media (max-width: 768px) {
    .carousel-item {
        width: 100%;
        height: 600px;  
    }


    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }
    
}

.page-header {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../img/solution-kv-01.jpg) center center no-repeat;
    background-size: cover;
}

.page-header h1{ font-size: 40px;}
.page-header p{ color: #fff; font-size: 18px; }

.banner-block{ width: 500px;}
@media (max-width: 768px) {
.banner-block{ width: 100%;}
.page-header p{ font-size: 15px; }	
}

.page-header1 {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../img/HKBN_kenneth_003.webp") center center no-repeat;
    background-size: cover;
    margin-bottom: 6rem;
}

.page-header1 h1{ font-size: 40px;}
.page-header1 p{ color: #fff; font-size: 16px; line-height: 70px;  text-indent: 20px;}

.page-header1 .container{ padding:12em 10em 5em 10em;}

@media (max-width: 768px) {
.page-header1 h1{ font-size: 25px;}
.page-header1 { margin-bottom: 2rem; margin-top: 4.7em; padding-top: 5em !important;}
.page-header1 .container{ padding:22px;}	
	
}


.about-header{
    background:url(../img/Hare-solution.png) center center no-repeat;
	background-size: 100%;
	min-height: 600px;
}
.about-header .container{ padding: 12em 5em;}

@media (max-width: 1024px) {
.about-header{ 
	background-size:cover;
}
}

@media (max-width: 768px) {
.about-header{ 
	background-size:cover;
	min-height: 400px;
}	
.about-header .container{ padding:0;}	
	
}

.about-header h1{ font-size:4rem; color: #fff;  }
.about-header p{ font-size: 18px; }
@media (max-width: 768px) {
.about-header h1{ font-size: calc(1.4rem + 4.5vw); }
.about-header p{ font-size: 15px; }	
}



/*** Carousel End ***/


/*** About Start ***/

.about-img {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 30px 30px 30px 30px ;
    overflow: hidden;
}

.about-img::before {
    content: "";
    width: 100%;
    height: 40%;
    background: var(--bs-dark);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    border-radius: 10px 10px 10px 10px;
}


.about-img::after {
    content: "";
    width: 100%;
    height: 60%;
    background: var(--bs-primary);
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1;
    border-radius: 10px 10px 10px 10px;
}

.rotate-left {
    width: 150px;
    height: 100px;
    position: absolute;
    top: 28%;
    left: -10%;
    rotate: 25deg;
    z-index: 2;
}

.rotate-right {
    width: 150px;
    height: 100px;
    position: absolute;
    top: 28%;
    right: -10%;
    rotate: -25deg;
    z-index: 2;
}

.about-img img {
    position: relative;
    z-index: 2;
    border-radius: 10px;
}

.experiences {
    width: 160px;
    height: 200px;
    position: absolute;
    top: -0;
    right: 0;
    padding: 35px 35px;
    text-align: center;
    border-radius: 10px;
    z-index: 3;
    animation: mymove 5s infinite;
    animation-timing-function: ease-in-out;
}

@keyframes mymove {
    from {top: -202px;}
    to {top: 102%;}
}

/*** About End ***/


/*** Services Start ***/
.services-inner-icon {
    width: 130px;
    height: 130px;
    background: var(--bs-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s;
    position: relative;
    
}

.services-inner-icon::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 62px;
    top: 50%;
    left: 50%;
    transition: .5s;
}

.services-item:hover .services-inner-icon::after {
    width: 100%;
    height: 100%;
    margin-top: -50%;
    margin-left: -50%;
    /*background: var(--bs-primary);*/
    color: var(--bs-dark);
    
} 

.services-item i {
    text-align: center;
    transition: .5s;
}

.services-item:hover i {
    color: var(--bs-dark) !important;
    z-index: 1;
    rotate: 360deg;
}

.services-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*** Services Start ***/

/*** Project Start ***/
.project-item {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 30px 30px 30px 30px ;
    overflow: hidden;
}

.project-item::before {
    content: "";
    width: 100%;
    height: 40%;
    background: var(--bs-dark);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    border-radius: 10px 10px 10px 10px;
}


.project-item::after {
    content: "";
    width: 100%;
    height: 60%;
    background: var(--bs-primary);
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1;
    border-radius: 10px 10px 10px 10px;
}

.project-left {
    width: 180px;
    height: 70px;
    position: absolute;
    top: 22%;
    left: -18%;
    rotate: 30deg;
    z-index: 2;
}

.project-right {
    width: 180px;
    height: 70px;
    position: absolute;
    top: 22%;
    right: -18%;
    rotate: -30deg;
    z-index: 2;
}

.project-item img {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-item a {
    position: absolute;
    padding: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0) rotate(-360deg);
    border-radius: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s;
    opacity: 0;
}

.project-item:hover a {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    background: var(--bs-primary);
    color: var(--bs-dark) !important;
    opacity: 1;

}


/*** prohect Start ***/


/*** Blog Start ***/

.blog-carousel {
    width: 100%;
    height: 100%;
    position: relative;
}


.blog-carousel .owl-nav .owl-prev {
    position: absolute;
    width: 80px;
    height: 50px;
    background: var(--bs-primary);
    top: -51px;
    left: 0;
    border: 0;
    border-radius: 10px 30px 30px 10px;
}

.blog-carousel .owl-nav .owl-prev {
    box-shadow: inset 0 0 0 0 var(--bs-dark);
    transition: .5s;
}

.blog-carousel .owl-nav .owl-prev:hover {
    box-shadow: inset 200px 0 0 0 var(--bs-dark);
    color: var(--bs-primary) !important;
}

.blog-carousel .owl-prev,
.blog-carousel .owl-next {
    color: var(--bs-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-carousel .owl-nav .owl-next {
    position: absolute;
    width: 80px;
    height: 50px;
    /*background: var(--bs-primary);*/
    top: -51px;
    right: 0;
    border-radius: 30px 10px 10px 30px;
}

.blog-carousel .owl-nav .owl-next {
    box-shadow: inset 0 0 0 0 #000000;
    transition: .5s;
}

.blog-carousel .owl-nav .owl-next:hover {
    box-shadow: inset 200px 0 0 0 #000000;
    color: var(--bs-primary) !important;
}


.newsbg-section{ background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../img/home-blog-01.jpg) center center no-repeat;
    background-size: cover; position: relative; padding-top: 110px;
}
.newsblock-padding{ padding-top: 5em; padding-bottom: 5em; margin-top: 10px; position: relative; margin-right: 0; z-index: 3;  width: 90%; padding-right: 2.6rem; }

.newsbg-bottom-footer{ display: block; width: 100%; height: 140px; background-color:#626262; position: absolute; z-index: 1; bottom: 0; left: 0;}

.news-block{ display: block; border-radius: 5px; background-color: #fff; padding: 40px; }
.news-block h4{ font-family: "poppins-semibold","Noto Sans TC", sans-serif; font-size: 36px; color: #333; margin-bottom: 36px; }
.news-block p{ font-family: "poppins-semibold","Noto Sans TC", sans-serif; font-size: 18px; color: #333; display: block; min-height: 80px;}
.news-block button{ margin-top: 20px;}
.newsbg-section .owl-dots{ position: absolute; top: -60px; right:0;}

@media (max-width: 768px) {
.newsblock-padding{	width: 100%; margin-right: auto; padding-right: var(--bs-gutter-x, 0.75rem);  }
}


/*** Blog End ***/


/*** Pricing Start ***/
.pricing-item {
    transition: .5s;
    
}

.pricing-item:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
    margin: -20px 0 20px 0;
}

.pricing-label {
    border-bottom: 20px solid var(--bs-light);
    border-radius: 0 0 300px 300px;
    transition: .5s;
}

.pricing-item:hover .pricing-label {
    border-color: rgba(0, 0, 0, .5);
}

.pricing-item:hover .pricing-label.pricing-featured {
    border-color: rgba(255, 255, 255, .5);
}


/*** Pricing End ***/


/*** Call To Action start ***/

.call-to-action {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

/*** Call To Action End ***/


/*** Team Start ***/
.team-item {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.team-item .team-icon {
    position: absolute;
    top: 15px;
    right: -80px;
    rotate: -30deg;
    transition: .5s;
    visibility: hidden;
}

.team-item:hover .team-icon {
    visibility: visible;
    margin-right: 95px;
    rotate: 0deg;
}

.team-item .team-icon .btn {
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 35px;
}

.team-item .team-content {
    box-shadow: inset 0 0 0 0 var(--bs-dark);
    transition: 1s;
    
}

.team-item:hover .team-content {
    box-shadow: inset 550px 0 0 0 var(--bs-dark);
    color: var(--bs-primary) !important;
}
/*** Team End ***/




















.title-small{ font-family: "Montserrat","Noto Sans TC", sans-serif; font-size: 16px; font-weight: 500; margin-bottom: 20px; 
	          background-color: #009CDD; color: #fff; border: none!important;}
.title-small1{ font-family: "Montserrat","Noto Sans TC", sans-serif; font-size: 16px; font-weight: 500; margin-bottom: 20px; 
	          background-color: #E9A240; color: #fff; border: none!important;}





/*** Footer Start ***/
.footer {
	background-color: #666666;
    color: rgba(255, 255, 255, .7);
}

.footer-item,
.footer-item a {
    color: rgba(255, 255, 255, .7);
	font-family: "Noto Sans TC", sans-serif!important; 
}

/*** Footer End ***/


/*** Copywright Start ***/

.copyright .copyright-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.copyright .copyright-icon {
    width: 44px; 
    height: 44px; 
    display: flex;
    align-items: center; 
    justify-content: center;
}
.copyright{ font-size: 15px; color:rgba(255, 255,255, 0.7); position: relative; }
.copyright_line{ position: absolute; bottom:-16px; left:0; display:block; height:4px; width: 100%; background: linear-gradient(to right, rgba(233,162,64,1) 0%,rgba(0,156,221,1) 100%);}
.copyright span{ padding: 1em 0;}

@media (max-width: 768px) {
.copyright{ text-align: center;}
.copyright span{ margin: 0 auto; width: 100%;}	
.copyright .ms-auto{ margin: 0 auto!important;}
.copyright .navbar .navbar-nav .nav-link{ padding: 3px!important;}
}
/*** Copywright End ***/

.navbar-toggler { border-radius: 5px; }
.dropdown-menu { border-radius: 5px; }


.word-position{ width: 456px; margin-bottom: 7rem;}

h1{ font-family: "Montserrat","Noto Sans TC", sans-serif; font-size:50px; }
h2{ font-family: "Montserrat","Noto Sans TC", sans-serif; font-size: 40px!important;}
p{ font-family: "Montserrat","Noto Sans TC", sans-serif; font-size: 18px; line-height: 30px;}

@media (max-width: 768px) {
    .word-position{ width: 100%; }	
	h1{ font-size: calc(1.5rem + 4vw);}
    h2{ font-size: 26px!important; line-height: 1.5;}
    p{ font-size: 15px; line-height: 26px;}	
}


.btn-myset{ min-width: 120px; border: 1px solid #000; border-radius: 0px; background-color:rgba(255,255,255,1); color: #000; }
.btn-myset:hover{ background-color:rgba(37,37,37,0.8); color: #fff;}

.btn-myset1{ min-width: 190px; min-height: 50px; border: none; border-radius: 0px; background-color: #000; color: #fff;}
.btn-myset1:hover{ background-color: #000; color: #fff;}
.btn-myset1:active, .btn-myset1:focus, .btn-myset1:checked{color: #fff;}

.btn-onclick{ background-color: #fff!important; color: #000!important;}

.btn-myset2{ min-width: 190px; min-height: 52px; border: 1px solid #000; border-radius:0px; background-color:rgba(51,51,51,1); color: #fff;}
.btn-myset2:hover{ background-color:rgba(255,255,255,1); color: #000;}



.pagebtn-block{ display: block; text-align: center;}
.pagebtn-myset{ display: inline-block; width: 40px; height: 40px; border: none; border-radius: 6px; background-color: #333333; color: #fff; margin-right:10px;}
.pagebtn-myset:hover{ background-color: #999; color: #fff;}



.btn-mybtn-outline{ background-color:transparent; border:1px solid #fff; min-width: 190px; min-height: 52px; border-radius: 0px; color: #fff;}
.btn-mybtn-outline:hover{ color: #3668e4; } 
.btn-mybtn-outline:active, .btn-mybtn-outline:focus, .btn-mybtn-outline:checked{ background-color: transparent;}

.btn-mybtn-outline1{ background-color:#666; border:1px solid #555; color: #fff!important;  border-radius:30px; margin: 1px 10px; padding:.375rem .75rem!important;}
.btn-mybtn-outline1:hover{ background-color:#009CDD; border:1px solid #009CDD;} 
.btn-mybtn-outline1:active, .btn-mybtn-outline1:focus, .btn-mybtn-outline1:checked{ background-color: transparent;}





@media (max-width: 768px) {
    .btn-myset{ min-width: 140px; min-height: 48px; }
    .btn-myset2{ min-width: 140px; line-height: 1; max-width: 55px; min-height: 48px; }		
	.btn-mybtn-outline{ min-width: 140px; min-height: 48px; }	
	.btn-mybtn-outline1{ margin: 20px 0 2px 0; display: inline-block;}
}



.btn-link a{ font-family: "Montserrat","Noto Sans TC", sans-serif!important; }
.btn-link a:hover{ color:#fff!important;}


.item-two{ margin-top:-3em;}
@media (max-width: 1000px) {
    .item-two{ margin-top:2em;}		
}

.footer-about{ padding-right: 40px; }
.footer-about .logo img{ width: 170px;}
.footer-about p{ font-size:18px; line-height: 1.4; padding-right: 1em; color: #fff;}
.footer-about p a{ margin-bottom: 10px; color:rgba(255, 255, 255, .7)!important; font-size: 15px;}
.footer-about p a:hover{ color:#62da9e!important;}

@media (max-width: 768px) {
.footer-about{ padding-right: 0px; }
.footer-about p{ font-size:15px;} 	
}



.footer-logo{text-align: center; position: relative;}
.footer-logo img{ width:110px; margin:0 30px; }
.footer-logo i{ font-size:25px; color: #222;}
.footer-logo-desicript img{ width: 40px; position: absolute; left:47%; bottom:-18px;}



@media (max-width: 768px) {
.footer-logo img{ display: block; margin: 10px auto; }	
}


.CTA_block{  padding:6em 4em; position: relative; background-image: url("../img/CTA_bg.jpg"); background-repeat: no-repeat; background-position:50% 15%; background-size: 100% auto;}
.CTA_block_line{ position: absolute; top:0; left:0; display: block; height:6px; width: 100%; background: linear-gradient(to right, rgba(233,162,64,1) 0%,rgba(0,156,221,1) 100%);   }




.bg_colo1{ background-color: #666; }


@media (max-width: 1000px) {
    .CTA_block { padding: 4em 2em 2.5em 2em; text-align: center;  background-size:auto 190%;}
	.CTA_btn_position { text-align: center; margin: 0.6em auto; }
}


.about-reverse{ display: flex; align-items: center; justify-content: center;}
@media (max-width: 1000px) {
.about-reverse{ flex-direction: column-reverse;}
}

@media (max-width: 768px) {
.case-start{ padding-top: 4em!important; /*margin-top: 3em;*/}
}
	


.core-value i{ color: #E9A240; font-size:25px; float: left; margin-right: 20px; margin-bottom: 20px;}
.core-value h3{ font-size:20px; margin-top: 1em;}
.core-value p{ font-size: 16px; padding:0.5em 2em 0 2.9em; color: #666666;}
@media (max-width: 768px) {
.core-value h3{ font-size:18px; }
.core-value p{ font-size: 15px;	}

}


	



.AI-bg{ background: linear-gradient(135deg,  rgba(230,233,239,0.4) 0%,rgba(159,186,203,0.4) 100%); }
.Onenews-block{ padding: 0px;}
@media (max-width: 768px) {
.Onenews-block{ padding:20px 0 0 0px;}		
}

.One-news { 
	/*max-width:500px; */
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
	border-radius: 4px;
	margin: 15px auto;
	padding: 0;
	background-color: #666;
	display: block;
	/*min-height: 630px;*/
}
.One-news.after-block{ max-width:600px; }
.float-arrow{ margin: 0 auto; }
.float-arrow-btn{ border-radius: 4px; }
.news-div{ display: flex; align-content:center; align-items: center; }
.news-div1{ display: flex; align-content:center; }

.One-news-word{ padding:2em 2em 3em 2em; }
.One-news h3, .One-news h3 a{ color: #fff; font-size:22px; margin-bottom: 20px; }
.One-news ul li{ line-height: 1.5; margin: 8px 0; color: #fff;}
.One-news .sort_tag1 font{ margin: 4px 8px 4px 0; color: #fff;}


@media (max-width: 500px) {
.One-news-word{ padding:1.5em 1.5em 2em 1.5em; }	
.One-news { 
	max-width: 350px;	
	width: 96%;
	height: auto;
	min-height:auto ;
}
}


.logo-block { }
.logo-block img{ width: 130px; float: right; margin:auto 1.5em;}
.logo-block img{ width: 130px; float: right; margin:auto 1.5em;}
@media (max-width: 768px) {
.logo-block { text-align: center;}
.logo-block img{ width: 110px; margin:1.3em;  }
}









.img-radius{ border-radius:6px; }




@media (min-width: 2560px) {
.img-cover{ width: 100%;}
}



.web-see{ display: block;}
.phone-see{ display: none;}	
@media (max-width: 500px) {
.web-see{ display: none;}
.phone-see{ display: block;}	
}