:root{
--ads:36px;
--adf:13px;
}
.art-ad-inline{
width:100%;
display:flex;
justify-content:center;
margin:var(--gap) 0;
}
.top-page-ad{
margin:var(--gap) auto 0;
}
.art-ad-top{
margin:0 auto var(--gap);
}
.art-ad-in-content{
margin:var(--gap) auto;
}
.art-ad-after-content{
margin:var(--gap) auto 0;
}
.art-ad-box,
.art-sidebar-ad{
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br1);
display:flex;
align-items:center;
justify-content:center;
color:var(--tx3);
font-size:16px;
font-weight:600;
position:relative;
box-shadow:var(--fbs);
overflow:hidden;
flex-shrink:0;
}
.art-ad-box[data-ad-type="leaderboard"]{
flex-direction:row;
}
.art-ad-box[data-ad-type="rectangle"],
.art-sidebar-ad{
flex-direction:column;
}
.art-ad-box[data-size="970x250"]{
width:calc(970px + var(--ads) * 2);
height:250px;
}
.art-ad-box[data-size="970x90"]{
width:calc(970px + var(--ads) * 2);
height:90px;
}
.art-ad-box[data-size="728x90"]{
width:calc(728px + var(--ads) * 2);
height:90px;
}
.art-ad-box[data-size="468x60"]{
width:calc(468px + var(--ads) * 2);
height:60px;
}
.art-ad-box[data-size="320x100"]{
width:calc(320px + var(--ads) * 2);
height:100px;
flex-direction:row;
}
.art-ad-box[data-size="300x250"]{
width:300px;
height:calc(250px + var(--ads) * 2);
flex-direction:column;
}
.art-ad-box[data-size="336x280"]{
width:336px;
height:calc(280px + var(--ads) * 2);
flex-direction:column;
}
.art-ad-label{
background-color:var(--bg3);
color:var(--tx3);
font-size:var(--adf);
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
user-select:none;
}
.art-ad-label-top,
.art-ad-label-bottom,
.art-sidebar-ad .art-ad-label{
width:100%;
height:var(--ads);
}
.art-ad-label-left,
.art-ad-label-right{
width:var(--ads);
height:100%;
writing-mode:vertical-rl;
text-orientation:mixed;
}
.art-ad-label-left{
transform:rotate(180deg);
}
.art-ad-box[data-ad-type="leaderboard"] .art-ad-label-top,
.art-ad-box[data-ad-type="leaderboard"] .art-ad-label-bottom{
display:none;
}
.art-ad-box[data-ad-type="rectangle"] .art-ad-label-left,
.art-ad-box[data-ad-type="rectangle"] .art-ad-label-right{
display:none;
}
.art-ad-inner{
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
flex-shrink:0;
}
.art-ad-inner::before{
content:'AD';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:20px;
font-weight:500;
color:var(--tx3);
letter-spacing:4px;
z-index:0;
}
.art-ad-box[data-size="970x250"] .art-ad-inner{
width:970px;
height:250px;
}
.art-ad-box[data-size="970x90"] .art-ad-inner{
width:970px;
height:90px;
}
.art-ad-box[data-size="728x90"] .art-ad-inner{
width:728px;
height:90px;
}
.art-ad-box[data-size="468x60"] .art-ad-inner{
width:468px;
height:60px;
}
.art-ad-box[data-size="320x100"] .art-ad-inner{
width:320px;
height:100px;
}
.art-ad-box[data-size="300x250"] .art-ad-inner{
width:300px;
height:250px;
}
.art-ad-box[data-size="336x280"] .art-ad-inner{
width:336px;
height:280px;
}
.art-ad-img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
border-radius:0 !important;
border:none;
outline:none;
background:transparent;
}
.art-ad-img[src=""],
.art-ad-img:not([src]){
opacity:0;
}
.art-ad-toggle{
position:absolute;
top:8px;
left:8px;
width:32px;
height:32px;
border-radius:50%;
background-color:var(--bg3);
border:var(--bw1) solid var(--bc1);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
z-index:10;
padding:0;
}
.art-ad-toggle:hover{
background-color:var(--hv1);
border-color:var(--cl1);
}
.art-ad-toggle svg{
width:14px;
height:14px;
fill:var(--tx2);
stroke:var(--tx2);
}
.art-ad-toggle:hover svg{
fill:var(--cl1);
stroke:var(--cl1);
}
.art-ad-size{
position:absolute;
bottom:8px;
left:50%;
transform:translateX(-50%);
font-size:12px;
color:var(--tx3);
background-color:var(--bg3);
padding:2px 8px;
border-radius:10px;
z-index:10;
cursor:pointer;
border:1px solid transparent;
}
.art-ad-size:hover{
background-color:var(--rb1);
color:var(--rd1);
border-color:var(--rd1);
}
.art-sidebar{
position:absolute;
top:0;
left:calc(50% + (var(--pw2) / 2) + var(--gap));
width:300px;
}
.art-sidebar-left{
position:absolute;
top:0;
right:calc(50% + (var(--pw2) / 2) + var(--gap));
width:300px;
}
.art-sidebar-sticky{
position:sticky;
top:var(--gap);
}
.art-sidebar-ad{
width:100%;
}
.art-sidebar-ad[data-size="300x600"]{
height:calc(600px + var(--ads) * 2);
}
.art-sidebar-ad[data-size="300x1050"]{
height:calc(1050px + var(--ads) * 2);
}
.art-sidebar-ad[data-size="160x600"]{
height:calc(600px + var(--ads) * 2);
}
.art-sidebar-ad[data-size="120x600"]{
height:calc(600px + var(--ads) * 2);
}
.art-sidebar-ad .art-ad-inner{
width:100%;
flex:1;
}
.art-sidebar-ad[data-size="300x600"] .art-ad-inner,
.art-sidebar-ad[data-size="160x600"] .art-ad-inner,
.art-sidebar-ad[data-size="120x600"] .art-ad-inner{
height:600px;
}
.art-sidebar-ad[data-size="300x1050"] .art-ad-inner{
height:1050px;
}
.post .art-ad-inline{
margin:var(--gap) auto;
}
.post .art-ad-inline img.art-ad-img{
margin:0;
padding:0;
border-radius:0;
width:100%;
height:100%;
cursor:default;
}