@charset "utf-8";

.header {
	width: 1440px;
	margin: 20px auto 0;
	box-sizing: border-box;

	border-bottom: 5px solid #222222;
}
.header .up-header { 
	display: flex;
    justify-content: space-between;
}
.header .up-header .left-area { display: flex; }
.header .up-header .left-area .logo-box { margin-right: 40px; }

.search--wrap { 
	width: 400px;
	border-bottom: 1px solid #000; 
	display: flex;
    align-items: center;
    justify-content: space-between;
	position: relative;
}
.search--wrap .search-input {
	background: transparent;
    border: 0;
	display: flex;
	justify-content: space-between;
	width: 90%;
	outline: none;
	padding: 0 10px;
    height: 35px;
}
.search--wrap .search-input .placeholder-area { color: #9b9b9b; }
.search--wrap .search-input .search-img { margin-left: 80px; cursor: pointer; }

.header .up-header .right-area { display: flex; }
.header .up-header .right-area .sns-wrap {
	display: flex; 
	align-items: center;
	gap: 20px; 
	padding-right: 14px;
    position: relative; 
}
.header .up-header .right-area .sns-wrap:after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    background: #999;
    width: 1px;
    height: 12px;
}
.header .up-header .right-area .sns-wrap .sns-link { display: flex; align-items: center; gap: 5px; }
.header .up-header .right-area .sns-wrap .sns-link img { width: 18px; }
.header .up-header .right-area .sns-wrap .sns-link .txt { font-size: 14px; font-weight: 600; }
.userMenu { 
	display: none; 
	position: absolute; 
	right: 0;
	z-index: 2; 
}
.down-header {
    display: flex;
    justify-content: space-between;
    padding: 15px 0 5px;
}
.userMenu > ul { 
	position: absolute; 
    top: 20px;
    right: 0;
    width: 125px;
	z-index: 2;
	background-color: #fff;
	border: 1px solid #ccc;
	box-sizing: border-box;
	padding: 15px;
	max-width:125px;
}
.userMenu > ul > li { padding-bottom: 5px; text-align: left; }
.byeOut { color: #bf4545; font-weight: 600; margin-top: 18px; font-size: 14px; text-align: center; }
.member-wrap {
	font-size: 14px;
	display: flex;
    align-items: center;
	gap: 14px;
	position: relative;
}
.member-wrap .login-move { margin-left: 14px; padding-right: 14px; position: relative; }
.member-wrap .login-move:after {
	content: '';
position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    background: #999;
    width: 1px;
    height: 12px;
}
.member-wrap a { font-weight: 600; white-space: nowrap; }
.member-wrap .myPage-move {
	display: flex;
	align-items: center;
    gap: 5px;
	width: 110px;
}
.member-wrap .myPage-move img { width: 20px;}

.header .down-header { 
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
	padding-top: 14px;
	position: relative;
}
.header .down-header .left-area { display: flex; gap: 30px; cursor: pointer; }
.header .down-header .left-area .miniMenu-box { width: 40px; height: 40px; }
.header .down-header .left-area .miniMenu {
	position: relative;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
	width: 30px; height: 1.5px; background: #000;
	cursor: pointer;
	display: block;
}
.header .down-header .left-area .miniMenu:before {
	content: ''; 
	position: absolute; 
	width: 26px; height: 1.5px; background: #000;
	top: -7px;
	cursor: pointer;
}
.header .down-header .left-area .miniMenu:after {
	content: ''; 
	position: absolute; 
	width: 18px; height: 1.5px; background: #000;
	top: 7px;
	cursor: pointer;
}
.header .down-header .left-area .topmenu { 
	display: flex; 
	height: 100%;
    align-items: center;
	gap: 25px;
}
.header .down-header .left-area .topmenu li { font-weight: 600; } 
.header .down-header .right-area .ad { display: flex; padding: 10px 0; gap: 30px; }
.header .down-header .right-area .ad li a { font-size: 15px; font-weight: 600; }
.header .down-header .right-area .ad li.add-q a { color: #0078ff; }

.header .down-header .aside-area { 
	display: none;
	position: absolute; 
    z-index: 2;
	top: 75px;
	left: -1px; 
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px; 
	box-shadow: rgba(116, 165, 191, 0.18) 6px 2px 6px 0px, rgba(255, 255, 255, 0.4) -6px -2px 16px 0px;
}
.header .down-header .aside-area .close-icon { 
	/* display: none; */ 
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 7px;
	border-radius: 50%;
	cursor: pointer;
	border: 0;
	width: 24px;
}

.header .down-header .aside-area .all-menu { display: flex; padding-top: 20px; }
.header .down-header .aside-area .part-1 { padding: 25px 25px 30px; }

.header .down-header .aside-area .part-1 h2, 
.header .down-header .aside-area .part-2 h2 {
	font-size: 16px; color: #999; padding-bottom: 5px;
}
.header .down-header .aside-area .part-1 .arrow-icon { display: none; }
.header .down-header .aside-area .all-menu .part-1 .inner-part { display: block; }
.header .down-header .aside-area .all-menu .part-1 .inner-inner-part { display: flex; }
.header .down-header .aside-area .part-1 ul { 
	display: flex;
	flex-direction: column;
    flex-wrap: wrap;
}
.header .down-header .aside-area .part-1 ul li {
	width: 150px;
    height: 30px;
    line-height: 30px;
}

.header .down-header .aside-area .part-2 {
	border-left: 1px solid #ddd;
        padding: 25px 20px 30px;
}
.header .down-header .aside-area .part-2 .arrow-icon { display: none; }
.header .down-header .aside-area .part-2 ul { 
	display: flex; 
	flex-direction: column;
	/* flex-wrap: wrap;  */
}
.header .down-header .aside-area .part-2 ul li { 
	width: 150px;
    height: 30px;
    line-height: 30px;
	flex-grow: 1; 
}
.header .down-header .aside-area .part-2 ul li a { margin-bottom: 5px; }
.header .down-header .part-2 .inner-part > li { margin-bottom: 7px; }
.all-menu-btn {
    border: 1px solid #ddd;
    margin: 20px;
    height: 45px;
    line-height: 45px;
    display: block;
    box-sizing: border-box;
    text-align: center;
    background: #1cb1ff;
    color: #fff;
	border-radius: 2px;
}
.all-menu-btn:hover {
	background: #181818;
	transition: all .3s;
	font-weight: 600;
}

@media screen and (max-width: 500px) {
	.header .down-header .aside-area .close-icon { 
		top: 30px;
		right: 20px;
		border: 1px solid #aaa;
	}
}

/* 검색 모달창 */
.search--wrap .modal-search-wrap {
    position: absolute;
    top: 50px;
    left: 0;
    /* background: rgba(0, 0, 0, .5); */
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
    width: 100%;
    /* min-height: 200px; */
    z-index: 2;
	padding: 20px 12px;
    box-sizing: border-box;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	display: none; 
}
.search--wrap .search_form {
	display: flex; 
	width: 100%;
    justify-content: space-between;
}
.search--wrap .search_form .search-btn { cursor: pointer; }
.search--wrap .modal-search-wrap .search-form-bg {
    height: 30%;
    background: #fff;
}
.search-form-content { display: flex; flex-direction: column;  }
.search-form-content .top-search { 
	display: flex; 
    justify-content: flex-end;
	align-items: center;
}
.hashtag  { 
	border: 1px solid #ddd; 
	padding: 20px; 
	margin-top: 10px;
	border-radius: 10px;
    background: #f9f9f9
}
.hashtag .sub-tlt { 
    padding-bottom: 10px;
	color: #007eff;
	font-weight: 600;
    font-size: 15px;
	text-align: center;
	padding-bottom: 10px;
}
.hashtag-cotent a {
	padding: 5px;
    border: 1px solid #aaa;
    background: #fff;
    border-radius: 7px;
    display: inline-block;
    margin-bottom: 3px;
    font-size: 13px;
    color: #000;
    margin-right: -1px;
}
.top-search .search-input {
	height: 30px;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid #000;
    width: 80%;
}
.top-search .search-arrow img { width: 22px; }



@media all and (max-width: 1500px) {
	.header {
		width: 100%;
		padding: 0 20px;
	}
}

@media all and (max-width: 1200px) {
	.search--wrap { width: 360px; }
	.header .up-header .right-area .sns-wrap .sns-link .txt { display: none; }
}

@media all and (max-width: 1100px) {
	.header .up-header .right-area .sns-wrap { gap: 10px; }
}

@media all and (max-width: 1080px) {
	.header .down-header .left-area .topmenu { display: none; }
	.member-wrap { gap: 9px; }
	.header .down-header { padding: 5px 0; }
}

@media all and (max-width: 992px) {
	.search--wrap { width: 300px; }
}

@media all and (max-width: 900px) {
	.search--wrap .placeholder-area { display: none; }
	.search--wrap .search-btn .search-img { margin-left: 0; }
}
@media all and (max-width: 850px) {
	.search--wrap {
        width: 220px;
    }
}
@media all and (max-width: 800px) {
	.search--wrap {
		position: absolute;
        right: 0;
        bottom: -45px;
	}
	.header .up-header { position: relative; }
	.header .down-header .right-area .ad { display: none; }
}

@media all and (max-width: 768px) {
	.header .down-header { position: initial; }
	.header .down-header .aside-area {
        width: 100%;
        height: 100vh;
        overflow: auto;
        top: 0;
        left: 0;
        box-sizing: border-box;
        position: fixed;
        border-radius: 0;
        /* display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; */
	}
	.header .down-header .aside-area .close-icon {
        width: 20px;
        height: 20px;
        margin: 15px auto 0px;
        border: 1px solid #ddd;
        padding: 6px;
        border-radius: 50%;
		cursor: pointer;
		display: block;
		right: 50%;
	}
	.header .down-header .aside-area .close-icon:hover {
		background: #eee;
		transition: all .3s;
	}
	.header .down-header .aside-area .all-menu { display: flex; flex-direction: column; width: 93%; margin: 0 auto; }
	.header .down-header .aside-area .part-1 { 
		padding: 25px 20px 0;
	}
	.header .down-header .aside-area .part-1 .area-title {
		display: flex; 
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}
	.header .down-header .aside-area .part-1 ul { flex-wrap: nowrap; width: 100%; }
	.header .down-header .aside-area .part-1 ul li { width: 100%; padding-left: 30px; }
	.header .down-header .aside-area .part-1 ul:first-child li { padding-left: 0px; }
	.header .down-header .aside-area .area-title .arrow-icon { padding: 5px 0; cursor: pointer; }
	.header .down-header .aside-area .part-2 { border-left: 0; padding: 25px 20px 10px; } 
	.header .down-header .aside-area .part-2 .area-title { 
		display: flex; 
	    justify-content: space-between;
        align-items: center;
		margin-bottom: 15px;
	}
	.all-menu-btn { width: 90%; }
	.header .down-header .aside-area .part-1 .area-title .arrow-icon { transform: rotate(0deg); transition: all .3s; 
		display: block;
	}
	.header .down-header .aside-area .part-1 .area-title .arrow-icon.rotate { transform: rotate(180deg); }
	.header .down-header .aside-area .part-2 .area-title .arrow-icon { transform: rotate(0deg); transition: all .3s;
		display: block;
	}
	.header .down-header .aside-area .part-2 .area-title .arrow-icon.rotate { transform: rotate(180deg); }
}

@media all and (max-width: 578px) {
	.header { padding: 0 10px; margin: 10px auto 0; }
	.header .up-header { align-items: flex-end; align-items: center; }
	.header .up-header .left-area .logo-box img { width: 100px; }
	.header .up-header .right-area { position: relative; }
	.header .up-header .right-area .sns-wrap {
		margin-right: 13px;
	}
	.header .down-header { height: 45px; }
	.miniMenu-box {
		width: 50px;
	}
	.header .down-header .left-area .miniMenu-box {
		width: 45px;
		height: 45px;
	}
	.search--wrap {
        bottom: -50px;
	}
}

@media all and (max-width: 500px) {
	.header .up-header { flex-wrap: wrap; gap: 10px; }
	.header .up-header .right-area { width: 100%; justify-content: flex-end;
		/* flex-wrap: wrap;  */
	}
	.header .down-header .aside-area { justify-content: flex-start; }
	.header .down-header .aside-area .all-menu .part-1 .inner-inner-part { flex-direction: column; }
	.header .down-header .aside-area .part-1 { 
		padding: 20px 15px 10px;
	    margin: auto;
        width: 90%;
	}
	.header .down-header .aside-area .part-1 .area-title {
		background: #f5f5f5;
        padding: 10px;
        border-radius: 45px;
	}
	.header .down-header .aside-area .part-1 ul { padding: 0 18px; box-sizing: border-box; }
	.header .down-header .aside-area .part-1 ul li { padding-left: 0; }
	.header .down-header .aside-area .part-2 { 
		padding: 10px 15px 30px; 
	    margin: auto;
        width: 90%;
	}
	.header .down-header .aside-area .part-2 .area-title {
		background: #f5f5f5;
        padding: 10px;
        border-radius: 45px;
	}
	.header .down-header .aside-area .part-2 ul { padding: 0 18px; }
	.all-menu-btn { width: 80%; margin: 0px auto 30px; font-size: 15px; }
	/* .header .down-header .aside-area .all-menu .part-1 .inner-part,
	.header .down-header .aside-area .all-menu .part-2 .inner-part { display: none; } */
	.member-wrap .login-move { margin-left: 0; }
}

@media all and (max-width: 376px) {
	.header .up-header .left-area .logo-box img { width: 90px; }
	.search--wrap { width: 250px; }
}