@charset "utf-8";

/* 
 * content CSS Document
 *
 */

header{ color: #fff; }
header .logo-img{ fill: currentColor; }
#content {min-height: 300rem; padding-top: 110rem;}

/* sub visual */
.sub-visual{position:relative; overflow:hidden; height:550rem; box-sizing:border-box; text-align: center;}
.sub-visual > .inr{padding-top:200rem;}
.sub-visual h2{font-size: 55rem; font-weight:700; color: #fff;}
.sub-visual[data-sublayout] .sub-vusla__bg{background-image:url(../images/content/sub-visual-01.jpg);}
.sub-visual[data-sublayout="about"] .sub-vusla__bg{background-image:url(../images/content/sub-visual-01.jpg);}
.sub-visual[data-sublayout="business"] .sub-vusla__bg{background-image:url(../images/content/sub-visual-02.jpg);}
.sub-visual[data-sublayout="gallery"] .sub-vusla__bg{background-image:url(../images/content/sub-visual-03.jpg);}
.sub-visual[data-sublayout="customer"] .sub-vusla__bg{background-image:url(../images/content/sub-visual-04.jpg);}
.sub-visual .sub-vusla__bg{position:absolute;opacity:1 !important;top:0;left:0;z-index:-1;width:100%;height:100%;box-sizing:border-box;background-size: cover;background-position: 50% 50%;}

/* sub-title */
.sub-title {margin-bottom: 50rem; text-align: center;}
.sub-title small {display: block; font-size: var(--fs17); font-weight:600; color: #bdbdbd; letter-spacing: 0.5rem; margin-top: 10rem;}
.sub-title h2 {font-size: var(--fs45); font-weight: 800;}
.ssTit {display: flex; align-items: center;gap: 10rem; font-size: var(--fs25); font-weight: 700; margin-bottom: 20rem;}
.xi-check-square {color: #006cd1;}

/* page navigation */
.sub-navigation{margin-top:30rem; }
.sub-navigation ul {display:flex; align-items: center; gap: 60rem; justify-content: center;  overflow:hidden;}
.sub-navigation ul li{position:relative; line-height:1; font-size: 17rem; font-weight:300; color:#fff;}
.sub-navigation ul li img{height:16rem; vertical-align: top;}
.sub-navigation ul li i{display:none;}
.sub-navigation ul li::after{content:""; position:absolute; top:50%; left:-30rem; transform: translateY(-50%); width:7rem; height:11rem; background:url(../images/common/ic-nav-arrow_w.png) no-repeat; background-size: contain; opacity: 0.7;}
.sub-navigation ul li:first-child{padding:0;}
.sub-navigation ul li:first-child:after{opacity:0;}

@media (max-width:1023px){
    .sub-visual{height:550rem;}
	.sub-visual h2{ font-size:45rem;}
}

@media (max-width:767px){
	.sub-navigation{margin-top: 20rem;}
	.sub-navigation ul {gap: 30rem;}
	.sub-navigation ul li {font-size: 15rem;}
	.sub-navigation ul li::after {width: 6rem; height: 10rem; left: -15rem;}
}
@media (max-width:540px){
    .sub-visual{height:450rem;}
	.sub-visual h2{font-family:'Pretendard'; font-weight:700; font-size:40rem;}
	.sub-navigation ul li{padding:0 12rem; font-size:var(--fs17);}
	.sub-navigation ul li img{height:13rem;}
	.sub-navigation ul li:nth-child(2):after{top:3rem; right:-4rem; width:8rem; height:11rem;}
    .sub-visual[data-sublayout="about"] .sub-vusla__bg {background-position: right 35% center;}
    .sub-visual[data-sublayout="about"] .sub-vusla__bg::before {opacity: .1; position: absolute; left: 0; top: 0; content:''; width: 100%; height: 100%; background:#000;}
    .sub-visual[data-sublayout="business"] .sub-vusla__bg::before {opacity: .1; position: absolute; left: 0; top: 0; content:''; width: 100%; height: 100%; background:#000;}
	.sub-visual > .inr{padding-top:170rem;}
}


/* form active */
.cus_design{max-width:400rem;}
.cus_design > ul > li{display:block; position:relative; margin:3rem 0px;}
.cus_design input[type="text"]{width:100%; height:45rem;}
.cus_design select{width:100%; height:45rem;}
.cus_design label{position:absolute; left:10px; top:50%; width:90%; box-sizing:border-box; padding:0 5rem; background:#fff; transform:translateY(-50%);}
.cus_design .in label{color:#1637a2;}
.cus_design .active label{top:10%; width:auto; font-size:11rem;}
.cus_design [data-form-design="select"] label{top:10%; width:auto; font-size:12rem; font-weight:500;}

/* lnb */
.area_lnb {position: absolute; left: 0; bottom: 0; width: 100%; z-index: 1; background: rgba(255, 255, 255, 0.15);}
.area_lnb .lnb {height: 100%; max-width: 1500rem; margin: 0 auto;}
.area_lnb .lnb ul {display: flex; height: 100%; align-items: center; justify-content: center;}
.area_lnb .lnb ul li {height: 80rem; text-align: center;}
.area_lnb .lnb ul li a {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 70rem; font-size: var(--fs18); font-weight: 400; color: #fff;}
.area_lnb .lnb ul li a.on {opacity: 1; background: #fff; color: #111; font-weight: 600;}
.dot-list dd {padding-left: 15rem; position: relative;}
.dot-list dd::before {content: ''; position: absolute; top: 9rem; left: 0; width: 4rem; height: 4rem; border-radius: 50%; background: #bdbdbd;}
.dot-list dd + dd {margin-top: 7rem;}
.num-list dd {padding-left:30rem; position: relative; counter-increment: list-number;}
.num-list dd::before {content:counter(list-number); position: absolute; top: 3rem; left: 0; width: 18rem; height: 18rem; font-size: 10rem; font-weight: 600; text-align: center; line-height: 18rem; border-radius: 50%; color: #fff; background: #222;}
.num-list dd + dd {margin-top: 7rem;}
em.mark {color: #e9372a;}

@media (max-width:767px){
	#content { padding-top: 65rem;}
	.area_lnb .lnb {overflow: auto clip; white-space: nowrap;}
	.area_lnb.full .lnb ul {justify-content: flex-start;}
	.area_lnb .lnb ul li a {padding: 0 30rem;}
	.area_lnb .lnb ul li {height: 58rem;}
	.num-list dd {font-size: 15rem; padding-left:25rem}
	.num-list dd::before{top: 4rem;}
	.dot-list dd {font-size: 15rem; padding-left: 10rem;}
	.dot-list dd::before {width: 3rem; height: 3rem;}
	.dot-list dd + dd {margin-top: 5rem;}
}



/* greeting - 인사말 */
[data-sub="greeting"] {position: relative; padding-bottom: 100rem;}
[data-sub="greeting"]::after, [data-sub="greeting"]::before {content: ''; position: absolute; bottom: 0}
[data-sub="greeting"]::after {left: 0; width: 100%; height: 40%; background: #f2f2f2; z-index: -5;}
[data-sub="greeting"]::before {right: 80rem; width: 600rem; height: 580rem; background: url(../images/content/greeting01.png) no-repeat; background-size: cover;}
[data-sub="greeting"] .img {display: none;}
[data-sub="greeting"] .txt {width: 65%; padding-right: 50rem;}
[data-sub="greeting"] .txt h3 {font-size: var(--fs35); font-weight:700; margin-bottom: 30rem;}
[data-sub="greeting"] .txt h3 span {display: block; font-size: var(--fs17); font-weight: 700; color: var(--primary); margin-bottom: 20rem;}
[data-sub="greeting"] .txt dd {font-size: var(--fs18); line-height: 1.7; font-weight: 300;}
[data-sub="greeting"] .txt dd+dd {margin-top: 30rem;}
[data-sub="greeting"] .txt dd.ceo {margin-top: 40rem; display: flex;  align-items: center; gap:15rem; font-size: var(--fs20); font-weight: 500;}
[data-sub="greeting"] .txt dd.ceo .sign {font-family: var(--font-roe); font-size: var(--fs28); font-weight: 400;}

/* location - 오시는길 */
[data-sub="location"] {padding-bottom: 100rem;}
[data-sub="location"] .mapImg {height: 550rem; border: 1rem solid rgba(0, 0, 0, 0.1); overflow: hidden;}
[data-sub="location"] .mapBtn { display: flex; align-items: center; justify-content: center; gap: 12rem; width: 100%; padding: 20rem 20rem; font-size: var(--fs17);; font-weight: 300; box-sizing: border-box; background: #222; color: #fff; }
[data-sub="location"] .mapBtn i {font-size: var(--fs17);;}
[data-sub="location"] .mapBtn:hover {background: #222;}
[data-sub="location"] .mapImg .map {width: 100%; height: 100%; }
[data-sub="location"] .mapInfo {margin-top: 30rem;}
[data-sub="location"] .mapInfo li {display: flex; align-items: center; font-size: var(--fs18); line-height: 1.8; padding: 20rem 10rem; border-bottom: 1rem dotted #ddd;}
[data-sub="location"] .mapInfo strong {display: flex; align-items: center; gap: 25rem; width: 160rem; font-weight: 600;}
[data-sub="location"] .mapInfo p {color: #555;}
[data-sub="location"] .mapInfo strong i {font-size: 20rem;}

@media (max-width:1280px){
	[data-sub="greeting"] .txt {width: 70%; padding-right: 50rem;} 
	[data-sub="greeting"]::before {right: 0; width: 400rem; height: 380rem;}
}

@media (max-width:767px){
	[data-sub="greeting"] {padding-bottom: 65rem;}
	[data-sub="greeting"]::after {display: none;}
	[data-sub="greeting"] .txt {width: 100%; padding-right: 0} 
	[data-sub="greeting"] .txt h3 span {margin-bottom: 15rem;}
	[data-sub="greeting"]::before {display: none;}
	[data-sub="greeting"] .txt dd+dd {margin-top: 20rem;}
	[data-sub="greeting"] .txt dd.ceo {margin-top: 30rem;}
	[data-sub="location"] .mapImg {height: 400rem;}
	[data-sub="location"] .mapBtn {padding: 15rem;}
	[data-sub="location"] .mapInfo {margin-top: 10rem;}
	[data-sub="location"] .mapInfo strong {gap: 10rem; margin-bottom: 15rem;}
	[data-sub="location"] .mapInfo li {flex-direction: column; align-items: flex-start;}
}

/* history - 회사연혁 */
[data-sub="history"] {padding-bottom: 100rem;}
[data-sub="history"] .history { --space: clamp(40rem, calc(98 / var(--inr) * 100vw), 98rem); }
[data-sub="history"] .history .list { position: relative; display: grid; gap: 74rem; }
[data-sub="history"] .history .part { display: grid; gap: 40rem calc(var(--space) * 2); }
[data-sub="history"] .history .img { position: sticky; top: 40rem; display: block; max-width: 100%; width: 400rem; height: auto; }
[data-sub="history"] .history .event-list { margin-top: 30rem; display: grid; gap: 14rem; }
[data-sub="history"] .history .event-list > li { display: grid; grid-template-columns: 7ch 1fr; gap: 2.8ch; }
[data-sub="history"] .history .year {position: relative;display: flex;align-items: center;gap: 10rem;font: 32rem var(--font-pre);color: var(--primary); font-weight: 700;}
[data-sub="history"] .history .year::before {--p: 27%;content: '';display: block;width: 1.09375em;aspect-ratio: 1;background: radial-gradient(var(--primary) var(--p), color-mix(in srgb, var(--primary) 20%, #0000) calc(var(--p) + 1px));border-radius: 50%;}
[data-sub="history"] .history .date {font: 500 var(--fs18) var(--font-pre);color: #373737;display: flex;width: 100%;flex-wrap: nowrap;justify-content: space-between;}
[data-sub="history"] .history .event { font-size: var(--fs18); color: #696969; }

@media (min-width: 768px) {
 	[data-sub="history"] .history .list::before {content: '';position: absolute;inset: 20rem 50%;border-left: 1px solid color-mix(in srgb, #999 20%, #0000);}
	[data-sub="history"] .history .part { grid-template-columns: repeat(2, 1fr); }
	[data-sub="history"] .history .part:nth-child(odd) .img-group { justify-self: end; }
	[data-sub="history"] .history .part:nth-child(even) { text-align: right; }
	[data-sub="history"] .history .part:nth-child(even) .img-group { order: 2; }
	[data-sub="history"] .history .part:nth-child(even) .year { justify-content: end; }
	[data-sub="history"] .history .part:nth-child(even) .year::before { left: auto; right: calc(var(--space) * -1); translate: 50% -50%; }
	[data-sub="history"] .history .part:nth-child(even) .event-list > li { grid-template-columns: 1fr 6ch; }
	[data-sub="history"] .history .part:nth-child(even) .date { order: 2; }
	[data-sub="history"] .history .img-group { margin-top: 6rem; }
	[data-sub="history"] .history .year::before {position: absolute;top: .75em;left: calc(var(--space) * -1);translate: -50% -50%;}
}

/* organization - 조직도 */
[data-sub="organization"] { padding-bottom: 100rem; }
[data-sub="organization"] .org { position: relative; display: flex; flex-direction: column; width: fit-content; margin: 0 auto; }
[data-sub="organization"] .org .g3 {position: relative;display: grid;grid-template-columns: repeat(3, 1fr);gap: 60rem;margin-bottom: 30rem;font-size: var(--fs18);}
[data-sub="organization"] .org .g3 .circle { position: relative; display: flex; flex-direction: column; gap: 30rem; }
[data-sub="organization"] .org .g3 .circle span {position: relative;width: 150rem;height: auto;aspect-ratio: 1/1;display: flex;justify-content: center;align-items: center;flex-direction: column;background: var(--primary);color: #fff;border-radius: 50%;}
[data-sub="organization"] .org .g3.top .circle span { background: #222; }
[data-sub="organization"] .org .g3 .circle .botlist { display: flex; flex-direction: column; gap: 10rem; }
[data-sub="organization"] .org .g3 .circle .botlist li {display: flex;flex-direction: column;align-items: center;padding: 10rem 0;border: 1rem solid #ddd;width: 100%;background: #fafafa;}
[data-sub="organization"] .org .g3 .circle span::after { content: ''; display: block; position: absolute; width: 1rem; height: 30rem; background: #ddd; left: 50%; transform: translateX(-50%); bottom: -30rem; }
[data-sub="organization"] .org .g3.bot { margin-top: 30rem; }
[data-sub="organization"] .org .g3.bot::before {content: '';display: block;position: absolute;height: 1rem;width: 420rem;background: #ddd;top: -30rem;left: 50%;transform: translateX(-50%);}
[data-sub="organization"] .org .g3.bot .circle span { background: #fff; color: #111; border: 1rem solid var(--primary); }
[data-sub="organization"] .org .g3.bot .circle span::before { content: ''; position: absolute; width: 1rem; height: 30rem; background: #ddd; top: -30rem; right: 50%; z-index: -1; transform: translateX(-50%); }

@media (max-width: 767px) {
	[data-sub="organization"] .org .g3 { gap: 20rem; }
	[data-sub="organization"] .org .g3 .circle span { width: 110rem; }
	[data-sub="organization"] .org .g3.bot::before { width: 260rem; }
}

/* 사업분야 공통분야 */
.business {padding-bottom: 100rem;}
.business .sub-con {margin-top: 70rem;}
.business .sub-con p {font-size: var(--fs18); line-height: 1.8; color: #555;}
.business .table table {border: 1rem solid #ddd; border-top: 1px solid #111;}
.business .table th, td {padding: 15rem 10rem; text-align: center; border-bottom: 1rem dotted #ddd; border-left: 1rem dotted #ddd;}
.business .table tr td:first-child {border-left: 0;}
.business .table tr th:first-child {border-left: 0;}
.business .table th {background: #f2f2f2;}
.business .table td {color: #555;}
.business h5 {font-size: var(--fs20); font-weight: 700; margin-bottom: 20rem;}

/* business01 - RPS 태양광 발전사업 */
[data-sub="business01"] .buImg {background: center / cover no-repeat url("../images/content/bu01.jpg"); height: auto; padding-top: 500rem; background-attachment: fixed;}
[data-sub="business01"] .note {color: #555; margin-top: 20rem;}
[data-sub="business01"] .note li + li {margin-top: 7rem;}
[data-sub="business01"] .sub-con .list p {font-size: var(--fs17); padding: 12rem 20rem; box-sizing: border-box; background: #006cd1; border: 1rem solid #006cd1; color: #fff;}
[data-sub="business01"] .sub-con .list {text-align: center;}
[data-sub="business01"] .sub-con .list dl {border: 1rem solid #ddd; border-top: 0;}
[data-sub="business01"] .sub-con .list dd {padding: 12rem 20rem; color: #555; box-sizing: border-box; border-bottom: 1rem dotted #ddd;}
[data-sub="business01"] .sub-con .list dd:last-child {border-bottom: 0;}
[data-sub="business01"] .sub-con.s4 .img {width: 100%; text-align: center;border: 1rem solid #ddd; padding: 40rem 20rem; box-sizing: border-box;}
[data-sub="business01"] .sub-con.s4 .img img {max-width: 100%; object-fit: contain;}
[data-sub="business01"] .sub-con.s5 .list {display: grid; grid-template-columns: repeat(3,1fr); gap: 20rem;}
[data-sub="business01"] .sub-con.s6 .note {display: flex; align-items: center; gap: 20rem;}
[data-sub="business01"] .sub-con.s6 .note li {margin-top: 0;}
[data-sub="business01"] .sub-con.s6 .box > div {display: flex; align-items: center; gap: 10rem; margin: 30rem 0;}
[data-sub="business01"] .sub-con.s6 .box .ico {display: flex; align-items: center; justify-content: center; margin: 0 20rem; width: 30rem;height: 30rem; background: #111; color: #fff; font-size: 15rem; font-weight: 500; border-radius: 50%; font-style: normal;}
[data-sub="business01"] .sub-con.s6 .box .xi-close-min {margin: 0 8rem;}
[data-sub="business01"] .sub-con.s6 .box span {display: flex; font-size: var(--fs17);; align-items: center; padding: 15rem 50rem; box-sizing: border-box; background: #006cd1; color: #fff;}
[data-sub="business01"] .sub-con.s6 .box span.b2 {background: #ce2115;}
[data-sub="business01"] .sub-con.s6 .box span.b3 {background: #034da2}
[data-sub="business01"] .sub-con.s7 .box {display: grid; grid-template-columns: 2fr 1fr; gap: 40rem;}
[data-sub="business01"] .sub-con.s7 .box > div:nth-child(2) .img {width: 100%; padding: 18rem 0; text-align: center; box-sizing: border-box; border: 1rem solid #ddd;}
[data-sub="business01"] .sub-con.s7 .box > div:nth-child(2) .img img {max-width: 100%; max-height: 240rem; object-fit: contain;}
[data-sub="business01"] .sub-con.s7 h5 {font-size: var(--fs20); font-weight: 700; margin-bottom: 20rem;}
[data-sub="business01"] .sub-con.s8 .list {display: grid; grid-template-columns: repeat(4,1fr); gap: 20rem;}

/* business02 - 지붕 태양광 임대사업 */
[data-sub="business02"] .buImg {background: center / cover no-repeat url("../images/content/bu02.jpg"); height: auto; padding-top: 500rem; background-attachment: fixed;}
[data-sub="business02"] .sub-con.s1 .box {display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid #111;}
[data-sub="business02"] .sub-con.s1 dl {display: flex; align-items: center; border-bottom: 1rem dotted #ddd;}
[data-sub="business02"] .sub-con.s1 dl:nth-child(n+3) {border-bottom: 1rem solid #ddd;}
[data-sub="business02"] .sub-con.s1 dt {width: 25%; font-size:var(--fs17); font-weight: 600; padding:18rem 20rem; text-align: center; background: #f2f2f2; border-right: 1rem dotted #ddd;}
[data-sub="business02"] .sub-con.s1 dd { color: #555; padding: 18rem 0 18rem 25rem;}
[data-sub="business02"] .sub-con.s2 .img {border: 1rem solid #ddd; padding: 40rem 20rem; box-sizing: border-box; text-align: center;}
[data-sub="business02"] .sub-con.s2 .img img {width: 100%; max-width:1000rem; object-fit: contain;}
[data-sub="business02"] .sub-con.s3 .list {display: grid; justify-items: center; grid-template-columns: repeat(3,1fr); gap: 50rem; margin-top: 30rem; text-align: center;}
[data-sub="business02"] .sub-con.s3 .circle {position: relative; display: flex; align-items: center; justify-content: center; width: 220rem; height: 220rem; background: rgba(0, 108, 209, 0.07); border-radius: 50%;  box-sizing: border-box; margin: 0 auto;}
[data-sub="business02"] .sub-con.s3 .circle::before {content: ''; position: absolute; top: 50%; left: -160rem;  transform: translateY(-50%); width:65rem; height: 45rem; background: url(../images/content/ico_arrow.png) no-repeat; opacity: 0.8; background-size: contain; background-position: 50% 50%;} 
[data-sub="business02"] .sub-con.s3 .list li:nth-child(1) .circle::before {display: none;}
[data-sub="business02"] .sub-con.s3 .circle p {display: flex; align-items: center; justify-content: center; width: 150rem; height: 150rem; background: #006cd1; border-radius: 50%; box-shadow: 0px 5px 10px 20px rgba(0, 108, 209, 0.12); color: #fff; font-weight: 600;}
[data-sub="business02"] .sub-con.s3 dl {margin-top: 25rem;}
[data-sub="business02"] .sub-con.s3 dt {font-size: var(--fs18); font-weight: 600; margin-bottom: 15rem;}
[data-sub="business02"] .sub-con.s3 dd {display: flex; justify-content: center; flex-wrap: wrap; align-items: center;}
[data-sub="business02"] .sub-con.s3 dd i {font-size: 13rem; font-weight: 600; margin: 0 10rem; color: #bdbdbd;}
[data-sub="business02"] .sub-con.s4 .table {margin-top: 30rem;}
[data-sub="business02"] .sub-con.s5 .list {display: grid; grid-template-columns: repeat(4,1fr); gap: 15rem;}
[data-sub="business02"] .sub-con.s5 .list p {font-size:var(--fs18); font-weight: 600; display: flex; justify-content: center; align-items: center; gap: 8rem; color: #111; padding-bottom:18rem; border-bottom: 1rem dotted #ddd;}
[data-sub="business02"] .sub-con.s5 .num {font-weight: 800; color: var(--primary);}
[data-sub="business02"] .sub-con.s5 .list li {padding: 18rem 20rem 20rem 20rem; box-sizing: border-box; border: 1rem solid #e5e5e5; }
[data-sub="business02"] .sub-con.s5 .list dd {color: #555;}
[data-sub="business02"] .sub-con.s5 .list dl {padding: 20rem 10rem 0;}
[data-sub="business02"] .sub-con.s6 .list {display: grid; grid-template-columns: repeat(3,1fr); gap: 20rem; text-align: center;}
[data-sub="business02"] .sub-con.s6 .list p {font-size: var(--fs17); padding: 12rem 20rem; box-sizing: border-box; background: #006cd1; border: 1rem solid #006cd1; color: #fff;}
[data-sub="business02"] .sub-con.s6 .list dl {border: 1rem solid #ddd; border-top: 0;}
[data-sub="business02"] .sub-con.s6 .list dd {padding: 12rem 20rem; color: #555; box-sizing: border-box; border-bottom: 1rem dotted #ddd;}
[data-sub="business02"] .sub-con.s6 .list b {display: block; font-weight: 600; color: var(--primary)}
[data-sub="business02"] .sub-con.s6 .list dd:last-child {border-bottom: 0;}
[data-sub="business02"] .sub-con.s6 .note {margin-top: 20rem;color: #555;}
[data-sub="business02"] .sub-con.s6 .note li + li {margin-top: 7rem;}

/* business03 - 지붕 태양광 임대사업 */
[data-sub="business03"] .buImg {background: center / cover no-repeat url("../images/content/bu03.jpg"); height: auto; padding-top: 500rem; background-attachment: fixed;}
[data-sub="business03"] .sub-con.s3 .list {display: grid; grid-template-columns: repeat(4,1fr); gap: 30rem 65rem; text-align: center; margin-top: 30rem;}
[data-sub="business03"] .sub-con.s3 .list li {position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 15rem; padding: 30rem 20rem; box-sizing: border-box; border: 1rem solid #e5e5e5;}
[data-sub="business03"] .sub-con.s3 .list li::before {content: ''; position: absolute; top: 50%; left: -51rem; transform: translateY(-50%); width:34rem; height: 26rem; background: url(../images/content/ico_arrow.png) no-repeat; background-size: contain; background-position: 50% 50%;}
[data-sub="business03"] .sub-con.s3 .list li:nth-of-type(1)::before {display: none;}
[data-sub="business03"] .sub-con.s3 .list li:nth-of-type(5)::before {display: none;}
[data-sub="business03"] .sub-con.s3 .num {display: inline-block; max-width: 95rem; font-size: 14rem; padding: 6rem 16rem; font-weight: 600; background: var(--primary); color: #fff; border-radius: 30rem;}
[data-sub="business03"] .sub-con.s3 dt {font-size: var(--fs18); font-weight: 700; }
[data-sub="business03"] .sub-con.s3 dd {color: #555;}
[data-sub="business03"] .sub-con.s4 .box {text-align: center;}
[data-sub="business03"] .sub-con.s4 .box div { display: flex; align-items: center; justify-content: center; padding: 30rem; box-sizing: border-box; border: 2px dotted #ddd; text-align: center; font-size: var(--fs22); font-weight: 500;}
[data-sub="business03"] .sub-con.s4 .box .ico {display: flex; align-items: center;justify-content: center; margin: 0 20rem; width: 28rem; height: 28rem; background: #111;color: #fff; font-size: 15rem; font-weight: 500;border-radius: 50%; font-style: normal;}
[data-sub="business03"] .sub-con.s4 .box em {display: block; color: #555; margin-top: 20rem;}

/* business04 - 전기공사 */
[data-sub="business04"] .buImg {background: center / cover no-repeat url("../images/content/bu04.jpg"); height: auto; padding-top: 500rem; background-attachment: fixed;}
[data-sub="business04"] .sub-con.s1 .box {display: grid; grid-template-columns: repeat(4,1fr); gap: 10rem; margin-top: 30rem;}
[data-sub="business04"] .sub-con.s1 .box .img {width: 100%;}
[data-sub="business04"] .sub-con.s1 .box .img img {width: 100%; max-width: 100%; object-fit: cover;}
[data-sub="business04"] .sub-con.s2 .list {display: grid; grid-template-columns: repeat(4,1fr); justify-items: center; text-align: center; padding: 60rem 0; box-sizing: border-box; border: 1rem solid #e5e5e5;}
[data-sub="business04"] .sub-con.s2 .icon {display: flex; align-items: center; justify-content: center; width: 130rem; height:130rem; border-radius: 50%; background: #f2f2f2; margin: 0 auto 30rem auto;}
[data-sub="business04"] .sub-con.s2 .icon img {max-height: 100%; height: 55rem; object-fit: contain;}
[data-sub="business04"] .sub-con.s2 .info p {color: #111; font-size: var(--fs18); font-weight: 700; margin-bottom: 15rem;}
[data-sub="business04"] .sub-con.s2 .info .en {display: block; color: #bdbdbd; font-size: 15rem; font-weight: 600; margin-bottom: 8rem;}
[data-sub="business04"] .sub-con.s2 .info dl {display: flex; flex-direction: column; align-items: center;}


@media (max-width:1279px){
	[data-sub="business02"] .sub-con.s3 .circle::before {width: 60rem; height: 40rem; left: -80rem;}
}

@media (max-width:767px){
	.ssTit {gap: 8rem; margin-bottom: 15rem;}
	.business {padding-bottom: 65rem;}
	.business .sub-con {margin-top: 45rem;}
	.business .sub-con p {line-height: 1.5;}
	.scrollTable table {width: 767rem;}
	.business table th, td {padding: 12rem 10rem; font-size: 15rem;}
	[data-sub="business01"] .buImg {padding-top: 400rem; background-attachment: inherit;}
	[data-sub="business01"] .sub-con.s4 .img {padding: 20rem;}
	[data-sub="business01"] .sub-con.s5 .list {grid-template-columns: repeat(1,1fr);}
	[data-sub="business01"] .sub-con.s6 .box > div {flex-direction: column;}
	[data-sub="business01"] .sub-con.s6 .box span {width: 100%; justify-content: center;}
	[data-sub="business01"] .sub-con.s6 .box .ico {width: 25rem; height: 25rem;}
	[data-sub="business01"] .sub-con.s6 .note {flex-wrap: wrap; gap: 10rem; margin-top: 15rem;}
	[data-sub="business01"] .sub-con.s7 h5 {margin-bottom: 15rem;}
	[data-sub="business01"] .sub-con.s7 .box {display: inherit;}
	[data-sub="business01"] .sub-con.s7 .box > div:last-child {margin-top: 30rem;}
	[data-sub="business01"] .sub-con.s8 .list {grid-template-columns: repeat(1,1fr)}
	[data-sub="business02"] .buImg {padding-top: 400rem; background-attachment: inherit;}
	[data-sub="business02"] .sub-con.s1 .box {grid-template-columns: repeat(1,1fr);}
	[data-sub="business02"] .sub-con.s1 dt {width: 25%; height: 100%; display: flex; justify-content: center;  align-items: center; padding: 15rem 20rem;}
	[data-sub="business02"] .sub-con.s1 dd {width: 75%; padding: 15rem 0 15rem 15rem;}
	[data-sub="business02"] .sub-con.s2 .img {padding: 20rem;}
	[data-sub="business02"] .sub-con.s3 .list {grid-template-columns: repeat(1,1fr); gap: 70rem;}
	[data-sub="business02"] .sub-con.s3 .circle {width: 190rem; height: 190rem;}
	[data-sub="business02"] .sub-con.s3 .circle p {width: 130rem; height: 130rem;}
	[data-sub="business02"] .sub-con.s3 .circle::before {left: 50%; top: -50rem; transform: translateX(-50%) rotate(90deg); width: 30rem; height: 30rem;}
	[data-sub="business02"] .sub-con.s3 dl {margin-top: 20rem;}
	[data-sub="business02"] .sub-con.s3 dd {font-size: 15rem;}
	[data-sub="business02"] .sub-con.s5 .list {grid-template-columns: repeat(1,1fr);}
	[data-sub="business02"] .sub-con.s6 .list {grid-template-columns: repeat(1,1fr);}
	[data-sub="business03"] .buImg {padding-top: 400rem; background-attachment: inherit;}
	[data-sub="business03"] .sub-con.s3 .list {display: flex; flex-wrap: wrap; gap: 10rem; margin-top: 20rem;}
	[data-sub="business03"] .sub-con.s3 .list li {width: 48.5%; gap: 10rem; padding: 20rem;}
	[data-sub="business03"] .sub-con.s3 .list dd {font-size: 14rem;}
	[data-sub="business03"] .sub-con.s3 .list li:last-child {width: 100%;}
	[data-sub="business03"] .sub-con.s3 .list li::before {display: none;}
	[data-sub="business03"] .sub-con.s3 .num {font-size: 13rem; font-weight: 400; padding: 5rem 12rem;}
	[data-sub="business03"] .sub-con.s4 .box div {flex-direction: column; gap: 12rem; padding: 20rem; font-size: 15rem;}
	[data-sub="business03"] .sub-con.s4 .box .ico {width: 22rem; height: 22rem; font-size: 14rem;}
	[data-sub="business03"] .sub-con.s4 .box em {text-align: left;}
	[data-sub="business04"] .buImg {padding-top: 400rem; background-attachment: inherit;}
	[data-sub="business04"] .sub-con.s1 .box {grid-template-columns: repeat(2,1fr); gap: 6rem;}
	[data-sub="business04"] .sub-con.s2 .list { grid-template-columns: repeat(2,1fr); gap: 30rem 10rem; padding: 0; border: 0;}
	[data-sub="business04"] .sub-con.s2 .icon {width: 100rem; height: 100rem; margin: 0 auto 20rem auto;}
	[data-sub="business04"] .sub-con.s2 .icon img {height: 35rem;}
	[data-sub="business04"] .sub-con.s2 .info p {margin-bottom: 10rem;}
}

/* 갤러리 */
[data-sub="gallery"] {padding-bottom: 100rem;}

@media (max-width:767px){
	[data-sub="gallery"] {padding-bottom:65rem;}
}

/* 고객센터 공통 */
[data-sub="contact"] {padding-bottom: 100rem;}

/* online - 문의하기 */
[data-sub="online"] {padding-bottom: 100rem;}
[data-sub="online"] .sub-cont {max-width: 1200rem; margin: 0 auto;}
[data-sub="online"] form { font-size: var(--fs17); color: #777; padding: 15rem 0; box-sizing: border-box; border-top: 1rem solid #111; border-bottom: 1rem solid #111;}
[data-sub="online"] form label {font-size: var(--fs18); color: #111; font-weight: 500;}
[data-sub="online"] .fieldset-box {display: flex; gap:10rem; align-items: center; border: 0; max-width:100%}
[data-sub="online"] input[type="text"] {width: 100%; height: 60rem; border: 1rem solid #ddd; border-radius: 6rem; padding: 10rem 15rem}
[data-sub="online"] input[type="tel"] {width: 33.333%;}
[data-sub="online"] textarea {width: 100%; height: 250rem; border-radius:6rem; padding:20rem; box-sizing: border-box;}
[data-sub="online"] select {min-width: 200rem; width: 100%; height: 60rem;  border: 1rem solid #ddd; border-radius: 6rem; padding: 10rem 15rem;background-position: calc(100% - 15rem) 50%;}
[data-sub="online"] form label .marking {overflow: visible; margin: -10rem 5rem 0;}
[data-sub="online"] .online-table th {text-align: left; padding-left: 10rem;}
[data-sub="online"] .online-table th, .online-table td {border-left: 0; border-bottom: 0;}
[data-sub="online"] .online-table tbody tr {border-bottom: 1rem dotted #ddd;}
[data-sub="online"] .online-table tbody tr:last-child {border-bottom: 0;}
[data-sub="online"] .btn_area {padding-bottom: 0;}
[data-sub="online"] .button {font-size: 18rem; width: 180rem; height: 60rem; display: flex; align-items: center; justify-content: center; border-radius: 8rem; background: #111; cursor:pointer;} 
[data-sub="online"] .agreement {display: flex; font-size: 16rem; justify-content: flex-end; align-items: center; gap: 10rem; margin-top: 30rem;}
[data-sub="online"] .agreement label {font-size: 16rem; margin-right: 0;}
[data-sub="online"] .agreement  input[type="checkbox"] {width: 18rem; height: 18rem; margin: 0;}
[data-wrtieForm="spam"] .inr-spam{display:flex; align-items:stretch; gap:10rem; width:100%;}
[data-wrtieForm="spam"] .spam{display:flex; justify-content:center; align-items:center; padding:0 20rem; background-color:#222; border-radius:8rem; font-weight:700; color:#fff;}
[data-wrtieForm="spam"] input{width:100%; margin:0;}

@media (max-width:767px){
	[data-sub="contact"] {padding-bottom: 65rem;}
	[data-sub="online"] {padding-bottom: 65rem;}
	[data-sub="online"] form {padding: 5rem;}
	[data-sub="online"] .fieldset-box {padding: 0; gap: 6rem;}
	[data-sub="online"] select {min-width: 100rem;}
	[data-sub="online"] tbody tr {display: flex; flex-direction: column; gap: 15rem; padding: 15rem 0;}
	[data-sub="online"] tbody th, [data-sub="online"] tbody td {padding: 0;}
	[data-sub="online"] .agreement {justify-content: flex-start; font-size: 15rem;}
	[data-sub="online"] .agreement input[type="checkbox"] {width: 15rem; height: 15rem; }
	[data-sub="online"] .btn_area {margin-top: 30rem;} 
	[data-sub="online"] .button {width: 150rem; height: 55rem; font-size: 16rem;}
}