@charset "UTF-8";
html, body{margin: 0; padding: 0; font-size: 14px; width: 100%; max-width: 100%; background-color: #fff; color: #222;}
.skip-navi a{display:block;position:absolute;left:0;top:0;overflow:hidden;width:1px;height:1px;text-align:center;color:#fff;z-index:101;}
.skip-navi a:focus, .skip-navi a:active{padding:5px 0;width:100%;height:auto;background:#553385;}
hr{-moz-box-sizing: content-box; box-sizing: content-box; height: 0;}

/*wsg css*/
pre{font-size: 14px;}
#wrap{height: 100%; padding-top: 0; overflow-x: initial;}
.wsg #header{position: relative; width: auto; height: 70px; min-width: 1280px; background-color: #222; max-width: none; margin: 0 auto; padding: 0;max-width: auto;}
.wsg #header .header-wrap{position: relative; width: 1280px;margin: 0 auto; padding: 0;}
.wsg #header .header-wrap:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.wsg #header .header-wrap h1{float: left; color: #fff; padding-top: 0;margin-top: 15px; font-size: 30px;}
.wsg #header .header-wrap h1 a{display: block; width: 100%; height: 100%; color: #fff; ;}
.gnb-menu {position: absolute; right: 0; margin-top: 14px}
.gnb-menu a{display: block;position: relative; width: 25px; height: 25px; padding: 10px; }
.gnb-menu span {display: block; width: 25px; height: 2px; margin-bottom: 8px; background: #ffffff; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; }
.gnb-menu.close{z-index: 21}
.gnb-menu.close a{padding: 10px}
.gnb-menu.close span {width: 25px; }
.gnb-menu.close span.line-01 {margin-top: 12px; margin-bottom: 3px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);}
.gnb-menu.close span.line-02 {opacity: 0;}
.gnb-menu.close span.line-03 {margin-top: -15px; margin-bottom: 14px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);}
.wsg section #header{background: #fff;}

.wsg .header-wrap .gnb li{float: none; margin:1rem 0;}
.wsg .header-wrap .gnb li+li:before{display: none;}
#header .gnb{background-color: #fff;}
#header .gnb:before {background-color: #fff;}
.gnb {display: none;position: absolute; top: 75px !important; left: 0; width: 100%; height: 100vh;  padding-top: 60px; box-sizing: border-box; text-align: center; z-index: 1; background: rgba(255,255,255,0.98);}
.gnb.active{display: block;}
.gnb-wrap{max-width: 1280px; margin: 0 auto;position: relative;}
.gnb h3{color: #000; font-size: 35px}
.gnb ul li{ font-size:  25px; margin-top: 15px;}
.gnb ul li:hover{color: #000; text-decoration: underline;}
.gnb ul + h3{margin-top: 30px}

#container{position: static; width:  1280px; padding-top: 0; margin: 60px auto 100px; /* min-height: calc(100vh - 334px) !important; */}
#container:after{content: ""; display: block; clear: both; width: 0; height: 0; visibility: hidden;}
.content-primary{float: none; overflow: initial !important; max-width: 100%; margin-top: 0;}
.content-primary h1{font-family: verdana, Malgun Gothic, Dotum, Gulim, sans-serif; line-height: 1em; letter-spacing: -0.05em;     margin-bottom: 40px;margin-top: 40px;}
.content-primary > h1{font-weight: normal; font-size: 3em; color: #333333;}
.content-primary > h1 > .em{font-size: 16px; line-height: 1.2em; vertical-align: bottom;}
.content-primary > p{margin: 0.8em 0;  font-size: 14px;}
.content-primary > section{position: relative; margin-top: 4em;}
.content-primary > section > p{margin: 1em 0;}
.content-primary > section > .aside{position: absolute; top: 0; right: 0;}
.content-primary > section > section{margin-top: 2em;}
.content-primary > section > section .preview{color: #767676;}
.content-primary > section > section > h1{clear: both; margin: 1.5em 0 .5em 0; color: #ff4f19; font-size: 1em;}
.content-primary > section figure{margin: 1.5em 0;}
.content-primary > section figure figcaption{margin-top: .5em;}

.content-primary h2{font-size: 30px; color: #222222; margin-bottom: 40px; margin-top: 40px;}
.content-primary h3{ font-size: 18px;margin-bottom: 20px; color: #292929;}
.content-primary h3 span{display: block; font-size: 15px; color: #797979; font-weight: 400}
.content-primary strong.preview{display: block; color: red; padding-bottom: 10px}
.content-primary .markup{background: #fafafa; padding: 20px; margin-top: 30px; border: 1px solid #e1e1e1;}
.content-primary .markup strong{display: block; color: red; padding-bottom: 10px}
.content-primary .section .content{margin-top: 20px}
.celar{clear: both;}


/* progress */
.progress-list h3{}
.progress-list p{position: absolute; right: 0; top: 0; margin: 0 !important;}
.progress-list th,
.progress-list td{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; color: #222222;}
.progress-list td:first-child,
.progress-list td.state{text-align: center;}
.progress-list td p {text-align: center;}


/*table*/
.state.complete a{text-align: center; color: #ffffff}
#progressList.data-table{width: 100%; table-layout: fixed; margin: 0; border-top: 2px solid #222;border-bottom: 1px solid #222;border-collapse: collapse; text-align: center;}
#progressList.data-table thead th{padding: 7px 0; min-height: 20px; height: 50px; line-height: 20px; font-weight: 500; font-size: 15px;text-align: center;border-top: 1px solid #d4d4d4;  background-color: #f1f1f1;color: #222; border-bottom: 1px solid #d4d4d4;border-left: 1px solid #d4d4d4; font-weight: 500;}
#progressList.data-table thead th:first-child{border-radius: 0;}
#progressList.data-table thead th:last-child{border-radius: 0; border-right: 0 none;}
#progressList.data-table tbody td{padding:7px; min-height: 20px; height: 50px; font-size: 14px; line-height: 20px; border-top: 1px solid #d4d4d4;  border-bottom: 0 none; border-left: 1px solid #d4d4d4;color: #222; border-right: 0 none;}
#progressList.data-table tbody tr:first-child td {border-top:0 none;}
#progressList.data-table thead th:first-child {border-left:0 none;}
#progressList.data-table tbody td:first-child {border-left:0 none;}
#progressList.data-table tbody tr th{ font-size: 14px; color: #222;}
#progressList.data-table tbody tr+tr th{border-top: 1px solid #d4d4d4;}
#progressList.data-table tbody tr td.complete{background: #1db000; color: #ffffff;}
#progressList.data-table tbody tr td.working{background: #f5f5f5; color: #222;}
#progressList.data-table tbody tr td.working a{color: #222;}
#progressList.data-table tbody tr td.undecided{background: #f5f5f5;}
#progressList.data-table tbody tr td.apply{background: #f57f00;color: #fff;}
#progressList.data-table tbody tr:hover{background-color: #faffd3}
#progressList.data-table tbody+tbody{border-top:1px solid #d4d4d4;}
#progressList.data-table .text-left{text-align: left;}
#progressList.data-table .text-right{text-align: right;}
#progressList.data-table .text-center{text-align: center;}


/* FOOTER */
.wsg #footer{position: relative;bottom: 0;min-width:1280px; height: 133px;line-height: 133px;font-size: 14px;color: #6b6b6b;text-align: center;border-top: 1px solid #d6d6d6;background-color: #fff;}
.wsg #footer .footer-wrap{padding: 0; background: none;}
.wsg #container .window-popup h2.popup-title{padding: 0 40px; height: 60px; line-height: 60px; font-size: 24px; color: #ffffff; background-color: #292929;  text-align: left; margin-bottom: 0;}

/* index */
.nav.middle{padding-top: 50px;}
.nav.middle h2{font-size: 18px;border-bottom: 1px solid #d4d4d4; padding-bottom: 20px; margin-bottom: 20px;}
.nav.middle ul{display: flex; flex-wrap:wrap;  justify-content:space-between}
.nav.middle ul li{ width: 20%; padding: 1rem; box-sizing: border-box; height: 100px; text-align: center;}
.nav.middle ul li a{display: inline-block; position: relative; width: 100%; height: 100%; line-height: 70px;  border-radius: 5px; background: transparent; z-index: 1;}
.nav.middle ul li a:after{content: ''; display: block; position: absolute; left: 0; top: 0; width: 0; height: 100%; width: 100%; background: #ccc; z-index: -2;}
.nav.middle ul li a:before{content: ''; display: block; position: absolute; left: 0; top: 0; width: 0; height: 100%; -webkit-transition-duration: .3s; transition-duration: .3s; background: #b2cf35; z-index: -1;}
.nav.middle ul li a:focus:before,.nav.middle ul li a:hover:before{width: 100%;}