@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);



*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}


.js body {
	overflow: hidden;
}

a {
	color: #555;
	text-decoration: none;
	outline: none;
}

a:hover {
	color: #000;
}

.container_book,
.bb-custom-wrapper,
.bb-bookblock {
	width: 100%;
	height: 100%;
    
}

.slideRight {
	left: 240px;
}

.no-js .container_book {
	padding-left: 240px; transform:
}

.no-js .bb-custom-wrapper nav span,
.no-js .menu-button {
	display: none;
}

.js .content {
	position: absolute;
	top:0;
	left: 0;
	width: 100%; height:100%;
	bottom:0;
}

/**
.js .content:before,
.js .content:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
	z-index: 100;
	pointer-events: none;
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
*/

.js .content:after {
	top: auto;
	bottom: 0;
	background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
     
}

.container_book{
	position:absolute; left:50%; top:50%; 
	-webkit-transition: left 0.3s ease-in-out;
	-o-transition: left 0.3s ease-in-out;
	transition: left 0.3s ease-in-out;    
}

/** 동영상 일 경우 **/
.ebook_video_wrap{position:absolute; left:0; width:100%; padding-top:56.25%; border:0;}
.ebook_video{width:100%; height:100%; position:absolute; left:0; top:0; border:0;}
.ebook_video_play{position:absolute; left:50%; top:50%; cursor:pointer; width:47px; height:51px; margin:-25.5px 0 0 -23.5px;}

@media all and (min-width:960px){
    .ebook_video_play{width:62px; height:69px; margin:-35px 0 0 -31px;}
}
@media all and (min-width:1280px){    
    .ebook_video_play{width:78px; height:86px; margin:-43px 0 0 -39px;}
}
@media all and (min-width:1680px){
    .ebook_video_play{width:94px; height:104px; margin:-52px 0 0 -47px;}
}

.bb-item{position:relative; width:100%;}
.ebook_img{position:absolute; width:100%; height:100%; left:0; top:0; z-index:1000000;}

/** 단면 2:1일 경우 **/
.container_book.single_2_1{width:640px; height:320px; margin:-160px 0 0 -320px;}
.container_book.single_2_1 .bb-item{padding-top:50%;}

.container_book.single_2_1 .ebook_video_wrap{top:0; left:5.55%; width:88.89%; padding-top:50%;}

@media all and (min-width:768px){
    .container_book.single_2_1{width:768px; height:384px; margin:-192px 0 0 -384px;}
}
@media all and (min-width:960px){
    .container_book.single_2_1{width:962px; height:481px; margin:-240.5px 0 0 -481px;}
}
@media all and (min-width:1024px){
    .container_book.single_2_1{width:1024px; height:512px; margin:-256px 0 0 -512px;}
}
@media all and (min-width:1080px){
    .container_book.single_2_1{width:1080px; height:540px; margin:-270px 0 0 -540px;}
}
@media all and (min-width:1280px){
    .container_book.single_2_1{width:1200px; height:600px; margin:-300px 0 0 -600px;}
}
@media all and (min-width:1440px){
    .container_book.single_2_1{width:1320px; height:660px; margin:-330px 0 0 -660px;}
}
@media all and (min-width:1680px){
    .container_book.single_2_1{width:1580px; height:790px; margin:-395px 0 0 -790px;}
}
@media all and (min-width:1800px){
    .container_book.single_2_1{width:1700px; height:850px; margin:-425px 0 0 -850px;}
}

/** 단면 8:3일 경우 **/
.container_book.single_8_3{width:640px; height:240px; margin:-120px 0 0 -320px;}
.container_book.single_8_3 .bb-item{padding-top:37.5%;}

.container_book.single_8_3 .ebook_video_wrap{top:0; left:16.665%; width:66.67%; padding-top:37.5%;}

@media all and (min-width:768px){
    .container_book.single_8_3{width:768px; height:288px; margin:-144px 0 0 -384px;}
}
@media all and (min-width:960px){
    .container_book.single_8_3{width:962px; height:360.75px; margin:-180.375px 0 0 -481px;}
}
@media all and (min-width:1024px){
    .container_book.single_8_3{width:1024px; height:384px; margin:-192px 0 0 -512px;}
}
@media all and (min-width:1080px){
    .container_book.single_8_3{width:1080px; height:405px; margin:-202.5px 0 0 -540px;}
}
@media all and (min-width:1280px){
    .container_book.single_8_3{width:1220px; height:457.5px; margin:-228.75px 0 0 -610px;}
}
@media all and (min-width:1440px){
    .container_book.single_8_3{width:1350px; height:506.25px; margin:-253.125px 0 0 -675px;}
}
@media all and (min-width:1680px){
    .container_book.single_8_3{width:1580px; height:592.5px; margin:-296.25px 0 0 -790px;}
}
@media all and (min-width:1920px){
    .container_book.single_8_3{width:1830px; height:686.25px; margin:-343.125px 0 0 -915px;}
}

/** 단면 6:4일 경우 **/
.container_book.single_6_4{width:540px; height:360px; margin:-180px 0 0 -270px;}
.container_book.single_6_4 .bb-item{padding-top:66.67%;}

.container_book.single_6_4 .ebook_video_wrap{top:7.8%;}

@media all and (min-width:768px){
    .container_book.single_6_4{width:648px; height:432px; margin:-216px 0 0 -324px;}
}
@media all and (min-width:960px){
    .container_book.single_6_4{width:810px; height:540px; margin:-270px 0 0 -405px;}
}
@media all and (min-width:1024px){
    .container_book.single_6_4{width:864px; height:576px; margin:-288px 0 0 -432px;}
}
@media all and (min-width:1080px){
    .container_book.single_6_4{width:909px; height:606px; margin:-303px 0 0 -454.5px;}
}
@media all and (min-width:1280px){
    .container_book.single_6_4{width:930px; height:620px; margin:-310px 0 0 -465px;}
}
@media all and (min-width:1440px){
    .container_book.single_6_4{width:990px; height:660px; margin:-330px 0 0 -495px;}
}
@media all and (min-width:1680px){
    .container_book.single_6_4{width:1110px; height:740px; margin:-370px 0 0 -555px;}
}
@media all and (min-width:1920px){
    .container_book.single_6_4{width:1275px; height:850px; margin:-425px 0 0 -637.5px;}
}

/** 단면 32:9일 경우 **/
.container_book.single_32_9{width:640px; height:180px; margin:-90px 0 0 -320px;}
.container_book.single_32_9 .bb-item{padding-top:28.125%;}

.container_book.single_32_9 .ebook_video_wrap{top:0; left:25%; width:50%; padding-top:28.125%;}

@media all and (min-width:768px){
    .container_book.single_32_9{width:768px; height:216px; margin:-108px 0 0 -384px;}
}
@media all and (min-width:960px){
    .container_book.single_32_9{width:962px; height:270.5625px; margin:-135.2813px 0 0 -481px;}
}
@media all and (min-width:1024px){
    .container_book.single_32_9{width:1024px; height:288px; margin:-144px 0 0 -512px;}
}
@media all and (min-width:1080px){
    .container_book.single_32_9{width:1080px; height:303.75px; margin:-151.875px 0 0 -540px;}
}
@media all and (min-width:1280px){
    .container_book.single_32_9{width:1220px; height:343.125px; margin:-171.5625px 0 0 -610px;}
}
@media all and (min-width:1440px){
    .container_book.single_32_9{width:1350px; height:379.6875px; margin:-189.8438px 0 0 -675px;}
}
@media all and (min-width:1680px){
    .container_book.single_32_9{width:1580px; height:444.375px; margin:-222.1875px 0 0 -790px;}
}
@media all and (min-width:1920px){
    .container_book.single_32_9{width:1830px; height:514.6875px; margin:-257.3438px 0 0 -915px;}
}

/** 단면 18:16일 경우 **/
.container_book.single_18_16{width:405px; height:360px; margin:-180px 0 0 -202.5px;}
.container_book.single_18_16 .bb-item{padding-top:88.89%;}

.container_book.single_18_16 .ebook_video_wrap{top:18.36%;}

@media all and (min-width:768px){
    .container_book.single_18_16{width:486px; height:432px; margin:-216px 0 0 -243px;}  
}
@media all and (min-width:960px){
    .container_book.single_18_16{width:607.5px; height:540px; margin:-270px 0 0 -303.75px;}    
}
@media all and (min-width:1024px){
    .container_book.single_18_16{width:648px; height:576px; margin:-288px 0 0 -324px;}
}
@media all and (min-width:1080px){
    .container_book.single_18_16{width:681.75px; height:606px; margin:-303px 0 0 -340.875px;}
}
@media all and (min-width:1280px){
    .container_book.single_18_16{width:697.5px; height:620px; margin:-310px 0 0 -348.75px;}
}
@media all and (min-width:1440px){
    .container_book.single_18_16{width:742.5px; height:660px; margin:-330px 0 0 -371.25px;}
}
@media all and (min-width:1680px){
    .container_book.single_18_16{width:832.5px; height:740px; margin:-370px 0 0 -416.25px;}
}
@media all and (min-width:1920px){
    .container_book.single_18_16{width:956.25px; height:850px; margin:-425px 0 0 -478.125px;}
}

/** 단면 17:10일 경우 **/
.container_book.single_17_10{width:612px; height:360px; margin:-180px 0 0 -306px;}
.container_book.single_17_10 .bb-item{padding-top:58.82%;}

.container_book.single_17_10 .ebook_video_wrap{top:2.57%;}

@media all and (min-width:768px){
    .container_book.single_17_10{width:734.4px; height:432px; margin:-216px 0 0 -367.2px;}
}
@media all and (min-width:960px){
    .container_book.single_17_10{width:918px; height:540px; margin:-270px 0 0 -459px;}
}
@media all and (min-width:1024px){
    .container_book.single_17_10{width:979.2px; height:576px; margin:-288px 0 0 -489.6px;}
}
@media all and (min-width:1080px){
    .container_book.single_17_10{width:1030.2px; height:606px; margin:-303px 0 0 -515.1px;}
}
@media all and (min-width:1280px){
    .container_book.single_17_10{width:1054px; height:620px; margin:-310px 0 0 -527px;}
}
@media all and (min-width:1440px){
    .container_book.single_17_10{width:1122px; height:660px; margin:-330px 0 0 -561px;}
}
@media all and (min-width:1680px){
    .container_book.single_17_10{width:1258px; height:740px; margin:-370px 0 0 -629px;}
}
@media all and (min-width:1920px){
    .container_book.single_17_10{width:1445px; height:850px; margin:-425px 0 0 -722.5px;}
}