/* common style */

body {
    position: relative;
    background-color: var(--system-white-2nd);
    transition: .5s;
}

span.title-st {
    font-family: "SF Pro SC","SF Pro Display","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
    font-size: 72px;
    line-height: 1;
    font-weight: 600;
}

span.title-nd {
    font-family: "SF Pro SC","SF Pro Display","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
    font-size: 56px;
    line-height: 1.07;
    font-weight: 600;
}

span.title-rd {
    font-family: "SF Pro SC","SF Pro Display","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
    font-size: 32px;
    line-height: 1.22;
    font-weight: 600;
}

span.reading-title {
    font-family: "SF Pro SC","SF Pro Display","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
    font-size: 21px;
    line-height: 1.33;
    font-weight: 600;
}

span.reading-text {
    font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
    font-size: 18px;
    line-height: 1.33;
    font-weight: 400;
}

span.tiny-text {
    font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
    font-size: 14px;
    line-height: 1.33;
    font-weight: 300;
}


/* 导航栏 */
div#header {
    width: 100vw;
    z-index: 999999;
    backdrop-filter: saturate(180%) blur(32px);
    -webkit-backdrop-filter: saturate(180%) blur(32px);
    background-color: var(--system-nav);
    position: fixed;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all .5s;
    overflow: hidden;
}

div#header > div#content {
    height: 100%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    position: relative;
    margin: 0 auto;
    transition: all .5s;
}


/* 开场 */
div#opening {
    width: 100vw;
    position: relative;
}

/* 初见 */
div#opening > div#first-sight {
    position: relative;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
}

div#opening > div#first-sight > svg {
    position: fixed;
    /* transition: all .5s; */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 1;
    min-width: 200px;
}

div#opening > div#first-sight > svg path,
div#opening > div#first-sight > svg polyline {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: drawPath 3s ease-in forwards;
}

/* 相识 */
div#opening {
    z-index: 9999;
}

div#opening > div#introduce {
    width: 100vw;
    position: relative;
    z-index: 9999;
}

div#opening > div#introduce > div#description {
    margin: 0 auto;
    color: var(--system-black-1st);
}

div#opening > div#introduce > div#description > span.common-desc {
    opacity: .3;
    transition: opacity .3s;
}

div#opening > div#introduce > div#description > span.hightlight-desc {
    opacity: 1;
    transition: opacity .3s;
}

/* 叙旧 */
div#opening > div#talk {
    width: 100vw;
    height: 250vh;
    position: relative;
    transition: background-color .5s;
}

div#opening > div#talk > #next {
    width: 100vw;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
}

div#opening > div#talk > div#div-start {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 99998;
}

div#opening > div#talk > div#div-start > div {
    display: block;
    position: sticky;
    height: 144px;
    margin: 0 auto;
    top: 50%;
    transition: opacity 0s;
}

div#opening > div#talk > div#div-start div span {
    display: block;
    margin: 0 auto;
    color: var(--system-black-1st);
}

div#opening > div#talk > #next > img {
    height: 110%;
    width: 110%;
    object-fit: cover;
    position: relative;
    /* left: 50%; */
    transform: translate(-5%, -5%);
    z-index: 999;
    opacity: 0;
    transition: all .5s;
    filter: blur(0px);
}

div#opening > div#talk > #next #letsgo {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    border: 1px var(--system-white-2nd);
    transform: translate(-50%, -50%);
    display: block;
    width: 416px;
    z-index: 99999;
    box-shadow: 0px 0px 0px 100vw var(--system-white-2nd),0px 0px 30px var(--system-white-2nd) inset;
    transition: box-shadow .5s;
}

div#opening > div#talk > div#next span {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 144px);
    z-index: 99999;
    text-align: center;
    opacity: .3;
    color: var(--system-black-1st);
    transition: all .3s;
}

div#opening > div#talk > #next #letsgo svg {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
}

div#opening > div#talk > #next #letsgo #text-bg {
    opacity: 1;
}

div#opening > div#talk > #next #letsgo #text-clip {
    transition: fill .5s;
}

div#opening > div#talk > #next #lets-go path{
    fill: var(--system-white-2nd);
}

div#opening > div#talk > #next > #narrative {
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    position: absolute;
    color: #fff;
}

div#opening > div#talk > #next > #narrative span {
    transition: all .5s;
    text-align: center;
    display: block;
    margin: 0 auto;
    opacity: 0;
    color: #fff;
}

div#opening > div#talk > #next > #narrative span.title-rd {
    display: block;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 144px));
}

div#opening > div#talk > #next > #narrative span.title-rd.down {
    display: block;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 144px));
}

div#opening > div#talk > #next > #narrative span.show {
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div#opening > div#talk > #next > #narrative span.show-up {
    opacity: .3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 144px));
}

div#opening > div#talk > #next > #narrative span.show-down {
    opacity: .3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 144px));
}

div#opening > div#talk > #next > #narrative span.show-up-none {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 144px - 144px));
}

div#opening > div#talk > #next > #narrative span.show-down-none {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 144px + 144px));
}


/* 专科 */
div#academy {
    width: 100vw;
    height: 100vh;
    position: relative;
}

#academy-start {
    position: relative;
    margin: 72px 0;
}

div#academy-start > div#start-one,
div#academy-start > div#start-two {
    position: relative;
    width: 100vw;
}

div#academy-start > div#start-one span,
div#academy-start > div#start-two span {
    text-align: center;
    margin: 0 auto;
    display: block;
    color: var(--system-black-1st);
}

div#academy-start > div#start-one span {
    position: relative;
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s;
}

div#academy-start > div#start-two span {
    position: relative;
    transform: translateY(120%);
    opacity: 0;
    transition: all 1s;
    margin-top: 72px;
}

div#academy-content {
    width: 100vw;
    position: relative;
    opacity: 1;
    transition: all 1s;
    overflow: hidden;
}