/* ===============================
   GUIDE HERO
================================ */

.guide-hero{
	width: 100%;
    height: 450px;
    position: relative;
    background-image: url(/assets/images/guide-hero.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.guide-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}
.guide-hero-inner{
	max-width:1200px;
	margin:0 auto;
	color:#fff;
}

.guide-hero h1{
	font-size:42px;
	font-weight:800;
	text-align:center;
	position:relative;
	z-index:2;
}

.guide-hero p{
	margin-top:15px;
	font-size:18px;
	opacity:.85;
	text-align:center;
	position:relative;
	z-index:2;
}


/* ===============================
   GUIDE SECTION
================================ */

.guide-section{

}

.guide-inner{
	max-width:1280px;
	margin:0 auto;
}


/* ===============================
   GUIDE LAYOUT
================================ */

.guide-layout{
	display:flex;
	gap:0;
	align-items:flex-start;
}

.guide-content-area{
	word-break: keep-all;
	flex:1;
	padding:50px 0px 50px 80px;
}
.guide-content-area h2{
	position:relative;
	margin-top:80px;
	line-height:43px;
	padding-left:30px;
}
.guide-content-area h2::before{
	position:absolute;
	left:0;
    content: "◆ ";
    font-size: 14px;
    line-height: 43px;
    /* height: 30px; */
    display: inline-block;
    margin-right: 20px;
	color:#1c68b1;
}
.guide-content-area ul li{
	line-height:2.3;
}

/* ===============================
   SIDEBAR
================================ */



.guide-nav{
	flex:0 0 220px;
	position:sticky;
	top:120px;
	height:max-content;
	padding:10px;
	background:#fff;
}

.guide-nav-title{
	font-size:20px;
	margin-bottom:20px;
	font-weight:700;
	background:#9d0327;
	margin:-50px 0px 0;
	color:#fff;
	padding:60px 0;
	text-align:center;
}

.guide-nav ul{
	list-style:none;
	padding:0;
	margin:0px 0 0;
}

.guide-nav li{
	border: 1px solid #ccc;
	padding: 10px 0 10px 20px;
	background:#fff;
}

.guide-nav li:first-child,
.guide-nav li:nth-child(2){
	border-bottom: none;
}

.guide-nav a{
	text-decoration:none;
	color:#000;
	font-weight:600;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.guide-nav li.active{
	background:#000;
	position:relative;
}
.guide-nav li.active a{
	color: #fff;
	font-weight: 700;
}
.guide-nav li.active > .triangle{
	position:absolute;
	right:-10px;
	bottom:50%;
	margin-bottom:-5px;
	width:10px;
	height:10px;
	border-right:5px solid #fff;
	border-bottom:5px solid #fff;
	border-top:5px solid #fff;
	border-left:5px solid #000;
}

/* ===============================
   CONTENT
================================ */

.guide-text h2{
	font-size:28px;
	margin-bottom:18px;
	position:relative;
}

.guide-text h2::before{
	content:"";
	position:absolute;
	left:-18px;
	top:8px;
	width:6px;
	height:24px;
	background:#2f5d8c;
	border-radius:3px;
}

.guide-desc{
	font-size:17px;
	margin-bottom:20px;
	color:#555;
	line-height:1.7;
}

.guide-text ul{
	list-style:none;
	padding:0;
}

.guide-text li{
	margin-bottom:14px;
	padding-left:28px;
	position:relative;
	font-size:16px;
}

.guide-text li::before{
	content:"✔";
	position:absolute;
	left:0;
	color:#2f5d8c;
}


/* ===============================
   COMPONENT
================================ */

.guide-summary{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px;
	margin-bottom:60px;
}

.guide-summary-card{
	position:relative;
	background:#fff;
	border-radius:14px;
	padding:20px;
	box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.guide-summary-icon{
	position:absolute;
	top:-40px;
	left:-15px;
	font-size:35px;
}
.guide-summary-card strong{
	display:block;
	margin-top:10px;
	font-size:16px;
}
.tip{
	margin-top:0;
	margin-bottom: 60px;
    padding: 20px;
    color: #000;
    display: inline-block;
    border-radius: 999px;
}
.tip::before{
	content:"→";
}
.tip-button{
	display:block;
	margin-top:50px;
	text-align:center;
	padding:20px 0;
	background:#555;
	color:#fff;
	font-size:larger;
	border-radius:99px;
}
.tip-button:hover{
	background:#000;
}
.guide-tip{
	background:#eef4ff;
	border-left:4px solid #2f5d8c;
	padding:16px;
	margin-top:20px;
}

.guide-table{
	width:100%;
	border-collapse:collapse;
	margin-top:20px;
}

.guide-table th{
	background:#eee;
}

.guide-table th,
.guide-table td{
	border:1px solid #ddd;
	padding:12px;
}


/* ===============================
   RESPONSIVE
================================ */

@media(max-width:1280px){

	.guide-layout{
	flex-direction:column;
	}
	
	.guide-nav{
		flex:auto;
		display:flex;
		top:auto;
		width:100%;
		white-space:nowrap;
		padding:0px;
		border-bottom:1px solid #ddd;
		margin-bottom:30px;
	}
	.guide-hero{
		padding:40px 20px;
		height: 220px;
	}
	.guide-hero-inner h1{
		font-size:1.6rem;
		word-break: keep-all;
	}
	.guide-hero-inner p{
		font-size:0.8rem;
		word-break: keep-all;
	}
	.guide-nav-title{
		font-size: 16px;
		margin: 0;
		padding: 15px 25px;
	}

	.guide-nav ul{
		list-style:none;
		padding:0;
		margin:0px 0 0;
	}

	.guide-nav li{
		padding: 10px;
		border:none;
		border-right:1px solid #ccc;
	}

	.guide-nav li:first-child,
	.guide-nav li:nth-child(2){
	border-bottom: none;
	}

	.guide-nav a{
		text-decoration:none;
		color:#000;
		font-weight:600;
		line-height:29px;
	}
	.guide-nav li.active{
		background:#000;
	}
	.guide-nav li.active a{
		color: #fff;
		font-weight: 700;
	}
	.guide-nav li.active > .triangle{
		position:absolute;
		right:50%;
		bottom:-5px;
		margin-right:-5px;
		width:10px;
		height:10px;
		border-right:5px solid #fff;
		border-bottom:5px solid #fff;
		border-top:5px solid #000;
		border-left:5px solid #fff;
	}
	.guide-content-area{
		width:100%;
		padding:0 10px;
	}
	.guide-summary {
		display: flex;
		flex-direction: column;
		gap: 50px;
		margin-bottom: 60px;
	}
	.guide-summary-icon{
		position:absolute;
		top:-40px;
		left:0px;
		font-size:35px;
	}
	.tip-button{
		margin-bottom:40px;
	}
}
/* 기본값 */
.guide-nav-mobile{
	display:none;
}
@media (min-width:541px) and (max-width:1279px) {
	.guide-nav .guide-dropdown-btn{
		display:none;
	}
	.guide-nav ul{
		display:flex;
	}
	.tip-button{
		max-width:400px;
		display:block;
		margin:40px auto;
	}
}
@media(max-width:540px){

/* PC sidebar 숨김 */
.guide-nav-pc{
	display:none;
}

/* 모바일 sidebar */
.guide-nav-mobile{
	display:flex;
	position:relative;
}

/* 좌측 "분양 가이드" */
.guide-nav-title{
	flex:0 0 130px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#9d0327;
	color:#fff;
	font-size:16px;
	padding:5px 10px;
	margin:0;
	line-height:40px;
}

/* 우측 드롭다운 버튼 */
.guide-dropdown-btn{
	flex:1;
	display:flex;
	align-items:center;
	padding:0 15px;
	text-align:left;
	background:#000;
	font-size:16px;
	color:#fff;
	border:none;
	font-weight:600;
	line-height:40px;
}
.guide-nav li,
.guide-nav li:first-child,
.guide-nav li:nth-child(2),
.guide-nav li:nth-child(3){
	border-bottom:1px solid #ccc;
	background:#f5f5f5;
}
/* 화살표 */
.guide-dropdown-btn .arrow{
	margin-left:auto;
	transition:0.25s;
}

/* dropdown 메뉴 */
.guide-dropdown-menu{
	display:none;
	position:absolute;
	left:0;
	top:100%;
	width:100%;
	border:none;
	background:#fff;
	z-index:10;
}

/* dropdown 열림 */
.guide-dropdown-menu.open{
	display:block;
	width:calc( 100% - 130px );
	margin-left:130px;
	border-left:1px solid #ccc;
}

/* 메뉴 리스트 */
.guide-dropdown-menu li{
	border-bottom:1px solid #eee;
}
.guide-nav li{
	padding:0;
}
/* 메뉴 링크 */
.guide-dropdown-menu a{
	display:flex;
	align-items:center;
	line-height:50px;
	padding:0 15px;
	text-decoration:none;
	color:#000;
}

/* 화살표 회전 */
.guide-dropdown-btn.open .arrow{
	transform:rotate(180deg);
}

}