/* * ponytail: 只保留一條頁面外層 rail，讓各頁內容沿用自身的內層閱讀寬度。 * 這份樣式由 v11 共用 include 載入，避免每個模板各自維護版心數值。 */ body:has(.header-v11) { --v11-page-rail-max: 1320px; --v11-page-rail-desktop-inset: 56px; --v11-page-rail-gap: 48px; --v11-page-rail-gap-mobile: 40px; --v11-page-header-title-gap: clamp(12px, 1.25vw, 20px); } body:has(.header-v11) :is(main.inpage[id], div.inpage[id]) > .page_header { box-sizing: border-box; width: min( var(--v11-page-rail-max), calc(100% - var(--v11-page-rail-desktop-inset)) ) !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-right: 0 !important; padding-left: 0 !important; } body:has(.header-v11) :is( #news_list, #product11, #about, #contact, #faq, #photobook, #activity11, #news_detail, #product_detail11, #albums_detail, #investor ).inpage > .page_header:not(.inv11-subpage-head) { padding-top: clamp(20px, 1.5vw, 28px) !important; padding-bottom: var(--v11-page-rail-gap) !important; } body:has(.header-v11) :is(main.inpage[id], div.inpage[id]) > .page_header .breadcrumbs { margin-bottom: 0 !important; padding-bottom: 0 !important; } body:has(.header-v11) :is(main.inpage[id], div.inpage[id]) > .page_header > :is( .breadcrumbs + h1, h1 + .breadcrumbs ) { margin-top: var(--v11-page-header-title-gap) !important; } body:has(.header-v11) :is(main.inpage[id], div.inpage[id]) > :is( section[class*="11-"], article[class*="11-"], div[class*="11-"], section.container_inside:not(.page_header), div.container_inside:not(.page_header) ):not([class*="--bleed"]):not(.ab11-gallery-section):not(.ab11-award-transition-section) { box-sizing: border-box; width: min( var(--v11-page-rail-max), calc(100% - var(--v11-page-rail-desktop-inset)) ) !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-right: 0 !important; padding-left: 0 !important; } /* * style/script 節點常插在 page_header 與內容區塊之間，不能依賴相鄰兄弟選擇器。 * :nth-child(of ...) 只取 header 後第一個符合 rail 條件的直接子節點， * 不會重設後續區塊原本的段落間距。 */ body:has(.header-v11) :is(main.inpage[id], div.inpage[id]) > :nth-child( 1 of :is( section[class*="11-"], article[class*="11-"], div[class*="11-"], section.container_inside:not(.page_header), div.container_inside:not(.page_header) ):not(.page_header):not([class*="--bleed"]):not(.ab11-gallery-section):not(.ab11-award-transition-section) ) { margin-top: 0 !important; padding-top: 0 !important; } body:has(.header-v11) :is( #news_detail.news_detail11 > .nd11-section > .nd11-wrap, #news_detail.article_detail11 > .ad11-section > .ad11-wrap ) { box-sizing: border-box; width: 100% !important; max-width: var(--v11-page-rail-max) !important; margin-left: auto !important; margin-right: auto !important; } @media (min-width: 1024px) { html body:has(.header-v11) #news_list.article11 > section.inpage.container.page_header, html body:has(.header-v11) #news_list.article11 > section.inpage.container_inside.page_header, html body:has(.header-v11) #news_list.article11 > .a11-section, html body:has(.header-v11) #news_detail.news_detail11 > .page_header, html body:has(.header-v11) #news_detail.news_detail11 > .nd11-section, html body:has(.header-v11) #news_detail.article_detail11 > .page_header, html body:has(.header-v11) #news_detail.article_detail11 > .ad11-section, html body:has(.header-v11) #news_detail.article_detail11 > section.inpage.container_inside.page_header, html body:has(.header-v11) #news_detail.article_detail11 > section.inpage.container.page_header { box-sizing: border-box; width: min( var(--v11-page-rail-max), calc(100% - var(--v11-page-rail-desktop-inset)) ) !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } } body:has(.header-v11) #product_detail11 > .d11-wrap > .d11-main { margin-top: 0 !important; } @media (max-width: 1023px) { body:has(.header-v11) :is(main.inpage[id], div.inpage[id]) > .page_header, body:has(.header-v11) :is(main.inpage[id], div.inpage[id]) > :is( section[class*="11-"], article[class*="11-"], div[class*="11-"], section.container_inside:not(.page_header), div.container_inside:not(.page_header) ):not([class*="--bleed"]):not(.ab11-gallery-section):not(.ab11-award-transition-section) { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-right: var(--v11-gutter-page-xs, 40px) !important; padding-left: var(--v11-gutter-page-xs, 40px) !important; } body:has(.header-v11) :is( #news_list, #product11, #about, #contact, #faq, #photobook, #activity11, #news_detail, #product_detail11, #albums_detail, #investor ).inpage > .page_header:not(.inv11-subpage-head) { padding-bottom: var(--v11-page-rail-gap-mobile) !important; } html body:has(.header-v11) #news_list.article11 > section.inpage.container.page_header, html body:has(.header-v11) #news_list.article11 > section.inpage.container_inside.page_header { box-sizing: border-box; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: var(--v11-gutter-page-xs, 40px) !important; padding-right: var(--v11-gutter-page-xs, 40px) !important; padding-bottom: var(--v11-page-rail-gap-mobile) !important; } html body:has(.header-v11) #news_detail.article_detail11 > section.inpage.container_inside.page_header, html body:has(.header-v11) #news_detail.article_detail11 > section.inpage.container.page_header { box-sizing: border-box; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: var(--v11-gutter-page-xs, 40px) !important; padding-right: var(--v11-gutter-page-xs, 40px) !important; } body:has(.header-v11) :is(main.inpage[id], div.inpage[id]) > :nth-child( 1 of :is( section[class*="11-"], article[class*="11-"], div[class*="11-"], section.container_inside:not(.page_header), div.container_inside:not(.page_header) ):not(.page_header):not([class*="--bleed"]):not(.ab11-gallery-section):not(.ab11-award-transition-section) ) { margin-top: 0 !important; padding-top: 0 !important; } }