@charset "UTF-8";
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block
}
body {
  line-height: 1
}
ol, ul {
  list-style: none
}
blockquote, q {
  quotes: none
}
blockquote:after, blockquote:before, q:after, q:before {
  content: '';
  content: none
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
b, strong {
  font-weight: bold
}
* {
  box-sizing: border-box;
  outline: none
}
.redfont {
  color: #d4145a;
  font-weight: bold;
  margin-bottom: 70px;
}
.time-wrap {
  line-height: 1.3;
}
.sign_out {
  position: absolute;
  right: 0;
  background: #00a99d;
  color: #fff !important;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
.list-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.icon-member:before {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
#back-top-btn {
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  background-color: #00A99D;
  position: fixed !important;
  right: 25px;
  bottom: 5vh;
  text-align: center;
  opacity: 0;
  padding: 0 !important;
  visibility: hidden;
  color: #fff;
  font-size: 112.5%;
}
.form-group {
  width: 100%;
  margin-bottom: 30px;
  display: flex;
  justify-content: left;
  align-content: center;
}
.col-form-label {
  padding-top: calc(0.46875rem + 1px);
  padding-bottom: calc(0.46875rem + 1px);
  margin-bottom: 0;
  margin-right: 20px;
  font-size: inherit;
  line-height: 1.5;
  white-space: nowrap;
  min-width: 100px;
  text-align: right;
  color: #626262;
}
.form-group .form-control {
  width: calc(100% - 120px);
  background-color: #efefef;
  display: inline-block;
  color: #1b2e4b;
  height: 41px;
  padding: 0 12px;
  font-weight: 400;
  line-height: 1.5;
  background-clip: padding-box;
  border: 0px solid #c0ccda;
}
.half {
  width: calc(100% - 330px) !important;
}
.login_main {
  max-width: 700px;
  margin: auto;
  padding: 0 15px;
  min-height: 600px;
}
.login_box h1 {
  text-align: center;
  font-size: 160%;
  font-weight: bold;
  color: #888;
  margin-bottom: 40px;
}
.btn-wrap {
  text-align: center;
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
}
.btn-full {
  background-color: #00a99d;
  border-radius: 5px;
}
.stpes-cancel-btn {
  background-color: #666666;
}
.btn-wrap a {
  width: calc(49%);
  padding: 12px 0;
  color: #fff;
}
.btn {
  width: 175px;
  height: 41px;
  line-height: 1;
  margin-left: 15px;
  padding: 10px 0;
  color: #fff;
  border: 0;
}
.btn-wrap a:hover {
  color: #fff;
}
.img_code {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-left: 15px;
  width: 195px;
}
.steps-schematic {
  overflow: hidden;
  line-height: 1;
  margin: 60px 0 50px;
}
.steps-schematic div {
  float: left;
  width: 50%;
  position: relative;
  font-size: 187.5%;
  font-weight: bold;
  color: #fff;
  background-color: #dadada;
  padding: 9px 0 6px;
  text-align: center;
}
.steps-schematic div.active {
  background-color: #467ab2;
}
.steps-schematic div:first-of-type {
  border-radius: 5px 0 0 5px;
}
.steps-schematic div:nth-of-type(2) {
  border-radius: 0 5px 5px 0;
}
.steps-schematic .triangle-right {
  color: #dadada;
}
.steps-schematic div.active .triangle-right {
  color: #467ab2;
  stroke: #467ab2;
}
.triangle-right {
  stroke-width: 18;
  stroke-linejoin: round;
  position: absolute;
  top: 0;
  z-index: 1;
  left: calc(100% - 1px);
}
@font-face {
  font-family: 'icomoon';
  src: url("../sass/fonts/icomoon.eot?obaoop");
  src: url("../sass/fonts/icomoon.eot?obaoop#iefix") format("embedded-opentype"), url("../sass/fonts/icomoon.ttf?obaoop") format("truetype"), url("../sass/fonts/icomoon.woff?obaoop") format("woff"), url("../sass/fonts/icomoon.svg?obaoop#icomoon") format("svg");
  font-weight: normal;
  font-style: normal
}
[class*=" icon-"], [class^=icon-] {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
.icon-dot:before {
  content: "\e915";
  color: #fff
}
.icon-sticker:before {
  content: "\e916";
  color: #fff599
}
.icon-top:before {
  content: "\e917";
  color: #fff
}
.icon-search:before {
  content: "\e914";
  color: #808080
}
.icon-apply:before {
  content: "\e900";
  color: #4d4d4d
}
.icon-close:before {
  content: "\e901";
  color: #fff
}
.icon-color:before {
  content: "\e902";
  color: #fff
}
.icon-drive:before {
  content: "\e903";
  color: #4d4d4d
}
.icon-edit:before {
  content: "\e904";
  color: #fff
}
.icon-egg:before {
  content: "\e905";
  color: #00a99d
}
.icon-epa-news:before {
  content: "\e906";
  color: #4d4d4d
}
.icon-member:before {
  content: "\e907";
  color: #fff
}
.icon-menu:before {
  content: "\e908";
  color: #808080
}
.icon-new:before {
  content: "\e909";
  color: #000;
  padding: 3px;
  border: 1px solid #000;
  border-radius: 50%
}
.icon-news:before {
  content: "\e90a";
  color: #4d4d4d
}
.icon-notice:before {
  content: "\e90b";
  color: #00a99d
}
.icon-open:before {
  content: "\e90c";
  color: #fff
}
.icon-pin:before {
  content: "\e90d";
  color: #00a99d
}
.icon-problem:before {
  content: "\e90e";
  color: #4d4d4d
}
.icon-reset:before {
  content: "\e90f";
  color: #fff
}
.icon-share:before {
  content: "\e910";
  color: #4d4d4d
}
.icon-staff:before {
  content: "\e911";
  color: #4d4d4d
}
.icon-theme:before {
  content: "\e912";
  color: #4d4d4d
}
.icon-triangle:before {
  content: "\e913"
}
#wrapper {
  padding: 15px 20px 0;
  max-width: 1720px;
  margin: auto;
}
header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}
#main-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap
}
.box-type-6 {
  margin: 0 0 15px 30px
}
.box-wrap:nth-of-type(3n+1) {
  margin-left: 0
}
.box-col-1 {
  width: calc((100% - 15px * 2) / 3.0001)
}
.box-col-2 {
  width: calc((100% - 9px) / 3.0001 * 2)
}
.box-col-3 {
  width: calc((100% - 30px) / 2.0001)
}
.box-col-none {
  width: 0px !important;
}
a {
  display: inline-block;
  cursor: pointer
}
a, a:focus, a:hover, a:visited {
  color: #333
}
a, a:focus, a:hover, a:visited {
  text-decoration: none
}
img {
  width: 100%;
  height: auto
}
span {
  display: inline-block
}
.hidden {
  display: none !important
}
.box-title-wrap {
  display: flex;
  align-items: center;
  position: relative
}
.box-title-wrap.hide-tab .tab-btn:not(.active) {
  width: 55px;
  overflow: hidden
}
.box-title-wrap:not(.box-title-tab) {
  background-color: #4D4D4D;
  color: #fff
}
.box-title-wrap:not(.box-title-tab) span {
  font-size: 112.5%
}
.box-title-wrap > :not(.box-btns-wrap) {
  padding: 0 10px;
  height: 45px;
  line-height: 45px;
  font-size: 100%
}
.box-title-wrap > span {
  color: #fff
}
.box-btns-wrap {
  display: flex;
  align-items: center;
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 87.5%
}
.box-btns-wrap li {
  margin-left: 10px
}
.box-btns-wrap li:first-of-type {
  margin-left: 0
}
.box-btns-wrap a {
  width: 25px;
  height: 25px;
  line-height: 24px;
  background-color: #808080;
  border-radius: 50%;
  text-align: center
}
.box-btns-wrap a:hover {
  background-color: #00A99D
}
.box-btns-wrap i {
  font-size: 87.5%;
  position: relative;
  top: 1px
}
.box-btns-wrap .icon-reset {
  top: 2%
}
.box-btns-wrap .icon-open {
  left: 4%
}
.box-btns-wrap .icon-close {
  display: none;
  line-height: 24px
}
.box-btns-wrap.show .icon-dot {
  display: none
}
.box-btns-wrap.show .icon-close {
  display: block
}
.box-btns-wrap.show li:not(.btns-show-btn) {
  display: block
}
.tab-btn {
  background-color: #F2F2F2;
  text-align: center;
  position: relative
}
.tab-btn, .tab-btn:focus, .tab-btn:hover, .tab-btn:visited {
  color: #4D4D4D
}
.tab-btn:before {
  content: '';
  display: block;
  width: 1px;
  height: 35px;
  position: absolute;
  left: 0;
  top: 5px;
  background-color: #4D4D4D
}
.tab-btn:first-of-type:before {
  display: none
}
.tab-btn.active, .tab-btn:hover {
  background-color: #4D4D4D
}
.tab-btn.active, .tab-btn.active:focus, .tab-btn.active:hover, .tab-btn.active:visited, .tab-btn:hover, .tab-btn:hover:focus, .tab-btn:hover:hover, .tab-btn:hover:visited {
  color: #fff
}
.tab-btn.active span, .tab-btn:hover span {
  color: #fff
}
.tab-btn.active + .tab-btn:before, .tab-btn.active:before, .tab-btn:hover + .tab-btn:before, .tab-btn:hover:before {
  display: none
}
.tab-btn.active {
  font-size: 112.5%
}
.box-info-wrap {
  border: 1px solid #F2F2F2;
  font-size: 87.5%
}
.box-info-wrap .tab-info {
  display: none
}
.box-info-wrap .tab-info.active {
  display: block
}
.box-info-wrap ul {
  overflow: hidden
}
.box-info-wrap li {
  padding: 7px 15px;
  min-height: 40px
}
.box-info-wrap li:nth-child(2n) {
  background-color: #F2F2F2
}
.box-info-wrap li > a {
  display: flex;
  align-items: center
}
.box-info-wrap li:hover span {
  color: #00A99D
}
.box-info-wrap li:hover .icon-triangle:before {
  color: #00A99D
}
.box-info-wrap li.pin-item:hover span {
  font-weight: bold
}
.box-info-wrap .list-ellipsis {
  flex: 1
}
.list-type-5 li a > :nth-child(2) {
  width: 75px;
}
.pin-item span {
  color: #00A99D;
}
.box-type-8.box-photo {
  position: relative;
  padding: 5px
}
.box-type-8.box-photo .box-btns-wrap {
  position: absolute !important;
  align-items: flex-start;
  flex-direction: inherit;
  width: auto;
  height: auto;
  margin-left: auto;
  top: 10px
}
.box-type-8.box-photo .box-btns-wrap li {
  display: block !important;
  margin: 0;
  margin-left: 4px
}
.box-type-8.box-photo div {
  height: 0px;
  background-position: 50% 50%;
  background-size: cover;
  padding-bottom: 43%
}
.box-type-11 {
  width: 100%;
  text-align: center;
  min-height: 247px
}
.box-type-9 {
  min-height: 247px;
  width: 100%;
  margin-bottom: 20px;
}
.box-type-9 a, .box-type-9 a:focus, .box-type-9 a:hover, .box-type-9 a:visited, .box-type-10 a, .box-type-10 a:focus, .box-type-10 a:hover, .box-type-10 a:visited, .box-type-11 a, .box-type-11 a:focus, .box-type-11 a:hover, .box-type-11 a:visited {
  color: #fff
}
.box-type-9 ul, .box-type-10 ul, .box-type-11 ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%
}
.box-type-9 .task-has-0 .task-val span, .box-type-10 .task-has-0 .task-val span, .box-type-11 .task-has-0 .task-val span {
  visibility: hidden
}
.box-type-9 .task-has-0 .task-zero, .box-type-10 .task-has-0 .task-zero, .box-type-11 .task-has-0 .task-zero {
  display: block
}
.box-type-9 .task-add, .box-type-10 .task-add, .box-type-11 .task-add {
  cursor: pointer;
  position: relative;
  background-color: #808080
}
.box-type-9 .task-add:hover, .box-type-10 .task-add:hover, .box-type-11 .task-add:hover {
  opacity: 0.8
}
.box-type-9 .task-add:after, .box-type-10 .task-add:after, .box-type-11 .task-add:after {
  content: '+';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1000%;
  color: #fff
}
.box-type-9 .task-add .task-btns, .box-type-9 .task-add .task-title, .box-type-9 .task-add .task-val, .box-type-10 .task-add .task-btns, .box-type-10 .task-add .task-title, .box-type-10 .task-add .task-val, .box-type-11 .task-add .task-btns, .box-type-11 .task-add .task-title, .box-type-11 .task-add .task-val {
  display: none
}
.box-type-9 .task-add .task-info, .box-type-10 .task-add .task-info, .box-type-11 .task-add .task-info {
  height: 100%
}
.box-type-9 .task-add .icon-egg:before, .box-type-10 .task-add .icon-egg:before, .box-type-11 .task-add .icon-egg:before {
  color: #808080 !important
}
.task-zero {
  text-align: center;
}
.task-zero img {
  height: 10vmin;
  width: auto
}
.box-type-11 {
  min-height: 0;
  font-size: 131.25%;
  margin-bottom: 15px;
}
.box-type-11 a, .box-type-11 a:focus, .box-type-11 a:hover, .box-type-11 a:visited {
  color: #333
}
.box-type-11 li {
  background-color: #F2F2F2;
  border-radius: 15px;
  height: auto;
  padding: 15px 5px;
  width: 100%;
}
.box-type-11 li:first-child:nth-last-child(6), .box-type-11 li:first-child:nth-last-child(6) ~ li {
  width: calc(100% / 6 - 20px);
}
.box-type-11 li:first-child:nth-last-child(5), .box-type-11 li:first-child:nth-last-child(5) ~ li {
  width: calc(100% / 5 - 20px);
}
.box-type-11 li:first-child:nth-last-child(4), .box-type-11 li:first-child:nth-last-child(4) ~ li {
  width: calc(100% / 4 - 20px);
}
.box-type-11 li:first-child:nth-last-child(3), .box-type-11 li:first-child:nth-last-child(3) ~ li {
  width: calc(100% / 3 - 20px);
}
.box-type-11 li:first-child:nth-last-child(2), .box-type-11 li:first-child:nth-last-child(2) ~ li {
  width: calc(100% / 2 - 20px);
}
.box-type-11 li:hover i:before, .box-type-11 li:hover span {
  color: #00A99D
}
.box-type-11 i {
  font-size: 150%;
  margin-right: 6px
}
.box-type-11 i, .box-type-11 span {
  vertical-align: middle
}
.task-info {
  display: flex;
  flex-direction: column;
  position: relative
}
.task-info:hover {
  opacity: 0.7
}
.task-val {
  flex: 1;
  font-size: 250%;
  position: relative
}
.task-val span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: 'Arial Narrow'
}
.task-title {
  font-size: 112.5%;
  color: #fff;
  font-weight: bold;
  text-align: center;
}
.task-btns {
  height: 60px;
  line-height: 60px
}
.task-btns a {
  line-height: 1;
  margin-left: 5px
}
.task-btns a:first-of-type {
  margin-left: 0
}
.task-color-1 {
  background-color: #00a99d
}
.task-color-1 .icon-egg:before {
  color: #00a99d
}
.task-color-2 {
  background-color: #467ab2
}
.task-color-2 .icon-egg:before {
  color: #467ab2
}
.task-color-3 {
  background-color: #e7c324
}
.task-color-3 .icon-egg:before {
  color: #e7c324
}
.task-color-4 {
  background-color: #7171db
}
.task-color-4 .icon-egg:before {
  color: #7171db
}
.task-color-5 {
  background-color: #e2844a
}
.task-color-5 .icon-egg:before {
  color: #e2844a
}
.task-color-6 {
  background-color: #4f75e2
}
.task-color-6 .icon-egg:before {
  color: #4f75e2
}
.task-type-circle li {
  height: 14vw;
  width: 14vw;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list-type-6 .pin-item {
  color: #00A99D
}
.list-type-7 li a > :nth-child(3), .list-type-7 li a > :nth-child(4) {
  width: 85px;
  text-align: right
}
.list-type-7 .pin-item {
  color: #00A99D
}
.icon-triangle:before {
  color: #4D4D4D
}
[class^=list-type-] .list-icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 24px;
  color: #fff;
  border-radius: 50%
}
body, html {
  font-family: 'Arial', 'Microsoft JhengHei'
}
header {
  margin-bottom: 10px
}
[type=checkbox] {
  cursor: pointer
}
.mobile-logo {
  width: 70%
}
.logo-wrap {
  width: 100%;
  max-width: 415px;
}
#sub-main-wrap {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between
}
.user-wrap {
  display: flex;
  align-items: center;
  margin-right: 10px
}
.user-name {
  display: inline-block;
  text-align: center;
  margin-right: 10px
}
.user-name > span {
  display: block;
  font-size: 87.5%
}
.icon-member {
  display: inline-block;
  background-color: #00A99D;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: relative
}
footer {
  font-size: 93.75%;
  margin-bottom: 15px
}
footer ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 300px
}
footer li {
  padding-left: 40px;
  position: relative;
  line-height: 1.5
}
footer li:before {
  content: '.';
  position: absolute;
  display: block;
  top: 1px;
  left: 20px;
  transform: translateY(-20%)
}
footer li:nth-of-type(3n+1) {
  padding-left: 0
}
footer li:nth-of-type(3n+1):before {
  display: none
}
.footer-qa {
  padding: 1px 3px;
  background-color: #4D4D4D;
  margin-left: 15px
}
.footer-qa, .footer-qa:focus, .footer-qa:hover, .footer-qa:visited {
  color: #fff
}
@media screen and (max-width: 1365px) {
  #wrapper {
    padding: 15px 25px 0;
  }
  .user-wrap {
    margin: 0 0 15px;
  }
  .box-col-1 {
    width: calc((100% - 15px) / 2);
  }
  #back-top-btn.show {
    visibility: visible;
    opacity: 1;
  }
  .box-type-11 {
    font-size: 100%;
  }
  footer {
    font-size: 68.75%;
  }
}
@media screen and (max-width: 1165px) {
  .box-col-1, .box-col-3 {
    width: 100%;
  }
  .box-type-9 ul, .box-type-11 ul {
    flex-wrap: wrap;
  }
  .box-type-6 {
    margin: 25px 0;
  }
  .task-zero img {
    height: 7vmin;
  }
  .box-type-11 li {
    height: 24vw;
    max-width: 24vw;
    margin-bottom: 20px;
  }
  .box-type-11 li:first-child:nth-last-child(6), .box-type-11 li:first-child:nth-last-child(6) ~ li {
    width: calc(100% / 3);
  }
  .box-type-11 li:first-child:nth-last-child(5), .box-type-11 li:first-child:nth-last-child(5) ~ li {
    width: calc(100% / 4 - 20px);
  }
  .box-type-11 li:first-child:nth-last-child(4), .box-type-11 li:first-child:nth-last-child(4) ~ li {
    width: calc(100% / 2);
    max-width: 45vw;
  }
  .box-type-11 li:first-child:nth-last-child(3), .box-type-11 li:first-child:nth-last-child(3) ~ li {
    width: calc(100% / 2);
    max-width: 45vw;
  }
  .box-type-11 li:first-child:nth-last-child(2), .box-type-11 li:first-child:nth-last-child(2) ~ li {
    width: calc(100% / 2);
    max-width: 45vw;
  }
  .box-type-11 li:first-child:nth-last-child(1), .box-type-11 li:first-child:nth-last-child(1) ~ li {
    max-width: none;
  }
  .box-type-11 li {
    height: auto;
    max-width: 29vw;
  }
  footer ul {
    padding: 0;
  }
}
@media screen and (max-width: 1110px) {
  .task-type-circle li {
    height: 27vw;
    width: calc(100% / 3);
    max-width: 27vw;
    margin-bottom: 20px;
  }
  .task-zero img {
    height: 13vmin;
  }
}
@media screen and (min-width: 768px) {
  .mobile-show {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .time-wrap {
    font-size: 75%;
  }
  .task-zero img {
    height: 17vmin;
    width: auto;
  }
  #back-top-btn {
    right: 15px;
    bottom: 3vh;
  }
  .box-type-9 ul {
    justify-content: space-around;
  }
  .box-btns-wrap li:not(.btns-show-btn) {
    display: none;
  }
  .box-btns-wrap {
    flex-direction: column;
    flex: 1;
    align-items: flex-end;
    position: relative;
    top: 0;
    width: 25px;
    height: 25px;
    margin-left: 20px;
  }
  .box-btns-wrap li {
    margin: 15px 0 0;
  }
  .box-btns-wrap li:first-of-type {
    margin: 0;
  }
  .task-type-circle li {
    height: 42vw;
    width: calc(100% / 2);
    max-width: 42vw;
    margin-bottom: 20px;
  }
  .signin-time {
    margin-bottom: 5px;
  }
  .user-wrap {
    align-items: flex-end;
  }
  #wrapper {
    padding: 15px 0 0;
  }
  #sub-main-wrap {
    padding: 0 15px;
  }
  .box-type-9, .box-type-10, .box-type-11 {
    padding: 0 15px;
  }
}
@media screen and (max-width: 768px) and (min-width: 320px) {
  .box-type-6 {
    margin: 15px 0;
  }
}
@media screen and (max-width: 600px) {
  .form-group {
    flex-wrap: wrap;
  }
  .col-form-label, .form-group .form-control {
    width: 100%;
    text-align: left;
  }
.box-type-11 li:first-child:nth-last-child(6),.box-type-11 li:first-child:nth-last-child(6) ~ li {width: calc(100% / 2);max-width: 45vw;}
.box-type-11 li:first-child:nth-last-child(5),.box-type-11 li:first-child:nth-last-child(5) ~ li {width: calc(100% / 2);max-width: 45vw;}
.box-type-11 li:first-child:nth-last-child(4),.box-type-11 li:first-child:nth-last-child(4) ~ li {width: calc(100% / 2);max-width: 45vw;}
.box-type-11 li:first-child:nth-last-child(3),.box-type-11 li:first-child:nth-last-child(3) ~ li {width: calc(100% / 2);max-width: 45vw;}
.box-type-11 li:first-child:nth-last-child(2),.box-type-11 li:first-child:nth-last-child(2) ~ li {width: calc(100% / 2);max-width: 45vw;}
.box-type-11 li:first-child:nth-last-child(1),.box-type-11 li:first-child:nth-last-child(1) ~ li {max-width: none;}	
  .half {
    width: calc(100% - 210px) !important;
  }
  .steps-schematic {
    font-size: 80%;
  }
  .logo-wrap {
    width: 75vw;
  }
  .sign_out {
    font-size: 80%;
    width: 30px;
    height: 30px;
    right: 6px;
  }
  .box-type-9 ul {
    justify-content: space-between;
  }
  .task-title, .box-type-11 {
    font-size: 87.5%;
  }
  .box-info-wrap {
    font-size: 68.75%;
  }
  .tab-btn.active, .box-title-wrap > :not(.box-btns-wrap) {
    font-size: 75%;
  }
  .box-type-9, .box-type-10, .box-type-11 {
    min-height: 170px;
  }
}
@media screen and (max-width: 375px) {
.box-type-11 li:first-child:nth-last-child(6),.box-type-11 li:first-child:nth-last-child(6) ~ li {max-width: 43vw;}
.box-type-11 li:first-child:nth-last-child(5),.box-type-11 li:first-child:nth-last-child(5) ~ li {max-width: 43vw;}
.box-type-11 li:first-child:nth-last-child(4),.box-type-11 li:first-child:nth-last-child(4) ~ li {max-width: 43vw;}
.box-type-11 li:first-child:nth-last-child(3),.box-type-11 li:first-child:nth-last-child(3) ~ li {max-width: 43vw;}
.box-type-11 li:first-child:nth-last-child(2),.box-type-11 li:first-child:nth-last-child(2) ~ li {max-width: 43vw;}
}

.slick-slider {
    position: relative;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}

    .slick-list:focus {
        outline: none
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: grabbing
    }

.slick-slider .slick-list, .slick-slider .slick-track {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block
}

    .slick-track:after, .slick-track:before {
        display: table;
        content: ''
    }

    .slick-track:after {
        clear: both
    }

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
    padding-left: 15px;
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block;
    width: 100%
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.slick-next, .slick-prev {
    font-size: 0;
    line-height: 0;
    opacity: .5;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-top: -10px\9;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent
}

    .slick-next:focus, .slick-next:hover, .slick-prev:focus, .slick-prev:hover {
        opacity: 1
    }

        .slick-next:focus:before, .slick-next:hover:before, .slick-prev:focus:before, .slick-prev:hover:before {
            opacity: 1
        }

    .slick-next.slick-disabled:before, .slick-prev.slick-disabled:before {
        opacity: .25
    }

    .slick-next:before, .slick-prev:before {
        line-height: 1;
        opacity: .75;
        color: white;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

.slick-prev {
    left: -25px
}

[dir=rtl] .slick-prev {
    right: -25px;
    left: auto
}

.slick-prev:before {
    content: '←'
}

[dir=rtl] .slick-prev:before {
    content: '→'
}

.slick-next {
    right: -25px
}

[dir=rtl] .slick-next {
    right: auto;
    left: -25px
}

.slick-next:before {
    content: '→'
}

[dir=rtl] .slick-next:before {
    content: '←'
}

.slick-slider {
    margin-bottom: 30px
}

.slick-dots {
    position: absolute;
    bottom: 1vh;
    height: auto !important;
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center
}

    .slick-dots li {
        position: relative;
        display: inline-block;
        width: 14px;
        height: 14px;
        margin: 0 8px;
        padding: 0;
        cursor: pointer
    }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 14px;
            height: 14px;
            position: relative;
            padding: 0;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent
        }

            .slick-dots li button:focus, .slick-dots li button:hover {
                outline: none
            }

                .slick-dots li button:focus:before, .slick-dots li button:hover:before {
                    background: #fff;
                    opacity: 1
                }

            .slick-dots li button:before {
                font-family: slick;
                font-size: 3.5rem;
                line-height: 20px;
                position: absolute;
                left: 0px;
                content: "•";
                text-align: center;
                color: black;
                -webkit-font-smoothing: antialiased;
                background: #fff;
                opacity: .75;
                top: 0;
                position: absolute;
                font-size: 0;
                width: 14px;
                border-radius: 100%;
                height: 14px;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                -moz-box-shadow: 4px 4px 12px 4px rgba(51, 51, 102, 0.5);
                -webkit-box-shadow: 4px 4px 12px 4px rgba(51, 51, 102, 0.5);
                box-shadow: 4px 4px 12px 4px rgba(51, 51, 102, 0.5)
            }

        .slick-dots li.slick-active button:before {
            background: #fff;
            opacity: 1
        }

.slick-next, .slick-prev {
    width: 30px;
    height: 107px;
    -o-transition: all .20s linear;
    -webkit-transition: all .20s linear;
    -moz-transition: all .20s linear;
    transition: all .20s linear
}

.slick-prev {
    background: url("../images/arrow.svg") no-repeat center/cover
}

.slick-next {
    background: url("../images/arrow.svg") no-repeat center/cover
}

    .slick-next:before, .slick-prev:before {
        display: none
    }

.slick-next, .slick-prev {
    width: 45px;
    opacity: 1;
    z-index: 1
}

@media screen and (max-width:767px) {
    .slick-next, .slick-prev {
        width: 4vw;
        height: 10vw
    }
}

.slick-next:focus, .slick-prev:focus {
    outline: unset
}

.slick-prev {
    left: 15px
}

.slick-next {
    right: 15px;
    transform: translate(0, -50%) rotate(180deg)
}

.box-type-12 .carousel-wrap, .box-type-12 .slick-list, .box-type-12 .slick-track, .box-type-12 a, .box-type-12 li, .box-type-12 ul {
    height: 100%
}

.box-type-12 .slick-slider {
    margin-bottom: 0;
    position: relative;
    background: #f9fcfb
}

body.color-D .box-type-12 .slick-slider {
    background: #1a242d
}

/* 20231124 login.aspx_add eye button */
@font-face {
  font-family: Font Awesome\5 Free;
  font-style: normal;
  font-weight: 900;
  src: url(fonts/font-awesome/fa-solid-900.eot);
  src:
      url(fonts/font-awesome/fa-solid-900.eot?#iefix) format("embedded-opentype"),
      url(fonts/font-awesome/fa-solid-900.woff2) format("woff2"),
      url(fonts/font-awesome/fa-solid-900.woff) format("woff"),
      url(fonts/font-awesome/fa-solid-900.ttf) format("truetype"),
      url(fonts/font-awesome/fa-solid-900.svg#fontawesome) format("svg");
}
.fa,
.fas {
  font-family: Font Awesome\5 Free;
  font-weight: 900;
}
.fa-fw {
  text-align: center;
}
.fa-eye:before {
  content: "\f06e";
}
.fa-eye-slash:before {
  content: "\f070";
}
.pwCol {
  position: relative;
}
.pwCol .pwIpt {
    padding-right: 40px;
}
.eyeBtn {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 12px;
  color: #000;
  text-decoration: none;
}