@charset "utf-8"; 

/******************** members ********************/
/***** login *****/
/* member_box */
.member_box {
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 50px 100px;
    border: 1px solid #ccc;
    border-top: 2px solid #000;
    text-align: center;
    margin: 0 auto;
    width: 1000px;
    margin-bottom: 150px;
}
/* login_box */
.login_box {
    width:100%;
    max-width: 580px;
}
.login_box .box_in {}
.login_box h2 {margin:0 auto; padding:0 0 5px; background:none; color:#000; font-size:25px; font-weight:normal; text-align:left; }
.login_box .box_in > div {margin:0 auto; padding:0; width:100%; font-size:16px; text-align:left;}
.login_box .box_in > div label {display:none;}
.login_box .box_in > div input {margin:10px auto 0; padding:15px 0; border:none; border-bottom:1px solid #d2d2d2; width:100%; font-size:14px; text-indent:23px; line-height:1.1;}
.login_box .box_in > div input#id {background:#fff url('/kor/drbbs/image/icon_id.png') no-repeat left center;}
.login_box .box_in > div input#pw {background:#fff url('/kor/drbbs/image/icon_pw.png') no-repeat left center;}
.login_box .box_in .btn_go {overflow:hidden; display:block; padding:15px 0 10px;}
.login_box .box_in .btn_go a {color:#000; font-size:14px;}
.login_box .box_in .btn_join {float:left;}
.login_box .box_in .btn_find {float:right;}
.login_box .box_in .btn_join::before {content:""; display:inline-block; margin:10px 4px 0 0; width:0; height:0; border-width:3px; border-style:solid; border-color:transparent; border-right-color:#000; font-size:0; line-height:0; vertical-align:top;}
.login_box .box_in .btn_find::after {content:""; display:inline-block; margin:10px 0 0 4px; width:0; height:0; border-width:3px; border-style:solid; border-color:transparent; border-left-color:#000; font-size:0; line-height:0; vertical-align:top;}
.login_box .login_btn {margin:20px auto 0; padding:17px 0; border:none; background:#006cb8; border:1px solid #006cb8; width:100%; color:#fff; font-size:17px; font-weight:normal; text-align:center; cursor:pointer;}
.login_box .login_btn:hover {background:#005997; border:1px solid #005997;}
/* out_login_box */
.out_login_box {text-align:left; display:block;}
.out_login_box h2 {display:none; margin:0 auto; padding:0 0 7px; background:none; color:#000; font-size:25px; font-weight:normal; text-align:left; }
.out_login_box p {margin:0 auto; padding:0; color:#333; font-size:13px; font-weight:normal; text-align:left;}
.out_login_box ul {overflow:hidden; padding-top:20px;}
.out_login_box li {float:left; margin:4px 5% 0 0; text-align:center;}
.out_login_box li a {color:#000; font-size:14px;}
.out_login_box li a span {padding-right:5px;}
.out_login_box li .ic {display:block; margin-bottom:5px; width:150px; height:150px; border-radius:50%;}
.out_login_box li.naver .ic {border:1px solid #03cf5d; background:#03cf5d url('/kor/drmem/image/logo_naver.png') no-repeat center center;}
.out_login_box li.kakao .ic {border:1px solid #ffcd00; background:#ffcd00 url('/kor/drmem/image/logo_kakao.png') no-repeat center center;}
.out_login_box li.google .ic {border:1px solid #4581f4; background:#fff url('/kor/drmem/image/logo_google.png') no-repeat center center;}
.out_login_box li.facebook .ic {border:1px solid #3b5998; background:#3b5998 url('/kor/drmem/image/logo_facebook.png') no-repeat center center;}
/* login_box 와 out_login_box 가 같이 있을때 */
.login_box+.out_login_box {padding-left:65%;}
.login_box+.out_login_box .box_in {margin-left:40px;}
.login_box+.out_login_box h2 {display:block;}
.login_box+.out_login_box ul {padding-top:12px;}
.login_box+.out_login_box li {float:none; margin:3px 0 0 0; width:100%; text-align:left;}
.login_box+.out_login_box li a {display:block; overflow:hidden; font-size:0; text-indent:-99999px;}
.login_box+.out_login_box li .ic {display:block; margin:0; width:auto; height:43px; border-radius:0;}
/* login_side */
.login_side {display:none; overflow:hidden; clear:both;}
.login_side .box_out {float:left; padding:40px 0; width:50%; border-top:1px solid #aaa; background:#f9f9f9;}
.login_side .box_out h3 {padding:0; margin:0; background:none; color:#000; font-size:25px; font-weight:500; letter-spacing:0; text-align:center;}
.login_side .box_out p {padding:0; margin:5px 0 15px; color:#333; font-size:14px; text-align:center; word-break:keep-all;}
.login_side .box_out .btn_go {display:inline-block; padding:9px 30px; background:#db7177; border:1px solid #db7177; width:150px; color:#fff; font-size:14px; text-align:center; cursor:pointer;}
.login_side .box_out.find_box {border-top:1px solid #000; background:#000;}
.login_side .box_out.find_box h3 {color:#fff;}
.login_side .box_out.find_box p {color:#fff;}
.login_side .box_out.find_box .btn_go {background:#fff; border:1px solid #fff; color:#000;}
/* login_box 주석해지시 로그인 스타일 바뀜
.member_box {overflow:hidden; position:relative; z-index:10; border:1px solid #aaa; border-top:2px solid #000; text-align:center;}
.member_box .login_box {float:none; margin:0 auto; padding:55px 0 85px; width:370px; border:none;}
.member_box .login_box h2 {padding:0; font-size:50px; letter-spacing:-2px;}
.member_box .login_box .box_in > div input {margin:7px auto 0; padding:15px 19px 14px 39px; border:1px solid #d2d2d2; width:310px; font-size:16px; text-indent:0;}
.member_box .login_box .box_in > div input#id {background-position-x:13px;}
.member_box .login_box .box_in > div input#pw {background-position-x:13px;}
.member_box .login_box .box_in .btn_go {display:none;}
.member_box .login_box .login_btn {margin:7px auto 0; padding:15px 0; background:#000;}
.member_box .out_login_box {display:none;}
.member_box .login_side {display:block;}
login_box 주석해지시 로그인 스타일 바뀜 */


/* join_pop */
.join_pop {
    display: flex;
    gap:32px;
}
.join_pop > div {
    flex:1;
    border:2px dotted #ddd; 
}
.join_pop > div a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:16px;
    padding:32px; 
}
.join_pop > div i {
    font-size: 56px;
    color:#006cb8;
}
.join_pop > div strong {
    display:block; 
    color:#333; 
    font-size:19px; 
    font-weight:700; 
}
.join_pop > div .btn {
    display:flex;
    align-items: center;
    justify-content: center; 
    border:1px solid #006cb8; 
    width:70%; 
    height:45px;
    background:#006cb8; 
    color:#fff; 
    font-weight:600; 
    text-align:center;
}
.join_pop > div:hover .btn {
    border-color:#005997; 
    background:#005997;
}

.join_pop > div.btn_point i {
    color:#1d1d1d;
}
.join_pop > div.btn_point .btn {
    border:1px solid #555; 
    background:#555; 
}
.join_pop > div.btn_point:hover .btn {
    border-color:#000; 
    background:#000;
}

.join_pop > div.btn_point02 .btn {
    border:1px solid #d6032b; 
    background:#d6032b; 
}
.join_pop > div.btn_point02:hover .btn {
    border-color:#b10022; 
    background:#b10022;
}

.join_pop > div .btn_point03 {
    display:block; 
    margin:10.000px auto 0; 
    border:1px solid #f57f00; 
    width:60%; 
    height:45.000px; 
    line-height:45.000px; 
    background:#f57f00; 
    color:#fff; 
    font-weight:bold; 
    box-sizing:border-box; 
    text-align:center;
}
.join_pop > div:hover .btn_point03 {
    border-color:#f56e00; 
    background:#f56e00;
}


/***** join *****/
/* join_form */
.join {
    display: flex;
    gap:56px;
}
.join .join_form {
    flex:1;
    position:relative; 
    padding-right:56px; 
    border-right:1px solid #d7d7d7;
}
.join_form > p {
    position:absolute; 
    top:-35px; 
    right:56px; 
    margin:0; 
    color:#333; 
}
.join_form caption {
    overflow:hidden; 
    margin:0; 
    padding:0; 
    height:0; 
    text-indent:-2000px; 
    font-size:0; 
    line-height:0;
}
.join_form table {
    width:100%; 
    border-collapse:collapse; 
    border-top:1px solid #ccc;
}
.join_form table .txt_warning {
    display:inline-block; 
    width:10px;
}
.join_form th {
    width:130px; 
    padding:20px 0; 
    border-bottom:1px solid #ccc; 
    color:#000; 
    text-align:left; 
    vertical-align:middle; 
    font-size:15px; 
    font-weight:700; 
    line-height:1.3;
}
.join_form td {
    padding:20px 0; 
    border-bottom:1px solid #ccc; 
    color:#555; 
    text-align:left; 
    font-size:15px; 
    line-height:1.5;
}
.join_form td * {
    vertical-align:middle;
}
.join_form td input+label {
    padding:0 10px 0 3px;
}
.join_form td p {
    margin:4px 0 0; 
    color:#333; 
    font-size:13px;
}
.join_form td .inp_box {
    margin:-4px 0;
}
.join_form td .inp_box * {
    margin:4px 0;
}
.join_form td .inp_box label {
    display:inline-block; 
    width:20%;
}
.join_form td .inp_box .inp_medium {
    width:78%;
}
/* join_side */
.join .join_side {
    width:300px;
}
.join_check {
    padding:25px 0 20px; 
    border-top:1px solid #ccc;
}
.join_check > li {
    padding:4px 0; 
    color:#333; 
    font-size:15px;
}
.join_check > li > * {
    vertical-align:top;
}
.join_check input {
    margin:5px 3px 0 0;
}
.join_check label strong {
    color:#000; 
    font-weight:normal;
}
.join_check a {
    margin-left:3px; 
    color:#011460; 
    text-decoration:underline;
}
.join_check a:hover {
    color:#011460; 
    text-decoration:underline !important;
}
.join_check li.all_check {
    color:#000; 
    font-weight:bold; 
    font-size:17px;
}
.join_check .join_popup {
    position:relative;
}
.join_check .join_popup_open {
    position:absolute; 
    top:-20px; 
    right:0;
}
.join_check .join_popup_close {
    position:absolute; 
    top:-30px; 
    right:0; 
    display:none;
}
.join_check .join_popup_in {
    display:none; 
    overflow-y:scroll; 
    margin:10px 0; 
    padding:10px; 
    height:180px; 
    border:1px solid #d7d7d7;
}
.join_check .join_popup_in h2 {
    margin:0 0 3px; 
    color:#000; 
    font-size:17px;
}
.join_check .join_popup_in h3 {
    margin:0 0 3px; 
    color:#000; 
    font-size:15px;
}
.join_check .join_popup_in h4 {
    margin:0 0 3px; 
    color:#000; 
    font-size:14px;
}
.join_check .join_popup_in p {
    margin:0 0 3px; 
    color:#333; 
    font-size:14px;
}
.join_check .join_popup_in ul {
    margin:0;
}
.join_check .join_popup_in li {
    margin:0 0 3px; 
    color:#333; 
    font-size:14px;
}
.join_check .join_popup_in h2.tmg,
.join_check .join_popup_in h3.tmg,
.join_check .join_popup_in h4 {
    margin-top:15px;
}
/* id_exist */
.id_exist {
    padding:23px 10px 0; 
    background:#f9f9f9; 
    text-align:center;
}
.id_exist p {
    margin-top:8px; 
    font-size:12px; 
    text-align:center;
}

/***** mbform *****/
/* inp sel tex */
.inp {padding:5px 0; text-indent:10px; border:none; border:1px solid #d7d7d7; background:#fff; font-size:15px !important; color:#555;}
.sel {padding:5px 0; text-indent:10px; border:none; border:1px solid #d7d7d7; background:#fff; font-size:15px !important; color:#555;}
.tex {padding:5px 0; text-indent:10px; border:none; border:1px solid #d7d7d7; background:#fff; font-size:15px !important; color:#555;}
/* inp sel tex size */
.inp_mini {width:60px;}
.inp_mini02 {width:100px;}
.inp_short {width:25%;}
.inp_medium {width:60%;}
.inp_large {width:98%;}
/* mbbtn */
.mbbtn {overflow:hidden; margin:30px 0 0; text-align:center;}
.mbbutton01 {background:#006cb8; color:#fff; text-align:center; padding:6px 20px; border:1px solid #006cb8; cursor:pointer; font-size:14px; font-weight:400;}
.mbbutton01:hover, .mbbutton01:focus, .mbbutton01:active {background:#005997; border:1px solid #005997; color:#fff;}
.mbbutton01:visited {color:#fff;}
a.mbbutton01:hover, a.mbbutton01:focus, a.mbbutton01:active  {background:#005997; border:1px solid #005997; color:#fff;}
a.mbbutton01:visited {color:#fff;}
.mbbutton02 {background:#f1f1f1; color:#212121; text-align:center; padding:6px 20px; font-size:14px; font-weight:400; border:1px solid #d7d7d7; cursor:pointer;}
a.mbbutton02:hover, a.mbbutton02:focus, a.mbbutton02:active, a.mbbutton02:visited {color:#212121;}
.mbbutton03 {background:#fff; color:#212121; text-align:center; padding:6px 20px; font-size:14px; font-weight:400; border:1px solid #d7d7d7; cursor:pointer;}
a.mbbutton03:hover, a.mbbutton03:focus, a.mbbutton03:active, a.mbbutton03:visited {color:#212121;}
.mbbutton04 {background:#444; color:#fff; text-align:center; padding:6px 20px; font-size:14px; font-weight:400; border:1px solid #363636; cursor:pointer;}
a.mbbutton04:hover, a.mbbutton04:focus, a.mbbutton04:active, a.mbbutton04:visited {color:#fff;}
.mbbutton05 {background:#fff; color:#000; text-align:center; padding:6px 20px; font-size:14px; font-weight:400; border:2px solid #000; cursor:pointer;}
a.mbbutton05:hover, a.mbbutton05:focus, a.mbbutton05:active, a.mbbutton05:visited {color:#000;}


/* mbbtn size */
.mbbtn_mini {padding:7px 10px; font-size:15px !important;}
.mbbtn_mini2 {margin-top:10px; padding:7px 24px; font-size:12px !important;}
.mbbtn_medium {padding:10px 40px; font-size:16px !important;}
.mbbtn_large {width:100%; box-sizing:border-box; padding:20px 70px; font-size:17px !important;}

/***** find *****/
/* find_box */
.find_box {
    overflow: hidden;
    width: 1100px;
    margin: 0 auto;
    margin-bottom: 120px;
}
.find_box .tab ul {
    position:relative; 
    z-index:10; 
    overflow:hidden; 
    margin:0 0 -1px; 
    padding:0; 
    width:100%; 
    border-left:1px solid #ccc;
}
.find_box .tab ul li {
    float:left; 
    text-align:center; 
    vertical-align:middle;
}
.find_box .tab ul li a {
    display:block; 
    padding:20px 50px; 
    border:1px solid #ccc; 
    border-left:none; 
    background:#f9f9f9; 
    height:17px; 
    color:#222; 
    font-size:14px; 
    font-weight:400; 
    line-height:1; 
    text-align:center; 
    vertical-align:middle; 

}
.find_box .tab ul li.on a {
    padding-top:19px; 
    border-top:2px solid #000; 
    border-bottom:1px solid #fff; 
    background:#fff; 
    color:#000;
}
.find_box .tab_cnt_out {
    position:relative; 
    z-index:1; 
    padding:50px 100px; 
    border:1px solid #ccc; 
    text-align:center;
}
.find_box .join_form {
    margin:0 auto; 
    width:100%;
    max-width: 580px; 
    text-align:left;
}
.find_box .join_form .id_name {
    display: flex;
    gap: 8px;
}
.find_box .join_form .id_name a {
    width: 20%;
    flex-shrink: 0;
}
.find_box .join_form .mbbtn_mini2 {
    padding:12px;
    font-size: 14px !important;
}
.find_box .join_form h2 {
    display:none; 
    margin:0 auto; 
    padding:0 0 7px; 
    background:none; 
    color:#000; 
    font-size:25px; 
    font-weight:normal; 
    text-align:left; 

}
.find_box .join_form label {
    display:none; 
    margin-top:20px; 
    color:#000; 
    font-size:14px;
}
.find_box .join_form .inp {
    margin-top:10px; 
    padding:15px 0; 
    border:none; 
    background:#eee; 
    width:100%; 
    font-size:14px; 
    text-indent:23px; 
    line-height:1.1;
}
.find_box .login_btn {
    margin:20px auto 0; 
    padding:17px 0; 
    border:none; 
    background:#006cb8; 
    border:1px solid #006cb8; 
    width:100%; 
    color:#fff; 
    font-size:17px; 
    font-weight:normal; 
    text-align:center; 
    cursor:pointer;
}
.find_box .login_btn:hover {
    border-color:#005997; 
    background:#005997;
}





/***** protection *****/
/* protection */
.protection p {margin:0 0 5px 0;}
.protection .lstyle {margin:0 0 5px 0;}
.protection .lstyle01 li,
.protection .lstyle02 li,
.protection .lstyle03 li,
.protection .lstyle04 li {margin-bottom:2px;}



/******************** 모바일 ********************/
@media all and (max-width:1200px){
    .join {
        flex-direction: column;
    }
    .join .join_form {
        padding-right:0;
        border-right:none;
    }
    .join_form > p {
        position: static;
        margin: 0 0 10px;
        text-align: right;
    }
    .join_side {
        width: 100% !important;
    }
    .join_check {
        padding:0 0 20px;
        border-top: none;
    }
}
@media all and (max-width:768px){
    .member_box, .find_box .tab_cnt_out {
        padding:50px;
    }
    .join_pop {
        flex-direction: column;
    }
    
}
@media all and (max-width:768px){
    .find_box .join_form .id_name a {
        width:26%;
    }
}
@media all and (max-width:450px){
    .member_box {
        padding:50px 40px;
    }
    .join_pop > div .btn {
        width:90%;
    }
    .join_form th {
        width:100px;
    }
    .find_box .tab_cnt_out {
        padding:50px 40px;
    }
    .find_box .tab ul {
        display: flex;
    }
    .find_box .tab ul li {
        flex:1;
    }
    .find_box .tab ul li a {
        padding:20px 10px;
    }
    .find_box .join_form .id_name {
        flex-direction: column;
    }
    .find_box .join_form .id_name a {
        width:100%;
        margin-top:0;
        box-sizing: border-box;
    }
}