@media (max-width: 799px){

header{
  width:97%;
  margin-right:auto;
  margin-left:auto;
}

.main-container{
  width:97%;
  margin-right:auto;
  margin-left:auto;
}

.div-10{
  margin-top:20px;
  margin-bottom:30px;
}


.div-10-1{
  border:2px solid red;
  border-radius:10px;
  margin-bottom:30px;
  margin: 0 auto 0 auto;
  /* width: 700px; */
}

.div-10-1-1{
  background-color:red;
}

.div-10-1-1 h1{
  font-size:28px;
  font-weight:bold;
  color:gold;
  margin:0;
  text-align:center;
  letter-spacing: 0.1rem;
}

.div-10-1-2 h2{
  font-size:46px;
  font-weight:bold;
  transform: scale(1, 1);
  color:red;
  margin:0;
  text-align:center;
}
.div-10-1-2 p{
  color:red;
  font-size:14px;
  text-align:center;
  padding:0;
  margin:0px;
  /* line-height: 0.7rem; */
}




.div-10-2{
  margin-top:30px;
}

.div-10-2-1{
  margin-right: 25px;
  text-align:center;
  margin:auto;
}

.div-10-2-1 h2{
  margin:0;
  color:white;
  background-color:blue;
  font-size:30px;
}

.div-10-2-1 p{
  margin:0 0 10px 0;
  font-size:20px;
  background-color:blue;
  color:white;
}

.div-10-2-1 img{
  /* height:250px; */
  width:80%;
}


.div-10-2-2 ul{
  padding:0 20px;
}
.div-10-2-2 li{
  list-style-type: none;
  font-size: 26px;
  font-weight: bold;
  color:#444;
  padding: 10px;
  border: rgb(126,126,126) solid 4px;
  border-radius: 15px;
  margin-top: 10px;
  text-align:center;
  border-left: 20px solid  rgb(126,126,126);
  
}

.hr-1{
  border-top: 1px solid #474858;
  border-bottom: 2px solid rgb(189, 187, 189);
  width: 90%;
}

.div-20{
  margin:20px auto ;
}

.div-20-1 h2{
  text-align:center;
  background-color:#555;
  color:gold;
  margin:0 0 20px 0;
  border-radius:10px;
  padding:10px;
  font-size:28px;
}


.div-20-2{
  /* width:700px; */
  width:90%;
}

.div-20-2-1{
  margin-bottom: 40px;
}


.div-20-2-1 h3{
  width:80%;
  font-size:22px;
  font-weight:bold;
  background-color:#777777;
  border-radius:20px;
  color:white;
  padding:3px 20px 3px 20px;
  margin:auto;

}


.div-20-2-1 p{
  font-size:18px;
  color:#555555;
  width:90%;
  margin:20px auto 0 auto;
}

.div-20-2-1 span{
  font-weight:bold;
}




.div-30-1{
  margin:0 auto 20px;
  background:#008000;
  /* width:700px; */
  border-radius: 4px;
  text-align:center;
}

.div-30-1 h2{
  color:white;
  padding: 5px 0 5px 30px;
  margin:0;
}
.div-30-1 span{
  display:none;
}

.div-30-2{
  /* width:700px; */
  /* margin:0 auto; */
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
}

.div-30-2-1{
  border:2px solid green;
  border-radius:14px;
  margin-bottom: 20px;
  width:45%;
  height:170px;
  position:relative;
}

.div-30-2-1 img{
  width:90%;
  position:absolute;
  left:0;
  right:0;
  margin:auto;
  padding-top:10px;
}

.div-30-2-1 p{
  position:absolute;
  font-size:20px;
  font-weight:bold;
  color:#777;
  bottom:7px;
  left:0;
  right:0;
  text-align: center;
  margin:0;  
}



}







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


.div-10{
  margin-top:20px;
  margin-bottom:30px;
}


.div-10-1{
  border:2px solid red;
  border-radius:10px;
  margin-bottom:30px;
  margin: 0 auto 0 auto;
  width: 80%;
  max-width: 700px;
}

.div-10-1-1{
  background-color:red;
}

.div-10-1-1 h1{
  font-size:28px;
  font-weight:bold;
  color:gold;
  margin:0;
  text-align:center;
  letter-spacing: 0.1rem;
}

.div-10-1-2 h2{
  font-size:46px;
  font-weight:bold;
  transform: scale(1, 1);
  color:red;
  margin:0;
  text-align:center;
}
.div-10-1-2 p{
  color:red;
  font-size:14px;
  text-align:center;
  padding:0;
  margin:0px;
  /* line-height: 0.7rem; */
}




.div-10-2{
  margin-top:30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.div-10-2-1{
  margin-right: 25px;
}

.div-10-2-1 h2{
  margin:0;
  font-size:30px;
  color:#555;
}

.div-10-2-1 p{
  margin:0 0 10px 0;
  font-size:20px;
  color:#555;
}

.div-10-2-1 img{
  height:250px;
}


.div-10-2-2 ul{
  padding:0 20px;
}
.div-10-2-2 li{
  list-style-type: none;
  font-size: 26px;
  font-weight: bold;
  color:#444;
  padding: 10px;
  border: rgb(126,126,126) solid 4px;
  border-radius: 15px;
  margin-top: 10px;
  text-align:center;
  border-left: 20px solid  rgb(126,126,126);
  
}

.hr-1{
  border-top: 1px solid #474858;
  border-bottom: 2px solid rgb(189, 187, 189);
  width: 90%;
}

.div-20{
  width:90%;
  max-width: 800px;
  margin:20px auto ;
}

.div-20-1 h2{
  background-color:#555;
  color:gold;
  margin:0 0 20px 0;
  border-radius:40px;
  padding:10px 10px 10px 40px;
  font-size:28px;
}


.div-20-2{
  width:80%;
  max-width: 700px;
}

.div-20-2-1{
  margin-bottom: 40px;
}


.div-20-2-1 h3{
  width:50%;
  font-size:22px;
  font-weight:bold;
  background-color:#777777;
  border-radius:40px;
  color:white;
  padding:3px 40px 3px 40px;
  margin:0;

}


.div-20-2-1 p{
  font-size:18px;
  color:#555555;
}

.div-20-2-1 span{
  font-weight:bold;
}




.div-30-1{
  margin:0 auto 20px;
  background:#008000;
  width:70%;
  max-width: 700px;
  border-radius: 4px;
  text-align:center;
}

.div-30-1 h2{
  color:white;
  padding: 5px 0 5px 30px;
  margin:0;
}
.div-30-1 span{
  font-size:20px;
  font-weight:normal;
  color:white;
}

.div-30-2{
  width:70%;
  max-width: 700px;
  margin:0 auto;
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
}

.div-30-2-1{
  border:2px solid green;
  border-radius:14px;
  margin-bottom: 20px;
  width:30%;
  max-width: 220px;
  height:220px;
  position:relative;
}

.div-30-2-1 img{
  width:90%;
  /* display:block; */
  position:absolute;
  left:0;
  right:0;
  margin:auto;
  padding-top:20px;
}

.div-30-2-1 p{
  position:absolute;
  font-size:20px;
  font-weight:bold;
  color:#777;
  bottom:10px;
  left:0;
  right:0;
  text-align: center;
  margin:0;  
}


}