/**
* --------------------------------
* Career CSS
* --------------------------------
*/
.career.home#contents {
  padding-bottom: 0;
  overflow: hidden; }
.career.home .title-area {
  padding-top: 0; }
.career.home .scrolling-area {
  position: relative;
  position: fixed;
  left: calc(50% - 1px);
  bottom: 40px;
  width: 2px;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.5);
  text-indent: -9999em;
  overflow: hidden;
  z-index: 10; }
  .career.home .scrolling-area::after {
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    content: '';
    width: 2px;
    height: 0;
    background-color: #D4D4D4;
    vertical-align: top; }
  .career.home .scrolling-area::after {
    top: 0;
    left: 0;
    transform: translate(0, 0);
    background-color: #0B50F2;
    animation: ani-scrolling 2s infinite 1s; }
@keyframes ani-scrolling {
  0% {
    top: 0;
    height: 0; }
  50% {
    top: 0;
    height: 100%; }
  100% {
    top: 100%;
    height: 100%; } }
.career.home .subvisual-area {
  margin-top: 0;
  height: 880px;
  background: url("https://www.dn-solutions.com/resources/w/images/career/home_visual.jpg") center bottom no-repeat; }
  .career.home .subvisual-area .tit {
    color: #FFFFFF;
    font-family: "Poppins";
    font-size: 100px;
    font-weight: 600;
    line-height: 120px; }
    .career.home .subvisual-area .tit em {
      color: #0B50F2; }
  .career.home .subvisual-area p {
    margin-top: 58px;
    font-size: 40px;
    font-weight: 500;
    line-height: 60px;
    text-align: center; }
.career.home .work-area {
  margin-top: 100px; }
  .career.home .work-area .tit {
    position: relative;
    font-size: 48px;
    font-weight: 700;
    line-height: 66px;
    opacity: 0;
    transform: translateX(50px);
    transition: all .4s ease-in-out; }
    .career.home .work-area .tit strong {
      color: #0B50F2; }
    .career.home .work-area .tit p {
      position: absolute;
      top: 18px;
      left: auto;
      right: 40px;
      font-size: 24px;
      font-weight: 500;
      line-height: 36px;
      opacity: 0;
      transform: translateX(50px);
      transition: all .4s ease-in-out; }
  .career.home .work-area ul {
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    border-top: 2px solid #767676; }
  .career.home .work-area li {
    margin-left: 64px;
    padding-top: 80px;
    width: 384px;
    opacity: 0;
    transform: translateY(100px);
    transition: all .4s ease-in-out .2s; }
    .career.home .work-area li strong {
      position: relative;
      padding-top: 120px;
      display: block;
      font-size: 28px;
      font-weight: 700;
      line-height: 40px; }
      .career.home .work-area li strong::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-image: url("https://www.dn-solutions.com/resources/w/images/common/icon.png");
        display: inline-block;
        background-position: 0 0;
        background-repeat: no-repeat;
        content: '';
        width: 50px;
        height: 50px; }
      .career.home .work-area li strong::before {
        top: 0;
        left: 0;
        transform: translate(0, 0);
        width: 100px;
        height: 100px;
        background-image: url("https://www.dn-solutions.com/resources/w/images/career/career.png"); }
    .career.home .work-area li p {
      margin-top: 24px;
      color: #444444;
      font-size: 18px;
      font-weight: 500;
      line-height: 26px; }
    .career.home .work-area li:nth-of-type(3n+1) {
      margin-left: 0; }
    .career.home .work-area li:nth-of-type(2) {
      transition-delay: .4s; }
      .career.home .work-area li:nth-of-type(2) strong::before {
        background-position: -100px 0; }
    .career.home .work-area li:nth-of-type(3) {
      transition-delay: .5s; }
      .career.home .work-area li:nth-of-type(3) strong::before {
        background-position: -200px 0; }
    .career.home .work-area li:nth-of-type(4) {
      transition-delay: .6s; }
      .career.home .work-area li:nth-of-type(4) strong::before {
        background-position: 0 -200px; }
    .career.home .work-area li:nth-of-type(5) {
      transition-delay: .7s; }
      .career.home .work-area li:nth-of-type(5) strong::before {
        background-position: -100px -200px; }
    .career.home .work-area li:nth-of-type(6) {
      transition-delay: .8s; }
      .career.home .work-area li:nth-of-type(6) strong::before {
        background-position: -200px -200px; }
  .career.home .work-area.active .tit, .career.home .work-area.active p {
    opacity: 1;
    transform: translateX(0); }
  .career.home .work-area.active li {
    opacity: 1;
    transform: translateY(0); }
.career.home .partner-area {
  margin-top: 120px;
  padding: 120px 0;
  background-color: #F8F8F8; }
  .career.home .partner-area h3.tit {
    position: relative;
    font-size: 48px;
    font-weight: 700;
    line-height: 66px; }
    .career.home .partner-area h3.tit strong {
      color: #0B50F2; }
    .career.home .partner-area h3.tit p {
      position: absolute;
      top: 10px;
      left: auto;
      right: 0;
      width: 490px;
      font-size: 24px;
      font-weight: 500;
      line-height: 36px; }
  .career.home .partner-area .tabs.slide {
    margin-top: 60px; }
    .career.home .partner-area .tabs.slide .swiper-slide a {
      margin-right: 72px; }
    .career.home .partner-area .tabs.slide .swiper-slide:last-of-type a {
      margin-left: 0; }
  .career.home .partner-area .tab-contents {
    display: block;
    opacity: 0;
    height: 0; }
    .career.home .partner-area .tab-contents.active {
      opacity: 1;
      height: auto; }
  .career.home .partner-area .partner-list {
    padding-top: 20px;
    min-width: 1414px;
    overflow: hidden; }
    .career.home .partner-area .partner-list .partner-marquee {
      padding-top: 40px;
      height: 400px;
      text-align: center; }
      .career.home .partner-area .partner-list .partner-marquee .js-marquee-wrapper:after {
        content: '';
        display: block;
        clear: both; }
      .career.home .partner-area .partner-list .partner-marquee .partner-cont {
        position: relative;
        margin: 0 14px;
        float: left;
        width: 440px;
        height: 360px; }
        .career.home .partner-area .partner-list .partner-marquee .partner-cont:after {
          content: '';
          display: block;
          clear: both; }
      .career.home .partner-area .partner-list .partner-marquee > .partner-cont {
        float: none;
        display: inline-flex; }
      .career.home .partner-area .partner-list .partner-marquee figure {
        position: relative;
        width: 440px;
        height: 360px;
        overflow: hidden; }
        .career.home .partner-area .partner-list .partner-marquee figure img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 100%;
          object-fit: cover; }
        .career.home .partner-area .partner-list .partner-marquee figure figcaption {
          position: absolute;
          top: 32px;
          left: 32px;
          font-size: 18px;
          font-weight: 500;
          line-height: 26px;
          text-align: left; }
          .career.home .partner-area .partner-list .partner-marquee figure figcaption small {
            display: block;
            margin-bottom: 4px;
            color: #0B50F2;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px; }
      .career.home .partner-area .partner-list .partner-marquee .over {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(200deg, rgba(11, 80, 242, 0) 45%, #0B50F2 85%);
        opacity: 0;
        transition: opacity .2s ease-in-out; }
        .career.home .partner-area .partner-list .partner-marquee .over p {
          position: absolute;
          top: auto;
          left: 32px;
          right: 64px;
          bottom: 32px;
          color: #FFFFFF;
          font-size: 24px;
          font-weight: 700;
          line-height: 36px;
          text-align: left;
          transform: translateY(50px);
          transition: transform .2s ease-in-out; }
        .career.home .partner-area .partner-list .partner-marquee .over .btn-more {
          position: absolute;
          top: auto;
          left: auto;
          right: 32px;
          bottom: 32px;
          z-index: 1; }
          .career.home .partner-area .partner-list .partner-marquee .over .btn-more::after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-image: url("https://www.dn-solutions.com/resources/w/images/common/btn.png");
            display: inline-block;
            background-position: 0 -150px;
            background-repeat: no-repeat;
            content: '';
            width: 50px;
            height: 50px; }
          .career.home .partner-area .partner-list .partner-marquee .over .btn-more::after {
            z-index: 4; }
          .career.home .partner-area .partner-list .partner-marquee .over .btn-more .icon-ripple {
            width: 32px;
            height: 32px; }
            .career.home .partner-area .partner-list .partner-marquee .over .btn-more .icon-ripple::before, .career.home .partner-area .partner-list .partner-marquee .over .btn-more .icon-ripple::after {
              display: none; }
        .career.home .partner-area .partner-list .partner-marquee .over:hover {
          opacity: 1; }
          .career.home .partner-area .partner-list .partner-marquee .over:hover p {
            transform: translateY(0); }
    .career.home .partner-area .partner-list .nodata {
      padding-top: 170px;
      padding-bottom: 100px; }
.career.home .benefit-area {
  padding-top: 120px;
  overflow: hidden; }
  .career.home .benefit-area h3.tit {
    font-size: 48px;
    font-weight: 700;
    line-height: 66px;
    text-align: center; }
    .career.home .benefit-area h3.tit strong {
      color: #0B50F2; }
  .career.home .benefit-area .benefit-swiper {
    margin: 60px -320px 0 -320px;
    width: 1920px;
    overflow: hidden; }
    .career.home .benefit-area .benefit-swiper .swiper-slide {
      display: flex;
      align-items: center;
      width: 100%;
      background-color: #FFFFFF;
      overflow: hidden; }
      .career.home .benefit-area .benefit-swiper .swiper-slide .thumb {
        position: relative; }
        .career.home .benefit-area .benefit-swiper .swiper-slide .thumb::after {
          position: absolute;
          top: 0;
          left: auto;
          right: 0;
          bottom: 0;
          content: '';
          width: 600px;
          opacity: .8;
          background: linear-gradient(90deg, rgba(84, 132, 246, 0) 50%, #5484F6 100%); }
      .career.home .benefit-area .benefit-swiper .swiper-slide .info {
        margin-left: 60px;
        flex-grow: 1; }
        .career.home .benefit-area .benefit-swiper .swiper-slide .info .tit {
          position: relative;
          font-family: "Pretendard";
          font-size: 64px;
          font-weight: 600;
          line-height: 76px; }
          .career.home .benefit-area .benefit-swiper .swiper-slide .info .tit::before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-image: url("https://www.dn-solutions.com/resources/w/images/common/icon.png");
            display: inline-block;
            background-position: -300px 0;
            background-repeat: no-repeat;
            content: '';
            width: 50px;
            height: 50px; }
          .career.home .benefit-area .benefit-swiper .swiper-slide .info .tit::before {
            top: 0;
            left: auto;
            right: -104px;
            width: 74px;
            height: 74px;
            transform: translate(0, 0);
            background-image: url("https://www.dn-solutions.com/resources/w/images/career/career.png"); }
        .career.home .benefit-area .benefit-swiper .swiper-slide .info li {
          padding-top: 60px;
          font-size: 24px;
          font-weight: 700;
          line-height: 36px; }
          .career.home .benefit-area .benefit-swiper .swiper-slide .info li em {
            display: inline-block;
            margin-right: 15px;
            color: #A9A9A9; }
          .career.home .benefit-area .benefit-swiper .swiper-slide .info li p {
            margin-top: 12px;
            color: #767676;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px; }
      .career.home .benefit-area .benefit-swiper .swiper-slide.slide-life .tit::before {
        background-position: -400px 0; }
      .career.home .benefit-area .benefit-swiper .swiper-slide.slide-development .tit::before {
        top: 72px;
        background-position: 0 -100px; }
      .career.home .benefit-area .benefit-swiper .swiper-slide.slide-development .info li {
        padding-top: 40px; }
    .career.home .benefit-area .benefit-swiper .swiper-pagination {
      top: 50%;
      bottom: auto;
      left: 240px;
      transform: translate(0 -50%);
      width: 310px;
      text-align: right; }
      .career.home .benefit-area .benefit-swiper .swiper-pagination .swiper-pagination-bullet {
        margin: 20px 0;
        width: 100%;
        height: auto;
        background-color: transparent;
        border-radius: 0;
        opacity: 1; }
        .career.home .benefit-area .benefit-swiper .swiper-pagination .swiper-pagination-bullet .txt-tit {
          position: relative;
          display: inline-block;
          color: #FFFFFF;
          font-size: 28px;
          font-weight: 400;
          line-height: 40px; }
        .career.home .benefit-area .benefit-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .txt-tit {
          font-size: 32px;
          font-weight: 700;
          line-height: 48px;
          position: relative;
          position: relative; }
          .career.home .benefit-area .benefit-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .txt-tit::before {
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 12px;
            height: 12px;
            background-color: #D4D4D4;
            vertical-align: top; }
          .career.home .benefit-area .benefit-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .txt-tit::before {
            top: -5px;
            left: auto;
            right: -12px;
            background-color: #0B50F2;
            border-radius: 50%; }
          .career.home .benefit-area .benefit-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .txt-tit::after {
            position: absolute;
            top: 0;
            left: auto;
            right: 0;
            content: '';
            width: 100%;
            height: 4px;
            background-color: #D4D4D4;
            vertical-align: top; }
          .career.home .benefit-area .benefit-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .txt-tit:after {
            top: auto;
            bottom: -14px;
            background-color: #FFFFFF; }
.career.home .slogan-area {
  margin-top: 120px;
  overflow: hidden; }
  .career.home .slogan-area ul {
    display: flex;
    flex-wrap: nowrap;
    margin-left: 50%;
    width: 2380px; }
  .career.home .slogan-area li {
    position: relative;
    flex-grow: 1;
    padding-left: 32px; }
    .career.home .slogan-area li > div {
      position: relative;
      width: 280px;
      height: 280px;
      background: url("https://www.dn-solutions.com/resources/w/images/career/slogan_1.png") 0 0 no-repeat; }
      .career.home .slogan-area li > div span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 48px;
        font-weight: 700;
        line-height: 280px;
        text-align: center;
        color: #FFFFFF;
        background-color: #62AEF6;
        border-radius: 50%;
        opacity: 0;
        animation: ani-slogan 3s infinite 2s; }
    .career.home .slogan-area li:nth-of-type(1) {
      padding-left: 0;
      padding-right: 981px; }
      .career.home .slogan-area li:nth-of-type(1)::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-image: url("https://www.dn-solutions.com/resources/w/images/common/icon.png");
        display: inline-block;
        background-position: 0 0;
        background-repeat: no-repeat;
        content: '';
        width: 50px;
        height: 50px; }
      .career.home .slogan-area li:nth-of-type(1)::before {
        top: 0;
        left: 312px;
        transform: translate(0, 0);
        width: 950px;
        height: 280px;
        background-image: url("https://www.dn-solutions.com/resources/w/images/career/slogan_1_bg.png"); }
    .career.home .slogan-area li:nth-of-type(2) > div {
      background-image: url("https://www.dn-solutions.com/resources/w/images/career/slogan_2.png"); }
      .career.home .slogan-area li:nth-of-type(2) > div span {
        color: #1142B6;
        background-color: #83FFF8;
        animation-delay: 5s;
        animation-duration: 3.5s; }
    .career.home .slogan-area li:nth-of-type(3) {
      padding-right: 152px; }
      .career.home .slogan-area li:nth-of-type(3) > div {
        background-image: url("https://www.dn-solutions.com/resources/w/images/career/slogan_3.png"); }
        .career.home .slogan-area li:nth-of-type(3) > div span {
          background-color: #FA786B;
          animation-delay: 7s;
          animation-duration: 3s; }
      .career.home .slogan-area li:nth-of-type(3)::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-image: url("https://www.dn-solutions.com/resources/w/images/common/icon.png");
        display: inline-block;
        background-position: 0 0;
        background-repeat: no-repeat;
        content: '';
        width: 50px;
        height: 50px; }
      .career.home .slogan-area li:nth-of-type(3)::before {
        top: 50%;
        left: 344px;
        transform: translate(0, -50%);
        width: 120px;
        height: 120px;
        background-image: url("https://www.dn-solutions.com/resources/w/images/career/slogan_3_bg.png"); }
    .career.home .slogan-area li:nth-of-type(4) > div {
      background-image: url("https://www.dn-solutions.com/resources/w/images/career/slogan_4.png"); }
      .career.home .slogan-area li:nth-of-type(4) > div span {
        text-indent: -9999em;
        background: url("https://www.dn-solutions.com/resources/w/images/career/slogan_4_over.png") 0 0 no-repeat;
        border-radius: 0;
        animation-delay: 4s;
        animation-duration: 2.5s; }
@keyframes ani-slogan {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0; } }
.career.home .oneself-area {
  padding: 160px 0 0; }
  .career.home .oneself-area h3.tit {
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    line-height: 66px;
    opacity: 0;
    transform: translateY(50px);
    transition: all .4s ease-in-out .2s; }
  .career.home .oneself-area ul {
    margin-top: 60px;
    display: flex;
    justify-content: space-between; }
  .career.home .oneself-area li {
    position: relative;
    padding: 47px 32px;
    width: 408px;
    height: 380px;
    background-color: #F4F4F4;
    color: #444444;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    opacity: 0;
    transform: translateY(100px);
    transition: all .4s ease-in-out .4s; }
    .career.home .oneself-area li strong {
      display: block;
      padding: 152px 0 22px;
      color: #1142B6;
      font-size: 28px;
      font-weight: 700;
      line-height: 40px; }
    .career.home .oneself-area li::before {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-image: url("https://www.dn-solutions.com/resources/w/images/common/icon.png");
      display: inline-block;
      background-position: -100px -100px;
      background-repeat: no-repeat;
      content: '';
      width: 50px;
      height: 50px; }
    .career.home .oneself-area li::before {
      top: 40px;
      left: auto;
      right: 40px;
      width: 64px;
      height: 64px;
      transform: translate(0, 0);
      background-image: url("https://www.dn-solutions.com/resources/w/images/career/career.png"); }
    .career.home .oneself-area li:nth-of-type(2) {
      transition-delay: .6s; }
      .career.home .oneself-area li:nth-of-type(2)::before {
        background-position: -200px -100px; }
    .career.home .oneself-area li:nth-of-type(3) {
      transition-delay: .8s; }
      .career.home .oneself-area li:nth-of-type(3)::before {
        background-position: -300px -100px; }
  .career.home .oneself-area.active h3.tit, .career.home .oneself-area.active li {
    opacity: 1;
    transform: translateY(0); }
.career.home .banner-area {
  position: relative;
  margin-top: 160px;
  display: flex;
  align-items: center;
  height: 600px;
  background: url("https://www.dn-solutions.com/resources/w/images/career/home_banner.jpg") center top no-repeat;
  text-align: center;
  overflow: hidden;
  position: relative; }
  .career.home .banner-area::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 1920px;
    height: 600px;
    background-color: #D4D4D4;
    vertical-align: top; }
  .career.home .banner-area::before {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: #1142B6;
    opacity: .2; }
  .career.home .banner-area .tit {
    position: relative;
    color: #FFFFFF;
    font-size: 40px;
    font-weight: 700;
    line-height: 60px;
    opacity: 0;
    transform: translateY(50px);
    transition: all .4s ease-in-out .2s; }
    .career.home .banner-area .tit p {
      margin-top: 48px;
      font-size: 24px;
      font-weight: 500;
      line-height: 36px;
      opacity: 0;
      transform: translateY(50px);
      transition: all .4s ease-in-out .4s; }
  .career.home .banner-area .btn {
    margin-top: 60px;
    width: 300px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity transform .4s ease-in-out .6s; }
  .career.home .banner-area.active .tit, .career.home .banner-area.active .tit p, .career.home .banner-area.active .btn {
    opacity: 1;
    transform: translateY(0); }

html:lang(en) .career.home .subvisual-area .tit {
  font-family: "Noto Sans KR";
  font-weight: 700; }
html:lang(en) .career.home .work-area .tit p {
  width: 550px; }
html:lang(en) .career.home .oneself-area li {
  height: 420px; }
  html:lang(en) .career.home .oneself-area li strong {
    padding-top: 110px; }

html:lang(de) .career.home .subvisual-area .tit {
  font-family: "Noto Sans";
  font-weight: 700; }
html:lang(de) .career.home .oneself-area li {
  height: 420px; }
  html:lang(de) .career.home .oneself-area li strong {
    padding-top: 90px; }
html:lang(de) .career.home .banner-area .btn {
  width: 440px; }