@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

div#content.sub{min-height:300px;padding:110rem 0 100rem;}
.sub_title{margin-bottom:60px;}
.sub_title h2{text-align:center; color:#111; font-size:var(--fs35);}
.ss_title {margin-bottom: 40rem;}
.top_main{display:none;}

/* 서브페이지 공통 */
.br_top {padding-top: 70rem; border-top: 1px dotted #bbb;}
.mr_top {margin-top: 70rem;}
.sub_title_p {margin-top: -15rem; font-size: var(--fs17);}
.sub_title_h3 {font-size: 26rem; font-weight: 700; position: relative; padding-left: 12rem; margin-bottom: 35rem;}
.sub_title_h3:before {content: ''; position: absolute; top: 2rem; left: 0; width: 6px; height: 6px; border-radius: 100%; background: var(--primary);}
p.check {position: relative; font-size: var(--fs20); font-weight: 600; padding-left: 23rem; margin-bottom: 8rem;}
p.check:before {content: ''; position: absolute; top: 6rem; left: 0; width: 15px; height: 15px; background: url(/images/content/ico_check.svg) no-repeat center;}
.box p.check {font-size: var(--fs22); margin-bottom: 25rem; padding-left: 25rem;}
.box p.check:before {top:6rem; width: 17px; height: 17px;}
.sub_bg {position: relative; padding: 80rem 0; background: #f5f5f5;}
.sub_bg:before {content: ''; position: absolute; inset: 0 -50vw 0; height: auto; background: #f5f5f5; z-index: -1;}

p.mob_info{margin-top:10px; padding:5px; background:#f5f5f5;}
/* 서브비쥬얼 */
.area_subVisual{position:relative; display: flex; align-items: center; height:380rem; padding:0 15px; background-size:cover; background-position:80% 50%; margin-top:var(--header_height);}
.area_subVisual h2{ color:#fff; font-size:45rem; }
.area_subVisual.about{background:url(../images/content/sub_visual01.jpg) no-repeat center/cover;}
.area_subVisual.business{background:url(../images/content/sub_visual02.jpg) no-repeat center/cover;}
.area_subVisual.solution{background:url(../images/content/sub_visual03.jpg) no-repeat center/cover;}
.area_subVisual.material{background:url(../images/content/sub_visual04.jpg) no-repeat center/cover;}
.area_subVisual.monitoring{background:url(../images/content/sub_visual05.jpg) no-repeat center/cover;}
.area_subVisual.gallery{background:url(../images/content/sub_visual06.jpg) no-repeat center/cover;}
.area_subVisual.customer{background:url(../images/content/sub_visual07.jpg) no-repeat center/cover;}
.area_subVisual.cscenter{background:url(../images/content/sub_visual08.jpg) no-repeat center/cover;}

/* lnb */
.lnb{ border-bottom: 1px solid #e5e5e5; text-align:center; font-weight: 500; color: #ccc; z-index:10; }
.lnb:has(li:only-child){ display: none; }
.lnb ul{ margin: 0 auto; display: flex; justify-content: center; gap: 60rem; max-width: calc(var(--inr) * 1rem); width: calc(var(--inrWidth) * 100%); }
.lnb a{ font-size: var(--fs17); position: relative; display: flex; align-items: center; height: 70rem; }
.lnb a:hover,
.lnb a.on{ color: var(--black); }
.lnb a.on::before{ content: ''; position: absolute; inset: 0; border-bottom: 2px solid var(--primary); }

@media all and (max-width:767px){
  .lnb ul{ gap: 26rem;}
  .lnb a {font-size: 15rem;}
  .area_subVisual h2{ font-size:35px; margin-top: 100rem;}
  .area_subVisual {height: 380rem;}
  div#content.sub {padding:80rem 0 80rem;}
  .sub_title{margin-bottom:30rem;}
  .ss_title {margin-bottom: 30rem;}
  .sub_title_h3 {font-size: 18rem; margin-bottom: 20rem;} 
  .sub_title_h3:before {width: 5rem; height: 5rem;}
  .sub_bg { padding: 60rem 0;}
  p.check {padding-left: 18rem;}
  p.check:before {top: 7rem;width: 14rem; height: 14rem;}
  .mr_top {margin-top: 40rem;}
  .br_top {padding-top: 40rem;}
}

/*인사말*/
.about1 {display: flex; }
.about1 .about_img {flex: 1 40%; position: relative; height: 500rem;}
.about1 .about_img img {position: absolute; right: 100rem; height: 100%;}
.about1 .about_txt {flex: 1 50%; margin-top: 40rem;}
.about1 .about_txt h2 {font-size: var(--fs35); line-height: 1.4; margin-bottom: 35rem;}
.about1 .about_txt p {font-size: var(--fs17); line-height: 1.7;}
.about1 .about_txt p + p {margin-top: 20rem;}
.about1 .about_txt p.sign {margin-top: 20rem;}
.about1 .about_txt p.sign span {position: relative;padding-left: 12rem; margin-left: 10rem; font-weight: 500;}
.about1 .about_txt p.sign span:before {position: absolute; content: ''; top: 5rem; left: 0; width: 1px; height: 10px; background: #ddd;}

/*연혁*/
.about2 {}
.about2 .history {}
.about2 .his_img {margin-bottom: 50rem;}
.about2 .his_img .img {display:flex; gap: 15px; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 250rem; color:#fff; box-sizing:border-box; background: #ddd url(/images/content/img_history.jpg) no-repeat center; background-size:cover;}
.about2 .his_img h3 {font-size: var(--fs35); font-weight: 800;}
.about2 .his_img p {font-size: var(--fs17); font-weight: 300;}
.about2 .his_list {margin-left: 60rem;}
.about2 .his_list > li {display: flex; align-items: flex-start;}
.about2 .his_list > li p {min-width: 150px; font-size: var(--fs28); font-weight: 800; padding-right: 45px;  box-sizing: border-box; position: relative; }
.about2 .his_list > li p:before {position:absolute; right:0; top:10px; content:''; width:20px; height:20px; border-radius:100%; background: #fff; border:1px solid #e1e1e1; transform:translate(50%, 0); z-index: 1;}
.about2 .his_list > li p:after {position:absolute; right:0; top:17px; content:''; width:6px; height:6px; border-radius:100%; background:var(--primary); transform:translate(50%, 0); z-index:8;}
.about2 .his_list> li p::before {content: ''; position: absolute;}
.about2 .his_list > li ul {position: relative; padding:5px 0 80px 80px; box-sizing: border-box;}
.about2 .his_list > li ul:before {position:absolute;left:0;top:0;content:'';width:1px; height:100%;background:#e1e1e1;}
.about2 .his_list > li ul li {font-size: var(--fs18);}
.about2 .his_list > li ul li + li {margin-top: 10px;}
.about2 .his_list > li ul li > span {display: inline-block; box-sizing: border-box; font-weight: 600; margin-right: 30px; min-width: 50px;}

/*조직도*/
.about3 {text-align: center;}
.about3 li span {border-radius: 4px; line-height: 62rem;}
.about3 .org1 {position: relative; text-align: center; padding: 40rem 0 100rem;}
.about3 .org1:before {content: ''; position: absolute; top: 50rem; left: 50%; width: 1px; height: 83%; background: #e1e1e1; z-index: -10;}
.about3 .org1 h3 {position: relative; display: inline-flex; flex-direction: column; justify-content: center; width: 150rem; height: 150rem; font-size: var(--fs20); font-weight: 600; color: #fff; background: var(--primary); padding: 25px; box-sizing: border-box; border-radius: 100%;}
.about3 .org1 h3:before {position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 190rem; height: 190rem; border-radius: 50%; z-index: -5; background: rgba(0, 70, 155, 0.15);} 
.about3 .org2 { display: grid; gap: 100rem; grid-template-columns: repeat(2,1fr); font-size: 17rem; } 
.about3 .org2 > li {position: relative; padding-top: 50rem;}
.about3 .org2 > li::before {content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 45%; background: #e1e1e1; z-index: -10;}
.about3 .org2 > li::after {position: absolute; content: ''; top: 0; left: 50%; width: calc(100% + 100rem); height: 1px; background: #e1e1e1;}
.about3 .org2 > li:last-child::after {display: none;}
.about3 .org2 > li > span {display: block; background :#222; color: #fff; }
.about3 .org2 > li:nth-child(2) .org2_2 {display: grid; gap: 20rem; grid-template-columns: repeat(3,1fr);}
.about3 .org2 > li:nth-child(2) .org2_2 > li:after {position: absolute; content: ''; top: 0; left: 50%; width: calc(100% + 20rem); height: 1px; background: #e1e1e1;}
.about3 .org2 > li:nth-child(2) .org2_2 > li:last-child::after {display: none;}
.about3 .org2_2 {padding-top: 50rem;}
.about3 .org2_2 > li {position: relative; padding-top: 50rem;}
.about3 .org2_2 > li:before {position: absolute; content: ''; top: 0; left: 50%;  width: 1px; height: 50rem; background: #e1e1e1;}
.about3 .org2_2 > li > span {display: block; width: 100%; background: #f5f5f5; border:1px solid #e5e5e5; box-sizing: border-box;}
.about3 .org2_2 dl {margin-top: 20rem; padding: 0 15rem; box-sizing: border-box;}
.about3 .org2_2 dl dd {position: relative; padding-left: 15rem; text-align: left; font-size: 16rem;}
.about3 .org2_2 dl dd + dd {margin-top: 4rem;}
.about3 .org2_2 dl dd:before {position: absolute; content: ''; top: 50%; transform: translateY(-50%); left: 0; width:5px; height: 5px; border-radius: 50%; border: 1px solid var(--primary); }

/* 인증서 */
.about4 {}
.about4 .certificate {display: grid; grid-template-columns: repeat(5,1fr); gap: 25rem; text-align: center;}
.about4 .certificate li img {width: 100%; box-sizing: border-box; border: 8px solid #eee;}
.about4 .certificate li p {font-size:var(--fs18); font-weight: 500; margin-top: 12rem;}

/* 오시는길 */
.about5 {}
.about5 .root_daum_roughmap {width: 100%;}
.about5 .root_daum_roughmap .wrap_map {height: 500px; border-bottom: 1px solid #ddd;}
.about5 .root_daum_roughmap .wrap_controllers {display: none;}
.about5 ul {display: grid; grid-template-columns: repeat(4, 1fr); padding: 43px 0; margin-top: 30px; border-top: 1px solid #111; border-bottom: 1px solid #e5e5e5}
.about5 li { color: #555; padding: 0 28px; box-sizing: border-box;}
.about5 li + li {border-left: 1px solid #e5e5e5;}
.about5 li span {display: block; font-size: var(--fs17); color: #111; font-weight: 600; margin-bottom: 7px;}

@media all and (max-width:1280px){
  /* 인사말 */
  .about1 {flex-direction: column;}
  .about1 .about_img {flex: inherit; height: 350rem;}
  .about1 .about_img img {width: 100%; object-fit: cover; right: 0; max-width: 100%;}
  .about1 .about_txt {flex: inherit;}
}

@media all and (max-width:1080px){
    /* 오시는길 */
  .about5 ul {grid-template-columns: repeat(2, 1fr); gap: 30px 20px;}
  .about5 li + li {border-left: 0;}
}

@media all and (max-width:767px){
  /* 인사말 */
  .about1 .about_txt {margin-top: 25rem;}
  .about1 .about_txt h2 {margin-bottom: 25rem;}
  .about1 .about_txt p + p {margin-top: 15rem;}
  /* 연혁 */
  .about2 .his_img {margin-bottom: 30rem;}
  .about2 .his_img .img {height: 220rem; }
  .about2 .his_list {margin-left: 0;}
  .about2 .his_list > li p {min-width: 95rem; padding-right: 40rem;}
  .about2 .his_list > li ul {padding: 5px 0 40px 40px;}
  .about2 .his_list > li ul li > span {min-width: 25rem;}
  /* 조직도 */
  .about3 li span {height: 55rem;}
  .about3 .org1 {padding: 30rem 0 70rem;}
  .about3 .org1:before {height: 77%;}
  .about3 .org1 h3 {width: 115rem; height: 115rem; padding: 0; font-size: 500;}
  .about3 .org1 h3:before {width: 150rem; height: 150rem;}
  .about3 .org2 {gap: 33rem;}
  .about3 .org2 > li {padding-top: 35rem;}
  .about3 .org2 > li::before {height: 25%;}
  .about3 .org2 > li::after {width: calc(100% + 33rem);}
  .about3 .org2_2 {padding-top: 35rem;}
  .about3 .org2_2 dl {padding-top: 15rem;}
  .about3 .org2_2 > li {padding-top: 0;}
  .about3 .org2_2 > li:before {display: none;}
  .about3 .org2 > li:nth-child(2) .org2_2 > li:after {display: none;}
  .about3 .org2 > li:nth-child(2) .org2_2 {grid-template-columns: repeat(1,1fr);}
  /* 인증현황 */
  .about4 .certificate {grid-template-columns: repeat(2,1fr); gap: 20rem;}
  .about4 .certificate li img {border: 5px solid #eee;}
  .about4 .certificate li p {font-size: 15rem; margin-top: 8rem;}
  /* 오시는길 */
	.about5 .root_daum_roughmap .wrap_map {height: 350px;}
	.about5 ul { grid-template-columns: repeat(1, 1fr); gap: 0; padding: 0;}
	.about5 li {padding: 15px 10px; border-bottom: 1px dotted #ddd;}
	.about5 li:last-child {border-bottom: 0;}
	.about5 li span {margin-bottom: 5px;}
	.about5 li + li {border-left: 0;}
}

/* 표 */
.business_wrap .table {}
.business_wrap .table dl {margin-top: 20rem;}
.business_wrap .table dd {font-size: 15rem;}
.business_wrap .table dd span {color: #d51717;}
.business_wrap .table dd + dd {margin-top:8rem;}
.business_wrap .table table {text-align: center; border: 1px solid #ddd;}
.business_wrap table thead {background: #f2f2f2;}
.business_wrap table thead th {padding: 12rem 8rem; font-weight: 600; box-sizing: border-box; border-left: 1px solid #ddd;}
.business_wrap table thead th:first-child {border-left: 0;}
.business_wrap table thead tr:nth-child(2) {border-top: 1px solid #ddd;}
.business_wrap table thead tr:nth-child(2) th:first-child {border-left: 1px solid #ddd;}
.business_wrap table tbody {background: #fff;}
.business_wrap table tbody tr {border-top: 1px solid #ddd;}
.business_wrap table tbody td {padding: 12rem 8rem; box-sizing: border-box; border-left: 1px dashed #ddd;}
.business_wrap table tbody th {font-weight: 500;}
.business_wrap table tbody td:first-child {border-left: 0;}
.business_wrap table tbody td span {display: block;}
.business_wrap table tbody td span + span {margin-top: 5rem;}
/* 아이콘 */
.icon_list {display: grid; grid-template-columns: repeat(5, 1fr); gap: 25rem; text-align: center;}
.icon_list .icon {width: 42rem; height: 42rem;}
.icon_list li {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20rem; min-height: 150rem; padding: 40rem 20rem; border: 1rem solid #ddd; box-sizing: border-box;}
.icon_list li img {width: 100%;}
.icon_list li p {font-size: var(--fs17); font-weight: 600;}
/* 프로세스 */
.process_list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 30rem 60rem;}
.process_list li {display: flex; gap: 8rem; align-items: center; justify-content: center; position: relative; padding: 16rem 8rem; font-weight: 600; width: 100%; background: #00469b; border: 1px solid #00326e; box-sizing: border-box; font-size: var(--fs17); color: #fff; text-align: center;}
.process_list li:before {position: absolute; top: 0; left: 0; content: ''; width: 60rem; height: 100%; transform: translate(-100%,0); background: url(/images/content/business_arrow.png) no-repeat center;}
.process_list li:after {position: absolute; top: 0; left: 0; content: ''; width: 6px; height: 100%; background: #00326e;}
.process_list li:nth-child(1):before, .process_list li:nth-child(5):before, .process_list li:nth-child(9):before {display: none;}
.process_list li em { opacity: 0.5; padding-left: 6rem;}
/* 박스리스트 */
.business_wrap .box_list {display: grid; grid-template-columns: repeat(2,1fr); gap: 30rem;}
.business_wrap .box_list li {display: flex; gap: 14rem; align-items: center; padding: 20rem; background: #fff; box-sizing: border-box; }
.business_wrap .box_list li span {font-size: 15rem; font-weight: 300; width: 35rem; height: 35rem; line-height: 35rem; background: #111; color: #fff; text-align: center;}
.business_wrap .box_list li p { font-size: var(--fs18); font-weight: 500;}
.ss_box_list li {padding: 30rem; box-sizing: border-box; background: #fff;}
.ss_box_list li + li {margin-top: 20rem;}
.ss_box_list li .name {display: flex; align-items: center; gap: 12rem; margin-bottom: 15rem;}
.ss_box_list li .name p {font-size: var(--fs18); font-weight: 600;}
.ss_box_list li .name span {font-size: 15rem; font-weight: 500; width: 33rem; height: 33rem; line-height: 33rem; background: #111; text-align: center; color: #fff;}

/* 발전사업  business1*/
.business1 {}
.business1 .ss01 {}
.business1 .ss02 {position: relative;  }
/* ss03 */
.business1 .ss03 {}
.rps_list {display: grid; grid-template-columns: repeat(5,1fr); margin-bottom: 40rem;}
.rps_list > li {height: 150rem; border-radius: 4rem; display: flex; align-items: center; justify-content: center; font-size: var(--fs22); font-weight: 600; color: #fff;}
.rps_list > li img {max-width: 100%;}
.rps_list li:nth-child(1) {background: #d51717;}
.rps_list li:nth-child(3) {background: #00469b;}
.rps_list li:nth-child(5) {background: #222;}
.rps_list li.arrow {flex-direction: column; gap: 30rem; font-size: 16rem; font-weight: 500;}
.rps_list li.arrow p {width: 80%; text-align: center;}
.rps_list li.arrow p.red {color: #d51717; padding-bottom: 15rem; position: relative;}
.rps_list li.arrow p.red::before {position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 1px; border-top: 1px dotted #ccc;}
.rps_list li.arrow p.blue {color: #00469b; padding-top: 15rem;  position: relative;}
.rps_list li.arrow p.blue::before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 1px; border-top: 1px dotted #ccc;}
.rps_list li.arrow p.red::after {position: absolute; content: ''; bottom: -14px; right: 0; width: 0; height: 0;border: 7px solid transparent; border-left: 7px solid #ccc; transform: translate(50%, -50%);}
.rps_list li.arrow.ar2 p.red::after {position: absolute; content: ''; bottom: -14px; right: auto; left: -15px; width: 0; height: 0;border: 7px solid transparent; border-right: 7px solid #ccc; transform: translate(50%, -50%);}
.rps_list li.arrow p.blue::after {position: absolute; content: ''; top: 0; left: -15px; width: 0; height: 0;border: 7px solid transparent; border-right: 7px solid #ccc; transform: translate(50%, -50%);}
.rps_list li.arrow.ar2 p.blue::after {position: absolute; content: ''; top: 0; left: auto; right: 0; width: 0; height: 0;border: 7px solid transparent; border-left: 7px solid #ccc; transform: translate(50%, -50%);}
.rps_info {}
.business1 .ss03 .rps_info li + li {margin-top: 25rem;}
.business1 .ss03 .rps_info p.check {position: relative; font-size: var(--fs18); font-weight: 600; padding-left: 23rem; margin-bottom: 8rem;}
.business1 .ss03 .rps_info p.check:before {content: ''; position: absolute; top: 5rem; left: 0; width: 16px; height: 16px; background: url(/images/content/ico_check.svg) no-repeat center;}
.business1 .ss03 .rps_info span {font-size: var(--fs17);}
.business1 .ss04 {}
.business1 .ss04 p.check {margin-bottom: 20rem;}
.business1 .ss04 .box + .box {margin-top: 50rem;}
.business1 .ss05 {}
.business1 .ss05 ul img{ width: 100%; }
.business1 .ss05 ul li + li {margin-top: 25rem;}
.business1 .ss05 .table {margin-top: 40rem;}
.business1 .ss07 ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem 20rem; }
.business1 .ss07 ul img {max-width: 100%; width: 100%;}

/* 임대사업 business2 */
.business2 {}
.business2 .table.rent {}
.business2 .table.rent thead {background: #222; color: #fff;}
.business2 .table.rent thead th {border-left: 1px dashed rgba(255, 255, 255, 0.5);}
.business2 .table.rent thead th:last-child {background: var(--primary); color: #fff;}
.business2 .table.rent tbody th {background: #f2f2f2;}
.business2 .table.rent tbody td:last-child {background: rgba(0, 70, 155, 0.1);}
.business2 .rent_list {text-align: center; display: grid; grid-template-columns: repeat(5,1fr);gap: 22rem; margin-bottom: 30rem;}
.business2 .rent_list li {border: 1px solid #e1e1e1; padding: 35rem 10rem; box-sizing: border-box;}
.business2 .rent_list li span {display: inline-block; padding: 5rem 15rem; font-size: 15rem; font-weight: 500; background: #e5e5e5; }
.business2 .rent_list li p {font-size: var(--fs22); font-weight:700; margin-top: 20rem;}
.business2 .ss03 img {max-width: 100%; width: 100%; object-fit: cover;}
.business2 .ss05 ul {display: grid; grid-template-columns: repeat(3,1fr); gap:60rem;}
.business2 .ss05 li {position: relative;}
.business2 .ss05 li:first-child::before {display: none;}
.business2 .ss05 li::before {content: ''; position: absolute; top: 0; left: 0; width: 60rem; height: 100%; background: url(/images/content/business_arrow.png) no-repeat center; transform: translate(-100%,0);}
.business2 .ss05 li .img img {max-width: 100%; width: 100%; object-fit: cover;}
.business2 .ss05 li p {font-size: var(--fs17); font-weight: 600; margin-top: 15rem; text-align: center;}
.business2 .ss06 {}
.business2 .ss06 ul{}
.business2 .ss06 li {}
.business2 .ss06 li + li {margin-top: 30rem;}
.business2 .ss06 dl {margin-top: 15rem;}
.business2 .ss06 dd strong {font-weight: 600; display: block; margin-bottom: 6rem;}
.business2 .ss06 dd + dd {margin-top:5rem;}


/* 정부지원사업  business3*/
.business3 {}
.business3 .process_list {grid-template-columns: repeat(6, 1fr); gap: 20rem 35rem; }
.business3  .process_list li {font-size: 16rem; padding: 15rem 0;}
.business3 .process_list li:before {width: 35rem; background-size: 12rem;}
.business3 .ss02 {position: relative; padding: 80rem 0; background: #f5f5f5;}
.business3 .ss02:before {content: ''; position: absolute; inset: 0 -50vw 0; height: auto; background: #f5f5f5; z-index: -1;}
.business3 .ss02 ul {display: grid; grid-template-columns: repeat(2,1fr); gap: 30rem;}
.business3 .ss02 li {display: flex; gap: 14rem; align-items: center; padding: 20rem; background: #fff; box-sizing: border-box; }
.business3 .ss02 li span {font-size: 15rem; font-weight: 300; width: 35rem; height: 35rem; line-height: 35rem; background: #111; color: #fff; text-align: center;}
.business3 .ss02 li p { font-size: var(--fs18); font-weight: 500;}
.business3 .ss03 {}
.business3 .box table td {font-size: 16rem;}
.business3 .ss03 .box {}
.business3 .ss03 .box_01 {display: flex; gap: 50rem; }
.business3 .ss03 .box .box_img {width: 35%; }
.business3 .ss03 .box .box_img img {width: 100%;}
.business3 .ss03 .box .box_info {width: 65%;}
.business3 .ss03 .box .box_info dl {margin-bottom: 30rem;}
.business3 .ss03 .box_02 {margin-top: 30rem;}
.business3 .ss04 .box {display: flex; gap: 50rem; }
.business3 .ss04 .box .box_img {width: 35%; }
.business3 .ss04 .box .box_img img {width: 100%;}
.business3 .ss04 .box .box_info {width: 65%;}
.business3 .ss05 {}
.business3 .ss05 .box ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem 20rem;}
.business3 .ss05 .box + .box {margin-top: 30rem;}
.business3 .ss05 .box li img {max-width: 100%; width: 100%; object-fit: cover;}


/* K-RE100  business4*/
.business4 {}
.business4 .box {}
.business4 p.check {margin-bottom: 25rem;}
.business4 .ss01 {}
.business4 .ss02 {position: relative; padding: 80rem 0; background: #f5f5f5;}
.business4 .ss02:before {content: ''; position: absolute; inset: 0 -50vw 0; height: auto; background: #f5f5f5; z-index: -1;}
.business4 .ss02 ul {display: grid; gap: 20rem; grid-template-columns: repeat(4,1fr); justify-items: center; padding: 40rem; box-sizing: border-box; background: #fff; margin-top: 40rem;}
.business4 .ss02 ul img {max-width: 100%;}
.business4 .ss03 .box_01 {margin-top: 35rem;}
.business4 .ss03 .box_01 ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20rem; }
.business4 .ss03 .box_01 ul .img {width: 100%; margin-bottom: 15rem;}
.business4 .ss03 img {width: 100%;}
.business4 .ss03 .box_02 {margin-top: 50rem;}
.business4 .ss03 .box_02 ul {display: grid; grid-template-columns: repeat(5, 1fr); gap: 30rem 20rem; text-align: center;}
.business4 .ss03 .box_02 ul .img {position: relative; width: 100%; margin-bottom: 12rem;}
.business4 .ss03 .box_02 ul em {position: absolute; top: 7rem; left: 7rem; font-size: 13rem; padding: 5rem 10rem; box-sizing: border-box; background: var(--primary); color: #fff; text-align: center;}
.business4 .ss03 .box_02 ul p {font-weight: 600;}
.business4 .ss04 {position: relative; padding: 80rem 0; background: #f5f5f5;}
.business4 .ss04:before {content: ''; position: absolute; inset: 0 -50vw 0; height: auto; background: #f5f5f5; z-index: -1;}
.business4 .ss04 ul {}
.business4 .ss04 li {padding: 30rem; box-sizing: border-box; background: #fff;}
.business4 .ss04 li + li {margin-top: 20rem;}
.business4 .ss04 li .name {display: flex; align-items: center; gap: 12rem; margin-bottom: 15rem;}
.business4 .ss04 li .name p {font-size: var(--fs18); font-weight: 600;}
.business4 .ss04 li .name span {font-size: 15rem; font-weight: 500; width: 33rem; height: 33rem; line-height: 33rem; border-radius: 2rem; background: #111; text-align: center; color: #fff;}
.business4 .ss04 li .text {}
.business4 .ss04 li .text span {font-size: 15rem; color: #555;}
.business4 .ss05 .box_01 {margin-top: 50rem;}
.business4 .ss05 .box_01 ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem; text-align: center;}
.business4 .ss05 .box_01 dl dt {font-size: var(--fs20); font-weight: 600; margin-bottom: 15rem;}
.business4 .ss05 .box_01 dd + dd {margin-top: 5rem;}
.business4 .ss05 .box_01 li {display: flex; flex-direction: column; gap: 25rem; align-items: center; text-align: center;}
.business4 .ss05 .box_01 li .box_img {width: 200rem; height:200rem; border-radius: 50%; overflow: hidden;}
.business4 .ss05 .box_01 li .box_img img {max-width: 100%; width: 100%;}
.business4 .ss05 .box_02 p.check { margin-bottom: 10rem;}
.business4 .ss05 .box_02 dl {margin-top: 15rem;}
.business4 .ss05 .box_02 dd + dd {margin-top: 5rem;}
.business4 .ss05 .box_02 li + li {margin-top: 30rem;}
.business4 .ss06 {}
.business4 .ss06 .process_list {grid-template-columns: repeat(5, 1fr); gap: 20rem 35rem;}
.business4 .ss06 .process_list li:before {width: 35rem; background-size: 12rem;}
.business4 .ss06 .process_list li {font-size: 16rem; padding: 15rem 0;}
.business4 .ss06 .process_list li:nth-child(5):before {display: block;}

/* 전략중개사업 business5 */
.business5 {}
.rps_list {display: grid; grid-template-columns: repeat(5,1fr); margin-bottom: 40rem;}
.rps_list > li {height: 150rem; border-radius: 4rem; display: flex; align-items: center; justify-content: center; font-size: var(--fs22); font-weight: 600; color: #fff;}
.rps_list > li img {max-width: 100%;}
.rps_list li:nth-child(1) {background: #d51717;}
.rps_list li:nth-child(3) {background: #00469b;}
.rps_list li:nth-child(5) {background: #222;}
.rps_list li.arrow {flex-direction: column; gap: 30rem; font-size: 16rem; font-weight: 500;}
.rps_list li.arrow p {width: 80%; text-align: center;}
.rps_list li.arrow p.red {color: #d51717; padding-bottom: 15rem; position: relative;}
.rps_list li.arrow p.red::before {position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 1px; border-top: 1px dotted #ccc;}
.rps_list li.arrow p.blue {color: #00469b; padding-top: 15rem;  position: relative;}
.rps_list li.arrow p.blue::before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 1px; border-top: 1px dotted #ccc;}
.rps_list li.arrow p.red::after {position: absolute; content: ''; bottom: -14px; right: 0; width: 0; height: 0;border: 7px solid transparent; border-left: 7px solid #ccc; transform: translate(50%, -50%);}
.rps_list li.arrow.ar2 p.red::after {position: absolute; content: ''; bottom: -14px; right: auto; left: -15px; width: 0; height: 0;border: 7px solid transparent; border-right: 7px solid #ccc; transform: translate(50%, -50%);}
.rps_list li.arrow p.blue::after {position: absolute; content: ''; top: 0; left: -15px; width: 0; height: 0;border: 7px solid transparent; border-right: 7px solid #ccc; transform: translate(50%, -50%);}
.rps_list li.arrow.ar2 p.blue::after {position: absolute; content: ''; top: 0; left: auto; right: 0; width: 0; height: 0;border: 7px solid transparent; border-left: 7px solid #ccc; transform: translate(50%, -50%);}

.business5 .ss03 {}
.business5 .ss03 .box_01 .process_list {grid-template-columns: repeat(3, 1fr);}
.business5 .ss03 .box_02 {margin-top: 35rem;}
.business5 .ss03 .box_02 li {padding: 30rem; box-sizing: border-box; background: #fff;}
.business5 .ss03 .box_02 li + li {margin-top: 20rem;}
.business5 .ss06 ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem 20rem;}
.business5 .ss06 ul .img {width: 100%;}
.business5 .ss06 ul .img img {width: 100%;}
.business5 .ss06 li .name { margin-top: 15rem; margin-bottom: 0;}
.business5 li .name {display: flex; align-items: center; gap: 12rem; margin-bottom: 15rem;}
.business5 li .name p {font-size: var(--fs18); font-weight: 600;}
.business5 li .name span {font-size: 15rem; font-weight: 500; width: 33rem; height: 33rem; line-height: 33rem; border-radius: 2rem; background: #111; text-align: center; color: #fff;}
.business5 li .text {}
.business5 li .text span {font-size: 15rem; color: #555;}



@media all and (max-width:767px){
  /* Business 공통 */
  .icon_list {grid-template-columns: repeat(3, 1fr); gap: 10rem;}
  .icon_list li {gap: 12rem; padding: 20rem 10rem; min-height: 120rem;}
  .icon_list li p {font-size: 14rem;}
  .icon_list .icon {width: 26rem; height: 26rem;}
  .process_list {grid-template-columns: repeat(2, 1fr); gap: 20rem 30rem;}
  .process_list li:before {width: 30rem; background-size: 15rem; padding: 12rem 0;}
  .process_list li:nth-child(odd):before {display: none;}
  .business_wrap .table {overflow-x: scroll;}
  .business_wrap .table table {min-width: 700rem;}
  .business_wrap table thead th {padding: 10rem 5rem;}
  .business_wrap table tbody td {padding: 10rem 5rem;}

    /* business1 - 발전사업 */
  .business1 .ss04 .box + .box {margin-top: 40rem;}
  .business1 .ss03 .rps_info p.check {padding-left: 18rem;}
  .business1 .ss03 .rps_info p.check:before {top: 7rem;width: 14rem; height: 14rem;}
  .business1 .ss03 .rps_info li + li {margin-top: 15rem;}
  .business1 .ss07 ul {grid-template-columns: repeat(1, 1fr); gap: 10rem;}
  .rps_list {grid-template-columns: repeat(1,1fr); margin-bottom: 30rem;}
  .rps_list li.arrow {flex-direction: row; gap: 50rem;}
  .rps_list li.arrow p {padding: 40rem 0 !important; width: auto;}
  .rps_list li.arrow p.red {padding-bottom: inherit;}
  .rps_list li.arrow p.red::before {left: -20rem; border-left: 1px dotted #ccc; height: 100%; width: 1px;}
  .rps_list li.arrow p.red::after {transform: rotate(90deg); left: -25rem;}
  .rps_list li.arrow p.blue {padding-top: inherit;}
  .rps_list li.arrow p.blue::before {left: auto; right: -20rem;width: 1px; height: 100%; border-left: 1px dotted #ccc;}
  .rps_list li.arrow p.blue::after {transform: rotate(90deg); left: auto; right: -25rem; top: -7rem;}
  .rps_list li.arrow.ar2 p.red::after {transform: rotate(90deg); top: -7rem; left: -24rem;}
  .rps_list li.arrow.ar2 p.blue::after {transform: rotate(90deg); top: auto; bottom: -7rem; right: -24rem;}
  .business1 .ss05 ul{ grid-template-columns: 1fr; gap: 10rem; }

  /* business2 - 임대사업 */
  .business2 .rent_list {grid-template-columns:repeat(2,1fr); gap: 15rem;}
  .business2 .rent_list li {padding: 20rem 10rem;}
  .business2 .rent_list li p {margin-top: 12rem; font-weight: 500;}
  .business2 .ss05 ul {grid-template-columns:repeat(1,1fr); gap: 50rem;}
  .business2 .ss05 li::before {width: 100%; height: 50rem; transform: translate(0,-100%) rotate(90deg); background-size: 20rem;}

  /* business3 - 정부지원사업 */
  .business3 .ss02 {padding: 50rem 0;}
  .business3 .ss02 ul {grid-template-columns:repeat(1,1fr); gap: 15rem;}
  .business3 .ss03 .box_01 {flex-direction: column-reverse; gap: 20rem;}
  .business3 .ss03 .box .box_img , .business3 .ss03 .box .box_info {width: 100%;}
  .business3 .box p.check { margin-bottom: 20rem;}
  .business3 .box p.check:before {width: 15rem; height: 15rem; top: 5rem;}
  .business3 .ss03 .box .box_info dl {margin-bottom: 20rem;}
  .business3 .process_list {grid-template-columns: repeat(2, 1fr); gap: 10rem 22rem;}
  .business3 .process_list li {padding: 12rem 0; font-size: 15rem;}
  .business3 .process_list li:before {width: 22rem;}
  .business3 .ss04 .box {flex-direction: column-reverse; gap: 20rem;}
  .business3 .ss04 .box .box_info, .business3 .ss04 .box .box_img {width: 100%;}
  .business3 .ss05 .box ul {grid-template-columns:repeat(1,1fr); gap: 10rem;}
  /* business4 - K-RE100*/
  .business4 .ss02 ul { grid-template-columns: repeat(2,1fr); padding: 25rem;}
  .business4 .ss02 li {text-align: center;}
  .business4 .ss02 ul img {max-width: 85%;}
  .business4 .ss03 .box_01 ul { grid-template-columns: repeat(2,1fr); gap: 15rem 10rem;}
  .business4 .ss03 .box_01 ul .img {margin-bottom: 10rem;}
  .business4 .ss03 .box_02 ul { grid-template-columns: repeat(2,1fr); gap: 15rem 10rem;}
  .business4 .ss03 .box_02 ul .img {margin-bottom: 10rem;}
  .business4 .ss05 .box_01 ul { grid-template-columns: repeat(1,1fr); gap: 20rem;}
  .business4 .ss05 .box_01 dl dt {margin-bottom: 8rem;}
  .business4 .ss06 .process_list {grid-template-columns: repeat(2, 1fr); gap: 15rem 35rem;}

 /* business5 - 전력중개사업 */
  .business5 .ss03 .box_01 .process_list {grid-template-columns: repeat(1, 1fr); gap: 15rem;}
  .business5 .ss03 .box_01 .process_list li:before {display: none;}
  .business5 .ss06 ul {grid-template-columns: repeat(2, 1fr); gap: 20rem 10rem;}
  .business5 .ss06 ul li .name {margin-top:10rem; gap: 10rem;}
  .business5 .ss06 ul li .name span {width: 28rem; height: 28rem; line-height: 28rem; font-size: 13rem;}
}

@media all and (max-width:500px){
  .rps_list li.arrow p.blue::after {right: -27rem; top: -11rem;}
  .rps_list li.arrow.ar2 p.blue::after {right: -27rem; bottom: -11rem;}
  .rps_list li.arrow.ar2 p.red::after {left: -27rem; top: -11rem;}
  .rps_list li.arrow p.red::after {left: -27rem; bottom: -11rem;}
}

/* solution_wrap 솔루션 공통 */
.solution_wrap .box .img_list {display: flex; gap: 50rem;}
.solution_wrap .box .box_img {width: 35%;}
.solution_wrap .box .box_img img {width: 100%;}
.solution_wrap .box .box_info {width: 65%;}
.solution_wrap .box .box_info dl {margin-bottom: 30rem;}
.solution_wrap .table table {text-align: center; border: 1px solid #ddd;}
.solution_wrap table thead {background: #f2f2f2;}
.solution_wrap table thead th:first-child {border-left: 0;}
.solution_wrap table thead th {padding: 12rem 8rem; font-weight: 600; box-sizing: border-box; border-left: 1px solid #ddd;}
.solution_wrap table tbody tr {border-top: 1px solid #ddd;}
.solution_wrap table tbody tr:first-child {border-left: 0;}
.solution_wrap table tbody td {padding: 12rem 8rem; box-sizing: border-box; border-left: 1px dashed #ddd;}
.solution_wrap .box table tbody tr {background: #fff;}
.solution_wrap .box table tbody th {font-size: var(--fs17); padding: 12rem 10rem; box-sizing: border-box;}
.solution_wrap .box table tbody td {font-size: 15rem; background: #fff;}
.solution_wrap .step_list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem 20rem; text-align: center;}
.solution_wrap .step_list .img {position: relative; width: 100%;  margin-bottom: 20rem;}
.solution_wrap .step_list .img img {width: 100%;}
.solution_wrap .step_list .img em {position: absolute; top: 7rem; left: 7rem;font-size: 13rem; padding: 5rem 10rem; background: var(--primary); color: #fff; text-align: center; box-sizing: border-box;}
.solution_wrap .step_list p {font-weight: 600; font-size: var(--fs20);}
.solution_wrap .step_list dl {margin-top: 15rem;}

/* 사업성 검토 solution1  */
.solution1 {}
.solution1 .ss02 {}
.solution1 .ss02 .process_list {margin-bottom:40rem; grid-template-columns: repeat(6,1fr); gap: 20rem 25rem;}
.solution1 .ss02 .process_list li {font-size: 15rem; font-weight: 400; box-sizing: border-box;}
.solution1 .ss02 .process_list li:before {width: 25rem; background-size: 12px;}
.solution1 .ss02 .process_list li:nth-child(5):before {display: block;}
.solution1 .ss02 .ss_box_list dl {margin-top: 15rem;}

/* 금융/대출 solution2  */
.solution2 {}
.solution2 .ss01 dl {margin-bottom: 30rem;}
.solution2 .ss01 .box_02 .process_list {grid-template-columns: repeat(6, 1fr); gap: 30rem;}
.solution2 .ss01 .box_02 .process_list li {font-size: 15rem; font-weight: 400;}
.solution2 .ss01 .box_02 .process_list li:before {width: 30rem; background-size: 12rem;}
.solution2 .ss01 .box_02 .process_list li:nth-child(5):before {display: block;}
.solution2 .icon_list {grid-template-columns: repeat(3, 1fr); gap: 20rem;}
.solution2 .icon_list .icon {width: 38rem; height: 38rem;}
.solution2 .icon_list li {padding: 40rem 20rem; min-height: 180rem;}
.solution2 .icon_list li span {display: block; font-weight: 400;}

/* 설계/대출 solution3  */
.solution3 {}
.solution3 .ss01 .box_01 {}
.solution3 .ss01 .box_01 ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 30rem 0; text-align: center;}
.solution3 .ss01 .box_01 li {display: flex; flex-direction: column; align-items: center; gap: 20rem; padding: 0 10rem; box-sizing: border-box;}
.solution3 .ss01 .box_01 li + li {border-left: 1px dashed #ddd;}
.solution3 .ss01 .box_01 ul .icon {width: 110rem; height: 110rem;}
.solution3 .ss01 .box_01 ul .icon img {width: 100%;}
.solution3 .ss01 .box_01 ul .text p {font-weight: 600; margin-bottom: 20rem;}

/* 시공 solution4 */
.solution4 {}
.solution4 .ss01 {}
.solution4 .ss02 {}
.solution4 .ss02 .box ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem 20rem; text-align: center;}
.solution4 .ss02 .box ul .img {width: 100%; margin-bottom: 15rem;}
.solution4 .ss02 .box ul .img img {width: 100%;}
.solution4 .ss02 .box ul p {font-size: var(--fs18); font-weight: 600;}

@media all and (max-width:768px){
  .solution_wrap .process_list li {font-size: 15rem; font-weight: 400;}
  /* solution1 - 사업성 검토 */
  .solution1 .ss02 .process_list {grid-template-columns: repeat(2, 1fr); gap: 15rem 30rem;}
  .solution1 .ss02 .process_list li:nth-child(3):before, .solution1 .ss02 .process_list li:nth-child(5):before {display: none;}
   /* solution2 - 금융대출 */
   .solution2 .process_list {grid-template-columns: repeat(2, 1fr); gap: 15rem 30rem;}
   .solution2 .ss01 .box_02 .process_list {grid-template-columns: repeat(2, 1fr); gap: 15rem 30rem;}
   .solution2 .ss01 .box_02 .process_list li:nth-child(3):before, .solution2 .ss01 .box_02 .process_list li:nth-child(5):before {display: none;}
   .solution2 .icon_list {grid-template-columns: repeat(2, 1fr); gap: 10rem;}
   .solution2 .icon_list li {padding: 20rem 10rem;}
   .solution_wrap .box .img_list {flex-direction: column-reverse; gap: 20rem;}
   .solution_wrap .box .box_img, .solution_wrap .box .box_info {width: 100%;}
   /* solution3 - 설계 */
   .solution3 .ss01 .box_01 ul {grid-template-columns: repeat(1, 1fr); gap: 0;}
   .solution3 .ss01 .box_01 li {padding: 25rem 0; gap: 15rem;}
   .solution3 .ss01 .box_01 ul .text p {margin-bottom: 8rem;}
   .solution3 .ss01 .box_01 li + li {border-left: 0; border-top: 1px dashed #ddd;}
   .solution_wrap .step_list {grid-template-columns: repeat(1, 1fr)}
   .solution_wrap .step_list dd {font-size: 16rem;}
   /* solution4 - 시공 */
   .solution4 .ss02 .box ul {grid-template-columns: repeat(1, 1fr);}
}

/* material_wrap - 자재유통 공통*/
.material_wrap {}
.material_wrap .ss03 .ss_title {text-align: center;}
.module .ss03 .sub_title_h3, .inverter .ss03 .sub_title_h3 {display: inline-block; margin-bottom: 0;}
.material_wrap .ss01 .img_list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem 20rem; text-align: center;}
.material_wrap .ss01 .img_list li {}
.material_wrap .ss01 .img_list .img {width: 100%; margin-bottom: 20rem;}
.material_wrap .ss01 .img_list .img img {width: 100%; max-width: 100%;}
.material_wrap .ss01 .img_list p {font-size: var(--fs17); line-height: 1.7;}
.material_wrap .icon_list {grid-template-columns: repeat(3, 1fr);}
.material_wrap .icon_list li {min-height: 200rem; gap: 30rem; padding: 50rem 20rem;}
.material_wrap .icon_list .icon {width: 90rem; height: 90rem;}
.material_wrap .icon_list .icon img {width: 100%;}
.material_wrap .icon_list p {line-height: 1.5; font-weight: 400;}
.material_wrap .grade_list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 25rem;}
.material_wrap .grade_list li a {padding: 45rem 20rem; border: 1px solid transparent; box-sizing: border-box; text-align: center; background: #fff; display: block; transition: all .6s;}
.material_wrap .grade_list li a:hover {border: 1px solid #555;}
.material_wrap .grade_list li a:hover span {background: var(--primary); color: #fff; border-color: var(--primary);}
.material_wrap .grade_list dt {font-size: var(--fs20); font-weight: 700; margin-bottom: 15rem;}
.material_wrap .grade_list span {display: inline-block; padding: 8rem 35rem; font-size: 15rem; box-sizing: border-box; border: 1px solid #ccc; margin-top: 25rem; transition: all .6s;}
/* 탭 제품리스트 */
.tab_list {}
.tab_list .tabMenu {margin-bottom: 80rem;}
.tab_list .tabMenu ul {display: flex; flex-wrap: wrap; justify-content: center;}
.tab_list .tabMenu li {cursor: pointer; max-width: 150rem; width: 100%; padding: 15rem 35rem; box-sizing: border-box; background: #f2f2f2; font-weight: 500; color: #bbb; text-align: center;}
.tab_list .tabMenu li + li {border-left: 1px solid #e1e1e1;}
.tab_list .tabMenu li.on {background: var(--primary); color: #fff;}
.tab_list .tabCon {overflow: hidden; visibility: hidden; height: 0;}
.tab_list .tabCon.on {overflow: visible; visibility: visible; height: 100%;}
.tab_list .tabCon {}
.tab_list .tab_title {margin-bottom: 50rem;}
.tab_list .tab_title p.check {font-size: var(--fs25); padding-left: 28rem; margin-bottom: 15rem;}
.tab_list .tab_title p.check:before {top: 9rem; width: 18rem; height: 18rem;}
/* 제품 상세 */
.tab_list .tab_info {}
.tab_list .tab_info > li {display: flex; gap: 70rem;}
.tab_list .tab_info > li + li {margin-top: 80rem;}
.tab_list .tab_info .pr_img {flex: 1 45%; display: flex; align-items: center; justify-content: center; padding: 30rem; box-sizing: border-box; background: #f2f2f2;}
.tab_list .tab_info .pr_img img {max-width: 100%;}
.tab_list .tab_info .pr_text {flex: 1 55%; padding: 30rem 0; box-sizing: border-box;}
.tab_list .tab_info .pr_text .info_name dt {font-size: var(--fs32); font-weight: 700; margin-bottom: 10rem;}
.tab_list .tab_info .pr_text .info_name dd {font-size: var(--fs20); color: #888;}
.tab_list .tab_info .pr_text .info_icon {margin: 40rem 0; display: grid; grid-template-columns: repeat(4,1fr); text-align: center; padding: 30rem 0; box-sizing: border-box; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb;}
.tab_list .tab_info .pr_text .info_icon li {display: flex; flex-direction: column; gap: 10rem;  align-items: center;}
.tab_list .tab_info .pr_text .info_icon li span {font-size: 15rem; }
.tab_list .tab_info .pr_text .info_icon li .icon {width:35rem; height: 35rem; }
.tab_list .tab_info .pr_text .info_icon li .icon img {width: 100%;}
.tab_list .tab_info .pr_text .info_spec li {font-size: var(--fs17); display: flex; align-items: center; gap: 20rem; }
.tab_list .tab_info .pr_text .info_spec li + li {margin-top: 12rem;}
.tab_list .tab_info .pr_text .info_spec li p {min-width: 100rem; font-weight:500;}
.tab_list .tab_info .pr_text .info_spec li span {color: #888;}

/* module - 모듈 */
.module .ss01 {}

/* structure - 구조물 */
.structure .name {display: flex; align-items: center; gap: 14rem; margin-bottom: 20rem;}
.structure .name span {font-weight: 600; width: 35rem; height: 35rem;line-height: 35rem;background: #111;text-align: center;color: #fff;}
.structure .name p {font-size: var(--fs22); font-weight: 600;}
.structure .ss01 li {display: flex; align-items: center; gap: 50rem; padding: 35rem; box-sizing: border-box; background: #fff;}
.structure .ss01 li + li {margin-top: 30rem;}
.structure .ss01 li .img {flex: 1 35%; width: 100%; text-align: center;}
.structure .ss01 li .img img {width: 100%; max-width: 100%;}
.structure .ss01 li .text {flex: 1 65%}
.structure .ss01 li .text dd + dd {margin-top: 8rem;}
.structure .ss02 {}
.structure .ss02 ul {display: grid; grid-template-columns: repeat(3,1fr); gap: 30rem; text-align: center; margin-top: 50rem;}
.structure .ss02 li {display: flex; flex-direction: column; gap: 25rem; align-items: center; text-align: center;}
.structure .ss02 li .img {width: 250rem; height: 250rem; border-radius: 50%; overflow: hidden;}
.structure .ss02 li .img img {width: 100%; height: 100%; object-fit: cover;}
.structure .ss02 dl dt {font-size: var(--fs20); font-weight: 600; margin-bottom: 15rem;}
.structure .ss02 dl dd span {display: block;}
.structure .ss02 dl dd + dd {margin-top: 4rem;}
.structure .ss03 {}
.structure .ss03 .box_list {display: grid; grid-template-columns: repeat(3,1fr); gap: 25rem;}
.structure .ss03 .box .img {margin-bottom: 20rem;}
.structure .ss03 .box .img img {max-width: 100%; width: 100%;}
.structure .ss03 .box .info dd + dd {margin-top: 5rem;}

@media all and (max-width:768px){
  /* material_wrap - 자재유통 공통*/
  .material_wrap .ss01 .img_list {grid-template-columns: repeat(1,1fr); gap: 30rem;}
  .material_wrap .ss01 .img_list .img {margin-bottom: 15rem;}
  .material_wrap .icon_list {grid-template-columns: repeat(1,1fr); gap: 15rem;}
  .material_wrap .icon_list li {gap: 20rem; padding: 30rem 20rem;}
  .material_wrap .grade_list {grid-template-columns: repeat(1,1fr); gap: 15rem;}
  .material_wrap .grade_list li a {padding: 30rem 20rem;}
  .material_wrap .grade_list span {margin-top: 20rem;}
  /* 탭메뉴 */
  .tab_list .tabMenu {margin-bottom: 40rem;}
  .tab_list .tabMenu ul {justify-content: flex-start;}
  .tab_list .tabMenu li {width: 33.333%; padding: 10rem 5rem; font-size: 15rem;}
  .tab_list .tabMenu li:nth-child(4) {border-left: 0;}
  .tab_list .tabMenu li:nth-child(n+4) {border-top: 1px solid #e1e1e1;}
  .tab_list .tab_info > li {flex-direction: column; gap: 30rem;}
  .tab_list .tab_title {margin-bottom: 30rem;}
  .tab_list .tab_info .pr_img {flex: 1;}
  .tab_list .tab_info .pr_img img {height: 350rem;}
  .tab_list .tab_info .pr_text {flex: 1; padding: 0;}
  .tab_list .tab_info .pr_text .info_icon {margin: 25rem 0; padding: 25rem 0;}
  .tab_list .tab_info .pr_text .info_spec li + li {margin-top: 8rem;}
  .tab_list .tab_info .pr_text .info_spec li p {min-width: 85rem;}
  .tab_list .tab_info > li + li {margin-top: 35rem; padding-top: 35rem; border-top: 1px dotted #bbb;}
  /* 인버터 */
  .inverter .tab_list .tabMenu li:nth-child(4){border-top: 0}
  .inverter .tab_list .tabMenu li:nth-child(7){border-left: 0}
  /* 구조물 */
  .structure .ss01 li {flex-direction: column-reverse; gap: 25rem; padding: 25rem;}
  .structure .ss01 li + li {margin-top: 15rem;}
  .structure .ss02 ul {grid-template-columns: repeat(1,1fr); margin-top: 0;}
  .structure .ss02 li {gap:20rem;}
  .structure .ss02 dl dt {margin-bottom: 8rem;}
  .structure .ss03 .box_list {grid-template-columns: repeat(1,1fr);}

}


/* monitering_wrap - 모니터링 */
.monitering_wrap .img_list {display: grid;  margin-top: 30rem;}
.monitering_wrap .img_list .img img {width: 100%; max-width: 100%;}
.monitering1 .img_list { grid-template-columns: repeat(6,1fr); gap: 10rem;}
.monitering1 .img_list .img {width: 100%; padding: 8rem; box-sizing: border-box; background: #fff;}
.monitering1 .monitering_btn {display: flex; align-items: center; justify-content: center; gap: 16rem; margin-top: 30rem;}
.monitering1 .monitering_btn a {min-width: 200rem; display: block; text-align: center; background: #e5e5e5; color: #888; font-weight: 500; padding: 20rem 20rem; box-sizing: border-box; transition: 0.5s; }
.monitering1 .monitering_btn a:hover {background: var(--primary); color: #fff; box-shadow: 10px 12px 26px 2.52px rgb(0 0 0 / 7%); }

.monitering2 .img_list { grid-template-columns: repeat(3,1fr); gap: 10rem;}
.monitering2 .img_list li {width: 100%; padding: 10rem; box-sizing: border-box; background: #fff;}
.monitering2 {}
.monitering2 .ss02 .box {padding: 40rem; box-sizing: border-box; border: 1px solid #e5e5e5;}
.system_list {margin-top: 40rem;}
.system_list li {padding: 30rem; box-sizing: border-box; background: #fff;}
.system_list li + li {margin-top: 20rem;}
.system_list li .name {display: flex; align-items: center; gap: 14rem; margin-bottom: 20rem;}
.system_list li .name span {font-weight: 600; width: 35rem; height: 35rem;line-height: 35rem;background: #111;text-align: center; color: #fff;}
.system_list li .name p {font-size: var(--fs22); font-weight: 600;}

@media all and (max-width:768px){
    /* 모바일 APP */
    .monitering_wrap .img_list { margin-top:25rem;} 
    .monitering1 .img_list { grid-template-columns: repeat(3,1fr); gap: 8rem;}
    .monitering2 .img_list {grid-template-columns: repeat(1,1fr); gap: 10rem;}
    .monitering1 .monitering_btn {display: grid; grid-template-columns: repeat(2,1fr); gap: 8rem; margin-top: 20rem;}
    .monitering1 .monitering_btn li a {min-width: auto; font-size: 14rem; padding: 15rem 0;}
    /* 원격감시제어 */
    .system_list {margin-top: 30rem;}
    .system_list li {padding: 25rem;}
    .system_list li .name {margin-bottom: 15rem; gap: 10rem;}
    .system_list li .name p {font-size: 18rem;}
    .system_list li .name span {width: 32rem; height: 32rem; line-height: 32rem; font-size: 14rem; font-weight: 400;}
    .system_list li + li {margin-top: 15rem;}
}