/* 로그인 */
#loginWrap {display:flex; width:100%; height:100vh;}
#loginWrap .lCon {display:flex; width:30%; height:100%; background-color:#F3F6FA; flex-direction: column; justify-content:center; align-items: center; transition:width .3s;}
#loginWrap .lCon .logoCon {display:flex; position:relative; padding-bottom:350px; flex-direction:column; align-items:flex-end; justify-content:center; transition:padding .3s;}
#loginWrap .lCon .logoCon::before {display:block; position:absolute; bottom:0; left:50%; width:341px; height:259px; background: url(../images/login/img_login.png) no-repeat center center; transform: translateX(-50%); transition:.3s;}
#loginWrap .lCon .logoCon .logo {display:block; font-family:'NEXONFootballGothicB'; font-size:6.25rem; line-height: 1; color:#1D56BC; transition:.3s;}
#loginWrap .lCon .logoCon .subTxt {display:block; font-weight:600; font-size:1rem; color:#000;}
#loginWrap .rCon {display:flex; height:100%; padding-left:135px; flex-direction: column; justify-content:center; transition:.3s;}
#loginWrap .rCon .loginCon .tit {display:block; font-family:'OneMobileTitle'; font-size:1.875rem; font-weight:400; color:#000;}
#loginWrap .rCon .loginCon .txt {display:block; padding-top:5px; font-family:'OneMobileRegular'; font-size:1rem; font-weight:600; color:#7A899E;}
#loginWrap #login .loginList {display:block; padding:30px 0; transition:.3s;}
#loginWrap #login .loginList > li {display:block;}
#loginWrap #login .loginList > li:not(:first-child) {padding-top:20px; transition:.3s;}
#loginWrap #login .loginList > li .txt {padding-bottom:7px; font-weight:700; color:#000;}
#loginWrap #login .loginList > li .loginBox {position: relative;}
#loginWrap #login .loginList > li .loginInput {display:block; width:100%; padding:20px 20px 20px 60px; border-radius:5px; border:1px solid #E9E9E9; font-weight:300; font-size:1rem; font-weight:400; color:#404040;}
#loginWrap #login .loginList > li .loginInput::placeholder {display:block; padding-top:5px; font-weight:400; font-size:1rem; font-weight:400; color:#7A899E;}
#loginWrap #login .loginList > li .icon {display:block; position:absolute; top:50%; left:20px; width:20px; height:20px; background-repeat:no-repeat; background-position:center center; transform: translateY(-50%);}
#loginWrap #login .loginList > li .icon.id {background-image: url(../images/login/i_id.svg);}
#loginWrap #login .loginList > li .icon.pw {background-image: url(../images/login/i_pw.svg);}
#loginWrap #login .loginBtn {display:block; position:relative; overflow:hidden; width:100%; padding:20px; border-radius:5px; background-color:#1D56BC; text-align: center;}
#loginWrap #login .loginBtn::before {display:block; position:absolute; top:0; left:0; width:0%; height:100%; border-radius:10px; background:linear-gradient(to right, #0c3a8f, #1D56BC) ; transition:.5s;}
#loginWrap #login .loginBtn .txt {display:inline-block; position:relative; font-family:'OneMobileTitle'; font-size:1rem; font-weight:200; color:#fff;}
#loginWrap #login .loginBtn:hover::before,
#loginWrap #login .loginBtn.active::before {width:110%;}

#loginWrap #login .signUpBtn {display:block; position:relative; overflow:hidden; width:100%; padding:10px; border-radius:5px; background-color:#b9e0fd; text-align: center;margin-top:20px;}
/* #loginWrap #login .signUpBtn::before {display:block; position:absolute; top:0; left:0; width:0%; height:100%; border-radius:10px; background:linear-gradient(to right, #0c3a8f, #1D56BC) ; transition:.5s;} */
#loginWrap #login .signUpBtn .txt {display:inline-block; position:relative; font-family:'OneMobileTitle'; font-size:1rem; font-weight:200; color:black;}
/* #loginWrap #login .signUpBtn:hover::before, */
/* #loginWrap #login .signUpBtn.active::before {width:110%;} */

#loginWrap #login .btmBtnCon {display: flex; padding-top:30px; justify-content: space-between; transition: .3s;}
#loginWrap #login .btmBtnCon .btn {display: block; font-family:'OneMobileTitle'; font-size:1rem;}
#loginWrap #login .btmBtnCon .findBtnList {display: flex; gap:20px; align-items: center;}
#loginWrap #login .btmBtnCon .findBtnList > li {display: block;}
#loginWrap #login .btmBtnCon .findBtnList > li:last-child {position: relative;}
#loginWrap #login .btmBtnCon .findBtnList > li:last-child::before {display:block; position: absolute; top:50%; left:-10.5px; width:1px; height:10px; background-color:#000; transform: translateY(-50%);}
#loginWrap #login .btmBtnCon .btn.join {color:#1D56BC;}
#loginWrap .copyright {display:block; padding-top:30px; font-weight:500; font-size:0.9375rem; font-weight:600; color:#000;}

@media screen and (max-width: 1600px) {
     #loginWrap .lCon {width:35%;}
     #loginWrap .lCon .logoCon {padding-bottom:330px;}
     #loginWrap .lCon .logoCon::before {width:320px; background-size:320px;}
     #loginWrap .lCon .logoCon .logo {font-size:5.75rem;}
     #loginWrap .rCon {padding-left:120px}
     #loginWrap .rCon .loginCon .tit {font-size:1.75rem;}
}



/* 수업분석 - 목록 */
#con .subWrap {padding-top:30px; border-top:1px solid #000;}
#con .subWrap .topCon {display:flex; width:100%; background-color:#F3F6FA; padding:20px; align-items:center; transition: .3s;}
#con .subWrap .topCon .searchWrap {position:relative; width:650px; transition: .3s;}
#con .subWrap .topCon .searchWrap .search {width:100%; height:45px; padding:5px 20px; border-radius:5px; border:1px solid #E1E4EB; font-weight:500; font-size:1rem; color:#404040; transition: .3s;}
#con .subWrap .topCon .searchWrap .search::placeholder {font-weight:500; font-size:1rem; color:#757B8E;}
#con .subWrap .topCon .searchWrap .buttonCon {position:absolute; top:50%; right:20px; transform: translateY(-50%);}
#con .subWrap .topCon .searchWrap .buttonCon button {display:inline-block;}
#con .subWrap .topCon .searchWrap .buttonCon #btnRemove {width:20px; height:20px; background:url(../images/common/i_remove.svg) no-repeat center;}
#con .subWrap .topCon .searchWrap .buttonCon .btnSearch {width:24px; height:24px; margin-left:10px; background:url(../images/common/i_search.svg) no-repeat center;}
#con .subWrap .topCon .btnNew {display:flex; height:45px; margin-left:20px; padding:0 20px; border-radius:5px; background-color: #246BEB; align-items: center; justify-content: center; transition: .3s;}
#con .subWrap .topCon .btnNew .txt {display:block; position:relative; padding-left:25px; font-weight:500; font-size:1rem; color:#fff; line-height: 1;}
#con .subWrap .topCon .btnNew .txt::before {display:block; position:absolute; top:50%; left:0; width:20px; height:20px; background: url(../images/common/i_plus.svg) no-repeat center center; transform: translateY(-50%) rotate(0); transition: .3s;}
#con .subWrap .topCon .btnNew:hover,
#con .subWrap .topCon .btnNew.active {background-color: #0c3a8f;}
#con .subWrap .topCon .btnNew:hover .txt::before,
#con .subWrap .topCon .btnNew.active .txt::before {transform: translateY(-50%) rotate(180deg);}
#con .subWrap .list {display:flex; padding-top:50px; margin:0 -20px; flex-wrap:wrap; transition: .3s;}
#con .subWrap .list > li {display:block; width:25%; padding:0 20px; transition: .3s;}
#con .subWrap .list > li:nth-child(n+5) {padding-top:20px;}
#con .subWrap .list > li .con {display:block; width:100%; box-shadow:0; border-radius:5px; transition: .3s;}
#con .subWrap .list > li .con:hover,
#con .subWrap .list > li .con.active {box-shadow: 0px 3px 10px rgba(0,0,0,0.12);}
#con .subWrap .list > li .con .thumbnail {display:block; position:relative; width:100%; overflow:hidden; border-radius:5px 5px 0 0;}
#con .subWrap .list > li .con .thumbnail::before {display:block; padding-top:74.2857%;}
#con .subWrap .list > li .con .thumbnail .item {display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#f1f3f7; object-fit:cover;}
#con .subWrap .list > li .con .subjectCon {display:flex; position:relative; overflow:hidden; height:70px; padding:0 75px 0 30px; border-radius:0 0 5px 5px; border:1px solid #E9E9E9; border-top:0; align-items: center; transition: .3s;}
#con .subWrap .list > li .con .subjectCon::before {display:block; position: absolute; top:50%; right:30px; width:30px; height:30px; background-position:center; background-repeat:no-repeat; background-image: url(../images/common/i_arrow.svg); transform: translateY(-50%); transition: .3s;}
#con .subWrap .list > li .con:hover .subjectCon::before,
#con .subWrap .list > li .con.active .subjectCon::before {background-image: url(../images/common/i_arrow_on.svg);}
#con .subWrap .list > li .con .subjectCon .subjectItem {display:flex; width:100%; justify-content: space-between; align-items:center; transition: .3s;}
#con .subWrap .list > li .con .subjectCon .subjectItem .subject {display:inline-block; width:100%; overflow:hidden; font-weight:600; font-size:1.125rem; color:#000; text-overflow:ellipsis; white-space: nowrap; transition: .3s;}
#con .subWrap .list > li .con .subjectCon .subjectItem .inCheck {position:relative; width:20px; height:20px;}
#con .subWrap .list > li .con .subjectCon .subjectItem .inCheck::before {display:block; position: absolute; top:50%; left:0; width:100%; height:100%; background-color:#fff; border-radius: 5px; border:1px solid #abb8ca; transform: translateY(-50%); transition: .3s;}
#con .subWrap .list > li .con .subjectCon .subjectItem .inCheck::after {display:block; position: absolute; top:50%; left:2px; width:16px; height:16px; background:url(../images/common/i_checkBox.svg) no-repeat center center; transform: translateY(-50%) scale(0); transition: .3s;}
#con .subWrap .list > li .con .subjectCon .subjectItem .inCheck:checked::after {transform: translateY(-50%) scale(1);}

@media screen and (max-width: 1600px) {
    #con {padding:40px;}
    #con .subWrap .topCon .searchWrap {flex-grow:1;}
    #con .subWrap .list {padding-top:40px; margin:0 -15px;}
    #con .subWrap .list > li {padding:0 15px;}
    #con .subWrap .list > li .con .subjectCon {height:65px; padding:0 60px 0 20px;}
    #con .subWrap .list > li .con .subjectCon::before {right:20px; width:26px; height:26px; background-size:26px;;}
    #con .subWrap .list > li .con .subjectCon .subject {font-size:1rem;}
}




/* 수업분석 - 등록 */
#writeWrap {display:block; border-top:1px solid #000;}
#writeWrap > li {display:flex; padding:20px 40px; align-items:center; transition: .3s;}
#writeWrap > li:last-child {border-bottom:1px solid #E1E4EB; padding:0 40px 30px;}
#writeWrap > li .tit {display:block; min-width:75px; position:relative; padding-right:20px; margin-right:20px; font-weight:600; font-size:1rem; color:#000; transition: .3s;}
#writeWrap > li .tit::before {display:block; position:absolute; top:50%; right:0; width:1px; height:10px; background-color:#E1E4EB; transform:translateY(-50%);}
#writeWrap > li .tit .star {color:#DB2950;}
#writeWrap > li .writeInput {display:block; width:600px; height:40px; padding: 5px 20px; border-radius:10px; border:1px solid #E1E4EB; font-weight:400; font-size:1rem; color:#404040; transition: .3s;}
#writeWrap > li .writeInput::placeholder {font-weight:400; font-size:1rem; color:#757B8E;}
#writeWrap > li .fileDrop {display:flex; overflow:hidden; width:100%; height:300px; padding:30px 0; border-radius:10px; border:1px solid #E1E4EB; background-color: #F3F6FB; font-weight:400; font-size:1rem; color:#404040; align-items:center; justify-content:center; flex-direction: column; transition: .3s;}
/* #writeWrap > li .fileDrop.active {} */
#writeWrap > li .fileDrop .statusText {display:block; position:relative; padding-bottom:30px; font-weight:500; font-size:1rem; color:#142241; opacity:1; transition:.3s;}
#writeWrap > li .fileDrop .statusText .btnFile {display:block; position:absolute; bottom:-10px; left:50%; width:35px; height:35px; background: url(../images/sub/i_attch_plus.svg) no-repeat center center;background-size: 35px; text-indent: -10000%; transform:translateX(-50%); cursor: pointer;}

#regiProgress {display:none; position:relative; overflow:hidden; width:700px; height:14px; border-radius:20px; background-color:#B6C7E0; transition: .3s;}
#regiProgress .progress {position:absolute; height:100%; border-radius:20px; background-color:#2D59BC; transition: .3s;}
#regiProgress .percent {position:absolute; top:50%; left:50%; height:100%; z-index:1; font-size:0.75rem; font-weight:600; color:#fff; transform: translate(-50%, -50%); transition: .3s;}

#con .btnList {display:flex; margin:30px -10px 0; justify-content:center; transition: .3s;}
#con .btnList > li {padding:0 10px;}
#con .btnwWite {background-color: #246BEB;}
#con .btnwAI {position:relative; overflow:hidden; background-color: #5033CF;}
#con .btnwWite .txt::before {background: url(../images/common/i_plus.svg) no-repeat center center; transform: translateY(-50%) rotate(0); transition: .3s;}
#con .btnwAI .txt::before {background: url(../images/sub/i_AI.svg) no-repeat center center; transform: translateY(-50%); transition: .3s;}
#con .btnwAI::before {display:block; position:absolute; top:0; left:0; width:0%; height:100%; border-radius:5px; background: linear-gradient(to right, #5033CF, #2AAFD4); transition: .5s;}
#con .btnwWite:hover,
#con .btnwWite.active {background-color: #0c3a8f;}
#con .btnwWite:hover .txt::before,
#con .btnwWite.active .txt::before {transform: translateY(-50%) rotate(180deg);}
#con .btnwAI:hover,
#con .btnwAI.active {background-color: #0c3a8f;}
#con .btnwAI:hover::before,
#con .btnwAI.active::before {width:120%;}
#con .btnwAI:hover .txt::before,
#con .btnwAI.active .txt::before {transform: translateY(-50%) rotate(180deg);}

@media screen and (max-width: 1600px) {
     #writeWrap > li {padding:15px 30px;}
     #writeWrap > li:last-child {padding:0 30px 25px;}
     #con .btnList {margin:20px -10px 0;}
 }



/* 수업분석 - 분석 */
#analysis {display:flex; justify-content: space-between;}
#analysis .lCon {width:70%; flex-grow:1; padding-right:35px; transition:.3s;}
#analysis .lCon .accList {display:block; padding-right:10px; overflow-y:auto;}
/* 스크롤 커스텀 */
#analysis .lCon .accList::-webkit-scrollbar {width:6px;}
#analysis .lCon .accList::-webkit-scrollbar-thumb {border-radius:100px; background-clip: padding-box; background-color:rgba(0, 0, 0, 0.2);}
#analysis .lCon .accList::-webkit-scrollbar-track {background-color: transparent;}
#analysis .lCon .rBtnCon {display:flex; gap:10px;}
#analysis .lCon .accList > li {display:block; overflow:hidden; border-radius:10px; border:1px solid #E1E4EB;}
#analysis .lCon .accList > li:not(:first-child) {margin-top:10px;}
#analysis .lCon .accList > li .top {display:flex; position:relative; padding:15px 80px 15px 40px; justify-content: space-between; align-items: center; transition:.3s;}
#analysis .lCon .accList > li .top::before {display:block; position:absolute; top:50%; right:30px; width:24px; height:24px; background: url(../images/sub/i_acc_arrow.svg); transform:translateY(-50%) rotate(0); transition:.5s;}
#analysis .lCon .accList > li .top.active::before {transform:translateY(-50%) rotate(180deg);}
#analysis .lCon .accList > li .top .tit {display:inline-block; overflow:hidden; max-width:750px; width:100%; padding-right:20px; font-weight:600; font-size:1rem; color:#142241; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;}
#analysis .lCon .accList > li .top .date {display:block; padding:7px 15px; border-radius:100px; background-color:#246BEB; font-weight:500; font-size:0.75rem; color:#fff; flex-shrink: 0;}
#analysis .lCon .accList > li .btm {display:none; border-top:1px solid #E1E4EB; padding:20px 40px 30px;}
#analysis .lCon .accList > li .btm .analysisList {display:block;}
#analysis .lCon .accList > li .btm .analysisList > li {display:block;}
#analysis .lCon .accList > li .btm .analysisList > li:not(:first-child) {padding-top:20px;}
#analysis .lCon .accList > li .btm .analysisList > li .head {display:flex; justify-content:space-between; align-items: center;}
#analysis .lCon .accList > li .btm .analysisList > li .head .tit {display:block; position:relative; padding-left:10px; font-weight:600; font-size:1rem; color:#000;}
#analysis .lCon .accList > li .btm .analysisList > li .head .tit::before {display:block; position:absolute; top:50%; left:0; width:3px; height:3px; border-radius:100%; background-color:#000; transform:translateY(-50%);}
#analysis .lCon .accList > li .btm .analysisList > li .head .btnAdd {display:flex; height:30px; background-color:#2AAFD4; padding:0 15px; border-radius:5px; align-items: center; justify-content: center; transition: .3s;}
#analysis .lCon .accList > li .btm .analysisList > li .head .btnAdd:hover,
#analysis .lCon .accList > li .btm .analysisList > li .head .btnAdd.active {background-color: #289dbd;}
#analysis .lCon .accList > li .btm .analysisList > li .head .btnAdd:hover .txt::before,
#analysis .lCon .accList > li .btm .analysisList > li .head .btnAdd.active .txt::before {transform: translateY(-50%) rotate(180deg);}
#analysis .lCon .accList > li .btm .analysisList > li .head .btnAdd.file {background-color:#8272c9;}
#analysis .lCon .accList > li .btm .analysisList > li .head .btnAdd.file:hover,
#analysis .lCon .accList > li .btm .analysisList > li .head .btnAdd.file.active {background-color:#8272c9;}
#analysis .lCon .accList > li .btm .analysisList > li .head .btnAdd .txt {display:block; position:relative; padding-left:22px; font-weight:500; font-size:0.875rem; color:#fff; line-height: 1;}
#analysis .lCon .accList > li .btm .analysisList > li .head .btnAdd .txt::before {display:block; position:absolute; top:50%; left:0; width:16px; height:16px; background-size:16px; background: url(../images/common/i_plus.svg) no-repeat center center;  transform: translateY(-50%) rotate(0); transition: .3s;}
#analysis .lCon .accList > li .btm .analysisList > li .head .btnAdd .text {display:block; font-weight:500; font-size:0.875rem; color:#fff; line-height: 1;}
#analysis .lCon .accList > li .btm .analysisList > li .analyTxt {display:block; width:100%; padding:15px 20px; margin-top:5px; border-radius:10px; border:1px solid #E1E4EB; font-weight:400; font-size:1rem; color:#757B8E; word-break: break-all; transition:.3s;}
#analysis .lCon .accList > li .btm .analysisList > li .analyTxt::placeholder {font-weight:400; font-size:1rem; color:#757B8E;}
#analysis .lCon .accList > li .btm .analysisList > li .analyTxt.v01 {height:50px;}
#analysis .lCon .accList > li .btm .analysisList > li .analyTxt.v02 {height:150px;}
#analysis .lCon .accList > li .btm .analysisList > li .btnwAI {max-width:115px; margin-top:10px;}
#analysis .rCon {width:30%; flex-shrink: 0; transition:.3s;}
/* #analysis .rCon .rVideo {height:300px; border-radius:20px; object-fit:cover; transition:.3s;} */
#analysis .rCon .rVideo {min-height:300px;border-radius:20px; object-fit:cover; transition:.3s;}

@media screen and (max-width: 1600px) {
    #analysis .lCon {width:65%;; padding-right:25px;}
    #analysis .lCon .accList > li .top {padding:15px 70px 15px 30px;}
    #analysis .lCon .accList > li .top::before {right:20px;}
    #analysis .lCon .accList > li .btm {padding:20px 30px 30px;}
    #analysis .lCon .accList > li .btm .analysisList > li .analyTxt {padding:15px 17px;}
    #analysis .rCon {width:35%;}
}


/* 팝업 */
#popWrap {visibility: hidden; overflow:hidden; position: absolute; top:0; left:0; width: 100%; height: 100vh; opacity:0; transition:visibility 0s 0.5s, opacity 0.5s;}
#popWrap.on {visibility: visible; opacity:1; transition:top 0.5s, visibility 0s 0s, opacity 0.5s;}
#popWrap::before {display:block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); transition: background 0s 0.5s;}
#popWrap .popCon {position:fixed; top:50%; left:50%; z-index: 99; width:auto; border-radius:10px; padding:40px 70px; background:linear-gradient(to right, #8871EA, #6076E8); transform:translate(-50%, -50%); transition:.3s;}
#popWrap .popCon .subTit {display:block; margin:0 auto; padding-bottom:25px; font-weight:600; font-size:1.25rem; color:#fff; text-align:center; transition:.3s;}
#popWrap .popCon .popBtnList {display:flex; margin:0 -5px; align-items: center; justify-content: center; transition:.3s;}
#popWrap .popCon .popBtnList > li {display:block; padding:0 5px; transition:.3s;}
#popWrap .popCon .popBtnList > li .btnPopCon {display:flex; padding:8px 10px; border-radius:5px; border:1px solid #fff; background-color: transparent; transition: .3s;}
#popWrap .popCon .popBtnList > li .btnPopCon .txt {display:block; position:relative; padding-left:22px; font-weight:700; font-size:0.875rem; line-height:1; color:#fff; transition:.3s;}
#popWrap .popCon .popBtnList > li .btnPopCon .txt::after {display:block; position:absolute; top:50%; left:0; width:16px; height:16px; transform: translateY(-50%);}
#popWrap .popCon .popBtnList > li .btnPopCon.btnClose .txt::after {background:url(../images/common/i_close.svg) no-repeat center center;}
#popWrap .popCon .popBtnList > li .btnPopCon.btnCheck .txt::after {background:url(../images/common/i_check.svg) no-repeat center center;}
#popWrap .popCon .popBtnList > li .btnPopCon:hover,
#popWrap .popCon .popBtnList > li .btnPopCon:active {background-color:#5033CF;}

@media screen and (max-width:1600px){
	#popWrap .popCon {padding:35px 65px;}
    #popWrap .popCon .subTit {padding-bottom: 20px; font-size:1.125rem;}
    #popWrap .popCon .popBtnList > li .btnPopCon .txt {font-size:0.75rem; padding-left:20px;}
    #popWrap .popCon .popBtnList > li .btnPopCon .txt::after {width:15px; height:15px; background-size:15px;}
}

.dots {
    width: 56px;
    height: 26.9px;
    background: radial-gradient(circle closest-side, #ffffff 90%, #0000) 0% 50%,
    radial-gradient(circle closest-side, #ffffff 90%, #0000) 50% 50%,
    radial-gradient(circle closest-side, #ffffff 90%, #0000) 100% 50%;
    background-size: calc(100% / 3) 11.4px;
    background-repeat: no-repeat;
    animation: dots-7ar3yq 1s infinite linear;
}

@keyframes dots-7ar3yq {
    20% {
    background-position: 0% 0%, 50% 50%, 100% 50%;
    }

    40% {
    background-position: 0% 100%, 50% 0%, 100% 50%;
    }

    60% {
    background-position: 0% 50%, 50% 100%, 100% 0%;
    }

    80% {
    background-position: 0% 50%, 50% 50%, 100% 100%;
    }
}


/* 회원가입 */
/* defaultList */
#defaultList {display:block; border-top:1px solid #E1E4EB;}
#defaultList > li {display:flex; padding:15px 30px; border-bottom:1px solid #E1E4EB; gap:40px; align-items:center; transition: .3s;}
#defaultList > li.v02 {align-items: baseline;}
#defaultList > li .tit {display:block; min-width:85px; padding-left:20px; position: relative; font-size:1rem; color:#000; font-weight:700; line-height: 1; transition: .3s;}
#defaultList > li .tit::before {display:block; position: absolute; top:50%; left:0; width:10px; height:10px; border-radius: 50%; background-color:#246BEB; transform: translateY(-50%);}
#defaultList > li .con {display: flex; gap:20px; align-items: center; transition: .3s;}
#defaultList > li .con .txt {font-size:1rem; font-weight: 500; color:#757B8E; line-height: 1;}

#join .joinCon .scrollBox {border:1px solid #E1E4EB; border-radius:10px; padding:25px 30px; transition: .3s;}
#join .joinCon .scrollBox .scroll {overflow-y: auto; max-height:250px;}
#join .joinCon .scrollBox .scroll::-webkit-scrollbar-track {background-color:rgba(0,0,0,0.05);}
#join .joinCon .scrollBox .scroll .item:not(:first-child) {padding-top:15px; transition: .3s;}
#join .joinCon .scrollBox .scroll .item .tit {display:block; padding-bottom:3px; font-size:0.9375rem; font-weight:600; color:#353b4d;}
#join .joinCon .scrollBox .scroll .item .txt {font-size:0.9375rem; font-weight:400; color:#757B8E;}
#join .joinCon .itemCon {gap:7px; padding-top:20px; justify-content: center; transition: .3s;}
#join .joinCon .itemCon .txt {color:#142241; font-weight:500;}
#join .joinCon .itemCon .inCheck::before {background:#fff url(../images/sub/i_join_check.svg) no-repeat center center;}
#join .joinCon .itemCon .inCheck::after {background:#fff url(../images/sub/i_join_check_on.svg) no-repeat center center;}

#join .inCon {min-width:250px; height:40px; padding:10px;}
#join .inCon.name {min-width:auto; width:150px;}
#join .text {display:block; font-size:0.875rem; color:#666666; font-weight:400; transition: .3s;}
#join .text .red {display:inline-block; padding-right:5px; font-size:1rem; color:#FF3D00; font-weight:700; transition: .3s;}

#join .btnList {margin:50px 0 0; gap:10px; transition: .3s;}
#join .btnList > li {padding:0;}
#join .btnList > li .btnCon {min-width:100px; background-color:#fff; border:1px solid #E1E4EB; font-size:1rem; font-weight: 500; color:#000000;}
#join .btnList > li .btnCon.add {background-color:#246BEB; border-color:transparent; color:#fff;}
#join .btnList > li .btnCon:hover,
#join .btnList > li .btnCon.active {background-color: #757B8E; color:#fff; border-color:transparent;}
#join .btnList > li:last-child .btnCon:hover,
#join .btnList > li:last-child .btnCon.active {background-color: #2c2e33;}
#join .btnList > li .btnCon.add:hover,
#join .btnList > li .btnCon.add.active {background-color: #0c3a8f;}

@media screen and (max-width: 1600px) {
    #join .btnList {margin:40px 0 0;}
}