/* 공통영역 */
html {font-family: var(--fontM); scroll-behavior: smooth;}
header, section, footer {width: 100%; position: relative;}
section {overflow: hidden;}
a {text-decoration: none; color: var(--subC);}
.container {width: 1480px; margin: 0 auto;}

/* 팝업 배경 */
body.on::before {content: ''; position: fixed; width: 100%; height: 100%; background: #000000; opacity: 0.3; z-index: 20;}

/* link */
a.go_link {display: inline-block; font-size: 16px; color: var(--mainC); font-family: var(--fontB); padding: 20px 30px; box-sizing: border-box; width: 135px; border: 1px solid var(--mainC); transition: var(--time);}
a.go_link span {display: flex; align-items: center; justify-content: space-between; width: 100%;}
a.go_link:hover {background: #0068B7; color: var(--white);}
a.go_link:hover span {filter: brightness(100);}

/* header */
header {position: fixed; top: 0; left: 0; z-index: 10; transition: var(--time);}
header::before {content: ''; position: absolute; top: calc(100% + 1px); left: 0; width: 100%; height: 0; background: var(--white); box-sizing: border-box; transition: var(--time);}
header .in_header {display: flex; justify-content: space-between; align-items: center; padding: 0 50px; box-sizing: border-box;}
header .in_header .logo {width: 209px;}
header .in_header .logo a {display: block; width: 100%;}
header .in_header .logo a img {width: 100%;}
header .in_header .logo a img.off {display: block;}
header .in_header .logo a img.on {display: none;}
header .in_header nav .navList {display: flex; padding-top: 40px;}
header .in_header nav .navList>li {position: relative; text-align: center; font-size: 18px;}
header .in_header nav .navList>li>a {display: block; padding: 0 40px 40px 40px; box-sizing: border-box; font-family: var(--fontEB); color: var(--white); transition: var(--time);}
header .in_header nav .navList>li .dept2 {position: absolute; top: 100%; width: 100%; padding-top: 30px; opacity: 0; visibility: hidden; transition: var(--time);}
header .in_header nav .navList>li .dept2>li:not(:last-of-type) {margin-bottom: 20px;}
header .in_header nav .navList>li .dept2>li a {display: block; font-family: var(--fontSB); color: #999999;}
header .in_header .openMenu {display: block; border: none; font-size: 0; width: 42px; height: 42px; background-image: url('../images/layout/menu_open.png'); background-repeat: no-repeat; background-size: 100%; background-color: transparent; cursor: pointer;}

header.on {background: var(--white); border-bottom: 1px solid #F0F0F0;}
header.on::before {height: 240px;}
header.on .in_header .logo a img.off {display: none;}
header.on .in_header .logo a img.on {display: block;}
header.on .in_header nav .navList>li>a {color: var(--subC);}
header.on .in_header nav .navList>li .dept2 {opacity: 1; visibility: visible;}
header.on .in_header .openMenu {background-image: url('../images/layout/menu_open_on.png');}

header.fix {background: var(--white); border-bottom: 1px solid #F0F0F0;}
header.fix .in_header .logo a img.off {display: none;}
header.fix .in_header .logo a img.on {display: block;}
header.fix .in_header nav .navList>li>a {color: var(--subC);}
header.fix .in_header .openMenu {background-image: url('../images/layout/menu_open_on.png');}


/* fullMenu */
.fullMenu {position: fixed; top: -100vh; left: 0; width: 100%; height: 100vh; overflow-y: auto; background: #fff; z-index: 20; transition: var(--time);}
.fullMenu .header {position: absolute; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; padding: 25px 50px; box-sizing: border-box; z-index: 1;}
.fullMenu .header .logo a {font-size: 28px; font-family: var(--fontBl); color: rgba(255,255,255,0.6);}
.fullMenu .header .logo a span {font-size: 40px; color: var(--white);}
.fullMenu .header .closeMenu {display: block; border: none; font-size: 0; width: 42px; height: 42px; background: url('../images/layout/menu_close.png') transparent no-repeat; background-size: 100%; cursor: pointer;}
.fullMenu .menuWrap {display: flex; height: 100vh;}
.fullMenu .menuWrap .leftCon {display: flex; align-items: flex-end; width: 700px; height: 100%; background: url('../images/layout/menuOpen_bg.png') bottom no-repeat; background-size: cover; padding: 0 50px 70px 50px; box-sizing: border-box;}
.fullMenu .menuWrap .leftCon .tit {font-size: 20px; color: var(--white); font-family: var(--fontEB); margin-bottom: 20px;}
.fullMenu .menuWrap .leftCon .list {display: flex; flex-wrap: wrap; gap: 30px; row-gap: 12px; color: #B4B4B4;}
.fullMenu .menuWrap .leftCon .list li {display: flex; gap: 10px; font-size: 15px; font-family: var(--fontB);}
.fullMenu .menuWrap .leftCon .list li span {font-family: var(--fontM); opacity: 50%; flex-shrink: 0;}
.fullMenu .menuWrap .rightCon {position: relative; width: calc(100% - 700px); height: 100%; padding: 150px 80px 50px 80px; box-sizing: border-box;}
.fullMenu .menuWrap .rightCon::before {content: ''; position: absolute; bottom: 15px; right: 0; background: url('../images/layout/menuOpen_logo.png') no-repeat; background-size: 100%; width: 491px; height: 362px;}
.fullMenu .menuWrap .rightCon .gnbList {}
.fullMenu .menuWrap .rightCon .gnbList.pc {display: block;}
.fullMenu .menuWrap .rightCon .gnbList.mob {display: none;}
.fullMenu .menuWrap .rightCon .gnbList>li {padding: 52px 0;}
.fullMenu .menuWrap .rightCon .gnbList>li:not(:last-of-type) {border-bottom: 1px dashed rgba(0,0,0,0.1);}
.fullMenu .menuWrap .rightCon .gnbList>li:first-of-type {padding-top: 0;}
.fullMenu .menuWrap .rightCon .gnbList>li:last-of-type {padding-bottom: 0;}
.fullMenu .menuWrap .rightCon .gnbList>li>a {display: inline-block; font-size: 36px; color: var(--subC); font-family: var(--fontEB); margin-bottom: 30px;}
.fullMenu .menuWrap .rightCon .gnbList>li .dept2 {display: flex; flex-wrap: wrap; column-gap: 56px; row-gap: 20px;}
.fullMenu .menuWrap .rightCon .gnbList>li .dept2>li>a {position: relative; font-size: 18px; color: #999999; font-family: var(--fontSB);}
.fullMenu .menuWrap .rightCon .gnbList>li .dept2>li:not(:last-of-type)>a::before {content: ''; position: absolute; top: 3px; right: -28px; width: 1px; height: 16px; background: #DDDDDD;}

.fullMenu.on {top: 0;}

/* subTitle */
.subTitle {display: flex; flex-direction: column; align-items: center; justify-content: center; height: 600px; background: url('../images/layout/sub_title_bg.png'); background-position: center; background-repeat: no-repeat; background-size: cover; text-align: center; color: var(--white);}
.subTitle.type2 {background-image: url('../images/layout/sub_title_bg2.png');}
.subTitle.type3 {background-image: url('../images/layout/sub_title_bg3.png');}
.subTitle .tit {font-family: var(--fontEB); font-size: 70px; margin-bottom: 25px;}
.subTitle .txt {font-family: var(--fontSB); font-size: 20px; opacity: 0.8;}

/* tabList */
.tabList {display: flex; justify-content: center; gap: 15px; margin-top: 45px;}
.tabList li {width: 150px;}
.tabList li a {display: block; padding: 15px 0; box-sizing: border-box; border: 1px solid #0068B7; color: #0068B7; text-align: center; font-size: 18px; font-family: var(--fontSB); transition: var(--time);}
.tabList li a:hover,
.tabList li a.active {background: #0068B7; color: var(--white);}
.tabList li span {display: block; padding: 15px 0; box-sizing: border-box; border: 1px solid #0068B7; color: #0068B7; text-align: center; font-size: 18px; font-family: var(--fontSB); transition: var(--time); cursor: pointer}
.tabList li span:hover,
.tabList li span.active {background: #0068B7; color: var(--white);}

/* location */
.location {padding: 25px 0; border-bottom: 1px solid #F0F0F0; box-sizing: border-box;}
.location .list {display: flex;}
.location .list li {position: relative;}
.location .list li:not(:last-of-type)::before {content: ''; position: absolute; top: 50%; right: 37.5px; transform: translateY(-50%); background: url('../images/layout/location_arr.png') no-repeat; background-size: 100%; width: 6px; height: 9px;}
.location .list li a {display: block; padding-right: 75px; box-sizing: border-box; font-size: 16px; color: #000000; font-family: var(--fontSB);}
.location .list li:last-child a {padding-right: 0;}
.location .list li a.home {font-size: 0;}

/* subContent */
.subContent {padding: 110px 0 210px 0; position: relative; overflow: hidden;}
.subContent.greeting::before {content: 'JK CONSTRUCTION'; width: 100%; position: absolute; bottom: -20px; left: 0; text-align: center; line-height: 1; font-family: var(--fontEB); color: #F5F9FC; font-size: 210px; text-wrap: nowrap; letter-spacing: -0.04em;}
.subContent .sConTitle {text-align: center; margin-bottom: 100px;}
.subContent .sConTitle .txt {font-family: var(--fontB2); color: var(--mainC); font-size: 18px; margin-bottom: 20px; letter-spacing: 8px;}
.subContent .sConTitle .tit {font-family: var(--fontB); color: #000000; font-size: 64px;}
.subContent .sConTitle .stxt {font-family: var(--fontSB); color: #000000; font-size: 18px; line-height: 1.3; margin-top: 20px;}
.subContent .sConTitle .stxt span {font-family: var(--fontEB);}

/* footer */
footer {padding: 40px 0 120px 0; background: #2C2C2C; color: #B4B4B4; font-size: 15px;}
footer a {color: #B4B4B4; font-size: 15px;}
footer .topList {display: flex; gap: 30px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #646464;}
footer .topList a {font-family: var(--fontEB);}
footer .bottomCon {display: flex; justify-content: space-between;}
footer .bottomCon .leftCon {display: flex; gap: 70px;}
footer .bottomCon .leftCon .list {width: 50%; display: flex; flex-wrap: wrap; gap: 30px; row-gap: 12px;}
footer .bottomCon .leftCon .list li {display: flex; gap: 10px; font-family: var(--fontB);}
footer .bottomCon .leftCon .list li span {font-family: var(--fontM); opacity: 0.5;}
footer .bottomCon .copyRight {font-family: var(--fontSB);}
footer .bottomCon .linkBtn {font-family: var(--fontSB); display: flex; gap: 0.3rem; justify-content: end; padding-top: 0.3rem;}

/* 반응형 */
@media screen and (max-width: 1480px) {
    /* 공통영역 */
    .container {width: 90%;}
}

@media screen and (max-width: 1400px) {
    /* fullMenu */
    .fullMenu .menuWrap .leftCon {width: 40%;}
    .fullMenu .menuWrap .rightCon {width: 60%;}
}

@media screen and (max-width: 1025px) {
    /* header */
    header .in_header {padding: 0 30px;}
    header .in_header .logo {width: 180px;}
    header .in_header nav .navList>li {font-size: 17px;}
    header .in_header nav .navList>li>a {padding: 0 30px 40px 30px;}
    header .in_header .openMenu {width: 38px; height: 38px;}

    /* fullMenu */
    .fullMenu .header {padding: 25px 30px;}
    .fullMenu .header .logo a {font-size: 24px;}
    .fullMenu .header .logo a span {font-size: 36px;}
    .fullMenu .header .closeMenu {width: 38px; height: 38px;}
    .fullMenu .menuWrap {height: 100%;}
    .fullMenu .menuWrap .rightCon {padding: 120px 60px 50px 60px;}
    .fullMenu .menuWrap .rightCon::before {width: 390px; height: 290px;}
    .fullMenu .menuWrap .rightCon .gnbList {height: calc(100vh - 170px);}
    .fullMenu .menuWrap .rightCon .gnbList>li {padding: 42px 0;}
    .fullMenu .menuWrap .rightCon .gnbList>li>a {font-size: 30px;}
    .fullMenu .menuWrap .rightCon .gnbList>li .dept2 {column-gap: 46px;}
    .fullMenu .menuWrap .rightCon .gnbList>li .dept2>li:not(:last-of-type)>a::before {right: -23px;}

    /* subTitle */
    .subTitle {height: 450px;}
    .subTitle .tit {font-size: 55px;}
    .subTitle .txt {font-size: 18px;}

    /* subContent */
    .subContent.greeting::before {font-size: 150px;}
    .subContent .sConTitle {margin-bottom: 70px;}
    .subContent .sConTitle .txt {font-size: 16px;}
    .subContent .sConTitle .tit {font-size: 50px;}

    /* footer */
    footer {padding-bottom: 80px;}
    footer .bottomCon {flex-wrap: wrap; row-gap: 50px;}
    footer .bottomCon .leftCon .list {width: 100%;}
    footer .bottomCon .linkBtn {justify-content: flex-start;}
}

@media screen and (max-width: 768px) {
    /* header */
    header .in_header {padding: 20px;}
    header .in_header .logo {width: 160px;}
    header .in_header nav {display: none;}

    /* fullMenu */
    .fullMenu .header {padding: 20px;}
    .fullMenu .header .logo a {font-size: 20px;}
    .fullMenu .header .logo a span {font-size: 30px;}
    .fullMenu .header .closeMenu {background: url('../images/layout/menu_close_mob.png') transparent no-repeat; background-size: 100%;}
    .fullMenu .menuWrap {flex-wrap: wrap;}
    .fullMenu .menuWrap .leftCon {width: 300%; height: 300px; background: url('../images/layout/menuOpen_bg_mob.png') bottom center no-repeat; background-size: cover;}
    .fullMenu .menuWrap .leftCon>div {display: none;}
    .fullMenu .menuWrap .rightCon {width: 100%; height: calc(100% - 300px); padding: 40px 0;}
    .fullMenu .menuWrap .rightCon::before {width: 222px; height: 150px; bottom: 10px; right: 8px;}
    .fullMenu .menuWrap .rightCon .gnbList {height: 100%;}
    .fullMenu .menuWrap .rightCon .gnbList.pc {display: none;}
    .fullMenu .menuWrap .rightCon .gnbList.mob {display: block;}
    .fullMenu .menuWrap .rightCon .gnbList>li {padding: 30px 20px; border-bottom: 1px dashed rgba(0, 0, 0, 0.1) !important; box-sizing: border-box;}
    .fullMenu .menuWrap .rightCon .gnbList>li:last-of-type {padding-bottom: 30px;}
    .fullMenu .menuWrap .rightCon .gnbList>li>a {position: relative; display: block; width: 100%; margin-bottom: 0; font-size: 24px;}
    .fullMenu .menuWrap .rightCon .gnbList>li>a::before {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: url('../images/layout/menu_arr.png') no-repeat; background-size: 100%; width: 30px; height: 30px;}
    .fullMenu .menuWrap .rightCon .gnbList>li .dept2 {margin-top: 30px; display: none; padding-left: 10px; box-sizing: border-box;}
    .fullMenu .menuWrap .rightCon .gnbList>li .dept2>li {width: 100%;}
    .fullMenu .menuWrap .rightCon .gnbList>li .dept2>li:not(:last-of-type) {margin-bottom: 20px;}
    .fullMenu .menuWrap .rightCon .gnbList>li .dept2>li>a {display: block;}
    .fullMenu .menuWrap .rightCon .gnbList>li .dept2>li:not(:last-of-type)>a::before {display: none;}

    /* subTItle */
    .subTitle {height: 346px;}
    .subTitle .tit {font-size: 36px; margin-bottom: 15px;}
    .subTitle .txt {font-size: 16px; line-height: 1.3;}

    /* tabList */
    .tabList {margin-top: 20px; gap: 5px;}
    .tabList li {width: 130px;}
    .tabList li a {font-size: 13px; padding: 10px 0;}
    .tabList li span {font-size: 13px; padding: 10px 0;}

    /* location */
    .location {padding: 20px 0;}
    .location .list li:not(:last-of-type)::before {right: 22px;}
    .location .list li a {font-size: 13px; padding-right: 44px;}
    .location .list li a.home img {width: 12px;}

    /* subContent */
    .subContent {padding: 50px 0 120px 0;}
    .subContent.greeting::before {display: none;}
    .subContent .sConTitle {margin-bottom: 50px;}
    .subContent .sConTitle .txt {font-size: 14px; margin-bottom: 10px; letter-spacing: 3px;}
    .subContent .sConTitle .tit {font-size: 28px;}

    /* footer */
    footer {padding-bottom: 60px;}
    footer .bottomCon .leftCon .logo {display: none;}
    footer .topList {margin-bottom: 30px; padding-bottom: 30px;}
    footer .bottomCon .leftCon .list li {width: 100%;}
}

@media screen and (max-width: 480px) {
    /* go_link */
    a.go_link {font-size: 15px; width: 120px; padding: 20px 25px;}

    /* header */
    header .in_header {padding: 15px;}
    header .in_header .logo {width: 140px;}
    header .in_header .openMenu {width: 28px; height: 28px;}

    /* fullMenu */
    .fullMenu .header {padding: 15px;}
    .fullMenu .header .logo a {font-size: 16px;}
    .fullMenu .header .logo a span {font-size: 25px;}
    .fullMenu .header .closeMenu {width: 28px; height: 28px;}
    .fullMenu .menuWrap .leftCon {height: 200px;}
    .fullMenu .menuWrap .rightCon {height: calc(100% - 200px); padding: 25px 0;}
    .fullMenu .menuWrap .rightCon .gnbList>li {padding: 25px 15px;}
    .fullMenu .menuWrap .rightCon .gnbList>li:last-of-type {padding-bottom: 25px;}
    .fullMenu .menuWrap .rightCon .gnbList>li>a {font-size: 20px;}
    .fullMenu .menuWrap .rightCon .gnbList>li .dept2 {margin-top: 25px;}
    .fullMenu .menuWrap .rightCon .gnbList>li .dept2>li>a {font-size: 16px;}
    .fullMenu .menuWrap .rightCon .gnbList>li .dept2>li:not(:last-of-type) {margin-bottom: 15px;}

    /* tabList */
    .tabList {width: 100%; flex-wrap: wrap; justify-content: flex-start;}
    .tabList li {width: calc(33.333% - 3.333px);}

    /* footer */
    footer {padding-top: 20px; font-size: 14px;}
    footer a {font-size: 14px;}
    footer .topList {margin-bottom: 20px; padding-bottom: 20px;}
    footer .bottomCon {row-gap: 30px;}
    footer .bottomCon .leftCon .list {row-gap: 5px;}
}