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

    박보라
    Copryright 2017 Chungchuy.com

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

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

@charset "utf-8";

/* my favorite의 탭, 검색 */
.tab-wrap {
    padding: 10px;
    margin-bottom: -5px;
    width: 100%;
    height: 55px;
    position: relative;
}
.tab-wrap ul {
    padding-top: 0;
    width: 100%;
}
.tab-wrap ul li:first-child {
    width: 17.27642276422764%; /* 170/984 */
}
.tab-wrap ul li:last-child {
    float: right;
}
.tab-wrap ul li {
    float: left;
    width: 11.17886178861789%; /* 110/984 */
    margin-right: 0.50813008130081%; /* 5/984 */
}

.tab-wrap ul li a {
    display: block;
    font-size: 0.7778em; /* 14/18 */
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    background: #dcddde;
    color: #939598;
}
.tab-wrap ul li a:hover,
.tab-wrap ul li a.tab-act {
    background: #4356a4;
    color: #fff;
    font-weight: bold;
}
.tab-wrap div {
    position: absolute;
    top: 10px;
    right: 10px;
    height: 35px;
}
.tab-wrap div input {
    display: inline-block;
    vertical-align: top;
    padding: 0 15px;
    width: 70%;/* 191px */
    height: 33px;
    line-height: 33px;
    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    border: 1px solid #d1d3d4;
    font-size: 0.7778em;
    color: #414042;
}
header {
    position: relative;
}
div.search-wrap {
    width: 34%;
    position: absolute;
    top: 0;
    right: 10px;
    height: 35px;
}
div.search-wrap input {
    display: inline-block;
    vertical-align: top;
    padding: 0 15px;
    width: 70%;/* 191px */
    height: 33px;
    line-height: 33px;
    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    border: 1px solid #d1d3d4;
    font-size: 0.7778em;
    color: #414042;
    float: right;
}
div.search-wrap button {
    display: inline-block;
    vertical-align: top;
    padding: 0;
    margin: 0 0 0 5px;
    border: 0 none;
    width: 35px;
    height: 35px;
    border-radius: 35px;
    -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
    background-color: #4356a4;
    background-image: url(/public_html/resource/images/icn/icn-search.png);
    cursor: pointer;
    float: right;
}
input-placeholder{color:#a5a5a5;}
::-webkit-input-placeholder{color:#a5a5a5;} /* 웹킷 전용 속성 */
input:-moz-placeholder{color:#a5a5a5;} /* 파이어폭스 전용 속성 */

h2.fav {
    margin: 2px 0 -8px 10px;
    float: left;
    width: 7%;
    height: 28px;
    border: 1px solid #248ab2;
    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    line-height: 26px;
    font-size: 0.7778em;
    text-align: center;
    color: #248ab2;
    cursor : default;
}
h2.fav.more {
    float: right;
    cursor : pointer;
}
h2.fav.more.type2 {
    width: 11.81%;
}
.tab-wrap li.select {
    position: static;
    width: 17%;
}
.tab-wrap li.select.area {
    width: 20%;
}
.tab-wrap li.select.level {
    width: 10%;
}
.tab-wrap li.select select {
    width: 100%;

    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
}
@media screen and (max-width: 800px) {
    .tab-wrap ul li {
        width: 14%; /* 110/1004 */
    }
    .tab-wrap li.select {
        width: 20%;
    }
    .tab-wrap div {
        width: 25%;
    }
    .tab-wrap div input {
        width: 70%;/* 164px; */
    }
}
@media screen and (max-width: 768px) {
    .tab-wrap ul li:first-child {
        width: 25%; /* 170/1004 */
    }
    .tab-wrap ul li {
        float: left;
    }
    .tab-wrap div {
        width: 26.3%;
    }
    .tab-wrap div input {
        width: 62%;/* 100px !important; */
    }
}
.tab-wrap div button {
    display: inline-block;
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0 none;
    width: 35px;
    height: 35px;
    border-radius: 35px;
    -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
    background-color: #4356a4;
    background-image: url(/public_html/resource/images/icn/icn-search.png);
    cursor: pointer;
}

/* my favorite 책 없을 때 */
.add-book {
    width: 100%;
    height: 455px;
    margin-top: 15px;
    border: 1px solid #d1d3d4;
    background: url(/public_html/resource/images/library/addbook-bg.png) center bottom no-repeat;
}
.add-book.level,
.add-book.no-content {
    margin-top: 20px;
    margin-bottom: 20px;
}
.add-book a {
    display: block;
    width: 215px;
    height: 105px;
    padding: 20px;
    margin: 118px auto 0;
}
.add-book.level a {
    color: #248ab2;
    text-align: center;
    font-weight: bolder;
    font-size: 1.111111111111111em; /*20*/
}
.no-content a {
     width: 496px;
}

header.mypage {
    height: 49px;
}
.history-graph {
    padding: 0 0 0;
}
.graph-wrap {
    padding: 20px 20px;
    background: #f8f8f8;
    width: 100%;
    position: relative;
}
.graph-wrap h2 {
    padding-top: 18px;
    color: #58595b;
    font-size: 1em;
    text-align: center;
}
.graph {
    position: relative;
    background: #fff;
    width: 100%;
    padding: 30px 40px 0 35px;
}
.graph-txt {
    position: absolute;
    z-index: 5;
    margin: 0 auto;
    padding: 0 55px 0 65px;
    top: 318px;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%; /* 984/1024 */
}
.graph-txt h3 {
    float: left;
    font-size: 0.8889em; /* 16/18 */
    color: #909090;
    width: 10%;
    text-align: center;
}
.graph-value {
    position: absolute;
    width: 91.9715%; /* 905/984 */
    height: 241px;
}
.graph-value div {
    position: absolute;
    width: 10%;/* 50/905 */
    height: 40px;
    line-height: 40px;
    float: left;
    text-align: center;
    font-size: 0.8889em; /* 16/18 */
    color: #909090;
}
.graph-value div:nth-child(1) {
    bottom: 10px;
}
.graph-value div:nth-child(2) {
    left: 10%;
    bottom: 100px;
}
.graph-value div:nth-child(3) {
    left: 20%;
    bottom: 60px;
}
.graph-value div:nth-child(4) {
    left: 30%;
    bottom: 200px;
}
.graph-value div:nth-child(5) {
    left: 40%;
    bottom: 120px;
}
.graph-value div:nth-child(6) {
    left: 50%;
    bottom: 120px;
}
.graph-value div:nth-child(7) {
    left: 60%;
    bottom: 100px;
}
.graph-value div:nth-child(8) {
    left: 70%;
    bottom: 60px;
}
.graph-value div:nth-child(9) {
    left: 80%;
    bottom: 200px;
}
.graph-value div:nth-child(10) {
    left: 90%;
    bottom: 120px;
}
@media screen and (max-width: 800px) {
    .graph-value {
        width: 88.9715%;
    }
}

/* svg 그래프 스타일 */
.graph-svg-wrap {
    padding-top: 41px;
}
.graph svg {
    width: 100%; /* 905 */
}
.graph svg > g {
    width: 100%; /* 905 */
}
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.axis line {
    display: none;
}
.bar {
  fill: none;
  width: 3.5248%;/* 50/905 */
}
.bar:nth-child(2) {
    fill: #367ec1; /* nature */
    x: 3.7348%; /* 70/905 */
}
.bar:nth-child(3) {
    fill: #8e47b6; /* Family & Friends */
    x: 13.5138%; /* 249/905 */
}
.bar:nth-child(4) {
    fill: #99bd1d; /* Culture */
    x: 53.5138%; /* 430/905 */
}
.bar:nth-child(5) {
    fill: #f7ab28; /* Activity */
    x: 33.4033%; /* 610/905 */
}
.bar:nth-child(6) {
    fill: #ea485b; /* Fun Stories */
    x: 43.2928%; /* 790/905 */
}
.bar:nth-child(7) {
    fill: #367ec1; /* nature */
    x: 53.7348%; /* 70/905 */
}
.bar:nth-child(8) {
    fill: #8e47b6; /* Family & Friends */
    x: 63.5138%; /* 249/905 */
}
.bar:nth-child(9) {
    fill: #99bd1d; /* Culture */
    x: 73.5138%; /* 430/905 */
}
.bar:nth-child(10) {
    fill: #f7ab28; /* Activity */
    x: 83.4033%; /* 610/905 */
}
.bar:nth-child(11) {
    fill: #f7ab28; /* Activity */
    x: 93.4033%; /* 610/905 */
}
.x.axis path,
.x.axis text {
  display: none;
}

h1 {
  margin-bottom: -1%;
}

/* my history 독서이력 화살표 */
.month-select {
    overflow: hidden;
    width: 230px;
    margin: 0 auto;
}
.month-select span,
.month-select h1 {
    float: left;
}
.month-select h1 {
    margin-top: -3px;
    padding: 0 20px;
    font-size: 1.7778em; /* 32/18 */
    height: 32px;
    line-height: 32px;
}

.month-select .icn {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    display: block;
    background-color: #4356a4;
    background-image: url(/public_html/resource/images/icn/icn-history-arrow.png);
    background-position: center left;
    background-repeat: no-repeat;
    cursor: pointer;
}
.month-select span.icn-his-arr-r {
    background-position: center right;
}

/* content-area */
.content-area li a h1 {
    margin-top: 10px;
    width: 100%;
    font-size: 1em; /* 18px */
    letter-spacing: -0.025px;
    font-weight: 400;
    text-align: center;
    color: #58595b;
}
.content-area li a h2.fav {
    width: 32.25806451612903%; /* 60/186 */
    margin: 11px auto 0;
    float: none;
}
.content-area li a div {
    width: 30.6122%; /* 60/196 */
    height: 30px;
    line-height: 27px;
    margin: 8px auto 0;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border: 1px solid #248ab2;
    text-align: center;
    font-size: 1em;
    color: #248ab2;
}
.content-area li a {position: relative; display: block;}
.content-area li a span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 768px) {
    .content-area li a div {
        width: 40%;
    }
    .content-area li a h1 {
        height: 42px;
    }
}

/* my interests */
.interest-bg {
    background: url(/public_html/resource/images/mypage/interest-bg.png) right top no-repeat;
}
.interest {
    width: 100%;
    height: 1048px;
    clear: left;
    position: relative;
    /* top: -27px; */
}
.interest > div {
    position: absolute;

    width: 100%;
    height: 100%;
    padding-top: 160px;

}


.interest .fieldWrap .field {
    width:88.8671%; /* 910/1024 */
    height:54px;
    position:relative;
    margin:0 auto 31px;
    background:url(/public_html/resource/images/mypage/white-bg.png) right center no-repeat;
}
.interest .fieldWrap .field h4 {
    position:absolute;
    top:-14px;
    left:0px;
}
.interest .fieldWrap .field .chapterWrap {
    width:52.3077%; /* 476/910 */
    height:13px;
    background:#e6e7e8;
    border-radius:10px;
    position:absolute;
    top:22px;
    right: 4.3956%; /* 40/910 */
}
.interest .fieldWrap .field .chapterWrap span {
    display:inline-block;
    width: 21px;
    height: 21px;
    line-height: 15px;
    background:#fff;
    border-radius:50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    position:absolute;
    top:-5px;
    font-weight:bold;
    cursor: pointer;
    text-align: center;
    font-size: 0.6667em; /* 12/18 */
}
.interest .fieldWrap .field .chapterWrap span.red {
    border:3px solid #eb485b; color:#eb485b;
}
.interest .fieldWrap .field .chapterWrap span.yellow {
    border:3px solid #f8ab29; color:#f8ab29;
}
.interest .fieldWrap .field .chapterWrap span.green {
    border:3px solid #99bd1d; color:#99bd1d;
}
.interest .fieldWrap .field .chapterWrap span.purple {
    border:3px solid #8f47b7; color:#8f47b7;
}
.interest .fieldWrap .field .chapterWrap span.blue {
    border:3px solid #377dc2; color:#377dc2;
}
.interest .fieldWrap .field .chapterWrap span.one {left:0;}
.interest .fieldWrap .field .chapterWrap span.two {left:24.1596%; /* 115/476 */ }
.interest .fieldWrap .field .chapterWrap span.three {left:48.3193%; /* 230/476 */ }
.interest .fieldWrap .field .chapterWrap span.four {left:72.4790%; /* 345/476 */}
.interest .fieldWrap .field .chapterWrap span.five {left:96.6387%; /* 460/476 */}
.interest .fieldWrap .field .chapterWrap span.on {
    width: 36px;
    height: 36px;
    line-height: 30px;
    color:#ffffff;
    border-radius:50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    font-size:0.8889em; /* 16/18 */
    top:-14px;
    text-align: center;
    box-shadow: 0.5px 0.866px 3px 0px rgba(4, 5, 5, 0.2);
    -moz-box-shadow: 0.5px 0.866px 3px 0px rgba(4, 5, 5, 0.2);
    -webkit-box-shadow: 0.5px 0.866px 3px 0px rgba(4, 5, 5, 0.2);
}

.interest .fieldWrap .field .chapterWrap span.red.on{background:#eb485b; left:-2.1008%; /* 10/476 */}
.interest .fieldWrap .field .chapterWrap span.yellow.on{background:#f8ab29; left:22.0588%; /* 105/476 */}
.interest .fieldWrap .field .chapterWrap span.green.on{background:#99bd1d; left:46.2184%; /* 220/476 */}
.interest .fieldWrap .field .chapterWrap span.purple.on{background:#8f47b7; left:70.3781%; /* 335/476 */}
.interest .fieldWrap .field .chapterWrap span.blue.on{background:#377dc2; left:94.5378%; /* 450/476 */}

@media screen and (max-width: 800px) {
    .interest .fieldWrap .field h4 {
        top:-9px;
    }
    .interest .fieldWrap .field h4 img {
        width: 88%;
    }
    .interest .fieldWrap .field {
        width:88.9322%; /* 683/768 */
        background:url(/public_html/resource/images/mypage/white-bg-pad.png) right center no-repeat;
    }
    .interest .fieldWrap .field .chapterWrap {
        width:53.2642%; /* 364/683 */
    }
    .interest .fieldWrap .field .chapterWrap span.two {left:24.1758%; /* 88/364 */ }
    .interest .fieldWrap .field .chapterWrap span.three {left:48.0769%; /* 175/364 */ }
    .interest .fieldWrap .field .chapterWrap span.four {left:72.2527%; /* 263/364 */}
    .interest .fieldWrap .field .chapterWrap span.five {left:94.5054%; /* 344/364 */}

    .interest .fieldWrap .field .chapterWrap span.yellow.on{ left:21.4285%; /* 78/364 */}
    .interest .fieldWrap .field .chapterWrap span.green.on{ left:45.3296%; /* 165/364 */}
    .interest .fieldWrap .field .chapterWrap span.purple.on{left:69.5055%; /* 253/364 */}
    .interest .fieldWrap .field .chapterWrap span.blue.on{ left:91.7582%; /* 334/364 */ }
}

/* level */

.level {
    position: relative;
}
.mylevel {
    margin-left: 2.9182%; /* 30/1028 */
    margin-bottom: 30px;
    width: 140px;
    height: 112px;
    background: url(/public_html/resource/images/mypage/level-bg.png) no-repeat;
    float: left;
}
.mlv-pink {
    background-position: left bottom;
}
.mlv-violet {
    background-position: left -480px;
}
.mlv-orange {
    background-position: left -360px;
}
.mlv-green {
    background-position: left -240px;
}
.mlv-blue {
    background-position: left -120px;
}
.mlv-yello {
    background-position: left top;
}
.mylevel h2 {
    font-size: 2.2222em; /* 40/18 */
    color: #fff;
    text-align: center;
    line-height: 106px;
    font-weight: bold;
}
.level-txt {
    float: left;
    margin-left: 3.8910%; /* 40/1028 */
}
.level-txt p {
    font-size: 1em;
    color: #414042;
}
.level-txt p:last-child {
    padding-top: 7px;
}
.level-img {
    position: absolute;
    top: -30px;
    right: 20px;
}

/* 레벨선택 */
.propolisWrap {
    margin-bottom: 30px;
    position: relative;
    width: 100%;
    padding: 20px 5.078125%;
    background: #fff;
    border: 1px solid #d1d3d4;
}
.plus30 {
    position: absolute;
    height: 26px;
    line-height: 24px;
    text-align: center;
    bottom: -30px;
    right: 5%;
    color: #6d6e71;
    font-size: 0.8em;
    font-weight: 300;
}
.propolisWrap ul {
    margin-left: 4.8913%; /* 45/920 */
    font-size: 0;
    width: 50%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.propolisWrap ul.ul-even {
    margin-left: 0;
    margin-right : 4.8913%;
}
.propolisWrap ul li {
    display:inline-block;
    margin:0 2.8571% 0 0; /* 25/875 */
    width: 14.857%;
    position:relative;
    cursor:pointer;
}
.propolisWrap ul li:last-child {
    margin: 0;
}
.propolisWrap ul li span.select,
.propolisWrap ul li span.now {
    width:100%; /* 65/875 */
    height:69px;
    display:inline-block;
    position:absolute;
    font-size: 0.5rem;
    color: #fff;
    text-align: center;
    padding-top: 50px;
}
.propolisWrap ul li span.select {
    background:url(/public_html/resource/images/mypage/selectLayer.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li span.now {
    background:url(/public_html/resource/images/mypage/nowLayer.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p {
    width:100%; /* 65/875 */
    height:69px;
    line-height: 66px;
    display:table-cell;
    text-align:center;
    color:#fff;
    cursor:pointer;
    font-size: 1.5556rem; /* 28/18 */
    font-weight: 700;
    display: block;
}

.propolisWrap ul li p.pink {
    background: url(/public_html/resource/images/propolis/pink.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p.pink:hover {
    background: url(/public_html/resource/images/propolis/pink-hv.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p.pink:active {
    background: url(/public_html/resource/images/propolis/pink-act.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p.orange  {
    background: url(/public_html/resource/images/propolis/orange.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p.orange:hover {
    background: url(/public_html/resource/images/propolis/orange-hv.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p.orange:active {
    background: url(/public_html/resource/images/propolis/orange-act.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p.yellow {
    background: url(/public_html/resource/images/propolis/yellow.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p.yellow:hover {
    background: url(/public_html/resource/images/propolis/yellow-hv.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p.yellow:active {
    background: url(/public_html/resource/images/propolis/yellow-act.png) center center no-repeat;
    background-size: 100%;
}

.propolisWrap ul li p.green {
    background: url(/public_html/resource/images/propolis/green.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p.green:hover {
    background: url(/public_html/resource/images/propolis/green-hv.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p.green:active {
    background: url(/public_html/resource/images/propolis/green-act.png) center center no-repeat;
    background-size: 100%;
}

.propolisWrap ul li p.blue {
    background: url(/public_html/resource/images/propolis/blue.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p.blue:hover {
    background: url(/public_html/resource/images/propolis/blue-hv.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p.blue:active {
    background: url(/public_html/resource/images/propolis/blue-act.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p.purple {
    background: url(/public_html/resource/images/propolis/violet.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p.purple:hover {
    background: url(/public_html/resource/images/propolis/violet-hv.png) center center no-repeat;
    background-size: 100%;
}
.propolisWrap ul li p.purple:active {
    background: url(/public_html/resource/images/propolis/violet-act.png) center center no-repeat;
    background-size: 100%;
}

@media screen and (max-width: 800px) {
     .lv-layer div .level {
        zoom: 100%;
    }
    .level {
        zoom: 80%;
    }
    .level-img {
       right: 0;
    }
    .propolisWrap {
        padding: 20px 2%;
    }
    .propolisWrap ul li {
        margin: 0 2% 0 0;
    }
    .propolisWrap ul li p,
    .propolisWrap ul li span.commend,
    .propolisWrap ul li span.lock,
    .propolisWrap ul li span.select,
    .propolisWrap ul li span.now {
        height: 60px;
        line-height: 58px;
        font-size: 1.1111rem; /* 20/18 */
    }
    .propolisWrap ul li span.select {
        background:url(/public_html/resource/images/mypage/selectLayer@2x.png) center center no-repeat;
        background-size: 100%;
    }
    .propolisWrap ul li span.now {
        background:url(/public_html/resource/images/mypage/nowLayer@2x.png) center center no-repeat;
        background-size: 100%;
    }
}


/* Highlights Library level standards based on Lexile */
/* .lexile-graph {
    padding: 20px 20px;
    background: #f8f8f8;
    width: 100%;
    position: relative;
}
.lexile-graph h2 {
    padding-bottom: 18px;
    color: #58595b;
    font-size: 1em;
    text-align: center;
}
.lexile {
    background: #fff;
    width: 100%;
    height: 552px;
    padding: 10px 15px 15px;
    overflow: hidden;
}
.lex-bg {
    width: 5.2411%; 50/954
    padding-right: 1.0482%; 10/954
    padding-bottom: 11px;
    float: left;
    text-align: right;
    border-right: 1px solid #bcbec0;
}
.lex-bg h4,
.lex-bg p,
.lex-graph div ul li {
    font-size: 0.7778em; 16/18
}
.lex-bg h4 {
    padding-bottom: 12px;
}
.lex-bg p {
    color: #909090;
    line-height: 20px;
}
.lex-graph {
    padding-top: 20px;
    width: 94.3396%; 900/954
    height: 547px;
    float: left;
    background: url(/public_html/resource/images/mypage/lexile-bg_old.png) repeat-x;
    background-position: left 40px;
    overflow: hidden;
}
.lex-graph div {
    float: left;
}
.begin {
    width: 6.6667%; 60/900
}
div.begin li {
    margin-top: 420px;
    padding-top: 40px;
    width: 50%;
    height: 60px;
    background: #f76293;
}
.begin li:first-child {
    opacity: .8;
    margin-top: 440px;
    padding-top: 20px;
}
.eleme, .prein, .inter, .upper {
    width: 20%; 180/900
}
.eleme li, .prein li, .inter li, .upper li {
    width: 16.66666666666667%
}
div.eleme li {
    margin-top: 280px;
    padding-top: 180px;
    height: 200px;
    background: #663399;
}
div.eleme li:nth-child(1) {
    margin-top: 400px;
    padding-top: 60px;
    height: 80px;
    opacity: 0.5;
}
div.eleme li:nth-child(2) {
    margin-top: 380px;
    padding-top: 80px;
    height: 100px;
    opacity: 0.6;
}
div.eleme li:nth-child(3) {
    margin-top: 360px;
    padding-top: 100px;
    height: 120px;
    opacity: 0.7;
}
div.eleme li:nth-child(4) {
    margin-top: 340px;
    padding-top: 120px;
    height: 140px;
    opacity: 0.8;
}
div.eleme li:nth-child(5) {
    margin-top: 300px;
    padding-top: 160px;
    height: 180px;
    opacity: 0.9;
}

div.prein li {
    margin-top: 220px;
    padding-top: 240px;
    height: 260px;
    background: #ff8516;
}
div.prein li:nth-child(1) {
    margin-top: 280px;
    padding-top: 180px;
    height: 200px;
    opacity: 0.5;
}
div.prein li:nth-child(2) {
    margin-top: 260px;
    padding-top: 200px;
    height: 220px;
    opacity: 0.6;
}
div.prein li:nth-child(3) {
    margin-top: 260px;
    padding-top: 200px;
    height: 220px;
    opacity: 0.7;
}
div.prein li:nth-child(4) {
    margin-top: 240px;
    padding-top: 220px;
    height: 240px;
    opacity: 0.8;
}
div.prein li:nth-child(5) {
    margin-top: 240px;
    padding-top: 220px;
    height: 240px;
    opacity: 0.9;
}

div.inter li {
    margin-top: 140px;
    padding-top: 320px;
    height: 340px;
    background: #3fc380;
}
div.inter li:nth-child(1) {
    margin-top: 200px;
    padding-top: 260px;
    height: 280px;
    opacity: 0.5;
}
div.inter li:nth-child(2) {
    margin-top: 180px;
    padding-top: 280px;
    height: 300px;
    opacity: 0.6;
}
div.inter li:nth-child(3) {
    margin-top: 180px;
    padding-top: 280px;
    height: 300px;
    opacity: 0.7;
}
div.inter li:nth-child(4) {
    margin-top: 160px;
    padding-top: 300px;
    height: 320px;
    opacity: 0.8;
}
div.inter li:nth-child(5) {
    margin-top: 160px;
    padding-top: 300px;
    height: 320px;
    opacity: 0.9;
}

div.upper li {
    margin-top: 80px;
    padding-top: 380px;
    height: 400px;
    background: #19b5fe;
}
div.upper li:nth-child(1) {
    margin-top: 140px;
    padding-top: 320px;
    height: 340px;
    opacity: 0.5;
}
div.upper li:nth-child(2) {
    margin-top: 120px;
    padding-top: 340px;
    height: 360px;
    opacity: 0.6;
}
div.upper li:nth-child(3) {
    margin-top: 120px;
    padding-top: 340px;
    height: 360px;
    opacity: 0.7;
}
div.upper li:nth-child(4) {
    margin-top: 100px;
    padding-top: 360px;
    height: 380px;
    opacity: 0.8;
}
div.upper li:nth-child(5) {
    margin-top: 100px;
    padding-top: 360px;
    height: 380px;
    opacity: 0.9;
}

.advan {
    width: 13.3333%; 120/900
}
.advan li {
    width: 25%;
}
div.advan li {
    margin-top: 0;
    padding-top: 460px;
    height: 480px;
    background: #f7ca18;
}
div.advan li:nth-child(1) {
    margin-top: 60px;
    padding-top: 400px;
    height: 420px;
    opacity: 0.5;
}
div.advan li:nth-child(2) {
    margin-top: 40px;
    padding-top: 420px;
    height: 440px;
    opacity: 0.6;
}
div.advan li:nth-child(3) {
    margin-top: 20px;
    padding-top: 440px;
    height: 460px;
    opacity: 0.7;
}

.lex-graph div ul {
    height: 480px;
    overflow: hidden;
}
.lex-graph li {
    height: 20px;
    line-height: 20px;
    text-align: center;
    float: left;
    color: #fff;
}
.lex-graph div h3 {
    padding-top: 10px;
    font-size: 0.7778em; 14/18
    text-align: center;
} */

/* Highlights Library level standards based on RR LEVEl */
.lexile-graph {
    padding: 20px 20px;
    background: #f8f8f8;
    width: 100%;
    position: relative;
}
.lexile-graph h2 {
    padding-bottom: 18px;
    color: #58595b;
    font-size: 1em;
    text-align: center;
}
.lexile {
    background: #fff;
    width: 100%;
    padding: 10px 15px 15px;
    overflow: hidden;
}
.lex-bg {
    width: 5.2411%; /* 50/954 */
    padding-right: 1.0482%; /* 10/954 */
    padding-bottom: 11px;
    float: left;
    text-align: right;
    border-right: 1px solid #bcbec0;
}
.lex-bg h4,
.lex-bg p,
.lex-graph div ul li {
    font-size: 0.7778em; /* 16/18 */
}
.lex-bg h4 {
    padding-bottom: 12px;
}
.lex-bg p {
    color: #909090;
    line-height: 20px;
}
.lex-graph {
    padding-top: 20px;
    width: 94.3396%; /* 900/954 */
    float: left;
    background: url(/public_html/resource/images/mypage/lexile-bg.png) repeat-x;
    background-position: left 56px;
    overflow: hidden;
}
.lex-graph div {
    float: left;
}
.lex-graph div ul {
    height: 557px;
    overflow: hidden;
}

.begin {
    width: 6.6667%; /* 60/900 */
}
div.begin li {
    margin-top: 420px;
    padding-top: 40px;
    width: 50%;
    height: 60px;
    background: #f76293;
}
.begin li:first-child {
    opacity: .8;
    margin-top: 440px;
    padding-top: 20px;
}
.eleme {
    width: 26.66666666666667%; /* 240/900 */
}
.eleme li {
    width: 12.5%
}
div.eleme li {
    margin-top: 397px;
    padding-top: 140px;
    height: 160px;
    background: #663399;
}
div.eleme li:nth-child(1) {
    margin-top: 537px;
    padding-top: 0;
    height: 20px;
    opacity: 0.3;
}
div.eleme li:nth-child(2) {
    margin-top: 517px;
    padding-top: 20px;
    height: 40px;
    opacity: 0.4;
}
div.eleme li:nth-child(3) {
    margin-top: 497px;
    padding-top: 40px;
    height: 60px;
    opacity: 0.5;
}
div.eleme li:nth-child(4) {
    margin-top: 477px;
    padding-top: 60px;
    height: 80px;
    opacity: 0.6;
}
div.eleme li:nth-child(5) {
    margin-top: 457px;
    padding-top: 80px;
    height: 100px;
    opacity: 0.7;
}
div.eleme li:nth-child(6) {
    margin-top: 437px;
    padding-top: 100px;
    height: 120px;
    opacity: 0.8;
}
div.eleme li:nth-child(7) {
    margin-top: 417px;
    padding-top: 120px;
    height: 140px;
    opacity: 0.9;
}

.prein {
    width: 20%; /* 180/900 */
}
.prein li {
    width: 16.66666666666667%
}
div.prein li {
    margin-top: 337px;
    padding-top: 200px;
    height: 220px;
    background: #ff8516;
}
div.prein li:nth-child(1) {
    margin-top: 397px;
    padding-top: 140px;
    height: 160px;
    opacity: 0.5;
}
div.prein li:nth-child(2) {
    margin-top: 377px;
    padding-top: 160px;
    height: 180px;
    opacity: 0.6;
}
div.prein li:nth-child(3) {
    margin-top: 377px;
    padding-top: 160px;
    height: 180px;
    opacity: 0.7;
}
div.prein li:nth-child(4) {
    margin-top: 357px;
    padding-top: 180px;
    height: 200px;
    opacity: 0.8;
}
div.prein li:nth-child(5) {
    margin-top: 357px;
    padding-top: 180px;
    height: 200px;
    opacity: 0.9;
}

.inter {
    width: 20%; /* 180/900 */
}
.inter li {
    width: 16.66666666666667%
}
div.inter li {
    margin-top: 217px;
    padding-top: 320px;
    height: 340px;
    background: #3fc380;
}
div.inter li:nth-child(1) {
    margin-top: 317px;
    padding-top: 220px;
    height: 240px;
    opacity: 0.5;
}
div.inter li:nth-child(2) {
    margin-top: 297px;
    padding-top: 240px;
    height: 260px;
    opacity: 0.6;
}
div.inter li:nth-child(3) {
    margin-top: 277px;
    padding-top: 260px;
    height: 280px;
    opacity: 0.7;
}
div.inter li:nth-child(4) {
    margin-top: 257px;
    padding-top: 280px;
    height: 300px;
    opacity: 0.8;
}
div.inter li:nth-child(5) {
    margin-top: 237px;
    padding-top: 300px;
    height: 320px;
    opacity: 0.9;
}

.upper {
    width: 20%; /* 180/900 */
}
.upper li {
    width: 16.66666666666667%
}
div.upper li {
    margin-top: 117px;
    padding-top: 420px;
    height: 440px;
    background: #19b5fe;
}
div.upper li:nth-child(1) {
    margin-top: 197px;
    padding-top: 340px;
    height: 360px;
    opacity: 0.5;
}
div.upper li:nth-child(2) {
    margin-top: 197px;
    padding-top: 340px;
    height: 360px;
    opacity: 0.6;
}
div.upper li:nth-child(3) {
    margin-top: 177px;
    padding-top: 360px;
    height: 380px;
    opacity: 0.7;
}
div.upper li:nth-child(4) {
    margin-top: 157px;
    padding-top: 380px;
    height: 400px;
    opacity: 0.8;
}
div.upper li:nth-child(5) {
    margin-top: 137px;
    padding-top: 400px;
    height: 420px;
    opacity: 0.9;
}

.advan {
    width: 13.3333%; /* 120/900 */
}
.advan li {
    width: 25%;
}
div.advan li {
    margin-top: 37px;
    padding-top: 500px;
    height: 520px;
    background: #f7ca18;
}
div.advan li:nth-child(1) {
    margin-top: 97px;
    padding-top: 440px;
    height: 460px;
    opacity: 0.5;
}
div.advan li:nth-child(2) {
    margin-top: 77px;
    padding-top: 460px;
    height: 480px;
    opacity: 0.6;
}
div.advan li:nth-child(3) {
    margin-top: 57px;
    padding-top: 480px;
    height: 500px;
    opacity: 0.7;
}

.lex-graph li {
    height: 20px;
    line-height: 20px;
    text-align: center;
    float: left;
    color: #fff;
}
.lex-graph div h3 {
    padding-top: 10px;
    font-size: 0.7778em; /* 14/18 */
    text-align: center;
}

@media screen and (max-width: 768px) {
    .lex-bg h4,
    .lex-bg p {
        letter-spacing: -0.1em;
    }
    .lex-graph div h3 {
        font-size: 0.6667em; /* 12/18 */
        letter-spacing: -0.08em;
    }
}

/* 레벨 레이어팝업 */
#book-layer {
    display: block;
/*     background: rgba(0,0,0,0.7); */
}
#book-layer div.level-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #fff url(/public_html/resource/images/mypage/lv-layer-bg.png) no-repeat;
    border-radius: 15px 15px 5px 5px;
    -moz-border-radius: 15px 15px 5px 5px;
    -webkit-border-radius: 15px 15px 5px 5px;
    border: 0 none;
}
div.level-layer h1 {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #248ab2;
    color: #fff;
    font-size: 1.2222em; /* 22/18 */
    text-align: center;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
}
div.level-layer h2 {
    padding-top: 70px;
    font-size: 1.1111em; /* 20/18 */
    text-align: center;
}
.lv-layer-btn {
    margin-top: 74px;
    font-size: 0;
}

.lv-layer-btn.btn-fixed {
    margin-top: 28px;
    /* position: fixed; */
}
.lv-layer-btn.btn-fixed.line2 {
    margin-top: 55px;
}

div.lv-layer-btn button.btn-gray {
    margin-left: 60px;
}
.lv-beta .lv-layer-btn {
    margin-top: 51px;
}
.lv-layer-btn button {
    width: 120px;
    height: 35px;
    margin-left: 10px;
    line-height: 35px;
    font-size: 16px;
    font-weight: 400;
}

#book-layer div.level-layer.alert {
    background: #fff;
}


#book-layer div.level-layer.emailus {
    background: #fff;
    width: 1024px;
    height: 355px;
}

#book-layer div.level-layer.emailus main{
    margin-top: 11px;
    border-radius: 0px 0px 10px 10px;
    box-shadow : 0.5px 0.866px 0px 0px rgba(2, 8, 2, 0.2)
}

.lv-layer-btn.one-btn button {
    margin-left: 190px;
}

@media screen and (max-width: 768px) {
    #book-layer div.level-layer {
        width: 500px;
        min-width: 500px;
        height: 300px;
    }
}

.tab-support {
    margin-top: 20px;
    margin-bottom: 0;
}
.tab-support div {
    width: 35.5%; /* 362/1024 */
    margin: 0 auto;
    left: 0;
    right: 0;
}
.tab-support div input {
    width: 78.67403%; /* 321/362 */
}

/* faq */
.faq-title {
    margin-top: 20px;
    width: 100%;
    height: 40px;
    background: #4356a4;
    overflow: hidden;
}
.faq-title h2,
.faq-title h3 {
    line-height: 40px;
    font-size: 0.7777em; /* 14/18 */
    font-weight: 400;
    color: #fff;
    float: left;
    text-align: center;
}
.faq-title h2 {
    width: 13.9648%;
}
.faq-title h3 {
    width: 86.0351%;
}
#faq_wrap {
    width: 100%;

    border-top: 1px solid #d6d6d6;
    text-align: left;
}
.f-cate {
    display: inline-block;
    width: 13.9648%;
    line-height: 60px;
    font-size: 0.7777em; /* 14/18 */
    text-align: center;
}
#faq_wrap .q {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #d6d6d6;
}
#faq_wrap .q > div {
    width: 100%;
    overflow: hidden;
}
#faq_wrap .q > div > span {
    float: left;
}
.faq-btn {
    display: inline-block;
    width: 9.765625%; /* 100/1024 */
    height: 60px;
    line-height: 60px;
    float: right;
    text-align: center;
}
#faq_wrap .q .qt {
    display: inline-block;
    width: 76.2695%; /* 781/1024 */
    line-height: 60px;
    font-size: 0.7777em; /* 14/18 */
    color: #222;
    cursor : pointer;
}
.qt img {
    padding-top: 18px;
    padding-right: 9px;
    vertical-align: top;
}
.circle-arrow {
    display: inline-block;
    margin: 0 auto;

    width: 24px;
    height: 24px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 1px solid #d1d3d4;
    background-image: url(/public_html/resource/images/mypage/support-top-arr.png);
    background-repeat: no-repeat;
    background-position: center center;
}
a.circle-arrow:hover,
#faq_wrap .on a.circle-arrow {
    background-image: url(/public_html/resource/images/mypage/support-btm-arr.png);
}
#faq_wrap .a {
    padding: 40px 38px;
    border-bottom: 1px solid #d1d3d4;
    background: #f8f8f8;
}
.a .inner .qt {
    line-height: 24px;
    display: block;
    font-size: 0.7777em; /* 14/18 */
}
.a .inner .qt:first-child {
    padding-bottom: 10px;
}
.a .inner .qt img {
    padding-top: 0;
}

#faq_wrap + .dataTables_paginate {
    padding-top: 40px;
}

/* email us */
.email-section {
    padding-top: 5px;
}
.email {
    margin-top: 20px;
    padding-bottom: 26px;
}
.email > form > ul {
    border: 1px solid #d1d3d4;
}
.name, .from, .msg {
    border-bottom: 1px solid #d1d3d4;
}
.name, .from, .attached {
    width: 100%;
    overflow: hidden;
}
.name li, .from li, .attached li {
    float: left;
}
.name li, .from li {
    height: 40px;
    line-height: 40px;
}

.name li:first-child,
.from li:first-child,
.attached li:first-child {
    width: 11.71875%; /* 120/1024 */
    border-right: 1px solid #d1d3d4;
    background: #f8f8f8;
    font-size: 0.7777em; /* 14/18 */
    text-align: center;
    color: #414042;
}
.name li:last-child,
.from li:last-child,
.attached li:last-child {
    width: 88.28125%; /* 904/1024 */
}
.name li input,
.from li input {
    width: 100%; /* 904/1024 */
    padding-left: 2.2123%;
    height: 40px;
    line-height: 40px;
    color: #414042;
    font-size: 0.7777em; /* 14/18 */
}
.msg {
    padding: 20px;
}
.msg textarea {
    border: 0;
    width: 100%;
    font-family:"Montserrat", sans-serif;
    font-size: 0.7777em; /* 14/18 */
}
.attached li:first-child {
    height: 147px;
    line-height: 140px;
}
.attached li:last-child {
    padding: 10px;
}
.filebox input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0;
}
.attached li div {
    margin-bottom: 3px;
    font-size: 0.7777em; /* 14/18 */
    overflow: hidden;
}
.attached li div:last-child {
    margin-bottom: 0;
    color: #a5a5a5;
}
.attached li div strong {
    color: #ed1c24;
}
.upload-name, .filebox label {
    float: left;
}
.upload-name a {
    color : #ed1c24;
}
.filebox label {
    display: inline-block;
    width: 15%; /* 140/884 */
    height: 30px;
    line-height: 30px;
    color: #a5a5a5;
    font-family:"Montserrat", sans-serif;
    font-size: inherit;
    text-align: center;
    vertical-align: middle;
    background-color: #f8f8f8;
    cursor: pointer;
    border-top: 1px solid #d1d3d4;
    border-right: 1px solid #d1d3d4;
    border-bottom: 1px solid #d1d3d4;
}
/*how to use*/
.use {
    position: relative;
    width: 73.46938775510204%;
    margin: 40px auto;
    overflow:hidden;
}
.use .left-use{
    float: left;
    width: 41.66666666666667%;
    margin-right: 12.36111111111111%;
}
.use .right-use {
    width: 45.97222222222222%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.use .right-use ul li{
    font-size: 1.3333em;
    letter-spacing: -0.25px;
    color: #414042;
     margin-bottom: 20px;
}
.use .right-use ul li img{
    width: 22.05438066465257%;
    margin-right:6.761329%;

}
@media screen and (max-width: 768px) {
    .use .right-use ul li{
    font-size: 1.183em;
    }
}

/*About Levels*/
.about-box{
    position: relative;
}
.about-box h3{
    font-size: 2.666666666666667em;
    font-weight: bold;
    color: #fff;
    letter-spacing: -0.25px;
    background: #176286;
    height: 90px;
    line-height: 90px;
    border-radius: 10px 10px 0 0;
    text-align: center;
    margin: 18px 0 0 0;
}

.about-box ul li{
    width: 15.81632653061224%; /*155/980*/
    float: left;
    height: 510px;
    background-color: #d0e5eb;
    margin-right: 1.02040816326531%;
    position: relative;

}
.about-box ul li:last-child{
    margin-right: 0;
}
.about-box ul li span{
    position: absolute;
    display: block;
    bottom: 0;
    height: 60px;
    width: 100%;
    color: #fff;
    text-align: center;
    font-weight: bold;
    line-height: 20px;
    padding-top: 8px;
    font-size: 0.8888888888888889;
}
.about-box ul li span>strong{
    font-size: 1.233333333333333em;
    color: #fff;
    font-weight: bold;
}
.about-box ul li:nth-child(1) span{
    background-color: #167f9a;
}
.about-box ul li:nth-child(2) span{
    background-color: #177594;
}
.about-box ul li:nth-child(3) span{
    background-color: #17688a;
}
.about-box ul li:nth-child(4) span{
    background-color: #18617b;
}
.about-box ul li:nth-child(5) span{
    background-color: #18617b;
}
.about-box ul li:nth-child(6) span{
    background-color: #17596c;
}
.about-box .levelbox{
    height: 60px;
    box-sizing: border-box;
    position: absolute;
}
.about-box .levelbox p{
    color: #fff;
    font-weight: bold;
    text-align: center;
    font-size: 0.8888888888888889em;
    line-height: 18px;
    margin-top: 8px;
}
.about-box .levelbox p>span{
    font-size: 1.333333333333333em;
    color: #fff;
    font-weight: bold;
}
.about-box .level6{
    width: 26.73469387755102%;
    background-color: #f16378;
    border: 3px solid #e94558;
    right: 0;
    top:110px;
}
.about-box .level5{
    width: 16.12244897959184%;
    background-color: #6a5da9;
    border: 3px solid #51449b;
    right: 24.28571428571429%;
    top:180px;
}
.about-box .level4{
    width: 27.95918367346939%;
    background-color: #2d9ad5;
    border: 3px solid #167ebf;
    right: 31.3265306122449%;
    top:250px;
}
.about-box .level3{
    width: 26.83673469387755%;
    background-color: #11b99c;
    border: 3px solid #179278;
    right: 42.85714285714286%;
    top:320px;
}
.about-box .level2{
    width: 21.63265306122449%;
    background-color: #94c73f ;
    border: 3px solid #7ba540;
    left: 19.89795918367347%;
    top:390px;
}
.about-box .level1{
    width: 20.61224489795918%;
    background-color: #fdce0b;
    border: 3px solid #edae1d;
    left: 0%;
    top:460px;
}

/* named upload */
.filebox .upload-name {
    width: 84%;
    height: 32px;
    line-height: 30px;
    display: inline-block;
    background-color: #fff;
    border: 1px solid #d1d3d4;
    -webkit-appearance: none; /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;
    }

/* imaged preview */
.filebox .upload-display {
    margin-bottom: 5px;
}


.filebox .upload-thumb-wrap {
    display: inline-block;
    width: 54px;
    padding: 2px;
    vertical-align: middle;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}

.filebox.bs3-primary label {
    color: #a5a5a5;
    background-color: #f8f8f8;
    border-color: #d1d3d4;
}

.email button {
    margin-top: 10px;
    float: right;
    width: 14.6484%; /* 150/1024 */
    height: 45px;
}

.book_loading {
    display: block;
    text-align: center;
    margin : 10px;
    padding: 20px;
}

/* 오늘의 책 레이어팝업 */
#today-book-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
}

div.today-book-wrap {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: -325px auto 0;
    width: 650px; /* 750/1044 */
    height: 650px;
    z-index: 20;
}
div.today-book-wrap a {
    display: block;
    position: absolute;
    top: 43px;
    right: 30px;
}
div.today-book-wrap h1 {
    position: absolute;
    top: 33px;
    left: 0;right: 0;margin: 0 auto;
    width: 478px;
}
.tbl-bg {
    margin: 137px auto 0;
    padding: 69px;
    width: 330px;
    height: 394px;
    background: url(/public_html/resource/images/main/today-book-bg.png) no-repeat;
}
.tbl-bg > img{
    cursor : pointer;
}
div.today-book-wrap h2 {
    padding-top: 17px;
    font-size: 1.111111111111111em; /* 20/18 */
    color: #fff;
    text-align: center;
    font-weight: 400;
    letter-spacing: -0.025px;
    text-shadow: 1px 1.732px 3px rgba(2, 8, 2, 0.3);
}
div.today-book-wrap button {
    width: 240px;
    height: 60px;
    margin: 26px 205px 0;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    font-size: 1.333333333333333em; /* 24/18 */
}

#today-book-layer div.today-bg {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: -325px auto 0;
    width: 650px;
    height: 650px;
    background: url(/public_html/resource/images/main/today-bg.png) no-repeat;
    -webkit-animation: foo 14s infinite linear;
    -o-animation: foo 14s infinite linear;
    -moz-animation: foo 14s infinite linear;
    animation: foo 14s infinite linear;
}
@-webkit-keyframes foo {
    0% {
        -webkit-transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes foo {
    0% {
        -moz-transform: rotate(0);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}
@keyframes foo {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

#today-book-layer div.star {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: -325px auto 0;
    width: 650px;
    height: 650px;
    background: url(/public_html/resource/images/main/star.png) no-repeat;
    -webkit-animation: star 2s infinite linear;
    -o-animation: star 2s infinite linear;
    -moz-animation: star 2s infinite linear;
    animation: star 2s infinite linear;
}
@-webkit-keyframes star {
    0% { opacity: 1; filter : alpha('Opacity=1'); }
    50% { opacity: 0; filter : alpha('Opacity=0'); }
    100% { opacity: 1; filter : alpha('Opacity=1'); }
}
@-moz-keyframes star {
    0% { opacity: 1; filter : alpha('Opacity=1'); }
    50% { opacity: 0; filter : alpha('Opacity=0'); }
    100% { opacity: 1; filter : alpha('Opacity=1'); }
}
@keyframes star {
    0% { opacity: 1; filter : alpha('Opacity=1'); }
    50% { opacity: 0; filter : alpha('Opacity=0'); }
    100% { opacity: 1; filter : alpha('Opacity=1'); }
}
/* /오늘의 책 레이어팝업 */

/* 레벨테스트 레이어팝업 */
div.leveltest-wrap {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: -325px auto 0;
    width: 650px; /* 750/1044 */
    height: 650px;
    z-index: 20;
}
div.leveltest-wrap a {
    display: block;
    position: absolute;
    top: 43px;
    right: 30px;
}
div.leveltest-wrap h1 {
    position: absolute;
    top: 31px;
    left: 0;right: 0;margin: 0 auto;
    width: 358px;
}
div.level-box {
    margin: 255px auto 0;
    width: 550px;
    height: 300px;
    border: 10px solid #f7cd13;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    background: #fffefa;
}
.level-box p {
    padding-top: 41px;
    text-align: center;
    font-size: 1.111111111111111em; /* 20/18 */
    color: #000000;
}
.level-box p span {
    color: #0aa1dc;
}
div.leveltest-wrap button {
    display: block;
    width: 350px;
    height: 60px;
    margin: 30px auto 0;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    font-size: 1.333333333333333em; /* 24/18 */
}
#today-book-layer div.leveltest-bg {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: -325px auto 0;
    width: 650px;
    height: 650px;
    background: url(/public_html/resource/images/main/leveltest-bg.png) no-repeat;
}
/* /레벨테스트 레이어팝업 */


/* 레벨업 레이어팝업 */
div.level-wrap-layer {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: -211px auto 0;
    width: 500px;
    height: 422px;
    z-index: 20;
}
div.level-wrap-layer h1 {
    font-size: 1.222222222222222em; /* 22/18 */
    text-align: center;
    background: #248ab2;
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-weight: 400;
}
.lv-layer {
    margin: 0 auto;
    width: 500px;
    height: 372px;
    background: #fff;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
}
.lv-beta-layer {
    height: 392px;
}
.lv-layer > div {
    padding: 40px 0 0 0;
    width: 500px;
    height: 200px;
    background: url(/public_html/resource/images/main/level-bg.png) no-repeat;
}
div.lv-layer > h2 {
    padding-top: 28px;
    font-size: 1.111111111111111em; /* 20/18 */
    color: #fff;
    text-align: center;
    font-weight: 400;
    letter-spacing: -0.50px;
    color: #414042;
}
.lv-layer > div div.mylevel {
    margin: 0 auto 0;
    float: none;
}
div.lv-layer button {
    margin-top: 28px;
    margin-left: 10px;
    width: 120px;
    height: 35px;
    font-size: 0.8889em; /* 24/18 */
    float: left;
}
div.lv-layer button.btn-gray {
    margin-left: 60px;
}
div.two-button button.btn-gray {
    margin-left: 125px;
}
/* /레벨업 레이어팝업 */


/* 레벨테스트 2017-03-09 추가 */
.lv-p div {
    padding: 30px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    background-color: #eff9fe;
    background-image: url(/public_html/resource/images/mypage/level-test-img.png);
    background-repeat: no-repeat;
    background-position: 95% center; /* 50/982 */
}
.lv-p div p {
    width: 85%;
}
main.mypage section.lv-result article {
    padding: 14px 2.03252032520325% 60px;
}
.lv-result h2 {
    font-size: 1em;
    color: #414042;
    letter-spacing: -0.025em;
    text-align: center;
}

@media screen and (max-width: 800px) {
    .lv-p div p {
        width: 80%;
    }
}

/* my history 2017-03-09 추가 */
.myPageWrap {
    width:100%;
    height:262px;
    background:url(/public_html/resource/images/mypage/history-bg.png) no-repeat;
    -webkit-background-size: cover;
    background-size: contain;
}
.myPageWrap .portraitWrap {
    width: 15.27494908350305%; /* 150/982 */
    padding:0;
    float:left;
    margin-left: 5.29531568228106%; /* 52/982 */
    margin-right: 11.30346232179226%; /* 111/982 */
}
.myPageWrap .portraitWrap p{text-align:center;}
.myPageWrap .portraitWrap p.portrait {
    position:relative;
    margin-top: 23%;
}
.myPageWrap .portraitWrap p.img img{width:100%; margin-bottom:10px; border-radius:70px;}
.myPageWrap .portraitWrap p.portrait span.level {
    display:block;
    width:42px;
    height:44px;
    line-height: 46px;
    position:absolute;
    top:0;
    left:0;
    background:url(/public_html/resource/images/mypage/levelBg_bbig.png) no-repeat;
    font-family:Arial, Helvetica, sans-serif;
    font-size:1.111111111111111em;
    color:#ffffff;
}
.myPageWrap .portraitWrap p.portrait span.ver1 {background-position:left top;}
.myPageWrap .portraitWrap p.portrait span.ver2 {background-position:left -44px;}
.myPageWrap .portraitWrap p.portrait span.ver3 {background-position:left -88px;}
.myPageWrap .portraitWrap p.portrait span.ver4 {background-position:left -132px;}
.myPageWrap .portraitWrap p.portrait span.ver5 {background-position:left -176px;}
.myPageWrap .portraitWrap p.portrait span.ver6 {background-position:left -220px;}
.myPageWrap .portraitWrap .txt {
    font-size:1.111111111111111em;
    font-weight:400;
    line-height:1.3em;
    color:#248ab2;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.myPageWrap .portraitWrap .txt a { /* 2017-05-18 */
    font-size:0.6em;
    display:block;
    color:#939598;
    cursor: default;
}

.myPageWrap .portraitStateWrap{
    width: 65.17311608961303%; /* 640/982 */
    float:left;
    padding: 4.8125% 0 0; /* 50/640 */
}
.portraitStateWrap table{width:100%;}
.portraitStateWrap table th {
    text-align:left;
    padding: 0 0 0 15px;
    font-size: 0.8888888888888889em;
}
.portraitStateWrap table td {
    text-align:right;
    padding:0;
    font-size:1.555555555555556em;
    color:#414042;
    letter-spacing:-0.025em;
    font-weight: 700;
}
.portraitStateWrap table tr.al_right td{text-align:right; line-height:0.5em; *line-height:0.7em; height:50px; vertical-align:bottom; padding:0 20px 12px 0;}
.portraitStateWrap table td.mileage{background:url(/public_html/resource/images/library/myPage/mileageBg.png) no-repeat; background-position:10px 10px; color:#ff6a5f}
.portraitStateWrap table td.mileage span{color:#ffaba5;}
.portraitStateWrap table td.month{background:url(/public_html/resource/images/library/myPage/monthBg.png) no-repeat; background-position:10px 1px; color:#109626}
.portraitStateWrap table td.month span{color:#76c883;}
.portraitStateWrap table td.total{background:url(/public_html/resource/images/library/myPage/totalBg.png) no-repeat; background-position:10px 10px; color:#4e80d8}
.portraitStateWrap table td.total span{color:#94b1e4;}

table.level-table tbody td {
    position: relative;
    height: 40px;
    padding: 0; /* 40/640 */
    text-align: left;
}
table.level-table tbody td div {
    position: absolute;
    top: -16px;
    right: 5.125%;
}

.my-info-3step {
    border-top: 0;
    margin-bottom: 15px;
}
.my-info-3step div.d-txt {
    padding-top: 16px;
}
.his-dash-wrap .d-month {
    border-left: 0 none;
}
.his-dash-wrap .d-month,
.his-dash-wrap .d-week {
    width: 50%;
}
.his-dash-wrap div.d-txt h2 {
    color: #414042;
}
table.level-table input {
    width: 43.7956204379562%; /* 180/411 */
    border: 1px solid #d1d3d4;
    height: 28px;
    vertical-align: top;
    margin-top: 2px;
    margin-right: 2.11416490486258%; /* 5/473 */
    padding: 0 2.11416490486258%; /* 5/473 */
}
table.level-table input:focus {
    border: 1px solid #248ab2;
}
table.level-table input:last-child {
    margin-right: 0;
}
table.level-table input[readonly="readonly"],
table.level-table input[readonly] {
    border: 0;
}
.portraitStateWrap table td.btn {
    text-align: center;
}
.portraitStateWrap table td button {
    display: inline-block;
    width: 82.60869565217391%; /* 95/115 */
    height: 65px;
    line-height: 65px;
    color:#ffffff;
    font-size: 0.8888888888888889rem;
    vertical-align: top;
    font-weight:400;
    cursor: pointer;
}
portraitStateWrap table td button:hover {
    background:#09688d;
}

.myPageWrap .portraitStateWrap.my-info {
    padding: .625% 0 0;
}
.my-info table.level-table tbody td {
    height: 60px;
    padding: 0 6.25% 0 15px;
    text-align: right;
}

@media screen and (max-width: 800px) {
    .myPageWrap {
        height: 200px;
    }
    .myPageWrap .portraitWrap p.portrait {
        margin-top: 16%;
    }

    .myPageWrap .portraitStateWrap {
        padding: 2% 0 0; /* 36/640 */
    }
    .portraitStateWrap table td {
        font-size:1.33334em;
    }
    .portraitStateWrap table td button {
        font-size: 0.5em;
    }
    .my-info table.level-table tbody td {
        height: 40px;
    }
    .my-info-3step div.d-txt,
    .his-dash-wrap div.d-txt {
        padding-top: 6px;
    }
    .my-info-3step {
        margin-bottom: -7px;
    }
    .myPageWrap .portraitStateWrap.my-info {
    padding: 1.625% 0 0;
}
}

.ie8 .hitory-graph {
    display : none;
}

/* Datatable Sort */
.blue th .sortA{ width:7px; margin-left:7px; display:inline-block; zoom:1; *display:inline; vertical-align:middle;}
.blue th.sorting,.blue th.sorting_desc,.blue th.sorting_asc{ cursor:pointer; }
.blue th.sorting .sortA{ width:7px; height:13px; background-image:url('/public_html/resource/images/library/ico_sort.png'); background-repeat:no-repeat; }
.blue th.sorting_asc .sortA{ width:7px; height:7px; background-position:0 0; background-image:url('/public_html/resource/images/library/ico_sort.png'); background-repeat:no-repeat; }
.blue th.sorting_desc .sortA{ width:7px; height:7px; background-position:0 -7px; background-image:url('/public_html/resource/images/library/ico_sort.png'); background-repeat:no-repeat; }

/* 170628 퍼블리싱- 박보라 support */
#support-main {
    background: #fff;
}
#support-main main > section article {
    padding: 26px 1.171875% 26px; /* 12/1024 */
}
/*how to use*/
.support-movie {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.2%;
}
.support-movie div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
ul.use {
    padding-top: 20px;
}
ul.use li {
    width: 25%;
    margin-right: 0;
    margin-bottom: 0;
    border-left: 1px solid #248ab2;
}
ul.use li:nth-child(4),
ul.use li:last-child {
    border-right: 1px solid #248ab2;
}
ul.use li:nth-child(-n+4) {
    border-top: 1px solid #248ab2;
    border-bottom: 1px solid #248ab2;
}
ul.use li:nth-child(n+5):nth-child(-n+8) {
    border-bottom: 1px solid #248ab2;
}
ul.use li a {
    display: block;
    width: 100%;
    height: 91px;
    line-height: 91px;
    text-align: center;
    color: #248ab2;
}
ul.use li:hover a,
ul.use li a.act {
    background: #248ab2;
    color: #fff;
}
ul.use + button {
    float: right;
    margin-top: 10px;
    width: 318px;
    height: 65px;
}
ul.use + button img {
    padding-left: 10px;
}

/*a guide for parents, teacher*/
section.support_visaul {
    width: 100%;
    height: 400px;
    background: url(/public_html/resource/images/support/parents-visual.png) center top
}
section.support_visaul.teacher {
    background: url(/public_html/resource/images/support/teacher-visual.png) center top
}
section.support_visaul div {
    width: 1000px;
    margin: 0 auto;
    padding-top: 245px;
    text-align: right;
}
@media screen and (max-width: 1000px) {
    section.support_visaul div {
        width: 100%;
    }
}
.level_table table {
    margin-bottom: 60px;
    border-top-width: 1px;
    border-left-width: 1px;
    border-style: solid;
}
.level_table table th {
    height: 70px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-style: solid;
    font-size: 1.333333333333333em; /*24/18*/
}
.level_table table td {
    padding: 30px 20px;
    border-bottom-width: 1px;
    border-right-width: 1px;
    border-style: solid;
}
.level_table table tbody tr td:last-child {
    padding: 0 20px 30px;
}
.level_table h2 {
    padding-top: 4px;
    font-size: 1.333333333333333rem; /*24/18*/
    word-break: break-word;
}
.level_table h3 {
    font-size: 1.333333333333333rem; /*24/18*/
    text-align: left;
    padding-top: 28px;
    letter-spacing: -.05em;
}
.level_table p {
    padding-left: 20px;
    font-size: 1.111111111111111rem; /*20/18*/
    text-align: left;
    font-weight: 300;
    letter-spacing: -.05em;
    word-break: break-word;
    background: url(/public_html/resource/images/support/bullet.png) 7px 13px no-repeat;
}
p.no_blt {
    padding-left: 0;
    background: none;
    padding-top: 30px;
}
.level_table table tbody tr td.lv_tb_btn {
    padding: 10px 0 15px;
}
td.lv_tb_btn button {
    margin-right: 8px;
    display: inline-block;
    padding-left: 10px;
    padding-right: 30px;
    width: auto;
    height: 45px;
    line-height: 45px;
    border-radius: 45px;
    text-align: left;
}
td.lv_tb_btn button:last-child {
    margin-right: 0;
}
td.lv_tb_btn button img {
    vertical-align: -8px;
    padding-right: 10px;
}


.level1_2 {
    margin-top: 34px;
    border-color: #c7eafb;
}
.level1_2 th {
    background: #c7eafb;
}
.level1_2 th,
.level1_2 td {
    border-color: #c7eafb;
}
.level1_2 h3 {
    color: #248ab2;
}

.level3_8 {
    border-color: #fecfcf;
}
.level3_8 th {
    background: #fecfcf;
}
.level3_8 th,
.level3_8 td {
    border-color: #fecfcf;
}
.level3_8 h3 {
    color: #ff5858;
}

.level9_14 {
    border-color: #e6daff;
}
.level9_14 th {
    background: #e6daff;
}
.level9_14 th,
.level9_14 td {
    border-color: #e6daff;
}
.level9_14 h3 {
    color: #7649d4;
}

.level9_14 {
    border-color: #e6daff;
}
.level9_14 th {
    background: #e6daff;
}
.level9_14 th,
.level9_14 td {
    border-color: #e6daff;
}
.level9_14 h3 {
    color: #7649d4;
}

.teachers {
    margin-top: 34px;
    border-color: #ccfbc7;
}
.teachers th {
    background: #ccfbc7;
    border-right: 1px solid #fff !important;
}
.teachers th:last-child {
    border-right: 0 !important;
}
.teachers th,
.teachers td {
    border-color: #ccfbc7;
}
.teachers h3 {
    color: #059821;
}

.btn_lv_blue {
    background: #c7eafb;
    box-shadow: 0 5px #7dcaef;
    color: #248ab2;
}
.btn_lv_blue:hover {
    box-shadow: 0 4px #7dcaef;
    top: 1px;
}
.btn_lv_blue:active {
    box-shadow: 0 0 #7dcaef;
    top: 5px;
}

.btn_lv_pink {
    background: #fecfcf;
    box-shadow: 0 5px #fca3a3;
    color: #ff5858;
}
.btn_lv_pink:hover {
    box-shadow: 0 4px #fca3a3;
    top: 1px;
}
.btn_lv_pink:active {
    box-shadow: 0 0 #fca3a3;
    top: 5px;
}

.btn_lv_purple {
    background: #e6daff;
    box-shadow: 0 5px #bfa6f4;
    color: #7649d4;
}
.btn_lv_purple:hover {
    box-shadow: 0 4px #bfa6f4;
    top: 1px;
}
.btn_lv_purple:active {
    box-shadow: 0 0 #bfa6f4;
    top: 5px;
}

.btn_lv_green {
    background: #ccfbc7;
    box-shadow: 0 5px #84de7a;
    color: #059821;
}
.btn_lv_green:hover {
    box-shadow: 0 4px #84de7a;
    top: 1px;
}
.btn_lv_green:active {
    box-shadow: 0 0 #84de7a;
    top: 5px;
}

/*aboutUs-eLibrary-levelSystem*/

main.whitebg {
    background : #ffffff;
}

.container{
    position: relative;
    width: 1024px;
    height: 100%;
    margin: 0 auto;
}

#levelSystem{
    overflow: hidden;
    padding-bottom: 20px;
}

#levelSystem .sub-main {
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
    text-align: center;
    background: url(/public_html/resource/images/aboutUs/eLibrary_bg.png) repeat;
}

#levelSystem .container .sub-main-wrap{
    width: 100%;
    overflow: hidden;
}

#levelSystem .sub-main .text-wrap {
    position: absolute;
    top: 120px;
    left: 0;
    z-index: 5;
}
#levelSystem .sub-main .text-wrap .text-title {
    display: block;
    margin-bottom: 40px;
    font-size: 1.9445em;
    color: #fff;
}

#levelSystem .sub-main .text-wrap .text-title span {
    color: #fff9ae;
}

#levelSystem .sub-main .text-wrap .text {
    color: #fff;
}

#levelSystem .sub-main .text-wrap .text span {
    color: #008480;
}

#levelSystem .sub-main .sub-img {
    position: absolute;
    top:0;
    right: -230px;
}

#levelSystem .sub-content{
    position: relative;
}

#levelSystem .sub-content .road {
    position: relative;
    width: 100%;
    height: 2208px;
    background: url(/public_html/resource/images/aboutUs/road.png) center top no-repeat;
}


#levelSystem .sub-content .road .step-warp{
    padding: 70px 0;
}

#levelSystem .sub-content .road .step{
    width: 100%;
    position: relative;
    padding: 20px 0;
}

#levelSystem .sub-content .road .step .step-img{
    float: left;
    width: 11.718%;
    margin-right: 2.930%
}

#levelSystem .sub-content .road .step .step-mac{
    position: relative;
    float: left;
    width: 64.984%
}

#levelSystem .sub-content .road .step .step-mac .step-mac-wrap{
    position: absolute;
    width: 73.835%;
    top: 7.145%;
    left: 12.924%;
    /*    padding: 4.245% 14.577% 0 12.924%;*/

    overflow: hidden;
}

#levelSystem .sub-content .road .step .step-mac .step-mac-slide{
    width: 100%;
}

#levelSystem .sub-content .road .step .wrap-step2{
    float: left;
    width: 100%;
    margin: 5% 1.302% 0 1.302%;
}
#levelSystem .sub-content .road .step .wrap-step2 ul li{
    float: left;
    margin-right: 20.2%;
}

#levelSystem .sub-content .road .step .wrap-step2 .dog{
    width: 17.344%;
    margin-top: 5.077%;
    margin-left: 5.859%;
}

#levelSystem .sub-content .road .step .wrap-step2 .goal{
    width: 12.835%;
}

#levelSystem .sub-content .road .step .wrap-step2 .dog-home{
    width: 22.989%;
}

#levelSystem .sub-content .road .step .wrap-step2 ul li:last-child{
    margin: 10px 0 0 0;
}

#levelSystem .sub-content .road .step .step-level-up{
    float: right;
    width: 18.457%;
    margin-top: 9.77%;
    margin-right: 16.113%;
}
#levelSystem .sub-content .road .step .step-level-up-test{
    width: 43.945%;
    float: left;
}

#levelSystem .sub-content .road .step .step-level-up-test-text{
    width: 65%;
    margin-left: 29.297%;
    padding-top: 17.6%;
}

#levelSystem .sub-content .road .step p{
    padding-top: 6.272%;
    margin-left: -65px;
    text-align: center;
    font-weight: 300;
    color: #808285;
}

#levelSystem .sub-content .road .step p span{
    font-weight: 600;
    color: #fd6d40;
}

#levelSystem .sub-content .bottom-bg{
    position: absolute;
    bottom: -58px;
    width: 100%;
    height: 15.851%;
    background-color: #7ccc5d;
    z-index: -5;
}

@media screen and (max-width: 1044px) {

    #levelSystem .container{
        width: 100%;
    }

    #levelSystem .sub-main .text-wrap {
        left: 5%;
    }
    #levelSystem .sub-main .sub-img {
        right: -20%;
    }
    #levelSystem .sub-content .road {
        height: 100%;
        background: url(/public_html/resource/images/aboutUs/road2.png) center top no-repeat;
        background-size: 170%;
    }
    #levelSystem .sub-content .road .step .step-img{
        margin-left: 5.747%;
    }
    #levelSystem .sub-content .road .step .wrap-step2 ul li{
        margin-right: 17.720%;
    }

    #levelSystem .sub-content .road .step .wrap-step2 .dog{
        margin-left: 9.579%;
    }
    #levelSystem .sub-content .road .step .step-level-up-test{
        margin-left: 5.747%;
    }
    #levelSystem .sub-content .bottom-bg{
        position: relative;
        bottom: 0;
        height: 50px;
    }
}
@media screen and (max-width: 768px) {

    #levelSystem .container{
        width: 100%;
    }
    #levelSystem .sub-main .sub-img{
        right: -39%;
    }
    #levelSystem .sub-main .sub-img img{
        width: 80%;
    }
    #levelSystem .sub-content .road .step-warp{
        padding: 40px 0;
    }
    #levelSystem .sub-content .road .step .step-level-up{
        margin-top: 5.77%;
    }
}


/*aboutUs-eLibrary-levelSystem end*/

/*our-contents*/

#ourContents .swiper-container {
    position: relative;
    width: 100%;
    height: 500px;
}
#ourContents .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    height: 500px;
    /*    Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#ourContents .swiper-wrapper .swiper-slide:nth-child(1) {
    background: url(/public_html/resource/images/aboutUs/slideInto-bg.png) no-repeat center bottom;
    background-size: cover;
}
#ourContents .swiper-wrapper .swiper-slide:nth-child(2){
    background: url(/public_html/resource/images/aboutUs/slideHighfive-bg.png) no-repeat center top;
    background-size: cover;
}
#ourContents .swiper-wrapper .swiper-slide:nth-child(3){
    background: url(/public_html/resource/images/aboutUs/slideZanerBloser-bg.png) no-repeat center top;
    background-size: cover;
}
#ourContents .swiper-wrapper .swiper-slide:nth-child(4){
    background: url(/public_html/resource/images/aboutUs/slideHighlights-bg.png) no-repeat center top;
    background-size: cover;
}

#ourContents .swiper-wrapper .swiper-slide .slide-content{
    width: 90%;
}

.swiper-pagination-bullet{
    width: 18px !important;
    height: 18px !important;
}

.swiper-pagination-bullet-active{
    background: #3995ba !important;
}

#ourContents{
    padding-bottom: 40px;
}

#ourContents .wrap-content{
    position: relative;
    overflow: hidden;
    background-color: #fff75c;
}

#ourContents .first{
    background-color: #fff75c;
}

#ourContents .second {
    background-color: #ffc3d3;
}

#ourContents .third {
    background-color: #8ad2ff;
}

#ourContents .container{
    padding-top: 135px;
}

#ourContents .section .child-l{
    position: relative;
    display: inline-block;
    width: 22.754%;
    z-index: 10;
}

#ourContents .section .child-r{
    position: relative;
    display: inline-block;
    float: right;
    width: 30.566%;
    right: -10.548%;
    z-index: 9;
}

#ourContents .section .lable-y {
    position: relative;
    display: inline-block;
    bottom: 0;
    left: 10px;
    z-index: 0
}

#ourContents .first .speach-img, #ourContents .third .speach-img{
    position: absolute;
    top: 24.529%;
    left: 22.754%;
}

#ourContents .first .speach-img{
    width: 56.348%;
}

#ourContents .second .speach-img{
    position: absolute;
    width: 69.043%;
    top: 24.529%;
    right: 16.695%;
}

#ourContents .third .speach-img{
    width: 69.043%;
}

#ourContents .first .speach-text{
    position: absolute;
    top: 31.513%;
    left: 34.180%;
}

#ourContents .second .speach-text{
    position: absolute;
    top: 29.218%;
    right: 26.761%;
}

#ourContents .third .speach-text {
    position: absolute;
    top: 29.084%;
    left: 32.227%;
}

#ourContents .first .wrap-label{
    position: absolute;
    width: 100%;
    height: 42.017%;
    bottom: 0;
    left: 12.604%;
}

#ourContents .third .wrap-label {
    position: absolute;
    width: 100%;
    height: 39.841%;
    bottom: 0;
    left: 12.604%;
}

#ourContents .second .wrap-label{
    position: absolute;
    width: 100%;
    height: 41.027%;
    bottom: 0;
    right: 12.604%;
}

#ourContents .first .triangle, #ourContents .third .triangle {
    position: absolute;
    width: 200px;
    height: 100%;
    background: url(/public_html/resource/images/aboutUs/yellow.png) no-repeat;
    left: -200px;
}

#ourContents .second .triangle {
    position: absolute;
    width: 200px;
    height: 100%;
    right: -200px;
    background: url(/public_html/resource/images/aboutUs/pink.png) no-repeat;
}

#ourContents .third .triangle {
    position: absolute;
    width: 200px;
    height: 100%;
    background: url(/public_html/resource/images/aboutUs/blue.png) no-repeat;
    left: -200px;
}

#ourContents .first .label-y-bg{
    position: relative;
    bottom: 0;
    left: 300px;
    width: 100%;
    height: 100%;
    background-color: #ffde00;
}

#ourContents .second .label-y-bg{
    position: relative;
    bottom: 0;
    right: 200px;
    width: 100%;
    height: 100%;
    background-color: #ff9bb6;
}

#ourContents .third .label-y-bg{
    position: relative;
    bottom: 0;
    left: 300px;
    width: 100%;
    height: 100%;
    background-color: #55b1ff;
}


#ourContents .label-text{
    position: absolute;
    bottom: 12.605%;
    left: 29.387%;
    z-index: 10;
}

#ourContents .second .label-text{
    left: 28.387%
}

#ourContents .label-text span{
    font-size: 1.4445em;
    font-weight: 400;
}

#ourContents .first .label-book, #ourContents .third .label-book{
    position: absolute;
    width: 37.973%;
    bottom: 0.521%;
    right: -19.979%;
    z-index: 8;
}

#ourContents .second .label-book{
    position: absolute;
    width: 37.973%;
    bottom: 0.521%;
    left: -18.979%;
    z-index: 8;
}


@media screen and (max-width: 1044px){
    #ourContents  .container{
        width: -webkit-calc(100% - 2.874%);
        width: -moz-calc(100% - 4.789%);
        width: calc(100% - 4.789%);
        min-width: -webkit-calc(100% - 2.604%);
        min-width: -moz-calc(100% - 2.604%);
        min-width: calc(100% - 4.789%);
    }
    #ourContents .section .child-r{
        right: -7.548%;
    }
    #ourContents .second .speach-img{
        right: 19.695%;
    }
    #ourContents .second .speach-text{
        right: 27.820%
    }
    #ourContents .speach-text, label-text{
        font-size: 0.75em;
    }
    #ourContents .label-text{
        position: absolute;
        bottom: 9.605%;
        left: 39.387%;
    }
    #ourContents .second .label-text{
        left: 6.387%;
    }
    #ourContents .label-text span{
        font-size: 1.2223em;
    }
    #ourContents .label-book{
        display: none;
    }
    #ourContents .first .speach-text{
        left: 30.18%;
    }
    #ourContents .third .speach-text{
        left: 29.227%
    }
    #levelSystem .sub-content .road .step p {
        margin-lefr:0;
    }
}



@media screen and (max-width: 768px) {

    #ourContents  .swiper-slide {
        height: 260px;
        background-size: 130% !important;
    }

    #ourContents .swiper-wrapper .swiper-slide .slide-content{
        width: 70%;
    }


    #ourContents .first .wrap-label,
    #ourContents .third .wrap-label{
        left: 2.604%
    }
    #ourContents  .label-text{
        position: absolute;
        bottom: 9.605%;
        left: 38.387%;
        font-size: 0.825em;
    }
    #ourContents .speach-text{
        width: 100%;

    }
    #ourContents .second .speach-text{
        left: 19.461%;
    }
}

/*aboutUs-eLibrary-mobileApps*/

#mobileApps, #booksForYou{
    padding-bottom: 40px;
}

#mobileApps .sub-main{
    position: relative;
    padding-top: 40px;
    width: 100%;
    height: 600px;
    background: url(/public_html/resource/images/aboutUs/mobileApps_bg.png) repeat;
}
#mobileApps .sub-main>.container{
    height: 560px;
    overflow: hidden;
    position: relative;
}

#mobileApps .sub-main .appPreview{
    width: 45.410%;
    display: inline-block;
    position: relative;
}
#mobileApps .sub-main .wrap{
    position: absolute;
    padding-top: 19.55%;
    top: 0;
    left: 9.463%;
    width: 81.724%;
}
.bx-wrapper {
    position: relative;
    border: 0px;
}
.wrap .wrap-slide .swiper-wrapper{
    position: relative;
    top: 14.643%;
}

#mobileApps .appPromoDesc {
    position: absolute;
    top: 32%;
    left: 48%;
    width: 50%;
    margin-top: -80px;
    text-align: center;
    font-weight: 300;
}
#mobileApps .appPromoDesc ul li h2{
    width: 87.737%;
    margin: 0 auto;
    margin-bottom: 30px;
}
#mobileApps .appPromoDesc ul li p {
    font-size: 1.333333333333333em;
    font-weight: 300;
    letter-spacing: -.05em;
}
#mobileApps .appPromoDesc ul li p span{
    font-weight: 600;
}
.container:after, .container:before {
    display: table;
    content: " ";
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.appPromoDesc li {
    display: none;
}
li.app_desc_1,
li.app_desc_2 {
    padding-top: 30px;
}
li.app_desc_0 p span{
    color: #ee4848;
}
li.app_desc_1 p span{
    color: #ffad0f;
}
li.app_desc_2 p span{
    color: #18a779;
}
.bx-controls {
    position: absolute;
    top: 330px;
    right: -96.58%;
}
.bx-pager-item {
    float: left;
}
.bx-wrapper .bx-pager-item a {
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    width: 18px;
    height: 18px;
    background: #000;
    opacity: .2;
    text-indent: -100000px;
    margin: 0 5px;
}

a.active.bx-pager-link {
    background: #3995ba;
    opacity: 1;
}
a.active.bx-pager-link {
    background: #3995ba;
    opacity: 1;
}

.diagonal{
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    z-index: 10;
    background: url(/public_html/resource/images/aboutUs/diagonal.png) center bottom no-repeat;
}
.diagonal.diagonal200{
    height: 200px !important;
    bottom: -100px !important;
    background: url(/public_html/resource/images/aboutUs/diagonal_200.png) center bottom no-repeat !important;
}
.section .section-title{
    padding: 80px 0 30px;
    font-size: 3em;
    color: #248ab2;
    text-align: center;
}

.section .section-content{
    padding-top: 30px;
    color: #808285;
    font-size: 1.3334em;
    font-weight: 300;
    text-align: center;
}

.section .line{
    width: 580px;
    margin: 0 auto;
    border-bottom: 2px solid #d1d3d4;
}

#mobileApps .section .apps-icon{
    margin-top: 50px;
    text-align: center;
    background: url(/public_html/resource/images/aboutUs/mobileApps-diagonal.png) center bottom no-repeat;
}

#mobileApps .section .wrap-apps .apps-QR{
    width: 100%;
    background: #248ab2;
}

#mobileApps .section .wrap-apps .apps-QR .apps-QR-title{
    padding: 45px 0 55px 0;
    font-size: 4.4445em;
    font-weight: 900;
    color: #2082ab;
    text-align: center;
}
#mobileApps .section .wrap-apps .apps-QR .apps-QR-code{
    width: 79.297%;
    margin: 0 auto;
}
#mobileApps .section .wrap-apps .apps-QR .apps-QR-code .app-store{
    position: relative;
    float: left;
    width: 36.946%;
}

#mobileApps .section .wrap-apps .apps-QR .apps-QR-code .app-store .app-store-qr{
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 49% 23.333% 70px 23.333%
}

#mobileApps .section .wrap-apps .apps-QR .apps-QR-code .google-play{
    position: relative;
    float: right;
    width: 36.946%;
}

#mobileApps .section .wrap-apps .apps-QR .apps-QR-code .google-play .google-play-qr{
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 49% 23.333% 70px 23.333%
}

#mobileApps .section .wrap-apps .apps-QR .apps-QR-hands{
    width: 80.566%;
    padding-top: 9.524%;
    margin: 0 auto;
}

@media screen and (min-width: 1920px){
    .diagonal{
        background-size: 100% 90%;
    }
    #mobileApps .section .wrap-apps .apps-icon{
        background-size: 100% 81%;
    }
}



@media screen and (max-width: 1044px){
    #mobileApps .container{
        width: -webkit-calc(100% - 2.874%);
        width: -moz-calc(100% - 4.789%);
        width: calc(100% - 4.789%);
        min-width: -webkit-calc(100% - 2.604%);
        min-width: -moz-calc(100% - 2.604%);
        min-width: calc(100% - 4.789%);
    }
    .bx-controls {
        top: 400px;
        right: -96.586%;
        z-index: 1000;
    }
    #mobileApps .section .wrap-apps .apps-QR .apps-QR-title{
        font-size: 4em;
    }
}

/*aboutUs-eLibrary-booksForYou*/


#booksForYou .sub-main{
    position: relative;
    width: 100%;
    height: 700px;
    background: url(/public_html/resource/images/aboutUs/booksForYou-bg.png) repeat;
}

#booksForYou div.today-book-wrap, #booksForYou div.star, #booksForYou div.today-bg{
    top:0;
    margin: 0;
}
#booksForYou div.today-book-wrap{
    width: 61.523%;
    height: 90%;
}
#booksForYou div.today-book-wrap button{
    margin-left: 31.096%;
}
#booksForYou .sub-main .sub-main-title{
    position: absolute;
    top: 230px;
    right: 0;
    color: #fff;
    font-size: 2em;
    text-align: center;
    z-index: 40;
}

#booksForYou .sub-main .sub-main-title span{
    color: #fff45f;
}

#booksForYou .section .recommended .section-content{
    padding-top: 80px;
    font-size: 1.5556em;
}

#booksForYou .section .wrap-recommended .recommended-multi{
    text-align: center;
    background: url(/public_html/resource/images/aboutUs/booksForYou-diagonal.png) center bottom no-repeat;
}

#booksForYou .section .wrap-recommended .recommended{
    background: #f3f3f3;
}

#booksForYou .section .wrap-recommended .recommended p span{
    color: #fd6d40;
    font-weight: 600;
}

#booksForYou .section .wrap-recommended .recommended .booksForYou-my{
    padding: 20px 0 31.7%;
    text-align: center;
}

@media screen and (min-width: 1920px){
    #booksForYou .section .wrap-recommended .recommended-multi{
        background-size: 100% 20%;
    }
}

@media screen and (max-width: 1044px){
    #booksForYou .container{
        width: -webkit-calc(100% - 2.874%);
        width: -moz-calc(100% - 4.789%);
        width: calc(100% - 4.789%);
        min-width: -webkit-calc(100% - 2.604%);
        min-width: -moz-calc(100% - 2.604%);
        min-width: calc(100% - 4.789%);
    }
    #booksForYou div.today-bg{
        left: -5.437%;
    }
    #booksForYou .sub-main .sub-main-title{
        font-size: 1.6993em;
    }
}

@media screen and (max-width: 768px){
    #booksForYou div.today-bg{
        left: -85px;
    }
    #booksForYou div.today-book-wrap button{
        margin-left: 21.696%;
    }
    #booksForYou .sub-main .sub-main-title{
        font-size: 1.3417em;
    }

}

/*aboutUs-eLibrary-readAndCheckUp*/

#readAndCheckUp{
    padding-bottom: 40px;
}

#readAndCheckUp .read{
    width: 1310px;
    margin: 0 auto;
    position: relative;
    padding: 70px 0 90px;
}


#readAndCheckUp .read button{
    position: absolute;
    width: 18.321%;
    height: 5.660%;
    top: 21.698%;
    left: 12.977%;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    font-size: 1.6667em; /* 24/18 */
    font-weight: 600;
}

#readAndCheckUp .checkUp button{
    position: absolute;
    width: 18.321%;
    height: 7.660%;
    top: 5.590%;
    left: 12.977%;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    font-size: 1.6667em; /* 24/18 */
    font-weight: 600;
}

#readAndCheckUp .section button img{
    width:18.75%;
}

.btn-red {
    color: #fff;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    border-radius: 4px;
    background: #eb4335;
    box-shadow: 0 5px #bd2114;
}

#readAndCheckUp .read .btn-red:hover {
    color: #fff;
    box-shadow: 0 4px #bd2114;
    top: 21.792%;
}
#readAndCheckUp .read .btn-red:active {
    color: #fff;
    box-shadow: 0 0 #bd2114;
    top: 22.170%;
}

#readAndCheckUp .checkUp .btn-red:hover {
    color: #fff;
    box-shadow: 0 4px #bd2114;
    top: 5.714%;
}
#readAndCheckUp .checkUp .btn-red:active {
    color: #fff;
    box-shadow: 0 0 #bd2114;
    top: 6.211%;
}

#readAndCheckUp .read .read-three{
    position: absolute;
    top: 6.604%;
    right: 21.212%;
}

#readAndCheckUp .read .read-four{
    position: absolute;
    bottom: 10.849%;
    left: 17.519%;
}

#readAndCheckUp .read .read-five{
    position: absolute;
    bottom: 6.604%;
    right: 27.212%;
}


#readAndCheckUp .read h2{
    color: #248ab2;
    font-size: 1.1112em;
}

#readAndCheckUp .read .read-three h2:before{
    content: "3";
    padding: 1px 9px;
    /*    background-image: url(/public_html/resource/images/aboutUs/three.png);*/
    position: absolute;
    top: 0;
    left: -35px;
    color: #fff;
    background-color: #248ab2;
}

#readAndCheckUp .read .read-four h2:before{
    content: "4";
    padding: 1px 9px;
    /*    background-image: url(/public_html/resource/images/aboutUs/four.png);*/
    position: absolute;
    top: 0px;
    left: -35px;
    color: #fff;
    background-color: #248ab2;
}

#readAndCheckUp .read .read-five h2:before{
    content: "5";
    padding: 1px 9px;
    /*    background-image: url(/public_html/resource/images/aboutUs/five.png);*/
    position: absolute;
    top: 0;
    left: -35px;
    color: #fff;
    background-color: #248ab2;
}

#readAndCheckUp .read p{
    color: #939598;
    font-size: 0.8889em;
}

#readAndCheckUp .checkUp-diagonal{
    width: 100%;
    height: 100px;
    background: url(/public_html/resource/images/aboutUs/booksForYou-diagonal.png) center bottom no-repeat;
}

#readAndCheckUp .wrap-checkUp{
    padding: 60px 0 26.766%;
    background-color: #f3f3f3;
}

#readAndCheckUp .checkUp{
    position: relative;
    width: 1310px;
    margin: 70px auto 0;
}

#readAndCheckUp .checkUp p{
    position: absolute;
    bottom: -3.804%;
    left: 29.167%;
    color: #248ab2
}

@media screen and (min-width: 1920px){
    #readAndCheckUp .checkUp-diagonal{
        background-size: 100% 100%;
    }
}


@media screen and (max-width: 1320px){
    #readAndCheckUp .read, #readAndCheckUp .checkUp{
        width: -webkit-calc(100% - 2.874%);
        width: -moz-calc(100% - 4.789%);
        width: calc(100% - 4.789%);
        min-width: -webkit-calc(100% - 2.604%);
        min-width: -moz-calc(100% - 2.604%);
        min-width: calc(100% - 4.789%);
    }
    #readAndCheckUp .read .read-three{
        right: 25.212%;
    }
}

@media screen and (max-width: 1044px){
    #readAndCheckUp .read h2, #readAndCheckUp .checkUp p{
        font-size: 0.8889em;
    }
    #readAndCheckUp .checkUp p{
        bottom: -9.596%;
    }
    #readAndCheckUp .read p{
        font-size: 0.7778em;
    }
    #readAndCheckUp .read .read-four{
        bottom: 13.849%;
    }
    #readAndCheckUp .read .read-five{
        bottom: 9.604%;
    }
    #readAndCheckUp .section button{
        font-size: 1.1112em;
    }
}

/*company*/

@font-face{
    font-family: 'RixPhilB_Pro';
    src: url('/public_html/resource/font/RixPhilB_Pro.eot');
    src: url('/public_html/resource/font/RixPhilB_Pro.eot?#iefix') format('embedded-opentype'),
        url('/public_html/resource/font/RixPhilB_Pro.ttf')  format('truetype'),
        url('/public_html/resource/font/RixPhilB_Pro.woff') format('woff');
}

#company{
    padding-bottom: 40px;
}

#company .section .sub-main{
    position: relative;
    width: 100%;
    height: 600px;
    background: url(/public_html/resource/images/aboutUs/company-main.png) center top no-repeat;
    background-size: cover;
}

#company .section .sub-main .main-title{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -81px 0 0 -365px;
}

#company .section .sub-main .diagonal{
    position: absolute;
    bottom: 0;

}

#company .wrap-company .container{
    width: 1000px;
}

#company .wrap-company .container .wrap-content{
    display: flex;
    -webkit-display: flex;
    padding: 65px 0 40px;
}

#company .wrap-company .container .wrap-content .content-l{
    flex: 1;
    margin-right: 10px;
}

#company .wrap-company .container .wrap-content .content-l li{
    display: flex;
    -webkit-display: flex;
    margin-bottom: 10px;
}

#company .wrap-company .container .wrap-content .content-l li .title{
    width: 180px;
    height: 50px;
    color: #fff;
    font-size: 0.8889em;
    text-align: right;
}

#company .wrap-company .container .wrap-content .content-l li:nth-child(1) .title{
    padding: 7px 10px;
    background-color: #f49d1e;
}
#company .wrap-company .container .wrap-content .content-l li:nth-child(2) .title{
    padding: 15px 10px;
    background-color: #17a779;
}

#company .wrap-company .container .wrap-content .content-l li:nth-child(3) .title{
    padding: 15px 10px;
    background-color: #ef4849;
}

#company .wrap-company .container .wrap-content .content-l li:nth-child(4) .title{
    padding: 7px 10px;
    background-color: #8d3a96;
}
#company .wrap-company .container .wrap-content .content-l li:nth-child(5) .title{
    padding: 15px 10px;
    background-color: #416db4;
}
#company .wrap-company .container .wrap-content .content-l li .content{
    width: 60%;
    padding-left: 20px;
    border-top:  2px dashed #d1d3d4;
    border-right: 2px dashed #d1d3d4;
    border-bottom: 2px dashed #d1d3d4;
    font-size: 1.2223em;
    line-height: 46px;
}

#company .wrap-company .container .wrap-content .content-l li:nth-child(1) .content{
    color: #f49d1e;
}

#company .wrap-company .container .wrap-content .content-l li:nth-child(2) .content{
    color: #17a779;
}

#company .wrap-company .container .wrap-content .content-l li:nth-child(3) .content{
    color: #ef4849;
}

#company .wrap-company .container .wrap-content .content-l li:nth-child(4) .content{
    color: #8d3a96;
}

#company .wrap-company .container .wrap-content .content-l li:nth-child(5) .content{
    color: #416db4;
}

#company .wrap-company .container .wrap-content .content-r{
    flex: 1;
}

#company .wrap-company .container p{
    font-size: 1.5556em;
    font-weight: 300;
    color: #808285;
    text-align: center;
}
#company .wrap-company .container p span{
    font-weight: 600;
    color: #fd6d40;
}

#company .section .company-diagonal{
    width: 100%;
    height: 100px;
    margin-top: 45px;
    background: url(/public_html/resource/images/aboutUs/booksForYou-diagonal.png) center bottom no-repeat;
}

#company .section .hello-bg, #HighlightsLibrary .section .wrap-children{
    width: 100%;
    padding: 60px 0 23.766%;
    background-color: #f3f3f3;
}

#company .section .wrap-hello{
    display: flex;
    -webkit-display: flex;
}

#company .section .hello-img{
    margin: 0 30px 0 50px;;
    text-align: center;
}

#company .section .hello-img .job{
    font-size: 0.7778em;
    letter-spacing: -0.6px;
}

#company .section .hello-img .president_name{
    font-family: 'RixPhilB_Pro', sans-serif;
    font-size: 1.6667em;
}

#company .section .hello{
    font-family: 'RixPhilB_Pro', sans-serif;
    font-size: 1.6112em;
    line-height: 95%;
}

#company .section .andy-sign{
    position: absolute;
    bottom: -9.877%;
    right: 0;
}

@media screen and (min-width: 1920px){
    #company .section .company-diagonal{
        background-size: 100% 100%;
    }
}

@media screen and (max-width: 1044px){
    #company .wrap-company .container{
        width: -webkit-calc(100% - 2.874%);
        width: -moz-calc(100% - 4.789%);
        width: calc(100% - 4.789%);
        min-width: -webkit-calc(100% - 2.604%);
        min-width: -moz-calc(100% - 2.604%);
        min-width: calc(100% - 4.789%);
    }
    #company .hello-bg .container{
        width: -webkit-calc(100% - 2.874%);
        width: -moz-calc(100% - 4.789%);
        width: calc(100% - 4.789%);
        min-width: -webkit-calc(100% - 2.604%);
        min-width: -moz-calc(100% - 2.604%);
        min-width: calc(100% - 4.789%);
    }
    #company .wrap-company .container .wrap-content .content-l li .content{
        font-size: 0.8334em;
    }
    #company .wrap-company .container p{
        font-size: 1.3334em;
    }
    #company .section .andy-sign{
        right: 10px;
    }
    #company .section .hello-img .president_name{
        font-size: 1.27em;
    }
}


/*HighlightsLibrary*/

#HighlightsLibrary, #ourContents, #levelSystem,#booksForYou,#readAndCheckUp,#mobileApps,#company{
    padding-bottom: 0;
}

#HighlightsLibrary{
    overflow: hidden;
}

#HighlightsLibrary .section .sub-main{
    position: relative;
    width: 100%;
    height: 600px;
    background: url(/public_html/resource/images/aboutUs/HighlightsLibrary-main.jpg) center top no-repeat;
    background-size: cover;
}
#HighlightsLibrary .section .main-title-wrap{
    position: absolute;
    width: 100%;
    height: 600px;
    top: 0;
    left: 0;
}

#HighlightsLibrary .section .main-title-wrap .main-title{
    position: absolute;
    margin: -140px 0 0 0;
    top: 50%;
    right: 5px;
}
#HighlightsLibrary .section .main-title{
    position: absolute;
    margin: -140px 0 0 0;
    top: 50%;
    right: 5px;
}

#HighlightsLibrary .section .wrap-content{
    padding: 95px 0 20px;
}

#HighlightsLibrary .section .wrap-content ul li{
    margin-top: -60px;
}

#HighlightsLibrary .section .wrap-content ul li:nth-child(2n-1) .hexagon{
    float: left;
    margin: 0 40px 0 -70px;
}
#HighlightsLibrary .section .wrap-content ul li:nth-child(2n) .hexagon{
    float: right;
    margin:  0 -70px 0 40px;
}

#HighlightsLibrary .section .wrap-content ul li:nth-child(2n) .content{
    float: right;
    text-align: right;
}

#HighlightsLibrary .section .wrap-content ul li .content h2{
    padding: 70px 0 35px 0;
    font-size: 1.5556em;
}

#HighlightsLibrary .section .wrap-content ul li .content p{
    color: #808285;
    font-weight: 300;
    letter-spacing: -0.4px;
}

#HighlightsLibrary .section .HighlightsLibrary-diagonal{
    width: 100%;
    height: 100px;
    background: url(/public_html/resource/images/aboutUs/booksForYou-diagonal.png) center bottom no-repeat;
}

#HighlightsLibrary .wrap-children{
    text-align: center;
}

#HighlightsLibrary .section .wrap-children .diagram{
    padding-top: 80px;
}

.contactUs{
    width: 100%;
    padding: 30px 0 70px 0;
    background: #4d4d4f;
}

.contactUs .container{
    height: auto;
}

.contactUs .contact-title{
    position: relative;
    float: left;
    padding-top: 10px;
    font-weight: 100;
    font-size: 28px;
    color: #fff;
}

.contactUs .contact-title .line{
    position: absolute;
    width: 50px;
    top:0;
    left: 0;
    border: 2px solid #248ab2;
}

.contactUs .contact-email{
    float: right;
    color: #fff;
}
.contactUs .contact-question{
    float: right;
    padding-right: 40px;
}

.contactUs .contact-email>p, .contactUs .contact-question>p{
    color: #fff;
    font-size: 18px;
}

.contactUs .contact-email .contact-email-con, .contactUs .contact-question .contact-question-con{
    padding-top: 3px;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
}

.contactUs .contact-email p a, .contactUs .contact-question p a{
    padding-top: 3px;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    text-decoration: underline;
}

.contactUs .contact-email p a:hover, .contactUs .contact-question p a:hover{
    color: #44c8f5;
    cursor: pointer;
}

.contactUs .contact-img{
    float: right;
    padding-right: 10px;
}
@media screen and (min-width: 1920px){
    #HighlightsLibrary .section .company-diagonal{
        background-size: 100% 100%;
    }
}

@media screen and (max-width: 1044px){
    #HighlightsLibrary .container{
        width: -webkit-calc(100% - 2.874%);
        width: -moz-calc(100% - 4.789%);
        width: calc(100% - 4.789%);
        min-width: -webkit-calc(100% - 2.604%);
        min-width: -moz-calc(100% - 2.604%);
        min-width: calc(100% - 4.789%);
    }
    #HighlightsLibrary .section .wrap-content ul li {
        margin-top: 0;
    }
    #HighlightsLibrary .section .wrap-content ul li .content p{
        font-size: 16px;
     }
    .contactUs .container{
        width: -webkit-calc(100% - 2.874%);
        width: -moz-calc(100% - 4.789%);
        width: calc(100% - 4.789%);
        min-width: -webkit-calc(100% - 2.604%);
        min-width: -moz-calc(100% - 2.604%);
        min-width: calc(100% - 4.789%);
    }
}

/* Sign in */
#signin {
    padding: 0;
}
#signin header {
    width: 100%;
    height: 60px;
    background: #248ab2;
    border-radius: 10px 10px 0 0;
}
#signin header h1 {
    width: 100%;
    line-height: 60px;
    color: #fff;
    text-align: center;
}
.sign {
    padding: 50px 0;
}
.sign h1 {
    margin-bottom: 0;
    font-size: 1.666666666666667rem; /*30/18*/
    line-height: 1;
    text-align: center;
    color: #414042;
    letter-spacing: -0.05em;
}
.sign h1 span {
    color: #eb485b;
}
.sign h1 span br {
    display: none;
}
.sign_info {
    width: 72.65625%; /*744/1024*/
    margin: 0 auto;
}
.sign_info.type2 {
    padding: 54px 0 0;
}
.sign_info div input,
.sign_info div select {
    display: block;
    width: 38.17204301075269%; /* 284/744 */
    float: left;
    margin-right: 2.68817204301075%; /* 20/744 */
    margin-bottom: 22px;
    padding: 0 4.83870967741935%; /*36/744*/
    height: 54px;
    border:3px solid #bcbec0;
    border-radius: 10px;
    font-size: 1.222222222222222rem; /*22/18*/
    color: #414042;
}
.sign_info div select {
    margin-bottom: 0;
}
.sign_info div input:nth-child(2) {
    margin-right: 0;
}

.sign_info div.email input {
    width: 64.8%;
}

.sign_info div.email2 input,
.sign_info div.id input { /*2017-09-11*/
    width: 89.51612903225806%; /*666/744*/
}
.sign_info div.pw input { /*2017-09-11*/
    width: 60%;
    margin: 0 auto 22px;
    float: none;
}
.sign_info .email button {
    margin-top: 0px;
    width: 22%;
    height: 55px;
    border-radius: 10px;
}
.sign_info > div {
    overflow: hidden;
}
.sign_info div select {
    width: 100%;
    height: 60px;
    padding: 0 4%;
    -webkit-appearance: none; /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;

    background: url(/public_html/resource/images/icn/icn-select.png) 97.08602150537634% center no-repeat;
}
.sign_info div select::-ms-expand {
   display: none;            /* 화살표 없애기 for IE10, 11*/
}
.sign_info div select:required:invalid {
  color: #a5a5a5;
}
.sign_info div option[value=""][disabled] {
  display: none;
}
.sign_info div option {
    color: #414042;
}
.sign_info div p {
    clear: both;
    height: 60px;
    color: #ea485b;
    font-size: 1.222222222222222rem; /*22/18*/
    text-align: center;
}
.sign_btn {
    margin-top: 20px;
    text-align: center;
    overflow: visible !important;
}
.sign_btn button {
    width: 47.04301075268817%; /*350/744*/
    height: 60px;
    border-radius: 60px;
    font-size: 1.555555555555556em; /*28/18*/
}
.sign_btn.row2 button { /*2017-09-11*/
    width: 60%;
    display: block;
    margin: 0 auto 15px;
}
.sign .content-area {
    overflow: hidden;
    margin:0 2.03252032520325% 0;
}

.sign .content-area li {
    float: left;
    width: 18.9%;
    margin-right: 1.375%;
    margin-bottom: 40px;
}
.sign .content-area li:nth-child(5n+5) {
    margin-right: 0;
}
.content-area + .sign_btn {
    margin-top: 0;
}
.content-area + .sign_btn button {
    width: 34.1796875%; /*350/1024*/
    font-size: 1.555555555555556em; /*28/18*/
}
.sign .content-area li a {
    display: block;
    position: relative;
}
.sign .content-area li a span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.my-inter {
    position: relative;
    top: -20px;
    clear: both;
    margin: 0 auto -20px;
    width: 96.09375%;
    height: 166px;
    background: url(/public_html/resource/images/library/interest_bg.png) right 0 no-repeat;
}
.my-inter p {
    padding: 70px 0 0 20px;
    font-size: 1em;
    display: block;
}
.my-inter p br:last-child {
    display: none;
}

#signin .login {
    margin: 0 auto;
    padding: 54px 0 0;
    width: 400px;
}
#signin .login div {
    text-align: center;
}
#signin .login div div {
    width: 82%;
    margin: 0 auto 20px;
}
#signin .login label {
    display: inline-block;
    padding-right: 3%;
    width: 23.0769%;
    font-size: 0.8889em;
    color: #248ab2;
    text-align: right;
}
.agree {
    padding-top: 4%;
    overflow: hidden;
}
#signin #save_id,
.agree #agree {
    margin-top: 4px;
    float: right;
    width: 15px;
    height: 15px;
    border: 1px solid #d1d3d4;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: #fff;
    padding: 0;
}
.agree label  {
    margin-left: 10px;
    float: right;
    width: inherit;
}
#signin .login input {
    width: 58%;
    padding: 0 6.1538%;
    height: 41px;
    border: 2px solid #d1d3d4;
    border-radius: 45px;
    -moz-border-radius: 45px;
    -webkit-border-radius: 45px;
    font-size: 0.8889em;
}
#signin .login label.save-id {
    float: right;
    width: inherit;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-right: 8.5%;
}
#signin .login button {
    margin-top: 50px;
    margin-bottom: 60px;
    width: 87.5%; /*350/400*/
    height: 60px;
    border-radius: 60px;
    font-size: 1.555555555555556em; /*28/18*/
}


@media screen and (max-width: 1050px) {
    .sign h1 span br {
        display: block;
    }
    .sign_info div input,
    .sign_info div select {
        border: 2px solid #bcbec0;
    }
    .content-area li a span {
         background-size: contain !important;
    }
    .agree label  {
        letter-spacing: -1px;
    }
    .sign_info div.email input {
        width: 89%;
    }
    .sign_info .email button {
        width: 100%;
    }
    .my-inter p br:last-child {
        display: block;
    }
}

.content-area li a.act span {
    background: url(/public_html/resource/images/login/signin-act.png) left top no-repeat;
}

@media screen and (min-width: 1024px) {
    .content-area li a:hover span {
        background: url(/public_html/resource/images/login/signin-hover.png) left top no-repeat;
    }
    .content-area li a:active span {
        background: url(/public_html/resource/images/login/signin-act.png) left top no-repeat;
    }
}



#header nav ul.nav-2d li.prefer {
    width: 100%;
    text-align: right;
    color: #248ab2;
}
#header nav ul.nav-2d li.prefer a {
    width: 20%;
    text-align: right;
    margin: 6px 0 0 80%;
}
#header nav ul.nav-2d li.prefer a:hover {
    background: none;
    color: #248ab2;
}
#header nav ul.nav-2d li.prefer img {
    margin-top: -3px;
    padding-right: 5px;
}

#preference {
    margin: 0 auto;
}
#preference > header {
    background: #248ab2;
    height: 40px;
    overflow: hidden;
}
#preference > header h1 {
    padding-left: 20px;
    line-height: 40px;
    color: #fff;
    font-size: 1.333333333333333em; /*24/36*/
    float: left;
}
#preference > header a {
    float: right;
}
#preference section.level-wrap article {
    padding: 0 26px;
}
#preference .sign {
    padding: 0;
}
#preference .sign .content-area {
    padding: 0 2.03252032520325% 0;
}
/* 2017.09.14 System Check Page */
 .system {
     margin-top: 30px;
    padding: 0 30px 30px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    background-color: #eff9fe;
 }
 .system h2,.level h2 {
    font-size: 1.2rem; /*24/18*/
    text-align: left;
    padding-top: 28px;
    padding-bottom: 5px;
    letter-spacing: -.05em;
    color: #248ab2;
}
.level h2.bold {
    font-weight : 600;
}
.level h3 {
    font-size: 1rem; /*24/18*/
    text-align: left;
    padding-top: 15px;
    padding-bottom: 5px;
    letter-spacing: -.05em;
    color: #248ab2;
}
.level h3.begin {
    padding-top: 0;
}
.system p,.level p {
    padding-left: 20px;
    font-size: 1rem; /*20/18*/
    text-align: left;
   /* font-weight: 300;*/
    letter-spacing: -.05em;
    word-break: break-word;
    line-height: 1.4;
}
.system p span,.level p span {
    font-size: 0.6rem;
    display: inline-block;
    vertical-align: 3px;
}

 .level {
     margin-top: 20px;
    padding: 0 30px 30px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    background-color: #eff9fe;
 }
 .wrap-content .level-grade img{
     padding-top:18px;
 }
 .level div,div-guide {
    text-align: center;
 }
#HighlightsLibrary .section .ad_video{
  margin-top: 4.5%;
  padding: 4.5% 0 11%;
  background: url(/public_html/resource/images/aboutUs/ad_video.png) no-repeat center top;
}

#HighlightsLibrary .section .ad_video > .container{
  height: inherit;
}
#HighlightsLibrary .section .ad_video > .container video,
#HighlightsLibrary .section .ad_video > .container iframe{
    width: 100%;
    height: 60%;
}

@media screen and (max-width: 1044px){
  #HighlightsLibrary .section .ad_video{
    padding: 8% 0 14%;
  }
}
.select_wrap {
    width: 74.3% !important;
}
.tab-wrap div {
    width: 25.7%;
}
.tab-wrap div {
    width: 50%;/* 164px; */
}
.tab-wrap div input {
    width: 82%;/* 164px; */
}
@media screen and (max-width: 1024px) {
    .select_wrap {
        width: 71.2% !important;
    }
    .tab-wrap div {
        width: 28%;
    }
    .tab-wrap div input {
        width: 65%;
    }
    .tab-wrap div {
        width: 70%;/* 164px; */
    }
    .tab-wrap div input {
        width: 80%;/* 164px; */
    }
}

@media screen and (max-width: 800px) {
    .tab-wrap ul li {
        width: 14%; /* 110/1004 */
    }
    .tab-wrap li.select {
        width: 20%;
    }
    .select_wrap {
        width: 68% !important;
    }
    .select_wrap li button {
        line-height: 16px !important;
    }
    .tab-wrap ul li a {
        font-size: 0.5778em; /* 14/18 */
    }
   .tab-wrap div {
        width: 31%;
    }
    .tab-wrap div {
        width: 50%;/* 164px; */
    }
    .tab-wrap div input {
        width: 80%;/* 164px; */
    }
}
@media screen and (max-width: 768px) {
    .tab-wrap ul li:first-child {
        width: 25%; /* 170/1004 */
    }
    .tab-wrap ul li {
        float: left;
    }
    .select_wrap {
        width: 73.9% !important;
    }
   .tab-wrap div {
        width: 25.3%;
    }
    .tab-wrap div {
        width: 70%;/* 164px; */
    }
    .tab-wrap div input {
        width: 80%;/* 100px !important; */
    }
}
.select_wrap > li {
    position: relative;
}
.tab-wrap .select_wrap > li:nth-of-type(1) {
    width: 28%
}
.tab-wrap .select_wrap > li:nth-of-type(2) {
    width: 20%;
}
.tab-wrap .select_wrap > li:nth-of-type(3) {
    width: 33%;
}
.select_wrap > li ul {
    position: absolute;
    display: none;
    top: 18px;
    left: 0;
    z-index: 5;
    border: 1px solid #d1d1d1;
    border-radius: 0 0 20px 20px;
    -mox-border-radius: 0 0 20px 20px;
    -webkit-border-radius: 0 0 20px 20px;
    overflow: hidden;
}
.tab-wrap ul.select_wrap > li > ul li:first-child {
    padding-top: 17px;
}

.tab-wrap ul.select_wrap > li > ul li {
    width: 100%;
    background: #fff;
    margin-bottom: 0;
}
.tab-wrap ul.select_wrap > li > ul li a {
    width: 100%;
    height: 32px;
    line-height: 30px;
    background: #fff;
    border: white 1px solid;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}
.tab-wrap ul.select_wrap > li > ul li a:hover,
.tab-wrap ul.select_wrap > li > ul li a.active {
    background: #4356a4;
    border: #4356a4 1px solid;
    color: #fff;
    font-weight: 400;
}
.select_wrap li button {
    z-index: 10;
    position: relative;
    padding: 0 0 0 14px;
    display: block;
    font-size: 0.7778em; /* 14/18 */
    width: 100%;
    height: 35px;
    line-height: 33px;
    text-align: left;
    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    background: #fff;
    color: #939598;
    border: 1px solid #d1d3d4;
}
.select_wrap li button::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 23px;
    height: 23px;
    background: #f8f8f8 url(/public_html/resource/images/common/select_down.png) center center no-repeat;
    border: 1px solid #d1d1d1;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    transition: all 0.3s ease;
    transform: rotate(0);
}
.select_wrap li button.active::after {
    border: 1px solid #4356a4;
    background: #4356a4 url(/public_html/resource/images/common/select_top.png) center center no-repeat;
}
.level_select {
    height: 335px;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    /* border: 3px solid transparent; */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100 */
/*     background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); FF3.6-15
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); Chrome10-25,Safari5.1-6
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); IE6-9 */
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-botton:end:increment {
    display: block;
    height: 10px;
    background: #efefef;
}
::-webkit-scrollbar-track {
    background: #efefef;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    height: 50px;
    width: 50px;
    background: rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
::-webkit-scrollbar-track-piece {
    background-color : transparent;
}



/* reward 180122 추가 */

.reward {
    position: relative;
    width: 100%;
    height: 1670px;
    padding: 0;
    padding-bottom: 0 !important;
    background: url(/public_html/resource/images/reward/bg.png) center top no-repeat;
}
.reward-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    background: url(/public_html/resource/images/reward/road.png) center 171px no-repeat;
    z-index: 20;
}
.reward .start {
    padding-top: 91px;
    margin-left: 225px;
}
.reward .zippy {
    width: 200px;
    height: 94px;
    position: absolute;
    top: 162px;
    left: 196px;
    z-index: 30;
}
.reward .zippy.step1 {
    top: 307px;
    left: 341px;
}
.reward .zippy.step2 {
    top: 353px;
    left: 687px;
}
.reward .zippy.step3 {
    top: 593px;
    left: 625px;
}
.reward .zippy.step4 {
    top: 593px;
    left: 234px;
}
.reward .zippy.step5 {
    top: 841px;
    left: 132px;
}
.reward .zippy.step6 {
    top: 841px;
    left: 520px;
}
.reward .zippy.step7 {
    top: 1040px;
    left: 704px;
}
.reward .zippy.step8 {
    top: 1058px;
    left: 262px;
}
.reward .zippy.step9 {
    top: 1382px;
    left: 167px;
}
.zippy.step3, .zippy.step4, .zippy.step7, .zippy.step8 {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
.badge {
    position: absolute;
    padding: 11px 10px;
    width: 153px;
    height: 168px;
    background: url(/public_html/resource/images/reward/badge_bg.png) center no-repeat;
}
.mybg:before {
    display: block;
    position: absolute;
    content: "";
    top: -43px;
    left: 47px;
    width: 59px;
    height: 37px;
    background: url(/public_html/resource/images/reward/text_click.png) center no-repeat;
    -webkit-animation: bl .5s infinite ease-out alternate;
    -moz-animation: bl .5s infinite ease-out alternate;
    -ms-animation: bl .5s infinite ease-out alternate;
    -o-animation: bl .5s infinite ease-out alternate;
    animation: bl .5s infinite ease-out alternate;
}
.opa30 a > img {opacity: .3;cursor: default;}
.bgfinish.opa30 span {
    display: none;
}
.bg500 {
    top: 319px;
    left: 239px;
}
.bg1000 {
    top: 319px;
    left: 532px;
}
.bg10000 {
    top: 440px;
    left: 764px;
}
.bg25000 {
    top: 561px;
    left: 469px;
}
.bg50000 {
    top: 687px;
    left: 106px;
}
.bg100000 {
    top: 810px;
    left: 337px;
}
.bg250000 {
    top: 810px;
    left: 754px;
}
.bg500000 {
    top: 1026px;
    left: 503px;
}
.bg750000 {
    top: 1192px;
    left: 145px;
}
.bgfinish {
    padding: 0;
    width: 368px;
    height: 368px;
    top: 1267px;
    left: 50%;
    margin-left: -184px;
}
.bgfinish span {
    display: block;
    width: 368px;
    height: 368px;
    position: absolute;
    top: 0;
    z-index: -1;
    -webkit-animation: bgfinish 10s infinite ease-in-out alternate;
    -moz-animation: bgfinish 10s infinite ease-in-out alternate;
    -ms-animation: bgfinish 10s infinite ease-in-out alternate;
    -o-animation: bgfinish 10s infinite ease-in-out alternate;
    animation: bgfinish 10s infinite ease-in-out alternate;
}
.bgfinish span
@-webkit-keyframes bgfinish {
    to {transform: rotate(360deg);}
}
@-moz-keyframes bgfinish {
    to {transform: rotate(360deg);}
}
@-ms-keyframes bgfinish{
    to {transform: rotate(360deg);}
}
@-o-keyframes bgfinish {
    to {transform: rotate(360deg);}
}
@keyframes bgfinish {
    to {transform: rotate(360deg);}
}
.opa30.bgfinish {
    background: url(/public_html/resource/images/reward/finish_bg.png) 55px 55px no-repeat;
}
.bgfinish a > img {
    margin-top: 55px;
    margin-left: 55px;
    display: block;
    width: 258px;
    height: 259px;
}

.balloon-wrap {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100%;
}
.balloon-wrap > div {
    position: absolute;
}

.balloon-wrap div img {
    -webkit-animation: bl 1s infinite ease-in-out alternate;
    -moz-animation: bl 1s infinite ease-in-out alternate;
    -ms-animation: bl 1s infinite ease-in-out alternate;
    -o-animation: bl 1s infinite ease-in-out alternate;
    animation: bl 1s infinite ease-in-out alternate;
}
@-webkit-keyframes bl {
    from {margin-top: 0;}
    to {margin-top: -10px;}
}
@-moz-keyframes bl {
    from {margin-top: 0;}
    to {margin-top: -10px;}
}
@-ms-keyframes bl{
    from {margin-top: 0;}
    to {margin-top: -10px;}
}
@-o-keyframes bl {
    from {margin-top: 0;}
    to {margin-top: -10px;}
}
@keyframes bl {
    from {margin-top: 0;}
    to {margin-top: -10px;}
}
.balloon-wrap div:nth-child(odd) img {
    margin-top: -15px;
    -webkit-animation: blodd 1s .5s infinite ease-in-out alternate;
    -moz-animation: blodd 1s .5s infinite ease-in-out alternate;
    -ms-animation: blodd 1s .5s infinite ease-in-out alternate;
    -o-animation: blodd 1s .5s infinite ease-in-out alternate;
    animation: blodd 1s .5s infinite ease-in-out alternate;
}
@-webkit-keyframes blodd {
    from {margin-top: -15px;}
    to {margin-top: 0;}
}
@-moz-keyframes blodd {
    from {margin-top: -15px;}
    to {margin-top: 0;}
}
@-ms-keyframes blodd{
    from {margin-top: -15px;}
    to {margin-top: 0;}
}
@-o-keyframes blodd {
    from {margin-top: -15px;}
    to {margin-top: 0;}
}
@keyframes blodd {
    from {margin-top: -15px;}
    to {margin-top: 0;}
}
.bl1 {
    top: 287px;
    left: 88.37890625%;
}
.bl2 {
    top: 523px;
    left: 19.2195122%;
}
.bl3 {
    top: 748px;
    left: 66.08187135%;
}
.bl4 {
    top: 988px;
    left: 17.0399221%;
}
.bl5 {
    top: 1239px;
    left: 61.28404669%;
}
.bl6 {
    top: 1261px;
    left: 85.81146744%;
}

#certificate {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    width: 842px;
    margin: 0 auto;
}
#certificate .layer-close{
    top: -40px;
}
#certificate h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
}
.certi-bg {
    border: 2px solid #248ab2;
}

@media screen and (max-width: 1024px) {
    .reward-wrap {
        width: 740px;
        margin: 0 auto;
        background: url(/public_html/resource/images/reward/road_pad.png) 50px 171px no-repeat;
    }
    .reward .start {
        margin-left: 83px;
    }
    .reward .zippy {
        left: 54px;
    }

    .bg500 {
        left: 97px;
    }
    .bg1000 {
        left: 390px;
    }
    .bg10000 {
        left: 587px;
    }
    .bg25000 {
        left: 327px;
    }
    .bg50000 {
        left: 0;
    }
    .bg100000 {
        left: 195px;
    }
    .bg250000 {
        left: 577px;
    }
    .bg500000 {
        left: 361px;
    }
    .bg750000 {
        left: 3px;
    }
    .reward .zippy.step1 {
        left: 211px;
    }
    .reward .zippy.step2 {
        top: 348px;
        left: 541px;
    }
    .reward .zippy.step3 {
        left: 485px;
    }
    .reward .zippy.step4 {
        left: 104px;
    }
    .reward .zippy.step5 {
        left: -13px;
    }
    .reward .zippy.step6 {
        left: 358px;
    }
    .reward .zippy.step7 {
        left: 530px;
    }
    .reward .zippy.step8 {
        left: 132px;
    }
    .reward .zippy.step9 {
        left: 37px;
    }
    #certificate {
        width: 80%;
    }
    #certificate h2 {
        top: 49%;
        width: 25%;
    }
}

.language-select {
  position: absolute;
  right: 0;
  top: 7px;
}
.language-select .switch {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 26px;
  cursor: pointer;
}
.switch-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.switch-label {
  position: relative;
  display: block;
  height: inherit;
  font-size: 10px;
  text-transform: uppercase;
  background: #fff;
  border: 1px solid #d9dada;
  box-sizing: border-box;
  border-radius: inherit;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  -webkit-transition-property: opacity background;
  -moz-transition-property: opacity background;
  -o-transition-property: opacity background;
  transition-property: opacity background;
}
.switch-label:before,
.switch-label:after {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  line-height: 1;
  -webkit-transition: inherit;
  -moz-transition: inherit;
  -o-transition: inherit;
  transition: inherit;
}
.switch-label:before,
.switch-label:after {
    font-weight: lighter;
    color: #a7a9ac;
    font-size: 12px;
}
.switch-label:before {
  content: attr(data-off);
  right: 7px;
}
.switch-label:after {
  content: attr(data-on);
  left: 12px;
}
.switch-input:checked ~ .switch-label {
  background: #fff;
  border: 1px solid #d9dada;
  box-sizing: border-box;
}
.switch-input:checked ~ .switch-label:before {
  opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
  opacity: 1;
}
.switch-handle {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 26px;
  background: #3c8ab1;
  border: 1px solid #3c8ab1;
  box-sizing: border-box;
  -webkit-transition: left 0.3s ease-out;
  -moz-transition: left 0.3s ease-out;
  -o-transition: left 0.3s ease-out;
  transition: left 0.3s ease-out;
}

.switch-handle:before,
.switch-handle:after {
    position: absolute;
    color: #fff;
    width: 100%;
    text-align: center;
    left: 0px;
    height: 26px;
    line-height: 25px;
    font-size: 12px;
    font-weight: bolder;
}
.switch-input:checked ~ .switch-handle:before {
     content: attr(data-on);
}
.switch-input ~ .switch-handle:before {
     content: attr(data-off);
}
.switch-input:checked ~ .switch-handle {
  left: 50px;
}