@charset "utf-8";

:root {
    --color-primary: #09195d;
    --color-secondary: #ffd900;
    --color-disabled: #C5CBD3;
    --color-highlight: #025AF6;
	--white: #fff;
    --black: #000;
    --red: #FF0000;
    --blue: #0000FF;
	--gray0:#f8f9fa;
	--gray1:#f1f3f5;
	--gray2:#e9ecef;
	--gray3:#dee2e6;
	--gray4:#ced4da;
	--gray5:#adb5bd;
	--gray6:#868e96;
	--gray7:#495057;
	--gray8:#343a40;
	--gray9:#212529;
	--purple0:#e5dbff;
	--purple1:#d0bfff;
	--purple2:#b197fc;
	--purple3:#9775fa;
	--purple4:#845ef7;
	--purple5:#7950f2;
	--purple6:#7048e8;
	--purple7:#6741d9;
	--purple8:#5f3dc4;
	--purple9:#514499;
	--color-login:#0259F4;
	--color-kakao:#FEE500;
	--color-kakao2:#191919;
	--color-naver:#03A94D;
    --text-sub: #4b5563;

		--fz-42: 42px;
	--fz-36: 36px;
	--fz-32: 32px;
	--fz-28: 28px;
	--fz-26: 26px;
	--fz-24: 24px;
	--fz-22: 22px;
	--fz-20: 20px;
	--fz-18: 18px;
	--fz-16: 16px;
	--fz-15: 15px;
	--fz-14: 14px;
	--fz-13: 13px;
    --fz-12: 12px;
    --fz-11: 11px;
    --fz-10: 10px;
    --fz-8: 8px;
    --fw-extra: 900;
    --fw-bold: 700;
    --fw-medium: 500;
    --fw-regular: 400;
    --fw-light: 300;

}


/* °øÅë ºÎºÐ */
* {margin: 0;padding: 0;}
body{font-family: 'SUIT', sans-serif}
#wrap{width: 1140px; margin:0 auto; }
a{text-decoration:none;}
li {list-style:none;}

/* »ó´Ü ·Î±×ÀÎ ºÎºÐ */
#hgroup ul {display:flex; justify-content: flex-end; }
#hgroup ul li {line-height:42px;}
#hgroup ul li a{font-size:13px; color:#7E8B9A; font-weight:500; line-height:19.5px; text-decoration:none; letter-spacing:-0.5px;}
#hgroup ul li::before {content:''; height:6px; margin: 5px 10px 0; background-color:#C5CBD3; vertical-align:2px;display: inline-block; width: 1px;}
#hgroup ul li:first-child::before{display:none;}

/* »ó´Ü ·Î°í ¿µ·Â */
.stu_header{padding:18px 0 16px;}
.stu_header h1{text-align:center; line-height:54px; font-weight: bold;}
.stu_header h1 img{width:36px; vertical-align: -6px;}
.stu_header h1 a{font-size:34px; color:#000;}
.left_top_banner {position: absolute; width: 180px;margin-top:-58px;}
.left_top_banner img{width:100%}
.right_top_banner {position: absolute; width: 145px; margin-top:-60px; left:50%; margin-left:400px; background-color:var(--gray0); padding:5px 10px; border-radius:4px;}
.right_top_banner a{display:flex; gap:10px;}
.right_top_banner a div:first-child{font-size:13px; color:var(--gray9)}
.right_top_banner a div:last-child{color:var(--color-primary); font-size:20px; font-weight:800; border-left:1px solid var(--gray3) ; padding:3px 0 0 10px}
.right_top_banner img{width:100%}

/* »ó´Ü ¸Þ´º ¿µ·Â */
.stu_gnb {  position: relative; transition: all 0.3s ease; /* ºÎµå·¯¿î Àüȯ È¿°ú (¼±ÅÃ) */ border-top: 1px solid #ebebeb; z-index: 100; border-bottom: 3px solid var(--color-primary); height:54px; background-color:#fff;}
.stu_gnb.is-sticky {
    position: fixed;   /* È­¸é¿¡ °­Á¦ °íÁ¤ */
    top: 0;            /* ¸Ç À§¿¡ ºÙÀÓ */
    left: 0;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* °íÁ¤µÇ¾úÀ» ¶§ ±×¸²ÀÚ (¼±ÅÃ) */
}
.left_area {float:left;}
.right_area {float:right;}	
.left_area ul{display:flex; }
.nav_all {background: var(--white); padding: 14px 14px 12px !important; border-left:1px solid var(--gray2); border-right:1px solid var(--gray2)}
.left_area li:hover .gnb_sub{display:block; }
.right_area li:hover .gnb_sub{display:block; }
.gnb_sub {display: none; position: absolute; z-index: 999; }
.sub_box {min-width: 150px; background: #ffffff; border:1px solid #e9ecef; box-sizing: border-box;  border-radius:10px; padding:10px;}
.sub_box::after{content:'';display:block;clear:both; height:0;}
.sub_box ul{display: block; clear: both; margin-top:0px;}
.sub_box ul li {width: 150px;}
.sub_box ul li a {display: block; padding: 7px; line-height: 150%; color: #3d3d3d; font-size: 13px; font-weight: 500; letter-spacing: -0.03em; border-radius:5px}
.sub_box ul li:hover > a{background:var(--gray1); color:var(--black); font-weight:700;}
.sub_box strong{display:block; line-height:28px; background:#ededed; padding:0 0 0 19px; color:#172C8D; font-size:13px; font-weight:700; letter-spacing:-0.03em;}
.sub_depth{display:none; position:absolute;  margin-left:150px; padding: 0; z-index: 999;}
.sub_depth .sub_box::after{ content:''; display:block; clear:both; height:0;}
.depth03 .sub_box{display:none; position:absolute; margin-top:-40px; margin-left:150px; padding: 0; z-index: 999;}
.sub_depth.several .sub_box{display:flex;}
.nav_sec {padding: 0;}
.nav_sec::after {content: ''; display: block; clear: both;}
.nav_sec > li {position: relative; float: left; margin-left:10px}
.nav_sec > li:first-child{margin-left:0;}
.nav_sec > li > a {display: block; padding: 17px 10px; color: #000; font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: -1px;}
.nav_sec .depth02 > a {	position: relative;}
.right_area .nav_sec {padding-left: 10px;}
.right_area .nav_sec > li > a {padding-left: 10px;}
.right_area .academy {position:relative;}
.right_area .academy .sub_box{display:block;}
.right_area .academy .gnb_sub {margin:0; left:50%; transform:translateX(-50%);}
.right_area .academy > a {padding-left:35px;}
.right_area .nav_sec > li {margin-right:10px; margin-left:0px}
.right_area .nav_sec > li:last-child {margin-right:0;}



/* °øÅë ¸ð´Þ ¹è°æ ¼³Á¤ */
.menu-modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; visibility: hidden; transition: visibility 0.3s ease;}
.menu-modal.active { visibility: visible; }
.modal-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.3s ease;}
.menu-modal.active .modal-overlay { opacity: 1; }

/* [ÇÙ½É] ±âº» »óÅÂ: ÁÖ¸Þ´º ³Êºñ¸¸ °¡Áü */
.modal-content {
    position: relative;
    width: 250px; /* ÁÖ¸Þ´º ³Êºñ */
    height: 100%;
    background-color: var(--white);;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease, width 0.3s ease; /* ³Êºñ º¯°æ ¾Ö´Ï¸ÞÀÌ¼Ç */
    overflow: hidden;
}
.menu-modal.active .modal-content { transform: translateX(0); }

/* [ÇÙ½É] ¼­ºê¸Þ´º È°¼ºÈ­ ½Ã ¿À¸¥ÂÊÀ¸·Î ³Êºñ È®Àå */
.modal-content.has-sub {
    width: 450px; /* ÁÖ¸Þ´º(300px) + ¼­ºê¸Þ´º(250px) */
}

.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 60px 20px 25px 20px; border-bottom: 1px solid #dee2e6;
    width: 250px; box-sizing: border-box; /* Çì´õ ¿µ¿ªµµ ÁÖ¸Þ´º ³Êºñ¿¡ °íÁ¤ */
	background-color: #f2f3f5;
}
.modal-header button {position:absolute;background-color: #f2f3f5; border:0; cursor:pointer; margin-left:175px; margin-top:-75px; padding:0 0;}
.modal-header button span{color:var(--gray5); font-size: var(--fz-28); }

.modal-body {position: relative; display: flex; height: 100%;}
.modal-body h5{font-size:var(--fz-18); font-weight:var(--fw-bold); color:#343a40; padding:20px 0 10px 20px;}

/* ¿ÞÂÊ °íÁ¤ ÁÖ¸Þ´º */
.main-menu {
    width: 250px; background-color: #f2f3f5;
    list-style: none; padding: 0; margin: 0;
    z-index: 10;
}
.main-menu li a { display: block; padding: 10px 20px; color: var(--gray8); text-decoration: none; font-size: var(--fz-16);}
.main-menu li:hover, .main-menu li.active { background-color: var(--white); font-weight:var(--fw-bold);}
.main-menu li span{font-weight:var(--fw-light); vertical-align:-5px;}

.main-menu li a::after {
  content: '\203A'; /* È­»ìÇ¥ Ư¼ö¹®ÀÚ (¡æ) */
  position: absolute;
  left: 120px; /* ¿À¸¥ÂÊ ³¡¿¡¼­ var(--fz-15) ¶ç¿ò */
  margin-top: -5px;
  color:var(--gray5);
  opacity: 0; /* Åõ¸íÇÏ°Ô ¼û±è */
  font-size: var(--fz-20);
}
/* ·Ñ¿À¹ö »óÅÂ: ¼û°ÜÁø È­»ìÇ¥¸¦ ³ªÅ¸³¿ */
.main-menu li a:hover::after {
  opacity: 1; /* ¼±¸íÇÏ°Ô º¸¿©ÁÜ */
  margin-left: 100px; /* ¸¶¿ì½º¸¦ ¿Ã·ÈÀ» ¶§ ¿ÞÂÊÀ¸·Î »ì¦ À̵¿ÇÏ´Â ¾Ö´Ï¸ÞÀÌ¼Ç */
}

/* [ÇÙ½É] ¿À¸¥ÂÊ ¼­ºê¸Þ´º ÄÁÅ×ÀÌ³Ê ¹èÄ¡ */
.sub-menu-container {
    position: absolute;
    top: 0;
    left: 250px; /* ÁÖ¸Þ´º ¹Ù·Î ¿À¸¥ÂÊ¿¡ À§Ä¡ */
    width: 200px; /* ¼­ºê¸Þ´º °íÁ¤ ³Êºñ */
    height: 100%;
    background-color: var(--white);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
	overflow: hidden;
}
/* ¸ð´ÞÀÌ È®ÀåµÇ¾úÀ» ¶§ ¼­ºê¸Þ´º ¿µ¿ª ³ëÃâ */
.modal-content.has-sub .sub-menu-container {
    opacity: 1;
    visibility: visible;
}

/* ¼­ºê¸Þ´º ³»ºÎ ÄÜÅÙÃ÷ */
.sub-menu-content {
    display: none;
    padding: 20px;
	 min-width: 250px;
}
.sub-menu-content.active { display: block; }
.sub-menu-content ul { list-style: none; padding: 0; }
.sub-menu-content li a { display: block; padding: 10px 0; color: #495057; text-decoration: none; font-size: var(--fz-14);}
.sub-menu-content li a:hover { color: #000; text-decoration: underline; }

.service-menu{padding:0 0 0 20px; display: flex; flex-wrap:wrap;}
.service-menu a{width:50%; display:block; font-size: var(--fz-14); padding:5px 0; color: var(--gray7)}