main > section > div {
  padding: 1rem 28rem;
  display: flex;
  justify-content: space-between;
}

h2 {
  position: relative;
  margin:0 auto; 
  font-weight: 500;
}
h2::before {
  position: absolute;
  left: -1rem;
  top: 0.5rem;
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: rgb(57, 198, 195);
}

.main-color {
    color: var(--main-color);
}

main .tearcher_desc{
  padding: 0 10rem;
}

main .tearcher_desc h3{
  text-align: center;
  align-items: center;
  margin-bottom: 1rem;
}

main .tearcher_desc img{
  width: 30rem;
}


main .tearcher_desc .experience{
  align-items: center;
}

main .experience:nth-child(2n+1){
    display: flex;
    flex-direction: row-reverse;
}

main .experience .space {
    width: 20%;
}





main .experience p{
    line-height: 3rem;
    font-size: 1.3rem;
    letter-spacing: 0.2em;
    padding: 1rem;
}

main .scond_section .perception{
  display: flex;
  flex-direction: column;
}
main .scond_section p{
    line-height: 3rem;
    font-size: 1.3rem;
    letter-spacing: 0.2em;
    padding: 1rem 3rem;
}






main .tearcher_desc .line{
    margin: 2rem 0 1rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(60, 198, 196);
    font-size: 1.4rem;
}


main .tearcher_desc .line::before{
    position: absolute;
    top: 50%;
    content: "";
    width: 100%;
    height: 0.2rem;
    background-color: rgb(60, 198, 196);
}







main .transition_line{
      margin: 2rem 0 1rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(60, 198, 196);
    font-size: 1.5rem;
}

main .transition_line::before {
    position: absolute;
    left: 0;
    top: 50%;
    content: "";
    width: 43%;
    height: 0.1rem;
    background-image: linear-gradient(to right, rgb(60, 198, 196) 0%, rgb(60, 198, 196) 50%, transparent 0%);
    background-size: 14px 1px;
    background-repeat: repeat-x;
}

main .transition_line::after {
    position: absolute;
    right: 0;
    top: 50%;
    content: "";
    width: 43%;
    height: 0.1rem;
    background-image: linear-gradient(to right, rgb(60, 198, 196) 0%, rgb(60, 198, 196) 50%, transparent 0%);
    background-size: 14px 1px;
    background-repeat: repeat-x;
}


main .transition{
    padding: 0 10rem;
}


main .transition img{
  width: 30rem;
}

main .transition .space {
    width: 30%;
}


main .transition p{
    line-height: 3rem;
    font-size: 1.3rem;
    letter-spacing: 0.2em;
	padding: 1rem;
}

main .tearcher_show{
    height: 54rem;
    background:url(../imgs/special_teacher/yu_cover_5.png) no-repeat 100%/100%;

    /*flex-direction: row-reverse;*/
}

main .tearcher_show >div{
    display: flex;
    flex-direction: column;
    margin: auto;
    align-items: flex-end;
}

main .tearcher_show p{
  width: 50%;
  padding: 0 5rem;
  color: white;
  line-height: 3rem;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
}


@media only screen and (max-width: 875px){
	body main > section > div{
		    padding: 1rem 2rem;
	}
	body main .tearcher_desc{
		padding: 1rem 2rem;
	}
	body main .experience:nth-child(2n+1){
		flex-direction: column;
	}
	body main .tearcher_desc .experience{
		    display: flex;
		    flex-direction: column;
	}
	body main .transition{
		padding: 1rem 2rem;
	}
	body main .transition>div:first-child{
		display: flex;
		flex-direction: column;
	}
	body main .tearcher_show{
		height: 54rem;
		background:url(../imgs/special_teacher/yu_cover_5.png);
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 54rem;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: transparent;
		background-position: 50% 50%;
	}
	 body main .tearcher_show p {
	    line-height: 3rem;
	    font-size: 1.3rem;
	    letter-spacing: 0.2em;
	    padding: 1rem;
	}
	body main > .highschool_desc{
		padding: 1rem 2rem;
		
	}
}

@media only screen and (max-width: 490px){
	html {
	    height: 100%;
	    font-size: 12px;
	    -webkit-text-size-adjust: 100%;
	}
	body main > section > div{
		    padding: 1rem 2rem;
	}
	body main .tearcher_desc{
		padding: 1rem 2rem;
	}
	body main .experience:nth-child(2n+1){
		flex-direction: column;
	}
	body main .tearcher_desc .experience{
		    display: flex;
		    flex-direction: column;
	}
	body main .transition>div:first-child{
		display: flex;
		flex-direction: column;
	}
	body main .experience p,body main .scond_section p{
		line-height: 1.7;
		font-size: 1rem;
		letter-spacing: 0.1em;
	}
	body main .transition_line::before ,body main .transition_line::after{
		width: 38%;
	}
	body main .transition p{
		line-height: 1.7;
		font-size: 1rem;
		letter-spacing: 0.1em;
	}
	body main .tearcher_show p{
		line-height: 1.7;
		font-size: 1rem;
		letter-spacing: 0.1em;
		width: 100%;
		align-items: normal;
	}
	body main .tearcher_show >div{
		align-items: normal;
	}
	body main .tearcher_show{
		    height: 28rem;
	}
}