@charset "utf-8";

/* ===============================================
	view style
	target:CSS Level 3
================================================ */

/* = Common
-------------------------------------------------------------- */
*{margin:0;padding:0;}
body,input,select,textarea,button{font-family:"나눔고딕","Nanum Gothic",NanumGothic,"맑은고딕","NanumGothic","MalgunGothic","돋움",Dotum,AppleGothic,sans-serif;color:#888;font-size:13px;}
input, select, textarea, button{vertical-align:middle}
input[type=text]{height:28px;line-height:28px;border:solid #d0d0d0 1px;background:#FFF}
input[type=file]{height:28px;line-height:28px;border:solid #d0d0d0 1px;background:#FFF}
input[type=password]{height:28px;line-height:28px;border:solid #d0d0d0 1px;background:#FFF}
input[type=image]{-webkit-appearance:none;-webkit-border-radius:0}
select{height:28px;line-height:28px;color:#666;border:solid #d0d0d0 1px}
textarea{padding:5px;line-height:16px;border:solid #d0d0d0 1px;overflow:auto}
a{color:#FFF;text-decoration:none;}
img{border:0;vertical-align:middle;}
ul, ol{list-style:none}
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0}
legend, hr{overflow:hidden;position:absolute;top:0;left:0}
legend, hr, caption{visibility:hidden;font-size:0;width:0;height:0;line-height:0}
table{border-collapse:collapse;border-spacing:0;}

.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.hide{display:none;}
.ir *,
.blind{position:absolute;width:0;height:0;font-size:0;line-height:0;overflow:hidden;visibility:hidden;}

.al-l{text-align:left !important;}
.al-r{text-align:right !important;}
.al-c{text-align:center !important;}

.point{color:#bc9f5b;}

/* = Layout
-------------------------------------------------------------- */
body{overflow:hidden;}
.landscape .bx-container{display:none;}
.portrait .bb-container{display:none;}

.black{background:#000;}
.white{background:#FFF;}
.cover{background-position:center top;}

/* = button
-------------------------------------------------------------- */
.btn{display:inline-block;width:46px;height:46px;font-size:0;line-height:0;background:url(../images/btn_pack.png);}
.btn a{display:inline-block;width:100%;height:100%;}

.list{background-position:0px -90px;}
.like{background-position:-50px -90px;}
.sh{background-position:-100px -90px;}
.facebook{background-position:-150px -90px;}
.twitter{background-position:-200px -90px;}
.kakao{background-position:-250px -90px;}
.copy{background-position:-300px -90px;}
.close{background-position:-350px -90px;}

/* .desktop .kakao {display:none;} */

.desktop .list:hover{background-position:0 -150px;}
.desktop .like:hover{background-position:-50px -150px;}
.desktop .sh:hover{background-position:-100px -150px;}
.desktop .facebook:hover{background-position:-150px -150px;}
.desktop .twitter:hover{background-position:-200px -150px;}
.desktop .kakao:hover{background-position:-250px -150px;}
.desktop .copy:hover{background-position:-300px -150px;}
.desktop .close:hover{background-position:-350px -150px;}

.portrait .btn{width:70px;height:70px;background:url(../images/btn_pack.png);background-size:300px 400px !important}

.portrait .like,
.portrait .sh,
.portrait .close{width:48px;height:48px;}

.portrait .like{background-position:-100px -100px;}
.portrait .sh{background-position:-150px -100px;}
.portrait .facebook{background-position:0 -200px;}
.portrait .twitter{background-position:-75px -200px;}
.portrait .kakao{background-position:-150px -200px;}
.portrait .copy{background-position:-225px -200px;}
.portrait .close{background-position:0 -350px;}

.desktop.portrait .like:hover{background-position:-100px -150px;}
.desktop.portrait .sh:hover{background-position:-150px -150px;}
.desktop.portrait .facebook:hover{background-position:0 -275px;}
.desktop.portrait .twitter:hover{background-position:-75px -275px;}
.desktop.portrait .kakao:hover{background-position:-150px -275px;}
.desktop.portrait .copy:hover{background-position:-225px -275px;}
.desktop.portrait .close:hover{background-position:-50px -350px;}

.bb-controls a{display:inline-block;width:60px;height:60px;font-size:0;line-height:0;position:absolute;top:50%;margin-top:-30px;z-index:100;background:url(../images/btn_pack.png);}
.bb-controls a.bb-custom-icon-arrow-left{background-position:0 -20px;left:0;}
.bb-controls a.bb-custom-icon-arrow-right{background-position:-100px -20px;right:0;}

.desktop .bb-controls a.bb-custom-icon-arrow-left:hover{background-position:-200px -20px;}
.desktop .bb-controls a.bb-custom-icon-arrow-right:hover{background-position:-300px -20px;}

@media (max-width:768px){
	.bb-controls a{width:48px;height:48px;margin-top:-24px;background-size:300px 400px !important}
	.bb-controls a.bb-custom-icon-arrow-left{background-position:0 -100px;}
	.bb-controls a.bb-custom-icon-arrow-right{background-position:-50px -100px;}

	.desktop .bb-controls a.bb-custom-icon-arrow-left:hover{background-position:0 -150px;}
	.desktop .bb-controls a.bb-custom-icon-arrow-right:hover{background-position:-50px -150px;}
}
.bx-prev,
.bx-next{position:absolute;top:50%;margin-top:-24px;display:inline-block;z-index:50;width:48px;height:48px;font-size:0;line-height:0;background:url(../images/btn_pack.png) no-repeat;background-size:300px 400px !important}
.bx-prev{left:0;background-position:0 -100px;}
.bx-next{right:0;background-position:-50px -100px;}

.desktop .bx-prev:hover{background-position:0 -150px;}
.desktop .bx-next:hover{background-position:-50px -150px;}

.btn-group{position:absolute;top:100%;left:50%;margin-left:-72px;z-index:500;height:60px;}
.btn-group *{vertical-align: top;}
.sns{position:relative;display:inline-block;}
.sns-open{display:none;position:absolute;top:0;left:0;width:245px;}

.portrait .btn-group{margin-left:-50px;height:48px;}
.portrait .sns-open{position:fixed;width:50%;height:100%;padding:30% 25% 0;text-align:center;background-color:rgba(0, 0, 0, 0.95);}
.portrait .sns-open .close{display:block;margin:0 auto;margin-top:10%;}
.portrait .sns-open .btn {margin-bottom:3px;}

.landscape .list{display:inline-block;}
.portrait .list{display:none;}

.mobile .sns-open span {margin-left:-1px;}
.mobile.landscape .btn-group{margin-left:-48px;}
.mobile.landscape .list{display:none;}

.like{position:relative;}
.like a span{position:absolute;display:inline-block;font-size:10px;left:0;bottom:10px;text-align:center;width:100%;color:#FFF;}
.like:hover a span{color:#bc9f5b;}

/* = Landscape
-------------------------------------------------------------- */
.bb-custom-wrapper{width:1100px;margin:0 auto;position:relative;}
.bb-bookblock{width:100%;margin:0 auto;position:relative;z-index:100;}
.bb-page{position:absolute;width:50%;left:50%;}
.bb-page > div,
.bb-outer,
.bb-content,
.bb-inner{position:absolute;width:100%;top:0;left:0;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.bb-bookblock .bb-content{width:200%;}
.bb-outer{width:100%;overflow:hidden;z-index:999;}
.bb-overlay,
.bb-flipoverlay{background-color:rgba(0, 0, 0, 0.7);position:absolute;top:0px;left:0px;width:100%;opacity:0;}
.bb-flipoverlay{background-color:rgba(0, 0, 0, 0.2);}
.bb-bookblock .bb-front .bb-content{left:-100%;}
.bb-item{width:100%;position:absolute;top:0;left:0;display:none;}
.bb-custom-side{float:left;width:50%;overflow:hidden;}
.bb-custom-side img{width:100%;}
.bb-custom-side.odd {margin-left:25%;}

@media (max-width:1100px){
	.bb-custom-wrapper{width:100%;height:100%;}
}

/* animation classes */
.bb-bookblock{
	-webkit-perspective:1300px;
	-moz-perspective:1300px;
	perspective:1300px;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	backface-visibility:hidden;
}
.bb-page{
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-webkit-transition-property:-webkit-transform;
	-moz-transition-property:-moz-transform;
	transition-property:transform;
	-webkit-transform-origin:left center;
	-moz-transform-origin:left center;
	transform-origin:left center;
}
.bb-custom-wrapper .bb-bookblock{
	-webkit-perspective:2000px;
	-moz-perspective:2000px;
	perspective:2000px;
}
.bb-bookblock > div.bb-page:first-child,
.bb-bookblock > div.bb-page:first-child .bb-back{
	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	transform:rotateY(180deg);
}
.bb-page > div{
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	transform-style:preserve-3d;
}
.bb-page > div:not(:only-child){
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	backface-visibility:hidden;
}
.bb-bookblock .bb-back{
	-webkit-transform:rotateY(-180deg);
	-moz-transform:rotateY(-180deg);
	transform:rotateY(-180deg);
}
.bb-bookblock .bb-flip-next,
.bb-bookblock .bb-flip-initial{
	-webkit-transform:rotateY(-180deg);
	-moz-transform:rotateY(-180deg);
	transform:rotateY(-180deg);
}
.bb-bookblock .bb-flip-prev{
	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
.bb-vertical .bb-flip-next-end{
	-webkit-transform:rotateY(-15deg);
	-moz-transform:rotateY(-15deg);
	transform:rotateY(-15deg);
}
.bb-vertical .bb-flip-prev-end{
	-webkit-transform:rotateY(-165deg);
	-moz-transform:rotateY(-165deg);
	transform:rotateY(-165deg);
}

/* = Portrait
-------------------------------------------------------------- */
.bx-container{width:100%;position:relative;}
.bx-bookblock img{width:100%;}
.bx-pager{display:none;}

.bx-bookblock:after {
	content:'';
	clear:both;
	display:block;
}

.portrait .bb-custom-side {
	width:100%;
}
.portrait .bb-custom-side img{
	width:100% ;
}

/*  200604 */
html,body,#wrap,.bb-container {
	height:100%;
}
.bb-custom-wrapper {
	height:100%;
}
.bb-bookblock {
	position:absolute;
	top:50%; 
	-moz-transform:translateY(-50%);  
	-webkit-transform:translateY(-50%);  
	-o-transform:translateY(-50%);  
	-ms-transform:translateY(-50%);  
	transform:translateY(-50%);
}
.bb-bookblock .bb-item {
	position:relative;
}
.bb-bookblock .bb-item:after {
	content:'';
	clear:both;
	display:block;
}
.btn-group {
	top:auto;
	bottom:5%;
}
.bx-container {
	height:100%;
	overflow-y:hidden;
}
.bx-container .bx-wrapper {
	height:100%;
}
.bx-viewport {
	top:50%;
	-moz-transform:translateY(-50%);  
	-webkit-transform:translateY(-50%);  
	-o-transform:translateY(-50%);  
	-ms-transform:translateY(-50%);  
	transform:translateY(-50%);
}
.portrait {
	position:relative;
}