@charset "UTF-8";

#join_wrap {position: relative; width: 100%; max-width: 600px;}

.ul-step {width: 100%; max-width: 600px; border: 1px solid var(--iris); background: #fff; border-radius: 6px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 48px; overflow: hidden; margin-bottom: 50px;}
.ul-step .step {display: -webkit-flex; display: flex; justify-content: center; align-items: center; color: #BBBBBB;}
.ul-step .step:first-child {position: relative;}
.ul-step .step.on {background: #f7f7ff; color: var(--primary);}
.ul-step .step:first-child::before {
    content: ''; position: absolute; top: 50%; right: 0; width: 0; height: 0; z-index: 1;
	border: 25px solid transparent;
	border-left-color: var(--iris);
	border-right: 0;
	margin-top: -25px;
	margin-right: -25px;
}
.ul-step .step:first-child::after {
    content: ''; position: absolute; top: 50%; right: 0; width: 0; height: 0; z-index: 1;
	border: 24px solid transparent;
	border-left-color: #fff;
	border-right: 0;
	margin-top: -24px;
	margin-right: -24px;
}
.ul-step .step.on:first-child::after {border-left-color: #f7f7ff;}

#join_wrap .box {padding: 36px 26px 14px; background: var(--white-gray); border: var(--border-solid); border-radius: 6px;}
#join_wrap .box .top {width: 100%; margin-bottom: 20px; font-weight: 500; font-size: 1.125rem; line-height: 1; color: #1E1E1E; display: -webkit-flex; display: flex; justify-content: space-between; align-items: end;}
#join_wrap .box .top .logo {display: block; height: 60px;}
#join_wrap .box .top .logo img {display: block; height: 100%; object-fit: contain;}

.ul-register .td {display: -webkit-flex; display: flex; justify-content: start; align-items: center; margin-bottom: 10px;}
.ul-register .td:last-child {margin-bottom: 0;}

/* .td-email .input-area {display: -webkit-flex; display: flex; justify-content: start; align-items: center; flex-wrap: wrap; gap: 10px 8px;} */
.td-email .input-area {display: -webkit-flex; display: flex; justify-content: start; align-items: center; flex-wrap: wrap;}
.input-email, .select-email {width: calc((100% - 104px)/2); margin-right: 8px; margin-bottom: 10px;}
.btn-auth {width: 88px; margin-bottom: 10px;}
input[type='text'].input-email-auth, input[type='text'].input-comp-type {width: calc(100% - 88px); border-radius: 6px 0 0 6px;}
.btn-auth2, .btn-look {width: 88px; border-radius: 0 6px 6px 0;}

.agree-area {margin-top: 40px;}
.agree-area .tit {font-weight: 700; font-size: 1.125rem; color: var(--primary); margin-bottom: 17px;}
.agree-area .ul-agree li {position: relative; display: -webkit-flex; display: flex; justify-content: start; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 1.25rem;}
.agree-area .ul-agree li:last-child {margin-bottom: 0;}
.agree-area .ul-agree li .txt {width: 100%; padding-left: 27.5px; color: #767676;}
.agree-area .ul-agree li label+* {margin-left: 10px;}

.btn-join {width: 100%; margin-top: 40px;}


/* 회원가입 완료 시작 */
#join_wrap.complete .box .top {flex-wrap: wrap; margin-bottom: 60px;}
#join_wrap.complete .box .top::after {content: ''; width: 100%; height: 1px; background: var(--border); margin-top: 14px;}
#join_wrap.complete .info-area {text-align: center;}
#join_wrap.complete i {font-size: 3.125rem; color: var(--darkgray);}
#join_wrap.complete .info-area .txt {margin: 24px 0 14px; font-weight: 500; white-space: pre-line;}
#join_wrap.complete .info-area .email {width: 100%; height: 40px; line-height: 40px; background: #fff; border: var(--border-solid); border-radius: 6px; margin-bottom: 40px;}
#join_wrap.complete .info-area .email .tint {color: var(--highlight);}
/* //회원가입 완료 끝 */


/* 소속 검색 시작 */
/* .search-institution-wrap {position: relative; width: 100%; min-height: 100%; overflow: hidden;} */
.search-wrap {position: relative;}
.search-box3 {width: 100%;}
.search-box3 input[type='search'] {height: 46px; font-size: 1.125rem; border: 0; border-bottom: var(--border-solid); border-radius: 0; background: #fff;}
.search-institution-wrap .list-area {margin: 10px; background: #fff; border: var(--border-solid);}

.ul-suggest {position: absolute; top: 100%; right: 0; left: 0; background: #fff;}
.ul-suggest .item {position: relative; border-bottom: var(--border-solid);}
.ul-suggest .item:hover {background: var(--white-gray);}
.keyword {display: block; padding: 13px 10px; padding-right: 42px; cursor: pointer;}
.emph-keyword {color: var(--highlight);}
.btn-add {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 42px; height: 42px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.43 15.36'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23999999;stroke-linecap:round;stroke-linejoin:round;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_1-2'%3E%3Cpath class='cls-1' d='M.5,11.96V.5H11.96m2.97,14.36L.5,.5'/%3E%3C/g%3E%3C/svg%3E"); background-size: 16px; background-repeat: no-repeat; background-position: center;}

.tip {padding: 20px; background: #fff; border-bottom: var(--border-solid); font-weight: 500; font-size: 1.125rem; line-height: 1.4;}

.ul-search-list .item {border-bottom: var(--border-solid);}
.ul-search-list .item > button {padding: 20px 14px; width: 100%; text-align: left;}
.ul-search-list .item:last-child {border-bottom: 0;}
/* //소속 검색 끝 */






/* Safari 14.1 이전 버전 */
@supports not (inset: 0){
    .input-email, .select-email {margin-right: 8px; margin-bottom: 10px;}
}



@media screen and (min-width:993px){
    #join_wrap {margin: 100px auto;}
}

@media screen and (max-width:992px){
    #join_wrap {margin: 80px auto;}
    .ul-step {grid-auto-rows: 42px;}
    .input-email, .select-email {width: calc((100% - 88px)/2);}
    .btn-auth {width: 72px;}
    input[type='text'].input-email-auth, input[type='text'].input-comp-type {width: calc(100% - 72px);}
    .btn-auth2, .btn-look {width: 72px;}
    .agree-area .ul-agree li .txt {padding-left: 23.31px;}
    .agree-area .ul-agree li label+* {margin-left: 8px;}

    #join_wrap.complete .info-area .email {height: 35px; line-height: 35px;}
}

@media screen and (min-width:769px){
    .ul-register .td-email {align-items: start;}
    .input-label-email {line-height: 40px;}
    .td-email .input-area {width: calc(100% - 110px);}
}

@media screen and (max-width:768px){
    #join_wrap {margin: 60px auto;}

    .ul-register .item {-webkit-flex-wrap: wrap; flex-wrap: wrap;}
    .input-label {width: 100%; margin-bottom: 10px;}
}

@media screen and (max-width:480px){
    #join_wrap {margin: 30px auto 0;}
    .ul-step {width: calc(100% - 32px); grid-auto-rows: 38px; margin: 0 auto; margin-bottom: 30px;}
    #join_wrap .box {padding: 6.25% 3.3% 2.9%; border: 0; border-radius: 0;}
    #join_wrap .box .top .logo {height: 30px;}
    .input-email, .select-email {width: calc((100% - 80px)/2);}
    .btn-auth {width: 64px;}
    input[type='text'].input-email-auth, input[type='text'].input-comp-type {width: calc(100% - 64px);}
    .btn-auth2, .btn-look {width: 64px;}
    .agree-area .ul-agree li .txt {padding-left: 19.13px;}
    .agree-area .ul-agree li label+* {margin-left: 6px;}
}