@charset "utf-8";
/* 공통 */
.sub-numtit { margin-bottom: 40px; display: flex; }
.sub-numtit .num { width: 48px; height: 48px; border-radius: 48px; display: flex; align-items: center; justify-content: center; color: #fff; line-height: 1em; margin-right: 24px; background: var(--color-primary);}
.sub-numtit h3 { flex: 1 1 auto; min-width: 0; width: 1%; font-size: var(--font-size30); font-weight: 600; line-height: 1.5em; color: #242424; }
.chk-txt p { position: relative; padding-left: 30px; }
.chk-txt p strong { font-weight: 600; }
.chk-txt p::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; background: url(../images/sub/sub1-chk.png) center no-repeat; background-size: contain;}
.chk-txt p.clr { color: #242424; font-size: 18px; padding-left: 36px; }
.chk-txt p.clr::before { top: 6px; } 
.chk-txt.fx { display: flex; gap: 16px; flex-wrap: wrap;}
.chk-txt.fx p { width: calc(100%/2 - 8px);}
.chk-txt.fx p.w100 { width: 100%; }
.chk-txt.fx2 { gap: 8px; }
.sub2-tit { margin-bottom: 24px; position: relative; padding-left: 36px; line-height: 1.5em; color: #242424; font-weight: 600; font-size: var(--font-size24);}
.sub2-tit::before { content: ""; position: absolute; left: 0; width: 16px; height: 4px; top: 16px; background: var(--color-primary); }
.sub-txtbox { padding: 40px; border: 1px solid #ddd; border-radius: 20px; }
.sub-txtbox h4 { font-size: var(--font-size24); font-weight: 600; line-height: 1.5em; color: #242424; margin-bottom: 30px; }
.sub-txtbox .col { margin-bottom: 40px; }
.sub-txtbox .col:last-child { margin-bottom: 0; }
.sub-txtbox .col h4 { font-size: var(--font-size18); margin-bottom: 10px; }
.sub-txtbox h5 { font-size: 16px; font-weight: 600; line-height: 1.5em; margin-bottom: 20px; }
.sub-txtbox .txt p { margin-bottom: 14px; line-height: 1.5em; }
.sub-txtbox .txt p:last-child { margin-bottom: 0; }
.subtit { font-size: var(--font-size22); font-weight: 600; line-height: 1.25em; color: #242424; padding-left: 14px; position: relative; padding-bottom: 20px; }
.subtit::before { content: ""; position: absolute; left: 0; width: 4px; height: 28px; background: var(--color-primary); top: 0; }
.subtit.bd { border-bottom: 1px solid #ddd;}
.subtit.fz { font-size: var(--font-size36); padding-bottom: 40px; padding-left: 24px; }
.subtit.fz::before { height: 40px; top: 2px;}
.subtit span { font-size: var(--font-size18);}
.subtit.fx { display: flex; align-items: center; gap: 24px; }
.subtit.fx::before { top: 7px; }
.subtit.fx a { color: #fff; font-weight: 600; font-size: 16px; background: var(--color-primary); height: 56px; border-radius: 28px; padding: 0 30px; display: inline-flex; align-items: center; justify-content: center; }
.sub-pd { padding-bottom: 100px; }
.sub-pd.last { padding-bottom: 0; }
.jum-txt p { position: relative; padding-left: 12px; line-height: 1.8em; }
.jum-txt p::before { content: ""; position: absolute; left: 0; top: 12px; width: 3px; height: 3px; border-radius: 4px; background: #454545;}
.sub-tbl-wrap { overflow: auto;}
.sub-tbl { width: 100%; border-collapse: collapse; border-top: 2px solid #242424;}
.sub-tbl tr { border-bottom: 1px solid #ddd;}
.sub-tbl th { border-right: 1px solid #ddd; background: #fafafa; font-weight: 600; color: #242424; padding: 22px 10px;}
.sub-tbl.pd th { padding: 20px 0 19px;}
.sub-tbl th:last-child { border: none; }
.sub-tbl th.bd { border-right: 1px solid #ddd;}
.sub-tbl th span { font-size: 14px; color: #454545; font-weight: 400; }
.sub-tbl th.fx { position: relative; padding: 22px 30px; font-weight: 600; }
.sub-tbl th.fx::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom left, transparent calc(50% - 0.5px), #ddd calc(50% - 0.5px), #ddd calc(50% + 0.5px), transparent calc(50% + 0.5px)); pointer-events: none; }
.sub-tbl th.fx span:first-child { position: absolute; top: 23px; left: 20px; font-weight: 600;}
.sub-tbl th.fx span:last-child { position: absolute; bottom: 23px; right: 20px; font-weight: 600; }
.sub-tbl td { border-right: 1px solid #ddd; padding: 22px 10px; text-align: center; }
.sub-tbl.pd td { padding: 20px 0 19px;}
.sub-tbl td:last-child { border: none; }
.sub-tbl td.bd { border-right: 1px solid #ddd;}
.sub-tbl tr.fw td { font-weight: 700; }
.sub-tbl td.tl { text-align: left; padding: 30px; }
.sub-tbl tr.clr { border-color: #242424;}
.sub-tbl.clr th { color: #242424; }
.sub-tbl.clr td strong { font-weight: 600; }
.sub-tbl.clr td { color: #242424; }

/* 인사말 */
.gt-tit { font-size: var(--font-size36); font-weight: 600; line-height: 1.5em; color: #242424; text-align: center; }
.gt-tit span { color: var(--color-primary);}
.gt-tit.white { color: #fff; }
.gt-bg { margin-bottom: 120px; display: flex; align-items: center; justify-content: center; background: url(../images/sub/sub1-1-img.jpg) center no-repeat; background-size: cover; height: 52vh; }
.gt { text-align: center; position: relative; padding-bottom: 40px; }
.gt h4 { font-size: var(--font-size30); line-height: 1.5em; color: #242424; font-weight: 600; margin-bottom: 40px; }
.gt h4 span { color: var(--color-primary);}
.gt p { margin-bottom: 25px; }
.gt p:last-child { margin-bottom: 0; }
.gt .big { font-size: 104px; font-weight: 900; line-height: 1em; color: rgba(0,0,0,0.03); position: absolute; left: 0; right: 0; bottom: 0; margin: auto; z-index: -1; }

/* 경영이념 */
.mn-bg { background: #fff; padding: 110px 15px; text-align: center; box-shadow: 6px 6px 40px 0 rgba(46, 103, 217, 0.20); margin-bottom: 120px; border-radius: 300px; }
.mn { display: flex; flex-wrap: wrap; margin-top: 40px; gap: 40px; }
.mn .col { width: calc(100%/4 - 30px); text-align: center; min-height: 390px; padding: 30px; color: #fff; border-radius: 20px; display: flex; align-items: center; justify-content:center;}
.mn .col.bg1 { background: #a8c1f2;}
.mn .col.bg2 { background: #6A90DB;}
.mn .col.bg3 { background: var(--color-primary);}
.mn .col.bg4 { background: var(--color-secondary);}
.mn .col .en-tit { font-weight: 600; line-height: 1.5em; }
.mn .col .tit { font-size: var(--font-size30); line-height: 1.5em; font-weight: 600; margin: 14px 0 40px;}

/* 회사연혁 */
.hst .group { margin-bottom: 80px; display: flex; position: relative; }
.hst .group::after { content: ""; position: absolute; width: 1px; background: #ddd; bottom: 0; left: 319px; height: calc(100% - 64px); }
.hst .group:last-child { margin-bottom: 0; }
.hst .group .year { width: 320px; position: relative; font-size: var(--font-size36); font-weight: 600; line-height: 1.5em; color: #242424; }
.hst .group .year::after { content: ""; position: absolute; width: 31px; height: 31px; right: -15px; top: 10px; background: url(../images/sub/hst-dots.png) center no-repeat; background-size: contain;}
.hst .group .info { padding-left: 250px; flex: 1 1 auto; min-width: 0; width: 1%; }
.hst .group .info .col { margin-bottom: 30px; display: flex; }
.hst .group .info .col:last-child { margin-bottom: 0; }
.hst .group .info .year2 { width: 175px; font-size: var(--font-size30); line-height: 1.5em; color: #242424; font-weight: 600; position: relative; padding-left: 27px; }
.hst .group .info .year2::before { content: ""; position: absolute; left: 0; width: 7px; height: 7px; top: 19px; border-radius: 2px; background: var(--color-secondary);}
.hst .group .info ul { flex: 1 1 auto; min-width: 0; width: 1%; padding-top: 10px; }
.hst .group .info ul li { margin-bottom: 25px; display: flex; }
.hst .group .info ul li:last-child { margin-bottom: 0; }
.hst .group .info ul li .month { width: 60px; font-size: var(--font-size20); font-weight: 700; color: #bdbdbd; }
.hst .group .info ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; }

/* 사업분야 */
.bs .col { margin-bottom: 40px; padding: 40px; border-radius: 20px; background: #f6f6f6; }
.bs .col .sub-numtit { padding-bottom: 40px; border-bottom: 1px solid #ddd; }
.bs .col .fx { display: flex; align-items: center; }
.bs .col .fx .img { width: 420px; border-radius: 20px; overflow: hidden;}
.bs .col .fx .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 50px; }
.bs .col .fx .chk-txt p { margin-bottom: 24px; }

/* 주요 거래처 현황 */
.cl-list { display: flex; flex-wrap: wrap; gap: 40px 30px;}
.cl-list li { text-align: center; width: calc(100%/5 - 24px);}

/* 인증현황 */
.cert-list { display: flex; flex-wrap: wrap; gap: 75px 40px; }
.cert-list li { width: calc(100%/4 - 30px); text-align: center; }
.cert-list li .img { text-align: center; }
.cert-list li .tit {margin-top: 20px; line-height: 1.5em; color: #242424; font-weight: 500; }
.org { text-align: center; }

/* 오시는 길 */
.map { border-radius: 20px; overflow: hidden; }
.lct-top { padding: 60px 0; text-align: center; }
.lct-top .tit { display: flex; justify-content: center; align-items: center; margin-bottom: 16px; }
.lct-top .tit strong { font-size: var(--font-size22); font-weight: 600; line-height: 1.4em; padding-left: 8px; color: #242424; display: inline-block; }
.lct-top .info span { display: inline-block; padding-right: 20px; }
.lct-top .info span:last-child { padding-right: 0; }
.lct-btm { display: flex; justify-content: center; }
.lct-btm .item { padding: 23px 90px; display: flex; align-items: center; border-right: 1px solid #ddd;} 
.lct-btm .item:last-child { border: none; }
.lct-btm .item strong { display: inline-block; padding-left: 27px; font-weight: 400; color: #242424; line-height: 1.5em; }

/* 제품 리스트 */
.pd-tab { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 70px 0;}
.pd-tab.mg { margin-top: 0; }
.pd-tab li a { display: flex; align-items: center; justify-content: center; width: 200px; height: 60px; border-radius: 30px; border: 1px solid #ddd; color: #242424; font-weight: 500; line-height: 1.5em; }
.pd-tab li.active a,
.pd-tab li a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.product-list ul {display:flex; flex-wrap:wrap; margin:0 -20px;}
.product-list ul li {width:25%; padding:0 20px; margin-bottom:40px; text-align:center;}
.product-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.product-list ul li a {display:block;}
.product-list ul li .thumb {position:relative; padding-bottom:125%; margin-bottom:20px; overflow:hidden; }
.product-list ul li .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:cover;}
.product-list ul li .tit {color:#242424; line-height:1.4em; font-weight: 500; }

/* 제품상세 */
.pd-tit { font-size: var(--font-size40); line-height: 1.5em; font-weight: 600; color: #242424; margin-bottom: 70px; text-align: center; }
.product-summary {display:flex; margin-bottom: 80px; }
.product-summary.mg { margin-bottom: 0; }
.product-summary.top { margin-bottom: 200px; }
.product-image { width: 480px; margin-right: 60px; }
.product-image .img {position:relative; padding-bottom:125%; overflow:hidden;}
.product-image .img img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.pd-btm { margin-top: 40px; position: relative; display: flex; align-items: center; gap: 20px; }
.pd-swiper1 { flex: 1 1 auto; min-width:0; width:1%; }
.pd-prev::after, .pd-next::after { display: none; }
.pd-prev, .pd-next { width: 48px; height: 48px; background-repeat: no-repeat; background-position: center; background-size: contain; margin-top: 0; position: relative; top: auto;}
.pd-prev { background-image: url(../images/sub/pd-prev.png); left: auto; }
.pd-next { background-image: url(../images/sub/pd-next.png); right: auto; left: auto;}
.product-info { flex: 1 1 auto; min-width: 0; width: 1%; }
.product-info.fx { display: flex; flex-direction: column; justify-content: space-between;} 
.product-info .special { background: #d5e3ff; line-height: 1.3em; color: var(--color-primary); font-size: var(--font-size20); padding: 7px 16px; margin-bottom: 20px;  }
.product-group { margin-bottom: 20px; padding: 40px 60px; background: #f8f8f8; }
.product-group.fx { display: flex; gap: 60px; flex-wrap: wrap;}
.product-group.fx .col { width: calc(100%/2 - 30px); }
.product-group.mg { margin-bottom: 0; }
.product-group h5 { font-size: var(--font-size20); line-height: 1.4em; color: #242424; font-weight: 700; padding-bottom: 10px; }
.product-group ul { border-top: 1px solid #8F8F8F;}
.product-group ul li { border-bottom: 1px solid #ddd; font-size: var(--font-size18); padding: 12px 0; display: flex; }
.product-group ul li .tit { width: 115px; font-weight: 600; color: #242424; }
.product-group ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; }
.product-detail .group { margin-bottom: 60px; }
.product-detail .group:last-child { margin-bottom: 0; }
.product-detail .info { margin-top: 40px; }

/* sub3 공통 */
.sub3-img { text-align: center; margin-top: 40px; }
.sub3-tit { font-size: var(--font-size24); font-weight: 600; line-height: 1.5em; color: #242424; padding-bottom: 24px; }
.sub3-tit span { font-weight: 300; }
.sub3-tit.mg { padding-bottom: 0;}
.sub3-group { margin-bottom: 60px; }
.sub3-group.mg { margin-bottom: 0; }
.sub3-flex { display: flex; flex-wrap: wrap; gap: 40px; }
.sub3-flex .col { width: calc(100%/2 - 20px); padding: 40px; border: 1px solid #ddd; border-radius: 20px; }
.sub3-flex.w100 .col { width: 100%; }
.sub3-flex .col h5 { font-size: var(--font-size18); line-height: 1.5em; color: #242424; font-weight: 600; }
.sub3-flex .col h5.mg { margin-bottom: 20px; }
.sub3-flex .col h5 span { display: block; text-align: right; font-size: 15px; font-weight: 300; color: #454545; }
.sub3-flex.flex { gap: 20px; }
.sub3-flex.flex .col { width: auto; flex: 1;}
.sub3-flex.flex .col .sub3-tit { padding-bottom: 10px; }
.sub3-flex.gap {gap: 20px; }
.sub3-flex.wt { gap: 20px 39px; }
.sub3-flex.wt .col { width: calc(100%/3 - 39px); }
.sub3-flex.wt .col .sub3-tit { padding-bottom: 10px; }
.sub3-flex.wt2 { gap: 20px 21px; }
.sub3-flex.wt2 .col { width: calc(100%/3 - 14px); min-height: 130px; display: flex; align-items: center; justify-content: center;}

/* 방폭형 승강기 소개 */
.bm-img-flex { display: flex; gap: 40px; margin: 40px 0; flex-wrap: wrap;}
.bm-img-flex .col { width: calc(100%/2 - 20px); }
.bm-pc { display: flex; gap: 18px; align-items: center;}
.bm-flex { display: flex; align-items: flex-start; margin: 40px 0;}
.bm-flex.al { align-items: center;}
.bm-flex.mg { margin-bottom: 0; }
.bm-flex .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 40px;}
.bm-flex .img img { display: block; margin-bottom: 40px; }
.bm-flex .img img:last-child { margin-bottom: 0; }
.bm-last { display: flex; gap: 39px; flex-wrap: wrap;}
.bm-last .col { width: calc(100%/3 - 39px); }
.bm-last .col .img img { width: 100%; }
.bm-last .col .img { margin-bottom: 40px; }
.bm-last .col .sub3-tit { padding-bottom: 12px; }
.bm-last.wt { gap: 40px; }
.bm-last.wt .col { width: auto; }
.bm-last.wt2 .col { width: calc(100%/4 - 30px);}

/* 제어반 */
.ct-fx { display: flex; align-items: center; margin-bottom: 40px; }
.ct-fx .img { width: 46%; }
.ct-fx .info { width: 54%; padding-left: 95px; }

/* 수직반송기 */
.lift-fx { display: flex; }
.lift-fx .img { width: 23%; }
.lift-fx .info { width: 77%; padding-left: 40px; }
.lift-fx .info .noti { display: flex; align-items: center; padding: 20px; background: #d5e3ff; border-radius: 20px; margin-top: 40px; }
.lift-fx .info .noti p { font-weight: 600; flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 9px; }
.lift-tit { position: relative; font-size: var(--font-size24); font-weight: 600; line-height: 1.5em; color: #242424; margin-bottom: 40px; }
.lift-tit::before { content: ""; display: block; width: 16px; height: 4px; background: var(--color-primary); margin-bottom: 20px; }
.lift-txt p { position: relative; padding-left: 10px; margin-top: 10px; }
.lift-txt p::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 1px; background: #454545; }

/* sub4 공통 */
.sub4-fx { display: flex; align-items: center;}
.sub4-fx .img { width: 50%; border-radius: 80px 0; overflow: hidden;}
.sub4-fx .info { width: 50%; padding-left: 40px; }
.sub4-fx .info h4 { line-height: 1.5em; font-size: var(--font-size18); font-weight: 600; color: var(--color-primary);}
.sub4-fx .info h3 { font-size: var(--font-size36); line-height: 1.5em; font-weight: 600; color: #242424; margin: 16px 0 24px;}
.sub4-wrap { display: flex; flex-wrap: wrap; gap: 39px; justify-content: center;}
.sub4-wrap .col { width: calc(100%/3 - 26px); background: #fff; box-shadow: 6px 6px 30px 0 rgba(0, 0, 0, 0.16); border-radius: 20px; text-align: center; padding: 65px 10px; }
.sub4-wrap .col .icon { margin-bottom: 24px; }
.sub4-wrap .col .tit { font-size: var(--font-size24); line-height: 1.5em; font-weight: 700; color: #242424; margin-bottom: 24px;}
.sub4-wrap .col .txt { font-size: var(--font-size18); line-height: 1.5em; }
.sub4-wrap .col .step { color: var(--color-primary); margin-bottom: 8px; line-height: 1.5em; font-size: var(--font-size18); font-weight: 600; }
.sub4-wrap.wt { gap: 40px; justify-content: flex-start;}
.sub4-wrap.wt .col { width: calc(100%/2 - 20px); padding: 45px 10px;}
.sub4-wrap.wt .col .txt { font-size: 16px; }
.sub4-wrap.mg { margin-bottom: 40px; }

/* 유지보수의 필요성 */
.mt-icon-tc { text-align: center; margin-bottom: 65px; }

/* 유지보수 업무절차 */
.mt-pc-sec1 { padding-bottom: 40px; }
.mt-pc-wrap { display: flex; flex-wrap: wrap; gap: 30px; }
.mt-pc-wrap .col { width: calc(100%/3 - 20px); border-radius: 20px; border: 1px solid #ddd; text-align: center; padding: 25px 10px;}
.mt-pc-wrap .col .tit { margin-top: 20px; font-size: var(--font-size18); font-weight: 500; color: #242424; }
.mt-pc-sec2 { padding: 80px 0; background: #f8f8f8; }
.mt-pc-img { overflow: auto; }

/* 유지보수 검사 종류 및 법령 */
.mt-raw { display: flex; gap: 40px; flex-wrap: wrap;}
.mt-raw .col { width: calc(100%/4 - 30px); text-align: center; }
.mt-raw .col .circle { width: 220px; height: 220px; border-radius: 100%; display: flex; align-items: center; justify-content: center; border: 10px solid #96b9ff; position: relative; margin: 0 auto 65px;}
.mt-raw .col .circle::after { content: ""; position: absolute; z-index: -1; width: 1px; border-right: 1px dashed #ddd; height: 70px; bottom: -70px; left: 0; right: 0; margin: auto; }
.mt-raw .col .circle .tit { font-size: var(--font-size20); line-height: 1.5em; color: #242424; font-weight: 600; margin-bottom: 6px; }
.mt-raw .col .circle .txt { font-size: 15px; line-height: 1.5em; }
.mt-raw .col .box { padding: 40px 10px; border: 1px solid #ddd; border-radius: 20px; position: relative; }
.mt-raw .col .box::before { content: ""; position: absolute; left: 0; right: 0; margin: auto; width: 12px; height: 12px; top: -6px; border-radius: 6px; background: #fff; border: 3px solid var(--color-primary);}