@charset "utf-8";

/*공통부분 etc*/
.ad_btn_wrap{text-align: center;margin-top: 10px;}
.ad_btn{display:inline-block;padding:4px 20px;background: #000;font-size: 14px;color:#fff;}

.admin_content .loader{position: absolute;bottom:-80px;left:50%;margin-left:-5px;}
.fa{margin-right: 8px;}
h2.tit{font-weight: 400;font-size: 20px; color:#73879C;text-align: left;margin-bottom: 10px;}

.btn_wrap a .fa{color:#C5C7CB;}
body{background: #F7F7F7;}

.pasing_wrap a{display:inline-block;width:30px;height: 30px;text-align: center;line-height: 30px;border:1px solid #717171;color:#717171;margin:0 2px;}
.pasing_wrap{margin-top: 30px;text-align: center;}
.pasing_wrap .curr {display:inline-block;width:30px;height: 30px;text-align: center;line-height: 30px;border:1px solid #717171;background: #717171;color:#fff;margin:0 2px;}



.button_tool{margin:10px 0;position: relative;height: 66px;}
.button_tool.off{margin:0;background: none !important;}

.vertical_tool{height: 942px;position: absolute;top:86px;z-index:1000;border-bottom: none;opacity: 0;width:100px;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f1f1f1+16,73879c+50,f1f1f1+86 */
background: #f1f1f1; /* Old browsers */
background: -moz-linear-gradient(top, #f1f1f1 16%, #73879c 50%, #f1f1f1 86%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f1f1f1 16%,#73879c 50%,#f1f1f1 86%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f1f1f1 16%,#73879c 50%,#f1f1f1 86%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#f1f1f1',GradientType=0 ); /* IE6-9 */
}
.vertical_tool.on{width:100px;border: 2px solid rgba(204, 204, 204, 0.54);border-top:none;opacity: 1;
border-left:none;box-sizing: border-box;}
.vertical_tool .con{width:90%;margin-bottom: 10px;margin:0 5%;text-align: center;border:1px solid #ccc;margin-bottom: 10px;background: rgba(255, 255, 255, 0.18);
border-radius: 10px;padding:8px 0;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.32);}
.vertical_tool .con .fa{color:#73879C;}
.vertical_tool .con a{display: block;}
.vertical_tool .con:hover .fa{}

.vertical_tool .con .depth2_wrap{position:absolute;height:942px;width:200px;background: #ccc;right:-202px;top:0px;border-right: 1px solid #6f6f6f;display: none;
    background: #fff;
text-align: left;text-align:left;box-sizing: border-box;}
.vertical_tool .con .depth2_wrap.on{display: block;}

.vertical_tool .con .depth2_wrap li{border-bottom:1px solid #ccc;padding:5px;}
.vertical_tool .con .depth2_wrap li a{font-weight: 500;}
.vertical_tool .con .depth2_wrap li .list{padding-left:25px;}
.vertical_tool .con .depth2_wrap li .list a{color:#000;display: block;margin:5px 0;}
.vertical_tool .list_con .depth2_wrap li a{display: block;}
.vertical_tool .con .depth2_wrap li .color_area{text-align: center;}
.vertical_tool .con .depth2_wrap li .color_area li{display: inline-block;
    margin:0 3px;
width:20px;height: 20px;border: 1px solid #a0a0a0;background: #ccc;}
.vertical_tool .con .depth2_wrap li .color_area li a{display: block;}

.vertical_tool .con .depth2_wrap h2{height: 40px;line-height: 40px;text-align: center;font-weight: 500;color:#fff;background: #283645;position: relative;}
.vertical_tool .con .depth2_wrap h2 .fa{position: absolute;top:12px;right:5px;}

.land_line{position: absolute;width:100%;background: #000;height: 40px;top:60px;background: #73879C;text-align: center;}
.land_line a{display:inline-block;padding:1px 8px;color:#fff;}

input[type="submit"]{background: #2A3F54;color:#fff;display:inline-block;padding:3px 7px;margin-top: 5px;}

/*전자펜 */
.top_wrap{position: relative;}
.elect_pencil{position: absolute;top:600px;left:160px;z-index:10000;}




.button_tool .btn_tool{display: inline-block;color:#1ABB9C;margin:15px 0 6px;}
.button_tool .btn_tool.on{position: absolute;top:-40px;right:0;}
.button_tool .too_box{display: inline-block;vertical-align: middle;margin-top:-7px;}

.button_tool .too_box>div.con a{color:#00a0d3}

.button_tool .too_box>div.con{cursor: pointer;display:inline-block;width:auto;padding:0; color:#00a0d3;vertical-align: middle;border: 1px solid rgba(204, 204, 204, 0.54);
text-align: center;height: 0;box-sizing: border-box;overflow: hidden;border:none;background: #fff;border:none;}
.button_tool .too_box>div.con.on{width:auto;height:66px;padding:0 10px;border: 1px solid rgba(204, 204, 204, 0.54);padding-top:5px;}
.button_tool .too_box>div.con p.name{line-height: normal;font-size: 15px;}
.button_tool .too_box>div .fa{margin: 0;height: 28.8px;display: block;}
.button_tool .too_box>div:hover .fa{color:#2A3F54}
.button_tool .too_box>div:hover{color:#2A3F54;font-weight: 500;}
.button_tool .too_box>div:hover a{color:#2A3F54;}
.button_tool .too_box .page_search{width:auto;position: relative;}
.button_tool .too_box .page_search .coco{display: inline-block;padding-right: 40px;padding-bottom: 7px;position: relative;top:2px;}
.button_tool .too_box .page_search input{width:40px;}
.button_tool .too_box .page_search .se{display: inline-block;background: #ccc;color:#fff;border:1px solid #a5a5a5;position: absolute;top:10px;right:-2px;width:30px;height: 28px;
    line-height: 22px;
vertical-align: top;}

/*책보기*/
.page_slider .active{
  opacity: 1;
  position: absolute;
  top: 5%;
  left: 50%;
  margin-left: -350px;
  width: 700px;
  height: 800px;
  z-index: 10;
}
.page_slider .con img{width:100%;height: 100%;}

/*.file_wrap{width:80px;overflow: hidden;}*/
/*배너관리*/
.banner_area {margin:30px 0;}
.banner_area ul li{text-align: center;padding:15px;border: 1px solid #ddd;margin-bottom: 8px;}
.banner_area ul li img{width:100%;height: 200px;margin-bottom: 15px;}
/*마우스 하단내리기 움직임*/
.visual_bot { position: absolute; left: 50%; bottom: -1px; margin-left: -75px; z-index: 999; cursor: pointer; }
.mouse_wrap { position: absolute; left: 50%; bottom: 5px; z-index: 999; width: 150px; text-align: center; }
.mouse_wrap .txt_scroll { margin: 0 0 6px -16px; max-width: 70px; margin: 0 auto 5px; }
.mouse_wrap span { display: block; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; margin: -1px 0 0px 5px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.mouse_wrap .unu { margin-top: 5px; }
.mouse_wrap .unu, .mouse_wrap .doi, .mouse_wrap .trei { -webkit-animation: mouse-scroll 1s infinite; -moz-animation: mouse-scroll 1s infinite; -ms-animation: mouse-scroll 1s infinite; }
.mouse_wrap .unu { -webkit-animation-delay: .1s; -moz-animation-delay: .1s; -ms-animation-delay: .1s; -webkit-animation-direction: alternate; }
.mouse_wrap .doi { -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -ms-animation-delay: .2s; -webkit-animation-direction: alternate; }
.mouse_wrap .trei { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -ms-animation-delay: .3s; -webkit-animation-direction: alternate; }
.mouse_wrap .mouse { height: 28px; width: 18px; border-radius: 10px; transform: none; border: 2px solid #fff; top: 170px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.8); margin: 0 auto; }
.mouse_wrap .wheel { height: 5px; width: 2px; display: block; margin: 3px auto; background: #fff; position: relative; box-shadow: 0 0 3px rgba(0, 0, 0, 1); }
.mouse_wrap .arrow { display: inline-block; margin-right: 4px; }
.mouse_wrap .wheel { -webkit-animation: mouse-wheel 1.2s ease infinite; -moz-animation: mouse-wheel 1.2s ease infinite; -ms-animation: mouse-wheel 1.2s ease infinite; }
@-webkit-keyframes mouse-wheel {  0% {
opacity: 1;
 -webkit-transform: translateY(0);
 -ms-transform: translateY(0);
 transform: translateY(0);
}
 100% {
opacity: 0;
 -webkit-transform: translateY(6px);
 -ms-transform: translateY(6px);
 transform: translateY(6px);
}
}
@keyframes mouse-wheel {  0% {
opacity: 1;
 -webkit-transform: translateY(0);
 -ms-transform: translateY(0);
 transform: translateY(0);
}
 100% {
opacity: 0;
 -webkit-transform: translateY(6px);
 -ms-transform: translateY(6px);
 transform: translateY(6px);
}
}
@-moz-keyframes mouse-wheel {  0% {
top: 1px;
}
 50% {
top: 2px;
}
 100% {
top: 3px;
}
}
@-webkit-keyframes mouse-scroll {  0% {
opacity: 0;
}
 50% {
opacity: .5;
}
 100% {
opacity: 1;
}
}
@-moz-keyframes mouse-scroll {  0% {
opacity: 0;
}
 50% {
opacity: .5;
}
 100% {
opacity: 1;
}
}
@-o-keyframes mouse-scroll {  0% {
opacity: 0;
}
 50% {
opacity: .5;
}
 100% {
opacity: 1;
}
}
@keyframes mouse-scroll {  0% {
opacity: 0;
}
 50% {
opacity: .5;
}
 100% {
opacity: 1;
}
}

/*
@media only screen and (max-width:1600px) {
    .top_wrap{margin-bottom: 140px;}
    .land_line{top:190px;}
    .vertical_tool{top:188px;}
}
*/


.player_logo{position: absolute;top:15px;left:50px;}
.player_logo_hide{position: absolute;position: fixed;width:100%;text-align: center;top:50%;
z-index:1000;font-size: 80px;font-weight: bold;color:#fff;margin-top:-200px;}
.full_bg{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    height: 100%;
    width: 100%;
    opacity: 1;
    visibility: visible;
    overflow: hidden;}
.full_bg.go{opacity:1;visibility: visible;}
.bbb{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%) translateX(-2%);
    -moz-transform: translateY(-50%) translateX(-2%);
    -ms-transform: translateY(-50%) translateX(-2%);
    -o-transform: translateY(-50%) translateX(-2%);
    transform: translateY(-50%) translateX(-2%);
    /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
    height: 100%;
    /* our sprite is composed of 25 frames */
    width: 2500%;
    background: url(/images/sub/ink.png) no-repeat 0 0;
    background-size:100% 100%;
    -webkit-animation: cd-sequence 1s steps(24);
    -moz-animation: cd-sequence 1s steps(24);
    animation: cd-sequence 1s steps(24);
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/* --------------------------------

Primary style

-------------------------------- */


/* --------------------------------

Patterns - reusable parts of our design

-------------------------------- */
.cd-btn {
  display: inline-block;
  padding: 1.6em 2.4em;
  font-size: 1.4rem;
  letter-spacing: .15em;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #a5c4bc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: box-shadow 0.3s;
  -moz-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
}
.no-touch .cd-btn:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* --------------------------------

Typography

-------------------------------- */
h1 {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 1em;
  font-family: "IM Fell Double Pica", serif;
  font-style: italic;
}
@media only screen and (min-width: 768px) {
  h1 {
    font-size: 5rem;
  }
}

/* --------------------------------

Main Content

-------------------------------- */
.cd-main-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  /* vertically align its content */
  display: table;
  background-color: #e4dcca;
}
.cd-main-content .center {
  /* vertically align inside parent element */
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

/* --------------------------------

Modal window

-------------------------------- */


/* --------------------------------

Transition Layer

-------------------------------- */
.cd-transition-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.cd-transition-layer .bg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-2%);
  -moz-transform: translateY(-50%) translateX(-2%);
  -ms-transform: translateY(-50%) translateX(-2%);
  -o-transform: translateY(-50%) translateX(-2%);
  transform: translateY(-50%) translateX(-2%);
  /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
  height: 100%;
  /* our sprite is composed of 25 frames */
  width: 2500%;
  background: url(/images/main/ink.png) no-repeat 0 0;
  background-size: 100% 100%;
}
.cd-transition-layer.visible {
  opacity: 1;
  visibility: visible;
}
.cd-transition-layer.opening .bg-layer {
  -webkit-animation: cd-sequence 0.8s steps(24);
  -moz-animation: cd-sequence 0.8s steps(24);
  animation: cd-sequence 0.8s steps(24);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.cd-transition-layer.closing .bg-layer {
  -webkit-animation: cd-sequence-reverse 0.8s steps(24);
  -moz-animation: cd-sequence-reverse 0.8s steps(24);
  animation: cd-sequence-reverse 0.8s steps(24);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.no-cssanimations .cd-transition-layer {
  display: none;
}

@-webkit-keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -webkit-transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -webkit-transform: translateY(-50%) translateX(-98%);
  }
}
@-moz-keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -moz-transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -moz-transform: translateY(-50%) translateX(-98%);
  }
}
@keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -webkit-transform: translateY(-50%) translateX(-2%);
    -moz-transform: translateY(-50%) translateX(-2%);
    -ms-transform: translateY(-50%) translateX(-2%);
    -o-transform: translateY(-50%) translateX(-2%);
    transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -webkit-transform: translateY(-50%) translateX(-98%);
    -moz-transform: translateY(-50%) translateX(-98%);
    -ms-transform: translateY(-50%) translateX(-98%);
    -o-transform: translateY(-50%) translateX(-98%);
    transform: translateY(-50%) translateX(-98%);
  }
}
@-webkit-keyframes cd-sequence-reverse {
  0% {
    -webkit-transform: translateY(-50%) translateX(-98%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-2%);
  }
}
@-moz-keyframes cd-sequence-reverse {
  0% {
    -moz-transform: translateY(-50%) translateX(-98%);
  }
  100% {
    -moz-transform: translateY(-50%) translateX(-2%);
  }
}
@keyframes cd-sequence-reverse {
  0% {
    -webkit-transform: translateY(-50%) translateX(-98%);
    -moz-transform: translateY(-50%) translateX(-98%);
    -ms-transform: translateY(-50%) translateX(-98%);
    -o-transform: translateY(-50%) translateX(-98%);
    transform: translateY(-50%) translateX(-98%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-2%);
    -moz-transform: translateY(-50%) translateX(-2%);
    -ms-transform: translateY(-50%) translateX(-2%);
    -o-transform: translateY(-50%) translateX(-2%);
    transform: translateY(-50%) translateX(-2%);
  }
}