@charset "utf-8";
/* 공통 */
:root{--primary:#4ed3de;--dark:#333d4b;--mainsize:1100px;--k-font:'pretendard'}
#sh_sub23{position:relative;min-height:440px;color:#777}
#sh_content {min-height: 0}

/* =========================== PAGE */
.pagecommon{position:relative;font-size:15px;;line-height:1.3;color:var(--dark)}
.pagecommon .pl{white-space:pre-line; padding: 40px 0 0 0; line-height: 34px; font-size: 20px}
.pagecommon *{word-break:keep-all}
.pagecommon .inner{max-width:var(--mainsize);margin:0 auto; padding-bottom: 100px}
.pagecommon sup{vertical-align: super;font-size: 20px}

#sh_sub23 .tit{text-align:center}
#sh_sub23 .tit h1{margin-bottom:50px;font-size:48px;font-weight:700}
#sh_sub23 .tit div{font-size:20px}


#sh_sub23 .txt .bnr18 {width: 60%;height: 430px;margin: 100px 0 0 0;border-radius: 50px;font-size: 35px;font-weight: 700;color: #fff;background: url(/images/sub/sub23_1.svg?v=20197cb71c19a0ab1c3b372dc197bd87) center;object-fit: contain;background-size: contain;background-repeat: no-repeat;cursor: default;}

#sh_sub23 .bnr19{width:70%;height:300px;margin:50px auto;font-size:35px;font-weight:700;color:#fff;background:url(/images/sub/sub23_2.svg?v=74929b9df8707d503c381e29a80f949f) center;background-size:contain;cursor: default;background-repeat: no-repeat;}
#sh_sub23 .bnr20{width:70%;height:300px;margin:50px auto;font-size:35px;font-weight:700;color:#fff;background:url(/images/sub/sub23_3.svg?v=3bcd417c5c4d8ca80e446817757adb0a) center;background-size:contain;cursor: default;background-repeat: no-repeat;}
#sh_sub23 .bnr21{width:70%;height:300px;margin:50px auto;font-size:35px;font-weight:700;color:#fff;background:url(/images/sub/sub23_4.svg?v=402f8642c2bc04146bd69af336b8e99b) center;background-size:contain;cursor: default;background-repeat: no-repeat;}
#sh_sub23 .bnr22{width:70%;height:300px;margin:50px auto;font-size:35px;font-weight:700;color:#fff;background:url(/images/sub/sub23_5.svg?v=6f935689ad4e3e97458d0f441f98c9aa) center;background-size:contain;cursor: default;background-repeat: no-repeat;}
/* ----------- box 효과 */
#sh_sub23 .box07{margin-bottom: 150px}
#sh_sub23 .box07 dt{font-size:18px;font-weight:700;color:#111}
#sh_sub23 .box07>div+div{margin-top:150px}
#sh_sub23 .box07 ul{display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;text-align: center}
#sh_sub23 .box07 ul li div{overflow:hidden;margin-bottom:20px;border-radius:20px}
#sh_sub23 .box07 ul li dt{margin-bottom:10px}
#sh_sub23 .box07 ul li div img {width: 100%;height: auto;display: block}


#sh_sub23 .bnr ul{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;height:100%;text-align:center}
#sh_sub23 .bnr li{position:relative}
#sh_sub23 .bnr li~li:before{position:absolute;content:'';top:50%;left:0;width:10px;height:10px;border-radius:50px;background:#fff}

#sh_sub23 .bsn li{justify-content:space-between}
#sh_sub23 .bsn li~li{position:relative}
#sh_sub23 .bsn .txt{display:flex;flex-direction:column;padding: 70px;align-items:center;justify-content:space-evenly}
#sh_sub23 .bsn .txt p{margin-bottom: 70px; line-height: 50px; font-size: 34px;font-weight: 600;color: #41495e; text-align: center}
#sh_sub23 .bsn .txt span{display:inline-block;padding:5px 30px;border:1px solid #e1e1e1;border-radius:50px;font-size:18px;font-weight:700;background-color: #182a3a;color: #fff}

#sh_sub23 .bsn a{position:relative;display:block;}

#sh_sub23 .bsn a div{position:absolute;right:0;bottom:0;width:92px;height:92px}
#sh_sub23 .bsn a div span{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50px;color:#fff;background:#111;transition:all .3s}

@media(hover:hover){
#sh_sub23 .bsn a:hover div span{background:var(--primary)}
}
@media(max-width:1024px){
#sh_sub23 .tit div{font-size:17px}
#sh_sub23 .bnr{width:100%;height:500px;font-size:22px}
#sh_sub23 .bnr li~li:before{left:-3px;width:6px;height:6px}
#sh_sub23 .bsn{padding:0 20px}
#sh_sub23 .bsn .txt span{font-size:16px}
#sh_sub23 .bsn a{width:100%;background-position:center}
#sh_sub23 .box07 ul {grid-template-columns: repeat(2, 1fr)}
}
@media(max-width:768px){
#sh_content {padding:50px 0 0 0}
.pagecommon{line-height:1.5}
#sh_sub23 .tit div{padding:0 20px;font-size:15px}
#sh_sub23 .bnr{width:100%;height:350px;margin:50px auto 100px;font-size:20px}
#sh_sub23 .bsn li{gap:50px}
#sh_sub23 .bsn .txt{width:100%}
#sh_sub23 .bsn .pl{white-space:normal}
#sh_sub23 .txt .bnr12{width: 100%;height: 800px;margin: 0 auto}
#sh_sub23 .txt .bnr15{width: 100%;height: 500px;margin: 0 !important}
#sh_sub23 .bnr16,#sh_sub23 .bnr17{border-radius:20px !important}
#sh_sub23 .box07 ul {grid-template-columns: 1fr}
#sh_sub23 .bsn .pl br { display: none; }
}
@media(max-width:580px){
#sh_sub23 .bnr ul{display:flex;flex-direction:column;justify-content:center;gap:50px}
#sh_sub23 .bnr li~li:before{top:-25px;left:50%;transform:translateX(-50%)}
#sh_sub23 .bsn h2{font-size:22px}
#sh_sub23 .bsn .txt span{font-size:14px}
#sh_sub23 .bsn li{flex-wrap:wrap;gap:25px}
#sh_sub23 .bsn .txt{width:100%;gap:10px;align-items:center;text-align:center}
#sh_sub23 .bsn a{width:100%;height:150px}
#sh_sub23 .bsn .txt{padding: 0 !important;margin: 50px 0}
#sh_sub23 .txt .bnr12{width: 100%;height: 500px;margin: 0 auto}
#sh_sub23 .txt .bnr15{width: 100%;height: 500px;margin: 0 !important}
#sh_sub23 .bnr16,#sh_sub23 .bnr17{border-radius:20px !important}
#sh_sub23 .bnr18{margin: 0 !important ;width: 80% !important}
/*#sh_sub23 .bnr19{margin: 0 !important}*/
}
@media(max-width:390px){
#sh_sub23 .bnr{width:100%;margin:50px auto}
#sh_sub23 .bsn li~li{margin-top:60px}
#sh_sub23 .txt .bnr12{width: 100%;height: 300px;margin: 0 auto}
#sh_sub23 .bnr16,#sh_sub23 .bnr17{border-radius:20px !important}
}


/* ====== Global fix: prevent horizontal scroll ====== */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Containment on main wrappers */
#sh_wrapper,
#sh_container,
#sh_content,
#sh_sub23 {
  overflow-x: hidden;
}

/* Safer sizing */
*, *::before, *::after { box-sizing: border-box; }

/* Media elements shouldn't exceed viewport width */
img, video, svg, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Defensive fix for positioned badges/buttons that might peek out */
#sh_sub23 .bsn a div {
  right: 0;
  max-width: 100%;
  overflow: hidden;
}