@charset "utf-8";

/* 공통 */
.orange {color: #e86f25;}
.tbl {border-top: 1px solid #a2a2a2; width: 100%; font-size: 16px;; color: #222;}
.tbl tr {border-bottom: 1px solid #e2e2e2;}
.tbl th, .tbl td {height: 60px; line-height: 60px;}
.tbl th {text-align: center; background-color: #f5f5f5; color: #666; vertical-align: middle;}
.tbl td {padding-left: 40px;}

.con-sec {position: relative;}
.con-sec:not(:last-child) {margin-bottom: 100px;}
.con-sec-title {position: relative; font-size: 26px; margin-bottom: 65px; font-weight: 700; padding-left: 20px;;}
.con-sec-title::before {position: absolute; display: block; content: ''; width: 5px; height: 100%; background-color: #e86f25; left: 0; top: 50%; transform: translateY(-50%);}
.con-sec.gray {padding-top: 90px;}
.con-sec .bg-gray {position: absolute; top: 0px; left: -50vh; width: 990vw; height: calc(100% + 130px); background-color: #f9f9f9; z-index: -1;}

.tab-menu ul {display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 100px;}
.tab-menu ul li {height: 60px; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: 18px; border: 1px solid #d9d9d9; cursor: pointer;}
.tab-menu ul li.active {background-color: #e86f25; color: #fff;}
.tab-menu2 ul {display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 100px;}
.tab-menu2 ul li {height: 60px; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: 18px; border: 1px solid #d9d9d9; cursor: pointer;}
.tab-menu2 ul li.active {background-color: #e86f25; color: #fff;}
.tab-menu3 ul {display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 100px;}
.tab-menu3 ul li {height: 60px; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: 18px; border: 1px solid #d9d9d9; cursor: pointer;}
.tab-menu3 ul li.active {background-color: #e86f25; color: #fff;}

.tab-con > div {display: none;}
.tab-con > div.on {display: block;}

.grid-wrap {display: grid; grid-template-columns: repeat(4, 1fr);}

/* 메인 */
.section1 {height: 828px; margin-top: -105px; position: relative;}
.section1 .main-swiper {height: 828px; position: relative;}
.section1 .main-swiper .swiper-slide .main-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 5000ms ease-out; transform: scale(1.1); background-repeat: no-repeat; background-size: cover; background-position: center}
.section1 .main-swiper .swiper-slide.swiper-slide-active .main-bg {transform: scale(1); transition-delay: 1s;}
.section1 .main-swiper .swiper-slide .con {height: 100%;}
.section1 .main-swiper .text-box {position: absolute; top: 43%; left: 0; transform: translateY(-50%); color: #fff;}
.section1 .main-swiper .text-box .title {margin-bottom: 25px;}
.section1 .main-swiper .text-box .title span {font-size: 25px; margin-bottom: 18px; display: block;}
.section1 .main-swiper .text-box .title strong {font-size: 55px; font-weight: 700;}
.section1 .main-swiper .text-box .sub-title {font-size: 15px; line-height: 150%;}
.section1 .main-swiper .swiper-btn-wrap {max-width: 1048px; width: 100%; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); top: 0; z-index: 2}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 5px;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {left: 0; bottom: 82px; text-align: left; cursor: pointer;}
.main-swiper-pagination .swiper-pagination-bullet {background-color: transparent; border: 1.5px solid #fff; opacity: 1; width: 10px; height: 10px;}
.main-swiper-pagination .swiper-pagination-bullet-active {background-color: #e86f25; border: 1.5px solid #e86f25;}
.swiper-button-prev, .swiper-rtl .swiper-button-next {left: 0; top: 62%; width: 48px; height: 48px; cursor: pointer;}
.swiper-button-next, .swiper-rtl .swiper-button-prev {right: auto; left: 86px; top: 62%; width: 48px; height: 48px; cursor: pointer;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {display: none;}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {display: none;}

.section2 {padding: 83px 0 55px; position: relative; overflow-x: hidden;}
.section2 .circle {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1}
.section2 .circle > * {border-radius: 100%; position: absolute;}
.section2 .circle .circle1 {width: 598px; height: 598px; border: 60px solid #fafaf9; background-color: #ededed; top: -270px; left: -80px;}
.section2 .circle .circle2 {width: 504px; height: 504px; background-color: #feefe7; top: 467px; right: -160px;}
.section2 .company-wrap {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 10px; row-gap: 16px; margin-bottom: 50px;}
.section2 .company-wrap .company-item {width: 100%; min-height: 340px; position: relative; border-radius: 17px;}
.section2 .company-wrap .company-item:hover {box-shadow: 3px 3px 5px rgba(0,0,0,0.4);}
.section2 .company-wrap .company-item:nth-child(1) {box-shadow: none;}
.section2 .company-wrap .company-item .company-img-wrap {position: relative; height: 100%;}
.section2 .company-wrap .company-item .company-img-wrap span {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; border-radius: 17px;}
.section2 .company-wrap .company-item .company-img-wrap img {transition: .3s all ease-in-out;}
.section2 .company-wrap .company-item:hover .company-img-wrap img {transform: scale(1.15); transition: .3s all; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 17px; overflow: hidden;}
.section2 .company-wrap .company-item .company-text-wrap {position: absolute; bottom: 40px; left: 42px;}
.section2 .company-wrap .company-item .company-text-wrap.title {position: absolute; top: 55%; left: 40%; transform: translate(-40%,-50%);}
.section2 .company-wrap .company-item .company-text-wrap .sec-title {font-size: 30px; margin-bottom: 15px; color: #1e1d1c;}
.section2 .company-wrap .company-item .company-text-wrap p {font-size: 15px; color: #494b4b; line-height: 145%;}
.section2 .company-wrap .company-item .company-text-wrap .company-title span {display: block;}
.section2 .company-wrap .company-item .company-text-wrap .company-title .eng-title {color: #a7a5a5; font-size: 13px; margin-bottom: 10px; letter-spacing: -0.5px;}
.section2 .company-wrap .company-item .company-text-wrap .company-title .kor-title {color: #fff; font-size: 24px; font-weight: 600; margin-bottom: 18px;}
.section2 .company-wrap .company-item .company-text-wrap .link-more {border: 1px solid #fff; display: inline-block; padding: 7px 8px; font-size: 13px; background-color: transparent; color: #fff; transition: .3s all ease-in-out;}
.section2 .company-wrap .company-item:hover .company-text-wrap .link-more {background-color: #fff; color: #333; transition: .3s all;}

.section2 .service-wrap {display: flex; justify-content: space-between; gap: 50px; margin-top: 50px;}
.section2 .service-wrap {width: 100%;}
.section2 .service-wrap .sec-title {font-size: 25px; font-weight: 600; margin-bottom: 27px; text-align: left;}
.section2 .service-wrap > div .service-list li {display: flex; justify-content: space-between; align-items: center; padding-bottom: 24px; box-sizing: border-box; margin-bottom: 20px; border-bottom: 1px solid #d2d2d2; height: 80px;}
.section2 .service-wrap > div .service-list .date {margin-right: 16px; font-size: 11px; color: #666; font-weight: 500;}
.section2 .service-wrap > div .service-list .date span {display: block;} 
.section2 .service-wrap > div .service-list .date .day {margin-bottom: 10px; font-size: 34px; font-weight: 800;}
.section2 .service-wrap .notice .service-list .date .day {color: #005fc9;}
.section2 .service-wrap .progress .service-list .date .day {color: #e86f25;}
.section2 .service-wrap > div .service-list .service-text {margin-right: 24px; width: calc(100% - 84px);}
.section2 .service-wrap > div .service-list .service-text .service-title {font-size: 14px; margin-bottom: 10px; color: #000; font-weight: 500;}
.section2 .service-wrap > div .service-list .service-text .service-desc {font-size: 12px; color: #666; line-height: 16px; word-break: keep-all;}

.section3 {height: 423px; position: relative}
.section3 .bg {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-size: cover; background-position: 0 0;}
.section3 .section-wrap {position: relative; width: 100%; height: 100%; box-sizing: border-box;}
.section3 .quick-list {position: absolute; top: 50%; transform: translateY(-50%); width: 100%; display: grid; grid-template-columns: repeat(4, 1fr);}
.section3 .quick-list li {text-align: center; color: #fff;}
.section3 .quick-list li img {margin-bottom: 20px;}
.section3 .quick-list li .quick-title {margin-bottom: 15px; font-size: 24px; font-weight: 600;}
.section3 .quick-list li .quick-desc {margin-bottom: 40px; font-size: 13px; line-height: 135%; word-break: keep-all;}
.section3 .quick-list li .quick-more {font-weight: 600; font-size: 13px; position: relative;}
.section3 .quick-list li .quick-more::after {position: absolute; display: block; content: ''; width: 0px; height: 1px; background-color: #ccc; bottom: -10px; left: 50%; transform: translateX(-50%); transition: all linear .2s;}
.section3 .quick-list li:hover .quick-more::after {width: 100%;}


/******************************************** sub 공통 ********************************************/
.sub-banner {position: relative; height: 500px; margin-top: -120px; background-repeat: no-repeat; background-size: cover; background-position: center;}
.sub-banner-short {position: relative; height: 150px; margin-top: -120px; background-repeat: no-repeat; background-size: cover; background-position: center;}
.sub-banner-tit {text-align: center; color: #fff; font-size: 42px; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); font-weight: 500; letter-spacing: 1.5px;}

.breadcrumb {width: 100%; max-width: 1200px; height: 54px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); box-sizing: border-box; background-color: #fff; border-bottom: 1px solid #e0e0e0; z-index: 2;}
.breadcrumb > div {display: flex; max-width: 1270px; margin: 0 auto; align-items: center; height: 100%;}
.breadcrumb > div > a {display: flex; align-items: center; width: 54px; height: 100%; background-color: #e87026;}
.breadcrumb > div > a > img {margin: 0 auto;}
.breadcrumb .dep {height: 100%; display: flex; align-items: center; font-size: 14px; border-right: 1px solid #e0e0e0;}

.selectBox * {box-sizing: border-box;}
.selectBox {position: relative; width: 240px; height: 100%; border: none; z-index: 9; background: url('/front/images/ico_plus.png') calc(100% - 22px) center no-repeat; background-size: 12px; cursor: pointer;;}
.selectBox::after {content: ''; display: none; position: absolute; width: 2px; height: 100%; top: 0; right: 35px; background-color: #ffc700;}
.selectBox .select-label {display: flex; align-items: center; justify-content: space-between; width: inherit; height: inherit; border: 0 none; outline: 0 none; padding-left: 20px; background-color: transparent; cursor: pointer; font-size: 14px; color: #666; position: relative; padding-right: 20px; box-sizing: border-box;}
.selectBox .select-label span {color: #b2b2b2; font-size: 16px;}
.selectBox .option-list {top: 45px; background-color: #fff; border: 1px solid #f8f9fa;;}
.selectBox .option-list {position: absolute; top: 53px; left: 0; width: 100%; background-color: #fff; list-style-type: none; padding: 0; border-radius: 0px; overflow: hidden; max-height: 0; transition: .3s all;}
.selectBox.active .option-list {max-height: 500px;}
.selectBox .option-item {padding: 12px 25px 0; border-bottom: none; font-size: 15px; color: #333; transition: .1s;}
.selectBox .option-item:first-child {margin-top: 10px;}
.selectBox .option-item:last-child {border-bottom: 0; margin-bottom: 10px;}
.selectBox .option-item:hover {background-color: #f8f9fa;}
.selectBox .option-list::-webkit-scrollbar {width: 6px;}
.selectBox .option-list::-webkit-scrollbar-track {background-color: transparent;}
.selectBox .option-list::-webkit-scrollbar-thumb {background-color: #303030; border-radius: 45px;}
.selectBox .option-list::-webkit-scrollbar-thumb:hover {background-color: #303030;}
.selectBox .option-item a {display: block; width: 100%; padding-bottom: 12px;}

.content-area {padding: 130px 0; max-width: 1200px; margin: 0 auto; box-sizing: border-box;}
.title-txt {text-align: center;;}
.page-title {color: #2d2d2d; font-size: 45px; margin-bottom: 30px; font-weight: 800;}
.sub-desc {color: #7a7a7a; font-size: 16px; margin-bottom: 25px; line-height: 145%;}
.title-txt .line {width: 2px; height: 35px; background-color: #484848; margin: 0 auto 35px;}

.intro-wrap .img-wrap {position: relative; height: 340px; text-align: center; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 1}
.intro-wrap .img-wrap p {position: absolute; width: 100%; top: 30%; left: 50%; font-size: 26px; font-weight: 500; color: #fff; transform: translateX(-50%);}
.intro-wrap .intro-txt {width: 80%; background-color: #fff; padding: 80px; box-sizing: border-box; margin: -125px auto 0; z-index: 3; position: relative;}
.intro-wrap .intro-txt p {width: 90%; color: #666; line-height: 175%; font-size: 15px; word-break: keep-all;}
.intro-wrap .intro-txt .intro-top {color: #333; line-height: 185%; font-size: 17px; margin-bottom: 35px;}
.intro-wrap .intro-txt .ceo {margin-top: 60px; font-size: 20px; font-weight: 500; color: #000; text-align: right;}
.intro-wrap .intro-txt .ceo span {display: inline-block; font-size: 35px; margin-left: 15px;}
.organ-img img {width: 100%;}

.map-grid {display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 40px;}
.map-grid span {display: inline-flex; justify-content: center; align-items: center; width: 100%; height: 60px; text-align: center; font-size: 18px; border: 1px solid #d9d9d9; cursor: pointer;}
.map-grid span.active {background-color: #e86f25; color: #fff;}
.map {height: 440px; width: 100%; margin-bottom: 95px;}
.map-wrap .con-sec-title {margin-bottom: 35px;}

/* 사업 영역 */
.com-wrap {margin-top: 75px;}
.business-list .list-item:not(:last-child) {padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid #ccc;}
.business-list .list-item {display: flex; gap: 60px; justify-content: space-between; align-items: center; color: #333;}
.business-list .list-item.circle {gap: 35px; margin-top: 100px; align-items: flex-start;}
.business-list .list-item .item-txt {width: calc(100% - 360px);}
.business-list .list-item.circle .item-txt {width: calc(100% - 170px);}
.business-list .list-item .item-img.small + .item-txt {width: calc(100% - 210px);}
.business-list .list-item .item-txt .title {font-size: 20px; font-weight: 600; margin-bottom: 30px;}
.business-list .list-item .item-txt .desc {font-size: 14px; line-height: 145%; word-break: keep-all;}
.business-list .list-item .item-txt .desc .indent {padding-left: 20px;}
.business-list .list-item .item-txt .desc img {margin-top: 25px; display: block; width: 100%;}
.business-list .list-item .item-img {width: 300px; height: 180px; border-radius: 10px; border: 5px solid #ececec;}
.business-list .list-item .item-img.small {width: 150px}
.business-list .list-item.circle .item-img {width: 135px; height: 135px; display: inline-flex; align-items: center; justify-content: center; border: none;}
.business-list .list-item.circle .item-img img {width: 95%;}
.business-list .list-item .item-img div {height: 100%; border-radius: 10px; background-repeat: no-repeat; background-size: cover; background-position: center;}

.txt-wrap {line-height: 180%; font-size: 15px; color: #333; word-break: keep-all; width: 100%;}
.txt-wrap img {margin: 40px auto; width: 100%; text-align: center; display: block;}
.txt-wrap img.general {width: 80%;}

/* 고객사 */
.partner-con .grid-wrap {column-gap: 35px; grid-template-columns: repeat(5, 1fr);}
.partner-con .grid-wrap li {margin-bottom: 50px;}
.partner-con .grid-wrap li .item-img {width: 100%; height: 50px;}
.partner-con img {width: 100%;}

/* 약관 */
/* .terms {padding-top: 50px;} */
.terms-wrap {margin-top: 40px;}
.terms-wrap .pre-tab-menu {border-bottom: none;}
.terms-wrap .pre-tab-menu ul {display: flex; justify-content: flex-start; gap: 0; margin-bottom: 40px;}
.terms-wrap .pre-tab-menu ul li {width: 50%; border: 1px solid #efefef; background-color: #f4f4f5; border-radius: 3px; height: 45px; line-height: 43px; text-align: center; cursor: pointer;}
.terms-wrap .pre-tab-menu ul li.active {background-color: #fff; border: 2px solid #e86f25; color: #e86f25; font-weight: 500; text-align: center;}
.terms-wrap .tab-con {margin-top: 30px; margin-bottom: 50px;}
.terms-box {background-color: #efefef; padding: 25px 30px; box-sizing: border-box; margin-bottom: 30px; border-radius: 6px;}
.terms-box:last-child {margin-bottom: 0;}
.terms-box .terms-title {font-weight: 600; margin-bottom: 20px; font-size: 22px;}
.terms-box .terms-con {height: 650px; overflow-y: scroll; background-color: #fff; padding: 20px; font-size: 15px; line-height: 150%; box-sizing: border-box; border-radius: 4px;}

.textarea-preline { white-space: pre-line; }

/* 팝업레이어 */
#front-pop {z-index:9999;position:relative;margin:0 auto;width:100%;height:0}
#front-pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.front-pops {position:absolute; /*border:1px solid #ddd; */background:#fff}
.front-pops-con {background:#000}
.front-pops-footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.front-pops-footer button {margin:0 5px;padding:5px 10px;border:0;background:#393939;color:#fff}
.sound-only {display:inline-block;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;width:1px !important;height:1px !important;font-size:0 !important;line-height:0 !important;overflow:hidden}

@media all and (max-width: 1024px) {
    /* 메인 */
    .section-wrap {padding: 0 20px;}
    .section1 {margin-top: -70px;}
    .section1 .main-swiper .text-box {left: 20px}
    .section1 .main-swiper .swiper-btn-wrap {max-width: 100%; left: calc(50% + 20px);}
    .section3 .quick-list {width: calc(100% - 40px);}

    /******************************************** sub 공통 ********************************************/
    .sub-banner {height: 400px; margin-top: -85px;}
    .sub-banner-short {height: 110px; margin-top: -85px;}
    .sub-banner-tit {font-size: 30px; top: 50%; width: 100%;}
    .breadcrumb {height: 45px;}
    .breadcrumb > div > a {width: 45px;}
    .breadcrumb > div > a > img {width: 45%;}
    .breadcrumb .dep {width: calc(50% - 20px) ;font-size: 14px;}
    .selectBox {width: 100%; background: url('/front/images/ico_plus.png') calc(100% - 15px) center no-repeat; background-size: 12px;}
    .selectBox::after {content: ''; display: none; position: absolute; width: 2px; height: 100%; top: 0; right: 35px;}
    .selectBox .select-label {padding-left: 15px; font-size: 14px;}
    .selectBox .option-list {top: 45px;}
    .selectBox.active .option-list {max-height: 450px;}
    .selectBox .option-item {padding: 12px 18px 0; border-bottom: none; font-size: 14px;}
    .selectBox .option-item:first-child {margin-top: 8px;}
    .selectBox .option-item:last-child {margin-bottom: 8px;}
    .selectBox .option-list::-webkit-scrollbar {width: 5px;}
    .selectBox .option-item a {display: block; width: 100%; padding-bottom: 12px;}

    .content-area {padding: 100px 20px;}
    .page-title {font-size: 38px; margin-bottom: 28px;}
    .sub-desc {margin-bottom: 22px;}

    /* 사업 영역 */
    .business-list .list-item {display: flex; gap: 35px;}
    .business-list .list-item.circle {gap: 20px;}

}

@media all and (max-width: 768px) {
    /* 공통 */    
    .tbl td {padding-left: 25px;}

    .con-sec:not(:last-child) {margin-bottom: 80px;}
    .con-sec-title {font-size: 20px; margin-bottom: 40px; padding-left: 12px;}
    .con-sec-title::before {width: 4px; top: 11px;}

    .tab-menu ul {grid-template-columns: repeat(3, 1fr); margin-bottom: 80px;}
    .tab-menu2 ul {grid-template-columns: repeat(2, 1fr); margin-bottom: 80px;}
    .tab-menu3 ul {grid-template-columns: repeat(3, 1fr); margin-bottom: 80px;}

    .section1 {height: 720px; margin-top: -50px;}
    .section1 .main-swiper {height: 720px;}
    .section1 .main-swiper .text-box {top: 48%;}
    .section1 .main-swiper .text-box .title {margin-bottom: 20px;}
    .section1 .main-swiper .text-box .title span {font-size: 22px; margin-bottom: 15px;}
    .section1 .main-swiper .text-box .title strong {font-size: 48px; font-weight: 700;}
    .section1 .main-swiper .text-box .sub-title {font-size: 14px; line-height: 140%;}
    .swiper-button-prev, .swiper-rtl .swiper-button-next {left: 0; top: 65%; width: 45px; height: 45px;}
    .swiper-button-next, .swiper-rtl .swiper-button-prev {left: 80px; top: 65%; width: 45px; height: 45px;}
    .main-swiper-button-prev img, .main-swiper-button-next img {height: 100%;}

    .section2 .circle .circle1 {width: 350px; height: 350px; border: 30px solid #fafaf9; top: 0px; left: -200px;}
    .section2 .circle .circle2 {width: 300px; height: 300px; top: 400px; right: -120px;}
    .section2 .company-wrap {column-gap: 8px; row-gap: 12px; margin-bottom: 40px;}
    .section2 .company-wrap .company-item {min-height: 250px;}
    .section2 .company-wrap .company-item .company-text-wrap {bottom: 30px; left: 27px; width: 100%;}
    .section2 .company-wrap .company-item .company-text-wrap.title {top: 55%;}
    .section2 .company-wrap .company-item .company-text-wrap .sec-title {font-size: 26px; margin-bottom: 15px;}
    .section2 .company-wrap .company-item .company-text-wrap p {font-size: 13px;}
    .section2 .company-wrap .company-item .company-text-wrap .company-title .eng-title {font-size: 12px; margin-bottom: 8px;}
    .section2 .company-wrap .company-item .company-text-wrap .company-title .kor-title {font-size: 22px; margin-bottom: 15px;}
    .section2 .company-wrap .company-item .company-text-wrap .link-more {font-size: 12px;}
    .section2 .service-wrap {gap: 25px;}
    .section2 .service-wrap .sec-title {font-size: 22px; margin-bottom: 25px;}
    .section2 .service-wrap > div .service-list li {padding-bottom: 22px; margin-bottom: 18px; height: 100px;}
    .section2 .service-wrap > div .service-list .date .day {margin-bottom: 8px;}
    .section2 .service-wrap > div .service-list .service-text {width: calc(100% - 85px); margin-right: 15px;}
    .section2 .service-wrap > div .service-list .service-text .service-title {margin-bottom: 8px; line-height: 135%;}
    .section2 .service-wrap > div .service-list .service-text .service-desc {font-size: 13px;}

    .section3 .quick-list li img {height: 45px; margin-bottom: 12px;}
    .section3 .quick-list li .quick-title {margin-bottom: 12px; font-size: 22px;}
    .section3 .quick-list li .quick-desc {margin-bottom: 30px;}

    /******************************************** sub 공통 ********************************************/
    .page-title {font-size: 38px; margin-bottom: 26px;}
    .sub-desc {font-size: 15px;}
    .title-txt .line {width: 2px; height: 32px; margin: 0 auto 32px;}

    .intro-wrap .img-wrap {height: 280px;}
    .intro-wrap .img-wrap p {top: 35%; left: 50%; font-size: 22px;}
    .intro-wrap .intro-txt {width: 90%; padding: 45px 50px; margin: -100px auto 0;}
    .intro-wrap .intro-txt p {width: 95%;}
    .intro-wrap .intro-txt .intro-top {margin-bottom: 30px;}
    .intro-wrap .intro-txt .ceo {margin-top: 50px;}
    .intro-wrap .intro-txt .ceo span {font-size: 32px;}

    .map-grid {grid-template-columns: repeat(3, 1fr); margin-bottom: 30px;}
    .map {height: 350px; width: 100%; margin-bottom: 75px;}
    .map-wrap .con-sec-title {margin-bottom: 25px;}

    /* 사업 영역 */
    .com-wrap {margin-top: 50px;}
    .business-list .list-item:not(:last-child) {padding-bottom: 22px; margin-bottom: 22px;}
    .business-list .list-item {gap: 20px;}
    .business-list .list-item.circle {gap: 20px; margin-top: 80px;}
    .business-list .list-item .item-txt {width: 70%;}
    .business-list .list-item.circle .item-txt {width: calc(100% - 130px);}
    .business-list .list-item .item-img.small + .item-txt {width: calc(100% - 120px);}
    .business-list .list-item .item-txt .title {margin-bottom: 12px; font-size: 18px;}
    .business-list .list-item .item-txt .desc {font-size: 13px;}
    .business-list .list-item .item-txt.no-img {width: 100%;}
    .business-list .list-item .item-txt .desc .indent {padding-left: 12px;}
    .business-list .list-item .item-txt .desc img {margin-top: 20px; width: 90%;}
    .business-list .list-item .item-img {width: 30%; height: 140px;}
    .business-list .list-item .item-img.small {width: 100px;}
    .business-list .list-item.circle .item-img {width: 110px; height: 110px;}
    .business-list .list-item.circle .item-img img {width: 95%;}
    .business-list .list-item .item-img div {background-size: contain;}

    .txt-wrap img.general {width: 90%;}
    .txt-wrap img {margin: 30px auto;}

    /* 팝업레이어 */
    #front-pop {position:absolute; top: 100px; text-align: center; height: auto;}
    .front-pops {position: static; display: inline-block; width: 90% !important; height: auto !important;}
    .front-pops-con img {width: 100% !important;}
}

@media all and (max-width: 568px) {
    /* 공통 */
    .tbl {font-size: 14px;}
    .tbl th, .tbl td {height: 45px; line-height: 145%; padding: 5px 0; word-break: keep-all;}
    .tbl td {padding-left: 15px;}

    .con-sec:not(:last-child) {margin-bottom: 40px;}
    .con-sec-title {font-size: 16px; margin-bottom: 22px; padding-left: 10px; line-height: 140%; word-break: keep-all;}
    .con-sec-title::before {width: 3px; top: 58%;}
    .con-sec.gray {padding-top: 20px;}
    .con-sec .bg-gray {position: absolute; top: 0px; left: -50vh; width: 990vw; height: calc(100% + 80px); background-color: #f9f9f9; z-index: -1;}

    .tab-menu ul {display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 35px;}
    .tab-menu ul li {height: 40px; font-size: 14px;}
    .tab-menu2 ul {display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 35px;}
    .tab-menu2 ul li {height: 40px; font-size: 14px;}
    .tab-menu3 ul {display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 35px;}
    .tab-menu3 ul li {height: 40px; font-size: 14px;}

    /* 메인 */
    .section1 {height: 100vh; margin-top: -50px;}
    .section1 .main-swiper {height: 100vh;}
    .section1 .main-swiper .text-box .title {margin-bottom: 15px;}
    .section1 .main-swiper .text-box .title span {font-size: 18px; margin-bottom: 12px; display: block;}
    .section1 .main-swiper .text-box .title strong {font-size: 42px;}
    .section1 .main-swiper .text-box .sub-title {font-size: 13px; line-height: 135%;}
    .section1 .main-swiper .swiper-btn-wrap {left: calc(50% + 20px);}
    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 3px;}
    .main-swiper-pagination .swiper-pagination-bullet {width: 8px; height: 8px;}
    .swiper-button-prev, .swiper-rtl .swiper-button-next {left: 0; top: 62%; width: 40px; height: 40px; cursor: pointer;}
    .swiper-button-next, .swiper-rtl .swiper-button-prev {right: auto; left: 56px; top: 62%; width: 40px; height: 40px; cursor: pointer;}
    
    .section2 {padding: 0 0 50px;}
    .section2 .circle {display: none;}
    .section2 .company-wrap {grid-template-columns: repeat(1, 1fr); margin-bottom: 35px;}
    .section2 .company-wrap .company-item {min-height: 200px;}
    .section2 .company-wrap .company-item:nth-child(1) {min-height: 180px;}
    .section2 .company-wrap .company-item .company-img-wrap img {width: 100%;}
    .section2 .company-wrap .company-item .company-text-wrap {bottom: 30px; left: 27px;}
    .section2 .company-wrap .company-item .company-text-wrap.title {width: 100%; top: 60%; bottom: 0;}
    .section2 .company-wrap .company-item .company-text-wrap .sec-title {font-size: 28px;}
    .section2 .company-wrap .company-item .company-text-wrap p {line-height: 130%; font-size: 14px;}
    .section2 .company-wrap .company-item .company-text-wrap .company-title .eng-title {margin-bottom: 6px;}
    .section2 .company-wrap .company-item .company-text-wrap .company-title .kor-title {font-size: 20px;}
    .section2 .company-wrap .company-item .company-text-wrap .link-more {font-size: 12px;}
    .section2 .service-wrap {display: block;}
    .section2 .service-wrap > div:nth-child(1) {margin-bottom: 40px;}
    .section2 .service-wrap .sec-title {font-size: 24px; margin-bottom: 30px;}
    .section2 .service-wrap > div .service-list li {padding-bottom: 15px; margin-bottom: 13px; height: auto;}
    .section2 .service-wrap > div .service-list .date {margin-right: 15px; font-size: 12px;}
    .section2 .service-wrap > div .service-list .service-text {width: calc(100% - 80px); margin-right: 10px;}
    .section2 .service-wrap > div .service-list .service-text .service-title {margin-bottom: 6px; line-height: 130%;}
    .section2 .service-wrap > div .service-list .service-text .service-desc {font-size: 12px;}
    .section2 .service-wrap > div .service-list .service-more img {height: 25px;}

    .section3 {height: max-content; padding: 50px 0 60px}
    .section3 .quick-list {position: relative; top: 0; left: 0; transform: none; grid-template-columns: repeat(1, 1fr); width: 100%;}
    .section3 .quick-list li {margin-bottom: 50px;}
    .section3 .quick-list li:last-child {margin-bottom: 0;}
    .section3 .quick-list li img {height: 45px; margin-bottom: 12px;}
    .section3 .quick-list li .quick-title {margin-bottom: 10px; font-size: 20px;}
    .section3 .quick-list li .quick-desc {margin-bottom: 20px;}
    .section3 .quick-list li .quick-more::after {position: absolute; display: block; content: ''; width: 100%; height: 1px; background-color: #ccc; bottom: -10px; left: 50%; transform: translateX(-50%); transition: all linear .2s;}

    /******************************************** sub 공통 ********************************************/
    .sub-banner {height: 350px; margin-top: -50px;}
    .sub-banner-short {height: 75px; margin-top: -50px;}
    .sub-banner-tit {font-size: 24px; top: 48%; width: 100%;}
    .breadcrumb {height: 40px;}
    .breadcrumb > div > a {width: 40px;}
    .selectBox {background: url('/front/images/ico_plus.png') calc(100% - 15px) center no-repeat; background-size: 10px;}
    .selectBox::after {content: ''; display: none; position: absolute; width: 2px; height: 100%; top: 0; right: 35px; background-color: #ffc700;}
    .selectBox .select-label {padding-left: 12px; font-size: 13px;}
    .selectBox .option-list {top: 39px;}
    .selectBox.active .option-list {max-height: 400px;}
    .selectBox .option-item {padding: 10px 15px 0; font-size: 13px;}
    .selectBox .option-item:first-child {margin-top: 5px;}
    .selectBox .option-item:last-child {margin-bottom: 5px;}
    .selectBox .option-list::-webkit-scrollbar {width: 4px;}
    .selectBox .option-item a {padding-bottom: 10px;}
    .content-area {padding: 30px 15px 80px;}

    .page-title {font-size: 22px; margin-bottom: 15px;}
    .sub-desc {font-size: 13px; margin-bottom: 18px;}
    .title-txt .line {height: 22px; margin: 0 auto 25px;}

    .intro-wrap .img-wrap {height: 150px;}
    .intro-wrap .img-wrap p {top: 35%; left: 50%; font-size: 16px; width: 70%; line-height: 145%;}
    .intro-wrap .intro-txt {width: 100%; padding: 0; margin: 15px auto 0;}
    .intro-wrap .intro-txt p {width: 95%; font-size: 13px; line-height: 150%;}
    .intro-wrap .intro-txt .intro-top {margin-bottom: 20px; font-size: 14px; line-height: 145%;}
    .intro-wrap .intro-txt .ceo {margin-top: 30px; font-size: 16px;}
    .intro-wrap .intro-txt .ceo span {font-size: 20px; margin-left: 8px;}

    .map-grid {grid-template-columns: repeat(2, 1fr); margin-bottom: 20px;}
    .map-grid span {font-size: 14px; height: 40px; line-height: 40px;}
    .map {height: 200px; margin-bottom: 40px;}
    .map-wrap .con-sec-title {margin-bottom: 15px;}

    /* 사업 영역 */
    .com-wrap {margin-top: 35px;}
    .business-list .list-item:not(:last-child) {padding-bottom: 18px; margin-bottom: 18px;}
    .business-list .list-item {gap: 12px; flex-direction: column-reverse;}
    .business-list.reverse .list-item {flex-direction: column;}
    .business-list .list-item.circle {gap: 12px; margin-top: 20px; flex-direction: column;}
    .business-list .list-item .item-txt {width: 100%;}
    .business-list .list-item.circle .item-txt {width: 100%;}
    .business-list .list-item .item-img.small + .item-txt {width: 100%;}
    .business-list .list-item .item-txt .title {margin-bottom: 10px; font-size: 15px; word-break: keep-all; line-height: 145%;}
    .business-list .list-item .item-txt .desc {font-size: 12px;}
    .business-list .list-item .item-txt.no-img {width: 100%;}
    .business-list .list-item .item-txt .desc .indent {padding-left: 12px;}
    .business-list .list-item .item-txt .desc img {margin-top: 20px; width: 90%;}
    .business-list .list-item .item-img {width: 100%; height: 140px;}
    .business-list .list-item .item-img.small {width: 100%;}
    .business-list .list-item.circle .item-img {width: 110px; height: 110px;}
    .business-list .list-item.circle .item-img img {width: 100%;}
    .business-list .list-item .item-img div {background-size: contain;}

    /* 고객사 */
    .partner-con .grid-wrap {column-gap: 20px; grid-template-columns: repeat(2, 1fr);}
    .partner-con .grid-wrap li {margin-bottom: 30px;}
    .partner-con .grid-wrap li .item-img {width: 100%; height: 50px;}

    .txt-wrap {font-size: 14px; line-height: 160%;}
    .txt-wrap img.general {width: 100%;}
    .txt-wrap img {margin: 25px auto;}

    .short_con {margin-top: 40px;}
}

@media all and (max-width: 320px) {
    .section-wrap {padding: 0 15px;}
    .section1 .main-swiper .text-box {left: 15px;}
    .section1 .main-swiper .text-box .title {margin-bottom: 15px;}
    .section1 .main-swiper .text-box .title span {font-size: 16px;}
    .section1 .main-swiper .text-box .title strong {font-size: 35px;}
    .section1 .main-swiper .text-box .sub-title {font-size: 12px;}
    .section1 .main-swiper .swiper-btn-wrap {left: calc(50% + 15px);}
    .main-swiper-pagination .swiper-pagination-bullet {width: 6px; height: 6px;}
    .swiper-button-prev, .swiper-rtl .swiper-button-next {top: 65%; width: 30px; height: 30px;}
    .swiper-button-next, .swiper-rtl .swiper-button-prev {left: 48px; top: 65%; width: 30px; height: 30px;}
    
    .section2 .company-wrap .company-item .company-text-wrap .sec-title {font-size: 26px;}

    .short_con {margin-top: 40px;}
}

body{-ms-overflow-style: none;}
::-webkit-scrollbar {display: none;}