.bd-small{max-width: 575px;}
.bd-sml {max-width: 640px;}

/* 로그인 및 회원가입 */
.bd > h3{font-size: 36px; text-align: center; color: #222;}
.bd > p{font-size: 16px; font-weight: 400; text-align: center; margin-top: 5px; color: #888;}
.login_tabs, .join_tabs{display: flex;}
.join_tabs{justify-content: center; gap: 20px;}
.login_tabSet{margin-top: 50px;}
.join_tabSet{margin-top: 40px;}
.login_but > span{color: #fff; font-weight: 500;}
.login_tabs > li { width: 50%; padding-bottom: 10px; font-weight: 500; text-align: center; color: #8888; cursor: pointer;}
.login_tabs > li { border-bottom: 1px solid #ddd;}
.join_tabs > li {padding: 50px; border: 1px solid #ddd; border-radius: 4px;}
.login_tabs > .active{ background-color: #fff; border-bottom: 5px solid #ff4a6b; color: #ff4a6b;}
.panels{margin-top: 40px;}
.text_input{width: 100%;}
.join_tabs > li >div{text-align: center;}
.tit_p{margin-top: 10px; text-align: center; font-weight: 400; color: #888;}



/* 체크박스 디자인 */
.login .d-block{display: flex; align-items: center; position:relative;}
.login .d-block input[type="checkbox"] {display: none;}
.login .d-block input[type="checkbox"] + label { display: inline-block; width:20px; height: 20px; background: #f5f5f5; border: 0; cursor: pointer; border-radius: 2px; float:left; margin-right:10px;}
.login .d-block:after {display:block; clear:both; content:"";}
.login .d-block input[type="checkbox"]:checked + label {background: url(../img/sub/check_box.png)no-repeat center/23px 20px; float: left;}
.login .d-block input[type="checkbox"] + label span{position: absolute; left: 30px; top: 50%; transform: translateY(-50%); color: #222; font-size: 16px; font-weight: 400;}

input[type=checkbox]{display: none;}
input[type=checkbox] + label{cursor: pointer; display: flex; align-items: center; }
input[type=checkbox] + label:before{content: ''; margin-right: 5px; display: inline-block; width: 20px; height: 20px; border: 1px solid #ddd; vertical-align: top;}
input[type=checkbox]:checked + label:before{width: 20px; height:20px; margin-right: 5px; background:url() no-repeat center center ; border: 1px solid #ff4a6b; background: url(/PROJECT/SUHO/page/homepage/img/sub/checked.png) #ff4a6b no-repeat 60% 50%; background-size: 13px 8px;}



.login .login_tabSet .text_input{width:100%; height: 48px; font-size:16px; padding:15px 10px; margin-bottom:10px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px;} 
.login .login_tabSet .text_input::placeholder{font-size: 15px;}
.login .panel01_top .login_button{width: 100%; padding: 15px 0; margin:15px 0; border-radius: 4px; background-color: #ff4a6b; cursor: pointer;}
.login_button > span{ color: #fff; font-weight: 400;}
.login .panel01_bottom{display: flex; justify-content: space-between}
.login .panel01_bottom  p{font-size: 14px; font-weight: 400;}
.login .panel01_bottom div >li{display: inline-block; font-size:14px; text-align: left;} 
.login .panel01_bottom div{text-align: center; display: flex; justify-content: center; gap: 10px;}
.login .panel01_bottom div > div{color: #888; font-size: 14px; font-weight: 400;}
.login .panel01_bottom div > div:nth-child(2)::before{content: '|';}
/* .login .panel01_bottom ul li:nth-child(2)::after{content: '|'; margin-left: 10px;} */
.login .panel01_bottom ul li:nth-child(3){color: #ff4a6b; font-weight: 600;}
.panel .top p { font-family: 'Pretendard'; text-align: center; font-weight: 400; font-size: 18px; color: #fff;}
.panel01_top {margin-top: 40px;}

.ill_img_box > img{width: 280px; margin:0 auto;}
.join_tabs div > button { font-weight: 500; margin-top: 55px; font-family: 'Pretendard';}
.join_tabs div > button > a {display: block; padding: 10px 70px; background-color: #ff4a6b; background-color: #ff4a6b; border-radius: 25px; font-size: 18px; color: #fff;}

/* 회원가입 */
.join{}
.join ul{}
.join ul li{}
.join ul li > div{margin-bottom:50px;}
.join ul li > div h4{font-size: 20px; font-weight: 600; color: #ff4a6b;}
.join ul li .policy_txt{padding:10px; font-size: 16px; font-weight: 400; border: 1px solid #ddd; height: 230px; overflow-y: auto; margin:16px 0px;}
.join ul li .check_wrap{display: flex;justify-content: flex-end;}
.join_btn{ display: block; color: #ff4a6b; text-align: center; margin: 50px auto 0px; margin-top: 50px; border: 1px solid #FF4A6B; transition:all 0.2s; width: 150px; height: 45px; font-size: 16px; border-radius: 5px;}
.join_btn:hover{background:#ff4a6b; color:#fff; border:1px solid #FF4A6B}
.join_btn a{display: block; width:100%; height:100%; padding: 10px; font-family: 'Pretendard'; font-size: 16px;}
.join > .check_wrap{display: flex;  justify-content: center;}
.checkbox_mark, .allcheck{font-weight: 400;}

/* 회원가입 */
.join2 .join_top{}
.join_top h5{font-weight: 700; font-size: 20px; margin-top: 30px; padding-bottom: 20px; border-bottom: 2px solid #e2c344;}
.join2 .join_top ul li{}
.join2 .join_top ul li .j_input_box{display: flex; padding: 25px 0px;border-bottom: 1px solid #efefef;    align-items: center;}
.join2 .join_top ul li .j_input_box > div{width: 80%;}
.join2 .join_top ul li .j_input_box > div .c_imgbox{position:relative; display:block;width:200px; height:267px;background: #f7f7f7; margin-bottom: 10px;}
.join2 .join_top ul li .j_input_box > div .c_imgbox img{position: absolute; width: 100%; height: 100%;}
.join2 .join_top ul li .j_input_box > div .c_imgbox .closebtn{cursor:pointer; position: absolute; top: 10px; right: 10px; font-weight: 700; border: 1px solid #ccc; width: 22px; height: 22px; border-radius: 50%; font-size: 14px; background: #fff; padding: 0px 5px;}
.join2 .join_top ul li .j_input_box .with_btn{}
.join2 .join_top ul li .j_input_box em{font-size:13px; display:block; margin-top:5px; color:red}
.join2 .join_top ul li .j_input_box .with_btn .id_use{color:#6767fb;}
.join2 .join_top ul li .j_input_box .with_btn > div{width: 100%; display:flex; margin-top:7px;}
.join2 .join_top ul li .j_input_box .with_btn > div input{width:calc(100% - 130px)}
.join2 .join_top ul li .j_input_box .with_btn > div button{   width: 130px; font-size: 15px; background: #ff4a6b; color: #fff; border-radius: 4px; margin-left: 10px;}
.join2 .join_top ul li .j_input_box > span{display: inline-block; width: 20%; font-weight: 500;}
.join2 .join_top ul li .j_input_box div input{width: 100%; font-size: 16px; border-radius: 4px; border: 1px solid #ddd;  outline: none; background: #fff; padding:10px 10px;}
.join2 .join_top ul li .j_input_box .with_btn .replay > div{width: 75%; position:relative;}
.join2 .join_top ul li .j_input_box .with_btn .replay input{width:100%;}
.join2 .join_top ul li .j_input_box .with_btn .replay p{position: absolute; right: 0; top: 50%; transform: translateY(-50%); color:#a1a1a1}
.join2 .join_top ul li .j_input_box .with_btn .replay p span{width: auto; cursor:pointer; margin-right:10px; background:#fff; font-size: 13px; font-weight: 400; padding: 0px 5px; border-radius: 3px;}
.join2 .join_top ul li .j_input_box .with_btn .replay p span:first-child{border: 1px solid #ddd;}
.join2 .join_top ul li .j_input_box .w50{display:flex;    align-items: center;}
.join2 .join_top ul li .j_input_box .w50 b{margin-right:10px;}
.join2 .join_top ul li .j_input_box .w50 input{width:50%;}
.join2 .join_top ul li .j_input_box .w50 input:first-child{margin-right:10px;}
.join2 .join_top ul li .j_input_box .prevent_code{display:flex; width: calc(60% - 170px); }
.join2 .join_top ul li .j_input_box .code{border: 1px solid #000; width: 100px;}
.join2 .join_top ul li .j_input_box .put_code{width: 150px; margin-left: 10px; border: 1px solid #000; background: #fff;}
.join2 .join_top ul li .j_input_box .code_icon_wrap{display:flex;  margin-left:10px;  align-items: center;}
.join2 .join_top ul li .j_input_box .code_icon_wrap i{display:block; cursor:pointer; width:20px; margin:0px 5px;}
.join2 .join_top ul li .j_input_box .filebox{}
.filebox_2 label { display: inline-block; font-size: 14px; line-height: normal; background-color: #fdfdfd; cursor: pointer; border: 1px solid #ebebeb; border-radius: 3px;
    -webkit-transition: background-color 0.2s; transition: background-color 0.2s; padding: 4px 16px; font-size: 13px;}
.filebox_2 input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}

.join2 .email-input > p {display: block; line-height: 2.3; margin-left: 5px; margin-right: 5px;}

/* //// */
.join{padding:120px 0;}
.join_member .filebox label img, .mypage_1 .filebox label img{width: 100%;height: 100%;position: absolute;left:50%; top:50%;transform: translate(-50%,-50%);}
.join_member .profile .filebox label, .mypage_1 .profile .filebox label {position: absolute; width: 50px; height: 50px; right: -0.2em; bottom: -0.2em; cursor: pointer; border-radius: 50%;}
.join_member .profile .filebox input,.mypage_1 .profile .filebox input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
.join_member .filebox label, .mypage_1 .filebox label{ position: absolute; width: 50px; height: 50px; right: -0.2em; bottom: -0.2em; cursor: pointer; background: url(); border-radius: 50%;}
.join_member .profile,.mypage_1 .profile{margin: 60px auto 0; width: 145px; height: 100%; box-sizing: border-box; position: relative; border-radius: 75px;}

.join_top_top > p {display: block; text-align: center; font-size: 14px; font-weight: 500;}
.join > div > div{width:40%;margin: 0 auto;}
.join  h3{font-size:2rem; text-align: center;margin-bottom:40px;}

span.required{color:red}
.join > div > div h6{margin-bottom:10px; font-size: 1.25rem; font-weight: bold;}
.bottom{margin-top:60px}
.bottom02{margin-top:60px}
.top .jion_list{border-top:1px solid #000;}
.bottom .jion_list{border-top:1px solid #000;}
.jion_list{border-top:none;}
.jion_list li{margin:25px 0;display: flex;justify-content: flex-end;}
.jion_list li .jion_title{width:100%;font-size:1rem;width: 25%;}
.jion_list li .jion_title p{margin-bottom: 9px; padding-top: 8px;}
.jion_list li .jion_right{width:85%;/* height: 100%; */}
.jion_list li .jion_right.cell { border:1px solid #ddd;width:85%;/* height: 100%; */}
.correction .jion_list li .jion_right.cell { border:none;width:85%;/* height: 100%; */}
.jion_list li .id_input{display: flex;}
.jion_list li .id_input .input_text{width:70%;}
.jion_list li .id_input button{width:30%; background-color: #000; color:#fff}


.jion_list li .jion_right .input_text{padding:10px; outline:0; width:100%; border:1px solid #ddd}
.gender_input {margin-top: 8px;}
.jion_list li .birth_input{display: flex; align-items: center;}
.jion_list li .birth_input .input_text{border:none;}
.jion_list li .birth{border:1px solid #ddd; display: flex;align-items: center; width:70%; padding-right:10px;}
.jion_list li .jion_right.birth_input>div{width:100%;}
.jion_list li .birth_flex{display: flex;width: 100%;}
.jion_list li .birth>div{display: flex;width:33.3%;justify-content:center;align-items: center;}
.jion_list li .jion_right.birth_input>div>p{font-size:13px; color:#888;margin-top:5px;}
.jion_list li .birth select{padding:10px;width:100%; color:#888; border:none;/* margin-right:10px; */; box-shadow: none;}
.jion_list li .birth select option{border:1px solid #ddd !important; color:#000;width:100%;}
/* /// */



.join_member_1 .container .center>h2,
.join_member_2 .container .center>h2{text-align: center; font-size: 32px;}

.jion_right{border: 1px solid #ddd; border-radius: 4px;}
.birth{display: flex; gap: 5px; padding: 15px;}
.birth > div {width: calc(100%/3);}
.birth > div > select {width: 100%; font-size: 16px; border: none;  cursor: pointer;}

.gender_check {display: flex; border: 1px solid #ddd; border-radius: 25px; overflow: hidden;}
.gender_check > div{width: calc(100%/2); padding: 10px; text-align: center; font-weight: 500; cursor: pointer;}
.gender_check_on {background-color: #ff4a6b; color: #fff;}

.word_wrap {border: 1px solid #ddd; border-radius: 4px;}
.word_wrap > select{width: 97%; border: none; font-size: 16px; padding: 15px; cursor: pointer;}

.join_notic{padding: 24px; background-color: #f5f5f5;}
.join_notic h6{margin-bottom: 15px;}
.join_notic p {font-size: 16px; font-weight: 400;}

.join_member .d-block{margin-top: 15px;}

.gender_check > div > p {font-size: 16px;}


/* 아이디/비밀번호 찾기 */

.find_password h3{ font-size: 2em; text-align: center; margin-bottom: 20px; color: #000000;}

.panel{text-align: center;}

.panel .top p{font-family: 'Pretendard';  font-weight: 400; font-size: 18px; color: #000000;}
.panel .center{font-size:1.125rem; margin-top:20px}
.panel .center p{text-align: left; font-family: 'Pretendard';  font-size: 1rem; font-weight: 500; color: #000000;}
.panel .certification_number{margin-top:10px;}
.panel .certification_number > div{display: flex; gap: 2%; position:relative; justify-content: space-between;}

.find_ul{display: flex;justify-content: center;}
.find_ul li{width:50%; border-radius:10px; cursor:pointer;}
.find_ul li span{display:block; width:100%; font-size: 17px; font-weight:600; text-align:center;padding: 8px;}
.find_ul li.on span{border-bottom: 2px solid #ff4a6b; color: #ff4a6b;}
.top{margin-top: 30px;}

.sub_txt-wrap{position:absolute;top: 50%; left: 70%; transform: translate(-70%,-50%); font-weight: 400; font-size: 12px;}

.sub_txt-wrap .time{font-size:13px;transform: translateY(3px);}
.certification_number .c-pointer {border: 1px solid #000; background: #fff; color: #222; margin-left: 5px; padding: 1px 6px 2px 6px;}

.panel .certification_number.certification_number02 >div > div{width:100%;}
.panel .certification_number.certification_number02 >div > div input{width:100%;}
.panel .certification_number.certification_number02 >div {width: 87%;}

.id_text > input {width: 100%; border-radius: 4px; font-size: 16px; margin-top: 10px; padding:15px 10px; border: 1px solid #ddd;}


.panel .certification_number input{border:1px solid #ddd; font-size: 16px; padding:15px 10px; border-radius: 4px; outline: 0;width: 78%;}
.panel .certification_number button{border:1px solid #ff4a6b; border-radius: 4px; width:22%; background-color: #ff4a6b; color:#fff; font-family: 'Pretendard'; font-size: 15px; font-weight: 400;}
.find_password .id_text.f_ce {display: flex; justify-content: space-between; align-content: center; align-items: center;}
.find_password .id_text.f_ce p{margin-bottom:0;}
.panel .login02_but{margin-top:40px;}

.certification_number > div {margin-top: 10px;}
.find_password .id_text{margin-bottom:20px;}
.find_password .id_text >div{display: flex;}
.find_password .id_text .d-block:first-child {margin-right:15px;}
.find_password .id_text .d-block {font-size:14px;}
.find_password .id_text .d-block input[type="checkbox"] + label {width: 15px; height:15px; margin-right: 6px;;}
.find_password .id_text p{margin-bottom:10px; text-align: left; font-size:1rem;}
.find_password .id_text input{width:100%; border:1px solid #000; padding:15px 10px;}

.login02_but button{font-family: 'Pretendard'; background: #ff4a6b; width: 100%; padding: 15px 0 15px; color: #fff; font-size: 16px; border-radius: 4px;}

/* find_password_next */
.check_arr { width: 100px; display: block; height: 100px; margin: 20px auto;}
.head > .top { text-align: center; padding-bottom: 25px; font-weight: 400; font-size: 1.1rem; font-family: 'Pretendard';color: #ffffff;}
.find_next  li{padding: 15px 10px; background-color: #fff2; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
.join_next_but > div {width: calc(50% - 10px);}
.join_next_but{display: flex; gap:10px; justify-content: space-between;}
.join_next_but > div{ background-color: #e3b54b; color: #fff;}
.join_next_but > div { width: 100%; padding: 15px 0; margin-top: 40px; font-size: 18px; font-family: 'Pretendard';text-align: center; border-radius: 4px; font-weight: 500;}
.find_next li > div > .neme{color: #fff;}
.find_next li > div {display: flex; justify-content: space-between;}
.neme_span {color: #fff;} 

/* 회원가입 완료 */
.join_end .join_end_img > i {display: block; width: 65px; margin: 0 auto; margin-bottom: 25px;}
.join_end .join_end_txt {margin: 0 auto; text-align: center;}
.join_end .join_end_txt {margin-top: 25px;}
.join_end .join_end_txt > div > p {font-size: 16px; font-weight: 400; word-break: keep-all;}
.join_end .join_end_txt > div > p >br {display: none;}
.join_end .join_end_txt > div > p > b {color: #FF4A6B; word-break: keep-all;}
.join_end .join_end_txt > div {width: 565px; margin: 0 auto; background-color: #f1f1f1; padding: 12px 5px; border-radius: 30px;}


.mypage_edit_1 .join_top ul li .j_input_box .with_btn > div input {width: 100%;}

.mypage_edit_1 .join2 .join_top ul li .j_input_box .with_btn > div input {width: 100%;}
.mypage_edit_1 .join2 .join_top ul li .j_input_box .with_btn > div input:read-only {background-color: #f9f9f9; color: #555;}



/* ********************************************* *
* 1600px
* ********************************************* */
@media screen and (max-width: 1660px){
  
  
   
}

/* ********************************************* *
* 1400px
* ********************************************* */
@media screen and (max-width: 1400px){


}

/* ********************************************* *
* 1240px
* ********************************************* */

@media screen and (max-width: 1240px){


}

/* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){


 
}


/* ********************************************* *
* 960px
* ********************************************* */
@media screen and (max-width: 960px){


}


/* ********************************************* *
* 860px
* ********************************************* */
@media screen and (max-width: 860px){

.ill_img_box > img { width: 210px; margin: 0 auto;}
.join_tabs > li {padding: 30px;}
.join_tabs div > button {margin-top: 30px; padding: 10px 30px; font-size: 16px;} 
    
}






/* ********************************************* *
* 768px
* ********************************************* */

@media screen and (max-width: 768px){

.join2 .join_top ul li .j_input_box div input,
.join2 .join_top ul li .j_input_box .with_btn > div button, .jion_right, .word_wrap {border-radius: 4px;}

.bd > h3 {font-size: 28px;}
.join {padding: 10px 0;}
.join_end .bd > p {font-size: 15px;} 
.join_end .join_end_txt > div > p {font-size: 14px; font-weight: 400;}
.join_end .join_end_txt {padding: 0;}
.join_end .join_end_txt > div{width: 100%;}
.join_end .join_end_txt > div > p >br {display: block;}

}


/* ********************************************* *
* 718px
* ********************************************* */
@media screen and (max-width: 718px){
    
}



/* ********************************************* *
* 640px
* ********************************************* */
@media screen and (max-width: 640px){
    
/* policy */
.txtbox{padding: 26px;}
.sub_banner.policy_sb .sb_tit{font-size: 22px;}
.policy_subtit h3.policy_h3{font-size: 22px;}
.join_top h5 {font-size: 18px;}

.join_member_1 .container .center>h2 {font-size: 26px;}

}


/* ********************************************* *
* 500px
* ********************************************* */
@media screen and (max-width: 560px){

}

@media screen and (max-width: 500px){

.join {padding: 30px 0;}
.join ul li > div h4 {font-size: 18px;}
.login_tabs, .join_tabs{flex-wrap: wrap;}
.join_tabs > li {width: 100%; padding: 25px}
.join_tabs div > button {margin-top: 35px;}
.join_tabs > li >div > i { display: block; width: 100%;}
.join2 .join_top ul li .j_input_box > span {width: 100%;}
.join2 .join_top ul li .j_input_box {padding: 15px 0px 18px;}
.join2 .join_top ul li .j_input_box { display: block;}
.join2 .join_top ul li .j_input_box > div { width: 100%; }
.join2 .join_top ul li .j_input_box > span {padding-bottom: 15px; font-weight: 400; font-size: 15px;}
.gender_check > div {padding: 10px 0; font-size: 14px;}
.gender_check > div > p {font-size: 14px;}
.birth > div > select,
.word_wrap > select {color: #444;}
.join_top_top > i {width: 80px; height: 80px;} 
.join_top_top > i > span::after {width: 30px; height: 30px;}
.join2 .join_top ul li .j_input_box .with_btn > div button{font-size: 14px;}
.birth_flex > .birth > .year > select,
.birth_flex > .birth > .month > select,
.birth_flex > .birth > .day > select,
.birth > div > select, .word_wrap > select,
.join_notic p  {font-size: 14px;}
.login .d-block input[type="checkbox"] + label span {font-size: 14px;}
.join2 .join_top ul li .j_input_box .with_btn > div input {width: 70%;}
.join2 .join_top ul li .j_input_box .with_btn > div button {width: 30%;}
.join_btn {width: 100%; font-size: 14px;}
.join_top_top > i {margin: 30px auto 10px;}
.join_top_top > p {margin: 20px auto; font-size: 12px;}

.bd > h3{font-size: 25px; text-align: center; color: #222;}
.ill_img_box > img {width: 210px;}
.join_tabs div > button {
font-weight: 500;
padding: 5px 25px;
background-color: #ff4a6b;
border-radius: 25px;
font-family: 'Pretendard';
font-size: 15px;
color: #fff;}

.join2 .join_top ul li .j_input_box .with_btn .replay p span { font-size: 14px; padding: 2px 5px;}    
.login .panel01_bottom {flex-direction: column;}
.login .panel01_bottom div > div{margin-top: 10px;}

.checkbox_mark, .allcheck {font-weight: 400; font-size: 14px;}
.allCheck{display: none;}

.mypage_1 .bd-sml, .join_member .bd-sml  {padding: 0;}


}

/* ********************************************* *
* 400px
* ********************************************* */
@media screen and (max-width: 450px){


/* policy */
.txtbox{padding: 20px; font-size: 14px;}

.join2 .join_top ul li .j_input_box .with_btn .replay p {transform: translateY(-60%);}
.join_member .profile, .mypage_1 .profile {width: 120px;}

.login .panel01_top .login_button {font-size: 15px; padding: 12px 0; border-radius: 4px;}
.login .login_tabSet .text_input {border-radius: 4px; font-size: 15px; padding: 10px 5px;}
.join_member .profile .filebox label, .mypage_1 .profile .filebox label {width: 45px; height: 45px;}
.join_btn a {height: auto; padding: 9px 0;}
    
}

@media screen and (max-width: 400px){
    
.panel .center p {font-size: 16px;}
.panel .certification_number input{font-size: 14px;} 
.panel .certification_number button{font-size: 14px;}
.join_member .profile, .mypage_1 .profile {width: 100px;}
.join_member .profile .filebox label, .mypage_1 .profile .filebox label{width: 35px; height: 35px;}

}

/* ********************************************* *
* 370 350 330px
* ********************************************* */
@media screen and (max-width: 370px){


}

@media screen and (max-width: 350px){


/* policy */
.policy_subtit h3.policy_h3{font-size: 20px;}

.panel .certification_number input {width: 70%;}
.panel .certification_number button {width: 30%;}

}



@media screen and (max-width: 330px){

.login .panel01_bottom p {font-size: 12px;}
.login .panel01_bottom div > div {font-size: 12px;} 
    
}


@media screen and (max-width: 300px){

.join2 .join_top ul li .j_input_box .with_btn > div button { font-size: 12px;}

}    

@media screen and (max-width: 280px){


}