button{font:inherit}

.notice{padding:11px 16px;background:#071e3d;color:white;text-align:center;font-size:14px}
.notice b{color:#ffca3a}

.promo{height:54px;display:flex;justify-content:center;align-items:center;gap:28px;background:linear-gradient(90deg,#081d38,#0b4079);color:white}
.promo strong{color:#ffd044}
.pill{padding:7px 15px;border:1px solid rgba(255,255,255,.25);border-radius:999px}

/*.header{height:104px;padding:0 42px;background:white;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e7edf3}*/
.brand{display:flex;align-items:center;gap:13px}
.logo{display:flex;gap:5px;align-items:flex-end;width:82px}
.logo i{display:block;width:22px;border-radius:5px 14px 3px 14px;transform:skewX(-10deg)}
.logo i:nth-child(1){height:38px;background:#11519d}
.logo i:nth-child(2){height:45px;background:#58a83b}
.logo i:nth-child(3){height:40px;background:#0d477f}
.brand small{display:block;color:#1770b5;font-weight:700}
.brand strong{font-size:25px;letter-spacing:-1.4px}
.utils{display:flex;align-items:center;gap:15px}
.utils a{font-size:14px;cursor:pointer}
.my{border:0;background:#0d4d98;color:white;padding:15px 20px;border-radius:7px;font-weight:700}

.gnb-wrap{position:relative;z-index:30;}
.gnb {
	/*height:72px;*/
	height:65px;
	display:grid;
	grid-template-columns:repeat(10,minmax(130px,1fr)) 180px;
	padding:0 max(0px,calc((100% - 1300px)/2));
	box-sizing:border-box;
	background: #144DB1;
	/*border-bottom:1px solid #cfd8e4;*/
	border-top: 1px solid #005A8A;
	border-bottom: 1px solid #005A8A;

}
.gnb button {
	border:0;
	background: #144DB1;
	/*color: #172334;*/
	color : #FFF;
	font-weight:700;
	font-size:19px;
	white-space:nowrap;
	cursor:pointer;
	position:relative;
	padding:0 14px
	}
.gnb button:hover,.gnb button.active{
	/*color:#1254a6*/
	color: #FFF;
	background: #1461BE;
}

.gnb button.active:after {
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	transform:translateX(-50%);
	width:62px;
	height:3px;
	/*background: #1254a6*/
	background: #FFF;
}


.gnb button.apply:hover,.gnb button.apply.active{
	/*color:#1254a6*/
	color: #FFF;
	background: #FFA51E;
}


.gnb .apply{margin:8px 8px 8px 8px;border-radius:7px;background: #FF9900;color:white}
.gnb .apply:hover{background: #FFA51E;color:white}

.dropdown{
	position:absolute;
	left:0;
	right:0;
	/*top:72px;*/
	top:65px;
	background: white;
	background: #F8FAFC;
	border-bottom: 1px solid #dce3ec;
	border-bottom: 2px solid #55749D;
	box-shadow:0 18px 38px rgba(21,45,80,.16);	
	height:0;
	max-height:0px;opacity:0;
	overflow:hidden;
	pointer-events:none;transition:max-height .28s ease,opacity .2s ease
	}

.dropdown.open{	
	height: 400px;
	max-height: 400px;
	opacity:1;
	pointer-events:auto;
	}

.dropdown-close{
    display:none;
    position:absolute;
    bottom:5px;
    left:50%;
    transform:translateX(-50%);
    border:0;
    background:transparent;
    color:#55749D;
    font-size:20px;
    line-height:1;
    cursor:pointer;
}

.dropdown.open .dropdown-close{
    display:block;
}


.panel{
	display:none;
	padding:35px 0px 30px
	}
.panel.active{display:block}
.panel{max-width:1300px;margin:0 auto;box-sizing:border-box}

.integrated-layout{
	margin-top: 5px;
	display:grid;
	grid-template-columns:250px 1fr 250px;
	gap:26px
	}
.integrated-layout{display:block}
.integrated-intro,.integrated-layout>.quick{display:none}
.integrated-intro{background:linear-gradient(150deg,#edf4ff,#f8fbff);border:1px solid #d4e2f5;border-radius:12px;padding:22px}
.integrated-intro .eyebrow{color:#3b6da9;font-size:13px;font-weight:700}
.integrated-intro h2{margin:8px 0 12px;font-size:27px;color:#17457f;letter-spacing:-1.4px}
.integrated-intro p{margin:0;color:#677487;font-size:14px;line-height:1.7}
.roadmap{display:block;margin-top:20px;padding:11px 12px;text-align:center;border:1px solid #b9cbe4;background:white;border-radius:6px;color:#204f89;font-weight:700;cursor:pointer}


.integrated-layout {
    margin-top: 5px;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 26px;
}

.integrated-intro {
    display: block;
    background: linear-gradient(150deg, #edf4ff, #f8fbff);
    border: 1px solid #d4e2f5;
    border-radius: 12px;
    padding: 22px;
}

.integrated-layout > .quick {
    display: block;
    border-left: 1px solid #dce3ec;
    padding-left: 24px;
}

.integrated-main h3,.quick h3{margin:0 0 14px;font-size:18px;color:#173d70}
.integrated-main .sub{margin:-7px 0 62px; color:#677487;font-size:14px}

.integrated-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.integrated-card {
	min-height:90px;
	border:1px solid #dce4ef;
	border-radius:8px;
	padding:15px 16px;
	cursor:pointer;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	gap:10px;
	box-sizing:border-box
	}




.integrated-card:hover{border-color:#7fa9d8;background:#f8fbff}
.integrated-card strong {
	display:block;
	font-size: 16px;
	color:#1d467b;
	margin:0;
	white-space:nowrap
}
.integrated-card>span{display:none}
.integrated-actions{display:none;width:100%;grid-template-columns:1fr 1fr;gap:10px}
.integrated-card:not(.new2):hover strong{display:none}
.integrated-card:not(.new2):hover .integrated-actions{display:grid}


.integrated-choice{min-height:58px;border:1px solid #b9cbe4;border-radius:7px;background:#f4f8fd;color:#1254a6;font-size:16px;font-weight:700;line-height:1.35;padding:8px;cursor:pointer}
.integrated-choice--exam{border-color:#f2a45f;background:#fff8f1;color:#d66113}
.integrated-choice:hover{filter:brightness(.97);transform:translateY(-1px)}
.integrated-card.new{border-color:#f2a45f;background:#fffaf5}
.integrated-card.new2{
	grid-column: 1 / -1;
	border-color: #5959FF;
	background: #CACAFF
	}

.badge{float:right;background:#f17428;color:white;border-radius:999px;padding:2px 6px;font-size:10px}
.quick{border-left:1px solid #dce3ec;padding-left:24px}
.quick a{display:block;padding:11px 2px;border-bottom:1px solid #edf1f5;color:#405065;font-size:14px;cursor:pointer}
.quick-box{margin-top:16px;padding:16px;background:#f4f8fd;border:1px solid #dce6f4;border-radius:8px;color:#345f94;font-size:13px}

.simple-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}
.simple-head h3{margin:0;font-size:18px;color:#173d70}
.simple-head span{font-size:13px;color:677487}
.simple-grid {
	display:grid;
	grid-template-columns:repeat(4,minmax(130px,1fr));
	gap:12px
}
.simple-link {
	min-height:64px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid #d7dee8;
	border-radius:4px;
	background:white;
	color:#3e4c60;
	font-size:16px;
	font-weight:700;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	padding:12px;
	cursor:pointer;
}

.simple-link.big {
	min-height:64px;
	height: 213px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid #d7dee8;
	border-radius:4px;
	background:white;
	color:#3e4c60;
	font-size:16px;
	font-weight:700;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	padding:12px;
	cursor:pointer;
}

.simple-link:hover{border-color:#0d78b4;background:#f7fbff;color:#0b4ea2}
.simple-link.highlight{border-color:#f2a052;background:#fffaf5;color:#d56c13}

.hero{min-height:315px;padding:54px 46px;background:linear-gradient(125deg,#071f40,#0a4e94);color:white}
.hero h1{font-size:36px;margin:6px 0 14px}
.hero p{color:#c9d9ed}
.hint{font-size:12px;color:#496986;text-align:center;padding:8px;background:#edf5ff;display:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(15px);background:#102d53;color:white;border-radius:999px;padding:11px 17px;opacity:0;transition:.2s;z-index:100}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}


.simple-link::before  {
    content: "";
    display: inline-block;
    width: 23px;
    height: 23px;
    margin-right: 8px;
    vertical-align: middle;
    background: url("/css/svg/gnb_btn_icon.svg") no-repeat center center;
    background-size: contain;
		
		background-color: #1c7dfd; /* ¿©±â »ö»ó º¯°æ */
    -webkit-mask: url("/css/svg/gnb_btn_icon.svg") no-repeat center center;
    -webkit-mask-size: contain;
    mask: url("/css/svg/gnb_btn_icon.svg") no-repeat center center;
    mask-size: contain;
}



.simple-link.highlight::before {
    content: "";
    display: inline-block;
    width: 23px;
    height: 23px;
    margin-right: 8px;
    vertical-align: middle;
    background: url("/css/svg/gnb_btn_icon_red.svg") no-repeat center center;
    background-size: contain;
		
		background-color: #D56C13; /* ¿©±â »ö»ó º¯°æ */
    -webkit-mask: url("/css/svg/gnb_btn_icon_red.svg") no-repeat center center;
    -webkit-mask-size: contain;
    mask: url("/css/svg/gnb_btn_icon_red.svg") no-repeat center center;
    mask-size: contain;
}


.social-course-groups{display:grid;gap:15px}
.social-course-group{padding:14px 18px 16px;border:1px solid #dde7f2;border-radius:9px;background:#f9fbfe}
.social-course-group--education{background:#fbfcff}
.social-course-group h4{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:#173d70;font-size:16px}
.social-course-group h4:before{content:"";display:block;width:4px;height:17px;border-radius:2px;background:#2893d9}
.social-course-group--education h4:before{background:#5b7fb0}
.social-course-grid{display:grid;gap:15px}
.social-course-grid--welfare{grid-template-columns:repeat(4,minmax(0,1fr))}
.social-course-grid--education{grid-template-columns:repeat(4,minmax(0,1fr))}
.social-course-grid .simple-link{min-height:56px;background:#fff}

.representative-badge {
	position: absolute;
	top:0px;
	transform: translateX(-50%);
	padding: 3px 7px;
	border:1px solid rgba(255,255,255,.6);
	border-radius: 999px;
	background: #578DD0;
	color:#fff;
	font-size:12px;
	line-height:1;
	letter-spacing:.1px;
	z-index:999;
}

.representative-badge-new {
	position: absolute;
	top:-5px;	
	transform: translateX(-50%);
	padding: 3px 7px;
	/*border:1px solid #FFF8F0;*/
	border: 1px solid #C66300;
	border-radius: 10px;
	background: #F07800;
	color:#fff;
	font-size:12px;
	line-height:1;
	letter-spacing:.1px;
	z-index:999;
}

.representative-badge-red {
	position: absolute;
	top:-26px;
	left:50%;
	transform: translateX(-50%);
	padding: 8px 8px;
	border:1px solid #C66300 ;
	border-radius: 3px;
	background: #F07800;
	color:#fff;
	font-size:13px;
	line-height:1;
	letter-spacing:.5px;
	z-index:999;
	
	transform: translateX(-50%);
  animation: reception-drop 2.0s infinite;
}

@keyframes reception-drop {
    /* À§¿¡¼­ ´ë±â */
    0% {
        transform: translate(-50%, 0px);
    }

    /* ºü¸£°Ô ³«ÇÏ */
    14% {
        transform: translate(-50%, -5px);
    }

    /* ù ¹ø° ¹Ù¿îµå */
    24% {
        transform: translate(-50%, 3px);
    }

    /* ´Ù½Ã ³«ÇÏ */
    34% {
        transform: translate(-50%, -2px);
    }

    /* ÀÛÀº ¹Ù¿îµå */
    44% {
        transform: translate(-50%, 1px);
    }

    /* ÂøÁö */
    62%,
    100% {
        transform: translate(-50%, 0px);
    }
}


/* °øÇÐ °úÁ¤ 7:3 ÁÂ¿ì ·¹À̾ƿô */
.engineering-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr);
    gap: 24px;
    align-items: stretch;
}

/* ¿ÞÂÊ °úÁ¤ ¿µ¿ª: ¿Ü°û ¹Ú½º ¾øÀ½ */
.engineering-course {
    padding: 20px 0;
}


.engineering-course h4,
.engineering-consult h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: #173d70;
    font-size: 16px;
}

.engineering-course h4::before,
.engineering-consult h4::before {
    content: "";
    display: block;
    width: 4px;
    height: 17px;
    border-radius: 2px;
    background: #2893d9;
}

/* ÄÄÇ»ÅÍ°øÇÐ ¸Þ´º 3°³ */
.engineering-course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}


/* ¹öÆ° ÇÏ´ÜÀÇ ³²Àº °ø°£À» ¸ðµÎ Â÷Áö */
.engineering-course-extra {
    flex: 1;
    min-height: 0;
		height: 119px;
    margin-top: 30px;
    padding: 15px;
    box-sizing: border-box;

    border: 1px solid #dde7f2;
    border-radius: 9px;
    background: #f9fbfe;
}

/* ¿À¸¥ÂÊ »ó´ã ½Åû: ¿Ü°û ¹Ú½º ÀÖÀ½ */


.engineering-consult {		
		margin-top: -35px;
    height: 304px;
    padding: 14px 18px 16px;
    border: 1px solid #dde7f2;
    border-radius: 9px;
    background: #f9fbfe;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}


/* Á¼Àº ¿À¸¥ÂÊ ¿µ¿ªÀ̹ǷΠ»ó´ã ¸Þ´º´Â ¼¼·Î ¹èÄ¡ */
.engineering-consult-grid {
    /*
		flex: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(48px, auto);
    align-content: start;
    gap: 8px;
		*/
		 flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 8px;
}

.engineering-consult-grid .simple-link {
    min-height: 48px;
    padding: 8px 10px;
    font-size: 16px;
}

/* È­¸éÀÌ Á¼¾ÆÁö¸é »óÇÏ ¹èÄ¡ */
@media (max-width: 900px) {
    .engineering-split {
        grid-template-columns: 1fr;
    }

    .engineering-course-grid {
        grid-template-columns: 1fr;
    }
}


.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}


/*
@media(max-width:1100px){.gnb{grid-template-columns:repeat(4,minmax(130px,1fr))}
.gnb .apply{margin:9px}
.integrated-layout{grid-template-columns:210px 1fr}
.quick{grid-column:1/-1;border-left:0;border-top:1px solid dce3ec;padding:18px 0 0}
.quick a{display:inline-block;width:32%}
.simple-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:760px){.notice{font-size:12px}
.promo{height:auto;padding:10px;display:block;text-align:center;font-size:12px}
.pill{display:inline-block;margin-top:6px}
.header{height:78px;padding:12px 14px}
.brand strong{font-size:17px}
.brand small{font-size:10px}
.logo{transform:scale(.72);transform-origin:left center;width:58px;margin-right:-8px}
.utils a{display:none}
.my{padding:10px;font-size:11px}
.hint{display:block}
.gnb{display:flex;overflow-x:auto;height:58px;scrollbar-width:none}
.gnb::-webkit-scrollbar{display:none}
.gnb button{flex:0 0 auto;min-width:125px;font-size:13px;padding:0 10px}
.gnb .apply{min-width:110px}

.dropdown{top:58px}
.dropdown.open{max-height:1700px}

.panel{padding:14px}
.integrated-layout{grid-template-columns:1fr}
.integrated-intro{padding:17px}
.integrated-intro h2{font-size:23px}
.integrated-cards{grid-template-columns:1fr}
.quick{grid-column:auto}
.quick a{width:100%}
.simple-head{display:block}
.simple-head span{display:block;margin-top:5px}
.simple-grid{grid-template-columns:1fr 1fr;gap:8px}
.simple-link{font-size:12px;min-height:44px}
.hero{padding:34px 18px}
.hero h1{font-size:27px}
}

@media(max-width:380px){.simple-grid{grid-template-columns:1fr}
}
*/