body { font-family: 'Noto Sans KR', sans-serif; word-break: keep-all; }

.nl { display: block; }

.fixed-element h1 { position: fixed; z-index: 2; top: 3vh; left: 3vh; }
.fixed-element a.signin-btn { position: fixed; display: block; z-index: 2; top: 3vh; right: 3vh; width: 118px; height: 40px; background-color: white; text-align: center; font-weight: bold; font-size: 20px; color: #333; line-height: 40px; }

.cover { position: relative; z-index: 1; width: 100%; height: 100vh; background: url(/img/bg.jpg) no-repeat center center / cover; }
.cover .items { position: absolute; width: 990px; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; }
.cover .items h2 { margin-bottom: 30px; text-align: center; font-weight: bold; font-size: 60px; color: white; }
.cover .items h2 span { color: black; }
.cover .items::after { content: ""; display: table; clear: left; }
.cover .item { float: left; margin: 0.2%; padding-top: 30px; width: 32.93%; height: 167px; background-color: white; font-size: 23px; line-height: 1.45; }
.cover .item.intro { background-color: #7ed1f2; }
.cover .item.support { background-color: #91f27e; }
.cover .item.intro a { display: inline-block; margin-top: 15px; width: 70%; height: 40px; border-radius: 0; background-color: #2a2a35; text-align: center; color: white; font-weight: bold; }
.cover .item.support a { color: #333; font-style: italic; text-decoration: underline; }
.cover .more-btn {
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 40px; height: 14px;
  margin-left: -20px;
  background: url(/img/arrow.png) no-repeat center center;
  -webkit-animation: bounce .7s ease-in infinite alternate;
  -moz-animation: bounce .7s ease-in infinite alternate;
  -o-animation: bounce .7s ease-in infinite alternate;
  -ms-animation: bounce .7s ease-in infinite alternate;
  animation: bounce .7s ease-in infinite alternate;
}
@-webkit-keyframes bounce { from { bottom: 20px; opacity: 0.3; } to { bottom: 10px; } }
@-moz-keyframes    bounce { from { bottom: 20px; opacity: 0.3; } to { bottom: 10px; } }
@-o-keyframes      bounce { from { bottom: 20px; opacity: 0.3; } to { bottom: 10px; } }
@-ms-keyframes     bounce { from { bottom: 20px; opacity: 0.3; } to { bottom: 10px; } }
@keyframes         bounce { from { bottom: 20px; opacity: 0.3; } to { bottom: 10px; } }

.more { margin: 0 auto; width: 990px; }
.more .headline { margin-top: 50px; }
.more .headline::after { content: ""; display: table; clear: left; }
.more .headline .item { float: left; margin-bottom: 30px; width: 31.5%; font-size: 15px; line-height: 1.7; }
.more .headline .item:first-child { margin-right: 2.75%; }
.more .headline .item:last-child { margin-left: 2.75%; }
.more .headline .item h3 { padding-top: 10px; border-top: 3px solid #333; font-weight: bold; }

.more .project { margin-top: 50px; }
.more .project h2 { margin-bottom: 20px; font-weight: bold; }
.more .project .item::after { content: ""; display: table; clear: both; }
.more .project .item { margin-bottom: 30px; height: 210px; background-color: #f5f5f5; }
.more .project .item .txt { float: left; padding: 30px 30px 0; width: 68.5%; font-size: 15px; line-height: 1.7; }
.more .project .item .txt ul { padding-left: 22px; }
.more .project .item .img { position: relative; float: right; margin-top: 25px; width: 31.5%; height: 160px; border-left: 1px solid #ddd; }
.more .project .item .img img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.more .project .item h3 { font-weight: bold; font-size: 20px; }

.more .history { margin-top: 50px; }
.more .history h2 { margin-bottom: 20px; font-weight: bold; }
.more .history ul { list-style: none; margin: 0; padding: 0; }
.more .history ul li { position: relative; padding-left: 80px; }
.more .history ul li strong { position: absolute; top: 0; left: 0; display: block; padding-top: 10px; width: 100%; border-top: 1px solid #eee; }
.more .history ul li strong.hide { display: none; }
.more .history ul li::before { content: "-"; display: inline-block; position: absolute; margin-left: -12px; }
.more .history ul li.pd { margin-top: 10px; padding-top: 10px; }
ㅎ
.more .copyright { margin: 100px 0; text-align: center; font-size: 12px; color: gray; letter-spacing: 1px; }

@media ( max-width: 990px ) {
  .cover .items,
  .more { padding: 0 20px; width: 100%; }
  .cover .items .item { font-size: 20px; height: 145px; }
  .fixed-element h1 { top: 25px; left: 20px; }
  .fixed-element a.signin-btn { top: 20px; right: 20px; }
}

@media ( max-width: 900px ) {
  .cover .items h2 span { display: block; font-size: 0; color: transparent; }
  .cover .items .item { width: 49.6%; font-size: 20px; height: 145px; }
}

@media ( max-width: 700px ) {
  .cover .items h2 { font-size: 50px; }
  .cover .items h2 span { display: block; font-size: 0; color: transparent; }
  .cover .items .item { width: 100%; margin: 0 0 2px; padding: 20px; height: auto; text-align: left; }
  .cover .items .item.intro a { margin-top: -7px; margin-left: 10px; vertical-align: middle; width: 170px; }
  .more .headline .item { margin-bottom: 30px; float: none; width: 100%; font-size: 15px; line-height: 1.7; }
  .more .headline .item:first-child { margin-right: 0%; }
  .more .headline .item:last-child { margin-left: 0%; }
  .more .project .item { margin-bottom: 30px; height: auto; background-color: #f5f5f5; }
  .more .project .item .txt { float: none; padding: 30px 30px 10px; width: 100%; }
  .more .project .item .txt ul { padding-left: 22px; }
  .more .project .item .img { display: none; }
  .nl { display: none; }
}

@media ( max-width: 440px ) {
  .cover .items h2 { font-size: 40px; }
  .cover .items .item.intro a { display: block; margin-top: 7px; margin-left: 0; width: 170px; }
}