@charset "utf-8";

/* 공통 */
.login_wrap {background:#f7f7f7;}
.login_header {z-index:9; position: fixed; top: 0; left: 0; width: 100%; height:55px; padding-top:15px; text-align: center; background:#fff; border-bottom:1px solid #eee; box-sizing:border-box;}
.login_header h1 {font-size:17px; font-weight:bold; color:#000;}
.login_header button.close {position:absolute; top:19px; left:15px; width:15px; height:15px; background: url('../img/btn_close_t-1.png') no-repeat; background-size:cover;}
.login_content {padding: 85px 15px 40px 15px;}
.login_btn button {width:100%; height:50px; margin-top:10px; font-size:16px; font-weight:400;}
.login_btns {display:flex; justify-content: space-between}
.login_btns button {width:49%; height:50px; margin-top:10px; font-size:14px; font-weight:400; border-radius: 5px;}
.login_btns button img {display: inline-block; height: 22px; margin: -3px 10px 0 0; vertical-align: middle;}
.login_btns.num3 button {width:39%}
.login_btns.num3 button:last-child {width:18%}

.ml30 {margin-left:30px;}

/*키컬러 - 버튼 */
.none_box {color:#fff; background:#b3b3b3; border-radius:5px; transition:0.5s}
.default_box {color:#fff; background:#222450; border-radius:5px; transition:0.5s}
.gray_line {color:#999; border:1px solid #ccc; border-radius:5px; transition:0.5s}
.key_line {color:#222450; border:1px solid #222450; border-radius:5px; transition:0.5s}

/* input - form_group 공통 - bottom 라인 스타일 */
.form_group {position:relative; margin-bottom:25px;}
.form_group input, .form_group textarea {position: relative;display: block;width: 100%; padding:5px 50px 0 10px; border: none;border-bottom: 1px solid #e5e5e5;background-color: transparent;margin: 0px auto; height: 50px; outline: none !important;font-size: 15px;color: #000; letter-spacing: 0.5px; background-position: left bottom;background-size: 0 1px;background-repeat: no-repeat;transition: all .2s ease-in-out; box-sizing: border-box; }
.form_group input:focus { border-color: #000; }
.form_group textarea:focus { border-color: #000; }
.form_group input:valid + label, .form_group input:focus + label, .form_group textarea:valid + label, .form_group textarea:focus + label { top:-5px; height: 20px; line-height: 20px; font-size: 12px; color: #999;}

.file_box label.imgurl {top:-5px !important; height: 20px; line-height: 20px; font-size: 12px; color: #999;}

.form_group label {position: absolute;top: 0; left: 0;text-align: left;display: block;width: 100%;height: 50px; margin: 0px auto; padding-left:10px; line-height: 50px;text-transform: uppercase;font-size: 15px; background: transparent; cursor: text;transition: all .15s ease-in-out; box-sizing: border-box; }
.form_group label em {color:#999;}

.form_error input, .form_error textarea {border-bottom:1px solid #ff4040;}
.form_error input:focus { border-color: #ff4040; }
.form_error textarea:focus { border-color: #ff4040; }
.form_error label { top:-5px; height: 20px; line-height: 20px; font-size: 12px; color: #ff4040;}
.form_error input:valid + label, .form_error input:focus + label, .form_error textarea:valid + label, .form_error textarea:focus + label { top:-5px; height: 20px; line-height: 20px; font-size: 12px; color: #ff4040;}
.form_error p {text-align: left; font-size: 12px; margin: 5px 0 0 10px;color: #ff4040;}

.form_tel::after {content: ''; display: table; clear: both}
.form_tel label { top:-7px; height: 20px; line-height: 20px; font-size: 12px; color: #666;}
.form_tel input {float:left; display: inline-block; width:30%; margin:0 0 0 5%; padding-right:10px}
.form_tel select {float:left; padding: 6px 5px 0 10px; width: 30%; height: 50px; border: none; border-bottom: 1px solid #e5e5e5; font-size: 15px; color: #000; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('https://publogg.store/number/img/sel_arrow.png?t=1') no-repeat 90% 55%;}

.form_group button {position:absolute; bottom:12px; right:10px; height:25px; padding:0 7px; font-size:12px; color:#fff; background:#b3b3b3; border-radius: 5px;}
.form_group button.type1 {position:absolute; bottom:12px; right:10px; height:25px; padding:0 20px; font-size:12px; color:#999; background: none; border:1px solid #999; border-radius: 5px; transition: 0.3s}
.form_group button.type1:hover {color:#222450; border:1px solid #222450; transition: 0.3s}
.form_group p.num {position:absolute; top:13px; right:10px; font-size:12px; color:#ff4040;}
.form_group img.naver {position:absolute; bottom:12px; right:10px; width:20px;}

.form_group.type2 {margin-bottom:15px}

/* 체크, 라디오 박스 공통 */
/* Basic styles */
.form_group input[type="checkbox"], .form_group input[type="radio"] {position: absolute;opacity: 0;z-index: -1;}
.checkbox label {position: relative;display: inline-block;padding: 0 0 0 30px;height: 1.5em;line-height: 1.5;cursor: pointer;}
.checkbox label::before,
.checkbox label::after {position: absolute;top: 0;left: 0;display: block; width:20px; height:20px; border-radius: 3px}
.checkbox label::before { content: " "; background:#dedede; background-size:10px;}
.checkbox label a {color:#222450; text-decoration: underline;}

/* Radio */
.radiobox label {position: relative;display: inline-block; margin-right:60px; padding: 0 0 0 30px;height: 1.5em;line-height: 1.5;cursor: pointer;}
.radiobox label::before,
.radiobox label::after {position: absolute;top: 0;left: 0;display: block; width:20px; height:20px; border-radius: 100px}
.radiobox label::before { content: " "; background:#dedede; background-size:10px;}

/* :checked */
.checkbox input[type="checkbox"]:checked + label {color:#222450;}
.checkbox input[type="checkbox"]:checked + label::before {background:#222450 url('../img/btn_check_t-1.png') center no-repeat; background-size:10px;}
.radiobox input[type="radio"]:checked + label::before {background:#222450 url('../img/btn_check_t-1.png') center no-repeat; background-size:10px;}
.checkbox input[type="checkbox"] + label::after,.radiobox input[type=radio] + label::after {transform: scale(0);}
input[type="checkbox"]:checked + label::after, input[type=radio]:checked + label::after {transform: scale(1);}

/* 셀렉트박스 - 기본 */
.custom-select {position: relative}
.custom-select+.custom-select {margin-top: 10px;}
.custom-select select {display: none}
.custom-select ul {display: none;position: absolute; left: 0; top: 100%; max-height: 500px; margin-top: -1px; right: 0; background: #fff; border: 1px solid #888; z-index: 3; overflow: auto; }
.custom-select li {height:35px; text-align:center; line-height:35px; color: #000; cursor: pointer;}
.custom-select li:hover {background: #ececec}
.custom-select .new-select {position: relative; display: block; width: 100%; height:35px; padding:0 33px 0 0; font-size:14px; text-align: center; line-height: 33px; color: #000; border: 1px solid #888; cursor: pointer; box-sizing: border-box;}
.custom-select .new-select:after {content: ""; position: absolute; top:0; right: 0; width:32px; height:33px; background: url(https://publogg.store/include/img/order/select_btn.png) center no-repeat; background-position:0 0;}
.custom-select .new-select.active:after {background: url(https://publogg.store/include/img/order/select_btn.png) no-repeat; background-position:0 -34px;}

/* 셀렉트박스 - 커스텀 */
.option_select .custom-select .new-select {height:45px; padding-left:20px; text-align: left; color:#777; line-height: 43px; border: 1px solid #d4d4d4; }
.option_select .custom-select ul {border: 1px solid #d4d4d4;}
.option_select .custom-select li {height:45px; padding-left:20px; text-align:left; line-height:45px; color: #777; cursor: pointer;}
.option_select .custom-select .new-select:after {top: 5px;}

/* 리스트 스타일 */
.ul_default {margin-top:40px;}
.ul_default li {margin-bottom:8px; padding-left:9px; text-align: left; background:url(../img/bullet_t-1.png) left 10px  no-repeat; background-size:2px; word-break: keep-all;}
.ul_default li:last-child {margin-bottom:0;}

/* 로그인 */
.login_btn2 button {width:49%; height:50px; margin-top:10px; font-size:14px; font-weight:400;}
.login_btn2 .naver {padding-left:45px; color:#fff; background:#1ec700 url(../img/btn_naver.png) top left no-repeat; background-size:contain; border-radius:5px; border:1px solid #38a01d;}
.login_btn2 .naver100 {width:100%;}
.login_btn2 button:last-child {float:right;}
.login_btn3 {margin-top:20px; text-align: center;}
.login_btn3 a {margin:0; padding:0 12px; border-right:1px solid #d9d9d9;}
.login_btn3 a:last-child {border:none;}
.login_btn3 a em {text-decoration: underline;}

/* 마이페이지 */
.login_text {margin-top:20px; line-height:30px; text-align: center;}
.login_text span {font-size:24px; font-weight:bold; color:#222450;}
.my_info {margin-top:50px; text-align: center}
.my_info a {display: inline-block; width:49%; font-size:14px; color:#333;}
.my_info a span {margin-left:5px;}
.my_info a:first-child {border-right:1px solid #ccc;}
.my_info a img {width:60px; margin:0 auto 13px auto;}

/* 계정관리 */
.term_wrap {}
.term_wrap h3 {font-size:15px; color:#000;}
.term_wrap div {margin-top:15px;}
.term_wrap div::after {content: ''; display: table; clear: both}
.term_wrap div button {float:left; width:24%; height:35px; margin-right:1.33%; font-size:12px; color:#999; border:1px solid #ccc; border-radius: 5px}
.term_wrap div button:last-child {margin:0;}
.term_wrap div button.active {color:#222450; border:1px solid #222450}

/* 쿠폰 */
.coupon_p {margin:10px 0 30px 0; text-align:center;}
.coupon_p em {font-weight: bold; color:#222450}
.coupon_list li {margin-bottom:7px; padding:20px; background: #fff; border:1px solid #f7f7f7; border-radius:7px; box-shadow: 0px 5px 10px 0px #e5e5e5;}
/*.coupon_list li {padding:20px 10px; border-bottom:1px solid #e5e5e5;}
.coupon_list li:last-child {border-bottom:1px solid #222450;}*/
.coupon_list li p {margin-bottom:7px; font-size:16px; line-height:23px; color:#000; word-break: keep-all;}

/* 회원가입 */
.agree_box {margin:15px 0 0 15px;}
.agree_box em {font-size:12px; color:#b3b3b3}
.agree_box em.nece {color:#ff4040}
.all_agree {font-size:15px; color:#333; font-weight:bold}

/* 레이어 */
.number_layer {position: absolute; display:none; width:500px !important; background: #fff;}
.number_layer .layer_content iframe {width:100%; height:360px;}
.number_layer button.b-close {position:absolute; top:17px; right:15px; width:13px; height:13px; background: url(../img/btn_close2.png) no-repeat; background-size:13px}
.layer_box h1 {height:50px; padding: 15px; font-size:16px; color:#fff; background:#222450; box-sizing: border-box;}
.layer_box h1.t_c {text-align: center;}
.layer_box .con_box {padding:30px}
.layer_box .con_box > p {text-align: center}
.layer_box .con_box > p.t_l {text-align: left !important;}
.layer_box .con_box > p em {color: #111; font-weight: bold;}

/* 레이어 모바일 */
.number_layer.m_box {width:320px !important;}



/* 번호 인증 */
.login_btn::after {content: ''; display: table; clear: both}
.btn_ok {float:left; width:68% !important; margin:0 auto}
.btn_cancle {float:right; width:29% !important; margin:0 auto}


/* 졸업몰 리뉴얼: 상담 예약하기 레이어팝업 */
.dis_n {display: none;}
.layer_box button.close {position:absolute; top:17px; right:15px; width:13px; height:13px; background: url(../img/btn_close2.png) no-repeat; background-size:13px; opacity: 1;}
.layer_box ul.state {text-align: center; padding: 5% 0; border-bottom: 1px solid #eee;}
.layer_box ul.state li {display: inline-block; width: 28%; color: #999;}
.layer_box ul.state li.active {font-weight: bold; color: #222450;}
.layer_box ul.state li.active > span {font-weight: bold; color: #fff; border: 1px solid #222450; background-color: #222450;}
.layer_box ul.state li > span {display: inline-block; padding: 1px 9px; border: 1px solid #aaa; margin-right: 5px; border-radius: 4px}
.layer_box .con_box .active_day {background: #eee; font-weight: bold;}
.layer_box .con_box .complete_box {text-align: center; padding: 5% 0;}
.layer_box .con_box .complete_box h3 {font-size: 16px; font-weight: bold; color: #222450; line-height: 28px;}
.layer_box .con_box .complete_box h3 em {font-size: 20px;}
.layer_box .con_box .complete_box p {font-size: 15px; color: #333; margin: 7% 0;}
.layer_box .con_box .complete_box dl {padding-top: 5%;}
.layer_box .con_box .complete_box dl dt::before {width: 20px; height: 3px; background: #222450; display: block; content: ""; margin: 0 auto; margin-bottom: 7%}
.layer_box .con_box .complete_box dl dt {font-size: 15px; color: #222450; font-weight: bold; margin-bottom: 2%}
.layer_box .con_box .complete_box dl dd {margin: 0; padding: 0;}

/* 배송 안내 */
.pixed_btn {position: fixed;bottom: 0;left: 0; width:100%}
.pixed_btn button {border-radius: 0 !important;}
.pixed_btns {flex-wrap:wrap;}
.pixed_btns p {width:100%; padding:17px 15px; background: #fff; box-shadow: 0 15px 20px 7px rgb(0 0 0 / 20%);}
.pixed_btns button {width:50%; margin-top:0;}
.info_wrap .layer_box .con_box {padding-bottom:130px;}
.info_wrap .pixed_btns p {font-weight: bold; color:#1a1a1a; text-align: center}
.info_wrap p span.small {font-size:11px; color:#999;}

/* 테이블 */
.tb_default {width:100%; border-top:1px solid #000; border-bottom:1px solid #dbdbdb;}
.tb_default caption {display: none}
.tb_default th {padding:8px 0; font-size:12px; font-weight:normal; color:#000; background:#f7f7f7;}
.tb_default td {padding:8px 0; font-size:12px; text-align: center; border-bottom:1px solid #f4f4f4;}
.tb_default tr:last-child td {border-bottom:none;}