@UTF-8;

.no-js, .js { opacity: 0; }
label { margin-bottom: 0; }


/* login */
.mContainer.lContainer { top: 0; padding-left:0; min-width: unset; }
.login-wrap { width: 470px; max-width: 95%; padding:30px 10px 30px; margin: auto;}
.lLogo { width: 150px; margin: auto; padding-right: 8px; }
.lTitle { text-align: center; font-size: 2.1rem; padding: 24px 0 40px; font-weight: 600; color: #365dcf; }
.orLine { position: relative; margin: 32px 0 40px; }
.orLine span { display: block; color:#aaa; margin: auto; width: 50px; text-align: center; background-color: #f5f7f9; }
.orLine:before { content: ''; position: absolute; top: 50%; height: 1px; width: 100%; border-top: 1px dashed #ccc; z-index: -1;  }

.loginInput { padding-bottom: 1rem;  }
.loginInput input{ padding: 1.3rem 1rem; }
.loginInput li + li { margin-top: 1.5rem; }

.loginWarning { color: #ff0000; font-size: 1.2rem; display: block; }
.loginWarning i { font-size: 1.3rem; position: relative; top: 1px; }
.login-wrap .aniBtn { margin-top: 1rem; }
.lineBtn.login-lineBtn { color: #888; }

.findChecking { color: #3d60ce; font-size: 1.2rem; display: block; }
.findChecking i { font-size: 1.3rem; position: relative; top: 1px; }


.loginImg-wrap { visibility:hidden;  opacity:0; position: fixed; left: 0; top:0; bottom:0; height: 100%; width: 400px; }
.loginImg { height: 100%; }

@media (min-height: 200px), screen and (orientation: portrait) {
	.login-wrap { position: absolute; left: 50%; top: 47%; transform:translate(-50%, -50%);}
} 

@media (min-width: 1000px) {
	.mContainer.lContainer { top: 0; padding-left: 400px; min-width: unset; }
	.login-wrap { margin-left:200px; }
	.loginImg-wrap { visibility: visible; opacity:1; transition: all .5s ease; }
}


.id-pw-Search { margin-top: 15px; }
.id-pw-Search a { font-size: 1.3rem; }
.login-search-bar { display: inline-block; font-size: 1rem; margin: 0 10px; color: #bbb; position: relative; top: -2px; }


.mContainer.jContainer { padding: 0; }
.insertContainer-wrap.insertContainer-join { margin: 7rem auto 2rem; }


/* ---- agree ---- */

.insertContainer-wrap.signupAgree{ padding: 0;  margin: 0rem auto 0rem; }
/* .signupAgree{border:2px solid #e8eaed; margin-top:20px; -moz-border-radius:0.8rem; -webkit-border-radius:0.8rem; border-radius:0.8rem; background-color:#fff;} */
.checkBtn-line{padding:0.5rem 2.6rem; border-top:1px dashed #ededed; color:#555; position:relative;}
.checkBtn-line.checkBtn-first{border-top:0;}
.checkBtn-line button{position:absolute; right:2.5rem; top:1.2rem;}
.checkBtn-line .c-check { padding: 0px 40px 0px 25px;; }
.checkBtn-line .c-check i { top: 5px; }
.checkBtn-line .accordion-panel { padding: 0; }
.checkBtn-line .accordion-panel .accordion-panel-inner { padding: 5px 0 10px; }
.checkBtn-line .accordion-panel p { padding: 10px; margin: 0; background-color: #fcfcfc; border: 1px solid #e5e5e5; font-size: 1.2rem; line-height: 170%; }
.checkBtn{overflow:hidden; padding:0.7rem 0;}

.agreeText{padding:1rem; display:none;}
.agreeText p{padding:1rem; background:#f9fafb; border:1px solid #e4e3eb; font-size:1.3rem; font-weight:300;}

.insertBtn.joinBtn { margin:0 auto 7rem; }


.famousSaying { color: #fff; position: absolute; left: 0;  top: 50%; transform:translateY(-50%); z-index: 10; padding: 20px 20px 20px 20px;}
.famousSaying p { padding: 30px; }
.famousSaying b { font-size: 3.3rem;  line-height: 4rem; opacity: 0.8;}
.famousSaying span { font-size: 1.4rem; display: block; margin-top: 15px; opacity: 0.6; word-break: keep-all; }
.famousSaying em { font-size: 60px; opacity: 0.4;}
.famousSaying-s { position: absolute; top:8px; left: 25px; }
.famousSaying-e { position: absolute; bottom:0; right: 25px; }


#editorTodo, #editorDocu { display: none; }
.changeCategory { display: none; }
.container { width : 600px ;}

.ui-datepicker-year, .ui-datepicker-month { padding: 3px 3px 3px 8px; }


/* header */
header { position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12); z-index: 30; }
header:after { content: ''; display:block; clear: both; }

header #logo {  float: left; padding: 2.2rem 2rem; position: relative; }
header #logo a { display: block; width: 12.6rem; height: 2.4rem; }
header .headerSub-title { display: block; position: absolute; right: -68px; bottom: 18px; color: #999; font-size: 1.7rem; font-weight: 500;  padding-left: 10px; }
header .headerSub-title:before { content:""; width: 1px; height: 15px; background-color: #ccc; position: absolute; left: 0; top: 6px;   }

header #burgerBtn { display:block; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); }

header .headerInner { display: none; }
header.openHeader .headerInner { display: block; }

header nav ul li { position: relative; }
header nav ul li.active:after { content: ''; position: absolute; left: 0px; bottom: 0; width: 4px; height: 100%; border-radius: 0px 3px 3px 0; background: #365dcf; }

header nav ul li a { display: block; position: relative; font-size: 1.4rem; line-height: 2rem; padding: 1.4rem 2rem 1.4rem; cursor: pointer; color: #9199a4; }
header nav ul li a:hover { text-decoration: none; }

header nav ul.compassNav li a:before { 
	content: ''; display: block; float:left; width: 2rem; height: 2rem; margin-right: 1.2rem;
	background-image: url("/style/img/common/header/nav_icon_compass.png");
	background-size: auto 4rem;
}
	
header nav ul.compassNav li.compassIcon a:before { background-position-x: 0rem;  }
header nav ul.compassNav li.projectIcon a:before { background-position-x: -2rem;  }
header nav ul.compassNav li.calenderIcon a:before { background-position-x: -4rem; }
header nav ul.compassNav li.startupIcon a:before { background-position-x: -6rem; }
header nav ul.compassNav li.settingIcon a:before { background-position-x: -8rem; }

header nav ul li a:before { 
	content: ''; display: block; float:left; width: 2rem; height: 2rem; margin-right: 1.2rem;
	background-image: url("/style/img/common/header/nav_icon.png");
	background-size: auto 4rem;
}
	
header nav ul li.dashboardIcon a:before { background-position-x: 0rem;  }
header nav ul li.boardIcon a:before { background-position-x: -12rem;  }
header nav ul li.calenderIcon a:before { background-position-x: -8rem; }
header nav ul li.teamtalkIcon a:before { background-position-x: -4rem; }
header nav ul li.todoIcon a:before { background-position-x: -6rem; }
header nav ul li.documentIcon a:before { background-position-x: -10rem; }
header nav ul li.searchIcon a:before { background-position-x: -14rem; }
	
header nav ul li.active a { color: #fff; }
header nav ul li.active a:before { background-position-y: -2rem; }


header #gnb .gnbBox-Container .gnbBox { overflow: hidden; }
header #gnb .gnbBox-Container .gnbBox .previewImg { float: left; width: 3.2rem; height: 3.2rem; padding:0; border-radius: 40%; overflow: hidden; border: 1px solid #dfe1e8; }
header #gnb .gnbBox-Container .gnbBox .gnbName { float: left; font-size: 1.3rem; line-height: 3.2rem; margin-left: 1rem; }

header #gnb .gnbBox-Container .gnbDetail .mypageBtn { margin-top: 5px; }
header #gnb .gnbBox-Container .gnbDetail .gnbDetail-arrow { display: none; }
header #gnb .gnbBox-Container .gnbDetail i { font-size: 1.6rem;  position: relative; top: 2px; margin-right: 0.4rem; color: #8f99a2; }

@media (max-width: 999px) {
	header .headerInner { position: absolute; top: 100%; left: 0; background-color: #3e454c; width: 100%; box-shadow: 0 1px 8px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.15); z-index: 100; }
	header nav ul { margin-bottom: 0; }
	header nav ul li + li { border-top: 1px solid #353b40; }
	header nav ul li a:hover { color: #fff; }
	header #gnb { border-top: 7px solid #353b40; padding: 2rem 2rem 2.5rem; color: #fff; }
	header #gnb .gnbDetail { display: block !important; }
	header #gnb .gnbDetail dt span { display: none; }
	header #gnb .gnbDetail dt { border-top: 1px dashed #66696c; padding-bottom: 0.8rem; margin-top: 1rem; }
	header #gnb .gnbDetail dd { font-size: 1.3rem; padding: 0 0.3rem; font-weight: normal; color: #a8acb1; }
	
	header #gnb .gnbDetail .mypageBtn a { text-decoration: underline; color: #f19149; }
	header #gnb .gnbDetail .mypageBtn a:hover { color: #f19149; }
	
	header #gnb .headerLogout { margin-top: 2rem; }
	header #gnb .headerLogout a { display: block; text-align: center; color: #9199a4; border: 1px solid #9199a4; border-radius: 5px; line-height: 4rem; }
	header #gnb .headerLogout a:hover { text-decoration: none; }	
}/* @media (max-width: 1000px)*/




@media (min-width: 1000px) {

	header .headerInner { display: block; }
	header #burgerBtn { display: none; }
		
	header nav { float: left; margin-left: 8.5rem; }
	header nav ul { overflow: hidden; margin: 0;}
	header nav ul li { float:left; }
	header nav ul li:after { display: none; }
	header nav ul li + li { margin-left: 2rem; }
	
	header nav ul li a { padding: 2.4rem 1rem 2.4rem 0.6rem; font-size: 1.5rem; color: #5f6368 }
	header nav ul li.active a { color: #365dcf; }
	header nav ul li a:before { margin-right: 0.8rem; }
	header nav ul li a:after {
		content: ''; position: absolute; left: 50%; bottom: 0;
		width: 0; height: 4px; border-radius: 3px 3px 0 0;	
		transform: translateX(-50%); transition: 0.3s ease-in-out;
		background: #365dcf; /* Old browsers */
		background: -moz-linear-gradient(left, #365dcf 0%, #6c36cf 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  #365dcf 0%, #6c36cf 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  #365dcf 0%, #6c36cf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */		
	}
	header nav ul li a:hover::after,
	header nav ul li.active a:after { width: 100%; }
	
	header #gnb { position: absolute; right: 0rem; top: 50%; transform: translateY(-50%); }
	header #gnb ul { overflow: hidden; margin: 0; }
	header #gnb ul li { float:left; line-height: 3.4rem; }
	header #gnb ul li a { display: block;  }
	
	header #gnb .gnbBox-Container { position: relative; height: 6.8rem; }
	header #gnb .gnbBox-Container .gnbBox { border-left: 1px solid #e5e5ee; padding: 1.8rem 3.8rem 1.8rem 1.8rem; cursor: pointer; }	
	header #gnb .gnbBox:before {
		content:''; border-color: transparent;
	    border-top-color: #ccc; border-style: dashed dashed solid; border-width: 5px 5px 5px; 
	    position: absolute; right: 1.8rem; top: 3.2rem; z-index: 1; height: 0; width: 0;
	}
	header #gnb .gnbBox-Container .gnbDetail { position: absolute; top: calc(100% + 12px); right: 1rem; display: none; width: 220px; background-color: #fff; box-shadow: 0 1px 5px 0 rgba(0,0,0,.12); border-radius: 4px; }
	header #gnb .gnbBox-Container .gnbDetail dl { padding: 2rem; margin-bottom: 0; }
	header #gnb .gnbBox-Container .gnbDetail dt { font-size: 1.6rem; margin-bottom: 1rem}
	header #gnb .gnbBox-Container .gnbDetail dd { margin-top: 0.6rem; font-size: 1.4rem; }
	header #gnb .gnbBox-Container .gnbDetail dd a { text-decoration: none; font-size: 1.2rem;}
	header #gnb .gnbBox-Container .gnbDetail dd a:hover { text-decoration: underline; }
	
	header #gnb .gnbBox-Container .gnbDetail .gnbDetail-arrow { display:block; overflow: hidden; width: 18px; height: 8px;  position: absolute; right: 4rem; top: -8px; }
	header #gnb .gnbBox-Container .gnbDetail .gnbDetail-arrow:before {
		content:''; display: block; width:12px; height:12px;
	    position: absolute; right: 2px; top: 3px; z-index: 1;
	    background:#fff; box-shadow: 0 1px 5px 0 rgba(0,0,0,.12);
	    -ms-transform: rotate(45deg); /* IE 9 */
    	-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
		transform: rotate(45deg);
	}
	
	header #gnb .gnbDetail .mypageBtn a { text-decoration: underline; color: #365dcf; }
	header #gnb .headerLogout a { border-top: 1px solid #ebebeb; background-color: #f8f8f8; display: block; width: 100%; text-align: center; color: #666; line-height: 4rem; font-size: 1.3rem; }

	/* .heaerBg { background-color: #3d60ce;  position: absolute; left:650px; right: 0; height: 100%; z-index: -1; } */
	
	.heaerBg::before {
    content: '';
    width: 60px;
    height: 104%;
    position: absolute;
    left: -30px;
    top: -4%;
    background-color: #3d60ce;
    /* border-right: 1px solid #e7e8ef; */
    -webkit-transform: skew(-30deg);
    -moz-transform: skew(-30deg);
    transform: skew(-30deg);
}
	
}/* @media (min-width: 1000px)*/




.compassHeader-wrap { height: 22.8rem; }
.compassHeader-wrap.shrink { height: 16.8rem; }

#lnb.compassLnb { overflow-y: auto; }
#lnb.compassLnb, #right.compassRight { top: 22.8rem; min-height: 670px; }

.classification-wrap {
    position: fixed;
    top: 6.8rem;
    left: 0;
    width: 100%;
    background-image: url("/style/custom/img/compass_bg.jpg"); background-size: cover; background-position: center center;  /* background-attachment: fixed; */
    color:#fff;
    z-index:10;
    height: 16rem;
    overflow: hidden;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
    text-align:center;

}

.compassHeader-wrap.shrink .classification-wrap {
    height: 10rem;
}



.classification-wrap .classification { position: absolute; top: 50%; transform:translateY(-50%); left: 0; width: 100%; padding: 0 2rem; }

.classification-wrap .classification > .inner { max-width: 1190px; margin: auto; text-align: left; }
.classification-wrap .classification select{
	font-size: 1.5rem;
    color: #555;
    /* background-color: rgba(0,0,0,0.4);
    border: 1px solid rgba(0,0,0,0.6); */
    width: 400px;
    max-width: 100%;
}

.compassContainer { min-width: 1190px; }
.compassContainer .maxContainer { max-width: 1190px; margin: auto; }



/* navBar */

.navBar { position: fixed; left: 0; top: 6.8rem; bottom: 0; width: 250px; height: calc( 100% - 6.8rem ); /* overflow: auto; */overflow : hidden; overflow-x: hidden; background-color: #fff; border-right: 1px solid #d6d9e6; z-index: 1; }
.navBar .projectList-wrap { padding: 0; background-color: #333; color: #fff; }
.navBar .nav-wrap { height: 100%; }
.navBar .projectList-wrap ul { margin: 0; }
.projecTitle { position: relative; height: 63px; padding: 0 15px 0 70px; }
.projecTitle span { line-height: 63px; }
.p-listBtn { position: absolute; top:0; color: #999;  display:block; padding: 1.2rem 0 0.9rem; width: 58px; height: 63px; }
.p-listBtn:before { font-size: 2.2rem; line-height: 2.2rem; }
.p-listBtn em { display: block; font-size: 1.2rem; margin-top: 0.6rem; line-height: 1.2rem;}
.p-openBtn { left: 0; border-right: 1px solid #777; font-size: 0; }
.p-openBtn:hover { color: #fff; }
.p-closeBtn { right: 0; border-left: 1px solid #d8d8d8; }
.p-closeBtn:hover { color: #000; }

#projectList { 
	position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #333; z-index: 10;
    -webkit-transform: translateX(250px); -moz-transform: translateX(250px);
    -ms-transform: translateX(250px); -o-transform: translateX(250px);
    transform: translateX(250px);
}
#projectList .projecTitle { background-color: #fff; padding: 0 70px 0 15px; }
#projectList ul { padding: 18px; }
#projectList ul li { color: #fff; padding-bottom: 1.2rem; cursor: pointer; }
#projectList ul li + li { border-top: 1px solid #555; padding-top: 1.2rem; }
#projectList ul li dl { margin: 0; }
#projectList ul li dt { font-weight: normal; font-size: 1.4rem; margin-bottom: 0.2rem; }
#projectList ul li dd { color: #aaa; font-size: 1.3rem; }
#projectList ul li dd span { color: #ea4c89; }

#projectList, .projectList-wrap, .nav-wrap { 
	-webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}
.projectOpen .projectList-wrap, .projectOpen .nav-wrap {
	-webkit-transform: translateX(-100%); -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);  -o-transform: translateX(-100%);
    transform: translateX(-100%);
}
.projectOpen #projectList {
	-webkit-transform: translateX(0px); -moz-transform: translateX(0px);
    -ms-transform: translateX(0px); -o-transform: translateX(0px);
    transform: translateX(0px);
}


.navBar .nav-wrap { padding: 0; }
.aniBtn-wrap { border-bottom: 1px solid #e5e5e5; padding: 18px; /* margin-bottom: 2rem; */ }

.aniBtn {
	height: 4.7rem; border: 0.1rem solid #365dcf;
	text-align: center; cursor: pointer;
	position: relative; overflow: hidden;
	border-radius: 0.4rem;
	background: #365dcf; /* Old browsers */
	background: -moz-linear-gradient(left, #365dcf 0%, #6c36cf 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #365dcf 0%, #6c36cf 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #365dcf 0%, #6c36cf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.aniBtn a, .aniBtn button { font-size:1.5rem; line-height:4.5rem; display:block; width: 100%; color:#fff; text-decoration:none; transition:all .5s ease; z-index:2; position:relative; }
.aniBtn:before { background: #243f90; content: ''; width:100%; height:100%; left:-100%;  position:absolute; transition:all .5s ease; z-index:1; }
.aniBtn:hover::before { left:0; }
.aniBtn:hover a , .aniBtn:hover button { color:#fff; text-decoration: none; }
.aniBtn a:hover, .aniBtn button:hover,
.aniBtn a:focus, .aniBtn button:focus { color:#fff; text-decoration: none; }


.navBar .categoryContainer { }

#categoryBasic { border-bottom: 1px solid #e5e5e5; padding: 12px 18px; }
#categoryList { padding: 16px 18px 0; }
#categoryList dt { position: relative; padding: 5px 0 8px; }
#categoryList dt .c-setting, .user-setting { position: absolute; right: 0; top:0; font-size: 0; border: 1px solid #e5e5e5; border-radius: 0.4rem; background-color: #fff; }
.user-setting { right: 10px; top:inherit; bottom: 10px; }
#categoryList dt .c-setting a, #categoryList dt .c-setting button, .user-setting a, .user-setting button { line-height: 2.8rem; height: 2.8rem; width: 2.8rem; display: block; float: left; text-align: center; }
#categoryList dt .c-setting button, .user-setting button { border-left: 1px solid #e5e5e5; }
#categoryList dt .c-setting a:before, #categoryList dt .c-setting button:before, .user-setting a:before, .user-setting button:before { font-size: 1.4rem; color: #555;} 
#categoryList dt .c-setting a:hover, #categoryList dt .c-setting a:focus, .user-setting a:hover, .user-setting a:focus { text-decoration: none; }
#categoryList dt .c-setting a:hover:before, #categoryList dt .c-setting button:hover:before, .user-setting a:hover:before, .user-setting button:hover:before { color: #365dcf; }

.lnb-calendars #categoryBasic { border-bottom: 0; padding: 1px 0 0; }
.lnb-calendars #categoryBasic .lnb-calendars-item { padding-top: 0; padding-bottom: 0; }
.lnb-calendars #categoryList { border-top: 1px solid #e5e5e5; margin-top: 12px; }
.lnb-calendars #categoryList .lnb-calendars-item { padding-left: 0; padding-right: 0; position: relative;}

.lnb-calendars #categoryList .lnb-calendars-item label{ display: block; overflow: hidden;  width: 83%; text-overflow: ellipsis; white-space: nowrap; }
/* .compassLnb .lnb-calendars #categoryList .lnb-calendars-item label { padding-left: 22px; }
.compassLnb .lnb-calendars #categoryList .lnb-calendars-item label input[type='checkbox'].tui-full-calendar-checkbox-round + span {
	position: absolute; left: 0; top:9px;
}
 */
/* checkbox */

.c-check, .c-checkBox { padding: 5px 40px 5px 25px; position: relative; cursor: pointer; }
.c-check i { 
	display: block; width: 16px; padding: 2px; border-radius: 20%;
	position: absolute; left: 0; top: 8px;
    margin-right: 6px;  background: #365dcf;
    background: -moz-linear-gradient(left, #365dcf 0%, #6c36cf 100%);
    background: -webkit-linear-gradient(left, #365dcf 0%, #6c36cf 100%);
    background: linear-gradient(to right, #365dcf 0%, #6c36cf 100%);
}
.c-check i:before { content: ''; display: block; width: 12px; padding-bottom: 100%; background-color: #fff; border-radius: 10%; }
.c-check.c-teamtalk i { background: #00a899; }
input.c-checkBox { display: none; }
.c-active.c-check i:before, input.c-checkBox:checked ~ label i:before { background-image: url("/style/img/common/icon/check.png"); background-size: 100% 100%; background-color: inherit; }

.c-checkSub i { width: 14px; background: #5b58ed;  }
.c-checkSub i:before { width: 10px; }

.c-checkBlock i{ background: #aaa; }
.c-checkBlock i:after{ content: ''; position: absolute; background-color:#ccc; width: 8px; height: 3px; left: 4px; top: 7px; }

/* ridio */

.c-radio { padding: 5px 40px 5px 0px; position: relative; cursor: pointer; }
.c-radio i { 
    display: inline-block; cursor: pointer; width: 14px; height: 14px; line-height: 14px; position: relative; top: -1.5px;
    padding: 2px; vertical-align: middle; margin-right: 8px; border-radius: 8px; 
	/* border-color: #9e5fff; */
    background-color: #9e5fff;
}
.c-radio i:before { content: ''; display: block; width: 10px; padding-bottom: 100%; background-color: #fff; border-radius: 50%; }
.c-radio.c-teamtalk i { background: #00a899; }
input.c-radioBtn { display: none; }
.c-active.c-radio i:before, input.c-radioBtn:checked + label i:before { background-size: 100% 100%; background-color: inherit; }

.settingLine { padding-top: 20px; min-height: 42px; }
.settingLine:after { content: ''; display:block; clear: both; }
.settingLine-todo { padding-top: 20px;  border-top: 1px solid #ddd;  margin-top: 15px; } 

.settingLine .customSelect { float: left; }

.changeCategory { position: absolute; right: 1px; top: 8px; font-size: 0; }
.changeCategory span, .changeCategory a { display: inline-block; width: 15px; height: 15px; line-height: 15px; margin-left: 0.5rem; }
.changeCategory span:before, .changeCategory a:before { font-size: 1.5rem; color: #ea4c89; }


.m-checkButton {
	background-color: #f9fbfc; border: 1px solid #d1d1d1;
	position:relative; border-radius: 20px;
    display: block; padding-left:20px;  float: right;
    height: 42px; width: 163px; transition: all .8s ease;
}
.m-checkButton:before{
    position: absolute; top: 5px; left: 5px; color: #fff; background-color: #a0a1ba; 
    line-height: 30px; width: 30px; border-radius: 15px;
}

.m-checkButton:hover::before { background-color: #365dcf; }

.white-popup-block { overflow: hidden; }
.memberShare{ 
	position: absolute; right: -28rem; top: 0; z-index:10; width: 28rem; height: 100%; padding: 2.5rem 1.5rem;
    transition: all .5s ease; background-color: #f9fbfc; border-left: 1px solid #fff; box-shadow: -2px 0 4px 0 rgba(0,0,0,.06);
}

.memberShare.m-sideShow { right:0; }
.memberShare .warningText { font-size: 1.3rem; display: block; padding: 1rem 1.5rem; background-color: #fef8c9; color: #b2913f;  border: 1px solid #edebdc; margin-bottom: 1.5rem; }
.memberShare button { display:block; border-radius: 0.3rem; background-color: #a0a1ba; color: #fff; font-size: 1.3rem; line-height: 4rem; width: 120px; margin: 2rem auto 0; }
.memberShare button:hover { background-color: #365dcf; }

.checkBox-title { border-bottom: 1px solid #dcdcdc; }
.m-checkList { padding-top: 5px; /* overflow-y: scroll; */ overflow : hidden; height: calc(100% - 187px); position: relative; }
.m-checkList li + li { border-top: 1px dashed #dcdcdc;  }
.mLabel { font-size: 1.3rem; }
.mLabel i { top: 50%; transform: translateY(-50%); }
.mLabel .mLabel-mail { font-size: 1.1rem; display: block; color: #3a8bbb; }
.mLabel .previewImg { width: 3.1rem; height: 3.1rem; padding: 0; border-radius: 40%; display:inline-block; vertical-align:middle; overflow: hidden; border: 1px solid #dfe1e8; }
.mLabel font { display: inline-block; vertical-align: middle; padding-left: 10px; }

.m-checkList .c-check { padding-right: 10px; width: 100%; }
.m-checkList .c-check em { position: relative; display: block; padding-left: 32px; }
.m-checkList .mLabel .previewImg { position: absolute; left: 0; top:3px; }
.m-checkList .mLabel font { display: block; }

.pageSearch { width: 100%; font-size: 13px; padding: 0.2rem 4.5rem 0.2rem 0.2rem;
    background-color: #F5F6F7; -webkit-box-shadow: inset 0px 2px 3px rgba(0,0,0,0.03);
    box-shadow: inset 0px 2px 3px rgba(0,0,0,0.03); border-radius: 0.4rem; margin: 0; position: relative;
}

.pageSearch input { border: none; background: none; outline: none; width: 100%; }
.pageSearch input:focus { border: none; background: none; outline: none; }

.pageSearch button { font-size: 0; position: absolute; right:2px; top:0; line-height: 44px; height: 44px; width: 44px; }
.pageSearch button:before { font-size: 2rem; color: #999; }


.copyRight { color: #999; font-size: 11px; position: absolute; bottom: 12px; padding-left: 18px; }
#lnb .copyRight { padding: 0; padding-left: 18px; }


/* switchText */
.switchText { font-size: 0; margin-bottom: 1rem; }
.switchText .switch { width: 10rem; height: 3.2rem; display: inline-block; vertical-align: middle; }
.switchText .switch span i { width: 3rem; }
.switchText .switch label { position: absolute; top: 0.5rem; left: 3.8rem; font-weight: 400; color: #fff; font-size: 1.4rem; }
.switch input:checked ~ label { left: 1.8rem  }
.switchText #subject_line, .switchText .subject_line { visibility: hidden; opacity: 0; display: inline-block; width:calc( 100% - 10rem ); padding-left:1rem; vertical-align: middle; transition: all .3s ease-in-out; }
.switchText #subject_line.switchInput, .switchText .subject_line.switchInput { visibility: visible; opacity: 1; }
.switchText input { font-size: 1.4rem; }



/* content */

.maxContainer { max-width: 1500px; margin: auto; }

.divisionLine { height: 1px; background-color: #dddde2; margin: 15px 0; }

.mContainer { min-width: 1190px;  position: absolute; top: 6.8rem; bottom: 0; left: 0; right: 0; overflow: auto; overflow-y: scroll; padding-left: 250px; }
.mContainer .inner.maxContainer { max-width: 980px; margin: auto; padding: 0 2.5rem 4rem; }
.mContainer section:before {
	background-color: #e5e6fb;  content: ''; 
	position: fixed; top: 0; bottom: 0; left: 67.5%; right: 0; 
    overflow: hidden; z-index: -1;
}
.pageWarp{ padding: 0 15px; }

.boxContainer { border: 1px solid #e7e8ef; border-radius: 4px; background-color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.03); position: relative; }

.white-popup-block {
    border-radius: 4px; background-color: #fff; box-shadow: 0 1px 4px 0 rgba(0,0,0,.5);
    color: #464c59; max-width: 900px; margin: auto; position: relative;
}
.white-popup-block .note-editor.note-frame { border-color: #ccd6e7; border-radius: 2px; }
.todo-popup-block { max-width: 720px; }
.modalTitle { margin: 0; font-size: 2.4rem; text-align: center; padding-top: 4rem; }
.modalContainer { padding: 3rem 6.5rem 4rem; }
.modalContainer .panel { margin: 0; }
.modalBtn { text-align: center; }
.popupClose-btn { 
	width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; z-index: 5;
    text-decoration: none; text-align: center; opacity: 0.65; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace;
}

.s-popup-block { max-width: 500px; }
.s-popup-block .modalTitle { margin: 0; font-size: 2rem; text-align: center; padding-top: 4.5rem; }
.s-popup-block .modalContainer { padding: 3rem 6.5rem 4.5rem; }
.s-popup-block .modalContainer input { width: 100%; margin-bottom: 3rem; }
.s-popup-block .modalContainer .btnCenter { padding-top: 0; }

button.btn-primary {
	background: #365dcf; /* Old browsers */
	background: -moz-linear-gradient(left, #365dcf 0%, #6c36cf 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #365dcf 0%, #6c36cf 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #365dcf 0%, #6c36cf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#365dcf', endColorstr='#6c36cf',GradientType=1 ); /* IE6-9 */
	padding: 0 20px; min-width: 150px; height: 42px; line-height: 42px;
	color: #fff; border-radius: 4px; border: none;
}

button.btn-primary:hover { background: #243f90; }


/* compass */

.accountImg .previewImg { padding: 0; height: 200px; }
.compassNav-wrap .accountImg .previewImg:after { content: ''; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background-color: rgba( 0,0,0,0.1); }
.navBar .accountImg .previewImg .imgContainer-fit, .compassLnb .previewImg .imgContainer-fit{ padding: 0; height: 200px; }
.accountImg .previewImg img { width: 100%; height: 100%; object-fit: contain; }
.editPhoto { border-top: 1px solid #e7e8ef; }
.editPhoto ul { overflow: hidden; padding: 0; margin: 0; }
.editPhoto li { float: left; width: 40%; text-align: center; }
.editPhoto li + li { border-left: 1px solid #e5e5e5; width: 30%; }
.editPhoto li:nth-child( 2n ) button { color: #999; }
.editPhoto li label, .editPhoto li button { cursor:pointer; vertical-align: top; margin: 0; padding: 10px 0;  width: 100%; font-weight: normal; }
.editPhoto li label i { color: #3d60ce; }
.insertImg-btn input[type=file] { visibility: hidden; width: 0; height: 0;}
.imgSignup { color: #fff; background-color: #3d60ce; }

.navBar .nav-wrap.compassNav-wrap{ padding: 0 0 32px; }

#menu .btn { height: 30px; }
#menu .move-day{ font-size: 0; }
#menu .btn span { font-size: 13px; vertical-align: middle; }

#lnb.compassLnb { padding: 0; }
#lnb.compassLnb .previewImg { padding: 0; height: 200px; }
#lnb.compassLnb .previewImg img { width: 100%; height: 100%; object-fit: contain; }

#lnb.compassLnb .lnb-calendars { padding: 14px 0 18px; margin-top: 0; }
#lnb.compassLnb .lnb-calendars #categoryBasic { border-top:0; }
.projectOutline { padding: 1rem;}
/* .projectOutline .boxContainer {  margin-top: 1rem;} */
.projectPeriod { 
	padding: 2rem 1.5rem 1.5rem; border-bottom: 1px solid #edebdc; color: #4b3c16;
    position: relative; background-color: #fef8c9; border-radius: 4px 4px 0 0; overflow: hidden;
}
.projectPeriod h5 , .projectPeriod p{ margin: 0; }
.projectPeriod h5 { margin-bottom: 0.5rem; }
.projectPeriod p { font-size: 16px; font-weight: 500; }
.projectPeriod i { color: #b2913f; font-size: 8rem; position: absolute; top: -1.8rem; right: -2.5rem; opacity: 0.15; }

.projectOutline dl { font-size: 0; padding: 0.8rem 1.5rem 1.5rem; margin: 0; }
.projectOutline dl dt, .projectOutline dl dd { display: inline-block; font-size: 1.2rem; font-weight: 400; margin-top: 0.2rem }
.projectOutline dl dt { width: 65%; }
.projectOutline dl dd { width: 35%; text-align: right; }
.projectOutline dl dd em { font-size: 1.8rem; font-weight: 600; margin-right: 3px; }

.projectPeriod-info { padding: 1rem 1.5rem 1.2rem; border-top: 1px dashed #e7e8ef; margin: 0; font-size: 1.3rem; }
.basicBtn.supportInfo-Btn { font-size: 1.3rem; line-height: 3.6rem; color: #fff; }
.basicBtn.supportInfo-Btn:hover, .basicBtn.supportInfo-Btn:focus { color: #fff; text-decoration: none; }

.accountUser { border-top: 1px solid #e7e8ef; border-bottom: 1px solid #e7e8ef; }
.accountUser h2, .projectOutline h2 { margin: 0; font-size: 1.6rem; padding: 20px 18px 15px; position: relative; border-bottom: 1px solid #e5e5e5; }
.accountUser h2:after, .projectOutline h2:after { content: ''; height: 2px; width: 115px; position: absolute; left: -18px; bottom:-1px; background-color: #3d60ce; transform: translateY(25%);}
.accountUser .accountUserList { max-height: 300px; /* overflow: scroll; */ overflow : hidden; }
.accountUserList ul { padding: 15px 18px 0px; }
.accountUser li { padding: 0.5rem 0; }
.accountUser .previewImg { width: 2.8rem; height: 2.8rem; padding: 0; border-radius: 40%; display:inline-block; vertical-align:middle; overflow: hidden; border: 1px solid #dfe1e8; }
.accountUser font { width: 181px; font-size: 1.3rem; display: inline-block; vertical-align: middle; padding-left: 10px; padding-right: 70px; position: relative; }
.accountUser .mLabel-login { font-size: 1.1rem; display: block; color: #999; position: absolute; right: 0; top: 50%; transform:translateY(-50%); }
.accountUser .mLabel-login.waitAccept { color: #f19149; font-weight: 500;}
.accountUser .mLabel-login.activeAccept { color: #3d60ce; font-weight: 500;}

.compassTitle { position: relative; margin: 1rem 0 1rem; }
.compassTitle h2 { font-size: 1.8rem; font-weight: 600; padding: 1rem 0.5rem 0.7rem; color: #353961; letter-spacing: -0.1px; word-spacing: -2px; margin: 0; }
.compassTitle h2 i { position: relative; top: 1px; color: #757988; }
.compassTitle h2 span, .compassSection h2 span#renderRange { font-weight: 500; font-size: 1.8rem; vertical-align: baseline; padding-left: 5px; }
.compassTitle h2 em { margin-left: 10px; }
.compassTitle h2 a { font-size: 1.5rem; font-weight: 400; }


.weekCalender { padding: 5rem 0 2rem; }
.weekCalender .compassTitle .calRing { 
		content:''; position: absolute; top: 0; right:0; width: 50%; height:100%; z-index: -1;
		background-color: #fff; border-radius: 3px;  padding: 11px 12px 13px; color: #757988; 
		border: 1px solid #e7e8ef; box-shadow: 0 1px 4px rgba(0,0,0,.03);
}
.weekCalender .compassTitle .calRing::before { 
	content: ''; width: 60px; height: 108%; position: absolute; left: -30px; top:-4%;
	background-color: #f5f7f9 ; border-right: 1px solid #e7e8ef;
	-webkit-transform: skew(-30deg); -moz-transform: skew(-30deg); transform: skew(-30deg);
}
.weekCalender .compassTitle .calRing:after { 
	content: ''; position: absolute; right: 10px; top:-7px; height: 30px; width: 240px; 
	background-image: url("/style/custom/img/cal_ring.png"); background-position: left center; background-size: auto 100%; 
}


.weekCalender-wrap { position: relative; left: 0; height: 250px; }

.weekCalender-wrap #calendar { top: 0px; border-radius: 0.4rem; border: 1px solid #e7e8ef; box-shadow: 0 1px 4px rgba(0,0,0,.03); }
.weekCalender-wrap #calendar .tui-full-calendar-layout { background-color: transparent !important; }
.weekCalender-wrap #calendar .tui-full-calendar-month-dayname { border-top: none !important; border-radius: 0.4rem 0.4rem 0 0; background-color: #fff !important; }
.weekCalender-wrap #calendar .tui-full-calendar-month-week-item .tui-full-calendar-weekday-grid { background-color: #fff; }
.weekCalender-wrap #calendar .tui-full-calendar-month-week-item:last-child .tui-full-calendar-weekday-grid { border-radius: 0 0 0.4rem 0.4rem; border-bottom: 1px solid #e7e8ef; }
.weekCalender-wrap #calendar .tui-full-calendar-month { height: 100%;  min-height: 80px; }
.weekCalender-wrap #calendar .tui-full-calendar-week-container { width: 100%; height: inherit; display: inline-block; font-size: 10px; min-height: 80px; }

.delayTodo .compassTitle i{ color: #eb4f86; }
.delayTodo-wrap { margin-top: 10px; overflow: hidden; }
.delayTodo-list.todoLists { margin: 0; }
.delayTodo-list.todoLists li { position: relative; height: 70px; padding: 0 32rem 0 4.8rem; border-bottom: 1px dashed #e7e8ef;}
.delayTodo-list.todoLists li + li { margin: 0; }
.delayTodo-list.todoLists li:last-child { border-bottom: 0; }
.delayTodo-list.todoLists li.delayTodo-title { 
	padding: 0; height: auto;
	padding-right: 200px; position: relative; font-size: 0; font-weight: 500; border-bottom: 1px solid #f3e9ed; 
	background: #fff4f8; 
	background: -moz-linear-gradient(left,  rgba(255,244,248,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(255,244,248,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to right,  rgba(255,244,248,1) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff4f8', endColorstr='#ffffff',GradientType=1 );
	
}

.delayTodo-list.todoLists a { color: #333; }

.delayTodo-title:before { content:''; display:block; width: 3px; height: 39px; position:absolute; top:-1px; left: 0; background-color:#eb4f86;  }
.delayTodo-title h3 { margin: 0; font-size: 1.4rem; padding: 1.2rem 2.2rem 1rem; color: #525563; font-weight: 500; }
.delayTodo-title .delayTodo-info, .delayTodo-list .delayTodo-info { position: absolute;right: 0; top:0; top: 50%; transform: translateY(-50%); }
.delayTodo-date, .delayTodo-user { text-align: center; display: inline-block; font-size: 1.3rem; color: #525563;}

.delayTodo-list.todoLists .todoContnet { line-height: 70px; }
.delayTodo-list.todoLists .todoChack { top: 50%; transform: translateY(-50%); }
.delayTodo-list .todoChack { left: 2.2rem; }
.delayTodo-list .todoDday, .delayTodo-info .PTB { display: inline-block; border: 0; margin: 0; padding: 0; vertical-align: middle; }
.delayTodo-list .todoDday, .delayTodo-date { width: 128px; padding: 0 15px; }
.delayTodo-list .todoDday { padding: 0 15px 0 40px; }
.delayTodo-list .todoDday { position: relative; }
.delayTodo-list .todoDday i { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); }
.delayTodo-list .todoDday p { display: block; border: 0; margin: 0; padding: 0; vertical-align: middle; }
.delayTodo-list .todoDday p em { display: block; font-size: 1.1rem; text-indent: -1px; }
.delayTodo-info .PTB, .delayTodo-user { width: 190px;  padding: 0 15px; }
.delayTodo-info .PTB { position: relative; transform: none; margin: 0; }
.delayTodo-info .PTB .previewImg, .delayTodo-info .PTB .PTB-user { display: block; }
.delayTodo-info .PTB p { margin-bottom: 0; padding-left: 38px; }
.delayTodo-info .PTB .previewImg { width: 3rem; height: 3rem; position: absolute; left: 10px; top:1.5px;}


.compassChart { padding: 2rem 0; }
.compassChart-container { font-size: 0; position: relative; text-align: right;}
.todoContnet { margin: 0; }
.chartImg, .projectChart-wrap, .todoChart-wrap{ width: 33.3333%; display: inline-block; text-align: left; padding-left: 17px;}
.chartImg, .projectChart-wrap, .todoChart {
	display: inline-block; border: 1px solid #e7e8ef; border-radius: 4px; background-color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.03);
    vertical-align: middle;
}
.chartImg { position: absolute; height: 100%; left: 0; top: 0; border-radius: 4px 0 0 4px; }
.chartImg img { height: 243px; max-height: 100%; margin: auto;  display:block; }
.chartImg:after { 
	content: ''; display: block; width: 10px; height: 48px; position: absolute; right: -1px; top: 50%; transform:translateY(-50%); 
	background-image: url("/style/img/common/icon/talk_point.png"); background-repeat: no-repeat; background-position: right center; background-size: 100% auto; 
}

.projectChart-img { padding-right: 17px; }
.projectChart-img img { height: 160px; margin-top: 15px; margin-bottom: 5px; }
.projectChart-img .chartWarning {
	color: #706f6a;
	background-color: #fffef3;
    border: 1px solid #edece3;
    font-size: 12px;
   	padding: 0px 15px;
   	height: 43px; 
   	line-height: 43px;
   	text-align: center;
}

.projectChart-wrap { border-radius: 0 4px 4px 0; border-left-color: #fff; }
.compassChart-container h4 { padding: 0rem 1rem 2.5rem; margin: 0; font-size: 1.7rem }
.compassChart-container .projectChart-wrap h4 { color: #757988; }
.compassChart-container .todoChart-wrap h4 { color: #7a601b; }
.projectChart-wrap .projectChart,.todoChart-wrap .todoChart { padding: 2.8rem 15px 3.3rem; width: 100%; height: 245px; }
.yellowChart{ background-color: #fdcf55; }

.compassProject { padding: 0 0 5rem; }
.compassProject .projectBox_list { margin-left: -16px; overflow: hidden; margin-top: -16px; }
.compassProject .projectBox_list .projectBox { width: 33.333%; margin-top: 16px; padding-left: 16px; float: left; }
/* .compassProject .projectBox_list .projectBox:nth-child(4n) { margin-top: 16px; } */
.compassProject-inner { 
	display: block; height: 164px;
    border: 1px solid #e7e8ef; border-radius: 4px;
    background-color: #fff; text-decoration: none; box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0,0,0,.03); position: relative;
}
.compassProject-inner:hover { background-color: #fffef3; border-radius: 4px; }
.compassProject-inner dl { padding: 19px 40px 15px 24px; margin: 0; cursor: pointer; }
.compassProject-inner dl dt { font-size: 1.5rem; font-weight: 500; padding-top:0.2rem; line-height: 2.8rem; height: 3rem; color: #333;}
.compassProject-inner dl dd { font-size: 1.3rem; padding: 0.5rem 0; color: #51606f; height: 3rem; color: #959595; }
.compassProject-inner dl dd + dd { line-height: 2.2rem; height: 2.2rem; padding: 0; margin: 0; margin-top: 3px; color: #365dcf; }
.compassProject-inner dl dd br { display: none; }
.compassProject-inner dl dd em { color: #959595; }
.projectBox .boxEdit { right: 1.0rem; top: 1.8rem; }

.updateInfo { border-top: 1px solid #e7e8ef; padding: 1rem 1rem 1.2rem; font-size: 1.3rem; }
.updateInfo p { margin: 0; padding-left: 15px; color: #999; }
.updateInfo ol li { width: 22%; float: left; text-align: center; color: #51606f; position: relative; }
.updateInfo ol li.newIcon { width: 12%; }
.updateInfo ol li + li + li:before { content:''; width: 1px; height: 70%; position: absolute; top:16%; left: 0; background-color: #d7d8df;  }
.newIcon em { background-color: #ff5656; display: block; margin: auto; width: 25px; color: #fff; font-weight: 700; text-align: center; border-radius: 25px; font-size: 1.3rem; margin-top: 1px; }
.compassProject ol:after { content: ''; display: block; clear: both; }

.createProject { position: relative; padding: 43px 0 43px 85px;  cursor: pointer;}
.createProject dl dd { color: #a1abb8; }
.createProject dl { padding: 10px 24px 10px; }
.createProject i { position: absolute; background-color: #c1cad6; border: 1px solid #adb9ca; border-radius: 50%; width: 70px; top: 47px; left: 25px;  }
.createProject:hover i { background-color: #3d60ce; }
.createProject-2 i{ background-color: #d0c0d9; border-color: #c1accd; }
.createProject-2:hover i { background-color: #925bb0; }

section.project:before { background-color: inherit; }

.projectBar-wrap { padding-right: 14px; }
.projectBar-wrap .projectBar-inner h4 { color:#757988; padding-bottom: 2.2rem; }
.projectBar-wrap .projectBar-inner { height: 245px; padding-bottom: 0; }
.projectBar-update { padding: 0 1.2rem; }
.projectBar-update li + li { margin-top: 10px; }
.projectBar-update li a { color: #93959e;  display: inline-block; margin-bottom: 6px; }
.projectBar-update li span { font-size: 1.3rem; color: #93959e; }
.projectBar { position: relative; background-color:#eeeff4; height: 5px; border-radius: 5px; border: 1px solid #e7e8ef;  }
.projectBar em { position: absolute; left: -1px; top:-1px; height: 5px; background-color: #ccc; border-radius: 5px; }
.projectBar em:after { content: ''; position:absolute; right: -9px; top:-3px; width: 11px; height: 11px; background-color: #fff; border: 4px solid #ededed; border-radius: 7px;  }
.projectBar.teamTalk-bar em { background-color: #00a899; }
.projectBar.calender-bar em { background-color: #9e5fff; }
.projectBar.todo-bar em { background-color: #ffc23f; }
.projectBar.document-bar em { background-color: #365dcf; }
.projectBar.teamTalk-bar em:after { border-color: #00a899; }
.projectBar.calender-bar em:after { border-color: #9e5fff; }
.projectBar.todo-bar em:after { border-color: #ffc23f; }
.projectBar.document-bar em:after { border-color: #365dcf; }

.latestUpdate-wrap { padding-bottom: 5rem; }
.latestUpdate { margin-left: -17px; overflow: hidden; }
.latestUpdate-list { width: 50%; float:left; padding-left: 17px; }
.latestUpdate-inner { padding: 2.2rem 2.8rem 1rem; min-height: 258px; position: relative; }
.latestUpdate-inner h4 { font-size: 1.6rem; color: #525563; border-bottom: 1px solid #e7e8ef; padding-bottom: 1.5rem; margin: 0; }
.latestUpdate-inner h4 > i { margin-right: 5px; color: #757988; position: relative; top: 1px; }
.latestUpdate-inner h4 a { position: absolute; right: 3rem; top: 1.8rem; font-size: 2.2rem; }
.latestUpdate-document li + li, .latestUpdate-todo li + li { border-top: 1px dashed #e7e8ef; }
.latestUpdate-info { margin-top: 3px; }
.latestUpdate-list .documentFile-name span, 
.latestUpdate-list .documentFile-name a,
.latestUpdate-list .todoContnet em,
.latestUpdate-list .todoContnet span { font-size: 1.4rem; }
.latestUpdate-info { color: #99a2ab; }
.latestUpdate-info * { font-size: 1.2rem !important; color: #99a2ab !important; display: inline; margin: 0; font-weight: 400 !important; }
.latestUpdate-info { width: 100%; }
.latestUpdate-info .todoDday { margin: 0; border: 0; padding: 0; }
.latestUpdate-info .todoDday i { width: 1rem; height: 1rem; margin-right: 2px; }

.latestUpdate-todo-list { position: relative; padding: 10px 10px 10px 26px; }
.latestUpdate-document-list { position: relative; padding: 10px 10px 10px 27px; }
.latestUpdate-todo-list .todoChack { left: 0; top: 1.3rem; }
.latestUpdate-document-list .formatImage { left: 0; top: 1.3rem; }

.memberBox_list { margin-left: -16px; margin-top: -16px; overflow: hidden; }
.memberBox_list > li { padding-left: 16px; float: left; width: 33.333%; padding-top: 16px; }
.memberBox_list .createProject { height: 182px; padding: 55px 0 55px 85px; }
.memberBox_list .createProject i { line-height: 70px; height: 70px; text-align: center; top: 50%; transform: translateY(-50%);}
.memberBox_list .createProject i:before { color: #fff; font-size: 3rem; }
.memberBox-inner { position: relative; height: 182px; }
.memberBox-inner .boxEdit { top: 1.8rem; right: 1.3rem; }

.memberBox-basic { position: relative; padding-left: 4.8rem;}
.memberBox-basic .previewImg { 
    position: absolute; left: 1.8rem; top:  2.2rem; width: 3.8rem; height: 3.8rem;
    padding: 0; border-radius: 40%; overflow: hidden; border: 1px solid #dfe1e8;
}
.memberBox-basic dl { padding: 2rem 3rem 1.7rem 2rem; margin: 0; }
.memberBox-basic dl dt { margin-bottom: 0.5rem; }
.memberBox-basic dl dd { color: #3a8bbb; font-size: 1.2rem; }
.memberBox-basic dl dd:last-child { margin-top: 5px; color: #51606f; }

.authoritySetting { padding:0.7rem 2rem 1rem; border-top: 1px solid #e7e8ef; }
.authoritySetting h5 { margin-bottom: 0.6rem; }
.authoritySetting h5 i { position: relative; top:1px; color: #c1cad6; margin-right: 5px; }
.authorityRadio { overflow: hidden; }
.authorityRadio li { float: left; }
.authorityRadio li + li { margin-left: 1.0rem; }
.authorityRadio li.authorityBtn-wrap { float: right; margin: 0; }
.authoritySetting .c-radio { padding: 0.5rem 0; font-weight: 400; font-size: 1.3rem; margin: 0;}
.authoritySetting .c-radio i { margin-right: 4px; }

.dotDivision { padding-top: 2rem; margin-bottom: 0rem; border-bottom: 1px dashed #d6d9e6;}

.authorityBtn { 
	border-radius: 3px; margin: 0; padding: 0; font-size: 1.3rem; 
	padding: 0.5rem 1rem; color: #3d60ce; border: 1px solid #3d60ce;
}
.authorityBtn:hover { background-color: #3d60ce; color: #fff; }
/* insert */

.insertContainer-wrap{ 
	border: 1px solid #e7e8ef; border-radius: 4px; background-color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.03);
    vertical-align: middle; max-width: 850px; margin: 6rem auto; padding: 0 50px;
}

.insertContainer{ position: relative; padding: 60px 50px 60px 70px; margin: auto; }
.insertContainer:before { content: ''; position: absolute; left: 20px; top:0; width: 1px; height: 100%; background-color: #e7e8ef; }

.insertContainer-wrap input { width: 100%; }
.insertContainer .warningText { font-size: 1.2rem; padding: 8px 5px 0; color: #365dcf; }
.insertContainer-join .basicDomain { color: #365dcf; font-size: 1.7rem; font-weight: 500; padding-left: 5px;}
.insertContainer-join input { width: calc(100% - 100px); }

.insertTitle, .insertContainer dl .insertDt { position: relative; font-weight: 500; color: #464747; margin: 25px 0 12px;  }
.insertTitle i { 
	position: absolute; display: block; left: -67px; top:50%;  margin-top: -18px; 
	background-color: #3d60ce; border-radius: 50%; color: #fff; font-size: 1.4rem; line-height: 35px; width: 35px;
}
.insertContainer dl .insertDt em { color: #979fa6;  font-size: 1.3rem; margin-left: 5px; }
.insertTitle, .insertContainer dl .insertWarning { margin-bottom: 0; }
.insertTitle, .insertContainer dl dd.orangeText { font-size: 1.2rem; padding: 0.4rem 0; }

.cellPhone-insert input { width: 100px; }

.insertTitle { margin: 0; }
.insertTitle h2 { margin: 0; color: #353961; font-weight: 900; font-size: 2.5rem; word-spacing: -0.2rem; letter-spacing: -0.1rem; }
.insertTitle h2 em { color: #365dcf; font-weight: 500; font-size: 1.8rem; position: relative; margin-left: 0.8rem; letter-spacing: 0rem; display: inline-block; vertical-align: bottom;  }

.insertContainer dl { padding-top: 20px; }
.insertContainer dl .insertDt:before { content: ''; position: absolute; left: -54px; top:50%; width: 10px; height: 10px; margin-top: -4px; background-color: #979fa6; border-radius: 50%; }

.dateInsert { display: inline-block; position: relative; }
.dateInsert i { position: absolute; left: 11px; top: 12px; color: #979fa6; font-size: 1.8rem; }
.dateInsert input { padding-left: 37px; width: 220px; }

.insertContainer .previewImg{ display: inline-block; vertical-align: middle; width: 120px; height: 120px; border-radius: 40%; overflow: hidden; border: 1px solid #dfe1e8; }
.insertContainer .editPhoto { border-top:0; position:relative; display: inline-block; vertical-align: middle; width: 150px; margin-left: 20px; }
.insertContainer .editPhoto li { float: none; width: 100%; border: 1px solid #e7e8ef;}
.insertContainer .editPhoto li:first-child { border-radius: 4px 4px 0 0; }
.insertContainer .editPhoto li:nth-child( 2n ) { border-top: 0; border-bottom: 0; }
.insertContainer .editPhoto li:last-child { border-radius: 0 0 4px 4px; overflow: hidden; }
.insertContainer .editPhoto li label, .insertContainer .editPhoto li button { padding: 8px 0; }

.insertContainer dd label.error { color: #ec561b; font-weight: normal; font-size: 1.2rem; padding-top: 5px; display: block; }
.insertContainer dd .warning { color: #3d60ce; font-weight: normal; font-size: 1.2rem; padding: 5px 0 0; margin:0; display: block; }

.insertContainer .editPhoto:after { 
	content: ''; display: block; width: 10px; height: 48px; position: absolute; left: -9px; top: 50%; transform:translateY(-50%); 
	background-image: url("/style/img/common/icon/talk_point.png"); background-repeat: no-repeat; background-position: right center; background-size: 100% auto; 
}

.insertContainer .editPhoto .imgSignup i {font-size: 1.1rem; margin-right: 1px; }


.insertUser { margin-top: 1rem; }
.insertUser-list { max-height: 200px; padding:0px; background-color: #fbfcfd; border-radius: 4px; border: 1px solid #d6d9e6;}
.insertUser ul { overflow: hidden; margin: 0; }
.insertUser ul li { width: 50%; float: left; border-bottom: 1px dashed #d6d9e6; }
.insertUser ul li:nth-child( odd ) { border-right: 1px dashed #d6d9e6; }
.insertUser ul li:last-child { border-bottom: 0; }
.insertUser ul li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.insertUser ul li .insertUser-inner { 
/* 	border: 1px solid #e7e8ef;  border-radius: 4px; background-color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.03); vertical-align: middle; */
}
.insertUser-check { display: block; vertical-align: middle; font-size: 0; }
.insertUser-check label { padding: 10px 40px; margin: 0; width: 100%; height: auto; }
.insertUser-check label:hover { background-color: #fffef3; border-radius: 4px; }
.insertUser-check label i { top: 19px; left: 13px; }
.userInfo { display: inline-block;  vertical-align: middle; }
.userInfo .previewImg { width: 3.2rem; height: 3.2rem; padding: 0; border-radius: 40%; overflow: hidden; border: 1px solid #dfe1e8; }
.userInfo .previewImg, .userInfo .basic-user { display: inline-block; vertical-align: middle; }
.userInfo .basic-user { padding-left: 10px; font-size: 1.3rem; color: #61676f; }
.userInfo .basic-user em { display: block; color: #3a8bbb; font-size: 1.1rem; font-weight: 300; }

.insertBtn { max-width: 700px; margin: 20px auto 0;  }
.insertBtn .btn, .insertBtn .lineBtn { height: 48px; line-height: 48px; }



/* hero */

.heroText-basic { padding: 5.5rem 1rem 2rem; }
.heroText-basic h2 { margin: 0; color: #353961; font-weight: 900; font-size: 3rem; word-spacing: -0.2rem; letter-spacing: -0.1rem; }
.heroText-basic h2 em { color: #365dcf; font-weight: 500; font-size: 2rem; position: relative; margin-left: 0.8rem; letter-spacing: 0rem; display: inline-block; vertical-align: bottom;  }
.heroTab { padding: 1.8rem 0px 0px; margin-top: 2.5rem; border-top: 1px dashed #d6d9e6;}
.heroTab:after { content: ''; display: block; clear: both; }
.heroTab li { float: left; position: relative; }
.heroTab li + li { margin-left: 10px; padding-left: 10px; }
.heroTab li + li:after { content: ''; position: absolute; left: 0; bottom: 7px; display: block; width: 1px; height: 13px; background-color: #c6c8d1; }
.heroTab li button { position: relative; font-size: 1.5rem; font-weight: 400; padding: 2px 3px 4px; color: #909193; }
.heroTab li button:hover { color:#365dcf; }
.heroTab li button em { margin-left: 5px; }
.heroTab li.active button:after { content: ''; position: absolute; bottom: 3px; left: 0; z-index: -1; opacity: 0.2; width: 100%; height: 10px; background-color: #3d60ce; }
.heroTab li.active button, .heroTab li.active button em { color:#365dcf; }

.hero { overflow: hidden; }
.heroContainer:after { content: ''; display: block; clear: both; }
.heroContainer { position: relative; margin: auto; }
.heroContainer .heroText { position: absolute; left: 0; bottom: 0.5rem; max-width: 55%; padding: 2.5rem 2rem 2rem 4rem; margin-top: 1.3rem; }
.heroContainer .heroText h2 { margin: 0; padding-left: 1.5rem; color: #353961; font-weight: 900; font-size: 3rem; word-spacing: -0.2rem; letter-spacing: -0.1rem; }
.heroContainer .heroText h2 em { color: #365dcf; font-weight: 500; font-size: 2rem; position: relative; top: -0.2rem; margin-left: 0.8rem; letter-spacing: 0rem; display: inline-block; vertical-align: bottom;   }
.heroContainer .heroText p { margin: 0; color: #6a7da7/* #DD1B88 */; line-height: 2.4rem; font-size: 1.4rem; word-break: keep-all; padding: 0.2rem; }
.heroContainer .heroImg { float: right; width: 45%; }
.heroContainer .heroImg img { height: 18rem; display: block; }


/* .seachArea { margin-top: 1.5rem; background-color: #dddde2; font-size: 0; border-radius: 3rem; overflow: hidden; box-shadow: 0 2px 4px 0 inset rgba(0,0,0,.12); border-bottom: 1px solid rgba(255,255,255,0.8); }*/
.seachArea { margin-top: 1.5rem; background-color: #fff; font-size: 0; border-radius: 3rem; overflow: hidden; box-shadow: 0 2px 4px 0 rgba(0,0,0,.06); border-bottom: 1px solid #e1e3e8; }
.seachArea .customSelect { width: 100px; display: inline-block; font-size: 13px; vertical-align: middle; border-radius: 0; border: 0; }
.seachArea .customSelect:before { border-top-color: #9ba0a3; }
.seachArea .customSelect:after { content: ''; width: 1px; height: 1.8rem; background-color: #cbcbd1; position: absolute; right: 1px; top: 50%; transform: translateY(-50%); }
.seachArea .customSelect label, .seachArea .customSelect select { padding: 1.3rem 1rem 1.3rem 1.6rem; }
.seachArea input, .seachArea button { display: inline-block; font-size: 14px; vertical-align: middle; border: none; }
.seachArea input { padding: 1.2rem 1.5rem 1.4rem; width: 220px; background: none; }
.seachArea input:focus { border: 0; }
.seachArea button { width: 5.6rem; padding: 1rem 1.5rem; border-radius: 4rem; }

/* basicBoard */

.basicBoard { padding: 4rem 3rem; }
.basicBoard .allText { font-size: 1.4rem; color: #555; padding-top: 1.3rem; margin: 0; }
.basicBoard .allText em { font-size: 1.6rem; font-weight: 500; color: #365dcf; }
.basicBoard .search select, .basicBoard .search input { padding-top: 1rem; padding-bottom: 1rem; }
.basicBoard table { border-top: 2px solid #4d4d4d; width: 100%; }
.basicBoard table tr th, .basicBoard table tr td { border: none; text-align: center; border-bottom: 1px solid #e6e6e6; }
.basicBoard table tr th { font-weight: 500; font-size: 1.4rem; padding: 15px 20px; }
.basicBoard table tr td { padding: 10px 20px; font-size: 1.4rem; color: #666; }
.basicBoard table tr td a { font-size: 1.5rem; color: #333; display: block; }
.alignLeft { text-align: left !important; }
.pagination > li > a { font-size: 13px; }
.basicAdd { height: 40px; margin-top: 15px; }
.basicAdd a { font-size: 13px; line-height: 38px; padding: 0 30px; min-width: 110px; }
.basicAdd a:active { position: relative; top:1px; }


.boardView { border-top: 2px solid #4d4d4d; }
.boardView-title { border-bottom: 1px dashed #dfe1e8; }
.boardView-title, .boardView-content { padding: 15px 10px; }
.boardView-content { margin-bottom: 20px; }
.boardView-title span { font-size: 1.8rem; font-weight: 500; }
.boardView-date { font-size: 1.4rem; color: #6a6a6a; display: block; margin-top: 0.3rem; }
.boardView-content { color: #666; font-size: 1.5rem; border-bottom: 1px solid #dfe1e8; }
.boardView-content .panel { margin: 0; }

.basicBtn, .lineBtn { min-width: 150px; font-size: 14px; }
.basicBtn {
	background: #365dcf;
    background: -moz-linear-gradient(left, #365dcf 0%, #6c36cf 100%);
    background: -webkit-linear-gradient(left, #365dcf 0%, #6c36cf 100%);
    background: linear-gradient(to right, #365dcf 0%, #6c36cf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#365dcf', endColorstr='#6c36cf',GradientType=1 );
}
.basicBtn:hover { background: #243f90; }

.centerBtn { text-align: center; }
.centerBtn a, .centerBtn button { width: auto; margin: auto; }


.boxRadius-bottom { overflow: hidden; border-radius: 0 0 4px 4px; }
.overflowInherit { overflow: inherit; }

/* team talk */

.mContainer section.teamTalk:before { background-color:#e3fbf6; }
.teamTalk .heroContainer .heroText h2 em { color: #00a899; }


.boxList { margin: 0; }
.boxList li { border: 1px solid #e7e8ef; border-radius: 4px; background-color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.03); position: relative; }
.boxList li + li { margin-top: 2.5rem; }
.boxList li .talk_subject { padding: 0.2rem 0rem 0rem 7.5rem; border-bottom: 1px solid #edebdc; color: #b2913f; line-height: 38px; position: relative; background-color: #fef8c9; border-radius: 4px 4px 0 0; overflow: hidden; }
.boxList li .talk_subject em { position: absolute; left:0; top:0; bottom: -1px; background-color: #ea4c89; color: #fff; display: inline-block; font-size: 0; }
.boxList li .talk_subject em:before { font-size: 1.6rem; padding: 0 1.5rem 0rem 2rem;}
.boxList li .talk_subject em:after { 
	content: ''; display: block; width: 15px; height: 100%; position: absolute; right:-15px; top: 0; 
	background-image: url("/style/img/common/icon/talk_point_notice.png"); background-repeat: no-repeat; background-position: left center; background-size: auto 100%; 
}


.boxList li:after { content: ''; }

.boxList li .inner { position: relative; padding: 2.5rem; padding-left: 11.5rem; }
.boxList li .inner .previewImg { width: 7rem; height: 7rem; position: absolute; left: 2.5rem; top: 2.5rem; padding: 0; border-radius: 40%; overflow: hidden; border: 1px solid #dfe1e8; }
.teamTalk .boxList li .inner:after { 
	content: ''; display: block; width: 10px; height: 48px; position: absolute; left: -10px; top: 4rem; 
	background-image: url("/style/img/common/icon/talk_point.png"); background-repeat: no-repeat; background-position: right center; background-size: 100% auto; 
}
.boxList li .inner .talk_content { margin: 0.5rem 0 0.5rem; }
.boxList li .inner .talk_content p { margin: 0; }

.topLine { border-top: 1px solid #dee0e3; }

.talkFileList { padding: 0rem 2.5rem 1.5rem; }
.modalContainer .talkFileList { padding: 0rem 0rem 0.8rem; }
.talkFileList .talkFile { display: inline-block; margin: 5px 5px 5px 0; border-radius: 20px; border: 1px solid #e5e5e5; padding: 0.3rem 1.5rem 0.5rem;}
.talkFileList .talkFile a { font-size: 1.2rem; display: inline-block;}
.talkFileList .talkFile span { cursor: pointer; font-size: 1.2rem; color: #888; display: inline-block; margin-left: 8px; padding-left: 8px; border-left: 1px solid #e5e5e5;}
.talkFileList .talkFile span i { position: relative; top:1px; }
.talkFileList div:last-child { margin-right: 0;  }
.divisionLine.lastLine { margin-top: 5px; }

.reply { padding: 2rem 1rem; position: relative; }
.replyList { 
	background-color: #FBFCFD; padding:0 2rem; border-top: 1px solid #dfe1e8; border-radius: 0 0 1.5rem 1.5rem;    
	background-image: url(/style/custom/img/common/inset_shadow.png); background-position: left top; background-repeat: repeat-x; 
}
.replyList .topLine:first-child { border-top: none; }
.replyList .topLine { border-color: #f0f0f0; }
.replyList .writeUser,
.replyList .writeDate,
.replyList .comm_content p { padding: 0 0.2rem; color: #61676f; }
.replyList .writeDate { margin-bottom: 0.8rem; }
.replyInsert .insertInner { position: relative; padding-right: 10rem; }
.replyInsert .insertInner input { font-size: 1.4rem; line-height: 1.6rem; border-radius: 0.2rem; width: 100%; border-color: #fff; border: none; padding: 1.4rem 2.2em 1.5rem; }
.replyInsert .insertInner button { 
	position: absolute; right: 0; top:0; width: 9rem; line-height: 4.5rem; height: 4.5rem; color: #365dcf;
	color: #fff; background-color: #a0a1ba; 
}
.replyInsert .insertInner button:hover { background-color: #4e52c8; }

.reply .boxEdit { right: 0; }

.writeUser { margin-bottom: 0; font-size: 1.3rem; font-weight: 400; }
.writeUser span { color: #3a8bbb; font-size: 1.2rem; font-weight: 300; }
.writeDate { color: #8f99a2; font-size: 1.2rem; margin-top: 0.2rem; margin-bottom: 1.5rem; }

.writeInfo { margin-top: 5px; font-size: 0; }
.writeInfo .writeUser, .writeInfo .writeDate { display: inline-block; vertical-align: middle; }
.writeInfo .writeUser { font-weight: 400; color: #8f99a2; font-size: 1.3rem; }
.writeInfo .writeInfo-dot { display: inline-block; color: #aaa; vertical-align: middle; font-size: 1.3rem; }
.writeInfo .writeDate { margin: 0; }
.writeInfo .writeUser span { color: #99a2ab; }

.reply .writeInfo { margin: 0; }



.comm_content { margin-top: 1rem; }
.comm_content .replyEdit { position: relative; padding-right: 145px; }
.comm_content .replyEdit input { font-size: 1.4rem; line-height: 1.6rem; border-radius: 0.2rem; width: 100%; border-color: #dee0e3; }
.comm_content .replyEdit .replyBtn { position: absolute; right:0;  top: 0; }
.comm_content .replyEdit .replyBtn button { 
	display: block; float: left; width: 60px; margin-left: 5px;
	line-height: 3.6rem; height: 3.8rem; border: 0.1rem solid #365dcf; border-radius: 0.2rem; color: #365dcf;
}
.comm_content .replyEdit .replyBtn button.replyBtn-signup { width: 70px; }
.comm_content .replyEdit .replyBtn button.replyBtn-cancel { color: gray; border-color: gray; }

.boxEdit { position: absolute; right: 1.5rem; top: 2.5rem; }
.boxEdit .moreBtn { padding: 0 1rem; }
.boxEdit .moreBtn .circle { display:block; width: 0.4rem; margin-bottom: 0.3rem; padding-bottom: 100%; background-color: #365dcf; border-radius: 50%; }

.boxEdit .boxEdit-btn { 
	display: none; /* background-color: #e8f0fe; */ position: absolute; right: 0; top: 105%; z-index: 1; 
	width: 12rem; border-radius: 0.4rem; padding: 0.5rem 0.5rem 0.5rem;
	background-color: #fff;  border: 1px solid #e5e5e5; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12);
}
.boxEdit .boxEdit-btn button, .boxEdit .boxEdit-btn a { display: block; padding: 1rem 1.2rem; width: 100%; text-align: left; color: #333; font-size: 0;  }
.boxEdit .boxEdit-btn button span, .boxEdit .boxEdit-btn a span { font-size: 1.3rem; }
.boxEdit .boxEdit-btn button:before, .boxEdit .boxEdit-btn a:before { font-size:1.3rem; position: relative; top: 0.1rem; margin-right: 0.8rem;  font-weight: 500; color: #ea4c89; }
.boxEdit .boxEdit-btn a:hover, .boxEdit .boxEdit-btn a:focus { text-decoration: none; }
.boxEdit .boxEdit-btn button:hover, .boxEdit .boxEdit-btn a:hover { color: #ec6941; }
.boxEdit.grayBtn .moreBtn .circle { width: 0.3rem; background-color: #666; }


/* document */

.mContainer section.document:before { background-color:#e5f0fb; }

#docuZone {
    border: 1px dashed #ccc; border-radius: 2px; background: #fcfcfc;
    padding: 20px 20px 20px 23px;; align-items: center; justify-content: center;
    flex-direction: column; cursor: pointer;
}
#docuZone .noneDrag { text-align: center; display: block; height: 102px; padding: 25px 0;}
#docuZone .noneDrag:before { display: block; font-size: 2.5rem; color: #ccc; margin: 0 auto 10px; }
#docuZone .noneDrag span { font-size: 1.2rem; color: #365dcf; display: block; }
#docuZone.dz-started .noneDrag { display: none; }
#docuZone .dz-preview .dz-details .dz-size { display: block; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; }

#addDocument #docuZone .noneDrag { adding: 18px 0;}
#addDocument .dropzone .dz-preview, #editDropzone .dropzone .dz-preview { width: 113px; }
#addDocument .dropzone .dz-preview .dz-image, #editDropzone .dropzone .dz-preview .dz-image { width: 113px; height: 113px; }
#addDocument .dropzone .dz-preview .dz-success-mark, #addDocument .dropzone .dz-preview .dz-error-mark,
#editDropzone .dropzone .dz-preview .dz-success-mark, #editDropzone .dropzone .dz-preview .dz-error-mark { margin-top: -37px; }

#editDropzone #docuZone { text-align: center; }

#docuZone.talkDrop-zone { padding: 10px; min-height: 88px;  }
#docuZone.talkDrop-zone .noneDrag { padding: 0; font-size: 1.3rem; height: auto; margin: 1.5rem; } 
#docuZone.talkDrop-zone .noneDrag:before { font-size: 2rem; } 
#docuZone.talkDrop-zone .dz-preview { margin: 0 16px; width: 55px; min-height: 76px; }
#docuZone.talkDrop-zone .dz-preview .dz-details { padding: 0.1rem; font-size: 1.3rem; }
#docuZone.talkDrop-zone .dz-preview .dz-image { width: 55px; height: 55px; }
#docuZone.talkDrop-zone .dz-preview .dz-success-mark, 
#docuZone.talkDrop-zone .dz-preview .dz-error-mark  { margin-left: -26px; margin-top: -38px; height: 55px; width: 55px; }
#docuZone.talkDrop-zone .dz-preview .dz-remove { font-size: 1.3rem; display: block; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap;}
#docuZone.talkDrop-zone .dz-preview .dz-details .dz-size { padding: 0.8rem 0 0; font-size: 1.2rem; margin-bottom: 0; }
#docuZone.talkDrop-zone .dz-error .dz-filename, #docuZone.talkDrop-zone .dz-error .dz-filename .dz-size{ display: none; }
#docuZone.talkDrop-zone .dz-error-message { top: 100px; left: -45px; }

.btnCenter { font-size: 0; padding-top: 30px; }
.noticeModal .btnCenter { font-size: 0; padding-top: 20px; }
.btnCenter button, .btnCenter a { margin: 0 3px; }
.btnCenter .lineBtn { display: inline-block; width: auto; vertical-align: middle; }

.boxContent { background-color: #fff; box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.08); border-radius: 1.5rem; position: relative; }
.document .inner { padding: 0 2.5rem 4rem; }

.documentTitle-area { padding: 0 2.5rem; }
.documentTitle { position: relative; vertical-align: middle; border-bottom: 1px solid #f2f2f2; padding: 1.8rem 0 1.5rem;}
.documentTitle .document_contents { display: inline-block; vertical-align: middle; padding: 0 10px; }
.documentTitle h4 { font-weight: 400; font-size: 1.5rem; }
.documentTitle .boxEdit { top: 2.7rem; right: 0; }

.docuIcon { display: inline-block; width: 2.4rem; vertical-align: middle; }
.docuHidden {display: none;}

.divide { padding: 0 2.5rem ; }
.docuList .divide + .divide .docuFirst{ border-top: 1px dashed #dadee1; }
.documentFile-list { position: relative; padding: 1.3rem 0; font-size: 0; }
.documentFile-list .boxEdit { right: 0; }
.documentFile-list .boxEdit-btn { width: 17rem; }
.formatImage { position: absolute; top: 1.8rem; left: 0; display: block; vertical-align: middle; background-color: #f8f9fa; border-radius: 0.3rem; border-bottom: 2px solid #dadee1; width: 2.4rem; height: 2.8rem; padding: 0; overflow: hidden; }
.formatImage img { object-fit:cover; width: 100%; }
.documentFile-name { display: block; vertical-align: middle; padding: 0 10px; }
.documentFile-name h5 { display: inline-block; vertical-align: middle; font-weight: 400; margin: 0;}
.documentFile-name h5 span{ color: #3d60ce; font-weight: 500; font-size: 1.5rem; }
.documentFile-name h5 a { color: #61676f; }
.documentFile-name h5 a:hover { color: #3d60ce; text-decoration: underline; }
.documentFile-name .verUpdate { display: inline-block; vertical-align: bottom; position: relative; margin-left: 11px; padding-left: 11px; }
.documentFile-name .verUpdate:before { content: ''; width: 1px; height: 11px; background-color: #cfcfcf; position: absolute; left: 0; top: 6px; }
.documentFile-name .verUpdate a { color: #666; font-size: 1.2rem; position: relative; display: inline-block; padding-right: 18px;} 
.documentFile-name .verUpdate a:before { position: absolute; right: 0; top:0.1rem; }
.documentFile-name .verUpdate a:hover { text-decoration: underline; }

.list-rightBtn { position: absolute; right: 5rem; top: 50%; transform: translateY(-50%); }
.list-rightBtn button { border: 1px solid #d9d9d9; color: #455ac8; font-size: 13px; line-height: 3rem; padding: 0 1.5rem; border-radius: 2rem; }
.list-rightBtn button span { padding-left: 0.5rem; }
.list-rightBtn button:before { position: relative; top:1px; }
.list-rightBtn button:hover { border-color: #455ac8;  }


.supportFile { margin-bottom: 2.5rem; border: 1px solid #edece3; border-radius: 4px; background-color: #fffef3; box-shadow: 0 1px 4px rgba(0,0,0,.03); padding-bottom: 1rem; }
.supportFile .document_contents p { font-size: 1.3rem; padding-top: 0.5rem; color: #b28850; }
.supportFile .divide li + li { border-top: 1px dashed #dadee1; }
.supportFile .divide li .documentFile-list { padding: 1.5rem 0; }
.supportFile .divide li .formatImage { top: 0.8rem; }
.supportFile .documentTitle { position: relative; padding-right: 150px; }
.supportFile .documentTitle .supportInfo-Btn { 
	position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 150px; 
	width: 150px; font-size: 1.3rem; padding: 0 15px; line-height: 3.3rem; border-color: #d0cebc; color: #b28850;
}
.supportFile .documentTitle .supportInfo-Btn:hover { background-color: #edebd7; }


.documentFile-list.docuFirst .documentFile-name { padding-left: 36px; }
.documentFile-list.docuSub { padding: 0.5rem 0 1.5rem; }
.documentFile-list.docuSub .documentFile-name { padding-left: 36px; }
.documentFile-list.docuSub h5 { font-size: 1.3rem; }
.documentFile-list.docuSub h5 span { font-size: 1.4rem; color: #888; }
.documentFile-list.docuSub:before { content: ''; display: block; position: absolute; left: 1rem; top: 1.4rem; width: 1.2rem; height: 1.2rem; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc;  }

.mContainer section.todo:before { background-color:inherit; }
.gantt .popover * { font-size: 13px; font-family: 'Noto Sans KR','notokr', sans-serif; }
.ganttWarp { position: relative; overflow: hidden; margin-bottom: 3rem; }
.reloadBtn { 
	position: absolute; top: 54px; left: 75px; z-index: 20; border: 1px solid #d9d9d9; 
	color: #455ac8; font-size: 13px; line-height: 3rem; padding: 0 1.5rem; border-radius: 2rem; 
}
.reloadBtn span { padding-left: 0.5rem; }
.reloadBtn:before { position: relative; top:1px; }
.reloadBtn:hover { border-color: #455ac8;  }

/* .todoList { position: relative;  } */

.white-popup-block .customSelect{ border-color: #d1d1d1; width: 220px; }

.todo-popup-block .divisionLine { margin: 5px 0; background-color: #fff; }


.warningBox { background-color: #fffef3; border-color: #edece3; padding: 2rem 2.5rem 2rem 2.5rem; font-size: 0; margin-bottom: 15px;  }
.warningBox p, .warningBox .warningCheck { display: inline-block; vertical-align: middle; margin: 0 2px; }
.warningBox p { color: #706f6a; font-size: 1.3rem; }
.warningBox .warningCheck { font-size: 0; }
.warningBox .warningCheck label { width: 16px; height: 16px; padding: 0; margin: 0; }
.warningBox .warningCheck label i { top:0; margin: 0; }

.divisionArea { text-align: right; margin-bottom: 1.5rem; padding: 0 0.5rem; position: relative; }
.todoState { overflow: hidden; position: absolute; left: 1.5rem; bottom: 0; color: #444; font-size: 1.4rem; }
.todoState li { float: left; line-height: 2.5rem;  }
.divisionLine-row { color: #cdcdcd; margin:0 10px; font-size: 1.2rem; position: relative; top: 1px; }
.todoState li em { font-size: 1.6rem; font-weight: 500; padding: 0 3px; }
.todoState li:nth-child( 3 ) em { color: #3d60ce; }
.todoState li:nth-child( 5 ) em { color: #eb4f86; }
.todoState li:nth-child( 7 ) em { color: #a5a5a5; }
.pointCircle { 
	border-radius: 15px; position: relative; width: 14px; height: 14px; display: inline-block;
	top: 1px; margin-right: 3px;  background: #365dcf; 
    background: -moz-linear-gradient(left, #365dcf 0%, #6c36cf 100%);
    background: -webkit-linear-gradient(left, #365dcf 0%, #6c36cf 100%);
    background: linear-gradient(to right, #365dcf 0%, #6c36cf 100%);
}
.pointCircle:before { content: ''; display: block; width: 6px; height: 6px; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); background: #fff; border-radius: 5px; } 

.todoState li:nth-child( 3 ) .pointCircle { background: #3d60ce; }
.todoState li:nth-child( 5 ) .pointCircle { background: #eb4f86; }
.todoState li:nth-child( 7 ) .pointCircle { background: #a5a5a5; }


.todo .customSelect { background-color: #fff; border-color: #ededed; border-radius: 3rem; display: inline-block; }

.todoLists li { padding: 2rem 21.5rem 2rem 2.5rem; }
.todoLists li + li { margin-top: 1.5rem; }

.todoChack { position: absolute; left: 2.5rem; top: 2.2rem; font-size: 0;}
.todoChack label { padding: 0; margin: 0; width: 16px; height: 16px; }
.todoChack label i { top:0; }

.todoContnet dt { font-weight: 500; padding-left: 2.5rem; }
.todo-info { color: #61676f; font-size: 1.3rem; margin-top: 8px; }
.todoDday { font-size: 1.3rem;  margin-top: 8px;  padding-top: 8px; border-top: 1px dashed #e5e5e5; color: #61676f;}
.todoDday span, .todoDday i { background-color: #3d60ce; display: inline-block; vertical-align:middle; margin-right:6px; 
	color: rgba(255,255,255,0.7); border-radius: 20px; font-size: 1.1rem; line-height: 2.2rem; width: 2.2rem; text-align: center; position: relative; top: -1px;}

.todo-writeUser.writeInfo { margin-top: 10px; position: absolute; right: 2rem; bottom: 1rem; }
.todo-writeUser.writeInfo * { font-size: 1rem;}
.PTB { width: 200px; position: absolute; right: 0rem; top:50%; transform:translateY(-50%); margin-top: -0.4rem; padding: 0 20px 0 40px; }
.PTB .previewImg { position:absolute; left:0; top:-0.1rem; width: 3.8rem; height: 3.8rem; padding: 0; border-radius: 40%; overflow: hidden; border: 1px solid #dfe1e8; }
/* .PTB .previewImg, .PTB .PTB-user { display: inline-block; vertical-align: middle; } */
.PTB .PTB-user { padding-left: 10px; font-size: 1.3rem; color: #61676f; }
.PTB .PTB-user em { display: block; color: #3a8bbb; font-size: 1.1rem; font-weight: 300; }

.todoLists .boxEdit { top: 2rem; }

.overTodo .todoDday span, .overTodo .todoDday i { background-color: #eb4f86; }
.endTodo .todoDday span, .endTodo .todoDday i { background-color: #c5c5c5; }

.endTodo .todoChack label i,
.endTodo .todoChack label.c-check i
{ background: #bdbdbd; }
.endTodo .todoContnet dt { color: #888; }
.endTodo .todoContnet dt em { color: #aaa !important; }

.ca_date { font-size: 1.2rem; padding-left: 2.2rem; color: #858585; }

#categoryBasic .customSelect { width: 100%; margin: 0.5rem 0; border-color: #d1d1d1; }
#categoryBasic .customSelect label, #categoryBasic .customSelect select { padding: 0.8rem 1rem; }


li.nullPage { padding: 2rem; text-align: center; position: relative; height: calc(100vh - 300px);}
.todoLists li.nullPage { height: calc(100vh - 470px); }
li.nullPage .nullPage-inner { position: absolute; top:47%; left: 50%; transform:translate(-50%, -50%); }
li.nullPage .nullPage-inner i { font-size: 7rem; color: #bfc7ce; margin-bottom:  1.2rem;}
li.nullPage .nullPage-inner p b { display:block; font-size: 1.7rem; color: #bfc7ce; font-weight: 500; }
li.nullPage .nullPage-inner p span { color: #bfc7ce; font-size: 1.4rem; display: block; margin: 1rem 0 2rem; padding-top: 1rem; border-top: 1px dashed #e7e7e7;}
li.nullPage .nullPage-inner .lineBtn { border-color: #bfc7ce; width: 200px; }
li.nullPage .nullPage-inner a { color: #787e83; }

.latestUpdate-todo li.nullPage, .latestUpdate-document li.nullPage { border: 0; box-shadow: none; }
.latestUpdate-todo li.nullPage .nullPage-inner i, .latestUpdate-documen li.nullPage .nullPage-inner i { font-size: 5rem; } 

.full-maxContainer { max-width: 1500px; padding-bottom: 6rem; }
.selectBoard .basicBoard { padding: 3rem;}
.selectBoard .basicBoard .allText { padding-bottom: 10px; }
.selectBoard .basicBoard table tr td { padding: 10px 5px; }
.selectBoard .basicBoard table tr td a { text-decoration: underline; color: #365dcf; }
.selectBoard .basicBoard table tr td select { padding: 0.8rem 4rem 0.8rem 1rem; }
.selectBoard .boxSearch { margin-bottom: 15px;}
.selectBoard .boxSearch select { font-size: 1.4rem; height: 4.2rem; }
.selectBoard .boxSearch .search { padding: 2rem 3rem; text-align: center; width: 800px;  margin: auto; }
.selectBoard .boxSearch .searchInput { font-size: 0; vertical-align: middle; }
.selectBoard .boxSearch .searchInput input { width: 635px; display: inline-block; font-size: 1.4rem; }
.selectBoard .boxSearch .search .searchBtn { margin-left: 5px; font-size: 0; display: inline-block; position: static; width: 60px; min-width: 100px; line-height: 4rem; height: 4.2rem;}
.selectBoard .boxSearch .search .searchBtn i { font-size: 1.6rem; display: inline-block; line-height: 4rem;     vertical-align: middle;}
.selectBoard .boxSearch .search .searchBtn span { font-size: 1.4rem; margin-left: 5px; padding-right: 5px; position: relative; line-height: 4rem; display: inline-block; vertical-align: middle; }

.selectBoard .boxSearch .memberSearch select { width: 100px; }
.selectBoard .boxSearch .memberSearch .searchInput { margin-left: 3px; }
.selectBoard .boxSearch .memberSearch .searchInput input { width: 320px; }

.selectBoard .basicBoard .userMail { font-size: 1.1rem; color: #3a8bbb; }
.selectBoard .searchSelect-area { margin-left: -5px; overflow: hidden; }
.selectBoard .searchSelect-area li { float: left; width: 33.3333%; padding-left: 5px; position: relative;}
.selectBoard .searchSelect-area select { width: 100%;  }
.selectBoard .searchWarp { display: inline-block; }

.selectBoard .searchSelect-area li:after {
	position: absolute; top: 1px; right: 3rem;  width: 100px; height: calc(100% - 2px);
	content: ""; background: linear-gradient(to right, transparent, white); pointer-events: none;
} 


.diskVolume { padding-bottom: 20px; }
.diskVolume-content { position: relative; }
.diskVolume-info { padding: 0 7px; color: #757988; font-size: 1.5rem; }
/* .diskVolume-content i { position: absolute; left: 0; top: 50%; transform:translateY(-50%); font-size: 100px; } */
.diskVolume-chart {  position: relative; height: 50px;  overflow: hidden; }
.diskVolume-chart em { position: absolute; top:0; left: 0; height: 100%; background-color: #eb6284; line-height: 48px; padding: 0 20px; color: #fff; text-align: center; }
.diskVolume-chart em:after {
	content: '';
	position: absolute;
	top:0; right: -8px; height: 100%;  width: 8px;
	border-right: 1px solid #ccc;
	background-image: url("/style/custom/img/volume.png");
	background-size: 5px; opacity: 0.5;
}


.note-toolbar .btn-sm, .note-toolbar .btn-group-sm > .btn { height: 30px; }
.note-toolbar .dropdown-toggle { padding-right: 3px;  }
.note-toolbar .dropdown-toggle .note-icon-magic, .note-toolbar .dropdown-toggle .note-icon-align-left { margin-right: 5px; }


.searchPage { position: relative; }
.searchHero { padding: 50px 20px; background-color: #e7f6fd; position: relative; border-radius: 0 0 0 30px; border-bottom: 1px solid #e4edf2; border-left: 1px solid #e4edf2; }
.searchHero:before {
	content: ''; position: absolute; bottom: 0; right: -16px; width: 434px; height: 100%;
    background-image: url(http://test.vision337.com:9880/style/img/common/null_img/dot.png);
    background-size: 12px; background-position: center left; z-index: 1; opacity: 0.3;
}
.searchHero:after { content:''; position: absolute; top:0; right: -15px; height: calc(100% + 1px); width: 15px; background-color: #e7f6fd; border-bottom: 1px solid #e4edf2; z-index: 0;  }
.searchHero .seachArea { margin: 0 auto; width: 600px; box-shadow: 0 2px 10px 0 rgba(0,0,0,.06); border-radius: 0.5rem; border-bottom: 1px solid #e0e5eb; position: relative; z-index: 2; }
.searchHero .seachArea input { padding: 2.7rem 2.5rem 2.9rem; width: 355px; }
.searchHero .seachArea .customSelect { width: 130px; }
.searchHero .seachArea .customSelect:before { right: 22px; }
.searchHero .seachArea .customSelect:after { height: 100%; background-color: #e5edef; }
.searchHero .seachArea .customSelect label, .searchHero .seachArea .customSelect select { padding: 2.8rem 2.5rem 2.8rem 2rem; }
.searchHero .seachArea button { 
	background: #365dcf; width: auto; height: 50px; padding: 0 28px 0 22px;
    background: -moz-linear-gradient(left, #365dcf 0%, #6c36cf 100%);
    background: -webkit-linear-gradient(left, #365dcf 0%, #6c36cf 100%);
    background: linear-gradient(to right, #365dcf 0%, #6c36cf 100%);
    border-radius: 0.3rem; color: #fff;
}
.searchHero .seachArea button img { display: inline-block; width: 20px; vertical-align: middle; position: relative; top: 0.5px; } 
.searchHero .seachArea button span { display: inline-block; line-height: 50px; vertical-align: middle; padding-left: 5px;} 

.searchPage .heroTab { padding-left: 5px; margin-top: 1.5rem; margin-bottom: 1.3rem; border-top: 0;}

.searchPage li.nullPage { height: calc(100vh - 400px); }
/* .searchPage:after { content: ''; position: absolute; right:0; border-radius: 0 0 0 30px; height: 100%; width: 90%;  background-color: #e7f6fd; }  */
.searchPage .todoContnet dt { padding-left: 0; }

.tui-full-calendar-popup-section-item .tui-full-calendar-content,
.tui-full-calendar-popup-detail .tui-full-calendar-content { font-size: 13px !important; font-weight: 300; }