@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-btn {display: inline-flex; align-items: center; justify-content: space-between; padding: 0 3rem; min-width: 22rem; height: 6rem; background-color: var(--main-color); border-radius: 3.25rem; font-size: 1.8rem; font-weight: 500; color: #fff; box-sizing: border-box;}
.cm-btn i {font-size: 1.8rem; color: #fff;}
.cm-btn.justify-center {justify-content: center;}

/* ******************  회사소개 :: CEO메세지 ********************** */
.ceo-tit-box {display: flex; justify-content: center; margin-bottom: 3.5rem;}
.ceo-tit {position: relative; display: inline-block; text-align: center; margin: 0 auto; font-size: 3.6rem; font-weight: 700; letter-spacing: -0.045em; line-height: 1.44; color: #000;}
.ceo-tit::before {position: absolute; content: ""; top: 0; left: -8rem; width: 5.3rem; height: 4.3rem; background: center / cover no-repeat url("/images/content/quotes01.png");}
.ceo-tit::after {position: absolute; content: ""; top: 0; right: -8.5rem; width: 5.3rem; height: 4.3rem; background: center / cover no-repeat url("/images/content/quotes02.png");}
.ceo-tit span {color: var(--main-color);}
.ceo-txt-box {padding: 5rem; margin-bottom: 4.5rem; background-color: #f2f2f2; border-radius: 2rem; box-sizing: border-box;}
.ceo-txt-box .ceo-txt {text-align: center; font-size: 2rem; font-weight: 500; letter-spacing: -0.04em; line-height: 1.7; color: rgba(0, 0, 0, 0.6);}

.sign-box {display: flex; align-items: center; justify-content: center;}
.sign-box .position {margin-right: 2.5rem; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.045em; line-height: 1.4; color: #000;}
.sign-box .sign img {max-width: 100%; max-height: 100%;}

/* ******************  회사소개 :: 연혁 ********************** */
.history-content {padding-bottom: 15rem;}
.history-top-txt {font-size: 2.5rem; font-weight: 500; letter-spacing: -0.02em; color: #333333; line-height: 1.68em; margin-bottom: 11.5rem; text-align: center;}
.history-banner {position: relative; max-width: 1600px; height: 50rem; margin: 0 auto; border-radius: 3rem; background: url('/images/content/history_banner.jpg')no-repeat center / cover;}
.history-banner .inner {display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-bottom: 6.5rem; box-sizing: border-box;}
.history-banner .banner-since {margin-bottom: 2.8rem; font-size: 7.5rem; font-weight: 700; line-height: 1.2; color: #fff;}
.history-banner .banner-txt {font-size: 1.8rem; font-weight: 700; line-height: 1.4; color: #fff;}

.history-tab-wrapper-style {position: relative; max-width: 920px; height: 7rem; margin: -18.2rem auto 0;}
.history-drop-open-btn-style {display: none;}
.history-tab-list-style {max-width: 920px;}
.history-tab-list-style ul {display: flex;/*  max-width: 112rem;  */margin: 0 auto; height: 7rem; padding: 1rem; border-radius: 5rem; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(25px); box-sizing: border-box;}
.history-tab-list-style ul li {position: relative; flex: 1; text-align: center; height: 100%;}
/* .history-tab-list-style ul li:before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5rem; border: 0.2rem solid #eb4d4d; background:#fff; opacity: 0; transition: all 0.3s; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} */
.history-tab-list-style ul li a {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; z-index: 1;}
/* .history-tab-list-style ul li.selected:before {opacity: 1;} */

.history-tab-list-style.top-fixed {position: fixed; top: 0; left: 50%; width: calc(100% - var(--area-padding) * 4); transform: translateX(-50%); z-index: 99; box-sizing: border-box;}

@media all and (min-width: 801px) {
	.history-tab-list-style ul {transition: var(--transition-custom);}
	.history-tab-list-style ul li {border-radius: 5rem;}
	.history-tab-list-style ul li a em {font-size: 1.6rem; font-weight: 700; color: #fff;}
	
	.history-tab-list-style ul li.selected {background-color: var(--main-color);}

	.history-tab-list-style.top-fixed ul {background-color: #f5f5f5; backdrop-filter: blur(0);}
	.history-tab-list-style.top-fixed ul li a em {color: #000;}
	.history-tab-list-style.top-fixed ul li.selected a em {color: #fff;}	
}

.history-con {position: relative; margin-top:7.3rem; padding-top: 17.5rem;}
.history-percent-bar {position: absolute;top: 4rem; left: calc(50% - 2rem); border-radius: 2px; margin-left: -0.2rem; width:0.2rem;height: calc(100% - 5rem); background: #efefef;}
.history-percent-bar::before {position: absolute; content: ""; left: calc(50% - 0.8rem); bottom: 0; width: 1.6rem; height: 1.6rem; border-radius: 100%; background-color: #e8e8e8;}
.history-percent-bar .percent-bar-child {position: absolute;content: ""; width: 100%;  height: 0; background-color: var(--main-color); z-index: 1; border-radius:2px 2px 0 0; /* transition: all 0.3s; */}
.percent-bar-child .point {position: relative; display: flex; align-items: center; justify-content: center;  position: absolute; bottom: -2rem; left: calc(50% - 2rem); content: ""; z-index: 10; width: 4rem; height: 4rem; border-radius: 4rem; background-color: var(--main-color); /* box-shadow: 0.5rem 0.5rem 2.5rem rgba(172,0,33,0.1); */}
.percent-bar-child .point i {font-size: 2rem; color: #fff;}
.percent-bar-child .point::before {position: absolute; content: ""; width: 5rem; height: 5rem; border-radius: 5rem; border: 1px solid var(--main-color); box-sizing: border-box;}
.history-year-group-box {position: relative; display: flex; padding-bottom: 12.5rem;}
.history-year-group-box:last-of-type { padding-bottom: 0;}
.history-year-group-box .history-year-img-box {position: relative; width: 41.305%; height: 0; padding-top: 23.189%; box-sizing: border-box; text-align: right; background-color: #f5f5f5; border-radius: 2rem; overflow: hidden;}
.history-year-group-box .history-year-img-box img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%;}
.history-year-group-box .history-year-group-tit {margin-bottom: 5rem; font-size: 6rem; font-weight: 700; color: #979797; line-height: 1.1; transition: all 0.3s;} 
.history-year-group-box.active .history-year-group-tit {color: var(--main-color);}
.history-year-group-box .history-year-list-box {width: 42.754%; margin-left: 15.942%; padding: 0; box-sizing: border-box;}
.history-year-group-box .history-year-item {display: flex; margin-bottom: 3.6rem;}
.history-year-group-box .history-year-item:last-of-type {margin-bottom: 0;}
.history-year-group-box .history-year-item .history-year {display: block; width: 8.2rem;}
.history-year-group-box .history-year-item .history-year strong {position: relative; padding-left: 1.7rem; font-size: 1.6rem; font-weight: 700; line-height: 1.4; color: #000;}
.history-year-group-box .history-year-item .history-year strong::before {position: absolute; top: 0.6rem; left: 0; content: ""; width: 0.6rem; height: 0.6rem; border-radius: 100%; background-color: #d9d9d9;}
.history-year-group-box .history-year-item .history-month-box {width: calc(100% - 8.2rem);}
.history-year-group-box .history-year-item .history-month-item {display: flex; margin-bottom: 1.2rem;}
.history-year-group-box .history-year-item .history-month-item:last-child {margin-bottom: 0;}
/* .history-year-group-box .history-year-item .history-month-item .history-month {width: 4rem; font-size: 1.8rem; line-height: 1.6em; font-weight: 600; letter-spacing: -0.02em; color: rgba(0,0,0,0.3); padding-right: 1rem; box-sizing: border-box;} */
.history-year-group-box .history-year-item .history-month-item .history-detail-txt-con {width: 100%;}
.history-year-group-box .history-year-item .history-month-item .history-detail-txt {font-size: 1.6rem; font-weight: 500;  line-height: 1.4em; color: rgba(0, 0, 0, 0.5);}

@media all and (min-width:801px){
	.history-year-group-box.reverse {flex-direction: row-reverse;}
	/* .history-year-group-box.reverse .history-year-group-tit-box {text-align: left;} */
	.history-year-group-box.reverse .history-year-group-tit {text-align: right;}
	.history-year-group-box.reverse .history-year-img-box {margin-right: 2rem;}
	.history-year-group-box.reverse .history-year-list-box {width: calc(42.754% - 2rem); margin-left: 0; margin-right: 15.942%;}
	.history-year-group-box.reverse .history-year-item {flex-direction: row-reverse;}
	.history-year-group-box.reverse .history-year-item .history-year {text-align: right;}
	.history-year-group-box.reverse .history-year-item .history-year strong {padding-left: 0; padding-right: 1.7rem;}
	.history-year-group-box.reverse .history-year-item .history-year strong::before {left: auto; right: 0;}
	.history-year-group-box.reverse .history-year-item .history-month-box {text-align: right;}
	.history-year-group-box.reverse .history-year-item .history-month-item {flex-direction: row-reverse;}
}

/* ******************  회사소개 :: 출장소 ********************** */
/* 컨텐츠 */
.office-content {padding: 6.5rem 0 12rem 0; background-color: #f2f2f2;}
.office-map-con{display: flex; align-items:center; justify-content: space-between; margin-bottom: 6rem;}
.office-map-con .left-box{width:36.36%;}
.office-map-con .right-box{width:46.21%;}
/* 좌측 타이틀 */

.office-tit-box .tit{font-size:6rem; letter-spacing:-0.045em; line-height: 1.33; font-weight:700; color:#000;}
.office-tit-box .tit b{color:var(--main-color); font-weight: 700;}
.office-tit-box .txt{font-size:2rem; font-weight: 600; line-height:1.4; letter-spacing:-0.045em; color:#000; margin-top:2rem;}
/* 좌측 검색영역 */
.office-search-box{margin-top:5rem;}
.office-search-box .search-box{position: relative; width: 41rem;; height:6rem; border-radius:3rem; background:#fff; margin-top:1.4rem;}
.office-search-box .search-box .office-input{width:90%; height:100%; background:#fff; border:none; outline:none; padding: 0 3rem; box-sizing:border-box; font-size:1.6rem; color:#000; font-weight:600; letter-spacing: -0.045em; border-radius: 3rem;}
.office-search-box .search-box .office-input::placeholder{color:#aaa;}
.office-search-box .search-box .office-search-btn{position: absolute; top:50%; right:2rem; display: flex; align-items:center; justify-content:center; color:#565656; font-size:2.4rem; transform: translateY(-50%);}
/* 좌측 검색영역 :: fakeform custom */
.office-search-box .select-box {display: block; width: 41rem;}
.office-search-box .select-box:first-of-type {position: relative; z-index: 13;}
.office-search-box .select-box:last-of-type {margin-top: 2rem;}
.office-search-box .select-option {border-radius: 0 0 3rem 3rem;}
.office-search-box .fakeform-selectbox .select-title:after {right: 2.2rem; font-size: 2.4rem; color: #565656;}
.office-search-box .fakeform-selectbox .select-title {position: relative; display: block; width: 100%; padding: 0 3rem; color: #3a3a3a; font-weight: 600; line-height: 6rem; cursor: pointer; transition: all 0.2s ease-in-out; font-size: 1.6rem; letter-spacing: -0.045em; text-indent: 0; background: #fff; border-radius: 3rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 12;}
.office-search-box .reset-btn {display: flex; align-items: center; justify-content: space-between; width: 22rem; height: 6rem; margin-top: 1.4rem; padding: 0 2.5rem 0 3rem; border-radius: 3rem; background-color: var(--main-color); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.045em; color: #fff; box-sizing: border-box;}
.office-search-box .reset-btn i {font-size: 2.4rem; color: #fff;}
.fakeform-selectbox .select-title strong {font-weight: 700;}

.office-search-box .fakeform-selectbox .select-title.active {border-radius:3rem 3rem 0 0;}
.select-option.office-select span {padding: 1rem 3rem;}

/* 우측 맵 영역 */
.office-map-box{width:100%; max-width:447px; margin: auto;}
.office-map-box svg{width:100%; height:auto;}

/* 하단 리스트영역 */
.office-list-box{margin-bottom: 3rem;}
.office-list-tbl{width:100%;}
.office-list-tbl thead tr th{background:#000; text-align:center; height:6.5rem; font-size:1.8rem; line-height:1.5; letter-spacing:-0.045em; color:#fff; font-weight:600;}
.office-list-tbl thead tr th:first-child{border-radius:3rem 0 0 3rem;}
.office-list-tbl thead tr th:last-child{border-radius:0 3rem 3rem 0;}
.office-list-tbl tbody tr{border-bottom:1px solid #d2d2d2;}
.office-list-tbl tbody tr td{height:8rem; text-align:center; padding: 1rem; box-sizing:border-box;}
.office-list-tbl tbody tr td .tbl-txt{font-size:1.6rem; font-weight: 500; line-height:1.4; letter-spacing:-0.045em; color:rgba(0, 0, 0, 0.6);}
.office-list-tbl tbody tr td .tbl-txt i {font-size: 2.4rem; color: #aaa;}
.office-list-tbl tbody tr td .tbl-txt.category{color:var(--main-color); font-size: 1.8rem; font-weight:700;}
.office-list-tbl tbody tr td .tbl-tit{display: block; font-size:2.2rem; line-height:1.5; letter-spacing:-0.045em; color:#000; font-weight:700; text-align:center;}

/* ******************  회사소개 :: 인증사항 ********************** */
.certification-content {padding-bottom: 3rem;}
.certification-content .bbs-list-con {padding-top: 1rem;}

@media all and (min-width: 801px) {
	.certification-content .bbs-top-list-box {margin-bottom: 30px;}
}

/* ******************  회사소개 :: 오시는 길 ********************** */
.location-content {position: relative;}
.location-map-con {position: relative; width: 100%; height: 0; padding-top: 75rem;}
.location-map-con iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 2rem;}

.location-info-con {position: absolute; top: 50%; right: 4rem; width: 57rem; padding: 4rem 4rem 5.5rem 4rem; background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 3.3rem 5.4rem 9.31rem rgba(0, 0, 0, 0.1); backdrop-filter: blur(1.49rem); border-radius: 2rem; box-sizing: border-box; transform: translateY(-50%);}
.location-info-con .location-info-img {margin-bottom: 3.3rem; border-radius: 2rem; overflow: hidden;}
.location-info-con .location-info-img img {max-width: 100%;}
.location-info-con .location-info-tit {display: flex; align-items: center; padding-bottom: 1.5rem; font-size: 3rem; font-weight: 700; line-height: 1.66; color: #000; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.location-info-con .location-info-tit .icon {display: flex; align-items: center; justify-content: center; margin-left: 1.7rem; min-width: 4rem; min-height: 4rem; border-radius: 50%; background-color: var(--main-color);}
.location-info-con .location-info-tit .icon i {font-size: 1.6rem; color: #fff;}

.location-info-list {padding-top: 2.7rem;}
.location-info-list .info-list-item {display: flex; margin-bottom: 1.35rem;}
.location-info-list .info-list-item:last-child {margin-bottom: 0;}
.location-info-list .info-list-item .info-list-tit {width: 9.5rem; margin-right: 2.3rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.6; color: #222;}
.location-info-list .info-list-item .info-list-tit i {margin-right: 0.7rem;}
.location-info-list .info-list-item .info-list-txt {display: inline-block; width: calc(100% - 11.8rem); font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.6; color: rgba(0, 0, 0, 0.5);}
.location-info-list .info-list-item .email-list {display: flex; flex-wrap: wrap; gap: 0 2.4rem; width: calc(100% - 11.8rem);}
.location-info-list .info-list-item .email-list .info-list-tit {margin-right: 0;}

/* ******************  회사소개 :: 고객사 ********************** */
.client-list-con {padding: 8.5rem 0 9.5rem 0;}
.client-list-con:nth-child(odd) {background-color: #f2f2f2;}
.client-list-con .client-list-con-tit {text-align: center; margin-bottom: 3.5rem; font-size: 4rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.4; color: #000;}
.client-list {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 4.5rem 2rem;}
.client-list .list-item .img-box {position: relative; width: 100%; height: 0; padding-top: 45.385%; margin-bottom: 2.2rem; background-color: #fff; border-radius: 1rem; border: 1px solid #ddd; box-sizing: border-box;}
.client-list .list-item .img-box img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%; box-sizing: border-box; padding: 2rem;}
.client-list .list-item .list-item-tit {text-align: center; font-size: 2rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.025em; color: rgba(0, 0, 0, 0.5);}

/* ******************  Medical :: 제품 리스트 ********************** */
/********** 탭 **********/
@media all and (min-width: 801px) {
	.column-tab-style01 {position: sticky; top: 50px; height: auto; margin-bottom: 0;}
	.column-tab-style01 .sub-tab-list-style ul {display: flex; flex-direction: column; padding: 2rem; border-radius: 3.5rem; background-color: #f2f2f2; box-sizing: border-box;}
	.column-tab-style01 .sub-tab-list-style ul li {display: block; width: auto; border: none; background-color: transparent; border-radius: 3.25rem; box-sizing: border-box;}
	.column-tab-style01 .sub-tab-list-style ul li a {height: 6rem;}
	.column-tab-style01 .sub-tab-list-style ul li a em {position: relative; padding: 0 2.5rem; text-align: left; font-size: 1.8rem; line-height: 1.4; font-weight: 700; letter-spacing: -0.025em; color: rgba(0, 0, 0, 0.5); word-break: break-word; box-sizing: border-box; transition: color 0.3s;}
	.column-tab-style01 .sub-tab-list-style ul li a em::before {position: absolute; top: 50%; right: 2.5rem; font-family: "xeicon"; content: "\e93f"; font-size: 1.8rem; font-weight: 400; color: #fff; transform: translateY(-50%); opacity: 0;}
	
	.column-tab-style01 .sub-tab-list-style ul li.selected {background-color: var(--main-color);}
	.column-tab-style01 .sub-tab-list-style ul li.selected a em {color: #fff;}
	.column-tab-style01 .sub-tab-list-style ul li.selected a em::before {opacity: 1;}
	
	.column-tab-style02 {position: sticky; top: 50px; height: auto; margin-bottom: 0; z-index: 100;}
	.column-tab-style02 .sub-tab-list-style::before {display: none;}
	.column-tab-style02 .sub-tab-list-style ul {display: flex; flex-direction: column; gap: 1rem 0; box-sizing: border-box;}
	.column-tab-style02 .sub-tab-list-style ul li {display: block; width: auto; border: none; background-color: #f2f2f2; border-radius: 3.25rem; box-sizing: border-box; transition: background-color 0.3s, color 0.3s;}
	.column-tab-style02 .sub-tab-list-style ul li a {height: 5rem;}
	.column-tab-style02 .sub-tab-list-style ul li a em {position: relative; padding: 0 1.5rem; text-align: left; font-size: 1.6rem; line-height: 1.4; font-weight: 700; color: rgba(0, 0, 0, 0.5); text-align: center; word-break: break-word; box-sizing: border-box;}
	/* .column-tab-style02 .sub-tab-list-style ul li a em::before {position: absolute; top: 50%; right: 2.5rem; font-family: "xeicon"; content: "\e93f"; font-size: 1.8rem; font-weight: 400; color: #fff; transform: translateY(-50%); opacity: 0;} */
	.column-tab-style02 .sub-tab-list-style.top-fixed {position: static;}
	
	.column-tab-style02 .sub-tab-list-style ul li.selected {background-color: var(--main-color);}
	.column-tab-style02 .sub-tab-list-style ul li.selected a em {color: #fff;}
	.column-tab-style02 .sub-tab-list-style ul li.selected a em::before {opacity: 1;}
}

.proruct-list-content {position: relative; display: flex; padding-bottom: 6rem;}
.proruct-list-content .bbs-top-list-box {margin-bottom: 25px;}
.product-tab-wrap {width: 18.841%;}
.product-list-wrap {width: calc(81.16% - 6rem); margin-left: 6rem;}

.product-list {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem; margin-bottom: 4rem;}
.product-list .list-item a {display: block; min-height: 46rem; padding: 3.4rem 4rem; border-radius: 2rem; box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.1); box-sizing: border-box; border: 2px solid transparent; transition: var(--transition-custom);}
.product-list .list-item .img-box {position: relative; width: 100%; height: 0; padding-top: 76.924%; margin-bottom: 2.6rem;}
.product-list .list-item .img-box img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%;}
.product-list .list-item .list-item-category {display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-word; margin-bottom: 2.6rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.4; color: var(--main-color);}
.product-list .list-item .list-item-option {position: absolute; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-word; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.5; color: rgba(0, 0, 0, 0.5);}
.product-list .list-item .list-item-tit {display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-word; padding-top: 2.4rem; margin-bottom: 1.6rem; font-size: 3.4rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.5; color: #000;}
.product-list .list-item i {font-size: 2.4rem; color: rgba(0, 0, 0, 0.2); transition: var(--transition-custom);}

@media all and (min-width: 801px) {
	.product-list .list-item a:hover {border-color: var(--main-color);}
	.product-list .list-item a:hover i {color: #000;}
}

/* ******************  Medical :: 제품 뷰 ********************** */
.medical-page {width: 100%;}
.product-view-cm-tit {margin-bottom: 4.5rem; font-size: 6rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.16; color: #000;}
.proruct-view-content {position: relative; display: flex; width: 100%;}
.proruct-view-content .area-sub {margin: 0;}
.proruct-view-content .product-tab-wrap {position: absolute; left: 2.91%; width: 15rem; height: 100%;  z-index: 99;}
.proruct-view-content .product-view-wrap {width: 100%;}

.proruct-view-content .sub-tab-con {width: 100%; padding-left: 26.5rem; box-sizing: border-box;}

.product-path-box {display: flex; align-items: center; justify-content: space-between;}
.product-path-box .product-tit {position: relative; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.4; color: var(--main-color);}
.product-path-box .product-tit::before {position: absolute; bottom: -2px; left: 0; content: ""; width: 100%; height: 3px; background-color: var(--main-color);}

.product-path-list {display: flex; flex-wrap: wrap; gap: 3rem;}
.product-path-list .path-list-item {position: relative; font-size: 1.4rem; font-weight: 500; color: rgba(0, 0, 0, 0.5);}
.product-path-list .path-list-item::before {position: absolute; top: 50%; right: -2.3rem; font-family: "xeicon"; content: "\e93f"; font-size: 1.6rem; color: rgba(0, 0, 0, 0.2); transform: translateY(-50%);}
.product-path-list .path-list-item:first-child {margin-top: -0.2rem; font-size: 1.6rem;}
.product-path-list .path-list-item:last-child::before {display: none;}

.product-view-slide-con {margin-bottom: 15rem;}
.product-slide-area {position: relative; margin-top: 4.7rem;}
.product-slide-area .slide-inner {position: relative; margin-top: -17.7rem;}
.product-slide-area .big-slide-list-wrap {padding-top: 1.5rem;}
.product-slide-area .big-slide-list .big-slide-item {position: relative;}
.product-slide-area .slide-txt-box {position: relative; z-index: 2; width: 30%; min-height: 23.3rem;}
.product-slide-area .slide-item-category {margin-bottom: 0.4rem; font-size: 2.4rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.4; color: rgba(0, 0, 0, 0.5);}
.product-slide-area .slide-item-tit {margin-bottom: 2.2rem; font-size: 7rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; color: #000;}
.product-slide-area .slide-item-txt {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.75; color: rgba(0, 0, 0, 0.5);}
.product-slide-area .big-slide-list .big-slide-item .img-box {position: relative; width: 100%; height: 0; padding-top: 33.551%; display: flex; align-items: center; justify-content: center; /* margin-top: 6rem; */}
.product-slide-area .big-slide-list .big-slide-item .img-box img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%;}

.product-slide-area .small-slide-list-wrap {position: absolute; top: 0; right: 0; /* top: calc(50% - 2.5rem); */ /* transform: translateY(-50%); */}
.product-slide-area .small-slide-list {gap: 1rem 0;}
.product-slide-area .small-slide-list .small-slide-item {position: relative; width: 9rem; height: 0 !important; padding-top: 100%;}
.product-slide-area .small-slide-list .small-slide-item::before {position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; border-radius: 1rem; border: 2px solid var(--main-color); box-sizing: border-box; opacity: 0; z-index: 1; transition: var(--transition-custom);}
.product-slide-area .small-slide-list .small-slide-item .img-box {position: absolute; top: 0; left: 0; width: 100%; height: 0; padding-top: 100%; border-radius: 1rem;  background-color: #f5f5f5;}
.product-slide-area .small-slide-list .small-slide-item img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%; mix-blend-mode: multiply; padding: 1rem; box-sizing: border-box;}

.product-slide-area .small-slide-list .small-slide-item.swiper-slide-thumb-active::before {opacity: 1;}

.slide-control-box {margin-top: 8rem;}
.slide-control-box .arrow-box {display: flex; align-items: center; justify-content: space-between; padding-top: 2.5rem;}
.slide-control-box .arrow-box .arrow {display: flex; gap: 0 1rem;}
.slide-control-box .arrow-box .product-list-btn i {font-size: 2.4rem; font-weight: 400; color: #000; transition: var(--transition-custom);}
.slide-control-box .arrow-box .product-list-btn.swiper-button-disabled i {color: rgba(0, 0, 0, 0.2);}
.swiper-pagination {width: 100%; height: 2px; background-color: rgba(0, 0, 0, 0.1) !important;}
.swiper-pagination-progressbar-fill {height: 100%; background-color: #000 !important;}
.product-slide-name {font-size: 1.8rem; font-weight: 700; letter-spacing: -0.025em; color: #000;}

.product-highlights-con {position: relative; width: 100%; min-height: 100vh !important; padding-top: 19.5rem; margin-bottom: 14rem; background: center / cover no-repeat url("/images/content/product_highlight_bg.jpg"); box-sizing: border-box;}
.product-highlights-con .highlights-wrap {position: relative; display: flex; height: 100%;/* max-height: 100vh; */}
/*.product-highlights-con .highlights-wrap::before {position: absolute; content: ""; bottom: 19.5rem; right: 0; width: 57.972%; height: 20rem; background-color: #fff; opacity: 0.2}
.product-highlights-con .highlights-wrap::after {position: absolute; content: ""; bottom: 39.5rem; right: 0; width: 57.972%; height: 12rem; background-color: #fff; opacity: 0.6} */
.product-highlights-con .product-view-cm-tit {width: 42.029%;}
.product-highlights-con .highlights-list {position: absolute; right: 0; display: flex; flex-direction: column; gap: 1rem 0; width: 57.972%;}
.product-highlights-con .highlights-list .list-item {position: relative; padding: 3rem 3rem 2rem 3rem; border-radius: 1rem; background-color: rgba(255, 255, 255, 0.1); transition: opacity 0.3s; backdrop-filter: blur(30px);}
/* .product-highlights-con .highlights-list .list-item:nth-child(3) {opacity: 0.6;}
.product-highlights-con .highlights-list .list-item:nth-child(n + 4) {opacity: 0.2;} */
.product-highlights-con .highlights-list .list-item-tit {margin-bottom: 1rem; font-size: 2rem; font-weight: 600; line-height: 1.4; color: #fff;}
.product-highlights-con .highlights-list .list-item-tit span {display: inline-flex; align-items: center; justify-content: center; width: 5.6rem; height: 3rem; margin-right: 1rem; border: 2px solid #fff; box-sizing: border-box; border-radius: 1.5rem;}
.product-highlights-con .highlights-list .list-item-txt {font-size: 1.6rem; font-weight: 600; line-height: 1.75; color: rgba(255, 255, 255, 0.8);}
.product-highlights-con .scroll-down {position: relative; writing-mode: vertical-rl; margin-top: 7rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.4; color: #fff;}
.product-highlights-con .scroll-down .scroll {position: absolute; bottom: -11rem; left: 50%; width: 0.2rem; height: 10rem; overflow: hidden; background-color: rgba(255, 255, 255, 0.1); transform: translateX(-50%);}
.product-highlights-con .scroll-down .scroll::before {position: absolute; top: 0; left: 0; content: ""; width: 100%; background-color: #fff; animation: scroll-animation 2s infinite cubic-bezier(0.5, -0.17, 0.46, 1.21);}
.product-highlights-con .product-view-cm-tit {color: #fff;}

@keyframes scroll-animation {
	0% {
		height: 0;
		transform: translateY(0);
	} 100% {
		height: 100%;
		transform: translateY(100%);
	}
}

.product-spec-con {margin-bottom: 15rem;}
.product-view-spec-table {width: 100%; border-top: 1px solid #000;}
.product-view-spec-table td {padding: 1.4rem 2rem; font-size: 1.6rem; line-height: 1.625; font-weight: 500; color: rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(34, 34, 34, 0.1); border-right: 1px solid rgba(34, 34, 34, 0.1);}
.product-view-spec-table th {padding: 0 1.5rem; background-color: #f2f2f2; text-align: center; font-size: 1.6rem; line-height: 1.625; font-weight: 700; color: #000; border-bottom: 1px solid rgba(34, 34, 34, 0.1); border-right: 1px solid rgba(34, 34, 34, 0.1);}
.product-view-spec-table td:last-child {border-right: none;}

.product-down-con {padding: 15rem 0; background-color: #f2f2f2; box-sizing: border-box;}
.product-view-down-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
.product-view-down-list .down-list-item {position: relative; display: flex; align-items: center; justify-content: space-between; padding: 2rem 3rem 2rem 4rem; background-color: #fff; border-radius: 1rem; transition: var(--transition-custom);}
.product-view-down-list .down-list-item::before {position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; border-radius: 1rem; border: 2px solid var(--main-color); box-sizing: border-box; opacity: 0; transition: var(--transition-custom); pointer-events: none;}
.product-view-down-list .down-list-item .down-btn {display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; border-radius: 100%; background-color: #f2f2f2; transition: var(--transition-custom);}
.product-view-down-list .down-list-item .down-btn i {font-size: 2.4rem; color: #000; transition: var(--transition-custom);}
.product-view-down-list .down-list-item .down-tit {width: calc(100% - 8rem); margin-right: 2rem; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.025em; color: #000;}

.product-view-down-list .down-list-item:hover::before {opacity: 1;}
.product-view-down-list .down-list-item:hover .down-btn {background-color: var(--main-color);}
.product-view-down-list .down-list-item:hover .down-btn i {color: #fff;}

/* ******************  인재채용 ********************** */
.recruit-content {padding-bottom: 3rem;}

/********** 채용절차 **********/
.recruit-step-list-con {display: flex; align-items: center; justify-content: space-between; /* gap: 0 16%; */ max-width: 120rem; margin: 0 auto 14.5rem;}
.recruit-step-list-con .recruit-type {position: relative; width: 20.834%; height: 0; padding-top: 20.834%; background-color: rgba(205, 23, 25, 0.3); border-radius: 100%;}
.recruit-step-list-con .recruit-type .inner {position: absolute; content: ""; top: 50%; left: 50%; width: 84%; height: 84%; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 700; line-height: 1.2; color: #fff; background-color: var(--main-color); border-radius: 100%; transform: translate(-50%, -50%);}
.recruit-step-list-con .recruit-type .inner::before {position: absolute; right: -24rem; top: calc(50% - 1px); content: ""; width: 24rem; height: 1px; background-color: var(--main-color); z-index: -1;}

.recruit-step-list {display: flex; justify-content: flex-end; width: 79.167%;}
.recruit-step-list .step-list-item {position: relative; width: 22.106%; height: 0; padding-top: 22.106%; margin-right: -2.9%;}
.recruit-step-list .step-list-item:first-child {z-index: 5;}
.recruit-step-list .step-list-item:nth-child(2) {z-index: 4;}
.recruit-step-list .step-list-item:nth-child(3) {z-index: 3;}
.recruit-step-list .step-list-item:nth-child(4) {z-index: 2;}
.recruit-step-list .step-list-item:last-child {z-index: 1; margin-right: 0;}
.recruit-step-list .step-list-item .inner {position: absolute; content: ""; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; border: 2px solid var(--main-color); border-radius: 100%; background-color: #fff; box-sizing: border-box;}
.recruit-step-list .step-list-item .inner::before {position: absolute; content: ""; top: 50%; right: 2rem; width: 0.6rem; height: 0.7rem; background: center / cover no-repeat url("/images/content/recruit_step_list_arrow.png"); transform: translateY(calc(-50% - 0.5px))}
.recruit-step-list .step-list-item:last-child .inner::before {display: none;}
.recruit-step-list .step-list-item .recruit-step-num {margin-bottom: 1.8rem; font-size: 1.4rem; font-weight: 500; color: var(--main-color);}
.recruit-step-list .step-list-item .icon-box {display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; width: 3.3rem; height: 3.3rem;}
.recruit-step-list .step-list-item .icon-box img {max-width: 100%; max-height: 100%;}
.recruit-step-list .step-list-item .recruit-step-tit {font-size: 1.5rem; font-weight: 700; color: #222;}

/********** 채용공지 **********/
.recruit-content .board-search-box .search-word {width: calc(100% - 50px);}
.recruit-content .bbs-top-list-box .board-search-inner {padding: 0 10px 0 20px;}

.recruit-notice-list-wrap {margin-bottom: 4rem; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid #656565;}
.recruit-notice-list {display: flex; flex-direction: column; gap: 1.6rem 0; padding: 5rem 0;}
.recruit-notice-list .notice-list-item {display: flex; align-items: center; justify-content: space-between; padding: 5.3rem 6rem 5rem 6rem; border-radius: 3rem; border: 1px solid #202020; box-sizing: border-box; transition: var(--transition-custom);}
.recruit-notice-list .notice-list-item .info-area {width: 75%;}
.recruit-notice-list .notice-list-item .recruit-state {display: inline-flex; align-items: center; justify-content: center; margin-bottom: 2rem; min-width: 6rem; height: 2.5rem; padding: 0 1.13rem; font-size: 1.4rem; font-weight: 600; color: #2d2d2d; border: 1px solid #2d2d2d; border-radius: 5rem; box-sizing: border-box; transition: var(--transition-custom);}
.recruit-notice-list .notice-list-item .recruit-notice-tit {margin-bottom: 5.7rem; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; font-size: 2.4rem; font-weight: 700; color: #000; transition: var(--transition-custom);}
.recruit-notice-list .notice-list-item .recruit-notice-date {font-size: 1.6rem; font-weight: 500; color: rgba(0, 0, 0, 0.5); transition: var(--transition-custom);}
.recruit-notice-list .notice-list-item .btn-area {display: flex; flex-direction: column; gap: 0.8rem 0;}
.recruit-notice-list .notice-list-item .recruit-notice-btn {display: flex; align-items: center; justify-content: space-between; width: 22rem; height: 4.6rem; padding: 0 2rem; border: 2px solid #202020; box-sizing: border-box; border-radius: 5rem; font-size: 1.4rem; font-weight: 600; color: #000; transition: var(--transition-custom);}
.recruit-notice-list .notice-list-item .recruit-notice-btn i {font-size: 1.6rem; font-weight: 500; color: #202020; transition: var(--transition-custom);}
.recruit-notice-list .notice-list-item .recruit-notice-btn i.xi-arrow-up {transform: rotateZ(45deg);}

.recruit-notice-list .notice-list-item.finish {background-color: #f2f2f2; border-color: #f2f2f2; pointer-events: none;}
.recruit-notice-list .notice-list-item.finish .recruit-state {color: #a6a6a6; border-color: #a6a6a6;}
.recruit-notice-list .notice-list-item.finish .recruit-notice-tit {color: #9f9f9f;}
.recruit-notice-list .notice-list-item.finish .recruit-notice-date {color: rgba(0, 0, 0, 0.2);}
.recruit-notice-list .notice-list-item.finish .recruit-notice-btn {border-color: #9f9f9f; color: #9f9f9f;}
.recruit-notice-list .notice-list-item.finish .recruit-notice-btn i {color: #9f9f9f;}

@media all and (min-width: 801px) {
	.recruit-notice-list .notice-list-item:hover {background-color: var(--main-color); border-color: var(--main-color);}
	.recruit-notice-list .notice-list-item:hover .recruit-notice-date {color: rgba(255, 255, 255, 0.5);}
	.recruit-notice-list .notice-list-item:hover .recruit-state,
	.recruit-notice-list .notice-list-item:hover .recruit-notice-btn {color: #fff; border-color: #fff;}
	.recruit-notice-list .notice-list-item:hover .recruit-notice-tit,
	.recruit-notice-list .notice-list-item:hover .recruit-notice-btn i {color: #fff;}
	
	.recruit-notice-list .notice-list-item .recruit-notice-btn:hover {border-color: #fff; background-color: #fff; color: var(--main-color);}
	.recruit-notice-list .notice-list-item .recruit-notice-btn:hover i {color: var(--main-color);}
}

/* ******************  고객지원 :: 고객문의 ********************** */
/***** 문의 리스트 *****/
.inquiry-list-content {padding-bottom: 1rem;}
.inquiry-list-content .cm-btn-box {display: flex; align-items: center; justify-content: center; margin-top: 4.5rem;}
.inquiry-category {display: flex; align-items: center; justify-content: center; min-width: 14rem; height: 3rem; border-radius: 3.25rem; background-color: var(--main-color); font-size: 1.4rem; font-weight: 700; line-height: 1.57; color: #fff;}

/***** 문의 폼 *****/
.inquiry-form-content {display: flex;}
.inquiry-form-content .fakeform-selectbox {width: 100%;}
.inquiry-form-content .fakeform-selectbox .select-title:after {right: 2rem; font-size: 1.4rem; color: rgba(0, 0, 0, 0.5);}
.inquiry-form-content .fakeform-selectbox .select-title {line-height: 4rem; font-size: 1.4rem;}
.inquiry-form-content .fakeform-selectbox .select-title.active {border-radius: 2rem 2rem 0 0;}

.inquiry-left-txt-area {width: 46.45%; margin-right: 5%;}
.inquiry-left-txt-area > #contentInfoCon {text-align: left;}
.inquiry-form-left-txt {margin-top: 2rem; font-size: 1.8rem; font-weight: 600; letter-spacing: -0.045em; line-height: 1.66; color: #595959;}

.inquiry-form-content .sub-tab-list-style ul li {border: none;}
/* .inquiry-form-content .sub-tab-list-style ul li:first-child {border-left: none;} */
.inquiry-form-content .sub-tab-list-style:before {display: none;}

.inquiry-form-content .cm-btn-box {display: flex; justify-content: center;}
.inquiry-form-content .cm-btn-box .cm-btn {justify-content: center; width: 30rem; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.045em;}

/* ******************  고객지원 :: 자료실 ********************** */
.data-content {padding-bottom: 3rem;}
.data-content .main-notice-list li:hover .title {color: var(--main-color);}
.data-content .main-notice-list li .tit-box {width: 80%;}

/* ******************  공지사항 :: 공지사항 ********************** */
.notice-page {padding-bottom: 3rem;}
/* .notice-content {padding-bottom: 15rem;} */
.notice-content .bbs-list-style08 .bbs-item .tit-box {width: 80%;}
.notice-content .bbs-list-style08 .bbs-item .bbs-list-date {width: 10.7rem;}
.notice-content .bbs-list-style08 .bbs-item .bbs-list-info-con {width: 70%;}

/* ******************  공지사항 :: 중고의료기기판매 ********************** */
.sales-list-wrap {margin-bottom: 5rem;}
.sales-list {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 3rem;}
.sales-list .list-item a {display: block; padding: 3.75rem 4rem 4.2rem 4rem; background-color: #f2f2f2; border-radius: 1.5rem; box-sizing: border-box; transition: var(--transition-custom);}
.sales-list .list-item .img-box {position: relative; width: 100%; height: 0; padding-top: 66.112%; margin-bottom: 3.7rem;}
.sales-list .list-item .img-box img {position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 100%; border-radius: 1.5rem; object-fit: cover;}
.sales-list .list-item .sales-list-tit {margin-bottom: 1.2rem; font-size: 2.2rem; font-weight: 700; line-height: 1.4; color: #000; transition: var(--transition-custom); display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-word; text-overflow: ellipsis;}
.sales-list .list-item .sales-list-txt {min-height: 10.5rem; margin-bottom: 3rem; font-size: 1.5rem; font-weight: 500; line-height: 1.4; color: rgba(0, 0, 0, 0.5); transition: var(--transition-custom); display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5; -webkit-box-orient: vertical; word-break: break-word; text-overflow: ellipsis;}
.sales-list .list-item .sales-list-date {display: flex; align-items: center; justify-content: space-between; font-size: 1.4rem; font-weight: 500; line-height: 1.4; color: rgba(0, 0, 0, 0.5); transition: var(--transition-custom);}
.sales-list .list-item .sales-list-date i {font-size: 2rem; transition: var(--transition-custom);}

@media all and (min-width: 801px) {
	.sales-list .list-item a:hover {background-color: var(--main-color);}
	.sales-list .list-item a:hover .sales-list-tit {color: #fff;}
	.sales-list .list-item a:hover .sales-list-txt,
	.sales-list .list-item a:hover .sales-list-date {color: rgba(255, 255, 255, 0.5);}
	.sales-list .list-item a:hover .sales-list-date i {color: #fff;}
}