@charset 'utf-8';

/* ******************************************************************************************************

	layout media query

****************************************************************************************************** */
@media screen and (max-width:1024px){
	/* 설문조사 */
	.surveyDataList{ border-left:1px solid #b7b7b7; border-right:1px solid #b7b7b7}
	.surveyDataList table{ display:block;}
	.surveyDataList th{ text-align:left; border-right:none;}
	.surveyDataList tfoot,
	.surveyDataList tbody,
	.surveyDataList tr,
	.surveyDataList th,
	.surveyDataList td{ display:block; width:100%;}
	.surveyDataList .graph{ width:80%; float:left; height:49px;}
	.surveyDataList .value{ width:20%; float:left; height:49px; padding: 0; padding-top: 5px; padding-right: 10px; }
	.surveyDataList .value span{word-break:keep-all; display:block;}
	.surveyDataList tfoot tr:after{ clear:both; display:block; content:'';}
	.surveyDataList tfoot th{ float:left; width:50%; text-align:center;}
	.surveyDataList tfoot td{ float:left; width:50%;}
	/* 설문조사 */

	.nav-container.display-hide{display:none !important}
	
	/* 모바일 확인용 */
	#indicator{display:none;}
	/* ******************************************************************************************************

		헤더

	****************************************************************************************************** */
	html.direction-left .header .user-info{padding-left:43px;}
	html.direction-right .header .user-info{padding-right:43px;}
	.user-info .user-state{display:none;}
	.user-info .user-push{float:right;padding-right:10px;}
	.user-info .nav-collapse-btn{display:block;width:43px;}
	.nav-collapse-btn > span:before{top:-5px;}
	.nav-collapse-btn > span:after{top:5px;}
	.user-info .site-setting{width:100%;}
	.user-info .site-setting > button{padding-left:5%;text-align:left;}
	.pjax-tab-menu-wrap .whole-tabs.setting-list li > a{padding-left:0;text-align:center}
	.setting-list li > a{text-align:left;padding-left:5%}
	
	/* ******************************************************************************************************

		본문

	****************************************************************************************************** */
	html.direction-left .view-container{margin-left:0;}
	html.direction-left .view-container.collapse{margin-left:0;}
	html.direction-right .view-container{margin-right:0;}
	html.direction-right .view-container.collapse{margin-right:0;}

	/* ******************************************************************************************************

		네비게이션

	****************************************************************************************************** */
	.nav-container{-webkit-transition:-webkit-transform 0.4s;transition:transform 0.4s;}
	html.direction-left #navContainer{-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);
	transform:translate3d(-100%,0,0);}
	html.direction-right #navContainer{-webkit-transform:translate3d(100%,0,0);-moz-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);
	transform:translate3d(100%,0,0);}

	html.direction-left .nav-container.m-expand,
	html.direction-right .nav-container.m-expand{-webkit-transform:translate3d(0,0,0)!important;-moz-transform:translate3d(0,0,0)!important;-ms-transform:translate3d(0,0,0)!important;transform:translate3d(0,0,0)!important;}

	.overlay.is-active{visibility:visible;opacity:1;}


	html.ie8.direction-left .nav-container,
	html.ie9.direction-left .nav-container{left:-100%;}
	html.ie8.direction-right .nav-container,
	html.ie9.direction-right .nav-container{right:-100%;}

	html.ie8.direction-left .nav-container.m-expand,
	html.ie9.direction-left .nav-container.m-expand{left:0;}
	html.ie8.direction-right .nav-container.m-expand,
	html.ie9.direction-right .nav-container.m-expand{left:0;}



	html.direction-right .nav-header .page-settings > ul > li.skin > ul:after{right:35px;}

	.nav-header{padding-top:14px;padding-bottom:12px;}	
	.nav-header h1{display: inline-block;vertical-align: top;}
	.nav-header h1 a{height:24px;}
	.nav-header h1 a img{width: 125px;height: auto;display: block;margin-left: 10px;}
	.nav-header .nav-collapse-btn{border:0;}
	.nav-header .nav-collapse-btn > span{width:15px;}
	.nav-header .nav-collapse-btn{top:10px;}
	.nav-header .page-settings{right:49px;}
	.nav-header .page-settings > ul > li.skin > button{margin-right:15px;top:18px;}
	.main-menu-wrap{margin: -49px 0 -35px 0;min-height:100%;}
	.main-menu{padding:49px 0 35px 0;}
	.main-menu > ul > li > ul > li > a{padding-left:31px;}
	.nav-bottom{width:100%;position: relative;top:-1px;display:block;overflow:hidden;border-top:1px solid #3d434f;background:#2f3541;height: 35px;}
	.nav-bottom > li{float:left;width:50%;}
	.nav-bottom > li:first-child{border-right:1px solid #3d434f;}
	.nav-bottom > li > a{display:block;width:100%;height:35px;line-height:35px;color:#a7abb7;font-weight:700;}
	.nav-bottom > li:first-child > a{background:url(/ccp_img/logout_bottom.png) no-repeat 29px 50%;background-size:19px 14px;text-indent:54px}
	.nav-bottom > li+li {text-align: center;line-height: 35px;color:#a7abb7;}
	

	html.ie8 .nav-bottom > li:first-child > a{background:url(/ccp_img/ie8-logout_bottom.png) no-repeat 29px 50%;text-indent:54px}
	
    /* ******************************************************************************************************

      pjax tab

    ****************************************************************************************************** */ 
    .pjax-tab-menu-wrap .pajx-tab-panel.setting-list {max-height:400px;}
    .pjax-tab-menu-wrap .pajx-tab-panel.setting-list > ul > li > a .close-tab{display:none !important;}

    /* ******************************************************************************************************

      대시보드 레이아웃

    ****************************************************************************************************** */
    .panel-row{margin-bottom:0;}
    .panel-row > .panel{margin-bottom:10px;}
    .panel-row > .col-s{width:100%;}
    .panel-row > .col-xr{width:100%;}
  
    /* 반응형 테이블 */
    .table-layout table .item-tablet-hidden {display:none;}
	
	/* 버튼 스타일링 미디어 쿼리 */
	.btn-area button,
	.btn-area a{width: 200px;}
	.btn-area.ar{text-align:center;}
	.btn-area.al{text-align:center;}
	
	/* 북마크 버튼 */
	.bookmark-list-pc ul li {transition: none;}
	.bookmark-list-pc > ul.open > li {opacity: 1;z-index: 100;display: block;}
	.bookmark-list-pc > ul{position: static;top: 0;right: 0;left: 0;bottom: 0;}
	.bookmark-list-pc > ul > li{position: fixed;top: 50%;left: 50%;width: 100px;height: 100px;margin-top: -155px;margin-left:-155px;z-index: 300;display: none;}
	.bookmark-list-pc > ul > li + li{margin-left: -50px;}
	.bookmark-list-pc > ul > li + li + li{margin-left: 55px;}
	.bookmark-list-pc > ul > li + li + li + li{margin-left: -155px;margin-top: -50px;}
	.bookmark-list-pc > ul > li + li + li + li + li{margin-left: -50px;margin-top: -50px;}
	.bookmark-list-pc > ul > li + li + li + li + li + li{margin-left: 55px;margin-top: -50px;}
	.bookmark-list-pc > ul > li + li + li + li + li + li + li{margin-left: -155px;margin-top: 55px;}
	.bookmark-list-pc > ul > li + li + li + li + li + li + li + li{margin-left: -50px;margin-top: 55px;}
	.bookmark-list-pc > ul > li + li + li + li + li + li + li + li + li{margin-left:55px;margin-top:55px;}
	.bookmark-list-pc > ul > li + li + li + li + li + li + li + li + li + li{margin-left:-155px;margin-top:160px;}
	.bookmark-list-pc > ul > li + li + li + li + li + li + li + li + li + li + li{margin-left:-50px;margin-top:160px;}
	.bookmark-list-pc > ul > li + li + li + li + li + li + li + li + li + li + li + li{margin-left:55px;margin-top:160px;}

	/* .bookmark-list-pc > ul > li a{padding-top: 68px;} */
	.bookmark-list-pc ul li a{display: table-cell;width: 100px;height: 100px;}
	.bookmark-list-pc.bbs ul.open .sub-category ul{position: static;top: 0;left: 0;right: 0;bottom: 0;z-index: 80;-webkit-transition: none;transition: none;}
	.bookmark-list-pc.bbs ul.open .sub-category li{width: 100px;height: 100px;position: fixed;top: 50% !important;left: 50%;right: 0 !important;margin-top: 55px;margin-left: -50px;-webkit-transition: none;transition: none;}
	.bookmark-list-pc.bbs ul.open .sub-category li + li{width: 100px;height: 100px;position: fixed;top: 50%;left: 50%;margin-left: 55px;}
	/*메뉴관리*/
	.bookmark-list-pc.site-menu {right:3%;bottom:30px;}
	.bookmark-list-pc.site-menu> ul.open > li {top:50%;margin-top:-100px;margin-left:-100px;}
	.bookmark-list-pc.site-menu > ul.open > li + li {top:50%;margin-left:5px}
	.bookmark-list-pc.site-menu > ul.open > li + li + li {top:50%;margin-top:5px;margin-left:-100px}
	.bookmark-list-pc.site-menu > ul.open > li + li + li + li {top:50%;margin-top:5px;margin-left:5px;}
	.bookmark-list-pc > ul > li img{width:40px;height:auto;padding-top: 0;}
	.bookmark-list-pc.site-menu > ul > li img{width:60px;height:auto;padding-top: 0;}
	.bookmark-list-pc .line01{opacity: 0;}
	.bookmark-list-pc .category li{margin-top: 55px;margin-left: -50px;}
	.bookmark-list-pc .category li + li{margin-left: 55px;}
	
	.skin-list-box{text-align:center;margin-left:0;}
	.page-content-inner{margin-top:15px;}

	
	/*파일관리*/
	.file-wrap{height:auto;overflow:visible;}
	.file-category{float:inherit;width:100%;border-right:0;}
	.folder-list{height:150px;padding:10px 15px}
	.folder-add{position:static;border-bottom:1px solid #dcdcdc}
	
	.file-list{float:inherit;width:100%;height:413px;}
	.file-list.table-layout table tbody{height:300px;}
	.file-add-list.show + .folder-list{height:150px}	
}

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

	select {width:100%;}
 
	/* 로그인 */
	.login-wrap{margin-top:-50%}
	.approval .login-title{margin-bottom: 15px;height:127px;}
	.login-title {margin-bottom:30px;height: 158px;}
	.login-title h1{height:104px;}
	.login-title .seed-logo-area {width:120px;height:104px}
	.login-form-wrap .input-outline {/* margin-bottom:10px; *//* padding:13px 28px 10px 100px; */}
	.login-form-wrap label {/* left:20px; *//* top:15px; *//* font-size:15px; */}
	.login-form-wrap label:after {right:19px}
	.login-form-wrap .btn-area {padding-top:10px}
	.login-btn-area .btn-login + .btn-login{margin-top:5px}
	.btn-login {width:100%;/* padding: 12px 0; */font-size: 15px;margin-right: 0;}
	.login-title p span {display:block;line-height:1.4}
	.login-title img {width:120px;}
	.login-site-list {/* margin-bottom:50px; */width: 75%;}
	.login-site-list .btn-site-list {padding:13px 18px;font-size:15px;}
	.login-site-list .site-list-area {top:37px;}
	html.ie8 .login-title h1 {width:100%;height:100%;}
	.login-btn-area{width:75%}
	/* 테이블 레이아웃 */
	.table-layout table tbody td {/* padding:0px 3px; *//* height:36px; */padding-left: 3px;padding-right: 3px;}
	.table-layout table tbody td > a {/* height:100%; *//* line-height:50px; */}
	.table-layout table tbody td > a > span {/* padding:18px 0; */}
	
	.table-layout table tbody td > a.level-change {height:auto;line-height:inherit;}
	.table-layout table tbody td.al {padding-left:10px;}

	
	/*메뉴관리*/
	.depth-1:after {left:0;}
	.depth-2:after {left:10px;}
	.depth-3:after {left:20px;}
	.depth-4:after {left:30px;}
	.depth-5:after {left:40px;}
	.depth-6:after {left:50px;}
	.depth-1 {padding-left:16px !important}
	.depth-2{padding-left:26px !important}
	.depth-3{padding-left:36px !important}
	.depth-4{padding-left:46px !important}
	.depth-5{padding-left:56px !important}
	.depth-6{padding-left:66px !important}
	
	/* 알림페이지 */
	.alert-area {padding:20px 16px;}
  
  
	/* 서브페이지 타이틀 */
	.page-title-inner {float:none;}
	.page-content-inner h3.page-title {font-size:15px;}

	/* 페이지내 검색 */
  
	.page-title-wrap .sch-content-wrap {position:relative;float:none;text-align:left;}
	.page-title-wrap h3{/* float:none */}
	.page-title-inner {margin-bottom:10px;}

	.sch-content-wrap .sch-select , .sch-content-wrap .sch-text {width:79%;margin-right:1%;}
	.sch-content-wrap .sch-text{background:#fff;}	
	.sch-content-wrap .sch-select{margin-bottom:3px;}
	.sch-content-wrap .sch-select.mobile-width100 {width:100%;margin-right:0;}
	.sch-content-wrap .btn-page-sch {position:absolute;right:0;top:0;width:20%;height:100%;padding:0;}
	
  
	/* 툴팁 */
	.tooltipBox {/* top:-3px; */float: inherit;}
	.tooltipBox {/* top:-3px; */}
	.tooltipBox .tooltipText {width:180px}

	/* 상태변경 */
	.change-state-area {padding:15px;}
	.change-state-area label {margin-right:5px;}

	/* 뷰,폼 스타일 */
	.bbs-view-item {padding:18px 0;}
	.bbs-view-item .item-title {display:block;width:100%;margin-bottom:15px;padding:0 5px;}
	.bbs-view-item .item-title:before {content:'+ ';}
	.bbs-view-item .item-box {display:block;width:100%;padding:0 5px;}
	
	.bbs-view-item .input-align-wrap {width:100%;}
	.bbs-view-item .input-align-wrap:after {content:'';clear:both;display:block;}
	.bbs-view-item .input-align-wrap input[type="text"] {float:left;width:70% !important;}
	.bbs-view-item .input-align-wrap .btn-sch-item {float:left;width:29%;margin-left:1%;padding:7px 0px;}

	/* 반응형 테이블 */
    .table-layout table .item-mobile-hidden {display:none;}
	
	/*첨부파일*/
	.temp-file-area {width:24%;margin-left:1%;}
	.temp-file-area .temp-file-button {width:100%;height:100%;padding:0;line-height: 28px !important;}
	
	/* 인풋박스 스타일 정리 */
	.item-box select.width30, .item-box select.width40, .item-box select.width50 {width:100%;}
	
	.item-box input[type="text"], .item-box input[type="password"] {width:100% !important;}
	.item-box input.width50px {width:50px !important;}
	.item-box input.width60px {width:60px !important;}
	.item-box input.width70px {width:70px !important;}
	.item-box input.width80px {width:80px !important;}
	.item-box input.width90px {width:90px !important;}
	.item-box input.width100px {width:100px !important;}
		
	/*페이지로딩바*/	
	.blockUI.blockMsg.blockPage h1 {font-size:20px;margin-left:-120px !important}

}


@media screen and (max-width:680px){
	.tab-menu a{font-size:13px;width:auto;margin-right:-1px}
	.btn-area button,
	.btn-area a{width: 80%;display: block;margin: 0 auto;margin-bottom: 10px;}
	.btn-area .btn-normal{margin-bottom: 10px;}
	.layout-content .layout-title{padding-left:10px;}
	.layout-content .layout-title > button{width:55px;margin-right:5px}
}

@media screen and (max-width:640px){
    /* 페이징 */
    .pagination-control a {width:30px;}
    /* 파일관리 */ 
	.file-list.table-layout{overflow-x:scroll;}
	.file-list.table-layout table{table-layout: fixed;}
	.file-list.table-layout table tbody{overflow-x:hidden;}
	.file-list.table-layout table colgroup col:first-child{width:200px !important;min-width:200px;}
	.file-list.table-layout table colgroup col:nth-child(2){width:100px !important;min-width:100px;}
	.file-list.table-layout table colgroup col:nth-child(3){width:100px !important;min-width:100px;}
	.file-list.table-layout table colgroup col:nth-child(4){width:100px !important;min-width:100px;}
	.file-list.table-layout table colgroup col:last-child{width:100px !important;min-width:100px;}
	.file-list.table-layout .file-locat{width:600px;}    
}

@media screen and (max-width:480px){
	
	/* 테이블 검색버튼 영역 */
	.bbs-view-item .input-align-wrap input[type="text"] {width:60% !important;}
	.bbs-view-item .input-align-wrap .btn-sch-item  {float:left;width:39%;padding:7px 0px;}
	.temp-file-area {width:34%;}
}

@media screen and (max-width:400px){
    .change-list{min-width:100px;}
    .change-state-area .btn-change-state {padding:7px 13px;}

	
	/* 테이블 검색버튼 영역 */
	.bbs-view-item .input-align-wrap input[type="text"] {width:55% !important;}
	.bbs-view-item .input-align-wrap .btn-sch-item  {float:left;width:44%;padding:7px 0px;}
	
	/* 북마크 버튼 */
	.bookmark-list-pc{margin-top: 10px;}
	.bookmark-list-pc ul li a img{padding-top: 5px;}
	.bookmark-list-pc ul.open > li {opacity: 1;z-index: 100;}
	.bookmark-list-pc > ul{position: static;top: 0;right: 0;left: 0;bottom: 0;}
	.bookmark-list-pc > ul > li{position: fixed;top: 50%;left: 50%;width: 70px;height: 70px;margin-top: -110px;margin-left:-110px;z-index: 300;display: none;}
	.bookmark-list-pc > ul > li + li{margin-left: -35px}
	.bookmark-list-pc > ul > li + li + li{margin-left: 40px;}
	.bookmark-list-pc > ul > li + li + li + li{margin-left: -110px;margin-top: -35px;}
	.bookmark-list-pc > ul > li + li + li + li + li{margin-left: -35px;margin-top: -35px;}/*  */
	.bookmark-list-pc > ul > li + li + li + li + li + li{margin-left: 40px;margin-top: -35px;}
	.bookmark-list-pc > ul > li + li + li + li + li + li + li{margin-left: -110px;margin-top: 40px}
	.bookmark-list-pc > ul > li + li + li + li + li + li + li + li{margin-left: -35px;margin-top: 40px}
	.bookmark-list-pc > ul > li + li + li + li + li + li + li + li + li{margin-left: 40px;margin-top: 40px}
	.bookmark-list-pc > ul > li + li + li + li + li + li + li + li + li + li{margin-left:-110px;margin-top: 115px}
	.bookmark-list-pc > ul > li + li + li + li + li + li + li + li + li + li + li{margin-left:-35px;margin-top: 115px}
	.bookmark-list-pc > ul > li + li + li + li + li + li + li + li + li + li + li + li{margin-left:40px;margin-top: 115px}
	.bookmark-list-pc > ul > li a{padding-top: 0;}
	.bookmark-list-pc ul li a{display: table-cell;width: 70px;height: 70px;}
	.bookmark-list-pc.bbs ul.open .sub-category ul{position: static;top: 0;left: 0;right: 0;bottom: 0;z-index: 80;-webkit-transition: none;transition: none;}
	.bookmark-list-pc.bbs ul.open .sub-category li{width: 70px;height: 70px;position: fixed;top: 50% !important;left: 50%;right: 0 !important;margin-top: 40px;margin-left: -35px;-webkit-transition: none;transition: none;}
	.bookmark-list-pc.bbs ul.open .sub-category li + li{width: 70px;height: 70px;position: fixed;top: 50%;left: 50%;margin-left: 40px;}
	.layout-content .layout-title{height: 60px;padding-left: 5px;}
	.layout-content .layout-title .editor-full-btn{margin-top: 10px;}
	
	.bookmark-list-pc > ul > li img{width:20px;height:auto;padding-top: 0;}
	.bookmark-list-pc.site-menu > ul > li img{width:30px;height:auto;padding-top: 0;}

}


@media screen and (min-width:1024px){
	.direction-left .view-container .layout-content.siteLayOutSet{margin-left:250px;}
	.direction-left .view-container.collapse .layout-content.siteLayOutSet{margin-left:65px;}
	.direction-right .view-container .layout-content.siteLayOutSet{margin-right:250px;}
	.direction-right .view-container.collapse .layout-content.siteLayOutSet{margin-right:65px;}
	.direction-left .view-container .layout-content.siteLayOutSet + .btn-area{padding-left:250px;}
	.direction-left .view-container.collapse .layout-content.siteLayOutSet + .btn-area{padding-left:65px;}
	.direction-right .view-container .layout-content.siteLayOutSet + .btn-area{padding-right:250px;}
	.direction-right .view-container.collapse .layout-content.siteLayOutSet + .btn-area{padding-right:65px;}
}