@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2022-03-14
******************************************************** */

/* ******************  서브공통 ********************** */

/* -------- 공통 스크롤바  -------- */

.custom-scrollbar-cover,
.cm-scroll-drag-guide {
   display: none;
}

/* -------- 공통 :: 탭 -------- */

/* Tab 공통 스타일 */

.sub-tab-wrapper-style {
   position: relative;
   height: 60px;
   margin-bottom: 15px;
   z-index: 10;
}

.sub-tab-list-style ul {
   display: table;
   width: 100%;
   height: 100%;
   table-layout: fixed;
}

.sub-tab-list-style ul.max-width-1400 {
   max-width: 1400px;
}

.sub-tab-list-style ul:after {
   display: none
}

.sub-tab-list-style ul li {
   /* float:left; */
   display: table-cell;
   vertical-align: middle;
   position: relative;
   width: 20%;
   background-color: #fff;
   border: 1px solid #e5e5e5;
   border-left: 0
}

.sub-tab-list-style ul li:first-child {
   border-left: 1px solid #e5e5e5;
}

.sub-tab-list-style ul li a {
   display: table;
   height: 58px;
   width: 100%;
}

.sub-tab-list-style ul li a em {
   display: table-cell;
   vertical-align: middle;
   color: #494949;
   font-size: 18px;
   letter-spacing: -0.30px;
   text-align: center;
}

.sub-tab-list-style ul li.selected {
   z-index: 1;
   background-color: #333;
   border-color: #333;
}

.sub-tab-list-style ul li.selected a em {
   color: #fff;
}

/* Tab Fixed Move*/

.sub-tab-list-style.top-fixed {
   position: fixed;
   top: 70px;
   left: 50%;
   width: calc(100% - var(--area-padding) * 2);
   height: 60px;
   transform: translateX(-50%);
}

/* Mobile Tab Drop Menu */

.sub-drop-open-btn-style {
   display: none
}

@media all and (min-width:1025px) {

   /* Tab Fixed Background */
   .sub-tab-list-style:before {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 50%;
      width: 0;
      content: "";
      background-color: #fff;
      border-bottom: 1px solid #e5e5e5;
      transition: all 0.5s
   }

   .sub-tab-list-style.top-fixed:before {
      width: 100%;
      margin-left: -50%
   }
}

/* ******************  커스텀01 탭 ********************** */

.sub-tab-wrapper-style.custom-style01 {
   height: 60px;
}

.custom-style01 .sub-tab-list-style {
   position: relative;
   z-index: 999;
   height: 0;
}

.custom-style01 .sub-tab-list-style.top-fixed {
   position: fixed;
}

.custom-style01 .sub-tab-list-style::before {
   display: none;
}

.custom-style01 .sub-tab-list-style ul {
   border-radius: 3.1rem;
   background-color: #132a3c;
   padding: 0.6rem 0.8rem;
   box-sizing: border-box;
   width: auto;
   margin: 0 auto;
}

.custom-style01 .sub-tab-list-style ul li {
   background-color: transparent;
   border: none;
   min-width: 20rem;
   width: auto;
   border-radius: 2.45rem;
   transition: background 0.3s;
}

.custom-style01 .sub-tab-list-style ul li a {
   height: 5rem;
}

.custom-style01 .sub-tab-list-style ul li a em {
   color: #fff;
   text-shadow: 62px 62px 50px rgba(0, 176, 199, 0.15);
   /* text-transform: uppercase; */
   font-size: 1.6rem;
   line-height: 1.25em;
   font-weight: 700;
   letter-spacing: -0.015em;
   color: rgba(255, 255, 255, 0.8);
}

.custom-style01 .sub-tab-list-style ul li.selected {
   background-color: var(--main-color);
}

.custom-style01 .sub-tab-list-style ul li.selected a {}

/* ******************  커스텀01 탭 밝은 버전 ********************** */

.sub-tab-wrapper-style.light-ver .sub-tab-list-style ul {
   background-color: rgba(19, 42, 60, 0.05);
}

.sub-tab-wrapper-style.light-ver .sub-tab-list-style ul li a em {
   color: #132a3c;
}

.sub-tab-wrapper-style.light-ver .sub-tab-list-style ul li.selected {
   box-shadow: 0 0 4rem 3.1rem rgba(0, 176, 199, 0.15);
}

.sub-tab-wrapper-style.light-ver .sub-tab-list-style ul li.selected a em {
   color: #fff;
}

/* ******************  커스텀02 탭 ********************** */

.sub-tab-wrapper-style.custom-style02 {
   width: 24.652%;
   height: auto;
   padding-right: 5%;
}

.sub-tab-wrapper-style.custom-style02 .sub-tab-list-style {
   position: sticky;
   top: 10rem;
   max-width: 35rem;
}

.sub-tab-wrapper-style.custom-style02 .sub-tab-list-style ul {
   display: block;
}

.sub-tab-wrapper-style.custom-style02 .sub-tab-list-style ul li {
   display: block;
   width: 100%;
   background-color: transparent;
   border: none;
   padding: 0 3rem;
   box-sizing: border-box;
}

.sub-tab-wrapper-style.custom-style02 .sub-tab-list-style ul li a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 7.5rem;
}

.sub-tab-wrapper-style.custom-style02 .sub-tab-list-style ul li em {
   text-align: left;
   font-size: 2rem;
   font-weight: 500;
   letter-spacing: -0.025em;
   line-height: 1.4em;
   color: #435665;
}

.sub-tab-wrapper-style.custom-style02 .sub-tab-list-style ul li i {
   font-size: 3rem;
   color: var(--main-color);
   transform: rotateZ(45deg);
}

.sub-tab-wrapper-style.custom-style02 .sub-tab-list-style ul li.selected {
   background-color: #0d2837;
   border-radius: 1.5rem;
}

.sub-tab-wrapper-style.custom-style02 .sub-tab-list-style ul li.selected em {
   color: #fff;
}

/* ******************  흐르는 텍스트 ********************** */

.marquee {
   position: relative;
   width: 200vw;
   height: 18rem;
   overflow-x: hidden;
   margin-top: 7.8rem;
}

.track {
   position: absolute;
   white-space: nowrap;
   will-change: transform;
   animation: marquee 25s linear infinite;
   z-index: 0;
}

.marquee .content {
   font-size: 16rem;
   letter-spacing: -0.015em;
   font-weight: 700;
   color: #132a3c;
}

@keyframes marquee {
   from {
      transform: translateX(0%);
   }

   to {
      transform: translateX(-50%);
   }
}

/* ******************  Applications ********************** */

.applications-content {
   padding-bottom: 9.5rem;
}

.app-list-box {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 12rem 2.4rem;
}

.app-list-box .app-list {
   transition: var(--transition-custom);
   transition-property: opacity;
}

.app-list-box .app-list .img-box {
   position: relative;
   height: 0;
   padding-top: 100%;
   border-radius: 1.5rem;
   overflow: hidden;
}

.app-list-box .app-list img {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   max-width: 100%;
   max-height: 100%;
}

.app-list-box .app-list p {
   padding-top: 4.5rem;
   font-size: 2.4rem;
   font-weight: 500;
   letter-spacing: -0.015em;
   color: #fff;
   text-align: center;
}

@media all and (min-width: 801px) {
   .app-list-box:hover .app-list {
      opacity: 0.25;
   }

   .app-list-box:hover .app-list:hover {
      opacity: 1;
   }
}

/***** 팝업 *****/

.app-modal-content {
   min-height: 100vh;
   padding: 8rem 0 13.5rem 0;
   background: center / cover no-repeat url("/images/content/app_pop_bg.jpg");
}

.app-modal-content .area {
   position: relative;
   height: 100%;
}

.app-modal-content h1 {
   width: 100%;
   padding-bottom: 2.6rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   font-size: 5.5rem;
   font-weight: 700;
   letter-spacing: -0.035em;
   line-height: 1.54em;
   color: #fff;
   text-align: center;
}

.app-pop-inner-box {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   padding-top: 8rem;
   box-sizing: border-box;
}

.app-pop-inner-box .app-pop-inner {
   padding-top: 4.2rem;
}

.app-pop-inner-box .app-pop-list-txt {
   text-align: center;
   font-size: 1.9rem;
   font-weight: 400;
   letter-spacing: -0.035em;
   line-height: 1.84em;
   color: #fff;
}

.pop-img-list-box {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 4rem;
   margin-top: 9rem;
}

.pop-img-list-box figure {
   border-radius: 1.5rem;
   overflow: hidden;
}

.pop-img-list-box img {
   max-width: 100%;
}

.app-pop-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 24.2rem;
   height: 6.3rem;
   margin: 10.5rem auto 0;
   border-radius: 3.1rem;
   background-color: var(--main-color);
   box-shadow: 0 0 6.2rem 3rem rgba(0, 176, 199, 0.3);
   font-size: 1.6rem;
   font-weight: 700;
   letter-spacing: -0.015em;
   color: #fff;
}

/* ******************  Product :: list ********************** */

/***** 공통 *****/

.product-list-content {
   padding-top: 9rem;
}

.prd-list-inner-wrap {
   position: relative;
}

.prd-list-top-box {
   margin-bottom: 12.7rem;
}

.prd-list-top-box p {
   padding-top: 1.5rem;
   font-size: 1.7rem;
   font-weight: 400;
   letter-spacing: -0.035em;
   line-height: 1.82em;
   color: rgba(255, 255, 255, 0.7);
}

.serial-num-box {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-width: 12rem;
   max-width: 12rem;
   min-height: 12rem;
   max-height: 12rem;
   padding: 2.7rem 0.5rem 2.479rem 0.5rem;
   background-color: #212222;
   border-radius: 0.5rem;
   box-sizing: border-box;
}

/* .serial-num-box.height-160 {min-height: 16rem; max-height: 16rem;} */

.serial-num-box::before {
   position: absolute;
   top: 1rem;
   left: 1rem;
   content: "";
   width: 0.6rem;
   height: 0.6rem;
   border-radius: 50%;
   background-color: #fff;
}

.serial-num-box img {
   max-width: 100%;
}

.serial-num-box .serial-txt01 {
   padding-top: 0.9rem;
   font-size: 1.4rem;
   font-weight: 600;
   letter-spacing: -0.015em;
   line-height: 1.2em;
   color: #fff;
   text-align: center;
   word-break: break-word;
   text-overflow: ellipsis;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
}

.serial-num-box .serial-txt02 {
   padding-top: 0.9rem;
   font-size: 1rem;
   font-weight: 400;
   letter-spacing: -0.005em;
   line-height: 1.2em;
   color: rgba(255, 255, 255, 0.6);
   text-align: center;
   word-break: break-word;
   text-overflow: ellipsis;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
}

.prd-category {
   display: inline-block;
   padding: 0.4rem 2.25rem;
   border: 2px solid var(--main-color);
   border-radius: 1.85rem;
   font-size: 1.9rem;
   font-weight: 600;
   letter-spacing: -0.035em;
   color: #00a9bf;
   box-sizing: border-box;
}

.product-list-content {
   display: flex;
   padding-bottom: 5rem;
}

.product-list-content .prd-list-con {
   width: 61.047%;
   padding-right: 9.302%;
}

.product-list-content .prd-list-con .prd-list-inner {
   margin-top: 5.5rem;
}

.product-list-content .prd-list-con .prd-list-inner:first-child {
   margin-top: 0;
}

.product-list-content .bbs-top-list-box {
   position: absolute;
   right: 0;
   top: -2.5rem;
   align-items: center;
}

.product-list-content .prd-con-tit {
   display: flex;
   align-items: center;
   font-size: 4.4rem;
   font-weight: 700;
   letter-spacing: -0.015em;
   line-height: 1.4em;
   color: #fff;
}

.product-list-content .prd-con-tit img {
   padding-right: 2.5rem;
}

/* .prd-list-inner {padding-top: 5rem;} */

.prd-list-inner:last-child .prd-list-box {
   border-bottom: none;
}

.prd-list-box {
   display: grid;
   grid-template-columns: repeat(3, calc(33.334% - 2rem));
   grid-gap: 3rem;
   border-bottom: 1px solid rgba(238, 238, 238, 0.1);
   padding-bottom: 5.5rem;
   margin-top: 3rem;
}

.prd-list-box .prd-list {
   background-color: #fff;
   border-radius: 2rem;
   min-height: 41.6rem;
}

.prd-list-box .prd-list a {
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   padding: 6rem 4rem 5.2rem 4rem;
   text-align: center;
   box-sizing: border-box;
   border-radius: 2rem;
   transition: var(--transition-custom);
}

.prd-list-box .prd-list .txt-box {
   margin-top: 4.7rem;
}

.prd-list-box .prd-list .prd-list-tit {
   font-size: 2.5rem;
   font-weight: 700;
   letter-spacing: -0.035em;
   line-height: 1.2em;
   color: #111;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   transition: var(--transition-custom)
}

.prd-list-box .prd-list .prd-list-txt {
   padding-top: 2.4rem;
   font-size: 1.65rem;
   font-weight: 400;
   letter-spacing: -0.015em;
   line-height: 1.69em;
   color: #666;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   transition: var(--transition-custom)
}

.prd-list-box .prd-list a:hover {
   background-color: var(--main-color);
}

.prd-list-box .prd-list a:hover .prd-list-tit,
.prd-list-box .prd-list a:hover .prd-list-txt {
   color: #fff;
}

/* ******************  Product :: view ********************** */

.product-view-content {
   position: relative;
   padding-top: 7rem;
}

.product-view-content>.area {
   position: relative;
   z-index: 1;
}

.product-view-content::before {
   position: absolute;
   content: "";
   left: 0;
   top: -17rem;
   width: 100%;
   height: 118.7rem;
   background: center / cover no-repeat url("/images/content/prd_view_bg.png");
   pointer-events: none;
}

.prd-view-location {
   display: flex;
   margin-bottom: 7.5rem;
}

.prd-view-location li {
   font-size: 1.9rem;
   font-weight: 500;
   letter-spacing: -0.015em;
   line-height: 1.63em;
   color: #959595;
}

.prd-view-location li.selected {
   color: var(--main-color);
}

.prd-view-location li i {
   padding: 0 1rem;
   font-size: 1.2rem;
   color: rgba(255, 255, 255, 0.25);
}

.prd-view-top-con {
   position: relative;
   display: flex;
   align-items: center;
   margin-bottom: 19rem;
}

.prd-view-top-con .thumb-box {
   width: 24.5%;
   background-color: #fff;
   padding: 6.7rem;
   box-sizing: border-box;
   border-radius: 2rem;
}

.prd-view-top-con .txt-box {
   width: calc(75.5% - 7rem);
   padding-left: 7rem;
}

.prd-view-top-con .serial-num-box {
   max-width: none;
   max-height: none;
   padding-top: 0rem;
   padding-bottom: 0rem;
   min-width: 21rem;
   min-height: 21rem;
}

.prd-view-top-con .serial-num-box .serial-txt01 {
   font-size: 2.4rem;
   padding-top: 1.6rem;
   text-overflow: initial;
   overflow: visible;
   display: block;
}

.prd-view-top-con .serial-num-box .serial-txt02 {
   font-size: 1.8rem;
   padding-top: 1.461rem;
}

.prd-view-top-con .txt-box .prd-category {
   margin-bottom: 0;
}

.prd-view-top-con .txt-box .tit {
   display: flex;
   align-items: center;
}

.prd-view-top-con .view-top-tit {
   padding-left: 3rem;
   font-size: 4.4rem;
   font-weight: 700;
   letter-spacing: -0.015em;
   color: #fff;
}

.prd-view-top-con .view-top-txt {
   padding-top: 3.7rem;
   font-size: 1.9rem;
   font-weight: 400;
   line-height: 1.85em;
   color: rgba(255, 255, 255, 0.8);
}

.product-view-content .sub-tab-content-style {
   padding-top: 7rem;
}

.prd-cm-flex-con {
   display: flex;
   padding: 9.5rem 0;
   border-bottom: 1px solid rgba(238, 238, 238, 0.1);
}

.product-view-content #fixedContentM3 .prd-cm-flex-con {
   border-bottom: none;
}

.prd-cm-flex-con .view-cm-tit {
   width: 21.429%;
   padding-right: 5%;
   font-size: 3.5rem;
   font-weight: 700;
   letter-spacing: -0.025em;
   line-height: 1.2em;
   color: #fff;
}

.prd-cm-flex-con .view-cm-content-wrap {
   width: 73.572%;
}

.view-table-box table {
   width: 100%;
   border-top: 2px solid rgba(255, 255, 255, 0.8);
   border-bottom: 2px solid rgba(255, 255, 255, 0.8);
}

.view-table-box table td {
   position: relative;
   border-bottom: 1px solid rgba(238, 238, 238, 0.15);
   font-size: 1.8rem;
   letter-spacing: -0.015em;
   line-height: 1.5em;
}

.view-table-box table tr:last-child td {
   border-bottom: none;
}

.view-table-box table td:first-child {
   padding: 1.825rem 0 1.825rem 3rem;
   font-weight: 500;
   color: var(--main-color);
}

.view-table-box table td:last-child {
   padding: 1.825rem 3rem;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.9);
}

.view-table-box table td:last-child::before {
   position: absolute;
   content: "";
   left: 0;
   top: 3rem;
   width: 0.4rem;
   height: 0.4rem;
   background-color: #019aaf;
}

.view-cm-content-wrap .editor p {
   font-size: 1.8rem;
   line-height: 2em;
   color: rgba(255, 255, 255, 0.9);
}

.view-cm-content-wrap .editor p.bold {
   font-weight: 600;
}

.view-cm-content-wrap .editor p.light {
   font-weight: 300;
}

.view-app-list-box {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 1.933rem;
}

.view-app-list-box .img-box {
   border-radius: 1.5rem;
   overflow: hidden;
}

.view-app-list-box img {
   max-width: 100%;
}

.view-app-list-box .view-app-list p {
   padding-top: 2rem;
   font-size: 1.8rem;
   font-weight: 500;
   letter-spacing: -0.015em;
   line-height: 1.5em;
   color: #fff;
   text-align: center;
}

.product-view-content .contact-form-con {
   margin-top: 0;
}

/* ******************  About :: CEO 인사말 ********************** */

.ceo-content {
   padding: 7.7rem 0 2rem;
}

.ceo-content .inner-box {
   display: flex;
   flex-direction: row-reverse;
   align-items: flex-start;
}

.ceo-content .inner-box .txt-box {
   width: 52.151%;
   padding-right: 5%;
   padding-top: 5rem;
}

.ceo-content .inner-box .txt-box .inner {
   padding-top: 3.8rem;
}

.ceo-content .inner-box .txt-box .tit {
   display: inline-block;
   font-size: 5rem;
   letter-spacing: -0.035em;
   line-height: 1.3em;
   color: #fff;
   font-weight: 600;
   padding-bottom: 3.7rem;
}

.ceo-content .inner-box .txt-box .tit span {
   font-weight: 700;
   color: var(--main-color);
}

.ceo-content .inner-box .txt-box p {
   font-size: 1.8rem;
   letter-spacing: -0.035em;
   color: rgba(255, 255, 255, 0.85);
   line-height: 1.88em;
}

.ceo-content .inner-box .txt-box .txtBold {
   position: relative;
   font-size: 2.4rem;
   letter-spacing: -0.035em;
   color: #fff;
   line-height: 1.41em;
   font-weight: 500;
}

.ceo-content .inner-box .img-box {
   width: 36.429%;
   padding-right: 6.42%
}

.ceo-content .inner-box .img-box img {
   max-width: 100%;
}

.ceo-content .sign-box {
   margin-top: 5.3rem;
}

.ceo-content .sign-box span {
   display: inline-block;
   font-size: 2.2rem;
   font-weight: 500;
   letter-spacing: -0.035em;
   color: #fff;
   vertical-align: super;
}

.ceo-content .sign-box b {
   display: inline-block;
   font-size: 3.45rem;
   font-weight: 700;
   letter-spacing: -0.035em;
   color: #fff;
   margin-left: 2.8rem;
}

/* ******************  About :: 연혁 ********************** */

.history-content {
   position: relative;
   padding-bottom: 30rem;
}

.history-content::before {
   position: absolute;
   content: "";
   width: 100%;
   height: 121.8rem;
   top: 5.2rem;
   left: 0;
   background: center / cover no-repeat url("/images/content/history_bg.png");
   pointer-events: none;
}

.sub-top-txt {
   position: relative;
   z-index: 1;
   margin-top: -4rem;
   font-size: 4.7rem;
   font-weight: 600;
   letter-spacing: -0.035em;
   line-height: 1.5em;
   color: #fff;
   text-align: center;
}

.sub-top-txt span {
   color: #00b0c7;
}

.history-con {
   position: relative;
   margin-top: 42rem;
}

.history-percent-bar {
   position: absolute;
   top: 2rem;
   top: 50%;
   left: 50%;
   border-radius: 2px;
   margin-left: -0.2rem;
   width: 1px;
   height: calc(100% + 28rem);
   background: #1f3f57;
   transform: translateY(-50%)
}

.history-percent-bar .percent-bar-child {
   position: absolute;
   content: "";
   width: 100%;
   height: 0;
   background-color: var(--main-color);
   z-index: 1;
   border-radius: 2px 2px 0 0;
   /* transition: all 0.3s; */
}

.percent-bar-child .point {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   bottom: -2rem;
   left: calc(50% - 2.2rem);
   content: "";
   z-index: 10;
   width: 4.4rem;
   height: 4.4rem;
   border-radius: 4.4rem;
   background-color: rgba(0, 176, 199, 0.1);
   box-shadow: 0.5rem 0.5rem 2.5rem rgba(172, 0, 33, 0.1);
}

.percent-bar-child .point .point-dot {
   width: 0.7rem;
   height: 0.7rem;
   border-radius: 50%;
   background-color: var(--main-color);
}

.history-year-group-box {
   position: relative;
   display: flex;
   padding-bottom: 21.2rem;
}

.history-year-group-box:last-of-type {
   padding-bottom: 0;
}

.history-year-group-box .history-year-group-tit-box {
   width: 50%;
   padding-right: 10rem;
   box-sizing: border-box;
   text-align: left;
}

.history-year-group-box .history-year-group-tit {
   padding-top: 1.5rem;
   font-size: 6rem;
   font-weight: 700;
   letter-spacing: -0.02em;
   color: #fff;
   line-height: 1.1;
   transition: all 0.3s;
}

.history-year-group-box.active .history-year-group-tit {
   color: var(--main-color);
}

.history-year-group-box .history-year-list-box {
   width: 50%;
   padding: 2rem 0 0 10rem;
   box-sizing: border-box;
}

.history-year-group-box .history-year-item {
   margin-bottom: 5rem;
}

.history-year-group-box .history-year-item:last-of-type {
   margin-bottom: 0;
}

.history-year-group-box .history-year-item .history-year {
   display: block;
   padding-bottom: 3.2rem;
}

.history-year-group-box .history-year-item .history-year strong {
   font-size: 3rem;
   font-weight: 700;
   letter-spacing: -0.02em;
   color: var(--main-color);
   line-height: 1.2;
}

.history-year-group-box .history-img {
   margin-top: 5.3rem;
   border-radius: 2rem;
   overflow: hidden;
}

.history-year-group-box .history-img img {
   max-width: 100%;
}

.history-year-group-box .point-txt {
   font-size: 2.1rem;
   font-weight: 600;
   letter-spacing: -0.005em;
   color: var(--main-color);
}

.history-year-group-box .history-item-txt {
   padding-top: 4rem;
   font-size: 3rem;
   font-weight: 500;
   line-height: 1.7em;
   letter-spacing: -0.035em;
   color: #fff;
}

.history-year-group-box .history-year-item .history-month-box {
   width: calc(100% - 11.5rem);
}

.history-year-group-box .history-year-item .history-month-item {
   display: flex;
   margin-bottom: 0.6rem;
}

.history-year-group-box .history-year-item .history-month-item:last-child {
   margin-bottom: 0;
}

.history-year-group-box .history-year-item .history-month-item .history-month {
   width: 4rem;
   font-size: 1.8rem;
   line-height: 1.6em;
   font-weight: 600;
   letter-spacing: -0.02em;
   color: #fff;
   padding-right: 1rem;
   box-sizing: border-box;
}

.history-year-group-box .history-year-item .history-month-item .history-detail-txt-con {
   width: calc(100% - 4rem);
}

.history-year-group-box .history-year-item .history-month-item .history-detail-txt {
   font-size: 1.7rem;
   font-weight: 400;
   letter-spacing: -0.02em;
   line-height: 1.7em;
   color: rgba(255, 255, 255, 0.65);
}

/* ******************  About :: CI ********************** */

.ci-content-con {
   padding-top: 13.7rem;
}

.ci-content {
   padding-bottom: 12rem;
}

.ci-content-tit {
   font-size: 2.7rem;
   font-weight: 500;
   letter-spacing: -0.035em;
   line-height: 1.5em;
   color: #fff;
   text-align: center;
}

.ci-content-tit span {
   color: var(--main-color);
}

.cm-con-tit {
   margin-bottom: 3.7rem;
   font-size: 4rem;
   font-weight: 700;
   letter-spacing: -0.035em;
   line-height: 1.5em;
   color: #fff;
}

.ci-active-list-box {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 3.75rem;
   margin-top: 18.5rem;
}

.ci-active-list-box .ci-active-list {
   height: 46rem;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border: 1px solid #11607b;
   border-radius: 3rem;
   box-sizing: border-box;
   transition: var(--transition-custom);
}

.ci-active-list-box .ci-active-list:nth-child(even) {
   top: 10rem;
}

.ci-active-list-box .ci-active-list figure {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}

.ci-active-list-box .ci-active-list figure img {
   max-width: 100%;
   transition: var(--transition-custom);
}

.ci-active-list-box .ci-active-list figure .active-img {
   position: absolute;
   content: "";
   left: 50%;
   top: 50%;
   opacity: 0;
   visibility: hidden;
   transform: translate(calc(-50% + 0.3px), calc(-50% + 0.3px));
}

.ci-active-list-box .ci-active-list p {
   margin-top: 7rem;
   font-size: 2.6rem;
   font-weight: 600;
   letter-spacing: -0.015em;
   line-height: 1.5em;
   color: #fff;
}

.ci-active-list-box .ci-active-list.active {
   background-color: var(--main-color);
}

.ci-active-list-box .ci-active-list.active figure .active-img {
   opacity: 1;
   visibility: visible;
}

.ci-top-banner-con {
   position: relative;
   width: 100%;
   height: 0;
   margin-top: 28.5rem;
   padding-top: 26.9211%;
   background: center / cover no-repeat url("/images/content/ci_top_banner_bg.jpg");
}

.ci-top-banner-con figure {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.ci-top-banner-con figure img {
   max-width: 100%;
}

.ci-down-btn-box {
   display: flex;
   justify-content: center;
   gap: 2.5rem;
   margin-top: 8rem;
}

.ci-down-btn-box.mt-40 {
   margin-top: 4rem;
}

.ci-down-btn-box .ci-down-btn {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 24.5rem;
   padding: 2rem 1.5rem 2rem 1.2rem;
   border-bottom: 2px solid rgba(17, 96, 123, 0.8);
}

.ci-down-btn-box .ci-down-btn em {
   font-size: 1.9rem;
   font-weight: 500;
   line-height: 1.5em;
   letter-spacing: -0.015em;
   color: #fff;
}

.ci-down-btn-box .ci-down-btn i {
   font-size: 3rem;
   color: var(--main-color);
   transform: rotateZ(45deg);
}

.ci-down-btn-box .ci-down-btn.blue-ver {
   width: 20.5rem;
   border-bottom-color: rgba(0, 176, 199, 0.8);
   box-sizing: border-box;
}

.ci-down-btn-box .ci-down-btn.blue-ver em {
   color: var(--main-color);
}

.ci-down-btn-box .ci-down-btn.width-auto {
   width: auto !important;
}

.ci-down-btn-box .ci-down-btn.width-auto em {
   padding-right: 4.3rem;
}

.ci-cm-sign-wrapper {
   margin-top: 4rem;
}

.cm-sign-list-box {
   background-color: #fff;
   border-radius: 2rem;
}

.cm-sign-list-box .cm-sign-list {
   display: flex;
   align-items: center;
   justify-content: center;
}

.cm-sign-list-box .cm-sign-list figure {
   display: flex;
   align-items: center;
   justify-content: center;
}

.cm-sign-list-box .cm-sign-list img {
   max-width: 100%;
}

.ci-sign-tit-box {
   display: flex;
   justify-content: center;
   margin-top: 4rem;
}

.ci-sign-tit-box p {
   font-size: 2.6rem;
   font-weight: 600;
   letter-spacing: -0.015em;
   line-height: 1.5em;
   color: #fff;
   text-align: center;
}

/*** 로고 3개일 때 ***/

.cm-sign-list-box.threeItem {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   padding: 4rem;
   box-sizing: border-box;
}

.cm-sign-list-box.threeItem .cm-sign-list {
   border-right: 1px solid rgba(9, 25, 37, 0.08);
   padding: 7.2rem 0;
}

.cm-sign-list-box.threeItem .cm-sign-list:last-child {
   border-right: none;
}

/*** 로고 4개일 때 ***/

.cm-sign-list-box.fourItem {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 2.5rem 0;
   padding: 5.3rem 0;
}

.cm-sign-list-box .cm-sign-list figure.gray-bg {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   max-width: 56.2rem;
   background-color: #fafafa;
   border-radius: 1rem;
   padding: 1.1rem 0;
}

.cm-sign-list-box .cm-sign-list figure.gray-bg p {
   padding-left: 5rem;
   font-size: 1.7rem;
   font-weight: 400;
   letter-spacing: -0.035em;
   line-height: 1.4em;
   color: #222;
}

.cm-sign-list-box .cm-sign-list figure.gray-bg p span {
   position: relative;
   margin-right: 0;
   top: -0.5rem;
   font-size: 1.7rem;
}

/*** 로고 하단 텍스트 3개일 때 ***/

.ci-sign-tit-box.threeItem {
   padding: 0 4rem;
}

.ci-sign-tit-box.threeItem p {
   width: 33.333%;
}

/*** 로고 하단 텍스트 2개일 때 ***/

.ci-sign-tit-box.twoItem p {
   width: 50%;
}

.ci-size-list-box {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 0 18.2rem;
   background-color: #16222c;
   border-radius: 2rem;
   padding: 6.15rem 9.5rem;
}

.ci-size-list-box .ci-size-list {
   display: flex;
   align-items: center;
   justify-content: center;
}

.ci-size-list-box .ci-size-list img {
   max-width: 100%;
}

.ci-color-list-box {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 4.8rem 7.2rem;
}

.ci-color-list-box .ci-color-list {
   position: relative;
}

.ci-color-list-box .ci-color-list::before {
   position: absolute;
   top: -3.4rem;
   left: -3.4rem;
   content: "";
   width: 6.8rem;
   height: 6.8rem;
   background: center / cover no-repeat url("/images/content/ci_color_rhombus.png");
}

.ci-color-list-box .ci-color-list::after {
   position: absolute;
   bottom: -3.4rem;
   right: -3.4rem;
   content: "";
   width: 6.8rem;
   height: 6.8rem;
   background: center / cover no-repeat url("/images/content/ci_color_rhombus.png");
}

.ci-color-list-box .ci-color-list:first-child {
   background-color: #01032c;
   padding: 6rem 6rem 3rem 6rem;
}

.ci-color-list-box .ci-color-list:nth-child(2) {
   background-color: #01a8bb;
   padding: 6rem 6rem 3rem 6rem;
}

.ci-color-list-box .ci-color-list:nth-child(3) {
   background-color: #bcbdc1;
   padding: 6rem 6rem 5.6rem 6rem;
}

.ci-color-list-box .ci-color-list:last-child {
   background-color: #ae9c74;
   padding: 6rem 6rem 5.6rem 6rem;
}

.ci-color-list-box .ci-color-list .color-top-tit {
   padding-bottom: 0.7rem;
   font-size: 2.6rem;
   font-weight: 600;
   letter-spacing: -0.015em;
   line-height: 1.15em;
   color: #fff;
}

.ci-color-list-box .ci-color-list .color-top-list-box {
   display: flex;
   align-items: center;
   gap: 0 3.5rem;
}

.ci-color-list-box .ci-color-list .color-top-list:first-child {
   font-size: 1.9rem;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.7);
}

.ci-color-list-box .ci-color-list .color-top-list {
   font-size: 1.5rem;
   font-weight: 400;
   line-height: 1.5em;
   color: rgba(255, 255, 255, 0.5);
}

.ci-color-list-box .ci-color-list .color-top-list span {
   display: inline-block;
   padding-right: 1.5rem;
}

.ci-color-list-box .ci-color-list .color-bt-box {
   margin-top: 6rem;
   padding-top: 3.2rem;
   border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.ci-color-list-box .ci-color-list .color-bt-box p {
   font-size: 1.7rem;
   font-weight: 400;
   letter-spacing: -0.025em;
   line-height: 1.75em;
   color: rgba(255, 255, 255, 0.9);
}

/* ******************  About :: Vision ********************** */

.vision-content {
   position: relative;
   padding-bottom: 7.5rem;
}

.vision-content::before {
   position: absolute;
   content: "";
   top: 10rem;
   left: 0;
   width: 100%;
   height: 84rem;
   background: center / cover no-repeat url("/images/content/vision_top_bg.png");
   z-index: 0;
}

.vision-top-logo-box {
   position: relative;
   z-index: 1;
   padding-top: 26rem;
   padding-bottom: 10rem;
}

.vision-top-logo-box figure {
   display: flex;
   align-items: center;
   justify-content: center;
}

.vision-top-logo-box img {
   max-width: 100%;
}

.vision-top-logo-box .txt-box {
   max-width: 115rem;
   margin: 0 auto;
   margin-top: -10.5rem;
}

.vision-top-logo-box p {
   padding-left: 1rem;
   font-size: 2.4rem;
   font-weight: 600;
   letter-spacing: -0.005em;
   color: #fff;
}

.vision-top-logo-box h4 {
   font-size: 13rem;
   font-weight: 500;
   letter-spacing: -0.003em;
   color: #fff;
}

.main-partners-wrap {
   position: relative;
   height: 21rem;
   margin-top: 11.7rem;
}

.main-partners-wrap+.main-partners-wrap {
   margin-top: 5rem;
}

.main-partners-roller {
   position: absolute;
   height: 100%;
   display: flex;
   white-space: nowrap;
}

/* .main-partners-roller.right{transform: translateX(-100%);} */

.main-partners-list {
   position: relative;
   height: 100%;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   gap: 0 1.8rem;
}

.main-partners-list .partner-item {
   position: relative;
   width: 21rem;
   height: 0;
   padding-top: 21rem;
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
}

.main-partners-list .partner-item-inner {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #fff;
   overflow: hidden;
   border-radius: 1.5rem;
}

.main-partners-list .partner-item-inner span {
   position: relative;
   width: 100%;
   height: 100%;
   display: block;
   transition: all 0.4s;
}

.main-partners-list .partner-item-inner span img {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
   width: 100%;
   height: 100%;
}

.vision-content #mainPowerCon {
   padding-top: 23.4rem;
   padding-bottom: 0;
}

.vision-content .main-power-txt p {
   font-size: 2.5rem;
   margin-top: 1rem;
}

.vision-content .main-company-bg {
   padding-top: 26.7%;
}

.vision-content .main-company-bg figure {
   position: absolute;
   top: -84%;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
}

.vision-content .main-company-bg figure img {
   width: 100%;
}

#mainAppCon {
   padding: 12rem 0 22.5rem;
}

#mainAppCon .main-tit-box {
   text-align: center;
}

.vision-content .person-btn {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 24.5rem;
   height: 7rem;
   padding: 2rem 1.2rem;
   margin: 14rem auto 0;
   box-sizing: border-box;
   border-bottom: 2px solid rgba(17, 96, 123, 0.8);
   font-size: 1.9rem;
   font-weight: 500;
   letter-spacing: -0.025em;
   color: #fff;
}

.vision-content .person-btn i {
   font-size: 3rem;
   color: #00b0c7;
   transform: rotateZ(45deg)
}

.vision-accordion-list-box {
   display: flex;
   gap: 0 2.1rem;
   padding-top: 12rem;
}

.vision-accordion-list-box .accordion-list {
   position: relative;
   width: 13.05rem;
   height: 0;
   padding-top: 37.21%;
   overflow: hidden;
   transition: var(--transition-custom);
   cursor: pointer;
}

.vision-accordion-list-box .accordion-list figure {
   position: absolute;
   width: 111.4rem;
   height: 100%;
   top: 0;
   left: 0;
   overflow: hidden;
}

.vision-accordion-list-box .accordion-list img {
   max-width: 100%;
   max-height: 100%;
}

.vision-accordion-list-box .accordion-list p {
   position: absolute;
   right: 0;
   bottom: -1.8rem;
   width: 100%;
   text-align: right;
   font-size: 13rem;
   font-weight: 500;
   letter-spacing: -0.003em;
   color: #fff;
   padding-right: 8.5rem;
   box-sizing: border-box;
   opacity: 0;
   visibility: hidden;
   transition: var(--transition-custom);
}

.vision-accordion-list-box .accordion-list::before {
   position: absolute;
   content: "";
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 1;
   transition: var(--transition-custom);
}

.vision-accordion-list-box .accordion-list.active {
   width: 111.4rem;
}

.vision-accordion-list-box .accordion-list.active p {
   opacity: 1;
   visibility: visible;
}

.vision-accordion-list-box .accordion-list.active::before {
   opacity: 0;
   visibility: hidden;
}

/* ******************  About :: 특허 인증 ********************** */

.certification-content {
   position: relative;
   padding-bottom: 11.5rem;
}

.certification-content::before {
   position: absolute;
   content: "";
   width: 100%;
   height: 105.6rem;
   right: 0;
   top: 25rem;
   background: center / cover no-repeat url("/images/content/certifi_bg.png");
   z-index: 0;
   pointer-events: none;
}

.current-con {
   position: relative;
   z-index: 1;
   margin: 24rem auto 0;
   max-width: 82.7rem;
}

.current-con .current-date {
   text-align: right;
   font-size: 1.7rem;
   font-weight: 400;
   letter-spacing: -0.035em;
   color: rgba(255, 255, 255, 0.8);
   padding-bottom: 2.5rem;
}

.cm-active-list-box {
   display: grid;
   grid-template-columns: repeat(2, 38rem);
   justify-content: center;
   grid-gap: 3rem 6.7rem;
}

.cm-active-list-box .active-list {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: rgba(19, 42, 60, 0.85);
   max-width: 38rem;
   padding: 10.5rem 5rem 10rem 5rem;
   border-radius: 2rem;
   transition: var(--transition-custom)
}

.cm-active-list-box .active-list:first-child {
   top: -10.5rem;
}

.cm-active-list-box .active-list .icon-box {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 11.1rem;
   margin-bottom: 4rem;
}

.cm-active-list-box .active-list .icon-box img {
   max-width: 100%;
   transition: var(--transition-custom);
}

.cm-active-list-box .active-list .icon-box .defalut {
   opacity: 1;
}

.cm-active-list-box .active-list .icon-box .white {
   position: absolute;
   opacity: 0;
}

.cm-active-list-box .active-list .tit {
   text-align: center;
   padding-bottom: 2.2rem;
   font-size: 4rem;
   font-weight: 700;
   letter-spacing: -0.01em;
   line-height: 1.25em;
   color: #fff;
}

.cm-active-list-box .active-list .txt {
   text-align: center;
   font-size: 2.5rem;
   font-weight: 500;
   letter-spacing: -0.035em;
   line-height: 1.25em;
   color: rgba(255, 255, 255, 0.8);
}

.cm-active-list-box .active-list .txt span {
   padding: 0 1rem;
   font-size: 4rem;
   font-weight: 700;
   letter-spacing: -0.01em;
   color: #fff;
}

.cm-active-list-box .active-list.active {
   background-color: var(--main-color);
   box-shadow: 0 0 6.2rem 3rem rgba(0, 176, 199, 0.3);
}

.cm-active-list-box .active-list.active .icon-box .defalut {
   opacity: 0;
}

.cm-active-list-box .active-list.active .icon-box .white {
   opacity: 1;
}

.certifi-table-con {
   margin-top: 17.7rem;
}

.certifi-table-tit-box {
   display: flex;
   justify-content: space-between;
}

.certifi-table-con .table-con-tit {
   font-size: 4rem;
   font-weight: 700;
   letter-spacing: -0.035em;
   line-height: 1.47em;
   color: #fff;
   padding-bottom: 2.7rem;
}

.certifi-table-con .inner-wrap {
   overflow-x: auto;
}

.certifi-table-con .inner-wrap:not(.is-mobile)::-webkit-scrollbar {
   height: 6px;
}

.certifi-table-con .certifi-table {
   width: 100%;
   border-top: 2px solid #fff;
   border-bottom: 1px solid rgba(255, 255, 255, 0.5);
   width: auto;
   white-space: nowrap;
   table-layout: auto;
}

.certifi-table-con .certifi-table thead tr {
   border-bottom: 1px solid #848c92;
}

.certifi-table-con .certifi-table tbody tr {
   border-bottom: 1px solid #2e3c46;
}

.certifi-table-con .certifi-table tbody tr:last-child {
   border-bottom: none;
}

.certifi-table-con .certifi-table th {
   height: 6.5rem;
   font-size: 1.9rem;
   font-weight: 500;
   letter-spacing: -0.025em;
   line-height: 1.4em;
   color: #fff;
}

.certifi-table-con .certifi-table td {
   padding: 6rem 3.8rem;
}

.certifi-table-con .certifi-table td p {
   padding-bottom: 2.3rem;
}

.certifi-table-con .certifi-table td p:last-child {
   padding-bottom: 0;
}

.certifi-table-con .certifi-table td.txt01 {
   background-color: #16222c;
   vertical-align: top;
   font-size: 1.9rem;
   font-weight: 600;
   line-height: 1.4em;
   color: var(--main-color);
}

.certifi-table-con .certifi-table td.txt02 {
   padding: 6rem;
   border-right: 1px solid #2e3c46;
   font-size: 1.7rem;
   font-weight: 400;
   letter-spacing: -0.025em;
   line-height: 1.4em;
   color: #fff;
}

.certifi-table-con .certifi-table td.txt03 {
   font-size: 1.6rem;
   font-weight: 400;
   line-height: 1.4em;
   color: #fff;
}

.certifi-table-con .certifi-table td.txt03 p {
   text-align: center;
}

/* ******************  About :: 연구소 ********************** */

.research-content {
   position: relative;
   padding-bottom: 11.5rem;
}

.research-content::before {
   position: absolute;
   content: "";
   width: 125.7rem;
   height: 75.3rem;
   right: 0;
   bottom: -18rem;
   background: center / cover no-repeat url("/images/content/research_bg.png");
   z-index: 1;
   pointer-events: none;
}

.research-con {
   position: relative;
   display: flex;
   background: center / cover no-repeat url("/images/content/research_content_bg.png");
   border-radius: 4rem;
   margin-top: 19.5rem;
   padding: 15.3rem 16rem 16rem 16rem;
   box-sizing: border-box;
   z-index: 1;
}

.research-con .con-tit {
   width: 43%;
   padding-right: 7%;
   font-size: 5.5rem;
   font-weight: 600;
   letter-spacing: -0.035em;
   line-height: 1.4em;
   color: #fff;
}

.research-con .research-right-wrap {
   width: 50%;
}

.research-con .research-right-wrap .txt01 {
   padding-bottom: 1.8rem;
   font-size: 2.7rem;
   font-weight: 600;
   letter-spacing: -0.035em;
   line-height: 1.5em;
   color: #fff;
}

.research-con .research-right-wrap .txt02 {
   font-size: 1.9rem;
   font-weight: 400;
   letter-spacing: -0.035em;
   line-height: 1.78em;
   color: rgba(255, 255, 255, 0.85);
}

.research-certifi-list-box {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 2.2rem;
   margin: 11rem 5.4rem 0 0;
}

.research-certifi-list-box .research-certifi-list {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   backdrop-filter: blur(10px);
   border-radius: 1.5rem;
   background-color: rgba(255, 255, 255, 0.1);
   padding: 6rem 4rem 4.7rem 4rem;
}

.research-certifi-list-box .research-certifi-list img {
   max-width: 100%;
}

.research-certifi-list-box .research-certifi-list .txt {
   font-size: 2rem;
   font-weight: 600;
   letter-spacing: -0.035em;
   line-height: 1.5em;
   color: #fff;
   padding-top: 3.3rem;
   text-align: center;
   flex-grow: 1;
}

/* ******************  About :: Contact ********************** */

.contact-map-con {
   margin-top: 6rem;
   position: relative;
   display: block;
   overflow: hidden;
   width: 100%;
   height: 0;
   padding: 0;
   padding-top: 515px;
}

.contact-map-con .map-box {
   position: absolute;
   top: -150px;
   left: 0;
   width: 100%;
   height: calc(100% + 300px);
   padding: 0;
}

.contact-map-con .map-box iframe {
   position: relative;
   top: auto;
   left: auto;
   width: 100%;
   height: 100%;
}

.map-txt-box {
   margin-top: 8rem;
}

.map-txt-box .map-txt {
   font-size: 2.7rem;
   font-weight: 500;
   letter-spacing: -0.035em;
   line-height: 1.5em;
   color: #fff;
   text-align: center;
}

.map-txt-box .map-info-list-box {
   display: flex;
   justify-content: center;
   gap: 0 4.3rem;
   margin-top: 2rem;
}

.map-txt-box .map-info-list-box li {
   font-size: 2.1rem;
   font-weight: 500;
   letter-spacing: -0.025em;
   line-height: 1.5em;
   color: #fff;
}

.map-txt-box .map-info-list-box li span {
   padding-right: 2.2rem;
   color: rgba(255, 255, 255, 0.5);
}

.contact-content .cm-active-list-box {
   max-width: 121rem;
   margin: 10.5rem auto 0;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 3.5rem;
}

.contact-content .cm-active-list-box .active-list {
   position: relative;
   padding: 5rem;
   background: center / cover no-repeat url("/images/content/contact_active_bg.png");
   overflow: hidden;
}

.contact-content .cm-active-list-box .active-list::before {
   position: absolute;
   content: "";
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--main-color);
   z-index: 0;
   opacity: 0;
   visibility: hidden;
   transition: var(--transition-custom);
}

.contact-content .cm-active-list-box .active-list:first-child {
   top: 0;
}

.contact-content .cm-active-list-box .active-list .icon-box {
   position: relative;
   z-index: 1;
   min-height: 8.4rem;
   margin-bottom: 2.8rem;
}

.contact-content .cm-active-list-box .active-list .tit {
   position: relative;
   z-index: 1;
   font-size: 3rem;
   text-align: center;
   padding-bottom: 0.7rem;
}

.contact-content .cm-active-list-box .active-list .txt {
   position: relative;
   z-index: 1;
   text-align: center;
   font-size: 2rem;
   letter-spacing: 0;
}

.contact-content .cm-active-list-box .active-list.active::before {
   opacity: 1;
   visibility: visible;
}

.contact-form-con {
   margin-top: 17rem;
   padding: 15rem 0;
   background: center / cover no-repeat url("../images/content/contact_form_bg.jpg");
}

.contact-form-con .inner {
   display: flex;
}

.contact-form-con .form-con-tit {
   width: 21.786%;
   padding-right: 5%;
   font-size: 3.5rem;
   font-weight: 700;
   letter-spacing: -0.025em;
   line-height: 1.28em;
   color: #fff;
}

.contact-form-con .form-wrap {
   width: 73.215%;
}

.contact-form-con .contact-input-container .input-box {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 2rem;
}

.contact-form-con .contact-input-container .input-box.mt-20 {
   margin-top: 2rem;
}

.contact-form-con .contact-input-container .inner {
   display: flex;
   border: 2px solid rgba(255, 255, 255, 0.15);
   border-radius: 1.5rem;
   padding: 1.555rem 2.8rem;
   box-sizing: border-box;
}

.contact-form-con .contact-input-container .textarea-inner {
   height: auto;
   margin-top: 2.7rem;
}

.contact-form-con .contact-input-tit {
   width: 7.5rem;
   padding-right: 3rem;
   font-size: 1.8rem;
   font-weight: 500;
   letter-spacing: -0.05em;
   line-height: 1.66em;
   color: #fff;
}

.contact-form-con .contact-input,
.contact-form-con .contact-textarea {
   width: calc(100% - 10.5rem);
   border: none;
   outline: none;
   background-color: transparent;
   font-size: 1.7rem;
   font-weight: 400;
   letter-spacing: -0.05em;
   line-height: 1.76em;
   color: #fff;
}

.contact-form-con .contact-textarea {
   height: 19rem;
}

.contact-form-con .contact-input::placeholder,
.contact-form-con .contact-textarea::placeholder {
   font-size: 1.7rem;
   font-weight: 400;
   letter-spacing: -0.05em;
   line-height: 1.76em;
   color: rgba(255, 255, 255, 0.4);
}

.contact-form-con .bbs-inquiry-agree-con {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 0;
   margin-top: 2.5rem;
}

.contact-form-con .bbs-inquiry-agree-con .agree-txt {
   font-size: 1.7rem;
   font-weight: 400;
   line-height: 1.76em;
   letter-spacing: -0.05em;
   color: #fff;
}

.contact-form-con .bbs-inquiry-agree-con .agree-txt label {
   padding-left: 3rem;
}

.contact-form-con .bbs-inquiry-agree-con .agree-txt label i {
   top: -0.1rem;
   font-size: 2.4rem;
   color: #00b0c7;
}

.contact-form-con .bbs-inquiry-agree-con .agree-txt input:checked+label i {
   color: #fff;
}

.contact-form-con .contact-send-btn,
.contact-form-con .contact-cancel-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 24rem;
   height: 6.3rem;
   font-size: 1.6rem;
   font-weight: 700;
   letter-spacing: -0.015em;
   color: #fff;
   border-radius: 3.1rem;
}

.contact-form-con .contact-send-btn {
   background-color: #00b0c7;
}

.contact-form-con .contact-cancel-btn {
   background-color: #000;
}

/* ******************  INVESTMENT :: 재무정보 ********************** */

.financial-content {
   padding-top: 3.5rem;
}

.financial-content .chart-list-box {
   display: flex;
   flex-direction: column;
   gap: 4.7rem;
   margin-bottom: 17.7rem;
}

.financial-content .chart-list-box .chart-list {
   width: calc(100% - 2.35rem);
   padding: 3.45% 4.5% 3.3% 4.5%;
   background-color: rgba(19, 44, 62, 0.5);
   border-radius: 2rem;
   box-sizing: border-box;
}

.financial-content .chart-list-box .chart-item {}

.financial-content .chart-list-box .chart-list p {
   padding-left: 4rem;
   padding-bottom: 3rem;
   font-size: 2.6rem;
   font-weight: 600;
   letter-spacing: -0.035em;
   line-height: 1.2em;
   color: #fff;
   text-align: center;
}

.financial-content .chart-list-box .chart-list .chart-item-tit {
   padding-bottom: 2rem;
   position: relative;
}

.financial-content .chart-list-box .chart-list .chart-item-tit p {
   padding-bottom: 0;
}

.financial-content .chart-list-box .chart-list .chart-item-tit span {
   position: absolute;
   top: 1rem;
   right: 0;
   font-size: 1.6rem;
   line-height: 1.3;
   color: rgba(255, 255, 255, 0.6);
   display: inline-block;
}

.financial-content .chart-list-box .chart-item canvas {
   width: 100%;
   height: 10rem;
}

/* ******************  INVESTMENT :: NEWS ********************** */

.news-content {
   padding-top: 1rem;
}

/* .news-list-box {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 4.4rem; padding: 3.5rem 0 8.5rem 0;} */

.news-list-box {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 4.4rem;
   padding: 0 0 3rem 0;
}

.news-list-box .news-list>a {
   display: block;
   width: 100%;
   height: 100%;
   padding: 4.5rem 5rem;
   background-color: #132a3c;
   border-radius: 1.5rem;
   box-sizing: border-box;
   transition: var(--transition-custom);
}

.news-list-box .news-list .tit {
   font-size: 2.6rem;
   font-weight: 600;
   letter-spacing: -0.025em;
   line-height: 1.42em;
   color: #fff;
   text-overflow: ellipsis;
   overflow: hidden;
   word-break: break-word;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical
}

.news-list-box .news-list .date {
   display: inline-block;
   font-size: 1.7rem;
   font-weight: 600;
   letter-spacing: -0.025em;
   line-height: 1.42em;
   color: rgba(255, 255, 255, 0.6);
   padding-top: 6rem;
}

.news-list-box .news-list>a:hover {
   background-color: #00b0c7;
}

/* ***********************
*페이크폼 스타일 추가css 
*********************** */

.fakeform-selectbox {
   position: relative;
   display: flex;
   justify-content: flex-end;
   width: 100%;
   margin-bottom: 2rem;
}

.fakeform-selectbox select {
   opacity: 0;
   visibility: hidden;
}

.select-option.select-in-popup {
   z-index: 10000 !important;
}

/* fake form - 기본 select 스타일 */

.fakeform-selectbox .select-title {
   text-indent: 2.7rem;
   width: 100% !important;
   max-width: 22rem;
   text-align: left;
   vertical-align: middle;
   border: 0;
   line-height: 5rem;
   font-size: 1.9rem;
   font-weight: 500;
   color: #000;
   letter-spacing: -0.015em;
   border: 1px solid rgba(132, 140, 146, 0.3);
   background-color: #fff;
   display: inline-block;
   border-radius: 2.75rem;
   box-sizing: border-box;
   cursor: pointer;
}

.fakeform-selectbox .select-title:after {
   font-family: 'xeicon';
   position: absolute;
   top: 50%;
   right: 2.3rem;
   transform: translateY(-50%);
   content: "\e942";
   font-size: 1.9rem;
   color: #000;
}

.fakeform-selectbox .select-title strong {
   width: 100%;
   font-weight: 400;
   word-break: break-all;
   display: block;
   overflow: hidden;
}

.fakeform-selectbox .select-title.active {
   border-bottom-color: #fff;
}

.fakeform-selectbox .select-title.active:after {
   content: "\e945";
}

.fakeform-selectbox .select-title.focus {}

.fakeform-selectbox .select-title.disabled {}

/* 옵션창 */

.select-option {
   border: 1px solid #ddd;
   border-top: 0;
   background: #fff;
   max-height: 200px;
   overflow: auto;
   z-index: 999 !important;
}

.select-option::-webkit-scrollbar {
   width: 5px;
}

.select-option::-webkit-scrollbar-thumb {
   background-color: #333;
   border-radius: 5px;
   transition: all 0.5s;
}

.select-option::-webkit-scrollbar-track {
   background-color: #f2f2f2;
   border-radius: 0;
}

.select-option ul {
   margin: 0;
   padding: 0;
}

.select-option li {
   list-style: none;
}

.select-option span,
.select-option strong {
   height: auto;
   font-size: 1.4rem;
   line-height: 1.5;
   color: #666;
   white-space: nowrap;
   text-overflow: ellipsis;
   text-decoration: none;
   padding: 1.5rem 2em;
   display: block;
   overflow: hidden;
   cursor: pointer;
}

.select-option span:hover {
   background: #f2f2f2;
}

.select-option span.selected {
   color: #000;
   font-weight: 600;
}

.select-option .disabled span,
.select-option .disabled strong {
   color: #bbb;
   text-decoration: line-through;
   background: none;
   cursor: default;
}

@media all and (max-width:800px) {
   .fakeform-selectbox .select-title {
      text-indent: 1em;
      font-size: 1.4rem;
      line-height: 4.5rem;
   }

   .fakeform-selectbox .select-title:after {
      right: 0.7em;
      font-size: 2rem;
   }

   /* 옵션창 */
   .select-option span,
   .select-option strong {
      height: auto;
      font-size: 1.3rem;
      font-weight: 500;
      line-height: 1.5;
      padding: 1rem 1em;
   }
}

/* ******************  Careers :: 인재상 ********************** */

.talent-content {
   position: relative;
}

.talent-content::before {
   position: absolute;
   content: "";
   left: 5%;
   top: 14%;
   width: 13.644%;
   height: 28.9rem;
   background: center / contain no-repeat url("/images/content/talent_diagram01.png");
   animation: upDownSub 2.5s ease-in-out infinite;
}

.talent-content::after {
   position: absolute;
   content: "";
   right: 0;
   top: 47%;
   width: 12.18%;
   height: 43.4rem;
   background: center / contain no-repeat url("/images/content/talent_diagram02.png");
   animation: upDownSub 3.5s ease-in-out infinite;
}

@keyframes upDownSub {
   0% {
      transform: translateY(-5px);
   }

   50% {
      transform: translateY(10px);
   }

   100% {
      transform: translateY(-5px);
   }
}

.talent-active-list-box {
   position: relative;
   margin-top: 35rem;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 3.75rem;
}

.talent-active-list-box::before {
   position: absolute;
   content: "";
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 145.3rem;
   height: 88.1rem;
   background: center / cover no-repeat url("/images/content/talent_list_bg.png");
   pointer-events: none;
}

.talent-active-list-box .talent-active-list {
   position: relative;
   height: 0;
   padding-top: 100%;
   border-radius: 2rem;
}

.talent-active-list-box .talent-active-list:first-child {
   background: center / cover no-repeat url("/images/content/careers_active_list_bg04.jpg");
}

.talent-active-list-box .talent-active-list:nth-child(2) {
   background: center / cover no-repeat url("/images/content/careers_active_list_bg01.jpg")
}

.talent-active-list-box .talent-active-list:nth-child(3) {
   background: center / cover no-repeat url("/images/content/careers_active_list_bg02.jpg")
}

.talent-active-list-box .talent-active-list:nth-child(4) {
   background: center / cover no-repeat url("/images/content/careers_active_list_bg03.jpg")
}

.talent-active-list-box .talent-active-list:last-child {
   background: center / cover no-repeat url("/images/content/careers_active_list_bg04.jpg")
}

.talent-active-list-box .talent-active-list .inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.talent-active-list-box .talent-active-list .inner::before {
   position: absolute;
   content: "";
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--main-color);
   z-index: -1;
   box-shadow: 0 0 6.2rem 3rem rgba(0, 176, 199, 0.3);
   border-radius: 2rem;
   opacity: 0;
   visibility: hidden;
   transition: var(--transition-custom);
}

.talent-active-list-box .talent-active-list .inner h5 {
   text-align: center;
   font-size: 3.2rem;
   font-weight: 600;
   letter-spacing: -0.035em;
   line-height: 1.5em;
   color: #fff;
}

.talent-active-list-box .talent-active-list .inner p {
   font-size: 2.2rem;
   font-weight: 600;
   letter-spacing: -0.015em;
   line-height: 1.6em;
   color: #00abc2;
   transition: var(--transition-custom);
}

.talent-active-list-box .talent-active-list.active .inner::before {
   opacity: 1;
   visibility: visible;
}

.talent-active-list-box .talent-active-list.active .inner p {
   color: #fff;
}

.talent-icon-list-box {
   margin: 0 -1.8rem;
   position: relative;
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 13rem;
   z-index: 1;
   margin-top: 34rem;
}

.talent-icon-list-box .talent-icon-list {
   margin: 0 1.8rem;
   width: calc(20% - 3.6rem);
   height: 35rem;
   padding: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   background: #16222c url("../images/content/talent_icon_cover.png") center/cover no-repeat;
   border-radius: 2rem;
   position: relative;
   text-align: center;
   transition: var(--transition-custom);
   transition-property: background, box-shadow;
}

.talent-icon-list-box .talent-icon-list:nth-child(even) {
   margin-top: 8rem;
}

.talent-icon-list-box .talent-icon-list figure {
   position: absolute;
   top: 52.28%;
   left: 50%;
   transform: translateX(-50%);
   transition: var(--transition-custom);
   opacity: 1;
   transition-property: opacity;
}

.talent-icon-list-box .talent-icon-list h5 {
   font-size: 2.4rem;
   font-weight: 600;
   letter-spacing: -0.035em;
   line-height: 1.3em;
   color: #fff;
}

.talent-icon-list-box .talent-icon-list p {
   margin-top: 5rem;
   font-size: 1.5rem;
   font-weight: 400;
   letter-spacing: -0.025em;
   line-height: 1.73em;
   color: rgba(255, 255, 255, 0.8);
   opacity: 0;
   transition: var(--transition-custom);
   transition-property: opacity;
}

.talent-icon-list-box .talent-icon-list figure img {
   height: 6.5rem;
   max-height: 65px;
}

.talent-icon-list-box .talent-icon-list.active {
   background: var(--main-color);
   box-shadow: 0 0 6.2rem 3rem rgba(0, 176, 199, 0.3);
}

.talent-icon-list-box .talent-icon-list.active figure {
   opacity: 0;
}

.talent-icon-list-box .talent-icon-list.active p {
   opacity: 1;
}

/* ******************  Careers :: 인사제도 ********************** */

.personal-content #fixedContentM1 {
   margin-top: 18.5rem;
}

.personal-content #fixedContentM2 {
   margin-top: 21.2rem;
}

.personal-content #fixedContentM3 {
   margin-top: 19rem;
}

.personal-content #fixedContentM4 {
   margin-top: 19rem;
}

.personal-content .personal-tit-box {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: 3rem;
}

.personal-content .personal-tit-box .personal-con-tit {
   padding-bottom: 0 !important;
}

.personal-content .personal-con-tit {
   padding-bottom: 3rem;
   font-size: 4rem;
   font-weight: 700;
   letter-spacing: -0.035em;
   line-height: 1.57em;
   color: #fff;
}

.personal-content .personal-con-txt {
   font-size: 1.8rem;
   font-weight: 400;
   letter-spacing: -0.035em;
   line-height: 1.5em;
   color: #fff;
}

.personal-process-list-box {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 5rem;
}

.personal-process-list-box .personal-process-list {
   position: relative;
   height: 0;
   padding-top: 25rem;
   border-radius: 2rem;
   background-color: #1a354a;
}

.personal-process-list-box .personal-process-list::before {
   font-family: "xeicon";
   position: absolute;
   right: -3.75rem;
   top: 50%;
   content: "\e93e";
   font-size: 2.5rem;
   color: rgba(0, 176, 199, 0.15);
   transform: translate(0, -50%);
}

.personal-process-list-box .personal-process-list:last-child::before {
   display: none;
}

.personal-process-list-box .personal-process-list img {
   max-width: 100%;
}

.personal-process-list-box .personal-process-list:last-child {
   background-color: var(--main-color);
   box-shadow: 0 0 6.2rem 3rem rgba(0, 176, 199, 0.3);
}

.personal-process-list-box .personal-process-list .inner {
   padding-top: 3.6rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
}

.personal-process-list-box .personal-process-list .inner figure {
   display: flex;
   align-items: center;
   justify-content: center;
}

.personal-process-list-box .personal-process-list p {
   min-height: 7rem;
   padding-top: 2rem;
   text-align: center;
   font-size: 2.2rem;
   font-weight: 500;
   letter-spacing: -0.035em;
   line-height: 1.5em;
   color: #fff;
}

.personal-process-list-box .personal-process-list p span {
   font-size: 1.6rem;
   font-weight: 400;
   letter-spacing: -0.015em;
   color: rgba(255, 255, 255, 0.85);
}

.personal-process-list-box .personal-process-list p span em {
   position: relative;
   top: -0.3rem;
   padding: 0 0.3rem;
   font-size: 1.2rem;
   color: rgba(255, 255, 255, 0.25);
}

.position-list-box {
   border-top: 2px solid #fff;
}

.position-list-box .position-list {
   display: flex;
   padding: 4rem 6.5rem;
   border-bottom: 1px solid #2e3c46;
}

.position-list-box .position-list span {
   width: 5.5rem;
   font-size: 2.2rem;
   font-weight: 600;
   letter-spacing: -0.035em;
   color: #00a9bf;
}

.position-list-box .position-list p {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 2rem 0;
   width: calc(100% - 5.5rem);
   padding-left: 11rem;
   font-size: 2.2rem;
   font-weight: 500;
   letter-spacing: -0.035em;
   color: #fff;
}

.position-list-box .position-list p i {
   display: inline-block;
   font-size: 1.8rem;
   color: rgba(255, 255, 255, 0.5);
   padding: 0 0.8rem;
}

.personal-content .system-con {
   position: relative;
   width: 100%;
   min-height: 51.1rem;
   background: center / cover no-repeat url("/images/content/personal_system_bg.jpg");
   border-radius: 4rem;
}

.personal-content .system-circle-list-box {
   display: flex;
   position: absolute;
   top: 50%;
   right: 13.5rem;
   transform: translateY(-50%);
}

.personal-content .system-circle-list-box .system-circle-list {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 22.3rem;
   height: 22.3rem;
   border-radius: 50%;
}

.personal-content .system-circle-list-box .system-circle-list:first-child {
   left: 2.5rem;
   background-color: rgba(9, 168, 173, 0.45);
}

.personal-content .system-circle-list-box .system-circle-list:nth-child(2) {
   background-color: rgba(3, 160, 181, 0.45);
}

.personal-content .system-circle-list-box .system-circle-list:last-child {
   right: 2.5rem;
   background-color: rgba(6, 125, 164, 0.45);
}

.personal-content .system-circle-list-box .system-circle-list i {
   padding-bottom: 1rem;
   font-size: 3.4rem;
   color: #fff;
}

.personal-content .system-circle-list-box .system-circle-list p {
   text-align: center;
   font-size: 2.2rem;
   line-height: 1.27em;
   font-weight: 600;
   letter-spacing: -0.005em;
   color: #fff;
}

.personal-edu-list-box {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 2.3rem;
}

.personal-edu-list-box .personal-edu-list {
   position: relative;
   height: 0;
   padding-top: 26.3rem;
   border-radius: 2rem;
}

.personal-edu-list-box .personal-edu-list .inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: absolute;
   content: "";
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.personal-edu-list-box .personal-edu-list:nth-child(odd) {
   background-color: #16222c;
}

.personal-edu-list-box .personal-edu-list:nth-child(even) {
   background-color: rgba(0, 176, 199, 0.13);
}

.personal-edu-list-box .personal-edu-list p {
   text-align: center;
   padding-top: 2.7rem;
   font-size: 2.2rem;
   font-weight: 500;
   line-height: 1.5em;
   letter-spacing: -0.035em;
   color: #fff;
}

/* ******************  Careers :: 채용정보 ********************** */

.recruit-content {
   padding-bottom: 8rem;
}

.recruit-banner-con {
   width: 100%;
   height: 54.1rem;
   margin-bottom: 12rem;
   background: center / cover no-repeat url("/images/content/recruit_top_banner.jpg");
}

.recruit-banner-con>.area,
.recruit-banner-con .inner {
   height: 100%;
}

.recruit-banner-con .inner {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.recruit-banner-con .banner-tit {
   padding-bottom: 6.5rem;
   font-size: 4.7rem;
   font-weight: 600;
   letter-spacing: -0.035em;
   line-height: 1.27em;
   color: #fff;
   text-align: center;
}

.recruit-banner-con .mail-info {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 30.5rem;
   height: 6.5rem;
   font-size: 2.3rem;
   font-weight: 500;
   line-height: 1.34em;
   color: #fff;
   background-color: rgba(255, 255, 255, 0.15);
   border-radius: 3.3rem;
}

.recruit-banner-con .ps-txt {
   position: absolute;
   right: 0;
   bottom: 4rem;
   font-size: 1.8rem;
   font-weight: 400;
   letter-spacing: -0.035em;
   line-height: 1.27em;
   color: #fff;
   text-align: center;
}

.recruit-content .tbl {
   padding-top: 9.8rem;
}

.recruit-content .stock03-table td {
   padding: 5rem 4.3rem 5rem 6rem;
   vertical-align: top;
   text-align: left;
}

.recruit-content .stock03-table td:first-child {
   background-color: #16222c;
}

.recruit-content .stock03-table td p {
   color: rgba(255, 255, 255, 0.85);
   line-height: 2em;
}

.recruit-content .stock03-table td .color-txt {
   font-size: 1.9rem;
   font-weight: 500;
   line-height: 1.68em;
   color: var(--main-color);
   text-align: left;
}

/* .recruit-content .stock03-table td .hypen-txt, .recruit-content .stock03-table td .dot-txt {position: relative;}
.recruit-content .stock03-table td .hypen-txt {padding-left: 1rem;}
.recruit-content .stock03-table td .dot-txt {padding-left: 0.7rem;}
.recruit-content .stock03-table td .hypen-txt::before {position: absolute; content: ""; left: 0; top: 1.6rem; width: 6px; height: 2px; background-color: rgba(255, 255, 255, 0.85);}
.recruit-content .stock03-table td .dot-txt::before {position: absolute; content: ""; left: 0; top: 1.55rem; width: 3px; height: 3px; background-color: rgba(255, 255, 255, 0.85); border-radius: 50%;} */

.stock-scroll-drag-guide {
   display: none;
}

@media all and (max-width: 800px) {
   .stocktbl-tit-box {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
   }

   .stock-scroll-drag-guide {
      display: flex;
      justify-content: flex-end
   }

   .stock-scroll-drag-guide .stock-scroll-drag-inner {
      position: relative;
      width: 5rem;
      height: 5rem;
   }

   .stock-scroll-drag-guide .stock-scroll-drag-inner:before {
      position: absolute;
      top: 0.4rem;
      right: 0;
      width: 100%;
      height: 3px;
      background-color: #ccc;
      content: "";
      border-radius: 5px;
   }

   .stock-scroll-drag-guide .drag-tail {
      position: absolute;
      z-index: 1;
      left: 0px;
      top: 3px;
      animation: stock-drag-hand 3s both infinite;
   }

   .stock-scroll-drag-guide .drag-tail .tail {
      display: block;
      width: 25px;
      height: 5px;
      background-color: rgba(0, 0, 0, 0.7);
      border-radius: 5px;
      opacity: 1;
   }

   .stock-scroll-drag-guide .drag-tail .hand-icon {
      font-size: 3rem;
      color: #aaa
   }

   @keyframes stock-drag-hand {
      0% {
         left: 0;
         margin-left: 0px;
         transform: rotate(0deg);
      }

      10% {
         left: 0;
         margin-left: 0px;
         transform: rotate(0deg);
      }

      50% {
         left: 100%;
         margin-left: -25px;
      }

      100% {
         left: 0;
         margin-left: 0px;
      }
   }
}