/* @override 
	https://helloeveryone.org/devel2018/ujin***KA/css/style.css
	http://ujin.xyz/XYZ2/css/style.css
	http://ujin.xyz/XYZ10/css/style.css
	http://ujin.xyz/XYZ20/css/style.css
	http://xlxiaolin.com/landing/css/style.css
	http://xlxiaolin.com/landing7/css/style.css
	http://xlxiaolin.com/landing10/css/style.css
	http://xlxiaolin.com/landing11/css/style.css
	http://xlxiaolin.com/landing-staging2/css/style.css
	https://xlxiaolin.com/complete/css/style.css
	https://xlxiaolin.com/css/style.css */

body {
	background-color: #606b6c;
	color: #ffffff;
}

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

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

    body * {
        font-family: draft;
    }

.ujin_nobackground {
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #606b6c
}

.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: #fff !important;
}

.typed {
    display: none;
}

.typed-cursor {
    display: none;
}

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

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

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

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

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

.my-effect {
    color: #fff;
}

.size {
    font-size: 48px;
}

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

    .dropdown-content a {
        color: #fff;
        text-decoration: none;
        display: block;
        font-size: 49px;
        margin-left: px;
    }

@media (min-width: 1200px) {
    
.video-column{
    position: relative;
    display: inline-block !important;
    background: url(../images/back.jpg) no-repeat;
    background-size: contain;
    background-position: center center;
    height: 100vh !important;
    width: 27vw;
    margin-left: 15vw !important;
	max-width: 605px !important;
}
   
   body.ujin_nobackground div.wrapper div.video-column div.logo a img.logo-img {
   	max-width: 550px !important;
   }
   
}

.wrapper, html, body {
    font-size: 0;
    height: 100%;
	max-width: 1400px; 
}

    .wrapper .trigger-column {
        display: inline-block;
        vertical-align: bottom;
        height: 100%;
        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: 180px;
        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: #fff;
            font-size: 19px;
            line-height: .6;
            min-width: 200px;
            vertical-align: middle;
        }

#info a {
    font-size: 50px;
    color: #ffffff;
    float: right;
    margin-right: 35px;
    margin-top: 80px;
    position: relative;
    z-index: 9999;
}

@media (min-width: 577px) {
    .wrapper {
        bottom: 14vh;
        left: 9.3vw; 
    }
}



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

    #info a {
        font-size: 50px;
        color: #fff;
        float: right;
        margin-right: 35px;
        margin-top: 15px;
    }

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

    .wrapper {
        line-height: 1;
        height: auto;
        bottom: 2vh;
        max-width: 100%;
       
    }
    
    .video-column{
    position: relative;
    display: inline-block !important;
    background: url(../images/back.jpg) no-repeat;
    background-size: contain;
    background-position: center center;
    height: 100vh !important;
    width: 100% !important;
    margin-left: 0px !important;
    padding-left: 0px !important;
        left: 0px;
}

.link-just{
    position: relative !important;
    padding-bottom: 10px;
    left: 9.3vw;
    color: white;
    font-size: 18px !important;
    text-decoration: none;
	color: #ECBFB0;    
    padding-top: 45px;
}


        .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 a {
    font-size: 49px;
    color: #fff;
    float: right;
    margin-right: 30px;
    margin-top: 105px;
}

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

#info_content {
    height: auto;
    bottom: 19vh;
    left: 8vw;
    max-width: 90vw;
    width: 700px;
    position: absolute;
    font-size: 19px;
    font-weight: normal;
    font-style: normal;
    line-height: 22px;
    color: #fff;
}

#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 */

.wrapper{
    bottom: 0vh;
    position: relative;
	
}

.trigger-column{
    width: 20vw;
    bottom: 28.4vh !important;
    display: inline-block !important;
}
.video-column{
    position: relative;
    display: inline-block !important;
    background: url(../images/back.jpg) no-repeat;
    background-size: contain;
    background-position: center center;
    height: 100vh !important;
    width: 60vw;
 
}
.logo{
    position: relative;
    left: 2.9vh;
    cursor: pointer;
    height: 28vh;
    float: left;
    overflow: hidden;
    display: none;
    margin-top: 24vh;
}
.logo-img{
    width: 54.5vw;
 
}
.link-just{
    position: absolute;
    bottom: 5vh;
    left: 9.3vw;
    color: white;
    font-size: 18px !important;
    text-decoration: none;
	color: #ECBFB0;
}
.link-just:hover{
    color: white;
    text-decoration: none;
}


@media (min-width: 816px)  {
    .video-column{        
        width: 38vw;
    }
    .logo-img{
        width: 34.8vw;
    }
	
	
}


@media only screen and (max-width: 650px)   {
    .wrapper *{
        max-width: initial;
    }
	
	body.ujin_nobackground div.wrapper div.trigger-column div.dropdown {
		min-width: 340px !important;
	}
	
	
    .trigger-column{
        width: 40vw;
    }
    .video-column{
        width: 100vw;
        height: 100vh !important;
		margin-top: -10px !important;
    }
    .logo-img{
        width: 34.8vw;
    }

    .trigger-column{
        width:40vw;
    }
    .video-column{
        width: 40vw;
        height: 99vh !important;
		
    }
    .logo{
        margin-top: 35vh;
    }
    .logo-img{
        width: 100%;
    }
	
	.dropdown, .wrapper,  {
		  width: 100% !important; 
	}
    .trigger-column{
        width: 100%;
        display: inline-block !important;
        top: 0vh;
        height: 8vh !important;
		margin-right: 30px !important;
		float: left;
		padding-top: 6px;
	}
    .video-column{
        width: 100%;
        height: 63vh !important;
        display: block !important;
		position: relative;
		float: right;
		left:  0px;
		margin-left: -20px;
	}
	
	body.ujin_nobackground div.wrapper div.video-column {
		padding-left: 0px !important;
		margin-left:  0px !important;
		
	}
	
	body.ujin_nobackground div.wrapper div.trigger-column div.dropdown {
		width: 100% !important;
	min-width: 300px;
	float: left;
	}
	
	body.ujin_nobackground a.link-just {
		float: left;
		clear: left;
		margin-left: 0;
		left: 20px;
	}
	
    .logo{
        margin-top: 20vh;
        left: 5vh;
    }
    .logo-img{
        width: 60vw;
    }
	
	body .trigger {
		margin-left: 60px;
		
	}
	
	body.ujin_nobackground div.wrapper div.video-column div.logo  {
		margin-left: 44px;
		margin-top: 100px;
	}
	
	body.ujin_nobackground a.link-just {
		margin-left: 36px;
	}
	
}


@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape)
 { 
body.ujin_nobackground div.wrapper div.video-column div.logo img {
		width: 240px;
		margin-left: 70px;
        
    
	}
     
     body.ujin_nobackground div.wrapper div.video-column div.logo  {
		
        margin-top: 80px;
    
	}


}


.wrapper .trigger-column {
           height: auto;
           margin: 10px 0 !important;
           display: block;
           bottom: 0;
           position: relative;
           width: 20vw;
       }