@charset "UTF-8";

* {margin:0;box-sizing:border-box;}


html {width:100%;height:100vh;}
body {background:#14181f;width:100%;height:100vh;}

/* layout */
#wrapper {width:100%;height:100%;}
#background {z-index:0;position:absolute;top:50%;left:0;transform:translate(0,-50%); width:100%;min-width:1280px;height:100%;background:#000;overflow:hidden;}
#header {z-index:2;position:absolute;top:0;left:0; width:100%;height:80px;min-width:1280px;padding:0 40px;background:none;}
#container {z-index:1;position:absolute;top:80px;left:0;width:100%;height:calc(100% - 100px);min-width:1280px;padding:0 40px;background:none;overflow-y:hidden;}
#footer {z-index:2;position:absolute;top:100vh; width:100%;height:auto;min-width:1280px;padding:40px 40px;background:none;background:url(../images/logo_white_40.png) no-repeat right 40px center;}

/* background */
#background>div {position:absolute; width:100% !important;height:100% !important;}
#background {position: relative;width: 100%;height: 100%;}
    .fade {opacity: 0;transition: opacity 1s ease-in-out;}
    .fade.visible {opacity: 1;animation: image-zoom-out 10s cubic-bezier(0.4, 0, 0.2, 1) both;}

#background.lsh>div:nth-child(1) {background:url(../images/lsh_main_vs3.jpg)no-repeat 50% 50%;background-size: cover;}
#background.lsh>div:nth-child(2)  {background:url(../images/lsh_main_vs2.jpg)no-repeat 50% 50%;background-size: cover;}

#background.juc>div:nth-child(1) {background:url(../images/juc_main_vs1.jpg)no-repeat 50% 50%;background-size: cover;}
#background.juc>div:nth-child(2)  {background:url(../images/juc_main_vs2.jpg)no-repeat 50% 50%;background-size: cover;}

#background.sdh>div:nth-child(1) {background:url(../images/sdh_main_vs1.jpg)no-repeat 50% 50%;background-size: cover;}
#background.sdh>div:nth-child(2)  {background:url(../images/sdh_main_vs2.jpg)no-repeat 50% 50%;background-size: cover;}

#background.sjh>div:nth-child(1) {background:url(../images/sjh_main_vs1.jpg)no-repeat 50% 50%;background-size: cover;}
#background.sjh>div:nth-child(2)  {background:url(../images/sjh_main_vs2.jpg)no-repeat 50% 50%;background-size: cover;}

/* header */
#header > .logo {float: left;vertical-align: middle;font:600 26px/90px 'SCDR';color:#fff;}
#header > .logo img {margin:-5px 10px 0 0;}
.nav {float: right;display:flex;justify-content: center;align-items: center;flex-wrap:nowrap;}
.nav li {position:relative;margin-left:50px;}
.nav li a {font:500 16px/95px 'SCDR';color:#fff;}
.nav li>ul {position:absolute;left:50%;top:80px;transform:translateX(-50%); display:flex;justify-content: center;align-items: center;flex-wrap:wrap;height:auto;padding:10px 25px;border-radius:5px; background-color: rgba(255, 255, 255, .05);backdrop-filter: blur(20px);}
.nav li>ul>li {margin:0;padding:5px 5px;}
.nav li>ul>li a {font:500 14px/30px 'SCDR';color:#fff;}
.nav li:hover ul {animation-name:nav_ani;animation-duration:.5s;animation-timing-function: ease-in-out;animation-iteration-count: 1;}
.nav li>ul>li a:before {position:absolute;left:0;bottom:0;display:block;content:'';width:0;height:1px;background:#999;transition: all .3s;}
.nav li>ul>li a:hover {color: #75fffd;}
.nav li>ul>li a:hover:before {width:100%;background:#75fffd;}

/* container */
#container div {position:absolute;padding:120px 150px 0 150px;font-size:20px; font-weight:500;color:#fff;overflow:hidden;text-shadow: 0 0 10px rgba(0,0,0,.5);}
#container div:nth-of-type(1) {display:block}
#container div p {display: inline-block; width: 100%;}
#container div p.title {color:#fff;font-size:50px;line-height:140px;}
#container div .title>span {display:inline-block;}
#container div.visible .title>span {animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;}
#container div p:not(.title) {display:inline-block;line-height:40px !important; }
#container div.visible p:not(.title) {animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
#container div.visible dl {animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
#container div dl dt {padding:10px 10px  5px 10px;}
#container div dl dd {font-style:18px;text-indent:40px;padding:0px 0px  15px 0px;}
    .txt.visible {opacity: 1;}
    .txt {opacity: 0;transition: opacity 1s ease-in-out;}

/* footer */
.copy {font-weight:500;font-size:14px;color:#666;line-height:24px;}
.copy a {font-weight:500;font-size:14px; margin-top:-3px; display:inline-block;}



/* Animation */
@keyframes nav_ani {
	from {
		transform:translate(-50%,-10px);
		height:0;
		opacity:0;
	}
	to {
		transform:translate(-50%,0px);
		height:auto;
		opacity:1;
	}
}
@keyframes image-zoom-out {
	0% {
		transform: scale(1.08,1.08);
	}
	50% {
		transform: scale(1.0,1.0);
	}
	100% {
		transform: scale(1.0,1.0);
	}
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}