.wrapper{min-height: 100%; overflow: hidden;}
.hashtagArea a{text-decoration: underline;}
.paraSentence{white-space:pre-line; border: 1px solid #e1e1e1; padding: 5%; overflow-y: auto; width: 100%;height: 250px;}

.customBgFstColor{background-color: #00467f;}
.customBgSndColor{background-color: #777;}

/* Login Page */
	.login-page{}
	.login-box{ width: 100%; max-width: 360px; margin: 0 auto; padding: 20px; position: relative;}
	.login-box-head{padding: 0 20px;}
	.login-logo{ font-size: 35px; text-align: center; font-weight: 300; padding: 5%;}
	.login-logo img{width: 100%;}
	.logoArea img.sqLogo{display: none;}
	.logoArea img.horLogo{display: inline;}
	.logoArea img.smallLogo{display: none;}

	.asideToggle .logoArea img.sqLogo{display: none;}
	.asideToggle .logoArea img.horLogo{display: none;}
	.asideToggle .logoArea img.smallLogo{display: inline;}


	@media (max-width: 767px){
	.logoArea img.sqLogo{display: none;}
	.logoArea img.smallLogo{display: none;}
	.logoArea img.horLogo{display: inline;}

	}

	.login-box-body{padding: 20px;}
	.login-box-body .inputIcon {background-color: transparent;}
	.login-box-msg{margin: 0; text-align: center; padding: 0 20px 20px; font-size: 20px;}
	.login-box-msg span{text-decoration: underline;	}
	.login-box-body input.loginInput{padding: 10px;}
	.login-box-body button.loginBtn{padding: 6px; font-size: 18px;}
	.login-box-foot{position: absolute; text-align: center; bottom: -180px; width: 100%; left: 0;}

/* leftSide and rightSide */
	.leftSide{width: 230px;}
	.rightSide{margin-left: 230px; transition: margin-left .3s;}

	.asideToggle .leftSide{width: 50px;}
	.asideToggle .rightSide{margin-left: 50px;}

/* Logo area */
.wrapper .logoArea{height: 112px; position: absolute; top: 0; left: 0; z-index: 999; text-align: center; transition: width .3s ease-in-out;}
.asideToggle .wrapper .logoArea{height: 50px;}
.wrapper .logoArea img{width: 100%; max-width: 160px;/*  max-height: 72px; */ margin: 0 5%; padding: 5px;}
.asideToggle .wrapper .logoArea img{margin: 0;}
.wrapper .logoArea .logoEtcTxt{padding: 0 10%; display: ;}

/* Header */
.wrapper header .sidebar-toggle{float: left; background-color: transparent; background-image: none; padding: 15px 15px; font-family: fontAwesome; color: #fff;}
.wrapper header{position: relative;}
.wrapper header .userInfo{width: 100%; color: #fff; }
.wrapper header .userInfo .login{}
.wrapper header .userInfo .login li{margin-right: 2%;}
.wrapper header .userInfo .login li strong{}
.skinColor{border-radius: 10px; padding: 5px 10px; color: #fff;}
.skinColorR{background-color: rgba(241, 97, 81, 1);}
.skinColorG{background-color: rgba(102, 123, 77, 1);}
.skinColorB{background-color: rgba(32, 153, 164, 1);}
.skinColorP{background-color: rgba(109, 62, 123, 1);}

/* common style */
.box{position: relative; border-radius: 3px; border-top: 3px solid #d2d6de; width: 100%; box-shadow: 0 1px 1px rgba(0,0,0,0.1);}

/* submenu aside */
.wrapper .main-sidebar{overflow: hidden; min-height: 100%; position: absolute; top: 112px; left: 0; z-index: 999; -webkit-transition: -webkit-transform .3s ease-in-out,width .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out,width .3s ease-in-out; -o-transition: -o-transform .3s ease-in-out,width .3s ease-in-out; transition: transform .3s ease-in-out,width .3s ease-in-out; border-top: 1px solid #555965;}
.asideToggle .wrapper .main-sidebar{top: 50px; overflow: visible;}

.navAccodian{padding: 0;}
.navAccodian li{}
.navAccodian li .navCtg{padding: 5% 12%;}
.navAccodian li .navCtg a{display: block; width: 100%; height: 100%; text-decoration: none; }
.navAccodian li .navCtg a strong.menuTitle{white-space: nowrap;  position: absolute; top: auto; left: auto; overflow: hidden;} 
.navAccodian li .navCtg a .openPointer{transform: rotateZ(-90deg); transition: transform .3s; position: absolute; white-space: nowrap; right: 10px;}
.navAccodian li .navCtg a .titleIcon{width: 26px; margin-right: 10px; text-align: center;}
.navAccodian li .navCtg a.menuOn{color: #b8c7ce;}
.navAccodian li .navCtg a.collapsed .fa{transform: rotateZ(0deg);}
.navAccodian li .subMenu{padding: 0;}
.navAccodian li .subMenu ul{padding: 0;}
.navAccodian li .subMenu ul li.subList{background-color: #272d31; color: #8aa4af;}
.navAccodian li .subMenu ul li.subList:hover{background-color: #0f1113; color: #fff;}
.navAccodian li .subMenu ul li.subList.showLi{color: #fff;}

.asideToggle .navAccodian li{position: relative;}
.asideToggle .navAccodian li .navCtg a{text-align: center;}
.asideToggle .navAccodian li .navCtg a strong.menuTitle{display: none;} 
.asideToggle .navAccodian li .navCtg a i.titleIcon{margin-right: 0;}
.asideToggle .navAccodian li .navCtg a i.openPointer{display: inline; position: absolute; top: 10px; left: 230px;}

.asideToggle .navAccodian li .navCtg a.collapsed strong.menuTitle{display: none;} 
.asideToggle .navAccodian li .navCtg a.collapsed i.titleIcon{margin-right: 0;}
.asideToggle .navAccodian li .navCtg a.collapsed i.openPointer{display: none;}
.asideToggle .navAccodian li .navCtg { padding: 10% 12%; }
.asideToggle .navAccodian li .subMenu{position: absolute; width: 200px; top: 0; left: 50px;}
.asideToggle .navAccodian li .subMenu.show{display: none;}
.asideToggle .navAccodian li .subMenu.show .navCtg {padding: 5% 12%; }
.asideToggle .navAccodian li .subMenu.show .navCtg a{text-align: left;}

.asideToggle .navAccodian li:hover{position: relative;}
.asideToggle .navAccodian li:hover .navCtg a strong.menuTitle{display: flex; position: absolute; width: 200px; height: 40px; top: 0; left: 50px; justify-content: center; align-items: center; z-index: 100; background-color: #413e44;} 
.asideToggle .navAccodian li:hover .navCtg a i.titleIcon{margin-right: 0;}
.asideToggle .navAccodian li:hover .navCtg a i.openPointer{display: inline; position: absolute; top: 10px; left: 230px; z-index: 100;}
.asideToggle .navAccodian li:hover .navCtg { padding: 10% 12%; }
.asideToggle .navAccodian li:hover .subMenu{display: block; position: absolute; width: 200px; top: 40px; left: 50px; z-index: 100;}
.asideToggle .navAccodian li:hover .subMenu .navCtg {padding: 5% 12%; }
.asideToggle .navAccodian li:hover .subMenu .navCtg a{text-align: left;}

/* contentWrapper */
.wrapper .contentWrapper{transition: margin-left .3s ease-in-out, transform .3s ease-in-out; position: relative;}
.wrapper .contentWrapper .topmenu{background-color: #fff; padding-top: 2%;}
.wrapper .contentWrapper .topmenu li{padding: 0 2%;}
.wrapper .contentWrapper .topmenu li a{color: #afafaf;}
.wrapper .contentWrapper .topmenu li a.on{color: #ffc001; border-bottom: 5px solid;}
.wrapper .content{ background-color: #eef1f6;}
.wrapper .content section.contentHeader{position: relative;}
.wrapper .content section.contentHeader h1{}
.wrapper .content section.contentHeader .breadcrumbCover{padding: 0; margin: 0; position: absolute; top: 10px; right: 15px;}
												
/* ul.subDevide dt.subDevideTitle{display: none;} */
.subDevide.subDevide3 .subDevideList{width: 33.333333%; float: left; text-align: center;}
.subDevide.subDevide4 .subDevideList{width: 25%; float: left; text-align: center;}

.item{margin: 20px;}

.table tr td, .table tr th{vertical-align: middle;}
.table tbody tr:last-child th{border-bottom: 1px solid #dee2e6;;}
.table tbody tr:last-child td{border-bottom: 1px solid #dee2e6;;}

.requestPopover{padding: 10px 0;}
.requestPopover h3{padding: 10px; font-size: 16px;}
.requestPopover .contentArea{padding: 0 10px;}


/* list */
.tableList .listHead{min-height: 40px;}
.tableList .listBodyTdSubBox{text-align: center;}

/* cardListStyle */
	.cardListStyle{text-align: center; overflow: hidden;}
	.cardListStyle .card{width: 14.6666%; margin:1%; float: left;}
	.cardListStyle .card .imgCover{max-width: 150px; height:150px; padding: 5%;}
	.cardListStyle .card .imgCover img{max-width: 150px; max-height:150px; width: 100%; height: 100%; padding: 5%;}
	.cardListStyle .card .cardType{height: 150px;}
	.cardListStyle .card .cardType .card-title{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
	.cardListStyle .card .textCover{height: 50px;}

	.cardListStyle .card .descriptionListCover dt{width: 40%; float: left; padding: 5px; text-align: left;}
	.cardListStyle .card .descriptionListCover dd{width: 60%; float: right; padding: 5px; margin: 0; text-align: left;}



footer{}

.listBody>div{padding: .5rem;}
.ctgTitle{display: none;}

/* modalEdit */
	.modal .modal-body .tableListStyle{text-align: left; border: 1px solid #e1e1e1; border-top: none; overflow: hidden; padding: 0;}	
	.modal .modal-body .tableListStyle tr{}	
	.modal .modal-body .tableListStyle td{padding: 10px;}	
	.modal .modal-body .tableListStyle td img{max-width: 100%; max-height: 100%;}
	.modal .modal-body .tableListStyle td div{max-width: 100%; max-height: 100%; word-break: break-all;}


/* 레이어팝업 업로드파일 미리보기 */
	.previewImgCover{display: table; padding: 20px;}
	.previewImgCover .previewImg{display: table-cell; text-align: center; vertical-align: middle;}



@media (max-width: 1400px){
/* cardListStyle */
	.cardListStyle .card{width: 23%;}
}

@media (max-width: 767px){
	/* leftSide and rightSide */
		.rightSide { margin-left: 0;}
		.asideToggle .rightSide { margin-left:auto ;}
		.mobileAsideToggle .rightSide {}
	/* Logo area */
		.wrapper .logoArea{ width: 100%; height: 50px; float: none; position: static;}
		.wrapper .logoArea img{ width: auto; height: 40px; margin: 0px auto;}
		.wrapper .logoArea .logoEtcTxt{display: none;}

	/* submenu aside */
		.wrapper .main-sidebar{-webkit-transform: translate(-230px, 0); -ms-transform: translate(-230px, 0); -o-transform: translate(-230px, 0); transform: translate(-230px, 0); top: 100px !important; width: 230px !important;}
		.mobileAsideToggle .main-sidebar{-webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0);}

		.mobileAsideToggle .contentWrapper, .mobileAsideToggle.asideToggle .contentWrapper{transform: translate(200px, 0);}

		.mobileAsideToggle .navAccodian li .navCtg a{text-align: left;}
		.mobileAsideToggle .navAccodian li .navCtg a strong.menuTitle{display: inline;} 
		.mobileAsideToggle .navAccodian li .navCtg a i.titleIcon{margin-right: 20px;}
		.mobileAsideToggle .navAccodian li .navCtg a i.openPointer{display: inline;}
		.mobileAsideToggle .navAccodian li .navCtg { padding: 5% 12%; }



	/* contentWrapper */
		.wrapper .content section.contentHeader .breadcrumbCover{position: static;}
		.wrapper .content section.contentHeader .breadcrumbCover .breadcrumb{background-color: #fff; margin-top: 2%;}
		.wrapper .content section.contentBody .box-body .btnCover{margin-left: auto;}

	/* cardListStyle */
		.cardListStyle .card{width: 31.333333%;}
	}

@media (max-width: 575px){
	/* list */
	.ctgTitle{display: inline; margin-right: 10px;}
	.tableList .listHead{display: none;}
	.tableList .listBody{padding: 3% 0%;}
	.tableList .listBody .listBodyTd{padding: .5rem 0;}
	.tableList .listBody .listBodyTd .listBodyTdSubBox{text-align: left;}
	.tableList .listBody .listBodyTd .listBodyTdSubBox div{display: inline-block;}
	.tableList .listBody .listBodyTd .index{width: auto; margin-left: auto;}
	.tableList .listBody .listBodyTd .multiBtn{width: 100%; display: flex;}
	.tableList .listBody .listBodyTd .btn{width: 100%;}
	.tableList .listBody .listBodyTd .txtMsg{font-size: 18px;}

	.subDevide{width: 100%;}
	/* ul.subDevide dt{}
	ul.subDevide dt.subDevideTitle{display: block;} */
	.subDevide .subDevideList{width: 100% !important; text-align: left !important;}



/* cardListStyle */
	.cardListStyle .card{width: 48%;}


	.tableList .listFoot{display: none;}



	/* .evtName{font-size: 18px;} */
	.mutantJustify{justify-content: start !important;}
}