@charset "utf-8";

/******************************* common-main *******************************/

    .top-userinfo{display:none;}   
	.main-container{padding:1.5em;border:1px solid #d5dee7;border-radius:.28571429em;-webkit-border-radius:.28571429em;-moz-border-radius:.28571429em;}	
	.normal-title{width:100%;border-bottom:1px solid #dedede;height:35px;}
	.normal-title h4{float:left;font-size:1.2em;padding:0;margin:0;}
	.normal-title .right-cont{float:right;display:block;}
	.normal-title .right-cont i{margin-left:0.5em;}

	.ui.header.tbl-title{display:inline-block;}
	.ui.header.tbl-title > .icon{font-size:1.2em;margin-right:0.4em;vertical-align:top;display:inline-block;}
	.ui.header.tbl-title .tbl-s-title{font-size:1em;margin-left:0.3em;}
	.ui.header.tbl-title .tbl-s-title > .icon{font-size:0.9em;margin:0 0.2em;}

	.ui.header.bdb-title{border-bottom:1px solid #d5dee7;padding-bottom:0.7em;}

	.normal-dl{position:relative;height:30px;margin:0;}
	.normal-dl dt{width:45%;float:left;line-height:1.5;color:#333;}
	.normal-dl dd{width:55%;line-height:1.5;color:#777;margin:0;float:right;}

	.officemain-table{width:100%;font-size:0.941rem;border-top:1px solid #002d7a;}
	.officemain-table a{color:#333;}
	.officemain-table thead th,.officemain-table tbody th{padding:10px 40px;background:#eef3f8;border-bottom:1px solid #e0e0e0;color:#131313;font-weight:normal;}
	.officemain-table tbody th{background:#fafafa !important;}
	.officemain-table tbody td,.officemain-table tbody th{padding:10px;word-break:break-all;text-align:center;color:#727171;line-height:1.5;vertical-align:middle;font-weight:normal;}
	.officemain-table thead th,.officemain-table tbody th,.officemain-table tbody td{border-left:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;}
	.officemain-table thead th:last-child,.officemain-table tbody td:last-child{border-right:1px solid #e0e0e0;}
	.officemain-table tbody th{color:#131313;background:#fafafa;}
	.officemain-table tbody td a:hover{text-decoration:underline;}

	@media only screen and (max-width:991px){	

		.top-userinfo{position:absolute;bottom:0px;left:0px;display:inline-block;width:100%;padding:1em 0 3em 0;background:rgba(255,255,255,0.1);}
		.top-userinfo .user-name{float:left;color:#fff;font-weight:normal;font-size:1.5em;}
		.top-userinfo .user-name span{font-size:0.9em;padding-left:0.5em;}
		.top-userinfo .top-ticker{float:right;height:30px;overflow:hidden;}
		.top-userinfo .top-ticker li{float:none;height:30px;color:#fff;text-align:right;}
		.top-ticker .ticker-title{display:inline-block;height:20px;padding:0 7px;background:rgba(255,255,255,0.3);font-size:0.85em;border-radius:3px;text-align:center;}
		.top-ticker .ticker-amount{font-size:1.8em;padding:0 0.3em 0 0.5em;vertical-align:middle;}
		.top-ticker .ticker-unit{font-size:1.1em;}
	    .ui.container.contents-wrap.mm-main{margin:-3em 0 0 0;padding:0;border:none;background:none;border-radius:0;}
	    .office-main{background:#f5f8fb;padding-bottom:2em;}
		.ui.header.tbl-title{width:100%;border-bottom:1px solid #dedede;height:35px;font-size:1.071em;}
		.ui.header.tbl-title .tbl-s-title{font-size:1em;margin-left:0.2em;}
		.ui.container.contents-wrap .main-container{border:none;padding:0;border-radius:0;}
	}

	@media only screen and (max-width:767px){
	    .ui.header.tbl-title{font-size:1em;}	
	}



/******************************* 메인 - 팝업 *******************************/

	/*.main-popup {position:absolute;background-color:#333;border:1px solid #000;z-index:9999;width: 402px;}*/
	.main-popup {position:absolute;background-color:#333;border:1px solid #000;z-index:9999;width: 330px;}
	.main-popup .pop-top{width:100%;/*z-index:999;position:absolute;top:0;left:0;*/height:50px;display:inline-block;margin:0;background:#333;padding:0 14px;box-sizing:border-box;-webkit-box-sizing:border-box;}
	.main-popup .pop-top h2 {font-size:16px;color:#fff;float:left;line-height:50px;}
	.main-popup .pop-top a {float:right;color:#fff;font-size:14px;line-height:50px;padding-left:14px;border-left:1px solid #888;margin-top:-1px;}
	.main-popup .pop-top a span {font-size:18px;font-weight:bold;}
	.main-popup .pop-content { padding: 10px;}
	.main-popup .pop-btm {position:relative;bottom:0;left:0;width:100%; height:40px;padding:10px 14px;box-sizing:border-box;z-index:999;background:#eee; }
	.main-popup .pop-btm .close-check {float:right; margin: 0px;}
	.main-popup .visualslide {width:100%;height:100%; /*position:relative;*/}
	.main-popup .visualslide .slide-list{display:inline-block;margin:0;padding:0;}
	.main-popup .visualslide .slide-list li{width:100%;height:100%;position:relative;margin:0;}
	.main-popup .visualslide .slide-list li img{width:auto;height:auto;overflow:hidden;display:block;margin:0;padding:0;}
	.main-popup .visualslide .slide-list li .imgbg{position:relative;left:0;top:0;}

	@media only screen and (max-width:400px){
		/*.main-popup {width: 300px;}*/
	}
	


/******************************* 메인상단 - 공지사항 *******************************/

	.ticker-notice-wrap{position:relative;}
	.ticker-notice-wrap .notice-title{position:absolute;margin:0;padding:0;font-size:1.2em;font-weight:bold;letter-spacing:0.5px;line-height:25px;}
	.ticker-notice-wrap .notice-ticker{padding-left:100px;height:25px;overflow:hidden;}
	.ticker-notice-wrap .notice-ticker li{height:25px;float:none;display:inline-block;width:100%;line-height:25px;}
	.ticker-notice-wrap .notice-ticker li a{font-size:1em;color:rgba(0,0,0,0.7);}
	.ticker-notice-wrap .notice-ticker li a:hover{color:#2986ce;}
	.ticker-notice-wrap .notice-ticker li .label-new{display:inline-block;width:16px;height:15px;line-height:13px;text-align:center;font-size:0.7em;color:#fff;font-weight:bold;border-radius:3px;margin-left:0.4em;}
	.ticker-notice-wrap .notice-ticker li .notice-date{float:right;color:rgba(0,0,0,0.5);font-size:0.941rem;}

	@media only screen and (max-width:991px){
		.ticker-notice-wrap.contents-box{display:none;}
	}


/******************************* 메인상단 *******************************/

	.main-top-wrap,.main-middle-wrap,.main-middle2-wrap,.main-bottom-wrap{position:relative;clear:both;margin-top:1em;display:inline-block;width:100%;}

	/* 나의정보 */
	.main-top-wrap .main-profile{width:25%;float:left;}
	.main-top-wrap .main-profile .contents-box{margin-right:1em;min-height:370px;position:relative;}
	.main-top-wrap .main-profile .contents-box .user-photo{width:100%;height:140px;background:#000e3f;border-radius:.28571429em;}
	.main-top-wrap .main-profile ul li{float:none;}
	.main-top-wrap .main-profile .object-center{margin:0;position:absolute;bottom:20px;left:0;}

	/* 상단 오른쪽 컨텐츠 */
	.main-top-wrap .main-top-right{width:75%;float:right;}
	.main-top-wrap .main-top-right .main-color-box{margin-bottom:1em;}
	.main-top-right .main-color-box ul{display:inline-block;width:100%;}
	.main-top-right .main-color-box ul li{width:33.33%;float:left;}
	.main-top-right .main-color-box ul li .color-box{position:relative;margin-left:1em;display:block;padding:1.5em;color:#fff;border-radius:.28571429em;}
	.color-box h4{font-size:1.2em;font-weight:normal;padding-bottom:1.5em;padding-top:0.5em;}
	.color-box .color-box-unit{font-size:2em;}
	.color-box .color-box-unit span{font-size:1em;padding-left:0.5em;}
	.color-box .color-box-icon{position:absolute;top:1.5em;right:1.5em;width:50px;height:50px;border-radius:50%;display:table;background:rgba(0,0,0,0.3);}
	.color-box .color-box-icon i{display:table-cell;vertical-align:middle;color:rgba(255,255,255,0.7);text-align:center;font-size:1.5em;}

	.main-text-box{clear:both;}
	.main-text-box ul{display:inline-block;width:100%;}
	.main-text-box ul li{width:33.33%;float:left;}
	.main-text-box ul li .contents-box{position:relative;height:205px !important;margin-left:1em;display:block;padding:1.5em;border-radius:.28571429em;text-align:center;}
	.main-text-box ul li:first-child .contents-box{margin-left:0;}
	.main-text-box ul li h5{font-size:1.2em;color:#000;margin-bottom:1.5em;text-align:left;}
	.main-text-box ul li p{font-size:1em;color:#555;text-align:left;}
	.main-text-box ul li .basic{margin:1em auto 0 auto;}
	.main-text-box ul li br{display:none;}

	.table-wrap{position:relative;overflow-x:hidden;}
	.table-wrap .ui.celled.table.tt-center{border-top:1px solid #011233;}
	.table-wrap .ui.celled.table.tt-center thead th{background:#eef3f8;}
	.table-wrap .ui.celled.table.tt-center th{font-weight:normal;}
	.table-wrap .ui.celled.table.tt-center th,.table-wrap .ui.celled.table.tt-center td{text-align:center;}
	.table-wrap .ui.celled.table.tt-center tfoot{background:#eee;}
	.main-container .ui.table{font-size:0.941rem;}
	.main-container .table-wrap{margin:0 auto;}
	


	@media only screen and (max-width:1200px){
		.main-container .main-top-wrap .main-text-box ul li .contents-box{width:auto;margin:0 0 0 1em !important;}
		.main-container .main-top-wrap .main-text-box ul li:first-child .contents-box{margin:0 0 0 0 !important;}
	}

	@media only screen and (max-width:991px){
		.ui.container.contents-wrap .main-container .contents-box{margin:0.5em auto;height:auto;position:relative;}
		.main-top-wrap .main-top-right .main-color-box{display:none;}
		.main-top-wrap{margin-top:0;}
		.main-top-wrap .main-profile,.main-top-wrap .main-top-right{width:100%;}
		.main-top-wrap .main-profile ul li{float:left;}
		.main-top-wrap .main-profile ul li.first-child{width:40%;}
		.main-top-wrap .main-profile ul li.last-child{width:60%;}
		.main-top-wrap .main-profile .contents-box .user-photo{width:100px;height:100px;border-radius:50%;background-size:90% 90%;margin-top:1em;display:table;}
		.contents-box .user-photo span{display:table-cell;vertical-align:middle;}
		.bg-title{position:relative;overflow:hidden;margin-bottom:8px;padding:0 3.125%;-webkit-border-radius:5px;border-radius:5px;line-height:40px;color:#fff;text-align:center;font-size:1.2em;font-weight:normal;}
		.main-container .object-center{margin:0.5em auto 1em auto;}

		.table-wrap{overflow-x:scroll;}


		/* 모바일 - 슬라이드 */
		.slider-wrap{}
		.slider-wrap .slidecont{display:inline-block;}
		.slider-wrap .slidecont li{display:inline-block;float:left;height:110px;border-right:1px dashed #bfd0e1;padding-left:1em;}
		.slider-wrap .slidecont.height-70 li{height:70px;}
		.slider-wrap .slidecont.height-160 li{height:160px;}
		.slider-wrap .slidecont.height-160 .slide-inner{margin-bottom:0.1em;}
		.slider-wrap .slidecont.height-160 .slide-inner .inner-box{width:95px;font-size:0.857em;padding:0.5em 0;}
		.slider-wrap .slidecont .slide-title{margin-bottom:5px;font-size:1.071em;color:#333;font-weight:normal;}
		.slider-wrap .slidecont .slide-inner{display:inline-block;line-height:1;letter-spacing:0;color:rgba(0,0,0,0.8);margin-bottom:0.3em;}
		.slider-wrap .slidecont .slide-inner .inner-box{width:80px;padding:0.5em;display:block;font-size:0.857em;letter-spacing:-0.03em;float:left;margin-right:0.5em;color:#fff;border-radius:.28571429em;text-align:center;}
		.slider-wrap .slidecont .slide-inner .inner-num{line-height:1.5em;}
		.slider-wrap .slidecont .slide-inner .inner-bignum{font-size:1.5em;margin-right:0.5em;}
		.slider-wrap .bx-wrapper .bx-prev{background:url('../../../images/myoffice/controls.png') no-repeat 0 -32px;}
		.slider-wrap .bx-wrapper .bx-next{background:url('../../../images/myoffice/controls.png') no-repeat -34px -32px;}
		.slider-wrap .bx-wrapper .bx-prev:hover{background-position:0 0;}
		.slider-wrap .bx-wrapper .bx-next:hover{background-position:-34px 0;}
		.slider-wrap .bx-wrapper .bx-controls-direction{position:absolute;top:0.7em;right:1em;}
		.slider-wrap .bx-wrapper .bx-controls-direction a{display:block;outline:0;width:32px;height:32px;text-indent:-9999px;z-index:9999;float:left;margin-left:0.2em;}
		.slider-wrap .bx-wrapper .bx-controls-direction a.disabled{display:none;}
	}

	@media only screen and (max-width:767px){
		.main-top-wrap .main-profile .contents-box .user-photo{width:90px;height:90px;border-radius:50%;background-size:90% 90%;}
		.slider-wrap .slidecont .slide-title{font-size:1em;}
		.color-box .color-box-unit{font-size:1.5em;text-align:right;}
		.color-box .color-box-icon{display:none;}
		.main-text-box ul li .contents-box{padding:1em;}
		.color-box h4{font-size:1em;}
	}

	@media only screen and (max-width:640px){
		.main-text-box ul li .contents-box{padding:1em 0.5em;}
		.main-text-box ul li .contents-box p{font-size:13px;}
		.main-text-box ul li .basic{width:100px;line-height:1.3;padding:0.5em 1em;position:absolute;bottom:15px;left:50%;margin-left:-50px;}
		.main-text-box ul li br{display:block;}
		.main-container .main-top-wrap .main-text-box ul li .contents-box{height:220px !important;margin:0 0 0 0.5em !important;}
		.main-top-right .main-color-box ul li .color-box{margin-left:0.5em;padding:1em 0.5em;min-height:90px;}
		.color-box h4{padding-bottom:0.5em;}
		.main-text-box ul li h5{margin-bottom:0.2em;}
	}

	@media only screen and (max-width:480px){
		.main-text-box ul li .basic{width:80px;margin-left:-40px;}
		.main-text-box ul li .contents-box p{font-size:12px;}
	}



/******************************* 메인중앙 - 중앙1 컨텐츠 *******************************/

	/* 직추천매출현황 */
	.main-middle-wrap .middle-left{width:40%;float:left;}
	.main-middle-wrap .middle-right{width:60%;float:right;}
	.main-middle-wrap .middle-left .contents-box{margin-right:1em;height:287px;}

	@media only screen and (max-width:991px){
		.main-middle-wrap{margin-top:0;}
		.main-middle-wrap .middle-left,.main-middle-wrap .middle-right{width:100%;}
		.main-middle2-wrap{display:none;}
	}



/******************************* 메인-bottom 컨텐츠 *******************************/

	.main-bottom-wrap .bottom-notice{width:40%;float:left;}
	.main-bottom-wrap .bottom-notice .main-bottom-cont.contents-box{height:285px;}
	.main-bottom-wrap .bottom-notice ul{}
	.main-bottom-wrap .bottom-notice ul li{display:inline-block;width:100%;position:relative;border-bottom:1px solid #dedede;padding:0.2em 0 0.3em 0;}
	.main-bottom-wrap .bottom-notice ul li a{display:block;color:#555;font-size:0.941rem;height:20px;text-overflow:ellipsis;float:left;overflow:hidden;}
	.main-bottom-wrap .bottom-notice ul li:hover a,.main-bottom-wrap .bottom-notice ul li:hover .notice-date{color:#000;cursor:pointer;}
	.main-bottom-wrap .bottom-notice ul li .notice-date{float:right;font-size:0.8em;color:#999;}

	.main-bottom-wrap .bottom-carlendar{width:40%;float:left;}
	.main-bottom-wrap .bottom-carlendar .main-bottom-cont.contents-box{margin:0 1em;padding:0;padding:0 1em;}
	.hasDatepicker .ui-widget.ui-widget-content{border:0;max-width:100%;}
	.main-bottom-cont.contents-box .datepicker .ui-datepicker td a{padding:.25em;}
	.main-bottom-wrap .bottom-carlendar .hasDatepicker .ui-widget.ui-widget-content{margin:0 auto;}
	.main-bottom-wrap .bottom-carlendar .ui-datepicker table{margin:0 0 1em 0;}

	.main-bottom-wrap .bottom-banner{width:20%;float:right;}
	.main-bottom-wrap .bottom-banner .main-bottom-cont.contents-box{display:inline-block;width:100%;padding:0.76em;}
	.main-bottom-wrap .bottom-banner a{display:block;}
	.main-bottom-wrap .bottom-banner .main-bottom-cont.contents-box:hover{border:1px solid #97a4b8;}
	.main-bottom-wrap .bottom-banner .ui.label{font-size:1em;}
	.main-bottom-wrap .bottom-banner .ui.label .icon{color:#97a4b8;font-size:1.5em;}

	@media only screen and (max-width:1200px){
		.main-bottom-wrap .bottom-banner .ui.label{font-size:0.9em;}
		.ui.label > .icon{margin:0em 0.4em 0em 0em;}
		.main-bottom-wrap .bottom-notice ul li a{width:250px;}
	}

	@media only screen and (max-width:991px){
		.main-bottom-wrap{display:none;}
		/*모바일 아이콘메뉴*/
		.m-bottom-banner{position:relative;}
		.m-bottom-banner ul.icon-menu-list{overflow:hidden;}
		.m-bottom-banner ul.icon-menu-list li{float:left;display:inline-block;width:25%;text-align:center;}
		.m-bottom-banner ul.icon-menu-list li a{display:block;padding:0 0.5em;}
		.m-bottom-banner ul.icon-menu-list li a .icon-menu{display:table;width:7em;height:7em;border-radius:50%;box-sizing:border-box;margin:0 auto;}
		.m-bottom-banner ul.icon-menu-list li a .icon-menu span{display:table-cell;vertical-align:middle;}
		.m-bottom-banner ul.icon-menu-list li a .icon-menu span img{width:45%;margin:0;padding:0;}
		.m-bottom-banner ul.icon-menu-list li p{font-size:1em;margin:1em 0 0 0;color:#555;}
		.m-bottom-banner ul.icon-menu-list li .mbg-blue{border:4px solid #bcd2e7;background:#00519c;background:-moz-linear-gradient(-45deg, #00519c 0%, #4990d1 100%);background:-webkit-linear-gradient(-45deg, #00519c 0%,#4990d1 100%);background:linear-gradient(135deg, #00519c 0%,#4990d1 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00519c', endColorstr='#4990d1',GradientType=1 );}
		.m-bottom-banner ul.icon-menu-list li .mbg-mint{border:4px solid #b7e2e5;background:#1ca7b1;background:-moz-sit-linear-gradient(-45deg, #1ca7b1 0%,#6fc6cc 100%);background:linear-gradient(135deg, #1ca7b1 0%,#6fc6cc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1ca7b1', endColorstr='#6fc6cc',GradientType=1 );}
		.m-bottom-banner ul.icon-menu-list li .mbg-grn{border:4px solid #c3e6cc;background:#3cbd5e;background:-moz-linear-gradient(-45deg, #3cbd5e 0%, #88cd9a 100%);background:-webkit-linear-gradient(-45deg, #3cbd5e 0%,#88cd9a 100%);background:linear-gradient(135deg, #3cbd5e 0%,#88cd9a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3cbd5e', endColorstr='#88cd9a',GradientType=1 );}
		.m-bottom-banner ul.icon-menu-list li .mbg-rd{border:4px solid #f4cad4;background:#d51845;background:-moz-linear-gradient(-45deg, #d51845 0%, #d95171 100%);background:-webkit-linear-gradient(-45deg, #d51845 0%,#d95171 100%);background:linear-gradient(135deg, #d51845 0%,#d95171 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d51845', endColorstr='#d95171',GradientType=1 );}
		.m-bottom-banner ul.icon-menu-list li .mbg-pink{border:4px solid #f4cad4;background:#db6b85;background:-moz-linear-gradient(-45deg, #db6b85 0%, #f7a0b4 100%);background:-webkit-linear-gradient(-45deg, #db6b85 0%,#f7a0b4 100%);background:linear-gradient(135deg, #db6b85 0%,#f7a0b4 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d51845', endColorstr='#d95171',GradientType=1 );}
	}

	@media only screen and (max-width:767px){
		.m-bottom-banner ul.icon-menu-list li a .icon-menu{width:6em;height:6em;}
	}

	@media only screen and (max-width:640px){
		.m-bottom-banner ul.icon-menu-list li a .icon-menu{width:5em;height:5em;}
		.m-bottom-banner ul.icon-menu-list li a .icon-menu span img{width:50%;}
	}
	@media only screen and (max-width:480px){
		.m-bottom-banner ul.icon-menu-list li a .icon-menu{width:4em;height:4em;}
		.m-bottom-banner ul.icon-menu-list li a .icon-menu span img{width:45%;}
		.m-bottom-banner ul.icon-menu-list li p{font-size:0.9em;}
	}