@charset "UTF-8";

/* font color */
.prmr {
  color: var(--prmr);
}
.sec {
  color: var(--sec);
}
.neu-cool-500 {
  color: var(--neu-cool-500);
}
.text-mtd {
  color: var(--text-mtd);
}
.text-sub {
  color: var(--text-sub);
}
.text-def {
  color: var(--text-def);
}
.text-inv {
  color: var(--text-inv);
}
.wh-op-60 {
  color: var(--wh-op-60);
}
/* font weight */
.bold {
  font-weight: 700;
}
.semi-bold {
  font-weight: 600;
}
.medium {
  font-weight: 500;
}
.regular {
  font-weight: 400;
}

/* font size */
/* display */
.d-xl {
  font-size: var(--d-xl);
  line-height: 130%;
  letter-spacing: -1px;
}
.d-lg {
  font-size: var(--d-lg);
  line-height: 130%;
}
.d-md {
  font-size: var(--d-md);
  letter-spacing: -1px;
}
/* heading */
.h-xl {
  font-size: var(--h-xl);
  line-height: 130%;
  letter-spacing: -1px;
}
.h-lg {
  font-size: var(--h-lg);
}
.h-md {
  font-size: var(--h-md);
  letter-spacing: -1px;
}
.h-sm {
  font-size: var(--h-sm);
  letter-spacing: 0;
}
.h-xs {
  font-size: var(--h-xs);
  letter-spacing: 0;
}
/* body */
.body-lg {
  font-size: var(--body-lg);
  letter-spacing: 0;
}
.body-md {
  font-size: var(--body-md);
  letter-spacing: 0;
}
.body-sm {
  font-size: var(--body-sm);
  letter-spacing: 0;
}
/* caption */
.c-sm {
  font-size: var(--c-sm);
  letter-spacing: 0;
}
.c-xs {
  font-size: var(--c-xs);
  letter-spacing: 0;
}

html,
body {
  font-family: var(--ff-comm);
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -1px;
  color: var(--text-def);
  word-break: keep-all;
}
main {
  margin-left: 280px;
}
section {
  position: relative;
  right: 0;
  background: var(--bg-def);
}
section.bg-prmr {
  background: var(--prmr);
}
section.bg-sub {
  background: var(--bg-sub);
}
.width-wrap {
  position: relative;
  max-width: 1128px;
  width: 100%;
  padding: var(--pad-xl) 0;
  margin: 0 auto;
}

/* btn */
.btn {
  width: fit-content;
  text-align: center;
  font-weight: 600;
  color: var(--wh);
  transition: all 0.25s linear;
}
.btn.content {
  padding: var(--pad-sm) var(--pad-lg);
  background: var(--bk);
  font-size: var(--h-md);
}
.btn.content:hover {
  background: var(--prmr);
}
.btn.nav {
  width: 100%;
  padding: var(--pad-xs) var(--pad-lg);
  background: var(--prmr);
  font-size: var(--c-sm);
  letter-spacing: 0;
}
.btn.nav:hover {
  background: var(--bk);
}

/* tag */
.tag {
  width: fit-content;
  padding: var(--pad-2xs) var(--pad-xs);
  border-radius: var(--r-full);
  background: var(--bg-def);
  font-size: var(--body-md);
  letter-spacing: 0;
}

/* list */
ul.comm-list {
  width: 100%;
  border-top: 1px solid var(--brdr-str);
}
/* common li */
ul.comm-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-sm) 0;
  border-bottom: 1px solid var(--brdr-def);
}
ul.comm-list li .left-zone {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}
ul.comm-list li .left-zone > p:first-child {
  width: 40px;
  flex-shrink: 0;
}
/* common hover li */
ul.comm-list.hover li .left-zone p:first-child {
  position: relative;
  left: 0;
  color: var(--text-mtd);
  transition: all 0.25s linear;
}
ul.comm-list.hover li:hover .left-zone p:first-child {
  left: 5%;
  color: var(--prmr);
}
/* large li */
ul.comm-list.large li .left-zone {
  gap: var(--gap-lg);
}
ul.comm-list.large li .left-zone > p {
  width: 110px;
  flex-shrink: 0;
}
ul.comm-list.large li .left-zone .text-plc {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

/* white list */
ul.wh-list {
  width: 100%;
}
ul.wh-list > * + * {
  border-top: 1px solid var(--sec);
}
ul.wh-list li {
  display: flex;
  align-items: baseline;
  gap: var(--gap-sm);
}
ul.wh-list li:not(:first-child) {
  padding-top: var(--pad-sm);
}
ul.wh-list li:not(:last-child) {
  padding-bottom: var(--pad-sm);
}
ul.wh-list li > p {
  width: 40px;
  flex-shrink: 0;
}
ul.wh-list li .text-plc {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

/* form */
label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xs);
}
label p {
  display: inline-block;
  position: relative;
}
label p.require::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(100% + var(--gap-xs));
  width: 6px;
  height: 6px;
  background: url("/img/icon/icon_required.svg") no-repeat;
  background-position: center;
  background-size: contain;
}

label input,
label select,
label textarea {
  width: 100%;
  padding: var(--pad-2xs) 0;
  border-bottom: 1px solid var(--brdr-def);
  font-size: var(--body-md);
  line-height: 150%;
  font-weight: 500;
  letter-spacing: 0;
}

label input,
label textarea {
  color: var(--text-def);
}
label textarea {
  height: 127px;
}
label select {
  position: relative;
  color: var(--text-mtd);
  background: url("/img/icon/icon_selectBox_selected.svg") right no-repeat;
}

label input:focus,
label select.show,
label textarea:focus {
  border-bottom-color: var(--brdr-str);
}
label select.show,
label select:focus {
  background: url("/img/icon/icon_selectBox.svg") right no-repeat;
}

label select.on,
label select option {
  color: var(--text-def);
}

/* header */
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  height: 100vh;
  width: 280px;
  border-right: 1px solid var(--brdr-def);
}
header .width-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 0;
  margin: 0;
}
header .width-wrap > * + * {
  border-top: 1px solid var(--brdr-def);
}
header .logo-area {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: var(--pad-md);
}
header .logo-area h1#logo {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 230px;
}
header .logo-area p {
  text-align: center;
}
header nav {
  flex: 1;
  padding: var(--pad-sm) 0;
}
header .btn-area {
  padding: var(--pad-sm) var(--pad-md);
}
header .info-area {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--pad-sm) var(--pad-md);
}
header .info-area li {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
}
h1#logo {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 230px;
}

/* header - nav */
nav a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-xs) var(--pad-md);
  transition: all 0.25s linear;
}
nav a:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--prmr);
  opacity: 0;
  transition: all 0.15s linear;
}
nav a *:last-child {
  color: var(--text-sub);
}
nav a:hover,
nav a.on {
  background: var(--bg-sub);
}
nav a:hover:before,
nav a.on:before {
  opacity: 1;
}
nav a:hover *:last-child,
nav a.on *:last-child {
  color: var(--text-def);
}

/* footer */
footer {
  background: var(--bk);
}
footer .width-wrap {
  padding: var(--pad-lg) 0;
}
footer .width-wrap > * + * {
  border-top: 1px solid var(--brdr-sub);
  margin-top: var(--gap-lg);
  padding-top: var(--gap-lg);
}
footer .logo-area {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
footer .logo-list {
  display: flex;
  gap: calc((var(--gap-xs) * 2) + 1px);
}
footer .logo-list li {
  flex: 1;
  position: relative;
  max-width: 160px;
  font-size: 0;
}
footer .logo-list > * + *::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + var(--gap-xs));
  width: 1px;
  height: 16px;
  transform: translateY(-50%);
  background: var(--brdr-sub);
}
footer .copy-area {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

/* responsive */
@media all and (max-width: 1480px) {
  .width-wrap {
    width: 92.072%;
  }
}
@media all and (max-width: 1250px) {
  main {
    margin-left: 260px;
  }

  /* list */
  ul.comm-list.hover li,
  ul.comm-list.large li,
  ul.comm-list.hover li .left-zone,
  ul.comm-list.large li .left-zone {
    flex-direction: column;
    align-items: start;
  }

  /* header */
  header {
    width: 260px;
  }
}
@media all and (max-width: 1024px) {
  main {
    margin-left: 0;
  }

  /* list */
  ul.comm-list.hover li,
  ul.comm-list.large li,
  ul.comm-list.hover li .left-zone,
  ul.comm-list.large li .left-zone {
    flex-direction: row;
    align-items: center;
  }

  /* header */
  header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--brdr-def);
    background: var(--bg-def);
  }
  header .width-wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 92.072%;
    padding: var(--pad-xs) 0;
    margin: 0 auto;
  }
  header .width-wrap > * + * {
    border-top: none;
  }
  header .logo-area {
    flex-direction: row;
    gap: var(--gap-xs);
    padding: 0;
  }
  header .btn-area {
    padding: 0;
  }
  header nav,
  header .info-area {
    display: none;
  }
}
@media all and (max-width: 900px) {
  /* list */
  ul.comm-list.hover li,
  ul.comm-list.large li,
  ul.comm-list.hover li .left-zone,
  ul.comm-list.large li .left-zone {
    flex-direction: column;
    align-items: start;
  }
  ul.comm-list.hover li,
  ul.comm-list.large li {
    gap: var(--gap-xs);
  }
  ul.comm-list.large li .left-zone {
    gap: var(--gap-lg);
  }
  ul.comm-list.hover li .left-zone p:first-child {
    color: var(--prmr);
  }
  ul.comm-list.hover li:hover .left-zone p:first-child {
    left: 0;
  }
}
@media all and (max-width: 720px) {
  /* header */
  header .logo-area p {
    display: none;
  }
  /* footer */
  footer .logo-area {
    flex-direction: column;
    gap: var(--gap-xl);
  }
  footer .copy-area {
    flex-direction: column;
  }
}
@media all and (max-width: 500px) {
  .top500 {
    display: none !important;
  }
  .width-wrap,
  header .width-wrap {
    width: 89.334%;
  }

  label textarea {
    height: 142px;
  }
  /* header */
  header .logo-area h1#logo {
    max-width: 143px;
  }
  /* footer */
  footer .logo-list li:nth-child(1) {
    max-width: 148px;
  }
  footer .logo-list li:nth-child(2) {
    max-width: 143px;
  }
}