/*
+----------------------------------------------------------------------+
| Copyright (c) 2010 - 2024 SPEAKINGMAX @ WEAVERSBRAIN.Co.Ltd
+----------------------------------------------------------------------+
| 작업일 : 2024-09-24
| 파일설명 : MAX AI 사이트 메인 CSS
+----------------------------------------------------------------------+
| 작업자 : 최진영  
+----------------------------------------------------------------------+
| 수정이력
| 20241007 반응형 UI 수정 by 최진영
| 20241031 우측 플로팅 배너 추가 by 최진영
| 20241101 우측 플로팅 배너 cursor pointer 수정 by 최진영
| 20241125 모바일 하단 배너 수정 by 최진영
+----------------------------------------------------------------------+ 
*/

@charset "utf-8";

.header {
	position:relative;
}


/* 메인 페이지 내비게이션 */
.mainNavWrap {
	position:sticky;
	top: calc(-1 * var(--header-height));
	left:0;
	width:100%;
	z-index:3;
	background:#000;
}
.mainNavWrap .mainNav .navList {
	white-space: nowrap; 
	overflow-x:auto;
	box-sizing: border-box;
}
.mainNavWrap .mainNav .navList:after {
	content:'';
	display:block;
	position:absolute;
	left:0;;
	bottom:0;
	width:100%;
	height:2px;
	background:#ccc;
}
.mainNavWrap .mainNav .navList .navBtn {
	display:inline-block;
	padding:12px;
	margin-right:12px;
	color:#fff;
	font-family: 'Pretendard-Bold';
	font-size:16px;
	line-height: 160%;
}
.mainNavWrap .mainNav .navList .navBtn:last-child {
	margin-right:0;
}
.mainNavWrap .mainNav .navList .navBtn.on {
	position:relative;
	z-index: 1;
	background: linear-gradient(108.33deg, #E962FF -12.72%, #6AA5FF 133.8%, #4188F2 133.8%, #999999 133.8%, #E1FFAF 133.8%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	border-bottom:2px solid transparent;
	border-image: linear-gradient(108.33deg, #E962FF -12.72%, #6AA5FF 133.8%, #4188F2 133.8%, #999999 133.8%, #E1FFAF 133.8%);
	border-image-slice: 1;
}

/* 단순 이미지 노출/미노출 처리 */
.mainWrap .rightBanner,
.mainWrap .pageImg.pc,
.mainWrap .swiperImg.pc,
.mainWrap .bottomBanner.pc {
	display:none;
}

/* 공통 */
.mainWrap .pageImg {
	display:block;
	width:100%;
}

/* 페이지 최상단 */
.mainWrap .pageImg.mockUp {
	position:relative;
	z-index: 1;
}
.mainWrap .mainVideo {
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	z-index: 1;
}

/* 페이지 컨텐츠 내 영상 */
.mainWrap .contentsMovie {
	position:absolute;
	left: 4%;
	width: 92%;
	border-radius:12px;
}
.mainWrap .contentsMovie.movie01 {
	left:0;
	top: 41%;
	width:100%;
}
.mainWrap .contentsMovie.movie02 {
	top: 9.5%;
}
.mainWrap .contentsMovie.movie03 {
	top: 32.7%;
}
.mainWrap .contentsMovie.movie04 {
	top: 53.3%;
}
.mainWrap .contentsMovie.movie05 {
	top: 76.3%;
}

/* 스펙 슬라이드 */
.mainWrap .maxAISpecSlideWrap {
	position: absolute;
	bottom: 13%;
	width: 100%;
}
.mainWrap .maxAISpecSlideWrap .maxAISpecSlide .swiper-slide {
	opacity:0.4;
	transition:0.5s all;
}
.mainWrap .maxAISpecSlideWrap .maxAISpecSlide .swiper-slide-active {
	opacity:1;
}
.mainWrap .maxAISpecSlideWrap .maxAISpecSlide .slideMovie {
	position:absolute;
	left:15%;
	bottom:0;
	width:70%;
	z-index:0;
}
.mainWrap .maxAISpecSlideWrap .maxAISpecSlide .swiperImg.mo {
	display:block;
	position:relative;
	width:100%;
	z-index:1;
}
.mainWrap .maxAISpecSlideWrap .slideBtn {
	position:absolute;
	bottom:-13%;
	width:10%;
}
.mainWrap .maxAISpecSlideWrap .slideBtn.left {
	right:23%;
}
.mainWrap .maxAISpecSlideWrap .slideBtn.right {
	right:11%;
}
.mainWrap .maxAISpecSlideWrap .slideBtn img {
	display:block;
	width:100%;
}

/* MATE 소개 슬라이드 */
.mainWrap .mateIntroSlideWrap {
	position: absolute;
	top: 0;
	width: 100%;
}
.mainWrap .mateIntroSlideWrap .mateIntroSlide .swiperImg.mo {
	display:block;
	width:100%;
}
.mainWrap .mateIntroSlideWrap .slideBtn {
	display:flex;
	justify-content: center;
	align-items:center;
	position:absolute;
	top:42%;
	width:40px;
	height:40px;
	z-index:2;
}
.mainWrap .mateIntroSlideWrap .slideBtn.left {
	left:2%;
}
.mainWrap .mateIntroSlideWrap .slideBtn.right {
	right:2%;
}
.mainWrap .mateIntroSlideWrap .slideBtn img {
	display:block;
	width:30%;
}

/* 밀착케어 소개 슬라이드 */
.mainWrap .stickCareSlideWrap {
	position: absolute;
	top: 30%;
	width: 90%;
	left:5%;
}
.mainWrap .stickCareSlideWrap .swiper-container {
	padding-bottom:40px;
}
.mainWrap .stickCareSlideWrap .stickCareSlide .swiperImg {
	display:block;
	width:100%;
}
.mainWrap .stickCareSlideWrap .swiper-pagination-bullet-active {
	background:#8935BD;
}

/* 코스 소개 슬라이드 */
.mainWrap .crsSlideWrap {
	position: absolute;
	bottom: 4%;
	left:0;
	width: 100%;
}
.mainWrap .crsSlideWrap.spc {
	bottom:9%;
}
.mainWrap .crsSlideWrap .swiper-container {
	padding:0 20px 40px;
}
.mainWrap .crsSlideWrap .crsSlide .swiperImg.mo {
	display:block;
	width:100%;
}
.mainWrap .crsSlideWrap .swiper-pagination-bullet-active {
	background:#8935BD;
}

/* 하단 띠배너 */
.mainWrap .bottomBanner.mo {
	position:fixed;
	bottom: 2%;
	left: 15%;
	width:70%;
	z-index: 1;
}
.mainWrap .bottomBanner.mo .bannerImg {
	display:block;
	width:100%;
}


/* PC 해상도 제어 */
@media only screen and (min-width : 768px) {

	/* 메인 페이지 예외처리 */
	.header.pc {
		position:relative;
	}

	/* 메인 페이지 내비게이션 */
	.mainNavWrap.pc .mainNav {
		min-width:768px;
		max-width: 1024px;
		margin:0 auto;
	}
	.mainNavWrap.pc .mainNav .navList {
		display:flex;
		justify-content: space-between;
		overflow: visible;
	}
	.mainNavWrap.pc .mainNav .navList .navBtn {
		width:20%;
		margin-right:0;
		padding:12px 0;
		text-align: center;
	}
	.mainNavWrap.pc .mainNav .navList:after {
		height:4px;
	}
	.mainNavWrap.pc .mainNav .navList .navBtn {
		font-size:20px;
		transition: 0.3s all;
		border-bottom:4px solid transparent;
		cursor:pointer;
	}
	.mainNavWrap.pc .mainNav .navList .navBtn:hover {
		position:relative;
		z-index: 1;
		background: linear-gradient(108.33deg, #E962FF -12.72%, #6AA5FF 133.8%, #4188F2 133.8%, #999999 133.8%, #E1FFAF 133.8%);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		border-image: linear-gradient(108.33deg, #E962FF -12.72%, #6AA5FF 133.8%, #4188F2 133.8%, #999999 133.8%, #E1FFAF 133.8%);
		border-image-slice: 1;
		opacity: 0.7;
	}

	/* 단순 이미지 노출/미노출 처리 */
	.mainWrap.pc .pageImg.mo,
	.mainWrap.pc .maxAISpecSlideWrap .maxAISpecSlide .swiperImg.mo,
	.mainWrap.pc .mateIntroSlideWrap .mateIntroSlide .swiperImg.mo,
	.mainWrap.pc .bottomBanner.mo {
		display:none;
	}
	.mainWrap.pc .pageImg.pc,
	.mainWrap.pc .bottomBanner.pc {
		display:block;
	}

	/* PC 레이아웃 대응 */
	.mainWrap.pc .section .innerBox {
		position:relative;
		min-width:768px;
		max-width: 1024px;
		margin:0 auto;
	}
	.mainWrap.pc .mainVideo {
		left:50%;
		transform: translateX(-50%);
		width:47%;
	}
	.mainWrap.pc .contentsMovie {
		left:10%;
		width:80%;
	}
	.mainWrap.pc .contentsMovie.movie01 {
		top:33%;
	}
	.mainWrap.pc .contentsMovie.movie02 {
		top:8.5%;
	}
	.mainWrap.pc .contentsMovie.movie03 {
		top:31%;
	}
	.mainWrap.pc .contentsMovie.movie04 {
		top:51.3%;
	}
	.mainWrap.pc .contentsMovie.movie05 {
		top:73%;
	}
	
	.mainWrap.pc .maxAISpecSlideWrap {
		position: absolute;
		bottom: 15%;
		left: 50%;
		transform: translateX(-50%);
		width: 53%;
	}
	.mainWrap.pc .maxAISpecSlideWrap .maxAISpecSlide .swiper-slide {
		opacity:0.4;
		transition:0.5s all;
	}
	.mainWrap.pc .maxAISpecSlideWrap .maxAISpecSlide .swiper-slide-active {
		opacity:1;
	}
	.mainWrap.pc .maxAISpecSlideWrap .maxAISpecSlide .slideMovie {
		position:absolute;
		left:17%;
		bottom:0;
		width:66%;
		z-index:0;
	}
	.mainWrap.pc .maxAISpecSlideWrap .maxAISpecSlide .swiperImg.pc {
		display:block;
		position:relative;
		width:100%;
		z-index:1;
	}
	.mainWrap.pc .maxAISpecSlideWrap .slideBtn {
		position:absolute;
		bottom:-15%;
		width:11%;
		cursor:pointer;
	}
	.mainWrap.pc .maxAISpecSlideWrap .slideBtn.left {
		left:37%;
	}
	.mainWrap.pc .maxAISpecSlideWrap .slideBtn.right {
		left:52%;
	}
	.mainWrap.pc .maxAISpecSlideWrap .slideBtn img {
		display:block;
		width:100%;
	}
	.mainWrap.pc .mateIntroSlideWrap .slideBtn {
		top: 50%;
		width: 15px;
		cursor: pointer;
		z-index: 2;
	}
	.mainWrap.pc .mateIntroSlideWrap .slideBtn.left {
		left: 5%;
	}
	.mainWrap.pc .mateIntroSlideWrap .slideBtn.right {
		right: 5%;
	}
	.mainWrap.pc .mateIntroSlideWrap .slideBtn img {
		width:100%;
	}
	.mainWrap.pc .mateIntroSlideWrap .mateIntroSlide .swiperImg.pc{
		display:block;
		width:100%;
	}
	.mainWrap.pc .stickCareSlideWrap {
		display:none;
	}
	.mainWrap.pc .pageImg.pc.last {
		margin-bottom:100px;
	}
	.mainWrap.pc .crsSlideWrap {
		position: absolute;
		bottom: unset;
		top: 35%;
		left: 50%;
		transform: translateX(-50%);
		width:90%;
	}
	.mainWrap.pc .crsSlideWrap.spc {
		top:13%;
	}
	.mainWrap.pc .crsSlideWrap .swiper-container {
		padding:0 0 40px;
	}
	.mainWrap.pc .bottomBanner.pc {
		position:fixed;
		bottom:3%;
		left:50%;
		transform: translateX(-50%);
		cursor: pointer;
		z-index: 3;
	}
	.mainWrap.pc .bottomBanner.pc .bannerImg {
		width:600px;
	}

	/* 우측 배너 */
	.mainWrap.pc .rightBanner {
		display: block;
		position:fixed;
		top:150px;
		left:72%;
		transform:translateX(100%);
		z-index:2;
	}
	.mainWrap.pc .rightBanner .bannerImg {
		display:block;
		width:100%;
	}
	.mainWrap.pc .rightBanner .bannerBtn {
		position:absolute;
		left:4px;
		width:112px;
		height:33px;
		cursor:pointer;
	}
	.mainWrap.pc .rightBanner .bannerBtn.btn01 {
		top:136px;
	}
	.mainWrap.pc .rightBanner .bannerBtn.btn02 {
		top:170px;
	}
	.mainWrap.pc .rightBanner .bannerBtn.btn03 {
		top:203px;
	}
	.mainWrap.pc .rightBanner.event {
		top:420px;
		left:72.1%;
		cursor:pointer;
	}

}