@import url('sub.css');


#subject_top{position:relative; background:url('/subject/img/subject_subtop.jpg')no-repeat center / cover; overflow:visible;}
#subject_top .basic_in{position:relative; z-index:1;  padding:120px 0; text-align:center;}
#subject_top .top_txt{}
#subject_top .top_txt .fs40{display:block; font-family:var(--blackHan); color:#674e38; line-height:1; letter-spacing:-0.05em;  margin: 0 0 30px;}
#subject_top .top_txt .fs100{margin:0 0 25px;}
#subject_top .top_txt .fs24{font-weight:600; color:var(--black); line-height:1.417; letter-spacing:-0.05em;}

.subject_top_list {position:relative; max-width:945px; margin:0 auto;}
.subject_top_list dl {display:flex;  align-items:center; gap:42px;}
.subject_top_list dl dt {position:relative; width:140px; flex-shrink: 0; border:10px solid var(--main2); border-radius:100%; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; aspect-ratio: 1 / 1; background:var(--white);}
.subject_top_list dl dt .dot {width:5px; aspect-ratio: 1 / 1; background:var(--main2); border-radius:100%; display:block; position:absolute; bottom:-51px; left:50%; transform:translateX(-50%); margin:20px 0;}
.subject_top_list dl dt .dot::before, .subject_top_list dl dt .dot::after {content:''; width:3px; aspect-ratio: 1 / 1; background:inherit; border-radius:100%; position:absolute; left:1px;}
.subject_top_list dl dt .dot::before {top:-8px;}
.subject_top_list dl dt .dot::after {top:10px;}


.subject_top_list dl dd {flex:1; text-align:left;}
.subject_top_list dl dd .fs14 {font-weight: 400; letter-spacing:0; color:var(--main2); font-family:var(--blackHan); line-height:1;}
.subject_top_list dl dd .fs30 {font-family:var(--blackHan); line-height:1; margin:7px 0 12px; font-weight: 400;}

.subject_top_list dl:nth-of-type(1) {position:absolute; bottom:-185px; left:-175px;}
.subject_top_list dl:nth-of-type(1) dt {border-color:var(--sub3); order:2;}
.subject_top_list dl:nth-of-type(1) dt .dot {background:var(--sub3);}
.subject_top_list dl:nth-of-type(1) dt .dot::after, .subject_top_list dl:nth-of-type(1) dt .dot::before {background:var(--sub3);}
.subject_top_list dl:nth-of-type(1) dd {order:1; text-align:right;}
.subject_top_list dl:nth-of-type(2) {margin:60px 0 60px 402px;}
.subject_top_list dl:nth-of-type(2) {}
.subject_top_list dl:nth-of-type(2) dt {}
.subject_top_list dl:nth-of-type(2) dt .dot {bottom:-62px;}
.subject_top_list dl:nth-of-type(3) {position:absolute; bottom:-185px; right:-225px;}
.subject_top_list dl:nth-of-type(3) dt .dot {background:var(--sub);}
.subject_top_list dl:nth-of-type(3) dt .dot::after, .subject_top_list dl:nth-of-type(3) dt .dot::before {background:var(--sub);}
.subject_top_list dl:nth-of-type(3) dt {border-color:var(--sub);}
.subject_top_list dl:nth-of-type(3) dd .fs14 {color:var(--sub);}

.subject_top_img {max-width:945px; margin:0 auto;}
.subject_top_img img {max-width:100%;}


.tit_wrap{text-align:center; margin:0 0 60px;}
.tit_wrap .num{display:flex; align-items:center; justify-content:center; width:100px; height:100px; margin:0 auto 30px; color:var(--white); font-family:var(--jump); font-size:1.111rem; font-weight:800; position:relative; z-index:10;}
.tit_wrap .num::after{content:''; width:100%; height:100%; background:url("/img/number.svg") no-repeat center / 100% auto; position:absolute; top:0; left:0; z-index:-1;}
.tit_wrap .round_txt {display:block; font-family: var(--blackHan); font-weight: 400; color:var(--main); margin:0 0 5px !important;}
.tit_wrap .round_txt * {font-family:inherit; line-height:1; letter-spacing:inherit; color:var(--main); font-weight:400;}
.tit_wrap .fs24{margin:30px 0 0; font-weight:600; color:var(--black); }
.tit_wrap .fs18{color:var(--basic); line-height:1.667; margin:15px 0 0;}



.subject_content {background:var(--grayBg); border-radius:var(--borderR20); padding:50px; box-sizing:border-box; overflow:hidden;}
.subject_content .subject_book {display:flex; flex-wrap:wrap; gap:0 80px; align-items:center; margin:0 0 60px;}
.subject_content .subject_book .imgBox {flex-shrink: 0; width:310px; position:relative;}
.subject_content .subject_book .imgBox img {max-width:100%;}
.subject_content .subject_book .imgBox::after {content:''; width:131px; aspect-ratio: 131 / 102; background:url("/subject/img/subject_mark01.png")no-repeat center / 100% auto; position:absolute; bottom:-25px; right:-33px; z-index:10; transform: rotate(30deg); transform-origin:center;}
.subject_content.only_ver .subject_book .imgBox::after {background:url("/subject/img/subject_mark02.png")no-repeat center / 100% auto;}
.subject_content .subject_book .tBox {flex:1;}
.subject_content .subject_book .tBox .fs40 {line-height:1; margin:0 0 15px;}
.subject_content .subject_book .tBox .fs20 {display:block; margin:30px 0 5px;}

.subject_content .subject_book .tBox .dots_list li {padding-left:26px; box-sizing:border-box; position:relative; letter-spacing: var(--letter-spacing-default);}
.subject_content .subject_book .tBox .dots_list li+li {margin:3px 0 0;}
.subject_content .subject_book .tBox .dots_list li::before {content:""; width:18px;  aspect-ratio: 1 / 1; flex-shrink:0; -webkit-mask: url('/almond/img/check_sub.svg') no-repeat center / contain;     mask: url('/almond/img/check_sub.svg') no-repeat center / contain; position: absolute; top: 6px; left:0; background:var(--main);}

.stage_of_learning {padding:50px; box-sizing:border-box; background:var(--white); border-radius:var(--borderR15);}
.stage_of_learning .stage_tit {display:flex; flex-wrap:wrap; align-items:center; gap:20px; justify-content:center; color:var(--sub); line-height:1; font-family: var(--blackHan); font-weight:400; margin:0 0 30px;}
.stage_of_learning .stage_tit i {display:block;width:100px; height:1px; position:relative;}
.stage_of_learning .stage_tit i::after {content:''; width:5px; aspect-ratio: 1/1; border-radius:100%; background:var(--sub); position:absolute; top:50%; transform:translateY(-50%);}
.stage_of_learning .stage_tit i:first-of-type {background: linear-gradient(90deg, #519953 0%, rgba(81, 153, 83, 0.00) 100%);}
.stage_of_learning .stage_tit i:last-of-type {background: linear-gradient(90deg, rgba(81, 153, 83, 0.00) 0%, #519953 100%);}
.stage_of_learning .stage_tit i:last-of-type::after {right:0;}

.stage_list {}
.stage_list dl {display:flex; flex-wrap:wrap; align-items:center; position:relative; z-index:1;}
.stage_list dl+dl {margin-top:-95px;}
#science .stage_list dl:first-of-type {margin-bottom:25px;}
.stage_list dl dt {width:240px; flex-shrink: 0; position:relative; z-index:10;}
.stage_list dl dt img {max-width:100%;}
.stage_list dl dd {flex:1; padding:15px 25px 15px 50px; box-sizing:border-box; min-height:116px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; position:relative;}
.stage_list dl dd::before {content:''; width:120px; height:100%; background:inherit; top:0; left:0; position:absolute; transform:translateX(-100%);}

.stage_list dl dd ul {width:100%;}
.stage_list dl dd ul li {display:flex; /* flex-wrap:wrap;  */align-items:center;}
.stage_list dl dd ul li+li {margin:10px 0 0;}
.stage_list dl dd ul li .grade {border-radius: 10px; border: 3px solid rgba(255, 255, 255, 0.30); background: rgba(255, 255, 255, 0.20); display: flex; width: 120px; padding: 5px 15px; justify-content: center; align-items: center; box-sizing:border-box; font-size: 0.8888888888888889rem; font-weight: 400; line-height: 175%; letter-spacing: var(--letter-spacing-caption); color:var(--white); font-weight: 600; text-align:center; flex-shrink: 0; }
.stage_list dl dd ul li .dot {width:5px; height:5px; background:var(--white); border-radius:100%; display:block; position:relative; margin:0 33px;}
.stage_list dl dd ul li .dot::before, .stage_list dl dd ul li .dot::after {content:''; width:3px; height:3px; background:var(--white); border-radius:100%; opacity:0.5; position:absolute; top:50%; transform:translateY(-50%);}
.stage_list dl dd ul li .dot::before {left:-8px;}
.stage_list dl dd ul li .dot::after {right:-8px;}
.stage_list dl dd ul li .flex-box {display:flex; align-items:center; gap:0 25px; flex-wrap:wrap;}
.stage_list dl dd ul li .flex-box span.fs16 {display: flex; width: 100px; padding: 5px 15px; justify-content: center; align-items: center; box-sizing:border-box; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.20); font-weight: 600; color:var(--white); text-align:center; flex-shrink: 0; }
.stage_list dl dd ul li .flex-box p.fs16 {color:var(--white); flex:1;}


.stage_list dl:nth-of-type(1) {z-index:3;}
.stage_list dl:nth-of-type(2) {z-index:2;}
.stage_list dl:nth-of-type(3) {z-index:1;}

.stage_list dl:nth-of-type(1) dd {background: rgba(161, 126, 106, 0.90);}
.stage_list dl:nth-of-type(2) dd {background: rgba(64, 103, 147, 0.90);}
.stage_list dl:nth-of-type(3) dd {background: rgba(81, 153, 83, 0.90);}






/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 
	.subject_content .subject_book { gap: 0 50px; }
	.subject_content .subject_book br {display:none;}
	
	
	.subject_content {padding:50px 25px;}
	.stage_of_learning {padding:50px 25px;}
	.stage_list dl+dl {margin-top:-75px;}
	.stage_list dl dt {width:205px;}
	.stage_list dl dd {padding: 15px 25px 15px 15px;}
	.stage_list dl dd::before {width:100px;}
	
	.subject_top_list {max-width:715px;}
	.subject_top_list dl {gap:25px;}
	.subject_top_list dl dt {width:110px; border-width:6px;}
	.subject_top_list dl dd {max-width:200px;}
	.subject_top_list dl dd .fs18 {font-size:0.888rem;}
	.subject_top_list dl dd br {display:none;}
	.subject_top_img {max-width:715px;}
	
	.subject_top_list dl:nth-of-type(1) {bottom:-131px; left:-137px;}
	.subject_top_list dl:nth-of-type(2) {margin: 60px 0 44px 302px;}
	.subject_top_list dl:nth-of-type(3) {bottom:-140px; right:-134px;}
	
}

/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 
	.subject_content .subject_book { gap: 0 40px; }
	.subject_content .subject_book .imgBox { width: 280px; }
	
	.stage_list dl+dl {margin-top:-30px;}
	.stage_list dl dt { width: 200px; }
	.stage_list dl dd { padding: 15px 20px 15px 30px; }
	.stage_list dl dd ul li .grade { width: 100px; padding: 5px 10px; }
	.stage_list dl dd ul li .dot { margin: 0 15px; }
	.stage_list dl dd ul li .flex-box { gap: 0 15px; }
}

/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 
	.subject_content { padding: 30px; }
	
	/* 교재 영역 세로 정렬 */
	.subject_content .subject_book { gap: 0 30px; align-items:flex-start;}
	.subject_content .subject_book .imgBox { width: 200px; }	
	.subject_content .subject_book .imgBox::after {width:90px; bottom:-15px; right:-15px;}
	.subject_content .subject_book .tBox .fs20 {margin:20px 0 5px;}
	.subject_content .subject_book .tBox .dots_list li::before {top:4px;}
	
	.stage_of_learning { padding: 30px 20px; border-radius: 15px; }
	.stage_tit i { width: 40px; }
	
	.stage_list dl { flex-direction: column; align-items: center; }
	#science .stage_list dl:first-of-type {margin-bottom:0;}
	.stage_list dl+dl { margin-top: 30px; } 
	.stage_list dl dt { width: 150px; margin: 0 auto -30px; position: relative; z-index: 2; }
	.stage_list dl dt img { width: 100%; display: block; }
	.stage_list dl dd { width: 100%; border-radius: 20px; padding: 40px 20px 25px; min-height: auto; }
	.stage_list dl dd::before {display:none;}

	.stage_list dl dd ul li { flex-direction: column;  align-items: flex-start;  gap: 12px;  background: rgba(0, 0, 0, 0.1); padding: 20px 15px;  border-radius: 12px; }
	.stage_list dl dd ul li + li { margin-top: 15px; }
	.stage_list dl dd ul li .dot { display: none; }
	
	.stage_list dl dd ul li .grade { width: auto; padding: 5px 20px; width:100%;}
	.stage_list dl dd ul li .flex-box { /* flex-direction: column;  */align-items: flex-start; gap: 12px; width: 100%; }
	.stage_list dl dd ul li .flex-box span.fs16 { width: auto; padding: 3px 10px; border-radius:3px;}
	.stage_list dl dd ul li .flex-box p.fs16 {position:relative; top:4px;}
	
.subject_top_img { display: none; }
.subject_top_list { position: relative; max-width: 100%; margin: 40px 0 0; display: flex; flex-direction: column; gap: 30px; padding: 0 15px; }
.subject_top_list::before { content: ''; width: 2px; height: 100%; background: var(--border); position: absolute; left: 54px; top: 0; z-index: 0; }
.subject_top_list::after { content: ''; position: absolute; bottom: 0; left: 49px; border-width: 8px 6px 0; border-style: solid; border-color: var(--border) transparent transparent transparent; font-family: inherit; font-size: 0; }
.subject_top_list dl { position: relative !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; display: flex; align-items: center; gap: 15px; z-index: 1; }
.subject_top_list dl:nth-of-type(2)::before, .subject_top_list dl:nth-of-type(3)::before { content: '+'; position: absolute; top: -30px; left: 28px; width: 22px; height: 22px; background: #fff; border: 2px solid #ccc; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #888; font-weight: bold; font-family: sans-serif; z-index: 2; }
.subject_top_list dl:nth-of-type(3)::before { content: '='; }
.subject_top_list dl::after { display: none !important; }
.subject_top_list dl dt { order: 1 !important; width: 80px; height: 80px; border-width: 4px; margin: 0; flex-shrink: 0; background: #fff; }
.subject_top_list dl dt img { width: 40px; }
.subject_top_list dl dt .dot { display: none; }
.subject_top_list dl dd { order: 2 !important; text-align: left !important; max-width: 100%; background: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; justify-content: center; }
.subject_top_list dl dd .fs14 { font-size: 0.8rem; margin-bottom: 5px; }
.subject_top_list dl dd .fs30 { font-size: 1.3rem; margin: 0 0 8px; }
.subject_top_list dl dd .fs18 { font-size: 0.95rem; line-height: 1.4; word-break: keep-all; }
.subject_top_list dl dd br { display: none; }
	
}

/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 
#subject_top .basic_in {padding:60px 0;}
	.tit_wrap {margin:0 0 30px;}
	.tit_wrap .num{width:70px; height:70px; font-size:12px; margin-bottom: 20px;}
	.tit_wrap .fs24 {margin:15px 0 0;}
	.tit_wrap .fs18 {margin:10px 0 0;}
	
#subject_top .top_txt .fs40{margin: 0 0 20px;}
#subject_top .top_txt .fs100{margin:0 0 15px;}


	.subject_content {padding:20px;}
	.stage_list dl dt { width: 120px; margin: 0 auto -30px; position: relative; z-index: 2; }
	.stage_list dl dd { width: 100%; border-radius: 10px; padding: 15px; min-height: auto; }
	.stage_list dl dd ul li {padding:10px;}
	.stage_list dl dd ul li + li {margin-top:10px;}
	.stage_of_learning .stage_tit {gap:10px;}
	.stage_of_learning .stage_tit i {width:26px;}
	.subject_content .subject_book { gap: 30px; align-items:flex-start;}
	.subject_content .subject_book .imgBox { width: 100%; }	
	.subject_content .subject_book .imgBox img {width: 100%; }
	.subject_content .subject_book .imgBox::after {width:90px; bottom:10px; right:-15px;}
	.subject_content .subject_book .tBox {flex:none; width:100%;}
	
	.subject_content .subject_book .tBox .fs40 {}
	.subject_content .subject_book .tBox .fs20 {margin:15px 0 5px;}
	.subject_content .subject_book .tBox .dots_list li {padding-left:22px;}
	.subject_content .subject_book .tBox .dots_list li::before {top:3px; width:15px;}
	

}