@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");

:root {
	--color-init: #212121;
	--color-point: #7930b3;
}

/*========================================================
Reset
========================================================*/
div, p, th, td, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, select, textarea, blockquote{ padding:0; margin:0;}
form, fieldset, button	{ border:none;}
hr	{ display:none;}
ul, dl, ol, li, dt, dd { list-style: none}
caption	{ display:none}
img { vertical-align:middle; padding: 0; margin: 0; border:0; max-width: 100%}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block}
figure { margin: 0}
address	{ font-weight: normal; font-style: normal}
em, i	{ font-style: normal}
hr { display: none;height: 0; border: 0; margin: 0; padding: 0;}
blockquote, q{ quotes: none;}
blockquote::before, blockquote::after, q::before, q::after{ content: ''; content: none;}
legend, caption, .invisible{ width:0; height:0; padding:0; font-size:0; line-height:0; overflow:hidden; position:absolute; visibility:hidden}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;}
input[type="radio"].hidden, input[type="checkbox"].hidden { overflow: hidden; position: absolute; width: 0; height: 0; border: 0 none; font-size: 0; line-height: 0; left: -9999px}
 
html,body, div, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, button, select, textarea, p, blockquote, address, table, th, td, a, 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, h1,h2,h3,h4,h5,h6, b, strong,span, em, i, a,pre{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

h1, h2, h3, h4, h5, h6, strong	{ font-weight: 500}

table { width: 100%; border-collapse: collapse; border-spacing: 0;}

a { white-space: nowrap; color: var(--color-init)}
a:link, a:visited { text-decoration: none}
a:hover { cursor: pointer;}
a:hover, a:focus, a:active { text-decoration: none;}
a:focus, img:focus, input:focus, button:focus, select:focus, textarea:focus, div:focus { outline: 0;}

object, embed, video { max-width: 100%;}
button { font-family: 'Pretendard', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif; font-size: 16px; background: transparent}
button[type=button] { cursor: pointer}
label { font-size: 16px; color: var(--color-init)}

select { -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; height: 60px; border: 1px solid #cdced6; border-radius: 5px; background: url("../img/common/select_arr.svg") right center /22px no-repeat #fff; padding: 0 35px 0 15px}
select::-ms-expand { display: none}

textarea { -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; border: 1px solid #cdced6;}

input, textarea, select { font-family: 'Pretendard', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif; font-size: 16px; color: var(--color-init)}
input[type=radio],input[type=checkbox],input[type=image]{ padding: 0; height: auto;}
input[type=file]{ height: 50px; background-color: #fff;}
input[type=checkbox], input[type=radio], input[type=text]	{ vertical-align: middle}

input[type=password]::-ms-clear, 
input[type=password]::-ms-reveal, 
input[type=text]::-ms-clear, 
input[type=text]::-ms-reveal { display: none; width: 0; height: 0}

input::placeholder { color: #aaa; font-weight: 400; opacity: 1}
input::-webkit-input-placeholder{ color: #aaa; font-weight: 400} 
input:-ms-input-placeholder { color: #aaa; font-weight: 400}
input:-mos-input-placeholder { color: #aaa; font-weight: 400}

textarea { overflow: auto; vertical-align: top; resize: vertical;}
textarea::placeholder { color: #aaa; font-weight: 400}
textarea::-webkit-input-placeholder { color: #aaa; font-weight: 400}
textarea:-ms-input-placeholder { color: #aaa; font-weight: 400}
textarea:-mos-input-placeholder { color: #aaa; font-weight: 400}


/*========================================================
materialize.css : Reset
========================================================*/
button { outline: none}
button:focus { background-color: transparent}





/*========================================================
Common
========================================================*/
html, body { margin: 0; padding: 0;}
body { width: 100%; height: 100%; font-family: 'Pretendard', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif; font-size: 16px; line-height: 1.5; color: var(--color-init); font-weight: 400; letter-spacing: -0.5px; -webkit-text-size-adjust: 100%; overflow-x: hidden}
*, ::after, ::before { box-sizing: border-box}

.w-auto { width: auto !important}
.w110 { width: 110px !important}

@media (max-width: 575px){
	.br { display: block}
}


/*========================================================
Form
========================================================*/
/* Reset */
/*fieldset { border:none; padding: 0; margin: 0}
legend { width:0; height:0; padding:0; font-size:0; line-height:0; overflow:hidden; position:absolute; visibility:hidden}*/

/*.back-go { position: absolute; left: 25px; top: 20px; z-index: 5}
.back-go a { display: block; width: 20px; height: 20px}*/

/* Form */
.form-item { position: relative}
.form-item + .form-item { margin-top: 20px}
.form-item label.tit { display: block; font-size: 16px; color: var(--color-init); font-weight: 500; margin-bottom: 5px}

.form-basic,
input[type=text].form-basic,
input[type=password].form-basic,
input[type=email].form-basic { width: 100%; height: 50px; border: 1px solid #cdced6; border-radius: 4px; background: #fff; padding: 0 20px; margin: 0; box-sizing: border-box}

.form-basic:focus,
input[type=text].form-basic:focus,
input[type=password].form-basic:focus,
input[type=email].form-basic:focus { border-color: var(--color-init) !important; box-shadow: none !important}

@media (max-width: 575px){
	.form-basic,
	input[type=text].form-basic,
	input[type=password].form-basic,
	input[type=email].form-basic { height: 46px; padding: 0 15px; box-sizing: border-box}
}


/* btn-form */
.btn-form { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 50px; font-size: 16px; color: #333; font-weight: 500; background-color: transparent; border: 1px solid transparent; user-select: none; white-space: nowrap; cursor: pointer; transition: all 0.15s ease-in-out; border-radius: 4px; padding: 0 30px}

.form-item + .btn-form { margin-top: 30px}

@media (max-width: 575px){
	.btn-form { height: 46px; font-size: 15px}
}

/* btn-form color */
.btn-form.btn-base { color: #fff; background-color: #fb5b0d; border-color: #fb5b0d;}
.btn-form.btn-base:hover, .btn-form.btn-base:focus { color: #ffc515; background-color: #fb5b0d; border-color: #fb5b0d}
.btn-form.btn-base.disable { color: rgba(255, 255, 255, 0.5); cursor: default}
.btn-form.btn-base.disable:hover, .btn-form.btn-base.disable:focus { background-color: #fb5b0d; border-color: #fb5b0d}

.btn-form.btn-dark { color: #fff; background-color: var(--color-init); border-color: var(--color-init);}
/*.btn-form.btn-dark:hover, .btn-form.btn-dark:focus { color: #fb5b0d; background-color: var(--color-init); border-color: var(--color-init)}*/
.btn-form.btn-dark.disable { color: #999; background: #e5e5e5; border-color: #e5e5e5; cursor: default}
/*.btn-form.btn-dark.disable:hover, .btn-form.btn-dark.disable:focus { background-color: var(--color-init); border-color: var(--color-init)}*/
.btn-form.btn-point { color: #fff; background-color: var(--color-point); border-color: var(--color-point);}
.btn-form.btn-point.disable { }

.btn-form.btn-gray { background-color: #ddd; border-color: #ddd;}

.btn-form.btn-outline-dark { color: var(--color-init); background-color: #fff; border-color: var(--color-init);}
/*.btn-form.btn-outline-dark:hover, .btn.btn-outline-base:focus { color: #fb5b0d; background-color: #fff; border-color: #fb5b0d}*/
.btn-form.btn-outline-point { color: var(--color-point); background-color: #fff; border-color: var(--color-point);}

/* form-flex */
.form-flex { position: relative; display: flex; align-items: center; gap: 10px}


/*========================================================
Radio & Checkbox
========================================================*/
/* common */
input.checkradio { display: none;}
input.checkradio + label { position: relative; display: inline-flex; align-items: center; cursor:pointer;}
input.checkradio + label > span { font-weight: 500; letter-spacing: -0.5px; padding-left: 8px;}
input.checkradio.solo + label { display: flex; justify-content: center; font-size: 0}
input.checkradio.solo + label > span { padding-left: 0; text-indent: -9999px}

input.checkradio + label::before { content: ""; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width:20px; height:20px; border:1px solid #cdced6; border-radius: 2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-position: center; background-size: 14px; background-color: #fff; background-repeat: no-repeat;}

input.checkradio:checked + label::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-position: center; background-size: 14px; background-color: var(--color-point); background-repeat: no-repeat; border-color: var(--color-point)}

/* Radio */
input[type=radio].checkradio + label::before{ border-radius: 50%; background: #fff;}
input[type=radio].checkradio:checked + label::before { background: #fff; border-color: var(--color-point)}
input[type=radio].checkradio + label::after { content: ""; position: absolute; top: 50%; left: 6px; width: 8px; height: 8px; background: #cdced6; border-radius: 50%; transform: translateY(-50%)}
input[type=radio].checkradio:checked + label::after { background: var(--color-point)}

input.checkradio + label + input.checkradio + label { margin-left: 30px}


/*========================================================
Modal
========================================================*/
.modal.modal-box { top: 50% !important; width: 90%; max-width: 600px; transform: translateY(-50%) !important; background: #fff}

.modal-box .modal-header { position: relative}
.modal-box .modal-header h4 { font-size: 24px; font-weight: 700; text-align: center; padding: 20px 0}
.modal-box .btn-modal-close { position: absolute; right: 20px; top: 50%; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; line-height: 1; transform: translateY(-50%)}

.modal.modal-box .modal-header + .modal-content { padding-top: 0}

.modal.modal-box .modal-footer { display: flex; align-items: center; justify-content: center; gap: 10px; height: auto; text-align: left; border-radius: 0; background: #fff; padding: 0 0 20px 0}

.modal.modal-box .modal-footer .btn-form { width: auto; height: 40px;}

@media (max-width: 575px){
	.modal-box .modal-header h4 { font-size: 20px}
	.modal.modal-box .modal-content { padding: 15px}
	.modal.modal-box .modal-footer .btn-form { font-size: 15px}
}


/*========================================================
Tab
========================================================*/
.tabs { display: flex; margin-bottom: 30px}
.tabs .tab { flex: 1; border-bottom: 1px solid #d5d5d5;}
.tabs .tab a,
.tabs .tab a:hover { font-size: 18px; color: #999; font-weight: 500; outline: 0}
.tabs .tab a.active { color: var(--color-init); font-weight: 700}
.tabs .tab a:focus, .tabs .tab a:focus.active { background-color: transparent}
.tabs .indicator { background-color: var(--color-init)}

@media (max-width: 575px){
	.tabs .tab a, .tabs .tab a:hover { font-size: 16px}
}


/*========================================================
Member layout
========================================================*/
.bg-form { background: #f3f5fa}

.wrap-form { width: 100%; max-width: 700px; padding: 50px 0; margin: 0 auto}
.wrap-form h1.logotit { font-size: 34px; font-weight: 700; text-align: center; margin: 0 0 30px 0}
.wrap-form h1.logotit strong { display: block; font-size: 16px; font-weight: 500; margin-bottom: 0px}
.wrap-form h1.logotit img { width: 120px}
/*.wrap-form h1.logotit + p.small { color: #868e96; letter-spacing: 0; font-weight: 500; text-align: center; margin-bottom: 30px}*/

.form-card { background: #fff; padding: 40px 70px 50px 70px; border-radius: 2px;}
.form-card h2.subtit { font-size: 34px; font-weight: 600; text-align: center; margin: 0 0 20px 0}

h3.subtit { font-size: 20px; font-weight: 700; margin-bottom: 20px}

.form-btn-line { position: relative; display: flex; align-items: center; justify-content: center; gap: 15px}
.form-btn-line.left { justify-content: flex-start}
.form-btn-line.right { justify-content: flex-end}
.form-btn-line .btn-form { width: 150px}

.form-btn-line .btn-text { position: relative; font-size: 15px; color: var(--color-init); font-weight: 500}
.form-btn-line .btn-text + .btn-text::after { content: ""; position: absolute; left: -15px; top: 4px; width: 1px; height: 14px; background: #555;}

.form-item + h3.subtit { margin-top: 40px}
.form-item + .form-btn-line,
.form-agree + .form-btn-line { margin-top: 40px}

@media (max-width: 1024px){
	.wrap-form { padding: 30px 20px}
	.wrap-form h1.logotit { font-size: 28px; margin-bottom: 20px}
}
@media (max-width: 575px){
	.wrap-form { padding: 30px 15px}
	.wrap-form h1.logotit { font-size: 26px;}
	.wrap-form h1.logotit strong { font-size: 13px; line-height: 1; margin-bottom: 5px}
	
	.form-card { padding: 30px 15px}
	
	h3.subtit { font-size: 18px; margin-bottom: 15px}
	
	.form-item + h3.subtit { margin-top: 30px}
	.form-item + .form-btn-line,
	.form-agree + .form-btn-line { margin-top: 30px}
	
	.form-btn-line .btn-form { flex: 1; width: auto}
}



/*========================================================
회원가입
========================================================*/
.form-agree { border: 1px solid #cdced6; padding: 20px 30px; border-radius: 2px}
.form-agree .all-check { border-bottom: 1px solid #e5e5e5; padding-bottom: 20px; margin-bottom: 20px}
.form-agree .form-item + .form-item { margin-top: 10px}
.form-agree .form-item.term-view { display: flex;}
.form-agree .form-item.term-view .btn-term { position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: #666; margin-left: auto}

.modal-term { height: 40vh; font-size: 14px; line-height: 1.5; background: #f5f5f5; padding: 20px; overflow-y: auto}
.modal-term strong { display: block; font-weight: 700; margin-bottom: 10px}
.modal-term strong.title { font-size: 16px; font-weight: 800; border-top: 1px solid #ccc; padding-top: 20px; margin-bottom: 5px}
.modal-term strong.title:first-of-type { border-top: 0; padding-top: 0}
.modal-term span.depth2 { display: block; text-indent: -22px; padding-left: 30px}

table.tbl-term, table.tbl-term th, table.tbl-term td { border: 1px solid #DAE1E6}
table.tbl-term th { background: #fff; white-space: nowrap}
table.tbl-term th, table.tbl-term td { text-align: center; padding: 10px 5px}

@media (max-width: 991px){
	.modal-term .overflow { display: block; overflow-x: auto}
	.modal-term .overflow table.tbl-term { min-width: 500px}
}
@media (max-width: 575px){
	.form-agree { padding: 10px 15px}
	.form-agree .all-check { padding-bottom: 15px; margin-bottom: 15px}
	.form-agree .form-item.term-view input.checkradio + label > span { font-size: 14px}
	
	.modal-term { padding: 15px}
}


/*========================================================
회원가입완료
========================================================*/
.signup-fin { text-align: center; padding: 50px 0}
.signup-fin img.img-fin { display: inline-block; width: 120px}
.signup-fin p { text-align: center; padding: 30px 0 50px 0}
.signup-fin p strong { display: block; font-size: 30px; margin-bottom: 10px}

@media (max-width: 1024px){
	.signup-fin { padding: 20px 0}
	.signup-fin img.img-fin { width: 90px}
	.signup-fin p { text-align: center; padding: 30px 0 40px 0}
	.signup-fin p strong { font-size: 24px; margin-bottom: 10px}
}
@media (max-width: 575px){
	.form-btn-line .btn-fin-login { flex: none; width: 120px}
}


/*========================================================
ID 찾기 / 비밀번호 재설정
========================================================*/
#idfind p.info { font-size: 15px; text-align: center; margin-bottom: 15px}
#idfind p.info strong { font-weight: 600}
/*.btn-auth { flex-shrink: 0; height: 50px; color: var(--color-init); font-weight: 500; background-color: #fff; border: 1px solid var(--color-init); border-radius: 2px; padding: 0 10px}*/

.btn-form.num-in { flex-shrink: 0; width: 110px}

@media (max-width: 575px){
	#idfind p.info { font-size: 14px; text-align: left}
	.btn-form.num-in { width: 90px; font-size: 14px}
}




/*input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: #fff !important;
}*/


/*input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
    color: -internal-light-dark(black, white) !important;
}*/