/* Common */
.f_point {font-family: 'GmarketSans'; /*font-family: 'jalnan';*/}

#contents_body {padding-top: 212px;}

#main, .sub {padding-top: 0;}

/* Header */
/* .header {position: fixed; top: 0; left: 0; width: 100%; z-index: 10; background-color: #FFFFFF;}
.hd-wr {display: flex; align-items: center; justify-content: space-between; height: 150px; padding: 0 60px;}
.header-logo {display: flex; align-items: center; gap: 50px;}
.header-logo a {font-size: 0; position: relative;}
.header-logo a::before {content: ''; width: 1px; height: 30px; background-color: #cccccc; position: absolute; top: 50%; left: -25px; transform: translateY(-50%);}
.header-logo a:first-child::before {display: none;}
.header-logo a img {font-size: 0;}
.header-logo a.main {font-weight: 800; font-size: 25px; color: #000000;}

.gnb {}
.gnb-ul {display: flex; align-items: center; gap: 115px;}
.gnb-ul > li {}
.gnb-ul > li > a {font-weight: 600; font-size: 25px; color: #000000;}
.gnb-ul2 {display: none;}
.gnb-ul2 > li {}
.gnb-ul2 > li > a {}

.all-menu-btn {display: flex; width: 24px; height: 19px; border: none; background-color: transparent; align-items: center; justify-content: center;}
.all-menu-btn span {display: flex; width: 24px; height: 3px; background-color: #000000; border-radius: 2px; position: relative;}
.all-menu-btn span::before {content: ''; display: flex; width: 24px; height: 3px; background-color: #000000; border-radius: 2px; position: absolute; top: -8px; left: 0;}
.all-menu-btn span::after {content: ''; display: flex; width: 12px; height: 3px; background-color: #000000; border-radius: 2px; position: absolute; top: 8px; left: 0;} */

/* Footer */
.footer .wrapper {width: 1400px;}
.ft-left .ft-logo {display: flex; align-items: center; gap: 50px;}
.ft-left .ft-logo a {font-size: 0; position: relative;}
.ft-left .ft-logo a::before {content: ''; width: 1px; height: 28px; background-color: #cccccc; position: absolute; top: 50%; left: -25px; transform: translateY(-50%);}
.ft-left .ft-logo a:first-child::before {display: none;}
.ft-left .ft-logo a img {font-size: 0;}
.ft-left .ft-logo a.main {font-weight: 800; font-size: 23px; color: #848484;}

/* Common */
.tab-btn-wrap {}
.tab-btn-wrap.type01 {display: flex; align-items: center; gap: 10px;}
.tab-btn-wrap.type01 .tab-btn {display: flex; align-items: center; justify-content: center; min-width: 146px; height: 53px; border-radius: 60px; background-color: #FFFFFF; border: none; font-weight: 800; font-size: 25px; color: #8B8B8B; transition: .3s;}
.tab-btn-wrap.type01 .tab-btn.on {background: #5EB6FF; background: linear-gradient(90deg,rgba(94, 182, 255, 1) 0%, rgba(8, 132, 247, 1) 100%); color: #FFFFFF;}
.tab-btn-wrap.type01 .tab-btn:hover {background: #5EB6FF; background: linear-gradient(90deg,rgba(94, 182, 255, 1) 0%, rgba(8, 132, 247, 1) 100%); color: #FFFFFF;}

.tab-btn-wrap.type02 {display: flex; align-items: center;}
.tab-btn-wrap.type02 .tab-btn {font-weight: 800; font-size: 28px; color: #8B8B8B; border: none; background-color: transparent; padding: 15px 12px; position: relative; transition: .3s;}
.tab-btn-wrap.type02 .tab-btn::before {content: ''; height: 3px; width: 0; background-color: #024D9B; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: .3s;}
.tab-btn-wrap.type02 .tab-btn.on {color: #024D9B;}
.tab-btn-wrap.type02 .tab-btn.on::before {width: 100%;}
.tab-btn-wrap.type02 .tab-btn:hover {color: #024D9B;}
.tab-btn-wrap.type02 .tab-btn:hover::before {width: 100%;}

/* Main */
.main-content {background: url('/static/gyeyak/img/main-bg.png') no-repeat top/cover; padding: 88px 0 83px!important;}
.main-top-content {display: flex; align-items: flex-start; justify-content: space-between;}
.main-top-content-left {width: 54%;}
.main-top-title {font-weight: 500; font-size: 45px; line-height: 1.5; color: #333; margin-bottom: 68px;}
.main-top-title b {font-weight: 700; color: #000;}
.main-contract-status {padding-right: 20px;}
.main-contract-status-top {display: flex; align-items: center; justify-content: space-between;}
.main-contract-status-top .more {display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: 14px; color: #000000;}
.main-contract-status-top .more::after {content: ''; width: 10px; height: 10px; background: url('/static/gyeyak/img/icon-more-btn.png') no-repeat center; display: flex; align-items: center; justify-content: center;}
.main-contract-status-bot {padding-top: 17px;}
.main-contract-status-section {display: none;}
.main-contract-status-section:first-child {display: block;}
.main-contract-status-list {}
.main-contract-status-li {display: flex; align-items: center; justify-content: space-between; height: 55px; border-bottom: 1px solid rgba(255,255,255,0.5); padding-left: 10px; padding-right: 16px;}
.main-contract-status-li.empty {justify-content: center; font-weight: 700; font-size: 16px; color: #000000; height: 220px;}
.main-contract-status-li .link {display: flex; align-items: center; gap: 18px; width: calc(100% - 75px);}
.main-contract-status-li .tag {display: flex; align-items: center; justify-content: center; width: 51px; height: 27px; border-radius: 3px; background-color: #FFFFFF; border: 1px solid transparent; font-weight: 700; font-size: 14px;}
.main-contract-status-li .tag.t-1 {border-color: #3291F0; color: #3291F0;}
.main-contract-status-li .tag.t-2 {border-color: #FC3460; color: #FC3460;}
.main-contract-status-li .tag.t-3 {border-color: #41B8BE; color: #41B8BE;}
.main-contract-status-li .title {font-weight: 500; font-size: 18px; color: #000000; width: calc(100% - 69px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main-contract-status-li .date {font-weight: 400; font-size: 14px; color: #666666; text-align: right;}

.main-top-content-right {width: 44%;}
.hexagon-btn-wrap {overflow: hidden; padding-bottom: 70px;}
.hexagon-btn-wrap .hex-row {display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; position: relative;}
.hexagon-btn-wrap .hex-row.odd {padding: 20px 0;}
.hexagon-btn-wrap .hex {width: calc((100% - 24px) / 3); position: relative;}
/* .hexagon-btn-wrap .hex:nth-last-of-type(5n+2) {margin-left: calc((100% - 24px) / 3 / 2);} */
.hexagon-btn-wrap .hex::after {content: ''; display: block; padding-bottom: 80%;}
.hexagon-btn-wrap .hex-inner {position: absolute; width: 100%; overflow: hidden; visibility: hidden; transform: rotate3d(0,0,1,-60deg) skewY(30deg); border-radius: 5px; height: 144%;}
.hexagon-btn-wrap .hex-content {position: absolute; visibility: visible; display: flex; width: 100%; height: 100%; overflow: hidden; transform: skewY(-30deg) rotate3d(0,0,1,60deg); background-color: transparent;  justify-content: center; align-items: center; transition: .3s;}
.hexagon-btn-wrap .hex-content::before {content: '';  background: url('/static/gyeyak/img/hexagon.png') no-repeat center/cover #ffffff; position: absolute; top: 50%; left: 50%;  transform: translate(-50%,-50%); width: 100%; height: 100%; transition: .3s; opacity: 1;}
.hexagon-btn-wrap .hex-link {display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; position: relative; z-index: 2;}
.hexagon-btn-wrap .hex-link .num {font-weight: 700; font-size: 18px; color: #013D8D;}
.hexagon-btn-wrap .hex-link .icon {font-size: 0; margin: 7px 0 3px;}
.hexagon-btn-wrap .hex-link .icon img:last-child {display: none;}
.hexagon-btn-wrap .hex-link .title {font-weight: 700; font-size: 18px; color: #000000; transition: .3s; position: relative;}
.hexagon-btn-wrap .hex-link .title::before {content: ''; width: 0; height: 2px; background-color: #004BAB; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: .3s;}

.hexagon-btn-wrap .hex:hover .hex-inner {box-shadow: 0 0 10px #959dcc;}
.hexagon-btn-wrap .hex:hover .hex-content {background: rgba(140,200,248,0.7); box-shadow: 0 0 10px #959dcc;}
.hexagon-btn-wrap .hex:hover .hex-content::before {opacity: 0;}
.hexagon-btn-wrap .hex:hover .hex-link .icon img {display: none;}
.hexagon-btn-wrap .hex:hover .hex-link .icon img:last-child {display: block;}
.hexagon-btn-wrap .hex:hover .hex-link .title {color: #004BAB;}
.hexagon-btn-wrap .hex:hover .hex-link .title::before {width: 100%;}

.main-second-section {padding-top: 85px;}
.main-board-box {border-radius: 20px; box-shadow: 0 0 15px rgba(0,0,0,0.15); background-color: #FFFFFF; padding: 30px 46px 34px; display: flex; align-items: flex-start; justify-content: space-between;}
.main-board-left {width: 704px; max-width: 100%;}
.main-board-top {border-bottom: 1px solid #dddddd; display: flex; align-items: center; justify-content: space-between;}
.main-board-top .more {display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: 14px; color: #000000;}
.main-board-top .more::after {content: ''; width: 10px; height: 10px; background: url('/static/gyeyak/img/icon-more-btn.png') no-repeat center; display: flex; align-items: center; justify-content: center;}
.main-board-bot {}
.main-board-section {display: none;}
.main-board-section:first-child {display: block;}
.main-board-list  {padding-left: 19px; padding-top: 38px;}
.main-board-li {display: flex; align-items: center; justify-content: space-between;}
.main-board-li ~ .main-board-li {margin-top: 38px;}
.main-board-li .link {position: relative; padding-left: 12px; width: calc(100% - 75px);}
.main-board-li .link::before {content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: #000; position: absolute; top: 9px; left: 0;}
.main-board-li .link .title {font-weight: 600; font-size: 16px; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block;}
.main-board-li .date {font-weight: 400; font-size: 14px; color: #666666;}
.main-board-li.empty {justify-content: center; font-weight: 700; font-size: 16px; color: #000000; height: 148px;}
.main-board-right {width: 514px;  max-width: 100%;}
.main-card-slide {position: relative;}
.main-card-slide .swiper-container {overflow: hidden;}
.main-card-img {border-radius: 20px; overflow: hidden; font-size: 0;}
.main-card-title {font-weight: 600; font-size: 18px; color: #333; margin-top: 16px;}
.siwper-ctr-box {display: flex; align-items: center; justify-content: space-between; height: 0; z-index: 10; position: absolute; top: 162.5px; left: 50%; transform: translateX(-50%); width: 564px;}
.siwper-ctr-box button {transition: .3s; border: 1px solid #B4B4B4; display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; background-color: #FFFFFF; border-radius: 50%;}

.related-site {border-top: 1px solid #ccc;}
.related-site-wrap {display: flex; align-items: center; justify-content: space-between; height: 78px;}
.related-site-wrap-left {display: flex; align-items: center; gap: 45px;}
.related-site-wrap-left p {font-weight: 800; font-size: 18px; color: #000;}
.siwper-ctr-wrap {display: flex; align-items: center; gap: 6px;}
.siwper-ctr-wrap button {display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #D9D9D9;}
.siwper-ctr-wrap .prev {background: url('/static/gyeyak/img/icon-swiper-prev.png') no-repeat center #ffffff;}
.siwper-ctr-wrap .pause {background: url('/static/gyeyak/img/icon-swiper-pause.png') no-repeat center #ffffff;}
.siwper-ctr-wrap .pause.play {background: url('/static/gyeyak/img/icon-swiper-play.png') no-repeat center #ffffff;}
.siwper-ctr-wrap .next {background: url('/static/gyeyak/img/icon-swiper-next.png') no-repeat center #ffffff;}
.related-site-wrap-right {width: calc(100% - 250px);}
.related-site-slider {overflow: hidden;}
.related-site-slider .swiper-slide {width: 20%; text-align: center;}
.related-site-slider .link {font-size: 0; display: flex; align-items: center; justify-content: center;;}
.related-site-slider .link img {}

/* Sub */
.sub-visual {background: url('/static/gyeyak/img/sub-visual-img.png') no-repeat center/cover;}

/* 발주계획 */
.contract-btn-wrap {display: flex; flex-wrap: wrap; gap: 45px;}
.contract-btn {width: calc((100% - 135px) / 4); display: flex; justify-content: space-between; align-items: center; height: 150px; border-radius: 20px; border: 2px solid #cccccc; padding-left: 56px; padding-right: 30px; transition: .5s; position: relative;}
.contract-btn::before {content: ''; width: 0; height: 100%; background: #203168; background: linear-gradient(270deg,rgba(32, 49, 104, 1) 0%, rgba(79, 100, 170, 1) 100%); border-radius: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -1; transition: .5s;}
.contract-btn .text {color: #333; transition: .5s;}
.contract-btn .text .a {font-weight: 700; font-size: 28px;}
.contract-btn .text .b {font-weight: 600; font-size: 25px;}
.contract-btn .icon {display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; border: 1px solid #172254; transition: .5s;}
.contract-btn .icon img:last-child {display: none;}

.contract-btn:hover {}
.contract-btn:hover::before {width: 100%;}
.contract-btn:hover .text {color: #FFFFFF;}
.contract-btn:hover .icon {background-color: #172254;}
.contract-btn:hover .icon img:first-child {display: none;}
.contract-btn:hover .icon img:last-child {display: block;}

.contract-desc-box {margin-top: 50px; border-radius: 20px; background-color: #f7f7f7; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 50px;}
.contract-desc-img {font-size: 0;}
.contract-desc-text {text-align: center; font-weight: 600; font-size: 25px; color: #333333; line-height: 1.4; margin-top: 23px;}
.contract-desc-text b {font-weight: 900; color: #172254;}

/* 입찰정보 > 계약 현황 공개 */
.area-search-box {}
.area-search-wrap {display: flex; align-items: center; gap: 82px; justify-content: center; background-color: #f7f7f7; border-radius: 15px; border: 1px solid #cccccc; padding: 75px 30px;}
.area-search-img-box {font-size: 0; width: 635px;}
.area-search-img-box map {}
.area-search-img-box map area {}
.area-search-img-box map area:focus {outline: 3px dotted #172254;}
.area-search-list {width: 504px; max-width: 100%;}
.area-search-li {}
.area-search-li ~ .area-search-li {margin-top: 18px;}
.area-search-tit {font-weight: 700; font-size: 20px; color: #333333; margin-bottom: 9px;}
.area-search-cnt {}

.area-check-wrap {display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;}
.area-check-wrap_item {width: calc((100% - 24px) / 4);}
.area-check-wrap_item input[type=checkbox] {appearance: none; font-size: 0; outline: none; position: absolute;}
.area-check-wrap_item input[type=checkbox] + label {width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 5px; background-color: #FFFFFF; border: 1px solid #cccccc; cursor: pointer; transition: .3s; font-weight: 600; font-size: 16px; color: #666666;}
.area-check-wrap_item input[type=checkbox]:checked + label {border-color: #172254; color: #FFFFFF; background-color: #172254;}
.area-check-wrap_item input[type=checkbox]:focus + label {outline: 3px dotted #172254;}

.area-search-bar {display: flex; gap: 7px; align-items: center;}
.area-search-bar .select-box {min-width: 120px; width: 120px; padding: 0; height: 60px; background: url("/static/gyeyak/img/icon-select.png") no-repeat center right 10px #fff; font-weight: 600; font-size: 16px; color: #666666; letter-spacing: -1px; padding-left: 16px; padding-right: 24px;}
.area-search-bar .btn {padding: 0; width: 60px; height: 60px;}
.area-search-bar input[type=text] {height: 60px; font-weight: 600; font-size: 16px; width: calc(100% - 194px);}
.area-period-wrap {display: flex; align-items: center;}
.area-period-wrap span {margin: 0 10px;}
.area-period-wrap input[type=date] {height: 60px; width: calc((100% - 10px) / 2);}

.txt-board table {table-layout: fixed;}
.txt-board table thead th.money {text-align: right; font-size: 16px;}
.txt-board table tbody td.money {text-align: right; font-size: 16px;}
.txt-board table tbody td.td-subj {padding: 15px 10px;}
.txt-board table tbody td.td-subj .tit {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;}

/* 입찰정보 > 계약 현황 공개 - 상세 */
.board-list.txt-type02 table th {padding: 10px; height: 50px; background-color: #f5f5f5;}
.board-list.txt-type02 table td {padding: 10px; height: 50px; font-size: 16px;}
.txt-board table tbody td {font-size: 16px;}

.contract-view-block {margin-top: 20px;}
.contract-view-block .btn.sizeS {padding: 0 5px; height: 36px; line-height: 36px; font-size: 14px;}
.btn-td-wrap {display: flex; align-items: center; justify-content: space-between;}

.layer-popup {width: 1538px; height: auto; min-height: 450px;}

.txt-board.statics table tbody td {border-right: 1px solid #ddd;}
.txt-board.statics table tbody td:last-child {border-right: none;}

/* 관련정보 > 관련사이트 */
.site-list {display: flex; align-items: flex-start; gap: 25px; flex-wrap: wrap;}
.site-item {border: 1px solid #CCCCCC; width: calc((100% - 50px) / 3); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 26px 20px 39px;}
.site-logo {font-size: 0; margin-bottom: 19px;}
.site-box-title {background-color: #ECECEC; display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 10px; width: 100%; font-weight: 600; font-size: 18px; color: #000000;}
.site-link {display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 600; font-size: 18px; color: #024D9B; margin-top: 25px;}
.site-link::after {content: ''; width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; background: url('/static/gyeyak/img/icon-link.png') no-repeat center;}