@charset "utf-8";
/* CSS Document */

html, body { height:100%; }
body {background:url(image/MAIN.jpg) no-repeat center fixed; overflow:hidden;}

.over {overflow:hidden; }
#index {opacity:0;}
.nav {position:absolute  ; right:60px ; top:60px ; z-index:99; }
.nav ul li {float:left;  margin-right:50px;}
ul:after {content:""; clear:both; display:block;}
.main {width:100%; opacity:0;}
.main img {position:absolute; top:0;  display:inline-block;}
.main #circle {left:50%;  margin-left:-433px; top:60px;}
.main #moon, .main #moon2 {left:50%;  margin-left:-433px; top:60px;}
.main #moon2 {display:none;}
.main:hover #moon {display:none;}
.main:hover #moon2 {display:inherit;}
.main #me {left:50%;  margin-left:-203px; top:290px;}
.main #yp {right:330px; top:700px;}
@keyframes spin { 100% { transform: rotate(360deg); transform:rotate(360deg); } }

.deco img {position:absolute; top:500px; left:60px;}
.deco img:first-child {top:400px; left:242px;}

.sns a {display:block; position:absolute; bottom:60px; right:60px;}
.sns a:first-child {bottom:130px; }

/*sub1*/
#sub1 {background:url(image/submain.jpg);}
#am {opacity:0;}
#y {position:relative; left:50%; margin-left:-200px; margin-top:200px;}
#why {left:1050px;  top:400px; position:absolute;}
p {width:430px; text-align:justify; color:#a7b2c6; font-family:NotoKR-Medium !important ; font-size:18px;  position:absolute; left:1050px; top:600px; line-height:1.4 !important;}
span {color:#c7b6cf;}
.kk {  background: -webkit-linear-gradient(#debbcd, #a4afd1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}


/*sub2*/

.mouse1 {display:none;}
.cont:hover .mouse{display:none;}
.cont:hover .mouse1{display:inline-block;}

.cont {position:absolute; bottom:40px; opacity:0;}


dl {width:300px; text-align:center !important; position:absolute; }
dl dt {font-family:NotoKR-Bold; font-size:20px; color:#fff; }
dl dd {font-family:NotoKR-Medium; font-size:18px; color:#fff;  line-height:1.4; margin-top:20px; text-align:justify; }

#cont1 {left:60px; }
#cont2 {left:496px;}
#cont3 {left:972px;}
#cont4 {left:1464px;}
#cont5 {left:1930px;}

#cont1 dl { top:400px; left:50px;}
#cont2 dl { top:540px; left:75px;}
#cont3 dl { top:330px; left:80px;}
#cont4 dl { top:466px; left:50px;}
#cont5 dl { top:420px; left:50px;}

.bt {position:absolute; bottom:35px; left:50%; margin-left:-35px;}

.sc {position:absolute; right:40px; top:400px;}




.scul {top:220px; right: 80px; position:absolute;}
.scul li {float:left; list-style:none;}
.scul:after {content:""; clear:both; display:block;}
.scul li a {color:#333; font-size:20px; margin-right:60px; text-decoration:none; font-weight:700;}

.x {position:absolute; color:#fff; font-size:36px; top: 65px; right:50px; display:block;}

.scrollbar
{
	float: left;
	height: 800px;
	width: 1695px;
	background: #F5F5F5;
	overflow-y: scroll;
	margin-bottom: 25px;
	overflow-x: hidden;
	position:absolute;
	left:50%; margin-left:-850px;
	top:50%; margin-top:-400px;
}



.wrapper {
	text-align: center;
	width: 100%;
	margin: auto;
	margin-bottom: -10px;
	background:rgba(0,0,0,0.7);
	height:100%; 
	display:none;
	position:fixed;
	left:0; top:0; 
	z-index:99;
}

#style-3::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
	background-color: #000000;
}