@charset "utf-8";
body,html{font-family:"Helvetica Neue",Helvetica,Arial;width:100%;height:100%}
.section{width:100%;height:auto;float:left;}
.shiro{display:none}
a:hover{color: var(--tblr-danger)!important;text-decoration: none;}
.navbar .navbar-nav .nav-link:hover{color: #fff;}
#carouselpro .carousel-indicators{position: static;flex-wrap: wrap;justify-content: flex-start;}
#carouselpro .carousel-indicators li{width: 80px;height: 80px;text-indent: 0;box-sizing: border-box;position: relative;}
#carouselpro .carousel-indicators li img{width: 80px;height: 80px;}
#carouselpro .carousel-indicators li.cvideo:before{font-family: var(--fa-style-family,"Font Awesome 6 Free");content: "\f144";font-weight: 400;font-size: 36px; position: absolute;top: 50%;left: 50%;z-index: 1;margin-top: -18px;margin-left: -18px;color: #fff;text-shadow: #333 2px 2px;}
#carouselpro .carousel-indicators li.active img{border-color: var(--tblr-dark);}
.covervideo{position: relative;display: inline-block;}
.covervideo:hover:before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .3);}
.covervideo:after{font-family: var(--fa-style-family,"Font Awesome 6 Free");content: "\f144";font-weight: 400;font-size: 60px;position: absolute;top: 50%;left: 50%;z-index: 1;margin-top: -45px;margin-left: -30px;color: #fff;text-shadow: #333 2px 2px;}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:1rem;text-align:center}
.empty-header{margin:0 0 1rem;font-size:4rem;font-weight:var(--tblr-font-weight-light);line-height:1;color:var(--tblr-muted)}
.empty-title{font-size:1.25rem;line-height:1.75rem;font-weight:var(--tblr-font-weight-bold)}
.card-img-overlay{background-color: rgba(0, 0, 0, .5);transition: all ease-In .3s;}
.card-img-overlay:hover{background-color: rgba(0, 0, 0, .2);}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active,.nav-pills .nav-link.active, .nav-pills .show>.nav-link{background-color: var(--tblr-danger);color: #fff;}
.card-body{position: static;}
.banner .col-md-7 .fw-bold{font-weight: 500!important;font-size: 3rem !important;}
.banner .col-md-7 p{margin-top: 30px!important;line-height: 2!important;font-size: 18px !important;}

.header{background-color: #000;padding:0px;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;z-index: 1030;}
.header .navbar-brand{margin: 0px;padding: 0px;}
.header .navbar-brand img{height: 33px;}
.header .navbar-nav .nav-link{color: #fff;font-size: 1.1rem;padding: 1.5rem 0rem;}
.header .navbar-nav .hvr-underline-from-left{overflow:initial;}
.header .navbar-nav .hvr-underline-from-left:before{background: var(--tblr-danger);}
.header .navbar-nav .dropdown-menu{min-width: auto;width: auto;transition: all 0.3s ease-out;display: block;top:73px;max-height: 0px;height:0px;visibility: hidden;overflow: hidden;padding: 0;}
.header .navbar-nav .nav-item:hover .dropdown-menu,.header .navbar-nav .nav-item a:hover+.dropdown-menu{display: block;visibility: visible;max-height: 100vh;height: auto;}
.header .navbar-nav .nav-item .dropdown-menu .dropdown-item{min-width: 8rem;font-size: .9rem;font-size: 1rem;font-weight: bold;}
.header .navbar-nav .nav-item .dropdown-menu .dropdown-item:focus, .header .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover{background-color: #eee;color: #fff;}
.header-top a{font-size: .9rem;color: #fff;padding: .5rem;display: inline-block;}
.banner .carousel-caption{text-align: left;}
.inner .banner:before{content: " ";position: absolute;top:0;left: 0;background: rgba(0, 0, 0, .5);width: 100%;height: 100%;}
.footer{color: #999;border: none;}
.footer a{color: #999;}
.footer dl dt,.footer dl dt a{font-size: 1.1rem;color: #fff;}
.mobbox{width: 309px;height: 617px;position: relative; text-align: center;padding-top: 20px;}
.mobbox video{width: 268px;height: 580px;}
.mobbox:before{content: "";background: url(../img/iphone.png) no-repeat;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.macvideo{width: 500px;height: 373px;position: relative;text-align: center;padding-top: 55px;}
.macvideo video{width: 380px;height: 220px;}
.macvideo:before{content: "";background: url(../img/mac.png) no-repeat;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.hollow{-webkit-text-fill-color: transparent;-webkit-text-stroke-width: 1px;}
.PageSection .section {padding: 4% 0 !important;}
.case-pro p{margin-top: 10px;line-height: 1.6;}
.case-pro h1{font-size: 28px;font-weight: bold;margin-top: 10px;}
.navbar .navbar-nav .nav-item{margin: 0rem 1.5rem;}
.header-top a img{width: .9rem;}
.navbar .navbar-toggler {color: #fff;}

.hvr-underline-from-left:before{height: 2px;}
.slibe-box1{background: url(../img/slibe-box1.jpg);}
.slibe-box2{background: url(../img/slibe-box2.jpg);}
.slibe-box3{background: url(../img/slibe-box3.jpg);}
.slibe-box4{background: url(../img/slibe-box4.jpg);}
div[class^="slibe-box"]{padding: 17.2rem 4rem 3rem !important;border-radius: 20px;}
div[class^="slibe-box"] p{display: inline-block;padding-right: 6rem;}
.btn-drakblue{
	--tblr-btn-border-color: transparent;
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-border-color: #3988ff;
  --tblr-btn-color: #fff;
  --tblr-btn-bg: #3988ff;
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: #3988ff;
  --tblr-btn-active-color: #fff;
  --tblr-btn-active-bg: #3988ff;
}
.swiper-index{position: relative;padding: 0 3rem;}
.swiper-index .icon {--tblr-icon-size: 3.25rem;}
.swiper-index .swiper-button-next{right: var(--swiper-navigation-sides-offset, -22px);}
.swiper-index .swiper-button-prev{left: var(--swiper-navigation-sides-offset, -17px);}
.swiper-button-next, .swiper-button-prev{width: calc(var(--swiper-navigation-size) / 30* 27);}
.index-ico-btn{border: 1px solid #19d3e0;border-radius: 20px; width: 40px;height: 40px;display: flex;justify-content: center;align-items: center; background-color: rgb(29 27 27 / 50%);}

.swiper-index a:hover{color: #fff !important;background: #4299e1;}


.fgui .col-md-3:nth-child(even){background: #e9eff3;}
.fgui a:hover{color: #fff !important;background: #4299e1;}
.hvr-sweep-to-bottom:before{background: #00000073 !important;}


@media(min-width:768px){
	.banner .col-md-7 .mt-md-4{margin-top: 3rem !important;}
	.banner .col-md-7 .mt-md-4 .icontxt{margin-top: 7px;display: inline-block;}
	.banner .col-md-7 .col-12 a{font-size: 16px !important;padding: .5rem 2.4rem!important;}
}


@media (max-width:768px){
	.banner{height: 40vh;}
	.banner .carousel-control-next, .banner .carousel-control-prev{width: 5%;}
	.banner .carousel-caption{left: 5%;right: 5%;}
	.banner .carousel-caption h2{font-size: 1.5rem;}
	.banner .carousel-caption .fa-3x{font-size: 2em;}
	.swiper-index .swiper-button-next{right: var(--swiper-navigation-sides-offset, -7px);}
	.swiper-index .swiper-button-prev{left: var(--swiper-navigation-sides-offset, -3px);}
	div[class^="slibe-box"] p {padding-right: 0;}
	div[class^="slibe-box"] {padding: 8rem 2rem 3rem !important;}
}
