[v-cloak] { display: none !important; } .search-show{ height: 70px!important; } .search-input-show{ height: 38px!important; border:1px solid #ccc!important; } .dNone{ display: none!important; } .search-have{ border-bottom: 0!important; border-radius: 20px 20px 0 0 !important; } //Header.scss .Header{ position: relative; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; position: fixed; z-index: 99999; background: #fff; // background: rgba($color: #000000, $alpha: .2); .Header-container{ display: flex; justify-content: space-evenly; align-items: center; height:85px; font-size: 14px; } .search-box{ height: 0; width: 100%; transition: 0.4s; z-index: 9999; // position: fixed; top: 60px; left: 0; text-align: center; .search-hide-box{ width: 70%; background: rgb(250, 250, 250)!important; margin: 0 auto; display: block; overflow: auto; border-radius: 0 0 20px 20px ; text-align: left; max-height: 500px; .search-hide-items{ padding: 15px 21px; cursor: pointer; transition: 0.4s; color: #757575; font-weight: 550; &:hover{ background: rgb(230, 230, 230); } } } .search-box-input{ background:none; outline:none; border-radius: 20px; width: 40%; padding: 0 20px; height: 0; transition: 0.4s; margin-top: 20px; color: #757575; font-weight: 550; border: none; background: rgb(250, 250, 250)!important; &:focus{ width: 70%; } } } } .phone-box{ display: none; height: 50px; }