@charset "UTF-8";

/* 공동 */
body {letter-spacing: -0.05em; line-height: 1.5;}
.bg-main-dark {background-color: var(--bs-main) !important;}
.bg-footer {background-color: var(--bs-footer) !important;}
.bg-sub-header {background-color: var(--bs-sub-header) !important; border-bottom: 1px solid #B5B5B580;}

#spinner-div { position: fixed; width: 100%; height: 100%; top: 0; left: 0; text-align: center; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; }
#spinner-div #load-area {position: absolute; top: 50%; left: 50%;}

.navbar-toggler {border: 0; padding: 0;}
.navbar-toggler-icon {--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
.navbar-toggler:focus {box-shadow: none;}
.main-header .nav-link {color: var(--bs-white) !important;}
.sub-header .nav-item .nav-link {color: var(--bs-white) !important;}
.offcanvas {background-color: var(--bs-main);}

.sub-header .nav-item.active .nav-link {color: var(--bs-orange) !important;}
.main-header .nav-item .sub-nav .nav-item .sub-nav-link {color: #B8B8B8 !important;}
.sub-header .nav-item .sub-nav .nav-item .sub-nav-link {color: #B8B8B8 !important;}
.main-header .nav-item .sub-nav .nav-item.active {border: 0 !important;}
.sub-header .nav-item .sub-nav .nav-item.active {border: 0 !important;}
.main-header .nav-item .sub-nav .nav-item.active .sub-nav-link {color: var(--bs-white) !important;}
.sub-header .nav-item .sub-nav .nav-item.active .sub-nav-link {color: var(--bs-white) !important;}

.form-check-input:checked {background-color: #181818; border-color: #181818;}

footer .nav-link p {margin:0; padding: 0; font-size: 12px;}
.vh-100-header {height: calc(100vh - 57px);}

.text-orange {--bs-text-opacity: 1; color: var(--bs-orange) !important; }
.text-white-orange {--bs-text-opacity: 1; color: #FF8800 !important; }
.border-orange {border-color: var(--bs-orange) !important;}

.btn-orange {--bs-btn-color: #fff; --bs-btn-bg: #EF9F40; --bs-btn-border-color: #EF9F40; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #f0992e; --bs-btn-hover-border-color: #f0992e; --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #f0992e; --bs-btn-active-border-color: #f0992e; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #EF9F40; --bs-btn-disabled-border-color: #EF9F40;}
.btn-outline-orange {--bs-btn-color: #EF9F40; --bs-btn-border-color: #EF9F40; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #EF9F40; --bs-btn-hover-border-color: #EF9F40; --bs-btn-focus-shadow-rgb: 13, 110, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #EF9F40; --bs-btn-active-border-color: #EF9F40; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #EF9F40; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #EF9F40; --bs-gradient: none;}
.sub-orange-bg {background-color: var(--bs-orange)}

.fs-60 {font-size: 7.5vw !important;}
.fs-50 {font-size: 6.4vw !important;}
.fs-40 {font-size: 5.6vw !important;}
.fs-40-16 {font-size: 1rem !important;}
.fs-30 {font-size: 4.3vw !important;}
.fs-28 {font-size: 1rem !important;}
.fs-24 {font-size: 1rem !important;}
.fs-20 {font-size: 1rem !important;}
.fs-20-14 {font-size: 1rem !important;}
.fs-20-small {font-size: 0.9rem !important;}
.fs-14 {font-size: 0.9rem !important;}

.lh-08 {line-height: 0.8 !important;}

.py-section {padding-top: 12vw; padding-bottom: 6vw;}
.py-sub-section {padding-top: 12vw; padding-bottom: 6vw;}

main img {max-width: 100%;}
.header-empty {padding-top: 65px;}

.root_daum_roughmap .cont {display: none !important;}


/* main */
.blur-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(19, 19, 19, 0.5); backdrop-filter: blur(2px); }
.chart-area .chart-line {top: -16%; right: 7%; max-width: 72%;}
.box-img img {width: 22.223vw; height: 22.223vw; }
.box-sub {right: -15px; left: unset;}
.box-sub img {width: 6.67vw; height: 6.67vw;}
#bg-canvas {width: 100%; height: 100%; display: block; overflow: hidden;}
.main-join-btn {font-weight: bold;}

/* company */
.company-header img {max-height: 100%; vertical-align: sub;}
.initial-img img {height: 162px; max-height: 100%;}
.ceo-sign {width: 15vw;}

/* career */
.next-txt {width: 30%;}
.speech-bubble {position: relative; padding: 50px 0; border-radius: 50px; background: linear-gradient(180deg, #EF9F40 -3.44%, #FFF -3.44%, #FFF8F0 11.92%);}
.speech-bubble::before {content: ""; position: absolute; left: 25px; top: 25px; width: 5.6vw; height: 5.6vw; background-image: url('/assets/images/sub/quotation-marks-start.png'); background-size: contain; background-repeat: no-repeat;}
.speech-bubble::after {content: ""; position: absolute; right: 25px; bottom: 25px; width: 5.6vw; height: 5.6vw; background-image: url('/assets/images/sub/quotation-marks-end.png'); background-size: contain; background-repeat: no-repeat;}
ul.check-list {list-style: none; margin: 0; padding: 0;}
ul.check-list li::before {content: ""; display: inline-block; width: 1rem; height: 1rem; background-image: url('/assets/images/sub/check-icon.png'); background-size: contain; background-repeat: no-repeat; margin-right: 1.2vw; vertical-align: middle;}
.check-description {background: #FFF8F0;}
.welfare-list .welfare-img {height: 25vw;}
.welfare-list .welfare-img img {height: 100%; object-fit: cover;}
.grow-area {padding-top: 25vw;}
.grow-title {top: 3vw; left: 0;}

/* board */
.list-img img {width: 100%;}
.list-img .list-desc {top: 60%; color: white; filter: invert(1);}

.portfolio-swiper .slide-item {}
.portfolio-swiper .slide-item.item-1 {background: url("/assets/images/sub/slide-bg-1.png") no-repeat;}
.portfolio-swiper .slide-item.item-2 {background: url("/assets/images/sub/slide-bg-2.png") no-repeat;}
.portfolio-swiper .slide-item.item-3 {background: url("/assets/images/sub/slide-bg-3.png") no-repeat;}

/* work */
.reason-bg:before{content: ""; background: url("/assets/images/work/reason-bg.png") no-repeat; background-size: 100% 100%; background-position: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150%; height: 190%;}
.work-border-img {border-bottom: 5px solid transparent; border-image: url(/assets/images/work/border-img.png) 100 0;}
#workCarousel .carousel-control-next, #workCarousel .carousel-control-prev {width: 20%;}
#workCarousel .carousel-control-next-icon, #workCarousel .carousel-control-prev-icon {width: 5rem; height: 3rem}
#workCarousel .carousel-control-prev-icon {background-image: none; }
#workCarousel .carousel-control-next-icon {background-image: none; }
#workCarousel .carousel-control-prev-icon.prev-1 {background-image: url("/assets/images/work/slide-prev-1.png"); }
#workCarousel .carousel-control-prev-icon.prev-2 {background-image: url("/assets/images/work/slide-prev-2.png"); }
#workCarousel .carousel-control-next-icon.next-2 {background-image: url("/assets/images/work/slide-next-2.png"); }
#workCarousel .carousel-control-next-icon.next-3 {background-image: url("/assets/images/work/slide-next-3.png"); }


/* inquiry */
form .asterisk {color: #EF9F40; vertical-align: middle;}
form .checkbox-area .btn {width: 28%; border-radius: 25px;}
form textarea {resize: none;}
form .submit-area .btn {width: auto; border-radius: 25px;}
form .drop-record .dropdown-toggle::after {position: absolute; top: 50%; transform: translateY(-50%); right: 20px;}
form .drop-record .dropdown-item.active, form .drop-record .dropdown-item:active {background-color: var(--bs-orange);}



/* responsive */
@media (min-width: 576px) {
}
@media (min-width: 768px) {
    .fs-60 {font-size: 36px !important;}
    .fs-50 {font-size: 26px !important;}
    .fs-40 {font-size: 20px !important;}
    .fs-40-16 {font-size: 16px !important;}
    .fs-30 {font-size: 16px !important;}
    .fs-28 {font-size: 16px !important;}
    .fs-24 {font-size: 11px !important;}
    .fs-20 {font-size: 11px !important;}
    .fs-20-14 {font-size: 14px !important;}

    .py-section {padding-top: 50px; padding-bottom: 30px;}
    .py-sub-section {padding-top: 105px; padding-bottom: 105px;}

    .three-area {height: 100%;}

    .chart-area .chart-line {top: -14%; right: 12%; max-width: 83%;}

    .box-img img {width: 67px; height: 67px; }
    .box-sub {left: -25px; right: unset;}
    .box-sub img {width: 20px; height: 20px;}

    .main-join-btn {width: 100%;}

    .ceo-sign {width: 52px;}

    .grow-area {padding-top: 105px;}
    .grow-title {top: 60px; left: 50px;}
    .speech-bubble::before {content: ""; position: absolute; left: 25px; top: 25px; width: 20px; height: 20px; background-image: url('/assets/images/sub/quotation-marks-start.png'); background-size: contain; background-repeat: no-repeat;}
    .speech-bubble::after {content: ""; position: absolute; right: 25px; bottom: 25px; width: 20px; height: 20px; background-image: url('/assets/images/sub/quotation-marks-end.png'); background-size: contain; background-repeat: no-repeat;}
    ul.check-list li::before {content: ""; display: inline-block; width: 16px; height: 16px; background-image: url('/assets/images/sub/check-icon.png'); background-size: contain; background-repeat: no-repeat; margin-right: 12px; vertical-align: middle;}
    .welfare-list .welfare-img {height: 100px;}

    .text-width-915 {max-width: 395px; margin: 0 auto; width: 100%;}

    form .checkbox-area .btn {width: 16%; border-radius: 25px;}
}
@media (min-width: 992px) {
    main .container {
        max-width: 720px;
    }
}
@media (min-width: 1200px) {
    .fs-60 {font-size: 60px !important;}
    .fs-50 {font-size: 50px !important;}
    .fs-40 {font-size: 40px !important;}
    .fs-40-16 {font-size: 40px !important;}
    .fs-30 {font-size: 30px !important;}
    .fs-28 {font-size: 28px !important;}
    .fs-24 {font-size: 24px !important;}
    .fs-20 {font-size: 20px !important;}
    .fs-20-14 {font-size: 20px !important;}

    .py-section {padding-top: 170px; padding-bottom: 140px;}
    .py-sub-section {padding-top: 170px; padding-bottom: 170px;}

    .main-header nav {padding: 0;}
    .main-header .nav-item {padding: 0.5rem 0;}
    .main-header .nav-item .sub-nav {position: absolute; bottom: -56px; left: 0; display: flex;}
    .main-header .nav-item .sub-nav .nav-item {flex-shrink: 0; border: 0 !important;}
    .sub-header .nav-item.active .sub-nav .nav-item.active .sub-nav-link {color: var(--bs-white) !important;}
    .main-header .sub-nav-bg {display: block; width: 100%; height: 58px; background: var(--bs-sub-header) !important;}

    .sub-header nav {padding: 0;}
    .sub-header .nav-item {padding: 0.5rem 0;}
    .sub-header .nav-item .sub-nav {position: absolute; bottom: -56px; left: 0; display: flex;}
    .sub-header .nav-item .sub-nav .nav-item {flex-shrink: 0; border: 0 !important;}
    .sub-header .sub-nav-bg {display: block; width: 100%; height: 58px; background: var(--bs-sub-header) !important;}
    
    .sub-header .nav-item.active {border-bottom: 2px solid var(--bs-orange) !important;}

    .box-img img {width: 128px; height: 128px; }
    .box-sub {left: -45px; right: unset;}
    .box-sub img {width: 38px; height: 38px;}

    .next-txt {width: auto;}
    .ceo-sign {width: auto;}

    .grow-area {padding-top: 170px;}
    .grow-title {top: 140px; left: 30px;}
    .speech-bubble::before {content: ""; position: absolute; left: 25px; top: 25px; width: 32px; height: 28px; background-image: url('/assets/images/sub/quotation-marks-start.png'); background-size: contain; background-repeat: no-repeat;}
    .speech-bubble::after {content: ""; position: absolute; right: 25px; bottom: 25px; width: 32px; height: 28px; background-image: url('/assets/images/sub/quotation-marks-end.png'); background-size: contain; background-repeat: no-repeat;}
    ul.check-list li::before {content: ""; display: inline-block; width: 31px; height: 28px; background-image: url('/assets/images/sub/check-icon.png'); background-size: contain; background-repeat: no-repeat; margin-right: 30px; vertical-align: middle;}
    .welfare-list .welfare-img {height: 150px;}

    /* inquiry */
    form .checkbox-area .btn {width: 116px;}
    form .submit-area .btn {width: 225px;}
}
@media (min-width: 1400px) {
    main .container {
        max-width: 1286px;
    }
    header .container {
        max-width: 1346px;
    }
    footer .container {
        max-width: 1519px;
    }

    .text-width-915 {max-width: 914px; margin: 0 auto; width: 100%;}
}