/* Avenir 는 저장소에 웹폰트 파일이 없는 Apple 시스템 폰트다.
   비 Apple 기기(Windows·Android)에서 브라우저 기본 serif 로 떨어지지 않도록
   모든 Avenir 선언에 "Montserrat" → "Pretendard" → sans-serif 폴백을 붙여 둔다. */
html,
body {
  font-family: "Montserrat";
  background-color: #edeee7;
  transition: all 0.5s;
  min-width: 320px;
}
html.fixed body {
  overflow: hidden;
}
.k-section {
  position: relative;
  overflow: hidden;
}
body.overflow-hidden {
  overflow: hidden;
}
.footer-copy-el {
  display: none;
}
.main-ref-group-section .k-footer {
  display: none;
}
.view-page2 .main-ref-group-section .k-footer {
  display: block;
}
.view-page2 .main-ref-group-section .k-footer .rotate-btn a {
  display: flex;
}
/***************************************
 *
***************************************/
.contact-us {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #6b9c80 url(../images/request-bg.jpg) 0 0 no-repeat;
  background-size: cover;
  z-index: 200;
  font-family: "Pretendard";
  box-sizing: border-box;
}
/* .contact-us #container 규칙 제거 — 대상 빈 div 를 index.html 에서 삭제(F25) */
.contact-us.on {
  display: flex;
}
.contact-us .ci {
  position: absolute;
  top: 40px;
  left: 60px;
  z-index: 100;
}
.contact-us .list {
  position: absolute;
  top: 100vh;
  left: 60px;
}
/*  */
.contact-us .k-step {
  display: none;
}
.contact-us .k-step.on {
  display: block;
}
.contact-us .step1 div {
  font-size: 100px;
  line-height: 120px;
  color: #fff;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}
.contact-us .step1 div.st1 p {
  transform: matrix(1, 0, 0, 1, 0, 120);
  transition: all 0.5s 0.5s;
}
.contact-us .step1 div.st2 p {
  transform: matrix(1, 0, 0, 1, 0, 120);
  transition: all 0.5s 0.75s;
}
.contact-us .step1.on div p {
  transform: matrix(1, 0, 0, 1, 0, 0);
}
/*  */
.contact-us .step2 {
  margin-top: 40px;
}
.contact-us .step2 div {
  line-height: 30px;
  color: #fff;
}
.contact-us .step2 div.st1 {
  font-size: 24px;
  font-weight: 500;
}
.contact-us .step2 div.st1 span {
  font-size: 18px;
  font-weight: 500;
}
.contact-us .step2 div.st2 {
  font-size: 20px;
  font-weight: 300;
}
.contact-us .step2 div.st2 span {
  font-size: 16px;
  font-weight: 300;
}

.contact-us .step2 div.st1 p {
  transform: matrix(1, 0, 0, 1, 0, 20);
  transition: all 0.5s 0.5s;
}
.contact-us .step2 div.st2 p {
  transform: matrix(1, 0, 0, 1, 0, 20);
  transition: all 0.5s 0.75s;
}
.contact-us .step2.on div p {
  transform: matrix(1, 0, 0, 1, 0, 0);
}
/*  */
.contact-us .step3 {
  margin-top: 70px;
}
.contact-us .step3 button {
  border: 1px solid #edeee7;
  padding: 20px 30px;
  border-radius: 60px;
  margin-left: 10px;
}
.contact-us .step3 button:first-child {
  margin-left: 0px;
}
.contact-us .step3 button div {
  color: #fcfffd;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
}
.contact-us .step3 button div span {
  display: block;
  font-size: 18px;
  font-weight: 400;
}
.contact-us .step3 button.active {
  background: #edeee7;
}
.contact-us .step3 button.active div {
  color: #6b9c80;
}
.contact-us .step3 button:hover {
  background: #edeee7;
}
.contact-us .step3 button:hover div {
  color: #6b9c80;
}

.contact-us .list.tween .step2 {
  margin-top: 20px;
}
.contact-us .list.tween .step3 {
  margin-top: 35px;
}
.contact-us .list.tween .step1 div p {
  font-size: 40px;
  line-height: 48px;
  transition: all 0.5s;
  transition-delay: 0s;
}
.contact-us .list.tween .step1 div {
  font-size: 40px;
  line-height: 48px;
  transition: all 0.5s;
  transition-delay: 0s;
}
.contact-us .list.tween .step2 div.st1 {
  font-size: 20px;
  line-height: 28px;
  transition: all 0.5s;
  transition-delay: 0s;
}
.contact-us .list.tween .step2 div.st1 span {
  font-size: 16px;
  transition: all 0.5s;
  transition-delay: 0s;
}
.contact-us .list.tween .step2 div.st2 {
  font-size: 18px;
  line-height: 28px;
  transition: all 0.5s;
  transition-delay: 0s;
}
.contact-us .list.tween .step2 div.st2 span {
  font-size: 14px;
  transition: all 0.5s;
  transition-delay: 0s;
}
.contact-us .list.tween .step3 button div {
  font-size: 18px;
  line-height: 22px;
  transition: all 0.5s;
  transition-delay: 0s;
}
.contact-us .list.tween .step3 button div span {
  font-size: 16px;
  transition: all 0.5s;
  transition-delay: 0s;
}
.contact-us .list.tween .step4 dl.st1 {
  padding-top: 0px;
}

/*  */
.contact-us .step4 {
  margin-top: 100px;
}
.contact-us .step4 .form {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.contact-us .step4 .form-content {
  width: 100%;
  max-width: 770px;
}
.contact-us .step4 dl {
  position: relative;
  transition: all 0.25s;
}
.contact-us .step4 dl.st1 {
  padding-top: 58px;
}
.contact-us .step4 dl.st2 {
  padding-top: 30px;
  margin-top: 10px;
}
.contact-us .step4 dl dt {
  padding-bottom: 16px;
  transition: all 0.25s;
}
.contact-us .step4 dl dd {
  position: absolute;
  bottom: 0px;
  width: 100%;
}
.contact-us .step4 dl dt div {
  color: #fcfffd;
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
  opacity: 0.6;
}
.contact-us .step4 dl dt div span {
  display: block;
  font-size: 16px;
  font-weight: 400;
}
.contact-us .step4 input,
.contact-us .step4 textarea {
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
  width: 100%;
  max-width: 770px;
  background-color: rgba(0, 0, 0, 0.1);
  background-color: transparent;
  border: 0px;
  border-bottom: 1px solid #fff;
  font-size: 18px;
  line-height: 28px;
  font-weight: 800;
  box-sizing: border-box;
  color: #edeee7;
  font-weight: 800;
  padding: 10px 0;
}
textarea::-webkit-scrollbar {
  width: 5px;
  opacity: 0.3;
}
textarea::-webkit-scrollbar-track {
  background-color: transparent;
}
textarea::-webkit-scrollbar-thumb {
  background-color: #edeee7;
  opacity: 0.3;
  border-radius: 10px;
  width: 5px;
}

.contact-us .step4 dl.on dt {
  opacity: 0;
}
.contact-us .step4 dl.on dd {
  z-index: 1;
}
.contact-us .step4 .form-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
}
.contact-us .step4 .form-bottom .k-right {
  display: flex;
}
.contact-us .step4 .form-bottom {
  color: #edeee7;
}
.contact-us .step4 .form-bottom strong {
  line-height: 22px;
  font-weight: 400;
}
.contact-us .step4 .form-bottom p {
  font-size: 12px;
}
.contact-us .step4 .form-bottom button {
  color: #edeee7;
  padding: 8px 20px;
  border-radius: 4px;
  border: 1px solid #edeee7;
  margin-left: 10px;
}
.contact-us .step4 .form-bottom button:first-child {
  margin-left: 0px;
}
.form-btn {
  position: absolute;
  top: calc(50% - 33px);
  right: 86px;
  display: none;
  opacity: 0.3;
  transition: all 0.25s;
}
.form-btn.on {
  display: flex;
}
.form-btn.active {
  opacity: 1;
}
.form-btn button {
  text-align: left;
}
.form-btn button div {
  font-size: 36px;
  line-height: 43px;
  font-weight: 500;
  color: #edeee7;
  display: flex;
  align-items: center;
}
.form-btn button div svg {
  margin-left: 25px;
}
.form-btn button p {
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  color: #edeee7;
}
/*  */
.form-bottom button.k-agree svg {
  display: none;
  margin-right: 10px;
}
.form-bottom button.k-agree.active {
  color: #6b9c80;
  background-color: #edeee7;
  display: flex;
  align-items: center;
}
.form-bottom button.k-agree.active svg {
  display: inline-block;
}
/*  */
.privacy-modal {
  position: fixed;
  display: flex;
  top: -100vh;
  left: 0px;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.privacy-modal.on {
  top: 0px;
}
.privacy-modal .dim {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0;
  background-color: rgba(99, 149, 119, 0.3);
  backdrop-filter: blur(14px);
  transition: all 0.25s;
}
.privacy-modal .inner {
  position: relative;
  opacity: 0;
  background-color: #fff;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.1);
  transform: matrix(1, 0, 0, 1, 0, 20);
  transition: all 0.25s;
}
.privacy-modal .inner .title {
  font-weight: bold;
}

.privacy-modal.view .dim {
  opacity: 1;
}
.privacy-modal.view .inner {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}
/*  */
.form-complete {
  z-index: 10;
  display: none;
  background-color: #6b9c80;
  position: fixed;
  opacity: 1;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  align-items: center;
  justify-content: center;
  transition: all 0.5s;
}
.form-complete.on {
  display: flex;
}

.form-complete .ci-bg {
  position: absolute;
  top: 0px;
  left: 0px;
}
.form-complete .ci-bg div {
  font-size: 350px;
  line-height: 350px;
  font-weight: 900;
  color: #edeee7;
  opacity: 0.06;
}
.form-complete .cont {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 0 60px;
  display: flex;
  align-items: center;
}
.form-complete .cont .inner {
  color: #fff;
}
.form-complete .cont .inner button {
  color: #fff;
}
.form-complete .cont .ko {
  font-size: 36px;
  line-height: 54px;
  font-weight: 600;
}
.form-complete .cont .en {
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  margin-top: 18px;
}
.form-complete .cont .btn {
  margin-top: 72px;
  opacity: 0;
}
.form-complete .cont .btn button {
  font-size: 26px;
  line-height: 32px;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.form-complete .cont .btn button svg {
  margin-left: 10px;
}
.form-complete .cont .btn .txt {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

.form-complete .cont p {
  position: relative;
  overflow: hidden;
}

.form-complete .cont p span {
  display: block;
}
.form-complete .cont p span:first-child {
  transform: matrix(1, 0, 0, 1, 0, 120);
  transition: all 0.5s 0.5s;
}
.form-complete .cont p span {
  transform: matrix(1, 0, 0, 1, 0, 120);
  transition: all 0.5s 0.75s;
}
.form-complete.view .cont p span {
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.m-next {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
  margin-top: 60px;
}
.m-next button {
  color: #fff;
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-next button svg {
  margin-left: 10px;
}
.m-next button.disabled {
  opacity: 0.3;
}
.m-next button.disabled svg {
}
.contact-us .list .form-btn {
  display: none;
}
.form-btn button div svg {
  width: 16px;
  height: 28px;
}
.close-modal-btn {
  position: absolute;
  top: 30px;
  right: 30px;
  display: block;
}
@media screen and (max-width: 1024px) and (min-width: 100px) {
  .contact-us .ci {
    position: absolute;
    top: 30px;
    left: 20px;
    z-index: 100;
  }
  .contact-us .list {
    position: fixed;
    top: 0px !important;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    overflow-y: auto;
  }
  .contact-us .list .list-inner {
    padding: 88px 20px 114px 20px;
  }
  .contact-us .step1 div {
    font-size: 36px;
    line-height: 43px;
  }
  .contact-us .step2 div.st1 {
    font-size: 16px;
    line-height: 16px;
  }
  .contact-us .step2 div.st1 span {
    font-size: 13px;
    line-height: 13px;
  }
  .contact-us .step2 div.st2 {
    font-size: 16px;
    line-height: 18px;
    margin-top: 8px;
  }
  .contact-us .step2 div.st2 span {
    font-size: 13px;
    line-height: 18px;
    display: block;
  }
  .contact-us .step3 {
    width: 100%;
    margin-top: 36px;
  }
  .contact-us .step3 button {
    width: 100%;
    display: block;
    margin: 0px;
    margin-top: 16px;
    padding: 12px 16px;
  }
  .contact-us .step3 button:first-child {
    margin-top: 0px;
  }
  .contact-us .step3 button div {
    font-size: 14px;
    line-height: 20px;
  }
  .contact-us .step3 button div span {
    font-size: 12px;
    line-height: 20px;
  }
  .contact-us .list::-webkit-scrollbar {
    width: 5px;
    opacity: 0.3;
  }
  .contact-us .list::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .contact-us .list::-webkit-scrollbar-thumb {
    background-color: #edeee7;
    opacity: 0.3;
    border-radius: 10px;
    width: 5px;
  }
  .form-btn.on {
    display: none;
  }
  .m-next {
    display: flex;
  }

  .contact-us .list.next .step3 {
    margin-top: 0px;
    overflow-x: scroll;
  }
  .contact-us .list.next .step3 .scroll {
    display: flex;
    width: 100%;
  }
  .contact-us .list.next .step3 button {
    display: flex;
    margin: 0 10px 0 0;
    min-width: fit-content;
    justify-content: center;
  }
  .contact-us .list.next .step3::-webkit-scrollbar {
    height: 0px;
    opacity: 0;
    display: none;
  }
  .contact-us .list.next .step3::-webkit-scrollbar-track {
    display: none;
    background-color: transparent;
  }
  .contact-us .list.next .step3::-webkit-scrollbar-thumb {
    display: none;
    background-color: #edeee7;
    opacity: 0;
    border-radius: 10px;
    height: 5px;
  }
  .contact-us .step4 {
    margin-top: 68px;
  }
  .contact-us .step4 dl.st1 {
    padding-top: 0px;
  }
  .contact-us .step4 dl dt div {
    font-size: 18px;
    line-height: 28px;
  }
  .contact-us .step4 dl dt div span {
    font-size: 14px;
    line-height: 22px;
  }
  .contact-us .step4 .form-bottom {
    display: block;
    margin-top: 126px;
  }
  .contact-us .step4 .form-bottom .k-right {
    margin-top: 10px;
  }
  .contact-us .step4 .form-bottom button {
    width: 50%;
    height: 42px;
    line-height: 42px;
    padding: 0 20px;
    justify-content: center;
  }

  .contact-us .list.next .m-next {
    display: none;
  }
  .contact-us .list.next .form-btn {
    margin-top: 53px;
    display: flex;
    position: relative;
    top: initial;
    right: initial;
    height: initial;
    justify-content: center;
  }
  .form-btn button div {
    font-size: 20px;
    line-height: 24px;
  }
  .form-btn button div svg {
    width: 8px;
    height: 14px;
    margin-left: 10px;
  }
  .form-btn button p {
    font-size: 12px;
    line-height: 14px;
  }

  .form-complete.on {
    display: block;
  }
  .form-complete .cont {
    padding: 100px 20px 0 20px;
    display: block;
  }
  .form-complete .cont .ko {
    font-size: 24px;
    line-height: 36px;
  }
  .form-complete .cont .en {
    font-size: 18px;
    line-height: 27px;
  }
  .form-complete .cont .btn button {
    font-size: 20px;
    line-height: 24px;
  }
  .form-complete .cont .btn button svg {
    width: 7px;
    height: 13px;
  }

  .privacy-modal {
    align-items: flex-end;
  }
  .privacy-modal .inner {
    border-radius: 16px 16px 0 0;
    width: 100%;
  }
  .close-modal-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
  }
}

/***************************************
 *
***************************************/
.k-header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 88px;
}
.k-header .inner {
  position: absolute;
  top: 40px;
  left: 60px;
  z-index: 11;
}
.k-header .ci svg path {
  transition: all 0.5s;
}
.k-header.on .ci svg path {
  fill: #fff;
}
body.section2n .k-header .ci svg path {
  fill: #fff;
}
body.section2n-1 .k-header .ci svg path {
  fill: #6b9c80;
}
.home-text {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
}
.home-text br {
  display: none;
}
.home-text br.m {
  display: none;
}
.home-text br.pc {
  display: block;
}

.home-text .inner {
  position: absolute;
  top: 40px;
  left: 60px;
}
.home-text .k-text.en {
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
  position: relative;
  z-index: 2;
  font-size: 36px;
  font-weight: 100;
  line-height: 46px;
  color: #6b9c80;
  margin-top: 92px;
  max-width: 1420px;
  transition: all 0.25s;
}
.home-text.on .k-text.en {
  color: rgba(237, 238, 231, 0.2);
}
.home-text:before {
  content: "";
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  background: url(../images/common.dot-texture.png);
  opacity: 0.2;
}
.home .home-text:before {
  content: "";
  display: block;
}
/*  */
.home-text .k-text.ko {
  position: relative;
  z-index: 2;
  font-size: 18px;
  font-weight: 500 !important;
  line-height: 28px;
  color: #6b9c80;
  margin-top: 40px;
  max-width: 1420px;
  transition: all 0.25s;
}

.home-text.on .k-text.ko {
  color: rgba(237, 238, 231, 0.2);
}
/*  */
/* boot = 발행 소개글(homeSetting) 적용 전 대기 — 시드→발행본 교체 깜빡임을 가린다.
   visibility 라 레이아웃은 그대로고, JS 없는 크롤러에는 boot 가 안 붙는다. */
body.boot .home-text .k-text {
  visibility: hidden;
}
body.kr .home-text .k-text.en {
  display: none;
}
body.kr .home-text .k-text.ko {
  display: block;
}
body.en .home-text .k-text.en {
  display: block;
}
body.en .home-text .k-text.ko {
  display: none;
}
.home-text .k-text.ko {
  font-size: 32px;
  line-height: 48px;
  margin-top: 92px;
}
@media screen and (max-width: 1120px) and (min-width: 100px) {
  .home-text br.pc2 {
    display: none;
  }
}

.lang {
  color: #6b9c80;
  position: fixed;
  top: 40px;
  right: 80px;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
  font-size: 18px;
  line-height: 18px;
  font-weight: 800;
}

/***************************************
 *
***************************************/
.beta {
  position: absolute;
  top: -2px;
  left: 95px;
  width: 500px;
  display: none;
  overflow: hidden;
  width: 0px;
  transition: all 1s;
  transition-timing-function: ease-in-out;
}
.home .beta {
  display: flex;
}
.beta div {
  padding: 6px 8px;
  border-radius: 4px;
  background-color: #6b9c80;
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
}
.beta.on {
  width: 500px;
}
@media screen and (max-width: 1024px) and (min-width: 100px) {
  .beta {
    left: 75px;
  }
  .beta div {
    font-size: 12px;
  }
  .beta span {
    display: none;
  }
  .lang {
    right: 20px;
  }
}
/***************************************
 *
***************************************/
.rotate-btn {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 172px;
  z-index: 10;
  transition: all 0.25s;
}
.rotate-btn .txt {
  background: url(../images/common.main-circle-green.png) 0 0 no-repeat;
  background-size: cover;
  width: 172px;
  height: 172px;
  display: block;
  animation: anim1 10s linear infinite;
}
body.section2n .rotate-btn .txt {
  background-image: url(../images/common.main-circle-white.png);
}
.rotate-btn.white .txt {
  background-image: url(../images/common.main-circle-white.png);
}
@keyframes anim1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.rotate-btn .ico {
  position: absolute;
  top: 50px;
  left: 59px;
  width: 54px;
  height: 70px;
  background: url(../images/common.main-circle-btn.png) 0 0 no-repeat;
  background-size: contain;
  animation: anim2 1s linear infinite;
}
.rotate-btn.white .ico {
  height: 70px;
  background: url(../images/common.main-circle-btn2.png) 0 0 no-repeat;
  background-size: contain;
  animation: none;
}
/* layout 속성(top) 대신 transform 으로 애니메이션해 매 프레임 리플로우를 없앤다.
   .ico 의 기준 top:50px 위에서 0 → +5px → 0 이므로 기존 50→55→50 과 픽셀 동일. */
@keyframes anim2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}
.blendCanvas {
  position: relative;
}

.view-page3 .rotate-btn {
  opacity: 0;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.15s;
  transition-timing-function: linear;
}
.view-page3 .rotate-btn.on {
  bottom: 30px;
  opacity: 1;
  z-index: 100;
}
.rotate-btn a {
  display: none;
  align-items: center;
  justify-content: center;
  width: 114px;
  box-sizing: border-box;
  padding: 0 10px;
  line-height: 30px;
  margin-top: 40px;
  height: 30px;
  border-radius: 4px;
  background-color: #6b9c80;
  color: #fff;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
}
.rotate-btn a svg {
  margin-left: 4px;
}
.view-page3 .rotate-btn a {
  display: flex;
}

.view-page2[page="4"] .rotate-btn {
  opacity: 1;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.15s;
  transition-timing-function: linear;
  z-index: 100;
  transition: all 0.25s;
}
.view-page2[page="4"] .rotate-btn a {
  display: flex;
}

.section01 {
  overflow: hidden;
  position: relative;
}
.section01 .tag-container {
  display: flex;
  margin-top: 30px;
  flex-wrap: wrap;
  max-width: 400px;
}
.section01 .tag-container div {
  cursor: pointer;
  margin-bottom: 4px;
  white-space: nowrap;
  margin-right: 4px;
  font-size: 12px;
  color: #6b9c80;
  height: 28px;
  padding: 0 8px;
  line-height: 28px;
  border: 1px solid #6b9c80;
  border-radius: 20px;
}
.section01 .tag-container div:hover {
  color: #fff;
  background-color: #6b9c80;
}

.intro-media-list {
  display: flex;
  justify-content: center;
  padding-top: 90vh;
}
.intro-media-list .intro-media-list-inner {
  padding-bottom: 0px;
}
.intro-media-list .intro-media-list-inner .section-item {
  margin-top: 60px;
  cursor: pointer;
}
.intro-media-list .intro-media-list-inner .section-item:first-child {
  margin-top: 0px;
}
.intro-media-list .intro-media-list-inner .section-item .video-wrap {
  position: relative;
  width: 896px;
  height: 504px;
}
.intro-media-list
  .intro-media-list-inner
  .section-item
  .video-wrap
  .k-video.pc
  video {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  transition: all 2s;
}
.intro-media-list .intro-media-list-inner .section-item.none-cursor {
  cursor: none;
}
.intro-view-text {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  display: none;
}
.no-canvas .blendCanvas {
  display: none;
}
.none-cursor .intro-view-text {
  display: block;
}

/*  */
.main-ref-group-section {
  position: relative;
  z-index: -1;
}
.main-ref-group-section.view {
  position: relative;
  z-index: 1;
}
.main-ref-group-section .main-ref-group {
  position: fixed;
  top: 100vh;
  left: 0px;
  width: 100%;
  height: 100vh;
}
.main-ref-group-section .k-select-section {
  top: 0px;
}
.main-ref-group-section .main-ref-group .k-video {
  position: fixed;
  width: 896px;
  height: 504px;
}
.main-ref-group-section .main-ref-group .k-video video {
  width: 100%;
}
.main-ref-group-section .main-ref-group .k-video.mo {
  display: none;
}

.k-mobile .k-video.pc {
  display: none;
}
.k-mobile .k-video.mo {
  display: block;
}
.k-desktop .k-video.pc {
  display: block;
}
.k-desktop .k-video.mo {
  display: none;
}

.main-ref-group-section .main-ref-group .dim {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 200vh;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 0.5s;
  z-index: 1;
}
.main-ref-group-section.on .main-ref-group .dim {
  opacity: 1;
  transition-delay: 0.5s;
}
.main-ref-group-section.active .main-ref-group .dim {
  opacity: 0;
}
.main-ref-group-section.active .main-ref-group {
  --background-color: rgba(237, 238, 231, 1);
}
.main-ref-group-section.active .bg-container {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.view-page1 .dim {
  transition: all 0s 0s;
}
.view-page2 .main-ref-group-section.active .bg-container {
  display: none;
}
/*  */
.main-ref-group-section .k-content {
  height: 100vh;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.main-ref-group-section .title-wrap {
  display: none;
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  justify-content: center;
}
.main-ref-group-section.on .title-wrap {
  display: flex;
}
.main-ref-group-section .title-wrap dl {
  color: #fff;
  text-align: center;
  transition: all 0.25s;
}
.main-ref-group-section .title-wrap dl dt {
  font-size: 80px;
  line-height: 80px;
  font-weight: 700;
  transition: all 0.5s 0.05s;
}
.main-ref-group-section .title-wrap dl dd {
  text-align: center;
  font-size: 16px;
  line-height: 21px;
  margin-top: 43px;
  transition: all 0.5s 0s;
}
.main-ref-group-section .title-wrap dl dd span {
  display: none;
  max-width: 423px;
  word-break: keep-all;
}
.main-ref-group-section.active .title-wrap dl {
  color: #6b9c80;
}
.main-ref-group-section.active .title-wrap dl dt {
  font-size: 48px;
}
.main-ref-group-section.active .title-wrap dl dd {
  margin-top: 30px;
}
body.en .main-ref-group-section .title-wrap dl dd span.en {
  display: inline-block;
}
body.kr .main-ref-group-section .title-wrap dl dd span.kr {
  display: inline-block;
}

/*  */
.k-video.mo .title-wrap2 {
  background-color: rgba(37, 37, 37, 0.6);
  position: absolute;
  top: 0px !important;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.25s;
}
.k-video.mo .title-wrap2 dl {
  color: #fff;
  text-align: center;
  transition: all 0.25s;
}
.k-video.mo .title-wrap2 dl dt {
  font-size: 30px;
  line-height: 30px;
  font-weight: 700;
}
.k-video.mo .title-wrap2 dl dd {
  font-size: 14px;
  line-height: 21px;
  margin-top: 30px;
  padding: 0 20px;
  word-break: keep-all;
}
.k-video.mo .title-wrap2.hide {
  opacity: 0;
}

.k-intro .k-video.mo .title-wrap {
  display: none;
}
@media screen and (max-width: 1024px) and (min-width: 100px) {
  .k-intro .k-video.mo .title-wrap {
    display: block;
  }
  .main-ref-group-section.on .bg-container .title-wrap {
    display: none;
  }
  .view-page1 .main-ref-group .title-wrap {
    padding-top: 0px !important;
  }
  .view-page1 .main-ref-group-section .title-wrap dl dd {
    display: none;
  }

  .home-text br.m {
    display: block;
  }
  .home-text br.pc {
    display: none;
  }

  .intro-media-list .intro-media-list-inner .section-item.none-cursor {
    cursor: pointer;
  }
  .blendCanvas {
    display: none;
  }
  .intro-view-text {
    display: none;
  }
}

.main-ref-group-section .title-wrap dl dt span {
  opacity: 0;
  position: absolute;
  top: -15px;
  font-size: 20px;
  font-weight: 400;
}
.view-page2 .main-ref-group-section .title-wrap dl dt span {
  opacity: 1;
}

.k-select-section .title-wrap dl {
  opacity: 0;
}
.k-select-section.on .title-wrap dl {
  opacity: 1;
}
/*  */
.main-ref-group-list {
  display: none;
  position: relative;
  justify-content: center;
  margin-top: 90px;
}
.main-ref-group-section.active .main-ref-group-list {
  display: flex;
  --background-color: rgba(237, 238, 231, 1);
}
.main-ref-group-list .k-list {
  display: flex;
  flex-wrap: wrap;
  max-width: 1620px;
  width: 100%;
}
.main-ref-group-list .k-list .k-item {
  margin: 0 10px;
  box-sizing: border-box;
  width: calc(33.3% - 20px);
  max-width: 520px;
  transform: matrix(1, 0, 0, 1, 0, 30);
  opacity: 0;
  cursor: pointer;
}
/* 타일 4개 이상인 그룹: 한 줄 유지 + 가로 스와이프/드래그, 타일 크기는 3개일 때와 동일.
   .is-swiper / .has-nav 는 k.mainRefGroup.js resize 에서 개수에 따라 붙인다. */
/* 스와이프 모드는 전폭이다 — 시안 P-List 캐러셀은 타일이 화면 양옆으로 흘러넘친다.
   첫 화면의 "가운데 3개" 정렬은 JS 가 slidesOffset 으로 잡는다(k.mainRefGroup.js). */
.main-ref-group-list.is-swiper {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.main-ref-group-list.is-swiper .k-list {
  flex-wrap: nowrap;
  max-width: none; /* 1620 제한이 남으면 타일 % 폭·오프셋 기준이 어긋난다 */
}
.main-ref-group-list.is-swiper .k-list .k-item {
  flex: 0 0 auto;
}
/* 시안 P-List(371:114) Page 바 — 목록 아래 중앙 정렬, 아이콘 간 30px, 타일 하단에서 20px.
   부모(.main-ref-group-list)가 flex 라 바를 다음 줄로 내린다. */
.main-ref-group-list.has-nav {
  flex-wrap: wrap;
}
.main-ref-group-list .tile-page {
  display: none;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 20px;
}
.main-ref-group-list.has-nav .tile-page {
  display: flex;
}
.main-ref-group-list .tile-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.25s;
}
.main-ref-group-list .tile-nav:hover {
  opacity: 0.6;
}
/* Swiper 가 끝에 도달하면 붙이는 클래스 — 클릭은 막고 흐리게만 */
.main-ref-group-list .tile-nav.swiper-button-disabled {
  opacity: 0.25;
  pointer-events: none;
}
.main-ref-group-list .k-list .k-item .title {
  font-size: 16px;
  line-height: 16px;
  color: #6b9c80;
  margin-top: 20px;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.main-ref-group-list .k-list .k-item ul {
  display: flex;
  margin-top: 12px;
  width: 100%;
  flex-wrap: wrap;
}
.main-ref-group-list .k-list .k-item ul li {
  margin-bottom: 4px;
  white-space: nowrap;
  font-size: 12px;
  color: #6b9c80;
  padding: 6px;
  border: 1px solid #6b9c80;
  border-radius: 20px;
  margin-right: 4px;
}
.main-ref-group-list .k-list .k-item ul li button {
  font-size: 12px;
  color: #6b9c80;
}
.main-ref-group-list .k-list .k-item .k-img img {
  width: 100%;
  width: 100%;
  height: 360px;
  object-fit: cover;
  transition: all 0.5s;
}
.main-ref-group-list .k-list .k-item .t-video video {
  width: 100%;
  height: 360px;
  object-fit: cover;
  transition: all 0.5s;
}
.main-ref-group-list .k-list .k-item .t-video {
  display: none;
}
.main-ref-group-list .k-list .k-item .t-video.on {
  display: block;
}

/*  */
.ref-detail {
  position: relative;
  z-index: 10;
  display: none;
}
.ref-detail .bg-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.ref-detail .bg-container .bg-img {
  position: fixed;
  width: 100%;
}
.ref-detail .bg-container .title {
  opacity: 0;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
  font-size: 100px;
  line-height: 120px;
  color: #fff;
  position: absolute;
  bottom: 60px;
  left: 60px;
  font-weight: 900;
}
img.clone {
  position: fixed;
  top: 0px;
  left: 0px;
  object-fit: cover;
}
img.clone-absolute {
  position: absolute;
  top: 0px;
  left: 0px;
  object-fit: cover;
}
.ref-detail.complete .clone {
  position: relative;
  width: 100% !important;
}
.ref-detail.complete .detail-content {
  height: 1000px;
  background-color: #fff;
}
.detail-load-view .ref-detail {
  display: block;
}
.ref-detail .detail-content {
  opacity: 0;
}
.ref-detail .detail-content img {
  width: 100%;
}
.ref-detail .detail-content .footer {
  background-color: #edeee7;
}

body > img.clone {
  z-index: 10;
}

video.clone {
  position: fixed;
  top: 0px;
  left: 0px;
  object-fit: cover;
}
video.clone-absolute {
  position: absolute;
  top: 0px;
  left: 0px;
  object-fit: cover;
}
body > video.clone {
  z-index: 10;
}

/* view */
.view-page1 .k-intro,
.view-page2 .k-intro,
.detail-load-view .k-intro,
.view-page3 .k-intro {
  --display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  opacity: 0;
}

.view-page2 .main-ref-group-section .main-ref-group,
.detail-load-view .main-ref-group-section .main-ref-group {
  position: relative;
  top: initial;
}
.detail-load-view
  .main-ref-group-section
  .main-ref-group.view
  .title-wrap
  dl
  dt {
  opacity: 0 !important;
  transform: matrix(1, 0, 0, 1, 0, -100) !important;
  transition: all 0.5s 0s;
}
.detail-load-view
  .main-ref-group-section
  .main-ref-group.view
  .title-wrap
  dl
  dd {
  opacity: 0 !important;
  transform: matrix(1, 0, 0, 1, 0, -50) !important;
  transition: all 0.5s 0.05s;
}
.detail-load-view .rotate-btn {
  --opacity: 0;
}

.view-page3 .main-ref-group-section {
  display: none;
}
.main-ref-group:not(.k-select-section) .title-wrap {
  --padding-top: 80px;
  opacity: 0;
  transition: all 0.5s;
}
.main-ref-group:not(.k-select-section) .title-wrap dt {
  opacity: 0;
  transition: all 0.5s;
}
.main-ref-group:not(.k-select-section) .title-wrap dd {
  opacity: 0;
  transition: all 0.5s;
}
.main-ref-group:not(.k-select-section).view .title-wrap {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}
.main-ref-group:not(.k-select-section).view .title-wrap dt {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}
.main-ref-group:not(.k-select-section).view .title-wrap dd {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}
.main-ref-group:not(.k-select-section).wheel-down .title-wrap dt {
  transform: matrix(1, 0, 0, 1, 0, 70);
}
.main-ref-group:not(.k-select-section).wheel-down .title-wrap dd {
  transform: matrix(1, 0, 0, 1, 0, 50);
}
.main-ref-group:not(.k-select-section).wheel-up .title-wrap dt {
  transform: matrix(1, 0, 0, 1, 0, -50);
}
.main-ref-group:not(.k-select-section).wheel-up .title-wrap dd {
  transform: matrix(1, 0, 0, 1, 0, -70);
}
.main-ref-group.k-select-section .title-wrap {
  opacity: 1;
  transition: all 0.5s;
}
.main-ref-group.k-select-section.wheel-up .title-wrap {
  opacity: 0 !important;
  transform: matrix(1, 0, 0, 1, 0, -50) !important;
}

.main-ref-group:not(.k-select-section) .k-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.view-page2 {
  overflow: hidden;
}
.k-header {
  z-index: 11;
}
.home-text .k-text {
  display: none;
}
.home .home-text .k-text {
  display: block;
  font-weight: 100;
  word-break: keep-all;
}
body:not(.home) .home-text .k-text {
  display: none !important;
}

.main-ref-group:nth-child(2n) {
  background-color: #2e3c34 !important;
}
.main-ref-group:nth-child(2n) dl {
  color: #fff !important;
}
.main-ref-group:nth-child(2n) .title {
  color: #fff !important;
}
.main-ref-group:nth-child(2n) li {
  color: #fff !important;
  --border-color: #fff !important;
}

.k-text.en {
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
}

.font14 {
  font-size: 14px;
}
.font16 {
  font-size: 16px;
  line-height: 16px;
}
.font18 {
  font-size: 18px;
}
.font24 {
  font-size: 24px;
  line-height: 36px;
}
.font30 {
  font-size: 30px;
}
.font36 {
  font-size: 36px;
}
.font48 {
  font-size: 48px;
  line-height: 58px;
}
.font80 {
  font-size: 80px;
}
.font100 {
  font-size: 100px;
  line-height: 100px;
}

.parallax.alpha {
  opacity: 0;
}
.parallax.alpha[data-opacity="0"] {
  opacity: 0 !important;
  transition: opacity 0.5s;
}
.parallax.alpha[data-opacity="0.5"] {
  opacity: 1 !important;
  transition: opacity 0.5s;
}
.parallax.alpha[data-opacity="1"] {
  opacity: 1 !important;
  transition: opacity 0.5s;
}

.k-footer {
  background-color: #edeee7 !important;
  position: relative;
  overflow: hidden;
}
.k-footer .section-inner {
  width: 100%;
  padding: 200px 60px 30px 60px;
}
.k-footer {
  display: flex;
  justify-content: center;
}
.k-footer .section-inner {
  box-sizing: border-box;
  width: 100%;
}

.k-footer .tov-title {
  font-family: "Montserrat";
  color: #6b9c80;
}
.k-footer .tov-title .k-text {
  display: inline-block;
}
.k-footer .tov-title.first {
  display: flex;
}
.k-footer .tov-title.first .k-text {
  margin-left: 20px;
}
.k-footer .tov-title.last {
  display: flex;
}
.k-footer .copyright {
  position: absolute;
  bottom: 30px;
  left: 0px;
  right: 0px;
  text-align: center;
  color: #6b9c80;
}

/***********************************************************************
* KT ai mental care
***********************************************************************/
.ai-mental {
  font-family: "Pretendard";
  background-color: #edeee7;
}
.ai-mental .k-section {
  justify-content: center;
  background-color: #fff;
}
.ai-mental .k-section .section-inner {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: center;
}
.ai-mental .k-section .sc-wrap {
  width: 100%;
  max-width: 1920px;
}

.ai-mental .section01 .section-inner {
  color: #fff;
  background-color: #f6ac4b;
  display: flex;
  padding: 100px 60px;
}
.ai-mental .section01 .k-left {
  flex: 1 auto;
}
.ai-mental .section01 .k-right {
  width: 860px;
}
.ai-mental .section01 .tag-container div {
  color: #fff;
  border-color: #fff;
}
/*  */
.ai-mental .section02 {
  background-color: #fff;
}
.ai-mental .section02 .section-inner {
  height: 100vh;
}
.ai-mental .section02 .sc-wrap {
}
.ai-mental .section02 .list {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.ai-mental .section02 .list .list-inner {
  color: #fff;
}
.ai-mental .section02 .list .item {
  border-bottom: 2px solid #fff;
  margin-bottom: 40px;
  padding-bottom: 40px;
}
.ai-mental .section02 .list .item:last-child {
  border-bottom: 0px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
.ai-mental .section02 .list dl {
  display: flex;
  justify-content: flex-start;
}
.ai-mental .section02 .list dl dt {
  font-size: 36px;
  width: 200px;
  min-width: 200px;
  font-weight: 700;
  position: relative;
}
.ai-mental .section02 .list dl dd {
  padding-left: 75px;
}
.ai-mental .section02 .list dl dd ul {
}
.ai-mental .section02 .list dl dd ul li {
  padding-left: 20px;
  letter-spacing: -0.48px;
  position: relative;
  font-size: 24px;
  line-height: 40px;
}
.ai-mental .section02 .list dl dd ul li:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #fff;
}
.ai-mental .section02 .k-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}
.ai-mental .section02 .k-bg img {
  height: 100vh;
  object-fit: cover;
  object-position: center;
  width: 100%;
}
.ai-mental .section02.section-top .k-bg {
  position: fixed;
}
/*  */
.ai-mental .section03 {
  background-color: #fff;
}
.ai-mental .section03 .section-inner {
  padding: 288px 0;
  flex-direction: column;
}
.ai-mental .section03 .title {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  text-align: center;
}
.ai-mental .section03 .list {
  display: flex;
  justify-content: center;
  margin-top: 160px;
}
.ai-mental .section03 .list .list-inner {
  display: flex;
}
.ai-mental .section03 .list .item {
  margin: 0 30px;
  text-align: center;
}
.ai-mental .section03 .list .item div {
  margin-top: 30px;
  font-size: 20px;
  line-height: 20px;
  text-transform: uppercase;
}
#glslCanvas {
  position: absolute;
  top: 0px;
}
.ai-mental .section03 .k-cont {
  position: relative;
}
/*  */
.ai-mental .section04 {
  background-color: #fff;
}
.ai-mental .section04 .section-inner {
}
.ai-mental .section04 img {
  object-fit: cover;
  width: 100%;
  height: 100vh;
}
/*  */
.ai-mental .section05 {
  background-color: #fff;
  border-top: 3px solid #000;
}
.ai-mental .section05 .section-inner {
  padding: 100px 0;
  flex-direction: column;
}
.ai-mental .section05 .title {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  text-align: center;
}
.ai-mental .section05 .list {
  display: flex;
  justify-content: center;
  margin-top: 160px;
}
.ai-mental .section05 .list .list-inner {
  display: flex;
}
.ai-mental .section05 .list .item {
}
.ai-mental .section05 .list .item {
  width: 375px;
  margin: 0 50px;
}
.ai-mental .section05 .list .item img {
  width: 100%;
}
/*  */
.ai-mental .section06 {
  background-color: #fff;
  border-top: 3px solid #000;
}
.ai-mental .section06 .section-inner {
  padding: 100px 0;
  flex-direction: column;
}
.ai-mental .section06 .bg {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
}
.ai-mental .section06 .bg img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}
.ai-mental .section06 .k-cont {
  position: relative;
}
.ai-mental .section06 .title {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  text-align: center;
}
.ai-mental .section06 .list {
  display: flex;
  justify-content: center;
  margin-top: 160px;
}
.ai-mental .section06 .list .list-inner {
  display: flex;
}
.ai-mental .section06 .list .item {
}
.ai-mental .section06 .list .item {
  width: 375px;
  margin: 0 50px;
}
.ai-mental .section06 .list .item img {
  width: 100%;
}
/*  */
.ai-mental .section07 {
  background-color: #fff;
  border-top: 3px solid #000;
}
.ai-mental .section07 .section-inner {
  padding: 100px 0;
  flex-direction: column;
}
.ai-mental .section07 .title {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  text-align: center;
}
.ai-mental .section07 .list {
  display: flex;
  justify-content: center;
  margin-top: 160px;
}
.ai-mental .section07 .list .list-inner {
  display: flex;
}
.ai-mental .section07 .list .item {
}
.ai-mental .section07 .list .item {
  width: 375px;
  margin: 0 50px;
}
.ai-mental .section07 .list .item img {
  width: 100%;
}
/*  */
.ai-mental .section08 {
  background-color: #fff;
  border-top: 3px solid #000;
}
.ai-mental .section08 .section-inner {
  padding: 100px 0;
  flex-direction: column;
}
.ai-mental .section08 .title {
  font-size: 30px;
  line-height: 45px;
  font-weight: 600;
  text-align: center;
}
.ai-mental .section08 .list {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
.ai-mental .section08 .list .list-inner {
  display: flex;
}
.ai-mental .section08 .list .item {
  width: 33.3%;
  max-width: 600px;
  padding: 0 20px;
  box-sizing: border-box;
}
.ai-mental .section08 .list .item img {
  width: 100%;
}
.ai-mental .section08 .list2 {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
.ai-mental .section08 .list2 .list-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ai-mental .section08 .list2 .item {
  width: 50%;
  max-width: 915px;
  padding: 20px;
  box-sizing: border-box;
}
.ai-mental .section08 .list2 .item img {
  width: 100%;
}
.ai-mental .section-ci .k-content .img-wrap .img02 {
  width: 39px;
}
.ai-mental .section-ci .k-content .img-wrap .img02 img {
  width: 39px;
}

.ai-mental .section04 img.m {
  display: none;
}
@media screen and (max-width: 1024px) and (min-width: 100px) {
  .ai-mental .section02 .section-inner {
    height: initial;
  }
  .ai-mental .section02 .list {
    height: initial;
    padding: 100px 16px;
  }
  .ai-mental .section02 .list dl dt {
    font-size: 14px;
    line-height: 20px;
    width: initial;
    min-width: 25px;
  }
  .ai-mental .section02 .list dl dd ul li {
    font-size: 14px;
    line-height: 24px;
  }
  .ai-mental .section02 .list dl dd {
    padding-left: 20px;
  }
  .ai-mental .section02 .list dl dd ul li:after {
    width: 4px;
    height: 4px;
    top: calc((50% - 3px));
  }
  .ai-mental .section02 .list .item {
    padding-bottom: 20px;
    margin-bottom: 20px;
    position: relative;
  }
  .ai-mental .section02 .k-bg {
    height: 100%;
  }
  .ai-mental .section02 .k-bg img {
    height: 100%;
  }
  .ai-mental .section02.section-top .k-bg {
    position: absolute;
  }
  /*  */
  .ai-mental .section03 .section-inner {
    padding: 60px 0 30px 0;
  }
  .ai-mental .section03 .k-cont {
    padding: 0 20px;
  }
  .ai-mental .section03 .title {
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
  }
  .ai-mental .section03 .title br {
    display: none;
  }
  .ai-mental .section03 .list {
    margin-top: 40px;
    flex-wrap: wrap;
  }
  .ai-mental .section03 .list .list-inner {
    flex-wrap: wrap;
  }
  .ai-mental .section03 .list .item {
    width: 50%;
    margin: 0px;
    margin-bottom: 30px;
  }
  .ai-mental .section03 .list .item svg {
    width: 122px;
    height: 120px;
  }
  .ai-mental .section03 .list .item div {
    font-size: 12px;
    line-height: 12px;
    margin-top: 15px;
  }
  /*  */
  .ai-mental .section04 img {
    height: 500px;
  }
  .ai-mental .section04 img.m {
    display: block;
  }
  .ai-mental .section04 img.pc {
    display: none;
  }
  /*  */
  .ai-mental .section05 .section-inner {
    padding: 60px 20px 60px 20px;
  }
  .ai-mental .section05 .title {
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
  }
  .ai-mental .section05 .list {
    margin-top: 40px;
  }
  .ai-mental .section05 .list .item {
    width: 33.3%;
    margin: 0px;
  }
  .ai-mental .section05 .list span {
    width: 12px;
    display: inline-block;
  }
  /*  */
  .ai-mental .section06 .section-inner {
    padding: 60px 0;
  }
  .ai-mental .section06 .title {
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
  }
  .ai-mental .section06 .list {
    margin-top: 40px;
  }
  .ai-mental .section06 .list .list-inner {
    min-width: 110vw;
  }
  .ai-mental .section06 .list .item {
    width: 25%;
    margin: 0px;
  }
  .ai-mental .section06 .list span {
    width: 10px;
    display: inline-block;
  }
  /*  */
  .ai-mental .section07 .section-inner {
    padding: 60px 20px 60px 20px;
  }
  .ai-mental .section07 .title {
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
  }
  .ai-mental .section07 .list {
    margin-top: 40px;
  }
  .ai-mental .section07 .list .item {
    width: 33.3%;
    margin: 0px;
  }
  .ai-mental .section07 .list span {
    width: 12px;
    display: inline-block;
  }
  /*  */
  .ai-mental .section08 .section-inner {
    padding: 60px 0px 60px 0px;
  }
  .ai-mental .section08 .title {
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
  }
  .ai-mental .section08 .list {
    margin-top: 40px;
  }
  .ai-mental .section08 .list .list-inner {
    display: block;
  }
  .ai-mental .section08 .list .item {
    width: 100%;
    padding: 0 55px;
    margin-top: 10px;
    max-width: 100%;
  }
  .ai-mental .section08 .list .item:first-child {
    margin-top: 0px;
  }
  .ai-mental .section08 .list .item img {
    width: 100%;
  }
  .ai-mental .section08 .list2 {
    margin-top: 40px;
  }
  .ai-mental .section08 .list2 .list-inner {
    min-width: 120vw;
  }
  .ai-mental .section08 .list2 .item {
    max-width: initial;
    padding: 10px;
  }
}

/***********************************************************************
* Samsung DS - PLM-System
***********************************************************************/
.plm-system {
  font-family: "Pretendard";
  background-color: #edeee7;
}
.plm-system .k-section {
  justify-content: center;
  background-color: #fff;
}
.plm-system .k-section .section-inner {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: center;
}
.plm-system .k-section .sc-wrap {
  width: 100%;
  max-width: 1920px;
}
.plm-system .k-section .sc-wrap .head-size img {
  width: initial;
}

.plm-system .section01 .section-inner {
  display: flex;
  padding: 100px 60px;
}
.plm-system .section01 .k-left {
  flex: 1 auto;
}
.plm-system .section01 .k-right {
  width: 860px;
}

.plm-system .section01 {
  background-color: #01062e;
}
.plm-system .section01 div {
  color: #fff;
}
/*  */
.plm-system .section02 {
  background-color: #fff;
}
.plm-system .section02 .section-inner {
  padding: 156px 0;
}
.plm-system .section02 .list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.plm-system .section02 .list .list-inner {
}
.plm-system .section02 .list .item {
  border-bottom: 2px solid #000;
  margin-bottom: 40px;
  padding-bottom: 40px;
}
.plm-system .section02 .list .item:last-child {
  border-bottom: 0px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
.plm-system .section02 .list dl {
  display: flex;
  justify-content: flex-start;
}
.plm-system .section02 .list dl dt {
  font-size: 36px;
  width: 200px;
  min-width: 200px;
  font-weight: 700;
}
.plm-system .section02 .list dl dd {
  padding-left: 75px;
}
.plm-system .section02 .list dl dd ul {
}
.plm-system .section02 .list dl dd ul li {
  padding-left: 20px;
  letter-spacing: -0.48px;
  position: relative;
  font-size: 24px;
  line-height: 40px;
}
.plm-system .section02 .list dl dd ul li:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #000;
}
/*  */
.plm-system .section03 {
  background-color: #fff;
}
.plm-system .section03 .section-inner {
  padding: 184px 0;
}
.plm-system .section03 .list {
  display: flex;
  justify-content: center;
}
.plm-system .section03 .list .list-inner {
  display: flex;
}
.plm-system .section03 .list .item {
  border-radius: 16px;
  background-color: #f1f2f5;
  margin: 0 10px;
  padding: 60px;
  width: 786px;
  box-sizing: border-box;
}
.plm-system .section03 .list .item .title {
  font-size: 36px;
  line-height: 36px;
  letter-spacing: -0.72px;
  font-weight: 800;
}
.plm-system .section03 .list .item .sub-ttl {
  font-size: 20px;
  font-weight: 700;
  margin-top: 64px;
}
.plm-system .section03 .list .item ul {
  font-size: 20px;
  margin-top: 43px;
  padding-left: 13px;
}
.plm-system .section03 .list .item ul li {
  position: relative;
  line-height: 36px;
}
.plm-system .section03 .list .item.left ul li {
  padding-left: 17px;
}
.plm-system .section03 .list .item.left ul li:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #000;
}
.plm-system .section03 .list .item.left ul li {
}
.plm-system .section03 .list .item.right ul {
  padding-left: 8px;
}

/*  */
.plm-system .section04 {
  background-color: #fff;
}
.plm-system .section04 .section-inner {
  padding: 100px 0;
}
.plm-system .section04 .sec-ttl {
  font-size: 36px;
  line-height: 43px;
  font-weight: 800;
  text-align: center;
}
.plm-system .section04 .cl-wrap {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
.plm-system .section04 .cl-wrap .inner {
  display: flex;
  justify-content: space-around;
  max-width: 1514px;
  width: 100%;
}
.plm-system .section04 .cl-wrap .inner .item {
  position: relative;
}
.plm-system .section04 .cl-wrap .inner .item .type {
  position: absolute;
  top: -15px;
  text-align: center;
  width: 100%;
  text-align: center;
}
.plm-system .section04 .cl-wrap .inner .item .type span {
  border-radius: 30px;
  font-size: 16px;
  line-height: 16px;
  display: inline-block;
  padding: 10px 20px;
  background-color: #ced6ee;
  color: #9d90a5;
}
.plm-system .section04 .cl-wrap .inner .item .type span.func {
  background-color: #c9e9f2;
  color: #7498a2;
}
.plm-system .section04 .cl-wrap .inner .item dl {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 280px;
  height: 280px;
  border: 1px solid #000;
  border-radius: 50%;
}
.plm-system .section04 .cl-wrap .inner .item dl dt {
  font-size: 24px;
  font-weight: 700;
}
.plm-system .section04 .cl-wrap .inner .item dl dd {
  display: flex;
  align-items: center;
  height: 72px;
  text-align: center;
  margin-top: 30px;
  font-size: 16px;
  line-height: 24px;
  color: #a2a2a2;
  letter-spacing: -0.32px;
}
.plm-system .section04 .bottom {
  display: flex;
  justify-content: center;
  margin-top: 68px;
}
.plm-system .section04 .bottom .inner {
  max-width: 1514px;
  width: 100%;
}
.plm-system .section04 .bottom .ttl {
  font-size: 20px;
  font-weight: 700;
  text-decoration: underline;
}
.plm-system .section04 .bottom .list {
}
.plm-system .section04 .bottom .list .list-inner {
  display: flex;
  justify-content: space-between;
}
.plm-system .section04 .bottom .list .list-inner .item {
  font-size: 20px;
}
.plm-system .section04 .bottom .list .list-inner .item dl {
  line-height: 38px;
  margin-top: 45px;
}
.plm-system .section04 .bottom .list .list-inner .item dt {
  font-weight: 700;
}
.plm-system .section04 .bottom .list .list-inner .item dt dd {
}
.plm-system .section04 .bottom .list .list-inner .item dl dd ul {
  padding-left: 13px;
}
.plm-system .section04 .bottom .list .list-inner .item dl dd ul li {
  padding-left: 20px;
  position: relative;
  letter-spacing: -0.4px;
}
.plm-system .section04 .bottom .list .list-inner .item dl dd ul li:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #000;
}
/*  */
.plm-system .section05 {
  background-color: #fff;
  border-top: 3px solid #000;
}
.plm-system .section05 .section-inner {
  padding: 100px 0;
}
.plm-system .section05 .top {
  padding: 0 200px;
}
.plm-system .section05 .top dl {
}
.plm-system .section05 .top dl dt {
  font-size: 24px;
  line-height: 24px;
  color: #00c365;
  letter-spacing: -0.48px;
  font-weight: 700;
}
.plm-system .section05 .top dl dd {
  font-size: 36px;
  font-weight: 800;
  margin-top: 16px;
  letter-spacing: -0.72px;
}
.plm-system .section05 .center {
  text-align: center;
  margin-top: 100px;
}
.plm-system .section05 .center ul {
}
.plm-system .section05 .center ul li {
  margin-bottom: 100px;
}
.plm-system .section05 .center ul li span {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 15px;
  box-shadow:
    0px 100px 80px 0px rgba(0, 0, 0, 0.07),
    0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.05),
    0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.04),
    0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.04),
    0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.03),
    0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.02);
}
.plm-system .section05 .bottom {
  display: flex;
  justify-content: center;
}
.plm-system .section05 .bottom dl {
}
.plm-system .section05 .bottom dl dt {
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
}
.plm-system .section05 .bottom dl dd {
  margin-top: 20px;
}
.plm-system .section05 .bottom dl dd ul {
  padding-left: 12px;
}
.plm-system .section05 .bottom dl dd ul li {
  position: relative;
  padding-left: 20px;
  font-size: 20px;
  line-height: 32px;
}
.plm-system .section05 .bottom dl dd ul li:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #000;
}

/*  */
.plm-system .section06 {
  background-color: #fff;
  border-top: 3px solid #000;
}
.plm-system .section06 .section-inner {
  padding: 100px 0;
}
.plm-system .section06 .top {
  padding: 0 200px;
}
.plm-system .section06 .top dl {
}
.plm-system .section06 .top dl dt {
  font-size: 24px;
  line-height: 24px;
  color: #00c365;
  letter-spacing: -0.48px;
  font-weight: 700;
}
.plm-system .section06 .top dl dd {
  font-size: 36px;
  font-weight: 800;
  margin-top: 16px;
  letter-spacing: -0.72px;
}
.plm-system .section06 .top ul {
  margin-top: 30px;
  padding-left: 13px;
}
.plm-system .section06 .top ul li {
  position: relative;
  padding-left: 17px;
  font-size: 20px;
  line-height: 32px;
}
.plm-system .section06 .top ul li:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #000;
}
.plm-system .section06 .center {
  margin-top: 100px;
  display: flex;
  justify-content: center;
}
.plm-system .section06 .center .inner {
  display: flex;
}
.plm-system .section06 .center .inner ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 10px;
}
.plm-system .section06 .center .inner ul li {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  margin-top: 20px;
}
.plm-system .section06 .center .inner ul.last {
}
.plm-system .section06 .center .inner ul.last .group {
  margin-right: 20px;
}
.plm-system .section06 .center .inner ul.last .group div {
  margin-top: 20px;
}
.plm-system .section06 .center .inner ul.last .group div:first-child {
  margin-top: 0px;
}

/*  */
.plm-system .section07 {
  background-color: #fff;
  border-top: 3px solid #000;
}
.plm-system .section07 .section-inner {
  padding: 100px 0;
}
.plm-system .section07 .top {
  padding: 0 200px;
}
.plm-system .section07 .top dl {
}
.plm-system .section07 .top dl dt {
  font-size: 24px;
  line-height: 24px;
  color: #00c365;
  letter-spacing: -0.48px;
  font-weight: 700;
}
.plm-system .section07 .top dl dd {
  font-size: 36px;
  font-weight: 800;
  margin-top: 16px;
  letter-spacing: -0.72px;
}
.plm-system .section07 .top .ttl {
  margin-top: 30px;
  font-size: 20px;
  line-height: 32px;
}
.plm-system .section07 .top ul {
  padding-left: 13px;
}
.plm-system .section07 .top ul li {
  position: relative;
  padding-left: 17px;
  font-size: 20px;
  line-height: 32px;
}
.plm-system .section07 .top ul li:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #000;
}
.plm-system .section07 .cont {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
.plm-system .section07 .cont .inner {
  display: flex;
  max-width: 1450px;
}
.plm-system .section07 .cont .left {
}
.plm-system .section07 .cont .right {
  padding-left: 100px;
  display: flex;
  flex-direction: column;
}
.plm-system .section07 .cont .right .view1 {
  display: flex;
  justify-content: space-between;
}
.plm-system .section07 .cont .right .view1 dl {
}
.plm-system .section07 .cont .right .view1 dl dt {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.plm-system .section07 .cont .right .view1 dl dd {
  display: flex;
  margin-top: 20px;
}
.plm-system .section07 .cont .right .view1 dl dd div {
  margin-left: 10px;
}
.plm-system .section07 .cont .right .view1 dl dd div:first-child {
  margin-left: 0px;
}
.plm-system .section07 .cont .right .view2 {
  margin-top: 80px;
}
.plm-system .section07 .cont .right .view2 dl {
}
.plm-system .section07 .cont .right .view2 dl dt {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.plm-system .section07 .cont .right .view2 dl dd {
  margin-top: 20px;
}
.plm-system .section07 .cont .right .view2 ul {
  display: flex;
}
.plm-system .section07 .cont .right .view2 ul li {
  margin-right: 20px;
}
.plm-system .section07 .cont .right .view3 {
  margin-top: 80px;
}
.plm-system .section07 .cont .right .view3 svg {
  margin-right: 47px;
  margin-bottom: 50px;
}

/*  */
.plm-system .section08 {
  background-color: #fff;
  border-top: 3px solid #000;
}
.plm-system .section08 .section-inner {
  padding: 100px 0;
}
.plm-system .section08 .top {
  padding: 0 200px;
}
.plm-system .section08 .top dl {
}
.plm-system .section08 .top dl dt {
  font-size: 24px;
  line-height: 24px;
  color: #00c365;
  letter-spacing: -0.48px;
  font-weight: 700;
}
.plm-system .section08 .top dl dd {
  font-size: 36px;
  font-weight: 800;
  margin-top: 16px;
  letter-spacing: -0.72px;
}
.plm-system .section08 .cont-kv {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
.plm-system .section08 .cont-kv .img {
  display: block;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0px 95.256px 76.205px 0px rgba(0, 0, 0, 0.05),
    0px 21.277px 17.021px 0px rgba(0, 0, 0, 0.04),
    0px 11.928px 9.542px 0px rgba(0, 0, 0, 0.03),
    0px 6.335px 5.068px 0px rgba(0, 0, 0, 0.02);
}
.plm-system .section08 .cont-kv ul {
  display: flex;
  margin-top: 17px;
  margin-left: 2px;
}
.plm-system .section08 .cont-kv ul li {
  text-align: center;
}
.plm-system .section08 .cont-kv ul li.st {
  width: 193px;
}
.plm-system .section08 .cont-kv ul li.ed {
  flex: 1 auto;
  padding-left: 12px;
}
.plm-system .section08 .cont-kv ul li span {
  position: relative;
  display: block;
  height: 1px;
  background-color: #6d7681;
}
.plm-system .section08 .cont-kv ul li span::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0px;
  width: 1px;
  height: 5px;
  background-color: #6d7681;
}
.plm-system .section08 .cont-kv ul li span::after {
  content: "";
  position: absolute;
  top: -2px;
  right: 0px;
  width: 1px;
  height: 5px;
  background-color: #6d7681;
}
.plm-system .section08 .cont-kv ul li p {
  margin-top: 20px;
  color: #6d7681;
  font-weight: 500;
}
.plm-system .section08 .panel {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
.plm-system .section08 .panel .inner {
  display: flex;
}
.plm-system .section08 .panel .inner .item {
  margin: 0 5px;
}
.plm-system .section08 .panel .inner .item .img {
  background-color: #f1f2f5;
  padding: 60px;
  border-radius: 16px;
}
.plm-system .section08 .panel .inner .item .img.flex-img {
  display: flex;
}
.plm-system .section08 .panel .inner .item .img.flex-img .st {
  margin-right: 10px;
}
.plm-system .section08 .panel .inner .item .img.flex-img > div {
  position: relative;
}
.plm-system .section08 .panel dl {
  margin-top: 30px;
}
.plm-system .section08 .panel dl dt {
  font-size: 24px;
  line-height: 36px;
  font-weight: 600;
}
.plm-system .section08 .panel dl dt span {
  display: inline-block;
  margin-right: 10px;
}
.plm-system .section08 .panel dl dd {
  margin-top: 20px;
}
.plm-system .section08 .panel dl dd ul {
  padding-left: 4px;
}
.plm-system .section08 .panel dl dd ul li {
  font-size: 20px;
  line-height: 38px;
  position: relative;
  padding-left: 17px;
}
.plm-system .section08 .panel dl dd ul li:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #000;
}

.plm-system .section08 .panel .inner .item .guide {
  position: absolute;
  text-align: center;
  margin-top: 10px;
  width: 100%;
}
.plm-system .section08 .panel .inner .item .guide i {
  color: #6d7681;
  font-style: normal;
  display: block;
  margin-top: 15px;
}
.plm-system .section08 .panel .inner .item .guide span {
  position: relative;
  display: block;
  height: 1px;
  background-color: #6d7681;
}
.plm-system .section08 .panel .inner .item .guide span::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0px;
  width: 1px;
  height: 5px;
  background-color: #6d7681;
}
.plm-system .section08 .panel .inner .item .guide span::after {
  content: "";
  position: absolute;
  top: -2px;
  right: 0px;
  width: 1px;
  height: 5px;
  background-color: #6d7681;
}
.plm-system .section08 .bottom {
  margin-top: 100px;
}
.plm-system .section08 .bottom .txt {
  text-align: center;
}
.plm-system .section08 .bottom .txt span {
  font-size: 20px;
  line-height: 32px;
  position: relative;
  padding-left: 17px;
  display: inline-block;
}
.plm-system .section08 .bottom .txt span:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #000;
}
.plm-system .section08 .bottom .noti {
  margin-top: 100px;
  display: flex;
  justify-content: center;
}
.plm-system .section08 .bottom .noti .noti-inner {
}
.plm-system .section08 .bottom .noti .item {
  display: flex;
  position: relative;
  margin-bottom: 20px;
}
.plm-system .section08 .bottom .noti .item .left {
  position: relative;
}
.plm-system .section08 .bottom .noti .item .left span {
  position: absolute;
  right: 40px;
  font-size: 12px;
  line-height: 48px;
  width: 200px;
  text-align: right;
  color: #667a8c;
}
.plm-system .section08 .bottom .noti .item .right {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  line-height: 24px;
  display: flex;
  color: #fff;
  padding: 12px 20px;
  background-color: #4281ec;
  border-radius: 30px;
}
.plm-system .section08 .bottom .noti .item .right .msg {
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding-right: 10px;
  margin-right: 10px;
}
.plm-system .section08 .bottom .noti .item .right .msg svg {
  margin-right: 10px;
}
.plm-system .section08 .bottom .noti .item .right .msg .svg {
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
}
.plm-system .section08 .bottom .noti .item .right .msg .svg svg {
  margin-right: 0px;
}
.plm-system .section08 .bottom .noti .item .right .msg span {
  margin-left: 10px;
  border-radius: 20px;
  display: inline-block;
  padding: 0 10px;
  height: 26px;
  line-height: 26px;
}
.plm-system .section08 .bottom .noti .item .right.blue {
  background-color: #4281ec;
}
.plm-system .section08 .bottom .noti .item .right.green {
  background-color: #50cfb8;
}
.plm-system .section08 .bottom .noti .item .right.orange {
  background-color: #f47c46;
}
.plm-system .section08 .bottom .noti .item .right.green span {
  background-color: #00b99b;
}
.plm-system .section08 .bottom .noti .item .right.orange span {
  background-color: #e6563d;
}
.plm-system .section08 .bottom .noti .item .right .close {
  height: 24px;
  line-height: 24px;
  display: flex;
  align-items: center;
}
/*  */
.plm-system .section09 {
  background-color: #edeef2;
}
.plm-system .section09 .section-inner {
  padding: 200px 0;
}
.plm-system .section09 .title {
  padding: 0 200px;
  font-size: 36px;
  line-height: 43px;
  font-weight: 800;
}
.plm-system .section09 .list {
}
.plm-system .section09 .list .item {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
.plm-system .section09 .list .item ul {
  display: flex;
}
.plm-system .section09 .list .item ul li {
  padding: 0 10px;
}
.plm-system .section09 .list .item ul li span {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  box-shadow:
    0px 75.417px 60.334px 0px rgba(0, 0, 0, 0.03),
    0px 16.845px 13.476px 0px rgba(0, 0, 0, 0.04),
    0px 9.443px 7.555px 0px rgba(0, 0, 0, 0.03),
    0px 5.015px 4.012px 0px rgba(0, 0, 0, 0.02);
}

@media screen and (max-width: 1024px) and (min-width: 100px) {
  .plm-system .section02 .section-inner {
    height: initial;
    padding: 0px;
  }
  .plm-system .section02 .list {
    height: initial;
    padding: 60px 16px;
  }
  .plm-system .section02 .list .list-inner {
    width: 100%;
  }
  .plm-system .section02 .list dl {
    display: block;
  }
  .plm-system .section02 .list dl dt {
    font-size: 14px;
    line-height: 20px;
    width: initial;
    min-width: 25px;
  }
  .plm-system .section02 .list dl dd ul {
    margin-top: 10px;
  }
  .plm-system .section02 .list dl dd ul li {
    font-size: 14px;
    line-height: 24px;
    padding-left: 15px;
  }
  .plm-system .section02 .list dl dd {
    padding-left: 10px;
  }
  .plm-system .section02 .list dl dd ul li:after {
    width: 4px;
    height: 4px;
    top: calc((50% - 3px));
  }
  .plm-system .section02 .list .item {
    padding-bottom: 20px;
    margin-bottom: 20px;
    position: relative;
  }
  .plm-system .section02 .list dl dd ul li:after {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    left: 0px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #000;
  }
  /*  */
  .plm-system .section03 .section-inner {
    padding: 60px 0;
  }
  .plm-system .section03 .list {
    display: block;
  }
  .plm-system .section03 .list .list-inner {
    display: block;
    padding: 0 20px;
  }
  .plm-system .section03 .list .item {
    width: 100%;
    margin: 0px;
    margin-top: 20px;
    padding: 20px;
    width: 100%;
  }
  .plm-system .section03 .list .item:first-child {
    margin-top: 0px;
  }
  .plm-system .section03 .list .item .title {
    font-size: 20px;
    line-height: 30px;
  }
  .plm-system .section03 .list .item .sub-ttl {
    font-size: 16px;
    line-height: 28px;
    margin-top: 20px;
  }
  .plm-system .section03 .list .item ul {
    font-size: 16px;
    line-height: 28px;
    margin-top: 20px;
  }
  /*  */
  .plm-system .section04 .section-inner {
    padding: 60px 20px;
  }
  .plm-system .section04 .sec-ttl {
    font-size: 24px;
    line-height: 36px;
    text-align: left;
  }
  .plm-system .section04 .cl-wrap .inner {
    display: block;
  }
  .plm-system .section04 .cl-wrap .inner .item {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
  }
  .plm-system .section04 .bottom {
    margin-top: 0px;
  }
  .plm-system .section04 .bottom .ttl {
    text-align: center;
  }
  .plm-system .section04 .bottom .list .list-inner {
    display: block;
  }
  .plm-system .section04 .bottom .list .list-inner .item {
    margin-top: 20px;
  }
  .plm-system .section04 .bottom .list .list-inner .item:first-child {
    margin-top: 40px;
  }
  .plm-system .section04 .bottom .list .list-inner .item dl {
    margin-top: 0px;
  }
  .plm-system .section04 .bottom .list .list-inner .item dt {
    font-size: 16px;
    line-height: 30px;
  }
  .plm-system .section04 .bottom .list .list-inner .item dl dd ul {
    padding-left: 10px;
  }
  .plm-system .section04 .bottom .list .list-inner .item dl dd ul li {
    font-size: 16px;
    line-height: 30px;
    padding-left: 10px;
  }
  .plm-system .section04 .bottom .list .list-inner .item dl dd ul li:after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: -1px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: #000;
  }
  /*  */
  .plm-system .section05 .section-inner {
    padding: 60px 20px;
  }
  .plm-system .section05 .top {
    padding: 0px;
  }
  .plm-system .section05 .center ul li span img {
    width: 100%;
  }
  .plm-system .section05 .top dl dt {
    font-size: 16px;
    line-height: 27px;
  }
  .plm-system .section05 .top dl dd {
    font-size: 20px;
    line-height: 24px;
  }
  .plm-system .section05 .center ul li {
    margin-top: 40px;
    margin-bottom: 0px;
  }
  .plm-system .section05 .bottom dl {
    margin-top: 40px;
  }
  .plm-system .section05 .bottom dl dt {
    font-size: 16px;
    line-height: 26px;
  }
  .plm-system .section05 .bottom dl dd {
    margin-top: 20px;
  }
  .plm-system .section05 .bottom dl dd ul {
    padding-left: 10px;
  }
  .plm-system .section05 .bottom dl dd ul li {
    font-size: 16px;
    line-height: 26px;
    padding-left: 10px;
  }
  .plm-system .section05 .bottom dl dd ul li:after {
    content: "";
    position: absolute;
    top: 12px;
    left: -1px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: #000;
  }
  /*  */
  .plm-system .section06 .section-inner {
    padding: 60px 0px;
  }
  .plm-system .section06 .top {
    padding: 0 20px;
  }
  .plm-system .section06 .top ul li {
    padding-left: 10px;
    font-size: 16px;
    line-height: 26px;
  }
  .plm-system .section06 .center ul li span img {
    width: 100%;
  }
  .plm-system .section06 .top dl dt {
    font-size: 16px;
    line-height: 27px;
  }
  .plm-system .section06 .top dl dd {
    font-size: 20px;
    line-height: 24px;
  }
  .plm-system .section06 .top ul {
    padding-left: 10px;
  }
  .plm-system .section06 .top ul li {
    padding-left: 10px;
  }
  .plm-system .section06 .top ul li:after {
    content: "";
    position: absolute;
    top: 14px;
    left: -2px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: #000;
  }
  .plm-system .section06 .center {
    margin-top: 40px;
  }
  .plm-system .section06 .center .inner {
    min-width: 110vw;
  }
  .plm-system .section06 .center .inner ul {
    width: 33.3%;
    margin: 0px;
  }
  .plm-system .section06 .center .inner ul li {
    margin-top: 6px;
    padding: 0 6px;
    box-sizing: border-box;
  }
  .plm-system .section06 .center .inner ul li img {
    width: 100%;
  }
  .plm-system .section06 .center .inner ul.last .group {
    min-width: 60%;
    margin-right: 6px;
  }
  .plm-system .section06 .center .inner ul.last .group div {
    margin-top: 6px;
  }
  .plm-system .section06 .center .inner ul.last .rImg {
    width: 51.3%;
  }
  /*  */
  .plm-system .section07 .section-inner {
    padding: 60px 0px;
  }
  .plm-system .section07 .top {
    padding: 0 20px;
  }
  .plm-system .section07 .center ul li span img {
    width: 100%;
  }
  .plm-system .section07 .top dl dt {
    font-size: 16px;
    line-height: 27px;
  }
  .plm-system .section07 .top dl dd {
    font-size: 20px;
    line-height: 24px;
  }
  .plm-system .section07 .top .ttl {
    font-size: 16px;
    line-height: 26px;
  }
  .plm-system .section07 .top ul {
    padding-left: 10px;
  }
  .plm-system .section07 .top ul li {
    padding-left: 10px;
    font-size: 16px;
    line-height: 26px;
  }
  .plm-system .section07 .top ul li:after {
    content: "";
    position: absolute;
    top: 14px;
    left: -2px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: #000;
  }
  .plm-system .section07 .cont {
    margin-top: 40px;
    display: block;
  }
  .plm-system .section07 .cont .inner {
    display: block;
  }
  .plm-system .section07 .cont .left li {
    text-align: center;
  }
  .plm-system .section07 .cont .left li img {
    max-width: 321px;
  }
  .plm-system .section07 .cont .right {
    padding: 0px;
  }
  .plm-system .section07 .cont .right .view1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .plm-system .section07 .cont .right .view1 dl {
    margin-top: 20px;
  }
  .plm-system .section07 .cont .right .view1 dl dt {
    font-size: 14px;
    line-height: 21px;
  }
  .plm-system .section07 .cont .right .view2 {
    margin-top: 40px;
  }
  .plm-system .section07 .cont .right .view2 ul {
    display: block;
  }
  .plm-system .section07 .cont .right .view2 ul li {
    margin: 0px;
    margin-top: 20px;
  }
  .plm-system .section07 .cont .right .view2 dl {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .plm-system .section07 .cont .right .view2 dl dd {
    margin-top: 0px;
  }
  .plm-system .section07 .cont .right .view3 svg {
    width: 12px;
    height: 12px;
    margin: 20px;
  }
  /*  */
  .plm-system .section08 .section-inner {
    padding: 60px 0px;
  }
  .plm-system .section08 .top {
    padding: 0 20px;
  }
  .plm-system .section08 .center ul li span img {
    width: 100%;
  }
  .plm-system .section08 .top dl dt {
    font-size: 16px;
    line-height: 27px;
  }
  .plm-system .section08 .top dl dd {
    font-size: 20px;
    line-height: 24px;
  }
  .plm-system .section08 .cont-kv {
    margin-top: 40px;
    padding: 0 20px;
  }
  .plm-system .section08 .cont-kv .img {
  }
  .plm-system .section08 .cont-kv .img img {
    width: 100%;
  }
  .plm-system .section08 .cont-kv ul li p {
    font-size: 12px;
    margin-top: 10px;
  }
  .plm-system .section08 .cont-kv ul li.st {
    width: 25.5%;
  }
  .plm-system .section08 .cont-kv ul li.ed {
    width: 74.5%;
    box-sizing: border-box;
  }

  .plm-system .section08 .panel {
    display: none;
  }
  .plm-system .section08 .bottom {
    margin-top: 40px;
  }
  .plm-system .section08 .bottom .noti {
    margin-top: 40px;
  }
  .plm-system .section08 .bottom .noti .item .left {
    width: 30%;
  }
  .plm-system .section08 .bottom .noti .item .left span {
    position: relative;
    text-align: right;
    display: block;
  }
  /*  */
  .plm-system .section09 .section-inner {
    padding: 60px 20px;
  }
  .plm-system .section09 .title {
    padding: 0px;
    margin-bottom: 10px;
  }
  .plm-system .section09 .list .item {
    margin-top: 0px;
  }
  .plm-system .section09 .list .item ul {
    display: block;
  }
  .plm-system .section09 .list .item ul li {
    margin-top: 10px;
  }
  .plm-system .section09 .list .item ul li img {
    width: 100%;
  }
}

@media screen and (max-width: 768px) and (min-width: 100px) {
  .plm-system .section08 .bottom .noti {
    padding: 0 20px;
  }
  .plm-system .section08 .bottom .noti .item {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
  }
  .plm-system .section08 .bottom .noti .item .left span {
    position: relative;
    text-align: left;
    display: block;
    right: initial;
  }
  .plm-system .section08 .bottom .noti .item .right {
  }
  .plm-system .section08 .bottom .noti .item .t-inner {
    display: flex;
  }
  .plm-system .section08 .bottom .noti .item .left span {
    line-height: 24px;
  }
  .plm-system .section08 .bottom .noti .item .right .msg span {
    white-space: nowrap;
  }
  .plm-system .section08 .bottom .noti .item .right {
    padding: 6px 10px;
  }
  .plm-system .section08 .bottom .noti .item .right .msg {
    line-height: 18px;
  }
  .plm-system .section08 .bottom .noti .item .right .msg svg {
    min-width: 20px;
    height: 20px;
  }
  .plm-system .section08 .bottom .noti .item .right .msg .svg {
    min-width: 20px;
  }
  .plm-system .section08 .bottom .noti .item .right .msg .svg svg {
    width: 12px;
    height: 13px;
  }
}

/***********************************************************************
* Samsung DS - DevOps Platform
***********************************************************************/
.samsung-ds {
  font-family: "Pretendard";
  background-color: #edeee7;
}
.samsung-ds .k-section {
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.samsung-ds .k-section .section-inner {
  box-sizing: border-box;
  width: 100%;
}
.samsung-ds .section01 .section-inner {
  display: flex;
  padding: 100px 60px;
}
.samsung-ds .section01 .k-left {
  flex: 1 auto;
}
.samsung-ds .section01 .k-right {
  width: 860px;
}
/*  */
.samsung-ds .section02 {
  background-color: #f8f8f8;
}
.samsung-ds .section02 .k-content {
  padding: 200px 0;
  text-align: center;
}
.samsung-ds .section02 .k-content .desc {
  margin-top: 20px;
}
.samsung-ds .section02 .k-content .k-img {
  text-align: center;
  margin-top: 80px;
}
.samsung-ds .section02 .k-content .k-img img {
  width: 1132px;
}
/*  */
.samsung-ds .section03 {
  background-color: #252525;
}
.samsung-ds .section03 .k-content {
  padding: 200px 0;
  text-align: center;
}
.samsung-ds .section03 .k-content .title {
  color: #fff;
}
.samsung-ds .section03 .k-content .desc {
  margin-top: 20px;
  color: #fff;
}
.samsung-ds .section03 .k-content .img-wrap {
  display: flex;
  justify-content: center;
}
.samsung-ds .section03 .k-content .k-img {
  text-align: center;
  margin: 80px 20px 0 20px;
}
.samsung-ds .section03 .k-content .k-img.img01 img {
  width: 470px;
}
.samsung-ds .section03 .k-content .k-img.img02 img {
  width: 459px;
}
.samsung-ds .section03 .k-content .k-img.img03 img {
  width: 281px;
}
/*  */
.samsung-ds .section04 {
  background-color: #f4f7fd;
}
.samsung-ds .section04 .section-inner {
  padding: 200px 60px;
}
.samsung-ds .section04 .k-content .img-wrap {
  display: flex;
  justify-content: center;
}
.samsung-ds .section04 .k-content .k-img {
  text-align: center;
}
.samsung-ds .section04 .k-content .k-img img {
  max-width: 1556px;
}

/*  */
.samsung-ds .section05 {
  background-color: #2b3136;
  overflow: hidden;
  width: 100%;
  position: relative;
}
.samsung-ds .section05 .section-inner {
  height: 1328px;
}
.samsung-ds .section05 .k-content {
  text-align: center;
  display: flex;
  justify-content: center;
}
.samsung-ds .section05 .k-content .img-wrap {
  width: 2585px;
}
.samsung-ds .section05 .k-content .k-img {
  text-align: center;
}
.samsung-ds .section05 .k-content .k-img {
  width: 842px;
  position: absolute;
  top: 0px;
  left: calc(50% - 420px);
}
.samsung-ds .section05 .k-content .img01 {
  transform: rotate(14deg);
  top: 200px;
}
.samsung-ds .section05 .k-content .img02 {
  transform: rotate(14deg);
  top: 671px;
  left: calc(50% - 536px);
}
.samsung-ds .section05 .k-content .img03 {
  transform: rotate(14deg);
  top: 700px;
  left: calc(50% + 352px);
}
.samsung-ds .section05 .k-content .img04 {
  transform: rotate(14deg);
  top: 146px;
  left: calc(50% - 1306px);
}

/*  */
.samsung-ds .section06 {
  background-color: #f8f8f8;
}
.samsung-ds .section06 .section-inner {
  padding: 200px 40px 100px 40px;
}
.samsung-ds .section06 .k-content {
  text-align: center;
}
.samsung-ds .section06 .k-content .desc {
  margin-top: 20px;
}
.samsung-ds .section06 .k-content .img-wrap {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}
.samsung-ds .section06 .k-content .img-wrap .left {
  padding: 15px 55px 15px 0px;
  box-sizing: border-box;
}
.samsung-ds .section06 .k-content .img-wrap .right {
  padding: 15px 0px 15px 55px;
  box-sizing: border-box;
  margin-top: 162px;
}
.samsung-ds .section06 .k-content .k-img {
  width: 100%;
  text-align: center;
  box-shadow: 11px 11px 30px 3px rgba(0, 0, 0, 0.1);
}
.samsung-ds .section06 .k-content .k-img img {
  max-width: 806px;
  width: 100%;
}
.samsung-ds .section06 .k-content .k-img:first-child {
  margin-bottom: 60px;
}

/*  */
.section-ci .section-inner {
  padding: 200px 0;
}
.section-ci .k-content {
  text-align: center;
}
.section-ci .k-content .img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.section-ci .k-content .k-img {
  text-align: center;
}
.section-ci .k-content .k-img.img01 {
  width: 60px;
}
.section-ci .k-content .k-img.img02 {
  width: 175px;
}
.section-ci .k-content .k-img img {
  width: 100%;
}
.section-ci .k-content .img-wrap .gap {
  margin: 0 30px;
  width: 1px;
  height: 18px;
  background-color: #d9d9d9;
}

.agv-system .section-ci .k-content .k-img.img02 {
  width: 140px;
}

.allwork {
  background-color: #edeee7 !important;
  overflow: hidden;
  width: 100%;
  position: relative;
}
.allwork {
  display: flex;
  justify-content: center;
}
.allwork .section-inner {
  box-sizing: border-box;
  width: 100%;
}
.allwork .section-inner {
  padding: 100px 0px 0 0px;
}
.allwork .section-inner .top {
  display: flex;
  justify-content: space-between;
  padding: 0 60px;
}
.allwork .section-inner .top .k-left button {
  display: flex;
  align-items: center;
}
.allwork .section-inner .top .k-left button .k-text {
  color: #6b9c80;
  margin-left: 10px;
}
.allwork .section-inner .top .k-right {
  display: flex;
  align-items: center;
}
.allwork .section-inner .top .k-right .scroll {
  width: 280px;
  height: 6px;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.allwork .section-inner .top .k-right .scroll .swiper-scrollbar {
  position: absolute;
  width: 82px;
  height: 5px;
  border-radius: 20px;
  background-color: #6b9c80;
}
.swiper-scrollbar-drag {
  background-color: #6b9c80 !important;
}
.allwork .k-list {
  margin-top: 60px;
  padding: 0 60px;
}
.allwork .k-list .inner .swiper-slide {
  width: 450px;
}
.allwork .k-list .k-item {
  cursor: pointer;
}
.allwork .k-list .k-item .k-img {
  width: 450px;
  height: 450px;
  overflow: hidden;
}
.allwork .k-list .k-item .k-img img {
  width: 450px;
  height: 450px;
  object-fit: cover;
  object-position: center;
}
.allwork .k-list .k-item .k-text {
  position: relative;
  overflow: hidden;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
  margin-top: 20px;
  line-height: 27px;
}

.allwork .k-list .k-item .t-video {
  width: 450px;
  height: 450px;
  overflow: hidden;
}
.allwork .k-list .k-item .t-video video {
  width: 450px;
  height: 450px;
  object-fit: cover;
  object-position: center;
}

/***********************************************************************
* CJ-Logistics-AGV-System 
***********************************************************************/
.agv-system {
  font-family: "Pretendard";
  background-color: #edeee7;
}
.agv-system .k-section {
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.agv-system .k-section .section-inner {
  box-sizing: border-box;
  width: 100%;
}
.agv-system .section01 .section-inner {
  display: flex;
  padding: 100px 60px;
}
.agv-system .section01 .k-left {
  flex: 1 auto;
}
.agv-system .section01 .k-right {
  width: 860px;
}

.agv-system .section02 {
  position: relative;
  height: 100vh;
  overflow: hidden;
  width: 100%;
}
.agv-system .section02 .k-text {
  color: #fff;
  line-height: 150px;
}
.agv-system .section02 .img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
}
.agv-system .section02 .img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center;
}
.agv-system .section02 .k-text {
  position: absolute;
  top: calc(50vh - 150px);
  left: 60px;
  display: flex;
  align-items: center;
  z-index: 1;
}
.agv-system .section02.section-top .img {
  position: fixed;
}

.agv-system .section03 {
  background-color: #f8f8f8;
  overflow: hidden;
  width: 100%;
}
.agv-system .section03 .section-inner {
  padding: 200px 40px 200px 40px;
}
.agv-system .section03 .k-content {
  text-align: center;
}
.agv-system .section03 .k-content .desc {
  margin-top: 20px;
}
.agv-system .section03 .k-content .img-wrap {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}
.agv-system .section03 .k-content .k-img {
  margin: 0 45px;
}
.agv-system .section03 .k-content .k-img img {
  width: 300px;
}

.agv-system .section04 {
  background-color: #f8f8f8;
  overflow: hidden;
  width: 100%;
}
.agv-system .section04 .section-inner {
  padding: 0px 40px 200px 40px;
}
.agv-system .section04 .k-content {
  text-align: center;
}
.agv-system .section04 .k-content .desc {
  margin-top: 20px;
}
.agv-system .section04 .k-content .img-wrap {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 80px;
}
.agv-system .section04 .k-content .k-img {
  width: 58px;
  margin: 20px;
}
.agv-system .section04 .k-content .full-img {
  margin-top: 60px;
}
.agv-system .section04 .k-content .full-img img {
  max-width: 1402px;
  width: 100%;
}
/*  */
.agv-system .section05 {
  position: relative;
  height: 100vh;
  overflow: hidden;
  width: 100%;
}
.agv-system .section05 .k-text {
  color: #fff;
  line-height: 150px;
}
.agv-system .section05 .img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
}
.agv-system .section05 .img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center;
}
.agv-system .section05.section-top .img {
  position: fixed;
}

/***********************************************************************
* Newspenguin-Interactive-news
***********************************************************************/
.news-penguin {
  font-family: "Pretendard";
  background-color: #edeee7;
}
.news-penguin .k-section {
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.news-penguin .k-section .section-inner {
  box-sizing: border-box;
  width: 100%;
  position: relative;
}
.news-penguin .section01 .section-inner {
  display: flex;
  padding: 100px 60px;
}
.news-penguin .section01 .k-left {
  flex: 1 auto;
}
.news-penguin .section01 .k-right {
  width: 860px;
}

.news-penguin .section02 {
  width: 100%;
}
.news-penguin .section02 .img img {
  width: 100%;
}

.news-penguin .section03 {
  background-color: #fff;
  position: relative;
  overflow: hidden;
  padding-top: 30px;
  background: #fff url(../images/Newspenguin-Interactive-news.section03-bg.jpg)
    0 0 no-repeat;
  background-size: cover;
}
.news-penguin .section03 .list {
  display: flex;
}
.news-penguin .section03 .list .item {
  position: relative;
  --overflow: hidden;
  width: 33.3%;
  position: relative;
}
.news-penguin .section03 .list .item .img {
  width: 100%;
}
.news-penguin .section03 .list .item .img img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.news-penguin .section03 .list .item dl {
  text-align: center;
  padding: 0 30px;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-penguin .section03 .list .item dl dt {
  color: #fff;
  line-height: 36px !important;
}
.news-penguin .section03 .list .item dl dd {
  color: #fff;
  margin-top: 10px;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
  line-height: 30px !important;
}
.news-penguin .section03 .list .gap {
  width: 30px;
}
/*  */
.news-penguin .section04 {
  padding-top: 250px;
  background-color: #282828;
}
.news-penguin .section04 .head {
  text-align: center;
}
.news-penguin .section04 .k-text {
  color: #fff;
}
.news-penguin .section04 .section-inner {
  display: flex;
  justify-content: center;
}
.news-penguin .section04 .head {
  width: 570px;
  text-align: left;
}
.news-penguin .section04 .head .desc {
  margin-top: 30px;
}
.news-penguin .section04 .chart-wrap {
  margin-top: 30px;
  position: relative;
  padding-bottom: 23px;
  width: 570px;
}
.news-penguin .section04 .chart-wrap .chart-item {
  position: relative;
  margin-top: 60px;
}
.news-penguin .section04 .chart-wrap .chart-item:first-child {
  margin-top: 0px;
}
.news-penguin .section04 .chart-wrap .chart-item .line-wrap {
  padding-left: 10px;
}
.news-penguin .section04 .chart-wrap .chart-item .line-wrap .line1 {
  height: 10px;
  background-color: #eaac3d;
}
.news-penguin .section04 .chart-wrap .chart-item .line-wrap .line2 {
  height: 10px;
  background-color: #55cce5;
  margin-top: 10px;
}
.news-penguin .section04 .chart-wrap .chart-item .k-text {
  position: absolute;
  width: 60px;
  left: -60px;
  font-size: 14px;
  line-height: 14px;
}
.news-penguin .section04 .chart-wrap:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1px;
  height: 100%;
  background-color: #fff;
}
.news-penguin .section04 .chart-wrap:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 1px;
  background-color: #fff;
}
.news-penguin .section04 .bottom {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}
.news-penguin .section04 .bottom span {
  color: #fff;
  font-size: 14px;
}
.news-penguin .section04 .chart-wrap .chart-item.last {
  margin-top: 0px;
  padding: 0px;
}
.news-penguin .section04 .chart-wrap .chart-item.last .k-text {
  top: 12px;
}
.news-penguin .section04 .legend {
  margin-top: 48px;
}
.news-penguin .section04 .legend .k-text {
  color: #fff;
  margin-top: 10px;
  position: relative;
  font-size: 14px;
}
.news-penguin .section04 .legend .k-text:first-child {
  margin-top: 0px;
}
.news-penguin .section04 .legend .st1 {
  padding-left: 20px;
}
.news-penguin .section04 .legend .st1:after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  left: 0px;
  width: 10px;
  height: 10px;
  background-color: #eaac3d;
}
.news-penguin .section04 .legend .st2 {
  padding-left: 20px;
}
.news-penguin .section04 .legend .st2:after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  left: 0px;
  width: 10px;
  height: 10px;
  background-color: #55cce5;
}
.news-penguin .section04 .legend .k-text.st3 {
  margin-top: 10px;
}

/*  */
.news-penguin .section05 {
  padding-top: 250px;
  background-color: #282828;
}
.news-penguin .section05 .k-text {
  color: #fff;
  text-align: center;
  margin-top: 30px;
}
.news-penguin .section05 .img {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.news-penguin .section05 .img img {
  width: 497px;
}
/*  */
.news-penguin .section06 {
  padding-top: 250px;
  background-color: #edeee7;
  overflow: hidden;
  position: relative;
}
.news-penguin .section06 .head {
  display: flex;
  justify-content: space-between;
  padding: 0 60px;
  position: relative;
}
.news-penguin .section06 .head .k-left .st1 {
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
}
.news-penguin .section06 .head .k-left .st2 {
  margin-top: 30px;
}
.news-penguin .section06 .head .k-left .st3 {
  margin-top: 30px;
  color: #8e7f64;
}
.news-penguin .section06 .head .k-right .inner {
  position: relative;
}
.news-penguin .section06 .head .k-right .inner div {
  position: absolute;
  width: 418px;
  height: 418px;
  border: 1px solid #eaac3d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.news-penguin .section06 .head .k-right .c1 {
  right: 178px;
  top: 0px;
}
.news-penguin .section06 .head .k-right .c2 {
  right: calc(178px + 178px);
  top: 297px;
}
.news-penguin .section06 .head .k-right .c3 {
  right: calc(178px - 178px);
  top: 297px;
}
.news-penguin .section06 .head .k-right dl {
  text-align: center;
}
.news-penguin .section06 .head .k-right dl dt {
  font-size: 30px;
  line-height: 30px;
  font-weight: 700;
}
.news-penguin .section06 .head .k-right dl dd {
  font-size: 18px;
  line-height: 18px;
  margin-top: 20px;
}
.news-penguin .section06 .cont {
  margin-top: 680px;
}
.news-penguin .section06 .cont .explore {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.news-penguin .section06 .cont .bird {
  width: 342px;
  position: absolute;
  left: calc(50% - 800px);
  top: -285px;
}
.news-penguin .section06 .cont .bird img {
  width: 100%;
}
.news-penguin .section06 .cont .explore .txt {
  max-width: 931px;
  position: relative;
  z-index: 1;
}
.news-penguin .section06 .cont .explore .txt img {
  width: 100%;
}
.news-penguin .section06 .cont .explore .img {
  max-width: 1124px;
  width: 100%;
  overflow: hidden;
  border: 10px solid #000;
  border-radius: 32px;
  position: relative;
  z-index: 1;
  margin-top: -10px;
}
.news-penguin .section06 .cont .explore .img img {
  width: 100%;
}
.news-penguin .section06 .cont .gamification {
  margin-top: 300px;
  position: relative;
}
.news-penguin .section06 .cont .gamification .inner {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.news-penguin .section06 .cont .gamification .txt {
  max-width: 1287px;
}
.news-penguin .section06 .cont .gamification .txt img {
  width: 100%;
}
.news-penguin .section06 .cont .gamification .img {
  max-width: 1124px;
  width: 100%;
  overflow: hidden;
  border: 10px solid #000;
  border-radius: 32px;
  margin-top: 150px;
}
.news-penguin .section06 .cont .gamification .img img {
  width: 100%;
}
.news-penguin .section06 .cont .gamification .bg {
  position: absolute;
  bottom: -200px;
  left: 0px;
  width: 100%;
}
.news-penguin .section06 .cont .gamification .bg img {
  width: 100%;
}
.news-penguin .section07 {
  padding-top: 320px;
  background-color: #2d3330;
  position: relative;
  overflow: hidden;
}
.news-penguin .section07 .cont {
  display: flex;
  justify-content: space-between;
}
.news-penguin .section07 .cont .img {
  height: 520px;
  box-sizing: border-box;
}
.news-penguin .section07 .cont .img img {
  width: auto;
  height: 100%;
  box-shadow: 11px 11px 30px 3px rgba(0, 0, 0, 0.1);
}
.news-penguin .section07 .cont .img.st1 {
  padding-left: 60px;
}
.news-penguin .section07 .cont .img.st2 {
  padding-left: 120px;
}
.news-penguin .section07 .cont .img.st3 {
  padding-left: 60px;
}
.news-penguin .section07 .cont .img.st4 {
  padding-left: 120px;
}
.news-penguin .section07 .cont2 {
  margin-top: 200px;
}

.flip {
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 300px + 30px);
  width: 600px;
  display: flex;
}
.flip > div {
  width: 200px;
  perspective: 1600px;
  -webkit-perspective: 1600px;
}
.flip img {
  width: 200px !important;
  opacity: 1;
  transition: all 1s;
}
.flip .flip-left img {
  transform: rotateY(180deg) rotateX(0deg);
  transform-origin: 100% 0;
}
.flip .flip-left img {
  margin-top: 2px;
  margin-left: 1px;
}
.flip .flip-right {
  margin-top: 0px;
  margin-right: 0px;
}

.flip .flip-right img {
  transform: rotateY(-180deg) rotateX(0deg);
  transform-origin: 0 0;
}
.flip .flip-right img {
  margin-top: 0px;
  margin-left: 0px;
}

.flip.on img {
  opacity: 1;
}
.flip.on .flip-left img {
  transform: rotateY(0deg) rotateX(0deg);
}
.flip.on .flip-right img {
  transform: rotateY(0deg) rotateX(0deg);
  transition-delay: 0.15s;
}

.news-penguin .section07 .cont3 {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 200px;
}
.news-penguin .section07 .cont3 .st1 {
  position: absolute;
  bottom: 300px;
  left: calc(50% - 800px);
}
.news-penguin .section07 .cont3 .st1 img {
  width: 364px;
}
.news-penguin .section07 .cont3 .st2 {
  position: relative;
}
.news-penguin .section07 .cont3 .st2 img {
  width: 100%;
  max-width: 1029px;
  box-shadow: 11px 11px 30px 3px rgba(0, 0, 0, 0.1);
}

.news-penguin .section07 .cont4 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 280px;
}
.news-penguin .section07 .cont4 .inner {
  display: flex;
}
.news-penguin .section07 .cont4 .img {
  width: 295px;
  margin: 0 30px;
}
.news-penguin .section07 .cont4 .img img {
  width: 100%;
  box-shadow: 11px 11px 30px 3px rgba(0, 0, 0, 0.1);
}

.news-penguin .section07 .cont4 .inner.top .img {
  display: flex;
  align-items: flex-end;
}
.news-penguin .section07 .cont4 .inner.bottom .img {
  display: flex;
  align-items: flex-start;
}

.news-penguin .section07 .cont4 .img.st1 {
  margin-bottom: 178px;
}
.news-penguin .section07 .cont4 .img.st2 {
  margin-bottom: 110px;
}
.news-penguin .section07 .cont4 .img.st5 {
  margin-top: 40px;
}
.news-penguin .section07 .cont4 .img.st6 {
  margin-top: 70px;
}

.news-penguin .section08 {
  position: relative;
  background-color: #edeee7;
}
.news-penguin .section08:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 1px;
  background-color: #2d3330;
}
.news-penguin .section08 .img img {
  width: 100%;
  height: 101vh;
  object-fit: cover;
}

/***********************************************************************
* qcell
***********************************************************************/
.qcell {
  font-family: "Pretendard";
  background-color: #edeee7;
}
.qcell .k-section {
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.qcell .k-section .section-inner {
  box-sizing: border-box;
  width: 100%;
}
.qcell .section01 .section-inner {
  display: flex;
  padding: 100px 60px;
}
.qcell .section01 .k-left {
  flex: 1 auto;
}
.qcell .section01 .k-right {
  width: 860px;
}

.qcell .section-ci .img2 img {
  width: 145px;
}

.qcell .section02 .k-list {
  display: flex;
  flex-wrap: wrap;
}
.qcell .section02 .k-list .k-img {
  height: 526px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.qcell .section02 .k-list .k-img img {
  object-fit: cover;
  height: 526px;
}
.qcell .section02 .k-list .k-img.img01 {
  width: 30%;
}
.qcell .section02 .k-list .k-img.img02 {
  width: 50%;
  padding-left: 20px;
  padding-right: 20px;
}
.qcell .section02 .k-list .k-img.img03 {
  width: 20%;
}
.qcell .section02 .k-list .k-img.img04 {
  width: 20%;
  margin-top: 20px;
  padding-right: 20px;
}
.qcell .section02 .k-list .k-img.img05 {
  width: 20%;
  margin-top: 20px;
  padding-right: 20px;
}
.qcell .section02 .k-list .k-img.img06 {
  width: 20%;
  margin-top: 20px;
  padding-right: 20px;
}
.qcell .section02 .k-list .k-img.img07 {
  width: 40%;
  margin-top: 20px;
}

.qcell .section03 {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 200px 0;
  background-color: #f8f8f8;
}
.qcell .section03 .title {
  font-size: 40px;
  font-weight: 400;
  text-align: center;
}
.qcell .section03 .img-wrap {
  display: flex;
  justify-content: center;
  padding: 0 40px;
}
.qcell .section03 .k-img {
  margin-top: 80px;
}
.qcell .section03 .k-img img {
  max-width: 1320px;
}

.qcell .section03 .top {
  display: flex;
  justify-content: center;
  margin-top: 80px;
  display: none;
}
.qcell .section03 .top > div {
  position: relative;
  margin: 0 40px;
  font-size: 30px;
  font-weight: 700;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.qcell .section03 .c-item01 {
  background: radial-gradient(50% 50% at 50% 50%, #b4ebef 0%, #b4ebef 100%);
  color: #6ca1a1;
}
.qcell .section03 .c-item02 {
  background-color: #b7f1d8;
  color: #7db48d;
}
.qcell .section03 .c-item03 {
  background-color: #e5efa4;
  color: #a8b361;
}
.qcell .section03 .c-item04 {
  background-color: #bed5f7;
  color: #487ea4;
}
.qcell .section03 .c-item05 {
  background-color: #ebdcff;
  color: #9f88c4;
}

.qcell .section03 .top span img {
  width: 100%;
}
.qcell .section03 .arrow01 {
  position: absolute;
  bottom: -91px;
  left: -9px;
  width: 108px;
}
.qcell .section03 .arrow02 {
  position: absolute;
  bottom: -104px;
  left: -2px;
  width: 108px;
}
.qcell .section03 .arrow03 {
  position: absolute;
  bottom: -115px;
  left: 40px;
  width: 108px;
}

.qcell .section03 .arrow04 {
  position: absolute;
  bottom: -67px;
  left: -72px;
  width: 89px;
}
.qcell .section03 .arrow05 {
  position: absolute;
  bottom: -60px;
  left: 40px;
  width: 17px;
}
.qcell .section03 .arrow06 {
  position: absolute;
  bottom: -65px;
  left: 167px;
  width: 82px;
}
.qcell .section03 .arrow09 {
  position: absolute;
  bottom: -345px;
  left: 63px;
  width: 142px;
}

.qcell .section03 .arrow07 {
  position: absolute;
  bottom: -94px;
  left: -161px;
  width: 216px;
}
.qcell .section03 .arrow08 {
  position: absolute;
  bottom: -67px;
  left: 87px;
  width: 18px;
}

.qcell .section03 .bottom {
  display: flex;
  justify-content: center;
  margin-top: 80px;
  display: none;
}
.qcell .section03 .bottom .body {
  margin-top: 80px;
  font-size: 30px;
  font-weight: 700;
}
.qcell .section03 .bottom .b-item {
  margin: 0 40px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.qcell .section03 .bottom .box {
  width: 250px;
  padding: 30px 0;
  text-align: center;
  background-color: #fff;
  border-radius: 24px;
  box-sizing: border-box;
}
.qcell .section03 .bottom .box .k-text {
  font-size: 30px;
  font-weight: 700;
}
.qcell .section03 .bottom .list {
  margin-top: 40px;
}
.qcell .section03 .bottom .list div {
  margin-top: 10px;
}
.qcell .section03 .bottom .list div:first-child {
  margin-top: 0px;
}
.qcell .section03 .bottom .list span {
  display: inline-block;
  padding: 20px;
  border-radius: 30px;
}

.qcell .section04 {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.qcell .section04 .k-bg img {
  height: 100vh;
  object-fit: cover;
  object-position: center;
  width: 100%;
}
.qcell .section04 .txt {
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
  color: #fff;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100vh;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qcell .section05 {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.qcell .section05 .k-bg img {
  height: 100vh;
  object-fit: cover;
  object-position: center;
  width: 100%;
}
.qcell .section05 .txt {
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
  color: #fff;
  padding: 200px;
  box-sizing: border-box;
  text-align: center;
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  z-index: 1;
}

.qcell .section06 {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.qcell .section06 .k-bg img {
  height: 100vh;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.qcell .section07 {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 200px 0;
  background-color: #f8f8f8;
}
.qcell .section07 .title {
  font-size: 40px;
  font-weight: 400;
  text-align: center;
}
.qcell .section07 .cont {
  display: flex;
  margin-top: 80px;
}
.qcell .section07 .cont .k-img {
  margin: 0 30px;
}

.qcell .section08 {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 200px 0;
  background-color: #00adef;
}
.qcell .section08 .title {
  font-size: 40px;
  font-weight: 400;
  text-align: center;
  color: #fff;
}
.qcell .section08 .cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80px;
}
.qcell .section08 .cont .k-img {
  margin-top: 60px;
}
.qcell .section08 .cont .k-img img {
  max-width: 1244px;
  width: 100%;
}
.qcell .section08 .cont .k-img:first-child {
  margin-top: 0px;
}

.qcell .section09 {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 200px 0;
  background-color: #ffffff;
}
.qcell .section09 .title {
  font-size: 40px;
  font-weight: 400;
  text-align: center;
}
.qcell .section09 .cont {
  display: flex;
  margin-top: 80px;
}
.qcell .section09 .cont .k-img {
  margin: 0 50px;
  box-shadow: 11px 11px 30px 3px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  overflow: hidden;
}
.qcell .section09 .cont2 {
  margin-top: 200px;
}

.qcell .section10 {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 200px 0;
  background-color: #f5f5f5;
}
.qcell .section10 .title {
  font-size: 40px;
  font-weight: 400;
  text-align: center;
}
.qcell .section10 .cont {
  display: flex;
  margin-top: 80px;
  justify-content: center;
}
.qcell .section10 .cont .k-img {
  margin: 0 50px;
  border-radius: 16px;
  overflow: hidden;
  min-width: 939px;
}
.qcell .section10 .cont2 {
  margin-top: 90px;
}

/***********************************************************************
* samsung-webtoon
***********************************************************************/
.samsung-webtoon {
  font-family: "Pretendard";
  background-color: #edeee7;
}
.samsung-webtoon .k-section {
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.samsung-webtoon .k-section .section-inner {
  box-sizing: border-box;
  width: 100%;
}
.samsung-webtoon .section01 .section-inner {
  display: flex;
  padding: 100px 60px;
}
.samsung-webtoon .section01 .k-left {
  flex: 1 auto;
}
.samsung-webtoon .section01 .k-right {
  width: 860px;
}
.samsung-webtoon .section-ci .img2 img {
  width: 145px;
}

/***********************************************************************
* munggo
***********************************************************************/
.munggo {
  font-family: "Pretendard";
  background-color: #edeee7;
}
.munggo .k-section {
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.munggo .k-section .section-inner {
  box-sizing: border-box;
  width: 100%;
}
.munggo .section01 .section-inner {
  display: flex;
  padding: 100px 60px;
}
.munggo .section01 .k-left {
  flex: 1 auto;
}
.munggo .section01 .k-right {
  width: 860px;
}
.munggo .section-ci .img2 img {
  width: 145px;
}

.munggo .section02 {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.munggo .section02 .k-bg img {
  height: 100vh;
  object-fit: cover;
  object-position: center;
  width: 100%;
}
.munggo .section02 .k-txt {
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
  color: #fff;
  padding: 200px 100px;
  box-sizing: border-box;
  text-align: center;
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  z-index: 1;
  line-height: 62px;
}

.munggo .section03 {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.munggo .section03 .k-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.munggo .section03 .k-bg img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.munggo .section03 .k-body {
  padding: 200px 100px;
  position: relative;
}
.munggo .section03 .k-body dl {
  color: #6b9c80;
}
.munggo .section03 .chart-wrap {
  margin-top: 100px;
}
.munggo .section03 .chart-wrap .title {
  font-size: 18px;
}
.munggo .section03 .chart-wrap ul {
  margin-top: 22px;
}
.munggo .section03 .chart-wrap ul li {
  display: flex;
  margin-top: 24px;
}
.munggo .section03 .chart-wrap ul li:first-child {
  margin-top: 0px;
}
.munggo .section03 .chart-wrap ul li .bar {
  width: 300px;
  height: 20px;
  border-radius: 20px;
}
.munggo .section03 .chart-wrap ul li .bar.blue {
  background-color: #426ee0;
}
.munggo .section03 .chart-wrap ul li .bar.pink {
  background-color: #e73289;
}
.munggo .section03 .chart-wrap ul li .bar.orange {
  background-color: #f76707;
}
.munggo .section03 .chart-wrap ul li .bar.green {
  background-color: #00ba82;
}
.munggo .section03 .chart-wrap ul li .txt {
  margin-left: 10px;
}
.munggo .section03 .chart-wrap ul li .bar.blue + .txt {
  color: #426ee0;
}
.munggo .section03 .chart-wrap ul li .bar.pink + .txt {
  color: #e73289;
}
.munggo .section03 .chart-wrap ul li .bar.orange + .txt {
  color: #f76707;
}
.munggo .section03 .chart-wrap ul li .bar.green + .txt {
  color: #00ba82;
}
.munggo .section03 .more {
  padding-left: 280px;
  margin-top: 100px;
}
.munggo .section03 .more span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #cacaca;
  margin-bottom: 10px;
}

.munggo .section04 {
  background-color: #6b9c80;
  padding: 200px 100px;
  position: relative;
  overflow: hidden;
}
.munggo .section04 dl {
  color: #fff;
}
.munggo .section04 dl dd {
  margin-top: 100px;
}
.munggo .section04 .k-img {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 11px 11px 30px 3px rgba(0, 0, 0, 0.1);
}
.munggo .section04 .k-img.img01 {
  width: 100px;
  left: 30%;
  top: 10%;
}
.munggo .section04 .k-img.img02 {
  width: 200px;
  left: 50%;
  top: 20%;
  border-radius: 50px;
}
.munggo .section04 .k-img.img03 {
  width: 200px;
  left: 40%;
  top: 80%;
  border-radius: 50px;
}
.munggo .section04 .k-img.img04 {
  width: 100px;
  left: 70%;
  top: 70%;
}
.munggo .section04 .k-img.img05 {
  width: 112px;
  left: 80%;
  top: 50%;
  border-radius: 20px;
}

.munggo .section05 {
  background-color: #6b9c80;
  padding: 200px 100px;
}
.munggo .section05 .k-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.munggo .section05 .k-bg img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.munggo .section05 .k-body {
  position: relative;
}
.munggo .section05 .k-body .middle {
  margin-top: 130px;
}
.munggo .section05 .k-body .middle ul {
  display: flex;
  justify-content: center;
}
.munggo .section05 .k-body .middle ul li {
  padding: 30px;
  border-radius: 100px;
  color: #fff;
  margin: 0 50px;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
}
.munggo .section05 .k-body .middle ul li.st1 {
  background-color: #00b7ac;
}
.munggo .section05 .k-body .middle ul li.st2 {
  background-color: #e73289;
}
.munggo .section05 .k-body .middle ul li.st3 {
  background-color: #426ee0;
}
.munggo .section05 .k-body .bottom {
  margin-top: 100px;
  text-align: center;
}

.munggo .section06 {
  padding: 200px 100px;
}
.munggo .section06 .k-body {
  position: relative;
}
.munggo .section06 .k-cont {
  display: flex;
  justify-content: center;
  margin-top: 154px;
}
.munggo .section06 .k-cont .left {
  text-align: center;
  width: 50%;
}
.munggo .section06 .k-cont .left img {
  width: 418px;
}
.munggo .section06 .k-cont .right {
  text-align: center;
  width: 50%;
}
.munggo .section06 .k-cont .right img {
  width: 294px;
}
.munggo .section06 .k-cont .txt {
  margin-top: 20px;
  font-size: 18px;
}

.munggo .section07 {
  background-color: #6b9c80;
  padding: 200px 100px;
}
.munggo .section07 .k-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.munggo .section07 .k-bg img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.munggo .section07 .k-body {
  position: relative;
}
.munggo .section07 .k-body .middle {
  margin-top: 100px;
}
.munggo .section07 .k-body .middle img {
  width: 861px;
}
.munggo .section07 .k-body .bottom {
  margin-top: 50px;
  color: #a7a7a7;
}

.munggo .section08 {
  padding: 200px 100px;
}
.munggo .section08 .middle {
  margin-top: 100px;
  text-align: center;
}
.munggo .section08 .middle img {
  width: 780px;
}

.munggo .section08-1 .middle {
  text-align: center;
}
.munggo .section08-1 .middle img {
  width: 100%;
}

.munggo .section09 {
  padding: 200px 100px;
  position: relative;
  overflow: hidden;
}
.munggo .section09 .middle {
  margin-top: 100px;
  text-align: center;
}
.munggo .section09 .middle div {
  margin-top: 100px;
}
.munggo .section09 .middle div:first-child {
  margin-top: 0px;
}
.munggo .section09 .middle img {
  width: 1195px;
}
.munggo .section09 .middle .st3 img {
  width: 1013px;
}

.munggo .section10 {
  padding: 200px 100px;
}
.munggo .section10 .middle {
  margin-top: 100px;
  text-align: center;
}
.munggo .section10 .middle div {
  margin-top: 100px;
}
.munggo .section10 .middle div:first-child {
  margin-top: 0px;
}
.munggo .section10 .middle img {
  width: 100%;
}
.munggo .section10 .middle .st2 {
  padding: 0 100px;
}

.munggo .section11 .k-body {
  display: flex;
}
.munggo .section11 img {
  width: 100%;
  transform: scale(1.01);
}
.munggo .section11 .k-body .left {
  width: 30.312%;
  position: relative;
  overflow: hidden;
}
.munggo .section11 .k-body .center {
  width: 25.937%;
  position: relative;
  overflow: hidden;
}
.munggo .section11 .k-body .right {
  width: 43.854%;
  position: relative;
  overflow: hidden;
}
.munggo .section11 .k-body .st6 img {
  object-fit: contain;
  width: 99.41%;
  height: 100%;
}

.munggo .section12 {
  background: linear-gradient(180deg, #56bdcb 0%, #fff 100%);
  padding: 200px 100px;
  display: flex;
  justify-content: center;
}
.munggo .section12 .section-inner {
  display: flex;
  width: calc(295px + 295px + 295px + 30px + 30px);
  flex-direction: column;
  flex-wrap: wrap;
}
.munggo .section12 .k-body {
  display: flex;
}
.munggo .section12 .k-body > div {
  margin: 0 15px;
}
.munggo .section12 img {
  width: 295px;
}
.munggo .section12 .k-body .k-img {
  margin-bottom: 30px;
}

/***********************************************************************
* skhynix-esg
***********************************************************************/
.skhynix-esg {
  font-family: "Pretendard";
  background-color: #edeee7;
}
.skhynix-esg .k-section {
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.skhynix-esg .k-section .section-inner {
  box-sizing: border-box;
  width: 100%;
}
.skhynix-esg .section01 .section-inner {
  display: flex;
  padding: 100px 60px;
}
.skhynix-esg .section01 .k-left {
  flex: 1 auto;
}
.skhynix-esg .section01 .k-right {
  width: 860px;
}
.skhynix-esg .section-ci .img02 img {
  width: 110px;
}
.skhynix-esg .section02 .section-inner {
  padding: 200px 100px;
}
.skhynix-esg .section02 .middle {
  display: flex;
  justify-content: center;
}
.skhynix-esg .section02 .middle img {
  width: 614px;
}
.skhynix-esg .section02 .bottom {
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.skhynix-esg .section02 .bottom img {
  width: 100%;
}
.skhynix-esg .section02 .bottom .left {
  width: 399px;
}
.skhynix-esg .section02 .bottom .right {
  width: 652px;
}
.skhynix-esg .section02 .bottom .gap {
  margin: 0 100px;
  width: 1px;
  height: 252px;
  background-color: #eee;
}
.skhynix-esg .section05 .section-inner {
  padding: 300px 100px;
  display: flex;
  justify-content: flex-end;
}
.skhynix-esg .section05 .section-inner .k-text {
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
}
.skhynix-esg .section06 .section-inner {
  position: relative;
  height: 100vh;
}
.skhynix-esg .section06 .section-inner .k-img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
}
.skhynix-esg .section06 .section-inner .k-img img {
  object-fit: cover;
  height: 100vh;
  width: 100%;
}
.skhynix-esg .section06 .section-inner .txt-wrap {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.skhynix-esg .section06 .section-inner .k-text {
  color: #fff;
  text-align: center;
}
.skhynix-esg .section07 .section-inner {
  position: relative;
  text-align: center;
  padding: 200px 100px;
}
.skhynix-esg .section07 .section-inner .k-img img {
  width: 417px;
}
.skhynix-esg .section07 .section-inner .k-text {
  margin-top: 100px;
}
.skhynix-esg .section08 {
  background-color: #f8f8f8;
}
.skhynix-esg .section08 .section-inner {
  position: relative;
  padding: 200px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.skhynix-esg .section08 .img-wrap .k-img {
  margin-top: 100px;
}
.skhynix-esg .section08 .img-wrap .k-img:first-child {
  margin-top: 0px;
}
.skhynix-esg .section08 .img-wrap img {
  max-width: 1107px;
}
.skhynix-esg .section08 .bottom {
  display: flex;
  margin-top: 100px;
}
.skhynix-esg .section08 .bottom .k-img {
  margin: 0 50px;
}
.skhynix-esg .section08 .bottom .k-img img {
  width: 320px;
}
.skhynix-esg .section08 .ico {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}
.skhynix-esg .section08 .ico img {
  position: absolute;
}
.skhynix-esg .section08 .ico img.ico01 {
  width: 146px;
  left: calc(50vw - 400px);
  top: 0px;
}
.skhynix-esg .section08 .ico img.ico02 {
  width: 132px;
  left: calc(50vw + 600px);
  top: 400px;
}
.skhynix-esg .section08 .ico img.ico03 {
  width: 157px;
  left: calc(50vw + 200px);
  top: 800px;
}
.skhynix-esg .section08 .ico img.ico04 {
  width: 154px;
  left: calc(50vw - 700px);
  top: 1000px;
}
.skhynix-esg .section08 .ico img.ico05 {
  width: 142px;
  left: calc(50vw - 450px);
  top: 1600px;
}
.skhynix-esg .section08 .ico img.ico06 {
  width: 113px;
  left: calc(50vw + 500px);
  top: 1700px;
}
.skhynix-esg .section09 .section-inner {
  position: relative;
  height: 100vh;
}
.skhynix-esg .section09 .section-inner .k-img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
}
.skhynix-esg .section09 .section-inner .k-img img {
  object-fit: cover;
  height: 100vh;
  width: 100%;
}
.skhynix-esg .section09 .section-inner .txt-wrap {
  padding: 0px 100px;
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  align-items: center;
}
.skhynix-esg .section09 .section-inner .k-text {
  color: #fff;
}
.skhynix-esg .section09 .section-inner dl {
  max-width: 737px;
}
.skhynix-esg .section09 .section-inner dl dt {
  line-height: 64px;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
}
.skhynix-esg .section09 .section-inner dl dd {
  line-height: 38px;
  margin-top: 10px;
}
.skhynix-esg .section10 {
  background-color: #f8f8f8;
}
.skhynix-esg .section10 .section-inner {
  position: relative;
  padding: 200px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.skhynix-esg .section10 .img-wrap .k-img {
  margin-top: 100px;
  position: relative;
  width: 100%;
}
.skhynix-esg .section10 .img-wrap .k-img:first-child {
  margin-top: 0px;
}
.skhynix-esg .section10 .img-wrap img {
  max-width: 1107px;
}
.skhynix-esg .section10 .ico {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}
.skhynix-esg .section10 .ico img {
  position: absolute;
  width: 100%;
}
.skhynix-esg .section10 .ico.ico01 {
  width: 394px;
  left: -350px;
  top: 100px;
}
.skhynix-esg .section10 .ico.ico02 {
  width: 394px;
  left: calc(100% - 150px);
  top: 200px;
}
.skhynix-esg .section11 .section-inner {
  position: relative;
  height: 100vh;
}
.skhynix-esg .section11 .section-inner > .k-img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
}
.skhynix-esg .section11 .section-inner > .k-img img {
  object-fit: cover;
  height: 100vh;
  width: 100%;
}
.skhynix-esg .section11 .k-content {
  display: flex;
  padding: 100px;
  position: relative;
}
.skhynix-esg .section11 .k-content .k-left {
  min-width: 550px;
  margin-right: 100px;
}
.skhynix-esg .section11 .section-inner .txt-wrap {
  position: relative;
  z-index: 1;
}
.skhynix-esg .section11 .section-inner dl dt {
  line-height: 64px;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
}
.skhynix-esg .section11 .section-inner dl dd {
  line-height: 38px;
  margin-top: 10px;
}
.skhynix-esg .section11 .k-list {
  display: flex;
  flex-wrap: wrap;
  min-width: 1500px;
}
.skhynix-esg .section11 .k-list .k-img {
  max-width: 380px;
  margin-right: 60px;
  margin-bottom: 60px;
}
.skhynix-esg .section11 .k-list .k-img img {
  border-radius: 24px;
  overflow: hidden;
  width: 100%;
  box-shadow: 11px 11px 30px 3px rgba(0, 0, 0, 0.1);
}
.skhynix-esg .section11 .k-list .k-img.last img {
  width: 250px;
}

/***********************************************************************
* konai
***********************************************************************/
.konai {
  font-family: "Pretendard";
  background-color: #edeee7;
}
.konai .k-section {
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.konai .k-section .section-inner {
  box-sizing: border-box;
  width: 100%;
}
.konai .section01 .section-inner {
  display: flex;
  padding: 100px 60px;
}
.konai .section01 .k-left {
  flex: 1 auto;
}
.konai .section01 .k-right {
  width: 860px;
}
.konai .section-ci .img02 img {
  width: 224px;
}
.konai .section02 .cont {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.konai .section02 .cont .inner {
  color: #fff;
}
.konai .section02 .cont .k-img {
  text-align: center;
}
.konai .section02 .cont .k-img img {
  width: 60px;
}
.konai .section02 .cont dl {
  position: relative;
  padding: 40px 0;
  display: flex;
  align-items: flex-end;
}
.konai .section02 .cont dl:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0%;
  height: 2px;
  background-color: #fff;
  transition: all 0.5s;
}
.konai .section02 .cont dl.on:after {
  content: "";
  width: 100%;
}
.konai .section02 .cont dl.first {
  border-top: 0px;
  margin-top: 60px;
}
.konai .section02 .cont dl.first:after {
  content: "";
  background-color: transparent;
}
.konai .section02 .cont dl dt {
  width: 100px;
}
.konai .section02 .cont dl dd {
  padding-left: 60px;
}
.konai .section04 .section-inner {
  display: flex;
  justify-content: center;
  padding: 300px 100px 200px 100px;
}
.konai .section04 .k-content {
  display: flex;
  flex-wrap: wrap;
}
.konai .section04 .img-wrap {
  width: 50%;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.konai .section04 .img-wrap .k-img {
  width: 100%;
}
.konai .section04 .img-wrap img {
  width: 100%;
}
.konai .section04 .img-wrap dl {
  max-width: 464px;
}
.konai .section04 .img-wrap dl dt {
  position: relative;
  overflow: hidden;
}
.konai .section04 .img-wrap dl dd {
  margin-top: 30px;
  position: relative;
  overflow: hidden;
}
.konai .section05 .section-inner {
  padding: 200px 100px;
}
.konai .section05 .cont {
  margin-top: 70px;
  display: flex;
  justify-content: center;
}
.konai .section05 .cont .k-img {
  width: 360px;
  margin: 0 35px;
}
.konai .section06 .section-inner {
  padding: 200px 100px;
}
.konai .section06 .cont {
  margin-top: 70px;
  display: flex;
  justify-content: center;
}
.konai .section06 .cont .k-img {
  width: 615px;
  margin-right: 30px;
}

/***********************************************************************
* gs-retail  11
***********************************************************************/
.gs-retail {
  font-family: "Pretendard";
  background-color: #edeee7;
}
.gs-retail .k-section {
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.gs-retail .k-section .section-inner {
  box-sizing: border-box;
  width: 100%;
}
.gs-retail .section01 .section-inner {
  display: flex;
  padding: 100px 60px;
}
.gs-retail .section01 .k-left {
  flex: 1 auto;
}
.gs-retail .section01 .k-right {
  width: 860px;
}
.gs-retail .section-ci .img02 img {
  width: 113px;
}

.gs-retail .section02 .k-content {
  color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gs-retail .section02 .k-content .inner {
  display: flex;
  margin-top: 120px;
}
.gs-retail .section02 .title {
  text-align: center;
  font-size: 120px;
  line-height: 120px;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
  font-weight: 900;
}
.gs-retail .section02 dl {
  padding: 0 85px;
}
.gs-retail .section02 dl dt {
  font-size: 36px;
  font-weight: 500;
  line-height: 50px;
}
.gs-retail .section02 dl dd {
  font-size: 18px;
  margin-top: 10px;
  line-height: 25px;
}
.gs-retail .section02 dl dd span {
  font-size: 14px;
  line-height: 22px;
}

.gs-retail .section03 .k-img {
  height: 1353px;
}
.gs-retail .section03 .k-img img {
  object-fit: cover;
  object-position: center;
  height: 1353px;
}
.gs-retail .section03 .k-content {
  position: absolute;
  bottom: 300px;
  left: 100px;
}
.gs-retail .section03 dl dt .st1 {
  font-size: 16px;
  line-height: 22px;
  position: relative;
  overflow: hidden;
}
.gs-retail .section03 dl dt .st2 {
  font-size: 40px;
  position: relative;
  overflow: hidden;
}
.gs-retail .section03 dl dd .st3 {
  font-size: 18px;
  line-height: 25px;
}
.gs-retail .section03 dl dt span {
  display: block;
  margin-bottom: 10px;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
}
.gs-retail .section03 dl dd {
  margin-top: 30px;
  position: relative;
  overflow: hidden;
}

.gs-retail .section04 .k-head dl dt span {
  display: block;
  color: #ccc;
}
.gs-retail .section04 .k-head dl dd {
  margin-top: 60px;
}
.gs-retail .section04 .section-inner {
  padding: 100px 100px 200px 100px;
}
.gs-retail .section04 .k-content {
  display: flex;
  margin-top: 90px;
  justify-content: center;
}
.gs-retail .section04 .k-content img {
  width: 55px;
}
.gs-retail .section04 .k-content .col {
  padding: 0 30px;
}
.gs-retail .section04 .k-content .col.img ul {
  display: flex;
  flex-wrap: wrap;
}
.gs-retail .section04 .k-content .col.img ul li {
  width: 33.3%;
  margin-bottom: 82px;
  text-align: center;
}
.gs-retail .section04 .k-content .col:not(.img) ul {
  color: #fff;
}
.gs-retail .section04 .k-content .col:not(.img) ul li span {
  display: inline-block;
  border-radius: 24px;
  padding: 30px;
  margin-bottom: 60px;
  box-shadow:
    0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.02),
    0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.03),
    0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.04),
    0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.04),
    0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.05),
    0px 100px 80px 0px rgba(0, 0, 0, 0.07);
}
.green-color span {
  background-color: #5ba85f;
}
.sky-color span {
  background-color: #35c4cb;
}
.red-color span {
  background-color: #e76a2d;
}
.green-light-color span {
  background-color: #caeacb;
  color: #0d4c38;
}
.yellow-color span {
  background-color: #f0b44e;
}
.blue-color span {
  background-color: #308cf8;
}
.orange-color span {
  background-color: #f0b44e;
}

.gs-retail .section05 .k-head dl dt span {
  display: block;
  color: #ccc;
}
.gs-retail .section05 .k-head dl dd {
  margin-top: 60px;
  line-height: 22px;
}
.gs-retail .section05 .section-inner {
  padding: 100px 100px 100px 100px;
}
.gs-retail .section05 .k-content {
  margin-top: 90px;
}
.pie-chart-wrap {
  display: flex;
  justify-content: center;
}
.pie-chart-wrap .pie-chart-item {
  text-align: center;
  margin: 0 30px;
}
.pie-chart-wrap .pie-chart-item .chart {
  width: 195px;
  height: 195px;
}
.pie-chart-wrap .pie-chart-item .chart canvas {
  width: 195px;
  height: 195px;
}
.pie-chart-wrap .pie-chart-item .body {
  padding: 30px;
}
.pie-chart-wrap .pie-chart-item .st1 {
  display: inline-block;
  color: #979797;
  padding: 6px 20px;
  background-color: #eaeaea;
  border-radius: 30px;
}
.pie-chart-wrap .pie-chart-item .st2 {
  margin-top: 10px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}
.pie-chart-wrap .pie-chart-item .st3 {
  margin-top: 10px;
  font-size: 48px;
  line-height: 67px;
  font-weight: 900;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
}
.pie-chart-wrap .pie-chart-item .st3 span {
  font-size: 30px;
  display: inline-block;
  margin-left: 2px;
}

.line-chart-wrap {
  display: flex;
  margin-top: 60px;
  justify-content: center;
}
.line-chart-wrap .line-chart-item {
  text-align: center;
}
.line-chart-wrap .gap {
  width: 150px;
}
.line-chart-wrap .line-chart-item .name {
  font-size: 16px;
  line-height: 16px;
}
.line-chart-wrap .line-chart-item.left {
  color: #35c4cb;
}
.line-chart-wrap .line-chart-item.right {
  color: #f0b44e;
}
.line-chart-wrap .line-chart-item ul {
  display: flex;
  margin-top: 45px;
}
.line-chart-wrap .line-chart-item ul li {
  width: 50px;
  margin-left: 30px;
  height: 190px;
  display: Flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
}
.line-chart-wrap .line-chart-item ul li:first-child {
  margin-left: 0px;
}
.line-chart-wrap .line-chart-item ul li .per {
  font-size: 12px;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
}
.line-chart-wrap .line-chart-item ul li .bar {
  margin-top: 5px;
  display: Flex;
  align-items: flex-end;
}
.line-chart-wrap .line-chart-item ul li .bar span {
  width: 50px;
  display: block;
  border-radius: 4px 4px 0px 0px;
}
.line-chart-wrap .line-chart-item ul li .bar + div {
  font-size: 12px;
  color: #cbcbcb;
  margin-top: 5px;
}
.line-chart-wrap .line-chart-item.left ul li .bar span {
  background-color: #35c4cb;
}
.line-chart-wrap .line-chart-item.right ul li .bar span {
  background-color: #f0b44e;
}
.line-chart-desc {
  display: flex;
  justify-content: center;
  font-size: 16px;
  line-height: 22px;
  margin-top: 30px;
  text-align: center;
}

.circle-wrap {
  margin-top: 160px;
  display: flex;
  justify-content: center;
}
.circle-wrap .inner {
  max-width: 890px;
  width: 100%;
}
.circle-wrap dl dt {
  font-size: 20px;
  line-height: 30px;
  color: #308cf8;
  font-weight: 700;
}
.circle-wrap dl dd {
  font-size: 16px;
  line-height: 24px;
}
.circle-wrap ul {
  height: 360px;
  position: relative;
}
.circle-wrap ul li {
  text-align: center;
  position: absolute;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.circle-wrap ul li.green {
  background-color: #5ba85f;
  color: #fff;
}
.circle-wrap ul li.blue {
  background-color: #308cf8;
  color: #fff;
}
.circle-wrap ul li.green-light {
  background-color: #caeacb;
  color: #25989e;
}
.circle-wrap ul li.orange-red {
  background-color: #e76a2d;
  color: #fff;
}
.circle-wrap ul li.brown {
  background-color: #949494;
  color: #fff;
}
.circle-wrap ul li.sky {
  background-color: #35c4cb;
  color: #fff;
}
.circle-wrap ul li.grey {
  background-color: #cfcfcf;
  color: #fff;
}
.circle-wrap ul li.orange {
  background-color: #f0b44e;
  color: #fff;
}
.circle-wrap ul li.dark-green {
  background-color: #2c7e55;
  color: #fff;
}

.circle-wrap ul li.st1 {
  left: calc(50% - 310px);
  top: 40px;
  width: 310px;
  height: 310px;
  font-size: 20px;
  line-height: 30px;
}
.circle-wrap ul li.st2 {
  left: calc(50% - 10px);
  top: 0px;
  width: 155px;
  height: 155px;
  font-size: 18px;
  line-height: 27px;
}
.circle-wrap ul li.st3 {
  left: calc(50% + 110px);
  top: 100px;
  width: 207px;
  height: 207px;
  font-size: 18px;
  line-height: 27px;
}
.circle-wrap ul li.st4 {
  left: calc(50% + 80px);
  top: 260px;
  width: 103px;
  height: 103px;
  font-size: 16px;
  line-height: 24px;
}
.circle-wrap ul li.st5 {
  left: calc(50% - 40px);
  top: 240px;
  width: 83px;
  height: 83px;
  font-size: 14px;
  line-height: 21px;
}

.circle-wrap ul li.st6 {
  left: calc(50% - 300px);
  top: 20px;
  width: 200px;
  height: 200px;
  font-size: 18px;
  line-height: 27px;
}
.circle-wrap ul li.st7 {
  left: calc(50% - 140px);
  top: 200px;
  width: 135px;
  height: 135px;
  font-size: 18px;
  line-height: 27px;
}
.circle-wrap ul li.st8 {
  left: calc(50% - 80px);
  top: 80px;
  width: 247px;
  height: 247px;
  font-size: 20px;
  line-height: 37px;
}
.circle-wrap ul li.st9 {
  left: calc(50% + 70px);
  top: 0px;
  width: 83px;
  height: 83px;
  font-size: 16px;
  line-height: 24px;
}
.circle-wrap ul li.st10 {
  left: calc(50% + 160px);
  top: 0px;
  width: 225px;
  height: 225px;
  font-size: 20px;
  line-height: 30px;
}

.circle-wrap ul li.st3 {
  backdrop-filter: blur(7.5px);
  background-color: rgba(231, 106, 45, 0.7);
}
.circle-wrap ul li.st5 {
  backdrop-filter: blur(7.5px);
  background-color: rgba(48, 140, 248, 0.7);
}
.circle-wrap ul li.st7 {
  backdrop-filter: blur(7.5px);
  background-color: rgba(231, 106, 45, 0.7);
}

.circle-container {
  display: flex;
  justify-content: center;
}
.circle-container .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.circle-container .inner div {
  display: flex;
  justify-content: center;
}
.circle-container .circle-wrap {
  width: 50%;
  box-sizing: border-box;
}
.circle-container .circle-wrap:nth-child(2n - 1) {
  padding-right: 80px;
}
.circle-container .circle-wrap:nth-child(2n) {
  padding-left: 80px;
}

.circle-wrap ul li.mt01 {
  left: calc(50% - 410px);
  top: 140px;
  width: 235px;
  height: 235px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
}
.circle-wrap ul li.mt02 {
  left: calc(50% - 160px);
  top: 80px;
  width: 137px;
  height: 137px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.circle-wrap ul li.mt03 {
  left: calc(50% - 100px);
  top: 240px;
  width: 149px;
  height: 149px;
  font-size: 18px;
  line-height: 27px;
  font-weight: 600;
}

.circle-wrap ul li.mt11 {
  left: calc(50% - 420px);
  top: 130px;
  width: 200px;
  height: 200px;
  font-size: 18px;
  line-height: 27px;
  font-weight: 600;
}
.circle-wrap ul li.mt12 {
  left: calc(50% - 190px);
  top: 140px;
  width: 247px;
  height: 247px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
}
.circle-wrap ul li.mt13 {
  left: calc(50% - 260px);
  top: 320px;
  width: 139px;
  height: 139px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.circle-wrap ul li.mt21 {
  left: calc(50% - 420px);
  top: 140px;
  width: 235px;
  height: 235px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
}
.circle-wrap ul li.mt22 {
  left: calc(50% - 210px);
  top: 100px;
  width: 137px;
  height: 137px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.circle-wrap ul li.mt23 {
  left: calc(50% - 110px);
  top: 240px;
  width: 97px;
  height: 97px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.circle-wrap ul li.mt31 {
  left: calc(50% - 310px);
  top: 100px;
  width: 132px;
  height: 132px;
  font-size: 18px;
  line-height: 27px;
  font-weight: 600;
}
.circle-wrap ul li.mt32 {
  left: calc(50% - 260px);
  top: 130px;
  width: 247px;
  height: 247px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
}
.circle-wrap ul li.mt33 {
  left: calc(50% - 110px);
  top: 300px;
  width: 125px;
  height: 125px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

/*  */
.gs-retail .section06 {
  background-color: #308cf8;
}
.gs-retail .section06 .section-inner {
  padding: 200px 100px;
  color: rgba(237, 238, 231, 0.8);
}
.gs-retail .section06 .title {
  font-size: 24px;
  line-height: 36px;
}
.gs-retail .section06 dl {
  margin-top: 50px;
}
.gs-retail .section06 dl dt {
  font-size: 48px;
  line-height: 57px;
  font-weight: 100;
  overflow: hidden;
}
.gs-retail .section06 dl dt span {
  border-bottom: 1px solid #edeee7;
  display: inline-block;
}
.gs-retail .section06 dl dd {
  font-size: 20px;
  line-height: 34px;
  font-weight: 100;
  margin-top: 2px;
}
.gs-retail .section06 dl dd strong {
  font-weight: 400;
  color: rgba(237, 238, 231, 1);
}
.gs-retail .section06 dl.first {
  margin-top: 100px;
}
.gs-retail .section06.down {
  background-color: #2c7e55;
}
.gs-retail .section06.down dd {
  text-decoration: underline;
  text-decoration-color: rgba(237, 238, 231, 0.8);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.gs-retail .section06 dd .txt-alpha {
  color: rgba(237, 238, 231, 0.3);
  transition: all 0.5s 0.25s;
}
.gs-retail .section06 dd .txt-alpha.on {
  color: rgba(237, 238, 231, 1);
}

/*  */
.gs-retail .section07 {
  background-color: #212528;
  color: #edeee7;
}
.gs-retail .section07 canvas {
  position: absolute;
  top: 314px;
  left: 0px;
  width: 1720px;
  height: 800px;
}
.gs-retail .section07 .section-inner {
  padding: 200px 100px;
}
.gs-retail .section07 .k-content {
  display: flex;
}
.gs-retail .section07 .title {
  font-size: 36px;
  line-height: 54px;
  height: 54px;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
}
.gs-retail .section07 .col {
  width: 33.3%;
  position: relative;
}
.gs-retail .section07 ul {
  margin-top: 60px;
}
.gs-retail .section07 ul li {
  position: relative;
}
.gs-retail .section07 ul li:first-child {
  margin-top: 0px !important;
}
.gs-retail .section07 ul li span {
  position: relative;
  display: inline-block;
  color: #9a9a9a;
  padding: 30px;
  font-size: 16px;
  line-height: 24px;
  background-color: #363636;
  border-radius: 24px;
}
.gs-retail .section07 .col.st1 ul li {
  margin-top: 10px;
}
.gs-retail .section07 .col.st1 ul li span::after {
  content: "";
  position: absolute;
  top: 36px;
  right: -20px;
  width: 10px;
  height: 10px;
  background-color: #616161;
  border-radius: 50%;
}
.gs-retail .section07 .col.st2 ul li span::after {
  content: "";
  position: absolute;
  top: 36px;
  left: -20px;
  width: 10px;
  height: 10px;
  background-color: #616161;
  border-radius: 50%;
}

.gs-retail .section07 .col.st2 ul li {
  margin-top: 65px;
}
.gs-retail .section07 .col.st3 ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-retail .section07 .col.st3 ul li span {
  font-size: 30px;
  line-height: 45px;
  font-weight: 800;
  color: #caeacb;
}
.gs-retail .section07 .col.st3 ul li.gap {
  padding: 016px 0;
}
.gs-retail .section07 .desc {
  position: absolute;
  bottom: 73px;
  right: 90px;
  color: #606060;
}
/*  */
.gs-retail .section07.down canvas {
  top: 200px;
}
.gs-retail .section07.down .col {
  display: flex;
  align-items: center;
}
.gs-retail .section07.down .col ul {
  justify-content: center;
  margin-top: 0px;
}
.gs-retail .section07.down .col ul li {
  display: flex;
  justify-content: center;
}
.gs-retail .section07.down .col.st1 ul li {
  margin-top: 50px;
}
.gs-retail .section07.down .col.st1 ul li span {
  font-size: 16px;
  line-height: 24px;
  color: #9a9a9a;
  font-weight: 500;
}
.gs-retail .section07.down .col.st2 ul li {
  margin-top: 65px;
}
.gs-retail .section07.down .col.st2 ul li span {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  font-weight: 500;
  background-color: #35c4cb;
}
.gs-retail .section07.down .col.st3 ul li {
  margin-top: 30px;
}
.gs-retail .section07.down .col.st3 ul li span {
  font-size: 16px;
  line-height: 24px;
  color: #9a9a9a;
  font-weight: 500;
}

.gs-retail .section07.down .col.st1 ul li span::after {
  content: "";
  position: absolute;
  top: 36px;
  right: -20px;
  width: 4px;
  height: 4px;
  background-color: #616161;
  border-radius: 50%;
}
.gs-retail .section07.down .col.st2 ul li span::before {
  content: "";
  position: absolute;
  top: 36px;
  right: -20px;
  width: 4px;
  height: 4px;
  background-color: #616161;
  border-radius: 50%;
}
.gs-retail .section07.down .col.st2 ul li span::after {
  content: "";
  position: absolute;
  top: 36px;
  left: -20px;
  width: 4px;
  height: 4px;
  background-color: #616161;
  border-radius: 50%;
}
.gs-retail .section07.down .col.st3 ul li span::before {
  content: "";
  position: absolute;
  top: 36px;
  left: -20px;
  width: 4px;
  height: 4px;
  background-color: #616161;
  border-radius: 50%;
}

/*  */
.gs-retail .section08 .k-content {
  color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.gs-retail .section08 .k-content .title {
  font-size: 60px;
  line-height: 90px;
}
.gs-retail .section08 .k-content .cont {
  margin-top: 100px;
}
.gs-retail .section08 .k-content .cont ul {
  display: flex;
}
.gs-retail .section08 .k-content .cont ul li {
  margin: 0 20px;
  border-radius: 50%;
  background-color: #35c4cb;
  width: 250px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 36px;
  line-height: 54px;
}

/*  */
.gs-retail .section09 .section-inner {
  padding: 200px 100px;
}
.gs-retail .section09 .text {
  background: linear-gradient(
    90deg,
    #66dd6c 0%,
    #35c4cb 67.05%,
    #1eb7be 104.08%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 48px;
  font-weight: 600;
  line-height: 72px;
  text-align: center;
}

.gs-retail .section10 {
  background-color: #fbfbfb;
}
.gs-retail .section10 .section-inner {
  padding: 200px 100px;
}
.gs-retail .section10 .head {
  display: Flex;
  justify-content: center;
}
.gs-retail .section10 .k-content {
  text-align: center;
}
.gs-retail .section10 .title {
  font-size: 36px;
  font-weight: 600;
}
.gs-retail .section10 .title span {
  font-size: 16px;
  display: block;
  font-weight: 900;
  margin-bottom: 20px;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
}
.gs-retail .section10 ul {
  margin-top: 40px;
}
.gs-retail .section10 ul li {
  text-align: left;
  position: relative;
  padding-left: 20px;
  line-height: 24px;
}
.gs-retail .section10 ul li:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: black;
}
.gs-retail .section10 .img-wrap {
  display: flex;
  margin-top: 100px;
  text-align: left;
  justify-content: center;
}
.gs-retail .section10 .img-wrap.vertical {
  flex-direction: column;
  align-items: center;
}
.gs-retail .section10 .img-wrap.vertical dl {
  margin-top: 20px;
}
.gs-retail .section10 .img-wrap.vertical dl:first-child {
  margin-top: 0px;
}
.gs-retail .section10 .img-wrap dl dt {
  font-size: 16px;
  font-weight: 900;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
}
.gs-retail .section10 .img-wrap dl dd {
  margin-top: 10px;
}
.gs-retail .section10 .img-wrap img {
  max-width: 505px;
  width: 100%;
}
.gs-retail .section10 .box.left {
  width: 418px;
  box-sizing: border-box;
}
.gs-retail .section10 .box.left dt {
  box-sizing: border-box;
}
.gs-retail .section10 .box.left dd {
  display: flex;
  flex-wrap: wrap;
}
.gs-retail .section10 .box.left dd div {
  padding: 16px;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  border-radius: 16px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.gs-retail .section10 .box.left dd div.blue {
  background-color: #30a5d7;
}
.gs-retail .section10 .box.left dd div.green {
  background-color: #5aa26e;
}
.gs-retail .section10 .box.left dd div.orange {
  background-color: #ffa24b;
}
.gs-retail .section10 .box.right {
  width: 286px;
}
.gs-retail .section10 .box.right dd {
  border-radius: 24px;
  border: 0.5px solid #62b263;
  background: #f5f8f4;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}
.gs-retail .section10 .box.right dd div {
  box-sizing: border-box;
  font-size: 18px;
  font-weight: 500;
}
.gs-retail .section10 .box.right dd div.gap {
  width: 10px;
}
.gs-retail .section10 .box.right dd div.large {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(50% - 5px);
  padding: 29px 21px;
  background-color: #62b263;
  border-radius: 15px;
  color: #fff;
}
.gs-retail .section10 .box.right dd div.large.lt svg {
  margin-bottom: 16px;
}
.gs-retail .section10 .box.right dd div.large.rt svg {
  margin-bottom: 14px;
}
.gs-retail .section10 .box.right dd div.small {
  width: 100%;
  border-radius: 15px;
  border: 1px solid #d9e8d9;
  background: #e5f3e5;
  text-align: center;
  padding: 18px 0;
  margin-top: 10px;
}
.gap10 {
  width: 10px;
}
.gap20 {
  width: 20px;
}

.gs-retail .section15 .section-inner {
  padding: 200px 0;
  background-color: #1f2225;
}
.gs-retail .section15 .img-wrap {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
.gs-retail .section15 .img-wrap:first-child {
  margin-top: 0px;
}
.gs-retail .section15 .img-wrap .k-img {
  height: 543px;
  padding: 0 10px;
}
.gs-retail .section15 .img-wrap .k-img img {
  height: 543px;
  width: auto;
}
.gs-retail .section15.bottom .section-inner {
  background-color: white;
}
.gs-retail .section16 .k-content {
  color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gs-retail .section16 .k-content .inner {
  display: flex;
  margin-top: 120px;
}
.gs-retail .section16 .title {
  text-align: center;
  font-size: 120px;
  line-height: 120px;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
  font-weight: 900;
}
.gs-retail .section16 dl {
  padding: 0 85px;
}
.gs-retail .section16 dl dt {
  font-size: 36px;
  font-weight: 500;
  line-height: 54px;
}
.gs-retail .section16 dl dd {
  font-size: 18px;
  line-height: 25px;
  margin-top: 10px;
}
.gs-retail .section16 dl dd span {
  font-size: 14px;
  display: block;
  color: #aaa;
}
.gs-retail .section17 .k-head dl dt span {
  display: block;
  color: #ccc;
}
.gs-retail .section17 .k-head dl dd {
  margin-top: 60px;
}
.gs-retail .section17 .section-inner {
  padding: 100px 100px 200px 100px;
}
.gs-retail .section17 .k-content {
  display: flex;
  margin-top: 90px;
  justify-content: center;
}
.gs-retail .section17 .k-content img {
  width: 55px;
}
.gs-retail .section17 .k-content .col {
  padding: 0 30px;
}
.gs-retail .section17 .k-content .col.img ul {
  display: flex;
  flex-wrap: wrap;
}
.gs-retail .section17 .k-content .col.img ul li {
  width: 33.3%;
  margin-bottom: 82px;
  text-align: center;
}
.gs-retail .section17 .k-content .col:not(.img) ul {
  color: #fff;
}
.gs-retail .section17 .k-content .col:not(.img) ul li span {
  display: inline-block;
  border-radius: 24px;
  padding: 30px;
  margin-bottom: 60px;
  box-shadow:
    0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.02),
    0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.03),
    0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.04),
    0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.04),
    0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.05),
    0px 100px 80px 0px rgba(0, 0, 0, 0.07);
}
.gs-retail .section17 .k-head dl dt span {
  display: block;
  color: #ccc;
}
.gs-retail .section17 .k-head dl dd {
  margin-top: 60px;
}
.gs-retail .section17 .section-inner {
  padding: 100px 100px 200px 100px;
}
.gs-retail .section19 {
  background-color: #308cf8;
}
.gs-retail .section19 .section-inner {
  padding: 200px 100px;
  color: #fff;
}
.gs-retail .section19 .title {
  font-size: 24px;
  line-height: 36px;
}
.gs-retail .section19 dl {
  margin-top: 50px;
}
.gs-retail .section19 dl dt {
  font-size: 48px;
  line-height: 58px;
  font-weight: 100;
}
.gs-retail .section19 dl dd {
  font-size: 20px;
  line-height: 24px;
  font-weight: 100;
}
.gs-retail .section19 dl dd strong {
  font-weight: 400;
}
.gs-retail .section19 dl.first {
  margin-top: 100px;
}
.gs-retail .section20 {
  background-color: #212528;
  color: #fff;
}
.gs-retail .section21 .img-wrap {
  display: flex;
}

/***********************************************************************
* amutalk
***********************************************************************/
.amutalk {
  font-family: "Pretendard";
  background-color: #edeee7;
}
.amutalk .k-section {
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.amutalk .k-section .section-inner {
  box-sizing: border-box;
  width: 100%;
}
.amutalk .section01 .section-inner {
  display: flex;
  padding: 100px 60px;
}
.amutalk .section01 .k-left {
  flex: 1 auto;
}
.amutalk .section01 .k-right {
  width: 860px;
}
.amutalk .section-ci .img2 img {
  width: 145px;
}

/* 모바일 .rotate-btn .ico 의 기준 top 은 36px 인데 원래 anim3 은 31→36→31 이었다.
   .white 상태(animation:none)의 정지 위치를 36px 그대로 두기 위해 기준 top 은 건드리지 않고
   음수 translateY 로 동일한 궤적(-5px → 0 → -5px)을 만든다. */
@keyframes anim3 {
  0% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}

.main-ref-group-list .k-list .k-item.hide {
  opacity: 0 !important;
}
.k-img .pc {
  display: block;
}
.k-img .m {
  display: none;
}

@media screen and (max-width: 1024px) and (min-width: 100px) {
  .home-text .k-text {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transition: all 0.5s;
  }
  .k-header.swipe .k-text {
    opacity: 0;
    transform: matrix(1, 0, 0, 1, 0, -20);
  }
  .k-header .inner {
    left: 20px;
    top: 30px;
    right: 20px;
  }
  .home .home-text .k-text {
    font-size: 24px;
    line-height: 36px;
    margin-top: 80px;
    font-weight: 300;
  }
  .home .home-text .k-text.en {
    font-size: 20px;
    line-height: 30px;
  }
  .home .home-text .k-text.ko {
    display: none;
  }
  .home-text .inner {
    left: 20px;
    right: 20px;
  }
  .main-ref-group-section .title-wrap dl dd span {
    padding: 0 20px;
  }

  .rotate-btn {
    width: 100px;
    right: 20px;
    z-index: 10;
  }
  .rotate-btn .txt {
    width: 100px;
    height: 100px;
  }
  .rotate-btn .ico {
    width: 30px;
    height: 39px;
    left: 35px;
    top: 36px;
    animation: anim3 1s linear infinite;
  }
  .k-body {
    height: 100vh;
  }
  .k-intro {
    height: 100vh;
  }
  .intro-media-list {
    padding-top: 0px;
    display: block;
  }
  .intro-media-list .intro-media-list-inner {
    padding-bottom: 0px;
    overflow: initial;
  }
  .video-swipe {
    height: 100vh;
  }
  .intro-media-list .intro-media-list-inner .section-item.blank {
    background-color: transparent;
  }
  .intro-media-list .intro-media-list-inner .section-item {
    height: 100vh;
    margin-top: 0px;
  }
  .intro-media-list .intro-media-list-inner .section-item .video-wrap {
    width: 100%;
    height: 100vh;
    opacity: 1 !important;
  }
  .k-video.pc {
    display: none;
  }
  .k-video.mo {
    display: block;
    overflow: hidden;
  }
  .k-video.mo video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100vh;
  }
  .k-intro .k-video.mo {
    position: absolute !important;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
  }
  .main-ref-group-section .main-ref-group .k-video.mo {
    top: 122px;
    left: 20px;
    width: 100%;
    height: 100vh;
  }
  /*  */
  .main-ref-group-section .title-wrap dl dt {
    font-size: 30px;
    line-height: 30px;
  }
  .main-ref-group-section .title-wrap dl dd {
    font-size: 14px;
    line-height: 21px;
    margin-top: 30px;
  }
  .main-ref-group-section.active .title-wrap dl dt {
    font-size: 30px;
    line-height: 30px;
  }
  .main-ref-group-section.active .title-wrap dl dd {
    font-size: 14px;
    line-height: 21px;
    margin-top: 20px;
  }
  .view-page2 .main-ref-group-section .title-wrap dl dt span {
    display: none;
  }
  .main-ref-group .title-wrap {
    padding-top: 60px !important;
  }
  .main-ref-group-list .k-list {
    flex-wrap: nowrap;
  }
  .main-ref-group-list .k-list .swiper-slide {
    width: 284px !important;
  }
  .main-ref-group-list .k-list .k-item {
    margin: 0px;
  }
  .main-ref-group-list .k-list .k-item .k-img img {
    height: 284px !important;
  }
  .main-ref-group-list .k-list .k-item .t-video video {
    height: 284px !important;
  }
  .main-ref-group-list {
    margin-top: 60px;
  }

  /*  */
  .ref-detail .bg-container {
    height: 400px;
  }
  .ref-detail.complete .clone {
    --max-height: 400px;
  }
  .ref-detail .section01 .section-inner {
    padding: 60px 20px !important;
    display: block !important;
  }
  .ref-detail .bg-container .title {
    font-size: 34px !important;
    line-height: 40px !important;
    left: 20px;
    bottom: 20px;
  }
  .ref-detail .section01 .k-left > div {
    font-size: 24px;
    line-height: 36px;
  }
  .ref-detail .section01 .k-right {
    margin-top: 30px;
  }
  .ref-detail .section01 .k-right > div {
    font-size: 14px;
    line-height: 21px;
  }
  .ref-detail .section01 .k-right {
    width: initial !important;
  }
  .ref-detail .section01 .tag-container {
    margin-top: 10px;
  }
  .ref-detail .section01 .parallax.alpha {
    opacity: 1 !important;
    transform: none !important;
  }
  .section-ci .section-inner {
    padding: 60px 0;
  }
  /* 시안 모바일 CI 의 구분선은 PC 18 → 10 이다 (Contents 15 컴포넌트 실측 10.1).
     로고 폭은 이 파일 아래쪽의 기존 모바일 규칙(전역 .img02 54px + 프로젝트별 87/65/76)이
     담당하고, LINA·만도의 시안 값(72/99)은 각자 블록의 @media 에 있다. */
  .section-ci .k-content .img-wrap .gap {
    margin: 0 12px;
    height: 10px;
  }
  /* KT 로고만 예외 — PC 39px 가 모바일 규칙 없이 그대로 내려와 tov(33×15.3)의 두 배
     높이(31px)로 보였다. 다른 레거시와 같은 스케일(×0.56)로 내린다. */
  .ai-mental .section-ci .k-content .img-wrap .img02,
  .ai-mental .section-ci .k-content .img-wrap .img02 img {
    width: 22px;
  }
  /*  */
  .allwork .k-list {
    padding: 0 20px;
  }
  .allwork .k-list .inner .swiper-slide {
    width: 140px;
    height: 140px;
  }
  .allwork .k-list .k-item .k-img {
    width: 140px;
    height: 140px;
  }
  .allwork .k-list .k-item .k-img img {
    width: 140px;
    height: 140px;
  }

  .allwork .k-list .k-item .t-video {
    width: 140px;
    height: 140px;
  }
  .allwork .k-list .k-item .t-video video {
    width: 140px;
    height: 140px;
  }

  .k-footer .section-inner {
    padding: 60px 20px 270px 20px;
  }
  .k-footer .font100 {
    font-size: 50px;
    line-height: 60px;
  }
  .allwork .section-inner .top {
    padding: 0 20px;
  }
  .allwork .section-inner .top .k-right .scroll {
    width: 102px;
  }
  .view-page3 .rotate-btn.on {
    left: calc(50% - 50px);
    bottom: 74px;
  }
  .k-footer .tov-title.first .k-text {
    margin-left: 10px;
  }
  .root {
    position: relative;
  }
  .k-body {
    height: fit-content;
  }
  .rotate-btn {
    position: fixed;
  }
  .view-page3 .rotate-btn {
    position: absolute;
  }
  .detail-load-view .ref-detail {
    height: 100%;
  }
  .ref-detail.complete .detail-content {
    height: initial;
  }

  .k-img .pc {
    display: none;
  }
  .k-img .m {
    display: block;
  }

  .main-ref-group-section .main-ref-group .k-video video {
    width: 100%;
  }
  .main-ref-group-section .main-ref-group .k-video.mo {
    display: block;
  }

  .section01 .k-right .k-text br {
    display: none;
  }
  .section-ci .k-content .k-img.img01 {
    width: 33px;
  }

  .view-page1 .k-header .inner .ci {
    display: none;
  }
  .view-page2 .k-header .inner .ci {
    display: none;
  }
  .main-ref-group:not(.k-select-section) .k-content {
    display: block;
  }
}
.view-page3 .k-header {
  z-index: 110;
}

.qcell .section03 .m-img {
  display: none;
}
.news-penguin .section06 .m {
  display: none;
}
.konai .section05 .cont .k-img div {
  margin-top: 20px;
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  color: #b1b1b1;
}

@media screen and (max-width: 1024px) and (min-width: 100px) {
  .samsung-ds .section02 .k-content {
    padding: 60px 20px 20px 20px;
  }
  .samsung-ds .section02 .k-content .title {
    font-size: 30px;
    line-height: 30px;
  }
  .samsung-ds .section02 .k-content .desc {
    font-size: 14px;
    line-height: 21px;
    text-align: center;
  }
  .samsung-ds .section02 .k-content .desc br {
    display: none;
  }
  .samsung-ds .section02 .k-content .k-img img {
    width: 500px;
  }
  .samsung-ds .section02 .k-content .k-img {
    margin-top: 20px;
  }
  .samsung-ds .section02 .k-content .k-img.img01 {
    margin-top: 60px;
  }
  .samsung-ds .section03 .k-content {
    padding: 60px 20px;
  }
  .samsung-ds .section03 .k-content .title {
    font-size: 30px;
    line-height: 30px;
  }
  .samsung-ds .section03 .k-content .desc {
    font-size: 14px;
    line-height: 21px;
    text-align: center;
  }
  .samsung-ds .section03 .k-content .desc br {
    display: none;
  }
  .samsung-ds .section03 .k-content .img-wrap {
    display: block;
    margin-top: 60px;
  }
  .samsung-ds .section03 .k-content .k-img {
    margin: 0px;
    margin-top: 30px;
  }
  .samsung-ds .section03 .k-content .k-img:first-child {
    margin-top: 0px;
  }
  .samsung-ds .section03 .k-content .k-img img {
    width: 100% !important;
  }
  .samsung-ds .section04 .section-inner {
    padding: 60px 20px;
  }

  .samsung-ds .section05 .k-content .k-img {
    width: 252px;
  }
  .samsung-ds .section05 .k-content .img01 {
    top: calc(60px + 30px);
    left: calc(50% - 126px);
  }
  .samsung-ds .section05 .k-content .img02 {
    top: calc(201px + 30px);
    left: calc(50% - 160px);
  }
  .samsung-ds .section05 .k-content .img03 {
    top: calc(210px + 30px);
    left: calc(50% + 105px);
  }
  .samsung-ds .section05 .k-content .img04 {
    top: calc(43px + 30px);
    left: calc(50% - 391px);
  }
  .samsung-ds .section05 .section-inner {
    height: 460px;
  }

  .samsung-ds .section06 {
    padding: 60px 20px;
  }
  .samsung-ds .section06 .section-inner {
    padding: 0px;
  }
  .samsung-ds .section06 .k-content .title {
    font-size: 30px;
    line-height: 30px;
  }
  .samsung-ds .section06 .k-content .desc {
    font-size: 14px;
    line-height: 21px;
    text-align: center;
  }
  .samsung-ds .section06 .k-content .desc br {
    display: none;
  }
  .samsung-ds .section06 .k-content .left {
    padding-right: 7px !important;
  }
  .samsung-ds .section06 .k-content .right {
    padding-left: 7px !important;
  }
  .samsung-ds .section06 .k-content .k-img {
    min-width: 252px;
  }

  .samsung-ds .section06 .k-content .img-wrap {
    margin-top: 60px;
  }
  .samsung-ds .section06 .k-content .k-img:first-child {
    margin-bottom: 18px;
  }
  .samsung-ds .section06 .k-content .img-wrap .right {
    margin-top: 50px;
  }
  .samsung-ds .section-ci .k-content .k-img.img02 {
    width: 87px;
  }

  .agv-system .section02 {
    height: initial;
  }
  .agv-system .section02 .k-text {
    font-size: 30px;
    line-height: 45px;
  }
  .agv-system .section02 .img {
    position: relative;
    height: initial;
  }
  .agv-system .section02 .img img {
    height: 100%;
    object-fit: cover;
    min-height: 420px;
  }
  .agv-system .section02 .k-text {
    left: 20px;
    bottom: 40px;
    top: initial;
  }

  .agv-system .section03 .section-inner {
    padding: 60px 20px;
  }
  .font48 {
    font-size: 30px;
    line-height: 45px;
  }
  .font24 {
    font-size: 14px;
    line-height: 21px;
  }
  .agv-system .section03 .k-content .img-wrap {
    margin-top: 60px;
  }
  .agv-system .section03 .k-content .k-img {
    margin: 0 16px;
  }
  .agv-system .section03 .k-content .k-img img {
    width: 105px;
  }
  .agv-system .section02.section-top .img {
    position: relative;
  }

  .agv-system .section04 .section-inner {
    padding: 60px 15px;
  }
  .agv-system .section04 .k-content .img-wrap {
    justify-content: center;
  }
  .agv-system .section04 .k-content .k-img {
    width: 56px;
    margin: 10px;
  }
  .agv-system .section04 .k-content .desc br {
    display: none;
  }
  .agv-system .section03 .k-content .desc br {
    display: none;
  }

  .agv-system .section05 {
    height: initial;
  }
  .agv-system .section05 .img {
    height: initial;
    position: relative;
  }
  .agv-system .section05.section-top .img {
    position: relative;
  }
  .agv-system .section05 .img img {
    min-height: 334px;
    height: initial;
  }
  .agv-system .section-ci .k-content .k-img.img02 {
    width: 65px;
  }

  .munggo .section02 .k-bg img {
    min-height: 419px;
    height: initial;
  }
  .munggo .section02 .k-txt {
    padding: 40px 20px;
  }
  .munggo .section02 .k-txt .k-text {
    font-size: 16px;
    line-height: 20px;
  }

  .munggo .section03 .k-body {
    padding: 60px 20px;
  }
  .munggo .section03 .k-bg {
    display: none;
  }
  .munggo .section03 .k-body dl dt {
    font-size: 24px;
    line-height: 36px;
  }
  .munggo .section03 .k-body dl dd {
    font-size: 16px;
    line-height: 16px;
  }
  .munggo .section03 .chart-wrap {
    margin-top: 60px;
  }
  .munggo .section03 .chart-wrap ul li {
    margin-top: 14px;
    align-items: center;
  }
  .munggo .section03 .chart-wrap ul li .bar {
    height: 10px;
  }
  .munggo .section03 .chart-wrap ul li .bar.st1 {
    width: 30% !important;
  }
  .munggo .section03 .chart-wrap ul li .bar.st2 {
    width: 40% !important;
  }
  .munggo .section03 .chart-wrap ul li .bar.st3 {
    width: 60% !important;
  }
  .munggo .section03 .chart-wrap ul li .bar.st4 {
    width: 20% !important;
  }
  .munggo .section03 .chart-wrap ul li .bar.st5 {
    width: 60% !important;
  }
  .munggo .section03 .chart-wrap ul li .bar.st6 {
    width: 50% !important;
  }
  .munggo .section03 .chart-wrap ul li .bar.st7 {
    width: 70% !important;
  }
  .munggo .section03 .chart-wrap ul li .bar.st8 {
    width: 55% !important;
  }
  .munggo .section03 .chart-wrap ul li .bar.st9 {
    width: 70% !important;
  }
  .munggo .section03 .chart-wrap ul li .bar.st10 {
    width: 30% !important;
  }
  .munggo .section03 .chart-wrap .title {
    font-size: 14px;
    line-height: 21px;
  }
  .munggo .section03 .more {
    margin-top: 60px;
    padding: 0px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .munggo .section03 .more span {
    width: 6px;
    height: 6px;
  }
  .munggo .section03 .more span:last-child {
    margin-bottom: 0px;
  }

  .munggo .section04 {
    padding: 60px 20px;
  }
  .munggo .section04 dl dd {
    margin-top: 60px;
  }
  .munggo .section04 .title {
    font-size: 24px;
    line-height: 36px;
  }

  .munggo .section04 .k-img.img01 {
    width: 51px;
    left: 80%;
  }
  .munggo .section04 .k-img.img02 {
    width: 103px;
    left: 40%;
  }
  .munggo .section04 .k-img.img05 {
    width: 58px;
    left: -1%;
  }
  .munggo .section04 .k-img.img03 {
    width: 104px;
    left: 75%;
    top: 60%;
  }
  .munggo .section04 .k-img.img04 {
    width: 51px;
    left: 71%;
    top: 80%;
  }

  .munggo .section05 {
    padding: 0px;
  }
  .munggo .section05 .k-bg img {
    --object-position: bottom;
  }
  .munggo .section05 .title {
    font-size: 24px;
    line-height: 36px;
  }
  .munggo .section05 .desc {
    font-size: 18px;
    line-height: 27px;
  }
  .munggo .section05 .desc br {
    display: none;
  }
  .munggo .section05 .k-body {
    padding: 60px 20px;
  }
  .munggo .section05 .k-body .middle ul {
    flex-direction: column;
    align-items: center;
  }
  .munggo .section05 .k-body .middle ul li {
    width: 190px;
    text-align: center;
    margin-top: 10px;
    font-size: 24px;
    line-height: 36px;
    font-weight: 300;
  }
  .munggo .section05 .k-body .middle ul li:first-child {
    margin-top: 0px;
  }
  .munggo .section05 .k-body .bottom {
    margin-top: 50px;
  }

  .munggo .section06 {
    padding: 60px 20px;
  }
  .munggo .section06 .title {
    font-size: 24px;
    line-height: 36px;
  }
  .munggo .section06 .k-cont {
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
  }
  .munggo .section06 .k-cont .left img {
    width: 253px;
  }
  .munggo .section06 .k-cont .right {
    margin-top: 60px;
  }
  .munggo .section06 .k-cont .right img {
    width: 179px;
  }
  .munggo .section06 .k-cont .txt {
    font-size: 18px;
    line-height: 27px;
  }
  .munggo .section07 {
    padding: 60px 20px 0px 20px;
    background-color: #fff;
  }
  .munggo .section07 .title {
    font-size: 24px;
    line-height: 36px;
  }
  .munggo .k-section .section-inner {
    display: flex;
    flex-direction: column-reverse;
  }
  .munggo .section07 .k-bg {
    position: relative;
    margin-top: 60px;
  }
  .munggo .section08 {
    padding: 60px 20px;
    background-color: #fff;
  }
  .munggo .section08 .title {
    font-size: 24px;
    line-height: 36px;
  }
  .munggo .section08 .middle {
    margin-top: 60px;
  }
  .munggo .section08 .middle img {
    width: 100%;
  }
  .munggo .section09 {
    padding: 60px 20px;
    background-color: #fff;
  }
  .munggo .section09 .title {
    font-size: 24px;
    line-height: 36px;
  }
  .munggo .section09 .middle img {
    width: 100%;
  }
  .munggo .section09 .middle .st3 img {
    width: 90%;
  }
  .munggo .section09 .middle {
    margin-top: 60px;
  }
  .munggo .section09 .middle div {
    margin-top: 40px;
  }
  .munggo .section10 {
    padding: 60px 0px 0px 0px;
    background-color: #fff;
  }
  .munggo .section10 .title {
    font-size: 24px;
    line-height: 36px;
    padding: 0 20px;
  }
  .munggo .section10 .middle {
    margin-top: 50px;
  }
  .munggo .section10 .middle .st2 {
    padding: 0px;
  }
  .munggo .section10 .middle div {
    margin-top: 60px;
  }
  .munggo .section10 .middle div.st1 {
    padding: 0 20px;
  }
  .munggo .section12 {
    padding: 75px 15px 0 15px;
    background: linear-gradient(180deg, #56bdcb -10%, #fff 100%);
  }
  .munggo .section12 .k-body {
    margin-bottom: 20px;
  }
  .munggo .section12 .k-body > div {
    width: 33%;
    padding: 0 5px;
    margin: 0px;
  }
  .munggo .section12 img {
    width: 100%;
    margin-bottom: 0px;
  }
  .munggo .section12 .k-body .k-img {
    margin-bottom: 10px;
  }

  .munggo .section06 .k-cont .left {
    width: initial;
  }
  .munggo .section07 .k-body .middle img {
    width: 100%;
  }
  .munggo .section07 .k-body .middle {
    margin-top: 60px;
  }
  .munggo .section07 .k-body .bottom {
    margin-top: 30px;
  }

  .qcell .section02 .k-list .k-img {
    height: 180px;
  }
  .qcell .section02 .k-list .k-img img {
    height: 180px;
  }
  .qcell .section02 .k-list .k-img.img02 {
    padding: 0 4px;
  }
  .qcell .section02 .k-list .k-img.img04 {
    padding-right: 4px;
    margin-top: 4px;
  }
  .qcell .section02 .k-list .k-img.img05 {
    padding-right: 4px;
    margin-top: 4px;
  }
  .qcell .section02 .k-list .k-img.img06 {
    padding-right: 4px;
    margin-top: 4px;
  }
  .qcell .section02 .k-list .k-img.img07 {
    margin-top: 4px;
  }
  .qcell .section03 {
    padding: 100px 0;
  }
  .qcell .section03 .title {
    font-size: 20px;
    line-height: 30px;
  }
  .qcell .section03 .img-wrap {
    padding: 0 20px;
  }
  .qcell .section03 .k-img {
    margin-top: 60px;
  }
  .qcell .section04 .k-text {
    font-size: 28px;
    line-height: 28px;
  }
  .qcell .section05 .txt {
    padding: 0px 0px 60px 0px;
  }
  .qcell .section05 .k-text {
    font-size: 16px;
    line-height: 24px;
  }
  .qcell .section06 .k-bg {
    height: initial;
  }
  .qcell .section06 .k-bg img {
    height: initial;
  }
  .qcell .section07 {
    padding: 100px 0;
  }
  .qcell .section07 .title {
    font-size: 24px;
    line-height: 36px;
  }
  .qcell .section07 .cont .k-img {
    margin: 0 7px;
  }
  .qcell .section07 .cont {
    margin-top: 60px;
  }
  .qcell .section07 .cont2 {
    margin-top: 25px;
  }
  .qcell .section08 {
    padding: 100px 20px;
    width: initial;
  }
  .qcell .section08 .title {
    font-size: 24px;
    line-height: 36px;
  }
  .qcell .section08 .cont .k-img {
    margin-top: 15px;
  }
  .qcell .section09 {
    padding: 100px 0;
  }
  .qcell .section09 .title {
    font-size: 24px;
    line-height: 36px;
  }
  .qcell .section09 .cont .k-img {
    margin: 0 7px;
  }
  .qcell .section09 .cont {
    margin-top: 60px;
  }
  .qcell .section09 .cont2 {
    margin-top: 25px;
  }
  .qcell .section10 {
    padding: 100px 0;
  }
  .qcell .section10 .title {
    font-size: 24px;
    line-height: 36px;
  }
  .qcell .section10 .cont .k-img {
    min-width: 50%;
    width: 50%;
    margin: 0 10px;
  }
  .qcell .section10 .cont2 {
    margin-top: 20px;
  }
  .qcell .section-ci .k-content .k-img.img02 {
    width: 76px;
  }

  .news-penguin .section03 .list {
    display: block;
  }
  .news-penguin .section03 .list .item {
    width: 100%;
  }
  .news-penguin .section03 .list .item dl dt {
    font-size: 24px;
    line-height: 24px;
  }

  .news-penguin .section04 {
    padding-top: 100px;
  }
  .news-penguin .section04 .section-inner {
    padding: 0 10px 0 70px;
    display: block;
  }
  .news-penguin .section04 .chart-wrap {
    width: 100%;
  }
  .news-penguin .section04 .head {
    width: 100%;
  }
  .news-penguin .section04 .title {
    font-size: 22px;
  }
  .news-penguin .section04 .desc {
    font-size: 16px;
    line-height: 24px;
  }
  .news-penguin .section04 .legend .top {
    display: flex;
  }
  .news-penguin .section04 .legend .bottom2 {
    display: flex;
  }
  .news-penguin .section04 .legend .st2 {
    margin-top: 0px;
    margin-left: 10px;
  }
  .news-penguin .section04 .legend .st4 {
    margin-left: 10px;
  }

  .news-penguin .section05 {
    padding-top: 100px;
  }
  .news-penguin .section05 .k-text.title {
    font-size: 22px;
    line-height: 22px;
  }
  .news-penguin .section05 .k-text.desc {
    font-size: 18px;
    line-height: 27px;
  }
  .news-penguin .section05 .img img {
    width: 100%;
  }

  .news-penguin .section06 {
    padding-top: 100px;
  }
  .news-penguin .section06 .head {
    display: block;
    padding: 0 20px;
  }
  .news-penguin .section06 .m {
    display: block;
  }
  .news-penguin .section06 .head .k-left .st1 {
    font-size: 18px;
    line-height: 27px;
  }
  .news-penguin .section06 .head .k-left .st2 {
    font-size: 24px;
    line-height: 33px;
  }
  .news-penguin .section06 .head .k-left .st3 {
    font-size: 16px;
    line-height: 24px;
  }
  .news-penguin .section06 .head .k-left .st3 br {
    display: none;
  }
  .news-penguin .section06 .head .k-right .inner div {
    width: 175px;
    height: 175px;
  }
  .news-penguin .section06 .head .k-right dl dt {
    font-size: 13px;
    line-height: 12px;
  }
  .news-penguin .section06 .head .k-right dl dd {
    font-size: 7px;
    line-height: 7px;
    margin-top: 8px;
  }
  .news-penguin .section06 .head .k-right .c1 {
    left: calc(50% - 74px);
  }
  .news-penguin .section06 .head .k-right .c2 {
    left: calc(50% - 74px - 75px);
    top: calc(175px - 50px);
  }
  .news-penguin .section06 .head .k-right .c3 {
    left: calc(50% - 74px + 75px);
    top: calc(175px - 50px);
  }
  .news-penguin .section06 .head .k-right .inner {
    margin-top: 30px;
  }

  .news-penguin .section06 .cont .explore .img,
  .news-penguin .section06 .cont .gamification .img {
    border-width: 5px;
  }

  .news-penguin .section06 .cont {
    margin-top: 500px;
  }
  .news-penguin .section06 .cont .bird {
    left: calc(50% - 200px);
    width: 110px;
    top: -133px;
  }
  .news-penguin .section06 .cont .explore {
    padding: 0 20px;
  }
  .news-penguin .section06 .cont .explore .txt {
    margin: 0 -15px;
  }
  .news-penguin .section06 .cont .gamification {
    padding: 0 20px;
    margin-top: 170px;
  }
  .news-penguin .section06 .cont .gamification .img {
    margin-top: -2px;
  }
  .news-penguin .section06 .cont .gamification .bg {
    bottom: -50px;
  }
  .news-penguin .section07 {
    padding-top: 80px;
  }

  .news-penguin .section07 .cont1 {
    display: block;
  }
  .news-penguin .section07 .cont .img img {
    width: 100%;
    height: auto;
  }
  .news-penguin .section07 .cont .img.st1 {
    padding: 0px;
  }
  .news-penguin .section07 .cont1 {
    padding: 0 20px;
  }
  .news-penguin .section07 .cont .img.st2 {
    padding: 0px;
    margin-top: 10px;
  }
  .news-penguin .section07 .cont .img {
    height: initial;
    border-radius: 10px;
    overflow: hidden;
  }
  .news-penguin .section07 .cont2 {
    margin-top: 60px;
  }

  .news-penguin .section07 .cont3 {
    margin-top: 40px;
  }
  .news-penguin .section07 .cont .img.st3 {
    padding: 0px;
  }
  .news-penguin .section07 .cont .img.st4 {
    margin-left: 20px;
    padding-left: 0px;
  }
  .news-penguin .section07 .cont3 .st2 {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    padding: 0 20px 100px 80px;
  }
  .news-penguin .section07 .cont3 .st2 img {
    width: 100%;
    --padding: 0 20px 100px 80px;
    box-sizing: border-box;
  }

  .news-penguin .section07 .cont3 .st1 {
    left: 20px;
    bottom: 100px;
  }
  .news-penguin .section07 .cont3 .st1 img {
    width: 120px;
  }

  .news-penguin .section07 .cont4 {
    margin-top: 120px;
  }
  .news-penguin .section07 .cont4 .inner {
    padding: 0 10px;
  }
  .news-penguin .section07 .cont4 .img {
    margin: 0 10px;
    width: 30%;
  }
  .news-penguin .section08 .img img {
    height: initial;
  }
  .news-penguin .section07 .cont2 {
    padding: 0 20px;
  }
  .news-penguin .section07 .cont4 .img img {
    border-radius: 10px;
  }

  .flip {
    width: 80%;
    top: 16%;
    left: 11%;
  }
  .flip > div {
    width: 33.3%;
  }
  .flip img {
    width: 100% !important;
  }

  .konai .section02 .cont {
    position: relative;
    align-items: flex-start;
    padding: 100px 0;
  }
  .konai .section02 .img-wrap {
  }
  .konai .section02 .img-wrap > .k-img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    min-height: 600px;
  }
  .konai .section02 .img-wrap > .k-img img {
    object-fit: cover;
    height: 100%;
    min-height: 600px;
  }
  .konai .section02 .cont .inner {
    padding: 0 20px;
  }
  .konai .section02 .cont dl {
    align-items: center;
  }
  .konai .section02 .cont dl dt {
    font-size: 14px;
    line-height: 20px;
    width: initial;
  }
  .konai .section02 .cont dl dd {
    font-size: 14px;
    line-height: 25px;
    padding-left: 30px;
  }

  .konai .section04 .section-inner {
    padding: 0px;
  }
  .konai .section04 .k-content {
    display: block;
  }
  .konai .section04 .img-wrap {
    width: 100%;
    padding: 0px;
    margin-top: 10px;
  }
  .konai .section04 .img-wrap {
    display: block;
  }
  .konai .section04 .img-wrap.txt {
    padding: 60px 20px;
    margin-top: 10px;
  }
  .konai .section04 .img-wrap dl {
    max-width: 100%;
  }
  .konai .section04 .img-wrap dl dd {
    line-height: 21px;
  }

  .konai .section05 .section-inner {
    padding: 100px 20px 50px 20px;
  }
  .konai .section05 .cont {
    display: block;
  }
  .konai .section05 .cont .k-img {
    margin: 0px;
    width: 100%;
    margin-top: 60px;
  }
  .konai .section05 .cont .k-img div {
    margin-top: 20px;
    font-size: 16px;
    line-height: 24px;
    color: #b1b1b1;
    text-align: center;
  }
  .konai .section05 .cont .k-img:first-child {
    margin-top: 0px;
  }

  .konai .section06 .section-inner {
    padding: 50px 20px 100px 20px;
  }
  .konai .section06 .cont {
    margin-top: 40px;
    display: block;
  }
  .konai .section06 .cont .k-img {
    width: 100%;
    margin-top: 30px;
  }
  .konai .section06 .cont .k-img:first-child {
    margin-top: 0px;
  }

  .section-ci .k-content .k-img.img02 {
    width: 160px;
  }
  .section-ci .k-content .k-img.img02 img {
    width: 100%;
  }

  /*  */
  .skhynix-esg .section02 .section-inner {
    padding: 0 20px;
  }
  .skhynix-esg .section02 .section-inner .k-text br {
    display: none;
  }
  .skhynix-esg .section02 .middle img {
    width: 100%;
  }
  .skhynix-esg .section02 .bottom {
    margin-top: 0px;
    display: block;
  }
  .skhynix-esg .section02 .bottom .left {
    margin-top: 60px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: 0 100px;
  }
  .skhynix-esg .section02 .bottom .left img {
    min-width: 227px;
  }
  .skhynix-esg .section02 .bottom .right {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 60px;
  }
  .skhynix-esg .section02 .bottom .gap {
    display: none;
  }

  .skhynix-esg .section03 img {
    min-height: 456px;
    object-fit: cover;
    object-position: center;
  }
  .skhynix-esg .section04 img {
    min-height: 393px;
    object-fit: cover;
    object-position: center;
  }
  .skhynix-esg .section05 .section-inner {
    padding: 100px 20px;
    display: block;
  }
  .skhynix-esg .section05 .section-inner .k-text br {
    display: none;
  }
  .skhynix-esg .section06 .k-text {
    font-size: 23px;
  }
  .skhynix-esg .section06 .k-text .st1 {
  }
  .skhynix-esg .section06 .k-text .st2 {
    margin-top: 5px;
  }

  .skhynix-esg .section07 .section-inner {
    padding: 200px 20px 100px 20px;
  }
  .skhynix-esg .section07 .st1 {
    padding: 0 80px;
    box-sizing: border-box;
  }
  .skhynix-esg .section07 .section-inner .k-img img {
    width: 100%;
  }

  .skhynix-esg .section08 {
    background-color: white;
  }
  .skhynix-esg .section08 .section-inner {
    padding: 100px 20px 100px 20px;
  }
  .skhynix-esg .section08 .ico {
    width: 100%;
    height: 100%;
  }
  .skhynix-esg .section08 .ico img.ico01 {
    width: 51px;
    left: 90px;
    top: 20px;
  }
  .skhynix-esg .section08 .ico img.ico02 {
    width: 46px;
    right: 50px;
    left: initial;
    top: 100px;
  }
  .skhynix-esg .section08 .ico img.ico03 {
    width: 55px;
    right: 30px;
    left: initial;
    top: 40%;
  }
  .skhynix-esg .section08 .ico img.ico04 {
    width: 55px;
    left: -10px;
    top: 50%;
  }
  .skhynix-esg .section08 .ico img.ico05 {
    width: 50px;
    left: 100px;
    top: 80%;
  }

  .skhynix-esg .section08 .bottom .k-img {
    margin: 0 17px;
  }
  .skhynix-esg .section08 .bottom .k-img img {
    width: 113px;
  }
  .skhynix-esg .section09 .section-inner .txt-wrap {
    padding: 0 20px;
  }
  .skhynix-esg .section10 .img-wrap .k-img.st2 {
    z-index: 1;
  }

  .skhynix-esg .section10 .section-inner {
    padding: 100px 20px 200px 20px;
  }
  .skhynix-esg .section10 .img-wrap .k-img {
    margin-top: 40px;
  }
  .skhynix-esg .section10 .ico.ico01 {
    left: -20%;
    width: 30%;
    top: -100px;
  }
  .skhynix-esg .section10 .ico.ico02 {
    right: -10%;
    width: 40%;
    top: 50px;
    left: initial;
  }
  .skhynix-esg .section11 .k-content {
    display: block;
  }
  .skhynix-esg .section11 .k-content .k-right {
    margin-top: 20px;
  }
  .skhynix-esg .section11 .k-content {
    padding: 20px;
  }
  .skhynix-esg .section11 .k-list {
    min-width: 120%;
  }
  .skhynix-esg .section11 .k-list .k-img {
    max-width: 28%;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .skhynix-esg .section11 .k-list .k-img img {
    border-radius: 0px;
  }
  .skhynix-esg .section11 .k-list .k-img.last img {
    width: 100%;
  }
  .skhynix-esg .section11 .section-inner > .k-img {
    height: initial;
  }
  .skhynix-esg .section11 .section-inner {
    height: initial;
  }
  .section-ci .k-content .k-img.img02 {
    width: 54px;
  }
  /*  */
}

.cardCanvas {
  position: absolute;
  top: -400px;
  left: calc(50% - 1000px);
  width: 2000px;
  z-index: 10;
}
/* 단위 없는 값은 무효 선언으로 드롭되므로 px 를 붙인다.
   단, three.js renderer.setSize(2000,3000) 가 canvas 에 인라인 style 을 직접 찍고
   그게 항상 이기므로 아래 선언은 실질적으로 폴백일 뿐이다(크기 제어는 JS 가 단일 소스). */
.cardCanvas canvas {
  width: 2000px;
  height: 3000px;
}

@media screen and (max-width: 1024px) and (min-width: 100px) {
  .cardCanvas {
    display: none;
    position: absolute;
    top: -400px;
    left: 0px;
    width: 100vw;
    z-index: 10;
  }
  .cardCanvas canvas {
    width: 100vw;
    height: 1000px;
  }
}

@media screen and (max-width: 410px) {
  .official .k-video.mo .title-wrap2 dl br.pc {
    display: none;
  }
  .official.main-ref-group .title-wrap dl dd span br.pc {
    display: none;
  }
}

.tag-list-view {
  display: none;
  justify-content: flex-start;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: #2e3c34;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transition: all 0.5s;
}
.tag-list-view.on {
  display: flex;
}
.tag-list-view.view {
  opacity: 1;
}
.tag-list-view .list-inner {
  width: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
}
.tag-list-view .list-inner .scroll {
  padding: 80px 0px 0 0px;
  max-width: 1940px;
  width: 100%;
}
.tag-list-view .list-head {
  padding: 30px 0px 30px 160px;
}
.tag-top {
  position: relative;
  overflow: hidden;
}
.tag-top .tag-inner {
  display: flex;
}
.tag-item {
  margin-right: 10px;
  width: initial !important;
  cursor: pointer;
  padding: 10px;
  display: flex !important;
  align-items: center;
  border: 1px solid #fff;
  border-radius: 24px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
  display: flex;
  transition: all 0.25s;
}
.tag-item span {
  position: relative;
  z-index: 10;
  margin-left: 4px;
  display: block;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 2L10 10M10 2L2 10' stroke='%23EDEEE7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    0 0 no-repeat;
}
.tag-item:hover {
  background-color: #6b9c80;
  border: 1px solid #6b9c80;
}
.close-tag-view {
  position: fixed;
  top: 120px;
  left: 60px;
}
.tag-list-view .result-ttl {
  padding: 30px 0;
  font-size: 48px;
  line-height: 58px;
  color: #fff;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
}
.tag-list-view .list-container {
  padding: 0 160px;
}
.tag-list-view .list-container .main-ref-group-list {
  display: flex;
  margin-top: 0px;
}
.tag-list-view .list-container .tag-list-view {
  display: flex;
}
.tag-list-view .main-ref-group-list .k-list {
  flex-wrap: wrap;
}
.tag-list-view .main-ref-group-list .k-list .k-item {
  opacity: 1;
  margin-bottom: 60px;
}
.tag-list-view .k-footer {
  background-color: transparent !important;
}
.tag-list-view .k-footer .section-inner {
  padding: 140px 60px 30px 60px;
}
.tag-list-view .k-footer .tov-title {
  color: #fff !important;
  opacity: 1;
}
.tag-list-view .rotate-btn {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tag-list-view .rotate-btn a {
  display: flex;
}
.tag-list-view .k-tag-item img {
  height: initial;
  max-height: 360px;
}
@media screen and (max-width: 1024px) and (min-width: 100px) {
  .tag-list-view {
    z-index: 1000;
  }
  .tag-list-view .list-inner .scroll {
    padding-top: 20px;
  }
  .tag-list-view .list-container {
    padding: 0 24px;
  }
  .tag-list-view .tag-list-view .main-ref-group-list .k-list {
    flex-wrap: nowrap;
  }
  .close-tag-view {
    left: 24px;
    top: 40px;
  }
  .tag-list-view .list-head {
    padding: 10px 0 10px 70px;
  }
  .tag-list-view .k-footer .section-inner {
    padding: 60px 20px 270px 20px;
  }
  body > img.clone {
    z-index: 1001;
  }
}

.all-list-view {
  display: none;
  justify-content: flex-start;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: #edeee7;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transition: all 0.5s;
}
.all-list-view.on {
  display: flex;
}
.all-list-view.view {
  opacity: 1;
}
.all-list-view .list-inner {
  width: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}
.all-list-view .list-inner .scroll {
  padding: 80px 0px 0 0px;
  max-width: 1940px;
  width: 100%;
}
.all-list-view .list-head {
  padding: 30px 0px 30px 160px;
}
.all-list-view .all-title {
  padding: 200px 0 0px 0;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
  font-size: 48px;
  line-height: 58px;
  font-weight: 800;
  color: #6b9c80;
}
.close-tag-view {
  position: fixed;
  top: 120px;
  left: 60px;
}
.all-list-view .result-ttl {
  padding: 30px 0;
  font-size: 48px;
  line-height: 58px;
  color: #fff;
  font-family: "Avenir", "Montserrat", "Pretendard", sans-serif;
}
.all-list-view .list-container {
  padding: 0 160px;
}
.all-list-view .list-container .main-ref-group-list {
  display: flex;
  margin-top: 0px;
}
.all-list-view .main-ref-group-list .k-list {
  flex-wrap: wrap;
}
.all-list-view .main-ref-group-list .k-list .k-item {
  opacity: 1;
  margin-bottom: 60px;
}
.all-list-view .k-footer {
  background-color: transparent !important;
}
.all-list-view .k-footer .section-inner {
  padding: 140px 60px 30px 60px;
}
.all-list-view .k-footer .tov-title {
  color: #6b9c80 !important;
  opacity: 1;
}
.all-list-view .rotate-btn {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 1;
}
.all-list-view .rotate-btn a {
  display: flex;
}
@media screen and (max-width: 1024px) and (min-width: 100px) {
  .all-list-view {
    z-index: 1000;
  }
  .all-list-view .all-title {
    padding-top: 50px;
    font-size: 24px;
    line-height: 30px;
  }
  .all-list-view .list-inner .scroll {
    padding-top: 20px;
  }
  .all-list-view .list-container {
    padding: 0 24px;
  }
  .all-list-view .all-list-view .main-ref-group-list .k-list {
    flex-wrap: nowrap;
  }
  .close-tag-view {
    left: 24px;
    top: 40px;
  }
  .all-list-view .list-head {
    padding: 10px 0 10px 70px;
  }
  .all-list-view .k-footer .section-inner {
    padding: 60px 20px 270px 20px;
  }
  body > img.clone {
    z-index: 1001;
  }

  .all-list-view .main-ref-group-list .k-list {
    flex-wrap: nowrap;
  }
}

.k-header .ci a.tween {
}
.k-header .ci a .load-ci {
  position: absolute;
  top: 0px;
}
.k-header .ci a .load-ci svg {
  width: 60px;
  height: 28px;
}

.k-header .ci a > svg {
  opacity: 1;
  transition: all 0.25s;
}
.k-header .ci a .load-ci svg {
  opacity: 0;
  transition: all 0.25s;
}

.k-header .ci a.on > svg {
  opacity: 0;
}
.k-header .ci a.on .load-ci svg {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════
   PROJECT: LINA-User-Portal  (2026-08-06 신설, 같은 날 두 번 재정합)

   시안 Vc8MOAcKH3GXd5m2DJNQxL — PC 2087:35933(1920) · 모바일 2118:59361(375)

   ── 레이아웃 규칙 ────────────────────────────────────────────
   · 텍스트는 사이트 관례대로 **고정 px, PC/모바일 두 단계**다.
     (styles.css·common.css 전수 조사: font-size 에 vw/calc 를 쓴 곳 0건 —
      비례 축소는 이 사이트의 관례가 아니다. --u 방식은 이 블록에서 폐기했다.)
   · 이미지 무리만 비례로 준다: aspect-ratio 캔버스(.k-canvas) + % 좌표.
     시안 본문이 절대좌표 캔버스라(프레임 8 = 직계 15개 전원 ABSOLUTE)
     흐름 배치로는 같은 그림이 안 나오는 부분이 이미지 겹침이다.
   · 시안 모바일은 카드·AI 목업을 일부러 오른쪽으로 흘려 프레임이 자른다
     (정답지 렌더로 확인). 전역 .k-section{overflow:hidden} 이 그대로 잘라준다.
   · 수직 간격은 시안 px 그대로 고정(다른 상세들도 고정 간격이다).
     1920/375 정폭에서 시안과 픽셀 일치, 그 외 폭은 사이트 표준 거동.

   ── 그림자 ──────────────────────────────────────────────────
   추출 이미지에 구워져 있던 그림자는 잘라냈고(원본 ~/dev/jarvis/.tovgen/raw/)
   여기 CSS 6겹이 유일한 그림자다. 값은 시안 DROP_SHADOW 그대로, PC/모바일 각각.
   ══════════════════════════════════════════════════════════════════ */
.lina-portal {
  font-family: "Pretendard";
  --sh-mock:
    0 2.77px 2.21px rgba(0, 0, 0, 0.02), 0 6.65px 5.32px rgba(0, 0, 0, 0.03),
    0 12.52px 10.02px rgba(0, 0, 0, 0.04),
    0 22.34px 17.87px rgba(0, 0, 0, 0.04),
    0 41.78px 33.42px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
  --sh-card:
    0 3.71px 2.97px rgba(0, 0, 0, 0.02), 0 8.92px 7.14px rgba(0, 0, 0, 0.03),
    0 16.79px 13.43px rgba(0, 0, 0, 0.04),
    0 29.96px 23.97px rgba(0, 0, 0, 0.04),
    0 56.03px 44.82px rgba(0, 0, 0, 0.05),
    0 134.12px 107.29px rgba(0, 0, 0, 0.07);
  --sh-side: 0 1.3px 2.6px rgba(0, 0, 0, 0.06);
}
.lina-portal .sec-inner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  box-sizing: border-box;
}
.lina-portal .sec-inner * {
  box-sizing: border-box;
}
/* 시안이 PC/모바일에서 본문 줄을 다르게 끊는다 — 폭에 맡기면 단어 중간에서 잘린다 */
.lina-portal br.m {
  display: none;
}
/* 이미지 캔버스 — 시안 절대좌표를 % 로 재현. display 는 전역 .k-img .pc/.m 규칙에 맡긴다 */
.lina-portal .k-canvas {
  position: relative;
}
/* 이미지에 라운드 클리핑 금지 — 라운드·검정 테두리는 픽셀에 이미 있고, 고정 px 라운드는
   축소된 이미지의 모서리를 과하게 깎는다(사용자 실측). 컨테이너 라운드는 그림자 실루엣용. */
.lina-portal .k-canvas img {
  width: 100%;
  vertical-align: top;
}

/* ── section01 — Overview (골격은 사이트 관례, 배경·글자색은 시안: 주황 #F6AC4B 위 밝은 글자) ── */
.lina-portal .section01 {
  background-color: #f6ac4b;
}
.lina-portal .section01 .section-inner {
  display: flex;
  padding: 100px 60px;
}
.lina-portal .section01 .k-left {
  flex: 1 auto;
}
.lina-portal .section01 .k-right {
  width: 860px;
}
.lina-portal .section01 .k-left .k-text {
  color: #edeee7;
}
.lina-portal .section01 .k-right .k-text {
  color: #fff;
  line-height: 36px;
}
/* JS 가 주입하는 태그 칩 — 전역은 초록(#6b9c80)이라 주황 위에서 안 보인다. 시안은 밝은 외곽선 */
.lina-portal .section01 .tag-container div {
  color: #edeee7;
  border-color: #edeee7;
}
.lina-portal .section01 .tag-container div:hover {
  color: #f6ac4b;
  background-color: #edeee7;
}

/* ══ section02 — 현재 역할과 Pain Point (시안 12 · 1920×800, 전부 고정) ══ */
.lina-portal .section02 {
  background-color: #fff;
  color: #000;
}
.lina-portal .section02 .sec-inner {
  padding: 162px 0;
}
.lina-portal .s2-col {
  width: 569px;
  margin: 0 auto;
}
.lina-portal .s2-head {
  font-size: 36px;
  font-weight: 700;
  line-height: 50.4px;
}
.lina-portal .s2-rule {
  margin-top: 40px;
  height: 2px;
  background: #000;
}
/* 시안은 불릿 리스트 — characters 에 안 나와서 정답지 렌더로 실측(불릿 0.63em/들여쓰기 1.55em) */
.lina-portal .s2-list {
  margin: 38px 0 0;
  padding: 0 0 0 37px;
  list-style: none;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.48px;
  line-height: 40.8px;
}
.lina-portal .s2-list li {
  position: relative;
  list-style: none;
}
.lina-portal .s2-list li::before {
  content: "\2022";
  position: absolute;
  left: -22px;
}
.lina-portal .s2-row {
  display: flex;
  justify-content: space-between;
  margin-top: 81px;
  padding: 0 100px;
}
.lina-portal .s2-pain.p1 {
  width: 26.98%;
} /* 464/1720 */
.lina-portal .s2-pain.p2 {
  width: 12.44%;
} /* 214/1720 */
.lina-portal .s2-pain.p3 {
  width: 24.48%;
} /* 421/1720 */
.lina-portal .s2-pain.p4 {
  width: 12.38%;
} /* 213/1720 */
.lina-portal .s2-pt {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}
.lina-portal .s2-pr {
  margin-top: 20px;
  height: 2px;
  background: #000;
}
/* 들여쓰기 30px: 시안은 31 이지만 p4 문장이 182.3px 로 가용 182.1px 를 0.2px 넘겨 감긴다 */
.lina-portal .s2-pd {
  position: relative;
  margin-top: 18px;
  padding-left: 30px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.4px;
  line-height: 34px;
}
.lina-portal .s2-pd::before {
  content: "\2022";
  position: absolute;
  left: 13px;
}

/* ══ section03 — 개선 방향 (시안 13 · 배경 이미지 + 검정 20% + 흰 원, 원·글자 고정) ══ */
.lina-portal .section03 {
  position: relative;
  overflow: hidden;
  background-color: #0d1116;
}
.lina-portal .s3-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.lina-portal .s3-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lina-portal .s3-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
}
.lina-portal .section03 .sec-inner {
  z-index: 2;
  padding: 282px 0 360px;
}
.lina-portal .s3-title {
  text-align: center;
  color: #fff;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.96px;
  line-height: 57.6px;
}
/* 원 4개: 폭이 모자라면 간격부터 줄고(시안 131px), 그다음은 섹션이 자른다 — 원과 글자는 고정 */
.lina-portal .s3-row {
  display: flex;
  justify-content: center;
  margin-top: 100px;
  gap: min(131px, calc((100% - 1120px) / 3));
}
.lina-portal .s3-circle {
  position: relative;
  flex: 0 0 280px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: #fff;
}
.lina-portal .s3-ct {
  position: absolute;
  left: 0;
  top: 78px;
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
}
.lina-portal .s3-cd {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  color: #a2a2a2;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  line-height: 24.8px;
}
/* 시안이 원마다 손으로 놓은 값 */
.lina-portal .s3-circle.c1 .s3-cd {
  top: 133px;
}
.lina-portal .s3-circle.c2 .s3-cd {
  top: 146px;
}
.lina-portal .s3-circle.c3 .s3-cd {
  top: 146px;
}
.lina-portal .s3-circle.c4 .s3-cd {
  top: 133px;
}

/* ══ section04 — 데이터 허브 · 메뉴 구조 · AI (시안 8 · 1920×5441) ══ */
.lina-portal .section04 {
  background-color: #fff;
  color: #000;
}
.lina-portal .section04 .sec-inner {
  padding: 226px 0 285px;
}

/* 목업 겹침 캔버스 — 시안 y 226~1268 */
.lina-portal .s4-mocks {
  aspect-ratio: 1920/1042;
}
.lina-portal .s4-shot {
  position: absolute;
  box-shadow: var(--sh-mock);
}
.lina-portal .mock-b {
  left: 33.44%;
  top: 0;
  width: 58.75%;
  border-radius: 2.25% / 4.29%;
  overflow: hidden;
  z-index: 2;
} /* 642,226 1128 */
.lina-portal .mock-a {
  left: 7.81%;
  top: 38.29%;
  width: 58.75%;
  border-radius: 2.89% / 5.04%;
  overflow: hidden;
  z-index: 1;
} /* 150,625 1128 */

.lina-portal .s4-hub {
  margin: 244px 3.13% 0 7.81%;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.48px;
  line-height: 36px;
}

/* 서비스 카드 — 시안 y 1664~1892 */
.lina-portal .s4-cards {
  margin-top: 44px;
  aspect-ratio: 1920/228;
}
.lina-portal .s4-card {
  position: absolute;
  top: 0;
  width: 13.96%;
  border-radius: 7.46% / 8.77%;
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.lina-portal .s4-card.k1 {
  left: 34.06%;
}
.lina-portal .s4-card.k2 {
  left: 51.51%;
}
.lina-portal .s4-card.k3 {
  left: 69.01%;
}
.lina-portal .s4-card.k4 {
  left: 86.46%;
}

/* 메뉴 구조 — PC: 사이드바 왼쪽 캔버스 + 글 오른쪽 오버레이 (시안 y 2278~3579, 글 2746) */
.lina-portal .s4-menu {
  position: relative;
  margin-top: 386px;
}
.lina-portal .s4-sides {
  aspect-ratio: 1920/1301;
}
.lina-portal .s4-side {
  position: absolute;
  top: 0;
  
  box-shadow: var(--sh-side);
}
.lina-portal .side-a {
  left: 7.81%;
  width: 17.86%;
  border-radius: 15.47% / 4.07%;
} /* 150, 343 */
.lina-portal .side-b {
  left: 29.74%;
  width: 5.16%;
  border-radius: 50% / 4.08%;
} /* 571, 99 */
.lina-portal .s4-mtext {
  position: absolute;
  left: 45.78%;
  right: 3.13%;
  top: 35.97%;
  z-index: 1;
} /* 879, 468/1301 */
.lina-portal .s4-h {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 45px;
}
.lina-portal .s4-p {
  margin-top: 33px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.48px;
  line-height: 36px;
}

.lina-portal .s4-atext {
  margin: 36px 3.13% 0 45.78%;
}

/* AI 목업 캔버스 — 시안 y 3972~5156 */
.lina-portal .s4-aimocks {
  margin-top: 135px;
  aspect-ratio: 1920/1184;
}
.lina-portal .mock-c {
  left: 7.81%;
  top: 0;
  width: 69.69%;
  border-radius: 2.69% / 5.13%;
  overflow: hidden;
  z-index: 2;
} /* 150,3972 1338 */
.lina-portal .mock-d {
  left: 22.45%;
  top: 40.88%;
  width: 69.95%;
  border-radius: 2.68% / 5.11%;
  overflow: hidden;
  z-index: 1;
} /* 431,4456 1343 */

/* section-ci — 전역 골격 그대로, 배경은 시안대로 흰색(투명이면 고정 KV 가 비친다) */
.lina-portal .section-ci {
  background-color: #fff;
}
/* 시안 고객 로고는 140×38 — 전역 기본 175px 로 두면 원본(시안)보다 25% 커진다 */
.lina-portal .section-ci .k-content .k-img.img02 {
  width: 140px;
}

/* ══════════════════════════════════════════════════════════════════
   모바일 — 시안 2118:59361 (375). 텍스트는 모바일 고정값, 캔버스는 % 유지.
   ══════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 1024px) and (min-width: 100px) {
  .lina-portal {
    --sh-mock:
      0 0.88px 0.7px rgba(0, 0, 0, 0.02), 0 2.1px 1.68px rgba(0, 0, 0, 0.03),
      0 3.96px 3.17px rgba(0, 0, 0, 0.04), 0 7.07px 5.65px rgba(0, 0, 0, 0.04),
      0 13.22px 10.58px rgba(0, 0, 0, 0.05),
      0 31.64px 25.31px rgba(0, 0, 0, 0.07);
    --sh-card:
      0 2.75px 2.2px rgba(0, 0, 0, 0.02), 0 6.61px 5.29px rgba(0, 0, 0, 0.03),
      0 12.44px 9.95px rgba(0, 0, 0, 0.04),
      0 22.2px 17.76px rgba(0, 0, 0, 0.04),
      0 41.51px 33.21px rgba(0, 0, 0, 0.05),
      0 99.37px 79.49px rgba(0, 0, 0, 0.07);
    --sh-side: 0 0.65px 1.3px rgba(0, 0, 0, 0.06);
  }
  .lina-portal br.pc {
    display: none;
  }
  .lina-portal br.m {
    display: inline;
  }

  .lina-portal .section01 .section-inner {
    display: block;
    padding: 60px 20px;
  }
  /* 목업 캔버스는 원본(시안 375) 초과 금지 — 375~1024 구간에서 이미지가
     원본보다 커지며 흐려지고 모서리 어긋남도 확대돼 보였다(사용자 실측). KV 는 제외. */
  .lina-portal .s4-mocks,
  .lina-portal .s4-cards,
  .lina-portal .s4-sides,
  .lina-portal .s4-aimocks {
    max-width: 375px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 시안 모바일 CI: 고객 로고 72.5×20 — PC 140px 규칙(위쪽)보다 뒤라 여기서 이긴다 */
  .lina-portal .section-ci .k-content .k-img.img02 {
    width: 72px;
  }
  .lina-portal .section01 .k-right {
    width: 100%;
  }
  .lina-portal .section01 .k-left .k-text {
    color: #fff;
  } /* 모바일 시안은 타이틀도 흰색 */
  .lina-portal .section01 .tag-container div {
    color: #fff;
    border-color: #fff;
  }

  /* ── section02 (375×850) ── */
  .lina-portal .section02 .sec-inner {
    padding: 100px 0;
  }
  .lina-portal .s2-col {
    width: 253px;
  }
  .lina-portal .s2-head {
    font-size: 16px;
    line-height: 22.4px;
  }
  .lina-portal .s2-rule {
    margin-top: 40px;
  }
  .lina-portal .s2-list {
    margin-top: 38px;
    padding-left: 28px;
    font-size: 18px;
    letter-spacing: -0.36px;
    line-height: 30.6px;
  }
  .lina-portal .s2-list li::before {
    left: -17px;
  }
  .lina-portal .s2-row {
    display: block;
    margin-top: 81px;
    padding: 0 20px;
  }
  .lina-portal .s2-pain.p1,
  .lina-portal .s2-pain.p2,
  .lina-portal .s2-pain.p3,
  .lina-portal .s2-pain.p4 {
    width: auto;
  }
  .lina-portal .s2-pain + .s2-pain {
    margin-top: 25px;
  }
  .lina-portal .s2-pt {
    font-size: 14px;
    line-height: 19.6px;
  }
  .lina-portal .s2-pr {
    margin-top: 12px;
  }
  .lina-portal .s2-pd {
    margin-top: 10px;
    padding-left: 22px;
    font-size: 14px;
    letter-spacing: -0.28px;
    line-height: 23.8px;
  }
  .lina-portal .s2-pd::before {
    left: 9px;
  }

  /* ── section03 (375×1135 · 원 세로 4단) ── */
  .lina-portal .section03 .sec-inner {
    padding: 100px 0;
  }
  .lina-portal .s3-title {
    font-size: 20px;
    letter-spacing: -0.4px;
    line-height: 24px;
  }
  .lina-portal .s3-row {
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
    gap: 17px;
  }
  .lina-portal .s3-circle {
    flex: 0 0 auto;
    width: 200px;
    height: 200px;
  }
  .lina-portal .s3-ct {
    font-size: 16px;
    line-height: 16px;
  }
  .lina-portal .s3-circle.c1 .s3-ct {
    top: 64px;
  }
  .lina-portal .s3-circle.c2 .s3-ct {
    top: 60px;
  }
  .lina-portal .s3-circle.c3 .s3-ct {
    top: 61px;
  }
  .lina-portal .s3-circle.c4 .s3-ct {
    top: 64px;
  }
  .lina-portal .s3-cd {
    font-size: 14px;
    letter-spacing: -0.28px;
    line-height: 21.7px;
  }
  .lina-portal .s3-circle.c1 .s3-cd {
    top: 93px;
  }
  .lina-portal .s3-circle.c2 .s3-cd {
    top: 95px;
  }
  .lina-portal .s3-circle.c3 .s3-cd {
    top: 96px;
  }
  .lina-portal .s3-circle.c4 .s3-cd {
    top: 92px;
  }

  /* ── section04 (375×3007) — 카드·AI 목업의 오른쪽 잘림은 시안 의도다 ── */
  .lina-portal .section04 .sec-inner {
    padding: 90px 0 109px;
  }
  .lina-portal .s4-mocks {
    aspect-ratio: 375/404;
  }
  .lina-portal .mock-b {
    left: 2.93%;
    top: 0;
    width: 95.2%;
  } /* 11,90 357 */
  .lina-portal .mock-a {
    left: 2.4%;
    top: 49.26%;
    width: 95.2%;
  } /* 9,289 357 */
  .lina-portal .s4-hub {
    margin: 83px 20px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
    line-height: 23.8px;
  }
  .lina-portal .s4-cards {
    margin-top: 47px;
    aspect-ratio: 375/356;
  }
  .lina-portal .s4-card {
    width: 53.07%;
  } /* 199/375 */
  .lina-portal .s4-card.k1 {
    left: 5.07%;
    top: 0;
  }
  .lina-portal .s4-card.k2 {
    left: 61.87%;
    top: 0;
  }
  .lina-portal .s4-card.k3 {
    left: 5.07%;
    top: 52.53%;
  }
  .lina-portal .s4-card.k4 {
    left: 61.87%;
    top: 52.53%;
  }
  .lina-portal .s4-menu {
    margin-top: 108px;
  }
  .lina-portal .s4-mtext {
    position: static;
    margin: 0 20px 0 33px;
  }
  .lina-portal .s4-h {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.32px;
    line-height: 24px;
  }
  .lina-portal .s4-p {
    margin-top: 24px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
    line-height: 21px;
  }
  .lina-portal .s4-sides {
    margin-top: 75px;
    aspect-ratio: 375/653;
  }
  .lina-portal .s4-side {
  }
  .lina-portal .side-a {
    left: 5.07%;
    width: 45.87%;
  } /* 19, 172 */
  .lina-portal .side-b {
    left: 61.33%;
    width: 13.33%;
  } /* 230, 50 */
  /* 오른쪽 3px — 시안 텍스트 박스가 339 로 거의 풀폭이다(20px 주면 한 줄이 더 감긴다) */
  .lina-portal .s4-atext {
    margin: 102px 3px 0 33px;
  }
  .lina-portal .s4-aimocks {
    margin-top: 103px;
    aspect-ratio: 375/478;
  }
  .lina-portal .mock-c {
    left: 4%;
    top: 0;
    width: 112.8%;
  } /* 15,2420 423 — 잘림 의도 */
  .lina-portal .mock-d {
    left: 4%;
    top: 53.56%;
    width: 113.33%;
  } /* 15,2676 425 — 잘림 의도 */
}
/* ══════════════════════════════════════════════════════════════════
   PROJECT: HL-Mando-AX-PLM  (2026-08-07 신설)

   시안 Vc8MOAcKH3GXd5m2DJNQxL — PC 2052:47033("39") · 모바일 2118:40976("Service 5")
   제작 규칙은 LINA(.lina-portal)와 동일 — docs/tov-상세페이지-자동화-검토.md §13.
   텍스트 고정 2단계 / 목업 캔버스만 비례(% 는 불투명 영역 실측값) /
   그림자는 시안 DROP_SHADOW 6겹(테두리·라운드는 추출 픽셀에 이미 있다).
   ══════════════════════════════════════════════════════════════════ */
.mando-ax {
  font-family: "Pretendard";
  /* 시안 그림자 — s8 목업 / s9 목업(a·b) / s9 컨테이너(c) */
  --sh-s8:
    0 2.35px 1.88px rgba(0, 0, 0, 0.02), 0 5.65px 4.52px rgba(0, 0, 0, 0.03),
    0 10.64px 8.51px rgba(0, 0, 0, 0.04), 0 18.97px 15.18px rgba(0, 0, 0, 0.04),
    0 35.49px 28.39px rgba(0, 0, 0, 0.05), 0 84.95px 67.96px rgba(0, 0, 0, 0.07);
  --sh-s9:
    0 2.77px 2.21px rgba(0, 0, 0, 0.02), 0 6.65px 5.32px rgba(0, 0, 0, 0.03),
    0 12.52px 10.02px rgba(0, 0, 0, 0.04),
    0 22.34px 17.87px rgba(0, 0, 0, 0.04),
    0 41.78px 33.42px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
  --sh-s9c:
    0 2.11px 1.69px rgba(0, 0, 0, 0.02), 0 5.06px 4.05px rgba(0, 0, 0, 0.03),
    0 9.53px 7.63px rgba(0, 0, 0, 0.04), 0 17.01px 13.61px rgba(0, 0, 0, 0.04),
    0 31.81px 25.45px rgba(0, 0, 0, 0.05), 0 76.15px 60.92px rgba(0, 0, 0, 0.07);
}
.mando-ax .sec-inner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  box-sizing: border-box;
}
.mando-ax .sec-inner * {
  box-sizing: border-box;
}
.mando-ax br.m {
  display: none;
}
.mando-ax .k-canvas {
  position: relative;
}
/* 이미지에 라운드 클리핑 금지 — LINA 와 같은 이유. 컨테이너 라운드는 그림자 실루엣용. */
.mando-ax .k-canvas img {
  width: 100%;
  vertical-align: top;
}
.mando-ax .m-shot {
  position: absolute;
}

/* ── section01 — Overview (골격은 사이트 관례, 배경은 만도 시안색 #01B6ED) ── */
.mando-ax .section01 {
  background-color: #01b6ed;
}
.mando-ax .section01 .section-inner {
  display: flex;
  padding: 100px 60px;
}
.mando-ax .section01 .k-left {
  flex: 1 auto;
}
.mando-ax .section01 .k-right {
  width: 860px;
}
.mando-ax .section01 .k-left .k-text {
  color: #edeee7;
}
.mando-ax .section01 .k-right .k-text {
  color: #fff;
  line-height: 36px;
}
/* JS 가 주입하는 태그 칩 — 전역 초록은 파랑 위에서 안 보인다. 시안은 밝은 외곽선 */
.mando-ax .section01 .tag-container div {
  color: #edeee7;
  border-color: #edeee7;
}
.mando-ax .section01 .tag-container div:hover {
  color: #01b6ed;
  background-color: #edeee7;
}

/* ── 본문 공통 텍스트 블록 (시안: 좌측 200px 정렬, 고정) ── */
.mando-ax .section02,
.mando-ax .section03 {
  background-color: #fff;
  color: #000;
}
.mando-ax .m-tblock {
  margin: 0 200px;
}
.mando-ax .m-h {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.72px;
  line-height: 43.2px;
}
.mando-ax .m-p {
  margin-top: 40px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.48px;
  line-height: 36px;
}

/* ══ section02 — 워크플레이스 (시안 8 · 1920×2026) ══ */
.mando-ax .section02 .sec-inner {
  padding: 100px 0 264px;
}
.mando-ax .s8-canvas {
  margin-top: 132px;
  aspect-ratio: 1920/1303.8;
}
.mando-ax .m-s8a {
  left: 24.96%;
  top: 0;
  width: 62.9%;
  z-index: 1;
  box-shadow: var(--sh-s8);
  overflow: hidden;
  border-radius: 2.65% / 4.68%;
}
.mando-ax .m-s8b {
  left: 12.08%;
  top: 47.56%;
  width: 62.9%;
  z-index: 2;
  box-shadow: var(--sh-s8);
  overflow: hidden;
  border-radius: 2.65% / 4.68%;
}

/* ══ section03 — 검색/조회 개선 (시안 9 · 1920×3442) ══ */
.mando-ax .section03 .sec-inner {
  padding: 100px 0 281px;
}
.mando-ax .m-tblock.t2 {
  margin-top: 100px;
}
.mando-ax .s9-canvas {
  margin-top: 163px;
  aspect-ratio: 1920/2415.8;
}
.mando-ax .m-s9a {
  left: 7.97%;
  top: 0;
  width: 65.2%;
  z-index: 1;
  box-shadow: var(--sh-s9);
  overflow: hidden;
  border-radius: 2.56% / 3.99%;
}
.mando-ax .m-s9b {
  left: 35.16%;
  top: 14.32%;
  width: 73.96%;
  z-index: 2;
  box-shadow: var(--sh-s9);
  overflow: hidden;
  border-radius: 2.25% / 2.51%;
}
.mando-ax .m-s9c {
  left: 11.67%;
  top: 73.1%;
  width: 76.67%;
  z-index: 3;
  box-shadow: var(--sh-s9c);
  overflow: hidden;
  border-radius: 2.17% / 4.92%;
}

/* ── 마무리 CI — 시안대로 흰 배경 (투명이면 고정 KV 가 비친다) ── */
.mando-ax .section-ci {
  background-color: #fff;
}
/* 고객 로고 폭은 전역 기본 175px = 시안값 그대로 — 오버라이드 불필요 */

/* ══════════════════════════════════════════════════════════════════
   모바일 — 시안 2118:40976 (375). 텍스트 모바일 고정값, 캔버스 % 유지.
   ══════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 1024px) and (min-width: 100px) {
  .mando-ax {
    --sh-s8:
      0 0.64px 0.51px rgba(0, 0, 0, 0.02), 0 1.54px 1.23px rgba(0, 0, 0, 0.03),
      0 2.89px 2.31px rgba(0, 0, 0, 0.04), 0 5.16px 4.13px rgba(0, 0, 0, 0.04),
      0 9.65px 7.72px rgba(0, 0, 0, 0.05), 0 23.1px 18.48px rgba(0, 0, 0, 0.07);
    --sh-s9:
      0 0.71px 0.57px rgba(0, 0, 0, 0.02), 0 1.71px 1.37px rgba(0, 0, 0, 0.03),
      0 3.23px 2.58px rgba(0, 0, 0, 0.04), 0 5.76px 4.61px rgba(0, 0, 0, 0.04),
      0 10.77px 8.61px rgba(0, 0, 0, 0.05),
      0 25.77px 20.62px rgba(0, 0, 0, 0.07);
    --sh-s9c:
      0 0.54px 0.43px rgba(0, 0, 0, 0.02), 0 1.31px 1.04px rgba(0, 0, 0, 0.03),
      0 2.46px 1.97px rgba(0, 0, 0, 0.04), 0 4.38px 3.51px rgba(0, 0, 0, 0.04),
      0 8.2px 6.56px rgba(0, 0, 0, 0.05), 0 19.62px 15.7px rgba(0, 0, 0, 0.07);
  }
  .mando-ax br.pc {
    display: none;
  }
  .mando-ax br.m {
    display: inline;
  }

  .mando-ax .section01 .section-inner {
    display: block;
    padding: 60px 20px;
  }
  /* 목업 캔버스는 원본(시안 375) 초과 금지 — LINA 와 같은 이유. KV 는 제외. */
  .mando-ax .s8-canvas,
  .mando-ax .s9-canvas {
    max-width: 375px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 시안 모바일 CI: 고객 로고 99×16 — 전역 모바일 54px 가 시안보다 작아서 스코프로 잡는다 */
  .mando-ax .section-ci .k-content .k-img.img02 {
    width: 99px;
  }
  .mando-ax .section01 .k-right {
    width: 100%;
  }
  .mando-ax .section01 .k-left .k-text {
    color: #fff;
  } /* 모바일 시안은 타이틀도 흰색 */
  .mando-ax .section01 .k-right .k-text {
    line-height: 21px;
  }
  .mando-ax .section01 .tag-container div {
    color: #fff;
    border-color: #fff;
  }

  .mando-ax .m-tblock {
    margin: 0 20px;
  }
  .mando-ax .m-h {
    font-size: 16px;
    letter-spacing: -0.32px;
    line-height: 19.2px;
  }
  .mando-ax .m-p {
    margin-top: 24px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
    line-height: 21px;
  }

  /* ── section02 (375×771) ── */
  .mando-ax .section02 .sec-inner {
    padding: 100px 0 122px;
  }
  .mando-ax .s8-canvas {
    margin-top: 68px;
    aspect-ratio: 375/354.6;
  }
  .mando-ax .m-s8a {
    left: 15.71%;
    top: 0;
    width: 87.6%;
  }
  .mando-ax .m-s8b {
    left: -2.24%;
    top: 47.57%;
    width: 87.57%;
  } /* 시안이 왼쪽으로 흘린다 */

  /* ── section03 (375×1116) ── */
  .mando-ax .section03 .sec-inner {
    padding: 100px 0 16px;
  }
  .mando-ax .m-tblock.t2 {
    margin-top: 60px;
  }
  .mando-ax .s9-canvas {
    margin-top: 57px;
    aspect-ratio: 375/671.6;
  }
  .mando-ax .m-s9a {
    left: 1.79%;
    top: 0;
    width: 86.03%;
  }
  .mando-ax .m-s9b {
    left: 18.59%;
    top: 17.75%;
    width: 97.6%;
  }
  .mando-ax .m-s9c {
    left: 7.2%;
    top: 75.21%;
    width: 101.17%;
  } /* 오른쪽 잘림 의도 */
}