@charset "utf-8";

/*========================================================
Contents Common
========================================================*/
html, body { margin: 0; padding: 0; background: var(--color-bg); transition: background 1s}
body { width: 100%; height: 100%; min-height: 100vh; 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}

.conbox { position: relative; max-width: 1320px; margin: 0 auto}
.conbox-max { position: relative; max-width: 1920px; padding: 0 100px; margin: 0 auto}

@media (max-width: 1400px){
	.conbox { padding: 0 20px;}
	.conbox-max { padding: 0 50px;}
}
@media (max-width: 1320px){	
	.conbox-max { padding: 0 20px;}	
}

.section-case { position: relative;}
.not-scroll { position: fixed; overflow: hidden; width: 100%; height: 100%}

/* ul.dot */
ul.dot li { position: relative; font-family: 'Pretendard'; font-size: 18px; font-weight: 500; letter-spacing: 0; padding-left: 15px}
ul.dot li + li { margin-top: 15px}
ul.dot li::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-base)}

ul.dot-line li { position: relative; letter-spacing: 0; padding-left: 12px}
ul.dot-line li + li { margin-top: 5px}
ul.dot-line li::before { content: ""; position: absolute; left: 0; top: 10px; width: 3px; height: 1px; background: #666}

ul.dot-line.big li { font-size: 18px; font-weight: 500; letter-spacing: 0;}
ul.dot-line.big li::before { top: 12px; width: 5px; height: 2px}

.small ul.dot li { font-size: 14px}
.small ul.dot li + li { margin-top: 5px}
.small ul.dot li::before { top: 8px}

.dot-box + .dot-box { margin-top: 30px}
.dot-box .dot-tit { display: block; font-size: 20px; font-weight: 700; background: url("/assets2/img/contents/sub_dot.svg") 0 center no-repeat; padding-left: 30px; margin-bottom: 10px}
.dot-box p.txt { font-size: 18px; font-weight: 400; padding-left: 30px}

/* caution */
.caution { background: #F3F6FB; border-radius: 15px; padding: 30px}
.caution.gray { background: #f5f5f5}
.caution h4 { position: relative; font-size: 22px; padding-left: 40px; margin-bottom: 20px}
.caution h4::before { content: ""; position: absolute; left: 0; top: 50%; width: 30px; height: 30px; background: url("/assets2/img/common/icon_info.svg") center center /contain no-repeat; transform: translateY(-50%)}

.caution.small { padding: 20px 30px}

@media (max-width: 1400px){
	.conbox { padding: 0 20px}
}
@media (max-width: 1100px){
	.caution { padding: 25px}
	.caution h4 { font-size: 20px; padding-left: 36px; margin-bottom: 15px}
	.caution h4::before { width: 26px; height: 26px}
	
	.caution.small { padding: 20px}
}
@media (max-width: 991px){
	.conbox { padding: 0 15px}
	.br-991 { display: block}
	
	ul.dot li { padding-left: 10px}
	ul.dot li + li { margin-top: 10px}
}
@media (max-width: 767px){
	.br-767 { display: block}
}
@media (max-width: 575px){
	.br { display: block}
	
	.caution { padding: 20px}
	.caution h4 { font-size: 18px; padding-left: 32px; margin-bottom: 10px}
	.caution h4::before { width: 22px; height: 22px}
}


/*========================================================
Header
========================================================*/
.Wrapper { position: relative; margin: 0 auto}
.Header { position: absolute; top: 70px; left: 0; width: 100%; height: 100px; background: transparent; transition: height 0.2s cubic-bezier(0.165, 0.840, 0.440, 1.000), background 0.2s ease; z-index: 10}
.Header::before { content: ""; position: absolute; left: 0; top: -70px; width: 100%; height: 0; background: #fff; box-shadow: 0px 14px 12px -10px rgba(0,0,0,.05); opacity: 0; transition: height 0.3s ease-in-out, opacity 0.2s ease-in-out;}

.Header .conbox-max { display: flex; align-items: center; justify-content: space-between; height: 100%;}
/*.Header .conbox::before { content: ""; position: absolute; left: -100px; right: -100px; bottom: 0; height: 1px; background: #eee; opacity: 0; transition: all 0.2s ease}*/
.Header h1 { }
.Header h1 a { display: block; width: 120px; height: 52px; background: url("/assets2/img/common/logo_mdh_w.svg") 0 0 no-repeat}

/*.Header.open { height: 400px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); box-shadow: 0px 14px 12px -10px rgba(0,0,0,.05);}*/
.Header.open::before { height: 400px; opacity: 1}
/*.Header.open .conbox::before { opacity: 1}*/

@media (max-width: 991px){
	.Header { top: 30px; height: 60px}
	.Header h1 { margin-top: 4px}
	.Header h1 a { width: 89px; height: 40px}
	
	.Header .conbox-max { justify-content: center}
}

.gnb {}
.gnb > ul { display: flex; align-items: center; justify-content: space-between;}
.gnb > ul > li { position: relative; width: 150px; font-family: "Pretendard";}
.gnb > ul > li > a { position: relative; display: block; font-size: 18px; color: #fff; font-weight: 400; text-align: center; padding: 36px 0}
.gnb > ul > li > a::before { content: ""; position: absolute; left: 50%; top: -4px; width: 50px; height: 4px; background: var(--color-base); transition: 0.4s 0.2s; transform: scaleX(0); transform-origin: left}

.Header.open .gnb > ul > li:hover > a { color:  var(--color-base)}
.Header.open .gnb > ul > li:hover > a::before { transform: scaleX(1) translateX(-50%)}

.gnb .depth2 { position: absolute; left: 50%; top: 100px; width: 100%; height: 229px; transform: translateX(-50%);  opacity: 0; visibility: hidden}
.gnb .depth2::before { content: ""; position: absolute; left: 0; top: -171px; width: 1px; height: 400px; background: #eee}

.gnb .depth2 ul { position: relative; height: 100%}
.gnb .depth2 ul li { position: relative; text-transform: none;}
.gnb .depth2 ul li a { display: block; font-weight: 500; line-height: 1.3; text-align: center; white-space: nowrap; padding: 10px 20px;}
.gnb .depth2 ul li:first-child a { padding-top: 16px}
.gnb .depth2 ul li:last-child a { padding-bottom: 16px}
.gnb .depth2 ul li:hover a { color: var(--color-font); font-weight: 700}

.Header.open .gnb .depth2 { opacity: 1; visibility: visible; transition: opacity 0s 0.2s ease}
.Header.open .gnb > ul > li:first-child .depth2::before { content: none}
/*.Header.open .gnb > ul > li:hover .depth2::after { content: ""; position: absolute; left: 0; top: -171px; width: 100%; height: 400px; background: var(--color-base)}*/

@media (min-width: 992px){
	/*.gnb .depth2 ul::before { content: ""; position: absolute; left: 50%; top: -4px; width: 50px; height: 4px; background: var(--color-base); transition: 0.4s 0.2s; transform: scaleX(0)}
	.Header.open .gnb > ul > li:hover .depth2 ul::before { transform: scaleX(1) translateX(-50%)}*/
}
@media (max-width: 991px){
	.navBar { position: fixed; right: -100%; top: 0; width: 100%; max-width: 500px; height: 100%; background: #fff; transition: all 0.3s ease; overflow-y: auto; z-index: 105}
	.Header.nav-open .navBar { right: 0}
	
	.gnb { padding-top: 60px}
	.gnb > ul { border-top: 10px solid #eee; padding-top: 15px}
	.gnb > ul { flex-direction: column; align-items: flex-start}
	.gnb > ul > li { width: 100%}
	.gnb > ul > li > a { color: var(--color-init); letter-spacing: 0; font-weight: 700; text-align: left; padding: 15px 30px}
}

.util-btn { display: none}
.util-btn ul { display: flex; align-items: center}
.util-btn ul li { position: relative}
.util-btn ul li + li { margin-left: 30px}
.util-btn ul li a { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.8); font-weight: 300; padding-top: 30px;}
.util-btn ul li a.btn-login,
.util-btn ul li a.btn-logout { background: url("/assets2/img/common/icon_power_w.svg") center 0 no-repeat}
.util-btn ul li a.btn-join,
.util-btn ul li a.btn-mypage { background: url("/assets2/img/common/icon_user_w.svg") center 0 no-repeat}

.btn-nav { position: relative; width: 40px; height: 32px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end;}
.btn-nav .line { display: block; width: 40px; height: 3px; background: #fff; margin: 4px 0; transition: all 0.4s ease-in-out;;}
.btn-nav .line.line2 { width: 20px;}

.btn-nav.active { position: relative; align-items: center; width: 30px; height: 30px; margin-top: -45px; z-index: 106}
.btn-nav.active .line,
.btn-nav.active .line.line2 { width: 20px; transition: all 0.4s ease-in-out}
.btn-nav.active .line:nth-child(1){	transform: translateY(5px) rotate(45deg);}
.btn-nav.active .line:nth-child(2){	transform: translateY(-5px) rotate(-45deg);}
.btn-nav.active .line { background: #333 }

@media (max-width: 991px){
	.util-btn { display: none}
	
	.util-bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); transition: all 0.5s ease 0.3s; opacity: 0; z-index: 102}
	.Header.nav-open .util-bg { display: block; opacity: 1; transition-delay: 0s}
}




/*========================================================
Footer
========================================================*/
.Footer { position: relative; background: #171B21; padding: 50px 0}
.Footer .foot-top { display: flex;}
/*.foot-info h1 { font-size: 18px; margin-bottom: 20px}*/
.foot-info h1 { margin-bottom: 25px}
.foot-info h1 img { height: 50px; opacity: 0.7}

.foot-company { margin-top: 10px}
.foot-company .set { display: flex}
.foot-company span { position: relative; display: block; font-size: 16px; color: rgba(255, 255, 255, 0.4); font-weight: 300; letter-spacing: 0}
.foot-company .set span::before { content: "/"; position: absolute; left: -17px; top: 3px; font-size: 14px; color: #999}
.foot-company .set span + span { margin-left: 30px}
.foot-company .set span:first-child::before { content: none}
.foot-company .copy { color: rgba(255, 255, 255, 0.4); font-weight: 300; letter-spacing: 0; margin-top: 15px}

.foot-right { display: flex; flex-direction: column; justify-content: space-between; margin-left: auto}
.foot-terms { text-align: right}
.foot-terms a { position: relative; display: inline-block; font-size: 16px; color: rgba(255, 255, 255, 0.6); font-weight: 500}
.foot-terms a + a { margin-left: 30px}
.foot-terms a::before { content: ""; position: absolute; left: -15px; top: 5px; width: 1px; height: 14px; background: #999}
.foot-terms a:first-child::before { content: none}

.foot-sns ul { display: flex; justify-content: flex-end; align-items: center}
.foot-sns ul li { position: relative}
.foot-sns ul li + li { margin-left: 30px}
.foot-sns ul li a { position: relative; display: flex; align-items: center}
.foot-sns ul li a span { position: absolute; left: 50%; top: -35px; font-size: 13px; background: #fff; border-radius: 20px; padding: 2px 10px; transition: 0.3s; transform: translateX(-50%); visibility: hidden; opacity: 0}
.foot-sns ul li:hover a span { display: block; visibility: visible; opacity: 1}

.foot-btm { font-size: 14px; color: #111; font-weight: 300; text-align: center}

.top-go { position: fixed; right: 30px; bottom: 30px; transition: 0.3s; z-index: 99}
.top-go a { display: block; width: 50px; height: 50px; background: url("/assets2/img/common/btn_top.svg") center center /cover no-repeat}

@media (min-width: 992px){
	.Footer::after { width: 250px; height: 40px; background: url("/assets2/img/common/footer_bg.svg") center center /contain no-repeat}
}
@media (max-width: 991px){
	.Footer { padding: 40px 0 20px 0}
	.Footer::after { width: 100px; height: 16px; background: url("/assets2/img/common/footer_bg_sm.png") center center no-repeat}
	.Footer .foot-top { flex-direction: column; align-items: center; padding-bottom: 15px; margin-bottom: 15px}
	.foot-info { margin-bottom: 20px}
	.foot-info h1 { font-size: 15px; text-align: center; margin-bottom: 20px}
	.foot-company { text-align: center}
	.foot-company .set { flex-direction: column; justify-content: center}
	.foot-company span { font-size: 13px}
	.foot-company .set span + span { margin-left: 0}
	.foot-company .set span::before { content: none}
	
	.foot-right { margin-left: 0}	
	.foot-terms { order: 2;}
	.foot-terms a { font-size: 13px}
	.foot-sns { order: 1; margin-bottom: 20px}
	.foot-sns ul { justify-content: center}
	.foot-sns ul li:hover a span { display: none}
	
	.foot-company .copy { font-size: 13px; margin-top: 10px}
	.foot-btm { font-size: 12px}
	
	.top-go a { width: 40px; height: 40px;}
}
@media (max-width: 575px){
	.foot-info h1 img { height: 40px}
	.foot-company span { line-height: 1.2}	
	.foot-company span + span { margin-top: 10px}
	.foot-company .set span { margin-top: 10px }
	.foot-company .set span::before { top: 2px}	
}

/*========================================================
Modal
========================================================*/
/*
#modalBg { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.35); z-index: 110}

.modal-box { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 111}

.modal-card	{ position: relative; background:#fff; border-radius: 10px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); overflow: hidden}

.modal-close { position: absolute; right: 30px; top: 15px; z-index: 112}
.modal-close a { display: block; width: 30px; height: 30px; font-size: 0; text-indent: -9999px; background: url("/assets2/img/common/icon_close_modal.svg") center center /contain no-repeat; opacity: 0.6}
.modal-close a:hover { opacity: 1}

.modal-head { height: 60px}
.modal-head h4 { position: relative; display: flex; align-items: center; height: 100%; font-size: 22px; color: #fff;  background: #63BD65; padding: 0 30px}

.modal-body { position: relative; padding: 30px;}
.modal-body.h-add { height: 52vh}
.modal-body.h-add > div { height: 100%; padding-right: 10px; overflow-y: auto}
.modal-box.sm { max-width: 450px}
.modal-box.sm .modal-body { padding-top: 50px; padding-bottom: 50px}

h5.modal-tbl-tit { font-size: 18px; font-weight: 400; letter-spacing: 0; text-align: center; margin-bottom: 10px}
h5.modal-tbl-tit strong { font-weight: 700}

.modal-body p.base { font-size: 16px; text-align: center; margin-bottom: 20px}

.modal-body .table th, .modal-body .table td { font-size: 14px; line-height: 1.3}

.modal-foot { display: flex; align-items: center; height: 60px; background: #F3F6FB; padding: 0 30px}
.modal-foot > div { display: flex; align-items: center}
.modal-foot .right { margin-left: auto}
.modal-foot .btn { width: auto; height: 40px; border-radius: 20px; padding: 0 25px}
.modal-foot .btn + .btn { margin-left: 10px}

@media(min-width : 992px){
	.modal-box { width: 100%; min-width: 360px; max-width: 700px; min-height: 15%;}
	.modal-box.big { max-width: 800px}
}
@media(max-width : 991px){
	.modal-box { width: calc(75% - 40px)}
	.modal-close { right: 15px; top: 10px}
	.modal-head { height: 50px}
	.modal-head h4 { font-size: 20px; padding: 0 20px}
	.modal-body { padding: 20px;}
	.modal-foot { height: 50px; padding: 0 20px}
	.modal-foot .btn { height: 34px; font-size: 14px}
}
@media(max-width : 890px){
	.modal-box { width: calc(80% - 40px);} 
}
@media(max-width : 767px){
	.modal-box { width: calc(90% - 40px);}
}

@media(max-width : 575px){
	.modal-box { width: calc(100% - 30px)}
	.modal-box.sm { max-width: none}
	.modal-box.sm .modal-body { padding-top: 30px; padding-bottom: 30px}
	
	.modal-close { right: 15px; top: 10px}
	.modal-close a { width: 26px; height: 26px}
	.modal-head { height: 46px}
	.modal-head h4 { font-size: 18px; padding: 0 15px}
	
	.modal-body { padding: 20px 15px}
	.modal-body.h-add { height: 55vh}
	.modal-body.h-add > div { padding-right: 0}
	h5.modal-tbl-tit { font-size: 16px}
	.modal-body p.base { margin-bottom: 10px}
	
	.modal-foot { padding: 0 15px}
	.modal-foot .btn + .btn { margin-left: 5px}
}
*/


.modal-box { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.5); overflow: auto; z-index: 1;}
.modal-content { position: relative; max-width: 80%; min-width: 500px; background: #fefefe; border-radius: 10px; padding: 30px}

.modal-head { position: relative; margin-bottom: 20px}
.modal-head h4 { position: relative; display: flex; align-items: center; font-size: 24px; font-weight: 600; letter-spacing: 0;}
.modal-close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 11}
.modal-close button { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 0; background: transparent; cursor: pointer}
.modal-close button span { position: relative; display: block; width: 20px; height: 2px; background: transparent}
.modal-close button span:before,
.modal-close button span:after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; background: #333}
.modal-close button span:before { transform: rotate(45deg)}
.modal-close button span:after { transform: rotate(-45deg)}

.modal-body { position: relative; display: flex; flex-direction: column; min-height: 200px;}

@media (max-width: 575px){
	.modal-content { max-width: 90%; min-width: auto; padding: 15px}
	.modal-head { margin-bottom: 10px}
	.modal-head h4 { font-size: 18px}
}


/*========================================================
Form
========================================================*/
/***  form basic ***/
.form-basic { position: relative; display: block; width: 100%; height: 50px; font-size: 16px; color: var(--color-init); border: 1px solid #ccc; background: #fff; border-radius: 5px; padding: 0 15px;}
.form-basic:focus { border: 1px solid var(--color-init)}

.form-basic.sm { height: 40px; font-size: 15px}
.form-basic.xs { height: 36px; font-size: 14px}

.form-basic.cal { background: url("/assets2/img/common/icon_cal_form.svg") right 10px center /20px no-repeat #fff; padding: 0 40px 0 15px}

select.form-basic { background: url("/assets2/img/common/select_arr.svg") right center /22px no-repeat #fff; padding: 0 35px 0 15px}
textarea.form-basic { height: auto; padding: 15px}
textarea.form-basic.basic { height: 200px;}

/*.form-basic:disabled { color: #999; background: #f0f0f0}*/
.form-basic:disabled { color: #666; background-color: #F3F6FB}
select.form-basic:disabled { background-image: url("/assets2/img/common/select_arr_disabled.svg")}

.form-item { position: relative}
.form-item + .form-item { margin-top: 20px}
.form-item + .btn { margin-top: 30px}
.form-item + .btn-line { margin-top: 40px}

.form-flex { display: flex; align-items: center; gap: 0 10px}
.form-flex .form-item + .form-item { margin-top: 0}
.form-item .info { font-size: 14px; color: #666; align-self: flex-end}
.form-flex + .form-flex,
.form-flex + .form-item,
.form-item + .form-flex { margin-top: 20px}

h4.form-tit { font-size: 24px; border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 30px}
label.tit, span.tit { position: relative; display: block; font-size: 16px; font-weight: 500; white-space: nowrap; margin-bottom: 5px}
label.star::after { content: "*"; display: inline-block; color:#ff3835; font-weight:800; line-height: 1; vertical-align: middle; margin-left: 5px}
.btn-form { display: flex; align-items: center; justify-content: center; width: 200px; height: 60px; font-size: 18px; color: #fff; font-weight: 500; background: var(--color-base); border-radius: 5px; cursor: pointer}

@media (min-width : 992px){
	.form-item { display: flex; align-items: center;}
	label.tit, span.tit { width: 150px; flex-shrink: 0}
}
@media (max-width : 991px){
	.form-basic { padding: 0 10px}
	.form-item + .btn { margin-top: 25px}
	.form-basic.sm { height: 40px}
	.form-basic.xs { height: 36px;}
	
	.form-basic.cal { background-position: right 8px center; background-size: 18px; padding: 0 30px 0 10px}
	
	select.form-basic { background-size: 20px; padding: 0 30px 0 10px}
	textarea.form-basic { padding: 10px}
	textarea.form-basic.basic { height: 120px;}
}
@media (max-width: 575px) {
	.form-flex { gap: 0 5px}
}
@media (max-width: 320px) {
}

/*** Button ***/
/* btn*/
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 50px; font-size: 16px; color: #333; font-weight: 500; line-height: 1; letter-spacing: 0; background-color: transparent; border: 1px solid transparent; user-select: none; white-space: nowrap; cursor: pointer; transition: all 0.15s ease-in-out; border-radius: 5px; padding: 0 30px}
.btn.btn-sm { width: auto; height: 40px; font-size: 15px; padding: 0 20px}
.btn.btn-xs { width: auto; height: 36px; font-size: 14px; padding: 0 15px}
.btn.btn-xs.small { height: 34px}

@media (min-width : 992px) {
	.btn.btn-sm { min-width: 75px}
	.btn.btn-xs { min-width: 65px}
}
@media (max-width : 991px){
	.btn { height: 50px; padding: 0 20px}
	.btn.btn-sm { height: 40px; font-size: 14px}
	.btn.btn-xs { height: 36px; font-size: 13px;}
}
@media (max-width : 575px){
	.btn.btn-sm { padding: 0 15px}
}

.btn.btn-base { color: #fff; background-color: var(--color-base); border-color: var(--color-base);}
.btn.btn-base:hover, .btn.btn-base:focus { color: #fff; background-color: #e96732; border-color: #e96732}

.btn.btn-deep { color: #fff; background-color: #333; border-color: #333;}
.btn.btn-deep:hover, .btn.btn-deep:focus { color: #fff; background-color: #111; border-color: #111}

.btn.btn-deep6 { color: #fff; background-color: #666; border-color: #666;}
.btn.btn-deep6:hover, .btn.btn-deep:focus { color: #fff; background-color: #333; border-color: #333}

.btn.btn-yellow { color: #fff; background-color: #eeb557; border-color: #eeb557;}
.btn.btn-yellow:hover, .btn.btn-yellow:focus { color: #fff; background-color: #eca93c; border-color: #eca93c}

.btn.btn-green { color: #fff; background-color: #63BD65; border-color: #63BD65;}
.btn.btn-green:hover, .btn.btn-green:focus { color: #fff; background-color: #4ea150; border-color: #4ea150}

.btn.btn-blue { color: #fff; background-color: #567CFC; border-color: #567CFC;}
.btn.btn-blue:hover, .btn.btn-blue:focus { color: #fff; background-color: #567CFC; border-color: #567CFC}

.btn.btn-red { color: #fff; background-color: #f53d3c; border-color: #f53d3c;}
.btn.btn-red:hover, .btn.btn-red:focus { color: #fff; background-color: #e02c2b; border-color: #e02c2b}

.btn.btn-gray { color: #fff; background-color: #ccc; border-color: #ccc;}
.btn.btn-gray:hover, .btn.btn-gray:focus { color: #494949; background-color: #ccc; border-color: #ccc}

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

.btn.btn-outline-deep { color: #333; background-color: #fff; border-color: #333;}
.btn.btn-outline-deep:hover, .btn.btn-outline-deep:focus { color: #fff; background-color: #333; }

.btn.btn-outline-deep6 { color: #666; background-color: #fff; border-color: #666;}
.btn.btn-outline-deep6:hover, .btn.btn-outline-deep6:focus { color: #fff; background-color: #666; }

.btn.btn-outline-yellow { color: #eeb557; background-color: #fff; border-color: #eeb557;}
.btn.btn-outline-yellow:hover, .btn.btn-outline-yellow:focus { color: #fff; background-color: #eca93c; border-color: #eca93c}

/*
.btn.btn-outline-green { color: #4ea150; background-color: #fff; border-color: #4ea150;}
.btn.btn-outline-green:hover, .btn.btn-outline-green:focus { color: #fff; background-color: #4ea150; border-color: #4ea150}
*/
.btn.btn-outline-green { color: #63bd65; background-color: #fff; border-color: #63bd65;}
.btn.btn-outline-green:hover, .btn.btn-outline-green:focus { color: #fff; background-color: #63bd65; border-color: #63bd65}

.btn.btn-outline-blue { color: #567CFC; background-color: #fff; border-color: #567CFC;}
.btn.btn-outline-blue:hover, .btn.btn-outline-blue:focus { color: #fff; background-color: #567CFC; border-color: #567CFC}

.btn.btn-outline-red { color: #f53d3c; background-color: #fff; border-color: #f53d3c;}
.btn.btn-outline-red:hover, .btn.btn-outline-red:focus { color: #fff; background-color: #f53d3c; border-color: #f53d3c}

.btn.btn-outline-gray { color: #666; background-color: #fff; border-color: #ccc;}
.btn.btn-outline-gray:hover, .btn.btn-outline-gray:focus { color: #111; border-color: #999}

/* btn disable */
.btn.disable, .btn.disable:hover, .btn.btn-base.disable:focus { color: rgba(255, 255, 255, 0.5); cursor: default}

/* btn search */
.btn-search { font-size: 16px; color: #fff; background: url("/assets2/img/contents/icon_search.svg") 20px center no-repeat #2a3954; border-radius: 5px; padding: 10px 20px 10px 40px}
.btn-search span { font-weight: 500}

/* btn down */
.btn-down { font-size: 14px; color: #fff; background: url("/assets2/img/contents/icon_down.svg") 20px center no-repeat #4F98E2; border-radius: 5px; padding: 10px 20px 10px 40px}
.btn-down span { font-weight: 500}

/* btn-line */
.btn-line { position: relative; display: flex; justify-content: center}
.btn-line.left { justify-content: flex-start}
.btn-line.right { justify-content: flex-end}
.btn-line .btn { border-radius: 5px}
.btn-line .btn + .btn { margin-left: 10px}

@media (max-width : 575px){
	.btn-line .btn + .btn { margin-left: 5px}
}

/*** Radio & Checkbox ***/
/* common */
input.checkradio { display: none;}
input.checkradio + label { position: relative; display: inline-flex; align-items: center; cursor:pointer;}
input.checkradio + label > span { vertical-align: middle; padding-left: 8px;}
input.checkradio.solo + label > span { 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='%23bbb' 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='3' 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: #616B7D; background-repeat: no-repeat; border-color: #616B7D}

/* 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-base)}
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-base);}

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

/* Only text */
input.checkradio.onlytext + label { border-radius: 3px; padding: 5px 15px}
input.checkradio.onlytext + label > span { padding: 0}
input.checkradio.onlytext + label::before, input.checkradio.onlytext + label::after { content: none}
input.checkradio.onlytext:checked + label { background: #FF3F3F}
input.checkradio.onlytext:checked + label > span { color: #fff}

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


/*========================================================
Table
========================================================*/
.table { }
.table th, .table td { font-size: 16px; padding: 12px 10px}
.table th { font-size: 18px; font-weight: 600; text-align: center; border-top: 1px solid #111; border-bottom: 1px solid #DAE1E6}
/*.table th { font-weight: 500; text-align: center; background: #ECF0F7; border-top: 1px solid #616B7D}*/
/*.table th { font-weight: 500; text-align: center; background: #dee5f1}*/
/*.table th { font-weight: 500; text-align: center; background: #ECF0F7; border-top: 1px solid #616B7D;}*/
/*.table th { font-weight: 500; text-align: center; background: #f3f6fb; border-top: 1px solid #a6c9e1}*/
.table th .small { display: block; font-size: 14px; line-height: 1.1}
.table td { border-bottom: 1px solid #DAE1E6}
.table td.no-data { height: 80px; text-align: center; vertical-align: middle}
.table td.left { text-align: left}
.table td.center { text-align: center}
.table td.right { text-align: right}
.table td a { display: block; font-weight: 600}

.table input.checkradio:checked + label::before { background-color: #616B7D; border-color: #616B7D}
.table input[type=radio].checkradio:checked + label::before { background: #fff; border-color: var(--color-base)}

.table .btn.btn-xs { min-width: auto; height: 30px; font-size: 12px; padding: 0 8px}

.table.table-center td { text-align: center}
.table.table-center td.left { text-align: left}
.table.table-center td.right { text-align: right}
.table.table-center td.subject { text-align: left; font-weight: 500}

/* No thead */
.table.no-thead th { width: 150px; color: #6f7c91}
.table.no-thead th, .table.no-thead td { font-size: 14px; border-width: 1px 0; border-color: #ddd; padding: 10px}

/* just list */
.table.table-list th { font-size: 14px}
.table.table-list th .small { font-size: 12px}
.table.table-list td { font-size: 14px; color: #666}

@media (max-width: 991px){
	.table.no-thead { border-top: 1px solid #ddd}
	.table.no-thead tr { display: flex; flex-wrap: wrap}
	.table.no-thead th { display: flex; align-items: center; padding: 10px 10px 10px 20px}
	.table.no-thead td { width: calc(100% - 150px); padding: 10px}
	.table.no-thead th, .table.no-thead td { font-size: 14px; border-top-width: 0}
}
@media (max-width: 575px){
	.table.no-thead th { width: 120px}
	.table.no-thead td { width: calc(100% - 120px)}
}
@media (max-width: 330px){
	.table.no-thead th { width: 110px; padding-left: 10px}
	.table.no-thead td { width: calc(100% - 110px)}
}

/* overflow */
.overflow { padding-bottom: 10px}
.overflow + .overflow { margin-top: 30px}
.overflow table { min-width: 700px}

@media (max-width: 991px){
	.overflow { overflow-x: auto}
}

.table-top { display: flex; align-items: flex-end; margin-bottom: 10px}
.table-top .right-con { margin-left: auto}
.table-top .right-con .total { font-size: 14px; font-weight: 500}


/*========================================================
ul Table-style
========================================================*/
.table-style .check { width: 60px}
.table-style .no { width: 70px}
.table-style .wide { flex: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden}
.table-style .tit { flex: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden}
.table-style .writer, .table-style .teacher { width: 100px}
.table-style .applicant { width: 100px}
.table-style .target { width: 70px}
.table-style .date { width: 110px}
.table-style .date2 { width: 200px; font-size: 15px}
.table-style .views, .table-style .file { width: 100px}
.table-style .type, .table-style .state { width: 70px}
.table-style .student { width: 180px}
.table-style .class { width: 150px}
.table-style .line { width: 150px}
.table-style .sendDate, .table-style .checkDate { width: 100px}

.table-style ul.head { display: flex; align-items: center; height: 50px; background: #F3F6FB; border-radius: 10px}
.table-style ul.head li { font-size: 14px; font-weight: 500; line-height: 1.2; text-align: center}
.table-style ul.head li .small { display: block; font-size: 12px}

.table-style ul.body li { position: relative; display: flex; align-items: center; font-size: 16px; color: #666; padding: 13px 0; border-bottom: 1px solid #EFEEF4;}
.table-style ul.body li.no-data { justify-content: center; padding: 50px 0}

.table-style ul.body li > div { position: relative; text-align: center; padding: 0 5px}
.table-style ul.body li .left { text-align: left}
.table-style ul.body li .check { font-size: 0; line-height: 1}
.table-style ul.body li a { display: flex; align-items: center; justify-content: center; width: 100%; color: var(--color-init)}
.table-style ul.body li a:hover { color: var(--color-base)}
.table-style ul.body li a span { display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden}
.table-style ul.body li .tit { font-weight: 500; text-align: left; letter-spacing: 0}
.table-style ul.body li .tit a { justify-content: flex-start}
.table-style ul.body li .tit .reply { font-family: "Pretendard"; font-size: 14px; color: var(--color-base); margin-left: 5px}

@media ( max-width: 991px){
	.table-style ul.head { display: none}
	.table-style ul.body { border-top: 1px solid #EFEEF4}
	.table-style ul.body li { flex-wrap: wrap; gap: 0 12px}
	.table-style ul.body li.no-data { font-size: 14px; padding: 40px 0}
	
	.table-style ul.body li > div { width: auto; font-size: 14px; letter-spacing: 0; padding: 0}	
	.table-style ul.body li .check { margin-bottom: 5px}
	.table-style ul.body li .no { display: flex; align-items: center}
	.table-style ul.body li .no::before { content: "No."; font-size: 12px}	
	.table-style ul.body li .tit { flex: none; width: 100%; font-size: 16px; margin-bottom: 7px}
	.table-style ul.body li .wide { flex: none; width: 100%; font-size: 16px; margin-bottom: 7px}
	.table-style ul.body li a { justify-content: flex-start}
	.table-style .applicant::before { content: "상담 : "}
	.table-style .target::before { content: "대상 : "}
	
	.table-style ul.body li .date,
	.table-style ul.body li .date2,
	.table-style ul.body li .sendDate,
	.table-style ul.body li .checkDate { padding-left: 18px}
	.table-style ul.body li .date::before,
	.table-style ul.body li .date2::before,
	.table-style ul.body li .sendDate::before,
	.table-style ul.body li .checkDate::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 14px; background: url("/assets2/img/common/icon_cal.svg") center center /contain no-repeat; transform: translateY(-50%); margin-top: -1px}
	.table-style ul.body li .views { padding-left: 18px}
	.table-style ul.body li .views::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 14px; background: url("/assets2/img/common/icon_views.svg") center center /contain no-repeat; transform: translateY(-50%)}
	
	/*.tab-type2 + .table-style ul.body { border-top: 0}*/
	
	/*
	.table-style ul.body li > div::before { content: ""; position: absolute; top: 0; left: 0; font-size: 14px; font-weight: 500; color: #999}
	.table-style ul.body li .no::before { content: "Date";}
	.table-style ul.body li .tit::before { content: "State";}
	.table-style ul.body li .writer::before { content: "Captain";}
	.table-style ul.body li .date::before { content: "Information";}	
	.table-style ul.body li .views::before { content: "Approval";}
	*/
	.table-style ul.body li.no-data { text-align: center;}
}
@media ( max-width: 575px){
	.table-style ul.body li > div { font-size: 13px}
	.table-style ul.body li .tit { font-size: 15px; margin-bottom: 5px}
	.table-style ul.body li .date::before,
	.table-style ul.body li .date2::before,
	.table-style ul.body li .sendDate::before,
	.table-style ul.body li .checkDate::before,
	.table-style ul.body li .views::before { width: 12px; height: 12px; margin-top: 0}
}


/*========================================================
Tab : Tab-type1 (페이지 전체 tab)
========================================================*/
.tab-type1 { margin-bottom: 50px}
.tab-type1 ul { display: flex; justify-content: center; border-bottom: 1px solid var(--color-init)}
.tab-type1 ul li { position: relative; font-size: 22px; font-weight: 500;}
.tab-type1 ul li + li { margin-left: 40px}
.tab-type1 ul li a { display: block; color: #999; padding:15px}
.tab-type1 ul li.on { font-weight: 700}
.tab-type1 ul li.on a { color: inherit}
.tab-type1 ul li.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-init)}

@media(max-width : 1100px){
	.tab-type1 { margin-bottom: 40px}
	.tab-type1 ul li { font-size: 20px}
	.tab-type1 ul li + li { margin-left: 30px}
	.tab-type1 ul li a { padding: 10px}
}
@media(max-width : 991px){
	.tab-type1 ul li { font-size: 18px}
}
@media(max-width : 575px){
	.tab-type1 { margin-bottom: 30px}
	.tab-type1 ul { justify-content: space-around}
	.tab-type1 ul li { font-size: 17px}
	.tab-type1 ul li + li { margin-left: 0}
	.tab-type1 ul li a { padding: 0 10px 10px 10px}
	.tab-type1 ul li.on::after { height: 2px}
}
@media(max-width : 340px){
	.tab-type1 ul li { font-size: 16px}
}

/* Snb Depth3 */
.tab-type1.snb_depth3 { margin-bottom: 40px}
.tab-type1.snb_depth3 ul { justify-content: flex-start}
.tab-type1.snb_depth3 ul li { font-size: 20px; font-weight: 500}

.tab-type1.snb_depth3 ul li a { color: var(--color-init); padding: 0 0 15px 0}
.tab-type1.snb_depth3 ul li.on { font-weight: 700}
.tab-type1.snb_depth3 ul li.on a { color: var(--color-base)}
.tab-type1.snb_depth3 ul li.on::after { bottom: -1px; height: 5px; background: var(--color-base)}

@media(max-width : 1200px){
	.tab-type1.snb_depth3 ul li { font-size: 18px}
}
@media(max-width : 991px){
	.tab-type1.snb_depth3 { margin-bottom: 30px}
	.tab-type1.snb_depth3 ul li { font-size: 16px}
	.tab-type1.snb_depth3 ul li.on::after { height: 4px}
	.tab-type1.snb_depth3 ul li a { padding-bottom: 10px}	
}
@media(max-width : 575px){
	.tab-type1.snb_depth3 { margin-bottom: 20px}
	.tab-type1.snb_depth3 ul { justify-content: space-around}
	.tab-type1.snb_depth3 ul li { font-size: 15px}
}
@media(max-width : 340px){
	.tab-type1.snb_depth3 ul li { font-size: 14px}
}


/*========================================================
Tab : Tab-type2 (게시판 list tab)
========================================================*/
.tab-type2 { margin-bottom: 30px}
.tab-type2 ul { position: relative; display: flex; justify-content: center; z-index: 1}
.tab-type2 ul::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: #888; z-index: -1}
.tab-type2 ul li { letter-spacing: 0}
.tab-type2 ul li a { display: block; color: #888; border: 1px solid #888; border-radius: 30px; background: #fff; padding: 12px 30px}
.tab-type2 ul li.on a { color: #fff; border-color: var(--color-init); background: var(--color-init)}

@media(max-width : 991px){
	.tab-type2 ul li { font-size: 15px}
	.tab-type2 ul li a { padding: 8px 20px}
}
@media(max-width : 575px){
	.tab-type2 { margin-bottom: 20px}
	.tab-type2 ul li { font-size: 14px; line-height: 1.2}
	.tab-type2 ul li a { text-align: center; border-radius: 25px; padding: 6px 30px}
}
@media ( max-width: 380px){
	.tab-type2 ul li { line-height: 1.1}
	.tab-type2 ul li a { padding: 6px 25px}
}
@media ( max-width: 350px){
	.tab-type2 ul li a { padding: 6px 20px}
}
@media ( max-width: 320px){
	.tab-type2 ul li { font-size: 13px}
}

/* Tab-type2 변형 */
.tab-type2.noline ul::after { content: none}
.tab-type2.noline ul li + li { margin-left: 10px}
.tab-type2.noline ul li a { color: 1px solid var(--color-init); border-color: 1px solid var(--color-init); border-radius: 10px}
.tab-type2.noline ul li.on a { color: #fff}

/* Snb Depth2 */
.tab-type2.noline.snb_depth2 { margin-bottom: 40px}
.tab-type2.noline.snb_depth2 ul li { font-size: 18px}

@media(max-width : 1200px){
	.tab-type2.noline.snb_depth2 ul li { font-size: 16px}
	.tab-type2.noline.snb_depth2 ul li a { padding: 12px 20px}
}
@media(max-width : 991px){
	.tab-type2.noline.snb_depth2 { margin-bottom: 30px}
	.tab-type2.noline.snb_depth2 ul li { font-size: 16px}
	.tab-type2.noline.snb_depth2 ul li a { padding: 8px 15px}
}
@media(max-width : 575px){
	.tab-type2.noline.snb_depth2 { margin-bottom: 20px}
	.tab-type2.noline.snb_depth2 ul li { font-size: 14px}
	.tab-type2.noline.snb_depth2 ul li + li { margin-left: 5px}
	.tab-type2.noline.snb_depth2 ul li a { border-radius: 8px; padding: 12px 8px}
}
@media(max-width : 340px){
	.tab-type2.noline.snb_depth2 ul li { font-size: 13px}
	.tab-type2.noline.snb_depth2 ul li a { padding: 10px 5px}
}


/*========================================================
Tab : Tab-type3 (card header tab)
========================================================*/
.tab-type3 ul { display: flex; align-items: center}
.tab-type3 ul li { }
.tab-type3 ul li a { display: flex; align-items: center; height: 34px; font-size: 14px; color: #888; padding: 0 15px; border: 1px solid #ccc; border-radius: 20px; background: #fff}
.tab-type3 ul li.on a { color: #fff; background: var(--color-init); border-color: var(--color-init)}
.tab-type3 ul li + li { margin-left: 5px}

@media ( max-width: 330px){
	.tab-type3 ul li a { padding: 0 10px}
}


/*========================================================
Pagination
========================================================*/
.pagination { margin-top: 50px}
.pagination ul { display: flex; justify-content: center; align-items: center}
.pagination ul li { margin: 0 3px}
.pagination ul li a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 15px; font-weight: 500; color: #666; background: transparent; border-radius: 5px;}
.pagination ul li.on a { background-color: var(--color-base); border-color: var(--color-base); color: #fff}

.pagination ul li.unit a { background: url("/assets2/img/common/icon_page_arr.svg") center center /18px no-repeat}
.pagination ul li.start a,
.pagination ul li.end a { background-image: url("/assets2/img/common/icon_pages_arr.svg")}
.pagination ul li.next a,
.pagination ul li.end a { transform: scaleX(-1)}

.pagination ul li a em { display: block; margin-top: 1px}

@media ( max-width: 991px){
	.pagination { margin-top: 40px}
	.pagination ul li { margin: 0 2px}
	.pagination ul li a { width: 30px; height: 30px; font-size: 14px}
	.pagination ul li.unit a { background-size: 16px}
}
@media ( max-width: 575px){
	.pagination { margin-top: 30px}
	.pagination ul li { margin: 0}
	.pagination ul li a { width: 28px; border: 0}
}