body#smarthouse .section .localnav{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem}body#smarthouse .section .localnav .panel{width:calc((100% - 3.75rem)/4)}body#smarthouse .section .localnav .panel a{box-sizing:border-box;display:flex;flex-direction:column;gap:.625rem;position:relative;height:100%;padding:1.25rem;text-decoration:none;background:url("../images/smarthouse/feature_bg.jpg") repeat 0 0/cover}body#smarthouse .section .localnav .panel a:hover{transform:scale(1.1)}body#smarthouse .section .localnav .panel a::before{content:"";position:absolute;top:100%;left:0;width:100%;aspect-ratio:56/3;background:url("../images/smarthouse/feature_shadow.png") no-repeat center top/contain}body#smarthouse .section .localnav .panel a::after{content:"";height:.625rem;clip-path:polygon(calc(50% - 0.625rem) 0, calc(50% + 0.625rem) 0, 50% 100%)}body#smarthouse .section .localnav .panel a .label{display:flex;align-items:center;gap:.625rem;font-family:"Comfortaa",sans-serif;font-size:3rem;line-height:1}body#smarthouse .section .localnav .panel a .label::after{content:"";flex-grow:1;height:1px}body#smarthouse .section .localnav .panel a strong{flex-grow:1;font-size:1rem;line-height:1.5}body#smarthouse .section .localnav .panel:nth-child(1){animation-delay:.2s}body#smarthouse .section .localnav .panel:nth-child(1) a{color:#f80}body#smarthouse .section .localnav .panel:nth-child(1) a::after{background-color:#f80}body#smarthouse .section .localnav .panel:nth-child(1) a .label::after{background-color:#f80}body#smarthouse .section .localnav .panel:nth-child(2){animation-delay:.3s}body#smarthouse .section .localnav .panel:nth-child(2) a{color:#282}body#smarthouse .section .localnav .panel:nth-child(2) a::after{background-color:#282}body#smarthouse .section .localnav .panel:nth-child(2) a .label::after{background-color:#282}body#smarthouse .section .localnav .panel:nth-child(3){animation-delay:.4s}body#smarthouse .section .localnav .panel:nth-child(3) a{color:#048}body#smarthouse .section .localnav .panel:nth-child(3) a::after{background-color:#048}body#smarthouse .section .localnav .panel:nth-child(3) a .label::after{background-color:#048}body#smarthouse .section .localnav .panel:nth-child(4){animation-delay:.5s}body#smarthouse .section .localnav .panel:nth-child(4) a{color:#a00}body#smarthouse .section .localnav .panel:nth-child(4) a::after{background-color:#a00}body#smarthouse .section .localnav .panel:nth-child(4) a .label::after{background-color:#a00}body#smarthouse .section .problem{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem;margin-bottom:2.5rem}body#smarthouse .section .problem li{padding:.625rem 1.25rem;border-radius:.625rem;color:#fff;font-size:1.125rem;font-weight:700;background-color:rgba(0,0,0,.6)}body#smarthouse .section .lead{margin-bottom:2.5rem;padding:0 .625rem;font-size:1.25rem;font-weight:700;text-align:center}body#smarthouse .section .pic{display:block;margin-bottom:2.5rem}body#smarthouse .section .pic img{border-radius:1.25rem}body#smarthouse .section .solutions{display:flex;flex-direction:column;gap:1.25rem}body#smarthouse .section .solutions h5{display:flex;justify-content:center;align-items:center;gap:1.25rem;color:#630;font-size:1.5rem;font-weight:700}body#smarthouse .section .solutions h5::before,body#smarthouse .section .solutions h5::after{content:"";flex-grow:1;height:1px;background-color:#630}body#smarthouse .section .solutions ul{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem}body#smarthouse .section .solutions ul li{padding:.625rem 1.875rem;border-radius:5em;color:#fff;font-size:1.5rem;font-weight:700}body#smarthouse .section .nav{display:flex;justify-content:flex-end;margin-top:2.5rem}body#smarthouse .section .nav a{position:relative;padding-bottom:.3125rem;font-size:1rem;text-decoration:none}body#smarthouse .section .nav a::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:.1875rem;border-radius:1em;background-color:#630}body#smarthouse .section.feature01 h3{background-color:#f80}body#smarthouse .section.feature01 .solutions ul li{background-color:#f80}body#smarthouse .section.feature02 h3{background-color:#282}body#smarthouse .section.feature02 .solutions ul li{background-color:#282}body#smarthouse .section.feature03 h3{background-color:#048}body#smarthouse .section.feature03 .solutions ul li{background-color:#048}body#smarthouse .section.feature04 h3{background-color:#a00}body#smarthouse .section.feature04 .solutions ul li{background-color:#a00}@media only screen and (max-width: 768px){body#smarthouse .section .localnav{gap:5.2083333333vw}body#smarthouse .section .localnav .panel{width:calc((100% - 5.2083333333vw)/2)}body#smarthouse .section .localnav .panel a{gap:2.6041666667vw;padding:3.90625vw}body#smarthouse .section .localnav .panel a::after{height:2.6041666667vw;clip-path:polygon(calc(50% - 2.6041666667vw) 0, calc(50% + 2.6041666667vw) 0, 50% 100%)}body#smarthouse .section .localnav .panel a .label{gap:2.6041666667vw;font-size:9.375vw}body#smarthouse .section .localnav .panel a strong{font-size:3.125vw}body#smarthouse .section .localnav .panel:nth-child(3){animation-delay:.2s}body#smarthouse .section .localnav .panel:nth-child(4){animation-delay:.3s}body#smarthouse .section .problem{gap:2.6041666667vw;margin-bottom:5.2083333333vw}body#smarthouse .section .problem li{padding:1.3020833333vw 2.6041666667vw;border-radius:1.3020833333vw;font-size:4.1666666667vw}body#smarthouse .section .lead{margin-bottom:5.2083333333vw;padding:0 2.6041666667vw;font-size:3.6458333333vw}body#smarthouse .section .pic{margin-bottom:5.2083333333vw}body#smarthouse .section .pic img{border-radius:5.2083333333vw}body#smarthouse .section .solutions{gap:2.6041666667vw}body#smarthouse .section .solutions h5{gap:2.6041666667vw;font-size:4.6875vw}body#smarthouse .section .solutions ul{gap:2.6041666667vw}body#smarthouse .section .solutions ul li{padding:1.3020833333vw 5.2083333333vw;font-size:4.1666666667vw}body#smarthouse .section .nav a{padding-bottom:1.3020833333vw;font-size:3.6458333333vw}body#smarthouse .section .nav a::before{height:.78125vw}}