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

/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover,
.cm-scroll-drag-guide{display:none;}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{position:relative; height:60px; margin-bottom:15px; }
.sub-tab-list-style ul{display:table; width:100%; height:100%; table-layout:fixed;}
.sub-tab-list-style ul:after{display:none}
.sub-tab-list-style ul li{/* float:left; */ display:table-cell; vertical-align:middle; position:relative; width:20%; background-color:#fff; border:1px solid #e5e5e5; border-left:0 }
.sub-tab-list-style ul li:first-child{border-left:1px solid #e5e5e5;}
.sub-tab-list-style ul li a{display:table; height:58px; width:100%; }
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#494949; font-size:18px; letter-spacing:-0.30px; text-align:center;}
.sub-tab-list-style ul li.selected{z-index:1; background-color:#333; border-color:#333;}
.sub-tab-list-style ul li.selected a em{color:#fff; }
/* Tab Fixed Move*/
.sub-tab-list-style.top-fixed{position:fixed; top:70px; left:0; width:100%; height:60px;}
/* Mobile Tab Drop Menu */
.sub-drop-open-btn-style{display:none}

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

/***** 커스텀 탭 스타일 01 *****/
@media all and (min-width: 801px) {
	.sub-tab-wrapper-style.custom-style01 {height: 6rem; margin-bottom: 3rem;}
	.sub-tab-wrapper-style.custom-style01 .sub-tab-list-style ul {display: flex; width: 100%; max-width: 620px; margin: 0 auto; background-color: #f7f7f7; padding: 1rem; box-sizing: border-box; border-radius: 3rem;}
	.sub-tab-wrapper-style.custom-style01 .sub-tab-list-style ul li {width: 25%; /* min-width: 15rem; */ background-color: transparent; border: 2px solid transparent; border-radius: 2rem; transition: var(--transition-custom); box-sizing: border-box;}
	.sub-tab-wrapper-style.custom-style01 .sub-tab-list-style ul li a {height: 4rem;}
	.sub-tab-wrapper-style.custom-style01 .sub-tab-list-style ul li a em {font-size: 1.8rem; font-weight: 700; letter-spacing: -0.05em; color: #000; transition: var(--transition-custom);}
	.sub-tab-wrapper-style.custom-style01 .sub-tab-list-style ul li.selected {border-color: var(--main-color);}
	.sub-tab-wrapper-style.custom-style01 .sub-tab-list-style ul li:hover {background-color: #fff;}
	/* .sub-tab-wrapper-style.custom-style01 .sub-tab-list-style ul li.selected a em {color: #fff;} */
	.sub-tab-wrapper-style.custom-style01 .sub-tab-list-style ul li:hover a em {color: #000;}
}

/***** 좌측 네비 탭 *****/
.sub-nav-btn-box .main-nav-btn {backdrop-filter: blur(3rem); background-color: rgba(255, 255, 255, 0.7);}
.sub-nav-btn-box .main-nav-btn i {color: #000;}

/* ***********************
	*	페이크폼 스타일 추가css 
*********************** */
.fakeform-selectbox{position: relative; display:inline-block; width: 100%; max-width: 200px;}
.fakeform-selectbox select{opacity: 0; visibility: hidden;}
.select-option.select-in-popup{z-index: 10000 !important;}
/* fake form - 기본 select 스타일 */
.fakeform-selectbox .select-title {text-indent: 2em; width: 100% !important; text-align: left; vertical-align: middle;
border:0; line-height: 48px; font-size:16px; letter-spacing: -0.05em; color: #000; border: 1px solid #d3d3d3; background-color: #f7f7f7; border-radius: 25px; display: inline-block; 
box-sizing: border-box; cursor: pointer;}
.fakeform-selectbox .select-title:after{font-family: 'xeicon'; position:absolute; top:50%; right:2rem; transform:translateY(-50%); 
content: "\e942"; font-size:22px; color: #000;}
.fakeform-selectbox .select-title strong {width: 100%; font-weight: 700; word-break: break-all; display: block; overflow: hidden;}
.fakeform-selectbox .select-title.active{border-bottom-color: #fff; border-radius: 2.5rem 2.5rem 0 0;}
.fakeform-selectbox .select-title.active:after{content: "\e945";}
.fakeform-selectbox .select-title.focus{}
.fakeform-selectbox .select-title.disabled{}

.board-custom-select-box .fakeform-selectbox {width: 100%; height: 50px;}
.board-custom-select-box .fakeform-selectbox .select-title {height: 100%; border: none; background-color: transparent; border-radius: 0; font-size: 14px; line-height: 50px;}
.board-custom-select-box .fakeform-selectbox .select-title strong {height: 100%;}

.fakeform-selectbox.upper .select-title.active {border-radius: 0 0 2.5rem 2.5rem; border-bottom-color: #d3d3d3; border-top-color: transparent;}
.select-option.upper {border-radius: 2.5rem 2.5rem 0 0; border-top: 1px solid #ddd; border-bottom: 0; margin-top: 1px;}

/* 옵션창 */
.select-option {border: 1px solid #ddd; border-top: 0; background: #f7f7f7; max-height: 200px; overflow: auto; border-radius: 0 0 2.5rem 2.5rem; z-index: 999 !important;}
.select-option::-webkit-scrollbar{
	width: 5px;
}
.select-option::-webkit-scrollbar-thumb{
	background-color:#333;
	border-radius:5px;
	transition:all 0.5s;
}
.select-option::-webkit-scrollbar-track{
	background-color:#f2f2f2; 
	border-radius:0;
}
.select-option ul {margin: 0; padding: 0;}
.select-option li {list-style: none;}
.select-option span,
.select-option strong {height: auto; font-size: 1.4rem; line-height: 1.5; color: #666; white-space: nowrap; 
text-overflow: ellipsis; text-decoration: none; padding: 1.5rem 2em; display: block; overflow: hidden; cursor: pointer;}
.select-option span:hover {background: #f2f2f2;}
.select-option span.selected {color: #000; font-weight: 600;}
.select-option .disabled span,
.select-option .disabled strong {color: #bbb; text-decoration: line-through; background: none; cursor: default;}

@media all and (max-width:800px){
	.fakeform-selectbox .select-title {text-indent: 1em; font-size: 14px; line-height: 48px;}
	.fakeform-selectbox .select-title:after{right:0.7em; font-size:20px;}
	/* 옵션창 */
	.select-option span,
	.select-option strong {height: auto; font-size: 13px; font-weight: 500; line-height: 1.5; padding: 1.5rem 1em;}

	.select-option.upper {margin-top: 2px;}
}

/* -------- 공통 :: Contact Us -------- */
.sub-contact-wrap {position: relative; padding: 13.2% 0 8%; background: url("/images/main/main_bg.jpg") no-repeat bottom 4.2% left 50% / cover;}

/* -------- 공통 :: 타이틀 -------- */
.cm-tit-box {text-align: center; padding-bottom: 5.5rem;}
.cm-tit-box .cm-sub-tit {margin-bottom: 1rem;}
.cm-tit-box .cm-sub-tit strong {position: relative; display: inline-block; font-size: 2rem; color: #000000; letter-spacing: -0.05em; line-height: 1.2;}
.cm-tit-box .cm-sub-tit strong:before {position: absolute; content: ''; top: 0.2rem; right: -1rem; width: 0.6rem; height: 0.6rem; border-radius: 0.6rem; background: var(--main-color);}
.cm-tit-box .cm-tit {font-size: 4rem; font-weight: 700; letter-spacing: -0.025em; color: #000000; line-height: 1.3; }
.cm-tit-box .cm-tit.white-ver {color: #fff;}
.cm-tit-box .cm-tit b {color: var(--main-color); font-weight: 700;}
.cm-tit-box .cm-tit.tit-kr {letter-spacing: -0.05em; }
.cm-tit-box .cm-txt {font-size: 1.8rem; font-weight: 700; letter-spacing: -0.05em; color: #000; line-height: 1.3; padding-top:2rem ;}
.cm-tit-box .cm-txt b {color: var(--main-color);}
.cm-tit-box .cm-txt.white-ver {color: #fff;}

/********** 공통 트랜지션 리스트 **********/
.transition-increase-JS .target-item {transform: translate(0, 30px); opacity: 0; transition: var(--transition-custom2);}
.transition-increase-JS .target-item.fade-right {transform: translate(-30px, 0);}
.transition-increase-JS.animated .target-item {transform: translate(0, 0); opacity: 1;}

/* ******************  01. Product ********************** */
.product-con01 {padding: 20rem 0 22rem; background: #f2f2f2 url(/images/content/product_con01_bg.jpg)no-repeat bottom 0 left 50% / cover;}
.prd-con-tit {font-size: 4rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.3; margin-bottom: 2rem; text-align: center;}
.prd-con-tit b {color: var(--main-color); font-weight: 700;}
.prd-features-list {display: grid; grid-template-columns: repeat(3, calc(33.3333% - 0.999rem)); grid-gap: 1.8rem 1.5rem;}
.prd-features-list .prd-features-item {width: 100%; min-width: 0; padding: 20px; background: rgba(255,255,255,0.7); backdrop-filter:blur(5px); border-radius: 3rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; min-height: 50rem;}
/* .prd-features-list {display: flex; flex-wrap: wrap; margin: -0.9rem -0.75rem;}
.prd-features-list .prd-features-item {width: calc(33.33% - 1.5rem); margin: 0.9rem 0.75rem; padding: 2rem; background: rgba(255,255,255,0.7); backdrop-filter:blur(5px); border-radius: 3rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; min-height: 50rem;} */
.prd-features-slide-wrap {position: relative; border-radius: 2rem; overflow: hidden;background:#000}
.prd-features-slide .slick-arrow {position: absolute; top: 50%; margin-top: -1.3rem; font-size: 2.6rem; color: #fff; opacity: 0; z-index: 5; }
.dark-arrow .prd-features-slide .slick-arrow  {color: #3a3a3a;}
.prd-features-slide .slick-arrow.slick-prev {left: 2rem;}
.prd-features-slide .slick-arrow.slick-next {right: 2rem;}
.prd-features-slide li span {display: block; position: relative; width: 100%; height: 0; padding-top: 58.15%;} 
.prd-features-slide li span img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.prd-features-txt-box {padding-top: 3.5rem; text-align: center;}
.prd-features-txt-box .num {display: block;font-size: 1.6rem; font-weight: 800; letter-spacing: -0.025em; color: var(--main-color); line-height: 1.2; margin-bottom: 1rem;}
.prd-features-txt-box .tit {font-size: 2.6rem; font-weight: 700; letter-spacing: -0.025em; color: #3a3a3a; line-height: 1.3; }
.prd-features-txt-box .txt {font-size: 1.4rem; font-weight: 600; letter-spacing: -0.05em; color: #616161; line-height: 1.7; padding-top: 1rem;}

.product-con02 {padding: 20rem 0 14rem; background: url(/images/content/product_con02_bg.jpg)no-repeat center / cover;}
.product-con02 .prd-con-tit {color: #fff;}
.prd-advantage-con {padding: 0 4.5rem;}
.prd-advantage-list {display: flex; flex-wrap: wrap;}
.prd-advantage-list li {width: 33.33%; padding: 7rem 3rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.prd-advantage-list li:nth-child(1),
.prd-advantage-list li:nth-child(2),
.prd-advantage-list li:nth-child(3) {padding-bottom: 5.5rem;}
.prd-advantage-list li .icon-box {height: 7.4rem; margin-bottom: 3rem;}
.prd-advantage-list li .icon-box img {max-width: 100%;}
.prd-advantage-list li .txt-box .tit {font-size: 2rem; letter-spacing: -0.05em; color: #fff; line-height: 1.3;}
.prd-advantage-list li .txt-box .txt {font-size: 1.5rem; font-weight: 600; letter-spacing: -0.05em; color: rgba(255,255,255,0.6); line-height: 1.6; padding-top: 1.3rem;}

.product-con03 {padding: 19rem 0 20rem; background: #f2f2f2;}
.product-con03 .prd-con-tit {margin-bottom: 4.5rem;}
.prd-con03-list {display: flex; flex-wrap: wrap; margin: -1rem;}
.prd-con03-list li {position: relative; width: calc(50% - 2rem); margin: 1rem; overflow: hidden; border-radius: 3rem;}
.prd-con03-list li::before {position: absolute; content: ""; width: 100%; height: 9rem; left: 0; bottom: 0; background: linear-gradient(360deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); z-index: 1; border-radius: 0 0 3rem 3rem;}
.prd-con03-list li .img {position: relative; width: 100%; height: 0; padding-top: 64.516%; border-radius: 3rem; overflow: hidden;}
.prd-con03-list li .img img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.prd-con03-list li .txt {display: flex; flex-direction: column; text-align: center; justify-content: end; position: absolute; width: 100%; height: 100%; top: 0; left: 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; z-index: 1; padding: 3rem;}
.prd-con03-list li .txt strong {display: block; font-size: 2.4rem; letter-spacing: -0.05em; color: #fff; line-height: 1.3; }

.product-con04 {position: relative; /* height: 100vh; */height: 98rem;}
.product-con04 .prd-con04-bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.product-con04 .prd-con04-bg .bg {width: 100.788%; height: 100%; margin: 0 auto;}
.product-con04 .prd-con04-bg .bg.m-bg {display: none;}
.product-con04 .prd-con04-txt-con {position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: end; text-align: center; padding: 7rem 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.product-con04 .prd-con04-txt-con .prd-con-tit {color: #fff;}
.product-con04 .prd-con04-txt-con .prd-con-txt {font-size: 1.5rem; font-weight: 500; letter-spacing: -0.025em; color: #fff; opacity: 0.6; line-height: 1.73; }

.product-con05 {position: relative; padding: 20rem 0 20rem; background: #f2f2f2;}
.product-con05 .prd-con-tit {margin-bottom: 5.5rem;}
.prd-list-tbl {display: table; width: 100%; table-layout: fixed; border-top: 1px solid #333;border-top: 3px solid #000000;}
.prd-list-col-group { display: table-column-group;}
.prd-list-col-group .prd-col-group-item {  display: table-column;}
.prd-list-head {display: table-header-group;}
.prd-list-head .prd-head-item {display: table-cell; vertical-align: middle;  height: 6rem; text-align: center;background: #f2f2f2; color: #333333;  font-weight:600; font-size: 1.6rem; letter-spacing: -0.025em; border-bottom: 1px solid rgba(0,0,0,0.1);}
.prd-list-tbody { display: table-row-group;}
.prd-list-row {display: table-row; width: 100%; transition: background-color 0.3s; background: #f2f2f2;}
.prd-list-row .column { display: table-cell; vertical-align: middle;  height: 18.5rem; color: #333; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.6;  text-align: center;border-bottom: 1px solid rgba(0,0,0,0.1); }
.prd-list-row .column.prd-img dl dt {height: 10.5rem;}
.prd-list-row .column.prd-img dl dt img {max-height: 100%;}
/* .prd-list-row .column.prd-img dl dd {margin-top: 1.8rem;} */
.prd-list-row .column .prd-color-list {display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 1rem; box-sizing: border-box;}
.prd-list-row .column .prd-color-list li {position: relative; display: grid; grid-template-columns: repeat(4, auto); justify-content: flex-start; width: 100%; /* border-bottom: 1px solid #f2f2f2 */}
.prd-list-row .column .prd-color-list li::before {position: absolute; left: 0; bottom: -0.8px; content: ""; width: 100%; height: 1px; background-color: #f2f2f2;}
.prd-list-row .column .prd-color-list li:last-child::before {display: none;}
/* .prd-list-row .column .prd-color-list li:last-child {border-bottom: 0;} */
.prd-list-row .column .prd-color-list li span {display: inline-block; margin: 3px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #dddddd; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.prd-list-row .column .prd-color-list li span.color01 {background: #221e1f;}
.prd-list-row .column .prd-color-list li span.color02 {background: #ffffff;}
.prd-list-row .column .prd-color-list li span.color03 {background: #d2222a;}
.prd-list-row .column .prd-color-list li span.color04 {background: #fef100;}
.prd-list-row .column .prd-detali-btn {width: 11.3rem; margin: 0 auto; height: 4.5rem; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; color: #000000; line-height: 1.3; border: 1px solid #dddddd; background: #fff; border-radius: 0.5rem;  transition: all 0.3s; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

@media all and (min-width: 801px) {
	.prd-list-row:hover {background: #fff;}
	.prd-list-row .column .prd-detali-btn:hover {border-color: var(--main-color); background: var(--main-color); color: #fff; }
}

/* 제품팝업 */
.product-modal-content { position: relative;width: 96%; max-width: 1260px; margin: 20px auto; }
.product-modal-content .modal-close-btn {z-index: 1; top: 0; right: -7rem;z-index: 10;}
.product-modal-content .modal-close-btn i {font-size: 5rem; color: #f2f2f2;}
.product-pop-inner-box {position: relative; width: 100%;}
.product-pop-inner {position: relative; width: 100%;}
.prd-pop-con {display: flex; width: 100%;}
.prd-pop-info-con {width: calc(100% - 63rem); border-radius: 3rem 0 0 3rem; background: #fff; padding:7rem 5.7rem 7rem 9rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.prd-pop-info-con .txt-box {margin-bottom: 2rem;}
.prd-pop-info-con .txt-box .tit {font-size: 4rem; font-weight: 700; letter-spacing: -0.025em; color: #333333; line-height: 1.2;}
.prd-pop-info-con .txt-box .txt {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.025em; color: #333333; line-height: 1.5; padding-top: 2rem;}
.prd-pop-info-con .info-box {height: 50rem; overflow-y: auto; overflow-x: hidden; padding-right: 2rem; box-sizing: border-box;}
.prd-pop-info-con .info-box::-webkit-scrollbar {width: 3px;}
.prd-pop-info-con .info-box::-webkit-scrollbar-track {background-color: #e5e5e5;}
.prd-pop-info-con .info-box::-webkit-scrollbar-thumb {	background-color: var(--main-color);} 
.prd-pop-info-con .info-box dl {display: flex;  padding: 1.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.1); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.025em;}
.prd-pop-info-con .info-box dl:first-of-type {border-top: 1px solid rgba(0,0,0,0.1);}
.prd-pop-info-con .info-box dl dt {width: 18rem; color: #333333; opacity: 0.5; line-height: 1.3; padding-right: 5rem; box-sizing: border-box;}
.prd-pop-info-con .info-box dl dd {width: calc(100% - 18rem); color: #333333; line-height: 1.3;}
.prd-pop-info-con .info-box dl .color-dd {display: flex; flex-direction: column; gap: 6px 0;}
.prd-pop-info-con .info-box dl .color-dd > div {display: flex; gap: 0 6px; line-height: 1;}
.prd-pop-info-con .info-box dl dd .color-dot {display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #dddddd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.prd-pop-img-con {position: relative; display: flex; align-items: center; justify-content: center; width: 63rem; border-radius: 0 3rem 3rem 0; background: #f2f2f2;}
.prd-pop-img-con .img-slide li img {max-width: 100%;}
.prd-pop-arrow {position: absolute; width: 100%; height: 5rem; top: 50%; margin-top: -2.5rem; left: 0; z-index: 1;}
.prd-pop-arrow button {position: absolute; top: 0; font-size: 5rem; color: #333333; opacity: 0.2; transition:all 0.3s;}
.prd-pop-arrow button.prd-pop-prev {left: 6rem;}
.prd-pop-arrow button.prd-pop-next {right: 6rem;}
.prd-pop-arrow button:hover {opacity: 1;}
.prd-swiper-pagination {position: absolute; width: 100%; left: 0; bottom: 13rem; display: flex; justify-content: center;}
.prd-swiper-pagination .swiper-pagination-bullet {width: 1rem; height: 0.5rem; border-radius: 0.25rem; margin: 0 5px; background:#000; opacity: 0.3; transition:var(--transition-custom);}
.prd-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {width:3rem; background: var(--main-color); opacity: 1;}

/* ******************  02. Solution :: 공통 ********************** */
.solution-page .cm-tit-box .cm-txt {padding-top: 0.5rem;}
.solution-schema-con .schema-box {padding-top: 1rem;}
.solution-schema-con .schema-box img {display: block; margin: 0 auto; max-width: 100%;}

/* top 타이틀 박스 */
.solution-cm-top-box {display: flex; align-items: center; justify-content: center; margin-bottom: 14.5rem; background-color: #f3f3f3; min-height: 50rem;}
.solution-cm-top-box .inner {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 7rem; text-align: center;}
.solution-cm-top-box .inner::before {position: absolute; content: ""; width: 7.2rem; height: 25.3rem; left: -15rem; top: 50%; transform: translateY(-50%); background: center / cover no-repeat url("/images/content/solution_cm_top_img01.png");}
.solution-cm-top-box .inner::after {position: absolute; content: ""; width: 7.2rem; height: 25.3rem; right: -15rem; top: 50%; transform: translateY(-50%); background: center / cover no-repeat url("/images/content/solution_cm_top_img02.png");}
.solution-cm-top-box .solution-top-category {display: inline-flex; align-items: center; justify-content: center; min-width: 17rem; min-height: 2.8rem; padding: 0 2.5rem; box-sizing: border-box; background-color: #2dcdd5; border-radius: 1.4rem; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; color: #fff;}
.solution-cm-top-box .solution-top-tit {margin-top: 3rem; font-size: 4.4rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.3; color: #000;}
.solution-cm-top-box .solution-top-txt {margin-top: 2rem; font-size: 1.8rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.66; color: rgba(0, 0, 0, 0.8);}

/* 컨텐츠 타이틀
.solution-con-tit-box {text-align: center; margin-bottom: 5.5rem;}
.solution-con-tit-box .solution-con-tit {font-size: 4rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.3; color: #000;}
.solution-con-tit-box .solution-con-tit.white-ver {color: #fff;}
.solution-con-tit-box .solution-con-txt {margin-top: 0.5rem; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.3; color: #000;}
.solution-con-tit-box .solution-con-txt.white-ver {color: #fff;} */

/* details */
.solution-detail-con {display: flex; align-items: center; justify-content: center; width: 100%; min-height: 94rem; background: center / cover no-repeat url("/images/content/solution_detail_bg.jpg"); margin-top: 25.5rem;}
.solution-detail-con > .area {padding-top: 1.5rem;}
.solution-detail-con .history-arrow-box button {color: #fff;}
.solution-detail-con .history-arrow-box button.swiper-button-disabled {color: rgba(255, 255, 255, 0.3);}
/* .details-list-wrap {display: grid !important; align-items: center; grid-gap: 2rem;}
.details-list-wrap.four-item {grid-template-columns: repeat(4, 1fr);}
.details-list-wrap.three-item {grid-template-columns: repeat(3, 1fr);} */
.details-list-wrap {align-items: stretch;}
.details-list-wrap .details-list {position: relative; transition: background-color 0.4s, transform 0.8s ease-in-out, opacity 0.8s ease-in-out; border-radius: 3rem; /* max-width: 30rem; */ /* max-height: 48rem; */height: auto; background-color: #2d315b45;}
.details-list-wrap .details-list:last-child {margin-right: 0 !important;}
.details-list-wrap .details-list::before {position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; border-radius: 3rem; z-index: 0; pointer-events: none; transition: var(--transition-custom); background-size: cover; background-repeat: no-repeat;}

/* .details-list-wrap.three-item .details-list::before {background-image: url("/images/content/solution_details_list_bg02.jpg");} */
/* .details-list-wrap .details-list::before {background-image: url("/images/content/solution_details_list_bg.jpg");} */

/* .details-list-wrap.three-item .details-list:first-child::before {background-position: 0% center;}
.details-list-wrap.three-item .details-list:nth-child(2)::before {background-position: 50.792% center;}
.details-list-wrap.three-item .details-list:nth-child(3)::before {background-position: 100% center;} */

/* .details-list-wrap .details-list:first-child::before {background-position: 0% center;}
.details-list-wrap .details-list:nth-child(2)::before {background-position: 25.396% center;}
.details-list-wrap .details-list:nth-child(3)::before {background-position: 62.512% center;}
.details-list-wrap .details-list:nth-child(4)::before {background-position: 100% center;} */

.details-list-wrap .details-list a {position: relative; display: flex; flex-direction: column; justify-content: space-between; position: relative; width: 100%; height: 100%; border-radius: 3rem; padding: 3.5rem 3rem 4rem 3rem; box-sizing: border-box; z-index: 1; transition: var(--transition-custom);}
.details-list-wrap .details-list a::before {position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border: 4px solid var(--main-color); border-radius: 2rem; opacity: 0; transition: var(--transition-custom); pointer-events: none; box-shadow: 0 1.2rem 3.2rem 0 rgba(30, 202, 211, 0.25);}
/* .details-list-wrap .details-list .txt-box {padding: 0 3rem;} */
.details-list-wrap .details-list .details-list-tit {font-size: 3rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.3; color: #fff;}
/* .details-list-wrap .details-list .details-list-txt {display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; height: 10rem; margin-top: 2rem; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.6; color: rgba(255, 255, 255, 0.8); transition: var(--transition-custom);} */
.details-list-wrap .details-list .details-list-txt {word-wrap:break-word; min-height: 10rem; margin-top: 2rem; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.6; color: rgba(255, 255, 255, 0.8); transition: var(--transition-custom);}
.details-list-wrap .details-list .img-box {display: flex; align-items: center; justify-content: center; width: 100%; height: 22rem;/*  margin-top: 3rem; */}
.details-list-wrap .details-list .img-box img {max-width: 100%; max-height: 100%;}

/* .details-list-wrap .details-list:hover a {background-color: #22cbd3;} */
/* .details-list-wrap .details-list:hover .details-list-txt {color: rgba(255, 255, 255, 0.7);} */
/* .details-list-wrap .details-list:hover::before {opacity: 0;} */
@media all and (min-width: 801px) {
	.details-list-wrap .details-list a:hover::before {opacity: 1;}	
}

/* benefits */
.solution-benefits-con {position: relative; background-color: #f9f9f9; overflow: hidden; padding: 16rem 0 19.2rem 0;}
.solution-benefits-con > .area {position: relative; z-index: 1;}
.solution-benefits-con::before {position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: 131.7rem; background: center / cover no-repeat url("/images/content/solution_benefits_bg.jpg"); z-index: 0; pointer-events: none;}
.benefits-list-wrap {display: grid; grid-gap: 2.1rem;}

.benefits-list-wrap.three-item {grid-template-columns: repeat(3, 1fr);}
.benefits-list-wrap.four-item {grid-template-columns: repeat(4, 1fr);}
.benefits-list-wrap .benefits-list {display: flex; flex-direction: column; justify-content: space-between; background-color: #fff; border-radius: 3rem; padding: 4.5rem 3rem 5rem 4.5rem; box-shadow: 0 0.3rem 11.7rem 0 rgba(0, 0, 0, 0.1); box-sizing: border-box;}
.benefits-list-wrap.three-item .benefits-list {min-height: 40.6rem;}
.benefits-list-wrap.four-item .benefits-list {min-height: 42rem;}

.benefits-list-wrap .benefits-list .num {font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.4; color: #1ecad3;}
.benefits-list-wrap .benefits-list .benefits-list-tit {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.66; color: #000;}
.benefits-list-wrap .benefits-list .benefits-list-txt {margin-top: 1rem; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.6; color: rgba(0, 0, 0, 0.6);}
.benefits-list-wrap .benefits-list .icon-box {display: flex; align-items: flex-end; justify-content: flex-end; width: 9rem; height: 10rem; margin-left: auto; padding-right: 1.2rem; box-sizing: border-box;}
.benefits-list-wrap .benefits-list .icon-box img {max-width: 100%; max-height: 100%;}

/* stories */
.reference-con.solution-stories-con {padding: 16rem 0 15rem 0;} 

/* ******************  02. Solution :: Smart store ********************** */
.store-content .benefits-list-wrap .benefits-list.bg01 {background: center / cover no-repeat url("/images/content/solution_store_benefits_bg01.jpg");}
.store-content .benefits-list-wrap .benefits-list.bg02 {background: center / cover no-repeat url("/images/content/solution_store_benefits_bg02.jpg");}
.store-content .benefits-list-wrap .benefits-list.bg03 {background: center / cover no-repeat url("/images/content/solution_store_benefits_bg03.jpg");}

/* ******************  02. Solution :: Smart Office ********************** */
.office-content .solution-detail-con {margin-top: 16.5rem;}
.office-content .solution-benefits-con::before {bottom: -20rem;}
.office-content .benefits-list-wrap {padding-bottom: 7rem;}

.office-content .benefits-list-wrap .benefits-list.bg01 {background: center / cover no-repeat url("/images/content/solution_office_benefits_bg01.jpg");}
.office-content .benefits-list-wrap .benefits-list.bg02 {background: center / cover no-repeat url("/images/content/solution_office_benefits_bg02.jpg");}
.office-content .benefits-list-wrap .benefits-list.bg03 {background: center / cover no-repeat url("/images/content/solution_office_benefits_bg03.jpg");}
.office-content .benefits-list-wrap .benefits-list.bg04 {background: center / cover no-repeat url("/images/content/solution_office_benefits_bg04.jpg");}

/* ******************  02. Solution :: 자산추적 ********************** */
.tracking-content .solution-benefits-con::before {bottom: -12.5rem;}
.tracking-content .solution-detail-con {margin-top: 16.5rem;}
.tracking-content .benefits-list-wrap {padding-bottom: 5rem;}

.tracking-content .benefits-list-wrap .benefits-list.bg01 {background: center / cover no-repeat url("/images/content/solution_tracking_benefits_bg01.jpg");}
.tracking-content .benefits-list-wrap .benefits-list.bg02 {background: center / cover no-repeat url("/images/content/solution_tracking_benefits_bg02.jpg");}
.tracking-content .benefits-list-wrap .benefits-list.bg03 {background: center / cover no-repeat url("/images/content/solution_tracking_benefits_bg03.jpg");}

.solution-tech-con {padding: 15.5rem 0 16.5rem 0;}
.solution-tech-con .schema-wrap {position: relative; display: flex;}
.solution-tech-con .schema-wrap .schema-box {display: flex; align-items: center; justify-content: center; width: 67.461%; min-height: 53rem; padding: 4.65rem 4rem; box-shadow: 0 3rem 11.7rem 0 rgba(0, 0, 0, 0.1); border-radius: 3rem; box-sizing: border-box; background-color: #fff;}
.solution-tech-con .schema-wrap .schema-box img {max-width: 100%;}
.solution-tech-con .schema-wrap .txt-box {position: relative; width: calc(32.54% - 1rem); margin-left: 1rem; padding: 4.2rem 3.2rem 4.2rem 3.7rem; border: 4px solid #22cbd3; box-shadow: 0 3rem 11.7rem 0 rgba(0, 0, 0, 0.1); border-radius: 3rem; box-sizing: border-box; background-color: #fff;}
.solution-tech-con .schema-wrap .txt-box .solution-tech-tit {margin-bottom: 0.5rem; font-size: 3rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.33; color: #000;}
.solution-tech-con .schema-wrap .txt-box .solution-tech-st {margin-bottom: 2rem; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.33; color: #22cbd3;}
.solution-tech-con .schema-wrap .txt-box .solution-tech-txt {margin-bottom: 1.2rem; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.6; color: rgba(0, 0, 0, 0.6);}
.solution-tech-con .schema-wrap .txt-box .solution-tech-txt:last-child {margin-bottom: 0;}
.solution-tech-con .schema-wrap .arrow-box {display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: -4rem; width: 6.2rem; height: 6.2rem; border-radius: 50%; background-color: #22cbd3; transform: translateY(-50%)}
.solution-tech-con .schema-wrap .arrow-box span {position: absolute; font-size: 2.2rem; }
.solution-tech-con .schema-wrap .arrow-box span:first-child {margin-right: 0.6rem;}
.solution-tech-con .schema-wrap .arrow-box span:last-child {margin-left: 0.6rem;}
.solution-tech-con .schema-wrap .arrow-box span:first-child i {color: rgba(255, 255, 255, 0.3);}
.solution-tech-con .schema-wrap .arrow-box span:last-child i {color: #fff;}

/* ******************  02. Solution :: Dynamic Pricing ********************** */
.pricing-content .solution-detail-con {margin-top: 20rem;}
.pricing-content .solution-benefits-con::before {bottom: -12.5rem;}
.pricing-content .benefits-list-wrap {padding-bottom: 5rem;}
.pricing-content .benefits-list-wrap .benefits-list.bg01 {background: center / cover no-repeat url("/images/content/solution_tracking_benefits_bg01.jpg");}
.pricing-content .benefits-list-wrap .benefits-list.bg02 {background: center / cover no-repeat url("/images/content/solution_tracking_benefits_bg02.jpg");}
.pricing-content .benefits-list-wrap .benefits-list.bg03 {background: center / cover no-repeat url("/images/content/solution_tracking_benefits_bg03.jpg");}

.solution-process-con {padding-top: 4rem;}
.solution-process-con .process-list-wrap {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 4rem; padding-top: 1.5rem;}
.solution-process-con .process-list-wrap .process-list {position: relative; box-sizing: border-box;}
.solution-process-con .process-list-wrap .process-list .icon-box {position: relative; height: 22rem; border-radius: 3rem; box-shadow: 0 0.8rem 3.5rem 0 rgba(0, 0, 0, 0.09);}
.solution-process-con .process-list-wrap .process-list:last-child .icon-box {background-color: #1ecad3;}
.solution-process-con .process-list-wrap .process-list .icon-box::before {position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border-radius: 3rem; pointer-events: none;}
.solution-process-con .process-list-wrap .process-list:first-child .icon-box::before {border: 2px solid #e5e5e5;}
.solution-process-con .process-list-wrap .process-list:nth-child(2) .icon-box::before {border: 1px solid #1ecad3;}
.solution-process-con .process-list-wrap .process-list:nth-child(3) .icon-box::before {border: 3px solid #1ecad3;}
.solution-process-con .process-list-wrap .process-list:nth-child(4) .icon-box::before {border: 6px solid #1ecad3;}
.solution-process-con .process-list-wrap .process-list:last-child .icon-box::before {border: 1px solid #1ecad3;}

.solution-process-con .process-list-wrap .process-list .icon-box .inner {position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 4rem; box-sizing: border-box;}
.solution-process-con .process-list-wrap .process-list .icon-box .inner::before {position: absolute; top: 50%; right: -3.4rem; content: "\e93f"; font-family: "xeicon"; font-size: 2.2rem; color: #1ecad3; transform: translateY(-50%);}
.solution-process-con .process-list-wrap .process-list .icon-box .inner::after {position: absolute; top: 50%; right: -2.8rem; content: "\e93f"; font-family: "xeicon"; font-size: 2.2rem; color: rgba(30, 202, 211, 0.3); transform: translateY(-50%);}
.solution-process-con .process-list-wrap .process-list .icon-box .inner img {max-width: 100%; max-height: 100%;}
.solution-process-con .process-list-wrap .process-list:last-child .icon-box .inner::before, .solution-process-con .process-list-wrap .process-list:last-child .icon-box .inner::after {display: none;}

.solution-process-con .process-list-wrap .process-list .txt-box {text-align: center; margin-top: 2.5rem;}
.solution-process-con .process-list-wrap .process-list .txt-box .num {font-size: 1.4rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.4; color: #1ecad3;}
.solution-process-con .process-list-wrap .process-list .txt-box .process-list-tit {margin-top: 1rem; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.33; color: #000;}
.solution-process-con .process-list-wrap .process-list .txt-box .process-list-txt {margin-top: 1.4rem; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.6; color: rgba(0, 0, 0, 0.6);}

.solution-channel-con {margin: 18.5rem 0 0 0; padding-bottom: 22rem;}
.solution-channel-con .channel-list-wrap {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2.1rem;}
.solution-channel-con .channel-list-wrap .channel-list {padding: 2.9rem 3.3rem 5rem 3.3rem; background-color: #f3f3f3; border-radius: 3rem;}
.solution-channel-con .channel-list-wrap .channel-list .img-box {border-radius: 1.2rem; overflow: hidden;}
.solution-channel-con .channel-list-wrap .channel-list img {max-width: 100%;}
.solution-channel-con .channel-list-wrap .channel-list .txt-box {margin-top: 3rem; padding: 0 1rem;}
.solution-channel-con .channel-list-wrap .channel-list .txt-box .num {font-size: 1.5rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.5; color: #1ecad3;}
.solution-channel-con .channel-list-wrap .channel-list .txt-box .channel-list-tit {padding-bottom: 0.5rem; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.66; color: #000;}
.solution-channel-con .channel-list-wrap .channel-list .txt-box .channel-list-txt {position: relative; margin-top: 0.6rem; padding-left: 2rem; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.6; color: rgba(0, 0, 0, 0.6);}
.solution-channel-con .channel-list-wrap .channel-list .txt-box .channel-list-txt::before {position: absolute; left: 0; content: "\e92c"; font-family: "xeicon";}

/* ******************  02. Solution :: SaaS ********************** */
.saas-content .solution-benefits-con::before {bottom: -19rem;}
.saas-content .benefits-list-wrap {padding-bottom: 6.5rem;}
.saas-content .benefits-list-wrap .benefits-list.bg01 {background: center / cover no-repeat url("/images/content/solution_saas_benefits_bg01.jpg");}
.saas-content .benefits-list-wrap .benefits-list.bg02 {background: center / cover no-repeat url("/images/content/solution_saas_benefits_bg02.jpg");}
.saas-content .benefits-list-wrap .benefits-list.bg03 {background: center / cover no-repeat url("/images/content/solution_saas_benefits_bg03.jpg");}
.saas-content .benefits-list-wrap .benefits-list.bg04 {background: center / cover no-repeat url("/images/content/solution_saas_benefits_bg04.jpg");}

.solution-necessity-con {margin: 0 0 17rem 0;}
.solution-necessity-con .schema-box {display: flex; align-items: center; justify-content: center; max-width: 1500px; margin: 0 auto; height: 60rem; background-color: #f3f3f3; border-radius: 2rem; padding: 4rem 8rem; box-sizing: border-box;}
.solution-necessity-con .schema-box img {max-width: 100%;}
.solution-necessity-con .check-list-container {position: relative; display: flex; align-items: center; max-width: 1060px; margin: 10rem auto 0;}
.solution-necessity-con .check-list-container::before {position: absolute; content: ""; width: 12.5rem; height: 33.3rem; left: 44.5%; top: 50%; transform: translate(-50%, -50%); background: center / cover no-repeat url("/images/content/solution_necessity_diagram.png"); z-index: -1;}
.solution-necessity-con .check-list-container::after {position: absolute; content: ""; width: 23.5rem; height: 40.5rem; left: 50%; top: 50%; transform: translate(-50%, -50%); background: center / cover no-repeat url("/images/content/solution_necessity_shadow.png"); z-index: 0;}
.solution-necessity-con .check-list-container .check-list-wrap {position: relative; display: flex; flex-direction: column; width: 50%; border-radius: 2rem; box-sizing: border-box; padding: 2rem 2.2rem; background-color: #fff; box-shadow: 0 1.8rem 4rem 0 rgba(0, 0, 0, 0.09);}
.solution-necessity-con .check-list-container .check-list-wrap:first-child {min-height: 28rem; margin-left: 2.25rem; border: 3px solid #e0e0e0;}
.solution-necessity-con .check-list-container .check-list-wrap:last-child {position: absolute; z-index: 1; right: 2.25rem; min-height: 34rem; border: 3px solid #22cbd3;}
.solution-necessity-con .check-list-container .check-list-wrap h4 {display: flex; align-items: center; justify-content: center; height: 6.4rem; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.66; color: #000; border-radius: 1rem;}
.solution-necessity-con .check-list-container .check-list-wrap:first-child h4 {background-color: #efefef;}
.solution-necessity-con .check-list-container .check-list-wrap:last-child h4 {background-color: #2dcdd5; color: #fff;}
.solution-necessity-con .check-list-container .check-list-wrap .check-list-box {display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 0 3.3rem; box-sizing: border-box;}
.solution-necessity-con .check-list-container .check-list-wrap .check-list-box .check-list {display: flex;}
.solution-necessity-con .check-list-container .check-list-wrap:first-child .check-list-box .check-list {font-size: 1.5rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.73; color: rgba(0, 0, 0, 0.6);}
.solution-necessity-con .check-list-container .check-list-wrap:last-child .check-list-box .check-list {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.66; color: rgba(0, 0, 0, 0.8);}
.solution-necessity-con .check-list-container .check-list-wrap .check-list-box .check-list i {padding-right: 1rem; line-height: 1.6;}
.solution-necessity-con .check-list-container .check-list-wrap:last-child .check-list-box .check-list i {color: #2dcdd5;}

/* ******************  03. Use cases ********************** */
/* ***** Use cases ***** */
.use-case-page .cm-tit-box .cm-txt {color: #666666; padding-top: 1rem;}
.reference-con {padding: 7rem 0; background: #f2f2f2;}
.reference-tab-container {position: relative; border-radius: 3rem; overflow: hidden; background: #fff; box-shadow: 3rem 3rem 11.7rem rgba(0,0,0,0.1);}
.reference-tab-wrap {position: relative; height: 8rem; width: calc(100% - 12rem); padding-right: 12rem;}
.reference-tab-wrap:before {position: absolute; top: 0; right: 12rem; content: ''; width: 13rem; height: 100%; background: linear-gradient(to right, transparent 0, rgba(0,0,0,0.07));}
.reference-tab-list{ width: 100%; height:8rem; border-bottom: 1px solid rgba(0,0,0,0.05); position: relative; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.reference-tab-list.swiper-container {overflow: visible;}
.reference-tab-list ul{padding-left: 3rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.reference-tab-list ul li{width: auto !important; margin: 0 !important;}
.reference-tab-list ul li a{position: relative; position: relative; display:block; height:7.9rem; line-height:7.9rem; padding:0 3.5rem;}
.reference-tab-list ul li a:before { position: absolute;content: ''; bottom: -1.5px; left: 50%; width: 0; height: 3px; border-radius: 1.5px; background: var(--main-color); transform: translateX(-50%);  transition: all 0.4s ease-in-out; }
.reference-tab-list ul li a span {position: relative; display: inline-block; font-size:1.6rem; font-weight:600; letter-spacing:-0.05em; color: #999999;
    -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.reference-tab-list ul li.selected  a span {color: var(--main-color);}
.reference-tab-list ul li.selected a:before {width: 100%;}
.reference-tab-wrap .reference-tab-btn{position: absolute; right: 0; top: 0; width: 12rem; height: 8rem; display: flex; align-items: center; justify-content: center; background: var(--main-color); z-index: 1;}
.reference-tab-wrap .reference-tab-btn:before {position: absolute; content: ''; width: 1px; height: 5px; left: 50%; top: 50%; margin-left: -0.5px; margin-top: -2.5px; background: #f7f7f7; opacity: 0.5;}
.reference-tab-wrap .reference-tab-btn button {position: relative; padding: 0 0.5rem; font-size: 2.4rem; color: #fff;}

.reference-tab-con {display: flex; align-items: center; padding: 3rem 3rem 4rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.reference-tab-con .img-con {width: 47.5%;}
.reference-tab-con .img-con span {display: block; position: relative; width: 100%; height: 0; padding-top: 63.15%; border-radius: 3rem; overflow: hidden; }
.reference-tab-con .img-con span img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.reference-tab-con .info-con {width: 52.5%; padding: 0 2.5rem 0 5.8rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.reference-tab-con .info-con dl dt { border-bottom: 2px solid rgba(0,0,0,0.1);}
.reference-tab-con .info-con dl dt .tit {position: relative; padding-bottom: 2rem; display: inline-flex; align-items: end; font-size: 4rem; font-weight: 700; letter-spacing: -0.05em; color: #000000; line-height: 1.25;}
.reference-tab-con .info-con dl dt .tit:before {position: absolute; content: ''; width: 100%; height: 2px; background-color: #000; bottom: -2px;}
.reference-tab-con .info-con dl dt .tit span {font-size: 1.3rem; font-weight: 600; letter-spacing: 0; opacity: 0.3; display: inline-block; margin-left: 0.8rem; position: relative; top: -0.5rem;}
.reference-tab-con .info-con dl dd {padding-top: 2rem;}
.reference-tab-con .info-con dl dd .txt {font-size: 1.5rem; font-weight: 600; letter-spacing: -0.05em; color: #666666; line-height: 1.73;}
.reference-list-con {position: relative; margin-top: 4rem; /* padding: 0 2.7rem; */ box-sizing: border-box;}
.reference-list .slick-arrow {position: absolute; top: 50%; margin-top: -1.2rem; font-size: 2.4rem; line-height: 2.4rem; color: #000000;}
.reference-list .slick-arrow.slick-prev {left: -3.3rem;}
.reference-list .slick-arrow.slick-next {right: -3.5rem;}
.reference-list .slick-list {margin: 0 -0.3rem;}
.reference-list .slick-list .slick-track {height: 6.1rem;}
.reference-list .slick-slide {margin: 0 0.3rem;} 
.reference-list li a {position: relative; display: block; width: 100%; padding-top: 6.1rem; border-radius: 1rem; background:#f7f7f7; transition: all 0.4s;}
.reference-list li a:before {position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ''; border-radius: 1rem; border: 3px solid var(--main-color); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; transition: all 0.4s; opacity: 0;}
.reference-list li a span {position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 1rem; overflow: hidden;}
.reference-list li a span img {position: absolute; max-width: 100%; max-height: 100%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; padding: 1rem; box-sizing: border-box;}

@media all and (min-width: 801px) {
	.reference-list li a:hover {background: #fff;}
	.reference-list li a:hover:before {opacity: 1;}	
}

.use-case-con02 {padding: 19rem 0 20rem;}
.customer-list {display: flex; flex-wrap: wrap; margin:-1rem -0.75rem;}
.customer-list li {width: calc(20% - 1.5rem); margin: 1rem 0.75rem;}
.customer-list li span {position: relative; display: block; width: 100%; height: 0; padding-top: 33.33%; border-radius: 1rem; background: #f7f7f7; overflow: hidden;}
.customer-list li span img {position: absolute; max-width: 100%; max-height: 100%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; object-fit: cover; padding: 1rem; box-sizing: border-box;}

.use-case-con03 {padding: 16rem 0 20rem; background: url("/images/content/use_con03_bg.jpg") no-repeat center/cover;}
.use-case-con03 .cm-tit-box .cm-tit {color: #fff;}
.use-case-con03 .cm-tit-box .cm-txt {color: rgba(255,255,255,0.6);}
.representative-case-list {display: flex; margin: -1rem;}
.representative-case-list li {width: calc(25% - 2rem); margin: 1rem; }
.representative-case-list li a {display: block; width: 100%; height: 34rem; padding: 2rem; box-sizing: border-box; text-align: center; background: rgba(255,255,255,0.1); border-radius: 2rem; transition: all 0.4s;}
.representative-case-list li a .img {position: relative; width: 100%; height: 0; padding-top: 65.77%; border-radius: 2rem; overflow: hidden;}
.representative-case-list li a .img img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.representative-case-list li a dl {margin-top: 3rem;}
.representative-case-list li a dl dt {margin-bottom: 1rem; font-size: 2.6rem; font-weight: 600; letter-spacing: -0.05em; color: #ffffff; line-height: 1.3;}
.representative-case-list li a dl dd {font-size: 1.4rem; font-weight: 600; letter-spacing: -0.025em; color: #fff; line-height: 1.3; opacity: 0.2; transition: all 0.4s;}

@media all and (min-width: 801px) {
	.representative-case-list li a:hover {background: var(--main-color);}
	.representative-case-list li a:hover dd {opacity: 0.5;}	
}

/* ***** Use cases 상 세페이지 ***** */
.uc-view-con01 {padding-bottom: 20rem;}
.uc-view-img-con {position: relative;}
.uc-view-img-list .slick-arrow {position: absolute; top: 50%; margin-top: -3.5rem; display: flex; align-items: center; justify-content: center; width: 7rem; height: 7rem; border-radius: 50%; background: #f2f2f2; font-size: 2.4rem; color: #000000; border: 6px solid #fff; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; z-index: 5; transition:all 0.4s;}
.uc-view-img-list .slick-arrow.slick-prev {left: -3.5rem;}
.uc-view-img-list .slick-arrow.slick-next {right: -3.5rem;}
.uc-view-img-list .slick-arrow:hover {background: var(--main-color); color: #fff;}
.uc-view-img-list li a {position: relative; display: block; width: 100%; height: 0; padding-top: 39.683%; border-radius: 2rem; overflow: hidden;}
.uc-view-img-list li a .bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; } 
.uc-view-img-list li a .bg:before {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.15); z-index: 1;}
.uc-view-img-list li a .bg span {display: block; width: 100%; height: 100%; transform:scale(1.07); filter:blur(15px);}
.uc-view-img-list li a .img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; justify-content: center;}
.uc-view-img-list li a .img img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; height: 100%;object-fit: cover;}
.uc-view-info-con {display: flex; padding: 6.5rem 0; border-bottom: 1px solid #f2f2f2;}
.uc-view-info-con:first-of-type {padding: 8rem 0 7rem;}
.uc-view-info-con .left-con {width: 20.63%; padding-right: 5rem; box-sizing: border-box;}
.uc-view-info-con .left-con .tit {display: block; font-size: 2.6rem; letter-spacing: -0.025em; color: #000; line-height: 1.3;}
.uc-view-info-con .right-con {width: 79.37%;}
.uc-view-info-con:first-child .right-con .txt {padding-bottom: 3.5rem;}
.uc-view-info-con .right-con .txt {font-size: 1.6rem; font-weight: 600; letter-spacing: -0.05em; color: #666666; line-height: 1.875;}
.uc-view-info-con .info-intro-list {display: flex; flex-wrap: wrap; margin: -0.5rem -1rem;}
.uc-view-info-con .info-intro-list li {display: flex; align-items: center;width: calc(50% - 2rem); margin: 0.5rem 1rem; border-radius: 1rem; background: #f7f7f7; padding: 3.5rem 3rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.uc-view-info-con .info-intro-list li span {display: inline-block; width: 5rem; height: 5rem; line-height: 5rem; text-align: center; border-radius: 5rem; background: var(--main-color); font-size: 2.2rem; color: #fff;}
.uc-view-info-con .info-intro-list li dl {width: calc(100% - 5rem); padding-left: 2rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.uc-view-info-con .info-intro-list li dl dt {font-size: 1.6rem; font-weight: 600; letter-spacing: -0.025em; color: #999999; line-height: 1.5;}
.uc-view-info-con .info-intro-list li dl dd {font-size: 2.6rem; font-weight: 700; letter-spacing: -0.025em; color: #333333; line-height: 1.2;}
.uc-view-con02 {padding: 20rem 0 21rem; background: #f2f2f2;}

.uc-view-con03 {padding: 19rem 0 20rem;}
.uc-view-blog-list {display: flex; flex-wrap: wrap; margin: 0 -0.75rem;}
.uc-view-blog-list li {position: relative; width: calc(33.33% - 1.5rem); margin: 0 0.75rem;}
.uc-view-blog-list li:nth-child(1) {z-index: 3;}
.uc-view-blog-list li:nth-child(2) {z-index: 2;}
.uc-view-blog-list li:nth-child(3) {z-index: 1;}
.uc-view-blog-list li a {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 5rem 3rem 3rem; background: #f7f7f7; transition: all 0.4s; border-radius: 3rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.uc-view-blog-list li a .txt-box {text-align: center; padding-bottom: 3.5rem;}
.uc-view-blog-list li a .txt-box .cate {display: block; font-size: 1.6rem; letter-spacing: -0.025em; color: var(--main-color); line-height: 1.3; margin-bottom: 1rem;  transition: all 0.4s;} 
.uc-view-blog-list li a .txt-box .tit {font-size: 2.6rem; font-weight: 700; letter-spacing: -0.025em; color: #000000; line-height: 1.26;  transition: all 0.4s;}
.uc-view-blog-list li a .txt-box .date {display: block; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.025em; color: #000000; opacity: 0.5; margin-top: 2rem;  transition: all 0.4s;}
.uc-view-blog-list li a .img-box {position: relative; width: 100%; height: 0; padding-top: 62.85%; border-radius: 3rem; overflow: hidden;}
.uc-view-blog-list li a .img-box span {display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

@media all and (min-width: 801px) {
	.uc-view-blog-list li a:hover {background: var(--main-color); box-shadow: 6.1rem 6.1rem 4.9rem rgba(30,202,211,0.2);}
	.uc-view-blog-list li a:hover .txt-box .cate ,
	.uc-view-blog-list li a:hover .txt-box .tit ,
	.uc-view-blog-list li a:hover .txt-box .date {color: #fff;}
}

/***** installation cases *****/
.other-cases-con {position: relative; max-width: 1360px; margin: 0 auto;}
.other-cases-list {position: relative; overflow: hidden; width: 92.648%; margin: 0 auto;}
.other-cases-list .slick-list {margin: 0 -0.75rem;}
.other-cases-list li	{margin: 0 0.75rem;}
.other-cases-list li .logo-box {position: relative; display: flex; align-items: center; justify-content: center; height: 14rem; background-color: #fff; border-radius: 1rem; padding: 3rem; box-sizing: border-box;}
.other-cases-list li .logo-box::before {position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid var(--main-color); box-sizing: border-box; border-radius: 1rem; opacity: 0; visibility: hidden; transition: all 0.3s;}
.other-cases-list li .logo-box img {max-width: 100%; max-height: 100%;}
.other-cases-list li .cases-list-tit {margin-top: 2rem; text-align: center; font-size: 1.8rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.66; color: #666;}

.other-cases-con .cases-btn-box button {position: absolute; top: 5rem; font-size: 3.6rem; color: #000;}
.other-cases-con .cases-btn-box button.cases-prev-btn {left: -1.8rem;}
.other-cases-con .cases-btn-box button.cases-next-btn {right: -1.8rem;}

.cases-list-btn {display: flex; align-items: center; justify-content: center; width: 24rem; height: 5rem; margin: 6rem auto 0; border-radius: 3rem; border: 0.3rem solid #000; font-size: 1.4rem; font-weight: 700; color: #000; transition: var(--transition-custom);}

@media all and (min-width: 801px) {
	.other-cases-list li a:hover .logo-box::before {opacity: 1; visibility: visible;}
	.cases-list-btn:hover {background-color: #000; color: #fff;}
}

/* ******************  04. Company :: 회사소개 ********************** */
.company-con01 {}
.company-con01 .story-con {display: flex; align-items: center; justify-content: end; height: 70rem; width: 100%; border-radius: 2rem; background: url(/images/content/story_img.jpg)no-repeat center/cover;}
.company-con01 .story-con .inner {width: 50%; }
.company-con01 .story-con .inner .story-logo {margin-bottom: 3.5rem; }
.company-con01 .story-con .inner .story-logo img {max-width: 100%;}
.company-con01 .story-con .inner .story-bold-txt {font-size: 4rem; font-weight: 700; letter-spacing: -0.05em; color: #fff; line-height: 1.3; }
.company-con01 .story-con .inner .story-bold-txt b {color: var(--main-color);}
.company-con01 .story-con .inner .story-txt01 {padding-top: 2.5rem; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; color: #fff; line-height: 1.66; }
.company-con01 .story-con .inner .story-txt02 {font-size: 1.6rem; font-weight: 600; letter-spacing: -0.025em; color: rgba(255, 255, 255, 0.5); line-height: 1.875; padding-top: 2.5rem;}

.company-con02 {position: relative; padding: 18rem 0 0;}
.company-con02 .ceo-greeting-bg {position: absolute; right: 0; bottom: 0; width: 100%; z-index: -1; overflow: hidden;}
.company-con02 .ceo-greeting-bg img {}
.ceo-greeting-con {}
.ceo-greeting-box {width: 55%;}
.ceo-greeting-box .cm-tit-box {text-align: left; padding-bottom: 4.5rem;}
.ceo-greeting-box .ceo-greeting-txt01 {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; color: #000000; line-height: 1.4;}
.ceo-greeting-box .ceo-greeting-txt01 b {color: var(--main-color); font-weight: 700;}
.ceo-greeting-box .ceo-greeting-txt02 {font-size: 1.6rem; font-weight: 600; letter-spacing: -0.025em; color: #666666; line-height: 1.875; padding-top: 3rem;}
.ceo-greeting-box .ceo-sign-txt {display: flex; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.025em; color: #666666; line-height: 1.875; margin-top: 4.5rem; }
.ceo-greeting-box .ceo-sign-txt  .sign-img {display: inline-block; margin-left: 1.6rem;}

.company-con03 {padding: 20rem 0 22rem;}
.history-con-progress {position: relative; display: flex; align-items: center;}
.history-con-progress-bar {position: relative; width: calc(100% - 9.5rem); height: 30px;}
.history-con-progress-bar .point {position: absolute; top: 50%; margin-top: -5px; left: 0; width: 10px; height: 10px; border-radius: 10px; background: var(--main-color); z-index: 100;     transition-duration: 1000ms;}
.history-con-progress-bar .point:before {position: absolute; content: ''; width: 30px; height: 30px; border-radius: 30px; top: -10px; left: -10px; background: var(--main-color); opacity: 0.2; z-index: -1;}
.history-con-progress-bar .point-year {position: absolute; bottom: -4rem; left: 50%; transform: translateX(-50%); display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.2em; letter-spacing: -0.05em; color: var(--main-color)}
.history-con-progress-bar .swiper-pagination {height:2px; top:14px; bottom: auto; left: 0; width:100%; background-color:rgba(0,0,0,0.1);}
.history-con-progress-bar .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {display: block; background-color:var(--main-color);}

.history-arrow-box {position: relative; width: 9.5rem; height: 5rem; z-index: 100;}
.history-arrow-box button {position: absolute; top: 50%; margin-top: -2.5rem; font-size: 5rem; line-height: 5rem; color: #000; transition: all 0.3s;}
.history-arrow-box button.arrow-prev {right: 3.5rem;}
.history-arrow-box button.arrow-next {right: -1rem;}
.history-arrow-box button.swiper-button-disabled {color: #EEEEEE;}
.history-slide-con-wrap {position: relative; margin-top: 10rem; width: 60%;}
.history-slide-con-wrap:before {position: absolute; content: ''; width: calc((100vw - 1260px)/2); height: 100%; top: 0; left: calc(-1*((100vw - 1260px)/2)); z-index: 99; background: linear-gradient(to right, #FFFFFF, transparent);}
.history-slide-con-wrap:after {position: absolute; content: ''; width: calc((100vw - 1260px)/2); height: 100%; top: 0; right: calc(-1*((100vw - 27%)/2)); z-index: 99; background: linear-gradient(to right, transparent, #FFFFFF);}
.history-slide-con.swiper-container {overflow: visible;}
.history-list .history-item {display: flex;}
.history-list .history-item .history-year-tit {width: 28.5rem; font-size: 7rem; font-weight: 700; color: #000; }
.history-list .history-item .history-detail-txt-con {width: calc(100% - 28.5rem); padding-top: 1rem;}
.history-list .history-item .history-detail-txt-con .history-detail-txt {width: 100%; }
.history-list .history-item .history-detail-txt-con .history-detail-txt .txt {position: relative; padding-left: 1.3rem; font-size: 1.8rem; font-weight: 600; letter-spacing: -0.05em; color: #666666; line-height: 1.6em; }
.history-list .history-item .history-detail-txt-con .history-detail-txt .txt + .txt {margin-top: 1rem;}
.history-list .history-item .history-detail-txt-con .history-detail-txt .txt:before {position: absolute; content: ''; top: 1.2rem; left: 0; width: 0.4rem; height: 0.4rem; border-radius: 0.4rem; background: #000000; }

.company-con04 .cm-tit-box {padding-bottom: 2.5rem;}
.company-location-con {padding-bottom: 20rem;}
.company-location-con .map-wrap {position: relative; width: 100%; height: 0; padding-top: 39.683%;}
.company-location-con .map-wrap .map {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 3rem;}

.company-location-con .map-info-wrap {display: flex; margin-top: 4.8rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 6rem;}
.company-location-con .map-info-wrap .tit-box {position: relative; width: 50%;}
.company-location-con .map-info-wrap .tit-box .map-tit01 {font-size: 5rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.2; color: #000;}
.company-location-con .map-info-wrap .tit-box .map-tit02 {font-size: 1.8rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.4; color: rgba(0, 0, 0, 0.3);}
.company-location-con .map-info-wrap .info-list-box {width: 50%;}
.company-location-con .map-info-wrap .info-list-box .info-list {display: flex; margin-bottom: 0.8rem;}
.company-location-con .map-info-wrap .info-list-box .info-list:last-child {margin-bottom: 0;}
.company-location-con .map-info-wrap .info-list-box .info-list span {width: 6rem; padding-right: 2.5rem; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.5; color: rgba(0, 0, 0, 0.3);}
.company-location-con .map-info-wrap .info-list-box .info-list p {width: calc(100% - 8.5rem); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.5; color: #000;}

.company-page .map-info-wrap .fakeform-selectbox {margin-top: 2.5rem;}
.company-page .map-info-wrap .fakeform-selectbox .select-title {text-indent: 1.8rem; background-color: var(--main-color); border-color: var(--main-color); letter-spacing: -0.025em; color: #fff; transition: var(--transition-custom);}
.company-page .map-info-wrap .fakeform-selectbox .select-title:after {font-size: 16px; color: #fff;}

/* ******************  04. Company :: Contact ********************** */
.compe-list-con {background-color: #f7f7f7;}
.compe-list-con .compe-list-wrap {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 6rem; margin-top: 29.5rem; transform: translateY(-50%);}
.compe-list-con .compe-list-wrap .compe-list {position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 58rem; padding: 5.5rem 5rem 5rem 5rem; border-radius: 3rem; box-shadow: 0 6.1rem 4.9rem 0 rgba(0, 0, 0, 0.13); border-radius: 3rem; overflow: hidden; box-sizing: border-box; transition: var(--transition-custom2);}
.compe-list-con .compe-list-wrap .compe-list::before {position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4);}
/* .compe-list-con .compe-list-wrap .compe-list::before {position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: rgba(30, 202, 211, 0.7); backdrop-filter: blur(10px); border-radius: 3rem; z-index: 0; opacity: 0; visibility: hidden; transition: var(--transition-custom);} */
.compe-list-con .compe-list-wrap .compe-list:first-child {background: center / cover no-repeat url("/images/content/compe_list_bg01.jpg");}
.compe-list-con .compe-list-wrap .compe-list:nth-child(2) {top: 6rem; background: center / cover no-repeat url("/images/content/compe_list_bg02.jpg");}
.compe-list-con .compe-list-wrap .compe-list:last-child {background: center / cover no-repeat url("/images/content/compe_list_bg03.jpg");}
.compe-list-con .compe-list-wrap .compe-list .compe-list-tit {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.065em; line-height: 1.41em; color: #fff;}
.compe-list-con .compe-list-wrap .compe-list .compe-list-txt {margin-top: 1.4rem; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.625em; color: rgba(255, 255, 255, 0.8); transition: var(--transition-custom);}
.compe-list-con .compe-list-wrap .compe-list .top-txt-box {position: relative; z-index: 1;}
.compe-list-con .compe-list-wrap .compe-list .view-txt-box {position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; transition: var(--transition-custom)}
.compe-list-con .compe-list-wrap .compe-list .view-txt-box .icon {position: relative; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box;}
.compe-list-con .compe-list-wrap .compe-list .view-txt-box .icon .circle {position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); animation: wave 1.5s ease infinite; box-sizing: border-box;}
.compe-list-con .compe-list-wrap .compe-list .view-txt-box .icon .circle:nth-child(2) {animation-delay: 0.3s;}
.compe-list-con .compe-list-wrap .compe-list .view-txt-box .icon .circle:last-child  {animation-delay: 0.6s;}
.compe-list-con .compe-list-wrap .compe-list .view-txt-box i {font-size: 1.6rem; color: #fff;}
.compe-list-con .compe-list-wrap .compe-list .view-txt {margin-right: 3rem; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.41em; color: #fff;}

/* .compe-list-con .compe-list-wrap .compe-list:hover::before {opacity: 1; visibility: visible;}
.compe-list-con .compe-list-wrap .compe-list:hover .view-txt-box {opacity: 0; visibility: hidden;} */

@keyframes wave {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(1.8);
		opacity: 0;
	}
}

.compe-partners-con {background-color: #f7f7f7; margin-top: -4rem; padding-bottom: 21.5rem;}
.compe-partners-con .partners-list-wrap {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 1.5rem;}
.compe-partners-con .partners-list-wrap .partners-list {display: flex; align-items: center; justify-content: center; min-height: 8rem; background-color: #fff; border-radius: 1rem; overflow: hidden;}
.compe-partners-con .partners-list-wrap .partners-list img {max-width: 100%;}

/* ******************  04. Company :: Careers ********************** */
.recruit-process-con {padding-bottom: 15rem;}
.recruit-process-con .process-list-wrap {position: relative; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 6.25rem; max-width: 1150px; margin: 2rem auto 0;}
.recruit-process-con .process-list-wrap .process-list {position: relative; z-index: 1;}
.recruit-process-con .process-list-wrap .process-list:first-child, .recruit-process-con .process-list-wrap .process-list:nth-child(2) {z-index: 2;}
.recruit-process-con .process-list-wrap .process-list .icon-box {position: relative; border-radius: 50%; box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.08); background-color: #fff;}
.recruit-process-con .process-list-wrap .process-list:last-child .icon-box {background-color: var(--main-color);}
.recruit-process-con .process-list-wrap .process-list .icon-box::before {position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%; box-sizing: border-box;}
.recruit-process-con .process-list-wrap .process-list:nth-child(3) .icon-box::after {position: absolute; content: ""; width: 81.7rem; height: 1px; top: 50%; left: 50%; transform: translate(calc(-50% + 0.3px), calc(-50% + 0.3px)); background: center / cover no-repeat url("/images/content/recruit_process_line.png"); z-index: -1;}
.recruit-process-con .process-list-wrap .process-list:first-child .icon-box::before {border: 1px solid #ddd;}
.recruit-process-con .process-list-wrap .process-list:nth-child(2) .icon-box::before {border: 1px solid var(--main-color);}
.recruit-process-con .process-list-wrap .process-list:nth-child(3) .icon-box::before {border: 3px solid var(--main-color);}
.recruit-process-con .process-list-wrap .process-list:nth-child(4) .icon-box::before {border: 6px solid var(--main-color);}
.recruit-process-con .process-list-wrap .process-list:last-child .icon-box::before {border: 1px solid var(--main-color);}

.recruit-process-con .process-list-wrap .process-list .icon-box .icon {position: relative; width: 100%; height: 0; padding-top: 100%; z-index: 1;}
.recruit-process-con .process-list-wrap .process-list .icon-box .icon img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%;}

.recruit-process-con .process-list-wrap .process-list .icon-box .icon::before {position: absolute; top: 50%; right: -4.125rem; content: "\e93f"; font-family: "xeicon"; font-size: 2rem; color: #ccc; transform: translateY(-50%);}
.recruit-process-con .process-list-wrap .process-list:last-child .icon-box .icon::before {display: none;}

.recruit-process-con .process-list-wrap .process-list .txt-box {margin-top: 2.5rem;}
.recruit-process-con .process-list-wrap .process-list .txt-box .num {font-size: 1.3rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.025em; color: var(--main-color); text-align: center;}
.recruit-process-con .process-list-wrap .process-list .txt-box .process-list-txt {margin-top: 0.5rem; font-size: 2.4rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.05em; color: #000; text-align: center;}

.process-step-list-wrap {display: flex; flex-direction: column; gap: 1rem 0; margin-top: 8.5rem;}
.process-step-list-wrap .process-step-list {display: flex; align-items: center; background-color: #f7f7f7; border-radius: 1rem; padding: 2.5rem 6rem; box-sizing: border-box;}
.process-step-list-wrap .process-step-list .num {position: relative; padding-right: 4rem; width: 12rem; font-size: 2rem; font-weight: 700; line-height: 1.5; letter-spacing: -0.025em; color: #aaa;}
.process-step-list-wrap .process-step-list .num::before {position: absolute; top: 50%; right: 0; content: ""; width: 2px; height: 1.5rem; background-color: #ddd; transform: translateY(-50%);}
.process-step-list-wrap .process-step-list .process-step-tit {width: 9rem; padding-left: 4rem; font-size: 1.8rem; font-weight: 700; line-height: 1.5; letter-spacing: -0.05em; color: #000;}
.process-step-list-wrap .process-step-list .process-step-txt {width: calc(100% - 33rem); padding-left: 4rem; font-size: 1.6rem; font-weight: 600; line-height: 1.5; letter-spacing: -0.025em; color: #666;}

.recruit-overview-con {background: center / cover no-repeat url("/images/content/careers_overview_bg.jpg"); padding: 14rem 0 20rem 0;}
.overview-list-wrap {display: flex; flex-direction: column; gap: 2rem 0;}
.overview-list-wrap li {display: flex; align-items: center; width: 100%; padding: 3rem; background-color: rgba(255, 255, 255, 0.1); border-radius: 3rem; box-sizing: border-box;}
.overview-list-wrap li:nth-child(even) {flex-direction: row-reverse;}
.overview-list-wrap li .img-box {width: 47.5%; border-radius: 3rem; overflow: hidden;}
.overview-list-wrap li img {max-width: 100%;}
.overview-list-wrap li .txt-box {width: 52.5%; padding-left: 5%; text-align: center; box-sizing: border-box;}
.overview-list-wrap li:nth-child(even) .txt-box {padding-left: 0; padding-right: 5%;}
.overview-list-wrap li .txt-box .overview-list-tit {font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: #fff;}
.overview-list-wrap li .txt-box .overview-list-tit em {font-weight: 700;}
.overview-list-wrap li .txt-box .overview-list-tit span {font-size: 1.3rem; font-weight: 700; letter-spacing: -0.025em; color: #fff;}
.overview-list-wrap li .txt-box .overview-list-txt {margin-top: 3.2rem; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.87em; color: rgba(255, 255, 255, 0.6);}

.recruit-benefit-con {padding: 14rem 0 15rem 0;}
.benefit-list-wrap {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 3rem;}
.benefit-list-wrap .benefit-list {padding: 3.5rem; background-color: #f6f6f6; border-radius: 3rem; box-sizing: border-box;}
.benefit-list-wrap .benefit-list .benefit-list-tit {text-align: center; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.4; color: var(--main-color);}
.benefit-list-wrap .benefit-list .benefit-list-txt {margin-top: 1.7rem; text-align: center; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.58; color: #000;}
.benefit-list-wrap .benefit-list .inner-list-wrap {display: flex; flex-direction: column; gap: 0.5rem 0; margin-top: 3rem;}
.benefit-list-wrap .benefit-list .inner-list-wrap .inner-list {display: flex; align-items: center; padding: 1.5rem; background-color: #fff; border-radius: 1rem; box-sizing: border-box;}
.benefit-list-wrap .benefit-list .inner-list-wrap .inner-list .txt {width: calc(100% - 6.5rem); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.37em; color: #000;}
.benefit-list-wrap .benefit-list .inner-list-wrap .inner-list .icon {display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; margin-right: 1.5rem;}
.benefit-list-wrap .benefit-list .inner-list-wrap .inner-list .icon img {max-width: 100%;}

/* ******************  05. Resources :: 공통 ********************** */
.resources-page {padding: 5rem 0 6.5rem 0;}
.resources-page .cm-tit-box {padding-bottom: 8rem;}
.resoruce-category {display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; height: 2rem; border: 2px solid var(--main-color);/* background-color: var(--main-color); */ border-radius: 9.5rem; color: #000; padding: 0 1.1rem; box-sizing: border-box;}
.resoruce-category.font-medium {font-weight: 500;}
.resource-date {padding-top: 2.9rem; font-size: 1.3rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.05em; color: rgba(0, 0, 0, 0.3);}
.resource-list-hover {position: relative; transition: var(--transition-custom);}
.resource-list-hover::before {position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border: 4px solid var(--main-color); border-radius: 2rem; opacity: 0; transition: var(--transition-custom); pointer-events: none; box-shadow: 0 1.2rem 3.2rem 0 rgba(30, 202, 211, 0.25);}
.resource-list-hover img {transition: all 0.3s;}

@media all and (min-width: 801px) {
	.resource-list-hover:hover {background-color: #fff !important;}
	.resource-list-hover:hover img {transform: scale(1.05);}
	.resource-list-hover:hover::before {opacity: 1;}
}

.resources-page .custom-select-trigger:after {content: "\e942"; color: #000; font-size: 2.4rem; right: -0.5rem;}
.resources-page .custom-select.opened .custom-select-trigger:after {content: "\e945";}

/* ******************  05. Resources :: Blog ********************** */
.blog-list-wrap {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2.1rem;}	
.blog-list-wrap .blog-list {background-color: #f3f3f3; border-radius: 2rem; box-sizing: border-box;}
.blog-list-wrap .blog-list > a {position: relative; display: block; padding: 2.5rem 2.8rem; box-sizing: border-box;}
.blog-list-wrap .blog-list .img-box {position: relative; width: 100%; height: 0; padding-top: 68.575%; border-radius: 1rem; overflow: hidden;}
.blog-list-wrap .blog-list .img-box img {position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; width: 100%; height: 100%; object-fit: cover;}
.blog-list-wrap .blog-list .txt-box {margin-top: 3rem;}
.blog-list-wrap .blog-list .txt-box .tit {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 6.6rem; padding-top: 1rem; font-size: 2rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.05em; color: #000; box-sizing: border-box;}
.blog-list-wrap .blog-list .txt-box .hashtag {display: inline-flex; flex-wrap: wrap; gap: 0.5rem 1rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 4.2rem; padding-top: 1.5rem; font-size: 1.4rem; font-weight: 400; line-height: 1.4; letter-spacing: -0.05em; color: rgba(0, 0, 0, 0.4);}
.blog-list-wrap .blog-list .txt-box .hashtag span {padding-right: 1rem;}
.blog-list-wrap .blog-list .txt-box .hashtag span:last-child {padding-right: 0;}

/* ******************  05. Resources :: video ********************** */
.resources-page .download-con .cm-tit-box {padding-bottom: 5rem;}
/* .video-content {padding-bottom: 10rem;} */
.video-list-wrap {display: flex; flex-direction: column; gap: 2rem 0; padding-bottom: 0.5rem;}
.video-list-wrap .video-list a {display: flex; align-items: center; background-color: #f3f3f3; padding: 2.5rem; box-sizing: border-box; border-radius: 2rem;}
.video-list-wrap .video-list .img-box {position: relative; width: 40.496%; height: 0; padding-top: 22.48%; border-radius: 1rem; overflow: hidden;}
.video-list-wrap .video-list .img-box img {position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; object-fit: cover;}
.video-list-wrap .video-list .txt-box {width: 59.505%; padding-left: 5.78%; box-sizing: border-box;}
.video-list-tit {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin: 1rem 0 2rem 0; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.16em; color: #000;}

.download-con {margin-top: 15rem; padding: 11.5rem 0 13rem 0; background-color: #f5f5f5;}
.video-content .cm-tit-box .cm-txt {padding-top: 0.8rem; font-size: 1.6rem; font-weight: 500; color: rgba(0, 0, 0, 0.5);}
.down-list-wrap {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2.1rem;}
.down-list-wrap .down-list {position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 2.7rem 1.7rem 1.5rem 1.7rem; background-color: #fff; border-radius: 2rem; box-sizing: border-box;}
.down-list-wrap .down-list .txt-box {width: 100%; padding: 0 2rem; box-sizing: border-box;}
.down-list-wrap .down-list-tit {margin-top: 1rem; font-size: 2.2rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.3; color: #000;}
.down-list-wrap .down-list .down-btn {display: flex; align-items: center; justify-content: space-between; margin-top: 4.5rem; width: 100%; height: 5rem; border-radius: 0.8rem; background-color: #efefef; padding: 0 2.7rem; box-sizing: border-box; transition: var(--transition-custom)}
.down-list-wrap .down-list .down-btn span {font-size: 1.2rem; font-weight: 700; line-height: 1.4; color: #000; transition: var(--transition-custom)}
.down-list-wrap .down-list .down-btn i {font-size: 2rem; color: #000; transition: var(--transition-custom)}
.down-list-wrap .down-list::before {position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; border:3px solid #2dcdd5; border-radius: 2rem; box-sizing: border-box; transition: var(--transition-custom); opacity: 0; visibility: hidden; pointer-events: none;}
.down-list-wrap .down-list.hover::before {opacity: 1; visibility: visible;}

@media all and (min-width: 801px) {
	.down-list-wrap .down-list .down-btn:hover {background-color: #2dcdd5;}
	.down-list-wrap .down-list .down-btn:hover span, .down-list-wrap .down-list .down-btn:hover i {color: #fff;}
}

/********** 251128 :: 채용 수정 **********/
.careers-contact-con {position: relative; display: flex; align-items: center; justify-content: center; height: 98rem; background: center / cover no-repeat url("/images/content/career_contact_bg.jpg");}
.careers-contact-con .careers-contact-txt {margin-bottom: 2.5rem; text-align: center; font-size: 6rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.33; color: #fff;}
.careers-contact-con .careers-contact-btn {display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 24rem; height: 5rem; border-radius: 2.5rem; border: 3px solid #fff; box-sizing: border-box; font-size: 1.2rem; font-weight: 700; color: #fff;}