a{
    
    text-decoration: none;
    
    
}
a:hover{
    
    
    text-decoration: underline;
    
}

img {
    
    
    background-size: cover;
    background-repeat: no-repeat;
    
    
}

main.premium{
 
    
    margin: 10px auto;
    position: relative;
    
    
    
}


article.premium{
 
    width:696px;
    
}


aside.premium{
    
    position: absolute;
    top:0px;
    right: 0px;
    width:300px;
    
    bottom: 0px;
    background-color: #f7f7f7;
    
}



figure > img {
 
     background-color: #eee;
    
}

hr.blank{
 
    height: 0px;
    margin: 6px 0px;
    clear: both;
    
}


ul{
 
    list-style: none;
    
}

ul > li {
 
    padding-left: 10px;
    
    position: relative;
}

ul > li:before{
 
    content: '';
    
    position: absolute;
    
    top:calc(50% - 1.5px);
    
    height:  3px;
    width:  3px;
    
    background-color: #aaa;
    
    left: 0px;
    
    
    
    
}

section.top.premium{

    border:2px solid rgb(148,147,204);
    padding: 20px;
    
}

section.top.premium > h1{
 
    margin: 0px;
    font-weight: normal;
    
}
.color.premium{
 
    color:rgb(95,60,185);
    
}
figure.top{
 
    overflow: hidden;
    
    margin-top:10px;
}
figure.top > img{
 
   
    
    margin-right: 10px;
    
    float: left;
    
    
}
figure.top h1{
 
    margin: 0px;
    
    font-size:22px;
    
    line-height:22px;
    
}

figure.top figcaption{

    color: #3e3e3e;
    
    font-size: 14px;
    
    line-height: 20px;
    
    max-height:60px;
    
    overflow: hidden;
    margin-top: 5px;
}

section.top > hr {
 
    margin:10px 0px;
    clear: both;
    
    
}

ul.mid {
    
 
    margin: 0px;
    padding: 0px;
    
    border: 1px solid #aaa;
    padding: 10px;
    
}

ul.mid.left{
 
    float:left;
    
    width:calc(50% - 25px);
    
    overflow: hidden;
    
}




ul.mid.right{
 
    float:right;
    
    width:calc(50% - 25px);
    
    overflow: hidden;
    
}

ul.mid li{
    
 
    font-size:14px;
    color: #333;
    line-height: 24px;
    font-weight: bold;
    
}
ul.mid hr{
 
    margin: 7px 0px;
    
}
ul.mid > h1 {
 
    font-size:14px;
    margin: 0px;
    
    
}

figure.mid{
    
    margin-top:10px;
    
}

figure.mid img{
 
    float:left;
    margin-right: 10px;
    margin-bottom: 35px;
    
}
figure.mid h1{
 
    margin: 0px;
    font-size: 14px;
    
    line-height: 18px;
    
    height: 54px;
    
    
}

figure.mid h1 time ,ul.mid time , ul.list  li time{
 
    font-weight: normal;
    font-size: 12px;
    color: #aaa;
    padding: 0px 5px;
    
    
}

figure.mid figcaption{
    
    font-size: 12px;
    color: #aaa;
    
    line-height: 18px;
    
    height:54px;
    
    overflow: hidden;
 
}


ul.mid hr.mobile{
    
    margin-bottom: 15px;
}

a.more{
 
    font-weight: normal;
    
    color:black;
    
    font-size:12px;
    
}


ul.list{
 
    margin: 0px;
    padding: 10px;
    
    border: 1px solid #aaa;
    
    
}

ul.list h1{
 
    margin: 0px;
    font-size:14px;
    
    
}

ul.list hr{
 
    margin: 10px 0px;
    
}
ul.list  li{
 
    font-size:14px;
    line-height: 30px;
    
    font-weight: bold;
    
    padding-left: 20px;
    
}

ul.list  li:before{
 
    content: 'P';
    border-radius: 2px;
    top:calc(50% - 7.5px );
    height: 15px;
    width: 15px;
    text-align: center;
    background-color:  rgb(95,60,185);
    color: white;
    font-size:12px;
    line-height: 15px;
    left:0px;
    position: absolute;
}

section.tab{
 
    height: 287px;
    border: 1px solid #aaa;
    
    position: relative;
    
}
nav.tab{
 
    height: 37px;
    position: relative;
    
}
nav.tab button{

    
    position: absolute;
    top:0px;
    bottom: 0px;
    width:50%;
    background-color: #E6E6F5;
    border-style:solid;
    border-color: rgba(95,60,180);
    border-width: 0px 0px 2px 0px;
    
    font-size:15px;
    
    font-weight: bold;
    
    color: rgba(95,60,180,0.5);
    
    
    
}

nav.tab button.active{
    
    border-style:solid;
    border-color: rgba(95,60,180);
    border-width: 2px 2px 0px 2px;
    background-color: white;
    color: rgba(95,60,180);
}


nav.tab button:nth-child(odd){
 
    left:0px;
    
}
nav.tab button:nth-child(even){
 
    right:0px;
    
}
ul.tab{
    
    margin: 0px;
    padding: 20px;
    
}

ul.tab li{
 
    font-size: 12px;
    
    font-weight: normal;
    
    line-height: 21px;
    
    
}
ul.tab li:first-of-type{
 
    font-weight: bold;
    
    
}


section.side{
    
    margin-top:5px;
    
    background-color: #f7f7f7;
    
    padding:10px;
}


ul.rank{
    
    margin: 0px;
    
    padding: 0px;
    
    counter-reset: section;
    
}



ul.rank > h1{
 
        font-size:14px;
        margin: 10px 0px;
    
}

ul.rank > li{
    
    
    font-weight: normal;
    
    font-size:12px;
    
    line-height: 20px;
    
    padding-left: 20px;
    
    
    
}
ul.rank > li:before{
    
    position: absolute;
    
    border: 1px solid #aaa;
    border-radius: 2px;
    
    height:12px;
    width:12px;
    background-color: white;
    
    top:calc(50% - 6px );
    
    font-size:8px;
    line-height: 12px;
    text-align: center;
    
    counter-increment: section;                 /* section의 카운터 값을 1씩 증가시킵니다. */
    content: counter(section); 
    
    
}

ul.rank > li:first-of-type{
    
    font-weight: bold;
    
}

figure.conference{
 
    margin:0px;
    padding:0px;
    
}
figure.conference nav{
 
     font-size:14px;
     font-weight: bold;
     line-height: 40px;
    
}
figure.conference > img{
    
 
    float:left;
    margin-right: 10px;
    margin-bottom: 10px;
    
    
    
}

figure.conference > h1{

    margin: 0px;
    font-size: 12px;
    
}

figure.conference > figcaption{

    margin: 0px;
    font-size: 12px;
    
}


h1.side{
 
    color:#333;
    font-size:14px;
    
}