/* ====sub===================================================== */
#sub_contents{margin-top: 120px;padding: 80px 0px 100px;}
#sub_contents.no_padding{padding: 0;}
#sub_contents .inner{width: 1280px;min-height: 600px;margin: auto;}
#sub_contents .contop h4{color: #222;font-size: 35px; font-weight: 700; margin-bottom: 30px;}
#sub_contents .contop h4.ta01{text-align: center;}

/* login */
.login_wrap{width:670px; padding:50px; background:#f7f7f7;margin:0 auto;}
.login_wrap input{width:100%; height:50px; background:#fff; padding-left:60px; border:none;}
.login_wrap input.login_id{ background:#fff url('/mnt/data/login/login_id_icon1.png')left 20px center no-repeat; margin-bottom:20px;}
.login_wrap input.login_pw{ background:#fff url('/mnt/data/login/login_pw_icon1.png')left 20px center no-repeat;}
.login_wrap .btn01{margin:30px 0; display:flex; align-items:center; justify-content:center; width:100%; height:60px; background:#198754; color:#fff; font-size:17px;}
.login_wrap .btn01 img{margin-right:15px;}
.login_wrap .btn_kakao{background:#fce51e; margin:30px 0 20px; color:#381e1e;}
.login_wrap .btn_naver{background:#28d111; margin:0;}
.login_wrap div{display:flex; justify-content:end; font-size:15px;}

/* join */
.join_wrap{width:800px; margin:auto;}
.join_tbl{width:100%; border-top:2px solid #3b4ece; border-bottom:1px solid #ddd;}
.join_tbl th{padding:15px 20px; font-size:15px; color:#222; text-align:left; width:200px;  border-bottom:1px solid #ddd;}
.join_tbl th em{color:red;}
.join_tbl td{padding:15px 20px;  border-bottom:1px solid #ddd;}
.join_wrap button.join_btn{display:inline-block; padding:0 6px;  border-radius:3px; font-size:14px; text-align:center; color:#111; background:#efefef; border:1px solid #555; margin-left:4px;}
.join_tbl td input{ border: 1px solid #ddd; height: 40px;  padding: 0 10px;}
.join_tbl td select {border: 1px solid #ddd; height: 40px; width:25%; padding: 0 10px;}
.join_tbl td input.input_mail {width: 35.5%;}
.join_tbl td input.input_txt {width: 100%;}
.join_tbl td input.input_txt02{width:calc(75% - 4px);}
.join_tbl td input.input_num {width:calc((100% - 42px)/ 3);}
.join_tbl td input.input_pass {width: 100%;}
.join_tbl td input.address{width:35%; }
.join_tbl td input.address2{width:100%; margin:5px 0 0;}
.join_tbl td .bar {display: inline-block; width: 10px; height: 1px; background-color: #666; margin: 0 2px; vertical-align: middle;}
.join_wrap .agree_wrap{margin-top: 15px;}
.join_wrap .agree_wrap span{display: block; margin-bottom: 5px; font-size: 14px; color: #222;}
.join_wrap .agree_wrap span a{color: #222; border-bottom: 1px solid #999;}
.join_wrap .agree_wrap span input{margin-right: 5px;}
.join_wrap .btn_wrap{display:flex; justify-content:center; margin-top:60px;}
.join_wrap .btn_wrap .list_btn{width:240px; height:60px; background:#3b4ece; text-align:center; line-height:60px; color:#fff; font-size:15px;}
@media screen and (max-width:767px) {
    #sub_contents {margin-top: 80px;padding: 40px 0px 40px;}

    #sub_contents .inner {width: 100%;min-height: 400px;padding: 0 2.6%;}

    #sub_contents .contop h4 {color: #222;font-size: 20px;font-weight: 700;margin-bottom: 10px;}

    /* login */
    .login_wrap {width: 100%;padding: 30px;background: #f7f7f7;margin: 0 auto;}

    .login_wrap input {width: 100%;height: 40px;background: #fff;padding-left: 40px;border: none;}

    .login_wrap input.login_id {background: #fff url('/mnt/data/login/login_id_icon1.png')left 10px center no-repeat;margin-bottom: 10px;}

    .login_wrap input.login_pw {background: #fff url('/mnt/data/login/login_pw_icon1.png')left 10px center no-repeat;}

    .login_wrap .btn01 {margin: 20px 0;display: flex;align-items: center;justify-content: center;width: 100%;height: 45px;background: #198754;color: #fff;font-size: 14px;}

    .login_wrap .btn01 img {margin-right: 10px;width: 20px;}

    .login_wrap .btn_kakao {background: #fce51e;margin: 20px 0 10px;color: #381e1e;}

    .login_wrap .btn_naver {background: #28d111;margin: 0;}

    .login_wrap div {display: flex;justify-content: space-between;font-size: 12px;}

    /* join */
    .join_wrap {width: 100%;margin: auto;}

    .join_tbl th {padding: 10px;font-size: 12px;color: #222;text-align: left;width: 80px;}

    .join_tbl td {padding: 10px;}

    .join_wrap button.btn01 {width: 100%;margin-top: 20px;}

    .join_tbl td input {border: 1px solid #ddd;height: 30px;padding: 0 10px;}

    .join_tbl td select {border: 1px solid #ddd;height: 30px;width: 100%;padding: 0 10px;margin-top: 7px;}

    .join_tbl td input.input_mail {width: calc(50% - 9px);}

    .join_tbl td input.input_txt {width: 100%;}

    .join_tbl td input.input_txt02 {width: 100%;margin-top: 5px}

    .join_tbl td input.input_num {width: calc((100% - 38px)/ 3);}

    .join_tbl td input.input_pass {width: 100%;}

    .join_tbl td input.address {width: 50%;}

    .join_tbl td input.address2 {width: 100%;margin: 5px 0 0 0;}

    .join_tbl td .bar {display: inline-block;width: 8px;height: 1px;background-color: #666;margin: 0 2px;vertical-align: middle;}

    .join_wrap .agree_wrap {margin-top: 15px;}

    .join_wrap .agree_wrap span {display: block;margin-bottom: 5px;font-size: 12px;color: #222;}

    .join_wrap .agree_wrap span a {color: #222;border-bottom: 1px solid #999;}

    .join_wrap .agree_wrap span input {margin-right: 5px;}

    .join_wrap .btn_wrap {display: flex;justify-content: center;margin-top: 30px;}

    .join_wrap .btn_wrap .list_btn {width: 130px;height: 40px;background: #3b4ece;text-align: center;line-height: 40px;color: #fff;font-size: 12px;}

    .join_wrap button.join_btn {display: inline-block;padding: 0 4px;border-radius: 3px;font-size: 12px;text-align: center;color: #111;background: #efefef;border: 1px solid #555;margin-left: 4px;}
}