@charset "utf-8";
/* font-family: 'NanumSquare', sans-serif; */
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
/* font-family: 'Noto Sans KR', sans-serif; */
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');

* { margin: 0; padding: 0; list-style: none; box-sizing: border-box; word-break: keep-all; transition: all .3s ease-in-out; font-family: 'NanumSquare', sans-serif; font-size: 15px; line-height: 1.5em; letter-spacing: -0.025em; color: #777; } 
body { background: #fff; } 
h1 { font-size: 40px; /*line-height: 1.5em;*/ line-height: 1.5em; color: #333;  } 
h2 { font-size: 24px; line-height: 1.5em; color: #333; } 
a { display: block; }
a:link { text-decoration: none; } 
a:visited { color: #888; } 
ul li { list-style: none; } 
section { position: relative; padding: 100px 0; }

.c1280 { width: 1280px; margin: 0 auto; }
section.c1400 { margin: 130px auto; }
.tit { margin-bottom: 60px; }
.tit p { font-size: 18px; font-weight: 700; color: #3997d2; opacity: 0.4; }
.tit h1 { margin: 10px 0;  color: #3997d2; }
.tit> span { display: block; width: 30px; height: 1px; background: #3997d2;}

header { position: fixed; top: 0; left: 0;  width: 100%; padding: 20px 0; z-index: 9999; background: #fff; }
header> div { display: flex; justify-content: space-between; align-items: center; }
header div .logo { width: 160px;  }
header div .logo img { width: 100%; object-fit: cover; vertical-align: middle; }
header div .menubox ul { display: flex; align-items: center; }
header div .menubox ul li a { color: #333; padding: 0 40px; font-size: 18px; font-weight: bold; }
header div .menubox ul li.active a { color: #3997d2; } 
header div .menubox ul :last-child a { padding-right: 0; }
header div .icons { display: none; }

footer { background: #ededed; padding: 30px 0; }
footer> div { display: flex; justify-content: space-between; }
footer div .lefts> :first-child { margin-bottom: 20px; }
footer div .lefts> :first-child li { color: #333; font-weight: 700; font-size: 16px; }
footer div .lefts> :first-child> :first-child { font-weight: 800; }
footer div .lefts> :first-child li a { display: inline-block; color: #333; font-size: 16px; }
footer div .lefts> :last-child li { font-size: 14px; }
footer div .lefts> :last-child :nth-child(3) { display: flex; align-items: center; }
footer div .lefts> :last-child :nth-child(3) p { font-size: 14px;  }
footer div .lefts> :last-child :nth-child(3) :first-child { margin-right: 30px; }
footer div .lefts ul li .vline { display: inline-block; width: 1px; height: 15px; background: #333; margin: 0 10px;  vertical-align: middle;}
footer> div .logo { width: 180px; }
footer> div .logo img { width: 100%; object-fit: cover; vertical-align: middle; }

@media screen and (max-width: 1320px) {
    section { margin: 0; padding: 100px 20px;}
    .c1280 { width: 100%; }
    header { padding: 20px; }
    footer { padding: 30px 20px; }
}

@media screen and (max-width: 1024px) {
    h1 { font-size: 36px; }
    .tit p { font-size: 16px; }
 
    header div .menubox ul li a { padding: 0 30px; }
}

@media screen and (max-width: 820px) {
    * { font-size: 14px; } 
    .tit { margin-bottom: 40px; }
    .tit h1 { margin: 5px 0 10px; }
    .tit p { font-size: 15px; }

    header { padding: 15px 20px; }
    header div .logo { width: 130px; }
    header div .menubox { position: absolute; top: 72.67px; right: 0; width: 0%; height: calc(100vh - 72.67px); background: #fff; padding-top: 40px; overflow: hidden; }
    header div .menubox.on { width: 300px; padding: 40px 0 0 40px;  }
    header div .menubox> ul { flex-direction: column; align-items: flex-start; opacity: 1; }
    header div .menubox > ul> li { width: 100%; }
    header div .menubox > ul> li> a { color: #605F5F; padding: 15px 0; }
    header div .icons { display: flex; align-items: center; }
    header div .icons a { padding: 0 10px; margin-right: 10px; }
    header div .icons a i { font-size: 32px; color: #333;  }
    /* 햄버거 */
    .hambtn { position: relative; display: flex; justify-content: end; width: 36px; height: 28px; cursor: pointer; } 
    .hambtn span { position: absolute; display: block; height: 2px; width: 100%; background: #333; cursor: pointer; }
    .hambtn :first-child { top: 0; } 
    .hambtn :nth-child(2) { top: 50%; transform: translateY(-50%); } 
    .hambtn :last-child { bottom: 0; } 
    .hambtn.on { z-index: 999; } 
    .hambtn.on span { top: calc(50% - 1px); left: 0; transition: 0.3s; } 
    .hambtn.on :first-child { transform: rotate(45deg); } 
    .hambtn.on :nth-child(2) { top: 50%; transform: translateY(-50%); opacity: 0; } 
    .hambtn.on :last-child { transform: rotate(-45deg); } 

    footer> div .logo { width: 150px; }
}

@media screen and (max-width: 601px) {
    h1 { font-size: 32px; }
    h2 { font-size: 20px; }
    section { padding: 80px 20px;}

    footer> div { flex-direction: column-reverse; }
    footer> div .logo { margin-bottom: 30px; }
    footer div .lefts> :last-child :nth-child(3) { display: block; }
    footer div .lefts> :last-child :nth-child(3) :first-child { margin: 0; }
}