:root{
	--btnW: 230px;
	--btnH: 70px;
}

/* listBtn */
.listBtn{ width: var(--btnW); height: var(--btnH); display: flex; justify-content: center; align-items: center; background: #FFF; border: 1px solid #111; font-size: 19px; font-weight: 400; color: #111 !important; letter-spacing: -0.02em; margin: 0 auto; transition: background 0.3s, color 0.3s; }
.listBtn i{ width: 17px; height: 18px; display: inline-block; background: url("/img/sub/icon_download.svg") no-repeat center center / contain; margin-right: 15px; transition: filter 0.3s; }

@media screen and (hover: hover) and (pointer: fine){
	.listBtn:hover{ background: #111; color: #FFF !important; }
	.listBtn:hover i{ filter: invert(1); -webkit-filter: invert(1); }
}

@media screen and (max-width: 1700px){
	:root{
		--btnW: 200px;
		--btnH: 60px;
	}

	/* listBtn */
	.listBtn{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	:root{
		--btnW: 150px;
		--btnH: 50px;
	}

	/* listBtn */
	.listBtn{ font-size: 17px; }
}


/* ABOUT MIGUN - MIGUN 건축 */
#about .grid-box{ display: grid; grid-template-columns: calc(100% - 540px) 540px; }
#about .img figure,
#about .img figure img{ width: 100%; height: 100%; }
#about .img figure img{ object-fit: cover; object-position: right; }

#about .text{ padding-left: 60px; }
#about .text .top::after{ content: ""; display: block; height: 1px; background: #CCC; margin: 50px 0; }
#about .text .top h2{ font-size: 24px; font-weight: 600; color: #222; letter-spacing: -0.02em; line-height: 1.5; margin-bottom: 15px; }
#about .text .top p{ font-size: 18px; font-weight: 300; color: #555; letter-spacing: -0.02em; line-height: 1.5; }

#about .text .bottom dl dt{ font-size: 22px; font-weight: 500; color: #222; letter-spacing: -0.02em; line-height: 1.5; margin-bottom: 20px; }
#about .text .bottom dl dd{ font-size: 18px; font-weight: 300; color: #555; letter-spacing: -0.02em: line-height: 1.5; padding-left: 12px; position: relative; }
#about .text .bottom dl dd:not(:last-of-type){ margin-bottom: 6px; }
#about .text .bottom dl dd::before{ content: ""; width: 4px; height: 4px; background: #555; border-radius: 50%; position: absolute; top: calc(1.5em / 2); left: 0; transform: translateY(-50%); }
#about .text .bottom p{ font-size: 16px; font-weight: 300; color: #555; letter-spacing: -0.02em; line-height: 1.5; margin-top: 40px; }

@media screen and (max-width: 1700px){
	#about .text .top::after{ margin: 40px 0; }
	#about .text .top h2{ font-size: 22px; }

	#about .text .bottom dl dt{ font-size: 20px; }
	#about .text .bottom p{ margin-top: 30px; }
}

@media screen and (max-width: 1280px){
	#about .text .top::after{ margin: 30px 0; }
	#about .text .top h2{ font-size: 20px; }
	#about .text .top p{ font-size: 17px; }

	#about .text .bottom dl dt{ font-size: 18px; margin-bottom: 10px; }
	#about .text .bottom dl dd{ font-size: 17px; }
	#about .text .bottom p{ font-size: 15px; margin-top: 20px; }
}

@media screen and (max-width: 1200px){
	#about .grid-box{ grid-template-columns: repeat(1, 100%); }
	#about .text{ padding-left: 0; padding-top: 30px; }
}


/* service */
#service{
	--left: 45px;
}
#service .title{ margin-bottom: 80px; }
#service .title h2{ font-size: 40px; font-weight: 700; color: #111; letter-spacing: -0.02em; }
#service .title p{ font-size: 20px; font-weight: 300; color: #222; letter-spacing: -0.02em; line-height: 1.5; margin-top: 15px; }

#service .grid-box{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -30px -20px; }
#service .item{ margin: 30px 20px; }
#service .item figure,
#service .item figure img{ width: 100%; }
#service .item dl{ margin-top: 30px; padding-left: var(--left); }
#service .item dl dt{ font-size: 18px; font-weight: 300; color: #BBB; letter-spacing: -0.02em; margin-bottom: 15px; }
#service .item dl dt strong{ display: block; font-size: 32px; font-weight: 600; color: #222; margin-bottom: 3px; position: relative; }
#service .item dl dt strong::before{ content: attr(data-idx); width: 26px; height: 26px; background: #212325; border-radius: 50%; font-size: 16px; font-weight: 400; color: #FFF; line-height: 26px; text-align: center; position: absolute; top: 0.5em; left: calc(var(--left) * -1); }
#service .item dl dd p{ font-size: 18px; font-weight: 400; color: #666; letter-spacing: -0.02em; line-height: 1.5; }
#service .item dl dd p::after{ content: ""; display: block; height: 1px; background: #DDD; margin: 20px 0; }
#service .item dl dd ul li{ font-size: 16px; font-weight: 300; color: #666; letter-spacing: -0.02em; padding-left: 10px; position: relative; }
#service .item dl dd ul li:not(:last-of-type){ margin-bottom: 10px; }
#service .item dl dd ul li::before{ content: ""; width: 3px; height: 3px; background: #666; border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

@media screen and (max-width: 1700px){
	#service .title{ margin-bottom: 60px; }
	#service .title h2{ font-size: 36px; }
	#service .title p{ font-size: 18px; }

	#service .item dl dt{ font-size: 17px; }
	#service .item dl dt strong{ font-size: 28px; }
	#service .item dl dt strong::before{ width: 24px; height: 24px; font-size: 15px; line-height: 24px; }
	#service .item dl dt{ font-size: 17px; }
}

@media screen and (max-width: 1400px){
	#service .item br{ display: none; }
}

@media screen and (max-width: 1280px){
	#service{
		--left: 35px;
	}
	#service .title{ margin-bottom: 40px; }
	#service .title h2{ font-size: 32px; }
	#service .title p{ font-size: 17px; margin-top: 10px; }

	#service .grid-box{ margin: -20px -10px; }
	#service .item{ margin: 20px 10px; }
	#service .item dl{ margin-top: 20px; }
	#service .item dl dt{ font-size: 16px; margin-bottom: 10px; }
	#service .item dl dt strong{ font-size: 24px; }
	#service .item dl dt strong::before{ width: 22px; height: 22px; font-size: 14px; line-height: 22px; top: 0.3em; }
	#service .item dl dt{ font-size: 16px; }
	#service .item dl dd p{ font-size: 17px; }
	#service .item dl dd p::after{ margin: 15px 0; }
}

@media screen and (max-width: 1100px){
	#service .grid-box{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 900px){
	#service{
		--left: 30px;
	}
	#service .title h2{ font-size: 26px; }

	#service .item dl dt{ font-size: 15px; }
	#service .item dl dt strong{ font-size: 22px; }
	#service .item dl dt strong::before{ width: 20px; height: 20px; font-size: 13px; line-height: 20px;  top: 0.35em; }
}

@media screen and (max-width: 700px){
	#service .grid-box{ grid-template-columns: repeat(1, 100%); }
}

@media screen and (max-width: 600px){
	#service .title br{ display: none; }
}


/* CONTACT */
#contact h3{ font-size: 40px; font-weight: 700; color: #222; letter-spacing: -0.02em; margin-bottom: 80px; }
#contact .flex-box{ display: flex; }
#contact .text{ width: 570px; display: flex; flex-direction: column; padding-right: 120px; }
#contact .iframe{ width: calc(100% - 570px); min-height: 500px; overflow: hidden; filter: grayscale(1); -webkit-filter: grayscale(1); }

#contact address{ flex: 1 0 auto; }
#contact address dl{ font-family: var(--engFont); font-size: 20px; color: #222; letter-spacing: -0.02em; margin-bottom: 30px; }
#contact address dl dt{ font-weight: 700; margin-bottom: 10px; position: relative; padding-left: 40px; }
#contact address dl dt::before{ content: ""; width: 26px; height: 26px; background: #222 var(--url) no-repeat center center / contain; border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }
#contact address dl dd{ font-weight: 300; }

#contact address dl dt.add::before{ --url: url("/img/sub/contact/icon_add.svg"); }
#contact address dl dt.tel::before{ --url: url("/img/sub/contact/icon_tel.svg"); }
#contact address dl dt.fax::before{ --url: url("/img/sub/contact/icon_fax.svg"); }
#contact address dl dt.mail::before{ --url: url("/img/sub/contact/icon_mail.svg"); }

#contact .listBtn{ width: 100%; }

#contact .iframe .root_daum_roughmap{ width: 100%; height: 100%; }
#contact .iframe .root_daum_roughmap .wrap_map{ height: 100%; }
#contact .iframe .root_daum_roughmap .map_border{ display: none; }

@media screen and (max-width: 1700px){
	#contact h3{ font-size: 36px; margin-bottom: 60px; }

	#contact .text{ width: 500px; padding-right: 100px; }
	#contact .iframe{ width: calc(100% - 500px); min-height: 450px; }

	#contact address dl{ font-size: 18px; margin-bottom: 25px; }
	#contact address dl dt{ padding-left: 35px; }
	#contact address dl dt::before{ width: 24px; height: 24px; }
}

@media screen and (max-width: 1280px){
	#contact h3{ font-size: 32px; margin-bottom: 30px; }

	#contact .text{ width: 450px; padding-right: 70px; }
	#contact .iframe{ width: calc(100% - 450px); min-height: 400px; }

	#contact address dl{ font-size: 17px; }
}

@media screen and (max-width: 1000px){
	#contact .flex-box{ flex-direction: column-reverse; }
	#contact .text{ width: 100%; padding-right: 0; padding-top: 30px; }
	#contact .iframe{ width: 100%; min-height: 350px; height: 350px; }

	#contact address{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); }
	#contact address dl:nth-of-type(1){ grid-column: auto / span 3; }

	#contact .listBtn{ margin-top: 10px; }
}

@media screen and (max-width: 900px){
	#contact h3{ font-size: 28px; margin-bottom: 20px; }
}