.mainOne {
    margin-top: 3%;
}

.deTitle{
    display: grid;
    gap: 8%;
}

.deTitle::before ,.deTitle::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: var(--gray);
    margin: 2% 0;
}

.deTitle p {
    font-size: 28px;
}

.deTitle p:first-of-type {
    font-size: 24px;
}


.keywords {
    font-size: 18px;
    margin-top: 1%;
}

.keyword {
    font-weight: bold;
    color: var(--white);
    border-radius: 8px;
    background-color: var(--main);
    padding: 0.3% 0.8%;
}

.keyword::before {
    content: '#';
}

.deCont  {
    margin: 5%;
    font-size: 24px;
}

.deContBox {
    padding: 2% 0;
    line-height: 180%;
}

.deContBox ul.list li {
    display: grid;
    grid-template-columns: .1fr .5fr 1fr;
    gap: 3%;
    padding: 1% 0;
}

.deContBox ul.list li:not(:last-of-type) {
    border-bottom: 1px solid var(--gray);
}

.deContBox .list ul {
    padding: 1% 0;
}

@media screen and (max-width: 900px){
	.deContBox ul.list li {
    grid-template-columns: .1fr 1fr;
}
	span.num {
    grid-row: 1 / span 2;
}
	span.ftext {
		border-bottom: 1px solid var(--gray);
	}
}

@media screen and (max-width: 700px) {
    .deContBox {
        padding: 9% 0 0;
    }
}

@media screen and (max-width: 480px) {
	.deContBox .main {
		font-size: 24px;
	}
    .deCont {
        font-size: 21px;
    }
}

@media screen and (max-width: 420px) {
    .deContBox {
        padding: 18% 0 0;
    }
}