*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: none;
        }
        body{
            overflow-x: hidden;
            font-family: Arial, Helvetica, sans-serif;
        }
        .swiper-container {
            width: 100%;
            height: 100vh;
        }
        header{
            position: fixed;
            top: 0;
            left: 0;
            width: 640px;
            height: 100px;
            background-color: #41B3A3;
            z-index: 9;
            
        }
        
        header .logo {
                float: left;
                margin: 30px 0 0 70px;
                text-decoration: none;
                color: #FFF;
                text-transform: uppercase;
        }
        header ul li{
            display: inline-block;
            margin: 30px 20px;
        }
        
        header ul li a{
            color: #FFF;
            text-decoration: none;
            font-weight: 500;
        }
        

header ul li i{
  font-size: 20px;
}

        header ul li::before{
   content: "";
   position: absolute;
   height: 80%;
   width: 0;
   background-color: #C38D9E;
   right: 0;
   z-index: -1;
   top: 60%;
   transition: all 0.4s;
}
header ul li::after{
   content: "";
   position: absolute;
   height: 80%;
   width: 0;
   background-color: #C38D9E;
   left: 0;
   z-index: -1;
   bottom: 0;
   transition: all 0.5s;
}
header ul li a::before{
   position: absolute;
   content: "";
   height: 80%;
   width: 0;
   background-color: #C38D9E;
   bottom: 66.66%;
   left: 0;
   transition: all 0.5s;
   z-index: -1;
}
li:hover:before,
li:hover::after,
li:hover a::before{
   width: 100%;
}

        .slide-left{
            float: left;
            background-color: #fff;
            position: relative;
            margin-top: 100px;
            width: 640px;
            height: 100%;
            padding: 100px;
            z-index: 99;
        }
        .slide-left h6{
            font-size: 28px;
            font-weight: 600;
        }
        .slide-left h1{
            font-size: 50px;
            font-weight: 700;
            color: #272643;
        }
        .slide-left p{
            font-size: 16px;
            line-height: 28px;
        }
        .slide-left a{
            position: relative;
            display: inline-block;
            margin-top: 40px;
            font-size: 16px;
            font-weight: 600;
            color: #272643;
            text-decoration: none;
        }
        .slide-left a::before{
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            background: #272643;
            bottom: 0;
        }
        .slide-right{
            float: left;
            margin-left: -88px;
            width: calc(100% - 750px);
        }
        .swiper-button-prev::after,
        .swiper-button-next::after{
            display: none;
        }
        .swiper-button-prev,
        .swiper-button-next{
            top: inherit;
            bottom: 28px;
        }
        .swiper-button-prev{
            bottom: 20px;
            left: 476px;
        }
        .swiper-button-next{
            
            left: 576px;
        }