(사용자 3명의 중간 판 52개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gugi&family=Noto+Sans+KR:wght@100;400&family=Noto+Serif+KR:wght@200;500&family=Sunflower:wght@300;500&display=swap'); | |||
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;700&display=swap'); | |||
.info { | .info { | ||
width: 100%; | width: 100%; | ||
text-align: center; | text-align: center; | ||
} | |||
img { | |||
object-fit: contain; | |||
max-height: 100%; | |||
} | |||
.pct-infobox { | |||
width: 360px; | |||
float: right; | |||
clear: right; | |||
padding: 0.2em; | |||
} | |||
@media (max-width: 768px){ | |||
.pct-infobox { | |||
width: 100%; | |||
max-width: 450px; | |||
margin: 0 auto; | |||
} | |||
} | |||
@media (max-width: 540px){ | |||
.pct-infobox { | |||
width: 100%; | |||
max-width: 100%; | |||
clear: both; | |||
} | |||
} | |||
.pct-fixedbox { | |||
width:100%; | |||
border-collapse:collapse; | |||
margin-top: 12px; | |||
} | |||
.fixedbox-title { | |||
height:60px; | |||
color:white; | |||
font-size:24px; | |||
text-align:center; | |||
vertical-align:middle; | |||
border-bottom:1px solid#bbb; | |||
} | |||
.fixedbox-row-full { | |||
color:white; | |||
border-bottom:1px solid#bbb; | |||
text-align: center; | |||
padding:6px 6px; | |||
font-size:14px; | |||
vertical-align:middle; | |||
} | |||
.fixedbox-row-20 { | |||
width: 20%; | |||
color:white; | |||
border-top:1px solid#bbb; | |||
text-align: center; | |||
padding:6px 6px; | |||
font-size:14px; | |||
vertical-align:middle; | |||
} | |||
.fixedbox-row-20:last-child { | |||
border: 0px; | |||
} | |||
.fixedbox-row-30 { | |||
width: 30%; | |||
background-color:#eeeeee; | |||
border-top:1px solid#bbb; | |||
text-align: center; | |||
padding:8px 6px; | |||
font-size:14px; | |||
vertical-align:middle; | |||
} | |||
.fixedbox-row-30:last-child { | |||
border-bottom: 0px; | |||
} | |||
.fixedbox-row-40 { | |||
width: 40%; | |||
background-color:#fff; | |||
border-top:1px solid#bbb; | |||
text-align: center; | |||
padding:8px 6px; | |||
font-size:14px; | |||
vertical-align:middle; | |||
} | |||
.fixedbox-row-40:last-child { | |||
border: 0px; | |||
} | |||
.fixedbox-row-desc { | |||
border-top:1px solid#bbb; | |||
padding:6px 8px; | |||
font-size:14px; | |||
font-weight:500; | |||
vertical-align:middle; | |||
} | |||
.fixedbox-row-desc:last-child { | |||
border-bottom:0px; | |||
} | |||
.pct-infobox-title { | |||
height:auto; | |||
color:white; | |||
font-size:24px; | |||
font-weight:500; | |||
text-align:center; | |||
vertical-align:middle; | |||
background:#000; | |||
} | |||
.pct-infobox-image { | |||
vertical-align:middle; | |||
text-align:center; | |||
} | |||
.pct-infobox-row-full { | |||
color:white; | |||
height:32px; | |||
text-align:center; | |||
vertical-align:middle; | |||
font-size:13px; | |||
} | |||
.togglebutton { | |||
cursor:pointer; | |||
display:block; | |||
text-align:center; | |||
} | |||
#togglebutton, #togglecontent { | |||
height:0; | |||
overflow:hidden; | |||
} | |||
#togglebutton:checked + #togglecontent { | |||
height:auto; | |||
position:relative; | |||
} | } |
2022년 4월 26일 (화) 13:53 기준 최신판
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gugi&family=Noto+Sans+KR:wght@100;400&family=Noto+Serif+KR:wght@200;500&family=Sunflower:wght@300;500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;700&display=swap'); .info { width: 100%; text-align: center; } img { object-fit: contain; max-height: 100%; } .pct-infobox { width: 360px; float: right; clear: right; padding: 0.2em; } @media (max-width: 768px){ .pct-infobox { width: 100%; max-width: 450px; margin: 0 auto; } } @media (max-width: 540px){ .pct-infobox { width: 100%; max-width: 100%; clear: both; } } .pct-fixedbox { width:100%; border-collapse:collapse; margin-top: 12px; } .fixedbox-title { height:60px; color:white; font-size:24px; text-align:center; vertical-align:middle; border-bottom:1px solid#bbb; } .fixedbox-row-full { color:white; border-bottom:1px solid#bbb; text-align: center; padding:6px 6px; font-size:14px; vertical-align:middle; } .fixedbox-row-20 { width: 20%; color:white; border-top:1px solid#bbb; text-align: center; padding:6px 6px; font-size:14px; vertical-align:middle; } .fixedbox-row-20:last-child { border: 0px; } .fixedbox-row-30 { width: 30%; background-color:#eeeeee; border-top:1px solid#bbb; text-align: center; padding:8px 6px; font-size:14px; vertical-align:middle; } .fixedbox-row-30:last-child { border-bottom: 0px; } .fixedbox-row-40 { width: 40%; background-color:#fff; border-top:1px solid#bbb; text-align: center; padding:8px 6px; font-size:14px; vertical-align:middle; } .fixedbox-row-40:last-child { border: 0px; } .fixedbox-row-desc { border-top:1px solid#bbb; padding:6px 8px; font-size:14px; font-weight:500; vertical-align:middle; } .fixedbox-row-desc:last-child { border-bottom:0px; } .pct-infobox-title { height:auto; color:white; font-size:24px; font-weight:500; text-align:center; vertical-align:middle; background:#000; } .pct-infobox-image { vertical-align:middle; text-align:center; } .pct-infobox-row-full { color:white; height:32px; text-align:center; vertical-align:middle; font-size:13px; } .togglebutton { cursor:pointer; display:block; text-align:center; } #togglebutton, #togglecontent { height:0; overflow:hidden; } #togglebutton:checked + #togglecontent { height:auto; position:relative; }