html, body {
    overflow: hidden;
    overflow-y: auto;
}
div#preload {
    display: none;
}

@font-face {
    font-family: draft;
    src: url(fonts/XiaoLinweb-Regular.otf);
}

body {
    height: 100vh;
    font-family: draft;
    /* transition: .2s all ease-in; */
    display: none;
}

body * {
    font-family: draft;
}

.ujin_nobackground {
    background-size: cover;
    background-repeat: no-repeat;
}

.dot {
    display: inline-block;
    padding-left: 6.8px;
    font-size: 50px;
}

mediaelementwrapper {
    opacity: 0;
}

.wrapper {
    transition: .5s all ease-in;
}

.mejs__controls, .mejs__overlay-button {
    display: none !important;
}

.index_background {
    /*background: url(../images/plain1.jpg) no-repeat center center;*/
    background-size: cover;
}

.ujin_background {
    /*background: url(../images/plain1.jpg) no-repeat center center;*/
    background-size: cover;
}

.write {
    color: black !important;
    z-index: 999999999;
}

.write:hover {
    cursor: pointer;
}

.typed {
    display: none;
}

.typed-cursor {
    display: none;
}

* {
    border: 0 !important;
    outline: 0 !important;
}

.dropdown {
    position: relative;
    display: inline-block;
    border: 0;
}

.dropdown a {
    color: #000;
    text-decoration: none;
}

.dropdown span {
    cursor: pointer;
    color: #000;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.my-effect {
    color: black;
}

.size {
    font-size: 48px;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    z-index: 1;
}

.dropdown-content a {
    color: #000;
    text-decoration: none;
    display: block;
    font-size: 49px;

}

@media (min-width: 1200px) {
    .size-1 .video-column, .size-1 .video-column *:not(span) {
        width: 557px !important;
        height: 313px !important;
        max-width: 80vw;
    }

    .size-2 .video-column, .size-2 .video-column *:not(span) {
        width: 697px !important;
        height: 392px !important;
        max-width: 80vw;
    }

    .size-3 .video-column, .size-3 .video-column *:not(span) {
        width: 836px !important;
        height: 470px !important;
        max-width: 62vw;
    }

    .size-4 .video-column, .size-4 .video-column *:not(span) {
        width: 979px !important;
        height: 551px !important;
        max-width: 70vw;
    }
}

.wrapper {
    font-size: 0;
}

.wrapper .trigger-column {
    display: inline-block;
    vertical-align: bottom;
    height: 100%;
    font-variant-numeric: oldstyle-nums stacked-fractions;
    line-height: 1;
    position: relative;
    bottom: 16.7vh;
}

.wrapper .trigger-column .dropdown {
    height: 100%;
}

.wrapper .video-column {
    display: inline-block;
    margin-left: 7px;
    vertical-align: bottom;
    height: 100%;
    line-height: 1;
}

.wrapper .video-column .write, .wrapper .video-column .to-hide {
    font-variant-numeric: oldstyle-nums stacked-fractions;
    vertical-align: bottom;
    line-height: 1;
    position: absolute;
    bottom: 16.7vh;
}

.wrapper .subtitle-column {
    width: 200px;
    display: inline-block;
    vertical-align: bottom;
    height: 100%;
    font-variant-numeric: oldstyle-nums stacked-fractions;
    line-height: 1;
    margin-left: 12px;
    position: relative;
    bottom: 18.7vh;
    transform: translateY(30%);
}

.size-4 .wrapper .subtitle-column {
    width: 150px;
    display: inline-block;
    vertical-align: bottom;
    height: 100%;
    font-variant-numeric: oldstyle-nums stacked-fractions;
    line-height: 1;
    margin-left: 12px;
    position: relative;
    transform: translateY(30%);
    bottom: 20.7vh;

}

.size-1 .wrapper .subtitle-column {
    width: 300px;
    display: inline-block;
    vertical-align: bottom;
    height: 100%;
    font-variant-numeric: oldstyle-nums stacked-fractions;
    line-height: 1;
    margin-left: 12px;
    position: relative;
    bottom: 18.7vh;
    transform: translateY(30%);
}

.wrapper .subtitle-column .project-name, .wrapper .subtitle-column .project-name-2 {
    font-variant-numeric: oldstyle-nums stacked-fractions;
    display: block;
    color: black;
    font-size: 19px;
    line-height: .6;
    min-width: 215px;
    vertical-align: middle;
}

.info {
    position: fixed;
    right: 124px;
    top: 10vh;
    z-index: 1000;
    width: 80px;
}

.info a {
    color: #000;
    text-align: right;
    font-size: 19px;
    display: block;
}

.info a:hover {
    color: #ECBFB0;
    text-decoration: none;
}

.info div a {
    display: block;
}

.info div {
    position: absolute;
    display: none;
    background-color: transparent !important;
    width: 100%;
}

.info > a:hover + div, .info:hover div {
    display: block;
}


@media (min-width: 737px) {
    .wrapper {
        display: inline-block;
        position: absolute;
        bottom: 14vh;
        left: 8.4vw;
        max-width: calc(100% - 10vw);
    }

    #info_content_mobile {
        display: none;
    }

}

@media (max-width: 737px) {
    .wrapper {
        position: static !important;
        width: unset;
        overflow: initial;
        display: block;
        padding: 20px;
    }

    div.wrapper .subtitle-column {
        float: left;
        clear: left;
        padding-top: 50px;
    }

    #info_content {
        display: none;
    }

    .info {
            right: 0px;
            left: 0;
            margin: auto;
    }
    .info a{
            text-align: center;
    }

}

@media (max-width: 1200px) {
    mediaelementwrapper {
        width: 100%;
        height: 100%;
    }



    #fade_effect * {
        min-width: 100%;
        max-width: 100%;
        min-height: 100%;
        max-height: 100%;
    }

    .wrapper {
        line-height: 1;
        height: auto;
        bottom: 2vh;
        left: 7vw;
        max-width: 100%;
    }

    .wrapper * {
        max-width: 100%;
    }

    .wrapper .trigger-column, .wrapper .video-column, .wrapper .subtitle-column {
        height: auto;
        margin: 10px 0 !important;
        display: block;
        bottom: 0;
        position: relative;
    }

    .wrapper .project-name {
        display: block;
        padding-top: 0;
        clear: both;
    }

    .wrapper .video-column .write, .wrapper .video-column .to-hide {
        position: relative;
        bottom: 0;
    }
}

div#fade_effect {
    overflow: hidden;
}

.show1.mejs__video {
    background-color: transparent !important;
}



#info_content, #info_content_mobile {
    height: auto;
    bottom: calc(10vh + 150px + 6px);
    width: 100%;
    /* text-align: center; */
    position: absolute;
    /* font-size: 19px; */
    font-weight: normal;
    font-style: normal;
    /* line-height: 24.3px; */
    color: #000;
}

#info_content, #info_content_mobile {
    font-size: 19px;
    line-height: 24px;
    left: 94px;
    width: calc(100vw - 94px - 94px);
}

/*
#info_content {
    font-size: 15px;
    line-height: 19.3px;
} */

/*
.image_off, #xl-link:hover .image_on{
   display:none
}
.image_on, #xl-link:hover .image_off{
   display:block
}

*/

#info_content a, #info_content_mobile a {
    color: #ECBFB0;
}

#info_logo {
    left: 94px;
    bottom: calc(10vh + 10px);
    position: absolute;
    font-weight: normal;
    font-style: normal;
    line-height: 28px;
    color: red;

}

#info_logo img {
    height: 24px;
}

#fade_effect {
    margin-left: 2px;
    display: inline-block;
    vertical-align: bottom;
    height: 100%;
    font-variant-numeric: oldstyle-nums stacked-fractions;
    line-height: 1;
    position: relative;
    bottom: 1vh;
}

/*# sourceMappingURL=style.css.map */
@media only screen and (min-width: 1200px) {
    .wrapper * {
        max-width: initial;
    }



    .wrapper {
        bottom: 13vh !important;
        left: 2vw !important;
    }

    .wrapper .trigger-column {
        margin-left: 13vh !important;
    }

    .wrapper .trigger-column, .wrapper .video-column {
        display: inline-block !important;
    }

    .wrapper .subtitle-column {
        width: 110px !important;
        margin-left: 10px !important;
        display: inline-block;
    }
}

@media only screen and (min-width: 1200px) {
    .wrapper * {
        max-width: initial;
    }



    .wrapper {
        bottom: 13vh !important;
        left: 2vw !important;
    }

    .wrapper .trigger-column {
        margin-left: 13vh !important;
    }

    .wrapper .trigger-column, .wrapper .video-column {
        display: inline-block !important;
    }

    .wrapper .subtitle-column {
        width: 20px !important;
        margin-left: 10px !important;
        display: inline-block;
    }

    .size-4 .wrapper .subtitle-column {
        width: 20px !important;
        margin-left: 10px !important;
        display: inline-block;
        position: absolute !important;
        bottom: -25.7vh !important;
    }

}

@media only screen and (max-width: 1200px) and (min-width: 860px) {
    .wrapper * {
        max-width: initial;
    }



    .wrapper {
        bottom: 8vh !important;
        left: 2vw !important;
    }

    .wrapper .trigger-column {
        margin-left: 6vh !important;
    }

    .wrapper .trigger-column, .wrapper .video-column {
        display: inline-block !important;
    }

    .wrapper .subtitle-column {
        width: 110px !important;
        margin-left: 10px !important;
        display: inline-block;
        bottom: 0vh !important;
    }

}

@media only screen and (max-width: 860px) and (min-width: 580px) {
    .wrapper * {
        max-width: initial;
    }

    .wrapper {
        bottom: auto;
        top: 30vh;
    }

    .wrapper .trigger-column {
        position: absolute;
        bottom: auto;
        top: 30%;
        display: inline-block;
        width: 90px;
        margin-left: 20vh;
    }

    .wrapper .video-column {
        position: absolute;
        display: inline-block;
        width: 550px;
        height: 50px;
        left: 0vh;
        top: 6vh;
        padding-top: 9px;
    }

    .wrapper .video-column .write {
        position: absolute;
        bottom: auto;
    }

    .subtitle-column {
        position: absolute;
        top: 49vh;
    }

    #fade_effect {
        bottom: -2.6vh;
    }



    .wrapper .subtitle-column {
        bottom: 0vh !important;
    }

    #info_content, #info_content_mobile {
        height: auto;
        /* top: 40vh;
        bottom: 30.3vh; */
        left: 94px;
        width: calc(100vw - 94px - 94px);
        
        position: absolute;
        /* font-size: 19px; */
        font-weight: normal;
        font-style: normal;
        /* line-height: 24.3px; */
        color: #000;
    }


}

@media only screen and (max-width: 580px) {
    .wrapper * {
        max-width: initial;
    }

    .wrapper {
        bottom: auto;
        top: 30vh;
    }

    .wrapper .trigger-column {
        position: absolute;
        bottom: auto;
        top: 30%;
        display: inline-block;
        width: 90px;

    }

    .wrapper .video-column {
        position: absolute;
        display: inline-block;
        width: 30vh;
        height: 50px;
        left: 3vh;
        top: 37vh;
    }

    .wrapper .video-column .write {
        position: absolute;
        bottom: auto;
    }

    .subtitle-column {
        position: absolute;
        top: 65vh;
    }

    #fade_effect {
        bottom: 16.7vh;
        max-width: 140%;
    }

    .wrapper .subtitle-column {
        bottom: 0vh !important;
        margin-top: -90px !important;
    }

    #info_content, #info_content_mobile {
        height: auto;
        top: 5vh;
        left: 8vw;
        width: calc(100vw - 10vw);
        max-width: none;
        position: relative;
        font-size: 19px;
        font-weight: normal;
        font-style: normal;
        line-height: 24.3px;
        color: #000;
        padding-bottom: 80px;
        margin-top: 20px;
    }

    @media only screen and (max-width: 900px) {

        body .wrapper_info {
            margin-top: 15% !important;
        }



        #info_content, #info_content_mobile {
            top: 180px;
            left: 5% !important;
        }

        #info_logo {
            left: 5%;
            position: relative;
            font-weight: normal;
            font-style: normal;
            line-height: 22px;
            color: #000;
            top: 150px;
            padding-bottom: 50px;
        }
    }

    /* Landscape */
    @media only screen
    and (min-device-width: 375px)
    and (max-device-width: 736px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: landscape) {

        #info_content {
            display: none;
        }

        #info_content, #info_content_mobile {
            height: auto;
            top: 20vh;
            left: 9.1vw;
            max-width: 85vw;
            width: 910px;
            /*position: absolute;*/
            font-size: 19px;
            font-weight: normal;
            font-style: normal;
            line-height: 24.3px;
            color: #000;

        }

        #info_logo {
            left: 8%;
            bottom: 6vh;
            position: absolute;
            font-weight: normal;
            font-style: normal;
            line-height: 22px;
            color: #000;
            padding-bottom: 0px;
        }

        #info_logo img {
            width: 60px;
        }

        .wrapper {
            top: 75vh;
            left: 5vw;
        }

        .wrapper .video-column {
            position: absolute;
            display: inline-block;
            width: 300vh;
            height: 50px;
            left: 23vh;
            top: -4px;
        }

        .wrapper .subtitle-column {
            left: 131vh;
            top: 2vh;
        }
    }


    /* Portrait */
    @media only screen
    and (min-device-width: 340px)
    and (max-device-width: 926px)
    and (orientation: portrait) {
        #info_content, #info_content_mobile {
            height: auto;
            top: 150px;
            left: 15px;
            max-width: none;
            width: 100%;
            /*position: absolute;*/
            font-size: 19px;
            font-weight: normal;
            font-style: normal;
            line-height: 24.3px;
            color: #000;
            padding-right: 9.1vw;
        }

        #info_logo {
            left: 5%;
            bottom: 15px;
            /*position: absolute;*/
            font-weight: normal;
            font-style: normal;
            line-height: 22px;
            color: #000;
        }

        .info {
            position: relative;
            /* right: 60px; */
            text-align: center;
            width: 100%;
        }
        .info a {
            text-align: center;
        }
    }

    /* Portrait */
    @media only screen
    and (min-device-width: 412px)
    and (max-device-width: 500px)
    and (orientation: portrait) {
       #info_content, #info_content_mobile {
            height: auto;
            top: 150px;
            left: 15px;
            max-width: none;
            width: 100%;
            /*position: absolute;*/
            font-size: 19px;
            font-weight: normal;
            font-style: normal;
            line-height: 24.3px;
            color: #000;
            padding-right: 9.1vw;
        }

        #info_logo {
            left: 5%;
            bottom: 15px;
            /*position: absolute;*/
            font-weight: normal;
            font-style: normal;
            line-height: 22px;
            color: #000;
        }
    }
}

/* Portrait */
@media only screen
and (min-device-width: 340px)
and (max-device-width: 926px)
and (orientation: landscape) {
    #info_content, #info_content_mobile {
        height: auto;
        top: 0;
        left: 0vw;
        padding-top: 30vh;
        /* max-width: 85vw; */
        /* width: 910px; */
        width: 100%;
        max-width: none;
        padding: 0 5%;
        position: relative;
        font-size: 19px;
        font-weight: normal;
        font-style: normal;
        line-height: 24.3px;
        color: #000;
    }

    .wrapper_info {
        margin-top: 30vh;
    }
    #info_logo {
        left: 5vw;
        bottom: 0;
        position: relative;
        font-weight: normal;
        font-style: normal;
        line-height: 22px;
        color: #000;

        padding: 10vh 0;

    }

    .info {
        position: relative;
        right: 0; 
        text-align: center;
        width: 100%;
        top: 0;
        margin-top: 10vh;
    }
    .info a {
        text-align: center;
    }
}