@charset "utf-8";

@import url('/assets/css/font.css');

:root {
    --mj-font-family:'Pretendard GOV','맑은 고딕', Verdana, Dotum, Sans-serif;

    --mj-icon:url('/themnj/assets/images/common/icon_set.png');
    --mj-icon-size:auto 298px;

    --mj-border-radius:6px;
}

html {font-size:62.5%}

* {margin:0; padding:0; font-size:1.4rem; font-family:var(--mj-font-family); box-sizing:border-box;}
ul, ol {list-style:none;}

blockquote,q {quotes:none;}
table {width:100%; table-layout:fixed; border-spacing:0; border-collapse:collapse;}
a {color:#222; text-decoration:none;}
img {max-width:100%; height:auto;}
button {cursor:pointer; background:transparent;}
button::-moz-focus-inner {margin-top:-2px; margin-bottom:-2px; padding:0; border:0;}
button span {position:relative;}
textarea {width:100%; min-height:150px; resize:none;}
em,address,i {font-style:normal;}
:invalid {-webkit-box-shadow:none;box-shadow:none;}
:-moz-submit-invalid {box-shadow:none;}
:-moz-ui-invalid {box-shadow:none;}
label {vertical-align:middle; cursor:pointer;}

/* input */
input {border-radius:var(--mj-border-radius); appearance:none; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none;}
input::-moz-focus-inner {margin-top:-2px; margin-bottom:-2px; padding:0; border:0;}
input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="password"], input[type="url"], input[type="search"], input[type="file"], textarea {height:42px; padding:0 15px; background-color:#fff; border:1px solid #e8e5e2;}

.check {line-height:1; position:relative; display:inline-block;}
.check > * {line-height:1.4; vertical-align:middle; display:inline-block;}
.check input {width:20px; height:20px; border:0 !important; position:absolute; top:0; left:0; z-index:0;}
.check .label {position:relative; z-index:1; display:flex; gap:4px;}
.check .label:before {width:20px; height:20px; background-image:var(--mj-icon); background-size:var(--mj-icon-size); content:''; display:inline-block;}

/* radio */
.check input[type='radio'] + .label:before {background-position:-1968px -169px;}
.check input[type='radio']:checked + .label:before {background-position:-2004px -169px;}

/* checkbox */
.check input[type='checkbox'] + .label:before {background-position:-1896px -169px;}
.check input[type='checkbox']:checked + .label:before {background-position:-1932px -169px;}

.check_ani {position:relative; display:inline-block;}
.check_ani input {margin:0 0 0 1px; position:absolute; opacity:0;}
.check_ani em {min-height:22px; padding-left:48px; position:relative; display:block;}
.check_ani input[type='checkbox'] {opacity:0;}
.check_ani input[type='checkbox'] + em:after {width:18px; height:18px; background-color:#fff; border-radius:50%; content:''; position:absolute; top:50%; left:2px; z-index:1; display:block; transform:translateY(-50%); transition:all 0.2s;}
.check_ani input[type='checkbox']:checked + em:before {background-color:#ff7200;}
.check_ani em:before {width:42px; height:22px; background-color:#ccc; border:0; border-radius:60px; content:''; position:absolute; top:0; left:0; display:inline-block;}
.check_ani input[type='checkbox']:checked + em:after {left:22px;}

label.input, label.select {position:relative; display:block; flex:1;}
label.input i {color:#aaa; font-size:1.6rem; font-style:normal; line-height:18px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; position:absolute; top:11px; right:0; left:15px;}/* placeholder */
label.input input[type='text'], label.input input[type='password'], label.input input[type='number'] {width:100%; font-size:1.6rem; line-height:18px;}
label.input > em {margin-top:5px; color:#ff7200; font-size:1.2rem; line-height:18px; display:none;}
label.input.err > em {display:block;}
label.input * {flex:1 auto;}

label.input button[class*='icon_'] {width:20px; height:20px; font-size:0; background-image:var(--mj-icon); background-repeat:no-repeat; background-size:var(--mj-icon-size); border:0; position:absolute; top:50%; right:10px; z-index:1; display:none; transform:translateY(-50%);}
label.input button[class*='icon_'] + button[class*='icon_'] {margin-right:34px;}
label.input button.icon_del {background-position:-708px -169px;}
label.input button.icon_pss.active {background-position:-1068px -169px;}
label.input button.icon_pss {background-position:-1032px -169px;}

.select select{width:100%; height:42px; padding:0 20px 0 10px; border:1px solid #e8e5e2;}

.label_wrap {position:relative; flex:1; display:flex; gap:10px;}
.label_wrap + .label_wrap {margin-top:10px;}

/* margin & padding */
.ml08 {margin-left:8px !important;}

/* align */
.ar {text-align:right !important;}
.al {text-align:left !important;}
.ac {text-align:center !important;}

/* float */
.fl {float:left;}
.fr {float:right;}

/* form group */
.form_group > li + li {padding-top:20px;}

/* tab */
.tab_wrap [class*='tab_type']:after {clear:both; content:''; display:block;}
.tab_wrap [class*='tab_type'] > li {float:left;}
.tab_wrap [class*='tab_type'] > li a {display:block;}

.tab_wrap.type_slide {overflow:hidden;}

.tab_type_01 li + li {border-left:1px solid #fff;}
.tab_type_01 a {padding:10px 0; font-size:1.4rem; font-weight:500; background-color:#efefef; text-align:center;}
.tab_type_01 li.current a {color:#ff7200; background-color:#fff; border-top:1px solid #ff7200;}

.tab_type_slide {display:table; table-layout:fixed; transition-timing-function:cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration:400ms;}
.tab_type_slide li {float:inherit !important; display:table-cell;}
.tab_type_slide a {padding:10px 0; font-size:1.4rem; font-weight:500; background-color:#efefef; text-align:center;}
.tab_type_slide li.current a {color:#ff7200; background-color:#fff; border-top:1px solid #ff7200;}

.tab_content {margin-top:20px;}

.tab_content > div {display:none;}
.tab_content > div.current {display:block;}

/* select_form */
.select_form {vertical-align:middle; display:inline-block;}
.select_form select {display:none;}
.select_form dt a {padding:0 35px 0 15px; line-height:40px; border:1px solid #e8e5e2; border-radius:var(--mj-border-radius); position:relative; display:block;}
.select_form dt a:after {width:6px; height:6px; margin-top:-7px; border-right:2px solid #353535; border-bottom:2px solid #353535; content:''; position:absolute; top:50%; right:15px; display:inline-block; transform:rotate(45deg); transition:all 0.2s;}
.select_form dl.active dt a:after {margin-top:-3px; transform:rotate(-135deg);}
.select_form dd {position:relative;}
.select_form dd ul {min-width:100%; background-color:#fff; border:1px solid #e8e5e2; position:absolute; top:-1px; left:0; z-index:1; display:none;}
.select_form dl.up dd ul {top:inherit; bottom:39px;}
.select_form dd ul a {padding:6px 10px; white-space:nowrap; display:block;}

.multi_form {display:flex; flex-wrap:wrap; align-items:center;}
.multi_form label {flex:1;}
.multi_form > * + * {margin-left:8px;}
.multi_form .label_wrap + .label_wrap {margin-top:0;}
.multi_form + em {display:none;}
.multi_form.err + em {margin-top: 5px;color: #ff7200; font-size:1.2rem; line-height: 18px; display:block;}

/* button */
[class*='btn_'] {border:1px solid #222; vertical-align:middle; display:inline-flex; align-items:center; justify-content:center;}
[class*='btn_'] + [class*='btn_'] {margin-left:8px;}

/* button size */
[class*='btn_min'] {height:32px; padding:0 10px; font-size:1.3rem; font-weight:500; line-height:30px; border-radius:4px;}
[class*='btn_mid'] {height:42px; padding:0 10px; font-size:1.6rem; font-weight:500; line-height:40px; border-radius:8px;}
[class*='btn_large'] {height:50px; padding:0 15px; font-size:1.8rem; font-weight:500; line-height:48px;}

/* button color */
.btn_confirm {color:#fff; background-color:#333;}
.btn_cancel {border-color:#333;}
.btn_ok {color:#fff; background-color:#333;}
.btn_list {border-color:#333;}

.fill01 {color:#234ED1; background-color:#E9EDFA; border-color:#234ED1;}
.fill02 {color:#fff; background-color:#234ED1; border-color:#234ED1;}

/* bottom button section */
.btnSection {margin-top:50px; display:flex; align-items:center; justify-content:flex-end;}
.btnSection div {margin-right:auto; display:flex; align-items:center;}
.btnSection [class*='btn_'] {min-width:80px; font-weight:600;}

/* board */
[class*='board_type_list'] > ul > li {width:100%; display:table; table-layout:fixed;}
[class*='board_type_list'] > ul > li > * {display:table-cell;}

[class*='board_type_list'] > ul.header {text-align:center;}

.board_type_list01 {border-top:3px solid #333; text-align:center;}
.board_type_list01 > ul > li {border-bottom:1px solid #cdcdcd;}
.board_type_list01 > ul > li > * {padding:10px 20px; color:#333; vertical-align:middle;}
.board_type_list01 > ul.body > li > .subject {text-align:left;}
.board_type_list01 > ul.body > li > .subject a {font-weight:500; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; display:block;}

.board_type_list01 > ul > li > .col_check {width:80px;}
.board_type_list01 > ul > li > .no {width:80px;}
.board_type_list01 > ul > li > .w_date {width:130px;}
.board_type_list01 > ul > li > .writer {width:110px;}

.board_type_gallery {padding-top:20px; border-top:1px solid #333;}
.board_type_gallery ul.body {margin-top:-20px; margin-left:-20px;}
.board_type_gallery ul.body:after {clear:both; content:''; display:block;}
.board_type_gallery ul.body > li {width:25%; padding-top:20px; padding-left:20px; float:left; position:relative;}
.board_type_gallery ul.body > li a {border:1px solid #e8e5e2; position:relative; display:block;}
.board_type_gallery ul.body > li .check {position:absolute; top:6px; left:6px;}
.board_type_gallery .thumb {height:150px; background-color:#f1f1f1; background-position:50%; background-repeat:no-repeat; background-size:cover; text-align:center; position:relative; display:block;}
.board_type_gallery .thumb em {position:absolute; top:0; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center;}
.board_type_gallery .thumb img {width:100%; height:100%; object-fit:contain;}
.board_type_gallery .board_cont {padding:20px;}
.board_type_gallery .board_cont > * {display:block;}
.board_type_gallery .board_cont .subject {margin-bottom:12px; font-size:2rem; font-weight:500;}

.board_type_toggle {border-top:1px solid #333; border-bottom:1px solid #333;}
.board_type_toggle > dt {border-top:1px solid #e8e5e2; position:relative;}
.board_type_toggle > dt:before, .board_type_toggle > dd:before {font-size:2.8rem; font-weight:500; position:absolute; top:5px; left:20px;}
.board_type_toggle > dt:before {content:'Q';}
.board_type_toggle > dd:before {content:'A';}
.board_type_toggle > dt a {padding:15px 15px 15px 70px; font-size:1.8rem; display:block;}
.board_type_toggle > dd {padding:15px 15px 15px 70px; line-height:1.5; background-color:#f2f2f2; border-top:1px solid #dbdbdb; position:relative; display:none;}

.sticky_gallery {width:100%; margin-top:20px; box-sizing:border-box; min-height:100px;}
.sticky_gallery ul {position:relative;}
.sticky_gallery ul:after {display:block; clear:both; content:"";}
.sticky_gallery ul li {display:inline-block; position:absolute; transition:all 0.5s;}
.sticky_gallery ul li img {display:block; width:100%;}

/* result & search */
.board_info_wrap {margin-bottom:12px; display:flex; align-items:center; justify-content:space-between;}
.board_info_wrap .result_count {margin-top:10px;}
.board_info_wrap .search_wrap {margin-left:auto; position:relative; display:flex;}
.board_info_wrap .search_wrap label.input {margin-left:5px; vertical-align:middle;}
.board_info_wrap .search_wrap label.input input {padding-right:58px; border-radius:var(--mj-border-radius);}
.board_info_wrap .search_wrap label.input button.icon_del {right:40px;}
.board_info_wrap .search_wrap .btn_search {width:40px; height:100%; font-size:0; border:0; position:absolute; top:0; right:0;}
.board_info_wrap .search_wrap .btn_search:after {width:20px; height:20px; background:var(--mj-icon) -528px -169px no-repeat; background-size:var(--mj-icon-size); content:''; display:block; /*filter:invert(1) sepia(1) saturate(0) brightness(300%);*/}

/* board view */
.board_view h3 {margin-bottom:16px; font-size:18px;}
.board_view .view_info {display:flex;}
.board_view .view_info ul {display:flex; align-items:center;}
.board_view .view_info li {display:flex;}
.board_view .view_info li + li:before {margin:0 12px;content:'/'; display:block;}

.board_view .content_wrap {margin-top:20px; padding:20px 0; border-top:1px solid #E5E5E5; border-bottom:1px solid #E5E5E5;}

.short_list {margin-top:16px; border-top:1px solid #2d2d2d;}
.short_list li {border-bottom:1px solid #d7d2cd;}
.short_list a {padding:8px 10px; font-size:1.5rem; font-weight:600; display:flex; align-items:center;}
.short_list em {margin-right:8px; padding:6px 8px; color:#fff; font-size:1.1rem; font-weight:400; background-color:#2d2d2d; border-radius:4px; display:block;}

/* paging */
.paging {margin-top:50px; text-align:center;}
.paging > div {display:inline-block;}
.paging > div:after {clear:both; content:''; display:block;}
.paging > div > * {width:40px; height:40px; color:#555; font-size:1.4rem; line-height:38px; border-radius:6px; vertical-align:middle; float:left; position:relative; display:inline-block; transition:all 0.35s;}
.paging > div > *:hover {color:#fff; background-color:#666;}
.paging > div strong {color:#fff; background-color:#001F69; border-color:#001F69;}
.paging .first, .paging .prev, .paging .next, .paging .last {font-size:0;}
.paging .first:before, .paging .prev:before, .paging .next:before, .paging .last:before {width:8px; height:8px; border-top:1px solid #666; border-right:1px solid #666; vertical-align:middle; content:''; display:inline-block;}
.paging .first:hover:before, .paging .prev:hover:before, .paging .next:hover:before, .paging .last:hover:before, .paging .first:hover:after, .paging .last:hover:after {border-color:#fff;}
.paging .first:after, .paging .last:after {width:8px; height:8px; border-top:1px solid #666; border-right:1px solid #666; vertical-align:middle; content:''; display:inline-block;}
.paging .first:before, .paging .first:after, .paging .prev:before {margin-right:-3px; transform:rotate(-135deg);}
.paging .next:before, .paging .last:before, .paging .last:after {margin-left:-3px; transform:rotate(45deg);}
.paging .prev {margin-right:16px;}
.paging .next {margin-left:16px;}

/* modal */
.modal_wrap {/*background-color:rgba(0,0,0,0); */text-align:center; opacity:0; position:fixed; top:50%; right:50%; bottom:50%; left:50%; z-index:1; display:block; overflow:hidden; transition:opacity 0.15s ease-out;}
.modal_wrap.active {/*background-color:rgba(0,0,0,0.7);*/ opacity:1; top:0; right:0; bottom:0; left:0;}
/* .modal_wrap:before {height:100%; vertical-align:middle; content:''; display:inline-block;} */
.modal_dim {background-color:rgba(0,0,0,0.6); position:fixed; top:0; right:0; bottom:0; left:0; z-index:99;}

.modal_wrap .modal_container {padding:20px; background-color:#fff; text-align:left; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.modal_header {margin-bottom:10px; padding-bottom:5px; font-size:1.8rem; font-weight:700; border-bottom:1px solid #333; position:relative;}
.modal_header .btn_close {width:25px; height:25px; font-size:0; position:absolute; top:0; right:0; display:inline-block;}
.modal_header .btn_close:before, .modal_header .btn_close:after {width:30px; border-top:1px solid #333; content:''; position:absolute; top:50%; right:-4px; display:inline-block;}
.modal_header .btn_close:before {transform:rotate(45deg);}
.modal_header .btn_close:after {transform:rotate(-45deg);}

.modal_bottom {margin-top:20px; padding-top:20px; border-top:1px dashed #ccc; text-align:center;}

/* modal size */
.modal_container {max-width:96%;}
[modal-type="small"] .modal_container {width:450px;}
[modal-type="mid"] .modal_container {width:650px;}
[modal-type="full"] .modal_container {width:98%;}

/* toast */
.toast {height:50px; line-height:48px; background-color:#fff; border:1px solid #d4d4d4; border-radius:50px; box-shadow:0 4px 6px rgba(0,0,0,0.3); opacity:0; position:fixed; bottom:-50px; left:50%; z-index:100; display:inline-block; transform:translateX(-50%); transition:all 0.35s;}
.toast.confirm {padding:0 50px 0 40px;}
.toast.auto {padding:0 40px;}
.toast.active {bottom:100px; opacity:1;}
.toast .btn_close {width:20px; height:20px; font-size:0; position:absolute; top:50%; right:20px; display:inline-block; transform:translateY(-50%);}
.toast .btn_close:before, .toast .btn_close:after {width:15px; border-top:1px solid #333; content:''; position:absolute; top:50%; right:0; display:inline-block;}
.toast .btn_close:before {transform:rotate(45deg);}
.toast .btn_close:after {transform:rotate(-45deg);}

/* progress */
.progress_wrap {height:10px; background-color:#e9ecef; border-radius:10px; overflow:hidden; position:relative;}
.progress_bar {width:0; font-size:0; background-color:#ff7200; border-radius:10px; text-align:right; position:absolute; top:0; bottom:0; left:0; transition:width 1s;}
.progress_bar * {margin-right:5px; color:#fff; font-size:1.1rem; font-weight:700; line-height:1; vertical-align:middle; display:inline-block;}
.progress_bar em {position:absolute; top:0; right:0; transition:all 0.2s;}

/* loading */
.preloader_wrap {background-color:rgba(0,0,0,0.6); text-align:center; position:fixed; top:0; right:0; bottom:0; left:0; z-index:100; display:none;}
.preloader_wrap.active {display:block;}
.preloader_wrap:before {height:100%; vertical-align:middle; content:''; display:inline-block;}
.preloader {width:50px; height:50px; font-size:0; vertical-align:middle; display:inline-block; animation:container-rotate 1568ms linear infinite;}
.preloader * {box-sizing:border-box;}
.preloader .spinner_layer {width:100%; height:100%; position:absolute; animation:fill-unfill-rotate 5332ms cubic-bezier(0.4,0,0.2,1) infinite both;}
.preloader .circle_clipper {width:50%; height:100%; overflow:hidden; position:relative; display:inline-block;}
.preloader .gap_patch {width:10%; height:100%; border-color:inherit; overflow:hidden; position:absolute; top:0; left:45%;}
.preloader .circle_clipper .circle {width:200%; height:100%; border-width:3px; border-style:solid; border-color:#ff7200; border-bottom-color:transparent !important; border-radius:50%; position:absolute; top:0; right:0;}
.preloader .circle_clipper.left .circle {border-right-color:transparent !important; left:0; animation:left-spin 1333ms cubic-bezier(0.4,0,0.2,1) infinite both;}
.preloader .gap_patch .circle {width:1000%; left:-450%;}
.preloader .circle_clipper.right .circle {border-left-color:transparent !important; left:-100%; transform:rotate(-129deg); animation:right-spin 1333ms cubic-bezier(0.4,0,0.2,1) infinite both;}

@keyframes container-rotate {
	to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}

@keyframes fill-unfill-rotate {
	12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}
	25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}
	37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}
	50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}
	62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}
	75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}
	87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}
	to{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}
}

@keyframes right-spin {
	from{-webkit-transform:rotate(-130deg);transform:rotate(-130deg)}
	50%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}
	to{-webkit-transform:rotate(-130deg);transform:rotate(-130deg)}
}

@keyframes left-spin {
	from{-webkit-transform:rotate(130deg);transform:rotate(130deg)}
	50%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}
	to{-webkit-transform:rotate(130deg);transform:rotate(130deg)}
}