/**
 * Wayplus Contents Style Sheet
 * Version. Forest Gotjawal
 */
:root {
    font-size:28px;color:var(--default-font-color);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Noto Sans Kr","Noto Sans JP","Noto Sans SC", system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

/* 페이지 레이아웃 */
.wrap {width:100%;min-height:calc(100vh - 120px);overflow:hidden;}
.contents {width:640px;height:calc(100vh - 200px);margin:0 auto;overflow-x:hidden;overflow-y:auto;padding:40px;}
.contents.full {width:720px;padding:0;height:calc(100vh - 120px);}
.contents.full-height {height:calc(100vh - 120px);}
.contents-image {text-align:center;}
.justify {width:640px;margin:0 40px;}

.round-full-btn {border-radius:40px;height:80px;width:500px;background-color:#FFFFFF;font-weight:700;line-height:80px;color:var(--thema-bg-color);margin-bottom: 20px;border:none;cursor:pointer;font-size:1rem;}
.round-full-btn.reverse {background-color:var(--thema-bg-color);color:#FFFFFF;}
.round-full-btn .with-logo {padding-left:40px;vertical-align:top;background:url("/images/forest.svg") 0 50% /30px no-repeat;}
.round-full-btn.reverse .with-logo {background:url("/images/forest.svg") 0 50% /30px no-repeat;}
.round-full-btn.kakao {background:url("/images/icons/kakaotalk.svg") 40px 50% /40px #FFFFFF no-repeat;}
.round-full-btn.google {background:url("/images/icons/google.svg") 40px 50% /40px #FFFFFF no-repeat;}
.round-full-btn.phone {background:url("/images/icons/phone.svg") 40px 50% /40px #FFFFFF no-repeat;}
.round-full-btn.login {width:100%; height:90px; background-color:var(--thema-color); color:#FFFFFF; border-radius:10px;margin-top:50px;}
.round-full-btn.filter {background-color:var(--thema-bg-color);color:#FFFFFF;border-radius:10px;width:640px;position:absolute;bottom:20px;}
.round-full-btn.comment {color:#FFFFFF;border-radius:10px;width:640px;background-color:var(--thema-bg-color);margin-top:20px;}
.round-full-btn.half-default {background-color:var(--thema-bg-color);color:#FFFFFF;border-radius:10px;width:100%;margin-top:60px;margin-bottom:150px;}
.round-full-btn.half-active {background-color:var(--thema-color);color:#FFFFFF;border-radius:10px;width:100%;margin-top:60px;margin-bottom:150px;}


/* Language Page */
.language-area {min-height:100vh;padding-top:280px;width:720px; margin:0 auto; background:url('/images/bg_language.png') center /cover no-repeat;}
.language-area .title {height: 160px; margin: 0 auto; background:url('/images/forest.svg') center /contain no-repeat;}

.language-area .language-list {margin: 0 auto;width:640px;padding:100px 0;}
.language-area .language-list .language-item {border-radius: 60px;border: 1px solid rgba(0, 0, 0, 0.7);background: rgba(0, 0, 0, 0.7);margin-bottom: 50px;height:80px;padding:20px;display:flex;}
.language-area .language-list .language-item:hover {cursor: pointer;opacity:0.9;}
.language-area .language-list .language-item .nation {width:80px;border-radius:80px;}
.language-area .language-list .language-item .nation .icon-national {width:80px;height:80px;object-fit:cover;}
.language-area .language-list .language-item .language {width:520px;font-size:32px;text-align:center;color: #FFFFFF;line-height:80px;}

/* Main Page */
.main-menus {}
.main-menus .menu-item {border-radius: 20px;width:640px;height:280px;margin-bottom:40px;padding:40px;box-sizing:border-box;color:#FFFFFF;}
.main-menus .menu-item:hover {cursor:pointer;opacity: 0.9;}
.main-menus .menu-item h4 {font-size:36px;font-weight:600;margin:0 0 20px;}
.main-menus .menu-item p {font-size:32px;font-weight:400;letter-spacing:-0.8px;margin:0;}
.main-menus .menu-item.commentary {background: url("/images/bg_commentary.png") center /cover no-repeat;}
.main-menus .menu-item.quiz {background: url("/images/bg_quiz.png") center /cover no-repeat;}
.main-menus .menu-item:last-child {margin-bottom: 0;}
.main-menus .menu-item.docent-map {background: url("/images/bg_docent_map.png") center /cover no-repeat;}
.main-menus .menu-item.docent-quiz {background: url("/images/bg_quiz.png") center /cover no-repeat;}
.sub-menus {display: grid; grid-template-columns: repeat(2, 300px);grid-column-gap:40px;grid-row-gap:40px;margin:40px auto;}
.sub-menus .menu-item {border-radius: 20px;width:300px;height:280px;box-sizing:border-box;color:#FFFFFF;text-align:center;display: flex;flex-direction: column;justify-content:center;padding:30px;word-break: keep-all;}
.sub-menus .menu-item:hover {cursor:pointer;opacity: 0.9;}
.sub-menus .menu-item h4 {font-size:36px;font-weight:600;margin:0;letter-spacing:-0.8px;}
.sub-menus .menu-item.introduce {background: url("/images/bg_introduce.png") center /cover no-repeat;}
.sub-menus .menu-item.experience {background: url("/images/bg_experience.png") center /cover no-repeat;}
.sub-menus .menu-item.map {background: url("/images/bg_maps.png") center /cover no-repeat;}
.sub-menus .menu-item.gallery {background: url("/images/bg_gallery.png") center /cover no-repeat;}

.tab-list {display:flex;justify-content:space-between; margin:0;padding-left:40px; overflow-x: auto;--ms-overflow-style:none;scrollbar-width: none;}
.tab-list::-webkit-scrollbar {display:none;}
.tab-list .tab-item {font-size:32px;padding:24px 0;margin-right: 40px;min-width: fit-content;}
.tab-list .tab-item.active {font-weight:600;color:var(--thema-color);border-bottom: 4px solid var(--thema-color);}
.tab-list .tab-item:last-child {margin-right:0;}

.tab-page {display:none;}
.tab-page.active {display:block;}
.image-container {width:720px;height:440px;overflow:hidden;}
.image-container .overlap-text {position:relative;top:-100%;padding:80px 40px;word-break: keep-all;text-align:center;}
.image-container .overlap-text h4 {color: #FFFF00;font-size: 32px;margin:20px 0;font-weight:600;}
.image-container .overlap-text p {color: #FFFFFF;font-weight:400;font-size: 32px;margin:20px 0;line-height:1.4;}

.tab-page .justify h5 {font-size:32px; font-weight: 600; margin-top:30px;margin-bottom:0;line-height:1.5;}
.tab-page .justify p {color:#555555; font-weight: 300; margin:12px 0;line-height:1.4;}
.tab-page .justify .subtext {color:#555555; font-weight: 500;}
.tab-page .justify .strongText {color:#111111; font-weight: 400;}
.tab-page .justify .contents-image {width:640px; margin-top:50px; }
.tab-page .justify .contents-image .img {width:100%;object-fit: cover;}

.tab-page .justify .grid-table {display:grid;grid-template-columns:repeat(4, 25%);margin-top:40px;}
.tab-page .justify .grid-table .table-item {color:#555555; height:80px;text-align:center;line-height:80px;border:1px solid #d9d9d9;}
.tab-page .justify .note {display:block;color:#2DB400;margin-top:30px;}
.tab-page .justify .between {display: flex;justify-content: space-between;margin-top:20px;}
.tab-page .justify .between.left {justify-content: left;}
.tab-page .justify .between.left:first-child {margin-top:0;}
.tab-page .justify .between .label {width:85px;margin-right:40px;}
.tab-page .justify .between .text {}
.tab-page .justify .between .name {color:#555555;}
.tab-page .justify .between .price {font-weight:400;}
.tab-page .justify .box-note {height:80px;width:640px;border:2px solid #2DB400;text-align:center;box-sizing:border-box;line-height:80px;color:#2DB400;font-weight:600;margin:30px 0;}
.tab-page .justify .border-note {border-top: 2px solid #D9D9D9;border-bottom: 2px solid #D9D9D9;padding: 40px 0;margin: 40px 0;}
.tab-page .justify ul {color:#555555;font-weight:300;list-style:disc;padding-left:30px;}
.tab-page .justify ul li {padding:5px 0;}
.link-button {border: none;background-color: #2DB400;color: #FFFFFF;width: 640px;height: 100px;display: flex;justify-content:center;line-height:100px;font-weight:600;font-size: 32px;margin:50px 40px;}
.link-button:hover {cursor: pointer;opacity:0.9;}
.link-button .ci-img {width:60px;height:60px;margin-right:30px;padding:20px 0;}

/**
 * 숲해설 미리보기
 */
.guide-menu .program-item {width:640px;margin-bottom:40px;box-sizing:border-box;}
.guide-menu .program-item:hover {cursor:pointer;opacity:0.9;}
.guide-menu .program-item .program-image {width:100%;height:360px;object-fit: cover;border-radius:20px;}
.guide-menu .program-item h4 {font-size:36px;font-weight:600;margin:20px 0;}
.guide-menu .program-item p {font-size:32px;color:#555555; font-weight:400;letter-spacing:-0.8px;margin:0;}

/**
 * 갤러리 게시판
 */

.board-list {margin:50px auto;overflow:hidden;display:grid; grid-row-gap:40px;grid-template-columns:repeat(2, 300px);grid-column-gap:40px;}
.board-list.youtube {grid-template-columns: 100%;grid-column-gap:0;}
.board-list .board-content {}
.board-list .board-content .video-thumbnail {aspect-ratio:16/9; overflow:hidden;border-radius: 10px;}
.board-list .board-content .video-thumbnail .thumbnail-img {aspect-ratio:16/9;object-fit:cover;width:100%;}
.board-list .board-content .gallery-thumbnail {aspect-ratio:1/1; overflow:hidden;border-radius: 10px;}
.board-list .board-content .gallery-thumbnail .thumbnail-img {aspect-ratio:1/1;object-fit:cover;width:100%;}
.board-list .board-content .content-title {font-weight:600;margin:20px 0;}
.board-list .board-content .content-date {font-weight:400;color:#555555;margin:0;}

.board-control {text-align:center;padding:60px 0;}
.btn-page {height:80px;width:270px;border-radius: 40px; background: #2DB400;color: #FFFFFF;border:none;font-size:1rem;font-weight:400;}
.btn-page:hover {cursor: pointer;opacity: 0.9;}



/**
 * 도슨트 페이지
 */
.docent {margin:50px 40px;}
.docent-main-image {height: 240px;background-size: cover;background-position: center;color: #FFFFFF;display: flex;flex-direction: column;justify-content: center;text-align: center;}
.docent-main-image.survey-menu {background:url("/images/bg_docent_map.png") center / cover no-repeat; }
.docent-commentary {border-top: 1px solid #d9d9d9; padding-top:60px;margin-top:40px;color:#555555;font-weight:300;padding-bottom:150px;}
.audio-button {height:80px;width:100%;color:#FFFFFF;border-radius:20px;border:none;background-color: #2DB400;font-size: 1rem;}
.audio-button:hover {cursor:pointer;opacity:0.9;}
.icon-headphone {display:inline-block;height:40px;width:40px;vertical-align:sub;margin-right:10px; background: url("/images/icons/icon-headphone.svg") center /30px no-repeat;}

.commentary-modal {width:100%;height: 100%;position:fixed;top:0;left:0; background: rgba(0,0,0,0.9);display:none;}
.modal-justify {width:720px;margin:0 auto;}
.modal-contents {background:#FFFFFF;border-top-left-radius:40px;border-top-right-radius:40px; overflow:hidden; height:100px;width:720px; position: absolute;bottom:0;}
.modal-close {border:none;background:transparent;float:right;}
.modal-close-icon {width:30px;height:30px;}
.modal-header .modal-close-icon {width:24px;height:24px;}

.docent-video {width:100%;}

.audio-title {padding:60px 0 30px;color:#FFFFFF;text-align:center;}
.audio-player-container {height:350px;margin-top:calc((100vh - 450px) / 2);}
.audio-timer {display:flex;height:40px;color:#FFFFFF;font-size:0.8rem;justify-content: right;line-height:40px;margin-bottom:30px;}
.audio-control {display: flex; justify-content: space-between;}
.audio-control button {background:transparent;border:none;}
.volume-control {display:none;width:40%;height:50px;}
.volume-control .volume-text {display:flex;font-size:0.8rem;color: #FFFFFF;justify-content:space-between;}

.modal-justify .docent-commentary {padding: 40px;margin-top:0;height:calc(100% - 180px);overflow-y:auto;}
.scroll-control {height: 40px;padding:30px 40px;text-align:center;}
.arrow-button {display:inline-block;height:40px;width:40px;vertical-align:middle;margin-left:10px;cursor:pointer;}
.arrow-button.close {background:url("/images/icons/arrow-up.svg") 50% 8px /32px no-repeat;}
.arrow-button.open {background:url("/images/icons/arrow-down.svg") 50% 8px /32px no-repeat;}



.survey {margin:50px 40px 100px;padding-bottom:50px;}
.question-item {padding-bottom: 60px;}
.question-title {margin-bottom:30px;margin-top:0;}
.question-answers {display: grid;grid-template-columns: repeat(2, 48%);grid-column-gap:4%;grid-row-gap:20px;}
.answer-item input[type=radio] {appearance:none;-webkit-appearance: none; width:20px;height:20px;border:1px solid #777777;border-radius:50%;}
.answer-item input[type=radio]:checked {background-color:#2DB400;border-color: #2DB400;}
.answer-item input[type=radio]:checked~.label-survey {color: #2DB400;}

.question-answer-item {display:flex;margin-bottom:10px;}
.question-answer-item-essay {grid-column: span 2 / span 2;}
.essay-text {width:100%; padding:10px 20px; border:1px solid #D9D9D9;background-color:#F8F8F8;border-radius:10px;}
.question-answer-item-number {margin-right: 10px;}
.question-answer-item-text {}
.question-answer-item-image {border:2px solid #FFFFFF;}

.ox-check-box {height:0;}
.question-result-ox {display:none; position:relative;top:-5px;left:-15px;}

.vertical-justify-notice {display: flex;justify-content: center;flex-direction: column;}
.notice-img {margin:50px auto;width:300px;}
.notice-text {width:480px;margin:0 auto;word-break: keep-all;text-align: center;}
.bottom-fixed-button {position: absolute;width:640px; bottom: 0;border-top:1px solid #D9D9D9;padding:30px 40px;background-color:#FFFFFF;}

.quiz-item {margin-bottom:50px; width:640px; overflow:hidden;}
.quiz-item:hover {cursor:pointer;opacity:0.9;}
.quiz-item .quiz-image-div {border-radius:10px;overflow:hidden;width:100%;height: 360px;}
.quiz-item .quiz-image-div .quiz-img {object-fit:cover;height:100%;width:100%;}
.quiz-item .quiz-title {padding:10px 0; text-align:center;}

@keyframes flashing {
    100%{background-color:#D9D9D9;}
}
.quiz {margin:50px 40px 100px;padding-bottom:50px;}
.docent-quiz-title {font-size: 1.1rem;font-weight:600;padding-bottom:60px;border-bottom:1px solid #D9D9D9;text-align:center;margin-bottom:50px;}
.question-answers p {margin-top:0;margin-bottom:0;}

.waytrip-loading {display:none; position:fixed;top:0;left:0; text-align:center; width:100%;height:100%;background-color:#FFFFFF;}
.waytrip-loading .loading-image {margin-top: calc((100vh - 330px) / 2);}
.waytrip-loading .loading-progress {position:relative;display:flex;justify-content:space-evenly;width:320px;height:30px;margin:30px auto 20px;}
.waytrip-loading .loading-progress .loading-circle{width:15px;height:15px;border-radius: 50%;background-color: #2DB400;animation: flashing 1.2s alternate infinite ease;}
.waytrip-loading .loading-progress .loading-circle:nth-child(2){animation-delay: 0.2s;}
.waytrip-loading .loading-progress .loading-circle:nth-child(3){animation-delay: 0.4s;}
.waytrip-loading .loading-progress .loading-circle:nth-child(4){animation-delay: 0.6s;}
.waytrip-loading .loading-progress .loading-circle:nth-child(5){animation-delay: 0.8s;}
.waytrip-loading .loading-progress .loading-circle:nth-child(6){animation-delay: 1s;}
.waytrip-loading .loading-text {font-size:1.25em;font-weight:700;color:#333333;line-height:1.5;}
.waytrip-loading .loading-text p {margin:0;}
.waytrip-loading .loading-text .strong-color {color: #2DB400;}

.quiz-check-image {width: 160px;height: 200px;margin-bottom: 30px;object-fit: contain;}
.question-image {width:100%;object-fit:contain;}
.quiz-content {
    background-color: #FFFFFF;
    height: 100%;
}

.quiz-answer-check {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}


.quiz-check-dots {
    display: flex;
    justify-content: space-evenly;
    width: 110px;
    height: 10px;
    margin-bottom: 20px;
}

.quiz-check-text {
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: #333333;
}

.quiz-result-container {}
.quiz-result-wrapper {width: 100%;height: 100%;}

.quiz-close-button-wrapper {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 50px;
    background-color: #FFFFFF;
    transform: translateY(13%);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.quiz-close-button {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
}

.quiz-close-icon {
    margin-right: 5px;
}

.quiz-result-detail {display:none;transition: ease-out;transition-duration: 1000ms;}

.quiz-header {
    width: 315px;
    height: 112px;
    margin-bottom: 10px;
}

.quiz-title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 112px;
    border-bottom: 1px solid #D9D9D9;
}

.quiz-title {
    font-weight: 700;
    font-size: 16px;
    color: #333333;
    margin-bottom: 3px;
}

.quiz-notice {
    width: 100%;
    margin-bottom: 20px;
    padding: 8px 0;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    text-align: center;
    font-weight: 400;
    font-size: 12px;
    color: #333333;
    letter-spacing: -0.02rem;
}

.quiz-score-container {padding-bottom: 100px;}
.quiz-score-box {margin-bottom: 20px;background-color: #2DB400;border-radius: 10px;}
.quiz-score-content {padding:30px 0;}
.quiz-score-text {text-align: center;font-weight: 500;color: #FFFFFF;font-size:1rem;}
.quiz-score {text-align: center;font-weight: 700;font-size: 1.2rem;color: #FFFFFF;}
.quiz-retry-button {width: 100%;height:60px;margin-bottom: 20px;font-size:0.9rem; font-weight: 400;color: #FFFFFF;background-color: #333333;border-radius: 10px;}
.quiz-retry-icon {margin-right: 10px;width:30px;}
.quiz-answer-button {width: 100%;height:60px;font-weight: 400;font-size: 0.9rem;color: #333333;background-color: #F8F8F8;border: 1px solid #D9D9D9;border-radius: 10px;}
.quiz-answer-icon {margin-left: 10px;width:30px;}