.wrap{width: 100%; height: 100%; position: relative; display: flex; align-items: stretch; min-width: 1240px;}

/* leftmenu */
.area_left{width: 280px; background-color: #252323; box-shadow: 2px 0 5px rgba(0,0,0,0.1); z-index: 1; transition: width 0.3s linear;}
.area_left .logo{background-color: #db5d2e; box-shadow: 0 3px 5px rgba(0,0,0,0.1); width: 100%; height: 80px; text-align: center;}
.area_left .logo a{height: 100%; display: flex; justify-content: center; align-items: center;}
.area_left .logo img{margin-left: -15px;}
.depth01{position: relative; border-bottom: 1px solid #454444;}
.menu_tit{width: 100%; height: 57px; padding: 0 20px; text-align: left; font-size: 18px; font-weight: 400; color: #afaeae; background-image: url(../image/common/icon_leftmenu_open.png); background-repeat: no-repeat; background-position: calc(100% - 20px) center;}
.depth02{width: calc(100% - 40px); height: 100%; padding: 8px 0; margin: 0 auto 10px auto; background-color: #2e2d2d; border-radius: 5px;}
.depth02 li a{display: flex; align-items: center; width: 100%; height: 40px; padding: 0 5px 0 32px; font-size: 17px; font-weight: 300; color: #afaeae; box-sizing: border-box; position: relative;}
.depth02 li a::before{position: absolute; content: "-"; left: 20px; font-size: 20px;}
.depth02 li a:hover,.depth02 li.on a{color: #f7ae92; font-weight: 400;}
/* //leftmenu */

/* top_util */
.area_right{position: relative; height: 100%; background-color: #f8f5f3; width: calc(100% - 280px); transition: width 0.3s linear;}
.top_util,.user,.user_info,.alram{display: flex; align-items: center;}
.top_util{width: 100%; height: 80px; justify-content: space-between; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 0 47px 0 37px; box-sizing: border-box;}
.user i{display: block; width: 40px; height: 40px; background-color: #f8f5f3; box-shadow: inset 0 3px 3px rgba(0,0,0,0.1); border-radius: 100%; margin-right: 13px; background-image: url(../image/icon_person.png); background-repeat: no-repeat; background-position: center bottom;}
.user p{font-size: 17px; color: #555; letter-spacing: -0.5px; line-height: 1.3;}
.user span{font-weight: bold; color: #222;}
.user .user_id{font-size: 16px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 1.4;}
.alram{position: relative; margin-left: 20px;}
.alram i{display: block; width: 15px; height: 19px; background-image: url(../image/common/icon_alram.png);}
.alram .alram_num{position: absolute; top: -1px; left: 14px; width: 15px; height: 15px; background-color: #ed3d25; border-radius: 100%; color: #fff; line-height: 1.3; font-size: 11px; font-weight: bold; padding-right: 1px; box-sizing: border-box;}
.alram p{margin-left: 10px; font-size: 16px; font-weight: 400; color: #555;}

.user_util{display: flex; border-radius: 18px; padding: 8px 25px; box-sizing: border-box; background-color: #f8f5f3; box-shadow: inset 0 2px 3px rgba(0,0,0,0.1);}
.user_util *{display: inline-block; vertical-align: middle; font-size: 15px; color: #666666; letter-spacing: -0.5px;}
.user_util .final_date{margin-left: 15px;}
.user_util i{width: 18px; height: 18px; background-position: center; background-repeat: no-repeat; margin-top: 2px; margin-right: 2px;}
.user_util .time_out i{background-image: url(../image/common/icon_timeout.png);}
.user_util .final_date i{background-image: url(../image/common/icon_finaldate.png);}
.user_util span{margin-left: 5px;}
/* //top_util */

@media all and (max-width:1300px){

	/* leftmenu */
	.area_left{width: 220px;}
	.area_left .logo img{width: 75%;}
	/* //leftmenu */

	/* top_util */
	.area_right{width: calc(100% - 220px);}

	.top_util{padding: 0 20px;}
	.alram{margin-left: -15px;}
	.user_util{padding: 8px 10px;}

	.user_util *{font-size: 14px;}
	.user .user_id{width: calc(100% - 130px);}
	/* //top_util */

	footer{padding: 31px 20px;}
}