@charset "utf-8";

/*
 * Project		:	헬로익스펜스 랜딩 홈페이지
 * File			:	layout_page.css
 * Author		:	YoungJae Lee
 * Date			:	Jau. 2024
 * Description	:	페이지별 스타일
 */





/* --------------------------------
*
* :: main 1.0
*
* -------------------------------- */	

/* --
* :: main 1.0 > common style
* -------------------------------- */
.mainWrap .content-cont {padding: 80px 120px 0;} /* padding-top은 상단 고정 gnb 영역 */
.mainWrap .cmTouch {padding: 0;} /* padding-top은 상단 고정 gnb 영역 */

.mSect-head {background-size: auto 100%; background-position: bottom right; background-repeat:  no-repeat;}
.mSect-body {}

.mSect-flex {display: flex; justify-content: space-between;}
.mSect-flex .mSect-box {background-color: #fff; box-shadow: 0 0 10px rgba(126,142,177,.25); border-radius: 15px; margin-left: 30px;}
.mSect-flex .mSect-box:first-child {margin-left: 0;}

.mSect-tit {font-size: 48px; font-weight: 200; text-transform: uppercase;}
.mSect-tit p {line-height: 1.4; width: fit-content;}

.bgAnmt-shaped {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; background-image: url(/img/2024/bg_diamond_00.png); background-repeat: no-repeat; background-position: left center; background-size: 72vw auto;}
.bgAnmt-shaped li {position: absolute; display: block; background-image: url("/img/2024/icon_diamond_main.png"); background-repeat: no-repeat; background-size: 100% auto; animation: rotateAni 4s linear infinite;}
.bgAnmt-shaped li:nth-child(1) {width: 12px; height: 12px; top: 83%; left: -3px; }
.bgAnmt-shaped li:nth-child(2) {width: 10px; height: 10px; top: 100px; left: 4%; }
.bgAnmt-shaped li:nth-child(3) {width: 16px; height: 16px; top: 55%; left: 8%; animation-duration: 6s; animation-name: reRotateAni;}
.bgAnmt-shaped li:nth-child(4) {width: 10px; height: 10px; top: 200px; left: 68%;}
.bgAnmt-shaped li:nth-child(5) {width: 14px; height: 14px; top: 67%; left: 77%; animation-duration: 5.5s; animation-name: reRotateAni;}
.bgAnmt-shaped li:nth-child(6) {width: 8px; height: 8px; top: 90%; left: 90%;}
.bgAnmt-shaped li:nth-child(7) {width: 20px; height: 20px; top: 130px; right: 140px; animation-duration: 8s; animation-name: reRotateAni;}
.bgAnmt-shaped li:nth-child(8) {width: 10px; height: 10px; bottom: 15px; left: 25%; }
.bgAnmt-shaped li:nth-child(9) {width: 20px; height: 20px; top: 20vh; left: 40vw; animation-duration: 6s;}
.bgAnmt-shaped li:nth-child(10) {width: 6px; height: 6px;  top: 60%; left: 58%; animation-name: reRotateAni;}

.bgAnmt-shaped li:nth-child(n+6):nth-child(-n+10) {display: none;}
.bgAnmt-shaped.rtl li:nth-child(n+6):nth-child(-n+10) {display: block;}
.bgAnmt-shaped.rtl li:nth-child(7) {display: none !important;}



/* --
* :: main 1.1, 1.2 > mVisual, mCopy
  expense 목업 이미지 animation
* -------------------------------- */
#staticImg {display: block; position: absolute; z-index: 1; width: 100%; text-align: center; transition: all 0.7s ease-in-out; animation: fadeInAni 1.2s 1.2s both;}
#staticImg img {margin-top: 50px; width: auto; height: calc(100vh - 250px); transition: height 0.7s ease-in-out, margin-top 1.6s ease-in-out;}

#staticImg.moveUp {}
#staticImg.moveUp img {}
#staticImg.moveDown {top: calc(100vh + 120px) !important;}
#staticImg.moveDown img {margin-top: 0; height: 45vh;}



/* --
* :: main 1.1 > mVisual
* -------------------------------- */
.mVisual {}
.mVisual-cont {width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-start;}

.mVisual-copy {text-align: center; padding: 60px 0;}
.mVisual-copy .main-text {font-size: 110px; font-weight: 600; padding: 15px 0 35px;}
.mVisual-copy .subMid-text {color: var(--gray-700); font-size: 26px; font-weight: 300;}
.mVisual-copy .subSm-text {font-size: 18px; font-weight: 300;}
.mVisual-copy .subSm-text p {line-height: 1.6;}
.mVisual-copy .btnArea {margin-top: 40px;}
.mVisual-copy .button {padding: 13px 30px; border-radius: 30px; border: 1px solid #333; font-size: 15px; margin-left: 10px; font-weight: 600;}
.mVisual-copy .button:hover {background: rgba(88, 96, 201, .08); border: 1px solid var(--main1); color: var(--main1); transition: .3s;}
.mVisual-copy .button:first-child {margin-left: 0;}

.mVisual-shaped {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; animation: fadeInAni 1s .5s both;}
.mVisual-shaped li {position: absolute; display: block; background-repeat: no-repeat; background-size: 100% auto; animation: rotateAni 4s linear infinite;}
.mVisual-shaped li:nth-child(1),
.mVisual-shaped li:nth-child(2),
.mVisual-shaped li:nth-child(3),
.mVisual-shaped li:nth-child(4) {background-image: url("/img/2024/icon_diamond_main.png");}
.mVisual-shaped li:nth-child(1) {width: 10px; height: 10px; top: 120px; left: 2%; animation-name: reRotateAni;}
.mVisual-shaped li:nth-child(2) {width: 20px; height: 20px; top: 155px; right: 17%; animation-duration: 8s;}
.mVisual-shaped li:nth-child(3) {width: 14px; height: 14px; top: 57%; right: 10%; animation-name: reRotateAni;}
.mVisual-shaped li:nth-child(4) {width: 12px; height: 12px; bottom: 40px; right: 20%;}
.mVisual-shaped li:nth-child(5),
.mVisual-shaped li:nth-child(6),
.mVisual-shaped li:nth-child(7) {background-image: url("/img/2024/icon_diamond_white.png");}
.mVisual-shaped li:nth-child(5) {width: 12px; height: 12px; top: 100px; left: 35%; animation-name: reRotateAni;}
.mVisual-shaped li:nth-child(6) {width: 24px; height: 24px; top: 230px; left: 15%; animation-duration: 10s;}
.mVisual-shaped li:nth-child(7) {width: 20px; height: 20px; bottom: 13%; left: 5%; animation-duration: 8s;}

.mVisual-bigShaped {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -2; animation: fadeInAni 1.4s both;}
.mVisual-bigShaped img {position: absolute; display: block; animation: rotateAni 100s linear infinite;}
.mVisual-bigShaped img:nth-child(1) {width: 130vw; height: auto; bottom: 60vh; left: -800px; transform: rotate(212deg) scaleX(-1);  opacity: .5; animation-duration: 800s;}
.mVisual-bigShaped img:nth-child(2) {width: 68vw; height: auto; top: -165px; right: -350px; opacity: .35; animation-name: reRotateAni;}
.mVisual-bigShaped img:nth-child(3) {width: 25vw; height: auto; bottom: -30vh; left: -50px; transform: rotate(136deg); animation: reRotateAni 100s linear infinite, fadeInAni 1s .5s both;}
.mVisual-bigShaped img:nth-child(4) {width: 12vw; height: auto; top: 4vh; right: -3vw; transform: rotate(77deg); animation: rotateAni 100s linear infinite, fadeInAni 1s .5s both;}



/* --
* :: main 1.2 > mCopy
* -------------------------------- */
.mCopy {overflow: hidden;}
.mCopy-cont {}

.mCopy-txt {padding: calc(45vh + 50px) 0 80px;}
.mCopyTxt-row {text-align: center; font-size: 54px; font-weight: 200; text-transform: uppercase; color: var(--gray-600); margin-top: 10px; transform: scale(8); opacity: 0; transition: all .3s ease-in;}
.mCopyTxt-row b {color: #333;}
.mCopyTxt-row.line2 {letter-spacing: 1.5px;}
.mCopyTxt-row.line3 {letter-spacing: 1px;}

.mCopy-shaped {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1;}
.mCopy-shaped.st01 img {position: absolute; display: block; width: 300px; height: auto; top: 80px; left: 50%; margin-left: 100px; animation: rotateAni 200s linear 2s infinite;}
.mCopy-shaped.st02 img {position: absolute; display: block; width: 100px; height: auto; top: 48vh; left: 50%; margin-left: -390px; animation: reRotateAni 100s linear 2s infinite;}



/* --
* :: main 1.3 > mService
* -------------------------------- */
.mService {}
.mService-cont {width: 100%; min-height: 80%; display: flex;}

.mService-left {width: 42%; display: flex; flex-direction: column; justify-content: space-between;}
.mService-left:before {content:''; position: absolute; top: 80px; bottom: 0; left: 0; width: 43%; background: var(--gray-100); border-radius: 0 0 100px 0; z-index: -5;}

.mService-tit {padding-left: 45px;}
.mService-tit .main-text {font-size: 48px; font-weight: 700;} /* font-size >>> mSect-tit과 동일 */
.mService-tit .subSm-text {font-size: 16px; text-transform: uppercase; margin-top: 40px;}
.mService-tit .subSm-text p {line-height: 1.4;}

.mService-tab {position: relative;}
.mServiceTab-btn {padding: 0 28px 0 45px; height: 75px; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
.mServiceTab-btn span {display: inline-block; position: relative; padding-left: 25px; font-size: 20px; font-weight: 600; background-repeat: no-repeat; background-size: 9px auto; background-position: left center;
										    color: var(--gray-500); background-image: url(/img/2024/icon_diamond_gray.png);}
.mServiceTab-btn i {font-size: 15px; color: #fff;}

/* hover 시 */
.mServiceTab-hover {background: var(--gradient2); width: calc(100% + 30px); height: 75px; border-radius: 40px; z-index:-1; position:absolute; top:0; left:0;}
.mServiceTab-hover:after {content: "\f054"; display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #fff; position: absolute; top: 50%; right: 30px; margin-top: -6px;}
.indicatorOn .mServiceTab-btn span {color: #fff; background-image: url(/img/2024/icon_diamond_white.png); transition: all .8s;}

/* click 시 */
.mService-tab .slick-active .mServiceTab-btn span {color: #fff; background-image: url(/img/2024/icon_diamond_white.png);}

.mService-right {width: calc(100% - 42%);}

.mService-slick-wrap,
.mService-slick-wrap .slick-list,
.mService-slick-wrap .slick-track {height: 100%;}

.mService-panel {padding-left: 40px;}
.mService-panelIn {display: flex; flex-direction: column; height: 100%; justify-content: space-between;}
.mServicePanel-subTit {font-size: 18px; color: var(--main1);}
.mServicePanel-mainTit {font-size: 40px; font-weight: 600; text-transform: uppercase; margin-top: 15px;}
.mServicePanel-copy {text-align: justify; width: 72%; font-size: 16px; font-weight: 400; line-height: 1.6; margin-top: 40px;}
.mServicePanel-img {display: flex; justify-content: flex-end; padding-right: 30px;}
.mServicePanel-img img {width: auto; height: 36vh;}



/* --
* :: main 1.4 > mEffect
* -------------------------------- */
.mEffect {}
.mEffect-cont {}

.mEffect .mSect-head {padding: 0 0 60px; /* background-image: url(/img/2024/img_mEffect_00.png); */}

.mEffect .mSect-box {flex-basis: 50%; border-top: 3px solid var(--main1); overflow: hidden;}

.mEffect .mSectBox-head {border-bottom: 1px solid var(--gray-400); padding: 25px 40px 20px; background: #f8fbff;}
.mEffect .mSectBox-tit {}
.mEffect .mSectBox-tit .main-text {font-size: 24px; color: var(--main1); font-weight: 700;}
.mEffect .mSectBox-tit .sub-text {font-size: 15px; margin-top: 15px; font-weight: 400; line-height: 1.6;}
.mEffect .mSectBox-tit .sub-text span {display: block;}

.mEffect .mSectBox-body {padding: 20px 40px 25px; background-color: #fff; background-repeat: no-repeat; background-position: right bottom; background-size: 33% auto;}
.mEffect .mSect-box:nth-child(1) .mSectBox-body {background-image: url("/img/2024/icon_mEffect_00.png");}
.mEffect .mSect-box:nth-child(2) .mSectBox-body {background-image: url("/img/2024/icon_mEffect_01.png");}
.mEffect-list {}
.mEffect-list li {margin-top: 25px; font-size: 15px; background: url("/img/2024/icon_diamond_gray.png") no-repeat left center; background-size: 8px auto; padding-left: 15px;}
.mEffect-list li:first-child {margin-top: 0;}



/* --
* :: main 1.5 > mReference
* -------------------------------- */
.mReference {}
.mReference-cont {}

.mReference .mSect-head {align-items: flex-end;}

.marquee-wrap {margin-top: 15vh;}
.marquee {display: flex; overflow: hidden; margin-top: 110px;}
.marquee:first-child {margin-top: 0;}
.marquee.reverse {flex-direction: row-reverse;}

.marquee-clone {display: flex; align-items: center;}
.marquee-clone img {height: 24px; width: auto; margin: 0 40px; filter: grayscale(100%);}



/* --
* :: main 1.6 > mType
* -------------------------------- */
.mType {}
.mType-cont {}

.mType .mSect-head {padding: 0 0 60px; /* background-image: url(/img/2024/img_mType_00.png); */}

.mType .mSect-box {flex-basis: 33.33334%; box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em; padding: 0 30px; border-radius: 30px; display: flex; flex-direction: column;}

.mType .mSectBox-head {border-bottom: 1px solid var(--gray-400); padding: 35px 0 30px;}
.mType .mSectBox-head .mSectBox-tit {}
.mType .mSectBox-head .main-text {font-weight: 700; color: var(--main1);}
.mType .mSectBox-head .sub-text {font-size: 16px; color: var(--gray-700); margin-top: 10px;}

.mType .mSectBox-body {flex-grow: 1; padding: 30px 0;}

.mType-list {}
.mType-list li {margin-top: 15px; font-size: 15px; background: url("/img/2024/icon_diamond_mainDeep.png") no-repeat left center; background-size: 6px auto; padding-left: 18px; line-height: 1.4;}
.mType-list li:first-child {margin-top: 0;}

.mType .mSectBox-foot {text-align: center;  padding: 0 0 30px;}
.mType .mSectBox-foot .btn {width: 100%;}

.mType .currentBox {box-shadow: rgb(119 166 209 / 48%) 0px 0px 16px 0px, rgba(255, 255, 255, 0.8) 0px 0px 16px 0px; border: 1.2px solid var(--main1); position: relative; border-radius: 0 30px 30px 30px;}
.mType .currentBox-tit {background: var(--gradient1); color: #fff; padding: 0 40px; line-height: 24px; position: absolute; top: -24px;  left: -1.2px; border-radius: 8px 8px 0 0;}




/* --
* :: main 1.7 > mFamily
* -------------------------------- */
.mFamily {}
.mFamily-cont {}

.mFamily .mSect-head {padding: 0 0 80px;}
.mFamily .mSect-body {position: relative; padding-right: 25px; padding-bottom: 35px;}
.mFamily .mSect-body:before {content: ''; position: absolute; background: var(--gradient2); bottom: 0; width: 100%; height: 70%; transform: scaleX(-1); z-index: -1; border-radius: 35px;}

.mFamily .mSect-box {background-color: transparent; box-shadow: none; margin-left: 0; text-align: center;}
.mFamily .mSectBox-img {}
.mFamily .mSectBox-img img {width: 100%; height: auto;}
.mFamily .mSectBox-tit {color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.25); margin-top: -15px;}
.mFamily .mSectBox-tit .sub-text {font-size: 15px; font-weight: 400;}
.mFamily .mSectBox-tit .main-text {font-size: 22px; font-weight: 600; margin-top: 5px; text-transform: uppercase;}





/* --------------------------------
*
* :: sub 2.0
*
* -------------------------------- */

/* --
* :: sub 2.0 > common layout
* -------------------------------- */

.subWrap {position: relative;}

.subMain {width: 100%; height: calc(100vh + 80px); min-height: 700px; position: relative; overflow: hidden;}
.subMain-img {background-repeat: no-repeat; background-size: cover; background-position: bottom center;
				              position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: -1;
				              -webkit-animation: subMainAni 2500ms; animation: subMainAni 2500ms;
				              -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
				              transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);}
.subMain-img.dimmBg:after {content: ''; width: 100%; height: 100%; background: rgba(18, 17, 25, 0.5); position: absolute;}

/* 서브 페이지 메인 이미지 */
/* :: 회사소개   */ .companyWrap .subMain-img {background-image: url(/img/2020/bg_img_04.jpg);}
/* :: 솔루션소개 */ .featureWrap .subMain-img {background-image: url(/img/2020/bg_img_12.jpg);}
/* :: 고객사례   */ .referenceWrap .subMain-img {background-image: url(/img/2020/bg_img_17.jpg);}
/* :: 홍보센터   */ .prcenterWrap .subMain-img {background-image: url(/img/2020/bg_img_18.jpg);}
/* :: 제품문의   */ .contactWrap .subMain-img {background-image: url(/img/2020/bg_img_15.jpg);}

@-webkit-keyframes subMainAni {
    0%    {-ms-transform: translateZ(0) scale(1.1) rotate(0.1deg); transform: translateZ(0) scale(1.1) rotate(0.1deg);}
    100%  {-ms-transform: translateZ(0) scale(1) rotate(0deg); transform: translateZ(0) scale(1) rotate(0deg);}
}
@keyframes subMainAni {
    0%    {-ms-transform: translateZ(0) scale(1.1) rotate(0.1deg); transform: translateZ(0) scale(1.1) rotate(0.1deg);}
    100%  {-ms-transform: translateZ(0) scale(1) rotate(0deg); transform: translateZ(0) scale(1) rotate(0deg);}
}

.subMain-copy {width: 100%; height: calc(100vh - 80px); min-height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.subMain-sTit {font-size: 24px; letter-spacing: 0.2em; color: #fff; font-weight: 100;}
.subMain-mTit {padding: 30px 0; letter-spacing: 0.2em; position: relative; font-size: 80px; line-height: 1; font-weight: 100; color: #fff; text-transform: uppercase; text-align: center;}
.subMain-mTit:after {content: ''; display: block; width: 30px; height: 1px; position: absolute; left: 50%; bottom: 0; background: #fff; transform: translateX(-50%);}
.subMain-desc {padding-top: 30px; font-size: 16px; line-height: 2.0; color: #fff; text-align: center;}


.subBox {margin: -160px 100px  0;}
.subBoxIn  {width: 100%; background: #fff; padding: 80px 0;}


/* section title */
.sect-tit {font-size: 50px; letter-spacing: 34px; text-transform: uppercase; font-weight: 300; text-align: center;}
.sect-tit.kr {letter-spacing: 26px;}


/* sub box 안에 있는 article section */
.art-wrap {margin-top: 80px; position: relative;}
.art-wrap:first-child,
.art-wrap:first-of-type {margin-top: 0;}

.art-cont {}
.art-cont-inner {max-width: 88%; margin: -100px auto 0; padding: 40px 80px; position: relative; background-color: #fff; border-radius: 30px;} /* content-cont 보다 더 좁은 영역을 사용할 경우 */
.art-cont-tit {margin: 0 0 38px 0; font-size: 22px; text-align: center; letter-spacing: 10px; font-weight: 600;}

/* article flex layout*/
.art-flex {margin: 120px 0 200px; display: flex; height: 550px;}

.art-flex-img {overflow: hidden; width: 35%; height: 100%; position: relative; border-radius: 30px;}
.art-flex-img img {width: auto; height: 100%; margin-left: -120px;}

.art-flex-txt {width: 60%; margin-left: 5%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 30px 0;}
.art-flex-txt img {display: block; width: 100px; height: auto;}
.art-flex-txt .tit-xl {font-weight: 200; margin-top: 20px;}
.art-flex-txt .txt-md {margin-top: 40px; text-align: justify; line-height: 1.8;}

.aspn-shortcut {font-size: 16px;}
.aspn-shortcut i {margin-left: 5px;}

/* [ article banner(img) ] area */
.art-banner {width: 100%; height: 500px; overflow: hidden; position: relative; border-radius: 30px;}
.art-banner img {width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%);}

/* [ article table ] area */
.art-table {font-size: 16px;}
.art-table .art-table-row {padding: 25px 20px; border-bottom: 1px solid var(--gray-400);}
.art-table .art-table-row:first-child {border-top: 2px solid var(--gray-700);}
.art-table .art-table-th {color: var(--main1); padding: 15px 20px;}
.art-table .flex {align-items: flex-start; line-height: 1.8;}
.art-table .fixCol {width: 200px; font-weight: 600;}
.art-table .flexCol {flex-basis: 0; margin-left: 15px; text-align: justify;}
.art-table i {width: 25px; text-align: center; color: #89879e; font-size: 11px;}

/* [ article tab panel ] area */
.art-tabSet {}

.art-tabGp {display: flex; align-items: center; width: 80%; height: 26px; text-align: center; margin: 0 auto; -webkit-transition: all 700ms ease-in-out, width 0ms; transition: all 700ms ease-in-out, width 0ms;}
.art-tab {flex: 1 1 auto; position: relative;}
.art-tab:before {content: ''; position: absolute; top: 0; left: 0; bottom: 0;  width: 2px; background: #ddd;}
.art-tab:first-child:before {display: none;}
.art-tab a {display: inline-block; font-size: 26px; opacity: .5; transition: 0.5s ease;}
.art-tab a:hover {opacity: 1;}
.art-tab.active a {opacity: 1;}
.art-tab.active .high-border:after {bottom: 0; height: 24%;}

.art-tabPanelGp {margin-top: 80px;}
.art-tabPanel:last-child {display: none;}

.art-tabGp.sticky {position: fixed; top: 90px; left: 50%; width: 60%; margin-left:-30%; height: 60px; border-radius: 30px; z-index: 10; background: var(--gradient1);}
.art-tabGp.sticky .art-tab a {font-size: 18px; color: #fff;}
.art-tabGp.sticky .high-border:after {display: none;}





/* --
* :: sub 2.1 > companyWrap
* -------------------------------- */

.art-slogan {}

/*  이력보기 */
.history-wrap {margin-top: 50px;}

.history-wrap .swiper-container {margin-top: 80px; width: 100%; height: 550px; position: relative;}
.history-wrap .swiper-wrapper {transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;}
.history-wrap .swiper-slide {position: relative; color: #fff; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100% !important; height: 100% !important;}
.history-wrap .swiper-slide::after {content: ""; position: absolute; z-index: 1; left: 20%; bottom: -12%; width: 30%; height: 50%; background-color: rgba(0, 0, 0, 0.7);  box-shadow: -230px 0 150px 45vw rgba(0, 0, 0, 0.7); border-radius: 100%;}
.history-wrap .swiper-slide-content {width: calc(100% - 30vw - 100px); position: relative; left: 30vw; top: 18%; font-size: 12px; z-index: 2;}

.history-wrap .swiper-slide .timeline-title {opacity: 0; transform: translate3d(20px, 0, 0); transition: 0.2s ease 0.4s;}
.history-wrap .swiper-slide .timeline-list {opacity: 0; transform: translate3d(20px, 0, 0); transition: 0.2s ease 0.5s; margin-top: 50px;}
.history-wrap .swiper-slide .timeline-list li {font-size: 14px; margin-top: 20px; line-height: 1.8;}
.history-wrap .swiper-slide .timeline-list li i {margin-right: 8px; color: var(--main2);}

.history-wrap .swiper-slide-active .timeline-title {opacity: 1; transform: translate3d(0, 0, 0); transition: 0.4s ease 1.6s;}
.history-wrap .swiper-slide-active .timeline-list {opacity: 1; transform: translate3d(0, 0, 0); transition: 0.4s ease 1.7s;}

.history-wrap .timeline-box-wrap {display: flex;}
.history-wrap .timeline-box {flex-basis: 33.33334%; margin-left: 50px;}
.history-wrap .timeline-box:first-child {margin-left: 0;}
.history-wrap .timeline-box .high-border:after {width: 115%; height: 30%;}

.history-wrap .swiper-pagination {left: 15vw; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-style: italic; font-size: 18px; z-index: 1;}
.history-wrap .swiper-pagination::before {content: ""; position: absolute; left: 11vw; top: 0; height: 100%; width: 1px; background-color: rgba(255, 255, 255, 0.2);}
.history-wrap .swiper-pagination-bullet {width: auto; height: auto; text-align: center; opacity: 1; background: transparent; color: rgba(255,255,255,.4); margin: 15px 0 !important; position: relative;}
.history-wrap .swiper-pagination-bullet::before {content: ""; position: absolute; top: 5px; left: calc(11vw - 4px); width: 8px; height: 8px; border-radius: 100%; transform: scale(0); transition: 0.2s; background: var(--gradient2);}
.history-wrap .swiper-pagination-bullet-active {color: #fff;}
.history-wrap .swiper-pagination-bullet-active::before {transform: scale(1);}

.history-wrap .swiper-button-next,
.history-wrap .swiper-button-prev {background-image: none; left: calc(15vw + 35px); width: 20px; height: 20px; margin-top: 0; z-index: 2; transition: 0.2s; font-size: 20px; color: #fff;}
.history-wrap .swiper-button-prev {top: 15%; transform: rotate(90deg) translate(0, 0);}
.history-wrap .swiper-button-prev:hover {transform: rotate(90deg) translate(-3px, 0); color: var(--main2);}
.history-wrap .swiper-button-next {top: auto; bottom: 15%; transform: rotate(90deg) translate(0, 0);}
.history-wrap .swiper-button-next:hover {transform: rotate(90deg) translate(3px, 0); color: var(--main2);}

/* 비젼 */
.vision-wrap {margin: 170px 0 120px;}

.vision-box {display: flex; align-items: center; margin-top: 80px; height: 690px;}

.vision-img {width: 50%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url(/img/2020/bg_img_11.jpg); border-radius: 30px; overflow: hidden;}

.vision-itemWrap {width: 50%; height: 100%; padding: 30px 0;}
.vision-item-tit {padding: 0 50px 30px; position: relative; font-weight: 400;}
.vision-item-tit:after {content: ''; width: 105%; height: 2px; position: absolute; right: 0; bottom: 0px; background: var(--gradient1);}

.vision-item-list {padding: 0 50px;}
.vision-item-list li {margin-top: 30px;}
.vision-item-list li .txt-md {background: url(/img/2020/icon_promise.svg) no-repeat; height: 40px; line-height: 50px; background-size: 34px auto; padding-left: 45px; font-weight: 600;}





/* --
* :: sub 2.2 > featureWrap
* -------------------------------- */

/* 주요기능 */
.ftrLst-wrap {position: relative; margin-top: -20px;}

.ftr-swiper {margin-top: 80px; background: var(--gray-100);}
.ftr-swiper .swiper-container {padding: 100px 50px 220px; max-width: 1250px;}
.ftr-swiper .swiper-slide {opacity: 0 !important; width: 100% !important;}
.ftr-swiper .swiper-slide-active {opacity: 1 !important;}

.ftrLst-item {display: flex; min-height: 450px;}

.ftrLst-txtWrap {width: 40%;}
.ftrLst-tit {}
.ftrLst-desc {margin-top: 40px;}
.ftrLst-list {margin-top: 40px;}
.ftrLst-list i {color: var(--main1); margin-right: 5px; font-size: 16px}
.ftrLst-list ul {margin-left: 6px; margin-top: 15px; padding-left: 30px;}
.ftrLst-list li {padding: 15px 0; position: relative;}
.ftrLst-list li:before {content:''; display: inline-block; width: 7px; height: 7px; border-radius: 100%; position: absolute; left: -34px; top: 23px; background: var(--gradient2);}
.ftrLst-list li:after {content:''; display: inline-block; width: 1px; background: rgba(114, 97, 192, 0.2); position: absolute; left: -31px; top: 25px; bottom: -25px; z-index: -1;}
.ftrLst-list li:last-child:after {display:none;}

.ftrLst-img {width: 60%; margin-top: 30px; margin-left: 15px;}
.ftrLst-img img {width: 100%; height: auto;}

.ftr-swiper .swiper-button-prev,
.ftr-swiper .swiper-button-next {display: none;}

.ftr-swiper .swiper-pagination {bottom: 30px; height: auto; display: flex; justify-content: space-between;}
.ftr-swiper .swiper-pagination::before {content: ""; position: absolute; left: 65px; right: 65px; height: 1px; background: #a3a8e6; opaciy: .6;}

.ftr-swiper .swiper-pagination-bullet {flex-basis: 10%; width: auto; height: auto; font-size: 16px; text-align: center; line-height: 1.4; opacity: 6; font-weight: 300; background: transparent; padding: 25px 0; margin: 0 !important; position: relative;}
.ftr-swiper .swiper-pagination-bullet span {display: block; font-size: 14px; color: var(--main1); font-weight: 600; margin-bottom: 8px}
.ftr-swiper .swiper-pagination-bullet:before {content: ""; position: absolute; top: -3px; left: 50%; margin-left: -4px; width: 8px; height: 8px; border-radius: 100%; background: #a3a8e6; transition: all 200ms ease-in-out;}

.ftr-swiper .swiper-pagination-bullet-active {opacity: 1; font-weight: 500;}
.ftr-swiper .swiper-pagination-bullet-active:before {width: 32px; height: 32px; top: -17px; margin-left: -16px; border: 1px solid var(--main1); background: var(--main1);	box-shadow: inset 0px 0px 0px 11px #fff;}

/* 기타기능,모바일기능,확장기능 section */
.sectFtr-wrap {margin-top: 150px;}
.sectFtr-wrap:last-of-type {margin-bottom: 80px;}

/* 모바일 기능 */
.moFtr-container {width:100%; height: calc(100vh - 80px); max-height: 700px; position: relative; margin-top: 80px; background: url(/img/2024/bg_mobile.jpg) no-repeat center center; background-size: cover;}

.ftrMo-txtWrap {position: absolute; top: 50%; transform: translate(0, -65%);}
.ftrMo-txtWrap .txt-md {margin-top: 50px; line-height: 1.8;}





/* --
* :: sub 2.3 > referenceWrap
* -------------------------------- */

.cardLst-tit {text-align: center; margin: 130px 15px 70px; border-top: 1.2px dashed #ddd; position: relative;}
.cardLst-tit div {position: absolute; font-size: 26px; background: #fff; padding: 0 20px; top: -17px; left: 50%; transform: translate(-50%, 0); white-space: nowrap;}
.cardLst-tit div .high-border:after {bottom: 0; height: 24%;}

.cardLst-wrap {display: flex; flex-wrap: wrap;}
.cardLst-wrap .cardLst {box-sizing: border-box;}

/* 구축사례 panel */
.solutionCase-wrap {}
.solutionCase-wrap .cardLst {width: calc(33.333334% - 20px); margin: 20px 10px 0; border: 1px solid #d4d4dc; border-radius: 0 0 15px 15px; box-shadow: 0px 2px 6px 0px #d4d4dc;}
.solutionCase-wrap .card-box {position: relative; padding: 15px 30px 30px; border-top: 3px solid transparent;}
.solutionCase-wrap .card-logo {}
.solutionCase-wrap .card-logo img {width: auto; height: 60px;}
.solutionCase-wrap .card-tit {font-size: 18px; font-weight: 500; margin: 10px 0 15px; line-height: 1.4;}
.solutionCase-wrap .card-subTit {font-size: 14px; font-weight: bold; margin-top: 8px;}
.solutionCase-wrap .card-subTit i {margin-right: 6px;}
.solutionCase-wrap .card-subTit span {color: #706e80; font-weight: 500; display: inline-block; width: 35px;}
.solutionCase-wrap .card-txt {margin-top: 20px; line-height: 1.8; font-weight: 500;}
.solutionCase-wrap .card-txt i {margin-right: 8px; font-size: 10px; color: #706e80;}

/* 주요고객사 panel */
.client-wrap {}
.client-wrap .cardLst {width: calc(20% - 20px); height: 130px; border-radius: 130px; text-align: center; margin: 20px 10px 0; border: 1px solid #d4d4dc; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.client-wrap .cardLst img {width: 100%; height: auto; max-width: 80%;}

.reference-info {text-align: center; font-size: 30px; font-weight: 300; margin-top: 150px; line-height: 1.5;}





/* --
* :: sub 2.4 > prcenterWrap
* -------------------------------- */

.pVideo-wrap {}

.pVideoLst-wrap {}
.pVideoLst-wrap .cardLst {width: calc(33.333334% - 20px); margin: 20px 10px 0;}
.pVideoLst-wrap .card-img {position: relative;}
.pVideoLst-wrap .card-img img {width: 100%; height: auto;}
.pVideoLst-wrap .card-img:before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0;
                                background-color: rgba(0,0,0,.6); background-image: url("/img/2020/icon_zoom.png"); background-repeat: no-repeat; background-position: center center; background-size: 60px auto;}
.pVideoLst-wrap .card-box {padding: 25px 20px;}
.pVideoLst-wrap .card-subTit {font-size: 15px; font-weight: 600; color: #706e80;}
.pVideoLst-wrap .card-tit {font-size: 18px; font-weight: 500; margin-top: 10px; line-height: 1.6;}

.pVideoLst-wrap .cardLst:hover {cursor: pointer; border-radius: 0 0 15px 15px; box-shadow: 0px 0px 40px rgba(0,0,0,.2); transition: all 0.25s ease-in-out;}
.pVideoLst-wrap .cardLst:hover .card-img:before {opacity: 1; transition: all 0.25s ease-in-out;}

.pVideoDtl-wrap {}

.modal-wrap {background: #fff; position: fixed; top: 100%; right: 180px; left: 180px; bottom: 0; border-radius: 50px 50px 0 0; z-index: 10; box-shadow: 0px 0px 150px rgba(0,0,0,.2); transition: all 300ms cubic-bezier(0.86, 0, 0.07, 1);}
.modal-wrap.active {top: 150px;}

.modal-wrapIn {padding: 60px 80px; height: 100%;}
.modal-head {display: flex; justify-content: space-between;}
.modal-sTit {font-size: 22px;}
.modal-mTit {font-size: 30px; font-weight: 500; margin-top: 13px; line-height: 1.4;}

.modal-close {position: relative; width: 50px; height: 50px; cursor: pointer;}
.modal-close > div {height: 4px; width: 50px; position: absolute; margin-top: 17px; background-color: #bdbcd0; border-radius: 2px; transition: all 0.3s ease-in;}
.modal-close .leftright {transform: rotate(45deg);}
.modal-close .rightleft {transform: rotate(-45deg);}
.modal-close label {font-size: 13px; text-transform: uppercase; letter-spacing: 2px; transition: all 0.3s ease-in; opacity: 0; margin: 53px 0 0; position: absolute;}
.modal-close:hover .leftright {transform: rotate(-45deg);  background-color: var(--main1);}
.modal-close:hover .rightleft {transform: rotate(45deg); background-color: var(--main1);}
.modal-close:hover label {opacity: 1;}

.modal-body {margin-top: 40px; height: calc(100% - 117px);}
.youtube-video {position: relative; width: 100%; height: 100%;}
.youtube-video iframe {top: 0; left: 0; position: absolute; width: 100%; height: 100%;}





/* --
* :: sub 2.5 > contactWrap
* -------------------------------- */

.contactWrap .cmTouchList-item:first-child {display: none;}

/* 문의하기 form */
#contactIfrm {height: 1150px; overflow: hidden;}

.form-wrap {}
.form-row {margin-top: 30px}
.form-row:first-of-type {margin-top: 20px;}
.form-row-tit {font-size: 18px; font-weight: 500; margin-bottom: 20px; margin-left: 8px;}
.form-row-tit i {color: var(--main1); margin-right: 8px;}
.form-row-tit img {margin-top: -4px;}
.form-row-input {border-radius: 30px; border: 1px solid var(--gray-400); background: #fff; padding: 15px 20px;}
.form-row-input input[type="text"] {display: inline-block; width: 100%; height: 100%; border: none; background: none; outline: none; resize: none; font-size: 16px;}
.form-row-input textarea {display: inline-block; width: 100%; height: 100%; overflow-y: auto; border: none; background: none; outline: none; resize: none; font-size: 16px; line-height: 1.8;}

.form-row-input.inputFocusOut {background: #fff;}
.form-row-input.inputFocusIn {background: var(--gray-100);}

.contact-privacy {margin-top: 40px;}
.contact-privacy dl {background: var(--gray-100); height: 200px; overflow-y: auto; padding: 20px; border: 1px solid var(--gray-400); border-radius: 5px;}
.contact-privacy dt {font-size: 14px; font-weight: 500; margin-top: 30px; padding-left: 12px; position: relative;}
.contact-privacy dt:first-of-type {margin-top: 0;}
.contact-privacy dt:before {content: ''; position: absolute; top: 50%; margin-top: -2px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--main1);}
.contact-privacy dd {font-size: 14px; margin-top: 10px; line-height: 1.6; text-indent: 12px;}

.chk-wrap {min-width:8px; margin-top: 30px; position: relative; display: inline-block;}
.chk-wrap:after {content: '*'; position: absolute; top: -5px; right: -15px; font-size: 20px; color: red;}
.chk-wrap input[type="checkbox"] {display:none;}
.chk-wrap input[type="checkbox"] + label {color:#474646; font-size:16px; font-weight: 500; cursor:pointer;}
.chk-wrap input[type="checkbox"] + label span {border-radius:5px; display:inline-block; width:19px; height:19px; margin:-2px 5px 0 0; vertical-align:middle; cursor:pointer; border:1px solid #b6b6b6; background-color:#fff;}
.chk-wrap input[type="checkbox"]:checked + label span {border-color:#d4d4dc; background:var(--main1) url("/img/2020/icon_checked.png") no-repeat; background-position: center center; background-size: 15px auto;}


















/* --
* :: 이벤트 팝업
* -------------------------------- */

#popEvt {position: fixed; top: 100px; left: 100px; z-index: 100;}
.popEvt-wrap {position: relative; top: 0; left: 0; display: inline-block; max-width: 600px;}
.popEvt-body {}
.popEvt-body img {width: 100%; height: auto;}
.popEvt-footer {display: flex; justify-content: space-between; align-items: center; height: 44px; background: #381f1f; position: absolute; bottom: -44px; left: 0; right: 0; padding: 0 15px;}
.popEvt-footer a {display: inline-block; color: #fff; font-size: 14px;}
.popEvt-close {border: 1px solid #fff; padding: 6px 10px; border-radius: 8px;}
.popEvt-close:hover {background: #fff; color: #381f1f; transition: .3s;}