@font-face {
        font-family: ZohoPuvi;
        src: url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_light.eot);
        src: url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_light.eot?#iefix) format("embedded-opentype"), url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_light.woff2) format("woff2"), url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_light.woff) format("woff"), url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_light.ttf) format("truetype");
        font-style: normal;
        font-weight: 200;
        font-display: swap
    }

    @font-face {
        font-family: ZohoPuvi;
        src: url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_regular.eot);
        src: url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_regular.eot?#iefix) format("embedded-opentype"), url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_regular.woff2) format("woff2"), url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_regular.woff) format("woff"), url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_regular.ttf) format("truetype");
        font-style: normal;
        font-weight: 300;
        font-display: swap
    }

    @font-face {
        font-family: ZohoPuvi;
        src: url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_medium.eot);
        src: url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_medium.eot?#iefix) format("embedded-opentype"), url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_medium.woff2) format("woff2"), url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_medium.woff) format("woff"), url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_medium.ttf) format("truetype");
        font-style: normal;
        font-weight: 400;
        font-display: swap
    }

    @font-face {
        font-family: ZohoPuvi;
        src: url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_semibold.eot);
        src: url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_semibold.eot?#iefix) format("embedded-opentype"), url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_semibold.woff2) format("woff2"), url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_semibold.woff) format("woff"), url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_semibold.ttf) format("truetype");
        font-style: normal;
        font-weight: 500;
        font-display: swap
    }

    @font-face {
        font-family: ZohoPuvi;
        src: url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_bold.eot);
        src: url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_bold.eot?#iefix) format("embedded-opentype"), url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_bold.woff2) format("woff2"), url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_bold.woff) format("woff"), url(https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_bold.ttf) format("truetype");
        font-style: normal;
        font-weight: 600;
        font-display: swap
    }

    *, ::after, ::before {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0
    }

    body {
        margin: 0;
        padding: 0;
        line-height: 1;
        font-family: ZohoPuvi, sans-serif;
        overflow-x: hidden
    }

    span#backToTop {
        display: none !important
    }

    option {
        color: #000
    }

    .clearfix::after, .clearfix::before {
        content: "";
        clear: both;
        display: table
    }

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

    ol, ul {
        list-style: none
    }

    blockquote, q {
        quotes: none
    }

    blockquote:after, blockquote:before, q:after, q:before {
        content: "";
        content: none
    }

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

    h1, h2, h3, h4, h5, h6, p {
        margin: 0
    }

    ul {
        padding-left: 0;
        margin: 0
    }

    li {
        list-style-type: none
    }

    a {
        text-decoration: none;
        cursor: pointer;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease
    }

    a:hover {
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease
    }

    a, div, h1, h2, input, li, p, span, ul {
        box-sizing: border-box
    }

    .ac {
        margin: 0 auto;
        position: relative;
        max-width: 1085px;
        width: 90%
    }

    footer {
        position: relative;
        text-align: center;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%
    }

    footer p {
        font-size: 12px;
        font-weight: 300;
        line-height: 17px;
        color: #636363;
        padding: 11.5px 0
    }

    @media screen and (max-width: 600px) {
        .zsiq_theme1.zsiq_floatmain {
            display: none !important
        }
    }

    body {
        min-height: 100vh
    }

    .main-cont {
        background: linear-gradient(#f7f7f7 0, rgba(248, 249, 251, 0) 100%)
    }

    .header {
        height: 100px;
        background: #000;
        border-bottom: .5px solid #d0d0d0;
        box-shadow: 0 2px 5px rgb(0 0 0 / 0%);
        background: #fff
    }

    .head-top {
        position: absolute;
        top: 0;
        width: 100%
    }

    .head-top-inn ul {
        float: right;
        padding: 14px 0 0
    }

    .head-top-inn ul li {
        float: left;
        margin-right: 35px;
        position: relative
    }

    .head-top-inn ul li a {
        font-size: 13px;
        color: #002158;
        font-weight: 300;
        position: relative
    }

    .head-top-inn ul li::before {
        content: "";
        position: absolute;
        right: -17.5px;
        width: 1px;
        height: 10px;
        background: #002158;
        top: 4.2px
    }

    .head-top-inn ul li:last-child {
        margin-right: 0
    }

    .head-top-inn ul li:last-child::before {
        display: none
    }

    .head-logo {
        position: absolute;
        top: 54px;
        width: 100%
    }

    .head-logo .logo {
        background: url("https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-sprite.png") no-repeat -2px -2px;
        background-size: 445px;
        width: 212px;
        height: 45px;
        display: inline-block
    }

    .head-logo .head-logo-left {
        float: left;
        margin-top: -30px
    }

    .head-logo .head-logo-right {
        float: right
    }

    .head-logo .head-logo-right ul li {
        float: left;
        margin-right: 25px
    }

    .head-logo .head-logo-right ul li:last-child {
        margin-right: 0
    }

    .head-logo .head-logo-right ul li:last-child a {
        background: #d63336;
        border: none;
        color: #fff
    }

    .head-logo-right ul li a {
        font-size: 13px;
        font-weight: 300;
        color: #002158;
        padding-left: 15px;
        position: relative
    }

    .head-logo-right ul li a.btn {
        padding: 9px 15px 9px 30px;
        border: 1px solid #000;
        border-radius: 2px;
        color: #000;
        font-weight: 400;
        transition: .3s
    }

    .head-logo-right ul li a.btn:hover {
        background: #000;
        color: #fff;
        box-shadow: 0 0 10px rgb(0, 0, 0, .3)
    }

    .head-logo-right ul li:last-child a.btn:hover {
        background: #f03336;
        box-shadow: 2px 4px 10px rgb(240, 51, 54, .3)
    }

    .nxt-click span:hover {
        background: #0060df;
        color: #fff;
        box-shadow: 0 0 10px rgba(0, 96, 223, .6)
    }

    .head-logo-right ul li a::before {
        content: "";
        position: absolute;
        left: 0;
        background: url("https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-sprite.png") no-repeat;
        background-size: 445px
    }

    .head-logo-right ul li:first-child a::before {
        background-position: -219px -1px;
        width: 11px;
        height: 11px;
        top: 1.5px
    }

    .head-logo-right ul li:nth-child(2) a::before {
        background-position: -234px -1px;
        width: 11px;
        height: 11px;
        top: 1.5px
    }

    .head-logo-right ul li:nth-child(3) a::before {
        background-position: -235px -19px;
        width: 11px;
        height: 11px;
        top: 2px
    }

    .head-logo-right ul li:nth-child(4) a::before {
        background-position: -252px -37px;
        width: 11px;
        height: 11px;
        left: 14px;
        top: 0;
        bottom: 0;
        margin: auto
    }

    .head-logo-right ul li:nth-child(4) a:hover::before {
        background-position: -220px -48px
    }

    .head-logo-right ul li:nth-child(5) a::before {
        background-position: -234px -49px;
        width: 11px;
        height: 11px;
        left: 14px;
        top: 0;
        bottom: 0;
        margin: auto
    }

    .head-logo.fix {
        height: 84px;
        top: 0;
        padding: 18px;
        background: #fff;
        z-index: 9;
        box-shadow: 0 10px 10px rgba(0, 0, 0, .05);
        position: fixed
    }

    .head-logo.fix .head-logo-left {
        margin-top: 0
    }

    .head-logo.fix .head-logo-right {
        padding-top: 17px
    }

    .main {
        min-height: calc(100vh - 40px);
        padding-bottom: 50px
    }

    .banner {
        text-align: center;
        padding: 40px 0 0
    }

    .banner h1 {
        font-weight: 600;
        font-size: 30px;
        color: #000;
        margin-bottom: 15px
    }

    .banner p {
        font-weight: 300;
        font-size: 14px;
        line-height: 21px;
        color: #333;
        padding: 0 200px
    }

    .resources {
        margin-top: 50px
    }

    .resources ul li {
        width: calc(50% - 21px);
        float: left;
        padding: 44px 50px 44px 190px;
        background: #f8f8f8;
        border: .5px solid #e2e2e2;
        border-radius: 5px;
        position: relative
    }

    .resources ul li:nth-child(odd) {
        margin-right: 42px
    }

    .resources ul li span {
        font-weight: 400;
        font-size: 11px;
        color: #fff;
        background: #1e61d0;
        display: inline-block;
        border-radius: 3px;
        padding: 3px 6px
    }

    .resources ul li h3 {
        font-weight: 600;
        font-size: 16px;
        line-height: 21px;
        color: #002158;
        margin: 9px 0 25px
    }

    .resources ul li:first-child h3 {
        padding-right: 60px
    }

    .resources ul li div::before {
        top: 0;
        bottom: 0;
        margin: auto;
        content: "";
        position: absolute;
        left: 25px;
        background: url("https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-sprite.png") no-repeat;
        background-size: 445px
    }

    .resources ul li:first-of-type > div::before {
        background-position: -290px -3px;
        width: 148px;
        height: 82px
    }

    .resources ul li:nth-of-type(2) > div::before {
        background-position: -2px -70px;
        width: 132px;
        height: 174px
    }

    .resources ul li a {
        display: inline-block;
        padding: 7px 10px;
        font-weight: 300;
        font-size: 13px;
        border-radius: 2.5px
    }

    .resources ul li a {
        background: 0 0;
        border: 1px solid #d63337;
        color: #d63336
    }

    .resources ul li a:hover {
        background: #d63337;
        color: #fff;
        box-shadow: 0 0 10px rgb(214, 51, 55, .6)
    }

    .screen-cont {
        width: 1300px;
        height: 754px;
        margin: 40px auto
    }

    .screen-cont .ac {
        border-radius: 5px;
        width: 100%;
        max-width: 100%
    }

    .border-anim {
        position: absolute;
        width: 224px;
        height: 50px;
        border-radius: 3px;
        border: 2px dashed #7dba49;
        transition: .4s ease-in-out;
        top: 425px;
        left: 488px;
        z-index: 4
    }

    .screen {
        background-image: url(https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-common-screen.png);
        display: none
    }

    .screen .screen-inner {
        background-size: cover;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto
    }

    .screen1 {
        background-image: url(https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-screen1.png);
        display: block
    }

    .screen2 .screen-inner {
        background-image: url(https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-screen2.png);
        width: 950px;
        height: 450px
    }

    .screen3 .screen-inner {
        background-image: url(https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-screen3.png);
        width: 700px;
        height: 328px
    }

    .screen3 .mob-scr {
        background: url(https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-screen3.png) no-repeat;
        background-size: 100%;
        width: 100%;
        width: 238px;
        height: 512px;
        position: absolute;
        left: 0;
        right: 0;
        top: 140px;
        margin: auto;
        border-radius: inherit;
        background-repeat: no-repeat
    }

    .screen3 .scanner-scr {
        background: url(https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-faceid.gif) no-repeat;
        background-size: 800px;
        width: 100%;
        width: 291px;
        height: 400px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border-radius: inherit;
        background-repeat: no-repeat;
        background-position: -254px;
        z-index: 1;
        opacity: 0;
        border-radius: 6px
    }

    .screen3.act .mob-scr {
        display: none
    }

    .screen3.act .scanner-scr {
        opacity: 1
    }

    .screen4 .screen-inner {
        background-image: url(https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-screen4.png);
        background-repeat: no-repeat;
        width: 950px;
        height: 450px
    }

    .screen6 .screen-inner {
        background-image: url(https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-screen6.png);
        background-repeat: no-repeat;
        width: 950px;
        height: 450px
    }

    .screen .mob-screen {
        background: rgba(0, 0, 0, .5);
        position: absolute;
        top: 0;
        width: 97.5%;
        height: 96%;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 10px;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        display: none;
        z-index: 4
    }

    .screen .mob-screen .mobile {
        left: 0;
        right: 0;
        margin: auto;
        top: 150px;
        position: absolute
    }

    .screen6 .mob-screen .mobile {
        background: url(https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-screen7.png) no-repeat;
        background-size: cover;
        width: 227px;
        height: 441px;
        display: block
    }

    .screen7 .screen-inner {
        background-image: url(https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-screen8.png);
        width: 700px;
        height: 322px
    }

    .screen7 .mob-screen .mobile {
        background: url(https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-screen9.png) no-repeat;
        background-size: cover;
        width: 227px;
        height: 505px;
        top: 0;
        bottom: 0;
        margin: auto
    }

    .screen5.act {
        background: #002158
    }

    .screen5 {
        background-image: url(https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-screen5.png);
        display: none
    }

    .screen {
        background-size: 100%;
        width: 100%;
        height: 754px;
        border-radius: inherit;
        background-repeat: no-repeat
    }

    .tooltip {
        width: 440px;
        background: #fff;
        box-shadow: 0 0 26px rgba(0, 0, 0, .28);
        position: absolute;
        border-radius: 5px;
        left: 0;
        right: 0;
        top: 279px;
        margin: auto;
        transition: .5s ease-in-out;
        z-index: 6
    }

    .tooltip.act {
        opacity: 0
    }

    .tooltip-cont {
        padding: 30px
    }

    .tooltip-cont.act {
        padding: 30px 30px 30px 52px
    }

    .tooltip h2, .tooltip h3 {
        font-weight: 600;
        font-size: 18px;
        color: #000;
        margin-bottom: 18px
    }

    .tooltip h4 {
        margin-top: 35px;
        text-align: center;
        font-size: 15px;
        font-weight: 500;
        position: relative
    }

    .tooltip h4::after, .tooltip h4::before {
        content: "";
        position: absolute;
        width: 54px;
        height: 1px;
        background: #9d9d9d;
        background: -moz-linear-gradient(270deg, #9d9d9d 0, rgba(0, 0, 0, 0) 100%);
        background: -webkit-linear-gradient(270deg, #9d9d9d 0, rgba(0, 0, 0, 0) 100%);
        background: linear-gradient(270deg, #9d9d9d 0, rgba(0, 0, 0, 0) 100%);
        top: 7.5px
    }

    .tooltip h4::before {
        left: calc(50% - 110px)
    }

    .tooltip h4::after {
        right: calc(50% - 110px);
        transform: rotate(180deg)
    }

    .tooltip p {
        font-weight: 300;
        font-size: 16px;
        line-height: 24px;
        color: #000
    }

    .tooltip p.sub-txt {
        font-size: 14px;
        line-height: 21px
    }

    .tooltip p.center {
        text-align: center
    }

    .tooltip p.tick {
        padding-top: 38px;
        position: relative
    }

    .tooltip p.tick::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: auto;
        background: url('https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-sprite.png') no-repeat -158px -178px;
        background-size: 445px;
        width: 31px;
        height: 31px
    }

    .tooltip p:nth-of-type(2) {
        margin-top: 10px
    }

    .get-start {
        padding: 18px 0;
        display: block;
        text-align: center;
        background: #1e61d0;
        color: #fff;
        cursor: pointer;
        padding-right: 30px;
        position: relative;
        font-size: 16px;
        font-weight: 400;
        transition: .3s;
        border-radius: 0 0 5px 5px
    }

    .get-start::before {
        content: "";
        background: url('https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-sprite.png') no-repeat -219px -107px;
        background-size: 445px;
        width: 16px;
        height: 13px;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: calc(50% - 48px);
        transition: .4s
    }

    .get-start:hover {
        background: #1070ed
    }

    .get-start:hover::before {
        transform: translateX(3px)
    }

    .arrows {
        text-align: center;
        width: 100%;
        padding: 11px 0;
        border-top: .5px solid #d8d8d8;
        display: none
    }

    .arrows p {
        font-weight: 300;
        font-size: 12px;
        color: #6b84af
    }

    .arrows .tip-arr {
        background: url("https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-sprite.png") no-repeat -255px -23px;
        background-size: 445px;
        width: 6px;
        height: 11px;
        display: inline-block;
        position: relative;
        cursor: pointer
    }

    .arrows .tip-arr.disable {
        pointer-events: none;
        opacity: .7
    }

    .arrows .arr-left {
        transform: rotate(-180deg);
        left: -8px;
        top: 1.5px
    }

    .arrows .arr-right {
        right: -6px;
        top: 1.2px
    }

    .tooltip.active .arrows {
        display: block
    }

    .tooltip.active .get-start {
        display: none
    }

    .tooltip .nxt-click {
        font-weight: 300;
        font-size: 14px;
        color: #000;
        margin-top: 14px
    }

    .nxt-click span {
        padding: 4px 8px;
        border-radius: 3px;
        font-style: normal;
        border: 1px solid #1e61d0;
        margin-left: 8px;
        cursor: pointer;
        color: #1e61d0;
        transition: .3s
    }

    .tooltip .demo-txt {
        font-weight: 300;
        font-size: 12px;
        line-height: 20px;
        color: #1e61d0;
        opacity: .7;
        margin-top: 20px;
        position: relative
    }

    .tooltip .demo-txt::before {
        content: "";
        background: url('https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-sprite.png') no-repeat -266px -130px;
        background-size: 445px;
        width: 21px;
        height: 16px;
        position: absolute;
        left: -28px;
        top: 4px
    }

    .tooltip .did-uknow {
        margin-top: 20px
    }

    .tooltip .did-uknow h3 {
        font-weight: 600;
        font-size: 12px;
        line-height: 20px;
        color: #000;
        text-transform: uppercase;
        position: relative;
        padding-left: 22px;
        margin-bottom: 9px
    }

    .tooltip .did-uknow h3::before {
        content: "";
        position: absolute;
        background: url("https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-sprite.png") no-repeat -199px -68px;
        background-size: 445px;
        width: 17px;
        height: 20px;
        left: 0;
        top: -2px
    }

    .tooltip .did-uknow p {
        font-weight: 300;
        font-size: 12px;
        line-height: 21px;
        color: #333
    }

    .tooltip .did-uknow p a {
        text-decoration: underline;
        color: #1e61d0
    }

    .tooltip .tooltip-arrow {
        position: absolute;
        background: url('https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-sprite.png') no-repeat -151px -123px;
        background-size: 445px;
        width: 48px;
        height: 53px;
        display: inline-block
    }

    .cta-btns a {
        padding: 9px 14px 9px 27px;
        color: #fff;
        border-radius: 3px;
        font-size: 13px;
        font-weight: 400;
        position: relative
    }

    .cta-btns .dwn {
        background: #d63336
    }

    .cta-btns .dwn::before {
        content: "";
        position: absolute;
        background: url("https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-sprite.png") no-repeat -220px -48px;
        background-size: 445px;
        width: 10px;
        height: 10px;
        left: 10px;
        top: 10px
    }

    .cta-btns .dwn:hover {
        background: #a32224;
        box-shadow: 0 0 10px rgba(214, 51, 54, .5)
    }

    .cta-btns .demo {
        background: #2c986a;
        margin-left: 14px
    }

    .cta-btns .demo::before {
        content: "";
        position: absolute;
        background: url("https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-sprite.png") no-repeat -235px -49px;
        background-size: 445px;
        width: 11px;
        height: 11px;
        left: 10px;
        top: 10px;
        top: 11px
    }

    .cta-btns .demo:hover {
        background: #198c5a;
        box-shadow: 0 0 10px rgba(44, 152, 106, .5)
    }

    .cta-btns {
        margin-top: 25px;
        text-align: center
    }

    .sys-arr {
        position: absolute;
        width: 50px;
        height: 50px;
        background: 0 0;
        z-index: 5;
        top: 56.3%;
        left: 57.8%;
        cursor: pointer;
        pointer-events: none
    }

    .sys-arr.act {
        pointer-events: auto;
        background: rgba(44, 152, 106, .1)
    }

    .sys-input {
        position: absolute;
        width: 212px;
        height: 36px;
        top: 57.2%;
        left: 38.1%;
        background: 0 0;
        cursor: pointer;
        z-index: 4
    }

    .sys-input::before {
        content: "";
        position: absolute;
        background: rgba(154, 201, 114, .14);
        width: calc(100% + 10px);
        height: calc(100% + 10px);
        top: -3px;
        left: -5px
    }

    .sys-input.act::before {
        display: none
    }

    .sys-input-field {
        width: 100%;
        height: 100%;
        background: 0 0;
        border: none;
        outline: 0;
        letter-spacing: 1px;
        font-size: 26px;
        padding: 3px 20px 0 12px;
        position: relative;
        z-index: 2;
        color: #eeee
    }

    .sys-input-field:focus {
        border: none;
        outline: 0
    }

    .radio-btns {
        position: absolute;
        top: 40.85%;
        left: 23.25%;
        background: 0 0;
        padding: 10px;
        z-index: 4
    }

    .radio-btns label {
        display: block;
        padding-left: 20px;
        position: relative;
        font-size: 12px;
        margin-bottom: 15px;
        color: transparent;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none
    }

    label .checkmark {
        position: absolute;
        top: 1px;
        height: 15px;
        width: 15px;
        border: 1.5px solid #7dba4b;
        border-radius: 50%;
        left: 0;
        background: #fff
    }

    label .checkmark.checked::after {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        background: #7dba4b
    }

    .radio-btns label::before {
        content: "";
        position: absolute;
        width: calc(100% + 5px);
        height: 25px;
        border-radius: 3px;
        background: rgba(154, 201, 114, .14);
        border: 2px dotted #7dba49;
        top: -4px;
        left: -10px;
        transition: .2s
    }

    .radio-btns.act label::before {
        opacity: 0
    }

    .screen .continue {
        font-weight: 300;
        color: #fff;
        position: absolute;
        right: 137px;
        top: 334px;
        display: inline-block;
        cursor: pointer;
        width: 81px;
        left: auto;
        height: 28px;
        transition: .3s;
        color: transparent;
        background: rgba(154, 201, 114, .14)
    }

    .screen .continue {
        z-index: 5
    }

    .screen4 .continue {
        right: 138px;
        top: 263.8px
    }

    .screen4 span {
        position: absolute;
        display: inline-block;
        width: 238px;
        height: 18.5px;
        background: 0 0;
        cursor: pointer;
        cursor: text;
        left: 231.5px;
        font-size: 11px;
        padding: 4.5px 0 0 7px;
        top: 200.5px
    }

    .screen4 .check-mark {
        width: 9.8px;
        height: 9.8px;
        position: absolute;
        border: 1px solid #cdcdcd;
        top: 161px;
        left: 389px;
        cursor: pointer
    }

    .screen4 .check-mark.check::before {
        content: "";
        position: absolute;
        width: 3px;
        height: 6px;
        border: 1px solid #7dba49;
        border-width: 0 1px 1px 0;
        transform: rotate(45deg);
        left: 2.5px;
        top: .5px
    }

    .screen4 .auth-input1 {
        z-index: 5
    }

    .screen4 .auth-input1::before {
        content: "";
        position: absolute;
        width: calc(100% + 10px);
        left: -5px;
        height: calc(100% + 10px);
        top: -5px;
        background: rgba(154, 201, 114, .14)
    }

    .screen4 .auth-input1.act::before {
        display: none
    }

    .deny, .scan {
        position: absolute;
        left: 58px;
        bottom: 144px;
        background: 0 0;
        display: inline-block;
        width: 121px;
        height: 28px;
        cursor: pointer;
        text-align: center;
        z-index: 3
    }

    .scan::before {
        content: "";
        position: absolute;
        width: calc(100% + 6px);
        height: calc(100% + 6px);
        left: -3px;
        top: -3px;
        background: rgba(154, 201, 114, .14)
    }

    .scan:hover {
        animation: none
    }

    .scan i {
        font-size: 11px;
        font-weight: 200;
        color: #fff;
        margin-top: 8px;
        display: inline-block;
        font-style: normal
    }

    .deny {
        bottom: 23px
    }

    .close {
        position: absolute;
        width: 30px;
        height: 30px;
        display: inline-block;
        right: 20px;
        top: 10px;
        background: #1e61d0;
        cursor: pointer;
        border-radius: 2px;
        display: none
    }

    .close::before {
        content: "";
        position: absolute;
        width: 17px;
        height: 2px;
        background: #fff;
        transform: rotate(42deg);
        top: 14px;
        left: 6.5px
    }

    .close:after {
        content: "";
        position: absolute;
        width: 17px;
        height: 2px;
        background: #fff;
        transform: rotate(133deg);
        top: 14px;
        left: 6.5px
    }

    .menu-btn {
        width: 30px;
        display: none;
        position: fixed;
        right: 45px;
        top: 45px;
        cursor: pointer;
        z-index: 9
    }

    .menu-btn span, .menu-btn:after, .menu-btn:before {
        background-color: #002158;
        border-radius: 3px;
        content: "";
        display: block;
        height: 2px;
        margin: 7px 0;
        transition: all .2s ease-in-out
    }

    .warningMsg {
        display: none
    }

    .screen .push {
        background: 0 0;
        position: absolute;
        right: 161px;
        top: 217px;
        display: inline-block;
        cursor: pointer;
        width: auto;
        left: auto;
        transition: .3s;
        border-radius: 3px;
        color: transparent;
        width: 160px;
        height: 38px;
        z-index: 2
    }

    .screen .push::before {
        content: "";
        position: absolute;
        width: calc(100% + 6px);
        height: calc(100% + 6px);
        background: rgba(154, 201, 114, .14);
        left: -3px;
        top: -3px
    }

    .screen .approve {
        display: inline-block;
        width: 50px;
        height: 50px;
        background: 0 0;
        border-radius: 50%;
        bottom: 37px;
        right: 32px;
        position: absolute;
        cursor: pointer
    }

    .approve::before, .screen .accept::before {
        content: "";
        position: absolute;
        left: -1.5px;
        top: -1.5px;
        margin: auto;
        width: 54px;
        height: 54px;
        border-radius: 3px;
        border: 2px dashed #63b246;
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        left: -4px;
        top: -4px;
        background: rgba(154, 201, 114, .14)
    }

    .screen .accept {
        position: absolute;
        top: 43.3%;
        left: 30%;
        border-radius: 2px;
        cursor: pointer;
        height: 29px;
        width: 91.5px
    }

    .start-again {
        font-weight: 300;
        font-size: 12px;
        line-height: 20px;
        color: #333;
        padding-left: 15px;
        position: relative;
        cursor: pointer;
        display: none
    }

    .start-again::before {
        content: "";
        position: absolute;
        left: 0;
        background: url('https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-sprite.png') no-repeat -230px -73px;
        background-size: 445px;
        width: 11px;
        height: 10px;
        top: 1.5px
    }

    @media screen and (max-width: 1320px) {
        .screen-cont {
            width: 950px;
            height: 552px
        }

        .screen {
            height: 552px
        }

        .screen4 .screen-inner {
            background-image: url(https://www.manageengine.cn/products/self-service-password/simulation/images/adselfservice-plus-endpoint-mfa-demo-screen4.png);
            background-repeat: no-repeat;
            width: 950px;
            height: 450px
        }

        .get-start {
            padding: 15px 30px 15px 0
        }

        .tooltip h2, .tooltip h3 {
            font-size: 16px;
            margin-bottom: 14px
        }

        .tooltip p {
            font-size: 15px
        }

        .arrows p {
            font-size: 12px
        }

        .banner p {
            padding: 0 100px
        }

        .screen3 .mob-scr {
            width: 170px;
            height: 367px;
            top: 109px
        }

        .resources ul li {
            padding: 44px 30px 45px 190px
        }

        .tooltip-cont {
            padding: 25px 20px
        }

        .arrows {
            padding: 10px 0
        }

        .sys-input {
            width: 163px;
            height: 23px;
            top: 57.2%;
            left: 38.2%
        }

        .border-anim {
            width: 178px;
            height: 38px;
            top: 310px;
            left: 355px
        }

        .sys-arr {
            width: 35px;
            height: 34px;
            top: 56.5%;
            left: 57.8%
        }

        .screen2 .screen-inner, .screen4 .screen-inner {
            width: 800px;
            height: 378px
        }

        .radio-btns {
            top: 152.5px;
            left: 184.5px
        }

        label .checkmark {
            height: 14px;
            width: 14px;
            border: 1.5px solid #7dba4b
        }

        label .checkmark.checked::after {
            width: 6px;
            height: 6px
        }

        .radio-btns label {
            margin-bottom: 11px
        }

        .tooltip {
            top: 217px;
            width: 368px
        }

        .screen .continue {
            padding: 3.7px 9.5px;
            right: 120px;
            top: 232px
        }

        .screen .continue {
            right: 116px;
            top: 283px;
            width: 68px;
            height: 21.5px
        }

        .screen .continue.cont4 {
            top: 223px
        }

        .screen4 .auth-input1 {
            width: 201px;
            height: 16.5px;
            left: 194.5px;
            top: 168.5px;
            padding-top: 4px
        }

        .deny, .scan {
            left: 42px;
            bottom: 104px;
            width: 86px;
            height: 21px;
            font-size: 3px
        }

        .scan i {
            font-size: 8px;
            margin-top: 7px
        }

        .sys-input-field {
            font-size: 16px
        }

        .screen3 .scanner-scr {
            background-size: 407px;
            width: 206px;
            height: 320px;
            background-position: -99px
        }

        .screen6 .screen-inner {
            width: 800px;
            height: 379px
        }

        .screen .push {
            right: 136px;
            top: 183px;
            border-radius: 1px;
            height: 31.5px;
            width: 134px
        }

        .screen .mob-screen {
            top: 13px;
            height: 98%
        }

        .screen .mob-screen .mobile {
            top: 67px
        }

        .screen6 .mob-screen .mobile {
            background-size: 165px;
            width: 165px;
            height: 322px
        }

        .screen .approve {
            width: 35px;
            height: 35px;
            bottom: 29px;
            right: 23px
        }

        .screen7 .mob-screen .mobile {
            background-size: 175px;
            width: 175px;
            height: 403px
        }

        .screen7 .mob-screen .mobile {
            top: 41px
        }

        .screen .accept {
            top: 41.9%;
            left: 30%;
            width: 70px;
            height: 21px
        }
    }

    @media screen and (max-width: 992px) {
        .menu {
            margin-top: 40px
        }

        .menu-btn {
            display: block
        }

        .banner p {
            padding: 0
        }

        .banner {
            padding: 145px 0 0
        }

        .header {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            background: #fff;
            z-index: 99999
        }

        .head-logo-right {
            float: none;
            position: fixed;
            background: #fff;
            right: -250px;
            width: 240px;
            top: 0;
            height: 100%;
            bottom: 0;
            z-index: 10;
            box-shadow: 0 -14px 18px rgba(0, 0, 0, .1);
            transition: .4s
        }

        .head-logo-right.act {
            right: 0
        }

        .head-logo .head-logo-right ul li {
            float: none;
            display: block;
            margin: 14px
        }

        .head-logo-right ul li a.btn {
            display: inline-block
        }

        .close {
            display: block
        }

        .resources ul li:first-child h3 {
            padding-right: 40px
        }

        .resources ul li {
            min-height: 298px
        }

        .head-logo-right ul li:nth-child(4) a.btn {
            padding: 9px 30px 9px 40px
        }
    }

    @media screen and (max-width: 991px) {
        .screen-cont {
            display: none
        }

        .warningMsg {
            display: block
        }

        .warningMsg .ac {
            width: 90%;
            background: #0066fe;
            border-radius: 10px;
            margin: auto;
            padding: 30px;
            margin-top: 50px
        }

        .warningMsg p {
            font-size: 18px;
            font-weight: 500;
            margin: 0 0 30px;
            line-height: 30px;
            position: relative;
            z-index: 9999;
            color: #fff
        }

        .warningMsg p:last-child {
            margin-bottom: 0
        }
    }

    @media screen and (max-width: 830px) {
        .resources ul li {
            width: 100%;
            float: none;
            min-height: auto
        }

        .resources ul li:nth-child(odd) {
            margin: 0 0 20px
        }

        .resources ul li:first-child h3 {
            padding-right: 0
        }
    }

    @media screen and (max-width: 500px) {
        .header {
            height: 110px
        }

        .head-logo {
            top: 45px
        }

        .menu-btn {
            top: 50px
        }

        .resources ul li {
            padding: 100px 30px 30px
        }

        .resources ul li div {
            text-align: center
        }

        .resources ul li:nth-of-type(2) {
            padding-top: 220px
        }

        .resources ul li:first-of-type > div::before {
            top: -120px;
            left: 0;
            right: 0;
            margin: auto
        }

        .resources ul li:nth-of-type(2) > div::before {
            top: 24px;
            left: 0;
            right: 0;
            bottom: auto;
            margin: auto
        }

        .resources ul li:nth-of-type(2) > div::before {
            background-position: -2px -70px;
            width: 132px;
            height: 174px
        }

        .banner h1 {
            font-size: 28px;
            line-height: 38px
        }

        .head-logo .head-logo-left {
            margin: auto;
            float: none
        }

        .head-top-inn ul li {
            float: none;
            display: inline-block
        }

        .head-top {
            position: relative;
            top: auto
        }

        .head-top-inn ul {
            float: none;
            text-align: center
        }

        .head-logo .head-logo-right {
            float: none
        }

        .head-top-inn ul li {
            margin-right: 20px
        }

        .banner {
            padding: 120px 0 0
        }

        .menu-btn {
            right: 18px;
            top: 67px
        }
    }

    @media screen and (max-width: 350px) {
        .resources ul li:first-of-type > div::before {
            top: -168px
        }

        .resources ul li {
            padding: 120px 30px 30px
        }
    }

    .loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 50px;
        height: 50px;
        margin: auto;
        display: none
    }

    .loader .circle {
        position: absolute;
        width: 38px;
        height: 38px;
        opacity: 0;
        transform: rotate(225deg);
        animation-iteration-count: infinite;
        animation-name: orbit;
        animation-duration: 5.5s
    }

    .loader .circle:after {
        content: "";
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 5px;
        background: #fff;
        box-shadow: 0 0 9px rgba(255, 255, 255, .7)
    }

    .loader .circle:nth-child(2) {
        animation-delay: 240ms
    }

    .loader .circle:nth-child(3) {
        animation-delay: 480ms
    }

    .loader .circle:nth-child(4) {
        animation-delay: 720ms
    }

    .loader .circle:nth-child(5) {
        animation-delay: 960ms
    }

    @keyframes orbit {
        0% {
            transform: rotate(225deg);
            opacity: 1;
            animation-timing-function: ease-out
        }

        7% {
            transform: rotate(345deg);
            animation-timing-function: linear
        }

        30% {
            transform: rotate(455deg);
            animation-timing-function: ease-in-out
        }

        39% {
            transform: rotate(690deg);
            animation-timing-function: linear
        }

        70% {
            transform: rotate(815deg);
            opacity: 1;
            animation-timing-function: ease-out
        }

        75% {
            transform: rotate(945deg);
            animation-timing-function: ease-out
        }

        76% {
            transform: rotate(945deg);
            opacity: 0
        }

        100% {
            transform: rotate(945deg);
            opacity: 0
        }
    }

    .screen5.act .loader {
        display: block
    }