.center {
    display: flex;
    justify-content: center;
    align-items: center;
    /* display: grid; */
    /* place-items: center; */
}

.three-flex,
.two-flex {
    display: flex;
}

.three-flex>.child {
    vertical-align: top;
    justify-content: space-between;
    align-self: flex-start;
    flex: 0 1 31%;
}

.two-flex>.child {
    vertical-align: top;
    justify-content: space-between;
    align-self: flex-start;
    flex: 0 1 48%;
}

.three-flex>.child::before {
    display: none;
}

h1 {
    font-size: 36px;
    margin-bottom: 1rem;
}

@media only screen and (max-width: 1068px) {
    html.enhance-deep-dive .deep-dive-button-open-container {
        margin-top: 48px;
    }
}

html.enhance-deep-dive .deep-dive-button-open-container {
    margin-top: 90px;
}

@media only screen and (max-width: 1068px) {
    html.enhance-deep-dive .deep-dive-button-open-container {
        --button-open-image-size: 60px;
        --button-open-image-offset: 258px;
        --dd-btn-container-min-width: 692px;
    }
}

html.enhance-deep-dive .deep-dive-button-open-container {
    --button-open-image-size: 70px;
    --button-open-image-offset: 298px;
    --dd-btn-container-min-width: 980px;
    --dd-btn-width: 312px;
    display: flex;
    justify-content: flex-end;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    min-width: var(--dd-btn-container-min-width);
    max-width: calc(var(--dd-btn-container-min-width) + var(--button-open-image-offset));
    width: calc(100% - 80px);
}

html.enhance-deep-dive .deep-dive-button-close,
html.enhance-deep-dive .deep-dive-button-open-container,
html.enhance-deep-dive .deep-dive-content {
    transition: transform var(--deep-dive-transition-duration), opacity calc(var(--deep-dive-transition-duration)/2);
    transition-delay: 0s, calc(var(--deep-dive-transition-duration)/2);
}

html.enhance-deep-dive .deep-dive-button {
    --deep-dive-button-mask-progress: 0;
    position: relative;
    background: transparent;
    border: none;
    z-index: 1;
    display: flex;
    align-items: center;
    text-align: right;
}

:lang(zh-CN) {
    quotes: "“""”";
}

.deep-dive-button {
    box-shadow: none !important;
}

html.enhance-deep-dive .deep-dive-button-open-container .deep-dive-button-copy {
    display: inline-block;
    /* color: #dedede; */
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.37, 0, 0.29, 1);
    font-size: 1.3rem;
    margin-right: 1rem;
    line-height: 2rem;
}

html.enhance-deep-dive .deep-dive-container .deep-dive-button-copy {
    color: #0E0E0E;
}

html.enhance-deep-dive .deep-dive-button-open-container .deep-dive-button-open.show .deep-dive-button-copy {
    opacity: 1;
}

html[dir=ltr].enhance-deep-dive .deep-dive-button-open-container .deep-dive-button-copy {
    margin-right: 20px;
}

html.enhance-deep-dive .deep-dive-button-image {
    background: linear-gradient(180deg, #ffb6ff, #b344ff);
    background-color: #ffb6ff 0%;
    cursor: pointer;
    filter: hue-rotate(80deg) saturate(.9) contrast(.8);
}

html.enhance-deep-dive .deep-dive-button-image:hover {
    background: linear-gradient(0deg, #ffb6ff, #b344ff);
    background-color: #b344ff 100%;
}

html.enhance-deep-dive .deep-dive-button-image.gold {
    background: linear-gradient(180deg, #ffe993, #eb831c);
}

html.enhance-deep-dive .deep-dive-button-open-container .deep-dive-button-open.show .deep-dive-button-image {
    transform: translateX(0);
}

html.enhance-deep-dive .deep-dive-button-open-container .deep-dive-button-image {
    position: relative;
    z-index: 2;
    display: inline-block;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    transition: transform var(--deep-dive-btn-duration) var(--deep-dive-btn-ease);
}

html.enhance-deep-dive .deep-dive-container.dark .deep-dive-button-open-container .deep-dive-button-open .deep-dive-button-image-arrow {
    color: #000;
}

html.enhance-deep-dive .deep-dive-button-open-container .deep-dive-button-image-arrow {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    color: #000;
}

.wrap>.wrapper {
    margin-bottom: 1rem;
    margin: 0 auto;
}

input {
    border-radius: .7rem;
    outline: none;
    border: 2px solid #1e3050;
    box-shadow: inset 0 0.23em 1px 0 rgba(0, 0, 0, .1);
}

.wrap>.wrapper>input {
    border-radius: .8rem;
    height: 3.6rem;
    width: 360px;
    padding-left: 2.5rem;
    font-size: 18px;
    letter-spacing: .02rem;
}

.wrap button {
    border-radius: .8rem;
    height: 3.6rem;
    width: 100%;
    font-size: 18px;
    letter-spacing: .02rem;
}

[type="password"] {
    letter-spacing: .3rem;
}

input[disabled] {
    color: #b2302a;
}

.wrapper>svg {
    width: 20px;
    display: block;
    transform: translateY(2.6rem) translateX(1rem);
}

button {
    border-radius: .8rem;
    outline: none;
    border: 2px solid #1e3050;
}

a.blue_ul:before {
    transition: all ease-in-out .4s;
    background: #4285f4;
}

button.im {
    height: calc(3.6rem + 6px);
    background: #f8d65b;
    border-bottom: 6px solid #1e3050;
    cursor: pointer;
}

[disabled] {
    pointer-events: none;
    cursor: not-allowed;
}

button.im:hover:not([disabled]) {
    background: #efb33f
}

button.im:active:not([disabled]) {
    /* height: 3.6rem; */
    transform: translateY(5px);
    border-top: 2px solid #1e3050;
    border-bottom: 2px solid #1e3050;
    background: #1e3050;
    color: #f8d65b;
}

@media (prefers-color-scheme: dark) {
    html.enhance-deep-dive .deep-dive-button-open-container .deep-dive-button-copy {
        color: #dedede;
    }

    input,
    button {
        border: 2px solid #0e1020;
    }

    input {
        background: #333;
    }

    button.im {
        background: #efb33f;
        border-bottom: 6px solid #0e1020;
    }

    button.im:hover {
        background: #cf930f
    }

    button.im:active {
        /* height: 3.6rem; */
        background: #0e1020;
        transform: translateY(5px);
        border-top: 2px solid #0e1020;
        border-bottom: 2px solid #0e1020;
    }
}

.wrap>.back {
    height: 15px;
    width: 15px;
    position: absolute;
    transform: translateY(-20px) translateX(-20px);
    border: 2px solid rgba(127, 127, 127, .4);
    background: rgba(127, 127, 160, .2);
    border-radius: .8rem;
    cursor: pointer;
}