@media (min-width: 1001px) {

/* 기본 설정 */
html, body {margin: 0; padding: 0; width: 100%; height: 100%;}
.background {background-color: gray; width: 100%; height: 100%;}
.content {max-width: 1200px; margin: 0 auto; background-color: #f3f3f3; width: 100%; height: 100%;}

.header {width: 100%; height: 75px; border-bottom: 1px black solid; background-color: white; z-index: 1;}
.header-content {width: 100%; height: 100%;}
.header-content-container {width: 100%; height: 100%; display: grid; grid-template-columns: 1fr}
.logo-container {width: 100%; height: 100%; position: relative;}
.logo {width: 231px; height: 65px; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%;}

/* 팝업 콘텐츠 */
.popup {display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 1;}
.popup > h2 {margin: none;}
.popup-content {background-color: white; padding: 20px; border-radius: 10px; width: 300px; text-align: center; overflow-y: auto; position: relative; transform: translate(-50%, -50%); top: 50%; left: 50%;}
.close-btn {background-color: red; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer;}

.add-webtoon-list-wrapper {overflow-y: auto; overflow-x: hidden; height: 300px; margin-bottom: 20px;}

/* 검색 */
.search-box-wrapper {width: 100%; height: 50px;}
.search-box {width: 100%; height: 100%; display: grid; grid-template-columns: 5fr 0.1fr 1fr;}
#search {outline: none;}

/* 메인 콘텐츠 */
.main {width: 100%; height: calc(100% - 75.8px); display: grid; grid-template-columns: 1fr 5fr;}
.sidebar {width: 250px; height: 100%; border-right: 1px black solid; background-color: white; overflow-y: hidden; overflow-x: hidden;}
.quick-menu {width: 100%; height: calc(100% - 25px); margin: 0 20px 20px 20px; padding-top: 20px; overflow-y: auto;}
.webtoon > li > a {text-decoration: none; color: gray; transition: 0.2s;}
.webtoon > li > a:hover {font-weight: bold; transition: 0.2s; color: black;}
.quick-menu > span {font-size: 30px; font-family: "Noto Sans KR", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal;}
.quick-menu-content {padding-top: 40px;}
.webtoon {margin: 0; padding-top: 7px; padding-left: 40px;}
.webtoon > li {list-style: none; padding: 2px; color: gray;}
.webtoon > li:hover {color: black; cursor: pointer; font-weight: bold; transition: 0.2s ease;}
.quick-menu-content > span {padding: 20px 0 0 20px; font-size: 25px; font-family: "Noto Sans KR", sans-serif; font-weight: 500;}
.webton-content-upper-menu {width: 100%; position: relative;}
.more-btn {border: 1px black solid; background-color: rgb(248, 248, 248); border-radius: 10px; width: 100px; height: 33px; transition: 0.25s;}
.more-btn:hover {background-color: black; color:  white;}
.webtoon-content-upper-menu {display: flex; justify-content: space-between; align-items: center;}

.main-content {height: calc(100% - 40px); background-color: rgb(248, 248, 248); overflow-y: auto; padding: 20px;}
.main-content-info {font-size: 25px; font-family: "Noto Sans KR", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; padding-top: 20px;}
.general-webtoon {display: flex;}
.content-wrapper {overflow-x: auto; height: 285px; padding-top: 15px;}
.content-wrapper-manga {overflow-x: auto; height: 320px; padding-top: 15px;}
.webtoon-cover {width: 144px; height: 184px; border-radius: 10px; transform: scale(1); filter: brightness(1); transition: 0.25s ease-out, filter 0.25s linear; border: 1px black solid; box-shadow: 3px 3px 3px 3px gray;}
.webtoon-cover:hover {transform: scale(0.97); filter: brightness(0.75); transition: 0.25s ease-out, filter 0.25s linear;}
.novel-cover {width: 144px; height: 215px; border-radius: 10px; transform: scale(1); filter: brightness(1); transition: 0.25s ease-out, filter 0.25s linear; border: 1px black solid; box-shadow: 3px 3px 3px 3px gray;}
.novel-cover:hover {transform: scale(0.97); filter: brightness(0.75); transition: 0.25s ease-out, filter 0.25s linear;}
.general-webtoon-content {width: 144px; height: 100%; padding-right: 20px; cursor: pointer;}
.webtoon-info {width: 100%; height: 100%;}
.general-webtoon-name {font-size: 17.5px; font-family: "Noto Sans KR", sans-serif; font-optical-sizing: auto; font-weight: 450; font-style: normal; top: 2.5px; position: relative; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; cursor: pointer; white-space: normal; line-height: 1.5em; max-height: none;}
.general-webtoon-writer {font-size: 13px; font-family: "Noto Sans KR", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: gray; bottom: 1px; position: relative;}

.footer {width: 100%; height: 75px; position: relative; top: 20px;}
.footer-content-container {position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; text-align: center; width: 100%; height: 100%; background-color: #292929; padding-left: 20px;}
.footer-content-container > span {color: gainsboro; font-family: "Noto Sans KR", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; position: relative; top: 12.5px;}

}







/* 모바일 */

@media (max-width: 1000px) {

/* 기본 설정 */
html, body {margin: 0; padding: 0; width: 100%; height: 100%;}

.header {width: 100%; height: 60px; border-bottom: 1px black solid; background-color: white; z-index: 1;}
.header-content {width: 100%; height: 100%;}
.header-content-container {width: 100%; height: 100%; display: grid; grid-template-columns: 1fr}
.logo-container {width: 100%; height: 100%; position: relative;}
.logo {width: 161.7px; height: 45.5px; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%;}

/* 메인 콘텐츠 */

.main {width: 100%; height: calc(100% - 75.8px); display: grid; grid-template-columns: 1fr;}
.sidebar {width: 250px; height: 100%; border-right: 1px black solid; background-color: white; overflow-y: auto; overflow-x: hidden;}
.quick-menu {width: 100%; height: calc(100% - 25px); margin: 0 20px 20px 20px; padding-top: 20px; overflow-y: auto;}
.webtoon > li > a {text-decoration: none; color: gray; transition: 0.2s;}
.webtoon > li > a:hover {font-weight: bold; transition: 0.2s; color: black;}
.quick-menu > span {font-size: 30px; font-family: "Noto Sans KR", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal;}
.quick-menu-content {padding-top: 40px;}
.webtoon {margin: 0; padding-top: 7px; padding-left: 40px;}
.webtoon > li {list-style: none; padding: 2px; color: gray;}
.webtoon > li:hover {color: black; cursor: pointer; font-weight: bold; transition: 0.2s ease;}
.quick-menu-content > span {padding: 20px 0 0 20px; font-size: 25px; font-family: "Noto Sans KR", sans-serif; font-weight: 500;}
.more-btn {border: 1px black solid; background-color: rgb(248, 248, 248); border-radius: 10px; width: 100px; height: 33px; transition: 0.25s;}
.more-btn:hover {background-color: black; color: white;}
.webtoon-content-upper-menu {display: flex; justify-content: space-between; align-items: center;}

/* 검색 */
.search-box-wrapper {width: 100%; height: 50px;}
.search-box {width: 100%; height: 100%; display: grid; grid-template-columns: 5fr 0.1fr 1fr;}
#search {outline: none;}

.main-content {height: calc(100% - 40px); background-color: rgb(248, 248, 248); padding: 20px; overflow: hidden;}
.main-content-info {font-size: 25px; font-family: "Noto Sans KR", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal;}
.general-webtoon {display: flex;}
.content-wrapper {overflow-x: auto; overflow-y: hidden; height: 220px; padding-top: 15px;}
.content-wrapper-manga {overflow-x: auto; height: 250px; padding-top: 15px;}
.webtoon-cover {width: 100.8px; height: 128.8px; border-radius: 10px; transform: scale(1); filter: brightness(1); transition: 0.25s ease-out, filter 0.25s linear; border: 1px black solid; box-shadow: 3px 3px 3px 3px gray;}
.webtoon-cover:hover {transform: scale(0.97); filter: brightness(0.75); transition: 0.25s ease-out, filter 0.25s linear;}
.novel-cover {width: 100.8px; height: 150px; border-radius: 10px; transform: scale(1); filter: brightness(1); transition: 0.25s ease-out, filter 0.25s linear; border: 1px black solid; box-shadow: 3px 3px 3px 3px gray;}
.novel-cover:hover {transform: scale(0.97); filter: brightness(0.75); transition: 0.25s ease-out, filter 0.25s linear;}
.general-webtoon-content {width: 144px; height: 100%; padding-right: 20px; cursor: pointer;}
.webtoon-info {width: 100%; height: 100%;}
.general-webtoon-name {font-size: 16px; display: inline-block; font-family: "Noto Sans KR", sans-serif; font-optical-sizing: auto; font-weight: 450; font-style: normal; top: 2px; position: relative; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; cursor: pointer; white-space: normal; line-height: 1.2em; max-height: none;}
.general-webtoon-writer {font-size: 10px; display: inline-block; font-family: "Noto Sans KR", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: gray; position: relative; bottom: 3px;}

.footer {width: 100%; height: 75px; position: relative; top: 20px;}
.footer-content-container {position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; text-align: center; width: 100%; height: 100%; background-color: #292929; padding-left: 20px;}
.footer-content-container > span {color: gainsboro; font-family: "Noto Sans KR", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; position: relative; top: 12.5px; font-size: 10px;}
.footer-content-container > .copyright {position: relative; top: 7px;}

}