@charset "utf-8";

@import url('base.css');

/************************************************
	skipLink
************************************************/
#skipLink{ width:100%; overflow:hidden; position:relative; z-index:1000;}
#skipLink a{ margin:0px -1px -1px 0px; width:1px; height:1px; text-align:center; line-height:0; overflow:hidden; font-size:0px; display:block;}
#skipLink a:focus{ background:rgb(32, 38, 44); margin:0px; padding:8px 0px 8px 15px; width:auto; height:30px; color:rgb(255, 255, 255); line-height:1; font-size:12px; font-weight:700;}
#skipLink a:hover{ background:rgb(32, 38, 44); margin:0px; padding:8px 0px 8px 15px; width:auto; height:30px; color:rgb(255, 255, 255); line-height:1; font-size:12px; font-weight:700;}
#skipLink a:active{ background:rgb(32, 38, 44); margin:0px; padding:8px 0px 8px 15px; width:auto; height:30px; color:rgb(255, 255, 255); line-height:1; font-size:12px; font-weight:700;}

/************************************************
	layout
************************************************/
#wrap{ position:relative; width:100%; padding:0 0 0 90px; min-width:1280px; word-wrap: break-word; word-break:keep-all;}

.mbg{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; z-index:2;}
body.ovf_hdn, .ovf_hdn{ overflow:hidden; height:100%;}



/*-------------------------------------------
login
-------------------------------------------*/
body#login #wrap{ overflow:hidden; height:100vh; min-height:100vh; padding-top: calc( 50vh - 170px);}
body#login #wrap::before{ 
content: "";
    position: absolute;
    top: -100vh;
    left: 50vw;
    margin-left: -150vw;
    width: 125vw;
    height: 400vh;
    background-color: #e52f2c;
    display: block;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
body#login #wrap h1.login-logo{ position:absolute; top:258px; left:50%; margin-left:-422px; z-index:9;}
body#login #wrap .login-bx{ position:relative; width:840px; margin:0 auto; padding:0 0 0 380px;}
body#login #wrap .login-bx .inp{ position:relative; padding:0 0 0 105px; border-bottom:#e4e4e4 1px solid;}
body#login #wrap .login-bx .inp .label{ position:absolute; top:0; left:0; width:105px; font-weight:600; text-transform:uppercase; display:inline-block; line-height:60px; color:#888; font-size:16px; vertical-align:middle;}
body#login #wrap .login-bx .inp.id::before{ content:""; position:absolute; top:50%; right:20px; margin-top:-8px; width:16px; height:16px; display:block; background:url('../images/ic_user.png') 50% 50% no-repeat;}
body#login #wrap .login-bx .inp.pw::before{ content:""; position:absolute; top:50%; right:20px; margin-top:-8px; width:16px; height:16px; display:block; background:url('../images/ic_lock.png') 50% 50% no-repeat;}
body#login #wrap .login-bx .inp input.input{ height:60px; background-color:transparent; border:none; width:100%; display:block; padding-right:40px;}
body#login #wrap .login-bx .inp select.select{ height:60px; background-color:transparent; border:none; width:100%; display:block;}
body#login #wrap .login-bx .login-bt{ margin:25px 0 0 0;}
body#login #wrap .login-bx .login-bt:after{content:""; display:block; height:0; clear:both; visibility:hidden;}
body#login #wrap .login-bx .login-bt .bt-login{ float:right;}
body#login #wrap .login-bx .login-bt .bt-gud{ displaY:inline-block; line-height:60px; color:#888; font-size:15px;}
body#login #wrap .login-bx .login-bt .bt-gud::before{ content:""; width:22px; height:22px; display:inline-block; vertical-align:middle; margin:0 5px 0 0; background:url('../images/ic_exc.png');}
body#login #wrap .login-copy{ text-align: center;
    position: absolute;
    color: #aaa;
    font-size: 13px;
    text-transform: uppercase;
    bottom: 25px;
    left: calc( 50vw - 170px );
}


/*-------------------------------------------
header
-------------------------------------------*/
header{ position:fixed; top:0; left:0; height:100vh; width:90px; background-color:#323232; z-index:5;}
header .bt-mn{ position:relative; display:block; width:90px; height:75px; transition: all 0.2s ease-in-out;  }
header .bt-mn span{ position:absolute; top:-9999px; left:-9999px;}
header .bt-mn::before{ content:""; position:absolute; width:27px; height:3px; background-color:#fff; top:37px; left:32px; display:block; transition: all 0.2s ease-in-out; }
header .bt-mn::after{ content:""; position:absolute; width:27px; height:17px; border-top:#fff 3px solid; border-bottom:#fff 3px solid; top:30px; left:32px; display:block; transition: all 0.2s ease-in-out; } 
header .bt-mn.open{ background-color:#d0110d; }
header .bt-mn.open::before{ content:""; position:absolute; width:3px; height:27px; background-color:#fff; top:25px; left:45px; display:block; -webkit-transform:rotate(45deg);transform:rotate(45deg);}
header .bt-mn.open::after{ content:""; position:absolute; width:27px; height:3px; background-color:#fff; top:37px; left:32px; display:block; border:none; -webkit-transform:rotate(45deg);transform:rotate(45deg);}
header #gnb > li > a{ display:block; height:90px; text-indent:-9999px; background-repeat:no-repeat; background-position:50% 50%;}
header #gnb > li > a:hover,
header #gnb > li.active > a{ background-color:#e6423a;}
header #gnb > li.gnb1 > a{ background-image:url('../images/ic_gnb1.png');}
header #gnb > li.gnb2 > a{ background-image:url('../images/ic_gnb2.png');}
header #gnb > li.gnb3 > a{ background-image:url('../images/ic_gnb3.png');}
header #gnb > li.gnb4 > a{ background-image:url('../images/ic_gnb4.png');}
header #gnb > li.gnb1 > a:hover,
header #gnb > li.gnb1.active > a{ background-image:url('../images/ic_gnb1_on.png');}
header #gnb > li.gnb2 > a:hover,
header #gnb > li.gnb2.active > a{ background-image:url('../images/ic_gnb2_on.png');}
header #gnb > li.gnb3 > a:hover,
header #gnb > li.gnb3.active > a{ background-image:url('../images/ic_gnb3_on.png');}
header #gnb > li.gnb4 > a:hover,
header #gnb > li.gnb4.active > a{ background-image:url('../images/ic_gnb4_on.png');}
header .myp{ position:absolute; bottom:80px; left:0; display:block; width:100%; height:80px; padding:5px 0 0 0; text-align:center; color:#fff; font-size:13px; }
header .myp::before{ content:""; width:25px; height:27px; display:block; margin:0 auto 5px; background:url('../images/ic_user2.png') 50% 50% no-repeat;} 
header .bt-logout{ position:absolute; bottom:0; left:0; display:block; width:100%; height:80px; text-indent:-9999px; background:url('../images/ic_off.png') 50% 50% no-repeat; border-top:#424242 1px solid;}

#container{ position:relative; z-index:1;}

#lm{ position:absolute; top:0; left:-100%; width:450px; height:100vh; background-color:#444445; color:#fff; padding:0 0 0 90px; z-index:3;}
#lm .inner{ padding:10px 30px; }
#lm a{ display:block;}
.left_menu > li > a{ position:relative; font-size:18px; font-weight:600; padding:18px 30px 18px 0;  color:#fff; }
.left_menu > li > a::after{ content:""; position:absolute; top:50%; right:14px; margin-top:-5px; width:10px; height:10px; display:block; border-left:#fff 2px solid; border-bottom:#fff 2px solid; -webkit-transform:rotate(-45deg);transform:rotate(-45deg); transition: all 0.2s ease-in-out; }
.left_menu > li.on > a::after{ -webkit-transform:rotate(135deg);transform:rotate(135deg);}
.left_menu > li > .mdepth2{ padding:20px 0; border-top:#575758 1px solid; border-bottom:#575758 1px solid; display:none;}
.left_menu > li > .mdepth2 > li > a{ font-size:15px; font-weight:600; padding:10px 0; color:#888;}
.left_menu > li > .mdepth2 > li.on > a,
.left_menu > li > .mdepth2 > li > a:hover{ color:#fff;}
.left_menu > li > .mdepth2 > li > .mdepth3{ padding:10px 0; display:none;}
.left_menu > li > .mdepth2 > li > .mdepth3 > li > a{ font-size:13px; font-weight:400; padding:6px 0; color:#888; text-indent:-8px; padding-left:8px;}
.left_menu > li > .mdepth2 > li > .mdepth3 > li > a::before{ content:""; width:4px; height:1px;  background-color:#888; display:inline-block; margin-right:4px; vertical-align:middle;}
.left_menu > li > .mdepth2 > li > .mdepth3 > li > a:hover{ color:#ffff;}
.left_menu > li > .mdepth2 > li > .mdepth3 > li > a:hover::before{ background-color:#fff;}


.con-hd{ position:relative; background-color:#e54139; height:75px; padding:0;}
.con-hd h1{ display:inline-block; height:75px; padding:0; margin:0 0 0 25px; line-height:75px; vertical-align:middle; }
.con-hd .bt-prev{ display:inline-block; width:75px; height:75px; background:#ce110d url('../images/ic_prev.png') 50% 50% no-repeat;vertical-align:middle; text-indent:-9999px;  }
.con-hd .loc{ position:relative; display:inline-block; height:75px; padding:0 0 0 25px; margin:0 0 0 20px; line-height:75px; vertical-align:middle; color:#fff; font-size:20px; font-weight:600;}
.con-hd .loc::before{ content:""; position:absolute; top:50%; left:0; margin-top:-5px; vertical-align:middle; width:10px; height:10px; display:inline-block; border-left:#f18078 2px solid; border-bottom:#f18078 2px solid; -webkit-transform:rotate(-135deg);transform:rotate(-135deg); }

.m-hd{ display:table; width:100%; table-layout:fixed;  border-bottom:#dfdfdf 1px solid;}
.m-hd .left{ width:280px; display:table-cell; background-color:#f7f7f7; vertical-align:middle; border-right:#dfdfdf 1px solid;}
.m-hd .tit-area{ margin:0 30px; padding:20px 0;}
.m-hd .tit-area > h2{ color:#222; font-size:24px; line-height:1; white-space:nowrap;}
.m-hd .tit-area .sub-tx{ font-size:13px; color:#b7b7b7;  white-space:nowrap; margin-top:5px;}
.m-hd .left ul{ padding:0 0 20px; margin-top:15px;}
.m-hd .left ul > li > a{ position:relative; display:block; width:100%; table-layout:fixed; height:64px; line-height:64px; font-size:15px; color:#666; padding:0 30px; z-index:2;}
.m-hd .left ul > li > a::before{ content:""; position:absolute; height:1px; top:0; left:30px; right:30px; display:block; background-color:#dfdfdf;}
.m-hd .left ul > li > a:hover{ background-color:#fff; }
.m-hd .left ul > li > a:hover::before{ left:0; right:0;}
.m-hd .left ul > li > a:hover::after{ content:""; position:absolute; height:1px; bottom:-1px; width:100%; display:block; background-color:#dfdfdf; left:0; right:0;}
.m-hd .left ul > li .tit-tx{ display:inline-block; width:98px;}
.m-hd .left ul > li .con-tx{ display:inline-block; float:right; vertical-align:middle; text-align:right;}
.m-hd .left ul > li > a:hover *{ color:#222;}
.m-hd .right{ padding:30px 50px;}
.m-hd .right .tit-area{ width:100%; margin:0 0 30px 0; }

.m-middle{ display:table; width:100%; table-layout:fixed; }
.m-middle > *{ display:table-cell; vertical-align:top;}
.m-middle .tit-area{ margin:0 0 30px 0;}
.m-middle .tit-area h2{ color:#222; font-size:20px; margin:0; display:inline-block;}
.m-middle .tit-area h2 a{ display:inline-block;}
.m-middle .tit-area h2 a::after{ content:""; margin-left:20px; margin-top:-4px; vertical-align:middle; width:10px; height:10px; display:inline-block; border-left:#222 2px solid; border-bottom:#222 2px solid; -webkit-transform:rotate(-135deg);transform:rotate(-135deg); }
.m-middle .tit-area .bum{ float:right; color:#999; font-size:13px; margin-right:30px;}
.m-middle .tit-area .bum span{ display:inline-block;}
.m-middle .tit-area .bum span + span{ margin-left:25px;}
.m-middle .tit-area .bum span i{ width:20px; height:6px; display:inline-block; vertical-align:middle;}
.m-middle .tit-area .bum span.gray i{ background-color:#e6e6e6;}
.m-middle .tit-area .bum span.red i{ background-color:#fd3c28;}
.m-middle .row-l{ width:590px; padding:30px 0 0 30px;}
.m-middle .row-l .grp-bx{ margin:-30px 0 0 0; overflow:hidden;}
.m-middle .row-l .item{ position:relative; width:110px; height:110px; float:left; margin:30px 30px 0; text-align:center;}
.m-middle .row-l .item .tbx{ position:absolute; top:30px; left:0; width:100%;}
.m-middle .row-l .item strong{ display:block; text-align:center; color:#ccc; font-size:24px;}
.m-middle .row-l .item strong > i{ color:#fd3c28;}
.m-middle .row-l .item span{ display:block; text-align:center; color:#939393; font-size:15px;}
.m-middle .m-notice{ border-left:#dfdfdf 1px solid; border-right:#dfdfdf 1px solid; background-color:#f7f7f7; padding:30px;}
.m-middle .m-notice ul li{ position:relative; padding:0 70px 0 0; }
.m-middle .m-notice ul li + li{ margin-top:24px;}
.m-middle .m-notice ul li a{ display:block; font-size:15px; color:#333; text-overflow:ellipsis; overflow:hidden; display:block; white-space:nowrap;}
.m-middle .m-notice ul li .date{ position:absolute; top:0; right:0; font-size:13px; color:#aaa;}

.m-middle .m-brn{ width:280px; vertical-align:top;}
.m-middle .m-brn > a{ position:relative; display:block; line-height:100px; padding:0 0 0 110px; font-size:15px; color:#333;}
.m-middle .m-brn > a + a{ border-top:#dfdfdf 1px solid; }
.m-middle .m-brn > a::before{ content:""; position:absolute; top:50%; left:40px; margin-top:-27px; background-position:50% 50%; background-repeat:no-repeat; width:54px; height:54px; display:block;}
.m-middle .m-brn > a::after{ content:""; position:absolute; top:50%; right:40px; margin-top:-8px; vertical-align:middle; width:16px; height:16px; display:inline-block; border-left:#aaa 2px solid; border-bottom:#aaa 2px solid; -webkit-transform:rotate(-135deg);transform:rotate(-135deg); }
.m-middle .m-brn > a.item1::before{ background-image:url('../images/ic_mbr1.png');}
.m-middle .m-brn > a.item2::before{ background-image:url('../images/ic_mbr2.png');}
.m-middle .m-brn > a.item3::before{ background-image:url('../images/ic_mbr3.png');}
.m-middle .m-brn > a.item4::before{ background-image:url('../images/ic_mbr4.png');}

.search-bx{ position:relative; background-color:#ededed; padding:25px; height:auto; border-bottom:#c8c8c8 1px solid; transition: all 0.2s ease-in-out;}
.search-bx.on{ height:100px; overflow:hidden;}
.search-bx .bt-slide{ position:absolute; bottom:-1px; left:50%; margin:0 0 0 -22px; width:44px; height:13px; display:block; text-indent:-9999px; background:url('../images/bt_slide.png') 50% 50% no-repeat; z-index:2;}
.search-bx .row-bx + .row-bx{ margin-top:18px;}
.search-bx .row-bx:after{content:""; display:block; height:0; clear:both; visibility:hidden;}
.search-bx .row-bx .row{ width:20%; float:left; padding:0 30px 0 0; }
.search-bx .row-bx .row.n2{ width:40%;}
.search-bx .row-bx .row.n3{ width:60%;}
.search-bx .row-bx .row .tit-tx{ display:block; margin:0 0 5px 0;}
.search-bx .row-bx .date-grp:after{content:""; display:block; height:0; clear:both; visibility:hidden;}
.search-bx .row-bx .date-grp .datepicker{ width:47%; display:block; float:left; background:#fff url('../images/ic_cal.png') 100% 50% no-repeat;}
.search-bx .row-bx .date-grp .help-tx{ width:6%; display:block; float:left; line-height:38px; text-align:center;}

.view-bx{ position:relative; background-color:#ededed; padding:25px; height:auto; border-bottom:#c8c8c8 1px solid; transition: all 0.2s ease-in-out;}
.view-bx table{ width:100%; table-layout:fixed;}
.view-bx table th{ padding:10px;  font-size:13px; color:#999; text-align:left;}
.view-bx table td{ padding:10px;  font-size:13px; color:#222; text-align:left; font-weight:600;}

.list-inner{ padding:40px 25px 100px;}
.list-inner h2.h2-tit{ margin:35px 0 10px 0; color:#222; font-size:18px;}

.tbl-hd{ margin:0 0 15px 0; line-height:30px;}
.tbl-hd .total{ color:#666; font-size:13px; }
.tbl-hd .right{ float:right;}

table.list{ width:100%; table-layout:fixed; border-top:#939393 1px solid; border-right:#d1d1d1 1px solid; border-bottom:#d1d1d1 1px solid;}
table.list thead th{ padding:10px; background-color:#939393; color:#fff; text-align:center; border-left:#787878 1px solid;}
table.list tbody td{ padding:10px; color:#666; text-align:center; border-left:#d1d1d1 1px solid;}
table.list tbody tr:nth-child(even){ background-color:#ededed; }
table.list tbody tr:hover{ background-color:#e7554b; }
table.list tbody tr:hover td{ color:#fff;}

.page-btn{ position:fixed; bottom:0; left:90px; right:0; background-color:#7d7d7f; height:80px;}
.page-btn a,
.page-btn button{ display:inline-block; text-align:center; line-height:80px; height:80px; width:150px; color:#fff; font-size:15px; font-weight:600; text-transform:uppercase; }
.page-btn .red{ background-color:#e2231a;}
.page-btn .gray{ background-color:#4b4b4d;}
.page-btn .gray2{ background-color:#929294;}

.todo-wr{ background-color:#78787a;}
.todo-wr ul{ width:100%; display:table; }
.todo-wr ul li a strong{ font-size:20px;}
.todo-wr ul li{ display:table-cell; vertical-align:middle;}
.todo-wr ul:after{content:""; display:block; height:0; clear:both; visibility:hidden;}
.todo-wr ul li{ width:200px; float:left;}
.todo-wr ul li a{ position:relative; display:block; line-height:75px; height:75px; color:#b4b4b5; font-size:15px; padding:0 25px;}
.todo-wr .step1{ padding:0 0 40px 0;}
.todo-wr .step1 li a{ background-color:#444445; line-height:75px; height:75px; border-left:#3d3d3d 1px solid;}
.todo-wr .step1 strong{ float:right; vertical-align:middle; font-size:20px; font-weight:400; font-family:'Helvetica';}
.todo-wr .step1 a strong{ float:right; vertical-align:middle; font-size:20px; font-weight:400;}
.todo-wr .step1 li a:hover{ color:#fff; background-color:#3c3c3c;}
.todo-wr .step1 li.active a{ color:#fff; background-color:#3c3c3c;}
.todo-wr .step1 li.active a::after{ content:""; position:absolute; bottom:-10px; left:50%; margin-left:-5px; border-top:10px #3c3c3c solid; border-left:10px transparent solid; border-right:10px transparent solid;}

.todo-wr ul.sub li a{ background-color:#6c6c6e; height:100px; line-height:1.1; border-right:#5b5b5c 1px solid; border-top:#5b5b5c 1px solid; padding:15px 20px 0;}
.todo-wr ul.sub li a::after{ content:""; position:absolute; top:50%; right:-14px; margin-top:-13px; width:14px; height:26px; display:block; background:url('../images/ic_gg.png') 50% 50% no-repeat; z-index:9; }
.todo-wr ul.sub li.active a,
.todo-wr ul.sub li a:hover{ background-color:#985a57; border-top:#804c49 1px solid; border-right:#804c49 1px solid; color:#fff;}
.todo-wr ul.sub li a:hover *{ color:#fff;}
.todo-wr ul.sub li.active a::after,
.todo-wr ul.sub li a:hover::after{ background:url('../images/ic_gg2.png') 50% 50% no-repeat; }
.todo-wr ul.sub li:last-child a::after{ display:none;}
.todo-wr ul.sub li a strong{ color:#c4c4c5; position:absolute; text-align:right; bottom:15px; right:24px; font-weight:400; font-size:24px; width:50px; display:block; font-family:'Helvetica';}
.todo-wr ul.sub li a em{ position:absolute; top:10px; right:15px; display:block; text-align:center; line-height:28px; width:28px; height:28px; border-radius:14px; color:#fff; background-color:#e7554b; font-family:'Helvetica';}