style 調整圖文好讀wip

This commit is contained in:
2026-05-19 00:20:24 +08:00
parent 968f2d7d13
commit 43912ecf07
+156 -131
View File
@@ -49,63 +49,121 @@
overflow: visible; overflow: visible;
} }
.container11 { /* 一欄(全寬);二/三/四欄共用高度,左右由修飾 class 決定 */
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-1,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container11 {
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box;
} }
.container21 { body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-2,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container21,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container22 {
height: 100%;
box-sizing: border-box;
}
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-2--right,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container21 {
float: right; float: right;
width: 50%; width: 50%;
height: 100%;
} }
.container22 { body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-2--left,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container22 {
float: left; float: left;
width: 50%; width: 50%;
height: 100%;
} }
.container31 { body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-3,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container31,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container32,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container33 {
height: 100%;
box-sizing: border-box;
}
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-3--left,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container31,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container32 {
float: left; float: left;
width: 33%; width: 33.33%;
height: 100%;
} }
.container32 { body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-3--right,
float: left; body.ebook-ssg2-page.totoga2-page #totoga2-reader .container33 {
width: 33%;
height: 100%;
}
.container33 {
float: right; float: right;
width: 33%; width: 33.33%;
height: 100%;
} }
.container41 { body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-4,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container41,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container42,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container43,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container44 {
height: 100%;
box-sizing: border-box;
}
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-4--left,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container41,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container42 {
float: left; float: left;
width: 25%; width: 25%;
height: 100%;
} }
.container42 { body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-4--right,
float: left; body.ebook-ssg2-page.totoga2-page #totoga2-reader .container43,
width: 25%; body.ebook-ssg2-page.totoga2-page #totoga2-reader .container44 {
height: 100%;
}
.container43 {
float: right; float: right;
width: 25%; width: 25%;
height: 100%;
} }
.container44 { /* 各欄內文字區:與一欄 section 同款邊距(不另縮 42rem 置中欄) */
float: right; body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-1 section.ebook-intro.section,
width: 25%; body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-2 section.ebook-intro.section,
height: 100%; body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-3 section.ebook-intro.section,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-4 section.ebook-intro.section,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container11 section.ebook-intro.section,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container21 section.ebook-intro.section,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container22 section.ebook-intro.section,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container31 section.ebook-intro.section,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container32 section.ebook-intro.section,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container33 section.ebook-intro.section {
width: 100%;
max-width: 100%;
float: none;
clear: both;
box-sizing: border-box;
margin-bottom: 1.25rem;
}
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-2 section.ebook-intro.section p.ebook-intro-lead,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-3 section.ebook-intro.section p.ebook-intro-lead,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-4 section.ebook-intro.section p.ebook-intro-lead,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container21 section.ebook-intro.section p.ebook-intro-lead,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container22 section.ebook-intro.section p.ebook-intro-lead,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container31 section.ebook-intro.section p.ebook-intro-lead,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container32 section.ebook-intro.section p.ebook-intro-lead,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container33 section.ebook-intro.section p.ebook-intro-lead {
max-width: none;
margin-left: 0;
margin-right: 0;
margin-bottom: 1.25rem;
}
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-2 section.ebook-intro.section h3,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-3 section.ebook-intro.section h3,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-col-4 section.ebook-intro.section h3,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container21 section.ebook-intro.section h3,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container22 section.ebook-intro.section h3,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container31 section.ebook-intro.section h3,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container32 section.ebook-intro.section h3,
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container33 section.ebook-intro.section h3 {
max-width: none;
margin-left: 0;
margin-right: 0;
} }
body.ebook-ssg2-page.totoga2-page #totoga2-reader.chronicle-reader img { body.ebook-ssg2-page.totoga2-page #totoga2-reader.chronicle-reader img {
@@ -144,64 +202,7 @@
display: block; display: block;
} }
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-homework-block .container11 { /* 作業區沿用上方二/三/四欄規則(scoped 於 .readable-homework-block */
width: 100%;
height: 100%;
}
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-homework-block .container21 {
float: right;
width: 50%;
height: 100%;
}
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-homework-block .container22 {
float: left;
width: 50%;
height: 100%;
}
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-homework-block .container31 {
float: left;
width: 33.33%;
height: 100%;
}
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-homework-block .container32 {
float: left;
width: 33.33%;
height: 100%;
}
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-homework-block .container33 {
float: right;
width: 33.33%;
height: 100%;
}
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-homework-block .container41 {
float: left;
width: 25%;
height: 100%;
}
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-homework-block .container42 {
float: left;
width: 25%;
height: 100%;
}
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-homework-block .container43 {
float: right;
width: 25%;
height: 100%;
}
body.ebook-ssg2-page.totoga2-page #totoga2-reader .readable-homework-block .container44 {
float: right;
width: 25%;
height: 100%;
}
/* 與全站 section 同款:main 內勿用 div,且勿與 container21 等 float 綁同一元素 */ /* 與全站 section 同款:main 內勿用 div,且勿與 container21 等 float 綁同一元素 */
body.ebook-ssg2-page.totoga2-page #totoga2-reader section.ebook-intro.section { body.ebook-ssg2-page.totoga2-page #totoga2-reader section.ebook-intro.section {
@@ -270,7 +271,7 @@
<article id="challenge" data-title="無限挑戰"> <article id="challenge" data-title="無限挑戰">
<div class="container"> <div class="container">
<div class="container11"> <div class="container11 readable-col-1">
<img src="/totoga2/readable/7-2_160416_0_02_35水晶男孩.jpg" alt="水晶男孩 COM' BACK"> <img src="/totoga2/readable/7-2_160416_0_02_35水晶男孩.jpg" alt="水晶男孩 COM' BACK">
<section class="ebook-intro section"> <section class="ebook-intro section">
<h2 class="section-title">世紀末的追星狂狂熱,你聽過那場驚天動地的「黃色奇蹟」嗎?</h2> <h2 class="section-title">世紀末的追星狂狂熱,你聽過那場驚天動地的「黃色奇蹟」嗎?</h2>
@@ -287,9 +288,10 @@
</div> </div>
<div class="container"> <div class="container">
<div class="container22"> <div class="container22 readable-col-2 readable-col-2--left">
<img src="/totoga2/readable/04-2_totoka.png" alt="六六歌第二季"> <img src="/totoga2/readable/04-2_totoka.png" alt="六六歌第二季">
</div> </div>
<div class="container21 readable-col-2 readable-col-2--right">
<section class="ebook-intro section"> <section class="ebook-intro section">
<h3>六六歌第二季:獨一無二的專屬企劃</h3> <h3>六六歌第二季:獨一無二的專屬企劃</h3>
<p class="ebook-intro-lead">和第一季不同的是,第一季是由許多藝人共同完成一個舞台,而第二季專門為一個團體而企劃。</p> <p class="ebook-intro-lead">和第一季不同的是,第一季是由許多藝人共同完成一個舞台,而第二季專門為一個團體而企劃。</p>
@@ -302,6 +304,7 @@
<p class="ebook-intro-note">圖片來源:MBC</p> <p class="ebook-intro-note">圖片來源:MBC</p>
</section> </section>
</div> </div>
</div>
<div class="container"> <div class="container">
<section class="ebook-intro section"> <section class="ebook-intro section">
@@ -319,7 +322,7 @@
</div> </div>
<div class="container"> <div class="container">
<div class="container11"> <div class="container11 readable-col-1">
<img src="/totoga2/readable/6-1需要極度保密.jpeg" alt="正式交涉高度保密"> <img src="/totoga2/readable/6-1需要極度保密.jpeg" alt="正式交涉高度保密">
<section class="ebook-intro section" style="padding-top: 15px;"> <section class="ebook-intro section" style="padding-top: 15px;">
<h2 class="section-title">正式交涉</h2> <h2 class="section-title">正式交涉</h2>
@@ -330,20 +333,23 @@
</div> </div>
<div class="container"> <div class="container">
<div class="container21 readable-col-2 readable-col-2--right">
<img src="/totoga2/readable/11-1_冷凍人.jpeg" alt="冷凍美男姜成勳">
</div>
<div class="container22 readable-col-2 readable-col-2--left">
<section class="ebook-intro section"> <section class="ebook-intro section">
<h3>冷凍美男-姜成勳</h3> <h3>冷凍美男-姜成勳</h3>
<p class="ebook-intro-lead">印象深刻的是主唱姜成勳擁有和 20 年前一樣的驚人外貌,堪稱冷凍人級別!還被張水院虧說到 70 歲還是會繼續留這個髮型!</p> <p class="ebook-intro-lead">印象深刻的是主唱姜成勳擁有和 20 年前一樣的驚人外貌,堪稱冷凍人級別!還被張水院虧說到 70 歲還是會繼續留這個髮型!</p>
<p class="ebook-intro-lead">事實上這段期間他經歷了波折,遭到合夥人詐騙卻被誣告,過了兩年法院才還他清白,應該是最辛苦的他,反而只覺得對粉絲和大眾感到抱歉,令人心疼! <p class="ebook-intro-lead">事實上這段期間他經歷了波折,遭到合夥人詐騙卻被誣告,過了兩年法院才還他清白,應該是最辛苦的他,反而只覺得對粉絲和大眾感到抱歉,令人心疼!
</p> </p>
</section> </section>
<div class="container22">
<img src="/totoga2/readable/11-1_冷凍人.jpeg" alt="冷凍美男姜成勳">
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="container31"> <div class="container31 readable-col-3 readable-col-3--left">
<img src="/totoga2/readable/11-3_160416_0_03.png" alt="李宰鎮"> <img src="/totoga2/readable/11-3_160416_0_03.png" alt="李宰鎮">
</div> </div>
<div class="container32 readable-col-3 readable-col-3--left">
<section class="ebook-intro section"> <section class="ebook-intro section">
<h3>魔性魅力-李宰鎮</h3> <h3>魔性魅力-李宰鎮</h3>
<p class="ebook-intro-lead">節目剛開始時,大家高興地彼此問候,唯獨被嚇壞的李宰鎮問為什麼要這樣歡迎,性格似乎有點與眾不同。訪問輪到他時,就連劉在錫和 HAHA <p class="ebook-intro-lead">節目剛開始時,大家高興地彼此問候,唯獨被嚇壞的李宰鎮問為什麼要這樣歡迎,性格似乎有點與眾不同。訪問輪到他時,就連劉在錫和 HAHA
@@ -351,61 +357,62 @@
<p class="ebook-intro-lead"> <p class="ebook-intro-lead">
隨著節目的進行,開始發現他的魔性魅力,李宰鎮的獨特思考方式、新穎的回答,具有他個人特色的綜藝感,讓採訪過無數來賓,見過大風大浪的劉在錫也爆笑又暴跳!</p> 隨著節目的進行,開始發現他的魔性魅力,李宰鎮的獨特思考方式、新穎的回答,具有他個人特色的綜藝感,讓採訪過無數來賓,見過大風大浪的劉在錫也爆笑又暴跳!</p>
</section> </section>
<div class="container33"> </div>
<div class="container33 readable-col-3 readable-col-3--right">
<img src="/totoga2/readable/12-2_160416_0_07.png" alt="劉在錫反應"> <img src="/totoga2/readable/12-2_160416_0_07.png" alt="劉在錫反應">
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="container41"> <div class="container41 readable-col-4 readable-col-4--left">
<img src="/totoga2/readable/12-1_160416_0_06.png" alt="崩潰分鏡 1"> <img src="/totoga2/readable/12-1_160416_0_06.png" alt="崩潰分鏡 1">
</div> </div>
<div class="container42"> <div class="container42 readable-col-4 readable-col-4--left">
<img src="/totoga2/readable/12-3_為什麼你要笑.jpeg" alt="為什麼你要笑"> <img src="/totoga2/readable/12-3_為什麼你要笑.jpeg" alt="為什麼你要笑">
</div> </div>
<div class="container43"> <div class="container43 readable-col-4 readable-col-4--right">
<img src="/totoga2/readable/12-4_160416_0_18.jpeg" alt="崩潰分鏡 2"> <img src="/totoga2/readable/12-4_160416_0_18.jpeg" alt="崩潰分鏡 2">
</div> </div>
<div class="container44"> <div class="container44 readable-col-4 readable-col-4--right">
<img src="/totoga2/readable/12-5_啊啊..jpeg" alt="啊啊.."> <img src="/totoga2/readable/12-5_啊啊..jpeg" alt="啊啊..">
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="container31"> <div class="container31 readable-col-3 readable-col-3--left">
<img src="/totoga2/readable/13-1_那是我畫的!所以是我的!.jpeg" alt="那是我畫的!所以是我的!"> <img src="/totoga2/readable/13-1_那是我畫的!所以是我的!.jpeg" alt="那是我畫的!所以是我的!">
</div> </div>
<div class="container32"> <div class="container32 readable-col-3 readable-col-3--left">
<img src="/totoga2/readable/13-2哥得自己畫!.jpeg" alt="哥得自己畫!"> <img src="/totoga2/readable/13-2哥得自己畫!.jpeg" alt="哥得自己畫!">
</div> </div>
<div class="container33"> <div class="container33 readable-col-3 readable-col-3--right">
<img src="/totoga2/readable/13-31779025232670.jpg" alt="肖像畫成品"> <img src="/totoga2/readable/13-31779025232670.jpg" alt="肖像畫成品">
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="container31"> <div class="container31 readable-col-3 readable-col-3--left">
<img src="/totoga2/readable/13-4_160416_0_05.png" alt="訪談過程"> <img src="/totoga2/readable/13-4_160416_0_05.png" alt="訪談過程">
</div> </div>
<div class="container32"> <div class="container32 readable-col-3 readable-col-3--left">
<img src="/totoga2/readable/13-5_ScreenShot-VideoID-2epKr_O2s9E-TimeS-31.png" alt="對話節錄"> <img src="/totoga2/readable/13-5_ScreenShot-VideoID-2epKr_O2s9E-TimeS-31.png" alt="對話節錄">
</div> </div>
<div class="container33"> <div class="container33 readable-col-3 readable-col-3--right">
<img src="/totoga2/readable/13-7_生氣在錫大頭版.png" alt="生氣在錫大頭版"> <img src="/totoga2/readable/13-7_生氣在錫大頭版.png" alt="生氣在錫大頭版">
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="container22"> <div class="container22 readable-col-2 readable-col-2--left">
<img src="/totoga2/readable/11-2_無法輕易征服的高山 宰鎮.jpeg" alt="無法輕易征服的高山 宰鎮"> <img src="/totoga2/readable/11-2_無法輕易征服的高山 宰鎮.jpeg" alt="無法輕易征服的高山 宰鎮">
</div> </div>
<div class="container21"> <div class="container21 readable-col-2 readable-col-2--right">
<img src="/totoga2/readable/11-4_160416_0_08.jpeg" alt="綜藝感爆發"> <img src="/totoga2/readable/11-4_160416_0_08.jpeg" alt="綜藝感爆發">
</div> </div>
</div> </div>
<div class="readable-homework-block"> <div class="readable-homework-block">
<div class="container" style="height: 22vh;"> <div class="container" style="height: 22vh;">
<div class="container11"> <div class="container11 readable-col-1">
<div class="box-content"> <div class="box-content">
<h3>魔性魅力-李宰鎮</h3> <h3>魔性魅力-李宰鎮</h3>
<p style="margin-top: 10px; font-size: 1.1rem;"> <p style="margin-top: 10px; font-size: 1.1rem;">
@@ -417,19 +424,19 @@
</div> </div>
<div class="container" style="height: 30vh;"> <div class="container" style="height: 30vh;">
<div class="container31"> <div class="container31 readable-col-3 readable-col-3--left">
<div class="box-content" style="padding: 0;"> <div class="box-content" style="padding: 0;">
<img src="readable/11-2_無法輕易征服的高山 宰鎮.jpeg" alt="無法輕易征服的高山"> <img src="readable/11-2_無法輕易征服的高山 宰鎮.jpeg" alt="無法輕易征服的高山">
</div> </div>
</div> </div>
<div class="container32"> <div class="container32 readable-col-3 readable-col-3--left">
<div class="box-content"> <div class="box-content">
<h3>無法輕易征服的高山</h3> <h3>無法輕易征服的高山</h3>
<p style="font-size: 0.95rem;">面對這座高山,主持人們頻頻在李宰鎮獨特的思考迴路中迷失方向。他是必須要「清楚表達才聽得懂的極端 O <p style="font-size: 0.95rem;">面對這座高山,主持人們頻頻在李宰鎮獨特的思考迴路中迷失方向。他是必須要「清楚表達才聽得懂的極端 O
型」人格,不按綜藝套路出牌,讓劉在錫讚嘆這絕對是自己「生平第一次看到的角色」!</p> 型」人格,不按綜藝套路出牌,讓劉在錫讚嘆這絕對是自己「生平第一次看到的角色」!</p>
</div> </div>
</div> </div>
<div class="container33"> <div class="container33 readable-col-3 readable-col-3--right">
<div class="box-content" style="padding: 0;"> <div class="box-content" style="padding: 0;">
<img src="readable/11-3_160416_0_03.jpg" alt="初登場畫面"> <img src="readable/11-3_160416_0_03.jpg" alt="初登場畫面">
</div> </div>
@@ -437,12 +444,12 @@
</div> </div>
<div class="container" style="height: 30vh;"> <div class="container" style="height: 30vh;">
<div class="container22"> <div class="container22 readable-col-2 readable-col-2--left">
<div class="box-content" style="padding: 0;"> <div class="box-content" style="padding: 0;">
<img src="readable/11-4_160416_0_08.jpg" alt="主持人群感到緊張"> <img src="readable/11-4_160416_0_08.jpg" alt="主持人群感到緊張">
</div> </div>
</div> </div>
<div class="container21"> <div class="container21 readable-col-2 readable-col-2--right">
<div class="box-content"> <div class="box-content">
<h3>見過大風大浪也緊張</h3> <h3>見過大風大浪也緊張</h3>
<p>隨著訪問推進,李宰鎮那具有個人特色的綜藝感漸漸展露。他的耿直反應和新穎回答,讓採訪過無數來賓的劉在錫和 HAHA <p>隨著訪問推進,李宰鎮那具有個人特色的綜藝感漸漸展露。他的耿直反應和新穎回答,讓採訪過無數來賓的劉在錫和 HAHA
@@ -453,17 +460,17 @@
</div> </div>
<div class="container" style="height: 32vh;"> <div class="container" style="height: 32vh;">
<div class="container31"> <div class="container31 readable-col-3 readable-col-3--left">
<div class="box-content" style="padding: 0;"> <div class="box-content" style="padding: 0;">
<img src="readable/12-1_160416_0_06.jpg" alt="宰鎮突然大笑"> <img src="readable/12-1_160416_0_06.jpg" alt="宰鎮突然大笑">
</div> </div>
</div> </div>
<div class="container32"> <div class="container32 readable-col-3 readable-col-3--left">
<div class="box-content" style="padding: 0;"> <div class="box-content" style="padding: 0;">
<img src="readable/12-2_160416_0_07.jpg" alt="HAHA被嚇到"> <img src="readable/12-2_160416_0_07.jpg" alt="HAHA被嚇到">
</div> </div>
</div> </div>
<div class="container33"> <div class="container33 readable-col-3 readable-col-3--right">
<div class="box-content"> <div class="box-content">
<h3>無預警爆發的魔性笑聲</h3> <h3>無預警爆發的魔性笑聲</h3>
<p style="font-size: 0.95rem;"> <p style="font-size: 0.95rem;">
@@ -474,14 +481,14 @@
</div> </div>
<div class="container" style="height: 35vh;"> <div class="container" style="height: 35vh;">
<div class="container22"> <div class="container22 readable-col-2 readable-col-2--left">
<div class="box-content"> <div class="box-content">
<h3>讓全場陷入混亂的「精神衝擊」</h3> <h3>讓全場陷入混亂的「精神衝擊」</h3>
<p>控場能力一流的劉在錫也徹底崩潰,一邊按耐著受驚的心臟,一邊哭笑不得、畢恭畢敬地追問:「真的真的很抱歉,但是為什麼你要笑?」這種摸不著頭緒卻又無敵純真的個人特色,讓劉在錫也爆笑又暴跳! <p>控場能力一流的劉在錫也徹底崩潰,一邊按耐著受驚的心臟,一邊哭笑不得、畢恭畢敬地追問:「真的真的很抱歉,但是為什麼你要笑?」這種摸不著頭緒卻又無敵純真的個人特色,讓劉在錫也爆笑又暴跳!
</p> </p>
</div> </div>
</div> </div>
<div class="container21"> <div class="container21 readable-col-2 readable-col-2--right">
<div class="box-content" style="padding: 0;"> <div class="box-content" style="padding: 0;">
<img src="readable/12-3_為什麼你要笑.jpg" alt="為什麼你要笑近鏡頭"> <img src="readable/12-3_為什麼你要笑.jpg" alt="為什麼你要笑近鏡頭">
</div> </div>
@@ -489,12 +496,12 @@
</div> </div>
<div class="container" style="height: 35vh;"> <div class="container" style="height: 35vh;">
<div class="container31"> <div class="container31 readable-col-3 readable-col-3--left">
<div class="box-content" style="padding: 0;"> <div class="box-content" style="padding: 0;">
<img src="readable/13-1_那是我畫的!所以是我的!.jpg" alt="那是我畫的所以是我的"> <img src="readable/13-1_那是我畫的!所以是我的!.jpg" alt="那是我畫的所以是我的">
</div> </div>
</div> </div>
<div class="container32"> <div class="container32 readable-col-3 readable-col-3--left">
<div class="box-content"> <div class="box-content">
<h3>靈魂拷問與相當無語</h3> <h3>靈魂拷問與相當無語</h3>
<p style="font-size: 0.9rem;"> <p style="font-size: 0.9rem;">
@@ -502,7 +509,7 @@
瞬間失去語言能力,雙手交疊乖乖坐好,靈魂短暫登出。</p> 瞬間失去語言能力,雙手交疊乖乖坐好,靈魂短暫登出。</p>
</div> </div>
</div> </div>
<div class="container33"> <div class="container33 readable-col-3 readable-col-3--right">
<div class="box-content" style="padding: 0;"> <div class="box-content" style="padding: 0;">
<img src="readable/12-5_啊啊..jpg" alt="啊啊相當無語字幕"> <img src="readable/12-5_啊啊..jpg" alt="啊啊相當無語字幕">
</div> </div>
@@ -510,12 +517,12 @@
</div> </div>
<div class="container" style="height: 35vh;"> <div class="container" style="height: 35vh;">
<div class="container22"> <div class="container22 readable-col-2 readable-col-2--left">
<div class="box-content" style="padding: 0;"> <div class="box-content" style="padding: 0;">
<img src="readable/13-1_那是我畫的!所以是我的!.jpg" alt="那是我畫的所以是我的"> <img src="readable/13-1_那是我畫的!所以是我的!.jpg" alt="那是我畫的所以是我的">
</div> </div>
</div> </div>
<div class="container21"> <div class="container21 readable-col-2 readable-col-2--right">
<div class="box-content"> <div class="box-content">
<h3>絕對所有權!</h3> <h3>絕對所有權!</h3>
<p>好不容易在現場畫完了畫,當在錫哥理所當然地伸手準備拿走時,李宰鎮卻像個護著玩具的小孩,理直氣壯地一把護住自己的作品,神色認真地回絕:「不行,為什麼你要拿走?那是我畫的!所以是我的!」 <p>好不容易在現場畫完了畫,當在錫哥理所當然地伸手準備拿走時,李宰鎮卻像個護著玩具的小孩,理直氣壯地一把護住自己的作品,神色認真地回絕:「不行,為什麼你要拿走?那是我畫的!所以是我的!」
@@ -525,22 +532,22 @@
</div> </div>
<div class="container" style="height: 40vh;"> <div class="container" style="height: 40vh;">
<div class="container41"> <div class="container41 readable-col-4 readable-col-4--left">
<div class="box-content" style="padding: 0;"> <div class="box-content" style="padding: 0;">
<img src="readable/13-2哥得自己畫!.jpg" alt="哥得自己畫截圖"> <img src="readable/13-2哥得自己畫!.jpg" alt="哥得自己畫截圖">
</div> </div>
</div> </div>
<div class="container42"> <div class="container42 readable-col-4 readable-col-4--left">
<div class="box-content" style="padding: 0;"> <div class="box-content" style="padding: 0;">
<img src="readable/13-4_160416_0_05.jpg" alt="志源大喊畫面"> <img src="readable/13-4_160416_0_05.jpg" alt="志源大喊畫面">
</div> </div>
</div> </div>
<div class="container43"> <div class="container43 readable-col-4 readable-col-4--right">
<div class="box-content" style="padding: 0;"> <div class="box-content" style="padding: 0;">
<img src="readable/13-5_ScreenShot-VideoID-2epKr_O2s9E-TimeS-31.jpg" alt="志源摟住宰鎮"> <img src="readable/13-5_ScreenShot-VideoID-2epKr_O2s9E-TimeS-31.jpg" alt="志源摟住宰鎮">
</div> </div>
</div> </div>
<div class="container44"> <div class="container44 readable-col-4 readable-col-4--right">
<div class="box-content" style="padding: 0;"> <div class="box-content" style="padding: 0;">
<img src="readable/13-6_ScreenShot-VideoID-2epKr_O2s9E-TimeS-42.jpeg" alt="聯手逼退在錫"> <img src="readable/13-6_ScreenShot-VideoID-2epKr_O2s9E-TimeS-42.jpeg" alt="聯手逼退在錫">
</div> </div>
@@ -548,7 +555,7 @@
</div> </div>
<div class="container" style="height: 35vh;"> <div class="container" style="height: 35vh;">
<div class="container22"> <div class="container22 readable-col-2 readable-col-2--left">
<div class="box-content"> <div class="box-content">
<h3>隊長聯手逗弄主持人的日常</h3> <h3>隊長聯手逗弄主持人的日常</h3>
<p>坐在一旁的隊長殷志源看著在錫哥被宰鎮逼到牆角,完全進入了看戲模式!志源非但沒有解圍,反而一把摟住自家大哥,理直氣壯地站在宰鎮這邊,對著在錫哥大喊:「哥要是想拿走,你得自己畫!」 <p>坐在一旁的隊長殷志源看著在錫哥被宰鎮逼到牆角,完全進入了看戲模式!志源非但沒有解圍,反而一把摟住自家大哥,理直氣壯地站在宰鎮這邊,對著在錫哥大喊:「哥要是想拿走,你得自己畫!」
@@ -558,7 +565,7 @@
逗得毫無還手之力。這種難以預測的思考方式與出人意料的回答,更讓所有人對這位神祕又迷人的角色充滿了無限的好奇!</p> 逗得毫無還手之力。這種難以預測的思考方式與出人意料的回答,更讓所有人對這位神祕又迷人的角色充滿了無限的好奇!</p>
</div> </div>
</div> </div>
<div class="container21"> <div class="container21 readable-col-2 readable-col-2--right">
<div class="box-content" style="padding: 0;"> <div class="box-content" style="padding: 0;">
<img src="readable/13-31779025232670.jpg" alt="水晶男孩現場互動"> <img src="readable/13-31779025232670.jpg" alt="水晶男孩現場互動">
</div> </div>
@@ -567,6 +574,7 @@
</div> </div>
<div class="container"> <div class="container">
<div class="container22 readable-col-2 readable-col-2--left">
<section class="ebook-intro section"> <section class="ebook-intro section">
<h2 class="section-title">秘密召集與重組意願</h2> <h2 class="section-title">秘密召集與重組意願</h2>
<p class="ebook-intro-lead">2016 年,是解散後的第 16 年,也正好是水晶男孩出道的第 20 <p class="ebook-intro-lead">2016 年,是解散後的第 16 年,也正好是水晶男孩出道的第 20
@@ -580,7 +588,8 @@
</p> </p>
<p class="ebook-intro-note">圖片來源:MBC</p> <p class="ebook-intro-note">圖片來源:MBC</p>
</section> </section>
<div class="container22"> </div>
<div class="container21 readable-col-2 readable-col-2--right">
<section class="ebook-intro section" <section class="ebook-intro section"
style="background-color: var(--primary); color: var(--black); height:100%;"> style="background-color: var(--primary); color: var(--black); height:100%;">
<h3 style="color:var(--black); border-left-color:var(--black)">保密協議與解散緣由</h3> <h3 style="color:var(--black); border-left-color:var(--black)">保密協議與解散緣由</h3>
@@ -614,6 +623,7 @@
</div> </div>
<div class="container"> <div class="container">
<div class="container22 readable-col-2 readable-col-2--left">
<section class="ebook-intro section"> <section class="ebook-intro section">
<h3>KTV挑戰:考驗默契的難關</h3> <h3>KTV挑戰:考驗默契的難關</h3>
<p class="ebook-intro-lead">光是成員們有鬥志合體還不夠,必須在 KTV 機器評鑑分數超過 95 <p class="ebook-intro-lead">光是成員們有鬥志合體還不夠,必須在 KTV 機器評鑑分數超過 95
@@ -622,6 +632,8 @@
BACK〉跳的卻是〈品生品死〉!每首歌曲的起承轉合都是姜成勳,歌曲大股東姜成勳非但一人飾兩角、頂替高志溶的部分,也記得舞步帶領成員。但,歌都是姜成勳在唱,先失聲的卻是李宰鎮,令劉在錫笑到滿臉脹紅。 BACK〉跳的卻是〈品生品死〉!每首歌曲的起承轉合都是姜成勳,歌曲大股東姜成勳非但一人飾兩角、頂替高志溶的部分,也記得舞步帶領成員。但,歌都是姜成勳在唱,先失聲的卻是李宰鎮,令劉在錫笑到滿臉脹紅。
</p> </p>
</section> </section>
</div>
<div class="container21 readable-col-2 readable-col-2--right">
<section class="ebook-intro section"> <section class="ebook-intro section">
<h3>第六顆水晶-高志溶的尋訪</h3> <h3>第六顆水晶-高志溶的尋訪</h3>
<p class="ebook-intro-lead">籌備接近尾聲時,劉在錫終於帶到高志溶的話題,才知道原來殷志源和李宰鎮也 16 <p class="ebook-intro-lead">籌備接近尾聲時,劉在錫終於帶到高志溶的話題,才知道原來殷志源和李宰鎮也 16
@@ -632,6 +644,7 @@
年的他來說,重新回到舞台上展開活動、再次把私生活交給大眾檢視,絕不是一件容易的事。透過劉在錫的真誠說服,他是否會踏上舞台呢?ʕ •ᴥ•ʔ</p> 年的他來說,重新回到舞台上展開活動、再次把私生活交給大眾檢視,絕不是一件容易的事。透過劉在錫的真誠說服,他是否會踏上舞台呢?ʕ •ᴥ•ʔ</p>
</section> </section>
</div> </div>
</div>
<div class="container"> <div class="container">
<section class="ebook-intro section"> <section class="ebook-intro section">
@@ -652,6 +665,7 @@
</div> </div>
<div class="container"> <div class="container">
<div class="container22 readable-col-2 readable-col-2--left">
<section class="ebook-intro section"> <section class="ebook-intro section">
<h3>第一站:高速公路休息站</h3> <h3>第一站:高速公路休息站</h3>
<p class="ebook-intro-lead">2016 年 4 月 14 <p class="ebook-intro-lead">2016 年 4 月 14
@@ -661,6 +675,8 @@
消磨膝蓋準備表演的〈品生品死〉,台下卻很冷清,還好唱到國民歌曲〈Couple〉時,很多觀眾還是耳熟能詳,甚至可以跟著唱跳。一開始覺得丟人想找地洞鑽的他們,表演到後來也跟著興奮了! 消磨膝蓋準備表演的〈品生品死〉,台下卻很冷清,還好唱到國民歌曲〈Couple〉時,很多觀眾還是耳熟能詳,甚至可以跟著唱跳。一開始覺得丟人想找地洞鑽的他們,表演到後來也跟著興奮了!
</p> </p>
</section> </section>
</div>
<div class="container21 readable-col-2 readable-col-2--right">
<section class="ebook-intro section"> <section class="ebook-intro section">
<h3>第二站:民俗村與瘋狂粉絲</h3> <h3>第二站:民俗村與瘋狂粉絲</h3>
<p class="ebook-intro-lead">接著來到民俗村,正好有一群國小生來校外教學,20 <p class="ebook-intro-lead">接著來到民俗村,正好有一群國小生來校外教學,20
@@ -670,6 +686,7 @@
<p class="ebook-intro-lead">第二首〈Couple〉前奏一下,觀眾立刻興奮起來,甚至還有狂熱粉絲亂入舞台抱住殷志源,嚇到他差點唱不出來!</p> <p class="ebook-intro-lead">第二首〈Couple〉前奏一下,觀眾立刻興奮起來,甚至還有狂熱粉絲亂入舞台抱住殷志源,嚇到他差點唱不出來!</p>
</section> </section>
</div> </div>
</div>
<div class="container"> <div class="container">
<section class="ebook-intro section"> <section class="ebook-intro section">
@@ -687,6 +704,7 @@
</div> </div>
<div class="container"> <div class="container">
<div class="container22 readable-col-2 readable-col-2--left">
<section class="ebook-intro section"> <section class="ebook-intro section">
<h3>高志溶的真心與團魂</h3> <h3>高志溶的真心與團魂</h3>
<p class="ebook-intro-lead"> <p class="ebook-intro-lead">
@@ -696,6 +714,8 @@
雖然他無法再次以水晶男孩的身分在演藝圈活動,但希望成員們可以藉由這個機會復出,所以最後決定出演,希望自己能幫忙抓住這個機會。而成員們雖然希望高志溶出現,但也表示尊重高志溶的選擇;當製作組提到待會要見到成員時,高志溶略為哽咽地說:「應該會很吃驚吧...可能以為我不會來吧...」一直以來無法回應成員期待的他,眼眶瞬間泛紅,雙方為彼此著想的心意,是他們重視這份情誼的最好證明! 雖然他無法再次以水晶男孩的身分在演藝圈活動,但希望成員們可以藉由這個機會復出,所以最後決定出演,希望自己能幫忙抓住這個機會。而成員們雖然希望高志溶出現,但也表示尊重高志溶的選擇;當製作組提到待會要見到成員時,高志溶略為哽咽地說:「應該會很吃驚吧...可能以為我不會來吧...」一直以來無法回應成員期待的他,眼眶瞬間泛紅,雙方為彼此著想的心意,是他們重視這份情誼的最好證明!
</p> </p>
</section> </section>
</div>
<div class="container21 readable-col-2 readable-col-2--right">
<section class="ebook-intro section"> <section class="ebook-intro section">
<h3>無人能取代的第六個位置</h3> <h3>無人能取代的第六個位置</h3>
<p class="ebook-intro-lead"> <p class="ebook-intro-lead">
@@ -706,6 +726,7 @@
16 年前,六個人完整的舞台!</p> 16 年前,六個人完整的舞台!</p>
</section> </section>
</div> </div>
</div>
<div class="container"> <div class="container">
<section class="ebook-intro section" <section class="ebook-intro section"
@@ -745,6 +766,7 @@
</div> </div>
<div class="container"> <div class="container">
<div class="container22 readable-col-2 readable-col-2--left">
<section class="ebook-intro section"> <section class="ebook-intro section">
<h3>我是水晶男孩的高志溶</h3> <h3>我是水晶男孩的高志溶</h3>
<p class="ebook-intro-lead"> <p class="ebook-intro-lead">
@@ -753,6 +775,8 @@
看著台下小黃,高志溶無法輕易回答,想到小黃苦苦地等待,他不禁紅了眼眶,久久說不出話來...台下小黃安慰地應援著:「不要哭!高志溶!」「沒關係!高志溶!」當高志溶每次想開口時都和忍著哭的粉絲對視,所以一直說不出話... 看著台下小黃,高志溶無法輕易回答,想到小黃苦苦地等待,他不禁紅了眼眶,久久說不出話來...台下小黃安慰地應援著:「不要哭!高志溶!」「沒關係!高志溶!」當高志溶每次想開口時都和忍著哭的粉絲對視,所以一直說不出話...
</p> </p>
</section> </section>
</div>
<div class="container21 readable-col-2 readable-col-2--right">
<section class="ebook-intro section"> <section class="ebook-intro section">
<h3>殷隊的體貼與釋懷</h3> <h3>殷隊的體貼與釋懷</h3>
<p class="ebook-intro-lead">殷志源為了讓他緩和,主動開口:「志溶在各位的喜愛下度過了 20 <p class="ebook-intro-lead">殷志源為了讓他緩和,主動開口:「志溶在各位的喜愛下度過了 20
@@ -762,6 +786,7 @@
</p> </p>
</section> </section>
</div> </div>
</div>
<div class="container"> <div class="container">
<section class="ebook-intro section" style="border: 2px solid var(--primary);"> <section class="ebook-intro section" style="border: 2px solid var(--primary);">