@charset "UTF-8";
/* Noto Sans CJK KR | font-family: "Noto Sans KR", sans-serif;  */
/* Futura PT | font-family: futura-pt, sans-serif; */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    font-family: futura-pt, "Noto Sans KR", sans-serif;
    font-weight: 400;
}
sup {
    font-size: 50%;
    padding-bottom: 6px;
}
img {
    display: block;
    width: 100%;
}
button {
    all: unset;
}

/* 공통 class */
.d-none {
    display: none;
}
.pointer-none {
    pointer-events: none;
}
/* 분할 > 6:4 비율 */
.col-6-4 {
    display: flex;
    margin-bottom:  calc(34px / 2);
}
.col-6-4 > div:first-child {
    flex: 5.5;
}
.col-6-4 > div:last-child {
    flex: 4.5;
    margin-top: 0;
    margin-left:  calc(34px / 2);
}
/* 분할 > 5:5 비율 */
.col-5-5 {
    display: flex;
    margin-bottom:  calc(34px / 2);
}
.col-5-5 > div {
    flex: 1;
}
.col-5-5 > div + div {
    margin-top: 0 !important;
    margin-left: calc(34px / 2);
}


.wrap {
    width: calc(1805px / 2);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -45%);
}

main {
    height: calc(1246px / 2);
    position: relative;
}
.img-main {
    width: 103.5%;
    position: relative;
    transform: translate(-0.7%, -0.7%);
}
.img-title {
    width: calc(1214px / 2);
    position: absolute;
    left: calc(282px / 2);
    top: calc(56px / -2);
}
.btn-detail {
    width: calc(176px / 2);
    position: absolute;
    left: calc(32px / 2);
    top: calc(1042px / 2);
}
.btn-start {
    width: calc(530px / 2);
    position: absolute;
    left: calc(358px / 2);
    top: calc(894px / 2);
}
.btn-home, .btn-survey {
    display: block;
    width: calc(98px / 2);
    height: calc(107px / 2);
    position: absolute;
    left: calc(80px / 2);
    top: calc(125px / 2);
}
.btn-survey {
    top: calc(299px / 2);
}

.input-wrap {
    width: calc(1169px / 2);
    position: absolute;
    left: calc(506px / 2);
    display: flex;
    flex-direction: column;
    --skyblue : #CCF6F1;
    --purple : #584197;
}
/* input-wrap 위치 */
.input-wrap.positon-1 {
    top: calc(500px / 2);
}
/* 제목이 2.5줄 일때 */
.input-wrap.positon-2 {
    top: calc(483px / 2);
}
/* 제목이 2줄 일때 */
.input-wrap.positon-3 {
    top: calc(410px / 2);
}

input, textarea {
    height: calc(113px / 2);
    padding: 0 calc(45px / 2);
    border-radius:calc(20px / 2);
    border: none;
    outline: none;
    opacity: 1 !important;
    font-family: "Noto Sans KR", sans-serif;
    font-size: calc(50px / 2);
    color: #101010;
    -webkit-appearance: none;
}
input::placeholder,
textarea::placeholder {
    color: #CBCBCB;
}

/* 사용자 정보 입력 */
.input-wrap.user {
    width: calc(1126px / 2);
    left: calc(555px / 2);
    top: calc(842px / 2);
}
.input-wrap.user input {
    background-color: #DADBDC;
}
.input-wrap.user input + input {
    margin-top: calc(29px / 2);
}
/* 텍스트 입력, 체크박스, 라디오 */
.input-group.percent, .check-group, .radio-group  {
    height: calc(113px / 2);
    border-radius: calc(20px / 2);
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}
.input-group.cycle input {
    height: calc(152px / 2);
    border-radius: calc(20px / 2);
    background-color: #ffffff;
    padding: calc(46px / 2);
    font-size: calc(37px / 2);
}
.input-group + .input-group,
.check-group + .check-group,
.radio-group + .radio-group {
    margin-top:  calc(34px / 2);
}
.input-group .left,
.input-group .right,
.check-group .left,
.check-group .right,
.radio-group .left,
.radio-group .right {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.input-group .left,
.check-group .left,
.radio-group .left{
    width: 100%;
    height: 100%;
    justify-content: start;
}
.input-group .input-number,
.check-group .input-number,
.radio-group .input-number{
    padding-left: calc(43px / 2);
    padding-right: calc(24px / 2);
}
.input-group .input-number span,
.check-group .input-number span,
.radio-group .input-number span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(50px / 2);
    height: calc(50px / 2);
    border-radius: 50%;
    background-color: var(--skyblue);
    color: var(--purple);
    font-weight: 300;
    font-size: calc(39px / 2);
}
.input-group .input-label,
.check-group .input-label,
.radio-group .input-label{
    height: 100%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: calc(50px / 2);
    color: var(--purple);
}
.input-group .input-label.ko,
.check-group .input-label.ko,
.radio-group .input-label.ko{
    font-size: calc(43px / 2);
    line-height: 1;
}
.input-group .input-label.ko small,
.check-group .input-label.ko small,
.radio-group .input-label.ko small{
    font-size: calc(36px / 2);
}
.input-group .input-etc,
.check-group .input-etc,
.radio-group .input-etc{
    width: 100%;
    padding: 0 calc(23px / 2) 3px;
    font-size: calc(37px / 2);
    background: transparent;
}
.input-group .right,
.check-group .right,
.radio-group .right{
    padding-right: calc(32px / 2);
}
.input-group .input-per {
    width: calc(187px / 2);
    text-align: right;
    padding: 0 8px 3px;
    font-family: "Noto Sans KR", sans-serif;
    color: #101010;
}

/* 분할시 input 관련 */
.col-5-5 .input-group .input-label,
.col-5-5 .check-group .input-label,
.col-5-5 .radio-group .input-label{
    font-size: calc(47px / 2);
    letter-spacing: -1px;
}
.col-5-5 .input-group .input-per,
.col-5-5 ~ .input-group .input-per {
    width: calc(135px / 2);
    font-size: calc(47px / 2);
}
.check-group input[type="checkbox"],
.radio-group input[type="radio"]{
    display: none;
}
.check-group .input-label,
.radio-group .input-label{
    width: 100%;
    letter-spacing: -1.5px;
}
.check-group .input-label + .input-etc,
.radio-group .input-label + .input-etc{
    width: 83%;
    position: absolute;
    right: 0;
}
/* 기타가 1줄 전체를 차지할 경우 .etc-long */
.check-group.etc-long,
.radio-group.etc-long{
    /* height: calc(183px / 2); */
    border-radius: calc(20px / 2) calc(20px / 2) 0 0;
}
.check-group.etc-long .left,
.radio-group.etc-long .left {
    flex-wrap: wrap;
}
.check-group.etc-long .input-label,
.radio-group.etc-long .input-label{
    height: 60%;
}
.check-group.etc-long .input-label + .input-etc,
.radio-group.etc-long .input-label + .input-etc{
    width: 92%;
    position: relative;
    top: -18px;
    left: 47px;
}
.check-group.etc-long textarea,
.radio-group.etc-long textarea{
    width: 100%;
    min-height: 43px;
    /* height: 43px; */
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 60px;
    position: absolute;
    top: 100%;
    border-radius: 0 0 calc(20px / 2) calc(20px / 2);
}

/* 체크박스 활성 .checked */
.check-group.checked,
.radio-group.checked{
    background: #00BAC0;
}
.check-group.checked .input-number span,
.radio-group.checked .input-number span{
    background-color: var(--purple);
    color: #ffffff;
    font-weight: 600;
}
.check-group.checked .input-label,
.radio-group.checked .input-label{
    font-weight: 600;
    color: var(--purple);
}
.check-group.checked .input-etc,
.check-group.checked input::placeholder,
.check-group.checked textarea::placeholder,
.radio-group.checked .input-etc,
.radio-group.checked input::placeholder,
.radio-group.checked textarea::placeholder{
    color: #ffffff;
}
.check-group.checked textarea,
.radio-group.checked textarea{
    background: #00BAC0;
    color: #ffffff;
}

/* 퍼센트 토탈 */
.input-group.total {
    margin-top: calc(14px / 2);
}
.input-group.total .right {
    padding-right: calc(28px / 2);
    justify-content: flex-end;
}
.input-group.total .input-label {
    font-weight: 500;
}
.input-group.total .input-per {
    height: auto;
    background-color: transparent;
    pointer-events: none;
}

/* textarea */
textarea {
    min-height: calc(152px / 2);
    max-height: 360px;
    padding: calc(46px / 2);
    resize: none;
    font-size: calc(37px / 2);
}
/* textarea > 영역 좁을때 */
textarea.short {
    max-height: 160px;
}

/* input, textarea 비활성 관련 */
input.disabled, textarea.disabled {
    background-color: #a2b9b7;
    pointer-events: none;
}
input.disabled::placeholder, textarea.disabled::placeholder {
    color: #728280;
}



/* 데코 */
.deco:before {
    content: "";
    background: no-repeat center / cover url("../images/deco.png");
    width: calc(387px / 2);
    height: calc(387px / 2);
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(40%, 17%);
}

.deco.small:before {
    width: calc(379px / 2);
    height: calc(379px / 2);
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(32%, 40%);
}

/* video 관련 */
video {
    width: calc(1341px / 2);
    /* height: calc(379px / 2); */
    position: absolute;
    left: calc(356px / 2);
    top: calc(220px / 2);;
}

/* modal 관련 */
.btn-modal {
    position: absolute;
    top: calc(842px / 2);
    cursor: pointer;
}
.btn-modal-1{
    width: calc(920px / 2);
    left: calc(790px / 2);
}
.btn-modal-2{
    width: calc(708px / 2);
    left: calc(1002px / 2);
}
.btn-modal-3{
    width: calc(1058px / 2);
    left: calc(651px / 2);
}

.modal-wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: none;
}
.modal-wrap::before {
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    background: rgba(0, 0, 0, 0.5);
}
.modal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(1806px/ 2);
    height: auto;
}
.modal .inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.modal .btn-close {
    width: calc(42px/ 2);
    height: calc(42px/ 2);
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    cursor: pointer;
}


/* footer */
footer {
    height: calc(145px / 2);
}
footer .logo-btn-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: calc(25px / 2);
}
footer .logo {
    width: calc(334px / 2);
}
footer .page-btn-group {
    display: flex;
}
footer .page-btn-group .btn {
    width: calc(86px / 2);
    cursor: pointer;
}
footer .page-btn-group .btn + .btn {
    margin-left: calc(118px / 2);
}

.page-1 footer .logo-btn-group {
    display: none;
}

@media (max-height: 768px) {
    .wrap {
        transform: translate(-50%, -45%) scale(0.9);
    }
}