@charset "utf-8";

/* ### 기본 스타일 커스터마이징 시작 ### */
/* 기본박스 */
.mbskin {position:relative;margin:50px auto;width:calc(100% - 30px); max-width:400px; border:1px solid #fff;background:#fff; border-radius:15px; overflow:hidden;}
.mbskin:after {right:10px;left:auto;
  -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
     -o-transform:skew(8deg) rotate(3deg);
      transform:skew(8deg) rotate(3deg)}
.mbskin .frm_input {width:100%}
.mbskin .btn_submit {width:100%;margin:10px 0 0;height:45px;background:#15212f; color:#fff; font-size:1.1em; border:0; border-radius:5px;}
.mbskin h1 {margin:60px 0 30px;font-size:2em}
/* ### 기본 스타일 커스터마이징 끝 ### */

/* 회원가입 약관 */
.register {width:100%}
.register:after {display:block;visibility:hidden;clear:both;content:""}

#sns_register .login-sns,
#sns_register h2 {border:0 !important}

.register .btnWrap {text-align:center; margin:50px auto;}
.register .btnWrap .btn {display:inline-block; width:150px; border:0; padding:15px 0; vertical-align:middle;}
.register .btnWrap .btn.close {background:#ddd; color:#000; border-radius:30px 0 0 30px;}
.register .btnWrap .btn.submit {background:#0062a7; color:#fff; border-radius:0 30px 30px 0;}
.register .ment {width:100%; padding:30px;}
.register .ment .title {font-size:2em; font-weight:100; color:#000; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #ddd;}
.register .ment .subTitle {font-weight:300; color:#333;}
.register .ment .subTitle span {position:relative; color:#000;}
.register .ment .subTitle span:after {content:""; position:absolute; left:-2px; bottom:0; width:calc(100% + 4px); height:5px; display:inline-block; background:rgba(0,90,255, .2);}

@media (max-width:460px) {
	.register .ment {padding:20px;}
	.register .ment .title {font-size:1.9em; letter-spacing:-.05em;}
	#register_agree .checkAll {padding:20px;}
	#register_agree section {padding:20px;}
}

/* 회원가입 입력 */
#register_form {background:#fff;margin-bottom:20px}
#register_form input {height:45px; background:#fff; border:0; border-bottom:1px solid #ddd; border-radius:0;}
#register_form input:focus {box-shadow:none;}
#register_form .btnWrap {margin-top:60px;}
#register_form li {position:relative;}
.register_form_inner {width:calc(100% - 30px); margin:0 auto;}

/* 회원가입 완료 */
#reg_result {width:calc(100% - 30px); max-width:360px; padding:40px 0;text-align:center;background:#f9f9f9;border:1px solid #e6e6e6;border-radius:10px; margin:30px auto 0;}
#reg_result h2 {font-size:2em;margin:0 0 20px}
#reg_result h2 strong {color:#ed6478}
#reg_result #result_email {margin:20px 0;padding:10px 50px;border-top:1px solid #e9e9e9;border-bottom:1px solid #dde4e9;background:#fff;line-height:2em}
#reg_result #result_email span {display:inline-block;width:150px}
#reg_result #result_email strong {color:#e8180c;font-size:1.2em}
#reg_result p {line-height:1.8em}
#reg_result .result_txt {text-align:center;}
#reg_result .result_txt b {color:#000; font-weight:500;}
#reg_result .result_txt .group {padding:7px 0;}
#reg_result .result_txt .group span {position: relative; color:#000;}
#reg_result .result_txt .group span:before {content: ""; position: absolute; bottom: -3px; width: 100%; height: 5px; background:#d6dff5;}

#reg_result .btn_confirm {margin:50px 0}
#reg_result i {font-size:3em}
#reg_result .reg_result_p {font-size:1.25em;margin:0 0 30px;color:#003a9b}

.btn_confirm_reg {margin:20px 0 50px;text-align:center}
.reg_btn_submit {display:inline-block;background:#182843;color:#fff;text-align:center;border-radius:3px;width:200px;height:50px;line-height:50px;font-size:1.2em;margin:0 auto;font-weight:500}

.mb_log_cate h2 {width:50%;float:left;padding:20px 0;text-align:center}
.mb_log_cate .join {width:50%;float:left;padding:20px 0;text-align:center;background:#f7f7f7;color:#6e6e6e}
.mb_log_cate:after {display:block;visibility:hidden;clear:both;content:""}

.tooltip_icon {display:inline-block;vertical-align:baseline;color:#b3b5b8;border:0;font-size:1.4em;background:transparent;cursor:pointer}
.tooltip_icon:hover {color:#448bf5}
.tooltip {position:relative;width:auto;color:#fff;background:#000;padding:10px;font-size:small;line-height:18px;display:none;position:absolute;z-index:9;font-weight:normal;margin-left:15px;margin-top:10px}
.tooltip:before {content:"";position:absolute;top:0;left:-10px;width:0;height:0;border-style:solid;border-top:0px solid transparent;border-bottom:10px solid transparent;border-left:0;border-right:10px solid #000}


/* 로그인 */
#mb_login {}
#mb_login h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#mb_login h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#login_fs {padding:35px}
#mb_login #login_fs .frm_input {height:50px; margin:0 0 10px; border-radius:5px;}
#mb_login #login_fs .btn_submit {margin:0 0 15px}

#mb_login #sns_login {width:calc(100% - 15px); max-width:330px; height:269px; margin:0 auto; border-color:#edeaea;padding:40px 0 0}
#mb_login #sns_login:after {display:block;visibility:hidden;clear:both;content:""}
#mb_login #sns_login .sns-wrap {margin:0 !important}
#mb_login #sns_login .sns_guide {padding:5px 0 0 1px; line-height:25px; color:#888; font-weight:300; overflow:hidden;}
#mb_login #sns_login .txt {height:100%; color:#000; font-size:1em; text-align:center; display:block; background:#f9f9f9; border:1px solid #e3e3e3; border-left:0; border-radius:0 5px 5px 0;}
#mb_login #sns_login .txt:hover {background:#f3f3f3;}

#mb_login #sns_login .sns-icon {position:relative;display:block;height:60px;line-height:63px;width:100%; margin-bottom:10px; padding-left:60px;text-align:left;color:#fff;border-radius:5px; float:left;}
#mb_login #sns_login .sns-naver {background:url('./img/ico_loginNaver.png?v=1') no-repeat #03c75a; background-position:20px; background-size:20px}
#mb_login #sns_login .sns-kakao {background:url('./img/ico_loginKakao.png') no-repeat #ffe101; background-position:20px; background-size:20px}

#mb_login .login_box:not(.on) {display:none;}
#mb_login .login_tab {width:100%; height:60px; line-height:60px; overflow:hidden;}
#mb_login .login_tab li {width:50%; cursor:pointer; float:left;}
#mb_login .login_tab li span {display:block; text-align:center; font-size:1.1em;}
#mb_login .login_tab li.on {font-weight:600; color:#000;}
#mb_login .login_tab li:nth-child(1):not(.on) {background:#f6f6f6; box-shadow: -5px -5px 15px -10px rgba(0,0,0,0.5) inset; -webkit-box-shadow: -5px -5px 15px -10px rgba(0,0,0,0.5) inset; -moz-box-shadow: -5px -5px 15px -10px rgba(0,0,0,0.5) inset;}
#mb_login .login_tab li:nth-child(2):not(.on) {background:#f6f6f6; box-shadow: 5px -5px 15px -10px rgba(0,0,0,0.5) inset; -webkit-box-shadow: 5px -5px 15px -10px rgba(0,0,0,0.5) inset; -moz-box-shadow: 5px -5px 15px -10px rgba(0,0,0,0.5) inset;}

#mb_login #login_tail {}
#mb_login #login_tail:after {display:block;visibility:hidden;clear:both;content:""}
#mb_login #login_tail li {width:50%; float:left;}
#mb_login #login_tail li.join {}
#mb_login #login_tail li.join a {color:#2448a3; font-weight:600;}
#mb_login #login_tail li.lost {text-align:right;}
#mb_login #login_tail li span {display:inline-block; font-weight:bold; padding-right:3px;}



/*포인트*/
#point {text-align:center}
#point h1 {text-align:left}
#point .point_all {margin:20px 20px 15px;border-radius:5px;background:#edf3fc;border:1px solid #d6e2f4;color:#485172;font-size:1.083em}
#point .point_all:after {display:block;visibility:hidden;clear:both;content:""}
#point .point_all li {float:left;width:50%;padding:20px;text-align:left}
#point .point_all li span {float:right;color:#485172;font-weight:bold}
#point .point_all li:last-child {border-left:1px solid #d6e2f4}
#point .point_all .full_li {width:100%;border-bottom:1px solid #d6e2f4;text-align:left}
#point .point_all .full_li span {color:#000;font-weight:bold;font-size:1.2em}
#point .point_status{background:#737373;border:0;color:#fff;font-weight:bold;font-size:1.083em;text-align:left}
#point .point_status:after {display:block;visibility:hidden;clear:both;content:""}
#point .point_status span{margin-left:10px;float:right}

.point_list {}
.point_list li:first-child {border-top:1px solid #ececec}
.point_list li {border-bottom:1px solid #ececec;background:#fff;padding:15px;list-style:none;position:relative}
.point_list li:after {display:block;visibility:hidden;clear:both;content:""}

.point_list .point_use {background:#f6f6f6}
.point_list .point_use .point_num {font-size:1.25em;color:#ff4f76;font-weight:bold;float:right}
.point_list .point_num {font-size:1.25em;color:#3a8afd;font-weight:bold;position:absolute;right:15px;top:25px}
.point_list .point_top {line-height:15px;margin:0 0 5px}
.point_list .point_top:after {display:block;visibility:hidden;clear:both;content:""}
.point_list .point_tit {font-weight:bold;float:left;font-size:1.083em;display:block}
.point_list .point_date1 {float:left;color:#888d92}
.point_list .point_date {float:left;color:#888d92}
.point_list .txt_expired {color:red;margin-left:5px}

#point .pg_wrap {width:100%;float:inherit;text-align:center}
#point .btn_close {margin:20px auto}

/* 회원 비밀번호 확인 */
#mb_confirm {}
#mb_confirm h1 {margin:60px 0 30px;font-size:2em}
#mb_confirm p {padding:0 20px 40px;border-bottom:1px solid #e9e9e9;font-size:1.083em;line-height:1.4em;color:#656565}
#mb_confirm p strong {display:block;color:#3ca1ff;font-size:1.167em;margin:0 0 5px}
#mb_confirm fieldset {padding:50px;text-align:left}
#mb_confirm fieldset .frm_input {background-color:#fff !important}
#mb_confirm label {letter-spacing:-0.1em}
#mb_confirm_id {display:block;margin:5px 0 10px;font-weight:bold}
#mb_confirm .confirm_id {font-size:0.92em;color:#666}

/* 비밀글 비밀번호 확인 */
#pw_confirm h1 {margin:60px 20px 30px;font-size:2em}
#pw_confirm p {padding:0 20px 40px;border-bottom:1px solid #e9e9e9;font-size:1.083em;line-height:1.4em;color:#656565}
#pw_confirm p strong {display:block;color:#3ca1ff;font-size:1.167em;margin:0 0 5px}
#pw_confirm fieldset {padding:50px;text-align:center}
#pw_confirm fieldset .frm_input {background-color:#fff !important}
#pw_confirm label {letter-spacing:-0.1em}
#pw_confirm_id {display:inline-block;margin-right:20px;font-weight:bold}
#mb_confirm_id {}

.chk_box {position:relative}
.chk_box input[type="radio"] {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}
.chk_box input[type="radio"] + label {position:relative;padding-left:23px;display:inline-block;color:#676e70}
.chk_box input[type="radio"] + label span {position:absolute;top:0;left:0;width:15px;height:15px;display:block;background:#f7f8f9;border:1px solid #cdd6df;border-radius:50%}
.chk_box input[type="radio"]:checked + label {color:#3a8afd}
.chk_box input[type="radio"]:checked + label span {border-color:#3a8afd}
.chk_box input[type="radio"]:checked + label span:before {width:7px;height:7px;background:#3a8afd;content:'';position:absolute;top:3px;left:3px;border-radius:50%}

.chk_box input[type="checkbox"] + label {position:relative;color:#676e70}
.chk_box input[type="checkbox"] + label:hover {color:#2172f8}
.chk_box input[type="checkbox"] + label span {float:left;width:22px;height:22px;display:block;background:#fff;border:1px solid #d3d3d3;border-radius:3px}
.chk_box input[type="checkbox"]:checked + label {color:#000}
.chk_box input[type="checkbox"]:checked + label span {border-color:#003fa5; /*background:url(./img/chk.png) no-repeat 50% 50% #003fa5;border-color:#003fa5;border-radius:3px*/}
.chk_box input[type="checkbox"]:checked + label span:after {content:"✔"; display:block; background:#003fa5; color:#fff; width:100%; height:100%; text-align:center; line-height:20px; font-size:0.95em;}
.selec_chk {position:absolute !important;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}


/* 사이트 정보 */
.mypageForm {width:calc(100% - 30px); margin:30px auto 0;}
.mypageForm h2 {border-bottom:1px solid #000; padding:0 0 7px 3px; margin:30px 0 15px; font-size:1.167em; color:#000;}
.mypageForm .h2Guide {font-weight:300; margin:0 0 20px 0;}
.mypageForm .h2Guide p {padding-left:5px;}
.mypageForm .h2Guide .caution {color:#004bc9;}
.mypageForm .inputLabel {position:absolute; width:0; height:0; font-size:0; opacity:0;}
.mypageForm input[type=text], 
.mypageForm input[type=number],
.mypageForm input[type=password] {border:0; background:transparent;border-bottom:1px solid #ddd; border-radius:0; box-shadow:none;}
.mypageForm input[type=text]:hover, 
.mypageForm input[type=text]:focus, 
.mypageForm input[type=number]:hover,
.mypageForm input[type=number]:focus,
.mypageForm input[type=password]:hover,
.mypageForm input[type=password]:focus {border-color:#999;}
.mypageForm .chk_li {vertical-align:middle;}

.register .btn_confirm, 
.mypageForm .btn_confirm {padding:0 0 50px; overflow:hidden;}
.register .btn_confirm .btn_submit,
.register .btn_confirm .btn_close,
.mypageForm .btn_confirm .btn_submit,
.mypageForm .btn_confirm .btn_close {float:left; height:50px !important;width:calc(50% - 5px); text-align:center; line-height:50px; font-weight:bold;font-size:1.083em; border-radius:5px;}
.register .btn_confirm .btn_close,
.mypageForm .btn_confirm .btn_close {border:1px solid #ddd; background:#f0f0f0;}
.register .btn_confirm .btn_submit,
.mypageForm .btn_confirm .btn_submit {border:0; background:#2c4165; color:#fff; margin-left:10px}

.mypageForm .btn {border:0; background:transparent;}
.mypageForm .btn.inputCtrl {position:absolute; top:7px; right:10px; width:30px; height:30px; border:1px solid #ddd; background:#f3f3f3; border-radius:3px;}
.mypageForm .btn.inputCtrl:hover {background:#e3e3e3; border-color:#d3d3d3}
.mypageForm .btn.inputCtrl i {font-size:0.76em; font-weight:bold;}

#groupinfo li {position:relative;}
#groupinfo #basicInfo {clear:both; overflow:hidden;}
#groupinfo #basicInfo .logoWrap {width:calc(50% - 7.5px); height:155px; border:1px solid #ddd; border-radius:5px; padding:3px; margin:0 0 20px 0; float:left;}
#groupinfo #basicInfo .logoWrap .preview {display: flex; justify-content: center; align-items: center; width:100%; height:100%; border-radius:3px;}
#groupinfo #basicInfo .logoWrap .preview.empty {background:#f3f3f3 url(./img/groupInfo_logoInsert_bg.png) no-repeat center;}
#groupinfo #basicInfo .logoWrap .preview img {max-width:80%; max-height:90%;}
#groupinfo #basicInfo .logoWrap input {position:absolute; width:0; height:0; opacity:0;}
#groupinfo #basicInfo .form1 {width:calc(50% - 7.5px); margin-left:15px; float:left;}
#groupinfo #basicInfo .form2 {width:100%; clear:both;}

#registergroupUrl {background:#f0f0f0; border-radius:10px; padding:20px 15px 15px; margin:60px 0 30px;}
#registergroupUrl .addr {position:relative; height:40px; background:#333; border-radius:20px;}
#registergroupUrl .addr span {position:absolute; top:11px; left:20px; font-size:0.9em; letter-spacing:0.02em; font-weight:100;}
#registergroupUrl .addr .btn {position:absolute; top:8px; right:10px; display:inline-block; border:0; background:#f0f0f0; padding:3px 10px; border-radius:15px; cursor:pointer;}
#registergroupUrl .guide {padding:10px 10px 0;}
#registergroupUrl.perfect .guide .valid {display:none;}
#registergroupUrl.perfect .guide .except {display:none;}
#registergroupUrl.perfect .guide .invite {display:block; color:#0042b3; text-align:center; padding:5px 0;}
#registergroupUrl.perfect .addr span {color:#fff; letter-spacing:0; font-weight:200;}
#registergroupUrl:not(.perfect) .addr span {color:#fff;}
#registergroupUrl:not(.perfect) .addr .btn {color:#333; background:#fff;}
#registergroupUrl:not(.perfect) .guide .valid {display:block; color:#c91e1e;}
#registergroupUrl:not(.perfect) .guide .except {display:block; color:#333; font-weight:400; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #ccc;}