@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; }

*{margin:0; padding:0;} li{list-style: none;} a{text-decoration: none;}
img{vertical-align: top;}
.wrap {margin:0 auto; width:1300px; 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;}
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/dreaming_main.jpg)no-repeat center; height:900px;}
#main h3 {font-size:48px; color:#fff; font-weight: 800; position:relative; top:350px; left:150px;}
#main p {color:#fff; position:relative; top:370px; left:150px; font-size:17px;}
#main span {color:#333; position:absolute;top:600px; left:150px;}

#pro {margin-top:100px; height:650px;}
#pro p {text-align: center; display: block;}
#pro h3 {text-align: center; font-size:34px; color:#fe552c; font-weight: 800; padding-top:10px;}
#pro ul {width:370px; float:left; margin:60px 0;}
#pro ul:nth-of-type(2) {margin-right:90px;}
#pro ul li:first-child {color:#ff896c; font-size:24px; font-weight: 600; margin-bottom:25px;}
#pro ul li{font-size:18px; line-height:1.8;}
#pro ul li span {font-weight: bold;}
#pro .val { height:300px; position:relative; top:80px; margin:0;}
#pro .val li {height:50px; line-height:0;}
#pro .val li:first-child {margin-bottom:7px;}
#pro .val p {background:#ccc; height:15px; width:100%; }
#pro .val li span{background:#fe552c; height:15px; width:0; position: relative; display: block;top:15px; transition:0.6s;}
#pro .val li i {font-style: normal; display:block; position:relative;left:335px; bottom:28px; font-size:16px;}
#pro a {color:#000;}





#skill {background:#ff8850; height:650px;}
#skill h3 {font-size:34px; font-weight: 800; text-align: center; padding-top:70px; color:#fff;}
#skill ul {padding-top:50px;}
#skill ul li {float:left; margin-right:20px;}
#skill ul li:last-child {margin-right:0;}
#skill ul li span {display: block; text-align: center; color:#fff; line-height:1.5; padding-top:20px;}

#who {margin-top:150px; height:550px;}
#who h3 {font-size:34px; font-weight: 800; color:#ff7702; text-align: center;}
#who ul {margin-top:35px;}
#who ul li {float:left; margin-right:50px; opacity: 0;}
#who ul li:last-child {margin-right:0;}

#hobby {height:1400px;}
#hobby .wrap {height:1600px;}
#hobby h3 {font-size:34px; font-weight: 800; color:#ff5e2f; border-bottom:4px solid #ff5e2f; position:relative; display: inline-block; left:400px;top:50px;}

#last {background:#eb5652; height:900px; margin-top:100px;}
#last h3 {font-size:28px; font-weight: 800; position:relative; color:#fff; left:400px; top:60px;}
#last ul {width:1200px; height:400px; position:relative; bottom:-150px; left:40px;}
#last ul li {display: inline-block;margin-right:30px;}
#last ul li img { filter: blur(5px);
  -webkit-filter: blur(5px);}
#last ul li:first-child {position:relative; bottom:20px;}
#last ul li:nth-child(2) {width:352px; position:relative;bottom:43px;}
#last ul li:last-child {margin-right:0;}
#last ul li p {color:#fff; font-size:22px; font-weight: bold; text-align: center; margin-top:20px;}
#last ul li span {text-align: center; display: block; line-height:1.4; color:#ebf0e9; margin-top:15px;}


/* footer 영역 */
footer {background:#161616; height:150px;}
footer p {color:#aaa; text-align: center; font-size:17px; padding-top:70px;}


.snip1585 {
  color: #fff;
  font-size: 20px;
  max-width: 330px;
    height:auto;
  position: relative;
  text-align: center;
   overflow: hidden;
    display: inline-block;
    left:100px;
    bottom:0px;
        margin-right:30px;
}
.go {position:relative; left:100px;top:0;}
.go1 {position:relative; left:100px;top:25px; height:460px; width:700px;}
.go2{position:relative; left:100px;top:78px; }
.go2 img {  filter: blur(5px);
  -webkit-filter: blur(5px);}
        .go4 img{height:372px;}        
.go5 {position:relative; top:25px; height:380px;}      
.go7 {position:relative; top:25px; height:440px;}        
.go8 {position:absolute; left:465px; bottom:220px; max-width: 695px;}   .go8 img {height:400px; width:750px;   filter: blur(5px);
  -webkit-filter: blur(5px);}    
        
.snip1585 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1585:before,
.snip1585:after {
  background-color: rgba(0,0,0, 0.3);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1;
  opacity: 0;
}

.snip1585:before {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}

.snip1585:after {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
    
}

.snip1585 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1em;
  opacity: 0;
  z-index: 2;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.snip1585 span {
  display: flex;
    justify-content: center;
    align-items: center;
  font-weight: 400;
    font-size:15px;
    color:#fff;
      border:1px solid #fff;
    width:94%; height:92%;
}

.snip1585 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
}
.snip1585:hover > img,
.snip1585.hover > img {
  opacity: 0.8;
}

.snip1585:hover:before,
.snip1585.hover:before,
.snip1585:hover:after,
.snip1585.hover:after {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.snip1585:hover figcaption,
.snip1585.hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}












@media (max-width:800px) { /* 모바일용 */
.pc {display:none !important;  }
    .wrap {width:auto;}
header { height:0;}
header .wrap { width:100%; height:0;}
header .logo img{width:30px;top:10px;left: 10px;}

.hamburger-buttun { width:35px; top:13px; left:325px;}

/* section 영역 */
#main{height:600px; background-size:cover;}
#main h3 {font-size:36px; top:220px; left:0; text-align: center;}
#main p {top:225px; left:0; font-size:16px; text-align: center;}
#main span {top:340px; left:80px; color:#eee;}

#pro {margin-top:50px; height:650px;}
#pro h3 {font-size:28px; padding-top:0;}
#pro ul {width:100%; margin:20px 0;}
#pro ul:nth-of-type(2) {margin-right:0px;}
#pro ul li:first-child {margin-bottom:10px;}
	

#skill { height:500px; margin-top:400px;}
#skill h3 {font-size:28px;padding-top:40px;}
#skill ul {padding-top:30px;}
#skill ul li { margin-right:10px;}
#skill ul li img {height:160px;}
    #skill ul li:first-of-type {margin-left:20px;}
    #skill ul li:nth-of-type(3) {margin-top:30px; margin-left:20px;}
    #skill ul li:nth-of-type(4) {margin-top:30px; }

#who {margin-top:60px; height:550px;}
#who h3 {font-size:28px;}
#who ul {margin-top:20px;}
#who ul li { margin-right:10px;}
    #who ul li img {height:200px;}
    #who ul li:nth-child(1),#who ul li:nth-child(3) {margin-left:10px;}
    #who ul li:nth-child(3) {margin-top:10px;}
    #who ul li:nth-child(2) {margin-right:0;}
#who ul li:last-child {margin-right:0; margin-top:10px;}

#last { height:1500px; margin-top:80px;}
#last h3 {font-size:22px;position: static; text-align: center; padding-top:30px; font-weight: 600;}
#last ul {width:100%; height:400px; top:30px; left:65px;}
#last ul li {margin-right:0; margin-top:20px;}
    #last ul li img {height:280px;}
#last ul li:first-child {position:static;}
#last ul li:nth-child(2) {width:auto; position:static;}
#last ul li p { font-size:18px; margin-top:10px;}
#last ul li span { margin-top:10px; font-size:14px;}

/* footer 영역 */
footer { height:100px;}
footer p {font-size:14px; padding-top:40px;}
    
    
    
}
@media (min-width:801px) { /* PC용 */
.mob {display: none !important;  }
}