@charset "utf-8";
/* --------------------------------------------------------
Reset
----------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; font-style:normal;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:''; content:none;}
table {border-collapse:separate; border-spacing:0;}

legend  {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border:0; clip:rect(0,0,0,0);}
caption {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border:0; clip:rect(0,0,0,0);}
label {cursor:pointer;}

/* --------------------------------------------------------
GLOBAL class
----------------------------------------------------------*/
.fb_x {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center;-webkit-justify-content:center; -ms-flex-pack:center;}
.fb_y {display:flex; display:-webkit-flex; display:-ms-flexbox; align-items:center;-webkit-align-items:center; -ms-flex-align:center;}
.fb_xy {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center;align-items:center; -webkit-justify-content:center; -webkit-align-items:center; -ms-flex-pack:center; -ms-flex-align:center;}
.fb_e {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:flex-start;-webkit-justify-content:flex-start; -ms-flex-pack:start;}
.fb_w {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:flex-end;-webkit-justify-content:flex-end; -ms-flex-pack:end;}
.fb_ey {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:flex-start;align-items:center; -webkit-justify-content:flex-start; -webkit-align-items:center; -ms-flex-pack:start; -ms-flex-align:center;}
.fb_wy {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:flex-end;align-items:center; -webkit-justify-content:flex-end; -webkit-align-items:center; -ms-flex-pack:end; -ms-flex-align:center;}
.fb_ew {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:space-between;-webkit-justify-content:space-between; -ms-flex-pack:justify;}
.fb_ewy {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:space-between;align-items:center; -webkit-justify-content:space-between; -webkit-align-items:center; -ms-flex-pack:justify; -ms-flex-align:center;}
.fb_dir_x {flex-direction:row;-ms-flex-direction:row;}
.fb_dir_y {flex-direction:column;-ms-flex-direction:column;}
.fi_start {align-self:flex-start;}
.fi_end {align-self:flex-end;}
.fi_xy {align-self:center;}

.text_left {text-align:left !important;}
.text_right {text-align:right !important;}
.text_center {text-align:center !important;}

.mgt30 {margin-top:30px !important;}
.mgt50 {margin-top:50px !important;}
.mgr6 {margin-right:6px !important;}
.mgl10 {margin-left:10px !important;}
.mgl20 {margin-left:20px !important;}
.mgb0 {margin-bottom:0 !important;}
.mgb30 {margin-bottom:30px !important;}
.pdb0 {padding-bottom:0 !important;}
.ovhidden {overflow:hidden !important;}

.animate {transition:all .2s cubic-bezier(.7,0,.3,1);transform:all .2s cubic-bezier(.7,0,.3,1);-webkit-transition:all .2s cubic-bezier(.7,0,.3,1);}
.ellipsis {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.required {display:block; color:#d44232; font-size:15px; vertical-align:middle;}
.ui-tooltip {display:block; position:absolute; z-index:400; padding:0 16px; border-radius:20px; background:rgba(0,0,0,0.6); color:#FFF; font-size:14px; line-height:26px;}
.filter_blur6 {filter:blur(6px); -webkit-filter:blur(6px);}
.sr-only {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border:0; clip:rect(0,0,0,0);}

.colorA {color:#419e72;}
.colorB {color:#005daf;}
.colorC {color:#85ad4c;}
.colorD {color:#419e72;}

/* selectList */
.selectBox.active {}
.selectBox.active .selectNum {}
.selectBox.active .selectList {display:block;}
.selectBox.active .selectNum:after {transform:rotate(0deg);}
.selectBox {position:relative;}
.selectBox .selectNum {display:block; position:relative; width:100%; height:36px; color:#fff; font-size:16px; text-indent:20px; text-overflow:ellipsis; line-height:36px; white-space:nowrap; overflow:hidden; border:1px solid #666;}
.selectBox .selectNum:after{content:"";position:absolute;top: 14px;right: 18px; border-bottom: 5px solid #fff;border-left: 5px solid transparent;border-right: 5px solid transparent; transform:rotate(180deg);}
.selectBox .selectNum:focus,
.selectBox .selectNum:hover {color:#fff;}
.selectBox .selectList {display:none; position:absolute; z-index:9; left:0; bottom:37px; width:100%; background:#333; border:1px solid #666; border-bottom:0;}
.selectBox .selectList ul {margin:10px 0; box-sizing:border-box; position:relative; z-index:2;}
.selectBox .selectList li {display:block;}
.selectBox .selectList li a {display:block; width:calc(100% - 40px); height:35px; overflow:hidden; color:#fff; font-size:15px; font-weight:300; text-overflow:ellipsis; line-height:35px; white-space:nowrap; margin:0 20px; box-sizing:border-box;}
.selectBox .selectList li a:hover {text-decoration:underline;}
.selectBox .selectList li:last-child a {border-bottom:1px solid #666;}
.selectBox .selectList li a:focus,
.selectBox .selectList li a:hover {background:#333; color:#fff;}
.selectBox .selectList .selectDim { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0); z-index:1;}

/* selection */
::selection {background:#222; color:#FFF; text-shadow:none;}
::-webkit-selection {background:#222; color:#FFF; text-shadow:none;}

/* ------------------------------------------------------------------
FORM INPUT
------------------------------------------------------------------ */
input[type=text],
input[type=password] {width:100%; height:36px; padding:0 10px; border:0; border:1px solid #ddd; color:#333; font-size:14px; line-height:36px; box-sizing:border-box;}
input[type=password] {font-family:Arial, Helvetica, sans-serif;}
input[type=text]:focus,
input[type=password]:focus {}
input[type=text]:disabled,
input[type=password]:disabled {background:#f8f8f8; color:rgba(0,0,0,0.6); text-shadow:1px 1px 0px rgba(255,255,255,1);}
/* label {font-size:0; visibility:hidden;} */
input[type=submit] {margin:0; padding:0; border:none; background:none; font-size:13px; cursor:pointer; appearance:none; color:#2e2e2e; font-weight:600;}

/* ms-clear */
input::-ms-clear {display:none;}

/* placeholder */
input:-ms-input-placeholder {color:#a9a9a9 !important;}
input::-webkit-input-placeholder {color:#a9a9a9 !important;}

/* inputFile
-------------------------------------*/
.inputFile {max-width:380px; display:inline-block; vertical-align:middle; width:inherit;}
.inputFile input {position:absolute; z-index:-1; width:0px; height:0px; overflow:hidden; opacity:0;}
.inputFile input:focus + label, .inputFile input + label:hover {background:#f8f8f8;}
.inputFile input + label {display:inline-block; position:relative; width:100%; height:36px; box-sizing:border-box; padding:0; border:1px solid #dedede; background:#FFF; color:#333; cursor:pointer; visibility:visible;}
.inputFile input + label span {display:block; width:calc(100% - 20px); padding:0 10px; overflow:hidden; text-align:left; text-overflow:ellipsis; white-space:nowrap;}
.inputFile input + label strong {display:block; position:absolute; top:0; right:0; padding:0 30px; border-left:1px solid #2c2c2c; background:#2c2c2c; color:#fff;}
.inputFile input + label span,
.inputFile input + label strong {height:35px; font-size:14px; line-height:35px;}
.inputFile input + label strong {margin-right:-118px; font-weight:300;}

/* --------------------------------------------------------
FORM TEXTAREA
----------------------------------------------------------*/
textarea {width:100%; padding:8px; border:1px solid #dedede; color:#2e2e2e; font-size:14px; line-height:20px; box-sizing:border-box; resize:none;}
textarea:focus {border-color:#000;}
textarea:disabled {background:#f8f8f8; color:rgba(0,0,0,0.3); text-shadow:1px 1px 0px rgba(255,255,255,1);}

/* --------------------------------------------------------
FORM SELECT
----------------------------------------------------------*/
select::-ms-expand {display:none}
select {width:100%; height:36px; padding:0 0 0 4px; border:1px solid #d9d9d9; box-sizing:border-box; appearance:none; font-family: 'Noto Sans KR', sans-serif; font-size:16px; background:url(../img/common/selectBoxArrow.png) #fff no-repeat right 10px center;}
select:hover {}
select option:hover,
select option[selected] {background:#000; color:#FFF;}
select:disabled {background:#f8f8f8; color:rgba(0,0,0,0.3); text-shadow:1px 1px 0px rgba(255,255,255,1);}

/* radio , checkbox
-------------------------------------*/
.opt input[type=radio]+label:before,
.opt input[type=checkbox]+label:before {display:inline-block; vertical-align:middle;}
.opt input[type=radio],
.opt input[type=checkbox] {display:none;}
.opt input[type=radio]+label,
.opt input[type=checkbox]+label {display:inline-block; font-size:14px; vertical-align:middle; cursor:pointer; visibility:visible; position:relative;}
.opt input[type=radio]+label span.text, input[type=checkbox]+label span.text {display:inline-block; vertical-align:middle; margin:0 4px; color:#000; font-size:16px; font-weight:300;}
.opt input[type=radio]+label:before {display:inline-block; width:12px; height:12px; border:3px solid #ffffff; border-radius:50%; box-shadow:0px 0px 0px 1px #a3a3a3; content:''; color:#c7c9d1; vertical-align:middle; box-sizing:border-box; margin-right:4px;}
input[type=checkbox]+label:before {display:inline-block; width:12px; height:12px; border:3px solid #ffffff; border-radius:2px; box-shadow:0px 0px 0px 1px #a3a3a3; content:''; color:#c7c9d1; vertical-align:middle; box-sizing:border-box; margin-right:4px;}
.opt input[type=radio]+label:hover:before, input[type=checkbox]+label:hover:before {color:#427bfd;}
.opt input[type=radio]:disabled+label, input[type=checkbox]:disabled+label {cursor:default;}
.opt input[type=radio]:disabled+label:before, input[type=checkbox]:disabled+label:before {color:#ddd;}
.opt input[type=radio]+label:before {}
.opt input[type=radio]:checked+label:before {background:#000;}
.opt input[type=checkbox]+label:before {}
.opt input[type=checkbox]:checked+label:after {position:absolute; top:2px; left:3px; content:'Γ'; color:#000; font-weight:bold; transform:rotate(225deg);}

@media (max-width:1180px) {
	.opt input[type=radio]+label span.text, input[type=checkbox]+label span.text {font-size:15px;}
}

.optWrap {margin-bottom:30px;}
.optWrap .opt {margin:0 20px;}

/* --------------------------------------------------------
MODAL
----------------------------------------------------------*/

@keyframes ShowPop {
	0% {opacity:0; transform:translate3d(0, -100px, 0);}
	100% {opacity:1; transform:translate3d(0, 0, 0);}
}

@keyframes HidePop {
	0% {opacity:1; transform:translate3d(0, 0, 0);}
	100% {opacity:0; transform:translate3d(0, -100px, 0);}
}

@keyframes dimShowPop {0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes dimHidePop {0% {opacity:1;}
	100% {opacity:0;}
}

.multiModal.hide {}
.multiModal.hide .modalBox {animation:HidePop 0.3s;}
.multiModal.hide .multiModal:after {animation:dimHidePop 0.3s;}
.multiModal.active {display:flex; display:-webkit-flex; display:-ms-flexbox;}
.multiModal {display:none; position:fixed; z-index:99; top:0px; left:0px; right:0px; bottom:0px; justify-content:center;align-items:center; -webkit-justify-content:center; -webkit-align-items:center; -ms-flex-pack:center; -ms-flex-align:center;}
.multiModal:after {position:fixed; z-index:1; top:0px; left:0px; right:0px; bottom:0px; background:rgba(0,0,0,0.8); content:''; animation:dimShowPop 0.3s;}
.modalBox {position:relative; z-index:2; width:850px; background:#fff; box-shadow:0 10px 10px rgba(0, 0, 0, 0.2); max-height:calc(100% - 200px); box-sizing:border-box; animation:ShowPop 0.3s;}
.modalBox.responseHeight {height:100%;}
.modalBox.w480 {width:480px;}
.modalBox.w600 {width:600px;}
.modalBox.w706 {width:706px;}
.modalBox .mbHeader {display:flex; align-items:center; justify-content:space-between; background:#005db0; height:50px; padding:0 10px; box-sizing:border-box;}
.modalBox .mbHeader h2 {color:#fff; font-size:24px;}
.modalBox .mbHeader .tools {}

.modalBox .mbBody {overflow-y:auto; overflow-x:hidden; height:calc(100% - 50px); padding:30px; box-sizing:border-box;}
.modalBox .mbBody::-webkit-scrollbar {height:4px; width:4px}
.modalBox .mbBodyt::-webkit-scrollbar-thumb {border:0px solid transparent; background-color:rgba(0,0,0,0.2); background-clip:padding-box;}
.modalBox .mbBody .mbBodyContents {}
.modalBox .mbBody .mbBodyContents .article {color:#5e5e5e; font-size:15px; line-height:20px;}
.modalBox .buttonWrap {padding:6px 0; text-align:right;}

/* moviePoparticle */
.modalBox .mbBody .mbBodyContents .moviePoparticle {color:#5e5e5e; font-size:15px; line-height:20px;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox {}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .thumb {display:block; width:216px; height:302px; margin-right:24px;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .thumb img {width:216px; height:302px;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo {width:calc(100% - 240px);}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .eventTitle {font-size:17px; color:#5e5e5e; margin-bottom:10px;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .detailinfo {margin-bottom:20px;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .detailinfo span {border-left:1px solid #d9d9d9; font-size:21px; color:#424242; padding:0 10px}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .detailinfo span em {width:48px; height:20px; display:inline-block; vertical-align:middle; border-radius:10px; background:#333; color:#FFF; font-size:14px; font-style:normal; font-weight:normal; text-align:center; margin-left:10px;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .detailinfo span em.all {background:#5aad00;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .detailinfo span em.rRated {background:#c22e00;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .detailinfo span em.age {background:#0092c2;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .movieDetailinfo {margin:14px 0 36px 0px;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .movieDetailinfo span {border-left:1px solid #d9d9d9; font-size:17px; color:#424242; padding:0 10px}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .movieDetailinfo span:first-child {border-left:0; padding-left:0;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .date {font-size:17px; line-height:21px; color:#d44232; background:url(../img/page/page_icon_01.png) no-repeat; padding-left:30px;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .grayBox {padding:20px; background:#f4f5f9; margin-top:16px;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .grayBox strong {display:block; font-size:19px; line-height:19px; color:#2e2e2e; margin-bottom:10px;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .grayBox ul {margin-bottom:10px; font-size:15px; color:#5e5e5e;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .grayBox ul li {list-style:decimal; margin-left:18px;}

.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo .detailinfo span:first-child {border-left:0; padding-left:0;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo dl {font-size:0; line-height:24px;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo dl dt,
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo dl dd {font-size:18px; display:inline-block; vertical-align:middle; margin-bottom:16px;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo dl dt {color:#2e2e2e; width:100px;}
.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo dl dd {color:#5e5e5e; width:calc(100% - 100px);}
.modalBox .mbBody .mbBodyContents .moviePoparticle .desc {margin-top:30px; font-size:15px; line-height:25px; color:#424242;}

/* moviePoparticle */
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .thumb .bx-wrapper .bx-pager.bx-default-pager a
{-o-transition:all .16s cubic-bezier(.7,0,.3,1);transition:all .16s cubic-bezier(.7,0,.3,1);-webkit-transform:all .16s cubic-bezier(.7,0,.3,1);-ms-transform:all .16s cubic-bezier(.7,0,.3,1);transform:all .16s cubic-bezier(.7,0,.3,1);-webkit-transition:all .16s cubic-bezier(.7,0,.3,1);}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle {color:#5e5e5e; font-size:15px; line-height:20px;}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox {}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .thumb {width:320px; min-width:320px; height:320px; margin-right:24px; border:1px solid #efefef; position:relative;}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .thumb .bx-wrapper .bx-pager {width:auto; bottom:auto; top:0; right:0; padding:0;}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .thumb .bx-wrapper .bx-pager.bx-default-pager a {background:#999;}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .thumb .bx-wrapper .bx-pager.bx-default-pager a.active {background:#29304a; width:30px;}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .thumb ul {}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .thumb ul li {width:320px; min-width:320px; height:320px; display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center;align-items:center; -webkit-justify-content:center; -webkit-align-items:center; -ms-flex-pack:center; -ms-flex-align:center;}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .thumb ul li img {margin:0 auto;}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .equipmentInfo {}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .equipmentInfo .detailinfo {margin-bottom:20px;}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .equipmentInfo .detailinfo span {font-size:21px; color:#424242;}

.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .equipmentInfo dl {font-size:0; line-height:24px;}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .equipmentInfo dl dt,
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .equipmentInfo dl dd {font-size:18px; display:inline-block; vertical-align:middle; margin-bottom:16px;}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .equipmentInfo dl dt {color:#2e2e2e; width:100px;}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .equipmentInfo dl dd {color:#5e5e5e; width:calc(100% - 100px);}
.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .equipmentInfo dl ~ button {width:140px;}


@media (max-width:990px) {
	.modalBox { position:fixed; top:20px; left:20px; right:20px; bottom:20px; width:auto; max-height:calc(100% - 40px);}
	.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .thumb {display:none;}
	.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo {width:100%;}
	.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo dl dt,
	.modalBox .mbBody .mbBodyContents .moviePoparticle .movieBox .movieInfo dl dd {margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	/* equipmentPoparticle */
	.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox {display:block;}
	.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .thumb {margin:0 auto;}
	.modalBox .mbBody .mbBodyContents .equipmentPoparticle .equipmentBox .equipmentInfo {width:322px; margin:20px auto 0;}


}

/* --------------------------------------------------------
TOAST
----------------------------------------------------------*/

@keyframes ToastShow {0% {opacity:0; transform:translate3d(0, 100px, 0);}
  100% {opacity:1; transform:translate3d(0, 0, 0);}
}
@keyframes ToastHide {0% {opacity:1; transform:translate3d(0, 0, 0);}
 100% {opacity:0; transform:translate3d(-100px, 0, 0);}
}

.toastModal {display:flex; display:-webkit-flex; display:-ms-flexbox; position:fixed; z-index:99; left:0px; right:0px; bottom:0px; justify-content:center;-webkit-justify-content:center; -ms-flex-pack:center;}
.toastModal .toastBox {position:relative; z-index:2; width:500px;}
.toastModal .toastBox.w600 {width:600px;}
.toastModal .toastBox .toast {display:flex; display:-webkit-flex; display:-ms-flexbox; margin:4px; padding:10px 20px; border-radius:4px; background:#333; box-shadow:0 10px 10px rgba(0, 0, 0, 0.2); box-sizing:border-box;animation:ToastShow 0.3s;justify-content:space-between;align-items:center; -webkit-justify-content:space-between; -webkit-align-items:center; -ms-flex-pack:justify; -ms-flex-align:center;}
.toastModal .toastBox .toast.hide {animation:ToastHide 0.3s;}
.toastModal .toastBox .toast .text {color:#FFF;}
.toastModal .toastBox .toast .tools {}
.toastModal .toastBox .toast .tools button {color:#FFF;}


/* --------------------------------------------------------
BUTTON
----------------------------------------------------------*/
button {margin:0; padding:0; border:none; background:none; font-size:16px; cursor:pointer; font-family: 'Noto Sans KR', sans-serif; appearance:none; color:#2e2e2e; font-weight:500;}
.button span {position:relative; z-index:1;}
.button {display:inline-block; vertical-align:middle; position:relative; height:36px; padding:0 20px; margin:0px 3px; overflow:hidden; border:none; background:#fff; color:#2e2e2e; line-height:36px; cursor:pointer;}
.button:hover {}
.button:active {}
.button:disabled {border:1px solid rgba(0,0,0,0); background:rgba(0,0,0,0.08) !important; color:rgba(67, 74, 84, 0.3) !important; cursor:default;}
.button:disabled:hover {color:rgba(0,0,0,0.2);}
.button:disabled:hover:after {display:none; content:"";}

/* button img
----------------------------------*/
.btnQuestion {width:22px; height:22px; padding:0; font-size:0; background:url(../img/page/btn_question.png)#005db0 no-repeat; border-radius:50%;}
.btnPopClose {width:26px; height:26px; padding:0; font-size:0; background:url(../img/page/btn_popClose.png)#005db0 no-repeat; border-radius:50%;}

/* button color
----------------------------------*/
.button.prime {background:#00529b; color:#fff;}
.icoSearch {height:42px; padding:0 60px; font-size:20px; display:flex; align-items:center; white-space:nowrap;}
.icoSearch::before {content:''; display:block; width:23px; height:23px; background:url(../img/common/icon_sub_search.png); margin-right:4px;}

.button.boardPrime {background:#009e84; color:#fff; font-size:20px; height:auto; padding:6px 30px;}
.button.boardPrime:hover {background:#01ac8f;}
.button.boardPrime:active {background:#019179;}

.button.btnBorrow {background:#00529b; color:#fff; font-size:20px; height:78px; display:flex; align-items:center; justify-content:center;}
.button.btnBorrow::before {content:''; display:block; width:44px; height:40px; background:url(../img/page/icon_com.png)no-repeat; margin-right:4px;}
.button.btnBorrow:hover {background:#00529b;}
.button.btnBorrow:active {background:#00529b;}

.button.boardDark {background:#222222; color:#fff; font-size:20px; height:auto; padding:6px 30px;}
.button.boardDark:hover {background:#444444;}
.button.boardDark:active {background:#131313;}

.button.darkLine {background:#fff; border:1px solid #222; color:#222; height:auto; padding:6px 30px;}
.button.darkLine:hover,
.button.darkLine:active{background:#222; border:1px solid #222; color:#fff;}

.button.icoDark {background:#222222; color:#fff; font-size:16px; height:34px; line-height:34px; padding:0 16px; border-radius:20px; display:flex; align-items:center;}
.button.icoDark::before {content:''; display:block; width:24px; height:24px; background:#ddd; margin-right:4px;}
.button.icoDark.copy::before {background:url(../img/page/icon_btnCopy.png)no-repeat;}
.button.icoDark.write::before {background:url(../img/page/icon_btnWrite.png)no-repeat;}
.button.icoDark:hover {background:#444444;}
.button.icoDark:active {background:#131313;}

.button.jadeGreen {background:#00ac8f; color:#fff; font-size:16px; height:26px; line-height:26px; padding:0 30px;}
.button.jadeGreen:hover {background:#019c82;}
.button.jadeGreen:active {background:#01836d;}
/* .button.jadeGreen:disabled {background:#929292 !important; color:#fff !important;} */

.button.mblack {background:#222222; color:#fff; font-size:16px; height:26px; line-height:26px; padding:0 30px;}
.button.mblack:hover {background:#383838;}
.button.mblack:active {background:#141414;}

.button.gray {background:#929292; color:#fff; font-size:16px; height:26px; line-height:26px; padding:0 30px;}
.button.gray:hover {background:#a8a8a8;}
.button.gray:active {background:#818181;}

.button.filePlus {background:#666; color:#fff; font-size:30px; width:35px; height:35px; padding:0;}
.button.filePlus::before {display:block; content:"+"; font-size:30px; width:20px; height:20px; line-height:20px; position:absolute; top:50%; left:50%;  transform: translate(-50%, -50%);}
.button.filePlus:hover {background:#777;}
.button.filePlus:active {background:#555;}

.button.additem {display:flex; align-items:center; background:#333; color:#fff; font-size:15px; padding:2px 16px; margin-bottom:4px; height:auto; line-height:initial;}
.button.additem strong {font-size:24px; display:block; margin-right:4px;}
.button.additem:hover {background:#777;}
.button.additem:active {background:#555;}

.button.btnDelete {background:#464646; color:#fff; font-size:20px; width:24px; height:24px; line-height:24px; border-radius:50%; padding:0;}
.button.btnDelete:hover {background:#444444;}
.button.btnDelete:active {background:#131313;}

.button.btnPlay,
a.btnPlay {font-size:0px; width:32px; height:32px; line-height:0px; padding:0px; text-align:center; text-indent:-9999999px; opacity:1; background:url(../img/page/btnPlay.png) no-repeat;}
.button.btnPlay:hover,
a.btnPlay:hover {opacity:1;}
.button.btnPlay:active {}

.button.btnDownload {background:#fff; color:#005daf; font-size:16px; border:1px solid #005daf; height:auto; line-height:20px; padding:8px 12px; border-radius:4px; margin:30px auto; display:flex; align-items: center;}
.button.btnDownload::before {content:""; display:block; width:13px; min-width:13px; height:16px; background:url(../img/page/bul_download.png) no-repeat; margin:0 4px;}
.button.btnDownload:hover {background:#daeeff;}
.button.btnDownload:active {background:#c0d6e9; color:#005daf;}

/* button mini */
.button.mini {height:36px; line-height:36px; padding:0 20px; font-size:16px; }

/* fullWidth */
.button.fw {width:calc(100% - 0px);}

/* buttonWrap */
.buttonWrap {margin-top:30px;}
.buttonWrap button {margin:0 5px;}

/* button circle */
button.circle {display:inline-block; vertical-align:middle; width:30px; height:30px; overflow:hidden; border-radius:50%; color:transparent; padding:0; font-size:20px;}

/* button link anchor */
.btnALink {display:inline-block; height:28px; line-height:28px; border:1px solid #222222; padding:0 20px 0 40px; border-radius:3px; background:url(../img/page/icon_home.png)no-repeat 10px 5px;}

@media (max-width:767px) {
     
    .button.boardPrime,	
	.button.btnBorrow,
    .button.boardDark {font-size:17px;}

	
}


/* --------------------------------------------------------
PROGRESS
----------------------------------------------------------*/
.progressBox {}
.progressBox .progress {position:relative; height:4px; margin:8px 0;}
.progressBox .progress:after {display:block; width:100%; height:4px; background:#eee; content:'';}
.progressBox .progress .progressbar {display:block; position:absolute; height:4px; background:#427bfd; transition:all 0.08s ease 0s;}
.progressBox .tools {font-size:12px;}

/* --------------------------------------------------------
TABLE
----------------------------------------------------------*/

.tableWrap {}
.tableWrap table {width:100%; color:#464646; font-size:14px;}
.tableWrap table caption {display:none;}
.tableWrap table tbody {}
.tableWrap table tr th,
.tableWrap table tr td {position:relative; height:40px; padding:0 10px; overflow:hidden; border:0; text-align:left; text-overflow:ellipsis; vertical-align:middle; white-space:nowrap;}
.tableWrap table thead tr th {border-bottom:1px solid #DBDBDB; font-size:13px; font-weight:bold;}
.tableWrap table tbody tr td {border-top:1px solid #f0f0f0;}
.tableWrap table tr th.left, .tableWrap table tr td.left {text-align:left;}
.tableWrap table tr th.center, .tableWrap table tr td.center {text-align:center;}
.tableWrap table tr th.right, .tableWrap table tr td.right {text-align:right;}
.tableWrap.fixed table {table-layout:fixed;}
.tableWrap.even table tbody tr:nth-child(even) {background:#fafafa;}
.tableWrap.odd  table tbody tr:nth-child(odd) {background:#fafafa;}
.tableWrap.box table {border:1px solid #DBDBDB;}
.tableWrap.line table thead tr th, .tableWrap.line table tbody tr td {border-left:1px solid #f0f0f0;}
.tableWrap.line table thead tr th:first-child, .tableWrap.line table tbody tr td:first-child {border-left:0px;}

/* tableResponsive */
.tableResponsive.nonRespons {overflow:hidden;}
.tableResponsive.nonEllipsis {}
.tableResponsive.nonEllipsis table tr td {white-space:inherit;}
.tableResponsive {border-top:1px solid #000; border-bottom:1px solid #000;}
.tableResponsive table {width:100%; max-width:100%; color:#464646; font-size:14px; line-height:22px; table-layout:initial;}
.tableResponsive table tbody {}
.tableResponsive table tr th,
.tableResponsive table tr td {font-size:15px; padding:20px 10px; overflow:hidden; border:0; text-align:center; text-overflow:ellipsis; vertical-align:middle; white-space:nowrap; border-bottom:1px solid #ddd;}
.tableResponsive table tr th {font-size:17px; padding:16px 10px; background:#f1f2f7;}
.tableResponsive table tr td.left {text-align:left;}
.tableResponsive table tr td.leftBorder {border-left:1px solid #ddd !important;}

.tableResponsive.lineBox {}
.tableResponsive.lineBox tr th,
.tableResponsive.lineBox tr td {font-size:16px; padding:14px 10px; overflow:hidden; border:0; text-align:center; text-overflow:ellipsis; vertical-align:middle; white-space:nowrap; border-bottom:1px solid #ddd;  border-left:1px solid #ddd;}
.tableResponsive.lineBox tr th:first-child,
.tableResponsive.lineBox tr td:first-child {border-left:0;}
.tableResponsive.lineBox tr th {background:#f6f6f6; font-weight:500;}
.tableResponsive.lineBox tr td {font-weight:300;}
.tableResponsive.lineBox tr td.text_w a{white-space: normal;}
.form_group .tableResponsive.lineBox tr th, .tableResponsive.lineBox tr td{white-space: normal;}
@media (max-width:992px) {
	/* tableResponsive */
	.tableResponsive {width:100%; overflow-x:auto; overflow-y:hidden;}
	.tableResponsive.nonEllipsis table tr th {padding:16px 0px;}
}

/* --------------------------------------------------------
loading
----------------------------------------------------------*/
.loading {position:relative;}
.loading:before {position:absolute; z-index:9999; top:50%; left:50%; width:30px; height:30px; margin:-15px 0 0 -15px; border:4px solid transparent; border-color:rgba(255,255,255,0.2) #fff rgba(255,255,255,0.2) #FFF; border-radius:50%; content:""; animation:rotate-loading 1.0s linear 0s infinite normal;transform-origin:50% 50%;-webkit-animation:rotate-loading 1.0s linear 0s infinite normal; -webkit-transform-origin:50% 50%;}

.loading:after {position:absolute; z-index:9998; top:0px; left:0px; right:0px; bottom:0px; background:rgba(0,0,0,0.7); content:"";}

.loadingCircle {position:relative;}
.loadingCircle:before {position:absolute; z-index:9999; top:50%; left:50%; width:50px; height:50px; margin:-25px 0 0 -25px; border:4px solid transparent; border-radius:50%; background:url(../img/loading_spinner.png) no-repeat; content:""; animation:rotate-loading 1.0s linear 0s infinite normal;transform-origin:50% 50%;-webkit-animation:rotate-loading 1.0s linear 0s infinite normal; -webkit-transform-origin:50% 50%;}

.loadingCircle:after {position:absolute; z-index:9998; top:0px; left:0px; right:0px; bottom:0px; background:rgba(0,0,0,0.7); content:"";}

@keyframes rotate-loading {
0% {transform:rotate(0deg);-webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg);}
100% {transform:rotate(360deg);-webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
0% {transform:rotate(0deg);-webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg);}
100% {transform:rotate(360deg);-webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg);}
}

@keyframes rotate-loading {
0% {transform:rotate(0deg);-webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg);}
100% {transform:rotate(360deg);-webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
0% {transform:rotate(0deg);-webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg);}
100% {transform:rotate(360deg);-webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg);}
}