@charset "utf-8";
@media (max-width: 1599px){
	.row.headermenurow > ul > li > a {
		font-size: 16px;
	}
	.menu > li:first-child {
		font-size: 16px;
	}
}
@media (max-width: 1440px) {
	/* ## 마이페이지 ##  */
	.dormMy {
		flex-wrap: wrap;
	}
	.dormMy .leftSec,
	.dormMy .rightSec {
		width: 100%;
	}
	.my_sidebar {
		flex-direction: row;
		justify-content: center;
		padding: 0;
		border: none;
		box-shadow: none;
		flex-wrap: wrap;
	}
	.my_sidebar a {
		width: calc(100% / 6 - 10px);
		justify-content: center;
		font-size: 16px;
		border: 1px solid #CAD0DF;
		text-align: center;
	}
	.my_sidebar a.active {
		background: var(--du-bg-info);
		border: 1px solid var(--du-primary);
	}
	.dormMy .dormMy_title {
	    margin: 0 auto 48px;
	}
	.dormMy_title.pc {
		display: none;
	}
	.dormMy_title.mbl {
		display: block;
	}

	.my_sidebar a:not(.active):hover {
		background: #fff;
	}
}	

@media (max-width: 1199px){
	/*main_grid*/
	.main_grid {
		grid-gap: 16px;
	}
	/* quick 퀵메뉴  */
	.quick_title {
		word-break: break-all; 
	}
	.main_grid .quick_wrap {
		gap: 16px;
	}
	.main_grid .quick_wrap li {
		width: calc(100% / 5 - 12px); 
	}
	/* footer */
	footer.row {
		padding: 0 0 0 0;
	}
	/* 생활관 소개 */
	.dorm_intro p {
		font-size: 16px;
	}
	.dorm_intro > ul > li > ul li {
		font-size: 16px;
	}
	/* 게시판 검색상자 */
	.rpager {
		padding: 0 0;
	}
	
	/* ## 마이페이지 ##  */
	.side_ico {
		display: none;
	}
	
	/* ## 모바일헤더 ##  */
	.mobile_btn {
		width: 36px;
		height: 36px;
		border-radius: 999px;
		background: var(--du-primary);
        box-shadow: 0 0 8px #00000040;
	}
	.mobile_btn > ul {
		width: 18px;
		height: 14px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.mobile_btn > ul > li {
		background: #fff;
		width: 100%;
	}
	.mobile_btn > ul > li:nth-of-type(1) {
		top: 0;
	}
	.mobile_btn > ul > li:nth-of-type(2) {
		width: 100%;
		top: 50%;
		transform: translateY(-50%);
	}
	.mobile_btn > ul > li:nth-of-type(3) {
		top: 100%;
		width: 100%;
	}
	
	.modal-header .mobile_btn > ul > li:nth-of-type(1) {
		width: 100%;
		top: 50%;
		left: 0;
	}
	.modal-header .mobile_btn > ul > li:nth-of-type(2) {
		top: 50%;
		left: 0;
	}
	
	
	
	
}
@media (max-width: 1024px) {
	.main_grid {
		grid-template-columns: repeat(5, 1fr) 1fr;
		grid-template-areas: 
	      "visual visual visual visual visual visual"
	      "quick quick quick quick quick quick"
	      "apply apply notice notice notice notice";
	}
	.main_grid .visual {
		grid-row-end: auto;
	}
	.main_grid .quick_wrap {
		grid-column: 1 / 7;
	}
	.main_grid .apply {
		grid-column: 1 / 3;
		grid-row: 3 / 4;
		height: 100%;
		justify-content: flex-start;
	}
	.main_grid .notice {
		grid-row-start: 3;
	}
	
	/* ## 마이페이지 ##  */
	.step_diagram .step_detail p {
		font-size: 16px;
	}
	
}

@media (max-width: 768px) {
	.main_grid {
		grid-gap: 24px;
	}
	.main_grid .visual {
		padding: 24px;
		min-height: 220px; 
		border-radius: 16px 16px 53px 16px;   
	}
	.main_grid .visu_txt {
		font-size: 26px; 
	}
	.main_grid .apply {
		padding: 24px;
		grid-row: 2 / 3;
		grid-column: 1 / 7;
		border-radius: 16px;  
	}
	.main_grid .notice {
		padding: 24px;
		grid-column: 1 / 7;
		grid-row-start: 4;
	}
	/* quick 퀵메뉴  */
	.quick_wrap {
		flex-wrap: wrap;
	}
	.main_grid .quick_wrap {
		grid-row: 3 / 4;
	}
	.main_grid .quick_wrap li {
		width: calc(100% / 2 - 8px);
	}
	.quick_wrap li.full {
		order: 1;
		width: 100%;
	}
	.quick_img {
		display: none;
	}
	.quick_arrow {
		display: none;
	}
	.quick_wrap a {
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--du-bg-subtle);
	    box-shadow: 0 4px 6px #576E8F25; 
    	border: 1px solid var(--du-border-tertiary);
	}
	/* subvisual 서브 비쥬얼 영역 */
	.sub_visual {
		padding: 20px;
		background-image: 
			url(../images/renewal_img/sub_bg2.png),
			url(../images/renewal_img/sub_bg1.png);
		background-position: right top, right bottom;
		background-size: 20%, 20%;   
		background-repeat: no-repeat; 
		background-color: #E5F0FF;
		gap: 12px; 
	}
	.sub_visual h1 {
		font-size: 18px;  
		line-height: 1.4;
		font-weight: 600;
	}
 	.sub_visual p {
		font-size: 14px;
	}
	.dept_title {
		font-size:28px;
		margin: 0 auto 16px;
		
	}
	/*생활관 소개*/
	.dorm_intro {
		gap: 16px;
	}
	.dorm_intro > ul {
		width: 100%;
	}
	
	/* 시설현황 */
	.facility_wrap .sec1{
		grid-template-columns:repeat(2,1fr);;
	}
	.facility_wrap .sec1 li span {
		font-size: 14px;
		padding: 6px 10px;  
	}
	
	/* 게시판 검색상자 */
	.btn-flat.btn {
		margin-top: 10px; 
	}
	.sublist_body table {
		border-top: none;
	}
	.rpager .pageinfo {
		margin-bottom: 10px;
	}
	/* ## 마이페이지 ##  */
	.my_sidebar a {
		min-width: auto;
		width: calc(100% / 3 - 10px);
		text-align: center;
	}
	.step_diagram {
		gap: 6px;
	}
	.step_diagram li span {
		font-size: 14px;
	}
	.leave_btn i {
		display: none;
	}
	.leave_btn {
		padding-right: 36px; 
	}
	.leave_btn.active {
		background: var(--du-bg-info) url(../images/renewal_img/check_circle_blue.png) no-repeat center right 12px;
	    background-size: auto 20%;
	}
	
	
}
@media (max-width: 560px){
	/* ## 마이페이지 ##  */
	
	
}
@media (max-width: 499px){
	/* footer */
	.footaddr {
		margin-top: 20px;
	}
	.footer_info {
		padding: 0 0 0 0;
	}
	/* 시설현황 */
	.facility_wrap .sec1{
		grid-template-columns:1fr;
	}
	
	/* board.css */
	/* 게시글 상세 */
	.comment-input .textarea {
		flex-wrap: wrap;
		gap: 8px;
	}
	.comment-input .input-area textarea {
		flex-basis: 100%;
	}
	#add_new_comment {
		width: 100%;
		margin-left: 0;
		height: auto;
		padding: 10px;
	}
	
	/* ## 마이페이지 ##  */
	.step_diagram {
		flex-wrap: wrap;
		gap: 20px;
	}
	.step_diagram::before {
		left: 50%;
		top: 0;  
		width: 12px;
		height: 100%;
		transform: translateX(-50%);
	}
	.step_diagram li {
		width: 100%;
	}
	.step_diagram li span {
		justify-content: center;
	}
	.step_diagram li span i {
		transform: rotate(90deg);
	}
	.leave_btn span em {
		font-size: 14px;
	}
	
}











