File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
.wrap{width:100%;height:100%;position:relative;display:flex;font-family:var(--primary-title-font);align-items:stretch;min-width:1240px;}
.container{width:calc(100% - 280px);}
.content_wrap{position:relative;padding:0 48px;margin:0 0 60px 0;background:#fff;}
.content_title{display:flex;align-items:center;justify-content:space-between;}
.content_title h3{position:relative;padding:0 0 0 20px;margin:0 0 40px 0;;font-size:26px;font-weight:bold;color:var(--primary-title-color);}
.content_title h3::before{position:absolute;content:"";width:6px;height:27px;background:var(--primary-color);left:0;top:8px;}
.content_title h4{position:relative;padding:0 0 0 20px;margin:0 0 12px 0;;font-size:20px;font-weight:bold;color:var(--primary-title-color);}
.content_title h4::before{position:absolute;content:"";width:10px;height:10px;border:3px solid var(--primary-color);border-radius:100%;left:0;top:10px;}
.content_title h5{position:relative;padding:0;margin:0;font-size:18px;font-weight:bold;color:var(--primary-color);}
.breadcrumb{display:flex;font-size:14px;color:#636469;gap:8px;align-items:center;}
.breadcrumb a,.breadcrumb p{position:relative;display:flex;height:24px;padding:0 8px;align-items:center;}
.breadcrumb a::after,.breadcrumb p::after{position:absolute;width:24px;height:24px;content:"";background:url(../images/component/icon_arrow_right_gray_24.png) no-repeat right center;right:-16px;top:1px;}
.breadcrumb .home i{display:flex;width:24px;height:24px;background:url(../images/component/icon_home.png) no-repeat center center;}
.breadcrumb .current_location{height:24px;padding:0 0 0 8px;color:var(--primary-color);}
/* leftmenu */
.menu_wrap{width:280px;min-height:100vh;background-color: #2557b4; box-shadow: 5px 0 10px rgba(0,0,0,0.1); z-index: 1; transition: width 0.3s linear; border-radius: 0 35px 35px 0;}
.menu_wrap .logo{width: 100%; height: 100px; text-align: center; border-bottom: 1px solid #688DD0;}
.menu_wrap .logo a{height: 100%; display: flex; justify-content: center; align-items: center;}
.menu_wrap .logo img{margin-left: -15px;mix-blend-mode:luminosity;}
.depth01{position: relative; border-bottom: 1px solid #688DD0;}
.menu_title{width: 100%; height: 50px; padding: 0 20px; text-align: left; font-size: 18px; font-weight: 500; color: #fff; background-image: url(../images/common/icon_leftmenu_open.png); background-repeat: no-repeat; background-position: calc(100% - 20px) center;}
.depth01.on .menu_title{background:#fff; color: #2557b4; font-weight:600; background-image: url(../images/common/icon_leftmenu_on.png); background-repeat: no-repeat; background-position: calc(100% - 20px) center;}
.depth02{height: 100%; padding: 8px 0; background-color: #16459A;}
.depth02 li a{display: flex; align-items: center; width: 100%; height: 40px; padding: 0 5px 0 32px; font-size: 16px; font-weight: 300; color: #8BA2CD; box-sizing: border-box; position: relative;}
.depth02 li a::before{position: absolute; content: ""; left: 0; font-size: 20px;}
.depth02 li a:hover,.depth02 li.on a{color: #fff; font-weight: 400;}
/* //leftmenu */
/* top_util */
.top_util{display:flex;width:100%;height:100px;justify-content:space-between;background:#fff;padding:0 48px;box-sizing:border-box;align-items:center;}
.user,.user_info,.alram{display:flex;align-items:center;}
.user_util{display:flex;gap:36px;}
.user_util li{display:flex;align-items:center;gap:4px;}
.user_util *{display:inline-block;vertical-align:middle;font-size:14px;color:#666666;letter-spacing:-0.5px;}
.user_util i{width:20px;height:20px;margin:0 2px 0 0;}
.user_util .time_out i{background:url(../images/component/icon_clock.png) no-repeat center;}
.user_util .final_date i{background:url(../images/component/icon_calendar.png) no-repeat center;}
.user_util .ip i{background:url(../images/component/icon_ip.png) no-repeat center;}
.user_util .time_out #ViewTimer font,.user_util .time_out .view_timer{color:#F86A3C;font-weight:bold;vertical-align:bottom;}
.user_util .btn_extend{width:45px;height:26px;border:1px solid #F86A3C;color:#f86a3c;background:#FFF1EC;border-radius:5px;margin:0 0 0 4px;font-weight:600;transition:all 0.3s;}
.user_util .btn_extend:hover{background:#F86A3C;color:#fff;}
.top_util .area_right{position:relative;display:flex;width:auto;background:#fff;transition:width 0.3s linear;gap:12px;}
.user_info_ul{display:inline-flex;height:38px;padding:0 20px 0 0;border-radius:35px;background:#f4f5f6;align-items:center;}
.user_info_ul li{position:relative;display:inline-flex;align-items:center;line-height:1.8;}
.user_info_ul li:first-child{margin:0 20px 0 0;}
.user_info_ul li:first-child:after{position:absolute;content:"";width:1px;height:15px;background:#d5d5d5;right:0;}
.user_info_ul select{width:145px;padding:0 0 0 20px;font-size:16px;border:0;background:transparent url(../images/component/icon_arrow_down.png) no-repeat calc(100% - 20px) center;}
.btn_logout{width:auto;height:38px;padding:8px 17px;font-size:16px;color:#fff;border-radius:40px;background:var(--gray-color);transition: all 0.3s;}
.btn_logout:hover{background:var(--gray-color-hover);}
/* //top_util */
/* footer */
.footer{display:flex;width:calc(100% - 90px);padding:60px 0;border-top:1px solid #D7D9DF;margin:0 auto;box-sizing:border-box;align-items:center;gap:40px;}
.footer h1{margin:-14px 0 0 0;}
.footer address{font-size:14px;color:#959698;line-height:1.5;}
.footer address span{font-weight:600;margin:0 10px;}
/* //footer */
@media all and (max-width:1440px){
/* leftmenu */
.area_left{width: 240px;}
.area_left .logo img{width: 75%;}
.menu_tit{padding:0 12px;font-size:16px;}
.depth02 li a{font-size:14px;}
/* //leftmenu */
/* top_util */
.area_right{width: calc(100% - 240px);}
.top_util{padding: 0 20px;}
.alram{margin-left: -15px;}
.user_util{padding: 8px 0;gap:8px;}
.user_util *{font-size: 14px;}
.user .user_id{width: calc(100% - 130px);}
.user_info_ul li{font-size:14px;}
.user_info_ul select{width:120px;font-size:14px;}
/* //top_util */
footer{padding: 31px 20px;}
}
/* 간격 */
.p0 {padding: 0px!important;}
.p5 {padding: 5px!important;}
.pt5 {padding-top: 5px!important;}
.pt10 {padding-top: 10px!important;}
.pt15 {padding-top: 15px!important;}
.pt20 {padding-top: 20px!important;}
.pt25 {padding-top: 25px!important;}
.pt30 {padding-top: 30px!important;}
.pt35 {padding-top: 35px!important;}
.pt40 {padding-top: 40px!important;}
.pt45 {padding-top: 45px!important;}
.pt50 {padding-top: 50px!important;}
.pr0 {padding-right: 0px!important;}
.pr20 {padding-right: 20px!important;}
.pb5 {padding-bottom: 5px!important;}
.pb10 {padding-bottom: 10px!important;}
.pb15 {padding-bottom: 15px!important;}
.pb20 {padding-bottom: 20px!important;}
.pb25 {padding-bottom: 25px!important;}
.pb30 {padding-bottom: 30px!important;}
.pb35 {padding-bottom: 35px!important;}
.pb40 {padding-bottom: 40px!important;}
.pb45 {padding-bottom: 45px!important;}
.pb50 {padding-bottom: 50px!important;}
.pl0 {padding-left: 0px!important;}
.pl15 {padding-left: 15px!important;}
.pl20 {padding-left: 20px!important;}
.m20 {margin: 20px!important;}
.mt-1 {margin-top: -1px!important;}
.mt0 {margin-top: 0px!important;}
.mt5 {margin-top: 5px!important;}
.mt10 {margin-top: 10px!important;}
.mt15 {margin-top: 15px!important;}
.mt20 {margin-top: 20px!important;}
.mt25 {margin-top: 25px!important;}
.mt30 {margin-top: 30px!important;}
.mt35 {margin-top: 35px!important;}
.mt40 {margin-top: 40px!important;}
.mt45 {margin-top: 45px!important;}
.mt50 {margin-top: 50px!important;}
.mt60 {margin-top: 60px!important;}
.mt70 {margin-top: 70px!important;}
.mt80 {margin-top: 80px!important;}
.mt90 {margin-top: 90px!important;}
.mt100 {margin-top: 100px!important;}
.mr0 {margin-right: 0px!important;}
.mr3 {margin-right: 3px!important;}
.mr5 {margin-right: 5px!important;}
.mr10 {margin-right: 10px!important;}
.mr15 {margin-right: 15px!important;}
.mr20 {margin-right: 20px!important;}
.mr25 {margin-right: 25px!important;}
.mr30 {margin-right: 30px!important;}
.mr35 {margin-right: 35px!important;}
.mr40 {margin-right: 40px!important;}
.mr45 {margin-right: 45px!important;}
.mr50 {margin-right: 50px!important;}
.mr60 {margin-right: 60px!important;}
.mr70 {margin-right: 70px!important;}
.mr80 {margin-right: 80px!important;}
.mr90 {margin-right: 90px!important;}
.mr100 {margin-right: 100px!important;}
.mb-4 {margin-bottom: -4px!important;}
.mb0 {margin-bottom: 0px!important;}
.mb1 {margin-bottom: 1px!important;}
.mb5 {margin-bottom: 5px!important;}
.mb10 {margin-bottom: 10px!important;}
.mb15 {margin-bottom: 15px!important;}
.mb18 {margin-bottom: 18px!important;}
.mb20 {margin-bottom: 20px!important;}
.mb25 {margin-bottom: 25px!important;}
.mb30 {margin-bottom: 30px!important;}
.mb35 {margin-bottom: 35px!important;}
.mb40 {margin-bottom: 40px!important;}
.mb45 {margin-bottom: 45px!important;}
.mb50 {margin-bottom: 50px!important;}
.mb60 {margin-bottom: 60px!important;}
.mb70 {margin-bottom: 70px!important;}
.mb80 {margin-bottom: 80px!important;}
.mb90 {margin-bottom: 90px!important;}
.mb100 {margin-bottom: 100px!important;}
.ml0 {margin-left: 0px!important;}
.ml5 {margin-left: 5px!important;}
.ml10 {margin-left: 10px!important;}
.ml15 {margin-left: 15px!important;}
.ml20 {margin-left: 20px!important;}
.ml25 {margin-left: 25px!important;}
.ml30 {margin-left: 30px!important;}
.ml35 {margin-left: 35px!important;}
.ml40 {margin-left: 40px!important;}
.ml45 {margin-left: 45px!important;}
.ml50 {margin-left: 50px!important;}
.ml60 {margin-left: 60px!important;}
.ml70 {margin-left: 70px!important;}
.ml80 {margin-left: 80px!important;}
.ml90 {margin-left: 90px!important;}
.ml100 {margin-left: 100px!important;}
/* 너비, 높이 */
.w100per {width: 100% !important;}
.w99per {width: 99%;}
.w95per {width: 95%;}
.w90per {width: 90%;}
.w85per {width: 85%;}
.w80per {width: 80%;}
.w75per {width: 75%;}
.w70per {width: 70%;}
.w65per {width: 65%;}
.w60per {width: 60%;}
.w50per {width: 50%;}
.w55per {width: 55%;}
.w45per {width: 45%;}
.w40per {width: 40%;}
.w35per {width: 35%;}
.w33per {width: 33.3333333%;}
.w30per {width: 30%;}
.w25per {width: 25%;}
.w20per {width: 20%;}
.w19per {width: 19%;}
.w18per {width: 18%;}
.w17per {width: 17%;}
.w16per {width: 16%;}
.w15per {width: 15%;}
.w14per {width: 14%;}
.w13per {width: 13%;}
.w12per {width: 12%;}
.w11per {width: 11%;}
.w10per {width: 10%;}
.w9per {width: 9%;}
.w8per {width: 8%;}
.w7per {width: 7%;}
.w6per {width: 6%;}
.w5per {width: 5%;}
.w4per {width: 4%;}
.w3per {width: 3%;}
.w2per {width: 2%;}
.w1per {width: 1%;}
.w5 {width: 5px;}
.w10 {width: 10px;}
.w15 {width: 15px;}
.w20 {width: 20px;}
.w25 {width: 25px;}
.w30 {width: 30px;}
.w35 {width: 35px;}
.w40 {width: 40px;}
.w45 {width: 45px;}
.w50 {width: 50px;}
.w55 {width: 55px;}
.w60 {width: 60px;}
.w70 {width: 70px;}
.w80 {width: 80px;}
.w90 {width: 90px;}
.w100 {width: 100px;}
.w110 {width: 110px;}
.w120 {width: 120px;}
.w130 {width: 130px;}
.w140 {width: 140px;}
.w150 {width: 150px;}
.w160 {width: 160px;}
.w170 {width: 170px;}
.w180 {width: 180px;}
.w190 {width: 190px;}
.w200 {width: 200px;}
.w250 {width: 250px;}
.w300 {width: 300px;}
.w325 {width: 325px;}
.w350 {width: 350px;}
.w400 {width: 400px;}
.w500 {width: 500px;}
.mw100 {min-width: 100px;}
.h100 {height: 100px;}
.h100per {height: 100%;}