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


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1220px){
	.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:1220px){
	.sub-tab-list-style .area{padding:0}
}
@media all and (max-width:1024px){
	/* 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-tab-wrapper-style{position: relative !important; top:auto; padding:0; margin-bottom:4rem; overflow:visible; z-index:99;}
	.sub-tab-list-style ul li{margin:0;}
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 2rem; height:40px; line-height:40px; font-size:1.4rem; background-color:var(--main-color); border-radius: 20px; 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; font-size: 2rem; margin-top:-1rem}
	.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; border-radius: 20px; }
	.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; color: #666 !important;}
	.sub-drop-menu-style ul li.selected{background-color:transparent;}
	.sub-drop-menu-style ul li.selected a em{color:var(--main-color); font-weight:600; }
	
	.cm-sub-txt01 {font-size: 2.4rem; margin-top: 4rem;}
	.cm-sub-txt02 {font-size: 1.6rem;}
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	/* .sub-tab-list-style.top-fixed{top:60px;} */
}


/* ****************** 
 * Product
 ********************** */
/* ********* 제품 비주얼 레이아웃 ********* */
@media all and (max-width:800px){
	#visual.sub-visual-products .visual-tit{font-size:4rem; margin-top:var(--header-height);}
}
/* ********* 제품 상단 배경 ********* */
@media all and (max-width:800px){
	.prd-top-bg{width:1920px}
}
/* ********* 제품 상단 검색창 ********* */
@media all and (max-width:800px){
	.prd-top-box {flex-wrap: wrap; flex-direction:column-reverse;}
	.prd-top-box .total-box{width:100%; margin-top: 1rem;}
	.prd-top-box .search-box{width:100%;}
	.prd-top-box .search-box .search-txt{display: none;}
	.prd-top-box .search-box form {width: calc(100% - 17.5rem);}
	.prd-top-box .search-box .prd-search-inner{width:100%}
	.prd-top-box .search-box .prd-search-inner:before{display: none;}
	.prd-top-box .search-box .prd-search-inner .prd-search-input{text-align:right;}
	/* .prd-top-box .search-box .prd-search-inner .prd-search-input::placeholder{color:transparent;} */
}
/* ********* 제품 필터 ********* */
@media (min-width:801px) and (max-height:800px){
	.prd-filter-wrap{will-change: auto !important; filter: none !important;}
	.prd-filter-box{overflow:visible;}
	.prd-filter-list .filter-item{overflow:visible;}
	.prd-filter-list .filter-item .tit-item > i{transform: rotate(-90deg);}
	.prd-filter-list .filter-item.on .tit-item > i{transform: rotate(90deg);}
	.prd-filter-list .filter-item .inner-list{position: absolute; top:0; right: -2.5rem; transform: translateX(100%); padding:1rem 2rem 2rem; width:34rem; background:rgba(255,255,255,0.07); border-radius:1.6rem; max-height: calc(100vh - 15rem);}
	.prd-filter-list .filter-item .inner-list .liquid-effect{display: block;}
	.prd-filter-list .filter-item .inner-list .inner-item{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);}
	.prd-filter-list .filter-item .inner-list .inner-item .check-item rect{stroke:#fff;}
	.prd-filter-list .filter-item .inner-list .inner-item .check-item .check-txt{color:#fff;}
	
	/* 2deps */
	.prd-filter-list .filter-item:nth-child(3) .inner-list{top:-7.5rem}
	/* 3deps */
	.prd-filter-list .filter-item:nth-child(4) .inner-list{top:-15rem}
	/* Industries */
	.prd-filter-list .filter-industry-item .filter-item .inner-list{top:-24.5rem}
}

/* ********* 제품 리스트 ********* */
@media all and (max-width:1280px){
	.prd-filter-wrap{width:20%;}
	
	.prd-list-wrap{width: calc(77% + 2rem); margin: -1rem;}
	.prd-list-wrap .list-item{width: calc(33.33% - 2rem); margin: 1rem;}
}
@media all and (max-width:800px){
	.prd-list-wrapper{position: relative; display: block;}
	.prd-filter-wrap{position: absolute; top:0; width:100%; max-width:none; margin-bottom:2rem; z-index:99; will-change: auto !important; filter: none !important;}
	.prd-filter-list .filter-item.top-item{margin-bottom:0;}
	.prd-filter-list .filter-item .inner-list{max-height: 30rem;}
	.filter-item-list{display: none; margin-top:1rem;}
	
	.prd-list-wrap{width:calc(100% + 1.2rem); margin:-0.6rem; padding-top:10.5rem;}
	.prd-list-wrap .list-item{width: calc(50% - 1.2rem); margin: 0.6rem;}
	.prd-list-wrap .list-item .txt-box{padding-top:1.5rem;}
	.prd-list-wrap .list-item .txt-box .prd-category{font-size:1rem;}
	.prd-list-wrap .list-item .txt-box .prd-tit{font-size:2.4rem;}
	
	.prd-filter-list .filter-item .inner-list .inner-item .check-item rect{ fill:none; stroke:#000; stroke-width:2; vector-effect: non-scaling-stroke; stroke-dasharray:335; stroke-dashoffset:335; transition:stroke-dashoffset 0.4s ease;}
}
@media all and (max-width:480px){
	.prd-list-wrap .list-item{width: calc(50% - 1.2rem);}
}

/* ****************** 
 * KOLAS
 ********************** */
/* ********* Overview ********* */
@media all and (max-width:1280px){
	.kolas-overview-con2 {padding: 16rem 0 45rem;}
	.kolas-slide-con .big-slide-con .inner {max-width: 27rem;}
	.overview-flow-txt  {bottom: 2rem;}
	.overview-flow-txt .inner {height: 26rem;}
}
@media all and (max-width:800px){
	.kolas-overview-con1 {padding: 10rem 0;}
	.kolas-overview-con1 .cm-sub-top-box {margin-bottom: 0;}
	.kolas-overview-txt {display: block; margin-top: 0;}
	.kolas-overview-txt:before {width: 2px; height: 6rem; margin-top: -3rem; margin-left: -1px;}
	.kolas-overview-txt p {flex-direction:column;width: 100%; text-align: center; justify-content: center !important; padding: 5rem 0; gap:1rem;}

	
	.kolas-overview-list {flex-wrap: wrap;}
	.kolas-overview-list .item {width: 100%;}
	.kolas-overview-con1 .txt {font-size: 1.6rem; margin-top: 4rem;}
	
	.kolas-overview-con2 {padding: 10rem 0 25rem;}
	.kolas-slide-con {display: block; height: auto;}
	.kolas-slide-con .big-slide-con {width: 100%; height: auto; padding: 5rem 4rem 7rem; margin-bottom:2rem;}
	.kolas-slide-con .big-slide-con .inner {}
	
	.kolas-slide-con .nav-slide-con {width: 100%; height: auto;}
	.kolas-slide-con .nav-slide-con .inner {padding: 2rem 3rem;}
	.kolas-slide-con .nav-slide-con .inner:before {display: none;}
	.kolas-list-btn-wrap {bottom: 5rem;}
	.kolas-list-btn-wrap .photo-btn-wrap button {color: #000;}
	.kolas-nav-slide {height: 100%;}
	.kolas-nav-slide .slick-list {margin: 0 -1rem;}
	.kolas-nav-slide .slick-slide {margin: 0 1rem;}
	.slick-nav-arrow {display: none;}
	.kolas-btn-wrap {flex-wrap: wrap;}
	.kolas-btn-wrap a {width: 100%; height: 6.2rem; padding: 0 3rem;}
	
	.overview-flow-txt .inner {height: 14rem;}
}

/* ********* 교정신청절차 ********* */
@media all and (max-width:800px){
	.calibration-page {padding-bottom: 7rem;}
	.request-process-list {margin-bottom: 5rem;}
	.request-process-list li {width: 100%;}
	.request-process-list li:after {top: -3.5rem; margin-top: 0; left: 50%; margin-left: -2.5rem; transform:rotate(90deg); box-shadow: 0.4rem 0 0.4rem rgba(0,0,0,0.1);}
	.request-process-item {padding: 4rem 0;}
	.request-process-item dl dt {width: 7rem; height: 3.4rem; line-height: 3.4rem; font-size: 1.4rem; }
	.request-process-item dl dd {font-size: 2.2rem;}
	.request-process-item .txt1 {font-size: 1.8rem;}
	
	.request-process-item:has(.kolas-btn-wrap){display: block;}
	.request-process-item:has(.kolas-btn-wrap) dl{margin-bottom:1.8rem;}
	.request-process-item .kolas-btn-wrap a{width:100%; max-width:none;}
}


/* ****************** 
 * About WISE
 ********************** */
/* ********* WISE ********* */
@media all and (max-width:1280px){
	.intro-con01 {}
	.intro-con01-bg {background: #000 url(/images/content/intro01_bg_m.jpg)no-repeat left 50% bottom 0 / contain;}
}
@media all and (max-width:800px){
	.move-line-wrap2 {display: none;}
	.about-tab-wrapper-style {height: 40px;}
	
	.intro-tit-con .tit {font-size: 4rem;}
	.intro-tit-con .tit.style02{font-size:3rem;}
	.intro-con01 {padding-bottom:12rem}
	
	.intro-con02 {padding: 12rem 0;}
	.intro-slide-con {max-width: 30rem; margin: 9.5rem auto 0;}
	.intro-slide > li .inner {padding: 10.4rem 3rem 3rem;}
	.intro-slide > li .inner .tit {left: 3rem; top: 3rem; font-size: 1.8rem;}
	.intro-slide > li .inner dl dd strong {font-size: 4.6rem;}
	.intro-slide > li .inner dl dd .count-num-box {font-size: 2.3rem;}
	.intro-slide > li .inner dl dd .count-num-box > p {font-size: 4.6rem; line-height: 4.6rem;}
	.intro-slide > li .inner dl dd .count-num-item-wrap .count-num-item-box {height: 46rem;}
	.intro-slide > li .inner dl dd .count-num-item-wrap .count-num-item-box .count-num-item {font-size: 4.6rem;}
	.intro-slide > li .inner dl dd .count-unit {font-size: 4.6rem;}
}

/* ********* History ********* */
@media all and (max-width:1820px){
	.history-tab-wrapper-style {left: 2rem;}
	.history-img-wrap {padding: 0 6rem 0 20rem;}
}
@media all and (max-width:1280px){
	.history-year-box:before {width: calc(100% - 25rem);}
	.history-year {font-size: 8rem;}
	.history-item {width: 100%;}
	.history-item dl {font-size: 1.6rem;}
}
@media all and (max-width:800px){
	.history-parallax-wrap {height: auto;}
	.history-tab-wrapper-style {position: relative; width: calc(100% - 2*(var(--area-padding))); left: var(--area-padding); top: 0; height: 40px; transform: none;}
	.history-tab-list-style {height: 40px; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1)}
	.history-tab-list-style.top-fixed {position: fixed; top: calc(var(--sub-menu-height) + 45px); left: var(--area-padding); width: calc(100% - 2*(var(--area-padding)));}
	#wrap.scroll-down .history-tab-list-style.top-fixed {top: calc(var(--sub-menu-height) + 45px);}
	#wrap:not(.scroll-down) .history-tab-list-style.top-fixed {top: calc(var(--sub-menu-height) + 45px);}
	
	.history-parallax-con {flex-direction:column;}
	.history-img-wrap {display: none;}
	.history-info-wrap {width: 100%; height: auto; padding: 0 var(--area-padding); box-sizing: border-box;}
	.history-img-wrap .inner {max-width: none; width: 50%;}
	.history-year-box {display: none;}
	.history-info-con {position: relative;}
	.history-item-group {display: block;}
	.history-item {opacity: 1; height: auto; padding: 3rem 0;}
	.history-img-m {display: block; width: 50%; margin-bottom: 2rem;}
	.history-img-m span {display: block; width: 100%; height: 0; position: relative; padding-top: 100%; }
	.history-img-m span figure {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 1rem; overflow: hidden;}
	.history-img-m span figure img {width: 100%; height: 100%; object-fit:cover;}
	
	.history-year-m {display: block; margin-bottom: 2rem;}
	.history-year-m strong {display: block; font-size: 4rem; font-weight: 700; letter-spacing: -0.02em; color: #fff;}
	.history-item dl {font-size: 1.6rem;}
	.history-item dl dt {width: 5.5rem;}
	.history-item dl dd {width: calc(100% - 5.5rem);}
}

/* ********* CI ********* */
@media all and (max-width:1280px){
	.ci-con01-bottom {padding:6.4rem 0 0;}
}
@media all and (max-width:800px){
	.ci-con01 {padding: 0 0 5rem;}
	.ci-con01-bottom {display: block; padding: 4rem 0 0;}
	.ci-con01-bottom .txt {width: 100%; padding-right: 0;}
	.ci-con01-bottom a {margin-top: 3rem;}
	
	.ci-con02 {padding: 10rem 0 5rem;}
	.ci-type-box {padding: 3rem;}
	.ci-type-list {flex-wrap: wrap; gap:4rem;}
	.ci-type-list li {width: 100%; }
	.ci-type-list li .logo-box {height: 23rem; }
	.ci-type-list li .logo-box img {max-width: 100%;}
	
	.ci-color-box {padding: 3rem;}
	.ci-color-list {flex-wrap: wrap; gap:4rem;}
	.ci-color-list li {width: 100%; }
	.ci-color-list li .color-box {padding: 3rem;}
 }
 
 /* ********* Global Network ********* */
 @media all and (max-width:1280px){
	.global-tab-content-inner {left: 0; padding: 0;}
	.global-list-box {width: 32rem;}
	.map-con {margin-left: 34rem;}
 }
 @media all and (max-width:800px){
	.global-page .cm-sub-top-box {padding-top: 3rem;}
	.global-content {height: auto;}
	.global-tab-content-inner {width: 100%; height: 40rem; top:0;}
	.global-list-box {width: 100%;border-radius: 1.4rem;}
	.global-list .global-list-item {padding: 2.5rem 0;}
	.global-list .global-list-item .tit {font-size: 2rem;}
	.global-list .global-list-item .info-box p i {top: 0.5rem;}
	
	.map-con {margin-left: 0; width: 100%; padding-top: 42rem;}
	.map-con #map {border-radius: 1.4rem; height: 50rem;}
	.marker-wrap .label {font-size: 1.6rem; padding: 1rem 3rem;}
 }
 
 /* ********* Careers ********* */
@media all and (max-width:1280px){
	/* 채용안내 */
	.careers-job-list li {width: calc(33.33% - 2rem);}
	.process-txt-list {width: calc(100% - 34.2rem);}
}
@media all and (max-width:800px){
	/* 채용안내 */
	.careers-page {padding-bottom: 10rem;}
	.careers-con {padding-top: 12rem;}
	.careers-con.con01 {padding-top: 5rem;}
	.talent-list {flex-wrap: wrap; margin: -1rem 0;}
	.talent-item {display: flex; flex-direction:column; justify-content: space-between; padding: 3rem; flex: auto;  width: 100%; height: 30rem;  margin:1rem 0; box-sizing: border-box;}	
	.talent-item .tit {position: relative; top: auto; left: auto; transform: none;}
	.talent-item .txt {position: relative; bottom: auto; left: auto; opacity: 1; font-size: 2.4rem;}
	.talent-btn-wrap { flex-wrap: wrap;}
	.talent-btn-wrap a { width: 100%; height: 6.2rem; padding: 0 3rem;}
	.process-icon-list {width: 22rem; padding: 2rem;}
	.process-icon-item .inner .icon {width: 6rem; height: 6rem;}
	.process-txt-list {margin-left: 4rem; width: calc(100% - 26rem); padding: 2rem 0;}
	.process-txt-list li dl dt strong {font-size: 2.4rem;}
	.process-txt-list li dl dd {font-size: 1.6rem;}
	.careers-job-list li {width: calc(50% - 2rem);}
	.careers-job-list li a .inner {padding: 3.5rem 3rem;}
	.careers-job-list li a .inner .tit {font-size: 2.4rem;}
	.careers-job-list li a .inner .txt {font-size: 1.6rem;}
	.welfare-tab-list-style ul li a {padding: 0 2.2rem;}
	.welfare-tab-list-style ul li a em {font-size: 1.8rem;}
	.welfare-list li  {width: 100%;}
	.welfare-list li .inner {padding: 3rem 2rem; min-height: 0;}
	.welfare-list li .inner .icon  {width: 7rem; height: 7rem;}
	.welfare-list li .inner dl {margin-top: 3rem;}
	.welfare-list li .inner dl dt {font-size: 2.4rem;}
	.welfare-list li .inner dl dd {font-size: 1.6rem;}
	
	/* 채용공고 */
	.recruit-page {padding-bottom: 10rem;}
	.recruit-con {padding-top: 5rem;}
	.recruit-page .board-left-box:has(.count-more) {margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
	.recruit-con .recruit-selectbox {width: calc(25% - 1rem); height: 4.8rem;}
	.recruit-con .recruit-selectbox .select-style span {font-size: 15px;}
	.recruit-con .gs-custom-selectbox + .gs-custom-selectbox {margin-left: 0;}
	.announcement-con {margin-top: 3rem;}
	.announcement-list {margin: -1rem 0;}
	.announcement-list li {width: 100%; margin: 1rem 0;}
	.announcement-list li a {padding: 3rem;}
	.announcement-list li a .tit {font-size: 2.2rem;}
	
	/* Training */
	.training-con01 {padding: 5rem 0;}
	.training-list01 li {width: 100%;}
	.training-list01 li .inner {padding: 2rem;}
	.training-list01 li .inner .icon {width: 7.8rem;}
	.training-list01 li .inner .txt-box {width: calc(100% - 7.8rem);}
	.training-list01 li .inner .txt-box .txt01 {font-size: 2rem;}
	.training-career-con {padding: var(--area-padding) 0;}
	.training-con02 {padding: 6rem 0 10rem;}
	.training-list02 li {width: 100%;}
	.training-list02 li .inner {height: auto; padding: 3rem;}
	.training-list02 li .inner .icon {width: 8rem; height: 8rem;}
	.training-list02 li .inner dl {padding: 2rem 1rem 1rem;}
	.training-list02 li .inner dl dt {font-size: 2.4rem;}
	.training-list02 li .inner dl dd {font-size: 1.6rem;}
	.training-list02 li:last-child .inner {height: 24rem;}
	
}

@media all and (max-width:480px){
	/* 채용안내 */
	.process-txt-list {width: 100%; margin-left: 0; display: block;}
	.process-txt-list li + li {padding-top: 3rem;}
	.process-txt-list li dl dd {margin-top: 2rem;}
	.careers-job-list li {width: calc(100% - 2rem);}
	.careers-job-list li a .inner {min-height: 24rem;}
	
	/* 채용공고 */
	.recruit-con .recruit-selectbox {width: calc(50% - 0.5rem); margin: 0.5rem 0;}
}


/* ********* Contact Us ********* */
@media all and (max-width:1380px){ 
	.contact-page .abou-tab-list-style.top-fixed { width: calc(100% - (2*var(--area-padding)));}
}
@media all and (max-width:800px){ 

	.contact-page .abou-tab-list-style ul li.selected a em {color: var(--main-color);}
	.contact-tab-con {padding-top: 10rem;}
	.contact-tab-con:first-of-type {padding-top: 7rem;}
	.contact-tit {font-size: 4rem;}
	.contact-list li {width: calc(50% - 2rem); }
	.contact-list li .inner {padding: 3rem 3rem 4rem;}
	.contact-list li .inner strong {font-size: 2.4rem; margin-bottom: 1.5rem;}	
	.contact-list li .inner dl {margin-bottom: 1.5rem;}
}
@media all and (max-width:640px){ 
	.contact-list {margin: -1rem 0;}
	.contact-list li {width: 100%; margin: 1rem 0; }
	.contact-list li .inner {padding: 3rem 3rem 4rem;}
	.contact-list li .inner strong {font-size: 2.4rem; margin-bottom: 2rem;}	
	.contact-list li .inner dl dt {font-size: 1.8rem;}
	.contact-list li .inner dl dd p {font-size: 1.4rem;}
}