@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* 폰트 */
#maintitle {
  font-size: 24px;
  font-weight: 800;
  line-height: 160%;
  letter-spacing: 0.1rem;
}

#subtitle {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #b86efd9c;
}

.text-body1 {
  font-size: 12px;
  font-weight: 200;
  line-height: 160%;
}

.text-title1 {
  font-size: 16px;
  font-weight: 500;
}

/* 내용 */
.nav {
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  display: flex;
  justify-content: center;
  position: fixed;
  background-color: #1d1d1d;
  z-index: 50;
}
#nav-box {
  height: 84px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-grow: 1;
}
.test {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.go-btn {
  position: relative;
  height: 32px;
  padding: 0 12px;
  border: 1.5px solid #ffffff00;
  border-radius: 50vh;
  background: none;
  overflow: hidden;
  z-index: 2;
}
.go-btn a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: #f3f3f3;
  background: none;
}
.go-btn-title {
  position: relative;
  z-index: 10;
}
.go-btn:hover {
  border: 1.5px solid #fff;
}
.go-btn::before {
  content: "";
  position: absolute;
  display: block;
  top: -100px;
  left: -32px;
  width: 32px;
  height: 32px;
  border-radius: 50vh;
  background: #a94bda;
  transition: transform 0.2s linear;
  z-index: 0;
}
.go-btn:active::before {
  transform: scale(14);
}
.go-btn:active {
  border: 1.5px solid #ffffff00;
}

.inquiry-btn {
  position: relative;
  margin-left: 12px;
  padding: 8px 24px;
  border: 1.5px solid #fff;
  border-radius: 50vh;
  background: #1d1d1d;
  overflow: hidden;
}
.inquiry-btn a {
  text-decoration: none;
  font-size: 12px;
  background: none;
}
.inquiry-btn-title {
  position: relative;
  z-index: 10;
}

.inquiry-btn::before {
  content: "";
  position: absolute;
  display: block;
  top: -100px;
  left: -32px;
  width: 32px;
  height: 32px;
  border-radius: 50vh;
  background: #9c3cce;
  transition: transform 0.2s linear;
  z-index: 0;
}
.inquiry-btn:hover::before {
  transform: scale(14);
}
.inquiry-btn:hover {
  border: 1.5px solid #ffffff00;
}
.inquiry-btn:active::before {
  background: #8937b6;
}

.nav-mobile {
  display: none;
}

.v-mainbenner {
  height: 46rem;
  padding-left: 40px;
  background: url(./img/mainbenner.jpg) no-repeat center/contain;
}
.benner-text {
  box-sizing: border-box;
  margin: 180px auto 0;
}
.benner-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 160%;
  letter-spacing: 0.2rem;
}
.intro {
  width: 100vw;
  margin: 100px auto;
  text-align: center;
}
.intro-line {
  display: inline-block;
  width: 2px;
  height: 36px;
  margin: 36px auto;
  background: #fff;
  border: none;
}
.intro p {
  letter-spacing: 0.1rem;
}

.ceo-message {
  width: 100vw;
  background: #191919;
  padding: 80px 0;
}
.message-box {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 20px;
}
.ceo-content {
  display: flex;
  justify-content: space-between;
}

.ceo-content-mobile-box {
  display: none;
}

.ceo-content-box {
  width: 480px;
}
.ceo-content-box P {
  max-width: 22rem;
  line-height: 180%;
  letter-spacing: 0.1rem;
}

.ceo-name {
  display: flex;
  gap: 4px;
  align-items: end;
  justify-content: end;
}
.ceo-bold {
  font-size: 12px;
  font-weight: 500;
  line-height: 160%;
}

.company {
  max-width: 61rem;
  margin: 80px auto;
  text-align: center;
}
.company-img {
  margin: 0 auto;
  max-width: 816px;
  height: 386px;
  margin-top: 48px;
  background: url(./img/company-img.png) no-repeat center / contain;
}
.company-content {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.text-body2 {
  width: 540px;
  font-size: 14px;
  font-weight: 200;
  line-height: 180%;
  text-align: left;
}
.title-color {
  width: 244px;
  font-size: 20px;
  font-weight: 800;
  line-height: 160%;
  color: #a94bda;
  text-align: right;
}
.company-line {
  display: inline-block;
  margin: 0;
  width: 54px;
  height: 2px;
  background: #a94bda;
  border: none;
}
.company-text-pc p {
  width: 508px;
}
.company-text-mobile {
  display: none;
}

.vision {
  max-width: 61rem;
  margin: 160px auto 80px;
}
.vision-box {
  margin: 0 40px;
}
.vision-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vision-text-pc p {
  width: 21rem;
  letter-spacing: 0.1rem;
}
.core-value {
  padding: 80px 0;
  text-align: center;
  background: #191919;
}
.value-content {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
}
.value-card {
  width: 12.5rem;
  height: 15rem;
  text-align: left;
  background: #303030;
  border-radius: 12px;
}
.value-card .text-title1 {
  margin: 24px;
  text-align: left;
}
.card-text-box {
  margin: 28px 16px 28px 24px;
}
.card-text-box-mobile {
  display: none;
}
.value-card:hover {
  background: #9c3cce;
}
.card-img1 {
  width: 124px;
  height: 124px;
  margin-top: 48px;
  left: -30%;
  transform: translateX(30%);
  background: url(./img/Customer.png) no-repeat center/cover;
  transition: transform 0.5s ease;
}
.value-card:hover .card-img1 {
  width: 68px;
  height: 68px;
  margin-top: 20px;
  background: url(./img/Customer-c.png) no-repeat center/cover;
  transform: translate(20px, 0);
}
.card-img2 {
  width: 124px;
  height: 124px;
  margin-top: 48px;
  left: -30%;
  transform: translateX(30%);
  background: url(./img/creativity.png) no-repeat center/cover;
  transition: transform 0.5s ease;
}
.value-card:hover .card-img2 {
  width: 68px;
  height: 68px;
  margin-top: 20px;
  background: url(./img/creativity-c.png) no-repeat center/cover;
  transform: translate(20px, 0);
}
.card-img3 {
  width: 124px;
  height: 124px;
  margin-top: 48px;
  left: -30%;
  transform: translateX(30%);
  background: url(./img/manifold.png) no-repeat center/cover;
  transition: transform 0.5s ease;
}
.value-card:hover .card-img3 {
  width: 68px;
  height: 68px;
  margin-top: 20px;
  background: url(./img/manifold-c.png) no-repeat center/cover;
  transform: translate(20px, 0);
}
.card-img4 {
  width: 124px;
  height: 124px;
  margin-top: 48px;
  left: -30%;
  transform: translateX(30%);
  background: url(./img/collective-consciousness.png) no-repeat center/cover;
  transition: transform 0.5s ease;
}
.value-card:hover .card-img4 {
  width: 68px;
  height: 68px;
  margin-top: 20px;
  background: url(./img/collective-consciousness-c.png) no-repeat center/cover;
  transform: translate(20px, 0);
}
.value-card:hover .text-title1 {
  margin: 4px 24px;
}

.history {
  max-width: 61rem;
  height: 1000px;
  margin: 80px auto;
  text-align: center;
}
.history-content {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  gap: 84px;
}
.history-content-left {
  position: relative;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.h-line {
  position: absolute;
  display: inline-block;
  width: 2px;
  height: 766px;
  left: 150px;
  transform: translateX(-0.1rem);
  background: linear-gradient(#444 88%, #1d1d1d);
  border: none;
  z-index: 0;
}
.year {
  display: flex;
  align-items: center;
  gap: 30px;
}
.text-line {
  width: 115px;
  font-size: 40px;
  font-weight: 900;
  line-height: 160%;
  letter-spacing: 0.2rem;
  -webkit-text-stroke: 0.5px #fff;
  color: #1d1d1d;
}
.h-circle {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #a94bda;
  border-radius: 50%;
  z-index: 1;
}
.h-circle::after {
  content: "";
  position: absolute;
  display: inline-block;
  top: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  background: #a84bda4a;
  border-radius: 50%;
  z-index: 1;
}
.year-textbox {
  text-align: left;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.text-body3 {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.1rem;
}

.h-img1 {
  position: absolute;
  width: 358px;
  top: 52px;
  right: 0;
}
.h-img2 {
  position: absolute;
  width: 232px;
  top: 240px;
  left: 0;
}
.h-img3 {
  position: absolute;
  width: 210px;
  top: 442px;
  right: 56px;
}
.h-img4 {
  position: absolute;
  width: 88px;
  top: 596px;
  left: 136px;
}

.Taiwan {
  padding: 160px 0;
  background: #191919;
  display: flex;
  justify-content: center;
}
.title-2 {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.1rem;
}
.taiwan-text-mobile {
  display: none;
}
.store {
  max-width: 61rem;
  margin: 80px auto;
  display: flex;
  justify-content: space-between;
  width: 976px;
}
.store-more-btn {
  position: relative;
  margin-top: 80px;
  width: 100px;
  height: 36px;
  background: none;
  border: 1px solid #fff;
  border-radius: 50vh;
  overflow: hidden;
}
.store-more-btn a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  z-index: 10;
}
.store-more-btn::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: -40px;
  width: 32px;
  height: 32px;
  border-radius: 50vh;
  background: #9c3cce;
  transition: transform 0.2s linear;
  z-index: 0;
}
.store-more-btn:hover::before {
  transform: scale(14);
}

.store-more-btn:hover {
  border: 1px solid #9c3cce;
}
.store-more-btn:active::before {
  background: #8937b6;
}
.store-box {
  width: 620px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.store-content-1 {
  width: 296px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.store-content-2 {
  width: 296px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  margin-top: 138px;
}

.store-card {
  position: relative;
  padding: 12px;
  width: 272px;
  height: 392px;
  background: #303030;
  border-radius: 16px;
  overflow: hidden;
}
.store-card img {
  position: relative;
  width: 272px;
  z-index: 30;
}
.store-card::before {
  content: "";
  position: absolute;
  display: block;
  top: 0px;
  left: -32px;
  width: 32px;
  height: 32px;
  border-radius: 50vh;
  background: #9c3cce;
  transition: transform 0.3s linear;
  z-index: 0;
}
.store-text {
  position: relative;
  margin: 12px 4px;
  z-index: 10;
}
.location {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}
.location div {
  width: 16px;
  height: 16px;
  background: url(./img/map-pin.svg) no-repeat center/cover;
}
.location p {
  width: 256px;
}

.call {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}
.call div {
  width: 16px;
  height: 16px;
  background: url(./img/phone.svg) no-repeat center/cover;
}

.text-body4 {
  font-size: 12px;
  font-weight: 300;
  line-height: 160%;
  color: #ccc;
}

.store-card:hover::before {
  transform: scale(40);
}
.store-card:hover .location div {
  width: 16px;
  height: 16px;
  background: url(./img/map-pin-w.svg) no-repeat center/cover;
}
.store-card:hover .call div {
  width: 16px;
  height: 16px;
  background: url(./img/phone-w.svg) no-repeat center/cover;
}
.store-card:hover p {
  color: #fff;
}

#footer {
  background: #191919;
  padding: 60px 0;
  text-align: center;
}
.footer-content {
  max-width: 976px;
  margin: 0 auto;
  margin-bottom: 48px;
  display: flex;
  justify-content: space-between;
}
.footer-left {
  width: 372px;
  padding-left: 16px;
  text-align: start;
}
.footer-right {
  width: 372px;
  padding-left: 16px;
  text-align: start;
}
.title-bold {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.1rem;
  color: #eee;
}
#footer .text-body1 {
  margin-bottom: 4px;
  color: #aaa;
}
.text-body3 {
  font-size: 12px;
  font-weight: 200;
  line-height: 160%;
  color: #aaa;
}
@media (max-width: 1024px) {
  .store {
    width: 37rem;
    margin: 60px auto;
    flex-direction: column;
    gap: 32px;
  }
  .store-title {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .store-more-btn {
    margin-top: 20px;
    width: 88px;
    height: 28px;
  }
  .store-more-btn a {
    font-size: 12px;
  }
  .store-box {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
  .store-content-2 {
    margin-top: 28px;
  }
}
@media (max-width: 768px) {
  /* 폰트 */
  #maintitle {
    font-size: 18px;
    font-weight: 800;
    line-height: 160%;
  }

  #subtitle {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #b86efd9c;
  }

  .text-body1 {
    font-size: 12px;
    font-weight: 200;
    line-height: 160%;
  }

  .text-title1 {
    font-size: 14px;
    font-weight: 500;
  }

  /* 내용 */

  .nav {
    display: none;
  }
  .nav-mobile {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
    background: #1d1d1d;
  }
  .nav-mobile-box {
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
  }
  input[id="mobile-icon"] {
    display: none;
  }
  input[id="mobile-icon"] + label {
    position: relative;
    display: block;
    width: 24px;
    height: 20px;
    cursor: pointer;
  }

  input[id="mobile-icon"] + label > span {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 30px;
    background: #fff;
    transition: all 0.35s;
    z-index: 50;
  }
  input[id="mobile-icon"] + label > span:nth-child(1) {
    /* height: 3px; */
    top: 0px;
  }
  input[id="mobile-icon"] + label > span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
  }
  input[id="mobile-icon"] + label > span:nth-child(3) {
    bottom: 0px;
  }
  input[id="mobile-icon"]:checked + label > span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  input[id="mobile-icon"]:checked + label > span:nth-child(2) {
    opacity: 0;
  }

  input[id="mobile-icon"]:checked + label > span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
  }
  #mobile-icon + label + #mobile-header {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #191919;
    top: 0px;
    padding: 100px 60px;
    box-sizing: border-box;
    right: -200vw;
    z-index: 30;
    transition: all 1s;
  }
  #mobile-icon:checked + label + #mobile-header {
    right: 0px;
  }

  #mobile-icon:checked + label + #mobile-header > ul > li {
    margin-bottom: 24px;
  }
  #mobile-icon:checked + label + #mobile-header > ul > li > a {
    text-decoration: none;
    color: #fff;
  }
  #mobile-header > ul > li {
    margin-bottom: 24px;
  }
  #mobile-header > ul > li > a {
    text-decoration: none;
    color: #fff;
  }
  .v-mainbenner {
    margin-top: 56px;
    height: 16rem;
    padding-left: 24px;
  }
  .benner-text {
    max-width: 21rem;
    margin-top: 2rem;
  }
  .benner-title {
    font-size: 16px;
    line-height: 160%;
  }

  .intro {
    width: 100%;
    max-width: 375px;
    margin: 80px auto;
  }
  .intro #maintitle {
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0;
  }
  .intro-line p {
    margin-bottom: 4px;
  }
  .ceo-message {
    padding: 60px 0;
    display: flex;
    justify-content: center;
  }
  .ceo-content {
    display: flex;
    flex-direction: column;
    min-width: 21rem;
    max-width: 40rem;
  }
  .ceo-content-box {
    display: none;
  }
  .ceo-content-mobile-box {
    display: block;
    margin-top: 32px;
  }
  .ceo-name {
    margin-top: 24px;
  }
  .company {
    max-width: 40rem;
    margin: 60px auto;
  }
  .company-img {
    margin-top: 32px;
    margin: 0 16px;
    background: url(./img/company-img-mo.png) no-repeat center/contain;
  }
  .company-content {
    margin-top: 28px;
    margin: 28px 20px;
    min-width: 335px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .company-content:nth-child(even) {
    align-items: flex-end;
  }
  .company-content:nth-child(even) .title-color {
    text-align: end;
  }

  .company-content:nth-child(even) p {
    text-align: right;
    margin-left: auto;
  }

  .company-line {
    margin: 8px 0 16px;
  }
  .company-text-pc {
    display: none;
  }
  .company-text-mobile {
    display: block;
  }
  .title-color {
    text-align: start;
    font-size: 16px;
  }
  .text-body2 {
    width: 100%;
    font-size: 12px;
  }
  .vision {
    margin: 60px auto;
    width: 21rem;
    text-align: center;
  }
  .vision-box {
    margin: 0;
  }
  .vision-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 20.5rem;
  }
  .core-value {
    padding: 60px 0;
  }
  .value-content {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .value-card {
    width: 10rem;
    height: 12rem;
    overflow: hidden;
  }

  .value-card .text-title1 {
    margin-top: 28px;
    margin-left: 16px;
  }
  .card-img1 {
    width: 88px;
    height: 88px;
    margin-top: 44px;
    left: -40%;
    transform: translateX(40%);
    transition: transform 0.5s ease;
  }
  .value-card:hover .card-img1 {
    width: 36px;
    height: 36px;
  }
  .value-card:hover .text-title1 {
    margin: 8px 12px;
  }
  .value-card:hover .card-text-box {
    margin: 12px;
  }
  .card-img2 {
    width: 88px;
    height: 88px;
    margin-top: 44px;
    left: -40%;
    transform: translateX(40%);
    transition: transform 0.5s ease;
  }
  .value-card:hover .card-img2 {
    width: 36px;
    height: 36px;
  }

  .card-img3 {
    width: 88px;
    height: 88px;
    margin-top: 44px;
    left: -40%;
    transform: translateX(40%);
    transition: transform 0.5s ease;
  }
  .value-card:hover .card-img3 {
    width: 36px;
    height: 36px;
  }

  .card-img4 {
    width: 88px;
    height: 88px;
    margin-top: 44px;
    left: -40%;
    transform: translateX(40%);
    transition: transform 0.5s ease;
  }
  .value-card:hover .card-img4 {
    width: 36px;
    height: 36px;
  }

  .history {
    max-width: 30rem;
    margin: 60px auto;
    height: 38rem;
  }

  .h-line {
    position: absolute;
    display: inline-block;
    width: 2px;
    height: 444px;
    left: 95px;
    transform: translateX(-0.1rem);
    background: linear-gradient(#444 88%, #1d1d1d);
    border: none;
    z-index: 0;
  }
  .history-content-left {
    gap: 40px;
  }
  .year {
    justify-content: flex-start;
    gap: 24px;
  }
  .text-line {
    width: 66px;
    font-size: 24px;
  }

  .text-body3 {
    font-size: 12px;
  }
  .year-textbox {
    margin-top: 32px;
  }
  .Taiwan {
    padding: 80px 0;
    background: #191919;
    display: flex;
    justify-content: center;
  }
  .taiwan-text-pc {
    display: none;
  }
  .taiwan-text-mobile {
    display: block;
  }
  .title-2 {
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0;
  }
  .store {
    width: 23rem;
    margin: 60px auto;
    flex-direction: column;
    gap: 32px;
  }

  #footer {
    padding: 60px 0;
  }
  .footer-content {
    width: 19.4rem;
    flex-direction: column;
  }
  .footer-left {
    width: 100%;
    padding-left: 0;
  }
  .footer-right {
    margin-top: 32px;
    width: 100%;
    padding-left: 0;
  }
}