.sub_bg {
	background-image: url("../images/mypage_bg.png");
}


.mypage .grid {
	gap: 30px 80px;
}
.mypage .grid .side {
	width: 130px;
	border-top: 3px solid #080C40;
	padding-top: 20px;
}
.mypage .grid .side h3 {
	font-size: 28px;
	font-family: 'Cafe24Ohsquare';
	margin-bottom: 30px;
}
.mypage .grid .side ul li a {
	display: block;
	font-size: 18px;
	font-family: 'AppleSDGothicNeo';
	font-weight: 500;
	margin-top: 15px;
}
.mypage .grid .side ul li.active a {
	color: #FF5F1F;
}
.mypage .grid .conts {
	flex: 1;
}
.mypage .grid .conts .title {
	position: relative;
	font-size: 28px;
	font-family: 'Cafe24Ohsquare';
	padding-bottom: 20px;
	border-bottom: 2px solid #080C40;
	margin-bottom: 30px;
}
.mypage .grid .conts .title button , .mypage .grid .conts .title a {
	width: 46px;
	height: 28px;
	font-family: 'AppleSDGothicNeo';
	background: #BEBEBE;
	font-size: 14px;
	color: var(--white);
	margin-left: 10px;
	vertical-align: middle;
}
.mypage .grid .conts .title a{text-align:center;margin-left: 10px;padding: 6px 10px;display: none;}
.mypage .grid .conts .title button.o_btn {
	display: none;
}
.mypage .grid .conts .title p {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 15px;
	color: #313131;
	font-family: 'AppleSDGothicNeo';
}
.mypage .grid .conts .title p i {
	color: #DA1515;
}
.mypage .grid .conts .func {
	font-family: 'AppleSDGothicNeo';
	gap: 10px;
	margin-bottom: 30px;
}
.mypage .grid .conts .func .select_btn button {
	font-size: 15px;
	color: #B7B7B7;
	height: 36px;
	padding: 0 10px;
	border: 1px solid #D9D9D9;
	margin-right: -1px;
	font-weight: 500;
	box-sizing: border-box;
}
.mypage .grid .conts .func .select_btn button.active {
	color: #000;
}
.mypage .grid .conts .func .drop_down .result {
	width: 177px;
	height: 36px;
	border-radius: 0;
	background-position: calc(100% - 10px) 50%;
	color: #B7B7B7;
	font-weight: 500;
}
.mypage .grid .conts .func .drop_down.active .result {
	color: #000;
}
.mypage .grid .conts .func .date {
	align-items: center;
}
.mypage .grid .conts .func .date > div {
	width: 150px;
}
.mypage .grid .conts .func .date > div input {
	display: block;
	width: 100%;
	height: 36px;
	line-height: 34px;
	border: 1px solid #D9D9D9;
	background: url("../images/ico-board.svg")no-repeat calc(100% - 10px) 50%;
	padding: 0 10px;
	font-size: 16px;
	text-align: left;
	text-align-last: left;
	color: #000!important;
	box-sizing: border-box;
}
.mypage .grid .conts .func .date span {
	font-size: 14px;
	color: #D9D9D9;
	padding: 0 5px;
}
.mypage .grid .conts .func .search input {
	width: 150px;
	height: 36px;
	border: 1px solid #D9D9D9;
	font-size: 16px;
	padding: 0 30px 0 10px;
	background: url("../images/ico-search.svg")no-repeat calc(100% - 10px) 50%;
	box-sizing: border-box;
}
.mypage .grid .conts .func .search_btn {
	width: 65px;
	height: 36px;
	background: var(--dBlue);
	color: var(--white);
	font-size: 14px;
}

.mypage .grid .conts .scroll {
	overflow-x: auto;
}
.mypage .grid .conts .scroll table {
	min-width: 800px;
}
.mypage .grid .conts table {
	font-family: 'AppleSDGothicNeo';
}
.mypage .grid .conts table th {
	border-top: 1px solid #454240;
	border-bottom: 1px solid #454240;
	background: #EFEFEF;
	font-weight: 400;
	padding: 13px 0px;
}
.mypage .grid .conts table td {
	border-bottom: 1px solid #D2D2D2;
	font-weight: 400;
	padding: 10px;
	text-align: center;
	color: #595959;
}
.mypage .grid .conts table td .btn_area a {
	display: block;
	width: 80px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #2E2E2E;
	border: 1px solid #D9D9D9;
	margin: 0 auto;
	font-size: 16px;
	box-sizing: border-box;
}
.mypage .grid .conts table td .btn_area a.o_btn {
	border: 1px solid var(--orange);
	margin-bottom: 5px;
}

.mypage .grid .conts .modify {
	font-family: 'AppleSDGothicNeo';
}
.mypage .grid .conts .modify .flex {
	align-items: center;
	margin-bottom: 15px;
}
.mypage .grid .conts .modify .flex p {
	width: 120px;
	font-size: 16px;
}
.mypage .grid .conts .modify .flex p i {
	color: #DA1515;
}
.mypage .grid .conts .modify .flex div {
	flex: 1;
}
.mypage .grid .conts .modify .flex div input {
	width: 100%;
	max-width: 420px;
	height: 38px;
	border: 1px solid #D2D2D2;
	padding: 0 20px;
	font-size: 14px;
	box-sizing: border-box;
}


.mypage .grid .qna .func .drop_down .result {
	width: 120px;
}
.mypage .grid .qna .scroll table {
    min-width: 720px;
}
.mypage .grid .qna .write_btn {
	display: block;
	width: 145px;
	height: 55px;
	line-height: 55px;
	text-align: center;
	font-size: 18px;
	font-family: 'AppleSDGothicNeo';
	font-weight: 600;
	margin-top: 30px;
}

.mypage .grid .qna_write table th {
	border: 1px solid #E3E0EC;
	background: #F9F9F9;
	font-size: 16px;
	font-weight: 600;
}
.mypage .grid .qna_write table td {
	border: 1px solid #E3E0EC;
	font-size: 16px;
	padding: 15px 20px;
	text-align: left;
}
.mypage .grid .qna_write table td.cont {
	height: 232px;
}
.mypage .grid .qna_write table td input {
	display: block;
	width: 100%;
	font-size: 16px;
}
.mypage .grid .qna_write table td textarea {
	display: block;
	width: 100%;
	height: 200px;
	font-size: 16px;
	resize: none;
	border: 0;
	padding: 0;
}
.mypage .grid .qna_write .line {
	width: 100%;
	height: 1px;
	background: rgba(161, 161, 161, 0.50);
	margin-top: 28px;
}
.mypage .grid .qna_write .answer {
	margin-top: 28px;
}
.mypage .grid .qna_write .o_btn {
	display: block;
	width: 145px;
	height: 55px;
	text-align: center;
	font-size: 18px;
	font-family: 'AppleSDGothicNeo';
	font-weight: 600;
	margin-top: 30px;
}







@media screen and (max-width: 1320px) {
	.mypage .grid {
		gap: 30px 40px;
	}
}
@media screen and (max-width: 1024px) {
	.mypage .grid .side {
		width: 100%;
	}
	.mypage .grid .side ul {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 30px;
		align-items: center;
	}
	.mypage .grid .side ul li a {
		margin: 0;
	}
	.mypage .grid .conts {
		flex: none;
		width: 100%;
	}
}
@media screen and (max-width: 768px) {
	.mypage .grid .conts .func .date > div input {
		font-size: 14px;
	}
	.mypage .grid .conts .scroll table {
		min-width: 610px;
	}
	.mypage .grid .conts table th,
	.mypage .grid .conts table td {
		font-size: 14px;
	}
	.mypage .grid .conts table td .btn_area a {
		font-size: 14px;
	}
	
	.mypage .grid .conts .modify .flex p {
		width: 95px;
	}
	
	.mypage .grid .qna .scroll table {
		min-width: 540px;
	}
	.mypage .grid .qna .write_btn {
		width: 120px;
		height: 45px;
		line-height: 45px;
		font-size: 16px;
	}
	
	
	
	.mypage .grid .qna_write table tr,
	.mypage .grid .qna_write table th,
	.mypage .grid .qna_write table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.mypage .grid .qna_write table th {
		border-bottom: 0;
		text-align: left;
		padding: 15px 20px;
		font-size: 16px;
	}
	.mypage .grid .qna_write .o_btn {
		width: 120px;
		height: 45px;
		font-size: 16px;
		margin-top: 10px;
	}
}
@media screen and (max-width: 480px) {
	.mypage .grid .conts .func .date > div {
		flex: 1;
	}
	
	.mypage .grid .conts .title p {
		position: static;
		margin-top: 5px;
	}
}
@media screen and (max-width: 380px) {
	.mypage .grid .side ul {
		gap: 10px;
	}
	.mypage .grid .side ul li a {
		font-size: 16px;
	}
}