@charset "utf-8";

/* Extend the existing Modern shell to the remaining CMS content templates. */
.modern-inner :is(#n21, #n24, #n25, #n26, #n27, #n28, #n29, #n31, #n34, #n35) { padding: 40px 0 56px; background: var(--modern-surface); }
.modern-inner .component > :is(.article, .download, .video, .single, .guestbook, .job, .feedback) { width: calc(100% - 64px); max-width: 1240px; margin: 0 auto; padding: 0; }
.modern-inner :is(#n21, #n24, #n25, #n26, #n27, #n28, #n29, #n31, #n34, #n35) #right { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.modern-inner :is(#n21, #n24, #n25, #n26, #n27, #n28, #n29, #n31, #n34, #n35) #left { width: 236px; padding: 20px; border: 1px solid var(--modern-line); border-radius: 12px; background: #fff; }
.modern-inner :is(#n21, #n24, #n25, #n26, #n27, #n28, #n29, #n31, #n34, #n35) .sidebar_title h2 { color: var(--modern-ink); font-size: 17px; }
.modern-inner :is(#n21, #n24, #n25, #n26, #n27, #n28, #n29, #n31, #n34, #n35) .sidelist .InfoTitle { color: var(--modern-muted); font-size: 14px; line-height: 1.7; }
.modern-inner :is(.article, .download, .video, .single, .guestbook, .job, .feedback, #login, #reg, .forget) .right_title { align-items: stretch; flex-direction: column; gap: 12px; }
.modern-inner :is(.article, .download, .video, .single, .guestbook, .job, .feedback, #login, #reg, .forget) .right_title h2 { margin: 0; padding: 0; color: var(--modern-ink); font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.5; text-align: left; }
.modern-inner :is(.article, .download, .video, .single, .guestbook, .job, .feedback, #login, #reg, .forget) .right_title h2 img { display: none; }
.modern-inner :is(#n26, #n27, #n28, #n31, #n34, #n35) #right { padding: 28px 32px; border: 1px solid var(--modern-line); border-radius: 12px; background: #fff; }
.modern-inner :is(#n31, #n34, #n35) .right_title:empty { display: none; }
.modern-inner :is(.article, .download, .video, .single, .guestbook, .job, .feedback) .right_body { min-width: 0; padding: 0; }
.modern-inner :is(#n21, #n24, #n25) .right_title .seachwrap { align-self: flex-start; width: 360px; max-width: 100%; }
.modern-inner :is(#n21, #n24, #n25) .frmInfoSearch { margin: 0; border: 0; border-radius: 0; background: transparent; }
.modern-inner :is(#n21, #n24, #n25) .frmInfoSearch .Keywords { flex: 1; float: none; min-width: 0; width: auto; }
.modern-inner :is(#n21, #n24, #n25) .frmInfoSearch .btnSearch { flex: 0 0 44px; float: none; padding: 0; }

/* News styles retain the configured text / thumbnail / grid visibility. */
.modern-inner #n21 #right .article0 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.modern-inner #n21 #right .grid-article0 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modern-inner #n21 #right .article0:after { display: none; }
.modern-inner #n21 #right .article0 > li { float: none; width: auto !important; min-width: 0; margin: 0; }
.modern-inner #n21 #right .article0 > li > a { display: flex; align-items: flex-start; gap: 24px; height: 100%; margin: 0 !important; padding: 24px; border: 1px solid var(--modern-line); border-radius: 12px; background: #fff; transform: none; box-shadow: none; }
.modern-inner #n21 #right .article0 > li > a:hover { border-color: var(--modern-accent); box-shadow: 0 10px 24px rgba(25,38,59,.07); }
.modern-inner #n21 #right .article0 .InfoPicture { flex: 0 0 200px; float: none; width: 200px; margin: 0; overflow: hidden; border-radius: 8px; }
.modern-inner #n21 #right .article0 .InfoPicture img { width: 100%; height: 144px; object-fit: cover; transform: none; }
.modern-inner #n21 #right .article0 .InfoWrap { position: static; flex: 1; float: none; min-width: 0; width: auto; margin: 0; padding: 0; transform: none; }
.modern-inner #n21 #right .article0 .InfoTitle { float: none; margin: 0; padding: 0; color: var(--modern-ink); font-size: 20px; font-weight: 500; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; transform: none; }
.modern-inner #n21 #right .article0 .InfoSContent { height: auto; max-height: 5.4em; margin: 12px 0 0; padding: 0; color: var(--modern-muted); font-size: 14px; line-height: 1.8; }
.modern-inner #n21 #right .article0 .InfoTime { float: none; margin: 12px 0 0; padding: 0; border: 0; color: var(--modern-muted); font-size: 13px; font-weight: 400; }
.modern-inner #n21 #right .article0 .InfoTime:after { display: none; }
.modern-inner #n21 #right .grid-article0 > li > a { flex-direction: column; }
.modern-inner #n21 #right .grid-article0 .InfoPicture { flex: none; width: 100%; }
.modern-inner #n21 #right .grid-article0 .InfoPicture img { height: 220px; }
.modern-article-list #n5067 { padding: 40px 0; background: var(--modern-surface); }
.modern-article-list #n5067 .floor_product0 { width: calc(100% - 64px); max-width: 1240px; margin: 0 auto; }
.modern-article-list #n5067 .product0 li a { border: 1px solid var(--modern-line); border-radius: 12px; background: #fff; }

/* Download actions remain separate links; long file names can wrap. */
.modern-inner #n25 #right .downloadlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0; }
.modern-inner #n25 #right .grid-downloadlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modern-inner #n25 #right .downloadlist:after,
.modern-inner #n25 #right .downloadlist > li:after { display: none; }
.modern-inner #n25 #right .downloadlist > li { position: static; display: flex; align-items: center; gap: 20px; float: none; width: auto !important; min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--modern-line); border-radius: 12px; background: #fff; box-shadow: none; }
.modern-inner #n25 #right .downloadlist .InfoWrap { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 16px; flex: 1; float: none; min-width: 0; width: auto; margin: 0; padding: 0; border: 0; transform: none; box-shadow: none; }
.modern-inner #n25 #right .downloadlist .InfoWrap > img,
.modern-inner #n25 #right .downloadlist .InfoPicture { grid-column: 1; grid-row: 1 / span 3; float: none; width: 64px; margin: 0; }
.modern-inner #n25 #right .downloadlist .InfoWrap > img { width: 32px; }
.modern-inner #n25 #right .downloadlist .InfoPicture img { width: 100%; height: 64px; object-fit: contain; }
.modern-inner #n25 #right .downloadlist :is(.InfoTitle, .InfoSContent, .InfoTime) { grid-column: 2; height: auto; margin: 0; padding: 0; white-space: normal; overflow-wrap: anywhere; }
.modern-inner #n25 #right .downloadlist .InfoTitle { color: var(--modern-ink); font-size: 17px; line-height: 1.7; }
.modern-inner #n25 #right .downloadlist :is(.InfoSContent, .InfoTime, .InfoTime span) { color: var(--modern-muted); font-size: 13px; line-height: 1.8; }
.modern-inner #n25 #right .downloadlist > li > .btn { position: static; flex: 0 0 auto; float: none; margin: 0; transform: none; }
.modern-inner #n25 #right .grid-downloadlist > li { align-items: stretch; flex-direction: column; }
.modern-inner #n25 #right .grid-downloadlist > li > .btn { align-self: flex-end; }

.modern-inner #n24 #right .video0 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.modern-inner #n24 #right .video0:after { display: none; }
.modern-inner #n24 #right .video0 > li { float: none; width: auto !important; min-width: 0; margin: 0; }
.modern-inner #n24 #right .video0 > li > a { display: flex; flex-direction: column; align-items: stretch; height: 100%; margin: 0 !important; padding: 16px; border: 1px solid var(--modern-line); border-radius: 12px; background: #fff; }
.modern-inner #n24 #right .video0 .InfoPicture { position: relative; float: none; width: 100%; height: auto; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; }
.modern-inner #n24 #right .video0 .InfoPicture img { width: 100%; height: 100%; object-fit: cover; transform: none; }
.modern-inner #n24 #right .video0 .InfoWrap { position: static; width: auto; margin: 16px 0 0; padding: 0; background: transparent; transform: none; }
.modern-inner #n24 #right .video0 .InfoTitle { margin: 0; color: var(--modern-ink); font-size: 17px; line-height: 1.7; white-space: normal; overflow-wrap: anywhere; }
.modern-inner #n24 #right .video0 .InfoSContent { height: auto; margin: 10px 0 0; color: var(--modern-muted); font-size: 14px; line-height: 1.8; opacity: 1; transform: none; }

/* Reading surfaces, including author-supplied images, tables and media. */
.modern-inner :is(#n31, #n34, #n35) .right_body > .InfoTitle h1 { margin: 0; color: var(--modern-ink); font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; line-height: 1.5; text-align: left; overflow-wrap: anywhere; }
.modern-inner :is(#n31, #n34, #n35) .info_from_wrap { margin: 16px 0 24px; padding: 0; color: var(--modern-muted); font-size: 14px; line-height: 1.8; text-align: left; }
.modern-inner :is(#n31, #n34, #n35) .right_body > .InfoSContent { margin: 0 0 24px; padding: 16px 20px; border-radius: 8px; background: var(--modern-surface); color: var(--modern-muted); line-height: 1.9; }
.modern-inner :is(#n31, #n34, #n35) .right_body > .InfoSContent:empty { display: none; }
.modern-inner :is(#n27, #n31, #n34, #n35) :is(.InfoContent, .ChannelContent) { min-width: 0; max-width: 100%; overflow-x: auto; color: var(--modern-ink); font-size: 16px; line-height: 1.9; text-align: left; overflow-wrap: anywhere; }
.modern-inner :is(#n27, #n31, #n34, #n35) :is(.InfoContent, .ChannelContent) p { margin: 0 0 1em; }
.modern-inner :is(#n27, #n31, #n34, #n35) :is(.InfoContent, .ChannelContent) img { max-width: 100%; height: auto !important; }
.modern-inner :is(#n27, #n31, #n34, #n35) :is(.InfoContent, .ChannelContent) :is(video, iframe, embed, object) { max-width: 100%; }
.modern-inner :is(#n27, #n31, #n34, #n35) table { border-collapse: collapse; }
.modern-inner :is(#n27, #n31, #n34, #n35) :is(.InfoContent, .ChannelContent) :is(th, td) { padding: 10px 14px; border: 1px solid var(--modern-line); vertical-align: top; }
.modern-inner :is(#n27, #n31, #n34, #n35) .InfoAttachment { width: auto; margin: 16px 0 24px; text-align: left; }
.modern-inner :is(#n31, #n34, #n35) .info_previous_next_wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.modern-inner :is(#n31, #n34, #n35) .info_previous_next_wrap > :is(.Previous, .Next) { float: none; min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--modern-line); border-radius: 8px; color: var(--modern-muted); font-size: 14px; line-height: 1.8; text-align: left; overflow-wrap: anywhere; }
.modern-page #n27 .channelalbumlist li img { width: 290px; max-width: 100%; border-radius: 8px; }
.modern-page #Map .ContactInfo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.modern-page #Map .ContactInfo li { float: none; width: auto; height: auto; min-width: 0; padding: 20px 12px; border: 1px solid var(--modern-line); border-radius: 8px; overflow-wrap: anywhere; }
.modern-page #Map .ContactInfo i { width: 44px; height: 44px; margin: 0 auto 12px; padding: 0; color: var(--modern-accent); line-height: 42px; }
.modern-page #Map .Company { color: var(--modern-ink); font-size: 22px; line-height: 1.6; }
.modern-page #Map .MapInfo { float: none; padding: 0; border: 1px solid var(--modern-line); border-radius: 8px; }

/* Search and application pages have no component wrapper. */
:is(.modern-search, .modern-resume) > .article { width: calc(100% - 64px); max-width: 1240px; margin: 40px auto 56px; padding: 0; }
:is(.modern-search, .modern-resume) > .article > #right { padding: 28px 32px; border: 1px solid var(--modern-line); border-radius: 12px; background: #fff; }
.modern-search .searchlist { display: grid; gap: 12px; }
.modern-search .searchlist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; height: auto; min-height: 64px; padding: 16px 20px; border: 1px solid var(--modern-line); border-radius: 8px; background: var(--modern-surface); line-height: 1.8; text-indent: 0; overflow-wrap: anywhere; }
.modern-search .searchlist li > a { flex: 1; min-width: 0; }
.modern-search .searchlist li > .float_right { order: 1; float: none; margin-left: auto; color: var(--modern-muted); font-size: 13px; }

/* Recruitment and submitted forms keep their original fields and actions. */
.modern-inner #n29 .joblist { padding: 0; }
.modern-inner #n29 .joblist > li { margin: 0 0 20px; padding: 24px; border: 1px solid var(--modern-line); border-radius: 12px; background: #fff; box-shadow: none; overflow-wrap: anywhere; }
.modern-inner #n29 .JobName { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.modern-inner #n29 .JobName h2 { float: none; color: var(--modern-ink); font-size: 24px; line-height: 1.5; }
.modern-inner #n29 .JobName .Salary { float: none; color: var(--modern-accent); font-size: 18px; }
.modern-inner #n29 .RequirementDetail { padding: 16px 0; color: var(--modern-muted); font-size: 14px; }
.modern-inner #n29 .Requirement { color: var(--modern-muted); line-height: 1.9; }
.modern-inner #n29 .job_table { table-layout: fixed; width: 100%; margin: 0; }
.modern-inner #n29 .job_table :is(th, td) { padding: 12px; border-color: var(--modern-line); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.modern-inner #n29 .job_table .btn { white-space: normal; }
.modern-inner #n28 .guestbooklist li { margin-bottom: 16px; padding: 20px; border: 1px solid var(--modern-line); border-radius: 8px; background: var(--modern-surface); overflow-wrap: anywhere; }
.modern-inner #n28 .MessageTitle { color: var(--modern-ink); font-size: 14px; font-weight: 400; line-height: 1.8; }
.modern-inner #n28 .MessageContent { padding: 12px 0; color: var(--modern-ink); line-height: 1.9; }
.modern-inner #n28 .answer_wrap { padding: 12px 0 0; border-color: var(--modern-line); color: var(--modern-muted); line-height: 1.8; }
.modern-inner #n28 .message_body { margin: 24px auto 0; }
.modern-inner :is(.guestbook_table, .feedback_table, .resume_table, .login_table, .reg_table, .forget_table1, .forget_table2) { width: 100%; max-width: 800px; margin: 0 auto; border-collapse: collapse; }
.modern-inner :is(.guestbook_table, .feedback_table, .resume_table, .login_table, .reg_table, .forget_table1, .forget_table2) :is(th, td) { padding: 8px 0; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.modern-inner :is(.guestbook_table, .feedback_table, .resume_table, .login_table, .reg_table, .forget_table1, .forget_table2) th { width: 120px; padding: 18px 20px 8px 0; color: var(--modern-ink); font-size: 14px; font-weight: 500; }
.modern-inner :is(.guestbook_table, .feedback_table, .resume_table, .login_table, .reg_table, .forget_table1, .forget_table2) :is(.form_text, .form_textarea, select) { width: 100%; max-width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid var(--modern-line); border-radius: 8px; background: #fff; color: var(--modern-ink); font: inherit; line-height: 1.5; box-shadow: none; }
.modern-inner :is(.guestbook_table, .feedback_table, .resume_table, .login_table, .reg_table, .forget_table1, .forget_table2) .form_textarea { min-height: 160px; resize: vertical; }
.modern-inner :is(.guestbook_table, .feedback_table, .resume_table, .login_table, .reg_table, .forget_table1, .forget_table2) .form_text_verifycode { width: 96px; max-width: 100%; min-height: 44px; margin: 0 8px 0 0; padding: 10px; border: 1px solid var(--modern-line); border-radius: 8px; font: inherit; }
.modern-inner :is(.guestbook_table, .feedback_table, .resume_table, .login_table, .reg_table, .forget_table1, .forget_table2) :is(input[type="file"], .code_image) { max-width: 100%; }
.modern-inner :is(.guestbook_table, .feedback_table, .resume_table, .login_table, .reg_table, .forget_table1, .forget_table2) .code_image { vertical-align: middle; }
.modern-inner :is(.guestbook_table, .feedback_table, .resume_table, .login_table, .reg_table, .forget_table1, .forget_table2) input:disabled { background: var(--modern-surface); color: var(--modern-muted); }
.modern-inner :is(.guestbook_table, .feedback_table, .resume_table, .login_table, .reg_table, .forget_table1, .forget_table2) .operation { padding-top: 20px; text-align: left; }
.modern-inner :is(.article, .download, .video, .single, .guestbook, .job, .feedback, #login, #reg, .forget) .btn { min-height: 44px; height: auto; padding: 10px 20px; border-radius: 8px; font-size: 14px; line-height: 1.6; }
.modern-inner :is(#login, #reg, .forget) { width: calc(100% - 64px); max-width: 720px; margin: 40px auto 56px; padding: 0; }
.modern-inner :is(#login, #reg, .forget) > #right { padding: 32px; border: 1px solid var(--modern-line); border-radius: 12px; background: #fff; }
.modern-inner :is(#frmLogin, #frmReg) { max-width: none; padding: 0; }
.modern-inner :is(.reg_table, .forget_table2) #SmsCode { width: 100%; min-width: 96px; }

@media screen and (max-width: 1199px) {
    .modern-inner #n21 #right .grid-article0 { grid-template-columns: minmax(0, 1fr); }
    .modern-page #Map .ContactInfo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
    .modern-inner :is(#n21, #n24, #n25, #n26, #n27, #n28, #n29, #n31, #n34, #n35) { padding: 24px 0 36px; }
    .modern-inner .component > :is(.article, .download, .video, .single, .guestbook, .job, .feedback),
    :is(.modern-search, .modern-resume) > .article, .modern-inner :is(#login, #reg, .forget), .modern-article-list #n5067 .floor_product0 { width: calc(100% - 32px); }
    :is(.modern-search, .modern-resume) > .article, .modern-inner :is(#login, #reg, .forget) { margin: 24px auto 36px; }
    .modern-inner :is(#n26, #n27, #n28, #n31, #n34, #n35) #right,
    :is(.modern-search, .modern-resume) > .article > #right, .modern-inner :is(#login, #reg, .forget) > #right { padding: 20px 16px; }
    .modern-inner #n21 #right .article0 > li > a { flex-direction: column; gap: 16px; padding: 16px; }
    .modern-inner #n21 #right .article0 .InfoPicture { flex: none; width: 100%; }
    .modern-inner #n21 #right .article0 .InfoPicture img { height: 200px; }
    .modern-inner #n21 #right .article0 .InfoTitle { font-size: 18px; }
    .modern-inner #n25 #right .grid-downloadlist { grid-template-columns: minmax(0, 1fr); }
    .modern-inner #n25 #right .downloadlist > li { align-items: stretch; flex-direction: column; gap: 16px; padding: 16px; }
    .modern-inner #n25 #right .downloadlist > li > .btn { align-self: flex-end; }
    .modern-inner #n24 #right .video0 { grid-template-columns: minmax(0, 1fr); }
    .modern-inner :is(#n31, #n34, #n35) .info_previous_next_wrap { grid-template-columns: minmax(0, 1fr); }
    .modern-inner #n29 .joblist > li { padding: 16px; }
    .modern-inner #n29 .job_table :is(th, td) { padding: 8px 4px; font-size: 13px; }
    .modern-inner #n29 .job_table .btn { padding: 8px; }
    .modern-inner #n29 .job_table,
    .modern-inner #n29 .job_table tbody { display: block; width: 100%; }
    .modern-inner #n29 .job_table tr { display: grid; grid-template-columns: 80px minmax(0, 1fr); }
    .modern-inner #n29 .job_table :is(th, td) { display: block; min-width: 0; width: auto; padding: 10px 8px; text-align: left; }
    .modern-inner #n29 .job_table tr:first-child td:last-child,
    .modern-inner #n29 .job_table td[colspan="3"] { grid-column: 1 / -1; }
    .modern-inner :is(.guestbook_table, .feedback_table, .resume_table, .login_table, .reg_table, .forget_table1, .forget_table2),
    .modern-inner :is(.guestbook_table, .feedback_table, .resume_table, .login_table, .reg_table, .forget_table1, .forget_table2) :is(tbody, tr, th, td) { display: block; width: 100%; }
    .modern-inner :is(.guestbook_table, .feedback_table, .resume_table, .login_table, .reg_table, .forget_table1, .forget_table2) th { padding: 12px 0 6px; }
    .modern-inner :is(.guestbook_table, .feedback_table, .resume_table, .login_table, .reg_table, .forget_table1, .forget_table2) td { padding: 0 0 8px; }
    .modern-inner :is(.reg_table, .forget_table2) :is(.MemberCode, #SmsCode) { width: 100%; }
}
@media screen and (max-width: 399px) {
    .modern-page #Map .ContactInfo { grid-template-columns: minmax(0, 1fr); }
    .modern-inner #n25 #right .downloadlist .InfoWrap { grid-template-columns: 40px minmax(0, 1fr); gap: 6px 12px; }
    .modern-inner #n25 #right .downloadlist .InfoPicture { width: 40px; }
}