﻿#mobilemenu{position: fixed;top: 0;left: 0;bottom: 0;width: 100%;z-index: 200;display: none;margin-left: -100%;opacity: 0;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-webkit-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}
#mobilemenu .bg{position: absolute;width: 100%;height: 100%;z-index: 1;background: rgba(0,0,0,0.4)}
#mobilemenu .main{position: relative;z-index: 2;width: 90%;height: 100%;}
#mobilemenu .main .item{border-bottom: 1px var(--yellow-light2) solid;text-transform: capitalize;}
.head-menu-icon{position: relative;}
.head-menu-icon .bg-normal{display: block;background: #000;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.head-menu-icon .sp1{position:absolute;width: 100%; transform:rotate(45deg); top:calc(15px * var(--device))}
.head-menu-icon .sp2{position:absolute;width: 100%; transform:rotate(-45deg); top:calc(15px * var(--device))}
#mobilemenu.atc{display: block;opacity: 0;}
#mobilemenu.atc.delay{margin-left: 0;opacity: 1;}

.footerRy{width:100%;height: calc(200px * var(--device));}
.footer{position: fixed;border: calc(1px * var(--device)) #a1a1a1 solid;bottom: calc(40px * var(--device));left: calc(40px * var(--device));right: calc(40px * var(--device));height: calc(124px * var(--device));border-radius: calc(124px * var(--device));padding: calc(8px * var(--device));z-index: 10;background: #fefefe;text-align: center;}
.footer .item .item-img{height: calc(38px * var(--device));width: calc(38px * var(--device));margin: 5px auto;}
.footer .item .item-word{font-size: calc(22px * var(--device));line-height: calc(28px * var(--device));color: #8a8a8a;}
.footer .item.atc{border-radius: calc(124px * var(--device));background: #f8f8f8;}
.footer .item.atc .item-word{color: #000;}
.footer-bg{height: calc(200px * var(--device));position: fixed;bottom: 0;left: 0;width: 100%;z-index: 5;background: linear-gradient(180deg, rgba(255,255,255,0), rgba(247,247,247,0.8));}

#filterLayout{position: fixed;top: 0;left: 0;bottom: 0;width: 100%;z-index: 200;display: none;margin-left: 100%;opacity: 0;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-webkit-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}
#filterLayout .bg{position: absolute;width: 100%;height: 100%;z-index: 1;background: rgba(0,0,0,0.4)}
#filterLayout .main{position: relative;z-index: 2;width: 80%;height: 100%; margin-left:20%;}
#filterLayout .main .item{border-bottom: 1px var(--yellow-light2) solid;text-transform: capitalize;}
#filterLayout.atc{display: block;opacity: 0;}
#filterLayout.atc.delay{margin-left: 0;opacity: 1;}

.filterLayout-head{border-bottom:1px #ddd solid;}
.filterLayout-bottom{border-top:1px #ddd solid;}

.filterLayout-list .item-img{position:relative; padding-top:100%; height:0; border-radius:calc(10px * var(--device));}
.filterLayout-list .item-img img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; border-radius:calc(10px * var(--device));}
.filterLayout-list .item{position:relative;}
.filterLayout-list .item.atc:before{position:absolute; border-radius:calc(10px * var(--device)); z-index:5; border:calc(4px * var(--device)) var(--orange) solid; content:""; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; top:0; left:0; width:100%; height:100%; }











