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
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

:focus {
    outline: 0
}

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

ol,ul {
    list-style: none
}

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
}

#newsvg {
width: 15%;
}

#jumpshare , #jumpshare2  {
  font-size: 1.8rem;
}

.Event-description{
    word-break: break-all;
    font-size: 16px;
    color: #494949;
    font-weight: normal;
    font-family: 'Noto Sans TC';
    list-style-type: decimal;
    padding-left: 20px;
}

#jumpshare button.close span , #jumpshare2 button.close span {
    font-size: 3rem;
  }

  .col-auto.d-md-none.m-jway {
    text-align: center;
    font-size: 2rem;
    position: relative;
    top: 5vh;
}
.col-auto.d-md-none.m-jway a{
    color: #5fbaa6;
    top: 2vh;
}


#jumpshare .modal-content , #jumpshare2 .modal-content {
    background: url(../images/pr_bg.jpg) #fff;
    background-position-x: right;
    background-position-y: center;
    background-repeat: no-repeat;
    margin-top: 50px;

  }

  #jumpshare .modal-content  .modal-body, 
  #jumpshare2 .modal-content  .modal-body {
      padding: 0 50px 50px 50px;
      line-height: 150%;
   

  }


  #jumpshare .modal-content h5 ,   #jumpshare2 .modal-content h5 {
      font-size: 2.4rem;
      color:  #be570e;
      text-align: center;
      margin-bottom: 15px;
   
  }



  #jumpshare .modal-content p.two-em ,   #jumpshare2 .modal-content p.two-em {
    font-size: 2rem; 
   }

   #jumpshare .modal-content p , #jumpshare2 .modal-content p {
    word-break: break-all;
    font-size: 18px;
    font-weight: 300;
    color: #494949;
    font-family: 'Noto Sans TC';
   }

   #jumpshare .modal-content p.one-eight-em  ,#jumpshare2 .modal-content p.one-eight-em {
    font-size: 1.8rem; 
   }

   #jumpshare .modal-content p.bold , #jumpshare2 .modal-content p.bold {
   font-weight: bold;
   }

   #jumpshare .modal-content .linkstyle , #jumpshare2 .modal-content .linkstyle {
       color: #1b80c7;
       text-decoration: underline;

    }

    #jumpshare .modal-content .join-btn , #jumpshare2 .modal-content .join-btn {
      text-align: center;
      margin: 50px 0;

        }
     

    

    span.step-style {
        background: #77d8d2;
        color: #fff;
        margin-right: 5px;
        padding: 0 5px;
    }


#notice_info_share {
    padding-top: 30px;
    height: 297px;
    background: url(../images/new_bg.png);
    background-size: contain;
    background-position:center ;
    background-repeat: no-repeat;
}

#notice_info_share .master {
    color: #1483c2;
    font-size: 2.4rem;
    text-align: center;
}

#notice_info_share .share-btn  {
    justify-content: center;
    position: relative;
    top: 10vh;
}




#notice_info_share .share-btn a {

    color: #fff;
    font-size: 2.2rem;
    text-align: center;
    background: #7b99d6;
    padding: 6px 20px;
    border-radius: 5px;
    text-decoration: none;
    
}


#notice_info_share .share-btn a img {
margin-right: 3px;
transform: translateY(3px);
}

.attention_text{
    color: #00bcd4;
    font-size: 2.2rem;
    font-weight: 500;
    position: relative;
    line-height: 1.3;
}
.swal2-title img{
    width: 22px;
    position: relative;
    right: 5px;
    top: 3px;
}

.ios-fixed { display: none !important; }

@media (max-width: 532px) {

    .myligthBoxBg {
        max-height:100vh!important;
        height: 80vh!important;
        max-width: 90vw!important;
        min-width: 90%
    }

    header .social a {
        padding: 5px!important
    }
}

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,.23);
    box-shadow: 0 6px 13px rgba(0,0,0,.23)
}

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,.16);
    display: inline-block;
    color: white;
    font-size: 2rem;
    letter-spacing: 2px
}

.toggle-nav {
    overflow: hidden;
    transition: .2s;
    display: none;
    right: -187%;
    top: 64px;
    white-space: nowrap;
    position: absolute;
    background: white;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.16);
    box-shadow: 0 3px 6px rgba(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: 12px 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: .18s;
    transition: .18s;
    margin-right: 8px;
    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: 8px
}

.link_a--c1 img {
    margin-left: 5px
}

.link_a--c1:hover {
    background: #366EB2
}

#index1 {
    height: 70vh
}

.act {
    margin-left: 40px
}

#school-icon {
    display: block!important;
    bottom: 200px!important;
    transform: scale(1)!important
}
#fixed-school img{ display: block; max-width: 100%; width: 100%;}

a#fixed-school {
    position: fixed;
    top: 40%;
    transform: translateY(-250px);
    right: 40px;
    z-index: 99;
    -webkit-animation: wobble 2s 2s infinite;
    animation: wobble 4s 2s infinite;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
    -webkit-transition: .15s;
    transition: .15s;
}

.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: .15s;
    transition: .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--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(.06,.78,.65,1.01);
    animation: people 1s 1s forwards cubic-bezier(.06,.78,.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(.9);
    transform: scale(.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(.9);
        transform: translateY(-150%) scale(.9)
    }

    45% {
        -webkit-transform: translateY(-15%) scale(.9);
        transform: translateY(-15%) scale(.9)
    }

    50% {
        -webkit-transform: translateY(10%) scale(.9);
        transform: translateY(10%) scale(.9);
        opacity: 1
    }

    80% {
        -webkit-transform: translateY(10%) scale(.9);
        transform: translateY(10%) scale(.9);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(10%) translateX(-150%) scale(.7);
        transform: translateY(10%) translateX(-150%) scale(.7);
        opacity: 0
    }
}

@keyframes letter {
    0% {
        -webkit-transform: translateY(-150%) scale(.9);
        transform: translateY(-150%) scale(.9)
    }

    45% {
        -webkit-transform: translateY(-15%) scale(.9);
        transform: translateY(-15%) scale(.9)
    }

    50% {
        -webkit-transform: translateY(10%) scale(.9);
        transform: translateY(10%) scale(.9);
        opacity: 1
    }

    80% {
        -webkit-transform: translateY(10%) scale(.9);
        transform: translateY(10%) scale(.9);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(10%) translateX(-150%) scale(.7);
        transform: translateY(10%) translateX(-150%) scale(.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,.26);
    box-shadow: 0 0 8px rgba(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,.26);
    box-shadow: 0 0 8px rgba(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: 215px
}

#serachform .input-box button {
    background: transparent;
    display: inline-block;
    border: 0;
    position: absolute;
    right: 10px;
    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;
    margin-right: 8px
}

#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: .08s;
    transition: .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,.2);
    box-shadow: 0 3px 6px rgba(0,0,0,.2);
    overflow: hidden;
    -webkit-transition: .15s;
    transition: .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: .18s ease-in;
    transition: .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(.95);
    transform: scale(.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(.95);
    transform: scale(.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: .05s;
    transition: .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 {
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.2);
    box-shadow: 0 3px 6px rgba(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: .2s;
    transition: .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: 34px;
    height: 34px;
    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 67px;
    background: #5FBAA6
}

footer li {
    font-weight: 500;
    font-size: 2rem;
    color: #FFEFAE;
    letter-spacing: 1.8px;
    line-height: 2;
    -webkit-transition: .2s;
    transition: .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: 1;
    text-align: center;
    position: fixed;
    top: 61%;
    opacity: 0;
    right: 30px;
    -webkit-transition: .2s;
    transition: .2s
}

.floatnav.active {
    opacity: 1
}

.floatnav img {
    -webkit-transform: scale(.9);
    transform: scale(.9)
}

#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: .15s;
    transition: .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;
    display: none;
    opacity: 0;
    transition: all 0.5s ease;
    left: 6px
}

#env.open .note {
    opacity: 1;
    display: block;
    transition: all 0.5s ease;

}



#env .note a {
    -webkit-transition: .15s;
    transition: .15s;
    -webkit-transform: translateY(269%);
    transform: translateY(269%);
    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: .2s;
    transition: .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(#ffefae03),color-stop(55%,#FFEFAE));
    background: linear-gradient(to top,#ffefae03,#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: .83px solid #B5B5B5;
    margin-right: 18px
}

.ui-lsit-option {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding: 0 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: .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;
    -ms-grid-row-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: .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:-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,.5);
    box-shadow: 0 5px 15px rgba(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(.7);
    transform: scale(.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,.16);
    box-shadow: 0 3px 6px rgba(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: .15s;
    transition: .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;
    -ms-grid-row-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,.16);
    box-shadow: 0 3px 6px rgba(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: 35px
}

#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:-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: .6px;
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.2rem
}

#newinput>span {
    font-size: 1.4rem;
    color: #666;
    line-height: 22px;
    margin-right: 10px
}

#newinput>span>input {
    transform: translateY(2px);
    margin-right: 5px;
    width: 15px;
    height: 15px
}

#newinput input[type=checkbox] {
    border: 1px solid #5fbaa6;
    color: #5fbaa6;
    user-select: none
}

#newinput input[type=checkbox]:checked {
    color: yellow;
    background-color: #444
}

#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,.6);
    margin-right: 10px;
    padding: 3px 8px;
    -webkit-transition: .15s;
    transition: .15s;
    border-radius: 3.8px
}

#search2 .select-ui-nows li:hover {
    background: rgba(193,247,229,.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: .2s;
    transition: .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,.16);
    box-shadow: 0 3px 6px rgba(0,0,0,.16);
    -webkit-animation: floatup .3s ease-out;
    animation: floatup .3s ease-out
}

.flow.active .search-main {
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
    padding: 0 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: .6px solid #b0b0b05e;
    border-radius: 5px;
    padding: 25px 40px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.16);
    box-shadow: 0 3px 6px rgba(0,0,0,.16);
    border-left: 7px solid #FFE680;
    -webkit-transition: .25s;
    transition: .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: .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: .05s;
    transition: .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: .1s;
    transition: .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(.6);
    transform: rotate(180deg) translateY(-3px) scale(.6)
}

#wlist .read-more span {
    display: inline-block;
    margin-left: 12.7px;
    -webkit-transform: scale(.6);
    transform: scale(.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: .14s;
    transition: .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,.28);
    box-shadow: 0 3px 6px rgba(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: .1s;
    transition: .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:before {
    content: "、"
}

.collectlist .welfare li:first-child:before {
    display: none
}

.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: .13s;
    transition: .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: .13s;
    transition: .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: .15s;
    transition-duration: .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 .8s infinite;
    animation: loadingsvg .8s infinite;
    width: 40px;
    vertical-align: middle
}

button:focus {
    outline: 0
}

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

@-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: .1s;
    transition: .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
}

#else-name {
    margin-top: 15px;
    margin-left: 10px;
    font-size: 1.6rem
}

a#fixed-school.open {
    top: 15%;
}

.col-auto.m-jway {
    margin-top: 125px;
    text-align: center;
}


.col-auto.m-jway a {
   font-size: 2rem;
}

.close-btn {
    background: #4BBCB1;
    color: #fff;
    padding: 5px 20px;
    border-radius: 5px;
}

.close-btn:hover {
    color: #fff;
    text-decoration: none;
  
}

.m-jump-use {

    border-right: #fff solid 1px;
    color: #fff;
    font-size: 1.6rem;
    padding: 3px 0;

}

.swal2-actions {
    display: none !important;
}


/* @media screen and (max-width: 691px) {
    #notice_info_share {
        background: url(../images/cell-bg.svg);
        position: relative;
        background-repeat: no-repeat;
    }
} */


@media screen and (max-width: 767px) {

    .col-auto.m-jway {
        margin-top: 55px;
     
    }

    #raiders {
        padding-left:0;
        padding-right: 0
    }

    #raiders>ul {
        display: none;
        background: #fff
    }

    #raiders>ul li {
        width: 100%
    }

    header li#raiders:hover,header li#raiders:hover>a {
        background-color: transparent!important;
        color: #fff
    }

    #raiders>ul.vis {
        display: block
    }

    #raiders>ul.vis a {
        color: #4bbcb1
    }

    #raiders>ul.vis a:hover {
        color: #4bbcb1;
        background-color: #DBF2F0
    }

    #raiders .arrow {
        font-size: .8rem;
        margin-left: 8px;
        transform: translateY(-2px);
        display: inline-block
    }

    #raiders .arrow.vis {
        transform: rotate(180deg);
        display: inline-block
    }

    #fold-else {
        text-align: center;
        padding: 5px 0 15px 0
    }

    #second {
        margin-bottom: 0
    }

    #second .subtitle {
        margin-top: 60px
    }

    #fold-else>div {
        color: #5FBAA6;
        font-size: 1.4rem
    }

    .row.align-content-end.vis #fold-else {
        transform: rotate(180deg) translateY(10px)
    }

    .col-12.col-md.gray_box {
        max-width: 85%;
        margin: 0 auto 25px auto
    }

    .row.align-content-end.vis section.col-12.d-none.d-md-block {
        display: block!important
    }

    #stock {
        z-index: 1
    }

    article#article-box .row:before {
        display: none
    }

    article#article-box .row .col-md-6:last-child {
        padding-left: 15px!important;
        padding-right: 15px
    }

    .ar-main-box:hover .moretext {
        opacity: 0;
        display: none
    }

    .swiper-container {
        margin-bottom: 25px
    }

    .list>.row .col-md-4.align-self-center img {
        max-height: inherit!important
    }

    .list>.row {
        margin-left: 10px;
        margin-right: 10px
    }

    .list .ar-title a {
        line-height: 150%
    }

    #where {
        margin-top: 40px
    }

    #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;
        padding-bottom: 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 0
    }

    header nav li {
        border-bottom: 1px solid white;
        padding: 0
    }

    header nav li a {
        padding: 20px;
        display: block;
        text-shadow: none
    }

    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: 0;
        top: -1px
    }

    #index1 {
        margin-bottom: 52px
    }

    .index1_left,.index1_right {
        width: 100%
    }

    .subtitle {
        margin-bottom: 19px
    }

    .subtitle>p {
        margin-bottom: 5px
    }

    .subtitle--c1 {
        font-size: 2.1rem;
        margin-bottom: 10px
    }

    .subtitle--c2 {
        font-size: 1.5rem;
        line-height: 1.3
    }

    #article-box .col-6-title {
        font-size: 3rem
    }

    #article-box ul.news-list {
        margin-bottom: 20px;
        margin-top: 20px
    }

    article#article-box .swiper-container {
        margin-top: 25px
    }

    #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;
        padding-right: 55px;
        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 .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: .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 25%;
        flex: 0 0 25%
    }

    .worksearch .floatnav a {
        color: white;
        font-size: 1.6rem;
        letter-spacing: 1.5px;
        display: block;
        padding: 10px 0;
        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 33%;
        flex: 0 0 33%
    }

    .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 {
        width: 100%;
        margin-left: 15px
    }

    #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(.7);
        transform: scale(.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%
    }

    #newinput {
        justify-content: center
    }

    #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,.28);
        box-shadow: 0 3px 6px rgba(139,139,139,.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,.16);
        box-shadow: 0 3px 6px rgba(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,.16);
        box-shadow: 0 3px 6px rgba(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
    }

    .removeicon {
        font-size: 2rem!important;
        right: 50%!important;
        transform: translateX(450%)
    }

    /* #notice_info_share {
    background: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
    position: relative;
    top: 2vh;
    border: 2px solid #5fbaa6;
    } */

    #notice_info_share .master {
        color: #1483c2;
        line-height: 120%;
        font-size: 2.4rem;
        text-align: center;
        top: -2vh!important;
    }

    #notice_info_share .share-btn {
        justify-content: center;
        position: relative;
        top: 10vh;
    }
}



@media (min-width: 768px) {
    .footer-loginbox a {
        margin-bottom:18px
    }

    .id-h2 img {
        height: 100%
    }

    #where .grr-l {
        z-index: 1;
        -webkit-box-shadow: -2px 3px 6px rgba(0,0,0,.2);
        box-shadow: -2px 3px 6px rgba(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,.2);
        box-shadow: 2px 3px 6px rgba(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;
        padding-right: 50px;
        overflow: hidden
    }

    #search2 #serachform .input-box input#m0Cht {
        padding-right: 125px
    }

    #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,.16);
        box-shadow: 0 3px 6px rgba(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,.16);
        box-shadow: 0 3px 6px rgba(0,0,0,.16);
        background: white;
        -webkit-transition: .15s;
        transition: .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;
        font-size: 1.8rem;
        min-width: 45%
    }

    header .social a img {
        height: 27.45px;
        margin-right: 5px
    }

    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: 5px
    }

    .j-images {
        width: 100%!important
    }

    #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
    }

    article#article-box .row .col-md-6:last-child {
        padding-left: 0!important
    }
}

@media (min-width: 992px) and (max-width:1199px) {
    #index1 {
        max-height:552px
    }

    .j-images {
        width: 80%!important;
        left: 10%!important
    }

    .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
    }
}

article#article-box {
    background: #F7F8F8
}

article#article-box .row .col-md-6:last-child {
    padding-left: 50px
}

.list>.row {
    margin-bottom: 30px;
    background: #fff;
    box-shadow: #ccc 0 0 10px;
    border-radius: 10px;
    padding: 30px
}

.list>.row .col-md-4.align-self-center img {
    max-height: 200px
}

.list>.row .justify-content-end a {
    margin-left: 5px
}

.list .ar-title {
    margin-top: 15px;
    padding-bottom: 10px;
    border-bottom: #ccc solid 1px
}

.list .ar-title a {
    font-size: 2rem;
    color: #366EB2;
    letter-spacing: 1px
}

.ar-data {
    margin: 10px 0;
    font-size: 1.3rem;
    color: #ABAAAA
}

.ar-data img {
    transform: translateY(2px);
    margin-right: 5px
}

.tag-box {
    margin: 0;
    list-style-type: none;
    padding: 0
}

.tag-box li:after {
    content: '、';
    color: #5fbaa6
}

.tag-box li:last-child:after {
    content: '';
    display: none
}

.tag-box:before {
    content: url(../images/tag-solid.svg);
    width: 13px;
    height: 13px;
    display: inline-block
}

.tag-box li {
    display: inline-block;
    margin-right: 5px
}

.tag-box li a {
    color: #5fbaa6;
    font-size: 1.4rem
}

.ar-main {
    font-size: 1.6rem;
    margin-bottom: 15px;
    line-height: 150%;
    color: #707070;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box
}

#seemore {
    margin-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px
}

.ar-main-box {
    position: relative
}

.ar-main-box:hover .moretext {
    opacity: 1
}

.moretext {
    color: #FF8B78;
    position: absolute;
    bottom: 0;
    right: 5px;
    font-size: 1.6rem;
    opacity: 0
}

.moretext:hover {
    color: #FF8B78
}

#env.open #onew {
    padding: 10px 0!important;
    font-size: 1rem!important
}

ul.news-list {
    margin-top: 50px
}

ul.news-list li {
    padding: 10px 0;
    margin: 15px 0 0 0;
    border-bottom: #ccc dashed 2px
}

ul.news-list li a {
    font-size: 1.7rem;
    color: #878787;
    text-decoration: none
}

ul.news-list li a:hover {
    color: #FF8B78;
    text-decoration: none
}

ul.news-list li a img {
    margin-right: 5px
}

.playicon {
    width: 70px;
    height: 70px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 5
}

.swiper-pagination-bullet-active {
    background: #4BBCB1!important
}

.swiper-pagination-bullet {
    opacity: 1!important
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    background: #fff;
    width: 10px;
    height: 10px
}

a.seemore.g {
    font-size: 1.6rem;
    color: #39AA9F;
    border: #39AA9F solid 1px;
    border-radius: 20px;
    padding: 4px 15px;
    transition: all .5s ease
}

a.seemore.o {
    font-size: 1.6rem;
    color: #FF8B78;
    border: #FF8B78 solid 1px;
    border-radius: 20px;
    padding: 4px 15px;
    transition: all .5s ease
}

a.seemore.g span,a.seemore.o span {
    font-size: 2.6rem;
    display: inline-block;
    transform: translateY(3px)
}

a.seemore.o:hover {
    transition: all .5s ease;
    background: #FF8B78;
    color: #fff;
    text-decoration: none
}

a.seemore.g:hover {
    transition: all .5s ease;
    background: #39AA9F;
    color: #fff;
    text-decoration: none
}

.col-6-title {
    margin-bottom: 0;
    font-weight: 300;
    font-size: 3.5rem
}

.swiper-container {
    margin-top: 50px;
    overflow: hidden;
}

#article-box .row:before {
    content: '';
    width: 100%;
    height: 1px;
    background: #366EB2;
    position: absolute;
    top: 60px;
    opacity: .5
}

.line_a {
    width: 38px;
    height: 38px;
    background: url(../images/line.svg) #fff;
    background-size: contain;
    border-radius: 8px
}

.line_a:hover {
    width: 38px;
    height: 38px;
    background: url(../images/line_h.svg) #fff;
    background-size: contain;
    border-radius: 8px
}

#j-box {
    position: fixed;
    background: rgba(0,0,0,.35);
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2
}

.j-images {
    text-align: center;
    max-width: 900px;
    display: block;
    position: fixed;
    top: 25%;
    left: 25%;
    right: 25%
}

.removeicon {
    font-size: 2.5rem;
    color: #fff;
    background: #333;
    padding: 5px;
    display: inline-block;
    right: 10px;
    position: absolute;
    top: 10px;
    z-index: 3
}

.removeicon:hover {
    color: #fff;
    text-decoration: none
}

@media (max-width: 1079px) {
    .j-images {
        text-align:center;
        max-width: 800px;
        display: block;
        position: fixed;
        top: 25%;
        left: 5%
    }
}

@media (max-width: 800px) {
    .j-images {
        text-align:center;
        max-width: 750px;
        display: block;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%)
    }
}
@media (max-width: 996px) {
    #notice_info_share .master{
        color: #1483c2;
        font-size: 2.4rem;
        text-align: center;
        position: relative;
        /* top: 2.8vh; */
        padding: 0px 10px;
        line-height: 1.5;
    }
    #notice_info_share .share-btn {
        justify-content: center;
        position: relative;
        top: 4.5vh;
    }
    #notice_info_share {
        border-radius: 5px;
        -webkit-box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
        box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
        position: relative;
        top: 2vh;
        border: 2px solid #5fbaa6;
        margin-bottom: 44px;

        }
     
        #notice_info_share {
        background: url(../images/cell-bg.svg);
        background-size: 29%;
        background-position: right bottom;
        background-repeat: no-repeat;

    }
    
}

@media (max-width: 545px){
    #notice_info_share .share-btn {
    justify-content: center;
    position: relative;
    top: 2vh;
    }
    #notice_info_share {
        padding-top: 30px;
    }
    .col-auto.d-md-none.m-jway {
        text-align: center;
        font-size: 2rem;
        position: relative;
        top: 0vh;
    }
    #notice_info_share {
        padding-top: 30px;
        height: 280px;
     
    }
    #notice_info_share::before {
        background: white;
     
    }
}

@media (max-width: 390px){
  
.col-auto.d-md-none.m-jway {
    text-align: center;
    font-size: 2rem;
    position: relative;
    top: 0vh!important;
}
#notice_info_share {
    padding-top: 30px;
    height: 328px;
    }
.Mg-Tone{
    display: inline-block;
    bottom: 18px;
    margin-bottom: 11px;
    }
.col-auto.d-md-none.m-jway a {
    color: #5fbaa6;
    top: -1vh;
    }
    #notice_info_share .share-btn a {
        color: #fff;
        font-size: 2.2rem;
        text-align: center;
        background: #7b99d6;
        padding: 11px 24px;
        border-radius: 5px;
        text-decoration: none;
        display: inline-block;
        
    }
    #worklist {
        margin-bottom: 10px;
        padding-top: 42px;
        /* background: #F2F2F2; */
        padding-right: 24px;
        padding-left: 24px
    }
    #notice_info_share .master {
        color: #1483c2;
        font-size: 2rem;
        text-align: center;
        position: relative;
        top: 2.8vh;
        padding: 0px 10px;
        line-height: 1.5;
    }
    #notice_info_share {
        background: none;
        background: #fff;
    }
}