body { overflow-x: hidden;}

/* loader-inner */
.loader-inner{width:100%;display:none;height:34px; background:#ff5400;position:absolute;top:0px;border-radius: 0px;}
.ball-clip-rotate{width:25px;height:25px;margin:auto}
.ball-clip-rotate > i{background-color:#fff;width:100%;height:width:100%;border-radius:100%;margin:auto;-webkit-animation-fill-mode:both;animation-fill-mode:both;border:2px solid #fff;border-bottom-color:transparent;height:100%;width:100%;margin-top:4px;background:transparent !important;display:inline-block;-webkit-animation:rotate 0.75s 0s linear infinite;animation:rotate 0.75s 0s linear infinite;}
@keyframes rotate{0%{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);}
50%{-webkit-transform:rotate(180deg) scale(0.6);transform:rotate(180deg) scale(0.6);}
100%{-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1);}
}
@keyframes scale{30%{-webkit-transform:scale(0.3);transform:scale(0.3);}
100%{-webkit-transform:scale(1);transform:scale(1);}
}
.ball-clip-rotate-pulse{position:relative;-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px);}
.ball-clip-rotate-pulse > i{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;top:0px;left:0px;border-radius:100%;}
.ball-clip-rotate-pulse > i:first-child{background:#fff;height:16px;width:16px;top:9px;left:9px;-webkit-animation:scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;}
.ball-clip-rotate-pulse > i:last-child{position:absolute;border:2px solid #fff;width:30px;height:30px;background:transparent;border:2px solid;border-color:#fff transparent #fff transparent;-webkit-animation:rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;-webkit-animation-duration:1s;animation-duration:1s;}
@keyframes rotate{0%{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);}
50%{-webkit-transform:rotate(180deg) scale(0.6);transform:rotate(180deg) scale(0.6);}
100%{-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1);}
}
.ball-clip-rotate-multiple{position:relative;}
.ball-clip-rotate-multiple > i{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;left:0px;top:0px;border:2px solid #fff;border-bottom-color:transparent;border-top-color:transparent;border-radius:100%;height:35px;width:35px;-webkit-animation:rotate 1s 0s ease-in-out infinite;animation:rotate 1s 0s ease-in-out infinite;}
.ball-clip-rotate-multiple > i:last-child{display:inline-block;top:10px;left:10px;width:15px;height:15px;-webkit-animation-duration:0.5s;animation-duration:0.5s;border-color:#fff transparent #fff transparent;-webkit-animation-direction:reverse;x-direction:reverse;}
@-webkit-keyframes ball-scale-ripple{0%{-webkit-transform:scale(0.1);transform:scale(0.1);opacity:1;}
70%{-webkit-transform:scale(1);transform:scale(1);opacity:0.7;}
100%{opacity:0.0;}
}
@keyframes ball-scale-ripple{0%{-webkit-transform:scale(0.1);transform:scale(0.1);opacity:1;}
70%{-webkit-transform:scale(1);transform:scale(1);opacity:0.7;}
100%{opacity:0.0;}
}
.loader-black{background:#fff}
.loader-black .ball-clip-rotate > i{border-radius:100%;margin:auto;-webkit-animation-fill-mode:both;animation-fill-mode:both;border:2px solid #333;border-bottom-color:transparent;height:100%;width:100%;margin-top:4px;background:transparent !important;display:inline-block;-webkit-animation:rotate 0.75s 0s linear infinite;animation:rotate 0.75s 0s linear infinite;}

.banner{text-align:center;height:260px;position: relative;}
.banner img{max-width:1699px}
.banner .banner-text{position: absolute;width: 100%;padding-top: 51px; line-height: 80px;}
.banner .text-big{color:#000;font-size: 50px;  font-family: sans-serif;font-weight: bold;padding: 20px;text-shadow: 0 -1px 0px #fff, 0 0 15px #fff, 0 0 11px rgb(255 255 255 / 100%);}
.banner .text-big span{color:#000cff}
.banner .text-small {text-align: center;color: #333; font-size: 26px;display: inline-block;  line-height: 56px; padding: 0px 32px;font-weight: bold; }

.b-small .banner-text{line-height: 67px}
.b-small .text-small{color:#000;font-size: 24px;text-shadow: 0px -1px 1px #ceedfb, -1px -1px 3px #e6f5fd, 1px 1px 0px rgb(231 246 253);}
.b-small .text-big{color:#1643c8;text-shadow: 3px 2px 8px #e8f6fd;}
.software-bg{background: #c1d5fc url(../images/body-bg-23.webp) center top no-repeat; }
.offi-bg{background: #f9f2e9 url(../images/body-bg-of-23.webp) center top no-repeat; }
.offi-bg .banner { height: 350px;}
.offi-bg .banner .text-big span{color: #e13800;}
.offi-bg .banner-text .item-code { background: url(../images/code-23-1.png) no-repeat center 2px;background-size: 329px;}
.offi-bg .banner-text .item-code .edm-discount-text {color: #000;}
.software-bg .service-warp{background:#ffffff7a;border-radius: 8px;margin:20px auto;padding: 20px 0px;    margin-bottom: 42px;}
.offi-bg .swiper-button-next, .offi-bg  .swiper-button-prev{    background-color: #ffad91;}

.service-warp ul{display:flex}
.service-warp li{position:relative;flex:1;color:#666}
.service-warp li i {width: 47px;height: 67px;position: relative; display: block;left: 0;background: url(../images/icon-23.webp) no-repeat center; background-size: 970px;background-position: -22px 3px;margin: auto;}
.service-warp li div{font-size:14px;color:#666;text-align: center;}
.service-warp li:nth-child(1) i{ background-position: -22px -4px;}
.service-warp li:nth-child(2) i{background-position:-243px -4px;}
.service-warp li:nth-child(3) i{background-position: -463px -4px;}
.service-warp li:nth-child(4) i{background-position: -684px -4px;}
.service-warp li:nth-child(5) i{background-position: -903px -4px;}
.service-warp li p{color:#666}

.swiper-main{padding: 0;position: relative;}
.swiper-container{border-radius: 8px;padding:20px 0px;}
.swiper-main .item-warp { background: #fff; padding:30px 15px; transition: all 0.5s linear;transform: scale(0.95);border-radius: 5px;}

.swiper-main .item-warp .item-left{flex: 1;display: flex;align-items: center;justify-content: center;}
.swiper-slide a{position: relative;}
.swiper-main .item-warp .item-left .p-off {display: none; background: #ff5700;border-radius: 50px; width: 50px;height: 50px; position: absolute;top: -28px; right: -79px; text-align: center; line-height: 48px; font-size: 15px;color: #fff;}
.swiper-main .item-warp .item-left .item-img {position: relative; }
.swiper-main .item-warp .item-left img{    border-radius: 6px;height: 260px; width: auto;}
.swiper-main .item-warp .item-right{flex: 1;display: flex;align-items: center;justify-content: center;text-align: center;}
.swiper-main .item-warp .item-right .title a{color:#333;display: block;}
.swiper-main .item-warp .item-right .title { color: #000;  font-size: 18px;line-height: 25px; font-weight: bolder; overflow: hidden;  text-overflow: ellipsis;    -webkit-box-orient: vertical; min-height: 90px; text-align: center; padding-top: 28px; display: block;}
.swiper-main .item-warp .item-right .retail{font-size: 15px;opacity: 0.7;}
.swiper-main .item-warp .item-right .clleft-price {font-size: 16px;text-align: left;position: relative;}

.swiper-main .item-warp .item-right .clleft-price .p-off {
    position: absolute;
    width: 55px;
    border: 2px solid #ffd800;
    right: 0px;
    height: 40px;
    display: flex
;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
}
.swiper-main .item-warp .item-right .s_us {text-decoration: line-through; display: block;font-size: 16px;color: #666;    font-weight: normal;padding-bottom: 2px;}
.swiper-main .item-warp .item-right .c_price {display: block;font-size: 20px; color: #000;font-weight: 700; }
.swiper-main .item-warp .item-right .buynow {padding:13px 25px;background: #ffd800;color:#000;background-size: 19px;position: relative;display: flex;border-radius:5px;align-items: center;cursor: pointer;      justify-content: center;  flex: 1;}


.swiper-slide { width:390px;}
.swiper-slide-active .swiper-box,.swiper-slide-duplicate-active .swiper-box{transform:scale(0.95)}
.swiper-slide-active .swiper-box:hover,.swiper-slide-duplicate-active .swiper-box:hover{transform:scale(1)}
.swiper-slide:hover .swiper-box{box-shadow:0px 2px 14px 2px #e4e3e3;transform:scale(1)}
.swiper-button-next,.swiper-button-prev{margin-top:-80px;width:60px;height:60px}
.swiper-button-prev{left:-12px}
.swiper-button-next{right:-12px}
.swiper-slide-active a:before{display:none}
.swiper-slide a:after{display:none}
.swiper-slide a{cursor:pointer}
.swiper-wrapper{position: relative;display: flex}
.swiper-pagination{display: none;}
.swiper-main .clleft { display: flex; justify-content: center;align-items: center;margin-top: 20px;}  
.swiper-main .clleft .custom{position:relative;margin-right:50px;display: none;}
.swiper-main .clleft .custom button.items-count{background-color:#f8f8f8;border:1px #f8f8f8 solid;color:#999;position:absolute}
.swiper-main .clleft .custom button.items-count:hover{color:#000}
.swiper-main .clleft .add-to-cart .qty,
.swiper-main .clleft .qty-holder .qty{background-color:#f8f8f8;border:1px solid #f8f8f8;border-radius:0px;font-size:15px;font-weight:bold}
.swiper-main .clleft .custom .qty{height:42px;text-align:center;width:46px;vertical-align:top;background:#f8f8f8;border:1px solid #f8f8f8}
.swiper-main .clleft .custom .qty-input-text{margin-left:10px}
.swiper-main .clleft .custom button.items-count{font-size:10px;line-height:0px;padding:0px;height:22px;width:30px;text-align:center;font-weight:normal;background:#f8f8f8}
.swiper-main .clleft .custom button i{font-size:17px;}
.swiper-main .clleft .custom button.reduced{border-right:none;border-radius:3px 0 0 3px;right:-30px;top:0px}
.swiper-main .clleft .custom button.increase{border-left:none;border-radius:0 3px 3px 0;top:20px}
.swiper-main .clleft .custom .i-s{padding:4px;line-height:29px;color:#666;padding-left:16px;display:none}
.swiper-main .item-warp:hover{box-shadow: 0px 2px 14px 2px #e4e3e3; transform: scale(1)}
.swiper-main .item-warp .item-right .buywarp{display: flex;justify-content: center; align-items: center; padding: 0px;  flex: 1;}
.swiper-main .item-warp .item-right .buywarp .buy-a{font-size: 16px;}
.swiper-main .item-warp .item-right .buywarp .add {width: 48px;height: 48px;    margin-left: 18px;}
.swiper-main .item-warp .item-right .buywarp .addsuccess {position: absolute;left: 0; top: 0px;width: 48px;height: 48px;background: #fff;display:none; line-height: 44px; border: 0px solid #b8e6ba; border-radius: 6px;}
.swiper-main .item-warp .item-right .buywarp .addsuccess span{ position: absolute;top: 15px;left: 17px;}
.swiper-main .item-warp .item-right .buywarp .add-cart{width: 48px; height: 48px;  display: flex;cursor: pointer; justify-content: center; align-items: center; border:0px solid #b8e6ba; opacity:1; border-radius: 6px;font-size: 26px;    color: #0faf54;position: relative; background: #000;}
.swiper-main .item-warp .item-right .buywarp span {color: #fff; }
.swiper-main .item-warp .item-right .buywarp .buy-a:hover{opacity: 1;}
.swiper-main .item-warp .item-right .buywarp .loader-inner {left: 0px;height: 100%;background: #888888; z-index: 1;opacity: 0.8;border-radius: 5px;}
.swiper-main .item-warp .item-right .buywarp .loader-inner .ball-clip-rotate {width: 25px; height: 25px; margin: auto;margin-top: 4px;}
.swiper-main .item-warp .item-right .item-code {color: #666; display: inline-block;    background: #f8dec5; background-image: linear-gradient(to right, #f7ddc2, #fff, #f7ddc2); ; padding:5px 8px;line-height: 30px; cursor: pointer; position: relative;    margin-top: 5px;display: none;}
.swiper-main .item-warp .item-right .item-code::before,
.swiper-main .item-warp .item-right .item-code::after { content: ""; background: #fff; width: 15px; height: 15px;position: absolute; left: -8px; top: 12px; border-radius: 32px;}
.swiper-main .item-warp .item-right .item-code::before { right: -8px;left: auto;}

.swiper-main .item-warp .item-right .code {font-size: 14px;display: flex;justify-content: center;align-items: center; line-height: 30px; position: relative;    padding: 0px 12px;}
.swiper-main .item-warp .item-right .btn-copy{background:#0faf54;color:#ffffff;font-size:12px;margin:0px 17px;border-radius:21px;cursor:pointer;line-height:24px;position:absolute;right:-52px;word-break:keep-all;white-space:nowrap;top:3px;display:none;width:23px;height:23px;opacity:0.8}
.swiper-main .item-warp .item-right .btn-copy:hover{opacity: 1;}
.swiper-main .item-warp .item-right .edm-discount-text{padding-left:5px;font-weight: bold;color: #f35822;font-size: 16px;}
.swiper-main .item-warp .item-right  .buy-btn{text-align: center;width: 148px;margin: auto;position: relative;}
.swiper-main .item-warp .copy-code { opacity: 0; width: 80px;position: absolute;pointer-events: none;}

.swiper-main .swiper-slide { margin:0;transform: scale(0.95); }
.swiper-container-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-custom, .swiper-pagination-fraction { bottom: 49px;width: 50%; left: 556px;}
.swiper-pagination-bullet { background: #4169e1;width: 12px; height: 12px;margin-bottom: 4px;}
.swiper-slide-active,
.swiper-slide-duplicate-active{-webkit-transform: scale(0.85); transform: scale(0.85);}
.swiper-pagination-bullet-active{width: 22px;background-color: #4169e1;height: 12px;border-radius: 10px;}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {right: -60px}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{left:-60px}
.swiper-slide a {background:transparent;display:inline;}
.swiper-slide-active a:before,
.swiper-slide a:after{display: none;}
.swiper-button-next,
.swiper-button-prev{opacity:1;box-shadow: 0px 0px 7px 0px #eaeaea;top: 50%;margin-top: -72px;background-color: #47ddfe;width: 50px; height: 114px;border-radius:5px;}

.swiper-button-container .s-item{flex:1;position: relative;}
.swiper-button-container {display: flex;position: relative; bottom: 38px;}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {pointer-events: auto;}

.swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.banner-text .item-code {
    height: 81px;
    width: 356px;
    background: url(../images/code-23.png) center no-repeat;
    background-size: 100%;
    margin: auto;    font-size: 21px;position: relative;
}
.banner-text .item-code .edm-discount-text{font-weight: bold;font-size: 26px;color: #000cff;}
.banner-text .item-code .code{cursor: pointer;}
.banner-text .copy-code {
    position: absolute;
    top: 0px;
    left: 0px;pointer-events: none;
    opacity: 0;
}
.banner-text .btn-copy {
    background: #000cff;
    color: #ffffff;
    font-size: 12px;
    margin: 0px 17px;
    border-radius: 21px;
    cursor: pointer;
    line-height: 24px;
    position: absolute;
    right: 23px;
    word-break: keep-all;
    white-space: nowrap;
    top: 35%;
    display: none;
    width: 23px;
    height: 23px;
    opacity: 0.8;
}
.banner-text  .btn-copy:hover{opacity: 1;}



@media (max-width:768px){
.banner{margin-top:0;height:104px;position:relative;z-index: 0;}
.banner img{max-width:100%;width:100%}
.banner .banner-text {padding-top: 12px;line-height: 40px;}
.banner .text-big {font-size:28px;}
.banner .text-small {font-size: 20px}
.header_active .search-form{z-index: 2;}
.software-bg{padding:0px}
.swiper-main .item-warp{display: block;}
.swiper-button-container div:nth-child(1){display:none;}
.swiper-main .item-warp .item-right .retail{font-size: 20px;padding-top: 12px;}
.swiper-button-next, .swiper-button-prev{top:360px;}
.swiper-main .item-warp .item-left{background-color: transparent;}
.swiper-container{height: auto;}
.swiper-main .item-warp .item-right .btn-copy {font-size: 20px;  width: 35px; height: 35px; line-height: 34px; padding: 0px;    top: 2px;}
.swiper-main .item-warp .item-right .code{font-size: 24px;}
.swiper-main .item-warp .item-left .p-off{top: 30px; right: 40px;font-size: 18px;}
.swiper-main .item-warp .item-right .item-code {padding: 28px 36px; height: 26px;}
.swiper-main .item-warp .item-left .item-img{border-radius:0px}
.swiper-main .clleft {margin-top: 40px;transform: scale(1.5);padding: 0px 103px; padding-bottom: 20px;}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {right: 30px;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {left: 30px;}
.swiper-main .item-warp .item-right .title { font-size: 38px;line-height: 43px;padding: 17px 21px;min-height: auto;}
.swiper-main .item-warp .item-right .buywarp .loader-inner .ball-clip-rotate{margin-top:4px}
.swiper-main .clleft .custom .qty{height: 40px;}
.swiper-main .item-warp .item-left .p-off{top: 32px;right: 20px;}
.swiper-main .item-warp .item-right .item-code::before, .swiper-main .item-warp .item-right .item-code::after {top: 34px;}
.swiper-main .item-warp .item-right .edm-discount-text{font-size: 30px;}
.banner .text-small {line-height: 30px;}
.swiper-main .item-warp:hover {box-shadow: 0px 2px 14px 2px #e4e3e3;}
.swiper-main .item-warp .item-left img { height: 461px;}
.swiper-main .item-warp .item-right .c_price{    font-size: 30px;}
.swiper-main .item-warp .item-right .s_us{font-size: 23px;padding-bottom: 10px;}
.offi-bg .banner {height: 111px;}
.swiper-main .item-warp .item-right .clleft-price .p-off{font-size: 20px;}
.swiper-slide{width: 100%;}
.banner-text .item-code .code {line-height: 81px;}
.swiper-main .item-warp .item-right .clleft-price {padding: 0px 18px;}
}