* {
list-style: none;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.qa-container {
margin: 50px auto 0; width: 100%;
}
.qa-list:not(:first-child) {
margin-top: 10px;
}
.question-title {
background: #a481232e;
cursor: pointer;
font-size: 16px;
padding: 20px 40px;
position: relative;
}
.question-title:before {
position: absolute;
display: block;
content: 'Q';
top: 18px;
left: 12px;
color: #4459b6;
font-size: 18px;
}
.question-title:after {
position: absolute;
display: block;
content: '';
top: 35%;
right: 22px;
width: 8px;
height: 8px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(135deg);
transition: all .3s ease-in-out;
}
.question-title.open:after {
transform: rotate(-45deg);
top: 45%;
}
.answer-text {
border-left: 1px solid #DDD;
border-right: 1px solid #DDD;
border-bottom: 1px solid #DDD;
display: none;
padding: 20px 40px;
position: relative;
}
.answer-text:before {
position: absolute;
display: block;
content: 'A';
top: 18px;
left: 12px;
color: #4459b6;
font-size: 18px;
}
@media (max-width: 760px) {
.s_table table,
.s_table thead,
.s_table tbody,
.s_table th,
.s_table td,
.s_table tr {
display: block;
}
.s_table tr {
margin-bottom: 0.625em;
}
.s_table td {
word-break: break-word;
max-width: 100%;
display: block;
text-align: left;
}
.s_table td:before {
content: attr(data-label);
float: left;
font-weight: bold;
}
} table {
width: 100%;
overflow-x: auto; display: block; }
@media only screen and (max-width: 1085px) {
.td30, table td {
width: auto !important; }
}