@charset "utf-8";
.qnas { margin-top: 70px; }
.qnas .tit { text-align: center; margin-bottom: 50px; }
.qnas .tit p { color: #999; margin-bottom: 10px; }
.qnas> p { text-align: center; margin-bottom: 80px; padding: 0 20px; }
.qnas> ul { width: 1000px; margin: 0 auto; }
.qnas> ul li { display: flex; align-items: center; padding: 20px; width: 100%; border-bottom: 1px solid #999; }
.qnas> ul li span { flex-shrink: 0; width: 40px; height: 40px; background: #ddd; border-radius: 50%; font-size: 24px; font-weight: 600; line-height: 40px; margin-right: 40px; text-align: center; line-height: 40px; }


.qnas .contacts { display: flex; align-items: center; width: 35.416%; background: #F3F5F9; border-radius: 20px; padding: 30px 0; margin: 0 auto 50px; }
.qnas .contacts ul { display: flex; flex-direction: column; align-items: center; width: 50%; border-right: 1px solid #999; padding: 0 30px; }
.qnas .contacts ul li { display: flex; align-items: center; }
.qnas .contacts ul> :first-child { margin-bottom: 20px; }
.qnas .contacts ul li span { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(153, 153, 153, 0.15); margin-right: 20px; }
.qnas .contacts ul li span i { font-size: 24px; color: #333; }
.qnas .contacts ul li div a { display: block; font-size: 20px; }
.qnas .contacts ul li div :first-child { margin-bottom: 10px; }
.qnas .contacts ul li span svg { width: 24px; height: 24px;color: #333; }
.qnas .contacts ul li p { font-size: 20px; }
.qnas .contacts> div { width: 50%; padding: 0 30px; }
.qnas .contacts div a { display: flex; flex-direction: column; align-items: center; }
.qnas .contacts div a i { font-size: 36px; margin-bottom: 15px; color: #333; }
.qnas .contacts div a p { font-size: 20px; }


@media screen and (max-width:1600px) { 
    .qnas .contacts { width: 55%; }
}


@media screen and (max-width:1040px) { 
    .qnas> ul { width: 100%; margin: 0 auto; padding: 0 20px; }
    .qnas> ul li span { margin-right: 20px; }
}

@media screen and (max-width:1024px) { 
    .qnas .contacts { width: 70%;}
    .qnas .contacts ul li span { margin-right: 15px; }
    .qnas .contacts ul li span i { font-size: 20px; }
    .qnas .contacts ul li div a { font-size: 18px; }
    .qnas .contacts ul li p { font-size: 18px; }
    .qnas .contacts div a p { font-size: 18px; }
}

@media screen and (max-width:840px) { 
    .qnas { margin: 0; }
}



@media screen and (max-width:600px) { 
    .qnas { margin-top: 50px; }
    .qnas> p br { display: none; }
    .qnas> ul li { padding: 15px 12px; }
    .qnas> ul li span { margin-right: 15px; width: 32px; height: 32px; line-height: 32px; font-size: 20px; }


    .qnas .contacts { flex-direction: column; padding: 30px 20px; margin: 0 auto 30px; }
    .qnas .contacts ul { width: 100%; border: none; border-bottom: 1px solid #999; padding: 0 0 20px 0; margin-bottom: 20px; }
    .qnas .contacts ul li { justify-content: center; }
    .qnas .contacts> div { width: 100%; padding: 0; }
    .qnas .contacts div a i { font-size: 32px; }

}

@media screen and (max-width:400px) { 

    .qnas .contacts { width: 80%; }
}