@charset "utf-8";

@font-face {
    font-family: 'JalnanGothic';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {letter-spacing: -0.03em; line-height: 1.3; color: #141212; font-family: "Pretendard Variable",'Pretendard', serif;}
img {background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important;}
.seleted {cursor: pointer;}
.disabled {cursor: default;}

.color {width: 38px; height: 38px; font-size: 24px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.color01 {background: #f2f0e4;}
.color02 {background: #e6ede9;}
.color03 {background: #fce8e0;}
.color04 {background: #f8e1e7;}
.color05 {background: #e6f3f1;}
.color06 {background: #fdf6e3;}
.color07 {background: #f3e8dc;}
.color08 {background: #dbe4e1;}
.color09 {background: #ede0ec;}
.color010 {background: #f1f2df;}

.reading_page {position: relative;}
.reading_page .main_page {width: 100vw; height: 100vh; padding-top: 200px; background: url("../images/contents/page_bg.png") no-repeat center / cover;}
.reading_page .main_page .title {font-size: 63px; margin-bottom: 40px; color: #867c72 ;
    font-family: 'JalnanGothic', serif; display: flex; justify-content: center; align-items: baseline; gap: 14px;}
.reading_page .main_page .title p {font-size: 50px; font-weight: inherit; font-family: inherit; color: #a58c6f ;}
.reading_page .main_page .title i {width: 42px; height: 42px; background: url("../images/icon/i_arrow_play_jp.svg") no-repeat center / contain; align-self: center;}
.reading_page .main_page .contents {padding: 110px 0; background: #f8f8f6  ;}
.reading_page .main_page .contents ul {display: flex; flex-wrap: wrap; gap: 8px;}
.reading_page .main_page .contents ul li {width: calc(50% - 4px); border: 2px solid #fff; font-size: 25px; font-weight: bold; border-radius: 34px; overflow: hidden; box-shadow: 0px 0px 18px rgba(172, 193, 218, 0.14); background: #fff; transition: 0.25s;}
.reading_page .main_page .contents ul li a {padding: 40px 28px; transition: 0.3s; display: flex; align-items: center; gap: 13px;}
.reading_page .main_page .contents ul li:nth-child(1):hover {border-color: #ccc7b3; background: #f2f0e4;}
.reading_page .main_page .contents ul li:nth-child(2):hover {border-color: #d0d6cf; background: #e6ede9;}
.reading_page .main_page .contents ul li:nth-child(3):hover {border-color: #e4b4a2; background: #fce8e0;}
.reading_page .main_page .contents ul li:nth-child(4):hover {border-color: #e3b2c1; background: #f8e1e7;}
.reading_page .main_page .contents ul li:nth-child(5):hover {border-color: #a5cfc8; background: #e6f3f1;}
.reading_page .main_page .contents ul li:nth-child(6):hover {border-color: #e7cf9c; background: #fdf6e3;}
.reading_page .main_page .contents ul li:nth-child(7):hover {border-color: #cdb8a2; background: #f3e8dc;}
.reading_page .main_page .contents ul li:nth-child(8):hover {border-color: #9fb8b2; background: #dbe4e1;}
.reading_page .main_page .contents ul li:nth-child(9):hover {border-color: #caa7c6; background: #ede0ec;}
.reading_page .main_page .contents ul li:nth-child(10):hover {border-color: #d7d9b0; background: #f1f2df;}


.reading_page .contents_page {display: none; width: 100vw; height: 100vh; padding-top: 180px; background: url("../images/contents/page_bg.png") no-repeat center / cover;}
.reading_page .contents_page .title h3 {font-size: 28px; margin-bottom: 16px; color: #867c72;
    font-family: 'JalnanGothic', serif;}
.reading_page .contents_page .title h4 {font-size: 30px; font-weight: bold; display: flex; align-items: center; gap: 12px;}
.reading_page .contents_page .contents {padding: 36px 0 80px;}
.reading_page .contents_page .contents ul {padding: 30px 25px; border-radius: 30px; background: #fff; display: flex; flex-direction: column; gap: 5px;}
.reading_page .contents_page .contents ul li {border-radius: 33px; transition: 0.25s;}
.reading_page .contents_page .contents ul li a {font-size: 30px; padding: 24px 30px; font-weight: 600; display: flex; align-items: center;}
.reading_page .contents_page .contents ul li span {width: 100px; font-size: 25px; font-weight: inherit;}
.reading_page .contents_page .contents .button_box {margin-top: 13px; display: flex; justify-content: end;}
.reading_page .contents_page .contents .button_box .prev_button {font-size: 20px; font-weight: bold; padding: 14px 17px 14px 19px; background: #fff; border-radius: 24px;}

.reading_page .contents_page.contents01 .contents ul li {background: #f2f0e4;}
.reading_page .contents_page.contents02 .contents ul li {background: #e6ede9;}
.reading_page .contents_page.contents03 .contents ul li {background: #fce8e0;}
.reading_page .contents_page.contents04 .contents ul li {background: #f8e1e7;}
.reading_page .contents_page.contents05 .contents ul li {background: #e6f3f1;}
.reading_page .contents_page.contents06 .contents ul li {background: #fdf6e3;}
.reading_page .contents_page.contents07 .contents ul li {background: #f3e8dc;}
.reading_page .contents_page.contents08 .contents ul li {background: #dbe4e1;}
.reading_page .contents_page.contents09 .contents ul li {background: #ede0ec;}
.reading_page .contents_page.contents010 .contents ul li {background: #f1f2df;}

.reading_page .contents_page.contents01 .contents ul li:hover {background: #ccc7b3;}
.reading_page .contents_page.contents02 .contents ul li:hover {background: #d0d6cf;}
.reading_page .contents_page.contents03 .contents ul li:hover {background: #e4b4a2;}
.reading_page .contents_page.contents04 .contents ul li:hover {background: #e3b2c1;}
.reading_page .contents_page.contents05 .contents ul li:hover {background: #a5cfc8;}
.reading_page .contents_page.contents06 .contents ul li:hover {background: #e7cf9c;}
.reading_page .contents_page.contents07 .contents ul li:hover {background: #cdb8a2;}
.reading_page .contents_page.contents08 .contents ul li:hover {background: #9fb8b2;}
.reading_page .contents_page.contents09 .contents ul li:hover {background: #caa7c6;}
.reading_page .contents_page.contents010 .contents ul li:hover {background: #d7d9b0;}

.reading_page .contents_page2 .title h4 {font-size: 25px; gap: 10px; margin-bottom: 14px;}
.reading_page .contents_page2 .title h4 .color {width: 32px; height: 32px; font-size: 20px;}
.reading_page .contents_page2 .title h5 {font-size: 33px;}
.reading_page .contents_page2 .title h5 span {font-size: 28px; margin-right: 20px;}
.reading_page .contents_page2 .contents ul {gap: 18px;}
.reading_page .contents_page2 .contents ul li {padding: 12px 36px; cursor: pointer;}
.reading_page .contents_page2 .contents ul li span {font-size: 18px; padding: 5px 7px 5px 6px; margin-bottom: 8px; font-weight: 600; border-radius: 13px; background: #fff; width: auto; display: inline-flex; white-space: nowrap;}
.reading_page .contents_page2 .contents ul li h6 {font-size: 25px; margin-bottom: 10px; font-weight: 600;}
.reading_page .contents_page2 .contents ul li p {font-size: 20px; font-weight: 600;}
.reading_page .contents_page2 .contents ul li audio {display: none; width: 100%; height: 32px; margin-top: 14px;}
.reading_page .contents_page2 .contents ul li.show audio {display: block;}
.reading_page .contents_page2 .contents .button_box {position: relative; justify-content: center; gap: 8px;}
.reading_page .contents_page2 .contents .button_box button {width: 44px; height: 44px; font-size: 20px; font-weight: 600; opacity: 30%; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.reading_page .contents_page2 .contents .button_box button.active {opacity: 100%; font-weight: 500;}
.reading_page .contents_page2 .contents .button_box .prev_button {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.reading_page .play_btn {font-size: 18px;font-weight: bold;padding: 14px 15px 14px 30px;background: #fff url('../../../images/icon/ico_play.png') no-repeat 8px center; background-size: 20px 20px; border-radius: 24px;}

@media (max-width:840px) {
    .color {width: 30px; height: 30px; font-size: 16px;}
    .reading_page {}
    .reading_page .main_page {padding-top: 30px;}
    .reading_page .main_page .title {font-size: 28px; gap: 7px; margin-bottom: 32px;}
    .reading_page .main_page .title p {font-size: 22px;}
    .reading_page .main_page .title i {width: 19px; height: 19px;}
    .reading_page .main_page .contents {padding: 40px 0; height: 100%;}
    .reading_page .main_page .contents ul {flex-direction: column;}
    .reading_page .main_page .contents ul li {width: 100%; font-size: 20px; border-radius: 18px;}
    .reading_page .main_page .contents ul li a {padding: 25px 20px; gap: 10px;}

    .reading_page .contents_page {padding-top: 20px;}
    .reading_page .contents_page .title {margin-bottom: 18px;}
    .reading_page .contents_page .title h3 {font-size: 18px; margin-bottom: 10px;}
    .reading_page .contents_page .title h4 {font-size: 20px; gap: 8px;}
    .reading_page .contents_page .contents {padding: 40px 0; /* height: 100%; */}
    .reading_page .contents_page .contents ul {padding: 22px 15px;}
    .reading_page .contents_page .contents ul li a {font-size: 15px; padding: 18px 20px;}
    .reading_page .contents_page .contents ul li span {width: 50px; font-size: 13px;}

    .reading_page .contents_page .contents .button_box .prev_button {font-size: 15px; padding: 10px 15px;}

    .reading_page .contents_page2 .title h4 {font-size: 15px; gap: 6px; margin-bottom: 9px;}
    .reading_page .contents_page2 .title h4 .color {width: 18px; height: 18px; font-size: 12px;}
    .reading_page .contents_page2 .title h5 {font-size: 20px;}
    .reading_page .contents_page2 .title h5 span {font-size: 18px;}
    .reading_page .contents_page2 .contents ul {padding: 18px 15px; border-radius: 15px; gap: 8px;}
    .reading_page .contents_page2 .contents ul li {padding: 18px 20px; border-radius: 17px;}
    .reading_page .contents_page2 .contents ul li span {width: auto; font-size: 10px; margin-bottom: 4px;}
    .reading_page .contents_page2 .contents ul li h6 {font-size: 14px; margin-bottom: 8px;}
    .reading_page .contents_page2 .contents ul li p {font-size: 12px;}
    .reading_page .contents_page2 .contents ul li audio {margin-top: 10px; height: 22px;}
    .reading_page .contents_page2 .contents .button_box  {gap: 5px;}
    .reading_page .contents_page2 .contents .button_box button {width: 33px; height: 33px; font-size: 15px;}
    .reading_page .play_btn {padding: 10px 15px 10px 30px; background-size: 15px 15px; font-size: 15px; line-height: 12px;}
    .reading_page .contents_page2 .contents .button_box .prev_button {padding: 10px 20px;}

}