div#detail
{
width: 100%;
}

div#detail h1
{
width: auto;
color: #333;
font-weight: 300;
font-size: 1.75rem;
padding-right: 3rem;
}

div#detail p.date
{
margin-top: 1rem;
font-size: 0.85rem;
color: #888;
text-transform: lowercase;
}

div#detail div.pic
{
width: 40%;
background-position: center;
background-size: cover;
float: right;
margin-left: 1rem;
margin-top: 0.5rem;
margin-bottom: 1rem;
border: solid 1px #ddd;
}

div#detail div.pic div
{
padding-top: 60%;
padding-top: 65%;
padding-top: 75%;
}

div#detail p.tag a
{
color: #0e76be;
text-decoration: none;
}

div#detail div.detail
{
width: 100%;
}

div#detail div.detail ul
{
margin-left: 1.5rem;
list-style-type: none;
}

div#detail div.detail ul li
{
position: relative;
margin-top: 0.5rem;
}

div#detail div.detail ul li:before
{
content: "";
display: block;
position: absolute;
width: 0.4rem;
height: 0.4rem;
border: none;
border-radius: 0.2rem;
left: 0;
top: 0.325rem;
background-color: #ccc;
margin-top: 0.25rem;
margin-left: -1rem;
}

div#detail div.detail p img
{
width: 100%;
height: auto;
}

div#detail div.detail iframe
{
width: 100%;
height: 28.125rem;
}

div#detail a.file
{
display: inline-block;
width: auto;
line-height: 1.5rem;
padding: 1rem 1rem 1rem 5rem;
margin-top: 3rem;
border: none;
outline: solid 1px #888;
position: relative;
text-decoration: none;
color: #444;
text-transform: uppercase;
font-weight: bold;
}

div#detail a.file:before
{
position: absolute;
top: 0;
left: 0;
width: 4rem;
height: 5rem;
line-height: 5rem;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f56d';
background: #888;
color: #fff;
text-align: center;
font-size: 2.5rem;
}

div#detail a.file span
{
color: #009fe3;
text-decoration: underline;
font-weight: normal;
}

@media (max-width: 480px)
{
div#detail h1 { margin-top: 0; font-size: 1.5rem; line-height: 1.75rem; }
div#detail div.pic { width: 100%; float: none; margin-left: 0; }
div#detail p.date { margin-top: 1rem; }
div#detail div.detail img { width: 100%; height: auto; }
}