@font-face {
			font-family: 'Pretendard';
			font-style: normal;
			font-weight: 800;
			src: url('/share/css/font/Pretendard-ExtraBold.woff2') format('woff')
		}

		@font-face {
			font-family: 'Pretendard';
			font-style: normal;
			font-weight: 700;
			src: url('/share/css/font/Pretendard-Bold.woff2') format('woff')
		}

		@font-face {
			font-family: 'Pretendard';
			font-style: normal;
			font-weight: 600;
			src: url('/share/css/font/Pretendard-SemiBold.woff2') format('woff')
		}
		
		@font-face {
			font-family: 'Pretendard';
			font-style: normal;
			font-weight: 500;
			src: url('/share/css/font/Pretendard-Medium.woff2') format('woff')
		}

		@font-face {
			font-family: 'Pretendard';
			font-style: normal;
			font-weight: 400;
			src: url('/share/css/font/Pretendard-Regular.woff2') format('woff')
		}

		@font-face {
			font-family: 'Pretendard';
			font-style: normal;
			font-weight: 300;
			src: url('/share/css/font/Pretendard-Light.woff2') format('woff')
		}

		@font-face {
			font-family: 'Pretendard';
			font-style: normal;
			font-weight: 200;
			src: url('/share/css/font/Pretendard-ExtraLight.woff2') format('woff')
		}

		@font-face {
			font-family: 'Pretendard';
			font-style: normal;
			font-weight: 100;
			src: url('/share/css/font/Pretendard-Thin.woff2') format('woff')
		}


		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: 'Pretendard';
			font-weight: 700;
		    overflow-y: hidden;
		}

		a {
			text-decoration: none;
		}

		ul li {
			list-style-type: none;
		}

		header {
			width: 100%;
			height: 50px;
			background-color: #fff;
			z-index: 1;
		}

		.header-wrap {
			display: grid;
			align-items: center;
			padding: 0px 12px;
			grid-template-columns: 1.8fr 5fr 1.8fr;
			justify-items: center;
			font-size: 16px;
		}

		.menu-wrapper {
			display: none;
		}

		.left_img {
			display: flex;
		    align-items: center;
			width: 100%;
		}

		.menu-img {
			padding-top: 6px;
		    margin-right: 4px;
		}

		#hamburger {
			display: none;
			width: 214px;
			background-color: #ffffff;
			position: absolute;
			padding: 20px 5px;
			box-sizing: border-box;
			border: none;
			top: 6%;
			z-index: 10;
			border-radius: 0 0 20px 20px;
			filter: drop-shadow(4px 4px 7px rgba(31, 42, 67, 0.1));
		}

		#hamburger ul {
			text-align: center;
			font-size: 16px;
			margin-bottom: 10px;
		}

		#hamburger li, #hamburger a {
			width: 100%;
			padding: 10px 0;
		}

		#hamburger .tit {
			font-family: 'Pretendard';
			font-weight: 700;
		}

		#hamburger .hambur-sub {
			font-family: 'Pretendard';
			font-weight: 600;
			color: rgba(0, 0, 0, 0.6);
		}

		#hamburger ul .line {
			margin-top: 20px;
		}

		#hamburger .hambur-sub:hover {
		    background: #E4EFFC;
		    border-radius: 4px;
		}

		.logo-img {
			width: 100%;
			height:48px;
			font-family: 'Pretendard';
			font-weight: 700;
			margin-top: 4px;
		}

		.logo-img a {
			text-decoration:none;
		}

		.log_box {
			display:flex;
		}

		.shooting_star {
			align-self: flex-end;
			width: 27px;
			height: 24px;
		}

		.log_wirte_div {
			margin-left: 5px;
		  
		}

		.logo_font {
			margin-left: 4px;
		}

		.logo-tit {
			display: flex;
			width: 100%;
			height: 22px;
			font-family: 'Pretendard';
			font-size: 20px;
			font-weight: 800;
			line-height: 35px;
			letter-spacing: -0.01em;
			text-align: left;
			text-underline-position: from-font;
			text-decoration-skip-ink: none;
			margin-bottom: 4px;
		}

		.logo-tit .top {
			color: #1F77E5;
		}

		.logo-tit .middle {
			color: #BFDAFC;
		}   

		.logo-tit .bottom {
			color: #00ACB3;
		}

		.logo-sub {
			box-sizing: border-box;
			width: 100%;
			height: 8px;
			font-family: 'Pretendard';
			font-size: 8px;
			font-weight: 800;
			color: #3A3A3A;
			letter-spacing: -0.02em;
			text-align: left;
			text-underline-position: from-font;
			text-decoration-skip-ink: none;
		}

		.nav {
			display: grid;
			width: 100%;
			font-size: 15px;
			grid-template-columns: repeat(3, 1fr);
			justify-items: center;
		}

		.nav > div {
			list-style: none;
			width: 100%;
			text-align: center;
		}

		.underline a {
			position: relative;
			display: inline-block;
			color: #333;
			padding-bottom: 8px;
			text-decoration: none;
			border-bottom: 2px solid transparent;
			transition: color 0.3s ease, border-bottom-color 0.3s ease;
		}

		.underline a.active {
			color: #007BFF;
			border-bottom-color: #007BFF;
		}


		.mega-menu-wrap {
			position: fixed;
			top: 4px;
			left: 0;
			width: 100%;
			background: #fff;
			z-index: 10;
			padding: 12px;
			outline: none;
			transform: translateY(-100%) translateZ(0px);
			opactiy: 0;
 		    transition: transform 0.4s ease, opacity 0.2s ease;
			display: grid;
			grid-template-columns: 1.8fr 5fr 1.8fr;
		    justify-items: center;
		}

		.header-wrap:hover .mega-menu-wrap {
		  transform: translateY(47%) translateZ(0px);
		  opacity: 1;
		}

		.menu-group {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			justify-items: center;
			text-align: center;
			width: 100%;
			font-family: 'Pretendard';
			font-weight: 500;
		}

		.menu-group div {
			display:flex;
			flex-direction: column;
			width: 100%;
		}

		.menu-group div a {
			text-decoration: none;
			color: #858585;
			width: 100%;
			padding: 6px 3px;
			display: inline-block;
		}

		.menu-group div a:hover {
			background-color: #E5F1FF;
			border-radius: 20px;
		}


		.faq-box {
			background: #f3f3f3;
			padding: 16px;
			border-radius: 12px;
			text-align: center;
			font-weight: bold;
		}

		.overlay {
		  position: fixed;
		  left: 0;
		  width: 100%;
		  height: 100vh;
		  background: rgba(128, 128, 128, 0.4); /* 회색 반투명 */
		  z-index: 0;
		  display: none;
		}

		iframe {
			width: 100%;
			height: 100vh;
		    overflow-y: hidden;
		}

		/* 반응형 디자인 */

		
		/* 데스크탑 화면 (1025px 이상) */
		@media screen and (max-width: 1025px) {
			.logo-img {
				min-width: 150px;
			}

			.nav {
				min-width: 450px;
				font-size: 86%;
			}

			.header-wrap {
				grid-template-columns: 1.1fr 5fr 1.1fr;
			}

			.mega-menu-wrap {
		        grid-template-columns: 1.1fr 5fr 1.1fr;
			}

			.menu-group {
				font-size: 90%;
			}
		}
		
		
		/* 모바일 화면 (최대 767px) */
		@media screen and (max-width: 767px) {
			.logo-img {
				min-width: 150px;
			}

			.menu-wrapper {
				display: block;
			}

			.nav, .mega-menu-wrap {
				display: none;
			}
		}