@charset "utf-8";
:root {
  --color-orange: #FFA000;
  --color-green: #98CA3C;
  --color-blue: #4980C2;
  --color-navy: #005083;
}
em,address { font-style:normal; }
* {
  line-height: 1;
  letter-spacing: -0.020em;
}

*.cursorOff {
  cursor: none !important;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
 li { list-style: none; }
.font145 {
  --fontsize: 14.5rem;
  font-size: var(--fontsize);
}

.font85 {
  --fontsize: 8.5rem;
  font-size: var(--fontsize);
}

.font60 {
  --fontsize: 6.0rem;
  font-size: var(--fontsize);
}

.font50 {
  --fontsize: 5.0rem;
  font-size: var(--fontsize);
}

.font45 {
  --fontsize: 4.5rem;
  font-size: var(--fontsize);
}

.font40 {
  --fontsize: 4.0rem;
  font-size: var(--fontsize);
}

.font36 {
  --fontsize: 3.6rem;
  font-size: var(--fontsize);
}

.font22 {
  --fontsize: 2.2rem;
  font-size: var(--fontsize);
}

.topButton {
  width: 55px;
  height: 55px;
  background: #0D3853;
  border-radius: 50%;
  color: #ffffff;
  position: fixed;
  right: 40px;
  bottom: 20px;
  z-index: 3;
}

.topButton i {
  font-size: 1.8rem;
}

#sv {
  width: 100%;
  height: 550px;
  position: relative;
}

#sv .bg,
#sv .flexBox {
  width: 100%;
  height: 100%;
}

#sv .bg {
  border-radius: 0 40px 40px 0;
  z-index: -2;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#sv.sv01 .bg {
  background-image: url("/img/sub/subVisual1.png");
}

#sv.sv02 .bg {
  background-image: url("/img/sub/subVisual2.png");
}

#sv.sv03 .bg {
  background-image: url("/img/sub/subVisual3.png");
}

#sv.sv04 .bg {
  background-image: url("/img/sub/subVisual4.png");
}

#sv.sv05 .bg {
  background-image: url("/img/sub/subVisual5.png");
}

#sv.sv06 .bg {
  background-image: url("/img/sub/subVisual6.png");
}

#sv.sv07 .bg {
  background-image: url("/img/sub/subVisual7.png");
}

#sv.sv08 .bg {
  background-image: url("/img/sub/subVisual8.png");
}

#sv.sv09 .bg {
  background-image: url("/img/sub/subVisual9.png");
}

#sv.sv010 .bg {
  background-image: url("/img/sub/subVisual10.png");
}

#sv .flexBox {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 0 0 10.5%;
}

#sv h2 {
  color: #ffffff;
  letter-spacing: 0;
  font-family: 'Poppins',
 sans-serif;
}

#sv h2 span {
  display: inline-block;
  opacity: 0;
}

#sv.on h2 span {
  -webkit-animation: titleH2 1.0s forwards;
          animation: titleH2 1.0s forwards;
}

#sv.on h2 span:nth-child(1) {
  -webkit-animation-delay: 0.06s;
          animation-delay: 0.06s;
}

#sv.on h2 span:nth-child(2) {
  -webkit-animation-delay: 0.12s;
          animation-delay: 0.12s;
}

#sv.on h2 span:nth-child(3) {
  -webkit-animation-delay: 0.18s;
          animation-delay: 0.18s;
}

#sv.on h2 span:nth-child(4) {
  -webkit-animation-delay: 0.24s;
          animation-delay: 0.24s;
}

#sv.on h2 span:nth-child(5) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

#sv.on h2 span:nth-child(6) {
  -webkit-animation-delay: 0.36s;
          animation-delay: 0.36s;
}

#sv.on h2 span:nth-child(7) {
  -webkit-animation-delay: 0.42s;
          animation-delay: 0.42s;
}

#sv.on h2 span:nth-child(8) {
  -webkit-animation-delay: 0.48s;
          animation-delay: 0.48s;
}

#sv.on h2 span:nth-child(9) {
  -webkit-animation-delay: 0.54s;
          animation-delay: 0.54s;
}

#sv.on h2 span:nth-child(10) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

@-webkit-keyframes titleH2 {
  0% {
    opacity: 0;
  }
  30% {
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes titleH2 {
  0% {
    opacity: 0;
  }
  30% {
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.dropBox {
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 15px;
  margin: 15px 0 0;
}

.dropBox * {
  font-size: 1.8rem;
}

.dropBox .home,
.dropBox button,
.dropBox .depth2 {
  -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
          box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
}

.dropBox > li {
  position: relative;
  z-index: 2;
}

.dropBox > li.home {
  width: 60px;
}

.dropBox > li.home a {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.dropBox > li:not(.home) {
  width: 300px;
}

.dropBox > li.drop2 button {
  color: var(--color-orange);
  font-weight: 600;
}

.dropBox button {
  border-radius: 10px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: #666666;
  padding: 0 20px 0 30px;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.dropBox button * {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.dropBox button:hover, .dropBox button.on {
  color: var(--color-orange);
  font-weight: 600;
}

.dropBox button.on i {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

.dropBox .depth2 {
  background: #ffffff;
  border-radius: 0 0 10px 10px;
  padding: 20px 30px 10px;
  position: absolute;
  top: calc(100% - 10px);
  left: 0;
  right: 0;
  display: none;
}

.dropBox .depth2 > li > a {
  display: block;
  color: #888888;
  line-height: 1.4444;
  padding: 14px 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.dropBox .depth2 > li:hover > a {
  color: var(--color-orange);
  font-weight: 600;
}

.tabContents > div {
  display: none;
}

.tabContents > div.on {
  display: block;
}

.colorO {
  color: var(--color-orange) !important;
}

.colorG {
  color: var(--color-green) !important;
}

.colorB {
  color: var(--color-blue) !important;
}

.colorN {
  color: var(--color-navy) !important;
}

.subPage {
  padding: 100px 0 180px;
}

.paddingBox {
  padding: 140px 0;
}

.paddingBox.paddingTopX {
  padding: 0 0 140px;
}

.paddingBox.paddingBottomX {
  padding: 140px 0 0;
}

.marginTop60 {
  margin-top: 60px;
}

.marginTop80 {
  margin-top: 80px;
}

.smallTitle {
  color: var(--color-orange);
  font-size: 3.5rem;
  font-weight: 600;
}

.smallTitle.on span {
  -webkit-animation: smallTitle 0.8s forwards;
          animation: smallTitle 0.8s forwards;
}

.smallTitle.on span:nth-child(1) {
  -webkit-animation-delay: 0.04s;
          animation-delay: 0.04s;
}

.smallTitle.on span:nth-child(2) {
  -webkit-animation-delay: 0.08s;
          animation-delay: 0.08s;
}

.smallTitle.on span:nth-child(3) {
  -webkit-animation-delay: 0.12s;
          animation-delay: 0.12s;
}

.smallTitle.on span:nth-child(4) {
  -webkit-animation-delay: 0.16s;
          animation-delay: 0.16s;
}

.smallTitle.on span:nth-child(5) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.smallTitle.on span:nth-child(6) {
  -webkit-animation-delay: 0.24s;
          animation-delay: 0.24s;
}

.smallTitle.on span:nth-child(7) {
  -webkit-animation-delay: 0.28s;
          animation-delay: 0.28s;
}

.smallTitle.on span:nth-child(8) {
  -webkit-animation-delay: 0.32s;
          animation-delay: 0.32s;
}

.smallTitle.on span:nth-child(9) {
  -webkit-animation-delay: 0.36s;
          animation-delay: 0.36s;
}

.smallTitle.on span:nth-child(10) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

@-webkit-keyframes smallTitle {
  0% {
    color: #000000;
    opacity: 0;
  }
  40% {
    color: #000000;
    font-weight: 700;
    letter-spacing: 0.2em;
    opacity: 0.8;
  }
  60% {
    opacity: 0.2;
  }
  100% {
    color: var(--color-orange);
    font-weight: 600;
    opacity: 1;
  }
}

@keyframes smallTitle {
  0% {
    color: #000000;
    opacity: 0;
  }
  40% {
    color: #000000;
    font-weight: 700;
    letter-spacing: 0.2em;
    opacity: 0.8;
  }
  60% {
    opacity: 0.2;
  }
  100% {
    color: var(--color-orange);
    font-weight: 600;
    opacity: 1;
  }
}

.subTitle,
.subText {
  text-align: center;
}

.subTitle *,
.subText * {
  -webkit-transition: all 0.4s, color 0.6s 0.8s;
  transition: all 0.4s, color 0.6s 0.8s;
}

.subTitle h3 {
  color: #222222;
  margin: 20px 0 70px;
  overflow: hidden;
}

.subTitle h3 em {
  display: block;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}

.subTitle h3.on em {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.subText p {
  line-height: 1.5;
}

.subText .font36 {
  color: #222222;
  font-weight: 300;
}

.subText .font22 {
  margin: 20px 0 0;
}

.subText.on .orange {
  color: var(--color-orange);
}

.semi {
  font-weight: 600;
}

.subText.on .blue {
  color: var(--color-blue);
}

.subText.on .green {
  color: var(--color-green);
}

.subText.on .color3 {
  color: #333333 !important;
}
.wrap { margin:90px auto 60px auto;width:98%; }
.wrap.bgwhite { background-color:#ffffff; }
.dot {
  gap: 0 10px;
  color: #222222;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.dot::before {
  content: "";
  width: 3px;
  height: 3px;
  background: #222222;
  border-radius: 50%;
}

.dot.big {
  gap: 0 15px;
}

.dot.big::before {
  width: 7px;
  height: 7px;
  background: var(--color-orange);
}

.slideButton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 15px;
}

.slideButton * {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.slideButton button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-green);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.slideButton img {
  width: 14px;
}

.slideButton button:hover {
  background: var(--color-green);
}

.slideButton button:hover img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

.ebsButton {
  width: auto;
  min-width: 260px;
  height: 65px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0 10px;
  border: 1px solid var(--color-orange);
  border-radius: 100px;
  color: var(--color-orange);
  font-size: 2.0rem;
  font-weight: 600;
  padding: 0 30px;
  margin: 80px 0 0;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.ebsButton:hover {
  background: var(--color-orange);
  color: #ffffff;
}

.shadow {
  background: #ffffff;
  border-radius: 20px;
  position: relative;
}

.shadow::before {
  content: "";
  display: block;
  border-radius: 20px;
  -webkit-box-shadow: 0px 2px 20px 10px rgba(102, 102, 102, 0.05);
          box-shadow: 0px 2px 20px 10px rgba(102, 102, 102, 0.05);
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.dashedLine {
  width: 100%;
  height: 2px;
  background: url("/img/sub/dashedLine.png") no-repeat center/auto 100%;
}

.bigFont {
  font-size: 25.0rem;
  font-weight: 500;
  position: absolute;
  z-index: -1;
  font-family: 'Poppins',
 sans-serif;
}

#subContents .gallery .slideBox {
  gap: 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .gallery .slideButton {
  position: absolute;
  left: 18%;
  bottom: 50px;
  z-index: 2;
}

#subContents .gallery .slideButton button {
  border-color: #ffffff;
}

#subContents .gallery .slideButton button img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

#subContents .gallery .slideButton button:hover {
  background: #ffffff;
}

#subContents .gallery .slideButton button:hover img {
  -webkit-filter: inherit;
          filter: inherit;
}

#subContents .gallery .slideThumbsBox {
  width: calc(100% - 170px);
  overflow: hidden;
}

#subContents .gallery .slideThumbsBox .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: var(--color-green);
  border-radius: 0 10px 10px 0;
  overflow: hidden;
}

#subContents .gallery .slideThumbsBox .item * {
  color: #ffffff;
}

#subContents .gallery .slideThumbsBox .text {
  width: 100%;
  padding: 50px;
}

#subContents .gallery .slideThumbsBox h4 {
  font-size: 4.2rem;
  font-weight: 500;
  margin: 0 0 30px;
  font-family: 'Poppins',
 sans-serif;
}

#subContents .gallery .slideThumbsBox p {
  font-size: 2.4rem;
}

#subContents .gallery .slideThumbsBox .imgBox {
  width: 69.931%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 17.133% 0;
  position: relative;
}

#subContents .gallery .slideThumbsBox .imgBox img {
  min-width: 100%;
  min-height: 100%;
  min-height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#subContents .gallery .slideListBox {
  width: 150px;
  overflow: hidden;
}

#subContents .gallery .slideListBox .swiper-slide {
  border-radius: 10px;
  overflow: hidden;
  -webkit-transform: translateY(calc(-100% - 20px));
          transform: translateY(calc(-100% - 20px));
}

#subContents .gallery .slideListBox .img {
  border-radius: 10px;
  padding: 50% 0;
  position: relative;
  overflow: hidden;
}

#subContents .gallery .slideListBox .img img {
  max-width: inherit;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#subContents .about .greeting {
  text-align: center;
  position: relative;
}

#subContents .about .greeting .pointBox {
  width: calc(100vw + 60px);
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: absolute;
  top: -45px;
  left: 50%;
  z-index: -1;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

#subContents .about .greeting .pointBox .point1 {
  width: 27.25%;
  margin: -45px 0;
}

#subContents .about .greeting .pointBox .point2 {
  width: 31.75%;
  margin: auto 0 100px;
}

#subContents .about .greeting .logoBox {
  gap: 0 110px;
  margin: 0 0 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#subContents .about .greeting .logoBox.on {
  gap: 0 55px;
}

#subContents .about .greeting .logoM {
  width: 21.215%;
}

#subContents .about .greeting .logoK {
  width: 19.775%;
}

#subContents .about .greeting h5,
#subContents .about .greeting dl dt {
  color: #222222;
}

#subContents .about .greeting h5 {
  font-size: 2.6rem;
  font-weight: 500;
}

#subContents .about .greeting p,
#subContents .about .greeting dl dd {
  color: #333333;
  font-size: 1.8rem;
  font-weight: 300;
}

#subContents .about .greeting p {
  line-height: 1.6666;
  margin: 20px 0 70px;
}

#subContents .about .greeting dl {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  gap: 0 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#subContents .about .greeting dl dt {
  font-size: 3.0rem;
  font-weight: 600;
}

#subContents .about h4 {
  gap: 0 25px;
  color: #222222;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .about .business::before,
#subContents .about .objectives::before {
  height: 100%;
}

#subContents .about .business .slideButton {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin: 40px 0 20px;
}

#subContents .about .business .itemBox > .img {
  width: 33.195%;
  position: absolute;
  bottom: 0;
  z-index: 2;
}

#subContents .about .business .slideWrap {
  width: 140.625%;
  position: relative;
  left: 31.35%;
}

#subContents .about .business .blur {
  width: 270px;
  height: 270px;
  background: #fdd23e;
  border-radius: 50%;
  opacity: 0.2;
  position: absolute;
  top: -135px;
  left: -135px;
  -webkit-filter: blur(50px);
          filter: blur(50px);
}

#subContents .about .business .slideBox {
  overflow: hidden;
}

#subContents .about .business .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
}

#subContents .about .business .text,
#subContents .about .business .tagBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#subContents .about .business .text {
  width: 100%;
  max-width: 380px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 60px 30px 50px;
}

#subContents .about .business .text.orange {
  background: var(--color-orange);
}

#subContents .about .business .text.orange span {
  color: var(--color-orange);
}

#subContents .about .business .text.green {
  background: var(--color-green);
}

#subContents .about .business .text.green span {
  color: var(--color-green);
}

#subContents .about .business h5 {
  gap: 0 10px;
  color: #ffffff;
  font-size: 3.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .about .business h5::before, #subContents .about .business h5::after {
  content: "";
  display: block;
  width: 2px;
  height: calc(100% - 6px);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
}

#subContents .about .business .tagBox {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
  margin: auto 0 0;
}

#subContents .about .business .tagBox span {
  gap: 0 15px;
  background: #ffffff;
  border-radius: 100px;
  font-weight: 600;
  padding: 10px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .about .business .tagBox em {
  font-weight: 300;
}

#subContents .about .mission {
  position: relative;
}

#subContents .about .mission p, #subContents .about .mission h6 {
  text-align: center;
}

#subContents .about .mission p {
  color: #333333;
}

#subContents .about .mission .itemBox,
#subContents .about .mission .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#subContents .about .mission .itemBox {
  max-width: 1100px;
  margin: 60px auto 0;
  position: relative;
}

#subContents .about .mission .bg img:last-child {
  display: none;
}

#subContents .about .mission .flexBox {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#subContents .about .mission .item {
  width: 50%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px 0;
}

#subContents .about .mission h6 {
  color: #222222;
  font-size: 3.0rem;
}

#subContents .about .mission .point {
  right: -10%;
  bottom: -26%;
}

#subContents .about .objectives .itemBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 40px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 100px 0 0;
}

#subContents .about .objectives .item {
  width: 100%;
  height: 380px;
  background: #ffffff;
  border-radius: 20px;
  padding: 40px 45px;
  position: relative;
}

#subContents .about .objectives em {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'Poppins',
 sans-serif;
}

#subContents .about .objectives dl {
  margin: 30px 0 0;
}

#subContents .about .objectives dl dt {
  color: #333333;
  font-size: 3.0rem;
  font-weight: 600;
}

#subContents .about .objectives dl dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 15px 0;
  margin: 20px 0 0;
}

#subContents .about .objectives p {
  gap: 0 10px;
  font-size: 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .about .objectives p::before {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  background: #666666;
  border-radius: 50%;
}

#subContents .about .objectives .icon {
  position: absolute;
  right: 0;
  bottom: 0;
}

#subContents .about .objectives .item.on:nth-child(1) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

#subContents .about .objectives .item.on:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

#subContents .about .objectives .item.on:nth-child(3) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

#subContents .about .culture .itemBox,
#subContents .about .culture .inner,
#subContents .about .culture .icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#subContents .about .culture .item {
  position: relative;
}

#subContents .about .culture .item:nth-child(2) {
  margin: 0 -15px;
}

#subContents .about .culture .item:nth-child(2) .bg {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

#subContents .about .culture .item .bg {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
}

#subContents .about .culture .inner {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 15px 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#subContents .about .culture .icon {
  height: 70px;
}

#subContents .about .culture h6 {
  color: #333333;
  font-size: 2.5rem;
  font-weight: 500;
}

#subContents .about .culture .item.on .bg {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}

#subContents .history {
  position: relative;
}

#subContents .history::before {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  background: url("/img/sub/company/historyPoint.png") no-repeat center/100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#subContents .history .slideBox {
  width: 109.375%;
  padding: 0 0 180px;
  position: relative;
}

#subContents .history .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px 0;
  margin: 0;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

#subContents .history .swiper-slide:nth-child(even) .item {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-transform: translateY(180px);
          transform: translateY(180px);
}

#subContents .history dl {
  gap: 0 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .history dl * {
  line-height: 1.2916;
}

#subContents .history dl dt {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: #1e70aa;
  font-size: 6.0rem;
  font-weight: 600;
  font-family: 'Poppins',
 sans-serif;
}

#subContents .history dl dd {
  color: #222222;
  font-size: 2.4rem;
  font-weight: 500;
}

#subContents .history .swiper-pagination-progressbar {
  height: 1px;
  margin: 90px 0 0;
}

#subContents .history .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--color-orange);
}

#subContents .location .itemBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .location .itemBox > div {
  width: 50%;
}

#subContents .location dl {
  color: #222222;
}

#subContents .location dl dt {
  font-weight: 500;
}

#subContents .location .textBox {
  padding: 0 5.5% 0 0;
}

#subContents .location .textBox > dl dt {
  margin: 0 0 20px;
}

#subContents .location .textBox > dl dd {
  font-size: 2.6rem;
  line-height: 1.2;
}

#subContents .location .dashedLine {
  margin: 20px 0 30px;
}

#subContents .location ul,
#subContents .location ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#subContents .location ul {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 25px 0;
}

#subContents .location ul li {
  width: 50%;
  gap: 0 10px;
}

#subContents .location ul dl {
  padding: 4px 0 0;
}

#subContents .location ul dl dt {
  font-size: 2.4rem;
  margin: 0 0 10px;
}

#subContents .location ul dl dd {
  line-height: 1.625;
}

#subContents .location ul .pBox {
  gap: 15px 0;
}

#subContents .location .icon {
  width: 30px;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#subContents .location .mapBox {
  width: 100%;
  height: 550px;
  border-radius: 20px;
  overflow: hidden;
}

#subContents .location .root_daum_roughmap {
  width: 100%;
  height: 100%;
}

#subContents .location .root_daum_roughmap .wrap_map {
  width: 100%;
  height: 100%;
}

#subContents .location .root_daum_roughmap .map_border,
#subContents .location .root_daum_roughmap .wrap_controllers {
  display: none;
}

#subContents .introduction .info,
#subContents .introduction .channel {
  position: relative;
}

#subContents .introduction .info .point {
  top: 86%;
  right: -8%;
}

#subContents .introduction .info .itemBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 30px;
}

#subContents .introduction .info .item {
  color: #ffffff;
  position: relative;
}

#subContents .introduction .info .item::before {
  content: "";
  display: block;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 10px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#subContents .introduction .info .item:nth-child(1) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

#subContents .introduction .info .item:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

#subContents .introduction .info .item:nth-child(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

#subContents .introduction .info .item::before,
#subContents .introduction .info .text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#subContents .introduction .info .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 65px 50px 50px 50px;
  width: 100%;
  height: 100%;
}

#subContents .introduction .info .text * {
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

#subContents .introduction .info span {
  font-size: 12.0rem;
  font-weight: 100;
  opacity: 0.7;
  font-family: 'Poppins',
 sans-serif;
}

#subContents .introduction .info dl,
#subContents .introduction .info dl dd {
  margin: 20px 0 0;
}

#subContents .introduction .info dl dt {
  font-size: 5.0rem;
  font-weight: 100;
  overflow: hidden;
}

#subContents .introduction .info dl dt em {
  display: block;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

#subContents .introduction .info dl dd {
  font-size: 3.0rem;
  font-weight: 600;
  letter-spacing: 0.40em;
  opacity: 0;
}

#subContents .introduction .info p {
  font-size: 2.0rem;
  margin: auto 0 0 auto;
  opacity: 0;
}

#subContents .introduction .info .item:hover::before {
  border: 3px solid var(--color-orange);
}

#subContents .introduction .info .item:hover dl dt em {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

#subContents .introduction .info .item:hover dl dd {
  letter-spacing: 0;
  opacity: 1;
}

#subContents .introduction .info .item:hover p {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

#subContents .introduction .channel {
  overflow: hidden;
}

#subContents .introduction .channel .point {
  top: 80%;
  left: 0;
}

#subContents .introduction .channel .background::before, #subContents .introduction .channel .background::after {
  height: 79%;
}

#subContents .introduction .channel .background::after {
  content: "";
  display: block;
  width: 60px;
  background: #ffffff;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}

#subContents .introduction .channel p {
  color: #333333;
}

#subContents .introduction .channel .title .logo {
  width: 37.25%;
  height: auto;
  margin: 0 0 45px;
}

#subContents .introduction .channel .title p {
  font-size: 2.0rem;
  line-height: 1.6;
}

#subContents .introduction .channel .itemBox {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 15.9375% 61.875% 15.9375%;
      grid-template-columns: 15.9375% 61.875% 15.9375%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 30px 0 15px;
}

#subContents .introduction .channel .itemBox + p {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #222222;
}

#subContents .introduction .channel .item {
  border-radius: 15px;
  padding: 30px 10px 10px;
}

#subContents .introduction .channel .item:nth-child(1) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

#subContents .introduction .channel .item:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

#subContents .introduction .channel .item:nth-child(3) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

#subContents .introduction .channel .item.orange {
  background: var(--color-orange);
}

#subContents .introduction .channel .item.green {
  background: var(--color-green);
}

#subContents .introduction .channel .item.green ul {
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
}

#subContents .introduction .channel .item.blue {
  background: var(--color-blue);
}

#subContents .introduction .channel h6 {
  color: #ffffff;
  font-weight: 500;
  text-align: center;
  font-family: 'Poppins',
 sans-serif;
}

#subContents .introduction .channel ul,
#subContents .introduction .channel ul li {
  width: 100%;
}

#subContents .introduction .channel ul {
  display: -ms-grid;
  display: grid;
  gap: 10px;
  margin: 30px 0 0;
}

#subContents .introduction .channel ul li {
  width: 100%;
  max-width: 235px;
  height: 75px;
  background: #ffffff;
  border-radius: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .introduction .channel ul li p {
  font-weight: 500;
  line-height: 1.375;
  padding: 0 0 0 18px;
}

#subContents .introduction .channel ul .logo {
  width: 65.96%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#subContents .introduction .channel ul .logo.small {
  width: 55.32%;
}

#subContents .introduction .channel hr {
  width: 1px;
  height: 48px;
  border: none;
  border-right: 1px dashed #d9d9d9;
  margin: 0;
}

#subContents .program .schedule .slideButton {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin: 0 0 40px;
}

#subContents .program .schedule .slideBox {
  width: 202.5%;
  position: relative;
  overflow: hidden;
}

#subContents .program .popularity {
  position: relative;
}

#subContents .program .popularity::before {
  height: calc(100% - 70px);
}

#subContents .program .popularity .point {
  top: -20%;
  right: 12%;
}

#subContents .program .popularity .title {
  text-align: center;
}

#subContents .program .popularity .title .logo {
  width: 37.25%;
  margin: 0 auto 50px;
}

#subContents .program .popularity .title p {
  color: #333333;
}

#subContents .program .popularity .itemBox {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  gap: 70px 27px;
}

#subContents .program .popularity .itemBox .img {
  border-radius: 10px;
  padding: 29.605% 0;
  position: relative;
  overflow: hidden;
}

#subContents .program .popularity .itemBox .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  max-height: inherit;
  min-width: 100%;
  min-height: 100%;
}

#subContents .program .popularity .text {
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #333333;
  font-size: 2.6rem;
  font-weight: 500;
  padding: 32px 10px;
  margin: 30px 0 0;
  position: relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#subContents .program .popularity .text::before {
  content: "";
  display: block;
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 15px rgba(124, 159, 39, 0.15);
          box-shadow: 0 2px 15px rgba(124, 159, 39, 0.15);
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#subContents .program .popularity .item:hover .text {
  color: var(--color-green);
  border: 1px solid var(--color-green);
}

#subContents .programView .shadow {
  padding: 50px;
}

#subContents .programView .title {
  color: #222222;
  text-align: center;
}

#subContents .programView .title p {
  font-size: 2.0rem;
}
#subContents .programView .title p b {
  color: #1e70aa;
}

#subContents .programView h4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 150px;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 500;
  margin: 0 0 20px;
}

#subContents .programView .dashedLine {
  margin: 40px 0 60px;
}

#subContents .programView .itemBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#subContents .programView .imgBox, #subContents .programView .textBox {
  width: 50%;
}

#subContents .programView .imgBox {
  padding: 0 50px 0 0;
}

#subContents .programView .img {
  width: 100%;
  border-radius: 10px;
  padding: 32.145% 0;
  position: relative;
  overflow: hidden;
}

#subContents .programView .img img {
  min-width: 100%;
  min-height: 100%;
  max-height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#subContents .programView .textBox {
  padding: 50px 0 0;
}

#subContents .programView .textBox p {
  color: #222222;
  font-size: 1.8rem;
  line-height: 2;
}

#subContents .programView h6 {
  gap: 0 15px;
  color: #1e70aa;
  font-size: 2.0rem;
  font-weight: 600;
  margin: 0 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .programView h6::before, #subContents .programView h6::after {
  content: "";
  width: 2px;
  height: 14px;
  background: #1e70aa;
  border-radius: 2px;
  opacity: 0.3;
}

#subContents .broadcast .program {
  padding-top: 40px;
}

#subContents .broadcast .program::before {
  height: 100%;
  border-radius: 20px 0px 0px 20px;
  left: auto;
  right: 0;
}

#subContents .broadcast .program .title {
  gap: 0 28px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#subContents .broadcast .program .title p {
  color: #222222;
  font-size: 2.0rem;
  line-height: 1.6;
}

#subContents .broadcast .program .title p b, #subContents .broadcast .program .title p em {
  font-weight: 600;
}

#subContents .broadcast .program .title p em {
  color: #2380C3;
}

#subContents .broadcast .program .quotationL {
  margin: 0 0 55px;
}

#subContents .broadcast .program .quotationR {
  margin: -5px 0 0;
}

#subContents .broadcast .program .itemBox {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  gap: 60px 17px;
}

#subContents .broadcast .program .img {
  padding: 31.133% 0;
  position: relative;
  overflow: hidden;
}

#subContents .broadcast .program .img img {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#subContents .broadcast .program .item {
  position: relative;
}

#subContents .broadcast .program .item dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--color-orange);
  border-radius: 10px;
  padding: 30px;
  opacity: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#subContents .broadcast .program .item dl * {
  color: #ffffff;
}

#subContents .broadcast .program .item dl > * {
  overflow: hidden;
}

#subContents .broadcast .program .item dl span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#subContents .broadcast .program .item dl dt {
  font-size: 3.4rem;
  margin: 0 0 12px;
}

#subContents .broadcast .program .item dl dd {
  font-weight: 200;
}

#subContents .broadcast .program .item dl dd span {
  gap: 0 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .broadcast .program .item dl hr {
  width: 2px;
  height: 15px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 2px;
  margin: 0;
}

#subContents .broadcast .program .item:hover dl {
  opacity: 1;
}

#subContents .broadcast .program .item:hover dl dd span {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

#subContents .broadcast .program .item:hover span {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

#subContents .publication .column {
  gap: 200px 0;
}

#subContents .publication .info {
  position: relative;
}

#subContents .publication .info .cloud {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#subContents .publication .info .imgBox,
#subContents .publication .info .pointL,
#subContents .publication .info .pointR,
#subContents .publication .info .top {
  position: absolute;
}

#subContents .publication .info .imgBox {
  top: 50%;
  left: 17%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 1;
}

#subContents .publication .info .top {
  width: 15.35%;
  top: -8.8%;
  left: 2.6%;
}

#subContents .publication .info .top svg {
  overflow: inherit;
}

#subContents .publication .info .top .face {
  transform-box: view-box;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: topRotate 1.4s infinite;
          animation: topRotate 1.4s infinite;
}

@-webkit-keyframes topRotate {
  50% {
    -webkit-transform: rotate(10deg) translateX(10px);
            transform: rotate(10deg) translateX(10px);
  }
}

@keyframes topRotate {
  50% {
    -webkit-transform: rotate(10deg) translateX(10px);
            transform: rotate(10deg) translateX(10px);
  }
}

#subContents .publication .info .pointL {
  width: 19.45%;
  top: 20%;
  left: -15.2%;
}

#subContents .publication .info .pointL.on {
  top: 12%;
  left: -7.2%;
}

#subContents .publication .info .pointR {
  width: 34%;
  top: 26%;
  right: -24%;
}

#subContents .publication .info .pointR.on {
  top: 16%;
  right: -14%;
}

#subContents .publication .background {
  padding: 0 0 50px;
}

#subContents .publication .background::before {
  width: 100vw;
  border-radius: 0;
  height: 0;
  top: 0;
  left: 50%;
  bottom: auto;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

#subContents .publication .background.on::before {
  height: 100%;
}

#subContents .publication .background.green.on::before {
  background: rgba(196, 241, 88, 0.15);
}

#subContents .publication .background .itemBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#subContents .publication .background .item.on:nth-child(1) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

#subContents .publication .background .item.on:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

#subContents .publication .background .item.on:nth-child(3) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

#subContents .publication .background .item.on:nth-child(4) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

#subContents .publication .title {
  margin-left: 60px;
}

#subContents .publication .text {
  width: 100%;
  max-width: 650px;
  position: relative;
}

#subContents .publication .deco {
  position: absolute;
  z-index: -1;
}

#subContents .publication dl {
  width: 100%;
  text-align: center;
}

#subContents .publication dl dt {
  color: #333333;
  font-size: 3.2rem;
  margin: 0 0 20px;
}

#subContents .publication dl dt b {
  font-weight: 600;
}

#subContents .publication dl dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px 0;
}

#subContents .publication dl dd p {
  background: #ffffff;
  border-radius: 100px;
  color: #222222;
  line-height: 1.875;
  padding: 15px 20px;
}

#subContents .publication dl dd em {
  color: #2380C3;
  font-weight: 600;
}

#subContents .publication h6 {
  gap: 0 10px;
  color: #333333;
  font-size: 2.0rem;
  font-weight: 500;
  margin: 20px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#subContents .publication h6::before, #subContents .publication h6::after {
  content: "";
  display: block;
  width: 2px;
  height: 14px;
  background: rgba(19, 0, 18, 0.3);
  border-radius: 10px;
}

#subContents .publication .orangeBox .title {
  margin-top: -82px;
}

#subContents .publication .orangeBox .text {
  margin: 0 80px 20px auto;
}

#subContents .publication .orangeBox .text .deco1 {
  top: 2rem;
  left: 20px;
}

#subContents .publication .orangeBox .text .deco2 {
  right: -18px;
  bottom: -15px;
}

#subContents .publication .orangeBox dl dd p {
  -webkit-box-shadow: 0px -2px 15px rgba(255, 160, 0, 0.2);
          box-shadow: 0px -2px 15px rgba(255, 160, 0, 0.2);
}

#subContents .publication .orangeBox .itemBox {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin: 20px 0 0;
}

#subContents .publication .orangeBox .itemBox > div {
  width: 50%;
}

#subContents .publication .orangeBox h6 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

#subContents .publication .orangeBox .big {
  margin: 0 100px 0 0;
  position: relative;
}

#subContents .publication .orangeBox .big .pointBox {
  width: 41.45%;
  position: absolute;
  left: 4%;
  bottom: -4%;
  z-index: 1;
}

#subContents .publication .orangeBox .big .inner {
  width: 100%;
  max-width: 530px;
  margin: 0 0 0 auto;
}

#subContents .publication .orangeBox .big .square {
  height: 440px;
  background: rgba(255, 208, 112, 0.8);
  border-radius: 20px;
  -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
  position: relative;
}

#subContents .publication .orangeBox .big .square .img {
  position: absolute;
  left: 20px;
  bottom: 20px;
}

#subContents .publication .orangeBox .big h6 {
  margin: 20px 30px 0 0;
}

#subContents .publication .orangeBox .big .deco1 {
  left: 9.5%;
}

#subContents .publication .orangeBox .big .deco2 {
  right: -48px;
  bottom: 10px;
}

#subContents .publication .orangeBox .flexBox {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#subContents .publication .orangeBox .flexBox .item {
  width: 100%;
  max-width: 350px;
}

#subContents .publication .orangeBox .flexBox .item.green .square {
  background: #99CFA7;
}

#subContents .publication .orangeBox .flexBox .item.purple .square {
  background: #A0AAD6;
}

#subContents .publication .orangeBox .flexBox .item.on:nth-child(1) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

#subContents .publication .orangeBox .flexBox .item.on:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

#subContents .publication .orangeBox .flexBox .square {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  position: relative;
}

#subContents .publication .orangeBox .flexBox .square .img {
  width: calc(100% - 50px);
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 28%);
          transform: translate(-50%, 28%);
  -webkit-transition: clip 0.4s, -webkit-transform 0.4s 0.02s;
  transition: clip 0.4s, -webkit-transform 0.4s 0.02s;
  transition: transform 0.4s 0.02s, clip 0.4s;
  transition: transform 0.4s 0.02s, clip 0.4s, -webkit-transform 0.4s 0.02s;
  clip: rect(0, 299px, 257px, 0);
}

#subContents .publication .greenBox .title {
  margin-top: -83.5px;
}

#subContents .publication .greenBox .top {
  width: 100%;
  max-width: 1456px;
  background: rgba(235, 249, 201, 0.7);
  border-radius: 20px;
  -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
  padding: 50px 75px;
  margin: 100px 0 160px;
  position: relative;
}

#subContents .publication .greenBox .top .imgBox > .img {
  width: 26.9%;
  position: absolute;
  right: 60px;
  bottom: -15px;
}

#subContents .publication .greenBox .top .imgBox .pointBox {
  width: 31.55%;
  position: absolute;
  top: 4%;
  right: -20%;
}

#subContents .publication .greenBox .top .imgBox .pointBox .deco {
  top: -20px;
  left: 24%;
  z-index: 1;
}

#subContents .publication .greenBox .top .imgBox .pointBox .img {
  position: relative;
  z-index: 2;
}

#subContents .publication .greenBox .text {
  z-index: 1;
}

#subContents .publication .greenBox .deco2 {
  top: 48%;
  right: -18px;
}

#subContents .publication .greenBox .deco3 {
  left: -35px;
  bottom: -30px;
  z-index: 1;
}

#subContents .publication .greenBox dl dd p {
  -webkit-box-shadow: 0px -2px 15px rgba(225, 238, 195, 0.8);
          box-shadow: 0px -2px 15px rgba(225, 238, 195, 0.8);
}

#subContents .publication .greenBox .itemBox {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#subContents .publication .greenBox .item {
  width: 100%;
  max-width: 350px;
}

#subContents .publication .greenBox .item.orange .square {
  background: rgba(255, 171, 0, 0.8);
}

#subContents .publication .greenBox .item.orange em {
  background: #FFA000;
}

#subContents .publication .greenBox .item.green .square {
  background: rgba(221, 209, 37, 0.8);
}

#subContents .publication .greenBox .item.green em {
  background: #DDD125;
}

#subContents .publication .greenBox .item.blue .square {
  background: rgba(161, 218, 247, 0.8);
}

#subContents .publication .greenBox .item.blue em {
  background: #A1DAF7;
}

#subContents .publication .greenBox .item.purple .square {
  background: rgba(171, 118, 172, 0.8);
}

#subContents .publication .greenBox .item.purple em {
  background: #AB76AC;
}

#subContents .publication .greenBox .square {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  position: relative;
}

#subContents .publication .greenBox .square .img {
  width: calc(100% - 47px);
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 36.2%);
          transform: translate(-50%, 36.2%);
  -webkit-transition: clip 0.4s, -webkit-transform 0.4s 0.02s;
  transition: clip 0.4s, -webkit-transform 0.4s 0.02s;
  transition: transform 0.4s 0.02s, clip 0.4s;
  transition: transform 0.4s 0.02s, clip 0.4s, -webkit-transform 0.4s 0.02s;
  clip: rect(0, 303px, 250px, 0);
}

#subContents .publication .greenBox .item:hover .square {
  overflow: inherit;
}

#subContents .publication .greenBox .item:hover .img {
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  clip: rect(0, 303px, 393px, 0);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#subContents .publication .greenBox h6 em {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #ffffff;
  margin: 0 -4px;
}

#subContents .publication .blueBox .title {
  margin-top: -120px;
  margin-bottom: -20px;
}

#subContents .publication .blueBox .text {
  margin: 0 80px 40px auto;
}

#subContents .publication .blueBox .text .deco1 {
  top: 0;
  left: 20px;
}

#subContents .publication .blueBox .text .deco2 {
  right: -18px;
  bottom: -15px;
}

#subContents .publication .blueBox dl dd p {
  -webkit-box-shadow: 0px -2px 15px rgba(68, 135, 183, 0.1);
          box-shadow: 0px -2px 15px rgba(68, 135, 183, 0.1);
}

#subContents .publication .blueBox .itemBox {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: relative;
}

#subContents .publication .blueBox .itemBox > img {
  position: absolute;
  top: 0;
  left: 10px;
}

#subContents .publication .blueBox .item {
  width: 50%;
  position: relative;
}

#subContents .publication .blueBox .item.orange {
  padding: 0 0 0 30px;
}

#subContents .publication .blueBox .item.orange .square {
  background: rgba(255, 160, 0, 0.5);
}

#subContents .publication .blueBox .item.green {
  padding: 0 0 0 70px;
}

#subContents .publication .blueBox .item.green .square {
  background: rgba(170, 207, 82, 0.5);
}

#subContents .publication .blueBox .item .img {
  padding: 0 0 30px 30px;
}

#subContents .publication .blueBox .inner {
  width: 100%;
  max-width: 530px;
  position: absolute;
  bottom: 0;
  z-index: -1;
}

#subContents .publication .blueBox .square {
  width: 100%;
  height: 300px;
  border-radius: 20px;
  -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
}

#subContents .education .topImg {
  width: 100vw;
  position: relative;
  left: 50%;
  -webkit-transform: translate(-50%, 100px);
          transform: translate(-50%, 100px);
}

#subContents .education .topImg img {
  width: 100%;
}

#subContents .education .topImg.on {
  width: 100%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

#subContents .education .itemBox {
  margin: 100px 0 0;
}

#subContents .education .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .education .item:nth-child(odd) {
  background: rgba(152, 202, 60, 0.06);
}

#subContents .education .item:nth-child(odd) .img::after {
  right: 0;
}

#subContents .education .item:nth-child(odd) .img.on::after {
  right: 100%;
}

#subContents .education .item:nth-child(even) .img::after {
  left: 0;
}

#subContents .education .item:nth-child(even) .img.on::after {
  left: 100%;
}

#subContents .education .item > div {
  width: 50%;
}

#subContents .education .text {
  padding: 0 0 0 8%;
}

#subContents .education .text .flex{
  display: flex; 
  flex-wrap: wrap;
}

#subContents .education .text .flex.gap20{
  gap: 0 20px;
}

#subContents .education .text span {
  gap: 0 15px;
  color: #1e70aa;
  font-size: 2.0rem;
  font-weight: 600;
  margin: 0 0 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .education .text span::before, #subContents .education .text span::after {
  content: "";
  width: 2px;
  height: 14px;
  background: #BCD5E6;
  border-radius: 2px;
  /* opacity: 0.3; */
}

#subContents .education .text .flex span{ margin-right: -2px; }

#subContents .education .dashedLine {
  width: 100%;
  max-width: 560px;
  margin: 20px 0;
}

#subContents .education dl dt {
  color: #222222;
  font-weight: 600;
  line-height: 1.2888;
  margin: 0 0 20px;
}

#subContents .education dl dd {
  color: #333333;
  line-height: 1.625;
}

#subContents .education h6 {
  color: #333333;
  font-size: 2.2rem;
  font-weight: 500;
  margin: 0 0 20px;
}

#subContents .education .pBox {
  gap: 15px 0;
}

#subContents .education .pBox p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 10px;
  color: #333333;
  line-height: 1.875;
}

#subContents .education .pBox p::before {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  background: var(--color-orange);
  border-radius: 50%;
  margin: 0.9375em 0 0;
}

#subContents .education .ebsButton {
  margin: 50px 0 0;
  left: auto;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

#subContents .performance .character {
  overflow: hidden;
}

#subContents .performance .character::before {
  height: 100%;
  border-radius: 0;
  left: 0;
  z-index: -1;
}

#subContents .performance .character.on::before {
  width: 100%;
}

#subContents .performance .character .point.first {
  top: -2%;
  right: -12%;
}

#subContents .performance .character .point.last {
  left: -6%;
  bottom: -30%;
}

#subContents .performance .character .title {
  display: inline-block;
  position: relative;
}

#subContents .performance .character .title h3 {
  color: #222222;
  font-weight: 600;
  margin: 0 0 20px;
}

#subContents .performance .character .title p {
  color: #333333;
  font-size: 2.2rem;
  font-weight: 300;
}

#subContents .performance .character .title .bigFont {
  color: rgba(255, 255, 255, 0.5);
  top: -75%;
  right: -18%;
}

#subContents .performance .character .itemBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 40px;
  margin: 90px 0 0;
}

#subContents .performance .character .item.on:nth-child(1) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

#subContents .performance .character .item.on:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

#subContents .performance .character .item.on:nth-child(3) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

#subContents .performance .character .imgBox,
#subContents .performance .character .img {
  position: relative;
}

#subContents .performance .character .imgBox {
	border-radius: 5px;
	overflow: hidden;
}

#subContents .performance .character .img::before {
  content: "";
  display: block;
  background: transparent;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#subContents .performance .character .imgBox iframe,
#subContents .performance .character .imgBox video,
#subContents .performance .character .imgBox button {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
}

#subContents .performance .character .imgBox iframe,
#subContents .performance .character .imgBox video {
	min-width: 100%;
	height: 100%;
	min-height: 100%;
	opacity: 0;
}

#subContents .performance .character dl {
  color: #222222;
  margin: 25px 0 0;
}

#subContents .performance .character dl dt,
#subContents .performance .character dl dt em {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .performance .character dl dt {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 2.4rem;
  font-weight: 600;
  margin: 0 0 15px;
}

#subContents .performance .character dl dt em {
  gap: 0 10px;
  font-size: 1.6rem;
  font-weight: 400;
}

#subContents .performance .character dl dt em::before {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  background: var(--color-orange);
  border-radius: 50%;
}

#subContents .performance .character dl dd {
  font-size: 2.0rem;
  font-weight: 300;
  line-height: 1.2;
}

#subContents .performance .info,
#subContents .performance .info .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#subContents .performance .info {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 150px 0;
}

#subContents .performance .info .item {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .performance .info .item > div {
  width: 50%;
}

#subContents .performance .info .img {
  max-width: calc(100% - 40px);
  background: #ffffff;
  border-radius: 20px;
  -webkit-box-shadow: 0px 2px 30px rgba(34, 34, 34, 0.1);
          box-shadow: 0px 2px 30px rgba(34, 34, 34, 0.1);
  position: relative;
  padding: 25% 0;
}

#subContents .performance .info .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#subContents .performance .info .text {
  position: relative;
}

#subContents .performance .info .bigFont {
  -webkit-transform: translateX(-10%);
          transform: translateX(-10%);
}

#subContents .performance .info h3 {
  color: #222222;
  font-weight: 600;
}

#subContents .performance .info .colorG {
  opacity: 0.2;
}

#subContents .performance .info .colorO {
  opacity: 0.1;
}

#subContents .performance .info .dashedLine {
  margin: 20px 0;
}

#subContents .performance .info .ip .text {
  padding: 0 40px;
}

#subContents .performance .info .ip .bigFont {
  top: -72%;
}

#subContents .performance .info .ip .dlBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 45px 0;
}

#subContents .performance .info .ip .dlBox .flexBox {
  gap: 0 10px;
}

#subContents .performance .info .ip .dlBox .flexBox::before {
  content: "";
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 3px;
  height: 3px;
  background: var(--color-orange);
  border-radius: 50%;
  margin: 1rem 0 0;
}

#subContents .performance .info .ip dl dt {
  color: #222222;
  font-size: 2.2rem;
  font-weight: 600;
  margin: 0 0 20px;
}

#subContents .performance .info .ip dl dd {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.2;
}

#subContents .performance .info .md .text {
  padding: 0 80px;
}

#subContents .performance .info .md .bigFont {
  top: -172%;
}

#subContents .performance .info .md p {
  font-size: 2.2rem;
  line-height: 1.2;
  margin: 30px 0 0;
}

#subContents .performance .info .md p b {
  color: #222222;
  font-weight: 600;
}

#subContents .performance .gallery .slideThumbsBox .pBox {
  gap: 20px 0;
}

#subContents .performance .gallery .slideThumbsBox p {
  gap: 0 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .performance .gallery .slideThumbsBox p::before {
  content: "·";
}

#subContents .performance .gallery .slideThumbsBox .img {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

#subContents .production .tabTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 55px;
  padding: 10px 0;
  border-bottom: 1px solid #d9d9d9;
}

#subContents .production .tabTitle li button {
  color: #d9d9d9;
  font-size: 2.4rem;
  font-weight: 500;
  position: relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#subContents .production .tabTitle li button::before {
  content: "";
  display: block;
  width: 0;
  height: 3px;
  background: var(--color-green);
  border-radius: 3px;
  position: absolute;
  left: 0;
  bottom: -12px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#subContents .production .tabTitle li.on button, #subContents .production .tabTitle li:hover button {
  color: var(--color-green);
}

#subContents .production .tabTitle li.on button::before, #subContents .production .tabTitle li:hover button::before {
  width: 100%;
}

#subContents .production .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 110px;
}

#subContents .production .info .item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 20px;
  text-align: center;
  padding: 65px 10px 50px;
  position: relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#subContents .production .info .item::before {
  content: "";
  display: block;
  border-radius: 20px;
  -webkit-box-shadow: 0px 3px 20px 2px rgba(0, 0, 0, 0.05);
          box-shadow: 0px 3px 20px 2px rgba(0, 0, 0, 0.05);
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#subContents .production .info .item:hover {
  border-color: var(--color-green);
}

#subContents .production .info .icon {
  margin: 0 0 35px;
}

#subContents .production .info em {
  font-family: 'Poppins',
 sans-serif;
}

#subContents .production .info dl dt {
  color: #222222;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 5px 0 15px;
}

#subContents .production .info dl dd {
  font-size: 2.0rem;
  font-weight: 300;
  line-height: 1.7;
}

#subContents .production .tabContents {
  padding: 100px 0 0;
}

#subContents .production .culture .gallery .slideThumbsBox p {
  line-height: 1.5;
}

#subContents .production .culture .gallery .slideThumbsBox .imgBox p {
  text-align: right;
  position: absolute;
  right: 40px;
  bottom: 40px;
}

#subContents .production .produce .media h6 {
  color: #130012;
  font-weight: 500;
  margin: 0 0 50px;
}

#subContents .production .produce .media .itemBox {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  gap: 30px 26px;
}

#subContents .production .produce .media .item {
  position: relative;
}

#subContents .production .produce .media .item dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  color: #ffffff;
  padding: 20px 30px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#subContents .production .produce .media .item dl dt {
  font-weight: 600;
  margin: 0 0 10px;
}

#subContents .production .produce .media .item dl dd {
  font-size: 2.0rem;
  font-weight: 300;
  line-height: 1.2;
}

#subContents .ip .background::before {
  height: 100%;
}

#subContents .ip .background.on::before {
  width: 92.0388%;
}

#subContents .ip .column {
  gap: 200px 0;
}

#subContents .ip .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#subContents .ip .bigFont {
  display: block;
  color: rgba(255, 255, 255, 0.4);
  position: relative;
}

#subContents .ip .text h3 {
  font-weight: 600;
  margin: 0 0 30px;
}

#subContents .ip .text p {
  font-size: 2.2rem;
  line-height: 1.6363;
}

#subContents .ip .text p b {
  font-weight: 600;
}

#subContents .ip .partnership::before {
  background: #ededed;
  border-radius: 20px 0px 0px 20px;
  right: 0;
}

#subContents .ip .partnership .text {
  padding: 0 0 0 140px;
}

#subContents .ip .partnership .bigFont {
  margin: 0 0 -0.22em -12%;
}

#subContents .ip .partnership h3, #subContents .ip .partnership b {
  color: #222222;
}

#subContents .ip .partnership .img {
  margin: 0 0 -1.5% auto;
}

#subContents .ip .interactive {
  padding: 200px 0 100px;
}

#subContents .ip .interactive::before {
  background: var(--color-orange);
  border-radius: 0 20px 20px 0;
  left: 0;
}

#subContents .ip .interactive .point {
  top: -28%;
  right: -2%;
  z-index: -2;
}

#subContents .ip .interactive .imgBox {
  width: 58.85%;
  position: absolute;
  top: calc(-22% - 80px);
  left: -80px;
}

#subContents .ip .interactive .imgBox.on {
  top: -22%;
  left: 0;
}

#subContents .ip .interactive .item {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0 85px;
  padding: 0 70px 0 0;
}

#subContents .ip .interactive .text *:not(.bigFont) {
  color: #ffffff;
}

#subContents .ip .interactive .bigFont {
  margin: 0 0 -0.22em -22%;
}

#subContents .inquiry .inquiryBox .inputPolicy .radius {
  height: 180px;
  padding: 30px;
  overflow-y: scroll;
}
:root{
    --bg:#0e0f12;
    --card:#14161b;
    --c1:#6366f1; /* indigo */
    --c2:#22d3ee; /* cyan */
    --c3:#f472b6; /* pink */
    --white:#ffffff;
  }
.s11-box { width:100%;height:200px ;background:radial-gradient(circle,
        rgba(56,68,97,0.9) 70%,
        rgba(56,68,97,0.3) 30%,
        rgba(56,68,97,0.9) 0%); }
		
/*sub03*/
  body {
      font-family: 'Noto Sans KR', sans-serif;
      margin: 0;
      background: #f9f9f9;
    }
    .team-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .member-card {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
   /*   box-shadow: 0 2px 6px rgba(0,0,0,0.05); */
    }
    .member-card img {
      width: 100%;
      max-width: 150px;
      border-radius: 6px;
      margin-bottom: 12px;
    }
    .member-info {
      text-align: center;
    }
    .member-info h3 {
      font-size: 1.1rem;
      margin: 5px 0;
      font-weight: 700;
    }
    .member-info ul {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 0.9rem;
      color: #444;
      text-align: left;
    }
    .member-info ul li {
      margin-bottom: 4px;
      line-height: 1.4;
    }
    .btn-detail {
      margin-top: 10px;
      display: inline-block;
      padding: 8px 14px;
      border: 1px solid #444;
      border-radius: 20px;
      background: #fff;
      font-size: 0.9rem;
      cursor: pointer;
      text-decoration: none;
      color: #222;
      transition: all 0.2s ease;
    }
    .btn-detail:hover {
      background: #444;
      color: #fff;
    }

    /* 태블릿 이상 (2열) */
    @media (min-width: 768px) {
      .team-container {
        grid-template-columns: 1fr 1fr;
      }
      .member-card {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
      }
      .member-card img {
        margin: 0 15px 0 0;
      }
      .member-info {
        flex: 1;
      }
      .member-info h3 {
        text-align: left;
      }
    }
   /* greeting */
     .greeting-box-container {
        margin:0 auto;
      padding:20px;
    }

    .greeting-box-hero {
      greeting-box-text-align:center;
      margin-bottom:20px;
    }
    .greeting-box-hero  .head {
      font-size:22px;
      color:#357ab7;
      margin:0;
    }
    .greeting-box-hero p {
      font-size:14px;
      color:#777;
      margin:4px 0 0;
    }

    .greeting-box-content {
      display:flex;
      gap:20px;
      align-items:flex-start;
      flex-wrap:wrap; /* 화면 좁아지면 자동 줄바꿈 */
    }

    .greeting-box-content img {
      flex:0 0 220px;
      max-width:100%;
      border-radius:8px;
    }

    .greeting-box-text {
      flex:1;
      min-width:240px;
      font-size:14px;
      line-height:2.3;
    }
    .greeting-box-text p {
      margin-top:0;
      font-size:16px;
      font-weight:400;
	  line-height:180%;
    }
    .greeting-box-text strong {
      color:#2b6ea3;
    }
    .greeting-box-signature {
      margin-top:12px;
      greeting-box-text-align:right;
      font-size:13px;
      color:#666;
      font-weight:600;
    }
	/* 싸인 이미지 영역 */
    .greeting-box-sign-area {
      width:100%;
	  text-align:right;
      margin-top:0px;
    }
    .greeting-box-sign-area img {
      max-width:180px; /* 필요에 따라 크기 조절 */
      height:auto;
    }

    @media(max-width:600px){
      .greeting-box-content {
        flex-direction:column;
        align-items:center;
        greeting-box-text-align:center;
      }
      .greeting-box-text {
        greeting-box-text-align:left;
      }
    }
  
/* sub04 */
    .timeline {
      position: relative;
	  margin-left:60px;
    }
	.timeline::before {
			content:"";
			width:1px;
			height:100%;
			background-color:#acacac;
			position:absolute;
			top:0%;
			left:-10.5px;
	
	}

    /* 연도 스타일 */
    .year {
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      background: #2b7dbd;
      border-radius: 50%;
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 30px 0;
      position: relative;
      left: -55px;
      border:3px solid #86b9e3;
	  box-shadow: 0 0 0 3px #ffffff ; 
	 /* box-shadow: 0 4px 6px rgba(0,0,0,0.2); */
    }

    /* 연혁 항목 */
    .event {
      margin-bottom: 20px;
      padding-left: 10px;
      position: relative;
    }

    .event::before {
      content: "";
      position: absolute;
      left: -14.9px;
      top: 6px;
      width: 6px;
      height: 6px;
      background: #2b7dbd;
      border-radius: 50%;
      border: 2px solid #ffffff;
      box-shadow: 0 0 0 1px #acacac; 
    }

    .event p {
      margin: 5px 0;
      font-size: 15px;
      line-height: 1.5;
    }

    /* 모바일 대응 */
    @media (max-width: 600px) {
      .year {
        width: 60px;
        height: 60px;
        font-size: 18px;
        left: -45px;
      }
      .event p {
        font-size: 14px;
      }
    }
/* sub05 */
  h2 {
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
    }
    h2 img {
      width: 22px;
      margin-right: 8px;
    }
    .box {
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 0.95rem;
    }
    .box.green {
      background: #d7e8d1;
    }
    .box.blue {
      background: #d9ecf9;
    }
    .box.lightgreen {
      background: #e0f1e0;
    }

    /* 가독성을 위해 긴 텍스트는 자동 줄바꿈 */
    .box {
      word-break: keep-all;
      white-space: normal;
    }
	
	/* sub32 */
	.flow-container {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 20px;
      margin: 20px auto;
      flex-wrap: nowrap;
      position: relative;
	  padding:10px 0;
    }

    .node {
      text-align: center;
      flex: 1;
      position: relative;
	  width:100%;
    }

    .circle {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.8rem;
      font-weight: bold;
      color: #fff;
      margin: 0 auto 15px;
      position: relative;
	  z-index:99;
    }

    .edu { background: linear-gradient(to bottom, #ff9900, #cc6600);border:10px solid #ffffff ; box-shadow:0 0 0 8px #E3B575;}
    .counsel { background: linear-gradient(to bottom, #66cc33, #339900); border: 10px solid #ffffff;box-shadow:0 0 0 8px #C7F4B0; }
    .consult { background: linear-gradient(to bottom, #3399ff, #003399); border: 10px solid #ffffff;box-shadow:0 0 0 8px #B0CDF4;  }

    /* 원들 사이 라인 */
    .circle::after {
     content: "";
    position: absolute;
    top: 50%;
    left: 120px;
    width: 430px;
    height: 1px;
    background: #ccc;
    transform: translateY(-50%);
	z-index:3;
    }

    /* 마지막 원은 라인 제거 */
    .node:last-child  .circle::after{
       		display:none;
    }
    .title {
      font-weight: bold;
      color: #fff;
      border-radius: 6px;
      padding: 8px;
      margin-bottom: 8px;
      font-size: 1.2rem;
    }

    .edu-title { background: #ff9900; }
    .counsel-title { background: #66cc33; }
    .consult-title { background: #3399ff; }

    .desc {
      background: #f4efe7;
      padding: 10px;
      border-radius: 6px;
      font-size:1.0rem;
      color: #333;
    }
	   .node{ position:relative; z-index:9; }
	
    /* 반응형 */
    @media (max-width: 768px) {
      .flow-container {
        flex-direction: column;
        align-items: center;
		
      }
      .circle::after {
        display:none;
      }
	  .node{ position:relative; z-index:9; }
	  .line { position:relative; }
	  .line:after {
	   	content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        height: 400px;
        background: #dddddd;
        transform: translateY(-50%);
        z-index: 8;
	  }
   
	  .line:last-child,line:last-child::after{ display:none;}

    }
	

    /* 상단 제목 박스 */
    .header {
      background: linear-gradient(to right, #2b6cb0, #3182ce);
      color: #fff;
      text-align: center;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
    }
    .header h1 {
      margin: 0;
      font-size: 1.4rem;
    }
    .header p {
      margin: 5px 0 0;
      font-size: 0.9rem;
    }

    /* 아이템 박스 */
    .item {
      display: flex;
      align-items: stretch;
      border: 1px solid #ccc;
      border-radius: 10px;
      margin-bottom: 15px;
      overflow: hidden;
      background: #e9efff;
    }

    /* 라벨(화살표 부분) */
    .label {
      flex: 0 0 150px;
      background: #2c5282;
      color: #fff;
      font-weight: bold;
      padding: 15px;
      position: relative;
      clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
    }
    .label span {
      display: block;
      font-size: 1.2rem;
      margin-top: 5px;
      font-weight: normal;
    }

    /* 설명 영역 */
    .desc {
      flex: 1;
      padding: 15px;
      font-size: 1.0rem;
      background: #f0f4ff;
	  border:1px solid #cdcdcd;
    }

    /* 각 항목별 색상 */
    .career .label { background: #2c5282; }
    .career .desc { background: #e2e6f9; }

    .life .label { background: #2b7a78; }
    .life .desc { background: #e6f5f9; }

    .business .label { background: #0073cf; }
    .business .desc { background: #e9f3ff; }

    /* 반응형 */
    @media (max-width: 600px) {
       .label {
			   font-size:1.5rem;
			   flex: 0 0 30px;   
       }
	  .item {
        flex-direction: column;
      }
      .label {
        clip-path: none;
        border-radius: 10px 10px 0 0;
      }
    }
	/* su33 */
	 .container {
      width:98%;
	  margin: 20px auto;
    }

    .card {
      background: white;
      border-radius: 10px;
      margin-bottom: 20px;
      padding: 20px;
	  
      box-shadow: 0 0px 0px 1px rgba(0,0,0,0.1);
    }

    .card h2 {
      margin: 0 0 10px;
      font-size: 1.2rem;
      color: white;
      padding: 10px;
      border-radius: 6px;
    }

    /* 각 섹션 색상 */
    .corp h2 { background: #2CA6A4; }
    .personal h2 { background: #423D82; }
    .youth h2 { background: #358BA0; }
    .leader h2 { background: #3D82A0; }

    .card ul {
      padding-left: 18px;
      margin: 0;
    }

    .card ul li {
      margin-bottom: 8px;
      color: #333;
    }

    @media (max-width: 480px) {
      .card {
        padding: 15px;
      }
      .card h2 {
        font-size: 1rem;
      }
    }
	
/* sub21 */
/* 기본 리셋(간단) */
 

    /* 헤더 로고 줄 */
    .sub-title {
      display:flex;
      align-items:center;
      gap:0.75rem;
      margin-bottom:0.75rem;
    }
    .title-logo {
      width:38px;
      height:38px;
      flex:0 0 38px;
      background: url('/mnt/data/A2.png') center/cover no-repeat; /* 필요시 경로 변경 */
      border-radius:6px;
    }
    .site-title {
      font-weight:700;
      font-size: clamp(1rem, 3.2vw, 1.25rem);
    }

    /* 큰 섹션 제목 박스 */
    .hero {
      background:#2c6aa0;
      color:#fff;
      padding:1rem;
      border-radius:10px;
      text-align:center;
      margin-bottom:1rem;
    }
    .hero h2 {
      margin:0;
      font-size: clamp(1.05rem, 4.5vw, 1.2rem);
      line-height:1.15;
	  color:#ffffff;
    }
    .hero p {
      margin:0.35rem 0 0;
      font-size: clamp(0.95rem, 2.8vw, 1.0rem);
      opacity:0.95;
	  color:#f4f4f4;
    }

    /* 4가지 주요 박스(2열 레이아웃으로 변환) */
    .grid {
      display:grid;
      grid-template-columns:1fr;
      gap:0.8rem;
      margin-bottom:1rem;
    }
    .card {
      padding:0.9rem;
      border-radius:9px;
      color:#fff;
      min-height:82px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      word-wrap:break-word;
      overflow-wrap:break-word;
      hyphens:auto;
    }
    .card h3 {
      margin:0 0 0.35rem 0;
      font-size: clamp(1.2rem, 3.2vw, 1.1rem);
      font-weight:700;
    }
    .card p {
      margin:0;
      font-size: clamp(0.95rem, 2.6vw, 0.95rem);
      line-height:1.3;
    }

    .c-blue { background:#1e6aaa; }
    .c-lightblue { background:#8ea6da; color:#fff; }
    .c-brown { background:#4a4048; }
    .c-orange { background:#f08f2e; }

    /* 교육 & 코칭 헤더 (큰 박스) */
    .section-title {
      background:#2b7ba3;
      color:#fff;
      padding:0.9rem;
      text-align:center;
      border-radius:8px;
      margin-bottom:0.9rem;
    }
    .section-title h3 { margin:0; font-size: clamp(1.3rem, 3.5vw, 1.25rem); }

    /* 컨설팅 리스트 박스들 (각각 라벨 + 내용) */
    .services {
      display:flex;
      flex-direction:column;
      gap:0.7rem;
      margin-bottom:1rem;
    }
    .service {
      border:1px solid rgba(20,30,40,0.08);
      border-radius:10px;
      padding:0.6rem;
      background:#f7fbfd;
      display:flex;
      gap:0.6rem;
      align-items:flex-start;
    }
    .service .label {
      flex:0 0 8rem;
      background:#2d6f93;
      color:white;
      padding:1.1rem 0.6rem;
      border-radius:8px;
      font-weight:700;
      text-align:center;
      font-size:1.02rem;
    }
    .service .desc {
      flex:1;
      font-size:0.95rem;
      color:#163648;
    }

    /* 자격과정 박스 (2개) */
    .cert {
      border-radius:8px;
      border:1px solid rgba(20,30,40,0.08);
      padding:0.6rem;
      margin-bottom:0.8rem;
      background:#fff;
    }
    .cert .cert-title {
      background:#164f4a;
      color:#fff;
      padding:0.45rem 0.6rem;
      border-radius:6px;
      font-weight:700;
      font-size:1.1rem;
      margin-bottom:0.6rem;
      text-align:center;
    }
    .cert ul {
      margin:0;
      padding:0 0 0 1.1rem;
      color:#163648;
	  font-weight:300;
      font-size:0.95rem;
      line-height:1.45;
    }

    /* 반응형: 화면이 넓어지면 2열 또는 그리드 변경 */
    @media (min-width:720px) {
      .grid { grid-template-columns: 1fr 1fr; }
      .service .label { flex:0 0 10rem; }
    }
    @media (min-width:1000px) {
      .wrap {  }
      .hero { padding:1.2rem; }
      .service .label { flex:0 0 12rem; }
    }

    /* 보조: 모든 텍스트가 선택 가능하고 잘리지 않도록 */
    p, li, h2, h3 { -webkit-touch-callout: text; }

	/* 서브페이지 타이틀 */
.sub-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  /*
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  */
}

.sub-header-title i {
  font-size: 1.6rem;
  color: #000000; /* 포인트 색상 */
}

.sub-header-title  h2 {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #000000; /* 포인트 색상 */
  margin: 0;
}

/* 본문 */
.content {
  padding: 20px;
  line-height: 1.6;
  font-size: 1rem;
}

/* 모바일 최적화 */
@media (max-width: 480px) {
  .sub-header-title {
    padding: 13px 28px 16px 11px;
    gap: 8px;
  }
  .sub-header-title  i {
    font-size: 1.3rem;
    margin-top: 3px;
  }
  .sub-header-title  h2 {
    font-family: 'Noto Sans KR', sans-serif;
    color: #000000; /* 포인트 색상 */
	font-size: 1.3rem;
  }
}

/*  GEOPIA® 도형심리 디브리퍼 자격과정 */

.life-box-header {
  border-radius: 8px;
  background: #0c524a;
  color: #fff;
  padding: 14px;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}

.lifebox-container {
  border: 1px solid #ccc;
  border-radius: 6px;
  margin: 16px 0px;
  padding: 20px;
  background: #fdfdfd;
  display: flex;
  flex-direction: column; /* 기본: 모바일 세로 */
  gap: 20px;
}

.lifebox-container   .life-box-left,.lifebox-container .life-box-right {
  flex: 1;
}

ul.life-box-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.life-box-list li {
  margin: 6px 0;
  font-size: 0.95rem;
}

p.highlight {
  color: #0c524a;
  font-weight: bold;
  margin-top: 12px;
}

.life-box-cards {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
}

.life-box-cards img {
}

.life-box-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: #555;
}

/* PC (768px 이상)에서는 좌우 분할 */
@media (min-width: 768px) {
  .lifebox-container {
	flex-direction: row;
  }
  .lifebox-container .life-box-left, .lifebox-container .life-box-right {
	padding: 0 20px;
	border-life-box-left: 1px solid #ddd;
  }
  .lifebox-container .life-box-left {
	border-life-box-left: none;
  }
}

    /* 상단 제목 박스 */
    .edubox-header {
      background: linear-gradient(to right, #2b6cb0, #3182ce);
      color: #fff;
      text-align: center;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
    }
    .edubox-header h1 {
      margin: 0;
      font-size: 1.4rem;
    }
    .edubox-header p {
      margin: 5px 0 0;
      font-size: 0.9rem;
    }

    /* 아이템 박스 */
    .edubox-item {
      display: flex;
      align-edubox-items: stretch;
      border: 1px solid #ccc;
      border-radius: 10px;
      margin-bottom: 15px;
      overflow: hidden;
      background: #e9efff;
    }

    /* 라벨(화살표 부분) */
    .edubox-label {
      flex: 0 0 150px;
      background: #2c5282;
      color: #fff;
      font-weight: bold;
      padding: 15px;
      position: relative;
      clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
    }
    .edubox-label span {
      display: block;
      font-size: 1.2rem;
      margin-top: 5px;
      font-weight: normal;
    }

    /* 설명 영역 */
    .edubox-desc {
      flex: 1;
      padding: 15px;
      font-size: 1.0rem;
      background: #f0f4ff;
    }

    /* 각 항목별 색상 */
    .edubox-career .edubox-label { background: #2c5282; }
    .edubox-career .edubox-desc { background: #e2e6f9; }

    .edubox-life .edubox-label { background: #2b7a78; }
    .edubox-life .edubox-desc { background: #e6f5f9; }

    .edubox-business .edubox-label { background: #0073cf; }
    .edubox-business .edubox-desc { background: #e9f3ff; }

    /* 반응형 */
    @media (max-width: 600px) {
       .edubox-label {
			   font-size:1.5rem;
			   flex: 0 0 30px;   
       }
	  .edubox-item {
        flex-direction: column;
      }
      .edubox-label {
        clip-path: none;
        border-radius: 10px 10px 0 0;
      }
    }

	/* Geopia 검사소개 */
	  .intro-tabs {
    display: flex;
    flex-wrap: wrap;
    background: #003366;
  }
  .intro-tab-button {
    flex: 1;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    background: #003366;
    color: white;
    border: none;
    outline: none;
    font-size: 14px;
    transition: background 0.3s;
  }
  .intro-tab-button.active {
    background: #0066cc;
    font-weight: bold;
  }
  .intro-tab-content {
    display: none;
    padding: 20px;
    background: #fff;
  }
  .intro-tab-content.active {
    display: block;
  }

  /* 이미지+텍스트 레이아웃 */
  .intro-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .intro-text {
    flex: 1 1 300px;
  }
  .intro-image {
    flex: 1 1 300px;
    text-align: center;
  }
  .intro-image img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
  }

  /* 반응형 */
  @media (max-width: 768px) {
    .intro-tabs {
      flex-direction: column;
    }
    .intro-tab-button {
      text-align: left;
      border-bottom: 1px solid #004080;
    }
    .intro-container {
      flex-direction: column;
    }
  }

  /* 교육 신청 */
 .education-app-container {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    width: 90%;
	margin: 0 auto;
}

h2 {
    text-align: center;
    margin-bottom: 25px;
    color: #333;
}

/* PC: label과 input 한 줄 */
.education-app-form-group {
    display: flex;
    align-items: left;
    margin-bottom: 18px;
}

.education-app-form-group label {
    width: 120px;
    margin-right: 10px;
    font-weight: bold;
    color: #555;
}

.education-app-form-group input,
.education-app-form-group textarea {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box;
	width:100%;
}

textarea {
    resize: vertical;
}


/* 연락처 입력 3칸 */
.contact-group {
    display: flex;
    gap: 8px;
    width: 100%;
}

.contact-group input {
    flex: 1;
    max-width: calc((100% - 16px)/3); /* gap 8px*2 제외 후 3칸 */
    box-sizing: border-box;
}
.contact-group .dash {
  display: flex;
  align-items: center;   /* 세로 중앙 정렬 */
  justify-content: center;
  padding: 0 4px;
}

/* 모바일: label과 input 세로 배치 */
@media (max-width: 768px) {
    .education-app-form-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .education-app-form-group label {
        width: auto;
        margin-bottom: 15px;
    }

    /* 연락처 3칸 모바일에서도 한 줄 유지 */
    .contact-group input {
        max-width: calc((100% - 16px)/3);
    }
}

/* about 도형이미지 */
    .about-circle-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      gap: 20px;
    }

    .about-circle-content {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .circle-about-circle-container {
      position: relative;
      width: 95vw;
      max-width: 500px;
      aspect-ratio: 1 / 1;
      padding: 5%;
      box-sizing: border-box;
    }

    .about-circle-center-box {
      background: #2C7B8F;
      border: 0.5vw solid #3baac5;
      border-radius: 50%;
      width: 35%;
      height: 35%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-weight: bold;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      font-size: 3vw;
    }

    .about-circle {
      background: #ffffff;
      color: #009688;
      font-weight: 400;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      position: absolute;
      transform: translate(-50%, -50%);
      z-index: 2;
      width: 18%;
      height: 18%;
      padding: 5px;
      font-size: 3vw;
    }

    /* 외곽 원 위치 (연결선에 맞게) */
    .ab-c1 { top: 10%; left: 50%; }
    .ab-c2 { top: 25%; left: 85%; }
    .ab-c3 { top: 75%; left: 85%; }
    .ab-c4 { top: 90%; left: 50%; }
    .ab-c5 { top: 75%; left: 15%; }
    .ab-c6 { top: 25%; left: 15%; }

    /* SVG 선 */
    svg line {
      stroke: #E0E0E0;
      stroke-width: 2;
    }

    @media screen and (min-width: 768px) {
      .about-circle-center-box { font-size: 16px; }
      .about-circle { font-size: 14px; width: 22%; height: 22%; }
    }
	/* TNT HRD CENTER  BOX */
	    /* 상단 헤더 */
    .about-header {
      background-color: #2c5d75;
      text-align: center;
      padding: 15px;
      font-size: 20px;
      font-weight: bold;
	  color:#ffffff;
    }

    /* 중간 소개 */
    .about-intro {
      background: linear-gradient(to bottom, #1c2436, #2b3147);
      text-align: center;
      padding: 30px 15px;
    }

    .about-intro p {
      margin: 10px 0;
      font-size: 16px;
      line-height: 1.6;
	  color:#ffffff;
    }

    .about-intro .about-highlight {
      color: #ffc107; /* 노란색 강조 */
      font-weight: bold;
    }

    .about-intro .about-sub {
      color: #ffc107;
    }

    /* 하단 3 블록 */
    .about-values {
      display: flex;
      flex-direction: column;
      gap: 15px;
      padding: 20px;
      background-color: #2f3d5b;
    }

    .about-value-box {
      flex: 1;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
    }

    .about-value-box h3 {
      margin-bottom: 10px;
      font-size: 18px;
      font-weight: bold;
    }

    .about-value-box p {
      margin: 0;
      font-size: 14px;
      line-height: 1.4;
    }

    /* 색상별 박스 */
    .about-trust { background-color: #2c5d75; color:#ffff00; }
    .about-create { background-color: #3baac5; color:#ffff00; }
    .about-passion { background-color: #2c5d75;  color:#ffff00; }

    /* PC 이상에서는 가로 3분할 */
    @media (min-width: 768px) {
      .about-values {
        flex-direction: row;
      }
    }
	/* education calendar */

#calendar-container { width:94%;  margin: 0px auto; background: #fff; border-radius: 8px; padding: 20px; }

/* 이전/다음 버튼 및 월 표시 */
#calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* ← 이게 수직 중앙 정렬 */
  margin-bottom: 10px;
}
#calendar-header button {
  font-size: 2.2rem;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1; /* 버튼 텍스트 중앙 */
  display: flex;
  align-items: center; /* 버튼 안 텍스트 중앙 */
  justify-content: center;
  padding: 0;
}

#calendar-header #month-year { 
	  font-size: 18px;
	  margin: 0px;
	  padding-top:10px;
	  line-height: 1.2; /* flex 안에서는 line-height로 높이 맞춤 */ 
  }

/* 요일 헤더 */
.calendar-header {
  display: grid; grid-template-columns: repeat(7, 1fr); 
  border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; margin-bottom: 5px;
}
button#prev-month { font-size:2.2rem;line-height:1; }
button#next-month { font-size:2.2rem;line-height:1; }
.day-name { text-align: center; padding: 8px 0; font-weight: bold; }
.day-name.sun { color: #b01f17; }
.day-name.sat { color: #154097; }

/* 달력 날짜 */
#calendar-dates { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.day { padding: 12px 0; text-align: center; border-radius: 5px; cursor: pointer; user-select: none; }
.day:hover { background-color: #dcdcdc; }
.day.sun { color: #b01f17; }
.day.sat { color: #154097; }
.today { border: 2px solid #f0ad4e; }
.schedule { background-color: #1e90ff; color: white; font-weight: bold; }

/* 상세 일정 */
#edu-cal-schedule-detail {
  margin-top: 20px; padding: 15px; background: #fffbe6; border-left: 5px solid #f0ad4e; border-radius: 4px;
}
#edu-cal-schedule-info ul { list-style: none; padding: 0; margin: 0; }
#edu-cal-schedule-info li { margin-bottom: 8px; }
button.go-link { margin: 5px 0px 8px 8px; padding: 8px 16px; font-size: 0.9em;color:#ffffff;cursor: pointer;text-align:center;background-color:#F0AD4E; border-radius:3px; }

/* 성격심리검사 */
 .ppt-tabs {
    display: flex;
    flex-wrap: wrap;
    background: #003366;
  }
  .ppt-tab-button {
    flex: 1;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    background: #003366;
    color: white;
    border: none;
    outline: none;
    font-size: 14px;
    transition: background 0.3s;
  }
  .ppt-tab-button.active {
    background: #0066cc;
    font-weight: bold;
  }
  .ppt-tab-content {
    display: none;
    padding: 20px;
    background: #fff;
  }
  .ppt-tab-content.active {
    display: block;
  }

  /* 이미지+텍스트 레이아웃 */
  .ppt-tab-intro-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .ppt-tab-intro-text {
    flex: 1 1 300px;
  }
  .ppt-tab-intro-image {
    flex: 1 1 300px;
    text-align: center;
  }
  .ppt-tab-intro-image img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
  }

  /* 반응형 */
  @media (max-width: 768px) {
    .ppt-tabs {
      flex-direction: column;
    }
    .ppt-tab-button {
      text-align: left;
      border-bottom: 1px solid #004080;
    }
    .ppt-tab-intro-container {
      flex-direction: column;
    }
  }
  
  /* 교육컨설팅 도식도 */
   .edu-consulting-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0 20px 0;
    }

    .edu-consulting-circle {
      background: linear-gradient(135deg, #4facfe, #00f2fe);
      color: #fff;
      font-size: 1.2rem;
      font-weight: bold;
      border-radius: 50%;
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin: 20px 0;
	  border: 5px solid #ffffff;
	  box-shadow:0 0 0 5px #95e4ff;
    }

    .edu-consulting-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }

    .edu-consulting-item {
      padding: 18px;
      border-radius: 8px;
      text-align: center;
      font-weight: bold;
      color: #fff;
      background: linear-gradient(135deg, #5a8dee, #3f72c7);
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .edu-consulting-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    /* 반응형: 큰 화면에서는 좌우 배치 */
    @media (min-width: 768px) {
      .edu-consulting-container {
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }

      .edu-consulting-list {
      }

      .edu-consulting-circle {
        margin: 0 40px;
      }
    }

	/* 검사 방법 */
	    .paper-test-container {
      padding: 20px;
    }

    .paper-test-header {
      text-align: center;
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
    }

    /* 숫자 박스 스타일 */
    .paper-test-test-type {
      display: flex;
      align-items: center;
    }

    .paper-test-test-number {
      width: 40px;
      height: 40px;	      
      color: white;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      line-height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .paper-test-test-number.one{ 
		 background-color: #5C3D8B;
	}
	.paper-test-test-number.two{ 
		 background-color: #6A4E66;
	}
	.paper-test-test-number.three{ 
		 background-color: #F4A261
	}
	.paper-test-test-number.four{ 
		 background-color: #66B2B2;
	}
    .paper-test-test-title {
      color: white;
      padding: 10px;
      font-size: 18px;
      text-align: center;
      border-radius: 8px;
      flex-grow: 1;
    }

    .test-description {
      font-size: 14px;
      margin-top: 5px;
      padding: 0 10px;
      color: #333;
    }

    /* Paper Test 박스 내부 스타일 */
    .paper-test-details {
      padding: 15px;
      border-radius: 8px;
      margin-top: 10px;
      margin-bottom: 20px;
    }
  .paper-test-details.one { 
         background-color:#E7E0F1;
   }
   .paper-test-details.two { 
         background-color:#D9CAD7;
   }
   .paper-test-details.three { 
         background-color:#FDECDD;
   }
    .paper-test-details.four { 
         background-color:#DCEDED;
   }
   .paper-test-details h4 {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 8px;
      color: #333;
    }

    .paper-details {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    .paper-details h3 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .paper-details ul {
      list-style-type: none;
      padding-left: 0;
    }

    .paper-details ul li {
      font-size: 14px;
      margin-bottom: 8px;
    }
/* 검사	 방법 */
   .paperb-test-container {
    }

    .paperb-test-header {
      text-align: center;
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
    }

    /* 숫자 박스 스타일 */
    .paperb-test-test-type {
      display: flex;
      align-items: center;
    }

    .paperb-test-test-number {
      width: 40px;
      height: 40px;	      
      color: white;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      line-height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .paperb-test-test-number.one{ 
		 background-color: #5C3D8B;
	}
	.paperb-test-test-number.two{ 
		 background-color: #6A4E66;
	}
	.paperb-test-test-number.three{ 
		 background-color: #F4A261
	}
	.paperb-test-test-number.four{ 
		 background-color: #66B2B2;
	}
    .paperb-test-test-title {
      color: white;
      padding: 10px;
      font-size: 18px;
      text-align: center;
      border-radius: 8px;
      flex-grow: 1;
    }

    .test-description {
      font-size: 14px;
      margin-top: 5px;
      padding: 0 10px;
      color: #333;
    }

    /* Paper Test 박스 내부 스타일 */
    .paperb-test-details {
      padding: 15px;
      border-radius: 8px;
      margin-top: 10px;
      margin-bottom: 20px;
    }
  .paperb-test-details.one { 
         background-color:#E7E0F1;
   }
   .paperb-test-details.two { 
         background-color:#D9CAD7;
   }
   .paperb-test-details.three { 
         background-color:#FDECDD;
   }
    .paperb-test-details.four { 
         background-color:#DCEDED;
   }
   .paperb-test-details h4 {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 8px;
      color: #333;
    }

    .paper-details {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    .paper-details h3 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .paper-details ul {
      list-style-type: none;
      padding-left: 0;
    }

    .paper-details ul li {
      font-size: 14px;
      margin-bottom: 8px;
    }

    .paper-highlight-box {
      background: #fff;
      border-left: 5px solid #5dd1c4;
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 0.95rem;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .paper-section-title {
      font-weight: bold;
      color: #e63946;
      margin-bottom: 10px;
      font-size: 1rem;
    }
    ul.paper {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    ul.paper li {
      margin: 8px 0;
      padding-left: 20px;
      position: relative;
      font-size: 0.9rem;
    }
    ul.paper li::before {
      content: "✔";
      position: absolute;
      left: 0;
      color: #5dd1c4;
    }
    .paper-btn {
      display: block;
      text-align: center;
      background: #2a9d8f;
      color: white;
      padding: 12px;
      margin-top: 20px;
      border-radius: 10px;
      text-decoration: none;
      font-weight: bold;
      font-size: 1rem;
      transition: background 0.3s;
    }
    .paper-btn:hover {
      background: #21867a;
    }
    .paper-gray-box {
      background: #f9f9f9;
      padding: 15px;
      border-radius: 10px;
      margin-top: 20px;
      font-size: 0.9rem;
    }
    .paper-gray-box ul li::before {
      content: "▸";
      color: #999;
    }
	.s-app-box { display:inline-block;border: 3px solid #009900;padding:5px 5px;text-align:center; color:#0066cc;}
/* 도형심리 개념*/

    .concept-main-content {
      padding: 20px;
      background-color: white;
    }

    
    .concept-title-box {
      background-color: #f9f9f9;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    .concept-title-box h3 {
      font-size: 20px;
      color: #333;
      margin-bottom: 10px;
    }

    .concept-title-box p {
      font-size: 16px;
      color: #666;
      line-heconcept-ight: 1.6;
    }

    .geo-btn {
      background-color: #5C3D8B;
      color: white;
      padding: 12px;
      display: block;
      text-alconcept-ign: center;
      width: 100%;
      border-radius: 5px;
      margin-top: 20px;
      text-decoration: none;
    }

    .geo-btn:hover {
      background-color: #6A4E66;
    }


    /* 모바일 대응 */
    @media (max-width: 768px) {
           .concept-main-content {
        padding: 15px;
      }

      .subTit {
        font-size: 20px;
      }

      .geo-btn {
        padding: 14px;
      }
    }
	/*  성격심리검사 - GEOPIA검사도구 */
 .gpa-tool-section {
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      border-radius: 12px;
      margin-bottom: 30px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .gpa-tool-section-header {
      background-color: #003366;
      color: #fff;
      padding: 14px 20px;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      font-size: 1.2em;
      text-align: center;
    }

    .gpa-tool-section-content {
      padding: 15px;
    }

    /* 소박스들 */
    .sub-gpa-tool-section {
      margin-top: 20px;
      background-color: #f9f9f9;
      border: 0px solid #ddd;
      border-radius: 12px;
      padding: 15px;
    }

    .sub-gpa-tool-section-header {
      background-color: #0077cc;
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      font-size: 1.1em;
	  margin-bottom: 15px;
    }
   .sub-gpa-tool-header-p {
	   font-size:0.9em;
	   color:#2B98C1;
	   padding:10px;
   }
    .image-gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: space-between;
    }

    .gpa-tool-image-item {
      flex: 1 1 calc(50% - 10px);
      text-align: center;
    }

    .gpa-tool-image-item img {
      width: 100%;
      border-radius: 8px;
    }

    .gpa-tool-image-item p {
      margin-top: 8px;
      font-size: 0.95em;
    }

    .gpa-tool-description p {
      margin: 6px 0;
      font-size: 0.95em;
      line-height: 1.5;
    }
.i-arrow-container {
    display: flex;
    justify-content: center;
    align-items: center;
	width:100%;
	margin:10px auto;
}

/* 화살표 */
.arrow1 {
    position: relative;
    width: 43px;  /* 몸통 너비 */
    height: 40px; /* 몸통 높이 */
    background-color: #F0B6A8; /* 화살표 몸통 색 */
    border-radius: 5px;  /* 둥글게 만들기 */
    z-index: 1; /* 몸통이 삼각형 위에 오도록 설정 */
}

/* 화살표 끝부분 (위쪽 삼각형) */
.arrow1:before {
    content: '';
    position: absolute;
    top: -10px; /* 삼각형 끝이 몸통 위에 위치하도록 조정 */
    left: -13.2px; /* 삼각형을 몸통 가운데에 맞추기 위해 좌우 조정 */
    width: 0;
    height: 0;
    border-left: 35px solid transparent;  /* 삼각형 왼쪽 크기 */
    border-right:35px solid transparent; /* 삼각형 오른쪽 크기 */
    border-bottom: 20px solid #F0B6A8; /* 화살표 끝 색 */
    z-index: 0; /* 삼각형이 몸통 아래로 가게 설정 */
}

/* 화살표 */
.arrow2 {
    position: relative;
    width: 43px;  /* 몸통 너비 */
    height: 40px; /* 몸통 높이 */
    background-color: #8ABC3A; /* 화살표 몸통 색 */
    border-radius: 5px;  /* 둥글게 만들기 */
    z-index: 1; /* 몸통이 삼각형 위에 오도록 설정 */
}

/* 화살표 끝부분 (위쪽 삼각형) */
.arrow2:before {
    content: '';
    position: absolute;
    top: -10px; /* 삼각형 끝이 몸통 위에 위치하도록 조정 */
    left: -13.2px; /* 삼각형을 몸통 가운데에 맞추기 위해 좌우 조정 */
    width: 0;
    height: 0;
    border-left: 35px solid transparent;  /* 삼각형 왼쪽 크기 */
    border-right:35px solid transparent; /* 삼각형 오른쪽 크기 */
    border-bottom: 20px solid #8ABC3A; /* 화살표 끝 색 */
    z-index: 0; /* 삼각형이 몸통 아래로 가게 설정 */
}


/* 화살표 */
.arrow3 {
    position: relative;
    width: 43px;  /* 몸통 너비 */
    height: 40px; /* 몸통 높이 */
    background-color: #0179A6; /* 화살표 몸통 색 */
    border-radius: 5px;  /* 둥글게 만들기 */
    z-index: 1; /* 몸통이 삼각형 위에 오도록 설정 */
}

/* 화살표 끝부분 (위쪽 삼각형) */
.arrow3:before {
    content: '';
    position: absolute;
    top: -10px; /* 삼각형 끝이 몸통 위에 위치하도록 조정 */
    left: -13.2px; /* 삼각형을 몸통 가운데에 맞추기 위해 좌우 조정 */
    width: 0;
    height: 0;
    border-left: 35px solid transparent;  /* 삼각형 왼쪽 크기 */
    border-right:35px solid transparent; /* 삼각형 오른쪽 크기 */
    border-bottom: 20px solid #0179A6; /* 화살표 끝 색 */
    z-index: 0; /* 삼각형이 몸통 아래로 가게 설정 */
}


/* 화살표 */
.arrow4 {
    position: relative;
    width: 43px;  /* 몸통 너비 */
    height: 40px; /* 몸통 높이 */
    background-color: #60367E; /* 화살표 몸통 색 */
    border-radius: 5px;  /* 둥글게 만들기 */
    z-index: 1; /* 몸통이 삼각형 위에 오도록 설정 */
}

/* 화살표 끝부분 (위쪽 삼각형) */
.arrow4:before {
    content: '';
    position: absolute;
    top: -10px; /* 삼각형 끝이 몸통 위에 위치하도록 조정 */
    left: -13.2px; /* 삼각형을 몸통 가운데에 맞추기 위해 좌우 조정 */
    width: 0;
    height: 0;
    border-left: 35px solid transparent;  /* 삼각형 왼쪽 크기 */
    border-right:35px solid transparent; /* 삼각형 오른쪽 크기 */
    border-bottom: 20px solid #60367E; /* 화살표 끝 색 */
    z-index: 0; /* 삼각형이 몸통 아래로 가게 설정 */
}

/* 화살표 */
.arrow5 {
    position: relative;
    width: 43px;  /* 몸통 너비 */
    height: 40px; /* 몸통 높이 */
    background-color: #F7921B; /* 화살표 몸통 색 */
    border-radius: 5px;  /* 둥글게 만들기 */
    z-index: 1; /* 몸통이 삼각형 위에 오도록 설정 */
}

/* 화살표 끝부분 (위쪽 삼각형) */
.arrow5:before {
    content: '';
    position: absolute;
    top: -10px; /* 삼각형 끝이 몸통 위에 위치하도록 조정 */
    left: -13.2px; /* 삼각형을 몸통 가운데에 맞추기 위해 좌우 조정 */
    width: 0;
    height: 0;
    border-left: 35px solid transparent;  /* 삼각형 왼쪽 크기 */
    border-right:35px solid transparent; /* 삼각형 오른쪽 크기 */
    border-bottom: 20px solid #F7921B; /* 화살표 끝 색 */
    z-index: 0; /* 삼각형이 몸통 아래로 가게 설정 */
}

/* 화살표 */
.arrow6 {
    position: relative;
    width: 43px;  /* 몸통 너비 */
    height: 40px; /* 몸통 높이 */
    background-color: #0E5CAB; /* 화살표 몸통 색 */
    border-radius: 5px;  /* 둥글게 만들기 */
    z-index: 1; /* 몸통이 삼각형 위에 오도록 설정 */
}

/* 화살표 끝부분 (위쪽 삼각형) */
.arrow6:before {
    content: '';
    position: absolute;
    top: -10px; /* 삼각형 끝이 몸통 위에 위치하도록 조정 */
    left: -13.2px; /* 삼각형을 몸통 가운데에 맞추기 위해 좌우 조정 */
    width: 0;
    height: 0;
    border-left: 35px solid transparent;  /* 삼각형 왼쪽 크기 */
    border-right:35px solid transparent; /* 삼각형 오른쪽 크기 */
    border-bottom: 20px solid #0E5CAB; /* 화살표 끝 색 */
    z-index: 0; /* 삼각형이 몸통 아래로 가게 설정 */
}

/* 화살표 */
.edarrow1 {
    position: relative;
    width: 43px;  /* 몸통 너비 */
    height: 40px; /* 몸통 높이 */
    background-color: #8DC63F; /* 화살표 몸통 색 */
    border-radius: 5px;  /* 둥글게 만들기 */
    z-index: 1; /* 몸통이 삼각형 위에 오도록 설정 */
}

/* 화살표 끝부분 (아래쪽 삼각형) */
.edarrow1:before {
    content: '';
    position: absolute;
    bottom: -10px; /* 삼각형 끝이 몸통 아래에 위치하도록 조정 */
    left: -13.2px; /* 삼각형을 몸통 가운데에 맞추기 위해 좌우 조정 */
    width: 0;
    height: 0;
    border-left: 35px solid transparent;  /* 삼각형 왼쪽 크기 */
    border-right: 35px solid transparent; /* 삼각형 오른쪽 크기 */
    border-top: 20px solid #8DC63F; /* 화살표 끝 색 (위에서 아래로 바뀌어야 하므로 border-top 사용) */
    z-index: 0; /* 삼각형이 몸통 아래로 가게 설정 */
}

/* 화살표 */
.edarrow2 {
    position: relative;
    width: 43px;  /* 몸통 너비 */
    height: 40px; /* 몸통 높이 */
    background-color: #6E2C91; /* 화살표 몸통 색 */
    border-radius: 5px;  /* 둥글게 만들기 */
    z-index: 1; /* 몸통이 삼각형 위에 오도록 설정 */
}

/* 화살표 끝부분 (아래쪽 삼각형) */
.edarrow2:before {
    content: '';
    position: absolute;
    bottom: -10px; /* 삼각형 끝이 몸통 아래에 위치하도록 조정 */
    left: -13.2px; /* 삼각형을 몸통 가운데에 맞추기 위해 좌우 조정 */
    width: 0;
    height: 0;
    border-left: 35px solid transparent;  /* 삼각형 왼쪽 크기 */
    border-right: 35px solid transparent; /* 삼각형 오른쪽 크기 */
    border-top: 20px solid #6E2C91; /* 화살표 끝 색 (위에서 아래로 바뀌어야 하므로 border-top 사용) */
    z-index: 0; /* 삼각형이 몸통 아래로 가게 설정 */
}

/* 화살표 */
.edarrow3 {
    position: relative;
    width: 43px;  /* 몸통 너비 */
    height: 40px; /* 몸통 높이 */
    background-color: #F58436; /* 화살표 몸통 색 */
    border-radius: 5px;  /* 둥글게 만들기 */
    z-index: 1; /* 몸통이 삼각형 위에 오도록 설정 */
}

/* 화살표 끝부분 (아래쪽 삼각형) */
.edarrow3:before {
    content: '';
    position: absolute;
    bottom: -10px; /* 삼각형 끝이 몸통 아래에 위치하도록 조정 */
    left: -13.2px; /* 삼각형을 몸통 가운데에 맞추기 위해 좌우 조정 */
    width: 0;
    height: 0;
    border-left: 35px solid transparent;  /* 삼각형 왼쪽 크기 */
    border-right: 35px solid transparent; /* 삼각형 오른쪽 크기 */
    border-top: 20px solid #F58436; /* 화살표 끝 색 (위에서 아래로 바뀌어야 하므로 border-top 사용) */
    z-index: 0; /* 삼각형이 몸통 아래로 가게 설정 */
}
/* 화살표 */
.edarrow4 {
    position: relative;
    width: 43px;  /* 몸통 너비 */
    height: 40px; /* 몸통 높이 */
    background-color: #7DC7D0; /* 화살표 몸통 색 */
    border-radius: 5px;  /* 둥글게 만들기 */
    z-index: 1; /* 몸통이 삼각형 위에 오도록 설정 */
}

/* 화살표 끝부분 (아래쪽 삼각형) */
.edarrow4:before {
    content: '';
    position: absolute;
    bottom: -10px; /* 삼각형 끝이 몸통 아래에 위치하도록 조정 */
    left: -13.2px; /* 삼각형을 몸통 가운데에 맞추기 위해 좌우 조정 */
    width: 0;
    height: 0;
    border-left: 35px solid transparent;  /* 삼각형 왼쪽 크기 */
    border-right: 35px solid transparent; /* 삼각형 오른쪽 크기 */
    border-top: 20px solid #7DC7D0; /* 화살표 끝 색 (위에서 아래로 바뀌어야 하므로 border-top 사용) */
    z-index: 0; /* 삼각형이 몸통 아래로 가게 설정 */
}


@media (max-width: 600px) {
      .gpa-tool-image-item {
        flex: 1 1 100%;
      }
    }
 .gpa-tool2-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .gpa-tool2-section {
      background-color: #ffffff;
      border: 1px solid #ccc;
      border-radius: 12px;
      margin-bottom: 30px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      width: 100%;
    }

    .gpa-tool2-section-header {
      background-color: #003366;
      color: white;
      padding: 14px 20px;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      font-size: 1.2em;
      text-align: center;
    }

    .gpa-tool2-content {
      padding: 20px;
      text-align: center;
    }

    .gpa-tool2-content p {
      font-size: 1em;
      margin-bottom: 10px;
      line-height: 1.5;
    }

    /* 성격, 심리 도형 스타일 */
    .gpa-tool2-circle-container {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
      margin-top: 20px;
      gap: 20px;
    }

    .gpa-tool2-circle {
      width: 180px;
      height: 180px;
      border-radius: 50%; /* 원형으로 만들기 */
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.4em;
      font-weight: bold;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }

    .gpa-tool2-circle .gpa-tool2-title {
      position: absolute;
      font-size: 1.2em;
      text-align: center;
    }

    .gpa-tool2-circle.type1 {
      background: linear-gradient(135deg, #1e3d73, #4b8ab9);
    }

    .gpa-tool2-circle.type2 {
      background: linear-gradient(135deg, #b02a37, #c65f73);
    }

    .gpa-tool2-circle:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }

    .gpa-tool2-description {
      margin-top: 20px;
      font-size: 0.95em;
    }

    @media (max-width: 600px) {
      .gpa-tool2-circle-container {
        flex-direction: column;
        align-items: center;
      }

      .gpa-tool2-circle {
        width: 150px;
        height: 150px;
      }
    }
    .gpa-tool3-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .gpa-tool3-card {
    border-radius: 16px;
    padding: 20px 18px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.25s ease, box-shadow 0.3s ease;
  }

  .gpa-tool3-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  }

  .gpa-tool3-text-box h2 {
    margin: 0;
    font-size: 1.15rem;
	color:#ffffff;
  }

  .gpa-tool3-text-box span {
    font-size: 0.85rem;
    opacity: 0.9;
  }

  .gpa-tool3-icon {
    font-size: 1.6rem;
    opacity: 0.9;
  }

  /* 색상 */
  .gpa-tool3-blue { background: linear-gradient(135deg, #2a6ecf, #4b8df1); }
  .gpa-tool3-red { background: linear-gradient(135deg, #c23a3a, #e24e4e); }
  .gpa-tool3-green { background: linear-gradient(135deg, #4ba65a, #6ccf7d); }
  .gpa-tool3-purple { background: linear-gradient(135deg, #6b4fa1, #8a6fd6); }

  /* 아이콘 대신 emoji로 예시 */
  .gpa-tool3-blue .gpa-tool3-icon::before { content: "🔍"; }
  .gpa-tool3-red .gpa-tool3-icon::before { content: "🧭"; }
  .gpa-tool3-green .gpa-tool3-icon::before { content: "🔗"; }
  .gpa-tool3-purple .gpa-tool3-icon::before { content: "💡"; }

  .gpa-tool4-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .gpa-tool4-test-card {
    display: flex;
    align-items: center;
    border-radius: 40px;
    padding: 16px 18px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transition: transform 0.25s ease, box-shadow 0.3s ease;
  }

  .gpa-tool4-test-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
  }

  .gpa-tool4-circle {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 14px;
    font-size: 1.1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  }

  .gpa-tool4-text-box {
    color: #333;
    font-size: 0.95rem;
    font-weight: 500;
  }

  .gpa-tool4-text-box strong {
    color: #000;
  }

  /* 각 카드 색상 */
  .gpa-tool4-test1 { background: #dce1f7; }
  .gpa-tool4-test2 { background: #b9f4eb; }
  .gpa-tool4-test3 { background: #f6f6b4; }
  .gpa-tool4-test4 { background: #c7d3fa; }

  /* 원형 번호 색상 */
  .gpa-tool4-test1 .gpa-tool4-circle { color: #c03b3b; }
  .gpa-tool4-test2 .gpa-tool4-circle { color: #13a273; }
  .gpa-tool4-test3 .gpa-tool4-circle { color: #b8860b; }
  .gpa-tool4-test4 .gpa-tool4-circle { color: #4444c4; }

  /* 모바일 반응형 */
    .gpa-tool4-test-card {
      padding: 14px 16px;
      border-radius: 20px;
    }
    .gpa-tool4-circle {
      width: 36px;
      height: 36px;
      font-size: 1rem;
      margin-right: 12px;
    }
   #intro{ display:none; }
   #intro.active { display:block; }
   #tools{ display:none; }
   #tools.active { display:block; }
   #method{ display:none; }
   #method.active { display:block; }
   #cost{ display:none; }
   #cost.active { display:block; }
   
.kakaoBtn {
    width: 100%;
    padding: 0;
    border: none;
    background: none;
}

.kakaoBtn img {
    width: 100%;
    height: auto;
    display: block;
	max-width:480px;
}
/* 버튼 그룹 */
.mButtonGroup {
    display: flex;
    gap: 12px; /* 버튼 간격 */
    margin-top: 20px;
}

/* 로그인 버튼 */
.btnWStrong {
    flex: 1;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 12px 0;
    font-size: 16px;
    transition: background 0.3s;
}
.btnWStrong:hover {
    background: linear-gradient(135deg, #2563eb, #1e40af);
}

/* 회원가입 버튼 */
.btnOutline {
    flex: 1;
    background: #fff;
    color: #3b82f6;
    border: 2px solid #3b82f6;
    border-radius: 8px;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.3s;
}
.btnOutline:hover {
    background: #3b82f6;
    color: #fff;
}

/* 카카오 버튼 */
.kakaoButtonWrap {
    margin-top: 20px;
    text-align: center;
}
.kakaoBtn img {
    width: 100%;
    border-radius: 8px;
}
/* 카카오 버튼 전체 폭 차지 */
.kakaoFullBtn {
    display: flex;
    margin-top: 12px; /* 버튼 간격 */
}

.kakaoFullBtn .kakaoBtn {
    flex: 1; /* 두 칸 전체 폭 차지 */
    padding: 0;
    border: none;
    background: none;
}

.kakaoFullBtn .kakaoBtn img {
    width: 100%;
    border-radius: 8px;
}