.periodic-layer-box{padding:2.25rem 0 5rem}.periodic-layer-box .layer-title{font-size:1rem;line-height:2rem;padding-left:3rem;margin-bottom:1rem}.periodic-layer-box .confirm{width:5rem;height:2.25rem;line-height:2.25rem;text-align:center;background-color:#3380DC;border-radius:1.13rem;font-size:1rem;color:#fff;position:absolute;right:4.38rem;top:1.25rem}.periodic-layer-box .cancel{font-size:1.25rem;color:#999;cursor:pointer;position:absolute;right:1.25rem;top:1.25rem}.periodic-layer-box .container{margin:0 auto}.periodic-layer-box #table{width:54rem;margin-bottom:0.56rem}.periodic-layer-box #table-lanthanoids,.periodic-layer-box #table-actinoids{width:45rem}.periodic-layer-box #elH,.periodic-layer-box #elHe,.periodic-layer-box #elNe,.periodic-layer-box #elBe,.periodic-layer-box #elMg,.periodic-layer-box #elAr,.periodic-layer-box #elKr,.periodic-layer-box #elXe,.periodic-layer-box #elRn,.periodic-layer-box #elUuo{border-right:1px solid #3380DC}.periodic-layer-box #elH,.periodic-layer-box #elBe,.periodic-layer-box #elMg{width:calc(3rem + 1px)}.periodic-layer-box #elHe{margin-left:calc(48rem - 1px)}.periodic-layer-box #elB,.periodic-layer-box #elAl{margin-left:calc(30rem - 1px)}.periodic-layer-box .clearfix{clear:both}.periodic-layer-box .transp{opacity:0.25}.periodic-layer-box #table,.periodic-layer-box #table-actinoids{border-bottom:1px solid #3380DC}.periodic-layer-box .element{position:relative;float:left;width:3rem;height:3.25rem;text-align:center;cursor:pointer;color:#3380DC;text-decoration:none;transition:all 0.2s ease-in-out;border-top:1px solid #3380DC;border-left:1px solid #3380DC;box-sizing:border-box}.periodic-layer-box .element .element-tips-icon{position:absolute;right:0;top:0;color:#aaa}.periodic-layer-box .element .element-tips-icon i{font-size:0.75rem}.periodic-layer-box .element .element_symbol{line-height:3.25rem;font-size:1rem}.periodic-layer-box .element .id,.periodic-layer-box .element .mass{font-size:0.63rem;transform:scale(0.8);position:absolute}.periodic-layer-box .element .id{top:0;left:0}.periodic-layer-box .element .mass{bottom:0;left:0;right:0}.periodic-layer-box .element .item-tips{position:absolute;z-index:1;padding:0.25rem 0.75rem;font-size:0.75rem;line-height:1.25rem;text-align:left;color:#3380DC;width:max-content;max-width:16rem;background-color:#E0EEFF;border:1px solid #3380DC;border-radius:0.25rem;left:1rem;bottom:3.25rem;word-break:break-all}.periodic-layer-box .element.right .item-tips{left:unset;right:0}.periodic-layer-box .element.noble{background-color:#E1C1F4}.periodic-layer-box .element.alkali{background-color:#F4C1C1}.periodic-layer-box .element.alkaline{background-color:#F4DDC1}.periodic-layer-box .element.transition{background-color:#F4F0C1}.periodic-layer-box .element.poor{background-color:#C1F4CA}.periodic-layer-box .element.metalloid{background-color:#C1EFF4}.periodic-layer-box .element.nonmetal{background-color:#BDDFFF}.periodic-layer-box .element.halogen{background-color:#C4C1F4}.periodic-layer-box .element.lanthanoid{background-color:#E1C1F4}.periodic-layer-box .element.actinoid{background-color:#F4C1E8}.periodic-layer-box .element.selected{background-color:#3380DC;color:#fff}.periodic-layer-box .element.disabled{background-color:#999;color:#fff}.periodic-layer-box .element.musted{background-color:#FF7800;color:#fff}.periodic-layer-box .element:hover i{color:#606060}.periodic-layer-box .element:hover .item-tips{display:block}