*,
::before,
::after {
   margin: 0;
   padding: 0;
   box-sizing: inherit;
}

html {
   font-family: Arial;
   /* font-size: 16px; */
   font-size: 20px;
   font-weight: normal;
   box-sizing: border-box;
}

.learnContainer {
   display: flex;
   position: relative;
   flex-flow: column;
   justify-conent: space-around;
   align-items: center;
   margin-left: auto;
   margin-right: auto;
   width: 100%;   
}

.learnContainer img {
   width: 100%;
   height: auto;
}

.learnContainer p {
   display: flex;
   position: relative;
   padding-top: 4vw;
   margin-bottom: 5vw;
   color: #0076C6;
   /* font-size: calc( 1.75rem + (2.75 - 1.75) * ((100vw - 28rem) / (77.5 - 28))); */
   font-size: calc( 1.4rem + (2.2 - 1.4) * ((100vw - 28rem) / (77.5 - 28)));
   text-align: center;
}

section {
   display: flex;
   justify-content: center;
   height: auto;
   background-color: #FFFFFF;
}

.wrapper {
   width: 94vw;
   margin: 0 auto;
   padding: 0 1rem;
}

.wrapper .accordion,
.wrapper .sub-accordion {
   background-color: #FFFFFF;
   padding: 1vw;
   border-bottom: 1px solid #0076C6;
}

.wrapper .accordion label,
.wrapper .sub-accordion label {
   display: flex;
   position: relative;
   align-items: center;
   justify-content: space-between;
   background: #FFFFFF;
   cursor: pointer;
   width: 100%;
   padding: 1vw 0;
}

.accordion input:checked ~ label
.sub-accordion input:checked ~ label {
   border-radius: 3px 3px 0 0;
   background: #006fe6;
}

.wrapper label span {
   color: #0076C6;
   /* font-size: calc( 1.125rem + (1.625 - 1.125) * ((100vw - 28rem) / (77.5 - 28))); */
   font-size: calc( 0.9rem + (1.3 - 0.9) * ((100vw - 28rem) / (77.5 - 28)));
   font-weight: 600;
}

.wrapper .sub-accordion label span{
  /* font-size: calc( 1.125rem + (1.625 - 1.125) * ((100vw - 28rem) / (77.5 - 28))); */
  font-size: calc( 0.9rem + (1.3 - 0.9) * ((100vw - 28rem) / (77.5 - 28)));
}

.accordion label .icon {
   position: relative;
   width: 1.875rem;
   height: 1.875rem;
   color: #0076C6;
   /* font-size: 0.95rem; */
   font-size: 0.76rem;
   /* font-size: calc( 0.82rem + (0.95 - 0.82) * ((100vw - 28rem) / (77.5 - 28))); */
   display: block;
   background: #FFFFFF;
}

.wrapper .sub-accordion label .icon {
   width: 1.7rem;
   height: 1.7rem;
}

.accordion label .icon i {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.accordion input:checked ~ label .icon i:before,
.sub-accordion input:checked ~ label .icon i:before {
   content: '\f068'
}

.wrapper .accordion .answer,
.wrapper .sub-accordion .sub-answer {
   max-height: 0px;
   overflow: hidden;
   background: #FFFFFF;
   border-radius: 0 0 0.2rem 0.2rem;
}

.accordion input:checked ~ .answer,
.sub-accordion input:checked ~ .sub-answer {
   max-height: 100vh;
   max-height: max-content;
}

.tab-1 input:checked ~ .answer {
  padding: 1vw 1.2vw;
}

.accordion .answer p,
.sub-accordion .sub-answer p {
   /* font-size: calc( 1.125rem + (1.4 - 1.125) * ((100vw - 28rem) / (77.5 - 28))); */
   font-size: calc( 0.9rem + (1.12 - 0.9) * ((100vw - 28rem) / (77.5 - 28)));
   color: #0076C6;
   padding: 1vw 2vw;
}

.sub-accordion .sub-answer p {
   /* font-size: calc( 1.125rem + (1.4 - 1.125) * ((100vw - 28rem) / (77.5 - 28))); */
   font-size: calc( 0.9rem + (1.12 - 0.9) * ((100vw - 28rem) / (77.5 - 28)));
}

.sub-accordion .sub-answer a {
   color: #0076C6;
   font-size: calc( 0.9rem + (1.12 - 0.9) * ((100vw - 28rem) / (77.5 - 28)));   
}

.sub-accordion .sub-answer ul {
   margin: 0 1.25rem;
   padding: 0.94rem 1.75rem;
   /* font-size: calc( 1.125rem + (1.4 - 1.125) * ((100vw - 28rem) / (77.5 - 28))); */
   font-size: calc( 0.9rem + (1.12 - 0.9) * ((100vw - 28rem) / (77.5 - 28)));
   color: #0076C6;
}

.answer p i,
.sub-answer p i {
   /* font-size: calc( 0.75rem + (0.95 - 0.75) * ((100vw - 28rem) / (77.5 - 28))); */
   font-size: calc( 0.6rem + (0.76 - 0.6) * ((100vw - 28rem) / (77.5 - 28)));
}

.sub-answer ul i {
   /* font-size: calc( 0.75rem + (0.95 - 0.75) * ((100vw - 28rem) / (77.5 - 28))); */
   font-size: calc( 0.6rem + (0.76 - 0.6) * ((100vw - 28rem) / (77.5 - 28)));
}

.sub-answer .ans-list {
   padding-top: 1rem;
   padding-bottom: 1rem;
   color: #0076C6;
   text-align: left;
}

input[type="checkbox"] {
   display: none;
}

.wrapper input {
   display: none;
}

@media screen and (min-width:480px) {
   
   .mobile-break {
      display: none;
   }
}

@media all and (max-width:480px) {

   .learnContainer p {
      /* font-size: 1.375rem; */
      font-size: 1.1rem; 
   }

   .wrapper label span {
      /* font-size: 1.125rem; */
      font-size: 0.9rem;
   }

   .wrapper .sub-accordion label span {
     /* font-size: 1.063rem; */
     font-size: 0.85rem;
   }

   .accordion label .icon {
      /* font-size: 0.63rem; */
      font-size: 0.5rem;
   }
   
   .tab-1 input:checked ~ .answer {
      padding: 0.5vw 0.7vw;
   }

   .accordion .answer p,
   .sub-accordion .sub-answer p {
      /* font-size: 1.125rem; */
      font-size: 0.9rem;
   }

   .sub-accordion .sub-answer p {
      /* font-size: 1.125rem; */
      font-size: 0.9rem;
   }
   
   .sub-accordion .sub-answer a {
      font-size: 0.9rem;   
   }

   .sub-accordion .sub-answer ul {
      /* font-size: 1.125rem; */
      font-size: 0.9rem;
   }

   .answer p i,
   .sub-answer p i {
      /* font-size: 0.75rem; */
      font-size: 0.6rem;
   }
   
   .sub-answer ul i {
      /* font-size: 0.75rem; */
      font-size: 0.6rem;
   }
}