/* Icons */
 .icon {
   display: inline-block;
   width: 16px;
   height: 16px;
   vertical-align: middle;
   fill: currentcolor;
 }
 
 /* Headings */
 
 /**
  * Modals ($modals)
  */
 
 /* 1. Large Modals */
 .modal {
     position: fixed;
     z-index: 10000; /* 1 */
     top: 0;
     left: 0;
     visibility: hidden;
     width: 100%;
     height: 100%;
 }
 .modal.is-visible { visibility: visible; }
 .no-scroll { height: 100vh;overflow-y: hidden; }
 .modal-overlay {
   position: fixed;
   z-index: 10;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: hsla(0, 0%, 0%, 0.5);
   visibility: hidden;
   opacity: 0;
   transition: visibility 0s linear 0.3s, opacity 0.3s;
 }
 
 .modal.is-visible .modal-overlay { opacity: 1;visibility: visible;transition-delay: 0s; }

 .modal-wrapper {
    /* top: 6em; */
    /* left: 50%; */
    /* transform: translate(-50%, 130px); */
    position: absolute;
    z-index: 9999;
    width: 955px;
    -ms-transform: translate(-50%, 130px);
    box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
    border: 1px solid white;
    padding: 10px 0 30px 0;
    top: 50%;
    right: 50%;
    transform: translate(50%,-50%);
}
 .modal-wrapper-old {
   position: absolute;
   z-index: 9999;
   top: 6em;
   left: 50%;
   width: 955px;
   transform: translate(-50%, 130px);
   -ms-transform: translate(-50%, 130px);
   box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
   border: 1px solid white;
   padding: 10px 0 30px 0;
 }
 .modal-wrapper.modal-common { /*top: 0em;*/}
 .modal-title { text-transform: uppercase;border-bottom: 1px solid rgb(189, 186, 180);padding: 15px 0;position: relative; }
 .modal-body {
    width: 100%;
    overflow-y: scroll;
    height: 565px;
    padding-right: 30px;
    margin-top: 20px;
 }
 .modal-wrapper.dark,  .modal-wrapper.dark h2,  .modal-wrapper.dark p,  .modal-wrapper.dark > div { background-color: rgb(52, 52, 52);color: rgb(189, 186, 180); }
 .modal-wrapper.light,  .modal-wrapper.light h2,  .modal-wrapper.light p,  .modal-wrapper.light > div { background-color: rgb(243, 243, 243);color: rgb(52, 52, 52); }

 .modal-transition { transition: all 0.3s 0.12s;opacity: 0; }
 .modal.is-visible .modal-transition { opacity: 1; }
 .modal-padding { padding: 0 40px;}
 .modal-padding > div { width: 870px;}
 .ic-close {
    content: url(../assets/img/ico/mini-icon/ic-close.png)!important;
    margin-right: 4px;
    position: absolute;
    right: 5px;
    top: 25px;
 }
.modal-body > div > p { margin-bottom: 15px;}
.modal-body ol.list-normal,.modal-body ul.list-normal { padding-left: 15px;}
.modal-body ol.list-normal li,.modal-body ul.list-normal li { padding-left: 15px;margin-bottom: 15px;}
.modal-body img { width: 100%;height: 100%;}

.div-outer { width:100%;display:flex;flex-wrap:wrap;justify-content: space-between;}
.div-inner { width:415px;height:260px;display:flex;margin-bottom: 23px; }
.div-inner.red { background-color:red; }
.div-inner.yellow { background-color:yellow; }
.g-1 { order: 1; } .g-2 { order: 4; } .t-1 { order: 2; } .t-2 { order: 3; }


 /* 2. Mini Popups */
 .popup {
  position: fixed;
  z-index: 10000; /* 1 */
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
}
.popup.is-visible { visibility: visible; }
.no-scroll { height: 100vh;overflow-y: hidden; }
.popup-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsla(0, 0%, 0%, 0.5);
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.3s, opacity 0.3s;
}

.popup.is-visible .popup-overlay { opacity: 1;visibility: visible;transition-delay: 0s; }
.popup-wrapper {
position: absolute;
z-index: 9999;
top: 10em;
left: 50%;
width: 470px;
height: 170px;
transform: translate(-50%, 130px);
-ms-transform: translate(-50%, 130px);
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
padding: 10px;
}
.wrapper-border { border: 1px solid white; }
.popup-wrapper.popup-common { top: 0em;}
.popup-title { text-transform: uppercase;padding: 15px 0;position: relative; }
.popup-body {
 width: 100%;
 overflow-y: scroll;
 height: 565px;
 padding-right: 30px;
 margin-top: 20px;
}
.popup-wrapper.dark,  .popup-wrapper.dark h2,  .popup-wrapper.dark p { background-color: rgb(15, 15, 15);color: rgb(189, 186, 180); }
.gray { background-color: rgb(32, 32, 32); }
.popup-wrapper.gray,  .popup-wrapper.gray h2,  .popup-wrapper.gray p,  .popup-wrapper.gray > div { background-color: rgb(32, 32, 32);color: rgb(52, 52, 52); }
/* background-color: rgb(32, 32, 32); */
.popup-transition { transition: all 0.3s 0.12s;opacity: 0; }
.popup.is-visible .popup-transition { opacity: 1; }
.popup-padding { padding: 0 40px;}
.popup-padding > div { width: 870px;}
.ic-close.popup-close { top:7px;right: 3px; }

.text-warn a { text-decoration: none;color:rgb(31, 248, 31);}