@charset "UTF-8";

@import url(./iboox/css/module.reset.css);
@import url(./iboox/css/module.skill.css);


/**================================
 * @date: 2023-11-13
 * @description: 객체 함수 정의
 * @copyright: 김동근
 * @version:1.0
 =================================**/







/**================================
 * 공통요소
 =================================**/



 choiceItem[data-type="map-a"]{
	border:5px solid #fc0;
	background-color:#fff;
	padding:20px;
	border-radius:30px;
	text-align:center;
	color:#000;
	overflow: hidden;
	width: 300px;
}	
	choiceItem[data-type="map-a"]:before{
		line-height:0px;
		content:'';
		display:inline-block;
		width:95px; height:20px;
		margin-top:5px; padding:0px;
		/* background-image:url('../res/icons/화살표-g.png'); */
		background-color: #ACB5DC;
		float: left;
		
	}
	choiceItem[data-type="map-a"]>p{
		font-size:25px;
		font-weight:900;
		line-height:32px;
		text-align:center;
		float: left;
		margin-left: 15px;
	}
	choiceItem[data-type="map-a"].on{
		background-color:#ffefad;
		border:5px solid #fc0;
	}
	choiceItem[data-type="map-a"].on p{
		color: #bf590d;
	}

choiceItem[data-type="map-b"]{
	border:5px solid #fc0;
	background-color:#fff;
	padding:20px;
	border-radius:30px;
	margin-top:10px;
	text-align:center;
	overflow: hidden;
	width: 300px;
}
	choiceItem[data-type="map-b"]:before{
		line-height:0px;
		content:'';
		display:inline-block;
		width:95px; height:20px;
		/* background-image:url('../res/icons/화살표-r.png'); */
		position:relative;
		margin-top:5px; padding:0px;
		background-color: #CFE07B;
		float: left;
	}
	choiceItem[data-type="map-b"]>p{
		font-size:25px;
		font-weight:900;
		line-height:32px;
		color:#000;
		text-align:center;
		float: left;
		margin-left: 15px;
	}
	choiceItem[data-type="map-b"].on{
		background-color:#ffefad;
		border:5px solid #fc0;
	}
	choiceItem[data-type="map-b"].on p{
		color: #bf590d;
	}
choiceItem[data-type="map-c"]{
	border:5px solid #fc0;
	background-color:#fff;
	padding:20px;
	border-radius:30px;
	margin-top:10px;
	text-align:center;
	overflow: hidden;
	width: 300px;
}
	choiceItem[data-type="map-c"]:before{
		line-height:0px;
		content:'';
		display:inline-block;
		width:95px; height:20px;
		/* background-image:url('../res/icons/화살표-r.png'); */
		position:relative;
		margin-top:5px; padding:0px;
		background-color: #A2D6D0;
		float: left;
	}
	choiceItem[data-type="map-c"]>p{
		font-size:25px;
		font-weight:900;
		line-height:32px;
		color:#000;
		text-align:center;
		float: left;
		margin-left: 15px;
	}
	choiceItem[data-type="map-c"].on{
		background-color:#ffefad;
		border:5px solid #fc0;
	}
	choiceItem[data-type="map-c"].on p{
		color: #bf590d;
	}
choiceItem[data-type="map-d"]{
	border:5px solid #fc0;
	background-color:#fff;
	padding:20px;
	border-radius:30px;
	margin-top:10px;
	text-align:center;
	overflow: hidden;
	width: 300px;
}
	choiceItem[data-type="map-d"] img{
		float: left;
		margin-top: -7px;
	}
	/* choiceItem[data-type="map-d"]:before{
		line-height:0px;
		content:'';
		display:inline-block;
		width:70px; height:55px;

		background-size: auto;
		position:relative;
		margin-top:5px; padding:0px;
		float: left;
	} */
	choiceItem[data-type="map-d"]>p{
		font-size:25px;
		font-weight:900;
		line-height:32px;
		color:#000;
		text-align:center;
		float: left;
		margin-left: 10px;
	}
	choiceItem[data-type="map-d"].on{
		background-color:#ffefad;
		border:5px solid #fc0;
	}
	choiceItem[data-type="map-d"].on p{
		color: #bf590d;
	}

/**================================
 * 박스
 =================================**/	
[data-box]{
	font-size:45px;
	line-height:60px;
}
[data-box]>img{
	width:100%;
}
[data-box] .title{
	font-size:60px;
	line-height:80px;
	font-weight:900;
	margin-bottom:30px;
}
[data-box=""]{
	background-color:#e8e8e8;
	padding:80px;
	line-height:75px;
	color:#49250b;
}
	[data-box="left"]{
		background-color:#fef6d3;
		padding:80px;
		width:1055px;
		border-radius:0px 50px 50px 0px;
		color:#49250b;
	}
	[data-box="right"]{
		background-color:#ffdfcb;
		padding:80px;
		width:1055px;
		margin-left:25px;
		border-radius:50px 0px 0px 50px;
	}
	[data-box="in"]{
		background-color:#e8e8e8;
		padding:80px;
		width:94%;
		margin-left:3%;
		border-radius:30px;
		color:#49250b;
	}
/**================================
 * 선택하기
 =================================**/

 choiceItem[data-type="hand-box"]{
	position:absolute;
	display:inline-block;
	padding:7px 20px;
	border:4px solid #fc0;
	border-radius:100px;
	background-color:#fef6d3;
	box-shadow:3px 3px 3px rgba(0,0,0,0.2);
}
	choiceItem[data-type="hand-box"]:hover{
		background-color:#ffd200;
		border-color:#f89f67;
		color:#fff;
	}
	choiceItem[data-type="hand-box"]:before{
		content:'';
		display:inline-block;
		width:50px; height:50px;
		background-image:url('../res/btns/손가락.png');
		background-size:200% 100%;
		float:left;
	}
	choiceItem[data-type="hand-box"]>p{
		display:inline-block;
		font-size:34px; 
		font-weight:bold;
		line-height:50px;
		float:left;
		margin-left:15px;
	}	
	

choiceItem[data-type="hand"]{
	position:absolute;
	font-size:0px;
	display:inline-block;
	width:62px; height:62px;
	background-image:url('../res/btns/손가락.png');
	background-size:200% 100%;
}
	choiceItem[data-type="hand"]:hover{
		background-position-x:100%;
	}
choiceItem[data-type="map-green"]{
	border:5px solid #fc0;
	background-color:#fff;
	padding:20px;
	border-radius:30px;
	text-align:center;
	color:#000;
	overflow: hidden;
}	
	choiceItem[data-type="map-green"]:before{
		line-height:0px;
		content:'';
		display:inline-block;
		width:95px; height:20px;
		margin-top:15px; padding:0px;
		/* background-image:url('../res/icons/화살표-g.png'); */
		background-color: green;
		float: left;
		
	}
	choiceItem[data-type="map-green"]>p{
		font-size:25px;
		font-weight:900;
		line-height:32px;
		text-align:center;
		float: left;
		margin-left: 15px;
	}
	choiceItem[data-type="map-green"].on{
		background-color:#ffefad;
		border:5px solid #fc0;
	}
	choiceItem[data-type="map-green"].on p{
		color: #bf590d;
	}

choiceItem[data-type="map-rad"]{
	border:5px solid #fc0;
	background-color:#fff;
	padding:20px;
	border-radius:30px;
	margin-top:10px;
	text-align:center;
	overflow: hidden;
}
	choiceItem[data-type="map-rad"]:before{
		line-height:0px;
		content:'';
		display:inline-block;
		width:95px; height:20px;
		/* background-image:url('../res/icons/화살표-r.png'); */
		position:relative;
		margin-top:15px; padding:0px;
		background-color: red;
		float: left;
	}
	choiceItem[data-type="map-rad"]>p{
		font-size:25px;
		font-weight:900;
		line-height:32px;
		color:#000;
		text-align:center;
		float: left;
		margin-left: 15px;
	}
	choiceItem[data-type="map-rad"].on{
		background-color:#ffefad;
		border:5px solid #fc0;
	}
	choiceItem[data-type="map-rad"].on p{
		color: #bf590d;
	}
/**================================
 * 팝업 슬라이드
 =================================**/
popupView slide{
	width:100%; height:100%;
}
popupView slide>btn[data-type]{
	width:82px; height:80px;
}
	popupView slide>btn[data-type="prev"]{
		left:10px;
		background-image:url('../res/btns/이전.png');
	}
	popupView slide>btn[data-type="prev"].disabled{
		background-image:url('../res/btns/이전-d.png');
		background-size:100% 100%;
		opacity:1;
	}
	popupView slide>btn[data-type="next"]{
		right:10px;
		background-image:url('../res/btns/다음.png');
	}
	popupView slide>btn[data-type="next"].disabled{
		background-image:url('../res/btns/다음-d.png');
		background-size:100% 100%;
		opacity:1;
	}
	
	popupView slide slideNavi{
		display:none;
	}


/**================================
 * 팝업 핸드-이미지
 =================================**/
popup[data-type="explain"]{
	position:relative;
}
	popup[data-type="explain"]:after{
		position:absolute;
		content:'';
		display:inline-block;
		width:62px; height:62px;
		background-image:url('../res/btns/손가락.png');
		background-size:200% 100%;
		right:15px; top:15px;
	}
		popup[data-type="explain"]:hover:after{
			background-position-x:100%;
		}
/*=================================*/	
popupView[data-type="explain"]{
	background-color:#fff;
}
	popupView[data-type="explain"] [data-popup-btn="close"]{
		position: absolute;
	    right: 25px;
	    top: 19px;
	    z-index: 100;
	    width: 60px;
	    height: 59px;
	    background-image: url('../res/btns/닫기-팝업.png');
	}
	popupView[data-type="explain"] .popup-content{
		position:relative;
		width:1000px; height:auto;
		margin-left:40px; margin-top:60px;
	}
		popupView[data-type="explain"] .popup-content>img{
			width:100%;
		}
	popupView[data-type="explain"]>[data-title]{
		font-family:'CookieRun';
		font-size:80px;
		font-weight:900;
		line-height:100px;
		text-align:center;
		margin-top:70px;
	}
	popupView[data-type="explain"]>[data-box]{
		margin-top:40px;
	}
	
/**================================
 * 팝업 줌
 =================================**/

popup[data-type="img-zoom"]{
	position:relative;
	width:80px; height:80px;
	background-image:url('../res/btns/확대.png');
	background-size:200% 100%;
}
	popup[data-type="img-zoom"]:hover{
		background-position-x:100%;
	}
/*=================================*/	
popupView[data-type="img-zoom"]{
	background-color:#fff;
}
	popupView[data-type="img-zoom"] [data-popup-btn="close"]{
		position: absolute;
	    right: 25px;
	    top: 19px;
	    z-index: 100;
	    width: 60px;
	    height: 59px;
	    background-image: url('../res/btns/닫기-팝업.png');
	}
	popupView[data-type="img-zoom"] .popup-content{
		position:absolute;
		width:100%; height:100%;
	}
	popupView[data-type="img-zoom"] [data-title]{
		font-family:'CookieRun';
		font-size:80px;
		font-weight:900;
		line-height:100px;
	}
	popupView[data-type="img-zoom"] [data-note]{
		margin-top:30px;
		font-size:60px;
		font-weight:900;
		line-height:90px;
		letter-spacing: -2px;
	}
	
/**================================
 * 팝업 핸드-이미지
 =================================**/
popup[data-type="img-hand"]{
	position:relative;
}
	popup[data-type="img-hand"]:after{
		position:absolute;
		content:'';
		display:inline-block;
		width:62px; height:62px;
		background-image:url('../res/btns/손가락.png');
		background-size:200% 100%;
		right:15px; top:15px;
	}
		popup[data-type="img-hand"]:hover:after{
			background-position-x:100%;
		}
/*=================================*/	
popupView[data-type="img-hand"]{
	position:relative;
	background-color:#fff;
}
	popupView[data-type="img-hand"] [data-popup-btn="close"]{
		position: absolute;
	    right: 25px;
	    top: 19px;
	    z-index: 100;
	    width: 60px;
	    height: 59px;
	    background-image: url('../res/btns/닫기-팝업.png');
	}
	popupView[data-type="img-hand"] .popup-content{
		position:absolute;
		width:100%; height:100%;
	}
	popupView[data-type="img-hand"] [data-title]{
		font-family:'CookieRun';
		font-size:80px;
		font-weight:900;
		line-height:100px;
	}
	popupView[data-type="img-hand"] [data-note]{
		margin-top:30px;
		font-size:60px;
		font-weight:900;
		line-height:90px;
		letter-spacing: -2px;
	}
	
/**================================
 * 팝업 핸드-지도
 =================================**/
popup[data-type="map-hand"]{
	font-size:0px;
	width:62px; height:62px;
	background-image:url('../res/btns/손가락.png');
	background-size:200% 100%;
}	
	popup[data-type="map-hand"]:hover{
		background-position-x:100%;
	}
/*=================================*/	

@keyframes movePing{
	0%{
		top:0px;
	}
	50%{
		top:-10px;
	}
	100%{
		top:0px;
	}
}
popup[data-type="map-ping"]{
	text-align:center;
	position:relative;
}
	popup[data-type="map-ping"]:before{
		content:'';
		position:relative;
		display:inline-block;
		width:85px; height:105px;
		background-image:url('../res/icons/map-ping.png');
		background-size:100% 100%;
		text-align:center;
		
		animation-name: movePing;
  		animation-duration: 1s;
  		animation-iteration-count: infinite;
	}
	popup[data-type="map-ping"]>p{
		display:block;
		font-size:24px;
		line-height:30px;
		position:relative;
		top:-5px;
		text-shadow:3px 3px 3px #fff, -3px 3px 3px #fff, 3px -3px 3px #fff, -3px -3px 3px #fff;
	}
	
/**================================
 * 팝업 텍스트-지도
 =================================**/
popup[data-type="map-text"]{
	border:5px solid #ffd200;
	background-color:#fff6cc;
	color:#bf590d;
	font-size:30px;
	line-height:36px;
	border-radius: 100px;
	padding:7px 15px 5px 15px;
	text-align:center;
}

/**================================
 * 팝업 디자인
 =================================**/
#view>popupView[data-type="map-text"],
#view>popupView[data-type="map-ping"],
#view>popupView[data-type="map-hand"]{
	background-color:transparent;
}
	#view>popupView[data-type="map-text"] [data-popup-btn="close"],
	#view>popupView[data-type="map-ping"] [data-popup-btn="close"],
	#view>popupView[data-type="map-hand"] [data-popup-btn="close"]{
		right:25px; top:20px;
	}
	#view>popupView[data-type="map-text"] .popup-content,
	#view>popupView[data-type="map-ping"] .popup-content,
	#view>popupView[data-type="map-hand"] .popup-content{
		width:100%; height:984px;
		position:absolute;
		left:0px; top:96px;
		background-color:#fff;
		border-radius:50px 50px 0px 0px;
	}
	#view>popupView[data-type="map-text"] [data-title],
	#view>popupView[data-type="map-ping"] [data-title],
	#view>popupView[data-type="map-hand"] [data-title]{
		font-family:'CookieRun';
		font-size:80px;
		font-weight:900;
		line-height:100px;
	}
	#view>popupView[data-type="map-text"] [data-note],
	#view>popupView[data-type="map-ping"] [data-note],
	#view>popupView[data-type="map-hand"] [data-note]{
		margin-top:30px;
		font-size:60px;
		font-weight:900;
		line-height:90px;
		letter-spacing: -2px;
	}
popupView[data-type="map-text"],
popupView[data-type="map-ping"],
popupView[data-type="map-hand"]{
	background-color:#fff;
}
	popupView[data-type="map-text"] [data-popup-btn="close"],
	popupView[data-type="map-ping"] [data-popup-btn="close"],
	popupView[data-type="map-hand"] [data-popup-btn="close"]{
		position:absolute;
	    right:25px;
	    top:19px;
	    z-index:100;
	    width:60px;
	    height:59px;
	    background-image: url('../res/btns/닫기-팝업.png');
		right:10px; top:10px;
	}
	popupView[data-type="map-text"] .popup-content,
	popupView[data-type="map-ping"] .popup-content,
	popupView[data-type="map-hand"] .popup-content{
		width:100%; height:100%;
	}
	popupView[data-type="map-text"] [data-title],
	popupView[data-type="map-ping"] [data-title],
	popupView[data-type="map-hand"] [data-title]{
		font-family:'CookieRun';
		font-size:80px;
		font-weight:900;
		line-height:100px;
	}
	popupView[data-type="map-text"] [data-note],
	popupView[data-type="map-ping"] [data-note],
	popupView[data-type="map-hand"] [data-note]{
		margin-top:30px;
		font-size:60px;
		font-weight:900;
		line-height:90px;
		letter-spacing: -2px;
	}
		
/**================================
 * 공통요소
 =================================**/
/**
 * 	스크롤 생성을 위한 컨테이너
 */
#container{
	position:relative;
	width:100%; height:100%;
	overflow:auto;
}
/**
 * 	스크롤 내부 컨텐츠 영역 (스크롤바 제외를 위해 필요)
 */
#content{
	position:relative;
	width:100%; height:100%;
}
/**
 * 	콘텐츠 뷰
 */
#view{
	overflow:hidden;
	position:relative;
	width:1080px; height:1920px;
	background-size:100% 100%;
}


/**================================
 * 공통요소
 =================================**/
.head{
	position:absolute;
	width:100%; height:140px;
	background-image:url('../res/bgs/head-top.png');
}
	/* .head btn[data-type="close"]{
		position:absolute;
		right:25px; top:19px;
		z-index:100;
		width:60px; height:59px;
		background-image:url('../res/btns/닫기.png');
	} */
.body{
	position:absolute;
	left:0px; bottom:0px;
	width:100%; height:1827px;
	background-color:#ffffff;
	border-radius:50px 50px 0px 0px;
	
	font-size:46px;
	font-weight:bold;
	text-align:justify;
	line-height:70px;
	letter-spacing:-1px;
	
	overflow:hidden;
}
.body slide{
	width:100%; height:100%;
}
.body slideNavi{
	height:80px;
	bottom:20px !important;
}
	.body slideNavi .slide-page{
		font-size:64px;
		font-weight:bold;
		line-height:80px;
		height:80px;
		margin:0px 20px;
	}
		.body slideNavi .slide-page .current{
			margin-right:15px;
		}
		.body slideNavi .slide-page .max{
			margin-left:15px;
		}
		
	.body slideNavi>btn[data-type]{
		width:82px; height:80px;
	}
		.body slideNavi>btn[data-type="prev"]{
		    background-image: url('../res/btns/이전.png');
		}
		.body slideNavi>btn[data-type="next"]{
		    background-image: url('../res/btns/다음.png');
		}