45 lines
1.6 KiB
CSS
45 lines
1.6 KiB
CSS
/* Layout Utility Classes */
|
|
@layer components {
|
|
/* 표준형 */
|
|
.section-standard {
|
|
@apply relative h-[640px] md:h-[1000px];
|
|
}
|
|
.content-standard {
|
|
@apply relative h-full flex flex-col items-center justify-center text-center px-[20px] sm:px-[40px];
|
|
}
|
|
|
|
/* 고정형 */
|
|
.section-container.static {
|
|
@apply overflow-hidden relative pt-[32px] pb-[80px] px-[20px] sm:px-[40px] md:pt-[64px] md:pb-[200px] bg-[#F0F0F0];
|
|
}
|
|
.section-static {
|
|
@apply mx-auto lg:max-w-[1300px];
|
|
}
|
|
.section-static + .section-static {
|
|
@apply mt-[80px] md:mt-[100px];
|
|
}
|
|
|
|
.border-line {
|
|
@apply overflow-hidden relative rounded-[4px] md:rounded-lg
|
|
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
|
|
after:border after:border-white/10 after:rounded-[4px] after:md:rounded-lg;
|
|
}
|
|
|
|
/* 표준형 Title Classes */
|
|
.title-xlg {
|
|
@apply line-clamp-4 text-[24px] font-[700] leading-[34px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3 md:text-[50px] md:leading-[70px];
|
|
}
|
|
.title-lg {
|
|
@apply line-clamp-4 text-[20px] font-[700] leading-[30px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3 md:text-[42px] md:leading-[56px];
|
|
}
|
|
.title-md {
|
|
@apply line-clamp-2 text-[16px] font-[500] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-1 md:text-[24px] md:leading-[34px];
|
|
}
|
|
.title-sm {
|
|
@apply text-[15px] font-[500] leading-[24px] tracking-[-0.45px] md:text-[20px] md:leading-[30px] md:tracking-[-0.6px];
|
|
}
|
|
.title-xs {
|
|
@apply text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[18px] md:leading-[26px] md:tracking-[-0.54px];
|
|
}
|
|
}
|