header.css 8.61 KB
Newer Older
hyeryung's avatar
hyeryung committed
1 2 3 4 5 6 7 8 9 10 11
@media screen and (max-width: 1023.5px) {
  html.is-clipped--navbar {
    overflow-y: hidden;
  }
}

body {
  padding-top: var(--navbar-height);
}

.navbar {
minseok.park's avatar
minseok.park committed
12
  background: var(--nav-background);
minseok.park's avatar
minseok.park committed
13
  color: var(--color-bwg-main);
박민석's avatar
박민석 committed
14
  height: 4.5rem;
hyeryung's avatar
hyeryung committed
15 16 17 18 19
  font-size: calc(16 / var(--rem-base) * 1rem);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--z-index-navbar);
minseok.park's avatar
minseok.park committed
20
  max-height: 5rem;
minseok.park's avatar
minseok.park committed
21
  border-bottom: 1px solid var(--color-blue-30);
minseok.park's avatar
minseok.park committed
22
  transition: box-shadow 0.2s;
minseok.park's avatar
minseok.park committed
23 24 25 26 27 28 29 30
}

.navbar .active {
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.1);
}

.navbar.active {
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.1);
hyeryung's avatar
hyeryung committed
31 32 33 34 35 36
}

.navbar a {
  text-decoration: none;
}

minseok.park's avatar
minseok.park committed
37 38 39 40 41 42 43 44 45 46 47
.navbar-logo {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url('../img/logo_color.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
}

minseok.park's avatar
minseok.park committed
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
.navbar-title-contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.navbar-title-contents .navbar-title {
  color: var(--color-bwg-main);
  font-size: 29px;
  font-weight: 600;
}

.navbar-title-contents .navbar-title.sub {
  font-size: 12px;
  font-weight: 300;
}

hyeryung's avatar
hyeryung committed
65 66 67
.navbar-brand {
  display: flex;
  flex: auto;
minseok.park's avatar
minseok.park committed
68
  padding: 0 1rem;
minseok.park's avatar
minseok.park committed
69 70
  align-items: center;
  justify-content: space-between;
hyeryung's avatar
hyeryung committed
71 72 73 74 75 76 77 78 79
}

.navbar-brand .navbar-item {
  color: var(--navbar-font-color);
}

.navbar-brand .navbar-item:first-child {
  align-self: center;
  padding: 0;
minseok.park's avatar
minseok.park committed
80
  font-size: calc(22 / var(--rem-base) * 1.25rem);
hyeryung's avatar
hyeryung committed
81 82
  flex-wrap: wrap;
  line-height: 1;
minseok.park's avatar
minseok.park committed
83
  font-weight: 700;
hyeryung's avatar
hyeryung committed
84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
}

.navbar-brand .navbar-item:first-child a {
  color: inherit;
  word-wrap: normal;
}

.navbar-brand .navbar-item:first-child :not(:last-child) {
  padding-right: 0.375rem;
}

.navbar-brand .navbar-item.search {
  flex: auto;
  justify-content: flex-end;
}

100 101 102 103 104
#search-field {
  position: relative;
}

#search-field > i {
105
  background: url(../img/ico-search.svg) no-repeat center;
106
  position: absolute;
107
  top: 14px;
108
  right: 20px;
109 110 111
  display: inline-block;
  width: 16px;
  height: 16px;
112 113
}

hyeryung's avatar
hyeryung committed
114
#search-input {
115
  box-sizing: border-box;
hyeryung's avatar
hyeryung committed
116 117 118
  color: #333;
  font-family: inherit;
  font-size: 0.95rem;
박민석's avatar
박민석 committed
119
  width: 350px;
120
  height: 45px;
hyeryung's avatar
hyeryung committed
121
  border: 1px solid #dbdbdb;
122
  border-radius: 28px;
hyeryung's avatar
hyeryung committed
123
  line-height: 1.5;
124
  padding: 0 2.15rem 0 1rem !important;
hyeryung's avatar
hyeryung committed
125 126 127 128 129 130 131 132 133 134 135 136 137 138 139
}

#search-input:disabled {
  background-color: #dbdbdb;
  /* disable cursor */
  cursor: not-allowed;
  pointer-events: all !important;
}

#search-input:disabled::placeholder {
  color: #4c4c4c;
}

#search-input:focus {
  outline: none;
140 141 142 143
  border: 2px solid var(--color-bwg-main);
}

#search-input:focus + i {
144
  background: url(../img/ico-search-active.svg) no-repeat center;
hyeryung's avatar
hyeryung committed
145 146
}

minseok.park's avatar
minseok.park committed
147
.nav-mobile-menu-toggle {
hyeryung's avatar
hyeryung committed
148 149 150 151 152 153 154 155
  background: none;
  border: none;
  outline: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
minseok.park's avatar
minseok.park committed
156 157 158 159
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-size: 30px;
hyeryung's avatar
hyeryung committed
160 161
}

minseok.park's avatar
minseok.park committed
162 163
.nav-mobile-menu-toggle:active {
  background-color: rgba(0, 0, 0, 0.1);
hyeryung's avatar
hyeryung committed
164 165 166 167 168 169 170 171
}

.navbar-item,
.navbar-link {
  color: var(--navbar-menu-font-color);
  display: block;
  line-height: var(--doc-line-height);
  padding: 0.5rem 1rem;
minseok.park's avatar
minseok.park committed
172
  margin: 0 0.5rem;
hyeryung's avatar
hyeryung committed
173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220
}

.navbar-item.has-dropdown {
  padding: 0;
}

.navbar-item .icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.navbar-item .icon img,
.navbar-item .icon svg {
  fill: currentColor;
  width: inherit;
  height: inherit;
}

.navbar-link {
  padding-right: 2.5em;
}

.navbar-dropdown .navbar-item {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.navbar-dropdown .navbar-item.has-label {
  display: flex;
  justify-content: space-between;
}

.navbar-dropdown .navbar-item small {
  color: var(--toolbar-muted-color);
  font-size: calc(12 / var(--rem-base) * 1rem);
}

.navbar-divider {
  background-color: var(--navbar-menu-border-color);
  border: none;
  height: 1px;
  margin: 0.25rem 0;
}

.navbar .button {
  display: inline-flex;
  align-items: center;
박민석's avatar
박민석 committed
221 222
  background: var(--color-bwg-main);
  border-radius: 28px;
hyeryung's avatar
hyeryung committed
223
  height: 1.75rem;
박민석's avatar
박민석 committed
224 225
  color: var(--color-white);
  padding: 1.25rem 1.75rem 1.25rem 1.5rem;
hyeryung's avatar
hyeryung committed
226 227 228
  white-space: nowrap;
}

박민석's avatar
박민석 committed
229
.download_icon {
박민석's avatar
박민석 committed
230 231 232
  display: inline-block;
  width: 18px;
  height: 18px;
minseok.park's avatar
minseok.park committed
233
  background-image: url('../img/ico-download.svg');
박민석's avatar
박민석 committed
234 235 236 237
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 7px;
박민석's avatar
박민석 committed
238 239 240 241 242 243 244
}

.navbar .button:hover {
  transition: 300ms ease;
  background-color: rgba(0, 114, 206, 0.8);
}

minseok.park's avatar
minseok.park committed
245 246 247 248 249 250
.navbar-mobile-menu {
  display: none;
  list-style: none;
  position: fixed;
  width: 100%;
  top: 75px;
minseok.park's avatar
minseok.park committed
251 252
  left: 0;
  right: 0;
minseok.park's avatar
minseok.park committed
253 254 255
  background-color: rgb(255, 255, 255);
  z-index: 100;
  flex-direction: column;
minseok.park's avatar
minseok.park committed
256
  padding: 1rem;
minseok.park's avatar
minseok.park committed
257
  color: rgb(0, 114, 206);
minseok.park's avatar
minseok.park committed
258
  box-shadow: rgba(0, 0, 0, 0.16) 0 6px 9px 0;
minseok.park's avatar
minseok.park committed
259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282
  border-top: 1px solid rgb(0, 114, 206);
  margin: 0;
}

.navbar-mobile-menu.show {
  display: flex;
}

.mobile-menu-item {
  cursor: pointer;
  font-size: 18px;
  padding: 1rem;
  font-weight: 600;
  border-radius: 6px;
  display: flex;
  align-items: center;
  width: 100%;
}

#document-icon {
  margin-left: 10px;
}

.mobile-menu-item:active {
minseok.park's avatar
minseok.park committed
283
  background-color: var(--color-blue-50);
minseok.park's avatar
minseok.park committed
284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303
}

.mobile-menu-item svg {
  font-size: 16px;
}

.mobile-product-link {
  display: none;
  list-style: none;
  flex-direction: column;
  padding-left: 0;
}

.mobile-product-link.show {
  display: flex;
}

.product-link {
  cursor: pointer;
  font-size: 16px;
minseok.park's avatar
minseok.park committed
304
  padding: 10px 1.5rem;
minseok.park's avatar
minseok.park committed
305 306
}

hyeryung's avatar
hyeryung committed
307
@media screen and (max-width: 768.5px) {
박민석's avatar
박민석 committed
308
  .nav-menu {
박민석's avatar
박민석 committed
309
    padding: 0.5rem 0.5rem 5.5rem 0.65rem;
박민석's avatar
박민석 committed
310 311
  }

박민석's avatar
박민석 committed
312
  .navbar-brand .navbar-item.search {
minseok.park's avatar
minseok.park committed
313
    width: 100%;
박민석's avatar
박민석 committed
314
    padding: 0;
minseok.park's avatar
minseok.park committed
315
  }
minseok.park's avatar
minseok.park committed
316

박민석's avatar
박민석 committed
317
  #search-field,
박민석's avatar
박민석 committed
318
  #search-input {
박민석's avatar
박민석 committed
319 320 321
    width: 100%;
  }

박민석's avatar
박민석 committed
322
  .mobile-menu-item > a {
minseok.park's avatar
minseok.park committed
323
    width: 100%;
박민석's avatar
박민석 committed
324
    justify-content: center;
minseok.park's avatar
minseok.park committed
325
  }
hyeryung's avatar
hyeryung committed
326

박민석's avatar
박민석 committed
327
  .navbar-title-contents {
박민석's avatar
박민석 committed
328
    display: none;
hyeryung's avatar
hyeryung committed
329
  }
박민석's avatar
박민석 committed
330 331 332 333

  .navbar-logo {
    margin-right: 0;
  }
hyeryung's avatar
hyeryung committed
334 335
}

박민석's avatar
박민석 committed
336 337 338
/* @media screen and (min-width: 769px) {
} */

hyeryung's avatar
hyeryung committed
339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354
@media screen and (max-width: 1023.5px) {
  .navbar-brand {
    height: inherit;
  }

  .navbar-brand .navbar-item {
    align-items: center;
    display: flex;
  }

  .navbar-menu {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
minseok.park's avatar
minseok.park committed
355
  .nav-mobile-menu-toggle {
hyeryung's avatar
hyeryung committed
356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377
    display: none;
  }

  .navbar,
  .navbar-menu,
  .navbar-end {
    display: flex;
  }

  .navbar-item,
  .navbar-link {
    display: flex;
    position: relative;
    flex: none;
  }

  .navbar-item:not(.has-dropdown),
  .navbar-link {
    align-items: center;
  }

  .navbar-item.is-hoverable:hover .navbar-dropdown {
박민석's avatar
박민석 committed
378
    max-height: 310px;
379 380
    opacity: 1;
    visibility: visible;
hyeryung's avatar
hyeryung committed
381 382
  }

minseok.park's avatar
minseok.park committed
383 384 385 386
  .navbar-link::before {
    content: "";
    display: block;
    position: absolute;
minseok.park's avatar
minseok.park committed
387
    bottom: 1rem;
minseok.park's avatar
minseok.park committed
388 389 390 391 392 393 394 395 396 397 398
    left: 0;
    width: 0;
    height: 2px;
    background: var(--navbar-font-color);
    transition: width 0.3s ease-in-out;
  }

  .navbar-link:hover::before {
    width: 100%;
  }

hyeryung's avatar
hyeryung committed
399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415
  .navbar-link::after {
    border-width: 0 0 1px 1px;
    border-style: solid;
    content: "";
    display: block;
    height: 0.5em;
    pointer-events: none;
    position: absolute;
    transform: rotate(-45deg);
    width: 0.5em;
    margin-top: -0.375em;
    right: 1.125em;
    top: 50%;
  }

  .navbar-end > .navbar-item,
  .navbar-end .navbar-link {
minseok.park's avatar
minseok.park committed
416
    color: var(--color-jet-80);
hyeryung's avatar
hyeryung committed
417 418 419 420 421 422
  }

  .navbar-end > a.navbar-item:hover,
  .navbar-end .navbar-link:hover,
  .navbar-end .navbar-item.has-dropdown:hover .navbar-link {
    color: var(--navbar-font-color);
minseok.park's avatar
minseok.park committed
423 424 425 426 427 428 429
    font-weight: 600;
  }

  .navbar-end > a.navbar-item::after {
    content: "";
    display: block;
    position: absolute;
430
    bottom: 1rem;
minseok.park's avatar
minseok.park committed
431 432 433 434 435 436 437 438 439
    left: 0;
    width: 0;
    height: 2px;
    background: var(--navbar-font-color);
    transition: width 0.3s ease-in-out;
  }

  .navbar-end > a.navbar-item:hover::after {
    width: 100%;
hyeryung's avatar
hyeryung committed
440 441 442 443 444 445 446
  }

  .navbar-end .navbar-link::after {
    border-color: currentColor;
  }

  .navbar-dropdown {
447
    clear: both;
hyeryung's avatar
hyeryung committed
448
    background: var(--navbar-menu-background);
박민석's avatar
박민석 committed
449
    box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.16);
hyeryung's avatar
hyeryung committed
450 451 452 453 454
    border-radius: 0 0 0.25rem 0.25rem;
    top: 100%;
    left: 0;
    min-width: 100%;
    position: absolute;
455 456 457 458 459
    display: block;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0.5s;
hyeryung's avatar
hyeryung committed
460 461 462 463 464
  }

  .navbar-dropdown .navbar-item {
    padding: 0.5rem 3rem 0.5rem 1rem;
    white-space: nowrap;
박민석's avatar
박민석 committed
465
    margin: 0;
hyeryung's avatar
hyeryung committed
466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482
  }

  .navbar-dropdown .navbar-item small {
    position: relative;
    right: -2rem;
  }

  .navbar-dropdown .navbar-item:last-child {
    border-radius: inherit;
  }

  .navbar-dropdown.is-right {
    left: auto;
    right: 0;
  }

  .navbar-dropdown a.navbar-item:hover {
박민석's avatar
박민석 committed
483 484 485
    background: var(--color-bwg-main);
    color: var(--color-white);
    font-weight: 600;
hyeryung's avatar
hyeryung committed
486 487
  }
}