@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Unbounded&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

*, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body, html {
	overflow-x: hidden;
	height: 100vh;
	width: 100vw;
}

body {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 100%;
}

body::-webkit-scrollbar {
	width: 8px; /*스크롤바의 너비*/
}

body::-webkit-scrollbar-thumb {
	background-color: #eeeeee; /*스크롤바의 색상*/
	border-radius: 4px;
}

body::-webkit-scrollbar-track {
	background-color: #000000; /*스크롤바 트랙 색상*/
}
header {
	height: 70px;
	border-bottom: 1px solid #eeeeee;
	position: fixed;
	top: 0px;
	width: 100%;
	box-shadow:5px 5px 10px rgba(0,0,0,0.4);
	z-index: 10;
	background-color: rgba(255,255,255,0.4);
    transition: background-color 0.5s ease;
}

header>section,/*flex, center, center*/
header>section>section:last-child>nav>ul,
.rolling-banner,
.main_02 > .text-banner,
.main_02 .icon-description,
.main_02 .icon-description > article:first-child,
.main_03 .mainWrapper,
.main_04 .mainWrapper > section,
.main_05 .mainWrapper,
.main_05 .text-description,
.main_06 .mainWrapper,
.main_06 .reviewWrapper,
.main_07 .mainWrapper,
.main_08 .category > ul,
.main_08 .items,
.main_09,
.main_10 > section > section > section:last-child > section > section {
	display: flex;
	justify-content: center;
	align-items: center;
}
header>section {
	height: 100%;
}

header>section>section,
.logo img {
	width: 100%;
}

header>section>section:first-child {
	padding: 20px;
}

header>section>section:last-child {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 0 30px 0 0;
}

header>section>section:last-child>nav>ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

header>section>section:last-child>nav>ul>li {
	padding: 0 20px;
	font-size: 1.1rem;
	cursor: pointer;
	position: relative;
}
header>section>section:last-child>nav>ul>li>span.menu{
	text-shadow: 2px 2px 5px rgb(255,255,255);
}
.logo {
	width: 150px;
}

.main-banner-blank {
	height: 70px;
}

.main-banner {
	height: 470px;
	border-bottom: 1px solid #eeeeee;
	position: relative;
}

.rolling-banner { 
	flex-direction: column;
	width : 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	transition: opacity 3s ease-in-out;
	background-size: cover;
	background-position: center;
	width: 100%;
}

.rolling-banner:nth-of-type(1) {
	background-image: url(/images/source/rolling-banner_01.jpg);
}

.rolling-banner:nth-of-type(2) {
	background-image: url(/images/source/rolling-banner_02.jpg);
}

.rolling-banner:nth-of-type(3) {
	background-image: url(/images/source/rolling-banner_03.jpg);
}
.hiddenSection{
	display: none;
}
.hiddenMenu{
	display: none;
}
.hiddenMenu > i{
	font-size:1.8rem;
}
.title-text{
	font-size: 1.8rem;
	font-weight: 700;
	color:#d2331a;
}
.main-text, .sub-text{
	font-weight: 700;
	color: #ffffff;
}
.main-text {
	font-size: 5.0rem;
}
.sub-text {
	font-size: 1.5rem;
}

.sub-text:last-child{
	color:#ed6d00;
}
.main-text, .sub-text {
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	text-align: center;
}
.mainClose{
	display: none;
}
.openSection{
	display: flex;
	flex-direction:column;
	margin:0 auto;
	width:100%;
}
.main_02 > .text-banner{
	flex-direction: column;
	color:#dcdcdc;
	width:1440px;
	margin:auto auto;
}
.main_02 > .text-banner > section{
	padding:20px 0;
}
.main_02 > .text-banner > section:first-child{
	font-size: 2.0rem;
	font-weight: 700;
}
.main_02 .subject{
	font-size:1.5rem;
	padding:10px 0;
}
.main_02 .content{
	font-size:0.9rem;
}
.spWord{
	color:#ed6d00;
	font-size:2.5rem;
}
.spWord2{
	color:#ed6d00;
	font-size:1.2rem;
}
.mainWrapper{
	width:1440px;
	margin:auto auto;
}
.main_02{
	background-color: #f8f8f8;
	padding:50px;
}
/* .main_02 > .text-banner > section:first-child + section{
	width:200px;
} */

.main_02 > .text-banner > section:first-child  + section > img{
	width:100%;
}
.main_02 .description{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width:100%;
}
.main_02 .icon-description > article > i{
	color:#ffffff;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}
.main_02 .icon-description{
	flex-direction: column;
	text-align: center;
	color:#000000;
	width:450px;
}
.main_02 .icon-description > article:first-child{
	width:100px;
	height: 70px;
	border:1px dotted #dcdcdc;
	border-radius: 50%;
	font-size: 170%;
}
.main_03{
	padding:50px;
	border-bottom: 1px solid #eeeeee;
}
.main_03 .mainWrapper{
	flex-direction: column;
}
.main_03 .mainWrapper > section:first-child{
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 20px;
}
.main_03 div.swiper-slide > section{
	cursor: pointer;
}
.main_03 .mainWrapper > section:last-child,
.main_04 .mainWrapper,
.main_05 .mainWrapper > section:last-child,
.main_08 .items .list,
.main_10 > section > section,
.main_10 > section > section > section:last-child{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.main_03 .mainWrapper > section:last-child{
	height:400px;
	width:100%;
	position: relative;
}

.main_03 div.swiper-slide > section{
	width:200px;
	height:80%;
	border:1px solid #eeeeee;
	margin:0 30px;
	border-radius: 10px;
}

.main_04{
	padding:50px;
	border-bottom: 1px solid #eeeeee;
}
.main_04 span[data-bs-toggle="modal"]{
	cursor: pointer;
}
.main_04 .mainWrapper > section{
	flex-direction: column;
	margin:0 30px;
}

.main_04 .mainWrapper > section > section{
	width:420px;
}
.main_04 .mainWrapper > section > section.content{
	height:200px;
	border:1px solid #eeeeee;
	border-radius: 10px;
	padding:15px;
	font-size:0.8rem;
}
.board-online-estimate .content{
	background-image: url(/images/source/estimate.jpg);
	background-position: center;
	background-size: cover;
	cursor:pointer;
	position:relative;
	font-weight: 700;
	color:#ffffff;
	border:0;
}
.board-online-estimate .content:hover:before{
	content:"서비스를 신청하시려면 클릭하세요";
	text-shadow:0 0 10px rgb(0,0,0);
	font-size:1.3rem;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* Center the content */
    text-align: center;  /* Optional: to ensure the text is centered */
}
.main_04 .mainWrapper > section > section.content > section.line{
	display:flex;
	justify-content:flex-start;
	border-bottom:1px dotted #eeeeee;
	padding:5px 0;
}
.main_04 .mainWrapper > section > section.content > section.line > section:first-child{
	width:100px;
}
.main_04 .mainWrapper > section > section.title{
	text-align: center;
	padding:15px 0;
	font-size: 1.2rem;
	font-weight: 700;
}
.main_04 .mainWrapper > section > section.title > span{
	padding:0 10px;
}
.main_04 .mainWrapper > section > section.msg{
	text-align: center;
	padding:10px 0;
	font-size: 0.8rem;
	font-weight: 400;
}
.fa-solid{
	cursor:pointer;
}
.fa-solid:hover{
	color:#ed6d00;
}
.main_05{
	padding:50px;
	border-bottom: 1px dotted #f8f8f8;
	background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url('/images/source/business_banner.jpg');
	background-position: center;
	background-size: cover;
	color:#ffffff;
}
.main_05 .mainWrapper{
	flex-direction: column;
}
.main_05 .mainWrapper > section:first-child{
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 20px;
}
.main_05 .mainWrapper > section:last-child{
	height:400px;
	width:100%;
}
.main_10 > section > section > section:last-child > section{
	display: flex;
	justify-content: center;
	align-items: flex-end;
	cursor:pointer;
}
.main_05  .mainWrapper > section:last-child > section{
	width:300px;
	height:80%;
	margin:0 30px;
	border-radius: 10px;
	box-shadow:  0 0 15px rgba(0,0,0,0.2);
	position: relative;
}

.main_05 .text-description{
	position: absolute;
	bottom:0;
	width:100%;
	height:30%;
	background-color: #ffffff;
	border-bottom:1px solid #eeeeee;
	flex-direction: column;
	cursor:pointer;
	text-align: center;
}
/**/
.background-section {
    width: 100%;
    height: 500px; /* or whatever height you want */
    position: relative;
    overflow: hidden;
}

.text-description {
    position: absolute;
    bottom: 0;
    height: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    transition: height 0.5s ease, background 0.5s ease;
}

.background-section:hover .text-description {
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.title {
    opacity: 1;
    color:#000000;
    transition: opacity 0.5s ease;
}
.subtitle{
	opacity: 0;
}

.background-section:hover .subtitle, .background-section:hover .title {
    opacity: 1;
    color:#ffffff;
}
.background-section:hover .title{
	border-bottom:1px solid #81868a;
	width: 100%;
}
/**/

.main_06{
	padding:50px;
}
.main_06 .mainWrapper{
	flex-direction: column;
}
.main_06 .mainWrapper > section:first-child{
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 20px;
}
.main_06 .reviewWrapper{
	width:100%;
	height:200px;
	margin-top:30px;
}
.main_06 .reviewWrapper > section{
	margin:0 30px;
	border:1px solid #eeeeee;
	border-radius: 10px;
}
.main_06 .reviewLeft{
	width:420px;
	height:100%;
}
.main_06 .reviewBoard{
	flex:1;
	height:100%;
}
.main_07{
	padding:50px;
	background-color: #f8f8f8;
}
.main_07 .mainWrapper{
	flex-direction: column;
}
.main_07 .mainWrapper > section:first-child{
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 20px;
}
.main_08{
	padding:50px;
}
.main_08 .category > ul{
	list-style: none;
	padding:0;
	margin:0;
}
.main_08 .category > ul > li{
	margin:0 10px;
	padding:5px 10px;
	background-color: #ffffff;
	border:1px solid #f8f8f8;
	font-size: 0.9rem;
	font-weight: 400;
	cursor: pointer;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.2)
}
.main_08 .category > ul > li:hover{
	color:#e0520f;
	background-color: #f8f8f8;
}
.main_08 .items{
	padding:0 30px;
	position: relative;
	height:550px;
}
.main_08 .items .list{
	position: absolute;
	flex-wrap:wrap;
}
.main_08 .items .list > section{
	width:200px;
	height:200px;
	border:1px solid #f8f8f8;
	border-radius: 5px;
	margin:20px 15px 0 15px;
}
.main_09{
	margin:50px 0;
	flex-direction:column;
	height:400px;
	background-image: url(/images/source/footer-banner_01.jpg);
	background-position: center;
	background-size: cover;
	font-size: 5.0rem;
	font-weight:800;
	color:#ffffff;
}
.main_09 > p{
	font-size: 1.5rem;
	font-weight:400;
	color:#ffffff;
}
.main_10{
	padding:50px;
}
.main_10 > section > section{
	width:100%;
	height:400px;
}
.main_10 > section > section > section{
	height:100%;
}
.main_10 > section > section > section:first-child{
	border-right:1px solid #eeeeee;
	margin:0 30px;
}
.main_10 > section > section > section:first-child > section{
	padding:0 20px;
	font-size:2.0rem;
	font-weight: 700;
}
.main_10 > section > section > section:last-child{
	width:100%;
}
.main_10 > section > section > section:last-child > section{
	width:300px;
	border:1px solid #eeeeee;
	border-radius: 10px;
	height:90%;
	margin: 0 30px;
}
.main_10 > section > section > section:last-child > section > section{
	width:90%;
	background-color: rgba(255,255,255,0.8);
	height:40%;
	margin-bottom: 20px;
	border-radius: 10px;
	font-size:2.0rem;
	font-weight: 700;
}

.workImgViewWrapper{
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
}
.workImgViewWrapper .swiper-slide{
	background-color: transparent;
}

.workImgViewWrapper .swiper-pagination-fraction{
	color:#ffffff;
}
.workImgViewWrapper .swiper-slide > section{
	width:400px;
	height:500px;
	margin: 0 auto;
	border-radius: 10px;
	position: relative;
}
.workImgViewWrapper .swiper-slide > section > section.workMsg{
	display:flex;
	justify-content:center;
	align-items:center;
	position: absolute;
	width:95%;
	height:20%;
	background-color: rgba(0, 0, 0, 0.5);
	bottom:10px;
	color:#ffffff;
	border-radius: 10px;
	left:50%;
	transform:translateX(-50%);
}

/*서브메뉴 애니메션*/
.arrow {
	cursor: default;
}

.arrow img {
	transform: rotate(0deg);
	transition: transform 0.5s ease-in-out;
}

.arrow img.rotate {
	transform: rotate(180deg);
}

.submenu {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 30px);
	opacity: 0; /* Initially hidden */
	transition: transform 0.5s, opacity 0.5s;
	visibility: hidden;
	background-color: #ffffff;
	border: 1px solid #eeeeee;
	border-radius: 10px;
	padding: 10px 15px;
	list-style: none;
	cursor: default;
	width:165px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.submenu::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 50%;
	margin-left: -10px;
	border-width: 0 10px 10px 10px;
	border-style: solid;
	border-color: transparent transparent #ffffff transparent;
	z-index: 1;
}

.submenu::after {
	content: '';
	position: absolute;
	top: -11px;
	left: 50%;
	margin-left: -11px;
	border-width: 0 11px 11px 11px;
	border-style: solid;
	border-color: transparent transparent #eeeeee transparent;
	z-index: 0;
}

.submenu>li {
	padding: 0;
	margin: 10px 0;
	position: relative;
	box-sizing: border-box;
	cursor: pointer;
	font-size:0.9rem;
}
.submenu>li:hover{
	color:#e0520f;
}

.submenu>li:before {
	content: "";
	position: absolute;
	width: 0;
	height: 2px;
	background-color: #e0520f;
	left: 50%;
	box-sizing: border-box;
	bottom: -3px;
	transition: width 0.25s ease-in-out, left 0.25s ease-in-out;
}

.submenu>li:hover:before {
	width: 100%;
	left: 0;
}
/*서브메뉴 애니메션*/

/*footer*/
footer{
	padding:50px 0;
	background-color: #000000;
	overflow: hidden;
}
.info{
	display: flex;
	justify-content:center;
	align-items:flex-start;
	padding:0;
	color:#81868a;
	height:100%;
	flex-wrap: wrap;
}

.onActive{
	opacity: 0;
	transform: translateY(100px);
	transition: opacity 1.5s, transform 1.5s;
}

.active {
  opacity: 1;
  transform: translateY(0);
}

.info > section{
	margin:0 15px;
}
.info > section:first-child{
	display:flex;
	justify-content:flex-start;
	align-items:center;
	flex-direction:column;
	height:100%;
	margin-right: 50px;
}
.footerLogo{
	width:200px;
	padding:20px 0;
}
.footerLogo img{
	width:100%;
}
.infoWrapper > section:first-child {
	border-bottom:1px solid #2e2e2e;
	padding:10px 0;
	height:40px;
	font-size: 1.2rem;
	font-weight: 700;
}
.infoWrapper > section:last-child {
	padding:0 0 0 15px;
	font-size: 0.8rem;
}
.infoWrapper > section:last-child > article{
	padding:5px 0;
}
/*footer*/