#index{}
#index .banner{width:100%;}
#index .banner .text{position:relative;margin-top:4.5rem;width:100%;text-align:center;overflow:hidden;}
#index .banner .text h1{margin-top:4rem;}
#index .banner .text p{margin-top:1.5rem;font-size:1.5rem;}
#index .banner .text a{margin-top:3rem;}
#index .banner .show{position:relative;margin-top:5rem;width:100%;height:34rem;}
#index .banner .show::before{content: "";display:inline-block;position:absolute;bottom:0;left:0;width:100%;height:6rem;background-color:#3899ec;}
#index .banner .show .image{position:relative;width:100%;height:34rem;}
#index .banner .show .image .img1{position:absolute;top:0;left:50%;margin-left:-32rem;width:64rem;height:34rem;background:url("../../images/home/index/banner-bg.png") center center no-repeat;}
#index .banner .show .image .img1 img{margin:1px 0 0 6rem;width:52rem;height:27.8125rem;border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;}
#index .banner .show .image .img2{position:absolute;top:0;left:50%;margin-left:calc(-44rem + -2rem);width:18rem;height:27rem;text-align:center;overflow:hidden;}
#index .banner .show .image .img2 img{display:inline-block;max-width:100%;max-height:100%;}
#index .banner .show .image .img3{position:absolute;top:0;right:50%;margin-right:calc(-44rem + -2rem);width:18rem;height:27rem;text-align:center;overflow:hidden;}
#index .banner .show .image .img3 img{display:inline-block;max-width:100%;max-height:100%;}
#index .banner .show .code{position:absolute;bottom:1rem;left:50%;margin-left:-26rem;width:52rem;height:5rem;z-index:1;}
#index .banner .show .code pre#code1{display:block;margin-top:.625rem;padding:0 1rem;line-height:1.25rem;font-size:.55rem;color:#fff;white-space:pre-wrap;word-break:break-all;overflow:hidden;}
#index .banner .show .code pre#code2{display:none;margin-top:0;padding:0 1rem;line-height:1.875rem;font-size:.5rem;color:#fff;white-space:pre-wrap;word-break:break-all;overflow:hidden;}
#index .about{position:relative;margin-top:-1px;padding-top:3rem;width:100%;height:40rem;background-color:#3899ec;clip-path:polygon(0 0,100% 0,100% 85%,75% 100%,0 80%);overflow:hidden;}
#index .about .text{}
#index .about .text .profile{padding-top:3rem;color:#fff;}
#index .about .text .profile h2{}
#index .about .text .profile p{padding-top:1.5rem;line-height:2rem;}
#index .about .text .data{padding:1.5rem 0;color:#fff;overflow:hidden;}
#index .about .text .data li{float:left;margin-right:3rem;}
#index .about .text .data li span{display:block;font-size:3rem;}
#index .about .text .data li p{display:block;line-height:1.5rem;}
#index .about .image{text-align:right;}
#index .product{position:relative;width:100%;height:37.5rem;overflow:hidden;}
#index .product .image{padding-top:3rem;}
#index .product .image img{width:100%;}
#index .product .text{padding-top:3rem;padding-left:6rem;}
#index .product .text h2{}
#index .product .text .profile{padding-top:2rem;}
#index .product .text .profile li{margin-top:1rem;}
#index .product .text .profile li:first-child{margin-top:0;}
#index .product .text .profile li p.title{line-height:1.5rem;}
#index .product .text .profile li p.desc{line-height:1.5rem;font-size:.85rem;color:#5d6c82;}
#index .product .text a.button{margin-top:2rem;}
#index .service{position:relative;width:100%;height:37.5rem;background-color:#3899ec;clip-path:polygon(0 0, 100% 0, 100% 85%, 25% 100%, 0 80%);}
#index .service::before{content:"";position:absolute;top:0;left:0;width:100%;height:12.5rem;background-color:#fff;clip-path:polygon(0 0, 100% 0, 100% 100%, 0 0);overflow:hidden;}
#index .service .container{position:relative;height:100%;}
#index .service .slide-left{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;z-index:1;}
#index .service .slide-left .slide-item{position:absolute;left:-125rem;transition:left 0.9s cubic-bezier(0.555, -0.315, 0.485, 1.36);}
#index .service .slide-left .slide-item.active{left:0}
#index .service .slide-right{position:absolute;right:0;width:50%;height:100%;overflow:hidden;}
#index .service .slide-right .slide-item{position:absolute;right:-125rem;bottom:0;transition:right 0.9s cubic-bezier(0.555, -0.315, 0.485, 1.36);}
#index .service .slide-right .slide-item.active{right:0}
#index .service .slide-item{}
#index .service .slide-item h2{margin-top:9rem;color:#fff;}
#index .service .slide-item p{display:block;margin-top:1rem;line-height:2rem;color:#fff;}
#index .service .slide-item .link{margin-top:1rem;}
#index .service .slide-item .link a{display:block;line-height:2rem;color:#fff;}
#index .service .slide-item a.button{margin-top:2rem;}
#index .service .slide-indicator{position:absolute;bottom:3rem;left:9rem;width:auto;height:2rem;line-height:2rem;color:#fff;}
#index .service .slide-indicator a{display:inline-block;color:#fff;}
#index .service .slide-indicator a.prev{}
#index .service .slide-indicator span.counter{}
#index .service .slide-indicator a.next{}
#index .solution{position:relative;width:100%;height:37.5rem;}
#index .solution .carousel{height:37.5rem;}
#index .solution .carousel .carousel-inner{}
#index .solution .carousel .carousel-inner .carousel-item{}
#index .solution .carousel .carousel-inner .carousel-item .image{line-height:37.5rem;}
#index .solution .carousel .carousel-inner .carousel-item .image img{display:inline-block;max-width:100%;max-height:100%;}
#index .solution .carousel .carousel-inner .carousel-item .text{}
#index .solution .carousel .carousel-inner .carousel-item .text h2{margin-top:3rem;}
#index .solution .carousel .carousel-inner .carousel-item .text ul{margin-top:1.5rem}
#index .solution .carousel .carousel-inner .carousel-item .text ul li{position:relative;padding-left:1.25rem;line-height:2.5rem;color:#3b3b3b;}
#index .solution .carousel .carousel-inner .carousel-item .text ul li::after{content:"";position:absolute;top:.95rem;left:0;width:0.6rem;height:0.6rem;background:#3899ec;border:0;border-radius:50%;}
#index .solution .carousel .carousel-inner .carousel-item .text a.button{margin-top:2rem;}
.carousel-control-prev,.carousel-control-next{position:absolute;top:50%;bottom:auto;width:3.5rem;height:3.5rem;border:solid 0.125rem var(--bs-body-color);border-radius:50%;opacity:1;}
.carousel-control-prev{left:-5.5rem;}
.carousel-control-next{right:-5.5rem;}
.carousel-control-prev::before,.carousel-control-next::before{content:'';display:block;position:absolute;top:50%;left:50%;width:1rem;height:1rem;border-style:solid;border-color:var(--bs-body-color);border-width:0.125rem 0.125rem 0 0;transform-origin:50% 50%;}
.carousel-control-prev::before {margin:-0.5rem 0 0 -0.9rem;transform: rotate(-135deg);}
.carousel-control-next::before {margin:-0.5rem 0 0 -0.25rem;transform: rotate(45deg);}
.carousel-control-prev:after,.carousel-control-next:after{content:'';display:block;position:absolute;top:50%;left:50%;width:2rem;height:0;border-style:solid;border-width:0.125rem 0 0;border-color:var(--bs-body-color);transform-origin:50% 50%;}
.carousel-control-prev:after{transform:translate(-0.95rem,-1px);}
.carousel-control-next:after{transform: translate(-1.2rem,-1px);}

@media only screen and (max-width:768px) {
    #index .banner .text{margin-top:3rem;padding:0 1rem;}
    #index .banner .text h1{margin-top:3rem;}
    #index .banner .text p{font-size:1rem;}
    #index .banner .text a{min-width:8rem;height:2.5rem;line-height:2.5rem;border-radius:1.5rem;font-size:1rem;}
    #index .banner .show{margin-top:3rem;height:12.75rem;}
    #index .banner .show::before{height:2.25rem;}
    #index .banner .show .image{height:12.75rem;}
    #index .banner .show .image .img1{margin-left:-12rem;width:24rem;height:12.75rem;background-size:contain;}
    #index .banner .show .image .img1 img{margin:1px 0 0 2.25rem;width:19.5rem;height:10.4375rem;}
    #index .banner .show .image .img2{display:none;}
    #index .banner .show .image .img3{display:none;}
    #index .banner .show .code{bottom:0.375rem;margin-left:-9.75rem;width:19.5rem;height:1.875rem;overflow:hidden;z-index:1;}
    #index .banner .show .code pre#code1{display:none;}
    #index .banner .show .code pre#code2{display:block;}
    #index .about{padding-top:0;height:48rem;clip-path:polygon(0 0,100% 0,100% 95%,60% 100%,0 90%);}
    #index .about .text .profile h2{font-size:1.5rem;}
    #index .about .text .profile p{padding-top:1rem;font-size:0.875rem;}
    #index .about .text .data li{margin-right:0;width:33.3%;}
    #index .about .text .data li span{font-size:2rem;}
    #index .about .text .data li p{font-size:0.875rem;}
    #index .about .image img{width:100%;}
    #index .product{height:37.5rem;}
    #index .product .image{padding-top:2rem;}
    #index .product .text{padding:2rem 0.75rem;}
    #index .product .text .profile{padding-top:1rem;}
    #index .product .text .profile li p.title{line-height:1.5rem;}
    #index .service{height:37.5rem;clip-path:polygon(0 0, 100% 0, 100% 90%, 40% 100%, 0 95%);}
    #index .service::before{display:none;}
    #index .service .slide-left{width:100%;}
    #index .service .slide-left .slide-item{padding:0 0.75rem;}
    #index .service .slide-right{width:100%;opacity:0.1;}
    #index .service .slide-indicator{bottom:2rem;left:8rem;}
    #index .service .slide-item h2{margin-top:4rem;}
    #index .solution{}
    #index .solution .carousel .carousel-inner .carousel-item .image{line-height:unset;}
    #index .solution .carousel .carousel-inner .carousel-item .text h2{margin-top:1rem;font-size:1.5rem;}
    #index .solution .carousel .carousel-inner .carousel-item .text ul{margin-top:1rem}
    .carousel-control-prev{left:0;}
    .carousel-control-next{right:0;}
}