#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/images/managing-sensitive-data-with-log360-sprite.png);
      background-size: 1747px 4069px;
      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 rotate {
      from {
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
    }
    
      to {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
    }
    
    
    @keyframes grow-height {
      from {
        height: 0;
      }
    
      to {
        height: 231px;
      }
    }
    
    @keyframes grow-width {
      from {
        width: 0;
      }
    
      to {
        width: 106px;
      }
    }
    
    @keyframes grow-width1 {
      from {
        width: 0;
      }
    
      to {
        width: 68px;
      }
    }
    
    @keyframes zoom1 {
      0% {
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -o-transform: scale(0.9);
    }
    
      50% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
    100% {
      transform: scale(0.9);
      -webkit-transform: scale(0.9);
      -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
      -o-transform: scale(0.9);
    }
    }
    
    @keyframes zoom2 {
      0% {
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
    }
    
      
    
      100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
    }
    
    @keyframes zoom3 {
      0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
    
      50% {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
    }
    
      100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
    }
    
    @keyframes fade1 {
      0% {
        opacity: 1;
      }
    
      50% {
        opacity: 0.80;
      }
    
      100% {
        opacity: 1;
      }
    }
    
    @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)
      }
    }
    
    @keyframes grow-bar {
      from {
        width: 0
      }
    
      to {
        width: 185px
      }
    }
    
    @keyframes growY {
      from {
        transform: scaleY(0)
      }
    
      to {
        transform: scaleY(1)
      }
    }
    
    @keyframes growX {
      from {
        width: 0;
      }
    
      to {
        width: 342px;
      }
    }
    
    @keyframes growY1 {
      from {
        height: 0;
      }
    
      to {
        height: 93px;
    }
    }
    
    @keyframes grow-arrow {
      from {
        height: 0
      }
    
      to {
        height: 76px
      }
    }
    
    @keyframes grow-graph {
      from {
        width: 0
      }
    
      to {
        width: 341px
      }
    }
    
    @keyframes grow-tab {
      from {
        width: 0
      }
    
      to {
        width: 758px
      }
    }
    
    .banner {
      padding: 60px 0;
      background: linear-gradient(to bottom, #d1f9de 60%, #fff);
      overflow-x: hidden;
      
    }
    
    .about-section {
      padding-top: 49px;
    }
    
    .banner .container {
      max-width: 1100px
    }
    
    .banner-contents {
      float: left;
      max-width: 590px;
      padding-top: 60px;
    }
    
    .banner h1 {
      font-family: 'Zoho_Puvi_Bold', sans-serif;
      font-size: 42px;
      line-height: 61px;
      color: #102336
    }
    
    .banner p {
      font-family: 'Zoho_Puvi_Regular', sans-serif;
      font-size: 18px;
      line-height: 32px;
      margin: 15px 0 27px;
      color: #102336
    }
    
    .banner-btn {
      height: 50px;
      width: 207px;
      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-in-out;
      -webkit-transition: all .7s ease-in-out;
      -moz-transition: all .7s ease-in-out;
      -ms-transition: all .7s ease-in-out;
      -o-transition: all .7s ease-in-out;
    }
    
    .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: 410px;
      position: relative
    }
    
    .img-1 {
      position: relative;
      z-index: 2;
      width: 393px;
      height: 410px;
      background-position: -20px -315px;
    }
    
    .img-2 {
      background-position: -11px 0;
      width: 293px;
      height: 277px;
      position: absolute;
      bottom: 43px;
      left: 48px;
      right: 0;
      
      z-index: 3;
      /* animation: shake 2.5s ease-in-out;
      -webkit-animation: shake 2.5s ease-in-out; */
    }
    
    .img-6 {
      width: 175px;
      height: 175px;
      background-position: -365px -16px;
      position: absolute;
      top: 23px;
      left: -25px;
      z-index: 2;
      animation: rotate 22s linear infinite;
      -webkit-animation: rotate 22s linear infinite;
      transform-origin: center;
    }
    
    .img-7 {
      width: 134px;
      height: 148px;
      background-position: -593px -16px;
      position: absolute;
      bottom: 50px;
      left: 243px;
      z-index: 3;
      animation: zoom1 5s linear infinite;
      -webkit-animation: zoom1 5s linear infinite;
      transform-origin: center;
    }
    
    .img-3 {
      background-position: -908px -114px;
      width: 76px;
      height: 76px;
      position: absolute;
      z-index: 4;
      left: 81px;
      top: 155px;
      animation: fade1 1.2s ease-in-out  infinite;
      -webkit-animation: fade1 1.2s ease-in-out  infinite;
    }
    
    .img-4 {
      background-position: -820px -34px;
      width: 106px;
      height: 8px;
      position: absolute;
      z-index: 4;
      top: 175px;
      left: 177px;
      animation: grow-width 3s ease-in-out .6s  infinite;
      -webkit-animation: grow-width 3s ease-in-out .6s  infinite;
    }
    
    .img-5 {
      background-position: -840px -69px;
      width: 68px;
      height: 8px;
      position: absolute;
      z-index: 4;
      top: 201px;
      left: 177px;
      animation: grow-width1 3s ease-in-out .6s infinite;
      -webkit-animation: grow-width1 3s ease-in-out .6s infinite;
    }
    
    .img-8 {
      background-position: -485px -485px;
      width: 335px;
      height: 231px;
      position: absolute;
      bottom: 1px;
      left: -1px;
      z-index: 1;
      animation: grow-height 0.6s ease-in-out .5s;
      -webkit-animation: grow-height 0.6s ease-in-out .5s;
    }
    
    .img-9{
      background-position: -512px -235px;
      width: 185px;
      height: 205px;
      position: absolute;
      bottom: 33px;
      left: 84px;
      z-index: 3;
      animation: zoom2 0.6s ease-in-out 1.6s;
      -webkit-animation: zoom2 0.6s ease-in-out 1.6s;
      
    }
    
    
    
    @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;
        padding-top: 0;
      }
    
      .banner h1 {
        margin: 0 auto
      }
      .s4-image {
        width: 840px !important;
      }
      .graph-section {
        text-align: left !important;
      }
      .s36 {
        bottom: 127px !important;
      }
    }
    
    @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: 100px;
      position: relative;
    }
    
    .about-image {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 9;
      
    }
    .graph-section .ser-list {
      text-align: left;
      display: inline-block;
      margin-top: 22px;
    }
    
    .graph-section .ser-list p {
      max-width: 100%;
    }
    
    .about-contents {
      background-color: #fbfae6;
      border: #fef1a1 solid 1px;
      padding: 49px 49px 44px 372px;
      border-radius: 5px;
      position: relative;
      z-index: 2
    }
    
    .about-contents p {
      font-size: 18px;
      line-height: 34px;
      color: #102336;
      
    }
    
    .about-contents p:last-child {
      margin-top: 11px
    }
    
    @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: 110px;
      position: relative
    }
    
    .col-layout p {
      font-size: 16px;
      line-height: 28px;
      color: #102336
    }
    
    .col-layout ul {
      margin-top: 11px;
    }
    
    .col-layout  ul li  {
      font-size: 16px;
      line-height: 28px;
      color: #102336;
      font-family: 'ZohoPuvi',sans-serif;
      font-weight:300;
      padding-left: 33px;
      position: relative;
      margin-bottom: 11px;
    }
    
    .col-layout ul li:before {
      content: "";
      background-position: -829px -142px;
      background-image: url(https://www.manageengine.cn/log-management/images/managing-sensitive-data-with-log360-sprite.png);
      background-size: 1747px 4069px;
      background-repeat: no-repeat;
      position: absolute;
      top: 8px;
      left: 4px;
      width: 11px;
      height: 11px;
    }
    
    .col-layout p+p {
      margin-top: 12px
    }
    
    .half-col {
      max-width: 500px
    }
    
    .graph-section {
      text-align: center;
      margin-bottom: 175px;
    }
    .col-5 .half-col {
      padding-top: 25px;
    }
    
    .graph-section p {
      max-width: 1000px;
      margin: 0 auto
    }
    
    h2 {
      font-family: 'Zoho_Puvi_Bold', sans-serif;
      font-size: 34px;
      line-height: 48px;
      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 .7s linear .2s both, slide-up .7s cubic-bezier(0.26, 0.67, 0.48, 0.91) .2s both
    }
    
    .col-1 {
      min-height: 625px
    }
    
    .s1-image {
      right: -100px
    }
    
    .s1 {
      background-position: -20px -796px;
      width: 666px;
      height: 574px;
      position: relative;
      
    }
    
    .s2 {
      background-position: -1078px -3px;
      width: 630px;
      height: 200px;
      top: 282px;
      right: 53px;
      z-index: 1;
      transform-origin: center
    }
    
    .is-shown .s2 {
      animation: scale 0.8s ease-in-out .8s both;
      -webkit-animation: scale 0.8s ease-in-out .8s both;
    }
    
    .s3 {
      background-position: -874px -355px;
      width: 497px;
      height: 227px;
      z-index: 2;
      top: 430px;
      right: 117px;
      transform-origin: center
    }
    
    .is-shown .s3 {
      animation: scale 0.8s ease-in-out 1.6s both;
      -webkit-animation: scale 0.8s ease-in-out 1.6s both;
    }
    
    .s4 {
      background-position: -1094px -232px;
      width: 311px;
      height: 89px;
      z-index: 3;
      left: 151px;
      top: 513px;
      transform-origin: bottom
    }
    
    .is-shown .s4 {
      animation: growY 1s ease-in-out 2.4s both;
      -webkit-animation: growY 1s ease-in-out 2.4s both;
    }
    
    .s5 {
      background-position: -911px -224px;
      width: 70px;
      height: 70px;
      z-index: 3;
      left: -4px;
      top: 176px;
      transform-origin: center
    }
    
    .is-shown .s5 {
      animation:fade-in 1s ease-in-out 1.4s both,zoom3 1.4s ease-in-out 1.4s both;
      -webkit-animation:fade-in 1s ease-in-out 1.4s both,zoom3 1.4s ease-in-out 1.4s both;
    }
    
    .col-2 {
      min-height: 570px;
      margin-bottom: 92px;
    }
    
    .col-3 .half-col {
      padding-top: 83px;
    }
    
    .s2-image {
      left: -100px
    }
    
    .s6 {
      background-position: -789px -910px;
      width: 667px;
      height: 477px;
      position: relative;
      
    }
    
    .s7 {
      background-position: -20px -1441px;
      width: 316px;
      height: 387px;
      position: absolute;
      z-index: 1;
      top: 92px;
      left: 344px;
      transform-origin: center
    }
    
    .is-shown .s7 {
      animation: scale 0.8s ease-in-out .8s both;
      -webkit-animation: scale 0.8s ease-in-out .8s both;
    }
    
    .s8 {
      background-position: -874px -636px;
      width: 665px;
      height: 177px;
      top: 413px;
      left: 38px;
      z-index: 2
    }
    
    .is-shown .s8 {
      animation: scale 0.8s linear 1.6s both;
      -webkit-animation: scale 0.8s linear 1.6s both;
    }
    
    .s9 {
      background-position: -1460px -245px;
      width: 70px;
      height: 70px;
      z-index: 1;
      top: 27px;
      left: 470px;
    }
    
    .mob-view {
      display: none;
      text-align: center;
      margin-top: 40px;
    }
    
    .mob-view img {
      display: inline-block;
    }
    
    
    
    .is-shown .s9 {
      animation:fade-in 1s ease-in-out 1.1s both, zoom3 0.8s ease-in-out 1.1s both;
      -webkit-animation:fade-in 1s ease-in-out 1.1s both, zoom3 0.8s ease-in-out 1.1s both;
    }
    
    
    
    .col-3 {
      min-height: 525px;
      margin-bottom: 135px;
    }
    
    .s3-image {
      right: -100px
    }
    
    .s10 {
      background-position: -76px -1903px;
      width: 646px;
      height: 471px;
      position: relative;
     
    }
    
    .s11 {
      background-position: -1596px -1756px;
      width: 94px;
      height: 59px;
      top: 73px;
      right: 110px;
      z-index: 1;
      transform-origin: center
    }
    
    .is-shown .s11 {
      animation: scale 0.8s ease-in-out 0.8s both;
      -webkit-animation: scale 0.8s ease-in-out 0.8s both;
    }
    
    .s12 {
      background-position: -1450px -1756px;
      width: 134px;
      height: 59px;
      z-index: 1;
      top: 73px;
      right: 216px;
      transform-origin: center
    }
    
    .is-shown .s12 {
      animation: scale 0.8s ease-in-out 1.6s both;
      -webkit-animation: scale 0.8s ease-in-out 1.6s both;
    }
    
    .s13 {
      background-position: -1318px -1756px;
      width: 121px;
      height: 59px;
      top: 73px;
      right: 362px;
      z-index: 1;
      transform-origin: center;
    }
    
    .is-shown .s13 {
      animation: scale 0.8s ease-in-out 2.4s both;
      -webkit-animation: scale 0.8s ease-in-out 2.4s both;
    }
    
    .s14 {
      background-position: -1303px -1835px;
      width: 153px;
      height: 94px;
      z-index: 1;
      right: 479px;
      top: 55px;
      transform-origin: center
    }
    
    .is-shown .s14 {
      animation: scale 0.8s ease-in-out 3.2s both;
      -webkit-animation: scale 0.8s ease-in-out 3.2s both;
    }
    
    .s15 {
      background-position: -871px -1427px;
      width: 488px;
      height: 151px;
      z-index: 1;
      left: 39px;
      top: 159px;
      transform-origin: top
    }
    
    .is-shown .s15 {
      animation: scale 0.8s ease-in-out 4s both;
      -webkit-animation: scale 0.8s ease-in-out 4s both;
    }
    
    .s16 {
      background-position: -365px -1446px;
      width: 384px;
      height: 324px;
      z-index: 1;
      left: 94px;
      top: 230px;
      transform-origin: top
    }
    
    .is-shown .s16 {
      animation: scale 0.8s ease-in-out 4.8s both;
      -webkit-animation: scale 0.8s ease-in-out 4.8s both;
    }
    
    .s17 {
      background-position: -1571px -238px;
      width: 76px;
      height: 76px;
      z-index: 1;
      left: -19px;
      top: 338px;
      transform-origin: center
    }
    
    .is-shown .s17 {
      animation:fade-in 0.8s ease-in-out 4.2s both, zoom3 1s ease-in-out 4.2s both;
      -webkit-animation:fade-in 0.8s ease-in-out 4.2s both, zoom3 1s ease-in-out 4.2s both;
    }
    
    .graph-images {
      margin-top: 50px;
      position: relative;
      height: 425px
    }
    
    .s4-image {
      position: relative;
      z-index: 2;
      width: 906.5px;
      margin: auto
    }
    
    .s18 {
      width: 587px;
      height: 456px;
      background-position: -829px -1983px;
      position: relative;
      
    }
    
    .bg-image {
      width: 100vw;
      height: auto;
      position: absolute;
      bottom: -126px;
      left: 0;
      z-index: 1;
      
    }
    
    .s19 {
      background-position: -856px -1629px;
      width: 396px;
      height: 294px;
      left: 36px;
      top: 126px;
      z-index: 1;
      transform-origin: center
    }
    
    .is-shown .s19 {
      animation: scale 0.8s ease-in-out 0.8s both;
      -webkit-animation: scale 0.8s ease-in-out 0.8s both;
    }
    
    
    
    .s20 {
      background-position: -1115px -3280px;
      width: 185px;
      height: 101px;
      top: 245px;
      left: 194px;
      z-index: 1;
      transform-origin: left
    }
    
    .is-shown .s20 {
      animation: grow-bar 1s ease-in-out 1.6s both;
      -webkit-animation: grow-bar 1s ease-in-out 1.6s both;
    }
    
    .s21 {
      background-position: -11px -2456px;
      width: 475px;
      height: 222px;
      top: 161px;
      left: 374px;
      z-index: 2;
      transform-origin: center
    }
    
    .is-shown .s21 {
      animation: scale 0.8s ease-in-out 2.4s both;
      -webkit-animation: scale 0.8s ease-in-out 2.4s both;
    }
    
    .s22 {
      background-position: -1596px -616px;
      width: 77px;
      height: 77px;
      top: 233px;
      left: -17px;
      transform-origin: left center
    }
    
    .is-shown .s22 {
      animation:fade-in 0.8s ease-in-out 1.2s both, zoom3 0.8s ease-in-out 1.2s both;
      -webkit-animation:fade-in 0.8s ease-in-out 1.2s both, zoom3 0.8s ease-in-out 1.2s both;
    }
    
    .s4-chart3 {
      background-position: -1940px -1785px;
      width: 550px;
      height: 228px;
      top: 325px;
      left: 348px;
      z-index: 3;
      transform-origin: center
    }
    
    .is-shown .s4-chart3 {
      animation: scale 1s ease-in-out 3s both
    }
    
    .s4-chart3-graph {
      background-position: -2130px -2085px;
      width: 341px;
      height: 78px;
      top: 425px;
      left: 476px;
      z-index: 3
    }
    
    .is-shown .s4-chart3-graph {
      animation: grow-graph 1s ease-in-out 6s both
    }
    
    .col-5 {
      min-height: 582px;
      margin-bottom: 121px;
    }
    
    .col-6 .half-col {
      padding-top: 28px;
    }
    
    .s5-image {
      left: -100px
    }
    
    .s23 {
      background-position: -660px -2675px;
      width: 659px;
      height: 497px;
      position: relative;
      
    }
    
    .s24 {
      background-position: -539px -2494px;
      width: 752px;
      height: 147px;
      top: 243px;
      left: -17px;
      z-index: 3;
      transform-origin: center
    }
    
    .is-shown .s24 {
      animation: scale 0.8s ease-in-out 0.8s both;
      -webkit-animation: scale 0.8s ease-in-out 0.8s both;
    }
    
    .s25 {
      background-position: -20px -2686px;
      width: 177px;
      height: 74px;
      top: 362px;
      right: 52px;
     
    }
    
    .is-shown .s25 {
      animation: scale .8s linear 1.6s both;
      -webkit-animation: scale .8s linear 1.6s both;
    }
    
    .s26 {
     background-position: -215px -2686px;
     width: 177px;
     height: 74px;
     top: 362px;
     right: 210px;
    }
    
    .is-shown .s26 {
      animation: scale .8s linear 2.4s both;
      -webkit-animation: scale .8s linear 2.4s both;
    }
    
    .s27 {
      background-position: -399px -2686px;
      width: 168px;
      height: 74px;
      top: 362px;
      right: 384px;
    }
    
    .is-shown .s27 {
      animation: scale 0.8s ease-in-out 3s both;
      -webkit-animation: scale 0.8s ease-in-out 3s both;
    }
    
    .s28 {
      height: 206px;
      width: 498px;
      background-position: -20px -2765px;
      top: 408px;
      left: 115px;
     
      transform-origin: top center
    }
    
    .is-shown .s28 {
      animation: scale 0.8s ease-in-out 3.8s both;
      -webkit-animation: scale 0.8s ease-in-out 3.8s both;
    }
    
    .col-6 {
      min-height: 582px;
      margin-bottom: 180px;
    }
    
    .s6-image {
      right: -180px
    }
    
    .s29 {
      background-position:-22px -3515px;
      width: 687px;
      height: 510px;
      position: relative;
      
    }
    
    .s30 {
      background-position: -1564px -1236px;
      width: 126px;
      height: 59px;
      top: 69px;
      left: 375px;
      transform-origin: center
    }
    
    .is-shown .s30 {
      animation: scale 0.6s linear 1.2s both;
      -webkit-animation: scale 0.6s linear 1.2s both;
    }
    
    .s31 {
       background-position: -1569px -1341px;
       width: 117px;
       height: 59px;
       top: 68px;
       left: 245px;
    
       transform-origin: center
    
      
      
      
    }
    
    .is-shown .s31 {
     
    
      animation: scale 0.6s linear 0.6s both;
      -webkit-animation: scale 0.6s linear 0.6s both;
    }
    
    .s32 {
      background-position: -1548px -1130px;
      width: 165px;
      height: 59px;
      top: 145px;
      left: 142px;
      
      transform-origin: center
    }
    
    .is-shown .s32 {
      animation: scale .6s linear 1.8s both;
      -webkit-animation: scale .6s linear 1.8s both;
    }
    
    .s33 {
      background-position: -1557px -1025px;
      width: 127px;
      height: 59px;
      top: 145px;
      left: 321px;
      
      transform-origin: center
    }
    
    .is-shown .s33 {
      animation: scale 0.6s linear 2.4s both;
      -webkit-animation: scale 0.6s linear 2.4s both;
    }
    
    .s34 {
      background-position: -1416px -1430px;
      width: 169px;
      height: 94px;
      top: 51px;
      left: 80px;
      
      transform-origin: center
    }
    
    .is-shown .s34 {
      animation: scale 0.6s ease-in-out 3s both;
      -webkit-animation: scale 0.6s ease-in-out 3s both;
    }
    
    .s35 {
      background-position: -32px -3009px;
      width: 370px;
      height: 228px;
      top: 205px;
      left: 111px;
    
      transform-origin: top center
    }
    
    .is-shown .s35 {
      animation: scale 1s ease-in-out 3.6s both;
      -webkit-animation: scale 1s ease-in-out 3.6s both;
    }
    
    .s36 {
      background-position: -1438px -1588px;
      width: 183px;
      height: 93px;
      bottom: 199px;
      left: 215px;
    
      transform-origin: bottom
    }
    
    .is-shown .s36 {
      animation: growY1 1s ease-in-out 4.2s both;
      -webkit-animation: growY1 1s ease-in-out 4.2s both;
    }
    
    .s37 {
      background-position: -491px -3217px;
      width: 552px;
      height: 227px;
      top: 386px;
      left: 24px;
    
      transform-origin: center
    }
    
    .is-shown .s37 {
      animation: scale 1s ease-in-out 4.8s both;
      -webkit-animation: scale 1s ease-in-out 4.8s both;
    }
    
    .s38 {
      background-position: -56px -3328px;
      width: 342px;
      height: 78px;
      top: 488px;
      left: 148px;
    
      transform-origin: left
    }
    
    .is-shown .s38 {
      animation: growX 2s ease-in-out 5.4s both;
      -webkit-animation: growX 2s ease-in-out 5.4s both;
    }
    
    .s39 {
      background-position: -1596px -881px;
      width: 77px;
      height: 77px;
      top: 242px;
      left: -20px;
    
      transform-origin: center
    }
    
    .is-shown .s39 {
      animation:fade-in 1s ease-in-out 3.6s both,  zoom3 1s ease-in-out 3.6s both;
      -webkit-animation:fade-in 1s ease-in-out 3.6s both,  zoom3 1s ease-in-out 3.6s both;
    }
    
    .s40 {
      background-position: -1596px -757px;
      width: 77px;
      height: 77px;
      top: 130px;
      left: 46px;
    
      transform-origin: center
    }
    
    .is-shown .s40 {
      animation: fade-in 0.8s ease-in-out 1.2s both, zoom3 0.8s ease-in-out 1.2s both;
      -webkit-animation: fade-in 0.8s ease-in-out 1.2s both, zoom3 0.8s ease-in-out 1.2s both;
    }
    
    .screenshot-img {
      margin-top: 50px;
      width: 100%;
      height: auto
    }
    
    @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
      }
    
      .col-layout {
        min-height: initial
      }
    
      .section-image {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: fit-content;
        margin: 0 auto
      }
    
      .s4-image {
        width: 100%
      }
    
      .s18 {
        position: absolute;
        top: 0;
        left: 10px
      }
    }
    
    @media screen and (max-width: 1023px) {
    
      .bg-image,
      .graph-images,
      .about-image,
      .banner-image,
      .section-image {
        display: none !important
      }
    
      .screenshot-4 {
        display: block !important
      }
      .about-contents {
        padding: 30px !important;
      }
      .mob-view {
        display: block;
      }
      .col-layout {
        margin-bottom: 50px !important;
      }
      .banner-contents {
        margin-bottom: 0;
      }
    
      .half-col {
        padding-top: 0 !important;
      }
      .about-section .container {
            margin-bottom: 60px;
      }
    
      
    }
    
    @media screen and (max-width: 767px) {
    
      .section-image,
      .bg-image,
      .graph-images {
        display: none !important
      }
    
      .banner p br {
        display: none;
      }
    
      .half-col {
        margin-bottom: 0;
        
      }
    
      .about-section {
        padding-top: 10px;
      }
    
      .col-layout {
        margin-bottom: 75px
      }
      h2 {
        
        margin-bottom: 15px;
      }
    }
    
    @media screen and (max-width: 600px) {
      h2 {
        font-size: 25px;
        line-height: 35px;
      }
      .banner p {
        line-height: 30px;
      }
      .banner h1 {
        line-height: 43px;
      }
    }
    
    
    
   
    
    @media screen and (max-width: 1113px) {
    .about-image {
    zoom:1.1;
    }
    .img-9 {
    bottom:58px;zoom:1.15;left:55px;
    }
    .about-contents {
    padding-left:402px;}
    .graph-section {
        margin-bottom: 68px;
    }
    
    .col-1 {
        margin-bottom: 146px;
    }
    
    .col-3 {
        margin-bottom: 147px;
    }
    
    .col-5 {
        margin-bottom: 151px;
    }
    
    }
    
    @media screen and (max-width: 1025px) {
      .about-section .container {
        padding-right: 0;
        padding-left: 0;
      }
      .img-10 {
        left: 0;
      }
    
    }
    
    @media screen and (max-width: 999px) {
    
    .about-contents p {text-align:center;}
    
    }