@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */

.main-wrap {
   background-color: #091925;
}

/* ******************  메인 비주얼 ********************** */

#mainVisual {
   padding-top: 28.5rem;
}

.main-visual-txt-con {}

.main-visual-txt-box {}

.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3,
.main-visual-txt-box .main-visual-img {
   opacity: 0;
}

.cm-logo-symbol-svg {}

.cm-logo-symbol-svg .cls-1 {
   fill: #00b1c7;
}

.main-visual-txt-box .main-visual-txt1>div,
.main-visual-txt-box .main-visual-txt2>div {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
}

.main-visual-txt-box .main-visual-txt1>div {
   flex-wrap: initial !important;
   flex-flow: nowrap;
   text-wrap: nowrap;
}

.main-visual-txt-box .main-visual-txt2>div,
.main-visual-txt-box .main-visual-txt3>div {
   justify-content: flex-start;
   padding-left: 2.4%;
}

.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3 {
   margin-top: 2.5rem;
   /* margin-left: 46rem; */
   margin-left: 27.15%;
}

.main-visual-txt-box .main-visual-txt1 p,
.main-visual-txt-box .main-visual-txt2 p {
   font-size: 10.9rem;
   font-weight: 700;
   letter-spacing: -0.015em;
   color: #fff;
}

.main-visual-txt-box .main-visual-txt3 p {
   text-align: left;
   font-weight: 500;
   margin-top: 3rem;
   font-size: 3.2rem;
   line-height: 1.5;
   letter-spacing: -0.035em;
   color: #fff;
}

.main-visual-txt-box .main-visual-txt1 svg {
   margin-left: 4rem;
   height: 8.5rem;
}

.main-visual-txt-box .main-visual-img {
   margin-top: 8.5rem;
   text-align: center;
}

.main-visual-txt-box .main-visual-img img {
   max-width: 100%;
   display: inline-block;
}

/* 메인 비주얼 :: 텍스트 :: active효과 */

.active-item .main-visual-txt1 {
   animation: text-active-animation1 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.active-item .main-visual-txt2 {
   animation: text-active-animation2 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.active-item .main-visual-txt3 {
   animation: text-active-animation1 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.active-item .main-visual-img {
   animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.active-item .main-visual-txt1 {
   animation-delay: 0.3s;
}

.active-item .main-visual-txt2 {
   animation-delay: 0.5s;
}

.active-item .main-visual-txt3 {
   animation-delay: 0.7s;
}

.active-item .main-visual-img {
   animation-delay: 1s;
}

.main-visual-txt-box .cm-word-split-JS.splitting .char {
   animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char {
   animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* 메인 비주얼 :: Animation */

@keyframes image-zoom-out {
   from {
      transform: scale(1.08, 1.08)
   }

   to {
      transform: scale(1.0, 1.0)
   }
}

@keyframes text-active-animation {
   from {
      opacity: 0;
      filter: Alpha(opacity=0);
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
   }

   to {
      opacity: 1.0;
      filter: Alpha(opacity=100);
      -webkit-transform: translateY(0);
      transform: translateY(0);
   }
}

@keyframes text-active-animation1 {
   from {
      opacity: 0;
      filter: Alpha(opacity=0);
      -webkit-transform: translateX(-50px);
      transform: translateX(-50px);
   }

   to {
      opacity: 1.0;
      filter: Alpha(opacity=100);
      -webkit-transform: translateX(0);
      transform: translateX(0);
   }
}

@keyframes text-active-animation2 {
   from {
      opacity: 0;
      filter: Alpha(opacity=0);
      -webkit-transform: translateX(50px);
      transform: translateX(50px);
   }

   to {
      opacity: 1.0;
      filter: Alpha(opacity=100);
      -webkit-transform: translateX(0);
      transform: translateX(0);
   }
}

@keyframes text-fade-out {
   from {
      opacity: 1.0;
      filter: Alpha(opacity=100);
   }

   to {
      opacity: 0;
      filter: Alpha(opacity=0);
   }
}

@media all and (max-width:1280px) {

   .main-visual-txt-box .main-visual-txt1 p,
   .main-visual-txt-box .main-visual-txt2 p {
      font-size: 8.7rem;
   }

   .main-visual-txt-box .main-visual-txt1 svg {
      height: 8rem;
   }

   .main-visual-txt-box .main-visual-txt2>div,
   .main-visual-txt-box .main-visual-txt3>div {
      padding-left: 0;
   }

   .main-visual-txt-box .main-visual-txt2,
   .main-visual-txt-box .main-visual-txt3 {
      margin-left: 25%;
   }
}

@media all and (max-width:800px) {
   #mainVisual {
      padding-top: 28.5rem;
   }

   .main-visual-txt-box .main-visual-txt1>div,
   .main-visual-txt-box .main-visual-txt2>div {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding-right: 0;
   }

   .main-visual-txt-box .main-visual-txt2,
   .main-visual-txt-box .main-visual-txt3 {
      margin-top: 2.5rem;
      margin-left: 7rem;
   }

   .main-visual-txt-box .main-visual-txt1 p,
   .main-visual-txt-box .main-visual-txt2 p {
      font-size: 5.6rem;
   }

   .main-visual-txt-box .main-visual-txt3 {
      margin-top: 1.5rem;
   }

   .main-visual-txt-box .main-visual-txt3 p {
      margin-top: 0;
      font-size: 2.2rem;
   }

   .main-visual-txt-box .main-visual-txt1 svg {
      margin-left: 2rem;
      height: 5.5rem;
   }

   .main-visual-txt-box .main-visual-img {
      margin-top: 8.5rem;
   }
}

@media all and (max-width:640px) {
   .main-visual-txt-box .main-visual-txt1 svg {
      height: 4rem;
   }

   .main-visual-txt-box .main-visual-txt1 p,
   .main-visual-txt-box .main-visual-txt2 p {
      font-size: 5rem;
   }
}

@media all and (max-width:480px) {
   #mainVisual {
      padding-top: 20.5rem;
   }

   .main-visual-txt-box .main-visual-txt2 {
      margin-top: 0;
      margin-left: 0;
   }

   .main-visual-txt-box .main-visual-txt3 {
      margin-top: 1rem;
      margin-left: 0
   }

   .main-visual-txt-box .main-visual-txt1 p,
   .main-visual-txt-box .main-visual-txt2 p {
      font-size: 4rem;
      line-height: 1.2;
   }

   .main-visual-txt-box .main-visual-txt3 p {
      font-size: 1.8rem;
   }

   .main-visual-txt-box .main-visual-txt1 svg {
      margin-left: 2rem;
      max-height: 3rem;
   }
}

/* ******************  메인 컨텐츠 ********************** */

/* -------- 메인 컨텐츠 :: 공통 -------- */

/* 공통 :: 타이틀 */

.main-tit-box {}

.main-tit-box .main-tit {
   font-size: 8rem;
   font-weight: 700;
   letter-spacing: -0.01em;
   color: #fff;
}

.main-tit-box .main-tit.splitting .word {
   line-height: 1.3;
}

.main-tit-box .main-sub-tit {
   margin-top: 2rem;
   font-size: 3.2rem;
   line-height: 1.5;
   letter-spacing: -0.035em;
   color: #fff;
}

.main-tit-box.has-btn {
   display: flex;
   align-items: center;
}

.main-tit-box.has-btn a {
   margin-left: 3.5rem;
   display: block;
   transform: translateY(100%);
   opacity: 0;
   visibility: hidden;
   transition: var(--transition-custom2);
   transition-property: opacity, transform;
}

.main-tit-box.has-btn a i {
   font-size: 6rem;
   color: #fff;
   transform: rotate(45deg);
   transition: var(--transition-custom);
   transition-property: transform;
}

.main-tit-box.has-btn.animated a {
   transform: translateY(0);
   opacity: 1;
   visibility: visible;
   transition-delay: 0.45s;
}

.main-tit-box.has-btn a:hover i {
   transform: rotate(45deg) translate(0rem, -3rem);
}

.main-tit-box .main-tit.splitting .char {
   opacity: 0;
   transform: translateY(100%);
   transition: var(--transition-custom2);
   transition-property: opacity, transform;
}

/* animation일때 */

/* .aos-animate .main-tit-box .main-tit.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
} */

/* transition일때 */

.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char {
   opacity: 1.0;
   transform: translateY(0);
}

@media all and (max-width:1280px) {
   .main-tit-box .main-tit {
      font-size: 7rem;
   }
}

@media all and (max-width:800px) {
   .main-tit-box .main-tit {
      font-size: 5rem;
   }

   .main-tit-box .main-tit.splitting .word {
      line-height: 1.1;
   }

   .main-tit-box .main-sub-tit {
      margin-top: 2rem;
      font-size: 2.2rem;
      line-height: 1.5;
   }

   .main-tit-box.has-btn {
      display: flex;
      align-items: center;
   }

   .main-tit-box.has-btn a {
      margin-left: 3.5rem;
   }

   .main-tit-box.has-btn a i {
      font-size: 6rem;
   }
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(Power management IC Fabless) -------- */

#mainPowerCon {
   padding: 19rem 0 12rem;
}

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

#mainPowerCon .main-tit-box .main-tit {
   color: var(--main-color);
}

.main-power-wrapper {
   margin: 12rem auto 0;
   max-width: 127.5rem;
}

.main-power-list {
   margin: 0 -3.3rem;
}

.main-power-item {
   float: left;
   margin: 0 3.3rem;
   width: calc(33.33% - 6.6rem);
}

.main-power-item:nth-child(1) {
   margin-top: 11rem;
}

.main-power-item:nth-child(2) {
   margin-top: 21.5rem;
}

.main-power-inner {
   width: 100%;
   height: 52rem;
   border-radius: 2rem;
   display: block;
   background-color: #16222c;
   overflow: hidden;
   transition: var(--transition-custom);
   transition-property: background-color, box-shadow;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: relative;
}

.main-power-inner:before {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 2rem;
   content: '';
   background: url("../images/main/main_power_cover.png") center/cover no-repeat;
   opacity: 1;
   transition: var(--transition-custom);
   transition-property: opacity;
}

.main-power-img {
   margin: 0 auto 1.5rem;
   width: 16rem;
   height: 16rem;
   display: block;
   transition: var(--transition-custom);
   transition-property: background;
}

.main-power-img.img01 {
   background: url('../images/main/main_power_img01.png') center/cover no-repeat;
}

.main-power-img.img02 {
   background: url('../images/main/main_power_img02.png') center/cover no-repeat;
}

.main-power-img.img03 {
   background: url('../images/main/main_power_img03.png') center/cover no-repeat;
}

.main-power-txt {
   text-align: center;
}

.main-power-txt h5 {
   font-size: 4rem;
   line-height: 1.3;
   letter-spacing: -0.01em;
   font-weight: 700;
   color: #fff;
}

.main-power-txt p {
   margin-top: 3.5rem;
   font-size: 2rem;
   line-height: 1.55;
   letter-spacing: -0.035em;
   color: #fff;
}

.main-power-item.active .main-power-inner:before {
   opacity: 0;
}

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

.main-power-item.active .main-power-img.img01 {
   background: url('../images/main/main_power_img01_on.png') center/cover no-repeat;
}

.main-power-item.active .main-power-img.img02 {
   background: url('../images/main/main_power_img02_on.png') center/cover no-repeat;
}

.main-power-item.active .main-power-img.img03 {
   background: url('../images/main/main_power_img03_on.png') center/cover no-repeat;
}

@media all and (max-width:1280px) {
   #mainPowerCon {
      padding: 12rem 0 12rem;
   }
}

@media all and (max-width:800px) {
   #mainPowerCon {
      padding: 12rem 0 12rem;
   }

   .main-power-wrapper {
      margin: 7rem auto 0;
      max-width: 127.5rem;
   }

   .main-power-list {
      margin: -2rem;
   }

   .main-power-item:nth-child(1),
   .main-power-item:nth-child(2),
   .main-power-item {
      margin: 2rem;
      width: calc(100% - 4rem);
      transform: none !important;
   }

   .main-power-inner {
      padding: 5rem 2rem;
      width: 100%;
      height: auto;
      border-radius: 2rem;
      box-sizing: border-box;
   }

   .main-power-img {
      margin: 0 auto 1.5rem;
      width: 12rem;
      height: 12rem;
   }

   .main-power-txt {
      text-align: center;
   }

   .main-power-txt h5 {
      font-size: 3rem;
      line-height: 1.3;
   }

   .main-power-txt p {
      margin-top: 3.5rem;
      font-size: 2rem;
      line-height: 1.55;
   }
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Applications) -------- */

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

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

.main-app-container {
   margin-top: 11rem;
}

.main-app-wrapper {
   transform: scaleX(0);
   transform-origin: left;
   transition: var(--transition-custom2);
   transition-property: transform;
}

.main-app-container.animated .main-app-wrapper {
   transform: scaleX(1);
}

.main-app-wrapper>.swiper-wrapper {
   transition-timing-function: linear !important;
}

.main-app-list {
   display: flex;
}

.main-app-item {
   width: 38rem;
}

.main-app-item a {
   width: 100%;
   display: block;
   transition: var(--transition-custom);
   transition-property: opacity;
}

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

.main-app-img span {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: block;
}

.main-app-txt {
   margin-top: 3rem;
   font-size: 2.4rem;
   line-height: 1.5;
   color: #fff;
   text-align: center;
}

@media all and (min-width:801px) {
   .main-app-list:not(.item-1):hover .main-app-item a {
      opacity: 0.25;
   }

   .main-app-list:not(.item-1):hover .main-app-item.active-item a:hover {
      opacity: 1;
   }
}

@media all and (max-width:1280px) {}

@media all and (max-width:800px) {
   #mainAppCon {
      padding: 12rem 0 15rem;
   }

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

   .main-app-container {
      margin-top: 7rem;
   }

   .main-app-wrapper {
      transform: scaleX(0);
      transform-origin: left;
      transition: var(--transition-custom2);
      transition-property: transform;
   }

   .main-app-container.animated .main-app-wrapper {
      transform: scaleX(1);
   }

   .main-app-wrapper>.swiper-wrapper {
      transition-timing-function: linear !important;
   }

   .main-app-list {
      display: flex;
   }

   .main-app-item {
      width: 38rem;
   }

   .main-app-item a {
      width: 100%;
      display: block;
      transition: var(--transition-custom);
      transition-property: opacity;
   }

   .main-app-img {
      position: relative;
      width: 100%;
      height: 0;
      padding-top: 100%;
      border-radius: 1.5rem;
   }

   .main-app-img span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
   }

   .main-app-txt {
      margin-top: 3rem;
      font-size: 2.4rem;
      line-height: 1.5;
      color: #fff;
      text-align: center;
   }
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(Company Information) -------- */

#mainCompanyCon {
   padding: 7.5rem 0 10rem;
}

#mainCompanyCon .main-tit-box {
   position: relative;
   /* top: 15rem; */
   top: 7.8125vw;
   z-index: 2;
}

#mainCompanyCon .main-tit-box .area-box {
   position: relative;
}

#mainCompanyCon .main-tit-box .main-tit {
   letter-spacing: -0.025em;
}

.main-company-point {
   position: absolute;
   /* top: -13rem; left: 7rem; height: 42rem; */
   top: -6.7708vw;
   left: 3.6458vw;
   height: 21.8750vw;
   opacity: 0;
   transform: translate(-100px, 100px) scale(0);
   transition: var(--transition-custom2);
   transition-property: opacity, transform;
   display: block;
}

#mainCompanyCon .main-tit-box.animated .main-company-point {
   opacity: 1;
   transform: translate(0, 0) scale(1.0);
}

.main-company-con {}

.main-company-point img {
   position: relative;
   height: 100%;
   animation: upDown 1.5s ease-in-out infinite;
}

.main-company-bg {
   position: relative;
   width: 100%;
   /* height: 103.9rem; */
   height: 0;
   padding-top: 54.1%;
   opacity: 0.9;
   position: relative;
}

.main-company-bg canvas {
   position: absolute;
   top: 0;
   left: 0%;
   width: 100% !important;
   height: 100% !important;
}

.main-company-item {
   position: absolute;
   left: 50%;
   z-index: 1;
}

.main-company-item:before {
   position: absolute;
   /*bottom:  -22.5rem; */
   bottom: -11.7188vw;
   left: 50%;
   margin-left: -0.1rem;
   width: 0.2rem;
   height: 0;
   content: '';
   transition: var(--transition-custom2);
   transition-property: height;
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#055062+0,8eb8bb+100 */
   background: linear-gradient(to bottom, rgba(5, 80, 98, 1) 0%, rgba(142, 184, 187, 1) 100%);
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.main-company-item:after {
   position: absolute;
   bottom: -0.3rem;
   left: 50%;
   margin-left: -0.3rem;
   width: 0.6rem;
   height: 0.6rem;
   background-color: #11607b;
   border-radius: 100%;
   content: '';
   opacity: 0;
   align-items: center;
   justify-content: center;
   transition: var(--transition-custom);
   transition-property: opacity;
}

.main-company-item.item01 {
   /* margin-left: 9rem; */
   margin-left: 4.6875vw;
   top: 27rem;
   top: 26.11%;
}

.main-company-item.item02 {
   /* margin-left: 40rem; */
   margin-left: 20.8333vw;
   top: 15.6rem;
   top: 15.08%;
}

.main-company-inner {
   /* width: 24.5rem; height: 16rem; */
   width: 12.7604vw;
   height: 8.3333vw;
   opacity: 0;
   transition: var(--transition-custom);
   transition-property: opacity;
}

.main-company-item a {
   width: 100%;
   height: 100%;
   border-radius: 1.5rem;
   background-color: #16222c;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: relative;
   transition: var(--transition-custom);
   transition-property: background-color;
}

.main-company-item a:before {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 1.5rem;
   content: '';
   background: url("../images/main/main_company_cover.png") center/cover no-repeat;
   opacity: 1;
   transition: var(--transition-custom);
   transition-property: opacity;
}

.main-company-icon {
   /* width: 8rem; height: 6.5rem; */
   width: 4.1667vw;
   height: 3.3854vw;
   display: block;
   position: relative;
   transition: var(--transition-custom);
   transition-property: background;
}

.main-company-icon01 {
   background: url("../images/main/main_company_icon01.png") center/cover no-repeat;
}

.main-company-icon02 {
   background: url("../images/main/main_company_icon02.png") center/cover no-repeat;
}

.main-company-txt {
   margin-top: 1rem;
   width: 100%;
   padding: 0 1rem;
   font-size: 2.2rem;
   line-height: 1.3;
   font-weight: 600;
   color: #fff;
   text-align: center;
   position: relative;
   box-sizing: border-box;
}

.main-company-item a:hover {
   background-color: var(--main-color);
}

.main-company-item a:hover:before {
   opacity: 0;
}

.main-company-item a:hover .main-company-icon01 {
   background: url("../images/main/main_company_icon01_on.png") center/cover no-repeat;
}

.main-company-item a:hover .main-company-icon02 {
   background: url("../images/main/main_company_icon02_on.png") center/cover no-repeat;
}

.main-company-bg.animated .main-company-item:before {
   /* height: 22.5rem; */
   height: 11.7188vw;
   transition-delay: 0.5s;
}

.main-company-bg.animated .main-company-item:after {
   opacity: 1;
   transition-delay: 1.3s;
}

.main-company-bg.animated .main-company-inner {
   opacity: 1;
   transition-delay: 1.2s;
}

@media all and (max-width: 1280px) and (min-width: 801px) {
   .main-company-point {
      top: -calc(8.4635vw + 10rem);
      left: 4.5573vw;
      height: 27.3438vw;
   }

   .main-company-con {
      margin-top: 10rem;
   }

   .main-company-item:before {
      bottom: -14.6484vw;
   }

   .main-company-item.item01 {
      margin-left: 2.6vw;
      top: 22.11%;
   }

   .main-company-item.item02 {
      margin-left: 18.85vw;
      top: 5.08%;
   }

   .main-company-inner {
      width: 15.9505vw;
      height: 10.4167vw;
   }

   .main-company-icon {
      width: 5.2083vw;
      height: 4.2318vw;
   }

   .main-company-bg.animated .main-company-item:before {
      height: 14.6484vw;
   }
}

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

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

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

@media all and (max-width:1280px) {}

@media all and (max-width:800px) {
   #mainCompanyCon {
      padding: 7.5rem 0 10rem;
   }

   #mainCompanyCon .main-tit-box {
      top: 18.7500vw;
      top: 0;
   }

   .main-company-point {
      top: -16.2500vw;
      left: 8.7500vw;
      height: 52.5000vw;
      top: -13.25vw;
      height: 39.5vw;
   }

   .main-company-con {
      margin-top: 5rem;
      position: relative;
      left: 50%;
      width: 102.4rem;
      transform: translateX(-65%);
   }

   .main-company-item:before {
      bottom: -16rem;
      left: 50%;
      margin-left: -0.1rem;
      width: 0.2rem;
      height: 0;
   }

   .main-company-item:after {
      bottom: -0.3rem;
      margin-left: -0.3rem;
      width: 0.6rem;
      height: 0.6rem;
   }

   .main-company-item.item01 {
      margin-left: -0.5rem;
      top: 22.11%;
   }

   .main-company-item.item02 {
      margin-left: 19rem;
      top: 0%;
   }

   .main-company-inner {
      width: 18rem;
      height: 13rem;
   }

   .main-company-icon {
      width: 6rem;
      height: 4.5rem;
   }

   .main-company-txt {
      margin-top: 0.5rem;
      width: 100%;
      padding: 0 1rem;
      font-size: 1.8rem;
      line-height: 1.3;
   }

   .main-company-bg.animated .main-company-item:before {
      height: 16rem;
   }
}

@media all and (max-width:480px) {
   .main-company-con {
      transform: translateX(-67%);
   }
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(Products) -------- */

#mainProductsCon {
   padding: 10rem 0 34rem;
}

.main-products-con {
   display: flex;
   flex-wrap: wrap;
}

.main-products-left {
   width: 50%;
}

.main-products-tab-list {
   margin-top: 12.5rem;
   width: 100%;
   max-width: 38.5rem;
}

.main-products-tab-item {
   width: 100% !important;
   display: block;
}

.main-products-tab-inner {
   padding: 0 7rem 0 3.5rem;
   width: 100%;
   height: 7.6rem;
   font-size: 2.2rem;
   line-height: 1.3;
   letter-spacing: -0.025em;
   font-weight: 500;
   color: #435665;
   background-color: transparent;
   border-radius: 1rem;
   overflow: hidden;
   display: flex;
   align-items: center;
   box-sizing: border-box;
   position: relative;
   transition: var(--transition-custom);
   transition-property: color, background-color;
}

.main-products-tab-inner:before {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 1rem;
   content: '';
   background: url("../images/main/main_products_tab_cover.png") center/cover no-repeat;
   opacity: 0;
   transition: var(--transition-custom);
   transition-property: opacity;
}

.main-products-tab-inner a {
   position: absolute;
   top: 50%;
   margin-top: -1.7rem;
   right: 3rem;
   font-size: 3rem;
   color: var(--main-color);
   opacity: 0;
   transition: var(--transition-custom);
   transition-property: opacity;
}

.main-products-tab-inner a i {
   transform: rotate(45deg);
   transition: var(--transition-custom);
   transition-property: transform;
}

.main-products-tab-item .main-products-tab-inner:hover {
   color: #fff;
}

.main-products-tab-item.active-item .main-products-tab-inner {
   color: #fff;
   background-color: #0b1f2c;
}

.main-products-tab-item.active-item .main-products-tab-inner a {
   opacity: 1;
}

.main-products-tab-item.active-item .main-products-tab-inner a:hover i {
   transform: rotate(45deg) translate(0rem, -1rem);
}

.main-products-right {
   padding-top: 7.5rem;
   width: 50%;
}

.main-products-img-list {}

.main-products-img-list .slick-list {
   overflow: visible;
}

.main-products-img-item {
   width: 100%;
}

.main-products-img-item a {
   width: 100%;
   display: block;
}

.main-products-img {
   margin-left: -4.1667vw;
   width: 54.0625vw;
   position: relative;
   display: block;
}

.main-products-img span {
   position: relative;
   width: 100%;
   height: 0;
   padding-top: 59.63%;
   display: block;
}

.main-products-img span:after {
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   background-color: #091925;
   content: '';
   transition: var(--transition-custom2);
   transition-property: width;
}

.main-products-txt {
   margin-top: -4.5rem;
   position: relative;
   z-index: 1;
   opacity: 0;
   transform: translateY(50px);
   transition: var(--transition-custom2);
   transition-property: opacity, transform;
}

.main-products-txt h5 {
   font-size: 7.6rem;
   line-height: 1.1;
   letter-spacing: -0.025em;
   font-weight: 400;
   color: #fff;
}

.main-products-txt p {
   margin-top: 2rem;
   font-size: 2.3rem;
   line-height: 1.5;
   letter-spacing: -0.035em;
   color: rgba(255, 255, 255, 0.85);
}

.main-products-tab-item.active-item a:before {
   opacity: 0.7;
}

.main-products-img-item.active-item .main-products-img span:after {
   width: 0;
}

.main-products-img-item.active-item .main-products-txt {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.3s;
}

@media all and (max-width:1280px) {
   #mainProductsCon {
      padding: 10rem 0 24rem;
   }

   .main-products-txt h5 {
      font-size: 7rem;
   }
}

@media all and (max-width:800px) {
   #mainProductsCon {
      padding: 10rem 0 15rem;
   }

   .main-products-con {
      display: flex;
      flex-wrap: wrap;
   }

   .main-products-left {
      width: 100%;
   }

   .main-products-tab-list {
      position: absolute !important;
      left: -999999px;
      visibility: hidden;
   }

   .main-products-right {
      padding: 3rem 4rem 0;
      width: 100%;
      position: relative;
      box-sizing: border-box;
   }

   .main-products-img-list {
      margin: 0 -2rem;
   }

   .main-products-img-item {
      margin: 0 2rem;
      width: calc(100% - 4rem);
   }

   .main-products-img {
      margin-left: 0;
      width: 100%;
   }

   .main-products-img span:after {
      width: 0;
   }

   .main-products-txt {
      margin-top: 3rem;
      position: relative;
      z-index: 1;
      opacity: 1;
      transform: translateY(0);
   }

   .main-products-txt h5 {
      font-size: 3.6rem;
      line-height: 1.1;
      letter-spacing: -0.025em;
      font-weight: 400;
      color: #fff;
   }

   .main-products-txt p {
      margin-top: 2rem;
      font-size: 2rem;
      line-height: 1.5;
      letter-spacing: -0.035em;
      color: rgba(255, 255, 255, 0.85);
   }

   .main-products-right .slick-arrow {
      position: absolute;
      bottom: -20px;
   }

   .main-products-right .slick-prev {
      left: 0;
   }

   .main-products-right .slick-next {
      right: 0;
   }
}

/* -------- 메인 컨텐츠 :: 컨텐츠5(Office) -------- */

#mainOfficeCon {
   padding-bottom: 13rem;
}

@media all and (max-width:800px) {
   #mainOfficeCon {
      padding-bottom: 13rem;
   }
}

/* -------- 메인 컨텐츠 :: 컨텐츠5(Recruit) -------- */

#mainRecruitCon {}

.main-recruit-con {
   padding: 13rem 0;
   width: 100%;
   position: relative;
   display: block;
   border-top: 2px solid rgba(29, 65, 90, 0.7);
   border-bottom: 2px solid rgba(29, 65, 90, 0.7);
}

.main-recruit-txt {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
}

.main-recruit-txt h5 {
   font-size: 6rem;
   line-height: 1.1;
   letter-spacing: -0.035em;
   font-weight: 600;
   color: #fff;
}

.main-recruit-txt p {
   margin-top: 2rem;
   font-size: 3rem;
   line-height: 1.5;
   letter-spacing: -0.015em;
   color: var(--main-color);
}

.main-recruit-img {
   position: relative;
   height: 39.4rem;
   max-height: 394px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
}

.main-recruit-img img {
   position: absolute;
   top: 0;
   right: 0;
   height: 100%;
   filter: drop-shadow(3.4rem 3.4rem 7.6rem rgba(0, 0, 0, 0.1));
   transition: var(--transition-custom);
   transition-property: opacity;
}

.main-recruit-img .ori {
   opacity: 1;
}

.main-recruit-img .hover {
   opacity: 0;
}

.main-recruit-img .icon {
   position: absolute;
   top: 3.5rem;
   right: 3.5rem;
   display: block;
}

.main-recruit-img .icon i {
   font-size: 6rem;
   color: #fff;
   transform: rotate(45deg);
   transition: var(--transition-custom);
   transition-property: transform;
}

.main-recruit-con:hover .main-recruit-img .ori {
   opacity: 0;
}

.main-recruit-con:hover .main-recruit-img .hover {
   opacity: 1;
}

.main-recruit-con:hover .main-recruit-img .icon i {
   transform: rotate(45deg) translate(0rem, -3rem);
}

@media all and (max-width:1280px) {
   .main-recruit-img {
      height: 30.4rem;
   }

   .main-recruit-txt h5 {
      font-size: 5rem;
   }
}

@media all and (max-width:800px) {
   .main-recruit-con {
      padding: 13rem 0;
      width: 100%;
      position: relative;
      display: block;
      border-top: 2px solid rgba(29, 65, 90, 0.7);
      border-bottom: 2px solid rgba(29, 65, 90, 0.7);
   }

   .main-recruit-txt {
      position: static;
      top: 50%;
      transform: translateY(0);
      z-index: 1;
   }

   .main-recruit-txt h5 {
      font-size: 4.2rem;
      line-height: 1.3;
   }

   .main-recruit-txt p {
      margin-top: 2rem;
      font-size: 3rem;
      line-height: 1.5;
   }

   .main-recruit-img {
      margin-top: 3rem;
      position: relative;
      height: 18.4rem;
      max-height: 394px;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .main-recruit-img img {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      filter: drop-shadow(3.4rem 3.4rem 7.6rem rgba(0, 0, 0, 0.1));
      transition: var(--transition-custom);
      transition-property: opacity;
   }

   .main-recruit-img .icon {
      position: absolute;
      top: 3.5rem;
      right: 3.5rem;
   }

   .main-recruit-img .icon i {
      font-size: 6rem;
   }
}

/* -------- 메인 컨텐츠 :: 컨텐츠6(News room) -------- */

#mainNewsCon {
   padding: 25.5rem 0 26rem;
}

.main-news-con {
   position: relative;
}

.main-news-con .main-tit-box {
   position: absolute;
   top: 9rem;
   left: 0;
   z-index: 99;
}

.main-news-wrapper {}

.main-news-list {
   margin: -2.5rem;
   display: flex;
   flex-wrap: wrap;
}

.main-news-item {
   margin: 2.5rem;
   width: calc(50% - 5rem);
   opacity: 0;
   transform: translateY(30px);
   transition: var(--transition-custom2);
   transition-property: opacity, transform;
}

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

.main-news-top {}

.main-news-top .category {
   font-size: 1.7rem;
   line-height: 1.3;
   letter-spacing: -0.025em;
   font-weight: 600;
   color: var(--main-color);
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: var(--transition-custom);
   transition-property: color;
}

.main-news-top .tit {
   margin-top: 1.5rem;
   height: 2.84em;
   font-size: 2.6rem;
   line-height: 1.42;
   letter-spacing: -0.025em;
   font-weight: 600;
   color: #fff;
   overflow: hidden;
   display: block;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.main-news-bottom {
   margin-top: 6rem;
}

.main-news-bottom .date {
   display: inline-block;
   position: relative;
   padding-right: 3.2rem;
   font-size: 1.7rem;
   line-height: 2.4rem;
   color: rgba(255, 255, 255, 0.6);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: var(--transition-custom);
   transition-property: color;
}

.main-news-bottom .date:after {
   position: absolute;
   top: 0;
   right: 0;
   font-size: 2rem;
   color: #fff;
   content: "\ea4b";
   font-family: xeicon;
}

.main-news-item a:hover {
   background-color: var(--main-color);
}

.main-news-item a:hover .main-news-top .category {
   color: rgba(255, 255, 255, 0.8);
}

.main-news-item a:hover .main-news-bottom .date {
   color: #fff;
}

.main-news-wrapper.animated .main-news-item {
   opacity: 1.0;
   transform: translateY(0);
}

.main-news-wrapper.animated .main-news-item:nth-child(1) {
   transition-delay: 0.25s;
}

.main-news-wrapper.animated .main-news-item:nth-child(2) {
   transition-delay: 0.4s;
}

.main-news-wrapper.animated .main-news-item:nth-child(3) {
   transition-delay: 0.55s;
}

.main-news-wrapper.animated .main-news-item:nth-child(4) {
   transition-delay: 0.7s;
}

@media all and (max-width:1280px) {}

@media all and (max-width:800px) {
   #mainNewsCon {
      padding: 13rem 0;
   }

   .main-news-con .main-tit-box {
      position: static;
   }

   .main-news-wrapper {
      margin-top: 3rem;
   }

   .main-news-list {
      margin: -1.5rem;
   }

   .main-news-item:first-child {
      display: none;
   }

   .main-news-item {
      margin: 1.5rem;
      width: calc(100% - 3rem);
   }

   .main-news-item a {
      padding: 3.5rem 3rem;
   }

   .main-news-top .category {
      font-size: 1.7rem;
      line-height: 1.3;
   }

   .main-news-top .tit {
      margin-top: 1.5rem;
      height: 2.84em;
      font-size: 2.6rem;
      line-height: 1.42;
   }

   .main-news-bottom {
      margin-top: 6rem;
   }

   .main-news-bottom .date {
      padding-right: 3.2rem;
      font-size: 1.7rem;
      line-height: 2.4rem;
   }

   .main-news-bottom .date:after {
      font-size: 2rem;
   }
}

/* ******************  메인 오른쪽 퀵메뉴 ********************** */

#rightBar {
   position: fixed;
   left: 50%;
   margin-left: 64rem;
   bottom: 6rem;
   /* right:2%;  */
   z-index: 1000;
   transition: var(--transition-custom2);
}

#rightBar.fixed {}

#rightBar>ul {}

#rightBar>ul>li>a {
   width: 13.6rem;
   height: 13.6rem;
   font-size: 2rem;
   line-height: 1.3;
   letter-spacing: -0.015em;
   color: #fff;
   background-color: #0b212d;
   text-align: center;
   border-radius: 2rem;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transition: var(--transition-custom);
   position: relative;
}

#rightBar>ul>li>a:before {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 2rem;
   content: '';
   background: url("../images/main/online_quick_cover.png") center/auto no-repeat;
   opacity: 1;
   transition: var(--transition-custom);
   transition-property: opacity;
}

#rightBar>ul>li>a i {
   margin-top: 1.5rem;
   font-size: 3.8rem;
   color: var(--main-color);
   transition: var(--transition-custom);
   transition-property: color;
}

#rightBar>ul>li>a:hover {
   background: var(--main-color);
   box-shadow: 0 0 6.2rem 1rem rgba(0, 176, 199, 0.3);
}

#rightBar>ul>li>a:hover:before {
   opacity: 0;
}

#rightBar>ul>li>a:hover i {
   color: #fff;
}

@media all and (max-width:1620px) {
   #rightBar {
      left: auto;
      margin-left: 0;
      bottom: 8rem;
      right: var(--area-padding);
   }
}

@media all and (max-width: 1280px) {
   #rightBar {}

   #rightBar.fixed {
      visibility: hidden;
      opacity: 0;
   }
}

figure.wp-block-gallery.has-nested-images {
   margin-top: 30px;
}

.news-content .wp-block-image {
   margin: 20px auto;
   max-width: 800px;
}