html,
body,
main {
    width: 100%;
    height: 100%;
    min-width: 1400px;
    /* background-color: #228dffb6; */
    /* font-family: "PingFangSC", "Microsoft Yahei", "simsun", "arial", "tahoma"; */
}

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;

}



.banner {
    width: 100%;
    min-width: 1300px;
    height: 540px;
    /* padding: 0 360px; */
    background-image: url(../dev-img/bg1.png);
    background-size: cover;
    background-position: center;
    position: relative;

}
.logo{
    width: 147px;
    position: absolute;
    top: 38px;
    left: 100px;
}
/* .banner-img{
    margin: auto;
} */
.title {
    width: 1200px;
    font-weight: bold;
    font-size: 40px;
    color: #011139;
    text-align: center;
}

.title-w {
    font-weight: bold;
    font-size: 40px;
    color: #FFFFFF;
    text-align: center;
}

.title-b {
    color: #004CFE;
}

.s1 {
    width: 100%;
    padding: 50px 360px;
}

.s1-content {
    width: 1200px;
    padding: 50px 0 0;
    display: grid;
    grid-template: repeat(2, 1fr)/repeat(2, 1fr);
    gap: 15px;
}

.s1-item {
    width: 590px;
    height: 250px;
    padding: 45px 35px;
    background-image: url(../dev-img/s1-item-bg.png);
    background-size: cover;
    border-radius: 12px 12px 12px 12px;
    position: relative;
}
.s1-triangle{
    width: 15px;
    margin-right: 10px;
}
.s1-title{
    font-weight: bold;
font-size: 26px;
color: #011139;
line-height: 26px;
/* position: relative; */
}
.s1-img{
    position: absolute;
    top: 12px;
    right: 30px;
    width: 110px;
}
.s1-text{
    font-size: 18px;
color: #FFFFFF;
line-height: 26px;
margin-top: 50px;
}
.s1-tips{
    font-size: 12px;
color: #FFFFFF;
line-height: 26px;
position:absolute;
bottom: 15px;
left: 95px;
}
/* .s1-num {
    font-size: 54px;
    color: #004CFE;
    line-height: 71px;
    text-align: left;
    background: radial-gradient(0deg, #004CFF 0%, #0045E7 100%);
}

.s1-line {
    width: 299px;
    height: 1px;
    background: #DDE6F8;
    border: 1px solid #DDE6F8;
}

.s1-text {
    font-size: 24px;
    color: #011139;
    line-height: 30px;
} */

.s1-item:hover {
    /* background-image: url(../dev-img/s1-img-b.png); */
    transform: translateY(-10px);
}

/* .s1-item:hover .s1-num {
    color: #FFFFFF;
}

.s1-item:hover .s1-line {
    background: #145AFF;
    border: 1px solid #145AFF;
}

.s1-item:hover .s1-text {
    color: #FFFFFF;
} */

.s2 {
    padding: 80px 0 30px;
    background-image: url(../dev-img/s2-bg.png);
    background-size: cover;
    /* border: 1px solid red; */
}
.s2-content{
    padding: 70px 0;
    /* border: 1px solid red; */
}
.s2-c-img{
    width: 1256px;
}
/* .s2-content {
    display: grid;
    grid-template: repeat(2, 1fr)/repeat(2, 1fr);
    width: 1200px;
    padding: 50px 0 0;
    gap: 9px;
}

.s2-item {
    width: 601px;
    height: 258px;
    box-shadow: 2px 0px 0px 0px #FFFFFF, inset 2px 0px 13px 0px #FFFFFF;
    border-radius: 12px 12px 12px 12px;
    background-image: url(../dev-img/s2-item-bg.png);
    background-size: cover;
    padding: 0 36px;
    gap: 20px;
    position: relative;
}

.s2-title {
    font-weight: bold;
    font-size: 20px;
    color: #011139;
    line-height: 26px;
    margin-bottom: 10px;
}

.s2-text {
    width: 333px;
    font-size: 18px;
    color: #011139;
    line-height: 26px;
    text-align: left;
}

.s2-item:hover {
    background-image: url(../dev-img/s2-item-bg-h.png);
    transform: translateY(-10px);

}

.s2-tip {
    width: 100%;
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 12px;
    color: #7A89AE;
    line-height: 26px;
} */

.s3 {
    padding: 50px 0 0;
}
.s3-img{
    width: 220px;
    border-radius: 0;
}
.s3-content {
    display: grid;
    grid-template: repeat(2, 1fr)/repeat(2, 1fr);
    width: 1200px;
    gap: 20px;
    margin: 65px 0;
}

.s3-item {
    width: 590px;
    height: 200px;
    padding: 15px;
    gap: 20px;
background: #FFFFFF;
box-shadow: 2px 3px 10px 0px #b0c3f1;
border-radius: 12px 12px 12px 12px;
}


.s3-title {
   font-weight: bold;
font-size: 20px;
color: #004CFE;
line-height: 26px;
}
.s3-line{
    width: 100%;
height: 1px;
background: #DBDFEF;
    margin: 10px 0;

}
.s3-text {
    font-size: 18px;
color: #011139;
line-height: 26px;
}

.s3-item:hover {
    transform: translateY(-10px);
}


.s4 {
    background-color: #fff;
    /* background-image: url(../dev-img/s4-bg1.png);
    background-size: cover; */
}
.s4-container{
    width: 100%;
    padding: 80px 0;
    margin-top: 65px;
        background-image: url(../dev-img/s4-bg1.png);
    background-size: cover;
    background-position: center;

}
.s4-content {
    width: fit-content;
    /* padding:113px 0 0; */
    position: relative;
    /* border: 1px solid #FFFFFF; */
}

.s4-line {
    width: 46px;
    height: 4px;
    background: #FFFFFF;
    border-radius: 2px 2px 2px 2px;
    margin-bottom: 20px;
}

.item-c {
    display: none;
}

.s4-item-title {
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 26px;
    margin-bottom: 5px;
}

.s4-item-text {
    font-size: 18px;
    color: #FFFFFF;
    line-height: 26px;
}

.s4-tab-group {
    gap: 5px;
}

.s4-tab {
    width: 165px;
    height: 149px;
    /* padding: 10px 8px 0 28px; */
    position: relative;
    border-radius: 12px 12px 12px 12px;
    background: linear-gradient(to right top, #E1EBFE 0%, #ffffff 100%);
}

.s4-i-img {
    position: absolute;
    right: 8px;
    top: 10px;
    width: 65px;
}

.s4-tab-text {
    font-size: 18px;
    color: #011139;
    line-height: 26px;
}

.s4-tab:hover {
    transform: translateY(-10px);
}

.s4-tab.active {
    background: #0030FF;
}

.s4-tab.active .s4-tab-text {
    font-weight: bold;
    color: #FFFFFF;
}

.item-c.active {
    display: block;
    margin-bottom: 80px;
}
.new{
    padding: 59px 0 0;
}
.new-img{
    width: 1127px;
}
.s5 {
    width: 100%;
    /* height: 981px; */
    padding: 50px 0 55px;
    background-image: url(../dev-img/s5-bg3.png);
    /* background-image: url(../dev-img/s5-bg.png); */
    background-size: cover;
}
.s5-c-img{
    width: 1334px;
    margin-top: 45px;
}
.s5-content {
    width: 100%;
    height: 100%;
    padding-top: 40px;
    position: relative;
}

.s5-item {
    width: 220px;
    /* border: 1px solid red; */
    position: absolute;
    /* top: 246px;
    left: 629px; */
}

.s5-title {
    width: fit-content;
    font-size: 18px;
    color: #011139;
    text-align: center;
    padding: 10px 20px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 6px 0px 18px 0px #D8E1F1;
    position: absolute;
    bottom: -18px;
}

.s5-text {
    width: 305px;
    height: fit-content;
    padding: 25px;
    font-size: 18px;
    color: #011139;
    line-height: 26px;
    background-image: url(../dev-img/s5-item-bg.png);
    background-size: cover;
    border-radius: 20px;
    display: none;
}

.s5-text-t {
    font-weight: bold;
    font-size: 20px;
    color: #0030FF;
    margin-bottom: 8px;
}

.s5-item1 {
    transform: translate(-260px, -140px);
}

.s5-item2 {
    transform: translate(-265px, 140px);
}

.s5-item3 {
    transform: translate(0, 300px);
}

.s5-item4 {
    transform: translate(265px, 140px);
}

.s5-item5 {
    transform: translate(280px, -140px);
}

.s5-item6 {
    transform: translate(0, -330px);
}

.s5-item1:hover {
    transform: translate(-260px, -150px);
}

.s5-item2:hover {
    transform: translate(-265px, 130px);
}

.s5-item3:hover {
    transform: translate(0, 290px);
}

.s5-item4:hover {
    transform: translate(265px, 130px);
}

.s5-item5:hover {
    transform: translate(280px, -160px);
}

.s5-item6:hover {
    transform: translate(0, -350px);
}

.s5-item.active .s5-title {
    background: #0030FF;
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
}

.s5-item.active .s5-text {
    display: block;
}

.s5-text1 {
    position: absolute;
    top: 0;
    left: -285px;
    background-image: url(../dev-img/s5-item-bg.png);

}

.s5-text3 {
    position: absolute;
    top: 0;

    right: -310px;
    background-image: url(../dev-img/s5-item-bg.png);

}

.s6 {
    /* height: 900px; */
    padding: 44px 0 60px;
}

.s6-tab-box {
    padding: 38px 0 45px;
    gap: 19px;
}

.s6-tab {
    padding: 16px 51px;
    background: #F5F9FF;
    border-radius: 8px 8px 8px 8px;
    font-size: 20px;
    color: #46474B;
    text-align: center;
}

.s6-tab:hover {
    transform: translateY(-10px);
}

.s6-tab.active {
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;
    background: radial-gradient(0% 0% at 0% 0%, #004CFF 0%, #0045E7 100%);
    border-radius: 8px 8px 8px 8px;
}
.s6-content-box{
    height: 502px;
}
.s6-content {
    height: 502px;
    /* border: 1px solid #f53d05; */
    width: 1200px;
    position: relative;
    gap: 20px;
    display: none;
}

.s6-content.active {
    display: flex;
}

.s6-c-img {
    width: 578px;
    height: 464px;
}

.s6-img-text {
    position: absolute;
    position: absolute;
    bottom: 5px;
    left: 10px;

}

.triangle-w {
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-left: 16px solid white;
}

.s6-i-t {
    font-weight: bold;
    font-size: 26px;
    color: #FFFFFF;
}

.s6-i-t2 {
    /* font-family: MicrosoftYaHeiLight; */
    font-size: 24px;
    color: #4A7FF8;
}

.s6-item {
    width: 600px;
    height: 125px;
    padding: 20px 30px 20px;
    background: linear-gradient(to bottom, #F5F8FE 0%, #FFFFFF 100%);
}

.s6-d-img {
    /* border: 1px solid #0e62f3; */
    margin-right: 5px;
    vertical-align: text-top;

}

.s6-d-title {
    /* border: 1px solid #0e62f3; */
    font-weight: bold;
    font-size: 18px;
    color: #011139;
}

.s6-d-text {
    font-size: 18px;
    color: #011139;
    /* line-height: 26px; */
    padding: 8px 0 0;
}

.s7 {
    padding: 50px 0;
    background-image: url(../dev-img/s7-bg.png);
    background-size: cover;
}

.s7-content {
    width: 1200px;
    gap: 20px;

}

.s7-title {
    font-weight: bold;
    font-size: 40px;
    color: #004CFF;
    text-align: center;
}

.s7-subtitle {
    font-size: 26px;
    color: #011139;
    text-align: center;
}

.s7-text-box {
    margin-top: 35px;
    gap: 15px;
}

.s7-item {
    width: 280px;
    /* height: 126px; */
    padding: 18px;
    background: #EEF3FE;
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #FFFFFF;
    font-size: 18px;
    color: #011139;
    line-height: 24px;
}

.s7-item:hover {
    transform: translateY(-10px);
}

.s8 {
    padding: 64px 0 55px;
}

.s8-content {
    width: 1200px;
    gap: 20px;
    padding-top: 50px;
}

.s8-left {
    display: grid;
    gap: 6px;
    grid-template: repeat(4, 1fr)/repeat(2, 1fr);
}

.s8-type {
    padding: 35px 15px;
    width: 165px;
    height: 149px;
    background: #F5F8FE;
    border-radius: 12px 12px 12px 12px;
}

.s8-type.active {
    background: #0045E7;
}

.s8-type-t {
    font-size: 18px;
    color: #011139;
    text-align: center;
    margin-top: 8px;
}

.s8-type.active .s8-type-t {
    /* font-weight: bold; */
    /* font-size: 18px; */
    color: #FFFFFF;
}

.s8-right-container {
    width: 850px;
    height: 620px;
    padding: 17px 15px;
    /* background-image: linear-gradient(to top, #004CFF 0%, #0045E7 100%); */
    background-color: #0045E7;
    border-radius: 12px 12px 12px;
    /* overflow-y: auto;
overflow-x: hidden; */
    display: none;
}

.s8-right-container.active {
    display: block;
}

.scroll-container {
    width: 835px;
    height: 603px;
    background-color: transparent;
    /* border: 1px solid #f9600d; */
    overflow-y: auto;
    overflow-x: hidden;

}

.s8-right {
    width: 817px;
    height: fit-content;
    padding: 30px 25px 0;
    background: #FFFFFF;
    border-radius: 12px 12px 0px 0px;
    background-image: url(../dev-img/s8-content.png);
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;
    /* border-bottom: 15px solid #0045E7; */
}

.s8-r-title {
    width: 100%;
    height: fit-content;
    font-weight: bold;
    font-size: 26px;
    color: #011139;
    line-height: 28px;
    /* border: 1px solid #ec962d; */
}

.s8-r-title-b {
    font-weight: bold;
    font-size: 26px;
    color: #0045E7;
    line-height: 28px;
}

.triangle {
    float: right;
    margin-top: 10px;
}

.s8-r-content {
    margin-top: 20px;
    padding: 20px 0 0;
    width: 100%;
    border-top: 1px solid #E4EAF7;
}

.s8-c-text {
    font-size: 16px;
    color: #011139;
    line-height: 28px;
    margin-bottom: 20px;
}

.s8-module {
    margin: 20px 0;
    width: 100%;
    padding-bottom: 18px;
    color: #011139;
    line-height: 28px;
    text-align: left;
    background: #F5F8FE;
    border-radius: 4px 4px 0px 0px;
}

.s8-module-title {
    width: 100%;
    padding: 10px 15px;
    font-size: 18px;
    background: #E4ECFF;
    border-radius: 4px 4px 0px 0px;
}

.s8-module-text {
    margin: 0 15px 23px 32px;
    padding: 20px;
    position: relative;
    border-bottom: 1px solid #E4EAF7;
    padding-left: 10px;
    /* 预留编号位置 */
}

.s8-m-t-p {
    position: relative;
}

.s8-m-t-p::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    /* 垂直居中 */
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #0950FE;
}

.s8-m-t-d::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    /* 垂直居中 */
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #000000;
}

.s8-m-t-d {
    position: relative;
    padding-left: 0.8rem;
    /* 给编号留出空间 */
}

.s8-m-case {
    margin: 0 43px 0;
    gap: 10px;
}

.s8-m-li {
    width: 107px;
    height: 30px;
    background: #FFFFFF;

    font-size: 16px;
    color: #0950FE;
    line-height: 28px;
    text-align: center;
}

.s8-m-name {
    font-size: 16px;
    color: #011139;
    line-height: 28px;
}

.scroll-container::-webkit-scrollbar {
    width: 4px;
    /* 垂直滚动条宽度（仅需这里设置） */
    height: 500px !important;
    /* 水平滚动条高度：height: 4px; （如需可添加） */
    border: 1px solid red;
}

/* 滚动条轨道（背景） */
.scroll-container::-webkit-scrollbar-track {
    background: #F8FBFF;
    border-radius: 2px 2px 2px 2px;
}

/* 滚动条滑块（可拖动部分） */
.scroll-container::-webkit-scrollbar-thumb {
    background: #96B6E4;
    border-radius: 2px 2px 2px 2px;
    /* transition: background 0.3s; hover 过渡效果 */
}

.s9 {
    background-image: url(../dev-img/s9-bg.png);
    background-size: cover;
    padding: 64px 0 0;

}

.s9-content {
    width: 1400px;
    gap: 20px;
    margin-top: 50px;
}

.s9 .detail-item {
    width: 370px;
    height: fit-content;
    padding: 30px 23px;
    gap: 10px;
    background: #3F4D6D;
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #485778;
    box-sizing: border-box;
}

.s9 .detail-item:hover {
    transform: translateY(-10px);
}

.teacher-img {
    width: 362px;
    height: 439px;
}

.s9-d-titlt {
    font-weight: 400;
    font-size: 26px;
    color: #D0DEFF;
    line-height: 24px;
    margin-left: 8px;
}

.s9-d-text {
    /* width: 320px; */
    font-size: 18px;
    color: #D0DEFF;
    line-height: 24px;
}

.s9 .detail-item2 {
    width: 750px;
    height: 126px;
    gap: 10px;
    padding: 0 23px;
    margin-top: 15px;
    background: #3F4D6D;
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #485778;
}

.s9 .detail-item2:hover {
    transform: translateY(-10px);
}

.carousel-container {
    width: 1350px;
    height: fit-content;
    padding-bottom: 30px;
    overflow: hidden;
    /* border: 1px solid #ec1ae8; */
    position: relative;
}

.s9-swiper {
    width: 1350px;
    /* border: 1px solid #c33927; */
    overflow: hidden;
}

.s9-item-box {
    width: fit-content;
    height: fit-content;
    transition: transform 0.3s ease-in-out;

    /* border:1px solid #ecd31a; */
}

.swiper-slide {
    /* width: 1150px; */
    height: fit-content;
    /* border: 1px solid #1ac2ec; */
    padding: 0 115px;
    gap: 10px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  content: none !important; /* 清空伪元素内容，彻底移除默认箭头 */
}

/* 箭头按钮样式（关键修复） */
        .swiper-button-prev, .swiper-button-next {
            all: unset;
            position: absolute;
            top: 50%;
            width: 73px !important;
            height: 140px !important;
            margin-top: -25px; /* 垂直居中 */
            z-index: 10;
            cursor: pointer;
            background-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0;
            color: transparent;
        }
        .swiper-button-prev { left: 10px; } /* 左箭头位置 */
        .swiper-button-next { right: 10px; } /* 右箭头位置 */
/* 圆点指示器基础样式 */

/* 修正指示器容器样式 */
.swiper-pagination {
    /* 移除冲突的 bottom 属性，仅保留垂直间距 */
    margin: 30px 0 0; 
    text-align: center; /* 确保圆点居中 */
    background-color: transparent; /* 去掉白色背景，避免遮挡 */
    position: relative; /* 确保在正常流中显示 */
    z-index: 10; /* 避免被轮播内容遮挡 */
}

/* 修正圆点样式，确保横向排列 */
.my-bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #516081; /* 未激活颜色 */
    margin: 0 6px; /* 圆点间距 */
    transition: all 0.3s;
    display: inline-block !important; /* 强制横向排列（关键） */
}

/* 激活状态保持不变 */
.my-bullet-active {
    background: #fff;
    opacity: 1;
    transform: scale(1.2);
}


.s10 {
    background-image: url(../dev-img/s10-bg.png);
    background-size: cover;
    padding: 68px 0;
}

.s10-tip {
    font-size: 14px;
    color: #011139;
    text-align: center;
    margin-top: 5px;
}

.s10-content {
    margin-top: 50px;
    width: 1200px;
    height: 510px;
    gap: 20px;
    background-image: linear-gradient(to right bottom, #DBE8FB 0%, #F2F8FF 100%);
    box-shadow: 2px 0px 0px 0px #EBF1FD, 0px 0px 16px 0px #D6E2FA;
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #FFFFFF;
}

.s10-left {
    width: 203px;
    height: fit-content;
    gap: 5px;
    /* border: 1px solid #ffffff; */
}

.s10-l-item {
    width: 203px;
    height: 74px;
    /* border: 1px solid #ffffff; */
    padding: 0 13px;
    font-size: 18px;
    color: #27282B;
    border-radius: 8px 8px 8px 8px;
    position: relative;
}

.s10-type-img {
    margin-right: 15px;
}

.s10-more-img {
    position: absolute;
    right: 10px;
}

.s10-l-item.active {
    background-image: linear-gradient(to right bottom, #004CFF 0%, #0045E7 100%);
}

.s10-l-item.active .s10-type {
    color: #FFFFFF;
}

.s10-right {
    width: 937px;
    height: 480px;
    background: #FFFFFF;
    box-shadow: 0px 0px 16px 0px #D6E2FA;
    border-radius: 12px 12px 12px 12px;
    padding: 15px 20px;
    display: none;
}

.s10-r-top {
    width: 906px;
    height: 174px;
    padding: 25px;
}

.s10-top1 {
    background-image: url(../dev-img/s10-img1.png);
    background-size: cover;

}

.s10-top2 {
    background-image: url(../dev-img/s10-img2.png);
    background-size: cover;

}

.s10-top3 {
    background-image: url(../dev-img/s10-img3.png);
    background-size: cover;

}

.s10-top4 {
    background-image: url(../dev-img/s10-img4.png);
    background-size: cover;

}

.s10-top5 {
    background-image: url(../dev-img/s10-img5.png);
    background-size: cover;
}

.s10-top6 {
    background-image: url(../dev-img/s10-img6.png);
    background-size: cover;
}

.s10-c-title {
    font-weight: bold;
    font-size: 22px;
    color: #011139;
    line-height: 28px;
    margin: 15px 0;
}

.s10-c-title::before {
    content: url("../dev-img/s10-t.png");
    /* 替换为你的图片路径 */
    margin-right: 8px;
    /* 图片与文字的间距 */
    vertical-align: middle;
    /* 图片与文字垂直居中对齐 */
}

.s10-r-title {
    font-weight: bold;
    font-size: 26px;
    color: #011139;
    line-height: 28px;
}

.s10-c-text {
    font-size: 20px;
    color: #011139;
    line-height: 28px;
    margin-top: 5px;
}

.s10-c-type {
    padding: 5px 10px;
    background-color: #fff;
    font-size: 16px;
    color: #004CFF;
    text-align: center;
    margin-top: 15px;
}

.s10-item {
    width: 287px;
    height: 210px;
    padding: 15px 0 0 15px;
}

.s10-item1 {
    background-image: url(../dev-img/s10-item1.png);
    background-size: cover;
}

.s10-item2 {
    background-image: url(../dev-img/s10-item2.png);
    background-size: cover;

}

.s10-item3 {
    background-image: url(../dev-img/s10-item3.png);
    background-size: cover;

}

.s10-i-title {
    padding: 10px;
    /* background-color: #fff; */
    background-image: linear-gradient(to right, #ffffff 0%, transparent 100%);
    font-weight: bold;
    font-size: 20px;
    color: #2F6B4F;
    line-height: 24px;
}

.s10-i-title2 {
    color: #A85035;
}

.s10-i-title3 {
    color: #AD3434;
}

.s10-i-text {
    font-size: 18px;
    color: #000000;
    line-height: 28px;
    padding: 10px 10px;
}

.s10-right.active {
    display: block;
}
.s11{
    padding: 50px 0;
}
.s11-img{
    width: 1230px;
    margin-top: 30px;
}
.rgt-slide {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
}