@charset "UTF-8";
/*
 * Project Name		: 
 * HTML/CSS Author	: Ji Yeoung Kim
 * Written date		: 
 * Browser			: IE11, Chrome, Firefox, Safari, Opera
*/

/* //////////////////////////////////////////////
    Normarize - cross browsing
////////////////////////////////////////////// */
html {
  font-size: 20px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 100%;
  margin: 0;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: inherit;
  margin: 0;
}
a {
  background:transparent;
  color: inherit;
  font-size:100%;
  vertical-align:baseline;
  text-decoration: none;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;  
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  vertical-align: middle;
}
button:focus,
input:focus,
optgroup:focus,
select:focus,
textarea:focus { 
  outline: none; 
}
button,
input {
  overflow: visible;
}
/* IE */
input[type=text]::-ms-clear,
input[type=text]::-ms-reveal{
  display: none;
}
button,
select {
  text-transform: none;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  position: relative;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
datalist {
  display: block;
}
summary {
  display: list-item;
}
table {
  border-collapse:collapse;
  border-spacing: 0;
}
template,
[hidden] {
  display: none;
}
nav ul,
nav ol {
  list-style:none;
  padding : 0;
  margin: 0;
}
:not(p) {
  box-sizing: border-box;
  line-height: 1;
}

/* //////////////////////////////////////////////
    Common
////////////////////////////////////////////// */
/* Set Font */
@font-face {
  font-family: 'notokr';
  font-style: normal;
  font-weight: 400;
  src: local('NotoSansKR Regular'), local('NotoSansKR-Regular'), local('NotoSansKR Regular');
  src: url(/html/fonts/notokr-regular.eot);
  src: url(/html/fonts/notokr-regular.woff) format('woff'),
       url(/html/fonts/notokr-regular.woff2) format('woff2');
}
@font-face {
  font-family: 'notokr';
  font-style: normal;
  font-weight: 500;
  src: local('NotoSansKR Medium'), local('NotoSansKR-Medium'), local('NotoSansKR Medium');
  src: url(/html/fonts/notokr-medium.eot);
  src: url(/html/fonts/notokr-medium.woff) format('woff'),
       url(/html/fonts/notokr-medium.woff2) format('woff2');
}

@font-face {
  font-family: 'notokr';
  font-style: normal;
  font-weight: 700;
  src: local('NotoSansKR Bold'), local('NotoSansKR-Bold'), local('NotoSansKR Bold');
  src: url(/html/fonts/notokr-bold.eot);
  src: url(/html/fonts/notokr-bold.woff) format('woff'),
       url(/html/fonts/notokr-bold.woff2) format('woff2');
}

html, body, .wrap {
  color: #0E0E0E;
  font-family: 'notokr', sans-serif;
  font-size: 20px;
  width: 100%;
  height:100%;  
  margin: 0;
  letter-spacing: -.05em;
  word-spacing: .1em;
  scroll-behavior: smooth;
}
.wrap {
  min-width: 1920px;
}

*, *:after, *:before {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*:not(p, input, textarea) { line-height: 1; }
::-webkit-input-placeholder {  
  color: #DADADA;
  line-height: 1.4;
}
::-moz-placeholder {
  color: #DADADA;
}
:-ms-input-placeholder {
  color: #DADADA;
}
:-moz-placeholder {
  color: #DADADA;
}

/* Hedline */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-weight: 700;
  letter-spacing: -.05em;
  margin: 0;
}
.h1 {  
  font-size: 1.6rem;  
}
.h2 {  
  border-left: 5px solid #06283D;
  font-size: 1rem;  
  margin: 1.2em 0 0.55em;
  padding: 0.4em 0.5em;
}
.h3 {
  font-size: .8rem;
  font-weight: 400;
  margin: 1.2rem 0 .4rem;
}
.h4 {
  font-size: .9rem;
  margin-bottom: .66em;
}
.h1 ~ .grid-table{
  margin-top: .6rem;
}
.grid-table ~ .h1,
.grid-table ~ .header-group {
  margin-top: 3rem;
}
.box > .h1 {
  margin: 0.5rem 0 1.2rem;
}
.box .h3,
.header-group > .h3,
.header-group > .h4,
.grid-col > .h3,
.modal-header > .h4 {  
  margin : 0;
}
.box > .header-group > .box-header {
  font-size: 1.2rem;
  padding: 0;
  margin-left: auto;
}
.header-group.ty-doc {
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5em;
}
.header-group.ty-doc > * ~ * {
  margin-left: .5em;
}
.header-group.ty-doc > .doc-tit {
  margin-bottom: 0;  
}
.header-group.ty-doc > select {
  width: auto;
  height: 2.1em;
}
.header-group.ty-doc > select {
  width: auto;
  height: 2.1em;
}

/* IR */    
.blind {
  clip: rect(0,0,0,0);
  width: 1px; height: 1px;
  position: absolute;
}
.hide { display: none !important;}

/* Scroll */
.scroll-wrap { width: 100%; }
.scroll { overflow: hidden; }
.scroll_auto   { overflow: auto; padding-right: 1px;}
.scroll_y { overflow-y: auto;}
.scroll_x { overflow-x: auto;}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: #C6C6C6;
  border-radius: 6px;
}
.h-400 { height: 400px;}

/* Align */
.ta-c { text-align: center;}
.ta-r { text-align: right;}
.jc-sb { justify-content: space-between;}
.jc-fe { justify-content: flex-end;}
.jc-c { justify-content: center;}

/* Grid System */
.row, .col, .colgroup { width: 100%;}
.col {
  align-items: center;
}
.cols2 > .col,
.cols4 > .col.merge2,
.cols2 > .colgroup {
  width: calc(100% / 2);
}
.cols3 > .col {
  width: calc(100% / 3 - 0.01px);
}
.cols3 > .col.merge2 {
  width: calc(100% / 3 * 2);
}
.cols4 > .col {
  width: calc(100% / 4);
}
.cols4 > .col.merge3 {
  width: calc(100% / 4 * 3);
}
.cols5 > .col {
  width: calc(100% / 5);
}
.cols5 > .col.merge2 {
  width: calc(100% / 5 * 2);
}
.cols5 > .col.merge3 {
  width: calc(100% / 5 * 3);
}
.in-grid-wrap {
  display: flex;
  display: -ms-flexbox;
  margin-top: 1.2em;
  position: relative;
}
.box > .in-grid-wrap {
  margin-top: auto;
}
.in-grid-wrap > .grid-col {
  flex: auto;
  position: relative;
}
.in-grid-wrap > .grid-col ~ .grid-col {
  margin-left: 1.2em;
}
.in-grid-wrap.cols2 > .grid-col {
  width: calc(100% / 2 - 1.2em);
}
.in-grid-wrap.cols3 > .grid-col {
  width: calc(100% / 3 - 1.2em);
}
.in-grid-wrap + .box {
  margin-top: 2.75em;
}
.form-wrap + .in-grid-wrap {
  margin-top: 2em;
}
.row._select {
  position: relative;
}
.row._select:before {
  border: 1px solid #02ADF2;
  content: "";
  display: block;  
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
}

.prevew {
  border: 1px solid #000000;
  content: "";
  display: block;  
  height: 450px;
  width: 50%;
}

.fileHolder {
  color: #DADADA;
}

/* Sections
  ========================================================================== */
  .wrap,
  header,
  #gnb,
  .gnb-group,
  .header-group,
  .login-info,  
  .grid-btns,  
  .form-btns,  
  .row, .col,
  .form-pigure {
    align-content: flex-start;
    display: flex;
    display: -ms-flexbox;    
    flex-wrap: wrap;
  }
  .item-group,
  .item-wrap {
    display: inline-flex;
    display: -ms-inline-flexbox;
  }

  header,  
  .header-group,
  .header-group.ty-label,
  .login-info,
  .grid-btns,  
  .form-btns {
    align-content: center;
    align-items: center;        
  }
  #main {
    width: calc(100% - 288px);
    padding: 1.5rem 1.25rem
  }
  .box {
    border: 1px solid #B4B4B4;
    padding: 1.2em;    
  }
  .box.ty01 {
    border-color: #DADADA;
  }
  .box:not(.ty01) {
    padding-bottom: 2.4em;
  }
  .box + .box,
  .form-box + .box {
    margin-top: 1.2rem;
  }
  .form-wrap + .box {
    margin-top: 3.6em;
  }
  .box.ty01 ~ .box.ty01,
  .header-group + .form-box {
    margin-top: .6rem;
  }
  
  /* Header */
  header {
    background-color: #06283D;
    color: #ffffff;
    justify-content: space-between;
    padding: .8em 1.2em;
    width: 100%;
    height: 76px;
  }
  .header-group {    
    margin-bottom: .6rem;
  }
  .logo {
    font-size: 1rem;
  }
  .login-info {
    font-size: .8rem;
  }
  .connect-time {
    background-color: rgba(14, 14, 14, .5);    
    border-radius: 1.2rem;
    display: block;
    font-size: .9rem;
    letter-spacing: 1px;
    padding: .6rem 1.2rem;
  }
  .connect-time:before {
    content: "접속 경과시간";
    letter-spacing: 0;
    margin-right: 0.5em;
  }
  .login-user {
    border-right: 1px solid #ffffff;
    margin: .1em 0.6rem .1em 1.2rem;    
    padding-right: 1rem;
  }

  /* Grid-table */
  .grid-search {  
    align-items: center;
    display: inline-flex;
    font-size: .8rem;
    margin-left: auto;
    width: 650px;
  }
  .grid-search > * ~ * {
    margin-left: .4em;
  }
  .grid-pagesize {    
    background-image: url(/html/images/arrow2.svg);
    font-size: .8rem;
    width: 104px;
    margin-left: auto;
  }
  .grid-calender {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.6rem;
  }
  .grid-calender > * ~ * {
    font-size: .9em;
    margin-left: .7em;
  }
  .grid-sum {
    border: 1px solid #DADADA;
    border-top: none;
    display: flex;
    display: -ms-flexbox;
    margin: 0;
  }
  .sum-label,
  .sum-data {
    font-size: .8em;
    font-weight: bold;
    padding: .9em 1em;
  }
  .sum-label {
    background-color: #F5F5F5;
    color: rgba(219, 0, 0, 1);
  }
  .sum-data {
    margin-left: auto;
  }

  /* Document */
  .zoom {
    zoom: 1.4;
  }
  .doc-wrap {
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    -ms-flex-direction: column;    
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .doc-box {
    padding: 1em 2.5em;
  }
  .doc-header {
    display: flex;
    display: -ms-flexbox;
    margin-bottom: 2em;
  }
  .doc-num {
    font-size: .8rem;
    letter-spacing: 0;
  }
  .doc-header > .doc-tit {
    width: auto;
    height: auto;
    margin: auto 0 0 auto;
    transform: translate(50%, 0);
  }
  .doc-h-info {
    border: 1px solid #DADADA;
    display: flex;
    display: -ms-flexbox;
    font-size: .7rem;
    flex-wrap: wrap;
    width: 300px;
    margin: 0;
    margin-left: auto;
  }
  .doc-h-info .info-label {
    background-color: #F5F5F5;    
    width: 130px;
  }
  .doc-h-info .info-data {    
    width: calc(100% - 130px);
  }
  .doc-h-info .info-label,
  .doc-h-info .info-data {
    border-bottom: 1px solid #DADADA;
    padding: .6rem;
  }
  .doc-h-info .info-label:nth-last-child(2),
  .doc-h-info .info-data:last-child {
    border-bottom: none;
  }
  .doc-h-info .info-data > .ipbox {
    padding: 0;
    height: auto;
  }
  .doc-num {
    font-size: .8rem;
  }
  .doc-tit {
    font-size: 1.6rem;    
    margin: 0 0 .85rem;
    text-align: center;
  }
  .doc-tit input {
  	line-height:0;
  	height:2.5rem;
  }
  .doc-box > .doc-tit {
    margin: 0 0 1.5em;
  }
  .zoom > .doc-tit {
    margin-top: 3.1rem;
  }
  .doc-tit > select {
    font-size: inherit;
    font-weight: 700;
    width: auto;
    height: auto;
  }
  .doc-txt {
    font-size: .9rem;
    margin: 1.2rem 0 3.3rem;
  }  
  .doc-txt > p {
    margin: 0;
  }
  .doc-txt > p ~ p {
    margin-top: 1.2rem;
  }
  .doc-txt > p > [data-name="affiliation"] {
    display: inline-block;
    font-size: 1.2rem;
    letter-spacing: .4em;
    margin-top: 1em;
  }
  .doc-txt > p.ta-c > .check-wrap {
    margin-right: 0;
  }
  .doc-txt > p.ta-c .check-label {
    justify-content: center;
  }
  .box > .doc-txt {
    margin-bottom: 0;
  }
  ol.doc-conts-wrap {
    padding: 2em 1em;
  }
  .doc-conts ~ .doc-conts {
    padding-top: 1.2rem;
  }
  .conts-txt {
    line-height: 1.4;
  }
  .conts-txt, 
  .conts-list {
    font-size: .8rem;
    margin: 1em 0;    
  }
  .conts-list {
    padding: 0 0.5em;
  }
  .conts-list.ty-unlist {
    list-style: none;
    width: 100%;
    max-width: 800px;
    margin: auto;        
    margin: 3em auto auto;
  }
  .conts-list-item ~ .conts-list-item {
    margin-top: 0.5em;
  }
  .conts-item-wrap {
    display: flex;
    display: -ms-flexbox;
  }  
  .conts-item-wrap > .item-label {
    display: inline-flex;
    flex-shrink: 0;
    width: 180px;
    margin-right: 2em;
    justify-content: space-between;
    position: relative;
  }
  .conts-item-wrap > .item-label:after {
    content: ":";
    position: absolute;
    right: -0.5em;
  }
  .conts-item-wrap > .item-label > input {
    margin: -12px 0;
  }
  .conts-item-wrap .item-group.in_dash {
    width: auto;
  }
  .conts-item-wrap .item-group._time {
    width: 180px;
  }
  .doc-item-tit {
    font-size: .9rem;
    font-weight: 700;
  }
  .doc-footer {    
    font-size: .9rem;
    text-align: right;
    margin: 3em 0 3em auto;
    width: 25em;
  }
  .doc-footer > p {
    display: inline-flex;
    justify-content: flex-end;
    margin: 0;
  }
  .doc-footer > .doc-date input[type="text"]{
    width: 70px;
    text-align: center;
  }
  .doc-footer .item-wrap > .sign {
    width: 5rem;
  }
  .data-caption {
  	display:flex;
	font-size:.8em;
	margin: 0.5em; 
  }

/* Navigation
  ========================================================================== */  
  /* GNB */
  #gnb {
    background-color: #06283D;
    min-height: calc(100% - 64px);
    width: 288px;    
  }
  .gnb-group,
  .gnb-group-list,
  .gnb-group > a,
  .depth1, .depth2 {
    width: 100%;
    margin: 0;
  }  
  .depth1, .depth2 {
    color: #FFFFFF;
    font-size: .8rem;
    font-weight: 400;    
    position: relative;
  }
  .depth1 {
    background-color: #001928;
    padding: 16px 12px;
  }
  .depth2 {
    background-color: transparent;
    border-left: 5px solid transparent;
    padding: 16px 24px;
    transition: background .25s ease-in-out;
  }
  .depth1:after {
    content: "\f282";
    color: inherit;
    font-family: bootstrap-icons;
    font-weight: 700;
    position: absolute;
    right: 1.5rem;
    top: calc(50% - 0.5em);
  }
  .depth2:before {
    content: "";
    display: inline-block;
    font-family: bootstrap-icons;
    width: 1.5rem;
    margin-left: -.25rem;
  }
  .depth2.active {
    background-color: rgba(255,255,255, .1);
    border-left-color: #02ADF2;
  }
  .depth2:hover {
    background-color: rgba(255,255,255, .1);
  }
  /* 결재관리 */
  [data-group-name="payment"] > .depth2._01:before {
    content: "\f1ff";
  }
  [data-group-name="payment"] > .depth2._02:before {
    content: "\f1f7";
  }
  /* 사용자 관리 */
  [data-group-name="user"] > .depth2._01:before {
    content: "\f8a2";
  }
  [data-group-name="user"] > .depth2._02:before {
    content: "\f4cf";
  }
  [data-group-name="user"] > .depth2._03:before {
    content: "\f4d2";
  }
  [data-group-name="user"] > .depth2._04:before {
    content: "\f3ad"; 
  }
  [data-group-name="user"] > .depth2._05:before {
    content: "\f89e";
  }
  [data-group-name="user"] > .depth2._06:before {
    content: "\f7e0";
  }
  [data-group-name="user"] > .depth2._07:before {
    content: "\f790"; 
  }
  [data-group-name="user"] > .depth2._08:before {
    content: "\f388";
  }
  [data-group-name="user"] > .depth2._09:before {
    content: "\f40e";
  }
  [data-group-name="user"] > .depth2._10:before {
    content: "\f17b";
  }
  [data-group-name="user"] > .depth2._11:before {
    content: "\f17d";
  }
  [data-group-name="user"] > .depth2._12:before {
    content: "\f359";
  }
  [data-group-name="user"] > .depth2._13:before {
    content: "\f871";
  }
  [data-group-name="user"] > .depth2._14:before {
    content: "\f189";
  }
  [data-group-name="user"] > .depth2._15:before {
    content: "\f678";
  }
  [data-group-name="user"] > .depth2._16:before {
    content: "\f66c";
  } 
  
  /* 근무관리 */
  [data-group-name="work"] > .depth2._01:before {
    content: "\f677";
  }
  [data-group-name="work"] > .depth2._02:before {
    content: "\f596";
  }
  [data-group-name="work"] > .depth2._03:before {
    content: "\f101"; 
  }
  [data-group-name="work"] > .depth2._04:before {
    content: "\f349";
  }
  [data-group-name="work"] > .depth2._05:before {
    content: "\f1e3";
  }
  /* 연가 */
  [data-group-name="vacation"] > .depth2._01:before {
    content: "\f1e7";
  }
  [data-group-name="vacation"] > .depth2._02:before {
    content: "\f1f2";
  }
  [data-group-name="vacation"] > .depth2._03:before {
    content: "\f1ff";
  }
  [data-group-name="vacation"] > .depth2._04:before {
    content: "\f808";
  }
  [data-group-name="vacation"] > .depth2._05:before {
    content: "\f1e1";
  }
  [data-group-name="vacation"] > .depth2._06:before {
    content: "\f1f0";
  }
  /* 급여/수당 */
  [data-group-name="salary"] > .depth2._01:before {
    content: "\f291";  
  }
  [data-group-name="salary"] > .depth2._02:before {
    content: "\f58c";
  }
  [data-group-name="salary"] > .depth2._03:before {
    content: "\f38a";
  }
  [data-group-name="salary"] > .depth2._04:before {
    content: "\f3b8";
  }
  [data-group-name="salary"] > .depth2._05:before {
    content: "\f3a6";
  }
  [data-group-name="salary"] > .depth2._06:before {
    content: "\f1ff";
  }
  [data-group-name="salary"] > .depth2._07:before {
    content: "\f5aa";
  }
  [data-group-name="salary"] > .depth2._08:before {
    content: "\f34f";
  }
  [data-group-name="salary"] > .depth2._09:before {
    content: "\f3aa";
  }
  [data-group-name="salary"] > .depth2._10:before {
    content: "\f89e";
  }
  [data-group-name="salary"] > .depth2._11:before {
    content: "\f89f";
  }
  [data-group-name="salary"] > .depth2._12:before {
    content: "\f2db";
  }
  [data-group-name="salary"] > .depth2._13:before {
    content: "\f613";
  }
  [data-group-name="salary"] > .depth2._14:before {
    content: "\f876";
  }
  [data-group-name="salary"] > .depth2._15:before {
    content: "\f649";
  }
  [data-group-name="salary"] > .depth2._16:before {
    content: "\f4cf";
  }
  [data-group-name="salary"] > .depth2._17:before {
    content: "\f363";
  }  
  
  /* 증명서/서식 */
  [data-group-name="format"] > .depth2._01:before {
    content: "\f728";
  }
  [data-group-name="format"] > .depth2._02:before {
    content: "\f34f";
  }
  [data-group-name="format"] > .depth2._03:before {
    content: "\f37e"; 
  }
  [data-group-name="format"] > .depth2._04:before {
    content: "\f5ec";
  }
  [data-group-name="format"] > .depth2._05:before {
    content: "\f349";
  }
  /* 퇴직 */
  [data-group-name="retirement"] > .depth2._01:before {
    content: "\f1f4";
  }
  [data-group-name="retirement"] > .depth2._02:before {
    content: "\f200";
  }
  [data-group-name="retirement"] > .depth2._03:before {
    content: "\f8b5";
  }
  [data-group-name="retirement"] > .depth2._04:before {
    content: "\f1f5";
  }
  [data-group-name="retirement"] > .depth2._05:before {
    content: "\f1e2";
  }
  [data-group-name="retirement"] > .depth2._06:before {
    content: "\f8b0";
  }  
  /* 신청 */
  [data-group-name="application"] > .depth2._01:before {
    content: "\f1f5";
  }
  [data-group-name="application"] > .depth2._02:before {
    content: "\f293";
  }
  [data-group-name="application"] > .depth2._03:before {
    content: "\f292";
  }
  [data-group-name="application"] > .depth2._04:before {
    content: "\f3b9";
  }
  [data-group-name="application"] > .depth2._05:before {
    content: "\f1f1";
  }
  [data-group-name="application"] > .depth2._06:before {
    content: "\f4e1";
  }
  [data-group-name="application"] > .depth2._07:before {
    content: "\f4d0";
  }
  [data-group-name="application"] > .depth2._08:before {
    content: "\f228";
  }
  [data-group-name="application"] > .depth2._09:before {
    content: "\f224";
  }
  [data-group-name="application"] > .depth2._10:before {
    content: "\f7e1";
  }
  [data-group-name="application"] > .depth2._11:before {
    content: "\f28b";
  }
  [data-group-name="application"] > .depth2._12:before {
    content: "\f36f";
  }
  [data-group-name="application"] > .depth2._13:before {
    content: "\f1e2";
  }
  [data-group-name="application"] > .depth2._14:before {
    content: "\f50e";
  }

  /* 조회 */
  [data-group-name="search"] > .depth2._01:before {
    content: "\f4d3";
  }
  [data-group-name="search"] > .depth2._02:before {
    content: "\f8c4";
  }
  [data-group-name="search"] > .depth2._03:before {
    content: "\f84c";
  }
  [data-group-name="search"] > .depth2._04:before {
    content: "\f1f3";
  }
  [data-group-name="search"] > .depth2._05:before {
    content: "\f293";
  }
  [data-group-name="search"] > .depth2._06:before {
    content: "\f615";
  }

  /* Breadcrumb */
  .breadcrumb {
    margin-left: auto;
  }
  .breadcrumb-list {
    color: #1B1B1B;
    display: flex;
    display: -ms-flexbox;    
    font-size: .7rem;
  }
  .breadcrumb-list > li ~ li {
    margin-left: .3em;
  }
  .breadcrumb-list > li ~ li:before {
    content: ">";
    margin-right: .3em;
  }

  /* TAB */
  .tab {
    background-color: #F5F5F5;    
  }
  .modal-body .tab {
    margin: -2em -2.5em 0;
  }
  .tab-list {
    display: flex;
    display: -ms-flexbox;
    list-style: none;
    padding: 0;
    margin: 0 2.5em;
  }
  .tab-item {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    cursor: pointer;
    font-size: .9em;
    font-weight: 700;
    padding: 1rem 1rem;
  }
  .tab-item.active {
    border-bottom-color:#06283D;
    cursor: default;
  } 
  .tab-conts {
    display: none;
    margin-top: 2em;
  }
  .tab-conts.active {
      display: block;
  }

  
/* Table
  ========================================================================== */
  .tb { table-layout: fixed; }
  .tb + .tb,
  .tb + .h4 {
    margin-top: 1.2rem;
  }
  .tb-form._header + .tb-form {
    margin-top: .6rem;
  }
  .tb-form {
    border: 1px solid #DADADA;
    font-size: .8rem;
    width: 100%;    
  }
  .tb-form th {
    background-color: #F5F5F5;
    font-weight: normal;     
    min-height: 31px;    
  }
  .tb-form thead {
    border-bottom: 1px solid #DADADA;
  }
  .tb-form tbody th {
    border-right: 1px solid #DADADA;
  }
  .tb-form tr:not(:first-child):not(.dividing-line) {
    border-top: 1px solid #DADADA;
  }
  .tb-form th:not(:first-child),
  .tb-form td:not(:first-child),
  .tb-form .notfirst {
    border-left: 1px solid #DADADA;
  }
  .tb-form th,
  .tb-form td {    
    position: relative;
    padding: .438em .531em;
    line-height: 1.4;
  }
  .tb-form tfoot tr {
    border-top: 1px solid #0E0E0E;
  }
  .tb-form tfoot th,
  .tb-form tfoot td {    
    font-weight: 700;
    padding: 1em .531em;
  }
  .tb-form tfoot th {
    background-color: transparent;
  }
  .total-rating {
    background-color: rgba(140, 185, 232, .2);
  }
  .dividing-line {
    border-top: 1px solid #0E0E0E;
  }
  .tb-form ._sat {    
    color: #02ADF2;
  }
  .tb-form ._sun {    
    color: #DB0000;
  }
  .tb-form.ty-tabulator tbody tr:nth-child(even) {
    background-color: #F5F5F5;
  }
  .th-wrap {
    display: flex;
    display: -ms-flexbox;
  }
  .th-txt {
    margin: auto;
  }
  .th-btn {
    margin-left: -15.5%;
  }
  td.invalid {
    background-color: rgba(219, 0, 0, .1);
  }

/* Forms
  ========================================================================== */
  /* Form Box */  
  .form-wrap + .grid-table,
  .form-wrap + .header-group {
    margin-top: 1.2rem;
  }
  .form-wrap + .h4,
  .form-box + .h4,
  .form-box + .header-group,
  .box + .h4 {
    margin-top: 2em;
  }
  .form-box + .header-group {
    margin-bottom: 0.66em;
  }
  .form-wrap {    
    font-size: .8rem;
    position: relative;
    width: calc(100% - 9rem);
    margin: 0 auto;
  }
  .form-box {    
    border: 1px solid transparent;
    letter-spacing: -.095em;
    width: 100%;
  }
  .form-box > .form-control {
    position: absolute;
    top: 10px;
    right: 0.65em;
  }
  .form-box > .row ~ .row {
    margin-top : .4rem;    
  }
  .form-label,
  .item-label {
    color: #0E0E0E;
    padding: .6rem;
    position: relative;
    width: 134px;
    height: 100%;
  }
  .required:after {
    content: "*";
    color: #DB0000;
  }
  .form-item {
    color: #0E0E0E;
    flex: 1 0 auto;
    padding: .45rem .6rem;
    position: relative;
    word-break: break-all;
    min-height: 2em;
  }
  .form-wrap {
    width: 100%;
  }
  .form-wrap.ty-narrow {
  	width: 400px;
  	margin-left: auto;
  	margin-right: 0;
  }
  .form-wrap .form-box {
    border-color: #DADADA;
  } 
  .form-wrap .form-box > .row ~ .row,
  .form-box > .row > .colgroup > .col ~ .col {
    margin-top: 0;
    border-top: 1px solid #DADADA;
  }
  .form-wrap .row:not(.in-grid) > .col ~ .col,
  .form-wrap .row:not(.in-grid) > .colgroup ~ .col {
    border-left: 1px solid #DADADA;
  }
  .form-wrap .form-label {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    background-color: #F5F5F5;
    border-right: 1px solid #DADADA;
    letter-spacing: -.12em;
    padding: 1rem .6rem;
  }
  .form-wrap .form-label.h_2row {
    height: 88px;
  }
  .form-wrap .form-item {        
    width: calc(100% - 134px);
  }
  .form-wrap .form-item.colgroup {
    padding: 0;
  }
  .form-wrap._in-figure .form-box {
    width: calc(100% - 222px);
    margin-left: 222px;
  } 
  .form-wrap .form-pigure {
    background: #D9D9D9;
    width: 222px;
    height: 100%;
    margin: 0;
    position: absolute;
    justify-content: center;
    align-content: center;
    -ms-flex-align: center;
  }
  .form-item.colgroup .col ~ .col {
    border-top: 1px solid #DADADA;
  }
  .form-item.colgroup .form-label {
    background: transparent;
    border-right-color: transparent;
    width: auto;
    position: relative;
    margin-left: 0.75em;
  }
  .form-item.ty-nopadding {
    padding: 0;    
  }
  .form-item.ty-expand {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
  }
  .form-item.ty-expand .btns-area {    
    margin-left: auto;
    min-width: 4.6em;
  }
  .item-group,
  .item-wrap {
    align-items: center;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
  }
  .item-group.colgroup {
    flex-direction: column;
    -ms-flex-direction: column;
    align-items: flex-start;
  }
  .item-group._sm {
    height: 142px;
  }
  .item-group.in_dash:after,
  .item-group._time:after {    
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .item-group.in_dash:after {
    content: "~";    
  }
  .item-group._time:after {
    content: ":";
  }
  .item-group.checkgroup {
    flex-wrap: wrap;    
  }
  .item-group:not(.colgroup) > .item ~ .item,  
  .item-group:not(.colgroup) > .item-wrap ~ .item-wrap,
  .item-group:not(.colgroup) > .item-group ~ .item-group {
    margin-left: .6rem;
  }
  .item-group.colgroup > .item-wrap ~ .item-wrap {
    margin-top: .2rem;
  }
  .item-group.fg-ty1 > .item:nth-child(1) {    
    max-width: 14.625em;
  }
  .item-group.fg-ty1 > .item:nth-child(2) {
    flex-grow: 3;
  }
  .item-group.fg-ty1 > .item:nth-child(3) {
    flex-grow: 0;
    min-width: 2.6rem;
  }
  .item-group.fg-ty2 > .item {
    flex: auto;
  }
  .item-group._table .item-wrap {
    flex-direction: column;
    -ms-flex-direction: column;
    flex: 1;
  }
  .item-group._table .item-wrap ~ .item-wrap {
    border-left: 1px solid #DADADA;
    margin-left: 0;    
  }
  .item-group._table .item-wrap > .item-label {    
    background-color: #f5f5f5;
    border-bottom: 1px solid #DADADA;
    width: 100%;
    padding: 0.438em 0.75em;
  }
  .item-group.ty-table {
    min-height: 60px;
  }
  .item-group.ty-table,
  .item-group.ty-table > dd {    
    display: list-item;
    margin: 0;
  }
 .item-group + .box {
    margin-top: .5em;
  }
  .item {
    flex: 1;
    position: relative;
  }
  .item-group._table .item {
    margin: 0.5em;
    box-sizing: border-box;
    width: calc(100% - 1em);
  }
  .item-label {
    flex-shrink : 0;
  }
  .item-label._colon:after {
    content: ":";
    margin-left: 0.2em;
    position: absolute;
    right: 0;
  }  
  .item-wrap._inherit > .item {
    flex: inherit;
    width: auto;
  }
  .item-wrap._inherit > .txt {
    margin-right: .7em;
  }
  .item-wrap > .txt {
    margin: 0 .3em;    
  }
  .item-desc {
    display: flex;
    display: -ms-flexbox;
    font-size: .7rem;
  }
  .item-desc._alert {
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
  } 
  .item-desc._info {    
    margin-top: 1em;
  }
  .item-desc._warning {
    color: #DB0000;
  }
  .item-wrap > .sign {    
    width: 240px;
  }
  .sign {
    position: relative;
    text-align: center;
  }
  .sign > img {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);        
    max-width: 120px;
    max-height: 60px;    
  }
  .form-btns {
    border-top : 1px solid #DADADA;
    font-size: .85rem;
    margin-top: 2.4rem;
    padding-top: 0.6em;
  }
  .form-btns.ty1 {
    margin-top: 0;
    border-color: transparent;
  }
  .form-counter {
    position: absolute;
    left: 0;
  } 
  .form-counter > .total-counter {
    font-weight: 700;
    font-size: .8rem;
  }
  .form-counter > .total-counter:before {
    content : "검색대상 수 : ";
    font-weight: 400;
  }
  .form-counter > .total-counter:after {
    content: "건";
    font-weight: 400;
  }
  .period-wrap {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    position: relative;
  }
  .period-wrap:before {
    content: "~";
    order: 2;
    margin: 0 1em;
  }
  .period-from,
  .period-to {
    display: inline-flex;
    position: relative;
  }
  .period-to {
    order: 3;
  }
  .period-wrap [data-period="year"],
  .period-wrap [data-period="month"],
  .period-wrap [data-period="day"] {
      display: inline-flex;
      align-items: center;
  }
  .period-wrap [data-period="year"] {
      width: 113px;
  }
  .period-wrap [data-period="month"],
  .period-wrap [data-period="day"] {
      width: 95px;
  }  
  .period-wrap [data-period="year"]:after {
    content: "년";
  }
  .period-wrap [data-period="month"]:after {
    content: "월";
  }
  .period-wrap [data-period="day"]:after {
    content: "일";
  }
  .period-wrap [data-period="year"]:after,
  .period-wrap [data-period="month"]:after,
  .period-wrap [data-period="day"]:after  {
    margin: 0 0.2em;
  }
  .period-from > * ~ *,
  .period-to > * ~ * {
    margin-left: 1em;
  }
  .link-item {
    padding: .45rem .6rem;
  }
  .link-item:hover {
    text-decoration: underline;
  }

  /* List Group */
  .group-label-list,
  .group-items,
  .group-items .items {
    display: flex;
    display: -ms-flexbox;
    list-style: none;
    margin: 0;
    padding-left: 0;
    text-align: center;
    width: 100%;
  }
  .group-label-list {
    background-color: #f5f5f5;          
  }
  .group-label-list > .label ~ .label {
    border-left: 1px solid #DADADA;
  }
  .group-items {
    flex-direction: column;
    -ms-flex-direction: column;
  }
  .group-label-list .label,
  .group-items .item {
    flex: 1;
    padding: 0.438em 0.75em;
  }
  .group-label-list .label:last-child,
  .group-items > .items > .item:last-of-type {
    padding-right: 2.2em;
  }
  .group-items .items {    
    border-top: 1px solid #DADADA;
    position: relative;
    min-height:30px;
  }
  .group-items .items > .btn[data-btn-roll='delete'] {
    position: absolute;
    right: 0.25em;
    top: 50%;
    transform: translateY(-50%);
    opacity: .2;
  }
  .group-items .item ~ .item {    
    border-left: 1px solid #DADADA;
  }
  .group-items._edit > .items:hover {
    background-color: #E8F1FA;
  }
  .group-items._edit > .items:hover .btn[data-btn-roll='delete'] {
    opacity: 1;
  }

  /* Button */
  .btn {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font-size: inherit;
    font-weight: inherit; 
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;    
    -ms-touch-action: manipulation;
            touch-action: manipulation;
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; 			
    padding: 0.625em 0.75em;
  }
  .btn:hover{
    text-decoration: none;
    outline: none;
  }
  .btn:active {
    outline: none;
    background-image: none;
  }
  .btn[disabled],
  input[disabled] {
    pointer-events: none;
    cursor: not-allowed;
    box-shadow: none;
  }
  .neutral:not(._outline) {
    background-color: #444444;
    color: white;
  }
  .positive:not(._outline) {
    background-color: #06283D;
    color: white;
  }
  .negative:not(._outline) {
    background-color: #DB0000;
    color: white;
  }
  .neutral:not(._outline):hover {
    background-color: #8F8F8F;
    color: white;
  }
  .positive:hover{
    background-color: #01080C;
  }
  .negative:hover {
    background-color: #830000;
  }
  .neutral._outline {    
    border-color: #8F8F8F;
    color: #8F8F8F;
  }
  .positive._outline {    
    border-color: #06283D;
    color: #06283D;
  }
  .negative._outline {    
    border-color: #DB0000;
    color: #DB0000;
  }
  .neutral._outline:hover {
    background-color: #DADADA;
    border-color: #8F8F8F;
    color: #8F8F8F;
  }
  .positive._outline:hover {
    background-color: #CDD4D8;
    border-color: #06283D;
    color: #06283D;
  }
  .negative._outline:hover {
    background-color: #F8CCCC;
    border-color: #DB0000;
    color: #DB0000;
  }
  .neutral[disabled],
  .positive[disabled],
  .negative[disabled] {
    background-color: #DADADA;
    border-color: #DADADA;
    color: #B4B4B4;
  }
  .neutral._outline[disabled],
  .positive._outline[disabled],
  .negative._outline[disabled] {
    background-color: #F5F5F5;
    border-color: #B4B4B4;
    color: #B4B4B4;
  }
  .btn._round {
    border-radius: 1.5em;
  }
  .btn.ic-btn {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
  }
  .btn.logout {
    border-radius: 34px;
    font-size: .8rem;
    padding: 12px 8px;
  }
  .btn.logout:hover {
    background-color: rgba(140, 184, 232, .2);
  }
  .btn.logout > .bi:before {
    transform: rotate(90deg);
  }

  .btn ~ .btn,
  .btn-wrap ~ .btn,
  .btn ~ .btn-wrap {
    margin-left: .4rem;
  }  
  .ic-btn._add, .ic-btn._remove {
    font-size: 1.3rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    border: none;
  }
  .ic-btn._toggle,
  .ic-btn._toggle .ic {
    width: 41px; height: 20px;
  }
  ._toggle .ic {
    align-items: center;
    background-color: #B4B4B4;
    border-radius: 10px;
    display: flex;
    display: -ms-flexbox;    
    padding: 2px 3px;
    position: relative;
  }
  ._toggle.on .ic {
    background-color: #02ADF2;
  }
  ._toggle .ic:before {
    border-radius: 50%;
    background-color: white;
    content: "";
    position: absolute;
    top: 2px;
  }
  ._toggle.on .ic:before {
    right: 3px;
  }
  ._toggle .ic,
  ._toggle .ic:before {
    -ms-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }
  .ic-btn._clear {
    opacity: .5;
    position: absolute;    
    right: 0;
    width: 3em;
    height: 100%;    
  }
  .ic-btn._clear:hover {
    opacity: 1;
  }
  .ic-btn ~ .ic-btn {
    margin-left: .5em;
  }

  /* Button Size*/
  .btn.btn-lg,
  .btns-lg .btn,
  .form-btns .btn,
  .modal-btns .btn {
    font-size: 1rem;
    padding: .8em 1.2em;
  }
  .btn.btn-md,
  .btns-md .btn,
  .grid-btns .btn {
    font-size: .8rem;    
  }
  .btn.btn-sm,
  .btns-sm .btn {
    font-size: .7rem;    
  }
  .btn-name:not(.blind) + .bi {
    margin-left: 4px;
  }
  .bi + .btn-name:not(.blind) {
    margin-right: 4px;
  }

  /* Button Group */
  .btns-area,
  .btn-wrap {
    align-items: center;
    display: flex;
    display: -ms-flexbox;
    overflow:hidden;
    position:relative;
  }
  .header-group > .btn-area {
    margin-left: auto;
  }  

  /* Attach Button */
  .btn-wrap._attach input.input_file {/*파일찾기 폼 투명하게*/    
    opacity:0;
    filter:alpha(opacity=0);
    -ms-filter:"alpha(opacity=0)";
    -moz-opacity:0;
    position:absolute;
    top:0; right:0;
    width: 98px; height: 36px; /* 버튼 사이즈와 같게 */    
  }

  /* svg icon */
  .ic::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
  }  
  ._detail > .ic:before {
    background: url(/html/images/detail.svg) no-repeat;
  }
  ._add > .ic:before {
    background: url(/html/images/add.svg) no-repeat;
  }
  ._add:hover > .ic:before {
    background: url(/html/images/add_hover.svg) no-repeat;
  }
  ._add[disabled] > .ic:before {
    background: url(/html/images/add_disabled.svg) no-repeat;
  }
  ._remove > .ic:before {
    background: url(/html/images/remove.svg) no-repeat;
  }
  ._remove:hover > .ic:before {
    background: url(/html/images/remove_hover.svg) no-repeat;
  }
  ._remove[disabled] > .ic:before {
    background: url(/html/images/remove_disabled.svg) no-repeat;
  }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .btn:active .btn-name:not(.blind),
    .btn:active .bi,
    .btn:active .ic {
      position: relative;
      top:0;
    }
  }
  
  /* Input */
  input:not([type="radio"]):not([type="checkbox"]),
  select,
  textarea {
    border: 1px solid #DADADA;
    width: 100%;
    padding: .5em .75em;
  }
  input:not([type="radio"]):not([type="checkbox"]) {
    height: 2rem;
  }
  input:not([type="radio"]):not([type="checkbox"]):hover,
  input:not([type="radio"]):not([type="checkbox"]):focus,
  select:not(:disabled):hover,
  select:not(:disabled):focus,
  textarea:hover,
  textarea:focus {
    border-color: #444;
  }
  input:not([type="radio"]):not([type="checkbox"]).valid,
  select:not(:disabled).valid,
  textarea.valid {
    border-color: #02ADF2;
  }
  input:not([type="radio"]):not([type="checkbox"]).invalid,
  select:not(:disabled).invalid,
  textarea.invalid {
    border-color: #DB0000;
  }
  input:not([type="radio"]):not([type="checkbox"]):disabled,  
  select:disabled,
  textarea:disabled {
    background-color: #DADADA;
    color: #8F8F8F;
  }
  .sch-inp-wrap {
    width: 100%;
    position: relative;
  }
  .checkgroup .check-wrap,
  .radiogroup .radio-wrap {    
    margin: 2px 1rem 2px 0;
  }  
  .check-wrap,
  .radio-wrap {
    cursor: default;    
  }
  .check-wrap._no-label .check-label:before {
    margin-right: 0;
  }  
  .scroll .check-wrap,
  .scroll .radio-wrap {
    height: 1.15rem;    
  }
  input[type="checkbox"],
  input[type="radio"]{
    display: none;
  }
  .check-label, .radio-label {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
  }
  .check-label:not(._mark-r):before,
  .check-label._mark-r:after,
  .radio-label:before {
    border: 1px solid #444;
    content: "";
    color: #06283D;
    display: block;
    font-family: bootstrap-icons;
    width: 16px; height: 16px;
    margin-right: .5em;
  }
  .check-label._mark-r:after {
    margin-left: .5em;
    margin-right: 0;
  }
  .check-wrap .check-label:not(._mark-r):before,
  .check-wrap .check-label._mark-r:after {
    border-radius: 2px;
  }
  .radio-wrap .radio-label:before {
    border-radius: 50%;
    font-size: .65em;
    display: flex;
    display: -ms-flexbox;
    padding: 2px;
  }
  input:checked + .check-label:not(._mark-r):before,
  input:checked + .check-label._mark-r:after {
    border:none;
    content: "\f26c";
  }
  .radiogroup:not(.ty-rating):not(.ty-btn) input:checked + .radio-label:before {
    border-color: #06283D;
    content: "\f287";
  }
  input[type="checkbox"]:disabled + .check-label,
  input[type="radio"]:disabled + .radio-label {    
    opacity: .4;
  }
  .radiogroup.ty-rating {
    display: flex;
    display: -ms-flexbox;
    flex-wrap: nowrap;
  }
  .ty-rating .radio-wrap {
    background-image: linear-gradient(to bottom, transparent 48%, #DADADA 49%, transparent 50%);
    margin-right: 0;
    flex: 1;    
  }
  .tb .radiogroup.ty-rating {
    margin: -12px -8px;
  }
  .ty-rating .radio-wrap ~ .radio-wrap {
    border-left: 1px solid #DADADA;
  }
  .ty-rating .radio-label {
    align-items: center;
    flex-direction: column;
    -ms-flex-direction: column;
    line-height: 2;
  }  
  .ty-rating .radio-label:before {    
    border-radius: 6px;
    border: none;    
    content: attr(data-rating);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    width: auto;    
    height: 25px;
    order: 2;
    padding: 0 7px;
    margin: 5px;
  }
  .ty-rating input:checked + .radio-label:before {
    background: rgba(2, 173, 242, 0.3);        
  }
  .header-group .radiogroup.ty-btn {
    margin-left: 1.6em;
  }
  .radiogroup.ty-btn {    
    flex-wrap: wrap;
    width: auto;
  }
  .ty-btn .radio-wrap {
    cursor: pointer;
    margin: 2px;
  }  
  .ty-btn .radio-label {
    background-color: #444444;
    border-radius: 4px;
    color: white;
    font-size: .7rem;    
    min-width: 50px;
    padding: .5em 1.45em;
  }
  .ty-btn input:checked + .radio-label {
    background-color: #02ADF2;
  }
  .ty-btn .radio-label::before {
    content: none;
  }  

  /* Select */
  select {   
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(/html/images/arrow.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - .8em) center;
    height: 2rem;
    padding-right: 2em;
    width: 100%;
  }
  select::-ms-expand {
    display: none;
  }
  select.ic-calendar {
    background-image: url(/html/images/calendar.svg);
  }
  .header-group.ty-label > select {
    width: auto;
    margin-left: 2em;
  }
  
  /* Textarea */
  textarea {
    line-height: 1.45;
    resize: none;    
  }

  /* width */
  .w-auto, select.w-auto, :not([type="radio"]):not([type="checkbox"]).w-auto { width: auto; }
  .w-auto select.item { min-width: 96px;}
  .w-xxs, :not([type="radio"]):not([type="checkbox"]).w-xxs { width: 2.7rem; }
  .w-xs, :not([type="radio"]):not([type="checkbox"]).w-xs { width: 5.1rem; }
  .w-sm, :not([type="radio"]):not([type="checkbox"]).w-sm { width: 7rem; }
  .w-md, :not([type="radio"]):not([type="checkbox"]):not(.in_dash).w-md { width: 11.7rem;}
  .w-md.in_dash { width: 15rem;}
  .w-lg.in_dash { width: 30rem;}

  /* if readonly */
  .readonly ::-webkit-input-placeholder {  
	  color: transparent;
	}
	.readonly ::-moz-placeholder {
	  color: transparent;
	}
	.readonly :-ms-input-placeholder {
	  color: transparent;
	}
	.readonly :-moz-placeholder {
	  color: transparent;
	}	
  .readonly .form-box {
    border-color: #DADADA;
  }
  .readonly .form-box > .row ~ .row {
    margin-top: 0;
    border-top: 1px solid #DADADA;
  }  
  .readonly .row:not(.in-grid) > .col ~ .col {
    border-left: 1px solid #DADADA;
  }  
  .readonly .form-label {
    background-color: #F5F5F5;
    padding: 1rem .6rem;
  }
  .readonly .form-item > .scroll {
    border-color: transparent;
    height: auto;
    max-height: 93px;
  }
  .readonly .item-group.in_dash,
  .readonly .item-group._time,
  .readonly .item-group.in_dash > .item {
    width: auto;
  }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .readonly .item-group.in_dash,
    .readonly .item-group.in_dash > .item {
      min-width: 6rem;
    }
    .readonly .item-group._time {
      min-width: 2.4rem;
    }
    .readonly .item-group._time:nth-child(1) {
      min-width: 2.9rem;
    }
  }
  .readonly .item-group._time > .item {
    width: 1.4em;    
    padding: 0;
  }
  .readonly .item-group.in_dash:after {
    transform: translate(0, -50%);
  }
  .readonly .item-group._time::after {
    transform: translate(-3px, -50%);
  }
  .readonly .item-group._time:nth-child(1):after {
    transform: translate(3px, -50%);
  }
  .readonly .item-group._time:nth-child(1) > .item:nth-child(1) {
    width: 2.2em;
    padding-left: 0.75em;
  }
  .readonly .item-group._time > .item ~ .item {
    margin-left: 0;
  }  
  .readonly .form-item.colgroup .form-label:not(.no-partline)::after {
    background-color: #B4B4B4;
    content: "";
    display: block;
    width: 1px;    
    height: calc(100% - 1em);
    position: absolute;
    right: -.5em;
    top: 50%;
    transform: translateY(-50%);
  }
  .readonly input:focus,
  .readonly select:focus,
  .readonly input:not([type="radio"]):not([type="checkbox"]),
  .readonly input:not([type="radio"]):not([type="checkbox"]).valid,
  .readonly input:not([type="radio"]):not([type="checkbox"]).invalid,
  .readonly .check-wrap,
  .readonly .radio-wrap,
  .readonly select,
  .readonly select.valid,
  .readonly select.invalid,
  .readonly textarea.valid,
  .readonly textarea.invalid {
    border-color: transparent;
    outline: none;
    pointer-events: none;
  }
  
  .readonly textarea,
  .readonly textarea:focus,
  textarea.readonly {
    border-color: transparent;
    outline: none;
  }
  
  .readonly select {
    background-image: none;
  }
  .readonly :not(.exception) .check-wrap,
  .readonly .check-wrap:not(.check),
  .readonly .radiogroup:not(.ty-rating) .radio-wrap:not(.check),
  .readonly .check-label:before,
  .readonly .radiogroup:not(.ty-rating) .radio-label:before,
  .readonly .item-group > .btn,
  .readonly .item-group .btn._clear,
  .readonly label.required:after,
  .readonly .item-label.required:after,
  .readonly .btns-area,
  .readonly .form-item .btns-area {
    display: none;
  }
  .readonly .radiogroup.radiogroup:not(.ty-rating), 
  .readonly .checkgroup {
    padding-left: 0.75em;
  }
  .readonly input:not([type="radio"]):not([type="checkbox"]):disabled, 
  .readonly select:disabled, .readonly textarea:disabled {
    background-color: transparent;
    color: #0E0E0E;
  }
  .readonly.not_rd_rating .ty-rating > .radio-wrap {
    pointer-events:initial;
  }
  .readonly .period-wrap select,
  .readonly .period-wrap input {
      padding: 0;
  }
  .readonly .period-wrap [data-period="year"]{
    width: 62px;
  }
  .readonly .period-wrap [data-period="month"],
  .readonly .period-wrap [data-period="day"] {
      width: 45px;
  }
  .readonly input:not([type="radio"]):not([type="checkbox"]).w-xxs {
    width: 35px;
    padding: 0;
  }
  .readonly .exception:not(.disabled) * {
  	pointer-events: auto;
  }
  .readonly .exception .radio-wrap,
  .readonly .exception .check-wrap,
  .readonly .check-label:before {
  	display:block !important;  	
  }
  
  /* Disabled */
  .disabled,
  .disabled * {
  	pointer-events: none;
  }
  .disabled .btn {
    background-color: #DADADA;
    border-color: #DADADA;
    color: #B4B4B4;
  }
  .disabled input[type="checkbox"] + .check-label,
  .disabled input[type="radio"] + .radio-label {    
    opacity: .4;
    pointer-events: none;
  }
  /* Etc */
  ._ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .form-desc {
    color: #DB0000;
    font-size: .8rem;
    margin-right: 0.5em;
  }
  .user-photo {
    background: white url(/html/images/person.svg) no-repeat center;
    width: 198px;
    height: 198px;
  }
  .txt-deco {
    display: flex;
    display: -ms-flexbox;
    align-items: center;   
  }
  .txt-deco:before {
    content: "";    
  }
  .txt-deco > input[type=text] {
    margin-left: -0.5em;
    padding: 0.5em;
  }
  .txt-deco._degree:before{
    content: "\00BA";
    margin-right: 0.5em;
  }
  .iframe-wrap {
  /* border: 1px solid #B4B4B4; */
  }
  .iframe-wrap._posi {
  	position: absolute;
    width: calc(100% - 530px);
    height: calc(100% - 4em);
  }
  .iframe-wrap._posi > .iframe {
  	height: 100%;
  }
  .iframe {    
    width: 100%;    
    margin: 1em 0;
    min-height: 300px;
  }
  .iframe:first-child {
    margin-top: 0;
  }


/* Modal 
  ========================================================================== */
  .modal-show {
    overflow: hidden;
    padding-right: 6px;
  } 
  .modal-wrap {
    background-color: rgba(0, 0, 0, .5);
    display: none;
    position: fixed;
    top:0; left:0;
    width: 100%;
    height: 100%;
  }
  .modal-wrap.show,
  .modal-header  {
    display: flex;
    display: -ms-flexbox;
  }
  .modal,
  .modal-header,
  .modal-body {    
    background-color: #FFFFFF;
    width: 100%;
  }
  .modal {        
    width: 992px;
    height: 780px;
    margin: auto;
  }
  .modal.w-lg {    
    width: 1253px;
  }
  .modal.w-xlg {    
    width: 1510px;
  }
  .modal.h-lg {
  	height:850px;
  }
  .modal-header {
    align-content: center;
    align-items: center;
    background-color: #06283D;
    color: #FFFFFF;
    padding: 0.6rem 1.2rem;
}
  .modal-header > .modal-close {
    font-size: 1.2rem;    
    padding: 0;
    margin-left: auto;
}
  .modal-body {
    height: calc(100% - 52px);    
    overflow: hidden;
    overflow-y: auto;
    padding: 2em 5em;
    position: relative;
  }
  .modal.w-lg .modal-body,
  .modal.w-xlg .modal-body {
    padding: 2em 2.5em;
  }   
  .modal-body > .box {
    padding: 1.2em 1.2rem 2.4rem;
  }
  .modal-btns {
    align-items: center;
    display: flex;
    display: -ms-flexbox;
    font-size: .85rem;
    justify-content: flex-end;
    width: 100%;
    margin-top: 2em;
    transform: translateX(3em);
  }
  .modal.w-lg .modal-btns,
  .modal.w-xlg .modal-btns {
    transform: translateX(0);
  }

  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .modal-show {
      overflow: hidden;
      padding-right: 17px;
    }
    .modal-btns {
      padding-bottom: 2em;
    }
  }   

/* Alert */
  .alert-wrap {    
    background: rgba(0, 0, 0, 0.4);
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .alert-wrap.show {
    display: block;
  }
  .alert-wrap .alert {
    background-color: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.14), 
                0px 6px 30px rgba(0, 0, 0, 0.12), 
                0px 8px 10px rgba(0, 0, 0, 0.2);
    padding: 24px;

    position: absolute;
    left: 50%; top: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 286px;
  }
  .alert .alert-tit {
    font-size: 16px;
    margin: 0;
  }
  .alert .alert-msg {
    color: #444;
    font-size: 14px;
    margin-bottom: 50px;
  }
  .alert .btn-area {
    display: flex;
    display: -ms-flexbox;
    font-size: .8em;
    justify-content: flex-end;
  }
  .alert:not(.alert.alert-form) .btn-area .btn {    
    padding: 0;
  }
  .alert .btn[data-btn="close"] {
    color: #DB0000;
  }
  .alert.alert-form {
    width: 506px;
  }
  .alert.alert-form .btn-area {    
    margin-top: 1.2em;
  }

  /* Tooltip */
  .tooltip {    
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  .tooltip-txt {
    background-color: #363636;
    color: white;
    display: none;
    font-size: .8rem;
    line-height: 1.4;
    padding: 12px;
    position: absolute;
    width: 300px;
    transform: translate(-10px, 10px);
  }
  .tooltip-txt:after {
    content: "";
    display: block;
    width: 0;
    height:0;
    border: 6px solid transparent;
    border-bottom: 12px solid #363636;
    position: absolute;
    top: -1em;
  }
  .tooltip:hover > .tooltip-txt {
    display: block;
  }

/* Loading 
  ========================================================================== */
  .loading-wrap {
    background: rgba(255, 255, 255, 0.6);
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;    
  }
  .spinner {
    background: conic-gradient(from 180deg, rgba(9, 104, 219, 1) 25%,rgba(255, 255, 255, 1));    
    border-radius: 50%;    
    height: 62px;
    width: 62px;
    position: relative;
    left: calc(50% - 31px);
    top: calc(50% - 31px);
    -webkit-animation: spinner .75s linear infinite;
    animation: spinner .75s linear infinite;
  }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .spinner {
      background : linear-gradient(100deg, rgba(9, 104, 219, 1) 50%, #ffffff);
    }
  }
  .spinner::after,
  .spinner::before {
    border-radius: 50%;
    content: "";
    position: absolute;    
  }
  .spinner::before {
    background-color: rgba(9, 104, 219, 1);
    width: 11px;
    height: 11px;
    left: calc(50% - 5px);
    bottom: 0;    
  }
  .spinner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    top: 11px;
    right: 11px;
    bottom: 11px;
    left: 11px;
    background-color: white;
  }

@keyframes spinner {
  to { transform: rotate(360deg); }
}


/* Main 
========================================================================== */
/* User */
.shortcut-list {  
  display: flex;
  display: -ms-flexbox;
  list-style: none;
  padding-left: 0;
  margin-bottom: 60px;
}
.shortcut-list > .shortcut {  
  border-radius: .6rem;
  padding: 30px 32px 40px;
  position: relative;
  width: calc(100% / 4);
}
.shortcut:hover {
  background-color: rgba(140, 185, 232, 0.1);
}
.shortcut ~ .shortcut {
  margin-left: 3.3rem;
}
.shortcut ~ .shortcut:before {  
  background-color: rgba(218, 218, 218, 1);
  content: "";
  display: block;
  width: 1px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-33px, -50%);
}
.shortcut > a {
  display: block;
}
.shortcut > a > .bi {
  display: inline-flex;
  font-size: 2.4rem;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
}
.shortcut .name-desc {  
  display: block;
  font-size: .8rem;
  margin-top: 1em;
}
.shortcut .name {
  align-items: center;
  display: inline-flex;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: .35em;
}
.shortcut .name > .bi {
  font-size: .8rem;
  font-weight: normal;
  margin-left: .75em;
}
/* used user main */
.win-conts {
  background: white;
  display: none;
  padding: 1.5rem 1.25rem;
  position: absolute;
  top: 76px;
  left: 288px;
  width: calc(100% - 288px);
  height: 1120px;
}
/* Login 
========================================================================== */
#login {
  color: #0E0E0E;
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100% - 76px);
}
.login-box {
  background-color: white;
  display: flex;
  display: -ms-flexbox;
  padding: 3rem 0;
  width: 1152px;
  height: 836px;
}
.login-form {
  padding: 8.5em 4.6em;
  width: 100%;
}
.login-form > .h1 {
  font-size: 1.6rem;
}
.login-form .form-wrap {
  margin-top: 2rem;
}
.login-form .form-box {
  border: none;
}
.login-form .form-box > .row ~ .row {
  border-top: none;
  margin-top: 0.8em;
}
.login-form .check-wrap {
  font-size: .7rem;
  color: #8F8F8F;
}
.login-form .check-label:before {
  border-color: #8F8F8F;
}
.login-form .form-btns {
  border: none;
  margin-top: 5rem;
  padding: 0;
}
.login-form .form-btns > .btn {  
  background-color: #224278;
  border-radius: 0;
  color: white;
  font-size: .8rem;
  font-weight: 700;    
  padding: 1.125em;
  width: 100%;
}
.login-form .form-box input:not([type="radio"]):not([type="checkbox"]) {  
  padding: 0 3.25em;
  height: 2.6rem;
}
.login-form .form-box input[type="text"] {
  background: #FFFFFF url(/html/images/person-fill.svg) no-repeat 24px center;
}
.login-form .form-box input[type="password"] {
  background: #FFFFFF url(/html/images/lock-fill.svg) no-repeat 24px center;
}
.login-form input::-webkit-input-placeholder {  
  color: #8F8F8F;  
}
.login-form input::-moz-placeholder {
  color: #8F8F8F;
}
.login-form input:-ms-input-placeholder {
  color: #8F8F8F;
}
.login-form input:-moz-placeholder {
  color: #8F8F8F;
}
.login-desc {  
  padding: 8.5rem 3rem;
  width: 50%;
}
.login-desc > .desc-tit {
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
}
.login-desc > .desc-list {
  list-style: decimal;
  padding-left: 1em;
  margin: 0;
}
.desc-list > .desc {
  line-height: 1.4;
}
.desc-list > .desc ~ .desc {
  margin-top: 1em;
}

/* Admin */
.login._admin {
  background-color: #F0F0F0;
}
.login._admin > header {
  background: linear-gradient(90.19deg, #214177 10.98%, #0D94B2 94.31%, #00CCD9 132.59%);  
}

/* User */
.login-box {
  background-color: rgba(255,255,255, .9);
}
.bg-wrap {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  left:0; top:0;
  z-index: -1;
  background: #DADADA;
}
.bg-wrap > .bg {
  background-repeat: no-repeat;
  position: absolute;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function:ease-in-out;  
}
.login._user .bg-1 {
  background-image: url(/html/images/bg/bg01.png);
  animation-name: anibg01;
  animation-delay: 0s;
}
.login._user .bg-2 {
  background-image: url(/html/images/bg/bg02.png);
  animation-name: anibg02;
  animation-delay: 0s;
}

.login._user .bg-3 {
  background-image: url(/html/images/bg/bg03.png);
  animation-name: anibg03;
  animation-delay: 0s;
}
.login._user .bg-4 {
  background-image: url(/html/images/bg/bg04.png);
  animation-name: anibg04;
  animation-delay: 0s; 
}
.login._user .bg-5 {
  background-image: url(/html/images/bg/bg05.png);
  animation-name: anibg05;
  animation-delay: 0s;
} 
.login._user .bg-6 {
  background-image: url(/html/images/bg/bg06.png);
  animation-name: anibg06;
  animation-delay: 0s;
}
.filePreview {
  width: 95%;
  height: 95%;
}

/* Error 
========================================================================== */
.error-box {
  background-color: white;
  display: flex;
  display: -ms-flexbox;
  padding: 3rem 0;
  width: 1152px;
  height: 836px;
  justify-content: center;
  align-items: center;
}
#error {
  color: #0E0E0E;
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100% - 76px);
}

.error._frame {
  background-color: #F0F0F0;
}
.error._frame > header {
  background: linear-gradient(90.19deg, #214177 10.98%, #0D94B2 94.31%, #00CCD9 132.59%);  
}

@keyframes anibg01 {
  0% {
    width: 83.5%;
    height: 110%;
    left: -203px;
    top: -110px;  
    z-index: 1;
    transform: scale(.9);
    opacity: .3;
  }
  10% {
    width: 83.5%;
    height: 110%;
    left: -203px;
    top: -110px;
    transform: rotate(-7deg);
    z-index: 1;
    opacity: 1;
  }
  30% {  
    width: 84%;
    height: 110%;
    right: -10px;        
    top: -483px;
    transform: rotate(-96deg);
    z-index: 1;
  }
  50% {
    width: 84%;
    height: 110%;
    right: -267px;    
    top: 234px;
    transform: rotate(-22deg);
    z-index: 1;
  }
  70% {
    width: 84%;
    height: 110%;
    left: -306px;
    top: 356px;
    transform: rotate(96deg);
    z-index: 1;
  }
  90% {
    width: 85%;
    height: 110%;
    left: -86px;
    top: 307px;
    transform: rotate(126deg);
    z-index: 1;
  }
  100% {
    width: 83.5%;
    height: 110%;
    left: -203px;
    top: -110px;
    transform: rotate(-7deg);
    z-index: 1;
    opacity: .3;
  }
}
@keyframes anibg02 {
  0% {
    width: 84%;
    height: 110%;
    left: 21px;
    top: -665px;
    transform: rotate(77deg);    
    transform: scale(.9);
    opacity: .3;
    z-index: 1;
  }
  10% {
    width: 84%;
    height: 110%;
    left: 21px;
    top: -665px;
    transform: rotate(77deg);
    z-index: 1;
    opacity: 1;
  }
  30% {
    width: 89%;
    height: 110%;
    right: -885px;
    left: auto;
    bottom: -126px;
    top: auto;
    transform: rotate(-12deg);
    z-index: 1;
  }  
  50% {
    bottom: -1158px;
    left: 441px;
    width: 79%;
    height: 111%;
    transform: rotate(53deg);
    z-index: 1;
  }
  70% {
    top: -326px;
    left: -838px;
    width: 79%;
    height: 111%;
    transform: rotate(-4deg);
    z-index: 1;
  }
  90% {
    top: -317px;
    left: -365px;
    width: 84%;
    height: 112%;
    transform: rotate(32deg);
    z-index: 1;
  }
  100% {
    width: 84%;
    height: 110%;
    left: 21px;
    top: -665px;
    transform: rotate(77deg);
    z-index: 1;
    opacity: .3;
  }
}
@keyframes anibg03 {
  0% {
    width: 76%;
    height: 110%;
    left: -277px;
    top: -477px;
    transform: rotate(37.5deg);
    z-index: 0;
    transform: scale(.9);
    opacity: .3;
  }
  10% {    
    width: 76%;
    height: 110%;
    left: -277px;
    top: -477px;
    transform: rotate(37.5deg);
    z-index: 0;
    opacity: 1;
  }
  30% {
    width: 76.7%;
    height: 110%;
    right: -280px;
    left: auto;
    top: -586px;
    transform: rotate(-55deg);
  }  
  50% {
    width: 76.7%;
    height: 110%;
    right: -320px;
    bottom: -676px;
    transform: rotate(-170deg);
  }
  70% {
    width: 76.7%;
    height: 110%;
    left: -591px;
    bottom: -496px;
    transform: rotate(-220deg);
  }
  90% {
    width: 79%;
    height: 100%;
    left: -372px;
    bottom: -217px;
    transform: rotate(-189deg);
  }
  100% {
    width: 76%;
    height: 110%;
    left: -277px;
    top: -477px;
    transform: rotate(37.5deg);
    z-index: 0;
    opacity: .3;
  }
}
@keyframes anibg04 {
  0% {
    width: 88%;
    height: 110%;
    right: -284px;
    bottom: -562px;
    transform: rotate(46deg);
    transform: scale(.9);
    opacity: .3;
  }
  10% {
    width: 88%;
    height: 110%;
    right: -284px;
    bottom: -562px;
    transform: rotate(46deg);
    opacity: 1;
  }
  30% {
    width: 88%;
    height: 110%;
    right: 587px;
    bottom: -369px;
    transform: rotate(-45deg);
  }  
  50% {
    width: 88%;
    height: 110%;
    left: -216px;
    top: -217px;
    transform: rotate(30deg);
    z-index: 0;
  }
 70% {
    width: 87.8%;
    height: 110%;
    right: -135px;
    top: -150px;
    transform: rotate(151deg);
    z-index: 0;
 }
  90% {
    width: 87.8%;
    height: 110%;
    right: -525px;
    bottom: -367px;
    transform: rotate(181deg);
    z-index: 0;
  }
  100% {
    width: 88%;
    height: 110%;
    right: -284px;
    bottom: -562px;
    transform: rotate(46deg);
    opacity: .3;
  }
}
@keyframes anibg05 {
  0% {
    width: 93%;
    height: 111%;
    right: -661px;
    bottom: -72px;
    transform: scale(.9);
    opacity: .3;
  }
  10% {
    width: 93%;
    height: 111%;
    right: -661px;
    bottom: -72px;
    opacity: 1;
  }
  30% {
    width: 89%;
    height: 129%;
    right: 15px;
    bottom: -879px;
    transform: rotate(89deg);
  }
  50% {
    width: 89%;
    height: 129%;
    left: -560px;
    bottom: -681px;
    transform: rotate(155deg);
    z-index: -1;
  }
 70% {
    width: 93%;
    height: 113%;
    left: 51px;
    top: -725px;
    transform: rotate(105deg);
    z-index: -1;
 }
  90% {
    width: 93%;
    height: 113%;
    left: 754px;
    top: -425px;
    transform: rotate(135deg);
    z-index: -1;
  }
  100% {
    width: 93%;
    height: 111%;
    right: -661px;
    bottom: -72px;
    opacity: .3;
  }
}
@keyframes anibg06 {
  0% {
    bottom: -955px;
    left: 428px;
    width: 71%;
    height: 106%;
    transform: rotate(84deg);
    z-index: 1;
    transform: scale(.9);
    opacity: .3;
  }
  10% {
    bottom: -955px;
    left: 428px;
    width: 71%;
    height: 106%;
    transform: rotate(84deg);
    z-index: 1;
    opacity: 1;
  }
  30% {
    top: -250px;
    left: -1190px;
    width: 100%;
    height: 130%;
    transform: rotate(-4deg);
    z-index: 1;
  }  
  50% {
    top: -1143px;
    left: -313px;
    width: 100%;
    height: 130%;
    transform: rotate(-109deg);
    z-index: 1;
  }
 70% {
    bottom: -604px;
    right: -699px;
    width: 90%;
    height: 136%;
    transform: rotate(10deg);
    z-index: 1;
 }
  90% {
    bottom: -779px;
    right: -418px;
    width: 77%;
    height: 109%;
    transform: rotate(45deg);
    z-index: 1;
  }
  100% {
    bottom: -955px;
    left: 428px;
    width: 71%;
    height: 106%;
    transform: rotate(84deg);
    z-index: 1;
    opacity: .3;
  }
}