 @charset "utf-8";
 *{
	 margin:0px;
	 padding:0px;
	 box-sizing:border-box
 }
 
 a
 {
	 color:inherit;
	 text-decoration:none;
 }
  
 	html{scroll-behavior:smooth}
	body{
		margin:0;
		background:#11131a;
		color:#252733;
		font-family:"Noto Sans KR","Malgun Gothic",Arial,sans-serif;
	}
	a
	{
		color:inherit;
		text-decoration:none
	}
	
	p
	{
		padding:10px 0px;
	}
	.manual{
		max-width:1180px;
		margin:0 auto;
		background:#f5f2ea;
		min-height:100vh;
	}
	.hero{
		padding:80px 60px 70px;
		background:linear-gradient(135deg,#171b2c,#29233b);
		color:#fff;
		text-align:center;
	}
	.hero .eyebrow{
		letter-spacing:.18em;
		font-size:13px;
		opacity:.72;
		margin-bottom:18px;
	}
	.hero h1{
		margin:0;
		font-size:clamp(34px,6vw,64px);
		line-height:1.2;
		font-weight:800;
	}
	.hero p{
		max-width:720px;
		margin:24px auto 0;
		color:#d8d9e4;
		font-size:16px;
	}
	.toc{
		position:sticky;
		top:0;
		z-index:20;
		background:rgba(245,242,234,.96);
		border-bottom:1px solid #ddd8ca;
		padding:14px 28px;
	}
	.quick_btn
	{
		display: flex;
		gap: 8px;
		position: relative;
		scrollbar-width: none;
		flex-wrap: wrap;
	}
	.quick_btn::-webkit-scrollbar{display:none}
	.toc a{
		flex:0 0 auto;
		padding:8px 13px;
		border:1px solid #d5d0c2;
		border-radius:999px;
		font-size:13px;
		color:#4d5060;
		background:#fffdf8;
	}
	.toc a:hover{background:#e9e3d5}
	.content{
		padding:55px 60px 90px;
	}
	.section
	{
	position:relative;
	padding: 115px 0px 5px 0;
    border-bottom: 1px solid #ddd8ca;
	}
	.section:first-child{padding-top:120px}
	.section:last-child{border-bottom:0}
	.section_numbering{
		font-size:12px;
		letter-spacing:.16em;
		color:#746a57;
		font-weight:700;
	}
	h2
	{
		padding:8px 0 24px;
		font-size:2.1rem;
		line-height:1.3;
	}
	h3
	{
		padding: 30px 0 15px;
		font-size: 1.7rem;
	}

	h4
	{
		padding: 20px 0 10px;
		font-size: 1.18rem;
	}	
	.lead{
		font-size:18px;
		color:#555866;
	}
	.overview_card_box
	{
display: flex;
    position: relative;
    justify-content: space-between;
    padding: 20px 0px;
    flex-wrap: wrap;
	}

	.card_box_three
	{
	background: #fffdf8;
    border: 1px solid #ddd8ca;
    border-radius: 16px;
    padding: 24px;
    width: 32%;
	position:relative;
	}
	
	.card_box_two
	{
	background: #fffdf8;
    border: 1px solid #ddd8ca;
    border-radius: 16px;
    padding: 24px;
    width: 48%;
	position:relative;
	}	
	
	.card_box_oneline
	{
	background: #fffdf8;
    border: 1px solid #ddd8ca;
    border-radius: 16px;
    padding: 24px;
    width: 100%;
	position:relative;
	}	
	
	.card_box_title
	{
    background: #272b3b;
    color: #fff;
    padding: 15px 30px;
    border-radius: 12px;
    font-weight: 700;
    display: block;
    text-align: center;
	}
	
	.card_box_curri_set
	{
    position: relative;
    padding: 10px 0px;
    height: 100px;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
	}
	
	.card_box_curri_set span
	{
	color:red;
	}
	
	.card_box_magicschool
	{
    position: relative;
    padding: 10px 5px;
    border: 1px dashed;
    height: 250px;
	}
	
	.card_box_magicshop
	{
    position: relative;
    padding: 10px 5px;
    border: 1px dashed;
    height: 220px;
	}	
	
	.card_box_sclactivity
	{
    position: relative;
    padding: 10px 5px;
    border: 1px dashed;
    height: 250px;
	}		
	
	.card_box_three strong, .card_box_two strong, .card_box_oneline strong
	{
	display:block;
	font-size:18px;
	margin-bottom:8px
	}
	
	.card_box_curriculum img
	{
		width:100%;
	}
	
	

	.each_notice_area
	{
		position:relative;
		padding:20px 35px;
		border-left:4px solid #6f5b3e;
		background:#ebe5d8;
	}
	
	.each_notice_detailbox
	{
	    position: relative;
    padding: 20px 22px;
    list-style-type: none;
    background: #ebe5d8;
	}
	
	.card_flow_planner
	{
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    background-color: #ebe5d8;
    border-left: 4px solid #6f5b3e;
	}
	
	
	.owl_explain_box
	{
		position:relative;
		padding:20px;
		border-left:4px solid #6f5b3e;
		background:#ebe5d8;
	}
	
	.rule_view
	{
		position:relative;
		text-align:center;
		padding:25px;
		background:#252938;
		color:#fff;
		border-radius:16px;
	}
	.rule_view .formula{
		margin-top:14px;
		padding:16px;
		background:#171a24;
		border-radius:10px;
		font-family:Georgia,serif;
		font-size:18px;
	}
	ul,ol{padding-left:24px}
	table{
		width:100%;
		border-collapse:collapse;
		margin:25px 0;
		background:#fffdf8;
	}
	th,td{
		border:1px solid #d9d3c5;
		padding:13px 15px;
		text-align:left;
		vertical-align:top;
	}
	th{background:#e9e3d5}
	.footer{
		padding:50px 30px;
		text-align:center;
		background:#171b2c;
		color:#cfd1dc;
	}
	@media(max-width:800px){
		.hero{padding:55px 24px}
		.content{padding:35px 22px 60px}
		.toc{padding:10px 14px}
		.overview_card_box{grid-template-columns:1fr}
		h2{font-size:29px}
	}