@media screen and (max-width: 1440px) and (min-width: 1080px) {
    
    /* 导航栏 */
    div#header {
        height: 60px;
    }

    div#header > div#content {
        width: 66%;
    }

    div#header > div#content > div#header-narrow {
        display: none;
    }

    div#header > div#content > div#header-wide {
        width: 100%;
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    div#content > div#header-wide > div#header-title {
        line-height: 60px;
        color: var(--system-black-1st);
    }

    div#content > div#header-wide > div#header-section {
        display: flex;
        justify-content: space-between;
        color: var(--system-gray-1st);
        line-height: 60px;
        transition: color .3s;
        position: relative;
    }

    div#header-wide > div#header-section a:hover {
        color: var(--system-black-1st);
        transition: color .3s;
    }

    div#header-wide > div#header-section div {
        margin-right: 16px;
    }

    div#header-wide > div#header-section > div#mode {
        width: 48px;
        height: 24px;
        background-color: var(--system-white-1st);
        border-radius: 12px;
        margin: auto 0;
        position: relative;
    }

    div#header-section > div#mode > div#mode-lever {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: var(--system-white-2nd);
        position: absolute;
        margin: 0;
        transition: all .3s;
    }

    body[theme='light'] div#mode-lever {
        top: 2px;
        left: 2px;
        transition: all .3s;
    }

    body[theme='dark'] div#mode-lever {
        top: 2px;
        left: 26px;
        transition: all .3s;
    }


    /* opening */
    div#opening > div#first-sight > svg {
        width: 720px;
    }

    div#opening > div#introduce > div#description {
        width: 416px;
    }

    div#opening > div#talk > #next > #narrative span,
    div#opening > div#talk > span {
        width: 720px;
    }

    div#opening > div#talk > div#div-start > div {
        width: 416px;
    }

    div#opening > div#talk > div#div-start div span::before {
        /* display: block; */
        content: '占位字符占位字符';
        opacity: 0;
    }

    div#opening > div#talk > div#div-start div span {
        transform: translateY(-50%);
    }

    div#academy-content > div {
        position: relative;
        width: calc(100vw - 32px * 2);
        height: calc((100vw - 32px * 3) / 2);
        margin: 0 auto;
        margin-bottom: 32px;
        border-radius: 32px;
        transition: all 1s;
    }
    
    #first-row {
        width: 100vw;
        position: relative;
        transform: translateY(64px);
        opacity: 0;
        transition: all 1s;
    }
    
    div#first-year,
    div#second-year {
        width: calc((100% - 32px) / 2);
        height: 100%;
        border-radius: 32px;
        position: absolute;
        overflow: hidden;
        background-color: #000;
    }
    
    div#first-year {
        left: 0;
    }
    
    div#second-year {
        right: 0;
    }
    
    div#first-year > #first-title,
    div#second-year  > #second-title {
        position: absolute;
        width: 100%;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        transition: all .7s;
    }
    
    div#first-year:hover > #first-title,
    div#second-year:hover  > #second-title {
        position: absolute;
        width: 100%;
        text-align: center;
        top: 50%;
        transform: translateY(calc(-50% - 24px));
        color: #fff;
        transition: all .7s;
    }
    
    div#first-year > img,
    div#second-year > img {
        width: 100%;
        opacity: 1;
        transition: all .7s;
    }
    
    div#first-year:hover > img,
    div#second-year:hover > img {
        transition: all .7s;
        opacity: .5;
    }
    
    div#first-year > #first-text,
    div#second-year  > #second-text {
        position: absolute;
        max-width: 100%;
        text-align: center;
        padding-left: 32px;
        padding-right: 32px;
        top: calc(50% + 16px);
        transform: translateY(16px);
        color: #fff;
        opacity: 0;
        transition: all .7s ease-out;
    }
    
    div#first-year:hover > #first-text,
    div#second-year:hover  > #second-text {
        position: absolute;
        max-width: 100%;
        text-align: center;
        top: 50%;
        transform: translateY(16px);
        color: #fff;
        opacity: 1;
        transition: all .7s ease-in;
        padding-left: 32px;
        padding-right: 32px;
    }
    
    div#first-year > #first-more,
    div#second-year  > #second-more {
        position: absolute;
        width: 100%;
        text-align: center;
        top: 75%;
        transform: translateY(-50%);
        color: #fff;
        opacity: 1;
        transition: all .7s;
    }
    
    div#first-year > #first-desc,
    div#second-year  > #second-desc {
        position: absolute;
        width: 100%;
        text-align: center;
        bottom: 0;
        transform: translateY(-32px);
        color: #fff;
    }
    
    div#first-year > #first-more span,
    div#second-year  > #second-more span {
        text-decoration: underline;
    }
    
    div#second-row {
        width: 100vw;
        position: relative;
        opacity: 0;
        transform: translateY(64px);
        transition: all 1s;
    }
    
    div#second-row > div#second-content {
        background-color: var(--system-white-1st);
        width: calc(100vw - 32px * 2);
        max-width: calc(1440px - 32px * 2);
        margin: 0 auto;
        position: relative;
        height: calc((100vw - 32px * 3) / 2);
        max-height: calc((1440px - 32px * 3) / 2);
        border-radius: 32px;
    }

}