#scroll,
section:nth-of-type(1),
section:nth-of-type(2),
section:nth-of-type(3),
section>.sec-pTB.bg-l-grey.mbH.T20 {
    display: none !important
}


.main-contents * {
    box-sizing: border-box
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth
}

html.no-scroll {
    overflow: hidden
}

#backToTop {
    display: none !important
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

.main-contents article,
.main-contents aside,
.main-contents details,
.main-contents figcaption,
.main-contents figure,
.main-contents footer,
.main-contents header,
.main-contents hgroup,
.main-contents menu,
.main-contents nav,
.main-contents section {
    display: block
}

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

a {
    text-decoration: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

#backToTop {
    display: none !important
}

.clearfix {
    clear: both
}

.clearfix::before,
.clearfix::after {
    display: table;
    line-height: 0;
    content: ''
}

.clearfix::after {
    clear: both
}

.container {
    width: 90%;
    max-width: 1160px;
    margin: 0 auto
}

.sprite,
.sprite-box>* {
    display: inline-block;
    background-image: url(https://www.manageengine.cn/log-management/siem/images/streamlining-soc-with-log360-sprite.png);
    background-size: 1500px 3907px;
    background-repeat: no-repeat
}

.btn {
    display: inline-block;
    border: 0;
    outline: 0;
    cursor: pointer;
    text-align: center
}

.float-left {
    float: left
}

.float-right {
    float: right
}

@keyframes shake {
    from {
        transform: translateY(-8px)
    }

    to {
        transform: translateY(8px)
    }
}

@keyframes fade-in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slide-up {
    from {
        transform: translateY(150px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes scale {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
}

@keyframes grow-bar {
    from {
        width: 0
    }

    to {
        width: 142px
    }
}

@keyframes growY {
    from {
        transform: scaleY(0)
    }

    to {
        transform: scaleY(1);
        -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
    }
}

@keyframes grow-arrow {
    from {
        height: 0
    }

    to {
        height: 100%
    }
}

@keyframes grow-graph {
    from {
        width: 0
    }

    to {
        width: 129px
    }
}

@keyframes grow-graph1 {
    from {
        width: 0
    }

    to {
        width: 297px
    }
}

@keyframes grow-tab {
    from {
        width: 0
    }

    to {
        width: 758px
    }
}

@keyframes grow1 {
    from {
        height: 0
    }

    to {
        height: 123px
    }
}

@keyframes grow2 {
    from {
        height: 0
    }

    to {
        height: 126px
    }
}

@keyframes grow3 {
    from {
        height: 0
    }

    to {
        height: 141px
    }
}

@keyframes grow4 {
    from {
        height: 0
    }

    to {
        height: 87px
    }
}

.mt-110 {
    margin-top: 110px !important;
}

.mb-56 {
    margin-bottom: 56px;
}

.mb-210 {
    margin-bottom: 210px !important;
}

.mb-122 {
    margin-bottom: 122px !important;
}

.mt-120 {
    margin-top: 120px !important;
}

.mt-145 {
    margin-top: 145px !important;
}



.graph-section h2 {
    width: 49%;
    margin: 0 auto;
    margin-bottom: 20px;
}

.banner {
    padding: 136px 0 144px 0;
    background: linear-gradient(to bottom, #d3fbdf 60%, #fff);
    overflow-x: hidden
}

.banner .container {
    max-width: 1100px
}

.banner-contents {
    float: left;
    max-width: 590px
}

.banner h1 {
    font-family: 'Zoho_Puvi_Bold', sans-serif;
    font-size: 37.5px;
    line-height: 61px;
    color: #000;
}

.banner p {
    font-family: 'Zoho_Puvi_Medium', sans-serif;
    font-size: 32.5px;
    line-height: 46px;
    margin: 11px 0 40px;
    color: #102336;
}

.banner-btn {
    height: 50px;
    width: 190px;
    background-color: #e8132a;
    font-family: 'Zoho_Puvi_Medium', sans-serif;
    font-size: 18px;
    line-height: 18px;
    color: #fff;
    padding: 16px 0;
    border-radius: 4px;
    transition: all .7s ease;
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -ms-transition: all .7s ease;
    -o-transition: all .7s ease;
}

.banner-btn:hover,
.banner-btn:active,
.banner-btn:focus {
    text-decoration: none;
    background-color: #dd0021;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25)
}

.banner-image {
    float: right;
    width: 370px;
    height: 450px;
    position: relative;
    margin-top: -68px;
}

.banner-box {
    position: relative;
    z-index: 1;
    background-position: -18px -125px;
    width: 394px;
    height: 410px;
}


.banner-box1 {
    width: 462px;
    height: 445px;
    background-position: -462px -103px;
    position: absolute;
    top: 6px;
    left: -43px;
    z-index: 2;
    animation: fade-in 1s ease-in-out 1s both;
    -webkit-animation: fade-in 1s ease-in-out 1s both;
}

.banner-box2 {
    background-position: -19px -1584px;
    position: absolute;
    width: 227px;
    height: 123px;
    bottom: 91px;
    left: 75px;
    z-index: 2;
    animation: grow1 1s ease-in-out 2s both;
    -webkit-animation: grow1 1s ease-in-out 2s both;
    transform-origin: bottom;
}

@keyframes zoom {
    0% {
        transform: scale(4);
        opacity: 0
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.banner-box3 {
    background-position: -437px -6px;
    width: 89px;
    height: 98px;
    position: absolute;
    z-index: 4;
    left: 147px;
    top: 249px;
    animation: zoom 1s ease-in-out 3s both;
    -webkit-animation: zoom 1s ease-in-out 3s both;
}

.banner-box4 {
    background-position: -561px -41px;
    width: 47px;
    height: 47px;
    position: absolute;
    z-index: 4;
    top: 23px;
    left: -18px;
    //animation: shake 2.5s ease-in-out .6s alternate infinite
}

.banner-box5 {
    background-position: -639px -36px;
    width: 34px;
    height: 50px;
    position: absolute;
    z-index: 4;
    top: -29px;
    right: 161px;
    //animation: shake 2.5s ease-in-out .8s alternate infinite;
    //-webkit-animation: shake 2.5s ease-in-out .8s alternate infinite;
}

.banner-box6 {
    background-position: -702px -29px;
    width: 66px;
    height: 65px;
    position: absolute;
    z-index: 4;
    top: 9px;
    right: -31px;
    //animation: shake 2.5s ease-in-out .10s alternate infinite;
    //-webkit-animation: shake 2.5s ease-in-out .10s alternate infinite;
}

.banner-box7 {
    background-position: -12px -12px;
    width: 116px;
    height: 77px;
    position: absolute;
    z-index: 4;
    top: 102px;
    left: -19px;
    animation: growY 1.3s ease-in-out 0.6s both;
    -webkit-animation: growY 1.3s ease-in-out 0.6s alternate infinite;
    transform-origin: bottom
}

.banner-box8 {
    background-position: -160px -26px;
    width: 120px;
    height: 63px;
    position: absolute;
    z-index: 4;
    top: 116px;
    left: 132px;
    animation: grow-graph 2s ease-in-out 0.8s infinite;
    -webkit-animation: grow-graph 2s ease-in-out 0.8s infinite;
}

.banner-box9 {
    background-position: -321px -26px;
    width: 82px;
    height: 59px;
    position: absolute;
    z-index: 4;
    top: 110px;
    left: 314px;
    animation: shake 1.3s ease-in-out 0.10s both;
    -webkit-animation: shake 1.3s ease-in-out 0.10s alternate infinite;
}

@keyframes flow {
    0% {
        background-position: 0 -100000%
    }

    100% {
        background-position: 0 0
    }
}

.banner-box10 {
    background: url(https://www.manageengine.cn/log-management/siem/images/streamlining-soc-with-log360-03.png) repeat-y 0 0;
    background-size: 332px 157px;
    width: 332px;
    height: 70px;
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0 auto;
    -webkit-transition: flow 3s ease-out;
    -moz-transition: flow 3s ease-out;
    -o-transition: flow 3s ease-out;
    transition: flow 3s ease-out;
    animation: flow 3000s linear infinite;
    -webkit-animation: flow 3000s linear infinite;
}

.info-section {}

.info-section .sec-cont {}

.info-section .sec-cont .sec-head {
    color: #d82633;
    font-size: 36px;
    font-family: 'Zoho_Puvi_Bold';
    margin-bottom: 28px;
}

.info-section .sec-cont1 {
    margin-top: 136px;
}

.info-section .sec-cont {
    text-align: center;
}

.info-section .sec-cont p {
    font-size: 20px;
    line-height: 36px;
    color: #102336;
}

.info-section .sec-cont1 .sub-head {
    font-size: 35px;
    color: #102336;
    text-align: center;
    font-family: 'Zoho_Puvi_Bold';
    margin-bottom: 78px;
}

@media screen and (max-width: 1440px) {
    .banner-image {
        margin-right: 50px
    }
}

@media screen and (max-width: 1250px) {
    .banner-image {
        float: none;
        margin: 0 auto;
        display: block
    }

    .banner-contents {
        width: 100%;
        max-width: 100%;
        text-align: center;
        margin-bottom: 100px;
        float: none
    }

    .banner h1 {
        margin: 0 auto
    }
}

@media screen and (max-width: 600px) {
    .banner-image {
        display: none
    }

    .banner-contents {
        margin-bottom: 0
    }

    .banner h1 {
        font-size: 30px;
        line-height: 1.7
    }
}

p {
    font-family: 'Zoho_Puvi_Regular', sans-serif
}

.main-contents {
    width: 100vw;
    overflow-x: hidden
}

.about-section .container {
    max-width: 1210px;
    margin-bottom: 151px
}

.about-section {
    position: relative;
}

.about-image {
    display: block;
    margin: 0 auto;
    background-position: -391px -5px;
    width: 317px;
    height: 217px;
    position: absolute;
    z-index: 3;
}

.about-image.is-visible {
    opacity: 0;
    transform: translateY(150px)
}

.about-image.is-shown {
    opacity: 1;
    transform: translateY(0);
    animation: fade-in .7s linear .2s both, slide-up .7s cubic-bezier(0.26, 0.67, 0.48, 0.91) .2s both
}

.about-contents {
    background-color: #fff9e7;
    border: #ffc000 solid 1px;
    padding: 42px 70px 62px 333px;
    border-radius: 4px;
    position: relative;
    z-index: 2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.about-contents p {
    font-size: 18px;
    line-height: 34px;
    color: #102336;

}

.about-contents p:last-child {
    margin-top: 20px
}

.about-contents::before,
.about-contents::after {
    content: "";
    background: url('https://www.manageengine.cn/log-management/siem/images/streamlining-soc-with-log360-sprite.png') no-repeat -1400px -422px;
    background-size: 1500px 3907px;
    width: 58px;
    height: 398px;
    position: absolute;
    top: -55px;
    left: -58px;
}

.about-box {
    background: url(https://www.manageengine.cn/log-management/siem/images/streamlining-soc-with-log360-01.png) no-repeat 0 0;
    position: absolute;
    top: -195px;
    left: -220px;
    z-index: 1;
    background-size: 1213px 751px;
    width: 870px;
    height: 721px;
    display: inline-block;

}

.about-box1 {
    background-position: -1178px -44px;
    width: 313px;
    height: 332px;
    display: inline-block;
    margin-left: 34px;
    margin-top: 32px;
    animation: scale 0.7s ease-in-out 0.5s both;
    -webkit-animation: scale 0.7s ease-in-out 0.5s both;
}

.is-shown .about-box2 {
    animation: growY 0.6s ease-in-out 0.6s both;
    -webkit-animation: growY 0.6s ease-in-out 0.6s both;
}

.about-box2 {
    background-position: -975px -37px;
    width: 159px;
    height: 195px;
    display: inline-block;
    position: absolute;
    top: 51px;
    left: 80px;

    transform-origin: bottom;
}

.is-shown .about-box3 {
    animation: zoom 0.6s ease-in-out 1s both;
    -webkit-animation: zoom 0.6s ease-in-out 1s both;
}

.about-box3 {
    background-position: -1005px -400px;
    width: 57px;
    height: 53px;
    display: inline-block;
    position: absolute;
    top: 120px;
    left: 6px;

}

.is-shown .about-box4 {
    animation: zoom 0.6s ease-in-out 1.4s both;
    -webkit-animation: zoom 0.6s ease-in-out 1.4s both;
}

.about-box4 {
    background-position: -1060px -400px;
    width: 57px;
    height: 53px;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 130px;

}

.is-shown .about-box5 {
    animation: zoom 0.6s ease-in-out 1.8s both;
    -webkit-animation: zoom 0.6s ease-in-out 1.8s both;
}

.about-box5 {
    background-position: -1115px -400px;
    width: 57px;
    height: 53px;
    display: inline-block;
    position: absolute;
    top: 100px;
    right: 6px;

}

.about-contents::after {
    left: auto;
    right: -58px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}

@media screen and (max-width: 600px) {
    .about-contents {
        padding: 50px 15px
    }
}

@media screen and (max-width: 375px) {
    .about-image {
        display: none
    }
}

.col-layout {
    margin-bottom: 92px;
    position: relative
}

.col-layout p {
    font-size: 16px;
    line-height: 31px;
    color: #102336
}

.col-layout p+p {
    margin-top: 24px
}

.half-col {
    max-width: 500px;
    margin-top: 140px;
}

.half-col h2 {
    margin-bottom: 14px;
}

.graph-section {
    text-align: center
}

.graph-section p {
    max-width: 75%;
    margin: 0 auto
}

h2 {
    font-family: 'Zoho_Puvi_SemiBold', sans-serif;
    font-size: 30px;
    line-height: 39px;
    color: #102336;
    margin-bottom: 24px
}

.section-image {
    position: absolute;
    height: 100%;
    top: -15px
}

.section-image * {
    position: absolute
}

.section-image.is-visible {
    opacity: 0;
    transform: translateY(150px)
}

.section-image.is-shown {
    opacity: 1;
    transform: translateY(0);
    animation: fade-in .6s linear .2s both, slide-up .6s cubic-bezier(0.26, 0.67, 0.48, 0.91) .2s both
}

.col-1 {
    min-height: 570px
}

.s1-image {
    right: -100px
}

.s1-main {
    background-position: -16px -561px;
    width: 695px;
    height: 509px;

    position: relative;
    z-index: 2
}

.s1-chart {
    background-position: -867px -563px;
    width: 502px;
    height: 245px;
    top: 314px;
    left: -17px;
    z-index: 3;
    transform-origin: center
}

.is-shown .s1-chart {
    animation: scale 0.6s ease-in-out .6s both
}

.s1-bar {
    background-position: -276px -267px;
    width: 157px;
    height: 77px;
    z-index: 4;
    top: 208px;
    right: 170px;
    transform-origin: bottom
}

.is-shown .s1-bar {
    animation: growY 1s ease-in-out 2.25s both
}

.s1-table {
    background-position: -6px -1615px;
    width: 628px;
    height: 240px;
    z-index: 5;
    left: 0;
    top: 330px;
    transform-origin: top
}

.is-shown .s1-table {
    animation: scale 1s ease-in-out 3.5s both
}

.col-2 {
    min-height: 570px
}

.s2-image {
    left: -100px
}

.s2-main {
    background-position: -435px -1340px;
    width: 695px;
    height: 398px;
    position: relative;
    z-index: 2
}

.s2-table {
    background-position: 0px -1732px;
    width: 494px;
    height: 341px;
    position: absolute;
    z-index: 3;
    top: 99px;
    left: 193px;
    transform-origin: center
}

.is-shown .s2-table {
    animation:fade-in 0.6s linear 0.6s both;
    -webkit-animation:fade-in 0.6s linear 0.6s both;
}


.s2-popup {
    background-position: -1170px -1372px;
    width: 219px;
    height: 115px;
    z-index: 5;
    top: 81px;
    left: 511px;
    transform-origin: center;
}

.is-shown .s2-popup {
    animation: scale 0.6s ease-in-out 1s both;
    -webkit-animation: scale 0.6s ease-in-out 1s both;
}

.s2-tooltip {
    height: 303px;
    width: 303px;
    background-position: -715px -5px;
    top: 305px;
    left: 470px;
    z-index: 6;
    transform-origin: top center
}

.is-shown .s2-tooltip {
    animation: scale 1s ease-in-out 4.75s both
}

.col-3 {
    min-height: 510px
}

.s3-image {
    right: -100px
}

.s3-main {
    background-position: -7px -2152px;
    width: 654px;
    height: 464px;
    position: relative;
    z-index: 2;
}

.s3-table {
    background-position: -1165px -1501px;
    width: 327px;
    height: 82px;
    top: 48px;
    left: 179px;
    z-index: 3;
    transform-origin: center;
}

.is-shown .s3-table {
    animation: scale 0.6s ease-in-out 0.6s both
}

.s3-tab {
       width: 498px;
       height: 145px;
       background-position: -556px -1946px;
       top: 184px;
       left: 53px;
       z-index: 5;
}

.is-shown .s3-tab {
    animation: fade-in 0.6s linear 1.2s both;
    -webkit-animation: fade-in 0.6s linear 1.2s both;
}

.s3-popup {
    background-position: -558px -1761px;
    z-index: 5;
    left: 60px;
    top: 351px;
    transform-origin: top;
    width: 543px;
    height: 145px;
}

.is-shown .s3-popup {
    animation: scale 0.6s ease-in-out 1.6s both
}

.graph-images {
    margin-top: 50px;
    position: relative;
    height: 525px
}

.s4-image {
    position: relative;
    z-index: 2;
    width: 906.5px;
    margin: auto
}

.s4-main {
    width: 920px;
    height: 454px;
    background-position: -8px -2649px;
    position: relative;
    z-index: 2;
}

.bg-image {
    width: 100vw;
    height: auto;
    position: absolute;
    top: 55px;
    left: 0;
    z-index: 1;
    opacity: .7
}

.s4-chart1 {
    background-position: -1398px -2832px;
    width: 98px;
    height: 79px;
    left: 596px;
    top: 3px;
    z-index: 3;
    transform-origin: center;
}

.is-shown .s4-chart1 {
    animation: scale 0.6s ease-in-out 0.6s both;
    -webkit-animation: scale 0.6s ease-in-out 0.6s both;
}

.s4-chart1-bars {
   background-position: -1258px -2832px;
   width: 127px;
   height: 79px;
   left: 456px;
   top: 3px;
   z-index: 3;
   transform-origin: center;
}

.is-shown .s4-chart1-bars {
    animation: scale 0.6s ease-in-out 1s both;
    -webkit-animation: scale 0.6s ease-in-out 1s both;
}

.s4-chart2 {
        background-position: -1100px -2832px;
        width: 145px;
        height: 79px;
        top: 3px;
        left: 298px;
        z-index: 3;
        transform-origin: center;
}

.is-shown .s4-chart2 {
    animation: scale 0.6s ease-in-out 1.4s both;
    -webkit-animation:scale 0.6s ease-in-out 1.4s both;
}

.s4-chart2-bars {
        background-position:-500px -3509px;
        width: 186px;
        height: 105px;
        top: -11px;
        left: 111px;
        z-index: 3;
        transform-origin: center;
}

.is-shown .s4-chart2-bars {
    animation: scale 0.6s ease-in-out 1.8s both;
    -webkit-animation: scale 0.6s ease-in-out 1.8s both;
}

.s4-chart3 {
        background-position: -1127px -1995px;
        width: 373px;
        height: 299px;
        top: 81px;
        left: 383px;
        z-index: 3;
}

.is-shown .s4-chart3 {
    animation: scale 0.6s ease-in-out 2.2s both;
    -webkit-animation: scale 0.6s ease-in-out 2.2s both;
}

.s4-chart8 {
   background-position: -1192px -2595px;
   width: 266px;
   height: 209px;
   top: 98px;
   left: 127px;
   z-index: 3;
   
}

.is-shown .s4-chart8 {
    animation: scale 0.6s ease-in-out 2.6s both;
    -webkit-animation: scale 0.6s ease-in-out 2.6s both;
}

.s4-chart3-graph {
    background-position: -738px -2135px;
    width: 320px;
    height: 203px;
    top: 145px;
    left: 409px;
    z-index: 3;
    transform-origin: left;
}

@keyframes grow5 {
    from {
        width: 0
    }

    to {
        width: 320px
    }
}

.is-shown .s4-chart3-graph {
    animation: grow5 0.6s ease-in-out 3s both;
    -webkit-animation: grow5 0.6s ease-in-out 3s both;
}

.s4-chart4 {
    background-position: -1165px -1593px;
    width: 335px;
    height: 228px;
    top: 301px;
    left: 68px;
    z-index: 3;
    transform-origin: center;
}
.is-shown .s4-chart4 {
    animation: scale 0.6s ease-in-out 3.4s both;
    -webkit-animation: scale 0.6s ease-in-out 3.4s both;
}



@keyframes grow6 {
    from {
        width: 0
    }

    to {
        width: 297px
    }
}

.is-shown .s4-chart5 {
    animation: grow6 1s ease-in-out 8s both;
    -webkit-animation: grow6 1s ease-in-out 8s both;
}

.s4-chart6 {
    background-position: -730px -2353px;
    width: 380px;
    height: 270px;
    top: 218px;
    left: 621px;
    z-index: 3;
    transform-origin: center;
}

.is-shown .s4-chart6 {
    animation: scale 0.6s ease-in-out 3.6s both;
    -webkit-animation: scale 0.6s ease-in-out 3.6s both;
}


.s4-chart7 {
   background-position: -1203px -2400px;
   width: 228px;
   height: 87px;
   bottom: 129px;
   top: auto;
   left: 710px;
   z-index: 3;
   transform-origin: bottom;
}

.is-shown .s4-chart7 {
    animation: grow4 0.6s ease-in-out 4s both;
    -webkit-animation: grow4 0.6s ease-in-out 4s both;
}

.col-5 {
    min-height: 570px;
        margin-bottom: 112px;
}

.col-5 .half-col {
    padding-left: 35px !important;
}

.s5-image {
    left: -100px
}

.s5-main {
       background-position: -788px -3351px;
       width: 690px;
       height: 507px;
       position: relative;
       z-index: 2;
}

.s5-table {
        background-position: -9px -3105px;
        width: 384px;
        height: 326px;
        top: 139px;
        left: 22px;
        z-index: 3;
        transform-origin: center;
}

.is-shown .s5-table {
    animation: scale 0.6s ease-in-out 0.6s both
}



.s5-popup {
    background-position: -399px -3208px;
    width: 228px;
    height: 126px;
    z-index: 5;
    top: 242px;
    left: 117px;
    transform-origin: bottom
}

.is-shown .s5-popup {
    animation: growY 0.6s ease-in-out 1s both;
    -webkit-animation: growY 0.6s ease-in-out 1s both;
}

.s5-table1 {
    background-position: -1111px -2937px;
    width: 380px;
    height: 372px;
    z-index: 5;
    top: 169px;
    left: 375px;
    transform-origin: center
}

.is-shown .s5-table1 {
    animation: scale 0.6s ease-in-out 1s both;
    -webkit-animation: scale 0.6s ease-in-out 1s both;
}

.s5-popup1 {
        background-position: -60px -3717px;
        width: 228px;
        height: 141px;
        z-index: 5;
        top: 282px;
        left: 473px;
        transform-origin: bottom
}

.is-shown .s5-popup1 {
    animation: growY 0.6s ease-in-out 1.4s both;
    -webkit-animation: growY 0.6s ease-in-out 1.4s both;
}

.col-6 {
    min-height: 570px
}

.s6-image {
    right: -180px
}

.s6-main {
    background-position: -738px -884px;
    width: 762px;
    height: 446px;
    position: relative;
    z-index: 2;
}

.s6-tab {
   background-position: -23px -3465px;
   width: 431px;
   height: 170px;
   top: 90px;
   left: 196px;
   z-index: 3;
   transform-origin: center;
}

.is-shown .s6-tab {
    animation: scale 0.6s linear 0.6s both;
    -webkit-animation: scale 0.6s linear 0.6s both;
}

.s6-bar1 {
        

        background-position: -79px -1120px;
        width: 449px;
        height: 163px;
        top: 265px;
        left: 179px;
        z-index: 4;
        transform-origin: center;
}

.is-shown .s6-bar1 {
    animation: scale 0.6s linear 1s both;
    -webkit-animation: scale 0.6s linear 1s both;
}



.screenshot-img {
    margin-top: 50px;
    width: 100%;
    height: auto
}

.mob-v {
    display: none;
}

@media screen and (min-width: 768px) {
    .screenshot-img {
        display: none
    }
}

@media screen and (max-width: 1250px) {
    .half-col {
        max-width: 100%;
        float: none !important;
        margin-bottom: 50px;
        text-align: center;
    }

    .about-contents::after,
    .about-contents::before {
        display: none;
    }

    .about-section .container {
        max-width: 100%;
    }

    .about-contents {
        padding: 12px 10px 58px 370px;
    }

    .s4-image {
        width: 80% !important;
    }

    .info-section .sec-cont1 .sub-head {
        margin-bottom: -100px;
    }

    .graph-section h2 {
        width: 100%;
    }

    .graph-section p {
        max-width: 100%;
    }
    .col-5 .half-col {
        padding-left: 0 !important;
    }

    .col-layout {
        min-height: initial
    }

    .section-image {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: fit-content;
        margin: 0 auto
    }

    

    .s4-main {
        position: absolute;
        top: 0;
        left: 10px
    }
}

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

    .bg-image,
    .graph-images,
    .about-box {
        display: none !important
    }

    .screenshot-4 {
        display: block !important
    }

    .s4-image {
        width: 100% !important;
    }
    .info-section .sec-cont1 .sub-head {
        margin-bottom: -100px;
    }

    .about-image {
        display: none;
    }

    .about-section .container {
        margin-bottom: 70px;
    }

    .about-contents {
        padding: 30px;
    }

    .about-contents p {
        margin-top: 0 !important;
    }

    .info-section .sec-cont .sec-head {
        line-height: 50px;
    }
    .sprite-box {
        display: none;
    }
    .mob-v {
        display: block;
    }
}

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

    .section-image,
    .bg-image,
    .graph-images {
        display: none !important
    }

    .half-col {
        margin-bottom: 0;
        text-align: center
    }

    .col-layout {
        margin-bottom: 75px
    }

    .half-col {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .col-layout {
        margin: 20px 0 !important;
    }

    .banner {
        padding: 80px 0 30px 0;
    }

    .banner p {
        font-size: 22px;
        line-height: 32px;
        margin-bottom: 21px;
    }

    .mob-v {
        margin: 30px 0;
        text-align: center;
    }

    .banner-contents .mob-v img {
        max-width: 80%;
        width: 100%;
    }

    .about-contents p {
        font-size: 16px;
    }

    .info-section .sec-cont .sec-head {
        font-size: 27px;
        line-height: 39px;
    }

    .info-section .sec-cont p {
        font-size: 16px;
    }

    .info-section .sec-cont1 .sub-head {
        margin-bottom: 0;
        font-size: 27px;
        line-height: 34px;
    }

    .info-section .sec-cont1 {
        margin-top: 60px;
    }

    .half-col h2,
    .graph-section h2 {
        font-size: 23px;
        line-height: 32px;
    }

    .banner h1 {
        font-size: 29px;
        line-height: 35px;
    }
}


.feb-pre-footer {
    background-color: #f5f5f5;
    padding: 70px 0 72px;
    font-family: 'Zoho_Puvi_Regular'
}

.feb-pre-footer * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.feb-pre-footer ul,
.feb-pre-footer ol {
    list-style-type: none
}

.feb-pre-footer a,
.feb-pre-footer a:hover {
    text-decoration: none
}

.feb-pre-footer .features-sprite {
    background-image: url(https://www.manageengine.cn/log-management/siem/../images/log360-features-sprite.png);
    background-size: 579px 820px;
    display: inline-block
}

.feb-pre-footer .feb-pre-footer-container {
    max-width: 1240px;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto
}

.feb-pre-footer .mt-42 {
    margin-top: 42px
}

.feb-pre-footer .col1 {
    float: left;
    width: 40%;
    padding-right: 20px
}

.feb-pre-footer .col1 .plogo-base {
    margin-left: -15px
}

.feb-pre-footer .col1 .plogo-base ul li {
    float: left;
    width: 127px;
    height: 57px;
    border-radius: 4px;
    text-align: center;
    background-color: #fff;
    margin-left: 15px;
    margin-bottom: 15px
}

.feb-pre-footer .col1 .plogo-base ul li i,
.feb-pre-footer .col1 .plogo-base ul li a {
    height: 57px
}

.feb-pre-footer .col1 .plogo-base ul li .icn-plogo1 {
    background-position: -12px -512px;
    width: 87px
}

.feb-pre-footer .col1 .plogo-base ul li .icn-plogo3 {
    background-position: -240px -511px;
    width: 60px
}

.feb-pre-footer .col1 .vid-sec {
    margin-top: 25px;
    width: 411px;
    height: 231px;
    position: relative
}

.feb-pre-footer .col1 .vid-sec .icn-vid {
    background-position: -9px -579px;
    width: 411px;
    height: 231px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0
}

.feb-pre-footer .col20 {
    width: 20%;
    float: left;
    padding-right: 10px;
    padding-top: 4px
}

.feb-pre-footer .col20 h4 {
    color: #272727;
    font-size: 19px;
    font-family: 'Zoho_Puvi_Bold';
    margin-left: 0;
    margin-bottom: 14px
}

.feb-pre-footer .col20 ul li {
    margin-bottom: 10px
}

.feb-pre-footer .col20 ul li a {
    color: #272727;
    font-size: 14px;
    line-height: 25px
}

.feb-pre-footer .col20 ul li a:hover {
    text-decoration: underline
}

.feb-pre-footer .col20 ul li a[href$="#"] {
    display: none
}

.feb-pre-footer .col20.col3 {
    padding-left: 30px
}

.feb-pre-footer .col20.col4 {
    padding-left: 30px
}

@media screen and (max-width: 1200px) {
    .feb-pre-footer .col1 .vid-sec {
        width: 90%
    }
}

@media screen and (max-width: 1113px) {
    .feb-pre-footer .col1 .vid-sec .icn-vid {
        zoom: .8
    }
}

@media screen and (max-width: 1023px) {
    .feb-pre-footer {
        padding: 50px 0 !important
    }

    .feb-pre-footer .col1 {
        width: 100%
    }

    .feb-pre-footer .col20 {
        width: 33.333%
    }

    .feb-pre-footer .col1 .plogo-base ul li {
        width: calc(16.666% - 10px);
        margin-left: 10px
    }

    .feb-pre-footer .col1 .vid-sec {
        width: 50%;
        margin-bottom: 50px
    }
}

@media screen and (max-width: 1200px) {
    .feb-pre-footer .col1 .vid-sec {
        width: 90%
    }
}

@media screen and (max-width: 767px) {
    .feb-pre-footer .col1 .vid-sec {
        height: auto
    }
}

@media screen and (max-width: 567px) {
    .feb-pre-footer .col1 .plogo-base ul li {
        width: calc(50% - 10px)
    }

    .feb-pre-footer .col20 {
        width: 100%;
        padding: 10px 0 !important
    }

    .feb-pre-footer .col20:last-child {
        padding-bottom: 0 !important
    }

    .feb-pre-footer .col1 {
        padding: 0
    }

    .feb-pre-footer .col1 .vid-sec {
        width: 100%;
        height: auto
    }

    .feb-pre-footer .col1 .vid-sec .icn-vid {
        zoom: .6
    }

    .feb-pre-footer .col1 .vid-sec iframe {
        width: 100%
    }
}