@charset "utf-8";
*{ margin: 0; padding: 0; box-sizing:border-box; }
a, a:hover, a:focus { text-decoration: none; }
ul,ol { list-style: none; margin: 0; }
h1,h2,h3,h4,h5,h6 { margin: 0; line-height: 1; font-size: inherit; }
body{
	overflow:hidden;
}
img { image-rendering: -webkit-optimize-contrast; }

.wrap { 
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	min-width: 100%; min-height: 100%; width: auto; height: auto;
	background: #fff;
}
.mybookWrap { 
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-52%); width: 95%; max-width: 1190px;
}

/* pc그림자 */
.booklet .b-page-0:after { display: none; }
.booklet .b-page:nth-child(2n-1):after,
.booklet .b-page:nth-child(2n):after {
content: ''; position: absolute; top: 0; width: 30px; height: 100%; z-index: 9999;
background: rgb(0,0,0); opacity: 0.1;
}
.booklet .b-page:nth-child(2n-1):after { 
right: 0; background: linear-gradient(90deg, rgba(0,0,0,0) 0% , rgba(0,0,0,0) 50%, rgba(85,85,85,1) 100%);
}
.booklet .b-page:nth-child(2n):after { 
left: 0; background: linear-gradient(90deg, rgba(85,85,85,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100% );
}



#mybook img { 
	max-width: 100%;
}

/* 영상 */
#mybook .box { position: relative; }
#mybook .box .video { position: absolute; z-index: 300; overflow: hidden; }
#mybook .box .video > * { width: 100%; height: 100%; position: absolute; }

/* 2페이지 */
#mybook .box1 .video { left: 9.5%; top: 10.3%; width: 53.5%; padding-bottom:39.83%; }

/* 10페이지 */
#mybook .box2 .video { left: 9.5%; top: 10.3%; width: 59.83%; padding-bottom:44.67%; }

/* 링크 */
#mybook .linkBox { position: relative; }
#mybook .linkBox .link { position: absolute; z-index: 300; overflow: hidden; font-size: 12px; }

/* 1페이지 */
#mybook .linkBox .link1 { left: 69%; top: 72%; width: 19%; height: 7%; }
/* 16페이지 홈 */
#mybook .linkBox .link2 { left: 50%; transform:translateX(-50%); top: 29%; width: 21%; height: 3%; }
#mybook .linkBox .link3 { left: 28%; top: 86.5%; width: 30%; height: 2%; }
/* 16페이지 sns */
#mybook .linkBox .snsLink { top: 74.5%; }
#mybook .linkBox .link4 { left: 18%; width: 14%; height: 2.2%; }
#mybook .linkBox .link5 { left: 34.5%; width: 14%; height: 2.5%; }
#mybook .linkBox .link6 { left: 51%; width: 31%; height: 2.5%; }





/* 좌우 화살표 */
.booklet .b-arrow div { top: 50%; transform:translateY(-50%); }



/* 하단 컨트롤러 */
.bottomControler { 
	position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; background: #fff; padding: 0 10px; border-top: 1px solid #d2d2d2;
}
.bottomControler .innerWrap {
	display: flex; justify-content: space-between; align-items: center; height: inherit;
}
.bottomControler .innerWrap .logo { width: 13.53%; }
.bottomControler .innerWrap .logo a { display: block; }
.bottomControler .innerWrap .logo img { width: 100%; }
.bottomControler .innerWrap .inner { display:flex; }
.bottomControler .innerWrap .inner > li { width: 40px; text-align: center; margin-right: 5px; }
.bottomControler .innerWrap .inner > li:last-child { margin-right: 0; }
.bottomControler .innerWrap .inner > li > a { 
display: block; color: #000; border: 1px solid rgba(0,0,0,0.6); height: 40px; line-height: 38px; font-size: 16px;
}
.bottomControler .innerWrap .inner > li > a:hover { background: rgba(0,0,0,0.2); }
.bottomControler .innerWrap .inner > .b_prev,
.bottomControler .innerWrap .inner > .b_next {
	color: #000; border: 1px solid rgba(0,0,0,0.6); height: 40px; line-height: 38px; font-size: 16px;
}
.bottomControler .innerWrap .inner > .b_prev:hover,
.bottomControler .innerWrap .inner > .b_next:hover {
	background: rgba(0,0,0,0.2);
}
.bottomControler .innerWrap .inner > .nowPage ul { display: none; }
.bottomControler .innerWrap .inner > .b-menu { width: 50px; height: 40px; padding: 0; line-height: 38px; }
.bottomControler .innerWrap .inner > .b-menu .b-selector { margin-left: 0; height: inherit; line-height: inherit; float: none; color: #000; }
.bottomControler .innerWrap .inner > .b-menu .b-selector .b-current { 
	padding: 0; line-height: inherit; min-width: auto; height: inherit; background: #fff; color: inherit; border: 1px solid rgba(0,0,0,0.6);
}
.mob_nowPage, .mob_firstMove, .mob_lastMove { display: none; }




/* 줌컨트롤러 스타일 */
.zoomControl { position: absolute; left: 50%; top: 20px; transform:translateX(-50%); background: rgba(0,0,0,0.5); height: 40px; z-index: 1000; display: none; }
.zoomControl:hover { background: rgba(0,0,0,0.8); }
.zoomControl > .inner { 
-ms-display:flex; 
display:flex; 
}
.zoomControl > .inner > li > a { display: block; padding: 10px 20px; color: #fff; } 
.zoomControl > .inner > .b_prev,
.zoomControl > .inner > .b_next {
	padding: 10px 20px; color: #fff;
}



/* 모달 스타일 */
@media (min-width:768px) {
	.modal-dialog { margin: 150px auto; } 
}
/* sns */
.snsWrap { text-align: center; }
.snsWrap > a { margin: 0 10px; }
.snsWrap > a img { border-radius: 8px; }









/* 너비 */
@media (max-width:1450px) {
	.mybookWrap { max-width: 1010px; }
}
@media (max-width:1200px) {
	.mybookWrap { max-width: 850px; }
}

/* 너비 & 높이 ( 너비 991이상 & 높이 900~600 ) */
@media (min-width:991px) and (max-height:900px) {
	.mybookWrap { max-width: 1010px; }
}
@media (min-width:991px) and (max-height:800px) {
	.mybookWrap { max-width: 850px; }

}
@media (min-width:991px) and (max-height:700px) {
	.mybookWrap { max-width: 600px; }
}
@media (min-width:991px) and (max-height:600px) {
	.mybookWrap { max-width: 500px; }
}










/* 너비 */
@media (max-width:991px) {
	.mybookWrap { max-width: 600px; transform: translate(-50%,-55%); }
	#mybook { margin: 0 auto; }


	#mybook .p1:after, #mybook .p16:after {
	content: ''; position: absolute; top: 0; width: 30px; height: 100%; z-index: 9999;
	background: rgb(0,0,0); opacity: 0.1;
	}
	#mybook .p1:after {
	left: 0; background: linear-gradient(90deg, rgba(85,85,85,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100% );
	}
	#mybook .p16:after {
	right: 0; background: linear-gradient(90deg, rgba(0,0,0,0) 0% , rgba(0,0,0,0) 50%, rgba(85,85,85,1) 100%);
	}
	

	.bottomControler { height: 50px; }
	.bottomControler .innerWrap .inner > li { width: 30px; }
	.bottomControler .innerWrap .inner > li > a { height: 30px; line-height: 28px; font-size: 14px; }
	.bottomControler .innerWrap .logo { width: 18%; min-width: 180px; }
	.bottomControler .innerWrap .inner > .b_prev,
	.bottomControler .innerWrap .inner > .b_next { height: 30px; line-height: 28px; font-size: 14px; }
	.b-controls, .firstMove, .lastMove, .mode, .zoom, .nowPage { display: none; }
	.mob_firstMove, .mob_lastMove { display: block; }
	.mob_nowPage { display: block; width: 50px !important; height: 30px; line-height: 30px; background: #fff; border: 1px solid rgba(0,0,0,0.6); }
}
@media (max-width:768px) {
	.bottomControler { height: auto; padding: 5px 10px; }
	.bottomControler .innerWrap { justify-content: center; flex-direction: column; }
	.logo { margin-bottom: 10px; }
	.snsWrap > a img { width: 32px; }
}


/* 너비 & 높이 ( 너비 991이하 & 높이 900~650 )  */
@media (max-width:991px) and (max-height:900px) {
	.mybookWrap { max-width: 500px; }
}
@media (max-width:991px) and (max-height:800px) {
	.mybookWrap { max-width: 400px; }
}
@media (max-width:991px) and (max-height:650px) {
	.mybookWrap { max-width: 300px; }
}