@charset "utf-8";

#container {
    width:1200px;
    min-height:800px;
    margin:40px auto;
    position:relative;
}


/*----- media -----*/
@media (max-width:1200px) {
    #container {
        max-width:1200px;
        width:100%;
        padding-bottom:25px;
        margin:0 auto;
    }
}


/*======== content common ========*/
#container #content {
    width:calc(100% - 20px);
    margin:10px auto;
}


/*----- top area -----*/
#content .topArea {
    margin-bottom:45px;
}
#content .topArea h2 {
    color:#2b2b2b;
    font-size:24px;
    font-weight:300;
    border-bottom:2px solid #2e2e2e;
    padding-bottom:10px;
    margin-bottom:30px;
}
#content .topArea p {
    color:#5e5e5e;
    font-size:13px;
    line-height:24px;
}
#content .topArea p::before {
    content:url(../images/icon/icon_point.png);
    vertical-align:text-bottom;
    margin-right:5px;
}
 
#content .c_intro img{
	width:100%;
}

/*======== login area ========*/
/*----- common -----*/
.loginArea {
    width:850px;
    border-top:2px solid #fb503c;
    border-left:1px solid #ededed;
    border-right:1px solid #ededed;
    border-bottom:1px solid #ededed;
    margin:auto;
    align-items:flex-start;
    position:relative;
}
.loginArea > div {
    width:50%;
    margin:60px 0 75px;
    padding:0 70px;
}
.loginArea > div strong {
    display:block;
    color:#2b2b2b;
    font-size:18px;
    font-weight:300;
    margin-bottom:15px;
}
.loginArea > div label {
    cursor:pointer;
}
.loginArea > div input[type=password],
.loginArea > div input[type=text] {
    display:block;
    width:100%;
    height:52px;
    color:#939393;
    font-size:15px;
    text-indent:15px;
    border:1px solid #ededed;
    margin-bottom:5px;
}

.loginArea > div button {
    width:100%;
    height:52px;
    color:#fff;
    border:none;
    margin:10px 0;
}



/*----- box member -----*/
.box_member {
    border-right:1px solid #ededed;
}
.box_member .login button {
    background:#fb503c;
}
.box_member .login ul {
    margin:25px 0;
}
.box_member .login ul li {
    color:#939393;
    font-size:14px;
    font-weight:300;
}
.box_member .login ul li input[type=checkbox] {
    display:inline-block;
    vertical-align:middle;
    margin-right:5px;
}
.box_member .login ul li a {
    color:#939393;
    font-size:14px;
    font-weight:300;
}
.loginArea .social ul li {
    float:left;
    margin-right:5px;
}
.loginArea .social ul li a {
    width:50px;
    height:50px;
}
.loginArea .social .btn_naver {
    background:url(../images/btn/btn_naver.png) no-repeat;
}
.loginArea .social .btn_kakao {
    background:url(../images/btn/btn_kakao.png) no-repeat;
}



/*----- nonmember -----*/
.box_nonmember .login button {
    background:#232323;
}
.box_nonmember .join {
    color:#fb503c;
    font-size:16px;
    font-weight:300;
    position:absolute;
    bottom:75px;
}
.box_nonmember .join .btn_join {
    width:281px;
    height:48px;
    color:#fb503c;
    font-size:16px;
    font-weight:500;
    text-align:center;
    line-height:48px;
    border:1px solid #fb503c;
    margin-top:10px;
}


/*======== login result area ========*/
.resultArea {
    width:845px;
    color:#2b2b2b;
    margin:auto;
}
.box_text {
    border-top:3px solid #fb503c;
    border-left:1px solid #ededed;
    border-right:1px solid #ededed;
    border-bottom:1px solid #ededed;
    padding:80px 0 85px;
}
.box_text > p {
    font-size:18px;
    text-align:center;
    margin-bottom:10px;
}
.box_text > strong {
    display:block;
    font-size:30px;
    text-align:center;
}
.resultArea > p {
    color:#5e5e5e;
    font-size:13px;
    margin:15px 0 35px;
}
.resultArea .btn_login {
    display:block;
    width:280px;
    height:48px;
    color:#fff;
    font-size:16px;
    font-weight:600;
    border:none;
    background:#fb503c;
    margin:auto;

}


/*----- join result -----*/
#content.join_r .resultArea {
    width:510px;
    text-align:center;
}
#content.join_r .resultArea::before {
    content:url(../images/icon/icon_login.png);
    display:block;
    padding-top:25px;
}
#content.join_r .box_text {
    border:none;
    padding:30px 0 35px;
}
#content.join_r .box_text > p {
    font-size:30px;
}
#content.join_r .box_text > p > span {
    font-weight:bold;
}
#content.join_r .box_text > span {
    color: #707070;
    font-weight:300;
}
#content.join_r .box_text > span > strong {
    color:#fb503c;
    padding-left:5px;
}

/*======== find area ========*/
/*----- common -----*/
.formArea > div {
    width:850px;
    margin:auto;
}
.formArea > div strong {
    color:#2b2b2b;
    font-size:24px;
    font-weight:300;
}
.formArea > div p {
    color:#5e5e5e;
    font-size:13px;
    line-height:24px;
}
.formArea > div table {
    width:100%;
    border-top:1px solid #ababab;
    margin:20px 0 25px;
}
.formArea > div tr {
    height:50px;
    border-bottom:1px solid #ededed;
}
.formArea > div th {
    width:200px;
    color:#2b2b2b;
    font-size:15px;
    font-weight:300;
    text-align:center;
    background:#f7f7f9;
}
.formArea > div td {
    padding:0 10px;
}
.formArea > div input[type=text],
.formArea > div input[type=password] {
    width:340px;
    height:30px;
    border:1px solid #e9e9e9;
}
.formArea > div .short input[type=text] {
    width:115px;
}
.formArea > div select {
    width:115px;
    height:30px;
    border:1px solid #e9e9e9;
}
.formArea > div button {
    display:block;
    width: 125px;
    height: 50px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border: none;
    background:#232323;
    margin:0 auto 65px;
}


/*----- join area -----*/
.joinArea .box_basic .btn_overlap {
    display:inline-block;
    color:#626562;
    font-size:13px;
    width:90px;
    height:33px;
    border:1px solid #4c5a66;
    background:none;
    margin:0 0 0 10px;
}
.joinArea .box_agree_show p {
    border-top: 1px solid #ababab;
    border-left:1px solid #ededed;
    border-right:1px solid #ededed;
    border-bottom:1px solid #ededed;
    margin: 20px auto 25px;
    padding:40px 20px;
}
.joinArea .box_agree {
    align-items: flex-start;
}
.joinArea .box_agree label {
    display:block;
    color:#2b2b2b;
    font-size:15px;
    margin-bottom:10px;
}

@media (max-width: 850px) {
    .formArea > div {
        max-width:1200px;
        width:100%;
    }

}



/*----- btn area -----*/
.btnArea {
    text-align:center;
    margin:20px 0;
}
.btnArea button {
    width:125px;
    height:50px;
    color:#fff;
    font-family: 'Noto Sans KR', sans-serif;
    font-size:16px;
    font-weight:500;
    border:none;
    margin:0 2px;
}
.btnArea button.btn_join {
    background:#232323;
}
.btnArea button.btn_cancel {
    background:#929292;
}

.btnArea button.btn_del {
    background:#ff9933;
}



/*----- media -----*/
@media (max-width: 1200px) {
    .loginArea {
        width:650px;
    }
    .loginArea > div {
        margin: 40px 0 55px;
        padding: 0 35px;
    }
    .box_nonmember .join {
        bottom:55px;
    }
    .box_nonmember .join .btn_join {
        width:254px;
        height:48px;
        color:#fb503c;
        font-size:16px;
        font-weight:500;
        text-align:center;
        line-height:48px;
        border:1px solid #fb503c;
        margin-top:10px;
    }
    .resultArea {
        width:700px;
    }

}
@media (max-width: 768px) {
    .loginArea {
        width:100%;
    }
    .loginArea > div {
        width:100%;
        margin: 20px 0 35px;
        padding: 0 15px;
    }
    .box_nonmember {
        border-top:1px solid #ededed;
    }
    .box_nonmember .join {
        position:static;
    }
    .box_nonmember .join .btn_join {
        width:100%;
    }
    .resultArea {
        width:100%;
    }
    #content.join_r .resultArea {
        width:100%;
    }
    #content.join_r .box_text > p {
        font-size:25px;
    }
    .formArea > div th {
        width:100px;
    }
    .formArea > div input[type=text] {
        width:50%;
    }

}
@media (max-width: 480px) {
    #content.join_r .box_text > p {
        font-size:20px;
    }
    .formArea > div input[type=text] {
        width:100%;
        margin-top:5px;
    }
    .joinArea .box_basic .btn_overlap {
        width:100%;
        margin:5px 0;
    }
    .joinArea .box_agree > div {
        width:100%;
    }
    .joinArea .box_agree {
        width:100%;
    }
    .box_member {
        border-right:none;
    }
    .box_nonmember .login {
        margin-top:10px;
    }
    .formArea > div .short input[type=text] {
        margin:5px 0;
    }
    .formArea > div select {
        margin-bottom:5px;
    }
}