/* terms */
.terms{background-color:#fff;}
.terms .subTitle{background-image:url(../images/sub/login_bg.jpg); background-size:cover;}
.terms .titBox{padding:10% 0 6% 0;}
.terms .titBox h2, .terms .titBox h3{text-align:center; color:#fff;}
.terms .con{width:1200px; overflow:hidden; margin:0 auto; padding:100px 0 120px 0;}
.terms .tab{width:100%; height:60px; margin-bottom:60px; border:1px solid #ddd;}
.terms .tab > li{float:left; width:33.33%; height:100%;}
.terms .tab > li:nth-child(1), .terms .tab > li:nth-child(2){border-right:1px solid #ddd;}
.terms .tab > li a{display:block; width:100%; height:100%; font-size:18px; text-align:center; line-height:58px; color:#888;}
.terms .tab > li.on a{background-color:#fac00e; font-weight:bold; color:#111;}

.terms .conWrap > div{width:100%; overflow:hidden; color:#222; display:none;}
.terms .conWrap .txt01{margin-bottom:60px; font-size:16px; line-height:26px; color:#222;}
.terms .conWrap .txtBox{width:100%; height:680px; padding:50px 40px; border:1px solid #ccc; overflow-y:auto; background-color:#fefefe;}
.terms .conWrap .txtBox::-webkit-scrollbar{width:6px;}
.terms .conWrap .txtBox::-webkit-scrollbar-thumb{width:6px; background:#ddd; border-radius:8px;}
.terms .conWrap .txtBox > p{margin-bottom:60px; font-size:16px; line-height:28px;}
.terms .conWrap .txtBox > h3{margin-bottom:30px; font-size:18px; font-weight:bold;}
.terms .br{display:none;}

/* login */
.login {height: 100vh; padding-top: 50px; background-color:#f4f6fa; overflow-y: auto}
.login h3 {font-size: 3em; text-align: center; margin-bottom: 50px; opacity: .5}
.login article {width: 600px; margin: 0 auto; border: 1px solid #dadbdc; border-radius: 5px; background: #fff}
.login .tab {display: flex;  background: #f6f7f8}
.login .tab li {width: 50%; height: 60px; line-height: 60px; border-bottom: 1px solid #dadbdc; text-align: center; font-size: 1.2em}
.login .tab li:first-child {border-right: 1px solid #dadbdc}
.login .tab li.on {color: #000; border-bottom:1px solid #fff; background: #fff}
.login-wrap {padding: 50px 80px; font-size: 18px}
.login-wrap .cts-area li {margin-bottom: 10px}
.login-wrap .cts-area label {display: block; margin-bottom: 5px; font-size: .8em; font-weight: 600}
.login-wrap .cts-area input {display: block; width: 100%; border: none; font-size: 1.2em; line-height: 40px; background: #f5f6f7}
.login-wrap .btn-area {padding-top: 30px}
.login-wrap .btn-area button {width: 100%; height: 60px; color: #fff; background: linear-gradient(45deg, #d90e1b 50%, #ec430d)}
.login-wrap .chk-area {margin-bottom: 50px}
.login-wrap .no-member li:first-child {margin-bottom: 30px}
.login-wrap .no-member {margin-bottom: 50px; border-top: 1px solid #dadbdc; padding-top: 30px; text-align: center}
.login-wrap .no-member a {display: block; line-height: 60px; color: #ec430d; border: 1px solid #ec430d;}
.login input::-webkit-input-placeholder {font-size: .8em;}/* 크롬 4–56 */
.login input:-moz-placeholder {font-size: .8em;}/* 파이어폭스 4–18 */
.login input::-moz-placeholder {font-size: .8em;}/* 파이어폭스 19–50 */
.login input:-ms-input-placeholder {font-size: .8em;}/* 인터넷 익스플로러 10+ */
.login input::placeholder {font-size: .8em;}/* 파이어폭스 51+, 크롬 57+ */

/* join */
.join {height: 100vh; padding-top: 50px; background-color:#f4f6fa; overflow-y: auto}
.join h3 {font-size: 3em; text-align: center; margin-bottom: 50px; opacity: .5}
.join article {width: 600px; margin: 0 auto 50px; border: 1px solid #dadbdc; border-radius: 5px; background: #fff}
.join .agree {padding-top: 30px}
.join .agree li {margin-bottom: 20px}
.join .agree input[type=checkbox] {border:1px solid #a2a2a2}
.join .agree p {position: relative; height: 30px}
.join .agree p button {position: absolute; top: 5px; right: 10px; width: 15px; height: 15px; border: none; background: url("../images/bullet.png") 0 -60px ; background-size: 15px auto}
.join .agree p button.on {transform: rotate(180deg)}
.join .agree p.on:after {transform: rotate(180deg)}
.join .agree p.on + div {display: block}
.join .agree p + div {max-height: 300px; white-space: pre-line; font-size: .9em; color: #777; border-top: 1px solid #ddd; background: #f8f8f8; padding: 10px 5px; word-break: keep-all; overflow-y: auto; display: none}
.join .conWrap{padding: 50px 80px; font-size: 14px; overflow:hidden;}
.join label{float:left; display:inline-block; width:25%; line-height:40px;}
.join input:not([type=checkbox]) {width:75%; height:40px; margin-bottom:10px; padding-left:20px; font-size:14px; border:1px solid #ddd; background: #f5f6f7}
.join #chk{position:relative; top:3px; width:12px; height:12px; margin-right:10px;}
.join #nick, .join #id{width:53%}
.join input[type=button]{float:right; width:20%; color:#aaa; padding:0; border:1px solid #ddd; background-color:#f9f9f9;}
.join #joinBtn{display:block; width:100%; height:60px; line-height: 60px; color: #fff; text-align: center; background: linear-gradient(45deg, #d90e1b 50%, #ec430d);}
.join .searchWrap{text-align:center;}
.join .searchWrap li{display:inline; padding:0 20px; font-size:14px; color:#aaa; border-right:1px solid #ddd;}
.join .searchWrap li:last-child{border:none;}
.join .searchWrap a {display: block; line-height: 60px; color: #ec430d; border: 1px solid #ec430d;}

/* lost */
.lost{background-color:#f1f2f5;}
.lost .subTitle{background-image:url(../images/sub/login_bg.jpg); background-size:cover;}
.lost .titBox{padding:10% 0 6% 0;}
.lost .titBox h2, .lost .titBox h3{text-align:center; color:#fff;}
.lost .conWrap{width:480px; margin:0 auto; padding:100px 0 120px 0;}
.lost .btnWrap{width:100%; height:50px; margin-top:40px;}
.lost .btnWrap li{float:left; width:48%; height:50px; margin:0 1%;}
.lost .btnWrap li a{display:block; width:100%; height:100%; font-size:16px; text-align:center; line-height:50px; color:#333; border:1px solid #aaa;}
.lost .btnWrap li:last-child a{color:#fff; background-color:#333;}
.lost input::-webkit-input-placeholder {color:#aaa;}/* 크롬 4–56 */
.lost input:-moz-placeholder {color:#aaa;}/* 파이어폭스 4–18 */
.lost input::-moz-placeholder {color:#aaa;}/* 파이어폭스 19–50 */
.lost input:-ms-input-placeholder {color:#aaa;}/* 인터넷 익스플로러 10+ */
.lost input:placeholder {color:#aaa;}/* 파이어폭스 51+, 크롬 57+ */

.lost01{width:100%;}
.lost01 .tab{width:100%; height:50px; margin-bottom:60px;}
.lost01 .tab li{float:left; width:50%; height:100%; border-bottom:1px solid #ddd; text-align:center; line-height:47px;}
.lost01 .tab li a{display:block; width:100%; height:100%; color:#aaa;}
.lost01 .tab li.on a{border-bottom:3px solid #333; font-weight:500; color:#333;}
.lost01 label{display:inline; float:left; width:25%; font-size:16px; line-height:40px;}
.lost01 input, .lost01 select{float:left; width:75%; height:40px; margin-bottom:10px; padding-left:14px; border:1px solid #ddd; font-size:14px; font-weight:inherit; color:#888;}
.lost01 #phone, .lost01 #num{width:55%;}
.lost01 .conBtn{float:right; width:18%; height:40px; padding:0; border:1px solid #ddd; background-color:#f9f9f9; font-size:14px; text-align:center; line-height:38px; font-weight:500; color:#888;}
.lost02{text-align:center;}
.lost02 .tit{padding:30px 0; font-size:20px; font-weight:bold;}
.lost02 .informBox{width:100%; overflow:hidden; padding:40px 10%; border:1px solid #ddd; background-color:#fff;}
.lost02 .informBox li{float:left; width:50%;}
.lost02 h3{font-size:16px; line-height:30px;}
.lost02 p{font-size:18px; font-weight:bold; line-height:30px;}

/* mobile */
@media only screen and (max-width:741px){
    .login {padding-top: 20px}
    .login article {width: 90%}
    .login h3 {margin-bottom: 10px; font-size: 2em}
    .login-wrap {padding: 20px 40px}
    .login-wrap .cts-area {position: relative; margin-bottom: 30px}
    .login-wrap .cts-area label {display: none}
    .login-wrap .cts-area input {width: 70%; border: 1px solid #dadbdc; padding: 0 5px}
    .login-wrap .chk-area {margin-bottom: 20px}
    .login-wrap .btn-area {position: absolute; top: 0; right: 0; width:calc(30% - 5px); padding: 0; margin: 0}
    .login-wrap .btn-area button {height: 94px}
    .login-wrap .no-member {display: flex; align-items: center; justify-content: space-between; margin-bottom: 0}
    .login-wrap .no-member li:first-child {margin-bottom: 10px}
    .login-wrap .no-member li:last-child {width:30%}
    .login-wrap .no-member a {width:100%}
    
    .join {padding-top: 20px}
    .join h3 {font-size: 2em; margin-bottom: 20px}
    .join article {width: 96%; }
}

/* wide */
@media only screen and (max-width:421px){
    .login {height: 100vh; overflow-y: auto}
    .login-wrap {padding: 20px 30px}
    .login-wrap .cts-area {position: relative; padding:0; display: flex; flex-direction: column}
    .login-wrap .cts-area li {width: 100%}
    .login-wrap .cts-area li.btn-area {position: static}
    .login-wrap .cts-area li.btn-area button {height: 54px;}
    .login-wrap .cts-area label {display: block}
    .login-wrap .cts-area input {width: 100%; border: 1px solid #ccc; padding: 0 5px}
    .login-wrap .chk-area {margin-bottom: 20px}
    .login-wrap .no-member {flex-direction: column}
    .login-wrap .no-member li:first-child {margin-bottom: 10px}
    .login-wrap .no-member li:last-child {width:100%}
    
    .join {padding-top: 10px}
    .join h3 {margin-bottom: 10px; font-size: 2em}
    .join .agree p + div {max-height:200px}
    .join label {width: 30%; white-space: nowrap; line-height: 1.5em}
    .join input:not([type=checkbox]) {width: 100%; padding-left: 5px}
    .join #nick, .join #id {width: 70%}
    .join input[type=button] {position: absolute; bottom: 0; right: 0; width: 25%}
    .join .conWrap {padding: 30px 40px}
    .join .conWrap ul:first-child li {position: relative; display: flex; flex-direction: column;}
}