/* 공통 속성 */

#articlebar{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
-moz-flex-flow:row wrap;
flex-flow:row wrap;
width:calc(100% - 2px);
margin:0 auto;
border:2px solid black;
}


#articlebar div,li{
display:block;
border:1px solid black;
}

a.articles{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column nowrap;
-moz-flex-flow:column nowrap;
flex-flow:column nowrap;
-webkit-justify-content:center;
-moz-justify-content:center;
justify-content:center;
-webkit-align-items:flex-start;
align-items:flex-start;
width:100%;
height:calc(100% - 8px);
padding:4px;
}

span.titlekor{
font-size:1.1rem;
}

span.titleeng{
font-size:0.7rem;
font-style:italic;
}

span.kor{
font-size:0.9rem;
}

span.eng{
font-size:0.7rem;
font-style:italic;
}



/* article div */

.notes{
display:-webkit-flex;
display:flex;
width:calc(60% - 2px);
height:74px;
}

.papers{
display:-webkit-flex;
display:flex;
width:calc(60% - 2px);
height:74px;
}


.science{
display:-webkit-flex;
display:flex;
width:calc(80% - 10px);
padding:4px;
}

.science_list{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:100%;
height:120px;
}

.science_list li{
display:-webkit-flex;
display:flex;
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
width:100%;
}

.music{
display:-webkit-flex;
display:flex;
width:calc(80% - 10px);
padding:4px;
}

.music_list{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:100%;
height:244px;
}

.music_list li{
display:-webkit-flex;
display:flex;
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
width:100%;
}

.oilpainting{
display:-webkit-flex;
display:flex;
width:calc(80% - 10px);
padding:4px;
}

.oilpainting_list{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:100%;
height:244px;
}

.oilpainting_list li{
display:-webkit-flex;
display:flex;
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
width:100%;
}

.schism_00{
display:-webkit-flex;
display:flex;
width:calc(80% - 10px);
padding:4px;
}

.schism_list_00{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:100%;
height:84px;
}

.schism_list_00 li{
display:-webkit-flex;
display:flex;
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
width:100%;
}

.schism_01{
display:-webkit-flex;
display:flex;
width:calc(80% - 10px);
padding:4px;
}

.schism_list_01{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:100%;
height:364px;
}

.schism_list_01 li{
display:-webkit-flex;
display:flex;
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
width:100%;
}

.schism_02{
display:-webkit-flex;
display:flex;
width:calc(80% - 10px);
padding:4px;
}

.schism_list_02{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:100%;
height:364px;
}

.schism_list_02 li{
display:-webkit-flex;
display:flex;
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
width:100%;
}

.schism_03{
display:-webkit-flex;
display:flex;
width:calc(80% - 10px);
padding:4px;
}

.schism_list_03{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:100%;
height:364px;
}

.schism_list_03 li{
display:-webkit-flex;
display:flex;
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
width:100%;
}


/* void div */

.void_gold{
width:calc(20% - 2px);
background:gold;
display:inline;
}

.void_white{
width:calc(20% - 2px);
background:white;
display:inline;
}

.void_crimson{
width:calc(20% - 2px);
background:crimson;
display:inline;
}

.void_mediumblue{
width:calc(20% - 2px);
background:mediumblue;
display:inline;
}

.black_space{
width:100%;
background:black;
height:50px;
display:inilne;
}


/* 태블릿 CSS 코드 선언 */

@media all and (min-width:768px){

span.eng{
font-size:0.7rem;
display:inline;
}


/* article div */

.notes{
display:-webkit-flex;
display:flex;
width:calc(60% - 2px);
}

.papers{
display:-webkit-flex;
display:flex;
width:calc(60% - 2px);
}

.science{
display:-webkit-flex;
display:flex;
width:calc(40% - 10px);
padding:4px;
}

.science_list{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:calc(40% - 2px);
}

.science_list li{
display:-webkit-flex;
display:flex;
width:100%;
}

.music{
display:-webkit-flex;
display:flex;
width:calc(40% - 10px);
padding:4px;
}

.music_list{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:calc(40% - 2px);
}

.music_list li{
display:-webkit-flex;
display:flex;
width:100%;
}

.oilpainting{
display:-webkit-flex;
display:flex;
width:calc(40% - 10px);
padding:4px;
}

.oilpainting_list{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:calc(40% - 2px);
}

.oilpainting_list li{
display:-webkit-flex;
display:flex;
width:100%;
}


.schism_00{
display:-webkit-flex;
display:flex;
width:calc(40% - 10px);
padding:4px;
}

.schism_list_00{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:calc(40% - 2px);
}

.schism_list_00 li{
display:-webkit-flex;
display:flex;
width:100%;
}

.schism_01{
display:-webkit-flex;
display:flex;
width:calc(40% - 10px);
padding:4px;
}

.schism_list_01{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:calc(40% - 2px);
}

.schism_list_01 li{
display:-webkit-flex;
display:flex;
width:100%;
}

.schism_02{
display:-webkit-flex;
display:flex;
width:calc(40% - 10px);
padding:4px;
}

.schism_list_02{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:calc(40% - 2px);
}

.schism_list_02 li{
display:-webkit-flex;
display:flex;
width:100%;
}

.schism_03{
display:-webkit-flex;
display:flex;
width:calc(40% - 10px);
padding:4px;
}

.schism_list_03{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:calc(40% - 2px);
}

.schism_list_03 li{
display:-webkit-flex;
display:flex;
width:100%;
}

/* void div */

.void_gold{
width:calc(20% - 2px);
background:gold;
display:inline;
}

.void_white{
width:calc(20% - 2px);
background:white;
display:inline;
}

.void_crimson{
width:calc(20% - 2px);
background:crimson;
display:inline;
}

.void_mediumblue{
width:calc(20% - 2px);
background:mediumblue;
display:inline;
}


.black_space{
display:none;
}

}


/* 데스크탑 CSS 코드 선언 */

@media all and (min-width:960px){

span.eng{
font-size:0.7rem;
display:inline;
}

/* article div */

.notes{
display:-webkit-flex;
display:flex;
width:calc(50% - 2px);
}

.papers{
display:-webkit-flex;
display:flex;
width:calc(50% - 2px);
}

.science{
display:-webkit-flex;
display:flex;
width:calc(25% - 10px);
padding:4px;
}

.science_list{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:calc(50% - 2px);
}

.science_list li{
display:-webkit-flex;
display:flex;
width:calc(25% - 2px);
width:100%;
}

.music{
display:-webkit-flex;
display:flex;
width:calc(25% - 10px);
padding:4px;
}

.music_list{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:calc(50% - 2px);
}

.music_list li{
display:-webkit-flex;
display:flex;
width:100%;
}

.oilpainting{
display:-webkit-flex;
display:flex;
width:calc(25% - 10px);
padding:4px;
}

.oilpainting_list{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:calc(50% - 2px);
}

.oilpainting_list li{
display:-webkit-flex;
display:flex;
width:100%;
}

.schism_00{
display:-webkit-flex;
display:flex;
width:calc(25% - 10px);
padding:4px;
}

.schism_list_00{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:calc(50% - 2px);
}

.schism_list_00 li{
width:100%;
display:-webkit-flex;
display:flex;
width:100%;
}

.schism_01{
display:-webkit-flex;
display:flex;
width:calc(25% - 10px);
padding:4px;
}

.schism_list_01{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:calc(50% - 2px);
}

.schism_list_01 li{
display:-webkit-flex;
display:flex;
width:100%;
}

.schism_02{
display:-webkit-flex;
display:flex;
width:calc(25% - 10px);
padding:4px;
}

.schism_list_02{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:calc(50% - 2px);
}

.schism_list_02 li{
display:-webkit-flex;
display:flex;
width:100%;
}

.schism_03{
display:-webkit-flex;
display:flex;
width:calc(25% - 10px);
padding:4px;
}

.schism_list_03{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
-moz-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width:calc(50% - 2px);
}

.schism_list_03 li{
display:-webkit-flex;
display:flex;
width:100%;
}

/* void div */

.void_gold{
width:calc(25% - 2px);
background:gold;
display:inline;
}

.void_white{
width:calc(25% - 2px);
background:white;
display:inline;
}

.void_crimson{
width:calc(25% - 2px);
background:crimson;
display:inline;
}

.void_mediumblue{
width:calc(25% - 2px);
background:mediumblue;
display:inline;
}

.black_space{
display:none;
}

}


#articlebar a:link {color:black; text-decoration:none;}
#articlebar a:visited {color:black; text-decoration:none;}
#articlebar a:hover {color:white; background:black; text-decoration:none;}
#articlebar a:active {color:black; text-decoration:none;}

#articlebar li:hover {color:white; background:black; text-decoration:none;}