/* @import url("reset.css") reset;  */
/* @import url("index.css") main;
@import url("product.css") product;
@import url("info.css") info;
@import url("about.css") about;
@import url("customer.css") customer;
@import url("board.css") board; */

:root {
  --color-black:#17191c;
  --color-gray400:#acacac;
  --color-gray500:#6b7484;
  --color-gray600:#888;
  --color-gray800:#303338;
  --color-line:rgba(0, 0, 0, .1);
  --color-primary:#08a687;
  --color-primary-bg:#f1f3f8;
  --color-primary-sub:#b8e5d0;
  --color-red-dark:#a01e00;
  --color-secondary:#3c64b1;
  --color-secondary-bg:rgba(215, 221, 229, .7);
  --color-secondary-sub:#a0c9fb;
  --color-white:#fff;
  --fw-300:300;
  --fw-400:400;
  --fw-500:500;
  --fw-600:600;
  --fw-700:700;
  --fw-800:800;
  --fz-11:1.1rem;
  --fz-12:1.2rem;
  --fz-13:1.3rem;
  --fz-14:1.4rem;
  --fz-15:1.5rem;
  --fz-16:1.6rem;
  --fz-18:1.8rem;
  --fz-20:2rem;
  --fz-22:2.2rem;
  --fz-24:2.4rem;
  --fz-26:2.6rem;
  --fz-28:2.8rem;
  --fz-30:3rem;
  --fz-32:3.2rem;
  --fz-34:3.4rem;
  --fz-42:4.2rem;
  --fz-52:5.2rem;
  --fz-84:8.4rem;
}
.mt60 {
  margin-top:60px;
}
.mt50 {
  margin-top:50px;
}
h1,h2,h3,h4,h5 {
  letter-spacing:-.0375em;
}
.hidden,[hidden] {
  display:none !important;
}
.a11y {
  position:absolute !important;
  overflow:hidden;
  clip:rect(1px, 1px, 1px, 1px);
  width:1px;
  height:1px;
}
.ellipsis {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.pre-line {
  white-space:pre-line;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin:0;
  padding:0;
  vertical-align:baseline;
  border:0;
  font:inherit;
  font-size:100%;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display:block;
}
ol,ul {
  list-style:none;
}
blockquote,q {
  quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
  content:"";
  content:none;
}
table {
  border-spacing:0;
  border-collapse:collapse;
}
button {
  overflow:visible;
  width:auto;
  margin:0;
  padding:0;
  color:inherit;
  border:none;
  background:rgba(0,0,0,0);
  font:inherit;
  line-height:normal;
  -webkit-appearance:none;
  appearance:none;
  -webkit-font-smoothing:inherit;
  -moz-osx-font-smoothing:inherit;
}
*,*:after,*:before {
  box-sizing:border-box;
}
html {
  letter-spacing:-.01em;
  word-wrap:break-word;
  word-break:keep-all;
  color:var(--color-primary-black);
  font-family:"Pretendard", Arial, sans-serif;
  font-size:62.5%;
  font-weight:var(--fw-400);
  line-height:1.2;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;

  scroll-behavior:smooth;
}
body {
  overflow-x:hidden;
}
main {
  position:relative;
  min-height:100vh;
}
button {
  cursor:pointer;
  border:0;
  background-color:rgba(0,0,0,0);
}
a {
  display:inline-block;
  text-decoration:none;
  color:inherit;
}
a:hover {
  -webkit-transition:.3s;
  -o-transition:.3s;
  transition:.3s;
}
p {
  min-height:1em;
}
.header {
  position:relative;
  z-index:3001;
  width:100%;
  height:250px;
  background-color:#fff;
}
.header-wrap {
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  max-width:1712px;
  height:100%;
  margin:0 auto;
}
.header.scrolled {
  position:fixed;
  height:150px;
}
.header,.header-wrap {
  transition:height .3s ease;
}
.header .gnb.pc .d1-list {
  display:flex;
}
.header .gnb.pc .d1-item {
  position:relative;
}
.header .gnb.pc .d1-link {
  padding:28px;
  transition:font-size .5s ease;
  font-size:3.2rem;
  font-weight:700;
}
.header .gnb.pc .d2-wrap {
  position:absolute;
  top:90px;
  left:50%;
  visibility:hidden;
  padding:23px 18px;
  transition:all .3s;
  transform:translateX(-50%);
  opacity:0;
  border-radius:30px;
  background-color:var(--color-white);
  box-shadow:0 2px 4px rgba(0, 0, 0, .08);
}
.header .gnb.pc .d2-wrap.active {
  visibility:visible;
  opacity:1;
}
.header .gnb.pc .d2-wrap a {
  width:100%;
  padding:15px 20px;
  white-space:nowrap;
  letter-spacing:-.03em;
  font-size:var(--fz-22);
  font-weight:var(--fw-600);
}
.header .gnb.pc .d2-wrap span {
  display:block;
  margin-top:2px;
  font-size:var(--fz-18);
}
.header .gnb.pc .d2-wrap a:hover {
  border-radius:16px;
  background-color:var(--color-primary-bg);
}
.header .gnb.pc .d3-wrap {
  padding-left:10px;
}
.header .gnb.pc .d3-wrap a {
  color:var(--color-gray600);
  font-size:var(--fz-20);
}
.header .home {
  width:100%;
  max-width:347px;
  height:auto;
  margin:0 28px;
}
.header .home img {
  width:100%;
  height:100%;
  transition:width .3s ease, height .3s ease;

  object-fit:cover;
}
.header .btn-hamburger {
  position:relative;
  display:none;
  width:40px;
  height:40px;
  margin-right:15px;
  padding:10px 9px;
}
.header .btn-hamburger .bar {
  position:relative;
  display:block;
  width:22px;
  height:2px;
  transition:all .4s;
  background-color:#000;
}
.header .btn-hamburger .bar:nth-of-type(1) {
  top:-6.5px;
  transform:translate3d(0, 0, 0);
}
.header .btn-hamburger .bar:nth-of-type(2) {
  transform:translate3d(0, 0, 0);
}
.header .btn-hamburger .bar:nth-of-type(3) {
  top:6.5px;
  transform:translate3d(0, 0, 0);
}
.header .btn-hamburger[data-state=close] .bar:nth-of-type(1) {
  top:0;
  transform:translate3d(0, 2px, 0) rotateZ(45deg);
}
.header .btn-hamburger[data-state=close] .bar:nth-of-type(2) {
  opacity:0;
}
.header .btn-hamburger[data-state=close] .bar:nth-of-type(3) {
  top:0;
  transform:translate3d(0, -2px, 0) rotateZ(-45deg);
}

@media screen and (max-width: 1820px) {
  .header {
    height:200px;
  }
  .header .gnb.pc .d1-item:last-child .d2-wrap {
    left:calc(50% - 20px);
  }
}
@media screen and (max-width: 1280px) {
  .header {
    height:150px;
  }
  .header.scrolled {
    height:100px;
  }
  .header .home {
    width:270px;
  }
  .header .gnb.pc .d1-link {
    font-size:2.5rem;
  }
  .header .gnb.pc .d2-wrap {
    top:80px;
    padding:18px;
    border-radius:20px;
  }
  .header .gnb.pc .d2-wrap a {
    padding:10px 15px;
    font-size:var(--fz-18);
  }
  .header .gnb.pc .d2-wrap span {
    font-size:var(--fz-16);
  }
  .header .gnb.pc .d2-wrap a:hover {
    border-radius:10px;
  }
  .header .gnb.pc .d3-wrap {
    padding-left:10px;
  }
  .header .gnb.pc .d3-wrap a {
    color:var(--color-gray600);
    font-size:var(--fz-16);
  }
}
@media screen and (max-width: 1190px) {
  .header {
    height:100px;
  }
  .header .home {
    width:235px;
  }
  .header .gnb.pc .d1-link {
    font-size:2.0rem;
  }
}
@media screen and (max-width: 1024px) {
  .header {
    height:90px;
  }
  .header.scrolled {
    height:90px;
  }
  .header .home {
    width:200px;
  }
  .header .btn-hamburger {
    display:block;
  }
  .gnb.pc {
    display:none;
  }
}
@media (max-width: 475px) {
  .header-wrap {
    height:70px;
  }
  .header .home {
    width:150px;
  }
}

.aside {
  position:fixed;
  z-index:200;
  top:0;
  left:0;
  display:none;
  overflow-y:auto;
  width:100%;
  height:100vh;
  background-color:rgba(241, 243, 248, .88);

  backdrop-filter:blur(30px);
}
.aside .header-wrap {
  background-color:var(--color-white);height: 90px;
}
.aside .gnb.mb {
  padding:16px;
}
.aside .d1-item {
  margin-bottom:10px;
  padding:8px 20px;
  border-radius:15px;
  background-color:var(--color-white);
}
.aside .d1-link {
  display:flex;
  justify-content:space-between;
  padding:10px 5px;
  font-size:var(--fz-20);
  font-weight:var(--fw-500);
}
.aside .d2-wrap {
  display:none;
  margin-top:10px;
  padding:10px;
  border-top:1px solid var(--color-line);
}
.aside .d2-wrap li {
  margin-top:10px;
}
.aside .d2-wrap a {
  font-size:var(--fz-15);
  font-weight:var(--fw-500);
}
.aside .d3-wrap {
  padding-left:10px;
}
.aside .d3-wrap a {
  color:var(--color-gray600);
  font-size:var(--fz-14);
}
.aside .d1-link svg {
  transition:transform .2s;
  transform:rotateZ(-90deg);
}
.aside .d1-item.active .d1-link svg {
  transform:rotateZ(90deg);
}
.btn {
  position:relative;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  height:calc(56 / 18 * 1em);
  padding:0 calc(32 / 18 * 1em);
  cursor:pointer;
  transition:all .34s ease-in-out;
  white-space:nowrap;
  color:currentColor;
  border-radius:calc(16 / 18 * 1em);
  background-color:rgba(231,232,235,.5);
  font-size:max(1.5rem,.9375vw);
  font-weight:500;
  line-height:1;
}
.btn-link {
  display:inline-flex;
  align-items:center;
  padding:15px 30px;
  border-radius:50px;
  background-color:#fff;
}
.btn-link > span {
  color:var(--color-primary);
  font-size:var(--fz-22);
  font-weight:var(--fw-700);
}
.btn-arr {
  position:relative;
  display:inline-block;
  width:30px;
  height:30px;
  margin-left:10px;
  border-radius:50%;
}
.btn-arr90,.btn-arr45 {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
.btn-black {
  background-color:var(--color-primary-black);
}
.btn-primary {
  background-color:var(--color-primary);
}
.btn-secondary {
  background-color:var(--color-secondary);
}

@media (max-width: 1280px) {
  .btn-link {
    padding:10px 15px;
  }
  .btn-link > span {
    font-size:var(--fz-14);
  }
  .btn-arr {
    width:20px;
    height:20px;
  }
  .btn-arr90 {
    width:8.86px;
  }
}
@media (max-width: 1024px) {
  .btn-link {
    padding:10px 15px;
  }
  .btn-link > span {
    font-size:var(--fz-14);
  }
  .btn-arr {
    width:20px;
    height:20px;
  }
  .btn-arr90 {
    width:8.86px;
  }
}
@media (max-width: 475px) {
  .aside .header-wrap {
    height:70px;
  }
}