@charset "UTF-8";
/*!
 * Wayplus Waytrip Index
 */
@keyframes flashing {
    100%{background-color:#D9D9D9;}
}

.wrap {background-color: #FDDE5A;}
.contents {width: 100%; max-width:600px;margin:0 auto;height:100vh;overflow:hidden;}

.waytrip-loading {display:none;position:absolute;top:0;left:0;height: 100vh;width:100%;z-index: 10; text-align:center; padding:150px 0; box-sizing: border-box;background-color: #FDDE5A;}
.waytrip-loading .loading-progress {position:relative;display:flex;justify-content:space-evenly;width:160px;height:15px;margin:30px auto 20px;}
.waytrip-loading .loading-progress .loading-circle{width:15px;height:15px;border-radius: 50%;background-color: #FF674F;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: #FF674F;}

.container {height:100vh;overflow: hidden;}
.page {display:none;}
.page.active {display:block;}
.intro-image {padding-top:100px;margin-bottom: 30px;text-align: center; height:150px; }
.intro-image img {height:100%; object-fit: contain;}
.intro-title {margin:5px 0;}
.intro-text {margin:0;}
.intro-desc {text-align:center;}
.intro-pop {height:22px;padding:25px 0 15px;line-height:25px; background: url("/images/waytrip/icon/survey-pop.svg") center /contain no-repeat;}
.intro-buttons {max-width:320px; width:calc(100% - 40px); margin: 0 auto; padding:30px 0 50px;}
.button {border-radius: 8px;background-color: #443b36;color:#FFFFFF;border:none;width:100%;height:50px;margin-bottom:10px;font-weight:700;font-size:1em;text-align:center;}
.button:hover {cursor:pointer;opacity:0.9;}
.button.privacy {margin-bottom: 50px;font-weight:400;}

.page-control {position:relative;background-color: #443b36;color:#FFFFFF;padding:15px 20px;z-index: 1;overflow:hidden;}
.float-back-btn {width:24px;height:30px;border-radius:50%;background: url("/images/waytrip/icon/float-back.svg") center no-repeat;cursor:pointer;}
.page-contents {height: calc(100vh - 60px);overflow-y:auto;overflow-x:hidden;}
.page-contents::-webkit-scrollbar {width:5px;background-color:rgba(0,0,0,0.2);}
.page-contents::-webkit-scrollbar-thumb {background-color:#443b36;}
.page-title {position:relative; background-color: #443b36;color:#FFFFFF;padding:0 20px 30px 20px;word-break:keep-all;}
.page-title .title-text {font-size: 20px;line-height:1.3;font-weight:600;margin-top:0;}
.page-title .title-sub {font-size: 16px;line-height:1.2;font-weight:400;margin-top:20px;margin-bottom:30px;color: #EEEEEE;}
.page-title .progress {display:flex;justify-content:space-between;align-items:center; height:20px;}
.page-title .progress .progress-bar {height:10px;width:calc(100% - 45px);border-radius:10px;overflow:hidden;background-color: #FFFFFF;}
.page-title .progress .progress-bar .current {height:10px;background-color: #FDDE5A;border-radius: 10px;}
.page-title .progress .progress-text {width:40px;text-align:right;font-size:14px;color: #EEEEEE;}
.page-survey {background-color:#FFFFFF; padding:30px 20px;}
.page-survey .question-item {margin-bottom: 40px;line-height:1.2;word-break:keep-all;}
.page-survey .question-item .question-title {display:flex; font-size:18px;font-weight:600;letter-spacing: -0.025em;margin:10px 0 20px;}
.page-survey .question-item .question-title .no {width:30px;}
.page-survey .question-item .question-title .text {width:calc(100% - 30px);}
.page-survey .question-item .question-ball {position:relative;top:1px;padding-top:12px;background: url("/images/waytrip/icon/arrow-bal.svg") 30px 0 no-repeat;}
.page-survey .question-item .question-description {background-color: #FDDE5A;padding: 15px;border-radius: 5px;border: 1px solid #443b36;line-height:1.35;}
.page-survey .question-item .question-group {font-size:16px;font-weight: 500;}
.page-survey .question-item .input-radio {width: 100%;border-radius:5px;margin-bottom: 10px;overflow:hidden;}
.page-survey .question-item .input-radio label {display:inline-block;width:100%;height:50px;background-color: #EEEEEE;border-radius:5px;margin:0;box-sizing: border-box;text-align:center;line-height:20px;padding:15px 20px;}
.page-survey .question-item .input-radio label:has(+ .full-box-radio:checked) {background-color: #fdde5a;border: 2px solid #443B36;}
.page-survey .question-item .input-radio .full-box-radio {-webkit-appearance: none;-moz-appearance: none;appearance: none;display:none;}
.page-survey .question-item .input-select {-webkit-appearance: none;-moz-appearance: none;appearance: none;height: 50px;width: 100%;border-radius: 5px;border: 2px solid #443B36;text-align: center;}
.page-survey .question-item .input-text {-webkit-appearance: none;-moz-appearance: none;appearance: none;height: 50px;width: 100%;border-radius: 5px;border:none;background-color:#EEEEEE;box-sizing:border-box;padding:10px 20px;}
.page-survey .question-item .input-text::placeholder {font-weight: 400;font-size: 16px;color: #666666;}
.page-survey .question-item .input-text.is-invalid {border:2px solid #FF674F;}
.page-survey .question-item .slider-container {position:relative;padding:0 8px;margin: 20px auto;}
.page-survey .question-item .ratio-display {display:flex;justify-content: space-between;text-align: center;margin-bottom: 10px;font-weight: 500;}
.page-survey .question-item .range-display {display:flex;justify-content: space-between;margin-top:20px;}
.page-survey .question-item .range-display .option {width:45%;}
.page-survey .question-item .range-display .option.right {text-align:right;}
.page-survey .question-item .range-display .option .thumb {max-width:100%;aspect-ratio: 14/13;overflow:hidden;object-fit: cover;border-radius:5px;}
.page-survey .question-item .input-slider {width: 100%;height: 2px;background: #FDDE5A;-webkit-appearance: none;}
.page-survey .question-item .input-slider::-webkit-slider-thumb {-webkit-appearance: none;width: 16px;height: 30px;border-radius: 8px;background: #443B36;cursor: pointer;}
.page-survey .question-item .input-slider::-moz-range-thumb {width: 16px;height: 30px;border-radius: 8px;background: #443B36;cursor: pointer;border: none;}
.page-survey .question-item .input-slider::-moz-range-track {height: 2px;background: #FDDE5A;}
.page-survey .question-item .input-slider::before {content: '';position: relative; display:inline-block; top: 50%;transform: translateY(-50%);width: 16px;height: 16px;background: #FF654D;border-radius: 50%;}
.page-survey .question-item .input-slider::after {content: '';position: relative; display:inline-block; top: 50%;transform: translateY(-50%);width: 16px;height: 16px;background: #5C5FFF;border-radius: 50%;}
.page-survey .question-item .list-container {margin:30px 0 50px;}
.page-survey .question-item .list-container .sorter-item {display:flex;justify-content:space-between;background-color:#EEEEEE;border-radius:5px;padding:5px;min-height:50px;box-sizing:border-box;margin-bottom: 20px;align-items: center;cursor:pointer;}
.page-survey .question-item .list-container .sorter-item .num {width:40px;height:40px;text-align:center;background-color:#443b36;border-radius: 5px;color: #FFFFFF;line-height:40px;}
.page-survey .question-item .list-container .sorter-item .label-text {width:calc(100% - 90px);text-align:center;}
.page-survey .question-item .list-container .sorter-item .sort-icon {width:40px;height:40px;background:url("/images/waytrip/icon/arrow-sort.svg") center no-repeat;}
.page-survey .question-item .list-container .sorter-item.focus {background-color: #fdde5a;border:2px solid #443b36;}


.page-button {background-color:#FFFFFF; box-shadow: 0 -2px 8px 0 #0000001A;padding:20px 20px 50px;text-align:center;}
.page-button .button {max-width:360px;width:calc(100% - 40px);}

.terms-layer {display:none;position:absolute;top:0;left:0;z-index: 1; background-color: rgba(0,0,0,0.95); width:100%;height: 100vh;}
.terms-container {color:#FFFFFF;padding:50px 15px;overflow-x:hidden;overflow-y: auto;line-height:1.3;}
.terms-container .btn-close {position:relative;top:-30px; float:right; border:none;width:30px;height:30px;background: url("/images/waytrip/icon/t-close.svg") center no-repeat transparent;}
.terms-container h4 {font-size:20px;}
.terms-container h5 {font-size:18px;}




.personalize-container {margin:0 auto;color:#443B36;background-color: #FFFFFF;min-height:100vh;max-width:600px;}
.personalize-result-thanks {padding:30px 15px;background-color: #443b36;color:#FFFFFF;line-height:1.3;word-break: keep-all;}
.personalize-result-thanks h4 {font-size:20px;font-weight:600;margin:10px auto 15px;max-width:540px;}
.personalize-result-thanks h5 {font-size:16px;font-weight:600;margin:10px auto 15px;max-width:540px;}
.personalize-result-thanks p {font-size:16px;font-weight:400;margin:10px auto;max-width:540px;}
.personalize-result-thanks .copy {margin-bottom:50px;}
.personalize-title {margin:30px auto 0;font-size:18px;font-weight: 600;max-width:540px;width: calc(100% - 40px);}

.personalize-result-background {height:270px;background: url("/images/waytrip/icon/waybee.svg") center no-repeat;}
.personalize-result-title {max-width:540px; width:calc(100% - 40px); margin: 0 auto; padding:30px 10px; border-bottom:1px solid #d9d9d9;text-align:center;}
.personalize-result-title .type-code {margin:0;font-weight:400;font-size: 1em;line-height:20px;}
.personalize-result-title .type-name {margin:0;font-weight:700;font-size: 1.25em;line-height:1.2;}
.personalize-result-text {max-width:540px; width:calc(100% - 40px); margin: 0 auto; padding:30px 0;border-bottom: 1px solid #D9D9D9;word-break:keep-all;}
.personalize-result-text .title-label{display:block; font-size:1.1em;font-weight:600;color:#FF674F;margin-bottom:20px;}

.personalize-analytics {max-width:540px; width:calc(100% - 40px); margin: 0 auto; padding:30px 0; border-bottom: 1px solid #D9D9D9;word-break: keep-all;}
.personalize-analytics .personalize-subtitle {margin-top:0;font-size: 18px;}
.personalize-analytics p {margin:0;line-height:1.5;}
.personalize-analytics .analytics-item {margin-bottom:40px;font-weight:500;}
.personalize-analytics .analytics-item label {font-weight:600;margin-bottom:10px;}
.personalize-analytics .analytics-item .analytics-bar {position:relative;padding-top:20px;}
.personalize-analytics .analytics-item .analytics-bar .position-value {display: flex;justify-content:space-between;padding-bottom:10px;}
.personalize-analytics .analytics-item .analytics-bar .bar-container {position:relative;height:30px;}
.personalize-analytics .analytics-item .analytics-bar .position-bar {position:relative;width:100%;height:4px;top:13px;background-color: #fdde5a;display:flex;justify-content: space-between;}
.personalize-analytics .analytics-item .analytics-bar .position-bar::before {content: '';position: relative; display:inline-block; top: 50%;transform: translateY(-50%);width: 16px;height: 16px;background: #FF654D;border-radius: 50%;}
.personalize-analytics .analytics-item .analytics-bar .position-bar::after {content: '';position: relative; display:inline-block; top: 50%;transform: translateY(-50%);width: 16px;height: 16px;background: #5C5FFF;border-radius: 50%;}
.personalize-analytics .analytics-item .analytics-bar .bar-container .marker {position:relative;height:30px;width:16px;top:-4px;left:-21px;background:url("/images/waytrip/icon/bar-marker.svg") 0 0 no-repeat;}
.personalize-analytics .analytics-item .analytics-text {height:20px;display: flex;justify-content:space-between;margin-top:20px;}
.personalize-buttons {max-width:320px; width:calc(100% - 40px); margin: 0 auto; padding:30px 0 100px;}
.personalize-buttons .button {border-radius: 8px;background-color: #443b36;color:#FFFFFF;border:none;width:100%;height:50px;margin-bottom:10px;font-weight:700;font-size:1em;}
.personalize-buttons .button:hover {cursor:pointer;opacity:0.9;}
.personalize-buttons .button.theme {background-color: #FF674F;}