@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%}
}
/* -------- 공통 :: 좌측 탭 + 우측 컨텐츠 레이아웃 -------- */
.cm-flex-content {display: flex;}
.custom-tab-list-style {position: relative; width: 22.75%; padding-right: 6%; height: 100%; margin-bottom: 0;}
.custom-tab-list-style .sub-tab-list-style {position: static !important; height: auto !important; max-width: 30rem; border-radius: 3rem; background-color: rgba(245, 47, 35, 0.1); backdrop-filter: blur(10px)}
.custom-tab-list-style .sub-tab-list-style::before {display: none;}
.sticky-style {position: sticky !important; top: var(--header-height); z-index: 20;}
.custom-tab-list-style ul {display: flex; flex-direction: column; gap: 1rem 0; max-width: 30rem; padding: 1.4rem 1rem; box-sizing: border-box;}
.custom-tab-list-style ul li {width: 100%; background-color: transparent; border: none !important; border-radius: 3rem;}
.custom-tab-list-style ul li a {display: flex; align-items: center; justify-content: center; width: 100%; height: 6rem;}
.custom-tab-list-style ul li a.none {display: none;}
.custom-tab-list-style ul li a em {font-size: 2.2rem; font-weight: 700; line-height: 1.4em; letter-spacing: -0.05em; color: #fff;}
.custom-tab-list-style ul li.selected {background-color: transparent;}
.move-line-wrap{position: absolute; max-width: 30rem; width: 100%; margin: 0 auto; top: 0; left: 0; padding: 1.4rem 1rem; box-sizing: border-box;}
.move-line-wrap .main-move-line{position: absolute; width: 100%; margin: 0 auto; top: 0; left: 0;}
.move-line-wrap .main-move-line span{height: 6rem; width: calc(100% - 2rem); position: absolute; top: 1.4rem; left: 50%; text-align: center; transition: background-color 0.4s; background: #d21f15; border-radius:3rem; transform: translateX(-50%);}
@media all and (min-width: 801px) {
.custom-tab-list-style .sub-tab-list-style {min-height: 8.8rem;}
}
.cm-content-txt-box {width: 22.75%; padding-right: 6%;}
.cm-content-txt-box .cm-content-txt {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.37em; color: #fff;}
.cm-right-con-wrap {width: 71.25%;}
/* -------- 서브 검색바 -------- */
#subSearchBox {margin-bottom: 3rem;}
/* ****************** 스마트키퍼 프로 :: 공통 ********************** */
.point-txt {display: flex; align-items: center; justify-content: center; width: 8rem; height: 2.5rem; background-color: #d21f15; border-radius: 1.25rem; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.5em; color: #fff;}
.point-txt.width-50 {width: 5rem;}
.check-tit {position: relative; font-size: 2.6rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.5em; color: #fff; padding-left: 4.5rem;}
.check-tit::before {font-family: "xeicon"; position: absolute; content: "\e92b"; left: 0; font-size: 3rem; color: #d21f15;}
.merit-content .merit-cm-txt01 {position: relative; font-size: 2.2rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.2em; color: #fff; padding-bottom: 2rem;}
.merit-content .merit-cm-txt02 {position: relative; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.05em; line-height: 1.55em; color: rgba(255, 255, 255, 0.6);}
.merit-content .merit-cm-txt02.opa-60 {opacity: 0.6;}
.merit-content .merit-cm-txt02 span {display: inline-block; position: relative;}
/* .merit-content .merit-cm-txt02 span:last-child {display: inline-block; } */
.merit-content .merit-cm-txt02.pt-30 {padding-top: 3rem;}
.merit-content .merit-cm-txt02.line span::before {position: absolute; content: ""; width: 101%; height: 1.2rem; left: 0; bottom: 0; background-color: #7F130D; z-index: -1;}
.competitor-list-box {margin-top: 5.3rem; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 3rem;}
.competitor-list-box.oneItem {grid-template-columns: repeat(1, 1fr);}
.competitor-list-box .competitor-list {padding: 4.3rem 4rem; background-color: rgba(38, 21, 20, 0.4); border-radius: 3rem;}
.competitor-list-box .competitor-list p {padding-top: 1rem; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.05em; line-height: 1.5em; color: rgba(255, 255, 255, 0.6);}
/* ****************** 스마트키퍼 프로 :: 스마트키퍼 프로 소개 ********************** */
.pro-intro-content {padding-bottom: 13.5rem;}
.pro-intro-list-con {border-top: 2px solid #fff; margin-top: 7.5rem;}
.pro-intro-list-con .pro-intro-list {display: flex; align-items: center; justify-content: center; padding: 6rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.pro-intro-list-con .pro-intro-list .img-box {width: 38.75%; border-radius: 3rem; overflow: hidden;}
.pro-intro-list-con .pro-intro-list .img-box img {max-width: 100%;}
.pro-intro-list-con .pro-intro-list .txt-box {width: 56.375%; padding-left: 4.875%;}
.pro-intro-list-con .pro-intro-list .txt-box h4 {padding-top: 3.8rem; font-size: 4rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.5em; color: #fff;}
.pro-intro-list-con .pro-intro-list .txt-box p {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.66em; color: #fff; padding-top: 1.7rem;}
.point-txt-list-box {display: flex; flex-direction: column; gap: 1rem 0; margin: 2rem 0 1rem 2rem;}
.point-txt-list-box li {position: relative; padding-left: 1rem; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.05em; line-height: 1.5em; color: rgba(255, 255, 255, 0.6);}
.point-txt-list-box li::before {position: absolute; left: 0; top: 1.1rem; content: ""; width: 0.5rem; height: 0.2rem; background-color: rgba(255, 255, 255, 0.6);}
/* ****************** 스마트키퍼 프로 :: 도입 시 장점 6가지 ********************** */
.merit-tit-box {position: relative; width: 22.25%; padding-right: 6.5%;}
.merit-tit-box .point-txt.absolute {position: absolute; top: -4.6rem;}
.merit-tit-box p {font-size: 4rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25em; color: #fff;}
.merit-tit-box p.pt-20 {padding-top: 2rem;}
.merit-content {padding-bottom: 25rem;}
.merit-content:first-child {padding-top: 10rem; border-top: 3px solid #fff;}
.merit-content:last-child {padding-bottom: 16rem;}
/***** point 01 *****/
.merit-content .competitor-list-box {margin-top: 0;}
.merit-content .competitor-list-box .competitor-list p {padding-top: 1.5rem; color: #fff;}
/***** point 02 *****/
.merit-content .merit-key-txt {font-size: 2.2rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.45em; color: #fff;}
.merit-content .merit-key-txt.mt-30 {margin-top: 3rem;}
.merit-exam-list-box {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; margin-top: 5.3rem;}
.merit-exam-list-box .merit-exam-list {border: 2px solid #d21f15; border-radius: 3rem; overflow: hidden;}
.merit-exam-list-box .merit-exam-list h5 {display: flex; align-items: center; height: 8.5rem; font-size: 2.2rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.2em; color: #fff; background-color: #d21f15; padding: 0 4rem;}
.merit-exam-list-box .merit-exam-list h5 i {padding-right: 0.5rem;}
.merit-exam-list-box .merit-exam-list p {padding: 3.5rem 4rem 4rem 4rem; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.05em; line-height: 1.55em; color: #fff;}
/***** point 03 *****/
.merit-standard-wrap {border-top: 3px solid #fff; margin-top: 3rem;}
.merit-standard-list-box .merit-standard-list {display: flex; align-items: center; padding: 50px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
.merit-standard-list-box .merit-standard-list .txt-box {width: 57.527%; padding-right: 3%;}
.merit-standard-list-box .merit-standard-list .img-box {display: flex; align-items: center; justify-content: center; width: 39.474%; /* background-color: #261514; */ border-radius: 2rem; box-sizing: border-box; overflow: hidden;}
.merit-standard-list-box .merit-standard-list .img-box img {max-width: 100%; border-radius: 2rem;}
.commentary-txt-box {position: relative; margin-top: 3.2rem;}
.commentary-txt-box .commentary {position: absolute; margin-top: 2.5rem; left: -22rem; padding: 3.5rem 3rem 4rem 3rem; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.05em; line-height: 1.625em; color: #fff; background-color: #d21f15; border-radius: 1rem; box-sizing: border-box; box-shadow: 0 1rem 5rem 0 rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: var(--transition-custom); z-index: 1;}
.commentary-txt-box .commentary a {color: #fff; border: 1px solid #fff; border-radius: 2rem; padding: 0.5rem 1rem; box-sizing: border-box;}
.commentary-txt-box .commentary::before {position: absolute; content: ""; width: 1.5rem; height: 1.1rem; left: 50%; top: -1.1rem; transform: translateX(-50%); background: center / cover no-repeat url("/pro/images/content/pro_merit_arrow.png");}
.commentary-txt-box .commentary.active {opacity: 1; visibility: visible;}
.commentary-txt-box span {display: inline-block; border-radius: 2rem; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.05em; line-height: 1.44em; color: #fff; border: 2px solid #DB4C44; box-sizing: border-box; padding: 0.52rem 2rem; cursor: pointer;}
/***** point 04 *****/
.merit-firm-list-box {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; margin-top: 4rem;}
.merit-firm-list-box .merit-firm-list {display: flex; flex-direction: column; justify-content: space-between; background-color: rgba(38, 21, 20, 0.4); border-radius: 2rem; padding: 6rem 4rem 4rem 4rem;}
.merit-firm-list-box .merit-firm-list .img-box {margin-top: 5.3rem; border-radius: 1rem; overflow: hidden; max-width: 480px;}
.merit-firm-list-box .merit-firm-list .img-box img {max-width: 100%;}
.merit-firm-list-box .merit-cm-txt02 {min-height: 8.4rem;}
/***** point 06 *****/
.merit-security-wrap {border-top: 3px solid #fff; margin-top: 3rem;}
.merit-safe-container {border-top: 3px solid #fff; margin-top: 3rem; padding-top: 5.6rem;}
.merit-safe-container:first-of-type {margin-bottom: 14rem;}
.merit-safe-list-box01 {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 2rem; margin-top: 3.5rem;}
.merit-safe-list-box01 .merit-safe-list {display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgba(38, 21, 20, 0.4); padding: 2rem 1rem 4.5rem 1rem; border-radius: 2rem;}
.merit-safe-list-box01 .merit-safe-list figure {margin-top: 4rem; display: flex; align-items: center; justify-content: center; min-height: 11.9rem;}
.merit-safe-list-box01 .merit-safe-list figure img {max-width: 100%;}
.merit-safe-list-box01 .merit-safe-list p {min-height: 7.5rem; padding-top: 4.3rem; text-align: center; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.66em; color: #fff;}
.merit-safe-list-box02 {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; margin-top: 3.5rem;}
.merit-safe-list-box02 .merit-safe-list {background-color: rgba(38, 21, 20, 0.4); padding: 5rem 0 4.5rem 0; border-radius: 2rem;}
.merit-safe-list-box02 .merit-safe-list figure {display: flex; justify-content: flex-end;}
.merit-safe-list-box02 .merit-safe-list figure img {max-width: 100%;}
.merit-safe-list-box02 .merit-safe-list p {padding: 3.2rem 2rem 0 2rem; text-align: center; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.5em; color: #fff;}
/* ****************** 스마트키퍼 프로 :: 경쟁사 비교 ********************** */
.competitor-wrap {position: relative; margin-bottom: 23rem;}
.competitor-wrap table {position: relative;}
.competitor-wrap .mCustomScrollBox, .competitor-wrap .mCSB_container {overflow: visible;}
.competitor-wrap table::before {position: absolute; content: ""; right: -3px; top: 50%; width: 46.875%; height: calc(100% + 6rem); background-color: #a81911; border-radius: 3rem; transform: translateY(-50%); z-index: 1;}
.competitor-wrap .pro-comparison-con:before {display: none;/* width: calc(46.875% + 6px); */}
.competitor-wrap .pro-comparison-con:after {width: calc(6.25% + 3px);}
.competitor-wrap .pro-comparison-tbl tr:first-of-type th, .competitor-wrap .pro-comparison-tbl tr:first-of-type td {padding-top: 2.2rem; padding-bottom: 2.2rem;}
.competitor-wrap .pro-comparison-tbl th {border-left: none; border-right: 1px solid rgba(255, 255, 255, 0.1);}
.competitor-wrap .pro-comparison-tbl td {border-right: none; border-left: none; padding: 2.5rem;}
.competitor-wrap .pro-comparison-tbl td.essential {padding: 2rem;}
.competitor-wrap .pro-comparison-tbl td.index {position: relative; z-index: 2;}
.competitor-wrap .pro-comparison-tbl tr:last-child td:nth-child(2) {padding: 5rem 2rem 4rem 2rem;}
.competitor-wrap .pro-comparison-tbl td.beforeNone::before {display: none;}
.competitor-wrap .pro-comparison-tbl td.index::before {position: absolute; content: ""; left: 0; bottom: -1px; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.1);}
.competitor-wrap .pro-comparison-tbl td .img-box {display: flex; align-items: center; justify-content: space-between; padding: 4.5rem 0;}
.competitor-wrap .pro-comparison-tbl td .img-box img {max-width: 100%;}
.competitor-list-con {padding-bottom: 13.3rem;}
.competitor-list-con .competitor-list-tit {text-align: center; font-size: 4rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25em; color: #fff;}
.competitor-list-con > .txt-box {text-align: center; margin-top: 6.5rem;}
.competitor-list-con > .txt-box .competitor-list-txt {padding-top: 2rem; font-size: 2.6rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.45em; color: #fff;}
/* ****************** 스마트키퍼 프로 :: 구매 방법 안내 ********************** */
.buy-content {padding-bottom: 19rem;}
.buy-ps-txt {width: 22.75%; padding-right: 6%; font-size: 1.8rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.5em; color: #fff;}
.buy-ps-txt i {padding-right: 1rem;}
.buy-order-list-box {position: relative;}
.buy-order-list-box::before {position: absolute; content: ""; left: 4.3%; top: 4rem; width: 0.2rem; height: 87.5%; background-color: rgba(255, 255, 255, 0.1);}
.buy-order-list-box .buy-order-list {position: relative; padding-left: 12.282%; will-change: initial !important;}
.buy-order-list-box .buy-order-list h5 {position: relative; display: flex; align-items: center; width: 100%; height: 8rem; padding: 0 5rem; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.45em; color: #fff; background-color: rgba(255, 255, 255, 0.1); border-radius: 1rem; box-sizing: border-box;}
.buy-order-list-box .buy-order-list h5::before {position: absolute; top: 50%; left: -10.5%; content: ""; width: 3rem; height: 3rem; border-radius: 50%; background-color: rgba(210, 31, 21, 0.2); transform: translateY(-50%);}
.buy-order-list-box .buy-order-list h5::after {position: absolute; top: 50%; left: -9.4%; content: ""; width: 0.8rem; height: 0.8rem; border-radius: 50%; background-color: var(--main-color); transform: translateY(-50%);}
.buy-order-list-box .buy-order-list h5 span {padding-left: 1.5rem; font-size: 1.8rem; color: rgba(255, 255, 255, 0.6);}
.buy-content .commentary-txt-box {flex: 1; padding: 3.2rem 0; margin-top: 0;}
.buy-content .buy-order-list:last-child .commentary-txt-box {padding-bottom: 0;}
.buy-content .buy-order-list:last-child .commentary-box-wrap {max-width: 1000px; position: absolute;}
.buy-content .commentary-txt-box.pl-40 {padding-left: 4rem;}
.buy-content .commentary-txt-box span {cursor: auto; border-radius: 0; border: none; padding: 0 0 0 1rem;}
.buy-content .commentary-txt-box span em {font-size: 1.5rem;}
.buy-content .commentary-txt-box span.pl-0 {padding-left: 0;}
.buy-content .commentary-txt-box span.pb-10 {padding-bottom: 1rem;}
.buy-content .commentary-txt-box span i {cursor: pointer; padding-left: 0.4rem;}
.buy-content .commentary-txt-box .order-num {position: relative; display: inline-flex; align-items: flex-start; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.5em; color: #d21f15;}
.buy-content .commentary-txt-box .order-num .inner {padding-top: 7.3rem;}
.buy-content .commentary-txt-box .order-num .inner.min-width-0 {min-width: auto;}
.buy-content .commentary-txt-box .order-num .inner.pt-50 {padding-top: 5rem;}
.buy-content .commentary-txt-box .commentary {min-width: 43rem; width: auto; margin-top: 4.8rem; left: 50%; transform: translateX(-50%);}
.buy-content .commentary-txt-box .commentary.mt-75{margin-top: 7.5rem;}
.buy-content .commentary-txt-box .commentary.min-width-0 {min-width: auto; width: 100%;}
.buy-content .commentary-txt-box .commentary.min-width-175 {min-width: 17.5rem;}
.buy-content .commentary-txt-box .commentary li {display: flex; margin-bottom: 0.3rem;}
.buy-content .commentary-txt-box .commentary li:last-child {margin-bottom: 0; margin-top: 1.5rem;}
.buy-content .commentary-txt-box .commentary li span {display: inline-block; min-width: 7.5rem; padding-left: 0; padding-right: 3rem; color: rgba(255, 255, 255, 0.3);}
.buy-content .commentary-txt-box .order-num .inner.active {pointer-events: auto;}
.buy-content .commentary-txt-box .order-num .inner.active .commentary {opacity: 1; visibility: visible;}
.commentary-box-wrap {width: 100%; min-height: 11.6rem; max-height: 11.6rem; display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0 5rem; box-sizing: border-box;}
/* ****************** 스마트키퍼 프로 :: 파트너사 현황 (영문) ********************** */
/* .partners-page .intro-map-con {padding-bottom: 0;} */
.partners-page .intro-cm-txt-box {top: 40%;}
.partners-page .intro-cm-txt-box h4, .partners-page .intro-cm-txt-box p {letter-spacing: -0.05em !important;}
.partners-page .intro-cm-txt-box p {font-size: 1.8rem;}
.partners-info-list-box .partners-info-list {display: flex; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 3rem 2rem;}
.partners-info-list-box .partners-info-list:last-child {border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
.partners-info-list-box .partners-info-list > h4 {width: 33.582%; padding-right: 5%; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.025em !important; line-height: 1.4em; color: #fff;}
.partners-info-list-box .inner-info-list-box {width: 61.42%;}
.partners-info-list-box .inner-info-list-box .inner-info-list {display: flex;}
.partners-info-list-box .inner-info-list-box .inner-info-list > span {min-width:9.5rem; padding-right: 1.5rem; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.025em !important; line-height: 1.84em; color: rgba(255, 255, 255, 0.3);}
.partners-info-list-box .inner-info-list-box .inner-info-list > p {width: calc(100% - 9.5rem); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.025em !important; line-height: 1.84em; color: #fff; word-break: break-word;}
/* ****************** 회사소개 :: 회사소개 ********************** */
.company-page.sec03 {overflow-y: scroll;}
#introVisual.visual-effect01 .main-txt-box {opacity: 0; visibility: hidden;}
#introVisual.visual-effect01 .main-txt-box02 {opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
#introVisual.visual-effect02 .intro-video-box {opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
/* .intro-content .intro-section01 {min-height: 100vh;} */
.intro-content {padding-top: 5rem;}
.intro-content .intro-section01 {position: relative; padding: 16rem 0 21rem 0;}
.intro-content .intro-section01::before {position: absolute; content: ""; width: 100%; height: 126.2rem; left: 0; top: 0; background: center / cover no-repeat url("/pro/images/content/company_intro_bg.png");}
/* .intro-content .intro-section01 .main-txt-box {display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100vh; transition: all 0.7s;} */
.intro-content .intro-section01 .main-txt-box {display: flex; align-items: center; justify-content: center; width: 100%; /* transition: all 0.7s; */}
.intro-content .intro-section01 .intro-main-txt {font-size: 7rem; font-weight: 700; line-height: 1.2em; letter-spacing: -0.025em; color: #fff; text-align: center;}
.intro-content .intro-section01 .intro-main-txt02 {padding-bottom: 1rem; font-size: 2.4rem; font-weight: 700; line-height: 1.83em; letter-spacing: -0.05em; color: #fff;
text-align: center;}
.intro-content .intro-section01 .intro-main-txt03 {font-size: 1.8rem; font-weight: 500; line-height: 1.44em; letter-spacing: -0.05em; color: rgba(255, 255, 255, 0.6);
text-align: center; padding-top: 3.4rem;}
/* .intro-content .intro-section01 .main-txt-box02, .intro-content .intro-video-box {display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; min-height: 100vh; backdrop-filter: blur(30px); opacity: 0; visibility: hidden; transition: all 0.7s; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0);} */
.intro-content .intro-section01 .main-txt-box02, .intro-content .intro-video-box {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; /* backdrop-filter: blur(30px); *//* transition: all 0.7s; */}
.intro-content .intro-section01 .main-txt-box02 {padding: 3.7rem 0 6rem 0;}
.intro-content .intro-video-box > .area {width: 100%; box-sizing: border-box;}
.intro-content .intro-video-box {padding-top: 12rem; z-index: 1;}
.intro-content .video-iframe-wrapper {width: 100%; max-width: 1140px;}
.intro-content .video-iframe-box {padding-top: 56.25%;}
.intro-content .intro-section01 .main-txt-box02.active, .intro-content .intro-video-box.active {opacity: 1; visibility: visible;}
.intro-map-con {position: relative; display: flex; align-items: center; justify-content: center; padding: 2.5rem 0; max-width: 1878px; margin: 0 auto;}
.intro-map-con .map-box {width: 100%; max-width: 1878px; height: 793px;}
.intro-map-con .map-box img {display: block; margin: 0 auto;}
.intro-map-con .map-pin {display: flex; position: absolute; opacity: 0; visibility: hidden; transform: translateY(2rem); transition: all 0.4s;}
.intro-map-con .map-pin.dot-right {flex-direction: row-reverse;}
.intro-map-con .map-pin.korea {flex-direction: column-reverse; align-items: center;}
.intro-map-con .map-pin .dot {position: relative; width: 8px; height: 8px; border-radius: 50%; background-color:var(--main-color);; margin: 0.7rem 1rem 0 0;}
.intro-map-con .map-pin.dot-right .dot {margin: 0.7rem 0 0 1rem;}
.intro-map-con .map-pin .dot::before {position: absolute; left: 50%; top: 50%; content: ""; width: 20px; height: 20px; border-radius: 50%; background-color: rgba(245, 47, 35, 0.2); transform: translate(-50%, -50%);}
.intro-map-con .map-pin.korea::before {position: absolute; content: ""; bottom: 1.2rem; width: 0.78rem; height: 0.67rem; clip-path: polygon(50% 100%, 0 0, 100% 0); background-color:var(--main-color);}
.intro-map-con .map-pin.korea .dot {margin: 1rem 0 0 0;}
.intro-map-con .map-pin.korea .dot::before {display: none;}
.intro-map-con .map-pin p {font-size: 14px; font-weight: 600; line-height: 1.5em; letter-spacing: -0.025em; color: #fff;}
.intro-map-con .map-pin.korea p {display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 160px; height: 70px; background-color:var(--main-color);; border-radius: 35px; font-weight: 300;}
.intro-map-con .map-pin:first-child {top: 33%; left: 30.1%; transition-delay: 0.3s;}
.intro-map-con .map-pin:nth-child(2) {top: 42.1%; left: 36.8%; transition-delay: 0.8s;}
.intro-map-con .map-pin:nth-child(3) {top: 61.4%; left: 28.2%; transition-delay: 0.6s;}
.intro-map-con .map-pin:nth-child(4) {top: 54%; left: 21.2%; transition-delay: 0.7s;}
.intro-map-con .map-pin:nth-child(5) {top: 53%; left: 26.5%; transition-delay: 0.9s;}
.intro-map-con .map-pin:nth-child(6) {top: 54.9%; left: 33.1%; transition-delay: 1s;}
.intro-map-con .map-pin:nth-child(7) {top: 58.8%; left: 23.8%; transition-delay: 1.2s;}
.intro-map-con .map-pin:nth-child(8) {top: 22.3%; left: 8.3%; transition-delay: 1.3s;}
.intro-map-con .map-pin:nth-child(9) {top: 34%; left: 2.8%; transition-delay: 1.4s;}
.intro-map-con .map-pin:nth-child(10) {top: 34.8%; left: 8.3%; transition-delay: 1.5s;}
.intro-map-con .map-pin:nth-child(11) {top: 50%; left: 11%; transition-delay: 1.1s;}
.intro-map-con .map-pin:nth-child(12) {top: 44%; right: 16.3%; transition-delay: 1.9s;}
/* .intro-map-con .map-pin:first-child {top: 37%; left: 30.3%; transition-delay: 0.3s;}
.intro-map-con .map-pin:nth-child(2) {top: 37.6%; left: 27.6%; transition-delay: 0.4s;}
.intro-map-con .map-pin:nth-child(3) {top: 49.5%; left: 31.1%; transition-delay: 0.5s;}
.intro-map-con .map-pin:nth-child(4) {top: 53%; left: 21.5%; transition-delay: 0.6s;}
.intro-map-con .map-pin:nth-child(5) {top: 51.7%; left: 25.2%; transition-delay: 0.7s;}
.intro-map-con .map-pin:nth-child(6) {top: 52.5%; left: 29%; transition-delay: 0.8s;}
.intro-map-con .map-pin:nth-child(7) {top: 54%; left: 33.2%; transition-delay: 0.9s;}
.intro-map-con .map-pin:nth-child(8) {top: 60%; left: 24.9%; transition-delay: 1s;}
.intro-map-con .map-pin:nth-child(9) {top: 60.2%; left: 31%; transition-delay: 1.1s;}
.intro-map-con .map-pin:nth-child(10) {top: 74%; left: 34.3%; transition-delay: 1.2s;}
.intro-map-con .map-pin:nth-child(11) {top: 28.7%; left: 8.7%; transition-delay: 1.3s;}
.intro-map-con .map-pin:nth-child(12) {top: 37.8%; left: 2.8%; transition-delay: 1.4s;}
.intro-map-con .map-pin:nth-child(13) {top: 38.4%; left: 8.6%; transition-delay: 1.5s;}
.intro-map-con .map-pin:nth-child(14) {top: 56.4%; left: 5%; transition-delay: 1.6s;}
.intro-map-con .map-pin:nth-child(15) {top: 50.5%; left: 14.7%; transition-delay: 1.7s;}
.intro-map-con .map-pin:nth-child(16) {top: 45.3%; right: 18.3%; transition-delay: 1.8s;}
.intro-map-con .map-pin:last-child {top: 44.3%; right: 9.3%; transition-delay: 1.9s;} */
.intro-map-con .map-pin .dot span {border-radius: 50%; position: absolute; margin-left: -4.7rem; margin-top: -4.7rem; -webkit-animation-fill-mode: both; animation-fill-mode: both; width: 10rem; height: 10rem; -webkit-animation: nation-circle 4s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite; animation: nation-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite; -webkit-animation-delay: 1s; animation-delay: 1s; z-index: -1;}
.intro-map-con .map-pin .dot span:nth-of-type(2) {-webkit-animation-delay: 2s; animation-delay: 2s;}
.intro-map-con .map-pin .dot span:nth-of-type(3) {-webkit-animation-delay: 3s; animation-delay: 3s;}
.intro-map-con .map-pin .dot span:nth-of-type(4) {-webkit-animation-delay: 4s; animation-delay: 4s;}
.intro-map-con.animated .map-pin {opacity: 1; visibility: visible; transform: translateY(0);}
@keyframes nation-circle {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
background-color: rgba(245, 47, 35, 0.5);
}
100% {
-webkit-transform: scale(4);
transform: scale(4);
opacity: 0;
background-color: rgba(245, 47, 35, 0);
}
}
.intro-result-con {padding: 21rem 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); transition: var(--transition-custom2); /* opacity: 0; visibility: hidden; */}
.intro-content .result-list-box {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 1.25rem; margin-top: 7rem;}
.intro-content .result-list-box .result-list {display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 3rem; background-color: rgba(133, 54, 50, 0.2); text-align: center; padding: 8rem 4rem 6rem 4rem;}
.intro-content .result-list-box .result-list figure {height: 10.1rem;}
.intro-content .result-list-box .result-list img {max-width: 100%;}
.intro-content .result-list-box .result-list .txt-box {margin-top: 4.8rem;}
.intro-content .result-list-box .result-list .txt-box h5 {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.4em; color: #fff; padding-bottom: 1.4rem;}
.intro-content .result-list-box .result-list .txt-box .num {font-size: 7rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.2em; color:var(--main-color);;}
.intro-content .result-list-box .result-list .txt-box .date {font-size: 1.3rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.4em; color: rgba(255, 255, 255, 0.6);}
.intro-display-con {display: flex; align-items: flex-start; padding: 22rem 0 37rem 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); transition: var(--transition-custom2); /* opacity: 0; visibility: hidden; */}
.intro-display-con .intro-cm-txt-box {top: 80px; width: 41.875%; padding-right: 5%;}
/* .intro-content .display-list-wrap {display: flex; gap: 0 5rem; width: 53.125%;} */
.intro-content .display-list-wrap {display: flex; align-items: flex-start; gap: 0 5rem; width: 53.125%;}
.intro-content .display-list-wrap .display-list-box {width: 50%; display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 5rem 0;}
.intro-content .display-list-box .display-list {position: relative; height: 0; padding-top: 100%; border-radius: 3rem;}
.intro-content .display-list-box .display-list p {position: absolute; left: 12%; bottom: 9%; font-size: 2.4rem; font-weight: 500; letter-spacing: -0.025em; color: #fff;}
/* .intro-content .display-list-box:first-child .display-list:first-child {background: center / cover no-repeat url("/pro/images/content/intro_display_img01.jpg");}
.intro-content .display-list-box:first-child .display-list:nth-child(2) {background: center / cover no-repeat url("/pro/images/content/intro_display_img03.jpg");}
.intro-content .display-list-box:first-child .display-list:nth-child(3) {background: center / cover no-repeat url("/pro/images/content/intro_display_img05.jpg");}
.intro-content .display-list-box:first-child .display-list:nth-child(4) {background: center / cover no-repeat url("/pro/images/content/intro_display_img07.jpg");} */
.intro-content .display-list-box:first-child .display-list:first-child {background: center / cover no-repeat url("/pro/images/content/intro_display_jp_img.jpg");}
.intro-content .display-list-box:first-child .display-list:nth-child(2) {background: center / cover no-repeat url("/pro/images/content/intro_display_img01.jpg");}
.intro-content .display-list-box:first-child .display-list:nth-child(3) {background: center / cover no-repeat url("/pro/images/content/intro_display_img03.jpg");}
.intro-content .display-list-box:first-child .display-list:nth-child(4) {background: center / cover no-repeat url("/pro/images/content/intro_display_img05.jpg");}
.intro-content .display-list-box:first-child .display-list:nth-child(5) {background: center / cover no-repeat url("/pro/images/content/intro_display_img07.jpg");}
.intro-content .display-list-box:last-child .display-list:nth-child(1) {background: center / cover no-repeat url("/pro/images/content/intro_display_img02.jpg");}
.intro-content .display-list-box:last-child .display-list:nth-child(2) {background: center / cover no-repeat url("/pro/images/content/intro_display_img04.jpg");}
.intro-content .display-list-box:last-child .display-list:nth-child(3) {background: center / cover no-repeat url("/pro/images/content/intro_display_img06.jpg");}
.intro-content .display-list-box:last-child .display-list:nth-child(4) {background: center / cover no-repeat url("/pro/images/content/intro_display_img08.jpg");}
/* .intro-display-con.active, .intro-result-con.active {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; visibility: visible;} */
/*** 공통 ***/
.intro-cm-txt-box {position: absolute; left: 46%;}
.intro-cm-txt-box.static {position: static;}
.intro-cm-txt-box.sticky {position: sticky; left: 0;}
.intro-cm-txt-box.text-center {text-align: center;}
.intro-cm-txt-box h4 {font-size: 7rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.2em; color: #fff;}
.intro-cm-txt-box p {font-size: 2rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.65em; color: #fff; padding-top: 0.5rem;}
.intro-map-con .count-num-box {display: flex; gap: 0 5rem; margin-top: 3rem; padding: 0 1rem; box-sizing:border-box;}
.intro-map-con .count-num-box .inner {min-width: 12.5rem;}
.intro-map-con .count-num-box .count {font-size: 10rem; font-weight: 700; letter-spacing: -0.05em; color: #fff;}
.intro-map-con .count-num-box span {font-size: 2rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.4em; color: #fff;}
.intro-map-con .map-info-list-box {margin-top: 4.2rem; border-top: 2px solid #fff;}
.intro-map-con .map-info-list-box .map-info-list {display: flex; padding: 3rem 3.7rem;}
.intro-map-con .map-info-list-box .map-info-list {border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
.intro-map-con .map-info-list-box .map-info-list .map-info {width: 50%;}
.intro-map-con .map-info-list-box .map-info-list .map-info-tit {position: relative; padding-left: 1.2rem; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.83em; color: #fff;}
.intro-map-con .map-info-list-box .map-info-list .map-info-tit::before {position: absolute; top: 1.3885rem; left: 0; content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: #fff;}
.intro-map-con .map-info-list-box .map-info-list .map-info-txt {padding-left: 1.2rem; font-size: 1.8rem; font-weight: 300; letter-spacing: -0.05em; line-height: 1.83em; color: rgba(255, 255, 255, 0.6);}
/* ****************** 회사소개 :: 수상 · 인증 ********************** */
.certification-content {padding-bottom: 13.5rem;}
.certification-list-box {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 4rem 7.5rem; /* padding-bottom: 4.5rem; */}
.certification-list-box .certification-list {border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 3rem; transition: var(--transition-custom);}
.certification-list-box .certification-list a {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
.certification-list-box .certification-list .certifi-info-box {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4.5rem 4.5rem 2rem 4.5rem; box-sizing: border-box;}
.certification-list-box .certification-list .certifi-info-box figure {display: flex; align-items: center; justify-content: center;}
.certification-list-box .certification-list .certifi-info-box figure img {max-width: 100%;}
.certification-list-box .certification-list .certifi-txt {font-size: 1.8rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.2em; color: #fff; text-align: center; padding-top: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.certification-list-box .certification-list .certifi-exam-txt {display: flex; align-items: center; justify-content: center; width: 100%; height: 5.5rem; border-top: 2px solid rgba(255, 255, 255, 0.1); font-size: 1.6rem; font-weight: 700 ;letter-spacing: -0.05em; color: #fff;}
.certification-list-box .certification-list .certifi-exam-txt i {padding-right: 1rem;}
.certification-list-box .certification-list:hover {background-color: #d21f15; border-color: #d21f15;}
/* ****************** 회사소개 :: 연혁 ********************** */
.history-content {padding-bottom: 20rem;}
.history-content .cm-right-con-wrap {border-top: 3px solid #fff;}
.history-content .history-tab-con {display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 9.5rem 0 9rem 0;}
.history-content .history-tit-box {width: 42.983%;}
.history-content .history-tit-box .history-tit {font-size: 4rem; font-weight: 700; letter-spacing: -0.025em; color: #fff;}
.history-content .history-list-box {width: 57.018%;}
.history-content .history-list-box .history-list {position: relative; font-size: 2.2rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.81em; color: #fff; padding-left: 1.5rem;}
.history-content .history-list-box .history-list::before {position: absolute; content: ""; width: 0.8rem; height:0.3rem; left: 0; top: 1.8905rem; background-color: #fff;}
/* ****************** 회사소개 :: 오시는 길 ********************** */
.location-content {padding-bottom: 13rem;}
.location-map-con .map-top-box {display: flex; align-items: center; justify-content: space-between;}
.location-map-con .map-info-tit {font-size: 3.6rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.4em; color: #fff; padding-bottom: 0.7rem;}
.location-map-con .map-info-txt {font-size: 2rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.6em; color: #fff;}
.location-map-con .map-info-txt i {padding-right: 0.5rem;}
.location-map-con .map-top-box .info-box {width: 60%; padding-right: 5%;}
.location-map-con .map-btn-box {display: flex; justify-content: flex-end; gap: 0 1rem; width: 35%;}
.location-map-con .map-btn {display: flex; align-items: center; justify-content: space-between; height: 5rem; border-radius: 2.5rem; border: 3px solid #fff; padding: 0 1.5rem; box-sizing: border-box; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.025em; color: #fff;}
.location-map-con .map-btn:first-child {width: 14rem;}
.location-map-con .map-btn:last-child {width: 12rem;}
.location-map-con .map-btn i {font-size: 2.4rem;}
.location-map-con .map-bt-box {position: relative; width: 100%; height: 0; padding-top: 48.246%; margin-top: 3.3rem;}
.location-map-con .map-bt-box iframe {position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 3rem;}
/* ****************** 제품소개 ********************** */
/* list */
.product-content {padding-bottom: 24rem;}
.product-content #fixedContentM1 {border-bottom: 2px solid rgba(255, 255, 255, 0.2); padding-bottom: 15rem;}
.product-page .main-search-box {transform: translateY(0); opacity: 1;}
.product-page .data-list-box {grid-gap: 2rem 0.75rem;}
.product-page .data-list-box .data-list a {display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%;}
/* .product-content .data-list-box .data-list .img-box {height: 15rem; max-height: 15rem;} */
.product-content .data-list-box .data-list .txt-box p {padding-top: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-word;}
.product-content .data-list-box .data-list .txt-box span {display: inline-block; padding-top: 0.5rem; font-size: 1.6rem; font-weight: 700; line-height: 1.1em; letter-spacing: -0.05em; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-word;}
.product-slide-wrap .photo-item .tit{font-size:2.8rem; line-height:1.78; letter-spacing:-0.05em; color:#001; font-weight:600; margin-bottom:0.7rem;}
.product-slide-wrap .photo-item .photo-list{position: relative; border-radius:2rem; box-sizing:border-box;}
.product-slide-wrap .photo-item .photo-list{display: flex; flex-direction: column; justify-content:space-between;}
.product-slide-wrap .photo-item .photo-list .big-list{width:100%;}
.product-slide-wrap .photo-item .photo-list .big-list .list-item{width:100%; border-radius: 2rem; background-color: rgba(245, 47, 35, 0.1);}
.product-slide-wrap .photo-item .photo-list .big-list .list-item span{position: relative; display: block; width:100%; height:0; padding-top:100%; overflow:hidden; border-radius:2rem; background-color: rgba(245, 47, 35, 0.1);}
.product-slide-wrap .photo-item .photo-list .big-list .list-item img{position: absolute; width:100%; top:0; bottom:0; left:0; right:0; margin:auto;}
.product-slide-wrap .photo-item .photo-list .nav-list{width:100%; margin-top: 2.5rem;}
.product-slide-wrap .photo-item .photo-list .nav-list .slick-list {margin: 0 -0.65rem;}
.product-slide-wrap .photo-item .photo-list .nav-list .list-item{position: relative; width:100%; margin: 0 0.65rem;}
.product-slide-wrap .photo-item .photo-list .nav-list .list-item:before{position: absolute; content:''; width:100%; height:100%; border-radius:2rem; box-sizing:border-box; background-color: rgba(0, 0, 0, 0.7); z-index:1; opacity:1; transition:var(--transition-custom);}
.product-slide-wrap .photo-item .photo-list .nav-list .list-item span{position: relative; display: block; width:100%; height:0; padding-top:100%; overflow:hidden; border-radius:2rem; background:rgba(245, 47, 35, 0.1);}
.product-slide-wrap .photo-item .photo-list .nav-list .list-item span img{position: absolute; /* width:100%; */ height:100%; top:0; bottom:0; left:0; right:0; margin:auto;}
.product-slide-wrap .photo-item .photo-list .nav-list .list-item.slick-current:before{opacity:0;}
.product-tab-con .product-cm-content {display: flex; margin-top: 12rem;}
.product-page .cm-right-con-wrap .product-tab-con:first-child .product-cm-content {margin-top: 0;}
.product-tab-con .product-cm-content .product-tit-wrap {/* width: 19.825%; padding-right: 10%; */ width: 29.824%; padding-right: 3rem; box-sizing: border-box;}
.product-tab-con .product-cm-content .product-tit-wrap strong {padding: 0.25rem 1.5rem; border-radius: 1.25rem; background-color: #d21f15; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.4em; color: #fff;}
.product-tab-con .product-cm-content .product-tit-wrap h4 {padding-top: 1.9rem; font-size: 4rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2em; color: #fff;}
.product-tab-con .product-cm-content .product-content-wrap {width: 70.176%;}
.product-tab-con .product-info-wrap {width: 47.371%; padding-right: 8.77%;}
.product-tab-con .product-slide-wrap {width: 43.86%; height:auto; max-height:none;}
/* 260521 유지보수 :: ~를 사용해야 하는 이유 */
.cm-product-why-use-box{border-top: 2px solid rgba(255, 255, 255, 0.1); padding: 5rem 0;}
.product-content-wrap .cm-product-why-use-box:last-child {border-bottom: 2px solid rgba(255, 255, 255, 0.1);}
.cm-product-content-inner-tit{margin-bottom: 2rem;}
.cm-product-content-inner-tit .tit{font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4em; color: #fff; padding-bottom: 1rem;}
.cm-product-content-inner-tit .txt{font-size: 1.8rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.94em; color: rgba(255, 255, 255, 0.6);}
/* // */
/* 260521 유지보수 :: 제품 비교 */
.cm-product-comparison-tbl-box{border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 2rem; box-sizing: border-box; overflow: hidden;}
.cm-product-comparison-tbl{width: 100%; table-layout: fixed;}
.cm-product-comparison-tbl tr{}
.cm-product-comparison-tbl th,
.cm-product-comparison-tbl td{padding: 3rem 1.5rem; font-size: 2rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; color: #fff; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1);}
.cm-product-comparison-tbl th{background: rgba(255, 255, 255, 0.1);}
.cm-product-comparison-tbl tr td{color: rgba(255,255,255,0.6);}
.cm-product-comparison-tbl tr td:last-child{background-color: #690600;}
.cm-product-comparison-tbl tr:last-child th,
.cm-product-comparison-tbl tr:last-child td{border-bottom: 0;}
.cm-product-comparison-tbl th[rowspan]{border-bottom: 0;}
.cm-product-comparison-tbl td p{font-weight: inherit; color: inherit;}
.cm-product-comparison-tbl .b-img{position: relative; width: 12rem; height: 12rem; display: inline-block;}
.cm-product-comparison-tbl .s-img{position: relative; width: 7.6rem; height: 7.6rem; display: inline-block;}
.cm-product-comparison-tbl .b-img img,
.cm-product-comparison-tbl .s-img img{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%;}
.cm-product-comparison-tbl .b-img + p,
.cm-product-comparison-tbl .s-img + p{margin-top: 1rem;}
/* // */
.product-slide-wrap .photo-item .photo-list .big-list:not(.slick-initialized),
.product-slide-wrap .photo-item .photo-list .nav-list:not(.slick-initialized){display: flex;}
.product-tab-con .product-info-wrap .des-box {border-bottom: 2px solid rgba(255, 255, 255, 0.1); padding-bottom: 4.5rem;}
.product-tab-con .product-des-cate {padding-bottom: 1rem; font-size: 2rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.4em; color: #fff;}
.product-tab-con .product-des-cate i {padding-right: 1.3rem;}
.product-tab-con .product-des-tit {padding-bottom: 2rem; font-size: 6rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.4em; color: #fff;}
.product-tab-con .product-des-txt {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.55em; color: #fff;}
.product-tab-con .des-list-box {padding: 3rem 0; border-bottom: 2px solid rgba(255, 255, 255, 0.1);}
.product-tab-con .des-list-box .des-list {display: flex;}
.product-tab-con .des-list-box .des-list strong {width: 7rem; padding-right: 3.5rem; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.94em; color: #fff;}
.product-tab-con .des-list-box .des-list p {position: relative; width: calc(100% - 10.5rem); font-size: 1.8rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.94em; color: rgba(255, 255, 255, 0.6);}
.product-tab-con .des-list-box .des-list p img {padding-top: 1rem; width: 100%;}
.product-tab-con .des-list-box .des-list p.color-select-name {width: 100%;}
.product-tab-con .des-list-box .des-list > .inner {width: calc(100% - 17.5rem);}
.color-dot-list-box {display: flex; flex-wrap: wrap; gap: 0.8rem; padding: 0.5rem 0 1.5rem 0;}
.color-dot-list-box .color-dot-list {position: relative; content: ""; top: 0; right: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background-color: red; cursor: pointer; box-sizing: border-box; border: 2px solid transparent; transition: all 0.4s;}
.color-dot-list-box .color-dot-list.selected {border-color: #fff;}
.product-tab-con .product-des-btn {display: flex; align-items: center; justify-content: center; width: 100%; height: 6rem; margin-top: 5rem; border-radius: 3rem; background-color: #d21f15; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.025em; color: #fff;}
.product-tab-con .caution-con figure {display: flex; align-items: center; justify-content: center; border-radius: 2rem; overflow: hidden; background-color: rgba(245, 47, 35, 0.1);}
.product-tab-con .caution-con img {max-width: 100%;}
.product-tab-con .caution-con .caution-txt {padding-top: 2rem; font-size: 2rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.3em; color: #fff;}
.product-tab-con .features-list-box .features-list {display: flex; align-items: center; border-top: 2px solid rgba(255, 255, 255, 0.1); padding: 5rem 0;}
.product-tab-con .features-list-box .features-list:last-child {border-bottom: 2px solid rgba(255, 255, 255, 0.1);}
.product-tab-con .features-list-box .txt-box h5 {display: flex; font-size: 2.3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4em; color: #fff; padding-bottom: 1.2rem;}
.product-tab-con .features-list-box .txt-box h5 span {display: inline-block; min-width: 3rem; padding-right: 0.7rem; color: #d21f15; white-space: nowrap;}
.product-tab-con .features-list-box .features-list .txt-box {width: 58.15%; padding-right: 5.6%;}
.product-tab-con .features-list-box .features-list .img-box {width: 36.25%; border-radius: 1rem; overflow: hidden; background-color: rgba(245, 47, 35, 0.1);}
.product-tab-con .features-list-box .features-list .img-box img {width: 100%; border-radius: 1rem; object-fit: cover;}
.product-tab-con .features-list-box .txt-list-box .txt-list {position: relative; padding-left: 1.2rem; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.94em; color: rgba(255, 255, 255, 0.6);}
.product-tab-con .features-list-box .txt-list-box .txt-list::before {position: absolute; content: ""; width: 6px; height: 2px; left: 0; top: 1.646rem; background-color: rgba(255, 255, 255, 0.6);}
.product-tab-con .applied-list-box {display: flex; gap: 0 2rem; margin-top: 4rem;}
.product-tab-con .applied-list-box:first-child {margin-top: 0;}
.product-tab-con .applied-list-box img {width: 100%;}
.product-tab-con .applied-list-box .applied-list {flex: 1;}
.product-tab-con .applied-list-box .applied-list figure {border-radius: 1rem; overflow: hidden;}
.product-tab-con .applied-list-box .applied-list.oneItem figure {display: flex; align-items: center; justify-content: center; background-color: rgba(245, 47, 35, 0.1);}
.product-tab-con .applied-list-box .applied-list h5 {padding-bottom: 1.2rem; font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4em; color: #fff;}
.product-tab-con .applied-list-box .applied-list h5 + p{margin-bottom: 2rem; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.94em; color: rgba(255, 255, 255, 0.6);}
.product-content .cm-scroll-drag-guide {position: absolute; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.7); transition: var(--transition-custom);}
.product-content .cm-scroll-drag-guide .cm-scroll-drag-inner {position: relative; width: 20rem; height: auto;}
.product-content .cm-scroll-drag-guide p {position: absolute; bottom: 8rem; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.05em; line-height: 1.5em; color: #fff;}
.product-content .cm-scroll-drag-guide .cm-scroll-drag-inner:before {position: absolute; top: 0; right: 0; width: 100%; height: 3px; background-color: rgba(255, 255, 255, 0.2); content: ""; border-radius: 5px;}
.product-content .cm-scroll-drag-guide .drag-tail {position: absolute; z-index: 1; left: 0px; top: -0.5rem; animation: moveScrollAni 3s both infinite;}
.product-content .cm-scroll-drag-guide .drag-tail .hand-icon {font-size: 2.5rem; color: #fff;}
.product-content .cm-scroll-drag-guide.hide {opacity: 0; visibility: hidden;}
@media all and (max-width: 1280px) {
.product-content .cm-scroll-drag-guide p {bottom: 4rem;}
}
@media all and (max-width: 800px) {
.product-content .cm-scroll-drag-guide p {bottom: 6rem; font-size: 1.4rem;}
}
@media all and (max-width: 640px) {
.product-content .cm-scroll-drag-guide p {bottom: 4rem;}
}
@media all and (max-width: 480px) {
.product-content .cm-scroll-drag-guide p {bottom: 2rem;}
}
@keyframes moveScrollAni {
0%, 10% {
left: 0;
margin-left: 0px;
}
50% {
left: 100%;
margin-left: -25px;
}
100% {
left: 0;
margin-left: 0px;
}
}
/* 비디오 영역 Start */
.video-iframe-wrapper{position:relative; max-width:800px; margin:0px auto; border-radius: 1rem; overflow:hidden;}
.video-iframe-box{position:relative; padding-top:56.25%; height:0; background-color:#000;}
.video-iframe-box iframe{position:absolute; top:0px; left:0px; width:100%; height:100%;}
.video-cover-box{position:absolute; top:0px; left:0px; width:100%; height:100%; cursor:pointer ; }
.video-cover-box .thumb{display:block; width:100%; height:100%;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.video-cover-box .thumb img{width:100%; height:100%;}
.video-cover-box .icon{display: flex; align-items: center; justify-content: center; position:absolute; width: 11rem; height: 11rem; top:50%; left:50%; background-color: rgba(210, 31, 21, 0.2); border-radius: 50%; z-index:1; -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.video-cover-box .icon::before {position: absolute; content: ""; width: 9rem; height: 9rem; background-color: #d21f15; border-radius: 50%;}
.video-cover-box .icon i{position: relative; font-size:3rem; color:#fff; line-height:50px; z-index: 2;}
.product-video-txt {font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4em; color: #fff; padding-top: 1.4rem;}
.video-iframe-wrapper:hover .thumb {transform: scale(1.07);}
.product-tab-con .proposal-list-box {margin-top: 0;}
.product-tab-con .proposal-list-box .proposal-list {padding-right: 0;}
/* ****************** 고객지원 :: 공지/소개 ********************** */
.notice-content {padding-bottom: 21rem;}
.notice-content .main-news-con {margin-top: 0;}
.notice-content .main-news-item a {padding: 3.5rem 2.2rem;}
.notice-content .main-news-txt {width: 71.995%; padding-left: 2%;}
.notice-content .main-news-txt .category {display: inline-flex; align-items: center; justify-content: center; border: none; width: auto; min-width: 8.15rem; height: 3.2rem; border-radius: 1.6rem; padding: 0 1rem; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.1); font-size: 1.6rem; transition: var(--transition-custom);}
.notice-content .main-news-txt .tit {margin-top: 0.5rem; font-size: 2.4rem;}
.notice-content .main-news-txt .date {font-size: 1.6rem;}
.notice-content .main-news-img {width: 26.005%;}
.notice-content .main-news-img div {padding-top: 52.632%;}
.notice-content .main-news-item a:after {right: 3.5rem;}
.notice-content .main-news-item:hover .category {background-color:var(--main-color);;}
/* ****************** 고객지원 :: 자주 묻는 질문 ********************** */
.category-tab-list-box {display: flex; flex-wrap: wrap; gap: 1rem;}
.category-tab-list-box .category-tab-list {border: 2px solid rgba(255, 255, 255, 0.1); box-sizing: border-box; border-radius: 1.75rem;}
.category-tab-list-box .category-tab-list a {display: block; width: 100%; height: 100%; font-size: 1.8rem; line-height: 1.4em; font-weight: 500; letter-spacing: -0.05em; color: #fff; padding: 0.3rem 1.5rem; box-sizing: border-box;}
.category-tab-list-box .category-tab-list.selected {background-color: #e12929; border-color: #e12929;}
/* ****************** 고객지원 :: 공통 ********************** */
.customer-page .main-search-box {transform: translateY(0); opacity: 1;}
.data-list-box {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 3rem; /* margin-top: 3rem */}
.data-list-box.mt-30 {margin-top: 3rem;}
.data-list-box.twoItem {grid-template-columns: repeat(2, 1fr); grid-gap: 1rem;}
.data-list-box .data-list {display: flex; flex-direction: column; justify-content: space-between; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 3rem; transition: var(--transition-custom); overflow: hidden;}
/* .data-list-box .data-list .top-inner {padding: 6.3rem 6.3rem 3.5rem 6.3rem; text-align: center;} */
.data-list-box .data-list .top-inner {position: relative; padding: 0; padding-bottom: 0; flex: 1; display: flex; flex-direction: column; justify-content: center;}
.data-list-box .data-list .top-inner .txt-box {text-align: center; position: absolute; width: 100%; left: 0; bottom: 0; height: 8.5rem; padding: 0 2rem; box-sizing: border-box;}
.data-list-box .data-list .img-box {display: flex; align-items: center; justify-content: center; min-height: 36.5rem;}
.data-list-box .data-list .img-box.shadow img {box-shadow: 0 43px 49px 0 rgba(0, 0, 0, 0.19);}
.data-list-box .data-list .img-box img {max-width: 100%; max-height: 100%; margin-bottom: 5rem;}
.data-list-box .data-list .txt-box p {font-size: 2.2rem; font-weight: 700; line-height: 1.1em; letter-spacing: -0.05em; color: #fff;}
/* .data-list-box.twoItem .data-list .txt-box p {padding-top: 3.5rem;} */
.data-list-box.twoItem .data-list .txt-box p {padding-top: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-word;}
.data-list-box .data-list .txt-box p span {font-size: 1.6rem;}
.data-list-box .data-list .btn-box {display: flex;}
.data-list-box .data-list .btn-box .data-btn, .data-list-box .data-list .txt-box .down-txt {position: relative; display: flex; align-items: center; justify-content: center; flex: 1; height: 6rem; box-sizing: border-box; border-top: 2px solid rgba(255, 255, 255, 0.2); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.05em; color: #fff; line-height: 1.2em;}
.data-list-box .data-list .txt-box .down-txt {padding-top: 0 !important;}
.data-list-box .data-list .btn-box .data-btn i, .data-list-box .data-list .txt-box .down-txt i {font-size: 1.6rem; padding-right: 1rem;}
.data-list-box .data-list .btn-box .data-btn + .data-btn::before, .data-list-box .data-list .txt-box .down-txt + .down-txt::before {position: absolute; content: ""; width: 2px; height: 100%; left: -1px; top: 0; background-color: rgba(255, 255, 255, 0.2);}
.data-list-box .data-list:hover {background-color: #d21f15; border-color: #d21f15;}
/* 팝업 */
.manual-pop-content .modal-close-btn {bottom: -30px;}
.manual-pop-inner {border: none; padding: 0; height: 40rem; overflow-y: hidden;}
.manual-pop-inner .iframe-wrapper, .manual-pop-inner .iframe-inner {width: 100%; height: 100%;}
.manual-pop-inner iframe {width: 100%; height: 100%;}
/* ****************** 고객지원 :: 제안서 ********************** */
.proposal-list-box {border-top: 2px solid rgba(255, 255, 255, 0.1); /* margin-top: 6rem; */}
.proposal-list-box .proposal-list {border-bottom: 2px solid rgba(255, 255, 255, 0.1);}
.proposal-list-box .proposal-list a {display: flex; align-items: center; justify-content: space-between; position: relative; padding: 3.4rem 4rem;}
.proposal-list-box .proposal-list a::before {position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--main-color); content: ''; transition: var(--transition-custom);}
.proposal-list-box .proposal-list .proposal-txt {width: calc(95% - 15rem); font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.4em; color: #fff;}
.proposal-list-box .proposal-list .proposal-down-txt {display: flex; align-items: center; justify-content: center; width: 15rem; height: 5rem; border: 2px solid rgba(255, 255, 255, 0.1); box-sizing: border-box; border-radius: 2.5rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.05em; color: #fff; transition: var(--transition-custom);}
.proposal-list-box .proposal-list .proposal-down-txt i {font-size: 1.6rem; color: #fff; padding-right: 1.5rem;}
.proposal-list-box .proposal-list a:hover .proposal-down-txt {background-color:var(--main-color);; border-color:var(--main-color);;}
.proposal-list-box .proposal-list a:hover::before {width: 100%;}
.proposal-content .data-list-box .data-list .txt-box p {display: flex; align-items: center; justify-content: center;}
/* ****************** 온라인 문의 ********************** */
.online-content {padding-bottom: 11rem;}
.online-content .online-write-con {border-top: 3px solid #fff;}
.online-content .online-con-tit {display: flex; align-items: center; width: 12rem; height: 4rem; padding-right: 2.5rem; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.37em; color: #fff;}
.online-content .online-input-con {display: flex; align-items: flex-start; margin: 0; border-bottom: 3px solid rgba(255, 255, 255, 0.3); padding: 3.7rem 0;}
.online-content .custom-radio-con {display: flex; flex-direction: column; gap: 2.5rem 0; border-bottom: 3px solid rgba(255, 255, 255, 0.3); padding: 3.15rem 0;}
.online-content .online-textarea-con {display: flex; align-items: flex-start; border-bottom: 3px solid rgba(255, 255, 255, 0.3); padding: 2.8rem 0;}
.online-content .custom-radio-item-box {display: flex; align-items: flex-start; margin: 0;}
.online-content .essential-icon {margin-right: 0; color: #fff;}
.online-content .input-list-box {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.7rem 6rem; width: 100%;}
.online-content .input-list-box .online-input-list {display: flex;}
.online-content .input-list-box .online-input-list .input-box, .online-content .radio-box, .online-content .textarea-box {width: calc(100% - 14.5rem);}
.online-content .radio-box {display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;}
.online-content .input-list-box .online-input-list .input-box {display: flex;}
.online-content select, .online-content .online-textarea, .online-content .online-input, .online-content .etc-input {width: 100%; border-radius: 2rem; border: 2px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; background-color: transparent; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.05em; color: #fff; padding: 0 1.5rem; outline: none; transition: var(--transition-custom);}
.online-content select {max-width: 10rem; margin-right: 1rem; background: url("data:image/svg+xml;utf8,") no-repeat; background-size: 10px; background-position: calc(100% - 20px) 50%;}
.online-content select:focus, .online-content .online-textarea:focus, .online-content .online-input:focus, .online-content .etc-input:focus {border-color: #fff}
.online-content textarea::placeholder, .online-content input::placeholder {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.05em; color: rgba(255, 255, 255, 0.2);}
.online-content .online-textarea {height: 30rem; padding: 1rem 1.5rem;}
.online-content .online-input {height: 4rem;}
.online-content .etc-input {max-width: 36rem; height: 4rem; margin-left: 1rem;}
.online-content .custom-radio-item-box .custom-radio-item {display: flex; align-items: center; margin: 0;}
.online-content .custom-radio-item label {display: flex; align-items: center; height: 4rem; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.37em; color: #fff; padding-left: 2.7rem;}
.online-content .custom-radio-item label::before {top: 0.767rem; font-size: 1.8rem; color: #fff;}
.online-content .custom-radio-item input[type="radio"]:checked + label::before {color: #fff;}
.online-content .bbs-inquiry-agree-con .agree-txt label i {color: rgba(255, 255, 255, 0.5);}
.online-content .bbs-inquiry-agree-con .agree-txt input:checked + label i {color: #fff;}
.online-content .bbs-inquiry-agree-con {display: flex; align-items: center; justify-content: space-between; margin: 4.5rem 0 0 0 !important;}
.online-content .bbs-inquiry-agree-con .agree-txt {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.37em; color: #fff;}
.online-content .bbs-inquiry-agree-con .agree-txt label {padding-left: 3.1rem;}
.online-content .bbs-inquiry-agree-con .agree-txt i {font-size: 2.4rem; top: 0.5rem;}
.online-content .online-btn {display: flex; align-items: center; justify-content: center; width: 30rem; height: 6rem; border-radius: 3rem; border: 2px solid rgba(255, 255, 255, 0.2); font-size: 2.2rem; font-weight: 700; letter-spacing: -0.05em; color: #fff; transition: var(--transition-custom);}
.online-content .online-btn i {font-size: 2.4rem; transform: rotateZ(-45deg); margin-left: 0.5rem;}
.online-content .online-btn:hover {background-color: var(--main-color); border-color: var(--main-color); color: #fff;}
/* black-ver */
.online-content.black-ver{padding-bottom: 0;}
.online-content.black-ver .input-list-box {grid-template-columns: repeat(1, 1fr);}
.online-content.black-ver .online-con-tit {font-size: 1.8rem;}
.online-content.black-ver .online-con-tit,
.online-content.black-ver .essential-icon {color: #000;}
.online-content.black-ver .online-input-con ,
.online-content.black-ver .custom-radio-con ,
.online-content.black-ver .online-textarea-con {padding: 0; border-color: rgba(255, 255, 255, 0.3);}
.online-content.black-ver select,
.online-content.black-ver .online-textarea,
.online-content.black-ver .online-input,
.online-content.black-ver .etc-input {border-color: rgba(0, 0, 0, 0.2); color: #000;}
.online-content.black-ver select {background: url("data:image/svg+xml;utf8,") no-repeat;}
.online-content.black-ver select:focus,
.online-content.black-ver .online-textarea:focus,
.online-content.black-ver .online-input:focus,
.online-content.black-ver .etc-input:focus {border-color: #000}
.online-content.black-ver textarea::placeholder,
.online-content.black-ver input::placeholder {color: rgba(0, 0, 0, 0.2);}
.online-content.black-ver .custom-radio-item label {color: #000;}
.online-content.black-ver .custom-radio-item label::before,
.online-content.black-ver .custom-radio-item input[type="radio"]:checked + label::before,
.online-content.black-ver .bbs-inquiry-agree-con .agree-txt input:checked + label i {color: #000;}
.online-content.black-ver .bbs-inquiry-agree-con .agree-txt label i {color: rgba(0, 0, 0, 0.5);}
.online-content.black-ver .bbs-inquiry-agree-con{justify-content: center;}
.online-content.black-ver .online-btn {border-color: rgba(0, 0, 0, 0.2); color: #000;}
.online-content.black-ver .online-btn:hover { color: #fff;}
@media all and (max-width:800px){
.online-content.black-ver .online-con-tit {width: 12rem; font-size: 1.6rem; padding-right: 0;}
.online-content.black-ver .input-list-box .online-input-list .input-box,
.online-content.black-ver .radio-box,
.online-content.black-ver .textarea-box { width: calc(100% - 12rem);}
}