@charset "UTF-8";

/* 메인 페이지 전체 레이아웃 */
	.main_content{
		margin: 100px auto 0;
		box-sizing: border-box;
		width: 100%;
		max-width:1280px;
	}

/*메인 메뉴바 */
	.menu_bar{
		width:100%;
		height:80px;
		box-sizing: border-box;
		text-align: center;
	}
	.menu_bar li{
		margin: 0 40px;
		display: inline-block;
		cursor: pointer;
	}
	.menu_bar li >a{
		display: block;
		color: #8a8a8a;
		font-size: 20px;
		height: 80px;
		line-height: 78px;
	}
	.menu_bar li .active{
		color: rgb(157 128 63);
		font-weight: 600;
		border-bottom: 3px solid rgb(157 128 63);
	}
	.menu_bar li>a:hover{
		color: rgb(157 128 63);
		font-weight: 600;
		border-bottom: 3px solid rgb(157 128 63);
	}

	/* 검색창 */
	.search{
		margin-top:100px;
	}
	.search .search_form{
		height: 60px;
		display: flex;
		padding: 3px 0;
		box-sizing: border-box;
		background-color: white;
		flex-wrap: wrap;
		justify-content:center;
	}
	.search_main{
		width: 500px;
		height:100%;
		padding:0 20px;
		font-size: 18px;
		border: 1px solid gray;
		border-right: none;
		background-color: white;
	}
	.search_cs{
		background:url("https://static.onoffmix.com/images/pc/svg/search_2.svg") no-repeat center center;
		width:72px;
		height:100%;
		border: 1px solid gray;
		border-left: none;
		text-indent: 10000px;
	}
	/* faq 메뉴바 */
	.tab_section .tab_menu{
		margin: 60px 0 0;
		padding:0;
		border-right:1px solid gray;
		border-bottom: 1px solid gray;
		box-sizing: border-box;
		display: flex;
		justify-content:center;
		flex-wrap: wrap;
	}
	.tab_menu li{
		width:20%;
		height:50px;
		box-sizing: border-box;
		border-top:1px solid gray;
		border-left: 1px solid gray;
		display: flex;
	    justify-content: center;
	    align-items: center;
	    font-size: 19px;
	}
	.tab_menu li.active{
		color: rgb(157 128 63);
		font-weight: 600;
	}
	.tab_menu li:hover{
		text-decoration: underline;
	}
	/* FAQ 메인 컨첸츠 레이아웃 */
	.faq{
		display: inline-block;
		font-size: 18px;
	}
	.tab_content{
		margin-top:14px;
		font-size:16px;
		border-top: 2px solid black;
	}
	.tab_content ul{
		margin: 20px 0 0;
	}
	.tab_content ul li{
		border-bottom: 1px solid #d8d8d8;
	}
	.dropbox{
		box-sizing: border-box;
		width: 100%;
		position: relative;
		display: inline-block;
	}
	.dropbox .title_area{
		box-sizing: border-box;
		width: 100%;
		line-height: 61px;
		position: relative;
		
	}
	.dropbox .title_area .category{
		width: 150px;
		height: auto;
		box-sizing: border-box;
		display: inline-block;
		text-align: center;
		vertical-align: middle;
		font-size:20px;
		color : rgb(157 128 63);
	}
	
	.dropbox .title_area .detail{
		width: 800px;
		font-weight: normal;
		vertical-align: middle;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		display: inline-block;
		font-size:19px;
	}
	.detail .faq_question:hover{
		text-decoration:underline;
	}

	/*페이지 네이션*/
	.pagination_wrap{
		margin: 20px 0 40px;
		text-align: center;
		width: 100%;
	}
	.pagination{
		display: inline-block;
		vertical-align: middle;
	}
	.pagination_ul li{
		float: left;
	}
	.pagination_ul li a{
		width: 28px;
		margin: 0 11px;
	}
	
	/* 답변 토글 버튼 레이아웃 */
	.btn_more{
		background-image: url("https://static.onoffmix.com/images/pc/svg/arrow_up_bl.svg");
		width:100%;
		height: 64px;
		top: 0;
		left: 0;
		background: transparent url("https://static.onoffmix.com/images/pc/svg/arrow_down.svg") no-repeat 98.5% center;
		text-align: left;
		cursor: pointer;
		overflow: hidden;
		text-indent: -9999em;
		position: absolute;
		box-sizing: border-box;
		display: block;
		border: 1px solid transparent;
	}
	/* 답변 내용 레이아웃 */
	.dropbox .detail_content{
		position: relative;
		padding: 40px 50px 90px;
		box-sizing: border-box;
		width: 100%;
		font-size: 18px;
		background-color: #fafafa;
		overflow-x: hidden;
		overflow-y: auto;
	}
	/* 페이징 번호에 hover 효과 추가 */
	 .pagination_ul li.page-item a:hover {
	    text-decoration: underline;
	  }

  	/* 클릭된 페이지 번호에 색깔 입히기 */
	.pagination_ul li.page-item.active a {
	   color: rgb(157 128 63);
	   font-weight: 400; 
	}
	/*페이징 번호 크기*/
	.page-item{
		font-size: 25px;
	}
	/* 관리자 버튼 (admin계정으로 로그인했을때만 보임 ) */
	.admin_menu{
		width: 100%;
		display: flex;
		justify-content: center;
		}
	.admin_button{
		width: 130px;
	    height: 48px;
	    display: inline-block;
	    border-radius: 0;
	    border: 1px solid #d8d8d8;
	    background-color: #f7f7f7;
	    text-align: center;
	    line-height: 48px;
	    font-size: 16px;
	    font-weight:500;
	    color: #333;
	}
	.admin_delbutton{
	    display: inline-block;
	    border-radius: 0;
	    background-color: #f7f7f7;
	    text-align: center;
	    line-height: 48px;
	    font-size: 16px;
	    color: #333;
	    margin-top: 20px;
	}
	.admin_button:hover, .admin_delbutton:hover{
		color: rgb(157 128 63);
		font-weight: 600;
	}