@import url("../fonts/fonts.css");
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #333333;
  font-family: MalgunGothic, "Montserrat", 'Open Sans', sans-serif;
  font-weight: 400;
}

html, body {
  font-size: 16px;
}

body::-webkit-scrollbar {
  display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
  color: #333;
}

h1 {
  font-size: 34px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 17px;
}

h6 {
  font-size: 16px;
}

a {
  color: #333;
}

p {
  margin: 8px 0;
  line-height: 21px;
}

/*===================
	common
===================*/
.d-flex {
  display: -ms-flexbox;
  display: flex;
  margin: 0;
}

.justify-content-center {
  justify-content: center !important;
}

.flex-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.justify-content-space-between {
  justify-content: space-between;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -.75rem;
  margin-left: -.75rem;
  margin-bottom: 16px;
}
.row .col,
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: .75rem;
  padding-left: .75rem;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-2 {
  -ms-flex: 0 0 16.666666%;
  flex: 0 0 16.666666%;
  max-width: 16.666666%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666666%;
  flex: 0 0 41.666666%;
  max-width: 41.666666%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666666%;
  flex: 0 0 66.666666%;
  max-width: 66.666666%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pb-80 {
  padding-bottom: 80px !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mr-2 {
  margin-right: 8px !important;
}

.ml-2 {
  margin-left: 8px !important;
}

.mt-80 {
  margin-top: 80px !important;
}

.w-50 {
  width: 50%;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.float-right {
  float: right;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.align-v-center {
  position: absolute;
  top: 50%;
  width: 90%;
  margin-top: -22vh;
}

/*===================
	section, title and bg
===================*/
.app-section {
  position: relative;
  padding: 15.55556vw 0 0;
  width: 100%;
  height: 100vh;
  background-color: #3777CA;
  overflow-y: auto;
}
.app-section:not(.popup):before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: url(../images/bg.png) top center no-repeat;
  background-size: 100%;
  z-index: 0;
}
.app-section .container {
  margin: 0 auto;
  width: 100%;
  max-width: 640px;
}
.app-section .entry {
  margin: 0 auto;
  padding: 1rem;
  width: 100%;
}
.app-section .entry form {
  padding-bottom: 13.33333vw;
}

@media (max-height: 450px) {
  .main {
    overflow: scroll;
  }
}
@media (max-height: 450px) {
  .sub {
    overflow: scroll;
  }
}
.app-title {
  position: relative;
  margin: 0 auto;
  width: 100%;
  padding-top: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  color: #ffffff;
}
.app-title h2 {
  font-weight: 400;
  font-size: 1rem;
  text-transform: uppercase;
}
.app-title h2 p {
  margin: 0 0 0 5px;
  font-size: 0.75rem;
  color: #BFC2CB;
}
.app-title h2 .icon, .app-title h2 span {
  display: inline-block;
  vertical-align: middle;
  color: #ffffff;
}
.app-title h2 .name {
  position: relative;
  padding-left: 6.66667vw;
  font-size: 1rem;
}
.app-title h2 .name:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url(../images/icons/ico_member.png);
}
.app-title h2 .title {
  display: block;
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  font-size: 1rem;
  vertical-align: middle;
}
.app-title h2 .title:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.24);
}
.app-title h2 .subtitle {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.45;
  font-size: 0.75rem;
}
.app-title h2 .subtitle:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 6.66667vw;
  height: 6.66667vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url(../images/icons/ico_attend_wh.png);
}
.app-title .status {
  padding-top: 0.5rem;
}
.app-title .status p {
  position: relative;
  display: inline-block;
  margin-left: 7.77778vw;
  padding-top: 1rem;
  font-family: "Montserrat", 'Open Sans', MalgunGothic, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  text-transform: capitalize;
}
.app-title .status p:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: calc(100% - 12px);
  height: 0.1875rem;
  border-radius: 0.1875rem;
  background-color: rgba(255, 255, 255, 0.3);
}
.app-title .status p:after {
  content: "";
  display: inline-block;
  margin-left: 0.5rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 0.375rem;
  background-color: #73AB00;
  vertical-align: bottom;
}

/*===================
	navbar
===================*/
.navbar {
  width: 100%;
  height: 15.555556vw;
  padding: 0;
  z-index: 3;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0;
  box-shadow: none;
  background-color: #336EBA;
}
.navbar .container {
  width: 100%;
}
.navbar a {
  display: block;
}
.navbar .home,
.navbar .go-to-back,
.navbar .logout,
.navbar .bugger-menu {
  float: left;
  padding: 4.4444445vw 15px;
}
.navbar .header-logo {
  display: block;
  margin: 0 auto;
  padding: 4.4444445vw 0;
  width: auto;
}
.navbar .header-logo.logoimg {
  width: 25vw;
}
.navbar .header-logo.logoimg:after {
  content: '';
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 6.666667vw;
  background: url("../images/header/logo_posco_header.png") center no-repeat;
  background-size: contain;
}
.navbar .header-logo span:not(.title) {
  display: none;
}
.navbar .header-logo span.title {
  display: inline-block;
  padding: 0.5rem 0;
  line-height: 1rem;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
}
.navbar .panel-control-left,
.navbar .panel-control-right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.navbar .panel-control-left > div,
.navbar .panel-control-right > div {
  float: left;
}
.navbar .panel-control-left {
  right: auto;
  left: 0;
}
.navbar .logout {
  position: relative;
}
.navbar .logout:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 6.666667vw;
  background-color: rgba(255, 255, 255, 0.23);
  transform: translateY(-50%);
}
.navbar .close {
  float: right;
  width: 50px;
  height: 56px;
  line-height: 56px;
  z-index: 1;
}
.navbar .close .go-to-back {
  padding: 20px 0;
}
.navbar .site-title {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  display: inline-block;
}
.navbar .site-title h2 {
  padding: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 56px;
  text-align: center;
  color: #262626;
  position: relative;
  cursor: default;
}
.navbar .site-title h2 span {
  color: #00AFEC;
  margin-right: 2px;
}

.side-nav {
  top: 15.555556vw;
  padding-top: 16px;
  width: 250px;
  border: 0;
  background-color: rgba(0, 0, 0, 0.85);
}
.side-nav a {
  padding: 0 32px;
  color: rgba(255, 255, 255, 0.87);
}
.side-nav li:last-of-type {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  position: fixed;
  right: 0;
  bottom: 60px;
}
.side-nav li:last-of-type a {
  text-align: right;
}

.drag-target,
#sidenav-overlay {
  top: 15.555556vw;
}

/*===================
	app footer
===================*/
.container-float-bottom {
  z-index: 1;
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
}
.container-float-bottom .buttom-wrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
}
.container-float-bottom .buttom-wrap a {
  position: relative;
  display: block;
  padding: 2.5vh 0;
  font-size: 1rem;
  text-align: center;
  color: #ffffff;
  border-radius: 0;
}
.container-float-bottom .buttom-wrap a:before {
  margin: 0 auto;
  width: 5.555555vw;
  height: 5.555555vw;
}
.container-float-bottom .buttom-wrap a span {
  display: block;
  margin-top: 1.4vh;
}

.app-bottom-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0px 1.25rem 0 rgba(0, 0, 0, 0.24);
  z-index: 9;
}
.app-bottom-fixed:before {
  content: '';
  display: block;
  height: 1.5rem;
}
.app-bottom-fixed a,
.app-bottom-fixed button,
.app-bottom-fixed .button {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  width: 100%;
  padding: 0;
  height: 14.44444vw;
  line-height: 14.44444vw;
  border-radius: 0;
  text-align: center;
  font-size: 1rem;
}
.app-bottom-fixed a:active,
.app-bottom-fixed button:active,
.app-bottom-fixed .button:active {
  transform: none;
}
.app-bottom-fixed .d-flex {
  width: 100%;
}
.app-bottom-fixed .d-flex .btn-next {
  position: relative;
  text-indent: -20px;
}
.app-bottom-fixed .d-flex .btn-next:before, .app-bottom-fixed .d-flex .btn-next:after {
  content: '';
  display: block;
  position: absolute;
}
.app-bottom-fixed .d-flex .btn-next:before {
  top: 18px;
  right: 18px;
  width: 11px;
  height: 17px;
  background: url(../images/icn_next_light.png) center no-repeat;
  background-size: contain;
  z-index: 2;
}
.app-bottom-fixed .d-flex .btn-next:after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.app-bottom-fixed .d-flex > .button.btn-seconday:first-child {
  width: 40%;
  display: none;
}
.app-bottom-fixed .bottom-form {
  background-color: #ffffff;
  padding: 0 24px 0;
  height: 144px;
  display: -ms-flexbox;
  display: flex;
  flex-flow: column;
  position: relative;
  align-items: center;
  justify-content: center;
}
.app-bottom-fixed .bottom-form .col {
  flex-grow: 0;
}
.app-bottom-fixed .bottom-form .col + .col {
  margin-top: 12px;
}
.app-bottom-fixed .bottom-form .input-field {
  width: 100%;
  margin-top: 0;
}
.app-bottom-fixed .bottom-form .input-field input {
  margin-bottom: 0;
}
.app-bottom-fixed .bottom-form .inputDirect {
  display: none;
}

.check-box-all {
  padding: 10px 16px 10px;
}
.check-box-all:after {
  content: '';
  display: block;
  clear: both;
}

.radio-wrap {
  padding: 15px 0 5px;
  justify-content: flex-end;
}

.radio-box + .radio-box {
  margin-left: 25px;
}

.popup {
  width: 100%;
  z-index: 0;
}
.popup.app-section {
  padding-bottom: 0;
}
.popup:before {
  background-color: rgba(0, 0, 0, 0.55);
}

/*===================
	button
===================*/
.button {
  display: block;
  border: 0;
  color: #fff;
  padding: 6px 16px;
  border-radius: 24px;
  font-size: 1rem;
  position: relative;
  background-color: #1A365C;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.button:active {
  color: #ffffff;
  background-color: #142a48;
  transform: translateY(2px);
}

.btn-floating {
  background-color: #0043D0;
  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.3);
}
.btn-floating:active {
  background-color: #0039b1;
  box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.4);
}

.floating {
  position: fixed;
  width: 56px;
  height: 56px;
  bottom: 16px;
  right: 16px;
}
.floating.tips {
  bottom: 70px;
}

.btn-point {
  background-color: #00AFEC;
}
.btn-point:active {
  background-color: #0098cd;
}

.btn-seconday {
  background-color: #A2893D;
}
.btn-seconday:active {
  background-color: #8c7635;
}

.btn-default {
  background-color: #cccccc;
}
.btn-default:active {
  background-color: #bdbdbd;
}

.button-app h6 {
  margin-bottom: 10px;
}

.button-cancel {
  color: #ffffff;
  background-color: #595E6F;
}

.button-default {
  border: 0;
  color: #fff;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  letter-spacing: normal;
  position: relative;
  border-radius: 0.25rem;
  background-color: #73AB00;
}
.button-default i {
  margin-right: 4px;
}
.button-default:active {
  background-color: #699c00;
}

.button-default.success {
  background: #218838;
}

.button-default.warning {
  background: #e0a800;
}

.button-default.delete {
  background: #ff4d4d;
}

.button-default.danger {
  background: #c82333;
}

.button-default.dark {
  background: #333;
}

.button-default.light {
  background: #fff;
  border: 1px solid #333;
  color: #333;
}

.button-circle {
  border-radius: 30px;
}

.button-search,
.button-search-added {
  position: relative;
  height: 12.77778vw;
  padding: 0.75rem;
}
.button-search:active,
.button-search-added:active {
  color: #ffffff;
  background-color: #629200;
  transform: translateY(2px);
}
.button-search:after,
.button-search-added:after {
  content: '';
  display: block;
  width: 6.66667vw;
  height: 6.66667vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.button-search span,
.button-search-added span {
  display: none;
}

.button-search:after {
  background-image: url("../images/icons/ico_search_wh.png");
}

.button-search-added {
  background-color: #1A365C;
}
.button-search-added:active {
  background-color: #142a48;
}
.button-search-added:after {
  background-image: url("../images/icons/ico_search_added_wh.png");
}

/*===================
	bg color icon
===================*/
.bg-color-red {
  background: #F44336 !important;
}

.bg-color-indigo {
  background: #3F51B5 !important;
}

.bg-color-blue {
  background: #2196F3 !important;
}

.bg-color-purple {
  background: #9C27B0 !important;
}

.bg-color-green {
  background: #4CAF50 !important;
}

.bg-color-#00AFEC {
  background: #FF9800 !important;
}

.bg-color-yellow {
  background: #FFC107 !important;
}

.bg-color-teal {
  background: #009688 !important;
}

.bg-color-grey {
  background: #546e7a !important;
}

.bg-color-pink {
  background: #f06292 !important;
}

.bg-color-cyan {
  background: #0097a7 !important;
}

.bg-color-browen {
  background: #6d4c41 !important;
}

/*===================
	card
===================*/
.card {
  margin-top: 0;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  padding: 1.25rem 1rem;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}
.card .card-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: -1.25rem -1rem 1rem;
  padding: 0.9375rem 1rem;
}
.card .card-header:after {
  content: '';
  display: block;
  clear: both;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.24);
}
.card .card-header .icon-wrap {
  display: inline-block;
  margin-right: 8px;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  background-color: #BEC2CE;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.card .card-header .icon-wrap:active {
  background-color: #00D1FF;
}
.card .card-header .icon-wrap i:before {
  content: '';
  display: block;
  width: 20px;
  height: 23px;
  margin: 8px 9px;
}
.card .card-header .link-more {
  position: relative;
  float: right;
  display: inline-block;
  padding: 2px 4px;
  font-size: 13px;
  line-height: normal;
  letter-spacing: -0.05em;
  color: rgba(0, 0, 0, 0.7);
  border-radius: 2px;
  background-color: #f4f4f4;
}
.card .card-header .link-more:active {
  background-color: #66e3ff;
}
.card .card-header .card-title {
  margin: 0;
  line-height: 1.45;
  font-size: 0.875rem;
  font-weight: bold;
}
.card .card-header .card-title a {
  font-size: 16px;
  -webkit-transition: all 0.1s ease-in-out;
  transition: width all 0.1s ease-in-out;
}
.card .card-header .card-title a:active {
  color: #00D1FF;
}
.card .card-header .card-title span, .card .card-header .card-title a {
  vertical-align: middle;
}
.card .card-content {
  padding: 0;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all  0.1s ease-in-out;
}
.card .card-content .label-title {
  color: #333333;
}
.card .card-content [type="checkbox"] + label {
  color: #333333;
}
.card .card-content .button {
  position: relative;
  display: block;
}
.card .card-content .button.button-search {
  width: 100%;
  padding: 0;
  height: 11.11111vw;
  line-height: 11.11111vw;
  font-size: 0.875rem;
  vertical-align: middle;
  background-color: #595E6F;
}
.card .card-content .button.button-search:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 4.44444vw;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  background: url("../images/icons/ico_search_wh.png") no-repeat center;
  background-size: contain;
}

/*===================
	tab-container
===================*/
.tab-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  background-color: #F0F3F4;
  margin: 0 auto;
  white-space: nowrap;
}
.tab-container .tab {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: inline-block;
  text-align: center;
  line-height: 56px;
  height: 56px;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
}
.tab-container .tab.tab-half {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
.tab-container .tab a {
  color: #ffffff;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 4px;
  font-size: 1rem;
  letter-spacing: -0.03em;
  text-transform: capitalize;
  text-overflow: ellipsis;
  background-color: rgba(12, 13, 52, 0.4);
  overflow: hidden;
  transition: color .28s ease;
}
.tab-container .tab a.active {
  background-color: #003F98;
}
.tab-container .sub-tab-container {
  width: 100%;
  border-bottom: 1px solid #C8D1D3;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
}
.tab-container .sub-tab-container .tab {
  line-height: 50px;
  height: 50px;
}
.tab-container .sub-tab-container .tab a {
  color: #B1B1B1;
  background-color: #ffffff;
}
.tab-container .sub-tab-container .tab a.active {
  color: #ffffff;
  background-color: #00AFEC;
}

.tab-nav-fixed {
  position: fixed;
  top: 56px;
  left: 0;
  width: 100%;
  z-index: 2;
}

/*===================
	list style
===================*/
.lists {
  position: relative;
  margin: 0;
  padding: 0;
  padding-top: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #EDEEF2;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.lists:first-of-type {
  padding-top: 0;
}
.lists:last-of-type {
  padding-bottom: 0;
  border-bottom: 0 none;
}
.lists li {
  line-height: 1.75rem;
}
.lists li a {
  display: block;
}
.lists li span {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 0.75rem;
}
.lists li span.list-title {
  position: relative;
  display: inline-block;
  padding-left: 0.4375rem;
  min-width: 26.66667vw;
  letter-spacing: -0.05em;
}
.lists li span.list-title:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 3px;
  background-color: #657891;
}
.lists li span.list-title + span {
  display: inline-block;
  padding-left: 1.5rem;
}
.lists li span.list-title + span:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: rgba(0, 0, 0, 0.16);
}
.lists li.li-checkbox {
  position: absolute;
  top: 1rem;
  right: 0;
}

.lists .btn-del {
  display: block;
  position: absolute;
  top: 50%;
  right: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 1.5rem;
  background: url("../images/icons/ico_del_dark.png") no-repeat center;
  background-size: cover;
  transform: translateY(-50%);
}

.lists:first-of-type li.li-checkbox {
  top: 0;
}

.list-underline {
  margin: 0;
}
.list-underline li {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: no-wrap;
  flex-wrap: no-wrap;
  position: relative;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(112, 112, 112, 0.14);
  font-size: 0.875rem;
}
.list-underline li:first-of-type {
  border-top: 0 none;
}
.list-underline li.w-50:last-of-type + li {
  clear: both;
}
.list-underline li:after {
  content: '';
  display: block;
  clear: both;
}

.list-dots li {
  position: relative;
  padding-left: 15px;
  word-break: keep-all;
}
.list-dots li:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  border: 1px solid #707070;
  transform: translateY(-50%);
}

/*===================
	icons
===================*/
.icon {
  position: relative;
  display: block;
  text-align: center;
}
.icon:before {
  content: "";
  width: 6.666667vw;
  height: 6.666667vw;
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.icon.icn-home:before {
  background-image: url("../images/icons/ico_home.png");
}
.icon.icn-ic_person_outline:before {
  background-image: url(../images/icons/ico_person.png);
}
.icon.icn-history-back:before {
  background-image: url(../images/icons/ic_arrow_back.png);
}
.icon.icn-bugger-menu:before {
  background-image: url(../images/icons/ico_burger_menu.png);
}
.icon.icn-member:before {
  background-image: url(../images/icons/ico_member.png);
}
.icon.icn-arrow-dropdown:before {
  background-image: url(../images/icons/ico_arrow_dropdown.png);
}
.icon.icn-guide:before {
  background-image: url(../images/icn_guide.png);
}
.icon.icn-contacts:before {
  background-image: url(../images/icn_contacts.png);
}
.icon.icn-home-dark:before {
  background-image: url(../images/icn_home_dark.png);
}
.icon.icn-profile:before {
  width: 19px;
  height: 17px;
  background-image: url(../images/icn_profile.png);
}
.icon.icn-lock-dark:before {
  background: url(../images/icn_lock_dark.png) center no-repeat;
  background-size: contain;
}
.icon.icn-point-pin:before {
  height: 23px;
  background: url(../images/icn-point-pin.png) center no-repeat;
  background-size: contain;
}
.icon.icn-close:before {
  width: 1rem;
  height: 1rem;
  background: url(../images/icn_close.png) center no-repeat;
  background-size: contain;
}
.icon.icn-search:before {
  width: 21px;
  height: 56px;
  line-height: 56px;
  background: url(../images/icn_search.png) center no-repeat;
  background-size: contain;
}
.icon.icn-upload {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  border: 2px solid #ffffff;
  border-radius: 100%;
  background-color: rgba(200, 209, 211, 0.5);
}
.icon.icn-upload:before {
  margin: 0 auto;
  width: 18px;
  height: 18px;
  background: url(../images/icn_plus.png) center no-repeat;
  background-size: contain;
}
.icon.icn-calendar:before {
  width: 1.5rem;
  height: 1.5rem;
  background: url("../images/icons//ico_calendar_dark.png") center no-repeat;
  background-size: contain;
}

/*===================
	form custom
===================*/
form input[type="text"],
.form-group input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="tel"],
form input[type="number"],
form input[type="time"],
form input[type="date"],
form .select-wrapper input.select-dropdown,
textarea {
  display: block;
  border: 1px solid #D7E1EA;
  background-color: #ffffff;
  height: 12.77778vw;
  width: 100%;
  overflow: visible;
  box-sizing: border-box;
  border-radius: 1.11111vw;
  padding-left: 3.33333vw;
  padding-right: 3.33333vw;
  font-size: 1 rem;
  letter-spacing: -0.05rem;
  margin-bottom: 4.44444vw;
}

.file-field .btn {
  float: left;
  height: 12.77778vw;
  line-height: 12.77778vw;
}

.file-field .btn > span {
  display: block;
  height: 10.55556vw;
  line-height: 10.55556vw;
}

.file-path-wrapper .file-path {
  line-height: 12.77778vw;
}

textarea {
  padding: 3.33333vw;
  height: auto;
  min-height: 4.5rem;
  max-height: none;
}

form input[type="text"]:not(.select-dropdown)[readonly]:not([focus]),
form textarea:not(.select-dropdown)[readonly]:not([focus])  {
  background-color: #CBD3DB;
  border-color: #CBD3DB;
  font-weight: 400;
}

form input:not([type]):focus:not([readonly]),
form input[type="text"]:focus:not([readonly]),
form input[type="email"]:focus:not([readonly]),
form input[type="password"]:focus:not([readonly]),
form input[type="tel"]:focus:not([readonly]),
form input[type="number"]:focus:not([readonly]),
form input[type="date"]:focus:not([readonly]) {
  border-color: #00AFEC;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

form input:not([type]):disabled:not([readonly]),
form input[type="text"]:disabled:not([readonly]),
form input[type="email"]:disabled:not([readonly]),
form input[type="password"]:disabled:not([readonly]),
form input[type="tel"]:disabled:not([readonly]),
form input[type="number"]:disabled:not([readonly]),
form input[type="date"]:disabled:not([readonly]) {
  box-shadow: none;
  background-color: #ffffff;
}

.input-field + .help,
input:not([type]) + .help,
input[type=text] + .help,
input[type=password] + .help,
input[type=email] + .help,
input[type=url] + .help,
input[type=time] + .help,
input[type=date] + .help,
input[type=datetime] + .help,
input[type=datetime-local] + .help,
input[type=tel] + .help,
input[type=number] + .help,
input[type=search] + .help,
textarea.materialize-textarea + .help,
.input-group + .help {
  margin-top: 2.22222vw;
}

.input-field {
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.input-field + .checkbox-gruop,
.input-field + .radio-gruop {
  margin-left: 2.22222vw;
}
.input-field input:not([type]),
.input-field input[type="text"],
.input-field input[type="url"],
.input-field input[type="email"],
.input-field input[type="password"],
.input-field input[type="tel"],
.input-field input[type="number"],
.input-field input[type="date"],
.input-field input[type="datetime"],
.input-field input[type="datetime-local"],
.input-field input[type="time"],
.input-field input[type="tel"],
.input-field input[type="number"],
.input-field input[type="search"],
.input-field textarea.materialize-textarea {
  margin-bottom: 0;
}
.input-field input:not([type]):focus:not([readonly]) + label,
.input-field input[type="text"]:focus:not([readonly]) + label,
.input-field input[type="url"]:focus:not([readonly]) + label,
.input-field input[type="email"]:focus:not([readonly]) + label,
.input-field input[type="password"]:focus:not([readonly]) + label,
.input-field input[type="tel"]:focus:not([readonly]) + label,
.input-field input[type="number"]:focus:not([readonly]) + label,
.input-field input[type="date"]:focus:not([readonly]) + label,
.input-field input[type="datetime"]:focus:not([readonly]) + label,
.input-field input[type="datetime-local"]:focus:not([readonly]) + label,
.input-field input[type="time"]:focus:not([readonly]) + label,
.input-field input[type="tel"]:focus:not([readonly]) + label,
.input-field input[type="number"]:focus:not([readonly]) + label,
.input-field input[type="search"]:focus:not([readonly]) + label,
.input-field textarea.materialize-textarea:focus:not([readonly]) + label {
  width: auto;
}
.input-field input:not([type]):focus:not([readonly]) + label:not(.label-title),
.input-field input[type="text"]:focus:not([readonly]) + label:not(.label-title),
.input-field input[type="url"]:focus:not([readonly]) + label:not(.label-title),
.input-field input[type="email"]:focus:not([readonly]) + label:not(.label-title),
.input-field input[type="password"]:focus:not([readonly]) + label:not(.label-title),
.input-field input[type="tel"]:focus:not([readonly]) + label:not(.label-title),
.input-field input[type="number"]:focus:not([readonly]) + label:not(.label-title),
.input-field input[type="date"]:focus:not([readonly]) + label:not(.label-title),
.input-field input[type="datetime"]:focus:not([readonly]) + label:not(.label-title),
.input-field input[type="datetime-local"]:focus:not([readonly]) + label:not(.label-title),
.input-field input[type="time"]:focus:not([readonly]) + label:not(.label-title),
.input-field input[type="tel"]:focus:not([readonly]) + label:not(.label-title),
.input-field input[type="number"]:focus:not([readonly]) + label:not(.label-title),
.input-field input[type="search"]:focus:not([readonly]) + label:not(.label-title),
.input-field textarea.materialize-textarea:focus:not([readonly]) + label:not(.label-title) {
  padding: 0.27778vw;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75rem;
  transform: translateY(-115%);
  box-shadow: none;
}
.input-field input:not([type]):focus:not([readonly]) + label.label-date:before,
.input-field input[type="text"]:focus:not([readonly]) + label.label-date:before,
.input-field input[type="url"]:focus:not([readonly]) + label.label-date:before,
.input-field input[type="email"]:focus:not([readonly]) + label.label-date:before,
.input-field input[type="password"]:focus:not([readonly]) + label.label-date:before,
.input-field input[type="tel"]:focus:not([readonly]) + label.label-date:before,
.input-field input[type="number"]:focus:not([readonly]) + label.label-date:before,
.input-field input[type="date"]:focus:not([readonly]) + label.label-date:before,
.input-field input[type="datetime"]:focus:not([readonly]) + label.label-date:before,
.input-field input[type="datetime-local"]:focus:not([readonly]) + label.label-date:before,
.input-field input[type="time"]:focus:not([readonly]) + label.label-date:before,
.input-field input[type="tel"]:focus:not([readonly]) + label.label-date:before,
.input-field input[type="number"]:focus:not([readonly]) + label.label-date:before,
.input-field input[type="search"]:focus:not([readonly]) + label.label-date:before,
.input-field textarea.materialize-textarea:focus:not([readonly]) + label.label-date:before {
  transition: none;
}
.input-field label {
  width: auto;
}
.input-field label:not(.label-title) {
  padding: 0.27778vw;
  font-size: 0.6875rem;
  transform: translateY(-115%);
  background-color: #ffffff;
}
.input-field label.label-date:before {
  top: 50%;
  bottom: auto;
  right: 0.75rem;
  transform: translateY(-50%);
}

.form-group-title {
  margin-top: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: bold;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.form-group {
  position: relative;
  margin-bottom: 1rem;
}
.form-group input:not([type]),
.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="datetime"],
.form-group input[type="datetime-local"],
.form-group input[type="time"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="search"],
.form-group textarea.materialize-textarea,
.form-group textarea,
.form-group .select-wrapper input.select-dropdown {
  margin-bottom: 0;
}
.form-group:last-of-type {
  margin-bottom: 0;
}
.form-group label {
  display: block;
}
.form-group .button-today {
  position: absolute;
  bottom: 50%;
  right: 3.75rem;
  transform: translateY(25px);
  border: 0;
  padding: 0.125rem 0.3125rem;
  color: #ffffff;
  font-size: 0.75rem;
  border-radius: 0.125rem;
  background-color: #73AB00;
  text-transform: capitalize;
}
.form-group .unit {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(50%);
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

.form-group button.icon,
.input-field button.icon {
  border: 0 none;
  background-color: transparent;
  padding: 0 0.75rem;
  margin: 0;
  height: 12.77778vw;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.form-group button.icon span,
.input-field button.icon span {
  display: none;
}

.d-flex .input-field + .input-field {
  margin-left: 2.22222vw;
}
.d-flex .form-group,
.d-flex .checkbox-group,
.d-flex .radio-group {
  align-self: center;
}
.d-flex .form-group + .form-group,
.d-flex .form-group + .checkbox-group,
.d-flex .form-group + .radio-group,
.d-flex .checkbox-group + .form-group,
.d-flex .checkbox-group + .checkbox-group,
.d-flex .checkbox-group + .radio-group,
.d-flex .radio-group + .form-group,
.d-flex .radio-group + .checkbox-group,
.d-flex .radio-group + .radio-group {
  margin-left: 2.22222vw;
}
.d-flex .form-group:last-of-type {
  margin-bottom: 1rem;
}

.label-title {
  margin-bottom: 2.22222vw;
  font-size: 0.75rem;
  color: #ffffff;
}

.label-date {
  position: relative;
  display: block;
  width: 100%;
}
.label-date:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  right: 0.75rem;
  transform: translateY(11.66667vw);
  width: 6.66667vw;
  height: 6.66667vw;
  background: url("../images/icons/ico_calendar_dark.png") no-repeat center;
  background-size: contain;
}

.help {
  position: relative;
  padding-left: 3.88889vw;
  font-size: 0.6875rem;
  color: #ffffff;
}
.help:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3.33333vw;
  height: 3.33333vw;
  background: url("../images/icons/ico_caution_wh.png") no-repeat center;
  background-size: contain;
}

/*===================
	input group
===================*/
.input-group {
  position: relative;
  display: flex;
}
.input-group input[type=text] {
  margin-bottom: 0;
}
.input-group input[type=text]:not(:last-of-type) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group input[type=text] + input[type=text] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group input[type=text] + .btn-del {
  display: block;
  position: absolute;
  top: 50%;
  right: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 1.5rem;
  background: url("../images/icons/ico_del_dark.png") no-repeat center;
  background-size: contain;
  transform: translateY(-50%);
}
.input-group input[type=text] + .btn-del span {
  display: none;
}

.unit {
  display: inline-block;
  width: 40px;
  line-height: 46px;
}

form textarea {
  border: none;
  border-bottom: 1px solid #bbb;
  width: 100%;
  overflow: visible;
  box-sizing: border-box;
  height: auto;
  margin-bottom: 20px;
  outline: none;
}

form textarea:focus {
  border-bottom: 1px solid #00AFEC;
}

form textarea:focus + label {
  color: #00AFEC;
}

form .picker__weekday-display {
  background-color: #00AFEC;
}

form .picker__nav--prev:hover, .picker__nav--next:hover {
  background: #00AFEC;
}

form .picker__date-display {
  background-color: #00AFEC;
}

form .picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected {
  background-color: #00AFEC;
}

form .picker__day.picker__day--today {
  color: #00AFEC;
}

form .picker__close, .picker__today,
form .picker__close, .picker__today {
  color: #00AFEC;
}

form .picker__select--month.browser-default {
  width: 26%;
}

.dropdown-content li > a,
.dropdown-content li > span {
  color: #333;
}

.form-material form {
  margin-bottom: 30px;
}
.form-material h3 {
  font-size: 18px;
  color: #f63443;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  margin-bottom: 20px;
}
.form-material .btn {
  background: #f63443;
  height: 2rem;
  line-height: 2rem;
  top: 8px;
  position: relative;
}

.form h3 {
  font-size: 18px;
  color: #f63443;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  margin-bottom: 20px;
}
.form h5 {
  margin-bottom: 10px;
}
.form input {
  border: 1px solid #bbb;
  padding: 0 10px;
}
.form input:focus {
  border-color: #f63443;
}
.form textarea {
  border: 1px solid #bbb;
  padding: 10px 10px;
}
.form textarea:focus {
  border-color: #f63443;
}
.form select.browser-default {
  border: 1px solid #aaa;
}
.form .btn {
  background: #f63443;
  height: 2.6rem;
  line-height: 2.6rem;
  position: relative;
}

.select-wrapper span.caret {
  right: 15px;
  z-index: 1;
}
.select-wrapper input.select-dropdown {
  border: 1px solid #bbb;
  padding: 10px;
}

.dropdown-content li {
  color: rgba(0, 0, 0, 0.87);
  min-height: 2.25rem;
}
.dropdown-content li > a,
.dropdown-content li > span {
  font-size: 0.9375rem;
  color: #333333;
  display: block;
  line-height: 1rem;
  padding: 0.75rem 1rem;
}

/*===================
	radio,checkbox custom
===================*/
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  padding-left: 30px;
}

[type="checkbox"] + label {
  padding-left: 22px;
  height: 16px;
  line-height: 16px;
  font-size: 0.875rem;
  color: #ffffff;
}

[type="checkbox"].filled-in:not(:checked) + label:after {
  height: 16px;
  width: 16px;
  background-color: #ffffff;
  border: 2px solid #C8D1D3;
}

[type="checkbox"].filled-in:checked + label:before {
  width: 7px;
  height: 10px;
}

[type="checkbox"].filled-in:checked + label:after {
  width: 16px;
  height: 16px;
  border: 2px solid #6DD402;
  background-color: #6DD402;
}

[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  color: #ffffff;
  font-size: 0.875rem;
}

[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
  border: 2px solid #6DD402;
}

[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:after {
  background-color: #6DD402;
}

[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after {
  border: 2px solid #C8D1D3;
}

/*===================
	select custom
===================*/
.select-wrapper span.caret {
  right: 15px;
}

/*===================
	switch custom
===================*/
.switch label .lever {
  width: 40px;
  height: 22px;
  background-color: #C8D1D3;
  border-radius: 22px;
}
.switch label .lever:after {
  background-color: #ffffff;
  left: -5px;
  top: 0;
}

.switch label input[type=checkbox]:checked + .lever {
  background-color: #6DD402;
}
.switch label input[type=checkbox]:checked + .lever:after {
  background-color: #ffffff;
  left: 24px;
}

/*===================
	placeholder color
===================*/
::-webkit-input-placeholder {
  color: #666;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #666;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #666;
}

:-ms-input-placeholder {
  color: #666;
}

.search-field {
  align-items: stretch;
}
.search-field,
.search-field .row {
  margin-bottom: 0;
}
.search-field label {
  color: #ffffff;
  display: block;
  height: 12.77778vw;
  line-height: 12.77778vw;
}
.search-field .button-search,
.search-field .button-search-added {
  position: relative;
  height: 12.77778vw;
  padding: 0.75rem;
}
.search-field .button-search:active,
.search-field .button-search-added:active {
  color: #ffffff;
  background-color: #629200;
  transform: translateY(2px);
}
.search-field .button-search:after,
.search-field .button-search-added:after {
  content: '';
  display: block;
  width: 6.66667vw;
  height: 6.66667vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.search-field .button-search span,
.search-field .button-search-added span {
  display: none;
}
.search-field .button-search:after {
  background-image: url("../images/icons/ico_search_wh.png");
}
.search-field .button-search-added {
  background-color: #1A365C;
}
.search-field .button-search-added:active {
  background-color: #142a48;
}
.search-field .button-search-added:after {
  background-image: url("../images/icons/ico_search_added_wh.png");
}

.search-result-wrap {
  overflow: hidden;
  overflow-y: auto;
}
.search-result-wrap.half {
  height: 30vh;
}

/*===================
	card
===================*/
.sub-calendar .entry {
  padding-bottom: 0;
  background-color: transparent;
}

.calendar-box {
  margin-top: 4.44444vw;
  padding: 6.66667vw;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}
.calendar-box .calendar-title {
  position: relative;
  margin-bottom: 6.66667vw;
}
.calendar-box .calendar-title .title {
  font-size: 0.875rem;
  text-align: center;
}
.calendar-box .calendar-title .button {
  position: absolute;
  top: 50%;
  padding: 4.44444vw;
  width: 4.44444vw;
  height: 4.44444vw;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  background-color: transparent;
}
.calendar-box .calendar-title .button span {
  display: none;
}
.calendar-box .calendar-title .button.button-pre {
  left: 0;
  background-image: url("../images/icons/ico_arrow_left.png");
}
.calendar-box .calendar-title .button.button-next {
  right: 0;
  background-image: url("../images/icons/ico_arrow_right.png");
}
.calendar-box .calendar {
  -webkit-transition: all 0.1s ease-in-out;
  transition: all  0.1s ease-in-out;
}
.calendar-box .calendar thead {
  border-bottom: 0 none;
}
.calendar-box .calendar thead th {
  color: #77838F;
  font-size: 0.6875rem;
  text-align: center;
}
.calendar-box .calendar tbody td {
  position: relative;
  color: #1E2022;
  font-size: 0.75rem;
  text-align: center;
  z-index: 2;
}
.calendar-box .calendar tbody td:before {
  content: '';
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72%;
  height: 72%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background-color: #BFC2CB;
  z-index: -1;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all  0.1s ease-in-out;
}
.calendar-box .calendar tbody td:hover:before {
  display: block;
}
.calendar-box .calendar tbody td.active {
  color: #ffffff;
}
.calendar-box .calendar tbody td.active:before {
  display: block;
  background-color: #FF8C00;
}
.calendar-box .calendar .do {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}
.calendar-box .calendar .do span {
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 0.25rem;
}
.calendar-box .calendar .do span.do01 {
  background-color: #FF8C00;
}
.calendar-box .calendar .do span.do02 {
  background-color: #E44C4C;
}
.calendar-box .calendar .do span.do03 {
  background-color: #3569B8;
}

.calendar-detail-box {
  margin-bottom: 0.5rem;
}
.calendar-detail-box .row {
  margin-bottom: -0.3125rem;
}
.calendar-detail-box p {
  margin: 0;
}
.calendar-detail-box .day p {
  text-align: center;
}
.calendar-detail-box .day .date {
  font-size: 1.25rem;
  font-weight: bold;
  color: #FF8C00;
}
.calendar-detail-box .day .week {
  font-size: 0.6875rem;
  color: rgba(0, 0, 0, 0.87);
}
.calendar-detail-box .detail {
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.75rem;
}
.calendar-detail-box .detail .title {
  margin-bottom: 0.25rem;
  color: rgba(0, 0, 0, 0.87);
  font-size: 0.875rem;
  font-weight: bold;
}
.calendar-detail-box .detail .bec span:first-of-type {
  position: relative;
  display: inline-block;
  padding-right: 0.5rem;
}
.calendar-detail-box .detail .bec span:first-of-type:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.15);
}

/*===================
	login 
===================*/
.logo-container {
  margin: 0 auto;
}
.logo-container img {
  width: 100%;
  max-width: 100%;
}

.login_register {
  width: 100%;
  height: 100vh;
  vertical-align: top;
  padding: 0;
  background-color: #3777CA;
}
.login_register:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: url(../images/bg.png) top center no-repeat;
  background-size: 100%;
}
.login_register .container {
  margin: 0 auto;
  padding: 0 6.666667vw;
  width: 100%;
  max-width: 992px;
}
.login_register .entry {
  width: 100%;
}
.login_register .entry .head {
  width: 100%;
  z-index: 1;
}
.login_register .entry .head h1 {
  margin: 0 auto;
  padding-top: 23.888889vw;
  padding-bottom: 20.56vw;
  width: 60vw;
  text-align: center;
}
.login_register .entry .head h1 img {
  margin: 0 auto;
}
.login_register form .input-field {
  margin-left: 0;
}
.login_register form .input-field:first-child {
  margin-top: 0;
}
.login_register form .input-field label {
  top: 50%;
  left: 13.33vw;
  color: #333333;
  font-size: 0.875rem;
  line-height: 1.2;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: auto;
  opacity: 1;
}

.login_register form .input-field label.active {
  color: #657891;
  font-size: 0.75rem;
}
.login_register form .input-field:before {
  content: "";
  width: 6.66vw;
  height: 6.66vw;
  display: block;
  position: absolute;
  top: 50%;
  left: 4.44vw;
  z-index: 0;
  transform: translateY(-50%);
}
.login_register form .input-field:first-of-type:before {
  background: url(../images/icons/ico_person.png) left center no-repeat;
  background-size: cover;
}
.login_register form .input-field:nth-of-type(2):before {
  background: url(../images/icons/ico_password.png) left center no-repeat;
  background-size: contain;
}
.login_register form .input-field:nth-of-type(3):before {
  background: url(../images/icons/ico_password.png) left center no-repeat;
  background-size: contain;
}

.login_register form input[type="text"],
.login_register form input[type="password"] {
  margin-bottom: 0;
  padding-left: 32.222222vw;
  border-bottom: 0 none;
  height: 17.777778vw;
  line-height: 17.777778vw;
  color: #333333;
  border-radius: 17.777778vw;
  background-color: white;
  box-shadow: none;
}
.login_register form input[type="text"] .active,
.login_register form input[type="password"] .active {
  border-color: #ffffff;
}
.login_register form input[type="text"]:focus:not([readonly]),
.login_register form input[type="password"]:focus:not([readonly]) {
  border-color: #ffffff;
}
.login_register form input[type="text"]:focus:not([readonly]) + label,
.login_register form input[type="password"]:focus:not([readonly]) + label {
  color: #657891;
  font-size: 0.75rem;
}
.login_register form > .button {
  padding: 0;
  width: 100%;
  height: 16.666666vw;
  line-height: 16.666666vw;
  border-radius: 16.666666vw;
  display: block;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  color: #003F98;
  background-color: #ffffff;
}
.login_register form .checkbox-field-box {
  justify-content: space-between;
  margin-top: 6.666666vw;
}
.login_register form .checkbox-field-box .checkbox-field:first-child {
  padding-left: 10px;
}
.login_register form .checkbox-field-box .checkbox-field:last-child {
  padding-right: 10px;
}
.login_register form .checkbox-field-box [type="checkbox"].filled-in:not(:checked) + label:after {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.38);
}
.login_register form .checkbox-field-box [type="checkbox"].filled-in:checked + label:after {
  border: 2px solid #73AB00;
  background-color: #73AB00;
}
.login_register form .checkbox-field-box [type="checkbox"].filled-in + label:before, .login_register form .checkbox-field-box [type="checkbox"].filled-in + label:after {
  transition: border .25s, background-color .2s, width .15s .1s, height .15s .1s, top .20s .1s, left .20s .1s;
}
.login_register form .checkbox-field-box label {
  color: #ffffff;
  font-size: 0.75rem;
}

/*===================
	main home
===================*/
.main {
  padding-bottom: 0;
}
.main .app-title {
  position: relative;
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
  min-height: 13.88889vw;
  vertical-align: bottom;
}
.main .app-title h2 {
  padding-top: 1.94444vw;
}
.main .app-title .profile-wrap {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
}
.main .app-title .profile-wrap .profile {
  position: relative;
  display: block;
  width: 13.88889vw;
  height: 13.88889vw;
  border-radius: 100%;
  background-color: #ffffff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
}
.main .app-title .profile-wrap .profile:hover {
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.22);
}
.main .app-title .profile-wrap .profile:active, .main .app-title .profile-wrap .profile:focus {
  background-color: #e1e2e6;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.26);
}
.main .app-title .profile-wrap .profile .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main .entry {
  padding-top: 0;
  background-color: transparent;
}

.go-link-container {
  position: relative;
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
}
.go-link-container > div,
.go-link-container > a {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: calc(50% - 6px);
  height: calc((100vh - 225px) / 4);
  color: #333333;
  font-size: 1 rem;
  text-align: center;
  letter-spacing: -0.01rem;
  border-radius: 0.625rem;
  background-color: #F0F5FD;
  /*attend status*/
}
.go-link-container > div + div,
.go-link-container > div + a,
.go-link-container > a + div,
.go-link-container > a + a {
  margin-top: 3.33333vw;
}
.go-link-container > div + div:nth-child(2n),
.go-link-container > div + a:nth-child(2n),
.go-link-container > a + div:nth-child(2n),
.go-link-container > a + a:nth-child(2n) {
  margin-left: 0.75rem;
}
.go-link-container > div + div:nth-child(2),
.go-link-container > div + a:nth-child(2),
.go-link-container > a + div:nth-child(2),
.go-link-container > a + a:nth-child(2) {
  margin-top: 0;
}
.go-link-container > div:before,
.go-link-container > a:before {
  content: '';
  display: block;
  margin-bottom: 3.125vh;
  width: 8.88889vw;
  height: 8.88889vw;
  background-color: #9A9AB1;
  border-radius: 0.25rem;
}
.go-link-container > div .text,
.go-link-container > a .text {
  display: block;
}
.go-link-container > div .text:before,
.go-link-container > a .text:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -5.55556vw;
  width: 6.66667vw;
  height: 6.66667vw;
  background-size: contain;
  background-position: center;
}
.go-link-container > div.go-attend span:before,
.go-link-container > a.go-attend span:before {
  background-image: url(../images/icons/ico_attend_wh.png);
}
.go-link-container > div.go-calendar span:before,
.go-link-container > a.go-calendar span:before {
  background-image: url(../images/icons/ico_calendar_wh.png);
}
.go-link-container > div.go-attendapp span:before,
.go-link-container > a.go-attendapp span:before {
  background-image: url(../images/icons/ico_attendapp_wh.png);
}
.go-link-container > div.go-flworkapp span:before,
.go-link-container > a.go-flworkapp span:before {
  background-image: url(../images/icons/ico_flworkapp_wh.png);
}
.go-link-container > div.go-msalary span:before,
.go-link-container > a.go-msalary span:before {
  background-image: url(../images/icons/ico_msalary_wh.png);
}
.go-link-container > div.go-otsworkapp span:before,
.go-link-container > a.go-otsworkapp span:before {
  background-image: url(../images/icons/ico_otsworkapp_wh.png);
}
.go-link-container > div.go-condo span:before,
.go-link-container > a.go-condo span:before {
  background-image: url(../images/icons/ico_condo_wh.png);
}
.go-link-container > div.go-docth span:before,
.go-link-container > a.go-docth span:before {
  background-image: url(../images/icons/ico_docth_wh.png);
}
.go-link-container > div.go-vacation,
.go-link-container > a.go-vacation {
  background-color: #73AB00;
}
.go-link-container > div.go-vacation span:before,
.go-link-container > a.go-vacation span:before {
  background-image: url(../images/icons/ico_vacation_wh.png);
}
.go-link-container > div.go-reflash,
.go-link-container > a.go-reflash {
  background-color: #595E6F;
}
.go-link-container > div.go-reflash span:before,
.go-link-container > a.go-reflash span:before {
  background-image: url(../images/icons/ico_reflash_wh.png);
}
.go-link-container > div.go-prize,
.go-link-container > a.go-prize {
  background-color: #FF8C00;
}
.go-link-container > div.go-prize span:before,
.go-link-container > a.go-prize span:before {
  background-image: url(../images/icons/ico_prize_wh.png);
}
.go-link-container > div.go-reward,
.go-link-container > a.go-reward {
  background-color: #733EA1;
}
.go-link-container > div.go-reward span:before,
.go-link-container > a.go-reward span:before {
  background-image: url(../images/icons/ico_reward_wh.png);
}
.go-link-container > div.go-link.active, .go-link-container > div.go-link:active, .go-link-container > div.go-link:hover,
.go-link-container > a.go-link.active,
.go-link-container > a.go-link:active,
.go-link-container > a.go-link:hover {
  font-weight: bold;
  color: #ffffff;
  background-color: #73AB00;
}
.go-link-container > div.go-link.active:before, .go-link-container > div.go-link:active:before, .go-link-container > div.go-link:hover:before,
.go-link-container > a.go-link.active:before,
.go-link-container > a.go-link:active:before,
.go-link-container > a.go-link:hover:before {
  background-color: #ffffff;
}
.go-link-container > div.active, .go-link-container > div:active, .go-link-container > div:hover,
.go-link-container > a.active,
.go-link-container > a:active,
.go-link-container > a:hover {
  font-weight: bold;
  color: #ffffff;
  background-color: #73AB00;
}
.go-link-container > div.active:before, .go-link-container > div:active:before, .go-link-container > div:hover:before,
.go-link-container > a.active:before,
.go-link-container > a:active:before,
.go-link-container > a:hover:before {
  background-color: #ffffff;
}
.go-link-container > div.active.go-attend span:before, .go-link-container > div:active.go-attend span:before, .go-link-container > div:hover.go-attend span:before,
.go-link-container > a.active.go-attend span:before,
.go-link-container > a:active.go-attend span:before,
.go-link-container > a:hover.go-attend span:before {
  background-image: url(../images/icons/ico_attend_active.png);
}
.go-link-container > div.active.go-calendar span:before, .go-link-container > div:active.go-calendar span:before, .go-link-container > div:hover.go-calendar span:before,
.go-link-container > a.active.go-calendar span:before,
.go-link-container > a:active.go-calendar span:before,
.go-link-container > a:hover.go-calendar span:before {
  background-image: url(../images/icons/ico_calendar_active.png);
}
.go-link-container > div.active.go-attendapp span:before, .go-link-container > div:active.go-attendapp span:before, .go-link-container > div:hover.go-attendapp span:before,
.go-link-container > a.active.go-attendapp span:before,
.go-link-container > a:active.go-attendapp span:before,
.go-link-container > a:hover.go-attendapp span:before {
  background-image: url(../images/icons/ico_attendapp_active.png);
}
.go-link-container > div.active.go-flworkapp span:before, .go-link-container > div:active.go-flworkapp span:before, .go-link-container > div:hover.go-flworkapp span:before,
.go-link-container > a.active.go-flworkapp span:before,
.go-link-container > a:active.go-flworkapp span:before,
.go-link-container > a:hover.go-flworkapp span:before {
  background-image: url(../images/icons/ico_flworkapp_active.png);
}
.go-link-container > div.active.go-msalary span:before, .go-link-container > div:active.go-msalary span:before, .go-link-container > div:hover.go-msalary span:before,
.go-link-container > a.active.go-msalary span:before,
.go-link-container > a:active.go-msalary span:before,
.go-link-container > a:hover.go-msalary span:before {
  background-image: url(../images/icons/ico_msalary_active.png);
}
.go-link-container > div.active.go-otsworkapp span:before, .go-link-container > div:active.go-otsworkapp span:before, .go-link-container > div:hover.go-otsworkapp span:before,
.go-link-container > a.active.go-otsworkapp span:before,
.go-link-container > a:active.go-otsworkapp span:before,
.go-link-container > a:hover.go-otsworkapp span:before {
  background-image: url(../images/icons/ico_otsworkapp_active.png);
}
.go-link-container > div.active.go-condo span:before, .go-link-container > div:active.go-condo span:before, .go-link-container > div:hover.go-condo span:before,
.go-link-container > a.active.go-condo span:before,
.go-link-container > a:active.go-condo span:before,
.go-link-container > a:hover.go-condo span:before {
  background-image: url(../images/icons/ico_condo_active.png);
}
.go-link-container > div.active.go-docth span:before, .go-link-container > div:active.go-docth span:before, .go-link-container > div:hover.go-docth span:before,
.go-link-container > a.active.go-docth span:before,
.go-link-container > a:active.go-docth span:before,
.go-link-container > a:hover.go-docth span:before {
  background-image: url(../images/icons/ico_docth_active.png);
}

/*===================
	attend
===================*/
.sub-attend {
  padding-bottom: 0;
}
.sub-attend .app-title {
  padding-top: 1.25rem;
}
.sub-attend .entry {
  padding-top: 16.66667vw;
  padding-bottom: 0;
  background-color: transparent;
}

.attend-status {
  position: relative;
  display: flex;
  flex-flow: wrap;
  align-items: flex-start;
  justify-content: center;
}
.attend-status > div,
.attend-status > a {
  position: relative;
  align-self: flex-start;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 1rem;
  width: calc(50% - 0.625rem);
  height: 40vw;
  color: #ffffff;
  font-size: 0.875rem;
  text-align: center;
  letter-spacing: -0.01rem;
  border-radius: 0.625rem;
  background-color: #F0F5FD;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.36);
  /*attend status*/
}
.attend-status > div:before,
.attend-status > a:before {
  display: none;
}
.attend-status > div + div,
.attend-status > div + a,
.attend-status > a + div,
.attend-status > a + a {
  margin-bottom: 1.25rem;
}
.attend-status > div + div:nth-child(2n),
.attend-status > div + a:nth-child(2n),
.attend-status > a + div:nth-child(2n),
.attend-status > a + a:nth-child(2n) {
  margin-left: 1.25rem;
}
.attend-status > div + div:nth-child(2), .attend-status > div + div:nth-child(4),
.attend-status > div + a:nth-child(2),
.attend-status > div + a:nth-child(4),
.attend-status > a + div:nth-child(2),
.attend-status > a + div:nth-child(4),
.attend-status > a + a:nth-child(2),
.attend-status > a + a:nth-child(4) {
  top: 0.625rem;
}
.attend-status > div span.text,
.attend-status > a span.text {
  display: block;
  width: 100%;
  text-align: left;
}
.attend-status > div span.text:before,
.attend-status > a span.text:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 0;
  width: 13.33333vw;
  height: 13.33333vw;
  transform: none;
  background-size: contain;
  background-position: center;
}
.attend-status > div span:nth-child(2),
.attend-status > a span:nth-child(2) {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20vw;
  height: 20vw;
  line-height: 20vw;
  margin-top: 1rem;
  font-size: 1.875rem;
  font-weight: bold;
  border-radius: 20vw;
  background-color: rgba(255, 255, 255, 0.24);
}
.attend-status > div span:last-of-type,
.attend-status > a span:last-of-type {
  width: 100%;
  text-align: right;
  align-self: end;
  font-weight: 400;
}
.attend-status > div.go-vacation,
.attend-status > a.go-vacation {
  background-color: #73AB00;
}
.attend-status > div.go-vacation span:before,
.attend-status > a.go-vacation span:before {
  background-image: url(../images/icons/ico_vacation_wh.png);
}
.attend-status > div.go-reflash,
.attend-status > a.go-reflash {
  background-color: #595E6F;
}
.attend-status > div.go-reflash span:before,
.attend-status > a.go-reflash span:before {
  background-image: url(../images/icons/ico_reflash_wh.png);
}
.attend-status > div.go-prize,
.attend-status > a.go-prize {
  background-color: #FF8C00;
}
.attend-status > div.go-prize span:before,
.attend-status > a.go-prize span:before {
  background-image: url(../images/icons/ico_prize_wh.png);
}
.attend-status > div.go-reward,
.attend-status > a.go-reward {
  background-color: #733EA1;
}
.attend-status > div.go-reward span:before,
.attend-status > a.go-reward span:before {
  background-image: url(../images/icons/ico_reward_wh.png);
}

.remain-days {
  margin-bottom: 4.44444vw;
}
.remain-days ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.remain-days ul li {
  height: 10vw;
  line-height: 10vw;
  display: flex;
  justify-content: flex-start;
}
.remain-days ul li span {
  display: block;
  font-size: 0.9rem;
  color: #ffffff;
}
.remain-days ul li span.title {
  position: relative;
  flex-grow: 1 !important;
  padding-left: 2.5rem;
}
.remain-days ul li span.title:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.remain-days ul li span.title.vacation:after {
  background-image: url(../images/icons/ico_vacation_wh_sm.png);
}
.remain-days ul li span.title.reflash:after {
  background-image: url(../images/icons/ico_reflash_wh_sm.png);
}
.remain-days ul li span.title.prize:after {
  background-image: url(../images/icons/ico_prize_wh_sm.png);
}
.remain-days ul li span.title.reward:after {
  background-image: url(../images/icons/ico_reward_wh_sm.png);
}
.remain-days ul li span.remain {
  padding-right: 1rem;
  font-size: 0.875rem;
  font-weight: bold;
  color: #A6CE39;
  text-align: right;
}
.remain-days ul li span.total {
  position: relative;
  min-width: 15.55556vw;
  text-align: right;
}
.remain-days ul li span.total:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 1.25rem;
  margin-top: -0.625rem;
  background-color: #EFF0F3;
  opacity: 12%;
}

/*===================
	pay
===================*/
.sub-msalary {
  padding-bottom: 0;
}

.lists.month-pay {
  padding: 1rem;
  border: 1px solid #EFF0F3;
  background-color: #F8F8F8;
}
.lists.month-pay li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
.lists.month-pay li .list-title:after {
  display: none;
}
.lists.month-pay li .list-title + span:after {
  display: none;
}
.lists.month-pay li:last-of-type {
  padding-top: 1rem;
  border-top: 2px dashed #CCCCCC;
  margin-top: 0.75rem;
  font-weight: bold;
}
.lists.month-pay-total {
  padding-top: 0.75rem;
  background-color: transparent;
  border: 0 none;
}
.lists.month-pay-total li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: bold;
}
.lists.month-pay-total li:nth-of-type(1) {
  background-color: #595E6F;
}
.lists.month-pay-total li:nth-of-type(2) {
  background-color: #E44C4C;
}
.lists.month-pay-total li .list-title:after {
  display: none;
}
.lists.month-pay-total li .list-title + span:after {
  display: none;
}

/*===================
	pay
===================*/
.list-doc li {
  position: relative;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.list-doc li p:after {
  content: "";
  width: 1rem;
  height: 1rem;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: url("../images/icons/ico_arrow_right2.png") no-repeat center;
  background-size: contain;
}

/*===================
	modals
===================*/
.modal h4 {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.modal .search-field .input-group {
  margin-left: 0;
}
.modal .search-field [class^="col-"] + [class^="col-"] {
  margin-left: -.75rem;
}
.modal .search-result-wrap {
  margin-top: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.075);
  padding: 0.75rem;
  border-radius: 0.25rem;
}
.modal .search-result-wrap + h4 {
  padding-top: 1.5rem;
}
.modal .list-named {
  padding-left: 1rem;
  padding-right: 1rem;
}
.modal .list-named li {
  line-height: 1.5;
}
.modal .list-named li:first-of-type {
  padding-top: 0;
}
.modal .list-named li.row {
  margin-bottom: 0;
}
.modal .list-named li p {
  margin-bottom: 0;
}
.modal .modal-close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  padding: 0.5rem;
  font-size: 0;
}
.modal .modal-close span {
  display: none;
}
.modal .modal-close:after {
  content: '';
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background: url("../images/icons/ico_close_bk.png") no-repeat center;
  background-size: contain;
}
@media only screen and (max-width: 992px) {
  .modal {
    top: 1rem !important;
  }
  .modal.modal-application {
    bottom: 1rem;
    max-height: 95%;
  }
}
@media only screen and (max-width: 640px) {
  .modal {
    width: calc(100% - 1rem );
  }
}
.modal.modal-scrollable {
  overflow: hidden;
}
.modal.modal-scrollable .modal-header {
  padding-bottom: 0;
  background-color: #ffffff;
  min-height: 3.125rem;
}
.modal.modal-scrollable .modal-content {
  display: flex;
  flex-direction: column;
  padding: 0;
  max-height: calc(100vh - 2.4rem);
  background-clip: padding-box;
  overflow: hidden;
}
.modal.modal-scrollable .modal-content .modal-body {
  padding: 1rem;
  flex: 1 1 auto;
  overflow-y: auto;
}
.modal .modal-content .search-field + .table {
  margin-top: 1rem;
}

.table {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-collapse: collapse;
}
.table:first-of-type {
  margin-top: 0;
}
.table th, .table td {
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0;
}
.table tbody th,
.table thead th {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.table td {
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.table.table-light th, .table.table-light td {
  color: rgba(255, 255, 255, 0.87);
}
.table.table-light tbody th,
.table.table-light thead th {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
}
.table.table-light td {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.loading-wrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9998;
}
.loading-wrap .loading {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 100%;
  text-align: center;
  color: #ffffff;
  z-index: 9999;
}
.loading-wrap.block {
  display: block;
}

.tabs .tab {
  background: #eee;
}
.tabs .tab a {
  color: #333;
  text-transform: capitalize;
}
.tabs .tab a:hover {
  color: #444;
}
.tabs .tab a.active {
  color: #444;
}
.tabs .indicator {
  background-color: #999;
}

.modal .modal-header {
  padding: 0 0 15px;
  width: 100%;
}
.modal .modal-header:after {
  content: '';
  display: block;
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #F0F3F4;
}
.modal .modal-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0043D0;
}
.modal .modal-content p {
  padding: 15px 0;
  text-align: center;
}
.modal .modal-footer {
  height: auto;
}
.modal .modal-footer:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #F0F3F4;
}
.modal .modal-footer a {
  display: block;
  float: left;
  width: 50%;
  height: 50px;
  line-height: 50px;
  margin-left: -1px;
  border-left: 1px solid  #F0F3F4;
  text-align: center;
}
.modal .modal-footer a:first-of-type {
  border-left: 0 none;
}
.modal .modal-footer a.full {
  width: 100%;
}
.modal .modal-footer a.cancel {
  color: #EE314F;
}
.modal .modal-footer a.submit {
  color: #0043D0;
}
.modal.modalTips {
  padding: 12px 0;
}
@media only screen and (max-width: 992px) {
  .modal.modalTips {
    width: 95%;
    max-height: 87%;
  }
}
.modal.modalTips .modal-content {
  padding: 0;
}
.modal.modalTips .modal-content .modal-header {
  margin-top: -12px;
  width: 100%;
  border-radius: 2px;
  border-bottom: 1px solid #f4f4f4;
  background-color: #ffffff;
  overflow: hidden;
}
.modal.modalTips .modal-content .modal-header .title {
  display: block;
  padding: 12px 12px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.modal.modalTips .modal-content .modal-header .modal-close {
  position: absolute;
  top: 15px;
  right: 4px;
  padding: 2px 16px;
}
.modal.modalTips .modal-content .section-title {
  font-size: 15px;
  margin-bottom: 12px;
  background-color: #ffffff;
}
.modal.modalTips .modal-content .slider-container {
  margin-bottom: 20px;
  counter-reset: section;
}
.modal.modalTips .modal-content .slider-container .card {
  margin: 10px 0 14px;
  min-height: 190px;
  font-size: 12px;
}
.modal.modalTips .modal-content .slider-container .card .card-title {
  display: block;
  padding: 0 8px;
  font-size: 15px;
  line-height: 36px;
  color: #ffffff;
  background-color: #00AFEC;
}
.modal.modalTips .modal-content .slider-container .card .card-title::before {
  counter-increment: section;
  content: counter(section);
  display: inline-block;
  margin-top: -2px;
  margin-right: 4px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 22px;
  font-size: 12px;
  color: #00AFEC;
  background-color: #ffffff;
  vertical-align: middle;
}
.modal.modalTips .modal-content .slider-container .card .card-content {
  padding: 12px 16px;
}
.modal.modalTips .modal-content .slider-container .owl-theme .owl-nav {
  display: none;
}
.modal.modalTips .modal-content .photo {
  width: 96%;
  margin: 0 auto;
}
.modal.systeminfo .systeminfo-content p {
  width: 100%;
  padding: 10px 0;
  margin: 0;
  text-align: left;
}
.modal.systeminfo .manager-item {
  position: relative;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 20px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #f6faf9;
}
.modal.systeminfo .manager-item::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 20px;
  width: 64px;
  height: 64px;
  border-radius: 80px;
  background-image: url(../images/icn_person_outline.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
  background-color: rgba(0, 63, 152, 0.95);
  transform: translateY(-50%);
}
.modal.systeminfo .manager-item p {
  padding: 0 0 0 100px;
  font-size: 0.825rem;
}
.modal.systeminfo .manager-item p.phone {
  font-size: 1.1rem;
  font-weight: 900;
  color: #00afec;
}
.modal.systeminfo .manager-item p + p {
  margin-top: 3px;
}

.color-red {
  color: #fa0a0a;
}

.nowrap {white-space: nowrap;}

.modal-header .title { padding: 0px 0 0 14px; line-height: 50px; font-size: 1rem; font-weight: bold;}

select {
	display: block; 
	border: 1px solid #D7E1EA; 
	height: 12.77778vw;
	background-color: #ffffff;
	overflow: visible;
	border-radius: 1.11111vw; 
    padding-left: 3.33333vw;
    padding-right: 3.33333vw;

	/*ios대응*/
    -webkit-appearance: none;
	-moz-appearance: none; 
	appearance: none;
	
	/*화살표 배경 넣기*/
	 background: url("../images/icons/ico_arrow_dropdown.png") no-repeat 99% 50%/45px auto #fff;  /*화살표 select박스 오른쪽 중앙 배치,배경 흰색*/
}

select[disabled] {background-color: #CBD3DB ; color: inherit; opacity: 1;}

input {
	/*ios대응*/
	appearance: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}