/*교육평가 스텝*/

.center2_page3 { }
.center2_page3 h3 { font-size:1.4em; color:#111; margin-bottom:15px; display:block}



.center2_page3 .page3_step {width:100%; display:flex; justify-content:space-between; position:relative; }
.center2_page3 .page3_step div {width:30%;  display:flex; flex-wrap:wrap; box-sizing:border-box; margin-bottom:-20px}
.center2_page3 .page3_step div p {width:100%;  box-sizing:border-box; padding:20px; font-size:1.1em; line-height:1.35; text-align:Center; margin-bottom:20px; position:relative; z-index:99; font-weight:500; background-color:#7968ac;   display:flex; align-items:center;justify-content:center; color:#fff;  border-radius:5px; }
.center2_page3 .page3_step div:nth-child(1) p:nth-child(2) {background-color:#6e5da2;}
.center2_page3 .page3_step div:nth-child(1) p:nth-child(3) {background-color:#66559b;}
.center2_page3 .page3_step div:nth-child(2) p:nth-child(1) {background-color:#5d4b91;}
.center2_page3 .page3_step div:nth-child(2) p:nth-child(2) {background-color:#4f3d86;}
.center2_page3 .page3_step div:nth-child(2) p:nth-child(3) {background-color:#402d78;}
.center2_page3 .page3_step div:nth-child(3) p:nth-child(1) {background-color:#392671;}
.center2_page3 .page3_step div:nth-child(3) p:nth-child(2) {background-color:#2f1c69;}
.center2_page3 .page3_step div:nth-child(3) p:nth-child(3) {background-color:#281561;}

.center2_page3 .page3_step div p span {}
.center2_page3 .page3_step div:nth-child(2) p:nth-child(1) {order:3; }
.center2_page3 .page3_step div:nth-child(2) p:nth-child(2) {order:2; }
.center2_page3 .page3_step div:nth-child(2) p:nth-child(3) {order:1; }
.center2_page3 .page3_step p.line_y {width:22px; height:100%; position:absolute; background-color:#ddd}
.center2_page3 .page3_step p.line_x {width:100%; height:22px; position:absolute; background-color:#ddd}


/*교육평가2 평기모형*/

.center2_page3 .page3_2_box {width:100%; margin-top:30px; display:flex; justify-content:space-between ; }
.center2_page3 .page3_2_box  div.c {width:33.3333%; box-sizing:border-box; position:relative; text-align:center; }
.center2_page3 .page3_2_box  div.c .img {width:100%;  display:flex; align-items:center; justify-content:center; line-height:0;   padding:0 15px;  height:270px; background-color:#f7f7f7; box-sizing:border-box}
.center2_page3 .page3_2_box  div.c:nth-child(2) .img {background-color:#f3f3f3}

.center2_page3 .page3_2_box  div.c .text { padding:20px 10px 0 10px; text-align:left; }
.center2_page3 .page3_2_box  div.c .text b {display:block; margin-bottom:10px; font-size:1.3em; font-weight:700; color:#111; }

.center2_page3 .page3_2_box  div.c span {position:absolute; border-radius:50%; font-size:1.5rem; width:40px;line-height:40px; background-color:#2478be ; color:#fff; display:inline-block; right:5%; top:7%; z-index:9}
.center2_page3 .page3_2_box  div.c img {max-width:100%; }
.center2_page3 .page3_2_box div.c div.m_box { width:100%; margin-left:auto; line-height:1.3; color:#333;    padding-top:20px; text-align:left}
 


 
 @media all and (max-width:800px) {
	.center2_page3 .page3_2_box  div.c span {display:none}
	.center2_page3 .page3_2_box {flex-wrap:wrap}
	.center2_page3 .page3_2_box div.c {width:100%;  padding:0; }
	.center2_page3 .page3_2_box  div.c:nth-child(2) { border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:25px 0; margin:25px 0}
	.center2_page3 .page3_2_box  div.c .img {height:auto; background-color:#fff !important;}
	.center2_page3 .page3_2_box  div.c .text {font-size:1rem}
	.center2_page3 .page3_2_box  div.c .text b { font-size:1.2em  }

}

 /*교육평가3*/
 
 .step_wrap {width:100%; display:flex; position:relative; flex-wrap:wrap;}
 .m_label {color:#2478be ; font-size:1.2rem; margin-bottom:5px}


.center2_page3 .step li:nth-child(2) {background:rgba(154,214,230,.4); }
.center2_page3 .step li:nth-child(3) {background:rgba(142,183,212,.4); }
.center2_page3 .step li:nth-child(4) {background:rgba(208,32,28,.2); }
.center2_page3 .step li:nth-child(5) {background:rgba(248,206,140,.6); }


.center2_page3 .step li p {position:absolute; text-align:center; top:50%; left:50%; transform: translate(-50%, -50%); color:#222; font-weight:500; font-size:1.2rem; width:90%;  box-sizing:border-box}
 
 
.center2_page3 .step.type1 .step_ul.on li {background:rgba(0,0,0,.1);  }
.center2_page3 .step.type1 .step_ul.on li p {color:#fff}
.center2_page3 .step.type1 .step_ul.on li:hover {background-color:#8dc056; z-index:99; }
.center2_page3 .step.type1 .step_ul.on li:nth-child(2):hover {background-color:#4baecc }
.center2_page3 .step.type1 .step_ul.on li:nth-child(3):hover {background-color:#3e75a8 }
.center2_page3 .step.type1 .step_ul.on li:nth-child(4):hover {background-color:#d0201c; }
.center2_page3 .step.type1  .step_ul.on li:nth-child(5):hover {background-color:#f19d3c; }



.center2_page3 .step.type2 {position:relative; padding-right:60px}
.center2_page3 .step.type2 .step_line {width:30px; height:20%;    position:absolute; right:0; top:10%; display:inline-block; background:url('/common/img/aroow_step_icon1.png') no-repeat right; opacity:.2} 
.center2_page3 .step.type2 .step_line:last-child { background:url('/common/img/aroow_step_icon2.png') no-repeat right;  height:40%; right:0; bottom:10%; top:auto} 


.center2_page3  .box2 {width:73%;  height:100%;  right:0; position:absolute}
.center2_page3 .box2 div {width:100%; display:flex}
 
 
 

 @media all and (min-width:900px) {
    
	.center2_page3 .step {width:18%; padding-bottom:5%;  }

	.center2_page3 .step li {width:100%; padding-bottom:100%; border-radius:50%; background:rgba(197,224,162,.6); margin-bottom:-25%; position:relative; box-sizing:border-box; transition: all 0.3s ease-out;}
	.center2_page3 .step li:after {content: '';
		width: calc(100% - 10px);
		height: calc(100% - 10px);
		display: inline-block;
		border: 2px solid rgba(255,255,255,.4);
		border-radius:50%;
		position: absolute;
		top: 5px;
		left: 5px;
		box-sizing: border-box;
    }
 
     .over_layer_wrap {width:75%;  height:100%; position:absolute; right:0; top:0;  display:inline-block; font-size:0; line-height:0; }

     .over_layer {background-color:#fff; display:inline-block;  z-index:999;  
	 width:100%;  height:calc(25% - 5.2%);  position:relative }

/*	 #div1, #div2, #div3, #div4, #div5 {visibility: hidden;   }*/

 	 #div1 div, #div2 div, #div3 div, #div4 div, #div5 div {box-sizing:border-box; padding:30px; border-radius:2px; font-size:1.25rem; line-height:1.3; width:100%; display:inline-block; position:absolute; top:50%;  transform:translateY(-50%)}
 
	 #div1 div {  background:rgba(0,0,0,.03); color:#999; }
	 #div2 div {  background:rgba(0,0,0,.03); color:#999; }
	 #div3 div {  background:rgba(0,0,0,.03); color:#999; }
	 #div4 div {  background:rgba(0,0,0,.03); color:#999; }
	 #div5 div {  background:rgba(0,0,0,.03); color:#999; }

	 #div1.over_layer.on div{background:rgba(197,224,162,.4); color:#333; font-weight:500}
	 #div2.over_layer.on div{background:rgba(154,214,230,.2); color:#333; font-weight:500}
	 #div3.over_layer.on div{background:rgba(142,183,212,.2); color:#333; font-weight:500}
	 #div4.over_layer.on div{background:rgba(208,32,28,.1); color:#333; font-weight:500}
	 #div5.over_layer.on div{background:rgba(248,206,140,.4); color:#333; font-weight:500}
    
     .m_label {display:none}

     .page3_box1 {position:absolute; bottom:11%;  display:flex; align-items:center; justify-content:space-between }
     .page3_box1  .bg_box {width:49%; font-size:1rem; line-height:1.43} 
     .page3_box1 img.last_img {width:50%}
 
     .page3_box11 {margin-top:0; display:flex; align-items:center; justify-content:space-between }
     .page3_box11  .bg_box {width:59%;  font-size:1rem; line-height:1.43} 
    .page3_box11 img {width:40%}

}

@media all and (max-width:1200px) {
    .page3_box1 {bottom:0}

}

@media all and (max-width:900px) {
  
  .center2_page3 .step {display:none}

  .over_layer {margin-bottom:15px;}
  .over_layer:last-child {margin-bottom:0}
  .center2_page3  .box2 {width:100%; position:static }
  .center2_page3 .box2 div {  align-items:flex-start;  flex-direction:column}
  .center2_page3 .box2 div > p{order:2; margin-top:1em;}
 
 
  .box2 img.last_img {position:static; width:90%}
  

  .page3_box1{flex-direction:column; margin-top:1em}
  .page3_box1 > p{order:2; margin-top:1em}
  .page3_box1 > img {width:80%; margin:0 auto}

  .page3_box11 { }
  .page3_box11 > p{order:2; margin-top:1em}
  .page3_box11 > img {width:70%; margin:0 auto}

}

.arrow_box {position:relative }
.arrow_box ul {display:flex; justify-content:space-between; position:relative; z-index:99  }
.arrow_box ul li {width:49%; text-align:center; line-height:0; letter-spacing:-.3px;  display:flex; align-items:center; border-radius:5px; position:relative; background-color:#f7f7f7}
.arrow_box ul.step_one li {width:25%; background-color:#fff;  margin:30px 0; display:inline }
.arrow_box .step_one div {width:54%;  padding-bottom:54%; display:inline-block; position:relative;  border-radius:50%; box-sizing:border-box; line-height:1.3; }
.arrow_box .step_one div p {position:absolute; left:50%; top:50%; color:#fff; width:100%; text-align:center; transform: translate(-50%, -50%);  font-family: 'Montserrat'; font-weight:500; font-size:1.1em; letter-spacing:1px}
.arrow_box .step_one div p  span {font-weight:600; font-size:1.15em; letter-spacing:0; }

.arrow_box .step_one div:after {content: '';
		width: calc(100% - 10px);
		height: calc(100% - 10px);
		display: inline-block;
		border: 2px solid rgba(255,255,255,.4);
		border-radius:50%;
		position: absolute;
		top: 5px;
		left: 5px;
		box-sizing: border-box;
		
		}

.arrow_box div.text_box {width:100%; text-align:left; padding:25px;  font-size:1.07em; font-weight:500;   box-sizing:border-box; color:#333; line-height:1.35; position:Relative; z-index:99 }

.arrow_box p.s_line {width:4px; height:250px; margin:0; display:inline-block; position:absolute;  }
.arrow_box p.s_line:nth-child(1) {left:12.5%; top:0; }
.arrow_box p.s_line:nth-child(2) {left:37.5%; bottom:0;}
.arrow_box p.s_line:nth-child(3) {right:37.5%; top:0;}
.arrow_box p.s_line:nth-child(4) {right:12.5%; bottom:0;} 

.arrow_box  .no {position:absolute; right:20px; bottom:45px; opacity:.3; font-weight:900; font-size:3.5rem; color:#fff;}
 
 @media all and (max-width:1024px) {
    .arrow_box .step_one div {width:80%;  padding-bottom:80%;  }
 }


 @media all and (max-width:800px) {
	.arrow_box ul {flex-wrap:wrap; }
	.arrow_box ul li {width:100%; }
	.arrow_box ul.step_one  {display:none }
	.arrow_box div.text_box { padding:15px;  font-size:1em; }
}