/*
+----------------------------------------------------------------------+
| Copyright (c) 2010 - 2025 MAX AI @ WEAVERSBRAIN.Co.Ltd
+----------------------------------------------------------------------+
| 작업일 : 2024-10-28
| 파일설명 : MAX AI 사이트 앱 가이드 CSS
+----------------------------------------------------------------------+
| 작업자 : 최진영
+----------------------------------------------------------------------+
| 수정이력
| 20250919 돈버는영어 가이드 추가 by 최진영
+----------------------------------------------------------------------+ 
*/

@charset "utf-8";

/* 앱 가이드 공통 */
.appGuideWrap {
	background:#F5F5F5;
	padding-bottom:40px;
}
.appGuideWrap .innerBox {
	position:relative;
}
.appGuideWrap .pageImg {
	display:block;
	width:100%;
}
.appGuideWrap .pageNavBtnBox {
	position:relative;
	width:85%;
	margin:0 auto;
	padding:10px;
	background:#D6D6D6;
	border-radius: 100px;
	text-align: center;
}
.appGuideWrap .pageNavBtnBox .pageNavBtn.prev {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:35px;
	width:20px;
}
.appGuideWrap .pageNavBtnBox .pageNavBtn.home {
	width:35px;
}
.appGuideWrap .pageNavBtnBox .pageNavBtn.next {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:35px;
	width:20px;
}


/* 앱 가이드 - 홈 */
.appGuideWrap.home {
	height:100%;
}
.appGuideWrap.home .section .imgBtn {
	display:block;
	width:100%;
}
.appGuideWrap.home .section .bottom {
	padding:20px;
}
.appGuideWrap.home .section .bottom .imageBannerBox {
	margin-bottom:13px;
}
.appGuideWrap.home .section .bottom .imageBtnBox {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.appGuideWrap.home .section .bottom .imageBtnBox .imgBtn {
	display:block;
	width:49%;
}
.appGuideWrap.home .section .bottom .textBtnBox {
	margin-top:5px;
	text-align:center;
}
.appGuideWrap.home .section .bottom .textBtnBox .textLine {
	margin-bottom:5px;
}
.appGuideWrap.home .section .bottom .textBtnBox .textLine:last-child {
	margin-bottom:0;
}


/* 앱 가이드 - MATE */
.appGuideWrap.mate .pageSlideWrap {
	position: absolute;
	top: 46%;
	left:10%;
	width: 80%;
	padding-bottom:40px;
}
.appGuideWrap.mate .pageSlideWrap .pageSlide .swiperImg {
	display:block;
	width:100%;
}
.appGuideWrap.mate .pageSlideWrap .slideBtn {
	display:flex;
	justify-content: center;
	align-items:center;
	position:absolute;
	top:42%;
	width:30px;
	height:30px;
	z-index:2;
}
.appGuideWrap.mate .pageSlideWrap .slideBtn.left {
	left:-11%;
}
.appGuideWrap.mate .pageSlideWrap .slideBtn.right {
	right:-11%;
}
.appGuideWrap.mate .pageSlideWrap .slideBtn img {
	display:block;
	width:100%;
}
.appGuideWrap.mate .pageSlideWrap .swiper-pagination {
	bottom:10px;
	width:100%;
	text-align: center;
}
.appGuideWrap.mate .pageSlideWrap .swiper-pagination-bullet {
	margin:0 5px;
}
.appGuideWrap.mate .pageSlideWrap .swiper-pagination-bullet-active {
	background:#8935BD;
}
.appGuideWrap.mate .pageSlideWrap.slide02 {
	top:35%;
}


/* 활용 팁 */
.appGuideWrap.tip .contentsMovie {
	position:absolute;
	left:5%;
	width:90%;
}
.appGuideWrap.tip .contentsMovie.movie01 {
	top:23%;
}
.appGuideWrap.tip .contentsMovie.movie02 {
	top:49.3%;
}
.appGuideWrap.tip .contentsMovie.movie03 {
	top:75%;
}


/* 앱 가이드 - 클릭 10번으로 맥스AI 마스터 하기 */
.appGuideWrap.master {
	display:flex;
	flex-direction: column;
	justify-content: center;
	height:100%;
	padding-bottom:0;
	background:#FFF;
}
.appGuideWrap.master .pageSlideWrap {
	position: relative;
}
.appGuideWrap.master .pageSlideWrap .pageSlide .swiperImg {
	display:block;
	width:100%;
}
.appGuideWrap.master .pageSlideWrap .slideBtn {
	display:flex;
	justify-content: center;
	align-items:center;
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	width:30px;
	height:30px;
	z-index:2;
}
.appGuideWrap.master .pageSlideWrap .slideBtn.left {
	left:5%;
}
.appGuideWrap.master .pageSlideWrap .slideBtn.right {
	right:5%;
}
.appGuideWrap.master .pageSlideWrap .slideBtn img {
	display:block;
	width:100%;
}
.appGuideWrap.master .pageSlideWrap .swiper-pagination {
	bottom:-30px;
	width:100%;
	text-align: center;
}
.appGuideWrap.master .pageSlideWrap .swiper-pagination-bullet {
	margin:0 5px;
}
.appGuideWrap.master .pageSlideWrap .swiper-pagination-bullet-active {
	background:#8935BD;
}
.appGuideWrap.master .pageNavBtnBox {
	margin-top:10%;
}
.appGuideWrap.master .pageNavBtnBox .pageNavBtn.home {
	width:25px;
}

/* 커스텀 스크롤바 스타일 */
::-webkit-scrollbar {
	width: 6px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5);
  }
  
  ::-webkit-scrollbar-track {
	background: rgb(214, 214, 214);
  }
  
  ::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.5);
  }
  
  
/* 앱 가이드 - 꿀단지 미션 */
.appGuideWrap.mission {
	position: relative;
	font-family: 'Pretendard-Medium';
	padding-bottom: 0;
}

.appGuideWrap.mission .menuWrap .menuBtn {
	position: absolute;
	top: 16px;
	right: 18px;
	z-index: 31;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 5px;
	background: #fff;
	color: #0f8c68;
	text-align: center;
	font-size: 15px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%;
}
.appGuideWrap.mission .menuWrap.active .menuBtn {
	background: #0f8c68;
	color: #fff;
}

.appGuideWrap.mission .menuBtn .close-text {
	display: none;
}
.appGuideWrap.mission .menuWrap.active .menuBtn .menu-text {
	display: none;
}

.appGuideWrap.mission .menuWrap.active .menuBtn .close-text {
	display: inline;
}

.appGuideWrap.mission .menuList {
	display: none;
}
.appGuideWrap.mission .menuWrap.active .menuList {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 30;
	padding: 27px;
	overflow-y: auto;
}
.appGuideWrap.mission .menuWrap.active .menuList ul {
	display: flex;
	flex-direction: column;
	gap: 36px;
	margin-top: 80px;
}
.appGuideWrap.mission .menuWrap.active .menuList ul li {
	color: #fff;
	text-align: right;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%;
}

.appGuideWrap.mission .menuWrap.active .menuList ul li > div {
	display: inline-block;
}

.appGuideWrap.mission .swiper-pagination-progressbar {
	top: 80px;
	left: 28px;
	right: 28px;
	height: 10px;
	border-radius: 100px;
	overflow: hidden;
	background: #fff;
}

.appGuideWrap.mission
.swiper-pagination-progressbar
.swiper-pagination-progressbar-fill {
	background: #34b792;
	border-radius: 100px;
}

.appGuideWrap.mission .pageSlideWrap.slide-0 .slidePagenationWrap,
.appGuideWrap.mission .pageSlideWrap.slide-14 .slidePagenationWrap,
.appGuideWrap.mission .pageSlideWrap.slide-0 .swiper-pagination-progressbar,
.appGuideWrap.mission .pageSlideWrap.slide-14 .swiper-pagination-progressbar,
.appGuideWrap.mission .pageSlideWrap.slide-0 .slideBtnBox .slideBtn.type2.prev,
.appGuideWrap.mission .pageSlideWrap.slide-14 .slideBtnBox .slideBtn.type2.next {
	display: none;
}
.appGuideWrap.mission .pageSlideWrap.slide-14 + .btnBox .btn.homeBtn {
	display: none;
}
.appGuideWrap.mission .pageSlideWrap:not(.slide-14) + .btnBox .btn.startBtn {
	display: none;
}

.appGuideWrap.mission .slidePagenationWrap {
	position: absolute;
	top: 22px;
	left: 27px;
	z-index: 20;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
}
.appGuideWrap.mission .slidePagenationWrap .slidePageNum {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	color: #0f8c68;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
}
.appGuideWrap.mission .slidePagenationWrap .slideBtn {
	width: 10px;
}
.appGuideWrap.mission .slidePagenationWrap .slideBtn img {
	width: 100%;
}


.appGuideWrap.mission .slideBtnBox {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index: 2;
}
.appGuideWrap.mission .slideBtnBox .slideBtn.type2 {
	position: absolute;
	top: 0;
	width:50%;
	height:100%;
}
.appGuideWrap.mission .slideBtnBox .slideBtn.type2.prev {
	left: 0;
}
.appGuideWrap.mission .slideBtnBox .slideBtn.type2.next {
	right: 0;
}
.appGuideWrap.mission .slideBtnBox .slideBtn.type2 img {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display:block;
	width:15px;
	filter: invert(1) grayscale(1) brightness(0);
}
.appGuideWrap.mission .slideBtnBox .slideBtn.type2.next img {
	right:10px;
}
.appGuideWrap.mission .slideBtnBox .slideBtn.type2.prev img {
	left:10px;
}

.appGuideWrap.mission .swiper-slide:first-child {
	background: linear-gradient(to bottom, #37b993 50%, #c2d970 50%);
}
.appGuideWrap.mission .swiper-slide:last-child {
	background: linear-gradient(to bottom, #ffb155 50%, #c2d970 50%);
}

.appGuideWrap.mission .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to bottom, #faffaa, #dbed72);
	overflow-y: auto;
}

.appGuideWrap.mission .swiper-slide img {
	max-width: 100%;
}

.appGuideWrap.mission .btnBox {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	z-index: 20;
}
.appGuideWrap.mission .btnBox .btn {
	display: flex;
	max-width: 100%;
	padding: 16px 0;
	justify-content: center;
	align-items: center;
	border-radius: 15px;
	background: #1c324b;
	color: #fff;
	text-align: center;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.72px;
	font-family: 'Pretendard-Medium';
}
.appGuideWrap.mission .btnBox .btn.startBtn {
	background: #db2d15;
}
.appGuideWrap.mission .btnBox .btn.homeBtn {
	background: #1c324b;
}

@media only screen and (min-width : 480px) {

	.appGuideWrap .pageNavBtnBox .pageNavBtn.home,
	.appGuideWrap .pageNavBtnBox .pageNavBtn.prev,
	.appGuideWrap .pageNavBtnBox .pageNavBtn.next,
	.appGuideWrap.home .section .top .imgBtn,
	.appGuideWrap.home .section .bottom .imageBannerBox .imgBtn,
	.appGuideWrap.home .section .bottom .imageBtnBox .imgBtn,
	.appGuideWrap.home .section .bottom .textBtnBox .textBtn,
	.appGuideWrap.master .pageSlideWrap .slideBtn,
	.appGuideWrap.mission .btnBox .btn,
	.appGuideWrap.mission .slidePagenationWrap .slideBtn,
	.appGuideWrap.mission .slideBtnBox .slideBtn.type2,
	.appGuideWrap.mission .menuWrap .menuBtn,
	.appGuideWrap.mission .menuWrap.active .menuList ul li > div {
		cursor:pointer;
	}

	.appGuideWrap .pageNavBtnBox .pageNavBtn.home,
	.appGuideWrap .pageNavBtnBox .pageNavBtn.prev,
	.appGuideWrap .pageNavBtnBox .pageNavBtn.next,
	.appGuideWrap.home .section .top .imgBtn,
	.appGuideWrap.home .section .bottom .imageBannerBox .imgBtn,
	.appGuideWrap.home .section .bottom .imageBtnBox .imgBtn,
	.appGuideWrap.home .section .bottom .textBtnBox .textBtn,
	.appGuideWrap.master .pageSlideWrap .slideBtn,
	.appGuideWrap.mission .btnBox .btn,
	.appGuideWrap.mission .slidePagenationWrap .slideBtn,
	.appGuideWrap.mission .slideBtnBox .slideBtn.type2,
	.appGuideWrap.mission .menuWrap.active .menuList ul li > div  {
		transition:0.3s all;
	}
	.appGuideWrap.mission .menuWrap .menuBtn {
		transition:0.3s opacity;
	}

	.appGuideWrap.home .section .bottom .imageBannerBox .imgBtn:hover,
	.appGuideWrap.home .section .bottom .imageBtnBox .imgBtn:hover {
		transform:translateY(-5px);
	}

	.appGuideWrap .pageNavBtnBox .pageNavBtn.prev:hover,
	.appGuideWrap .pageNavBtnBox .pageNavBtn.next:hover,
	.appGuideWrap .pageNavBtnBox .pageNavBtn.home:hover,
	.appGuideWrap.home .section .top .imgBtn:hover,
	.appGuideWrap.home .section .bottom .textBtnBox .textBtn:hover,
	.appGuideWrap.master .pageSlideWrap .slideBtn:hover,
	.appGuideWrap.mission .btnBox .btn:hover,
	.appGuideWrap.mission .slidePagenationWrap .slideBtn:hover,
	.appGuideWrap.mission .slideBtnBox .slideBtn.type2:hover img,
	.appGuideWrap.mission .menuWrap .menuBtn:hover,
	.appGuideWrap.mission .menuWrap.active .menuList ul li > div:hover {
		opacity:0.7;
	}

	.appGuideWrap {
		width:480px;
		margin:0 auto;
	}

}