@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap");
@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
@import url("../css/bootstrap.min.css");
@import url("../css/animate.css");
@import url("../css/jquery.fancybox.min.css");
@import url("../css/owl.carousel.css");
@import url("../css/owl.theme.default.css");
@import url("../css/slick.css");
@import url("../css/jquery-ui-timepicker-addon.css");
@import url("../css/jquery-ui.css");
@import url("../css/cropper.min.css");
body {
  color: #333333;
  font-family: "Noto Sans TC", sans-serif;
  line-height: 1.5;
  letter-spacing: 0.08em;
  padding-top: 60px;
}
@media screen and (min-width: 992px) {
  body {
    padding-top: var(--header-height);
  }
}

img {
  max-width: 100%;
  height: auto;
}

a:hover, a:active, a:focus {
  text-decoration: none;
}

input::placeholder, textarea::placeholder {
  color: #cccccc;
}

#loadingDiv {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 2000;
}
#loadingDiv .loadingO {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  top: 35%;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.stickyWrapper {
  width: 100%;
  position: sticky;
  min-height: 100vh;
  top: 0;
}

.emptyData {
  font-size: 18px;
  color: #f04d4f;
  text-align: justify;
  margin-bottom: 10px;
}

.hurrySupply {
  display: inline-block;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(90deg, #F69495, #f04d4f);
  background-size: 300% 300%;
  animation: changeBGColor 5s ease infinite both;
  padding: 1px 5px;
}

.validation-summary-errors,
.field-validation-error {
  color: #f00 !important;
}

.input-validation-error {
  border: 1px solid #f00 !important;
}

.md-block {
  display: block;
}
@media screen and (min-width: 992px) {
  .md-block {
    display: none;
  }
}

.md-hidden {
  display: none !important;
}
@media screen and (min-width: 992px) {
  .md-hidden {
    display: block !important;
  }
}

@keyframes load5 {
  0%, 100% {
    box-shadow: 0em -2.6em 0em 0em #21a5b1, 1.8em -1.8em 0 0em rgba(33, 165, 177, 0.2), 2.5em 0em 0 0em rgba(33, 165, 177, 0.2), 1.75em 1.75em 0 0em rgba(33, 165, 177, 0.2), 0em 2.5em 0 0em rgba(33, 165, 177, 0.2), -1.8em 1.8em 0 0em rgba(33, 165, 177, 0.2), -2.6em 0em 0 0em rgba(33, 165, 177, 0.5), -1.8em -1.8em 0 0em rgba(33, 165, 177, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 165, 177, 0.7), 1.8em -1.8em 0 0em #21a5b1, 2.5em 0em 0 0em rgba(33, 165, 177, 0.2), 1.75em 1.75em 0 0em rgba(33, 165, 177, 0.2), 0em 2.5em 0 0em rgba(33, 165, 177, 0.2), -1.8em 1.8em 0 0em rgba(33, 165, 177, 0.2), -2.6em 0em 0 0em rgba(33, 165, 177, 0.2), -1.8em -1.8em 0 0em rgba(33, 165, 177, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 165, 177, 0.5), 1.8em -1.8em 0 0em rgba(33, 165, 177, 0.7), 2.5em 0em 0 0em #21a5b1, 1.75em 1.75em 0 0em rgba(33, 165, 177, 0.2), 0em 2.5em 0 0em rgba(33, 165, 177, 0.2), -1.8em 1.8em 0 0em rgba(33, 165, 177, 0.2), -2.6em 0em 0 0em rgba(33, 165, 177, 0.2), -1.8em -1.8em 0 0em rgba(33, 165, 177, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 165, 177, 0.2), 1.8em -1.8em 0 0em rgba(33, 165, 177, 0.5), 2.5em 0em 0 0em rgba(33, 165, 177, 0.7), 1.75em 1.75em 0 0em #21a5b1, 0em 2.5em 0 0em rgba(33, 165, 177, 0.2), -1.8em 1.8em 0 0em rgba(33, 165, 177, 0.2), -2.6em 0em 0 0em rgba(33, 165, 177, 0.2), -1.8em -1.8em 0 0em rgba(33, 165, 177, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 165, 177, 0.2), 1.8em -1.8em 0 0em rgba(33, 165, 177, 0.2), 2.5em 0em 0 0em rgba(33, 165, 177, 0.5), 1.75em 1.75em 0 0em rgba(33, 165, 177, 0.7), 0em 2.5em 0 0em #21a5b1, -1.8em 1.8em 0 0em rgba(33, 165, 177, 0.2), -2.6em 0em 0 0em rgba(33, 165, 177, 0.2), -1.8em -1.8em 0 0em rgba(33, 165, 177, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 165, 177, 0.2), 1.8em -1.8em 0 0em rgba(33, 165, 177, 0.2), 2.5em 0em 0 0em rgba(33, 165, 177, 0.2), 1.75em 1.75em 0 0em rgba(33, 165, 177, 0.5), 0em 2.5em 0 0em rgba(33, 165, 177, 0.7), -1.8em 1.8em 0 0em #21a5b1, -2.6em 0em 0 0em rgba(33, 165, 177, 0.2), -1.8em -1.8em 0 0em rgba(33, 165, 177, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 165, 177, 0.2), 1.8em -1.8em 0 0em rgba(33, 165, 177, 0.2), 2.5em 0em 0 0em rgba(33, 165, 177, 0.2), 1.75em 1.75em 0 0em rgba(33, 165, 177, 0.2), 0em 2.5em 0 0em rgba(33, 165, 177, 0.5), -1.8em 1.8em 0 0em rgba(33, 165, 177, 0.7), -2.6em 0em 0 0em #21a5b1, -1.8em -1.8em 0 0em rgba(33, 165, 177, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 165, 177, 0.2), 1.8em -1.8em 0 0em rgba(33, 165, 177, 0.2), 2.5em 0em 0 0em rgba(33, 165, 177, 0.2), 1.75em 1.75em 0 0em rgba(33, 165, 177, 0.2), 0em 2.5em 0 0em rgba(33, 165, 177, 0.2), -1.8em 1.8em 0 0em rgba(33, 165, 177, 0.5), -2.6em 0em 0 0em rgba(33, 165, 177, 0.7), -1.8em -1.8em 0 0em #21a5b1;
  }
}
@keyframes rollin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rollin_r {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes shake {
  10%, 30% {
    transform: translate3d(-1px, 0, 0) rotate(1deg);
  }
  31%, 40% {
    transform: translate3d(3px, -2px, 0) rotate(4deg);
  }
  51%, 60% {
    transform: translate3d(2px, 1px, 0) rotate(-3deg);
  }
  71%, 85% {
    transform: translate3d(-1px, 2px, 0) rotate(5deg);
  }
  86%, to {
    transform: translate3d(3px, -2px, 0) rotate(-1deg);
  }
}
@keyframes changeBGColor {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes railLeft {
  0% {
    -webkit-transform: translate3d(0%, 0%, 0);
    transform: translate3d(0%, 0%, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0%, 0);
    transform: translate3d(-50%, 0%, 0);
  }
}
@keyframes railUp {
  0% {
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
}
@keyframes railDown {
  0% {
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }
}
@keyframes changeGlass {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
}
@keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  }
  25% {
    border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
  }
  75% {
    border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
  }
}
@keyframes iconShining {
  0% {
    text-shadow: 0 0 1px #1ba1e6;
  }
  50% {
    text-shadow: 0 0 5px #44b0e7;
  }
  100% {
    text-shadow: 0 0 1px #1ba1e6;
  }
}
.closeModal {
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  padding: 0;
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 2;
  opacity: 0.5;
}
.closeModal:hover {
  opacity: 1;
}
.closeModal::before, .closeModal::after {
  content: "";
  display: block;
  width: 90%;
  height: 2px;
  background-color: #333333;
  position: absolute;
  top: 9px;
  left: 2px;
}
.closeModal::before {
  transform: rotate(-45deg);
}
.closeModal::after {
  transform: rotate(45deg);
}

.modalTitle {
  font-size: 22px;
  text-align: center;
}

.modal-body {
  padding: 40px 30px;
}

.btnControlWrapper {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.btnControlWrapper .clickBtn {
  display: inline-block;
  line-height: 1.2;
  letter-spacing: 0.05em;
  padding: 10px 20px;
  outline: none !important;
  box-shadow: none;
  border: none;
  background-color: var(--color-pink);
  border-radius: 5px;
  width: 100%;
  border-radius: 5px;
  text-align: center;
  margin: 0 5px;
}
.btnControlWrapper .clickBtn span {
  display: inline-block;
  font-size: 16px;
  color: #fff;
}
.btnControlWrapper .clickBtn.full {
  display: block;
  width: 100%;
  text-align: center;
}
.btnControlWrapper .clickBtn.orange {
  background-color: #f68b60;
}
.btnControlWrapper .clickBtn.warn {
  background-color: #ee3638;
}
.btnControlWrapper .clickBtn.gray {
  background-color: #b3b3b3;
}
.btnControlWrapper .clickBtn:hover {
  opacity: 0.7;
}
.btnControlWrapper .clickBtn.withArrow span {
  position: relative;
  padding-right: 20px;
}
.btnControlWrapper .clickBtn.withArrow span::before {
  content: "\e5c8";
  display: block;
  font-family: "Material Icons";
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  position: absolute;
  top: 0.05em;
  right: 0;
  transition: 0.3s;
}
.btnControlWrapper .clickBtn.withArrow:hover span::before {
  transform: translateX(5px);
}
.btnControlWrapper .clickBtn.withArrowB span {
  position: relative;
  padding-left: 20px;
}
.btnControlWrapper .clickBtn.withArrowB span::before {
  content: "\e5c4";
  display: block;
  font-family: "Material Icons";
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  position: absolute;
  top: 0.05em;
  left: 0;
  transition: 0.3s;
}
.btnControlWrapper .clickBtn.withArrowB:hover span::before {
  transform: translateX(-5px);
}
.btnControlWrapper .clickBtn.withView span {
  position: relative;
  padding-right: 26px;
}
.btnControlWrapper .clickBtn.withView span::before {
  content: "\e8f4";
  display: block;
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  top: 0em;
  right: 0;
  transition: 0.3s;
}
.btnControlWrapper .clickBtn.withView:hover span::before {
  transform: scale(1.2);
}

.loginWrapper {
  min-height: calc(100vh - 280px);
}
.loginWrapper .login-content {
  width: 100%;
  max-width: 900px;
  position: relative;
  margin: 30px auto;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

#loginModal, .loginWrapper {
  --frame-color: #13C7C8;
  --frame-color-light: #EBFFFF;
}
#loginModal .modal-content, #loginModal .login-content, .loginWrapper .modal-content, .loginWrapper .login-content {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
@media screen and (min-width: 992px) {
  #loginModal .modal-content, #loginModal .login-content, .loginWrapper .modal-content, .loginWrapper .login-content {
    display: flex;
  }
}
#loginModal .modal-content .loginPic, #loginModal .login-content .loginPic, .loginWrapper .modal-content .loginPic, .loginWrapper .login-content .loginPic {
  background-image: url(../img/login-bg-girl.svg);
  background-position: bottom 0px right 20px;
  background-size: 30%;
  background-repeat: no-repeat;
  background-color: var(--frame-color-light);
  position: relative;
  padding: 30px 25px;
  overflow: hidden;
}
@media screen and (min-width: 992px) {
  #loginModal .modal-content .loginPic, #loginModal .login-content .loginPic, .loginWrapper .modal-content .loginPic, .loginWrapper .login-content .loginPic {
    width: 340px;
    min-height: 520px;
    padding: 20px 20px;
    background-position: 50% 90%;
    background-size: auto 180px;
  }
}
#loginModal .modal-content .loginPic::before, #loginModal .modal-content .loginPic::after, #loginModal .login-content .loginPic::before, #loginModal .login-content .loginPic::after, .loginWrapper .modal-content .loginPic::before, .loginWrapper .modal-content .loginPic::after, .loginWrapper .login-content .loginPic::before, .loginWrapper .login-content .loginPic::after {
  content: "";
  display: none;
  position: absolute;
}
@media screen and (min-width: 992px) {
  #loginModal .modal-content .loginPic::before, #loginModal .modal-content .loginPic::after, #loginModal .login-content .loginPic::before, #loginModal .login-content .loginPic::after, .loginWrapper .modal-content .loginPic::before, .loginWrapper .modal-content .loginPic::after, .loginWrapper .login-content .loginPic::before, .loginWrapper .login-content .loginPic::after {
    display: block;
  }
}
#loginModal .modal-content .loginPic::before, #loginModal .login-content .loginPic::before, .loginWrapper .modal-content .loginPic::before, .loginWrapper .login-content .loginPic::before {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: var(--frame-color);
  position: absolute;
  top: 10%;
  right: -60px;
  opacity: 0.25;
}
#loginModal .modal-content .loginPic::after, #loginModal .login-content .loginPic::after, .loginWrapper .modal-content .loginPic::after, .loginWrapper .login-content .loginPic::after {
  width: 130px;
  height: 94px;
  background: url(../img/login-finger.svg) 50% 50%/130px 94px no-repeat;
  position: absolute;
  top: 12%;
  right: 0;
}
#loginModal .modal-content .loginPic .loginPicText, #loginModal .login-content .loginPic .loginPicText, .loginWrapper .modal-content .loginPic .loginPicText, .loginWrapper .login-content .loginPic .loginPicText {
  position: relative;
  top: 25%;
  z-index: 2;
}
#loginModal .modal-content .loginPic .loginPicText h3, #loginModal .login-content .loginPic .loginPicText h3, .loginWrapper .modal-content .loginPic .loginPicText h3, .loginWrapper .login-content .loginPic .loginPicText h3 {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4em;
}
@media screen and (min-width: 992px) {
  #loginModal .modal-content .loginPic .loginPicText h3, #loginModal .login-content .loginPic .loginPicText h3, .loginWrapper .modal-content .loginPic .loginPicText h3, .loginWrapper .login-content .loginPic .loginPicText h3 {
    font-size: 24px;
  }
}
#loginModal .modal-content .loginBox, #loginModal .login-content .loginBox, .loginWrapper .modal-content .loginBox, .loginWrapper .login-content .loginBox {
  padding: 20px 20px 50px;
}
@media screen and (min-width: 768px) {
  #loginModal .modal-content .loginBox, #loginModal .login-content .loginBox, .loginWrapper .modal-content .loginBox, .loginWrapper .login-content .loginBox {
    padding: 50px;
  }
}
@media screen and (min-width: 992px) {
  #loginModal .modal-content .loginBox, #loginModal .login-content .loginBox, .loginWrapper .modal-content .loginBox, .loginWrapper .login-content .loginBox {
    width: calc(100% - 340px);
  }
}

.or-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 17px;
  color: #999999;
  margin-top: 30px;
  margin-bottom: 30px;
}
.or-bar:before, .or-bar:after {
  content: "";
  border-top: 2px dashed #999999;
  flex: 1 0 20px;
}
.or-bar:before {
  margin-right: 20px;
}
.or-bar:after {
  margin-left: 20px;
}

.loginRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.loginRow .loginTitle {
  font-size: 24px;
  color: var(--frame-color);
}
.loginRow .switchLoginBtn {
  font-size: 18px;
  color: var(--frame-color);
  background-color: var(--frame-color-light);
  border: none;
  border-radius: 10px;
  padding: 7px 10px;
}
.loginRow .switchLoginBtn span {
  display: inline-block;
  position: relative;
  padding-right: 20px;
}
.loginRow .switchLoginBtn span::after {
  content: "\e5c8";
  font-family: "Material Icons";
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  top: 0.35em;
  right: 0;
}
.loginRow .switchLoginBtn:hover {
  background-color: var(--frame-color);
  color: #fff;
}
.loginRow .loginInputWrapper {
  width: 100%;
  border-radius: 5px;
  background-color: #fff;
  border: 2px solid #999999;
  box-shadow: none;
  outline: none;
  padding: 2px 10px 2px 45px;
  position: relative;
}
.loginRow .loginInputWrapper input {
  width: 100%;
  height: 40px;
  font-size: 18px;
  background: none;
  box-shadow: none;
  border: none;
  outline: none;
}
.loginRow .loginInputWrapper input[disabled] {
  cursor: not-allowed;
}
.loginRow .loginInputWrapper::before {
  content: "";
  display: block;
  font-size: 22px;
  font-family: fontAwesome;
  line-height: 1;
  color: #999999;
  position: absolute;
  top: 12px;
  left: 14px;
}
.loginRow .loginInputWrapper.account::before {
  content: "\f2bd";
}
.loginRow .loginInputWrapper.mail::before {
  content: "\f0e0";
}
.loginRow .loginInputWrapper.password::before {
  content: "\f023";
  left: 18px;
}
.loginRow label.rememberMelabel {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 0;
}
.loginRow label.rememberMelabel input[type=checkbox] {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin: 0 5px 0 0;
}
.loginRow label.rememberMelabel span {
  display: inline-block;
  font-size: 14px;
  color: #999999;
  vertical-align: middle;
}
.loginRow a.forgetPassword {
  display: inline-block;
  font-size: 14px;
  text-decoration: underline;
  color: var(--frame-color);
}
.loginRow .loginSubmit {
  display: block;
  width: 100%;
  font-size: 18px;
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #1ba1e6;
  border: none;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  background-color: var(--frame-color);
}
.loginRow .loginSubmit:hover {
  opacity: 0.7;
}
.loginRow .loginSubmit + .loginSubmit {
  margin-top: 10px;
}
.loginRow .loginSubmit.back {
  background-color: #b3b3b3;
}

.lccLoginBtns {
  margin-bottom: 50px;
}
@media screen and (min-width: 992px) {
  .lccLoginBtns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
}
.lccLoginBtns .lccLoginBtn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border: 2px solid #000;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  background-color: #fff;
  color: #333333;
  padding: 12px 16px;
  margin: 20px 0;
}
@media screen and (min-width: 992px) {
  .lccLoginBtns .lccLoginBtn {
    width: 48%;
    margin: 0;
  }
}
.lccLoginBtns .lccLoginBtn:hover {
  background-color: #fdfaf8;
}
.lccLoginBtns .lccLoginBtn img {
  height: 1.2em;
  margin-right: 10px;
}
.lccLoginBtns .lccLoginBtn.mateLcc {
  border-color: #79C932;
}
.lccLoginBtns .lccLoginBtn.mateAbcgo {
  border-color: #0090CC;
}

.socialLogins {
  display: flex;
  align-items: flex-end;
}
.socialLogins p {
  font-size: 16px;
  color: #999999;
  margin-bottom: 0px;
}
@media screen and (min-width: 992px) {
  .socialLogins p {
    font-size: 18px;
  }
}
.socialLogins .socialLogin {
  --social-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--social-size);
  height: var(--social-size);
  border-radius: 50%;
  margin: 0 5px;
}
@media screen and (min-width: 992px) {
  .socialLogins .socialLogin {
    --social-size: 60px;
    margin: 0 10px;
  }
}
.socialLogins .socialLogin::before {
  display: block;
  font-size: calc(var(--social-size) / 1.5);
  font-family: FontAwesome;
  color: #fff;
}
.socialLogins .socialLogin.facebook {
  background-color: #4267B2;
}
.socialLogins .socialLogin.facebook::before {
  content: "\f09a";
}
.socialLogins .socialLogin.google {
  background-color: #DB4437;
}
.socialLogins .socialLogin.google::before {
  content: "\f1a0";
}
.socialLogins .socialLogin.line {
  background: url(../img/icon-line.svg) no-repeat;
  background-size: var(--social-size);
}
.socialLogins .socialLogin.line::before {
  display: none;
}
.socialLogins .socialLogin:hover {
  filter: saturate(1.75);
  -webkit-filter: saturate(1.75);
}

.loginBottom {
  font-size: 16px;
  color: #999999;
  padding-top: 50px;
}
.loginBottom .iconRow {
  color: #999999;
  position: relative;
  padding-left: 24px;
}
.loginBottom .iconRow::before {
  content: "";
  display: block;
  font-family: fontAwesome;
  line-height: 1;
  position: absolute;
  top: 6px;
  left: 1px;
}
.loginBottom .iconRow.phone::before {
  content: "\f095";
}
.loginBottom .iconRow.mail::before {
  content: "\f0e0";
  font-size: 14px;
}

#locationModal .modal-content, #uploadModal .modal-content, #headStickerModal .modal-content, #radarModal .modal-content {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
#locationModal .modal-header, #uploadModal .modal-header, #headStickerModal .modal-header, #radarModal .modal-header {
  border: none;
}
#locationModal .modal-body, #uploadModal .modal-body, #headStickerModal .modal-body, #radarModal .modal-body {
  padding: 5px 30px 40px;
}
#locationModal .modalLocateSection, #uploadModal .modalLocateSection, #headStickerModal .modalLocateSection, #radarModal .modalLocateSection {
  --check-bd-color: #ececec;
  --check-bg-color: #ececec;
  --check-t-color: #ccc;
  margin-bottom: 20px;
}
#locationModal .modalLocateSection .locateInputRow, #uploadModal .modalLocateSection .locateInputRow, #headStickerModal .modalLocateSection .locateInputRow, #radarModal .modalLocateSection .locateInputRow {
  margin-bottom: 10px;
}
#locationModal .modalLocateSection .locateInputRow input, #locationModal .modalLocateSection .locateInputRow select, #uploadModal .modalLocateSection .locateInputRow input, #uploadModal .modalLocateSection .locateInputRow select, #headStickerModal .modalLocateSection .locateInputRow input, #headStickerModal .modalLocateSection .locateInputRow select, #radarModal .modalLocateSection .locateInputRow input, #radarModal .modalLocateSection .locateInputRow select {
  width: 100%;
  height: 40px;
  font-size: 16px;
  border: 1px solid #999999;
  border-radius: 5px;
  outline-color: #1ba1e6;
  padding: 4px 10px;
  cursor: pointer;
}
#locationModal .modalLocateSection .locateInputRow input:hover, #locationModal .modalLocateSection .locateInputRow input:active, #locationModal .modalLocateSection .locateInputRow select:hover, #locationModal .modalLocateSection .locateInputRow select:active, #uploadModal .modalLocateSection .locateInputRow input:hover, #uploadModal .modalLocateSection .locateInputRow input:active, #uploadModal .modalLocateSection .locateInputRow select:hover, #uploadModal .modalLocateSection .locateInputRow select:active, #headStickerModal .modalLocateSection .locateInputRow input:hover, #headStickerModal .modalLocateSection .locateInputRow input:active, #headStickerModal .modalLocateSection .locateInputRow select:hover, #headStickerModal .modalLocateSection .locateInputRow select:active, #radarModal .modalLocateSection .locateInputRow input:hover, #radarModal .modalLocateSection .locateInputRow input:active, #radarModal .modalLocateSection .locateInputRow select:hover, #radarModal .modalLocateSection .locateInputRow select:active {
  border-color: #1ba1e6;
}
#locationModal .modalLocateSection .locateInputRow input[type=text], #uploadModal .modalLocateSection .locateInputRow input[type=text], #headStickerModal .modalLocateSection .locateInputRow input[type=text], #radarModal .modalLocateSection .locateInputRow input[type=text] {
  cursor: auto;
}
#locationModal .modalLocateSection .locateInputRow textarea, #uploadModal .modalLocateSection .locateInputRow textarea, #headStickerModal .modalLocateSection .locateInputRow textarea, #radarModal .modalLocateSection .locateInputRow textarea {
  display: block;
  width: 100%;
  border: 1px solid #999999;
  border-radius: 5px;
  padding: 5px 10px;
  resize: none;
}
#locationModal .modalLocateSection .locateInputRow textarea:focus, #uploadModal .modalLocateSection .locateInputRow textarea:focus, #headStickerModal .modalLocateSection .locateInputRow textarea:focus, #radarModal .modalLocateSection .locateInputRow textarea:focus {
  outline: 1px solid #1ba1e6;
}
#locationModal .modalLocateSection .locateInputRow textarea:hover, #uploadModal .modalLocateSection .locateInputRow textarea:hover, #headStickerModal .modalLocateSection .locateInputRow textarea:hover, #radarModal .modalLocateSection .locateInputRow textarea:hover {
  border-color: #1ba1e6;
}
#locationModal .tailoringBox, #uploadModal .tailoringBox, #headStickerModal .tailoringBox, #radarModal .tailoringBox {
  width: 100%;
  height: 250px;
}
#locationModal .previewBox #previewImg, #uploadModal .previewBox #previewImg, #headStickerModal .previewBox #previewImg, #radarModal .previewBox #previewImg {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  border-radius: 50%;
  margin: auto;
  overflow: hidden;
}
#locationModal .levelRow, #uploadModal .levelRow, #headStickerModal .levelRow, #radarModal .levelRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
#locationModal .levelRow label, #uploadModal .levelRow label, #headStickerModal .levelRow label, #radarModal .levelRow label {
  margin-bottom: 0;
}
#locationModal .levelRow label .labelTip, #uploadModal .levelRow label .labelTip, #headStickerModal .levelRow label .labelTip, #radarModal .levelRow label .labelTip {
  color: inherit;
}
#locationModal .levelRow h3, #uploadModal .levelRow h3, #headStickerModal .levelRow h3, #radarModal .levelRow h3 {
  display: inline-flex;
  align-items: center;
  font-weight: bold;
  font-size: 36px;
  color: #F69495;
  margin: 0;
}
#locationModal .levelRow h3 .levelPattern, #uploadModal .levelRow h3 .levelPattern, #headStickerModal .levelRow h3 .levelPattern, #radarModal .levelRow h3 .levelPattern {
  display: inline-block;
  width: 1em;
  aspect-ratio: 1;
  background-size: cover;
}
#locationModal .levelRow h3 .levelPattern[data-level="1"], #uploadModal .levelRow h3 .levelPattern[data-level="1"], #headStickerModal .levelRow h3 .levelPattern[data-level="1"], #radarModal .levelRow h3 .levelPattern[data-level="1"] {
  background-image: url(../img/job/medal-none.svg);
}
#locationModal .levelRow h3 .levelPattern[data-level="2"], #uploadModal .levelRow h3 .levelPattern[data-level="2"], #headStickerModal .levelRow h3 .levelPattern[data-level="2"], #radarModal .levelRow h3 .levelPattern[data-level="2"] {
  background-image: url(../img/job/medal-bronze.svg);
}
#locationModal .levelRow h3 .levelPattern[data-level="3"], #uploadModal .levelRow h3 .levelPattern[data-level="3"], #headStickerModal .levelRow h3 .levelPattern[data-level="3"], #radarModal .levelRow h3 .levelPattern[data-level="3"] {
  background-image: url(../img/job/medal-silver.svg);
}
#locationModal .levelRow h3 .levelPattern[data-level="4"], #uploadModal .levelRow h3 .levelPattern[data-level="4"], #headStickerModal .levelRow h3 .levelPattern[data-level="4"], #radarModal .levelRow h3 .levelPattern[data-level="4"] {
  background-image: url(../img/job/medal-gold.svg);
}
#locationModal .commuteWaysWrapper, #uploadModal .commuteWaysWrapper, #headStickerModal .commuteWaysWrapper, #radarModal .commuteWaysWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
#locationModal .commuteWaysWrapper label.commuteWays, #uploadModal .commuteWaysWrapper label.commuteWays, #headStickerModal .commuteWaysWrapper label.commuteWays, #radarModal .commuteWaysWrapper label.commuteWays {
  width: 25%;
  padding: 0 5px;
  margin-bottom: 0;
  cursor: pointer;
}
#locationModal .commuteWaysWrapper label.commuteWays input[type=checkbox], #uploadModal .commuteWaysWrapper label.commuteWays input[type=checkbox], #headStickerModal .commuteWaysWrapper label.commuteWays input[type=checkbox], #radarModal .commuteWaysWrapper label.commuteWays input[type=checkbox] {
  display: none;
}
#locationModal .commuteWaysWrapper label.commuteWays .commuteWay .commuteWayPattern, #uploadModal .commuteWaysWrapper label.commuteWays .commuteWay .commuteWayPattern, #headStickerModal .commuteWaysWrapper label.commuteWays .commuteWay .commuteWayPattern, #radarModal .commuteWaysWrapper label.commuteWays .commuteWay .commuteWayPattern {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--check-bd-color);
  background-color: var(--check-bg-color);
  margin: 0 auto 5px;
}
#locationModal .commuteWaysWrapper label.commuteWays .commuteWay .commuteWayPattern svg, #uploadModal .commuteWaysWrapper label.commuteWays .commuteWay .commuteWayPattern svg, #headStickerModal .commuteWaysWrapper label.commuteWays .commuteWay .commuteWayPattern svg, #radarModal .commuteWaysWrapper label.commuteWays .commuteWay .commuteWayPattern svg {
  height: 30px;
  fill: var(--check-t-color);
}
#locationModal .commuteWaysWrapper label.commuteWays .commuteWay .commuteWaytext, #uploadModal .commuteWaysWrapper label.commuteWays .commuteWay .commuteWaytext, #headStickerModal .commuteWaysWrapper label.commuteWays .commuteWay .commuteWaytext, #radarModal .commuteWaysWrapper label.commuteWays .commuteWay .commuteWaytext {
  font-size: 16px;
  font-weight: normal;
  color: var(--check-t-color);
  text-align: center;
}
#locationModal .commuteWaysWrapper label.commuteWays .commuteWay:hover, #uploadModal .commuteWaysWrapper label.commuteWays .commuteWay:hover, #headStickerModal .commuteWaysWrapper label.commuteWays .commuteWay:hover, #radarModal .commuteWaysWrapper label.commuteWays .commuteWay:hover {
  --check-bd-color: #e1edf0;
  --check-bg-color: #e1edf0;
  --check-t-color: #b1d2e4;
}
#locationModal .commuteWaysWrapper label.commuteWays input[type=checkbox]:checked + .commuteWay, #uploadModal .commuteWaysWrapper label.commuteWays input[type=checkbox]:checked + .commuteWay, #headStickerModal .commuteWaysWrapper label.commuteWays input[type=checkbox]:checked + .commuteWay, #radarModal .commuteWaysWrapper label.commuteWays input[type=checkbox]:checked + .commuteWay {
  --check-bd-color: #1ba1e6;
  --check-bg-color: #fff;
  --check-t-color: #1ba1e6;
}
#locationModal .commuteTimeWrapper, #uploadModal .commuteTimeWrapper, #headStickerModal .commuteTimeWrapper, #radarModal .commuteTimeWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#locationModal .commuteTimeWrapper label.commuteTime, #uploadModal .commuteTimeWrapper label.commuteTime, #headStickerModal .commuteTimeWrapper label.commuteTime, #radarModal .commuteTimeWrapper label.commuteTime {
  width: 50%;
  padding: 0 5px;
  margin-bottom: 10px;
  cursor: pointer;
}
@media screen and (min-width: 480px) {
  #locationModal .commuteTimeWrapper label.commuteTime, #uploadModal .commuteTimeWrapper label.commuteTime, #headStickerModal .commuteTimeWrapper label.commuteTime, #radarModal .commuteTimeWrapper label.commuteTime {
    width: 33.3333333333%;
  }
}
#locationModal .commuteTimeWrapper label.commuteTime input[type=radio], #uploadModal .commuteTimeWrapper label.commuteTime input[type=radio], #headStickerModal .commuteTimeWrapper label.commuteTime input[type=radio], #radarModal .commuteTimeWrapper label.commuteTime input[type=radio] {
  display: none;
}
#locationModal .commuteTimeWrapper label.commuteTime span, #uploadModal .commuteTimeWrapper label.commuteTime span, #headStickerModal .commuteTimeWrapper label.commuteTime span, #radarModal .commuteTimeWrapper label.commuteTime span {
  display: block;
  border-radius: 10px;
  border: 1px solid var(--check-bd-color);
  background-color: var(--check-bg-color);
  color: var(--check-t-color);
  text-align: center;
  padding: 10px 20px;
}
#locationModal .commuteTimeWrapper label.commuteTime:hover, #uploadModal .commuteTimeWrapper label.commuteTime:hover, #headStickerModal .commuteTimeWrapper label.commuteTime:hover, #radarModal .commuteTimeWrapper label.commuteTime:hover {
  --check-bd-color: #e1edf0;
  --check-bg-color: #e1edf0;
  --check-t-color: #b1d2e4;
}
#locationModal .commuteTimeWrapper label.commuteTime input[type=radio]:checked ~ span, #uploadModal .commuteTimeWrapper label.commuteTime input[type=radio]:checked ~ span, #headStickerModal .commuteTimeWrapper label.commuteTime input[type=radio]:checked ~ span, #radarModal .commuteTimeWrapper label.commuteTime input[type=radio]:checked ~ span {
  --check-bd-color: #1ba1e6;
  --check-bg-color: #fff;
  --check-t-color: #1ba1e6;
}

.modalSectionTitle {
  font-size: 17px;
  margin-bottom: 10px;
}
.modalSectionTitle.required span {
  display: inline-block;
}
.modalSectionTitle.required span::after {
  content: "*";
  display: inline-block;
  color: #f04d4f;
}

.alertTop {
  text-align: center;
  margin-bottom: 30px;
}
.alertTop svg {
  height: 70px;
  fill: #F69495;
}
.alertTop p {
  font-size: 22px;
}
.alertTop p span {
  display: inline-block;
}

.modalParagraph {
  font-size: 18px;
  margin-bottom: 20px;
}

.contactTop {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
.contactTop img {
  height: 100px;
}
.contactTop p {
  font-size: 18px;
  padding: 0 15px;
}
.contactTop p span {
  display: inline-block;
}

.radarSkillTable {
  width: 100%;
  margin-bottom: 20px;
}
.radarSkillTable tr {
  border-bottom: 1px solid #fff;
}
.radarSkillTable thead th {
  background-color: #1ba1e6;
  color: #fff;
}
.radarSkillTable tbody tr:nth-of-type(odd) {
  background-color: #d3edfa;
}
.radarSkillTable tbody tr:nth-of-type(even) {
  background-color: #e1edf0;
}
.radarSkillTable th:first-child {
  max-width: 100px;
  text-align: left;
  word-break: break-all;
}
.radarSkillTable th, .radarSkillTable td {
  padding: 5px;
}
.radarSkillTable th:not(:first-child), .radarSkillTable td:not(:first-child) {
  text-align: center;
}
.radarSkillTable th .labelTip, .radarSkillTable td .labelTip {
  color: #FFD737;
}

.notPassWrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #e1edf0;
}
@media screen and (min-width: 768px) {
  .notPassWrapper {
    flex-direction: row;
    align-items: center;
  }
}
.notPassWrapper .notPassTitle {
  padding: 10px 10px;
  background-color: #ee3638;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .notPassWrapper .notPassTitle {
    width: 120px;
    background: none;
    color: inherit;
  }
}
.notPassWrapper .notPassTitle label {
  font-size: 16px;
  margin: 0;
}
.notPassWrapper .notPassTitle .labelTip {
  z-index: 2;
  color: inherit;
}
.notPassWrapper .notPassInner {
  display: flex;
  flex-direction: column;
  padding: 10px 0px;
}
@media screen and (min-width: 768px) {
  .notPassWrapper .notPassInner {
    width: calc(100% - 270px);
  }
}
.notPassWrapper .notPassInner span {
  display: inline-block;
  font-weight: bold;
  padding: 0 10px;
  position: relative;
}
.notPassWrapper .notPassInner span + span {
  margin-top: 9px;
}
.notPassWrapper .notPassInner span + span::before {
  content: "";
  width: 100%;
  border-top: 1px dashed #fdfaf8;
  position: absolute;
  top: -5px;
  left: 0;
}
.notPassWrapper .notPassBtn {
  padding: 20px 10px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .notPassWrapper .notPassBtn {
    width: 150px;
    text-align: right;
  }
}
.notPassWrapper .notPassBtn .jobBtn span {
  font-size: 14px;
}

#multiStepModal .d-none {
  display: none;
}
#multiStepModal .modal-body .profileRow {
  padding: 0;
}
#multiStepModal .topNote {
  margin-bottom: 20px;
}
#multiStepModal .modalCheckbox .form-check-label {
  font-weight: 400;
  font-size: 18px;
}
#multiStepModal .modalCheckbox .form-check-input {
  transform: scale(1.5);
  margin: 4px;
}

header {
  display: flex;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 16px 0 rgba(180, 180, 180, 0.3);
  position: fixed;
  top: 0;
  z-index: 1001;
}
header .headInner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1750px;
  padding: 0px 5px;
  margin: 0 auto;
}
header .headInner a.logoLink {
  display: inline-block;
  width: 150px;
}
@media screen and (min-width: 992px) {
  header .headInner a.logoLink {
    width: 200px;
  }
}
header .headInner .mbUser {
  display: flex;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 992px) {
  header .headInner .mbUser {
    display: none;
  }
}
header .headInner .mbUser > a {
  display: block;
}
header .headInner .mbUser > a::before {
  content: "\e7ff";
  display: block;
  font-family: "Material Icons";
  font-size: 36px;
  line-height: 1;
  color: #1ba1e6;
}
header .headInner .navWrapper {
  display: none;
}
@media screen and (min-width: 992px) {
  header .headInner .navWrapper {
    display: flex;
  }
}

.burgerWrapper {
  width: 40px;
  height: 40px;
  position: relative;
  right: -10px;
  cursor: pointer;
}
@media screen and (min-width: 992px) {
  .burgerWrapper {
    display: none;
  }
}
.burgerWrapper span {
  display: block;
  width: 30px;
  height: 3px;
  background-color: #1ba1e6;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.16s ease-in;
}
.burgerWrapper span:nth-of-type(1) {
  top: 50%;
}
.burgerWrapper span:nth-of-type(2) {
  top: 72%;
}
.burgerWrapper span:nth-of-type(3) {
  top: 28%;
}
.burgerWrapper.active span:nth-of-type(1) {
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
}
.burgerWrapper.active span:nth-of-type(2) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(135deg);
}
.burgerWrapper.active span:nth-of-type(3) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-135deg);
}

ul.mainNav {
  --nav-icon-size: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.mainNav > li {
  display: inline-block;
  position: relative;
  padding: 0 5px;
}
@media screen and (min-width: 1350px) {
  ul.mainNav > li {
    padding: 0 15px;
  }
}
ul.mainNav > li > a {
  display: block;
  font-size: 18px;
  color: #333333;
  padding: 30px 10px 25px;
  border-bottom: 5px solid transparent;
}
@media screen and (min-width: 1350px) {
  ul.mainNav > li > a {
    padding: 30px 20px 25px;
  }
}
ul.mainNav > li > a[class*=icon] {
  padding-left: 40px;
}
ul.mainNav > li > a[class*=icon]::before {
  content: "";
  display: block;
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  background-image: url(../img/menu-icon-jobhunting.svg);
  background-size: var(--nav-icon-size);
  position: absolute;
  top: 32px;
  left: 18px;
}
ul.mainNav > li > a[class*=icon].icon-jobhunting::before {
  background-image: url(../img/menu-icon-jobhunting.svg);
}
ul.mainNav > li > a[class*=icon].icon-recruit::before {
  background-image: url(../img/menu-icon-recruit.svg);
}
ul.mainNav > li > a[class*=icon].icon-senior::before {
  background-image: url(../img/menu-icon-senior.svg);
}
ul.mainNav > li > a[class*=icon].icon-piecework::before {
  background-image: url(../img/menu-icon-piecework.svg);
}
ul.mainNav > li:hover > a {
  border-bottom-color: #1ba1e6;
}
ul.mainNav > li:hover .nav2Wrapper {
  display: block;
}

.nav2Wrapper {
  --nav-width: 200px;
  width: var(--nav-width);
  display: none;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #fff;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(calc(-1 * var(--nav-width) / 2));
  transition: 0.3s;
  overflow: hidden;
}
.nav2Wrapper ul.nav2 {
  width: var(--nav-width);
  list-style: none;
  padding: 10px 0;
  margin: 0;
  position: relative;
  z-index: 2;
}
.nav2Wrapper.show3 {
  width: calc(var(--nav-width) * 2);
}
.nav2Wrapper.show3 ul.nav2 {
  border-right: 1px solid #ccc;
}
.nav2Wrapper ul.nav3 {
  list-style: none;
  padding: 10px 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: var(--nav-width);
  opacity: 0;
  pointer-events: none;
  width: var(--nav-width);
}
.nav2Wrapper ul.nav3.active {
  opacity: 1;
  pointer-events: visible;
  transition: 0.3s;
}
.nav2Wrapper li {
  display: block;
  text-align: center;
}
.nav2Wrapper li > a {
  display: block;
  font-size: 18px;
  word-break: keep-all;
  color: #333333;
  padding: 15px 5px;
}
.nav2Wrapper li > a:hover {
  background-color: #1ba1e6;
  color: #fff;
}
.nav2Wrapper li.active > a {
  background-color: #1ba1e6;
  color: #fff;
}

.navStatusBtnWrapper {
  display: flex;
  align-items: center;
}
@media screen and (min-width: 1200px) {
  .navStatusBtnWrapper {
    margin: 0 -40px;
  }
}
.navStatusBtnWrapper .statusLoginBtn {
  display: block;
  background: none;
  border: none;
  padding: 20px 8px 15px;
  border-bottom: 5px solid transparent;
}
.navStatusBtnWrapper .statusLoginBtn > span, .navStatusBtnWrapper .statusLoginBtn > a {
  display: block;
  font-size: 18px;
  padding: 10px 20px;
  border-radius: 50px;
}
.navStatusBtnWrapper .statusLoginBtn.student > span {
  background-color: #1ba1e6;
  color: #fff;
}
.navStatusBtnWrapper .statusLoginBtn.student:hover > span {
  background-color: #60bdee;
}
.navStatusBtnWrapper .statusLoginBtn.firm > span {
  background-color: #f68b60;
  color: #fff;
}
.navStatusBtnWrapper .statusLoginBtn.firm:hover > span {
  background-color: #f9ae90;
}
.navStatusBtnWrapper .statusLoginBtn.memberS > a {
  background-color: #eaf6fd;
  color: #1ba1e6;
}
.navStatusBtnWrapper .statusLoginBtn.memberF > a {
  background-color: #fef1ec;
  color: #f68b60;
}
.navStatusBtnWrapper .statusLoginBtn.memberS, .navStatusBtnWrapper .statusLoginBtn.memberF {
  position: relative;
}
.navStatusBtnWrapper .statusLoginBtn.memberS > a span, .navStatusBtnWrapper .statusLoginBtn.memberF > a span {
  display: inline-block;
  padding-left: 30px;
  position: relative;
}
.navStatusBtnWrapper .statusLoginBtn.memberS > a span::before, .navStatusBtnWrapper .statusLoginBtn.memberF > a span::before {
  content: "\e853";
  font-family: "Material Symbols Outlined";
  font-size: 30px;
  line-height: 1;
  position: absolute;
  top: -1px;
  left: -4px;
}
.navStatusBtnWrapper .statusLoginBtn.memberS:hover, .navStatusBtnWrapper .statusLoginBtn.memberF:hover {
  border-bottom-color: #1ba1e6;
}
.navStatusBtnWrapper .statusLoginBtn.memberS:hover .nav2Wrapper, .navStatusBtnWrapper .statusLoginBtn.memberF:hover .nav2Wrapper {
  display: block;
  top: calc(100% + 5px);
}

.navNotify {
  position: relative;
  padding: 30px 8px 20px;
}
.navNotify::before {
  content: "\e7f4";
  font-family: "Material Symbols Outlined";
  font-size: 30px;
  color: #1ba1e6;
  line-height: 1;
}
.navNotify .noteNum {
  display: block;
  width: 18px;
  height: 18px;
  font-size: 12px;
  background-color: #F69495;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  top: 30px;
  right: 5px;
}
.navNotify .navNotifyListWrapper {
  display: none;
  width: 200px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  overflow: hidden;
  position: absolute;
  top: 100%;
  right: 0;
}
.navNotify .navNotifyListWrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.navNotify .navNotifyListWrapper ul li + li {
  border-top: 1px dashed #ccc;
}
.navNotify .navNotifyListWrapper ul li a, .navNotify .navNotifyListWrapper ul li span {
  display: block;
  font-size: 16px;
  color: #333333;
  padding: 5px 10px;
}
.navNotify .navNotifyListWrapper ul li a:hover, .navNotify .navNotifyListWrapper ul li span:hover {
  background-color: #fdfaf8;
}
.navNotify:hover .navNotifyListWrapper {
  display: block;
}
.navNotify.forForm::before {
  color: var(--color-green);
}

.sidebar {
  width: 100%;
  height: calc(100% - var(--header-height));
  background-color: #e1edf0;
  padding: 0px 0 60px;
  position: fixed;
  top: var(--header-height);
  left: 0;
  z-index: 30;
  transition: 0.3s ease-in-out;
  transform: translateX(100%);
}
@media screen and (min-width: 992px) {
  .sidebar {
    display: none;
  }
}
.sidebar ul.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar ul.sidebar-nav > li {
  border-top: 1px solid #ccc;
  position: relative;
  left: 300px;
  opacity: 0;
  transition: 0.5s ease 0s;
}
.sidebar ul.sidebar-nav > li:nth-of-type(1) {
  transition-delay: 0s;
}
.sidebar ul.sidebar-nav > li:nth-of-type(2) {
  transition-delay: 0.06s;
}
.sidebar ul.sidebar-nav > li:nth-of-type(3) {
  transition-delay: 0.12s;
}
.sidebar ul.sidebar-nav > li:nth-of-type(4) {
  transition-delay: 0.18s;
}
.sidebar ul.sidebar-nav > li:nth-of-type(5) {
  transition-delay: 0.24s;
}
.sidebar ul.sidebar-nav > li:nth-of-type(6) {
  transition-delay: 0.3s;
}
.sidebar ul.sidebar-nav > li:nth-of-type(7) {
  transition-delay: 0.36s;
}
.sidebar ul.sidebar-nav > li:nth-of-type(8) {
  transition-delay: 0.42s;
}
.sidebar ul.sidebar-nav > li:nth-of-type(9) {
  transition-delay: 0.48s;
}
.sidebar ul.sidebar-nav > li:nth-of-type(10) {
  transition-delay: 0.54s;
}
.sidebar ul.sidebar-nav > li > a {
  display: block;
  font-size: 18px;
  color: #333333;
  padding: 15px 30px;
  position: relative;
}
.sidebar ul.sidebar-nav > li > a:hover {
  color: #1ba1e6;
  background-color: #d3edfa;
}
.sidebar ul.sidebar-nav > li > a.sidebar-menu::after {
  content: "\e5cf";
  display: block;
  font-size: 28px;
  font-family: "Material Icons";
  line-height: 1;
  position: absolute;
  top: 14px;
  right: 15px;
  transition: 0.3s;
}
.sidebar ul.sidebar-nav > li > a.sidebar-menu.open {
  background-color: #a5daf5;
}
.sidebar ul.sidebar-nav > li > a.sidebar-menu.open::after {
  transform: rotate(-540deg);
}
.sidebar ul.sidebar-nav > li > ul {
  display: none;
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #d3edfa;
}
.sidebar ul.sidebar-nav > li > ul > li > a {
  display: block;
  font-size: 18px;
  color: #333333;
  padding: 15px 30px;
}
.sidebar ul.sidebar-nav > li > ul > li > a:hover {
  color: #1ba1e6;
  background-color: #d3edfa;
}
.sidebar ul.sidebar-nav > li > ul > li > a.sidebar-submenu::after {
  content: "\e5c6";
  display: inline-block;
  font-family: "Material Symbols Outlined";
  line-height: 1;
  vertical-align: middle;
  margin-left: 5px;
  transform: translateY(-1px) rotate(-90deg);
  transition: 0.3s;
}
.sidebar ul.sidebar-nav > li > ul > li > a.sidebar-submenu.open::after {
  transform: translateY(-1px) rotate(0);
}
.sidebar ul.sidebar-nav > li > ul > li > ul {
  display: none;
  padding: 0;
  margin: 0;
  list-style: none;
}
.sidebar ul.sidebar-nav > li > ul > li > ul > li > a {
  display: block;
  font-size: 18px;
  color: #333333;
  padding: 15px 30px;
  position: relative;
}
.sidebar ul.sidebar-nav > li > ul > li > ul > li > a:hover {
  color: #1ba1e6;
  background-color: #d3edfa;
}
.sidebar ul.sidebar-nav > li > ul > li > ul > li > a::before {
  content: "\e5df";
  font-family: "Material Icons";
  line-height: 1;
}
.sidebar::-webkit-scrollbar {
  width: 10px;
}
.sidebar::-webkit-scrollbar-track {
  background: #fff;
}
.sidebar::-webkit-scrollbar-thumb {
  background: #888;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.sidebar.active {
  transform: translateX(0%);
  overflow-y: scroll;
  overflow-x: hidden;
}
@media screen and (min-width: 992px) {
  .sidebar.active {
    display: none;
  }
}
.sidebar.active ul.sidebar-nav > li {
  left: 0px;
  opacity: 1;
}

.mbLoginBox {
  max-width: 400px;
  margin: auto;
  padding: 50px 20px 0;
}
.mbLoginBox .mbLoginBtn {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  border-radius: 50px;
  outline: none;
  margin: 20px 0;
  padding: 10px 20px;
  color: #fff;
  font-size: 16px;
}
.mbLoginBox .mbLoginBtn._green {
  background-color: var(--color-green);
}
.mbLoginBox .mbLoginBtn._blue {
  background-color: var(--color-blue);
}
.mbLoginBox .mbLoginBtn.join {
  padding: 8px 20px;
  border: 2px solid var(--color-green);
  background-color: #EBFFFF;
  color: var(--color-green);
}

#gotop {
  font-weight: bold;
  width: 50px;
  height: calc(50px + 1em);
  line-height: 1em;
  padding-top: 50px;
  position: absolute;
  top: -100px;
  right: 20px;
  text-align: center;
  background-image: url(../img/top.svg);
  background-size: 92%;
  background-repeat: no-repeat;
  background-position: center 25%;
  cursor: pointer;
}
#gotop:hover {
  background-image: url(../img/top-hover.svg);
}
@media screen and (min-width: 992px) {
  #gotop {
    width: 100px;
    height: calc(100px + 1em);
    padding-top: 94px;
    top: calc(-120px - 1em);
  }
}

footer {
  background-color: #1ba1e6;
  position: relative;
  padding: 40px 30px;
  text-align: center;
}
footer a.outerLink {
  display: block;
  font-size: 14px;
  color: #fff;
  padding: 0 10px;
  margin: 10px 0;
  text-decoration: underline;
}
@media screen and (min-width: 992px) {
  footer a.outerLink {
    display: inline-block;
    text-decoration: none;
  }
  footer a.outerLink + a.outerLink {
    border-left: 1px solid #fff;
  }
}
footer p {
  color: #fff;
  margin: 0;
}
footer p a {
  color: #fff;
}
footer p a:hover {
  color: #fff;
  text-decoration: underline;
}

.sectionTitleWrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media screen and (min-width: 992px) {
  .sectionTitleWrapper {
    margin-bottom: 30px;
  }
}
.sectionTitleWrapper .sectionTitle {
  display: inline-block;
  font-size: 20px;
  position: relative;
  padding-left: 30px;
  margin: 0;
}
.sectionTitleWrapper .sectionTitle .svg_gear {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0.25em;
  left: 0px;
  fill: var(--color-blue);
}
.sectionTitleWrapper .sectionTitle.forForm .svg_gear {
  fill: var(--color-green);
}
.sectionTitleWrapper .sectionFilter {
  width: 50%;
  max-width: 350px;
}
.sectionTitleWrapper .sectionFilter select {
  width: 100%;
  height: 40px;
  font-size: 16px;
  border: 1px solid #999999;
  border-radius: 5px;
  outline-color: #1ba1e6;
  padding: 4px 10px;
  cursor: pointer;
}
.sectionTitleWrapper .sectionFilter select:hover, .sectionTitleWrapper .sectionFilter select:active {
  border-color: #1ba1e6;
}

.sectionMoreWrapper {
  text-align: center;
}

.sectionPaginationWrapper {
  text-align: center;
  padding: 30px 0;
}
.sectionPaginationWrapper .pageLink {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  padding: 0 5px;
  margin: 0 2px;
  font-size: 14px;
  color: #fff;
  background-color: #b3b3b3;
}
@media screen and (min-width: 768px) {
  .sectionPaginationWrapper .pageLink {
    margin: 0 5px;
  }
}
.sectionPaginationWrapper .pageLink:hover {
  background-color: #77c7f0;
}
.sectionPaginationWrapper .pageLink.active {
  background-color: #1ba1e6;
}

label.addToLove {
  display: inline-block;
  font-size: 0;
  margin-bottom: 0;
  cursor: pointer;
}
label.addToLove input[type=checkbox] {
  display: none;
}
label.addToLove span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: 18px;
  line-height: 1;
}
label.addToLove span::before {
  content: "\f004";
  display: block;
  font-family: fontAwesome;
  color: #b3b3b3;
}
label.addToLove input[type=checkbox]:checked ~ span::before {
  color: #f04d4f;
}

.contentNews.inList,
.contentContacts.inList {
  padding: clamp(20px, 12vw, 40px) 0;
}
.contentNews.inList .newsPatternBG,
.contentContacts.inList .newsPatternBG {
  bottom: auto;
  top: 40%;
}
.contentNews.inList .sectionTitleWrapper,
.contentContacts.inList .sectionTitleWrapper {
  justify-content: center;
}
.contentNews.inList .newsGallery,
.contentContacts.inList .newsGallery {
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
}
.contentNews.inList .newsGallery .item_news,
.contentContacts.inList .newsGallery .item_news {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .contentNews.inList .newsGallery .item_news,
  .contentContacts.inList .newsGallery .item_news {
    width: calc(50% - 2vw);
  }
}
@media screen and (min-width: 1200px) {
  .contentNews.inList .newsGallery .item_news,
  .contentContacts.inList .newsGallery .item_news {
    width: calc(33.3333333333% - 2vw);
  }
}

.secretConnectListWrapper {
  list-style: none;
  padding: 0;
  margin: 0;
}
.secretConnectListWrapper li {
  position: relative;
  padding: 20px 0;
}
@media screen and (min-width: 768px) {
  .secretConnectListWrapper li {
    padding: 30px 0 30px 26%;
  }
}
.secretConnectListWrapper li + li {
  border-top: 2px solid var(--color-gray);
}
.secretConnectListWrapper li .secretConnectImg {
  text-align: center;
  position: relative;
  margin-bottom: 10px;
  aspect-ratio: 16/10;
}
@media screen and (min-width: 768px) {
  .secretConnectListWrapper li .secretConnectImg {
    width: 26%;
    margin-bottom: 0;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
}
.secretConnectListWrapper li .secretConnectImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.secretConnectListWrapper li .secretConnectImg .secretConnectImgText {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.secretConnectListWrapper li .secretConnectImg .secretConnectImgText .secretConnectSalary, .secretConnectListWrapper li .secretConnectImg .secretConnectImgText .secretConnectName {
  display: block;
  font-size: 13px;
  font-weight: normal;
  padding: 5px 5px;
}
.secretConnectListWrapper li .secretConnectImg .secretConnectImgText .secretConnectSalary {
  background-color: var(--color-green);
  color: #fff;
}
.secretConnectListWrapper li .secretConnectImg .secretConnectImgText .secretConnectName {
  background-color: #fff;
  color: #000;
}
.secretConnectListWrapper li .secretConnectContent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .secretConnectListWrapper li .secretConnectContent {
    min-height: 200px;
    padding-left: 30px;
  }
}
.secretConnectListWrapper li .secretConnectContent .secretConnectLabels {
  width: 100%;
}
.secretConnectListWrapper li .secretConnectContent .secretConnectLabels label {
  display: inline-block;
  font-size: 14px;
  padding: 3px 12px;
  border-radius: 1em;
  color: #fff;
  background-color: var(--color-green);
  margin: 0 0 5px;
}
.secretConnectListWrapper li .secretConnectContent h4 {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  color: #000;
}
.secretConnectListWrapper li .secretConnectContent .secretConnectExperience {
  width: 100%;
  font-size: 14px;
  font-weight: normal;
  color: var(--color);
  padding: 3px 5px 3px 10px;
  border-left: 5px solid var(--color-green);
  text-align: justify;
  margin-bottom: 10px;
}

.secretPublicTopWrapper {
  padding: clamp(20px, 12vw, 40px) 0;
  background-color: #EBFFFF;
}
.secretPublicTopWrapper .sectionTitleWrapper {
  justify-content: center;
}
.secretPublicTopWrapper .secretPublicTop {
  display: flex;
  align-items: center;
  gap: clamp(20px, 7vw, 40px);
}
.secretPublicTopWrapper .secretPublicTop .secretPublicTop_figure {
  width: 50%;
  max-width: 600px;
  margin: auto;
  aspect-ratio: 16/9;
  position: relative;
  cursor: pointer;
}
.secretPublicTopWrapper .secretPublicTop .secretPublicTop_figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.secretPublicTopWrapper .secretPublicTop .secretPublicTop_figure .secretPublicTopLabel {
  display: inline-block;
  font-weight: normal;
  font-size: 13px;
  color: #fff;
  padding: 5px;
  position: absolute;
  z-index: 2;
  background-color: var(--color-pink);
  top: -1em;
  left: 10px;
}
.secretPublicTopWrapper .secretPublicTop .secretPublicTop_figure .vedioPlayBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.secretPublicTopWrapper .secretPublicTop .secretPublicTop_figure .vedioPlayBtn svg path {
  transition: fill 0.4s;
  stroke: #fff;
  fill: none;
}
.secretPublicTopWrapper .secretPublicTop .secretPublicTop_figure:hover .vedioPlayBtn {
  background-color: var(--color-green);
  border-color: var(--color-green);
}
.secretPublicTopWrapper .secretPublicTop .secretPublicTop_figure:hover .vedioPlayBtn svg path {
  fill: #fff;
}
.secretPublicTopWrapper .secretPublicTop .secretPublicTop_text {
  width: 45%;
  cursor: pointer;
}
.secretPublicTopWrapper .secretPublicTop .secretPublicTop_text .secretPublicTop_title {
  font-weight: bold;
  font-size: 16px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-green);
  margin-bottom: 5px;
}
.secretPublicTopWrapper .secretPublicTop .secretPublicTop_text .secretPublicTop_name {
  font-size: 16px;
}

.secretPublicListWrapper {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 10px 0 0;
  margin: 0;
}
.secretPublicListWrapper li {
  width: 100%;
  max-width: 350px;
  margin: 0 auto 20px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .secretPublicListWrapper li {
    width: 30%;
    max-width: none;
    margin: 0 1.6666% 20px;
  }
}
@media screen and (min-width: 1200px) {
  .secretPublicListWrapper li {
    width: 47%;
    margin: 0 1.5% 20px;
  }
}
@media screen and (min-width: 1450px) {
  .secretPublicListWrapper li {
    width: 30%;
    margin: 0 1.6666% 20px;
  }
}
.secretPublicListWrapper li .secretPublicLabel {
  display: inline-block;
  font-weight: normal;
  font-size: 13px;
  color: #fff;
  padding: 5px;
  position: absolute;
  top: -1em;
  z-index: 2;
  background-color: var(--color-yellow);
  left: 10px;
}
.secretPublicListWrapper li .secretPublic {
  display: block;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 rgba(129, 109, 109, 0.35);
  overflow: hidden;
}
.secretPublicListWrapper li .secretPublic .secretPublicImg {
  aspect-ratio: 16/9;
  position: relative;
}
.secretPublicListWrapper li .secretPublic .secretPublicImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.secretPublicListWrapper li .secretPublic .secretPublicImg .vedioPlayBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.secretPublicListWrapper li .secretPublic .secretPublicImg .vedioPlayBtn svg path {
  transition: fill 0.4s;
  stroke: #fff;
  fill: none;
}
.secretPublicListWrapper li .secretPublic .secretPublicBox {
  font-weight: normal;
  color: #333333;
  padding: 10px 5px 15px;
  background-color: #fff;
  text-align: center;
}
.secretPublicListWrapper li .secretPublic .secretPublicBox .secretPublicCompany {
  display: inline-block;
  font-size: 14px;
  padding: 3px 12px;
  border: 1px solid #333333;
  border-radius: 1em;
  margin-bottom: 10px;
}
.secretPublicListWrapper li .secretPublic .secretPublicBox .secretPublicTitle {
  font-weight: bold;
  font-size: 16px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 5px;
}
.secretPublicListWrapper li .secretPublic .secretPublicBox .secretPublicName {
  font-size: 14px;
}
.secretPublicListWrapper li .secretPublic .secretPublicBox .secretMoreWrapper {
  margin-top: 8px;
  text-align: right;
}
.secretPublicListWrapper li .secretPublic .secretPublicBox .secretMoreWrapper > div {
  display: inline-block;
  width: 95px;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  border: 2px solid var(--color-green);
  color: var(--color-green);
  padding: 3px 30px 3px 5px;
  transition: 0.3s;
}
.secretPublicListWrapper li .secretPublic .secretPublicBox .secretMoreWrapper > div::before {
  content: "";
  display: block;
  width: 12px;
  height: 2px;
  background-color: var(--color-green);
  position: absolute;
  top: 12px;
  right: 9px;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.3s, transform-origin 0.1s 0.3s;
}
.secretPublicListWrapper li .secretPublic .secretPublicBox .secretMoreWrapper > div > span {
  display: inline-block;
}
.secretPublicListWrapper li .secretPublic .secretPublicBox .secretMoreWrapper > div > span::before, .secretPublicListWrapper li .secretPublic .secretPublicBox .secretMoreWrapper > div > span::after {
  content: "";
  display: block;
  width: 8px;
  height: 2px;
  background-color: var(--color-green);
  position: absolute;
  right: 7px;
  transition: 0.3s;
}
.secretPublicListWrapper li .secretPublic .secretPublicBox .secretMoreWrapper > div > span::before {
  top: 10px;
  transform: rotate(45deg);
}
.secretPublicListWrapper li .secretPublic .secretPublicBox .secretMoreWrapper > div > span::after {
  top: 14px;
  transform: rotate(-45deg);
}
.secretPublicListWrapper li .secretPublic:hover {
  box-shadow: 0 0 20px 0 rgba(129, 109, 109, 0.35), 0 0 0px 4px var(--color-green);
}
.secretPublicListWrapper li .secretPublic:hover .vedioPlayBtn {
  background-color: var(--color-green);
  border-color: var(--color-green);
}
.secretPublicListWrapper li .secretPublic:hover .vedioPlayBtn svg path {
  fill: #fff;
}
.secretPublicListWrapper li .secretPublic:hover .secretPublicCompany {
  background-color: var(--color-green);
  border-color: var(--color-green);
  color: #fff;
}
.secretPublicListWrapper li .secretPublic:hover .secretMoreWrapper > div {
  background-color: var(--color-green);
  color: #fff;
  padding: 3px 25px 3px 3px;
}
.secretPublicListWrapper li .secretPublic:hover .secretMoreWrapper > div::before {
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: left;
}
.secretPublicListWrapper li .secretPublic:hover .secretMoreWrapper > div > span::before, .secretPublicListWrapper li .secretPublic:hover .secretMoreWrapper > div > span::after {
  background-color: #fff;
  right: 4px;
}
.secretPublicListWrapper._boss li .secretPublic .secretPublicBox {
  color: #000;
  text-align: left;
  padding: 10px 15px 15px;
}

.articleDetailWrapper {
  width: 100%;
  max-width: 860px;
  padding: 50px 20px 80px;
  margin: auto;
}
.articleDetailWrapper .articleDetailTop {
  --social-size: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #b3b3b3;
  padding: 0 5px 10px;
  margin-bottom: 30px;
}
.articleDetailWrapper .articleDetailTop .articleDetailDate {
  font-size: 14px;
  line-height: var(--social-size);
}
.articleDetailWrapper .articleDetailTop .articleDetailSocialWrapper {
  display: flex;
}
.articleDetailWrapper .articleDetailTop .articleDetailSocial {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--social-size);
  height: var(--social-size);
  border-radius: 50%;
  margin: 0 5px;
}
.articleDetailWrapper .articleDetailTop .articleDetailSocial::before {
  display: block;
  font-size: calc(var(--social-size) / 1.5);
  font-family: FontAwesome;
  color: #fff;
}
.articleDetailWrapper .articleDetailTop .articleDetailSocial.facebook {
  background-color: #4267B2;
}
.articleDetailWrapper .articleDetailTop .articleDetailSocial.facebook::before {
  content: "\f09a";
}
.articleDetailWrapper .articleDetailTop .articleDetailSocial.line {
  background: url(../img/icon-line.svg) no-repeat;
  background-size: var(--social-size);
}
.articleDetailWrapper .articleDetailTop .articleDetailSocial.line::before {
  display: none;
}
.articleDetailWrapper .articleDetailTop .articleDetailSocial:hover {
  filter: saturate(1.75);
  -webkit-filter: saturate(1.75);
}
.articleDetailWrapper .articleMainTitle {
  font-size: 28px;
  line-height: 1.5;
  color: #1ba1e6;
  margin: 0 0 20px;
}
.articleDetailWrapper .articleMainImg {
  text-align: center;
  margin-bottom: 10px;
}
.articleDetailWrapper .articleDetailContent {
  padding-bottom: 60px;
}
.articleDetailWrapper .articleDetailContent img {
  height: auto !important;
}
.articleDetailWrapper .newsTags {
  padding: 0 5px;
  margin-bottom: 10px;
}

.relatiedArticleWrapper {
  border-top: 1px solid #b3b3b3;
  padding-top: 20px;
  padding-bottom: 100px;
}
.relatiedArticleWrapper .relatiedTitle {
  font-size: 18px;
  color: #1ba1e6;
  margin-bottom: 10px;
}
.relatiedArticleWrapper .relatiedArticleSlider .slick-list {
  padding-top: 10px;
  padding-bottom: 20px;
}
.relatiedArticleWrapper .relatiedArticleSlider button.slick-arrow {
  width: 40px;
  height: 40px;
  background-color: #fff;
  box-shadow: 3px 3px 10px 3px rgba(120, 120, 120, 0.2);
  border-radius: 50%;
  border: none;
  outline: none;
  position: absolute;
  font-size: 0;
  color: transparent;
  z-index: 2;
  top: 46%;
  transform: translateY(-50%);
  transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
}
.relatiedArticleWrapper .relatiedArticleSlider button.slick-arrow::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-top: 4px solid #77c7f0;
  border-right: 4px solid #77c7f0;
  box-shadow: 0 0 0 lightgray;
  transition: all 200ms ease;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.relatiedArticleWrapper .relatiedArticleSlider button.slick-arrow:hover::before {
  border-color: #1ba1e6;
  box-shadow: 3px -3px 0 #77c7f0;
}
.relatiedArticleWrapper .relatiedArticleSlider button.slick-arrow.slick-prev, .relatiedArticleWrapper .relatiedArticleSlider button.slick-arrow.owl-prev {
  left: -10px;
}
.relatiedArticleWrapper .relatiedArticleSlider button.slick-arrow.slick-prev::before, .relatiedArticleWrapper .relatiedArticleSlider button.slick-arrow.owl-prev::before {
  left: 55%;
  transform: translate(-50%, -50%) rotate(-135deg);
}
.relatiedArticleWrapper .relatiedArticleSlider button.slick-arrow.slick-next, .relatiedArticleWrapper .relatiedArticleSlider button.slick-arrow.owl-next {
  right: -10px;
}
.relatiedArticleWrapper .relatiedArticleSlider button.slick-arrow.slick-next::before, .relatiedArticleWrapper .relatiedArticleSlider button.slick-arrow.owl-next::before {
  left: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.relatiedArticleWrapper .relatiedArticleSlider .relatiedArticleItem {
  margin: 0 10px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 30px;
  outline: none;
  overflow: hidden;
  box-shadow: 2px 3px 10px 2px rgba(27, 161, 230, 0.2);
}
.relatiedArticleWrapper .relatiedArticleSlider .relatiedArticleItem .newsPic {
  display: block;
  position: relative;
  overflow: hidden;
}
.relatiedArticleWrapper .relatiedArticleSlider .relatiedArticleItem .newsPic img {
  transition: 0.3s;
}
.relatiedArticleWrapper .relatiedArticleSlider .relatiedArticleItem .newsTitleWrapper {
  padding: 10px 10px;
}
.relatiedArticleWrapper .relatiedArticleSlider .relatiedArticleItem .newsTitle {
  font-size: 14px;
  color: #333333;
  word-break: break-all;
  display: -webkit-box;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  height: 1.5em;
}
.relatiedArticleWrapper .relatiedArticleSlider .relatiedArticleItem:hover {
  box-shadow: 2px 3px 10px 2px rgba(27, 161, 230, 0.5);
}
.relatiedArticleWrapper .relatiedArticleSlider .relatiedArticleItem:hover .newsPic img {
  transform: scale(1.2);
}
.relatiedArticleWrapper .relatiedChangeWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange {
  display: block;
  width: 50%;
  background-color: #d3edfa;
  box-shadow: 0 3px 0px 0px rgba(120, 120, 120, 0.3);
  border-radius: 10px;
  padding: 10px 15px;
  margin: 0 10px;
  position: relative;
}
.relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange::before {
  content: "\f0a8";
  display: block;
  font-family: FontAwesome;
  font-size: 24px;
  color: #1ba1e6;
  line-height: 1;
  position: absolute;
  top: 28px;
}
@media screen and (min-width: 768px) {
  .relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange::before {
    font-size: 36px;
  }
}
.relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange.prev {
  padding-left: 40px;
}
.relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange.prev::before {
  left: 10px;
}
.relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange.next {
  padding-right: 40px;
}
.relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange.next::before {
  right: 10px;
  transform: rotate(180deg);
}
@media screen and (min-width: 768px) {
  .relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange {
    width: 36%;
  }
  .relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange.prev {
    padding-left: 70px;
  }
  .relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange.prev::before {
    left: 20px;
  }
  .relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange.next {
    padding-right: 70px;
  }
  .relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange.next::before {
    right: 20px;
  }
}
.relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange label {
  display: block;
  font-size: 12px;
  color: #999999;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange label {
    font-size: 14px;
  }
}
.relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange span {
  max-width: 100%;
  font-size: 14px;
  color: #1ba1e6;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 3em;
}
@media screen and (min-width: 768px) {
  .relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange span {
    font-size: 16px;
  }
}
.relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange:hover {
  box-shadow: 0 3px 10px 2px rgba(120, 120, 120, 0.3), 0 0 0 3px #1ba1e6;
}
.relatiedArticleWrapper .relatiedChangeWrapper .relatiedChange:hover::before {
  color: #1ba1e6;
}

.termMainWrapper {
  width: 100%;
  max-width: 840px;
  padding: 40px;
  margin: auto;
}
.termMainWrapper .termMainTitle {
  font-size: 24px;
  font-weight: bold;
  color: #1ba1e6;
  text-align: center;
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .termMainWrapper .termMainTitle {
    font-size: 28px;
  }
}

.listAppliedWrapper {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-orange);
}
.listAppliedWrapper > span {
  display: inline-block;
  position: relative;
  padding-left: 24px;
}
.listAppliedWrapper > span::before {
  content: "\e8ec";
  display: block;
  font-family: "Material Symbols Outlined";
  font-size: 22px;
  line-height: 1;
  position: absolute;
  top: -1px;
  left: 0;
  transform: scaleX(1.2) rotate(90deg);
}
.listAppliedWrapper > span::after {
  content: "";
  display: block;
  width: 11px;
  aspect-ratio: 8/11;
  background-color: var(--color-orange);
  opacity: 0.6;
  position: absolute;
  top: 1.5px;
  left: 6px;
  transform: scaleY(0);
  transform-origin: bottom;
}
.listAppliedWrapper[data-charge="1"] > span::after {
  transform: scaleY(0.3);
}
.listAppliedWrapper[data-charge="2"] > span::after {
  transform: scaleY(0.6);
}
.listAppliedWrapper[data-charge="3"] > span::after {
  transform: scaleY(0.9);
}

:root {
  --header-height: 50px;
  --innerWidth: 1400px;
  --pad-inner: 20px;
  --color: #222;
  --color-yellow: #FFE246;
  --color-pink: #F4A5A1;
  --color-skin: #FFCF87;
  --color-orange: #F68B60;
  --color-green: #13C7C8;
  --color-blue: #37BBFF;
  --color-ocean: #1D98C2;
  --color-gray: #d9d9d9;
  --rounded-large: 1rem;
}
@media screen and (min-width: 992px) {
  :root {
    --header-height: 90px;
  }
}

#header {
  width: 100%;
  height: var(--header-height);
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  position: fixed;
  top: 0;
  z-index: 50;
}

.header_main {
  width: 100%;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.header_main .header_main_logo {
  width: 120px;
}
@media screen and (min-width: 992px) {
  .header_main .header_main_logo {
    width: 200px;
  }
}
.header_main .header_main_right {
  display: none;
  height: 100%;
}
@media screen and (min-width: 992px) {
  .header_main .header_main_right {
    display: flex;
    gap: 20px;
  }
}
@media screen and (min-width: 1200px) {
  .header_main .header_main_right {
    gap: 50px;
  }
}

ul.header_menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 1200px) {
  ul.header_menu {
    gap: 20px;
  }
}
ul.header_menu li {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  padding: 0 5px;
  cursor: pointer;
}
@media screen and (min-width: 1200px) {
  ul.header_menu li {
    padding: 0 20px;
  }
}
ul.header_menu li::after {
  content: "";
  display: block;
  width: 0;
  height: 4px;
  background-color: var(--color-ocean);
  position: absolute;
  bottom: 0;
  left: 50%;
  transition: 0.3s;
}
ul.header_menu li > a {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 16px;
  color: var(--color);
  transition: 0.3s;
}
ul.header_menu li:hover::after {
  width: 100%;
  left: 0px;
}
ul.header_menu li:hover a {
  color: var(--color-ocean);
}
ul.header_menu li:hover .menuDropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: visible;
}

.menuDropdown {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  max-height: calc(100vh - var(--header-height));
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  position: fixed;
  left: 0;
  top: var(--header-height);
  transition: 0.3s;
}
.menuDropdown .dropDownItems {
  display: flex;
  justify-content: center;
  gap: 2vw;
  max-width: var(--innerWidth);
  margin: 0 auto;
  padding-top: 60px;
}
.menuDropdown .dropDownItems .dropDownItem {
  width: 16.6666666667%;
  max-width: 200px;
  text-align: center;
  margin-bottom: 3vw;
}
.menuDropdown .dropDownItems .dropDownItem a {
  display: block;
  font-size: 16px;
  color: var(--color);
  padding: 5px 0;
}
.menuDropdown .dropDownItems .dropDownItem a:hover {
  color: var(--color-ocean);
}
.menuDropdown .dropDownItems .dropDownItem .dropDownItem_title {
  margin-bottom: 10px;
}
.menuDropdown .dropDownItems .dropDownItem .dropDownItem_title span {
  display: inline-block;
  font-size: 18px;
  background: linear-gradient(var(--color-yellow), var(--color-yellow)) 0 65%/100% 5px no-repeat;
}
.menuDropdown .dropDownItems .dropDownItem .dropDownItem_photo {
  aspect-ratio: 16/10;
  width: 100%;
  border-radius: var(--rounded-large);
  overflow: hidden;
  margin-bottom: 10px;
}
.menuDropdown .dropDownItems .dropDownItem .dropDownItem_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menuDropdown .dropDownItems .dropDownItem:hover a:not(:hover) {
  opacity: 0.3;
}

.header_main_btns {
  display: flex;
  align-items: center;
  gap: 15px;
}
.header_main_btns > button, .header_main_btns > a {
  display: block;
  font-size: 16px;
  color: #fff;
  border: 2px solid transparent;
  border-radius: var(--rounded-large);
  padding: 7px 20px;
}
.header_main_btns > button._pink, .header_main_btns > a._pink {
  background-color: var(--color-pink);
  border-color: var(--color-pink);
}
.header_main_btns > button._green, .header_main_btns > a._green {
  background-color: var(--color-green);
  border-color: var(--color-green);
}
.header_main_btns > button._blue, .header_main_btns > a._blue {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}
.header_main_btns > button:hover, .header_main_btns > a:hover {
  background-color: #fff;
}
.header_main_btns > button:hover._pink, .header_main_btns > a:hover._pink {
  color: var(--color-pink);
}
.header_main_btns > button:hover._green, .header_main_btns > a:hover._green {
  color: var(--color-green);
}
.header_main_btns > button:hover._blue, .header_main_btns > a:hover._blue {
  color: var(--color-blue);
}
.header_main_btns > button.join, .header_main_btns > a.join {
  border-color: var(--color-green);
  background-color: #EBFFFF;
  color: var(--color-green);
}
.header_main_btns > button.join:hover, .header_main_btns > a.join:hover {
  color: #fff;
  background-color: var(--color-green);
}
.header_main_btns > button.member._green, .header_main_btns > a.member._green {
  border-color: #EBFFFF;
  background-color: #EBFFFF;
  color: var(--color-green);
}
.header_main_btns > button.member._blue, .header_main_btns > a.member._blue {
  border-color: #e9f7ff;
  background-color: #e9f7ff;
  color: var(--color-blue);
}
.header_main_btns > button.member span, .header_main_btns > a.member span {
  display: inline-block;
  position: relative;
  padding-left: 1.5em;
}
.header_main_btns > button.member span::before, .header_main_btns > a.member span::before {
  content: "\e7fd";
  display: block;
  font-family: "Material Icons";
  font-size: 24px;
  line-height: 1;
  position: absolute;
  top: 0;
  left: -4px;
}
.header_main_btns._loginedBtn {
  position: relative;
}
.header_main_btns._loginedBtn::after {
  content: "";
  display: block;
  width: 0;
  height: 4px;
  background-color: var(--color-ocean);
  position: absolute;
  bottom: 0;
  left: 50%;
  transition: 0.3s;
}
.header_main_btns._loginedBtn .menuDropdown {
  width: calc(100% + 20px);
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #000;
  position: absolute;
  left: -10px;
}
.header_main_btns._loginedBtn .menuDropdown .dropDownItems {
  padding: 10px 0;
}
.header_main_btns._loginedBtn .menuDropdown .dropDownItems .dropDownItem {
  width: 100%;
  margin-bottom: 0;
}
.header_main_btns._loginedBtn:hover::after {
  width: 100%;
  left: 0px;
}
.header_main_btns._loginedBtn:hover .menuDropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: visible;
}

.switchBtn {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  font-size: 12px;
  border: 2px solid #000;
  background-color: #ccc;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  right: -40px;
}
@media screen and (min-width: 992px) {
  .switchBtn {
    display: flex;
  }
}
.switchBtn > span {
  display: block;
  position: relative;
}
.switchBtn._blue {
  color: var(--color-blue);
  border-color: var(--color-blue);
  background-color: var(--color-light);
}
.switchBtn._green {
  color: var(--color-green);
  border-color: var(--color-green);
  background-color: #EBFFFF;
}
.switchBtn:hover {
  color: #fff;
}
.switchBtn:hover._blue {
  background-color: var(--color-blue);
}
.switchBtn:hover._green {
  background-color: var(--color-green);
}

#footer {
  text-align: center;
  background-color: var(--color-green);
  position: relative;
  padding: 40px 0;
  overflow: hidden;
}
#footer::before, #footer::after {
  content: "";
  display: block;
  width: 30vw;
  padding-top: 30vw;
  background-color: var(--color-yellow);
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  position: absolute;
}
#footer.job {
  background-color: var(--color-blue);
}
#footer.job::before, #footer.job::after {
  background-color: var(--color-skin);
}
#footer::before {
  top: 50%;
  left: -160px;
  animation: morphing 0s 30s infinite;
}
#footer::after {
  bottom: 10%;
  right: -160px;
  animation: morphing -15s 30s infinite;
}
#footer ul {
  display: none;
  justify-content: center;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  gap: clamp(5px, 2vw, 40px);
}
#footer ul + ul {
  margin-top: -20px;
}
@media screen and (min-width: 768px) {
  #footer ul {
    display: flex;
  }
}
#footer ul li a {
  font-size: 16px;
  color: #fff;
}
#footer p {
  color: #fff;
  margin: 0;
}
#footer p a {
  color: #fff;
}

#indexContent {
  margin-top: calc(-1 * var(--header-height));
  padding-top: var(--header-height);
}

.indexInner {
  width: 100%;
  max-width: var(--innerWidth);
  margin: 0 auto;
  padding: 0 var(--pad-inner);
}
@media screen and (min-width: 768px) {
  .indexInner {
    --pad-inner: 50px;
  }
}
.indexInner.full {
  --innerWidth: 1920px;
}

.homeTitle {
  margin-bottom: 40px;
}
.homeTitle._white {
  color: #fff;
}
.homeTitle .title_en {
  display: inline-block;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  background: linear-gradient(var(--color-yellow), var(--color-yellow)) 0 65%/100% 5px no-repeat;
  padding-bottom: 5px;
}
.homeTitle .title_ch {
  display: block;
  font-size: 3rem;
  letter-spacing: 0.24em;
}

.homeJobTitle {
  text-align: center;
  margin-bottom: 40px;
}
.homeJobTitle .title_ch {
  display: block;
  font-size: 3rem;
  font-weight: bold;
  letter-spacing: 0.24em;
  color: var(--color);
  margin: 0 0 0.5rem;
}
.homeJobTitle .title_en {
  font-size: 1.5rem;
  color: var(--color-blue);
  letter-spacing: 0.1em;
}
.homeJobTitle._white .title_ch, .homeJobTitle._white .title_en {
  color: #fff;
}

.homeText {
  font-size: 1.8rem;
}

.contentKv {
  padding-top: 30px;
  padding-bottom: clamp(30px, 14vw, 220px);
}
.contentKv.job {
  margin-bottom: clamp(30px, 8vw, 80px);
  padding-bottom: 0;
}

.kvMarquee {
  overflow: hidden;
  margin-bottom: 30px;
}
.kvMarquee .gallery_marquee {
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: railLeft 60s linear infinite;
}
.kvMarquee .itemMarquee {
  font-size: clamp(20px, 1.2vw, 28px);
  white-space: nowrap;
  margin-right: 10px;
}

.kvSlideWrapper {
  position: relative;
  border-radius: var(--rounded-large);
  overflow: hidden;
}
.kvSlideWrapper .kvSlide_bg .item_bg {
  aspect-ratio: 16/12;
  outline: none;
}
@media screen and (min-width: 992px) {
  .kvSlideWrapper .kvSlide_bg .item_bg {
    aspect-ratio: 16/7;
  }
}
.kvSlideWrapper .kvSlide_bg .item_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kvSlideWrapper .kvSlide_ct {
  width: 100%;
  padding: 0 clamp(20px, 3vw, 60px) clamp(20px, 3vw, 30px) clamp(20px, 3vw, 60px);
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
}
.kvSlideWrapper .kvSlide_ct .item_ct {
  color: #fff;
  outline: none;
  transition: all 0.4s ease-in-out;
}
.kvSlideWrapper .kvSlide_ct .item_ct label {
  font-size: clamp(16px, 2vw, 20px);
}
.kvSlideWrapper .kvSlide_ct .item_ct p {
  font-size: clamp(40px, 4vw, 110px);
}

.kvBanner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  padding: 0 20px;
  margin: auto;
  text-align: center;
  border-radius: var(--rounded-large);
  background-image: url(../img/newindex/job/job-banner.jpg);
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 768px) {
  .kvBanner {
    aspect-ratio: 21/9;
    width: 100%;
    max-width: 1400px;
    height: auto;
  }
}
.kvBanner .bannerText {
  font-size: clamp(30px, 7vw, 50px);
  color: #fff;
  text-shadow: -1px -1px 5px rgba(0, 0, 0, 0.8);
}

.contentAdv {
  padding-top: 40px;
  padding-bottom: 40px;
  background-image: url(../img/newindex/recruit-bg01-sp.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
@media screen and (min-width: 992px) {
  .contentAdv {
    display: flex;
    align-items: center;
    aspect-ratio: 1920/480;
    background-image: url(../img/newindex/recruit-bg01.jpg);
  }
}
.contentAdv .homeTitle, .contentAdv .homeText {
  color: #fff;
}
.contentAdv .advImgWrapper {
  display: flex;
  justify-content: space-between;
  gap: 2vw;
  margin-top: 70px;
}
@media screen and (min-width: 992px) {
  .contentAdv .advImgWrapper {
    width: 54vw;
    position: absolute;
    top: 3.85vw;
    right: 3vw;
    margin-top: 0;
  }
}
.contentAdv .advImgWrapper .advImgBlock {
  width: 27vw;
  aspect-ratio: 16/25;
}
@media screen and (min-width: 992px) {
  .contentAdv .advImgWrapper .advImgBlock {
    width: 16vw;
  }
}
.contentAdv .advImgWrapper .advImgBlock:nth-child(2) {
  transform: translateY(-7vw);
}
.contentAdv .advImgWrapper .advImgBlock:nth-child(3) {
  transform: translateY(3vw);
}
.contentAdv .advImgWrapper .advImg {
  border-radius: var(--rounded-large);
  overflow: hidden;
}
.contentAdv .advImgWrapper .advImg .item_adv {
  height: auto;
}
.contentAdv .advImgWrapper .advImg .item_adv img {
  border-radius: var(--rounded-large);
}

.contentJobAdv .homeText {
  text-align: center;
}
.contentJobAdv .verticalSlide .slideWrapper {
  padding: clamp(40px, 14vw, 80px) 0;
}
@media screen and (min-width: 992px) {
  .contentJobAdv .verticalSlide .slideWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: calc(100vh - var(--header-height));
    position: sticky;
    top: calc(var(--header-height));
    left: 0;
  }
}
.contentJobAdv .verticalSlide .slideInner::-webkit-scrollbar {
  display: none;
}
@media screen and (min-width: 992px) {
  .contentJobAdv .verticalSlide .slideInner {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 50px 0;
    overflow-y: scroll;
  }
}
.contentJobAdv .verticalSlide .slideInner .innerBlock {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 992px) {
  .contentJobAdv .verticalSlide .slideInner .innerBlock {
    padding-left: 10vw;
    padding-right: 10vw;
    display: flex;
    gap: 3vw;
  }
}
.contentJobAdv .verticalSlide .slideInner .innerBlock .advBox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
@media screen and (min-width: 992px) {
  .contentJobAdv .verticalSlide .slideInner .innerBlock .advBox {
    margin-top: 0;
  }
}
.contentJobAdv .verticalSlide .slideInner .innerBlock .advBox .adv_figure {
  aspect-ratio: 400/345;
  height: 170px;
}
@media screen and (min-width: 992px) {
  .contentJobAdv .verticalSlide .slideInner .innerBlock .advBox .adv_figure {
    height: 345px;
  }
}
.contentJobAdv .verticalSlide .slideInner .innerBlock .advBox .adv_figure img {
  width: 100%;
  height: 100%;
  border-radius: var(--rounded-large);
  object-fit: cover;
}
.contentJobAdv .verticalSlide .slideInner .innerBlock .advBox .adv_text {
  width: 250px;
  padding-left: 20px;
}
@media screen and (min-width: 992px) {
  .contentJobAdv .verticalSlide .slideInner .innerBlock .advBox .adv_text {
    padding-left: 40px;
  }
}
.contentJobAdv .verticalSlide .slideInner .innerBlock .advBox .adv_text label {
  font-size: 14px;
  font-weight: normal;
  color: var(--color-gray);
}
.contentJobAdv .verticalSlide .slideInner .innerBlock .advBox .adv_text p {
  font-size: 18px;
  margin-bottom: 0;
}
.contentJobAdv .verticalSlide .slideInner .innerBlock .advBox .adv_text .brighter {
  display: inline-block;
  font-size: 20px;
  color: var(--color-orange);
}

.contentAct {
  padding: clamp(40px, 36vw, 60px) 0;
  background-image: url(../img/newindex/dotted.png);
}

.contentStep {
    padding: clamp(40px, 12vw, 60px) 0;
    background:#f5f5f5;
}
.contentStep .stepWrapper img.train_step {
    display: none;
}
.contentStep .stepWrapper img.train_step_m {
    width: 100%;
    display: block;
    margin:0 auto;
    max-width: 600px;
}

@media screen and (min-width: 992px) {
  .contentAct .actWrapper {
    display: flex;
    gap: clamp(30px, 3vw, 90px);
  }
}
.contentAct .actWrapper .act_col + .act_col {
  margin-top: 50px;
}
@media screen and (min-width: 992px) {
  .contentAct .actWrapper .act_col {
    max-width: 50%;
    flex: 1;
  }
  .contentAct .actWrapper .act_col + .act_col {
    margin-top: 0;
  }
}

ul.listAct {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.listAct li {
  display: flex;
  align-items: center;
  padding: clamp(10px, 4vw, 24px) clamp(0px, 1vw, 24px);
  gap: 15px;
}
@media screen and (min-width: 768px) {
  ul.listAct li {
    gap: 20px;
  }
}
ul.listAct li:not(:first-child) {
  border-top: 1px solid #FDC1CB;
}
ul.listAct li .listAct_figure {
  display: block;
  width: 60px;
}
ul.listAct li .listAct_figure img {
  border-radius: 50%;
  object-fit: cover;
  width: 60px;
  height: auto;
  transition: 0.3s;
}
ul.listAct li .listAct_info {
  width: calc(100% - 60px - 15px);
}
@media screen and (min-width: 768px) {
  ul.listAct li .listAct_info {
    width: calc(100% - 60px - 20px);
    display: flex;
    align-items: center;
  }
}
ul.listAct li .listAct_info .listAct_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
  ul.listAct li .listAct_info .listAct_text {
    width: calc(100% - 100px);
    margin-bottom: 0;
  }
}
ul.listAct li .listAct_info .listAct_text .listAct_title {
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 10px 0 0;
}
ul.listAct li .listAct_info .listAct_text .listAct_title a {
  color: var(--color);
}
ul.listAct li .listAct_info .listAct_btn {
  width: 100px;
  font-size: 16px;
  padding: 8px 4px;
  color: #fff;
  border-radius: var(--rounded-large);
  background-color: var(--color-orange);
  border: 2px solid var(--color-orange);
  outline: none;
}
ul.listAct li .listAct_info .listAct_btn:hover {
  background-color: #fff;
  color: var(--color-orange);
}

.actTextWrapper p {
  font-size: 1.8rem;
  padding-top: 1em;
  margin-bottom: 0;
}
.actTextWrapper .actText_light {
  display: inline-block;
  font-size: 2.3rem;
  color: var(--color-green);
}

.actVideo {
  max-width: 500px;
  box-shadow: 0 0 16px 0 rgba(180, 180, 180, 0.3);
  margin: 0 auto;
  cursor: pointer;
}
@media screen and (min-width: 992px) {
  .actVideo {
    margin: -7vw auto 0;
  }
}
.actVideo .actVideo_cover {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
}
.actVideo .actVideo_cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rounded-large) var(--rounded-large) 0 0;
}
.actVideo .actVideo_cover span.playVideo {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  border-radius: var(--rounded-large) var(--rounded-large) 0 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.3s;
}
.actVideo .actVideo_cover span.playVideo::before, .actVideo .actVideo_cover span.playVideo::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
.actVideo .actVideo_cover span.playVideo::before {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-color: var(--color-green);
}
.actVideo .actVideo_cover span.playVideo::after {
  content: "\e037";
  font-family: "Material Symbols Rounded";
  font-size: 28px;
  color: #fff;
}
.actVideo .actVideo_info {
  background-color: #fff;
  padding: 20px 20px;
}
.actVideo .actVideo_info .actVideo_infoTop {
  margin-bottom: 20px;
}
.actVideo .actVideo_info .actVideo_title {
  font-size: 18px;
  color: var(--color);
}
.actVideo:hover .actVideo_cover span.playVideo {
  background-color: rgba(0, 0, 0, 0.4);
}
.actVideo:hover .actVideo_cover span.playVideo::before {
  transform: translate(-50%, -50%) scale(0);
}
.actVideo:hover .actVideo_cover span.playVideo::after {
  transform: translate(-50%, -50%) scale(2);
}

.video_pop_up {
  display: none;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
}
.video_pop_up .popbox {
  background-color: #fff;
  box-shadow: 0 0 0 2px #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
  .video_pop_up .popbox {
    width: 854px;
    height: 480px;
  }
}
.video_pop_up .popbox iframe {
  width: 375px;
  height: 230px;
}
@media screen and (min-width: 768px) {
  .video_pop_up .popbox iframe {
    width: 854px;
    height: 480px;
  }
}

.actGallery_frame {
  max-width: 750px;
  margin: auto;
  border-radius: var(--rounded-large);
  background: linear-gradient(315deg, rgb(55, 187, 255) 0%, rgb(252, 215, 39) 50%, rgb(246, 139, 96) 100%);
}
.actGallery_frame .actGallery {
  max-width: 750px;
  padding: 5px;
}
.actGallery_frame .actGallery .slick-dots {
  width: 100%;
  text-align: center;
  list-style: none;
  position: absolute;
  bottom: -20px;
  margin: 0;
  padding: 0;
}
.actGallery_frame .actGallery .slick-dots li {
  display: inline-block;
  border: none;
  background: none;
  padding: 0 4px;
}
.actGallery_frame .actGallery .slick-dots li button {
  width: 8px;
  height: 8px;
  font-size: 0;
  border-radius: 50%;
  background-color: var(--color-gray);
  border: none;
  margin: 0;
  padding: 0;
}
.actGallery_frame .actGallery .slick-dots li.slick-active button {
  background-color: var(--color-green);
}
.actGallery_frame .actGallery img {
  border-radius: var(--rounded-large);
}

.actGallery_text {
  max-width: 750px;
  margin: 20px auto 0;
}

.contentExclusive {
  padding: clamp(40px, 36vw, 80px) 0 0;
}
.contentExclusive .listExclusive {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2vw;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contentExclusive .listExclusive li {
  width: 46%;
}
@media screen and (min-width: 768px) {
  .contentExclusive .listExclusive li {
    width: 24%;
  }
  .contentExclusive .listExclusive li:nth-child(-n+3) {
    transform: translateX(-5vw);
  }
  .contentExclusive .listExclusive li:not(:nth-child(-n+3)) {
    transform: translateX(5vw);
  }
}
.contentExclusive .listExclusive li .listExclusive_figure {
  width: 100%;
  max-width: 240px;
  margin: 0 auto 10px;
}
.contentExclusive .listExclusive li .listExclusive_text {
  text-align: center;
  font-size: 1.8rem;
}

.contentPartner {
  background: #f5f5f5;
  padding: clamp(40px, 12vw, 60px) 0;
}

.contentFeature {
  padding: clamp(40px, 36vw, 80px) 0;
  background: center/cover no-repeat;
  background-image: url(../img/newindex/feature-bg.jpg);
}

.featWrapper {
  position: relative;
}
@media screen and (min-width: 992px) {
  .featWrapper {
    display: flex;
    align-items: center;
    gap: 5%;
  }
}
.featWrapper .featureFigures {
  width: 100%;
  position: static;
}
@media screen and (min-width: 992px) {
  .featWrapper .featureFigures {
    width: 50%;
  }
}
.featWrapper .featureFigures .slick-dots {
  width: 100%;
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: -20px;
  left: 0;
}
@media screen and (min-width: 992px) {
  .featWrapper .featureFigures .slick-dots {
    bottom: 0;
  }
}
.featWrapper .featureFigures .slick-dots li {
  display: inline-block;
  border: none;
  background: none;
  padding: 0 4px;
}
.featWrapper .featureFigures .slick-dots li button {
  width: 8px;
  height: 8px;
  font-size: 0;
  border-radius: 50%;
  background-color: var(--color-gray);
  border: none;
  margin: 0;
  padding: 0;
}
.featWrapper .featureFigures .slick-dots li.slick-active button {
  background-color: var(--color-green);
}
.featWrapper .featureTexts {
  width: 100%;
}
@media screen and (min-width: 992px) {
  .featWrapper .featureTexts {
    width: 45%;
  }
}
.featWrapper .featureTexts .item_featureText {
  color: #fff;
}
.featWrapper .featureTexts .item_featureText .featureTitle {
  font-size: 24px;
}
.featWrapper .featureTexts .item_featureText p {
  font-size: 18px;
  text-align: justify;
  margin-bottom: 0;
}
@media screen and (min-width: 992px) {
  .featWrapper .featureTexts .item_featureText p {
    height: 4.5em;
  }
}

.partnerTitleWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.partnerTitleWrapper .homeTitle {
  margin-bottom: 0;
}
.partnerTitleWrapper .partnerNumer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: clamp(20px, 2vw, 30px);
  color: var(--color-green);
}
@media screen and (min-width: 992px) {
  .partnerTitleWrapper .partnerNumer {
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
  }
}
.partnerTitleWrapper .partnerNumer .numberBar {
  --font-size: 30px;
  display: inline-block;
  font-size: var(--font-size);
  font-weight: bold;
  line-height: var(--font-size);
  letter-spacing: 0.1em;
  padding: 0 20px;
}
.partnerTitleWrapper .partnerNumer .numberBar .numPool {
  display: inline-block;
  vertical-align: bottom;
  font-size: var(--font-size);
  line-height: var(--font-size);
}
.partnerTitleWrapper .partnerNumer .numberBar .numPool .numCon, .partnerTitleWrapper .partnerNumer .numberBar .numPool .comma {
  height: var(--font-size);
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}
.partnerTitleWrapper .partnerNumer .numberBar .numPool .comma {
  overflow: visible;
}
.partnerTitleWrapper .partnerNumer .numberBar .numPool .numCon span {
  position: relative;
}
@media screen and (min-width: 992px) {
  .partnerTitleWrapper .partnerNumer .numberBar {
    --font-size: 60px;
  }
}

.partnerWrapper {
  --partner: calc( 100% / 3 - 1.35vw );
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
  height: auto
  overflow-y: visible;
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .partnerWrapper {
    --partner: calc(100% / 6 - 1.67vw);
  }
}
.partnerWrapper::-webkit-scrollbar {
  width: 4px;
  border-radius: 5px;
}
.partnerWrapper::-webkit-scrollbar-thumb {
  border-radius: 4px;
}
.partnerWrapper:hover::-webkit-scrollbar {
  background-color: rgba(0, 0, 0, 0.1);
}
.partnerWrapper:hover::-webkit-scrollbar-thumb {
  background-color: var(--color-pink);
}
.partnerWrapper a {
  width: var(--partner);
}

.partnerMoreBtn {
  text-align: center;
}
.partnerMoreBtn .partnerBtn {
  display: inline-block;
  font-size: 16px;
  color: #fff;
  border: 2px solid var(--color-pink);
  border-radius: var(--rounded-large);
  background-color: var(--color-pink);
  padding: 8px 20px;
}
.partnerMoreBtn .partnerBtn:hover {
  background-color: #fff;
  color: var(--color-pink);
}
.partnerMoreBtn .partnerBtn.job {
  border-color: var(--color-orange);
  background-color: var(--color-orange);
}
.partnerMoreBtn .partnerBtn.job:hover {
  background-color: #fff;
  color: var(--color-orange);
}

.contentTrain {
  padding: clamp(40px, 12vw, 180px) 0;
  background-image: url(../img/newindex/dotted.png);
}

.trainCareerWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10vw;
  width: 80vw;
  position: relative;
  margin: 3vh auto 0;
}
@media screen and (min-width: 768px) {
  .trainCareerWrapper {
    width: 60vw;
    margin-top: 10vh;
  }
}
@media screen and (min-width: 1200px) {
  .trainCareerWrapper {
    width: 60vh;
    aspect-ratio: 1;
  }
}
.trainCareerWrapper svg.borderFlow {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.trainCareerWrapper svg.borderFlow path {
  fill: #def0ff;
  stroke-width: 0px;
}
.trainCareerWrapper .numberBar {
  --font-size: 80px;
  display: inline-block;
  font-size: var(--font-size);
  font-weight: bold;
  line-height: var(--font-size);
  letter-spacing: 0.1em;
  padding: 0 20px;
  font-weight: 900;
}
.trainCareerWrapper .numberBar .numPool {
  display: inline-block;
  vertical-align: bottom;
  font-size: var(--font-size);
  line-height: var(--font-size);
}
.trainCareerWrapper .numberBar .numPool .numCon, .trainCareerWrapper .numberBar .numPool .comma {
  height: var(--font-size);
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}
.trainCareerWrapper .numberBar .numPool .comma {
  overflow: visible;
}
.trainCareerWrapper .numberBar .numPool .numCon span {
  position: relative;
}
.trainCareerWrapper .trainCareerText {
  font-size: 18px;
}
@media screen and (min-width: 768px) {
  .trainCareerWrapper .trainCareerText {
    font-size: 24px;
  }
}
@media screen and (min-width: 1200px) {
  .trainCareerWrapper .trainCareerText {
    font-size: clamp(15px, 1.2vw, 24px);
    width: max-content;
    text-align: center;
  }
}
.trainCareerWrapper .trainCareer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: fit-content;
  gap: 2vh;
  position: relative;
  padding-left: 120px;
  z-index: 2;
}
@media screen and (min-width: 1200px) {
  .trainCareerWrapper .trainCareer {
    position: absolute;
  }
}
.trainCareerWrapper .trainCareer::before {
  content: "";
  display: block;
  background: center/cover no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.trainCareerWrapper .trainCareer h3 {
  font-size: 22px;
  word-break: keep-all;
  margin: 0;
}
.trainCareerWrapper .trainCareer label {
  font-weight: bold;
  color: #1ba1e6;
}
.trainCareerWrapper .trainCareer.style1 {
  top: 0vh;
}
@media screen and (min-width: 768px) {
  .trainCareerWrapper .trainCareer.style1 {
    padding-left: 250px;
  }
}
@media screen and (min-width: 1200px) {
  .trainCareerWrapper .trainCareer.style1 {
    padding-left: 25vh;
    left: 20%;
  }
}
.trainCareerWrapper .trainCareer.style1::before {
  width: 140px;
  aspect-ratio: 199/171;
  background-image: url(../img/newindex/job/career-img1.svg);
}
@media screen and (min-width: 768px) {
  .trainCareerWrapper .trainCareer.style1::before {
    width: 200px;
  }
}
@media screen and (min-width: 1200px) {
  .trainCareerWrapper .trainCareer.style1::before {
    width: 22vh;
  }
}
.trainCareerWrapper .trainCareer.style2 {
  bottom: 0vh;
}
@media screen and (min-width: 768px) {
  .trainCareerWrapper .trainCareer.style2 {
    padding-left: 250px;
  }
}
@media screen and (min-width: 1200px) {
  .trainCareerWrapper .trainCareer.style2 {
    padding-left: 26vh;
    left: -40%;
  }
}
.trainCareerWrapper .trainCareer.style2::before {
  width: 130px;
  aspect-ratio: 233/130;
  background-image: url(../img/newindex/job/career-img2.svg);
}
@media screen and (min-width: 768px) {
  .trainCareerWrapper .trainCareer.style2::before {
    width: 230px;
  }
}
@media screen and (min-width: 1200px) {
  .trainCareerWrapper .trainCareer.style2::before {
    width: 24vh;
  }
}
.trainCareerWrapper .trainCareer.style3 {
  bottom: 0vh;
}
@media screen and (min-width: 768px) {
  .trainCareerWrapper .trainCareer.style3 {
    padding-left: 238px;
  }
}
@media screen and (min-width: 1200px) {
  .trainCareerWrapper .trainCareer.style3 {
    padding-left: 25vh;
    right: -40%;
  }
}
.trainCareerWrapper .trainCareer.style3::before {
  width: 130px;
  aspect-ratio: 201/161;
  background-image: url(../img/newindex/job/career-img3.svg);
}
@media screen and (min-width: 768px) {
  .trainCareerWrapper .trainCareer.style3::before {
    width: 210px;
  }
}
@media screen and (min-width: 1200px) {
  .trainCareerWrapper .trainCareer.style3::before {
    width: 22vh;
  }
}

.contentTrack {
  background-color: var(--color-blue);
  padding-top: clamp(20px, 2.5vw, 40px);
  padding-bottom: clamp(20px, 2.5vw, 40px);
  position: relative;
  overflow: hidden;
  margin:0;
}
.contentTrack::before, .contentTrack::after {
  content: "";
  display: block;
  width: 30vw;
  padding-top: 30vw;
  background-color: var(--color-skin);
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  position: absolute;
}
.contentTrack.business {
  padding-top: clamp(20px, 8vw, 80px);
  padding-bottom: clamp(20px, 8vw, 80px);
  background-color: var(--color-green);
}
.contentTrack.business::before, .contentTrack.business::after {
  background-color: var(--color-yellow);
}
.contentTrack::before {
  top: 50%;
  left: -12vw;
  animation: morphing -7.5s 30s infinite;
}
@media screen and (min-width: 992px) {
  .contentTrack::before {
    left: -160px;
  }
}
.contentTrack::after {
  bottom: 30%;
  right: -12vw;
  animation: morphing -11s 30s infinite;
}
@media screen and (min-width: 992px) {
  .contentTrack::after {
    right: -160px;
  }
}
.contentTrack .trackWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  font-size: clamp(20px, 2vw, 30px);
  color: #fff;
  position: relative;
  z-index: 2;
}
.contentTrack .trackWrapper + .trackWrapper {
  margin-top: clamp(5px, 3vw, 10px);
}
.contentTrack .trackWrapper .trackNumber {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 992px) {
  .contentTrack .trackWrapper .trackNumber {
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
  }
}
.contentTrack .trackWrapper .trackNumber .numberBar {
  --font-size: 30px;
  display: inline-block;
  font-size: var(--font-size);
  font-weight: bold;
  line-height: var(--font-size);
  letter-spacing: 0.1em;
  padding: 0 20px;
}
.contentTrack .trackWrapper .trackNumber .numberBar .numPool {
  display: inline-block;
  vertical-align: bottom;
  font-size: var(--font-size);
  line-height: var(--font-size);
}
.contentTrack .trackWrapper .trackNumber .numberBar .numPool .numCon, .contentTrack .trackWrapper .trackNumber .numberBar .numPool .comma {
  height: var(--font-size);
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}
.contentTrack .trackWrapper .trackNumber .numberBar .numPool .comma {
  overflow: visible;
}
.contentTrack .trackWrapper .trackNumber .numberBar .numPool .numCon span {
  position: relative;
}
@media screen and (min-width: 992px) {
  .contentTrack .trackWrapper .trackNumber .numberBar {
    --font-size: 60px;
  }
}
.contentTrack .trackWrapper .trackText {
  font-size: clamp(24px, 3vw, 40px);
  text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
  text-align: center;
  margin-top: clamp(5px, 3vw, 10px);
}
.contentTrack .trackWrapper .trackText.light {
  color: #FFF6C8;
}
@media screen and (min-width: 992px) {
  .contentTrack .trackWrapper .trackText {
    text-align: left;
    margin-top: 0;
  }
}
.contentTrack .trackWrapper .trackBtn {
  display: inline-block;
  font-size: 24px;
  color: #fff;
  border: 2px solid #FF6969;
  border-radius: var(--rounded-large);
  background-color: #FF6969;
  text-shadow: none;
  padding: 8px 20px;
  margin-top: 15px;
}
.contentTrack .trackWrapper .trackBtn:hover {
  color: #FF6969;
  background-color: #fff;
}

.contentStrength {
  padding: clamp(40px, 12vw, 180px) 0;
  background-image: url(../img/newindex/lattice.jpg);
}

.strengWrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: 3vw;
  margin-bottom: clamp(30px, 5vw, 80px);
}
@media screen and (min-width: 768px) {
  .strengWrapper {
    display: none;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
  }
  .strengWrapper[data-strength="1"] {
    display: flex;
  }
}
.strengWrapper .streng_text {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .strengWrapper .streng_text {
    width: 45%;
  }
}
.strengWrapper .streng_text .streng_title {
  color: var(--color-ocean);
  margin-bottom: 15px;
}
.strengWrapper .streng_text .streng_title label {
  font-size: 1.2em;
  font-family: Arial;
  font-weight: normal;
  margin-bottom: 0;
  margin-right: 5px;
}
.strengWrapper .streng_text .streng_title span {
  display: inline-block;
  font-size: 1.75em;
}
.strengWrapper .streng_text .streng_content {
  font-size: 1.2em;
  text-align: justify;
}
.strengWrapper .streng_figure {
  width: 90%;
  max-width: 620px;
  aspect-ratio: 25/16;
  border-radius: var(--rounded-large);
  box-shadow: 0 0 0 4px var(--color-orange), 4px 4px 0 4px var(--color-yellow);
}
@media screen and (min-width: 768px) {
  .strengWrapper .streng_figure {
    width: 50%;
  }
}
.strengWrapper .streng_figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rounded-large);
}

ul.listStrength {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 2vw;
}
@media screen and (min-width: 768px) {
  ul.listStrength {
    display: flex;
  }
}
ul.listStrength li {
  width: 25%;
  cursor: pointer;
  transition: 0.3s;
}
ul.listStrength li .listStreng_figure {
  aspect-ratio: 25/16;
}
ul.listStrength li .listStreng_figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rounded-large);
}
ul.listStrength li .listStreng_info {
  color: var(--color-ocean);
}
ul.listStrength li .listStreng_info label {
  font-family: Arial;
  font-weight: normal;
  margin-bottom: 0;
  margin-right: 5px;
}
ul.listStrength li .listStreng_info span {
  display: inline-block;
  font-size: 1.2em;
}
ul.listStrength:hover li:not(:hover) {
  opacity: 0.2;
}

.contentServ {
  padding: clamp(40px, 12vw, 60px) 0;
  margin-bottom: 0px;
  background-image: url(../img/newindex/lattice.jpg);
}
.contentServ .listServ {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6.5vw 5vw;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contentServ .listServ li {
  width: 46%;
}
.contentServ .listServ li .listServ_figure{
    text-align: center;
}
.contentServ .listServ_figure img{
    border-radius: 50%;
    width: 85px;
    border: 10px solid #fff;
    outline: 3px solid #fff;
    transition: .3s;
}
.contentServ .listServ li:hover img {
    outline: 3px solid #052A75;
}
.contentServ .listServ li .listServ_text .servTitle {
    font-size: 1.8rem;
}
.contentServ .listServ li .listServ_text .servText{
    font-size: 1.2rem;
    position: relative;
    top: 5px; 
    transform: translateX(-20%);
    opacity: 1; 
}
.contentActivity {
    padding: clamp(40px, 12vw, 60px) 0;
}
.contentActivity h3{
    font-size: 15px;
    margin:10px 0 0 0;
    line-height: 1.4em;
}
.contentActivity .activityWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5vw 2vw; 
    justify-content: space-between; 
}
.contentActivity .activityWrapper .item_Activity {
    width: 48.5%;
    aspect-ratio: 16 / 9;
}
.contentActivity .item_Activity img{
    border-radius: var(--rounded-large);
}

@media screen and (min-width: 768px) {
  .contentServ .listServ li {
    width: 22%;
  }
}
.contentServ .listServ li .listServ_figure {
  width: 100%;
  max-width: 240px;
  margin: 0 auto 10px;
}
.contentServ .listServ li .listServ_text {
  text-align: justify;
  font-size: 1.5rem;
}
.contentServ .listServ li .listServ_text .servTitle {
  font-size: 2rem;
  color: var(--color-blue);
  text-align: center;
}

.contentNews {
  padding: clamp(40px, 12vw, 60px) 0;
  background: #f4f4f4;
}

.newsGallery {
  padding-bottom: 50px;
}
.newsGallery .item_news {
  outline: none;
}
.newsGallery .item_news a {
  display: block;
  outline: none;
  margin: 0 20px;
}
.newsGallery .item_news .item_figure {
  aspect-ratio: 16/9;
  border-radius: var(--rounded-large);
  overflow: hidden;
}
.newsGallery .item_news .item_figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.newsGallery .item_news .item_text {
  color: var(--color);
  margin: 10px 0;
}
.newsGallery .item_news .item_text .item_label {
  display: block;
  font-weight: normal;
  cursor: pointer;
  margin-bottom: 0;
}
.newsGallery .item_news .item_text .item_title {
  font-size: 18px;
  margin: 0;
  color: var(--color-ocean);
  word-break: break-all;
  display: -webkit-inline-box;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-height: 1.5;
  height: 1.5em;
}
.newsGallery .item_news .item_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color);
}
.newsGallery .item_news .item_info .item_icon {
  display: block;
  font-size: 0;
  transition: 0.3s;
}
.newsGallery .item_news .item_info .item_icon::before {
  content: "\e038";
  font-family: "Material Symbols Rounded";
  font-size: 28px;
  line-height: 1;
}
.newsGallery .item_news a:hover .item_info .item_icon {
  color: var(--color-green);
  transform: translate(-5px, -5px) scale(1.5);
}
.newsGallery button.slick-arrow {
  width: 40px;
  height: 40px;
  background-color: var(--color-pink);
  box-shadow: 3px 3px 10px 3px rgba(120, 120, 120, 0.2);
  border-radius: 50%;
  border: none;
  outline: none;
  position: absolute;
  font-size: 0;
  color: transparent;
  z-index: 2;
  top: 40%;
  transition: all 0.2s;
}
.newsGallery button.slick-arrow::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  box-shadow: 0 0 0 lightgray;
  transition: all 300ms ease;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.newsGallery button.slick-arrow:hover {
  background-color: var(--color-gray);
}
.newsGallery button.slick-arrow:hover::before {
  border-color: var(--color-green);
  box-shadow: 3px -3px 0 #fff;
}
.newsGallery button.slick-arrow.slick-prev {
  left: 0px;
}
.newsGallery button.slick-arrow.slick-prev::before {
  left: 55%;
  transform: translate(-50%, -50%) rotate(-135deg);
}
.newsGallery button.slick-arrow.slick-next {
  right: 0px;
}
.newsGallery button.slick-arrow.slick-next::before {
  left: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.newsGallery.job .item_news .item_text .item_title {
  color: var(--color-blue);
}
.newsGallery.job .item_news a:hover .item_info .item_icon {
  color: var(--color-blue);
  transform: translate(-5px, -5px) scale(1.5);
}
.newsGallery.job button.slick-arrow {
  background-color: var(--color-orange);
}
.newsGallery.job button.slick-arrow:hover {
  background-color: var(--color-gray);
}
.newsGallery.job button.slick-arrow:hover::before {
  border-color: var(--color-blue);
}

.contentOther {
  padding: 60px 0 clamp(40px, 10vw, 100px);
}
.contentOther ul.listOtherLinks {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 768px) {
  .contentOther ul.listOtherLinks {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 5vw, 30px);
  }
  .contentOther ul.listOtherLinks + ul.listOtherLinks {
    margin-top: clamp(10px, 5vw, 30px);
  }
}
.contentOther ul.listOtherLinks li {
  flex: 1;
  padding: 1px;
  border-radius: var(--rounded-large);
  background: linear-gradient(157deg, #009ea7 0%, #fcd727 50%, #fcc1ca 100%);
  margin-top: 10px;
}
@media screen and (min-width: 768px) {
  .contentOther ul.listOtherLinks li {
    margin-top: 0;
  }
}
.contentOther ul.listOtherLinks li a {
  display: block;
  font-size: 1.6rem;
  text-align: center;
  color: var(--color);
  background-color: #fff;
  padding: 14px 20px;
  border-radius: var(--rounded-large);
  transition: 0.3s;
}
.contentOther ul.listOtherLinks li a:hover {
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 0.4);
}

.pageKvWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background: url(../img/form/firm-bg.jpg) center/cover no-repeat;
  margin-bottom: 40px;
}
.pageKvWrapper .kvInner {
  max-width: 440px;
  min-height: 300px;
  margin: auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 20px;
}
.pageKvWrapper .kvInner::before {
  content: "";
  display: none;
  width: 70%;
  aspect-ratio: 385/292;
  background: url(../img/form/firm-img1.svg) center/cover no-repeat;
  position: absolute;
  bottom: 0;
  right: 110%;
}
@media screen and (min-width: 768px) {
  .pageKvWrapper .kvInner::before {
    display: block;
  }
}
.pageKvWrapper .kvInner .formLogo {
  aspect-ratio: 348/89;
}
.pageKvWrapper .kvInner .formLogo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pageKvWrapper .kvInner h2 {
  font-size: 24px;
  color: #fff;
  line-height: 1.5;
  margin: 0;
}
.pageKvWrapper .kvText {
  color: #fff;
  text-align: center;
}
.pageKvWrapper .kvText h2 {
  line-height: 1.5;
  margin: 0;
}

.formSection {
  padding: clamp(30px, 5vw, 50px) 0;
}
.formSection._bg {
  background-color: #e1edf0;
  padding: clamp(30px, 5vw, 80px) 0;
  margin-top: clamp(30px, 5vw, 80px);
}
.formSection .formInner {
  max-width: 1240px;
  margin: auto;
  padding: 0 20px;
}
.formSection .formInner._flex {
  align-items: center;
  gap: 10%;
}
@media screen and (min-width: 768px) {
  .formSection .formInner._flex {
    display: flex;
  }
}
.formSection .formInner._flex._reflex {
  flex-direction: row-reverse;
}
.formSection .formInner .sectionTitleWrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.formSection .formInner .sectionTitleWrapper .titleLabel {
  display: inline-block;
  padding: 0 10px 5px 0;
  background: linear-gradient(var(--color-yellow), var(--color-yellow)) 0 90%/100% 5px no-repeat;
}
.formSection .formInner .sectionTitleWrapper .sectionTitle {
  font-weight: bold;
  padding-left: 0;
}
.formSection .formInner ul.formJobList {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 768px) {
  .formSection .formInner ul.formJobList {
    display: flex;
    flex-wrap: wrap;
  }
}
.formSection .formInner ul.formJobList li {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 1.5em;
  padding-right: 1.5em;
  margin-bottom: 0.75em;
}
@media screen and (min-width: 768px) {
  .formSection .formInner ul.formJobList li {
    width: 50%;
  }
}
.formSection .formInner ul.formJobList li::before {
  content: "";
  display: block;
  aspect-ratio: 1;
  width: 1em;
  background: url(../img/form/firm-icon.svg) center/cover no-repeat;
  position: absolute;
  top: 0.25em;
  left: 0;
}
.formSection .formInner .formFigure {
  margin-top: 40px;
}
@media screen and (min-width: 768px) {
  .formSection .formInner .formContent {
    width: 50%;
  }
  .formSection .formInner .formFigure {
    width: 40%;
    margin-top: 0px;
  }
}
.formSection .formInner .firmIntro {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: justify;
}

.aboutMainWrapper {
  position: relative;
  padding: 40px 0 80px;
  overflow: hidden;
}
.aboutMainWrapper .aboutPatternBG {
  width: 70%;
  height: calc(100% - 130px);
  background-color: #e1edf0;
  border-radius: 0 50px 50px 0;
  position: absolute;
  top: 50px;
  left: 0;
}
.aboutMainWrapper .inner {
  max-width: 1700px;
  position: relative;
  padding: 0px 20px 80px;
  margin: auto;
}
@media screen and (min-width: 992px) {
  .aboutMainWrapper .inner {
    display: flex;
  }
}
.aboutMainWrapper .inner .textPattern {
  font-size: 50px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.08em;
  word-break: break-all;
  color: rgba(27, 161, 230, 0.4);
  position: absolute;
  top: -50px;
  left: 0;
  pointer-events: none;
}
@media screen and (min-width: 992px) {
  .aboutMainWrapper .inner .textPattern {
    font-size: 100px;
  }
}
.aboutMainWrapper .inner .indexBluePattern {
  bottom: -90px;
  right: -30px;
}
@media screen and (min-width: 992px) {
  .aboutMainWrapper .inner .indexBluePattern {
    bottom: -160px;
    right: -80px;
  }
}
.aboutMainWrapper .inner .aboutContent {
  padding-top: 10px;
}
@media screen and (min-width: 992px) {
  .aboutMainWrapper .inner .aboutContent {
    width: 39%;
    padding-top: 60px;
    padding-right: 40px;
  }
}
.aboutMainWrapper .inner .aboutContent .txt {
  margin-top: 10px;
}
@media screen and (min-width: 992px) {
  .aboutMainWrapper .inner .aboutContent .txt {
    margin-top: 20px;
  }
}
.aboutMainWrapper .inner .aboutContent .txt p {
  font-size: 16px;
}
@media screen and (min-width: 992px) {
  .aboutMainWrapper .inner .aboutContent .txt p {
    font-size: 17px;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 992px) {
  .aboutMainWrapper .inner .aboutPicture {
    width: 61%;
    transform: translateY(-40px);
  }
}
.aboutMainWrapper .inner .aboutPicture .picFrameWrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.aboutMainWrapper .inner .aboutPicture .picFrameWrapper .picFrame {
  width: calc(50% - 5px);
}
.aboutMainWrapper .inner .aboutPicture .picFrameWrapper .picFrame:nth-child(1) img {
  border-radius: 20px 0 0 0;
}
.aboutMainWrapper .inner .aboutPicture .picFrameWrapper .picFrame:nth-child(2) img {
  border-radius: 0 20px 0 0;
}
.aboutMainWrapper .inner .aboutPicture .picFrameWrapper .picFrame:nth-child(3) img {
  border-radius: 0 0 0 20px;
}
.aboutMainWrapper .inner .aboutPicture .picFrameWrapper .picFrame:nth-child(4) img {
  border-radius: 0 0 20px 0;
}

.serviceMainWrapper {
  --color: #333333;
  --color-light: #fdfaf8;
  position: relative;
  padding: 0 20px;
}
.serviceMainWrapper.job {
  --color: #1ba1e6;
  --color-light: #E2F3FA;
}
.serviceMainWrapper.recruit {
  --color: #f68b60;
  --color-light: #FDF2EC;
}
.serviceMainWrapper .inner {
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
}

.serviceIntroText {
  font-size: 16px;
  margin-bottom: 20px;
}
.serviceIntroText.highlight {
  color: var(--color);
}

.serviceIntroWrapper {
  margin-bottom: 50px;
}
@media screen and (min-width: 768px) {
  .serviceIntroWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2vw;
  }
}
.serviceIntroWrapper .serviceIntro {
  padding: 20px 30px 20px;
  margin-bottom: 20px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 3px 10px 2px rgba(160, 160, 160, 0.3);
}
@media screen and (min-width: 768px) {
  .serviceIntroWrapper .serviceIntro {
    width: 30%;
    margin-bottom: 0;
  }
}
.serviceIntroWrapper .serviceIntro .introIcon {
  width: 60%;
  padding-top: 60px;
  position: relative;
  margin: 0 auto 20px;
}
.serviceIntroWrapper .serviceIntro .introIcon svg {
  width: 100%;
  height: 100%;
  fill: var(--color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.serviceIntroWrapper .serviceIntro label {
  display: block;
  font-size: 17px;
  text-align: center;
  margin-bottom: 20px;
}
.serviceIntroWrapper .serviceIntro p {
  font-size: 16px;
  margin-bottom: 0;
}
.serviceIntroWrapper .serviceIntro ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: item;
}
.serviceIntroWrapper .serviceIntro ol li {
  display: flex;
  align-items: center;
  font-size: 16px;
  position: relative;
}
.serviceIntroWrapper .serviceIntro ol li + li {
  margin-top: 20px;
}
.serviceIntroWrapper .serviceIntro ol li::before {
  content: "0" counter(item);
  counter-increment: item;
  color: var(--color);
  font-weight: bold;
  margin-right: 10px;
}

.serviceFeatureWrapper {
  padding-bottom: 80px;
}
.serviceFeatureWrapper .serviceFeature {
  border-radius: 10px;
  border: 2px solid var(--color);
  overflow: hidden;
}
.serviceFeatureWrapper .serviceFeature + .serviceFeature {
  margin-top: 50px;
}
.serviceFeatureWrapper .serviceFeature .featureTop {
  background-color: var(--color-light);
  padding: 15px 20px;
}
@media screen and (min-width: 768px) {
  .serviceFeatureWrapper .serviceFeature .featureTop {
    display: flex;
    align-items: center;
    padding: 25px 20px;
  }
}
.serviceFeatureWrapper .serviceFeature .featureTop label {
  display: inline-block;
  min-width: max-content;
  font-size: 18px;
  font-weight: normal;
  color: #fff;
  background-color: var(--color);
  padding: 4px 10px;
  margin-right: 20px;
}
@media screen and (min-width: 768px) {
  .serviceFeatureWrapper .serviceFeature .featureTop label {
    margin-bottom: 0;
  }
}
.serviceFeatureWrapper .serviceFeature .featureTop p {
  font-size: 16px;
  margin-bottom: 0;
}
.serviceFeatureWrapper .serviceFeature .featureImg {
  text-align: center;
  padding: 10px 15px;
}
.serviceFeatureWrapper .serviceFeature .featureImg p {
  text-align: left;
  color: var(--color);
  margin: 0;
}

.documentWrapper {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
@media screen and (min-width: 480px) {
  .documentWrapper {
    gap: 3%;
  }
}
.documentWrapper .documentBox {
  width: 100%;
}
.documentWrapper .documentBox + .documentBox {
  margin-top: 50px;
}
@media screen and (min-width: 480px) {
  .documentWrapper .documentBox {
    width: 58.5%;
  }
  .documentWrapper .documentBox + .documentBox {
    width: 34%;
    margin-top: 0;
  }
}
.documentWrapper .documentImg {
  display: block;
  border-radius: 10px;
  border: 2px solid var(--color);
  overflow: hidden;
}
.documentWrapper .documentImg figcaption {
  display: none;
}
.documentWrapper .documentImg + .documentImg {
  margin-top: 6.4%;
}

table.payTable {
  width: 100%;
}
table.payTable tr {
  background-color: var(--color-light);
  border-bottom: 1px solid #fff;
}
table.payTable th, table.payTable td {
  padding: 5px 10px;
}
table.payTable th:not(:first-child), table.payTable td:not(:first-child) {
  text-align: center;
}
table.payTable tr:first-child th {
  background-color: var(--color);
  color: #fff;
}

.jobMainContainer {
  --side-width: 100%;
  width: 100%;
  position: relative;
}
@media screen and (min-width: 992px) {
  .jobMainContainer {
    display: flex;
    justify-content: center;
    --side-width: 340px;
  }
}
.jobMainContainer .jobSiderWrapper {
  width: var(--side-width);
  padding: 70px 20px 40px;
  position: relative;
}
@media screen and (min-width: 992px) {
  .jobMainContainer .jobSiderWrapper {
    padding: 100px 0px 50px 30px;
  }
}
.jobMainContainer .jobCtWrapper {
  min-height: 960px;
  padding: 0 20px 100px;
  position: relative;
}
@media screen and (min-width: 992px) {
  .jobMainContainer .jobCtWrapper {
    width: calc(100% - var(--side-width));
    padding: 50px 40px 200px 40px;
  }
}
@media screen and (min-width: 1200px) {
  .jobMainContainer .jobFlexWrapper {
    display: flex;
    gap: 2%;
  }
  .jobMainContainer .jobFlexWrapper > div {
    width: 49%;
  }
  .jobMainContainer .jobFlexWrapper > div.w30 {
    width: 29%;
  }
  .jobMainContainer .jobFlexWrapper > div.w40 {
    width: 39%;
  }
  .jobMainContainer .jobFlexWrapper > div.w60 {
    width: 59%;
  }
  .jobMainContainer .jobFlexWrapper > div.w70 {
    width: 69%;
  }
}

.jobRollingPattern {
  width: 380px;
  position: fixed;
  top: 40%;
  right: -120px;
  opacity: 0.08;
  pointer-events: none;
  animation: rollin_r 40s linear infinite;
}
.jobRollingPattern svg {
  fill: #1ba1e6;
}

.firmMatch {
  width: 100px;
  padding: 10px 10px;
  text-align: center;
}
.firmMatch .matchTitle {
  font-size: 15px;
  font-weight: bold;
  color: #333333;
  position: relative;
  padding-left: 1.5em;
}
@media screen and (min-width: 768px) {
  .firmMatch .matchTitle {
    font-size: 17px;
  }
}
.firmMatch .matchTitle::before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  background: url(../img/job/icon-puzzle.svg) 50%/100% no-repeat;
  position: absolute;
  top: 0.2em;
  left: 0px;
}
.firmMatch .matchPercent {
  font-size: 22px;
  font-weight: bold;
  color: #f68b60;
}
.firmMatch .matchRadarBtn {
  display: inline-flex;
  gap: 5px;
  background-color: #1ba1e6;
  border-radius: 5px;
  padding: 2px 0px;
}
@media screen and (min-width: 768px) {
  .firmMatch .matchRadarBtn {
    padding: 2px 3px;
  }
}
.firmMatch .matchRadarBtn svg {
  width: 20px;
  aspect-ratio: 1;
}
.firmMatch .matchRadarBtn > span {
  font-size: 12px;
  color: #fff;
}
.firmMatch .matchRadarBtn:hover {
  background-color: #1791d1;
}

.firmPhoto {
  width: 100px;
  height: 100px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.jobSider {
  background-color: #e1edf0;
  border-radius: 10px;
  padding: 0 20px 10px;
}
@media screen and (min-width: 992px) {
  .jobSider {
    position: sticky;
    top: 150px;
  }
}
.jobSider .siderWrapper {
  display: flex;
  flex-direction: column;
  margin-top: -40px;
}
@media screen and (min-width: 480px) {
  .jobSider .siderWrapper {
    flex-direction: row;
    margin-top: 5px;
  }
}
@media screen and (min-width: 992px) {
  .jobSider .siderWrapper {
    flex-direction: column;
    margin-top: 0;
  }
}
.jobSider .siderRow {
  font-size: 14px;
  padding-left: 120px;
}
@media screen and (min-width: 480px) {
  .jobSider .siderRow {
    width: 160px;
    padding-left: 0;
  }
}
@media screen and (min-width: 768px) {
  .jobSider .siderRow {
    width: auto;
  }
}
@media screen and (min-width: 992px) {
  .jobSider .siderRow {
    display: flex;
    margin-top: 10px;
  }
}
.jobSider .siderRow.mbHidden {
  display: none;
}
@media screen and (min-width: 992px) {
  .jobSider .siderRow.mbHidden {
    display: flex;
  }
}
.jobSider .siderRow .infoLabel {
  display: none;
  width: 5.5em;
  margin-bottom: 5px;
}
@media screen and (min-width: 480px) {
  .jobSider .siderRow .infoLabel {
    display: block;
  }
}
@media screen and (min-width: 992px) {
  .jobSider .siderRow .infoLabel {
    margin-bottom: 0;
  }
}
.jobSider .siderRow .infoContent {
  word-break: break-all;
}
@media screen and (min-width: 768px) {
  .jobSider .siderRow .infoContent {
    width: calc(100% - 5.5em);
  }
}
.jobSider .siderRow .statusGo {
  display: inline-block;
  color: #1ba1e6;
  text-decoration: underline;
}
.jobSider .siderRow .statusTextNote {
  display: inline-block;
  font-size: 12px;
}
.jobSider .siderGrid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 5px;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
}
@media screen and (min-width: 992px) {
  .jobSider .siderGrid {
    margin: 30px -10px -80px;
  }
}
.jobSider .siderGrid .gridBox {
  display: flex;
  flex-direction: column;
  width: calc(50% - 2.5px);
  background-color: #fef2f2;
  border-radius: 5px;
  color: #333333;
  position: relative;
  padding: 5px 30px 5px 12px;
}
.jobSider .siderGrid .gridBox::before {
  content: "";
  display: block;
  font-size: 24px;
  font-family: "Material Symbols Outlined";
  line-height: 1;
  position: absolute;
  top: 20px;
  right: 5px;
}
.jobSider .siderGrid .gridBox.star::before {
  content: "\e838";
}
.jobSider .siderGrid .gridBox.case::before {
  content: "\eb3f";
}
.jobSider .siderGrid .gridBox.news::before {
  content: "\e151";
}
.jobSider .siderGrid .gridBox.date::before {
  content: "\ebcc";
}
.jobSider .siderGrid .gridBox > label {
  font-size: 22px;
  font-family: Arial;
  color: #1ba1e6;
  cursor: pointer;
}
.jobSider .siderGrid .gridBox:hover {
  background-color: #fcdbdb;
}
.jobSider .siderGrid .gridBox:hover::before {
  color: #fff;
}

.siderUserWrapper {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 992px) {
  .siderUserWrapper {
    justify-content: center;
  }
}
.siderUserWrapper .userPhoto {
  width: 100px;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -50px;
  position: relative;
  cursor: pointer;
}
@media screen and (min-width: 992px) {
  .siderUserWrapper .userPhoto {
    width: 160px;
  }
}
.siderUserWrapper .userPhoto img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.siderUserWrapper .userPhoto::before, .siderUserWrapper .userPhoto::after {
  content: "";
  display: block;
  position: absolute;
  transform: scale(0.8) translate(40px, 4px);
  opacity: 1;
}
@media screen and (min-width: 992px) {
  .siderUserWrapper .userPhoto::before, .siderUserWrapper .userPhoto::after {
    transform: none;
    opacity: 0;
  }
}
.siderUserWrapper .userPhoto::before {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #fdfaf8;
  bottom: 0;
  right: 20px;
}
.siderUserWrapper .userPhoto::after {
  content: "\e3c9";
  font-size: 24px;
  font-family: "Material Icons";
  line-height: 1;
  color: #1ba1e6;
  bottom: 7px;
  right: 25px;
}
.siderUserWrapper .userPhoto:hover::before, .siderUserWrapper .userPhoto:hover::after {
  opacity: 1;
}
.siderUserWrapper .userInfo {
  text-align: center;
  font-size: 24px;
  margin-top: -40px;
  margin-left: 10px;
}
@media screen and (min-width: 992px) {
  .siderUserWrapper .userInfo {
    width: 100%;
    margin-top: 10px;
    margin-left: 0;
  }
}

.siderTutorWrapper {
  display: none;
  align-items: center;
  background-color: #fdfaf8;
  border-radius: 10px;
  padding: 10px 10px;
  margin: 100px -10px 0;
}
@media screen and (min-width: 992px) {
  .siderTutorWrapper {
    display: flex;
  }
}
.siderTutorWrapper .tutorPhoto {
  width: 80px;
}
.siderTutorWrapper .tutorPhoto img {
  width: 80px;
}
.siderTutorWrapper .tutorPhoto > span {
  display: block;
  text-align: center;
  padding-top: 5px;
}
.siderTutorWrapper .tutorInfo {
  width: calc(100% - 80px);
  padding-left: 10px;
}
.siderTutorWrapper .tutorInfo .tutorRow {
  display: block;
  font-size: 13px;
  word-break: break-all;
  color: #333333;
  position: relative;
  padding-left: 20px;
}
.siderTutorWrapper .tutorInfo .tutorRow + .tutorRow {
  margin-top: 5px;
}
.siderTutorWrapper .tutorInfo .tutorRow::before {
  content: "";
  display: block;
  font-family: fontAwesome;
  line-height: 1;
  position: absolute;
  top: 5px;
  left: 1px;
}
.siderTutorWrapper .tutorInfo .tutorRow.man::before {
  content: "\f007";
}
.siderTutorWrapper .tutorInfo .tutorRow.phone::before {
  content: "\f095";
}
.siderTutorWrapper .tutorInfo .tutorRow.time::before {
  content: "\f017";
}
.siderTutorWrapper .tutorInfo .tutorRow.mail::before {
  content: "\f0e0";
  font-size: 12px;
}
.siderTutorWrapper .tutorInfo .tutorRow.contact {
  margin-top: 10px;
}
.siderTutorWrapper .tutorInfo .tutorRow.contact::before {
  content: "👉";
  top: 1px;
}
.siderTutorWrapper .tutorInfo .tutorRow.contact:hover::before {
  animation: shake 0.5s step-end infinite;
}
.siderTutorWrapper .tutorInfo a.tutorRow:hover {
  color: #1ba1e6;
}

.statusSwitch {
  display: inline-block;
  font-weight: normal;
  padding-top: 5px;
  margin-bottom: 0;
}
.statusSwitch input[type=checkbox] {
  display: none;
}
.statusSwitch > div {
  background-color: #333333;
  border-radius: 20px;
  padding: 0px 7px 2px 5px;
  opacity: 0.6;
}
.statusSwitch > div > span {
  display: inline-block;
  font-size: 12px;
  color: #fff;
  position: relative;
  padding-left: 20px;
  transition: 0.2s;
}
.statusSwitch > div > span::before {
  content: attr(data-switchoff);
  display: block;
}
.statusSwitch > div > span::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 0;
  transition: 0.2s;
}
.statusSwitch input[type=checkbox]:not(:disabled) + div {
  cursor: pointer;
}
.statusSwitch input[type=checkbox]:checked + div {
  background-color: #1ba1e6;
  padding: 0px 3px 3px 7px;
}
.statusSwitch input[type=checkbox]:checked + div > span {
  padding-left: 0px;
  padding-right: 20px;
}
.statusSwitch input[type=checkbox]:checked + div > span::before {
  content: attr(data-switchon);
  display: block;
}
.statusSwitch input[type=checkbox]:checked + div > span::after {
  left: calc(100% - 18px);
}

.resumeSider {
  display: none;
  background-color: #e1edf0;
  border-radius: 20px;
  padding: 30px 25px 30px;
  position: sticky;
  top: 150px;
}
@media screen and (min-width: 992px) {
  .resumeSider {
    display: block;
  }
}

.resumeSiderTop {
  text-align: center;
  margin-bottom: 20px;
}
.resumeSiderTop .completeData {
  font-size: 18px;
  color: #f04d4f;
  margin-bottom: 15px;
}
.resumeSiderTop p {
  font-size: 16px;
}

.resumeAnchorWrapper .resumeAnchor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  cursor: pointer;
}
.resumeAnchorWrapper .resumeAnchor > div {
  color: #333333;
  position: relative;
  padding-left: 1.5em;
}
.resumeAnchorWrapper .resumeAnchor > div::before {
  content: "\f058";
  display: none;
  font-family: FontAwesome;
  font-size: 1.2em;
  line-height: 1;
  color: #62D087;
  position: absolute;
  top: 0.1em;
  left: 0;
}
.resumeAnchorWrapper .resumeAnchor > span {
  color: #1ba1e6;
  position: relative;
  padding-left: 1.5em;
}
.resumeAnchorWrapper .resumeAnchor > span::before {
  content: "\f88d";
  display: block;
  font-family: "Material Symbols Outlined";
  font-size: 1.2em;
  line-height: 1;
  position: absolute;
  top: 0.1em;
  left: 0;
}
.resumeAnchorWrapper .resumeAnchor + .resumeAnchor {
  margin-top: 20px;
}
.resumeAnchorWrapper .resumeAnchor:hover > div {
  color: #1ba1e6;
}
.resumeAnchorWrapper .resumeAnchor:hover > span {
  color: #1481ba;
}
.resumeAnchorWrapper .resumeAnchor.done > div::before {
  display: block;
}

.resumeSiderMB {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 10px;
  left: 0;
  padding: 0 20px;
}
@media screen and (min-width: 992px) {
  .resumeSiderMB {
    display: none;
  }
}
.resumeSiderMB .completeBtn {
  display: inline-block;
  line-height: 1.2;
  letter-spacing: 0.05em;
  padding: 10px 20px;
  background-color: #e1edf0;
  border-radius: 25px;
}
.resumeSiderMB .completeBtn > div {
  display: inline-block;
  font-size: 16px;
  color: #1ba1e6;
  position: relative;
  padding-right: 26px;
}
.resumeSiderMB .completeBtn > div::before {
  content: "\f88d";
  display: block;
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  top: -0.1em;
  right: 0;
  transition: 0.3s;
}

.messageAlertWrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
@media screen and (min-width: 1200px) {
  .messageAlertWrapper {
    margin-bottom: 30px;
  }
}
.messageAlertWrapper .messageItem {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px;
  color: black;
}
.messageAlertWrapper .messageItem.fromJobSeeker {
  background-color: #ffece0;
}
.messageAlertWrapper .messageItem.fromCompany {
  background-color: #ffe7e7;
}
.messageAlertWrapper .messageAlertText span.fromJobSeeker {
  color: var(--color-green);
}
.messageAlertWrapper .messageAlertText span.fromCompany {
  color: #1ba1e6;
}
.messageAlertWrapper .bi {
  vertical-align: -0.125em;
  margin-right: 8px;
}

.jobNotifyWrapper {
  position: relative;
  margin-bottom: 70px;
}
.jobNotifyWrapper .notifyLabel {
  display: inline-block;
  width: var(--width-l);
  font-size: 14px;
  text-align: center;
  background-color: #F69495;
  color: #fff;
}
@media screen and (min-width: 992px) {
  .jobNotifyWrapper .notifyLabel {
    font-size: 16px;
  }
}
.jobNotifyWrapper .jobNotifyRow {
  display: flex;
  align-items: center;
  --width-l: 40px;
  --width-d: 50px;
  --width-m: 45px;
  margin-bottom: 20px;
}
@media screen and (min-width: 992px) {
  .jobNotifyWrapper .jobNotifyRow {
    --width-l: 50px;
    --width-d: 60px;
    --width-m: 60px;
  }
}
.jobNotifyWrapper .jobNotifyRow.noDate {
  --width-d: 0px;
  --width-l: 80px;
}
.jobNotifyWrapper .jobNotifyRow.noDate .notifyLabel {
  margin-right: 10px;
}
@media screen and (min-width: 992px) {
  .jobNotifyWrapper .jobNotifyRow.noDate {
    --width-l: 100px;
  }
}
.jobNotifyWrapper .jobNotifyRow.inList {
  position: relative;
  padding-left: 30px;
}
@media screen and (min-width: 992px) {
  .jobNotifyWrapper .jobNotifyRow.inList {
    padding-left: 70px;
  }
}
.jobNotifyWrapper .jobNotifyRow .notifyCheck {
  font-size: 0;
  position: absolute;
  top: 5px;
  left: 0px;
}
@media screen and (min-width: 992px) {
  .jobNotifyWrapper .jobNotifyRow .notifyCheck {
    left: 30px;
  }
}
.jobNotifyWrapper .jobNotifyRow .notifyCheck label {
  cursor: pointer;
  margin-bottom: 0;
}
.jobNotifyWrapper .jobNotifyRow .notifyCheck label input {
  display: none;
}
.jobNotifyWrapper .jobNotifyRow .notifyCheck label span {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #1ba1e6;
  border-radius: 4px;
  position: relative;
  transition: 0.2s;
}
.jobNotifyWrapper .jobNotifyRow .notifyCheck label span::before {
  content: "\f00c";
  display: block;
  font-size: 12px;
  line-height: 1;
  font-family: fontAwesome;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 0.2s;
}
.jobNotifyWrapper .jobNotifyRow .notifyCheck label:hover input ~ span::before {
  color: #1ba1e6;
  opacity: 0.35;
  transform: translate(-50%, -50%) scale(1);
  transition: 0s;
}
.jobNotifyWrapper .jobNotifyRow .notifyCheck label input[type=checkbox]:checked ~ span {
  border-width: 10px;
}
.jobNotifyWrapper .jobNotifyRow .notifyCheck label input[type=checkbox]:checked ~ span:before {
  transform: translate(-50%, -50%) scale(1);
  color: #fff;
  opacity: 1 !important;
}
.jobNotifyWrapper .jobNotifyRow .notifyDate {
  width: var(--width-d);
  font-size: 13px;
  line-height: 1.5;
  padding: 0 0px 0 10px;
}
@media screen and (min-width: 992px) {
  .jobNotifyWrapper .jobNotifyRow .notifyDate {
    font-size: 15px;
  }
}
.jobNotifyWrapper .jobNotifyRow .notifyTitleWrapper {
  width: calc(100% - var(--width-l) - var(--width-d) - var(--width-m));
  position: relative;
}
.jobNotifyWrapper .jobNotifyRow .notifyTitleWrapper::before {
  content: "";
  display: block;
  width: 99%;
  border-top: 2px dashed #ccc;
  position: absolute;
  top: calc(50% - 1px);
  left: 1px;
}
.jobNotifyWrapper .jobNotifyRow .notifyTitleWrapper .notifyTitle {
  font-size: 16px;
  color: #333333;
  background-color: #fff;
  padding: 1px 5px;
  position: relative;
  display: -webkit-inline-box;
  word-break: break-all;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  height: 1.5em;
}
.jobNotifyWrapper .jobNotifyRow .notifyTitleWrapper .notifyTitle:hover {
  color: var(--color-blue);
}
.jobNotifyWrapper .jobNotifyRow .notifyMore {
  display: inline-block;
  width: var(--width-m);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--color-blue);
  text-decoration: underline;
  text-align: right;
}
@media screen and (min-width: 992px) {
  .jobNotifyWrapper .jobNotifyRow .notifyMore {
    font-size: 16px;
  }
}
.jobNotifyWrapper .jobNotifyDetailTitle {
  --width-l: 50px;
  position: relative;
  padding-left: 40px;
  margin-bottom: 30px;
}
.jobNotifyWrapper .jobNotifyDetailTitle label.addToLove {
  position: absolute;
  top: 2px;
  left: 0;
}
.jobNotifyWrapper .jobNotifyDetailTitle .detailTitle {
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
}
.jobNotifyWrapper .jobNotifyDetail {
  margin-bottom: 30px;
}
.jobNotifyWrapper .jobNotifyDetail > p {
  font-size: 16px;
  text-align: justify;
  margin-bottom: 20px;
}
.jobNotifyWrapper .jobNotifyDetail .jobMainListWrapper .jobMainList .jobMainInfo .jobTitle, .jobNotifyWrapper .jobNotifyDetail .jobMainListWrapper .jobMainList .jobMainInfo .jobInfomation {
  padding-right: 0;
}
.jobNotifyWrapper .jobBtn + .jobBtn {
  margin-left: 10px;
}
.jobNotifyWrapper.forForm .jobNotifyRow .notifyTitleWrapper .notifyTitle:hover {
  color: var(--color-green);
}
.jobNotifyWrapper.forForm .jobNotifyRow .notifyCheck label span {
  border-color: var(--color-green);
}
.jobNotifyWrapper.forForm .jobNotifyRow .notifyMore {
  color: var(--color-green);
}

.jobRankWrapper {
  background-color: #e1edf0;
  padding: 20px 20px 10px;
  margin-bottom: 60px;
}
.jobRankWrapper .jobRankRow {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
}
.jobRankWrapper .jobRankRow .jobRankLabel {
  width: 50px;
  font-size: 18px;
  font-weight: bold;
  font-family: monospace;
}
.jobRankWrapper .jobRankRow .jobRankData {
  width: calc(100% - 50px);
  line-height: 1.8em;
}
.jobRankWrapper .jobRankRow .jobRankData > span {
  display: inline-block;
  margin-bottom: 5px;
}

.interviewSelectWrapper {
  margin-bottom: 30px;
}
.interviewSelectWrapper .interviewSelectRow {
  padding-left: 30px;
  margin-bottom: 20px;
}
.interviewSelectWrapper .interviewSelectRow label {
  cursor: pointer;
  margin-bottom: 0;
}
.interviewSelectWrapper .interviewSelectRow label input[type=radio], .interviewSelectWrapper .interviewSelectRow label input[type=checkbox] {
  display: none;
}
.interviewSelectWrapper .interviewSelectRow label span {
  display: block;
  font-size: 16px;
  position: relative;
}
.interviewSelectWrapper .interviewSelectRow label span::before, .interviewSelectWrapper .interviewSelectRow label span::after {
  content: "";
  display: block;
  position: absolute;
}
.interviewSelectWrapper .interviewSelectRow label span::before {
  width: 20px;
  height: 20px;
  border: 2px solid #1ba1e6;
  border-radius: 4px;
  top: 2px;
  left: -30px;
}
.interviewSelectWrapper .interviewSelectRow label span::after {
  content: "\f00c";
  font-size: 12px;
  line-height: 1;
  font-family: fontAwesome;
  color: #fff;
  top: 6px;
  left: -26px;
  transform: scale(0);
  transition: 0.2s;
}
.interviewSelectWrapper .interviewSelectRow label:hover span {
  color: #77c7f0;
}
.interviewSelectWrapper .interviewSelectRow label input[type=radio]:checked ~ span,
.interviewSelectWrapper .interviewSelectRow label input[type=checkbox]:checked ~ span {
  color: #1ba1e6;
}
.interviewSelectWrapper .interviewSelectRow label input[type=radio]:checked ~ span::before,
.interviewSelectWrapper .interviewSelectRow label input[type=checkbox]:checked ~ span::before {
  background-color: #1ba1e6;
}
.interviewSelectWrapper .interviewSelectRow label input[type=radio]:checked ~ span::after,
.interviewSelectWrapper .interviewSelectRow label input[type=checkbox]:checked ~ span::after {
  transform: scale(1);
}
.interviewSelectWrapper .rejectExcuse {
  display: none;
  font-size: 16px;
}
.interviewSelectWrapper .rejectExcuse select {
  width: 100%;
  height: 40px;
  font-size: 16px;
  border: 1px solid #999999;
  border-radius: 5px;
  outline-color: #1ba1e6;
  padding: 4px 10px;
  cursor: pointer;
  width: auto;
}
.interviewSelectWrapper .rejectExcuse select:hover, .interviewSelectWrapper .rejectExcuse select:active {
  border-color: #1ba1e6;
}

.firmInviteWrapper {
  margin-bottom: 60px;
}
.firmInviteWrapper .firmInvite button.slick-arrow {
  width: 40px;
  height: 40px;
  background-color: #fff;
  box-shadow: 3px 3px 10px 3px rgba(120, 120, 120, 0.2);
  border-radius: 50%;
  border: none;
  outline: none;
  position: absolute;
  font-size: 0;
  color: transparent;
  z-index: 2;
  top: 46%;
  transform: translateY(-50%);
  transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
}
.firmInviteWrapper .firmInvite button.slick-arrow::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-top: 4px solid #77c7f0;
  border-right: 4px solid #77c7f0;
  box-shadow: 0 0 0 lightgray;
  transition: all 200ms ease;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.firmInviteWrapper .firmInvite button.slick-arrow:hover::before {
  border-color: #1ba1e6;
  box-shadow: 3px -3px 0 #77c7f0;
}
.firmInviteWrapper .firmInvite button.slick-arrow.slick-prev, .firmInviteWrapper .firmInvite button.slick-arrow.owl-prev {
  left: -10px;
}
.firmInviteWrapper .firmInvite button.slick-arrow.slick-prev::before, .firmInviteWrapper .firmInvite button.slick-arrow.owl-prev::before {
  left: 55%;
  transform: translate(-50%, -50%) rotate(-135deg);
}
.firmInviteWrapper .firmInvite button.slick-arrow.slick-next, .firmInviteWrapper .firmInvite button.slick-arrow.owl-next {
  right: -10px;
}
.firmInviteWrapper .firmInvite button.slick-arrow.slick-next::before, .firmInviteWrapper .firmInvite button.slick-arrow.owl-next::before {
  left: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.firmInviteWrapper .inviteItem {
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  border: 5px solid #1ba1e6;
  outline: none;
  padding: 20px 15px;
  margin: 0 10px;
}
.firmInviteWrapper .inviteItem .itemTop {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.firmInviteWrapper .inviteItem .itemTop .firmPic {
  width: 120px;
}
.firmInviteWrapper .inviteItem .itemTitle {
  display: block;
  max-width: 240px;
  font-size: 18px;
  color: #1ba1e6;
  margin: 0px auto 20px;
  outline: none;
  display: -webkit-box;
  word-break: break-all;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 3em;
  cursor: pointer;
}
.firmInviteWrapper .inviteItem .itemTitle:hover {
  color: #1481ba;
}
.firmInviteWrapper .inviteItem .itemInfo {
  font-size: 15px;
  text-align: center;
  margin-bottom: 20px;
}
.firmInviteWrapper .inviteItem .itemBtns {
  text-align: center;
}
.firmInviteWrapper .inviteItem .itemBtns .jobBtn + .jobBtn {
  margin-left: 10px;
}

.jobMainListWrapper {
  margin-bottom: 10px;
}
.jobMainListWrapper .jobMainList {
  margin: 0;
  padding: 0 0 0 0px;
  list-style: none;
  --list-s-w: auto;
  --list-b-w: auto;
}
@media screen and (min-width: 768px) {
  .jobMainListWrapper .jobMainList {
    --list-s-w: 150px;
    --list-b-w: 130px;
    padding: 0 0 0 10px;
  }
}
@media screen and (min-width: 1200px) {
  .jobMainListWrapper .jobMainList {
    --list-s-w: 180px;
    --list-b-w: 170px;
  }
}
@media screen and (min-width: 1350px) {
  .jobMainListWrapper .jobMainList {
    --list-s-w: 270px;
  }
}
.jobMainListWrapper .jobMainList > li {
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 3px 10px 2px rgba(160, 160, 160, 0.3);
  margin-bottom: 10px;
}
@media screen and (min-width: 480px) {
  .jobMainListWrapper .jobMainList > li {
    margin-bottom: 30px;
  }
}
.jobMainListWrapper .jobMainList > li .jobListContent {
  padding: 20px 20px;
  position: relative;
}
.jobMainListWrapper .jobMainList > li .jobListContent.aiMatch .firmMatch {
  height: 100px;
  padding-top: 25px;
  background-color: #fef5f1;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  right: -10px;
}
.jobMainListWrapper .jobMainList > li .jobListContent.aiMatch .firmPhoto {
  position: absolute;
  top: 25px;
  right: -10px;
}
.jobMainListWrapper .jobMainList > li .jobListContent.aiMatch .jobTitle, .jobMainListWrapper .jobMainList > li .jobListContent.aiMatch .jobInfomation {
  padding-right: 80px;
}
@media screen and (min-width: 768px) {
  .jobMainListWrapper .jobMainList > li .jobListContent {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .jobMainListWrapper .jobMainList > li .jobListContent.aiMatch {
    min-height: 140px;
    padding: 20px 20px 20px 130px;
  }
  .jobMainListWrapper .jobMainList > li .jobListContent.aiMatch .firmMatch {
    height: auto;
    padding: 10px 5px;
    background: none;
    border-radius: 0;
    top: 24%;
    right: auto;
    left: 15px;
  }
  .jobMainListWrapper .jobMainList > li .jobListContent.aiMatch .firmPhoto {
    top: 50%;
    margin-top: -50px;
    right: auto;
    left: 15px;
  }
  .jobMainListWrapper .jobMainList > li .jobListContent.aiMatch .jobTitle, .jobMainListWrapper .jobMainList > li .jobListContent.aiMatch .jobInfomation {
    padding-right: 0px;
  }
}
@media screen and (min-width: 1200px) {
  .jobMainListWrapper .jobMainList > li .jobListContent {
    padding: 20px 30px;
  }
  .jobMainListWrapper .jobMainList > li .jobListContent.aiMatch {
    padding: 20px 30px 20px 130px;
  }
}
@media screen and (min-width: 768px) {
  .jobMainListWrapper .jobMainList .jobMainInfo {
    width: calc(100% - var(--list-s-w) - var(--list-b-w));
    max-width: 500px;
  }
}
.jobMainListWrapper .jobMainList .jobMainInfo .jobTitle {
  font-size: 20px;
  color: #1ba1e6;
  margin-bottom: 10px;
  display: -webkit-box;
  word-break: break-all;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 3em;
}
.jobMainListWrapper .jobMainList .jobMainInfo .jobTitle:hover {
  color: #1481ba;
}
@media screen and (min-width: 768px) {
  .jobMainListWrapper .jobMainList .jobMainInfo .jobTitle {
    -webkit-line-clamp: 1;
  }
}
.jobMainListWrapper .jobMainList .jobMainInfo .jobInfomation {
  font-size: 16px;
}
@media screen and (min-width: 768px) {
  .jobMainListWrapper .jobMainList .jobMainInfo .jobInfomation .jobCompany {
    display: inline-block;
    margin-right: 10px;
  }
}
.jobMainListWrapper .jobMainList .jobMainInfo .jobInfomation .jobLocation {
  position: relative;
  padding-left: 1em;
}
@media screen and (min-width: 768px) {
  .jobMainListWrapper .jobMainList .jobMainInfo .jobInfomation .jobLocation {
    display: inline-block;
  }
}
.jobMainListWrapper .jobMainList .jobMainInfo .jobInfomation .jobLocation::before {
  content: "\e8b4";
  display: block;
  font-family: "Material Icons";
  position: absolute;
  top: 0;
  left: 0;
}
.jobMainListWrapper .jobMainList .jobMainInfo .jobInfomation .googleFirm {
  display: inline-block;
  color: #333333;
  margin-left: 0.5em;
}
.jobMainListWrapper .jobMainList .jobMainInfo .jobInfomation .googleFirm::before {
  content: "\e8b6";
  display: block;
  font-size: 1em;
  font-family: "Material Icons";
  line-height: 1;
  transform: scale(1.5);
}
.jobMainListWrapper .jobMainList .jobMainInfo .jobInfomation .googleFirm:hover {
  color: #1ba1e6;
}
.jobMainListWrapper .jobMainList .jobMainInfo p {
  display: -webkit-box;
  word-break: break-all;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  height: 4.5em;
  margin-top: 10px;
}
.jobMainListWrapper .jobMainList .jobSalary {
  width: var(--list-s-w);
  font-size: 22px;
  color: #f68b60;
  word-break: break-all;
  text-align: center;
  padding: 10px 10px 20px;
}
@media screen and (min-width: 768px) {
  .jobMainListWrapper .jobMainList .jobSalary {
    padding: 10px 10px;
  }
}
.jobMainListWrapper .jobMainList .jobSalary.dateTime {
  font-size: 16px;
}
.jobMainListWrapper .jobMainList .jobListBtns {
  width: var(--list-b-w);
  text-align: center;
}
.jobMainListWrapper .jobMainList .jobListBtns .jobListBtn {
  display: block;
  width: 100%;
  font-size: 16px;
  text-align: center;
  color: #b3b3b3;
  border: 2px solid #b3b3b3;
  border-radius: 20px;
  box-shadow: none;
  background: none;
  outline: none;
  padding: 5px 10px;
}
.jobMainListWrapper .jobMainList .jobListBtns .jobListBtn:hover {
  color: #1ba1e6;
  border-color: #1ba1e6;
}
.jobMainListWrapper .jobMainList .jobListBtns .jobListBtn + .jobListBtn {
  margin-top: 10px;
}
.jobMainListWrapper .jobMainList .jobListBtns .jobListBtn.disabled {
  color: #b3b3b3;
  border-color: #b3b3b3;
  cursor: not-allowed;
}
.jobMainListWrapper .jobMainList .jobListBtns .jobListBtn.active {
  color: #1ba1e6;
  border-color: #1ba1e6;
}
.jobMainListWrapper .jobMainList .jobListBtns .jobListBtn[data-toggle=collapse] span {
  position: relative;
  padding-left: 10px;
  padding-right: 28px;
}
.jobMainListWrapper .jobMainList .jobListBtns .jobListBtn[data-toggle=collapse] span::before {
  content: "\e5cf";
  display: block;
  font-size: 20px;
  font-family: "Material Icons";
  line-height: 1;
  position: absolute;
  top: 4px;
  right: 0;
  transition: 0.3s;
}
.jobMainListWrapper .jobMainList .jobListBtns .jobListBtn[data-toggle=collapse]:not(.collapsed) {
  color: #1ba1e6;
  border-color: #1ba1e6;
}
.jobMainListWrapper .jobMainList .jobListBtns .jobListBtn[data-toggle=collapse]:not(.collapsed) span::before {
  transform: rotate(180deg);
}
.jobMainListWrapper .jobMainList .jobListBtns .iconBtn {
  margin-top: 10px;
}
.jobMainListWrapper .jobMainList .alreadyLooked {
  box-shadow: unset;
  background-color: #eef3f5;
}
.jobMainListWrapper .jobMainList .alreadyLooked div, .jobMainListWrapper .jobMainList .alreadyLooked p {
  font-weight: 300;
  color: #999;
}

.readingState {
  text-align: center;
  margin-top: 1em;
}
.readingState span {
  background-color: #FFFFFF;
  padding: 0.25em;
}

.jobHotWrapper {
  display: none;
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .jobHotWrapper {
    display: block;
  }
}
.jobHotWrapper .jobHotPane {
  border: 1px solid #ddd;
  border-top: none;
  padding: 20px 20px;
}
.jobHotWrapper .jobHotPane .jobHotBox {
  --hot-width: 25%;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.jobHotMBWrapper {
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .jobHotMBWrapper {
    display: none;
  }
}
.jobHotMBWrapper button.slick-arrow {
  width: 40px;
  height: 40px;
  background-color: #fff;
  box-shadow: 3px 3px 10px 3px rgba(120, 120, 120, 0.2);
  border-radius: 50%;
  border: none;
  outline: none;
  position: absolute;
  font-size: 0;
  color: transparent;
  z-index: 2;
  top: 46%;
  transform: translateY(-50%);
  transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
}
.jobHotMBWrapper button.slick-arrow::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-top: 4px solid #77c7f0;
  border-right: 4px solid #77c7f0;
  box-shadow: 0 0 0 lightgray;
  transition: all 200ms ease;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.jobHotMBWrapper button.slick-arrow:hover::before {
  border-color: #1ba1e6;
  box-shadow: 3px -3px 0 #77c7f0;
}
.jobHotMBWrapper button.slick-arrow.slick-prev, .jobHotMBWrapper button.slick-arrow.owl-prev {
  left: -10px;
}
.jobHotMBWrapper button.slick-arrow.slick-prev::before, .jobHotMBWrapper button.slick-arrow.owl-prev::before {
  left: 55%;
  transform: translate(-50%, -50%) rotate(-135deg);
}
.jobHotMBWrapper button.slick-arrow.slick-next, .jobHotMBWrapper button.slick-arrow.owl-next {
  right: -10px;
}
.jobHotMBWrapper button.slick-arrow.slick-next::before, .jobHotMBWrapper button.slick-arrow.owl-next::before {
  left: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.jobHotMBWrapper .jobHot {
  margin: 0 10px;
}

.jobHot {
  display: flex;
  flex-basis: var(--hot-width);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 5px solid #1ba1e6;
  background-color: #1ba1e6;
  outline: none !important;
  overflow: hidden;
}
.jobHot .hotFigure {
  width: 100%;
  aspect-ratio: 21/9;
}
.jobHot .hotFigure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jobHot .hotContent {
  font-size: 16px;
  color: #fff;
  text-align: center;
}

.jobHistoryContent {
  padding: 0px 20px;
}
.jobHistoryContent .inner {
  border-top: 1px solid #b3b3b3;
  padding: 20px 5px 20px;
}
.jobHistoryContent .stepIntro {
  font-size: 16px;
  margin-bottom: 20px;
}
.jobHistoryContent .jobStepWrapper {
  margin-left: -10px;
  margin-right: -10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
@media screen and (min-width: 768px) {
  .jobHistoryContent .jobStepWrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 1400px) {
  .jobHistoryContent .jobStepWrapper {
    margin-bottom: 40px;
  }
}
.jobHistoryContent .jobStepWrapper a {
  display: block;
  padding-left: 28%;
}
@media screen and (min-width: 992px) {
  .jobHistoryContent .jobStepWrapper a {
    padding-left: 0%;
  }
}
.jobHistoryContent .jobStepWrapper .jobStep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  width: 100%;
  max-width: 280px;
  min-height: 80px;
  height: 80px;
  margin: 0 auto;
  position: relative;
  padding: 20px 0 20px 20px;
}
@media screen and (min-width: 768px) {
  .jobHistoryContent .jobStepWrapper .jobStep {
    display: block;
    width: 12.5%;
    max-width: none;
    margin: 0;
    padding: 0;
    height: 120px;
  }
}
@media screen and (min-width: 1400px) {
  .jobHistoryContent .jobStepWrapper .jobStep {
    height: auto; /* 新增：允許高度自動調整 */
    min-height: 120px; /* 新增：保持最小高度 */
  }
}
.jobHistoryContent .jobStepWrapper .jobStep .stepIcon {
  width: 60px;
  padding-top: 60px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #b3b3b3;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -30px;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .jobHistoryContent .jobStepWrapper .jobStep .stepIcon {
    width: 60%;
    padding-top: 60%;
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto 15px;
  }
}
.jobHistoryContent .jobStepWrapper .jobStep .stepIcon svg {
  width: 100%;
  height: 60%;
  fill: #b3b3b3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.jobHistoryContent .jobStepWrapper .jobStep .stepText {
  display: block;
  width: 100%;
  font-size: 15px;
  color: #b3b3b3;
  text-align: center;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.5;
  margin-bottom: 5px;
}
@media screen and (min-width: 768px) {
  .jobHistoryContent .jobStepWrapper .jobStep .stepText {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    width: 100%;
    margin-top: -25px;
  }
}
@media screen and (min-width: 1400px) {
  .jobHistoryContent .jobStepWrapper .jobStep .stepText {
    position: static; /* 新增：恢復正常文檔流 */
    margin-top: 15px; /* 新增：調整與上方元素的間距 */
  }
}
.jobHistoryContent .jobStepWrapper .jobStep .stepDate {
  display: block;
  width: 100%;
  font-size: 13px;
  color: #333333;
  text-align: center;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .jobHistoryContent .jobStepWrapper .jobStep .stepDate {
    position: absolute;
    top: calc(100% + 20px); /* 確保在stepText下方 */
    left: 0;
    width: 100%;
  }
}
@media screen and (min-width: 1400px) {
  .jobHistoryContent .jobStepWrapper .jobStep .stepDate {
    top: unset;
  }
}
.jobHistoryContent .jobStepWrapper .jobStep + .jobStep {
  margin-top: 10px;
}
@media screen and (min-width: 768px) {
  .jobHistoryContent .jobStepWrapper .jobStep + .jobStep {
    margin-top: 0;
  }
}
.jobHistoryContent .jobStepWrapper .jobStep + .jobStep::before {
  content: "";
  display: block;
  height: 100%;
  border-left: 3px dashed #b3b3b3;
  position: absolute;
  bottom: 55%;
  left: 50px;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .jobHistoryContent .jobStepWrapper .jobStep + .jobStep::before {
    width: 100%;
    height: 0;
    border-left: none;
    border-bottom: 3px dashed #b3b3b3;
    position: absolute;
    top: 40%;
    left: -50%;
  }
}
@media screen and (min-width: 1400px) {
  .jobHistoryContent .jobStepWrapper .jobStep + .jobStep::before {
    top: 30%;
  }
}
.jobHistoryContent .jobStepWrapper .jobStep.done .stepIcon {
  box-shadow: 0 0 0 4px #1ba1e6;
}
.jobHistoryContent .jobStepWrapper .jobStep.done .stepIcon svg {
  fill: #1ba1e6;
}
.jobHistoryContent .jobStepWrapper .jobStep.done .stepText {
  color: #1ba1e6;
}
.jobHistoryContent .jobStepWrapper .jobStep.done + .jobStep.done:before {
  border-left-color: #1ba1e6;
}
@media screen and (min-width: 768px) {
  .jobHistoryContent .jobStepWrapper .jobStep.done + .jobStep.done:before {
    border-bottom-color: #1ba1e6;
  }
}
.jobHistoryContent .jobStepWrapper .jobStep.done a:hover .stepText {
  color: #f68b60;
}
.jobHistoryContent .jobStepWrapper .jobStep.done a:hover .stepIcon {
  box-shadow: 0 0 0 4px #f68b60;
}
.jobHistoryContent .jobStepWrapper .jobStep.done a:hover .stepIcon svg {
  fill: #f68b60;
}
.jobHistoryContent .jobStepWrapper .jobStep.dead .stepIcon {
  background-color: #000;
  box-shadow: 0 0 0 4px #000;
}
.jobHistoryContent .jobStepWrapper .jobStep.dead .stepIcon svg {
  fill: #fff;
}
.jobHistoryContent .jobStepWrapper .jobStep.dead .stepText {
  color: #000;
}
.jobHistoryContent .jobStepWrapper .jobStep.dead + .jobStep.done:before {
  border-left-color: #000;
}
@media screen and (min-width: 768px) {
  .jobHistoryContent .jobStepWrapper .jobStep.dead + .jobStep.done:before {
    border-bottom-color: #000;
  }
}
.jobHistoryContent .jobStepWrapper .jobStep.noShow .stepIcon {
  background-color: #ff4a4a;
  box-shadow: 0 0 0 4px #ff4a4a;
}
.jobHistoryContent .jobStepWrapper .jobStep.noShow .stepIcon svg {
  fill: #fff;
}
.jobHistoryContent .jobStepWrapper .jobStep.noShow .stepText {
  color: #ff4a4a;
}
.jobHistoryContent .jobStepWrapper .jobStep.noShow + .jobStep.done:before {
  border-left-color: #ff4a4a;
}
@media screen and (min-width: 768px) {
  .jobHistoryContent .jobStepWrapper .jobStep.noShow + .jobStep.done:before {
    border-bottom-color: #ff4a4a;
  }
}

.jobSearchWrapper, .jobFilterWrapper {
  --filter-number: 3;
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .jobSearchWrapper, .jobFilterWrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
  }
}
.jobSearchWrapper .jobFilterSelect, .jobFilterWrapper .jobFilterSelect {
  margin-bottom: 10px;
}
@media screen and (min-width: 480px) {
  .jobSearchWrapper .jobFilterSelect, .jobFilterWrapper .jobFilterSelect {
    width: calc((100% - 90px) / var(--filter-number));
    padding-right: 20px;
    margin-bottom: 0;
  }
}
.jobSearchWrapper .jobFilterSelect select, .jobFilterWrapper .jobFilterSelect select {
  width: 100%;
  height: 40px;
  font-size: 16px;
  border: 1px solid #999999;
  border-radius: 5px;
  outline-color: #1ba1e6;
  padding: 4px 10px;
  cursor: pointer;
}
.jobSearchWrapper .jobFilterSelect select:hover, .jobSearchWrapper .jobFilterSelect select:active, .jobFilterWrapper .jobFilterSelect select:hover, .jobFilterWrapper .jobFilterSelect select:active {
  border-color: #1ba1e6;
}
.jobSearchWrapper .jobFilterClear, .jobFilterWrapper .jobFilterClear {
  text-align: center;
}
@media screen and (min-width: 480px) {
  .jobSearchWrapper .jobFilterClear, .jobFilterWrapper .jobFilterClear {
    width: 90px;
  }
}
.jobSearchWrapper .jobFilterClear .filterClear, .jobFilterWrapper .jobFilterClear .filterClear {
  display: inline-block;
  border: none;
  background: none;
  border-radius: 0;
  outline: none;
  color: #b3b3b3;
  text-decoration: underline;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0.08em;
}
.jobSearchWrapper .jobFilterClear .filterClear:hover, .jobFilterWrapper .jobFilterClear .filterClear:hover {
  opacity: 0.7;
}

.jobSearchWrapper {
  --filter-number: 4;
  margin-bottom: 10px;
}

.jobSearchInputWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #999999;
  border-radius: 5px;
  outline-color: #1ba1e6;
  margin: 0 0 10px;
}
@media screen and (min-width: 480px) {
  .jobSearchInputWrapper {
    width: calc((100% - 90px) / var(--filter-number) * 2 - 20px);
    margin: 0 20px 0 0;
  }
}
.jobSearchInputWrapper:hover {
  border-color: #1ba1e6;
}
.jobSearchInputWrapper .jobSearchInput {
  width: calc(100% - 40px);
}
.jobSearchInputWrapper .jobSearchInput input {
  width: 100%;
  height: 40px;
  font-size: 16px;
  border: 1px solid #999999;
  border-radius: 5px;
  outline-color: #1ba1e6;
  padding: 4px 10px;
  cursor: pointer;
  height: 38px;
  cursor: auto;
  border: none !important;
  outline: none !important;
}
.jobSearchInputWrapper .jobSearchInput input:hover, .jobSearchInputWrapper .jobSearchInput input:active {
  border-color: #1ba1e6;
}
.jobSearchInputWrapper .jobSearchBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 38px;
  background: transparent;
  border: none;
  outline: none;
}
.jobSearchInputWrapper .jobSearchBtn::before {
  content: "\e8b6";
  display: block;
  font-size: 24px;
  font-family: "Material Icons";
  line-height: 1;
}
.jobSearchInputWrapper .jobSearchBtn:hover {
  color: #1ba1e6;
}
.jobSearchInputWrapper .jobSearchBtn:hover::before {
  transform: scale(1.1);
}

.searchFilterWrapper {
  margin-bottom: 20px;
}
.searchFilterWrapper .profileMoreCheck {
  display: inline-block;
  margin-right: 10px;
}
.searchFilterWrapper .profileMoreCheck label input[type=checkbox] {
  top: 3px;
}
.searchFilterWrapper .profileMoreCheck span {
  min-width: auto;
  line-height: 1.5;
  opacity: 0.5;
}
.searchFilterWrapper .profileMoreCheck span::before {
  top: 12px;
}
.searchFilterWrapper .profileMoreCheck span::after {
  top: 10px;
}
.searchFilterWrapper .profileMoreCheck input[type=checkbox]:checked ~ span {
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .jobDetailWrapper {
    padding-left: 30px;
  }
}
.jobDetailWrapper .jobDetailTitleWrapper {
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .jobDetailWrapper .jobDetailTitleWrapper {
    display: flex;
    justify-content: space-between;
    align-items: start;
  }
}
.jobDetailWrapper .jobDetailTitleWrapper .jobDetailTitle {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  color: #1ba1e6;
  position: relative;
  padding-right: 20px;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .jobDetailWrapper .jobDetailTitleWrapper .jobDetailTitle {
    max-width: calc(100% - 220px);
  }
}
.jobDetailWrapper .jobDetailTitleWrapper .jobDetailTitle::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: url(../img/index/icon-smallgear.svg) 50%/1em no-repeat;
  position: absolute;
  top: -0.2em;
  left: -10px;
  opacity: 0.3;
}
@media screen and (min-width: 768px) {
  .jobDetailWrapper .jobDetailTitleWrapper .jobDetailTitle::before {
    top: 0.25em;
    left: -30px;
    opacity: 1;
  }
}
.jobDetailWrapper .jobDetailTitleWrapper .jobDetailTitle.main {
  font-size: 24px;
}
.jobDetailWrapper .jobDetailTitleWrapper .jobDetailBtns {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding: 10px 10px;
  background-color: #e1edf0;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .jobDetailWrapper .jobDetailTitleWrapper .jobDetailBtns {
    width: 220px;
    position: static;
    padding: 0;
    background: none;
  }
}
.jobDetailWrapper .jobDetailContent {
  margin-bottom: 40px;
}
.jobDetailWrapper .jobDetailContent .detailBlock {
  font-size: 16px;
  margin-bottom: 20px;
}
.jobDetailWrapper .jobDetailContent .detailBlock .blockLabel {
  margin-bottom: 5px;
}
@media screen and (min-width: 768px) {
  .jobDetailWrapper .jobDetailContent .detailBlock {
    display: flex;
  }
  .jobDetailWrapper .jobDetailContent .detailBlock .blockLabel {
    width: 90px;
    padding-right: 20px;
    margin-bottom: 0;
  }
  .jobDetailWrapper .jobDetailContent .detailBlock .blockText {
    width: calc(100% - 90px);
  }
}
.jobDetailWrapper .jobDetailContent .thick {
  font-weight: bold;
}
.jobDetailWrapper .jobDetailContent .orange {
  color: #f68b60;
}
.jobDetailWrapper .jobDetailContent .blockBtn {
  display: inline-block;
  font-family: "微軟正黑體";
  color: #1ba1e6;
  border: 1px solid #1ba1e6;
  border-radius: 4px;
  padding: 2px 8px;
  margin-right: 5px;
  margin-bottom: 10px;
}
.jobDetailWrapper .jobDetailContent .blockBtn:hover {
  background-color: #e1edf0;
}
.jobDetailWrapper .jobDetailContent ol, .jobDetailWrapper .jobDetailContent ul {
  padding-left: 2em;
}
.jobDetailWrapper .jobDetailContent p {
  text-align: justify;
  padding: 10px;
}
.jobDetailWrapper .jobRecommendClass {
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.jobDetailWrapper .jobRecommendClass li {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 40px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 3px 10px 2px rgba(160, 160, 160, 0.3);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .jobDetailWrapper .jobRecommendClass li {
    width: 30%;
    max-width: none;
    margin: 0 1.6666% 40px;
  }
}
.jobDetailWrapper .jobRecommendClass li > a {
  display: block;
}
.jobDetailWrapper .jobRecommendClass li > a .classPic {
  display: block;
  overflow: hidden;
}
.jobDetailWrapper .jobRecommendClass li > a .classPic img {
  transition: 0.3s;
}
.jobDetailWrapper .jobRecommendClass li > a .classInfo {
  padding: 20px 20px;
}
.jobDetailWrapper .jobRecommendClass li > a .classInfo .infoTitle {
  font-size: 16px;
  color: #333333;
  text-align: center;
  margin-bottom: 5px;
}
.jobDetailWrapper .jobRecommendClass li > a .classInfo .infoContent {
  font-size: 14px;
  color: #b3b3b3;
  padding-left: 10px;
  position: relative;
  display: -webkit-box;
  word-break: break-all;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 5em;
}
.jobDetailWrapper .jobRecommendClass li > a .classInfo .infoContent::before {
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  background-color: #1ba1e6;
  position: absolute;
  top: 0;
  left: 0;
}
.jobDetailWrapper .jobRecommendClass li > a .classBtnBox {
  padding: 0 20px 20px;
}
.jobDetailWrapper .jobRecommendClass li > a .classBtnBox .classBtn {
  display: block;
  font-size: 16px;
  border-radius: 30px;
  border: 2px solid #1ba1e6;
  color: #1ba1e6;
  padding: 5px 10px;
  text-align: center;
  transition: 0.3s;
}
.jobDetailWrapper .jobRecommendClass li > a:not(hover) .classInfo .infoContent::before {
  transition: width 0.3s 0.3s, height 0.3s 0.3s, left 0.3s, transform 0.1s, border-radius 0.1s, opacity 0.3s 0.3s;
}
.jobDetailWrapper .jobRecommendClass li > a:hover .classPic img {
  transform: scale(1.2);
}
.jobDetailWrapper .jobRecommendClass li > a:hover .classInfo .infoContent::before {
  width: 40px;
  height: 40px;
  left: 6px;
  border-radius: 50%;
  opacity: 0.15;
  transform: rotate(-45deg);
  transition: width 0.3s, height 0.3s, left 0.3s, transform 0.3s 0.3s, border-radius 0.3s 0.3s, opacity 0.3s;
}
.jobDetailWrapper .jobRecommendClass li > a:hover .classBtnBox .classBtn {
  background-color: #e1edf0;
}

.resumeTitleWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.resumeTitleWrapper .resumeTitle {
  font-size: 17px;
  position: relative;
}
.resumeTitleWrapper .resumeTitle::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url("../img/icon-smallgear.svg") 50% center/100% no-repeat;
  position: absolute;
  bottom: 3px;
  right: -5px;
  z-index: -1;
  opacity: 0.2;
}
.resumeTitleWrapper .resumeTitle.forForm::before {
  background-image: url(../img/icon-smallgear-o.svg);
}
.resumeTitleWrapper .resumeTitleBtn {
  display: block;
  font-size: 16px;
  color: #1ba1e6;
  position: relative;
  padding-left: 1.5em;
  cursor: pointer;
}
.resumeTitleWrapper .resumeTitleBtn::before {
  content: "";
  display: block;
  font-family: "Material Symbols Outlined";
  font-size: 1.2em;
  line-height: 1;
  position: absolute;
  top: 0.15em;
  left: 0;
}
.resumeTitleWrapper .resumeTitleBtn:hover {
  color: #1481ba;
}
.resumeTitleWrapper .resumeTitleBtn.edit::before {
  content: "\f88d";
}
.resumeTitleWrapper .resumeTitleBtn.add::before {
  content: "\e145";
}

.typingLoading {
  display: none;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 22px;
}
.typingLoading > span {
  display: inline-block;
  vertical-align: middle;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background-color: #333333;
  opacity: 0.7;
  margin: 0 2px;
  animation: typingLoader 0.8s infinite alternate;
}
.typingLoading > span:nth-of-type(1) {
  margin-left: 5px;
}
.typingLoading > span:nth-of-type(2) {
  animation-delay: 0.2s;
}
.typingLoading > span:nth-of-type(3) {
  animation-delay: 0.6s;
}

@keyframes typingLoader {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
.profileControlWrapper {
  display: flex;
  justify-content: center;
  padding-bottom: 15px;
}
.profileControlWrapper .jobBtn {
  min-width: 120px;
  padding: 8px 16px;
  margin: 0 5px;
}
.profileControlWrapper .jobBtn span {
  font-size: 15px;
}

.profileContentEdit.typing {
  position: relative;
}
.profileContentEdit.typing .typingLoading {
  display: block;
}
.profileContentEdit.typing .profileControlWrapper {
  pointer-events: none;
  opacity: 0.2;
}

.labelTip {
  display: inline-block;
  cursor: pointer;
  position: relative;
}
.labelTip .tipText {
  display: none;
  min-width: max-content;
  font-size: 12px;
  font-weight: normal;
  font-family: "微軟正黑體";
  line-height: 1.5;
  color: #fff;
  text-align: justify;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.75);
  padding: 10px 15px;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.labelTip .tipText::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(0, 0, 0, 0.75);
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}
.labelTip:hover .tipText {
  display: block;
}

.profileContentBoard {
  padding: 30px 10px 10px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 3px 10px 2px rgba(160, 160, 160, 0.3);
  position: relative;
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  .profileContentBoard {
    padding: 30px 15px 20px;
  }
}
.profileContentBoard .profileContentEdit {
  display: none;
}
.profileContentBoard.sticker {
  position: relative;
}
.profileContentBoard.sticker .profileSticker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 5px solid #fff;
  background-color: #ccc;
  box-shadow: 0 0 20px 0 rgba(129, 109, 109, 0.35);
  overflow: hidden;
  position: absolute;
  top: -60px;
  right: 20px;
}

@media screen and (min-width: 992px) {
  .profileSectionRowFlex {
    display: flex;
  }
  .profileSectionRowFlex .profileSectionRow {
    width: 50%;
  }
}
.profileSectionRowFlex .profileSectionRow + .profileSectionRow {
  padding-top: 0;
  border: none;
}

.profileSectionRow {
  position: relative;
  padding: 0 10px;
  margin-bottom: 20px;
}
.profileSectionRow .profileSection {
  margin-bottom: 15px;
}
.profileSectionRow .profileSection._flex {
  display: flex;
  align-items: center;
}
.profileSectionRow .profileSection._flex p {
  margin-bottom: 0;
}
.profileSectionRow .profileSection._flex.alignTop {
  display: block;
  align-items: start;
}
@media screen and (min-width: 992px) {
  .profileSectionRow .profileSection._flex.alignTop {
    display: flex;
  }
}
.profileSectionRow .itemBtns {
  position: absolute;
  top: 0;
  right: 0px;
}
@media screen and (min-width: 768px) {
  .profileSectionRow .itemBtns {
    display: flex;
  }
}
.profileSectionRow .itemBtns .itemBtn {
  display: block;
  color: gray;
  margin: 0 0px 5px;
}
@media screen and (min-width: 768px) {
  .profileSectionRow .itemBtns .itemBtn {
    margin: 0 5px;
  }
}
.profileSectionRow .itemBtns .itemBtn::before {
  content: "\f88d";
  display: block;
  font-family: "Material Symbols Outlined";
  font-size: 1.5em;
  line-height: 1;
}
.profileSectionRow .itemBtns .itemBtn:hover {
  color: #1ba1e6;
}
.profileSectionRow .itemBtns .itemBtn.edit::before {
  content: "\e3c9";
}
.profileSectionRow .itemBtns .itemBtn.remove::before {
  content: "\e872";
  font-size: 1.6em;
}
.profileSectionRow + .profileSectionRow {
  padding-top: 20px;
  border-top: 1px solid #333333;
}
.profileSectionRow + .profileSectionRow .itemBtns {
  top: 15px;
}
.profileSectionRow h4, .profileSectionRow h5 {
  min-width: 70px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  text-align: justify;
  margin: 0 20px 0 0px;
}
.profileSectionRow .year {
  display: inline-block;
  font-size: 14px;
  color: #62D087;
}
.profileSectionRow .date {
  display: inline-block;
  font-size: 14px;
  color: #f68b60;
  margin-right: 5px;
}
.profileSectionRow p {
  font-size: 15px;
  color: #333333;
}
.profileSectionRow img {
  max-width: 400px;
}

.profileRow {
  width: 100%;
  font-size: 16px;
  padding: 0 10px;
  margin-bottom: 10px;
  --row-label-w: 100%;
}
@media screen and (min-width: 768px) {
  .profileRow {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 25px;
    --row-label-w: 120px;
  }
}
.profileRow .profileLabel {
  line-height: 35px;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .profileRow .profileLabel {
    width: var(--row-label-w);
  }
}
.profileRow .profileText, .profileRow .profileInput, .profileRow .profileRadio, .profileRow .profileCheck,
.profileRow .profileSectionRow, .profileRow .profileSelectsWrapper {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .profileRow .profileText, .profileRow .profileInput, .profileRow .profileRadio, .profileRow .profileCheck,
  .profileRow .profileSectionRow, .profileRow .profileSelectsWrapper {
    width: calc(100% - var(--row-label-w));
  }
}
.profileRow .profileText.period, .profileRow .profileInput.period, .profileRow .profileRadio.period, .profileRow .profileCheck.period,
.profileRow .profileSectionRow.period, .profileRow .profileSelectsWrapper.period {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.profileRow .profileText.address, .profileRow .profileInput.address, .profileRow .profileRadio.address, .profileRow .profileCheck.address,
.profileRow .profileSectionRow.address, .profileRow .profileSelectsWrapper.address {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.profileRow .profileInputs {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  .profileRow .profileInputs {
    width: calc(100% - var(--row-label-w));
  }
}
.profileRow .profileInputs .profileInput.w25 {
  width: 24%;
}
.profileRow .profileInputs .profileInput.w50 {
  width: 49%;
}
.profileRow .profileInputs .profileInput.w100 {
  width: 100%;
  margin-top: 10px;
}
.profileRow .profileInputs .profileInput input + span.field-validation-error,
.profileRow .profileInputs .profileInput select + span.field-validation-error {
  font-size: 12px;
}
.profileRow .profileText {
  line-height: 35px;
}
.profileRow input[type=text], .profileRow input[type=number],
.profileRow input[type=password], .profileRow input[type=email],
.profileRow input[type=tel], .profileRow input[type=file], .profileRow select {
  width: 100%;
  height: 40px;
  font-size: 16px;
  border: 1px solid #999999;
  border-radius: 5px;
  outline-color: #1ba1e6;
  padding: 4px 10px;
  cursor: pointer;
  cursor: auto;
}
.profileRow input[type=text]:hover, .profileRow input[type=text]:active, .profileRow input[type=number]:hover, .profileRow input[type=number]:active,
.profileRow input[type=password]:hover,
.profileRow input[type=password]:active, .profileRow input[type=email]:hover, .profileRow input[type=email]:active,
.profileRow input[type=tel]:hover,
.profileRow input[type=tel]:active, .profileRow input[type=file]:hover, .profileRow input[type=file]:active, .profileRow select:hover, .profileRow select:active {
  border-color: #1ba1e6;
}
.profileRow input[type=text].period, .profileRow input[type=number].period,
.profileRow input[type=password].period, .profileRow input[type=email].period,
.profileRow input[type=tel].period, .profileRow input[type=file].period, .profileRow select.period {
  width: 24%;
}
.profileRow input[type=text].myDate, .profileRow input[type=number].myDate,
.profileRow input[type=password].myDate, .profileRow input[type=email].myDate,
.profileRow input[type=tel].myDate, .profileRow input[type=file].myDate, .profileRow select.myDate {
  width: 32%;
}
.profileRow input[type=text].myAddress, .profileRow input[type=text].myAaddress, .profileRow input[type=number].myAddress, .profileRow input[type=number].myAaddress,
.profileRow input[type=password].myAddress,
.profileRow input[type=password].myAaddress, .profileRow input[type=email].myAddress, .profileRow input[type=email].myAaddress,
.profileRow input[type=tel].myAddress,
.profileRow input[type=tel].myAaddress, .profileRow input[type=file].myAddress, .profileRow input[type=file].myAaddress, .profileRow select.myAddress, .profileRow select.myAaddress {
  width: 49%;
  margin-bottom: 10px;
}
.profileRow input[type=text][disabled], .profileRow input[type=number][disabled],
.profileRow input[type=password][disabled], .profileRow input[type=email][disabled],
.profileRow input[type=tel][disabled], .profileRow input[type=file][disabled], .profileRow select[disabled] {
  opacity: 0.5;
}
.profileRow textarea {
  display: block;
  width: 100%;
  border: 1px solid #999999;
  border-radius: 5px;
  padding: 5px 10px;
  resize: none;
}
.profileRow textarea:focus {
  outline: 1px solid #1ba1e6;
}
.profileRow textarea:hover {
  border-color: #1ba1e6;
}
.profileRow img.headsticker {
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: 200px;
  border-radius: 50%;
}
.profileRow .profileRadio label {
  display: inline-flex;
  align-items: center;
  padding-top: 5px;
  margin-right: 20px;
  margin-bottom: 10px;
  cursor: pointer;
}
.profileRow .profileRadio label input[type=radio] {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: 0;
  outline: 0;
  transition: 0.15s;
  background-color: #fdfaf8;
  border: 1px solid #333333;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  vertical-align: middle;
}
.profileRow .profileRadio label input[type=radio]:checked {
  border: 7px solid #1ba1e6;
}
.profileRow .profileRadio label span {
  display: inline-block;
  font-weight: normal;
  vertical-align: middle;
  padding: 0 5px;
  position: relative;
}
.profileRow .profileCheck label.checkbox {
  display: inline-block;
  font-weight: normal;
  cursor: pointer;
  padding-top: 5px;
  margin-top: 0;
  margin-right: 15px;
  margin-bottom: 5px;
}
.profileRow .profileCheck label.checkbox.block {
  display: block;
}
.profileRow .profileCheck label.checkbox input[type=checkbox] {
  display: none;
}
.profileRow .profileCheck label.checkbox span {
  display: block;
  font-size: 16px;
  position: relative;
  padding-left: 25px;
}
.profileRow .profileCheck label.checkbox span::before, .profileRow .profileCheck label.checkbox span::after {
  content: "";
  display: block;
  position: absolute;
}
.profileRow .profileCheck label.checkbox span::before {
  width: 20px;
  height: 20px;
  border: 2px solid #1ba1e6;
  border-radius: 4px;
  top: 3px;
  left: 0px;
}
.profileRow .profileCheck label.checkbox span::after {
  content: "\f00c";
  font-size: 12px;
  line-height: 1;
  font-family: fontAwesome;
  color: #fff;
  top: 7px;
  left: 4px;
  transform: scale(0);
  transition: 0.2s;
}
.profileRow .profileCheck label.checkbox input[type=checkbox]:checked ~ span::before {
  background-color: #1ba1e6;
}
.profileRow .profileCheck label.checkbox input[type=checkbox]:checked ~ span::after {
  transform: scale(1);
}

.profileSelectsWrapper {
  margin-top: -5px;
  padding-bottom: 10px;
}
@media screen and (min-width: 768px) {
  .profileSelectsWrapper {
    margin-top: -25px;
    margin-left: var(--row-label-w);
    padding-bottom: 0;
  }
  .profileSelectsWrapper .langTitle {
    width: 120px;
  }
  .profileSelectsWrapper .langInfo {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 120px);
    padding-left: 10px;
  }
}
.profileSelectsWrapper .selectBtn {
  display: inline-block;
  font-size: 15px;
  color: #1ba1e6;
  position: relative;
  padding-left: 1.3em;
  cursor: pointer;
}
.profileSelectsWrapper .selectBtn::before {
  content: "";
  display: block;
  font-family: "Material Symbols Outlined";
  font-size: 1.2em;
  line-height: 1;
  position: absolute;
  top: 0.1em;
  left: 0;
}
.profileSelectsWrapper .selectBtn:hover {
  color: #1481ba;
}
.profileSelectsWrapper .selectBtn.remove::before {
  content: "\e5cd";
}
.profileSelectsWrapper .selectBtn.add::before {
  content: "\e145";
}
.profileSelectsWrapper .selectBtn.disabled {
  color: #fdfaf8;
  pointer-events: none;
}
.profileSelectsWrapper .profileSelects {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #e1edf0;
  position: relative;
  padding-right: 50px;
}
@media screen and (min-width: 768px) {
  .profileSelectsWrapper .profileSelects {
    display: flex;
    flex-wrap: wrap;
  }
}
.profileSelectsWrapper .profileSelects .selectBtn.remove {
  position: absolute;
  top: 1em;
  right: -8px;
}
@media screen and (min-width: 768px) {
  .profileSelectsWrapper .profileSelects .selectBtn.remove {
    right: 0;
  }
}
.profileSelectsWrapper .profileSelects .selcetRow {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-right: 15px;
}
@media screen and (min-width: 768px) {
  .profileSelectsWrapper .profileSelects .selcetRow {
    width: auto;
  }
}
.profileSelectsWrapper .profileSelects .selcetRow select {
  margin-left: 5px;
}
@media screen and (min-width: 768px) {
  .profileSelectsWrapper .profileSelects .selcetRow select {
    width: auto;
  }
}
.profileSelectsWrapper .profileSelects .selcetRow select.unique {
  margin-left: 0;
}

.profileSkillWrapper {
  width: 100%;
}
.profileSkillWrapper .profileSkill {
  display: inline-block;
  font-family: "微軟正黑體";
  color: #1ba1e6;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #1ba1e6;
  margin-right: 10px;
  margin-bottom: 10px;
}
.profileSkillWrapper .profileSkill .removeSkill {
  display: inline-block;
  cursor: pointer;
  opacity: 0.3;
}
.profileSkillWrapper .profileSkill .removeSkill::before {
  content: "\f00d";
  display: block;
  line-height: 1;
  font-size: 12px;
  font-weight: normal;
  font-family: FontAwesome;
  color: #F69495;
  margin-left: 3px;
}
.profileSkillWrapper .profileSkill .removeSkill:hover {
  opacity: 1;
}

.profileRecommendSkillWrapper {
  width: 100%;
  border: 1px dashed #b3b3b3;
  border-radius: 5px;
  padding: 15px 15px;
}
.profileRecommendSkillWrapper .recommendSkillRow {
  margin-bottom: 20px;
}
.profileRecommendSkillWrapper .skillClassify {
  font-size: 14px;
  margin-bottom: 5px;
}
.profileRecommendSkillWrapper .skillChecks label.skillCheck {
  display: inline-block;
  font-weight: normal;
  cursor: pointer;
  margin-top: 0;
  margin-right: 5px;
  margin-bottom: 5px;
}
.profileRecommendSkillWrapper .skillChecks label.skillCheck.block {
  display: block;
}
.profileRecommendSkillWrapper .skillChecks label.skillCheck input[type=checkbox] {
  display: none;
}
.profileRecommendSkillWrapper .skillChecks label.skillCheck span {
  display: block;
  font-family: "微軟正黑體";
  border: 2px solid #e1edf0;
  border-radius: 4px;
  padding: 2px 8px;
}
.profileRecommendSkillWrapper .skillChecks label.skillCheck input[type=checkbox]:checked ~ span {
  background-color: #e1edf0;
}

.profileMoreCheck {
  display: inline-block;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .profileMoreCheck {
    display: block;
    vertical-align: middle;
  }
}
.profileMoreCheck label {
  display: inline-flex;
  position: relative;
  cursor: pointer;
  padding-left: 15px;
  margin-top: 0;
  margin-bottom: 0;
}
.profileMoreCheck label input[type=checkbox] {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  margin-top: 0px;
  outline: 0;
  transition: 0.15s;
  background-color: #fdfaf8;
  border: 1px solid #333333;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  vertical-align: middle;
  position: absolute;
  top: 1px;
  left: 0;
}
.profileMoreCheck label span {
  display: inline-block;
  min-width: 5em;
  font-size: 14px;
  font-weight: normal;
  vertical-align: middle;
  word-break: keep-all;
  padding: 1px 3px 0;
  position: relative;
}
.profileMoreCheck label span::before, .profileMoreCheck label span::after {
  content: "";
  display: block;
  background-color: #fff;
  position: absolute;
  transition: 0.25s;
}
.profileMoreCheck label span::before {
  width: 5px;
  height: 2px;
  top: 10px;
  left: -12px;
  transform: rotate(40deg) scale(0);
}
.profileMoreCheck label span::after {
  width: 10px;
  height: 2px;
  top: 8px;
  left: -11px;
  transform: rotate(-55deg) scale(0);
}
.profileMoreCheck label input[type=checkbox]:checked {
  border: 8px solid #1ba1e6;
}
.profileMoreCheck label input[type=checkbox]:checked ~ span::before {
  transform: rotate(40deg) scale(1);
}
.profileMoreCheck label input[type=checkbox]:checked ~ span::after {
  transform: rotate(-55deg) scale(1);
}

.privateCheckWrapper {
  display: block;
  padding-top: 5px;
}
.privateCheckWrapper label {
  display: inline-block;
  font-family: "微軟正黑體";
  font-weight: normal;
  cursor: pointer;
  margin: 0;
}
.privateCheckWrapper label.block {
  display: block;
}
.privateCheckWrapper label input[type=checkbox] {
  display: none;
}
.privateCheckWrapper label span {
  display: block;
  font-size: 14px;
  position: relative;
  padding-left: 20px;
}
.privateCheckWrapper label span::before, .privateCheckWrapper label span::after {
  content: "";
  display: block;
  position: absolute;
}
.privateCheckWrapper label span::before {
  width: 16px;
  height: 16px;
  border: 1px solid #F69495;
  border-radius: 4px;
  top: 3px;
  left: 0px;
}
.privateCheckWrapper label span::after {
  content: "\f00c";
  font-size: 12px;
  line-height: 1;
  font-family: fontAwesome;
  color: #fff;
  top: 5px;
  left: 2px;
  transform: scale(0);
  transition: 0.2s;
}
.privateCheckWrapper label input[type=checkbox]:checked ~ span {
  color: #F69495;
}
.privateCheckWrapper label input[type=checkbox]:checked ~ span::before {
  background-color: #F69495;
}
.privateCheckWrapper label input[type=checkbox]:checked ~ span::after {
  transform: scale(1);
}

.resumeViewWrapper {
  background-color: #EBFFFF;
  padding-top: 50px;
  padding-bottom: 100px;
  margin-top: -60px;
}
@media screen and (min-width: 992px) {
  .resumeViewWrapper {
    margin-top: -87px;
  }
}
.resumeViewWrapper .resumeView {
  width: 100%;
  max-width: 1040px;
  margin: auto;
  padding: 0 20px;
}
.resumeViewWrapper .resumeTitleWrapper .resumeTitle {
  color: var(--color-green);
  padding-left: 30px;
}
.resumeViewWrapper .resumeTitleWrapper .resumeTitle::before {
  display: none;
}
.resumeViewWrapper .resumeTitleWrapper .resumeTitle .svg_gear {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0.25em;
  left: 0px;
  fill: var(--color-green);
}

.skillHightlight {
  display: inline-block;
  background: linear-gradient(rgba(230, 236, 60, 0.5), #FFD737) 0 100%/100% no-repeat;
  border-radius: 3px;
  padding: 0 5px 0 10px;
  position: relative;
}
.skillHightlight::before {
  content: "";
  width: 1.4em;
  aspect-ratio: 1;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 1024 1024" class="icon" version="1.1"><path d="M57 438.312l109.536 488.72h697.336l109.536-488.72-259.176 156.816-187.856-333.088-205.352 333.088z" fill="%23EC9312"/><path d="M629.048 211.888c0 58.912-47.752 106.656-106.672 106.656-58.92 0-106.664-47.744-106.664-106.656 0-58.976 47.744-106.656 106.664-106.656s106.672 47.688 106.672 106.656z" fill="%23CB1B5B"/><path d="M522.376 105.232c-58.92 0-106.664 47.68-106.664 106.656 0 58.912 47.744 106.656 106.664 106.656V105.232z" fill="%23E5226B"/><path d="M57 438.312l109.536 488.72h697.336z" fill="%23F4A832"/><path d="M973.408 438.312l-109.536 488.72H166.536z" fill="%23F4A832"/><path d="M166.536 927.032h697.336L515.2 715.832z" fill="%23F5B617"/><path d="M1017.856 409.44a55.2 55.2 0 0 1-55.264 55.208 55.184 55.184 0 0 1-55.216-55.208 55.2 55.2 0 0 1 55.216-55.264 55.2 55.2 0 0 1 55.264 55.264z" fill="%230472AF"/><path d="M962.592 354.176a55.2 55.2 0 0 0-55.216 55.264 55.184 55.184 0 0 0 55.216 55.208V354.176z" fill="%231A8DCC"/><path d="M116.656 409.44a55.216 55.216 0 0 1-55.272 55.208A55.208 55.208 0 0 1 6.144 409.44a55.208 55.208 0 0 1 55.24-55.264 55.224 55.224 0 0 1 55.272 55.264z" fill="%230472AF"/><path d="M61.384 354.176A55.216 55.216 0 0 0 6.144 409.44a55.2 55.2 0 0 0 55.24 55.208V354.176z" fill="%230092D2"/></svg>');
  background-size: 100%;
  transform: rotate(-10deg);
  position: absolute;
  top: -1.08em;
  left: -0.25em;
}
.skillHightlight.forTitle {
  font-size: 14px;
  color: #333333;
}

.certificateListWrapper {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.certificateListWrapper > li {
  width: 33%;
  margin-bottom: 20px;
  position: relative;
}
.certificateListWrapper > li > a {
  display: block;
  padding: 0 10px;
  text-align: center;
}
.certificateListWrapper > li > a figcaption {
  display: none;
}
.certificateListWrapper > li > a .cTitle {
  display: block;
  text-align: center;
  padding-top: 5px;
}
.certificateListWrapper > li > a .cTitle span {
  display: inline-block;
  color: #333;
  position: relative;
  padding-left: 15px;
}
.certificateListWrapper > li > a .cTitle span::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #62D087;
  position: absolute;
  top: 7px;
  left: 0;
}
.certificateListWrapper > li .itemBtns {
  position: absolute;
  top: 6px;
  right: 15px;
}
@media screen and (min-width: 768px) {
  .certificateListWrapper > li .itemBtns {
    display: flex;
    gap: 5px;
    top: 6px;
    right: 15px;
  }
}
.certificateListWrapper > li .itemBtns .itemBtn {
  display: block;
  color: gray;
  margin: 0 0px 5px;
}
@media screen and (min-width: 768px) {
  .certificateListWrapper > li .itemBtns .itemBtn {
    margin: 0;
  }
}
.certificateListWrapper > li .itemBtns .itemBtn::before {
  content: "\f88d";
  display: block;
  font-family: "Material Symbols Outlined";
  font-size: 1.5em;
  line-height: 1;
}
.certificateListWrapper > li .itemBtns .itemBtn:hover {
  color: #1ba1e6;
}
.certificateListWrapper > li .itemBtns .itemBtn.edit::before {
  content: "\e3c9";
}
.certificateListWrapper > li .itemBtns .itemBtn.remove::before {
  content: "\e872";
  font-size: 1.6em;
}

.fancybox-caption {
  text-align: center;
  border: none;
}

.recruitSteamPattern {
  width: 400px;
  position: fixed;
  top: 55%;
  left: -70px;
  opacity: 0.08;
  pointer-events: none;
}
.recruitSteamPattern svg {
  fill: #1ba1e6;
}

.accountMainContainer {
  padding-top: 40px;
  padding-bottom: 100px;
  min-height: 960px;
}

.accountWrapper {
  width: 100%;
  max-width: 1040px;
  margin: auto;
  padding: 0 20px;
}

.jobMainContainer.forForm .jobSiderWrapper {
  padding-top: 20px;
}
.jobMainContainer.forForm .jobSider {
  padding-top: 20px;
  background-color: #f7ddd2;
}
.jobMainContainer.forForm .siderFormLlogo {
  padding: 0 5px;
  margin-bottom: 20px;
}
.jobMainContainer.forForm .siderFormLlogo img {
  max-width: 250px;
}
.jobMainContainer.forForm .siderFormName {
  font-size: 24px;
  font-weight: bold;
}

.recruitMainListWrapper,
.recruitTalentsWrapper {
  margin-bottom: 70px;
}

.recruitMainList {
  margin: 0;
  padding: 0px;
  list-style: none;
}
@media screen and (min-width: 768px) {
  .recruitMainList {
    padding-left: 10px;
  }
}
.recruitMainList > li {
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 3px 10px 2px rgba(160, 160, 160, 0.3);
  margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
  .recruitMainList > li {
    border-radius: 20px;
  }
}
@media screen and (min-width: 480px) {
  .recruitMainList > li {
    margin-bottom: 30px;
  }
}
.recruitMainList > li .listInner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 15px 15px;
}
@media screen and (min-width: 768px) {
  .recruitMainList > li .listInner {
    padding: 20px;
  }
}
.recruitMainList > li label {
  font-size: 14px;
  margin-right: 5px;
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .recruitMainList > li label {
    font-size: 16px;
  }
}
.recruitMainList > li span {
  display: inline-block;
  font-size: 14px;
}
.recruitMainList > li .listContent {
  width: calc(100% - 120px);
  position: relative;
}
@media screen and (min-width: 768px) {
  .recruitMainList > li .listContent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}
@media screen and (min-width: 992px) {
  .recruitMainList > li .listContent {
    width: calc(100% - 130px);
  }
}
.recruitMainList > li .listOperate {
  width: 120px;
  text-align: center;
}
@media screen and (min-width: 992px) {
  .recruitMainList > li .listOperate {
    width: 130px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.recruitMainList > li .listTitle {
  width: 100%;
  padding-right: 10px;
  margin-bottom: 5px;
}
@media screen and (min-width: 768px) {
  .recruitMainList > li .listTitle {
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 1450px) {
  .recruitMainList > li .listTitle {
    width: calc(100% - 620px);
    margin-bottom: 0;
  }
  .recruitMainList > li .listTitle.full {
    width: calc(100% - 260px);
  }
}
.recruitMainList > li .listTitle > a {
  font-size: 16px;
  color: var(--color-ocean);
  display: -webkit-box;
  word-break: break-all;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  max-height: 3em;
}
.recruitMainList > li .listTitle .listDate {
  padding: 0;
  margin-top: 10px;
}
.recruitMainList > li .listTitle p {
  margin: 15px 0 0;
  text-align: justify;
}
.recruitMainList > li .listID {
  font-size: 12px;
  position: absolute;
  top: -1.6em;
  left: 0;
}
@media screen and (min-width: 768px) {
  .recruitMainList > li .listID {
    width: 55px;
    font-size: 16px;
    position: static;
  }
}
.recruitMainList > li .listID::before {
  content: "🆔";
  display: inline-block;
  margin-right: 5px;
}
.recruitMainList > li .listLinkIn {
  display: flex;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .recruitMainList > li .listLinkIn {
    width: 435px;
    justify-content: space-between;
  }
}
.recruitMainList > li .listLinkIn .linkLabel {
  display: block;
  margin-right: 10px;
}
@media screen and (min-width: 480px) {
  .recruitMainList > li .listLinkIn .linkLabel {
    margin-right: 20px;
  }
}
@media screen and (min-width: 768px) {
  .recruitMainList > li .listLinkIn .linkLabel {
    margin: 0 10px;
  }
}
.recruitMainList > li .listLinkIn .linkLabel label {
  display: block;
  word-break: keep-all;
  color: #333333;
}
.recruitMainList > li .listLinkIn .linkLabel span {
  color: #1ba1e6;
  text-decoration: underline;
}
.recruitMainList > li .listLinkIn .linkLabel span b {
  text-decoration: none;
  color: #333333;
}
.recruitMainList > li .listLinkIn .linkLabel:hover span {
  color: #1481ba;
}
.recruitMainList > li .listDate {
  padding-top: 10px;
}
.recruitMainList > li .listDate label, .recruitMainList > li .listDate span {
  font-size: 12px;
}
@media screen and (min-width: 768px) {
  .recruitMainList > li .listDate {
    width: 130px;
    padding: 0 10px;
  }
  .recruitMainList > li .listDate label, .recruitMainList > li .listDate span {
    font-size: 16px;
  }
}
.recruitMainList > li .listStatus {
  margin-bottom: 10px;
}
@media screen and (min-width: 992px) {
  .recruitMainList > li .listStatus {
    margin-bottom: 0;
  }
}
.recruitMainList > li .listStatus .itemStatus {
  position: relative;
}
.recruitMainList > li .listStatus .itemStatus::before {
  content: "\ea77";
  display: block;
  font-size: 22px;
  font-family: "Material Icons";
  line-height: 1em;
  color: #e1edf0;
}
.recruitMainList > li .listStatus .itemStatus.on::before {
  content: "\e86c";
  color: #62D087;
}
.recruitMainList > li .listStatus .itemStatus.check::before {
  content: "\e92d";
  color: #b1e8c3;
}
.recruitMainList > li .listStatus .itemStatus.verify::before {
  content: "\e000";
  color: #FFD737;
}
.recruitMainList > li .listStatus .itemStatus.off::before {
  content: "\e15c";
  color: #F69495;
}
.recruitMainList > li .listStatus .itemStatus .tipText {
  display: none;
  min-width: max-content;
  font-size: 12px;
  font-weight: normal;
  font-family: "微軟正黑體";
  line-height: 1.5;
  color: #fff;
  text-align: justify;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.75);
  padding: 10px 15px;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
}
.recruitMainList > li .listStatus .itemStatus .tipText::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(0, 0, 0, 0.75);
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}
.recruitMainList > li .listStatus .itemStatus:hover .tipText {
  display: block;
}
.recruitMainList > li .listBtns .listBtn {
  display: inline-block;
  font-size: 16px;
  color: #fff;
  background-color: var(--color-pink);
  border: 2px solid var(--color-pink);
  border-radius: 5px;
  padding: 2px 8px;
}
.recruitMainList > li .listBtns .listBtn.cancel {
  background-color: #cccccc;
  border: 2px solid #cccccc;
  color: #fff;
}

.recruitListWrapper {
  position: relative;
  margin-bottom: 10px;
}
.recruitListWrapper::before {
  content: "";
  display: block;
  width: 99%;
  border-top: 1px dashed var(--color-ocean);
  position: absolute;
  top: 1em;
  right: 0;
}
.recruitListWrapper .catalogBtn {
  display: block;
  color: #fff;
  background-color: var(--color-ocean);
  border-radius: 5px;
  padding: 4px 10px;
  position: absolute;
  top: 0;
  right: 0;
}
.recruitListWrapper .catalogBtn span {
  display: inline-block;
  position: relative;
  padding-right: 1.6em;
}
.recruitListWrapper .catalogBtn span::before {
  content: "\e7cd";
  display: block;
  font-family: "Material Icons";
  font-size: 22px;
  line-height: 1;
  position: absolute;
  top: 0em;
  right: -0.2em;
  transition: 0.3s;
}
.recruitListWrapper .catalogBtn:not(.collapsed) span::before {
  transform: rotate(540deg) translateX(1px);
}
.recruitListWrapper .listCatalog {
  display: inline-flex;
  background-color: #F5FFFF;
  border-radius: 5px;
  color: var(--color-ocean);
  padding: 5px 10px;
  position: sticky;
  top: 70px;
  z-index: 2;
}
@media screen and (min-width: 992px) {
  .recruitListWrapper .listCatalog {
    top: 120px;
  }
}

.recruitList {
  margin: 0;
  padding: 0px;
  padding-top: 20px;
  list-style: none;
}
@media screen and (min-width: 768px) {
  .recruitList {
    padding-left: 10px;
  }
}
.recruitList > li {
  background-color: #fff;
  box-shadow: 0 3px 8px 2px rgba(160, 160, 160, 0.3);
  border-radius: 20px;
  margin-bottom: 30px;
}
.recruitList .recruitListContent {
  padding: 30px 20px 20px;
}
@media screen and (min-width: 992px) {
  .recruitList .recruitListContent {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media screen and (min-width: 1200px) {
  .recruitList .recruitListContent {
    padding: 30px 30px 20px;
  }
}
.recruitList .seekerInfo {
  display: block;
  min-height: 80px;
  position: relative;
  padding-left: 100px;
  margin-bottom: 20px;
}
@media screen and (min-width: 992px) {
  .recruitList .seekerInfo {
    min-height: auto;
    padding-left: 0;
    margin-bottom: 0;
  }
}
.recruitList .seekerInfo .hurrySupply {
  width: max-content;
  word-break: keep-all;
  position: absolute;
  top: -45px;
  right: 0px;
}
@media screen and (min-width: 992px) {
  .recruitList .seekerInfo .hurrySupply {
    top: -85px;
    left: 0;
    right: auto;
  }
}
.recruitList .seekerInfo .vacancy {
  display: inline-block;
  width: max-content;
  background-color: #333333;
  font-size: 14px;
  color: #fff;
  padding: 5px 10px;
  position: absolute;
  top: -45px;
  right: 0px;
}
@media screen and (min-width: 992px) {
  .recruitList .seekerInfo .vacancy {
    top: -85px;
    left: 0;
    right: auto;
  }
}
.recruitList .seekerInfo .seekerPhoto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.recruitList .seekerInfo .seekerPhoto img {
  width: 80px;
}
@media screen and (min-width: 992px) {
  .recruitList .seekerInfo .seekerPhoto {
    position: static;
  }
}
.recruitList .seekerInfo .seekerName {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-ocean);
  margin: 0px 0 5px;
}
@media screen and (min-width: 992px) {
  .recruitList .seekerInfo .seekerName {
    margin-top: 10px;
  }
}
.recruitList .seekerInfo .seekerBasic {
  font-size: 14px;
  color: #333333;
}
.recruitList .seekerInfo:hover .seekerName {
  color: #f36830;
}
.recruitList .seekerRowWrapper {
  margin-bottom: 20px;
}
@media screen and (min-width: 992px) {
  .recruitList .seekerRowWrapper {
    width: calc(100% - 140px - 120px);
    padding-left: 30px;
    padding-right: 5px;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1200px) {
  .recruitList .seekerRowWrapper {
    padding-left: 40px;
    padding-right: 10px;
  }
}
.recruitList .seekerRowWrapper .seekerRow {
  display: flex;
  margin-bottom: 10px;
}
.recruitList .seekerRowWrapper .seekerRow label {
  width: 80px;
  font-size: 16px;
  margin: 0;
}
.recruitList .seekerRowWrapper .seekerRow p {
  width: calc(100% - 70px);
  padding-left: 5px;
  font-size: 16px;
  margin: 0;
}
@media screen and (min-width: 992px) {
  .recruitList .recruitListBtns {
    width: 140px;
  }
}
.recruitList .recruitListBtns .recruitBtn {
  width: 100%;
}
.recruitList .recruitListBtns .recruitBtn[data-toggle=collapse] span {
  position: relative;
  padding-left: 10px;
  padding-right: 28px;
}
.recruitList .recruitListBtns .recruitBtn[data-toggle=collapse] span::before {
  content: "\e5cf";
  display: block;
  font-size: 20px;
  font-family: "Material Icons";
  line-height: 1;
  position: absolute;
  top: 4px;
  right: 0;
  transition: 0.3s;
}
.recruitList .recruitListBtns .recruitBtn[data-toggle=collapse]:not(.collapsed) {
  color: #f68b60;
  border-color: #f68b60;
}
.recruitList .recruitListBtns .recruitBtn[data-toggle=collapse]:not(.collapsed) span::before {
  transform: rotate(180deg);
}
.recruitList .recruitListBtns .readingState {
  text-align: center;
  margin-top: 1em;
}
.recruitList .recruitListBtns .readingState span {
  background-color: #FFFFFF;
  padding: 0.25em;
}
.recruitList .alreadyLooked {
  box-shadow: unset;
  background-color: #eef3f5;
}
.recruitList .alreadyLooked div, .recruitList .alreadyLooked p {
  font-weight: 300;
  color: #999;
}

.recruitTalentsEmpty {
  border: 1px solid #333333;
  border-radius: 10px;
  backdrop-filter: blur(10px);
  padding: 50px 50px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .recruitTalentsEmpty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
  }
}
.recruitTalentsEmpty .emptyBox {
  margin-top: 30px;
}
@media screen and (min-width: 768px) {
  .recruitTalentsEmpty .emptyBox {
    margin-top: 0;
    margin-right: 50px;
  }
}
.recruitTalentsEmpty img {
  display: inline-block;
  height: 200px;
}

.recruitTalentTop3 {
  margin-bottom: 30px;
}
.recruitTalentTop3 .owl-nav button {
  width: 40px;
  height: 40px;
  background-color: #fff;
  box-shadow: 3px 3px 10px 3px rgba(120, 120, 120, 0.2);
  border-radius: 50%;
  border: none;
  outline: none;
  position: absolute;
  font-size: 0;
  color: transparent;
  z-index: 2;
  top: 46%;
  transform: translateY(-50%);
  transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
}
.recruitTalentTop3 .owl-nav button::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-top: 4px solid #77c7f0;
  border-right: 4px solid #77c7f0;
  box-shadow: 0 0 0 lightgray;
  transition: all 200ms ease;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.recruitTalentTop3 .owl-nav button:hover::before {
  border-color: #1ba1e6;
  box-shadow: 3px -3px 0 #77c7f0;
}
.recruitTalentTop3 .owl-nav button.slick-prev, .recruitTalentTop3 .owl-nav button.owl-prev {
  left: -10px;
}
.recruitTalentTop3 .owl-nav button.slick-prev::before, .recruitTalentTop3 .owl-nav button.owl-prev::before {
  left: 55%;
  transform: translate(-50%, -50%) rotate(-135deg);
}
.recruitTalentTop3 .owl-nav button.slick-next, .recruitTalentTop3 .owl-nav button.owl-next {
  right: -10px;
}
.recruitTalentTop3 .owl-nav button.slick-next::before, .recruitTalentTop3 .owl-nav button.owl-next::before {
  left: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.recruitTalentTop3 .owl-nav button::before {
  border-top-color: #fbd1c1;
  border-right-color: #fbd1c1;
}
.recruitTalentTop3 .owl-nav button:hover::before {
  border-color: #f68b60;
  box-shadow: 3px -3px 0 #fbd1c1;
}
.recruitTalentTop3 .talentTopItem {
  padding: 15px 12px;
}
.recruitTalentTop3 .talentTopItem .itemInner {
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.2);
  padding: 20px 20px;
}
.recruitTalentTop3 .talentTopItem .itemTop {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 15px;
  position: relative;
}
.recruitTalentTop3 .talentTopItem .itemTop .itemTopInfo {
  padding-right: 30px;
}
.recruitTalentTop3 .talentTopItem .itemTop .itemTopInfo .topRank {
  color: var(--color);
  position: relative;
  padding-left: 2em;
  margin-bottom: 10px;
}
.recruitTalentTop3 .talentTopItem .itemTop .itemTopInfo .topRank::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  background: url(../img/recruit/icon-rank.svg) 50%/100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}
.recruitTalentTop3 .talentTopItem .itemTop .itemTopInfo .topLabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: var(--color-ocean);
  padding: 5px;
}
.recruitTalentTop3 .talentTopItem .itemTop .itemTopInfo .topLabel > span {
  display: inline-block;
  padding: 0 5px;
}
.recruitTalentTop3 .talentTopItem .itemTop .itemPic {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.recruitTalentTop3 .talentTopItem .itemTop .itemPic img {
  width: 100px;
}
.recruitTalentTop3 .talentTopItem .itemTop .itemMedal[data-level] {
  width: 50px;
  aspect-ratio: 1;
  background-size: cover;
  position: absolute;
  top: 60%;
  right: -15px;
}
.recruitTalentTop3 .talentTopItem .itemTop .itemMedal[data-level="1"] {
  background-image: url(../img/job/medal-none.svg);
}
.recruitTalentTop3 .talentTopItem .itemTop .itemMedal[data-level="2"] {
  background-image: url(../img/job/medal-bronze.svg);
}
.recruitTalentTop3 .talentTopItem .itemTop .itemMedal[data-level="3"] {
  background-image: url(../img/job/medal-silver.svg);
}
.recruitTalentTop3 .talentTopItem .itemTop .itemMedal[data-level="4"] {
  background-image: url(../img/job/medal-gold.svg);
}
.recruitTalentTop3 .talentTopItem .itemRow {
  display: flex;
  margin-bottom: 10px;
}
.recruitTalentTop3 .talentTopItem .itemRow label {
  width: 80px;
  font-size: 16px;
  margin: 0;
}
.recruitTalentTop3 .talentTopItem .itemRow p {
  width: calc(100% - 70px);
  padding-left: 5px;
  font-size: 16px;
  margin: 0;
}
.recruitTalentTop3 .talentTopItem .itemBtns {
  text-align: center;
}

.talentsProWrapper {
  margin: 0;
  padding: 10px 0 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.talentsProWrapper > li {
  width: 48%;
  margin: 0 1% 2%;
}
@media screen and (min-width: 768px) {
  .talentsProWrapper > li {
    width: 30%;
    margin: 0 1.66% 3%;
  }
}
.talentsProWrapper .talentsProItem {
  display: block;
  font-weight: normal;
  margin: 0;
  cursor: pointer;
}
.talentsProWrapper .talentsProBox {
  display: block;
  color: #333333;
  border: 2px solid #f68b60;
  border-radius: 10px;
  padding: 20px 30px;
  text-align: center;
}
.talentsProWrapper .talentsProBox .talentsProTitle {
  font-size: 16px;
  display: -webkit-box;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  max-height: 3em;
}
.talentsProWrapper .talentsProBox p {
  margin: 10px 0 0;
}
.talentsProWrapper a.talentsProItem:hover .talentsProBox .talentsProTitle {
  color: #f68b60;
}
.talentsProWrapper .talentsProCheck {
  display: none;
}
.talentsProWrapper .talentsProCheck + .talentsProBox {
  text-align: left;
  position: relative;
  padding-right: 50px;
}
.talentsProWrapper .talentsProCheck + .talentsProBox::before {
  content: "\f058";
  display: block;
  font-size: 20px;
  font-family: FontAwesome;
  color: #f68b60;
  position: absolute;
  top: 30px;
  right: 20px;
}
.talentsProWrapper .talentsProCheck:not(:checked) + .talentsProBox {
  background-color: #fdfaf8;
  border-color: #ccc;
  color: gray;
}
.talentsProWrapper .talentsProCheck:not(:checked) + .talentsProBox::before {
  color: #ccc;
}
.talentsProWrapper > li:nth-child(5n-4) .talentsProBox {
  background: url(../img/recruit/recruit-icon1.svg) left bottom/90px no-repeat #fef1ec;
}
.talentsProWrapper > li:nth-child(5n-3) .talentsProBox {
  background: url(../img/recruit/recruit-icon2.svg) left bottom/90px no-repeat #fef1ec;
}
.talentsProWrapper > li:nth-child(5n-2) .talentsProBox {
  background: url(../img/recruit/recruit-icon3.svg) left bottom/90px no-repeat #fef1ec;
}
.talentsProWrapper > li:nth-child(5n-1) .talentsProBox {
  background: url(../img/recruit/recruit-icon4.svg) left bottom/90px no-repeat #fef1ec;
}
.talentsProWrapper > li:nth-child(5n) .talentsProBox {
  background: url(../img/recruit/recruit-icon5.svg) left bottom/90px no-repeat #fef1ec;
}

.talentsFieldCheckWrapper {
  margin: 0;
  padding: 0px 0 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  .talentsFieldCheckWrapper {
    padding-top: 10px;
  }
}
.talentsFieldCheckWrapper > li {
  width: 48%;
  margin: 0 1% 2%;
}
.talentsFieldCheckWrapper > li > label {
  display: block;
  background: url(../img/recruit/img-python.jpg) center/cover no-repeat;
  border-radius: 10px;
  font-weight: normal;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .talentsFieldCheckWrapper > li > label {
    border-radius: 20px;
  }
}
.talentsFieldCheckWrapper > li > label input[type=checkbox] {
  display: none;
}
.talentsFieldCheckWrapper > li > label > div {
  color: #fff;
  padding: 20px 50px 20px 20px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .talentsFieldCheckWrapper > li > label > div {
    padding: 40px 70px 40px 30px;
  }
}
.talentsFieldCheckWrapper > li > label > div::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
}
.talentsFieldCheckWrapper > li > label > div .talentsFieldCheckCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -12px;
}
@media screen and (min-width: 768px) {
  .talentsFieldCheckWrapper > li > label > div .talentsFieldCheckCircle {
    width: 30px;
    height: 30px;
    right: 30px;
    margin-top: -15px;
  }
}
.talentsFieldCheckWrapper > li > label > div .talentsFieldCheckCircle::before {
  content: "\f00c";
  display: block;
  font-family: FontAwesome;
  line-height: 1;
  margin-left: 2px;
  opacity: 0;
}
.talentsFieldCheckWrapper > li > label > div .talentsFieldCheckTitle {
  font-size: 16px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .talentsFieldCheckWrapper > li > label > div .talentsFieldCheckTitle {
    font-size: 20px;
  }
}
.talentsFieldCheckWrapper > li > label > div p {
  position: relative;
  margin: 10px 0 0;
}
@media screen and (min-width: 768px) {
  .talentsFieldCheckWrapper > li > label > div p {
    margin-top: 15px;
  }
}
.talentsFieldCheckWrapper > li > label > div:hover::before {
  background-color: #f68b60;
  opacity: 0.3;
}
.talentsFieldCheckWrapper > li > label input[type=checkbox]:checked + div::before {
  background-color: #f68b60;
  opacity: 0.8;
}
.talentsFieldCheckWrapper > li > label input[type=checkbox]:checked + div .talentsFieldCheckCircle::before {
  opacity: 1;
}
.talentsFieldCheckWrapper > li:nth-child(1) > label {
  background-image: url(../img/recruit/img-python.jpg);
}
.talentsFieldCheckWrapper > li:nth-child(2) > label {
  background-image: url(../img/recruit/img-cloud.jpg);
}
.talentsFieldCheckWrapper > li:nth-child(3) > label {
  background-image: url(../img/recruit/img-web.jpg);
}
.talentsFieldCheckWrapper > li:nth-child(4) > label {
  background-image: url(../img/recruit/img-video.jpg);
}
.talentsFieldCheckWrapper > li:nth-child(5) > label {
  background-image: url(../img/recruit/img-app.jpg);
}
.talentsFieldCheckWrapper > li:nth-child(6) > label {
  background-image: url(../img/recruit/img-interior-design.jpg);
}
.talentsFieldCheckWrapper > li:nth-child(7) > label {
  background-image: url(../img/recruit/img-mechanical.jpg);
}
.talentsFieldCheckWrapper > li:nth-child(8) > label {
  background-image: url(../img/recruit/img-game-program.jpg);
}
.talentsFieldCheckWrapper > li:nth-child(9) > label {
  background-image: url(../img/recruit/img-game-art.jpg);
}
.talentsFieldCheckWrapper > li:nth-child(10) > label {
  background-image: url(../img/recruit/img-other.jpg);
}

.talentsFieldListWrapper {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.talentsFieldListWrapper li {
  display: block;
  width: 100%;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .talentsFieldListWrapper li {
    width: 20%;
  }
}
.talentsFieldListWrapper li .imgBG {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  transition: 0.2s linear;
}
.talentsFieldListWrapper li:hover .imgBG {
  opacity: 1;
  z-index: 2;
}
.talentsFieldListWrapper li a {
  display: block;
  color: #fff;
  position: relative;
  z-index: 3;
}
.talentsFieldListWrapper li a::before {
  content: "";
  display: block;
  width: 110%;
  height: 100%;
  background-color: #000;
  position: absolute;
  top: 0;
  left: -5%;
  opacity: 0.4;
  transition: 0.2s linear;
}
.talentsFieldListWrapper li a span.itemImg {
  display: block;
  width: 100%;
  min-height: 120px;
  background: center/cover no-repeat;
}
@media screen and (min-width: 768px) {
  .talentsFieldListWrapper li a span.itemImg {
    padding-top: 200%;
  }
}
.talentsFieldListWrapper li a .itemText {
  width: 100%;
  padding: 30px 60px 30px 15px;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media screen and (min-width: 768px) {
  .talentsFieldListWrapper li a .itemText {
    padding: 20px 30px 60px;
  }
}
.talentsFieldListWrapper li a .itemText::after {
  content: "\eaaa";
  display: block;
  font-size: 28px;
  font-family: "Material Symbols Outlined";
  line-height: 1;
  position: absolute;
  bottom: 28px;
  right: 20px;
}
@media screen and (min-width: 768px) {
  .talentsFieldListWrapper li a .itemText::after {
    display: none;
  }
}
.talentsFieldListWrapper li a .itemText h4 {
  font-size: 18px;
  margin: 0 0 15px;
}
.talentsFieldListWrapper li a .itemText p {
  margin: 0;
}
.talentsFieldListWrapper li.__python .imgBG, .talentsFieldListWrapper li.__python span.itemImg {
  background-image: url(../img/recruit/img-python.jpg);
}
.talentsFieldListWrapper li.__cloud .imgBG, .talentsFieldListWrapper li.__cloud span.itemImg {
  background-image: url(../img/recruit/img-cloud.jpg);
}
.talentsFieldListWrapper li.__web .imgBG, .talentsFieldListWrapper li.__web span.itemImg {
  background-image: url(../img/recruit/img-web.jpg);
}
.talentsFieldListWrapper li.__video .imgBG, .talentsFieldListWrapper li.__video span.itemImg {
  background-image: url(../img/recruit/img-video.jpg);
}
.talentsFieldListWrapper li.__app .imgBG, .talentsFieldListWrapper li.__app span.itemImg {
  background-image: url(../img/recruit/img-app.jpg);
}
.talentsFieldListWrapper li.__interior .imgBG, .talentsFieldListWrapper li.__interior span.itemImg {
  background-image: url(../img/recruit/img-interior-design.jpg);
}
.talentsFieldListWrapper li.__ptc .imgBG, .talentsFieldListWrapper li.__ptc span.itemImg {
  background-image: url(../img/recruit/img-mechanical.jpg);
}
.talentsFieldListWrapper li.__gprogram .imgBG, .talentsFieldListWrapper li.__gprogram span.itemImg {
  background-image: url(../img/recruit/img-game-program.jpg);
}
.talentsFieldListWrapper li.__comic .imgBG, .talentsFieldListWrapper li.__comic span.itemImg {
  background-image: url(../img/recruit/img-game-art.jpg);
}
.talentsFieldListWrapper li.__other .imgBG, .talentsFieldListWrapper li.__other span.itemImg {
  background-image: url(../img/recruit/img-other.jpg);
}
.talentsFieldListWrapper:hover li span.itemImg {
  opacity: 0;
}
.talentsFieldListWrapper:hover li:hover a::before {
  opacity: 0.1;
}
.talentsFieldListWrapper:hover li:not(:hover) a::before {
  opacity: 0.6;
}

.inviteBtnWrapper {
  display: flex;
  position: relative;
  margin-top: 50px;
  margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
  .inviteBtnWrapper {
    padding-right: 130px;
    margin-bottom: 50px;
  }
}
.inviteBtnWrapper .inviteBtn {
  display: inline-block;
  width: 50%;
  font-size: 16px;
  text-align: center;
  color: #b3b3b3;
  letter-spacing: 0.05em;
  border: 2px solid #b3b3b3;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  outline: none;
  padding: 10px 20px;
  margin: 0 5px;
}
.inviteBtnWrapper .inviteBtn span {
  display: inline-block;
  position: relative;
  padding-left: 2em;
}
.inviteBtnWrapper .inviteBtn span::before {
  content: "";
  display: block;
  font-size: 1.375em;
  font-family: "Material Symbols Outlined";
  line-height: 1em;
  position: absolute;
  top: 0.1em;
  left: 0;
}
.inviteBtnWrapper .inviteBtn:hover, .inviteBtnWrapper .inviteBtn.active {
  border-color: #f68b60;
  color: #f68b60;
}
.inviteBtnWrapper .inviteBtn:hover {
  opacity: 0.7;
}
.inviteBtnWrapper .inviteBtn.active {
  pointer-events: none;
}
.inviteBtnWrapper .inviteBtn.disabled, .inviteBtnWrapper .inviteBtn:disabled {
  color: #b3b3b3;
  border-color: #b3b3b3;
  cursor: not-allowed;
  opacity: 0.5;
}
.inviteBtnWrapper .inviteBtn.mail span::before {
  content: "\e0be";
}
.inviteBtnWrapper .inviteBtn.blacklist {
  width: auto;
  padding: 5px 8px;
  margin: 0;
  position: absolute;
  top: calc(-100% - 20px);
  right: 5px;
}
@media screen and (min-width: 768px) {
  .inviteBtnWrapper .inviteBtn.blacklist {
    padding: 10px 20px;
    top: 0;
    right: 0;
  }
}
.inviteBtnWrapper .inviteBtn.blacklist span {
  padding-left: 0;
  padding-top: 1.5em;
}
@media screen and (min-width: 768px) {
  .inviteBtnWrapper .inviteBtn.blacklist span {
    padding-left: 2em;
    padding-top: 0;
  }
}
.inviteBtnWrapper .inviteBtn.blacklist span::before {
  content: "\f89a";
  left: 0.7em;
}
@media screen and (min-width: 768px) {
  .inviteBtnWrapper .inviteBtn.blacklist span::before {
    left: 0;
  }
}
.inviteBtnWrapper .inviteBtn.blacklist.active {
  pointer-events: visible;
  background-color: #000;
  border-color: #000;
  color: #fff;
}

.formListWrapper {
  position: relative;
  margin-bottom: 100px;
}
.formListWrapper .textPatternWrapper {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.formListWrapper .textPatternWrapper .titleTextPattern {
  width: 300%;
  font-size: 180px;
  text-shadow: 7em 0 0 #e1edf0, 14em 0 0 #e1edf0, 21em 0 0 #e1edf0;
  position: relative;
  animation: railLeft 20s linear infinite;
}
.formListWrapper .FormPattern {
  width: 170px;
  height: 170px;
  background: url(../img/index/pattern-gear-orange.svg) center/cover no-repeat;
  position: absolute;
  top: 60px;
  right: -60px;
  animation: rollin_r 20s linear infinite;
}
@media screen and (min-width: 992px) {
  .formListWrapper .FormPattern {
    width: 390px;
    height: 390px;
    top: -120px;
    right: 30px;
  }
}
.formListWrapper .formListInner {
  max-width: 1240px;
  margin: auto;
  padding: 0 0px;
  position: relative;
}
.formListWrapper .formList {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 80px;
  padding: 0;
}
.formListWrapper .formList li {
  width: 100%;
  margin-top: 40px;
  margin-bottom: 40px;
}
@media screen and (min-width: 992px) {
  .formListWrapper .formList li {
    width: 28%;
    margin-left: 5%;
    margin-top: 80px;
    margin-bottom: 80px;
  }
}
.formListWrapper .formList a.formItem {
  display: block;
}
.formListWrapper .formList .formItemPic {
  text-align: center;
  margin-bottom: 20px;
}
@media screen and (min-width: 992px) {
  .formListWrapper .formList .formItemPic {
    margin-bottom: 40px;
  }
}
.formListWrapper .formList .formItemPic .formItemPicInner {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.formListWrapper .formList .formItemPic .formItemPicInner .itemImg {
  position: relative;
  z-index: 1;
}
.formListWrapper .formList .formItemPic .formItemPicInner::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #1ba1e6 0%, #f68b60 100%);
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.formListWrapper .formList .formItemCont h2 {
  font-size: 18px;
  color: #333333;
  padding: 0 20px;
  margin: 0;
}
.formListWrapper .formList a.formItem:hover .formItemPicInner {
  transform: rotateX(30deg) rotateY(-20deg) rotateZ(5deg);
}
.formListWrapper .formList a.formItem:hover .formItemPicInner::after {
  transform: translateX(20px) translateY(20px);
}

.jobVictoryList {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 30px 0;
  margin: 0;
}
.jobVictoryList li {
  width: 100%;
  max-width: 350px;
  margin: 0 auto 30px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .jobVictoryList li {
    width: 47%;
    max-width: none;
    margin: 0 1.5% 20px;
  }
}
@media screen and (min-width: 1200px) {
  .jobVictoryList li {
    width: 30%;
    margin: 0 1.6666% 20px;
  }
}
.jobVictoryList .jobVictory {
  position: relative;
  --label-color: #202020;
}
.jobVictoryList .jobVictory.design {
  --label-color:#C27891;
}
.jobVictoryList .jobVictory.game {
  --label-color:#C7753F;
}
.jobVictoryList .jobVictory.interior {
  --label-color:#679D86;
}
.jobVictoryList .jobVictory.program {
  --label-color:#82AABD;
}
.jobVictoryList .jobVictory.ptc {
  --label-color:#5B7275;
}
.jobVictoryList .jobVictory.video {
  --label-color:#996CA4;
}
.jobVictoryList .jobVictory .victoryPhoto {
  box-shadow: 0 0 20px 0 rgba(129, 109, 109, 0.35);
  border-radius: 10px;
  position: relative;
  margin-bottom: 10px;
}
.jobVictoryList .jobVictory .victoryPhoto img {
  border-radius: 10px;
}
.jobVictoryList .jobVictory .victoryLabel {
  display: inline-block;
  font-size: 14px;
  padding: 3px 12px;
  color: #fff;
  background-color: var(--label-color);
  border-radius: 5px;
  position: absolute;
  bottom: -5px;
  right: -5px;
}
.jobVictoryList .jobVictory .victoryTitle {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  text-align: center;
}
.jobVictoryList .jobVictory:hover .victoryPhoto {
  box-shadow: 0 0 20px 0 rgba(129, 109, 109, 0.35), 0 0 0px 4px var(--label-color);
}

.reportMainWrapper {
  --text-color: #2C3A3C;
  --top-circle: 370px;
  color: var(--text-color);
  background-color: var(--bg-color);
  position: relative;
  max-width: 1240px;
  margin: auto;
  padding-bottom: 30px;
  --main-color: #1ba1e6;
  --bg-color: #9bcee7;
  --text-light-color: #c9e3f0;
  --bg-light-color: rgba(55, 187, 255, 0.3);
}
@media screen and (min-width: 992px) {
  .reportMainWrapper {
    --top-circle: 480px;
  }
}
.reportMainWrapper[data-type=design] {
  --main-color:#C27891;
  --bg-color:#EECEDC;
  --text-light-color:#F5D3E0;
  --bg-light-color: rgba(248,216,227,0.7);
}
.reportMainWrapper[data-type=game] {
  --main-color:#C7753F;
  --bg-color:#DDB0A2;
  --text-light-color:#DEB1A0;
  --bg-light-color: rgba(237,161,111,0.3);
}
.reportMainWrapper[data-type=interior] {
  --main-color:#679D86;
  --bg-color:#BFDCCF;
  --text-light-color:#BCD6C6;
  --bg-light-color: rgba(156,239,204,0.3);
}
.reportMainWrapper[data-type=program] {
  --main-color:#82AABD;
  --bg-color:#B7DAE0;
  --text-light-color:#B8D9DD;
  --bg-light-color: rgba(189,226,241,0.5);
}
.reportMainWrapper[data-type=ptc] {
  --main-color:#5B7275;
  --bg-color:#9EB2B9;
  --text-light-color:#A0B3BA;
  --bg-light-color: rgba(201,240,246,0.5);
}
.reportMainWrapper[data-type=video] {
  --main-color:#996CA4;
  --bg-color:#DAC5DF;
  --text-light-color:#D9C4DD;
  --bg-light-color: rgba(239,206,246,0.5);
}
.reportMainWrapper .fancybox figcaption {
  display: none;
}
.reportMainWrapper .wrapperFrame {
  width: 100%;
  height: 100%;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.reportMainWrapper .wrapperFrame::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid var(--text-color);
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.reportMainWrapper .wrapperFrame .hurrySupply {
  font-size: 10px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
@media screen and (min-width: 480px) {
  .reportMainWrapper .wrapperFrame .hurrySupply {
    font-size: 14px;
  }
}
.reportMainWrapper .reportTopWrapper {
  min-height: 600px;
  position: relative;
}
.reportMainWrapper .reportTopWrapper .reportKvWrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.reportMainWrapper .reportTopWrapper .reportKvWrapper .reportKv {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.reportMainWrapper .reportTopWrapper .reportKvWrapper .reportKv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 1240px;
}
.reportMainWrapper .reportTopWrapper .reportKvWrapper .reportKv::before, .reportMainWrapper .reportTopWrapper .reportKvWrapper .reportKv::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.reportMainWrapper .reportTopWrapper .reportKvWrapper .reportKv::before {
  background: linear-gradient(90deg, #fff 0%, var(--bg-color) 100%);
  opacity: 0.5;
}
.reportMainWrapper .reportTopWrapper .reportKvWrapper .reportKv::after {
  background: linear-gradient(90deg, #fff 0%, rgba(0, 0, 0, 0) 30%);
}
.reportMainWrapper .reportTop {
  --column-width: 400px;
  position: relative;
  padding: 40px 10px 20px 10px;
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop {
    display: flex;
    padding: 40px 30px 20px 10px;
  }
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topContent {
    width: calc(100% - var(--column-width));
    padding-right: 20px;
  }
}
.reportMainWrapper .reportTop .topColumn {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 20px 40px;
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topColumn {
    flex-direction: row;
    width: var(--column-width);
    padding: 0;
  }
}
.reportMainWrapper .reportTop .topPublishWrapper {
  border-left: 20px solid var(--text-color);
  padding: 5px 0;
}
.reportMainWrapper .reportTop .topPublishWrapper .topPublish {
  display: inline-block;
  background-color: var(--bg-light-color);
  border-radius: 0 20px 20px 0;
  padding: 5px 30px 5px 10px;
}
@media screen and (min-width: 1200px) {
  .reportMainWrapper .reportTop .topPublishWrapper .topPublish {
    display: block;
    max-width: 620px;
  }
}
.reportMainWrapper .reportTop .topPublishWrapper .topPublish .topPublishRow1 {
  display: flex;
  font-size: 10px;
  gap: 10px;
}
@media screen and (min-width: 480px) {
  .reportMainWrapper .reportTop .topPublishWrapper .topPublish .topPublishRow1 {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportTop .topPublishWrapper .topPublish .topPublishRow1 {
    font-size: 18px;
  }
}
@media screen and (min-width: 1200px) {
  .reportMainWrapper .reportTop .topPublishWrapper .topPublish .topPublishRow1 {
    font-size: 24px;
  }
}
.reportMainWrapper .reportTop .topPublishWrapper .topPublish .topPublishRow2 {
  display: flex;
  font-size: 10px;
  gap: 10px;
}
@media screen and (min-width: 480px) {
  .reportMainWrapper .reportTop .topPublishWrapper .topPublish .topPublishRow2 {
    font-size: 14px;
  }
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportTop .topPublishWrapper .topPublish .topPublishRow2 {
    font-size: 16px;
  }
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topPublishWrapper .topPublish .topPublishRow2 {
    font-size: 18px;
  }
}
.reportMainWrapper .reportTop .topContentCircle {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--top-circle);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--text-color);
  margin: auto;
  padding: 30px;
  position: relative;
  text-align: center;
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topContentCircle {
    left: -50px;
    top: 60px;
    margin: 0;
  }
}
.reportMainWrapper .reportTop .topContentCircle .topSlogan {
  padding: 0 20px;
}
.reportMainWrapper .reportTop .topContentCircle .topContentTitle {
  font-size: 40px;
  color: var(--text-light-color);
  line-height: 1.2;
  margin-bottom: 20px;
}
.reportMainWrapper .reportTop .topContentCircle .topContentLabel {
  display: inline-block;
  font-size: 24px;
  background-color: var(--main-color);
  border-radius: 8px;
  padding: 2px 20px;
  margin-bottom: 20px;
}
.reportMainWrapper .reportTop .topContentCircle .topContentText {
  display: inline-block;
  font-size: 24px;
  line-height: 1;
  color: var(--text-light-color);
  position: relative;
  padding: 0 15px;
}
.reportMainWrapper .reportTop .topContentCircle .topContentText::before, .reportMainWrapper .reportTop .topContentCircle .topContentText::after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background: var(--text-light-color);
  position: absolute;
  top: 0;
}
.reportMainWrapper .reportTop .topContentCircle .topContentText::before {
  left: 0;
  box-shadow: 4px 0 0 0 var(--main-color);
}
.reportMainWrapper .reportTop .topContentCircle .topContentText::after {
  right: 0;
  box-shadow: -4px 0 0 0 var(--main-color);
}
.reportMainWrapper .reportTop .topColumnTitleWrapper {
  display: flex;
  flex-direction: row;
  border-bottom: 2px solid var(--text-color);
  position: relative;
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topColumnTitleWrapper {
    flex-direction: column;
    justify-content: space-between;
    border-bottom: none;
    border-right: 2px solid var(--text-color);
  }
}
.reportMainWrapper .reportTop .topColumnTitleWrapper .topColumnTitle {
  font-size: 18px;
  color: var(--text-light-color);
  background-color: var(--text-color);
  padding: 5px 0px 4px 10px;
  text-align: center;
  position: relative;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportTop .topColumnTitleWrapper .topColumnTitle {
    font-size: 24px;
    padding: 5px 50px 5px 10px;
  }
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topColumnTitleWrapper .topColumnTitle {
    width: 48px;
    line-height: 1.2;
    padding: 5px 5px 50px;
  }
}
.reportMainWrapper .reportTop .topColumnTitleWrapper .topColumnTitle::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-bottom: 1em solid transparent;
  border-left: 1em solid transparent;
  border-right: 1em solid var(--text-color);
  border-top: 1em solid var(--text-color);
  position: absolute;
  right: -2em;
  bottom: 0px;
  transform: rotate(180deg);
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportTop .topColumnTitleWrapper .topColumnTitle::before {
    bottom: -2px;
  }
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topColumnTitleWrapper .topColumnTitle::before {
    transform: none;
    right: 0px;
    bottom: -2em;
  }
}
.reportMainWrapper .reportTop .topColumnTitleWrapper .topColumnSubTitle {
  font-size: 22px;
  font-weight: bold;
  line-height: 2;
  color: var(--text-light-color);
  position: absolute;
  right: 0;
  bottom: -25px;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportTop .topColumnTitleWrapper .topColumnSubTitle {
    font-weight: normal;
    color: var(--text-color);
    position: static;
    margin-left: 3em;
  }
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topColumnTitleWrapper .topColumnSubTitle {
    margin-left: 0;
    writing-mode: tb;
    transform: scale(-1);
  }
}
.reportMainWrapper .reportTop .topColumnBoxes {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--bg-light-color);
  padding: 15px 15px;
}
@media screen and (min-width: 480px) {
  .reportMainWrapper .reportTop .topColumnBoxes {
    flex-direction: row;
  }
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topColumnBoxes {
    width: calc(100% - 70px);
    flex-direction: column;
  }
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox {
  --column-box-width: 70px;
  display: flex;
  width: 100%;
  color: var(--text-light-color);
}
@media screen and (min-width: 480px) {
  .reportMainWrapper .reportTop .topColumnBoxes .topColumnBox {
    padding: 0 20px;
  }
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topColumnBoxes .topColumnBox {
    --column-box-width: 80px;
    padding: 0 10px;
  }
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxLeft {
  width: var(--column-box-width);
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxLeft .topColumnBoxLeftItem1 {
  width: var(--column-box-width);
  height: var(--column-box-width);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  border-radius: 24px;
  background-color: var(--main-color);
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxLeft .topColumnBoxLeftItem1 {
    font-size: 28px;
  }
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxLeft .topColumnBoxLeftItem2 {
  width: 100%;
  padding-top: 100%;
  border-radius: 24px;
  background-color: var(--main-color);
  position: relative;
  margin: 10px 0;
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxLeft .topColumnBoxLeftItem2::before {
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  background-color: var(--text-light-color);
  position: absolute;
  top: -13%;
  left: 13%;
  transform: rotate(45deg);
  transform-origin: bottom;
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxLeft .topColumnBoxLeftItem2 > span {
  display: inline-block;
  line-height: 1;
  font-size: 22px;
  position: absolute;
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxLeft .topColumnBoxLeftItem2 > span {
    font-size: 28px;
  }
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxLeft .topColumnBoxLeftItem2 > span:nth-child(1) {
  top: 12%;
  left: 12%;
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxLeft .topColumnBoxLeftItem2 > span:nth-child(2) {
  bottom: 12%;
  right: 12%;
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxLeft .topColumnBoxLeftItem3 {
  position: relative;
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxLeft .topColumnBoxLeftItem3 svg.svg_heart {
  display: block;
  width: var(--column-box-width);
  aspect-ratio: 484/418.8;
  filter: drop-shadow(-2px 2px 0px var(--main-color));
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxLeft .topColumnBoxLeftItem3 span {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxLeft .topColumnBoxLeftItem3 span {
    font-size: 18px;
  }
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxRight {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: calc(100% - var(--column-box-width));
  margin-left: 15px;
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxRight {
    margin-left: 15px;
  }
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxRight .topColumnBoxRightQrcode {
  display: block;
  width: 80%;
  aspect-ratio: 1;
  margin: 0 auto 10px;
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxRight .topColumnBoxRightQrcode img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxRight .topColumnBoxRightTitle {
  padding: 6px 10px;
  border-radius: 15px;
  background-color: var(--main-color);
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxRight .topColumnBoxRightTitle > span {
  display: block;
  font-size: 18px;
  line-height: 1;
  text-align: left;
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxRight .topColumnBoxRightTitle > span:nth-child(2) {
  text-align: right;
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topColumnBoxes .topColumnBox .topColumnBoxRight .topColumnBoxRightTitle > span {
    font-size: 22px;
  }
}
.reportMainWrapper .reportTop .topColumnBoxes .topColumnFrame {
  width: 100%;
  height: 1px;
  box-shadow: 0 4px 0 0 var(--main-color);
  background-color: var(--text-color);
  margin: 20px 0;
}
@media screen and (min-width: 480px) {
  .reportMainWrapper .reportTop .topColumnBoxes .topColumnFrame {
    width: 1px;
    height: auto;
    box-shadow: 4px 0 0 0 var(--main-color);
    margin: 0;
  }
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportTop .topColumnBoxes .topColumnFrame {
    width: 100%;
    height: 1px;
    box-shadow: 0 4px 0 0 var(--main-color);
  }
}
.reportMainWrapper .reportNovaWrapper {
  padding: 30px 30px 40px;
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportNovaWrapper {
    padding: 30px 50px 40px;
  }
}
.reportMainWrapper .reportNovaWrapper .reportNovaTitleWrapper {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  border-bottom: 2px solid var(--text-color);
  margin-left: auto;
  margin-bottom: 40px;
  position: relative;
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportNovaWrapper .reportNovaTitleWrapper {
    width: calc(100% - var(--top-circle) + 200px);
  }
}
.reportMainWrapper .reportNovaWrapper .reportNovaTitleWrapper .reportNovaTitle {
  font-size: 18px;
  color: var(--text-light-color);
  background-color: var(--text-color);
  padding: 5px 10px 4px 0px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportNovaWrapper .reportNovaTitleWrapper .reportNovaTitle {
    font-size: 24px;
    padding: 5px 10px 5px 50px;
  }
}
.reportMainWrapper .reportNovaWrapper .reportNovaTitleWrapper .reportNovaTitle::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 1em solid transparent;
  border-left: 1em solid transparent;
  border-right: 1em solid var(--text-color);
  border-bottom: 1em solid var(--text-color);
  position: absolute;
  bottom: 0px;
  left: -2em;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportNovaWrapper .reportNovaTitleWrapper .reportNovaTitle::before {
    bottom: -2px;
  }
}
.reportMainWrapper .reportNovaWrapper .reportNovaTitleWrapper .reportNovaSubTitle {
  font-size: 22px;
  font-weight: bold;
  line-height: 2;
  color: var(--text-light-color);
  text-shadow: 2px -1px 3px #fff;
  position: absolute;
  left: 0;
  bottom: -25px;
  opacity: 0.6;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportNovaWrapper .reportNovaTitleWrapper .reportNovaSubTitle {
    font-weight: normal;
    color: var(--text-color);
    position: static;
    margin-right: 3em;
    opacity: 1;
  }
}
.reportMainWrapper .reportNovaWrapper .reportNovaRow {
  position: relative;
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportNovaWrapper .reportNovaRow {
    display: flex;
    justify-content: space-between;
  }
}
.reportMainWrapper .reportNovaWrapper .reportFrame {
  width: 100%;
  height: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  margin: 30px 0;
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportNovaWrapper .reportFrame {
    width: 5px;
    height: auto;
    flex-direction: row;
    margin: 0;
  }
}
.reportMainWrapper .reportNovaWrapper .reportFrame::before, .reportMainWrapper .reportNovaWrapper .reportFrame::after {
  content: "";
  display: block;
  width: 100%;
  background-color: var(--text-color);
}
.reportMainWrapper .reportNovaWrapper .reportFrame::before {
  height: 1px;
}
.reportMainWrapper .reportNovaWrapper .reportFrame::after {
  height: 2px;
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportNovaWrapper .reportFrame::before, .reportMainWrapper .reportNovaWrapper .reportFrame::after {
    height: calc(100% - 50px);
  }
  .reportMainWrapper .reportNovaWrapper .reportFrame::before {
    width: 1px;
  }
  .reportMainWrapper .reportNovaWrapper .reportFrame::after {
    width: 2px;
  }
}
.reportMainWrapper .reportNovaWrapper .reportNova {
  width: 100%;
  position: relative;
  padding-bottom: 80px;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportNovaWrapper .reportNova {
    display: flex;
    flex-direction: row;
    gap: 4%;
    padding-bottom: 0;
  }
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportNovaWrapper .reportNova {
    width: 48%;
  }
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeft {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeft {
    width: 64%;
    margin-bottom: 0;
  }
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRight {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRight {
    width: 32%;
    flex-direction: column;
  }
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftTitle {
  position: relative;
  padding: 6px 10px 0;
  margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftTitle {
    margin-bottom: 20px;
  }
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftTitle::before {
  content: "";
  display: block;
  width: calc(100% - 10px);
  height: 90%;
  background: var(--main-color);
  border-radius: 20px 0 20px 0;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftTitle::after {
  content: "";
  display: block;
  width: 20%;
  height: 70%;
  border-top: 1px solid var(--text-color);
  border-right: 1px solid var(--text-color);
  position: absolute;
  top: 10px;
  right: 0;
  pointer-events: none;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftTitle [class^=titleborder] {
  width: 8px;
  height: 60%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: absolute;
  pointer-events: none;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftTitle [class^=titleborder]::before, .reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftTitle [class^=titleborder]::after {
  content: "";
  display: block;
  height: 100%;
  background-color: var(--text-color);
  transform: rotate(45deg);
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftTitle [class^=titleborder]::before {
  width: 1px;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftTitle [class^=titleborder]::after {
  width: 2px;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftTitle [class^=titleborder].titleborder1 {
  transform: rotate(180deg);
  top: -10px;
  left: 5px;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftTitle [class^=titleborder].titleborder2 {
  right: 5px;
  bottom: -10px;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftTitle h4 {
  font-size: 24px;
  font-weight: bold;
  position: relative;
  padding-left: 15px;
  margin: 0 0 0px;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftTitle p {
  font-size: 20px;
  text-align: right;
  padding-right: 20px;
  margin: 0;
  position: relative;
  border-bottom: 3px solid var(--text-color);
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftPhoto {
  display: block;
  aspect-ratio: 350/215;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftPhoto {
    margin-bottom: 15px;
  }
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftText {
  font-size: 16px;
  font-weight: bold;
  background-color: var(--main-color);
  border-radius: 0 0 20px 20px;
  padding: 5px 10px;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftText {
    height: -webkit-fill-available;
  }
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaLeftText p {
  text-align: justify;
  line-height: 1.2;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBox:nth-child(1) {
  width: calc(96% - 142px);
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBox:nth-child(2) {
  width: 142px;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBox:nth-child(1), .reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBox:nth-child(2) {
    width: 100%;
  }
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBox .reportNovaRightTitle {
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 0.8em;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBox .reportNovaRightTitle::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-color: var(--main-color);
  position: absolute;
  top: 1px;
  left: 0;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBox .reportNovaRightPhoto {
  display: block;
  aspect-ratio: 180/120;
  margin: auto;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBox .reportNovaRightPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBox .reportNovaRightPhoto.qrcode {
  aspect-ratio: auto;
  text-align: center;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBox .reportNovaRightPhoto.qrcode img {
  width: auto;
  height: auto;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBottom {
  width: 100%;
  position: absolute;
  bottom: 0;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBottom {
    position: static;
  }
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBottom .salaryTitle {
  font-size: 18px;
  display: flex;
  justify-content: center;
  margin-bottom: 2px;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBottom .salaryTitle .up {
  font-weight: bold;
  letter-spacing: normal;
  position: relative;
  line-height: 1;
  transform: rotate(-7deg) translateX(5px);
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBottom .salaryTitle .up > span {
  display: block;
  width: 5px;
  height: 1px;
  background-color: var(--text-color);
  position: absolute;
  right: -0.3em;
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBottom .salaryTitle .up > span:nth-child(1) {
  top: 4px;
  transform: rotate(-40deg);
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBottom .salaryTitle .up > span:nth-child(2) {
  width: 8px;
  top: 8px;
  transform: rotate(-15deg) translateX(5px);
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBottom .salaryTitle .up > span:nth-child(3) {
  top: 11px;
  transform: rotate(-5deg) translateX(3px);
}
.reportMainWrapper .reportNovaWrapper .reportNova .reportNovaRightBottom .salary {
  font-size: 24px;
  text-align: center;
  background-color: var(--main-color);
  border-radius: 15px;
  padding: 2px 0;
}
.reportMainWrapper .reportSuccessWrapper {
  padding: 0px 30px 40px;
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportSuccessWrapper {
    padding: 0 50px 40px;
  }
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessTitleWrapper {
  display: flex;
  width: 100%;
  border-bottom: 2px solid var(--text-color);
  margin-bottom: 40px;
  position: relative;
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessTitleWrapper .reportSuccessTitle {
  font-size: 18px;
  color: var(--text-light-color);
  background-color: var(--text-color);
  padding: 5px 0px 4px 10px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportSuccessWrapper .reportSuccessTitleWrapper .reportSuccessTitle {
    font-size: 24px;
    padding: 5px 50px 5px 10px;
  }
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessTitleWrapper .reportSuccessTitle::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 1em solid transparent;
  border-right: 1em solid transparent;
  border-left: 1em solid var(--text-color);
  border-bottom: 1em solid var(--text-color);
  position: absolute;
  bottom: 0px;
  right: -2em;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportSuccessWrapper .reportSuccessTitleWrapper .reportSuccessTitle::before {
    bottom: -2px;
  }
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessTitleWrapper .reportSuccessSubTitle {
  font-size: 22px;
  line-height: 2;
  color: var(--text-light-color);
  text-shadow: 2px -1px 3px #fff;
  position: absolute;
  right: 0;
  bottom: -25px;
  opacity: 0.6;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportSuccessWrapper .reportSuccessTitleWrapper .reportSuccessSubTitle {
    font-weight: normal;
    color: var(--text-color);
    position: static;
    margin-left: 3em;
    opacity: 1;
  }
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessRow {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 4%;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportSuccessWrapper .reportSuccessRow {
    gap: 4%;
  }
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccess {
  width: 48%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccess {
    width: 22%;
  }
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessPhotoWrapper {
  position: relative;
  margin-bottom: 10px;
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessPhotoWrapper .reportSuccessPhotoFrame {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid #fff;
  overflow: hidden;
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessPhotoWrapper .reportSuccessPhotoFrame .reportSuccessPhoto {
  display: block;
  width: 100%;
  height: 100%;
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessPhotoWrapper .reportSuccessPhotoFrame .reportSuccessPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessPhotoWrapper .photoRibbon {
  width: 100%;
  position: absolute;
  bottom: -10px;
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessPhotoWrapper .photoRibbon svg.svg_ribbon {
  width: 100%;
  aspect-ratio: 463/128.2;
  filter: drop-shadow(-2px 2px 0px #fff);
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessPhotoWrapper .photoRibbon .ribbonText {
  width: 100%;
  font-size: clamp(10px, 2vw, 14px);
  color: var(--text-light-color);
  position: absolute;
  bottom: 14px;
  left: 0;
}
@media screen and (min-width: 768px) {
  .reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessPhotoWrapper .photoRibbon .ribbonText {
    font-size: 14px;
  }
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessPhotoWrapper .photoRibbon .ribbonText {
    font-size: 16px;
  }
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessPhotoWrapper:not(.notben) .photoRibbon {
  display: none;
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessCompany {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
}
@media screen and (min-width: 480px) {
  .reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessCompany {
    font-size: 22px;
  }
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessName {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
  margin: 5px 0;
}
@media screen and (min-width: 480px) {
  .reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessName {
    font-size: 16px;
  }
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessSalary {
  font-size: 16px;
  letter-spacing: 0.2em;
}
@media screen and (min-width: 480px) {
  .reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessSalary {
    font-size: 18px;
  }
}
.reportMainWrapper .reportSuccessWrapper .reportSuccessRow .reportSuccessSalary > span {
  font-family: math;
}
.reportMainWrapper .reportBottomWrapper {
  text-align: center;
  background-color: var(--text-color);
  position: relative;
  padding: 10px 0;
}
.reportMainWrapper .reportBottomWrapper .reportBottom {
  display: flex;
  gap: 3px;
  justify-content: center;
  font-size: 24px;
  color: var(--text-light-color);
  margin-bottom: 10px;
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportBottomWrapper .reportBottom {
    margin: 0;
  }
}
@media screen and (min-width: 992px) {
  .reportMainWrapper .reportBottomWrapper .iconBtn {
    position: absolute;
    top: 10px;
    right: 30px;
  }
}

.interviewMainWrapper {
  --deep-color: #073D7A;
  --light-color: #5B81B2;
  --bg-color: #F4EADF;
  --line-color: #B6DFDD;
  background-color: #fff;
  max-width: 1240px;
  margin: auto;
  position: relative;
  padding: 30px 20px;
}
.interviewMainWrapper .fancybox figcaption {
  display: none;
}
.interviewMainWrapper .wrapperFrame {
  width: 100%;
  height: 100%;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .wrapperFrame {
    padding: 20px;
  }
}
.interviewMainWrapper .wrapperFrame::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.interviewMainWrapper .wrapperFrame .framePattern {
  width: 100%;
  height: 50px;
  background: linear-gradient(315deg, #B6DFDD 25%, transparent 25%, transparent 50%, #B6DFDD 50%, #B6DFDD 75%, transparent 75%, transparent);
  background-size: 20px 20px;
  position: absolute;
  left: 0;
  z-index: 2;
}
.interviewMainWrapper .wrapperFrame .framePattern.top {
  top: 0;
}
.interviewMainWrapper .wrapperFrame .framePattern.bot {
  bottom: 0;
}
.interviewMainWrapper .wrapperFrame .hurrySupply {
  font-size: 10px;
  writing-mode: vertical-lr;
  padding: 5px 5px;
  position: absolute;
  top: 0;
  right: -13px;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .interviewMainWrapper .wrapperFrame .hurrySupply {
    font-size: 14px;
    writing-mode: initial;
    padding: 1px 5px;
    right: 0;
    top: -23px;
  }
}
.interviewMainWrapper .interviewMainInner {
  background-color: var(--bg-color);
  position: relative;
}
.interviewMainWrapper .topPublishWrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: -30px;
  z-index: 2;
}
.interviewMainWrapper .topPublishWrapper .topPublish {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--bg-color);
  background-color: var(--light-color);
  position: relative;
  padding: 10px 15px 25px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .interviewMainWrapper .topPublishWrapper .topPublish {
    min-width: 50%;
    width: auto;
    padding: 15px 15px 30px;
  }
}
.interviewMainWrapper .topPublishWrapper .topPublish::before {
  content: "";
  display: block;
  width: calc(100% - 30px);
  height: 100%;
  border: 2px solid var(--bg-color);
  position: absolute;
  bottom: 15px;
  pointer-events: none;
}
.interviewMainWrapper .topPublishWrapper .topPublish .topRow {
  display: flex;
  flex-direction: column;
  gap: 0px;
  font-size: 14px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .interviewMainWrapper .topPublishWrapper .topPublish .topRow {
    flex-direction: row;
    font-size: 18px;
    gap: 10px;
  }
}
.interviewMainWrapper .topPublishWrapper .topPublishAuthor {
  display: flex;
  font-size: 14px;
  gap: 10px;
  color: var(--light-color);
  text-align: center;
  position: relative;
  padding: 10px 20px;
}
@media screen and (min-width: 768px) {
  .interviewMainWrapper .topPublishWrapper .topPublishAuthor {
    font-size: 18px;
  }
}
.interviewMainWrapper .topPublishWrapper .topPublishAuthor::before {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  background-color: var(--deep-color);
  box-shadow: 0 1px 1px 0 var(--light-color);
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -35px;
}
.interviewMainWrapper .interviewKvWrapper {
  position: relative;
  padding: 10px 10px 40px;
  margin-top: -20px;
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewKvWrapper {
    display: none;
    width: calc(100% - 400px);
    padding: 50px 0 50px 50px;
    margin-top: 0;
  }
}
.interviewMainWrapper .interviewKvWrapper::before, .interviewMainWrapper .interviewKvWrapper::after {
  content: "";
  display: block;
  width: 100%;
  height: 20px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 306 111"><style type="text/css">.st0{fill:%235B81B2;}</style><path class="st0" d="M255.7,3.9c-1.1-2.4-3.6-3.9-6.2-3.9s-5.1,1.5-6.2,3.9l-13.9,28.6l-31,4.6c-2.6,0.4-4.7,2.2-5.5,4.7 c-0.8,2.5-0.2,5.2,1.7,7.1L217,71l-5.3,31.5c-0.4,2.6,0.6,5.2,2.8,6.8s5,1.7,7.3,0.5L249.5,95l27.7,14.8c2.3,1.2,5.2,1.1,7.3-0.5 c2.1-1.6,3.2-4.2,2.8-6.8L281.9,71l22.5-22.3c1.9-1.8,2.5-4.6,1.7-7.1c-0.8-2.5-3-4.3-5.5-4.7l-31-4.6L255.7,3.9z"/><path class="st0" d="M48.4,63.8l40.4,37.8c1.7,1.6,3.9,2.4,6.2,2.4s4.5-0.9,6.2-2.4l40.4-37.8c6.8-6.3,10.7-15.2,10.7-24.5V38 c0-15.6-11.3-29-26.7-31.6c-10.2-1.7-20.6,1.6-27.9,8.9L95,18.1l-2.7-2.7C85,8.1,74.6,4.7,64.4,6.4C49,9,37.7,22.3,37.7,38v1.3 C37.7,48.6,41.6,57.5,48.4,63.8L48.4,63.8z"/></svg>');
  background-size: 46.3px 20px;
  position: absolute;
  left: 0px;
  z-index: 2;
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewKvWrapper::before, .interviewMainWrapper .interviewKvWrapper::after {
    background-size: 40px 20px;
  }
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewKvWrapper::before, .interviewMainWrapper .interviewKvWrapper::after {
    width: 90%;
    height: 40px;
    background-size: 60px 40px;
    left: 50px;
  }
}
.interviewMainWrapper .interviewKvWrapper::before {
  display: none;
  top: 0;
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewKvWrapper::before {
    display: block;
  }
}
.interviewMainWrapper .interviewKvWrapper::after {
  bottom: 10px;
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewKvWrapper::after {
    bottom: 0;
  }
}
.interviewMainWrapper .interviewKvWrapper .interviewKv {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  position: relative;
  padding: 20px 20px 40px;
}
@media screen and (min-width: 768px) {
  .interviewMainWrapper .interviewKvWrapper .interviewKv {
    padding: 20px 40px 60px;
  }
}
.interviewMainWrapper .interviewKvWrapper .interviewKv::before, .interviewMainWrapper .interviewKvWrapper .interviewKv::after {
  content: "";
  display: block;
  width: 90%;
  height: 2px;
  background-color: var(--deep-color);
  position: absolute;
  left: 5%;
}
.interviewMainWrapper .interviewKvWrapper .interviewKv::before {
  top: 25px;
}
.interviewMainWrapper .interviewKvWrapper .interviewKv::after {
  bottom: 25px;
}
.interviewMainWrapper .interviewKvWrapper .interviewKv .interviewKvSlogan {
  margin-top: -30px;
  margin-bottom: 15px;
  position: relative;
  z-index: 2;
}
.interviewMainWrapper .interviewKvWrapper .interviewKv h2 {
  font-size: 30px;
  color: var(--light-color);
  margin: 0 0 15px;
}
@media screen and (min-width: 768px) {
  .interviewMainWrapper .interviewKvWrapper .interviewKv h2 {
    font-size: 40px;
  }
}
@media screen and (min-width: 1200px) {
  .interviewMainWrapper .interviewKvWrapper .interviewKv h2 {
    font-size: 60px;
  }
}
.interviewMainWrapper .interviewKvWrapper .interviewKv h3 {
  font-size: 24px;
  color: var(--light-color);
  margin: 0 0 15px;
  padding-top: 15px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .interviewMainWrapper .interviewKvWrapper .interviewKv h3 {
    font-size: 30px;
  }
}
@media screen and (min-width: 1200px) {
  .interviewMainWrapper .interviewKvWrapper .interviewKv h3 {
    font-size: 40px;
  }
}
.interviewMainWrapper .interviewKvWrapper .interviewKv h3::before {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  background-color: var(--deep-color);
  box-shadow: 0 1px 1px 0 var(--light-color);
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -35px;
}
.interviewMainWrapper .interviewKvWrapper .interviewKv .interviewKvSubtitle {
  font-size: 18px;
  font-family: "Kaushan Script", cursive;
  color: var(--deep-color);
}
.interviewMainWrapper .interviewMidWrapper {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewMidWrapper {
    width: calc(100% + 20px);
    padding: 20px 0 20px 50px;
  }
}
.interviewMainWrapper .interviewMidWrapper .interviewKvWrapper {
  display: none;
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewMidWrapper .interviewKvWrapper {
    display: block;
  }
}
.interviewMainWrapper .interviewCircleWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  position: relative;
}
@media screen and (min-width: 768px) {
  .interviewMainWrapper .interviewCircleWrapper {
    flex-direction: row;
  }
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewCircleWrapper {
    flex-direction: column;
    width: 400px;
    padding-right: 50px;
  }
}
.interviewMainWrapper .interviewCircleWrapper::before {
  content: "";
  display: none;
  width: 1px;
  height: 96%;
  background-color: var(--deep-color);
  box-shadow: -1px 0 1px 0 var(--light-color);
  position: absolute;
  bottom: 0;
  right: 0;
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewCircleWrapper::before {
    display: block;
  }
}
.interviewMainWrapper .interviewCircleWrapper .interviewCircle {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  max-width: 350px;
}
.interviewMainWrapper .interviewCircleWrapper .mbInfo {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  z-index: 10;
}
@media screen and (min-width: 768px) {
  .interviewMainWrapper .interviewCircleWrapper .mbInfo {
    display: none;
  }
}
.interviewMainWrapper .interviewCircleWrapper .mbInfo .mbInfoCompanyRow {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--deep-color);
}
.interviewMainWrapper .interviewCircleWrapper .mbInfo .mbInfoCompanyRow label {
  display: inline-block;
  background-color: #fff;
  padding: 0 5px;
}
.interviewMainWrapper .interviewCircleWrapper .mbInfo .mbInfoCompanyRow > span {
  display: inline-block;
  background-color: #fff;
  padding: 0 5px;
}
.interviewMainWrapper .interviewCircleWrapper .mbInfo .mbInfoNameRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}
.interviewMainWrapper .interviewCircleWrapper .mbInfo .mbInfoNameRow label {
  display: inline-block;
  font-size: 18px;
  background-color: var(--deep-color);
  border-radius: 5px;
  color: var(--bg-color);
  padding: 1px 6px;
  margin: 0;
}
.interviewMainWrapper .interviewCircleWrapper .mbInfo .mbInfoNameRow > span {
  display: inline-block;
  font-weight: bold;
  color: var(--deep-color);
}
.interviewMainWrapper .interviewSquareWrapper {
  display: flex;
  flex-direction: column;
  padding: 20px 30px;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewSquareWrapper {
    flex-direction: row;
    padding: 20px 50px;
  }
  .interviewMainWrapper .interviewSquareWrapper.reverse {
    flex-direction: row-reverse;
  }
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareTitle {
  font-size: 30px;
  color: var(--bg-color);
  text-align: center;
  border: 2px solid var(--deep-color);
  background-color: var(--light-color);
  margin-bottom: 20px;
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewSquareWrapper .interviewSquareTitle {
    width: 80px;
    font-size: 50px;
    line-height: 1.2;
    padding: 6px 5px 10px;
    margin: 0;
  }
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewSquareWrapper .interviewSquareRow {
    width: calc(100% - 80px);
    gap: 0;
  }
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .squareFrame {
  width: 7px;
  height: auto;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .squareFrame {
    display: flex;
  }
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .squareFrame::before, .interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .squareFrame::after {
  content: "";
  display: block;
  height: 90%;
  background-color: var(--deep-color);
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .squareFrame::before {
  width: 2px;
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .squareFrame::after {
  width: 1px;
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare {
  width: 100%;
}
@media screen and (min-width: 480px) {
  .interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare {
    width: 48%;
  }
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare {
    width: 46%;
  }
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareTop {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  position: relative;
}
@media screen and (min-width: 1200px) {
  .interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareTop {
    align-items: normal;
  }
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareTop .interviewSquareQrcode {
  display: block;
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--deep-color);
  background-color: #fff;
  padding: 5px;
  overflow: hidden;
  position: absolute;
  bottom: -40px;
  right: -5px;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareTop .interviewSquareQrcode {
    width: 110px;
    padding: 18px;
    position: static;
  }
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareTop .interviewSquareQrcode img {
  object-fit: cover;
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareTop .interviewSquareInfo {
  --label-width: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 100%;
  border: 2px solid var(--deep-color);
  border-radius: 20px;
  padding: 6px 0px;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareTop .interviewSquareInfo {
    width: calc(100% - 110px);
  }
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareTop .interviewSquareInfo {
    --label-width: 125px;
  }
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareTop .interviewSquareInfo::before {
  content: "";
  display: block;
  width: var(--label-width);
  height: 100%;
  background-color: var(--light-color);
  position: absolute;
  top: 0;
  left: 0;
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareTop .interviewSquareInfo .infoRow {
  display: flex;
  font-size: 14px;
  line-height: 1.2;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareTop .interviewSquareInfo .infoRow {
    font-size: 16px;
  }
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareTop .interviewSquareInfo .infoRow label {
  display: flex;
  justify-content: space-between;
  width: var(--label-width);
  color: var(--bg-color);
  padding: 0 5px 0 10px;
  margin: 0;
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareTop .interviewSquareInfo .infoRow label {
    padding: 0 10px 0 15px;
  }
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareTop .interviewSquareInfo .infoRow > span {
  display: inline-block;
  width: calc(100% - var(--label-width));
  font-weight: bold;
  color: var(--deep-color);
  padding: 0 10px;
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareImg {
  display: block;
  width: 100%;
  aspect-ratio: 459/270;
  border: 2px solid var(--deep-color);
  overflow: hidden;
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare .interviewSquareImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.interviewMainWrapper .interviewSquareWrapper .interviewSquareRow .interviewSquare:first-child .interviewSquareTop {
  flex-direction: row;
}
.interviewMainWrapper .interviewBottomWrapper {
  text-align: center;
  position: relative;
  padding: 10px 0;
  z-index: 2;
}
.interviewMainWrapper .interviewBottomWrapper::before {
  content: "";
  display: block;
  width: calc(100% - 80px);
  height: 4px;
  border-radius: 4px;
  background-color: var(--deep-color);
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}
.interviewMainWrapper .interviewBottomWrapper .interviewBottom {
  display: flex;
  gap: 3px;
  justify-content: center;
  font-size: 24px;
  color: var(--deep-color);
}
@media screen and (min-width: 992px) {
  .interviewMainWrapper .interviewBottomWrapper .iconBtn {
    position: absolute;
    top: 15px;
    right: 30px;
  }
}

.interviewCircleFrame {
  width: 77%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid var(--deep-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.interviewCircleFrame .reverse {
  transform-origin: center;
  transform: rotate(180deg);
}
.interviewCircleFrame > div {
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
}
.interviewCircleFrame > div > svg {
  width: 100%;
  height: 100%;
}
.interviewCircleFrame .circleBorder {
  width: 96%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.15em solid var(--deep-color);
  clip-path: polygon(100% 0, 100% 25%, 50% 50%, 0 25%, 0 0);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(0deg) translate(-50%, -50%);
  transform-origin: 0 0;
}
.interviewCircleFrame text {
  font-weight: bold;
  letter-spacing: -0.1em;
}
.interviewCircleFrame .circleCompany {
  display: none;
  width: 100%;
  font-size: 250%;
  transform: translate(-50%, -50%) rotate(15deg);
}
@media screen and (min-width: 768px) {
  .interviewCircleFrame .circleCompany {
    display: block;
  }
}
.interviewCircleFrame .circleCompany .circleCompanyText text {
  fill: var(--deep-color);
}
.interviewCircleFrame .circleTitile {
  width: 137%;
  font-size: 250%;
  transform: translate(-50%, -50%) rotate(-60deg);
}
.interviewCircleFrame .circleTitile .circleBorder {
  border: 1.15em solid var(--light-color);
  clip-path: polygon(100% 0, 100% 10%, 50% 50%, 0 10%, 0 0);
}
.interviewCircleFrame .circleTitile .circleTitileText {
  position: relative;
  z-index: 2;
}
.interviewCircleFrame .circleTitile .circleTitileText text {
  fill: var(--bg-color);
}
.interviewCircleFrame .circleSchool {
  width: 130%;
  font-size: 200%;
  transform: translate(-50%, -50%) rotate(60deg);
}
.interviewCircleFrame .circleSchool .circleBorder {
  clip-path: polygon(0 0, 38% 0, 50% 50%, 0 38%);
  transform: rotate(44deg) translate(-50%, -50%);
}
.interviewCircleFrame .circleSchool .circleSchoolText {
  position: relative;
  z-index: 2;
}
.interviewCircleFrame .circleSchool .circleSchoolText text {
  letter-spacing: 0.1em;
  fill: var(--bg-color);
}
.interviewCircleFrame .circleStudent {
  display: none;
  width: 130%;
  font-size: 200%;
  transform: translate(-50%, -50%) rotate(-22deg);
}
@media screen and (min-width: 768px) {
  .interviewCircleFrame .circleStudent {
    display: block;
  }
}
.interviewCircleFrame .circleStudent .circleBorder {
  clip-path: polygon(0 0, 35% 0, 50% 50%, 0 35%);
  transform: rotate(225deg) translate(-50%, -50%);
}
.interviewCircleFrame .circleStudent .circleStudentText {
  position: relative;
  z-index: 2;
}
.interviewCircleFrame .circleStudent .circleStudentText text {
  fill: var(--bg-color);
}
.interviewCircleFrame .circleNumber {
  display: none;
  width: 135%;
  font-size: 150%;
  transform: translate(-50%, -50%) rotate(40deg);
}
@media screen and (min-width: 768px) {
  .interviewCircleFrame .circleNumber {
    display: block;
  }
}
.interviewCircleFrame .circleNumber .circleNumberText text {
  fill: var(--deep-color);
}

.interviewCircleFigure {
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
@media screen and (min-width: 768px) {
  .interviewCircleFigure {
    width: 58%;
  }
}
.interviewCircleFigure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.interviewCircleQrcode {
  display: block;
  width: 15%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--deep-color);
  background-color: #fff;
  padding: 5px;
  overflow: hidden;
  position: absolute;
  bottom: 32%;
  right: 3%;
  z-index: 10;
}
@media screen and (min-width: 768px) {
  .interviewCircleQrcode {
    bottom: 28%;
    right: 5%;
  }
}
@media screen and (min-width: 992px) {
  .interviewCircleQrcode {
    width: 25%;
    padding: 18px;
    bottom: 20%;
    right: -10%;
  }
}

.clearfix::after, .calendar ol::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.calendar {
  border-radius: 10px;
}
.calendar ol li {
  float: left;
  width: 14.28571%;
}
.calendar .day-names {
  border-bottom: 1px solid #eee;
}
.calendar .day-names li {
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.calendar .days li {
  border-bottom: 1px solid #eee;
  height: 10rem;
  padding: 0 0.25rem;
}
.calendar .days li .date {
  margin: 0.5rem 0;
  width: 2.5rem;
  height: 2.5rem;
}
.calendar .days li .eventSection {
  height: 6.5rem;
  overflow: auto;
}
.calendar .days li .eventSection .event {
  font-size: 1.2rem;
  padding: 0.5rem;
  color: black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 4rem;
  margin-bottom: 0.5rem;
}
.calendar .days li .eventSection .event.clear {
  background: none;
}
.calendar .days li .eventSection .event.alreadyfinished {
  background-color: #f1f1f1;
  color: #999;
}
.calendar .days li:nth-child(n+29) {
  border-bottom: none;
}
.calendar .days li.outside .date {
  color: #ddd;
}
.calendar .days li.today .date {
  border-radius: 50%;
  text-align: center;
  color: white;
}

.job-seeker .changeMonthBtn {
  background-color: #b5daee;
}
.job-seeker .changeMonthBtn:hover {
  background-color: #1ba1e6;
}
.job-seeker .days li .eventSection .event.onlineInterview {
  background-color: #77c7f0;
}
.job-seeker .days li .eventSection .event.offlineInterview {
  background-color: #f69495;
}
.job-seeker .days li.today .date {
  background-color: #577ad8;
}

.recruiter .changeMonthBtn {
  background-color: #9de0d7;
}
.recruiter .changeMonthBtn:hover {
  background-color: #72dfc7;
}
.recruiter .days li .eventSection .event.onlineInterview {
  background-color: #72dfc7;
}
.recruiter .days li .eventSection .event.offlineInterview {
  background-color: #ffbb94;
}
.recruiter .days li.today .date {
  background-color: #8a8bd1;
}

.calendarHeader {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.changeMonthBtn {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 1rem;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 4px;
  color: rgb(255, 255, 255);
  border: none;
}

.month {
  font-size: 2rem;
  margin-left: 1rem;
}
@media (min-width: 992px) {
  .month {
    font-size: 2.5rem;
  }
}

.calendarExample {
  display: flex;
  font-size: x-small;
}

.exampleAlreadyfinished,
.exampleOnlineInterview,
.exampleOfflineInterview {
  width: fit-content;
  margin-bottom: 1rem;
  margin-right: 0.5rem;
  padding: 0.5rem 2rem;
  border-radius: 2rem;
  font-size: 1rem;
}

.job-seeker .exampleAlreadyfinished {
  background-color: #f1f1f1;
  color: #999;
}
.job-seeker .exampleOnlineInterview {
  background-color: #77c7f0;
}
.job-seeker .exampleOfflineInterview {
  background-color: #f69495;
}

.recruiter .exampleAlreadyfinished {
  background-color: #f1f1f1;
  color: #999;
}
.recruiter .exampleOnlineInterview {
  background-color: #72dfc7;
}
.recruiter .exampleOfflineInterview {
  background-color: #ffbb94;
}

.calendarEvents {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.card-base, .recruiter .cardOfflineInterviewComing, .recruiter .cardOnlineInterviewComing, .job-seeker .cardOfflineInterviewCheck, .job-seeker .cardOnlineInterviewCheck, .job-seeker .cardOfflineInterviewComing, .job-seeker .cardOnlineInterviewComing {
  width: 19%;
  margin-right: 1rem;
  padding: 1rem;
  border-radius: 10px;
  background-color: #fff;
}
.card-base:hover, .recruiter .cardOfflineInterviewComing:hover, .recruiter .cardOnlineInterviewComing:hover, .job-seeker .cardOfflineInterviewCheck:hover, .job-seeker .cardOnlineInterviewCheck:hover, .job-seeker .cardOfflineInterviewComing:hover, .job-seeker .cardOnlineInterviewComing:hover {
  box-shadow: 0 0 8px 0 rgba(99, 99, 99, 0.2);
  transition: box-shadow 0.3s;
  cursor: pointer;
}
@media (max-width: 768px) {
  .card-base, .recruiter .cardOfflineInterviewComing, .recruiter .cardOnlineInterviewComing, .job-seeker .cardOfflineInterviewCheck, .job-seeker .cardOnlineInterviewCheck, .job-seeker .cardOfflineInterviewComing, .job-seeker .cardOnlineInterviewComing {
    width: 45%;
    margin-bottom: 1rem;
  }
}

.job-seeker .cardOnlineInterviewComing {
  border: #77c7f0 0.1rem solid;
}
.job-seeker .cardOnlineInterviewComing .card-title {
  color: #77c7fa;
}
.job-seeker .cardOfflineInterviewComing {
  border: #f69495 0.1rem solid;
}
.job-seeker .cardOfflineInterviewComing .card-title {
  color: #f69495;
}
.job-seeker .cardOnlineInterviewCheck {
  border: #77c7f0 0.1rem dashed;
}
.job-seeker .cardOnlineInterviewCheck .card-title {
  color: #77c7fa;
}
.job-seeker .cardOfflineInterviewCheck {
  border: #f69495 0.1rem dashed;
}
.job-seeker .cardOfflineInterviewCheck .card-title {
  color: #f69495;
}

.recruiter .cardOnlineInterviewComing {
  border: #72dfc7 0.1rem solid;
}
.recruiter .cardOnlineInterviewComing .card-title {
  color: #57c0a9;
}
.recruiter .cardOfflineInterviewComing {
  border: #ffbb94 0.1rem solid;
}
.recruiter .cardOfflineInterviewComing .card-title {
  color: #ffac7c;
}

.card-body {
  margin-bottom: 1rem;
}

.card-time {
  font-size: 1.25rem;
  color: #999;
}

.overlay-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(1px);
}

.overlay-top .btnControlWrapper {
  position: fixed;
  bottom: 10%;
  right: 3%;
  display: flex;
  width: 280px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  z-index: 1002;
}

.highlight {
  position: relative;
  z-index: 1001;
  background-color: white;
  padding: 2px;
  border-radius: 8px;
}

.overlay-top .overlay-text {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 20px;
  position: fixed;
  top: 5%;
  right: 2%;
  margin-left: 16px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  z-index: 1002;
}

.satisfyQAContainer {
  width: 80%;
  max-width: 960px;
  margin: 0 auto;
}
.satisfyQAContainer .sectionTitleWrapper {
  display: block;
  text-align: center;
}
.satisfyQAContainer .sectionTitleWrapper > h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 40px 0 20px 0;
}
.satisfyQAContainer .sectionTitleWrapper > h3 {
  font-size: 24px;
  font-weight: 700;
}
.satisfyQAContainer .sectionTitleWrapper > p {
  font-size: 20px;
  font-weight: 700;
}

.QAWrapper {
  font-size: 16px;
}

.survey-question {
  margin: 0 0 15px 0;
}
.survey-question .question-text {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 17px 0;
}
.survey-question .radio-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.survey-question .radio-group .radio-option {
  display: inline-block;
  border-width: 1px;
  border-style: dotted;
  background-color: #fff;
  width: 100%;
  padding: 8px 10px;
  border-radius: 3px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  margin: 0px 5px 10px 5px;
  -webkit-tap-highlight-color: transparent;
  transition: 0.2s;
  color: #818181;
  font-weight: 400;
}
.survey-question .radio-group .radio-option input[type=radio] {
  transition-property: border-color;
  transition-duration: 0.3s;
}
.survey-question textarea {
  width: 100%;
  min-height: 200px;
  border-radius: 5px;
  border: 1px solid #8d8d8d;
  transition: 0.2s;
}
.survey-question input[type=text] {
  width: 100%;
  border: 1px solid #fff;
  border-bottom: 1px solid #8d8d8d;
}

.other-wrap {
  display: flex;
  flex-direction: column;
}
.other-wrap .other {
  display: block;
  width: 100%;
  margin: 0 0 0 10px;
}
.other-wrap .other .question-ans {
  width: 100%;
}

.profileControlWrapper .jobBtn {
  min-width: 150px;
  padding: 10px 20px;
}
.profileControlWrapper .jobBtn span {
  font-size: 18px;
}

@media (min-width: 767px) {
  .profileContentBoard {
    padding: 30px 40px 20px;
  }
  .survey-question {
    margin: 0 0 35px 0;
  }
  .survey-question .radio-group {
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .survey-question .question-text {
    font-size: 20px;
  }
  .sectionTitleWrapper > h2 {
    font-size: 42px;
  }
  .sectionTitleWrapper > h3 {
    font-size: 32px;
  }
  .sectionTitleWrapper > p {
    font-display: 24px;
  }
  .other-wrap {
    flex-direction: row;
  }
  .other-wrap .other {
    display: flex;
    width: 60%;
  }
  .other-wrap .other .question-ans {
    width: 24%;
  }
}
.job-theme .sectionTitleWrapper > h2 {
  color: #37BBFF;
}
.job-theme .survey-question textarea:hover, .job-theme .survey-question .radio-option:hover {
  border: 1px solid #37BBFF;
}

.recruit-theme .sectionTitleWrapper > h2 {
  color: var(--color-green);
}
.recruit-theme .survey-question textarea:hover, .recruit-theme .survey-question .radio-option:hover {
  border: 1px solid var(--color-green);
}

.interviewRoom {
  width: 100%;
  min-height: 300px;
}

.btnWrapper {
  margin: 20px 0;
  padding: 0;
  flex-direction: column;
}
.btnWrapper button {
  text-align: center;
  display: inline-block;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.05em;
  padding: 12px 30px;
  outline: none !important;
  box-shadow: none;
  border: none;
  background-color: var(--color-pink);
  border-radius: 5px;
  margin: 0 0 15px 0;
  width: 100%;
}
.btnWrapper button:hover {
  opacity: 0.7;
}
.btnWrapper button.finishBtn {
  background-color: var(--color-green);
}
.btnWrapper button.finishBtn:before {
  content: "\e5ca";
  font-family: "Material Icons";
}
.btnWrapper button.noAttendBtn {
  background-color: #b3b3b3;
}
.btnWrapper button.serviceBtn {
  background-color: #00C200;
}

@media (min-width: 767px) {
  .btnWrapper button {
    margin: 0 1%;
    width: 30%;
  }
}
@media (min-width: 1200px) {
  .interviewRoom {
    min-height: 600px;
  }
  .btnWrapper {
    margin: 30px 0;
  }
  .btnWrapper button {
    font-size: 18px;
  }
}
.jobBtn {
  display: inline-block;
  line-height: 1.2;
  letter-spacing: 0.05em;
  padding: 10px 20px;
  outline: none !important;
  box-shadow: none;
  border: none;
  background-color: var(--color-pink);
  border-radius: 5px;
}
.jobBtn span {
  display: inline-block;
  font-size: 16px;
  color: #fff;
}
.jobBtn.full {
  display: block;
  width: 100%;
  text-align: center;
}
.jobBtn.orange {
  background-color: #f68b60;
}
.jobBtn.warn {
  background-color: #ee3638;
}
.jobBtn.gray {
  background-color: #b3b3b3;
}
.jobBtn:hover {
  opacity: 0.7;
}
.jobBtn.withArrow span {
  position: relative;
  padding-right: 20px;
}
.jobBtn.withArrow span::before {
  content: "\e5c8";
  display: block;
  font-family: "Material Icons";
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  position: absolute;
  top: 0.05em;
  right: 0;
  transition: 0.3s;
}
.jobBtn.withArrow:hover span::before {
  transform: translateX(5px);
}
.jobBtn.withArrowB span {
  position: relative;
  padding-left: 20px;
}
.jobBtn.withArrowB span::before {
  content: "\e5c4";
  display: block;
  font-family: "Material Icons";
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  position: absolute;
  top: 0.05em;
  left: 0;
  transition: 0.3s;
}
.jobBtn.withArrowB:hover span::before {
  transform: translateX(-5px);
}
.jobBtn.withView span {
  position: relative;
  padding-right: 26px;
}
.jobBtn.withView span::before {
  content: "\e8f4";
  display: block;
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  top: 0em;
  right: 0;
  transition: 0.3s;
}
.jobBtn.withView:hover span::before {
  transform: scale(1.2);
}
.jobBtn.square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  aspect-ratio: 1;
}

.iconBtn {
  display: inline-block;
  line-height: 1.2;
  letter-spacing: 0.05em;
  padding: 7px 10px;
  border: none;
  box-shadow: none;
  background-color: #E7E7E7;
  border-radius: 5px;
}
.iconBtn span {
  display: inline-block;
  font-size: 14px;
  color: #999999;
  position: relative;
  padding-left: 20px;
}
@media screen and (min-width: 992px) {
  .iconBtn span {
    font-size: 16px;
  }
}
.iconBtn span::before {
  content: "";
  display: block;
  font-size: 1.125em;
  font-family: fontAwesome;
  position: absolute;
  top: 0;
  left: 0;
}
.iconBtn.remove span::before {
  content: "\f014";
}
.iconBtn.love {
  background-color: #e1edf0;
}
.iconBtn.love span {
  color: #1ba1e6;
}
.iconBtn.love span::before {
  font-size: 0.9375em;
  color: #F69495;
  content: "\f004";
  top: 1px;
}
.iconBtn.forward {
  background-color: #e1edf0;
}
.iconBtn.forward span {
  color: #1ba1e6;
}
.iconBtn.forward span::before {
  content: "\f060";
}
.iconBtn.pdf {
  background-color: #FFD737;
}
.iconBtn.pdf span {
  color: #fff;
}
.iconBtn.pdf span::before {
  content: "\f1c1";
}
.iconBtn.edit {
  background-color: #ee3638;
  padding: 4px 6px;
  margin: 3px;
}
.iconBtn.edit span {
  color: #fff;
}
.iconBtn.edit span::before {
  content: "\f044";
}
.iconBtn.google {
  padding: 10px 15px;
  background-color: #DB4437;
}
.iconBtn.google span {
  color: #fff;
}
.iconBtn.google span::before {
  content: "\f1a0";
}
.iconBtn.line {
  padding: 10px 15px;
  background-color: #57B763;
}
.iconBtn.line span {
  color: #fff;
}
.iconBtn.line span::before {
  content: "";
  width: 1.4em;
  height: 1.4em;
  background: url(../img/icon-line.svg) center/1.4em no-repeat;
  top: -3px;
  left: -6px;
}
.iconBtn:hover {
  opacity: 0.7;
}

.recruitBtn {
  display: inline-block;
  min-width: 120px;
  font-size: 16px;
  text-align: center;
  color: #b3b3b3;
  letter-spacing: 0.05em;
  border: 2px solid #b3b3b3;
  border-radius: 5px;
  background: none;
  box-shadow: none;
  outline: none;
  padding: 5px 15px;
  margin: 5px;
}
.recruitBtn span {
  display: inline-block;
  position: relative;
  padding-left: 2em;
}
.recruitBtn span::before {
  content: "\e867";
  display: block;
  font-size: 22px;
  font-family: "Material Symbols Outlined";
  line-height: 1em;
  position: absolute;
  top: 0.1em;
  left: 0;
}
.recruitBtn.view span::before {
  content: "\e8f4";
}
.recruitBtn.mail span::before {
  content: "\e0be";
}
.recruitBtn.save span::before {
  content: "\e866";
}
.recruitBtn.more span {
  padding-left: 0;
  padding-right: 2em;
}
.recruitBtn.more span::before {
  content: "\e5cc";
  left: auto;
  right: 0;
}
.recruitBtn:focus {
  color: #b3b3b3;
}
.recruitBtn:hover, .recruitBtn.active {
  color: var(--color-pink);
  border-color: var(--color-pink);
}
.recruitBtn:hover {
  opacity: 0.7;
}

.withShingIcon {
  display: inline-block;
  text-decoration: underline;
  color: #1ba1e6;
  position: relative;
  padding-right: 1.75em;
}
.withShingIcon::after {
  content: "\e1c4";
  font-size: 1.7em;
  font-family: "Material Icons";
  position: absolute;
  top: -0.25em;
  right: 0;
}
@media screen and (min-width: 992px) {   
    .newsGallery button.slick-arrow.slick-next {
        right: -50px;
    }
    .newsGallery button.slick-arrow.slick-prev {
        left: -50px;
    }

    .contentStep .stepWrapper img.train_step {
        display: block;
        margin:0 auto;
        width: 1300px;
    }
    .contentStep .stepWrapper img.train_step_m {
        display: none;
    }

    .contentServ .listServ {
        gap: 2.5vw 5vw;
    }

    .contentServ .listServ_figure img {
        width: 135px;
        border: 20px solid #fff;
    }

    .contentServ .listServ li .listServ_text .servTitle {
        font-size: 1.5em;
    }

    .contentServ .listServ li .listServ_text .servText {
        font-size: 1em;
        opacity: 0;
    }

    .contentActivity .activityWrapper .item_Activity {
        width: calc(100% / 3 - 2vw);
        aspect-ratio: 16 / 9;
    }
    .contentActivity h3{
        font-size: 20px;
    }

}

/*# sourceMappingURL=lcc-job-base.css.map */