@charset "utf-8";

.doc-tit {margin-bottom: 40px; padding-left: 35px; font-size: var(--font-size-28); letter-spacing: -.03em; line-height: 1.2em; font-weight: 700; color: #242424; position: relative;}
.doc-tit::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 21px; height: 21px; background-repeat: no-repeat; background-size: contain; background-image: url(/images/sub/doc-ico.png);}

.intro .tit {margin: 35px 0; color: var(--color-primary); font-size: var(--font-size-20); font-weight: 700; letter-spacing: -.03em; line-height: 1.2em;}
.intro .top {display: flex; margin-top: 40px; margin-bottom: clamp(50px, calc( 120 / var(--inner) * 100vw ), 120px);}
.intro .top .left {width: 50%;}
.intro .top .left h2 {margin-bottom: 10px; color:#242424; font-size: var(--font-size-32); font-weight: 400; letter-spacing: -.03em; line-height: 1.25em;}
.intro .top .left p {color:#242424; font-size: var(--font-size-18); letter-spacing: -.03em; line-height: 1.44em;}
.intro .top .right {flex:1 1 auto; min-width:0; width:1%;}
.intro .top .right dl {display: flex; align-items: center; border-bottom: 1px solid #ddd;}
.intro .top .right dl:first-child {border-top: 1px solid #aaa;}
.intro .top .right dt {width: 175px; padding: 20px 40px; font-size: var(--font-size-16); font-weight: 500; letter-spacing: -.03em; line-height: 1.44em; color:#242424; text-transform: uppercase;}
.intro .top .right dd {font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.44em; flex:1 1 auto; min-width:0; width:1%;}
.intro .btm .info ul {display: flex; width: 100%; margin: 0 -20px;}
.intro .btm .info li {width: 33.33%; padding: 0 20px; text-align: center;}
.intro .btm .info li .box {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; height: 385px; border: 1px solid #ddd; border-radius: 16px;}
.intro .btm .info li .box .tt {margin: 35px 0 15px; font-size: var(--font-size-20); font-weight: 700; letter-spacing: -.03em; line-height: 1.44em; color: #242424;}
.intro .btm .info li .box .tt2 {font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.63em; color: #242424;}

.root_daum_roughmap {width:100% !important;}
.root_daum_roughmap .wrap_controllers,
.root_daum_roughmap .border1,
.root_daum_roughmap .border2,
.root_daum_roughmap .border3,
.root_daum_roughmap .border4 {display: none;}
.directions {margin-top:40px;}
.directions .address-info {margin-bottom:30px;}
.directions .address-info .comp {color:var(--color-primary); font-weight:600; margin-bottom:2px;}
.directions .address-info .addr {color:#242424; font-size:23px; font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:5px;}
.directions .address-info .etc {color:#454545;}
.directions .address-info .etc span {display:inline-block; margin-right:16px;}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .contact-info {border-top:1px solid #ddd; line-height:1.5em;}
.directions .contact-info dl {display:flex; padding:28px 0; border-bottom:1px solid #ddd;}
.directions .contact-info dt {width:180px; padding-left:30px; color:#242424; font-size:1.125em; font-weight:500;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:#004c97; opacity: .5;}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}

@media (max-width: 1024px) {
	.root_daum_roughmap .wrap_map {height:300px !important;}
	.directions .address-info .addr {font-size:20px;}
	.directions .contact-info dl {padding:20px 0;}
	.directions .contact-info dt {padding-left:20px; width:140px;}
}

@media (max-width: 640px) {
	.root_daum_roughmap .wrap_map {height:250px !important;}	
	.directions {margin-top:30px;}
	.directions .address-info .addr {font-size:18px;}
	.directions .address-info {margin-bottom:20px;}
	.directions .contact-info dl {padding:16px 0;}
	.directions .contact-info dt {padding-left:5px; width:110px;}
	.directions .contact-info dt svg {margin-right:10px;}
}

.org-img {text-align: center;}

.cert ul {display: flex; flex-wrap: wrap; margin: 0 -20px -40px;}
.cert ul li {padding: 0 20px; width: 25%; text-align: center; margin-bottom: 40px;}
.cert ul li p {margin-top: 15px; font-size: var(--font-size-18); font-weight: 500; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}

.product-intro {background-image: url(/images/sub/biz-img23.jpg); width: 100%; height: 100vh; background-position: 50%; background-repeat: no-repeat; background-size: cover;}
.product-intro ul {display: flex; height: 100%;}
.product-intro ul li {width: 25%; position: relative; }
.product-intro ul li .box {position: relative; z-index: 1;height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.product-intro ul li .box h2 {margin: 60px 0 15px; font-size: var(--font-size-40); letter-spacing: -.03em; line-height: 1.2em; color: #fff;}
.product-intro ul li .box p {font-size: var(--font-size-16); letter-spacing: -.02em; line-height: 1.2em; color: #fff;}
.product-intro ul li .box .more {margin-top: 35px; display: inline-flex; align-items: center; justify-content: space-between; font-size: var(--font-size-14); letter-spacing: -.02em; line-height: 1.2em; color: #fff; width: 140px; height: 40px; padding: 0 20px; border: 1px solid #fff; border-radius: 20px;}
.product-intro ul li .box .more .img {background-image: url(/images/sub/more.png); width: 4px; height: 10px; background-position: 50%; background-repeat: no-repeat; background-size: contain;}
.product-intro ul li .box:hover .more {background-color: #fff; color: #242424;}
.product-intro ul li .box:hover .more .img {background-image: url(/images/sub/more-on.png);}
.product-intro ul li:hover::before {content: ''; position: absolute;  left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient( 0deg, rgb(0,76,151) 0%, rgb(57,157,38) 100%); opacity: 0.4;}

.product>h2 {margin-bottom: 40px; font-size:var(--font-size-32); letter-spacing: -.03em; line-height: 1.2em; color:#242424;}
.product .doc-sec {padding-top: clamp(50px, calc( 120 / var(--inner) * 100vw ), 120px);}
.product .doc-sec.sec01 {margin-top: clamp(50px, calc( 60 / var(--inner) * 100vw ), 60px);}
.product .doc-sec .tt01 {margin-bottom: 20px; margin-top: 15px; text-align: right; font-size:var(--font-size-15); letter-spacing: -.03em; line-height: 1.2em; color:#686868;}

.product .imgs {background-color: #f6f6f6; display: flex; padding: 28px 32px;}
.product .imgs .img {width: 50%; display: inline-flex; align-items: center; justify-content: center;} 
.product .imgs>img {flex:1 1 auto; min-width:0; width:1%;}

.product .tbl table {width: 100%; border-collapse: collapse; border-spacing: 0px;}
.product .tbl th, 
.product .tbl td {height: 60px; padding: 7px 15px; border: 1px solid #ddd;}
.product .tbl th {background: #f6f6f6; font-weight: 700; color: #242424;}
/* .product .tbl td {border-right: 0;} */
.product .tbl02 td {text-align: center;}
.product .tbl th:first-child,
.product .tbl td:first-child {border-left: 0;}
.product .tbl th:last-child,
.product .tbl td:last-child {border-right: 0;}

.doc-sec .items {display: flex; flex-wrap: wrap; margin: 0 -20px -35px;}
.doc-sec .items .item {padding: 0 20px; width: 20%; margin-bottom: 35px;}
.doc-sec .items .item .box {text-align: center;}
.doc-sec .items .item .img {background-color: #f6f6f6; border-radius: 16px; display: flex ; align-items: center; justify-content: center; height: 208px;}
.doc-sec .items .item .tit {margin: 15px 0 10px; font-size: var(--font-size-18); letter-spacing: -.03em; font-weight: 700; line-height: 1.2em; color: #242424;}
.doc-sec .items .item .txt {font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.63em; }

.electric .items {display: flex; justify-content: center; margin: 0 -20px;}
.electric .items .item {padding: 0 20px;}
.electric .items .item .box {text-align: center;}
.electric .items .item .img-box {position: relative; background-color: #f6f6f6; width: 320px; height: 320px; display: flex ; flex-direction: column; justify-content: center; border-radius: 16px; overflow: hidden;}
.electric .items .item .img-box .img {text-align: center;}
.electric .items .item .img-box .txt {display: none;}
.electric .items .item .box>h3 {margin-top: 35px; font-size: var(--font-size-24); letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.electric .items .item .box:hover .img-box .txt {display: flex; position: absolute; flex-direction: column;  align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(45deg, rgb(0, 76, 151) 0%, rgb(57, 157, 38) 100%);}
.electric .items .item .img-box .txt h3 {font-size: var(--font-size-24); letter-spacing: -.03em; line-height: 1.2em; color: #fff;}
.electric .items .item .img-box .txt ul {margin: 15px 0 35px;}
.electric .items .item .img-box .txt li {font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.63em; color: #fff;}

.electric-tab ul {margin: 0 -10px clamp(50px, calc( 130 / var(--inner) * 100vw ), 130px); display: flex; justify-content: center;}
.electric-tab li {padding: 0 10px;}
.electric-tab a {display: inline-flex; align-items: center; justify-content: center; width: 240px; height: 40px; font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.2em; color: #aaa; font-weight: 500; border-radius: 8px; background-color: #f6f6f6;}
.electric-tab li.active a {background-color: var(--color-primary); color: #fff;}