@charset "utf-8";

/* CONTENTS */

/* 서브페이지 공통 */
.subpage .section {
  padding: 40px 0;
}
.subpage h2 {
  padding-bottom: 30px;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
}
.subpage h3 {
  padding-bottom: 30px;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
}
.subpage h4 {
  padding-bottom: 10px;
  font-size: 22px;
  font-weight: 700;
}

.slider_wrap {
  padding: 0 30px;
}

/* 작가와의만남 */
/* .meeting_writer .video_list .video_thumb img {width:100%; height:auto;} */
.meeting_writer .activity .title_wrap {
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}
.meeting_writer .activity .title_wrap h4 {
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
  padding-bottom: 0;
  font-size: 30px;
}
.meeting_writer .activity .title_wrap .btn {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
}
.meeting_writer .activity .title_wrap .btn strong {
  display: inline-block;
  padding-left: 30px;
  background: url("../images/common/download_ico.png") no-repeat 0% 50%;
}
.meeting_writer .activity .title_wrap .open_btn {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -8px;
  display: block;
  width: 30px;
  height: 16px;
  background: url("../images/common/arrow_up_icon02.png") no-repeat 50%;
  transition: all 0.3s ease-in-out;
  transform: rotate(-180deg);
}
.meeting_writer .activity .title_wrap .open_btn._close {
  transform: rotate(0deg);
}
.meeting_writer .activity .box {
  display: none;
  margin-top: 20px;
  padding: 40px;
  border: 2px solid #faa803;
  border-radius: 5px;
}
.meeting_writer .activity .box .desc {
  float: left;
  width: 20%;
  padding-bottom: 180px;
  background: url("../images/common/rabbit_icon03.png") no-repeat 50% 100%;
  text-align: center;
  font-size: 24px;
}
.meeting_writer .activity .box .desc strong {
  color: #e13959;
}
.meeting_writer .activity .box ul {
  float: left;
  width: 80%;
}
.meeting_writer .activity .box ul li {
  float: left;
  width: 25%;
  padding: 10px 10px;
}
.meeting_writer .activity .box ul li img {
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  cursor: pointer;
}

/* 학교별 추천도서 */
.school_recommend .sub_header {
  padding: 40px 0;
  background: #d3fcfe url("../images/contents/recommend_top_img.jpg") no-repeat
    100% 50%;
  background-size: auto 100%;
  text-align: center;
  max-height: 270px;
  overflow: hidden;
}
.school_recommend .sub_header .btn_wrap .loading {
  max-height: 200px;
}
.school_recommend .sub_header .btn_wrap .btn {
  margin: 10px 5px 0;
}
.school_recommend .sub_header .btn_wrap .btn.on {
  background: #00a7ee;
  color: #fff;
}
.school_recommend .sub_header .btn_wrap .paging {
  margin-top: 20px;
}
.school_recommend .sub_header .btn_wrap .paging ul li {
  padding: 0;
}
.school_recommend .sub_header .btn_wrap .paging ul li a {
  min-width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 14px;
}
.school_recommend .section {
  padding: 0 !important;
}
.school_recommend .section .inner {
  background: url("../images/contents/recommend_bg.png") no-repeat 50% 0%;
  background-size: contain;
}
.school_recommend .cont_wrap {
  height: 470px;
  text-align: center;
}
.school_recommend .cont_wrap h3 {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  padding: 10px 40px;
  background: #fff;
  text-align: center;
  font-size: 40px;
  font-weight: 700;
}
.school_recommend .cont1 h3 {
  top: 70px;
}
.school_recommend .cont2 h3 {
  top: 50px;
}
.school_recommend .cont3 h3 {
  top: 20px;
}
.school_recommend .cont_wrap .book_area {
  position: absolute;
  width: 100%;
}
.school_recommend .cont1 .book_area {
  top: 210px;
}
.school_recommend .cont2 .book_area {
  top: 180px;
}
.school_recommend .cont3 .book_area {
  top: 140px;
}
.school_recommend .cont_wrap .book_area a {
  display: inline-block;
  vertical-align: top;
  width: 240px;
  padding: 0 10px;
}
.school_recommend .cont_wrap .book_area .book_cover {
  min-height: 200px;
}
.school_recommend .cont_wrap .book_area .book_cover img {
  max-width: 175px;
  max-height: 175px;
  min-height: 200px;
}

/* 도서상세페이지 안내문구 */
.guide_box {
  margin-bottom: 30px;
  padding: 30px 0;
  background-color: #f8f8fa;
}
.guide_box .inner > div {
  padding-left: 130px;
}
.guide_box .inner > div ul {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.guide_box .warning {
  color: #e13959;
}
.guide_box .warning span {
  display: inline-block;
  padding-left: 22px;
  color: #333;
}
.bullet_list li {
  position: relative;
  margin: 5px 0;
  padding-left: 15px;
}
.bullet_list li:before {
  content: "·";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}
.bullet_list li ul li {
  margin: 0;
}
.bullet_list li ul li:before {
  content: "-";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}
.bullet_list._check li {
  padding-left: 20px;
}
.bullet_list._check li:before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.book_debate .guide_box .inner > div {
  background: url("../static/images/common/guide_box_icon01.png") no-repeat left
    center / 100px;
}
.book_report .guide_box .inner > div {
  background: url("../static/images/common/guide_box_icon02.png") no-repeat left
    center / 100px;
}
.book_picture .guide_box .inner > div {
  background: url("../static/images/common/guide_box_icon03.png") no-repeat left
    center / 100px;
}
.book_photo .guide_box .inner > div {
  background: url("../static/images/common/guide_box_icon04.png") no-repeat left
    center / 100px;
}
.book_video .guide_box .inner > div {
  background: url("../static/images/common/guide_box_icon05.png") no-repeat left
    center / 100px;
}

/* 도서상세페이지 > 독서퀴즈 제공 안하는 경우 */
.book_intro .book_detail_area.service_n {
  background: #f5f5f5;
}
.book_intro .notice_box {
  margin-bottom: 40px;
  padding: 20px;
  background: #fbd6d6;
  border: 2px solid #e13959;
  border-radius: 20px;
}
.book_intro .notice_box div {
  padding: 10px 0 10px 150px;
  background: url("../images/common/rabbit_icon01.png") no-repeat 50px 50%;
  background-size: auto 100px;
}

/* 도서상세페이지 > 도서소개 */
.book_intro .banner img {
  display: block;
  width: 100%;
  height: auto;
}
/* .book_intro h3 {margin-bottom:30px; padding-bottom:10px; text-align:left; border-bottom:1px solid #ddd; font-size:24px;}
.book_intro h3 span {display:inline-block;  padding-left:40px; background: url('../images/common/title_icon08.png') no-repeat 0% 50%; background-size:30px;}
.book_intro h3 a span {color:#00a7ee;} */
.book_intro .section.bdT0 {
  padding-top: 0;
}
.book_intro .section.create {
  padding-top: 0;
}
.book_intro .related_books ul li {
  float: left;
  width: 20%;
}

/* 독서활동 내역 없을 경우 */
.no_data {
  padding: 40px 0;
  text-align: center;
}
.no_data p {
  font-size: 22px;
  color: #999;
}

/* 도서상세페이지 > 독서토론 */
.book_debate .sort_custom {
  text-align: right;
}
.book_debate .sort_custom li {
  display: inline-block;
  vertical-align: middle;
}
.book_debate .sort_custom li + li {
  margin-left: 10px;
  padding-left: 15px;
}
.book_debate .sort_custom li + li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  display: block;
  width: 1px;
  height: 16px;
  background: #ddd;
}
.book_debate .sort_custom li .sort {
  color: #666;
  font-size: 16px;
}
.book_debate .sort_custom li.on .sort {
  color: #333;
  font-weight: 700;
}
.book_debate .reply_group .reply {
  padding: 20px 0 20px 20px;
  border-radius: 5px;
}
.book_debate .reply_group.admin .reply_box {
  background: #fcebee;
}
.book_debate .reply_group.admin .reply_box .icon {
  color: #e13959;
}
.book_debate .reply_group.user .reply_box {
  background: #ebf7ed;
}
.book_debate .reply_group.user .reply_box .icon {
  color: #3bb04d;
}
.book_debate .reply_group .reply_box {
  padding-right: 20px;
}
/* .book_debate .reply_group .reply_box .btn_wrap {top:auto; bottom:20px; right:20px;} */
.book_debate .reply_group .writer_info .name {
  display: inline-block;
  vertical-align: middle;
}
.book_debate .reply_group .writer_info .date {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  color: #999;
  font-size: 14px;
}
.book_debate .reply_group .writer_info .icon {
  color: #00a7ee;
}
.book_debate .reply_group .text {
  margin-top: 15px;
  font-size: 20px;
}
.book_debate .reply_group .text._deleted {
  color: #e13959;
}
.book_debate .reply_group .write_btn {
  margin-left: 30px;
  background: #ddd;
}
/* .book_debate .reply_group .reply_btn {position:absolute; right:20px; top:20px;} */
.book_debate .reply_group .reply_inner {
  padding: 20px;
}
/* .book_debate .reply_group .btn_wrap {position:absolute; top:20px; right:0;} */
.book_debate .reply_group .reply_depth {
  padding-right: 0;
}
.book_debate .reply_group .reply_depth .writer_info {
  padding-right: 130px;
}
.book_debate .reply_group .reply_depth1 {
  padding-left: 0;
}
.book_debate .reply_group .reply_depth2 {
  padding-left: 20px;
}
.book_debate .reply_group .reply_depth3 {
  padding-left: 40px;
}
.book_debate .reply_group .reply_depth4 {
  padding-left: 60px;
}
.book_debate .reply_group .reply_depth5 {
  padding-left: 80px;
}
.book_debate .reply_group .paging {
  margin-top: 20px;
}
.book_debate .reply_write {
  margin: 0 0 20px;
  overflow: hidden;
}
/* .book_debate .reply_write .title {float:left; display:inline-block; width:200px; height:50px; line-height:50px; border-radius:5px; background:#00a7ee; text-align:center; color:#fff;}
.book_debate .reply_write .input_wrap {float:left; width:calc(100% - 200px); padding-left:5px; overflow:hidden;}
.book_debate .reply_write .input_wrap textarea {float:left; width:calc(100% - 100px); height:50px; line-height:50px; padding:0 20px; background:#fff; border:1px solid #ddd; border-right:0; border-radius:5px 0 0 5px;}
.book_debate .reply_write .input_wrap .btn {float:left; width:100px; padding:0; text-align:center; border-radius:0 5px 5px 0;} */
.book_debate .reply_inner .reply_write {
  margin: 20px 0;
}
.book_debate .reply_inner .reply_write .title {
  width: 130px;
}
.book_debate .reply_inner .reply_write .input_wrap {
  width: calc(100% - 130px);
}
.book_debate .reply_write._edit {
  margin: 15px 0 0;
}
.book_debate .reply_write._edit .title {
  width: 100px;
}
.book_debate .reply_write._edit .input_wrap {
  width: calc(100% - 100px);
}
.book_debate .reply_group .reply.in_btn {
  padding-right: 150px;
}
.book_debate .reply_group .writer_info {
  padding-right: 100px;
}

/* 도서상세페이지 > 독서활동 목록 */
.activity_list {
  border-top: 1px solid #ddd;
}
.readingActivityItem {
  padding: 40px 0;
  border-bottom: 1px solid #ddd;
}
.activity_list .book_wrap .stamp._pc {
  display: block;
}
.activity_list .book_wrap .stamp._mobile {
  display: none;
}
.activity_list .book_wrap .book_info {
  padding: 10px 10px 0;
}
.activity_list .book_wrap .book_info .title {
  font-size: 16px;
}
.activity_list .book_wrap .book_info .writer {
  display: block;
  font-size: 14px;
}
.activity_list .book_wrap .book_info .pb_company {
  display: block;
  font-size: 14px;
}
.activity_list .book_wrap a {
  display: inline-block;
}
.activity_list .book_cover {
  min-height: auto;
}
.activity_list .book_cover .book_inner {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  vertical-align: bottom;
}
.activity_list .title_area {
  margin-bottom: 10px;
  overflow: hidden;
}
.activity_list .title_area .info_wrap {
  display: inline-block;
  vertical-align: baseline;
  margin-bottom: 10px;
}
.activity_list .title_area span {
  display: inline-block;
  vertical-align: baseline;
}
.activity_list .title_area .badge {
  height: 26px;
  line-height: 26px;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 0 15px;
  border-radius: 20px;
  font-size: 14px;
}
.activity_list .title_area .my_report {
  background: #00a7ee;
  color: #fff;
}
.activity_list .title_area .open_y {
  border: 1px solid #00a7ee;
  color: #333;
}
.activity_list .title_area .open_n {
  border: 1px solid #e13959;
  color: #e13959;
}
.activity_list .title_area .name {
  margin-right: 5px;
  font-size: 20px;
  font-weight: 700;
}
.activity_list .title_area .date {
  color: #666;
  font-size: 14px;
}
.activity_list .title_area .btn_wrap {
  float: right;
  margin-left: 40px;
  margin-bottom: 10px;
}
.activity_list .title_area .like_btn {
  color: #00a7ee;
  font-size: 20px;
  font-weight: 700;
}
.activity_list .title_area .like_btn span {
  display: inline-block;
  vertical-align: middle;
  width: 35px;
  height: 35px;
  line-height: 35px;
  margin-right: 10px;
  background: #00a7ee;
  border-radius: 50%;
  color: #fff;
  text-align: middle;
}
.activity_list .title_area .like_btn.on {
  color: #e13959;
}
.activity_list .title_area .like_btn.on span {
  background: #e13959;
}
.activity_list .title_area .btn {
  height: 26px;
  line-height: 26px;
  margin-left: 20px;
}
.activity_list .title_area .btn + .btn {
  margin-left: 0;
}
.activity_list .title_area .btn_edit {
  border: 1px solid #00a7ee;
}
.activity_list .title_area .btn_delete {
  border: 1px solid #e13959;
}
.activity_list .no_data {
  margin-top: 40px;
}

/* 독서감상문,독서영상 댓글 */
.reply_area {
  margin-top: 20px;
  text-align: right;
}
.reply_area .reply_btn {
  color: #09ada4;
  font-weight: 700;
}
.reply_area .reply_btn span {
  display: inline-block;
  padding-right: 30px;
  background: url("../images/common/reply_btn_down.png") no-repeat 100% 50%;
}
.reply_area .reply_btn.on span {
  background: url("../images/common/reply_btn_up.png") no-repeat 100% 50%;
}
.reply_area .reply_list {
  display: none;
  margin-top: 20px;
  text-align: left;
}
.reply_area .input_wrap {
  margin-bottom: 20px;
  overflow: hidden;
}
.reply_area .input_wrap input {
  float: left;
  width: calc(100% - 120px);
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border: 1px solid #ddd;
  border-right: 0;
  border-radius: 5px 0 0 5px;
}
.reply_area .input_wrap .btn {
  float: left;
  width: 120px;
  padding: 0;
  text-align: center;
  border-radius: 0 5px 5px 0;
}
.reply_area .reply {
  padding: 20px 0;
}
.reply_area .reply .writer_info .name {
  display: inline-block;
  vertical-align: middle;
}
.reply_area .reply .writer_info .date {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  color: #999;
  font-size: 14px;
}
.reply_area .reply .btn_wrap .btn {
  padding: 0 15px;
  border: 0;
  border-radius: 0;
  color: #999;
  font-size: 16px;
}
.reply_area .reply .btn_wrap .btn_delete:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  display: block;
  width: 1px;
  height: 16px;
  background: #ddd;
}
.reply_area .view_more_btn {
  width: 100%;
  margin-top: 20px;
  border-radius: 3px;
  font-size: 16px;
}
.reply_area .view_more_btn span {
  display: inline-block;
  padding-right: 20px;
  background: url("../images/common/view_more_btn_icon.png") no-repeat 100% 50%;
}

/* 도서상세페이지 > 독서감상문 */
.activity_list._report .cont_area {
  padding: 40px;
  background: #e5f7f8;
}
.activity_list._report .cont_area .cont_wrap {
  padding: 30px 10px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  overflow: hidden;
}
.activity_list._report .cont_area .cont {
  min-height: 100px;
  max-height: 300px;
  overflow-y: auto;
  padding: 0 20px;
}
.activity_list._report .cont_area.best.bg1 {
  background: url("../images/common/book_report_bg01.jpg") no-repeat 50%;
  background-size: cover;
}
.activity_list._report .cont_area.best.bg2 {
  background: url("../images/common/book_report_bg02.jpg") no-repeat 50%;
  background-size: cover;
}
.activity_list._report .cont_area.best.bg3 {
  background: url("../images/common/book_report_bg03.jpg") no-repeat 50%;
  background-size: cover;
}
.activity_list._report .cont_area.best.bg4 {
  background: url("../images/common/book_report_bg04.jpg") no-repeat 50%;
  background-size: cover;
}
.activity_list._report .cont_area.best.bg5 {
  background: url("../images/common/book_report_bg05.jpg") no-repeat 50%;
  background-size: cover;
}
.activity_list._report .cont_area.best.bg6 {
  background: url("../images/common/book_report_bg06.jpg") no-repeat 50%;
  background-size: cover;
}
.activity_list._report .cont_area.best.bg7 {
  background: url("../images/common/book_report_bg07.jpg") no-repeat 50%;
  background-size: cover;
}
.activity_list._report .cont_area.best.bg8 {
  background: url("../images/common/book_report_bg08.jpg") no-repeat 50%;
  background-size: cover;
}
.activity_list._report .cont_area.best.bg9 {
  background: url("../images/common/book_report_bg09.jpg") no-repeat 50%;
  background-size: cover;
}
.activity_list._report .cont_area.best.bg10 {
  background: url("../images/common/book_report_bg10.jpg") no-repeat 50%;
  background-size: cover;
}

/* 도서상세페이지 > 독서화 */
.activity_list._picture .cont_area {
  padding: 0 40px;
  text-align: center;
}
.activity_list._picture .cont_area .cont {
  display: inline-block;
  padding: 20px;
  background: #fff;
  box-shadow: 0 3px 7px 0 #999;
}
.activity_list._picture .cont_area .cont_item {
  display: none;
}
.activity_list._picture .cont_area .cont img {
  width: 100%;
  max-width: 700px;
  vertical-align: middle;
}
.activity_list._picture .cont_area.best {
  padding: 90px 40px 60px;
  background: url("../images/common/book_picture_bg.jpg") no-repeat 50%;
  background-size: cover;
}
.activity_list._picture .cont_area.best .cont_item {
  display: none;
}
.activity_list._picture .cont_area.best .cont:after {
  content: "";
  position: absolute;
  top: -90px;
  left: 0;
  display: block;
  width: 100%;
  height: 110px;
  background: url("../images/common/book_picture_icon.png") no-repeat 50% 0%;
}

/* 도서상세페이지 > 독서영상 */
.activity_list._video .cont_area {
  padding: 0 80px;
  text-align: center;
}
.activity_list._video .cont_area.best {
  padding: 40px 80px;
  background: url("../images/common/book_video_bg.png") repeat-x 50%;
  background-size: auto 100%;
}
.activity_list._video .cont_area iframe {
  max-width: 100%;
  vertical-align: middle;
}

/* 독후활동 */
.create .section {
  border: 0;
}
.create .cont_row {
  margin-top: 60px;
}
.create .create_btn .btn {
  font-size: 22px;
}

/* 독후활동 > 독서퀴즈 */
.quiz .section._bg {
  background: url("../images/common/pattern_bg.png") no-repeat 50% -100px;
  background-size: cover;
}
.quiz .quiz_area {
  padding-top: 40px;
  text-align: center;
}
.quiz .answer_area .answer {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 56px;
  margin: 0 10px;
  border: 2px solid #ddd;
  border-radius: 5px;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
}
.quiz .answer_area.correct .answer {
  border-color: #00a7ee;
  color: #00a7ee;
}
.quiz .answer_area.incorrect .answer {
  border-color: #e13959;
  color: #e13959;
}
.quiz .answer_area .btn_reset {
  width: 60px;
  height: 60px;
  margin-left: 20px;
  line-height: 1.2;
  color: #e13959;
  text-align: center;
}
.quiz .answer_area .btn_reset .icon {
  font-size: 30px;
}
.quiz .answer_area .btn_reset span {
  display: inline-block;
  width: 100%;
  font-size: 14px;
}
.quiz .question_area {
  display: inline-block;
  margin: 40px 0;
  padding: 10px 0 10px 130px;
  background: url("../images/common/quiz_text_img.png") no-repeat 0% 0%;
  text-align: left;
}
.quiz .question_area .question {
  display: inline-block;
  font-size: 30px;
}
.quiz .examples {
  margin: 0 auto;
  padding: 5px;
  border: 10px solid #00a7ee;
  border-radius: 10px;
  overflow: hidden;
}
.quiz .examples._cell4 {
  width: 310px;
}
.quiz .examples._cell5 {
  width: 380px;
}
.quiz .examples .cell {
  float: left;
  width: 60px;
  height: 60px;
  line-height: 60px;
  margin: 5px;
  background: #7fc8da;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}
.quiz .examples .cell.use {
  background: #00a7ee;
}
.quiz .examples .cell .content {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  background-size: contain !important;
}
.quiz .examples .cell .apple {
  display: none;
  width: 100%;
  height: 100%;
  background: url("../images/common/apple_on.png") no-repeat 50%;
}
.quiz .examples .cell.use .content {
  display: none;
}
.quiz .examples .cell.use .apple {
  display: block;
}
.quiz .examples .cell .content.bg1 {
  background: url("../images/common/quiz_object01.png") no-repeat 50%;
}
.quiz .examples .cell .content.bg2 {
  background: url("../images/common/quiz_object02.png") no-repeat 50%;
}
.quiz .examples .cell .content.bg3 {
  background: url("../images/common/quiz_object03.png") no-repeat 50%;
}
.quiz .examples .cell .content.bg4 {
  background: url("../images/common/quiz_object04.png") no-repeat 50%;
}
.quiz .examples .cell .content.bg5 {
  background: url("../images/common/quiz_object05.png") no-repeat 50%;
}
.quiz .examples .cell .content.gif {
  background: none;
}

/* 독후활동 > 독서감상문 */
.create_report .create_report_area {
  max-width: 1000px;
  margin: 0 auto;
  padding: 100px 50px 80px;
  background: url("../images/common/create_report_bg.png") no-repeat 50%;
  background-size: 100% 100%;
}
.create_report .create_report_area textarea {
  display: block;
  width: 100%;
  height: 420px;
  padding: 20px 20px 20px 10px;
  resize: none;
}
.create_report .create_report_area textarea::-webkit-input-placeholder {
  padding-top: 100px;
  font-size: 24px;
  text-align: center;
}
.create_report .create_report_area textarea::-ms-input-placeholder {
  padding-top: 100px;
  font-size: 24px;
  text-align: center;
}
.create_report .create_report_area textarea::-moz-input-placeholder {
  padding-top: 100px;
  font-size: 24px;
  text-align: center;
}
.create_report .open_yn {
  font-size: 22px;
}
.create_report .open_yn h4 {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
  padding-right: 20px;
}
.create_report .open_yn h4:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -11px;
  width: 1px;
  height: 22px;
  background: #ddd;
}
.create_report .open_yn .input_radio {
  display: inline-block;
  vertical-align: middle;
}

/* 독후활동 > 독서화 */
.create_picture .guide_popup {
  position: absolute;
  top: 0;
  left: 0;
  right: 10;
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255, 0.8);
  z-index: 9;
}
.create_picture .guide_popup .v_align {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 630px;
  margin-top: -80px;
}
.create_picture .guide_popup h3 {
  padding-bottom: 20px;
  color: #e13959;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
.create_picture .guide_popup h3 span {
  display: inline-block;
  padding: 40px 60px 0 0;
  background: url("../images/common/rabbit_icon01.png") no-repeat 100% 100%;
  background-size: auto 60px;
}
.create_picture .guide_popup ul li.depth1 {
  margin-top: 20px;
  padding-left: 15px;
}
.create_picture .guide_popup ul li.depth1:before,
.create_picture .guide_popup ul li.depth1 > span {
  display: block;
  font-size: 22px;
  font-weight: 700;
}
.create_picture .guide_tooltip {
  display: none;
  position: absolute;
  top: 60px;
  right: 20px;
  width: 300px;
  padding: 10px;
  background: #eee;
  border-radius: 5px;
  box-shadow: 2px 2px 10px #aaa;
  z-index: 10;
}
.create_picture .guide_tooltip:before {
  content: "";
  position: absolute;
  top: -10px;
  right: 60px;
  width: 0px;
  height: 0px;
  border-top: none;
  border-bottom: 10px solid #eee;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.create_picture .guide_tooltip .title {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
}
.create_picture .guide_tooltip ul li {
  padding-top: 5px;
  font-size: 14px;
}
.create_picture .create_picture_area .create_inner {
  min-width: 1200px;
  padding-left: 310px;
  border: 1px solid #ddd;
}
.create_picture .create_picture_area .toolbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 310px;
  height: 100%;
}
.create_picture .create_picture_area .canvas_area {
  padding: 20px 40px;
  background: #f9f9f9;
}
.create_picture .create_picture_area .object_menu {
  margin-bottom: 20px;
}
.create_picture .create_picture_area .object_menu .btn {
  font-size: 16px;
}
.create_picture .create_picture_area .btn_object {
  padding: 0;
  margin-right: 20px;
  border-radius: 0;
}
.create_picture .create_picture_area .btn_object span {
  display: inline-block;
  padding-left: 40px;
}
.create_picture .create_picture_area .object_btf span {
  background: url("../images/common/btn_object_btf.png") no-repeat 0% 50%;
}
.create_picture .create_picture_area .object_bf span {
  background: url("../images/common/btn_object_bf.png") no-repeat 0% 50%;
}
.create_picture .create_picture_area .object_bb span {
  background: url("../images/common/btn_object_bb.png") no-repeat 0% 50%;
}
.create_picture .create_picture_area .object_btb span {
  background: url("../images/common/btn_object_btb.png") no-repeat 0% 50%;
}
.create_picture .create_picture_area .object_flip_y span {
  background: url("../images/common/btn_object_flip_y.png") no-repeat 0% 50%;
}
.create_picture .create_picture_area .object_flip_x span {
  background: url("../images/common/btn_object_flip_x.png") no-repeat 0% 50%;
}
.create_picture .create_picture_area .object_delete {
  background: #e87289;
  color: #fff;
}
.create_picture .create_picture_area .guide_btn {
  margin-left: 8px;
  background: #51c4bd;
  color: #fff;
}
.create_picture .create_picture_area .canvas_wrap {
  width: 805px;
  height: 569px;
  background: #fff;
  border: 1px solid #999;
  touch-action: none;
  user-select: none;
}
.create_picture .create_picture_area .pannel {
  height: 100%;
  text-align: center;
}
.create_picture .create_picture_area .controls {
  height: 120px;
  background: #fff;
}
.create_picture .create_picture_area .list_wrap {
  position: absolute;
  top: 120px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}
.create_picture .warning_message {
  padding: 100px 0;
  text-align: center;
}
.create_picture .warning_message p {
  color: #999;
  font-size: 24px;
}

/* 독후활동 > 독서화 > 탭메뉴 */
.create_picture .tab_area .tab_menu {
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}
.create_picture .tab_area .tab_menu li {
  float: left;
  width: 20%;
}
.create_picture .tab_area .tab_menu li a {
  display: block;
  padding: 10px 0;
  text-align: center;
}
.create_picture .tab_area .tab_menu li.on a {
  border-bottom: 4px solid #00a7ee;
}
.create_picture .tab_area .tab_cont {
  display: none;
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  bottom: 0;
}
.create_picture .tab_area .tab_cont.tab01 {
  display: block;
}

/* 독후활동 > 독서영상 */
.create_video .create_video_area {
  padding: 20px 0 20px 260px;
  background: url("../images/common/create_video_img.png") no-repeat 0% 50%;
}
.create_video .create_video_area .cont_row {
  margin-top: 30px;
}
.create_video .create_video_area input[type="text"] {
  width: 100%;
  padding: 5px 20px;
  border-bottom: 1px solid #ddd;
}
.create_video .guide_box._upload {
  background: #fff;
  border: 2px solid #e13959;
}
.create_video .guide_box._upload h4 .icon {
  color: #e13959;
}
.create_video .guide_box._upload ul {
  padding-left: 10px;
}
.create_video .guide_box._upload ul li {
  padding-left: 25px;
}
.create_video .guide_box._upload ul li:before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.create_video .input_check {
  font-size: 22px;
}

/* 도서찾기 */
.find_book .search_area {
  background: #faa803;
}
.find_book .search_area .search_input {
  color: #fff;
}
.find_book .search_area input::-webkit-input-placeholder {
  color: #fff;
}
.find_book .search_area input:-ms-input-placeholder {
  color: #fff;
}
.find_book .search_area input:-moz-input-placeholder {
  color: #fff;
}
.find_book .search_area .search_btn {
  background: url("../images/common/search_btn_w.png") no-repeat 50% 80%;
}
.find_book .section:first-child {
  padding-bottom: 0;
}
.find_book .section:last-child {
  padding-bottom: 40px;
}
.find_book .title_area h3 {
  margin-bottom: 30px;
  padding-bottom: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}
.find_book .title_area h3 span {
  display: inline-block;
  padding-left: 40px;
  background: url("../images/common/title_icon08.png") no-repeat 0% 50%;
  background-size: 30px;
}
.find_book .title_area .btn {
  position: absolute;
  top: 0;
  right: 0;
}

/* 목록페이지 상단 */
.list_page .sub_header {
  background: #d4f2fa;
}
.list_page .sub_header h2 {
  text-align: left;
}
.list_page .sub_header .inner {
  padding-left: 160px;
  background-size: auto 100px !important;
}
.list_page .sub_header .v_align {
  padding: 40px 0;
}
.list_page .sub_header .bullet_list._check li {
  padding-left: 25px;
}
.list_page h3 {
  margin-bottom: 30px;
  padding-bottom: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}
.list_page h3 span {
  display: inline-block;
  padding-left: 40px;
  background: url("../images/common/title_icon08.png") no-repeat 0% 50%;
  background-size: 30px;
}
.list_page .tab_menu:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 4px;
  background: #00a7ee;
  z-index: 2;
}
.list_page .tab_menu .inner {
  padding: 0;
}
.list_page .tab_menu ul {
  text-align: center;
  overflow: hidden;
}
.list_page .tab_menu ul li {
  position: relative;
  display: inline-block;
  padding: 0 5px;
  z-index: 1;
}
.list_page .tab_menu ul li a {
  position: relative;
  display: block;
  height: 60px;
  line-height: 56px;
  padding: 0 40px;
  border-radius: 20px 20px 0 0;
  border: 4px solid #efefef;
  background: #efefef;
  color: #666;
  font-size: 22px;
  font-weight: 700;
}
.list_page .tab_menu ul li a br {
  display: none;
}
.list_page .tab_menu ul li.on {
  z-index: 3;
}
.list_page .tab_menu ul li.on a {
  border-color: #00a7ee;
  background: #fff;
  color: #333;
}
.list_page .tab_menu ul li.on a:after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 6px;
  background: #fff;
}
.list_page .tab_menu ul li.tab2 a span {
  display: inline-block;
  padding-left: 40px;
  background: url("../images/common/title_icon03.png") no-repeat 0% 50%;
  background-size: auto 30px;
}
.list_page .tab_menu .select_wrap {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  border: 2px solid #ccc;
  border-radius: 20px;
}
.list_page .tab_menu .select_wrap select {
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

/* 독서감상문 */
.report .sub_header .inner {
  background: url("../images/common/guide_box_icon02.png") no-repeat 20px 50%;
}

/* 독서화 */
.picture .sub_header .inner {
  background: url("../images/common/guide_box_icon03.png") no-repeat 20px 50%;
}

/* 독서영상 */
.video .sub_header .inner {
  background: url("../images/common/guide_box_icon04.png") no-repeat 20px 50%;
}

/* 독서력진단 */
.reading_test .sub_header .inner {
  background: url("../images/common/sub_header_bg04.png") no-repeat 20px 50%;
}
.reading_test .sub_header .alert_text {
  padding-top: 10px;
}
.reading_test .sub_header .alert_text .icon {
  color: #faa803;
  vertical-align: middle;
}
.reading_test .test_btn_area {
  text-align: center;
}
.reading_test .test_btn_area .col4 {
  padding: 20px 40px 0;
}
.reading_test .test_btn {
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #fff;
}
.reading_test .test_btn a {
  display: block;
  width: 100%;
  padding: 40px 0;
}
.reading_test .test_btn .title strong {
  display: block;
  font-size: 34px;
}
.reading_test .test_btn .title.type1 strong {
  color: #3bb04d;
}
.reading_test .test_btn .title.type2 strong {
  color: #fd7c16;
}
.reading_test .test_btn .title.type3 strong {
  color: #09ada4;
}
.reading_test .test_btn .title span {
  color: #666;
  font-size: 20px;
}
.reading_test .test_btn .icon {
  display: inline-block;
  width: 120px;
  height: 72px;
  margin: 30px 0 20px;
}
.reading_test .test_btn .icon01 {
  background: url("../images/common/reading_test_icon01.png") no-repeat 50%;
}
.reading_test .test_btn .icon02 {
  background: url("../images/common/reading_test_icon02.png") no-repeat 50%;
}
.reading_test .test_btn .icon03 {
  background: url("../images/common/reading_test_icon03.png") no-repeat 50%;
}
.reading_test .test_btn .text_btn {
  font-size: 24px;
  opacity: 0.3;
}
.reading_test .test_btn .text_btn .arrow {
  display: inline-block;
  padding-right: 25px;
  background: url("../images/common/next_btn_bk.png") no-repeat 100% 50%;
  background-size: auto 18px;
}
.reading_test .test_btn:hover {
  border: 2px solid #333;
  margin-top: -2px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}
.reading_test .test_btn:hover .text_btn {
  opacity: 1;
}
.reading_test .test_btn_area .badge {
  position: absolute;
  top: 0;
  left: 20px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  background: #e13959;
  color: #fff;
  text-align: center;
}
.reading_test .test_btn_area .date {
  margin-top: 15px;
  color: #666;
  font-size: 16px;
}
.reading_test .report_wrap {
  margin-top: 60px;
}
.reading_test .report_wrap .title_area {
  padding: 12px 30px;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
.reading_test .report_wrap .title_area .title {
  font-size: 30px;
}
.reading_test .report_wrap .title_area .title:before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -8px;
  display: block;
  width: 30px;
  height: 16px;
  background: url("../images/common/arrow_up_icon.png") no-repeat 50%;
  transition: all 0.3s ease-in-out;
}
.reading_test .report_wrap .title_area._close .title:before {
  transform: rotate(-180deg);
}
.reading_test .report_wrap .title_area .date {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.8);
}
.reading_test .report_wrap .cont_area {
  margin-top: 10px;
  padding: 0 40px;
  border-radius: 20px;
}
.reading_test .report_wrap .cont_inner {
  padding: 40px 0;
  border-top: 1px solid #ddd;
}
.reading_test .report_wrap .cont_inner:first-child {
  border-top: 0;
}
.reading_test .report_wrap .cont_area .chart {
  margin-top: 20px;
}
.reading_test .report_wrap .cont_area .title_wrap {
  margin-bottom: 20px;
}
.reading_test .report_wrap .title_wrap .icon {
  display: inline-block;
  vertical-align: middle;
  width: 50px;
  height: 50px;
  margin-right: 20px;
  background-size: contain !important;
}
.reading_test .report_wrap .title_wrap .icon01 {
  background: url("../images/common/report_icon01.png") no-repeat 50%;
}
.reading_test .report_wrap .title_wrap .icon02 {
  background: url("../images/common/report_icon02.png") no-repeat 50%;
}
.reading_test .report_wrap .title_wrap .icon03 {
  background: url("../images/common/report_icon03.png") no-repeat 50%;
}
.reading_test .report_wrap .title_wrap span {
  display: inline-block;
  vertical-align: middle;
  font-size: 26px;
}
.reading_test .report_wrap .title_wrap strong {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding: 0 3px;
  font-size: 26px;
}
.reading_test .report_wrap .title_wrap strong.arrow {
  margin-left: 60px;
}
.reading_test .report_wrap .title_wrap strong.arrow:before {
  content: "";
  position: absolute;
  left: -50px;
  top: 50%;
  margin-top: -10px;
  width: 40px;
  height: 20px;
  background: url("../images/common/dot_arrow_g.png") no-repeat 50%;
}
.reading_test .report_wrap .title_wrap strong:after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  width: 100%;
  height: 12px;
  background: rgba(253, 210, 61, 0.4);
  z-index: -1;
}
.reading_test .report_wrap.type1 .title_area {
  background: #3bb04d;
}
.reading_test .report_wrap.type1 .cont_area {
  border: 2px solid #3bb04d;
}
.reading_test .report_wrap.type2 .title_area {
  background: #fd7c16;
}
.reading_test .report_wrap.type2 .cont_area {
  border: 2px solid #fd7c16;
}
.reading_test .report_wrap.type3 .title_area {
  background: #09ada4;
}
.reading_test .report_wrap.type3 .cont_area {
  border: 2px solid #09ada4;
}
.reading_test .test_guide {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 20px;
}
.reading_test .test_guide .type {
  float: left;
  width: 50%;
  padding: 10px 0;
  text-align: center;
}
.reading_test .test_guide .type .title {
  padding-top: 100px;
  font-size: 34px;
}
.reading_test .test_guide .type1 .title {
  color: #3bb04d;
  background: url("../images/common/test_guide_icon01.png") no-repeat 50% 0%;
}
.reading_test .test_guide .type2 .title {
  color: #fd7c16;
  background: url("../images/common/test_guide_icon02.png") no-repeat 50% 0%;
}
.reading_test .test_guide .type ul {
  display: inline-block;
  margin-top: 20px;
  text-align: left;
}
.reading_test .test_guide .type2 {
  border-left: 1px solid #ddd;
}
.reading_test .infographic {
  padding-left: 30px;
  text-align: center;
}

/* 독서력진단 > 진단하기 */
.reading_test .step_area {
  text-align: center;
}
.reading_test .step_area .type_wrap .type {
  display: inline-block;
  vertical-align: middle;
  height: 60px;
  line-height: 60px;
  padding: 0 40px;
  background: #ddd;
  border-radius: 60px;
  color: #999;
  font-size: 30px;
}
.reading_test .step_area .type_wrap .type + .type {
  margin-left: 120px;
}
.reading_test .step_area .type_wrap .type + .type:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -100px;
  width: 80px;
  height: 1px;
  background: #ddd;
}
.reading_test .step_area .step_wrap {
  margin-top: 40px;
}
.reading_test .step_area .step_wrap .step {
  display: inline-block;
  vertical-align: middle;
  font-size: 22px;
}
.reading_test .step_area .step_wrap .step + .step {
  margin-left: 80px;
}
.reading_test .step_area .step_wrap .step + .step:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -60px;
  width: 40px;
  height: 1px;
  background: #ddd;
}
.reading_test .step_area .step_wrap .step .num {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  line-height: 31px;
  border-radius: 50%;
  margin-right: 10px;
  background: #ddd;
  text-align: center;
  color: #fff;
}
.reading_test .step_area .step_wrap .step .name {
  color: #999;
}
.reading_test .step_area .step_wrap .step.active .name {
  color: #333;
  font-weight: 700;
}
.reading_test .question_area {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 20px;
  background: #f9f9f9;
  border-radius: 20px;
  text-align: center;
}
.reading_test .question_area .cont_inner {
  max-width: 700px;
  margin: 0 auto;
}
.reading_test .question_area .question_nav {
  padding: 0 30px;
}
.reading_test .question_area .question_nav span {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  line-height: 31px;
  margin: 5px 3px;
  border-radius: 50%;
  text-align: center;
  border: 1px solid #ddd;
  background: #fff;
  color: #ccc;
}
.reading_test .question_area .question_nav span.active {
  background: #ddd;
  color: #fff;
}
.reading_test .question_area .question_nav span.current {
  background: #00a7ee;
  border-color: #00a7ee;
  color: #fff;
}
.reading_test .question_area .question {
  margin: 40px 0;
}
.reading_test .question_area .question .text {
  padding-left: 50px;
  padding-top: 3px;
  text-align: left;
  font-size: 22px;
}
.reading_test .question_area .question .num {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 41px;
  border-radius: 50%;
  text-align: center;
  background: #00a7ee;
  text-align: center;
  color: #fff;
}
.reading_test .question_area .question .image {
  padding-top: 20px;
}
.reading_test .question_area .examples ul li {
  width: 100%;
  margin: 10px 0;
  padding: 10px 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 60px;
  text-align: left;
  cursor: pointer;
}
.reading_test .question_area .examples ul li.active {
  background: #00a7ee;
  border-color: #00a7ee;
  color: #fff;
}
.reading_test .controls {
  margin-top: 60px;
  text-align: center;
}
.reading_test .controls .btn {
  margin: 0 15px;
  padding: 0 25px;
}
.reading_test .controls .btn.auto_next.active {
  background: #09ada4;
  color: #fff;
}
.reading_test .controls .btn.auto_next .check {
  display: none;
}
.reading_test .controls .btn.auto_next.active .check {
  display: inline;
}
.reading_test .controls .btn.auto_next.active .uncheck {
  display: none;
}
.reading_test .controls .text {
  padding-bottom: 20px;
  color: #fd7c16;
}

/* 독서력진단 > 기본진단 */
.reading_test.type1 .step_area .type_wrap .type.active {
  background: #3bb04d;
  color: #fff;
  font-weight: 700;
}
.reading_test.type1 .step_area .step_wrap .step.active .num {
  background: #3bb04d;
  font-weight: 700;
}

/* 독서력진단 > 심화진단 */
.reading_test.type2 .step_area .type_wrap .type.active {
  background: #fd7c16;
  color: #fff;
  font-weight: 700;
}
.reading_test.type2 .step_area .step_wrap .step.active .num {
  background: #fd7c16;
  font-weight: 700;
}

/* 독서력진단 > 진단완료 */
.reading_test.test_end {
  text-align: center;
}
.reading_test.test_end .title_area div img {
  vertical-align: middle;
  padding-bottom: 20px;
}
.reading_test.test_end .title_area h2 {
  padding-bottom: 10px;
}
.reading_test.test_end .title_area .desc {
  font-size: 30px;
}
.reading_test.test_end .report_wrap {
  text-align: left;
}
.reading_test.test_end .report_wrap .title_area {
  cursor: auto;
}
.reading_test.test_end .report_wrap .title_area .title:before {
  display: none;
}
.reading_test.test_end .btn {
  margin-top: 60px;
}

/* 로그인 */
.login .login_box {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background: #77cbee;
  border-radius: 50%;
}
.login .login_box .v_align {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 0 80px;
}
.login .login_box .login_input_area input {
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin-bottom: 10px;
  text-align: center;
  background: #fff;
  border-radius: 50px;
}
.login .login_box .btn {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
}
.login .join_btn {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: 150px;
  width: 150px;
  height: 150px;
  padding: 35px 0;
  border-radius: 50%;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
  font-size: 22px;
}
.login .join_btn span {
  display: inline-block;
  padding-top: 40px;
  background: url("../images/common/join_btn.png") no-repeat 50% 0%;
  background-size: auto 40px;
}
.login .login_box h2 {
  color: #fff;
}
.login .guide_box {
  max-width: 540px;
  margin: 40px auto 0;
  padding: 20px 60px;
  background: #f9f9f9;
  border: 0;
  border-radius: 100px;
  text-align: left;
}
.login .guide_box ul li {
  font-size: 16px;
}

/* 이용자등록 */
.join h2 span {
  display: inline-block;
  padding-left: 70px;
  background: url("../images/common/title_icon01.png") no-repeat 0% 0%;
  background-size: 50px;
}
.join .join_input_area {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px;
  background: #f9f9f9;
  border-radius: 20px;
}
.join .join_input_area .row {
  margin-top: 40px;
}
.join .join_input_area h4 {
  padding-bottom: 15px;
}
.join .join_input_area input[type="text"],
.join .join_input_area input[type="password"],
.join .join_input_area input[type="number"] {
  width: 100%;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.join .join_input_area .row .col4 {
  width: calc(33.3% - 20px);
}
.join .join_input_area .row .col4 + .col4 {
  margin-left: 30px;
}
.join .join_input_area .desc {
  font-size: 16px;
}
.join .join_input_area .input_check input[type="checkbox"] + label {
  margin-right: 0;
}
.join .btn_area {
  margin-top: 40px;
}
.join .btn_area .btn {
  width: 180px;
  margin: 0 5px;
}

/* 마이페이지 */
.subpage .mypage .section {
  padding: 40px 0 !important;
}
.mypage .inner_wrap {
  max-width: 1280px;
}
/* .mypage .inner_wrap .box {width:580px; margin:40px 0 0 40px; padding:20px 30px; background:#f9f9f9; border-radius:20px; overflow:hidden;} */
.mypage h2 span {
  display: inline-block;
  padding-left: 70px;
  background: url("../images/common/title_icon09.png") no-repeat 0% 0%;
  background-size: 50px;
}
.mypage h3 {
  padding-bottom: 20px !important;
  font-size: 26px !important;
  text-align: center;
}
.mypage h3 span {
  display: inline-block;
  padding-left: 45px;
}
.mypage h3 span.icon02 {
  background: url("../images/common/title_icon02.png") no-repeat 0% 0%;
  background-size: 35px;
}
.mypage h3 span.icon05 {
  background: url("../images/common/title_icon05.png") no-repeat 0% 0%;
  background-size: 35px;
}
.mypage h3 span.icon07 {
  background: url("../images/common/title_icon07.png") no-repeat 0% 0%;
  background-size: 35px;
}
.mypage h3 span.icon08 {
  background: url("../images/common/title_icon08.png") no-repeat 0% 0%;
  background-size: 35px;
}
.mypage h3 span.icon11 {
  background: url("../images/common/title_icon11.png") no-repeat 0% 0%;
  background-size: 35px;
}

/* 마이페이지 > 모달 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 999;
}
.modal .modal_cont {
  max-width: 600px;
  margin: 60px auto;
  padding: 40px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 5px 5px 20px 10px rgb(0, 0, 0, 0.3);
}
.modal .modal_cont h3 {
  padding-bottom: 30px;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
}
.modal .modal_tab_menu ul {
  overflow: hidden;
}
.modal .modal_tab_menu ul li {
  float: left;
  width: 50%;
  height: 50px;
  line-height: 50px;
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid #666;
  color: #999;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.modal .modal_tab_menu ul li.on {
  border: 1px solid #666;
  border-bottom: 0;
  color: #333;
}
.modal .modal_tab_cont {
  display: none;
  padding: 20px;
}
.modal .modal_tab_cont1 {
  display: block;
}

/* 마이페이지 > 회원정보수정 모달 */
.modal.user_info .modal_cont h3 span {
  display: inline-block;
  padding-left: 40px;
  background: url("../images/common/title_icon01.png") no-repeat 0% 0%;
  background-size: 30px;
}
.modal .join .join_input_area {
  max-width: 100%;
  padding: 0;
  background: none;
  border-radius: 0;
}
.modal .join .join_input_area .row {
  margin-top: 30px;
}
.modal .btn_area {
  margin-top: 30px;
  text-align: center;
}
.modal .btn_area .btn {
  min-width: 120px;
  margin: 0 5px;
}

/* 마이페이지 > 알림 모달 */
.modal.user_notice .modal_cont {
  max-width: 800px;
}
.modal.user_notice .modal_cont h3 span {
  display: inline-block;
  padding-left: 40px;
  background: url("../images/common/title_icon08.png") no-repeat 0% 0%;
  background-size: 30px;
}
.modal.user_notice .btn_close {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 60px;
  height: 60px;
  background: #faa803;
  border-radius: 50%;
}
.modal.user_notice .btn_close span {
  display: block;
  position: absolute;
  right: 20%;
  width: 60%;
  height: 2px;
  background: #fff;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}
.modal.user_notice .btn_close span:nth-child(1) {
  top: 19px;
  transform: translateY(9px) rotate(-45deg);
}
.modal.user_notice .btn_close span:nth-child(2) {
  top: 39px;
  transform: translateY(-11px) rotate(45deg);
}
.modal .tbl_wrap {
  border-radius: 5px;
  overflow: hidden;
}
.modal .tbl_wrap table thead th {
  padding: 10px 5px;
  background: #09ada4;
  color: #fff;
  text-align: center;
}
.modal .tbl_wrap table tbody td {
  padding: 15px 5px;
  font-size: 16px;
  text-align: center;
}
.modal .tbl_wrap table tbody td.desc {
  text-align: left;
}
.modal .tbl_wrap table tbody tr:nth-child(odd) {
  background: #f9f9f9;
}
.modal .tbl_wrap table tbody tr:nth-child(even) {
  background: #e6f7f6;
}
.modal .paging {
  margin-top: 30px;
}

/* 마이페이지 > 레벨업 모달 */
.modal.user_levelup .level_info {
  text-align: center;
}
.modal.user_levelup .level_info p {
  color: #e13959;
  font-size: 26px;
}


/* 마이페이지 > 알림 */
.mypage .user_notice {
  width: 580px;
  height: 190px;
  margin-top: 0 !important;
  background: #fef6e5 !important;
}
.mypage .user_notice .title_wrap h3 {
  text-align: left;
}
.mypage .user_notice .title_wrap .btn {
  position: absolute;
  top: 0;
  right: 0;
}
.mypage .user_notice ul li {
  margin: 5px 0;
  font-size: 16px;
}
.mypage .user_notice ul li span {
  display: inline-block;
  vertical-align: middle;
}
.mypage .user_notice ul li .date {
  color: #999;
  font-size: 14px;
}
.mypage .user_notice ul li .category {
  padding: 0 15px;
}
.mypage .user_notice ul li .desc {
  position: relative;
  padding-left: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mypage .user_notice ul li .desc:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -7px;
  width: 1px;
  height: 14px;
  background: #f7d794;
}

/* 마이페이지 > 독서사과나무 */
/* .mypage .apple_tree {
  float: right;
  padding: 0 !important;
  background: none !important;
  margin-top: 0 !important;
} */
/* .mypage .apple_tree .tree_wrap {width:580px; height:540px; margin:0 auto; background:url('../images/common/myreading_apple_tree2.png') no-repeat 50%; background-size:contain;} */

/* 마이페이지 > 독서현황 */
.mypage .reading_status {
  height: 310px;
}
.mypage .status_tab .tab_title {
  overflow: hidden;
}
.mypage .status_tab .tab_title li {
  float: left;
  width: 50%;
  height: 40px;
  line-height: 40px;
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid #666;
  color: #999;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.mypage .status_tab .tab_title li.on {
  border: 1px solid #666;
  border-bottom: 0;
  color: #333;
}
.mypage .status_tab .tab_cont > div {
  display: none;
  padding-top: 20px;
  text-align: center;
}
.mypage .status_tab .tab_cont .chart {
  display: inline-block;
  width: 100%;
  height: 120px;
}
.mypage .status_tab .tab_cont .chart img {
  height: 100%;
}

/* 마이페이지 > 독서활동현황 */
.mypage .activity_status {
  min-height: 310px;
  text-align: center;
}
.mypage .activity_status .col3 {
  width: calc(50% - 130px);
}
.mypage .activity_status .col3.chart_wrap {
  width: 130px;
  margin: 0 auto;
}
.mypage .activity_status .col6 {
  padding: 0 20px;
}
.mypage .activity_status .v_align {
  padding-top: 20px;
}
.mypage .activity_status ul {
  max-width: 280px;
  margin: 0 auto;
}
.mypage .activity_status ul li {
  padding: 5px 0;
  overflow: hidden;
  text-align: left;
}
.mypage .activity_status ul li .category {
  float: left;
  display: inline-block;
  width: 100px;
}
.mypage .activity_status ul li .data {
  float: left;
  position: relative;
  max-width: 150px;
  padding-left: 20px;
  font-weight: 700;
}
.mypage .activity_status ul li .data:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -10px;
  width: 1px;
  height: 18px;
  background: #ddd;
}
.mypage .activity_status ul li .apple {
  display: inline-block;
  vertical-align: middle;
  margin-left: 15px;
  padding-left: 25px;
  background: url("../images/common/apple_on.png") no-repeat 0% 0%;
  background-size: auto 25px;
}
.mypage .activity_list .no_data {
  margin: 0px;
}

/* 마이페이지 > 독서 이력 출력 */
.mypage .print .bullet_list li {
  font-size: 16px;
}
.mypage .reading_history .select_date {
  max-width: 800px;
  margin: 60px auto 0 auto;
  padding-right: 100px;
  text-align: center;
}
.mypage .reading_history .input_wrap {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  padding-right: 100px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50px;
  overflow: hidden;
}
.mypage .reading_history .input_wrap input {
  float: left;
  width: calc(50% - 15px);
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.mypage .reading_history .input_wrap span {
  float: left;
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  text-align: center;
}
.mypage .reading_history .btn_submit {
  position: absolute;
  top: 0;
  right: 100px;
}
.mypage .reading_history .btn_cancel {
  position: absolute;
  top: 0;
  right: 0;
}

/* 마이페이지 > 독서 이력 출력 > 보기 */
.mypage .print_viewer {
  display: none;
  max-width: 1200px;
  margin: 40px auto 0;
  overflow: auto;
}

/* 
.mypage .print_viewer .report_page_wrap {overflow:auto; text-align:center; border:1px solid #ddd;}
.mypage .print_viewer .report_page {size:A4; width:1000px; margin:0 auto; padding:30px;}

.mypage .print_viewer .report_page h2 {padding-bottom:0; color:#00a7ee;color:#000; font-size:50px;}
.mypage .print_viewer .report_page .desc {color:#00a7ee;}
.mypage .print_viewer .report_page .rank_info {margin:20px 0;}
.mypage .print_viewer .report_page .rank_info p {color:#e13959; font-size:26px;}
.mypage .print_viewer .report_page .student_info span {padding:0 5px; font-size:20px;}
.mypage .print_viewer .report_page .report_date {margin:20px 0; font-size:16px;}
.mypage .print_viewer .report_page h3 {color:#00a7ee;}
.mypage .print_viewer .report_page canvas {display:block; margin:0 auto;}
.mypage .print_viewer .report_page .summary {padding:20px; border:5px solid #ebfcfc; border-radius:5px;}
.mypage .print_viewer .report_page .summary .section {padding:20px;}
.mypage .print_viewer .report_page .summary .section + .section {margin-top:20px; border-top:5px solid #ebfcfc;}
.mypage .print_viewer .report_page ul {padding:10px 20px; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.mypage .print_viewer .report_page ul li {padding:5px 0; overflow:hidden; text-align:center;}
.mypage .print_viewer .report_page ul li span {float:left; display:inline-block;}
.mypage .print_viewer .report_page ul li .category {width:50%;}
.mypage .print_viewer .report_page ul li .data {position:relative; width:50%; font-weight:700;}
.mypage .print_viewer .report_page ul li .data:before {content:''; position:absolute; left:0; top:50%; margin-top:-10px; width:1px; height:18px; background:#ddd;}
.mypage .print_viewer .report_page table th {font-weight:700;}
.mypage .print_viewer .report_page table td {vertical-align:middle;}
.mypage .print_viewer .report_page .book_list {margin-top:20px;}
.mypage .print_viewer .report_page .book_list table th {padding:15px 10px; background:#e5e5e5; font-size:15px;}
.mypage .print_viewer .report_page .book_list table td {padding:13px 10px; border-bottom:1px solid #ddd; color:#888; font-size:16px;} */

/* 마이페이지 > 독서활동 */
.myreading .history_area {
  margin-top: 40px;
}
.myreading .history .year {
  position: relative;
  margin-top: 40px;
  border-bottom: 2px solid #333;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
}
.myreading .history .year:before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -8px;
  display: block;
  width: 30px;
  height: 16px;
  background: url("../images/common/arrow_up_icon02.png") no-repeat 50%;
  transition: all 0.3s ease-in-out;
}
.myreading .history .year._close:before {
  transform: rotate(-180deg);
}
.myreading .history .month {
  margin-bottom: 40px;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  font-size: 20px;
  font-weight: 700;
}
.myreading .history .month span {
  position: relative;
  display: inline-block;
  padding-left: 15px;
}
.myreading .history .month span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -3px;
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #00a7ee;
  border-radius: 50%;
}
.myreading .history .book_list + .month {
  margin-top: 40px;
}
.myreading .history .last_year_status {
  margin: 20px 0;
  background: #f9f9f9;
  border-radius: 20px;
}
.myreading .history .last_year_status > .row > .col6 {
  padding: 30px;
  background: none !important;
}
.myreading .history .last_year_status > h3 {
  padding: 30px 0 0 !important;
  font-size: 30px !important;
}
.myreading .history .last_year_status > h3 span {
  display: inline-block;
  padding-left: 50px;
  background: url("../images/common/title_icon09.png") no-repeat 0% 0%;
  background-size: 40px;
}
.myreading .history .book_info .writer,
.myreading .history .book_info .pb_company {
  font-size: 14px;
}

/* 마이페이지 > 작가와의만남 */

/* 마이페이지 > 관심도서 */
.myreading_wishbook .wishbook .box {
  margin-bottom: 60px;
  padding: 30px;
  background: #f9f9f9;
  border-radius: 20px;
}
.myreading_wishbook .wishbook .box .desc {
  font-size: 20px;
}
.myreading_wishbook .wishbook .btn_excel {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid #3bb04d;
}
.myreading_wishbook .wishbook .btn_excel strong {
  display: inline-block;
  padding-left: 30px;
  background: url("../images/common/excel_icon.png") no-repeat 0% 50%;
}
.myreading_wishbook .wishbook .btn_wish_cancel {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: 30px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  background: #e13959;
  border-radius: 50%;
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
}

/* 이용약관, 개인정보처리방침 */
.policy h3 {
  margin-bottom: 30px;
  padding-bottom: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}
.policy h4 {
  padding: 20px 0 20px;
  font-size: 20px;
}
.policy p {
  padding-bottom: 15px;
}
.policy ul li {
  padding-bottom: 15px;
}
.policy ul li p {
  padding-top: 15px;
}
.policy ul li p + p {
  padding-top: 0;
}

@media screen and (max-width: 1280px) {
  .subpage .section {
    padding: 40px 0;
  }
  .subpage h2 {
    font-size: 32px;
  }
  .subpage h3 {
    font-size: 32px;
  }

  .school_recommend .sub_header:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(211, 252, 254, 0.5);
  }
  .school_recommend .sub_header h2 {
    position: relative;
    z-index: 1;
  }
  .school_recommend .sub_header .btn_wrap {
    z-index: 1;
  }
  .school_recommend .section .inner {
    background-size: 960px auto;
  }
  .school_recommend .cont_wrap {
    height: 400px;
  }
  .school_recommend .cont_wrap .book_area a {
    width: 200px;
  }
  .school_recommend .cont_wrap .book_area .book_cover {
    min-height: 150px;
  }
  .school_recommend .cont_wrap .book_area .book_cover img {
    max-width: 150px;
    max-height: 150px;
    min-height: auto;
  }
  .school_recommend .cont3 {
    height: 335px;
  }
  .school_recommend .cont1 h3 {
    top: 60px;
  }
  .school_recommend .cont2 h3 {
    top: 20px;
  }
  .school_recommend .cont3 h3 {
    top: -35px;
  }
  .school_recommend .cont1 .book_area {
    top: 170px;
  }
  .school_recommend .cont2 .book_area {
    top: 130px;
  }
  .school_recommend .cont3 .book_area {
    top: 70px;
  }

  .find_book .title_area h3 {
    font-size: 24px;
  }
  .find_book .title_area h3 span {
    padding-left: 40px;
    background-size: auto 30px;
  }

  .list_page h3 {
    font-size: 24px;
  }
  .list_page h3 span {
    padding-left: 40px;
    background-size: auto 30px;
  }

  .book_intro h3 {
    font-size: 24px;
  }
  .book_intro h3 span {
    padding-left: 40px;
    background-size: auto 30px;
  }
  .book_intro .notice_box div {
    padding: 10px 0 10px 100px;
    background-position: 10px 50%;
    background-size: auto 100px;
  }

  .reading_test .test_btn_area .col4 {
    padding: 20px 30px 0;
  }
  .reading_test .test_btn_area .badge {
    left: 10px;
  }
  .reading_test .controls {
    margin-top: 40px;
  }

  .join h2 span {
    padding-left: 50px;
    background-size: 40px;
  }

  .mypage h2 span {
    padding-left: 50px;
    background-size: 40px;
  }
  .mypage .inner_wrap .user_info_area {
    float: none;
    width: 580px;
    margin: 0 auto;
  }
  .mypage .inner_wrap .user_info_area .user_notice {
    margin-top: 40px;
  }


  .mypage .reading_history .select_date {
    margin-top: 30px;
    padding: 0;
  }
  .mypage .reading_history .input_wrap {
    padding: 0 20px;
  }
  .mypage .reading_history .btn_submit,
  .mypage .reading_history .btn_cancel {
    position: relative;
    bottom: auto;
    right: auto;
    margin: 10px 5px 0;
  }

  .mypage .inner_wrap .apple_tree {
    float: none;
    margin-top: 20px !important;
  }

  .mypage .print_viewer {
    padding: 0 20px;
  }
}

@media screen and (max-width: 1024px) {
  .meeting_writer .activity .box {
    padding: 20px;
  }
  .meeting_writer .activity .box .desc {
    float: none;
    width: 100%;
    padding: 20px 0 20px 100px;
    text-align: left;
    background-size: auto 80px;
    background-position: 20px 50%;
    font-size: 20px;
  }
  .meeting_writer .activity .box ul {
    float: none;
    width: 100%;
  }
  .meeting_writer .activity .box ul li img {
    max-width: 100%;
    max-height: none;
    min-width: 0;
  }

  .school_recommend .section .inner {
    background: url("../images/contents/recommend_bg_m.png") no-repeat 50% 0%;
    background-size: 720px auto;
  }
  .school_recommend .cont_wrap {
    height: 370px;
  }
  .school_recommend .cont_wrap h3 {
    font-size: 24px;
  }
  .school_recommend .cont_wrap .book_area a {
    width: 180px;
  }
  .school_recommend .cont3 {
    height: 355px;
  }
  .school_recommend .cont1 h3 {
    top: 45px;
  }
  .school_recommend .cont2 h3 {
    top: 15px;
  }
  .school_recommend .cont3 h3 {
    top: -10px;
  }
  .school_recommend .cont1 .book_area {
    top: 130px;
  }
  .school_recommend .cont2 .book_area {
    top: 110px;
  }
  .school_recommend .cont3 .book_area {
    top: 80px;
  }
  .school_recommend .book_info .title {
    font-size: 16px;
  }

  .guide_box div {
    padding-left: 150px;
    background-position: 0% 50% !important;
  }

  .book_intro .related_books ul li {
    width: 33.3%;
  }
  .book_intro .related_books ul li:nth-child(4) {
    clear: left;
  }

  .activity_list._report .cont_area {
    padding: 20px;
  }
  .activity_list._report .cont_area .cont_wrap {
    padding: 20px 10px;
    border-radius: 10px;
  }
  .activity_list._report .cont_area .cont {
    min-height: 0;
    padding-left: 10px;
  }

  .activity_list._picture .cont_area.best {
    padding: 60px 40px 40px;
  }
  .activity_list._picture .cont_area.best .cont:after {
    top: -60px;
    height: 70px;
    background-size: auto 70px;
  }

  .activity_list._video .cont_area {
    padding: 0 60px;
  }
  .activity_list._video .cont_area.best {
    padding: 30px 60px;
  }
  .activity_list._video .cont_area iframe {
    height: 300px;
  }

  .create .create_btn .btn {
    font-size: 20px;
  }
  .create_report .open_yn {
    font-size: 20px;
  }
  .create_video .input_check {
    font-size: 20px;
  }

  .list_page .tab_menu {
    padding-bottom: 60px;
  }
  .list_page .tab_menu:before {
    top: 66px;
  }
  .list_page .tab_menu ul li a {
    padding: 0 30px;
  }
  .list_page .tab_menu .select_wrap {
    top: 90px;
  }

  .reading_test .test_btn_area .col4 {
    padding: 20px 20px 0;
  }
  .reading_test .test_btn a {
    padding: 30px 0;
  }
  .reading_test .test_btn .title strong {
    font-size: 30px;
  }
  .reading_test .test_btn .title span {
    font-size: 18px;
  }
  .reading_test .test_btn .icon {
    height: 60px;
    margin: 20px 0 15px;
    background-size: contain !important;
  }
  .reading_test .test_btn .text_btn {
    font-size: 20px;
  }
  .reading_test .test_btn .text_btn .arrow {
    padding-right: 20px;
    background-size: auto 14px;
  }
  .reading_test .test_btn_area .badge {
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
  }
  .reading_test .report_wrap .title_area .title {
    font-size: 24px;
  }
  .reading_test .report_wrap .title_area .title:before {
    background-size: 24px auto;
  }
  .reading_test .report_wrap .cont_area {
    padding: 0 20px;
  }
  .reading_test .report_wrap .cont_inner {
    padding: 30px 0;
  }
  .reading_test .report_wrap .title_wrap .icon {
    width: 40px;
    height: 40px;
    margin-right: 15px;
  }
  .reading_test .report_wrap .title_wrap span {
    font-size: 22px;
  }
  .reading_test .report_wrap .title_wrap strong {
    font-size: 22px;
  }
  .reading_test .report_wrap .title_wrap strong:after {
    height: 10px;
  }
  .reading_test .report_wrap .title_area .date {
    font-size: 14px;
  }
  .reading_test .test_guide {
    width: 100%;
  }
  .reading_test .test_guide .type .title {
    padding-top: 70px;
    font-size: 24px;
    background-size: auto 60px !important;
  }
  .reading_test .test_guide .type ul {
    margin-top: 15px;
  }
  .reading_test .infographic {
    width: 100%;
    padding: 30px 30px 0;
  }
  .reading_test .step_area .type_wrap .type {
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
    font-size: 24px;
  }
  .reading_test .step_area .type_wrap .type + .type {
    margin-left: 70px;
  }
  .reading_test .step_area .type_wrap .type + .type:before {
    left: -55px;
    width: 40px;
  }
  .reading_test .step_area .step_wrap {
    margin-top: 30px;
  }
  .reading_test .step_area .step_wrap .step {
    font-size: 16px;
  }
  .reading_test .step_area .step_wrap .step + .step {
    margin-left: 50px;
  }
  .reading_test .step_area .step_wrap .step + .step:before {
    left: -35px;
    width: 20px;
  }
  .reading_test .question_area {
    padding: 40px 20px;
  }
  .reading_test .controls {
    margin-top: 40px;
  }

  /* .find_book .search_option_area .row1 {display:block;}
	.find_book .search_option_area .row1 .col6 {display:block; width:100%;}
	.find_book .search_option_area .option {padding:0;}
	.find_book .search_option_area .grade_option {padding:20px 0 0;} */

  .modal.user_notice .modal_cont {
    max-width: 700px;
  }

  .mypage .inner_wrap > .row > .col6 {
    float: none;
    width: calc(100% - 20px);
  }
  

  .mypage .reading_status,
  .mypage .activity_status,
  .mypage .reading_history,
  .mypage .reading_history .select_date {
    margin-top: 20px;
    padding-right: 100px;
  }
  .mypage .reading_history .input_wrap {
    padding-right: 100px;
  }
  .mypage .reading_history .btn_submit {
    position: absolute;
    top: 0;
    right: 100px;
    margin: 0;
  }
  .mypage .reading_history .btn_cancel {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
  }

  .myreading .history .year {
    font-size: 24px;
  }
  .myreading .history .month {
    font-size: 18px;
  }
  .myreading .history .last_year_status > .row > .col6 {
    float: none;
    width: 100%;
    height: auto;
  }
  .myreading .history .last_year_status > .row > .col6 + .col6 {
    padding-top: 0;
  }

  .myreading_wishbook .wishbook .box {
    margin-bottom: 40px;
  }
  .myreading_wishbook .wishbook .box .desc {
    font-size: 18px;
  }
}

@media screen and (max-width: 768px) {
  .subpage .section {
    padding: 40px 0;
  }
  .subpage h2 {
    padding-bottom: 20px;
    font-size: 24px;
  }
  .subpage h3 {
    padding-bottom: 20px;
    font-size: 24px;
  }
  .subpage h4 {
    padding-bottom: 5px;
    font-size: 18px;
  }

  .meeting_writer .activity .title_wrap h4 {
    margin-right: 10px;
    font-size: 20px;
  }
  .meeting_writer .activity .title_wrap .btn {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
  }
  .meeting_writer .activity .title_wrap .btn strong {
    padding-left: 25px;
    background-size: auto 14px;
  }
  .meeting_writer .activity .box {
    margin-top: 10px;
  }
  .meeting_writer .activity .box ul li {
    float: none;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 10px 5px;
  }

  .school_recommend .sub_header {
    background-size: 320px auto;
    background-position: 100% 100%;
    max-height: 386px;
  }
  .school_recommend .sub_header .btn_wrap {
    width: 100%;
    padding-top: 0;
  }
  .school_recommend .sub_header .btn_wrap .btn {
    display: block;
    max-width: 200px;
    margin: 10px auto 0;
  }
  .school_recommend .section .inner {
    background: url("../images/contents/recommend_bg_m2.png") no-repeat 50% 0%;
    background-size: 400px auto;
  }
  .school_recommend .cont_wrap {
    height: 260px;
  }
  .school_recommend .cont_wrap h3 {
    padding: 10px 15px;
    font-size: 20px;
  }
  .school_recommend .cont_wrap .book_area a {
    width: 100px;
    padding: 0;
  }
  .school_recommend .cont_wrap .book_area .book_cover {
    min-height: 100px;
  }
  .school_recommend .cont_wrap .book_area .book_cover img {
    max-width: 70px;
    max-height: 100px;
  }
  .school_recommend .cont_wrap .book_area .book_info {
    display: none;
  }
  .school_recommend .cont_wrap .book_cover .workbook {
    display: none;
  }
  .school_recommend .cont3 {
    height: 224px;
  }
  .school_recommend .cont1 h3 {
    top: 22px;
  }
  .school_recommend .cont2 h3 {
    top: -4px;
  }
  .school_recommend .cont3 h3 {
    top: -28px;
  }
  .school_recommend .cont1 .book_area {
    top: 95px;
  }
  .school_recommend .cont2 .book_area {
    top: 75px;
  }
  .school_recommend .cont3 .book_area {
    top: 45px;
  }

  .no_data {
    padding: 20px 0;
  }
  .no_data p {
    font-size: 18px;
  }

  .guide_box {
    margin-bottom: 40px;
  }
  .guide_box .inner > div {
    background-position: 50% 0% !important;
    padding: 100px 0 0 0;
  }
  .bullet_list li {
    padding-left: 12px;
  }

  .book_intro h3 {
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-size: 20px;
  }
  .book_intro h3 span {
    padding-left: 35px;
    background-size: auto 25px;
  }
  .book_intro .notice_box {
    margin-bottom: 40px;
  }
  .book_intro .notice_box div {
    padding: 0;
    background: none;
  }
  .book_intro .notice_box h4 {
    padding: 10px 0 10px 40px;
    background: url("../images/common/rabbit_icon01.png") no-repeat 0% 0%;
    background-size: auto 40px;
  }
  .book_intro .related_books ul li {
    width: 50%;
  }
  .book_intro .related_books ul li:nth-child(4) {
    clear: none;
  }
  .book_intro .related_books ul li:nth-child(odd) {
    clear: left;
  }

  .book_debate .sort_custom {
    margin-top: 30px;
  }
  .book_debate .sort_custom li + li:before {
    margin-top: -6px;
    height: 12px;
  }
  .book_debate .sort_custom li .sort {
    font-size: 14px;
  }
  .book_debate .reply_group .text {
    font-size: 18px;
  }
  .book_debate .reply_group .reply_btn {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
  }
  .book_debate .reply_write .title {
    width: 150px;
    height: 40px;
    line-height: 40px;
  }
  .book_debate .reply_write .input_wrap {
    width: calc(100% - 150px);
  }
  .book_debate .reply_write .input_wrap input {
    width: calc(100% - 60px);
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
  }
  .book_debate .reply_write .input_wrap .btn {
    width: 60px;
  }
  .book_debate .reply_inner .reply_write {
    margin: 10px 0;
  }
  .book_debate .reply_inner .reply_write .title {
    width: 90px;
  }
  .book_debate .reply_inner .reply_write .input_wrap {
    width: calc(100% - 90px);
  }
  .book_debate .reply_write._edit .title {
    width: 60px;
  }
  .book_debate .reply_write._edit .input_wrap {
    width: calc(100% - 60px);
  }
  .book_debate .reply_group .reply.in_btn {
    padding-right: 20px;
    padding-bottom: 60px;
  }

  .readingActivityItem {
    padding: 24px 0;
  }
  .activity_list .row > div {
    float: none;
    width: 100%;
  }
  .activity_list .book_wrap {
    margin: 0 0 20px;
  }
  .activity_list .book_wrap a {
    display: inline-block;
    vertical-align: top;
  }
  .activity_list .book_wrap .book_info {
    display: inline-block;
    vertical-align: top;
    padding: 0 0 0 15px;
  }
  .activity_list .book_wrap.good .book_info .writer,
  .activity_list .book_wrap.good .book_info .pb_company,
  .activity_list .book_wrap.best .book_info .writer,
  .activity_list .book_wrap.best .book_info .pb_company {
    display: none;
  }
  .activity_list .book_wrap .stamp {
    margin-top: 10px;
  }
  .activity_list .book_wrap .stamp._pc {
    display: none;
  }
  .activity_list .book_wrap .stamp._mobile {
    display: block;
  }
  .activity_list .book_wrap .stamp.good img {
    width: 60px;
    height: auto;
  }
  .activity_list .book_wrap .stamp.best img {
    width: 70px;
    height: auto;
  }
  .activity_list .title_area .name {
    font-size: 18px;
  }
  .activity_list .title_area .school {
    font-size: 14px;
  }
  .activity_list .title_area .date {
    font-size: 13px;
  }

  .reply_area .input_wrap input {
    width: calc(100% - 80px);
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
  }
  .reply_area .input_wrap .btn {
    width: 80px;
  }
  .reply_area .reply .btn_wrap .btn {
    padding: 0 10px;
    font-size: 14px;
  }
  .reply_area .reply .btn_wrap .btn_delete:before {
    margin-top: -7px;
    height: 14px;
  }

  .activity_list._picture .cont_area {
    padding: 0 20px;
  }
  .activity_list._picture .cont_area .cont {
    padding: 10px;
  }
  .activity_list._picture .cont_area.best {
    padding: 40px 20px 30px;
  }
  .activity_list._picture .cont_area.best .cont:after {
    top: -40px;
    height: 46px;
    background-size: auto 46px;
  }

  .activity_list._video .cont_area {
    padding: 0 30px;
  }
  .activity_list._video .cont_area.best {
    padding: 22px 30px;
  }
  .activity_list._video .cont_area iframe {
    height: 200px;
  }

  .create .cont_row {
    margin-top: 40px;
  }
  .create .create_btn .btn {
    font-size: 16px;
  }

  .quiz .answer_area .answer {
    margin: 0 5px;
  }
  .quiz .answer_area .btn_reset {
    margin-left: 120px;
  }
  .quiz .question_area {
    margin: 30px 0;
    padding: 0 0 0 70px;
    background-size: 60px auto;
  }
  .quiz .question_area .question {
    font-size: 22px;
  }
  .quiz .examples {
    border-width: 5px;
  }
  .quiz .examples._cell4 {
    width: 260px;
  }
  .quiz .examples._cell5 {
    width: 320px;
  }
  .quiz .examples .cell {
    width: 50px;
    height: 50px;
    line-height: 50px;
  }
  .quiz .examples .cell .content {
    font-size: 22px;
  }

  .create_report .create_report_area {
    padding: 70px 40px 50px;
  }
  .create_report .create_report_area textarea {
    height: 300px;
  }
  .create_report .create_report_area textarea::-webkit-input-placeholder {
    padding-top: 80px;
    font-size: 20px;
  }
  .create_report .create_report_area textarea::-ms-input-placeholder {
    padding-top: 80px;
    font-size: 20px;
  }
  .create_report .create_report_area textarea::-moz-input-placeholder {
    padding-top: 80px;
    font-size: 20px;
  }
  .create_report .open_yn {
    font-size: 16px;
  }
  .create_report .open_yn h4:after {
    margin-top: -8px;
    height: 16px;
  }

  .create_video .create_video_area {
    padding: 280px 0 0;
    background-position: 0% 0%;
  }
  .create_video .create_video_area input[type="text"] {
    padding: 5px 10px;
  }
  .create_video .guide_box._upload ul {
    padding-left: 0;
  }
  .create_video .guide_box._upload ul li {
    padding-left: 22px;
  }
  .create_video .input_check {
    font-size: 16px;
  }
  /* 
	.find_book .title_area h3 {margin-bottom:20px; padding-bottom:10px; font-size:20px;}
	.find_book .title_area h3 span {padding-left:35px; background-size:auto 25px;}
	.find_book .search_option_area {padding:40px 0;}
	.find_book .search_option_area .check_btn {text-align:left;}
	.find_book .search_option_area .check_btn .btn {margin:5px 10px; padding-left:20px;}
	.find_book .search_option_area .check_btn .btn:before {margin-top:-7px; width:14px; height:14px; background-size:10px auto;}
	.find_book .search_option_area .check_btn .btn.on:before {background-size:10px auto;}
	.find_book .search_area {height:40px; line-height:40px;}
	.find_book .search_area .search_btn {width:40px; height:40px; background-size:auto 30px;}
	.find_book .title_area {text-align:center;}
	.find_book .title_area h3 {padding-bottom:10px;}
	.find_book .title_area h3 span {padding-left:40px; background-size:auto 30px;}
	.find_book .title_area .btn {height:30px; line-height:30px; padding:0 12px; font-size:14px;}
	.find_book .title_area .btn .arrow {padding-right:10px; background-size:auto 10px;} */

  .list_page .sub_header .inner {
    padding: 0 20px;
    background: none !important;
  }
  .list_page .sub_header .v_align {
    padding: 30px 0;
  }
  .list_page h3 {
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-size: 20px;
  }
  .list_page h3 span {
    padding-left: 35px;
    background-size: auto 25px;
  }
  .list_page .tab_menu:before {
    top: 56px;
  }
  .list_page .tab_menu ul li a {
    font-size: 20px;
  }
  .list_page .tab_menu ul li.tab2 a span {
    padding-left: 35px;
    background-size: auto 25px;
  }
  .list_page .tab_menu .select_wrap {
    top: 80px;
  }

  .reading_test .test_btn_area {
    margin-top: 0;
  }
  .reading_test .test_btn_area .col4 {
    width: 100%;
    padding: 10px 10px 0;
  }
  .reading_test .test_btn a {
    padding: 20px 0;
  }
  .reading_test .test_btn .title strong {
    font-size: 24px;
  }
  .reading_test .test_btn .title span {
    font-size: 14px;
  }
  .reading_test .test_btn .icon {
    height: 50px;
    margin: 20px 0 15px;
  }
  .reading_test .test_btn .text_btn {
    opacity: 0.6;
  }
  .reading_test .test_btn_area .badge {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }
  .reading_test .test_btn_area .date {
    font-size: 14px;
  }
  .reading_test .report_wrap {
    margin-top: 40px;
  }
  .reading_test .report_wrap .title_area {
    padding: 15px 20px;
  }
  .reading_test .report_wrap .title_wrap .icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
  .reading_test .test_guide .type {
    width: 100%;
    padding: 0;
  }
  .reading_test .test_guide .type1 {
    padding-bottom: 20px;
  }
  .reading_test .test_guide .type2 {
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid #ddd;
  }

  .reading_test .step_area .type_wrap .type {
    height: 45px;
    line-height: 45px;
    font-size: 20px;
  }
  .reading_test .step_area .type_wrap .type + .type {
    margin-left: 50px;
  }
  .reading_test .step_area .type_wrap .type + .type:before {
    left: -40px;
    width: 30px;
  }
  .reading_test .step_area .step_wrap .step + .step {
    display: block;
    margin: 15px 0 0;
  }
  .reading_test .step_area .step_wrap .step + .step:before {
    display: none;
  }
  .reading_test .question_area .question_nav span {
    width: 25px;
    height: 25px;
    line-height: 26px;
    font-size: 12px;
  }
  .reading_test .question_area {
    padding: 30px 20px;
  }
  .reading_test .question_area .question {
    margin: 25px 0;
  }
  .reading_test .question_area .question .text {
    padding-left: 45px;
    font-size: 18px;
  }
  .reading_test .question_area .question .num {
    width: 35px;
    height: 35px;
    line-height: 36px;
  }
  .reading_test .controls {
    margin-top: 20px;
  }
  .reading_test .controls .btn {
    margin: 0 5px;
    padding: 0 20px;
  }

  .reading_test.test_end .title_area div img {
    width: auto;
    height: 80px;
  }
  .reading_test.test_end .title_area .desc {
    font-size: 18px;
  }
  .reading_test.test_end .btn {
    margin-top: 40px;
  }

  .login .login_box {
    width: 100%;
    height: auto;
    padding: 40px;
    border-radius: 50px;
  }
  .login .login_box .v_align {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    padding: 0;
  }
  .login .login_box .btn {
    font-size: 20px;
  }
  .login .join_btn {
    position: relative;
    top: auto;
    left: auto;
    margin: 20px 40px 0;
    width: calc(100% - 80px);
    height: 50px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    box-shadow: none;
    font-size: 18px;
  }
  .login .join_btn span {
    padding: 0 0 0 35px;
    background-position: 0% 50%;
    background-size: auto 24px;
  }
  .login .guide_box {
    max-width: 100%;
    padding: 20px;
    border-radius: 20px;
  }
  .login .guide_box ul li {
    font-size: 14px;
  }

  .join h2 span {
    padding-left: 40px;
    background-size: auto 30px;
  }
  .join .join_input_area {
    padding: 30px 20px;
  }
  .join .join_input_area h4 {
    padding-bottom: 10px;
  }
  .join .join_input_area input[type="text"],
  .join .join_input_area input[type="password"],
  .join .join_input_area input[type="number"] {
    padding: 10px 10px;
  }
  .join .join_input_area .input_radio input[type="radio"] + label {
    margin-top: 5px;
  }
  .join .join_input_area .row .col4 {
    width: 100%;
  }
  .join .join_input_area .row .col4 + .col4 {
    margin: 20px 0 0;
  }
  .join .join_input_area .desc {
    font-size: 14px;
  }
  .join .btn_area {
    margin-top: 20px;
  }
  .join .btn_area .btn {
    width: auto;
    min-width: 100px;
    margin: 0 2px;
  }

  .mypage h2 span {
    padding-left: 40px;
    background-size: auto 30px;
  }

  .mypage .inner_wrap .user_info_area .box {
    width: 100%;
  }
  .mypage .inner_wrap .user_info_area .user_notice {
    margin-top: 30px;
  }
  .mypage h3 {
    font-size: 20px !important;
  }
  .mypage h3 span {
    padding-left: 35px;
    background-size: auto 25px !important;
  }

  .modal .modal_cont {
    max-width: 90% !important;
    padding: 30px 20px;
  }
  .modal .modal_cont h3 {
    font-size: 24px;
  }
  .modal .modal_tab_menu ul li {
    height: 40px;
    line-height: 40px;
    font-size: 18px;
  }
  .modal .btn_area .btn {
    min-width: 100px;
  }
  .modal.user_info .modal_cont h3 span {
    padding-left: 35px;
    background-size: 25px;
  }
  .modal.user_notice .modal_cont h3 span {
    padding-left: 35px;
    background-size: 25px;
  }
  .modal.user_notice .btn_close {
    top: -15px;
    right: -15px;
    width: 50px;
    height: 50px;
  }
  .modal.user_notice .btn_close span:nth-child(1) {
    top: 14px;
  }
  .modal.user_notice .btn_close span:nth-child(2) {
    top: 34px;
  }

  .modal .tbl_wrap table thead {
    display: none;
  }
  .modal .tbl_wrap table tbody tr {
    display: block;
    padding: 10px 0;
  }
  .modal .tbl_wrap table tbody td {
    display: block;
    padding: 0 20px;
    text-align: left;
    color: #888;
    font-size: 14px;
  }

  .modal .tbl_wrap table tbody td.desc {
    color: #333;
    font-size: 16px;
  }
  .modal .tbl_wrap table tbody tr:nth-child(odd) {
    background: #e6f7f6;
  }
  .modal .tbl_wrap table tbody tr:nth-child(even) {
    background: #f9f9f9;
  }

  .mypage .user_info_area .info div:before {
    font-size: 22px;
  }
  .mypage .user_info_area .info p {
    font-size: 18px;
  }
  .mypage .user_info_area .info .user_id p {
    font-size: 18px;
    color: #666;
  }
  .mypage .user_info_area .info .user_id strong {
    font-size: 22px;
  }
  .mypage .user_info_area .level p {
    font-size: 18px;
  }


  .mypage .user_notice ul li {
    font-size: 14px;
  }
  .mypage .user_notice ul li + li {
    margin-top: 10px;
  }
  .mypage .user_notice ul li .date {
    display: none;
    width: 0;
  }
  .mypage .user_notice ul li .category {
    padding-left: 0;
  }

  /* .mypage .apple_tree .tree_wrap {width:280px; height:262px;} */

  .mypage .reading_history .select_date {
    margin-top: 20px;
    padding-right: 80px;
  }
  .mypage .reading_history .input_wrap {
    height: 40px;
    line-height: 40px;
    padding-right: 80px;
  }
  .mypage .reading_history .input_wrap input {
    height: 40px;
    line-height: 40px;
  }
  .mypage .reading_history .btn_submit {
    right: 80px;
  }

  .mypage .activity_status .row > div {
    float: none;
    width: 100%;
  }
  .mypage .activity_status .col6 {
    padding: 20px 0;
  }
  .mypage .activity_status .v_align {
    padding: 0;
  }
  .mypage .activity_status ul li .data {
    padding-left: 40px;
  }

  .myreading .history .year {
    margin-top: 30px;
    font-size: 20px;
  }
  .myreading .history .month {
    margin-bottom: 20px;
    font-size: 16px;
  }
  .myreading .history .book_list + .month {
    margin-top: 30px;
  }
  .myreading .history .last_year_status {
    margin-top: 20px;
  }
  .myreading .history .last_year_status > .row > .col6 {
    padding: 20px;
  }
  .myreading .history .last_year_status > h3 {
    font-size: 24px !important;
  }
  .myreading .history .last_year_status > h3 span {
    padding-left: 40px;
    background-size: 30px !important;
  }

  .myreading_wishbook .wishbook .box {
    margin-bottom: 30px;
    padding: 20px;
  }
  .myreading_wishbook .wishbook .box .desc {
    font-size: 16px;
  }
  .myreading_wishbook .wishbook .btn_excel {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    margin-top: 10px;
  }
}

@media screen and (max-width: 480px) {
  .meeting_writer .activity .title_wrap {
    text-align: left;
  }

  .school_recommend .section .inner {
    background-size: 300px auto;
  }
  .school_recommend .cont_wrap {
    height: 190px;
  }
  .school_recommend .cont_wrap h3 {
    padding: 10px 15px;
    font-size: 20px;
  }
  .school_recommend .cont_wrap .book_area a {
    width: 80px;
  }
  .school_recommend .cont_wrap .book_area .book_cover {
    min-height: 90px;
  }
  .school_recommend .cont_wrap .book_area .book_cover img {
    max-height: 90px;
  }
  .school_recommend .cont_wrap h3 {
    font-size: 18px;
  }
  .school_recommend .cont3 {
    height: 177px;
  }
  .school_recommend .cont1 h3 {
    top: 13px;
  }
  .school_recommend .cont2 h3 {
    top: 0px;
  }
  .school_recommend .cont3 h3 {
    top: -17px;
  }
  .school_recommend .cont1 .book_area {
    top: 60px;
  }
  .school_recommend .cont2 .book_area {
    top: 45px;
  }
  .school_recommend .cont3 .book_area {
    top: 30px;
  }

  .book_debate .reply_write .title {
    float: none;
    width: 100%;
  }
  .book_debate .reply_write .input_wrap {
    float: none;
    width: 100%;
    margin-top: 5px;
    padding: 0;
  }
  .book_debate .reply_inner .reply_write .title {
    display: none;
  }
  .book_debate .reply_inner .reply_write .input_wrap {
    width: 100%;
  }
  .book_debate .reply_group .reply_inner {
    padding: 20px 0;
  }
  .book_debate .reply_group .write_btn {
    display: block;
    margin: 5px 0 0;
  }
  .book_debate .reply_write._edit .input_wrap {
    width: 100%;
  }
  .book_debate .reply_write._edit .title {
    display: none;
  }

  .create_report .create_report_area {
    padding: 50px 20px 40px;
  }
  .create_report .create_report_area textarea {
    height: 240px;
  }
  .create_report .create_report_area textarea::-webkit-input-placeholder {
    padding-top: 60px;
    font-size: 18px;
  }
  .create_report .create_report_area textarea::-ms-input-placeholder {
    padding-top: 60px;
    font-size: 18px;
  }
  .create_report .create_report_area textarea::-moz-input-placeholder {
    padding-top: 60px;
    font-size: 18px;
  }

  .list_page .tab_menu ul li {
    padding: 0;
  }
  .list_page .tab_menu ul li a {
    padding: 0 10px;
    font-size: 16px;
  }

  .login .login_box {
    padding: 40px 30px;
  }
  .login .join_btn {
    margin: 20px 30px 0;
    width: calc(100% - 60px);
  }

  .mypage .user_info_area .row > div {
    width: 100%;
  }
  .mypage .user_info_area .level {
    margin-top: 20px;
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid #ddd;
  }


  .mypage .reading_history .select_date {
    padding: 0;
  }
  .mypage .reading_history .input_wrap {
    padding: 0 10px;
  }
  .mypage .reading_history .input_wrap span {
    width: 20px;
  }
  .mypage .reading_history .btn_submit,
  .mypage .reading_history .btn_cancel {
    position: relative;
    bottom: auto;
    right: auto;
    margin: 10px 5px 0;
  }
  .mypage .print h3 {
    font-size: 18px !important;
  }
}

@media screen and (max-width: 400px) {
  .reading_test .report_wrap .title_area .title {
    font-size: 20px;
  }
  .reading_test .report_wrap .title_area .title:before {
    background-size: 20px auto;
  }
  .reading_test .report_wrap .title_area .date {
    left: 10px;
    font-size: 12px;
  }
  .reading_test .controls .btn {
    margin: 0;
  }
}