@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
	a {
			color: inherit;
			text-decoration: none;
		}
		body{
			margin: 0;
			padding: 0;
		    font-family: 'Pretendard-Regular';
		}
		#wrap{
			overflow: hidden;			
		}
		.top_bg{
            width: 100%;
            height: 80px;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1000;
			background-color: rgba(255,255,255,60%);
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
		.top{
            width: 1500px;
            margin: 0 auto;
        }
        .logo{
            float: left;
            padding: 2px;
        }
        .menu{
            width: 1250px;
            float: right;
            padding: 10px;
        }
		.menu:after{
			content:"";
			clear:both;
			display:block;
		}
        .katalk{
            float: right;
			margin-top: 10px;
			width: 200px;
			height: 40px;
			background-color: #F2DA00;
			border-radius: 20px;
			text-align: center;
        }
        .katalk img{
			margin-top: 3px;
		}
        .menu ul{
            height:50px;
            margin:0px;
            list-style: none;
        }
        .menu > ul > li{ /* Changed .menu li to .menu > ul > li to target direct children only */
            width:150px;
            height:50px;
			font-family: "Noto Sans KR", serif;
            font-size: 16px;
            font-weight: 400;
            text-align: center;
            line-height: 50px;
            float: left;
			position: relative; /* Added for sub-menu positioning */
        }
		.menu > ul > li > a {
			display: block;
			width: 100%;
			height: 100%;
		}
        .menu li:hover{
            background-color: #F1F1F1;
        }
        .menu li:hover a{
            color: #BA0000;
        }

		/* Sub-menu Styles */
		.menu ul li ul {
			display: none;
			position: absolute;
			top: 50px; /* Adjusted for top menu height */
			left: 0;
			padding: 0;
			width: 150px;
			z-index: 1;
		}

		.menu ul li:hover > ul { /* Changed .menu li:hover ul to .menu li:hover > ul */
			display: block;
		}

		.menu ul li ul li {
			width: 100%;
			float: none;
			font-family: "Noto Sans KR", serif;
            font-size: 16px;
			text-align: left;
			padding: 0;
			height: 50px;
			line-height: 50px;
			border-bottom: 1px solid #eee;
			background-color: rgba(255, 255, 255, 0.7);
		}

		.menu ul li ul li:last-child {
			border-bottom: none;
		}

		.menu ul li ul li a {
			display: block;
			padding: 0 10px;
			color: #333 !important;
		}

		.menu ul li ul li:hover {
			background-color: #ffffff;
		}

		.menu ul li ul li:hover a {
			color: #BA0000;
		}

        .mobi_menu ul{
            height:35px;
            margin:0px;
            padding-left:90px;
            list-style: none;
        }
        .mobi_menu li{
            width:100px;
            height:35px;
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            line-height: 35px;
            float: left;
        }
        .mobi_menu li:hover{
            background-color: #F1F1F1;
            color: #03C75A;
        }
        .mobi_menu li:hover a{
            color: #03C75A;
        }
		.contactme_back{
			background-color: #EEEEEE;
			height: 400px;
		}
		.contactme{
			width: 1280px;
			margin: 0 auto;
		}
		.meleft{ 
			width: 50%;
			height: 400px;
			float: left;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.meright{ 
			width: 50%;
			height: 400px;
			float: left;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.pc_web{
			display: block;
		}
		.mobi_web{
			display: none;
		}
		.katalkskil_title{
			font-size: 32px;
			font-weight: 600;
			text-align: center;
			color: #434343;
			width: 100%;
			height: 130px;
			overflow: hidden;
		}
		.katalkskil_title:after{
			content:"";
			display:block;
			clear:both;
		}
		.katalkskil{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
		}
		.katalkskil:after{
			content:"";
			display:block;
			clear:both;
		}
		.phone1, .phone2, .phone3 {
			float: left;
		}
		.phone1 img{
			padding: 10px;
			width: 420px;
			height: 464px;
		}
		.phone2 img{
			padding: 10px;
			width: 420px;
			height: 464px;
		}
		.phone3 img{
			padding: 10px;
			width: 420px;
			height: 464px;
		}
		.phone11, .phone12, .phone13 {
			float: left;
		}
		.phone11 img{
			padding: 10px;
		}
		.phone12 img{
			padding: 10px;
		}
		.phone13 img{
			padding: 10px;
		}
		.review{
			width: 1250px;
			margin: 0 auto;
		}
		.reviewleft{
			width: 50%;
			float: left;
		}
		.reviewright{
			width: 50%;
			float: left;
		}
		.reviewleft img{
			width: 100%;
		}
		.reviewright img{
			width: 100%;
		}
		.realtime{
			width: 98%;
			height: 500px;
			margin: 0 auto;
			background-color: #E1FFEC;
		}

		.L{
			width:100%;
			height:100px;
			font-size:32px;
			font-weight:600;
			text-align:center;
			line-height: 100px;
			float:left;
			color:#333333;
			padding-bottom: 30px;
			font-family: 'NEXON Lv1 Gothic OTF';
		}
		.K{
			width:100%;
			height:100px;
			font-size:32px;
			font-weight:600;
			text-align:center;
			line-height: 100px;
			float:left;
			color:#333333;
			padding-bottom: 30px;
			font-family: 'NEXON Lv1 Gothic OTF';
		}
		.F{
			width:50%;
			font-size:16px;
			padding:2px;
			float: left;
		}
		.G{
			width:50%;
			font-size:16px;
			padding:2px;
			float: left;
		}

		.galla{
			width:100%;
			float:left;
		}
		.index_bind{
			margin: 0 auto;
			width: 1500px;
		}
		.sub_bind{
			margin: 0 auto;
			width: 1400px;
		}
		.title_back{
			text-align: right;
			height: 30px;
			line-height: 30px;
			font-size: 14px;
			color:#333333;
			padding-right:8px;
		}
		.title_back img{
			padding-right: 3px;
			padding-bottom: 2px;
		}
		.title_front{
			width: 100%;
			height:50px;
			font-size: 34px;
			font-weight: 600;
			line-height: 50px;
			text-align: center;
			color:#333333;
			margin: 0px auto;
		}
		.title_1line{
			width: 200px;
			border-bottom: 1px solid #00D96C;
			margin: 0px auto;
		}
		.title_2line{
			width: 300px;
			border-bottom: 1px solid #C2C2C2;
			margin: 0px auto;
		}
		.bbs_title{
			margin: 0 auto; width:1080px; background-color: white; border:1px solid #E2E2E2; margin-top:20px;
		}
    @media screen and (max-width: 1024px) {

		.bbs_title{
			width:100%;
		}
		.index_bind{
			width: 100%;
		}
		.sub_bind{
			width: 100%;
		}

		.F, .G, .H, .I {
			width: 100%;
		}
		.pc_web{
			display: none;
		}
		.mobi_web{
			display: block;
		}
		.logo{
			float: none;
			width: 100%;
			margin: 0 auto;
			text-align: center;
		}
		.mobi_stop{
			display: none;
		}
        .top{
            width: 100%;
			height: 60px;
        }
		/* .logo{ width: 30%; float: left; } */
		.katalk{ width: 30%; float: right; text-align: right; }
		.mobi_menu{
			width: 100%;
		}
		.mobi_menu ul{ padding-left: 0px; }
		.mobi_menu li{
			width: 24%;
			float: left;
		}
		.mobi_menu:after{
			content:"";
			clear:both;
			display:block;
		}
		.contactme_back{
			background-color: #EEEEEE;
			height: 250px;
		}
		.contactme{
			width: 100%;
			height: auto;
		}
		.meleft{ 
			width: 50%;
			text-align: center;
			height: auto;
		}
		.meleft img{ 
			margin-top: 30px;
			width: 87%;
		}
		.meright{ 
			width: 50%;
			text-align: center;
			height: auto;
		}
		.meright img{ 
			margin-top: 30px;
			width: 87%;
		}
		.review{
			width: 100%;
		}
		.reviewleft{
			width: 100%;
		}
		.reviewright{
			width: 100%;
		}
		.reviewleft img{
			width: 100%;
		}
		.reviewright img{
			width: 100%;
		}
		.realtime{
			width: 97%;
		}
		.phone1 {
			width: 100%;
		}
		.phone2 {
			width: 100%;
		}
		.phone3 {
			width: 100%;
		}
		.phone1 img{
            float: none;
			width: 88%;
            margin: 0;
			text-align: center;
		}
		.phone2 img{
            float: none;
			width: 88%;
            margin: 0;
			text-align: center;
		}
		.phone3 img{
            float: none;
			width: 88%;
			text-align: center;
		}

		.phone11 {
			width: 100%;
			text-align: center;
		}
		.phone12 {
			width: 100%;
			text-align: center;
		}
		.phone13 {
			width: 100%;
			text-align: center;
		}
		.phone11 img{
            float: none;
			width: 85%;
            margin: 0 auto;
			padding-top: 30px;
		}
		.phone12 img{
            float: none;
			width: 85%;
            margin: 0 auto;
			padding-top: 30px;
		}
		.phone13 img{
            float: none;
			width: 85%;
            margin: 0 auto;
			padding-top: 30px;
		}
	}
	/* Mobile Menu Submenu Styles */
	.mobi_menu ul li {
		position: relative;
	}

	.mobi_menu ul li ul {
		display: none;
		position: absolute;
		top: 35px; /* Distance from the top of the parent <li> */
		left: 0;
		padding: 0;
		width: 100%;
		z-index: 999999999;
	}

	.mobi_menu ul li.show-submenu > ul {
		display: block;
	}

	.mobi_menu ul li ul li {
		width: 100%;
		float: none;
		height: 40px;
		line-height: 40px;
		background-color: rgba(255, 255, 255, 0.6);
		border-bottom: 1px solid #eee;
	}

	.mobi_menu ul li ul li:last-child {
		border-bottom: none;
	}

	.mobi_menu ul li ul li a {
		display: block;
		padding: 0 5px;
		color: #333 !important;
	}

	.mobi_menu ul li ul li:hover {
		background-color: #f9f9f9;
	}

	.mobi_menu ul li ul li:hover a {
		color: #03C75A;
	}