/*# sourceMappingURL=device.css.map */
@charset "UTF-8";
/*!
 * Author: NextFlow <nextflow@kakao.com>
 * Created: 21. 10. 27. 오후 1:59
 * Copyright (c) 2021. NextFlow. All rights reserved.
 */
/*!
 * Author: NextFlow <nextflow@kakao.com>
 * Created: 21. 10. 27. 오후 1:59
 * Copyright (c) 2021. NextFlow. All rights reserved.
 */
/**
Mobile, portrait
320px	iPhone SE
375px	iPhone 6 to X
414px	iPhone 8 Plus
Tablet, portrait
768px	iPad Air, iPad Mini, iPad Pro 9″
834px	iPad Pro 10″
Laptop displays
1366px	HD laptops (768p)
1366px	iPad Pro 12″ (landscape)
1440px	13″ MacBook Pro (2x scaling)
Desktop displays
1680px	13″ MacBook Pro (1.5x scaling)
1920px	1080p displays


Mobile, landscape
568px	iPhone SE
667px	iPhone 6 to 8
736px	iPhone 8 Plus
812px	iPhone X
Tablet, landscape
1024px	iPad Air, iPad Mini, iPad Pro 9″
1024px	iPad Pro 12″ (portrait)
1112px	iPad Pro 10″
 */
/* line 3, css/_layout.scss */
html,
body {
  margin: 0;
  padding: 0;
}

/* line 9, css/_layout.scss */
* {
  color: #333333;
  font-family: system-ui, sans-serif;
}

/* line 14, css/_layout.scss */
input,
select,
button {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #333333;
  border-radius: 5px;
  background-color: #FFFFFF;
  padding: 10px;
  min-width: 0;
}

/* line 26, css/_layout.scss */
input:focus,
select:focus,
button:focus {
  outline: 0;
}

/* line 31, css/_layout.scss */
.select-wrap {
  position: relative;
}

/* line 34, css/_layout.scss */
.select-wrap::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(0, -50%) translate(0, -2px) rotate(-45deg);
  width: 5px;
  height: 5px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
}

/* line 50, css/_layout.scss */
input:read-only {
  border-color: #888888;
  color: #888888;
}

/* line 56, css/_layout.scss */
section[data-hash] {
  display: none;
}

/* line 59, css/_layout.scss */
section[data-hash].visible {
  display: flex;
  flex-direction: column;
}

/* line 3, css/device.scss */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* line 10, css/device.scss */
section {
  width: 100vw;
  max-width: 400px;
  padding: 20px;
}

/* line 22, css/device.scss */
section[data-hash="setting"] .input-row {
  display: flex;
  align-items: center;
  margin: 5px 0;
}

/* line 27, css/device.scss */
section[data-hash="setting"] .input-row > label {
  flex: 0 0 100px;
  text-align: right;
  padding: 0 10px 0 0;
}

/* line 33, css/device.scss */
section[data-hash="setting"] .input-row input,
section[data-hash="setting"] .input-row .select-wrap {
  flex: 1;
}

/* line 37, css/device.scss */
section[data-hash="setting"] .input-row input select,
section[data-hash="setting"] .input-row .select-wrap select {
  width: 100%;
}

/* line 42, css/device.scss */
section[data-hash="setting"] .input-row .view-info {
  display: none;
  margin-left: 10px;
  align-self: stretch;
  background-color: #4895ef;
  border-color: #4895ef;
  color: #FFFFFF;
}

/* line 50, css/device.scss */
section[data-hash="setting"] .input-row .view-info.visible {
  display: block;
}

/* line 56, css/device.scss */
section[data-hash="setting"] .apply-btn {
  margin: 20px 0 0;
  border-color: #3f37c9;
  background-color: #3f37c9;
  color: #FFFFFF;
}

/* line 63, css/device.scss */
section[data-hash="setting"] .info-label {
  margin-top: 10px;
}

/* line 68, css/device.scss */
section[data-hash="login"] {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 400px;
  text-align: center;
}

/* line 75, css/device.scss */
section[data-hash="login"] .logo {
  width: 250px;
  margin: 0 auto 60px;
}

@media (max-width: 991.98px) {
  /* line 75, css/device.scss */
  section[data-hash="login"] .logo {
    width: 200px;
    margin: 0 auto 40px;
  }
}

@media (max-width: 767.98px) {
  /* line 75, css/device.scss */
  section[data-hash="login"] .logo {
    width: 150px;
    margin: 0 auto 20px;
  }
}

/* line 89, css/device.scss */
section[data-hash="login"] .logo img {
  width: 100%;
}

/* line 94, css/device.scss */
section[data-hash="login"] .input-wrap {
  display: flex;
  flex-direction: column;
}

/* line 98, css/device.scss */
section[data-hash="login"] .input-wrap input[type=text],
section[data-hash="login"] .input-wrap input[type=password] {
  font-size: 20px;
  border: 1px solid #707070;
  border-radius: 40px;
  padding: 10px 20px;
  margin: 7px 0;
  text-align: center;
}

@media (max-width: 991.98px) {
  /* line 98, css/device.scss */
  section[data-hash="login"] .input-wrap input[type=text],
section[data-hash="login"] .input-wrap input[type=password] {
    padding: 8px 15px;
  }
}

@media (max-width: 767.98px) {
  /* line 98, css/device.scss */
  section[data-hash="login"] .input-wrap input[type=text],
section[data-hash="login"] .input-wrap input[type=password] {
    padding: 5px 10px;
  }
}

/* line 115, css/device.scss */
section[data-hash="login"] .input-wrap input[type=text]::placeholder,
section[data-hash="login"] .input-wrap input[type=password]::placeholder {
  color: #ABA1A1;
}

/* line 120, css/device.scss */
section[data-hash="login"] .input-wrap .login-btn {
  align-self: center;
  padding: 10px 70px;
  background-color: #14213D;
  color: #ffffff;
  border: 1px solid #707070;
  border-radius: 25px;
  font-size: 20px;
  margin: 7px 0;
}

@media (max-width: 991.98px) {
  /* line 120, css/device.scss */
  section[data-hash="login"] .input-wrap .login-btn {
    padding: 8px 60px;
  }
}

@media (max-width: 767.98px) {
  /* line 120, css/device.scss */
  section[data-hash="login"] .input-wrap .login-btn {
    padding: 5px 50px;
  }
}