@charset "UTF-8";
/*검색창*/
.search-wrap { width: 100%; height: 0; position: absolute; top: 10rem; left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); -moz-transition: height 0.1s, opacity 0.1s; -webkit-transition: height 0.1s, opacity 0.1s; transition: height 0.1s, opacity 0.1s; opacity: 0; display: flex; justify-content: center; align-items: center; z-index: -1; color: #222; overflow: hidden; background: #fff; box-shadow: 0 10px 5px rgba(0, 0, 0, 0.1); }
.search-wrap input::placeholder, .search-wrap textarea::placeholder { color: inherit; font-size: inherit; line-height: 1.5; white-space: normal; opacity: 0.5; }
.search-wrap input::-webkit-input-placeholder, .search-wrap textarea::-webkit-input-placeholder { color: inherit; font-size: inherit; line-height: 1.5; white-space: normal; opacity: 0.5; }
.search-wrap input::-moz-input-placeholder, .search-wrap textarea::-moz-input-placeholder { color: inherit; font-size: inherit; line-height: 1.5; white-space: normal; opacity: 0.5; }
.search-wrap input::-ms-input-placeholder, .search-wrap textarea::-ms-input-placeholder { color: inherit; font-size: inherit; line-height: 1.5; white-space: normal; opacity: 0.5; }

.search { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 64rem; height: 25rem; padding: 4.5rem; font-size: 1.5rem; line-height: 1.5; cursor: initial; margin: 0 auto; position: absolute; top: 0; }
.search:before { content: ""; position: absolute; top: 0; left: -200%; width: 500%; height: 100%; z-index: -2; }
.search > p { font-size: 2.25rem; color: #222; font-weight: 600; margin-bottom: 3rem; width: 100%; text-align: left; }
.search form { display: flex; justify-content: center; align-items: center; width: 100%; border-bottom: 2px solid #32373b; color: inherit; margin-bottom: 1.5rem; }
.search .form-outline { position: relative; width: 100%; height: 6rem; color: inherit; }
.search .form-outline input[type="search"] { margin: 0; padding: 0; border: none; outline: none; font-style: normal; text-decoration: none; background: none; width: 100%; height: 100%; font-size: 2.25rem; padding: 0 2.25rem; -moz-border-radius: 0.375rem; -webkit-border-radius: 0.375rem; border-radius: 0.375rem; overflow: hidden; color: inherit; }
.search .form-outline input[type="search"]::-ms-clear, .search .form-outline input[type="search"]::-ms-reveal { display: none; width: 0; height: 0; }
.search .form-outline input[type="search"]::-webkit-search-decoration, .search .form-outline input[type="search"]::-webkit-search-cancel-button, .search .form-outline input[type="search"]::-webkit-search-results-button, .search .form-outline input[type="search"]::-webkit-search-results-decoration { display: none; -webkit-appeearance: none; cursor: pointer; }
.search .form-outline input[type="search"]::-webkit-search-cancel-button:after { content: ''; display: block; width: 1.5rem; height: 1.5rem; background: url("/images/basicUI/svg/020-close.svg") no-repeat center; background-size: 1.5rem; }
.search .form-outline label { position: absolute; top: 1.875rem; left: 0.5rem; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; padding: 0 1.5rem; line-height: 1.5; color: inherit; }
.search .form-outline input[type="search"]:focus + label { opacity: 0; }
.search button { margin: 0; padding: 0; border: none; outline: none; font-style: normal; text-decoration: none; background: none; cursor: pointer; text-decoration: none; width: 100%; height: 100%; width: 6rem; height: 6rem; background: transparent; color: inherit; font-size: 2.25rem; }
.search .close { position: absolute; right: -3rem; font-size: 1.8rem; color: #212121; cursor: pointer; -moz-border-radius: 0.5rem; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; padding: 1rem; width: 5rem; height: 5rem; margin-bottom: 2rem; display: flex; justify-content: center; align-items: center; }

.search-wrap.active { height: 25rem; z-index: 9; }