html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
body{
font-family: "PingFang SC-Regular", 黑体;
}
.diagnosis-1 .self-info-title span{
font-size: 16px;
}
.diagnosis-1 .div-line{
font-size: 14px;
height: 43px;
line-height: 44px;
}
.diagnosis-1 .not-rot{
padding: 0;
}
.diagnosis-1 .not-rot .div-line,
.diagnosis-1 .not-rot .add{
padding: 0 12px;
}
.diagnosis-1 .div-line input{
width:100%;
color: #333;
}
.diagnosis-1 .div-line span.fr{
width:80%;
color: #333;
}
.self-diagnosis-status {
width: 100%;
overflow: hidden;
}
@media screen and (min-width: 960px) {
.self-diagnosis-status{
width: 960px;
margin: 0 auto;
border: solid 1px #fff;
}
h3,.self-diagnosis-status li .diagnosis-box{
text-align: center;
}
.self-diagnosis-status ul.diagnosis-status div.photo-list:last-child {
margin-right: 0;
}
}
.self-diagnosis-status p {
font-size: 14px;
line-height: 1.5em;
color: #666;
}
.self-diagnosis-status p.text {
padding: 10px 12px;
}
.self-diagnosis-status ul.diagnosis-status {
/*background: #f6f6f6;*/
}
.self-diagnosis-status ul.diagnosis-status li {
margin-bottom: 12px;
background: #fff;
}
.self-diagnosis-status ul.diagnosis-status li:last-child {
margin-bottom: 0;
}
@media screen and (min-width: 375px) {
.self-diagnosis-status ul.diagnosis-status h3 {
font-size: 18px;
}
.self-diagnosis-status ul.diagnosis-status h3 span {
font-size: 18px;
}
.self-diagnosis-status ul.diagnosis-status p.diagnose-tip {
font-size: 14px;
}
}
@media screen and (max-width: 374px) {
.self-diagnosis-status ul.diagnosis-status h3 {
font-size: 14px;
}
.self-diagnosis-status ul.diagnosis-status h3 span {
font-size: 14px;
}
.self-diagnosis-status ul.diagnosis-status h4 {
font-size: 12px !important;
}
.self-diagnosis-status ul.diagnosis-status label {
font-size: 12px;
}
.self-diagnosis-status ul.diagnosis-status p {
font-size: 12px !important;
}
.self-diagnosis-status ul.diagnosis-status textarea {
font-size: 12px !important;
}
}
.self-diagnosis-status ul.diagnosis-status h3 {
padding: 0 12px;
font-family: "PingFang SC-Medium", 黑体;
color: #333;
height: 44px;
line-height: 44px;
border-bottom: solid 1px #f1f1f1;
font-weight: bold;
text-align: left;
}
.self-diagnosis-status ul.diagnosis-status h3 span {
font-family: "PingFang SC-Medium", 黑体;
color: #999;
margin-left: 8px;
}
.self-diagnosis-status ul.diagnosis-status h4 {
height: 38px;
border-bottom: solid 1px #f1f1f1;
line-height: 38px;
font-weight: bold;
color: #333;
}
.self-diagnosis-status ul.diagnosis-status h4 span {
font-family: "PingFang SC-Medium", 黑体;
color: #999;
margin-left: 8px;
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-14 h3:after {
content: '';
display: block;
width: 14px;
height: 8px;
margin-top: 19px;
margin-right: 5px;
background-image: url("../images/down.png");
background-size: 100% 100%;
float: right;
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-14 h3.chk:after{
background-image: url("../images/up.png");
}
.self-diagnosis-status ul.diagnosis-status label span {
color: #999;
margin-left: 8px;
}
.self-diagnosis-status ul.diagnosis-status p.diagnose-tip {
color: #999;
margin-top: 5px;
padding-bottom: 5px;
text-align: left;
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-8 > p.diagnose-tip {
margin-top: 0;
}
.self-diagnosis-status ul.diagnosis-status div.additional{
display: none;
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-additional div,
.self-diagnosis-status ul.diagnosis-status p, .self-diagnosis-status ul.diagnosis-status h4 {
font-size: 14px;
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-14 p.diagnose-tip {
padding: 0;
}
.self-diagnosis-status ul.diagnosis-status p {
margin-top: 10px;
padding-bottom: 10px;
color: #666;
line-height: 1.5em;
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-box {
padding: 5px 8px;
border-bottom: solid 1px #f1f1f1;
text-align: left;
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-box span {
font-size: 14px;
color: #666;
display: inline-block;
margin: 1px;
padding: 2px 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
/*border: solid 1px #dedede;*/
cursor: pointer;
text-align:center;
}
.diagnosis-10 .diagnosis-box span{
border:0 !important;
}
.diagnosis-7 .diagnosis-box span{
width:14.5%;
border:0 !important;
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-box span i {
width:50px;
height:68px;
display:block;
margin: 0 auto;
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-box span i.teeth_colour-1{
background-image: url("../images/teeth-colour-1.png");
background-size:100%;
background-repeat: no-repeat;
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-box span i.teeth_colour-2{
background-image: url("../images/teeth-colour-2.png");
background-size:100%;
background-repeat: no-repeat;
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-box span i.teeth_colour-3{
background-image: url("../images/teeth-colour-3.png");
background-size:100%;
background-repeat: no-repeat;
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-box span i.teeth_colour-4{
background-image: url("../images/teeth-colour-4.png");
background-size:100%;
background-repeat: no-repeat;
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-box span i.teeth_colour-5{
background-image: url("../images/teeth-colour-5.png");
background-size:100%;
background-repeat: no-repeat;
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-box span.no-chk {
/*background: #dedede;*/
background: #fff !important;
color: #666 !important;
/*border: solid 1px #dedede !important;*/
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-box span.chk {
/*background: #3EC4DF;
border-color: #3EC4DF;
color: #fff;*/
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-img {
padding: 10px 12px;
border-bottom: solid 1px #f1f1f1;
text-align: center;
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-img img {
width: 100%;
max-width: 360px;
height: auto;
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-anterior {
padding: 10px 12px;
border-bottom: solid 1px #f1f1f1;
text-align: center;
font-size: 0;
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-anterior div.anterior {
width: 100px;
display: inline-block;
text-align: center;
border: 0;
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-anterior div.anterior b {
font-size: 14px;
display: inline-block;
margin: 5px 0;
color: #666;
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-anterior div.anterior i {
display: block;
width: 100px;
height: 100px;
background-size: 100%;
}
@media screen and (max-width: 340px) {
.self-diagnosis-status ul.diagnosis-status .diagnosis-anterior div.anterior {
width: 70px;
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-anterior div.anterior i {
width: 70px;
height: 70px;
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-anterior div.anterior b {
font-size: 12px;
}
}
@media screen and (min-width: 341px) and (max-width: 374px) {
.self-diagnosis-status ul.diagnosis-status .diagnosis-anterior div.anterior {
width: 85px;
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-anterior div.anterior i {
width: 85px;
height: 85px;
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-anterior div.anterior b {
font-size: 12px;
}
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-anterior div.anterior i.anterior-1 {
background-image: url("../images/1.png");
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-anterior div.anterior i.anterior-2 {
background-image: url("../images/2.png");
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-anterior div.anterior i.anterior-3 {
background-image: url("../images/3.png");
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-anterior div.anterior i.anterior-4 {
background-image: url("../images/4.png");
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-anterior div.anterior i.anterior-5 {
background-image: url("../images/5.png");
}
.self-diagnosis-status ul.diagnosis-status div.photo-list {
margin: 0 12px;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 5px;
}
.self-diagnosis-status ul.diagnosis-status div.photo-list:after {
content: '';
display: table;
clear: both;
}
/*.self-diagnosis-status ul.diagnosis-status div.photo-list .photo-list-1 {
background-image: url("../images/1.png");
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo-list-2 {
background-image: url("../images/2.png");
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo-list-3 {
background-image: url("../images/3.png");
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo-list-4 {
background-image: url("../images/4.png");
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo-list-5 {
background-image: url("../images/5.png");
clear: both;
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo-list-6 {
background-image: url("../images/6.png");
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo-list-7 {
background-image: url("../images/7.png");
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo-list-8 {
background-image: url("../images/8.png");
}*/
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo {
background-size: cover;
background-position: center center;
float: left;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
@media screen and (min-width: 414px) {
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo {
width: 81px !important;
height: 81px !important;
margin: 1%;
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo .file-picker div {
width: 80px !important;
height: 80px !important;
margin-top: -5px !important;
margin-left: -54px !important;
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo input[type='file'] {
width: 80px !important;
height: 80px !important;
}
}
@media screen and (min-width: 375px) and (max-width: 413px) {
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo {
width: 73px;
height: 73px;
margin: 2%;
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo .file-picker div {
width: 72px !important;
height: 72px !important;
cursor: pointer;
margin-left: -47px;
margin-top: -4px;
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo input[type='file'] {
width: 72px;
height: 72px;
}
}
@media screen and (max-width: 374px) {
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo {
width: 62px;
height: 62px;
margin: 6px;
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo .file-picker div {
width: 61px !important;
height: 61px !important;
cursor: pointer;
margin-left: -41px !important;
margin-top: -4px !important;
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo input[type='file'] {
width: 60px;
height: 60px;
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo .file-picker {
width: 16px !important;
height: 16px !important;
}
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo input[type='file'] {
display: inline-block;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo .file-picker {
position: relative;
display: block;
width: 21px;
height: 21px;
margin: 5px;
background-image: url("../images/upload.png");
background-size: 100% 100%;
float: right;
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo .file-picker div label {
display: none !important;
}
.self-diagnosis-status ul.diagnosis-status div.photo-list .photo span input {
display: inline-block;
width: 88px;
height: 100%;
opacity: 0;
}
.self-diagnosis-status ul.diagnosis-status textarea {
font-size: 14px;
box-sizing: border-box;
width: 100%;
margin-top: 10px;
border: none;
outline: none;
}
.self-diagnosis-status ul.diagnosis-status .diagnosis-13 textarea {
padding: 5px 12px;
max-width: 98%;
height: 80px;
max-height: 120px;
margin-bottom: 10px;
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-additional .diagnosis-box {
padding-top: 5px;
padding-bottom: 5px;
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-additional label {
display: block;
margin-top: 12px;
}
.self-diagnosis-status ul.diagnosis-status div.diagnosis-additional textarea {
max-width: 99.99%;
height: 58px;
max-height: 80px;
border-bottom: solid 1px #dedede;
padding: 0;
border-radius: 0;
-webkit-appearance:none;
padding-bottom: 5px;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement {
margin-top: 5px;
padding: 10px 12px;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t,
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b {
position: relative;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t li,
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b li {
position: absolute;
background: none;
cursor: pointer;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement div.tooth-t {
margin-bottom: 20px;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement div.tooth-b {
margin-top: 20px;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .hy-tbg {
background: url("../images/hy-t.jpg");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .ry-tbg {
background: url("../images/ry-t.jpg");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .hy-bbg {
background: url("../images/hy-b.jpg");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .ry-bbg {
background: url("../images/ry-b.jpg");
}
@media screen and (min-width: 375px) {
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .hy-tbg,
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .hy-bbg {
height: 320px;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .ry-tbg,
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .ry-bbg {
height: 232px;
}
}
@media screen and (max-width: 374px) {
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .hy-tbg,
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .hy-bbg {
height: 274px;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .ry-tbg,
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .ry-bbg {
height: 198px;
}
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t b,
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b b {
display: inline-block;
color: #fff;
padding: 0 8px;
margin: 5px;
height: 25px;
line-height: 25px;
background: #dedede;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
font-weight: normal;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t {
width: 100%;
max-width: 360px;
background-size: 100% 100%;
margin: auto;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .coordinates {
width: 60px;
height: 60px;
background-image: url("../images/lr.png");
background-size: 100% 100%;
float: right;
}
@media screen and (max-width: 374px) {
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .coordinates {
width: 50px;
height: 50px;
}
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t li {
background-size: 100% 100%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy11 {
background-image: url("../images/g11.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy11-gw {
background-image: url("../images/gp11.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy11-d {
background-image: url("../images/gray11.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy12 {
background-image: url("../images/g12.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy12-gw {
background-image: url("../images/gp12.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy12-d {
background-image: url("../images/gray12.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy13 {
background-image: url("../images/g13.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy13-gw {
background-image: url("../images/gp13.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy13-d {
background-image: url("../images/gray13.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy14 {
background-image: url("../images/g14.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy14-gw {
background-image: url("../images/gp14.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy14-d {
background-image: url("../images/gray14.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy15 {
background-image: url("../images/g15.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy15-gw {
background-image: url("../images/gp15.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy15-d {
background-image: url("../images/gray15.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy16 {
background-image: url("../images/g16.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy16-gw {
background-image: url("../images/gp16.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy16-d {
background-image: url("../images/gray16.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy17 {
background-image: url("../images/g17.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy17-gw {
background-image: url("../images/gp17.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy17-d {
background-image: url("../images/gray17.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy18 {
background-image: url("../images/g18.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy18-gw {
background-image: url("../images/gp18.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy18-d {
background-image: url("../images/gray18.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy18-o {
background-image: url("../images/o18.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy18-ow {
background: url("../images/op18.png");
background-size: 100% 100%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy21 {
background-image: url("../images/g21.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy21-gw {
background-image: url("../images/gp21.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy21-d {
background-image: url("../images/gray21.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy22 {
background-image: url("../images/g22.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy22-gw {
background-image: url("../images/gp22.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy22-d {
background-image: url("../images/gray22.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy23 {
background-image: url("../images/g23.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy23-gw {
background-image: url("../images/gp23.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy23-d {
background-image: url("../images/gray23.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy24 {
background-image: url("../images/g24.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy24-gw {
background-image: url("../images/gp24.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy24-d {
background-image: url("../images/gray24.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy25 {
background-image: url("../images/g25.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy25-gw {
background-image: url("../images/gp25.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy25-d {
background-image: url("../images/gray25.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy26 {
background-image: url("../images/g26.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy26-gw {
background-image: url("../images/gp26.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy26-d {
background-image: url("../images/gray26.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy27 {
background-image: url("../images/g27.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy27-gw {
background-image: url("../images/gp27.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy27-d {
background-image: url("../images/gray27.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy28 {
background-image: url("../images/g28.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy28-gw {
background-image: url("../images/gp28.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy28-d {
background-image: url("../images/gray28.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy28-o {
background-image: url("../images/o28.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy28-ow {
background: url("../images/op28.png");
background-size: 100% 100%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry11 {
background-image: url("../images/rg11.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry11-gw {
background-image: url("../images/rgp11.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry11-d {
background-image: url("../images/rgray11.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry12 {
background-image: url("../images/rg12.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry12-gw {
background-image: url("../images/rgp12.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry12-d {
background-image: url("../images/rgray12.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry13 {
background-image: url("../images/rg13.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry13-gw {
background-image: url("../images/rgp13.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry13-d {
background-image: url("../images/rgray13.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry14 {
background-image: url("../images/rg14.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry14-gw {
background-image: url("../images/rgp14.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry14-d {
background-image: url("../images/rgray14.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry15 {
background-image: url("../images/rg15.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry15-gw {
background-image: url("../images/rgp15.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry15-d {
background-image: url("../images/rgray15.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry21 {
background-image: url("../images/rg21.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry21-gw {
background-image: url("../images/rgp21.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry21-d {
background-image: url("../images/rgray21.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry22 {
background-image: url("../images/rg22.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry22-gw {
background-image: url("../images/rgp22.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry22-d {
background-image: url("../images/rgray22.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry23 {
background-image: url("../images/rg23.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry23-gw {
background-image: url("../images/rgp23.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry23-d {
background-image: url("../images/rgray23.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry24 {
background-image: url("../images/rg24.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry24-gw {
background-image: url("../images/rgp24.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry24-d {
background-image: url("../images/rgray24.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry25 {
background-image: url("../images/rg25.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry25-gw {
background-image: url("../images/rgp25.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry25-d {
background-image: url("../images/rgray25.png");
}
@media screen and (min-width: 375px) {
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t li {
width: 42px;
height: 42px;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy11 {
top: 0;
left: 36.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy12 {
top: 4%;
left: 24.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy13 {
top: 12%;
left: 15.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy14 {
top: 25%;
left: 8.5%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy15 {
top: 39%;
left: 3.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy16 {
bottom: 28.5%;
left: 2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy17 {
bottom: 12.5%;
left: 0.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy18 {
bottom: -3.2%;
left: 0;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy21 {
top: 0;
right: 36.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy22 {
top: 6%;
right: 26.6%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy23 {
top: 14%;
right: 17.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy24 {
top: 25.8%;
right: 9.5%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy25 {
top: 39%;
right: 4.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy26 {
height: 46px;
bottom: 27.5%;
right: 2.6%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy27 {
bottom: 12.5%;
right: 0.6%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy28 {
bottom: 0.2%;
right: 0.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t li {
width: 54px;
height: 52px;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry11 {
top: 0;
left: 32.5%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry12 {
top: 7.8%;
left: 16.8%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry13 {
top: 25.8%;
left: 8%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry14 {
height: 58px;
width: 50px;
bottom: 20.4%;
left: 2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry15 {
height: 54px;
bottom: -5%;
left: -0.8%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry21 {
top: 0;
right: 34.5%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry22 {
top: 8.8%;
right: 20%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry23 {
top: 27.8%;
right: 12%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry24 {
height: 56px;
bottom: 20%;
right: 3.8%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry25 {
height: 54px;
bottom: 0;
right: -0.4%;
}
}
@media screen and (max-width: 374px) {
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t li {
width: 34px;
height: 36px;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy11 {
top: 0;
left: 36.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy12 {
top: 5%;
left: 24.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy13 {
top: 12%;
left: 15.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy14 {
top: 25%;
left: 8.5%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy15 {
top: 39%;
left: 3.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy16 {
bottom: 27.5%;
left: 2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy17 {
bottom: 11.5%;
left: 0.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy18 {
bottom: -3.8%;
left: 0.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy21 {
top: 0;
right: 36.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy22 {
top: 6%;
right: 26.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy23 {
top: 14.2%;
right: 17.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy24 {
top: 26%;
right: 9.5%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy25 {
top: 39%;
right: 4.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy26 {
bottom: 27.4%;
right: 2.4%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy27 {
bottom: 12.5%;
right: 0.8%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .hy-t .hy28 {
bottom: 0.2%;
right: 0.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t li {
width: 42px;
height: 44px;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry11 {
top: 0;
left: 33.5%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry12 {
top: 7.8%;
left: 17.8%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry13 {
top: 25.8%;
left: 8%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry14 {
height: 46px;
bottom: 21.4%;
left: 2.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry15 {
bottom: -5%;
left: 0;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry21 {
top: 0;
right: 35.5%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry22 {
top: 8%;
right: 20%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry23 {
top: 28.8%;
right: 12%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry24 {
height: 48px;
bottom: 19%;
right: 4.8%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-t .ry-t .ry25 {
bottom: 0;
right: 0;
}
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b {
width: 100%;
max-width: 360px;
background-size: 100% 100%;
margin: 10px auto 0;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b b {
position: absolute;
bottom: 0;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b li {
background-size: 100% 100%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy41 {
background-image: url("../images/g41.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy41-gw {
background-image: url("../images/gp41.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy41-d {
background-image: url("../images/gray41.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy42 {
background-image: url("../images/g42.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy42-gw {
background-image: url("../images/gp42.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy42-d {
background-image: url("../images/gray42.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy43 {
background-image: url("../images/g43.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy43-gw {
background-image: url("../images/gp43.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy43-d {
background-image: url("../images/gray43.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy44 {
background-image: url("../images/g44.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy44-gw {
background-image: url("../images/gp44.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy44-d {
background-image: url("../images/gray44.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy45 {
background-image: url("../images/g45.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy45-gw {
background-image: url("../images/gp45.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy45-d {
background-image: url("../images/gray45.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy46 {
background-image: url("../images/g46.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy46-gw {
background-image: url("../images/gp46.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy46-d {
background-image: url("../images/gray46.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy47 {
background-image: url("../images/g47.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy47-gw {
background-image: url("../images/gp47.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy47-d {
background-image: url("../images/gray47.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy48 {
background-image: url("../images/g48.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy48-gw {
background-image: url("../images/gp48.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy48-d {
background-image: url("../images/gray48.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy48-o {
background-image: url("../images/o48.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy48-ow {
background: url("../images/op48.png");
background-size: 100% 100%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy31 {
background-image: url("../images/g31.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy31-gw {
background-image: url("../images/gp31.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy31-d {
background-image: url("../images/gray31.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy32 {
background-image: url("../images/g32.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy32-gw {
background-image: url("../images/gp32.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy32-d {
background-image: url("../images/gray32.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy33 {
background-image: url("../images/g33.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy33-gw {
background-image: url("../images/gp33.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy33-d {
background-image: url("../images/gray33.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy34 {
background-image: url("../images/g34.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy34-gw {
background-image: url("../images/gp34.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy34-d {
background-image: url("../images/gray34.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy35 {
background-image: url("../images/g35.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy35-gw {
background-image: url("../images/gp35.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy35-d {
background-image: url("../images/gray35.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy36 {
background-image: url("../images/g36.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy36-gw {
background-image: url("../images/gp36.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy36-d {
background-image: url("../images/gray36.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy37 {
background-image: url("../images/g37.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy37-gw {
background-image: url("../images/gp37.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy37-d {
background-image: url("../images/gray37.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy38 {
background-image: url("../images/g38.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy38-gw {
background-image: url("../images/gp38.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy38-d {
background-image: url("../images/gray38.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy38-o {
background-image: url("../images/o38.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy38-ow {
background: url("../images/op38.png");
background-size: 100% 100%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry41 {
background-image: url("../images/rg41.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry41-gw {
background-image: url("../images/rgp41.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry41-d {
background-image: url("../images/rgray41.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry42 {
background-image: url("../images/rg42.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry42-gw {
background-image: url("../images/rgp42.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry42-d {
background-image: url("../images/rgray42.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry43 {
background-image: url("../images/rg43.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry43-gw {
background-image: url("../images/rgp43.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry43-d {
background-image: url("../images/rgray43.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry44 {
background-image: url("../images/rg44.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry44-gw {
background-image: url("../images/rgp44.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry44-d {
background-image: url("../images/rgray44.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry45 {
background-image: url("../images/rg45.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry45-gw {
background-image: url("../images/rgp45.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry45-d {
background-image: url("../images/rgray45.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry31 {
background-image: url("../images/rg31.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry31-gw {
background-image: url("../images/rgp31.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry31-d {
background-image: url("../images/rgray31.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry32 {
background-image: url("../images/rg32.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry32-gw {
background-image: url("../images/rgp32.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry32-d {
background-image: url("../images/rgray32.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry33 {
background-image: url("../images/rg33.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry33-gw {
background-image: url("../images/rgp33.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry33-d {
background-image: url("../images/rgray33.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry34 {
background-image: url("../images/rg34.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry34-gw {
background-image: url("../images/rgp34.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry34-d {
background-image: url("../images/rgray34.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry35 {
background-image: url("../images/rg35.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry35-gw {
background-image: url("../images/rgp35.png");
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry35-d {
background-image: url("../images/rgray35.png");
}
@media screen and (min-width: 375px) {
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b li {
width: 42px;
height: 42px;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy41 {
height: 34px;
bottom: -3%;
left: 36.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy42 {
bottom: 0;
left: 24.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy43 {
bottom: 9%;
left: 15.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy44 {
bottom: 22.5%;
left: 8.5%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy45 {
bottom: 35%;
left: 3.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy46 {
top: 31.5%;
left: 2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy47 {
top: 16.5%;
left: 0.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy48 {
top: 0.2%;
left: 0.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy31 {
height: 34px;
bottom: -4%;
right: 36.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy32 {
bottom: 2%;
right: 25.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy33 {
bottom: 10%;
right: 16.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy34 {
height: 44px;
bottom: 22%;
right: 9.5%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy35 {
bottom: 35%;
right: 4.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy36 {
height: 45px;
top: 31.5%;
right: 2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy37 {
top: 15.5%;
right: 1%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy38 {
top: 0.2%;
right: 0.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b li {
width: 54px;
height: 52px;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry41 {
height: 43px;
bottom: -4.4%;
left: 32.5%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry42 {
width: 50px;
bottom: 1.8%;
left: 17.8%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry43 {
width: 50px;
height: 48px;
bottom: 21.8%;
left: 9%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry44 {
height: 56px;
top: 25.8%;
left: 0.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry45 {
height: 54px;
top: 0;
left: -0.8%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry31 {
height: 44px;
bottom: -4%;
right: 34.5%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry32 {
width: 50px;
bottom: 3.8%;
right: 20.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry33 {
bottom: 22.8%;
right: 11.8%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry34 {
width: 50px;
height: 56px;
top: 24.8%;
right: 4.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry35 {
width: 52px;
height: 54px;
top: 0;
right: 0;
}
}
@media screen and (max-width: 374px) {
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b li {
width: 34px;
height: 36px;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy41 {
height: 28px;
bottom: -4%;
left: 36.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy42 {
bottom: 0;
left: 24.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy43 {
bottom: 9%;
left: 15.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy44 {
bottom: 22%;
left: 8.5%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy45 {
bottom: 35%;
left: 3.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy46 {
top: 31.5%;
left: 2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy47 {
top: 16.2%;
left: 0.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy48 {
top: 0.2%;
left: 0.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy31 {
height: 27px;
bottom: -4%;
right: 37.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy32 {
bottom: 1.2%;
right: 25.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy33 {
bottom: 9%;
right: 17.7%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy34 {
bottom: 22%;
right: 9.5%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy35 {
bottom: 35%;
right: 5.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy36 {
top: 31.5%;
right: 3%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy37 {
top: 15.5%;
right: 1%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .hy-b .hy38 {
top: 0.2%;
right: 0.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b li {
width: 42px;
height: 44px;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry41 {
width: 44px;
height: 38px;
bottom: -6%;
left: 33%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry42 {
bottom: 1.8%;
left: 16.8%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry43 {
bottom: 19.8%;
left: 8%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry44 {
height: 48px;
top: 25.8%;
left: 1.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry45 {
height: 47px;
top: 0;
left: 0;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry31 {
height: 38px;
bottom: -6%;
right: 34.5%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry32 {
bottom: 1.8%;
right: 20.2%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry33 {
bottom: 21.8%;
right: 10.8%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry34 {
height: 46px;
top: 24.8%;
right: 4%;
}
.self-diagnosis-status ul.diagnosis-status div.tooth-arrangement .tooth-b .ry-b .ry35 {
top: 0;
right: 0;
}
}
.self-diagnosis-status div.submit {
padding: 0 12px;
margin-bottom: 20px;
}
.self-diagnosis-status div.submit input[type='button'] {
width: 100%;
height: 40px;
background: #3EC4DF;
outline: none;
border: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #fff;
font-size: 14px;
}
.self-diagnosis-status div.submit input[type='button'].forbid {
background-color: #ccc;
color: #fff;
}
.self-diagnosis-status div.self-popup {
position: absolute;
display: none;
margin: 50px;
width: 170px;
font-size: 16px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
z-index: 999;
}
@media screen and (max-width: 400px){
.self-diagnosis-status div.self-popup .pp-title {
height: 36px;
line-height: 37px;
padding: 0 10px;
}
.self-diagnosis-status div.self-popup p,
.self-diagnosis-status div.self-popup span{
height: 32px;
line-height: 32px;
font-size: 16px;
}
.self-diagnosis-status div.self-popup a.ok{
font-size: 16px;
height: 36px;
line-height: 37px;
}
.self-diagnosis-status div.self-popup b{
width: 22px;
height: 14px;
}
.self-diagnosis-status div.self-popup p:before,
.self-diagnosis-status div.self-popup span:before{
width: 16px;
height: 16px;
margin: 0 10px;
}
}
@media screen and (min-width: 400px) {
.self-diagnosis-status div.self-popup {
width: 200px;
}
.self-diagnosis-status div.self-popup .pp-title{
height: 40px;
line-height: 41px;
font-size: 18px;
padding: 0 12px;
}
.self-diagnosis-status div.self-popup p,
.self-diagnosis-status div.self-popup span{
height: 34px;
line-height: 34px;
font-size: 18px;
}
.self-diagnosis-status div.self-popup b{
width: 36px;
height: 18px;
}
.self-diagnosis-status div.self-popup a.ok{
height: 40px;
line-height: 41px;
font-size: 18px;
}
.self-diagnosis-status div.self-popup p:before,
.self-diagnosis-status div.self-popup span:before{
width: 18px;
height: 18px;
margin: 0 12px;
}
}
.self-diagnosis-status div.self-popup .tooth-status-1,
.self-diagnosis-status div.self-popup .tooth-status-2 {
display: none;
}
.self-diagnosis-status div.self-popup .pp-title {
border-bottom: solid 1px #dedede;
color: #333;
}
.self-diagnosis-status div.self-popup .pp-title i {
color: #22c454;
}
.self-diagnosis-status div.self-popup b {
display: block;
position: absolute;
background-size: 100% 100%;
background-image: url("../images/top.png");
top: -12px;
}
.self-diagnosis-status div.self-popup p:before,
.self-diagnosis-status div.self-popup span:before {
content: '';
background-size: 100% 100%;
display: inline-block;
vertical-align: -3px;
}
.self-diagnosis-status div.self-popup .status {
border-bottom: solid 1px #dedede;
line-height: 16px;
padding: 5px 0;
color: #666;
}
.self-diagnosis-status div.self-popup .status p {
cursor: pointer;
}
.self-diagnosis-status div.self-popup .status p:before {
background-image: url("../images/yuan.png");
}
.self-diagnosis-status div.self-popup .status p.chk {
color: #333;
}
.self-diagnosis-status div.self-popup .status p.chk:before {
background-image: url("../images/chk-y.png");
}
/*牙齿排列字体置灰
.self-diagnosis-status div.self-popup .status p.no-chk {
color: #dedede;
}*/
.self-diagnosis-status div.self-popup .status p.no-chk:before {
background-image: url("../images/gray-y.png");
}
.self-diagnosis-status div.self-popup .symptom {
line-height: 16px;
padding: 5px 0;
color: #666;
}
.self-diagnosis-status div.self-popup .symptom span {
cursor: pointer;
display: block;
width: 100%;
}
.self-diagnosis-status div.self-popup .symptom span:before {
background-image: url("../images/fang.png");
}
.self-diagnosis-status div.self-popup .symptom span.chk {
color: #333;
}
.self-diagnosis-status div.self-popup .symptom span.chk:before {
background-image: url("../images/chk-f.png");
}
.self-diagnosis-status div.self-popup .symptom span.no-chk {
color: #dedede;
}
.self-diagnosis-status div.self-popup .symptom span.no-chk:before {
background-image: url("../images/gray-f.png");
}
.self-diagnosis-status div.self-popup a {
display: block;
width: 100%;
height: 32px;
line-height: 32px;
text-decoration: none;
background: #22c454;
font-size: 14px;
color: #fff;
text-align: center;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.self-diagnosis-status .mask {
position: absolute;
display: none;
background: #000;
opacity: 0.75;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
.self-diagnosis-status .show {
display: block;
}
.self-diagnosis-status .hide {
display: none;
}
.self-diagnosis-status .diagnosis-8 .tooth-t-text i,
.self-diagnosis-status .diagnosis-8 .tooth-b-text i {
font-size: 14px;
font-weight: bold;
}
.self-diagnosis-status .diagnosis-8 .tooth-t-text p,
.self-diagnosis-status .diagnosis-8 .tooth-b-text p {
text-align: left !important;
background: #f1f1f1;
padding-top: 5px;
padding-bottom: 5px;
}
.self-diagnosis-status .diagnosis-8 .tooth-t-text span,
.self-diagnosis-status .diagnosis-8 .tooth-b-text span {
font-size: 14px;
color: #fff;
background: #22c454;
display: inline-block;
margin: 5px 10px 5px 0;
padding: 4px 8px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.self-diagnosis-status .diagnosis-8 .tooth-t-text span.o,
.self-diagnosis-status .diagnosis-8 .tooth-b-text span.o {
background: #ff9900;
}
.self-diagnosis-status .diagnosis-8 .tooth-t-text span.d,
.self-diagnosis-status .diagnosis-8 .tooth-b-text span.d {
background: #d0d0d0;
}
.self-diagnosis-status .diagnosis-8 .tooth-t-text b,
.self-diagnosis-status .diagnosis-8 .tooth-b-text b {
font-size: 14px;
margin-right: 10px;
}
.self-diagnosis-status .diagnosis-8 .tooth-t-text a,
.self-diagnosis-status .diagnosis-8 .tooth-b-text a {
display: block;
width: 14px;
height: 14px;
float: right;
margin-top: 11px;
background: url("../images/close.png") no-repeat center center;
background-size: 100% 100%;
}
.-m-verify-confirm input[name=mobile]{
margin-left: -6px;
}
.check-box {
margin: 0px 0px -3px 0 !important;
}
.check-box i {
background:url(../images/checkbox.png) no-repeat center center;
position: absolute;
left: 0px;
bottom: -15px;
width: 16px;
height: 16px;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
-webkit-transform:rotateZ(-180deg);
-moz-transform:rotateZ(-180deg);
-o-transform:rotateZ(-180deg);
transform:rotateZ(-180deg);
}
.checkedBox {
background: #3EC4DF;
}
.checkedBox i {
bottom: -26px !important;
left: -19px !important;
}