body { color: #333; } .qa-content { margin-top: 70px; margin-bottom:100px; } .qa-content > .container { display: flex; } .qamenu { width: 300px; padding: 0 15px 20px; flex-shrink: 0; margin-right: 25px; } .qamenu > ul > li { font-weight: bold; font-size: 20px; line-height: 26px; } .qamenu > ul > li.active { color: #2D4EC4; } .qamenu > ul > li:not(:first-child) .title { border-top: 1px #D6D6D6 solid; margin-top: -1px; } .qamenu .title { line-height: 70px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px #D6D6D6 solid; padding: 0 15px 0 5px; } @media (max-width:768px) { .qa-content > .container { flex-wrap: wrap; } .container { max-width: 100%; width: 100%; } .qa-content { margin-top: 10px; margin-bottom: 30px; } .qamenu { width: 100%; } .title { line-height: 60px; } .qamenu > ul > li:last-child .title { border-bottom: none; } } .title.collapse img { transition: transform 0.1s linear; transform: rotate(-90deg); } .title img { transition: transform 0.1s linear; transform: rotate(0deg); } .qamenu .sub { font-size: 15px; color: #333333; line-height: 37px; padding: 13px 0; margin-left: 26px; display: none; font-weight:normal; } .qamenu .sub li.active a { color: #2D4EC4; } .qamenu a:hover, .qamenu a:active, .qamenu a:focus { color: #2D4EC4; } .qalist { flex: 1; } .qalist .item .q { line-height: 80px; height: 80px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px #E6E6E6 solid; border-top: 1px #E6E6E6 solid; padding-left: 28px; padding-right: 20px; margin-top:-1px; } .qalist .item.active .q { background: #2D4EC4; } .qalist .item .q span { font-weight: 500; font-size: 18px; color: #333333; line-height: 28px; } .qalist .item .q .arrow-icon2 { width: 19px; height: 19px; margin-right: 6px; margin-left: 28px; background-image: url("/images/arrow-bottom.png"); background-position: center; background-repeat: no-repeat; } .qalist .item .q .arrow-icon { width: 22px; height: 22px; margin-right: 6px; margin-left: 28px; background-image: url("/images/q.png"); background-position: center; background-repeat: no-repeat; } .qalist .item.active .q span { color: #fff; } .qalist .item.active .q .arrow-icon2 { background-image: url("/images/arrow-bottom2.png") } .qalist .item.active .q .arrow-icon { background-image: url("/images/q1.png") } .qalist pre { word-wrap: break-word; white-space: pre-wrap; font-weight: 400; font-size: 16px; color: #333333; line-height: 35px; font-family: inherit; } .qalist .a { padding: 22px 53px 39px; display: none; } @media (max-width:768px) { .qalist .item .q { padding-left: 0px; padding-right: 20px; } .qalist .a { padding: 12px 15px ; display: none; } } .qalist .item.active .a { display: block; } .qalist .item.active .arrow-icon2 { transition: transform 0.1s linear; transform: rotate(-180deg); } .qalist .item .arrow-icon2 { transition: transform 0.1s linear; transform: rotate(0deg); } .qalist .item.active .q { transition: background-color 0.1s; background: #2D4EC4; } .qalist .item .q { transition: background-color 0.1s; background: #fff; } .empty-data { margin: 50px; text-align: center; }