@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
 =================================**/


/**================================
 * 사용자 셋팅 디자인 영역
 =================================**/




.one{width: 20px; height: 20px; background-color: #49250b; display: inline-block; border-radius: 50px; margin-top: 25px; float: left;}
.two{float: left; width: 865px; margin-left: 10px;}





/**================================
 * 제목
 =================================**/
 .book{
	font-family:'MaruBuri';
	font-size:46px;
	line-height:75px;
	font-weight:bold;
}

/**================================
 * 제목
 =================================**/

[data-subject]{
	position:relative;
	display:inline-block;
	font-size:60px;
	font-weight:900;
	line-height:85px;
	color:#4d112a;
}
	[data-subject]:before{
		content:'';
		z-index:1;
		left:0px; bottom:2px;
		display:inline-block;
		position:absolute;
		width:100%; height:20px;
		border-radius:100px;
		background-color:#e3dadf;
	}
	[data-subject]>p{
		position:relative;
		z-index:2;
	}
	
	[data-subject="테두리"]{
		padding:10px 40px;
		font-size:50px;
	}
	[data-subject="테두리"]:before{
		border-radius:0px;
		background-color:transparent;
		width:100%; height:100%;
		background-image:url('../res/bgs/추천서.png');
		background-size:100% 100%;
	}
/**================================
 * 제목
 =================================**/
[data-title="1"],
[data-title="2"],
[data-title="3"],
[data-title="4"],
[data-title="5"],
[data-title="6"],
[data-title="7"],
[data-title="8"],
[data-title="9"]{
	position:relative;
	font-size:40px;
	line-height:54px;
	text-align:justify;
}
	[data-title="1"]:before,
	[data-title="2"]:before,
	[data-title="3"]:before,
	[data-title="4"]:before,
	[data-title="5"]:before,
	[data-title="6"]:before,
	[data-title="7"]:before,
	[data-title="8"]:before,
	[data-title="9"]:before{
		position:absolute;
		left:0px; top:6px;
		display:inline-block;
		content:'';
		width:45px; height:45px;
		background-size:100% 100%;
	}
		[data-title="1"]:before{background-image:url('../res/icons/no-1.png');}
		[data-title="2"]:before{background-image:url('../res/icons/no-2.png');}
		[data-title="3"]:before{background-image:url('../res/icons/no-3.png');}
		[data-title="4"]:before{background-image:url('../res/icons/no-4.png');}
		[data-title="5"]:before{background-image:url('../res/icons/no-5.png');}
		[data-title="6"]:before{background-image:url('../res/icons/no-6.png');}
		[data-title="7"]:before{background-image:url('../res/icons/no-7.png');}
		[data-title="8"]:before{background-image:url('../res/icons/no-8.png');}
		[data-title="9"]:before{background-image:url('../res/icons/no-9.png');}
	[data-title="1"]>p,
	[data-title="2"]>p,
	[data-title="3"]>p,
	[data-title="4"]>p,
	[data-title="5"]>p,
	[data-title="6"]>p,
	[data-title="7"]>p,
	[data-title="8"]>p,
	[data-title="9"]>p{
		margin-left:55px;
	}

/**================================
 * 링크
 =================================**/
[data-skill="link"]{
	cursor:pointer;
	position:relative;
}
[data-skill="link"][data-mode="web"]{
	text-align:justify;
	word-break:break-all;
}
	[data-skill="link"][data-mode="web"]:before{
		content:'';
		width:100px; height:104px;
		background-image:url('../res/icons/와이파이.png');
		position:absolute;
		left:0px; top:0px;
	}
	[data-skill="link"][data-mode="web"]>*{
		margin-left:110px;
	}
	[data-skill="link"][data-mode="web"] .url{
		font-size:40px; color:#8b0909;
		line-height:50px;
	}
	[data-skill="link"][data-mode="web"] .name{
		font-size:40px; color:#49250b;
		line-height:50px;
	}
/**================================
 * 박스
 =================================**/	
[data-box]>img{
	width:100%;
}
[data-box] .title{
	font-size:60px;
	line-height:80px;
	font-weight:900;
	margin-bottom:30px;
	color:#500202;
}
[data-box=""]{
	background-color:#f2eee5;
	padding:80px;
	line-height:75px;
	color:#1a1c1b;
}
[data-box="round"]{
	background-color:#f2eee5;
	padding:80px;
	line-height:75px;
	color:#1a1c1b;
	border-radius:30px;
}
	[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:#f2eee5;
		padding:80px;
		width:1020px;
		margin-left:30px;
		border-radius:50px;
		color:#1a1c1b;
	}
/**================================
 * 선택하기
 =================================**/
choice[data-type="circle"] choiceItem{
	position:absolute;
	border:10px solid transparent;
	border-radius:500px;
	width:100px; height:100px;
}
	choice[data-type="circle"] choiceItem.on{
		border-color:#f60;
	}
/**================================
 * 팝업
 =================================**/

popup[data-type="zoom"]{
	width:70px; height:70px;
	background-image:url('../res/btns/확대.png');
	background-size: 200% 100%;
}
	popup[data-type="zoom"]:hover{
		background-position-x:100%;
	}
	popup[data-type="zoom"]>p{
		font-size:0px;
	}
popupView[data-type="zoom"]{
	background-color:#fff;
}
	popupView[data-type="zoom"]>.popup-content{
		padding:90px 50px 50px 50px;
	}
	popupView[data-type="zoom"] [data-popup-btn="close"]{
		background-image: url('../res/btns/닫기-팝업.png');
	}
	[data-title=""]{
		font-size:70px;
		font-weight:900;
		line-height:100px;
	}
	
	

popup[data-mode="image"], 
popup[data-mode="zoom"]{
	border:0px;
	border-radius:0px;
	overflow:visible;
}
popup.title{
	margin-top:95px;
}
popup>img{
	border-radius:30px;
}
popup>p{
	font-size:34px;
	line-height:64px;
	margin-top:5px;
	color:#444444;
	letter-spacing:-1px;
}
	popup>p.title{
		font-size:38px;
		line-height:70px;
	
		margin-top:0px;
		display:inline-block;
		position:absolute;
		left:0px; top:-95px;
		background-color:#dddddd;
		padding:2px 30px 2px 30px;
		border-radius:100px;
		color:#000000;
	}
	
popup[data-mode="image"]>div.popup-icon,
popup[data-mode="zoom"]>div.popup-icon{
	width:70px; height:70px;
	background-image:url('../res/btns/확대.png');
}	

popup[data-type="추천서"]{
	width:450px; height:95px;
	background-size:200% 100%;
	background-image:url('../res/btns/추천서.png');
}
	popup[data-type="추천서"]:hover{
		background-position-x:100%;
	}
	popup[data-type="추천서"]>p{
		font-size:0px;
	}
	
popupView{
	background-color:rgba(0,0,0,0.8);
}
popupView[data-type="추천서"]{
	background-color:#fff;
}
popupView [data-popup-btn="close"]{
    position: absolute;
    right: 25px;
    top: 20px;
    z-index: 100;
    width: 60px;
    height: 60px;
    background-image: url('../res/btns/닫기.png');
}
/**================================
 * 공통요소
 =================================**/
/**
 * 	스크롤 생성을 위한 컨테이너
 */
#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;
}



/**================================
 * 공통요소
 =================================**/
.head{
	width:100%; height:140px;
	background-color:#7c7ebc;
	background-image:url('../res/bgs/상단.png');
}
	/* .head btn[data-type="close"]{
		position:absolute;
		right:25px; top:20px;
		z-index:100;
		width:60px; height:60px;
		background-image:url('../res/btns/닫기.png');
	} */
	
.body{
	position:absolute;
	left:0px; bottom:0px;
	width:100%; height:1825px;
	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:52px;
		font-weight:bold;
		line-height:80px;
		height:80px;
		margin:0px 20px;
		color:#a5a5a5;
	}
		.body slideNavi .slide-page .current{
			margin-right:15px;
			color:#454545;
		}
		.body slideNavi .slide-page .max{
			margin-left:15px;
		}
		
	.body slideNavi>btn[data-type]{
		width:80px; height:81px;
	}
		.body slideNavi>btn[data-type="prev"]{
		    background-image: url('../res/btns/이전.png');
		}
		.body slideNavi>btn[data-type="prev"].disabled{
			background-image: url('../res/btns/이전-d.png');
			background-size:100% 100%;
		    opacity:1;
		}
		.body slideNavi>btn[data-type="next"]{
		    background-image: url('../res/btns/다음.png');
		}
		.body slideNavi>btn[data-type="next"].disabled{
			background-image: url('../res/btns/다음-d.png');
			background-size:100% 100%;
		    opacity:1;
		}
slideItem{
	padding-top:50px;
}