@charset "utf-8";
html {}
#main_bg {position:absolute; width:100%; height:100%; overflow:hidden; z-index:1;}
#main_bg .dp {position:absolute; width:100%; height:100%;}
#main_bg .dp div {position:absolute; width:100%; height:100%; background-repeat:no-repeat !important; background-size:cover !important; background-position:center center !important; background:#333; filter: grayscale(60%) contrast(70%) sepia(10%); -webkit-filter: grayscale(60%) contrast(70%) sepia(10%);}
#main_bg .back_pattern {position:absolute; width:100%; height:100%; background:url(/img/intro_dot.png); z-index:999;}
#main_bg .back_opacity {position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:998}

#main_title {position:absolute; width:100%; height:100%; z-index:99999;}
#main_title hr {position:absolute; width:350px; height:0; top:50%; left:50%; margin:0 0 0 -175px; padding:0; border:0; border-top:1px solid rgba(255,255,255,0.3); display:block;}
#main_title ul {position:relative; width:366px; overflow:hidden; margin:0 auto; top:calc(50% - 230px); text-align:center; color:#fff; z-index:99999;}
#main_title .logo {position:relative; height:146.8px; text-align:center; color:#fff; overflow:hidden;}
#main_title .logo img {width:116px; margin-top:30px; opacity:0; image-rendering:-webkit-optimize-contrast}
#main_title .ment {text-align:center; z-index:99999;}
#main_title .ment p span {opacity:0;}
#main_title .ment p.slogan {font-family: "WindSong", cursive; font-size:1.9em; letter-spacing:0.1em; color:rgba(255,255,255,0.9); margin:10px 0 30px;}
#main_title .ment p.ourService {font-family: "Mohave", sans-serif; font-optical-sizing: auto; font-size:1.1em; font-weight:100; color:rgba(255,255,255,0.6); margin:20px 0;}
#main_title .ment p.ourService.m2 {letter-spacing:0.1em}
#main_title .ment p.ourService.m3 {letter-spacing:0.14em}
#main_title .ment p.ourService.m4 {letter-spacing:0.13em}
#main_title .ment p.ourService.m5 {letter-spacing:0.11em}
#main_title .ment p.ourService.m6 {letter-spacing:0.15em}
#main_title .member {margin-top:60px;}
#main_title .member a {font-size:2em;}

.white {position:absolute; top:0;width:100%;height: 100%;z-index:1;opacity:0.05; display:none;}
.squares {height: 100%;display: flex;justify-content: space-around;overflow: hidden; z-index:100;}
.square {-webkit-animation: squares 20.5s linear infinite;animation: squares 20.5s linear infinite;align-self: flex-end;width: 1em;height: 1em;-webkit-transform: translateY(100%);transform: translateY(100%);background: #ebebeb;}
.square:nth-child(1) {height: 1.5em;width: 3em;-webkit-animation-delay: 1s;animation-delay: 1s;-webkit-animation-duration: 17s;animation-duration: 17s;-webkit-filter: blur(10px);}
.square:nth-child(2) {height: 1.5em;width: 3em;-webkit-animation-delay: 1s;animation-delay: 1s;-webkit-animation-duration: 17s;animation-duration: 17s;-webkit-filter: blur(10px);}
.square:nth-child(3) {height: 2em;width: 1em;-webkit-animation-delay: 1.5s;animation-delay: 1.5s;-webkit-animation-duration: 8s;animation-duration: 8s;-webkit-filter: blur(10px);}
.square:nth-child(4) {height: 1em;width: 1.5em;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;-webkit-filter: blur(10px);-webkit-animation-duration: 13s;animation-duration: 13s;}
.square:nth-child(5) {height: 1.25em;width: 2em;-webkit-animation-delay: 4s;animation-delay: 4s;-webkit-filter: blur(10px);-webkit-animation-duration: 11s;animation-duration: 11s;}
.square:nth-child(6) {height: 2.5em;width: 2em;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-filter: blur(10px);-webkit-animation-duration: 9s;animation-duration: 9s;}
.square:nth-child(7) {height: 3em;width: 2em;-webkit-filter: blur(10px);-webkit-animation-duration: 12s;animation-duration: 12s;}
.square:nth-child(8) {height: 1em;width: 3em;-webkit-animation-delay: 5s;animation-delay: 5s;-webkit-filter: blur(10px);-webkit-animation-duration: 18s;animation-duration: 18s;}
.square:nth-child(9) {height: 1.5em;width: 2em;-webkit-filter: blur(10px);-webkit-animation-duration: 9s;animation-duration: 9s;}
.square:nth-child(9) {height: 3em;width: 2.4em;-webkit-animation-delay: 6s;animation-delay: 6s;-webkit-filter: blur(10px);-webkit-animation-duration: 12s;animation-duration: 12s;}

@-webkit-keyframes squares {
	to {-webkit-transform: translateY(100%) rotate(-50deg);transform: translateY(100%) rotate(-50deg);}
	from {-webkit-transform: translateY(calc(-100vh + -100%)) rotate(20deg);transform: translateY(calc(-100vh + -100%)) rotate(20deg);}
}
@keyframes squares {
	to {-webkit-transform: translateY(100%) rotate(-50deg);transform: translateY(100%) rotate(-50deg);}
	from {-webkit-transform: translateY(calc(-100vh + -100%)) rotate(20deg);transform: translateY(calc(-100vh + -100%)) rotate(20deg);}
}


.light {position:absolute; top:65px; right:85px; width:80px; height:80px; background:url(/img/main_light.png); animation: mymove 5s; animation-delay: 15s; opacity:0; z-index:10;}
@keyframes mymove {50% {transform: rotate(180deg); opacity:1;}}