body.body__2_entry.body-renewal2025{a.btn_for_cv2{background-color:var(--main-color-1);border:.1rem solid var(--main-color-1)}a.btn_for_cv2:hover,a.btn_for_cv2:focus{background-color:var(--main-color-d1);border-color:var(--main-color-d1)}}section#indexSeminar_hero{background-image:url('https://magicpod.com/themes/magic-pod/img/onlineseminar/pc.png');height:600px;background-position:center;background-size:contain;background-repeat:no-repeat;display:flex;align-items:center;margin-bottom:60px;}.sec-header.indexSeminar_sec-header{padding-bottom:0;}.sec-header.indexSeminar_sec-header .h1{margin:0 0 2rem;padding:0;}section#indexSeminar_hero .container.one-column{max-width:120rem;padding:0 40px;}.p__indexSeminar_hero{font-size:1.85rem;line-height:1.6875;font-weight:500;}h2.sub-heading.h2__main_indexSeminar{display:flex;font-size:2.2rem;}span.span__h2_main_indexSeminar{width:45%;text-align:center;margin:0 auto;height:66px;display:flex;justify-content:center;align-items:center;border-bottom:1px solid #333;transition:width .3s;}span.center_span__h2_main_indexSeminar{display:flex;align-items:center;justify-content:center;width:10px;}span.center_span__h2_main_indexSeminar div{border-right:1px solid #ccc;display:block;width:1px;margin:0 auto;height:35px;}span.span__h2_main_indexSeminar.gray_span__h2_main_indexSeminar>a{color:#ccc;width:100%;text-align:center;margin:0 auto;height:66px;display:flex;justify-content:center;align-items:center;border-bottom:1px solid #ccc;background:-webkit-gradient(linear,left top,left bottom,from(#388e3c),to(#388e3c)) 0 100%/0 2px no-repeat;background:linear-gradient(#388e3c,#388e3c) 0 100%/0 2px no-repeat;-webkit-transition:background .5s;transition:background .5s;transition:all .2s;}span.span__h2_main_indexSeminar.gray_span__h2_main_indexSeminar>a:hover{color:var(--main-color-1);text-decoration:none;background-size:100% 2px;-webkit-transition:background .5s;transition:background .5s;}span.span__h2_main_indexSeminar.gray_span__h2_main_indexSeminar{border-bottom:none;}@media screen and (max-width:1200px){section#indexSeminar_hero{height:500px}}@media screen and (max-width:959px){section#indexSeminar_hero{height:400px}section#indexSeminar_hero .container.one-column{max-width:120rem;padding:0 40px}.p__indexSeminar_hero{font-size:1.6rem;line-height:1.6875}}@media screen and (max-width:767px){section#indexSeminar_hero{background-image:url(https://magicpod.com/themes/magic-pod/img/onlineseminar/sp.png);height:auto;background-position:top;background-size:77.5%;background-repeat:no-repeat;display:flex;align-items:initial;margin-bottom:40px}section#indexSeminar_hero .container.one-column{padding:0 1rem;display:flex;justify-content:center}section#indexSeminar_hero .container.one-column .acms-grid{width:100%}section#indexSeminar_hero:before{content:"";display:block;padding-top:67.5%}section#indexSeminar_hero .acms-grid{margin-top:auto;display:block;position:absolute;bottom:0}.grid_l_indexSeminar_hero a.btn{margin:0 auto;text-align:center;display:block;width:75%;max-width:200px;border-radius:2.9rem;height:4.75rem;line-height:4.3rem}h2.sub-heading.h2__main_indexSeminar{font-size:2rem}}@media screen and (max-width:699px){section#indexSeminar_hero:before{padding-top:70.5%}}@media screen and (max-width:599px){section#indexSeminar_hero:before{padding-top:76.5%}}@media screen and (max-width:480px){h2.sub-heading.h2__main_indexSeminar{font-size:1.6rem;margin-bottom:4rem}section#indexSeminar_hero{background-size:80%}section#indexSeminar_hero:before{padding-top:85%}}@media screen and (max-width:400px){h2.sub-heading.h2__main_indexSeminar{font-size:1.4rem}section#indexSeminar_hero{background-size:90%}section#indexSeminar_hero:before{padding-top:100%}}.container.one-column.main__indexSeminar{max-width:120rem;}section#indexEvent_hero{background:var(--main-color-1);padding:60px 0;margin-bottom:20px;}.h1__h1_indexEvent_hero{color:#fff;text-align:center;font-size:var(--page-header-fs1)}.p__h1_indexEvent_hero{color:#fff;text-align:center;margin:0;}p.p__under_indexEvent_hero{text-align:center;font-size:1.75rem;margin-bottom:60px;}main.container.events.main__indexSeminar{.row{.column.main-content{padding:0 30px;.ul__article__ES_event{display:grid;grid-template-columns:1fr 1fr 1fr;gap:50px 30px;margin-bottom:60px;li .wrap_img__article__ES_event img{width:100%;transition:opacity .3s}}}}}@media screen and (max-width:1199px){main.container.events.main__indexSeminar{.row{.column.main-content{.ul__article__ES_event{display:grid;grid-template-columns:1fr 1fr;gap:40px 30px}}}}}@media screen and (max-width:959px){main.container.events.main__indexSeminar{.row{.column.main-content{padding:0 20px}}}}@media screen and (max-width:767px){main.container.events.main__indexSeminar{.row{.column.main-content{padding:0 10px;.ul__article__ES_event{padding:0;grid-template-columns:1fr}}}}}@media screen and (max-width:480px){main.container.events.main__indexSeminar{.row{.column.main-content{.ul__article__ES_event{gap:30px}}}}}article#article__event_old{margin-top:80px;}.column.main-content>article#article__event_old{margin-top:20px;}article#article__event_future+article#article__event_old{margin-top:80px;}@media screen and (max-width:959px){.column.main-content>article#article__event_old{margin-top:0}}h2.h2__article__ES_event{margin-bottom:25px;}a.a__article__ES_event{transition:opacity .3s,color .3s;}a.a__article__ES_event:hover{text-decoration:none;}a.a__article__ES_event:hover h3,a.a__article__ES_event:hover .date__article__ES_event span{color:var(--main-color-1);}li.li__article__ES_event{list-style:none;}.wrap_img__article__ES_event{margin:0 0 10px;position:relative;}time.date__article__ES_event{display:flex;margin:0 0 5px;align-items:center;}span.span2__article__ES_event{margin-left:10px;}.date__article__ES_event span{font-size:19px;font-weight:600;color:#111;}h3.h3__article__ES_event{font-size:19px;margin:0 0 0;padding:0;font-weight:600;color:#111;line-height:1.3;min-height:50px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;transition:color .3s;}p.place__article__ES_event{margin:10px 0 0;font-size:15px;color:#777;display:flex;align-items:center;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}p.place__article__ES_event i{margin-right:10px;font-size:18px;}a.a__detail_article__ES_event{background:var(--main-color-1);margin-left:auto;display:flex;width:47.5%;align-items:center;color:#fff;justify-content:center;border-radius:25px;padding:10px;font-size:13.5px;margin-top:15px;max-width:150px;transition:transform .3s,background-color.3s,opacity .3s;}a.a__detail_article__ES_event i{margin-left:10px;}@media (any-hover:hover){a.a__detail_article__ES_event:hover{background:var(--main-color-d1);text-decoration:none;transform:translateY(-4px)}}span.span__video_article__ES_event{position:absolute;bottom:10px;z-index:10;right:10px;color:#fff;background:#FF0000;padding:3px 20px;border-radius:25px;display:flex;align-items:center;}span.span__video_article__ES_event i{margin-right:5px;font-size:18px;}nav.nav__ES_event{margin:0 0 40px;}span.span1__article__ES_event,span.span2__article__ES_event{transition:color .3s;}span.span3__article__ES_event{background:#bbb;color:#fff;font-size:14px;padding:1px 20px;margin-right:10px;border-radius:25px;font-weight:400;}a.a__article__ES_event:hover .wrap_img__article__ES_event img{opacity:.8;}section#event_a__bottom_YT{padding:0;margin:120px auto 0;}.event_a__bottom_YT{transition:opacity .3s;}@media (any-hover:hover){.event_a__bottom_YT:hover{opacity:.85}.event_a__bottom_YT:hover .span__video_article__ES_event{background:#d20000}}@media screen and (max-width:767px){p.p__under_indexEvent_hero{font-size:1.65rem}article#article__event_old{margin-top:60px}h3.h3__article__ES_event{min-height:initial}section#event_a__bottom_YT{margin:60px auto 0}}@media screen and (min-width:481px) and (max-width:767px){h3.h3__article__ES_event,.date__article__ES_event span{font-size:17px}span.span3__article__ES_event{font-size:14px}a.a__detail_article__ES_event{font-size:12.5px;min-width:125px}}@media screen and (max-width:480px){section#indexEvent_hero{padding:40px 0}article#article__event_old{margin-top:40px}.h1__h1_indexEvent_hero{font-size:2.35rem}p.p__under_indexEvent_hero{font-size:1.5rem;margin-bottom:40px}section#event_a__bottom_YT{margin:40px auto 0}.date__article__ES_event span{font-size:17px}time.date__article__ES_event{margin:0 0 2px}h3.h3__article__ES_event{font-size:17px}p.place__article__ES_event{margin:5px 0 0;font-size:14.5px}.date__article__ES_event span.span3__article__ES_event{font-size:14px;margin-bottom:5px}p.place__article__ES_event i{margin-right:8px}span.span__video_article__ES_event{font-size:clamp(11px,3vw,13px)}}.article-item .h2{margin-top:40px!important;margin-bottom:0;}.sec_entry__event_a__bottom_YT{max-width:120rem;margin:120px auto 0;padding:0 1rem!important;}.wrap-btn-index{margin:60px auto 0;}a.a__for_event_index{display:block;margin:60px auto 0;text-align:center;padding:15px;border:2.5px solid var(--main-color-1);width:400px;border-radius:35px;font-size:16px;transition:all .25s;}a.a__for_event_index i{margin-right:15px;}a.a__for_event_index:hover{text-decoration:none;}@media (any-hover:hover){a.a__for_event_index:hover{text-decoration:none;background:var(--main-color-1);color:#fff}}@media screen and (max-width:767px){a.a__for_event_index{font-size:15px}}@media screen and (max-width:480px){.article-item .h2{margin-top:30px!important}a.a__for_event_index{font-size:14.5px;width:90%;max-width:360px;padding:11px}}
/* ============================================================
Enterprise restyle, matching the top, pricing, features and case study pages.
Loaded only when %{BCD}/eq/events, so no scoping is needed.
Kept at the end of the file to override the per-breakpoint rules above.
============================================================ */
/* White, centred page header like the other pages. The English subtitle is gone
from the markup; hidden here as a safeguard. */
section#indexEvent_hero {
background: #fff;
/* 60px was too loose once the heading dropped to 32px; 52px measured from the
breadcrumb. */
padding: 32px 0 0;
margin-bottom: 20px;
}
.h1__h1_indexEvent_hero {
color: #2a3037;
font-size: 32px;
line-height: 1.3;
letter-spacing: .02em;
margin: 0;
}
.p__h1_indexEvent_hero {
display: none;
}
p.p__under_indexEvent_hero {
font-size: 17px;
color: #2a3037;
margin-bottom: 60px;
}
/* Section headings, matching the pricing page section-title. */
h2.h2__article__ES_event {
font-size: 22px;
letter-spacing: .02em;
margin-bottom: 20px;
}
.wrap_img__article__ES_event img {
border-radius: 8px;
}
/* One step below the card heading; 19px bold competed with it. */
.date__article__ES_event span {
font-size: 15px;
font-weight: 600;
color: #2a3037;
}
/* Finished chip, same grey tone and 3px radius as the case study labels.
Equal padding makes the text sit high, so the top is 0.5px thicker. */
span.span3__article__ES_event {
background: #65656d;
color: #fff;
border: 1px solid #dfe3ec;
border-radius: 3px;
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
line-height: 1.5;
padding: 3.5px 10px 2.5px;
margin-right: 8px;
}
/* Same scale as the case study cards; min-height holds two lines. */
h3.h3__article__ES_event {
font-size: 17px;
line-height: 1.55;
letter-spacing: .01em;
color: #2a3037;
min-height: 53px;
}
p.place__article__ES_event {
font-size: 14px;
color: #616a78;
}
/* Hover underlines the title rather than turning green, as on the case study
and news cards. */
a.a__article__ES_event:hover h3,
a.a__article__ES_event:hover .date__article__ES_event,
a.a__article__ES_event:hover .date__article__ES_event span
{
color: #2a3037;
}
a.a__article__ES_event:hover span.span3__article__ES_event{
color: #fff;
}
a.a__article__ES_event:hover h3 {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* White with a light grey border, like the header and hero secondaries. */
a.a__detail_article__ES_event {
background: #fff;
color: #2a3037;
border: 1px solid #d5d5dc;
border-radius: 3px;
font-weight: 600;
padding: 8px 10px;
transition: background-color .25s, border-color .25s, color .25s;
}
/* Pure red stood out against the new palette; muted, with a 3px radius. */
span.span__video_article__ES_event {
background: #d93025;
border-radius: 3px;
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
}
/* Back-to-index button, restyled as a secondary button. */
a.a__for_event_index {
border: 1px solid #d5d5dc;
border-radius: 3px;
color: #2a3037;
font-weight: 600;
padding: 14px;
}
@media (any-hover:hover) {
a.a__detail_article__ES_event:hover {
background: #2a3037;
border-color: #2a3037;
color: #fff;
transform: none;
}
a.a__for_event_index:hover {
background: #2a3037;
border-color: #2a3037;
color: #fff;
}
.event_a__bottom_YT:hover .span__video_article__ES_event {
background: #b3261e;
}
}
@media screen and (max-width:1199px) {
.h1__h1_indexEvent_hero {
font-size: 30px;
}
}
@media screen and (max-width:767px) {
section#indexEvent_hero {
padding: 24px 0 0;
}
.h1__h1_indexEvent_hero {
font-size: 28px;
}
/* Same as the pricing page lead (.pricing-subtitle p) on mobile. */
p.p__under_indexEvent_hero {
font-size: 14px;
margin-bottom: 40px;
}
h3.h3__article__ES_event {
min-height: 0;
}
}
@media screen and (max-width:480px) {
.h1__h1_indexEvent_hero {
font-size: 26px;
}
h3.h3__article__ES_event {
font-size: 16px;
}
.date__article__ES_event span {
font-size: 14px;
}
.date__article__ES_event span.span3__article__ES_event {
font-size: 11px;
}
}
/* ------------------------------------------------------------
Card tile from the image down to the detail button.
The markup nests anchors, which the browser splits, so the body block and the
button end up as siblings directly under the .
------------------------------------------------------------ */
/* Equal gaps read as a flat grid with no clear rows. Rows are 1.7x the column
gap, the same ratio the top page case studies use (60px / 35px). */
main.container.events.main__indexSeminar .row .column.main-content .ul__article__ES_event {
gap: 40px 24px;
}
li.li__article__ES_event {
background: #f7f7fb;
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
}
/* One step tighter than the tile's 8px so the corners nest. */
.wrap_img__article__ES_event img {
border-radius: 6px;
}
/* Guarantees 16px below the body block; margin-top:auto puts any spare height
above the button so the buttons line up at the card bottom. */
a.a__article__ES_event {
display: block;
margin-bottom: 16px;
}
a.a__detail_article__ES_event {
margin-top: auto;
}
/* Flat fill with no border; padding gains the border's 1px back. */
span.span3__article__ES_event {
border: 0;
padding: 4.5px 11px 3.5px;
}
/* ------------------------------------------------------------
Type sizes and spacing.
The detail button was 13.5px, smaller than the 15px date; now 14px.
Spacing tightens in steps (12px, 6px) so the card reads as one block.
------------------------------------------------------------ */
a.a__detail_article__ES_event {
font-size: 14px;
}
.wrap_img__article__ES_event {
margin-bottom: 12px;
}
time.date__article__ES_event {
margin-bottom: 6px;
}
/* ------------------------------------------------------------
The detail button is gone and the whole card is the click target, so the
background, radius and padding move from the to the and the padding
becomes part of the hit area.
------------------------------------------------------------ */
li.li__article__ES_event {
background: none;
border-radius: 0;
padding: 0;
display: block;
}
a.a__article__ES_event {
background: #f7f7fb;
border-radius: 8px;
padding: 16px;
margin-bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
transition: background-color .25s;
}
/* The clamp already equalises the height; only the space below needs closing. */
a.a__article__ES_event h3.h3__article__ES_event {
margin-bottom: 0;
}
/* With the button gone, the card hover is what signals it is clickable. */
@media (any-hover:hover) {
a.a__article__ES_event:hover {
background: #eaedf4;
}
}
/* ------------------------------------------------------------
Entry page buttons.
primary = flat green, 3px radius
secondary = white with a light grey border, 3px radius
------------------------------------------------------------ */
body.body__2_entry a.btn_for_cv2 {
border-radius: 3px;
}
body.body__2_entry a.btn-common.btn-common-back.btn-common-white {
background: #fff;
color: #2a3037;
border: 1px solid #d5d5dc;
border-radius: 3px;
box-shadow: none;
}
body.body__2_entry a.btn-common.btn-common-back.btn-common-white .allow-box {
background: #f3f3f7;
}
body.body__2_entry a.btn-common.btn-common-back.btn-common-white .allow-box::after {
color: #2a3037;
}
@media (any-hover:hover) {
body.body__2_entry a.btn-common.btn-common-back.btn-common-white:hover {
background: #2a3037;
border-color: #2a3037;
color: #fff;
}
body.body__2_entry a.btn-common.btn-common-back.btn-common-white:hover .allow-box {
background: #fff;
}
}
/* ------------------------------------------------------------
Entry page spacing, matching the success-program and resources entry pages.
------------------------------------------------------------ */
/* The shared styles.css hard-codes this rule green. Green is now an accent only,
so it matches the secondary border instead. Overridden here because the shared
file also serves other blogs' entry pages. */
body.body__2_entry .article-item .entry-date::after {
border-top-color: #d5d5dc;
}
/* 40px sat too close to the breadcrumb; 60px matches the success-program entry
page. !important because the original declaration uses it. */
body.body__2_entry .article-item .h2 {
margin-top: 60px !important;
}
/* 80px, the same as the success-program and resources entry pages. */
body.body__2_entry .wrap-btn-index {
margin-top: 80px;
}
@media screen and (max-width: 480px) {
body.body__2_entry .article-item .h2 {
margin-top: 40px !important;
}
body.body__2_entry .wrap-btn-index {
margin-top: 50px;
}
}
/* ------------------------------------------------------------
Arrow circle on the CTA button.
The markup comes from a body unit as text, so an
.allow-box element cannot be added the way btn-common does it elsewhere.
::after draws the same thing.
------------------------------------------------------------ */
body.body__2_entry a.btn_for_cv2 {
position: relative;
/* Right clears the 32px circle; left is padded to keep the label optically
centred. */
padding-right: 62px;
padding-left: 32px;
}
body.body__2_entry a.btn_for_cv2::after {
content: "\f061";
/* The font shorthand resets font-size, so it is set afterwards. */
font: var(--fa-font-solid);
font-size: 14px;
color: var(--main-color-d1);
background: #fff;
width: 32px;
height: 32px;
border-radius: 99px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
transition: transform .3s;
}
@media (any-hover:hover) {
body.body__2_entry a.btn_for_cv2:hover::after {
transform: translateY(-50%) translateX(4px);
}
}
/* ------------------------------------------------------------
Tables in the entry body, such as timetables.
a-blog emits a bare with no rules or padding, so this gives it the same
tone as the cards and buttons. The horizontal scroll wrapper (.scroll-hint) is
a-blog's own and is left as is.
------------------------------------------------------------ */
body.body__2_entry .acms-entry table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
line-height: 1.7;
}
body.body__2_entry .acms-entry table td,
body.body__2_entry .acms-entry table th {
padding: 14px 16px;
border-top: 1px solid #e5e5ec;
vertical-align: top;
}
/* No vertical rules; only the last row is closed off. */
body.body__2_entry .acms-entry table tr:last-child td,
body.body__2_entry .acms-entry table tr:last-child th {
border-bottom: 1px solid #e5e5ec;
}
/* Header rows get a pale grey fill, and th returns to left alignment. */
body.body__2_entry .acms-entry table th {
background: #f8f8fc;
color: #2a3037;
font-weight: 600;
text-align: left;
white-space: nowrap;
}
/* A table with no header row is a timetable: the first column holds times, kept
on one line with tabular figures. Without :has() support only this rule is
dropped; the base table styles above still apply. */
body.body__2_entry .acms-entry table:not(:has(th)) td:first-child {
width: 1%;
white-space: nowrap;
color: #2a3037;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
@media screen and (max-width: 767px) {
body.body__2_entry .acms-entry table {
font-size: 14px;
}
/* 8px keeps the table at the same width as before the rules and time column
were added. */
body.body__2_entry .acms-entry table td,
body.body__2_entry .acms-entry table th {
padding: 12px 8px;
}
}