* {max-width: 100%; scrollbar-width: thin; scrollbar-color: rgba(117,43,196,1) transparent;}
.wrap::-webkit-scrollbar {width: 6px;}
.wrap::-webkit-scrollbar-track {background: transparent;}
.wrap::-webkit-scrollbar-thumb {background: rgba(117,43,196,1); border-radius: 999px;}
body:hover::-webkit-scrollbar-thumb, body:active::-webkit-scrollbar-thumb {background: rgba(117,43,196,1);}

html, body {height: 100%;}
body {background: #050509; overflow: hidden;}

.bg {position: fixed; inset: 0; z-index: -1; background: url('/assets/user/img/pcbg0.png') center bottom / cover no-repeat; overflow: hidden;}
.bg_logo {position: absolute; left: 3%; top: 10%; width: 22%;}
.bg_obj {position: absolute; pointer-events: none; will-change: transform, opacity;}
.obj01 {right: 5%; bottom: 8%; animation: twinkle 8s ease-in-out infinite; width: 12%;}
.obj02 {right: 28%; bottom: 18%; animation: float2 10s ease-in-out infinite; width: 5%;}
.obj03 {right: 10%; bottom: 35%; animation: float1 4s ease-in-out infinite; width: 10%;}
.obj04 {right: 5%; bottom: 70%; animation: float2 9s ease-in-out infinite; width: 3%;}
.obj05 {right: 22%; bottom: 30%; animation: twinkle 5s ease-in-out infinite; width: 2%;}
.obj06 {left: 3%; bottom: 35%; animation: float1 11s ease-in-out infinite; width: 1%;}
.obj07 {left: 3%; bottom: 6%; animation: float2 8s ease-in-out infinite; width: 14%;}
.obj08 {left: 22%; bottom: 40%; animation: twinkle 4.5s ease-in-out infinite; width: 8%;}
.obj09 {left: 30%; bottom: 5%; animation: twinkle 6s ease-in-out infinite; width: 3%;}

@keyframes float1 {
	0%, 100% {transform: translateY(0); opacity: .9;}
	50% {transform: translateY(-16px); opacity: 1;}
}

@keyframes float2 {
	0%, 100% {transform: translateY(0) rotate(0deg); opacity: .85;}
	50% {transform: translateY(-22px) rotate(3deg); opacity: 1;}
}

@keyframes twinkle {
	0%, 100% {transform: scale(1); opacity: .55;}
	50% {transform: scale(1.08); opacity: 1;}
}

.frame {display: flex; justify-content: center; width: 100%; overflow-x: clip; height: 100vh; overflow: hidden; position: relative; z-index: 1;}
.wrap {position: relative; --side: 18px; width: 550px; height: 100vh; margin: 0 auto; color: #f1f1f1; font-family: 'Poppins'; line-height: 1.4; letter-spacing: -0.02em; overflow-x: hidden; overflow-y: auto; background: #141315;}

.nowrap {white-space: nowrap;}
.main_visual {position: relative;}
.main_visual img {width: 100%; height: auto; display: block;}
.content {position: relative; z-index: 2; margin-top: -75%; padding: 0 var(--side);}
.title {font-family: 'Montserrat'; font-weight: 700; font-size: 36px; line-height: 1.4; background: linear-gradient(180deg, #F1F1F1 0%, rgba(241,241,241,.5) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.info {position: relative; margin-top: 30px;}
.info::before {content: ""; position: absolute; right: calc(var(--side) * -4); top: -30px; width: 360px; height: 440px; background: url('/assets/user/img/main/bgStar.png') no-repeat right top / contain; pointer-events: none; z-index: -10;}
.info_box {position: relative; z-index: 1; margin-bottom: 15px;}
.info_box ul {margin-left: 10px;}
.info_box h2 {font-family: 'Poppins'; font-weight: 500; font-size: 18px; color: #2ED2A3; margin-bottom: 10px;}
.info_box li {position: relative; padding-left: 15px; font-weight: 500; font-size: 22px; line-height: 1.45;}
.info_box li::before {content: "·"; position: absolute; left: 0; top: 0; color: #2ED2A3;}
.lead {margin-top: 40px; font-weight: 500; font-size: 26px; line-height: 1.55; letter-spacing: -0.02em;}
.desc {margin-top: 20px; font-weight: 400; font-size: 24px; color: rgba(241,241,241,.8); line-height: 1.5; letter-spacing: -0.03em;}
.desc p {margin-bottom: 20px;}
.desc p:last-child {margin-bottom: 0;}
.start_wrap {position: relative; z-index: 2; padding: 50px var(--side) 0;}
.start_btn {width: 100%; height: 75px; background: #16032B; box-shadow: inset 0px 0px 20px rgba(117, 43, 196, 0.7); color: #A14AFF;}
.glowBtn {display: flex; align-items: center; justify-content: center; height: 80px; border-radius: 10px; font-family: 'Montserrat'; font-weight: 700; font-size: 36px;}
.bottom_visual {position: relative; z-index: 1; margin-top: -100%;}
.bottom_visual img {width: 100%; height: auto; display: block;}

@media (hover: hover) and (pointer: fine) {
	.start_btn {transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;}
	.start_btn:hover {transform: translateY(-2px);}
	.start_btn:hover {box-shadow: inset 0px 0px 30px rgba(117,43,196,.9), 0 0 18px rgba(117,43,196,.35);}
}

@media (max-width: 549px) {
	body {min-width: 320px;}
	.wrap {width: 100%; min-width: 320px;}
}

@media (max-width: 520px) {
	.title {font-size: 34px;}
	.info {margin-top: 28px;}
	.info::before {right: calc(var(--side) * -6); top: -25px; width: 340px; height: 415px;}
	.info_box {margin-bottom: 14px;}
	.info_box h2 {font-size: 17px; margin-bottom: 9px;}
	.info_box li {font-size: 21px;}
	.lead {margin-top: 38px; font-size: 25px;}
	.desc {font-size: 23px;}
	.start_wrap {padding-top: 48px;}
	.glowBtn {height: 72px; font-size: 34px;}
}

@media (max-width: 425px) {
	.wrap {--side: 16px;}
	.title {font-size: 28px; line-height: 1.42;}
	.info {margin-top: 24px;}
	.info::before {top: -20px; width: 300px; height: 367px;}
	.info_box {margin-bottom: 13px;}
	.info_box ul {margin-left: 8px;}
	.info_box h2 {font-size: 15px; margin-bottom: 8px;}
	.info_box li {padding-left: 13px; font-size: 18px; line-height: 1.45;}
	.lead {margin-top: 34px; font-size: 22px; line-height: 1.5;}
	.desc {margin-top: 18px; font-size: 20px; line-height: 1.5;}
	.desc p {margin-bottom: 18px;}
	.start_wrap {padding-top: 42px;}
	.glowBtn {height: 64px; border-radius: 8px; font-size: 32px;}
}

@media (max-width: 360px) {
	.wrap {--side: 14px;}
	.title {font-size: 24px;}
	.info {margin-top: 22px;}
	.info::before {right: calc(var(--side) * -8); top: -15px; width: 260px; height: 318px;}
	.info_box {margin-bottom: 12px;}
	.info_box h2 {font-size: 14px; margin-bottom: 7px;}
	.info_box li {font-size: 16px; line-height: 1.45;}
	.lead {margin-top: 30px; font-size: 20px; line-height: 1.5;}
	.desc {font-size: 18px;}
	.desc p {margin-bottom: 16px;}
	.start_wrap {padding-top: 38px;}
	.glowBtn {height: 58px; font-size: 28px;}
}

@media (max-width: 320px) {
	.wrap {--side: 12px;}
	.title {font-size: 22px;}
	.info {margin-top: 20px;}
	.info::before {top: -10px; width: 230px; height: 281px;}
	.info_box {margin-bottom: 10px;}
	.info_box ul {margin-left: 6px;}
	.info_box h2 {font-size: 13px; margin-bottom: 6px;}
	.info_box li {padding-left: 12px; font-size: 15px;}
	.lead {margin-top: 28px; font-size: 18px;}
	.desc {margin-top: 16px; font-size: 16px;}
	.desc p {margin-bottom: 14px;}
	.start_wrap {padding-top: 34px;}
	.glowBtn {height: 54px;}
}

/* tour */
.tour_wrap {min-height: 100vh; padding: 50px var(--side) 100px; background: linear-gradient(180deg, #2ED2A3 0%, #141315 34%, #141315 100%);}
.back_btn {display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 20px; color: #F1F1F1;}
.back_btn img {width: auto; height: 16px; display: block;}

.tour_header {position: relative; margin-top: 78px; text-align: center;}
.tour_header::before {content: ""; position: absolute; left: calc(var(--side) * -1); top: -80px; width: calc(100% + var(--side) * 2); height: 230px; background: url('/assets/user/img/tour/svBg.png') no-repeat center top / 100% auto; opacity: .7; pointer-events: none;}
.tour_header h1 {position: relative; z-index: 1; font-family: 'Montserrat'; font-weight: 700; font-size: 64px; line-height: 1.2; color: #fff; text-shadow: 0px 0px 15px rgba(255,255,255,.4);}
.tour_header h1 span {display: block; font-weight: 600; font-size: 48px; line-height: 1;}
.tour_header p {position: relative; z-index: 1; margin-top: 26px; font-weight: 500; font-size: 24px; line-height: 1.55; color: #F1F1F1;}
.tour_header p strong {font-weight: 500; color: #F4DB4B;}

.mission_list {margin-top: 60px;}
.mission_box {position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 280px; margin-bottom: 20px; padding: 28px; border: 1px solid rgba(255,255,255,.5); box-shadow: inset 0px 0px 20px rgba(255,255,255,.3); border-radius: 10px;}
.mission_box:last-child {margin-bottom: 0;}
.mission_box h2 {font-family: 'Montserrat'; font-weight: 700; font-size: 24px; line-height: 1;}
.mission_box h3 {margin-top: 15px; font-family: 'Montserrat'; font-weight: 700; font-size: 32px; letter-spacing: -0.03em; line-height: 1.2; color: #fff;}
.mission_box p {margin-top: 10px; font-weight: 400; font-size: 24px; color: rgba(241,241,241,.7);}
.mission_btn {display: inline-flex; align-items: center; gap: 10px; min-height: 50px; margin-left: auto; padding: 10px 20px; border-radius: 50px; font-weight: 400; font-size: 20px; color: #000; line-height: 1;}

.mission_01 {background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(46, 210, 163, 0.1) 100%);}
.mission_01 h2 {color: #2ED2A3;}
.mission_01 .mission_btn {background: #2ED2A3;}
.mission_02 {background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(161, 74, 255, 0.2) 100%);}
.mission_02 h2 {color: #A14AFF;}
.mission_02 .mission_btn {background: #A14AFF;}
.mission_03 {background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(232, 187, 63, 0.2) 100%);}
.mission_03 h2 {color: #E8BB3F;}
.mission_03 .mission_btn {background: #E8BB3F;}

/* complete 표시 */
.mission_box.complete {border: none; box-shadow: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);}
.mission_box.complete::after {content: ""; position: absolute; right: 10px; bottom: 150px; width: 140px; height: 140px; background: url('/assets/user/img/tour/compMark.png') no-repeat center / contain; pointer-events: none; z-index: 0;}
/*.mission_box.complete .mission_btn {display: none;}*/
.mission_box.complete .mission_content {position: relative; z-index: 1;}

@media (hover: hover) and (pointer: fine) {
	.back_btn,
	.mission_btn {transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;}
	.back_btn:hover {opacity: .75; transform: translateX(-4px);}
	.mission_btn:hover {transform: translateY(-2px); box-shadow: 0 0 18px rgba(255,255,255,.28);}
}

@media (max-width: 540px) {
	.tour_wrap {padding: 50px var(--side) 90px;}
	.back_btn {font-size: 19px;}
	.back_btn img {height: 15px;}
	.tour_header {margin-top: 72px;}
	.tour_header::before {top: -76px; height: 220px;}
	.tour_header h1 {font-size: 60px;}
	.tour_header h1 span {font-size: 45px;}
	.tour_header p {margin-top: 24px; font-size: 23px;}
	.mission_list {margin-top: 56px;}
	.mission_box {height: 300px;}
	.mission_box h2 {font-size: 22px;}
	.mission_box h3 {margin-top: 14px; font-size: 30px;}
	.mission_box p {margin-top: 10px; font-size: 22px;}
	.mission_btn {min-height: 48px; font-size: 18px;}
}

@media (max-width: 425px) {
	.tour_wrap {--side: 16px; padding: 42px var(--side) 76px;}
	.back_btn {gap: 8px; font-size: 17px;}
	.back_btn img {height: 14px;}
	.tour_header {margin-top: 62px;}
	.tour_header::before {top: -64px; height: 190px;}
	.tour_header h1 {font-size: 48px; line-height: 1.15;}
	.tour_header h1 span {font-size: 36px;}
	.tour_header p {margin-top: 22px; font-size: 20px; line-height: 1.5;}
	.mission_list {margin-top: 46px;}
	.mission_box {height: 270px; margin-bottom: 18px; padding: 24px;}
	.mission_box h2 {font-size: 20px;}
	.mission_box h3 {margin-top: 13px; font-size: 25px; line-height: 1.18;}
	.mission_box p {margin-top: 10px; font-size: 20px; line-height: 1.35;}
	.mission_btn {gap: 8px; min-height: 42px; padding: 8px 16px; font-size: 16px;}
	.mission_box.complete::after {right: 0; bottom: 145px; width: 120px; height: 120px;}
}

@media (max-width: 360px) {
	.tour_wrap {--side: 14px; padding: 36px var(--side) 64px;}
	.back_btn {font-size: 16px;}
	.back_btn img {height: 13px;}
	.tour_header {margin-top: 54px;}
	.tour_header::before {top: -56px; height: 165px;}
	.tour_header h1 {font-size: 42px;}
	.tour_header h1 span {font-size: 31px;}
	.tour_header p {margin-top: 20px; font-size: 18px;}
	.mission_list {margin-top: 40px;}
	.mission_box {height: 245px; margin-bottom: 16px; padding: 20px;}
	.mission_box h2 {font-size: 18px;}
	.mission_box h3 {margin-top: 12px; font-size: 23px;}
	.mission_box p {margin-top: 9px; font-size: 18px;}
	.mission_btn {min-height: 38px; padding: 7px 14px;}
	.mission_box.complete::after {width: 100px; height: 100px;}
}

@media (max-width: 320px) {
	.tour_wrap {--side: 12px; padding: 32px var(--side) 56px;}
	.back_btn {font-size: 15px;}
	.back_btn img {height: 12px;}
	.tour_header {margin-top: 48px;}
	.tour_header::before {top: -50px; height: 150px;}
	.tour_header h1 {font-size: 38px;}
	.tour_header h1 span {font-size: 28px;}
	.tour_header p {font-size: 16px;}
	.mission_list {margin-top: 36px;}
	.mission_box {height: 225px; margin-bottom: 14px; padding: 18px;}
	.mission_box h3 {margin-top: 10px; font-size: 20px;}
	.mission_box p {margin-top: 8px; font-size: 16px;}
	.mission_btn {font-size: 15px;}
}

/* award */

.home_btn {display: flex; justify-content: flex-end;}
.home_btn a {display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 10px; background: rgba(241,241,241,.5);}
.home_btn img {width: 24px; height: auto; display: block;}
.award_wrap {min-height: 100vh; padding: 50px var(--side) 100px; background: linear-gradient(180deg, #3A1563 0%, #141315 22%, #141315 100%);}
.award_title {margin-top: 50px; font-family: 'Montserrat'; font-weight: 700; font-size: 36px; line-height: 1.2; text-align: center; color: #fff; text-shadow: 0px 0px 15px rgba(255,255,255,.4);}
.award_list {margin-top: 55px;}
.award_box {margin-bottom: 30px; padding: 30px; background: linear-gradient(180deg, rgba(20,19,21,.3) 0%, rgba(117,111,123,.3) 100%); border: 1px solid rgba(241,241,241,.2); border-radius: 5px;}
.award_box:last-child {margin-bottom: 0;}
.award_label {display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 10px 15px; background: #2D135C; border-radius: 40px; font-size: 18px; line-height: 1.2; color: #fff;}
.award_info {display: flex; gap: 30px; margin-top: 20px;}
.award_thumb {flex: 0 0 130px;}
.award_thumb img {width: 100%; height: auto; display: block;}
.award_meta {flex: 1;}
.award_meta h2 {font-weight: 700; font-size: 26px; line-height: 1.4; color: #fff;}
.award_meta h2.title_2 {font-size: 24px;}
.award_meta h2.title_3 {font-size: 22px;}
.watch_btn {display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 175px; height: 50px; margin-top: 15px; background: #141315; border: 1px solid rgba(46,210,163,.2); border-radius: 5px; font-weight: 500; font-size: 16px; line-height: 1; color: #2ED2A3;}
.award_meta p {margin-top: 15px; font-size: 18px; letter-spacing: -0.03em; color: rgba(241,241,241,.8);}
.award_meta p + p {margin-top: 4px;}
.para_gap {display: block; height: 20px;}
.award_desc {margin-top: 30px; max-height: 123px; overflow: hidden; cursor: pointer;}
.award_desc p {margin-bottom: 20px; font-size: 22px; line-height: 1.4; letter-spacing: -0.03em; color: #F1F1F1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;}
.award_desc p:last-child {margin-bottom: 0;}
.award_desc.open {max-height: none; overflow: visible;}
.view_more {display: block; margin-top: 12px; text-align: right; font-size: 18px; color: #F1F1F1;}
.award_box.open .view_more {display: none;}
.award_desc.open p {display: block; -webkit-line-clamp: unset; overflow: visible;}


@media (max-width: 520px) {
	.award_wrap {padding: 48px var(--side) 90px;}
	.home_btn a {width: 48px; height: 48px;}
	.home_btn img {width: 23px;}
	.award_title {margin-top: 48px; font-size: 34px;}
	.award_list {margin-top: 52px;}
	.award_box {margin-bottom: 28px; padding: 28px;}
	.award_label {font-size: 17px;}
	.award_info {gap: 24px;}
	.award_thumb {flex: 0 0 130px;}
	.award_meta h2 {font-size: 25px;}
	.award_meta h2.title_2 {font-size: 23px;}
	.award_meta h2.title_3 {font-size: 21px;}
	.watch_btn {min-width: 165px; height: 48px; font-size: 15px;}
	.award_meta p {font-size: 17px;}
	.para_gap {height: 14px;}
	.award_desc {max-height: 118px;}
	.award_desc p {font-size: 21px;}
	.view_more {font-size: 17px;}
}

@media (max-width: 425px) {
	.award_wrap {--side: 16px; padding: 42px var(--side) 76px;}
	.home_btn a {width: 44px; height: 44px; border-radius: 8px;}
	.home_btn img {width: 21px;}
	.award_title {margin-top: 42px; font-size: 30px;}
	.award_list {margin-top: 44px;}
	.award_box {margin-bottom: 24px; padding: 24px;}
	.award_label {height: 28px; padding: 8px 13px; font-size: 15px;}
	.award_info {gap: 18px; margin-top: 18px;}
	.award_thumb {flex: 0 0 115px;}
	.award_meta h2 {font-size: 22px;}
	.award_meta h2.title_2 {font-size: 21px;}
	.award_meta h2.title_3 {font-size: 19px;}
	.watch_btn {min-width: 135px; height: 42px; margin-top: 12px; font-size: 14px;}
	.watch_btn img {width: 14px;}
	.award_meta p {margin-top: 12px; font-size: 15px;}
	.award_desc {margin-top: 26px; max-height: 101px;}
	.award_desc p {margin-bottom: 16px; font-size: 18px; line-height: 1.4;}
	.view_more {font-size: 16px;}
}

@media (max-width: 360px) {
	.award_wrap {--side: 14px; padding: 36px var(--side) 64px;}
	.home_btn a {width: 40px; height: 40px;}
	.home_btn img {width: 19px;}
	.award_title {margin-top: 36px; font-size: 26px;}
	.award_list {margin-top: 38px;}
	.award_box {margin-bottom: 20px; padding: 20px; text-align: center;}
	.award_label {font-size: 14px; height: auto;}
	.award_info {display: block; margin-top: 18px;}
	.award_thumb {width: 130px; margin: 0 auto 18px;}
	.award_thumb.thumb_wide {width: 190px;}
	.award_thumb img {width: 100%;}
	.award_meta {display: flex; flex-direction: column; align-items: center; text-align: center;}
	.award_meta h2 {font-size: 20px;}
	.award_meta h2.title_2 {font-size: 19px;}
	.award_meta h2.title_3 {font-size: 17px;}
	.watch_btn {min-width: 120px; height: 38px; margin: 12px auto 0; font-size: 13px;}
	.watch_btn img {width: 13px;}
	.award_meta p {margin-top: 10px; font-size: 14px; text-align: center;}
	.para_gap {height: 10px;}
	.award_desc {margin-top: 22px; max-height: 90px; text-align: left;}
	.award_desc p {margin-bottom: 14px; font-size: 16px;}
	.view_more {margin-top: 10px; font-size: 15px; text-align: right;}
}

@media (max-width: 320px) {
	.award_wrap {--side: 12px; padding: 32px var(--side) 56px;}
	.home_btn a {width: 38px; height: 38px;}
	.home_btn img {width: 18px;}
	.award_title {margin-top: 34px; font-size: 24px;}
	.award_list {margin-top: 34px;}
	.award_box {margin-bottom: 18px; padding: 18px;}
	.award_label {font-size: 13px;}
	.award_thumb {width: 120px; margin-bottom: 16px;}
	.award_thumb.thumb_wide {width: 190px;}
	.award_meta h2 {font-size: 18px;}
	.award_meta h2.title_2 {font-size: 17px;}
	.award_meta h2.title_3 {font-size: 16px;}
	.watch_btn {min-width: 110px; height: 36px; font-size: 12px;}
	.watch_btn img {width: 12px;}
	.award_meta p {font-size: 13px;}
	.award_desc {max-height: 78px;}
	.award_desc p {font-size: 14px;}
	.view_more {font-size: 14px;}
}

.poster_wrap {min-height: 100vh; padding: 10px var(--side) 0; background: linear-gradient(174.26deg, #072C2A 2.66%, #03032A 97.34%);}
.poster_result {position: relative; margin-top: 10px;}
.poster_photo {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.poster_frame {position: relative; z-index: 2; width: 100%; height: auto; display: block;}
.poster_text {position: relative; z-index: 3; margin-top: 20px; text-align: center;}
.poster_text h1 {font-weight: 600; font-size: 36px; color: #fff; text-shadow: 0px 0px 15px rgba(255,255,255,.4);}
.poster_text p {margin-top: 10px; font-weight: 400; font-size: 22px; color: #CCCCCC;}
.poster_bottom {position: relative; z-index: 1;}
.poster_bottom img {width: calc(100% + var(--side) * 2); max-width: none; height: auto; margin-left: calc(var(--side) * -1); display: block;}

@media (max-width: 520px) {
	.poster_wrap {padding-top: 10px;}
	.poster_result {margin-top: 10px;}
	.poster_text h1 {font-size: 32px;}
	.poster_text p {font-size: 20px;}
}

@media (max-width: 425px) {
	.poster_wrap {--side: 16px; padding-top: 4px;}
	.poster_result {margin-top: 10px;}
	.poster_text h1 {font-size: 28px;}
	.poster_text p {font-size: 18px;}
}

@media (max-width: 360px) {
	.poster_wrap {--side: 14px; padding-top: 4px;}
	.poster_result {margin-top: 10px;}
	.poster_text h1 {font-size: 24px;}
	.poster_text p {font-size: 16px;}
}

@media (max-width: 320px) {
	.poster_wrap {--side: 12px; padding-top: 2px;}
	.poster_text h1 {font-size: 22px;}
	.poster_text p {font-size: 15px;}
}

.survey_wrap {min-height: 100vh; padding: 50px var(--side) 100px; background: linear-gradient(180deg, #3A1563 0%, #141315 22%, #141315 100%);}
.survey_header {margin-top: 50px; text-align: center;}
.survey_header img {width: 350px; margin: 0 auto 35px; display: block;}
.survey_header h1 {font-family: 'Montserrat'; font-weight: 700; font-size: 36px; color: #fff;}
.survey_header p {margin-top: 14px; font-weight: 400; font-size: 20px; color: #ccc;}
.survey_form {margin-top: 100px;}
.survey_item {padding: 0 0 50px; margin-bottom: 50px; border-bottom: 1px solid rgba(241,241,241,.2);}
.survey_item h2 {padding-left: 42px; text-indent: -42px; font-weight: 400; font-size: 24px; line-height: 1.4; color: #fff;}
.custom_select {position: relative; margin-top: 30px;}
.select_btn {position: relative; display: flex; align-items: center; width: 100%; height: 60px; padding: 0 60px 0 20px; background: #20725B; border: 0; border-radius: 4px; font-family: 'Poppins'; font-size: 24px; color: #fff; text-align: left;}
.select_btn::after {content: ""; position: absolute; right: 24px; top: 50%; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 13px solid #fff; transform: translateY(-50%);}
.custom_select.open .select_btn {border-radius: 4px 4px 0 0;}
.custom_select.open .select_btn::after {border-top: 0; border-bottom: 13px solid #fff;}
.select_list {display: none; position: absolute; left: 0; top: 100%; z-index: 10; width: 100%; max-height: 330px; overflow-y: auto; background: #f1f1f1; border-radius: 0 0 4px 4px; scrollbar-color: #21735C transparent;}
.custom_select.open .select_list {display: block;}
.select_list li {border-bottom: 1px solid #d0d0d0;}
.select_list li:last-child {border-bottom: 0;}
.select_list button {display: flex; align-items: center; width: 100%; min-height: 60px; padding: 0 20px; border: 0; background: #f1f1f1; font-family: 'Poppins'; font-size: 22px; color: #141315; text-align: left;}
.select_list button:hover, .select_list button:focus {background: rgba(0,0,0,.08);}
.star_list {display: flex; justify-content: center; gap: 4px; margin-top: 30px;}
.star_list button {width: 50px; height: 50px; border: 0; background: url('/assets/user/img/mission/starA.png') no-repeat center / contain;}
.star_list button.on {background-image: url('/assets/user/img/mission/starB.png');}
.survey_item textarea {width: 100%; height: 125px; margin-top: 20px; padding: 15px; border: 0; border-radius: 4px; background: #f1f1f1; resize: none; font-family: 'Poppins'; font-size: 18px;}
.send_btn {width: 230px; margin: 50px auto 0; background: #141315; box-shadow: inset 0px 0px 20px rgba(244,219,75,.7); color: #E8BB3F;}

@media (hover: hover) and (pointer: fine) {
	.send_btn {transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;}
	.send_btn:hover {transform: translateY(-2px);}
	.send_btn:hover {box-shadow: inset 0px 0px 30px rgba(244,219,75,.9), 0 0 18px rgba(244,219,75,.25);}
}

@media (max-width: 520px) {
	.survey_wrap {padding: 48px var(--side) 90px;}
	.survey_header {margin-top: 48px;}
	.survey_header img {width: 330px; margin-bottom: 32px;}
	.survey_header h1 {font-size: 34px;}
	.survey_header p {font-size: 19px;}
	.survey_form {margin-top: 90px;}
	.survey_item {padding-bottom: 46px; margin-bottom: 46px;}
	.survey_item h2 {padding-left: 40px; text-indent: -40px; font-size: 23px;}
	.select_btn {height: 58px; font-size: 23px;}
	.select_list button {min-height: 58px; font-size: 21px;}
	.star_list button {width: 48px; height: 48px;}
	.send_btn {width: 220px;}
}

@media (max-width: 425px) {
	.survey_wrap {--side: 16px; padding: 42px var(--side) 76px;}
	.survey_header {margin-top: 42px;}
	.survey_header img {width: 280px; margin-bottom: 28px;}
	.survey_header h1 {font-size: 30px;}
	.survey_header p {margin-top: 12px; font-size: 18px;}
	.survey_form {margin-top: 72px;}
	.survey_item {padding-bottom: 40px; margin-bottom: 40px;}
	.survey_item h2 {padding-left: 36px; text-indent: -36px; font-size: 21px;}
	.custom_select {margin-top: 26px;}
	.select_btn {height: 54px; padding: 0 52px 0 18px; font-size: 21px;}
	.select_btn::after {right: 22px; border-left-width: 10px; border-right-width: 10px; border-top-width: 12px;}
	.custom_select.open .select_btn::after {border-bottom-width: 12px;}
	.select_list {max-height: 300px;}
	.select_list button {min-height: 54px; padding: 0 18px; font-size: 19px;}
	.star_list {gap: 3px; margin-top: 26px;}
	.star_list button {width: 43px; height: 43px;}
	.survey_item textarea {height: 115px; font-size: 16px;}
	.send_btn {width: 200px; margin-top: 44px;}
}

@media (max-width: 360px) {
	.survey_wrap {--side: 14px; padding: 36px var(--side) 64px;}
	.survey_header {margin-top: 36px;}
	.survey_header img {width: 240px; margin-bottom: 24px;}
	.survey_header h1 {font-size: 26px;}
	.survey_header p {font-size: 16px;}
	.survey_form {margin-top: 60px;}
	.survey_item {padding-bottom: 34px; margin-bottom: 34px;}
	.survey_item h2 {padding-left: 33px; text-indent: -33px; font-size: 19px;}
	.custom_select {margin-top: 22px;}
	.select_btn {height: 50px; padding: 0 48px 0 16px; font-size: 18px;}
	.select_btn::after {right: 20px; border-left-width: 9px; border-right-width: 9px; border-top-width: 11px;}
	.custom_select.open .select_btn::after {border-bottom-width: 11px;}
	.select_list {max-height: 270px;}
	.select_list button {min-height: 50px; padding: 0 16px; font-size: 17px;}
	.star_list {gap: 2px; margin-top: 24px;}
	.star_list button {width: 38px; height: 38px;}
	.survey_item textarea {height: 105px; margin-top: 18px; font-size: 15px;}
	.send_btn {width: 180px; margin-top: 38px;}
}

@media (max-width: 320px) {
	.survey_wrap {--side: 12px; padding: 32px var(--side) 56px;}
	.survey_header {margin-top: 32px;}
	.survey_header img {width: 220px; margin-bottom: 22px;}
	.survey_header h1 {font-size: 24px;}
	.survey_header p {font-size: 15px;}
	.survey_form {margin-top: 52px;}
	.survey_item {padding-bottom: 30px; margin-bottom: 30px;}
	.survey_item h2 {padding-left: 31px; text-indent: -31px; font-size: 18px;}
	.select_btn {height: 48px; font-size: 17px;}
	.select_list {max-height: 250px;}
	.select_list button {min-height: 48px; font-size: 16px;}
	.star_list button {width: 34px; height: 34px;}
	.survey_item textarea {height: 100px; font-size: 14px;}
	.send_btn {width: 160px;}
}