*{margin:0;padding:0}body{padding:32px;background-color:#f0f0f2;font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif}li{list-style:none}h2{letter-spacing:2px}a{text-decoration:none;color:#333;font-weight:600;letter-spacing:1px}p{font-weight:600;letter-spacing:1px}.boxStyle{background-color:#e8e8e8;box-shadow:-3px -3px 10px 5px #fff3,3px 3px 10px 5px #0003;border-radius:10px;padding:32px}.homePage{display:flex;gap:32px}.PageRigth{width:100%;height:auto;display:flex;flex-direction:column;gap:32px}.sectionTitle{position:relative;margin-left:16px}.sectionTitle h2:before{content:"";background-color:#90b2a7;width:10px;height:24px;position:absolute;left:-16px;top:0}@media screen and (max-width:1300px){body,.boxStyle{padding:24px}.homePage,.PageRigth{gap:24px}}header{width:170px;height:100vh;height:100dvh;background-color:#e8e8e8;border-radius:10px;padding:24px;box-shadow:-3px -3px 10px 5px #fff3,3px 3px 10px 5px #0003}.navBox .logoItem img{width:70px}.navBox{width:170px;display:flex;flex-direction:column;gap:30px;height:100vh;height:100dvh}.navBox li a{display:flex;align-items:center;gap:10px;font-weight:600}.navBox li a:hover{opacity:.8}.navBox li img{width:25px}.navBox .settingItem{margin-top:auto}.infomationInner{display:flex;justify-content:space-between}.infomationArea{width:50%;margin-top:32px}.infomationTitle{display:flex;justify-content:space-between}.infomationTag{font-size:1.2rem}.infomationArea a{display:flex;align-items:center;background-color:#92b4a9;color:#fff;padding:4px 8px;border-radius:10px}.infomationArea a img{width:30px}.infomationArea dl{display:flex;gap:10px}.infomationArea .label{color:#fff;padding:0 8px;border-radius:10px;width:80px;text-align:center}.infomationArea .label.green{background-color:#61a68a}.infomationArea .label.orenge{background-color:#e77939}.infomationArea .label.blue{background-color:#37acd6}.infomationLinkButton{margin-top:32px}.infomationLinkButton ul{display:grid;grid-template-columns:1fr 1fr;gap:32px}.infomationLinkButton ul li a{display:flex;flex-direction:column;gap:10px;align-items:anchor-center}.infomationLinkButton ul li img{width:50px}.memberBox{background-color:#e8e8e8;border-radius:10px;box-shadow:-3px -3px 10px 5px #fff3,3px 3px 10px 5px #0003;display:flex;justify-content:space-between}.memberBox h2{color:#444}.memberBoxArea{margin-top:32px;display:flex;gap:24px}.memberBoxArea img{width:200px;height:200px;object-fit:cover;border-radius:50%}.memberBoxInfo p{display:flex;flex-direction:column;font-weight:600;font-size:1.5rem}.memberBoxInfo p span{font-size:1rem;font-weight:500;letter-spacing:2px}dl{display:flex;margin-top:24px}.buttonLink ul{display:flex;gap:16px}.buttonLink ul li{box-shadow:-3px -3px 10px 5px #fff3,3px 3px 10px 5px #0003;padding:0 8px;border-radius:10px}.buttonLink ul img{width:70px}.rankBox{margin-top:16px;padding:24px}.rankTitle{display:flex;justify-content:space-between}.rankColor{color:#be9420}.rankHolder{text-align:center;margin-top:16px}.rankHolder img{width:150px}.progressBox{margin-top:1rem}.progressInfo{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.5rem;padding:0 .2rem}.progressBar{width:100%;height:10px;appearance:none}.progressBar::-webkit-progress-bar{background-color:#e0e0e0;border-radius:5px}.progressBar::-webkit-progress-value{background-color:#be9420;border-radius:5px}
