@media screen and (max-width: 768px)  {
    header .header-cover {
        padding: 20px;
    }
    header .header-cover .logo-box {
        font-size: 1em;
        width: 40%;
    }
    header .header-cover nav {
        width: 100%;
        position: fixed;
        height: 100vh;
        display: block;
        padding: 30px 0px 10px;
        background: url(../../assets/img/banner2.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        left: -100%;
        top: 0;
        transition: .5s;
        z-index: 2;
    }
    header .header-cover nav.active {
        left: 0;
    }
    header .header-cover nav::after {
        position: absolute;
        top: 0;
        left: 0;
        content: close-quote;
        background: rgba(0,0,0, .1);
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    .banner > img {
    opacity: .4;
}

header .header-cover nav .left-nav,
header .header-cover nav .right-nav {
    display: block;
    width: 90%;
}    
header .header-cover nav .right-nav a{
    display: block;
    margin: 20px;
    width: 80%;
}
    header .header-cover nav a {
        color: #ccc;
        display: block;
        padding: 30px;
        z-index: 4;
    }
    .banner > img {
        object-fit: cover;
    }
    .banner .text h1 {
        font-size: 2em;
        margin: 20px auto;
    }    
    .banner .text h3 {
        font-size: 1em;
    }
    .intro-cover {
        width: 100%;
        grid-template-columns: 1fr;
        padding: 10px; 
    }
    .intro-cover .text-cover {
        padding: 10px;
    }
    .intro-cover .text-cover h1 {
        font-size: 1em;
        margin: 20px auto;
    }
    
    .intro-cover .text-cover p {
        margin: 20px auto;
    }
    
    .intro-cover .img-cover {
        display: grid;
        place-items: center;
    }
    .intro-cover .img-cover img {
        height: 300px;
        object-fit: contain;
        display: block;
        margin: auto;
    }
    .title {
        padding: 20px;
        text-align: center;
    }
    .form-container form {
        display: block;
        padding: 20px;
        margin: 10px auto;
    }
    .form-container input,
    .form-container textarea {
        text-align: center;
        width: 100%;
    }
    .form-container .field {
        width: 100%;
        margin: 20px auto;
    }
    
    .form-container button {
        width: 80%;
        padding: 20px;
        margin: auto;
        display: block;
        font-size: 1em;
    }
    .news-covers {
        grid-template-columns: repeat(1, 1fr);
        grid-row-gap: 1em;
        grid-auto-rows: auto;
        padding: 10px ;
    }
    .news-covers .news {
        grid-template-columns: 1fr;
    }
    .news-covers .news .img-cover{
        position: relative;
        height: 200px;
    }
    .news-covers .news .text-cover {
        padding: 10px;
    }
    .news-covers .news .text-cover p {
        margin: 10px auto;
    }
    .last-part {
        padding: 20px;
        grid-template-columns: 1fr;
    }
    .last-part .contents .part {
        padding: 20px 0px;
    }
    
    .last-part .contents  img {
        margin: 20px auto;
        padding: 40px 0px;
    }
    .last-part .stat h1 {
        font-size: 2em;
    }
    footer .img-cover img {
    }
    .footer-cover {
        padding: 20px;
        display: block;
    }
    .footer-cover .nav {
        width: 100%;
        margin: 20px auto;
        justify-content: space-between;
    }
    .toggle{
        display: block;
        position: absolute;
        top: 30px;
        right: 15px;
        z-index: 999999;
    }
    .toggle span {
        display: block;
        width: 30px;
        height: 4px;
        margin-bottom: 4px;
        background: #ccc;
        transition: .3s ease all;
        border-radius: 30px;
    }
    .toggle span:nth-child(1) {
        width: 20px;
    }
    .toggle span:nth-child(2) {
        width: 25px;
    }
    .toggle.toggled span:nth-child(1) {
        transform: rotate(45deg) translateY(16px);
        width: 35px;
    }
    .toggle.toggled span:nth-child(2) {
        opacity: 0;
    }
    .toggle.toggled span:nth-child(3) {
        transform: rotate(-45deg) translateY(-10px) translateX(-3px);
        width: 32px
    }
    .donate-container .donate-cover {
        width: 90%;
	   background: #fff;
	   padding: 60px 30px;
	   text-align: center;
	   position: relative;
    }
    .donate-container .donate-cover input {
        width: 100%;
    }
    .benefits {
        grid-template-columns: 1fr;
        padding: 30px ;
        margin: 20px auto;
    }
    .title a {
        width: 80%;
    }
    .benefit {
        margin: auto;
    }
    .benefit .text-cover p {
        font-size: .9em;
    }
    .donate-cover button {
        width: 90%;
    }
    .form-cover {
	background: url(../../assets/img/dark-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 20vh;
}

.form-intro {
	display: grid;
	grid-template-columns: 1fr;
	width: 98%;
	margin: 20px auto;
}

.form-intro .img-cover img {
	width: 90%;
	height: 200px;
	display: block;
	margin: auto;
}
.form-intro .text-cover h1 {
	font-size: 1.5em;
	text-align: center;
}
.text-cover {
    width: 95%;
    padding: 10px;
}

.form-intro .text-cover p {
    font-size: .85em;
}
.main-form .form-pages {
	width: 90%;
	padding-bottom: 80px;
}
.main-form .form-pages p {
	margin: 20px auto;
	font-size: .7em;
}
.main-form .form-pages .row {
	grid-template-columns: 1fr;
}
.main-form .form-pages .field input,
.main-form .form-pages .field select {
	border: 1px solid #999;
	padding: 15px;
}
.card-cover {
	grid-template-columns: 1fr;
}
.card-cover .card {
	width: 85%;
}
.card-cover .card.done {
	background: #444;
}
.card-cover .card i {
	font-size: 2em;
}
.card-cover .card.done i{
	display: block;
}
.card-cover .card .card-title p {
	font-size: 1.1em;
	font-weight: bold;
	color: var(--site-color);
	margin: 20px auto;
}

.form-pages .btn-area {
	width: 100%;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.form-pages .btn-area a {
	width: 45%;
    font-size: .8em;
}
.form-pages .btn-area button {
    font-size: .8em;
    width: 45%;
}
.form-steps {
	width: 95%;
    grid-template-columns: repeat(3, 1fr);
}
.form-steps .form-step i {
	width: 50px;
	height: 50px;
    font-size: 1em;
}
.form-steps .form-step p {
    font-size: .7em;
}
.form-steps .form-step::before,
.form-steps .form-step::after {
	top: 32%;
}
.form-page {
	display: none;
}
.form-page.active {
	display: block;
}
.error-container {
	text-align: center;
	color:var(--site-color);
	font-size: 1.2em;
	padding: 15px;
}

header .header-cover nav.form-nav {
    padding-top: 20vh;
	width: 100%;
}
.page-banner h1 {
	font-size: 2em;
}
.join-banner a {
	width: 50%;
	font-size: 1em;
}

form > label {
	width: 80%;
}
.payment-modal-container .payment-modal-cover {
	width: 95%;
}
.payment-modal-cover .details {
       padding: 20px;
       text-align: center;
   }
   .payment-modal-cover .details p {
       color: var(--site-color)
   }
   .payment-modal-cover .note {
       width: 95%;
    }
   .payment-modal-cover .note a {
       color: var(--site-color);
   }
   .acc .acc-ans .field h3 {
       line-height: 2;
       word-break: break-word;
   }
   .verify-container .verify-cover {
	width: 90%;
	padding: 20px;
}

.verify-container .verify-cover input {
	width: 90%;
}
.verify-container .verify-cover .close-code {
	font-size: 1.5em;
}
}