@charset "utf-8";

/* #content */
.img_box img {width: 100%;}
.block {display: block;}

section > .inner {padding: 160px 16.66%; box-sizing: border-box;}
section > .inner h3 {font-size: 64px; line-height: 80px; letter-spacing: -1px; text-align: center; margin-bottom: 80px;}

.sub_visual {width: 100%; padding-top: calc(950/1920 * 100%); position: relative; background-image: url(../images/img_visual.png);
    background-repeat: no-repeat; background-position: top center; background-size: cover;}
.sub_visual .inner {padding: 0;}
.sub_visual .inner .text_box {position: absolute; top: 50%; left: 16%; transform: translateY(-50%); color: #fff;}
.sub_visual .inner .text_box h3 {font-size: 72px; line-height: 90px; letter-spacing: -1px; text-align: left; margin-bottom: 24px;}
.sub_visual .inner .text_box h3 span {display: block; font-size: 24px; font-weight: 400; line-height: 1.2; margin-bottom: 24px;}
.sub_visual .inner .text_box p {font-size: 28px; letter-spacing: -1px;}


.models .inner {padding: 160px 0 0;}
.models .inner h3 span {display: block;}


.requirements {background: #F0EBFF;}
.requirements .inner {padding: 140px 23%;}
.requirements .inner h3 {font-size: 48px; margin-bottom: 40px;}
.requirements .inner .necessary {display: flex; justify-content: space-between; gap: 60px; margin-bottom: 100px;}
.requirements .inner .necessary li {width: 30%; position: relative;}
.requirements .inner .necessary li::after {content: ''; display: block; width: 100%; padding-top: 100%;}
.requirements .inner .necessary li > div {width: 100%; height: 100%; box-shadow: 0 0 40px rgba(113, 63, 255, .1); background: rgba(255,255,255,.6); border-radius: 50%; 
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center;}
.requirements .inner .necessary li > div h4 {font-weight: 400; font-size: 24px; letter-spacing: -1px; color: #474A4D;}
.requirements .inner .necessary li > div p strong {display: block; font-weight: 600; font-size: 38px; line-height: 46px; letter-spacing: -1px;}
.requirements .inner .info_box {text-align: center;}
.requirements .inner .info_box .step_box {display: flex; justify-content: space-between;}
.requirements .inner .info_box .step_box li {width: 33%; position: relative;}
.requirements .inner .info_box .step_box li::before {content: ''; display: block; width: 100%; height: 2px; background: #E1D6FF;
    position: absolute; top: 79px; left: 50%;}
.requirements .inner .info_box .step_box li::after {content: ''; display: block; width: 0; height: 2px; background: #713FFF;
    position: absolute; top: 79px; left: 50%;}
.requirements .inner .info_box .step_box li.on::after {animation: step-progress 2s linear forwards;}
.requirements .inner .info_box .step_box li:last-child:before {display: none;}
.requirements .inner .info_box .step_box li:last-child::after {display: none;}
.requirements .inner .info_box .step_box li .num {display: inline-block; font-weight: 700; font-size: 24px; line-height: 48px; height: 48px; padding: 0 19.5px;
    border: 2px solid #9570FF; border-radius: 100px; color: #713FFF; margin-bottom: 60px; position: relative;}
.requirements .inner .info_box .step_box li.on .num {background-color: #9570FF; color: #fff;}
.requirements .inner .info_box .step_box li .num::after {content: ''; display: block; width: 12px; height: 12px; border-radius: 50%;
    border: 3px solid #713FFF; box-sizing: border-box; background: #F0EBFF; position: absolute; bottom: -36px; left: 50%; transform: translateX(-50%); z-index: 2;}
.requirements .inner .info_box .step_box li.on .num::after {background-color: #713FFF;}
.requirements .inner .info_box .step_box li p {font-weight: 700; font-size: 28px; line-height: 1.5; letter-spacing: -1px;}
.requirements .inner .info_box .step_box li p span {display: block; font-weight: 400; font-size: 21px; line-height: 32px;}

@keyframes step-progress {
    from {width: 0;}
    to {width: 100%;}
}


.apply .inner .apply_step {display: flex; gap: 54px; background: #FAFAFA; border-radius: 30px; padding: 60px 10%; margin-bottom: 60px;}
.apply .inner .apply_step li {width: 23%; text-align: center; box-sizing: border-box; position: relative;}
.apply .inner .apply_step li::before {content: ''; display: block; width: 32px; height: 32px; background: url(../images/arrow_right.png) center no-repeat; 
    background-size: contain; position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);}
.apply .inner .apply_step li:last-child:before {display: none;}
.apply .inner .apply_step li .icon_box {width: 50%; padding-top: 50%; background-repeat: no-repeat; background-position: center; background-size: contain; margin: 0 auto 12px;}
.apply .inner .apply_step li p {font-weight: 600; font-size: 24px; line-height: 29px; letter-spacing: -1px;}
.apply .inner .btn_box {text-align: center; margin-top: 80px;}
.apply .inner .btn_box a {display: inline-block; font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -1px; color: #fff; text-align: center;
    padding: 24.5px 44.5px; background: #713FFF; border-radius: 100px;}

/* 신청란 form [s] */
.input_wrap .notice {font-size: 18px; letter-spacing: -1px; text-align: right; margin-bottom: 1.2em;}
.input_wrap .required_text {color: #713FFF; font-size: 21px;}
.input_wrap .notice span {font-weight: 500; font-size: 21px;}
.input_wrap .model_info {width: 100%; border-top: 1px solid #713FFF; border-collapse: collapse; box-sizing: border-box;}
.input_wrap .model_info tr {border-bottom: 1px solid #DFE0E2;}
.input_wrap .model_info tr > th {width: 25%; padding: 21px 3%; box-sizing: border-box; text-align: left; white-space: nowrap;}
.input_wrap .model_info tr > th > span {font-weight: 500; font-size: 24px; letter-spacing: -1px; white-space: nowrap;}
.input_wrap .model_info tr > td {width: 75%; padding: 21px 3%; box-sizing: border-box; font-size: 21px; letter-spacing: -1px;}
.input_wrap .model_info tr td input {background:#fff; border: 1px solid #C5C7C9; border-radius: 10px;
    width: 100%; height: 56px; padding: 17.5px 20px; box-sizing: border-box; font-size: 18px; letter-spacing: -1px;}
.input_wrap .model_info tr td input:focus {outline: none; border-color: #713FFF;}
.input_wrap .model_info tr td input[type="radio"] {width: 28px; height: 28px; background:#fff; border: 1px solid #C5C7C9; border-radius: 50%; padding: 0;  
    appearance: none; vertical-align: middle; margin: 0 8px 0 0; cursor: pointer; position: relative;}
.input_wrap .model_info tr td input[type="radio"]:checked::before {content: ''; display: block; width: 16px; height: 16px; border-radius: 50%; background:#713FFF; 
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100;}
.input_wrap .model_info tr.t_sex td span {display: inline-block; vertical-align: middle; margin-right: 28px;}
.input_wrap .model_info tr.t_sex td label {vertical-align: middle; cursor: pointer;}
.input_wrap .model_info tr.t_file td .photo_upload li {display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;}
.input_wrap .model_info tr.t_file td .photo_upload li:last-child {margin-bottom: 0;}
.input_wrap .model_info tr.t_file td .photo_upload li .file_title {flex-shrink: 0; display: inline-block; width: 60px; margin-right: 10px; font-size: 21px; letter-spacing: -1px; 
    color: #713FFF; vertical-align: middle; white-space: nowrap; position: relative;}
.input_wrap .model_info tr.t_file td .photo_upload li > div {flex-grow: 1; border: 1px solid #C5C7C9; white-space: nowrap;
    font-size: 18px; letter-spacing: -1px; border-radius: 10px; vertical-align: middle; position: relative;}
.input_wrap .model_info tr.t_file td .photo_upload li input {appearance: none; border: none; outline: none;}
.input_wrap .model_info tr.t_file td .photo_upload li input::placeholder {color: #AAADB0;}
.input_wrap .model_info tr.t_file td .photo_upload li label {display: inline-block; padding: 0 16px; background:#AAADB0; border-radius: 100px;
    font-weight: 500; font-size: 16px; line-height: 34px; letter-spacing: -1px; color:#fff; text-align: center; white-space: nowrap;
    position: absolute; top: 50%; right: 3%; transform: translateY(-50%);}
.input_wrap .model_info tr.t_file td .photo_upload input[type='file'] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; 
    overflow: hidden; clip: rect(0,0,0,0); border: 0;}


.input_wrap .agree_area {margin-top: 80px;}
.input_wrap .agree_area h4 {font-weight: 600; font-size: 28px; letter-spacing: -1px;}
.input_wrap .agree_area .sub_explain {font-size: 18px; letter-spacing: -1px; color: #777C81; margin-top: .8em;}
.input_wrap .agree_area ul {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 12px; 
    border: 1px solid #DFE0E2; border-radius: 10px; padding: 40px 5%; margin: 32px 0 24px;}
.input_wrap .agree_area ul li {font-size: 18px; line-height: 32px; letter-spacing: -1px; color: #474A4D; padding-left: 1rem; position: relative;}
.input_wrap .agree_area ul li::before {content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #474A4D; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.input_wrap .agree_area .checkbox_wrap {position: relative;}
.input_wrap .agree_area label span {font-size: 21px; letter-spacing: -1px; vertical-align: middle; display: inline-block; padding-left: 8px;}
.input_wrap .agree_area input[type="checkbox"] {-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}
.input_wrap .agree_area label {display: inline-block; cursor: pointer; vertical-align: middle; white-space: nowrap;}
.input_wrap .agree_area input[type="checkbox"] + label::before {content:''; display: inline-block; width: 28px; height: 28px; vertical-align: middle;
    border: 1px solid #DFE0E2; background-color: #fff; border-radius: 4px;}
.input_wrap .agree_area input[type="checkbox"]:checked + label::before {content:''; width: 28px; height: 28px; background-color: #713FFF; 
    background-image: url(../images/icon_check.png); background-repeat: no-repeat; background-position: center; background-size: 60% auto; border: 1px solid #713FFF;}

.input_wrap .register_realmodel {margin-top: 131px; text-align: center;}
.input_wrap .register_realmodel .btn_submit {display: inline-block; height: 82px; font-weight: 700; font-size: 28px; letter-spacing: -1px; color:#fff;
    background:#713FFF; border-radius: 100px; padding: 0 44.5px; vertical-align: middle;}
/* 신청란 form [e] */


/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    section > .inner {padding: 150px 10%;}

    .requirements .inner {padding: 140px 10%;}

}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    section > .inner {padding: 150px 8%;}

    .requirements .inner {padding: 140px 8%;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    section > .inner {padding: 150px 6%;}

    .requirements .inner {padding: 140px 6%;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    section > .inner {padding: 120px 5%;}
    section > .inner h3 {margin-bottom: 60px;}

    .sub_visual {padding-top: calc(1000/768 * 100%); background-image: url(../images/img_visual_tab.jpg);}
    .sub_visual .inner .text_box {position: absolute; top: auto; bottom: 80px; left: 5%; transform: translateY(0);}
    .sub_visual .inner .text_box h3 {margin-bottom: 20px;}
    .sub_visual .inner .text_box h3 span {font-size: 24px;}
    .sub_visual .inner .text_box p {font-size: 36px;}
    

    .models .inner {padding: 120px 0 0;}


    .requirements .inner {padding: 120px 5%;}
    .requirements .inner h3 {margin-bottom: 60px;}
    .requirements .inner .necessary {justify-content: center; gap: 0; flex-wrap: wrap; margin-bottom: 60px;}
    .requirements .inner .necessary li:nth-child(1) {width: 50%;}
    .requirements .inner .necessary li:nth-child(2) {margin-right: 5%;}
    .requirements .inner .necessary li {width: 47%;}


    .apply .inner .apply_step {gap: 72px; flex-wrap: wrap; padding: 48px 10%;}
    .apply .inner .apply_step li {width: 43%;}
    .apply .inner .apply_step li::before {left: calc(100% + 22px);}
    .apply .inner .apply_step li:nth-child(2n):before {display: none;}
    .apply .inner .btn_box {margin-top: 60px;}
    
    /* 신청란 form [s] */
    .input_wrap .model_info tr > th {padding: 20px 3%;}
    .input_wrap .model_info tr > th > span i {display: block;}
    .input_wrap .model_info tr > td {padding: 20px 3%;}
    .input_wrap .model_info tr.t_file td .photo_upload li {gap: 0;}
    .input_wrap .model_info tr.t_file td .photo_upload li label {padding: 0 13.5px;}
    
    
    .input_wrap .agree_area {margin-top: 60px;}
    .input_wrap .agree_area ul {grid-template-columns: repeat(1, 1fr); gap: 0; padding: 30px 5%;}
    
    .input_wrap .register_realmodel {margin-top: 60px;}
    /* 신청란 form [e] */
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }
    /* content */
    section > .inner {padding: 60px 5%;}
    section > .inner h3 {font-size: 34px; line-height: 44px;}

    .sub_visual {padding-top: calc(620/375 * 100%); background-image: url(../images/img_visual_mo.png);}
    .sub_visual .inner .text_box {bottom: 44px;}
    .sub_visual .inner .text_box h3 {font-size: 48px; line-height: 58px; margin-bottom: 14px;}
    .sub_visual .inner .text_box h3 span {font-size: 16px; margin-bottom: 14px;}
    .sub_visual .inner .text_box p {font-size: 18px;}


    .models .inner {padding: 60px 0 0;}
    .models .inner h3 {margin-bottom: 28px;}
    .models .inner h3 i {display: block;}


    .requirements .inner {padding: 60px 5%;}
    .requirements .inner h3 {font-size: 34px;}
    .requirements .inner .necessary {gap: 20px; margin-bottom: 40px;}
    .requirements .inner .necessary li {width: 100%;}
    .requirements .inner .necessary li:nth-child(1) {width: 100%;}
    .requirements .inner .necessary li:nth-child(2) {margin-right: 0;}
    .requirements .inner .necessary li::after {display: none;}
    .requirements .inner .necessary li > div {position: relative; width: 100%; height: auto; padding: 30px 0; border-radius: 100px;}
    .requirements .inner .necessary li > div h4 {font-size: 17px;}
    .requirements .inner .necessary li > div p strong {display: inline-block; font-size: 26px; line-height: 1.2;}
    .requirements .inner .info_box {text-align: left;}
    .requirements .inner .necessary li > div p .block {display: inline;}
    .requirements .inner .info_box {text-align: left;}
    .requirements .inner .info_box .step_box {flex-direction: column;}
    .requirements .inner .info_box .step_box li {width: 100%; padding-left: 25px; margin-left: 5%; box-sizing: border-box;}
    .requirements .inner .info_box .step_box li::before {width: 2px; height: 100%; top: 28px; left: 0;}
    .requirements .inner .info_box .step_box li::after {width: 2px; height: 0; top: 28px; left: 0;}
    .requirements .inner .info_box .step_box li .num {font-size: 18px; line-height: 40px; height: 40px; padding: 0 21.5px; margin-bottom: 16px;}
    .requirements .inner .info_box .step_box li .num::after {bottom: auto; top: 14px; left: -32.5px; transform: translateX(0);}
    .requirements .inner .info_box .step_box li p {font-weight: 600; font-size: 24px; margin-bottom: 74px;}
    .requirements .inner .info_box .step_box li:last-child p {margin-bottom: 0;}
    .requirements .inner .info_box .step_box li p span {display: inline; font-size: 18px;}
    @keyframes step-progress {
        from {height: 0;}
        to {height: 100%;}
    }

    .apply .inner .apply_step {gap: 44px; padding: 30px 5%;}
    .apply .inner .apply_step li::before {left: calc(100% + 10px);}
    .apply .inner .apply_step li .icon_box {width: 50%; padding-top: 50%; margin: 0 auto 8px;}
    .apply .inner .apply_step li p {font-size: 21px;}
    .apply .inner .apply_step li p i {display: block;}
    .apply .inner .btn_box a {font-size: 21px; padding: 19.5px 42.5px;}

    
    /* 신청란 form [s] */
    .input_wrap .notice {font-size: 16px;}
    .input_wrap .required_text {font-size: 18px;}
    .input_wrap .notice span {font-size: 18px;}
    .input_wrap .model_info tr > th {width: 30%; padding: 20px 3%;}
    .input_wrap .model_info tr > th > span {font-size: 18px;}
    .input_wrap .model_info tr > td {width: 70%; padding: 20px 3%; font-size: 18px;}
    .input_wrap .model_info tr td input {border-radius: 10px; padding: 18.5px 20px; font-size: 16px;}
    .input_wrap .model_info tr.t_file td .photo_upload li {flex-direction: column; gap: 6px;}
    .input_wrap .model_info tr.t_file td .photo_upload li .file_title {width: 100%; margin-right: 0; font-size: 18px;}
    .input_wrap .model_info tr.t_file td .photo_upload li > div {width: 100%; font-size: 16px;}
    
    
    .input_wrap .agree_area h4 {font-size: 24px;}
    .input_wrap .agree_area .sub_explain {font-size: 16px;}
    .input_wrap .agree_area .sub_explain i {display: block;}
    .input_wrap .agree_area ul {padding: 20px 5%; margin: 20px 0 24px;}
    .input_wrap .agree_area ul li {font-size: 16px; line-height: 28px;}
    .input_wrap .agree_area ul li::before {width: 4px; height: 4px;}
    .input_wrap .agree_area label span {font-size: 16px; padding-left: 6px;}
    .input_wrap .agree_area input[type="checkbox"] + label::before {width: 24px; height: 24px;}
    .input_wrap .agree_area input[type="checkbox"]:checked + label::before {width: 24px; height: 24px;}
    
    .input_wrap .register_realmodel .btn_submit {height: 64px; font-size: 21px; padding: 0 42.5px;}
    /* 신청란 form [e] */

}