#periodic-wrapper {
    position: relative;
    width: 1300px;
    height: 80%;
    margin-top:50px;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border:1px solid #FFFFFF;
}

#periodic-wrapper span {
    display:inline-block;
    color:#fff;
    text-align:center;
    width:100%;
    margin:10px 0 10px 0;
}

#info {
    width:100%;
    height:50px;
    margin:0 auto;
    background: rgba(0, 0, 0, 0.4);
}

dd { clear:both; }
dt + dd { clear:none; }

#periodic {
    font-family: 'Nanum Gothic', sans-serif; line-height: 1.0em;
}
#periodic th { background-color:#CECECE; color:#333; font-size:12px; border:1px solid #000; }
#periodic td { width:75px; height:60px; text-align:center; cursor: pointer; }
#periodic td ul { margin: 0px; }
#periodic div { border-radius:5px 5px 5px 5px; }

#periodic-group { font-family: 'Nanum Gothic', sans-serif; }
#periodic-group th { background-color:#CECECE; color:#333; width:135px; border:1px solid #000; }
#periodic-group td { width:75px; height:60px; text-align:center; cursor: pointer; }
#periodic-group div { border-radius:5px 5px 5px 5px; }
#periodic-group td ul { margin: 0px; }

.nonmetal { background-color:#f0e68c; }			/* 비금속 */
.metal { background-color:#ff69b4; }			/* 금속 */
.transitionatom { background-color:#dddddd; } 	/* 전이원소금속 */
.posttransition { background-color:#ffa07a; } 	/* 전이후 금속 */
.metalloid {background-color:#adff2f; } 		/* 준금속 */
.decided { background-color:#dda0dd; }			/* 미확정 원소 */

td.atom {
    padding:3px;
}
/*.https://pinkdreams.kr/ {*/
/*    font-size:12px;*/
/*    color: #1c3150;*/
/*}*/
.atomkor { font-size:11px; color: #04574a; } /* 원소명(한국어) */
.atomeng { font-size:12px; } /* 원소명(영어) */
.density { font-size:10px; color: #035cd2; white-space: nowrap; } /* 밀도 */
.group_atom { font-size:12px; color: #04574a; }

/*.symbol { font-size:18px; font-weight:bold; }*/
.gas { color:#F00; } 	/* 상온에서 기체 표시 */
.solid { color:#000; }	/* 상온에서 고체 표시 */
.liquid { color:#00F; } /* 상온에서 액체 표시 */
.blank { width:10px; }

#info-periodic {
    position:absolute;
    width:500px;
    height:170px;
    top:130px;
    left:230px;
    background-image: url("/images/periodic/bg_info.png");
}

.info_symbol {
    position:relative;
    top:5px;
    left:90px;
    width:80px;
    height:140px;
    color:#FFF;
    float:left;
}

.info_symbol li {
    display: inline-block;
    text-align: center;
    margin-top:5px;
    width:100%;
    height:20px;
    font-size: 14px;
}

.info_symbol li.atom_symbol {
    display:inline-block;
    color: #0f0;
    font-size: 50px;
    height: 50px;
}

.info_atom {
    position:relative;
    top:10px;
    left:150px;
    width:260px;
    height:140px;
    color:#FFF;
    font-size:14px;
}

.info_atom dd {
    padding-left:20px;
    height:20px;
    padding-top:10px;
    float:right;
}

.atom_ename { letter-spacing:1px; height:12px; }
.atom_temp { height:12px; }

dl { height:12px; }
dt {
    float:left;
    width:80px;
    height:20px;
    padding-top:10px;
    text-align:right;
}