@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

body {
  line-height: 1;
  color: black;
  background: white;
}

ol, ul {
  list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

body {
  padding-top: 28px;
  scroll-behavior: smooth;
  font-family: "Noto Sans TC", Microsoft JhengHei, sans-serif;
  min-width: 100%;
  -webkit-overflow-scrolling: touch;
}

* {
  position: relative;
}

.myligthBoxBg {
  min-height: 500px;
}

.ligthBoxFullBg {
  height: 100vh !important;
}

@media (max-width: 532px) {
  .myligthBoxBg {
    max-height: 100vh !important;
    height: 80vh !important;
    max-width: 90vw !important;
    min-width: 90%;
  }
}
html {
  font-size: 62.5%;
}

#fa-down-img {
  margin: 40px 0;
  cursor: pointer;
}

input[type=checkbox].checkbix:checked + label > span:before {
  top: -3px !important;
  left: 17% !important;
}

header {
  z-index: 2;
  padding: 0 10px 0 33px;
  background: #5FBAA6;
  -webkit-box-shadow: 0 6px 13px rgba(0, 0, 0, 0.23);
          box-shadow: 0 6px 13px rgba(0, 0, 0, 0.23);
}
header{
  position: sticky;
  top:28px;
}

@media (max-width:767px) {
  header{
      top:0;
  }
}


header .container {
  max-width: 1435px;
}
header li {
  padding: 22px 0;
}
header li:hover, header li:hover > a {
  background: white;
  color: #5FBAA6;
  text-shadow: 0 0 0;
  text-decoration: none;
}
header li, header li > a {
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  display: inline-block;
  color: white;
  font-size: 2rem;
  letter-spacing: 2px;
}

.toggle-nav {
  overflow: hidden;
  trasition: 0.2s;
  display: none;
  right: -350px;
  top: 64px;
  white-space: nowrap;
  position: absolute;
  background: white;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.toggle-nav a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 16px 11px ;
  color: #6E6E6E;
  vertical-align: middle;
  font-size: 1.8rem;
}
.toggle-nav a:hover {
  text-decoration: none;
  background-color: #FFF4CA;
}
.toggle-nav a img {
  margin-right: 13px;
}

.link_a {
  vertical-align: super;
  display: inline-block;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background-color: #A0A0A0;
  -webkit-transition: 0.18s;
  transition: 0.18s;
  text-align: center;
}
.link_a:hover {
  background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), -webkit-gradient(linear, left top, left bottom, from(#6559ca), color-stop(30%, #bc318f), color-stop(50%, #e33f5f), color-stop(70%, #f77638), to(#fec66d));
  background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}
.link_a img {
  margin-top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.link_a--c1 {
  margin-right: 18.9px;
}
.link_a--c1 img {
  margin-left: 5px;
}
.link_a--c1:hover {
  background: #366EB2;
}

#index1 {
  height: 70vh;
}

.act {
  margin-left: 40px;
}
.act a {
  letter-spacing: 1.5px;
  padding: 8px 19px;
  border-radius: 100px;
  color: white;
  background: #A0A0A0;
  font-size: 1.5rem;
  margin-right: 16px;
  -webkit-transition: 0.15s;
  transition: 0.15s;
}
.act a:last-child {
  margin-right: 0;
}
.act a:hover {
  text-decoration: none;
  color: white;
  background-color: #5FBAA6;
}
.act a img {
  -webkit-transform: translateY(23%);
          transform: translateY(23%);
  margin-right: 8px;
  mix-blend-mode: luminosity;
}

.index1_left, .index1_right {
  display: inline-block;
  width: 52%;
  vertical-align: middle;
}

.index1_right {
  height: 100%;
  width: 34%;
  text-align: right;
}

.index1_right img {
  position: absolute;
  left: 0;
}

/* 新增動畫圖層產生破版修改 */
.index1_right .background {
  width: 100%;
  left:-4px;
  bottom:-13px
}

.index1_right .people {
  width: 70%;
  bottom:153px;
}

.index1_right .letter {
  width: 100%;
}


@media (max-width:1700px) {
  .index1_right .background {       
      bottom:100px;
  }
  .index1_right .people {
      bottom:255px;
  }
  .index1_right .letter {
      bottom:100px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .index1_right .background {
      bottom: 40px;
  }
  .index1_right .people {
      bottom: 210px;
  }
  .index1_right .letter {
      bottom:70px;
  }

}



.index1_right--c1 {
  bottom: -13px;
}
.index1_right--c2 {
  -webkit-transform: translateX(86px) translateY(-317px);
          transform: translateX(86px) translateY(-317px);
  opacity: 0;
  bottom: 152px;
  -webkit-animation: people 1s 1s forwards cubic-bezier(0.06, 0.78, 0.65, 1.01);
          animation: people 1s 1s forwards cubic-bezier(0.06, 0.78, 0.65, 1.01);
}
.index1_right--c3 {
  left: 45px;
  bottom: 50px;
  -webkit-transform: translateY(-150%);
          transform: translateY(-150%);
  -webkit-animation: letter 2.4s 1.6s forwards ease-out;
          animation: letter 2.4s 1.6s forwards ease-out;
}

input[type=checkbox].checkbix[data-size=large] + label > span {
  width: 20px;
  height: 20px;
}

.index1_left {
  z-index: 1;
}

.logo {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  display: inline-block;
  margin-bottom: 24px;
}
.logo--c2 {
  position: absolute;
  left: 2px;
  top: -4px;
  -webkit-animation: wobble 4.5s 2s infinite;
          animation: wobble 4.5s 2s infinite;
}

@-webkit-keyframes letter {
  0% {
    -webkit-transform: translateY(-150%) scale(0.9);
            transform: translateY(-150%) scale(0.9);
  }
  45% {
    -webkit-transform: translateY(-15%) scale(0.9);
            transform: translateY(-15%) scale(0.9);
  }
  50% {
    -webkit-transform: translateY(10%) scale(0.9);
            transform: translateY(10%) scale(0.9);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateY(10%) scale(0.9);
            transform: translateY(10%) scale(0.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(10%) translateX(-150%) scale(0.7);
            transform: translateY(10%) translateX(-150%) scale(0.7);
    opacity: 0;
  }
}

@keyframes letter {
  0% {
    -webkit-transform: translateY(-150%) scale(0.9);
            transform: translateY(-150%) scale(0.9);
  }
  45% {
    -webkit-transform: translateY(-15%) scale(0.9);
            transform: translateY(-15%) scale(0.9);
  }
  50% {
    -webkit-transform: translateY(10%) scale(0.9);
            transform: translateY(10%) scale(0.9);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateY(10%) scale(0.9);
            transform: translateY(10%) scale(0.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(10%) translateX(-150%) scale(0.7);
            transform: translateY(10%) translateX(-150%) scale(0.7);
    opacity: 0;
  }
}
@-webkit-keyframes people {
  0% {
    -webkit-transform: translateX(86px) translateY(-317px);
            transform: translateX(86px) translateY(-317px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(86px) translateY(98px);
            transform: translateX(86px) translateY(98px);
    opacity: 1;
  }
}
@keyframes people {
  0% {
    -webkit-transform: translateX(86px) translateY(-317px);
            transform: translateX(86px) translateY(-317px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(86px) translateY(98px);
            transform: translateX(86px) translateY(98px);
    opacity: 1;
  }
}
@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  1% {
    -webkit-transform: rotate(-9deg);
            transform: rotate(-9deg);
  }
  2% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  3% {
    -webkit-transform: rotate(9deg);
            transform: rotate(9deg);
  }
  4% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  5% {
    -webkit-transform: rotate(-9deg);
            transform: rotate(-9deg);
  }
  6% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  1% {
    -webkit-transform: rotate(-9deg);
            transform: rotate(-9deg);
  }
  2% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  3% {
    -webkit-transform: rotate(9deg);
            transform: rotate(9deg);
  }
  4% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  5% {
    -webkit-transform: rotate(-9deg);
            transform: rotate(-9deg);
  }
  6% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.input-shadow {
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
}

.no-shadow {
  -webkit-box-shadow: 0 0 0 !important;
          box-shadow: 0 0 0 !important;
}

#serachform {
  display: inline-block;
  margin-left: 16px;
}
#serachform .input-box {
  position: relative;
  display: inline-block;
  margin: 14px 0;
  padding-right: 0;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
}
#serachform .input-box input {
  font-weight: inherit;
  background: white;
  border: 0;
  padding: 12px 11px;
  font-size: 1.7rem;
  color: #6E6E6E;
  letter-spacing: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 132px;
}
#serachform .input-box button {
  background: transparent;
  display: inline-block;
  border: 0;
  position: absolute;
  right: 4px;
  height: 100%;
  top: 0;
  cursor: pointer;
  color: #5FBAA6;
}
#serachform .boxt {
  width: 100%;
}
#serachform .boxt input {
  max-width: none;
}
#serachform .outinput {
  text-align: left;
  margin: 15px 0;
  min-height: 25px;
}
#serachform .outinput label {
  font-size: 1.7rem;
  color: #1FA090;
}
#serachform .outinput input[type=checkbox].checkbix + label > span {
  border: 1px solid #1FA090;
}
#serachform .outinput input[type=checkbox].checkbix:checked + label > span {
  background: white;
  border: 1px solid #1FA090;
}
#serachform .outinput input[type=checkbox].checkbix:checked + label > span:before {
  top: -5px !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
}

.greenbtn {
  font-weight: 500;
  padding: 3px 8px;
  background: #5FBAA6 !important;
  border: 4px #65CCC7 solid !important;
  border-radius: 10px;
  display: inline-block;
  letter-spacing: 3.5px;
  font-size: 2rem;
  -webkit-box-shadow: 0 8px 0 #32A597;
          box-shadow: 0 8px 0 #32A597;
  -webkit-transition: 0.08s;
  transition: 0.08s;
  color: white !important;
}
.greenbtn img {
  width: 18px;
  vertical-align: middle;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.greenbtn:hover {
  -webkit-transform: translateY(7px);
          transform: translateY(7px);
  -webkit-box-shadow: 0 3px 0 #32A597;
          box-shadow: 0 3px 0 #32A597;
  text-decoration: none;
}

.subtitle {
  margin-bottom: 56.7px;
}
.subtitle--c1 {
  font-weight: 500;
  color: #366EB2;
  font-size: 4rem;
  margin-bottom: 20px;
  letter-spacing: 3px;
}
.subtitle--c2 {
  font-size: 2.2rem;
  letter-spacing: 2px;
  color: #6E6E6E;
  line-height: 1.4;
}

.gray_box {
  background: #F8F8F8;
  margin: 6px;
  max-width: 46%;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.gray_box h2 {
  color: #828282;
  margin-top: 16px;
  font-size: 2.4rem;
  letter-spacing: 1.5px;
}
.gray_box address {
  display: inline;
}

#first {
  margin-bottom: 89px;
}
#first .gray_box:before {
  -webkit-transition: 0.18s ease-in;
  transition: 0.18s ease-in;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  border-radius: 100%;
  background: #FFECA0;
  visibility: hidden;
}
#first .gray_box--gr:before {
  background: #65CCC7;
}
#first .gray_box:hover {
  text-decoration: none;
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
#first .gray_box:hover:before {
  display: block;
  width: 150%;
  height: 150%;
  visibility: visible;
}
#first .gray_box:hover.gray_box--gr h2 {
  color: white;
}
#first .gray_box:hover.col-6 img {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}

.gr-btn {
  background: #4bbcb1;
  border-radius: 23px;
  margin: 26px 30px 29px;
  color: white;
  padding: 4px 7px 0 3px;
  letter-spacing: 3px;
  line-height: 0;
  font-size: 2.3rem;
  -webkit-transition: 0.05s;
  transition: 0.05s;
  -webkit-box-shadow: 0 11px 0 #32a597;
          box-shadow: 0 11px 0 #32a597;
}
.gr-btn:hover {
  color: white;
  text-decoration: none;
  -webkit-box-shadow: 0 5px 0 #32a597;
          box-shadow: 0 5px 0 #32a597;
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
}
.gr-btn img {
  height: 60px;
  vertical-align: middle;
}

#where {
  margin-bottom: 84px;
}
#where .col-md,
#where .col-md-4 {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  padding: 16px 0;
  font-size: 1.8rem;
  letter-spacing: 1.5px;
  line-height: 1.5;
  color: #4B4B4B;
  text-align: center;
}

#second {
  margin-bottom: 80px;
}
#second .gray_box {
  padding: 16px 0;
}
#second .gray_box_title, #second li {
  border-bottom: 1px solid #B2B2B2;
}
#second li {
  padding: 16px 22px;
}
#second li:hover {
  background: #FFFAE6;
  text-decoration: none;
  color: inherit;
}
#second li p {
  margin-top: 0;
  margin-bottom: 10px;
  max-width: 25rem;
  font-size: 1.8rem;
}
#second li p, #second li .c2 {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  letter-spacing: 1.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#second li > a, #second li span {
  letter-spacing: 1.5px;
  max-width: 23.5rem;
  font-size: 1.6rem;
  color: #878787;
  min-height: 15px;
  display: inline-block;
}
#second .gray_box_gr, #second .gray_box_gr span {
  color: #366EB2;
  font-size: 1.4rem;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}
#second .gray_box_gr {
  float: right;
}
#second .more {
  margin-top: 16px;
  color: #5FBAA6;
  font-size: 1.8rem;
}

#third {
  background: #F7F8F8;
  padding: 55px 10px 95px;
}
#third img {
  margin-bottom: 10px;
}
#third section {
  background: white;
  padding: 30px 15px 32px 35px;
  margin-bottom: 15px;
}
#third h4, #third h5 {
  margin-left: 49px;
  font-size: 1.9rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 2px;
}
#third h4::before, #third h5::before {
  color: white;
  width: 35px;
  height: 35px;
  position: absolute;
  top: 50%;
  -webkit-transform: translate3d(-129%, -50%, 0);
          transform: translate3d(-129%, -50%, 0);
  left: 0;
  line-height: 32px;
  margin-right: 12px;
  display: inline-block;
  text-align: center;
  border-radius: 100%;
}
#third h4 {
  font-size: 2.1rem;
  color: #39AA9F;
  margin-bottom: 25px;
}
#third h4::before {
  content: "Q";
  background: #39AA9F;
}
#third h5 {
  color: #4B4B4B;
}
#third h5::before {
  content: "A";
  background: #6e6e6e;
}

.gray-footer .der {
  background: #F7F8F8;
}

.der {
  overflow: hidden;
}
.der-c1 {
  top: -50%;
  left: -5%;
}
.der-c2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.der-c3 {
  position: absolute;
  left: 40%;
  top: 17%;
}

.gray_box_title {
  font-weight: 500;
  color: #6e6e6e;
  font-size: 2.8rem;
  text-align: center;
  vertical-align: middle;
  letter-spacing: 3px;
  padding-bottom: 20px;
}
.gray_box_title, .gray_box_title img {
  vertical-align: middle;
}
.gray_box_title img, .gray_box_title img img {
  height: 37px;
  max-width: 65px;
  margin-right: 10px;
  -webkit-transform: translateY(-8%);
          transform: translateY(-8%);
}

.gray_box_com {
  color: #4B4B4B;
}

footer {
  margin-top: -2px;
  padding: 50px 0 0 0;
  background: #5FBAA6;
}
footer li {
  font-weight: 500;
  font-size: 2rem;
  color: #FFEFAE;
  letter-spacing: 1.8px;
  line-height: 2;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
footer li a {
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 1.5px;
  color: white;
}

.footer-logo {
  margin-bottom: 35.8px;
}

.footer-loginbox_greenbtn--c1 {
  margin-right: 20px;
}
.footer-loginbox a {
  font-size: 1.7rem;
  padding: 10px 13px;
}

.floatnav {
  z-index: 4;
  text-align: center;
  position: fixed;
  top: 61%;
  opacity: 1;
  right: 30px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.floatnav.active {
  opacity: 1;
}
.floatnav.active #gotop {
  opacity: 1;
}
.floatnav img {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.floatnav #gotop {
  opacity: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#env {
  -webkit-animation: wobble 4s 2s infinite;
          animation: wobble 4s 2s infinite;
  min-height: 49px;
  cursor: pointer;
  -webkit-transform: rotate(1deg);
          transform: rotate(1deg);
  -webkit-transition: 0.15s;
  transition: 0.15s;
  margin-bottom: 10px;
  vertical-align: bottom;
}
#env img {
  position: absolute;
  bottom: 0;
  display: none;
}
#env .img--c2 {
  display: block;
}
#env .note {
  overflow: hidden;
  position: absolute;
  bottom: 4px;
  left: 6px;
}
#env .note a {
  -webkit-transition: 0.15s;
  transition: 0.15s;
  -webkit-transform: translateY(360%);
          transform: translateY(360%);
  text-align: center;
  display: block;
  background: white;
  font-size: 1.6rem;
  color: #6E6E6E;
  letter-spacing: 2px;
  line-height: 1.4;
  width: 53px;
  padding: 10px 5px;
  border: 1px solid #5FBAA6;
}
#env .note a:hover {
  text-decoration: none;
  background: #FFEFAC;
}
#env .note .note-c3 {
  padding-bottom: 45px;
}
#env.open {
  -webkit-transform: rotate(0);
          transform: rotate(0);
  -webkit-animation: none;
          animation: none;
}
#env.open img {
  display: block;
}
#env.open .img--c2 {
  display: none;
}
#env.open .note a {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

#num {
  background: #FF7963;
  color: white;
  font-size: 1.8rem;
  border-radius: 100px;
  padding: 2px 6.3px;
  position: absolute;
  right: 4px;
  top: -7px;
}

#topword {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  margin-top: -10px;
}

#gotop {
  cursor: pointer;
}
#gotop .topbg {
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  content: "";
  position: absolute;
  left: 20%;
  top: 32%;
  width: 60%;
  height: 117%;
  opacity: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 239, 174, 0.0117647059)), color-stop(55%, #FFEFAE));
  background: linear-gradient(to top, rgba(255, 239, 174, 0.0117647059), #FFEFAE 55%);
}

.modal-dialog {
  margin: 0 auto 0;
  max-width: 950px;
}

.select-box {
  min-height: 100px;
}

.ui-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ui-lsit-name {
  width: 15%;
  color: #898989;
  font-size: 1.8rem;
  text-align: center;
  padding: 18px 0;
  display: inline-block;
  border-right: 0.83px solid #B5B5B5;
  margin-right: 18px;
}

.ui-lsit-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 0px 15px;
}
.ui-lsit-option .tab-content {
  display: block;
}

.ui-lsit-option ul li {
  display: inline-block;
  vertical-align: top;
  min-width: 13%;
}
.ui-lsit-option ul li:nth-child(2), .ui-lsit-option ul li:nth-child(3) {
  min-width: 16%;
}

#select-ui input[type=checkbox].checkbix:checked + label > span {
  background: #5FBAA6 !important;
}

#select-ui input[type=checkbox].checkbix + label > span {
  border: 0.1rem solid #ccc !important;
}

#select-ui input[type=checkbox].checkbix + label {
  color: #6B7070 !important;
  font-size: 1.5rem;
  cursor: pointer;
}

.flex .col-3 {
  -ms-flex-item-align: center;
      align-self: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 28%;
          flex: 0 0 28%;
}

#select-ui input.form-control.form-control-sm.selectstyle {
  margin: 10px 0;
  width: 80%;
}

.modal-dialog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#newsearch .modal-head .mob-icon:after, #newsearch .modal-head .mob-icon:before {
  background: #707070;
}

select#range {
  width: 19%;
  margin-right: 6%;
  float: left;
  font-size: 0.9rem;
  color: inherit;
}

#select-ui input.form-control.space-input {
  width: 36%;
  margin-right: 1%;
  float: left;
  text-align: center;
}

span.space-input2 {
  font-size: 1.4rem;
  margin-right: 1%;
  float: left;
  text-align: center;
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
}

#range-box {
  display: inline-block;
  top: -5px;
}
#range-box input::-webkit-input-placeholder {
  font-size: 1.4rem;
}
#range-box input::-moz-placeholder {
  font-size: 1.4rem;
}
#range-box input:-ms-input-placeholder {
  font-size: 1.4rem;
}
#range-box input::-ms-input-placeholder {
  font-size: 1.4rem;
}
#range-box input::placeholder {
  font-size: 1.4rem;
}

#newsearch .modal-content {
  margin-top: 9%;
  font-size: 1rem;
  padding: 0;
  width: 100%;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

#newsearch {
  top: -3px;
}
#newsearch .modal-head {
  background: #FFE680;
}
#newsearch .modal-head p {
  text-align: center;
  font-size: 1.7rem;
  color: #898989;
  letter-spacing: 1.5px;
  padding: 6px;
}
#newsearch .modal-head button {
  position: absolute;
  top: 6px;
  right: 10px;
}

a#nav01, a#nav02, a#nav03, a#nav04, a#nav05, a#nav06, a#nav07, a#nav08, a#nav09, a#nav10 {
  font-size: 1.5rem;
  font-weight: inherit;
  padding: 0;
  border: none;
  color: #6B7070;
  background-color: transparent;
}
a#nav01 span, a#nav02 span, a#nav03 span, a#nav04 span, a#nav05 span, a#nav06 span, a#nav07 span, a#nav08 span, a#nav09 span, a#nav10 span {
  display: inline-block;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  margin-left: 6px;
}

#newsearch input[type=checkbox].checkbix[data-shape=circled] + label > span {
  border-radius: 100%;
}

.ui-lsit-option.else {
  display: none;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  z-index: 1;
  border-bottom: none;
  padding: 0;
  position: absolute;
  background: white;
  width: 109%;
  text-align: center;
  left: -20%;
  margin-top: 10px;
}
.ui-lsit-option.else ul {
  width: 100%;
}
.ui-lsit-option.else li {
  margin: 0;
  display: block;
  cursor: pointer;
}
.ui-lsit-option.else li:hover {
  background: #EFEFEF;
}
.ui-lsit-option.else li input[type=checkbox].checkbix + label {
  padding: 8px 0;
  display: block;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  letter-spacing: 1.3px;
}
.ui-lsit-option.else li label > span {
  display: none !important;
}
.ui-lsit-option.else img {
  position: absolute;
  right: 5px;
  top: 4px;
}

.ui-lsit-option.else.rii {
  width: 83%;
  left: -12%;
}

#fts {
  width: 175%;
  left: -64%;
}
#fts li {
  width: 49%;
  display: inline-block;
}
#fts .fts-c1 {
  width: 100%;
}
#fts .fts-c1n {
  border-right: 1px solid #E9E9E9;
}

#m0Cht {
  margin: 0 !important;
  width: 100% !important;
  padding: 9px 7px;
  letter-spacing: 1.3px;
}

#select-ui .else input[type=checkbox].checkbix:checked + label {
  background: #FFF1BA;
}

#select-ui .else input[type=checkbox].checkbix + label {
  font-size: 1.3rem;
}

.ui-lsit-option.else ul {
  padding-top: 0;
}

.ui-list-wh {
  background: #EFEFEF;
}

.ui-lsit-option ul {
  padding: 19px 0 0;
  margin: 0;
  list-style-type: none;
  border: 0;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.last-btn {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -1px;
  border-bottom: none;
  padding: 25px 0 25px 0;
}
.last-btn .btn {
  font-size: 2.4rem;
  color: white;
  letter-spacing: 1.5px;
  padding: 10px 12px;
  background: #5FBAA6;
  border-radius: 3.8px;
}
.last-btn .btn--c1 {
  min-width: 22%;
}
.last-btn .btn--c2 {
  font-size: 1.8rem;
  position: absolute;
  right: 15px;
  background: #707070;
}
.last-btn .btn--c2 img {
  margin-right: 12px;
}
.last-btn .btn--c2 img, .last-btn .btn--c2 span {
  vertical-align: middle;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex .col-7 {
  -webkit-box-flex: 70%;
      -ms-flex: 70%;
          flex: 70%;
}

.flex .col-3 {
  -ms-flex-item-align: center;
      align-self: center;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  padding-right: 0;
  font-size: 1.4rem;
}

.ui-list .fa-angle-down {
  margin-left: 5px;
  font-weight: bold;
}

#recent-search {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-size: 1.4rem;
}
#recent-search .no-search {
  padding: 10px 0;
  background: white;
  text-align: center;
}
#recent-search ul {
  z-index: 2;
  display: none;
  position: absolute;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  width: 157px;
  top: 21px;
}
#recent-search li {
  font-size: 1.4rem;
}
#recent-search li a {
  padding: 6px 3px;
  display: block;
  background: white;
  color: #366EB2;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#recent-search li a:hover {
  background: #FFFAE6;
  text-decoration: none;
}
#recent-search li a::before {
  content: ".";
  margin-right: 5px;
}
#recent-search a {
  color: #6E6E6E;
}

#search2 {
  padding-top: 28px;
  margin-bottom: 54px;
}
#search2 .breadcrumb {
  background: transparent;
  font-size: 1.5rem;
  color: #7B7B7B;
}
#search2 .breadcrumb a {
  color: #7B7B7B;
}
#search2 .h1 {
  color: #366EB2;
  letter-spacing: 2px;
  padding: 0 20px;
}
#search2 .input-box input::-webkit-input-placeholder {
  color: #5a5959;
}
#search2 .input-box input::-moz-placeholder {
  color: #5a5959;
}
#search2 .input-box input:-ms-input-placeholder {
  color: #5a5959;
}
#search2 .input-box input::-ms-input-placeholder {
  color: #5a5959;
}
#search2 .input-box input::placeholder {
  color: #5a5959;
}
#search2 .select-ui {
  letter-spacing: 0.6px;
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.2rem;
}
#search2 .select-ui-nows {
  display: inline-block;
}
#search2 .select-ui-nows li {
  margin-bottom: 5px;
  display: inline-block;
  border: 1px solid rgba(130, 130, 130, 0.6);
  margin-right: 10px;
  padding: 3px 8px;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  border-radius: 3.8px;
}
#search2 .select-ui-nows li:hover {
  background: rgba(193, 247, 229, 0.6);
}
#search2 .select-ui-nows a {
  font-size: 1.4rem;
  color: #575757;
}
#search2 .select-ui-nows a:hover {
  text-decoration: none;
}
#search2 .select-ui-nows span {
  margin-left: 8px;
  color: #5FBAA6;
}

.search-tab.logo-blue {
  display: none;
}
.search-tab.logo-blue img {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  margin-left: 10px;
}

.flow {
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.flow.active {
  position: fixed;
  background-color: white;
  z-index: 99;
  top: 27px;
  padding: 0;
  width: 100%;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  -webkit-animation: floatup 0.3s ease-out;
          animation: floatup 0.3s ease-out;
}
.flow.active .search-main {
  -webkit-box-shadow: 0 0 0;
          box-shadow: 0 0 0;
  padding: 0px 0 7px;
}
.flow.active .search-tab {
  -webkit-box-shadow: 0 0 0;
          box-shadow: 0 0 0;
  width: 172px;
}
.flow.active .search-tab.active {
  background-color: transparent;
}
.flow.active .search-tab.active span {
  color: #5FBAA6;
}
.flow.active .search-tab.active #Path_4812, .flow.active .search-tab.active #Path_5187, .flow.active .search-tab.active #Path_4338, .flow.active .search-tab.active #Path_5194, .flow.active .search-tab.active #Path_5193, .flow.active .search-tab.active #Path_5195, .flow.active .search-tab.active #Path_4337 {
  fill: #5FBAA6;
}
.flow.active .search-tab span {
  font-size: 1.5rem;
}
.flow.active .search-tab svg {
  width: 19px;
}
.flow.active #Group_2425 {
  width: 27px;
}
.flow.active .select-ui-nows a {
  font-size: 1.2rem;
}
.flow.active .input-box input {
  padding: 11px 13px;
}
.flow.active #serachform .input-box button {
  height: 88%;
}
.flow.active #serachform #search-more {
  height: 90%;
}
.flow.active .logo-blue {
  display: inline-block;
}
.flow.active #serachform .boxt #search-more a {
  padding-top: 14px;
}

@-webkit-keyframes floatup {
  0% {
    -webkit-transform: translateY(-80%);
            transform: translateY(-80%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes floatup {
  0% {
    -webkit-transform: translateY(-80%);
            transform: translateY(-80%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
#worklist {
  margin-bottom: 90px;
}
#worklist .upp a {
  margin-right: 25.5px;
  color: #575757;
  font-size: 1.4rem;
}
#worklist .upp .desc, #worklist .upp .asc {
  color: #FF8B78;
}
#worklist .upp .desc span, #worklist .upp .asc span {
  display: inline-block;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
#worklist .upp .desc.gray {
  color: #575757;
}
#worklist .upp .asc span {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
#worklist .d-flex {
  margin-bottom: 14px;
}
#worklist .d-flex .text-center {
  color: #8A8A8A;
  font-size: 1.4rem;
  padding-bottom: 0;
}
#worklist .d-flex .text-center h2 {
  line-height: 1.3;
}
#worklist .bn {
  color: #8A8A8A;
}
#worklist .bn .bnimg {
  margin: 10px 0 28px;
}
#worklist .bn img {
  width: 100%;
}
#worklist .bn .page-info .dropdown-toggle {
  background: transparent;
  color: #8A8A8A;
  border: 0;
  font-size: 1.6rem;
  padding: 2px;
  margin: 0 30px;
}
#worklist .bn .page-info > .row > div:nth-last-child(2) {
  margin-right: 15.8px;
}
#worklist .select-style a {
  display: block;
  text-align: center;
  color: #666;
  font-size: 1.4rem;
  margin-bottom: 5px;
}

#wlist > li {
  margin-bottom: 26px;
  font-size: 1.6rem;
}
#wlist > li > .row {
  background: white;
  border: 0.6px solid rgba(176, 176, 176, 0.368627451);
  border-radius: 5px;
  padding: 25px 40px;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-left: 7px solid #FFE680;
  -webkit-transition: 0.25s;
  transition: 0.25s;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
#wlist > li > .row:hover {
  border-left: 7px solid #5FBAA6;
}
#wlist .list-name {
  font-size: 2.2rem;
  letter-spacing: 1.4px;
  display: inline;
}
#wlist .list-name a {
  color: #366EB2;
}
#wlist .list-name-box {
  margin-bottom: 7px;
}
#wlist .list-name-box .reply {
  padding-left: 55px;
}
#wlist .list-name-box .reply a {
  padding: 2px 10px;
  background: #FF8B78;
  color: white;
  border-radius: 4px;
  font-size: 1.2rem;
}
#wlist .list-name-box .reply a:hover {
  text-decoration: none;
}
#wlist .list-name-box p {
  color: #B4B4B4;
  letter-spacing: 1.3px;
  font-size: 1.4rem;
}
#wlist .list-name-box .col-md-7 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 26px;
}
#wlist .company {
  margin-bottom: 9px;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  overflow: hidden;
}
#wlist .company a {
  white-space: nowrap;
  color: #575757;
  letter-spacing: 1.3px;
  font-size: 1.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
#wlist .company ul {
  margin-left: 16px;
  overflow: hidden;
  max-height: 24px;
  min-width: 84px;
}
#wlist .company ul li {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 1.5rem;
  padding: 4px 11px;
  background: #FFFAE6;
  color: #FF8B78;
  letter-spacing: 0.5px;
  border-radius: 100px;
}
#wlist .list-main {
  margin-bottom: 7px;
  font-size: 1.7rem;
  letter-spacing: 1.2px;
}
#wlist .money {
  padding: 3px;
  padding-right: 29.2px;
  border-right: 1px solid #C3C3C3;
  color: #FF8B78;
}
#wlist address {
  padding-left: 29.2px;
}
#wlist address a {
  color: #575757;
}
#wlist .work-des {
  margin: 10px 0 20px;
  color: #949494;
  font-size: 1.6rem;
  letter-spacing: 1.2px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition: 0.05s;
  transition: 0.05s;
}
#wlist .work-des.active {
  line-height: 1.5;
  text-overflow: none;
  white-space: pre-wrap;
  overflow: initial;
}
#wlist .readm {
  -ms-flex-item-align: end;
      align-self: flex-end;
  margin: 10px 0 20px;
}
#wlist .read-more {
  color: #949494;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  display: block;
}
#wlist .read-more:hover {
  text-decoration: none;
  color: #366EB2;
}
#wlist .read-more.active {
  color: #366EB2;
  height: 100%;
}
#wlist .read-more.active span {
  -webkit-transform: rotate(180deg) translateY(-3px) scale(0.6);
          transform: rotate(180deg) translateY(-3px) scale(0.6);
}
#wlist .read-more span {
  display: inline-block;
  margin-left: 12.7px;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
}
#wlist .welfare {
  overflow: hidden;
  max-height: 24px;
}
#wlist .welfare a {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 1.3rem;
  background-color: #E7FFF8;
  margin-right: 10px;
  padding: 4px 20px;
  border-radius: 3px;
  color: #575757;
}
#wlist .bee {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#wlist .bee > .text-right a {
  color: #B4B4B4;
}
#wlist .bee > a {
  display: block;
  color: white;
  background: #B4B4B4;
  border-radius: 3.5px;
  padding: 8px 0;
  text-align: center;
  margin-bottom: 5px;
  font-size: 1.7rem;
  -webkit-transition: 0.14s;
  transition: 0.14s;
}
#wlist .bee > a span {
  display: inline-block;
  letter-spacing: 12px;
  margin-left: 7px;
}
#wlist .bee > a svg {
  fill: white;
}
#wlist .bee > a:hover {
  text-decoration: none;
  background-color: #8a8a8a;
}
#wlist .bee .application {
  letter-spacing: 3.5px;
  background: #5FBAA6;
}
#wlist .bee .application.on {
  background: #8F8F8F;
}
#wlist .bee .application.on:hover {
  background: #8F8F8F !important;
}
#wlist .bee .application:hover {
  background: #4ec9ae;
}
#wlist .bee .join.active {
  background-color: #FFE680;
  color: #FF8B78;
}
#wlist .bee .join.active svg {
  fill: #FF8B78;
}
#wlist .bee .join.active span {
  letter-spacing: 7px;
  margin-left: 2px;
}
#wlist .bee .join.active img {
  width: 16px;
}
#wlist .bee p {
  position: absolute;
  right: 0;
  top: 0;
  color: #B4B4B4;
  font-size: 1.4rem;
  letter-spacing: 1.2px;
}

.collect .th1 {
  z-index: 1;
  font-size: 3.6rem;
  color: #5FBAA6;
  letter-spacing: 1.2px;
  margin-bottom: 12.5px;
}
.collect .th3 {
  z-index: 1;
  color: #333333;
  font-size: 2.2rem;
  letter-spacing: 2px;
  margin-bottom: 25px;
}
.collect .select-resume {
  margin-bottom: 50px;
}
.collect .select-resume h2 {
  color: #FF8B78;
  font-size: 1.8rem;
  letter-spacing: 1.2px;
  display: inline-block;
}
.collect .select-resume a {
  font-size: 1.8rem;
  letter-spacing: 1.2px;
}
.collect .select-resume select {
  cursor: pointer;
  margin-left: 15px;
  width: auto;
  height: auto !important;
  display: inline-block;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  padding: 11px 54px;
  color: #6E6E6E;
  font-size: 1.7rem;
  background-color: #F8F8F8;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.28);
  border: 0;
}

.collectlist {
  padding: 0;
}
.collectlist .col-md-12 {
  padding: 30px 0;
  font-size: 1.7rem;
  color: #333333;
  line-height: 1.7;
}
.collectlist .col-md-12 a {
  font-size: 2rem;
  color: #5FBAA6;
  letter-spacing: 1.5px;
  font-weight: 500;
}
.collectlist a.remove {
  position: absolute;
  font-size: 2rem;
  z-index: 1;
  right: 30px;
  top: 30px;
  color: #9B9B9B;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}
.collectlist a.remove:hover {
  text-decoration: none;
  color: #706d6d;
}
.collectlist .col-md-6 {
  padding: 17px;
}
.collectlist aside {
  font-size: 1.6rem;
  line-height: 1.9;
  color: #333333;
  border: 1px solid #5FBAA6;
  border-top: 9px solid #FFE680;
  padding: 30px 23px 10px;
  background-color: white;
}
.collectlist aside a {
  color: #333333;
}
.collectlist .work-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.5;
}
.collectlist .work-name span {
  font-size: 2.2rem;
}
.collectlist .comp-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-bottom: 8px;
  line-height: 1.5;
  margin-bottom: 10px;
  border-bottom: 1px solid #5FBAA6;
}
.collectlist .comp-name a {
  font-size: 1.8rem;
}
.collectlist .welfare {
  max-height: 60px;
  overflow: hidden;
}
.collectlist .welfare ul {
  display: inline;
}
.collectlist .welfare li {
  display: inline-block;
}
.collectlist .welfare li:after {
  content: "、";
}
.collectlist .welfare li:last-child {
  content: "";
}
.collectlist .application3 {
  color: white;
  background-color: #5FBAA6;
  padding: 4px 47px;
  font-size: 2rem;
  border-radius: 3.87px;
  display: inline-block;
  letter-spacing: 1.5px;
  margin-top: 10px;
  -webkit-transition: 0.13s;
  transition: 0.13s;
}
.collectlist .application3:hover {
  text-decoration: none;
  background-color: #55BFB5;
}

section .test-box {
  padding: 63px 0 101px;
}
section .test {
  background: white;
  border: 1px solid #5FBAA6;
  padding: 35px 52px 42px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
section .test .col-xl-8 {
  font-size: 2.7rem;
  color: #366EB2;
  line-height: 1.8;
  text-align: center;
}
section .test a {
  display: inline-block;
  color: white;
  background: #366EB2;
  padding: 7px 37px 10px;
  font-size: 2.4rem;
  -webkit-transition: 0.13s;
  transition: 0.13s;
  border-radius: 3px;
}
section .test a:hover {
  text-decoration: none;
  background-color: #235899;
}

#navbar-toggler {
  margin-right: 0 !important;
}
#navbar-toggler .mob-icon {
  width: 20px;
  height: 4px;
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
  background-color: white;
  display: block;
  margin-bottom: 5px;
}
#navbar-toggler.active > .mob-icon2 {
  background: 0;
}
#navbar-toggler.active > .mob-icon1 {
  -webkit-transform: translateY(9px) rotate(45deg);
  transform: translateY(9px) rotate(45deg);
}
#navbar-toggler.active > .mob-icon3 {
  -webkit-transform: translateY(-9px) rotate(-45deg);
  transform: translateY(-9px) rotate(-45deg);
}

.dropdown-menu {
  max-height: 101px;
  overflow: hidden;
  overflow-y: scroll;
}

.loadingsvg {
  -webkit-animation: loadingsvg 0.8s infinite;
          animation: loadingsvg 0.8s infinite;
  width: 40px;
  vertical-align: middle;
}

button:focus {
  outline: 0px;
}

#loadingIMG {
  font-size: 1.8rem;
  color: #2b8c77;
  letter-spacing: 1.5px;
  padding: 40px 25px;
  display: none;
}

header{
  position: sticky;
  top:28px;
}

@media (max-width:767px) {
  header{
      top:0;
  }
} 


@-webkit-keyframes loadingsvg {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loadingsvg {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.flow.active .fac-box {
  display: none !important;
}

.fac-false {
  margin: 39px 0 0;
}

.fac-text {
  padding: 0 0 39px;
  margin-top: -10px;
  color: #A7A7A7;
  font-size: 1.5rem;
}

.fac-box {
  color: #6E6E6E;
  letter-spacing: 1.2px;
  padding-left: 6px;
}
.fac-box .row {
  margin-right: -20px;
}
.fac-box .col-md {
  padding-right: 17px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
  padding-bottom: 20px;
}
.fac-box label {
  border: 1px solid #DCDDDD;
  text-align: center;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  line-height: 1.4;
  padding: 6px 0;
  font-size: 1.4rem;
  cursor: pointer;
  height: 100%;
  display: block;
}
.fac-box label span {
  color: #A7A7A7;
  font-size: 1.3rem;
  font-weight: 300;
  display: block;
}
.fac-box label:hover {
  background: #E7FFF8;
}
.fac-box .close {
  font-size: 1.7rem;
  position: absolute;
  color: #32A597;
  right: 0;
  cursor: pointer;
  z-index: 1;
  top: 20px;
}

.fac-p {
  font-size: 1.7rem;
  margin: 17px 0;
  line-height: 1.4;
  letter-spacing: 2px;
}
.fac-p span {
  display: inline-block;
  color: #32A597;
  margin: 0 10px;
}

@media screen and (max-width: 767px) {
  #stock {
    z-index: 1;
  }
  #where {
    margin-top: 63px;
  }
  #where .gray_box {
    margin: 0;
    font-size: 1.7rem;
  }
  .gr-img-r {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  .gr-btn {
    border-radius: 17px;
    margin: 17px auto 19px;
    max-width: 220px;
    padding: 3px 7px 1px 3px;
    font-size: 1.9rem;
  }
  .gr-btn img {
    height: 52px;
  }
  .gr-res {
    -webkit-transform: translateX(-6px);
            transform: translateX(-6px);
    display: inline-block;
  }
  .gray_box--border {
    border-top: 1px solid #cacaca;
    border-bottom: 1px solid #cacaca;
  }
  .fac-false {
    margin-top: 26px;
  }
  .fac-false img {
    width: 57px;
  }
  #where .gray_box {
    max-width: none;
  }
  .fac-p {
    font-size: 1.6rem;
    letter-spacing: 1.5px;
    padding-right: 14px !important;
  }
  .fac-box {
    margin: 0 33px;
    padding-top: 6px;
  }
  .fac-box .row {
    margin-right: -15px;
  }
  .fac-box .col-md {
    padding-right: 15px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    padding-bottom: 13px;
  }
  .fac-box .close {
    top: 0;
  }
  #third {
    padding-top: 32px;
  }
  #third img {
    width: 35px;
  }
  #third h4, #third h5 {
    margin-left: 23px;
    font-size: 1.6rem;
  }
  #third h4::before, #third h5::before {
    width: 30px;
    height: 30px;
    line-height: 27px;
  }
  #third h4 {
    margin-bottom: 20px;
  }
  .index1_left {
    padding-top: 17px;
  }
  #exam {
    background: white;
  }
  .last-btn-list {
    position: fixed;
    width: 100vw;
    background: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    bottom: 0;
    left: 0;
    padding: 15px 8px 15px 17px;
  }
  .last-btn-list .last-btn {
    padding: 0;
  }
  .last-btn-list .btn--c1 {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
  .last-btn-list .btn--c2 {
    display: block;
    margin-left: 30px;
    position: relative;
  }
  .last-btn-list .btn--c2 img {
    margin: 0 10px;
  }
  #gotop {
    padding: 16px 0px;
  }
  
  header nav li {
    border-bottom: 1px solid white;
    padding: 0;
  }
  header nav li a {
    padding: 20px;
    display: block;
  }
  header nav li .socail {
    border: 0;
  }
  .worksearch {
    background: #F2F2F2;
  }
  html > body {
    padding-top: 0 !important;
  }
  html .toplinkzone {
    display: none !important;
  }
  #index1, #search2 {
    height: auto;
    margin-bottom: 28px;
  }
  #index1 .logo, #search2 .logo {
    margin: 23px 0 19px;
  }
  #index1 .logo img, #search2 .logo img {
    max-width: 198px;
  }
  #index1 .logo--c2, #search2 .logo--c2 {
    width: 10%;
    left: 0px;
    top: -1px;
  }
  #index1 {
    margin-bottom: 52px;
  }
  .index1_left, .index1_right {
    width: 100%;
  }
  .subtitle {
    margin-bottom: 19px;
  }
  .subtitle--c1 {
    font-size: 2.1rem;
    margin-bottom: 10px;
  }
  .subtitle--c2 {
    font-size: 1.5rem;
    line-height: 1.3;
  }
  #serachform {
    z-index: 1;
    display: block;
    margin: 0 33px;
  }
  #serachform .input-box {
    display: block;
    margin: 5px 0 8px;
  }
  #serachform .input-box input {
    width: 100%;
    max-width: none;
    font-size: 1.5rem;
    text-align: left !important;
  }
  #serachform #gosearch {
    right: 0;
    position: relative;
    display: block;
    width: 100%;
    font-size: 1.6rem;
    border-width: 4px !important;
    border-radius: 6px;
    margin-top: 10px;
  }
  #serachform #gosearch img {
    width: 4.3%;
    max-width: 13px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #search-more.d-md-none {
    margin-top: 19px;
    text-align: right;
    font-size: 1.4rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-left: auto;
  }
  #search-more.d-md-none a {
    color: #6E6E6E;
  }
  .der-c1 {
    width: 100%;
    height: auto;
  }
  .der-c2 {
    width: 104%;
  }
  .der-c3 {
    left: 65%;
    top: 17%;
    width: 13%;
    height: auto;
  }
  #first > .row, #where > .row {
    padding: 0 33px;
  }
  #first {
    margin-bottom: 36px;
  }
  #first .gray_box.col-12 {
    max-width: none;
    margin: 0 0 30px 0;
  }
  #first .gray_box {
    margin: 2% 0;
    max-width: 48%;
  }
  #first .gray_box h2 {
    font-size: 1.6rem;
    margin: 4px 0 20px;
  }
  #first .col-md-6.row {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  #first .col-md-6.row img {
    width: 69%;
    height: auto;
    margin: 17px auto 0;
  }
  footer {
    padding: 33px 0 23px;
  }
  footer .copyright{
    font-weight: 400;
   font-size: 1.6rem;
   letter-spacing: 1.5px;
   line-height: 1.2;
   color: white;
   padding: 23px 12px 30px 12px;
}

  footer .col-12.col-md {
    display: none;
    max-width: 257px;
    margin: auto;
  }
  footer.active {
    border-bottom: 16px solid #39AA9F;
    padding-bottom: 30px;
  }
  footer.active .col-12.col-md {
    display: block;
  }
  footer ul {
    text-align: right;
    margin-bottom: 0;
  }
  footer li {
    text-align: left;
    display: inline-block;
    font-size: 1.6rem;
    width: 49%;
  }
  footer li:first-child {
    width: 100%;
    display: block;
    margin-top: 22px;
    border-bottom: 0.5px solid #FFFFFF;
  }
  footer li a {
    font-size: 1.3rem;
  }
  .footer-logo {
    width: 47%;
    margin: 0 auto 17px;
  }
  .footer-loginbox {
    text-align: center;
  }
  .footer-loginbox a {
    min-width: 86px;
    background: #39AA9F !important;
    letter-spacing: 1.2px;
    font-size: 1.1rem;
    padding: 6px 0;
    border-radius: 5px;
    border-width: 4px !important;
    -webkit-box-shadow: 0 6px #32A597;
            box-shadow: 0 6px #32A597;
    width: 22%;
    text-align: center;
    letter-spacing: 1.2px;
  }
  .footer-loginbox a:first-child {
    margin-right: 11px;
  }


  #fold {
    text-align: center;
    padding: 22px 0 23px;
  }
  #fold div {
    display: inline-block;
    font-size: 2rem;
    padding: 8px;
    border-radius: 100%;
    background: white;
    color: #5FBAA6;
    margin: auto;
  }
  .active #fold div {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .worksearch .floatnav {
    bottom: 0;
    top: auto;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    background: #4BBCB1;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    opacity: 1;
  }
  .worksearch .floatnav > div {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
  .worksearch .floatnav .replya {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33%;
            flex: 0 0 33%;
  }
  .worksearch .floatnav a {
    color: white;
    font-size: 1.8rem;
    letter-spacing: 1.5px;
    display: block;
    padding: 16px 12px;
    border-right: 1px solid white;
  }
  .worksearch .floatnav p {
    color: white;
    font-size: 1.8rem;
    letter-spacing: 1.5px;
  }
  .worksearch .floatnav #env {
    -webkit-transform: rotate(0);
            transform: rotate(0);
    min-height: auto;
    -webkit-animation: none;
            animation: none;
    margin-bottom: 0;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 37%;
            flex: 0 0 37%;
  }
  .worksearch .floatnav #env img, .worksearch .floatnav #env .note {
    display: none !important;
  }
  .worksearch .floatnav #env a {
    padding-left: 37px;
  }
  .worksearch .floatnav #num {
    left: 10%;
    top: 29% !important;
    right: auto !important;
  }
  #newsearch .modal-head {
    background: white;
  }
  #newsearch .modal-head p {
    color: #5FBAA6;
    font-size: 1.8rem;
    padding: 9px 0;
  }
  #newsearch .modal-head .close {
    opacity: 1;
  }
  #newsearch .modal-head button {
    opacity: 1;
    right: 24px;
  }
  #newsearch .modal-head .mob-icon:after, #newsearch .modal-head .mob-icon:before {
    background: #5FBAA6;
    width: 22px;
  }
  #newsearch .modal-content {
    margin-top: 51px;
    -webkit-box-shadow: 0 0 0;
            box-shadow: 0 0 0;
    border: 0;
    margin-bottom: 87px;
  }
  #newsearch .modal-content .ui-lsit-option {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #newsearch .modal-content .ui-lsit-option li {
    width: 31%;
    border: 1px solid #5FBAA6;
    text-align: center;
    margin: 0 2% 9px 0;
  }
  #newsearch .modal-content .ui-lsit-option li:nth-child(3n+3) {
    margin-right: 0;
  }
  #newsearch .modal-content .ui-lsit-option li label {
    padding: 6px 0;
    display: block;
    margin: 0;
  }
  #newsearch .modal-content .ui-lsit-option li label span {
    display: none;
  }
  #newsearch .modal-content .ui-lsit-option .newnav li {
    width: 100%;
    border: 0;
    text-align: left;
  }
  #newsearch .modal-content .ui-lsit-option .newnav li .nav-link {
    color: #898989;
    font-size: 1.8rem;
  }
  #newsearch .modal-content .ui-lsit-option .newnav > li {
    margin-right: 0;
  }
  #newsearch .modal-content .ui-lsit-option.else {
    position: relative;
    display: block;
    left: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    width: 100%;
  }
  #newsearch .modal-content .ui-lsit-option.else ul {
    text-align: left;
  }
  #newsearch .modal-content .ui-lsit-option.else li {
    width: 31%;
    border: 1px solid #5FBAA6;
    text-align: center;
    display: inline-block;
  }
  #newsearch .modal-content .ui-lsit-option.else li:nth-child(3n+3) {
    margin-right: 0;
  }
  #newsearch .modal-content .ui-lsit-option.else input[type=checkbox].checkbix + label {
    font-size: 1.5rem;
  }
  #newsearch .modal-content #select-ui input[type=checkbox].checkbix:checked + label {
    background-color: #5FBAA6;
    color: white !important;
  }
  #newsearch .modal-content .ui-lsit-name {
    width: 100%;
    border: 0;
    text-align: left;
    padding: 0;
  }
  #newsearch .modal-content .ui-list {
    background: white;
    padding: 5px 5px 0;
  }
  #newsearch .modal-content .last-btn {
    text-align: left;
    margin-bottom: 11px;
  }
  #newsearch .modal-content .last-btn .btn--c1 {
    min-width: 77%;
    margin-right: 15px;
  }
  #newsearch .modal-content .last-btn .btn--c2 {
    margin-left: 13px;
    position: relative;
  }
  #newsearch .modal-content .last-btn .btn--c2 img {
    margin: 0 6px;
  }
  #search2 {
    background: white;
    margin-bottom: 7px;
    padding-top: 10px;
  }
  #search2 .bigger {
    padding: 0 32px;
    margin-bottom: 15px;
  }
  #search2 .select-ui {
    padding: 0 19px;
    height: 30px;
    margin-bottom: 5px;
    overflow: hidden;
  }
  #search2 .select-ui span {
    display: none;
  }
  #search2 .select-ui-nows li {
    margin-bottom: 13px;
  }
  #search2 .breadcrumb {
    padding: 0;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: 0;
  }
  #search2 .breadcrumb li {
    font-size: 1rem;
  }
  #search2 .mid {
    padding: 0;
  }
  #search2 .mid .input-box {
    padding: 0;
  }
  #search2 .h1 {
    z-index: 1;
    margin: 0 0 21px;
    font-size: 2.7rem;
  }
  #search2 .h1 img {
    width: 150px;
    margin: auto;
    display: block;
  }
  #search2 #search-more {
    margin-top: 4px;
    margin-right: 16px;
  }
  #search2 .flow.active {
    top: 0;
  }
  #search2 .flow.active .logo-blue {
    display: none;
  }
  #search2 .flow.active .select-ui {
    margin-top: 13px;
    padding: 0;
  }
  #search2 .flow.active .search-main {
    padding: 0;
  }
  #search2 .flow.active #serachform {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 12px 18px 0;
  }
  #search2 .flow.active #serachform .input-box {
    margin: 0 8px 0 0;
  }
  #search2 .flow.active #serachform .input-box input {
    font-size: 1.3rem;
    padding: 8px;
  }
  #search2 .flow.active #serachform .input-box button {
    padding: 0 2px;
  }
  #search2 .flow.active #serachform .input-box button span {
    display: inline-block;
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  #search2 .flow.active #serachform #gosearch {
    height: 33px;
    right: 0;
    margin-top: 0;
    font-size: 1.3rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 64px;
            flex: 0 0 64px;
    padding: 0;
    letter-spacing: 1.2px;
    margin-left: 2px;
    border-width: 4px !important;
    -webkit-box-shadow: 0 4px 0 #32A597;
            box-shadow: 0 4px 0 #32A597;
  }
  #search2 .flow.active #serachform #gosearch img {
    display: none;
  }
  #search2 .flow.active #serachform #search-more {
    padding-right: 0;
  }
  #search2.collect .th1 {
    font-size: 2.9rem;
    color: #366EB2;
    letter-spacing: 2px;
  }
  #search2.collect .th3 {
    font-size: 1.5rem;
  }
  #search2.collect .select-resume {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 0;
    padding-bottom: 30px;
  }
  #search2.collect .select-resume h2 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    margin-top: 22px;
    font-size: 1.3rem;
  }
  #search2.collect .select-resume select {
    margin: AUTO;
    width: 55%;
    text-indent: 30%;
  }
  #worklist {
    margin-bottom: 10px;
    padding-top: 27px;
    background: #F2F2F2;
    padding-right: 24px;
    padding-left: 24px;
  }
  #worklist .d-flex .text-center {
    font-size: 1.3rem;
  }
  #worklist .form-group select {
    height: auto;
    font-size: 1.7rem;
    letter-spacing: 1.5px;
    text-indent: 42%;
    border: 0;
    background-color: #F8F8F8;
    color: #6E6E6E;
    -webkit-box-shadow: 0 3px 6px rgba(139, 139, 139, 0.28);
            box-shadow: 0 3px 6px rgba(139, 139, 139, 0.28);
  }
  #worklist .form-group option {
    background: white;
  }
  #worklist .bnimg {
    margin-bottom: 10px !important;
  }
  #wlist > li > .row {
    padding: 21px 17px 2px;
  }
  #wlist > li > .row .reply {
    position: absolute;
    right: -21px;
    text-align: right;
    top: -23px;
  }
  #wlist > li > .row .company {
    margin-bottom: 9px;
    padding-bottom: 15px;
    border-bottom: 1px solid #5FBAA6;
  }
  #wlist > li > .row .list-name {
    font-size: 2rem;
  }
  #wlist > li > .row .list-main {
    font-size: 1.6rem;
    margin-bottom: 17px;
  }
  #wlist > li > .row .money {
    padding-right: 9px;
  }
  #wlist > li > .row address {
    padding-left: 4px;
  }
  #wlist > li > .row .welfare {
    margin-bottom: 22px;
  }
  #wlist > li > .row .welfare a {
    font-size: 1.4rem;
  }
  #wlist > li > .row .bee {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  #wlist > li > .row .bee .application {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
  #wlist > li > .row .bee .join {
    padding: 9px;
    margin-left: 17px;
  }
  .collectlist {
    padding-bottom: 20px;
  }
  .collectlist .col-md-6 {
    padding: 10px 17px;
  }
  .collectlist aside {
    border: 0;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }
  .collectlist .work-name span {
    font-size: 2rem;
    color: #366EB2;
  }
  .collectlist .comp-name a {
    font-size: 1.5rem;
  }
  section .test-box {
    padding: 20px 3px;
  }
  section .test {
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    border: 0;
    padding: 25px 10px 20px;
  }
  section .test .col-xl-8 {
    font-size: 1.8rem;
  }
  section .test .col-xl-8 span {
    color: #828282;
  }
  section .test a {
    font-size: 2.2rem;
    margin-top: 19px;
    padding: 10px 37px 12px;
  }
  .coll {
    background: #F2F2F2;
  }
  .coll .der {
    background: white;
  }
}

footer .copyright{
  font-weight: 400;
font-size: 1.6rem;
letter-spacing: 1.5px;
line-height: 1.2;
color: white;
padding: 23px 12px 30px 12px;
}

@media (min-width: 768px) {
  .footer-loginbox a {
    margin-bottom: 18px;
  }
  .id-h2 img {
    height: 100%;
  }
  #where .gray_box.col-md-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 31%;
            flex: 0 0 31%;
  }
  #where .grr-l {
    z-index: 1;
    -webkit-box-shadow: -2px 3px 6px rgba(0, 0, 0, 0.2);
            box-shadow: -2px 3px 6px rgba(0, 0, 0, 0.2);
    border-bottom-left-radius: 7px;
    border-top-left-radius: 7px;
  }
  #where .grr-r {
    -webkit-box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2);
            box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2);
    border-bottom-right-radius: 7px;
    border-top-right-radius: 7px;
  }
  .gray_box--border {
    border-left: 1px solid #cacaca;
    border-right: 1px solid #cacaca;
  }
  .nav-item {
    margin-right: 3px;
  }
  #first .col-md-6.row img {
    width: 51%;
    height: auto;
    margin: 0 auto;
  }
  .bgblue {
    background: #5FBAA6;
    height: 28px;
    position: fixed;
    top: 0;
    color: transparent;
    width: 100%;
    z-index: 3;
  }
  #index-1 {
    background: url(../images/yellow-s.svg) no-repeat;
    background-position: right bottom;
    background-size: 52%;
  }
  #index-1::before, #index-1::after {
    display: none;
  }
  #serachform .c1 {
    margin-right: 17px;
  }
  #serachform #gosearch {
    position: absolute;
    right: -148px;
    margin-left: 22px;
    height: 86%;
  }
  #serachform #search-more {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding-left: 20px;
  }
  #serachform #search-more a {
    font-size: 1.6rem;
    display: inline-block;
    padding-top: 18px;
    margin-right: 22px;
    color: #366EB2;
    letter-spacing: 1px;
  }
  #serachform #search-more::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 100%;
    left: 0;
    top: 8%;
    width: 1px;
    height: 86%;
    position: absolute;
    background: #D1D1D1;
  }
  footer .col-md-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 28%;
            flex: 0 0 28%;
    margin-right: 67px;
  }
  #search2 .h1 {
    margin-top: 29.3px;
    margin-bottom: 37px;
    font-size: 4rem;
  }
  #search2 .h1 img {
    width: 37%;
  }
  #search2::before, #search2::after {
    min-height: 400px;
    content: "";
    display: block;
    position: absolute;
    height: 57vh;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    z-index: -1;
  }
  #search2 .select-ui-nows {
    padding-left: 6px;
  }
  #search2 #serachform {
    margin-left: -8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  #search2 #serachform br {
    display: none;
  }
  #search2 #serachform .boxt {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 38%;
            flex: 0 0 38%;
  }
  #search2 #serachform .boxt #search-more a {
    padding-top: 17px;
    font-size: 1.4rem;
  }
  #search2 #serachform .boxt--long {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 59.5%;
            flex: 0 0 59.5%;
  }
  #search2 #serachform .input-box {
    margin: 0;
    padding: 0;
    margin-left: 15px;
  }
  #search2 #serachform .input-box input {
    font-size: 1.4rem;
    max-width: none;
  }
  #search2 #serachform #gosearch {
    position: relative;
    height: 100%;
    right: 0;
    top: 0;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 15%;
            flex: 0 0 15%;
    font-size: 1.7rem;
  }
  #search2 #serachform #gosearch img {
    width: 16px;
  }
  #search2 .active #serachform .input-box input {
    padding: 7px 11px;
  }
  #search2 .active #serachform .boxt #search-more a {
    padding-top: 12px;
  }
  #search2 .active #serachform #gosearch {
    -webkit-box-shadow: 0 0 0;
            box-shadow: 0 0 0;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 13%;
            flex: 0 0 13%;
  }
  #search2 .active #serachform #gosearch:hover {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3ea991 !important;
  }
  #search2 .active .select-ui {
    margin-top: 13px;
  }
  .search-main {
    background: white;
    z-index: 3;
    padding: 34px 52px 14px;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }
  .search-tab {
    vertical-align: middle;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 205px;
    height: 51px;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    background: white;
    -webkit-transition: 0.15s;
    transition: 0.15s;
  }
  .search-tab--c3 {
    z-index: 2;
    margin-left: -3px;
  }
  .search-tab--c4 {
    z-index: 1;
    margin-left: -3px;
  }
  .search-tab:hover {
    text-decoration: none;
    background-color: #FFF4CA;
  }
  .search-tab span {
    color: #6E6E6E;
    font-size: 1.9rem;
    letter-spacing: 1.5px;
  }
  .search-tab svg {
    margin-right: 10px;
  }
  .search-tab.active {
    z-index: 3;
    background: #FFE680;
  }
  #wlist > li > .row > .col-md-9 {
    padding-right: 40px;
  }
  #wlist .bee {
    margin-bottom: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .gr-btn {
    padding: 14px 7px 11px 3px;
    border-radius: 16px;
    font-size: 1.8rem;
  }
  .gr-btn img {
    height: 30px;
  }
  .fac-box .col-md {
    padding-right: 20px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33%;
            flex: 0 0 33%;
  }
  #index1 {
    margin-top: 44px;
    height: auto;
  }
  #index1 > div {
    width: 86%;
  }
  #search2 .flow.active .search-tab {
    width: 161px;
  }
  section .test .col-xl-8 {
    font-size: 2.3rem;
    color: #366EB2;
    margin-bottom: 18px;
    line-height: 1.5;
  }
}
@media (max-width: 991px) {
  #nav {
    left: 0;
    display: none;
    position: absolute;
    top: 51px;
    background: #4BBCB1;
    width: 100%;
    border-top: 15px solid #4BAFA6;
  }
  header {
    padding: 0;
    z-index: 1041;
  }
  header > .container > .row {
    padding: 14px 0;
  }
  header .social a {
    background: #A0A0A0;
    display: inline-block;
    border-radius: 5px;
    margin-right: 11px;
    padding: 4px 17px 4px 10px;
    margin: 12px 0;
    min-width: 179px;
  }
  header .social a img {
    height: 27.45px;
    margin-right: 12px;
  }
  header .social .ig {
    margin-top: 0;
  }
  header .social:hover a {
    background: #A0A0A0;
  }
  header .social:hover span {
    color: white !important;
  }
}
@media (min-width: 992px) {
  .footer-loginbox {
    white-space: nowrap;
  }
  #index1 {
    min-height: 552px;
  }
  #nav {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 71.666667%;
            flex: 0 0 71.666667%;
    max-width: 71.66667%;
  }
  header .col-md-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
            flex: 0 0 20%;
  }
  header .col-lg-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 10.333333%;
            flex: 0 0 10.333333%;
    max-width: 10.333333%;
  }
}
@media (max-width: 1199px) {
  #search2 {
    height: auto;
    margin-bottom: 28px;
  }
  #search2::before, #search2::after {
    content: "";
    position: absolute;
    display: block;
    top: 32px;
    height: 180px;
    background-repeat: no-repeat;
  }
  #search2::before {
    left: 0;
    width: 24%;
    background-size: contain;
    background-image: url(../images/index-sl.svg);
    background-position: left bottom;
  }
  #search2::after {
    top: 0;
    right: 0;
    width: 23%;
    height: 133px;
    background-image: url(../images/index-sr.svg);
    background-position: left bottom;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  footer li {
    font-size: 1.8rem;
  }
  footer li a {
    font-size: 1.3rem;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #index1 {
    max-height: 552px;
  }
  .index1_left {
    width: 57%;
  }
  .index1_right {
    width: 41%;
  }
  .index1_right img {
    width: 100%;
  }
  .index1_right img.index1_right--c2 {
    width: 86%;
    left: -45px;
  }
  .index1_right img.index1_right--c3 {
    left: 0;
  }
  header {
    padding: 0 10px 10px;
  }
  header nav li span, header nav li > a {
    font-size: 1.7rem;
  }
  .fac-box .col-md {
    padding-right: 20px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1035px;
  }
  .container.bigger {
    max-width: 1069px;
  }
  .container.mid {
    max-width: 1077px;
  }
  #first > .row, #second > .row, #third > .row, #where > .row {
    padding: 0 69px;
  }
  #search2 .h1 {
    margin-top: 66.3px;
    margin-bottom: 60px;
    font-size: 7rem;
  }
  #search2 .h1 img {
    width: initial;
  }
  #search2 .seoh1 {
    font-size: 3.5rem;
  }
  #search2 .fach1 {
    font-size: 4.5rem;
  }
  #search2.hot::before {
    left: 0;
    width: 22%;
    top: 26px;
    background-image: url(../images/searchleft.svg);
    background-position: right;
  }
  #search2.hot::after {
    right: 0;
    width: 27%;
    height: 54vh;
    background-image: url(../images/searchright.svg);
    background-position: left;
  }
  #search2.reply::before {
    left: 0;
    width: 35%;
    top: 7%;
    height: 51vh;
    background-image: url(../images/reply-left.svg);
    background-size: contain;
    background-position: left;
  }
  #search2.reply::after {
    right: 0;
    width: 34%;
    height: 54vh;
    background-image: url(../images/reply-right.svg);
    background-size: contain;
    background-position: right top;
  }
  #search2.famous::before {
    left: 0;
    width: 49%;
    top: auto;
    bottom: 12px;
    height: 48vh;
    background-size: 77%;
    background-image: url(../images/famous-left.svg);
    background-position: left bottom;
  }
  #search2.famous::after {
    right: 0;
    width: 37%;
    height: 63vh;
    top: auto;
    bottom: 12px;
    background-image: url(../images/famous-right.svg);
    background-position: left bottom;
  }
  #search2.collect::before {
    left: 0;
    width: 23%;
    height: 63vh;
    top: 16%;
    background-size: contain;
    background-image: url(../images/collect-left.svg);
    background-position: left bottom;
  }
  #search2.collect::after {
    right: 0;
    width: 30%;
    height: 63vh;
    background-image: url(../images/collect-right.svg);
    background-position: right bottom;
  }
}
@media (min-width: 1300px) {
  #search2::before, #search2::after {
    max-height: none;
  }
}
@media (min-width: 1700px) {
  #index1 {
    height: 64vh;
    background: url(../images/yellow-b.svg) no-repeat;
    background-position: 84% 53%;
    background-size: 35%;
    margin-top: 39px;
  }
  #index1 .index1_right {
    height: 89%;
    margin-bottom: 5;
  }
}