(사용자 2명의 중간 판 16개는 보이지 않습니다) | |||
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=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%; | |||
} | } | ||
9번째 줄: | 15번째 줄: | ||
width: 360px; | width: 360px; | ||
float: right; | float: right; | ||
clear: right; | |||
padding: 0.2em; | |||
} | } | ||
49번째 줄: | 57번째 줄: | ||
padding:6px 6px; | padding:6px 6px; | ||
font-size:14px; | font-size:14px; | ||
vertical-align:middle; | |||
} | } | ||
54번째 줄: | 63번째 줄: | ||
width: 20%; | width: 20%; | ||
color:white; | color:white; | ||
border- | border-top:1px solid#bbb; | ||
text-align: center; | text-align: center; | ||
padding:6px 6px; | padding:6px 6px; | ||
font-size:14px; | font-size:14px; | ||
vertical-align:middle; | |||
} | |||
.fixedbox-row-20:last-child { | |||
border: 0px; | |||
} | } | ||
.fixedbox-row-30{ | .fixedbox-row-30 { | ||
width: 30%; | width: 30%; | ||
background-color:#eeeeee; | background-color:#eeeeee; | ||
border- | border-top:1px solid#bbb; | ||
text-align: center; | text-align: center; | ||
padding:8px 6px; | padding:8px 6px; | ||
font-size:14px; | font-size:14px; | ||
vertical-align:middle; | |||
} | } | ||
.fixedbox-row-40{ | .fixedbox-row-30:last-child { | ||
border-bottom: 0px; | |||
} | |||
.fixedbox-row-40 { | |||
width: 40%; | width: 40%; | ||
background-color:# | background-color:#fff; | ||
border- | border-top:1px solid#bbb; | ||
text-align: center; | text-align: center; | ||
padding:8px 6px; | padding:8px 6px; | ||
font-size:14px; | font-size:14px; | ||
vertical-align:middle; | |||
} | |||
.fixedbox-row-40:last-child { | |||
border: 0px; | |||
} | } | ||
.fixedbox-row-desc { | .fixedbox-row-desc { | ||
border- | border-top:1px solid#bbb; | ||
padding:6px 8px; | padding:6px 8px; | ||
font-size:14px; | font-size:14px; | ||
font-weight:500; | font-weight:500; | ||
vertical-align:middle; | |||
} | |||
.fixedbox-row-desc:last-child { | |||
border-bottom:0px; | |||
} | } | ||
.pct-infobox-title { | .pct-infobox-title { | ||
height: | height:auto; | ||
color:white; | color:white; | ||
font-size:24px; | font-size:24px; | ||
92번째 줄: | 121번째 줄: | ||
text-align:center; | text-align:center; | ||
vertical-align:middle; | vertical-align:middle; | ||
background:#000; | |||
} | } | ||
.pct-infobox-image { | .pct-infobox-image { | ||
vertical-align:middle; | vertical-align:middle; | ||
text-align:center; | text-align:center; | ||
106번째 줄: | 135번째 줄: | ||
vertical-align:middle; | vertical-align:middle; | ||
font-size:13px; | 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; }