@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2022-08-08
******************************************************** */

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1279px ){
	/* 공통 :: 레이아웃 */
	#mainIntro {top: calc(50% - 1px); left: 50%; transform: translate(-50%, -50%); width: 100%; height: calc(100vh + 2px);}
	#fullpage .section:not(#mainVisual){height:auto !important; overflow: visible;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}
	.main-visual-video-con .clipped{transform: translate(-50%, -50%) scale(0.8);}
	
	.main-visual-txt-box .main-visual-txt1 {font-size: 7rem;}
}
@media all and ( max-width: 800px ){
	.intro-inner {width: 92%; margin: 0 auto;}
	.intro-inner .bottom-txt {margin-top: 2rem;}
	.intro-inner .bottom-txt .bar {width: 100%;}
	.intro-inner .bottom-txt strong {display: block; margin-top: 1rem; margin-left: 0;}

	.main-visual-txt-box .main-visual-txt1 {font-size: 5rem;}
	
	.main-visual-contact-btn {width: 10.4rem; height: 10.4rem; position: fixed; bottom: 3rem;}
	.main-visual-contact-btn .inner {width: 5.7rem; height: 5.7rem;}
	.main-visual-contact-btn .inner:before {border-radius: 1.2rem;}
	.main-visual-contact-btn .inner i {font-size: 2.4rem;}
}
@media all and ( max-width: 480px ){
	#mainIntro {height: calc(100dvh + 2px);}
	.intro-inner {padding-bottom: 5rem;}
	.intro-inner .top-txt{margin-bottom: 1.5rem;}
	.intro-inner .bottom-txt {margin-top: 1rem;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box{margin-bottom:30px;}
	.main-tit-box .main-tit{font-size:24px;}
	.main-tit-box .main-sub-tit{font-size:13px;}
	.main-tit-box .main-sub-tit span{display:block;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(Walkbot) -------- */
@media all and (max-width:1600px){ 
	#mainContent1 .main-prd-tit-con {left: var(--area-padding);}
	.main-prd-con.prd01 .main-prd-img {width: 76%;}
}
@media all and (max-width:1279px){ 
	.main-prd-con {padding: 12rem 0;}
	.main-prd-tit-box .tit {font-size: 7rem;}
}
@media all and (max-width:800px){ 
	#mainContent1 .main-prd-tit-con {position: relative; top: 0; left: 0; transform: translateY(0); padding: 10rem var(--area-padding) 5rem; box-sizing: border-box;}
	.main-prd-con {padding: 0 0 12rem;}
	.main-prd-con.prd01 .main-prd-img {width: 100%;}
	
	.main-prd-info-list li .info-box.top,
	.main-prd-info-list li .info-box.bottomr {top: 5rem; bottom: auto;}
	.main-prd-info-list li .info-box.right,
	.main-prd-info-list li .info-box.left {right: auto; left: 50%; transform:translateX(-50%);}
	.main-prd-info-list li .info-box {width: 30rem; height: auto;}
	.main-prd-info-list li .info-box .inner {padding: 2.5rem; min-height: auto;}
	.main-prd-info-list li .info-box .inner .tit {font-size: 2rem;}
	.main-prd-info-list li .info-box .inner dl {margin-top: 4rem;}
	
	/* 260910 추가 css */
	.main-prd-info-list.mb-none li{transform: scale(0.7) translate(-50%, -50%);}
	/* 마커 안의 info-box는 숨김 (마커만 표시) */
	.main-prd-info-list.mb-none li .info-box {display: none;}

	/* 모바일 전용 박스 컨테이너 - 이미지 정중앙 */
	.main-prd-info-list-m {
		display: block;
		position: absolute;
		top: 0; left: 0;
		width: 100%; height: 100%;
		z-index: 20;
		pointer-events: none;
	}
	.main-prd-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;
	}
	.main-prd-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;
	}
	.main-prd-info-list-m li.on .info-box {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		filter: blur(0);
		pointer-events: auto;
	}
	.main-prd-info-list-m li .info-box .inner {padding: 2.5rem;}
	.main-prd-info-list-m li .info-box .inner .tit {font-size: 2rem;}
	/* .main-prd-info-list-m li .info-box .inner dl {margin-top: 4rem;} */
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Healerbot) -------- */
@media all and (max-width:1860px){ 
	#mainContent2 .main-prd-tit-con {left: 60%;}
}
@media all and (max-width:1600px){ 
	.main-prd-con.prd02 .main-prd-img {width: 62%;}
}
@media all and (max-width:800px){ 
	#mainContent2 .main-prd-tit-con {position: relative; top: 0; left: 0; transform: translateY(0); padding: 10rem var(--area-padding) 5rem; box-sizing: border-box;}
	.main-prd-con.prd02 .main-prd-img {width: 100%;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(Company) -------- */
@media all and (max-width:1279px){ 
	.main-company-con {padding: 12rem 0;}
	.main-tit-box .main-tit {font-size: 5rem;}
	.main-company-flow-txt {bottom: 16rem;}
}
@media all and (max-width:800px){ 
	.main-tit-box .main-tit {font-size: 4rem;}
	
	.main-company-info {flex-wrap: wrap;}
	.main-company-info {display: block;}
	.main-company-info .item {width: 100%; max-width: 40rem; margin: 0 auto;}
	.main-company-info .item.item01 {left: 0; top: 3rem;}
	.main-company-info .item.item03 {left: 0; top: -3rem;}
	.main-company-flow-txt {bottom: 0;}
	.main-company-flow-txt .maskBg .marquee .absol h4 {font-size: 10rem;}
	
	.count-num-box{ font-size:22px}
	.count-num-box > p { font-size:44px; line-height: 44px; } 
	.count-num-item-wrap .count-num-item-box{height:440px;}
	.count-num-item-wrap .count-num-item-box .count-num-item {font-size:44px;}	 
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(About) -------- */
@media all and (max-width:1279px){ 
	.main-about-con {padding: 5rem 0 15rem;}
	
	.main-about-progress {bottom: 7rem;}
}



/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */

@media all and (max-width:1279px){
	#fp-nav{display:none;}
}