.main-color {
    color: rgb(60, 198, 196);
}
main > section{
}
main > section:nth-child(2n-1) {
  /* background: rgb(247, 253, 253); */
}
main > section > div {
  padding: 1rem 28rem;
  display: flex;
  justify-content: space-between;
}

main > section:nth-child(2n) > div {
  flex-direction: row-reverse;
}



main >section .book_class{
  display: flex;
  flex-direction: column;
  margin: 8rem 0rem;
}
main >section .book_class:nth-child(2){
    background: rgb(248 255 255);
}
main >section .book_desc{
  display: flex;
  flex-direction: row;
}
main > section > div .book {
  flex-basis: 28rem;
  margin-right: 10rem;
}
main > section > div .book > img {
  width: 100%;
}
main > section > div .book + div {
  width: calc(100% - 40rem);
}
main > section + section > div .book {
  flex-basis: 40rem;
}

main > section .function{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
main > section .function img{
  height: 10rem;
}
main > section .function >div:nth-child(1){
    margin-right: 3rem;
    text-align: center;
}

main > section .function >div:nth-child(1) >div{
  margin-bottom: 2rem;
}

main .description{
  font-weight: 700;
}

main > section > div .mentor .tutor{
  display: flex;
  flex-direction: row;
  /*align-items: center;*/
  width: 50%;
}

main > section > div .mentor .tutor p{
    line-height: 2rem;
    font-size: 1.3rem;
    letter-spacing: 0.2em;
    padding: 1rem 2rem 1rem;
}

main > section > div .mentor {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
main > section > div .mentor .title + div {
  display: flex;
  justify-content: space-between;
}
main > section > div .mentor .title + div > div {

}
main > section > div .mentor img {
  height: 15rem;
}
main {
  letter-spacing: 0.2em;
  font-size: 1.4rem;
}
h2 {
  position: relative;
  font-weight: 500;
  margin-bottom: 3rem;
}
h2::before {
  position: absolute;
  left: 0;
  bottom: -1.5rem;
  content: "";
  width: 14rem;
  height: 0.4rem;
  border-radius: 0.5rem;
  background: rgb(57, 198, 195);
}
.desc {
  margin-bottom: 3rem;
}
.desc ul {
  list-style-type: none;
}
.function p {
  margin-bottom: 3rem;
  line-height: 2em;
  font-size: 1.3rem;
  letter-spacing: 0.2rem;
}
.function p:last-child {
  margin: 0;
}
main ol {
  list-style-type: revert;
}
main li {
  margin: 0.5rem 0;
  list-style-position: inside;
}
.title {
  margin: 2rem 0 1rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(60, 198, 196);
  font-size: 1.4rem;
}
.title::before,
.title::after {
  position: absolute;
  top: 50%;
  content: "";
  width: 23%;
  height: 0.1rem;
  background-color: rgb(60, 198, 196);
}
.title::before {
  left: 20%;
}
.title::after {
  right: 20%;
}
.title + div {
  letter-spacing: 0.3em;
}
.mentor span {
  line-height: 2em;
}
.content {
  margin-top: 3rem;
  line-height: 2em;
}
.content span {
  position: relative;
  padding-left: 1.8rem;
}
.content span::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-40%);
  content: "";
  width: 1rem;
  height: 1rem;
  background: black;
}


@media only screen and (max-width: 875px){
	body main > section > div{
		    padding: 1rem 2rem;
	}

}


@media only screen and (max-width: 490px){
	html {
	    height: 100%;
	    font-size: 12px;
	    -webkit-text-size-adjust: 100%;
	}
	body h2 {
		position: relative;
		font-weight: 500;
		margin-bottom: 3rem;
		font-size: 1.5rem;
	}
	body main > section > div{
		    padding: 1rem 2rem;
	}
	body main .description,body main li,body .function p:last-child{
		line-height: 1.7;
		font-size: 1rem;
		letter-spacing: 0.1em;
	}
	body main >section .book_class{
		    margin: 2rem 0rem;
	}
	body main >section .book_desc{
		    flex-direction: column;
	}
	body main > section > div .book{
		margin-right: 0;
		text-align: center;
	}
	body main > section > div .book > img{
		    width: 80%;
	}
	body main > section > div .book + div{
		width: 100%;
	}
	body main > section > div .mentor .tutor{
		flex-direction: column;
		width: 100%;
	}
	body main > section > div .mentor .title + div{
		flex-direction: column;
	}
	body main > section > div .mentor .tutor p{
		line-height: 1.7;
		font-size: 1rem;
		letter-spacing: 0.1em;
	}
	body main > section > div .mentor img{
		height: inherit;
         	position: relative;
		left: 25%;
		width: 50%;
	}
	body main .title::before, .title::after{
		width: 18%;
	}
}