.web-page .content-box .content{display:flex;align-items:flex-start;justify-content:space-between}.web-page .content-box .content .content-left .color-conversion-wrapper{display:flex}.web-page .content-box .content .content-left .color-conversion-wrapper .color-conversion-content{width:80%;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}.web-page .content-box .content .content-left .color-conversion-wrapper .color-conversion-content .color-item{background:#fff;width:32%;padding:calc(100vw*20/1915);border-radius:calc(100vw*6/1915);box-shadow:0 0 calc(100vw*10/1915) calc(100vw*4/1915) #c1bada1a;display:flex;flex-direction:column;align-items:center;margin-top:calc(100vw*15/1915)}.web-page .content-box .content .content-left .color-conversion-wrapper .color-conversion-content .color-item .color-top{display:flex;align-items:center;justify-content:space-between;width:100%}.web-page .content-box .content .content-left .color-conversion-wrapper .color-conversion-content .color-item .color-top p{font-size:calc(100vw*16/1915);font-family:HarmonyOS-Medium,Arial,Helvetica,sans-serif}.web-page .content-box .content .content-left .color-conversion-wrapper .color-conversion-content .color-item input{font-size:calc(100vw*15/1915);border:1px #C1BADA solid;padding:0 calc(100vw*15/1915);height:calc(100vw*38/1915);border-radius:calc(100vw*4/1915);outline:none;margin-top:calc(100vw*20/1915);width:100%}.web-page .content-box .content .content-left .color-conversion-wrapper .color-conversion-content .color-item .btn-group{display:flex;align-items:center;margin-left:calc(100vw*15/1915)}.web-page .content-box .content .content-left .color-conversion-wrapper .color-conversion-content .color-item .btn-group button{width:calc(100vw*24/1915);height:calc(100vw*24/1915);border:none;background:none;border-radius:calc(100vw*4/1915);margin-left:calc(100vw*5/1915);font-size:0;cursor:pointer}.web-page .content-box .content .content-left .color-conversion-wrapper .color-conversion-content .color-item .btn-group button img{width:calc(100vw*16/1915)}.web-page .content-box .content .content-left .color-conversion-wrapper .color-view{width:19%}.web-page .content-box .content .content-left .color-conversion-wrapper .color-view div{width:100%;height:calc(100% - 100vw*50/1915);border-radius:calc(100vw*10/1915)}.web-page .content-box .content .content-left .color-explain-wrapper{margin-top:calc(100vw*40/1915);width:100%}.web-page .content-box .content .content-left .color-explain-wrapper .color-explain{background:#fff;border-radius:calc(100vw*6/1915);padding:calc(100vw*20/1915);margin-top:calc(100vw*20/1915);box-shadow:0 0 calc(100vw*10/1915) calc(100vw*4/1915) #c1bada1a}.web-page .content-box .content .content-left .color-explain-wrapper .color-explain div{line-height:calc(100vw*28/1915);margin-bottom:calc(100vw*15/1915);font-size:calc(100vw*15/1915)}.web-page .content-box .content .content-left .color-explain-wrapper .color-explain div:last-child{margin-bottom:0}.web-page .content-box .content .content-left .color-explain-wrapper .color-explain span{font-family:HarmonyOS-Bold,Arial,Helvetica,sans-serif;font-size:calc(100vw*15/1915)}.web-page .content-box .content .content-left .color-explain-wrapper .color-explain ul{margin-left:calc(100vw*30/1915);list-style:disc;margin-top:calc(100vw*10/1915)}.web-page .content-box .content .content-left .color-table-wrapper{margin-top:calc(100vw*40/1915)}.web-page .content-box .content .content-left .color-table-wrapper table{width:100%;margin-top:calc(100vw*20/1915);text-align:center;border:1px solid #F8F5FF;border-collapse:collapse;box-shadow:0 0 calc(100vw*10/1915) calc(100vw*4/1915) #c1bada1a}.web-page .content-box .content .content-left .color-table-wrapper table tr th{padding:calc(100vw*12/1915);background:#6f43ff;color:#fff;font-size:calc(100vw*15/1915);border-right:1px solid #F8F5FF}.web-page .content-box .content .content-left .color-table-wrapper table tr th:last-of-type{border-right:none}.web-page .content-box .content .content-left .color-table-wrapper table tr td{padding:calc(100vw*12/1915);font-size:calc(100vw*15/1915);background:#fbfaff;border-right:1px solid #F8F5FF}.web-page .content-box .content .content-left .color-table-wrapper table tr td:last-of-type{border-right:none}.web-page .content-box .content .content-left .color-table-wrapper table tr td div{width:50%;height:calc(100vw*30/1915);display:inline-block;border-radius:calc(100vw*2/1915)}.web-page .content-box .content .content-left .color-table-wrapper table tr:nth-child(2n) td{background:#fff}.web-page .content-box .content .content-right .color-piker-wrapper #color{width:calc(100vw*100/1915);height:calc(100vw*40/1915);border:1px solid #C1BADA;padding:calc(100vw*2/1915);border-radius:calc(100vw*6/1915)}.web-page .content-box .content .content-right .color-piker-wrapper div{margin-top:calc(100vw*15/1915)}.web-page .content-box .content .content-right .color-piker-wrapper div .color-value{margin-left:calc(100vw*5/1915)}.web-page .content-box .content .color-piker-wrapper,.web-page .content-box .content .color-view{height:auto;background:#fff;margin-top:calc(100vw*15/1915);margin-left:1%;padding:calc(100vw*15/1915);border-radius:calc(100vw*6/1915)}.web-page .content-box .content .color-piker-wrapper p,.web-page .content-box .content .color-view p{font-size:calc(100vw*16/1915);font-family:HarmonyOS-Bold,Arial,Helvetica,sans-serif;margin-bottom:calc(100vw*15/1915)}