@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

.greeting {display:flex;}
.greeting .photo {width:450px}
.greeting .info {width:calc(100% - 450px); padding-left:60px;}
.greeting .info .txt {font-size:18px; line-height:1.4em; letter-spacing:.05em; margin-bottom:20px;}
.greeting .info .slogon {margin-bottom:35px;}
.greeting .info .cnt {margin-bottom:25px; font-size:20px;line-height:1.7em; text-align:justify; word-break:break-all;}
.greeting .info .cnt strong {font-size:24px; color:#2c2c2c;}
.greeting .info .sain {display:flex; justify-content:flex-end; align-items:center;}
.greeting .info .sain .tit {font-size:20px ;line-height:1.4em; color:#2c2c2c;font-weight:700; padding-right:30px;}

.doc-title {border-bottom:1px solid #ddd;  margin-bottom:35px;}
.doc-title h3 {display:inline-block; position:relative; padding-bottom:20px; font-size:40px; line-height:1.4em; font-weight:500; color:#2c2c2c;}
.doc-title h3:after {content:"";position:absolute; bottom:-1px; left:0; width:100%; height:2px; background: linear-gradient(to left, #ff0b0b, #1e2087);}

.overview {background:url('../images/sub/overview_bg.png') 100% 0 no-repeat; min-height:780px}
.overview .head {margin-bottom:35px;}
.overview .head strong {font-size:36px; color:#1e2087; line-height:1.4em;display:block; margin-bottom:10px;}
.overview .head .tit {font-size:28px; line-height:1.4em; color:#2c2c2c; font-weight:500; margin-bottom:10px;}
.overview .head p {font-size:22px; line-height:1.5em; color:#878787;}
.overtable {max-width:700px;}
.overtable table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #1e2087; font-size:18px; line-height:1.5em; }
.overtable table tbody th {padding:15px 5px; color:#2c2c2c; font-weight:700; background:#f4f4f4; border-bottom:1px solid #dfdfdf;}
.overtable table tbody td {padding:15px 20px; color:#505050; border-bottom:1px solid #dfdfdf;}

.vision {display:flex; align-items:center;}
.vision .col {width:50%;}
.vision .info {padding-left:30px; color:#2c2c2c;} 
.vision .info .group {display:flex; align-items:center; margin-bottom:25px;}
.vision .info .group:last-child {margin-bottom:0;}
.vision .info .group .tit {width:155px; font-size:36px; line-height:1.4em; font-weight:700;}
.vision .info .group .tit strong {font-weight:800; color:#ff0b0b}
.vision .info .group .text {width:calc(100% - 155px); font-size:24px; line-height:1.4em; font-weight:500;}

.ci {display:flex; align-items:center;}
.ci .img-box {width:50%; background:url('../images/sub/bg_pattern.gif') 0 0 repeat; border:1px solid #dfdfdf; padding:55px 0; text-align:center;}
.ci .info {width:50%; padding-left:30px;color:#2c2c2c; font-size:24px; line-height:1.8em; font-weight:500;}

.history-head {position:relative; padding-bottom:100px;}
.history-head .since {position:absolute; bottom:94px; left:0; width:100%; text-align:center;}
.history-head .since .tit {display:inline-block; position:relative; font-size:80px; line-height:.7em; color:#fff;font-weight:800; letter-spacing:0.4em;}
.history-head .since .tit:after {content:"";position:absolute; bottom:-6px; left:0; width:100%; height:6px; background:#1e2087}
.history-head:after {content:"";position:absolute; bottom:0; left:50%; width:1px; height:100px; background:#dfdfdf; margin-left:-.05px; z-index:-1}
.history {}
.history .col {display:flex; position:relative; padding-bottom:100px;}
.history .col:after {content:"";position:absolute; top:0; left:50%; width:1px; height:100%; background:#dfdfdf; margin-left:-.05px; z-index:-1}
.history .col:last-child {padding-bottom:0;}
.history .col:last-child:after {height:15px;}
.history .col .img {width:50%; text-align:right; padding-right:50px; padding-top:15px;}
.history .col .info {width:50%; position:relative; padding-left:50px;}
.history .col .info .year {position:relative; font-size:42px; line-height:1.4em; color:#2c2c2c;font-weight:800; margin-bottom:40px;}
.history .col .info .year:after {content:"";position:absolute; top:15px; left:-63px; width:26px; height:26px; border:7px solid #1e2087; background:#fff;}
.history .col .info ul li {position:relative; padding-left:90px; font-size:18px; line-height:1.7em; font-weight:500; margin-bottom:15px;}
.history .col .info ul li:last-child {margin-bottom:0;}
.history .col .info ul li .month {position:absolute; top:0; left:0; font-size:20px; line-height:1.7em; color:#2c2c2c;font-weight:800;}
.history .col .box {margin-bottom:60px;}
.history .col .box:last-child {margin-bottom:0;}
.history .col.order .img {order:2; text-align:left; padding-right:0; padding-left:50px;}
.history .col.order .info {order:1; text-align:right; padding-left:0; padding-right:50px;}
.history .col.order .info .year:after {left:auto; right:-63px;}
.history .col.order .info ul li {padding-right:90px; padding-left:0;}
.history .col.order .info ul li .month {left:auto; right:0;}

.partner ul {display:flex; flex-wrap:wrap; margin-left:-40px;}
.partner ul li {width:25%; padding-left:40px; text-align:center;}
.partner ul li .pic {margin-bottom:15px;}
.partner ul li .tit {font-size:20px; line-height:1.4em; color:#2c2c2c; font-weight:700;}
 

.root_daum_roughmap {width:100% !important; height:520px !important;}
.root_daum_roughmap .wrap_map {height:520px !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"성암전력"; font-size:12px; line-height:15px;}

.location-info {margin:65px 0;}
.location-info ul {display:flex;}
.location-info ul li {width:33.333333%; text-align:center; position:relative;}
.location-info ul li:after {content:"";position:absolute; top:0; left:0; width:1px; height:100%; background:#dfdfdf}
.location-info ul li:first-child:after {display:none}
.location-info ul li .icon {margin-bottom:30px;}
.location-info ul li .tit {font-size:18px; line-height:1.3em; color:#1e2087;font-weight:800; margin-bottom:25px;}
.location-info ul li p {font-size:20px; line-height:1.4em; font-weight:500;}
.location-info ul li p.tel {font-size:22px;}
.location-table {border-top:2px solid #1e2087; display:flex; align-items:center; background:#f4f4f4; border-bottom:1px solid #dfdfdf;}
.location-table .title {width:320px;  text-align:center; font-size:20px ;line-height:1.4em; color:#2c2c2c; font-weight:800;}
.location-table .info {width:calc(100% - 320px); background:#fff;}
.location-table .info .col {border-bottom:1px solid #dfdfdf; display:flex; padding:16px 0; font-size:18px; line-height:1.6em;}
.location-table .info .col:last-child {border-bottom:0;}
.location-table .info .col .tit {width:150px; padding-left:20px; font-weight:700;}
.location-table .info .col .cnt {width:calc(100% - 150px);}
.location-table .info .col .cnt .label {display:inline-block; padding:0 4px; background:#1ab056; font-size:12px; line-height:21px; border-radius:5px; color:#fff;font-family:'Noto Sans KR',sans-serif; margin-right:10px;}
.location-table .info .col .cnt .label.subway {background:#ebb705}


.business-box {background:#eee; box-shadow:0 0 10px rgba(0,0,0,.15); padding:50px; text-align:center; margin-bottom:70px;}
.business-box .tit {color:#1e2087; font-size:18px; line-height:1.4em; letter-spacing:0.2em; margin-bottom:15px;}
.business-box .cnt {font-size:24px; line-height:1.6em; color:#2c2c2c;}

.cert-list ul {display:flex; flex-wrap:wrap; margin-left:-20px;}
.cert-list ul li {width:20%; padding-left:20px; margin-bottom:50px; text-align:center;}
.cert-list ul li .pic {position:relative; height:0; padding-bottom:135.4%; margin-bottom:20px; overflow:hidden;transition:0.3s;}
.cert-list ul li .pic img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; min-height:100%; object-fit:contain; transition:0.3s;}
.cert-list ul li .pic:after {content:"";position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #dfdfdf}
.cert-list ul li a:hover .pic {box-shadow:0 0 15px rgba(0,0,0,.24);}
.cert-list ul li:nth-child(5),
.cert-list ul li:nth-child(6),
.cert-list ul li:nth-child(7),
.cert-list ul li:nth-child(8),
.cert-list ul li:nth-child(9) {width:20%}
.cert-list ul li .tit {font-size:20px; line-height:1.4em;}

.table01 table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #1e2087; font-size:18px; line-height:1.5em; }
.table01 table thead th {padding:15px 5px; color:#2c2c2c; font-weight:800; background:#f4f4f4; border:1px solid #dfdfdf;}
.table01 table tbody th {padding:15px 20px; color:#2c2c2c; border:1px solid #dfdfdf;}
.table01 table tbody td {padding:15px 20px; color:#505050;text-align:center; border:1px solid #dfdfdf;}
.table01 tr th:first-child,
.table01 tr td:first-child {border-left:0;}
.table01 tr th:last-child,
.table01 tr td:last-child {border-right:0;}

.awards-list ul {display:flex; flex-wrap:wrap; margin-left:-20px; margin-bottom:-20px;}
.awards-list ul li {width:20%; padding-left:20px; margin-bottom:20px; text-align:center;}
.awards-list ul li .pic {position:relative; height:0; padding-bottom:135.2%; overflow:hidden;transition:0.3s;}
.awards-list ul li .pic img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; min-height:100%; object-fit:contain; transition:0.3s;}
.awards-list ul li .pic:after {content:"";position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #dfdfdf}
.awards-list ul li a.type2 .pic {padding-bottom:73.9%; top:50%;transform:translateY(-50%); -ms-transform:translateY(-50%);}
.awards-list ul li a:hover .pic {box-shadow:0 0 15px rgba(0,0,0,.24);}


.talent-head {text-align:center; background:url('../images/sub/talent_bg.jpg') 50% 50% no-repeat; background-size:cover;;height:380px; font-size:30px; line-height:1.7em; color:#fff;  margin-bottom:60px; letter-spacing:-.06em;}
.talent-head .cnt {padding-top:80px;}

.welfare ul{display:flex;flex-wrap:wrap; margin-left:-40px; margin-bottom:-40px;}
.welfare ul li {width:calc(25% - 40px); margin-left:40px; margin-bottom:40px; border:1px solid #1e2087; background:#fafafa; text-align:center; padding:50px 15px;}
.welfare ul li .icon {width:98px; height:98px; background:#1e2087; border-radius:100%; margin:0 auto 20px; overflow:hidden;}
.welfare ul li .tit {font-size:24px; line-height:1.4em; color:#2c2c2c; font-weight:700; margin-bottom:15px;}
.welfare ul li p {font-size:18px; line-height:1.4em;}

.recruit-box ul {display:flex; margin-left:-40px;}
.recruit-box ul li {width:calc(25% - 40px); margin-left:40px; padding:40px; border:1px solid #1e2087; background:#fafafa; position:relative;}
.recruit-box ul li:after {content:"";position:absolute; top:0; left:-28px; width:14px; height:100%; background:url('../images/sub/arrow.png') 50% 50% no-repeat; background-size:contain;}
.recruit-box ul li:first-child:after {display:none}
.recruit-box ul li .tit {color:#1e2087; font-size:24px; line-height:1.4em; font-weight:700; padding-bottom:20px; border-bottom:1px solid #ddd; margin-bottom:20px;}
.recruit-box ul li p {font-size:18px; line-height:1.6em;}

.recruit-cnt {}
.recruit-cnt ul li {font-size:20px; line-height:1.4em; margin-bottom:6px;text-indent:-10px; padding-left:10px;}
.recruit-cnt ul li strong {font-size:20px; color:#2c2c2c;}
.recruit-cnt p {color:#ff0b0b;font-weight:700;}