#airplane {
    width: 100%;
    background: #00000000;
    padding: 0 20px;
    max-width: 1300px;
}

#airplaneM {
    display: none;
    width: 100%;
    background: #00000000;
    padding: 0;
    max-width: 1300px;
}

@media only screen and (max-width:768px) {
    #airplane {
        display: none;
    }

    #airplaneM {
        display: flex;
    }
}

.dataWrap {
    --r: 25px;
    --g: 10px;
    --n: calc(var(--r) + var(--g));
    width: 100%;
    max-width: 1300px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-items: stretch;
    /* grid-gap: 30px 50px; */
    grid-gap: 0px;
}

@media only screen and (max-width:768px) {
    .dataWrap {
        grid-template-columns: 1fr;
    }
}

.dataWrap:nth-child(2n) {
    justify-items: end;
}

.dataWrap .dataDetail {
    --r: 25px;
    --g: 0px;
    --n: calc(var(--r) + var(--g));
    width: 100%;
    height: auto;
    min-height: 260px;
    margin-top: calc(-1.5 * var(--r));
    padding: calc(30px + var(--n)) calc(40px + var(--r));
    background-color: #e20013;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    opacity: 0;
    transform: translateY(-30px);
    transition: 0.25s ease-in-out;
}

@media only screen and (max-width:768px) {
    .dataWrap .dataDetail {
        --r: 20px;
        min-height: 210px;
        padding: calc(30px + var(--n)) calc(10px + var(--r)) 20px;
    }
}

.dataWrap .dataDetail:first-child {
    mask-image:
        /* right protrusion */
        radial-gradient(circle var(--r) at calc(100% - var(--r)) 50%, white calc(100% - 0.5px), transparent 100%),
        /* top notch */
        radial-gradient(circle var(--r) at 50% var(--r), transparent calc(100% - 0.5px), white 100%),
        /* chop top & bottom */
        linear-gradient(to bottom, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0),
        /* chop left & right */
        linear-gradient(to right, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0);
    mask-composite: add, intersect, intersect;
    mask-repeat: no-repeat;
}

.dataWrap .dataDetail:nth-child(2) {
    mask-image:
        /* left protrusion */
        radial-gradient(circle var(--r) at calc(100% - var(--r)) 50%, white calc(100% - 0.5px), transparent 100%),
        /* right protrusion */
        radial-gradient(circle var(--r) at var(--r) 50%, white calc(100% - 0.5px), transparent 100%),
        /* chop top & bottom */
        linear-gradient(to bottom, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0),
        /* chop left & right */
        linear-gradient(to right, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0);
    mask-composite: add, add, intersect;
    mask-repeat: no-repeat;
}

.dataWrap .dataDetail:nth-child(3) {
    mask-image:
        /* left notch */
        radial-gradient(circle var(--r) at calc(var(--r)) 50%, transparent calc(100% - 0.5px), white 100%),
        /* right notch */
        radial-gradient(circle var(--r) at calc(100% - var(--r)) 50%, transparent calc(100% - 0.5px), white 100%),
        /* chop top & bottom */
        linear-gradient(to bottom, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0),
        /* chop left & right */
        linear-gradient(to right, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0);
    mask-composite: intersect, intersect, intersect;
    mask-repeat: no-repeat;
}

.dataWrap .dataDetail:nth-child(4) {
    mask-image:
        /* bottom protrusion */
        radial-gradient(circle var(--r) at 50% calc(100% - var(--r)), white calc(100% - 0.5px), transparent 100%),
        /* left notch */
        radial-gradient(circle var(--r) at var(--r) 50%, transparent calc(100% - 0.5px), white 100%),
        /* chop top & bottom */
        linear-gradient(to bottom, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0),
        /* chop left & right */
        linear-gradient(to right, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0);
    mask-composite: add, intersect, intersect;
    mask-repeat: no-repeat;
}


@media screen and (min-width:768px) {
    .dataWrap {
        grid-gap: var(--g);
    }

    .dataWrap .dataDetail {
        --g: 10px;
        width: calc(100% + var(--r));
        /* height: calc(100% + var(--r)); */
        height: 320px;
        max-height: 320px;
        min-height: 320px;
        margin: 0;
        padding: calc(30px + var(--n)) calc(40px + var(--r));
    }

    .dataWrap .dataDetail:first-child {
        margin: 0 calc(-1 * var(--r)) 0 calc(-1 * var(--r));
        mask-image:
            /* right protrusion */
            radial-gradient(circle var(--r) at calc(100% - var(--r)) 50%, white calc(100% - 0.5px), transparent 100%),
            /* top notch */
            radial-gradient(circle calc(var(--r) + var(--l)) at 50% calc(var(--r) - var(--l)), transparent calc(100% - 0.5px), white 100%),
            /* chop top & bottom */
            linear-gradient(to bottom, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0),
            /* chop left & right */
            linear-gradient(to right, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0);
        mask-composite: add, intersect, intersect;
        mask-repeat: no-repeat;
    }

    .dataWrap .dataDetail:nth-child(2) {
        mask-image:
            /* top protrusion */
            radial-gradient(circle var(--r) at 50% var(--r), white calc(100% - 0.5px), transparent 100%),
            /* left notch */
            radial-gradient(circle calc(var(--r) + var(--g)) at calc(var(--r) - var(--l)) 50%, transparent calc(100% - 0.5px), white 100%),
            /* right notch */
            radial-gradient(circle calc(var(--r) + var(--g)) at calc(100% - var(--r) + var(--l)) 50%, transparent calc(100% - 0.5px), white 100%),
            /* chop top & bottom */
            linear-gradient(to bottom, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0),
            /* chop left & right */
            linear-gradient(to right, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0);
        mask-composite: add, intersect, intersect, intersect;
        mask-repeat: no-repeat;
    }

    .dataWrap .dataDetail:nth-child(3) {
        margin: calc(-2 * var(--r)) calc(-1 * var(--r)) 0 0;
        mask-image:
            /* left protrusion */
            radial-gradient(circle var(--r) at calc(100% - var(--r)) 50%, white calc(100% - 0.5px), transparent 100%),
            /* right protrusion */
            radial-gradient(circle var(--r) at var(--r) 50%, white calc(100% - 0.5px), transparent 100%),
            /* bottom notch */
            radial-gradient(circle calc(var(--r) + var(--g)) at 50% calc(100% - var(--r) + var(--l)), transparent calc(100% - 0.5px), white 100%),
            /* chop top & bottom */
            linear-gradient(to bottom, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0),
            /* chop left & right */
            linear-gradient(to right, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0);
        mask-composite: add, add, intersect, intersect;
        mask-repeat: no-repeat;
    }

    .dataWrap .dataDetail:nth-child(4) {
        margin-top: calc(-2 * var(--r));
        mask-image:
            /* bottom protrusion */
            radial-gradient(circle var(--r) at 50% calc(100% - var(--r)), white calc(100% - 0.5px), transparent 100%),
            /* left notch */
            radial-gradient(circle calc(var(--r) + var(--g)) at calc(var(--r) - var(--l)) 50%, transparent calc(100% - 0.5px), white 100%),
            /* chop top & bottom */
            linear-gradient(to bottom, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0),
            /* chop left & right */
            linear-gradient(to right, transparent var(--r), white var(--r), white calc(100% - var(--r)), transparent 0);
        mask-composite: add, intersect, intersect;
        mask-repeat: no-repeat;
    }
}

.dataWrap.safari .dataDetail {
    height: auto;
}

.dataWrap .dataDetail p {
    width: 100%;
    padding-bottom: 20px;
    display: inline;
    color: #fff;
}

@media only screen and (max-width:768px) {
    .dataWrap .dataDetail p {
        line-height: 1;
    }
}

.dataWrap .dataDetail .dataNum {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.dataWrap .dataDetail .dataNum h1 {
    font-size: 40px;
    color: #fff;
}

.dataWrap .dataDetail .dataNum p,
.note p {
    font-weight: 100;
    font-family: Gill-Sans, Monsterrat, Noto Sans, sans-serif;
    line-height: 1.3em;
    letter-spacing: 0.7px;
    font-size: 16px;
    margin: 0%;
    text-decoration: none;
}

/* .note {
    grid-column: span 2;
    width: 100%;
    max-width: 1500px;
    padding: 0 0 70px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    opacity: 0;
    transform: translateY(-30px);
    transition: 0.25s ease-in-out;
} */
.note {
    grid-column: span 2;
    width: 100%;
    max-width: 1500px;
    padding: 80px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
    opacity: 0;
    transform: translateY(-30px);
    transition: 0.25s ease-in-out;
}

.note p,
.note ol {
    font-size: 12px;
    font-weight: 300;
    list-style-type: none;
    counter-reset: custom-counter;
    gap: 5px;
}

.note ol li {
    font-size: 12px;
    counter-increment: custom-counter;
    position: relative;
    padding-left: 1.5em;
}

.note ol li::before {
    content: '';
    position: absolute;
    left: 0;
    color: #2d2d2d;
}

.note ol li:nth-child(2)::before {
    content: '*';
}

.note ol li:nth-child(3)::before {
    content: '#';
}

.note ol li:nth-child(4)::before {
    content: '^';
}

.note ol li:nth-child(5)::before {
    content: '@';
}

/* .note ol li::before {
    font-size: 0.7em;
    vertical-align: super;
} */

@media only screen and (max-width:768px) {
    .note {
        /* margin-top: 70px; */
        grid-column: 1;
    }
}

.note p {
    font-size: 14px;
}