* {color: #111; font-family: 'SUIT Variable', sans-serif; word-break: keep-all; font-weight: 500;}
::selection {background: #583D46; color: #fff;}
::-webkit-scrollbar {width: 0;}


.wrap {padding-bottom: 100px;}
.wrap.height {min-height: 100vh;}
html {background-color: #F6F3EB;}

/* ======== 공통 ======== */
input {outline: none; padding: 18px 25px !important; border-radius: 100px !important; border: 1px solid #ddd; background-color: #fff; font-family: inherit; height: initial; font-size: 18px !important; max-height: 50px;}
input::placeholder {font-size: 15px; color: #999; font-family: inherit;}


input[type="checkbox"] {display: none;}
input[type="checkbox"] + label {font-size: 15px; color: #fff; padding-left: 28px; position: relative; cursor: pointer;}
input[type="checkbox"] + label::before {content: ""; display: block; width: 22px; height: 22px; border-radius: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%);background: url(../img/chk.png) no-repeat center/contain;}
input[type="checkbox"] + label::after {content: ""; display: none; width: 22px; height: 22px; border-radius: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/chk_on.png) no-repeat center/contain;}
input[type="checkbox"]:checked + label::after {display: block;}



button {font-family: inherit; font-size: 18px; line-height: 1; font-weight: 600; transition: all .2s;}
button.lg {padding: 15px 35px; border-radius: 100px;}
button.type1 {background-color: #a50034; color: #fff;}
button.type2 {background-color: #fff; color: #a50034; border: 1px solid #a50034;}
button.type3 {background-color: #948383; color: #fff;}
button.type4 {background-color: #DDD9CF; color: #746F61;}
button.type4:hover {background-color: #cac6bc; color: #555146;}
button.type5 {background-color: #e3e3e3; color: #666;}
.btn_box {display: flex; width: 100%; align-items: center;}


.radio_box {width: 100%; display: flex; align-items: center; gap: 8px;}
input[type="radio"] {display: none;}
input[type="radio"] + label {display: flex; align-items: center; padding: 10px; gap: 10px; justify-content: center; width: 100%; border-radius: 100px; cursor: pointer; background-color: #af9ca2;}
input[type="radio"] + label span {font-size: 16px; font-weight: 600; color: #4A2B35;}
input[type="radio"]:checked + label {background-color: #a50034;}
input[type="radio"]:checked + label span {color: #fff;}
input[type="radio"] + label i {display: block; width: 18px; height: 18px; background: url(../img/radio.png) no-repeat center/contain;}
input[type="radio"]:checked + label i {background: url(../img/radio_on.png) no-repeat center/contain;}
.radio_con {width: 50%; cursor: pointer;}



/* 셀렉트 커스텀 */
.select2-container {width: 100% !important;}
.select2-search--dropdown > input {border: none; border-radius: 0; padding: 10px;}
/* .select2-container--default .select2-selection--single .select2-selection__rendered {padding: 15px 20px !important;} */
.select2-container--default .select2-search--dropdown .select2-search__field {border-radius: 0 !important; border: none !important; padding: 5px !important; background-color: #edf4ff;}
.select2-container--default .select2-selection--single {height: initial !important; padding: 10px !important; border-radius: 100px !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow {top: 10px !important; right: 20px !important;}
.select2-results__option:hover {background-color: #eee;}

.slt_wrap {display: flex; align-items: center; width: 100%; gap: 10px;}
.slt_multi {display: flex; flex-direction: column; width: 100%; gap: 12px;}


/* ======== 인트로(언어선택) ======== */
.intro_wrap {background: url(../img/bg_intro1.jpg) no-repeat center/cover; width: 100vw; height: 100vh; position: relative;}
.intro_inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 100%;}
.intro_wrap > section {width: 100%; position: relative; display: flex; align-items: center; justify-content: center;}
.intro_top .login_title { position: relative; transform: initial; top: initial; left: initial;}
.intro_top .login_title p {color: #fff;}
.intro_top .login_title span {color: #fff;}
.intro_top .login_title i {background-color: #ffffff50;}

.lang_box {display: flex; flex-direction: column; align-items: center; gap: 30px; width: 30vw; min-width: 450px; padding-top: 12%;}
.lang_box .title {font-size: 18px; color: #fff; text-align: center; line-height: 1; padding: 14px 30px; border-radius: 60px; background-color: #442f2f90; backdrop-filter: blur(10px);}
.lang_box ul {gap: 20px; width: 100%; display: grid; grid-template-columns: 1fr 1fr;}
.lang_box dl {display: flex; padding: 14px 25px; border-radius: 100px; align-items: center; gap: 12px; width: 100%; border: 1px solid #fff; position: relative; transition: all .1s; cursor: pointer; backdrop-filter: blur(5px);}
.lang_box dl::after {content: ""; display: block; width: 15px; height: 15px; position: absolute; top: 50%; right: 25px; transform: translateY(-50%); background: url(../img/arrow_lang.png) no-repeat center/contain;}
.lang_box dt {width: 30px; height: 30px; background-color: pink; border-radius: 100%; overflow: hidden;}
.lang_box dl.kr dt {background: url(../img/lang_kr.png) no-repeat center/cover;}
.lang_box dl.vi dt {background: url(../img/lang_vi.png) no-repeat center/cover;}
.lang_box dd {color: #fff; font-size: 18px;}
.lang_box dl:hover {background-color: #A50034; border-color: #A50034;}

.intro_wrap .copy .logo {opacity: 1;}
.intro_wrap .copy span {color: #fff;}

/* ======== 인덱스(로그인) ======== */
.login_wrap {display: flex; width: 100%; height: 100vh; background: url(../img/login_bg1.jpg) no-repeat center/cover;}
.login_wrap > section {width: 50%; height: 100%; position: relative;}

/* 로그인타이틀 */
.login_left {background: url(../img/login_bg.jpg) no-repeat center/cover;}
.login_title {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 15px; width: 100%;}
.login_title p {font-size: clamp(24px, 4vw, 72px); color: #625951; line-height: 120%; text-align: center; font-family: 'LGSmHaTB' !important;}
.login_title p em {font-size: inherit; font-weight: inherit; color: #a50034; font-family: inherit !important;}
.login_title i {width: 1px; height: 50px; background-color: #a89c9c; display: block;}
.login_title span {font-size: clamp(18px, 1.5vw, 26px); color: #605555; font-weight: 500; font-family: 'LGSmHaTR'; text-align: center; line-height: 1.3;}
.login_title span b {font-size: inherit; color: inherit; font-family: 'LGSmHaTB';}

.copy {position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 15px; width: 100%;}
.copy span {font-size: 12px; color: #8e8a80; text-align: center;}

/* 로그인영역 */
.login_box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; width: 30vw; max-width: 500px; gap: 15px; background-color: #442f2f90; backdrop-filter: blur(10px); border-radius: 20px; padding: 60px;}
.login_box form {display: flex; width: 100%; flex-direction: column; gap: 12px;}
.login_opt {display: flex; align-items: center; gap: 30px; padding-bottom: 12px;}
.login_box .btn_box {flex-direction: column; gap: 12px;}
.login_box .btn_box button {width: 100%;}




/* ======== 마이페이지 ======== */
.main_tit {display: flex; align-items: center; gap: 15px; padding-bottom: 40px;}
.main_tit i {display: block; width: 35px; height: 35px;}
.main_tit span {font-size: clamp(20px, 2.5vw, 32px); font-family: 'LGSmHaTSB';}
.main_tit i.my {background: url(../img/icon_mypage.png) no-repeat center/contain;}

.my_list {display: flex; flex-direction: column; width: 100%; gap: 20px;}
.list_con {width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 30px; border-radius: 15px; background-color: #fff; box-shadow: 0 0 20px #EAE7E0; border: 1px solid #EAE7E0;}
.list_con .btn_box {width: max-content;}
.list_con .btn_box button {font-size: 16px; color: #fff; background-color: #a50034; padding: 10px 30px; border-radius: 50px; transition: all .2s; font-family: 'LGSmHaTSB';}
.list_con .btn_box button:hover {background-color: #850d33;}
.list_con .list_info {display: flex; align-items: center; gap: 30px;}
.list_con .status {padding: 10px 30px; line-height: 1; border-radius: 50px; font-size: 16px; background-color: #fff; border: 1px solid #a50034; color: #a50034; font-family: 'LGSmHaTSB';}
.list_con .status.done {background-color: #F0EEEA; border-color: #F0EEEA; color: #948383;}
.list_con .status.save {background-color: #fff; border-color: #948383; color: #948383;}
.list_con dl {display: flex; align-items: center; gap: 25px;}
.list_con dt {font-size: clamp(16px, 1.5vw, 20px); font-weight: 600;}
.list_con dd {position: relative; font-size: clamp(13px, 1vw, 15px); color: #666;}
.list_con dd::before {content: ""; display: block; width: 3px; height: 3px; border-radius: 100%; background-color: #bbb; top: 50%; left: -13px; transform: translateY(-50%); position: absolute;}




/* ======== 설문화면 ======== */
.survey_container {display: flex; flex-direction: column; width: 100%; gap: 40px;}
/* 설문안내 */
.survey_tit {width: 100%; display: flex; flex-direction: column; align-items: center; padding: 50px 30px; background-color: #fff; border-radius: 15px; box-shadow: 0 0 20px #EAE7E0; gap: 40px; border: 1px solid #EAE7E0;}
.survey_tit .title_box {width: 100%; display: flex; flex-direction: column; align-items: center; gap: 15px;}
.title_box p {font-size: clamp(20px, 3vw, 36px); text-align: center; font-family: 'LGSmHaTR'; line-height: 1.4;}
.title_box p span {color: #8b7764; font-family: 'LGSmHaTB';}
.title_box p em {font-family: 'LGSmHaTB';}
.title_box .sub {font-size: 16px; color: #555; text-align: center; line-height: 1.5; width: 100%;}
.tit_info {display: flex; width: 100%; align-items: center; gap: 60px; justify-content: center; flex-wrap: wrap;}
.tit_info dl {display: flex; align-items: center; gap: 15px;}
.tit_info dt {border-radius: 10px; overflow: hidden; width: 50px; aspect-ratio: 1; display: block;}
.tit_info dt.amount {background: url(../img/info_amount.png) no-repeat center/contain;}
.tit_info dt.time {background: url(../img/info_time.png) no-repeat center/contain;}
.tit_info dt.result {background: url(../img/info_result.png) no-repeat center/contain;}
.tit_info dd {font-size: 16px;}
.tit_info dd em {font-weight: 800;}
.tit_info dd em i {color: #a50034; font-weight: inherit;}


/* 설문항목 */
.survey_status {padding-bottom: 30px; width: 100%; display: flex; align-items: center; justify-content: space-between;}
.survey_status .page {display: flex; align-items: center; gap: 8px;}
.survey_status .page em {font-size: 22px; font-family: 'LGSmHaTB'; color: #5C5044;}
.survey_status .page span {font-size: 22px; font-family: 'LGSmHaTB'; color: #B1AAA2;}
.status_bar {width: 25vw; display: flex; justify-content: flex-end; gap: 20px; align-items: center;}
.status_bar .bar_box {border-radius: 20px; overflow: hidden; display: flex; justify-content: flex-start; background-color: #E7E1D1; height: 15px; width: 100%; box-shadow: inset 2px 2px 10px #DAD7CF;}
.status_bar .bar_box .bar {display: block; height: 100%; width: 5%; border-radius: 20px; background-color: #AB5A58; box-shadow: inset 2px 2px 10px #924c4b;}
.status_bar span {font-size: 22px; font-family: 'LGSmHaTB'; color: #5C5044; line-height: 1;}

.survey_list ul {width: 100%; display: flex; flex-direction: column; gap: 30px;}
.survey_box {width: 100%; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end;}
.survey_con {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 30px; background-color: #fff; border-radius: 15px; box-shadow: 0 0 20px #EAE7E0; border: 1px solid #EAE7E0; opacity: .7;}
.survey_box.active .survey_con {opacity: 1;}
.survey_box.alert .survey_con {box-shadow: 0 0 20px #E8CCCC; border-color: #FD312E;}
.survey_con p {font-size: 18px; text-align: center; line-height: 1.5; font-weight: 600;}
.answer_box {display: flex; align-items: center; justify-content: center; width: 100%; gap: 20px;}
.answer_box span {font-size: 16px; font-weight: 700;}
.answer_box span.disagree {color: #7D5C66;}
.answer_box span.agree {color: #3CB087;}
.answer {display: flex; align-items: center; gap: 25px; position: relative;}
.answer::after {content: ""; display: block; width: 99%; height: 1px; border: 1px dashed #E4E2DB; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.answer .a_con {position: relative; background-color: #fff; border-radius: 100%; border: 1px solid #d3d3d3; z-index: 2; cursor: pointer;}
.a_con:nth-of-type(1), .a_con:nth-of-type(6) {width: 40px; height: 40px;}
.a_con:nth-of-type(2), .a_con:nth-of-type(5) {width: 32px; height: 32px;}
.a_con:nth-of-type(3), .a_con:nth-of-type(4) {width: 25px; height: 25px;}
.a_con.on:nth-of-type(1), .a_con.on:nth-of-type(2), .a_con.on:nth-of-type(3) {border-color: #7D5C66; box-shadow: 0 0 5px #7D5C6670;}
.a_con.on:nth-of-type(4), .a_con.on:nth-of-type(5), .a_con.on:nth-of-type(6) {border-color: #3CB087; box-shadow: 0 0 5px #75DBCF70;}
.answer .a_con::after {content: ""; display: none; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.answer .a_con.on::after {display: block;}
.a_con:nth-of-type(1)::after, .a_con:nth-of-type(6)::after {width: 23px; height: 23px;}
.a_con:nth-of-type(2)::after, .a_con:nth-of-type(5)::after {width: 17px; height: 17px;}
.a_con:nth-of-type(3)::after, .a_con:nth-of-type(4)::after {width: 12.5px; height: 12.5px;}
.a_con:nth-of-type(1)::after, .a_con:nth-of-type(2)::after, .a_con:nth-of-type(3)::after {background-color: #7D5C66;}
.a_con:nth-of-type(4)::after, .a_con:nth-of-type(5)::after, .a_con:nth-of-type(6)::after {background-color: #3CB087;}
.survey_box .discript {display: none; width: 100%; text-align: right; font-size: 15px; color: #FD312E; font-weight: 700;}
.survey_box.alert .discript {display: block;}

.survey_area .btn_box {margin-top: 50px; width: 100%; position: relative; justify-content: center;}
.survey_area button[class*="pg_"] {position: absolute; top: 50%; transform: translateY(-50%); padding: 15px 10px; background-color: #ddd9cf; color: #746f61; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; justify-content: center; width: 120px; border-radius: 100px; transition: all .2s;}
.survey_area button[class*="pg_"]:hover {background-color: #cecabf;}
.survey_area button[class*="pg_"] i {display: block; width: 18px; height: 18px;}
.survey_area .pg_prev {left: 0;}
.survey_area .pg_prev i {background: url(../img/prev.png) no-repeat center/contain;}
.survey_area .pg_next {right: 0; flex-direction: row-reverse;}
.survey_area .pg_next i {background: url(../img/next.png) no-repeat center/contain;}
.survey_area .btn_box .sv_btn {display: flex; align-items: center; gap: 15px;}
.survey_area button.type1:hover {background-color: #850d33;}
.survey_area button.type3:hover {background-color: #7e6b6b;}




/* ======== 설문결과화면 ======== */
.main_tit i.result {background: url(../img/icon_result.png) no-repeat center/contain;}

.result_area {display: flex; flex-direction: column; width: 100%; gap: 40px;}
.result_main {background-color: #fff; border-radius: 15px; box-shadow: 0 0 20px #EAE7E0; border: 1px solid #EAE7E0; padding: 80px; display: flex; align-items: center; justify-content: center; gap: 60px;}
.result_main .result_img {width: 30%; aspect-ratio: 1;}
.result_main .result_img img {border-radius: 8px;}
.result_main .result_tit {display: flex ; flex-direction: column; align-items: flex-start; width: 50%; gap: 30px;}
.result_tit .title {display: flex; flex-direction: column; align-items: flex-start; width: 100%;}
.result_tit .title span {font-size: clamp(18px, 2vw, 24px); font-family: 'LGSmHaTSB'; line-height: 1.4;}
.result_tit .title .type {display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; row-gap: 0;}
.result_tit .title .type i {color: #5C5646; font-size: clamp(22px, 3vw, 32px); font-family: 'LGSmHaTSB'; line-height: 1.4;}
.result_tit .title .type em {color: #a50034; font-family: 'LGSmHaTB'; font-size:  clamp(24px, 3vw, 32px); line-height: 1.4;}
.result_tit p {line-height: 1.5; font-weight: 600; color: #333; font-size: clamp(15px, 1.5vw, 20px);}
.result_tit dl {display: flex; align-items: center; gap: 10px; border-radius: 8px; background-color: #f6f5f3; color: #777; font-size: 14px; padding: 10px 20px;}
.result_tit dl dd {font-weight: 800; color: #777;}
.result_tit dl dt {color: #777;}

.strong_box {background-color: #fff; border-radius: 15px; box-shadow: 0 0 20px #EAE7E0; border: 1px solid #EAE7E0; padding: 50px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px;}
.sub_title {display: flex; align-items: center; gap: 10px; align-items: center;}
.sub_title i {display: block; width: 35px; height: 35px;}
.sub_title i.strong {background: url(../img/icon_strong.png) no-repeat center/contain;}
.sub_title i.best {background: url(../img/icon_best.png) no-repeat center/contain;}
.sub_title p {font-size: clamp(18px, 1.8vw, 24px); font-family: 'LGSmHaTSB';}
.strong_list {width: 100%; display: grid; grid-template-columns: 1fr 1fr; column-gap: 50px; row-gap: 0;}
.strong_con {position: relative; padding: 20px 0; border-top: 1px dashed #EAE7E0;}
.strong_con:nth-of-type(1), .strong_con:nth-of-type(2) {border-top: none;}
.strong_con::after {content: ""; display: block; width: 1px; height: 80%; position: absolute; top: 50%; right: -25px; transform: translateY(-50%); border-right: 1px dashed #EAE7E0;}
.strong_con:nth-of-type(2n)::after {display: none;}
.strong_con dl {display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative;}
.strong_con dt {padding: 10px 20px; border-radius: 40px; background-color: #f4f0eb; line-height: 1; font-weight: 700; color: #312e26; width: max-content; font-size: 16px;} 
.strong_con dd {text-align: center;}
.strong_con:nth-of-type(2) dt, .strong_con:nth-of-type(3) dt {background-color: #F5E9E9;}


.improve {background-color: #fff; border-radius: 15px; box-shadow: 0 0 20px #EAE7E0; border: 1px solid #EAE7E0; padding: 50px; display: flex; flex-direction: column; align-items: flex-start; gap: 25px}
.improve .comment {font-size: 16px;}

.review {margin-top: 80px; width: 100%;}
.review .title {margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding-bottom: 35px;}
.review .title p {font-size: clamp(18px, 1.8vw, 24px); text-align: center; font-family: 'LGSmHaTSB';}
.review .title span {font-size: 18px; color: #444; text-align: center;}
.review_btn {display: flex; align-items: center; justify-content: center; gap: 20px;}
.review_btn .rv_btn {display: flex; align-items: center; gap: 10px; width: 240px; border-radius: 100px; padding: 15px 35px; justify-content: center; cursor: pointer; transition: all .2s;}
.review_btn .rv_btn i {display: block; width: 26px; height: 26px;}
.review_btn .rv_btn i.good {background: url(../img/icon_good.png) no-repeat center/contain;}
.review_btn .rv_btn i.bad {background: url(../img/icon_bad.png) no-repeat center/contain;}
.review_btn .rv_btn span {color: #fff; font-weight: 600; font-size: 18px; transition: all .2s;}
.review_btn .rv_btn:first-child {background-color: #a50034; border: 2px solid #a50034;}
.review_btn .rv_btn:first-child:hover {box-shadow: 2px 2px 15px #A5003450;}
.review_btn .rv_btn:last-child {background-color: #948383; border: 2px solid #948383;}
.review_btn .rv_btn:last-child:hover {box-shadow: 2px 2px 15px #b29e92;}
.result .btn_box {padding-top: 80px; justify-content: center;}
.review_btn .rv_btn.on {background-color: #fff;}
.review_btn .rv_btn.on:hover {box-shadow: none;}
.review_btn .rv_btn:first-child.on span {color: #a50034; font-weight: 700;}
.review_btn .rv_btn:last-child.on span {color: #524848; font-weight: 700;}








/* ======== 1440px ======== */
@media screen and (max-width: 1440px) {
    /* 로그인페이지 */
    .login_title i {height: 40px;}


    /* 설문조사페이지 */
    .status_bar {width: 40vw; max-width: 450px;}

    
    /* 결과페이지 */
    .review {margin-top: 60px;}
    .review_btn {gap: 12px;}
    .review_btn .rv_btn {padding: 12px 25px; width: 200px;}
    .review_btn .rv_btn span {font-size: 16px;}
    .review_btn .rv_btn i {width: 22px; height: 22px;}
    .review .title {gap: 6px;}

}




/* ======== 1280px ======== */
@media screen and (max-width: 1280px) {
    input {max-height: 45px; padding: 12px 25px !important;}
    button {font-size: 16px;}
    button.lg {padding: 12px 20px;}


    /* 인트로 */
    .lang_box {width: 50vw;}
    .lang_box .title {font-size: 16px;}
    .lang_box dd {font-size: 16px;}
    .lang_box dl {padding: 12px 25px;}

    /* 로그인페이지 */
    .login_box {padding: 50px 40px;}
    .login_opt {padding-bottom: 5px;}



    /* 마이페이지 */
    .list_con {padding: 25px;}
    .list_con .btn_box button {font-size: 15px;}
    .list_con .status {font-size: 15px;}
    .list_con .list_info {gap: 20px;}


    /* 설문페이지 */
    .survey_container {gap: 30px;}
    .status_bar {gap: 10px;}
    .status_bar span {font-size: 18px;}
    .survey_status .page {gap: 5px;}
    .survey_status .page span, .survey_status .page em {font-size: 20px;}
    .survey_list ul {gap: 20px;}
    .survey_box .discript {font-size: 14px;}
    .survey_area button[class*="pg_"] {width: max-content; padding: 12px 20px; font-size: 16px; gap: 5px;}


    /* 결과페이지 */
    .review .title {padding-bottom: 25px;}
    .review .title span {font-size: 16px;}
    .result .btn_box {padding-top: 60px;}

}



/* ======== 1080px ======== */
@media screen and (max-width: 1080px) {
    .wrap {padding-bottom: 120px;}

    .main_tit {padding-bottom: 25px; gap: 10px;}
    .main_tit i {width: 30px; height: 30px;}


    /* 인트로 */
    .lang_box {padding-top: 8%; gap: 15px;}
    .lang_box .title {line-height: 1.4; padding: 10px 20px;}
    .lang_box dl {padding: 10px 25px;}



    /* 로그인페이지 */
    .login_wrap {display: block; background: url(../img/login_bg.jpg) no-repeat center/cover;}
    .login_wrap > section {width: 100%; position: relative; height: auto;}
    .login_left {background: none;}
    .login_title {position: relative; top: initial; left: initial; transform: none; padding: 10% 20px 0;}
    .login_title p br {display: none;}
    .login_title i {display: none;}
    .copy {bottom: 3%; gap: 10px; position: fixed;}
    .copy .logo {width: 70px;}
    .login_right {padding-top: 5%;}
    .login_opt {padding-bottom: 12px; gap: 50px;}
    .login_box {width: 50vw; backdrop-filter: none; background-color: #6a5757; position: relative; top: initial; left: initial; transform: none; margin: 0 auto;}


    /* 마이페이지 */
    .list_con dl {flex-direction: column; align-items: flex-start; gap: 0;}
    .list_con dd::before {display: none;}


    /* 설문조사페이지 */
    .survey_tit {gap: 30px; padding: 40px 20px;}
    .title_box .sub {font-size: 15px;}
    .tit_info {gap: 50px;}
    .tit_info dl {gap: 10px;}
    .tit_info dt {width: 40px;}
    .tit_info dd {font-size: 15px;}
    .survey_status {padding-bottom: 10px;}
    .survey_con {gap: 15px; padding: 25px;}
    .survey_con p {font-size: 16px;}
    .answer_box {gap: 12px;}
    .answer {gap: 18px;}
    .a_con:nth-of-type(1), .a_con:nth-of-type(6) {width: 35px; height: 35px;}
    .a_con:nth-of-type(1)::after, .a_con:nth-of-type(6)::after {width: 20px; height: 20px;}
    .a_con:nth-of-type(2), .a_con:nth-of-type(5) {width: 28px; height: 28px;}
    .a_con:nth-of-type(2)::after, .a_con:nth-of-type(5)::after {width: 15px; height: 15px;}
    .a_con:nth-of-type(3), .a_con:nth-of-type(4) {width: 22px; height: 22px;}
    .a_con:nth-of-type(3)::after, .a_con:nth-of-type(4)::after {width: 10px; height: 10px;}
    .survey_area .btn_box {margin-top: 40px;}
    .survey_area button[class*="pg_"] {align-items: flex-end;}
    .survey_area button[class*="pg_"] i {width: 15px; height: 15px;}


    /* 결과페이지 */
    .result_area {gap: 20px;}
    .result_main {padding: 60px 20px; gap: 40px;}
    .result_main .result_tit {gap: 20px;}
    .result_tit .title {gap: 5px;}
    .sub_title i {width: 25px; height: 25px;}
    .strong_box {padding: 30px;}
    .improve {padding: 30px;}
    .review_btn .rv_btn {width: max-content; padding: 10px 20px; gap: 6px;}
    .review_btn .rv_btn i {width: 20px; height: 20px;}
    .review_btn .rv_btn span {font-size: 15px;}
}



/* ======== 750px ======== */
@media screen and (max-width: 750px) {
    .main_tit {padding-bottom: 15px;}
    .main_tit i {width: 25px; height: 25px;}

    button.lg {font-size: 15px; padding: 12px 16px;}

    /* 인트로 */
    /* .intro_inner {top: 30%;} */
    .intro_inner {top: 220px;}
    .lang_box ul {grid-template-columns: 1fr; gap: 12px; max-height: 40vh; overflow-y: auto;}
    .lang_box {min-width: 260px; width: 90vw;}
    .lang_box .title {font-size: 15px;}
    .lang_box dt {width: 25px; height: 25px;}
    .lang_box dd {font-size: 15px;}
 

    /* 로그인페이지 */
    .login_title {padding: 20% 20px 0;}
    .login_box {width: 70vw; padding: 40px; gap: 20px; position: relative; top: initial; left: initial; transform: initial; margin: 0 auto;}
    input[type="radio"] + label span {font-size: 14px;}
    input[type="radio"] + label i {width: 15px; height: 15px;}


    /* 마이페이지 */
    .my_list {gap: 16px;}
    .list_con {flex-direction: column; gap: 20px;}
    .list_con .status {padding: 8px 15px; font-size: 14px;}
    .list_con .list_info {flex-direction: column; gap: 12px;}
    .list_con dl {align-items: center; gap: 4px;}
    .list_con dt {text-align: center;}
    .list_con .btn_box button {font-size: 14px; padding: 10px 25px;}


    /* 설문조사페이지 */
    .survey_tit {margin-top: -20px;}
    .title_box .sub {font-size: 14px;}
    .title_box .sub br {display: none;}
    .tit_info {gap: 30px; row-gap: 12px;}
    .status_bar {width: 50vw; max-width: initial; max-width: 180px;}
    .status_bar span {font-size: 16px;}
    .status_bar .bar_box {height: 12px;}
    .survey_status .page span, .survey_status .page em {font-size: 16px;}
    .survey_area .btn_box .sv_btn {gap: 8px;}
    .survey_area .btn_box {margin-top: 25px;}
    .survey_area button[class*="pg_"] i {display: none;}
    .survey_area button[class*="pg_"] {font-size: 15px; padding: 10px 16px;}

    .survey_con {padding: 30px; gap: 20px;}
    .answer_box {position: relative; padding-bottom: 32px;}
    .answer_box span {position: absolute; bottom: 0;}
    .answer_box span.disagree {left: -3px;}
    .answer_box span.agree {right: 4px;}
    .answer {width: 100%; justify-content: space-between; gap: initial;}
    .a_con:nth-of-type(2), .a_con:nth-of-type(5) {width: 30px; height: 30px;}
    .a_con:nth-of-type(2)::after, .a_con:nth-of-type(5)::after {width: 17px; height: 17px;}
    .a_con:nth-of-type(3), .a_con:nth-of-type(4) {width: 25px; height: 25px;}
    .a_con:nth-of-type(3)::after, .a_con:nth-of-type(4)::after {width: 12.5px; height: 12.5px;}


    /* 결과페이지 */
    .result_main {padding: 40px; gap: 30px; align-items: flex-start;}
    .result_main .result_img {width: 45%;}
    .result_main .result_tit {gap: 15px; width: 55%;}
    .result_tit dl {padding: 6px 15px; gap: 6px; width: 100%;}
    .strong_box {gap: 10px;}
    .strong_list {column-gap: 30px;}
    .strong_con {padding: 12px;}
    .strong_con::after {right: -15px;}
    .strong_con dl {gap: 10px;}
    .strong_con dd {font-size: 15px;}
    .strong_con dt {padding: 8px 16px; font-size: 15px;}
}




/* ======== 650px ======== */
@media screen and (max-width: 650px) {
    input[type="checkbox"] + label {font-size: 14px;}
    /* 로그인페이지 */
    .login_title {gap: 6px;}
    .login_box {max-width: initial; width: 90vw; padding: 30px 25px; gap: 15px;}
    .login_opt {gap: 30px; padding-bottom: 6px; flex-wrap: wrap; row-gap: 8px;}


    /* 결과페이지 */
    .result_main {flex-direction: column; gap: 20px; padding: 30px 25px 25px;}
    .result_main .result_tit {width: 100%;}
    .result_main .result_img {margin: 0 auto; width: 70%; min-width: 180px;}
    .result_tit .title {align-items: center;}
    .result_tit .title .type {justify-content: center; gap: 5px;}
    .result_tit p {text-align: center;}
    .result_tit dl {margin-top: 15px; justify-content: center;}
    .sub_title {justify-content: center; gap: 8px; width: 100%;}
    .strong_box {gap: 25px;}
    .strong_list {grid-template-columns: 1fr; row-gap: 15px;}
    .strong_con {padding: 0; padding-bottom: 15px; border-top: none; border-bottom: 1px dashed #EAE7E0;}
    .strong_con::after {display: none;}
    .strong_con:last-child {border-bottom: none; padding-bottom: 0;}
    .strong_con:nth-of-type(3) dt {background-color: #f4f0eb;}
    .strong_con:nth-of-type(4) dt {background-color: #F5E9E9;}
    .improve {gap: 20px;}
    .improve .comment {text-align: center;}
    .review .title span {font-size: 15px;}
    .review_btn {flex-direction: column;}
    .result .btn_box {padding-top: 40px;}
    

}



/* ======== 450px ======== */
@media screen and (max-width: 450px) {
    .wrap {padding-bottom: 100px;}





    /* 설문조사페이지 */
    .tit_info {flex-direction: column; align-items: center;}
    .tit_info dd {font-size: 14px;}
    .tit_info dt {width: 30px;}
  
}



/* ======== 350px ======== */
@media screen and (max-width: 350px) {


    /* 설문조사페이지 */
    .survey_con p {font-size: 15px;}
    .answer_box span {font-size: 15px;}
    .survey_con {padding: 25px 20px;}
    .a_con:nth-of-type(1), .a_con:nth-of-type(6) {width: 30px; height: 30px;}
    .a_con:nth-of-type(1)::after, .a_con:nth-of-type(6)::after {width: 18px; height: 18px;}
    .a_con:nth-of-type(2), .a_con:nth-of-type(5) {width: 25px; height: 25px;}
    .a_con:nth-of-type(2)::after, .a_con:nth-of-type(5)::after {width: 14.5px; height: 14.5px;}
    .a_con:nth-of-type(3), .a_con:nth-of-type(4) {width: 20px; height: 20px;}
    .a_con:nth-of-type(3)::after, .a_con:nth-of-type(4)::after {width: 10px; height: 10px;}
    .survey_area button[class*="pg_"] {font-size: 0; gap: 0; padding: 10px;}
    .survey_area button[class*="pg_"] i {display: block;}
    /* .survey_area .btn_box .sv_btn {flex-direction: column;} */


    /* 결과페이지 */
    .sub_title {flex-direction: column; gap: 10px;}
    .sub_title i {width: 30px; height: 30px;}
}