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


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1280px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.custom-scrollbar-wrapper{position:relative;/* margin-right:calc(-1* var(--area-padding)); */ cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.cm-scroll-drag-guide {display:flex; justify-content:flex-end; /* margin-right:var(--area-padding); */ }
	.cm-scroll-drag-guide .cm-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.cm-scroll-drag-guide .cm-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:#ccc; content:""; border-radius:5px;}
	.cm-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:moveScrollAni 3s both infinite; }
	.cm-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color: rgba(0, 0, 0, 0.7); border-radius:5px; opacity:1; }
	.cm-scroll-drag-guide .drag-tail .hand-icon{ font-size:30px; color:#aaa }
	@keyframes moveScrollAni {
		0%, 10% {
			left: 0;
			margin-left: 0px;
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1280px){
	.sub-tab-list-style .area{padding:0}
	/* Tab Fixed Move*/
	.sub-tab-list-style.top-fixed{top:80px;}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style,
	.sub-tab-list-style.top-fixed,
	.sub-tab-list-style ul li a{height:40px; }
	.sub-tab-list-style ul li a em{font-size:13px}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 15px; height:40px; line-height:40px; font-size:15px; background-color:var(--main-color); box-sizing:border-box;}
	.sub-drop-open-btn-style span{color:#fff; }
	.sub-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:15px; margin-top:-7px}
	.sub-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color:#fff; border:1px solid #ddd; border-top:0; z-index:11; box-sizing:border-box;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:1px solid #eee; width:auto; background-color:transparent}
	.sub-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:10px 15px; border:0;}
	.sub-drop-menu-style ul li a em{font-size:13px;}
	.sub-drop-menu-style ul li.selected{background-color:transparent; border-color: #eee;}
	.sub-drop-menu-style ul li.selected a em{color:var(--main-color); font-weight:600; }
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:60px;}
}

/* ******************  공통 버튼 ********************** */
@media all and (max-width: 800px ) {
	.cm-btn {min-width: 20rem; height: 5rem; padding: 0 1.5rem 0 2rem;}
}

/* ******************  회사소개 :: CEO메세지 ********************** */
@media all and (max-width: 800px) {
	.ceo-tit {font-size: 2.8rem;}
	.ceo-txt-box {padding: 3rem;}
	.sign-box .sign {height: 4rem;}
}

/* ******************  회사소개 :: 연혁 ********************** */
@media all and (max-width: 1660px) {
	.history-banner {width: calc(100% - var(--area-padding) * 2);}
}

@media all and (max-width: 1580px) {
	.history-content > .area-sub {padding: 0 calc(var(--area-padding) * 2);}   
}

/* @media all and (max-width: 1500px) {
	.history-tab-list-style {max-width: none;}
	.history-tab-list-style.top-fixed {padding: 0 calc(var(--area-padding) * 2);}
} */

@media all and (max-width: 1280px) {
	.history-tab-list-style.top-fixed {top: calc(var(--header-height) + var(--header-top) + 30px);}
}

@media all and (max-width: 800px) {
	.history-top-txt {margin-bottom: 7.5rem;}
	.history-banner {height: 38rem;}
	.history-banner .banner-since {margin-bottom: 1.5rem; font-size: 5.6rem;}
	.history-banner .inner span {width: 20.9rem;  height: 20.9rem;top: 4rem; right: 2.3rem;}
	
	.history-drop-open-btn-style {display:block; position:relative; padding:0 1.5rem; width: 100%; height:4rem; line-height:4rem; font-size:1.5rem; background-color:var(--main-color); box-sizing:border-box; border-radius: 2rem;}
	.history-drop-open-btn-style span{color:#fff; }
	.history-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:1.5rem; margin-top:-0.7rem}
	.history-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.history-tab-wrapper-style {margin: -9.2rem auto 0;}
	.history-tab-wrapper-style {height: 4rem;}
	.history-tab-list-style ul {max-width: none; border-radius: 0; padding: 0;}
	.history-tab-list-style ul li:before {display: none;}
	.history-tab-list-style ul li {height: auto; text-align: left;}
	.history-tab-list-style ul li a {line-height: 1.3;}
	.history-con {margin-top: 2rem; padding-top: 6rem;}
	.history-percent-bar {top: 7rem; left: 0.5rem; }
	.history-year-group-box { flex-wrap: wrap; padding: 1rem 0 6rem 6rem;}
	.history-year-group-box .history-year-group-tit-box {text-align: left; width: 100%; padding-right: 0;}
	.history-year-group-box .history-year-group-tit {margin-bottom: 3rem;font-size: 5rem;}
	.history-year-group-box .history-year-list-box {width: 100%; margin: 0 !important;}
	.history-year-group-box .history-year-item {margin-bottom: 2rem;}
	.history-year-group-box .history-year-item .history-year {width: 9rem;}
	.history-year-group-box .history-year-item .history-month-box {width: calc(100% - 9rem);}
	
	.history-year-group-box .history-year-img-box {width: 100%; padding-top: 51.2%; margin-bottom: 3rem;}
}

@media all and (max-width: 640px) {
	.history-banner .inner span {  width: 16.9rem; height: 16.9rem; top: 4rem; right: 0.3rem;}
	.history-year-group-box .history-year-item {flex-wrap: wrap; margin-bottom: 4rem;}
	.history-year-group-box .history-year-item .history-year {width: 100%; margin-bottom: 1rem;}
	.history-year-group-box .history-year-item .history-month-box {width: 100%;}
}

@media all and (max-width: 480px) {
	.history-banner .inner span {width: 13.9rem; height: 13.9rem; top: 2.5rem;}
	
	.history-tab-wrapper-style {margin-top: -12.2rem;}
}

/* ******************  회사소개 :: 출장소 ********************** */
@media all and (max-width:800px){
	/* 컨텐츠 */
	.office-content {padding: 6rem 0;}
	.office-map-con{display: block;}
	.office-map-con .left-box{width:100%; margin-bottom:5rem;}
	.office-map-con .right-box{width:100%;}
	/* 좌측 타이틀 */
	.office-tit-box .tit{font-size:3.6rem;}
	.office-tit-box .txt{font-size:1.8rem; margin-top:1.5rem;}
	/* 좌측 검색영역 */
	.office-search-box{margin-top:3rem;}
	.office-search-box .search-box{height:4.5rem; margin-top:1rem;}
	.office-search-box .search-box .office-input{padding-inline:2rem 5rem; font-size:1.4rem;}
	.office-search-box .search-box .office-search-btn{right: 1.5rem; font-size:1.6rem;}
	/* 좌측 검색영역 :: fakeform custom */
	.office-search-box .fakeform-selectbox .select-title {padding: 0 2rem; line-height:4.5rem; font-size:1.4rem;}
	.office-search-box .fakeform-selectbox .select-title:after {right: 1.5rem; font-size: 2rem;}
	.office-search-box .select-box:last-of-type {margin-top: 1rem;}
	.office-search-box .select-option span, .office-search-box .select-option strong {padding: 1.2rem 2rem;}
	.office-search-box .reset-btn {width: 18rem; height: 4.5rem; padding: 0 2rem;}
	.office-search-box .reset-btn i {font-size: 1.8rem;}
	
	/* 하단 리스트영역 */
	.office-list-tbl,
	.office-list-tbl colgroup,
	.office-list-tbl tbody,
	.office-list-tbl tbody tr,
	.office-list-tbl tbody td{display: block;}
	.office-list-tbl thead{display: none;}
	
	.office-list-tbl{border-top:2px solid #000;}
	.office-list-tbl tbody tr{padding:1rem 0; border-color:rgba(0,0,0,0.3);}
	.office-list-tbl tbody tr td{position: relative; /* height: 2.7rem; */ height:auto; text-align:left; padding-block:0; padding-left:11rem; /* padding-left:6rem; */ box-sizing:border-box; margin:0.5rem 0;}
	.office-list-tbl tbody tr td:before{position: absolute; content:attr(data-label); top:0; left:0; font-size:1.6rem; line-height:1.625; letter-spacing:-0.01em; color:rgba(0,0,0,0.7); font-weight:500;}
	.office-list-tbl tbody tr td:has(.tbl-tit):before{top:3px;}
	.office-list-tbl tbody tr td:has(.bbs-no-list){height:auto; padding:0;}
	.office-list-tbl tbody tr td .tbl-tit{text-align: left; font-size:1.8rem;}
	.office-list-tbl tbody tr td:nth-of-type(3) {margin-bottom: 1rem;}
	.office-list-tbl tbody tr td .tbl-txt i {padding-top: 0.3rem; font-size: 2rem;}
}

@media all and (max-width:480px){
	.office-search-box .select-box,
	.office-search-box .search-box {width: 100%;}
}

/* ******************  회사소개 :: 오시는 길 ********************** */
@media all and (max-width: 1280px) {
	.location-info-con {width: 37rem; padding: 3rem;}
	.location-info-con .location-info-tit {font-size: 2rem;}
	.location-info-list .info-list-item .email-list {gap: 1rem 0;}
	.location-info-list .info-list-item .email-list .info-list-tit {display: block;}
	/* .location-info-list .info-list-item {display: block; margin-bottom: 2.5rem;}
	.location-info-list .info-list-item .info-list-tit {width: 100%; margin-right: 0; margin-bottom: 0.5rem;}
	.location-info-list .info-list-item .info-list-txt {width: 100%;}
	.location-info-list .info-list-item .email-list {width: 100%; gap: 1rem 0;} */
}

@media all and (max-width: 800px) {
	.location-map-con {padding-top: 36rem; margin-bottom: 3rem;}
	.location-info-con {position: static; width: 100%; max-width: 77.5%; margin: 0 auto; transform: translateY(0);}
	.location-info-list .info-list-item .email-list {flex-direction: column;}
}

@media all and (max-width: 480px) {
	.location-info-con {max-width: none;}
	.location-info-list .info-list-item {display: block; margin-bottom: 2.5rem;}
	.location-info-list .info-list-item .info-list-tit {display: block; width: 100%; margin-bottom: 2rem; margin: 0;}
	.location-info-list .info-list-item .info-list-txt {display: block; width: 100%;}
	.location-info-list .info-list-item .email-list {width: 100%; margin-top: 0.5rem;}
}

/* ******************  회사소개 :: 고객사 ********************** */
@media all and (max-width: 800px) {
	.client-list-con {padding: 5rem 0;}
	.client-list-con .client-list-con-tit {margin-bottom: 2rem; font-size: 3rem;}
	.client-list {grid-template-columns: repeat(3, 1fr); grid-gap: 3rem 1.5rem;}
	.client-list .list-item .img-box {margin-bottom: 1.5rem;}
	.client-list .list-item .list-item-tit {font-size: 1.6rem;}
}

@media all and (max-width: 480px) {
	.client-list {grid-template-columns: repeat(2, 1fr);}
}

/* ******************  Medical :: 제품 리스트 ********************** */
@media (min-width: 801px) and (max-width: 1280px) {
	/********** 탭 **********/
	.column-tab-style01 .sub-tab-list-style ul li a em {padding: 0 1.8rem; font-size: 1.5rem;}
	.column-tab-style01 .sub-tab-list-style ul li a em::before {right: 1rem;}
}

@media all and (max-width: 1280px) {
	/********** 탭 **********/
	.column-tab-style01 {top: calc(var(--header-height) + var(--header-top) + 30px);}
	
	/********** 컨텐츠 **********/
	.product-tab-wrap {width: 23%;}
	.product-list-wrap {width: calc(77% - 6rem);}
	.product-list .list-item a {min-height: auto;}
}

@media all and (max-width: 800px) {
	/********** 탭 **********/
	.product-tab-wrap {position: absolute; width: 100%; height: 100%; pointer-events: none;}
	.column-tab-style01 {position: sticky;  z-index: 99; pointer-events: auto; margin-bottom: 0;}
	
	/********** 컨텐츠 **********/
	.proruct-list-content {display: block;}
	.product-list-wrap {width: 100%; margin-left: 0; padding-top: 80px;}
	
	.product-list {grid-template-columns: repeat(2, 1fr);}
	.product-list .list-item a {padding: 2.5rem;}
	.product-list .list-item .list-item-category {margin-bottom: 1.5rem;}
	.product-list .list-item .img-box {margin-bottom: 1.5rem;}
	.product-list .list-item .list-item-tit {font-size: 2.6rem;}
}

@media all and (max-width: 480px) {
	.product-list {grid-template-columns: repeat(1, 1fr);}
}

/* ******************  Medical :: 제품 뷰 ********************** */
@media all and (max-width: 1680px) {
	.proruct-view-content .sub-tab-con {padding-right: var(--area-padding);}
	.product-down-con {padding-right: var(--area-padding);}
}

@media all and (max-width: 1440px) {
	.proruct-view-content .area-sub {padding: 0;}
}

@media all and (max-width: 1280px) {
	.column-tab-style02 {top: calc(var(--header-height) + var(--header-top) + 50px)}
	
	.product-slide-area .slide-txt-box {width: 30%;}
	.product-slide-area .slide-item-tit {font-size: 5.2rem;}
	.product-slide-area .small-slide-list .small-slide-item {width: 7rem;}
	
	.product-highlights-con {max-height: none !important;}
	
	.slide-control-box {margin-top: 11rem;}
	
}

@media all and (max-width: 800px) {
	.column-tab-style02 {position: sticky; top: calc(var(--header-height) + var(--header-top) + 3rem); margin-bottom: 0; pointer-events: auto;}	
	.column-tab-style02 .sub-tab-list-style.top-fixed {position: static;}
	.column-tab-style02 .sub-drop-open-btn-style {z-index: 101;}
	
	.product-view-cm-tit {margin-bottom: 3rem; font-size: 4.6rem;}

	.proruct-view-content {display: block;}
	.proruct-view-content .product-tab-wrap {left: 0; width: 100%; height: 100%; padding: 0 var(--area-padding); box-sizing: border-box; pointer-events: none;}
	.proruct-view-content .product-view-wrap {padding-top: 75px;}
	.proruct-view-content .sub-tab-con {padding-left: 0; padding-right: 0;}
	.proruct-view-content .area-sub {padding: 0 var(--area-padding);}
	
	.proruct-view-content .swiper-container-vertical > .swiper-wrapper {flex-direction: row !important;}
	.slide-control-box {margin-top: 23rem;}
	
	.product-path-box {display: block;}
	.product-path-box .product-tit {display: inline-block; margin-bottom: 3rem;}
	
	.product-view-slide-con {margin-bottom: 8rem;}
	.product-slide-area {margin-top: 6rem;}
	.product-slide-area .slide-inner {margin-top: 0;}
	.product-slide-area .slide-txt-box {position: static; width: 100%; min-height: auto; margin-bottom: 5rem;}
	.product-slide-area .small-slide-list {gap: 0 1.57%;}
	.product-slide-area .small-slide-list-wrap {top: auto; bottom: 9rem; width: 100%; transform: none;}
	.product-slide-area .small-slide-list .small-slide-item {width: 18.75% !important; padding-top: 18.75%;}
	.product-slide-area .big-slide-list-wrap {padding-top: 0;}
	.product-slide-area .big-slide-list .big-slide-item .img-box {padding-top: 80%;}
	
	.product-highlights-con {padding-top: 7rem; padding-bottom: 7rem; margin-bottom: 8rem;}
	.product-highlights-con .highlights-wrap {display: block;}
	.product-highlights-con .highlights-list {position: relative;}
	.product-highlights-con .scroll-down {display: none;}
	.product-highlights-con .product-view-cm-tit {width: 100%;}
	.product-highlights-con .highlights-list {width: 100%;}
	
	.product-spec-con {margin-bottom: 8rem;}
	.product-view-spec-table td {padding: 1rem; font-size: 1.4rem;}
	
	.product-down-con {padding: 6rem 0;}
	.product-view-down-list {grid-template-columns: repeat(1, 1fr);}
	.product-view-down-list .down-list-item {padding: 2rem;}
	.product-view-down-list .down-list-item .down-tit {width: calc(100% - 6rem); font-size: 1.8rem;}
	.product-view-down-list .down-list-item .down-btn {width: 4rem; height: 4rem;}
	.product-view-down-list .down-list-item .down-btn i {font-size: 1.6rem;}
}

@media all and (max-width: 480px) {
	.product-slide-area .big-slide-list .big-slide-item .img-box img {max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover;}
}

/* ******************  인재채용 ********************** */
/********** 채용절차 **********/
@media all and (max-width: 800px ) {
	.recruit-step-list-con,
	.recruit-step-list {flex-direction: column; justify-content: center; align-items: center;}
	.recruit-step-list-con {gap: 10rem 0; margin-bottom: 7rem;}
	.recruit-step-list-con .recruit-type .inner::before {right: auto; left: 50%; top: auto; bottom: -7rem; width: 20rem; transform: translateX(calc(-50% - 0.5px)) rotateZ(90deg);}
	.recruit-step-list {gap: 2rem 0;}
	.recruit-step-list .step-list-item .inner::before {right: auto; left: 50%; top: auto; bottom: 9%; transform: translateX(calc(-50% - 0.5px)) rotateZ(90deg);}
	.recruit-step-list-con .recruit-type {width: 45%; padding-top: 45%;}
	.recruit-step-list .step-list-item {width: 45%; padding-top: 45%;}
	
	/********** 채용공지 **********/
	.recruit-content .bbs-top-list-box .board-search-inner {padding: 0 0 0 20px;}
	.recruit-content .category-select-box {width: 100%;}
	.recruit-content .fakeform-selectbox {width: 33.333%;}
	.recruit-content .fakeform-selectbox .select-title strong {width: 75%;}
	
	.recruit-notice-list-wrap {margin-bottom: 3rem;}
	.recruit-notice-list {padding: 3rem 0; margin-bottom: 3rem;}
	.recruit-notice-list .notice-list-item {flex-direction: column; align-items: flex-start; justify-content: center; padding: 3rem;}
	.recruit-notice-list .notice-list-item .info-area {width: 100%; margin-bottom: 3rem;}
	.recruit-notice-list .notice-list-item .recruit-notice-tit {margin-bottom: 2rem; font-size: 1.8rem;}
	.recruit-notice-list .notice-list-item .recruit-notice-date {font-size: 1.4rem;}
	.recruit-notice-list .notice-list-item .btn-area {flex-direction: row; gap: 0 0.8rem; width: 100%;}
	.recruit-notice-list .notice-list-item .recruit-notice-btn {width: 50%; height: 4rem;}
}

@media all and (max-width: 480px ) {
	.recruit-step-list-con .recruit-type {width: 70%; padding-top: 70%;}
	.recruit-step-list .step-list-item {width: 70%; padding-top: 70%;}
}

/* ******************  고객지원 :: 고객문의 ********************** */
@media all and (max-width: 800px ) {
	/***** 문의 리스트 *****/
	.inquity-list-content {padding-bottom: 6rem;}
	.inquity-list-content .cm-btn-box {margin-top: 3rem;}
	
	/***** 문의 폼 *****/
	.inquiry-form-content {display: block;}
	.inquiry-left-txt-area {width: 100%; margin-right: 0; margin-bottom: 2rem;}
}

/* ******************  공지사항 :: 공지사항 ********************** */
@media all and (max-width: 1280px) {
	.notice-content .bbs-list-style08 .bbs-item .bbs-list-info-con {width: 63%;}
	.notice-content .bbs-list-style08 .bbs-item .tit-box {width: 75%;}
}

@media all and (max-width: 800px) {
	/* .notice-content {padding-bottom: 7rem;} */
	.notice-content .bbs-list-style08 .bbs-item .title-box {flex-wrap: wrap;}
	.notice-content .bbs-list-style08 .bbs-item .tit-box {width: 100%;}
}

@media all and (max-width: 480px) {
	.notice-content .bbs-list-style08 .bbs-item .bbs-list-info-con {width: 100%;}
}

/* ******************  공지사항 :: 중고의료기기판매 ********************** */
@media all and (max-width: 800px) {
	.sales-list {grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
	.sales-list .list-item a {padding: 2.5rem;}
	.sales-list .list-item .sales-list-txt {min-height: 6.5rem; -webkit-line-clamp: 3;}
}

@media all and (max-width: 480px) {
	.sales-list {grid-template-columns: repeat(1, 1fr); grid-gap: 2rem 0;}
}