@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; background: linear-gradient( to left, #330704, #7a0100);}
header .wrap {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/kia_background.jpg)no-repeat center; height:880px; width:100%;}
#main img {position:relative; top:180px; left:35px;}
#main .main p {font-size:24px; color:#fff; position:absolute; left:685px;top:270px;}
#main .main h3 {font-size:60px; font-family: 'Noto Sans KR'; font-weight: bold; color:#fff; position:absolute; left:680px; top:310px; line-height:1.0;}
#main .design {border:2px solid #fff; position:relative; top:530px; color:#fff; font-size:20px; padding:10px 15px; left:130px;}
#main .process {position:relative; top:530px; border:2px solid #fff; font-size:20px; padding:10px 16px; color:#fff; left:150px;}
#main a:hover{background:#9e1818;}


#key {height:680px; position:relative;}
#key h3 {font-size:34px; font-weight: 800; position:absolute; top:100px; left:525px; font-weight: bold;}
#key i {display: block;  border-top:4px solid #000; width:90px; position:absolute; top:80px; left:605px;}
#key p {text-align: left; font-size:18px; line-height:1.6;margin-top:20px; font-weight: 550; position:absolute; left:530px; top:260px;}
#key img {position:relative;top:120px;}
#key a {background:#0046c6; padding:18px 30px; color:#fff; position:relative; top:498px; left:50px;}

#str { height:650px;}
#str h3 {font-size:34px; text-align: center; padding-top:80px; color:#000; font-weight: bold;}
#str p {font-size:18px; text-align: center; padding-top:10px; color:#000; line-height:1.6;}
#str img {position:relative; left:0;top:50px;}
#str i {display: block;  border-top:4px solid #a26200; width:90px; position:absolute; top:60px; left:605px;}

#con {background:url(../images/kia_gradiant.jpg)no-repeat center; height:850px;}
#con em {border-top:4px solid #9a0000; display: block; width:90px; position:relative; top:60px; left:605px;}
#con h3 {font-size:32px; font-weight: 800; color:#fff; text-align: center; padding-top:70px;}
#con p {text-align: center; padding-top:10px; color:#eee; line-height:1.5;}
#con img {position:relative; left:375px; top:35px;}
#con a {background:#000; color:#fff; padding:18px 40px; position:absolute; top:740px; left:560px;}


#style { height:700px; margin-top:150px;}
#style h3 {font-size:34px; text-align: center; font-weight: bold;}
#style strong {font-size:24px; color:#466dba; font-weight: 600; font-family: 'S-CoreDream-5Medium'; margin-top:60px; display: block; position:relative;bottom:610px;}
#style p {font-size:20px; line-height:1.6; padding-top:8px;}
#style .cl {position:absolute;top:120px;}
#style .color {margin-top:180px;}
#style .typo {margin-top:100px;}
#style h4 {font-size:24px; color:#466dba; font-weight: 800; font-family: 'S-CoreDream-5Medium'; position:relative;bottom:260px;}
#style i {display: block;  border-top:4px solid #000; width:90px; position:absolute; top:-20px; left:605px;}

#kia {height:3300px; position:relative; right:130px;top:60px;}

#insight { height:770px; margin-top:130px;}
#insight .bg {height:670px; background:#001be8; width:100%; position:relative; top:50px;}
#insight h3 {font-size:34px; font-weight: bold; text-align: left; margin-left:300px; border-top:4px solid #000; display: inline-block; padding-top:10px; width:70px;}
#insight img {height:700px; position:absolute; left:600px; top:-100px;}
#insight strong {color:#fff; font-size:28px; padding-top:120px; 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;}


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