@charset "UTF-8";

main {
    --text-primary-color: #22242E;
    --text-secondary-color: #343640;
}

/* #region banner/product-info/choose-reason里 btn-group */
.btn-group .count-down {
    position: relative;
}

.btn-group .count-down::after {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 76px;
    height: 24px;
    background: url(https://images.clevguard.com/jp/assets/images/common/20_percent_count_down.gif) no-repeat;
    background-size: contain;
    border-radius: 0 8px 0 0;
}

.btn-group {
    margin-top: 20px;
    display: flex;
}

.btn-group .base-btn {
    margin-left: 24px;
    height: 64px;
    line-height: 64px;
    font-size: 18px;
    border-radius: 12px;
    transition: transform .2s ease;
}

.btn-group .base-btn:hover {
    transform: translateY(-3px);
}

.base-btn-fill-orange {
    background: linear-gradient(171.12deg, #FF9933 11.68%, #ED7C0A 92.91%);
}

.base-btn-fill-orange:hover {
    background: linear-gradient(171.12deg, #FFB266 11.68%, #FA932C 92.91%);
}

.base-btn-fill-blue {
    background: linear-gradient(176.65deg, #60E4FF 2.61%, #07C8EF 97.09%);
}

.base-btn-fill-blue:hover {
    background: linear-gradient(176.65deg, #86EBFF 2.61%, #1ED6FB 97.09%);
}

.btn-group .base-btn:first-child {
    margin-left: 0;
}

@media (max-width: 768px) {
    .btn-group {
        margin-top: 24px;
        justify-content: center;
    }

    .btn-group .base-btn {
        width: 160px;
        height: 50px;
        line-height: 50px;
        margin-left: 12px;
    }

    .btn-group .count-down::after {
        width: 52px;
        height: 16px;
    }
}

/* #endregion 页面通用按钮组 */

/* #region banner */
.banner {
    padding: 89px 0 58px;
    background: url(https://images.clevguard.com/jp/assets/overview/whatsapp_monitoring/whatsApp-overview.png) no-repeat bottom right / cover, #E5F9FF;
}

.banner .base-maxwidth {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 1;
}

.banner .left {
    width: 52%;
    color: var(--text-primary-color);
}

.banner .logo-container {
    display: flex;
    align-items: center;
}

.banner .logo-container img {
    width: 40px;
    height: 40px;
    margin-right: 5px;
}

.banner .left strong {
    font-size: 22px;
    white-space: nowrap;
}

.banner h1 {
    margin-top: 6px;
    font-size: 46px;
    line-height: 1.5;
    text-align: left;
    font-family: Poppins;
}

.banner h1 span {
    position: relative;
    z-index: 1;
}

.banner h1 span::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 7px;
    height: 23px;
    background: url(https://images.clevguard.com/jp/assets/overview/whatsapp_monitoring/title-underline.svg) no-repeat 0 0 / 100% 100%;
    z-index: -1;
}

.banner .desc {
    max-width: 96%;
    margin-top: 9px;
    line-height: 1.5;
}

.banner .reviews {
    margin-top: 27px;
    display: flex;
    align-items: flex-start;
    line-height: 24px;
}

.banner .reviews .star {
    display: flex;
}

.banner .reviews .star svg {
    margin-left: 8px;
}

.banner .reviews .star svg:first-child {
    margin-left: 0;
}

.banner .reviews .reviews-count {
    margin-left: 10px;
    font-size: 14px;
    color: rgba(41, 44, 51, .6);
}

.banner .reviews .reviews-count:hover {
    color: #00bde3;
}

.banner .right {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50.6%;
    z-index: -1;
}

.banner picture {
    border-radius: 16px;
    overflow: hidden;
}

.banner .video-desc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 24px;
    margin-top: 37px;
    line-height: 24px;
    color: var(--text-secondary-color);
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
}

.banner .video-desc:hover {
    color: #00bde3;
}

.banner .video-desc svg {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.banner .btn-linked-external {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: #787878;
    font-size: 12px;
    width: 60px;
}

.banner .btn-linked-external:hover {
    color: #787878;
    text-decoration: none;
}

.banner .btn-linked-external+.btn-linked-external {
    margin-left: 23px;
    z-index: 0
}

.banner .channel-btn {
    display: flex;
    align-items: center;
    margin-top: 25px;
}

.banner .btn-linked-external img {
    display: none;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.banner .btn-linked-external .img-normal {
    display: block;
}

.banner .btn-linked-external.app-link:hover .img-normal {
    display: none;
}

.banner .btn-linked-external.app-link:hover .img-hover {
    display: block;
}


/* 图标入口 */
@media (max-width: 768px) {
    .banner {
        padding: 60px 0 38px;
        background: url(https://images.clevguard.com/jp/assets/overview/whatsapp_monitoring/whatsApp-overview-m.png) no-repeat bottom left / cover, #e4f2ff;
    }

    .banner .base-maxwidth {
        flex-direction: column;
    }

    .banner .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .banner h1 {
        margin-top: 18px;
        font-size: 32px;
        text-align: center;
    }

    .banner .desc {
        font-size: 14px;
    }

    .banner .reviews {
        margin-top: 18px;
        justify-content: center;
    }

    .banner .btn-group {
        margin-top: 24px;
        justify-content: center;
    }

    .banner .btn-group .base-btn {
        width: 160px;
        height: 50px;
        line-height: 50px;
        margin-left: 12px;
    }

    .banner .btn-group .base-btn:first-child {
        margin-left: 0;
    }

    .banner .channel-btn {
        margin: 15px 0 10px;
    }

    .banner .right {
        position: unset;
        width: 100%;
        margin-top: 5px;
    }

    .banner picture {
        border-radius: 0;
        overflow: auto;
    }

    .banner .btn-group .count-down::after {
        width: 52px;
        height: 16px;
    }

    .banner .video-desc {
        margin-top: 27px;
        font-size: 14px;
        height: 21px;
        line-height: 21px;
    }

    .banner .btn-linked-external {
        font-size: 11px;
    }

    .banner .btn-linked-external img {
        width: 20px;
        height: 20px;
        border-radius: 2px;
        margin-bottom: 6px;
    }

    .banner .btn-linked-external+.btn-linked-external {
        margin-left: 8px;
    }
}

/* #endregion banner */

/* #region monitor-message */
.monitor-message {
    margin-top: 130px;
    text-align: center;
}

.monitor-message .base-maxwidth {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.monitor-message h2 {
    font-size: 46px;
    text-align: center;
    line-height: 64px;
    color: var(--text-primary-color);
}

.monitor-message .message-desc {
    max-width: 955px;
    color: var(--text-secondary-color);
    margin-top: 10px;
    line-height: 1.5;
}

.monitor-message .message-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 74px;
}

.message-content .message-left {
    width: 42.25%;
    max-width: 507px;
}

.message-content .message-right {
    display: flex;
    flex-direction: column;
    width: 41%;
    max-width: 491px;
}

.message-right .message-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 63px;
}

.message-right .message-item:first-child {
    margin-top: 0;
}

.message-item .message-item-title {
    position: relative;
    font-size: 20px;
    line-height: 1.5;
    text-align: left;
    color: var(--text-primary-color);
}

.message-item .message-item-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 17px;
    width: 116px;
    height: 10px;
    background: linear-gradient(90deg, #09D3FC 0%, #FFFFFF 100%);
    z-index: -1;
}

.message-item .message-item-desc {
    margin-top: 10px;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    color: var(--text-secondary-color);
}

.message-icon-list {
    display: flex;
    align-items: center;
    margin-top: 17px;
}

.message-item svg {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0px 4px 4.3px 0px #D3E5E387;
    margin-left: 12px;
}

.message-item svg:first-child {
    margin-left: 0;
}

@media (min-width: 1440px) {
    .monitor-message {
        position: relative;
    }

    .monitor-message::after {
        content: '';
        position: absolute;
        bottom: -185px;
        right: -286px;
        width: 492px;
        height: 492px;
        background: #DDFFFF;
        border-radius: 50%;
        z-index: -1;
        filter: blur(100px);
    }
}

@media (max-width: 1024px) {
    .monitor-message h2 {
        font-size: 36px;
        line-height: 1.5;
    }
}

@media (max-width: 768px) {
    .monitor-message {
        margin-top: 60px;
    }

    .monitor-message h2 {
        font-size: 28px;
    }

    .monitor-message .message-desc {
        font-size: 14px;
        line-height: 21px;
    }
}

@media (max-width: 640px) {
    .monitor-message .message-content {
        flex-direction: column;
        margin-top: 15px;
    }

    .message-content .message-right {
        width: 100%;
        max-width: 100%;
    }

    .message-content .message-left {
        width: 80%;
        max-width: 80%;
    }

    .message-right .message-item {
        margin-top: 30px;
        align-items: center;
        width: 100%;
    }

    .message-item .message-item:first-child {
        margin-top: 15px;
    }

    .message-item .message-item-title {
        font-size: 18px;
        text-align: center;
    }

    .message-item .message-item-desc {
        text-align: center;
    }

    .message-icon-list {
        margin-top: 10px;
    }
}

@media (max-width: 414px) {
    .message-content .message-left {
        width: 100%;
        max-width: 100%;
    }
}

/* #endregion monitor-message */

/* #region monitor-function */
.monitor-function {
    position: relative;
    margin-top: 130px;
    text-align: center;
}

.monitor-function .base-maxwidth {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.monitor-function h2 {
    font-size: 46px;
    text-align: center;
    max-width: 846px;
    line-height: 64px;
    color: var(--text-primary-color);
}

.monitor-function .monitor-function-desc {
    max-width: 850px;
    color: var(--text-secondary-color);
    margin-top: 10px;
    line-height: 1.5;
}

.monitor-function .function-content {
    position: relative;
    height: 432px;
    margin-top: 40px;
}

.monitor-function .function-swiper {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30.3%;
    transform: translateX(-50%);
    cursor: pointer;
}

.monitor-function .function-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.monitor-function .function-row {
    display: flex;
    justify-content: space-between;
    margin-top: 46px;
}

.monitor-function .function-row:first-child {
    margin-top: 0;
}

.monitor-function .function-info,
.monitor-function .function-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(35% - 40px);
    min-height: 152px;
    border-radius: 12px;
    padding: 6px 8px 7px 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.monitor-function .function-info {
    display: none;
    width: 100%;
    min-height: auto;
}

.monitor-function .function-item.curr {
    background: #F3FDFF;
    box-shadow: 0px 4px 12.6px 0px #9AA1AC2E;
}

.monitor-function .function-title {
    font-size: 20px;
    line-height: 30px;
    text-align: left;
    font-family: Poppins SemiBold;
    color: var(--text-primary-color);
}

.monitor-function .function-title img {
    width: 33px;
    height: 32px;
    margin-right: 6px;
}

.monitor-function .function-desc {
    margin-top: 7px;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary-color);
}

.monitor-function .base-btn {
    height: 64px;
    margin-top: 77px;
    line-height: 64px;
    font-size: 18px;
    border-radius: 12px;
    transition: transform .2s ease;
}

.monitor-function .base-btn:hover {
    transform: translateY(-3px);
}

.monitor-function .base-btn-fill-blue {
    background: linear-gradient(176.65deg, #60E4FF 2.61%, #07C8EF 97.09%);
}

.monitor-function .base-btn-fill-blue:hover {
    background: linear-gradient(176.65deg, #86EBFF 2.61%, #1ED6FB 97.09%);
}

@media (hover: hover) {
    .monitor-function .function-item:hover {
        background: #F3FDFF;
        box-shadow: 0px 4px 12.6px 0px #9AA1AC2E;
    }
}

@media (min-width: 1440px) {
    .monitor-function {
        position: relative;
    }

    .monitor-function::before {
        content: '';
        position: absolute;
        bottom: -49px;
        left: -286px;
        width: 492px;
        height: 492px;
        background: #DDFFFF;
        border-radius: 50%;
        z-index: -1;
        filter: blur(100px);
    }
}

@media (max-width: 1024px) {
    .monitor-function h2 {
        font-size: 36px;
        line-height: 1.5;
    }

    .monitor-function .function-content {
        width: 100%;
        height: auto;
        margin-top: 11px;
    }

    .monitor-function .function-swiper {
        position: unset;
        width: auto;
        max-width: 100%;
        top: auto;
        left: auto;
        transform: translateX(0);
        margin: 0 auto;
    }

    .monitor-function .function-info {
        display: block;
        max-width: 70%;
        margin: 0 auto 24px;
        padding: 0;
    }

    .monitor-function .function-list {
        display: none;
    }

    .function-swiper .swiper-container {
        overflow: unset;
    }

    .monitor-function .swiper-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100% !important;
        margin-top: 15px;
        padding: 7px 7px 23px 16px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0px 4px 12.6px 0px #9AA1AC2E;
    }

    .function-swiper .function-pagination {
        margin-top: 27px;
    }

    .function-swiper .swiper-pagination-bullet {
        margin: 0 3px;
    }

    .function-swiper .swiper-pagination-bullet-active {
        width: 24px;
        height: 10px;
        border-radius: 30px;
        background-color: #09D4FD;
    }

    .function-swiper picture {
        width: 63%;
    }
}

@media (max-width: 768px) {
    .monitor-function {
        margin-top: 60px;
    }

    .monitor-function .base-maxwidth {
        margin: 0 8px;
    }

    .monitor-function h2 {
        font-size: 28px;
    }

    .monitor-function .monitor-function-desc {
        font-size: 14px;
        line-height: 21px;
    }

    .monitor-function .function-title,
    .monitor-function .function-info {
        text-align: left;
        max-width: 100%;
    }

    .function-swiper picture {
        width: 73%;
    }

    .monitor-function .base-btn {
        margin-top: 40px;
    }
}

/* #endregion monitor-function */

/* #region monitor-usage */
.monitor-usage {
    position: relative;
    margin-top: 130px;
    text-align: center;
}

.monitor-usage .base-maxwidth {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.monitor-usage .usage-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 62px;
}

.monitor-usage h2 {
    font-size: 46px;
    text-align: center;
    line-height: 64px;
    color: var(--text-primary-color);
}

.monitor-usage .usage-desc {
    max-width: 955px;
    color: var(--text-secondary-color);
    margin-top: 10px;
    line-height: 1.5;
}

.usage-content .usage-left {
    width: 41%;
    max-width: 491px;
}

.usage-content .usage-left .step-item {
    display: none;
}

.usage-content .usage-right {
    display: flex;
    flex-direction: column;
    width: 43.4%;
    max-width: 521px;
}

.usage-content .step-item:first-child {
    margin-top: 0;
}

.usage-content .step-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-height: 134px;
    margin-top: 10px;
    padding: 12px 10px 12px 20px;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    border: 1px solid #fff;
    box-shadow: 0px 4px 12.6px 0px #9AA1AC2E;
    transition: all .2s ease;
}

.usage-content .step-item.curr {
    background: #F3FDFF;
    border: 1px solid #43DCFA;
}

.usage-content .step-title {
    font-size: 20px;
    line-height: 30px;
    text-align: left;
    font-family: Poppins SemiBold;
    color: var(--text-primary-color);
}

.usage-content .step-title img {
    width: 40px;
    height: 40px;
    margin-right: 11px;
}

.usage-content .step-desc {
    margin-top: 10px;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary-color);
}

@media (hover: hover) {
    .usage-content .step-item:hover {
        background: #F3FDFF;
        border: 1px solid #43DCFA;
    }
}

@media (max-width: 768px) {
    .monitor-usage {
        margin-top: 60px;
    }

    .monitor-usage .base-maxwidth {
        margin: 0 8px;
    }

    .monitor-usage h2 {
        font-size: 28px;
        line-height: 42px;
    }

    .monitor-usage .usage-desc {
        font-size: 14px;
        line-height: 21px;
    }

    .monitor-usage .usage-content {
        flex-direction: column;
        margin-top: 25px;
    }

    .usage-content .usage-left {
        order: 1;
        width: 100%;
        max-width: 100%;
    }

    .usage-content .usage-left .step-item {
        display: flex;
        border: 0;
        margin: 0 0 38px 10px;
    }

    .usage-content .step-item.curr {
        background: #fff;
        border: 0;
    }

    .usage-content .usage-right {
        display: none;
    }

    .usage-content .swiper-container {
        overflow: unset;
    }

    .usage-content .swiper-slide {
        padding: 7px 7px 23px 16px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0px 4px 12.6px 0px #9AA1AC2E;
    }

    .usage-content .step-item {
        padding: 0;
        box-shadow: unset;
    }

    .usage-content .step-title {
        font-size: 18px;
        line-height: 27px;
    }

    .usage-content .usage-pagination {
        margin-top: 29px;
    }

    .usage-content .swiper-pagination-bullet {
        margin: 0 3px;
    }

    .usage-content .swiper-pagination-bullet-active {
        width: 24px;
        height: 10px;
        border-radius: 30px;
        background-color: #09D4FD;
    }
}

/* #endregion monitor-usage */

/* #region hot-scenarios */
.hot-scenarios {
    margin: 130px 0;
    text-align: center;
}

.hot-scenarios .base-maxwidth {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hot-scenarios h2 {
    font-size: 46px;
    text-align: center;
    line-height: 64px;
    color: var(--text-primary-color);
}

.hot-scenarios .scenarios-desc {
    max-width: 955px;
    color: var(--text-secondary-color);
    margin-top: 10px;
    line-height: 1.5;
}

.hot-scenarios .scenarios-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 45px;
}

.scenarios-content .scene-item {
    width: calc(33.3% - 16.6px);
    min-height: 460px;
    padding: 20px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0px 4px 18px 0px #1A21201A;
    transition: transform .2s ease;
}

.scenarios-content .scene-item:hover {
    box-shadow: 0px 4px 18px 0px #09D3FC5C;
    transform: translateZ(8px) scale(1.01);
}

.scene-item .scene-image {
    border-radius: 14px;
    overflow: hidden;
}

.scene-item .scene-title {
    margin-top: 17px;
    color: var(--text-primary-color);
    font-size: 22px;
    text-align: center;
}

.scene-item .scene-desc {
    color: var(--text-secondary-color);
    margin-top: 16px;
    line-height: 1.5;
}

@media (min-width: 1440px) {
    .hot-scenarios {
        position: relative;
    }

    .hot-scenarios::after {
        content: '';
        position: absolute;
        top: -148px;
        right: -286px;
        width: 492px;
        height: 492px;
        background: #E3FFEB;
        border-radius: 50%;
        z-index: -1;
        filter: blur(100px);
    }
}

@media (max-width: 768px) {
    .hot-scenarios {
        margin: 48px 0 30px;
    }

    .hot-scenarios .base-maxwidth {
        margin: 0 8px;
    }

    .hot-scenarios h2 {
        font-size: 28px;
        line-height: 42px;
    }

    .hot-scenarios .scenarios-desc {
        font-size: 14px;
        line-height: 21px;
    }

    .hot-scenarios .scenarios-content {
        flex-direction: column;
        margin-top: 20px;
    }

    .scenarios-content .scene-item {
        width: 100%;
        padding: 20px 10px;
        margin-bottom: 30px;
    }

    .scene-item .scene-info {
        padding: 0 12px;
    }
}

/* #endregion hot-scenarios */

/* #region choose-reason */
.choose-reason {
    padding: 77px 0 51px;
    text-align: center;
    background: url(https://images.clevguard.com/jp/assets/overview/whatsapp_monitoring/choose-bg.jpg) no-repeat center/cover, #EBFAFF;
}

.choose-reason .base-maxwidth {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.choose-reason h2 {
    font-size: 46px;
    text-align: center;
    line-height: 64px;
    color: var(--text-primary-color);
}

.choose-reason .reason-content {
    margin: 50px auto 40px;
    max-width: 100%;
    overflow: hidden;
}

.reason-content .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 16px;
    height: auto;
    border-radius: 28px;
    background: linear-gradient(180deg, #FFFFFF 0%, #EBFDFD 116.99%);
    box-shadow: 0px 2px 24px 0px #051A2E14;
    transform: scale(0.87);
}

.reason-content .swiper-container {
    overflow: unset;
}

.reason-content .swiper-wrapper {
    height: auto;
}

.reason-content .swiper-slide.swiper-slide-active {
    transform: scale(1);
}

.reason-content .reason-pagination {
    margin-top: 34px;
}

.reason-content .swiper-pagination-bullet {
    margin: 0 3px;
}

.reason-content .swiper-pagination-bullet-active {
    width: 24px;
    height: 10px;
    border-radius: 30px;
    background-color: #09D4FD;
}

.reason-content img {
    width: 70px;
    height: 70px;
}

.reason-content .reason-title {
    margin-top: 24px;
    font-size: 16px;
    line-height: 30px;
    color: #06223D;
}

.reason-content .reason-desc {
    margin-top: 20px;
    font-size: 14px;
    line-height: 24px;
    color: #06223D;
}

@media (max-width: 768px) {
    .choose-reason {
        padding: 60px 0 29px;
        background: url(https://images.clevguard.com/jp/assets/overview/whatsapp_monitoring/choose-bg-m.jpg) no-repeat center/cover, #EBFAFF;
    }

    .choose-reason .base-maxwidth {
        margin: 0;
    }

    .choose-reason h2 {
        font-size: 28px;
        line-height: 42px;
    }

    .choose-reason .reason-content {
        margin-top: 30px;
        overflow: unset;
    }

    .choose-reason .btn-group {
        margin-top: 0;
    }

    .reason-content .swiper-container {
        width: 80%;
    }

    .reason-content .swiper-slide {
        padding: 23px 9px 29px;
    }
}

/* #endregion choose-reason */


/* #region use-procedure */
.use-procedure {
    position: relative;
    margin: 130px 0;
    text-align: center;
}

.use-procedure .base-maxwidth {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.use-procedure h2 {
    font-size: 46px;
    text-align: center;
    line-height: 64px;
    color: var(--text-primary-color);
}

.use-procedure .use-procedure-desc {
    max-width: 856px;
    color: var(--text-secondary-color);
    margin-top: 10px;
    line-height: 1.5;
}

.use-procedure .procedure-content {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 100px;
}


.procedure-content .procedure-left {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 42.5%;
    max-width: 510px;
    margin-right: 9.6%;
}

.procedure-content .procedure-right {
    width: 41.25%;
    max-width: 495px;
}

.procedure-left .procedure-item:first-child {
    margin-top: 0;
}

.procedure-left .procedure-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    padding: 31px 20px 15.5px 30px;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    border: 2px solid#EAF6F8;
    transition: all .2s ease;
}

.procedure-left .procedure-item.curr {
    background: #fff;
    border: 1px solid #00BDE3
}

.procedure-left .procedure-item.curr .procedure-title {
    color: #00BDE3;
}

.procedure-left .procedure-title {
    font-size: 20px;
    line-height: 28px;
    text-align: left;
    font-family: Poppins SemiBold;
    color: #292C33;
}

.procedure-item.curr .procedure-title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 38px;
    border-left: 6px solid #00BDE3;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    transform: translateY(-50%);
}

.procedure-item .procedure-desc {
    margin-top: 14px;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-secondary-color);
}

.procedure-left .base-btn {
    margin-top: 20px;
    height: 64px;
    border: 1px solid #00BDE3;
    color: #00BDE3;
    font-weight: 700;
}

.procedure-left .base-btn span {
    margin: 0 11px;
}

.procedure-left .base-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    background: linear-gradient(176.65deg, #60E4FF 2.61%, #07C8EF 97.09%);
    border: none;
}

@media (max-width: 768px) {
    .use-procedure {
        margin: 60px 0;
    }

    .use-procedure .base-maxwidth {
        margin: 0 8px;
    }

    .use-procedure h2 {
        font-size: 28px;
        line-height: 42px;
    }

    .use-procedure .use-procedure-desc {
        font-size: 14px;
        line-height: 21px;
    }

    .use-procedure .procedure-content {
        position: relative;
        flex-direction: column;
        margin-top: 0;
        padding-bottom: 104px;
    }

    .procedure-content .procedure-left {
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
        margin-right: 0;
    }

    .procedure-content .procedure-right {
        width: 100%;
        max-width: 100%;
        margin-top: 8px;
    }

    .procedure-left .procedure-item {
        position: relative;
        padding: 0 0 0 41px;
        margin: 0 0 25px 0;
        border: none;
    }

    .procedure-left .procedure-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        background: url(https://images.clevguard.com/jp/assets/overview/whatsapp_monitoring/use-step-off.svg) no-repeat;
    }

    .procedure-left .procedure-item::after {
        content: '';
        width: 0;
        height: calc(100% + 25px);
        border-right: 1px dashed #09D4FD;
        position: absolute;
        top: 14px;
        left: 15px;
    }

    .procedure-left .procedure-item:nth-child(3)::after {
        display: none;
    }

    .procedure-left .procedure-item.curr {
        color: #00BDE3;
        border: none;
    }

    .procedure-left .procedure-item.curr::before {
        background: url(https://images.clevguard.com/jp/assets/overview/whatsapp_monitoring/use-step-on.svg) no-repeat;
    }

    .procedure-left .procedure-title {
        font-size: 16px;
        line-height: 28px;
    }

    .procedure-item .procedure-desc {
        display: none;
        font-size: 14px;
        margin-top: 8px;
    }

    .procedure-item.curr .procedure-desc {
        color: #00BDE3;
    }

    .procedure-item.curr .procedure-title::before {
        display: none;
    }

    .procedure-left .base-btn {
        position: absolute;
        bottom: 0;
        left: calc(50% - 120px);
    }
}


/* #endregion use-procedure */

/* #region product-info */
.product-info {
    background: linear-gradient(97.5deg, #EBFCFE 5.96%, #E2FEF2 95.58%);
}

.product-info .base-maxwidth {
    padding: 91px 0 97px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-info picture {
    margin-left: 7%;
    max-width: 211px;
}

.product-info .product-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 732px;
    margin-left: 10px;
}

.product-info .product-detail h2 {
    font-size: 36px;
    color: var(--text-primary-color);
    line-height: 64px;
}

.product-info .product-detail .product-desc {
    color: #292C33;
}

.product-info .product-detail .btn-group {
    margin-top: 36px;
}

@media (max-width: 1024px) {
    .product-info .base-maxwidth {
        margin: 0;
    }

    .product-info picture {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .product-info .base-maxwidth {
        flex-direction: column;
        align-items: center;
        margin: 0 20px;
        padding: 50px 0 18px;
    }

    .product-info .product-detail {
        align-items: center;
        margin-left: 0;
    }

    .product-info .product-detail h2 {
        font-size: 28px;
        line-height: 42px;
        font-family: 'Poppins';
        white-space: nowrap;
        text-align: center;
    }

    .product-info .product-detail .product-desc {
        margin-top: 10px;
        font-size: 14px;
        text-align: center;
    }

    .product-info .product-detail .btn-group {
        margin-top: 40px;
    }

    .product-info picture {
        order: 1;
        margin-top: 40px;
    }
}

/* #endregion product-info */

/* #region What People Say About WhatsApp Staus Seen start */
.people-status {
    padding: 130px 0 51px;
    background: linear-gradient(144.75deg, #FFFFFF 26.73%, #EAFDFD 79.3%);
}

.people-status h2 {
    max-width: 840px;
    margin: 0 auto;
    font-size: 46px;
    text-align: center;
    line-height: 64px;
    color: var(--text-primary-color);
}

.people-status .desc {
    margin-top: 10px;
    text-align: center;
    color: var(--text-secondary-color);
}

.content {
    display: flex;
    justify-content: space-between;
    margin-top: 89px;
}

.avg-reviews {
    width: 25.5%;
}

.avg-reviews .avg-bold {
    font-size: 36px;
    line-height: 54px;
}

.avg-reviews .progress-star {
    margin: 0 6px 0 8px;
}

.avg-reviews .star-wrap {
    margin: 6px 0 14px;
}

.avg-reviews .desc {
    text-align: left;
    margin-bottom: 16px;
    color: #2e2e2e;
    opacity: 1;
    line-height: 21px;
    padding-right: 40px;
}

.progress-list li {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
}

.progress-list li .schedule {
    width: calc(100% - 60px);
    margin-right: 14px;
    background: #ECECEC;
    height: 4px;
    border-radius: 2px;
}

.progress-list li .number {
    width: 24px;
}

.progress-list li .on {
    height: 100%;
    border-radius: 4px;
}

.progress-list li:nth-child(1) .on {
    width: 91.8%;
    background: #4DA852;
}

.progress-list li:nth-child(2) .on {
    width: 62.4%;
    background: #A5D330;
}

.progress-list li:nth-child(3) .on {
    width: 21.8%;
    background: #F7E83E
}

.progress-list li:nth-child(4) .on {
    width: 15.3%;
    background: #FBA62A
}

.progress-list li:nth-child(5) .on {
    width: 9.8%;
    background: #F13916;
}

.review-link {
    color: #00BDE3;
    margin-top: 15px;
}

.review-list {
    display: flex;
    justify-content: space-between;
    width: 72%;
    margin-left: 4%;
}

.review-list .review-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(33% - 21px);
    min-height: 377px;
    padding: 30px 19px;
    line-height: 20px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FFFF 100%);
    border-radius: 10px;
    box-shadow: 0px 4px 11px 0px #CBD9DC40;
}

.review-list .review-item .desc {
    text-align: left;
    font-size: 14px;
    color: var(--text-secondary-color);
}

.review-list .review-item .time {
    margin-top: 17px;
    color: #787878;
    font-size: 14px;
}

.review-list .head {
    display: flex;
    align-items: center;
}

.review-list .head picture {
    margin-right: 11px;
    width: 60px;
    height: 60px;
}

.review-list .name {
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--text-primary-color);
}

.people-status .base-maxwidth {
    overflow: hidden;
}

.people-status .scroll-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 54px;
    margin-top: 131px;
}

.people-status .reviews-logo-list {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 2736px;
    height: 100%;
    animation: scroll 60s linear infinite;
    transform: translate3d(0, 0, 0);
}

.people-status .reviews-logo-list img {
    margin: 0 12px;
}

@keyframes scroll {
    100% {
        transform: translateX(-69%);
    }
}

.people-status .scroll-wrap::before {
    position: absolute;
    top: 0;
    left: -216px;
    z-index: 2;
    width: 450px;
    height: 60px;
    content: "";
    background: linear-gradient(88.8deg, #f3fefe 46.97%, rgb(241 245 254 / 0%) 90.87%);
    animation: unset;
}

.people-status .scroll-wrap::after {
    position: absolute;
    top: 0;
    right: -216px;
    z-index: 2;
    width: 450px;
    height: 60px;
    content: "";
    background: linear-gradient(90.13deg, #EAFDFD 50.04%, rgb(241 245 254 / 0%) 99.93%);
    transform: rotate(-180deg);
    animation: unset;
}

@media (max-width: 1200px) {
    .people-status .scroll-wrap::before {
        left: -116px;
        width: 250px;
    }

    .people-status .scroll-wrap::after {
        right: -116px;
        width: 250px;
    }
}

@media (max-width: 768px) {
    .people-status {
        padding: 60px 0;
    }

    .people-status .desc {
        font-size: 14px;
    }

    .people-status h2 {
        font-size: 28px;
        line-height: 42px;
    }

    .people-status .content {
        flex-direction: column;
        margin-top: 40px;
    }

    .people-status .review-list {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-left: 0;
    }

    .review-list .review-item {
        margin-right: 0;
        margin-top: 20px;
        width: 100%;
        max-width: 360px;
        min-height: 313px;
    }

    .avg-reviews {
        width: 100%;
    }

    .people-status .scroll-wrap {
        margin-top: 60px;
    }

    .people-status .scroll-wrap::before,
    .people-status .scroll-wrap::after {
        display: none;
    }
}

/*  #endregion What People Say About WhatsApp Staus Seen end */

/* #region compatibility start */

.compatibility {
    padding: 130px 0 114px;
}

.compatibility h2 {
    max-width: 840px;
    margin: 0 auto;
    font-size: 46px;
    text-align: center;
    line-height: 64px;
    color: var(--text-primary-color);
}

.compatibility .plate-desc {
    text-align: center;
    margin: 10px auto 0;
    line-height: 24px;
    color: var(--text-secondary-color);
}

.compatibility .base-maxwidth {
    background-color: #fff;
}

.compatibility .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 70px;
    color: #2E2E2E;
}

.compatibility .header-title {
    height: 56px;
    margin-bottom: 6px;
    font-size: 24px;
    line-height: 56px;
    text-align: left;
    white-space: nowrap;
}

.compatibility .wrap .left-box,
.compatibility .wrap .right-box {
    width: calc(50% - 20px);
    border-radius: 20px;
    padding: 25px 30px 46px 52px;
    box-shadow: 0px 0px 20px 0px #1721300F;
}

.compatibility .android-os {
    font-size: 18px;
    font-weight: 600;
    line-height: 32px;
    margin-bottom: 4px;
}

.compatibility .android-os+p {
    color: #101829;
}

.compatibility .left-box h4 {
    margin-top: 29px;
    font-size: 18px;
    line-height: 32px;
}

.compatibility .device-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 14px;
}

.compatibility .device-list li {
    min-width: 46px;
    margin-right: 20px;
    margin-bottom: 10px;
}

.compatibility .device-list li img {
    width: 46px;
    height: 46px;
    object-fit: none;
    object-position: var(--position);
}

.compatibility .device-list li.snmsung_logo img {
    width: 113px;
}

.compatibility .device-list .etc {
    display: flex;
    flex-direction: column-reverse;
}

.compatibility .right-box p {
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 18px;
}

.compatibility .right-box p:last-child {
    margin-bottom: 0;
}

@media(max-width: 991px) {
    .compatibility .wrap {
        display: flex;
        flex-direction: column;
        box-shadow: 0px 0px 20px 0px #1721300F;
    }

    .compatibility .wrap .left-box,
    .compatibility .wrap .right-box {
        width: 100%;
        box-shadow: unset;
    }

    .compatibility .wrap .left-box {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .compatibility .wrap .right-box {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

@media(max-width: 768px) {
    .compatibility {
        padding: 60px 0;
    }

    .compatibility h2 {
        font-size: 28px;
        line-height: 42px;
    }

    .compatibility .plate-desc {
        font-size: 14px;
    }

    .compatibility .header-title {
        height: 44px;
        font-size: 20px;
        line-height: 44px;
        white-space: normal;
    }

    .compatibility .left-box h4,
    .compatibility .android-os {
        font-size: 16px;
        line-height: 24px;
    }

    .compatibility .left-box h4 {
        margin-top: 20px;
    }

    .compatibility .wrap {
        margin-top: 32px;
    }

    .compatibility .right-box {
        height: auto;
    }

    .compatibility .wrap .left-box,
    .compatibility .wrap .right-box {
        padding: 18px;
    }

    .compatibility .wrap .left-box {
        padding-bottom: 15px;
    }

    .compatibility .wrap p {
        font-size: 14px;
    }
}

/* #endregion compatibility end */

/* #region product-faq */
.product-faq {
    margin: 0;
    padding: 51px 0 76px;
    background: linear-gradient(144.75deg, #FFFFFF 26.73%, #EBFAFA 79.3%);
}

.product-faq .faq-left h2 {
    position: relative;
    font-size: 32px;
    line-height: 48px;
    padding-left: 56px;
}

.product-faq .faq-left h2::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    background: url(https://images.clevguard.com/jp/assets/overview/whatsapp_monitoring/faq-icon.svg) no-repeat;
    width: 50px;
    height: 50px;
}

.product-faq .faq-left h2::after {
    content: '';
    position: absolute;
    top: -18px;
    left: 0;
    width: 82px;
    height: 6px;
    background: linear-gradient(90.1deg, #6CE7FF 0%, #6ACDF8 148.6%);
    border-radius: 6px;
}

.product-faq .faq-list {
    margin-top: 25px;
}

.product-faq .faq-list li {
    padding: 20px 20px 15px 15px;
    border: 1px solid #F2F2F2;
    margin-bottom: 20px;
    border-radius: 8px;
}

.product-faq .faq-list li:first-child {
    border-top: 1px solid #F2F2F2;
}

.product-faq .faq-list li:last-child {
    margin-bottom: 0;
}

.product-faq .faq-icon {
    margin-top: 8px;
}

.product-faq .faq-question {
    color: #132625;
}

.product-faq .faq-answer {
    color: #243837;
}

.product-faq .faq-question.curr .faq-slide {
    transform: rotate(-180deg);
}

.product-faq .faq-question.curr .faq-icon {
    transform: rotate(90deg);
}

.product-faq .faq-slide {
    top: 12px;
}

.product-faq .base-btn {
    width: 275px;
    height: 64px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #00BDE3;
    transition: transform .2s ease;
}

.product-faq .base-btn:hover {
    background: linear-gradient(176.65deg, #60E4FF 2.61%, #07C8EF 97.09%);
    border: 1px solid transparent;
    transform: translateY(-3px);
}

.product-faq .faq-left .base-btn {
    margin-top: 68px;
}

.product-faq .faq-topic .faq-title {
    position: relative;
    font-size: 32px;
    line-height: 48px;
    padding-left: 56px;
}

.product-faq .faq-topic .faq-title::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    background: url(https://images.clevguard.com/jp/assets/overview/whatsapp_monitoring/hot-topic-icon.svg) no-repeat;
    width: 50px;
    height: 50px;
}

.product-faq .faq-topic .faq-title {
    margin-bottom: 25px;
}

.faq-topic ul {
    border: 1px solid #F2F2F2;
    background: #fff;
    padding: 20px 10px 26px 21px;
    border-radius: 8px;
}

.faq-topic ul li {
    padding-left: 12px;
    color: #2e2e2e;
}

.faq-topic ul li::before {
    background: #00BDE3;
}

.faq-topic .base-btn {
    margin-top: 40px;
}

@media (max-width: 768px) {

    .product-faq .faq-topic .faq-title,
    .product-faq .faq-left h2 {
        font-size: 28px;
        line-height: 1.5;
    }

    .product-faq .faq-left h2::before {
        top: -4px;
    }

    .product-faq .faq-left .base-btn {
        margin-top: 40px;
    }
}

/* #endregion product-faq */

.base-footer {
    border-top: 0;
}

/** bottom download  start **/
.bottom-download {
    display: none;
    height: 106px;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    color: #3D3D3D;
    background: #E4F2FF;
    z-index: 9999;
}

.bottom-download .left-content {
    display: flex;
}

.bottom-download .left-img img {
    width: 70px;
}

.bottom-download .left-img {
    margin-right: 10px;
}

.bottom-download .left-text h3 {
    color: #3D3D3D;
    font-size: 16px;
}

.bottom-download .left-text p {
    font-size: 13px;
}

.bottom-download .right-content .download {
    background: linear-gradient(180deg, #04E0E5 0%, #34CD7E 100%);
    color: #fff;
    height: 32px;
    width: 90px;
    text-align: center;
    border-radius: 4px;
    display: block;
    line-height: 32px;
}

.bottom-download .close-banner-download {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 10px;
    top: 10px;
    background: url(https://images.clevguard.com/jp/assets/overview/parental_control_app/close.svg) no-repeat;
    background-size: contain;
}

@media (max-width: 999px) {
    .bottom-download.hide-download {
        display: none;
    }

    .bottom-download.show-download {
        display: flex;
    }
}

@media (max-width: 400px) {
    .bottom-download .left-img img {
        width: 50px;
    }

    .bottom-download .left-text h3 {
        font-size: 14px;
    }

    .bottom-download .left-text p {
        font-size: 12px;
    }
}

/** bottom download  end **/

body .black {
    display: block;
}

.banner .btn-group .count-down {
    display: flex;
}

body .black_friday {
    display: block;
}

@media(max-width: 1024px) {
    body .base-header {
        margin-top: 0;
        position: relative;
    }
}