@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap);

@import url(http://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);


@font-face {
    font-family: 'KCC-eunyoung';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/KCC-eunyoung-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'S-CoreDream-4Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'S-CoreDream-3Light';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'S-CoreDream-6Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.notosanskr * { 
 font-family: 'Noto Sans KR', sans-serif;
}
* {
    margin:0;
    padding:0;
}
li {
    list-style:none;
}
a {
    text-decoration: none;
    color:inherit;
}
img {
    vertical-align: top;
}
.wrap { width:1400px;}
.wrap:after, ul:after, .cl:after { content:""; clear:both; display:block;}
header {
    font-family: '';
    text-transform: uppercase;
    position:fixed; right:0; top:0;
    z-index:899;
}
header h1{ position:absolute;left:0; top:0; z-index:101; position:fixed;}
video {
	position : fixed;
	top : 0; 
	left : 0;
	min-width : 100%;
	min-height : 100%;
	z-index : -1;
}
.hamberger {
    width:100px;
    height:100px;
    position:absolute;
    right:0;
    top:0;
    background: rgba(0,0,0,0.3);
    text-align:center;
    font-family: 'Montserrat', sans-serif;
    
}
.hamburger-button {
	position: absolute;
	transition: .3s ease-in-out;
	width: 45px;
	height: 34px;
	display: block;
	top: 2rem;
	right: 3rem;
	z-index: 100;
    
}

	.hamburger-button span {
		position: absolute;
		height: 8px;
		border-radius: 4px;
		width: 100%;
		background-color: #fff;
		top: 0;
		transition: transform .2s ease-in-out, opacity .2s ease-in-out;
	}

		.hamburger-button span:nth-child(1) {
			top: 0px;
		}

		.hamburger-button span:nth-child(2),
		.hamburger-button span:nth-child(3) {
			top: 13px;
		}

		.hamburger-button span:nth-child(4) {
			top: 26px;
		}

	.hamburger-button.active span {
		background-color:#f5270c;
	}

		.hamburger-button.active span:nth-child(1),
		.hamburger-button.active span:nth-child(4) {
			opacity: 0;
		}

		.hamburger-button.active span:nth-child(2) {
			transform: rotate(45deg);
		}

		.hamburger-button.active span:nth-child(3) {
			transform: rotate(-45deg);
		}

.overlay {
    position:fixed;
    background: #fff;
    top:0;
    left:0;
    width:100%;
    height:0;
    opacity:0;
    overflow: hidden;
    display:flex;
    justify-content: center;
    align-items: center;
    transition:0.3s;
    z-index:99;
}
nav ul {
    padding:0;
    margin:0;
}
nav ul li {
    margin:1rem 0;
    opacity:1;
    margin-top:70px;
    z-index:3;
}
nav ul li a{
    color:#000;
    opacity:1;
    transition:opacity 0.2s ease;
    display:inline-block;
    -webkit-transition:0.5s;
    -moz-transition: 0.5s;
    -o-transition:0.5s;
    -ms-transition:0.5s;
    transition:0.5s;
}
nav ul li a:hover{
    opacity:1;
    color: #f5270c;
    -webkit-transform:scale(1.3,1.3);
    -moz-transform:scale(1.3,1.3);
    -o-transform:scale(1.3,1.3);
    -ms-transform:scale(1.3,1.3);
    transform:scale(1.3,1.3);
}
nav ul li .en {
    font-size:40px;
    display:block;
    font-weight:900;
}
nav ul li .ko {
    font-size:16px;
}


@keyframes fadeInLeft{
    0% { opacity :0; transform:translateX(-25%);}
    100% { opacity :1; transform:translateX(0);}
}

.overlay.visible {
    height:100%;
    opacity:1;
    visibility:visible;
}
.overlay.visible nav ul li {
    animation:fadeInLeft 0.3s ease forwards;
}
.overlay.visible nav ul li:nth-child(1) {
    animation-delay: 0.23s;
}
.overlay.visible nav ul li:nth-child(2) {
    animation-delay: 0.26s;
}
.overlay.visible nav ul li:nth-child(3) {
    animation-delay: 0.29s;
}
.overlay.visible nav ul li:nth-child(4) {
    animation-delay: 0.32s;
}

#index .text {
    text-align:center;
    color: #f5270c;
    border:10px solid #f5270c;
    padding:110px 78px;
    position:absolute;
    top:15%;
    left:30%;
    font-family: 'Montserrat', sans-serif;
}
#index .text h3{ 
    font-size:68px;
    font-weight:900;
    text-transform: uppercase;
}
#index .text p {
    margin-top:20px;
    font-size:20px;
    text-transform: uppercase;
    font-weight:800;
}
#index ul {
    margin-top:90px;
    font-size:36px;
    font-weight:900;
}
#index ul li {
    margin-top:30px;
    text-transform: uppercase;
}
#index ul li a:link, .index ul li a:visited {
    color: #f5270c;
}
#index ul li a:hover, #index ul li a:active, #index ul li a:focus {
    color: #00ff7e;
}
#index .text b{ margin-top:50px; display:block; font-weight:600; font-size:20px;}



.loader { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); 
width:100%; height:110%; background: #fff; z-index:900; display:table; }
.loader p {text-align:center;font-size:60px; font-weight:800;font-family: 'Montserrat', sans-serif; vertical-align: middle; margin:0 auto;display:table-cell; }



#section0 { color:#222;  }
#section0 h2 { text-align:left;  font-size:20px; font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif';}
#section0 h2 span:after { content:""; display:inline-block; width:510px; border:1px solid #f5270c; margin-left:30px; margin-bottom:6px; z-index:100; position:relative;} 

#section0 .wrap { position:relative;}
#section0 .text { text-align:left; margin:130px 0 0 130px; color:#222;}
#section0 .text h3 { font-size:72px; font-weight:700; font-family: 'Montserrat', sans-serif;}
#section0 .text b { margin-top:20px; font-size:18px; font-weight:550; display:block;color:#f5270c;font-family: 'Montserrat', sans-serif;}
#section0 .text p { font-size:18px; margin:80px 0 90px; line-height:1.8; font-weight:400; font-family: 'S-CoreDream-3Light';}
#section0 .text a {  display:inline-block;  font-size:20px; ; color:#222; font-family: 'Montserrat', sans-serif;}
#section0 .text ul li { float:left; margin-right:30px; }
#section0 .text ul li a {  width:200px; background: #f5270c; text-align:center; display:flex; justify-content: center; vertical-align: middle; padding:12px 0; border:3px solid #f5270c; transition:ease-out 0.2s;}
#section0 .text ul li a:hover {background: #fff; border:3px solid #00ff7e; }
#section0 .right { position:absolute; right:260px; top:0;  }
#section0 .right li { position:relative;width:514px; height:700px; overflow:hidden;}
#section0 .right li a img:hover { transform:scale(1.1); transition:1.1s; }
#section0 .explo { position:absolute; right:140px; bottom:60px; text-align:left;}
#section0 .explo p { font-size:18px; font-weight:500; color:#333; line-height:1.6;}
#section0 .explo p:last-child { margin-top:30px;}
#section0 .page {position:absolute; bottom:50px; right:100px;}
#section0 .page li { float:left; margin-right:24px; font-size:18px; color:#f5270c;}
#section0 .page li span:after {content:""; display:inline-block; width:120px; color:#f5270c; border:1px solid #f5270c;margin-left:20px; margin-bottom:6px;}


#section1 {color:#222; }
#section1 h2 { text-align:left; font-size:20px;}
#section1 h2 span:after { content:""; display:inline-block; width:510px; border:1px solid #f5270c; margin-left:38px; margin-bottom:6px; z-index:100; position:relative;} 
#section1 .wrap { position:relative; }
#section1 .text { color:#222; text-align:left; margin:100px 0 0 130px; }
#section1 .text h3 { font-size:72px; font-weight:bold; position:relative; z-index:1; display:inline-block; font-family: 'Montserrat', sans-serif;}
#section1 .text b { margin-top:20px; font-size:18px; font-weight:550; display:block;color:#f5270c;font-family: 'Montserrat', sans-serif;}
#section1 .text p { font-size:18px; margin:80px 0 90px; line-height:1.8;  font-weight:400;font-family: 'S-CoreDream-3Light';}
#section1 .text a {  display:inline-block;  font-size:20px; color:#222; font-family: 'Montserrat', sans-serif;}
#section1 .text ul li { float:left; margin-right:30px; }
#section1 .text ul li a {  width:200px; background: #f5270c; text-align:center; display:flex; justify-content: center; vertical-align: middle; padding:12px 0;  transition:ease-out 0.2s; border:3px solid #f5270c;}
#section1 .text ul li a:hover { background: #fff; border:3px solid #00ff7e;}
#section1 .right { position:absolute; right:260px; top:0; }
#section1 .right li { position:relative; width:514px; height:700px; overflow:hidden;}
#section1 .right li a img:hover { transform:scale(1.1); transition:1.1s; }
#section1 .explo { position:absolute; right:140px; bottom:60px; text-align:left;}
#section1 .explo p { font-size:18px; font-weight:500; color:#333; line-height:1.6;}
#section1 .explo p:last-child { margin-top:30px;}
#section1 .page {position:absolute; bottom:50px; right:100px;}
#section1 .page li { float:left; margin-right:24px; font-size:18px; color:#f5270c;}
#section1 .page li span:after {content:""; display:inline-block; width:120px; color:#f5270c; border:1px solid #f5270c;margin-left:20px; margin-bottom:6px;}

#section2 {color:#222;  }
#section2 h2 { text-align:left;  font-size:20px;}
#section2 h2 span:after { content:""; display:inline-block; width:510px; border:1px solid #f5270c; margin-left:40px; margin-bottom:6px; z-index:100; position:relative;} 
#section2 .wrap { position:relative;}
#section2 .text { margin:100px 0 0 130px; text-align:left; color:#222;}
#section2 .text h3 { font-size:72px; font-weight:700; font-family: 'Montserrat', sans-serif;}
#section2 h3 span { font-size:92px; font-weight:800;}
#section2 .text b { margin-top:20px; font-size:18px; font-weight:550; display:block; color:#f5270c;font-family: 'Montserrat', sans-serif;}
#section2 .text p { font-size:18px; margin:80px 0 90px; line-height:1.8; font-weight:400; font-family: 'S-CoreDream-3Light';}
#section2 .text a {  display:inline-block;  font-size:20px; ; color:#222;font-family: 'Montserrat', sans-serif; }
#section2 .text ul li { float:left; margin-right:30px;  }
#section2 .text ul li a {  width:200px; background: #f5270c; text-align:center; display:flex; justify-content: center; vertical-align: middle; padding:12px 0; border:3px solid #f5270c; transition:ease-out 0.2s;}
#section2 .text ul li a:hover { background: #fff; border:3px solid #00ff7e; }
#section2 .right { position:absolute; right:260px; top:0;  }
#section2 .right li { position:relative; width:514px; height:700px; overflow:hidden;}
#section2 .right li a img { width:514px; height:700px;}
#section2 .right li a img:hover { transform:scale(1.1); transition:1.1s; }
#section2 .explo { position:absolute; right:140px; bottom:60px; text-align:left;}
#section2 .explo p { font-size:18px; font-weight:500; color:#333; line-height:1.6;}
#section2 .explo p:last-child { margin-top:30px;}
#section2 .page {position:absolute; bottom:50px; right:100px;}
#section2 .page li { float:left; margin-right:24px; font-size:18px; color:#f5270c;}
#section2 .page li span:after {content:""; display:inline-block; width:120px; color:#f5270c; border:1px solid #f5270c;margin-left:20px; margin-bottom:6px;}


#section3 {color:#222; }
#section3 h2 { text-align:left;  font-size:20px;}
#section3 h2 span:after { content:""; display:inline-block; width:520px; border:1px solid #f5270c; margin-left:40px; margin-bottom:6px; z-index:100; position:relative;} 
#section3 .wrap { position:relative;}
#section3 .text {  margin:100px 0 0 130px; text-align:left; color:#222;}
#section3 .text h3 { font-size:66px; font-weight:700; position:relative; z-index:1; display:inline-block;font-family: 'Montserrat', sans-serif;}
#section3 .text h3 span{ color:#fff;}
#section3 .text b { margin-top:20px; font-size:18px; font-weight:550; display:block; color:#f5270c;font-family: 'Montserrat', sans-serif;}
#section3 .text p { font-size:18px; margin:80px 0 90px; line-height:1.8; font-weight:400; font-family: 'S-CoreDream-3Light';}
#section3 .text a {  display:inline-block;  font-size:20px; ; color:#222; font-family: 'Montserrat', sans-serif;}
#section3 .text ul li { float:left; margin-right:30px; }
#section3 .text ul li a {  width:200px; background: #f5270c; text-align:center; display:flex; justify-content: center; vertical-align: middle; padding:12px 0; border:3px solid #f5270c;transition:ease-out 0.2s;}
#section3 .text ul li a:hover {background: #fff; border:3px solid #00ff7e;}
#section3 .right { position:absolute; right:250px; top:0; }
#section3 .right li { position:relative;  width:514px; height:700px; overflow:hidden;}
#section3 .right li a img:hover { transform:scale(1.1); transition:1.1s; }
#section3 .explo { position:absolute; right:120px; bottom:60px; text-align:left;}
#section3 .explo p { font-size:18px; font-weight:500; color:#333; line-height:1.6;}
#section3 .explo p:last-child { margin-top:30px;}
#section3 .page {position:absolute; bottom:50px; right:100px;}
#section3 .page li { float:left; margin-right:24px; font-size:18px; color:#f5270c;}
#section3 .page li span:after {content:""; display:inline-block; width:120px; color:#f5270c; border:1px solid #f5270c;margin-left:20px; margin-bottom:6px;}

#section4 { color:#222;  }
#section4 h2 { text-align:left; font-size:20px;}
#section4 h2 span:after { content:""; display:inline-block; width:510px; border:1px solid #f5270c; margin-left:40px; margin-bottom:6px; z-index:100; position:relative;} 
#section4 .wrap { position:relative;}
#section4 .text {margin:100px 0 0 130px; text-align:left;  color:#222;}
#section4 .text h3 { font-size:72px; font-weight:700; position:relative; z-index:1; display:inline-block;font-family: 'Montserrat', sans-serif;}
#section4 h3 span { font-size:92px; font-weight:800;}
#section4 .text b { margin-top:20px; font-size:18px; font-weight:550; display:block; color:#f5270c;font-family: 'Montserrat', sans-serif;}
#section4 .text p { font-size:18px; margin:80px 0 90px; line-height:1.8; font-weight:400; font-family: 'S-CoreDream-3Light';}
#section4 .text a {  display:inline-block;  font-size:20px; ; color:#222;font-family: 'Montserrat', sans-serif; }
#section4 .text ul li { float:left; margin-right:30px; }
#section4 .text ul li a {  width:200px; background: #f5270c; text-align:center; display:flex; justify-content: center; vertical-align: middle; padding:12px 0; border:3px solid #f5270c; transition:ease-out 0.2s;}
#section4 .text ul li a:hover {background: #fff; border:3px solid #00ff7e; }
#section4 .right { position:absolute; right:260px; top:0;  }
#section4 .right li { position:relative; width:514px; height:700px; overflow:hidden;}
#section4 .right li a img:hover { transform:scale(1.1); transition:1.1s;}
#section4 .explo { position:absolute; right:140px; bottom:60px; text-align:left;}
#section4 .explo p { font-size:18px; font-weight:500; color:#333; line-height:1.6;}
#section4 .explo p:last-child { margin-top:30px;}
#section4 .page {position:absolute; bottom:50px; right:100px;}
#section4 .page li { float:left; margin-right:24px; font-size:18px; color:#f5270c;}
#section4 .page li span:after {content:""; display:inline-block; width:120px; color:#f5270c; border:1px solid #f5270c;margin-left:20px; margin-bottom:6px;}


#main .wrap { width:1200px; }
#main .wrap .textrot img { position:absolute; top:-130px; right:-100px; width:300px; z-index:2;}

#main .wrap .textrot img{animation: 10s welcome linear infinite;}
@keyframes welcome {
    0% { transform: rotate(0deg);}
    100% { transform:rotate(360deg);}
}
#main .text { margin-top:200px;}
#main h3 {text-align:left; color:#f5270c; font-size:70px; font-weight:990; line-height:1.2; margin-top:60px; display:inline-block; font-family: 'Montserrat', sans-serif;}
#main h3 span { background:#00ff7e; border-radius: 100%; width:14px; height:14px;display:inline-block;}
#main .me { position:absolute; right:0; top:-20px;}
#main #continue {display: block;position: absolute;bottom: -100px;left: calc(50% - 44px); }
#main #continue svg { display:block; width:600px; height:110px;  font-size:90px; font-weight:900; margin-top:30px; margin-left:-220px; font-family: 'Montserrat', sans-serif;}
#main #continue svg text { fill:none; stroke:#00ff7e; stroke-width:2px;}
#main #continueButton {color: inherit;display: block;width: 88px;height: 88px;position: relative;letter-spacing: .25em;text-align: center;text-transform: uppercase;font-size: 11px;}
#main .circle span { display:block; width:780px; height:750px; background: #f8f5f2; border-radius: 100%; position:absolute; left:-420px; top:500px;}



#about h3 { text-align:left; font-size:26px;  font-family: 'Montserrat', sans-serif; position:absolute; top:228px; left:90px; font-weight:600; color:#222; }
#about .me { text-align:center; margin-top:100px;}
#about .right { position:absolute; right:100px; top:60px; text-align:center; color: #222; margin-top:80px; font-family: 'S-CoreDream-3Light';}
#about .right b { font-size:20px; font-weight:normal; margin-left:-20px;display:inline-block;}
#about .right span:after {  display:block; content:""; height:220px; width:1px; background: #f5270c; margin:30px 0 30px 130px; text-align:center;}
#about .right p { font-size:18px; font-weight:normal;  margin-left:-20px; line-height:1.6;}

#who h2 { font-size:140px; color:#f8f5f2; text-align:right;font-weight:800;  font-family: 'Montserrat', sans-serif;}
#who h3 { text-align:center; margin-top:-64px;font-family: 'KCC-eunyoung'; color:#00ff7e; font-weight:900; font-size:36px; }
#who .infp { margin-top:10px;}
#who .infp li{ margin-top:28px; font-family: 'Montserrat', sans-serif; }
#who .infp li h4 { font-size:28px; color:#f5270c; font-weight:900;}
#who .infp li p {font-size:20px; font-weight:900; color:#222; margin:8px 0;}
#who .infp li span { display:block; font-size:16px; color:#222; font-family: 'S-CoreDream-4Regular';font-weight:normal;}
#who .right { position:absolute; right:0; top:180px; }


#skill { padding-top:60px;}
#skill svg {  display:block; width:600px; height:110px;  font-size:90px; font-weight:900; margin:30px 0 60px; font-family: 'Montserrat', sans-serif; }
#skill svg text{ fill:none; stroke:#00ff7e; stroke-width:2px;}
#skill ul li {float:left; margin-right:28px;}
#skill ul li:last-child { margin-right:0;}
#skill ul li a {display:block; position:relative;}
#skill ul li a img { position:relative; text-align:center;}
#skill ul li div { position:absolute; left:0; top:0; width:100%; height:0; color:#222; font-size:16px;  align-items: center;  opacity: 0; transition:0.4s; text-align:center; background:rgba(27, 255, 160, 0.7);}
#skill ul li div h4 { font-size:24px; font-weight:600; color:#222; display:block; padding:16px 0;}
#skill ul li div p { font-size:16px; line-height:1.6; font-weight:normal;}
#skill ul li div span { display:block; font-size:28px; font-weight:normal;}

#skill ul li a:hover div{ opacity:1; height:100%;}
#skill ul li div {padding-top:140px; box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif;}



#last { margin-bottom:80px;}
#last .container { text-align:center; }
#last .btn { width:260px; height:60px; border:none; background: #f5270c; color:#222; box-shadow: inset 0 0 0 0 #00ff7e; transition:ease-out 0.3s;
outline:none; }
#last .btn:hover { box-shadow:inset 260px 0 0 0 #00ff7e; cursor: pointer; color:#fff;} 
#last .btn a { font-size:26px; display:block; font-family: 'Montserrat', sans-serif; font-weight:normal;}


#bubu .img{ background: url(../images/bubumain.jpg) no-repeat center/cover ;}

#overview {background: url(../images/overview.jpg)no-repeat center/cover; width:1920px; height:400px; }
#overview .wrap { width:1200px; margin:0 auto; padding:100px 0;}
#overview h2{ font-size:28px; color:#fff; }
#overview p { font-size:19px;  color: #fff; margin-top:40px; line-height:1.6; font-weight:600;}
#overview span { display:inline-block; margin-top:20px; font-size:18px; font-weight:300; color:#fff;}


#sagua .wrap { width:1200px; margin:0 auto;}
#sagua ul { padding:30px 60px 20px;}
#sagua ul li { float:left; margin-right:30px; }
#sagua ul li:last-child { margin-right:0;}
#sagua ul li img { width:520px;  box-shadow: 3px 2px 5px 3px  rgba(0,0,0,0.5);}


#gohome { background: #ebe8e5; max-width:1920px;}


#contact { background: url(../images/aboutbg.jpg) no-repeat ; height:1080px;font-family: 'Montserrat', sans-serif;}
#contact .wrap { width:1200px; margin:0 auto; padding:160px 0 0 380px; position:relative;}
#contact .wrap h3 { font-size:60px; color:#00ff7e; margin-bottom:46px;}
#contact .wrap .name { font-family: 'S-CoreDream-6Bold'; font-size:24px;}
#contact .wrap p span {font-family: 'Montserrat', sans-serif; }
#contact .wrap ul li {font-size:20px; font-weight:normal;color:#222; margin-bottom:30px;}
#contact .wrap .text { position:absolute; right:3%; top:10%; }
#contact .wrap .me { position:absolute; right:33%; top:110%;}

#contact .wrap .text img {animation: 10s contactme linear infinite;}
@keyframes contactme {
    0% { transform: rotate(0deg);}
    100% { transform:rotate(360deg);}
}