@font-face {
    font-family: 'RIDIBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* custom */

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

input, textarea {
  -webkit-touch-callout: auto;
  -webkit-user-select: auto;
  -khtml-user-select: auto;
  user-select: auto;
}
a:focus, button:focus{outline:none}
:root {
  --f7-font-family:RIDIBatang,Helvetica,Arial,sans-serif;
  --primary-color:#282828;
  --secondary-color:#EDEEF0;
}
.ios {
 --f7-page-bg-color:#fff;
}
/*.view.router-transition-custom .toolbar-bottom{display:none}*/
.page{z-index:auto}
.page.user{overflow-y:scroll;z-index:10}
.page.join{z-index:10}
.page-previous{z-index:-1 !important}
.page-content{z-index:auto}
.page-content.main-content{overflow:hidden;padding:0}
.page-content.sub-content{padding:120px 0 0}
.page-content.sub-content > .block{padding-bottom:89px}
.page-content.view-content{background-color:#fff;z-index:10;padding-top:70px;overflow:hidden}
.page-content.view-add-content{background-color:#fff;z-index:10;padding-top:110px}
.page-content.user-content{background-color:#fff;z-index:10;height:auto}
.page-content.user-content .ng06{position:fixed;bottom:100px;left:50px}
.page-content.user-content .ng06_01{position:static}
.page.login .marginBox{height:110px}
.page.join .marginBox{height:110px}
.login-screen-content{z-index:10;padding-top:6%}
ul{list-style-type:none;padding-left:0}
body{color:color:var(--primary-color)}
.block{padding:0 25px}
.my_post_show_wrapper{height:100%;overflow-y:scroll;position:relative;margin:0 !important;padding-top:35px}
.my_post_show_wrapper:after{content:"";display:block;width:100%;height:120px;background:#fff;position:fixed;bottom:0;left:0}
/* buttons */
.btn01{position:fixed;bottom:80px}
.btn01 > a{font-size:24px}
.btn02{display:block;width:78px;height:78px;border-radius:39px;border:2px solid var(--secondary-color);box-sizing:border-box;text-align:center;font-size:14px;position:relative}
.btn02 > span{display:block;width:60px;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
.btn02.active-state{background-color:var(--secondary-color)}
button.btn02{background-color:#fff;color:#C4C4C4;font-size:18px}
.btn03{display:block;width:78px;height:78px;border-radius:39px;border:none;color:var(--primary-color);background-color:var(--secondary-color);box-sizing:border-box;text-align:center;font-size:14px;position:relative}
.btn03 > span{display:block;width:60px;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
/*.btn03.active-state{background-color:var(--primary-color);color:#fff}*/
.btn03.wrote{background-color:var(--primary-color);color:#fff}
.btn03.added{position:relative}
.btn03.added:before{content:"";display:block;width:100%;height:100%;background-image:url(../images/bg_tag.png);background-repeat:no-repeat;background-position:center center;background-size:75%;position:absolute;top:0;left:0}
/*.btn03.wrote.added:before{opacity:0.3}*/
.btn03.added:before{opacity:0.6}
.btn03.book.added:before{opacity:0.4}
.btn03.wrote.added:before{opacity:0.4}
.btn03.red{background-color:#EA7057;color:var(--primary-color) !important}
.btn03.yellow{background-color:#F8B720;color:var(--primary-color) !important}
.btn03.blue{background-color:#4686C7;color:var(--primary-color) !important}
.btn03.green{background-color:#35AC74;color:var(--primary-color) !important}
.btn03.pink{background-color:#F19DBE;color:var(--primary-color) !important}
.btn04{display:inline-block;width:auto;background-color:var(--primary-color);border-radius:22.5px;color:#fff;border:none;font-family:inherit;font-size:14px;text-align:center;padding:11px 40px}
.btn04.active-state{background-color:#999}
.btn05{display:inline-block;width:auto;background-color:#fff;color:var(--primary-color);border-radius:22.5px;border:2px solid var(--primary-color);none;font-family:inherit;font-size:14px;text-align:center;padding:5px 40px;box-sizing:border-box}
.btn05.active-state{background-color:#999}

/* add keyword form */
.cf01{position:fixed;bottom:25px;left:0;width:100%;padding:0 35px;z-index:1100}
.cf01 input{padding:10px 0;display:inline;width:75%}
.cf01 button{position:fixed;bottom:25px;right:30px;width:38px;height:38px;border:none;background:url(../images/btn_check_new.png) no-repeat center center;background-size:19px 17px;text-indent:-9999px}
.cf01 button.active-state{background-color:#999}
form#add-book-name{bottom:initial;top:50%;margin-top:-165px;left:50%;margin-left:-127px;width:180px}
form#add-book-name input{width:100%;height:30px;padding:0;background-color:#fff;font-size:24px}
form#add-book-name button{display:none}
form#add-new-keyword{position:absolute;bottom:300px;left:50%;transform:translate(-50%, 0);width:78px;height:78px}
form#add-new-keyword input{width:68px;height:30px;padding:0;text-align:center;margin-top:24px;margin-left:5px}
form#add-new-keyword button{display:none}
form#add-writing-name{position:absolute;bottom:initial;top:120px;left:50%;transform:translate(-50%, 0);width:78px;height:78px}
form#add-writing-name input{width:68px;height:30px;padding:0;text-align:center;margin-top:24px;margin-left:5px}
form#add-writing-name button{display:none;position:absolute;bottom:-40px;left:50%;transform:translate(-50%, 0)}
/*
.cf01#add-book-name:after{content:"";display:block;background-color:rgba(0,0,0,0.3);position:fixed;top:0;left:0;right:0;bottom:80px}
*/
/* my record form */
.cf02 {padding:0 20px 120px;overflow-y:scroll}
.cf02 .header{text-align:center;margin-bottom:40px}
/*.cf02 .header dt{display:inline-block;width:78px;height:78px;border-radius:39px;background-color:var(--primary-color);color:#fff;text-align:center;font-size:14px;position:relative;margin-bottom:50px}*/
.cf02 .header dt{display:inline-block;margin-bottom:30px}
.cf02 .header dt > span{display:block;width:60px;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
.cf02 .header dd{text-align:center;margin-left:0;color:#B7B7B7}
.cf02 .textArea{margin-bottom:20px}
.cf02 .textArea textarea{font-size:14px;line-height:1.7;width:100%;overflow:hidden;}
.cf02 .picArea{margin-bottom:20px}
.cf02 .picArea img{max-width:100%}
.cf02 .picArea input{width:0;height:0;position:absolute;visibility:hidden}
.cf02 .drawArea{margin-bottom:20px}
.cf02 .drawArea img{max-width:100%;border:1px solid #ddd}
.cf02 .bookArea{position:fixed;bottom:140px;font-size:14px;text-decoration:underline}
.cf02 .bookArea span:before{content:"#"}
.cf02 .linkArea a{display:block;border:1px solid #ddd;overflow:hidden}
.cf02 .linkArea .thumb{display:block;width:98px;height:68px;overflow:hidden;float:left;margin-right:15px}
.cf02 .linkArea .thumb img{width:100%;display:block}
.cf02 .linkArea .meta{display:block;padding:10px 10px 0}
.cf02 .linkArea .meta b{color:#000;font-weight:400;font-size:11px;height:30px;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.cf02 .linkArea .meta em{color:#C4C4C4;font-style:normal;font-size:10px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}

.cf02 .btnA button{position:fixed;bottom:66px;right:35px;width:40px;height:40px;border:none;background:#eee url(../images/btn_check_new.png) no-repeat center center;background-size:21.5px 19.5px;text-indent:-9999px;z-index:10000}
.cf02 .btnA button{visibility:hidden}
/*.cf02.viewer .textArea{margin-bottom:0;display:block;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}*/
.cf02.viewer .textArea{margin-bottom:0;overflow-y:scroll;overflow-x:hidden;height:160px}
.device-android .cf02.inputMode{position:relative;top:-100px}

/* add keyword to book form */
.cf03 button{position:fixed;bottom:70px;left:50%;transform:translate(-50%, 0);z-index:10}


/* fab */
.fab a{width:40px;height:40px;border-radius:20px;box-sizing:border-box;background-color:#fff;border:none;box-shadow:none}
.fab a.active-state{background-color:var(--secondary-color)}
.fab.fab-left-bottom{left:35px}
.fab.fab-right-bottom{right:100px}
.fab03.fab-right-bottom{right:35px}

.fab01 a{background:#fff url(../images/icon_minus.png) no-repeat center center;background-size:20px 20px;text-indent:-9999px}

.fab02{right:calc(var(--f7-fab-margin) + var(--f7-safe-area-right) + 70px);}
.fab02 > a .plus{display:block;width:35px;height:35px;background:url(../images/icon_plus02.png) no-repeat center center;background-size:cover}
.fab02 > a .close{display:block;width:24px;height:24px;background:url(../images/icon_minus.png) no-repeat center center;background-size:cover}
.fab02 a.picture{background:#fff url(../images/icon_camera.png) no-repeat center center;background-size:20px 20px;text-indent:-9999px}
.fab02 a.edit{background:#fff url(../images/icon_edit.png) no-repeat center center;background-size:20px 20px;text-indent:-9999px}
.fab02 a.link{background:#fff url(../images/icon_link.png) no-repeat center center;background-size:20px 20px;text-indent:-9999px}

.fab03 a{width:40px;height:40px;border:none;background:url(../images/btn_check_new.png) no-repeat center center;background-size:21.5px 19.5px;text-indent:-9999px;text-indent:-9999px}

/* navbar */
.main-navbar .navbar-inner{padding:0 25px;height:60px;position:relative}
.main-navbar .left .user{width:20px;height:21px;background:url(../images/icon_user.png) no-repeat center center;background-size:cover;text-indent:-9999px}
.main-navbar .left .user.adding{position:relative}
.main-navbar .left .user.adding:after{position:absolute;content:"";right:-10px;bottom:-5px;display:block;width:17px;height:17px;background:url(../images/icon_heart.png) no-repeat center center;background-size:cover}
.main-navbar .left .user.adding.dislike:after{transform: rotate(180deg)}
.main-navbar .title .logo{display:inline-block;width:27px;height:25px;background:url(../images/logo.png) no-repeat center center;background-size:cover;text-indent:-9999px}
.main-navbar .right a{display:inline-block;text-indent:-9999px}
.main-navbar .right a.cCar{background:url(../images/icon_card.png) no-repeat center center;width:21px;height:21px;background-size:cover;position:relative}
.main-navbar .right a.cList{background:url(../images/icon_list.png) no-repeat center center;width:21px;height:21px;background-size:cover}
.main-navbar .horMode .right a.cCar{display:none}
.main-navbar .horMode .right a.cList{display:block}
.main-navbar .verMode .right a.cCar{display:block}
.main-navbar .verMode .right a.cList{display:none}
.main-navbar .verMode{}
.main-navbar .verMode:before{content:"";display:block;width:94%;height:100%;position:absolute;left:3%;bottom:0;box-shadow:0px 2px 10px rgba(0, 0, 0, 0.14);background-color:#fff}
.main-navbar .verMode:after{content:"";display:block;width:100%;height:100%;position:absolute;left:0;bottom:0;background-color:#fff}
.main-navbar .verMode .left{visibility:hidden}
.main-navbar .verMode .title{visibility:hidden}
.main-navbar .navbar-bg{background-color:transparent;backdrop-filter:none}
.main-navbar .navbar-bg:after{content:none}
.navbar-hidden-statusbar{display:none}
.page.reset .navbar{margin-bottom:66px;position:relative}
/*android option*/
html.device-android .main-navbar .navbar-inner{padding-top:35px}
html.device-android .main-navbar .navbar-inner.verMode{padding-bottom:25px;height:75px}
html.device-android .main-navbar .navbar-inner.verMode .right a.cCar{margin-top:10px}
html.device-android .tc01 .card-close{top:40px}
html.device-android .view-navbar{top:35px}
html.device-android .user-navbar{padding:45px 25px 0}
/*
.sub-navbar{position:fixed}
.sub-navbar .title-large{height:60px}
.sub-navbar .title{top:15px}
.sub-navbar .title-large-text{padding:6px 25px}
.sub-navbar .title-large-text strong{display:block;font-size:24px;line-height:2;font-weight:normal}
.sub-navbar .title-large-text em{display:none;font-size:14px;font-style:normal;font-weight:normal}
.sub-navbar .navbar-bg{height:120px;background-color:#fff;box-shadow:0px 2px 10px rgba(0, 0, 0, 0.14);width:94%;left:3%}
.sub-navbar .navbar-bg:after{content:none}
.sub-navbar:after{content:"";display:block;background-color:#fff;width:100%;height:120px;top:0;left:0;position:absolute}
.sub-navbar.navbar-large-collapsed .title-large-text{display:none}
.sub-navbar.navbar-large-collapsed .navbar-bg{height:110px;box-shadow:none;border-bottom:1px solid #b7b7b7;width:100%;left:0}
.sub-navbar.navbar-large-collapsed .navbar-inner.sliding .title{left:50% !important;transform:translate(-50%, 0);font-weight:normal}
.sub-navbar.navbar-large-collapsed:after{height:48px}
*/
.sub-navbar{background-color:#fff;height:60px}
.sub-navbar .title{font-weight:normal;top:5px;left:50%!important;transform:translate(-50%, 0)}
.sub-navbar .title-large-text{padding:6px 25px}
.sub-navbar .title-large-text strong{font-size:24px;line-height:2;font-weight:normal}
.sub-navbar .title-large-text em{display:none}
.sub-navbar .navbar-bg{}
.sub-navbar .navbar-bg:before{box-shadow:0px 2px 10px rgba(0, 0, 0, 0.14);width:94%;left:3%;height:10px;top:initial;bottom:0px}
.sub-navbar .navbar-bg:after{background-color:#fff;width:100%;height:100%;left:0;right:0;top:0;bottom:0;display:block;transform:none}
.sub-navbar.navbar-large-collapsed .navbar-bg:before{box-shadow:none;width:100%;left:0;height:0px;top:initial;bottom:-1px;border-bottom:1px solid #b7b7b7}

.view-navbar{top:20px}
.view-navbar .right{right:22px!important}
.view-navbar .right a{display:block;width:40px;height:40px;background:url(../images/btn_close.png) no-repeat center center;background-size:20px 20px;text-indent:-9999px}

.book-navbar{position:fixed}
.book-navbar:after{content:"";display:block;width:100%;height:10px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);position:absolute;bottom:-10px;left:0;z-index:10}
.book-navbar{height:146px;/*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3)*/;background-color:#EDEEF0;overflow:hidden}
.book-navbar .navbar-inner{padding:0}
.book-navbar .right{right:40px !important;z-index:100}
.book-navbar .right a{display:block;width:40px;height:40px;background:url(../images/btn_close.png) no-repeat center center;background-size:20px 20px;text-indent:-9999px;position:relative;top:40px}
.book-navbar .navbar-bg{background-color:transparent}
.book-navbar .title{padding:25px 30px;width:calc(100% - 60px);box-sizing:border-box;left:30px !important;bottom:-40px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);border-radius: 4px;text-align:left;background-color:#fff}

.user-navbar{height:80px;padding:30px 25px 0}
.user-navbar .goBack{color:var(--primary-color)}
.user-navbar .title{text-align:center;font-size:24px}

.user-sub-navbar{height:80px;padding:80px 0 0;margin:0 25px;position:relative}
.user-sub-navbar .goBack{position:absolute;right:0;top:35px;display:block;width:40px;height:40px;background:url(../images/btn_close.png) no-repeat center center;background-size:20px 20px;text-indent:-9999px}
.user-sub-navbar .title{text-align:center;font-size:18px}
.user-sub-navbar01{border-bottom:1px solid #B7B7B7;padding-bottom:10px;margin-bottom:10px}
.user-sub-navbar01 .title dt{margin-bottom:10px}
.user-sub-navbar01 .title dd{font-size:12px;margin-left:0}

.navbar-previous{display:none}
/* bottom toolbar */
.toolbar-bottom .tab-link i{font-size:28px;line-height:1.5}

/* swiper horizontal */
.ib01.swiper-container-horizontal {
  width:289px;
  height:433px;
  overflow:visible;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%)
}
.ib01.swiper-container-horizontal .swiper-slide {
  height: 100%;
  transition:height 0.5s, width 0.5s !important;
}
.ib01.swiper-container-horizontal .swiper-slide.remove{
  width:0px;
}
.ib01.swiper-container-horizontal .swiper-slide.adding{
  opacity:0.4
}
.ib01.swiper-container-horizontal .tc01{height:100%;position:relative}
.ib01.swiper-container-horizontal .tc01.movedown:before{content:"싫어요";color:#fff;position:absolute;left:50%;top:-70px;transform:translate(-50%, 0);padding-top:36px;background:url(../images/icon_like01.png) no-repeat center top;background-size:32px 32px;font-size:16px}
.ib01.swiper-container-horizontal .tc01.moveup:after{content:"좋아요";color:#fff;position:absolute;left:50%;bottom:-100px;transform:translate(-50%, 0);padding-top:36px;background:url(../images/icon_like02.png) no-repeat center top;background-size:32px 32px;font-size:16px}

.ib01.swiper-container-horizontal .tc01 .card{height:100%;margin:0;border-radius:152.5px 152.5px 5px 5px;box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);transition-property:transform}

.ib01.swiper-container-horizontal .tc01 .card-content{width:100%;height:100%}
.ib01.swiper-container-horizontal .tc01 .card-header-bg{height:100%}
.ib01.swiper-container-horizontal .tc01 .card-header-bg .card-header{height:100%}
.ib01.swiper-container-horizontal .tc01 .card-content-padding{display:none}
.ib01.swiper-container-horizontal .tc01 .title em{position:absolute;top:50px;left:50%;transform:translate(-50%, 0)}
.ib01.swiper-container-horizontal .tc01 .title h2{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center}

/* 펼치는 중 */
.ib01.swiper-container-horizontal .tc01 .card-opening{height:100%;border-radius:0 !important;position:relative;background-color:#fff !important;z-index:10000}
.ib01.swiper-container-horizontal .tc01 .card-opening .card-header-bg{height:auto !important;padding-top:100px}
.ib01.swiper-container-horizontal .tc01 .card-opening .card-header-bg .card-header{height:auto !important}

.ib01.swiper-container-horizontal .tc01 .card-opening .card-header-bg .card-header{
  text-align:center;
  position:static;
  transform: translate(0,0);
  width:100%;
  padding:0;
  opacity:1;
}
.ib01.swiper-container-horizontal .tc01 .card-opening .card-header-bg .card-header .title{display:block;padding:0 25px;box-sizing:border-box}
.ib01.swiper-container-horizontal .tc01 .card-opening .card-header-bg .card-header .title em{display:block;position:static;transform:translate(0, 0);width:auto;visibility:hidden}
.ib01.swiper-container-horizontal .tc01 .card-opening .card-header-bg .card-header .title h2{display:block;position:static;transform:translate(0,0);width:auto;text-align:center}
.ib01.swiper-container-horizontal .tc01 .card-opening .card-content-padding{display:block !important}

/*닫는중*/
.ib01.swiper-container-horizontal .tc01 .card-closing .card-content{opacity:0}


/* swiper vertical */
.ib01.swiper-container-vertical {
  position:absolute;
  width:calc(100% - 50px);
  left:0;
  top:50%;
  transform:translate(0, -50%);
  transition:height 0.5s;
  overflow:visible;
  height:75px;
  margin:0 25px;
  box-sizing:border-box;
  border-top:1px solid #B7B7B7;
  border-bottom:1px solid #B7B7B7;
}
.ib01.swiper-container-vertical .swiper-slide {

}

.ib01.swiper-container-vertical .tc01 .card{height:75px;margin:0;border-radius:0;box-shadow:none;background-color:transparent}
.ib01.swiper-container-vertical .tc01 .card-expandable .card-content{height:100%;width:100%}
.ib01.swiper-container-vertical .tc01{
  position:relative;
  transform: translate(0px, 0)!important;
}
.ib01.swiper-container-vertical .tc01 .card-header{
  text-align:left;
  position:absolute;
  left:0;
  top:50%;
  transform: translate(0px,-50%);
  width:100%;
  padding:0;
  box-sizing:border-box;
  color:var(--primary-color);
  opacity:0.6;
  min-height:0;
}
.ib01.swiper-container-vertical .tc01 .card-header .title{
   display:table;
  width:100%;
}
.ib01.swiper-container-vertical .tc01 .card-header h2{
  text-align:left;
  display:table-cell;
  font-size:14px;
  width:70%;
  margin:0;
}
.ib01.swiper-container-vertical .tc01 .card-header em{
  font-size:14px;
  display:table-cell;
  width:30%;
  vertical-align:middle;
}
.ib01.swiper-container-vertical .swiper-slide-active{
  z-index:100 !important;
}
.ib01.swiper-container-vertical .tc01 .card-content-padding{display:none}

.ib01.swiper-container-vertical .swiper-slide-active .tc01 .card-header{
  opacity:1;
}
.ib01.swiper-container-vertical .swiper-slide-active .tc01 .card-header *{
  font-size:18px;
}
/* 펼치는 중 */
.ib01.swiper-container-vertical .tc01 .card-opening .card-close{display:none}
/*닫는중*/
.ib01.swiper-container-vertical .tc01 .card-closing .card-close{display:none}


.ib01 .swiper-slide .swiper-slide-shadow-left{display:none}
.ib01 .swiper-slide .swiper-slide-shadow-right{display:none}

/* book swiper */
.ib02{overflow:visible;position:absolute;top:50%;left:0;transform:translate(0,-50%);margin-top:0px;width:100%;height:434px}
.ib02 .swiper-slide{box-sizing:border-box;overflow:visible}
.ib02 .tc02{padding:50px 35px;margin:0;width:303px;height:434px;box-sizing:border-box;margin:0 auto}
.ib02 .tc02 > dt{margin-bottom:30px;width:80%;word-break:keep-all}
.ib02 .tc02 > dt a{font-size:24px;color:var(--primary-color)}
.ib02 .tc02 > dt a:before{content:"#";margin-right:10px}
.ib02 .tc02 > dd{margin-left:0}
.ib02 .cf02{padding-bottom:30px}
.ib02 .cf02 .header{margin-top:0}
.ib02 .swiper-pagination{position:fixed;bottom:-78px;width:60px;left:initial;right:72px}
.ib02 .swiper-button-next{position:fixed;bottom:-90px;top:initial;right:35px}
.ib02 .swiper-button-next::after{font-size:18px;color:var(--primary-color);font-weight:bold}
.ib02 .swiper-button-prev{position:fixed;bottom:-90px;top:initial;left:initial;right:140px}
.ib02 .swiper-button-prev::after{font-size:18px;color:var(--primary-color);font-weight:bold}
.ib02 .editBook{position:fixed;bottom:-88px;left:35px;z-index:10}
.ib02 .editBook a{display:inline-block;width:40px;height:40px;box-sizing:border-box;background-color:#fff;border:none}
.ib02 .editBook a.add{background:url(../images/icon_plus02.png) no-repeat center center;background-size:35px 35px;text-indent:-9999px;margin-right:15px}
.ib02 .editBook a.subtract{background:url(../images/icon_minus.png) no-repeat center center;background-size:24px 24px;text-indent:-9999px;margin-right:15px}
.ib02 .editBook a.edit{background:url(../images/icon_edit.png) no-repeat center center;background-size:20px 20px;text-indent:-9999px}

/* 질문 뷰 화면 */
.tc01.draggable{
  touch-action: none;
  user-select: none;
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}
.tc01 .card-header{color:var(--primary-color);margin-bottom:50px}
.tc01 .card-header .title em{font-size:16px;font-style:normal;color:var(--primary-color);display:block;text-align:center}
.tc01 .card-header .title h2{text-align:center;word-break:keep-all;font-size:18px;font-weight:normal;line-height:1.5;margin:20px 0;color:var(--primary-color)}
.tc01 form button.confirm{position:fixed;bottom:90px;left:50%;transform:translate(-50%,0)}
.tc01 .card-close{position:absolute;right:25px;top:25px;width:40px;height:40px;background:url(../images/btn_close.png) no-repeat center center;background-size:20px 20px;text-indent:-9999px}

/* 펼침 */
.tc01 .card-opened{height:100%;border-radius:0 !important;position:relative;background-color:#fff !important;z-index:10000}
.tc01 .card-opened .card-header-bg{height:auto !important;padding-top:100px}
.tc01 .card-opened .card-header-bg .card-header{height:auto !important}

.tc01 .card-opened .card-header-bg .card-header{
  text-align:center;
  position:static;
  transform: translate(0,0);
  width:100%;
  padding:0;
  opacity:1;
}
.tc01 .card-opened .card-header-bg .card-header .title{display:block;padding:0 25px;box-sizing:border-box}
.tc01 .card-opened .card-header-bg .card-header .title em{display:block;position:static;transform:translate(0, 0);width:auto;visibility:hidden}
.tc01 .card-opened .card-header-bg .card-header .title h2{display:block;position:static;transform:translate(0,0);width:auto;text-align:center}

.tc01 .card-opened .card-content-padding{display:block !important}
.device-android .tc01 .card-opened .card-content-padding.inputMode{position:relative;top:-150px;background-color:#fff}

/* book title */
.tc02{
  background: #FFFFFF;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15), 2px 0px 8px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}
/* about */
.tc03{margin:0 50px;background:url(../images/con_about.png) no-repeat center top;background-size:156px 172px;padding-top:190px;text-align:center}
.tc03 .block{margin-top:0}
.tc03 p{word-break:keep-all;line-height:2;margin-bottom:50px}
.tc03 .btn05{width:130px;padding:5px 0;display:block;margin:50px auto 0}
/* contact */
.tc04{margin:0 50px;text-align:center;overflow:hidden}
.tc04 .block{margin-top:0}
.tc04 p{word-break:keep-all;line-height:2;margin-bottom:60px}
.tc04 ul li{margin-bottom:10px}
.tc04 ul dl{display:table;width:100%}
.tc04 ul dl dt{display:table-cell;width:40%;text-align:left;font-weight:bold}
.tc04 ul dl dd{display:table-cell;margin-left:0;text-decoration:underline}
.tc04 .btn05{position:fixed;width:130px;padding:11px 0;left:50%;bottom:70px;transform:translate(-50%, 0)}
.tc04 .btn05 +input{position:absolute;left:-9999px}

/* my keywords */
.lc01{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap:12px;
  width:290px;
  margin:0 auto
}
.lc01 li{text-align:center}
.lc01 li > a{display:inline-block}
.lc01 li.add a{display:inline-block;background:url(../images/icon_plus.png) no-repeat center center;background-size:11px 11px;text-indent:-9999px}
/* 나의책 리스트 */
.lc02{padding-bottom:140px}
.lc02 li{
  /*box-shadow: 1px 5px 6px rgba(0, 0, 0, 0.05);*/
  margin-top:30px;
  padding:0 25px;
  border-bottom:1px solid #B7B7B7;
  overflow:hidden;
  position:relative;
}
.lc02 li:after{
  content:"";
  display:block;
  width:100%;
  height:10px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  position:absolute;
  bottom:-10px;
  left:0;
}
.lc02 li a{
  display:inline-block;
  padding:20px 20px 30px;
  min-width:210px;
  box-sizing:border-box;
  box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25), 2px 0px 14px rgba(0, 0, 0, 0.32);
  border-radius: 4px;
  position:relative;
  top:14px;
}
.lc02 li.add a{
  padding:27px 25px 41px;
}
.lc02 li a strong{
  display:block;
  color:var(--primary-color);
  font-weight:normal;
}
.lc02 li a strong:before{content:"#";margin-right:5px}
.lc02 li.add a strong:before{content:none}
.lc02 li a span{
  color:#B7B7B7;
}
/* my book add keyword list */
.lc03{padding-bottom:80px;position:relative}
.lc03:after{content:"";display:block;width:100%;height:200px;
  background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 15%,
            rgba(255, 255, 255, 0.3) 35%,
            rgba(255, 255, 255, 0.95) 65%,
            rgba(255, 255, 255, 1) 100%
          );
  position:fixed;bottom:0;left:0
}
.lc03 li{border-bottom:1px solid #B7B7B7}
.lc03 li .item-inner{display:flex !important;padding:20px 0px}
.lc03 li .item-inner::after{content:none}
.lc03 li .item-inner .item-text{width:calc(100% - 100px);-webkit-line-clamp:3;max-height: calc(var(--f7-list-item-text-line-height) * 3);color:var(--primary-color);word-break:break-all}
.lc03 li .item-checkbox{padding-left:0}
.lc03 li .icon-checkbox{margin-right:0}
.lc03 li .btn03{width:70px;height:70px;border-radius:35px}
.lc03_01 li .swipeout-actions-right{z-index:100;right:-25px;}
.lc03_01 li .swipeout-actions-right .swipeout-delete{background-color:var(--primary-color)}
#book_add_form .lc03 li{opacity:0.4}
#book_add_form .lc03 li.checked{opacity:1}
#book_add_form .lc03 li .icon-checkbox{display:none}
#book_edit_form .lc03 li{overflow:visible}
#book_edit_form .lc03 li .item-inner{padding:20px 50px 20px 0 !important}
.lc03.sortable li.sorting{box-shadow: 0px 9px 11px -9px rgba(0,0,0,0.25),  0px -9px 11px -9px rgba(0,0,0,0.25);}

/* 나의 질문 리스트 */
.lc04{margin:0 20px}
.lc04:before{content:none !important}
.lc04:after{content:none !important}
.lc04 li{padding:10px 0}
.lc04 li span{display:table;width:100%}
.lc04 li a{color:var(--primary-color);text-align:left}
.lc04 li span em{display:table-cell;width:20%;font-style:normal}
.lc04 li span b{display:table-cell;width:80%;font-weight:normal}
.lc04 li .swipeout-delete{background-color:var(--primary-color);color:#fff}
.lc04 li .swipeout-actions-right{right: -1px;}
/*radios*/
.ng01{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap:15px;
  width:300px;
  margin:0 auto;
}
.ng01 li{text-align:center}
.ng01 li:last-child{grid-column:1 / 4}
.ng01 li input[type=radio]{visibility:hidden;position:absolute}
.ng01 li input[type=radio] + label{display:inline-block}
.ng01 li input[type=radio]:checked + label{background-color:var(--secondary-color);color:var(--primary-color)}
.ng01 li.add button{display:inline-block;background:url(../images/icon_plus.png) no-repeat center center;background-size:11px 11px;text-indent:-9999px}

/*wishlist nav*/
.ng02{margin-top:0;z-index:0;}
.ng02 ul{
  display:flex;
  justify-content:space-between;
  flex-wrap: wrap;
  z-index:0;
}
.ng02 li{width:30%}
.ng02 li a{display:block;width:60px;height:60px;border-radius:30px;text-indent:-9999px;background-size:100% auto}
.ng02 li a.empty{background-color:#ddd}
/*tab menu*/
.ng03{background-color:transparent}
.ng03 + .tabs-swipeable-wrap .page-content.tab{padding-top:30px}
/* user main */
.ng04{display:flex;justify-content:space-around;border-bottom:1px solid #B7B7B7;padding-bottom:20px;margin-bottom:50px}
.ng04 li{width:25%;text-align:center}
.ng04 li span{display:block;width:100%;padding-top:100px;font-size:16px}
.ng04 li.questions span{background:url(../images/menu_home1.png) no-repeat center center;background-size:22px 34px}
.ng04 li.books span{background:url(../images/menu_book0.png) no-repeat center center;background-size:24px 23px}
.ng04 li.writings span{background:url(../images/menu_tag0.png) no-repeat center center;background-size:27px 27px}

.ng05{display:table;width:100%}
.ng05 li{display:table-cell;width:50%;text-align:center;vertical-align:middle}
.ng05 li a{display:block;color:var(--primary-color);height:35px;line-height:35px;font-size:16px}
.ng05 li.likes a:before{content:"";display:inline-block;width:35px;height:35px;background:url(../images/icon_heart_off.png) no-repeat center center;background-size:31px 31px;vertical-align:middle;margin-right:15px}
.ng05 li.hates a:before{content:"";display:inline-block;width:35px;height:35px;background:url(../images/icon_heart_off.png) no-repeat center center;background-size:31px 31px;vertical-align:middle;margin-right:15px;transform: rotate(180deg);}

.ng06 li{line-height:2.6}
.ng06 li a{font-size:16px;color:var(--primary-color)}
.ng06_01 li{text-align:center}
/*user like tab menu*/
.ng07{background-color:transparent;margin-bottom:30px}
.ng07 .tab-link{flex-direction:initial;color:var(--primary-color)}
.ng07 .tab-link:before{content:"";display:inline-block;width:35px;height:35px;background:url(../images/icon_heart_off.png) no-repeat center center;background-size:cover;vertical-align:middle;margin-right:15px}
.ng07 .tab-link:last-of-type:before{background-image:url(../images/icon_heart_off.png);transform: rotate(180deg)}
.ng07 .tab-link.tab-link-active:before{background-image:url(../images/icon_heart.png)}

.ng07 + .tabs-swipeable-wrap .page-content.tab{padding-top:30px}

/*login*/
.login-screen{display:block;position:static;transform:none}
.login-screen .login-screen-content{margin-top:0 !important}

/* toolbar bottom */
.toolbar-bottom{background-color:#fff !important;height:89px;/*box-shadow: 0px -1px 30px rgba(0, 0, 0, 0.11)*/;z-index:10}
.toolbar-bottom.mainMode{box-shadow:none}
.toolbar-bottom:before{content:none}
.toolbar-bottom .book{background:url(../images/menu_book0.png) no-repeat center center;background-size:23px 22px;text-indent:-9999px}
.toolbar-bottom .book.tab-link-active{background-image:url(../images/menu_book.png)}
.toolbar-bottom .main{background:url(../images/menu_home0.png) no-repeat center center;background-size:19px 27px;text-indent:-9999px}
.toolbar-bottom .main.tab-link-active{background-image:url(../images/menu_home.png)}
.toolbar-bottom .writing{background:url(../images/menu_tag0.png) no-repeat center center;background-size:23px 23px;text-indent:-9999px}
.toolbar-bottom .writing.tab-link-active{background-image:url(../images/menu_tag.png)}
/*
.toolbar-bottom .tab-link-active{position:relative}
.toolbar-bottom .tab-link-active:after{content:"";display:block;width:100%;height:4px;border-radius:2px;background-color:var(--primary-color)}
*/
/* dialog */
.dialog-backdrop.backdrop-in{background: rgba(255,255,255,1);}
.dialog{background-color:transparent !important;backdrop-filter:none !important}
.dialog .dialog-inner{border:none;background-color:transparent}
.dialog .dialog-inner .dialog-title{display:none}
.dialog .dialog-button:after{content:none !important}
.dialog .dialog-inner::after{content:none !important}
.dialog .dialog-buttons{height:auto;margin-top:10px}
.dialog .dialog-buttons span{width:120px;height:45px;background-color:var(--primary-color);border-radius:22.5px !important;color:#fff;border:none;font-family:inherit;font-size:14px}
.dialog .dialog-buttons span:last-of-type{margin-left:15px;background-color:#fff;color:var(--primary-color);border:2px solid var(--primary-color);box-sizing:border-box}
.dialog input.dialog-input[type] {
  border:none;
  border-bottom:1px solid #b7b7b7;
  border-radius:0;
  margin-top:0;
  text-align:center;
}

/*popup*/
.popup.popup-question .navbarPop{height:110px;position:relative}
.popup.popup-question  .navbarPop .popup-close{position:absolute;right:25px;top:25px;width:40px;height:40px;background:url(../images/btn_close.png) no-repeat center center;background-size:20px 20px;text-indent:-9999px}

.popup-drawing{width:90%;margin-left:5%;height:360px;top:50%;margin-top:-250px}
.popup-drawing .btnA{display:grid;grid-template-columns:3fr 1fr 1fr;padding:0 10px}
.popup-drawing .btnA a{display:block;width:40px;height:40px;background:url(../images/btn_draw_clear.png) no-repeat center center;background-size:20px 20px;text-indent:-9999px}
.popup-drawing .btnA a#clear{background-image:url(../images/btn_draw_clear.png)}
.popup-drawing .btnA a#undo{background-image:url(../images/btn_draw_undo.png);justify-self:end}
.popup-drawing .btnA a#save-png{background-image:url(../images/btn_check_new.png);justify-self:end;background-size:18px 16px}

.popup-drawing .navbarPop{height:80px;position:relative}
.popup-drawing .navbarPop .popup-close{position:absolute;right:10px;top:25px;width:40px;height:40px;background:url(../images/btn_close.png) no-repeat center center;background-size:20px 20px;text-indent:-9999px}
.popup-drawing .signA .wrapper {
  position: relative;
  width: calc(100% - 32px);
  height: 180px;
  border:1px solid #ddd;
  margin:16px 16px 20px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.popup-drawing .signA .signature-pad {
  position: absolute;
  left: 0;
  top: 0;
  width:100%;
  height:100%;
  background-color: white;
}

/* login/join */
.login-screen-content .login-screen-title{padding-top:60px;background:url(../images/logo.png) no-repeat center top;background-size:24px auto;font-size:18px;font-weight:normal;margin-bottom:50px}
.login-screen-content form{padding:0 40px}
.login-screen-content .item-content{padding:0;margin-bottom:15px;border-bottom:0.5px solid #B7B7B7;position:relative}
.login-screen-content .item-content.item-checkbox{border-bottom:none}
.login-screen-content .item-content .item-input-error-message{position:absolute;bottom:-26px;width:100%;text-align:center;color:#B7B7B7}
.login-screen-content .item-inner:after{content:none}
.login-screen-content .item-content.item-input .item-title{display:none}
.login-screen-content .item-content.item-input input{text-align:center;font-size:14px}
.login-screen-content .item-input-invalid input{color:var(--primary-color)}
.login-screen-content .item-input-invalid input::placeholder{color: transparent}
.login-screen-content .item-checkbox > label{margin:0 auto;font-size:14px;color:#B7B7B7}
.login-screen-content .btnA{margin:100px 0 0}
.login-screen-content form.loginForm .btnA{margin:40px 0 30px}
.login-screen-content .btnA li{text-align:center}
.login-screen-content .block-footer li{margin-bottom:15px}
.login-screen-content .block-footer li a{color:#B7B7B7;font-size:13px}

/*iphone se*/
@media screen and (max-height:640px){

  .toolbar-bottom{height:55px}

  .tc01 form button.confirm {
      position:static;
      display:block;
      margin:50px auto;
      transform: translate(0,0);
  }

  .page-content.user-content .ng06{position:static;margin-top:50px}
}