@charset "utf-8";

	@font-face {
		font-family: 'Suit';
		src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Variable.woff2') format('woff2-variations');
		font-weight: 100 900; /* 100부터 900까지 모두 지원한다는 의미 */
		font-display: swap;
	}
	@font-face {
		font-family: 'OneStoreMobileGothicTitleFont';
		src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
		font-weight: normal;
		font-display: swap;
	}
		section {margin:0; padding:0; width:96%; margin:auto ; max-width:1440px; }
		section * { font-family: 'Suit'; }
		section:first-child{margin:auto;}
		section h2{font-family: 'OneStoreMobileGothicTitleFont'; font-weight:normal; font-size:clamp(20px, 2.6vw, 30px);}
		section h3{font-family: 'OneStoreMobileGothicTitleFont'; font-weight:normal; font-size:clamp(18px, 2.6vw, 25px);}
		section h2 span{font-family: 'Suit'; font-weight:500; color:#666; margin:10px 0 15px 0; display:block;font-size:clamp(14px, 1.5vw, 18px);}
		section h3 span{font-family: 'Suit'; font-weight:500; color:#666; margin:10px 0 10px 0; display:block;font-size:clamp(13px, 1.5vw, 16px);}
		section.header {padding:30px 0; font-family: 'Suit'; position:relative;z-index:100;}
		section.header dl{ display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between;}
		section.header dl dd:nth-of-type(1) a{font-size:20px;font-size: 18px;    font-weight: 700; padding:0 10px;}
		section.header dl dd:nth-of-type(2) {display:flex;  align-items:center; gap:5px;}
		section.header dl dd:nth-of-type(2) a{border:1px solid #ddd; border-radius:50px; padding:20px  ;display:flex; align-items:center; display:flex; align-items:center; justify-content:center;} 
		section.header dl dd:nth-of-type(2) a.btn_top1{background:#f1f1f1; border-color:#f1f1f1; }
		section.header dl dd:nth-of-type(2) a.btn_top3{background:#333; border-color:#333; color:#fff; gap:3px;}
		section.header dl dd:nth-of-type(2) a.btn_top4{background:#c10230; border-color:#c10230; color:#fff; gap:3px;}
		section.header dl dd:nth-of-type(2) a.btn_top3 img,
		section.header dl dd:nth-of-type(2) a.btn_top4 img {filter: brightness(0) invert(1);}
		
		section.main_con > div{position:relative; border-radius:30px;overflow:hidden;}
			section.main_con li.slick-slide {position: relative; width:100%; height: 470px; background-color: #eee; display: flex; align-items: center; justify-content: center; font-size: 24px; }
			
		
			.main_visual2 { background: url('../img/main_page/main_nbg.png')repeat-x center/ auto 100%; }
				.main_visual2 dl{width:80%; margin:auto; display:flex; flex-flow:row nowrap; align-items:center; justify-content: space-around;}
				.main_visual2 dl,
				.main_visual2 dt{height:100%;}
				.main_visual2 dt {max-width:40%;}
				.main_visual2 dt img { height:100%;}
				.main_visual2 dd * {font-family:'OneStoreMobileGothicTitleFont';}
				.main_visual2 dd p{font-size:clamp(40px, 6vw, 90px); line-height:clamp(45px, 6vw, 95px); font-weight:bold;}
				.main_visual2 dd span{font-size:clamp(20px, 2.6vw, 40px); line-height:clamp(25px, 2.6vw, 45px);font-weight:100;  font-family:'OneGothicBody'; letter-spacing:3px; display:block; margin:10px 0;}
				.main_visual2 dd b{font-size:clamp(14px, 1.5vw, 20px); line-height:clamp(18px, 1.5vw, 25px); font-weight:100; font-family:'OneGothicBody'; letter-spacing:2px; padding-left:3px;display:block; color:#666;}
				.main_visual2 dd strong{color:#ee4b37; font-weight: unset;}
				
			section.main_con .main_visual3.slick-slide {background: url('../img/main_nimg3.png') center right/ auto 100%; flex-flow:column; align-items: flex-end}
				.main_visual3 p{text-align:center; font-size:clamp(14px, 1.5vw, 24px); line-height:clamp(20px, 2.0vw, 30px); text-align:right; margin-right:80px;}
				.main_visual3 p strong{font-size:clamp(30px, 2.6vw, 40px); line-height:clamp(35px, 2.6vw, 50px);color:#5068e4;}
				.main_visual3 h1{text-align:center; font-size:clamp(20px, 2.6vw, 30px);  font-family:'OneStoreMobileGothicTitleFont'; text-align:right; margin-right:80px;}
				.main_visual3 h1 strong{font-size:clamp(50px, 7vw, 100px); line-height:clamp(50px, 7vw, 100px);font-weight:bold;  font-family:'OneStoreMobileGothicTitleFont'; color:#5068e4;}
				
			.main_visual4 {background: url('../img/main_nimg2.png') center/ auto 100%; flex-flow:column;color:#fff;}
				.main_visual4 p {font-size:clamp(20px, 2.6vw, 30px); line-height:clamp(30px, 2.6vw, 40px); color:#fff; font-family:'OneStoreMobileGothicTitleFont';}
				.main_visual4 h1 {font-size:clamp(50px, 7vw, 100px); line-height:clamp(50px, 7vw, 100px); color:#fff; font-family:'OneStoreMobileGothicTitleFont';}
				.main_visual4 span{text-align:center; font-size:clamp(14px, 1.5vw, 24px); line-height:clamp(20px, 2.0vw, 30px);}


			section.main_con div > dl {position:absolute;top:0; right:0; width:65px; height:55%; background:#fff; display: flex; flex-flow:column nowrap; align-items: center;    justify-content: space-between;gap: 15px; border-radius:0 0 0 20px; }
			section.main_con div > dl:before,
			section.main_con div > dl:after{content:""; position:absolute;display:block; width:20px; height:20px;   border-radius:0 100% 0 0;    box-shadow: 30px calc(30px * -1) 0 30px #fff;  }
			section.main_con div > dl:before{top:0; left:-20px;  }
			section.main_con div > dl:after{bottom:-20px; right:0;  }
			section.main_con div > dl dt{background:#333; color:#fff; height:70%; border-radius:30px;width:50px; margin-left:10px; position:relative; z-index:5;}
			section.main_con div > dl dt p{position:absolute; transform:rotate(90deg) ; width:150px; left:-50px; top:65%;font-family: 'Suit';}
			section.main_con div > dl dt p button{color:#fff;font-family: 'Suit'; font-size:18px; vertical-align: middle; padding:0 3px;}		
			section.main_con div > dl dt span{vertical-align: middle;}
			section.main_con div > dl dd{background:#333; color:#fff; height:50px; border-radius:30px;width:50px;margin-left: 10px;position: relative; z-index: 5; margin-bottom: 12px; display:flex;  align-items:center; justify-content:center;}
			section.main_con div > dl dd button{color:#fff;font-family: 'Suit'; font-size:18px; vertical-align: middle; padding:0 3px; }
		
		section.main_bnr dl{display:flex; flex-flow:row wrap;  justify-content:space-between; margin-top:30px; gap:10px;}
			section.main_bnr dt,
			section.main_bnr dd{border:1px solid #ccc;border-radius:20px; padding:50px 30px;font-size:18px;font-weight:;}
			section.main_bnr dt{flex:1 1 65%; position:relative;} 
			section.main_bnr dt a{color:#333; font-size:14px; font-weight:600; display: flex; align-items: center;}
			section.main_bnr dt a strong{width:25px; height:25px; line-height:25px; text-align:center; border-radius:50%; background:#333; display:inline-block; margin-left:5px;}
			section.main_bnr dt a strong img {filter: brightness(0) invert(1); width:15px; height:15px;}
			section.main_bnr dt p{position:absolute; right:20px; top:0px;     z-index: 11;}
			section.main_bnr dd{flex:1 1 30%; display:flex; flex-flow:column wrap;gap:20px}
			section.main_bnr dd a {display:block;   background:url('/static/web/main/img/new_main_18.png')NO-repeat center right;}
			section.main_bnr dd a img {display:inline-block; margin-right:5px;}
		
		
		section.main_bnr2{width:100%; max-width:100%; padding:70px 0; margin:50px 0 70px 0; background:#f5f5f5; text-align:center;}
			section.main_bnr2 dl{width:96%; margin:auto ; max-width:1440px;  display:flex; flex-flow:row wrap;  justify-content:space-between; margin-top:30px; gap:10px;}
			section.main_bnr2 > h2{margin-bottom:10px; font-size:clamp(30px, 3.6vw, 40px);}
			section.main_bnr2 dt,
			section.main_bnr2 dd{background:#fff; border-radius:30px; border:1px solid #ccc;}
			section.main_bnr2 dt p{font-family: 'Suit'; font-size:18px; text-align:left; margin-bottom:5px; display:flex;  align-items:center;  }
			section.main_bnr2 dt p:nth-of-type(5) {margin-bottom:0px;}
			section.main_bnr2 dt p strong{display:inline-block; width:120px; vertical-align: middle;}
			section.main_bnr2 dt p span{display:inline-block; width:calc(100% - 130px); height:45px; border-radius:50px ;background:#f1f1f1; position:relative;}
			section.main_bnr2 dt p span:before{content:""; position:absolute;left:0; top:0; width:0%; height:100%; border-radius:50px; background:#ff4a33;  }
			section.main_bnr2 dt p:nth-of-type(1) span:before{width:20%;}
			section.main_bnr2 dt p:nth-of-type(2) span:before{width:40%;}
			section.main_bnr2 dt p:nth-of-type(3) span:before{width:60%; background:#5068e4;}
			section.main_bnr2 dt p:nth-of-type(4) span:before{width:80%; background:#5068e4;}
			section.main_bnr2 dt p:nth-of-type(5) span:before{width:100%; background:#5068e4;}
			section.main_bnr2 dt p span:after{content:"초등 저학년 수준"; position:absolute;left:21%; top:50%; transform:translateY(-50%); font-family: 'Suit'; font-size:14px; font-weight:500;}
			section.main_bnr2 dt p:nth-of-type(2) span:after{content:"초등 고학년 수준"; left:41%;}
			section.main_bnr2 dt p:nth-of-type(3) span:after{content:"중등 수준"; left:50%; color:#fff;}
			section.main_bnr2 dt p:nth-of-type(4) span:after{content:"고등 수준"; left:70%; color:#fff;}
			section.main_bnr2 dt p:nth-of-type(5) span:after{content:"수능 모의고사 대비"; left:82%; color:#fff;}
			
			section.main_bnr2 dt{flex:1 1 65%; text-align:left; padding:30px 50px;}
			section.main_bnr2 dd{flex:1 1 30%; text-align:left; display:flex; flex-flow:column nowrap;gap:5px;  padding:30px 40px;}
			section.main_bnr2 dd p {height:25%; background:#f9f9f9; border-radius:10px; display:flex; align-items:center; justify-content:flex-start; text-align:left;font-size:16px; font-weight:600;} 
			section.main_bnr2 dd p strong{display:flex; width:35px; height:35px; border-radius:50%; background:#b9022e ; margin:0 10px 0 10px; align-items:center; justify-content:center}
			section.main_bnr2 dd p strong img {filter: brightness(0) invert(1); width:20px; height:20px;}
		
 
		
		section.main_bnr3 ul{display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; gap:10px;}
			section.main_bnr3 li{flex:1; display:block; border:1px solid #eee; border-radius:20px; padding:30px 30px 220px 30px; background:url('/static/web/main/img/con_bg1.png')no-repeat right -1px bottom/60% auto; transition: all 0.1s ease-in-out; box-sizing:border-box;}
			section.main_bnr3 li:hover{background-size:70% auto; border:1px solid #5068e4;}
			section.main_bnr3 li:nth-of-type(4):hover{border:1px solid #ff4a33;}
			section.main_bnr3 li:nth-of-type(2){background-image:url('/static/web/main/img/con_bg2.png');}
			section.main_bnr3 li:nth-of-type(3){background-image:url('/static/web/main/img/con_bg3.png');}
			section.main_bnr3 li:nth-of-type(4){background-image:url('/static/web/main/img/con_bg4.png');}
			section.main_bnr3 li h3{font-size:25px; font-family:'OneStoreMobileGothicTitleFont'; font-weight:normal; color:#5068e4;}
			section.main_bnr3 li:last-of-type h3{color:#ff4a33;}
			section.main_bnr3 li p{font-size:18px; font-weight:600; margin:5px 0 ;}
			section.main_bnr3 li span{font-size:16px; }
			
			
			
			
		section.main_bnr4 dl{display:flex; flex-flow:row wrap;  justify-content:space-between; gap:10px;margin:50px 0;}
			section.main_bnr4 *{}
			section.main_bnr4 dt{flex:1 1 23%; padding:50px 30px; background:url('/static/web/main/img/con_bg5.png') center/100% 100%; border-radius:20px;}
			section.main_bnr4 dt p{font-size:20px; color:#fff; font-family:'OneStoreMobileGothicTitleFont';}
			section.main_bnr4 dt p strong{font-size:25px; font-weight: ; color:#ff4a33; font-family:'OneStoreMobileGothicTitleFont';}
			section.main_bnr4 dt span{display:block; color:#fff; font-size:14px; margin:10px 0;}
			section.main_bnr4 dt a {display:block;width:100%;max-width:100%; padding:10px 15px ; margin-top:20px; text-align:center; background:#fff; border-radius:40px;font-family:'OneStoreMobileGothicTitleFont'; font-size:20px;}
			section.main_bnr4 dd{flex:1 1 75%; background:#eee; border:1px solid #ccc;padding:50px 30px;  border-radius:20px;  display:flex; flex-flow:row wrap;  justify-content:space-between; gap:15px;}
			section.main_bnr4 dd h3{color:#5068e4; flex:1 1 95%;}
			section.main_bnr4 dd div{flex:1 1 30%; background:#fff; border-radius:15px;border :1px solid #ccc;}
			section.main_bnr4 dd div p{padding:20px 20px 10px 20px; display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-start;}
			section.main_bnr4 dd div span{padding:20px 25px; border-top:1px solid #eee; display:block; font-size:14px;}
		

		
		section.main_bnr5 {width:100%; max-width:100%; height:440px; background:url('/static/web/main/img/con_bg6.png')no-repeat center/cover; display:flex; flex-flow:column wrap; align-items:center; justify-content:center;}
			section.main_bnr5 img{display:block; filter: brightness(0) invert(1); }
			section.main_bnr5 p{font-size:clamp(35px, 3.6vw, 50px); color:#fff; font-family:'OneStoreMobileGothicTitleFont';font-weight:normal;}
			section.main_bnr5 p strong{color:#ff4a33;font-family:'OneStoreMobileGothicTitleFont';}
			section.main_bnr5 span{color:rgba(255,255,255,.7); text-align:center; font-size:clamp(14px, 1.5vw, 20px); line-height:clamp(18px, 1.5vw, 25px); display:block; margin:15px 0;}
			section.main_bnr5 a{display:block; padding:15px 30px;  font-size:clamp(20px, 2.6vw, 30px);  color:#fff; font-family:'OneStoreMobileGothicTitleFont'; background:#ba1c2d; border-radius:15px; }
		

		
		
		section.main_footer {width:100%; max-width:100%;   background:#222;  padding:50px 0;}		
			section.main_footer dl{width:96%; margin:auto ; max-width:1440px;  display:flex; flex-flow:row wrap;  justify-content:space-between; gap:10px}
			section.main_footer dt{display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-start;}
			section.main_footer dt img {filter: brightness(0) invert(1);  opacity:.5;} 
			section.main_footer dt span{display:block; color:#fff; margin-left:35px;}
			section.main_footer dt span span{color:#aaa;margin:5px 0 0 0;}
			section.main_footer dt p{padding: 0 0 25px 35px;}
			section.main_footer dt a {display:inline-block;color:#fff; margin-right:50px; }
			section.main_footer dt a:nth-of-type(2){color:#d13d2b;}
			section.main_footer dd{color:#fff;font-size:20px; text-align:right; display:flex; flex-flow:column wrap; align-items: flex-end;justify-content:center;}
			section.main_footer dd p {font-family:'OneStoreMobileGothicTitleFont'; font-size:40px; font-weight:bold; }
						
		@media screen and (max-width:1200px) {
	
			.main_visual2 dd * {text-align:center;}
			section.main_bnr3 li{flex:1 1 45%;}

			
		}
		
		@media screen and (max-width:1000px) {
			section.main_bnr dt,
			section.main_bnr dd,			
			section.main_bnr2 dt,
			section.main_bnr2 dd,
			section.main_footer dt,
			section.main_footer dd{flex:1 1 95%;}
			
			section.main_footer dt{flex-direction: column;}
			section.main_footer dt img {margin-bottom:10px;}
			section.main_footer dd {align-items: center;}
			
			
		}
		@media screen and (max-width:700px) {
			.main_visual2 dt {display:flex; flex-flow:row wrap; align-items:flex-end; align-content: flex-end;}
			.main_visual2 dt img {height: auto;width: 100%;}
			.main_visual2 dd {position: absolute; top: 10%;}
			.main_visual4 {background-position:center right}
			
			section.main_bnr dt{padding: 50px 30px 10px 30px;}
			section.main_bnr dt p {position:unset; text-align:right;}
			section.main_bnr3 li{flex:1 1 95%; background-size:40% auto;  padding: 30px 30px 150px 30px;}
			section.main_bnr4 dd div {flex:1 1 95%;}
			
			section.main_bnr2 dt p:nth-of-type(2) span:after{left:41%;}
			section.main_bnr2 dt p:nth-of-type(3) span:after{left:10%;}
			section.main_bnr2 dt p:nth-of-type(4) span:after{left:10%;}
			section.main_bnr2 dt p:nth-of-type(5) span:after{left:12%;}
			
			section.main_bnr2 dt,
			section.main_bnr2 dd{padding:30px;} 

		}