html body {
    color: #666666;
    font-size: var(--fs-18);
    line-height: var(--fs-30);
    font-weight: 300;
}

.marine_nav {
    padding-top: 5.5rem;
}

.core_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fs-24);
}

.core_item {
    position: relative;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    border-radius: .3rem;
    box-shadow: 0 0 var(--fs-16) rgb(10 32 90 / 5%);
}

.core_item a {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 3;
}

.core_real {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
    background: #000;
}

.core_real img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    object-fit: cover;
}

.core_item:hover .core_real {
    opacity: 1;
}

.core_real::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        rgba(0, 30, 45, .16);
    pointer-events: none;
}

.core_content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--fs-16);
}

.core_top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.core_name {
    color: #080808;
    font-size: 1.625rem;
    line-height: 100%;
    text-transform: uppercase;
    transition: color .4s ease;
    font-family: 'UAFSANS COND';
    min-height: 4.875rem;
}

.core_icon {
    flex: 0 0 auto;
    opacity: .5;
    width: 6rem;
    transition:
        opacity .4s ease,
        filter .4s ease;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.core_icon img {
    display: block;
    max-width: 6rem;
    object-fit: contain;
}

.core_num {
    color: #00ce8a;
    font-size: var(--fs-60);
    line-height: 100%;
    font-family: 'UAFSANS COND';
}

.core_num sup {
    font-size: 66%;
    line-height: 100%;
}

.core_num sub {
    vertical-align: inherit;
    font-size: 50%;
    line-height: 100%;
}

.core_desc {
    font-size: var(--fs-18);
    line-height: 111%;
    transition: color .4s ease;
    color: rgb(102 102 102 / 70%);
    font-weight: 300;
}

.core_double {
    display: flex;
    align-items: flex-end;
    gap: 3rem;
}

.core_data {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.core_data .core_desc {
    margin: 0 0 2px;
}

.core_item:hover .core_name {
    color: #fff;
}

.core_item:hover .core_desc {
    color: rgba(255, 255, 255, .85);
}

.core_item:hover .core_icon {
    opacity: 1;

    filter:
        brightness(0) invert(1);
}

@media screen and (max-width: 1024px) {

    .core_vf {
        min-height: auto;
        padding: 80px 0;
    }

    .core_inner {
        width: 90%;
    }

    .core_title {
        font-size: 42px;
    }

}


@media screen and (max-width: 640px) {

    .core_vf {
        padding: 60px 0;
    }

    .core_title {
        font-size: 2.67rem;
        text-align: center;
    }

    .core_subtitle {
        font-size: 1.25rem;
        text-align: center;
    }

    .core_head {
        margin-bottom: 40px;
    }

    .core_grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .core_item {
        height: auto;
    }

    .core_content {
        padding: 2rem;
        gap: 2rem;
        height: auto;
    }

    .core_name {
        font-size: 1.75rem;
        min-height: 0;
    }

    .core_num {
        font-size: 3.5rem;
    }

    .core_desc {
        font-size: var(--fs-16);
    }

}

.page2 {
    width: 100%;
    z-index: 1;
    position: relative;
    padding: 5.5rem 0 7rem;
}

.page2.page2-center {
    background-color: #f4f6f9;
    padding: 8rem 0;
}

.page2 .page2_left {
    color: var(--li);
    font-size: var(--fs-60);
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'UAFSANS COND';
    line-height: 100%;
    align-self: flex-start;
}

.page2 .page2_right {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.page2 .count {
    display: flex;
    align-items: flex-end;
    color: #000000;
    line-height: 133%;
    gap: 1.5rem;
}

.page2 .count .uaf {
    color: var(--li);
    display: flex;
    font-size: var(--fs-90);
    line-height: 80%;
    min-width: 9rem;
}

.page2 .count .uaf sub {
    font-size: 75%;
    vertical-align: top;
    line-height: 51%;
}

.marine-box {
    position: relative;
}

.marine-box img {
    width: 100%;
    object-fit: contain;
}

ul.marine1 li:nth-of-type(1) {
    left: 21%;
    top: 36%;
}

ul.marine1 li:nth-of-type(2) {
    left: 37%;
    top: 45%;
}

ul.marine1 li:nth-of-type(3) {
    left: 49%;
    top: 51%;
}

ul.marine1 li:nth-of-type(4) {
    left: 50%;
    top: 68%;
}

ul.marine1 li:nth-of-type(5) {
    left: 81%;
    top: 57%;
}


ul.marine2 li:nth-of-type(1) {
    left: 17%;
    top: 17%;
}

ul.marine2 li:nth-of-type(2) {
    left: 16%;
    top: 42%;
}

ul.marine2 li:nth-of-type(3) {
    left: 21%;
    top: 20%;
}

ul.marine2 li:nth-of-type(4) {
    left: 27%;
    top: 38%;
}

ul.marine2 li:nth-of-type(5) {
    left: 30%;
    top: 39%;
}

ul.marine2 li:nth-of-type(6) {
    left: 37%;
    top: 37%;
}

ul.marine2 li:nth-of-type(7) {
    left: 43%;
    top: 40%;
}

ul.marine2 li:nth-of-type(8) {
    left: 43%;
    top: 48%;
}

ul.marine2 li:nth-of-type(9) {
    left: 45%;
    top: 50%;
}

ul.marine2 li:nth-of-type(10) {
    left: 52%;
    top: 41%;
}

ul.marine2 li:nth-of-type(11) {
    left: 53%;
    top: 52%;
}

ul.marine2 li:nth-of-type(12) {
    left: 59%;
    top: 49%;
}

ul.marine2 li:nth-of-type(13) {
    left: 59.5%;
    top: 65%;
}

ul.marine2 li:nth-of-type(14) {
    left: 59.8%;
    top: 72%;
}

ul.marine2 li:nth-of-type(15) {
    left: 61.5%;
    top: 74%;
}

ul.marine2 li:nth-of-type(16) {
    left: 60.5%;
    top: 83%;
}

ul.marine2 li:nth-of-type(17) {
    left: 64.5%;
    top: 72%;
}

ul.marine2 li:nth-of-type(18) {
    left: 64%;
    top: 85%;
}

ul.marine2 li:nth-of-type(19) {
    left: 72%;
    top: 39%;
}

ul.marine3 li:nth-of-type(1) {
    left: 17%;
    top: 29%;
}

ul.marine3 li:nth-of-type(2) {
    left: 20.5%;
    top: 20%;
}

ul.marine3 li:nth-of-type(3) {
    left: 26%;
    top: 25%;
}

ul.marine3 li:nth-of-type(4) {
    left: 42.5%;
    top: 28%;
}

ul.marine3 li:nth-of-type(5) {
    left: 44%;
    top: 29%;
}

ul.marine3 li:nth-of-type(6) {
    left: 43.5%;
    top: 42%;
}

ul.marine3 li:nth-of-type(7) {
    left: 47%;
    top: 30%;
}

ul.marine3 li:nth-of-type(8) {
    left: 48.2%;
    top: 18%;
}

ul.marine3 li:nth-of-type(9) {
    left: 49.5%;
    top: 34%;
}

ul.marine3 li:nth-of-type(10) {
    left: 58%;
    top: 37%;
}

ul.marine3 li:nth-of-type(11) {
    left: 59.5%;
    top: 43%;
}

ul.marine3 li:nth-of-type(12) {
    left: 67%;
    top: 38%;
}

@media (max-width: 768px) {
    html body {
        line-height: 167%;
    }

    .page2 {
        padding: 5rem 0;
    }

    .page2 .page2_right {
        gap: 2rem;
        margin: 1rem 0 3rem;
    }

    ul.Hot_spot li .pso {
        width: 10rem;
        display: none;
    }

    ul.Hot_spot li.active .pso {
        display: block;
        opacity: 1;
        visibility: visible;
        transition: all .5s ease;
    }

    ul.Hot_spot li p {
        display: block !important;
    }

    .page2 .page2_left {
        font-size: 2.75rem;
    }
}