.sub-top1 {background:url(../images/005/sub1-bg.jpg);background-size:cover;}

/*지속가능경영전략===*/
.st-top {background:url('../images/005/strategy-top.jpg');background-size:cover;height:608px;color:#fff;
    padding-left:80px;padding-top:140px;margin-bottom:100px;width:1400px;margin-left:auto;margin-right:auto;transition:width 0.3s ease;}
.st-top2 {background:url('../images/005/strategy-top2.jpg');background-size:cover;transition:width 0.3s ease;}
.st-top3 {background:url('../images/005/strategy-top3.jpg');background-size:cover;transition:width 0.3s ease;}
.st-top4 {background:url('../images/005/strategy-top4.jpg');background-size:cover;transition:width 0.3s ease;}
.st-top5 {background:url('../images/005/strategy-top5.jpg');background-size:cover;transition:width 0.3s ease;}
.st-top .t1 {font-size:21px;font-weight:500;}
.st-top .t2 {font-size:40px;font-weight:500;margin-bottom:15px;margin-top:8px;}
.st-top p {font-size:19px;font-weight:300;word-break: keep-all;}
.st-top ul {display:flex;width:1026px;margin:0 auto;justify-content: space-between;margin-top:120px;}
.st-top ul li {
    width:320px;height:250px;border-radius:10px;background-color: #264a9e;
    background-image: linear-gradient(180deg, #f3f3f3 50%, #a0a0a0 100%);
    display:flex;flex-direction:column;align-items:center;justify-content: center;
}
.st-top ul li .i1 {font-size:22px;font-weight:500;color:#000;margin-bottom:3px;margin-top:20px;}
.st-top ul li .i2 {font-size:17px;font-weight:300;color:#666;}
.strategy {display:flex;gap:50px;margin:100px 0}
.strategy2 {flex-direction:row-reverse}
.strategy .right {width:calc(100% - 650px);    display: flex;flex-direction: column;justify-content: center;}
.strategy .right .tit {font-size:30px;font-weight:600;color:#c4cad7;display:inline-block;margin-right:15px;}
.strategy .right .tit2 {font-size:32px;color:#c4cad7;letter-spacing:-2px;font-weight:500;}
.strategy .right ul {margin-top:25px;display:flex;flex-direction:column;gap:15px;}
.strategy .right ul li {border-radius:5px;background:#e2e4e9;padding:18px 30px;}
.strategy .right ul li div {position:relative;color:#389339;font-size:17px;font-weight:400;padding-left:15px;}
.strategy .right ul li div:before {content:'';display:inline-block;width:6px;height:17px;background:#1c489d;position:absolute;top:5px;left:0;}
.strategy .right ul li p {font-size:23px;font-weight:400;word-break:keep-all}
.st-section3 {
    height:500px;background:url('../images/005/strategy-bt.jpg');background-size:cover;display:flex;align-items:center;justify-content:center;
    background-position: center -40%;
    background-repeat: no-repeat;
}
.st-section3 p {color:#fff;font-size:36px;font-weight:500;text-align:center;word-break:keep-all}
.st-section3.st-bt2 {background:url('../images/005/strategy-bt2.jpg');background-size:cover;background-position: center -40%;
    background-repeat: no-repeat;}
.st-section3.st-bt3 {background:url('../images/005/strategy-bt3.jpg');background-size:cover;background-position: center -40%;
    background-repeat: no-repeat;}
.st-section3.st-bt4 {background:url('../images/005/strategy-bt4.jpg');background-size:cover;background-position: center -40%;
    background-repeat: no-repeat;}
.strategy img { filter: grayscale(100%);transition: filter 0.6s ease-out;}
/*.tit밑줄효과*/
.tit-wrap .tit {
  position: relative;
  display: inline-block;
  font-size: 36px;
  color: #1c489d;
  z-index: 1;
  transition: color 0.7s ease;
  padding: 0 0.5em; /* ← 글자 자체에 시각적 여유 */
}
  
.tit-wrap .tit::before {
  content: "";
  position: absolute;
  left: -0.2em;  /* ← 왼쪽으로 살짝 확장 */
  bottom: 0;
  height: 100%;
  width: calc(100% + 0.4em); /* ← 전체 너비 + 좌우 확장 */
  background-color: #1c489d;
  transform: scaleX(0);
  transform-origin: left;
  z-index: -1;
  transition: transform 1.4s ease;
}
.tit-wrap .tit.revealed {color: #fff;}
.tit-wrap .tit.revealed::before {transform: scaleX(1);}

/*사이버 신문고*/
.re-tit {padding-left:5px;font-size: 25px;font-weight: 600;position:relative;padding-left:20px}
.re-tit:before {content: '';display: inline-block;width: 7px;height: 20px;background: #1c489d;position: absolute;left: 0;top: 10px;}
.re-cont {background:#fff;margin-bottom:30px;margin-top:8px;padding:20px 30px;border-radius:15px;border:3px solid #c3dbdb}
.re-cont li {line-height:1.55}
.re-cont p, .re-cont li {word-break:keep-all;font-size:18px;position:relative;padding-left:10px;}
.re-cont p:before, .re-cont li:before {content:'';display:inline-block;position:absolute;width:3px;height:3px;background:#4c7979;left:0;top:13px;}
.re-cont li.no {font-size: 17px;font-weight: 500;color: #1c489d;margin-bottom:5px;margin-top:10px;display: inline-block;background: #ebf2fb;border-radius: 5px;padding: 0 10px;}
.re-cont li.no:before {display:none;}
.report-bt {transition:all .4s;font-size:20px;color:#fff;font-weight:600;display:block;margin:0 auto;background:#1c489d;padding:12px 0;text-align:center;width:160px;}
.report-bt:hover {background:#0c2e72;}

@media screen and (max-width:1600px) {
  .st-top {width:100% !important;padding-left:0;}
}
@media screen and (max-width:1366px) {
  .st-top {height:500px;}
  .st-top ul {width:1000px;margin-top:60px}
  .st-top .t1 {font-size:19px;}
  .st-top .t2 {margin-top:0;font-size:36px;margin-bottom:10px;}
  .st-top p {font-size:17px;}
  .st-top ul li .i1 {font-size:19px;text-align:center;word-break:keep-all}
  .st-top ul li .i2 {font-size:15px;text-align:center;word-break:keep-all}
  .st-top ul li {width: 300px;height: 220px;}
  .section-tit {font-size:32px;}
  .strategy {margin:60px 0;}
  .strategy .right .tit, .strategy .right .tit2 {font-size:24px;}
  .strategy .right .tit {margin-right:5px;}
  .strategy .right ul {margin-top:20px;}
  .strategy .right ul li p {font-size:21px;}
  .strategy .right ul li div {font-size:16px;}
  .st-section3 {height:400px;}
  .st-section3 p {font-size:29px;}
  .strategy img {width:50%;height:auto;align-self: flex-start;}
  .strategy .right {width:50%;}
  .st-top ul {width: 100%;margin-top: 60px;margin-left: 0;margin-right: 0;gap: 15px;justify-content: center;} 
}
@media screen and (max-width:1024px) {
  .st-top {height: 350px;padding-top:50px;margin-bottom:50px}
  .st-top .t2 {font-size:26px;}
  .st-top .t1 {font-size:16px;}
  .st-top p {font-size:16px;}
  .st-top ul {margin-top:30px;}
  .st-top ul li {width: 240px;height: 200px;}
  .st-top ul li img {width:70px;}
  .st-top ul li .i1 {margin-top:10px;margin-bottom:0;}
  .section-tit {font-size:26px;}
  .strategy {gap:30px;}
  .strategy .right .tit, .strategy .right .tit2 {font-size:20px;}
  .strategy .right ul li p {font-size:18px}
  .strategy .right ul li div {font-size:14px;}
  .strategy .right ul {margin-top:13px;}
  .strategy .right ul li {padding: 8px 20px;}
  .strategy .right ul {gap:10px;}
  .strategy .right {width: 60%;}
  .strategy img {width: 40%;}
  .st-section3 {height:300px;}
  .st-section3 p {font-size:22px;}
  .strategy .right .tit2 {letter-spacing:0;}
  .strategy .right ul li div {padding-left:12px;}
  .strategy .right ul li div:before {width: 6px;height: 14px;top: 4px;}

  .re-tit {font-size:22px;padding-left:17px;}
  .re-tit:before {top:9px;height:17px;}
  .re-cont p, .re-cont li {font-size:16px;}
  .re-cont {padding:14px 20px;}
  .report-bt {width:140px;padding: 10px 0;font-size: 17px;font-weight: 500;}
}

@media screen and (max-width:768px) {
  .st-top {height:280px;padding-top:40px;}
  .st-top .t2 {font-size:21px}
  .st-top .t1,.st-top p {font-size:14px;}
  .st-top ul li {width: 180px;height: 150px;}
  .st-top ul li .i1 {font-size:13px}
  .st-top ul li .i2 {font-size:11px;}
  .section-tit {font-size:20px;}
  .strategy {margin:40px 0;}
  .strategy .right .tit, .strategy .right .tit2 {font-size:16px;}
  .strategy .right ul li p {font-size:14px;}
  .strategy .right ul li div {font-size:12px;padding-left:9px;}
  .strategy .right ul li div:before {width: 4px;height: 12px;top: 3px;left: 0;}
  .st-section3 {height:200px;}
  .st-section3 p {font-size:16px;}
  .strategy .right ul {gap:5px;}

  .re-tit {font-size:18px;padding-left:13px;}
  .re-tit:before {top:6px;}
  .re-cont p, .re-cont li {font-size:16px;}
  .re-cont {margin-bottom: 20px;margin-top: 6px;}
  .report-bt {width:140px;padding: 10px 0;font-size: 15px;font-weight: 500;}
}

@media screen and (max-width:540px) {
  .st-top {height:240px;}
  .st-top .t2 {font-size:18px;}
  .st-top .t1, .st-top p {font-size:14px;}
  .st-top ul {gap:5px;}
  .st-top ul li {height:120px;}
  .st-top ul li img {width:50px;}
  .st-top ul li .i1 {font-size:13px;}
  .st-top ul li .i2 {font-size:12px;text-align:center;word-break:keep-all;}
  .section-tit {font-size:16px;}
  .strategy {flex-direction:column;gap:15px;}
  .strategy img {width:100%}
  .strategy .right {width:100%;}
  .st-section3 {height:140px;}
  .st-section3 p {font-size:14px;}
  .st-top ul li .i1,.st-top ul li .i2 {text-align:left;}
  .st-top .t1, .st-top p {word-break:keep-all}

  .re-tit {font-size:15px;}
  .re-tit:before {top:3px;}
  .re-cont p, .re-cont li {font-size:14px;}
  .re-cont li.no {font-size:15px;}
}
@media screen and (max-width:480px) {
  .strategy {margin:20px 0;}
  .strategy .right .tit2 {display:block;}
  .strategy img{width:60%;margin:0 auto;}
  .strategy .right .tit, .strategy .right .tit2 {font-size:18px;}
  .strategy .right ul li p {font-size:11px;}
  .strategy .right ul li div {font-size:14px;}
  .strategy .right ul li div:before {height:16px;}
  .strategy .right ul {margin-top:5px;justify-content: center;flex-direction: column;}
  .st-top {height: auto;padding-bottom: 30px;margin-bottom:0;}
  .st-top ul {flex-direction: column;}
  .st-top ul li {flex-direction:row;height:40px;padding:0 15px;width:100%;border-radius:5px;justify-content: flex-start;}
  .st-top ul li .i1 {margin-top:0;margin:0 5px;}
  .st-top ul li img {width:30px;}
  .right .tit-wrap {text-align:center;}
  .st-section3 {height:110px;}
  .st-top p br {display:none;word-break:keep-all;}
  .st-top .t2,.section-tit,.strategy .right ul li p,.strategy .right .tit,.st-section3 p {word-break:keep-all;}
}