@charset "UTF-8";
/* common */
h1 {
    font-family: Poppins Bold;
    font-size: 38px;
    line-height: 56px;
    text-align: center;
}
h1 span {
    color: #00bde3;
}
h2 {
    font-family: Poppins SemiBold;
    font-size: 26px;
    line-height: 32px;
}
h3 {
    font-family: Poppins Bold;
    font-size: 22px;
    line-height: 37px;
    margin: 56px 0 14px;
}
h4 {
    font-family: Poppins Bold;
    font-size: 18px;
    line-height: 29px;
    margin: 46px 0 23px;
}
.text-center{
    text-align: center;
}
.right-content p {
    line-height: 24px;
    margin-bottom: 16px;
}
.right-content p a {
    color: #0076e3;
}
.right-content .bg-blue {
    line-height: 40px;
    font-family: Poppins SemiBold;
    border-left: 6px solid #00bde3;
    background: #e4f2ff;
    border-radius: 4px;
    padding-left: 20px;
    margin: 16px 0;
}
.semibold-txt {
    font-family: Poppins SemiBold;
}
.medium-txt {
    //font-family: Poppins Medium;
}
.youtube-video {
    text-align: center;
    position: relative;
    margin-bottom: 18px
}

.youtube-video .play-button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: no-repeat center center;
    cursor: pointer;
    background-size: 70px;
    background-image: url(https://images.clevguard.com/de/images/public/video.svg)
}

@media (max-width: 768px) {
    h1 {
        font-size: 26px;
        line-height: 40px;
    }
    h2 {
        font-size: 20px;
        line-height: 32px;
        text-align: center;
    }
    h3 {
        font-size: 18px;
        line-height: 29px;
        margin: 24px 0 8px;
    }
    h4 {
        font-size: 16px;
        line-height: 24px;
    }
    .youtube-video iframe {
        width: 100%;
        height: calc((100vw - 40px) * .5625)
    }
}
/* common */

/* banner */
.banner {
    padding: 66px 0 65px;
    background: #e4f2ff;
}
.banner .page-desc {
    font-size: 18px;
    line-height: 25px;
    margin-top: 16px;
    text-align: center;
}
.banner .base-btn {
    margin: 32px auto 0
}
.banner .btn-group{
    display: flex;
    justify-content: center;
}
.banner .btn-group .base-btn {
    margin: 20px 10px 0;
}
@media (max-width: 768px) {
    .banner {
        padding: 40px 0 41px;
    }
    .banner .page-desc {
        font-size: 16px;
        line-height: 23px;
    }
    .banner .base-btn {
        margin: 24px auto 0;
        width: 200px;
        height: 50px;
    }
    .banner .btn-group .base-btn {
        margin: 24px 5px 0;
    }
}
/* banner */

/* page-content */
.page-content {
    margin-top: 64px;
    position: relative;
}
.page-content .base-maxwidth {
    display: flex;
    justify-content: flex-end;
}
.fixed {
    position: fixed;
    top: 100px;
}

.left-nav-warp {
    position: static;
    width: 300px;
    height: auto;
}

.touch-bottom {
    position: absolute;
    bottom: 100px;
}
.page-content .left-nav {
    width: 300px;
    /* height: 100%;     */
    border-radius: 10px;
    box-shadow: 0 6px 24px 0 rgba(22, 25, 45, .1);
    overflow: hidden;
    z-index: 1;
}
.page-content .left-nav.curr {
    position: fixed;
    top: 98px;
    height: auto;
}
.page-content .nav-title {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    position: relative;
    background: url(https://images.clevguard.com/de/assets/guide/step_bj_guide_az.svg);
    font-size: 20px;
    line-height: 28px;
    color: #fff;
    font-family: Poppins Medium;
}
.page-content .nav-list-icon {
    margin-right: 8px;
}
.page-content .nav-arrow-btn {
    display: none;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}
.page-content .nav-list {
    background: #fff;
    padding: 26px 20px 32px;
}
.page-content .nav-list li {
    padding-left: 32px;
    line-height: 26px;
    margin-bottom: 26px;
    position: relative;
    font-family: Poppins Medium;
    cursor: pointer;
}
.page-content .nav-list li.curr a,
.page-content .nav-list li:hover a {
    color: #00bde3;
    text-decoration: none;
}
.page-content .nav-list li:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: url(https://images.clevguard.com/de/assets/guide/step_unselected_guide_az.svg);
    left: 0;
    top: 3px;
    z-index: 2;
}
.page-content .nav-list li.curr:before {
    background: url(https://images.clevguard.com/de/assets/guide/step_check_guide_az.svg);
}
.page-content .nav-list li:after {
    content: '';
    position: absolute;
    width: 0;
    height: calc(100% + 26px);
    border-right: 1px dashed #ddd;
    left: 9.5px;
    top: 13px;
    z-index: 1;
}
.page-content .nav-list li:last-child:after {
    display: none;
}
.page-content .right-content {
    width: calc(100% - 364px);
    max-width: 836px;
    margin-left: 64px;
}
.page-content .content-nav {
    margin-top: 32px;
    padding: 31px 0 40px;
    border-top: 1px solid #dfe7ea;
    border-bottom: 1px solid #dfe7ea;
}
.page-content .content-nav-list {
    line-height: 26px;
}
.page-content .content-nav-list li {
    margin-bottom: 8px;
}
.page-content .content-nav-list li a {
    color: #0076e3;
}
.page-content .content-nav-tips {
    margin-top: 16px;
    font-family: Poppins SemiBold;
    line-height: 26px;
}
.page-content .step {
    padding-left: 15px;
    position: relative;
}
.page-content .step:before {
    content: '';
    position: absolute;
    width: 5px;
    height: 22px;
    top: 7px;
    left: 0;
    border-radius: 2.5px;
    background: #00bde3;
}
.page-content .step i {
    position: absolute;
    top: -78px;
}
.page-content .btn-box {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}
.page-content .base-btn {
    margin-left: 40px;
}
.page-content .base-btn:first-child {
    margin-left: 0;
}
.page-content .img-box {
    margin-top: 32px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.page-content .img-box.three img {
    max-width: 30%;
}
.page-content .img-box.five img {
    max-width: 20%;
}
.page-content .note {
    padding: 24px 32px;
    border-radius: 8px;
    background: #fff7ef;
    border: 1px solid #f93;
    margin: 24px 0;
}
.page-content .note-title {
    font-family: Poppins SemiBold;
    color: #f93;
    line-height: 26px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}
.page-content .note-title svg {
    margin-right: 6px;
}
.page-content .note-content {
    line-height: 23px;
    margin-top: 8px;
    margin-bottom: 0;
}
.page-content .tips {
    font-family: Poppins Medium;
    font-size: 22px;
    line-height: 37px;
    color: #f93;
    display: flex;
    align-items: center;
    margin: 8px 0;
}
.page-content .tips svg {
    margin-right: 8px;
}
.page-content .video-play {
    padding-left: 38px;
    position: relative;
}
.page-content .video-play:before {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    top: 4px;
    left: 0;
    background: url(https://images.clevguard.com/de/assets/guide/video_guide_az.svg);
}
.page-content .video {
    margin-top: 32px;
}
.page-content .video iframe {
    width: 100%;
}
.page-content .list-type {
    margin-top: 40px;
}
.page-content .list-type li {
    padding-left: 24px;
    margin-bottom: 16px;
    position: relative;
}
.page-content .list-type li a {
    color: #0076e3;
}
.page-content .list-type li:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 5px;
    left: 0;
    background: url(https://images.clevguard.com/de/assets/guide/dashboard_icon_guide_az.svg);
}
.page-content .list-type-img {
    margin-top: 40px;
}
.page-content .list-type-img li {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
}
.page-content .list-type-img li img {
    margin-right: 8px;
}
.page-content .helpful-box {
    display: flex;
    align-items: center;
    background: url(https://images.clevguard.com/de/assets/guide/helpful_bg.svg);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 64px;
    margin-bottom: 100px;
}
.page-content .helpful-box img {
    margin-top: 19px;
}
.page-content .helpful-box .btn-box {
    margin-left: 58px;
    margin-top: 0;
}
.page-content .helpful-box .btn-box .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 158px;
    height: 50px;
    border-radius: 6px;
    font-family: Poppins SemiBold;
    font-size: 20px;
    margin-left: 23px;
    transition: all .5s ease;
    cursor: pointer;
    margin-bottom: 0;
}
.page-content .helpful-box .btn-box > p:first-child {
    margin-left: 0;
}
.page-content .helpful-box .btn-yes {
    background: #00ace3;
    color: #fff;
}
.page-content .helpful-box .btn-yes:hover {
    color: #fff;
    background: #00a9cb;
    text-decoration: none;
}
.page-content .helpful-box .btn-no {
    border: 2px solid #00ace3;
    color: #00ace3;
}
.page-content .helpful-box .btn-no:hover {
    color: #fff;
    background: #00ace3;
    text-decoration: none;
}
.page-content .helpful-box .helpful-dialog {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .2);
    z-index: 103;
    display: none;
}
.page-content .helpful-box .dialog-content {
    position: absolute;
    width: calc(100% - 40px);
    max-width: 500px;
    height: 240px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);
    border-radius: 4px;
    border: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 20px 20px 35px 20px;
}
.page-content .helpful-box .dialog-content img {
    margin: 0;
}
.page-content .helpful-box .close-dialog {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}
.page-content .helpful-box .icon {
    display: none;
}
.page-content .helpful-box .dialog-tips {
    display: none;
    line-height: 24px;
}
.page-content .helpful-box .dialog-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 40px;
    border-radius: 20px;
    background: #00bde3;
    color: #fff;
    margin: 0;
    cursor: pointer;
}
.page-content .helpful-box .helpful-dialog.success,
.page-content .helpful-box .helpful-dialog.error {
    display: block;
}
.page-content .helpful-box .helpful-dialog.success .icon.success-icon,
.page-content .helpful-box .helpful-dialog.success .dialog-tips.success {
    display: block;
}
.page-content .helpful-box .helpful-dialog.error .icon.error-icon,
.page-content .helpful-box .helpful-dialog.error .dialog-tips.error {
    display: block;
}
.guide-btn-group{
    display: flex;
    justify-content: center;
}
.part-title{
    text-align: center;
    line-height: 60px;
    background: #e4f2ff;
    margin-bottom: 30px;
    border-radius: 5px;
    position: relative;
}
.part-title i{
    top: -80px;
    position: absolute;
}
.guide-btn-group{
    display: flex;
    justify-content: center;
}
.content-btn-group{
    margin-bottom: 20px;
}
.guide-btn-group a,
.guide-btn-group .base-btn{
    margin: 0;
}
.guide-btn-group a:nth-child(1) {
    margin-right: 20px;
}
.banner-btn-group{
    margin-top: 20px;
}

.anchor-target {
    scroll-margin-top: 80px;
}
@media (max-width: 1024px) {
    .page-content .left-nav {
        width: 260px;
        height: auto;
        position: fixed;
        top: 140px;
        left: -220px;
        border-radius: 20px;
        transition: all .5s ease;
    }
    .page-content .left-nav.show {
        left: 0;
        border-radius: 0 10px 10px 0;
    }
    .page-content .nav-title {
        padding: 6px 20px;
        font-size: 18px;
        line-height: 28px;
        background: rgba(0, 189, 227, .8);
        transition: all .5s ease;
    }
    .page-content .left-nav.show .nav-title {
        padding: 13px 20px;
        background: #00bde3;
    }
    .page-content .nav-list-icon {
        width: 22px;
        margin-right: 8px;
    }
    .page-content .nav-arrow-btn {
        display: block;
        transition: all .5s ease;
    }
    .page-content .nav-arrow-btn.opened {
        transform: rotateY(180deg) translateY(-50%);
    }
    .page-content .nav-list {
        display: none;
        padding: 24px 24px 24px 20px;
        max-height: calc(100vh - 280px);
        overflow-y: scroll;
    }
    .page-content .left-nav.show .nav-list {
        display: block;
    }
    .page-content .nav-list li {
        padding-left: 28px;
        margin-bottom: 18px;
    }
    .page-content .nav-list li:after {
        height: calc(100% + 18px);
    }
    .page-content .right-content {
        width: 100%;
        max-width: none;
        margin-left: 0;
    }
}
@media (max-width: 768px) {
    .page-content {
        margin-top: 24px;
    }
    .left-nav-warp{
        width: 0;
    }
    .page-content .content-nav {
        margin-top: 24px;
        padding: 24px 0;
    }
    .page-content .content-nav-list li {
        margin-bottom: 16px;
    }
    .page-content .step:before {
        top: 3px;
    }
    .page-content .btn-box {
        margin-top: 24px;
    }
    .page-content .base-btn {
        margin-left: 15px;
    }
    .page-content .img-box {
        margin-top: 16px;
    }
    .page-content .note {
        padding: 16px;
    }
    .page-content .video {
        margin-top: 16px;
    }
    .page-content .list-type {
        margin-top: 16px;
    }
    .page-content .list-type-img {
        margin-top: 16px;
    }
    .page-content .helpful-box {
        flex-direction: column;
        background: #a4f0ff;
        margin: 40px 0 54px;
    }
    .page-content .helpful-box img {
        margin-top: 21px;
    }
    .page-content .helpful-box .btn-box {
        margin: 24px 0;
    }
}
@media (max-width: 540px) {
    .page-content .btn-box {
        flex-direction: column;
        align-items: center;
    }
    .page-content .base-btn {
        margin-left: 0;
        margin-top: 12px;
    }
    .page-content .base-btn:first-child {
        margin-top: 0;
    }
    .page-content .helpful-box .btn-box {
        flex-direction: row;
    }
}
@media (max-width: 390px) {
    .page-content .helpful-box .btn-box .btn {
        width: 140px;
        height: 46px;
    }
}
/* page-content */