.innovate-page {
    padding-bottom: calc(var(--ratio-size) * 50);
}

.main-content {
    position: relative;
    margin-top: calc(var(--ratio-size) * 100);
}

.main-content .hover-area {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: max(300px, calc(var(--ratio-size) * 600));
    /* margin: 0 auto; */
}

.main-content .hover-area.animate {
    animation: breath 3s infinite;
}

.main-content .hover-area svg {
    width: 100%;
}

.main-content .hover-area .circle-area {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 50%;
}

.main-content .content-item {
    background-color: #fff;
    box-shadow: 0 4px 16px #0043B710;
    border-radius: calc(var(--ratio-size) * 30);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all .5s;
}

.main-content .content-item .top {
    padding: calc(var(--ratio-size) * 15);
    background-image: linear-gradient(to right, #0FA6E6, #58CFF7);
    font-size: calc(var(--ratio-size) * 32);
    color: #fff;
    text-align: center;
}

.main-content .content-item .other-content {
    display: flex;
    gap: calc(var(--ratio-size) * 100);
    padding: calc(var(--ratio-size) * 20);
}

.main-content .content-item .other-content .left,
.main-content .content-item .other-content .right {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--ratio-size) * 10);
    flex: 1;
}

.main-content .content-item .other-content .item {
    width: 100%;
    padding: calc(var(--ratio-size) * 25) calc(var(--ratio-size) * 30);
    padding-right: calc(var(--ratio-size) * 20);
    background-color: #F7F7F7;
    border-radius: 20px;
}

.main-content .content-item .other-content .item .name {
    font-size: calc(var(--ratio-size) * 24);
    color: #000;
}

.main-content .content-item .other-content .item .text {
    margin-top: calc(var(--ratio-size) * 7);
    font-size: calc(var(--ratio-size) * 18);
    line-height: 1.7;
    color: #666;
}

.main-content .content-item.top-content-item {
    width: calc(var(--ratio-size) * 1353);
    margin: auto;
}

.main-content .content-item.top-content-item .left .item:nth-child(1),
.main-content .content-item.top-content-item .left .item:nth-child(2),
.main-content .content-item.top-content-item .right .item:nth-child(1),
.main-content .content-item.top-content-item .right .item:nth-child(2) {
    width: calc(50% - calc(var(--ratio-size) * 5));
}

.main-content .bottom-content-area {
    display: flex;
    justify-content: space-between;
    width: calc(100% - var(--ratio-size) * 120);
    margin: 0 auto;
    margin-top: calc(var(--ratio-size) * 100);
}

.main-content .bottom-content-area .left-content-item,
.main-content .bottom-content-area .right-content-item {
    width: calc(var(--ratio-size) * 645);
}

.main-content .bottom-content-area .left-content-item .top {
    background-image: linear-gradient(to right, #0D57C8, #0FA6E6);
}

.main-content .bottom-content-area .right-content-item .top {
    background-image: linear-gradient(to right, #4BC12A, #91EF75);
}

.main-content .bottom-content-area .other-content {
    flex-wrap: wrap;
    gap: calc(var(--ratio-size) * 10);
}

.main-content .bottom-content-area .other-content .item:nth-child(1),
.main-content .bottom-content-area .other-content .item:nth-child(2) {
    width: calc(50% - var(--ratio-size) * 5);
}

.main-content .hover-area .hover-triangle {
    cursor: pointer;
    transition: all .5s;
}

.main-content .hover-area .hover-triangle .text {
    transition: all .5s;
}

.main-content .hover-area .hover-triangle.active .text {
    fill: #fff;
    fill-opacity: 1;
}

.main-content .hover-area .hover-triangle .hover-show {
    opacity: 0;
}

.main-content .hover-area .hover-triangle.active .hover-show {
    opacity: 1;
}

.main-content .content-item.active {
    opacity: 1;
    visibility: visible;
}

@keyframes breath {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}