@import url("https://use.typekit.net/aev2xqj.css");

.features{overflow: hidden;text-align: center}
.features *{box-sizing: border-box}
.features>div{overflow: hidden;}
.features .content{max-width: 1100px;margin-left: auto;margin-right: auto;padding-left: 15px;padding-right: 15px}
.features h4{font-size: 30px;letter-spacing: 0.025em;font-family: 'noto-sans', 'Arial';font-weight: 300;color: #000;margin-bottom: 0.5em;line-height: 1.2em;padding: 0}
.features h4 small{font-size: 80%}
.features p{font-size: 14px;color: #535353;font-family: 'Calibri', 'Arial';line-height: 1.75em;}
.features p+*{margin-top: 30px}
.features h6{font-size: 16px;font-weight: 600;color: #000;font-family: 'Calibri', 'Arial';letter-spacing: 0;line-height: 1;}

.box-img{
    display:block;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    position:relative;
}
.box-img:before{
    content:"";
    display:block;
    width:100%;
    padding-bottom:100%;
}

.box-img.r-3-2:before{
    padding-bottom:66.6%;
}

.box-img.r-2-1:before{
    padding-bottom:50%;
}

@media (max-width:1239px){
    .features p>br{display: none}
}
@media (max-width:479px){
    .features h4{font-size: 26px}
    .features h6{font-size: 15px}
    .features p{font-size: 13px}
    #Content .icons img{width: 70%}
}
@media (min-width:992px){
    .features p+*{margin-top: 60px}
    .features h4{font-size: 40px;}
    .features p{font-size: 19px}
}

.feature{padding: 160px 0 100px;background: #f7f7f7}
.feature > img{margin:55px 0 100px}
.icons .item{margin-bottom: 24px;}
.fourgrids{display: flex;flex-wrap: wrap;}
.fourgrids .item{flex-basis: 50%;max-width: 50%}
.threegrids{display: flex;flex-wrap: wrap;}
.threegrids .item{flex-basis: 50%;max-width: 50%}
.twogrids{display: flex;flex-wrap: wrap;}
.twogrids .item{flex-basis: 100%;max-width: 100%;margin-bottom: 20px}

@media (min-width:1240px){
    .icons.threegrids .item:nth-of-type(3n+2){padding-left: 30px}
    .features sup{vertical-align:top;font-size: 1.25em;}
}
@media (min-width:768px){
    .icons .item{margin-bottom: 36px}
    .twogrids .item{flex-basis: 50%;max-width: 50%;}
    .threegrids .item{flex-basis: 33.3%;max-width: 33.3%;}
    .fourgrids .item{flex-basis: 25%;max-width: 25%}
}
@media only screen 
  and (-webkit-min-device-pixel-ratio: 2) {
  .features sup{font-size: 0.75em;}
}
.disc_wrap{position: relative}
.disc_wrap .text{position: absolute;left: 0;top: 0;bottom: 0;right: 0;z-index: 10;text-align: left}
.disc_wrap .text p{max-width: 300px}
.disc_wrap img.disc{position: absolute;left: 0;top: 0;z-index: 3}
.disc_wrap img.outer{position: absolute;left: 0;top: 0;z-index: 5}

.scrolltab{background: #f7f7f7;padding-top: 40px}
.scrolltab ul{list-style: none;padding: 0;margin-left: 0; display: flex;align-items: flex-end;justify-content: center;position: relative;padding-top: 10px;}
.scrolltab ul li{list-style: none;margin: 0}
.scrolltab ul li a{color: #535353;font-size: 16px;font-family: 'Calibri', 'Arial';position: relative;display: block}
.scrolltab ul li a:before{content: '';position: absolute;left: 0;bottom: -8px;width: 0;height: 2px;background: #039cbf; transition: .5s ease all;transition-delay:0;}

/*
.scrolltab ul li:nth-of-type(1) a:before{background: url(../img/rs104-07/backplane-angle.png) center/cover no-repeat}
.scrolltab ul li:nth-of-type(2) a:before{background: url(../img/rs104-07/storage-angle.png) center/cover no-repeat}
.scrolltab ul li:nth-of-type(3) a:before{width: 0;height: 0; border-bottom: 14px solid #18181b;border-left: 14px solid transparent;border-right: 14px solid transparent;}
.scrolltab ul li:nth-of-type(4) a:before{background: url(../img/rs104-07/power-angle.png) center/cover no-repeat}
.product-110.scrolltab ul li:nth-of-type(2) a:before{width: 0;height: 0; border-bottom: 14px solid #1d1d1d;border-left: 14px solid transparent;border-right: 14px solid transparent;}
*/

.scrolltab ul li a.active{font-weight: bold;color: #039cbf;}
.scrolltab ul li a.active:before{width: 100%;}
.tabswrap{overflow: hidden;}
.tabswrap>div{overflow: hidden}
.tabswrap>div:not(.active){display: none}
.tabswrap>div>div{padding-bottom: 40px; box-sizing: border-box}
.tabswrap::-webkit-scrollbar {width: 0;}
.backplane{background: url(../img/rs104-07/table.jpg) center/cover no-repeat;padding: 40px 0;}
.backplane img{max-width: 90%!important}
.storage{background: url(../img/rs104-07/storagebg.jpg) center/cover no-repeat;}
.storageitems{position: relative;display: inline-block}
.storageitems>div{position: absolute;}
.storageitems>div:nth-of-type(1){left: 18.6%;top: 13%;width: 20%;}
.storageitems>div:nth-of-type(2){left: 41%;top: 13%;width: 20%;}
.storageitems>div:nth-of-type(3){left: 60%;top: 30%;width: 33%}
.storageitems hr{width: 1px;height: 225px;display: block;margin:-45px auto 0;background: #000;box-shadow: 1px 1px 0 #fff;}
.storageitems>div:nth-of-type(3) hr{height: 74px}
.pictextwrap{text-align: left;margin-top: 60px}
.pcie{background: url(../img/rs104-07/pciebg.jpg) center/cover no-repeat;}
.power{background: url(../img/rs104-07/powerbg.jpg) center/cover no-repeat;}
.power h5{color: #000;font-size: 17px;font-family: 'noto-sans', 'Arial';font-weight: bold;margin-bottom: 1em}
.power hr{width: 1px;height: 146px;display: block;margin:-110px auto 0;background: #000;box-shadow: 1px 1px 0 #fff;}
.power .item:nth-of-type(2) hr{height: 248px;margin-top: -210px}
.lineDown{
    animation-name: lineDown;
    opacity: 1;
    transform: scaleY(0);transform-origin: center top;
}
@keyframes lineDown{
    from,to{transform-origin: center top}
    from{transform: scaleY(0)}
    to{transform: scaleY(1)}
}
@-webkit-keyframes lineDown{
    from,to{transform-origin: center top}
    from{transform: scaleY(0)}
    to{transform: scaleY(1)}
}
@media (min-width:992px){
    .power h5{font-size: 18px}
    .scrolltab{padding-top: 115px;}
    .scrolltab ul {padding-top: 24px;margin-bottom: 24px;}
    .scrolltab ul li{padding: 0 20px}
    .scrolltab ul li a{font-size: 19px;}
    .backplane{padding: 40px 0}
    .backplane img{max-width: 100%}
    .backplane h4{margin-bottom: 0.5em}
    .pictextwrap{display: flex;align-items: center;margin-top: 80px}
    .storage .pictextwrap{justify-content: space-between}
    .tabswrap>div>div{padding-bottom: 80px;}
}
@media (min-width:1240px){
    .tabswrap{height: 930px;}
    .tabswrap>div{height: 930px}
    .tabswrap>div>div{padding-bottom: 0;height: 100%}
    .scrolltab ul li{padding: 0 40px}
    .backplane{padding: 130px 0 0}
    .backplane img{margin-bottom: 70px}
    .storage .u2sign{margin: 36px auto 0;}
    .power h5{margin-bottom: 50px}
}

@media (max-width:1239px){
    .storage video{max-width: 100%;height: 37vw;width: auto;margin-top:-2.4vw!important}
    .backplane img{padding: 0!important;margin-bottom: 50px}
    .storageitems hr{height: 175px;margin: -40px auto 0;}
    .storageitems>div:nth-of-type(3) hr{height: 50px}
    .storage .pictextwrap > img{margin-left: 10px}
    .power hr{height: 110px;margin: -75px auto 0;}
    .power .item:nth-of-type(2) hr{height: 200px;margin: -165px auto 0;}
}

@media (max-width:991px){
    .scrolltab ul{margin-bottom: 24px}
    .scrolltab ul li{padding: 0 15px}
    .storage .pictextwrap > img{width: 28%;float: right}
    .storageitems hr{height: 150px}
    .storageitems>div:nth-of-type(3) hr{height: 55px}
    .storage .pictextwrap{display: flex}
    .power hr{height: 80px;margin: -40px auto 0;}
    .power .item:nth-of-type(2) hr{height: 150px;margin: -110px auto 0;}
}
@media (max-width:767px){
    .scrolltab ul{margin-bottom: 10px}
    .scrolltab ul li{padding: 0 5px}
    .scrolltab ul li a{font-size: 13px}
    .storage .pictextwrap > img{width: 43%;}
/*
    .scrolltab ul li a:before{width: 14px;height: 7px;left: calc(50% - 7px);bottom: -12px;}
    .scrolltab ul li:nth-of-type(3) a:before,.product-110.scrolltab ul li:nth-of-type(2) a:before{width: 0;height: 0; border-bottom: 7px solid #18181b;border-left: 7px solid transparent;border-right: 7px solid transparent;left: calc(50% + 7px);}
*/
    .backplane hr{display: none}
    .backplane h4{margin-top: 20px}
    .backplane img{margin-bottom: 30px}
    .storageitems hr{height: 60px;margin: -20px auto 0;}
    .storageitems>div:nth-of-type(3) hr{height: 22px}
    .storageitems>div p{line-height: 1.2;font-size: 0.9em}
/*    .storageitems>div:not(:nth-of-type(3)) p{width: 120%}*/
    .storage .pictextwrap{display: block;margin-top: 40px;overflow: hidden;}
    .storage .u2sign{width: 40%;margin-top: 0}
    .pcie .content{margin-top: 25px}
    .power .twogrids .item{flex-basis: 50%;max-width: 50%;}
    .power hr{height: 60px;margin: -20px auto 6px;}
    .power .item:nth-of-type(2) hr{height: 90px;margin: -50px auto 6px;}
}
.parallaxbg{padding: 132px 0;display: flex;align-items: center;justify-content: center;background-size:100%;}
.divid{background: #000;position: relative;}
.divid h4,.divid p{color: #fff}
.div2{min-height: 650px;background-size: cover;background-position: center;display: flex;align-items: center;justify-content: center}
.div2 h4{margin-bottom: 0.25em}
.div3{display: flex;align-items: center;justify-content: space-between;min-height: 400px;}
.div3 .left{align-self: baseline}

.div4{display: flex;align-items: center;justify-content: space-between;min-height: 400px; background-size: cover;}
.div4 .left{align-self: center;}
.div4 .right { align-self: flex-start;}
.div4 .content { max-width: 575px; margin-top: 30px; }
.div4 h4 { color: #000; }
.div4 p {color: #535353; }
@media (min-width:768px){
    .div2 .twogrids{align-items: center}
    .display224+.div2 .twogrids .item{margin-bottom: 0;max-width: 43%;flex-basis: 43%}
    .display224+.div2 .twogrids .item:nth-child(2){max-width: 57%;flex-basis: 57%}
}
@media (max-width:1239px){
    .feature{padding: 80px 0;}
    .feature > img{margin: 40px 0}
    .parallaxbg{padding: 60px 0;background-size:cover!important;background-position: center}
    .div2 .item img{width: 90%}
    .div3{flex-direction: column}
    .div3 .content{margin-top: 30px}
    .div3 .right{margin-right: -6vw;}
    .div4{flex-direction: column-reverse; }
    .div4 .content{margin-top: 30px}
    .div4 .right{ margin-right: 0; align-self: flex-end;}
}
@media (max-width:991px){
    .parallaxbg{min-height: 300px!important;}
    .div2{min-height: 400px;}
}
@media (max-width:767px){
    .feature{padding: 40px 0;}
    .div2{padding: 40px 0 20px;}
    .div3 .left{width: 50%}
    .div3 .right{width: 60%;margin-right: -10vw;}
    .div4 .left{width: 50%}
    .div4 .right{width: 60%;margin-right: -10vw;}
    .disc_wrap {margin-top: 80px;}
    .disc_wrap .text{top: -50px;}
    .tabswrap .disc_wrap {margin-top: 0px;}
}

/*.display{background: #fff}*/
.picleft{position: relative;text-align: left}
.picleft>img{margin-top: -9.2%;margin-bottom: 30px;max-width: 70%!important}
.picleft .text{position: absolute;left: 0; right: 0;top: 37%;bottom: 0}
.picleft .content > *{max-width: 430px;margin-left: auto;margin-right: 0}
.display .picleft .content > *{max-width: 490px;}
.picright{display: flex;align-items: center;justify-content: space-between;margin-bottom: 150px}
.picright .content{max-width: 400px;text-align: right;padding: 10px 15px;order: -1}
.loop{background: #f2f2f2;padding: 40px 0 20px}
.loop video{max-width: 100%}
.cableinfo{padding: 40px 0 20px;background: #fff}
.cableinfo h4{margin-bottom: 1.5em}
.cableinfo .left,.cableinfo .right{position: relative;text-align: left;flex-basis: 100%;max-width: 100%}
.cableinfo .left h5,.cableinfo .right h5{text-align: center;color: #000;font-size: 15px;margin-top: -1em;margin-bottom: 1.5em;}
.cableinfo .right h5{margin-top: 2.5em}
.cableinfo h6{white-space: nowrap;font-weight: 400;margin: 0;line-height: 1}
/*.cableinfo h6:before{content: '';display: block;position: absolute}*/
.cable hr{margin: 0 5px;background: #959595}
.cable{display: flex;align-items: center;}
.ch1u h4{width: 100%;}
.cableinfo .twogrids{align-items: center}
.ch1u.cableinfo .twogrids{align-items: flex-start}
@media (max-width:1239px){  
    .picright>img{max-width: 100%;width: 500px}
    .picleft .content > *{max-width: 330px}
    .display .picleft .content > *{max-width: 330px;}
    
    .cable{flex-direction: column;margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px dashed #dcdcdc;}
    .cable hr,.cableinfo h6>br{display: none}
    .cable{margin-bottom: 20px!important;}
    .cable img{margin-bottom: 10px;}
    .cable h6{transform: none!important}
}
@media (max-width:991px){  
    .picright{flex-direction: column;align-items: flex-end;margin-bottom: 50px}
    .picright .content{max-width: 100%;padding: 20px 0;margin-right: 0}
    .picleft {margin-bottom: 30px}
    .picleft .text{position: relative;margin-top: -30px;}
    .display .picleft .content > *{margin-left: 0}
    .display .picright img{max-width: 80%!important}
    .display224 .picleft .content > *{margin-left: auto;margin-right: 0;max-width: 68%;text-align: right;}
    .display224 .picright .content{text-align: left;margin-left: 0;margin-right: auto;max-width: 80%;position: relative;z-index: 5;margin-bottom: -40px}
    .loop video{max-height: 60vw}
}
@media (max-width:767px){
    .cable img{width: 80%}
    .ch1u .right h5{margin-top: 2em}
}
@media (min-width:992px){
    .picleft>img{margin-bottom: 60px}
    .cableinfo{padding: 140px 0 90px}
    .cableinfo.ch1u{padding: 95px 0 120px}
    .loop{padding: 120px 0 20px}
}
@media (min-width:1240px){
    .cableinfo .left{flex-basis: 55%;max-width: 55%}
    .cableinfo .right{flex-basis: 45%;max-width: 45%}
    .cableinfo .left h5,.cableinfo .right h5{font-size: 17px;margin-bottom: 3em;margin-top: 0}
    .cableinfo h6:before{width: 60px;height: 1px;background: #dadada;right: 105%;top: 12px}
    .left .cable h6{min-width: 200px;width: 200px}
    .right .cable h6{min-width: 80px;width: 80px}
    .ch1u .cable h6{white-space: normal}
    .ch1u .left .cable h6{padding-right: 80px;}
    .ch1u .right .cable h6{width: 120px; min-width: 120px;}
}

.tool_less{background: #f7f7f7;padding: 60px 0 30px}
.tool_less .fourgrids{justify-content: center}
.tool_less .item{margin-bottom: 26px}
.tool_less .item img{margin-bottom: 21px;max-width: 90%!important}
.tool_less .item p{padding: 0 10px}
.tool_less .content{max-width: 1100px;}
.dimension{padding: 60px 0 40px}
.dimension h4{margin-bottom: 2em}
.io_ani{background: url(../img/rs104-07/IObg.png) center/cover;padding: 40px 0}
.io_ani>img{max-width: 90%!important}
.io_ani h4, .io_ani p{color: #fff}
.io_ani .top, .io_ani .bottom{width: 100%;height: 170px;margin: 15px 0;}
.io_ani .top{background-image: url(../img/rs104-07/io-top.png); animation: bgToLeft 27s linear infinite}
.io_ani .bottom{background-image: url(../img/rs104-07/io-bottom.png); animation: bgToRight 20s linear infinite}
.blendfadeIn{animation-name: blendfadeIn;}
@keyframes bgToLeft{
    from { background-position: 0 0; }
    to { background-position: -1930px 0; }
}
@-webkit-keyframes bgToLeft {
    from { background-position: 0 0; }
    to { background-position: -1930px 0; }
}
@keyframes bgToRight{
    from { background-position: -1450px 0; }
    to { background-position: 0 0; }
}
@-webkit-keyframes bgToRight {
    from { background-position: -1450px 0; }
    to { background-position: 0 0; }
}
@keyframes blendfadeIn{
    from { opacity: 0 }
    to { opacity: 1 }
}
@-webkit-keyframes blendfadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
}

@keyframes arrowToTopRight {
    from { transform: translate(0, 0); }
    to { transform: translate(10%, -5%); }

}
@media (max-width:767px){
    .io_ani .top, .io_ani .bottom{height: 85px;background-size: auto 100%}
    @keyframes bgToLeft{
        from { background-position: 0 0; }
        to { background-position: -965px 0; }
    }
    @-webkit-keyframes bgToLeft {
        from { background-position: 0 0; }
        to { background-position: -965px 0; }
    }
    @keyframes bgToRight{
        from { background-position: -725px 0; }
        to { background-position: 0 0; }
    }
    @-webkit-keyframes bgToRight {
        from { background-position: -725px 0; }
        to { background-position: 0 0; }
    }
}
@media (max-width:479px){
    .tool_less .item img{width: 75%}
}
@media (min-width:992px){
    .tool_less .content{margin-top: 90px}
    .tool_less,.dimension{padding: 130px 0 110px}
    .tool_less img{width: auto;margin-bottom: 30px}
    .io_ani{padding: 90px 0}
    .io_ani .top, .io_ani .bottom{margin: 35px 0}
}

/* 224 specific */
.display224{padding-top: 140px}
.display224 .picright{margin-bottom: 0}
.loop2 {position: relative;overflow: hidden}
.loop2 video{position: absolute;left: -20%;top: -12%;filter: contrast(1.2) brightness(1.25);}
.intergrat{position: relative}
.intergrat img.wow{position: absolute;left: 0;top: 0}
.div2-2{padding-top: 40px}
.div3-224{background: url(../img/rs224-07/div-4-bg.png) center/cover no-repeat}
@media (min-width:992px){ 
    .div2-2{padding-top: 120px}
}
@media (max-width:1239px){  
    .display224{padding-top: 80px}
    .loop2 video{max-width: 100%;height: auto;bottom: 0}
    .div3-224{padding-bottom: 80px;background: url(../img/rs224-07/div-4-bg-mobile.png) center top/auto no-repeat, linear-gradient(to top, #000, #000)}
    .div3-224 .content{margin-top: 0;text-align: center!important}
}
@media (max-width:991px){
    .div3-224{padding-bottom: 40px}
    .picleft .loop2+.text{margin-top: 0}
}
@media (max-width:767px){
    .display224{padding-top: 60px}
    .div3-224{background-size: 150%}
    .display224+.div2 .twogrids .item{text-align: center!important}
}
.video {padding:20px 10px 0}
.video h3{font-size: 30px;color: #000;font-family: 'noto-sans', 'Arial';letter-spacing: 0.025em;font-weight: bold;margin-bottom: 0.5em;}
.video p{font-size: 14px;color: #555050;font-family: 'Calibri', 'Arial';line-height: 1.33em;margin: 10px 0 30px!important}
.video hr{margin:30px -10px;background-color: #dadada;width: calc(100% + 20px);}
.video .twogrids{margin-left: -10px;margin-right: -10px}
.video .twogrids .item{padding-left: 10px;padding-right: 10px;box-sizing: border-box;}
.video .twogrids .item a{display: block;position: relative;overflow: hidden}
.video .twogrids .item a:before{content: '';display: block;padding-bottom: 56.25%;width: 100%;position: relative;z-index: 2;background: rgba(0, 0, 0, 0.2);transition: .2s linear}
.video .twogrids .item a:hover:before{background: rgba(0, 0, 0, 0.4)}
/* .video .twogrids .item a:after{content: '';width: 60px;height: 60px;background: url(../img/video-btn.png) center/contain no-repeat;position: absolute;left: calc(50% - 30px);top: calc(50% - 30px);z-index: 3} */
.video .twogrids .item a img{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);display: block}
#pp_full_res iframe{width: 100%;min-height: 250px}
div.pp_default .pp_content, div.light_rounded .pp_content{background: transparent}
@media (min-width:992px){
    .video {padding:20px 20px 0}
    .video h3{font-size: 40px;margin-bottom: 1em}
    .video p{font-size: 19px}
    .video hr{margin:30px -20px;width: calc(100% + 40px);}
    .video .twogrids{margin-left: -20px;margin-right: -20px;justify-content: space-between}
    .video .twogrids .item{padding-left: 20px;padding-right: 20px;}
    .video .twogrids .item a:after{width: 100px;height: 100px;left: calc(50% - 50px);top: calc(50% - 50px);}
}
@media (min-width:1240px){
    .video .twogrids .item{max-width: 540px;flex-basis: 540px}
}
/* 

.arrow-animate-1 {
    animation: arrowToTopRight 0.5 ease 0 infinite;
} */

.toTopRight {
    animation-name: toTopRight;
    animation-duration: 1.1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes toTopRight {
from {transform: translate(0,0);}
to {transform:translate(15%, -10%);}
}

/* 424 specific */
.div3-424 {
    padding-top: 80px;
    padding-bottom: 80px;
    background-size: 20% auto, 100% 100%, cover;
    /* background-size: 90% auto, 90% 100%, cover; */
    background-image: url(../img/rs424-07/03/03_bg-03-crop.png), url(../img/rs424-07/03/03_bg-02.png), url(../img/rs424-07/03/03_bg-01.jpg);
    /* background-image: url(../img/rs424-07/03/03_bg-03.png), url(../img/rs424-07/03/03_bg-02.png), url(../img/rs424-07/03/03_bg-01.jpg); */
    /* background-position: right 20% top 50%,center, center; */
    /* background-position: right 38% top 45%,center, center; */
    background-position: right 65% top 55%,center, center;

    /* background-size: 100% auto, 100% 100%, cover;
    background-image: url(../img/rs424-07/03/03_bg-03.png), url(../img/rs424-07/03/03_bg-02.png), url(../img/rs424-07/03/03_bg-01.jpg);
    background-position: center; */
    background-repeat: no-repeat;


/* background-size: contain, contain, cover;
background-image: url(../img/rs424-07/03/03_bg-03.png), url(../img/rs424-07/03/03_bg-02.png), url(../img/rs424-07/03/03_bg-01.jpg);
background-position: top -20px right 28%, center, center;
background-repeat: no-repeat; */
}

.div3-424 .picleft {
    padding-left: 40px;
}

.div3-424 .picleft .img1 {
    width: 8%;
    margin-top: 0;
}

.div3-424 .picleft img.img2 {
    width: 500px;
    max-width: 90% !important;
    /* width: 50%; */
    margin-top: 0;
    margin-bottom: 10%;
}

.div3-424 .picright > img {
    width: 500px;
}

.div3-424 .picright .content {
    max-width: 400px;
    padding-left: 30px;
    padding-right: 30px;
}

.div5-424 {
    padding-bottom: 15px;
}

.div5-424 p {
    line-height: 1.5;
}

.div6-424 {
    background-image: url("../img/rs424-07/06/06_bg.jpg");
    background-position: center bottom;
    padding: 70px 0;
}

.div7-424 {
    min-height: 600px;
    background-image: url("../img/rs424-07/07/07_bg.jpg");
}

@media screen and (min-width: 768px) {
    .div5-424 {
        min-height: 500px;
        line-height: 1.75;
    }
    
    .div5-424 p {
        margin-bottom: 40px !important;
    }
}
@media screen and (min-width: 960px) {
/* @media screen and (min-width: 992px) { */
    .div3-424 {
        background-position: right 15% top 38%,right 30% center,center center;
        background-size: 20% auto, 80% 100%, cover;
        background-image: url(../img/rs424-07/03/03_bg-03-crop.png), url(../img/rs424-07/03/03_bg-02.png), url(../img/rs424-07/03/03_bg-01.jpg);
    }

    .div3-424 .picleft .img1 {
        width: 6%;
    }

    .div3-424 .picleft img.img2 {
        width: 40%;
        margin-top: -5%;
        margin-left: -3%;
        /* width: 40%;
        margin-top: 30px;
        margin-left: -3%; */
        /* margin-bottom: 3%; */
    }

    .div3-424 .picleft .content > * {
        max-width: 520px;
        padding-right: 100px;
    }
    .div3-424 .picright .content {
        max-width: 500px;
    }

    .div3-424 .picright > img {
        width: 600px;
    }


    .div5-424 {
        min-height: 700px;
    }
    .div6-424 {
        padding: 120px 0 160px;
    }

    .div7-424 .left {
        padding-top: 30px;
    }

}

@media screen and (min-width: 992px) {
    .div3-424 .picright > img {
        margin-bottom: -70px;
    }
}

@media screen and (min-width: 1240px) {
    .div3-424 {
        padding-top: 160px;
        padding-bottom: 160px;
    }

    .div3-424 .picleft .img1 {
        width: 8%;
        margin-left: 8%;
    }

    
    .div3-424 .picleft img.img2 {
        width: 50%;
        margin-top: -5%;
        margin-left: 0;
    }

    .div5-424 {
        min-height: 846px;
    }

    .div7-424 .img-ml {
        margin-left: 90px;
    }

    
    .cableinfo-424 .right .cable h6 {
        min-width: 160px;
        width: 160px;
    }

    .cableinfo-424 hr { height: 1.2px; }

    /* .div3-424 .picleft .content > * {
        max-width: 500px;
        padding-right: 0;
    } */

}
/* --------------- */
/* rs-436 specific */

.features-436 { background: #fff; }

.div2-436 {
    background: #fff;
    background-image: none;
}

.div2-436 h4 {
    color: #000;
}

.div2-436 p {
    color: #535353;
}

.twogrids-436 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}

.grids-436 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}

.grids-436 .content  {
    height: 100%;
    border-radius: 20px;
    background: #f5f5f7;
    padding: 30px 40px;
    text-align: left;
    /* margin-bottom: 10px; */
}

.grids-436 .item, .grids-436 .item-half, .grids-436 .item-5-3, .grids-436 .item-5-2 {
    padding-left: 10px;
    padding-right:10px;
    flex: 0 0 100%;
    padding-bottom: 20px;
}

.grids-436 .item-5-2 .content {
    display: flex;
    align-items:center;
}

.grids-436 .item h6 {
    text-align: left;
    margin-bottom: 30px;
    font-size: 20px;
}

.div3-436 {
    padding-top: 60px;
    padding-bottom: 60px;
    background: #fff;
}


.div3-436 p {
    margin-bottom: 20px;
}


.line-left-box, .line-right-box {
    position: absolute;
    width: 1px;
}

.line-left-box span, .line-right-box span {
    position: absolute;
    display: inline-block;
    background: #666;
    width: 1px;
    height: 100%;
    animation-name: indicator_animation;
    animation-delay: 0.5s;
    opacity: 1;
}

.line-left-box span.animate, .line-right-box span.animate {
    opacity: 1;
}

.line-left-box span {
    bottom: 0;
}

.line-left-box span:after, .line-right-box span:after {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #666;
    bottom: -2px;
    right: -2px;
}
.line-right-box span:after {
    bottom: auto;
    top: -3px;
}

.line-right-box span {
    top: 0;
}

.line-left-box {
    top: 0;
    left: 17%;
    transform: rotate(-35deg);
    transform-origin: top;
    height: 55%;
    text-align: right;
}

.line-right-box {
    bottom: 0;
    right: 15%;
    transform: rotate(-35deg);
    transform-origin: bottom;
    height: 50%;
}

.box-img.r-100-45:before { padding-bottom: 45%; }
.box-img.r-2-1:before { padding-bottom: 50%; }

.disc_wrap-indicator {
    margin-top: 0;
    width: 100%;
}

@keyframes indicator_animation {
    from {
        height: 0;
    }

    to {
        height: 100%;
    }
}
.div5-436 {
    min-height: 300px;
    padding-top: 60px;
    padding-bottom: 60px;
    background-image:  url(../img/rs436-07/07/07-1.png), url(../img/rs436-07/07/07-2.png) ,url(../img/rs436-07/07/07_bg.jpg);
    background-position: top left, bottom right, center;
    background-size: 50% auto, 30% auto, cover;
    background-repeat: no-repeat;
}

.div5-436 .content {
    margin-top: 0;
    max-width: 850px;
}

.div5-436 .content img {
    width: 25%;
}

.div2-436 .img_wrap-1 {
    margin-left: 10%;
    width: 80%;
    margin-bottom: 60px;
    margin-top: 60px;
}
.div2-436 .img_wrap-2 {
    margin-left: 10%;
    width: 80%;
}

/* Scroll Magic Specific: Start */
.scroll-sec {
    height: 100vh;
    /* background: #f7f7f7; */
    padding-top: 80px;
    padding-bottom: 80px;
    position: absolute;
    border-radius: 20px;
    overflow: hidden;
}

.scroll-container { position: relative; }

.scroll-container, .scroll-sec {
    width: 100%;
}

.scroll-sec {
    display: flex;
    align-items: center;
    position: absolute;
}

.scroll-sec.sec1, .scroll-sec.sec2 {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.sec1 .bg { background: #f5f5f7; }
.sec2 .bg { background: #f7f3e4; }
.sec3 .bg { background: #edefbc; }
.scroll-sec .bg {
    top: 100%;
    transition: top 0.5s;
    position: absolute;
    width: 100%;
    height: 100vh;
    /* z-index: 0; */
}

.scroll-container > .scroll-inner { position: relative; }
.scroll-sec .content {
    position: relative;
    z-index: 1;
    background-color: transparent;
    text-align: center;
    max-width: 750px;
    height: auto;
    opacity: 0;
}

/* .scroll-sec img {
    position: relative;
    opacity: 0;
    z-index: 1;
}

.scroll-sec img.img-active {
    opacity: 0;
} */
.scroll-sec.active .content {
    opacity: 1;
    transition: 0.5s;
    /* transition-delay: 0.5s; */
}
.scroll-sec .content img {
    opacity: 1;
    transition: 3s;
    /* transition-delay: 0.5s; */
}
.scroll-sec.active .bg {
    top: 0;
}


/* .scroll-sec.active.leave {
    position: relative;
} */
.sec-empty { opacity: 0; background-color: none; }

.grids-436 .scrollmagic-pin-spacer {
    border-radius: 20px;
    background: #edefbc;
    overflow: hidden;
}

/* Scroll Magic Specific: End */

@media screen and (min-width: 512px) {
    .disc_wrap-indicator {
        margin-top: -5px;
        /* margin-top: 0; */
        /* width: 70%; */
        width: 50%;
    }

    .line-left-box {
        left: 5%;
        transform: rotate(-50deg);
        height: 72.5%;
    }

    .line-right-box {
        right: 2%;
        transform: rotate(-50deg);
        height: 70%;
    }
}

@media (min-width:768px){
    .features-436 h4 { font-size: 35px; }

    .twogrids-436 .item {
        flex: 0 0 50%;
    }

    .grids-436 .item-half {
        flex: 0 0 50%;
    }

    .grids-436 .item-5-2 {
        flex: 0 0 40%;
    }

    .grids-436 .item-5-3 .content {
        padding: 40px 55px;
    }
    .grids-436 .item-5-2 .content {
        padding: 40px 45px;
    }

    .grids-436 .item-5-3 {
        flex: 0 0 60%;
    }
        
    .grids-436 .content  {
        padding: 40px 75px;
    }

    .div5-436 {
        background-image:  url(../img/rs436-07/07/07-1.png), url(../img/rs436-07/07/07-2.png) ,url(../img/rs436-07/07/07_bg.jpg);
        background-position: top left, center right, center;
        background-size: 40% auto, 20% auto, cover;
    }

    .div5-436 .content {
        margin-top: 0;
        max-width: 850px;
    }

    .div5-436 .content img {
        width: 15%;
    }

    .div2-436 .img_wrap-1 {
        width: 65%;
        margin-left: 20%;
    }
    .div2-436 .img_wrap-2 {
        margin-left: 0;
        width: 100%;
    }
    .div2-436 .img_wrap-2 img {
        width: 100%;
    }
}

@media screen and (min-width: 1200px) {
    .grids-436 .item-half .content {
        padding: 40px 87px;
    }

    /* .grids-436 .item-5-2 .content,
    .grids-436 .item-5-3 .content {
        padding: 40px 10px;
    } */

    .line-left-box {
        left: 3%;
        transform: rotate(-50deg);
        height: 72%;
    }

    .line-right-box {
        right: 0%;
        transform: rotate(-50deg);
        height: 70%;
    }
}

@media screen and (min-width: 1240px) {
    /* .line-left-box {
        left: 0;
        transform: rotate(-55deg);
        height: 75%;
    }
    .line-left-box {
        left: 2%;
        transform: rotate(-50deg);
        height: 65%;
    } */
    
    .line-left-box {
        left: 3%;
        transform: rotate(-50deg);
        height: 70%;
    }

    .line-right-box {
        right: 2.5%;
        transform: rotate(-50deg);
        height: 70%;
    }
}

/* RS436 END */

/* RS316 START */
.feature-316 {
    background-color: #fff !important;
}

.feature-316-img1 {
    width: 870px;
}

.feature-316 h6 {
    color: #546d92;
}

.rs316-item-3-icons {
    margin-top: -40px;
    margin-right: -20px;
    text-align: right;
}

.rs316-item-3-icons img {
    width: 100px;
}

.rs316-item-3-icons span {
    color: #000;
}

.icon-wrap {
    width: 100px;
    float: right;
    text-align: center;
}


.rs316-div2 {
    background: center/cover np-repeat;
    color: #fff;
}

.grids-316 {
    display: flex;
    flex-wrap: wrap;
}

.grids-316 .item-3-2 {
    flex-basis: 60%;
    max-width: 60%;
    margin-bottom: 20px;
}

.grids-316 .item-3-1 {
    flex-basis: 40%;
    max-width: 40%;
    margin-bottom: 20px;
}

.rs316-div2 p, .rs316-div2 h4 {
    color: #fff;
}

.grids-316 .item-3-1 .inner {
    width: 80%;
    transform: translateX(28%);
}

.rs316-div2 .disc_wrap {
    text-align: left;
}
.rs316-div2 .content2 {
    padding-top: 40px;
    text-align: right;
    padding-bottom: 80px;
}
.grids-316 .inner {
    position: relative;
    padding-left: 30px;
}

.grids-316 .inner hr {
    position: absolute;
    left: 0;
    width: 1px;
    height: 100%;
    display: block;
    background: #fff;
    overflow: visible;
}
.grids-316 .inner hr:before {
    content: "";
    position: absolute;
    top: -5px;
    left: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
}

.grids-316 .item-3-2 .inner hr {
    left: 20%;
}

.grids-316 .item-3-1 .inner img {
    width: 135px;
    margin-left: calc(50% - 62.5px);
}

.grids-316 .item-3-2 .inner {
    min-height: 450px;
    margin:-250px 0 0;
    padding-left: calc(20% + 30px);
}

.grids-316 .item-3-2 .inner p {
    position: absolute;
    left: calc(20% + 30px);
    bottom: 0;
    width: 57%;
}

.grids-316 .item-3-2 .inner img {
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 70%;
    width: 50%;
}
.grids-316 .item-3-1 .inner{
    margin: -380px 0 0;
}

.grids-316 .item-5-2 {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    align-items: center;
}

.grids-316 .item-5-3 {
    flex: 0 0 60%;
    max-width: 60%;
    display: flex;
    align-items: center;
}
.div3-424 {
    padding-top: 80px;
    padding-bottom: 80px;
    background-size: 20% auto, 100% 100%, cover;
    background-image: url(../img/rs424-07/03/03_bg-03-crop.png), url(../img/rs424-07/03/03_bg-02.png), url(../img/rs424-07/03/03_bg-01.jpg);
    background-position: right 65% top 55%,center, center;
    background-repeat: no-repeat;
}
.div3-316 {
    color: #000;
}

.div3-316 .content-title {
    padding-top: 100px;
    text-align: left;
    max-width: 1000px;
}

.div3-316 .picleft {
    align-items: center;
    justify-content: space-between;
    padding-top: 100px;
}

.div3-316 .picleft > img {
    margin-top: 0;
    width: 50%;
    max-width: auto;
}

.div3-316 .picright > img {
    width: 47%;
}

.div3-316 .picright .content {
    max-width: 400px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: left;
}
/* ---- */

.div4-316 {
    color: #000;
    margin-top: 40px;
    background: linear-gradient(to right, #f7f7f7 ,0%, #f7f7f7 55%, transparent 55%, transparent 100%);
}

.div4-316 .content-title {
    padding-top: 100px;
    text-align: left;
    max-width: 1000px;
}
.div4-316 .picleft {
    align-items: center;
    justify-content: space-between;
}

.div4-316 .picleft.pic4-1 {
    padding-top: 80px;
}

.div4-316 .picleft.pic4-1 > img {
    position: relative;
    margin: 0;
    right: -100px;
    width: auto;
    max-width: auto;
}

.div4-316 .picleft.pic4-1 .text {
    top: 100px;
}

.div4-316 .picleft.pic4-1 .content {
    max-width: 1400px;
}
.div4-316 .picleft.pic4-1 .content * {
    max-width: 500px;
}

.div4-316 .picright.pic4-2 {
    padding-bottom: 80px;
}
.div4-316 .picright.pic4-2 .content {
    max-width: 400px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: left;
}

.div5-316 {
    color: #000;
    margin-top: 80px;
    padding-top: 20px;
    padding-bottom: 60px;
    background: linear-gradient(to left, #f7f7f7 ,0%, #f7f7f7 55%, transparent 55%, transparent 100%);
}

.div5-316 .content-title {
    text-align: left;
    padding: 0;
    max-width: 1300px;
    margin-bottom: -50px;
}

.div5-316 .picleft.pic5-1 {
    padding-top: 80px;
}

.div5-316 .picleft.pic5-1 > img {
    position: relative;
    margin: 0;
    width: auto;
    max-width: auto;
}

.div5-316 .picleft.pic5-1 .text {
    top: 0;
}
.div5-316 .picleft.pic5-1 .content * {
    max-width: 400px;
}
.div5-316 .picleft.pic5-1 .content-img > img {
    width: 100px;
}

.div5-316 .picleft.pic5-1 .content-img {
    margin-bottom: 20px;
    text-align: center;
}


.grids-316 .scrollmagic-pin-spacer {
    border-radius: 0 !important;
}


.grids-316 .scroll-sec {
    border-radius: 0 !important;
}

.grids-316 .item {
    padding-bottom: 0;
}


.div3-316 .picleft>img {
    margin-bottom: 100px;
}


/* --- */
@media screen and (max-width: 1240px) {
    .rs316-div2 .disc_wrap {
        margin-top: 0;
        width: 75%;
    }

    .grids-316 .item-3-1 .inner {
        margin: -330px 0 0;
        width: 100%;
        transform: translateX(90%);
    }

    .grids-316 .item-3-2 .inner hr {
        left: 30%;
    }

    .grids-316 .item-3-2 .inner img {
        width: 45%;
        left: 90%;
    }

    .grids-316 .item-3-2 .inner p {
        left: calc(30% + 30px);
    }

    .div3-316 .content-title {
        padding-left: 80px;
    }

    .div4-316 .picleft.pic4-1 > img {
        width: 35%;
        right: -5%;
    }
    .div5-316 .picleft.pic5-1 > img {
        width: 50%;
    }
}


@media screen and (max-width: 992px) {
    
    .grids-316 .inner {
        padding-left: 20px;
    }

    .grids-316 .item-3-2 .inner {
        margin-top: -300px;
    }
    .grids-316 .item-3-2 .inner hr  {
        position: relative;
        height: 200px;
        left: -20%;
    }

    
    .grids-316 .item-3-2 .inner img {
        position: relative;
        left: auto;
        bottom: 0;
        width: 70%;
    }

    .grids-316 .item-3-2 .inner p {
        position: relative;
        left: auto;
        width: 70%;
    }
    .grids-316 .item-3-1 .inner hr  {
        position: relative;
        height: 100px;
    }

    .grids-316 .item-3-1 .inner {
        margin: -320px 0 0;
        width: 80%;
        transform: translateX(60%);
    }

    .div3-316 .content-title {
        text-align: left;
        max-width: 400px;
        margin-right: 0;
    }
    .div3-316 .picleft {
        display: flex;
        flex-direction: column-reverse;
        align-items: self-start;
        justify-content: center;
        padding-top: 60px;
    }

    .div3-316 .picleft .text {
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .div3-316 .picright .content {
        width: 400px;
        max-width: 400px;
        padding-left: 80px;
    }
    .div4-316, .div5-316 {
        background: #f7f7f7;
        background-image: none;
    }

    .div4-316 .picleft.pic4-1 .text {
        top: 0;
        margin-top: 0;
    }
    .div4-316 .picleft.pic4-1 {
        display: flex;
        flex-direction: column-reverse;
        /* align-items: self-start; */
    }
    .div4-316 .picleft.pic4-1 .content * {
        text-align: center;
        max-width: 700px;
    }

    .div4-316 .picleft.pic4-1 > img {
        right: 0;
    }

    .div4-316 .picright.pic4-2 {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
    .div4-316 .picright.pic4-2 .content {
        margin-top: 30px;
        margin-right: auto;
        max-width: 550px;
        text-align: center;
    }

    .div5-316 {
        margin-top: 40px;
        padding: 60px 0;
    }
    

    .div5-316 .content-title {
        text-align: center;
    }

    .div5-316 .picleft.pic5-1 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .div5-316 .picleft.pic5-1 .content-img {
        margin-top: 20px;
    }

    .div5-316 .picleft.pic5-1 > img {
        width: 70%;
    }


    .div5-316 .picleft.pic5-1 .text {
        margin-top: 20px;
        text-align: center;
    }

    .rs316-item-3-icons {
        margin-top: 0;
        margin-right: 0px;
        /* text-align: right; */
    }
}

@media screen and (max-width: 960px) {

    .grids-316 .item-3-2 .inner {
        margin-top: -180px;
    }
    .grids-316 .item-3-2 .inner {
        height: 120px;
    }

    .grids-316 .item-3-2 .inner p {
        width: 90%;
    }

    .grids-316 .item-3-1 .inner {
        margin: -250px 0 0;
        width: 130%;
        transform: translateX(20%);
    }

    .rs316-div2 .content2 {
        transform: translateX(80px);
        padding: 0 0 60px;
    }
}
@media screen and (max-width: 768px) {
    .grids-316 .item-3-2 .inner {
        margin-top: -130px;
        padding-left: 0;
    }

    .grids-316 .item-3-2 .inner hr {
        height: 100px;
    }

    .grids-316 .item-3-2 {
        margin-bottom: 20px;
    }

    .grids-316 .item-3-1 {
        margin-bottom: 20px;
    }

    
    .grids-316 .item-3-1 .inner {
        margin-top: -170px;
    }


    .div3-316 .picright > img {
        width: 80%;
    }

    .div3-316 .content-title {
        padding-left: 40px;
    }
    .div3-316 .picright .content {
        padding-left: 40px;
    }

    .div3-316 .picleft > img {
        width: 60%;
    }
    
    .div4-316 .picleft.pic4-1 > img {
        width: 60%;
    }

    .div5-316 .picleft.pic5-1 > img {
        max-width: 80% !important;
        width: 80%;
    }

    .rs316-item-3-icons * {
        float: none !important;
    }
    .rs316-item-3-icons {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        text-align: center;
        margin-top: 30px;
    }
    .icon-wrap {
        width: 100px;
        float: none;
    }

    .rs316-item-3-icons img {
        width: 75px;
    }
}

@media screen and (max-width: 576px) {
    .grids-316 .item-3-1 .inner {
        margin-top: -136%;
    }
    .grids-316 .item-3-2 .inner {
        margin-top: -57%;
    }
    .rs316-div2 .content2 {
        transform: translateX(10%);
    }
}

/* RS316 END */