@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* reset css*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; /*vertical-align:baseline;*/ background:transparent; font-family:"Pretendard Variable", Pretendard, sans-serif; letter-spacing:-0.25px}
body {line-height:normal !important; word-break:keep-all}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
dl,ul,ol,menu,li {list-style:none}
caption, legend {overflow:hidden; text-indent:-9999px; height:1px}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content:none}
a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none; color:inherit}
a:focus, a:hover {text-decoration:none !important}
ins {background-color:#ff9; color: #000; text-decoration:none}
mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold}
del {text-decoration:line-through}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help}
table {border-collapse:collapse; border-spacing:0}
hr {display:block; height:1px; border:0; border-top: 1px solid #cccccc; margin:1em 0; padding:0}
input, select {vertical-align:middle}
i {vertical-align:middle}
a[href^="tel"] {color:inherit; text-decoration:none}


#intro_container {width:100%; min-height:100vh; background:url('bg_campus.png') no-repeat center / cover; display:flex; align-items:center; padding:60px 20px; box-sizing:border-box}
.intro_inner {width:100%; max-width:1035px; margin:0 auto}

.top_banner {background:linear-gradient(90deg, #448ccb, #74b8b6); border-radius:20px; padding:30px 40px; display:flex; align-items:center; color:#fff; margin-bottom:45px; box-shadow:0 10px 30px rgba(0,0,0,0.1)}
.top_banner .logo_area {margin-right:30px}
.top_banner .text_area h2 {font-size:36px; font-weight:700; margin-bottom:10px}
.top_banner .text_area p {font-size:22px; font-weight:300; margin:0}
.top_banner .btn_more {margin-left:auto; text-align:center; background:#fff; color:#1856AB; padding:21px 19px; border-radius:12px; font-weight:700; font-size:18px}

.top_banner2 {border-radius:20px; margin-bottom:45px; box-shadow:0 10px 30px rgba(0,0,0,0.1)}
.top_banner2 img {vertical-align:top}

.card_section {width:100%; display:flex; flex-direction:column; gap:20px 30px}
.fixed_cards {display:flex; flex-wrap:wrap; gap:25px; align-items:stretch}

.card_item {width:240px; background:#fff; border-radius:20px; padding:40px 25px 30px 25px; box-sizing:border-box; display:flex; flex-direction:column; position:relative; text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,0.1); transition:0.3s; flex-shrink:0}
.card_item:hover {transform:translateY(-10px)}
.card_item .badge {position:absolute; top:-8px; left:25px; padding:6px 16px; min-width:74px; box-sizing:border-box; text-align:center; border-radius:5px; color:#fff; font-size:16px; font-weight:600; z-index:2}
.card_item .badge::before {content:''; position:absolute; left:-7px; top:2px; width:9px; height:7px; z-index:-1}
.card_item.orange .badge {background:#f39233}
.card_item.orange .badge::before {background:#d47a25; clip-path: polygon(100% 0, 0% 100%, 100% 100%)}
.card_item.red .badge {background:#d83b44}
.card_item.red .badge::before {background:#b52a32; clip-path: polygon(100% 0, 0% 100%, 100% 100%)}
.card_item.blue .badge {background:#1856AB}
.card_item.blue .badge::before {background:#356b98; clip-path: polygon(100% 0, 0% 100%, 100% 100%)}
.card_item.purple .badge {background:#a82aba}
.card_item.purple .badge::before {background:#841e93; clip-path: polygon(100% 0, 0% 100%, 100% 100%)}
.card_item.green .badge {background:#8fc33a}
.card_item.green .badge::before {background:#739d2e; clip-path: polygon(100% 0, 0% 100%, 100% 100%)}

.card_item .txt_box {flex:1; display:flex; flex-direction:column}
.card_item .sub_txt {font-size:16px; color:#777; margin-top:0; margin-bottom:12px; font-weight:500}
.card_item .tit {font-size:26px; font-weight:800; color:#000; line-height:1.25}

.rolling_wrap {position:relative; width:100%}
.rolling_cards .swiper-wrapper {display:flex}
.rolling_cards {padding-top:18px}
.rolling_cards .swiper-slide {height:auto; display: flex;}
.rolling_cards .card_item {width:100%; height:100%; display:flex; flex-direction:column;}

.bottom_area {margin-top:50px; display:flex; justify-content:space-between; align-items:center; gap:40px}
.site_btns {display:flex; gap:25px}
.site_btns a {display:flex; align-items:center; justify-content:center; padding:18px 0; border-radius:15px; color:#fff; font-size:20px; font-weight:700; width:240px}
.site_btns .btn_univ {background:#1856AB}
.site_btns .btn_ent {background:#D3313C}

.sns_links {display:flex; justify-content:center; gap:10px; max-width:240px; width:100%}
.sns_links a {width:45px; height:45px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px}
.sns_links .sns_yt {background: #ff0000}
.sns_links .sns_fb {background: #1877f2}
.sns_links .sns_bg {background: #03c75a}
.sns_links .sns_ig {background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%)}
.swiper-button-prev, .swiper-button-next {color:#fff !important; top:65%; transform:translateY(-50%)}
.swiper-button-prev {left:-40px}
.swiper-button-next {right:-40px}


/* 반응형 */
@media (max-width: 1200px) {
	.card_item {width:calc(24.2% - 11px)}
	.swiper-button-prev, .swiper-button-next {color:#555 !important}
	.swiper-button-next:after, .swiper-button-prev:after {font-size:30px}
	.swiper-button-prev {left:0}
	.swiper-button-next {right:0}
}

@media (max-width: 1040px) {
	.intro_inner {width:100%}
	.fixed_cards {flex-wrap:wrap; justify-content:center}
	.card_item {width:calc(49.8% - 11px)}
	.top_banner {flex-direction:column; text-align:center}
	.top_banner .btn_more {margin-top:20px; margin-left:0}
	.top_banner .btn_more br {display:none}
}

@media (max-width: 790px) {
	.card_item {width:calc(49% - 11px)}
	.bottom_area {flex-direction:column}
}

@media (max-width: 640px) {
	.card_item {width:100%}	
	.top_banner .text_area h2 {font-size:28px}
	.top_banner .text_area p {font-size:18px}
	.site_btns {width:100%}
	.site_btns a {width:100%}
}