@charset 'utf-8';
/* 레이아웃 */
#main-content {max-width: 1760px; width:90%; margin: 0 auto; padding-top: 70px; display: flex; flex-wrap: nowrap;}
#content {width: 100%; max-width: 620px; margin-top: 85px;margin-bottom: 80px;overflow: hidden; margin-left: 160px;}

/* MAIN */
#content.main .content-title p{ font-size: 11px;color: #2D2D2D;position: relative;font-family: verdana, sans-serif;margin-bottom: 25px; letter-spacing: 1px; margin-top: -5px;}
#content.main .content-title p::before {content: '';position: absolute;width: 68px;height: 2px;background-color: #CFCFCF;top: -5px;}
#content .content-wrap .title-wrap strong {font-size: 12px;font-weight: 100;letter-spacing: -0.5px;
margin-bottom: 10px;display: inline-block;}



/* ABOUT  */
.table.about-table{max-width: 380px;}
.table.about-table .row .cell{padding: 11px;}
.table.about-table .row .col1{width: 105px;}

#content .content-title{margin-top: 10px;}
#content .content-title h2{ font-size: 12px;color: #2D2D2D;position: relative;margin-bottom: 20px;}
#content .content-title h2::before {content: '';position: absolute;width: 68px;height: 2px;background-color: #CFCFCF;top: -10px;}
#content .content-title p{font-size: 11px;font-weight: 100;line-height: 20px; letter-spacing: -0.3px;}
#content .content-title p a{font-size: inherit; font-weight: inherit; ;font-family: verdana, sans-serif; letter-spacing: 1px;}
#content .content-box {width: 100%;margin-top: 40px;display: flex;flex-wrap: wrap;justify-content: space-between;;}
.content-wrap {width: 100%;}

.about .content-title {margin-bottom: 80px; margin-top: 10px;}
#content .content-box .content-wrap .title{margin-bottom: 10px;}
#content .content-box .content-wrap .title strong{font-size: 11px; font-weight:100;letter-spacing: -0.5px;}



/* 페이징 */
.page_wrap {font-size:0; padding-top: 60px;}
.page_nation {display: inline-block; width:100%; }
.page_nation .none {display:none;}
.page_nation a {display:block; margin: 3px 6px; float:left; text-align:center; font-family: verdana, sans-serif; font-size:12px; color:#A1A1A1;  text-transform: uppercase;}
.page_nation a:hover{ color: #42454c; transition: 0.5s;}
.page_nation .prev {position: relative;}
.page_nation .prev::before {content: ''; position: absolute; top: 5px; border-style: solid; border-width: 1.4px 0 0 1.4px; display: inline-block; height: 6px; transform: rotate(-45deg); vertical-align: middle; width: 6px;  color: black; opacity: .8;}
.page_nation .next {position: relative;}
.page_nation .next a::before {content: '';  position: absolute; top: 5px; border-style: solid; border-width: 1.4px 0 0 1.4px; display: inline-block; height: 6px; vertical-align: middle; width: 6px; transform: rotate(135deg); color: black; opacity: .8;}
.page_nation a.active {color: #42454c;}




/* BOOKS list 페이지 */
#content.books .content-box {justify-content:left;}
#content.books .content-title h2 {font-size: 12px;color: #2D2D2D;position: relative;margin-bottom: 9px;}
#content.books .content-box .content-wrap .title-wrap{margin-bottom: 25px;}

#content .content-wrap .title-wrap p {font-size: 11px;line-height: 19px;letter-spacing: -0.3px}
#content .content-wrap .image-wrap {/*max-width:183px;*/margin-bottom: 7px;}
#content .content-wrap .all-list{max-width: 183px;}
#content .content-wrap .image-wrap a img{width: 100%;}

.books .content-box {margin:0 -17px;}
.books .content-box .content-wrap {width: 33.333%;padding:0 17px;}
.books .content-box .content-wrap .title-wrap p{margin-bottom: -2px;}

/* BOOKS view 페이지 */
#content .content-box .content-wrap .books-detail {display: flex;flex-wrap: nowrap;width: 100%; overflow: hidden; }
.books-detail-image{width: 50%;}
.books-detail-image img{width: 100%;}
.books-detail-title {width: 50%;margin: 0 0 0 30px;box-sizing: border-box;position: relative;
border-bottom: 1px solid #d9d9d9;}

.books-detail-title h3 {font-size: 13px;letter-spacing: -1.2px;position: relative;}
.books-detail-title h3:first-child {margin: 0px 0 25px 0;display: inline-block;}
.books-detail-title h3:first-child::before {content: '';position: absolute;top: -3px;left: -5px;border-style: solid;border-width: 1px 0 0 1px;width: 8px;height: 8px;color: #707070;}
.books-detail-title h3:first-child::after {content: '';position: absolute;bottom: -3px;right: -5px;border-style: solid;border-width: 1px 0 0 1px;width: 8px;height: 8px;color: #707070; transform: rotate(180deg);}
.books-detail-title ul li {font-size: 11px;display: block;padding: 4px 0;position: relative;margin-left: 6px;letter-spacing: -0.1px;}
.books-detail-title ul li::before {content: '';position: absolute;width: 2px;height: 2px;border-radius: 100%;background-color: #707070;top: 8px;left: -7px;}
.books-detail-title .books-buy {margin: 20px 0;}
.books-detail-title .books-buy p {font-size: 13px;letter-spacing: -1.2px;position: relative;margin-bottom: 5px;}
.books-detail-title .books-buy a {font-size: 11px;padding: 4px 7px 0 0;}
.books-detail-title a{font-size: 13px;letter-spacing: -1.2px;}

#content .content-box .content-wrap .title-wrap .text {border-bottom: 1px solid #D9D9D9;padding: 25px 0px;}
#content .content-box .content-wrap .title-wrap .text:last-child{margin-bottom: 25px;}
#content .content-box .content-wrap .title-wrap .text .text_box {background-color: #EFEFEF;
max-width: 490px;text-align: center;padding: 15px;box-sizing: border-box;margin: 15px auto 0;
width: 100%;}



/* 뷰페이지 */
.board-view dl:first-child{background-color: #FAFAFA;}
.board-view dl{border-top: 1px solid #D9D9D9; border-left: 1px solid #D9D9D9; border-right: 1px solid #D9D9D9;}
.board-view dt {width:65px; padding: 13px; float:left;font-size: 11px;color: #757575;}
.board-view dd {padding-left:100px; padding: 13px; font-size: 11px; line-height: 1.5;}
.board dt {width:100px; padding: 13px; float:left; font-size: 11px;color: #757575;}
dd.comment{ display: inline-block;}
dd.comment:nth-child(2){padding: 13px 7px;    float: right;}
dd.comment:nth-child(3){padding: 13px 7px;     float: right;}
dd.comment a{font-size: 11px;line-height: 1.5;}
dd.comment a:hover{color: #000;}
.board-write-info dl {background-color: transparent!important;}

/* contact 리스트 */
#content .content-box .content-wrap .button{float: right;margin-bottom: 20px;}
#content .content-box .content-wrap .button a {width: 66px;height: 23px; display: inline-block; background-color: #BFBFBF; font-size: 11px; color: white; text-align: center; line-height: 25px;}

.table{display: table; width: 100%; margin-bottom: 30px;  border-top: 1px solid #D9D9D9;}
.table .row{display:table-row; border-bottom: 1px solid #D9D9D9;}
.table .cell{display:table-cell; position: relative; font-size: 11px; padding: 13px 14px; border-bottom: 1px solid #D9D9D9;}
.table .cell a{display:table-cell; font-size: 11px; line-height: 1.5;}
.col1{width: 100px; color: #757575; transition: 0.5s;}
.col3{width: 100px; text-align: end;}
.secret {display: table-cell; position: absolute; top: 13.5px; left: 3px; font-weight: bold; font-size: 12px;}
.comment{padding-left: 6px;}
/* contact 뷰 */
.view-box{width: 100%; margin-bottom: 80px;}
.view-box:nth-child(3){margin-bottom: 70px;}
/* .view-box:last-child {margin-top: 120px;} */
.view-box .view-box-text {padding: 20px;margin-bottom: 10px;border: 1px solid #D9D9D9;}
.view-box .view-box-text strong{font-size: 11px;font-weight: 100; margin-bottom: 10px;display: inline-block;}
.view-box .view-box-text span {font-size: 11px;font-weight: 100;float: right;color: #757575;}
.view-box .view-box-text p {/*padding-bottom: 10px;*/font-size: 11px;line-height: 20px;}
.view-box .view-box-text .view-contents span,
.view-box .view-box-text .view-contents p,
.view-box .view-box-text .view-contents strong,
.view-box .view-box-text .view-contents b {color: #000000 !important; font-size: 11px !important; line-height: 20px !important; background-color: transparent !important; font-family: inherit !important; margin-bottom: 15px;}
.view-box .view-box-text textarea {width: 100%;background: none;resize: none;font-size: 11px;height: 50px;}
textarea::placeholder {color: #8A8A8A;}

/* write */
.board-write {margin-bottom: 20px; display: flex;flex-wrap: wrap; justify-content: space-between;}
.board-write dl {width: 100%;margin-bottom: 10px;border: 1px solid #D9D9D9;}
.board-write dl:nth-child(1) {width: 69%;}
.board-write dl:nth-child(2) {width:30%;}
.board-write dt {width:68px;padding: 13px;float:left;font-size: 11px;color:black;}
.board-write dd {padding-left:100px;padding: 13px; font-size: 11px;}
.board-write  .board-contents {width: 650px;height: 250px;border: 1px solid #D9D9D9;}
input[type="text"] {font-size: 11px;width: 75%;}
input[type="password"] {font-size: 11px;width: 59%;}
.board-write  .board-contents textarea {width: 100%;background: none;resize: none;font-size: 11px;padding: 20px;}
input[type="submit"] {width: 66px;height: 20px;display: block;background-color: #BFBFBF; font-size: 11px;color: white;text-align: center;line-height: 20px;float: right;cursor: pointer;}
.agree {
    margin-bottom: 15px;
    display: block;
    width: 100%;
}
.agree input[type="checkbox"] {
    width: 13px;
    height: 13px;
    border:1px solid #a9a9a9;
    cursor: pointer;
    border-radius: 0;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    float: right;
}
.agree input[type="checkbox"]:checked {
    background-color: #5F9EA0;
}


.agree label{    
    font-size: 11px;
    color: black;
    float: right;
    margin-left: 4px;
}

/* 팝업창 */
#lay_pop{position:absolute;z-index:500; width: 100%; max-width: 360px; padding: 20px; overflow-y:scroll;display:none;background-color:#ffffff;border:2px solid #cccccc; text-align: center; }
#all_body{position:fixed;z-index:9;display:block;filter:alpha(opacity=50);opacity:0.5;-moz-opacity:0.5;background-color:#000000;left:0;top:0;display:flex;height:100% !important}
#lay_pop p{font-size: 11px;font-weight: 100;line-height: 20px;letter-spacing: -0.3px;
text-align: center;margin-bottom: 15px;}
#lay_pop dl{width: 100%;margin-bottom: 10px;border: 1px solid #D9D9D9}
#lay_pop dt {width:68px;padding: 13px;float:left;font-size: 11px;color:black;}
#lay_pop dd {padding-left:100px;padding: 13px; font-size: 11px;}
#lay_pop dd input[type="password"] {font-size: 11px;width: 59%;}
#lay_pop a{font-size: 11px;display: block;width: 66px;height: 23px;display: inline-block;background-color: #BFBFBF;font-size: 11px;color: white;text-align: center;line-height: 25px;margin-top: 10px;}
#lay_pop a{cursor:pointer;}
#lay_pop .x {
    position: relative;
    width: 20px;
    height: 15px;
    float: right;
}
#lay_pop .x span {
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #000;
    display: inline-block;
    left: 0;
    right: 0;
    top: 0;
}
#lay_pop .x span:first-child{
transform: translateY(9px) translateX(0) rotate(45deg);
}
#lay_pop .x span:last-child{
transform: translateY(9px) translateX(0) rotate(-45deg);
}


/* 레이아웃 미디어 쿼리 */
@media all and (max-width:768px) {
    #content .content-box .content-wrap .books-detail {width: 100%; max-width: 370px; flex-direction: column;}
    .books-detail-image {width: 100%;}
    .books-detail-title {width: 100%;padding: 0px 20px 30px 20px;margin: 0;}
    .books-detail-title h3:first-child {margin: 35px 0 20px 0;display: inline-block;}
    .books-detail-title .books-buy {margin: 20px 0;}
    .col1{width: 80px;}
    .board-write dl:nth-child(1) {width: 100%;}
    .board-write dl:nth-child(2) {width: 100%;}
}
@media all and (max-width:640px) {
    #navi{display: none;}
    .sns{display: none;}
    #main-content {padding-top: 65px;flex-direction: column;}   
    #content {margin-top: 65px; margin-left: 0;}
    .col1{width: 50px;}

}    
@media all and (max-width:500px) {
    #content .content-box .content-wrap .books-detail {margin: 0 auto;}
    .books .content-box .content-wrap {width: 48%;}  
}