/* 공통 */
.dot-text-box > li {
    box-sizing: border-box;
    position: relative;
}
.dot-text-box > li::after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 50%;
}

.youtube-box {
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    position: relative;
    /* 21:9 */
    /* padding-bottom: 42.8571%; */
    /* 16:9 */
    padding-bottom: 56.25%;
    /* 4:3 */
    /* padding-bottom: 75%; */
}  
.youtube-box iframe {
    z-index: 1;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------------------------- */
/* 픽스 버튼 영역 */
.fix-btn-area {
    display: none;
  }
  .fix-btn-area .btn {
    width: 100%;
    height: 56px;
    background: #CE1D00;
    gap: 12px;
    transition: all 0.3s;
  }
  .fix-btn-area .btn:hover {
    background: linear-gradient(135deg, #E25F00, #ED2100);
  }
  .fix-btn-area .btn .text {
    font-size: 18px;
  }
  .fix-btn-area .btn .img-box {
    width: 16px;
  }
  
  @media (max-width:1200px) {
    .fix-btn-area {
        display: flex;
    }
  }

  

/* 사이드 메뉴 영역 */
.side-menu-area {
    top: 0;
    right: -150%;
    transition: all 0.3s;
}
.side-menu-area.active {
    right: 0;
}
.side-menu-area .top-box {
    height: 64px;
    box-sizing: border-box;
    padding: 0 40px;
}
.side-menu-area .top-box .logo-box {
    width: 144px;
}
.side-menu-area .top-box .x-btn {
    width: 28px;
}
.side-menu-area .menu-box {
    margin-top: 80px;
    box-sizing: border-box;
    padding: 0 50px;
}
.side-menu-area .menu-box li a {
    display: inline-block;
    font-size: 20px;
    color: #fff;
}
.side-menu-area .menu-box li:not(:first-child) a {
    margin-top: 40px;
}
.side-menu-area .menu-box li a.active {
    background: linear-gradient(135deg, #E25F00, #ED2100); color: transparent; -webkit-background-clip: text;
}
.side-menu-area .btn-box {
    margin-top: 40px;
    gap: 12px;
    box-sizing: border-box;
    padding: 0 50px;
}
.side-menu-area .btn-box > a {
    width: 160px;
    height: 44px;
    font-size: 16px;
    border-radius: 4px;
}

@media (max-width:767px) {
    .side-menu-area .top-box {
        height: 64px;
        padding: 0 20px;
    }
    .side-menu-area .top-box .logo-box {
        width: 130px;
    }
    .side-menu-area .top-box .x-btn {
        width: 24px;
    }
}

/* ------------------------------------------------------------------------------- */

/* 헤더 영역 */
.header-area {
    height: 88px;
}
.header-area.active {
    background: #000;
}
.header-area .con {
    max-width: 1280px;
}
.header-area .logo-box {
    width: 172px;
}
.header-area .right-box .menu-box li:not(:first-child) > a {
    margin-left: 60px;
}
.header-area .right-box .menu-box li a {
    font-size: 24px;
    color: #fff;
}
.header-area .right-box .menu-box li:not(:last-child) a:hover {
    background: linear-gradient(135deg, #E25F00, #ED2100); color: transparent; -webkit-background-clip: text;
}
.header-area .right-box .menu-box li:last-child a:hover {
    color: #CE1D00;
}
.header-area .right-box .menu-box li a.active {
    background: linear-gradient(135deg, #E25F00, #ED2100); color: transparent; -webkit-background-clip: text;
}
.header-area .ham-btn {
    width: 28px;
    right: 40px;
    display: none;
}

@media (max-width:1320px) {
    .header-area {
        height: 64px;
    }
    .header-area .logo-box {
        width: 144px;
    }
    .header-area .right-box .menu-box {
        display: none;
    }
    .header-area .ham-btn {
        display: block;
    }
}

@media (max-width:767px) {
    .header-area .logo-box {
        width: 130px;
    }
    .header-area .ham-btn {
        width: 24px;
        right: 20px;
    }
}

/* ------------------------------------------------------------------------------- */

/* 메인 비주얼 영역 */
.main-visual-area {
    overflow: hidden;
    background: url(../img/main_bg.png) no-repeat center center/cover;
    box-sizing: border-box;
    padding-bottom: 162.3%;
} 
.main-visual-area .bg-box {
    height: 0;
    overflow: hidden;
    animation-fill-mode: forwards;
    animation-name: action_1;
    animation-duration: 1.5s;
    animation-delay: 0.5s;
}
.main-visual-area .cnt-box-1 {
    max-width: 1280px;
    top: 10vw;
}
.main-visual-area .cnt-box-1 .text-box > h1 {
    font-size: 3.2291vw;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-name: action_4;
    animation-duration: 1s;
    animation-delay: 1.5s;
}
.main-visual-area .cnt-box-1 .text-box > .img-box {
    width: 30.9375vw;
    margin-top: 3.0208vw;
    opacity: 0;
    transform: translateX(50%);
    animation-fill-mode: forwards;
    animation-name: action_2;
    animation-duration: 1s;
    animation-delay: 1s;
}
.main-visual-area .cnt-box-1 .text-box > h2 {
    font-size: 2.0833vw;
    margin-top: 2.5vw;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-name: action_4;
    animation-duration: 1s;
    animation-delay: 1.7s;
}
.main-visual-area .cnt-box-1 .text-box > a {
    width: 14.5833vw;
    height: 3.4817vw;
    font-size: 1.6666vw;
    border-radius: 0.5208vw;
    margin-top: 5.8333vw;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-name: action_4;
    animation-duration: 1s;
    animation-delay: 1.9s;
    cursor: pointer;
}
.main-visual-area .cnt-box-1 .text-box > a:hover{
    background: linear-gradient(135deg, #E25F00, #ED2100);
}
/* .main-visual-area .img-item-box-1 {
    width: 31.8229vw;
    height: 31.8229vw;
    top: 7.6562vw;
    left: 5.625vw;
    border-radius: 50%;
    background: radial-gradient(#CFCFCF 0%, #C8C8C8 15%, #B6B6B6 30%, #999999 40%, #707070 50%, #3C3C3C 70%, #000000 85%);
    mix-blend-mode: color-dodge;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-name: action_5;
    animation-duration: 1s;
    animation-delay: 2.1s;
} */
.main-visual-area .img-item-box-2 {
    width: 62.8125vw;
    top: 3.4375vw;
    right: 5.3125vw;
    opacity: 0;
    transform: translateX(-50%);
    animation-fill-mode: forwards;
    animation-name: action_3;
    animation-duration: 1s;
    animation-delay: 1s;
}
.main-visual-area .cnt-box-2 {
    top: 66.6666vw;
    gap: 10.4166vw;
    width: 51.0416vw;
}
.main-visual-area .cnt-box-2 > div {
    gap: 3.75vw;
}
.main-visual-area .cnt-box-2 > div > h3 {
    font-size: 2.5vw;
}
.main-visual-area .video-area {
    top: 56.25vw;
}
.main-visual-area .scroll-btn {
    width: 1.4583vw;
    height: 1.4583vw;
    top: 52.3958vw;
    background: url(/img/arrow-down.svg) center center no-repeat;
    background-size: 28px 28px;
}

@keyframes action_1 {
    100%{
        height: 100%;
    }
}
@keyframes action_2 {
    60%{
        opacity: 100%;
        transform: translateX(-3%);
    }
    80%{
        opacity: 100%;
        transform: translateX(3%);
    }
    100%{
        opacity: 100%;
        transform: translateX(0);
    }
}
@keyframes action_3 {
    60%{
        opacity: 100%;
        transform: translateX(3%);
    }
    80%{
        opacity: 100%;
        transform: translateX(-3%);
    }
    100%{
        opacity: 100%;
        transform: translateX(0);
    }
}
@keyframes action_4 {
    100%{
        opacity: 100%;
    }
}
@keyframes action_5 {
    100%{
        opacity: 0.4;
    }
}

@media (max-width:1320px) {
    .main-visual-area {
        background: url(../img/main_bg_1320.png) no-repeat center center/cover;
        padding-bottom: 248.33%;
    } 
    .main-visual-area .bg-box > img {
        content: url(../img/main_item_1_1320.png);
    }
    .main-visual-area .cnt-box-1 {
        top: 13.541vw;
    }
    .main-visual-area .cnt-box-1 .text-box > h1 {
        font-size: 4.2083vw;
    }
    .main-visual-area .cnt-box-1 .text-box > .img-box {
        width: 48.4531vw;
        margin-top: 5.2916vw;
    }
    .main-visual-area .cnt-box-1 .text-box > h2 {
        font-size: 3.1666vw;
        margin-top: 4.25vw;
    }
    .main-visual-area .cnt-box-1 .text-box > a {
        width: 26.25vw;
        height: 5.8125vw;
        font-size: 2.125vw;
        margin-top: 5.2916vw;
    }
    .main-visual-area .img-item-box-2 {
        width: 76.5403vw;
        top: 19.1197vw;
        right: -9.233vw;
    }
    .main-visual-area .cnt-box-2 {
        top: 100vw;
        gap: 18.2291vw;
        width: 100%;
    }
    .main-visual-area .cnt-box-2 > div {
        gap: 6.25vw;
    }
    .main-visual-area .cnt-box-2 > div > h3 {
        font-size: 4.1666vw;
    }
    .main-visual-area .video-area {
        top: 90.3333vw;
    }
    .main-visual-area .scroll-btn {
        width: 2.4vw;
        height: 2.4vw;
        top: 80vw
    }
}

@media (max-width:1200px) {
    .main-visual-area {
        background: url(../img/main_bg_tb.png) no-repeat center center/cover;
        padding-bottom: 336.33%;
    } 
    .main-visual-area .bg-box > img {
        content: url(../img/main_item_1_tb.png);
    }
    .main-visual-area .cnt-box-1 {
        top: 21.3541vw;
    }
    .main-visual-area .cnt-box-1 .text-box > h1 {
        font-size: 5.2083vw;
    }
    .main-visual-area .cnt-box-1 .text-box > .img-box {
        width: 64.4531vw;
        margin-top: 7.2916vw;
    }
    .main-visual-area .cnt-box-1 .text-box > h2 {
        font-size: 4.1666vw;
        margin-top: 6.25vw;
    }
    .main-visual-area .cnt-box-1 .text-box > a {
        width: 31.25vw;
        height: 7.8125vw;
        font-size: 3.125vw;
        margin-top: 7.2916vw;
    }
    .main-visual-area .img-item-box-2 {
        width: 107.5403vw;
        top: 56.1197vw;
        right: -9.233vw;
    }
    .main-visual-area .cnt-box-2 {
        top: 172.2656vw;
        gap: 18.2291vw;
        width: 100%;
    }
    .main-visual-area .cnt-box-2 > div {
        gap: 6.25vw;
    }
    .main-visual-area .cnt-box-2 > div > h3 {
        font-size: 4.1666vw;
    }
    .main-visual-area .video-area {
        top: 158.3333vw;
    }
    .main-visual-area .scroll-btn {
        width: 3vw;
        height: 3vw;
        top: 138.802vw;
    }
}

@media (max-width:767px) {
    .main-visual-area {
        background: url(../img/main_bg_mb.png) no-repeat center center/cover;
        padding-bottom: 439%;
    } 
    .main-visual-area .bg-box > img {
        content: url(../img/main_item_1_mb.png);
    }
    .main-visual-area .cnt-box-1 {
        top: 33.3333vw;
    }
    .main-visual-area .cnt-box-1 .text-box > h1 {
        font-size: 6.6666vw;
    }
    .main-visual-area .cnt-box-1 .text-box > .img-box {
        width: 78.0555vw;
        margin-top: 8.8888vw;
    }
    .main-visual-area .cnt-box-1 .text-box > h2 {
        font-size: 5.5555vw;
        margin-top: 11.1111vw;
    }
    .main-visual-area .cnt-box-1 .text-box > a {
        width: 44.4444vw;
        height: 12.2222vw;
        font-size: 4.4444vw;
        margin-top: 10vw;
    }
    .main-visual-area .img-item-box-2 {
        width: 131.9444vw;
        top: 102.7777vw;
        right: -11.3888vw;
    }
    .main-visual-area .cnt-box-2 {
        top: 264.7222vw;
        gap: 22.2222vw;
    }
    .main-visual-area .cnt-box-2 > div {
        gap: 7.7777vw;
    }
    .main-visual-area .cnt-box-2 > div > h3 {
        font-size: 4.7222vw;
    }
    .main-visual-area .video-area {
        top: 236.6666vw;
    }
    .main-visual-area .scroll-btn {
        width: 4.6666vw;
        height: 4.6666vw;
        top: 210vw;
    }
}

/* ------------------------------------------------------------------------------- */

/* 채용 영역 */
.employment-area {
    padding: 200px 0;
}
.employment-area h1 {
    font-size: 48px;
}
.employment-area .cnt-box {
    margin-top: 80px;
    gap: 80px;
}
.employment-area .cnt-box > li {
    gap: 30px;
}
.employment-area .cnt-box > li h2 {
    font-size: 34px;
}
.employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li {
    font-size: 20px;
    text-align: center;
    box-sizing: border-box;
    padding: 28px 0;
    line-height: 15px;
}
.employment-area .cnt-box > li:nth-child(1) .table-box .td-box {
    box-sizing: border-box;
    padding: 24px 0;
    border-bottom: 1px solid #616161;
}
.employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li {
    font-size: 20px;
    text-align: center;
    letter-spacing: -0.03em;
    word-break: keep-all;
}
.employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li * {
    letter-spacing: -0.03em;
}
.employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(3) {
    text-align: left;
    gap: 40px;
}
.employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(1),
.employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(1) {
    width: 140px;
}
.employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(2),
.employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(2) {
    width: 210px;
}
.employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(3),
.employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(3) {
    width: calc(100% - 460px);
}
.employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(4),
.employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(4) {
    width: 100px;
}
.employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(5) {
    display: none;
}
.employment-area .cnt-box > li:nth-child(4) > ul > li {
    box-sizing: border-box;
    padding: 26px 32px;
    border-top: 1px solid #000;
    font-size: 24px;
}
.employment-area .cnt-box > li:nth-child(4) > ul > li:last-child {
    border-bottom: 1px solid #000;
}
.employment-area .cnt-box > li:nth-child(4) > ul > li > span {
    line-height: 37.8px;
}
.employment-area .cnt-box > li:nth-child(4) > ul > li > span.text-1 {
    width: 276px;
}
.employment-area .cnt-box > li:nth-child(4) > ul > li > span.text-2 {
    width: calc(100% - 276px);
}
.employment-area .cnt-box > li .dot-text-box > li {
    box-sizing: border-box;
    padding-left: 36px;
    font-size: 24px;
    line-height: 40px;
    word-break: keep-all;
}
.employment-area .cnt-box > li .dot-text-box > li::after {
    width: 6px;
    height: 6px;
    background: #000;
    top: 17px;
    left: 15px;
}
.employment-area .cnt-box > li .dot-text-box.option-1 br.tb-ver {
    display: none;
}

@media (max-width:1320px) {
    .employment-area {
        padding: 140px 0;
    }
    .employment-area h1 {
        font-size: 36px;
    }
    .employment-area .cnt-box {
        margin-top: 60px;
        gap: 72px;
    }
    .employment-area .cnt-box > li {
        gap: 26px;
    }
    .employment-area .cnt-box > li h2 {
        font-size: 28px;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li {
        font-size: 16px;
        padding: 20px 0;
        line-height: 12px;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box {
        /* padding: 24px 0; */
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li {
        font-size: 16px;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(3) {
        /* gap: 40px; */
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(1),
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(1) {
        width: 100px;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(2),
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(2) {
        width: 170px;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(3),
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(3) {
        width: calc(100% - 350px);
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(4),
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(4) {
        width: 80px;
    }
    .employment-area .cnt-box > li:nth-child(4) > ul > li {
        /* padding: 26px 32px; */
        font-size: 20px;
    }
    .employment-area .cnt-box > li:nth-child(4) > ul > li > span {
        line-height: 100%;
    }
    .employment-area .cnt-box > li:nth-child(4) > ul > li > span.text-1 {
        /* width: 276px; */
    }
    .employment-area .cnt-box > li:nth-child(4) > ul > li > span.text-2 {
        /* width: calc(100% - 276px); */
    }
    .employment-area .cnt-box > li .dot-text-box > li {
        padding-left: 30px;
        font-size: 20px;
        line-height: 200%;
    }
    .employment-area .cnt-box > li .dot-text-box > li::after {
        width: 5px;
        height: 5px;
        top: 17.5px;
        left: 12.5px;
    }
    .employment-area .cnt-box > li .dot-text-box.option-1 br.tb-ver {
        display: block;
    }
    .employment-area .cnt-box > li .dot-text-box.option-1 > li > span {
        display: none;
    }
}

@media (max-width:767px) {
    .employment-area {
        padding: 100px 0;
    }
    .employment-area h1 {
        font-size: 28px;
    }
    .employment-area .cnt-box {
        margin-top: 44px;
        gap: 60px;
    }
    .employment-area .cnt-box > li {
        gap: 20px;
    }
    .employment-area .cnt-box > li h2 {
        font-size: 22px;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li {
        font-size: 14px;
        line-height: 10px;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box {
        flex-wrap: wrap;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li {
        font-size: 15px;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(3) {
        gap: 28px;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(1),
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(1) {
        width: 120px;
        text-align: left;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(2),
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(2) {
        width: calc(100% - 120px);
        text-align: left;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(1) br,
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(2) br {
        display: none;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(3),
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(3) {
        width: 100%;
        text-align: left;
        margin-top: 30px;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(4),
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(4) {
        width: 100%;
        text-align: left;
        margin-top: 30px;
        box-sizing: border-box;
        padding-left: 80px;
        position: relative;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .td-box  > li:nth-child(4)::after {
        content: "근무지";
        font-family: "NotoSansCJKkr-Regular";
        font-size: 15px;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 19px;
        background: #eee;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        border-radius: 999px;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(1),
    .employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(2),
    .employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(3),
    .employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(4)
    {
        display: none;
    }
    .employment-area .cnt-box > li:nth-child(1) .table-box .th-box  > li:nth-child(5) {
        display: block;
        width: 100%;
    }
    .employment-area .cnt-box > li:nth-child(4) > ul > li {
        padding: 22px 0;
        font-size: 16px;
    }
    .employment-area .cnt-box > li:nth-child(4) > ul > li > span.text-1 {
        width: 168px;
    }
    .employment-area .cnt-box > li:nth-child(4) > ul > li > span.text-2 {
        width: calc(100% - 168px);
    }
    .employment-area .cnt-box > li .dot-text-box > li {
        padding-left: 22px;
        font-size: 15px;
        line-height: 180%;
    }
    .employment-area .cnt-box > li .dot-text-box > li::after {
        width: 4px;
        height: 4px;
        top: 11.5px;
        left: 9px;
    }
}


/* ------------------------------------------------------------------------------- */

/* 푸터 영역 */
.footer-area {
    box-sizing: border-box;
    padding: 60px 0 60px 0;
}
.footer-area .con {
    gap: 44px;
    max-width: inherit;
}
.footer-area .logo-box {
    width: 172px;
}
.footer-area .line {
    width: 1px;
    height: 78px;
    background: #fff;
}
.footer-area p {
    font-size: 22px;
    line-height: 30px;
}

@media (max-width:1320px) {
    .footer-area {
        padding: 48px 0;
    }
    .footer-area .con {
        gap: 32px;
        flex-direction: column;
    }
    .footer-area .logo-box {
        /* width: 172px; */
    }
    .footer-area .line {
        height: 32px;
    }
    .footer-area p {
        font-size: 18px;
        text-align: center;
        /* line-height: 30px; */
    }
}
@media (max-width:1200px) {
    .footer-area{
        margin-bottom: 56px;
    }
}

@media (max-width:767px) {

    .footer-area .line {
        height: 32px;
    }
    .footer-area p {
        font-size: 17px;
        text-align: center;
        /* line-height: 30px; */
    }
}




br.pc-ver { display: block;}
br.mb-ver { display: none;}
@media (max-width:767px) {
    br.pc-ver { display: none;}
    br.mb-ver { display: block;}
}