@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); display: none;}
	.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:5rem;}
	.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 2rem; height:5rem; line-height:5rem; font-size:1.6rem; 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: 1.5rem; margin-top:-0.8rem; font-size: 1.6rem;}
	.sub-drop-menu-style.open .sub-drop-open-btn-style .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:#061A2F; z-index:11; box-sizing:border-box;}
	.sub-drop-menu-style ul li{margin: 0; position:static; display:block; float:none; border:0; border-top:1px solid rgba(255,255,255,0.15); 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 + li{margin: 0;}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding: 1rem 2rem; border:0;}
	.sub-drop-menu-style ul li a em{color: rgba(255,255,255,0.5); font-size:1.5rem;}
	.sub-drop-menu-style ul li.selected{background-color:transparent;}
	.sub-drop-menu-style ul li.selected a{background-color: transparent;}
	.sub-drop-menu-style ul li.selected a em{color:#fff;}
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:60px;}
}

/* ******************  Walkbot ********************** */
@media all and (max-width: 1660px) {
	.prd-visual-tit-con {padding-left: 0;}
}
@media all and (max-width: 1440px) {
	.prd-visual-tit-con {width: 35%; padding-top: 0;}
	.prd-visual-img-con,
	.prd-intro-img {width: 75%; height: 56rem;}
}
@media all and (max-width:1279px){
	.prd-visual-con {padding-bottom: 20rem;}
	.walkbot-con01 {padding-top: 10rem;}
	.prd-visual-tit-box .tit {font-size: 7rem;}
	/* .prd-intro-info-list li .info-box.top,
	.prd-intro-info-list li .info-box.bottom {top: 5rem; bottom: auto;} */
	.prd-intro-info-list li .info-box.right,
	.prd-intro-info-list li .info-box.left {right: auto; left: 50%; transform:translateX(-50%);}
	.walkbot-con02 {padding-top: 20rem;}
	.walkbot-con02-mark{gap: 1.5rem;}
	.prd-tit-box h4 {font-size: 6rem;}
	.walkbot-con03 {padding-top: 20rem;}
	.walkbot-feature-list li ,
	.walkbot-feature-inner,
	.walkbot-feature-inner .inner {height: calc(100vh - 2*(var(--header-height)));}
	.walkbot-feature-list li  {top:var(--header-height) ;}
	.walkbot-feature-inner .inner .img-con img {object-fit: contain;}
	.walkbot-feature-inner .inner .txt-con {padding: 5rem 4rem;}
	.walkbot-feature-inner .inner .txt-con .tit {font-size: 4rem; margin-bottom: 4rem;}
}
@media all and (max-width:800px){
	.prd-visual-con {padding-bottom: 10rem;}
	.prd-visual-con .area-box {min-height: auto; flex-direction:column-reverse; justify-content: center;}
	.prd-visual-tit-con {width: 100%; margin-bottom: 5rem; padding-top: 0;}
	.prd-visual-tit-box .tit {font-size: 5rem;}
	.prd-visual-tit-box .txt {font-size: 2rem;}
	.prd-visual-img-con, 
	.prd-intro-img {width: 100%; height: 42rem;}
	
	.prd-intro-info-list li .info-box {width: 30rem; height: auto;}
	.prd-intro-info-list li .info-box .inner {padding: 2.5rem; }
	.prd-intro-info-list li .info-box .inner .tit {font-size: 2rem;}
	.prd-intro-info-list li .info-box .inner dl {margin-top: 4rem;}
	
	.walkbot-con02 {padding-top: 7rem; position: relative; /* z-index: -1; */}
	.walkbot-con02-inner {display: block;}
	.walkbot-con02-inner .img-con {width: 100%; text-align: center;}
	.walkbot-con02-inner .txt-con {width: 100%;}
	.walkbot-con02-inner .prd-tit-box {text-align: center;}
	.prd-tit-box h4 {font-size: 4rem;}
	.walkbot-con02-mark {justify-content: center;}
	.walkbot-con02-mark.has-btn{gap: 1rem; flex-direction: column; align-items: center;}
	.walkbot-con02-mark dl { width: 11.9rem;height: 13.4rem;}
	.walkbot-con02-mark dl dt {height: 2.4rem;}
	
	.walkbot-con03 {padding-top: 10rem;}
	.walkbot-con03-content {flex-direction:column;}
	.walkbot-con03-center-item {width: 100%; height: auto;}
	.walkbot-con03-center-item:before {left: 50%; margin-left: -1px; width: 1px; height: calc(100% + 2.6rem); top: -1.3rem; margin-top: 0; border-top: 0; border-left: 2px dotted var(--main-color);;}
	.walkbot-con03-center-item .inner strong {font-size: 3rem;}
	
	.walkbot-con03-item {width: 60%;}
	.walkbot-con03-item:before {left: 50%; margin-left: -1rem; margin-top: 0; top: -6.3rem; transform: rotate(-90deg); z-index: 11;}
	.walkbot-con03-item:first-child:before {left: 50%; right: auto; top: auto; bottom: -6.3rem;    transform: rotate(90deg);}
	
	.walkbot-con04 {padding: 15rem 0;}
	.walkbot-con04-list li .inner dl dt {font-size: 2rem;}
	
	.walkbot-feature-list li ,
	.walkbot-feature-inner,
	.walkbot-feature-inner .inner {height: auto;} 
	.walkbot-feature-list li {position: relative; top: 0;}
	.walkbot-feature-list li + li {margin-top: 6rem;}
	.walkbot-feature-inner .inner {display: block;}
	.walkbot-feature-inner .inner .img-con {width: 100%; padding-top: 75.258%;}
	.walkbot-feature-inner .inner .img-con .video-box,
	.walkbot-feature-inner .inner .img-con .img-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
	.walkbot-feature-inner .inner .img-con img {object-fit: cover;}
	.walkbot-feature-inner .inner .count-box {right: 3rem; bottom: 3rem;}
	.walkbot-feature-inner .inner .count-box .cur-num {font-size: 4rem;}
	.walkbot-feature-inner .inner .txt-con {width: 100%; padding: 4rem 3rem; margin-top: 2rem;}
	.walkbot-feature-inner .inner .txt-con strong {margin-bottom: 2rem; font-size: 2rem;}
	.walkbot-feature-inner .inner .txt-con .txt01 {font-size: 2.2rem;}
	.walkbot-feature-inner .inner .txt-con .tit {font-size: 3.4rem; margin-bottom: 3rem;}
	
	.walkbot-con06 {margin-top: 15rem; padding: 4rem 0 6rem;}
	.walkbot-prd-progress {bottom: 13rem;}
	
	.walkbot-con07{padding: 14rem 0;}
	
	/* 260909 추가 css */
	/* .prd-intro-con .area {z-index: 1;} */
	.prd-intro-info-list li{transform: scale(0.7) translate(-50%, -50%);}
	/* 마커 안의 info-box는 숨김 (마커만 표시) */
	.prd-intro-info-list li .info-box {display: none;}

	/* 모바일 전용 박스 컨테이너 - 이미지 정중앙 */
	.prd-intro-info-list-m {
		display: block;
		position: absolute;
		top: 0; left: 0;
		width: 100%; height: 100%;
		z-index: 20;
		pointer-events: none;
	}
	.prd-intro-info-list-m li {
		position: absolute;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		width: 30rem;
		max-width: calc(100vw - 4rem);
		border-radius: var(--glass-border-radius);
        overflow: hidden;
	}
	.prd-intro-info-list-m li .info-box {
		position: relative;
		top: auto; bottom: auto; left: auto; right: auto;
		width: 100%;
		height: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(1rem);
		filter: blur(1rem);
		backdrop-filter: blur(1rem);
		transition: var(--transition-custom);
		pointer-events: none;
		border: 1px solid rgba(255, 255, 255, 0.1); box-sizing: border-box;
	}
	.prd-intro-info-list-m li.on .info-box {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		filter: blur(0);
		pointer-events: auto;
	}
	.prd-intro-info-list-m li .info-box .inner {padding: 2.5rem; min-height: auto;}
	.prd-intro-info-list-m li .info-box .inner .tit {font-size: 2rem;}
	/* .prd-intro-info-list-m li .info-box .inner dl {margin-top: 4rem;} */
	
	.healerbot-con03 {padding-bottom: 15rem;}
}
@media all and (max-width:480px){
	.walkbot-con03-item:before {top: -4.3rem;}
	.walkbot-con03-item:first-child:before {bottom: -4.3rem;}
}