@charset "utf-8"; @import url('reset.css'); 
/*########## reset ##########*/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/* =========================
   FONT
========================= */

/* Pretendard - Regular */
@font-face {
    font-family: 'Pretendard';
    src: url('../font/PRETENDARD-REGULAR.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Pretendard - Medium */
@font-face {
    font-family: 'Pretendard';
    src: url('../font/PRETENDARD-MEDIUM.OTF') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Pretendard - SemiBold */
@font-face {
    font-family: 'Pretendard';
    src: url('../font/PRETENDARD-SEMIBOLD.OTF') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Pretendard - Bold */
@font-face {
    font-family: 'Pretendard';
    src: url('../font/PRETENDARD-BOLD.OTF') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* S-Core Dream - Bold */
@font-face {
    font-family: 'S-CoreDream';
    src: url('../font/SCDream6.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* S-Core Dream - Heavy */
@font-face {
    font-family: 'S-CoreDream';
    src: url('../font/SCDream8.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
}
.admission_title {
    font-family: 'S-CoreDream', sans-serif;
}
/*########## root ##########*/


/*########## layout ##########*/
.intro {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
    background-image:
    	url('../img/mainIntro/pc_bg6.png'),  
        url('../img/mainIntro/pc_bg5.png'),  
        url('../img/mainIntro/pc_bg3.png'), 
        linear-gradient(90deg, #FFFFFF 0%, #B8E6FF 100%);

    background-repeat:
       	no-repeat,
        no-repeat,
        no-repeat,
        no-repeat;

    background-position:
        right bottom,
        left -340px bottom,
        right 40px bottom 60px,
         center;

    background-size:
        30%, 
        60%, 
        40%,   
        100% 100%;
}
.inner {
	width: 1700px;
	max-width: calc(100% - 48px);  
	margin: 0 auto;
	padding: 24px 0; 
}

.intro_header .inner {
	height: 78px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.intro_logo img {
	width: 160px;
}
.intro_header .menu {
	display: flex;
	align-items: center;
	gap: 16px;
}
.intro_header .menu li {
	border-radius: 999px;
	box-shadow: 0 0 10px #B0CEDE;
	background: #fff;
}
.intro_header .menu li.home_menu {
	background: #034DA2;
}
.intro_header .menu li.home_menu a {
	color: #fff;
}
.intro_header .menu a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #146CD0;
	padding: 10px 24px;
	font-size: 16px;
	text-align: center;
	word-break: keep-all;
}
.intro_header .menu li:hover {
	background: #146CD0;
}
.intro_header .menu li:hover a {
	color: #fff;
}
.home_short {
	width: 24px;
}
main {
	height: calc(100vh - 78px - 76px);
	flex-shrink: 0;
}
main .inner {
	height: 100%;
	display: flex;
	gap: 88px;
	padding: 24px 0;
	padding-top: 0;
}
.c_blue {
	color: #146CD0;
}
.c_red {
	color: #BB3333;
}
.leftSec {
	width: 28%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.admission_title {
	font-size: 58px;  
	word-break: keep-all;
}
.admission_title .c_blue {
	display: block;
}
.intro_title p {
	font-weight: 400;
	padding-left: 10px;
	margin-top: 8px;
}
.video_wrap {
	border-radius: 16px;
	position: relative;
    width: 529px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    box-shadow: 0 0 10px #B0CEDE;
    margin-top: 40px; 
    border: 14px solid #E2F4FF;
}
.video_wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 16px;
}


/* 우측 */
.rightSec {
	flex: 1;
	min-width: 0;
}
.admission_scroll {
	height: 100%;
	overflow-y: auto;
	padding: 16px;

	/* Firefox */
	scrollbar-width: thin;
	scrollbar-color: rgba(3, 77, 162, 0.35) rgba(255, 255, 255, 0.35);
}

/* Chrome / Edge / Safari */
.admission_scroll::-webkit-scrollbar {
	width: 6px;
}

.admission_scroll::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.35);
	border-radius: 10px;
}

.admission_scroll::-webkit-scrollbar-thumb {
	background: rgba(3, 77, 162, 0.35);
	border-radius: 10px;
}

.admission_scroll::-webkit-scrollbar-thumb:hover {
	background: rgba(3, 77, 162, 0.6);
}
/* 입학전형 안내 컨텐츠 영역 */
.admission_card {
	background: #fff;
	padding: 30px;
	border-radius: 16px;
	box-shadow: 0 0 10px #B0CEDE;
}
.admission_card + .admission_card {
	margin-top: 24px;
}
.card_inner {
	display: flex;
	gap: 16px;
	justify-content: space-between;
	align-items: flex-start;
}
.admission_info {
	width: 54%;
	word-break: keep-all;
}
.admission_name {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 28px;
	color: #146CD0;
	margin-bottom: 20px;
	word-break: keep-all;
}
.admission_name i {
	width: 36px;
	height: 36px;
	background: url(../img/mainIntro/history_edu.png) no-repeat center center;
	background-size: contain;
}
.admission_detail p {
	display: flex;
    align-items: flex-start;
	gap: 4px;
}
.admission_detail p + p {
	margin-top: 10px;
}
.detail_label {
	font-size: 18px;
	padding: 0 16px;
	border-left: 4px solid #C4EAFF;
	min-width: 130px;
	font-weight: 500;
}
.detail_text {
	font-size: 18px;
	font-weight: 700;
}
.detail_text.c_blue {
	font-size: 20px;
	font-weight: 800;
}

.admission_target {
	font-weight: 400;
	margin-top: 20px; 
}
.admission_links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: 46%;
}

.admission_link {
	border-radius: 8px;
	background: #034DA2;
	color: #fff;
	text-align: center;
	transition: 0.2s;
	padding: 12px 16px;
	width: calc(50% - 6px);
}
.admission_link.full {
	width: 100%;
}
.admission_link:hover {
	background: #146CD0;
	transform: translateY(-2px);
}

/* =========================
   ADMISSION BUTTON COLOR
   색상 클래스만 변경해서 사용
========================= */

.admission_link {
	word-break: keep-all;
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 52px;
	padding: 12px 20px;

	border-radius: 6px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;

	transition:
		background-color .2s ease,
		color .2s ease,
		transform .2s ease,
		box-shadow .2s ease;
}

/* =========================
   ADMISSION BUTTON COLOR
========================= */

/* 진한 파랑 */
.admission_link--blue {
	background-color: #2477D5;
	color: #fff;
}

.admission_link--blue:hover {
	background-color: #1B66BD;
}


/* 흰색 + 파랑 텍스트 */
.admission_link--white {
	background-color: #fff;
	color: #2477D5;
	box-shadow: 0 2px 10px rgba(36, 119, 213, .20);
}

.admission_link--white:hover {
	background-color: #F5FAFF;
}


/* 밝은 블루 */
.admission_link--royal {
	background-color: #3C73F1;
	color: #fff;
}

.admission_link--royal:hover {
	background-color: #3264D6;
}


/* 보라 */
.admission_link--purple {
	background-color: #9554E7;
	color: #fff;
}

.admission_link--purple:hover {
	background-color: #8242D1;
}


/* 하늘색 */
.admission_link--sky {
	background-color: #59AFE0;
	color: #fff;
}

.admission_link--sky:hover {
	background-color: #4599C9;
}


/* 블루그레이 */
.admission_link--slate {
	background-color: #5D6284;
	color: #fff;
}

.admission_link--slate:hover {
	background-color: #4E5372;
}


/* 진한 차콜 */
.admission_link--dark {
	background-color: #34353A;
	color: #fff;
}

.admission_link--dark:hover {
	background-color: #27282C;
}

/* 오렌지 */
.admission_link--orange {
	background-color: #F28A3D;
	color: #fff;
}

.admission_link--orange:hover {
	background-color: #DA742B;
}


/* 핑크 */
.admission_link--pink {
	background-color: #E26891;
	color: #fff;
}

.admission_link--pink:hover {
	background-color: #CA527A;
}


/* 그린 */
.admission_link--green {
	background-color: #42A878;
	color: #fff;
}

.admission_link--green:hover {
	background-color: #358E64;
}


/* 민트 */
.admission_link--mint {
	background-color: #3DB5A7;
	color: #fff;
}

.admission_link--mint:hover {
	background-color: #31998D;
}

/* =========================
   ADMISSION BUTTON PATTERN
========================= */

.admission_link--pattern {
	background-image: url('../img/mainIntro/bg_logo.png');
	background-repeat: no-repeat;
	background-position: right bottom -10px;
	background-size: 60px;
}




/* footer */
.intro_footer {
	height: 76px;
	flex-shrink: 0;
	background: #06346b;
	color: #fff;
}

.intro_footer .inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
	flex-wrap: wrap;
	gap: 24px;
}
.footer_call {
	display: flex;
	align-items: center;
	gap: 16px;
}
.call_item {
	display: flex;
	align-items: center;
	gap: 6px;
}
.call_item span {
	font-size: 14px;
	font-weight: 400;
	border: 1px solid #fff;
	border-radius: 999px;
	padding: 4px 12px; 
}
.call_item a {
	color: #fff;
}
.footer_sns {
	display: flex;
	align-itmes: center;
	gap: 12px;
}
.footer_sns img {
	width: 36px;
	display: block;
}
.mb-only {
	display: none;
}















/* ######### 반응형 ###########  */
@media (max-width: 1440px) {
	.intro_header {
		order: 2;
	}
	.intro_footer {
		order: 3;
	}
	main {
		padding-top: 24px;
	}
	main .inner {
		gap: 24px;
	}
	.intro_header .inner {
		justify-content: center;
		height: auto;
	}
	.intro_header .menu {
		flex-wrap: wrap;
		justify-content: center;
	}
	.intro_header .inner .intro_logo{
		display: none;
	}
	.leftSec .intro_logo.mb-only {
		display: block;
		margin-bottom: 0;
	}
	
	.intro_title p {
		padding-left: 4px;
		margin-top: 6px;
	}
}


@media (max-width: 1280px) {
	.intro_footer {
		height: auto;
		padding: 16px 0;
	}
	main {
		height: auto;
	}
	.admission_scroll {
		overflow-y: visible;
		padding: 0;
	}
	.rightSec {
		order: 1;
	}
	.leftSec {
		order: 2;
		margin-top: 100px;
		position: relative;
	}
	.leftSec::after {
		content: '';
		position: absolute;
		right: 0;
		bottom: calc(100% - 80px);
		max-width: 100%;
		width: 400px;
		height: 200px;
		background: url(../img/mainIntro/bg3.png) no-repeat center center;
		background-size: contain;
	}
	
	.leftSec .intro_title {
		display: none;
	}
	.intro_title.mb-only {
		display: block;
		margin-bottom: 24px;
	}
	.intro_logo.mb-only {
		display: block;
		margin-bottom: 24px;
	}
	main .inner {
		flex-wrap: wrap;
	}
	.leftSec {
		width: 100%;
	}
	.admission_title .c_blue {
		display: inline-block;
		margin-right: 8px;
	}
	.intro {
	    background-image:
	        url('../img/mainIntro/mb_bg1.png'), 
	        linear-gradient(90deg, #FFFFFF 0%, #B8E6FF 100%);
	
	    background-repeat:
	        no-repeat,
	        no-repeat;
	
	    background-position:
	        right -24px top -230px, 
	         center;
	
	    background-size:
	        70%,  
	        100% 100%;
	}
	.video_wrap {
		width: 100%;
	}

}


@media (max-width: 768px) {
	.intro_header .menu li {
		width: 100%;
	}
	.intro_header .menu a {
		padding: 16px;
	}
	.card_inner {
		flex-wrap: wrap;
		gap: 36px; 
	}
	.admission_info {
		width: 100%;
	}
	.admission_links {
		width: 100%;
	}
	.intro_footer .inner {
		justify-content: center;
	}
	.footer_call {
		flex-wrap: wrap;
		justify-content: center;
	}
	.admission_title {
		font-size: 32px;
	}
}

@media (max-width: 560px) {
	.intro {
		 background-position:
	        right -24px top -200px,  
	         center;
	}
	.admission_name {
		font-size: 20px;
	}
	.detail_label,
	.detail_text,
	.detail_text.c_blue,
	.admission_target,
	.admission_link {
		font-size: 16px;
	}
	.intro_footer {
		padding: 32px 0;
	}
	.intro_footer .inner {
		gap: 40px;
	}
	.call_item {
		flex-wrap: wrap;
		justify-content: center;
	}
	.call_item span {
		font-size: 16px;
	}
	.call_item a {
		font-size: 28px;
		width: 100%; 
		text-align: center;
	}
}

@media (max-width: 480px) {
	.intro {
		 background-position:
	        right -24px top -160px,      
	         center;
	}
	.admission_title {
		font-size: 24px;
	}
	.admission_card {
		padding: 16px;
	}
	.admission_detail p {
		flex-wrap: wrap;
	}
	.detail_text {
		width: 100%;
		padding-left: 20px;  
	}
}