@charset "utf-8";
/* CEO 인사말 */
.greetingWrap {display: flex; justify-content: space-between; gap: 30px;}
.greetingWrap .textArea {padding-top: 20px; word-break: keep-all;}
.greetingWrap .textArea .tit {font-family: var(--fontEB); color: #000000; font-size: 32px; line-height: 1.3; margin-bottom: 40px;}
.greetingWrap .textArea .tit span {color: #0068B7;}
.greetingWrap .textArea .txt {font-family: var(--fontM); color: #000000; font-size: 18px; line-height: 1.5; margin-bottom: 40px;}
.greetingWrap .textArea .txt span {font-family: var(--fontEB);}
.greetingWrap .textArea .name {font-family: var(--fontEB); opacity: 1; font-size: 24px;}
.greetingWrap .textArea .name span {font-family: var(--fontSB); color: #000000; opacity: 0.3; font-size: 18px;}
.greetingWrap .imgArea {width: 704px;}
.greetingWrap .imgArea img {display: block; width: 100%; object-fit: cover;}

/* JK 건설 연혁 */
.historyBg {margin-bottom: 80px;}
.historyBg img {display: block; width: 100%; object-fit: cover;}
.historyList {display: flex; gap: 60px;}
.historyList .imgList {display: flex; flex-direction: column; justify-content: space-between;}
.historyList .imgList li img {box-shadow: 10px 10px 40px rgba(0,0,0,0.13);}
.historyList .yearList {position: relative;}
.historyList .yearList::before {content: ''; position: absolute; top: 15px; left: 0; width: 1px; height: 95%; background: #F0F0F0;}
.historyList .yearList::after {content: ''; position: absolute; top: 15px; left: 0; width: 1px; height: 0; background: #0068B7; transition: 10s;}
.historyList .yearList.actOn::after {height: 100%;}
.historyList .yearList>li {padding-left: 65px; box-sizing: border-box;}
.historyList .yearList>li:not(:last-of-type) {padding-bottom: 100px;}
.historyList .yearList>li .year {position: relative; font-family: var(--fontB2); font-size: 32px; color: #000000; margin-bottom: 20px;}
.historyList .yearList>li .year::before {content: ''; position: absolute; left: -75px; top: 50%; transform: translateY(-50%); width: 21px; height: 21px; background: #0068B7; opacity: 0.1; border-radius: 50%;}
.historyList .yearList>li .year::after {content: ''; position: absolute; left: -68px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; background: #0068B7; border-radius: 50%;}
.historyList .yearList>li .list li {font-family: var(--fontM); font-size: 18px; color: #000000;}
.historyList .yearList>li .list li:not(:last-of-type) {margin-bottom: 15px;}
.historyList .yearList>li .list li.type2 {font-family: var(--fontB); color: #0068B7;}

/* 조직도 */
.chartWrap img {display: block; width: 100%; max-width: 1376px; margin: 0 auto;}

/* 사업영역 */
.businessWrap {display: flex; gap: 50px; margin-bottom: 120px;}
.businessWrap .slideArea {width: 850px; min-width: 850px;}
.businessWrap .slideArea .swiper-slide {height: 500px;}
.businessWrap .slideArea img {display: block; width: 100%; height: 100%; object-fit: cover;}
.businessWrap .textArea {padding-top: 20px;}
.businessWrap .textArea .title .txt {font-size: 18px; font-family: var(--fontB2); color: #0068B7; margin-bottom: 15px; letter-spacing: 3px;}
.businessWrap .textArea .title .tit {font-size: 45px; font-family: var(--fontB); color: #000000; margin-bottom: 25px;}
.businessWrap .textArea .list {display: flex; gap: 4px; margin-bottom: 30px;}
.businessWrap .textArea .list li {padding: 6px 10px; box-sizing: border-box; background: #F3F8FC; border: 1px solid rgba(0,104,183,0.1); color: rgba(0,104,183,0.4); font-size: 16px; font-weight: var(--fontSB);}
.businessWrap .textArea .text {font-family: var(--fontM); font-size: 18px; color: #000000; line-height: 1.5; margin-bottom: 40px; word-break: keep-all;}
.businessWrap .textArea .text span {font-family: var(--fontEB);}
.businessWrap .textArea .link {display: inline-block; font-size: 16px; font-family: var(--fontB); color: #0068B7; text-align: center; width: 200px; padding: 20px 0; border: 1px solid #0068B7; box-sizing: border-box; transition: 0.3s;}
.businessWrap .textArea .link:hover {background: #0068B7; color: #fff;}
.licenseWrap {position: relative; padding-top: 120px;}
.licenseWrap::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2000px; height: calc(100% + 210px); background: #F0F5FB; opacity: 0.8; z-index: -1;}
.licenseWrap>.title {text-align: center; margin-bottom: 60px;}
.licenseWrap>.title .txt {font-size: 18px; font-family: var(--fontB2); color: #0068B7; margin-bottom: 15px;}
.licenseWrap .title .tit {font-size: 48px; font-family: var(--fontB); color: #000000;}
.licenseWrap .license {padding: 0 90px; box-sizing: border-box;}
.licenseWrap .license .swiper-wrapper {gap: 50px;}
.licenseWrap .license .swiper-slide {width: calc(33.333% - 33.333px) !important;}
.licenseWrap .license .swiper-slide .title {text-align: center; padding: 23px 0; color: var(--white); font-family: var(--fontEB); font-size: 20px; background: #0068B7;}
.licenseWrap .license .swiper-slide img {display: block; width: 100%; object-fit: cover;}

/* 시공사례 */
.caseYearWrap {position: relative; padding: 25px 135px 25px 30px; box-sizing: border-box; border: 1px solid #F0F0F0; margin-bottom: 30px;}
.caseYearWrap .caseYearList {width: 100%; overflow: hidden;}
.caseYearWrap .caseYearList .list a {font-size: 18px; font-family: var(--fontM); color: #000000; opacity: 0.3;}
.caseYearWrap .caseYearList .list a.active {font-family: var(--fontEB); color: #0068B7; opacity: 1;}
.caseYearWrap .swiper-button-next {width: 35px; height: 35px; background: url('../images/content/year_slide_arr.png') no-repeat; background-size: 100%; color: transparent; margin-top: 0; top: 50%; transform: translateY(-50%); right: -15px;}
.caseYearWrap .swiper-button-next.swiper-button-disabled {opacity: 1;}
.caseBoardList {display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 60px;}
.caseBoardList>li {width: calc(33.333% - 13.333px); position: relative; min-height: 600px; overflow: hidden; border: 1px solid #F0F0F0;}
.caseBoardList>li.empty_list {border: 0; min-height: auto}
.caseBoardList>li a {display: block; height: 100%;}
.caseBoardList>li img {display: block; width: 100%; height: 100%; object-fit: cover;}
.caseBoardList>li .textArea {position: absolute; bottom: -12%; left: 0; width: 100%; background: var(--white); padding: 30px; box-sizing: border-box; border-top: 1px solid #F0F0F0; transition: 0.3s;}
.caseBoardList>li .textArea::before {content: ''; position: absolute; bottom: 15px; right: 8px; background: url('../images/main/s4_text_bg.png') no-repeat; background-size: 100%; width: 142px; height: 104px; opacity: 0; transition: 0.3s;}
.caseBoardList>li .textArea .txt {font-size: 16px; font-family: var(--fontB); color: #0068B7; margin-bottom: 8px; transition: 0.3s;}
.caseBoardList>li .textArea .tit {font-size: 24px; font-family: var(--fontEB); color: var(--subC); margin-bottom: 20px; transition: 0.3s;}
.caseBoardList>li .textArea .list {opacity: 0; transition: 0.3s;}
.caseBoardList>li .textArea .list li {display: flex; gap: 6px; color: #888888; font-size: 16px; font-family: var(--fontR);}
.caseBoardList>li .textArea .list li:not(:last-of-type) {margin-bottom: 6px;}
.caseBoardList>li:hover .textArea {bottom: 0}
.caseBoardList>li:hover .textArea .tit {}
.caseBoardList>li:hover .textArea::before {opacity: 1;}
.caseBoardList>li:hover .textArea .list {opacity: 1;}
.caseBoardList>li .btnArea {position: absolute; z-index: 1; top: 3px; right: 3px; display: flex; gap: 5px;}
.caseBoardList>li .btnArea > a {background: #426db6; padding: 4px 6px; font-size: 0.9rem; color: #fff;}
.casePopup {position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); display: none; gap: 100px; padding: 65px; box-sizing: border-box; width: 100%; max-width: 1480px; max-height: 90%; overflow-y: auto; background: var(--white); z-index: 30;}
.casePopup.on {display: flex;}
.casePopup::before {content: ''; position: absolute; bottom: 25px; right: 32px; background: url('../images/content/case_bg.png') no-repeat; background-size: 100%; width: 406px; height: 297px;}
.casePopup .slideArea {display: flex; gap: 10px;}
.casePopup .slideArea .big {width: 440px;}
.casePopup .slideArea .big .swiper-wrapper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.casePopup .slideArea .sm .swiper-wrapper {flex-direction: column; gap: 10px;}
.casePopup .slideArea .sm .swiper-wrapper .swiper-slide {width: 160px !important; height: 160px !important;}
.casePopup .slideArea .sm .swiper-wrapper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.casePopup .textArea {padding-top: 50px; width: 100%;}
.casePopup .textArea .title .txt {font-size: 20px; font-family: var(--fontB); color: #0068B7; margin-bottom: 15px;}
.casePopup .textArea .title .tit {font-size: 36px; font-family: var(--fontEB); color: var(--subC); margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #F0F0F0; box-sizing: border-box;}
.casePopup .textArea .list li {display: flex; gap: 12px; font-size: 18px; color: #000000;}
.casePopup .textArea .list li:not(:last-of-type) {margin-bottom: 15px;}
.casePopup .textArea .list li span {font-family: var(--fontB);}
.casePopup .textArea .list li p {font-family: var(--fontM);}
.casePopup .popClose {position: absolute; top: 55px; right: 55px; font-size: 0; background: url('../images/content/case_close.png') no-repeat; background-size: 100%; width: 67px; height: 67px; z-index: 1;}
.casePopup .popClose.mob {background: url('../images/content/case_close_mob.png') no-repeat; background-size: 100%; width: 37px; height: 37px; top: 25px; right: 25px;}

/* 시공공법 */
.tabContent {}
.tabContBox {text-align: center; display: none;}
.tabContBox.act {display: block;}
.tabContBox img {width: 100%; max-width: 860px;}
.tabContent.proc .tabContBox img {width: 100%; max-width: 650px;}

/* 페이징버튼 */
.pagenationWrap {display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 80px;}
.pagenationWrap .list {display: flex; align-items: center; gap: 30px;}
.pagenationWrap .list li a {display: block; font-family: var(--fontM); font-size: 18px; color: #000000; opacity: 0.5; text-align: center; line-height: 39px;}
.pagenationWrap .list li.active a {width: 39px; height: 39px; color: #fff; background: #0068B7; border-radius: 50%; opacity: 1;}


/* 반응형 */
@media screen and (max-width: 1480px) {
    /* CEO 인사말 */
    .greetingWrap .imgArea {width: 50%;}

    /* 사업영역 */
    .businessWrap .slideArea {width: 55%; min-width: 55%}
    .businessWrap .slideArea .swiper-slide {height: auto;}

    /* 시공사례 */
    .casePopup {width: 90%; gap: 60px;}
}

@media screen and (max-width: 1280px) {
    /* JK 건설 연혁 */
    .historyList .imgList {width: 45%;}
    .historyList .imgList img {display: block; width: 100%;}

    /* 사업영역 */
    .businessWrap .slideArea {width: 50%;}
    .licenseWrap .license {padding: 0;}

    /* 시공사례 */
    .caseYearWrap {padding-right: 75px;}
    .casePopup {gap: 40px;}
    .casePopup::before {width: 340px; height: 250px;}
    .casePopup .slideArea .big {width: 320px;}
    .casePopup .slideArea .sm .swiper-wrapper .swiper-slide {width: 140px !important; height: 140px !important;}
}

@media screen and (max-width: 1025px) {
    /* CEO 인사말 */
    .greetingWrap {flex-wrap: wrap; flex-direction: column-reverse; align-items: center;}
    .greetingWrap .textArea {text-align: center;}

    /* 사업영역 */
    .businessWrap {gap: 30px; margin-bottom: 100px;}
    .licenseWrap .license .swiper-wrapper {gap: 30px;}
    .licenseWrap .license .swiper-slide {width: calc(33.333% - 20px) !important;}

    /* 시공사례 */
    .caseBoardList {row-gap: 40px;}
    .caseBoardList>li {width: calc(50% - 13.333px);}
    .casePopup {flex-wrap: wrap; padding: 40px;}
    .casePopup::before {display: none;}
    .casePopup .slideArea {width: 100%; flex-wrap: wrap;}
    .casePopup .slideArea .big {width: 100%;}
    .casePopup .slideArea .sm .swiper-wrapper {flex-direction: row;}
    .casePopup .slideArea .sm .swiper-wrapper .swiper-slide {width: calc(25% - 7.5px) !important; height: auto !important;}
    .casePopup .textArea {padding-top: 0;}
    .casePopup .popClose {top: 40px; right: 40px;}
}

@media screen and (max-width: 768px) {
    /* CEO 인사말 */
    .greetingWrap .textArea .tit {font-size: 28px;}
    .greetingWrap .textArea .txt {font-size: 16px;}
    .greetingWrap .textArea .name {font-size: 20px;}
    .greetingWrap .textArea .name span {font-size: 16px;}

    /* JK 건설 연혁 */
    .historyList .imgList {display: none;}
    .historyBg {margin-bottom: 40px; height: 180px;}
    .historyBg img {height: 100%;}
    .historyList .yearList::before {left: 10px; height: 94%;}
    .historyList .yearList::after {display: none;}
    .historyList .yearList>li {padding-left: 36px;}
    .historyList .yearList>li:not(:last-of-type) {padding-bottom: 70px;}
    .historyList .yearList>li .year {font-size: 28px;}
    .historyList .yearList>li .year::before {left: -36px;}
    .historyList .yearList>li .year::after {left: -29px;}
    .historyList .yearList>li .list li {font-size: 16px;}

    /* 조직도 */
    .chartWrap img {max-width: 286px; position: relative; left: -10px;}

    /* 사업영역 */
    .businessWrap {flex-wrap: wrap; justify-content: center;}
    .businessWrap .slideArea {width: 100%; min-width: auto}
    .businessWrap .slideArea .big1,.businessWrap .slideArea .big2 {margin-bottom: 10px;}
    .businessWrap .textArea {text-align: center;}
    .businessWrap .textArea .title .txt {font-size: 15px; margin-bottom: 10px;}
    .businessWrap .textArea .title .tit {font-size: 28px; margin-bottom: 15px;}
    .businessWrap .textArea .list {justify-content: center; margin-bottom: 20px;}
    .businessWrap .textArea .text {font-size: 15px; margin-bottom: 30px;}
    .businessWrap .textArea .link {width: 175px; padding: 17px 0; font-size: 15px;}
    .licenseWrap {padding-top: 70px;}
    .licenseWrap>.title {margin-bottom: 30px;}
    .licenseWrap>.title .txt {font-size: 14px;}
    .licenseWrap .title .tit {font-size: 28px;}
    .licenseWrap .license .swiper-wrapper {gap: 0;}
    .licenseWrap .license .swiper-slide {width: 100% !important;}
    .licenseWrap .license .swiper-slide .title {padding: 13px 0;}

    /* 시공사례 */
    .caseBoardList {row-gap: 15px;}
    .caseBoardList>li {width: 100%; min-height: 50vh;}
    .casePopup {padding: 25px; gap: 30px;}
    .casePopup .textArea .title .txt {font-size: 18px;}
    .casePopup .textArea .title .tit {font-size: 30px; margin-bottom: 25px; padding-bottom: 25px;}
    .casePopup .textArea .list li {font-size: 16px;}

    /* 페이징버튼 */
    .pagenationWrap {gap: 20px; margin-top: 40px;}
    .pagenationWrap .list {gap: 20px;}
    .pagenationWrap .list li.active a {width: 34px; height: 34px; line-height: 34px;}
}

@media screen and (max-width: 480px) {
    /* CEO 인사말 */
    .greetingWrap {gap: 60px;}
    .greetingWrap .textArea .tit {font-size: 21px; margin-bottom: 30px;}
    .greetingWrap .textArea .txt {font-size: 15px; margin-bottom: 30px;}
    .greetingWrap .textArea .name span {display: block; width: 100%; margin-bottom: 10px;}
    .greetingWrap .imgArea {width: 100%;}

    .historyList .yearList>li .year {font-size: 24px;}
    .historyList .yearList>li .list li {font-size: 15px;}

    /* 시공사례 */
    .caseYearWrap {padding: 20px 0 20px 10px;}
    .caseYearWrap .caseYearList .swiper-slide {width: 23%;}
    .caseBoardList>li .textArea::before {width: 110px; height: 76px; right: 0; bottom: 5px;}
    .caseBoardList>li .textArea {padding: 20px;}
    .caseBoardList>li .textArea .txt {font-size: 14px;}
    .caseBoardList>li .textArea .tit {font-size: 18px;}
    .caseBoardList>li .textArea .list li {font-size: 14px;}
    .caseBoardList>li:hover .textArea .tit {margin-bottom: 15px;}
    .casePopup .textArea .title .txt {font-size: 16px; margin-bottom: 10px;}
    .casePopup .textArea .title .tit {font-size: 25px; margin-bottom: 20px; padding-bottom: 20px;}
    .casePopup .textArea .list li:not(:last-of-type) {margin-bottom: 10px;}

    /* 페이징버튼튼 */
    .pagenationWrap {gap: 15px;}
    .pagenationWrap .list {gap: 15px;}
}


.pg_wrap {float: none; margin-top: 50px; width: 100%;}
.pg_wrap:after {display: none}
.pg_wrap .pg {display: flex; align-items: center; justify-content: center; gap: 4px; color: #7f7f7f;}
.pg_wrap .pg .pg_page {width: 40px; height: 40px; font-size: 18px; line-height: 40px; font-weight: 400; color: #797979; background: transparent; border: 0;}
.pg_wrap .pg .pg_page.pg_start {background: url('../images/content/board_first.png') no-repeat center; background-size: auto;}
.pg_wrap .pg .pg_page.pg_prev {background: url('../images/content/board_prev.png') no-repeat center; background-size: auto;}
.pg_wrap .pg .pg_page.pg_next {background: url('../images/content/board_next.png') no-repeat center; background-size: auto;}
.pg_wrap .pg .pg_page.pg_end {background: url('../images/content/board_last.png') no-repeat center; background-size: auto;}
.pg_wrap .pg .pg_current {width: 40px; height: 40px; line-height: 40px; background: #0068B7; border: 0; border-radius: 50%;}

@media screen and (max-width: 768px) {
    .pg_wrap .pg .pg_page {font-size: 14px; width: 30px; height: 30px; line-height: 30px;}
    .pg_wrap .pg .pg_current {font-size: 14px; width: 30px; height: 30px; line-height: 30px;}
}

.no_image {width: 100%; display: block; height: 100%; background: url('../images/layout/no_img.png') no-repeat center/cover; text-indent: -9999px;}
.admWrite {display: flex; justify-content: flex-end; margin-top: 2rem;}
.admWrite a {display: inline-block; background: #2c2c2c; color: #fff; font-size: 14px; padding: 8px 12px;}