@media screen and (max-width: 600px) {
	html,
	body {
		width: 100%;
		min-width: 100%;
		height: 100%;
		overflow-x: hidden;
	}
	html {
		overflow-y: hidden;
	}
	* {
		box-sizing: border-box;
	}
	.wrapper {
		width: 100%;
	}

	.s-header {
		position: fixed;
		z-index: 9000;
		top: 0;
		left: 0;
		width: 100%;
		min-width: 100%;
		height: 70px;
		margin-bottom: 0;
	}

	.s-header #logo {
		margin-left: 15px;
	}

	.topMenu {
		position: fixed;
		left: 0;
		top: 0;
		width: 300px;
		height: calc(100%);
		background-color: #18181b;
		color: #fff;
		transition: transform 0.3s ease;
		overflow-y: auto;
		overscroll-behavior: none;
		z-index: 9000;
		transform: translateX(-300px);
		display: block;
	}

	.topMenu.open {
		transform: translateX(0);
	}

	.topMenu .box {
		width: auto;
		background-color: #18181b;
		padding: 10px;
		box-shadow: unset;
		border-bottom: 1px solid #08080b;
	}

	.topMenu ul {
		flex-direction: column;
	}

	.topMenu ul li {
		margin-left: 0;
		border-bottom: 1px solid #08080b;
	}

	.topMenu ul li .subMenu {
		position: relative;
		display: flex;
		flex-direction: column;
		top: 0;
		left: 0;

		box-shadow: unset;
	}

	.topMenu ul li > a {
		height: 55px;
		padding: 0 25px;
	}

	.topMenu small {
		right: 20px;
	}

	.subMenu dl dd > a small {
		right: 20px;
	}

	.subMenu dl {
		padding: 0;
		margin: 0;
		width: 100%;
	}

	.subMenu dl dd {
		border-top: 1px solid #08080b;
	}

	.subMenu dl dd > a {
		display: flex;
		align-items: center;
		height: 55px;
		padding: 0 25px 0 45px;
		width: 100%;
	}

	.topMenu .userBox {
		display: block;
	}

	.topMenu .userBox {
		height: 100px;
		border-left: none;
		flex-direction: column;
	}

	.topMenu .userBox ul {
		width: 100%;
		display: flex;
		list-style-type: none;
		padding: 0;
		margin: 0;
		margin-top: 7px;
		flex-direction: row;
	}

	.topMenu .userBox ul li {
		border-bottom: none;
	}

	.topMenu .userBox ul li a {
		padding: 0;
		margin: 0;
		font-size: 13px;
		margin-right: 10px;
		letter-spacing: -1px;
		transition: all 0.3s ease-in-out;
		height: auto;
	}

	.topMenu .userBox ul li a {
		display: flex;
		align-items: center;
	}

	.topMenu .userBox ul li a small {
		font-size: 10px;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: blod;
		margin-left: 3px;
	}

	.topMenu .notice {
		display: block;
		border-left: none;
		padding: 0;
	}

	.topMenu .notice .rolling {
		position: relative;
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

	.topMenu .notice .rolling li {
		display: flex;
		align-items: center;
		height: 50px;
		padding: 0;
		border-bottom: none;
	}

	.topMenu .notice .rolling li > a {
		display: block;
		padding-top: 10px;
		height: 50px;
		width: 300px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		transition: all 0.2s ease-in-out;
		font-size: 14px;
	}

	.rolling li span {
		display: inline-block;
		padding: 2px 5px;
		background-color: #ff8c00;
		border: 1px solid rgb(0 0 0 / 90%);
		margin-right: 5px;
		color: rgb(0 0 0 / 90%);
		letter-spacing: -1px;
		font-size: 12px;
		border-radius: 3px;
		font-weight: 600;
	}

	.rolling li > a:hover {
		color: #ff8c00;
	}

	.chat-icon,
	.menu-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 70px;
		height: 70px;
		z-index: 9999;
	}

	.chat-icon {
		width: 32px;
		height: 32px;
		z-index: unset;
	}

	.menu-icon svg {
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: transform 400ms;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.menu-icon svg.active {
		transform: rotate(45deg);
	}

	.menu-icon svg .line {
		fill: none;
		transition:
			stroke-dasharray 400ms,
			stroke-dashoffset 400ms;
		stroke: #fff;
		stroke-width: 5.5;
		stroke-linecap: round;
	}
	.menu-icon svg .top {
		stroke-dasharray: 40 139;
	}
	.menu-icon svg .bottom {
		stroke-dasharray: 40 180;
	}
	.menu-icon svg.active .top {
		stroke-dashoffset: -98px;
	}
	.menu-icon svg.active .bottom {
		stroke-dashoffset: -138px;
	}

	.mobile-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 1001;
		visibility: hidden;
		opacity: 0;
		transition:
			opacity 0.3s ease,
			visibility 0.3s ease;
	}
	.mobile-overlay.active {
		visibility: visible;
		opacity: 1;
	}

	.s-main,
	.s-footer {
		transition: transform 0.3s ease;
	}

	.s-main {
		margin-top: 70px;
	}

	.menu-open .s-main,
	.menu-open .s-footer {
		transform: translateX(300px);
	}
	.bannerCenter li img,
	.telegram-banner {
		width: 100%;
		height: 67px;
	}
	.userBox {
		display: none;
	}
	aside .notice {
		display: none;
	}
	.box.newTab {
		margin: 10px 0 0 0;
		box-sizing: border-box;
		width: auto;
	}

	.newTab .info {
		display: flex;
		align-items: center;
		height: 60px;
		border-left: none;
		padding: 0 10px;
		border-bottom: 1px solid #08080b;
		width: 100%;
	}

	.newTab .container-wrapper,
	.newTab.ranKing .info,
	.newTab.ranKing .container-wrapper {
		border-left: none;
	}

	aside .bannerAside {
		margin: 10px 0 10px 0;
	}

	.post-tab-banner-aside {
		margin: 0 10px;
	}

	.post-tab-banner-aside a,
	.post-tab-banner-aside img {
		display: block;
	}
}
@media screen and (max-width: 600px) {
	.box.Chat {
		display: none; /* 기본적으로 숨기기 */
		margin: 0;
	}

	.box.Chat.active {
		display: block; /* 활성화 시 보이기 */
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 9200;
	}

	.Chat .info {
		display: flex;
		align-items: center;
		height: 70px;
		border-left: none;
		padding: 0 10px;
		border-bottom: 1px solid #08080b;
	}

	.Chat .info h2 {
		font-size: 18px;
	}

	.Chat .info .chat-close {
		display: block;
		width: 50px;
		height: 50px;
		padding: 13px;
	}

	.Chat .info .chat-close svg {
		width: 100%;
		height: 100%;
	}

	.Chat .container {
		border-left: none;
		padding: 10px 5px 10px 10px;
		border-bottom: 1px solid #08080b;
		height: calc(100% - 140px);
	}

	.Chat .js-chat-list {
		height: 100%;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}

	.Chat .send_msg {
		display: flex;
		align-items: center;
		border-left: none;
		height: 70px;
	}
}
@media screen and (max-width: 600px) {
	.bannerCenter {
		padding: 0;
		margin: 0;
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 600px) {
	.s-main .wrapper {
		display: grid;
		grid-template-rows: auto 1fr;
		width: 100%;
	}

	.s-main .wrapper > main {
		grid-row: 1;
	}

	.s-main .wrapper > main .bannerCenter ul {
		grid-template-columns: repeat(2, 1fr);
	}

	#main-post-tab {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 10px;
	}

	.post-tab {
		padding: 0;
		margin: 0 10px;
	}

	.post-tab h2 {
		height: 50px;
		font-size: 16px;
		border-bottom: 2px solid #18181b;
		padding: 0 15px;
		margin: 0;
	}

	.post-tab h2 span {
		font-weight: normal;
	}

	.post-tab h2 .more {
		margin-left: auto;
		font-size: 12px;
		font-weight: normal;
		color: #ccc;
		transition: all 0.2s ease-in-out;
	}

	.post-tab h2 .more:hover {
		color: #ce3e31;
	}

	.post-tab ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	.post-tab ul li {
		padding: 0 15px;
		background-color: #24242b;
		border-top: 2px solid #18181b;
	}

	.post-tab ul li:first-child {
		border-top: none;
	}

	.post-tab ul li:nth-child(6),
	.post-tab ul li:nth-child(7) {
		display: none;
	}

	.post-tab ul li > a {
		display: flex;
		align-items: center;
		height: 50px;
	}

	.post-tab ul li > a em {
		font-style: normal;
	}

	.post-tab ul li > a em.em-title {
		min-width: 0;
		max-width: 270px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 14px;
		transition: all 0.2s ease-in-out;
	}

	.post-tab ul li > a em.em-new {
		font-size: 10px;
		font-weight: bold;
		font-family: Arial, Helvetica, sans-serif;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 13px;
		height: 13px;
		border-radius: 3px;
		background-color: #ce3d31;
		color: #fff;
		margin-left: 5px;
	}

	.post-tab ul li > a em.em-commemt {
		color: #ffae00;
		font-size: 10px;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
	}

	.post-tab ul li img.bbs-type-icon {
		width: 24px;
		height: 24px;
		margin-right: 5px;
	}

	.post-tab ul li img.bbs-type-icon.comment {
		width: 18px;
		height: 18px;
		margin-left: 5px;
		margin-right: 3px;
	}

	.s-main .wrapper > aside {
		width: 100%;
		grid-row: 2;
	}
}
@media screen and (max-width: 600px) {
	#footer-menu {
		width: 100%;
		height: auto;
		padding: 20px 10px;
	}
	#footer-menu .wrapper {
		flex-direction: column;
	}

	#footer-menu .f-menu {
		display: flex;
		flex: none;
		flex-direction: column;
		padding-bottom: 20px;
		display: none;
	}

	#footer-menu .f-menu a {
		height: 40px;
	}

	#footer-menu .f-menu a:hover {
		opacity: unset;
	}

	#footer-menu li a {
		display: flex;
		align-content: center;
		font-size: 15px;
		color: #ffffff;
		line-height: 24px;
		opacity: unset;
	}

	#footer-menu li a:hover {
		opacity: unset;
	}
}

@media screen and (max-width: 600px) {
	.js-event-popup {
		top: 0px !important;
		left: 0 !important;
		width: 100% !important;
		height: auto !important;
	}

	.js-event-popup .popup_layer_content a img {
		width: 100% !important;
		height: auto !important;
	}

	.js-event-popup:nth-of-type(1) {
		top: 70px !important;
	}

	div.js-event-popup.popup_layer:nth-of-type(1) {
		top: 170px !important;
	}

	.sl-view-user .sl-view-user-post li a em.em-title {
		max-width: 200px;
	}
	#popup-overlay,
	#login-container .login-box,
	#login-container.show,
	#popup-overlay .popup-content {
		height: 100%;
		width: 100%;
	}

	#login-container .login-box {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		overscroll-behavior: none;

		padding: 50px 40px;
		border-radius: 0;
		box-shadow: unset;
	}

	#login-container .login-logo {
		position: unset;
		width: 70px;
		height: 70px;
		top: unset;
		left: unset;
		transform: unset;
		display: inline;
	}

	#login-container .login-close-btn {
		top: 20px;
		right: 20px;
	}

	/** 이벤트 팝업 수정 */

	#popup-event .fbox {
		height: 100vh;
	}

	.popup-event-layer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		z-index: 9990;
	}
	.popup-event-layer-content,
	.popup-event-layer-closebox {
		width: 90% !important;
	}
	.popup-event-layer-content img {
		width: 100% !important;
		height: auto !important;
	}

	.popup-event-layer-closebox a {
		padding: 10px 13px 10px 13px;
	}

	#popup-event .event-popup-close-all {
		top: 70px;
		padding: 10px 26px;
		z-index: 9999;
	}
}