/*! locomotive-scroll v3.6.1 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */

html.has-scroll-smooth {
    overflow: hidden
}

html.has-scroll-dragging {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.has-scroll-smooth body {
    overflow: hidden
}

.has-scroll-smooth [data-scroll-container] {
    min-height: 100vh
}

.c-scrollbar {
    position: absolute;
    right: 0;
    top: 0;
    width: 11px;
    height: 100%;
    transform-origin: center right;
    transition: transform .3s, opacity .3s;
    opacity: 0
}

.c-scrollbar:hover {
    transform: scaleX(1.45)
}

.c-scrollbar:hover,
.has-scroll-dragging .c-scrollbar,
.has-scroll-scrolling .c-scrollbar {
    opacity: 1
}

.c-scrollbar_thumb {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #000;
    opacity: .5;
    width: 7px;
    border-radius: 10px;
    margin: 2px;
    cursor: -webkit-grab;
    cursor: grab
}

.has-scroll-dragging .c-scrollbar_thumb {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.mobile .history-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.mobile .history-page.history-start {
    position: relative;
    overflow: visible;
    height: auto
}

.history-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    transform: translate3d(0, 0, 2px)
}

.history-loading .history-loading-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background: #fff
}

.history-loading .desc {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center
}

.history-loading .desc .year {
    font-size: 144px;
    font-weight: 300;
    margin: 20px;
    display: block;
    overflow: hidden;
    height: 1em;
    display: flex;
    justify-content: center
}

.history-loading .desc .year span {
    display: inline-block;
    line-height: 1;
}

.history-loading .desc .title {
    font-size: 32px
}

.history-loading .desc .title,
.history-loading .desc .year {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.2s, transform 1.2s cubic-bezier(.23, 1, .32, 1);
    will-change: opacity, transform
}

.history-loading.inited .desc .title,
.history-loading.inited .desc .year {
    opacity: 1;
    transform: translateY(0)
}

.history-loading.inited .desc .title {
    transition-delay: .2s
}

.mobile .history-loading .history-loading-inner {
    height: calc(var(--vh, 100vh))
}

@media screen and (max-width:1200px) {
    .history-loading .desc .year {
        font-size: 140px;
        margin: 20px
    }
    .history-loading .desc .title {
        font-size: 30px
    }
}

@media screen and (max-width:1023px) {
    .history-loading .desc .year {
        font-size: 114px;
        margin: 15px
    }
    .history-loading .desc .title {
        font-size: 24px
    }
}

body.history-page #main {
    overflow: hidden
}

#historyContent {
    overflow: hidden;
    width: 100vw;
    height: 3000vh;
    box-sizing: border-box
}

.history-section-group {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: 2;
    overflow: hidden
}

.history-section-group.section-tail {
    height: 100vh;
    z-index: 1
}

.history-section-group.bg-dark {
    background-color: #1d1a1a
}

.history-section-group.bg-bright {
    background-color: #eeede9
}

.history-section-group.bg-white {
    background-color: #fff
}

.history-section-group .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.history-section-group .bg .back {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

.history-section-group .bg .back img.img {
    display: block;
    width: 100vw;
    min-width: 2760px
}

.history-section {
    position: absolute;
    width: 100vw;
    top: 0;
    left: 0;
    right: 0
}

.history-section.full-height {
    min-height: 100vh
}

.history-section .history-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100vw;
    z-index: 6
}

.history-section .history-title h2 {
    font-size: 64px;
    
    color: #fff;
    text-align: center
}

.history-section .history-title h2 .sentence {
    overflow: hidden;
    display: block
}

.history-section .history-title h2 .sentence span {
    display: block;
    line-height: 1.5
}

.history-section .history-title.active h2 .sentence span {
    transform: translateY(0)
}

.history-section .history-desc {
    position: absolute;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 6
}

.history-section .history-desc p {
    font-size: 32px;
    
    color: #fff;
    text-align: center
}

.history-section .history-desc p .sentence {
    overflow: hidden;
    display: block
}

.history-section .history-desc p .sentence span {
    display: block;
    transform: translateY(100%);
    line-height: 1.75em;
    white-space: nowrap
}

.history-section .history-desc.history-desc-lg p {
    font-size: 40px
}

.history-section .history-desc.history-desc-lg p .sentence span {
    line-height: 1.5em
}

.history-section .history-desc.active p .sentence span {
    transform: translateY(0)
}

.history-section-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.history-section-content {
    height: 100vh;
    padding: 20vh 0;
    box-sizing: border-box;
    position: relative;
    width: 100vw
}

.history-chapter-cover {
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 28px;
    margin-bottom: 190px
}

.history-chapter-cover .chapter {
    font-size: 18px;
    opacity: .5;
    margin-bottom: 1em;
    letter-spacing: 0
}

.history-chapter-cover .chapter .sentence {
    display: block;
    overflow: hidden
}

.history-chapter-cover .chapter .sentence>span {
    display: block;
    line-height: normal;
    white-space: nowrap
}
.history-chapter-cover .chapter-title {
    font-size: 40px;
    
    margin-bottom: 1em;
    letter-spacing: -.04em
}

.history-chapter-cover .chapter-title .sentence {
    display: block;
    overflow: hidden
}

.history-chapter-cover .chapter-title .sentence>span {
    display: block;
    white-space: nowrap;
    line-height: 1.5em
}

.history-chapter-cover .chapter-description p {
    font-size: 18px;
    line-height: 1.888888888888889
}

.history-chapter-cover[data-theme=light] {
    color: #fff
}

.milestone {
    font-size: 640px;
    height: 540px;
    overflow: hidden;
    letter-spacing: -.05em;
    font-weight: 300;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.milestone .count {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    overflow: hidden;
    opacity: .15
}

.milestone .count span {
    display: block;
    transform: translateY(100%)
}

.milestone[data-theme=light] {
    color: #fff
}

#historyBgTop {
    background: #93a4b2;
    height: 100vh
}

#historyBgTop .cloud {
    top: -5vh
}

#historyBgTop .back1 {
    top: calc(50vh - 10%);
    transform-origin: 40% 50%
}

#historyBgTop .back2 {
    top: calc(50vh - 12%);
    transform-origin: 60% 50%
}

#historyBgTop .back3 {
    top: calc(50vh - 24%)
}

#historyDesc1 .bg .back {
    top: calc(60vh + 50%)
}

#historyChapter1 .history-timeline {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 6.25vw;
    width: 100vw;
    box-sizing: border-box
}

#historyChapter2 .ginseng {
    position: absolute;
    top: 0;
    height: 100vh;
    left: 0;
    right: 0
}

#historyChapter2 .ginseng .img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

#historyChapter2 .ginseng .frames {
    position: relative
}

#historyChapter2 .ginseng .frames img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100vh;
    opacity: 0;
    visibility: hidden
}

#historyChapter2 .ginseng .frames img:first-child {
    position: relative
}

#historyChapter2 .ginseng .frames img.active {
    opacity: 1;
    visibility: visible
}

#historyChapter2 .ginseng .features .feature-item {
    position: absolute;
    top: 50%;
    left: 50%
}

#historyChapter2 .ginseng .features .feature-item .dot {
    width: 7px;
    height: 7px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    border-radius: 50%;
    display: block
}

#historyChapter2 .ginseng .features .feature-item .line {
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    width: 250px
}

#historyChapter2 .ginseng .features .feature-item .line span {
    position: absolute;
    display: block;
    border-top: 1px dashed rgba(0, 0, 0, .7);
    display: block;
    left: 0;
    width: 100%;
    transform-origin: 0 0
}

#historyChapter2 .ginseng .features .feature-item p {
    font-size: 16px;
    line-height: 1.75em;
    color: #000;
    position: absolute;
    top: -14px;
    right: calc(100% + 20px);
    white-space: nowrap;
    text-align: right
}

#historyChapter2 .ginseng .features .feature-item.right .line {
    left: auto;
    right: 0
}

#historyChapter2 .ginseng .features .feature-item.right .line span {
    transform-origin: 100% 0
}

#historyChapter2 .ginseng .features .feature-item.right p {
    right: auto;
    left: calc(100% + 20px);
    text-align: left
}

#historyChapter2 .ginseng .features .feature-item1 {
    margin-left: -270px;
    top: 56%
}

#historyChapter2 .ginseng .features .feature-item2 {
    margin-left: 270px;
    top: 50%
}

#historyChapter2 .ginseng .features .feature-item3 {
    margin-left: 270px;
    top: 66%
}

#historyChapter2 .ground {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100vh;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, #1d1a1a 51%, #1d1a1a)
}

#historyChapter2 .ground img {
    width: 100vw;
    display: block
}

#historyChapter3 .history-chapter-cover {
    margin: 0;
    max-width: 680px;
    width: 100vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

#historyChapter3 .line-top {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform: translate(-50%, -100%);
    margin-top: -220px;
    height: 435px;
    width: 144px
}

#historyChapter3 .line-top .img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    height: 100%
}

#historyChapter3 .line-top .img img {
    display: block;
    height: 435px;
    position: absolute;
    top: 0;
    left: 0
}

#historyChapter3 .history-inter-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh
}

#historyChapter3 .history-inter-bg .back,
#historyChapter3 .history-inter-bg .img {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%
}

#historyChapter3 .history-inter-bg .img {
    top: 0;
    overflow: hidden
}

#historyChapter3 .history-inter-bg .img .back {
    bottom: 0;
    background: 50% 50% no-repeat;
    background-size: cover
}

#historyChapter3 .history-inter-bg .img .back:after {
    background: rgba(0, 0, 0, .3);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: ''
}

#historyChapter3 .history-inter-bg .img1 .back {
    background-image: url(/img/120/inter-bg1.jpg)
}

#historyChapter3 .history-inter-bg .img2 .back {
    background-image: url(/img/120/inter-bg2.jpg)
}

#historyChapter3 .history-inter-bg .img3 .back {
    background-image: url(/img/120/inter-bg3.jpg)
}

#historyChapter4 .history-chapter-cover {
    margin: 0;
    max-width: 680px;
    width: 100vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

#historyChapter4 .history-global-stat {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 80px;
    font-size: 0;
    text-align: center;
    white-space: nowrap
}

#historyChapter4 .history-global-stat dl {
    display: inline-block;
    text-align: center;
    position: relative;
    padding-bottom: 35px;
    vertical-align: top;
    margin: 0 50px
}

#historyChapter4 .history-global-stat dl dd,
#historyChapter4 .history-global-stat dl dt {
    text-align: center;
    color: #fff
}

#historyChapter4 .history-global-stat dl dt {
    font-size: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    white-space: nowrap
}

#historyChapter4 .history-global-stat dl dd {
    font-size: 112px;
    letter-spacing: -.05em;
    font-weight: 300
}

#historyChapter4 .history-global-stat dl dd .count {
    display: block;
    overflow: hidden
}

#historyChapter4 .history-global-stat dl dd .count span {
    display: inline-block;
    line-height: 1;
    padding: 0 .2em
}

#historyChapter4 .history-global-stat dl dd small {
    font-size: .35714em
}

#historyChapter4 .history-global-desc {
    top: 16.66667vh;
    left: 14.58333vw;
    position: absolute;
    color: #fff;
    text-align: left
}

#historyChapter4 .history-global-desc h3 {
    margin-bottom: .8em;
    font-size: 32px;
}

#historyChapter4 .history-global-desc h3 .sentence {
    display: block;
    overflow: hidden
}

#historyChapter4 .history-global-desc h3 .sentence span {
    display: block;
    line-height: 1.75em
}

#historyChapter4 .history-global-desc p {
    font-size: 18px;
    line-height: 1.88889em
}

#historyChapter4 .history-global-desc p small {
    font-size: .88889em;
    display: block;
    margin-top: 1em
}

#historyChapter4 .history-global-graph {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #438db0
}

#historyChapter4 .sky {
    background: linear-gradient(to bottom, rgba(142, 187, 208, 0), #64a1be 50%, #64a1be 100%);
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    height: 200vh
}

#historySectionEnding .sky {
    background: linear-gradient(to bottom, #64a1be, #64a1be 10%, rgba(142, 187, 208, 0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh
}

#historyBgBottom {
    background: #64a1be;
    height: 100vh
}

#historyBgBottom .cloud {
    top: -5%
}

#historyBgBottom .back1 {
    top: auto;
    bottom: 0
}

#historyBgBottom .back2 {
    top: auto;
    bottom: 0
}

#historyBgBottom .back3 {
    top: auto;
    bottom: 0
}

#historySectionEnding .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8vh
}

.mobile .history-section-group {
    height: calc(var(--vh, 100vh))
}

.mobile .history-section.full-height {
    min-height: calc(var(--vh, 100vh))
}

.mobile .history-section-content {
    height: calc(var(--vh, 100vh))
}

.mobile #historyBgTop {
    height: calc(var(--vh, 100vh))
}

.mobile #historyChapter2 .ginseng {
    height: calc(var(--vh, 100vh))
}

.mobile #historyChapter2 .ginseng .frames img {
    height: calc(var(--vh, 100vh))
}

.mobile #historyChapter2 .ground {
    min-height: calc(var(--vh, 100vh))
}

.mobile #historyChapter3 .history-inter-bg {
    height: calc(var(--vh, 100vh))
}

.mobile #historyChapter4 .history-global-graph {
    height: calc(var(--vh, 100vh))
}

.mobile #historySectionEnding .sky {
    height: calc(var(--vh, 100vh))
}

.mobile #historyBgBottom {
    height: calc(var(--vh, 100vh))
}

@media screen and (max-width:1680px) {
    #historyChapter4 .history-global-stat {
        bottom: 120px
    }
}

@media screen and (max-width:1366px) {
    .history-section .history-title h2 {
        font-size: 56px
    }
    .history-section .history-desc p {
        font-size: 28px
    }
    .history-chapter-cover {
        max-width: 500px;
        margin-bottom: 180px
    }
    .history-chapter-cover .chapter {
        font-size: 17px
    }
    .history-chapter-cover .chapter-title {
        font-size: 38px
    }
    .history-chapter-cover .chapter-description p {
        font-size: 17px
    }
    .milestone {
        font-size: 544px;
        height: 459px
    }
    #historyChapter2 .ginseng .features .feature-item .line {
        width: 200px
    }
    #historyChapter2 .ginseng .features .feature-item p {
        font-size: 15px;
        top: -13px;
        right: calc(100% + 18px)
    }
    #historyChapter2 .ginseng .features .feature-item.right p {
        left: calc(100% + 18px)
    }
    #historyChapter2 .ginseng .features .feature-item1 {
        margin-left: -215px
    }
    #historyChapter2 .ginseng .features .feature-item2 {
        margin-left: 215px
    }
    #historyChapter2 .ginseng .features .feature-item3 {
        margin-left: 215px
    }
    #historyChapter3 .history-chapter-cover {
        max-width: 640px
    }
    #historyChapter4 .history-chapter-cover {
        max-width: 660px
    }
    #historyChapter4 .history-global-stat dl {
        padding-bottom: 32px;
        margin: 0 40px
    }
    #historyChapter4 .history-global-stat dl dt {
        font-size: 18px
    }
    #historyChapter4 .history-global-stat dl dd {
        font-size: 100px
    }
    #historyChapter4 .history-global-desc {
        left: 13.02083vw
    }
    #historyChapter4 .history-global-desc h3 {
        font-size: 30px
    }
    #historyChapter4 .history-global-desc p {
        font-size: 17px
    }
}

@media screen and (max-width:1200px) {
    .history-section .history-title h2 {
        font-size: 48px
    }
    .history-section .history-desc p {
        font-size: 26px
    }
    .history-chapter-cover {
        max-width: 460px;
        margin-bottom: 160px
    }
    .history-chapter-cover .chapter {
        font-size: 16px
    }
    .history-chapter-cover .chapter-title {
        font-size: 34px
    }
    .history-chapter-cover .chapter-description p {
        font-size: 16px
    }
    .milestone {
        font-size: 464px;
        height: 391.5px
    }
    #historyChapter2 .ginseng .features .feature-item .line {
        width: 160px
    }
    #historyChapter2 .ginseng .features .feature-item p {
        font-size: 14px;
        top: -12px;
        right: calc(100% + 18px)
    }
    #historyChapter2 .ginseng .features .feature-item.right p {
        left: calc(100% + 18px)
    }
    #historyChapter2 .ginseng .features .feature-item1 {
        margin-left: -185px
    }
    #historyChapter2 .ginseng .features .feature-item2 {
        margin-left: 185px
    }
    #historyChapter2 .ginseng .features .feature-item3 {
        margin-left: 185px
    }
    #historyChapter3 .history-chapter-cover {
        max-width: 600px
    }
    #historyChapter4 .history-chapter-cover {
        max-width: 620px
    }
    #historyChapter4 .history-global-stat dl {
        padding-bottom: 30px;
        margin: 0 30px
    }
    #historyChapter4 .history-global-stat dl dt {
        font-size: 16px
    }
    #historyChapter4 .history-global-stat dl dd {
        font-size: 80px
    }
    #historyChapter4 .history-global-desc {
        left: 11.45833vw
    }
    #historyChapter4 .history-global-desc h3 {
        font-size: 28px
    }
    #historyChapter4 .history-global-desc p {
        font-size: 16px
    }
}

@media screen and (max-width:1023px) {
    .history-section .history-title h2 {
        font-size: 40px
    }
    .history-section .history-desc p {
        font-size: 24px
    }
    .milestone {
        font-size: 220px;
        height: 270px
    }
    #historyChapter2 .ginseng .features .feature-item .line {
        width: 110px
    }
    #historyChapter2 .ginseng .features .feature-item p {
        font-size: 13px;
        top: -12px;
        right: calc(100% + 18px)
    }
    #historyChapter2 .ginseng .features .feature-item.right p {
        left: calc(100% + 18px)
    }
    #historyChapter2 .ginseng .features .feature-item1 {
        margin-left: -125px
    }
    #historyChapter2 .ginseng .features .feature-item2 {
        margin-left: 125px
    }
    #historyChapter2 .ginseng .features .feature-item3 {
        margin-left: 110px
    }
    #historyChapter4 .history-chapter-cover {
        max-width: 600px
    }
    #historyChapter4 .history-global-stat dl {
        padding-bottom: 24px;
        margin: 0 24px
    }
    #historyChapter4 .history-global-stat dl dt {
        font-size: 14px
    }
    #historyChapter4 .history-global-stat dl dd {
        font-size: 68px
    }
    #historyChapter4 .history-global-desc {
        top: 140px;
        left: 60px
    }
    #historyChapter4 .history-global-desc h3 {
        font-size: 26px
    }
    #historyChapter4 .history-global-desc p {
        font-size: 14px
    }
}

@media screen and (max-width:718px) {
    .history-section .history-title h2 {
        font-size: 30px
    }
    .history-section .history-desc p {
        font-size: 18px
    }
}

.history-timeline {
    font-size: 0
}

.history-timeline .timeline-list {
    white-space: nowrap;
    display: inline-block;
    position: relative
}

.history-timeline ul {
    font-size: 0;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap
}

.history-timeline ul li {
    display: block;
    vertical-align: top;
    margin-right: 120px;
    white-space: normal
}

.history-timeline ul li:last-child {
    margin-right: 0!important
}

.history-timeline.active ul li:nth-child(even) {
    padding-top: 80px
}

.history-timeline.active .history-timeline-item .desc,
.history-timeline.active .history-timeline-item .year {
    opacity: 1
}

.history-timeline-item {
    display: block;
    position: relative
}

.history-timeline-item .img img {
    display: block
}

.history-timeline-item .txt {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 20px
}

.history-timeline-item .desc {
    font-size: 18px;
    line-height: 1.33333em;
    color: #fff;
    margin-bottom: .5em
}

.history-timeline-item .year {
    display: block;
    font-size: 14px;
    color: #666;
}

@media screen and (max-width:1366px) {
    .history-timeline ul li {
        margin-right: 100px
    }
    .history-timeline.active ul li:nth-child(even) {
        padding-top: 60px
    }
    .history-timeline-item .img img {
        height: 440px;
        width: auto
    }
    .history-timeline-item .txt {
        margin-top: 18px
    }
    .history-timeline-item .desc {
        font-size: 17px
    }
}

@media screen and (max-width:1200px) {
    .history-timeline ul li {
        margin-right: 90px
    }
    .history-timeline.active ul li:nth-child(even) {
        padding-top: 50px
    }
    .history-timeline-item .img img {
        height: 400px;
        width: auto
    }
    .history-timeline-item .txt {
        margin-top: 16px
    }
    .history-timeline-item .desc {
        font-size: 16px
    }
    .history-timeline-item .year {
        font-size: 13px
    }
}

.history-indices.vertical {
    position: fixed;
    left: 70px;
    top: 50%;
    transform: translate(-200px, -50%);
    opacity: 0;
    z-index: 99;
    transition: transform .8s cubic-bezier(.86, 0, .07, 1), opacity .8s;
    will-change: transform, opacity
}

.history-indices.vertical.active {
    transform: translate(0, -50%);
    opacity: 1
}

.history-indices.vertical ul li.anchor {
    height: 10px;
    position: relative
}

.history-indices.vertical ul li.completed .progress:before {
    opacity: 1
}

.history-indices.vertical a {
    display: block;
    color: #000;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -5px;
    opacity: .3;
    transition: opacity .2s, background-color .4s ease
}

.history-indices.vertical a .dot {
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
    display: block;
    position: relative;
    transition: background-color .4s ease
}

.history-indices.vertical a .dot:before {
    width: 100%;
    height: 100%;
    opacity: .1;
    background: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    content: '';
    border-radius: 50%;
    transition: opacity .2s, transform .2s, background-color .4s;
    will-change: opacity, transform
}

.history-indices.vertical a .label {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    white-space: nowrap;
    transition: color .4s ease
}

.history-indices.vertical a.active {
    opacity: 1
}

.history-indices.vertical a.active .dot:before {
    transform: translate(-50%, -50%) scale(2.8)
}

.history-indices.vertical .progress {
    height: 30px;
    width: 10px;
    transform: translateX(-50%);
    overflow: hidden;
    position: relative;
    display: block;
    transition: height .4s cubic-bezier(.86, 0, .07, 1)
}

.history-indices.vertical .progress:before {
    background: url(/img/120/path.svg) 50% 0 no-repeat;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    transition: height .4s cubic-bezier(.86, 0, .07, 1), background-image .4s ease;
    opacity: .2;
    width: 100%
}

.history-indices.vertical .progress .track {
    transition: top .4s cubic-bezier(.86, 0, .07, 1), background-image .4s ease;
    position: absolute;
    left: 0;
    height: 140px;
    top: 30px
}

.history-indices.vertical .progress .track:before {
    background: url(/img/120/progress.svg) 50% 0 no-repeat;
    transition: background-image .4s ease;
    width: 10px;
    position: absolute;
    left: 0;
    top: 0;
    height: 140px;
    display: block;
    opacity: .2;
    content: ''
}

.history-indices.vertical .progress .track .bar {
    background: url(/img/120/progress.svg) 50% 0 no-repeat;
    transition: background-image .4s ease, height 40ms;
    width: 10px;
    top: 0;
    left: 0;
    position: absolute;
    display: block;
    opacity: 0
}

.history-indices.vertical .progress.active {
    height: 140px;
    background: 0 0
}

.history-indices.vertical .progress.active:before {
    height: 0
}

.history-indices.vertical .progress.active .track {
    top: 0
}

.history-indices.vertical .progress.active .bar {
    opacity: 1
}

.history-indices.vertical[data-theme=light] a {
    color: #fff
}

.history-indices.vertical[data-theme=light] a .dot {
    background: #fff
}

.history-indices.vertical[data-theme=light] a .dot:before {
    background: #fff
}

.history-indices.vertical[data-theme=light] .progress:before {
    background-image: url(/img/120/path-w.svg)
}

.history-indices.vertical[data-theme=light] .progress .track:before {
    background-image: url(/img/120/progress-w.svg)
}

.history-indices.vertical[data-theme=light] .progress .track .bar {
    background-image: url(/img/120/progress-w.svg)
}

.history-indices.horizontal {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2));
    transition: transform .2s cubic-bezier(.86, 0, .07, 1), opacity .2s;
    will-change: transform, opacity;
    opacity: 0;
    z-index: 99;
    font-size: 12px
}

.history-indices.horizontal.active {
    opacity: 1
}

.history-indices.horizontal .history-indices-inner {
    width: 85vw;
    max-width: 768px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.history-indices.horizontal .position {
    display: block;
    position: absolute;
    right: 0;
    bottom: 10px;
    letter-spacing: .2em;
    color: #000
}

.history-indices.horizontal .position .total {
    opacity: .5
}

.history-indices.horizontal ul {
    display: flex;
    height: 2px
}

.history-indices.horizontal ul li {
    flex: 1
}

.history-indices.horizontal .label {
    position: absolute;
    left: 0;
    top: -2em;
    white-space: nowrap;
    transition: color .2s ease;
    opacity: 0;
    color: #000
}

.history-indices.horizontal li.active .label {
    opacity: 1
}

.history-indices.horizontal .progress {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: block;
    height: 2px;
    background: rgba(0, 0, 0, .25);
    transition: background-color .2s ease
}

.history-indices.horizontal .progress .bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: #000;
    height: 100%;
    transition: background-color .2s ease
}

.history-indices.horizontal[data-theme=light] .label,
.history-indices.horizontal[data-theme=light] .position {
    color: #fff
}

.history-indices.horizontal[data-theme=light] .progress {
    background: rgba(255, 255, 255, .25)
}

.history-indices.horizontal[data-theme=light] .progress .bar {
    background: #fff
}

@media screen and (max-width:1920px) {
    .history-indices.vertical {
        left: 50px
    }
    .history-indices.vertical a .label {
        left: 22px;
        font-size: 15px
    }
}

@media screen and (max-width:1680px) {
    .history-indices.vertical {
        left: 40px
    }
    .history-indices.vertical a .label {
        left: 22px;
        font-size: 14px
    }
}

@media screen and (max-width:1680px) {
    .history-indices.horizontal {
        display: block
    }
    .history-indices.vertical {
        display: none
    }
}

@media screen and (max-width:1440px) {
    .history-indices.horizontal .history-indices-inner {
        margin-top: 5px
    }
}

@media screen and (max-width:1366px) {
    .history-indices.horizontal .history-indices-inner {
        margin-top: 10px
    }
}

@media screen and (max-width:1200px) {
    .history-indices.horizontal .history-indices-inner {
        margin-top: 15px
    }
}

.history-brand-list {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
    margin-top: 220px
}

.history-brand-list .center-line {
    width: 39px;
    height: 1500px;
    position: relative;
    display: block
}

.history-brand-list .center-line .line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 3
}

.history-brand-list .center-line .line.line0 {
    background: url(/img/120/line2.svg) 0 0 no-repeat
}

.history-brand-list .center-line .line.line1 {
    background: url(/img/120/line2-1.svg) 0 0 no-repeat;
    z-index: 2
}

.history-brand-list .center-line .line.line2 {
    background: url(/img/120/line2-2.svg) 0 0 no-repeat;
    z-index: 1
}

.history-brand-list .center-line .line.grow:after {
    width: 100%;
    height: 80px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    background: linear-gradient(to bottom, rgba(29, 26, 26, 0) 60%, #1d1a1a 100%)
}

.history-brand-item {
    position: absolute;
    top: 0;
    left: 50%
}

.history-brand-item .dot {
    width: 7px;
    height: 7px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #eeede9;
    border-radius: 50%;
    display: block
}

.history-brand-item .line {
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    width: 160px
}

.history-brand-item .line span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: 1px dashed #eeede9;
    transform-origin: 0 0
}

.history-brand-item .desc {
    display: block;
    position: absolute;
    top: -40px;
    left: 160px
}

.history-brand-item .desc .tb {
    width: 440px;
    height: 440px;
    margin-bottom: 20px
}

.history-brand-item .desc .tb .tb-inner {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 440px;
    height: 440px
}

.history-brand-item .desc .tb .img {
    position: absolute;
    left: 0;
    top: 0
}

.history-brand-item .desc .tb .img img {
    display: block;
    width: 100%;
    max-width: initial
}

.history-brand-item .desc .txt p {
    color: #fff;
    font-size: 18px;
    line-height: 1.66667em;
    margin-bottom: 1em
}

.history-brand-item .desc .txt .cta .btn {
    display: inline-block;
    color: #fff;
    margin-bottom: 1em;
    background: 0 0!important
}

.history-brand-item .desc .txt .cta .btn:before {
    background: #fff
}

.history-brand-item .desc .txt .cta .btn:after {
    border-color: #fff
}

.history-brand-item.left .line {
    left: auto;
    right: 0
}

.history-brand-item.left .line span {
    transform-origin: 100% 0
}

.history-brand-item.left .desc {
    right: 160px;
    left: auto
}

.history-brand-item.left .desc .tb .img {
    left: auto;
    right: 0
}

.history-brand-item.left .desc .tb .img img {
    left: auto;
    right: 0
}

.history-brand-item#history-brand-item1 {
    top: 235px
}

.history-brand-item#history-brand-item2 {
    top: 555px
}

.history-brand-item#history-brand-item3 {
    top: 995px
}

.history-brand-item#history-brand-item4 {
    top: 1318px
}

.history-brand-item#history-brand-item5 {
    top: 1755px
}

.history-brand-item#history-brand-item6 {
    top: 2075px
}

.history-brand-item#history-brand-item7 {
    top: 2515px
}

.history-brand-item#history-brand-item8 {
    top: 2835px
}

.history-brand-item#history-brand-item9 {
    top: 3275px
}

.no-touchevents .history-brand-item .tb img {
    transition: transform .8s cubic-bezier(.23, 1, .32, 1);
    will-change: transform
}

.no-touchevents .history-brand-item:hover .tb img {
    transform: scale(1.1)
}

.history-brand-footer {
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    margin-top: 40px;
    color: #fff;
    width: 100vw;
    max-width: 640px
}

.history-brand-footer h3 {
    margin-bottom: 1em;
    font-size: 40px;
}

.history-brand-footer h3 .sentence {
    display: block;
    overflow: hidden
}

.history-brand-footer h3 .sentence span {
    display: block;
    line-height: 1.5em
}

.history-brand-footer p {
    font-size: 18px;
    text-align: center;
    line-height: 1.88889em
}

@media screen and (max-width:1366px) {
    .history-brand-item .line {
        width: 130px
    }
    .history-brand-item .desc {
        top: -30px;
        left: 130px
    }
    .history-brand-item .desc .tb {
        width: 400px;
        height: 400px;
        margin-bottom: 18px
    }
    .history-brand-item .desc .tb .tb-inner {
        width: 400px;
        height: 400px
    }
    .history-brand-item .desc .txt p {
        font-size: 17px
    }
    .history-brand-item.left .desc {
        right: 130px
    }
    .history-brand-footer {
        max-width: 620px
    }
    .history-brand-footer h3 {
        font-size: 38px
    }
    .history-brand-footer p {
        font-size: 17px
    }
}

@media screen and (max-width:1200px) {
    .history-brand-item .line {
        width: 100px
    }
    .history-brand-item .desc {
        top: -30px;
        left: 100px
    }
    .history-brand-item .desc .tb {
        width: 134px;
        height: 134px;
        margin-bottom: 18px
    }
    .history-brand-item .desc .tb .tb-inner {
        width: 360px;
        height: 360px
    }
    .history-brand-item .desc .txt p {
        font-size: 16px
    }
    .history-brand-item.left .desc {
        right: 100px
    }
    .history-brand-footer {
        max-width: 600px
    }
    .history-brand-footer h3 {
        font-size: 34px
    }
    .history-brand-footer p {
        font-size: 16px;
        padding: 0 15px;
        
    }
}

@media screen and (max-width:1023px) {
    .history-brand-item .line {
        width: 44px
    }
    .history-brand-item .desc {
        top: -20px;
        left: 44px
    }
    .history-brand-item .desc .tb {
        width: 134px;
        height: 134px;
        margin-bottom: 14px
    }
    .history-brand-item .desc .tb .tb-inner {
        width: 300px;
        height: 300px
    }
    .history-brand-item .desc .txt p {
        font-size: 14px;
        word-break: break-all;
    }
    .history-brand-item.left .desc {
        right: 44px
    }
}

.history-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh
}

.history-map .back,
.history-map .front {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background-color: #fff
}

.history-map .back .map-inner,
.history-map .front .map-inner {
    position: absolute;
    width: 100vw;
    height: 100vh;
    bottom: 0;
    left: 0;
    right: 0
}

.history-map .front .map-inner {
    background: #438db0
}

.history-map .map {
    width: 1920px;
    height: 1080px
}

.history-map .map .img {
    display: block;
    opacity: .8;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.history-map .map .motion {
    position: absolute;
    width: 1920px!important;
    height: 1080px!important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

@media screen and (max-width:1920px) {
    .history-map .map {
        width: 100vw;
        height: 56.25vw
    }
    .history-map .map img {
        width: 90.625%
    }
    .history-map .map .motion {
        position: absolute;
        width: 100vw!important;
        height: 56.25vw!important
    }
}

@media screen and (max-width:1280px) {
    .history-map .map {
        width: 140vw;
        height: 78.75vw
    }
    .history-map .map img {
        width: 126.875%
    }
    .history-map .map .motion {
        position: absolute;
        width: 140vw!important;
        height: 78.75vw!important
    }
}

.history-global-graph .graph {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    width: 100%
}

.history-global-graph .graph-inner {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100vw;
    bottom: 0
}

.history-global-graph svg {
    display: block;
    width: 100%;
    overflow: visible
}

.history-global-graph .years {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5%;
    font-size: 1.04167vw;
    letter-spacing: -.05em;
    color: #fff
}

.history-global-graph .years span {
    display: block;
    white-space: nowrap;
    transform: translateX(-50%);
    position: absolute;
    top: 0
}

.history-global-graph .years span:nth-child(1) {
    left: 5%
}

.history-global-graph .years span:nth-child(2) {
    left: 20%
}

.history-global-graph .years span:nth-child(3) {
    left: 35%
}

.history-global-graph .years span:nth-child(4) {
    left: 50%
}

.history-global-graph .years span:nth-child(5) {
    left: 65%
}

.history-global-graph .years span:nth-child(6) {
    left: 80%
}

.history-global-graph .years span:nth-child(7) {
    left: 95%
}

.history-global-graph .legends {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 1.04167vw;
    letter-spacing: -.05em;
    color: #fff
}

.history-global-graph .legends span {
    top: 90%;
    border-radius: 50%;
    width: .83333vw;
    height: .83333vw;
    background: #fff;
    display: block;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #79b3ce
}

.history-global-graph .legends span:nth-child(1) {
    left: 5%
}

.history-global-graph .legends span:nth-child(2) {
    left: 20%
}

.history-global-graph .legends span:nth-child(3) {
    left: 35%
}

.history-global-graph .legends span:nth-child(4) {
    left: 50%
}

.history-global-graph .legends span:nth-child(5) {
    left: 65%
}

.history-global-graph .legends span:nth-child(6) {
    left: 80%
}

.history-global-graph .legends span:nth-child(7) {
    left: 95%
}

.history-global-graph .legends span .val {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -200%);
    font-size: .83333vw;
    color: rgba(255, 255, 255, .7);
    white-space: nowrap
}

@media screen and (max-width:1680px) {
    .history-global-graph .years {
        bottom: calc(45px + 5%)
    }
}