@charset "utf-8";
/* ===================================================== */
/* MAIN-COMMON */
.body-main #wrap {overflow: hidden;}
.body-main #skip-nav::before {content: ''; position: fixed; inset: 0; pointer-events: none; background-color: #000; z-index: 9999; animation: fade-out .8s ease-in .2s both;}


.section {width: 100vw; height: 100vh; color: #fff; background: #02192e no-repeat center/cover; overflow: hidden;}
.sec-header {position: relative; padding: 20rem 0; min-height: 80vh;}
.sec-tit {margin-bottom: 15px; font-weight: 700; font-size: 4rem; letter-spacing: 0.2em;}
.sec-desc {font-size: 2.4rem;}

.section:nth-child(2) {background-image: url(../images/main/section_bg02.jpg);}
.section:nth-child(3) {background-image: url(../images/main/section_bg03.jpg);}

.main-slider > .slick-list {padding: 0 !important;}
.main-slider > .slick-track {height: 100vh;}

@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1280px){
}
@media (max-width: 1024px){
  .section {height: auto;}
}
@media (max-width: 768px){
}
@media (max-width: 576px){
}
@media (max-width: 480px){
}
/* MAIN-COMMON */
/* ===================================================== */


/* ===================================================== */
/* MAIN-VISUAL */
.visual {height: 100%; position: relative; overflow: hidden;}
.visual-slide {height: 100vh; height: 100svh; min-height: 60rem; }
.visual-slide-img { display: block; height: 100%; background: #222 no-repeat center/cover; transform: scale(1.1); transition: 4s linear;} 
.visual-slide-img video {display: none; inset: 0; position: absolute; min-width: 100%; min-height: 100%; object-fit:cover;}
.visual-01::after,
.visual-02::after {display: block; content: ''; height: 350px; inset: 0; position: absolute; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));}
.visual-02::before {display: block; content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); z-index: 1;}
.visual-01 {background-image: url(../images/main/main_visual01.jpg);}
.visual-02 {background-image: url(../images/main/main_visual02.jpg);}
.visual-03 {background-image: url(../images/main/main_visual03.jpg);}
.visual-04 {background-image: url(../images/main/main_visual04.jpg);}
.visual-on .visual-slide-img { transform: scale(1.01); } 

.visual-txt-slide {padding-top: 20rem;}
.visual-txt {text-align: center; position: absolute; inset: 50% 0 auto; z-index: 10; font-weight: 800; transform: translateY(-70%); } 
.visual-tit {display: inline-block; font-size: 6rem; position: relative;}
.visual-tit::after {display: block; content: ''; width: 110px; height: 110px; background: url(../images/main/visual-tit_logo.png) no-repeat center; position: absolute; top: -4.5rem; right: -13.5rem; transform: translate(-50%, -50%);}
.visual-tit::before {display: block; content: ''; width: 151px; height: 151px; background: url(../images/main/visual-tit_logo-text.png) no-repeat center; position: absolute; top: -4.5rem; right: -17.5rem; transform: translate(-50%, -50%); animation: is-any 20s linear infinite;}
@keyframes is-any {
  100% {transform: translate(-50%, -50%) rotate(-360deg);}
}

.visual-desc {font-size: 30px; margin-top: 1.5rem;}
.visual-on .visual-desc {animation: fade-in 1.2s ease-out 2.5s both;}
.visual-on .visual-tit .char {
  --vdd: 1.6s; /* visual-desc 애니메이션 시간 */
  animation: fade-in .5s ease-out calc(.8s + (var(--vdd) / var(--char-total) * var(--char-index))) both; } 

.visual-dot-wrap {position: absolute; top: 50%; left: var(--outer-padding); z-index: 10; transform: translateY(-50%); animation: fade-in .4s linear 1.6s both; } 
.visual-dot {display: flex; flex-direction: column; align-items: center;}
.visual-dot button {width: 10px; height: 10px; border-radius: 50%; margin: 15px 0; font-size: 0; background-color: rgba(255, 255, 255, 0.25);}
.visual-dot li.slick-active button, 
.visual-dot li:not(.slick-active) button:hover {background-color: #fff;}

.progress-container {width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); position: relative;}

.pause-play-btn {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: url(../images/common/ico_pause.png) no-repeat center;}
.pause-play-btn.pause {background-image: url(../images/common/ico_play.png); background-position: 60% center;}

.progress-ring-circle {fill: none; stroke: #fff; stroke-dasharray: 176; stroke-dashoffset: 176; transition: stroke-dashoffset 0.2s; transform: rotate(-90deg); transform-origin: 50% 50%;}

/* 스크롤 다운 */
.visual-scroll {position: fixed; right: 0; top: 50%; z-index: 10; transition: .3s; } 
.visual-scroll.is-none {display: none;}
.visual-scroll-btn { font-weight: 500; font-size: calc(9px + 0.5rem); line-height: 0.7; color: #fff; letter-spacing: 0.15em; text-transform: uppercase;} 
.visual-scroll-line {display: block; overflow: hidden; position: relative; width: 120px; height: 1px; margin-bottom: calc(0.5vh + 0.5em); background-color: var(--color-white-a4); } 
.visual-scroll-line::before { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-color: #fff; content: ''; animation: scroll-line 2.5s linear infinite; } 
@keyframes scroll-line { 
  0% { transform: translateX(-110%); } 
  10% { transform: translateX(-60%); } 
  60% { transform: translateX(160%); } 
  70% { transform: translateX(210%); } 
  100% { transform: translateX(210%); } 
}

.footer-copy {font-family: var(--font-montserrat); font-size: 14px; font-weight: 600; color: #fff; letter-spacing: 0.1em; position: absolute; bottom: 2.5rem; left: var(--outer-padding);}

@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1440px) {
  .visual-tit {font-size: 5rem;}
  .visual-desc {font-size: 28px;}
}
@media (max-width: 1280px) {
  .visual-tit::after {width: 80px; height: 80px; background-size: contain;}
  .visual-tit::before {width: 110px; height: 110px; background-size: contain; right: -17rem;}

  .visual-04 {background-position: left center;}
}
@media (max-width: 1024px) {
  .visual-tit {font-size: 4rem;}

  .visual-scroll {top: 10% !important;}
}
@media (max-width: 768px) {
  .visual-tit::after {width: 50px; height: 50px; right: -9rem;}
  .visual-tit::before {width: 70px; height: 70px; right: -11.5rem;}

  .visual-desc {font-size: 24px;}
}
@media (max-width: 576px) {
  .visual-dot-wrap {top: 90%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg);}
  .progress-container {transform: rotate(90deg);}

  .visual-txt-slide {padding: 20rem 2rem 0;}
  .visual-tit::after {right: -4rem;}
  .visual-tit::before {right: -6.5rem;}
}
@media (max-width: 480px) {
  .visual-txt-slide {padding: 20rem 0 0;}
  .visual-tit {font-size: 3.5rem;}
  .visual-desc {font-size: 18px;}
  .visual-tit::after {right: -2.5rem;}
  .visual-tit::before {right: -5rem;}
}
/* MAIN-VISUAL */
/* ===================================================== */


/* ===================================================== */
/* */
.main__rnd {display: flex; align-items: center; height: 100%; padding: 0 var(--outer-padding); box-sizing: border-box;}
.main__rnd .sec-header {white-space: nowrap; margin-right: 6rem;}
.main__rnd .sec-desc {font-size: 20px; font-weight: 600;}
.main__rnd .sec-tit {font-size: 5rem; font-weight: 700; letter-spacing: -0.012em; margin-top: 2rem;}
.slick-center .main__rnd .sec-tit .char {--vdd: 1.6s; animation: fade-in .5s ease-out calc(.8s + (var(--vdd) / var(--char-total) * var(--char-index))) both; } 

.main__rnd_list {display: flex; align-items: flex-start; gap: 30px;}
.main__rnd_list .item {flex: 1; border-radius: 10px; background: #000; padding: 50px 40px 60px; max-width: 435px; position: relative;}
.main__rnd_list .item.nth-2 {margin-bottom: -10rem; margin-top: 10rem;}
.main__rnd_list .item.nth-3 {margin-bottom: -5.5rem; margin-top: 5.5rem;}
.main__rnd_list .tit {font-size: 4.5rem; font-weight: 700; margin: 0 2.5rem;}
.main__rnd_list .sub-tit {border-top: 1px solid rgba(0, 107, 151, 0.9); border-bottom: 1px solid rgba(0, 107, 151, 0.9); margin: 2rem 2.5rem 0;}
.main__rnd_list .sub-tit span {display: inline-block; padding: 25px 0; margin: 0 auto; border-radius: 10px; font-size: 17px; font-weight: 700; color: #0091cc; line-height: 1.4;}
.main__rnd_list .text-list {padding-top: 4rem; font-size: 19px; font-weight: 700; line-height: 1.4; padding-left: 40%; transition: all 0.3s ease-in-out;}
.main__rnd_list .nth-1 .text-list {background: url(../images/main/ico_rnd01.png) no-repeat 30px 30px;}
.main__rnd_list .nth-2 .text-list {background: url(../images/main/ico_rnd02.png) no-repeat 20px 40px;}
.main__rnd_list .nth-3 .text-list {background: url(../images/main/ico_rnd03.png) no-repeat 25px 50px; padding-left: 50%;}
.main__rnd_list li+li {margin-top: 3rem;}
.main__rnd_list li p {padding-left: 12px; position: relative;}
.main__rnd_list li p::after {display: block; content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; position: absolute; top: 10px; left: 0;}
.main__rnd_list .btn {position: absolute; bottom: -40px; right: 60px; width: 80px; height: 80px; transform: translate(50%, 50%);}
.main__rnd_list .btn a {display: block; font-size: 0; width: 0; height: 0; transform: translate(-50%, -50%) rotate(-360deg); border-radius: 50%; background: #000 url(../images/common/ico_plus01.png) no-repeat center; transition: all 0.3s ease-in-out;}

.main__rnd_list .item:hover {background-color: #fff; animation: rnd-btn 1.5s infinite linear;}
.main__rnd_list .item:hover .tit {color: #0091cc;}
.main__rnd_list .item:hover .sub-tit {border: 0;}
.main__rnd_list .item:hover .sub-tit span {color: #fff; background: #0091cc; padding: 25px 30px;}
.main__rnd_list .item:hover .btn a {transform: translate(-50%, -50%) rotate(0); width: 80px; height: 80px;}
.main__rnd_list .btn a:hover {background-color: var(--color-sub02);}
.main__rnd_list .item:hover li {color: #0091cc;}
.main__rnd_list .item:hover li p::after {background: #000;}

@keyframes rnd-btn {
	33% { transform: translateY(2px); } 
	66% { transform: translateY(-4px); } 
}

@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1920px) {
  .main__rnd .sec-header {margin-right: 3rem;}
  .main__rnd .sec-tit {font-size: 4rem;}
  .main__rnd_list .item {padding: 30px 5px 60px;}
  .main__rnd_list .tit {font-size: 4rem;}
  .main__rnd_list .sub-tit span {padding: 15px 0;}
  .main__rnd_list .text-list {font-size: 17px;}

  .main__rnd_list .item:hover .sub-tit span {padding: 15px 20px;}
}
@media (max-width: 1440px) {
  .main__rnd .sec-desc {font-size: 18px;}
  .main__rnd .sec-tit {font-size: 3.5rem;}
  .main__rnd_list li+li {margin-top: 2rem;}
  .main__rnd_list .item {padding-bottom: 45px;}
  .main__rnd_list .sub-tit span {font-size: 16px;}
  .main__rnd_list .text-list {padding-top: 2rem; padding-left: 30%; font-weight: 600;}
  .main__rnd_list .nth-1 .text-list {background-size: 20% auto;}
  .main__rnd_list .nth-2 .text-list {background-size: 20% auto;}
  .main__rnd_list .nth-3 .text-list {background-size: 20% auto; padding-left: 35%;}
}
@media (max-width: 1280px) {
  .main__rnd {flex-wrap: wrap; align-content: center;}
  .main__rnd .sec-header {margin-right: 0; width: 100%; min-height: 1px; padding: 0;}
  .main__rnd .sec-header br {display: none;}
  .main__rnd .sec-tit {margin: 1rem 0 3rem;}
}
@media (max-width: 1024px) {
  .main__rnd {padding-top: var(--header-height); padding-bottom: 15rem;}
  .main__rnd_list {gap: 10px;}
  .main__rnd_list .tit {margin: 0 1.5rem; font-size: 3rem;}
  .main__rnd_list .sub-tit {margin: 2rem 1.5rem 0;}
  .main__rnd_list .sub-tit span {font-size: 14px; font-weight: 500;}
  .main__rnd_list .text-list {padding-left: 0; margin: 0 1.5rem; background: none; font-size: 15px; font-weight: 500;}
  .main__rnd_list .nth-1 .text-list,
  .main__rnd_list .nth-2 .text-list,
  .main__rnd_list .nth-3 .text-list {padding-left: 0; background: none;}

  .main__rnd_list .btn a {background-color: var(--color-sub02); transform: translate(-50%, -50%) rotate(0); width: 80px; height: 80px;}
}
@media (max-width: 768px) {
  .main__rnd_list {flex-direction: column; width: 100%;}
  .main__rnd .sec-desc {white-space: wrap;}
  .main__rnd_list .item {max-width: 100%; width: 100%; flex: auto; padding: 15px 5px;}
  .main__rnd_list .item.nth-2,
  .main__rnd_list .item.nth-3 {margin: 0;}
  .main__rnd_list .sub-tit {margin-top: 5px;}
  .main__rnd_list .sub-tit span {padding: 5px 0; width: 100%;}
  .main__rnd_list .item:hover .sub-tit span {padding: 10px;}
  .main__rnd_list .text-list {padding-top: 5px;}
  .main__rnd_list li+li {margin-top: 5px;}
  .main__rnd_list li p br {display: none;}
  .main__rnd_list .btn {bottom: 10px; right: 10px; width: 50px; height: 50px;}
  .main__rnd_list .item .btn a {background-size: 50%;}
  .main__rnd_list .item .btn a {width: 50px; height: 50px;}
}
@media (max-width: 576px) {
  .main__rnd .sec-desc {font-size: 16px; width: 80%;}
  .main__rnd .sec-tit {margin: 0 0 1rem; font-size: 24px; white-space: wrap;}
  .main__rnd_list .tit {font-size: 20px;}
  .main__rnd_list .text-list {font-weight: 400; font-size: 14px;}
  .main__rnd_list .nth-2 .text-list {padding-right: 50px;}
  .main__rnd_list li p::after {top: 8px;}
}
@media (max-width: 480px) {
  .main__rnd {align-content: flex-end;}
  .main__rnd .sec-desc {font-size: 15px;}
  .main__rnd_list .item {padding: 10px 5px;}
  .main__rnd_list .item:hover .sub-tit span {padding: 5px; border-radius: 5px;}
}
/* */
/* ===================================================== */


/* ===================================================== */
/* */
.main__product {display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding-top: var(--header-height);}
.main__product .sec-header {padding: 0; padding-left: var(--outer-padding); margin-left: 4rem; min-height: 1px;}
.main__product .sec-tit {font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -0.025em;}
.main__product .sec-tit span {vertical-align: bottom; display: inline-block; width: 190px; height: 30px; background: url(../images/main/toruss-logo01.png) no-repeat center / contain; transform: translateY(-2px);}
.main__product .sec-desc {display: inline-block; padding: 5px 20px; border-radius: 5px; border: 3px solid #fff; font-size: 24px; font-weight: 800; color: #fff; letter-spacing: 0.015em;}

.main__product-wrap {display: flex; align-items: flex-end; justify-content: space-between;}
.product-list-wrap {width: 50%; padding-right: 14rem; margin-bottom: 9rem;}
.product-list.nth-1 {width: 40%; margin-right: 5%; position: relative;}
.product-list.nth-1::before {display: block; content: ''; width: 100%; height: 60%; position: absolute; bottom: 0; left: 0; background: #02192e; border-top-right-radius: 30px;}
.product-list.nth-1 .img {padding-left: var(--outer-padding); transform: translateY(5rem); position: relative; z-index: 1;}
.product-list.nth-1 img {margin-left: auto;}
.product-list.nth-1 .text-box {padding-bottom: 2rem; text-align: left; position: relative; z-index: 1;}
.product-list.nth-1 .tit {padding-left: 30%; font-family: var(--font-montserrat); font-size: 4rem; font-weight: 700; letter-spacing: 0.05em;}
.product-list.nth-1 .sub-tit {padding: 5px 0; padding-left: 30%; margin-top: 1.5rem; font-size: 25px; font-weight: 800; color: #02192e; position: relative;}
.product-list.nth-1 .sub-tit::before {display: block; content: ''; width: 100%; height: 100%; background: #0096d4; position: absolute; top: 0; right: 0;}
.product-list.nth-1 .sub-tit span {position: relative; z-index: 1;}
.product-list.nth-1 .text-list {margin-top: 2rem; padding-left: 30%;}
.product-list.nth-1 .text-list li+li {margin-top: 5px;}
.product-list.nth-1 .text-list p {font-size: 18px; font-weight: 700; position: relative;}
.product-list.nth-1 .text-list p::after {display: block; content: ''; width: 6px; height: 6px; border-radius: 50%; background: #0096d4; position: absolute; top: 12px; left: -15px;}

.product-list.nth-2 {overflow: hidden; display: flex; justify-content: flex-end;}
.product-list.nth-2 .list {width: 135%;}
.product-list.nth-2 .product-item {cursor: pointer; margin: 0 2rem; padding-top: 5px;}
.product-list.nth-2 .product-item .img {transition: all 0.3s ease-in-out;}
.product-list.nth-2 .product-item:hover .img {transform: translateY(-5px);}

.product-list-text {text-align: right; padding-top: 4rem; margin-top: 3rem; border-top: 2px solid #000; position: relative;}
.product-list-text .logo {display: inline-block; max-width: 350px;}
.product-list-text .tit {font-size: 4rem; font-weight: 800; color: #fff;}
.product-list-text .sub-tit {font-family: var(--font-montserrat); font-size: 16px; font-weight: 800; color: #fff;}
.product-list-text .sub-tit em {color: #001c5b;}
.product-list-text .sub-tit span {font-size: 20px; font-weight: 900;}
.product-list-text .desc {font-size: 20px; font-weight: 800; color: #fff;}

.product-list-text .list-nav {display: flex; position: absolute; top: 0; left: 0; transform: translate(-100%, -50%);}
.product-list-text .list-nav .slick-arrow {width: 60px; height: 60px; background: url(../images/common/ico_arrow01.png) no-repeat center; transition: all 0.3s ease-in-out;}
.product-list-text .list-nav .slick-prev {transform: rotate(180deg);}
.product-list-text .list-nav .slick-next:hover {transform: translateX(5px);}
.product-list-text .list-nav .slick-prev:hover {transform: rotate(180deg) translateX(5px);}

.product-list-text .btn {position: absolute; bottom: -15px; right: -2.5rem; transform: translateX(100%);}
.product-list-text .btn a {display: block; width: 80px; height: 80px; border-radius: 50%; background: #000 url(../images/common/ico_plus01.png) no-repeat center; font-size: 0;}
.product-list-text .btn a:hover {background-color: #0096d4;}

@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1620px) {
  .product-list.nth-1 .tit {font-size: 3.5rem; padding-left: 15%;}
  .product-list.nth-1 .sub-tit,
  .product-list.nth-1 .text-list {padding-left: 15%;}
  .product-list-wrap {padding-right: var(--inner-padding);}
  .product-list-text .btn {bottom: -75px; right: 0; transform: translateX(0);}
  .product-list-text .btn a {width: 60px; height: 60px;}
}
@media (max-width: 1440px) {
  .product-list.nth-1 .tit,
  .product-list.nth-1 .sub-tit,
  .product-list.nth-1 .text-list {padding-left: 10%;}
}
@media (max-width: 1280px) {
  .product-list.nth-1 {width: 45%;}
  .product-list.nth-1 .tit {font-size: 30px; font-weight: 600;}
  .product-list.nth-1 .sub-tit {font-size: 20px;}
  .product-list.nth-2 .list {width: 145%;}
  .product-list-text .list-nav {transform: translate(-10%, 10%);}
}
@media (max-width: 1024px) {
  .main__product .sec-header {margin-left: 0;}
  .main__product .sec-tit {font-size: 28px;}
  .main__product .sec-desc {font-size: 20px;}

  .product-list.nth-1 {width: 48%; margin-right: 2%;}
  .product-list.nth-1 .tit {padding-left: 20px; font-size: 24px; letter-spacing: -0.025em; font-weight: 500;}
  .product-list.nth-1 .sub-tit {padding-left: 20px;}
  .product-list.nth-1 .text-list {padding-left: 35px;}

  .product-list-wrap {margin-bottom: 5rem;}
  .product-list-text {padding-top: 60px;}
  .product-list-text .tit {font-size: 3.5rem;}
  .product-list-text .sub-tit {font-size: 14px;}
  .product-list-text .desc {font-size: 18px;}

  .product-list-text .btn {bottom: -40px;}
  .product-list-text .btn a {width: 40px; height: 40px; background-size: 60%;}
  .product-list-text .list-nav {transform: translate(-10%, 10%);}
}
@media (max-width: 768px) {
  .main__product-wrap {flex-direction: column;}
  .product-list.nth-1 {width: calc(100% - var(--inner-padding)); margin-right: var(--inner-padding); order: 2;}
  .product-list.nth-1 .tit,
  .product-list.nth-1 .sub-tit,
  .product-list.nth-1 .text-list {padding-left: calc(var(--inner-padding) + 20px);}
  .product-list-wrap {width: 100%; order: 1;}
  .product-list.nth-2 {display: none;}
  .product-list-text {padding-top: 30px; border-top: 0;}
  .product-list-text .list-nav {bottom: -50px; top: auto; left: auto; right: 50px; transform: translate(0, 0);}
  .product-list-text .list-nav .slick-arrow {width: 40px; height: 40px; background-size: 40%;}
  .product-list-text .btn {bottom: -50px;}
}
@media (max-width: 576px) {
  .main__product .sec-tit span {display: block;}
  .product-list-text .logo {width: 340px;}
  .product-list-text .sub-tit {font-weight: 600;}
  .product-list-text .sub-tit span {display: block;}
  .product-list-text .sub-tit em {font-weight: 700;}
}
@media (max-width: 480px) {
  .main__product .sec-tit {font-size: 24px;}
  .main__product .sec-desc {padding: 5px; border-width: 2px; font-size: 17px; font-weight: 600;}
  .product-list-text .desc {font-weight: 600;}
  .product-list-text .logo {width: 80%;}

  .product-list.nth-1::before {height: 70%;}
  .product-list.nth-1 .tit {font-size: 20px;}
  .product-list.nth-1 .sub-tit {font-size: 18px;}
  .product-list.nth-1 .text-list p {font-size: 16px; font-weight: 500;}
}
/* */
/* ===================================================== */


/* ===================================================== */
/* */
.main__business {position: relative; height: 100%;}
.main__business .inner {height: 100%; display: flex; flex-direction: column; padding-top: var(--header-height);}
.main__business .sec-header {text-align: center; font-weight: 600; min-height: 1px; padding: 8rem 0 0;}
.main__business .sec-tit {font-size: 4.5rem; letter-spacing: -0.012em;}
.main__business .sec-desc {font-size: 19px;}

.main__business .system-list {display: flex; flex-direction: column; flex: 1; gap: 12px; margin: 2rem 0 15rem;}
.main__business .system-list .item {height: 80px; transition: all 0.3s ease-in-out;}
.main__business .system-list a {display: block; height: 100%; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.25); background-color: #02192e; background-repeat: no-repeat; background-position: center top; background-size: cover; padding: 2rem 7rem; position: relative; transition: all 0.3s ease-in-out;}
.main__business .system-list a::after {display: block; content: ''; width: 18px; height: 30px; background: url(../images/common/ico_arrow02.png) no-repeat center; position: absolute; right: 25px; bottom: 23px; transition: all 0.3s ease-in-out;}
.main__business .system-list .tit {font-size: 30px; font-weight: 800; letter-spacing: -0.012em; transition: all 0.3s ease-in-out;}
.main__business .system-list .tit span {display: inline-block; transition: all 0.3s ease-in-out;}
.main__business .system-list .text-list {max-height: 0; overflow: hidden;}
.main__business .system-list .text-list li {opacity: 0; transform: translateX(-30px);}
.main__business .system-list .text-list p {font-size: 18px; font-weight: 500; letter-spacing: 0.02em; padding-left: 12px; position: relative;}
.main__business .system-list .text-list p::after {display: block; content: ''; width: 5px; height: 1px; background: #fff; position: absolute; top: 15px; left: 0;}

.main__business .system-list .text-list {max-height: 0; overflow: hidden;}
.main__business .system-list .item.active {height: 100%;}
.main__business .system-list .item.active a {padding-top: 3rem; padding-left: 70%;}
.main__business .system-list .item.nth-1.active a {background-image: url(../images/main/business_bg01.png);}
.main__business .system-list .item.nth-2.active a {background-image: url(../images/main/business_bg02.png);}
.main__business .system-list .item.nth-3.active a {background-image: url(../images/main/business_bg03.png);}
.main__business .system-list .item.active a::after {width: 78px; height: 28px; background: url(../images/common/ico_arrow03.png) no-repeat right center;}
.main__business .system-list .item.active .tit {font-size: 4rem;}
.main__business .system-list .item.active .tit span {display: block;}
.main__business .system-list .item.active .text-list {padding-top: 10px; max-height: 100%;}
.main__business .system-list .item.active .text-list li {opacity: 1; transform: translateX(0);}


.slogan {overflow: hidden; width: 100%; position: absolute; bottom: -21px; left: 0;}
.slogan .item {font-size:15rem; color: #fff; font-weight: 800; line-height:1; }
.slogan .item::before {content: attr(data-mtext) attr(data-mtext); display: inline-block; white-space: pre; animation: slogan 25s linear infinite;}

@keyframes slogan {
	0% {transform: translateX(0%);}
	100% {transform: translateX(-50%);}
}
@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1620px) {
  .main__business .system-list {margin-bottom: 12rem;}
  .main__business .system-list .item.active a {padding-left: 60%;}
  .main__business .system-list .item.active .tit {font-size: 3.5rem;}

  .slogan .item {font-size: 12rem;}
}
@media (max-width: 1440px) {
  .main__business .sec-desc {font-size: 18px;}
  .main__business .system-list a {padding-left: 5rem;}
  .main__business .system-list .tit {font-size: 26px;}
}
@media (max-width: 1280px) {
  .main__business .system-list .item.active a {padding-left: 50%;}
}
@media (max-width: 1024px) {
  .main__business .sec-header {padding-top: 0;}
  .main__business .system-list .item.active a {padding-bottom: 6rem; padding-right: 3rem;}
  .main__business .system-list a::after {bottom: 15px;}
  .main__business .system-list .item.active .tit {font-size: 24px;}
  .main__business .system-list .item.active .tit span {display: inline-block;}
  .main__business .system-list .text-list p {font-size: 16px;}
  .slogan {bottom: -10px;}
  .slogan .item {font-size: 10rem; font-weight: 700;}
}
@media (max-width: 768px) {
  .main__business .sec-desc {font-size: 16px;}
  .main__business .system-list .item.active a {padding-left: 40%; background-position-x: 70%;}
}
@media (max-width: 576px) {
  .main__business .system-list .item.active a {padding-left: 20%; background-position-x: right;}
  .main__business .system-list .item.active .tit {font-size: 20px;}
  .main__business .system-list .text-list p {font-size: 14px;}
}
@media (max-width: 480px) {
  .main__business .system-list .item.active a {padding-left: 3rem; background-position-x: 60%;}
}
/* */
/* ===================================================== */


/* ===================================================== */
/* */
.main__map {display: flex; align-items: flex-end; height: 100%; padding-top: 5rem; padding-right: var(--outer-padding);}
.main__map .map {display: flex; width: 100%; border-radius: 20px 20px 0 0; overflow: hidden; height: calc(100% - var(--header-height)); margin-right: 10rem;}
.main__map .map iframe {width: 100% !important; height: 100% !important;}

.main__map .map-menu {display: flex; margin-top: 5rem;}
.main__map .map-menu li {width: 50%;}
.main__map .map-menu a {display: block; padding: 1rem 0.5rem; text-align: center; font-size: 15px; font-weight: 800; background-color: var(--color-main); transition: all 0.3s ease-in-out;}
.main__map .map-menu li+li a {background-color: var(--color-sub);}
.main__map .map-menu a:hover {background-color: #30809d;}

.main__map .sec-header {padding: 0 0 5rem;}
.main__map img {margin: 0 auto;}
.main__map .sec-tit {margin-top: 9rem; font-size: 23px; font-weight: 700; letter-spacing: 0;}
.main__map .data-copy {display: inline-block; width: 25px; height: 25px; margin-left: 5px; font-size: 0; background: url(../images/common/ico_copy.png) no-repeat center;}
.main__map .add-wrap {margin-top: 3rem; padding: 2rem 0; border-top: 1px solid #233e71; border-bottom: 1px solid #233e71;}
.main__map .add-wrap .item {display: flex; justify-content: space-between; align-items: center; font-family: var(--font-montserrat); font-size: 20px; font-weight: 900; color: var(--color-main);}
.main__map .add-wrap a {display: block; margin-left: 2rem; font-size: 30px; color: #fff; letter-spacing: 0.2em;}

.main__map .map-info {display: flex; justify-content: space-between; margin-top: 9rem; font-size: 16px; font-weight: 700; color: #456989;}
@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1920px) {
  .main__map .map {margin-right: 5rem;}
  .main__map .sec-tit {margin-top: 5rem;}
  .main__map .map-info {margin-top: 6rem;}
}
@media (max-width: 1440px) {
  .main__map .map {margin-right: var(--outer-padding);}
  .main__map .sec-header {padding-bottom: 2rem;}
  .main__map .add-wrap a {font-size: 28px;}
}
@media (max-width: 1280px) {
  .main__map .sec-tit {font-size: 20px;}
  .main__map .add-wrap .item {flex-direction: column; align-items: flex-start;}
  .main__map .add-wrap .item+.item {margin-top: 10px;}
  .main__map .add-wrap a {margin-left: 0;}
  .main__map .map-info {flex-direction: column;}
}
@media (max-width: 1024px) {
  .main__map {flex-direction: column; padding-top: var(--header-height);}
  .main__map .sec-header {width: 100%; min-height: 1px; padding-left: var(--inner-padding); order: 1;}
  .main__map .map {order: 2; margin-top: 30px; margin-right: 0; min-height: 500px;}
  .main__map .map iframe {min-height: 500px;}

  .main__map .add-wrap {display: flex;}
  .main__map .add-wrap .item {flex-direction: row; align-items: center; font-weight: 700;}
  .main__map .add-wrap .item+.item {margin-top: 0; margin-left: 20px;}
  .main__map .add-wrap a {margin-left: 10px;}
  .main__map .map-info {flex-direction: row; justify-content: flex-start;}
  .main__map .map-info p + p {margin-left: 30px;}
}
@media (max-width: 768px) {
  .main__map .sec-tit {font-weight: 500;}
  .main__map .add-wrap .item {flex-direction: column; align-items: flex-start;}
  .main__map .add-wrap a {font-size: 24px; margin-left: 0;}
}
@media (max-width: 576px) {
  .main__map .add-wrap {flex-direction: column;}
  .main__map .add-wrap .item {flex-direction: row; justify-content: flex-start;}
  .main__map .add-wrap .item+.item {margin-top: 20px; margin-left: 0;}
  .main__map .add-wrap a {margin-left: 20px;}
}
@media (max-width: 480px) {
  .main__map .sec-tit {font-size: 18px;}
  .main__map .add-wrap a {font-size: 20px;}
  .main__map .map-info {flex-direction: column;}
  .main__map .map-info p + p {margin-left: 0; margin-top: 10px;}
}
/* */
/* ===================================================== */




/* 수정 */
@media (max-width: 1024px) {
  .visual-scroll {top: initial !important; bottom: 0 !important; right: 0%; transform: translateX(10%);}
  .visual-scroll-line {transform: rotate(90deg); margin-bottom: 0; left: -20%;}
  .visual-scroll-btn {transform: rotate(90deg);}
  .main__rnd {justify-content: space-between;}
}