@charset "utf-8";

.inline-block{display:inline-block !important}
.inline-flex{display:inline-flex !important}

.pt05 {padding-top: 5px !important}
.pt10 {padding-top: 10px !important}
.pt15 {padding-top: 15px !important}
.pt20 {padding-top: 20px !important}
.pt25 {padding-top: 25px !important}
.pt30 {padding-top: 30px !important}
.pt35 {padding-top: 35px !important}
.pt40 {padding-top: 40px !important}
.pt45 {padding-top: 45px !important}
.pt50 {padding-top: 50px !important}

.pr05 {padding-right: 5px !important}
.pr10 {padding-right: 10px !important}
.pr15 {padding-right: 15px !important}
.pr20 {padding-right: 20px !important}
.pr25 {padding-right: 25px !important}
.pr30 {padding-right: 30px !important}
.pr35 {padding-right: 35px !important}
.pr40 {padding-right: 40px !important}
.pr45 {padding-right: 45px !important}
.pr50 {padding-right: 50px !important}

.pb05 {padding-bottom: 5px !important}
.pb10 {padding-bottom: 10px !important}
.pb15 {padding-bottom: 15px !important}
.pb20 {padding-bottom: 20px !important}
.pb25 {padding-bottom: 25px !important}
.pb30 {padding-bottom: 30px !important}
.pb35 {padding-bottom: 35px !important}
.pb40 {padding-bottom: 40px !important}
.pb45 {padding-bottom: 45px !important}
.pb50 {padding-bottom: 50px !important}

.pl05 {padding-left: 5px !important}
.pl10 {padding-left: 10px !important}
.pl15 {padding-left: 15px !important}
.pl02,
.pl20 {padding-left: 20px !important}
.pl25 {padding-left: 25px !important}
.pl30 {padding-left: 30px !important}
.pl35 {padding-left: 35px !important}
.pl04,
.pl40 {padding-left: 40px !important}
.pl45 {padding-left: 45px !important}
.pl50 {padding-left: 50px !important}
.pl55 {padding-left: 55px !important}
.pl06,
.pl60 {padding-left: 60px !important}

.mt05 {margin-top: 5px !important}
.mt10 {margin-top: 10px !important}
.mt15 {margin-top: 15px !important}
.mt20 {margin-top: 20px !important}
.mt25 {margin-top: 25px !important}
.mt30 {margin-top: 30px !important}
.mt35 {margin-top: 35px !important}
.mt40 {margin-top: 40px !important}
.mt45 {margin-top: 45px !important}
.mt50 {margin-top: 50px !important}
.mt55 {margin-top: 55px !important}
.mt60 {margin-top: 60px !important}

.mr05 {margin-right: 5px !important}
.mr10 {margin-right: 10px !important}
.mr15 {margin-right: 15px !important}
.mr20 {margin-right: 20px !important}
.mr25 {margin-right: 25px !important}
.mr30 {margin-right: 30px !important}
.mr35 {margin-right: 35px !important}
.mr40 {margin-right: 40px !important}
.mr45 {margin-right: 45px !important}
.mr50 {margin-right: 50px !important}

.mb05 {margin-bottom: 5px !important}
.mb10 {margin-bottom: 10px !important}
.mb15 {margin-bottom: 15px !important}
.mb20 {margin-bottom: 20px !important}
.mb25 {margin-bottom: 25px !important}
.mb30 {margin-bottom: 30px !important}
.mb35 {margin-bottom: 35px !important}
.mb40 {margin-bottom: 40px !important}
.mb45 {margin-bottom: 45px !important}
.mb50 {margin-bottom: 50px !important}
.mb55 {margin-bottom: 55px !important}
.mb60 {margin-bottom: 60px !important}

.ml05 {margin-left: 5px !important}
.ml10 {margin-left: 10px !important}
.ml15 {margin-left: 15px !important}
.ml20 {margin-left: 20px !important}
.ml25 {margin-left: 25px !important}
.ml30 {margin-left: 30px !important}
.ml35 {margin-left: 35px !important}
.ml40 {margin-left: 40px !important}
.ml45 {margin-left: 45px !important}
.ml50 {margin-left: 50px !important}

.inner {width: 100%; max-width: 1440px; margin: 0 auto; position: relative}
.inner::after {content:''; display: block; clear: both}
.inner.align-center {text-align: center}

.t-center {text-align: center !important}
.t-right {text-align: right !important}
.v-center {align-items: center !important}
.space-between {justify-content: space-between}

.flex {display: flex !important}
.column {flex-direction: column !important}
.nowrap {white-space: nowrap !important}

.black {color: var(--black)}
.blue {color: var(--blue)}
.orange {color: var(--orange)}
.green {color: var(--green)}
.purple {color: var(--purple)}
.intro-purple {color: var(--intro-purple)}
.red {color: var(--red)}

.bg-black {background-color: var(--black)}
.bg-blue {background-color: var(--blue)}
.bg-orange {background-color: var(--orange)}
.bg-green {background-color: var(--green)}
.bg-purple {background-color: var(--purple)}
.bg-red {background-color: var(--red)}
.bg-gray {background-color: var(--bg-gray)}

.bold {font-weight: 600 !important}
/* 자간 0 */
.letter0 {letter-spacing: 0 !important}
/* 문자열 길이 초과시  ...으로 표시 */
.text-over {overflow: hidden; text-overflow: ellipsis}

/* 너비 조절 */
.w-full {width: 100%}
.w-half {width: 50%}
.w-half2 {width: calc(50% - 12px)}
.w-half3 {width: calc(100% / 3)}

/* 객체 사이 텍스트 */
.btw {height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px}

/******************************
	BUTTON	BUTTON	BUTTON
******************************/
.btn-box {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start}
.btn-box.column {flex-direction: column}
.btn-box.align-center {justify-content: center}
.btn-box.align-v-center {align-items: center}
.btn-box.align-right {justify-content: flex-end}
.btn-box.align-between {justify-content: space-between}
.btn-box a:not(:last-child),
.btn-box input[type=button]:not(:last-child),
.btn-box button[type=button]:not(:last-child),
.btn-box button[type=submit]:not(:last-child) {margin-right: 10px}
#sharePopup .btn-box {justify-content: center; grid-gap: 8px}

.btn {/*min-width: 80px;*/ height: 40px; font-size: 16px; font-weight: 500; border: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; transition: .4s; -webkit-transition: .4s}
.btn.fs-down {font-size: 14px}
.btn.intro-purple {color: #fff; background-color: var(--intro-purple); border: 1px solid var(--intro-purple)}
.btn.intro-purple:hover {color: var(--intro-purple); background-color: #fff}
.btn.blue {color: #fff; background-color: var(--blue); border: 1px solid var(--blue)}
.btn.blue:hover {color: var(--blue); background-color: #fff}
.btn.orange {color: #fff; background-color: var(--orange); border: 1px solid var(--orange)}
.btn.orange:hover {color: var(--orange); background-color: #fff}
.btn.green {color: #fff; background-color: var(--green); border: 1px solid var(--green)}
.btn.green:hover {color: var(--green); background-color: #fff}
.btn.purple {color: #fff; background-color: var(--purple); border: 1px solid var(--purple)}
.btn.purple:hover {color: var(--purple); background-color: #fff}
.btn.gray {color: #fff; background-color: var(--gray); border: 1px solid var(--gray)}
.btn.gray:hover {color: var(--gray); background-color: #fff}
.btn.gray2 {color: #646464; background-color: var(--bg-gray2)}
.btn.gray2:hover {color: var(--black); background-color: rgba(0,0,0,.15)}
.btn.gray3 {color: #fff; background-color: var(--bg-gray3)}
.btn.gray3:hover {color: #fff; background-color: #494e55}
.btn.line {color: #646464; background-color: #fff; border: 1px solid var(--line-gray2)}
.btn.line:hover {color: var(--black); border: 1px solid var(--gray)}
.btn.blue-line {color: var(--blue); background-color: #fff; border: 1px solid var(--blue)}
.btn.purple-line {color: var(--purple); background-color: #fff; border: 1px solid var(--purple)}
.btn.orange-line {color: var(--orange); background-color: #fff; border: 1px solid var(--orange)}

/* 게시물 버튼 */
.btn.board {height: auto; font-size: 14px; display: inline-flex; padding: 8px 12px}

/* 검색버튼 */
.btn.search {background-image: url('/img/lms/com/icon-search.svg'); background-position: 12px center; background-repeat: no-repeat; background-size: 20px; padding: 0 20px 0 36px; transition: .4s; -webkit-transition: .4s}
.btn.search:hover {background-image: url('/img/lms/com/icon-search-on.svg')}

/* 강의보기버튼 */
.btn.lecture {background-image: url('/img/lms/sub/icon-play.svg'); background-position: 16px center; background-repeat: no-repeat; background-size: 20px; padding: 0 20px 0 44px; transition: .4s; -webkit-transition: .4s}
.btn.lecture:hover {background-image: url('/img/lms/sub/icon-play-on.svg')}

/* 지원하기버튼 */
.btn-apply{width:300px;height:70px;font-size:20px}


/* 닫기버튼 */
.close {width: 40px; min-width: auto; height: 40px; font-size: 0; padding: 0; position: relative}
.close::after {width: 40px; height: 40px; background: url('/img/lms/com/icon-close.svg') center no-repeat; background-size: 16px; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}

#checkBtn,
#phIsncBtn {margin: 0;}

.member-area .btn-box>.btn {margin: 4px;}

/******************************
	DOWNLOAD	DOWNLOAD
******************************/
a.down {width: 100%; background: url('/img/lms/com/icon-download.svg') 0 50% no-repeat; background-size: 20px; display: inline-flex; flex-flow: row nowrap; padding: 0 0 0 24px; margin: 0 0 16px; transition: .4s; -webkit-transition: .4s}
a.down:last-child {margin: 0}
a.down:hover {color: var(--black); background-image: url('/img/lms/com/icon-download-on.svg')}
a.down.board {width: auto; margin: 0}
a.down>.btn,
a.down>buton,
a.down>[onclick*='FileDown'] {display: none}
/* 상세테이블 파일첨부 */
li.down {width: 100%; background: url('/img/lms/com/icon-download.svg') 0 50% no-repeat; background-size: 20px; display: inline-flex; align-items: center; flex-flow: row nowrap; padding: 0 0 0 24px; margin: 0 0 16px; transition: .4s; -webkit-transition: .4s}
li.down:hover {color: var(--black); background-image: url('/img/lms/com/icon-download-on.svg')}

/******************************
	NULL DATA	NULL DATA
******************************/
.null-data {width: 100%; height: 100%; font-size: 24px; font-weight: 300; min-height: 80px; display: flex; align-items: center; justify-content: center}

.e_map{height: 300px}

/* 컨텐츠 준비중 이미지 */
img[src$="ready.jpg"] {}

.overScrX {position: relative;display: block;width: 100%;overflow-x: auto;padding-bottom: 8px;}

/* 멤버 */
.member-area {width: 1000px; margin: 0 auto}
.member-area.find {width: 800px; background-color: var(--bg-gray4); border-radius: 20px; padding: 40px; margin: 0 auto}
/* 로그인 
.member-area.login {width: 560px;max-width: 100%;padding: 40px;background-color: rgba(250,250,250,0.64);border-radius: 8px;}
.member-area.login .top img {width: 70%}
.member-area.login strong {width: 100%; font-size: 30px; color: var(--black); font-weight: 400; display: flex; justify-content: center; position: relative}
.member-area.login strong::after {width: 100%; height: 15px; background: #d6ebff; content: ''; position: absolute; left: 0; bottom: 0; z-index: -1}
.member-area.login .login-input {margin-top: 30px}
.member-area.login .login-input input {width: 100%; height: 60px; font-size: 18px; padding-left: 52px; transition: .4s; background-position: 16px 50%; background-repeat: no-repeat; background-size: 24px;border: 1px solid #ddd;border-radius:10px}
.member-area.login .login-input input:last-child {margin-top: 12px}

.member-area.login .login-input input.id {background-image: url(/img/lms/com/icon-id.svg);}
.member-area.login .login-input input.pw {background-image: url(/img/lms/com/icon-pw.svg);}
.member-area.login .login-input input.id:focus {background-image: url(/img/lms/com/icon-id-on.svg);}
.member-area.login .login-input input.pw:focus {background-image: url(/img/lms/com/icon-pw-on.svg);}
.member-area.login .btn-box {width: 100%;display: flex;flex-wrap: nowrap;justify-content: space-between;margin-top: 20px}
.member-area.login .btn-box .btn-join {width: 35%; height: 50px; font-size: 18px; background-color: var(--bg-light-gray-hover); padding: 0}
.member-area.login .btn-box .btn-login {width: 60%; height: 50px; font-size: 18px; padding: 0}
.member-area.login .find {width: 100%; display: flex; align-items: center; justify-content: center; margin: 20px 0 0 0; border-top: 1px solid var(--light-gray-line02); padding-top: 20px}
.member-area.login .find a.find-link {}

*/
/* 로그인 */
.member-area.login {width:100%;max-width:1440px;padding: 130px 40px;background-color:#fcfcfd;border-radius: 8px;border:1px solid #ddd}
.member-area.login .top img {width: 300px}
.member-area.login strong {width: 100%; font-size: 30px; color: var(--black); font-weight: 400; display: flex; justify-content: center; position: relative}
.member-area.login strong::after {width: 100%; height: 15px; background: #d6ebff; content: ''; position: absolute; left: 0; bottom: 0; z-index: -1}
.member-area.login .login-input {width:100%;max-width:487px;width:100%;margin:30px auto 0}
.member-area.login .login-input input {width: 100%; height: 60px; font-size: 18px; padding-left: 52px; transition: .4s; background-position: 16px 50%; background-repeat: no-repeat; background-size: 24px;border: 1px solid #ddd;border-radius:10px}
.member-area.login .login-input input:last-child {margin-top: 12px}
.member-area.login .login-input input.id {background-image: url(/img/lms/com/icon-id.svg);}
.member-area.login .login-input input.pw {background-image: url(/img/lms/com/icon-pw.svg);}
.member-area.login .login-input input.id:focus {background-image: url(/img/lms/com/icon-id-on.svg);}
.member-area.login .login-input input.pw:focus {background-image: url(/img/lms/com/icon-pw-on.svg);}
.member-area.login .btn-box {width: 100%;display: flex;flex-wrap: nowrap;justify-content: space-between;margin:30px auto;max-width:497px}
.member-area.login .btn-box .btn-join {width: 35%; height: 50px; font-size: 18px; background-color: var(--bg-gray2); padding: 0;color:#666}
.member-area.login .btn-box .btn-login {width: 60%; height: 50px; font-size: 18px; padding: 0}
.member-area.login .find {width: 100%; display: flex; align-items: center; justify-content: center; margin: 20px 0 0 0; border-top: 1px solid var(--light-gray-line02); padding-top: 20px}
.member-area.login .find a.find-link {}
.member-area .click-box{max-width:487px;}
.sub.member .member-area.login .click-box{margin:10px auto}
.member-area .click-box .label-click{}

/* 회원가입 */
.member-area .top {width: 100%;  display: flex; justify-content: center; margin-bottom: 40px; }
.member-area .top img {width: 40%; min-width: 200px}
.member-area .top strong {font-size: 40px; font-weight: 300; color: var(--black)}
.member-area .step-area {width: 100%; height: 80px; position: relative; margin-bottom: 40px}
.member-area .step-area::before {width: 100%; height: 50%; border-bottom: 2px dashed var(--line-gray); content: ''; position: absolute; top: 0; left: 0}
.member-area .step-area .step {width: 80px; height: 80px; font-size: 20px; color: var(--black); background: var(--bg-gray2); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute}
.member-area .step-area .step.step01 {top: 0; left: 0}
.member-area .step-area .step.step02 {top: 0; left: 50%; transform: translateX(-50%)}
.member-area .step-area .step.step03 {top: 0; right: 0}
.member-area .step-area .step-on {width: auto; height: 80px; color: #fff; background-color: var(--intro-purple); background-size: 40px; background-position: 20px 50%; background-repeat: no-repeat; border-radius: 40px; display: inline-block; position: absolute; z-index: 1; padding: 0 30px 0 95px}
.member-area .step-area .step-on::before {width: 1px; height: 30px; background: #97afc6; content: ''; position: absolute; top: 26px; left: 75px}
.member-area .step-area .step-on.on01 {background-image: url(/img/lms/sub/icon-join-step01.svg); top: 0; left: 0}
.member-area .step-area .step-on.on02 {background-image: url(/img/lms/sub/icon-join-step02.svg); top: 0; left: 50%; transform: translateX(-50%)}
.member-area .step-area .step-on.on03 {background-image: url(/img/lms/sub/icon-join-step03.svg); top: 0; right: 0}
.member-area .step-area .step-on .step-title {height: 100%; font-weight: 300; color: #fff; display: flex; align-items: center}
.member-area .btn-guide-area {width: 100%; display: flex; flex-direction: column}
.member-area .btn-guide-area .btn-guide-box{padding:20px}
.member-area .btn-guide-area .btn-guide-box p{line-height:200%}
.member-area .btn-guide-area .btn {height: 60px}
.member-area .guide-area {height: 200px; font-size: 14px; line-height: 22px; background: var(--white); border: 1px solid #d6deea; border-radius: 5px; padding: 15px; overflow-x: hidden; overflow-y: auto}
.member-area .join-type-btn {width: 100%; display: flex; justify-content: center}
.member-area .join-type-btn a {width: calc(25% - 24px); font-size: 20px; color: var(--gray); background-color: var(--bg-gray4); display: block; text-align: center; padding: 110px 0 24px; position: relative; transition: .4s; -webkit-transition: .4s}
.member-area .join-type-btn a::before {width: 70px; height: 70px; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%)}
.member-area .join-type-btn a.type1::before {background-image: url('/img/lms/com/icon-join-type1.svg')}
.member-area .join-type-btn a.type2::before {width: 60px; background-image: url('/img/lms/com/icon-join-type2.svg')}
.member-area .join-type-btn a.type3::before {width: 60px; background-image: url('/img/lms/com/icon-join-type3.svg')}
.member-area .join-type-btn a.type4::before {width: 60px; background-image: url('/img/lms/com/icon-join-type4.svg')}
.member-area .join-type-btn a:hover {background-color: var(--bg-gray4)}
.member-area .join-type-btn a.on {color: var(--blue); font-weight: 500; background-color: #fff; border: 1px solid var(--blue)}
.member-area .join-type-btn a.on.type1::before {background-image: url('/img/lms/com/icon-join-type1-on.svg')}
.member-area .join-type-btn a.on.type2::before {background-image: url('/img/lms/com/icon-join-type2-on.svg')}
.member-area .join-type-btn a.on.type3::before {background-image: url('/img/lms/com/icon-join-type3-on.svg')}
.member-area .join-type-btn a.on.type4::before {background-image: url('/img/lms/com/icon-join-type4-on.svg')}
.member-area .complete {padding-top: 150px}
.member-area .complete p.t01 {width: 100%; font-size: 30px; font-weight: 300; color: var(--black); display: block; text-align: center; position: relative}
.member-area .complete p.t01::before {width: 140px; height: 110px; background: url('/img/lms/com/icon-join-complete.svg') no-repeat; content: ''; position: absolute; top: -130px; left: 50%; transform: translateX(-50%)}
.member-area .complete p.t02 {width: 100%; font-size: 20px; font-weight: 300; line-height: 30px; color: var(--black); display: block; text-align: center; margin-top: 30px}
/* 아이디 & 비밀번호 찾기 */
.member-area .srch-id-pw {}
.member-area .srch-id-pw dl.account-list {width: 100%; font-size: 20px; display: flex; align-items: center; margin: 0 0 16px}
.member-area .srch-id-pw dl.account-list:last-child {margin: 0}
.member-area .srch-id-pw dl.account-list dt {width: 120px}
.member-area .srch-id-pw dl.account-list dd {width: calc(100% - 120px); font-weight: 600}
.member-area .srch-id-pw p {width: 100%; font-size: 18px; line-height: 2; text-align: center}

/* 등록폼 */
.form-block {width: 100%;/* border: 1px solid var(--line-gray);border-width: 0 0 1px;display: inline-block;padding: 0 0 40px */}
.form-block.btm-line {border: 1px solid var(--line-gray); border-width: 0 0 1px; padding: 0 0 40px}
.sub.member .form-block {padding: 20px 0}
.form-block.gap-mb01 {margin-bottom: 40px;}
.form-block.basic {border: none; padding: 0}
.form-block.type02 {border-width: 0 0 1px; border-bottom: 1px solid #d1d1d1; padding: 0 0 40px 0}
.form-block .form-line {margin-bottom: 20px;display: flex;justify-content: space-between;align-items: flex-start}
.form-block .form-line.hide {display: none}
.form-block .form-line:last-child {border: none; padding: 0; margin: 0}
.form {width: calc(50% - 15px)}
.form.full {width: 100%}
.form label.form-label {display: block;color: var(--black);font-weight: 700;line-height: 1.6; cursor: default}
.form label.form-label .must {margin-left: 5px}
.form label.aside {width: 150px; line-height: 1.5; display: inline-block; float: left}
.form .aside-area {width: calc(100% - 150px); line-height: 1.5; display: inline-block}
.form .select-bg-px {background-position-x: 97%}
.form .array {width: 100%;min-height: 40px;display: flex;align-items: center;justify-content: space-between}
.form .array.h-auto {min-height: auto}
.form .array.top {align-items: flex-start}
.form .array.left {justify-content: flex-start}
.form .array.inline-list {display: inline-block; margin-top: 0 !important}
.form .array.inline-list label {display: inline-block; margin-top: 10px; margin-right: 20px}
.form .array input.inline {min-height: 28px}
.form textarea {min-height: 200px}
.form .img-area {width: 60px; height: 75px; background: #f2f2f2; border: 1px solid #d4d4d4; border-radius: 5px; overflow: hidden; margin-bottom: 20px}
.form .map-area {height: 300px}
.form #eventdetailfileGrpBox {margin-right: 5px}
.form #eventdetailfileGrpBox div {margin-bottom: 5px}
.form #eventdetailfileGrpBox div:last-child {margin-bottom: 0}
.form .file {width: 100%; border: 1px solid var(--line-gray2); border-radius: 10px; padding: 20px}
.form .file > div div+div {margin: 10px 0 0}
.form input[type="file"] {height: 28px !important}
.form .array div+div>input[type="button"],
.form .file div+div>input[type="button"] {width: 28px !important; height: 28px !important}
.form .file li.text {margin: 0 0 10px}
.form .file a.down {width: 100%; margin: 0 0 20px}
.form .file a.down + button {display: none}
.vrfct_line {font-size: 14px; display: block; margin: 12px 0}

.click-box {display: flex; align-items: center; position: relative}
.click-box.dozen {display: inline-block}
.click-box.align-center {justify-content: center}
.click-box.align-right {justify-content: flex-end}
.click-box input.aside[type="radio"] {margin-top: 0}
.click-box label.label-click {min-height: 40px; line-height: 1.4; display: inline-flex; align-items: center; position: relative; margin: 0 24px 0 0; padding: 0 0 0 30px}
.click-box label.label-click:last-child {margin: 0}
.click-box img {width: 100px; margin: 0 15px 0 5px}



/******************************
	POPUP	POPUP	POPUP
******************************/
/* 팝업 */
.popup-wrapper {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; background: rgba(0,0,0,0.16)}
.popup-box {display: none; position: fixed; z-index: 320; top: 50%; left: 50%; width: 50%; min-width: 480px; max-width: calc(100vw - 80px); /* min-height: 20%; max-height: calc(100vh - 310px); */ background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 0 10px 2px var(--bg-gray3); transform: translate(-50%, -50%); z-index: 2000}
.popup-box .title-box {width: 100%; height: 40px; background-color: #f7f7f7; border-bottom: 1px solid #e9e9e9; display: flex; align-items: center; justify-content: space-between; padding: 0 0 0 15px; margin: 0}
.popup-box .title-box strong {font-size: 16px; font-weight: 600}
.popup-box .popup-cont-box {max-height: calc(100vh - 400px); display: block; padding: 20px; overflow: auto}





@media screen and (max-width: 1440px) {
	.btn {padding: 0 16px}
}

@media screen and (max-width: 1080px) {
	.btw {height: 32px}
	.btn {min-width: 64px; height: 32px; font-size: 12px; border-radius: 5px}
	.intro-login-area .btn {height: 40px}
	.btn.fs-down {font-size: 12px}
	.btn.board {font-size: 12px; padding: 8px}
	.close {min-width: auto; height: 40px; font-size: 0}
	.btn.search {background-image: none; padding: 0}
	.null-data {font-size: 16px}
	
	/******************************
		DOWNLOAD	DOWNLOAD
	******************************/
	a.down {height: 16px; font-size: 12px}
	
	/* 멤버 */
	.member-area {width: 100%}
	.member-area.find {width: 100%; padding: 24px}
	
	/* 회원가입 */
	.member-area .step-area {height: 60px; margin-bottom: 28px}
	.member-area .step-area .step {width: 60px; height: 60px; font-size: 16px}
	.member-area .step-area .step-on {height: 60px; background-size: 32px; border-radius: 30px; padding: 0 30px 0 72px}
	.member-area .step-area .step-on::before {height: 16px; top: 50%; left: 60px; transform: translateY(-50%)}
	.member-area .step-area .step-on .step-title {font-size: 14px; line-height: 1.2}
	.member-area .btn-guide-area .btn {height: 40px}
	.member-area .guide-area {height: 200px; font-size: 14px; line-height: 22px; background: var(--white); border: 1px solid #d6deea; border-radius: 5px; padding: 15px; overflow-x: hidden; overflow-y: auto}
	.member-area .join-type-btn {justify-content: space-evenly}
	.member-area .join-type-btn a {width: calc(25% - 60px); font-size: 16px; padding: 88px 0 20px}
	.member-area .join-type-btn a::before {width: 52px; height: 52px; top: 20px}
	.member-area .join-type-btn a.type2::before {width: 40px}
	.member-area .join-type-btn a.type3::before {width: 40px}
	.member-area .join-type-btn a.type4::before {width: 40px}
	.member-area .complete {padding-top: 100px}
	.member-area .complete p.t01 {font-size: 20px}
	.member-area .complete p.t01::before {width: 100px; height: 70px; top: -100px}
	.member-area .complete + .mt50 {margin-top: 24px !important}
	
	/* 등록폼 */
	.form-block.mb40 {margin-bottom: 24px !important}
	.form-block.btm-line {padding-bottom: 24px}
	.form-block.btm-line.mb40 {margin-bottom: 24px !important}
	.form-block .mt10 {margin-top: 5px !important}
	.form-block .form-line {display: block; margin-bottom: 12px}
	.form-block .form-line .form:nth-child(2) {margin-top: 12px}
	.form label.form-label {font-size: 14px}
	.form {width: 100%}
	.form .array {min-height: 32px}
	.form .file {border-radius: 5px; padding: 8px}
	.form .file input[type='file'],
	.board-view input[type='file'] {font-size: 12px}
	.form .file a.down {width: 100%; margin: 0 0 12px}
	.form .file a.down + button {display: none}
	.click-box label.label-click {min-height: 32px; font-size: 14px; margin: 0 16px 0 0; padding: 0 0 0 30px}
	
	/* 팝업 */
	.popup-box .popup-cont-box {max-height: 80vh; padding: 12px}
	.popup-box .popup-cont-box .pl30 {padding-left: 20px !important}
	.popup-box .popup-cont-box .pl50 {padding-left: 40px !important}
}

@media screen and (max-width: 768px) {
	/* 회원가입 */
	.member-area .step-area {height: 40px; margin-bottom: 20px}
	.member-area .step-area .step {width: 40px; height: 40px; font-size: 14px}
	.member-area .step-area .step-on {height: 40px; background-image: none !important; border-radius: 20px; padding: 0 20px}
	.member-area .step-area .step-on::before {content: none}
	.member-area .step-area .step-on .step-title {font-size: 12px}
	.member-area .join-type-btn {justify-content: space-between}
	.member-area .join-type-btn a {width: calc(25% - 12px)}
	
	/* 등록폼 */
	.click-box {display: inline-block}
	
	.popup-box .popup-cont-box {padding: 12px}
}

@media screen and (max-width: 480px) {
	.member-area .join-type-btn a {width: calc(25% - 8px); font-size: 14px; padding: 56px 0 12px}
	.member-area .join-type-btn a::before {width: 28px; height: 28px; top: 16px}
	.member-area .join-type-btn a.type2::before {width: 24px}
	.member-area .join-type-btn a.type3::before {width: 24px}
	.member-area .join-type-btn a.type4::before {width: 24px}
	
	.form label.form-label span.red.ml10 {display: block; margin-top: 4px; margin-left: 0 !important}
}