/* =============================

    박보라
    Copryright 2017 Chungchuy.com

    - 칼라 견본 -
    #248ab2 / main color
    #4356a4 / sub color
    #d1d3d4 / line color
    기본 width: 1044px;
    기본 font-size: 18px;

 ============================= */

@charset "utf-8";

/******* Layout *******/
#body2 {
    background : transparent;
}


body {
    background: url(/public_html/resource/images/common/bg.png), #ededee;
}
#wrap {
    position: relative;
    min-height: 100%;
}
main {
    overflow: auto;
    padding-bottom: 80px;
}
#wrap, #header, main, footer, #content-wrap {
    width: 100%;
    min-width: 1044px;
}
#header > div.r-wrap, main > section, footer > div {
    width:1024px;
    margin: 0 auto;
}

/* myinformation bg */
#bg {
    background: url(/public_html/resource/images/leveltest/common/bg.png) top left;
    background-attachment: fixed;
    display: table;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
/* main */
main.mypage {
    min-width: 1024px;
    width: 1024px;
    margin: 20px auto 120px;
    padding-bottom: 0;
}
main.interests-main {
    margin: 20px auto 86px;
}

/* section */
main section.ds-home {
    margin-bottom: -6px;
    padding: 20px 0;
}
main section.recomm,
main section.interests,
main section.recently,
main section.hello,
main section.assignment,
main section.sub-padding {
    margin-bottom: 20px;
    padding: 0;
}
main section.sub-cmm {
    padding-top: 20px !important;
}
main.mypage section.sub-padding {
    margin-bottom: 0;
}
main.sub-cmm section:last-child {
    padding-bottom: 14px;
}
/* article */
main > section article {
    padding: 26px 2.03252032520325% 26px; /* 20/984 */
}
main.mypage section.sub-padding article {
    padding: 26px 0 0;
}
main > section.ds-home article {
    padding: 0;
}
main section.sub-cmm article {
    padding-bottom: 40px;
}
main section.recomm.sub-cmm article {
    padding-bottom: 5px;
}
main.mypage section.hitory-graph article {
    padding: 0 0 26px;
}
main.mypage section.lexile-section article {
    padding: 0;
}
main.mypage section.sub-padding article header {
    padding: 0 2.03252032520325%; /* 20/984 */
}
main.mypage section.history-read article {
    padding: 0 2.03252032520325% 26px;
}

/* 다이알로그 알림 띄울때 배경색 제거 */
.ui-widget-overlay {
    background : transparent;
    opacity : 0;
    filter : alpha('Opacity=0');
}
@media screen and (max-width: 1044px) {
    #wrap, #header, main, footer, #content-wrap {
        min-width: 100%;
    }
    main > section, footer > div {
        width:100%;
    }
    #header > div.r-wrap {
        width: -webkit-calc(100% - 2.604%);
        width: -moz-calc(100% - 2.604%);
        width: calc(100% - 2.604%);
        min-width: -webkit-calc(100% - 2.604%);
        min-width: -moz-calc(100% - 2.604%);
        min-width: calc(100% - 2.604%);
    }
    main.mypage {
        width: -webkit-calc(100% - 2.604%);
        width: -moz-calc(100% - 2.604%);
        width: calc(100% - 2.604%);
        min-width: -webkit-calc(100% - 2.604%);
        min-width: -moz-calc(100% - 2.604%);
        min-width: calc(100% - 2.604%);
        margin: 20px 1.302% 120px;
        padding-bottom: 0;
    }
    main section.ds-home {
        margin-bottom: 20px;
        padding: 20px 0.958% 0; /*10/1044*/
    }
    main section.interests {
        margin: 0 0 20px 1.302%; /* 10/768 */
        width: -webkit-calc(100% - 1.302%);
        width: -moz-calc(100% - 1.302%);
        width: calc(100% - 1.302%);
    }
    main section article.cmm-bg {
        margin: 0 1.302%; /* 10/768 */
    }
}
@media screen and (max-width: 800px) {

    main > section.ds-home {
        margin-bottom: 16px;
        padding: 20px 0 0 !important;
    }
    main.mypage {
        margin: 20px 1.302% 120px;
    }
    main.interests-main {
        margin: 20px 1.302% 0;
    }
    main section article.cmm-bg {
        margin: 0 1.302%; /* 10/768 */
    }
    main > section.ds-home > article {
        padding: 0 1.302%; /* 10/768 */
    }
}

@media screen and (max-width: 768px) {
    #wrap, #header, main, footer, #content-wrap {
        min-width: 768px;
    }
    main.mypage {
        min-width: 748px;
        width: 748px;
    }
}

/* 탑버튼 */
div#top {
    position: fixed;
    width: 40px;
    height: 40px;
    bottom: 0;
    right: 50%;
    margin-right: -602px;
    z-index: 10;
}
div#top a {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #414042;
    background-image: url(/public_html/resource/images/icn/icn-top.png);
    background-position: center center;
    background-repeat: no-repeat;
}



 /* /탑버튼 */
 /* 헤더 */
 #header {
     height: 100px;
     background: url(/public_html/resource/images/common/menu-bg.png) top left repeat-x;
 }
 #header > div.r-wrap {
     overflow: hidden;
     height: 100px;

 }
 .logo {
     float: left;
     width: 19.921875%; /* 204/1024 */
     margin-top: 8px;
 }

 .logo a {
     display: block;
     width: 100%;
 }
 .logo a img {
     display: block;
     width: 73.5294%; /* 150/204 */
     margin: 0 auto;
 }
 #header nav {
     float: right;
     width: 78.125%; /* 800/1024 */
 }
 #header nav ul li { /* 2017-08-16 변경 */
     position: relative;
     width : 20%;
 }
 #header nav ul.front-nav li {
     width: 33.33333%; /* 204/800 */
 }
 #header nav ul li a {

    position: relative;
     display: block;
     width: 100%;
     text-align: center;
 }
#header nav ul li a::before {
    content: "";
    display: inline-block;
    background: url(/public_html/resource/images/icn/icn-menu-sprite.png) no-repeat;
    background-position-x: left;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
#header nav ul.nav-1d li a::before {
    width: 24px;
    height: 20px;
    margin-right: 8px;
    vertical-align: -2px;
    background-position-y: top;
}
#header nav ul.nav-1d li:nth-child(2) a::before {
    background-position-x: -24px;
}
#header nav ul.nav-1d li:nth-child(3) a::before {
    background-position-x: -48px;
}
#header nav ul.nav-1d li:nth-child(4) a::before {
    background-position-x: -96px;
}
#header nav ul.nav-1d li a:hover::before,
#header nav ul.nav-1d li a.nav-act::before {
    background-position-y: -22px;
}

#header nav ul.nav-2d li a::before {
    width: 20px;
    height: 16px;
    margin-right: 3px;
    vertical-align: -3px;
    background-position-y: -44px;
}
#header nav ul.nav-2d li a.icn-level::before {
    background-position-x: left;
}
#header nav ul.nav-2d li a.icn-favorite::before {
    background-position-x: -20px;
}
#header nav ul.nav-2d li a.icn-prograss::before {
    background-position-x: -40px;
}
#header nav ul.nav-2d li a.icn-interest::before {
    background-position-x: -60px;
}
#header nav ul.nav-2d li a.icn-mylevel::before {
    background-position-x: -80px;
}
#header nav ul.nav-2d li a.icn-support::before {
    background-position-x: -100px;
}
#header nav ul.nav-2d li a:hover::before,
#header nav ul.nav-2d li a.nav-2d-act::before {
    background-position-y: -62px;
}
#header nav ul li.personal a::before {
    display: none;
}
 #header nav ul.nav-1d {
     overflow: visible;
 }
 #header nav ul.nav-1d li {
     position: relative;
 }
 #header nav ul.nav-1d li a {
    position: relative;
     height: 60px;
     line-height: 60px;
     font-size: 1em; /* 18/18 */
     font-weight: 700;
 }
 #header nav ul.nav-1d li a:hover,
 #header nav ul.nav-1d li a.nav-act {
     color: #248ab2;
 }
 #header nav ul.nav-1d li a.nav-act + span {
     display: block;
 }
 #header nav ul.nav-1d li span {
     display: none;
     position: absolute;
     left: 0;
     right: 0;
     bottom: -1px;
     margin: 0 auto;
     text-align: center;
     height: 8px;
 }
 #header nav ul li span.icn-new {
     display: block !important;
     position: absolute;
     top: 12px;
     left: 86px;
     width: 16px;
     height: 17px;
     background: url(/public_html/resource/images/icn/icn-new.png) no-repeat;
 }
 #header nav ul.nav-2d li span.icn-new {
     top: 11px;
     left: 144px;
 }
 #header nav ul.nav-1d li span img {
     vertical-align: top;
 }
 #header nav ul.nav-2d li {
     text-align: center;
     font-size: 0.7778em; /* 14/18 */
 }
  #header nav ul.li4 li {
     width: 25%;
 }
 #header nav ul.li5 li {
     width: 20%;
 }
 #header nav ul.li2 li {
    width: 50%;
}
 #header nav ul.li38 li {
    width: 38%;
}
 #header nav ul.nav-2d li.home-li {
     width: 100%;
     text-align: right;
     color: #a7a9ac;
 }
 #header nav ul.nav-2d li,
 #header nav ul.nav-2d li a {
     height: 40px;
     line-height: 40px;
     color: #248ab2;
 }
 #header nav ul.nav-2d li a {
     width: 64.9746192893401%; /* 128/197 */
     height: 28px;
     line-height: 28px;
     margin: 6px auto;
     font-size: 1em;/* 14/14 */
     border-radius: 14px;
     -moz-border-radius: 14px;
     -webkit-border-radius: 14px;
 }
 #header nav ul.nav-2d.guide li a {
     width: 82.974619%;
 }

 #header nav ul.nav-2d li a:hover,
 #header nav ul.nav-2d li a.nav-2d-act {
   background-color: #248ab2;
   color: #fff;
 }
 #header nav ul.li5 li a {
     width: 74.974619%;
 }
 #header nav ul.nav-1d li.personal h2 {
     width: 73%; /* 150/200 */
     padding-top: 14px;
     font-size: 0.7778em; /* 14/18 */
     color: #248ab2;
     float: left;
     text-align: right;
 }
 #header nav ul.nav-1d li.personal a {
     margin-top: 14px;
     margin-left: 10px;
     float: left;
     width: 32px;
     height: 32px;
     background-image: url(/public_html/resource/images/icn/icn-logout.png);
     background-repeat: no-repeat;
     background-position: center center;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     -o-transition: all 0.3s;
     -ms-transition: all 0.3s;
     transition: all 0.3s;
 }
 #header nav ul.nav-1d li.personal a:hover {
     background-image: url(/public_html/resource/images/icn/icn-logout-on.png);
 }
 /*common*/

 #header .nav-3d {
     overflow: visible;
     width: 100%;
     height: 40px;
     background-color: #248ab2;
     -webkit-transition:height 200ms ease-in;
     -moz-transition:height 200ms ease-in;
     -o-transition:height 200ms ease-in;
     transition:height 200ms ease-in;
 }

 #header .nav-3d .nav-3d-wrap {
     width: 1024px;
     margin: 0 auto;
     text-align: center;
 }

 #header .nav-3d ul li {
     width: 25%;/* 20%; */
     height: 40px;
 }
 #header .nav-3d ul li a {
     display: block;
     color: white;
     text-align: center;
 }

 #header .nav-3d ul {
     text-align: center;
     font-size: 0.7778em; /* 14/18 */
 }

 #header .nav-3d li a {
     width: 81%; /* 128/197 */
     height: 28px;
     line-height: 28px;
     margin: 6px auto;
     font-size: 1em;/* 14/14 */
     border-radius: 14px;
     -moz-border-radius: 14px;
     -webkit-border-radius: 14px;
 }

 #header .nav-3d li a:hover,
 #header .nav-3d li a.nav-3d-act {
     background-color: #fff;
     color: #248ab2;
 }

#header nav ul.no-icn li a:before {
    content: none;
}
 @media screen and (max-width: 1044px) {
     #header nav ul.nav-1d li.personal h2 {
         width: 64%;
         font-size : 0.69em;
     }

     #header nav ul.nav-2d li a {
         width: 80%;
     }
     #header > .nav-3d > .nav-3d-wrap{
         width: -webkit-calc(100% - 2.604%);
         width: -moz-calc(100% - 2.604%);
         width: calc(100% - 2.604%);
         min-width: -webkit-calc(100% - 2.604%);
         min-width: -moz-calc(100% - 2.604%);
         min-width: calc(100% - 2.604%);
     }
     #header .nav-3d ul li a {
         width: 90%;
     }
     #header nav ul.nav-2d li span.icn-new {
         left: 80%;
     }
 }
@media screen and (max-width: 940px) {
    #header nav ul.nav-1d li a {
        font-size : 0.9em;
    }
    #header nav ul.nav-1d li.personal h2 {
        font-size : 0.6em;
    }
    #header nav ul.nav-1d li.personal h2 img {
        width: 19%;
    }
    #header nav ul.nav-1d li:nth-child(3) a {
        letter-spacing: -.09rem;
    }
    #header nav ul.nav-1d li:nth-child(3) a::before {
        margin-right: 0;
    }
}
@media screen and (max-width: 768px) {
    .logo {
     margin-top: 28px;
    }
    #header nav {
        width: 80%;
    }
    #header nav ul.nav-1d li.personal h2 {
        width: 63%;
        font-size : 0.6em;
    }
    #header nav ul.nav-2d li a {
     width: 90%;
    }
    #header .nav-3d ul li a {
     width: 80%;
    }
    #header nav ul.li5 li a {
     width: 94%;
    }

}
 /* /헤더 */

/* 홈 오늘의 책 */
.today-home {
    position: relative;
    width: 20.5078125%; /* 210/1024 */
    float: left;
    top: -2px;
    left: -0.1953125%; /* 2/1024 */
}
.tbh-wrap {
    width: 100%;
    padding-left: 9.04761904761905%; /* 19/210 */
    text-align: left;
    background-image: url(/public_html/resource/images/common/tb-bg-w.png);
    background-repeat: repeat-y;
    background-position: left top;
    background-size: 100%;
}
.tbh-wrap > img {
    width: 89.00523560209424%; /* 170/191 */
    cursor : pointer;
}
.tb-bg-b > img {
    vertical-align: top;
}

/* 게이지 */
.dashngage {
    padding: 30px 2.9296% 24px; /* 30/1024 */
    width: 78.125%; /* 800/1024 */
    float: right;
}

/* 레벨별 폰트 컬러 */
.lv-1 li, .lv-1 span, .lv-1 h2, .lv-1 a {
    color: #eb441a !important;
}
.lv-2 li, .lv-2 span, .lv-2 h2, .lv-2 a {
    color: #ff8700 !important;
}
.lv-3 li, .lv-3 span, .lv-3 h2, .lv-3 a {
    color: #f2ba00 !important;
}
.lv-4 li, .lv-4 span, .lv-4 h2, .lv-4 a {
    color: #77b300 !important;
}
.lv-5 li, .lv-5 span, .lv-5 h2, .lv-5 a {
    color: #2c9c00 !important;
}
.lv-6 li, .lv-6 span, .lv-6 h2, .lv-6 a {
    color: #02b0a1 !important;
}
.lv-7 li, .lv-7 span, .lv-7 h2, .lv-7 a {
    color: #1a87ed !important;
}
.lv-8 li, .lv-8 span, .lv-8 h2, .lv-8 a {
    color: #8129eb !important;
}
.lv-9 li, .lv-9 span, .lv-9 h2, .lv-9 a {
    color: #eb4d84 !important;
}
.lv-10 li, .lv-10 span, .lv-10 h2, .lv-10 a {
    color: #009640 !important;
}

/* 게이지 */
.gage-wrap {
    position: relative;
    width: 100%;
    height: 149px;
    padding-bottom: 30px;
}
.mypage .gage-here {
    width: 7.11382113821138%; /* 70/984 */
}
.gage-here {
    top: 7px;
    width: 126px; /* 70/740 */
    height: 66px;
    position: absolute;
    opacity: 1;
    left: 0%; /* 최소 2.4%, 최대값은 책수별로 바뀜*/
    text-align: center;
    z-index: 11;
    outline: 1px solid transparent; /* for -moz- */

}

/* home에서 .gage-here 책 수 별 스팟 left 값
최소 2.4%

80권일때 10권 읽었을 때
left: 12.4%;
80권일때 20권 읽었을 때
left: 23.4%;
80권일때 30권 읽었을 때
left: 34.4%;
80권일때 40권 읽었을 때
left: 46%;
80권일때 50권 읽었을 때
left: 56.4%;
80권일때 60권 읽었을 때
left: 67.4%;
80권일때 70권 읽었을 때, 80권 읽었을 때
left: 78.4%; (최대값)

70권일때 10권 읽었을 때
left: 14%;
70권일때 20권 읽었을 때
left: 27%;
70권일때 30권 읽었을 때
left: 39%;
70권일때 40권 읽었을 때
left: 52%;
70권일때 50권 읽었을 때
left: 64%;
70권일때 60권 읽었을 때, 70권 읽었을 때
left: 77%; (최대값)

60권일때 10권 읽었을 때
left: 16.4%;
60권일때 20권 읽었을 때
left: 31%;
60권일때 30권 읽었을 때
left: 46%;
60권일때 40권 읽었을 때
left: 60%;
60권일때 50권 읽었을 때, 60권 읽었을 때
left: 75%; (최대값)

80권일때 레벨업 영역과 현재위치가 겹치는 경우(레벨업 목표달성 전 일 경우) : 목표까지 남은 책 표시
80권일때 레벨업 영역과 현재위치가 겹치는 경우(레벨업 = 나의 위치) & Level up단계를 넘었지만 같은 영역에 있을 경우
left: 60%;

70권일때 레벨업 영역과 현재위치가 겹치는 경우(레벨업 목표달성 전 일 경우) : 목표까지 남은 책 표시
70권일때 레벨업 영역과 현재위치가 겹치는 경우(레벨업 = 나의 위치) & Level up단계를 넘었지만 같은 영역에 있을 경우
left: 57%;

60권일때 레벨업 영역과 현재위치가 겹치는 경우(레벨업 목표달성 전 일 경우) : 목표까지 남은 책 표시
60권일때 레벨업 영역과 현재위치가 겹치는 경우(레벨업 = 나의 위치) & Level up단계를 넘었지만 같은 영역에 있을 경우
left: 53%;

*/

/* mypage에서 .gage-here 책 수 별 스팟 left 값
최소 3%

80권일때 10권 읽었을 때
left: 13.5%;
80권일때 20권 읽었을 때
left: 24.5%;
80권일때 30권 읽었을 때
left: 35.5%;
80권일때 40권 읽었을 때
left: 46.5%;
80권일때 50권 읽었을 때
left: 57.5%;
80권일때 60권 읽었을 때
left: 68.5%;
80권일때 70권 읽었을 때, 80권 읽었을 때
left: 79.3%; (최대값)

70권일때 최소
최소 3.5%
70권일때 10권 읽었을 때
left: 15.5%;
70권일때 20권 읽었을 때
left: 27.5%;
70권일때 30권 읽었을 때
left: 40.5%;
70권일때 40권 읽었을 때
left: 52.5%;
70권일때 50권 읽었을 때
left: 64.8%;
70권일때 60권 읽었을 때, 70권 읽었을 때
left: 77.6%; (최대값)

60권일때 10권 읽었을 때
left: 16.4%;
60권일때 20권 읽었을 때
left: 31%;
60권일때 30권 읽었을 때
left: 46%;
60권일때 40권 읽었을 때
left: 60%;
60권일때 50권 읽었을 때, 60권 읽었을 때
left: 75%; (최대값)

80권일때 레벨업 영역과 현재위치가 겹치는 경우(레벨업 목표달성 전 일 경우) : 목표까지 남은 책 표시
80권일때 레벨업 영역과 현재위치가 겹치는 경우(레벨업 = 나의 위치) & Level up단계를 넘었지만 같은 영역에 있을 경우
left: 62.6%;

70권일때 레벨업 영역과 현재위치가 겹치는 경우(레벨업 목표달성 전 일 경우) : 목표까지 남은 책 표시
70권일때 레벨업 영역과 현재위치가 겹치는 경우(레벨업 = 나의 위치) & Level up단계를 넘었지만 같은 영역에 있을 경우
left: 59.6%;

60권일때 레벨업 영역과 현재위치가 겹치는 경우(레벨업 목표달성 전 일 경우) : 목표까지 남은 책 표시
60권일때 레벨업 영역과 현재위치가 겹치는 경우(레벨업 = 나의 위치) & Level up단계를 넘었지만 같은 영역에 있을 경우
left: 55.6%;
*/
.mypage .gage-up {
    width: 13.21138211382114%; /* 130/984 */
}
.gage-up {
    width: 80px;
    height: 30px;
    position: absolute;
    right: 9px;
    opacity : 1;
    z-index: 5;
}

/* home .gage-up 책 수 별 밥그릇 left 값

80권일때 80%가 레벨업 (64권)
left: 67.4%;

70권일때 80%가 레벨업 (56권)
left: 60%;

56권일때 80%가 레벨업 (45권)
60권일때 80%가 레벨업 (48권)
62권일때 80%가 레벨업 (50권)
left: 56%;

*/


/* mypage .gage-up 책 수 별 밥그릇 left 값

80권일때 80%가 레벨업 (64권)
left: 65%;

70권일때 80%가 레벨업 (56권)
left: 62%;

56권일때 80%가 레벨업 (45권)
60권일때 80%가 레벨업 (48권)
62권일때 80%가 레벨업 (50권)
left: 58%;




*/
.level-up {
    -webkit-animation: level-up 1s infinite linear alternate;
    -o-animation: level-up 1s infinite linear alternate;
    -moz-animation: level-up 1s infinite linear alternate;
    animation: level-up 1s infinite linear alternate;
}
@-webkit-keyframes level-up {
    0% { opacity: 1; filter : alpha('Opacity=1'); }
    100% { opacity: 0; filter : alpha('Opacity=0'); }
}
@-moz-keyframes level-up {
    0% { opacity: 1; filter : alpha('Opacity=1'); }
    100% { opacity: 0; filter : alpha('Opacity=0'); }
}
@keyframes level-up {
    0% { opacity: 1; filter : alpha('Opacity=1'); }
    100% { opacity: 0; filter : alpha('Opacity=0'); }
}
.up-count {
    position: absolute;
    top: 0;
    left: 0;right: 0;margin: 0 auto;
    width: 100%; /* 60/130 */
    height: 30px;
    line-height: 28px;
    border: 1px solid #a7a9ac;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    background: #fff;
    font-size: 18px;
    letter-spacing: -0.25px;
    text-align: center;
    cursor: default;
    color: #a7a9ac;
}
.up-count:hover {
    color: #a7a9ac;
}
.up-count:after,
.up-count:before {
    position: absolute;
    content: "";
    display: block;
    width: 6px;
    height: 7px;
    left: 50%;
    top: 26px;
    background: #fff;
    border-left: 1px solid #a7a9ac;
    margin-top: 0;
    margin-left: -5px;
}
.up-count:before {
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg);
    left: 36px;
    top: 30px;
    z-index: 2;
}
.up-count:after {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    left: 40px;
    top: 26px;
    z-index: 1;
}

.gage-up.million {
    width: 100px;
}
.gage-up.million .up-count:before {
    left: 46px;
}
.gage-up.million .up-count:after {
    left: 50px;
}


div.gage-up img {
    width: 32.30769230769231%; /* 42/130 */
}
div.gage-up h2 {
    text-align: center;
    font-weight: 700;
}
div.gage-up div.medal {
    text-align: center;
}
.up-bg {
    position: absolute;
    left: 0;right: 0;margin: 0 auto;
    bottom: -5px;
    width: 61.53846153846154%; /* 80/130 */
    height: 26px;
    background: #d1d3d4;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
}
.gage-wrap h2, .gage-wrap h3, .gage-wrap .medal span {
    font-size: 0.8889em; /* 16/18 */
}
.gage-wrap h2 {
    height: 16px;
    font-weight: 400;
    line-height: 1;
}
.gage-wrap h3, .gage-wrap .medal span {
    font-weight: 400;
}
.gage-wrap h3 {
    line-height: 1;
    padding-top: 8px;
}
.gage {
    position: absolute;
    top: 67px;
    left: 0;right: 0;margin: 0 auto;
    width: 85%; /* 720/740 */
    height: 30px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    background: #f1f2f2;
}
.gage .gage-bar {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 0%; /* 11.11111111111111% 80/720 최소값 / 89.44444444444444% 644/720 최대값 */
    height: 26px;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
}
/* .gage .gage-bar 책 수 별 게이지바 width
최소(0~9권)와 최대값은 책 수와 상관없이 동일함.

80권일대 초기값
width: 10.111111%;
80권일때 10권 읽었을 때
width: 21.111111%;
80권일때 20권 읽었을 때
width: 32.111111%;
80권일때 30권 읽었을 때
width: 44.111111%;
80권일때 40권 읽었을 때
width: 55.111111%;
80권일때 50권 읽었을 때
width: 66.111111%;
80권일때 60권 읽었을 때
width: 77.111111%;
80권일때 70권 읽었을 때, 80권 읽었을 때
width: 89.44444444444444%; (최대값)

70권일때 초기값
width: 10.111111%;
70권일때 10권 읽었을 때
width: 24.111111%;
70권일때 20권 읽었을 때
width: 37.111111%;
70권일때 30권 읽었을 때
width: 49.111111%;
70권일때 40권 읽었을 때
width: 62.111111%;
70권일때 50권 읽었을 때
width: 75.111111%;
70권일때 60권 읽었을 때, 70권 읽었을 때
width: 89.44444444444444%; (최대값)

60권일때 초기값
width: 12.111111%;
60권일때 10권 읽었을 때
width: 27.111111%;
60권일때 20권 읽었을 때
width: 42.111111%;
60권일때 30권 읽었을 때
width: 57.111111%;
60권일때 40권 읽었을 때
width: 72.111111%;
60권일때 50권 읽었을 때, 60권 읽었을 때
width: 89.44444444444444%; (최대값)
*/

/* 레벨별 게이지 그라데이션 */
.lv-1 .gage-bar {
    background: #eb441a; /* Old browsers */
    background: -moz-linear-gradient(left,  #eb441a 0%, #f6b9ad 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #eb441a 0%,#f6b9ad 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #eb441a 0%,#f6b9ad 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb441a', endColorstr='#f6b9ad',GradientType=1 ); /* IE6-9 */
}
.lv-2 .gage-bar {
    background: #ff8700; /* Old browsers */
    background: -moz-linear-gradient(left,  #ff8700 0%, #f6d1ad 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #ff8700 0%,#f6d1ad 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #ff8700 0%,#f6d1ad 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8700', endColorstr='#f6d1ad',GradientType=1 ); /* IE6-9 */
}
.lv-3 .gage-bar {
    background: #f2ba00; /* Old browsers */
    background: -moz-linear-gradient(left,  #f2ba00 0%, #f6e5ad 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #f2ba00 0%,#f6e5ad 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #f2ba00 0%,#f6e5ad 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2ba00', endColorstr='#f6e5ad',GradientType=1 ); /* IE6-9 */
}
.lv-4 .gage-bar {
    background: #77b300; /* Old browsers */
    background: -moz-linear-gradient(left,  #77b300 0%, #e3f6ad 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #77b300 0%,#e3f6ad 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #77b300 0%,#e3f6ad 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77b300', endColorstr='#e3f6ad',GradientType=1 ); /* IE6-9 */
}
.lv-5 .gage-bar {
    background: #2c9c00; /* Old browsers */
    background: -moz-linear-gradient(left,  #2c9c00 0%, #c7f6ad 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #2c9c00 0%,#c7f6ad 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #2c9c00 0%,#c7f6ad 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c9c00', endColorstr='#c7f6ad',GradientType=1 ); /* IE6-9 */
}
.lv-6 .gage-bar {
    background: #02b0a1; /* Old browsers */
    background: -moz-linear-gradient(left,  #02b0a1 0%, #adf6e9 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #02b0a1 0%,#adf6e9 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #02b0a1 0%,#adf6e9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02b0a1', endColorstr='#adf6e9',GradientType=1 ); /* IE6-9 */
}
.lv-7 .gage-bar {
    background: #1a87ed; /* Old browsers */
    background: -moz-linear-gradient(left,  #1a87ed 0%, #addaf6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #1a87ed 0%,#addaf6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #1a87ed 0%,#addaf6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a87ed', endColorstr='#addaf6',GradientType=1 ); /* IE6-9 */
}
.lv-8 .gage-bar {
    background: #8129eb; /* Old browsers */
    background: -moz-linear-gradient(left,  #8129eb 0%, #cbadf6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #8129eb 0%,#cbadf6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #8129eb 0%,#cbadf6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8129eb', endColorstr='#cbadf6',GradientType=1 ); /* IE6-9 */
}
.lv-9 .gage-bar {
    background: #eb4d84; /* Old browsers */
    background: -moz-linear-gradient(left,  #eb4d84 0%, #f6adce 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #eb4d84 0%,#f6adce 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #eb4d84 0%,#f6adce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb4d84', endColorstr='#f6adce',GradientType=1 ); /* IE6-9 */
}
.lv-10 .gage-bar {
    background: #009640; /* Old browsers */
    background: -moz-linear-gradient(left,  #009640 0%, #d7f759 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #009640 0%,#d7f759 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #009640 0%,#d7f759 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009640', endColorstr='#d7f759',GradientType=1 ); /* IE6-9 */
}

.gage-num {
    position: absolute;
    top: 106px;
    left: 0;right: 0;margin: 0 auto;
    width: 80%; /* 629/720 */
    overflow: hidden;
}
.gage-num li {
    float: left;
    line-height: 1;
    font-size: 0.8889em; /* 16/18 */
    text-align: center;
}

/* gage-num li 갯수별 마진 */
.ten li {
    width: 10%;
}
.nine li {
    width: 11.11111111111111%;
}
.eight li {
    width: 12.5%;
}
.seven li {
    width: 14.28571428571429%;
}
.six li {
    width: 16.66666666666667%;
}
.four li {
    width: 25%;
}
.three li {
    width: 33.33333333333333%;
}
.two li {
    width: 50%;
}

div.gage-start {
    width: 10.81081081081081%; /* 80/740 */
    height: 50px;
    top: 57px;
    left: 0;
}
div.gage-start,
div.gage-clear {
    position: absolute;
    z-index: 5;
}
div.gage-clear {
    width: 10.81081081081081%; /* 80/740 */
    height: 70px;
    right: 10px;
    top: 36px;
}
div.gage-here div.medal,
div.gage-up div.medal {
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 4;
}
div.gage-clear div.medal {
    overflow: hidden;
}
div.gage-start div.medal span {
    width: 100%;
    height: 43px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    text-align: center;
    line-height: 50px;
    font-weight: 700;
    line-height: 38px;
    border-width: 3px;
    border-style: solid;
    background: #fff;
}
div.gage-here div.medal span,
div.gage-up div.medal span {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0 auto;
    width: 50px;
    height: 50px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-weight: 700;
}

div.gage-clear div.medal span {
    float: right;
    width: 100%;
    height: 70px;
    background: url(/public_html/resource/images/common/house.png) top right no-repeat;
    background-size: contain;
}
div.gage-clear div.last span {
    background: url(/public_html/resource/images/common/clear-last-bg.png) top right no-repeat;
}
div.gage-clear.lv-1 div.medal span  {
    background: url(/public_html/resource/images/main/reward-pear.png);
}
div.gage-clear.lv-2 div.medal span  {
    background: url(/public_html/resource/images/main/reward-apple.png);
}
div.gage-clear.lv-3 div.medal span  {
    background: url(/public_html/resource/images/main/reward-peach.png);
}
div.gage-clear.lv-4 div.medal span  {
    background: url(/public_html/resource/images/main/reward-kiwi.png);
}
div.gage-clear.lv-5 div.medal span  {
    background: url(/public_html/resource/images/main/reward-orange.png);
}
div.gage-clear.lv-6 div.medal span  {
    background: url(/public_html/resource/images/main/reward-lemon.png);
}
div.gage-clear.lv-7 div.medal span  {
    background: url(/public_html/resource/images/main/reward-graph.png);
}
div.gage-clear.lv-8 div.medal span  {
    background: url(/public_html/resource/images/main/reward-cherry.png);
}
div.gage-clear.lv-9 div.medal span  {
    background: url(/public_html/resource/images/main/reward-banana.png);
}
div.gage-clear.lv-10 div.medal span  {
    background: url(/public_html/resource/images/main/reward-acorn.png);
}
div.medal span {
    display: block;
}
.gage-title {
    position: absolute;
    top: 106px;
    left: 16px;
    font-size: 16px;
}
.gage-title h2 {font-size: 16px;}

.gage-reward {
position: absolute;
top: 106px;
right: 16px;
cursor: pointer;
}
.gage-reward a {
text-decoration: underline;
}
div.gage-start h2,
div.gage-start .medal span {
    color: #eb441a;
    text-align: left;
}


/* 레벨, 월, 주 */
.dash-wrap {
    border-top: 1px solid #e6e7e8;
    padding: 20px 0 0 0; /* 20/740, 10/740 */
    overflow: hidden;
}
.dash-wrap > div {
    float: left;
}
.d-level {
    width: 50%;/* 33.33333333333333%; 240/720 */
    padding-left: 1.3888%;  /* 10/720 */
}
.d-month, .d-week {
    padding-left: 2.7777%;  /* 20/720 */
    border-left: 1px solid #e6e7e8;
}
.d-month {
    width: 33%;/* 31.58333333333333%; 249/720 */
}
.d-week {
    width: 50%;/* 33.33333333333333%; 240/720 */
}
div.title {
    width: 100%;
    height: 22px;
}
div.title:after,
div.d-txt:after {
    clear:both;
}
div.d-title h2,
div.title h2 {
    padding-left: 6px;
    color: #414042;
    font-size: 0.8889em; /* 16/18 */
    line-height: 22px;
    display: inline-block;
    vertical-align: top;
    float: left;
    font-weight: 400;
}
.d-title {overflow: hidden;}
div.d-txt {
    padding-top: 10px;
    padding-right: 7.317%; /* 24/328 */
    padding-bottom: 12px;
    padding-left: 9.317%; /* 24/328 */
    text-align: right;
}
.d-week div.d-txt {
    padding-right: 0;
}
div.d-txt h2 {
    width: 100%;
    padding-top: 5px;
    display: inline-block;
    vertical-align: top;
    height: 26px;
    line-height: 26px;
    text-align: left;
    letter-spacing: -0.025em;
    font-size: 1.555555555555556em; /* 28/18 */
    font-weight: 700;
}
div.d-txt div {
    float: left;
}
.d-txt-1 {
    width: 42.3076%; /* 88/208 */
}
.d-txt-2 {
    width: 57.6923%; /* 120/208 */
}
div.d-txt span {
    padding-top: 6px;
    font-size: 0.7778em; /* 14/18 */
    display: block;
    text-align: left;
}
.d-level .d-txt h2:last-child {
    color: #bcbec0;
}
.d-level .d-txt h2 {
    color: #11b050 !important;
}

.d-level .d-txt h2.slash {
    width: 4%; /* 13/90 */
    display: inline-block;
    color: #bcbec0;
    text-align: right;
}
.d-month .d-txt h2 {
    color: #11b050;
}
.d-month .d-txt span {
    color: #76c883;
}
.d-week .d-txt h2 {
    color: #4e80d8;
}
.d-week .d-txt span {
    color: #94b1e4;
}
.text-count {color: #ffaba5 !important;}
@media screen and (max-width: 1044px) {
    div.d-txt h2 {
        padding-top: 3px;
        font-size: 1.33334em; /* 24/18 */
    }
}
@media screen and (max-width: 800px) {
    .tb-bg-b {
        height: 15px;
    }
    .dashngage {
        padding: 3px 2.9296% 10px;
        width: 78.125%; /* 800/1024 */
        float: right;
    }
    .gage-wrap {
        height: 120px;
        padding-bottom: 0px;
    }
    .gage-wrap h2, .gage-wrap h3, .gage-wrap .medal span {
        font-size: 0.7778em; /* 14/18 */
    }
    .gage {
        top: 57px;
    }
    .gage-up {
        top: 7px;
    }
    div.gage-start {
        top: 51px;
    }
    div.gage-start div.medal span {
        height: 40px;
        line-height: 34px;
    }
    .gage-num {
        top: 96px;
    }
    .gage-num li {
        font-size: 0.7778em; /* 14/18 */
    }
    .dash-wrap {
        padding: 10px 0 0 0; /* 20/740, 10/740 */
    }
    div.title {
        height: 17px;
    }
    div.title h2 {
        line-height: 17px;
    }
    div.title .icn {
        height: 17px !important;
        background-size: contain;
    }

    .d-month {
        padding: 0 1%;
    }
    .d-month div.d-txt {
        padding-right: 0;
    }
    .d-month span {
        letter-spacing: -.02em;
    }
    div.d-txt span {
        padding-top: 0;
    }

    .d-week .title h2 {
        letter-spacing: -1px;
    }
    .gage-title {
        position: absolute;
        top: 96px;
        left: 7px;
    }

    .gage-reward {
        top: 96px;
        right: 7px;
    }
}
/* /대쉬보드 */

/* book-list */

.book-list header .icn {
    float: left;
    width: 22px;
    height: 21px;
    margin-top: 7px;
}
.book-list header h1 {
    float: left;
    font-size: 1.3333em; /* 24/18 */
    color: #414042;
    font-weight: 400;
    height: 35px;
    line-height: 35px;
}
.book-wrap {
    padding-top: 20px;
    clear: left;
}
.book-wrap.bdt1 {
    border-top: 1px solid #d1d3d4;
}
.content-area {
    padding-top: 30px;
}
.book-wrap ul {
    *zoom: 1;
    padding-top: 20px;
}
.book-wrap > ul:first-child {
    padding-top: 0 !important;
}

.book-wrap ul:after {
    content:"";
    clear:both;
    display: block;
}

.hello .book-wrap ul li,
.interests .book-wrap ul li,
.assignment .book-wrap ul li,
.recently .book-wrap ul li {
    margin-bottom: 0;
}
.recomm article {
    padding: 26px 2.03252032520325% 5px;
}
.btn-level {
    padding: 0 0 15px;
    border-bottom: 1px solid #e6e7e8;
}
.book-wrap .btn-level {
    margin-top: -4px;
    padding-top: 15px;
    border-top: 1px solid #e6e7e8;
}
.btn-level > div {
    width: 98.67886178861789%; /*971/984*/
    margin: 0 auto;
    overflow: hidden;
    height: 40px;
}
.btn-level button {
    width: 16.0659114315139%; /*156/971*/
    margin: 0 0.3% 0; /*5/971*/
    float: left;
    line-height: 33px;
    height: 35px;
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}
.btn-level.all > div {
    height: 90px;
}
.btn-level.all > div div {
    padding-top: 15px;
    clear: left;
}
.btn-level.all > div div button {
    width: 24.4%;
    font-size: 0.9em;/* 0.7777777777777778em; */
}
.btn-level.all button {
    /* width: 14.1091658084449%; */ /*156/971*/
    margin: 0 0.3% 0; /*5/971*/
}
.btn-level.all button.btn-gray-all {
    width: 11%; /*114/971*/
}
/* 20180410 박보라 추가 */
.recomm.btn-faq-wrap article {
    padding: 20px 2.9296875% 20px 0;
}
.btn-faq {
    overflow: hidden;
}
.btn-faq h3 {
    width: 19.3158953722334%; /*192/994*/
    text-align: center;
    font-size: 1.666666666666667em;
    color: #4a8ab0;
    font-weight: bold;
    letter-spacing: -.025em;
    float: left;
    margin-top: -5px;
}
.btn-faq button {
    width: 26.55935613682093%; /*264/994*/
    float: left;
    height: 35px;
    border-radius: 35px;
    -webkit-border-radius: 35px;
    margin-left: 0.50301810865191%; /*5/994*/
    border: 1px solid #a7a9ac;
    box-shadow: 0 5px #a7a9ac;
    color: #a7a9ac;
    font-weight: bold;
}
.btn-faq button:first-of-type {
    margin-left: 0;
}
.btn-faq button:hover {
    border: 1px solid #248ab2;
    background: #248ab2;
    box-shadow: 0 4px #056084;
    top: 1px;
    color: #fff;
}
.btn-faq button:active {
    box-shadow: 0 0 #056084;
    top: 5px;
}
.btn-faq-sub .btn-faq {
    width: 101%;
    margin: 0 -2.03252032520325% 20px;
}
.btn-faq-sub {
    padding-top: 15px;
    margin-top: 60px;
    border-top: 1px solid #e6e7e8;
}

/* 20180410 박보라 추가 끝 */
.book-wrap ul li {
    float: left;
    width: 18.69918699186992%; /* 184/984 */
    margin-right: 1.6260162601626%; /* 16/984 */
    margin-bottom: 25px;
}
.book-wrap ul.content-area li {
    width: 18.9%; /* 186/982 */
    margin-right: 1.375%; /* 14/982 */
    margin-bottom: 40px;
}
.book-wrap ul.content-area li:nth-child(n+5) {
    margin-bottom: 0;
}

#home .book-wrap ul li {
    margin-bottom : 0;
}
.book-wrap ul li:nth-child(5n+5),
.interests .book-wrap ul li:last-child {
    margin-right: 0;
}

.book-wrap ul li:hover .book > img {
    border: 4px solid #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow:
    2px 1px 0px #fff,
    3px 2px 0px #dfdfdf,
    4px 3px 0px #fff,
    5px 4px 0px #dfdfdf,
    6px 5px 0px #fff,
    7px 6px 0px #a7a9ac,
    8px 7px 4px 2px rgba(102, 102, 102, 0.3);
    -webkit-box-shadow:
    2px 1px 0px #fff,
    3px 2px 0px #dfdfdf,
    4px 3px 0px #fff,
    5px 4px 0px #dfdfdf,
    6px 5px 0px #fff,
    7px 6px 0px #a7a9ac,
    8px 7px 4px 2px rgba(102, 102, 102, 0.3);
    box-shadow:
    2px 1px 0px #fff,
    3px 2px 0px #dfdfdf,
    4px 3px 0px #fff,
    5px 4px 0px #dfdfdf,
    6px 5px 0px #fff,
    7px 6px 0px #a7a9ac,
    8px 7px 4px 2px rgba(102, 102, 102, 0.3);
}
/* .book-wrap ul li:last-child {
    margin-right: 0;
} */

.book {
    position: relative;
    width: 100%; /* 184 */
}
.book > img {
    width: 95.50561797752809%; /* 174/184 */
}
.book img,
.book-wrap ul li.no-book:hover img {
    border: 4px solid #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    /* box-shadow 단독 사용시 ie에서 깨지는 bug 있음으로 border-radius 추가, 0은 넣으면 안됨*/
    -moz-box-shadow:
    2px 1px 0px #fff,
    3px 2px 0px #dfdfdf,
    4px 3px 0px #fff,
    5px 4px 0px #dfdfdf,
    6px 5px 0px #fff,
    7px 6px 0px #a7a9ac;
    -webkit-box-shadow:
    2px 1px 0px #fff,
    3px 2px 0px #dfdfdf,
    4px 3px 0px #fff,
    5px 4px 0px #dfdfdf,
    6px 5px 0px #fff,
    7px 6px 0px #a7a9ac;
    box-shadow:
    2px 1px 0px #fff,
    3px 2px 0px #dfdfdf,
    4px 3px 0px #fff,
    5px 4px 0px #dfdfdf,
    6px 5px 0px #fff,
    7px 6px 0px #a7a9ac;
}

.today-book {
    width: 91.30434782608696%; /* 168/184 */
    height: -webkit-calc(100% - 8px);
    height: -moz-calc(100% - 8px);
    height: calc(100% - 8px);
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 3;
    overflow: hidden;
    border: 4px solid #248ab2;
}
span.tb-star {
    float: right;
    width: 50px;
}
span.tb-star img {
    box-shadow: none !important;
    border-radius: 0 !important;
    border: 0 none;
}
.today-book h2 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 31px;
    font-size: 1.0555em; /* 19/18 */
    line-height: 31px;
    text-align: center;
    color: #fff;
    background: #248ab2;
    font-weight: 400;
}

.book-line {
    position: absolute;
    width: 9px;
    height: 9px;
    background: url(/public_html/resource/images/common/book-line.png) no-repeat;
}
.bl-btm_left {
    bottom: -7px;
    left: 2px;
}
.bl-top_right {
    top: 1px;
    right: 1px;
}
.book-shadow {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 95.65217391304348%; /* 176/184 */
    height: 100%;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #a7a9ac;
    z-index: 2;
}
.img-shadow {
    position: absolute;
    top: 4px;
    left: 0;
    width: 20%;
    height: -webkit-calc(100% - 8px);
    height: -moz-calc(100% - 8px);
    height: calc(100% - 8px);
    background: url(/public_html/resource/images/common/book-shadow.png) 4px top repeat-y;
    z-index: 2;
}



li.no-book a:hover .book-shadow {
    border: 1px solid #248ab2;
}
li.no-book span.book-shadow {
    background: none;
}
li.no-book div.img-shadow {
    display: none;
}

div.book:hover div.hv-menu {
    display: block;
}
.hv-menu {
    display: none;
    position: absolute;
    top: 50%;
    left: 4px;
    margin: -14.34782608695652% auto 0; /* 33/66 */
    height: 66px;
    background: rgba(0,0,0,0.5);
    z-index: 4;
    width: 90.76086956521739%; /* 167/184 */
}
.hv-menu div {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: -14.34782608695652% auto 0; /* 33/66 */
    width: 88.62275449101796%; /* 148/167 */
    height: 66px;
    overflow: hidden;
}
.hv-menu a {
    width: 46px; /* 46/148 */
    height: 46px; /* 46/66 */
    display: block;
    float: left;
    margin-left: 3.37837837837838%; /* 5/148 */
}
.hv-menu div a:first-child {
    margin-left: 0;
}
.hv-menu a:nth-child(2) {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.hv-menu div a:last-child {
    float: right;
    margin-left: 0;
}
.hv-menu a span {
    -webkit-transition: border-color 0.3s, background-color 0.3s;
    -moz-transition: border-color 0.3s, background-color 0.3s;
    -o-transition: border-color 0.3s, background-color 0.3s;
    -ms-transition: border-color 0.3s, background-color 0.3s;
    transition: border-color 0.3s, background-color 0.3s;
}
.hv-menu a span.icn-read:hover {
    border-color: #248ab2;
    background-color: #248ab2;
}
.hv-menu a span.icn-info:hover {
    border-color: #fbbc05;
    background-color: #fbbc05;
}

.hv-menu a span.icn-mybook:hover {
    border-color: #ef4245;
    background-color: #ef4245;
}

/* MyFavorite 제거 아이콘 */
.hv-menu a span.icn-mybook-min:hover {
    border-color: #a7a9ac;
    background-color: #a7a9ac;
}
@media screen and (max-width: 1000px) {
    .hv-menu a {
        width: 38px;
        height: 38px;
    }
}
@media screen and (max-width: 768px) {
    span.tb-star {
        width: 26.0416%; /* 50/192 */
    }
    .today-book {
        border: 2px solid #248ab2;
    }
    .today-book h2 {
        height: 23px;
        font-size: 0.9em;
        line-height: 23px;
    }
    .img-shadow {
        padding-bottom: 118.26%;
    }
    .bl-top_right {
        top: 1px;
        right: -1px;
    }
    .hv-menu {
        width: 89.67391304347826%; /* 168/184 */
        margin: -18.347826% auto 0;
    }
    .hv-menu a {
        width: 32px; /* 46/148 */
        height: 32px; /* 46/66 */
    }
}
/* /book-list */

/* footer */

footer {
    position: relative;
    clear: both;
    background: #414042;
    margin-top: -40px;
    height: 40px;
    display: block;
}
footer h1, footer a {
    line-height: 40px;
}
footer h1 {
    font-size: 0.7778em; /* 14/18 */
    float: left;
    color: #fff;
}
footer nav {
    overflow: hidden;
    float: right;
}
footer nav li {
    float: left;
    margin-left: 20px;
}
footer nav li a {
    color: #b4b4b5;
    font-weight: 300;
    font-size: 0.7778em; /* 14/18 */
}
footer nav li a:hover {
    font-weight: 400;
    color: #b4b4b5;
}
/* /footer */


/* 책정보 레이어팝업 */
#book-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    background: rgba(0,0,0,0);
}
.layer-close {
    position: absolute;
    top: -49px;
    right: 0;
}
#book-layer > div {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: -606px auto 0;
    padding: 25px 30px 30px; /* 26/750 */
    width: 556px; /* 750/1044 */
    height: 606px;
    border-top: 7px solid #248ab2;
    background: #fff;
}
#book-layer div.book {
    width: 200px; /* 192/698 */
    float: left;
}
#book-layer div.book div.bl-btm_left,
#book-layer div.book div.bl-btm_right {
    bottom: -6px;
}
#book-layer div.book span.book-shadow {
    top: -1px;
    background: none;
}
#book-layer div.layer-info-wrap {
    width: 286px; /* 482/698 */
    float: right;
    margin-left: 10px;
}
h1.layer-title {
    /* height: 62px; */
    color: #31439a;
    font-size: 1.5556em; /* 28/18 */
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.2;
    padding-bottom: 28px;
}
.layer-book-info {
    margin-top: 30px;
    padding: 20px 0 0;
    border-top: 1px solid #e6e7e8;
    border-bottom: 1px solid #e6e7e8;
}
.layer-book-info ul {
    overflow: hidden;
}
.layer-book-info ul li {
    float: left;
    font-size: 0;
    height: 16px;
    margin-bottom: 26px;
    width: 100%;
}
.layer-book-info ul li:last-child {
    margin-bottom: 20px;
}
.layer-book-info ul li h2,
.layer-book-info ul li h3,
.prevWrap h2 {
    font-weight: 400;
    display: inline-block;
    line-height: 16px;
    vertical-align: top;
}
.layer-book-info ul li h2,
.prevWrap h2 {
    background: url(/public_html/resource/images/common/dotted.png) 10px center no-repeat;
    padding-left: 18px;
    width: 44%; /* 80/200 */
    font-size: 14px; /* 14/18 */
}
.layer-book-info ul li h3 {
    font-weight: 300;
    font-size: 13px; /* 14/18 */
}
.star {
    display: inline-block;
}
.star li {
    padding-right: 4px;
}
.layer-btn {
    position: relative;
    padding-top: 10px;
    font-size: 0;
}
.layer-btn button {
    display: inline-block;
    margin-left: 10px;
    width: 138px; /* 150/482 */
    height: 45px;
    line-height: 43px;
    font-size: 18px;
}
.layer-btn button.btn-blue {
    margin-left: 0;
}

.prevWrap {
    padding:30px 0 0;
}
.prevWrap .preContents {
    background: #e6e7e8;
    padding:10px 29px;
    width:100%;
    height:182px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}
.prevWrap .preContents ul li {
    display:block;
    float:left;
    margin:0 13px 0; /* 8/688 */
}
.prevWrap .preContents ul li a > img {
    width: 100%;
    border: 1px solid #d2d3d4;
    max-width: 120px; /* **이미지 리사이징을 위한 임시방편 */
}
.prevWrap .preContents ul li.commentPreview {
    border-radius:5px;
    background:#fff;
    padding:10px;
    margin: 0 0.7267% 0 0; /* 7/688 */
    float:right;
    width: 33.7209%; /* 232/688 */
    height:159px;
    overflow-y:scroll;
    font-size:13px;
}


/* /책정보 레이어팝업 */

/******* //Layout *******/


/******* 모듈 *******/

    /* 공통 bg */
    .cmm-bg {
        border-radius: 10px;
        background: #fff;
        box-shadow: 0.5px 0.866px 4px 0px rgba(2, 8, 2, 0.2);
    }

    /* icon */
    div.d-title .icn { /* 타이틀 아이콘 */
        width: 24px;
        height: 22px;
        display: inline-block;
        vertical-align: top;
        float: left;
    }
    div.title .icn { /* 타이틀 아이콘 */
        width: 21px;
        height: 22px;
        display: inline-block;
        vertical-align: top;
        float: left;
    }
    .icn-lv {
        background: url(/public_html/resource/images/icn/icn-lv.png) left center no-repeat;
    }
    .icn-month {
        background: url(/public_html/resource/images/icn/icn-month.png) center center no-repeat;
    }
    .icn-week {
        background: url(/public_html/resource/images/icn/icn-week.png) center center no-repeat;
    }
    .icn-bullet {
        background: url(/public_html/resource/images/icn/icn-bullet.png) bottom left no-repeat;
    }

    .hv-menu .icn { /* 책 hover 했을 때 나오는 아이콘 */
        width: 100%; /* 50/192 */
        height: 100%; /* 50/256 */
        display: block;
        border-radius: 50px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border: 3px solid #fff;
    }
    .icn-read {
        background: url(/public_html/resource/images/icn/icn-read.png) center center no-repeat;
    }
    .icn-info {
        background: url(/public_html/resource/images/icn/icn-info.png) center center no-repeat;
    }
    .icn-mybook {
        background: url(/public_html/resource/images/icn/icn-mybook.png) center center no-repeat;
    }
    .icn-mybook-min {
        background: url(/public_html/resource/images/icn/icn-mybook-min.png) center center no-repeat;
    }
    .icn-count {
        background: url(/public_html/resource/images/icn/icn-count.png) center center no-repeat;
    }
    .icn-count {
        background: url(/public_html/resource/images/icn/icn-count.png) center center no-repeat;
    }
    .icn-mylv {
        background: url(/public_html/resource/images/icn/icn-mylevel.png) center center no-repeat;
    }
    .icn-mylv {
        background: url(/public_html/resource/images/icn/icn-mylevel.png) center center no-repeat;
    }
    .icn-time {
        background: url(/public_html/resource/images/icn/icn-time.png) center center no-repeat;
    }
    .icn-lexile {
        background: url(/public_html/resource/images/icn/icn-lexile.png) center center no-repeat;
    }

    div.layer-btn button span.icn { /* 책정보 레이어 My Favorite 플러스 아이콘 */
        width: 19px;
        height: 19px;
        margin-top: 13px;
        margin-right: 8px;
        display: inline-block;
        vertical-align: top;
    }
    .icn-btn_plus {
        background: url(/public_html/resource/images/icn/icn-btn_plus.png) center center no-repeat;
    }
    .icn-btn_min {
        background: url(/public_html/resource/images/icn/icn-btn_min.png) center center no-repeat;
    }
    .icn-book {
        height: 18px;
        display: block;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        background: url(/public_html/resource/images/icn/icn-table_read.png) center center no-repeat;
    }
    @media screen and (max-width: 1044px) {
        .hv-menu .icn {
            border: 2px solid #fff;
            background-size: 100%;
        }
    }
    @media screen and (max-width: 768px) {
        div.layer-btn button span.icn {
            margin-right: 5px;
        }
    }


    /* 클릭하는 효과 나는 button style (reset) */
    .btn-click {
        border: none;
        background: none;
        cursor: pointer;
        display: inline-block;
        font-size: 18px;
        font-weight: 400;
        outline: none;
        position: relative;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }
    .btn-click:after {
        content: '';
        position: absolute;
        z-index: -1;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }
    /* .btn-cyan, btn-blue, btn-violet, btn-redLine, btn-gray 공통 */
    .btn-cyan, .btn-blue, .btn-violet, .btn-redLine, .btn-gray, .btn-lightB, .btn-orange {
        color: #fff;
        -webkit-transition: none;
        -moz-transition: none;
        transition: none;
        border-radius: 4px;
    }

    /* btn-cyan */
    .btn-cyan {
        border-radius: 4px;
        background: #248ab2;
        box-shadow: 0 5px #056084;
    }
    .btn-cyan:hover {
        box-shadow: 0 4px #056084;
        top: 1px;
    }
    .btn-cyan:active {
        box-shadow: 0 0 #056084;
        top: 5px;
    }

    /* btn-gray */
    .btn-gray {
        border-radius: 4px;
        background: #a7a9ac;
        box-shadow: 0 5px #808285;
    }
    .btn-gray:hover {
        box-shadow: 0 4px #808285;
        top: 1px;
    }
    .btn-gray:active {
        box-shadow: 0 0 #808285;
        top: 5px;
    }

    /* btn-blue */
    .btn-blue {
        border-radius: 4px;
        background: #367ec1;
        box-shadow: 0 5px #195790;
    }
    .btn-blue:hover {
        box-shadow: 0 4px #195790;
        top: 1px;
    }
    .btn-blue:active {
        box-shadow: 0 0 #195790;
        top: 5px;
    }

    /* btn-orange */
    .btn-orange {
        border-radius: 4px;
        background: #ec7614;
        box-shadow: 0 5px #be5500;
    }
    .btn-orange:hover {
        box-shadow: 0 4px #be5500;
        top: 1px;
    }
    .btn-orange:active {
        box-shadow: 0 0 #be5500;
        top: 5px;
    }

    /* btn-violet */
    .btn-violet {
        box-shadow: 0 5px #602084;
        background: #8e47b6;
    }
    .btn-violet:hover {
        box-shadow: 0 4px #602084;
        top: 1px;
    }
    .btn-violet:active {
        box-shadow: 0 0 #602084;
        top: 5px;
    }

    /* btn-redLine */
    .btn-redLine {
        border: 1px solid #ea485b;
        box-shadow: 0 5px #ea485b;
        background: #fff;
        color: #ea485b;
        line-height: 43px;
    }
    .btn-redLine:hover {
        box-shadow: 0 4px #ea485b;
        top: 1px;
    }
    .btn-redLine:active {
        box-shadow: 0 0 #ea485b;
        top: 5px;
    }

    /* btn-lightB */
    .btn-lightB {
        border-radius: 4px;
        background: #4356a4;
        box-shadow: 0 5px #233684;
    }
    .btn-lightB:hover {
        box-shadow: 0 4px #233684;
        top: 1px;
    }
    .btn-lightB:active {
        box-shadow: 0 0 #233684;
        top: 5px;
    }

    /* btn-yellow */
    .btn-yellow {
        color: #ffcc00;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 5px #ffcc00;
        border: 1px solid #ffcc00;
    }
    .btn-yellow:hover {
        box-shadow: 0 4px #ffcc00;
        top: 1px;
    }
    .btn-yellow:active {
        box-shadow: 0 0 #ffcc00;
        top: 5px;
    }
    .btn-yellow.act {
        color: #fff;
        background: #ffcc00;
        box-shadow: 0 5px #ecac00;
    }
    .btn-yellow.act:hover {
        box-shadow: 0 4px #ecac00;
    }
    .btn-yellow.act:active {
        box-shadow: 0 0 #ecac00;
    }

    /* btn-green */
    .btn-green {
        color: #95c712;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 5px #95c712;
        border: 1px solid #95c712;
    }
    .btn-green:hover {
        box-shadow: 0 4px #95c712;
        top: 1px;
    }
    .btn-green:active {
        box-shadow: 0 0 #95c712;
        top: 5px;
    }
    .btn-green.act {
        color: #fff;
        background: #95c712;
        box-shadow: 0 5px #7ba214;
    }
    .btn-green.act:hover {
        box-shadow: 0 4px #7ba214;
    }
    .btn-green.act:active {
        box-shadow: 0 0 #7ba214;
    }

    /* btn-darkgreen */
    .btn-darkgreen {
        color: #16bea0;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 5px #16bea0;
        border: 1px solid #16bea0;
    }
    .btn-darkgreen:hover {
        box-shadow: 0 4px #16bea0;
        top: 1px;
    }
    .btn-darkgreen:active {
        box-shadow: 0 0 #16bea0;
        top: 5px;
    }
    .btn-darkgreen.act {
        color: #fff;
        background: #16bea0;
        box-shadow: 0 5px #068e76;
    }
    .btn-darkgreen.act:hover {
        box-shadow: 0 4px #068e76;
    }
    .btn-darkgreen.act:active {
        box-shadow: 0 0 #068e76;
    }

    /* btn-skyblue */
    .btn-skyblue {
        color: #329bde;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 5px #329bde;
        border: 1px solid #329bde;
    }
    .btn-skyblue:hover {
        box-shadow: 0 4px #329bde;
        top: 1px;
    }
    .btn-skyblue:active {
        box-shadow: 0 0 #329bde;
        top: 5px;
    }
    .btn-skyblue.act {
        color: #fff;
        background: #329bde;
        box-shadow: 0 5px #187cbc;
    }
    .btn-skyblue.act:hover {
        box-shadow: 0 4px #187cbc;
    }
    .btn-skyblue.act:active {
        box-shadow: 0 0 #187cbc;
    }

    /* btn-purple */
    .btn-purple {
        color: #6f58d0;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 5px #6f58d0;
        border: 1px solid #6f58d0;
    }
    .btn-purple:hover {
        box-shadow: 0 4px #6f58d0;
        top: 1px;
    }
    .btn-purple:active {
        box-shadow: 0 0 #6f58d0;
        top: 5px;
    }
    .btn-purple.act {
        color: #fff;
        background: #6f58d0;
        box-shadow: 0 5px #503ca4;
    }
    .btn-purple.act:hover {
        box-shadow: 0 4px #503ca4;
    }
    .btn-purple.act:active {
        box-shadow: 0 0 #503ca4;
    }


    /* btn-pink */
    .btn-pink {
        color: #fd6577;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 5px #fd6577;
        border: 1px solid #fd6577;
    }
    .btn-pink:hover {
        box-shadow: 0 4px #fd6577;
        top: 1px;
    }
    .btn-pink:active {
        box-shadow: 0 0 #fd6577;
        top: 5px;
    }
    .btn-pink.act {
        color: #fff;
        background: #fd6577;
        box-shadow: 0 5px #e44558;
    }
    .btn-pink.act:hover {
        box-shadow: 0 4px #e44558;
    }
    .btn-pink.act:active {
        box-shadow: 0 0 #e44558;
    }

    /* btn-gray-all */
    .btn-gray-all {
        color: #808285;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 5px #d1d3d4;
        border: 1px solid #d1d3d4;
    }
    .btn-gray-all:hover {
        box-shadow: 0 4px #d1d3d4;
        top: 1px;
    }
    .btn-gray-all:active {
        box-shadow: 0 0 #d1d3d4;
        top: 5px;
    }
    /* btn-gray-content */
    .btn-gray-content {
        color: #a7a9ac;
        border-radius: 4px;
        background: #e6e7e8;
        box-shadow: 0 5px #d1d3d4;
    }
    .btn-gray-content:hover {
        box-shadow: 0 4px #d1d3d4;
        top: 1px;
    }
    .btn-gray-content:active {
        box-shadow: 0 0 #d1d3d4;
        top: 5px;
    }
    .btn-gray-content.act {
        color: #fff;
        background: #414042;
        box-shadow: 0 5px #000000;
    }
    .btn-gray-content.act:hover {
        box-shadow: 0 4px #000000;
    }
    .btn-gray-content.act:active {
        box-shadow: 0 0 #000000;
    }


    /* select */
    .select {
        overflow: hidden;
    }
        .select h2 {
            font-size: 0.7778em; /* 14/18 */
            float: right;
            font-weight: 400;
            height: 35px;
            line-height: 35px;
        }
        .select select {
            width: 100px;
            height: 35px;
            padding: 0 5px;
            margin-left: 10px;
            float: right;
            border: 1px solid #d2d3d4;
            font-size: 0.7778em; /* 14/18 */
            color: #a7a9ac;
            -webkit-appearance: none; /* 네이티브 외형 감추기 */
            -moz-appearance: none; appearance: none;
            background: url(/public_html/resource/images/common/select-arrow.png) no-repeat 95% 50%, #fff; /* 화살표 모양의 이미지 */

        }
        .select.area select {
            background-position: 96% 50%; /* 화살표 모양의 이미지 위치 수정 */
        }

        .select.level select {
            background-position: 90% 50%; /* 화살표 모양의 이미지 위치 수정 */
        }
        /* IE 10, 11의 네이티브 화살표 숨기기 */
        select::-ms-expand { display: none; }


    /* paginate */
    /* pag */
    .dataTables_paginate{
        position:relative;
        padding-top:30px;
        margin: 0 auto;
        text-align: center;
        font-size: 0;
    }
    .dataTables_paginate img{vertical-align:-1px;}
    .dataTables_paginate a{display:inline-block; zoom:1; *display:inline; cursor:pointer;}

    .dataTables_paginate span{
        display: inline-block;
        vertical-align: top;
    }
    .dataTables_paginate span a{
        width:32px;
        height:32px;
        line-height:30px;
        margin:0 2px;
        border:1px solid #d1d3d4;
        border-radius:2px;
        color: #58595b;
        font-weight:400;
        font-size: 14px; /* 14/18 */
    }
    .dataTables_paginate span a.paginate_active{
        border:1px solid #a7a9ac;
        background:#a7a9ac;
        color:#fff;

    }

    .dataTables_paginate .previous,
    .dataTables_paginate .next{
        margin:0 8px;
    }

    .dataTables_paginate .previous,
    .dataTables_paginate .next{
        width:42px;
        height:32px;
        text-indent:-1000em;
        overflow:hidden;
        background:url(/public_html/resource/images/common/btn_pag.png) no-repeat;
        border:0 none;
        border-radius:0;
    }

    .dataTables_paginate .previous{background-position:0 0;}
    .dataTables_paginate .next{background-position:100% 0;}

    /* table */
    table {
        width: 100%;
    }
    table.blue {
        margin-top: 5px;
    }
    table th, table td {
        font-size: 0.7778em; /* 14/18 */
        font-weight: 400;
        text-align: center;
        height: 40px;
    }
    table.blue thead {
        background: #4356a4;
    }
    table.blue thead th {
        border-right: 1px solid #fff;
        color: #fff;
        white-space: normal;
        word-break: normal;
    }
    table.blue thead th.bd-white {
        border-bottom: 1px solid #fff;
    }
    table.blue thead th:last-child {
        border-right: 0 none;
    }
    table.blue tbody td {
        border-right: 1px solid #d1d3d4;
        border-bottom: 1px solid #d1d3d4;
    }
    table.blue tbody td:first-child {
        border-left: 1px solid #d1d3d4;
    }
    td.table-title {
        text-align: left;
        padding: 0 10px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        -o-text-overflow:ellipsis;
        -ms-text-overflow:ellipsis;
    }
    .table-lv {
        background-image: url(/public_html/resource/images/library/table-lv-bg.png);
        background-repeat: no-repeat;
        -ms-background-position-x: center;
        background-position-x: center;
        color: #fff;
    }
    .table-lv1 {
        -ms-background-position-y: 9px;
        background-position-y: 9px;
    }
    .table-lv2 {
        -ms-background-position-y: -26px;
        background-position-y: -26px;
    }
    .table-lv3 {
        -ms-background-position-y: -61px;
        background-position-y: -61px;
    }
    .table-lv4 {
        -ms-background-position-y: -97px;
        background-position-y: -97px;
    }
    .table-lv5 {
        -ms-background-position-y: -131px;
        background-position-y: -131px;
    }
    .table-lv6 {
        -ms-background-position-y: -168px;
        background-position-y: -168px;
    }
    .indent {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
    } /* 글씨 안보이게 */

    .ellipsis {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        -o-text-overflow:ellipsis;
        -ms-text-overflow:ellipsis;
    } /* 말줄임 */

    /* float 모듈 */
    .float-li {
        overflow: hidden;
    }
        .float-li li {
            float: left;
        }

    /* hr */
    hr {
        width: 100%;
        height: 0;
        border: none;
        border: 1px solid #dcddde;
        border-bottom: 0px;
        padding: 0;
        margin: 44px 0 0;
        content:"";
        clear:both;
    }


.nameoverflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #248ab2;
}

.blank {
    width: 100%;
    height: 100px !important;
}
.lh_15 { /*2017-09-11*/
    line-height: 1.5 !important;
}
/******* //모듈 *******/