@import "./_page-title";


.body-container {
	position: relative; width: 100%;
}


.sub-com-container {
    width: 100%; max-width: 1300px; min-height: calc(100vh - 468px); padding: 0 0 160px; margin: 0 auto;
}


/* 컨텐츠 래퍼 */
.contents-wrap {
	padding: 70px 0;
	.content-group {
		padding-bottom: 50px;
	}
}

// 서브페이지 전용 공통 컨텐츠 타이틀
.cont-title1 {
	position: relative; border-bottom: 1px solid #aaa; margin-bottom: 20px; padding-left: 45px; padding-bottom: 10px;
    &:after, &:before {
        content: ''; position: absolute; width: 23px; height: 23px; border-radius: 100px; border: 2px solid #fff; top: 10px; 
    }
    &:after {
        left: 0; background: var(--theme);
    }
    &:before {
		left: 14px; background: #192775;
    }
	.tit {
		font-size: 2.7rem; font-weight: 800;position: relative; display: inline-block;
	}
}
.cont-title2 {
	position: relative; padding-bottom: 10px;
	.tit {
		position: relative; font-size: 2.1rem; font-weight: 800; padding-left: 22px;
		&:after {
			content: ''; width: 13px; height: 13px; border-radius: 45px; background: #fff; position: absolute; left: 0; top: 10px; border: 3px solid #192775;
		}
	}
    &.non-dot {
        .tit {
            padding-left: 0;
            &:after {
                display: none;
            }
        }
    }
}

.cont-title3 {
	position: relative; padding-bottom: 12px;
	.tit {
		position: relative; font-size: 1.8rem; font-weight: 700; padding-left: 13px;
		&:after {
			content: ''; width: 5px; height: 5px; border-radius: 20px; background: #000; position: absolute; left: 0; top: 12px;
		}
	}
}
.cont-text {
	margin-bottom: 15px; line-height: 1.5;
	&.dot {
		.txt {
			padding-left: 10px;
			&:after {
				content: ''; width: 4px; height: 4px; border-radius: 10px; background: #555; position: absolute; top: 12px; left: 0; 
			}
		}
	}
    &.type-box {
        border: 1px solid var(--line); padding: 8px 20px; border-radius: 3px; background: #f3f3f3;
        &:not(:last-child) {
            margin-bottom: 10px;
        }
    }
    .box {
        .tit {
            font-weight: 800; padding-bottom: 10px;
        }
        .txt {
            strong {
                font-weight: 600;
            }
        }
        .inner-txt {
            padding-bottom: 10px;
            .txt {
                font-weight: 300;
            }
        }
    }
	.txt {
		position: relative; font-size: 1.7rem; padding: 0 0 7px 0; font-weight: 400; line-height: 1.7; color: #333;
		&:last-child {
			padding-bottom: 0;
		}
        strong {
            font-weight: 800;
        }
	}
    .inner-txt {
        padding-left: 15px;
    }
}

.cont-img-box {
    margin-bottom: 15px;
    &.layout-2 {
        display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
        img {
            width: 100%; height: 350px; object-fit: cover;
        }
    }
    img {
        max-width: 100%; height: auto; width: auto;
    }
}


@media (max-width: 1024px) {
	.contents-wrap {
		.content-group {
			padding-bottom: 30px;
		}
	}
	.cont-title1 {
		margin-bottom: 15px;
		&:after, &:before {
			top: 8px;
		}
		.tit {
			font-size: 2.3rem;
		}
	}
	.cont-title2 {
		padding-bottom: 15px;
		.tit {
			font-size: 1.8rem; padding-left: 17px;
            &:after {
                width: 12px; height: 12px; top: 9px;
            }
		}
	}
    .cont-title3 {
        .tit {
            font-size: 1.6rem; padding-left: 10px;
            &:after {
                width: 4px; height: 4px; top: 12px;
            }
        }
    }
	.cont-text {
		padding-left: 15px;
		.txt {
			font-size: 1.5rem; padding: 0 0 5px 0;
		}
		&.dot {
			padding-left: 10px;
			.txt {
				&:after {
					left: 3px; width: 3px; height: 3px;
				}
			}
		}
	}
    .cont-img-box {
        &.layout-2 {
            grid-template-columns: repeat(1, 1fr);
            img {
                height: auto;
            }
        }
    }
}


@media (max-width: 768px) {
	.contents-wrap {
		padding: 50px 0;
	}
}


@media (max-width: 580px) {
	.cont-title1 {
        padding-left: 35px;
        &:after, &:before {
            width: 18px; height: 18px; top: 7px;
        }
        &::before {
            left: 10px;
        }
		.tit {
			font-size: 2.1rem;
		}
	}
	.cont-title2 {
        padding-bottom: 10px;
		.tit {
			font-size: 1.6rem;
			&:after {
				top: 7px;
			}
		}
	}
    .cont-title3 {
        padding-bottom: 10px;
        .tit {
			font-size: 1.5rem;
			&:after {
				top: 9px;
			}
        }
    }
	.cont-text {
        margin-bottom: 10px; padding-left: 10px;
		.txt {
			font-size: 1.4rem; line-height: 1.5;
		}
		&.dot {
			padding-left: 6px;
		}
	}
}