body{
    margin:0;
    padding:0;
    font-family:sans-serif;
    background:var(--container);
}
* {
    --text:#1B374D;
    --btn:#406882;
    --secondary:#6998AA;
    --border:gainsboro;
    --hover:#29B2FF;
    --container:rgb(214, 213, 213);
}
.problem-c{
    width:100%;
    padding:10px 0px;
    box-sizing:border-box;
    text-align:center;
    color:#fff;
    background:red;
}
.load-data{
    position:fixed;width:100vw;height:100vh;color:#1B374D;display:flex;justify-content:center;align-items:center;background-color:rgb(214, 213, 213);z-index:1000;top:0;font-size:2rem;
}
button{
    font-size:.8rem;
    border:none;
    background:var(--btn);
    color:white;
    padding:.5rem;
    border-radius:5px;
    cursor: pointer;
    outline:none;
}
.modal-c{
    position:fixed;
    overflow: hidden;
    width:100%;
    top:-1000vh;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap: wrap;
    transition-duration:.5s;
}
.article-modal-c{
    width:50vw;
    background-color:green;
    color:lightgreen;
    text-align:center;
    padding:2.5vh 0;
    font-size:1rem;
    border-radius:0px 0px 10px 10px;
}
.modal-show-class{
    top:0;
}
.poster-c{
    width:95vw;
    box-sizing:border-box;
    height:60vh;
    padding:2vh 2.5vw;
    background:url("/image/poster.webp");
    margin:auto;
    margin-top:30px;
    border-radius:10px;
    animation:  poster 20s infinite;
    overflow:hidden;
}
.poster-c > h2,.poster-c > p{
    color:white;
}
@keyframes poster{
    0%{
        background-position-x:left;
        background-position-y:top;
    }12.5%{
        background-position-x:left;
        background-position-y:50%;
    }25%{
        background-position-x:left;
        background-position-y:bottom;
    }
    37.5%{
        background-position-x:50%;
        background-position-y:bottom;
    }
    50%{
        background-position-x:50%;
        background-position-y:50%;
    }
    62.5%{
        background-position-x:50%;
        background-position-y:top;
    }
    75%{
        background-position-x:100%;
        background-position-y:top;
    }
    87.5%{
        background-position-x:right;
        background-position-y:50%;
    }
    100%{
        background-position-x:right;
        background-position-y:bottom;
    }
} 

.main-item-c{
    width:95vw;
    box-sizing:border-box;
    padding:3vh 5vw;
    margin:auto;
    border-radius:14px;
    background:white;
    margin-top:30px;
    margin-bottom:30px;
}
.main-item-c > h2{
    width:100%;
    color:var(--text);
    padding-bottom:1rem;
    border-bottom:1px solid var(--border);
    font-size:1.5rem;
}
.my-article-c > p{
    text-align:center;
}
.article-c{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
#more-article-btn{
    display:block;
    margin:auto;
    margin-top:20px;
}

.explain-c{
    font-size:.8rem;
    position: relative;
    margin-bottom:50px;
}
.explain-item{
    width:100%;
    height:38vh;
    overflow: hidden;
    position: relative; 
    overflow: hidden;
    border-radius:14px;
}
.explain-sec-class{
    height:auto;
}
.explain-c::after{
      content: "";
  position: absolute;
  bottom:-20px;
  left: 0;
  width:95vw;
  height: 100px;
  border-radius:14px;
 background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 40%,
    rgba(255,255,255,0.9) 70%,
    rgba(255,255,255,1) 100%
  );
}
#expand-btn{
    display:block;
    position:absolute;
    z-index:10;
    padding:.5rem .7rem;
    left:45vw;
    bottom:-2rem;
    outline:none;
}


@media (min-width:1200px){
    html{
        font-size:112.5%;
    }
}

@media (min-width:767px) and (max-width:1199px){
    html{
        font-size:100%;
    }

}

@media (max-width:767px){
    html{
        font-size:87.5%;
    }
}