/* ==========================================================================
1. GLOBAL & BASE STYLES
========================================================================== */

:root {
	/* Bootstrap Colors */
	--bs-primary: #2e1c4e;
	--bs-secondary: #6c757d;
	--bs-success: #28a745;
	--bs-info: #17a2b8;
	--bs-warning: #ff9800;
	--bs-danger: #e53935;
	--bs-light: #f3f4f6;
	--bs-dark: #212121;

	/* Custom Point Colors */
	--point-color1:#BF24BB;
	--point-color2:#4B6ABF;
	--point_bio:#405B9A;

	/* Custom Box Colors */
	--box1:#F4F5FB;
	--box2:#F6EEF5;
	--blackBox1:#280027;
	--blackBox2:#001137;
	--bg_gray1:#EAEFFC;
	--bg_gray2:#eeeeee;
	--boxBlue1:#F9F9F9;
	--boxBlue2:#F9F7FF;
	--box_Black1:#343741;
	--box_Black2:#232029;
}

/* Base element styles */
* {
	font-family: 'Pretendard Variable';
}

body {
	scroll-snap-type: y mandatory;
	overflow-y: scroll;
}

a {
	text-decoration: none;
}

/* ==========================================================================
2. LAYOUT & STRUCTURE
========================================================================== */
.container-page {
	width: 100%;
	height: calc(100% - 73px);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1em;
	color: #fff;
}

.section {
	scroll-snap-align: start;
}

.background-media-container{
	position: relative;
	min-height:100vh;
	overflow:hidden;
}

.background-media{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.background-video{
	display:block;
}
.background-image{
	display:block;
}


.overlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 2;
}

.content{
	position: relative;
	z-index: 3;
	display:flex;
	flex-direction:column;
	justify-content:center;
	width:100%;
	height:100%;
}


/* ==========================================================================
3. COMPONENTS
========================================================================== */

/* Main Navigation (Desktop) */
.naviLink {
    font-size:1em;
    font-weight:700;
    color:#000000;
    opacity:0.4;
}
.naviLink_active {
    font-size:1em;
    font-weight:700;
    color:#000000;
    opacity:1;
}
.naviLink:hover {
    color:var(--point_bio);
    opacity:1;
}
.naviLink:visited {
    color:#000000;
    opacity:0.4;
}

/* Mobile Navigation */
.naviLinkMobile {
    color:#000000 !important;
    font-size:15px;
    font-weight:400;
    cursor:pointer;
}
.naviLinkMobile-title {
    color:#000000 !important;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}
.nav-item-row{
    border-top: 1px solid #e0e0e0;
    padding-top: 10px;
    margin-top: 10px;
}

/* Navigation Buttons */
.naviBtn {
    border:1px solid rgba(0,0,0,.6);
    font-size:1em;
    font-weight:700;
    padding:12px 20px;
    border-radius:60px;
}
.naviBtn:hover {
    background-color:var(--point_bio);
    color:#fff;
}
.btn_white {
    background-color:transparent;
    color:#fff;
    border:1px solid #fff;
    border-radius:60px;
    display:inline-flex;
    align-items:center;
    text-align:center;
    justify-content:center;
    padding:3px;
}
.btn_white:hover {
    background-color:rgba(255,255,255,.8);
    color:#000;
}

/* Other Navigation Elements */
.navTop{
    color:#000;
    font-size:18px;
    font-weight:700;
}
.navTop:active,
.navTop:visited{
    color:#000;
}
.navTop:hover{
    color:var(--point_bio);
}
.navSubBox{
    margin:10px auto 0;
    width:117px;
    display:none;
    line-height:30px;
}
.navSub{
    color:#999;
    font-size:16px;
    font-weight:500;
}
.navSub:hover{
    color:var(--point_bio);
}
.navBox {
    width:189px;border-radius:16px;padding:16px 8px;
}
.navBox:hover{
    transition:all 0.5s ease;
    background-color:#F6F4FE;
}
.nav-link{
    font-weight:700;
    color:rgba(0,0,0,0.4);
}

/* ==========================================================================
   4. RESPONSIVE STYLES (MEDIA QUERIES)
   ========================================================================== */

@media (min-width: 1200px) {
    .container {
        max-width: 1180px;
    }
}



/*
모바일일때만 보이는 클래스
d-md-none

PC일때만 보이는 클래스
d-none d-md-block
*/


.pc-only {
	display:flex;
}

.mobile-only {
	display:none !important;
}


.container-title {
	font-size:2.5em;
	font-weight:600;
	color:#000;
}


@media (max-width: 767.98px) {
	/*
	.container-page {
		height: auto;
		min-height: auto;
	}
	*/

	/* 절대 위치(absolute)로 고정된 요소를 자연스러운 흐름(static)으로 변경 */
	.container-page .container {
		position: static !important;
		top: unset !important;
		left: unset !important;
		transform: none !important;
	}

	div.intro-text {
		font-size: 28px !important;
	}

	.pc-only {
		display:none !important;
	}

	.mobile-only {
		display:flex !important;
	}

	.container-title {
		font-size:1.5em;
		font-weight:500;
		color:#000;
	}
}