.sub_con1 .process li::after{color:#201716}
 

 


.tool{position:relative; display:table; border-radius:50%;}
.tool>div{position: relative;display:table-cell; vertical-align:middle; background-color:#fff; text-align:center;border-radius: 50%;}
.tool>div h5{font-weight:900}
.tool>div span{display:block; font-weight:600;}

.tool li{position:absolute; border-radius:50%; display:table; background-color:#eee; }
.tool li span{display:table-cell; vertical-align:middle; text-align:center; font-weight:300; line-height:1.1em}
.tool li strong{display:block; font-weight:bold;}





.quality{
    position: relative;
}
.quality li{position:relative; float:left; display:table; text-align:center;}
.quality li.fir{margin-left:0;}
.quality .qua_con{display:table-cell; vertical-align:middle; width:100%;}
.quality .qua_con h5{font-weight:900}
.quality .qua_con span{display:block; font-weight:bold;}
.quality .qua_con p{line-height:1.1em; font-weight:300}

.quality .q_add{position:absolute; display:table; background-color:#eaeaea;z-index: 10;}
.quality .q_add::after{position:absolute; left:50%;  content:''}
.quality .q_add p{display:table-cell; vertical-align:middle; color:#201716; font-weight:300; line-height:1.3em;text-align: center;}
.quality .q_add p strong{display:block; color:#c32a3c; font-weight:900}







@media (min-width: 649px){
  
}

@media (min-width: 1358px){
/*pc*/

.sub_visual{background:url(/edu/images/pc/ontact/visual.png) no-repeat 50%;}
 
 





.quality {margin-top:240px; padding-bottom:140px;}
.quality li{width:515px; height:220px; margin-left:-93px;}
.quality .qua_con {border-radius:110px;}
.quality .qua_con h5{font-size:50px}
.quality .qua_con span{margin:10px 0; font-size:30px;}
.quality .qua_con p{font-size:23px}

.quality .q_add{width:250px; height:150px; border-radius:8px;}
.quality .q_add::after{width:34px; height:30px; margin-left:-17px; background:url(../images/pc/ontact/arrow.png) no-repeat 50% 100%}

.quality .q_add p{font-size:23px;}
.quality .q_add p strong{font-size:23px;}

.add1{top: -155px;}
.add1_1,.add2_1{left: 345px;}
.add1_2,.add2_2{left: 760px;}
.quality .add1::after{top:100%;}
.add2{bottom: -20px;}

.quality .add2::after{bottom:100%;transform: rotate(180deg);}


.tool{padding: 1px; width:560px; margin:100px auto 0; height:560px;}
.tool>div h5{font-size:80px}
.tool>div>span{margin: 10px 0 30px; font-size:40px}
.tool li{height:200px; width:200px;}
.tool li span{font-size:35px;}

.tool1{top: -20px;left: -20px;}
.tool2{top: -20px;right: -20px;}
.tool3{bottom: -20px;left: -20px;}
.tool4{bottom: -20px;right: -20px;}
 


.sub_con1{padding:200px 0 340px;}
.sub_con1 .process{margin:100px 0 200px;}
.sub_con1 .process.x3 li p{padding-right:45px}
.sub_con1 .sub_tit2{margin-bottom:25px;}


 
.sub_con2 .process{margin-top:100px;}
.sub_con2 .process li div{padding:55px 30px; border-radius:18px;}
.sub_con2 .process h6{font-size:40px;}
.sub_con2 .process span{font-size:23px;}

.sub_con4  {padding:200px 0 380px;}
    
.sub_con6 img{display:block; margin-top:95px;}
}

@media (min-width:650px) and (max-width:1357px){
/*tab*/ 
  

.sub_visual{background:url(/edu/images/pc/ontact/visual.png) no-repeat 50%; background-size:cover !important;}
 





.quality {margin-top: 20vw;padding-bottom: 12vw;}
.quality li{width: 33.5vw;height: 18.5vw;margin-left: -4.4vw;}
.quality .qua_con {border-radius:110px;}
.quality .qua_con h5{font-size: 4.1vw;}
.quality .qua_con span{margin: 1vw 0;font-size: 2.5vw;}
.quality .qua_con p{font-size: 1.9vw;}

.quality .q_add{width: 21vw;height: 12vw;border-radius: 1vw;}
.quality .q_add::after{width: 2vw;height: 2vw;margin-left: -1vw;background: url(../images/pc/ontact/arrow.png) no-repeat 50% 0%;background-size: 100%;}

.quality .q_add p{font-size: 1.9vw;}
.quality .q_add p strong{font-size: 1.9vw;}

 
.quality .add1::after{top:100%;}
 
.quality .add2::after{bottom:100%;transform: rotate(180deg);}

.add1{top: -12vw;}
.add1_1,.add2_1{left: 21vw;}
.add1_2,.add2_2{left: 50vw;}
 
.add2{bottom: -1vw;}


.tool{padding: 1px;width: 47vw; margin:100px auto 0;height: 47vw;}
.tool>div h5{font-size: 6.6vw;}
.tool>div>span{margin: 0.5vw 0 2vw;font-size: 3.3vw;}
.tool li{height: 17vw;width: 17vw;}
.tool li span{font-size: 2.9vw;}

.tool1{top: -2vw;left: -2vw;}
.tool2{top: -2vw;right: -2vw;}
.tool3{bottom: -2vw;left: -2vw;}
.tool4{bottom: -2vw;right: -2vw;}
 


.sub_con1{padding: 16vw 0 27vw;}
.sub_con1 .process{margin: 8vw 0 17vw;}
.sub_con1 .process.x3 li p{padding-right: 0;}
.sub_con1 .sub_tit2{margin-bottom:25px;}

.sub_con1 .icon_box li{padding:3vw 2vw 0}

.sub_con2{}
.sub_con2 .process{margin-top:8vw;}
    .sub_con2 .process ul{margin: 0 -2vw;}
.sub_con2 .process li {width:28.4vw;}
.sub_con2 .process li div{padding: 4vw 2.5vw; border-radius:18px;}
.sub_con2 .process h6{font-size: 3.3vw;}
.sub_con2 .process span{font-size: 1.9vw;}

.sub_con4  {padding:16vw 0 29vw}
    
.sub_con6 img{display:block;margin-top: 3.5vw;} 
}

@media (max-width: 649px){
/*mb*/
  

.sub_visual{background:url(/edu/images/mb/ontact/visual.png) no-repeat 50%; background-size:cover !important;}
 




.icon_box{padding-top:5vw;height: 22vw;}
.icon_box h6{font-size: 5vw;}
.icon_box ul{margin-top: 3.5vw; padding:0}
.icon_box li{padding-top: 3vw;border-radius: 2vw;width: 19vw;height: 20vw;margin: 0 1.7vw;padding: 3vw 1vw 0;}
.icon_box.x3 li{width:380px; height:330px;}
.icon_box li img{margin: 0 auto 2.5vw;width: 5vw;}
.icon_box li span{font-size: 3vw;}
 
 

.quality {margin-top: 20vw;padding-bottom: 12vw;}
.quality li{width: 35vw;height: 35vw;margin-left: -5.5vw;border-radius: 50%;}
.quality .qua_con {border-radius:110px;}
.quality .qua_con h5{font-size: 6vw;}
.quality .qua_con span{margin: 1vw 0;font-size: 3.5vw;}
.quality .qua_con p{font-size: 3vw;padding: 0 6vw;}

.quality .q_add{width: 31vw;height: 17vw;border-radius: 1vw;}
.quality .q_add::after{width: 2vw;height: 2vw;margin-left: -1vw;background: url(../images/pc/ontact/arrow.png) no-repeat 50% 0%;background-size: 100%;}

.quality .q_add p{font-size: 3.5vw;}
.quality .q_add p strong{}

 
.quality .add1::after{top:100%;}
 
.quality .add2::after{bottom:100%;transform: rotate(180deg);}


.add1{top: -15vw;}
.add1_1,.add2_1{left: 16vw;}
.add1_2,.add2_2{left: 48vw;}
 
.add2{bottom: -1vw;}


.quality .fir .add1{margin-right:3vw;}
.quality .fir .add2{margin-right:3vw;}



.tool{padding: 1px;width: 66.5vw;margin: 9vw auto 0;height: 66.5vw;}
.tool>div h5{font-size: 9vw;}
.tool>div>span{margin: 0.5vw 0 2vw;font-size: 5vw;}
.tool li{height: 25vw;width: 25vw;}
.tool li span{font-size: 4.5vw;}

.tool1{top: -4vw;left: -4vw;}
.tool2{top: -4vw;right: -4vw;}
.tool3{bottom: -4vw;left: -4vw;}
.tool4{bottom: -4vw;right: -4vw;}
 


.sub_con1{padding: 16vw 0 27vw;}
.sub_con1 .process{margin: 8vw 0 17vw;}
.sub_con1 .process.x3 li p{padding-right:45px}
.sub_con1 .sub_tit2{margin-bottom:25px;}



.sub_con2{}
.sub_con2 .process{margin-top: 8vw;}
    .sub_con2 .process ul{margin: 0 -2vw;}
.sub_con2 .process li {width: 28.5vw;margin-bottom: 0;margin: 0 2vw;}
.sub_con2 .process li::after{display:block;top: 7vw;right: -2.7vw;font-size: 3vw;}
    .sub_con2 .process li.last::after{display:none;}
.sub_con2 .process li div{padding: 4vw 2.5vw; border-radius:18px;width: 100%;}
.sub_con2 .process h6{font-size: 3.3vw;}
.sub_con2 .process span{font-size: 1.9vw;}

.sub_con4  {padding:16vw 0 29vw}
    
.sub_con6 img{display:block;margin-top: 3.5vw;} 

}