@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; box-sizing:border-box;}

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{overflow:hidden;position:absolute;width:0;height:0;font-size:0;line-height:0;text-indent:-9999px;}
caption{overflow:hidden;position:absolute;width:0;height:0;font-size:0;line-height:0;text-indent:-9999px;}
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;}

.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:#f4781f; font-size:16px; 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; font-size:15px; line-height:26px;}
.filter_blur6 {filter:blur(6px); -webkit-filter:blur(6px);}
.text_left {text-align:left !important;}
.text_right {text-align:right !important;}
.text_center {text-align:center !important;}
.fl {float:left;}
.fr {float:right;}
.clearfix:after {display:block; content:""; clear:both}
.hidden {width:0px; height:0px; line-height:0px; overflow:hidden; visibility:hidden; opacity:0; font-size:0px;}


/*color style */
.bluec {color: #023ca7 !important;}
.red { color:#ff0000 !important;}
.orange {color:#fd4513 !important;}
.green {color:#00a885 !important;}
.point {color:#cc0000 !important;}
.yellow { background:#FFFFDC !important;}
.black { color:#000 !important;}

.pad_t5 {padding-top:5px !important;}
.pad_t10 {padding-top:10px !important;}
.pad_t20 {padding-top:20px !important;}
.pad_t25 {padding-top:25px !important;}
.pad_t30 {padding-top:30px !important;}
.pad_t40 {padding-top:40px !important;}
.pad_t50 {padding-top:50px !important;}

.pad_l0 { padding-left:0px !important;}
.pad_l10 { padding-left:10px !important;}

.pad_b10 {padding-bottom:10px !important;}
.pad_b20 {padding-bottom:20px !important;}
.pad_b30 {padding-bottom:30px !important;}
.pad_b40 {padding-bottom:40px !important;}
.pad_b50 {padding-bottom:50px !important;}

.pad_a30 { padding:20px !important;}
.pad_l30 { padding-left:30px !important;}
.pad_r30 { padding-right:30px !important;}

.mar_t10 {margin-top:10px !important;}
.mar_t20 {margin-top:20px !important;}
.mar_t30 {margin-top:30px !important;}
.mar_t40 {margin-top:40px !important;}

.mar_t50 {margin-top:50px !important;}
.mar_t60 {margin-top:60px !important;}



.mar_l5 {margin-left:5px !important;}
.mar_l10 {margin-left:10px !important;}
.mar_l20 {margin-left:20px !important;}
.mar_l30 {margin-left:30px !important;}


.mar_r5 {margin-right:5px !important;}
.mar_r10 {margin-right:10px !important;}
.mar_r20 {margin-right:20px !important;}
.mar_r25 {margin-right:25px !important;}
.mar_r30 {margin-right:30px !important;}

.mar_b0 {margin-bottom:0px !important;}
.mar_b1 {margin-bottom:1px !important;}
.mar_b5 {margin-bottom:5px !important;}
.mar_b10 {margin-bottom:10px !important;}
.mar_b15 {margin-bottom:15px !important;}
.mar_b20 {margin-bottom:20px !important;}
.mar_b30 {margin-bottom:30px !important;}
.mar_b40 {margin-bottom:40px !important;}
.mar_b50 {margin-bottom:50px !important;}
.mar_b60 {margin-bottom:60px !important;}
.mar_b80 {margin-bottom:80px !important;}
.mar_b100 {margin-bottom:100px !important;}

.mar_t5 {margin-top:5px !important;}
.mar_t10 {margin-top:10px !important;}
.mar_t20 {margin-top:20px !important;}
.mar_t30 {margin-top:20px !important;}
.mar_t40 {margin-top:40px !important;}
.mar_t50 {margin-top:50px !important;}
.mar_t60 {margin-top:60px !important;}
.mar_t70 {margin-top:70px !important;}
.mar_t80 {margin-top:80px !important;}
.mar_t90 {margin-top:90px !important;}
.mar_t100 {margin-top:100px !important;}

.w10p {width:10% !important;}
.w13p {width:13% !important;}
.w15p {width:15% !important;}
.w20p {width:20% !important;}
.w30p {width:30% !important;}
.w35p {width:35% !important;}
.w40p {width:40% !important;}
.w50p {width:50% !important;}
.w90p {width:90% !important;}
.w95p {width:95% !important;}
.w100p {width:100% !important;}

@media (max-width:640px) {
	
	.w15p,
	.w20p,
	.w30p,
	.w40p,
	.w50p {width:90% !important;}

}

/* selectList */
.selectBox.active {}
.selectBox.active .selectNum {}
.selectBox.active .selectList {display:block;}
.selectBox.active .selectNum:after {transform:rotate(45deg); top:10px; }
.selectBox .selectNum {display:block; position:relative; width:100%; height:35px; border-radius:0px; color:#fff; /*text-indent:20px;*/ text-overflow:ellipsis; line-height:35px; /*white-space:nowrap;*/ overflow:hidden; }
.selectBox .selectNum:after{content:"";position:absolute; right:20px; top:15px; width:9px; height:9px; border-bottom:1px solid #fff; border-right:1px solid #fff; transform: rotate(225deg);
    -webkit-transform: rotate(225deg); -ms-transform: rotate(225deg);}
.selectBox .selectNum:focus,
.selectBox .selectNum:hover {color:#fff;}
.selectBox .selectList {display:none; position:absolute; z-index:100; left:0; bottom:30px; width:100%; border-radius:0px; background:#58575c; border-bottom:0;}
.selectBox .selectList ul {margin:10px 20px; box-sizing:border-box; position:relative; z-index:2;}
.selectBox .selectList li {display:block;}
.selectBox .selectList li a {display:block; width:100%; height:30px; line-height:30px; overflow:hidden; color:#fff; font-weight:300;  word-break:keep-all; /*text-overflow:ellipsis;  white-space:nowrap;*/}
.selectBox .selectList li a:hover {}

.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 Font
------------------------------------------------------------------ */
input, textarea, select, button ,table tr td {font-family: 'Noto Sans KR', sans-serif;}

/* ------------------------------------------------------------------
FORM INPUT
------------------------------------------------------------------ */
input[type=text],
input[type=password] {width:100%; height:35px; padding:0 10px; border:0; border:1px solid #ccc; color:#333; line-height:33px; font-size:16px; box-sizing:border-box; border-radius:0px;}
input[type=password] {}
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; outline:none; background:none; cursor:pointer; appearance:none; }

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

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

/* 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; 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; }
.opt input[type=radio]+label:before {display:inline-block; width:12px; height:12px; border:3px solid #fff; border-radius:50%; box-shadow:0px 0px 0px 2px #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 #fff; border-radius:0px; box-shadow:0px 0px 0px 2px #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 { }
}

/* addon
-------------------------------------*/
.inputWrap {display:-webkit-box; display:-ms-flexbox; display:flex;}
.inputWrap .addon {}
.inputWrap .addon span.hding {display:inline-block; color:#6e768f; padding:0 12px; border:1px solid rgba(0,0,0,0.08); line-height:34px; vertical-align:top;}
.inputWrap .addon span.hding label,
.inputWrap .addon span.hding label:before {vertical-align:top;}
.inputWrap input {display:table-cell;}

/* addon function */
.inputWrap input:focus ~ .addon span.hding,
.inputWrap input:focus ~ .addon button {}
.inputWrap input:disabled ~ .addon {background:#f8f8f8;}

/* addon last */
.inputWrap input:first-child {}
.inputWrap .addon:last-child {}
.inputWrap .addon:last-child .hding {border-left:0; border-radius:0;}
.inputWrap .addon span.i:before {font-size:20px; vertical-align:top;}
.inputWrap .addon button {margin:0; padding:0 12px; border:1px solid rgba(0,0,0,0.08); line-height:34px;}

/* label animation
-------------------------------------*/
.inputWrap.label {position:relative;}
.inputWrap.label label {display:block; position:absolute; left:6px; bottom:10px; color:#999; text-align:left; transition:0.2s; pointer-events:none;}
.inputWrap.label input {margin-top:20px; border:0px; border-bottom:1px solid #ddd; border-radius:0; background:none;}
.inputWrap.label input:focus {border-bottom:1px solid #427bfd; box-shadow:none;}
.inputWrap.label input:focus ~ label, .inputWrap.label input:valid ~ label {left:8px; bottom:40px; color:#427bfd; font-size:13px;}
.inputWrap.label input:disabled {border-bottom:1px solid #eee;}
.inputWrap.label input:disabled ~ label {color:#ddd;}


/* inputFile
-------------------------------------*/
.inputFile { font-size:0px; display:inline;}
.inputFile input {position:absolute; z-index:-1; width:0px; height:0px; overflow:hidden; opacity:0;}
.inputFile input:focus + label, .inputFile input + label:hover {}
.inputFile input + label {display:inline-block; position:relative; width:50%; padding:0; border:1px solid #ddd; background:#fff; line-height:35px; height:35px; cursor:pointer;}
.inputFile input + label span {display:block; width:40%; 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 20px; background:#2b2b2b; color:#fff;}
.inputFile input + label span,
.inputFile input + label strong {height:33px; font-size:16px; line-height:33px; font-weight:400;}
.inputFile + input { display:inline-block; margin-left:3px;}
.inputFile + input[type=image] { vertical-align:top;}

.inputFile ~ .agreement {margin:6px 0 !important;}

@media (max-width:767px) {	

    .inputFile input + label {width:80%;}
    .inputFile input + label span {width:90%;}
}



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

/* --------------------------------------------------------
FORM SELECT
----------------------------------------------------------*/
select {width:100%; height:35px; padding:0 0 0 4px; border:1px solid #d9d9d9; box-sizing:border-box; border-radius:0px;}
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);}

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



/* --------------------------------------------------------
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; outline:none; background:none;  cursor:pointer; appearance:none; color:#000; font-weight:300;}
.button span {position:relative; z-index:1;}
.button {display:inline-block; vertical-align:middle; position:relative; height:50px; line-height:50px; font-size:22px; padding:0 80px; overflow:hidden; border:none; font-weight:400; background:#fff; 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 color
----------------------------------*/
.button.prime {background:#398ede; color:#fff; font-size:18px; font-weight:500;}
.button.white {background:#fff; color:#2e2e2e; border:1px solid #cdcdcd;}
.button.whiteGray {background:#fff; color:#000; border:1px solid #ddd;}
.button.blue {background:#2866a3; color:#fff; border:1px solid #2866a3;}
.button.darkBlue {background:#29304a; color:#fff; border:1px solid #29304a;}

.button.darkLine {background:#fff; border:1px solid #2b2b2b; color:#2b2b2b;}
.button.darkLine:hover {background:#2b2b2b; border:1px solid #2b2b2b; color:#fff;}

.button.dark {background:#2b2b2b; color:#fff; border:1px solid #2b2b2b;}
.button.dark:hover {background:#fff; color:#2b2b2b; border:1px solid #2b2b2b;}
.button.darkBox {background:#2e2e2e; color:#fff; border-radius:0;}
.button.grayBg {background:#ccc; color:#2b2b2b;} 
.button.grayBg:hover {background:#2b2b2b; border:1px solid #2b2b2b; color:#ccc;}

.button.grayLine {background:#f9f9f9; border:1px solid #ccc; color:#333;} 
.button.grayLine:hover {background:#f9f9f9; border:1px solid #ccc; color:#333;}

.button.darkhBule {background:none; border:2px solid #444;}
.button.darkhBule:focus,
.button.darkhBule:hover {background:#29304a; color:#fff; border:2px solid #29304a;}

.button.success {background:#a0d468; color:#fff;}
.button.info {background:#4fc1e9; color:#fff;}
.button.warning {background:#fc6e51; color:#fff;}
.button.danger {background:#ed5565; color:#fff;}


.button.dark i { background:url(../img/common/down_ico.png) no-repeat center center; width:12px; height:11px; display:inline-block; margin-right:10px;}
.button.dark:hover i {background:url(../img/common/down_ico_hover.png) no-repeat center center; width:12px; height:11px; display:inline-block; margin-right:10px;}

/* button icon */
.button.i:before, .button.ir:before {width:24px;}

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

/* button animated */
.button.animated_x {}
.button.animated_x span {display:inline-block; position:relative; z-index:2; padding:0 12px; transition:0.2s;}
.button.animated_x:hover span {padding:0; transition:0.2s;}
.button.animated_x.i:before, .button.animated_x.ir:before {position:relative; width:0px; opacity:0; transition:0.2s;}
.button.animated_x.i:hover:before, .button.animated_x.ir:hover:before {position:relative; width:24px; opacity:1; transition:0.2s;}
.button.animated_x:disabled:hover:before {width:0; opacity:0;}
.button.animated_x:disabled span {padding:0 12px;}
.button.animated_y {}
.button.animated_y span {display:inline-block; position:relative; z-index:2; width:100%; height:100%; padding:0; transition:0.2s;}
.button.animated_y:hover span {transform:translateY(300%);-webkit-transform:translateY(300%);}
.button.animated_y.i:before, .button.animated_y.ir:before {position:absolute; top:-100%; left:0; width:100%; height:100%; opacity:0; transition:0.2s;}
.button.animated_y.i:hover:before, .button.animated_y.ir:hover:before {position:absolute; top:0; opacity:1;}
.button.animated_y:disabled:hover:before {width:0; opacity:0;}
.button.animated_y:disabled span {transform:translateY(0%);-webkit-transform:translateY(0%);}

/* button mini */
.button.mini {height:24px; line-height:22px; padding:0 10px; }
/*.button.mini:before {width:18px; font-size:14px; font-size:15px;}*/
.button.animated_x.mini span {padding:0 9px;}
.button.animated_x.mini:hover span {padding:0;}
.button.animated_x.mini:hover:before {width:18px;}
.button.animated_x.mini:disabled span {padding:0 9px;}
.button.animated_x.mini:disabled:hover:before {width:0px;}

/* button big */
.button.big {height:48px; padding:0 24px; font-size:18px; line-height:48px; }
.button.big:before {width:38px; font-size:28px;}
.button.animated_x.big span {padding:0 18px;}
.button.animated_x.big:hover span {padding:0;}
.button.animated_x.big:hover:before {width:36px;}
.button.animated_x.big:disabled span {padding:0 18px;}
.button.animated_x.big:disabled:hover:before {width:0px;}
a.big { width:240px;}

/* button 3d(solid) */
.button.mini.solid {box-shadow:inset 0 -2px 0 rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.03);}
.button.mini.solid:active {box-shadow:inset 0 0 0 rgba(0,0,0,.2), 0 0 0 rgba(0,0,0,.03); margin-top:2px; height:24px; line-height:24px;}
.button.solid {box-shadow:inset 0 -2px 0 rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.03);}
.button.solid:active {box-shadow:inset 0 0 0 rgba(0,0,0,.2), 0 0 0 rgba(0,0,0,.03); margin-top:2px; height:34px; line-height:34px;}
.button.big.solid {box-shadow:inset 0 -4px 0 rgba(0,0,0,.2), 0 4px 4px rgba(0,0,0,.03);}
.button.big.solid:active {box-shadow:inset 0 0 0 rgba(0,0,0,.2), 0 0 0 rgba(0,0,0,.03); margin-top:4px; height:44px; line-height:44px;}

/* buttonGroup */
.buttonGroup {font-size:0;}
.buttonGroup button {margin:0; border-radius:0;}
.buttonGroup button:first-child {border-bottom-left-radius:4px; border-top-left-radius:4px;}
.buttonGroup button:last-child {border-top-right-radius:4px; border-bottom-right-radius:4px;}

/* button progress */
.button .progress {position:absolute; z-index:1; top:0px; left:0px; bottom:0px; background:rgba(0,0,0,0.14); pointer-events:none;}


/*
button.circle:hover {background-position:center center !important;}
button.circle:active {background-position:center bottom !important;}
button.circle:disabled {opacity:0.5; cursor:default;}
button.circle:disabled:hover {background-position:center top !important;}
*/
/* button - circle - mapping
button.circle.btn_l_setting {width:44px; height:44px; background:url(../img/btn/btn_l_setting.png) no-repeat;}
*/
 
 

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


/* --------------------------------------------------------
multiModal
----------------------------------------------------------*/
.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.w596 {width:596px;}
.modalBox.w600 {width:600px;}
.modalBox.w706 {width:706px;}
.modalBox.w800 {width:800px;}
.modalBox.w900 {width:900px;}
.modalBox .mbHeader { height:36px; line-height:36px; background:#594b40;}
.modalBox .mbHeader h2 {color:#fff; font-size:18px; text-indent:20px;}
.modalBox .mbHeader .tools {}
.modalBox .mbHeader .tools button {font-size:25px; color:#fff; font-family:Arial, Helvetica, sans-serif; vertical-align:top; width:36px; height:36px;}
.modalBox .mbBody {overflow-y:auto; overflow-x:hidden; height:calc(100% - 40px);}
.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 {padding:20px;}
.modalBox .mbBody .mbBodyContents .article {color:#5e5e5e; font-size:15px; line-height:20px;}

.modalBox .mbBody .mbBodyContents .article .required {margin-bottom:10px;}
.modalBox .mbBody .mbBodyContents .article .idSearchBox {width:calc(100% - 0px); margin:0 0 20px;}
.modalBox .mbBody .mbBodyContents .article .idSearchBox input {width:calc(100% - 120px); margin-right:4px;}
.modalBox .mbBody .mbBodyContents .article .idSearchBox button {white-space: nowrap;}
.modalBox .mbBody .mbBodyContents .article .initId {}
.modalBox .mbBody .mbBodyContents .article .initId p {color:#000; word-break:keep-all;}
.modalBox .mbBody .mbBodyContents .article .initId .btnInit {display:inline-block; margin-left:10px; padding:0 10px; border:1px solid #b4b4b4; font-weight:500;  line-height:26px; vertical-align:top;}

@media (max-width:990px) {
	
	.modalBox { position:fixed; top:20px; left:20px; right:20px; /*bottom:20px;*/ width:auto !important; max-height:calc(100% - 40px);}	


}




/* --------------------------------------------------------
catagoryTabs
----------------------------------------------------------*/

.catagoryTabs {margin:0px 0px 50px 0px; font-size:0; position:relative; }
.catagoryTabs a {display:inline-block; vertical-align:top; text-align:center; height:90px; line-height:89px; border-top:2px solid #f4f4f4; border-left:1px solid #f4f4f4; border-right:1px solid #f4f4f4; border-bottom:1px solid #e2e4ea; font-weight:400; background:#f4f4f4; box-sizing:border-box; font-size:17px; margin:-1px 0 0 -1px; width:50%; position:relative;}
.catagoryTabs a:after {content:''; display:inline-block; position:absolute; top:34%; right:0px; width:2px; height:30px; background:#ccc;}
.catagoryTabs a.active,
.catagoryTabs a:hover {background:#fff; color:#000; border-top:2px solid #283891; border-bottom:1px solid #fff; border-left:1px solid #e2e4ea; border-right:1px solid #e2e4ea; z-index:1; font-weight:500; }
.catagoryTabs a.active:after { background:none;}
.catagoryTabs a:last-child::after {background:none;}
.catagoryTabs a.bgnone:after {background:none;}


.catagoryTabs.colum3 {margin:0px -3px 40px 1px;}
.catagoryTabs.colum3 a {width:33.3%;}

.catagoryTabs.colum4 {margin:0px -4px 40px 1px;}
.catagoryTabs.colum4 a {width:25%;}

.catagoryTabs.colum5 {margin:0px -5px 40px 1px;}
.catagoryTabs.colum5 a {width:20%;}
 


@media (max-width:990px) { 

    .catagoryTabs a {display:block; height:50px; line-height:46px; border:1px solid #e2e4ea; border-top:2px solid #f4f4f4; width:100%; margin:0px 0 0 0px;}
	.catagoryTabs a:after { background:none;}
	.catagoryTabs a.active,
	.catagoryTabs a:hover {border-bottom:1px solid #e2e4ea;}
	
	.catagoryTabs.colum3 {margin:0px 0px 30px 0px;}
	.catagoryTabs.colum3 a {width:100%;}
	
	.catagoryTabs.colum4 {margin:0px -2px 30px 1px;}
	.catagoryTabs.colum4 a {width:50%;}
	
	.catagoryTabs.colum5 {margin:0px -3px 30px 1px;}
    .catagoryTabs.colum5 a {width:33.3%;}
	
}
 
 

/* --------------------------------------------------------
basic
----------------------------------------------------------*/
.basic { margin:0px 0px 50px 0px; width:100%; border-top:2px solid #000;  border-bottom:1px solid #ddd; border-collapse:collapse; background:#fff; }
.basic th,
.basic td { padding:15px 0px; border-bottom:1px solid #ddd; text-align:center;  word-break:keep-all; vertical-align:middle;}
.basic th {text-align:center; font-weight:500;}
.basic thead th {background:#eff4f8; font-weight:500; }
.basic thead th.bgNone { background:#fff;}
.basic tbody th { }
.basic thead th.alt,
.basic tbody th.alt,
.basic td.alt {text-align:left; padding-left:15px;}
.basic tbody th.bgBlue {background:#eff4f8;}

.basic.noLine { border-top:none;}
.basic tbody.borderLine {border-top:2px solid #000;}
.pointLine { border-right:3px solid #00a8ea; border-left:3px solid #00a8ea;}
.pointtopLine { border-top:3px solid #00a8ea;}
.pointbottomLine { border-bottom:3px solid #00a8ea !important;}



@media (max-width:640px) { 

    .basic thead th.alt,
    .basic tbody th.alt,
    .basic td.alt {padding-left:0px;}
	
}
 



/* --------------------------------------------------------
type
----------------------------------------------------------*/
.type { margin:0px 0px 50px 0px; width:100%; border:1px solid #000; border-collapse:collapse; background:#fff; }
.type th,
.type td {padding:4px 0px; border-bottom:1px solid #000; border-left:1px solid #000;  text-align:center;  word-break:keep-all; vertical-align:middle;}
.type th {text-align:center; font-weight:500;}
.type thead th {background:#eff4f8; font-weight:500; padding:11px; }
.type thead th.bgNone { background:#fff;}
.type tbody th { font-weight:400; }
.type thead th.alt,
.type tbody th.alt,
.type td.alt {text-align:left; padding-left:15px;}








/* --------------------------------------------------------
list_type
----------------------------------------------------------*/
ul.list_type { list-style: none; margin:0px 0px 50px 0px; padding:0; }
ul.list_type li {margin:4px 0px;  position:relative; padding-left:10px;  word-break:keep-all; line-height:160%; }
ul.list_type li span {color:#594b40;  }
ul.list_type li:before {content:''; display:inline-block; position:absolute; left:0px; top:10px; vertical-align:middle; width:5px; height:5px; background:#594b40; border-radius:50%;}
ul.list_type li img  { vertical-align:middle; }
ul.list_type li ul { margin-top:5px; padding:0px; list-style:none; margin-bottom:12px;}
ul.list_type li ul li { margin-bottom:3px; position:relative; padding-left:10px;  word-break:keep-all; line-height:140%; }
ul.list_type li ul li:before {content:''; display:inline-block; position:absolute; left:0px; top:10px; vertical-align:middle; width:5px; height:1px; background:#594b40; border-radius:0%;}


@media (max-width:767px) {
	
	/* 테이블가로스크롤 */
.tableResponsive {width:100%; overflow-x:auto; overflow-y:hidden;} 
	
}

.sorry_page {}
.sorry_page img { width:100%; max-width:100%;}


.actionBtn1 {
	 position:relative;
	 display:block;
	 width:310px;
	 height:50px;
	 line-height:46px;
	 color:#222;
	 text-align:center;
	 font-size:17px; 
	 font-weight:600; 
	 text-decoration:none;	 
	 margin:0px auto 43px auto;
}
.actionBtn1 .hover {
	 position:absolute;
	 z-index:10;
	 top:0;
	 left:0;
	 display:block;
	 border:2px solid #222;
	 width:100%;
	 height:100%;
	transition:transform .25s ease-out;
	-webkit-transition:-webkit-transform .25s ease-out;
	-moz-transition:-moz-transform .25s ease-out;
}
.actionBtn1:hover .hover {
	transform:rotateX(180deg);
	-webkit-transform:rotateX(180deg);
	-moz-transform:rotateX(180deg);
}


@media (max-width:767px) {
      
	
	.actionBtn1 {
	 width:260px;
	 font-size:16px;}
	

}



.actionBtn2 {
	 position:relative;
	 display:block;
	 width:310px;
	 height:50px;
	 line-height:46px;
	 color:#fff;
	 text-align:center;
	 font-size:17px; 
	 font-weight:600; 
	 text-decoration:none;
	 margin:45px auto;
}
.actionBtn2 .hover {
	 position:absolute;
	 z-index:10;
	 top:0;
	 left:0;
	 display:block;
	 border:2px solid #fff;
	 width:100%;
	 height:100%;
	transition:transform .25s ease-out;
	-webkit-transition:-webkit-transform .25s ease-out;
	-moz-transition:-moz-transform .25s ease-out;
}
.actionBtn2:hover .hover {
	transform:rotateX(180deg);
	-webkit-transform:rotateX(180deg);
	-moz-transform:rotateX(180deg);
}

@media (max-width:767px) {
     
	 
	 .actionBtn2 {
	 width:260px;
	 font-size:16px;}
	 
}