@charset "utf-8";

/* 기본 공통 영역의 layout, color 등 style */
:root {-webkit-tap-highlight-color: transparent;-webkit-text-size-adjust: 100%;text-size-adjust: 100%;line-height: 1.5;overflow-wrap: break-word;word-break: break-word;}
html,body {height: 100%;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}

img,picture,video,canvas,svg {display: block;max-width: 100%;}
button {background-color: inherit; display: inline-block;border: 0; outline: 0;cursor: pointer;margin: 0; padding: 0; vertical-align: middle; font-family: var(--text-font);}
button:active, button:hover {background-color: inherit;border: 0; outline: 0;}
a {text-decoration: none; color: inherit; transition: color .3s;}
a:hover{color: inherit; text-decoration: none; background-color: inherit; font-weight: 700 !important;}

ol,ul,li {list-style: none;}

table {border-collapse: collapse;border-spacing: 0;}

b, strong{font-weight: bold;}

span, i{display: inline-block;}

:root {
    --c-main: #0046ff;
    --c-sub: #e3eaff;
    --c-point: #fdaa3e;
    --text-font: "OneShinhan", sans-serif;
}

html{font-size: 62.5%;} /* 1rem -> 10px */

body {
    width: 100%;
    height: 100%;
    color: #000;
    font-family: var(--text-font);
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 1.5;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* ======================== color ======================== */
.c-main{color: var(--c-main) !important;}
/* color end */

/* ======================== width/height ======================== */
.w-full {width: 100% !important;}

/* width/height end */

/* ======================== margin/padding/gap ======================== */
.m-auto{margin: 0 auto;}

.mt-0{margin-top: 0rem !important;}
.mt-6{margin-top: .6rem !important;}
.mt-10{margin-top: 1rem !important;}
.mt-20{margin-top: 2rem !important;}
.mt-30{margin-top: 3rem !important;}
.mt-40{margin-top: 4rem !important;}

.mb-0{margin-bottom: 0 !important;}
.mb-10{margin-bottom: 1rem !important;}
.mb-20{margin-bottom: 2rem !important;}
.mb-30{margin-bottom: 3rem !important;}
.mb-40{margin-bottom: 4rem !important;}

.mlr-auto{margin-left: auto; margin-right: auto;}

.ml-0{margin-left: 0 !important;}
.ml-4{margin-left: .4rem !important;}
.ml-6{margin-left: .6rem !important;}
.ml-8{margin-left: .8rem !important;}
.ml-10{margin-left: 1rem !important;}

.mr-0{margin-right: 0 !important;}

.pd-10{padding:1rem;}
.pt-50{padding-top:5rem;}
/* margin/padding end */

.gap-6{gap: .6rem;}
.gap-8{gap: .8rem;}
.gap-10{gap: 1rem;}
.gap-12{gap: 1.2rem;}
.gap-16{gap: 1.6rem;}


/* ======================== typography ======================== */
.font-light{font-weight: 100 !important;}
.font-normal{font-weight: 500 !important;}
.font-bold{font-weight: 800 !important;}

.font-14{font-size: 14px;}
.font-15{font-size: 15px;}
/* typography end */

/* ======================== display/align ======================== */
.tal {text-align: left !important}
.tac {text-align: center !important}
.tar {text-align: right !important}

.fl{float: left !important;}
.fr{float: right !important;}

.blind{position: absolute;width: 1px;height: 1px;overflow: hidden;}

.d-none {display: none !important;}
.d-block {display: block !important;}
.d-flex {display: flex;}
.d-flex-between{display: flex !important; justify-content: space-between !important;}
.flex-end{justify-content: flex-end;}
.justify-content-center{justify-content: center;}
.align-items-center{align-items: center !important;}
.align-items-end{align-items: end !important;}

.clearfix::after{content: '';display: block;clear: both;}

/* ======================== form ======================== */
label{
    display: inline-block;
    margin-bottom: .8rem;
    font-size: 1.5rem;
    font-family: var(--text-font);
    color: #000;
    vertical-align: middle;
    font-weight: lighter;
}

input, textarea, select, button{font-family: var(--text-font);}
input, select{
    width: 100%;
    border: 1px solid #d1dfff;
    box-sizing: border-box;
    padding: 0 .8rem;
    font-size: 15px;
    font-weight: 300;
    height: 4.4rem;
}

input:read-only{
    background-color: #eee;
}

textarea{
    width: 100%;
    border: 1px solid #d1dfff;
    font-size: 1.5rem;
    padding: .8rem;
    box-sizing: border-box;
    resize: none;
    height: 6rem;
}

input:focus,
textarea:focus,
select:focus{
    border-color: var(--c-main);
    outline-color: var(--c-main);
}

input[type="file"]{
    padding: 1rem .8rem;
}

/* checkbox */
.check input[type="checkbox"]{margin: 0; padding: 0;}

.check input + label{
    margin-bottom: 0;
}

.check input[type="checkbox"]{
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    position: relative;
    outline: 0;
    background: #fff;
    box-sizing: border-box;
}

.check input[type="checkbox"]::before{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.check input[type="checkbox"]:checked{
    background: var(--c-main);
}

.check input[type="checkbox"]:checked::before{
    content: '\f00c';
    font-weight: 600;
    padding-bottom: 0.5px;
    color: #fff;
    font-family: "Font Awesome 6 Free";
    font-size: 16px;
}

/* radio */
.radio{
    display: inline-block;
    flex: 1;
}

.radio input{
  display: none;
}

.radio input + label{
	display: inline-flex;
	align-items: center;
    justify-content: center;
    width:100%;
	min-height: 4rem;
	padding: 0 1rem;
    box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--c-main);
	border-radius: 20px;
	cursor: pointer;
    color: var(--c-main);

}/* 버튼 기본 스타일 */

.radio input:checked + label{
    width: 100%;
    color: #fff;
	background: var(--c-main);
    border: 1px solid transparent;
}/* 버튼 체크 됐을 때 */

/* form-group */
.form-wrap + .form-wrap{
    margin-top: 1.4rem;
}

.form-wrap.col{
    display: flex;
    gap: 1rem;
}

.form-wrap .form-group {
    flex: 1;
}

.form-group label{
    display: block;
}

.essential{
    margin-left: .5rem;
}

.essential::after{
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    vertical-align: text-top;
    border-radius: 50%;
    background-color: rgb(255, 24, 47);
    margin-top: 4px;
}
/* form end */

/* ======================== button ======================== */
.btn{
    min-width: 9rem;
    height: 4.4rem;
    flex-shrink: 0;
    color: #fff;
    background-color: var(--c-main);
    border-radius: .5rem;
    font-size: 1.8rem;
    font-weight: 500;
    padding: 0 1.2rem;
    transition: background-color .3s;
}

.btn:hover,
.btn:active{
    background-color: #092c87;
}

.btn.line {
    color: var(--c-main);
    background-color: #fff;
    border: 1px solid var(--c-main);
    padding-bottom: 2px;
}

.btn.line:hover {
}

.btn.circle{
    border-radius: 30px;
}

/* button end */

/* ======================== ect ======================== */
.badge{
    display: inline-block;
    min-width: 8rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: .6rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.badge.main{
    background-color: var(--c-main);
    color: #fff;
    font-weight: 400;
}

.badge.sub{
    background-color: var(--sub-color);
    color: var(--c-main);
    font-weight: 500;
}

.top-btn{
    /* display: none; */
    position: fixed;
    color: #fff;
    right: 4.6rem;
    bottom: 4.6rem;
    z-index: 999999;
    opacity: 0;
    transition: opacity .3s;
}

.top-btn>button{
    display: inline-block;
    width: 70px;
    height: 70px;
    background:var(--c-main) url(../../recruit/images/ic_up.svg) no-repeat center;
    border-radius: 50%;
    transition: transform .3s;
    background-size: 2rem;
    opacity: 90%;
}

.top-btn.on{opacity: 1;}

.info-txt{
    font-size: 14px;
}

/* ======================== modal 영역 ======================== */
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    overflow: hidden;
    outline: 0;
    z-index: 9998 !important;

}

.modal.show {display: block;}

.modal-dialog-centered {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}

.inner-modal {
    width: 90%;
    max-width: 64rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    height: auto;

    max-width: 443px;
    height: 94%;
}

.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.4rem;
    overflow: hidden;
}

.join-request-modal-content {
    height: 100%;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    background-clip: padding-box;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: .8rem 1.4rem;
    box-sizing: border-box;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}

.modal-header .join-req-modal-close {
    font-size: 2rem;
    padding: 1.4rem;
    margin: -1rem -1rem -1rem auto;
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 2.0rem;
    font-weight: bold;
}

.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9997;
    background-color: #000;
}

.modal-backdrop.show {
    display: block;
    opacity: 0.5;
}
/* modal end */

/* ======================== accordion 영역 ======================== */
.accordion-wrap .join-req-menu .accordion-btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.accordion-wrap .join-req-menu .arrow{
    transition: all .3s;
}

.accordion-wrap.show .join-req-menu .arrow{
    transform: rotate(180deg);
}

.accordion-wrap .contents{
    display: none;
    padding: 10px 0;
}

.accordion-wrap.show .contents{
    display: block;
}
/* accordion end */

/* ======================== ect 영역 ======================== */
.join-req-modal .join-req-modal-close{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;

    position: absolute;
    top: 20px;
    right: -15px;
    z-index: 99;
}

.join-req-modal .join-req-modal-close .line{
    display: inline-block;
    background-color: #fff;
    width: 17px;
    height: 1px;
}

.join-req-modal .join-req-modal-close .line:nth-child(1){
    transform: rotate(45deg) translate(4px, -12px);
}

.join-req-modal .join-req-modal-close .line:nth-child(2){
    transform: rotate(-45deg) translate(-3px, -11px);
}

.join-req-modal .join-req-header{
    width: 100%;
    height: 74px;
    margin-bottom: 20px;
    line-height: 74px;
    text-align: center;
    background-color: var(--c-main);
    background-image: url(../images/modal_bg01.png);
    background-repeat: no-repeat;
    background-position: top 5px right 0;
    background-size: 102px;
    color: #fff;
    font-size: 20px;
}

.join-req-modal .btn{
    height: 52px;
}

.join-req-modal .modal-body{
    padding: 30px;
}

.join-req-modal .join-request-modal-content{
    height: calc(100% - 54px);
}
/* ======================== media query 영역 ======================== */

/* media query end */
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 768px) {
}

@media screen and (max-width: 680px) {
        body {
        font-size: 1.4rem;
        }

        label{
            font-size: 1.4rem;
        }

        input::placeholder{
            font-size: 1.5rem;
        }

        /* modal */
        .modal-title {
            font-size: 1.8rem;
        }

        /* button */
        .btn{
            font-size: 16px;
        }

        /* ect */
        .join-req-modal .modal-body{
            padding: 14px;
        }

        .join-req-modal .join-req-modal-close{
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #000;
            border-radius: 50%;

            position: absolute;
            top: 5px;
            right: -12px;
            z-index: 99;
        }

        .join-req-modal .inner-modal{
          max-width: calc(100% - 36px);
          height: 97vh;
        }
}