#wrap {min-height: 100vh;height: 100%; width: 100%;padding-top: 5rem;padding-bottom: 1rem;}
#wrap.index {background: none;display: flex;flex-direction: column;justify-content: space-evenly;align-items: center;padding-bottom: 0;}
#wrap.index img:nth-of-type(1) {width: 30%;max-width: 200px;margin-bottom: 10%;}
#wrap.index .random {font-size: 1.4rem;color: #aaa;text-align: center;margin-bottom: 30%;padding: 0 5%;width: 100%;line-height: 1.2;}
#wrap.index .loading_wrap .bar {position: relative;width: 100vw;height:1.5rem;background:#cbcbcb;}
#wrap.index .loading_wrap .bar:after {content:'';position: absolute;height:1.5rem;background:#68b883;-webkit-animation: loading 1s;-o-animation: loading 1s;animation: loading 1s;animation-timing-function: ease-out;animation-fill-mode: both;}
@keyframes loading {
    0% {width: 0%;}
    50% {width: 80%;}
    100% {width: 100%;}
}


/* 헤더 */
header {background-color: #68b883;border-bottom: 1px solid rgba(255, 255, 255, .5);position: fixed;z-index: 100;left: 0;top: 0;width: 100%;height: 5rem;display: flex;align-items: center;padding: 0 1.5rem;}
header .logo {width: 15rem;}
header.white {justify-content: space-between;background-color: #fff;border-bottom: 1px solid rgba(0, 0, 0, .1);}
header.green {justify-content: space-between;background-color: #68b883;border-bottom: 1px solid rgba(0, 0, 0, .1);}
header h1 {font-size: 1.6rem;text-align: center;font-weight: bold;}
header .prev, header .dummy {width: 3rem;height: 100%;object-fit: contain;padding-right: 2rem;}
.gototop {position: fixed;right: 1.5rem;top: 6.5rem;box-shadow: 0 0 .3rem rgba(0, 0, 0, .3);background-color: #fff;border-radius: 100%;height: 3rem;width: 3rem;font-size: 1.2rem;font-weight: bold;z-index: 1000;display: flex;justify-content: center;align-items: center;}



/* 홈 검색 */
.home_search {background-color: #68b883;padding: 1.5rem 1.5rem 1rem;}
.home_search form {position: relative;display: flex;flex-direction: column;justify-content: space-between;}
.home_search form input[type="text"] {width: 100%;font-size: 1.6rem;border-radius: 30rem;padding: 1.5rem 4rem 1.5rem 2rem;}
.home_search form input::placeholder{color: #ccc;}
.home_search form input[type="submit"] {position: absolute;right: .7rem;top: 50%;transform: translateY(-50%);font-size: 1.6rem;height: 3.5rem;width: 3.5rem;background: url('../img/search.png') no-repeat center / 2rem;display: flex;justify-content: center;align-items: center;}
.history_search {display: flex;flex-wrap: wrap;margin-top: 1.3rem;}
.history_search .word {background-color: #fff;border-radius: 10rem;padding: .5rem .7rem;width: fit-content;margin-right: .5rem;margin-bottom: .8rem;border: 1px solid #888;display: flex;align-items: center;}
.history_search .word a {font-size: 1.2rem;}
.history_search .word img {width: 1.5rem;padding-left: .5rem;}
.section {padding-bottom: 4rem;}
.section h2 {font-size: 2rem;font-weight: bold;margin: 3rem 2rem 2rem;}
.section ul {display: flex;flex-wrap: wrap;justify-content: space-between;padding: 0 1.5rem;gap: 1rem;}
.section ul li {width: calc((100% - 2rem) / 3);}
.section ul li a {display: flex;justify-content: center;align-items: center;flex-direction: column;border-radius: 1rem;padding: .5rem;width: 100%;height: 100%;min-height: 11rem;font-size: 1.6rem;box-shadow: 0 0 .3rem rgba(0, 0, 0, .2);}
.section ul li a img {width: 5rem;}
.section ul li a p {font-size: 1.4rem;font-weight: 600;margin-top: .7rem;}
.section .more {font-size: 1.4rem;font-weight: bold;display: block;margin: 2rem auto 1rem;color: #666;width: fit-content;position: relative;}
.more span {position: absolute;width: 1rem;height: 2px;background-color: #666;display: block;top: 50%;left: -1rem;transform: translate(-50%, -50%);}
.more span::before,
.more span::after {content: "";position: absolute;width: 1rem;height: 1px;background-color: #666;display: block;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.more span::before {transform: translate(-50%, -50%) rotate(90deg);}
.more span::after {transform: translate(-50%, -50%) rotate(-90deg);}
.way ul {gap: 1.5rem;}
.way ul li {width: calc((100% - 1.5rem) / 2);}
.way ul li a {border-radius: 1rem;font-weight: bold;}



/* 배너 */
.banner {display: flex;justify-content: space-between;align-items: center;padding: 1.3rem 2rem 1.3rem 2rem;background-color: #3c9d9b;min-height:10rem;}
.banner1 {background-color: #e0f5b9;}
.banner2 {background-color: #f4f4f4;}
.banner3 {background-color: #f6d6ad;}
.banner span .t1 {font-size: 1.8rem;margin: .5rem 0;font-family: 'EsaManru', sans-serif;color: #394a6d;font-weight: 600;}
.banner span .t2 {font-size: 1.4rem;margin: .5rem 0;color: #424750;}
.banner img {width: 7rem;margin-left: .3rem;}
.banner .t3 {font-size: 1.6rem;color: #fff;font-family: 'EsaManru', sans-serif;line-height: 1.3;}
.banner.green {padding: 2.5rem 1.5rem;position: relative;overflow: hidden;min-height: 6rem;}
.banner.green::before {top: 50%;right: 5rem;content: "GO!";color: #cbedd1;font-size: 1.6rem;position: absolute;transform: translateY(-50%);font-family: 'EsaManru', sans-serif;}
.banner.green::after {content: "";position: absolute;top: calc(100% - 5.5rem);right: -3rem;width: 10rem;height: 10rem;border: 1px solid cadetblue;background: url('../img/banner-icon-4.png') no-repeat center/ contain;}



/* 하단출처표기 */
.footer {line-height: 1.4;font-size: 1.2rem;text-align: center;padding: 4rem 2rem 7rem;background-color: #333;color: rgba(255, 255, 255, .7);}



/* 분리배출 카테고리 페이지 */
.category_wrap {padding: 2rem;}
.category_wrap h2 {font-size: 2.2rem;color: #1d6c35;line-height: 1.4;font-weight: 800;margin-bottom: .5rem;}
.category_wrap h3 {font-size: 1.8rem;color: #656565;line-height: 1.4;}
.category_wrap ul {display: flex;flex-wrap: wrap;justify-content: space-between;gap: 1rem;margin: 1.5rem 0;}
.category_wrap ul li {width: calc((100% - 1rem) / 2);}
.category_wrap ul li a {display: flex;justify-content: center;align-items: center;background-color: #e8efeb;border-radius: 1rem;font-size: 1.6rem;min-height: 8rem;color: #454545;font-weight: 600;}



/* sub_wrap */
.sub_wrap {padding-bottom: 3rem;}
.sub_wrap a {margin: 1.5rem;}
.sub_wrap em {font-size: inherit;font-weight: 800;}
.sub_wrap h2 {margin: 2rem;font-size: 2.2rem;color: #369a98;line-height: 1.4;font-weight: 800;}
.sub_wrap h3 {margin: 2rem 2rem 1rem;font-size: 1.8rem;color: #323232;font-weight: 800;}
.sub_wrap h3 em {font-size: 1.2rem;color: red;margin-left: .5rem;}
.sub_wrap .yes {border-radius: 1rem;font-size: 1.6rem;padding: 1.5rem;line-height: 1.4;margin: 2rem;background-color: #e8efeb;}
.sub_wrap .no {border-radius: 1rem;font-size: 1.6rem;padding: 1.5rem;line-height: 1.4;margin: 2rem;background-color: #e8efeb;}
.sub_wrap .content {font-size: 1.6rem;line-height: 1.4;color: #35504f;margin: 2rem;}
.sub_wrap pre p {font-size: 1.8rem;font-weight: bold;color: #35466a;margin-bottom: .5rem;}
.sub_wrap .warn {border-radius: 1rem;font-size: 1.6rem;padding: 1.5rem;line-height: 1.4;margin: 2rem;background-color: #f2eee5;}
.sub_wrap img {width: 50%;max-width: 250px;padding: 0 1rem;}
.sub_wrap a.ina {display: block;border-radius: 2rem;font-size: 1.6rem;text-align: center;background-color: #3c9d9b;box-shadow: 0 0 .3rem rgba(0, 0, 0, .3);color: #fff;padding: 1.5rem 1.5rem;font-weight: bold;margin-bottom: 5rem;}
table {border-collapse:collapse;margin: 2rem;width: calc(100% - 4rem);}
table td, table th {font-size: 1.4rem;border: 1px solid #ccc;background-color: #fff;text-align: center;padding: 1rem;line-height: 1.4;}
table td img {width: 100% !important;}
table th {font-weight: bold;background-color: #def3e7;}



/* qna */
.qna_btn {margin: 2rem;display: flex;flex-wrap: wrap;gap: .5rem;}
.qna_btn a {font-size: 1.6rem;border-radius: 10rem;padding: .5rem .9rem;display: block;width: fit-content;border: 1px solid #aaa;}
.qna_btn a.color {background-color: #dff7df;color: #61b47d;}
.toggle_wrap {margin: 2rem;}
.toggle_wrap .box {border-radius: 1rem;overflow: hidden;margin-bottom: 1rem;}
.toggle_wrap .box h4 {color: #fff;padding: 1rem 4rem 1rem 1.5rem;line-height: 1.2;font-size: 1.6rem;word-break: break-all;background: #68b883 url('../img/qna-arrow-down.png') no-repeat calc(100% - 2rem) center / 1rem;}
.toggle_wrap .box pre {background-color: #f7f7f7;padding: 1.5rem;line-height: 1.4;font-size: 1.6rem;font-size: 1.6rem;color: #666;display: none;}
.toggle_wrap .box.open pre {display: block;}



/* search_result */
.search_result h2 {font-size: 1.8rem;font-weight: bold;margin: 2rem;line-height: 1.3;}
.yes_search a {border-radius: 1rem;padding: 1.5rem;background-color: #e8efeb;display: block;margin: 1rem 2rem;}
.yes_search a p {font-size: 1.6rem;line-height: 1.4;color: #3c5655;}
.yes_search a p.bold {font-size: 1.8rem;font-weight: bold;color: #35466a;}
.yes_search a.banner.green {margin: .5rem 0;}
.yes_search a em {
    font-size: inherit;
    font-weight: bold;
    color: inherit;
    line-height: inherit;
}