:root{
  --ink:#28343a;--sub:#657279;--line:#dce5e9;--bg:#f5f8f9;
  --white:#fff;--navy:#31586b;--navy2:#244553;--blue:#edf5f8;
  --mint:#edf6f2;--green:#456f60;--warm:#fff7ed;--gold:#b98242;
  --shadow:0 14px 34px rgba(39,66,79,.08)
}


.ip38-hero-in{
  width:100%;
  max-width:860px;
  margin:0 auto;
  padding:0px 25px 54px;
}
.ip38-badge{
  display:inline-block;
  margin:0 0 15px;
  padding:6px 12px;
  background:#edf6f2;
  border:1px solid #d5e5de;
  border-radius:999px;
  color:#386657;
  font-size:13px;
  font-weight:900;
}
.ip38-hero h1{
  margin:0 0 18px;
  padding:0;
  color:#28343a;
  font-size:clamp(31px,4.2vw,49px);
  font-weight:900;
  line-height:1.25;
}
.ip38-hero h1 em{
  display:block;
  margin-top:7px;
  color:#244553;
  font-style:normal;
}
.ip38-lead{
  max-width:780px;
  margin:0 0 18px;
  color:#4f5c63;
  font-size:18px;
  line-height:1.9;
}
.ip38-answer{
  max-width:780px;
  margin:20px 0;
  padding:16px 19px;
  background:#fff;
  border-left:5px solid #31586b;
  border-radius:0 12px 12px 0;
  color:#36464e;
  font-weight:700;
  line-height:1.8;
}
.ip38-hero-points{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:780px;
  gap:9px;
  margin:21px 0 24px;
}
.ip38-hero-points div{
  padding:11px 7px;
  background:#fff;
  border:1px solid #dce5e9;
  border-radius:10px;
  text-align:center;
  font-size:12px;
  font-weight:900;
  line-height:1.5;
}
.ip38-btnrow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.ip38-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 18px;
  border-radius:9px;
  font-size:14px;
  font-weight:900;
}
.ip38-btn-primary{background:#31586b;color:#fff}
.ip38-btn-secondary{
  background:#fff;
  border:1px solid #cbd6db;
  color:#244553;
}


.problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.problem{
  background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px
}
.problem .num{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue);color:var(--navy);font-weight:900;margin-bottom:10px
}
.problem b{display:block;color:var(--navy2);font-size:16px;margin-bottom:5px}
.problem p{margin:0;color:var(--sub);font-size:13px}


.ip38-view-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ip38-view-card{overflow:hidden;background:#fff;border:1px solid #dce5e9;border-radius:16px}
.ip38-view-card .ip38-photo{border:0;border-radius:0;box-shadow:none}
.ip38-view-body{padding:17px}
.ip38-view-title{margin-bottom:5px;color:#244553;font-size:18px;font-weight:900}
.ip38-view-body p{margin:0;color:#657279;font-size:14px}

.ip38-window-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ip38-window{
  padding:18px 12px;background:#fff;border:1px solid #dce5e9;border-radius:14px;text-align:center
}
.ip38-window b{display:block;color:#244553;font-size:15px;line-height:1.5}
.ip38-window span{display:block;margin-top:5px;color:#657279;font-size:12px;line-height:1.55}

.ip38-case{
  margin-bottom:20px;padding:22px;background:#fff;border:1px solid #dce5e9;
  border-radius:18px;box-shadow:0 14px 34px rgba(39,66,79,.07)
}
.ip38-case-title{margin-bottom:13px;color:#244553;font-size:22px;font-weight:900;line-height:1.5}
.ip38-case-who{display:block;margin-top:3px;color:#456f60;font-size:12px;font-weight:900}
.ip38-case-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.ip38-case-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
.ip38-case .ip38-photo img{aspect-ratio:4/3}
.ip38-quote{
  margin:0;padding:15px 17px;background:#f7fafb;border-left:4px solid #31586b;
  color:#4e5c63;font-size:14px
}
.ip38-case small{display:block;margin-top:8px;color:#7b888e}

.ip38-spec-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ip38-spec{
  padding:19px 15px;background:#fff;border:1px solid #dce5e9;border-radius:14px;text-align:center
}
.ip38-spec b{display:block;margin-bottom:5px;color:#244553;font-size:16px}
.ip38-spec p{margin:0;color:#657279;font-size:13px}
.ip38-caution{
  margin-top:15px;padding:16px 18px;background:#fff7ed;
  border-left:5px solid #b98242;border-radius:0 12px 12px 0;
  color:#5f574d;font-size:14px
}
.ip38-sample{
  display:grid;grid-template-columns:.95fr 1.05fr;gap:18px;
  padding:22px;background:#fff;border:1px solid #dce5e9;border-radius:18px
}
.ip38-sample-copy{display:flex;flex-direction:column;justify-content:center}
.ip38-sample-title{margin-bottom:8px;color:#244553;font-size:25px;font-weight:900;line-height:1.4}
.ip38-sample-copy p{margin:0 0 15px;color:#657279}
.ip38-sample-images{display:grid;grid-template-columns:1fr 1fr;gap:9px}

.ip38-faq{display:grid;gap:9px}
.ip38-faq details{
  padding:15px 17px;background:#fff;border:1px solid #dce5e9;border-radius:12px
}
.ip38-faq summary{cursor:pointer;color:#28343a;font-weight:900}
.ip38-faq p{margin:10px 0 0;color:#657279;font-size:14px}

@media screen and (max-width:760px){
  .ip38-nav{display:none}
  .ip38-hero-in{width:94%;max-width:none;padding:32px 0 38px}
  .ip38-hero h1{font-size:28px;line-height:1.4}
  .ip38-lead{font-size:16px;line-height:1.8}
  .ip38-answer{width:100%;max-width:none;margin:18px 0;padding:15px 16px}
  .ip38-hero-points{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:none;gap:8px}
  .ip38-btnrow{display:block}
  .ip38-btn{display:flex;width:100%;margin:0 0 9px}
  .ip38-intro-grid,
  .ip38-view-grid,
  .ip38-window-grid,
  .ip38-spec-grid,
  .ip38-sample,
  .ip38-sample-images,
  .ip38-case-grid3,
  .ip38-case-grid2{grid-template-columns:1fr !important}
  .ip38-main{padding-bottom:70px}
}
@media screen and (max-width: 760px) {

    #main .sz_html_content .problem-grid {
        display: block !important;

        width: 94% !important;
        max-width: none !important;

        margin: 0 auto 25px !important;
        padding: 0 !important;
    }


    #main .sz_html_content .problem-grid > .problem {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        float: none !important;
        clear: both !important;

        margin: 0 0 12px !important;
        padding: 18px !important;

        box-sizing: border-box !important;
    }


    #main .sz_html_content .problem-grid > .problem:last-child {
        margin-bottom: 0 !important;
    }

}