@CHARSET "UTF-8";

/* 주조색 : #365dcf */
/* 중간색 : #2847a2 */
/* 진한색 : #19337d */

/* reset */
html { font-size:10px; height: 100%; } * { outline: none; -ms-interpolation-mode: bicubic; }
body { /* background-color:#f6f6fa !important; */ background-color:#f5f7f9 !important; height: 100%; font-size: 1.4rem;  }
::selection { color: #fff; color: rgba(255,255,255,0.85); background: #ea4c89; }
.overflow-hidden { height:100%; overflow:hidden; width:100%; position:fixed; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button { margin:0; padding:0; }
fieldset,img { border:0 none; }
dl,ul,ol,menu,li { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,q:before, q:after { content:''; content:none; }
input,select,textarea,button { vertical-align:middle; /* -webkit-appearance: none; */ }
button { border:0 none; background-color:transparent; cursor:pointer; outline:none; }
body,th,td,input,select,textarea,button { -webkit-text-size-adjust:none; } /* color값은 디자인가이드에 맞게사용 */
/* input[type='password']{ font-family:HelveticaNeue; } */
a { text-decoration:none; }
a:active, a:hover { text-decoration:none; }
address,caption,cite,code,dfn,em,var { font-style:normal; font-weight:normal; }
table { border-collapse:collapse; border-spacing:0; }
legend, caption, hr, .skip, .hide, .hidden { display: none; }

.placeholder { color: #bbb; }
input::placeholder { color: #bbbb; opacity: 1; }
input::-webkit-input-placeholder { color: #bbb;  }
input:-ms-input-placeholder { color: #bbb;  }
input:-mos-input-placeholder { color: #bbb; }

img { vertical-align:middle; }
.clickContent { cursor:pointer; }
.blockIm g { display:block; }
.fullImg { display:block; width:100%; }
.maxImg { display:block; width:100%; height:100%; }
.coreColor { color:#365dcf; }
.orangeText { color:#eb6100; }
.grayText { color:#989da3; }
.warningText { padding:1.5rem 0.5rem; font-size:1.4rem; color:#555; }
.fullWidth { display: block; width: 100%; }
.alignLeft { text-align: left; } .alignRight { text-align: right; } .alignCenter { text-align: center; }

*, *:after, *:before { 
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; /* -webkit-transition: all 0.5s linear; transition: all 0.5s linear; */
	-webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: grayscale; font-smooth: always; 
}

/* ------ write ------ */

input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
textarea,
select {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:transparent;
  box-shadow:none;
  border:1px solid #d1d1d1;
  line-height:2rem;
  padding: 1rem 1rem;
  background:#fff;
  border-radius:0.3rem;
  max-width:100%;
}

select { 
	padding-right: 4rem; 
	background-image: url("/style/img/common/icon/select_arrow_d.png");
	background-size: 2rem; background-repeat: no-repeat; background-position: right center;
}

input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
textarea:focus,
select:focus {
  border:1px solid #365dcf;
  outline:0;
  transition:all 0.2s ease;
}
select:focus { background-image: url("/style/img/common/icon/select_arrow_u.png"); }

input::-ms-input-placeholder { color:#aaa; } /* ie10~ */
input::-webkit-input-placeholder { color:#aaa; } /* webkit */
input::-moz-placeholder { color:#aaa; } /* Firefox */
input::placeholder { color:#aaa; }

textarea::-ms-input-placeholder { color:#aaa; }
textarea::-webkit-input-placeholder { color:#aaa; }
textarea::-moz-placeholder { color:#aaa; } 
textarea::placeholder { color:#aaa; }

.fileInput { overflow:hidden; }
.fileInput label {
    position:relative;
    cursor:pointer;
    display:block;
    float:right;
    vertical-align:middle;
    overflow:hidden;
    width:100px;
    height:30px;
    background:#777;
    color:#fff;
    text-align:center;
    line-height:30px;
}
.fileInput label input {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}
.fileInput input[type=text] {
    vertical-align:middle;
    display:block;
    width:calc(100% - 100px);
    height:30px;
    line-height:30px;
    float:left;
}

.searchInput { position: relative; display: inline-block; }
.searchInput input { padding-right: 4rem; }
.searchBtn { position: absolute; right: 0; font-size: 0; width: 4rem;  padding: 0.9rem; }
.searchBtn:before { font-size: 1.7rem; height: 2rem; line-height: 2rem; }


/* ------ cut-text ------ */
.cutText { display:block; overflow:hidden; width:100%; text-overflow:ellipsis; white-space:nowrap; }


/* ------ customSelect ------ */

.customSelect { font-size: 1.3rem; position: relative; width: 200px; border: 1px solid #bbb; z-index: 1; border-radius: 0.2rem; } 
.customSelect:before { content: ""; position: absolute; top: 50%; right: 15px; width: 0; height: 0; margin-top: -2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #979fa6; } 
.customSelect label { position: absolute; top: 0px; left: 5px; padding: 1rem; color: #555; z-index: -1; font-weight: 400; margin: 0; } 
.customSelect select { width: 100%; height: auto; font-family: inherit; padding: 1rem; border: 0; opacity: 0; filter:alpha(opacity=0); -webkit-appearance: none; -moz-appearance: none; appearance: none; }


/* ------ object-fit ------ */

.imgContainer-fit { /* width:500px; height:500px; */ width:100%; padding-bottom:100%; position:relative; display:block ;}
.imgContainer-fit img { width:100%; height:100%; -o-object-fit:cover; object-fit:cover; position:absolute; left: 0; top: 0; }
.customObject-fit { position:relative; background-size:cover; background-position:center center; }
.customObject-fit img { opacity:0; }

.imgContainer-fit.fit-contain img { width:100%; height:100%; -o-object-fit:contain; object-fit:contain; position:absolute; }
.customObject-fit.fit-contain { position:relative; background-size:contain; background-position:center center; }


/* ------ basicBtn ------ */

a, button{ outline: 0; outline: none; }
a:focus, button:focus{ outline: 0; outline: none; }

.basicBtn {
	color:#fff; border:1px solid #19337d; background-color:#365dcf;
	display:block; width:100%; cursor:pointer; padding: 0px 20px;
	text-align:center; font-weight:normal; line-height:4rem; text-decoration:none; /* text-shadow:0px 1px 0px #528ecc; */	
	border-radius:0.3rem;
}
.basicBtn:hover { background-color:#2847a2; color:#fff; text-decoration: none; }
.basicBtn:active { position:relative; top:1px; }


/* ------ lineBtn ------ */

.lineBtn, .btn.lineBtn {
	color:#333; border:1px solid #bbbfc6;
	display:block; width:100%; cursor:pointer; padding: 0px 20px;
	text-align:center; font-weight:normal; line-height:4rem; text-decoration:none; /* text-shadow:0px 1px 0px #528ecc; */	
	border-radius:0.3rem;
}
.lineBtn:hover, .btn.lineBtn:hover { background-color: #ebeff5; color: #333; text-decoration: none; }
.lineBtn:active, .btn.lineBtn:active { position:relative; top:1px; }


/* ------ effectBtn ------ */

.effectBtn { position:relative; z-index:1; text-align:center; cursor:pointer; line-height:4rem; overflow:hidden; }
.effectBtn:before, .effectBtn span { -webkit-transition:-webkit-transform 0.3s;  transition:transform 0.3s; -webkit-transition-timing-function:cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function:cubic-bezier(0.75, 0, 0.125, 1); }
.effectBtn span { display:block; }
.effectBtn:before { color:#fff; background-color:#f84336; content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%; -webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0); }
.effectBtn:hover::before { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); }
.effectBtn:hover > span { -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0); }


/* ------ slopeBtn ------ */

.slopeBtn {
	color:#ffffff; border:1px solid #19337d; background-color:#365dcf;
	display:block; width:100%; cursor:pointer;
	text-align:center; font-weight:normal; line-height:4rem; text-decoration:none; /* text-shadow:0px 1px 0px #528ecc; */
	-moz-box-shadow:0px 3px 0px 0px #19337d; -webkit-box-shadow:0px 3px 0px 0px #19337d; box-shadow:0px 3px 0px 0px #19337d;	
	-moz-border-radius:0.3rem; -webkit-border-radius:0.3rem; border-radius:0.3rem;
}
.slopeBtn:hover { background-color:#2847a2; }
.slopeBtn:active {
	position:relative; top:0.3rem;
	-moz-box-shadow:0px 0px 0px 0px #1564ad;
	-webkit-box-shadow:0px 0px 0px 0px #1564ad;
	box-shadow:0px 0px 0px 0px #1564ad;
}


/* ------ radiusBtn ------ */

.radiusBtn { -moz-border-radius:15rem; -webkit-border-radius:15rem; border-radius:15rem; }



/* ------ swith checkBox ------ */

.switch { width:4.2rem; height:2.4rem; border-radius:4rem; border:1px solid #e4e3eb; position:relative; }
.switch input { top:0; right:0; bottom:0; left:0; opacity:0; z-index:100; position:absolute; width:100%; height:100%; cursor:pointer; margin: 0; }
.switch span { position:relative; display:block; margin:0; padding:0; width:100%; height:100%; background-color:#a5a39d; border-radius:4rem; box-shadow:inset 0 2px 3px 1px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.5); }
.switch span i { display:block; height:100%; width:2.2rem; border-radius:inherit; background:silver; position:absolute; z-index:2; left:0; top:0; border:1px solid #e4e3eb; background: #fff; }
.switch input:checked ~ span { background-color:#365dcf; }
.switch input:checked ~ span i { right:0; left:inherit; }

.checkBtn-line { overflow:hidden; line-height:2.4rem; }
.checkBtn-line .switch, .checkBtn-line .checkBtn p { display:inline-block; font-size:1.3rem; float:left; margin-right:0.7rem; }
.checkBtn-line button { font-size:1.2rem; }



/* ------ accordion ------ */

.accordion-panel { padding:0 0.5rem; background-color:white; max-height:0; overflow:hidden; transition:max-height 0.2s ease-out; }

.accordion { position:relative; padding-right:3rem; display:block; }
.accordion:after { content:'\002B'; color:#777; font-weight:bold; width: 2.4rem; font-size:2rem; text-align:center; position:absolute; right:0rem; top:50%; transform:translateY(-50%); }
.accordion.active:after { content:"\2212"; }



/* ------ burgerBtn ------ */

/* #burgerBtn{position:fixed; top:22px; left:30px; z-index:200;} */
#burgerBtn .inner { position:relative; z-index:200; cursor:pointer; }
#burgerBtn .inner .bt { position:relative; width:22px; height:16px; margin:auto; }
#burgerBtn .inner .bt:before { content:"";  display:block;  position:absolute;  height:2px; width:2px; background:#000; left:-5px; top:50%; -webkit-transform:translateX(0px); -ms-transform:translateX(0px); transform:translateX(0px); opacity:0; -webkit-transition: .5s; transition: .5s; }

#burgerBtn .inner span { display: block; position: absolute; width: 100%; height: 2px; background: #000; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s; transition: .25s; }
#burgerBtn .inner span:nth-child(1) { top: 0px; }
#burgerBtn .inner span:nth-child(2), #burgerBtn .inner span:nth-child(3) { top:7px; }
#burgerBtn .inner span:nth-child(4) { top:14px; }
#burgerBtn .inner span:before { content: ""; display: block; position: absolute; height: 2px; width: 2px; background: #000; left: -5px; top: 0px; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out; }

#burgerBtn .inner.open .bt:before { opacity: 1; -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); }
#burgerBtn .inner.open span:nth-child(1), #burgerBtn .inner.open span:nth-child(4) { top: 8px; width: 0; left: 13px; opacity: 0; }
#burgerBtn .inner.open span:before { opacity: 0;}
#burgerBtn .inner.open span:nth-child(2) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
#burgerBtn .inner.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }




/* ------ float ------ */

.floatGroup:after { content: ''; display:block; clear: both; }
.floatLeft { float: left; }
.floatRight { float: right; }




/* ------ lineBlock-group ------ */

.lineBlock-group { font-size: 0; }
.lineBlock-group ul.center { text-align: center; }
.lineBlock-group ul.right { text-align: right; }
.lineBlock-group ul.left { text-align: left; }
.lineBlock-group ul li { display: inline-block; font-size: 1.4rem; }
.lineBlock-group ul li + li { margin-left: 0.8rem; }


/* ------ dashboard project scroll ------ */

#projectListDetail .mCSB_dragger_bar {
   background-color: #ececec !important; /* color of the dragger bar */
}
#projectListDetail .mCSB_scrollTools .mCSB_draggerRail {
   background-color: #888888 !important; /* color of the rail */
}
#projectListDetail{
	overflow-y : scroll;
	height: 100%;
	padding-bottom: 64px;
}