@charset "UTF-8"; body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; background:#f9faf9; font-size:14px; line-height:22px; color:rgb(51, 51, 51); padding:0px; } a, .card-title.h5 { outline:none; -webkit-tap-highlight-color:white; color:rgb(51, 51, 51); -webkit-transition:all .2s ease; transition:all .2s ease; } p { margin:0 0 10px 0; line-height:28px; } ul { list-style-type:square; } *:focus, a:focus, a:hover, a:active, a:visited, a.active input:focus, select:focus, textarea:focus, button:focus, .btn:focus { color:#000; text-decoration:none; outline:none; -webkit-tap-highlight-color:white; box-shadow:none; } .btn.btn-white { border:#FFF; background:#FFF; text-transform:uppercase; font-size:15px; padding-left:20px; padding-right:20px; } .btn.load-more { color:#888; } .btn.load-more:hover { color:#000; } .btn.btn-lg.btn-buy { border:none; cursor:pointer; display:inline-block; text-align:center; white-space:nowrap; font-size:17px; line-height:1.17648; font-weight:400; min-width:28px; padding-left:16px; padding-right:16px; padding-top:8px; padding-bottom:8px; border-radius:18px; background:#353635; color:#fff;} img.img-responsive { display:inline-block; } .fixed-top-navbar { overflow:hidden; background:#232323; position:fixed; top:0; width:100%; z-index:1001; height:24px; color:#8f9192; line-height:24px; padding-left:14px; font-size:11px; } .fixed-top-navbar a, .fixed-top-navbar a:visited { color:#8f9192; } #header { width:100%; } #header .top { position:relative; text-align:center; padding:120px 0 34px; } #header .top .search { position:absolute; right:10px; top:10px; text-align:right; } #header .top .search .form-control { width:160px; -webkit-transition:width .2s ease-in-out; transition:width .2s ease-in-out; } #header .top .search .form-control:focus { width:240px; } header nav { clear:both; display:block; line-height:60px; height:60px; position:relative; } #header .brand { text-transform:uppercase; font-size:40px; font-weight:300; color:#000; } #header .brand span { color:#000; position:relative; display:inline-block; } #header .brand span:hover { color:rgb(51, 51, 51); } #header.scrolled { position:fixed; top:0; left:0; right:0; width:100%; background:#FFF; z-index:999999; box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 20px 0px; height:60px; -webkit-transition:box-shadow ease 0.8s; -moz-transition:box-shadow ease 0.8s; transition:box-shadow ease 0.8s; } #header.scrolled .top { padding:0px; display:inline-block; text-align:left; float:left; width:auto; padding-left:12px; line-height:60px; height:60px; overflow:hidden; } #header.scrolled .menu-container { padding:0px; display:inline-block; text-align:left; float:right; width:auto; padding-right:22px; line-height:60px; } #header.scrolled .brand img { height:60px; width:auto; padding:4px; } #header .slogan { color:#B0B0B0; font-size:17px; margin-top:22px; font-style:italic; } #posts col-lg-1, #posts col-lg-2, #posts col-lg-3, #posts col-lg-4, #posts col-lg-5, #posts col-lg-6, #posts col-lg-7, #posts col-lg-8, #posts col-lg-9, #posts col-lg-10, #posts col-lg-11, #posts col-lg-12 { padding:0; } #posts .row { margin-left:0; margin-right:0; } #posts { margin:74px auto; min-height:300px; } #posts .post { background:#fff; margin:11px; height:auto; overflow:hidden; -webkit-box-shadow:0px 3px 4px 0px rgba(0,0,0,0.03); -moz-box-shadow:0px 3px 4px 0px rgba(0,0,0,0.03); box-shadow:0px 3px 4px 0px rgba(0,0,0,0.03); } #posts .post:hover { -webkit-box-shadow:0px 3px 4px 0px rgba(0,0,0,0.1); -moz-box-shadow:0px 3px 4px 0px rgba(0,0,0,0.1); box-shadow:0px 3px 4px 0px rgba(0,0,0,0.1); } #posts .post.column { padding:0; } #posts .post .caption { margin-top:0; } #posts .tags { background:#fff; text-align:center; margin:20px; padding:10px 0; -webkit-box-shadow:0px 3px 4px 0px rgba(0,0,0,0.03); -moz-box-shadow:0px 3px 4px 0px rgba(0,0,0,0.03); box-shadow:0px 3px 4px 0px rgba(0,0,0,0.03); } #posts .tags { padding-bottom:20px; } .media { margin-top:0; margin-left:0; margin-right:0; } #posts .post .caption { padding:20px 24px; } .post .post-title { color:#000; font-size:22px; line-height:26px; text-decoration:none; } .post .post-date { color:#727272; display:block; font-size:12px; text-transform:uppercase; margin-top:8px; } .post .post-description { margin:14px auto; } #blog-post-content { margin:80px auto 20px; } #blog-post-content .post { background:#FFF; } #blog-post-content .post-tag-list { margin-bottom:40px; } #blog-post-content .post-tag { color:rgb(51, 51, 51); display:inline-block; font-size:15px; line-height:20px; text-transform:uppercase; margin:5px 0; color:rgb(51, 51, 51); padding:6px 16px; } #blog-post-content .post-tag.label { background:rgb(51, 51, 51); color:#FFF; } #blog-post-content .post-content-article { text-align:justify; } #blog-post-content .main-figure img { width:100%; height:auto; -webkit-animation:pop-in 0.05s; -moz-animation:pop-in 0.05s; -ms-animation:pop-in 0.05s; } #blog-post-content .caption, #blog-post-content .related { background:#fff; margin:20px auto; padding:1em 2em; -webkit-box-shadow:0px 3px 4px 0px rgba(0,0,0,0.03); -moz-box-shadow:0px 3px 4px 0px rgba(0,0,0,0.03); box-shadow:0px 3px 4px 0px rgba(0,0,0,0.03); } #blog-post-content .caption { margin-top:0px; } #blog-post-content .caption { padding-bottom:40px; } #blog-post-content .header { text-align:center; margin-bottom:40px; } #blog-post-content .related a { color:#424242; text-decoration:none; } #blog-post-content .related a:hover { color:#000; } #loadMoreButton .btn { display:inline-block; width:90%; border:none; cursor:pointer; text-align:center; white-space:nowrap; font-size:17px; font-weight:400; min-width:28px; padding-left:16px; padding-right:16px; padding-top:8px; padding-bottom:8px; border-radius:24px; margin:32px 20px; background:#BCBCBC; color:#fff; } #loadMoreButton .btn:hover { background:#0C0C0C; } #footer { text-align:center; padding:0; } #footer .list-inline { padding-left:0; margin-left:-5px; list-style:none; } #footer .list-inline>li { display:inline-block; padding-right:5px; padding-left:5px; } #footer #links { padding:54px; } #footer .brand { font-size:24px; font-weight:300; } #footer li { margin-top:5px; } #footer li a { color:#7F7F7F; text-decoration:none; } #footer li a:hover { color:#000; } .no-margin { margin:0; } .no-padding { padding:0; } .body-overflow { overflow:hidden; } nav { height:40px; width:100%; max-width:976px; margin:0 auto; text-align:center; text-transform:uppercase; } nav a { display:block; text-decoration:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-size:11pt; color:#1c1d1c; } nav a:hover{ background:#1c1d1c; color:#f0f1f5; } nav ul{ display:inline-block; list-style-type:none; margin:0px; } nav ul li{ margin:0px; } .menu-container { padding-left:30px; padding-right:30px; width:100%; text-align:center; } .grt-menu-row { display:flex; flex-direction:row; justify-content:space-between; } .grt-mobile-button { display:none; } .grt-mobile-button:focus { border:0; outline:0; } ul.grt-menu { display:block; margin:0 -10px 0 0; padding:0; list-style-type:none; } ul.grt-menu:after { content:""; clear:both; display:block; } ul.grt-menu li { display:inline-block; margin:0; padding:0; -webkit-transition:all ease 0.8s; -moz-transition:all ease 0.8s; transition:all ease 0.8s; } ul.grt-menu li a { padding:5px 12px; font-size:21px; display:inline-block; color:rgb(51, 51, 51); line-height:1.1em; box-shadow:inset 0 0 0 0 #FFF; -webkit-transition:all ease 0.8s; -moz-transition:all ease 0.8s; transition:all ease 0.8s; position:relative; text-decoration:none; } ul.grt-menu li.active a:after { position:absolute; bottom:1px; content:""; left:12px; right:12px; border-bottom:2px solid #282c2f; } ul.grt-menu li.grt-dropdown:hover { cursor:pointer; } ul.grt-menu li.grt-dropdown:hover a { box-shadow:none; } ul.grt-menu li.grt-dropdown ul.grt-dropdown-list { display:none; position:absolute; background:#FFF; margin:0; padding:0; min-width:160px; animation:fadeInAnimation 0.8s; z-index:999; } ul.grt-menu li.grt-dropdown ul.grt-dropdown-list li a { display:block; font-size:18px; color:rgb(51, 51, 51); -webkit-transition:all ease 0.8s; -moz-transition:all ease 0.8s; transition:all ease 0.8s; padding:9px 12px; background:#FFF; } ul.grt-menu li.grt-dropdown ul.grt-dropdown-list li a:hover { color:#f0f1f5; background:#282c2f; } ul.grt-menu li.grt-dropdown ul.grt-dropdown-list li:last-child a { padding-bottom:15px; } ul.grt-menu li.grt-dropdown.active-dropdown { background:#282c2f; } ul.grt-menu li.grt-dropdown.active-dropdown ul.grt-dropdown-list { display:block !important; } ul.grt-menu li.grt-dropdown.active-dropdown a { color:#FFF; } @media (min-width:768px) { #posts .post.column { width:31%; } #posts .columns.grid { margin-bottom:40px; } #posts .post { min-height:330px; animation:fadeInAnimation ease 1s; animation-iteration-count:1; animation-fill-mode:forwards; } #posts .post.featured, #posts .post.big { height:auto; } #posts .post.big .caption, #posts .post.featured .caption { margin:50px auto; padding:40px 40px 0; } ul.grt-menu li.grt-dropdown:hover > a + ul.grt-dropdown-list { display:block; top:calc(100% - 17px); } ul.grt-menu li.grt-dropdown ul.grt-dropdown-list li { display:block; } ul.grt-menu li a { min-width:160px; } ul.grt-menu li a:hover { color:#FFF; } ul.grt-menu li.grt-dropdown > ul li{ position:relative; display:none; } ul.grt-menu li.grt-dropdown:hover > ul li{ display:block; animation:navmenu 500ms forwards; z-index:99999999; box-shadow:3px 3px 3px rgba(0,0,0,0.2); } #blog-post-content .related .columns { margin-bottom:30px; } #blog-post-content .related .related-header { margin-bottom:40px; } #blog-post-content .related .card-image img { width:300px; height:300px; } } @media (min-width:768px) and (max-width:991px) { ul.grt-menu li a { font-size:18px; } } @media (max-width:767px) { #header { position:fixed; top:24px; left:0; right:0; width:100%; background:#FFF; z-index:999999; box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 20px 0px; height:60px; overflow:hidden; } #header .brand, #header .brand span { height:100%; display:inline-block; } #header .brand span img { height:99%; width:auto; padding:4px; } #header .slogan { display:none; } #header .top { margin:0px; padding:0px; display:inline-block; text-align:left; float:left; width:auto; padding-left:12px; line-height:60px; height:60px; overflow:hidden; } #header .menu-container { padding:0px; display:inline-block; text-align:left; float:right; width:auto; padding-right:22px; line-height:60px; position:absolute; right:0px; } #header nav ul li { width:100%; text-align:center; } #header nav a:hover { background:#FFFFFF; } .menu-container { padding-left:15px; padding-right:15px; } .grt-mobile-button { display:inline-block; position:absolute; right:0; top:10px; background:#FFF; color:#3d3d3d; margin:0; padding:0; cursor:pointer; border:0; width:35px; } .grt-mobile-button .line1, .grt-mobile-button .line2, .grt-mobile-button .line3 { width:35px; height:4px; background-color:rgb(51, 51, 51); margin:6px 0; transition:0.4s; display:block; } ul.grt-menu { display:none; margin:0; height:0; } ul.open-grt-menu { position:fixed; background:#FFF; width:100%; left:0; right:0; top:0; height:100%; float:none; display:flex; justify-content:center; flex-direction:column; text-align:center; } .grt-mobile-button-open { position:fixed; z-index:99999; right:25px; top:25px; } .grt-mobile-button-open .line1 { -webkit-transform:rotate(-45deg) translate(-8px, 5px); transform:rotate(-45deg) translate(-8px, 5px); } .grt-mobile-button-open .line2 {opacity:0;} .grt-mobile-button-open .line3 { -webkit-transform:rotate(45deg) translate(-8px, -7px); transform:rotate(45deg) translate(-8px, -7px); } ul.grt-menu li { display:block; line-height:3.5em; } ul.grt-menu li a { padding:6px 10px; font-size:30px; } ul.grt-menu li.grt-dropdown.active-dropdown { background:#FFFFFF; } ul.grt-menu li.grt-dropdown.active-dropdown a { color:rgb(51, 51, 51); background:#FFF; } ul.grt-menu li.grt-dropdown ul.grt-dropdown-list { width:100%; position:relative; display:none; } ul.grt-menu li.grt-dropdown ul.grt-dropdown-list li a { display:block; font-size:17px; } #header.scrolled { top:24px; box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 20px 0px; } #header.scrolled .top { padding:0 0 0 12px; display:inline-block; text-align:left; float:left; width:auto; line-height:60px; height:60px; overflow:hidden; } #header.scrolled .brand img { height:60px; width:auto; padding:4px; } #posts .post { margin-left:0; margin-right:0; } #blog-post-content { margin-top:90px; margin-left:0; margin-right:0; } #blog-post-content .main-figure { display:block; overflow:hidden; } #blog-post-content .main-figure img { display:block; width:100%; height:auto; } .container.grid-lg { width:100%; } .container.grid-lg .column { margin-left:0; margin-right:0; padding-left:0; padding-right:0; } #blog-post-content .related .card { margin-bottom:16px; } } @keyframes navmenu { 0% { opacity:0; top:5px; } 100% { opacity:1; top:0px; } } @keyframes pop-in { 0% { opacity:0.8; transform:scale(0.98); } 100% { opacity:1; transform:scale(1); } } @keyframes fadeInAnimation { 0% { opacity:0; } 100% { opacity:1; } } .embed-responsive { position:relative; display:block; height:0; padding:0; overflow:hidden; } .embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video { position:absolute; top:0; bottom:0; left:0; width:100%; height:100%; border:0; } .embed-responsive-16by9 { padding-bottom:56.25%; } .embed-responsive-4by3 { padding-bottom:75%; } img.blog-posts-cover-image { width:100%;max-height:160px; } @media (min-width:320px) and (max-width:480px) { img.blog-posts-cover-image { width:100%;max-height:240px; } }.book-essay{ --brand-1:#2f7f93; --brand-2:#0f3d4b; --paper:#f2f1ee; --ink:#161616; --muted:rgba(22,22,22,.62); --rule:rgba(0,0,0,.10); --soft:rgba(0,0,0,.06); --accent:rgba(47,127,147,.55); --accent-strong:rgba(15,61,75,.92); --measure:42rem; --pad-x:1.6rem; --pad-y:2.2rem; font-family:"Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif; color:var(--ink); } .book-essay *{ box-sizing:border-box; } .book-paper{ max-width:var(--measure); margin:0 auto; padding:var(--pad-y) var(--pad-x); background:radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%), var(--paper); border:1px solid var(--soft); border-radius:18px; box-shadow:0 10px 26px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.60) inset; } @media (max-width:640px){ .book-essay{ --measure:100%; --pad-x:1.05rem; --pad-y:1.35rem; } .book-paper{ border-radius:14px; box-shadow:0 8px 22px rgba(0,0,0,.08); } } .book-toc{ margin:0 0 1.55rem; padding:.95rem 1rem; border:1px solid var(--rule); border-radius:14px; background:rgba(255,255,255,.55); } .book-toc summary{ cursor:pointer; font-size:.95rem; letter-spacing:.08em; color:var(--accent-strong); list-style:none; } .book-toc summary::-webkit-details-marker{ display:none; } .book-toc summary:after{ content:"▾"; float:right; opacity:.85; color:var(--accent-strong); } .book-toc[open] summary:after{ content:"▴"; } .book-toc ol{ margin:.75rem 0 0 !important; padding:0 !important; list-style:none !important; counter-reset:toc; } .book-toc li{ margin:.45rem 0 !important; padding:0 !important; border:0 !important; background:transparent !important; text-align:left !important; counter-increment:toc; } .book-toc li::before{ content:counter(toc) ". "; color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; } .book-toc a{ color:var(--accent-strong) !important; text-decoration:none !important; border-bottom:1px solid rgba(47,127,147,.35) !important; padding-bottom:.06em !important; } .book-toc a:hover{ border-bottom-color:rgba(47,127,147,.70) !important; } .book-prose{ font-size:18.5px; line-height:1.9; letter-spacing:.012em; text-align:justify; text-justify:inter-ideograph; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; counter-reset:sec; } @media (max-width:640px){ .book-prose{ font-size:17.2px; line-height:1.95; letter-spacing:.01em; } } .book-prose p{ margin:0 0 .95em 0; text-indent:2em; } .book-prose ul, .book-prose ol{ margin:.8rem 0 0; padding-left:1.2rem; text-indent:0; } .book-prose li{ margin:.55rem 0; text-indent:0; } .book-prose img, .book-prose video, .book-prose iframe{ max-width:100% !important; height:auto !important; display:block; border-radius:14px; } .book-prose a{ color:var(--accent-strong); text-decoration:none; border-bottom:1px solid rgba(47,127,147,.35); padding-bottom:.04em; } .book-prose a:hover{ border-bottom-color:rgba(47,127,147,.75); } .book-prose hr{ border:0; height:1px; background:var(--rule); margin:1.25rem 0 .35rem; } .book-prose blockquote{ margin:1.05rem 0 1.15rem; padding:.95rem 1.05rem; border-left:3px solid rgba(47,127,147,.55); background:rgba(255,255,255,.55); border-radius:12px; color:var(--ink); text-indent:0; } .book-prose blockquote br{ line-height:1.9; } .book-prose .book-highlight{ text-indent:0; margin:1.15rem 0 1.15rem; padding:.95rem 1rem; border:1px solid rgba(0,0,0,.08); border-radius:14px; background:rgba(255,255,255,.62); color:var(--accent-strong); font-weight:700; letter-spacing:.02em; } .book-prose section > h2{ counter-increment:sec; position:relative; margin:1.85em 0 .95em; padding-left:1.05rem; font-size:1.18em; line-height:1.55; letter-spacing:.07em; text-indent:0; color:var(--accent-strong); box-shadow:inset 3px 0 0 rgba(47,127,147,.45); border-radius:2px; scroll-margin-top:90px; } .book-prose section > h2::before{ content:"SECTION " counter(sec, decimal-leading-zero); position:absolute; left:1.05rem; top:-1.05rem; font-size:.72rem; letter-spacing:.18em; color:rgba(0,0,0,.38); } .book-prose section > h2::after{ content:""; display:block; margin-top:.55rem; width:7rem; height:1px; background:linear-gradient( 90deg, rgba(47,127,147,.55) 0%, rgba(47,127,147,.18) 70%, rgba(47,127,147,0) 100% ); } .book-related{ margin-top:2.2rem; } .book-related .related-list{ list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.75rem; } .book-related .related-item{ padding:.95rem 1rem; border:1px solid rgba(0,0,0,.08); border-radius:14px; background:rgba(255,255,255,.62); box-shadow:0 1px 0 rgba(255,255,255,.55) inset; } .book-related .related-tease{ display:block; margin:0 0 .4rem 0; font-size:.92rem; line-height:1.6; letter-spacing:.02em; color:var(--muted); text-indent:0; } .book-related .related-link{ display:inline-block; font-size:1.05rem; line-height:1.55; letter-spacing:.02em; color:var(--accent-strong); text-decoration:none; border-bottom:1px solid rgba(47,127,147,.30); padding-bottom:.06em; } .book-related .related-link::after{ content:" →"; font-weight:700; color:rgba(47,127,147,.55); } .book-related .related-link:hover{ border-bottom-color:rgba(47,127,147,.70); } .book-related .related-link:hover::after{ color:rgba(47,127,147,.75); } @media (max-width:640px){ .book-related .related-item{ padding:.85rem .9rem; } .book-related .related-link{ font-size:1.02rem; } } .book-sign{ margin-top:2rem; padding-top:1rem; border-top:1px solid var(--rule); color:rgba(22,22,22,.62); } .book-sign p{ margin:0; text-indent:0; }