@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); .notosanskr * { font-family: 'Noto Sans KR', sans-serif; }

@font-face { font-family: 'S-CoreDream-5Medium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); font-weight: normal; font-style: normal; }

@font-face { font-family: 'NanumSquareRound'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff'); font-weight: normal; font-style: normal; }

*{margin:0; padding:0;} li{list-style: none;} a{text-decoration: none;}
img{vertical-align: top;}
.wrap {margin:0 auto; width:1200px; position:relative;}
.wrap:after, ul:after {display: block; content: ""; clear: both;}
html{width: 100%; height:100%; overflow-x:hidden; }
body {font-family: 'NanumSquare'; width:100%; height:100%;}
h2 {position:absolute; left:-9999px;}
section {width:100%; height:100%;}

/* header 영역 */
header { transition:0.3s; height:0; z-index: 99; position:relative; background:url(../images/his_main.jpg)no-repeat center;}
header .wrap { width:1920px; height:0; }
header .logo img{width:35px; position:relative; top:29px;left: 350px;}
header #gnb {position:absolute; left:1000px; top:35px;}
header #gnb li {float:left; margin-right:50px; font-size:22px; font-weight: bold;}
header #gnb li a{color:#fff; opacity: 0.85;}
header #gnb li a:hover{opacity: 3; font-weight: bold;}

.hamburger-buttun {position:absolute; transition:.3s ease-in-out; width:35px; height:30px; z-index: 100; top:30px; left:1470px;}
        .hamburger-buttun.active span:nth-child(1), .hamburger-buttun.active span:nth-child(4) {opacity: 0;}
        .hamburger-buttun span {position:absolute; height:5px; border-radius: 2px; width:100%; background:#fff; top:0;transition:0.3s;}
        .hamburger-buttun span:nth-child(1) {top:0;}
        .hamburger-buttun span:nth-child(2),.hamburger-buttun span:nth-child(3) {top:13px;}
        .hamburger-buttun.active span:nth-child(2) {transform: rotate(45deg);}
        .hamburger-buttun.active span:nth-child(3) {transform:rotate(-45deg);}
        .hamburger-buttun span:nth-child(4) {top:26px;}
        
        .overlay {position:fixed; background:#3f71a9; top:0; left:0;width:100%; height:0; opacity: 0;visibility:hidden; display: flex; justify-content: center; align-items: center; transition:0.3s; z-index: 5;}
        nav ul li {margin:3.5rem 0; font-size:26px; opacity: 0;}
        nav ul li a {color:#fff; opacity: 0.75; transition:opacity 0.2s ease;}
        nav ul li a:hover {opacity:1;}
        nav ul li span {display: block; font-size:17px; padding-top:12px; opacity: 0.75;color:#eee;}
        nav ul li span:hover {opacity:1;}    

        @keyframes fadeInLeft {
            0% {opacity:0; transform:translateX(-25%);}
            100% {opacity:1; transform:translateX(0);}
        }
        .overlay.visible {
            height:100%;
            opacity:.95;
            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.27s;}
        .overlay.visible nav ul li:nth-child(3) {animation-delay: 0.30s;}
        .overlay.visible nav ul li:nth-child(4) {animation-delay: 0.33s;}

#navigation{ 
    position:absolute; 
	top:400px;
	right:150px;   
	font-size:32px;
    z-index: 99;
    line-height:1.8;
}	   		
#navigation li a { color:#000;}
#navigation li a:hover {color:#fff;}

/* section 영역 */
#main {background:url(../images/his_main.jpg)no-repeat center; height:800px;}
#main h3 {font-size:60px; color:#fff; text-align: left; position:relative; top:280px; left:0; font-family: 'S-CoreDream-5Medium';}
#main .about {position:relative; left:950px; top:-36px;}
#main a {background:#fff; height:70px; width:185px; display: block; line-height:70px; text-align: center; font-size:22px; font-weight: bold;}
#main .go {position:relative; top:125px; left:370px; color:#005aff;}
#main .go:hover {background:#ffc602; color:#fff;}
#main .me {position:relative;bottom:194px; left:650px; color:#ffc602;}
#main .me:hover {background:#005aff; color:#fff;}

#history {margin-top:100px; font-family: 'NanumSquareRound';}
#history .award {position:relative; width:1200px;}
#history ul {padding-top:20px;}
#history ul li {float:left; margin-right:20px; line-height:1.5; font-weight: 500; }
#history ul li img{ filter: blur(5px);
  -webkit-filter: blur(5px);}
#history ul li:last-child {margin-right:0; position:relative; left:780px; bottom:180px;}

#history .dance1 {position:relative; bottom:0px; left:73px;}
#history .dance1 img { filter: blur(5px);
  -webkit-filter: blur(5px);}
#history .dance1 h3 {font-size:28px; position:absolute; top:100px; left:0;}
#history .dance1 p{position:absolute; top:170px; left:0; text-align: right; line-height:1.6;}

#history .dance2 {position:absolute; top:1420px; left:0; z-index: 3;}
#history .dance2 img { filter: blur(5px);
  -webkit-filter: blur(5px);}
#history .dance2 h3 {font-size:28px; position:absolute; top:210px; right:0;}
#history .dance2 p {position:absolute; top:270px; right:0px; text-align: left; line-height:1.6;}

#history .dance3 {position:relative; top:280px; left:270px;}
#history .dance3 img { filter: blur(5px);
  -webkit-filter: blur(5px);}
#history .dance3 h3 {font-size:28px; position:absolute; top:175px; left:0;}
#history .dance3 p {position:absolute; top:240px; left:-150px; text-align: right; line-height: 1.5;}

#history .ser {margin-top:400px;}
#history .ser .pride {width:1200px; margin-left:8px;  filter: blur(5px);
  -webkit-filter: blur(5px);}
#history .ser span {position:relative;left:25px; bottom:90px; line-height:1.6;}

#history .dream {margin-left:20px;}
#history .dream h3 {position:absolute; top:100px; right:300px; font-size:28px;}
#history .dream p {position:absolute; top:200px; line-height:1.6; right:65px;}
#history .dream i {background:#faa; width:100px; height:100px;  filter:  display: block; border-radius: 100%; position:absolute; right:260px; bottom:175px;}


footer {background:#161616; height:150px; position:relative;top:3600px;}
footer p {color:#aaa; font-size:16px; padding-top:70px;}




@media (max-width:800px) { /* 모바일용 */
.pc {display:none !important;  }
    body{width:100%;}
    .wrap {width:auto;}
    header { transition:0.3s;width:100%; margin:0 auto; height:60px; background:url(../images/his_main.jpg)no-repeat center;}
    header .logo img{width:35px; position:relative; top:10px;left:15px;}
    .hamburger-buttun {width:34px; height:30px; z-index: 100; top:12px; left:320px;}

#main { height:500px;}
#main h3 {font-size:36px; top:130px; left:30px;}
#main .about {left:220px; top:-70px;}
#main a {height:50px; width:137px; line-height:50px; font-size:18px;}
#main .go {top:200px; left:30px;}
#main .me {bottom:0; left:220px; }

#history {margin-top:50px;}
#history .award {width:100%;}
#history ul {padding-top:30px;}
#history ul li {margin-right:0; font-size:14px;}
#history ul li:last-child { left:5px; bottom:-20px;}

#history .ser {margin-top:60px;}
#history .ser .pride {width:100%; margin-left:0; margin-bottom:20px;}
#history .ser span {font-size:14px;left:10px; bottom:0;}

#history .dream {margin-left:0; margin-top:100px;}
    #history .dream img {width:580px;}
#history .dream h3 {top:-40px; right:10px; font-size:24px;}
#history .dream p { top:290px;left:60px; font-size:14px; text-align: center; }
    
    
footer {height:100px;top:1170px;}
footer p {font-size:14px; padding-top:45px; margin-left:30px;}    
    
@media (min-width:801px) { /* PC용 */
.mob {display:none !important;  }
}