#pool-design{width:100vw;height:100vh;overflow:hidden}#pool-design .design-logo{position:absolute;top:5rem;left:0;width:18rem;z-index:2;background:linear-gradient(90deg,rgba(112,130,140,.7),rgba(81,85,104,.7));padding:1rem 1.5rem}#pool-design .close{position:absolute;top:4rem;right:5rem;display:flex;justify-content:center;align-items:center;width:4rem;height:4rem;border:1px solid var(--text-color);color:var(--text-color);background-color:hsla(0,0%,100%,.9);font-size:5rem;z-index:9;&:hover{background-color:#fff}}#pool-design .close span{transform:rotate(45deg)}#pool-design .close span,#pool-design .close span:after{display:block;width:2.4rem;height:2px;background:#424242}#pool-design .close span:after{content:"";transform:rotate(90deg)}#pool-design .img-box,#pool-design .img-box img{width:100%;height:100%;aspect-ratio:16/9}#pool-design .img-box img{object-fit:cover;object-position:bottom;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}#pool-design .btn-group{position:absolute;top:40%;left:0;transform:translateY(-50%);z-index:2}#pool-design .btn-group .btn-change{display:flex;align-items:center;width:18rem;height:8.5rem;padding-inline:1.5rem;margin-bottom:1rem;background:linear-gradient(135deg,rgba(0,210,220,.8),rgba(0,225,150,.8));box-shadow:0 0 .2rem #0fa;cursor:pointer;transition:.25s}#pool-design .btn-group .btn-change:last-child{margin-bottom:0}#pool-design .btn-group .btn-change:hover{box-shadow:0 0 1.5rem #0fa}#pool-design .btn-group .btn-change img{width:5rem;margin-right:1rem}#pool-design .btn-group .btn-change span{font-size:2rem;font-weight:600}#pool-design .btn-group .product-area{position:absolute;top:0;left:calc(100% + 1rem);display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;width:96rem;min-height:25%;max-height:100%;background:#fff;transform:translateX(-200%);transition:.25s;overflow:auto}#pool-design .btn-group .product-area.active{transform:translateX(0)}#pool-design .btn-group .product-area .product-col{display:flex;flex-direction:column;justify-content:space-between;flex:0 0 10%;max-width:10%;padding:1%;cursor:pointer;transition:.25s;aspect-ratio:1}#pool-design .btn-group .product-area .product-col:hover{opacity:.7}#pool-design .btn-group .product-area .product-col img{width:100%;height:100%;object-fit:contain}#pool-design .btn-group .product-area .product-col h3{font-size:1.2rem;font-weight:600;color:var(--text-color-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}#pool-design .btn-group .product-area .product-col span{position:absolute;top:.3rem;left:50%;transform:translateX(-50%);display:inline-block;padding-inline:.3rem;font-size:1.3rem;font-weight:600;color:var(--text-color);background:var(--text-color-hover)}#fixed-barrier{display:none}@media (max-width:575.98px){#pool-design{min-height:100vh}#fixed-barrier,#pool-design{display:flex;justify-content:center;align-items:center}#fixed-barrier{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#fff;z-index:9999}#fixed-barrier span{display:inline-block;width:10rem}}