@font-face {
            font-family: 'nexon';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }

        #wrap>* {
            padding: 0;
            font-size: 13px; 
            font-family:nexon, sans-serif;
            box-sizing: border-box;
        }
        #wrap { width: 730px; margin: 0 auto;}
       #wrap>h1 { font-size: 2.8rem; color:#cc3300; background: url(/img/total_img/medal.png) no-repeat 30rem 0rem; background-size:80px; line-height:90px;}
        #wrap>h2 { font-size: 1.25rem; color:#cc3300; margin: 1.5rem 0; text-align: left;}
        #wrap>h2:before { content: '◈ '; color:#cc3300; }
        #wrap #top { display: flex; justify-content: space-around;}
        #wrap .circle:nth-child(2n){ background-color:crimson}
        #wrap .circle:nth-child(2n+1){ background: dodgerblue;}
        #wrap .circle { border-radius: 50%;width:120px; padding: 45px 0; text-align: center; box-shadow: 2px 2px 5px 2px gray; position: relative; color:white; font-weight: bolder;}
        #wrap .arrow { font-size:3rem; position: absolute; left:180px; top:35px;color:grey;}
        #wrap>header>p {line-height: 160%}
        #wrap>header>p:before { content: '★';}
        
        table.main { width: 95%; border-collapse: collapse; margin-top: 20px;font-family:nexon, sans-serif;}
        table.main,table.main th, table.main td { border:1px solid gray;}
        table.main th { background: #f1f1f1; font-size: 1rem; line-height: 160%; text-align: center;} 
        table.main td { text-align: center; font-size: .9rem; line-height: 160%;} 
        table.main caption { text-align:right;font-size: 1rem; margin: 10px 0; width: 100%;position:relative; left:0;}