html, body {padding:0;margin:0;}
body {font:13px 'Nanum Gothic', sans-serif;font-weight:100;line-height:1.4em;}
html, body, header, section, footer, ul, li, div  {box-sizing:border-box;} 
header {position:fixed;width:100%;height:100px;top:0;left:0;z-index:999;box-sizing:border-box;}
section {min-height:50vh;margin:0;padding:3vh 0;color:#fff;}
nav {position:relative;z-index:999;width:100%;max-width:1300px;margin:0 auto;overflow:hidden;height:100%;}
nav .logo {position:absolute;left:0;top:10px;}
nav .logo img {width:200px;}
nav ul.navi {overflow:hidden;list-style:none;float:right;}
nav ul.navi li {width:auto;float:left;text-align:center;padding:20px;}
nav ul.navi li a {color:#fff;text-decoration:none;}
nav ul.navi li a:hover {background:rgba(255,255,255,.2)}
nav .mbtn {display:none;}

@media screen and (min-width:769px) {
   nav ul.navi {display:block !important;}
}
/*sticky*/
header.sticky {background:rgba(0,0,0,.7);height:45px;position:fixed;top:0;left:0;width:100%;animation:slide-down 0.7s;}
        @keyframes slide-down {
            0% {
                opacity: 0;
                transform: translateY(-100%);
            } 
            100% {
                opacity: 0.9;
                transform: translateY(0);
            } 
        }

header.sticky nav .logo {top:5px;}
header.sticky nav .logo img {width:120px;}
header.sticky ul.navi {margin:0;padding:0;}
header.sticky ul.navi li {padding: 15px 20px 0 20px !important;}



.main-bg  {background-image:url(/images/bg_main01.jpg);background-position:center top;background-repeat: no-repeat;background-size:cover;height:100vh;position:fixed;z-index:0;top:0;left:0;width:100%;}

.main01-home {background:none;height:100vh;width:100%;z-index:9;position:relative;}
.main02-about {background:url(/images/bg_main02.jpg) center top;background-size:cover;position:relative;}
.main03-store {background:#303030;position:relative;z-index:1;}
.main04-space {height:50vh;background:none;}
.main05-service {position:relative;background:#303030;}
.main06-space {height:50vh;background:none;}
.main07-banner {position:relative;background:url(/images/bg_main07.jpg) center top;background-size:cover;min-height:100vh;l}
.main08-contact {background:url(/images/bg_main08.jpg) center top no-repeat;background-size:cover;position:relative;/*background:#2b4173;*/}
.main09-service {position:relative;background:#303030;}



.cont {width:1300px;margin:0 auto;position:relative;max-width:100%;}
h1 {font-weight:bold;font-size:3em;line-height:1em;font-family:'Noto Sans KR', sans-serif;}
h2 {font-size:3em;text-align:center;font-size:4em;margin-top:12%;line-height:1em;font-family:'Noto Sans KR', sans-serif;font-weight:700;}



/*01 home*/
ul.main01cont {width:60%;overflow:hidden;list-style:none;padding:0;margin:45vh 0 0 40%;}
ul.main01cont li {width:100%;margin-bottom:10px;background:url(/images/bg_title.png) left top no-repeat;}
ul.main01cont li:nth-child(1)  {font-weight:bold;font-size:2em;line-height:1em;animation:left-slide 0.5s;}
ul.main01cont li:nth-child(1) a {color:#fff;text-decoration:none;}

@keyframes blink {
 0% {color: white;}
 50% {color: black;}
}
 
/* for Chrome, Safari */
@-webkit-keyframes blink {
 0% {color: white;}
 50% {color: black;}
}
 
/* blink CSS 브라우저 별로 각각 애니메이션을 지정해 주어야 동작한다. */
ul.main01cont li:nth-child(1) a {
 animation: blink 1s step-end infinite;
 -webkit-animation: blink 1s step-end infinite;
}



ul.main01cont li:nth-child(1) a:hover {color:#000;text-decoration:none;}
ul.main01cont li:nth-child(2)  {font-weight:bold;font-size:4em;line-height:0.8em;font-family:'Noto Sans KR', sans-serif;animation:left-slide 0.1s;}
ul.main01cont li:nth-child(3) {font-size:2em;font-weight:bold;line-height:1em;animation:left-slide 1.5s;}
ul.main01cont li:nth-child(4) {font-size:1.2em;line-height:2em;animation:left-slide 2s;}

        @keyframes left-slide {
            0% {
                opacity: 0;
                transform: translateX(200%);
            } 
            100% {
                opacity: 0.9;
                transform: translateX(0);
            } 
        }



/*02 about*/
.about-box01 {width:30%;}
.about-box01 img {width:100%;margin:30px auto 0 auto;display:block;}
.about-box02 {padding-left:25px;width:28%;font-weight:400;line-height:1.4em;margin-bottom:40px;margin-top:10px;text-align:justify;}


/*03 store*/
ul.main03cont {width:70%;overflow:hidden;list-style:none;padding:0;margin:0;}
ul.main03cont li {width:50%;float:left;padding:10px 40px 20px 0;}
ul.main03cont li img {width:100%;margin-bottom:20px;}
.main03-store strong {font-size:1.1em;}
.main03-store p {margin-top:10px;}

/*05 service*/
ul.main05cont {width:80%;overflow:hidden;list-style:none;padding:0;margin:0;}
ul.main05cont li {width:33.3%;float:left;padding:10px 40px 20px 0;}
ul.main05cont li img {width:100%;margin-bottom:20px;}
img.sns {width:40px;margin:0 5px;}


/*07 banner*/
ul.main07cont {width:60%;overflow:hidden;list-style:none;padding:0;margin:50vh 0 0 40%;}
ul.main07cont li {width:100%;margin-bottom:10px;background:url(/images/bg_title.png) left top no-repeat;}
ul.main07cont li:nth-child(1)  {font-weight:bold;font-size:4em;line-height:0.8em;font-family:'Noto Sans KR', sans-serif;animation:left-slide 0.5s;}
ul.main07cont li:nth-child(2) {font-size:2em;font-weight:bold;line-height:1em;}
ul.main07cont li:nth-child(3) {font-size:1.2em;line-height:2em;}

/*08 contact*/
ul.main08cont {width:100%;overflow:hidden;list-style:none;padding:0;margin:0;}
ul.main08cont li {float:left;}
ul.main08cont li:first-child {width:35%;text-align:right;padding: 27px 30px 0 0;}
ul.main08cont li:last-child {width:65%;line-height:1.5em;}
ul.main08cont li img {width:50%;margin-bottom:20px;}
ul.main08cont h3 {font-size:1.6em;}
ul.main08cont b {padding:0;margin:0 20px 0 0;}

/*09 service*/
ul.main09cont {width:100%;overflow:hidden;list-style:none;padding:0;margin:0;}
ul.main09cont li {width:33.3%;float:left;padding:10px 40px 20px 0;}
ul.main09cont li img {width:100%;margin-bottom:20px;}
.main03-store strong {font-size:1.1em;}
.main03-store p {margin-top:10px;}



.mail {padding:0;color:#fff;width:70%;}
.mail input {background:none;border-bottom:1px solid #fff;border-left:none;border-top:none;border-right:0;padding:10px;width:61.5%;outline:none;color:#fff;}
.mail label {width:50px;text-align:left;display:inline-block;padding:0;}
.mail textarea {width:70%;height:150px;background:none;border:1px solid #fff;padding:10px;margin:20px 0 0 0;color:#fff;}

 .mailbtn {width:20%;background:none;;padding:15px 10px;color:#444;margin:15px 0 0 0;display:block;background:#f2344b;font-weight:500;border:none;color:#fff;}
.mailbtn:hover {background:#fff;color:#444;cursor:pointer;}

.map {width:52%;margin-top:30px;margin-bottom:50px;}


@media screen and (max-width:768px) {
.body {font-size:12px;}
header {position:fixed;width:100%;height:40px;top:0;left:0;z-index:999;box-sizing:border-box;background:rgba(0,0,0,.8);}
nav {height:100%;}
nav .logo {z-index:999;top:7px;left:5px;}
nav .logo  img {height:25px;width:auto;}

nav .mbtn {position:absolute;right:10px;top:10px;width:25px;height:28px;;z-index:9999;display:block;}
nav .mbtn:hover {cursor:pointer;}
nav .mbtn .btn-line {position:relative;width:100%;height:2px;border-radius:2px;background:#fff;}
nav .mbtn .btn-line::before {content:'';position:absolute;width:22px;height:2px;border-radius:2px;background:#fff;top:8px;left:3px;transform: rotate( 0deg );transition: all ease 0.2s;}
nav .mbtn .btn-line::after {content:'';position:absolute;width:25px;height:2px;border-radius:2px;background:#fff;top:16px;left:0;transform: rotate( 0deg );transition: all ease 0.2s;}
nav .mbtn.active .btn-line {background:none;}
nav .mbtn.active .btn-line::before {transform: rotate( 45deg );width:25px;	transition: all ease 0.2s;top:8px;left:2px;}
nav .mbtn.active .btn-line::after {transform: rotate( -45deg );	transition: all ease 0.2s;top:8px;left:2px;}

nav ul.navi {display:none;width:100%;}
nav ul.navi {width:100%;position:fixed;top:40px;left:0;z-index:9999;background:#303030;margin:0;padding:0;}
nav ul.navi li {width:100%;padding:20px 0;text-align:center;}

ul.main01cont {width:95%;margin:30vh auto 0 auto;}
ul.main01cont li:nth-child(1)  {font-size:2em;line-height:1.5em;}
ul.main01cont li:nth-child(2) {font-size:1.5em;}
ul.main01cont li:nth-child(3) {font-size:1em;line-height:1.5em;}

ul.main03cont {width:100%;margin:0;}
ul.main03cont li {width:100%;padding:10px !important;}

ul.main05cont {width:100%;margin:0;}
ul.main05cont li {width:100%;padding:10px !important;}

ul.main07cont {width:95%;margin:30vh auto 0 auto;}
.about-box01  {width:100%;padding:0 10%;}
.about-box02  {width:100%;padding:5%;}

ul.main08cont {width:100%;margin:0;}
ul.main08cont li {width:100% !important;padding:10px !important;}
ul.main08cont li img {display:block;margin:0 auto;width:80%;}

ul.main09cont li {width:100%;float:left;padding:10px !important;}


.mail {padding:0;color:#fff;width:100%;}
.mail input {background:none;border-bottom:1px solid #fff;border-left:none;border-top:none;border-right:0;padding:5px 10px;width:70%;outline:none;color:#fff;}
.mail label {width:50px;text-align:left;display:inline-block;padding:0;}
.mail textarea {width:70%;height:150px;background:none;border:1px solid #fff;padding:10px;margin-left:50px;color:#fff;}

.mailbtn {width:30%;background:none;padding:5px 10px;margin:15px 0 0 50px;display:block;background:#f2344b;font-weight:500;border:none;color:#fff;}
.mailbtn:hover {background:none;;color:#444;cursor:pointer;}

.map {width:80%;margin:30px 0 0 50px;padding:10px;}




h1 {font-weight:bold;font-size:2em;line-height:1.5em;}
h2 {font-size:2.5em;text-align:center;font-size:2em;margin-top:12%;line-height:1em;font-family:'Noto Sans KR', sans-serif;font-weight:700;}


}