/* PC 최적화 된 예외 css 코드 */
@media (min-width: 501px) {
    .section {
        background-image: url(/img/recruit_detail_bg.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position-y: 66px;
    }
    .section .recruits-box {
        padding-top: 120px;
        margin-bottom: 120px;
        box-sizing: border-box;
    }
    .section .recruits-box .top {
        display: flex;
        flex-direction: column;
        padding-bottom: 40px;
        border-bottom: 1px solid #C9CACA;
    }
    .section .recruits-box .top .title {
        font-size: 36px;
        font-family: 'Noto Sans KR Bold';
        color: #5E9441;
        margin-bottom: 10px;
    }
    .section .recruits-box .top .contents {
        font-size: 16px;
    }
    .section .recruits-box .top .contents span:first-child {
        padding-right: 16px;
        border-right: 1px solid;
    }
    .section .recruits-box .top .contents span:nth-child(2) {
        padding: 0 16px;
        border-right: 1px solid;
    }
    .section .recruits-box .top .contents span:last-child {
        padding: 0 16px;
    }
    .section .recruits-box .main .recruit-box .card {
        padding-top: 40px;
    }
    .section .recruits-box .main .recruit-box .card:first-child {
        padding-top: 0px;
    }
    .section .recruits-box .main {
        display: flex;
        height: auto;
        margin-top: 40px;
        justify-content: space-between;
    }
    .section .recruits-box .main .recruit-box {
        width: 920px;
    }
    .section .recruits-box .main .recruit-box .card .title {
        margin-bottom: 14px;
        font-size: 22px;
        font-family: 'Noto Sans KR Bold';
    }
    .section .recruits-box .main .recruit-box .card .contents{
        padding: 30px;
        font-size: 16px;
        background-color: #F7F8F8;
    }
    .section .recruits-box .main #apply-button {
        width: 370px;
        height: 72px;
        border-radius: 10px;
        right: 0;
        background-color: #5E9441;
        position: sticky;
        top: 108px;
    }
    .section .recruits-box .main #apply-button a {
        width: 100%;
        height: 100%;
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        text-decoration: none;
        font-size: 22px;
        font-family: 'Noto Sans KR Bold';
        color: #FFFFFF;
    }

    .section .apply-box {
        padding-top: 120px;
        margin-bottom: 120px;
        box-sizing: border-box;
    }
    .section .apply-box .top {
        width: 680px;
        margin: 0 auto;
        padding-bottom: 40px;
        border-bottom: 1px solid #C9CACA;
    }
    .section .apply-box .top .title {
        font-size: 36px;
        font-family: 'Noto Sans KR Bold';
        color: #5E9441;
        margin-bottom: 10px;
    }
    .section .apply-box .top .contents {
        font-size: 16px;
    }
    .section .apply-box .main {
        width: 680px;
        margin: 40px auto;
    }
    .section .apply-box .main #frm {
        display: flex;
        flex-direction: column;
        row-gap: 40px;
        font-size: 22px;
    }
    .section .apply-box .main #frm .form-group {
        display: flex;
        flex-direction: column;
        row-gap: 14px;
    }
    .section .apply-box .main #frm .form-group .title-sub {
        font-size: 16px;
    }
    .section .apply-box .main #frm .form-group input {
        margin: 0;
        box-sizing: border-box;
        width: 100%;
        height: 44px;
        padding-left: 30px;
        border: 1px solid #DFDFDF;
        border-radius: 10px;
        font-size: 16px;
    }
    .section .apply-box .main #frm .form-group input:focus {
        outline: none;
    }

    .section .apply-box .main #frm .form-group .attach-box {
        position: relative;
    }
    .section .apply-box .main #frm .form-group .attach-box label {
        display: block;
        padding-left: 30px;
        padding-top: 13px;
        padding-bottom: 13px;
        border: 1px solid #DFDFDF;
        border-radius: 10px;
        font-size: 16px;
        cursor: pointer;
    }
    .section .apply-box .main #frm .form-group .attach-box .attach-arrow {
        display: block;
        position: absolute;
        cursor: pointer;
        font-size: 22px;
        right: 10px;
        top: 15px;
        width: 16px;
        height: 16px;
        background-image: url(/img/attach_arrow.png);
        background-repeat: no-repeat;
    }
    .section .apply-box .main #frm .form-group .attach-box input[type="file"] {
        display: none;
    }
    .section .apply-box .main #frm .form-group .urls-box {
        display: flex;
        flex-direction: column;
        row-gap: 14px;
    }
    .section .apply-box .main #frm .form-group .url-box {
        position: relative;
        font-size: 22px;
    }
    .section .apply-box .main #frm .form-group .url-box .url-icon {
        position: absolute;
        display: block;
        background-size: 16px;
        right: 10px;
        top: 15px;
        width: 16px;
        height: 16px;
        background-image: url(/img/url_icon.png);
        background-repeat: no-repeat;
    }
    .section .apply-box .main #frm .form-group .url-plus-box {
        display: flex;
        column-gap: 10px;
        font-size: 16px;
        color: #B2B2B2;
    }
    .section .apply-box .main #frm .form-group .url-plus-box .plus-round-icon {
        display: block;
        width: 24px;
        height: 24px;
        background-image: url(/img/plus_round_icon.png);
        background-size: 24px;
        background-repeat: no-repeat;
    }
    .section .apply-box .main #frm .form-group .url-plus-box #url-plus-btn,
    .section .apply-box .main #frm .form-group .url-plus-box #portfolio-url-plus-btn{
        cursor: pointer;
    }
    .section .apply-box .main .law-groups {
        margin-top: 100px;
        display: flex;
        flex-direction: column;
        row-gap: 40px;
    }
    .section .apply-box .main .law-groups .law-group {
        display: flex;
        flex-direction: column;
        row-gap: 8px;
    }
    .section .apply-box .main .law-groups .law-group p {
        margin-bottom: 5px;
    }
    .section .apply-box .main .law-groups .law-group .title {
        font-family: 'Noto Sans KR Bold';
        font-size: 16px;
    }
    .section .apply-box .main .law-groups .law-group .contents {
        font-size: 16px;
    }
    .section .apply-box .main .law-groups .law-group .personal-info-select-box {
        display: flex;
        height: 48px;
        font-size: 22px;
        align-items: center;
        border-radius: 10px;
        justify-content: space-between;
        padding-right: 30px;
        padding-left: 30px;
        background-color: rgb(255 255 255);
    }
    .section .apply-box .main .law-groups .law-group .personal-info-contents-box {
        display: none;
        padding: 30px 30px;
    }
    .section .apply-box .main .law-groups .law-group .input-box {
        display: flex;
        column-gap: 10px;
        align-items: center;
        font-size: 16px;
    }
    .section .apply-box .main .law-groups .law-group .input-box input {
        width: 18px;
        padding: 0;
        margin: 0;
        height: 18px;
    }
    .section .apply-box .main .law-groups .law-group .input-box .required-badge {
        display: inline-block;
        width: fit-content;
        height: 24px;
        padding: 2px 10px;
        border-radius: 5px;
        font-size: 16px;
        background-color: #FF6E5F;
        color: #FFFFFF;
    }
    .section .apply-box .main .law-groups .law-group .input-box .optional-badge {
        display: inline-block;
        width: fit-content;
        height: 24px;
        padding: 2px 10px;
        border-radius: 5px;
        font-size: 16px;
        background-color: #F3F3F3;
        color: #000000;
    }
    .section .apply-box .bottom {
        width: 680px;
        padding-top: 40px;
        border-top: 1px solid #C9CACA;
        display: flex;
        justify-content: end;
        margin: 40px auto;
    }
    .section .bottom a.apply-button, .section .bottom a.confirm-button{
        display: block;
        width: 140px;
        height: 48px;
        font-size: 18px;
        font-family: 'Noto Sans KR Bold';
        text-align: center;
        align-content: center;
        background: #5E9441;
        border-radius: 10px;
        color: #FFFFFF;
        text-decoration: none;
        cursor: pointer;
    }
    .section .bottom a.back-button {
        display: block;
        width: 140px;
        height: 48px;
        margin-right: 15px;
        font-size: 18px;
        font-family: 'Noto Sans KR Bold';
        text-align: center;
        align-content: center;
        border: 1px solid #5E9441;
        border-radius: 10px;
        color: #5E9441;
        text-decoration: none;
        cursor: pointer;
    }
    .section .arrow-bottom-icon {
        display: block;
        cursor: pointer;
        transform: rotate(90deg);
        background-image: url(/img/arrow_right.png);
        background-position-x: 6px;
        background-position-y: 3px;
        width: 20px;
        height: 20px;
        background-repeat: no-repeat;
    }


    .section .apply-confirm-box {
        padding-top: 120px;
        margin-bottom: 120px;
        box-sizing: border-box;
        height: calc(100vh - 280px);
        align-content: center;
    }
    .section .apply-confirm-box .top {
        width: 680px;
        margin: 0 auto;
        padding-bottom: 40px;
        border-bottom: 1px solid #C9CACA;
    }
    .section .apply-confirm-box .top .title {
        font-size: 36px;
        font-family: 'Noto Sans KR Bold';
        color: #5E9441;
        margin-bottom: 10px;
    }
    .section .apply-confirm-box .top .contents {
        font-size: 16px;
    }
    .section .apply-confirm-box .main {
        width: 680px;
        margin: 40px auto;
    }
    .section .apply-confirm-box .bottom {
        width: 680px;
        padding-top: 40px;
        border-top: 1px solid #C9CACA;
        display: flex;
        justify-content: end;
        margin: 40px auto;
    }
    .section .main .apply-confirm-info-box {
        font-size: 22px;
        display: flex;
        flex-direction: column;
        row-gap: 14px;
    }
    .section .complete-box {
        padding-top: 120px;
        margin-bottom: 120px;
        box-sizing: border-box;
        height: calc(100vh - 280px);
        align-content: center;
    }
    .section .complete-box .main {
        width: 680px;
        margin: 40px auto;
        display: flex;
        flex-direction: column;
        row-gap: 40px;
    }
    .section .complete-box .main .title {
        font-size: 36px;
        font-family: 'Noto Sans KR Bold';
        color: #5E9441;
    }
    .section .complete-box .main .contents {
        font-size: 16px;
    }
    .section .complete-box .main .sub-contents {
        font-size: 16px;
        color: #B2B2B2;
    }
    .custom-select-lab {
        position: relative;
    }
    .custom-select-lab select {
        width: 100%;
        height: 44px;
        box-sizing: border-box;
        font-size: 16px;
        padding-left: 30px;
        background: #FFFFFF;
        border: 1px solid #D1D1D1;
        border-radius: 10px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
    }
    .custom-select-lab select:focus {
        outline: none;
    }
    .custom-select-lab .select-arrow {
        background-image: url(/img/select_arrow_icon.png);
        width: 13px;
        height: 8px;
        display: block;
        top: 18px;
        position: absolute;
        right: 18px;
    }



}

/* MOBILE 최적화 된 예외 css 코드 */
@media (max-width: 500px) {
    .section {
        background-image: url(/img/recruit_detail_bg_m.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position-y: 60px;
    }
    .section .recruits-box {
        padding-top: 60px;
        margin-top: 40px;
        margin-bottom: 40px;
        box-sizing: border-box;
    }
    .section .recruits-box .top {
        display: flex;
        flex-direction: column;
        padding-bottom: 24px;
        border-bottom: 1px solid #C9CACA;
    }
    .section .recruits-box .top .title {
        font-size: 20px;
        font-family: 'Noto Sans KR Bold';
        color: #5E9441;
        margin-bottom: 6px;
    }
    .section .recruits-box .top .contents {
        font-size: 14px;
    }
    .section .recruits-box .top .contents span:first-child {
        padding-right: 5px;
        border-right: 1px solid;
    }
    .section .recruits-box .top .contents span:nth-child(2) {
        padding: 0 10px;
        border-right: 1px solid;
    }
    .section .recruits-box .top .contents span:last-child {
        padding: 0 5px;
    }
    .section .recruits-box .main .recruit-box .card {
        padding-top: 40px;
    }
    .section .recruits-box .main .recruit-box .card:first-child {
        padding-top: 0px;
    }
    .section .recruits-box .main {
        margin-top: 25px;
    }

    .section .recruits-box .main .recruit-box .card .title {
        margin-bottom: 14px;
        font-size: 18px;
        font-family: 'Noto Sans KR Bold';
    }
    .section .recruits-box .main .recruit-box .card .contents{
        padding: 17px 20px;
        font-size: 16px;
        background-color: #F7F8F8;
    }
    .section .recruits-box .main #apply-button {
        width: 100%;
        height: 72px;
        position: fixed;
        bottom: 0;
        left: 0;
        align-content: center;
        text-align: center;
        box-shadow: 0px -5px 11px 15px white;
        background: white;
        z-index: 49;
    }
    .section .recruits-box .main #apply-button a {
        width: 320px;
        height: 48px;
        border-radius: 10px;
        background-color: #5E9441;
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-family: 'Noto Sans KR Bold';
        color: #FFFFFF;
    }






    .section .apply-box {
        margin-top: 100px;
        margin-bottom: 100px;
        box-sizing: border-box;
    }
    .section .apply-box .top {
        width: 320px;
        margin: 0 auto;
    }
    .section .apply-box .top .title {
        font-size: 20px;
        font-family: 'Noto Sans KR Bold';
        color: #5E9441;
        margin-bottom: 4px;
    }
    .section .apply-box .top .contents {
        font-size: 14px;
    }
    .section .apply-box .main {
        width: 320px;
        margin: 24px auto;
    }
    .section .apply-box .main #frm {
        display: flex;
        flex-direction: column;
        row-gap: 24px;
        font-size: 18px;
    }
    .section .apply-box .main #frm .form-group {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }
    .section .apply-box .main #frm .form-group .title-sub {
        font-size: 14px;
    }
    .section .apply-box .main #frm .form-group input {
        margin: 0;
        box-sizing: border-box;
        width: 100%;
        height: 48px;
        padding-left: 20px;
        border: 1px solid #DFDFDF;
        border-radius: 10px;
        font-size: 16px;
    }
    .section .apply-box .main #frm .form-group .attach-box {
        position: relative;
    }
    .section .apply-box .main #frm .form-group .attach-box label {
        display: block;
        padding-left: 20px;
        padding-top: 14px;
        padding-bottom: 14px;
        border: 1px solid #DFDFDF;
        border-radius: 10px;
        font-size: 16px;
        cursor: pointer;
    }
    .section .apply-box .main #frm .form-group .attach-box .attach-arrow {
        display: block;
        position: absolute;
        cursor: pointer;
        font-size: 22px;
        right: 20px;
        top: 16px;
        width: 16px;
        height: 16px;
        background-image: url(/img/attach_arrow.png);
        background-repeat: no-repeat;
    }
    .section .apply-box .main #frm .form-group .attach-box input[type="file"] {
        display: none;
    }
    .section .apply-box .main #frm .form-group .urls-box {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }
    .section .apply-box .main #frm .form-group .url-box {
        position: relative;
        font-size: 16px;
    }
    .section .apply-box .main #frm .form-group .url-box .url-icon {
        position: absolute;
        display: block;
        background-size: 16px;
        right: 20px;
        top: 16px;
        width: 16px;
        height: 16px;
        background-image: url(/img/url_icon.png);
        background-repeat: no-repeat;
    }
    .section .apply-box .main #frm .form-group .url-plus-box {
        display: flex;
        column-gap: 10px;
        font-size: 16px;
        color: #B2B2B2;
    }
    .section .apply-box .main #frm .form-group .url-plus-box .plus-round-icon {
        display: block;
        cursor: pointer;
        width: 24px;
        height: 24px;
        background-image: url(/img/plus_round_icon.png);
        background-size: 24px;
        background-repeat: no-repeat;
    }


    .section .apply-box .main .law-groups {
        margin-top: 42px;
        display: flex;
        flex-direction: column;
        row-gap: 24px;
    }
    .section .apply-box .main .law-groups .law-group {
        display: flex;
        flex-direction: column;
        row-gap: 8px;
    }
    .section .apply-box .main .law-groups .law-group p {
        margin-bottom: 5px;
    }
    .section .apply-box .main .law-groups .law-group .title {
        font-family: 'Noto Sans KR Bold';
        font-size: 16px;
    }
    .section .apply-box .main .law-groups .law-group .contents {
        font-size: 16px;
    }
    .section .apply-box .main .law-groups .law-group .personal-info-select-box {
        display: flex;
        height: 48px;
        font-size: 14px;
        align-items: center;
        border-radius: 10px;
        justify-content: space-between;
        padding-right: 20px;
        padding-left: 20px;
        background-color: rgb(255 255 255);
    }
    .section .apply-box .main .law-groups .law-group .personal-info-contents-box {
        display: none;
        padding: 20px 20px;
    }
    .section .apply-box .main .law-groups .law-group .input-box {
        display: flex;
        column-gap: 10px;
        align-items: center;
    }
    .section .apply-box .main .law-groups .law-group .input-box input {
        width: 18px;
        height: 18px;
        padding: 0;
        margin: 0;
    }
    .section .apply-box .main .law-groups .law-group .input-box .required-badge {
        display: inline-block;
        width: fit-content;
        height: 24px;
        padding: 2px 10px;
        border-radius: 5px;
        font-size: 14px;
        background-color: #FF6E5F;
        color: #FFFFFF;
    }
    .section .apply-box .main .law-groups .law-group .input-box .optional-badge {
        display: inline-block;
        width: fit-content;
        height: 24px;
        padding: 2px 10px;
        border-radius: 5px;
        font-size: 14px;
        background-color: #F3F3F3;
        color: #000000;
    }
    .section .apply-box .bottom {
        width: 320px;
        padding-top: 24px;
        border-top: 1px solid #C9CACA;
        margin: 24px auto;
    }
    .section .bottom a.apply-button {
        display: block;
        width: 100%;
        height: 48px;
        font-size: 16px;
        font-family: 'Noto Sans KR Bold';
        text-align: center;
        align-content: center;
        background: #5E9441;
        border-radius: 10px;
        color: #FFFFFF;
        text-decoration: none;
    }
    .section .bottom a.back-button {
        display: block;
        margin-right: 15px;
        width: 100%;
        height: 48px;
        font-size: 16px;
        font-family: 'Noto Sans KR Bold';
        text-align: center;
        align-content: center;
        border-radius: 10px;
        border: 1px solid #5E9441;
        color: #5E9441;
        text-decoration: none;
    }
    .section .arrow-bottom-icon {
        display: block;
        cursor: pointer;
        transform: rotate(90deg);
        background-image: url(/img/arrow_right.png);
        background-position-x: 6px;
        background-position-y: 3px;
        width: 20px;
        height: 20px;
        background-repeat: no-repeat;
    }


    .section .apply-confirm-box {
        margin-top: 100px;
        margin-bottom: 100px;
        box-sizing: border-box;
    }
    .section .apply-confirm-box .top {
        width: 320px;
        margin: 0 auto;
        padding-bottom: 24px;
        border-bottom: 1px solid #C9CACA;
    }
    .section .apply-confirm-box .top .title {
        font-size: 20px;
        font-family: 'Noto Sans KR Bold';
        color: #5E9441;
        margin-bottom: 4px;
    }
    .section .apply-confirm-box .top .contents {
        font-size: 14px;
    }
    .section .apply-confirm-box .main {
        width: 320px;
        margin: 24px auto;
    }
    .section .apply-confirm-box .bottom {
        width: 320px;
        padding-top: 24px;
        border-top: 1px solid #C9CACA;
        display: flex;
        margin: 24px auto;
    }

    .section .main .apply-confirm-info-box {
        font-size: 16px;
        display: flex;
        flex-direction: column;
        row-gap: 13px;
    }




    .section .complete-box {
        margin-top: 100px;
        margin-bottom: 100px;
        box-sizing: border-box;
        align-content: center;
    }
    .section .complete-box .main {
        width: 320px;
        margin: 24px auto;
        display: flex;
        flex-direction: column;
        row-gap: 40px;
    }
    .section .complete-box .main .title {
        font-size: 28px;
        font-family: 'Noto Sans KR Bold';
        color: #5E9441;
    }
    .section .complete-box .main .contents {
        font-size: 16px;
    }
    .section .complete-box .main .sub-contents {
        font-size: 14px;
        color: #B2B2B2;
    }
    .custom-select-lab {
        position: relative;
    }
    .custom-select-lab select {
        width: 100%;
        height: 48px;
        box-sizing: border-box;
        font-size: 16px;
        padding-left: 20px;
        background: #FFFFFF;
        border: 1px solid #D1D1D1;
        border-radius: 10px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
    }
    .custom-select-lab select:focus {
        outline: none;
    }
    .custom-select-lab .select-arrow {
        background-image: url(/img/select_arrow_icon.png);
        width: 13px;
        height: 8px;
        display: block;
        top: 20px;
        position: absolute;
        right: 18px;
    }





}