@charset "UTF-8";
.popup_content1{position: relative; padding:30px 15%; }
   
.sns_icon{padding:0 0 3px 28px;}
.sns_icon.twitter{background:url(../images/login/twitter.png) no-repeat;}
.sns_icon.facebook{background:url(../images/login/facebook.png) no-repeat;}
.sns_icon.google{background:url(../images/login/google.png) no-repeat;}
.sns_icon.naver{background:url(../images/login/naver.png) no-repeat;}
.sns_icon.kakao{background:url(../images/login/kakao.png) no-repeat;}

.sns_login{padding:0;margin:0;list-style:none; overflow:hidden;}
.sns_login li{display:block;padding:0; margin-bottom:5px; text-align:center;}

#sns_twitter .loginBtn {display:inline-block;background: #2596E9;color:#fff; width: 100%;border-radius:5px;text-align:left;}
#sns_twitter .loginBtn_disable {display:inline-block;background:#aaa; color:#fff; width:100%; border-radius:5px; text-align:left;}
#sns_twitter a.loginBtn {text-decoration:none;}
#sns_twitter .loginBtn:hover {background: #55ACEE;cursor:hand;}
#sns_twitter span.label {font-weight:bold;}
#sns_twitter span.icon {background: url(../images/login/btn_twitter.png) transparent 10px 50% no-repeat;display: inline-block;vertical-align: middle;width: 40px;height:40px;}
#sns_twitter span.buttonText {display:inline-block;vertical-align:middle;padding-left:15px;font-weight:bold;color:#fff;}

#sns_facebook .loginBtn {display:inline-block;background: #3B5998; color:#fff; width: 185px; border-radius:5px;text-align:left;}
#sns_facebook .loginBtn_disable {display:inline-block;background:#aaa; color:#fff; width:185px; border-radius:5px; text-align:left;}
#sns_facebook a.loginBtn {text-decoration:none;}
#sns_facebook_ .loginBtn:hover {background: #5577BD;cursor:hand;}
#sns_facebook span.label {font-weight:bold;}
#sns_facebook span.icon {background: url(../images/login/btn_facebook.png) transparent 5px 50% no-repeat;display: inline-block;vertical-align: middle;width: 40px;height:40px;}
#sns_facebook span.buttonText {display:inline-block;vertical-align:middle;padding-left:12px;color:#fff; font-size:12px;}

#sns_google .loginBtn {display:inline-block;background: #cc3732;color:#fff; width: 100%; border-radius:5px;text-align:left;}
#sns_google .loginBtn_disable {display:inline-block;background:#aaa; color:#fff; width:100%; border-radius:5px; text-align:left;}
#sns_google a.loginBtn {text-decoration:none;}
#sns_google .loginBtn:hover {background: #e74b37;cursor:hand;}
#sns_google span.label {font-weight:bold;}
#sns_google span.icon {background: url(../images/login/btn_google.png) transparent 10px 50% no-repeat;display: inline-block;vertical-align: middle;width: 40px;height:40px;}
#sns_google span.buttonText {display:inline-block;vertical-align:middle;padding-left:15px;font-weight:bold;color:#fff;}

#sns_naver .loginBtn {display:inline-block;background: #1ec800;color:#fff; width: 185px; border-radius:5px;text-align:left;}
#sns_naver .loginBtn_disable {display:inline-block;background:#aaa; color:#fff; width:185px; border-radius:5px; text-align:left;}
#sns_naver a.loginBtn {text-decoration:none;}
#sns_naver .loginBtn:hover {background: #25d805;cursor:hand;}
#sns_naver span.label {font-weight:bold;}
#sns_naver span.icon {background: url(../images/login/btn_naver.png) transparent 10px 50% no-repeat;display: inline-block;vertical-align: middle;width: 40px;height:40px;     background-size: 17px; background-position: 14px 50%;}
#sns_naver span.buttonText {display:inline-block;vertical-align:middle;padding-left:15px;font-weight:bold;color:#fff;}

#sns_naver2 .loginBtn {display:inline-block;background: #1ec800;color:#fff; width: 185px; border-radius:5px;text-align:left;}
#sns_naver2 .loginBtn_disable {display:inline-block;background:#aaa; color:#fff; width:185px; border-radius:5px; text-align:left;}
#sns_naver2 a.loginBtn {text-decoration:none;}
#sns_naver2 .loginBtn:hover {background: #25d805;cursor:hand;}
#sns_naver2 span.label {font-weight:bold;}
#sns_naver2 span.icon {background: url(../images/login/btn_naver.png) transparent 10px 50% no-repeat;display: inline-block;vertical-align: middle;width: 40px;height:40px;     background-size: 17px; background-position: 14px 50%;}
#sns_naver2 span.buttonText {display:inline-block;vertical-align:middle;padding-left:15px;font-weight:bold;color:#fff;}

#sns_kakao .loginBtn {display:inline-block;background: #ffeb00; color: #3c1e1e !important; width: 185px; border-radius:5px;text-align:left;}
#sns_kakao .loginBtn_disable {display:inline-block;background:#aaa; color:#fff; width:185px; border-radius:5px; text-align:left;}
#sns_kakao a.loginBtn {text-decoration:none;}
#sns_kakao_ .loginBtn:hover {background: #FFDE00;cursor:hand;}
#sns_kakao span.label {font-weight:bold;}
#sns_kakao span.icon {background: url(../images/login/btn_kakao.png) transparent 5px 50% no-repeat;display: inline-block;vertical-align: middle;width: 40px;height:40px;}
#sns_kakao span.buttonText {display:inline-block;vertical-align:middle;padding-left:10px;font-weight:bold;color:#3c1e1e; font-size:12px;}

#sns_kakao2 .loginBtn {display:inline-block;background: #ffeb00; color: #3c1e1e !important; width: 185px; border-radius:5px;text-align:left;}
#sns_kakao2 .loginBtn_disable {display:inline-block;background:#aaa; color:#fff; width:185px; border-radius:5px; text-align:left;}
#sns_kakao2 a.loginBtn {text-decoration:none;}
#sns_kakao2_ .loginBtn:hover {background: #FFDE00;cursor:hand;}
#sns_kakao2 span.label {font-weight:bold;}
#sns_kakao2 span.icon {background: url(../images/login/btn_kakao.png) transparent 5px 50% no-repeat;display: inline-block;vertical-align: middle;width: 40px;height:40px;}
#sns_kakao2 span.buttonText {display:inline-block;vertical-align:middle;padding-left:10px;font-weight:bold;color:#3c1e1e; font-size:12px;}


.popup_content2{position: relative; padding:30px; }
.tit_text{font-size: 24px; letter-spacing: 0.9px; color:#111; margin-bottom: 5px;}
.btn_browser{height:45px; padding:12px 43px !important; background-color:#004ea2 !important; color:#fff !important;border-color:#004ea2!important; border: 1px solid transparent; border-radius: 5px; display: inline-block;}
.btn_browser:hover{background-color:#fff !important; color:#004ea2 !important; border-color:#004ea2!important;}
.btn_item{margin-top:35px; display: block;}
.btn_item:after{display:block;content:"";clear:both;}
.btn_item > li{position:relative;float:left;z-index:1; width:48%; margin-left: 5px;}
.btn_item > li > a{display:block; height:50px;line-height:50px;color:#004ea2;background-color:#ffffff;box-sizing:border-box;font-size:1.1em;text-align:center; font-weight: 400; overflow: hidden; border:1px solid #004ea2; border-radius: 5px;}
.btn_item > li > a:hover{color:#fff;background-color:#004ea2 !important; box-sizing:border-box;border: 1px solid transparent;font-weight: 500;} 
   /* https://ccei.creativekorea.or.kr/ 사이트에서 이용하실때는 #004ea2 색상만 ##004ea2 으로 바꾸면 될거 같습니다.  */
   
.popup_content3{position: relative; padding:30px; }
.clearfix {    display: block;}
.login_box input[type="text"],.login_box input[type="password"],.login_box select,.login_box textarea{height:40px; padding: 5px 1%; box-sizing: border-box;}
.login_box>p{
	margin: 48px auto 0;
	text-align: center; font-size: 14px;
	width: 87%; max-width: 434px;
}
.tb_join{	border-top: 2px solid #b4b1b0;	width: 100%;}
.tb_join th{	background: #fbf9f8;		font-size: 15px;	width: 20%;	min-width: 90px;}
.tb_join th{	padding-left: 20px; text-align: left;}
.tb_join tr{	border-bottom: 1px solid #e5e5e5;	font-size: 14px}
.tb_join th,.tb_join td{	padding: 7px 10px;	font-size: 15px;   box-sizing: border-box;}
.tb_join td span,.tb_join td a{	font-size: 14px;}
.tb_join textarea, input, select{border: 1px solid #e6e6e6;}
.tb_join .postNo{}
.tb_join .zipcode{width:80px;text-align:center;}
.tb_join .zip_btn{display: inline-block; height: 40px; width: 40px; border: 1px solid #e6e6e6; box-sizing: border-box; background-color: #fff; background: url(../images/login/ico_sch_.png) center no-repeat;}
.tb_join .use_btn{display: inline-block; height: 20px; width: 20px; border: 1px solid #e6e6e6; box-sizing: border-box; background-color: #fff; background: url(../images/login/ico_sch_.png) center no-repeat;}
.tb_join .memberOut_btn {width:45px; display:inline-block; height:25px;line-height:25px;color:#fff;background-color:#808B96;box-sizing:border-box;font-size:0.9em;text-align:center; font-weight: 400; overflow: hidden; }
/*
.tb_join .zip_btn{display:inline-block;height:40px;padding:0 10px;border:1px solid #696461;box-sizing:border-box; color: #696461; background-color: #fff;}
.tb_join .zip_btn::after{display:inline-block;width:14px;height:14px;margin-left:10px;content:'';vertical-align:middle;background:url(../images/login/ico_sch_.png)0 top no-repeat;}
*/
.tb_join .addr_left {float:left;width:48%}
.tb_join .addr_right {float:right;width:50%}
.tb_join .addr{width:100%; margin-top:5px;}
.btn_wrap { margin-top: 20px; text-align: center;}
.join_btn {width:140px; display:inline-block; height:40px;line-height:40px;color:#fff;background-color:#004ea2;box-sizing:border-box;font-size:1.1em;text-align:center; font-weight: 400; overflow: hidden; }
    
@media only screen and (max-width:768px){
	.popup_content{padding:10px; }
	.popup_content1{padding:20px 10%; }
    .popup_content2{padding:10px; }
    .tit_text{font-size: 18px; }
    .btn_item{margin-top:15px;}    
    .btn_item li{width:100%; margin-bottom: 5px; margin-left:0;}
    .btn_item li a{height:35px;line-height:35px;padding:0 8px;font-size:inherit;overflow:hidden;}
    .tb_join{margin:5px 0;}
    .tb_join colgroup{display:none;}
    .tb_join th,.tb_join td{border:none; text-align:left; background:none;}
    .tb_join tbody th {text-align:left; background-color:#fff;}
    .tb_join tr{display:block;width:100%;}
    .tb_join th{display:block;width:100%;padding:5px 1% 2px !important;border:none;background:none;box-sizing:border-box;}
    .tb_join td{display:block;width:100%;padding:0 1% 5px !important;border:none;box-sizing:border-box;}
    .tb_join input[type="text"],.tb_join input[type="password"],.tb_join select{width:100%;}
    .tb_join .explain{margin-top:0;}
    .tb_join .postNo{width:200px;}        
    .tb_join .zipcode {width:80px !important;}
    .tb_join .zip_btn{margin-top:5px;}
    .tb_join .addr_left{float:none;width:100%;}
    .tb_join .addr_right{float:none;width:100%;}
}

.self_list-wrap {
    display: flex;
    padding-bottom: 30px;
}
.self_list {
    text-align: center;
    flex: 1;
    position: relative;
    padding: 25px 30px;
}


.self_list .list_inner {
    display: flex;
    flex-direction: column;
    max-width: 390px;
    margin: 0 auto;
    height: 100%;
}
.self_list .tit {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.04em;
    line-height: 34px;
}
.self_list .tit:before {
    display: block;
    content: "";
    margin: 0 auto 20px;
    width: 63px;
    height: 80px;
    background: url(../images/login/search-id_phone2.png) no-repeat;
}

.self_list .txt {
    font-size: 16px;
    letter-spacing: -0.04em;
    line-height: 26px;
    padding-top: 12px;
    padding-bottom: 20px;
}
.self_list ul {
    padding-top: 20px;
    border-top: 1px solid #ccc;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.04em;
    color: #666;
    text-align: left;
}
.self_list li {
    padding-left: 20px;
    margin-bottom: 20px;
    word-break: keep-all;
}
.self_list li:last-of-type {
    margin-bottom: 22px;
}
.self_list li:before {
    display: inline-block;
    content: "※";
    font-size: 18px;
    color: #666;
    margin: 0 3px 0 -20px;
}
.self_list li.type_btn p {
    display: inline-block;
    margin-right: 10px;
}
.self_list li button {
    max-width: 100px;
    height: 38px;
    font-size: 16px;
    border-radius: 8px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -1px;
}
.self_list .btn_wrap {
    margin-top: auto;
}
.self_list button {
    width: 100%;
    height: 50px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.04em;
}
.self_list button:not(:first-of-type) {
    margin-top: 14px;
}


}