@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;width:100%; margin:0 auto; height:70px;}
header .wrap {background: linear-gradient( to left, #f16663, #f69167); width:1920px; height:70px;}
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;}

#main {background:url(../images/gradiant.jpg)no-repeat center; height:900px; width:1920px;}
#main img {position:relative; top:225px;}
#main .main p {font-size:24px; color:#fff; position:absolute; left:750px;top:295px;}
#main .main h3 {font-size:60px; font-family: 'Noto Sans KR'; font-weight: bold; color:#fff; position:absolute; left:748px; top:320px; line-height:1.0;}
#main .design {border:2px solid #fff; position:relative; top:530px; color:#fff; font-size:20px; padding:10px 15px; left:83px;}
#main .process {position:relative; top:530px; border:2px solid #fff; font-size:20px; padding:10px 16px; color:#fff; left:100px;}
#main a:hover{background:#f68e69;}


#key {height:485px;}
#key h3 {font-size:34px; font-weight: 800; text-align: center; padding-top:150px; font-weight: bold;}
#key i {display: block;  border-top:4px solid #f56b84; width:90px; position:absolute; top:135px; left:605px;}
#key p {text-align: center; font-size:20px; line-height:1.6;margin-top:20px; font-weight: 550;}

#str {background:#fcb34a; height:630px;}
#str h3 {font-size:34px; text-align: center; padding-top:80px; color:#fff; font-weight: bold;}
#str p {font-size:18px; text-align: center; padding-top:10px; color:#fff; line-height:1.6;}
#str img {position:relative; left:110px;top:30px;}
#str i {display: block;  border-top:4px solid #47b3e4; width:90px; position:absolute; top:60px; left:605px;}

#logo { height:1600px; margin-top:70px;}
#logo h3 {font-size:34px; margin-bottom:30px; color:#385a8a;}
#logo p {font-size:18px; line-height:1.6; position:absolute; right:250px; top:130px;}
#logo .per {margin-top:100px; position:relative; right:40px;}
#logo i {display: block; background:#fff; width:130px; height:130px; border-radius: 100%; position:absolute; top:955px; left:370px;}

#style { height:700px; margin-top:200px;}
#style h3 {font-size:34px; text-align: center; margin-top:100px; font-weight: bold;}
#style span {font-size:24px; color:#466dba; font-weight: 600; font-family: 'S-CoreDream-5Medium'; margin-top:60px; display: block;}
#style p {font-size:18px; line-height:1.6; padding-top:8px; font-weight: bold;}
#style .color {margin-top:35px;}
#style i {font-size:24px; color:#466dba; font-weight: 600; display: block; font-style:normal; font-family: 'S-CoreDream-5Medium'; margin-top:40px;}
#style img {margin-top:35px;}
#style em {display: inline-block; border-top:4px solid #f5f967; width:90px; position:absolute; top:-15px; left:605px;}

#insight { height:800px; margin-top:100px;}
#insight .bg {height:670px; background:#75cdd7; width:100%; position:relative; top:50px;}
#insight h3 {font-size:34px; font-weight: bold; text-align: left; margin-left:300px; border-top:4px solid #97ca6e; display: inline-block; padding-top:10px; width:70px;}
#insight img {height:700px; position:absolute; left:553px; top:-100px;}
#insight strong {color:#fff; font-size:28px; padding-top:100px; display: block;}
#insight p {color:#fff; font-size:17px; line-height:1.7; margin-top:20px;}
#insight h4 {color:#fff; font-size:28px; padding-top:70px;}

#ep {height:800px;margin-top:100px;}
#ep em {border-top:4px solid #99aace; display:block; width:90px; position: relative; left:600px;bottom:10px;}
#ep h3 {font-size:34px; text-align: center;}
#ep h4 {color:#196fbc;font-size:28px; font-weight: 700; position:relative; left:510px; top:55px;}
#ep nav {border:8px solid #faed25; width:900px; height:510px;  position:relative; left:300px;top:70px; display: flex; align-items: center; justify-content: center;}
#ep p {font-size:18px; line-height:1.6; text-align: left;}
#ep span {font-size:20px; display:block; margin-top:30px; font-weight: 600;}
#ep span strong {font-weight: 800;}
#ep img { width:480px; height:520px; position:absolute;top:70px;left:0; z-index: 2; filter: blur(5px);
  -webkit-filter: blur(5px);}


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