@charset "utf-8";

.chk-items {display: flex; justify-content: center; gap: 25px;}
.check-item {display: block; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; width: 160px; height: 160px;}
.check-item input {position: absolute; width: 0; height: 0;}
.check-item label {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; z-index: -1;}
.check-item:hover label {background: #60b71d; color: #fff;}
.check-item:hover .icon img {filter: contrast(0.1) brightness(10);}
.check-item .icon {margin-bottom: 5px;}
.check-item input:checked ~ label {background: #60b71d; color: #fff;}
.check-item input:checked ~ label .icon img {filter: contrast(0.1) brightness(10);}

.estimate-form {max-width: 600px; margin: 0 auto;}
.estimate-form a {display: flex; align-items: center; justify-content: center; gap: 10px;width: 100%; height: 60px; border-radius: 10px; background: #ff861d; color: #fff;}
.estimate-form a:not(:last-child) {margin-bottom: 18px;}
.estimate-form .item {position: relative; margin-bottom: 18px;}
.estimate-form select {border: 1px solid #ccc; border-radius: 10px; height: 60px; padding: 10px 30px; font-weight: 500; font-size: 20px; color: #888;}
.estimate-form .select-items .item:after {position: absolute; content: ''; top: 7px; bottom:7px; right: 3px; width: 42px; background: #fff url('../images/sub/select-arrow.png') no-repeat center left; pointer-events: none;}
.estimate-form .item .select-txt {position: absolute; display: flex; align-items: center; top: 2px; bottom: 2px; left: 30px; width: calc(100% - 90px); font-weight: 500; font-size: 20px; color: #888; background: #fff;  pointer-events: none;}
.estimate-form select:selected ~ .select-txt {opacity: 0;}

.estimate-result .basic {padding-top: 65px;}
.estimate-calc .item {padding: 25px 30px 30px; border-top: 1px solid #666;}
.estimate-calc .flex-wrap {justify-content: space-between; gap: 40px;}
.estimate-calc .estimate-info {display: flex; gap:28px;}

.chk-options .radiobox {display: block;}
.estimate-table {margin-bottom: 35px;margin-top: 25px;}
.estimate-table table {border-collapse: collapse; width: 100%; border-top: 1px solid #ddd; border-left: 1px solid #ddd;}
.estimate-table thead th {background: #f2f2f2; padding: 12px;}
.estimate-table tbody th {padding: 5px;}
.estimate-table th,
.estimate-table td {border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.estimate-table td { padding:16px 18px;}
.radio-boxes {display: flex; gap: 27px;}

.estimate-total .flex-wrap {justify-content: space-between;padding: 60px 35px; background: #262626; color: #fff;}
.estimate-total .total-info {display: flex; gap: 42px;}
.estimate-result .btn-estimate {display: flex; align-items: center; justify-content: center; width: 600px; height: 60px; gap: 12px; margin: 0 auto; background: #222; color: #fff; border-radius: 10px;}

.estimate-gallery ul {display: flex; gap:26px; flex-wrap: wrap;}
.estimate-gallery ul li {width: calc((100% - 78px) / 4);}
.estimate-gallery ul li .img {position: relative; width: 100%; padding-bottom: 75.76%; overflow: hidden; border-radius: 30px;}
.estimate-gallery ul li .img img {position: absolute; width: 100%; height: auto; max-width: 100%; min-height: 100%; left: 0; top: 50%; transform: translateY(-50%); object-fit: cover;}
.estimate-gallery>p {line-height: 1.4375em; margin-bottom: 25px;}

.portfolio h2 {margin: 0 auto; width: fit-content; padding: 12px 24px; background: #60b71d; border-radius: 30px; color: #fff; font-weight: 600; font-size: 28px;}

.recruit-items .flex-wrap {align-items: center; gap: 65px;}
.recruit-items .flex-wrap .icon {display: flex; align-items: center; justify-content: center; width: 230px; height: 230px; border-radius: 100%; color: #fff; font-size: 32px; font-weight: 700; text-shadow: 0 0 5px rgba(0,0,0,.4); text-align: center; background-size: 52% !important;}
.recruit-items .flex-wrap .txt {flex: 1;}
.recruit-items .item:first-child {padding-top: 0;}
.recruit-items .item {padding: 60px 30px 60px 187px; border-bottom: 1px solid #999;}
.recruit-items .chk-list li {display: flex; align-items: center; gap: 10px;}
.recruit-items .chk-list {padding-left: 295px; margin-top: 24px;}
.recruit-items .chk-list .icon img {width: 21px;}

.filebox {display: flex;}
.filebox .upload-name {display: inline-block; padding: 0 20px; vertical-align: middle; border: 1px solid #dddddd; flex:1; color: #999999;}
.filebox label {display: inline-block; padding: 10px 20px; color: #fff; vertical-align: middle; background-color: #999999; cursor: pointer; height: 40px; margin-left: 10px;}
.filebox input[type="file"] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;}
.board-form .filebox .flex-btn {width: 180px; font-size: 20px; height: auto; border-radius: 10px;}
.board-form .padding-input {width: calc(100% - 40px); padding: 0 20px;}

.table-wrap table {width: 100%; border-collapse: collapse; text-align: center;}
.table-wrap th {font-weight: 600; background: #f2f2f2;}
.table-wrap th, .table-wrap td {border: 1px solid #ddd; height: 60px;}
.table-wrap tbody tr td:first-child {font-weight: 500;}

.contract-process {display: flex; flex-wrap: wrap; gap: 50px;}
.contract-process .box {position: relative; width: calc((100% - 200px) / 5); text-align: center;}
.contract-process .box:before {position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #ddd; border-radius: 30px;}
.contract-process .inner {padding: 18px;}
.contract-process .num {font-size: 36px;}
.contract-process .icon {margin: 15px 0;}
.contract-process .txt {font-size: 20px; line-height: 1.5em; min-height: 3em}
.contract-process .info { line-height: 1.25em; background: #ff861d; color :#fff; display: flex; height: 56px; text-align: center; align-items: center; justify-content: center; border-radius: 20px; padding: 0 15px;}