@CHARSET "UTF-8";
body { font-size:16px; }
body{background:url("../images/index_03.jpg") 100% 100% fixed ;}
.body-white {background: #fff!important; }
*{ margin:0px; padding:0px; font-family: 'Inter', sans-serif;}
html{overflow-x:hidden;}
body, div, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, input, button, textarea, blockquote { _background-image:url(about:blank);_background-attachment:fixed;font-family:'Open Sans',Arial,Helvetica,sans-serif; }
input, button, textarea,select, optgroup, option { font-family: 'Open Sans',Arial,Helvetica,sans-serif; font-size: 100%; font-style: inherit; font-weight: inherit;}
input:focus, textarea:focus{ outline:none; }
ul, li, dl, dt, dd, ol { display: block; list-style: none; }
img{border:0;}
a{ text-decoration:none;outline:0; color: #DB001F; }
a:hover, a:focus { color: #8f0014; text-decoration: none; outline:0; }
/*flex排序 公css*/
.flex {display:flex;}
.flex-row {flex-direction:row;}
.flex-row-reverse {flex-direction:row-reverse;}
.flex-col {flex-direction:column;}
.flex-col-reverse {flex-direction:column-reverse;}
.flex-wrap {flex-wrap:wrap;}
.flex-wrap-reverse {flex-wrap:wrap-reverse;}
.flex-nowrap {flex-wrap:nowrap;}
.flex-1 {flex:1 1 0%;}
.flex-auto {flex:1 1 auto;}
.flex-initial {flex:0 1 auto;}
.flex-none {flex:none;}
.flex-grow-0 {flex-grow:0;}
.flex-grow {flex-grow:1;}
.flex-shrink-0 {flex-shrink:0;}
.flex-shrink {flex-shrink:1;}
.justify-start {justify-content:flex-start;}
.justify-end {justify-content:flex-end;}
.justify-center {justify-content:center;}
.justify-between {justify-content:space-between;}
.justify-around {justify-content:space-around;}
.justify-evenly {justify-content:space-evenly;}
.navbar-fixed-top, .navbar-fixed-bottom { position: fixed; }
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {margin-right: 0px; margin-left: 0px; }
.navbar .nav .user { padding: 0; line-height: 70px; }
.navbar .nav .user .headicon { margin: 0 5px; height: 30px; }
.navbar .nav .user .caret { vertical-align: middle; margin: 0 5px; }
/*tc widget*/
.tc-main { margin-top: 20px; }
@media (min-width: 1200px) {
.container { width: 1200px; padding-left:0px; padding-right:0px; }
}
.topbox { height: 30px; border-bottom: 1px #e3e3e3 solid; background: #f5f5f5; }
.topbox .top_tt{ font-style:normal; line-height:30px; }
.topbox .top_tt dl dt{ font-style:normal; line-height:30px; font-weight: normal; }
.topbox .top_tt dl dd{ font-style:normal; line-height:30px; text-align:right; }
.suofang{transition: all 500ms ease 0s;}
.suofang:hover{transform: scale(1.03);transition: all 500ms ease 0s;}
@media (max-width:767px) {
.suofang:hover{transform: scale(1);}
.callforpapers{ display: block!important; }
.cfpaper{ width: 98%!important; margin: 0 auto; }
}
.navbar-fixed-top{ position:fixed; top: 0px; left: 0px; right: 0px; background:linear-gradient(180deg, #fff 0%, #fff 100%); }
.navbar{ margin-bottom:0px; height: 72px; background:#fff; box-shadow: 0px 3px 9px 0px rgba(147, 147, 147, 0.23); }
#main-menu-user{ display: none }
.navbar-form{ height:41px; margin:0px; margin-top:32px; position:relative; padding:0px; border-radius: 4px; border: solid 1px #d6d6d6; overflow:hidden; background:#fff; width:90%; float:right; }
.navbar-form .form-group{ width:100%; }
.navbar-form .form-control2{ width:100%; height:41px; line-height:41px; position:relative; border:0px; font-size: 1.6rem; color: #666666; padding-left:15px; }
.navbar-form .btn-primary{ width: 115px;height:39px; background:#31a7d9; border:0px; border-radius:4px; font-size: 1.8rem; line-height: 39px; position:absolute; right:0px; top:0px; padding:0px; }
.navbar-default{ background:linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%); }
.navbar-default .navbar-collapse{ position:absolute; top: 0px; right: 0px; left: 0px; }
.navbar-default .navbar-nav>.open>a{ color:#666; font-style: normal; text-transform: none; border-bottom: 6px solid #3f07b9; padding-bottom:30px; }
.navbar-default .navbar-nav>.open>a:hover{ color:#a891dc!important; }
.navbar-default .navbar-nav>li>a .caret{ display:block; margin:0 auto; }
@media (max-width: 768px) { /*<=768的设备*/
.topbox .top_tt dl dt{ font-size:1rem; }
.topbox .top_tt dl dd{ display:none; }
.navbar-default .navbar-brand{ display:inline-block; margin:0 auto; height:120PX!important; float: none; text-align:center; }
.navbar-default .navbar-brand img{ display:inline-block; height: 88px!important; margin-top: 5px; }
.navbar-form{ margin-top:1px; float:; width:85%; }
.navbar-header{ display: inline-block; position: absolute; top: 20px; right: 20px; }
.navbar-default .navbar-collapse{ background:#f2f2f2; position: absolute; left: 0px; right: 0px; max-height: 100vh; height:100vh; z-index: 999; margin-top: 60px; }
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: #428bca !important; text-align: left !important;}
.navbar-toggle{ margin-top:1px; }
.navbar-nav{ margin:15px; }
.navbar-default .navbar-nav>li>a{ font-size: 1.5rem; color: #666; position: relative; }
.navbar-default .navbar-nav>li>a .caret{ display: inline-block; position: absolute; right: 15px; top: 1.8rem; }
.navbar-default .navbar-nav>.open>a{ padding-bottom: 10px; border-bottom:1px; }
}
@media (max-width: 468px) { /*<=468的设备*/
.news_list li .time{ display:none; }
.news_list li a{ max-width:98%!important; float:none; }
}
@media (min-width: 768px) { /*>=768的设备*/
.dropdown-menu{ background:#fff; padding:0px; }
.dropdown-menu>li>a{ font-size:15px; padding:0px 10px; color:#666; text-align: left; border-bottom: 1px solid #ccc; line-height: 60px; }
.dropdown-menu>.active>a{ background:#F2F2F2 !important; color: #666; }
.dropdown-menu>li>a:hover{ background:#F2F2F2; color: #666; }
.nav>li>a{ padding: 10px 13px; }
.navbar-default .searchform{ margin-top:20px; margin-bottom:20px; }
.navbar-default .navbar-brand{ margin-top:0px; margin-bottom:0px; }
.navbar-default .navbar-brand img{ height: 88px!important; margin-top: 5px; }
.navbar-nav { margin: 0 auto; float:none; }
.navbar-nav>li{ margin-left: 0px; }
.navbar-default .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; font-size:15px; font-weight: 600; color:#3f07b9; text-align:center; z-index: 999; }
.navbar-default .navbar-nav>li>a:hover { color: #fff!important; background-color:#3f07b9; border-radius: 5px; }
.navbar-nav li:after { position: absolute; content: ''; width: 0; height:100%; left: 0%;z-index: -1; -webkit-transition: 0.35s all ease; transition: 0.35s all ease;}
.navbar-nav li:hover:after{ width: 100%; left: 0;}
.navbar-nav li:after{background: none; color:#ccc;}
.navbar-nav li:hover:after{background: none; color:#ccc;}
}
.navbar-default .navbar-brand{ color: #333; font-size: 3rem; padding:10px; padding: 0px; line-height: 100px; height:100px; font-weight: bold; letter-spacing: 5px; }
.navbar-default .navbar-brand a{ color: #333; font-size: 3rem; }
.navbar-default .navbar-brand:hover{ color: #000; }
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{ color:#666; text-align:center; }
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
background-color:#3f07b9; color:#fff; border-radius: 5px;
}
/*幻灯片css*/
.sy-slider1 .sy-controls{ display:block!important; max-width:1600px!important; margin:0 auto!important; left:0px; right:0px; }
.sy-slider1 .sy-pager{ position:absolute; bottom:10px; left:0px; right:0px; z-index:9; }
.sy-slider1 .sy-pager li{ width: 2.2em!important; height: 2.2em; margin-right:10px!important; }
.sy-slider1 .sy-pager li a { width: 2.2em!important; height: 10px!important; border-radius: 4px!important; }
.sy-slider1 .sy-pager li.sy-active a { width: 30px; height: 10px; border-radius: 4px; background-color:#0d68b9!important; }
.sy-focus1{ margin-top:10px; }
.sy-focus1 .sy-controls{ display:none!important; }
.sy-focus1 .sy-pager{ position:absolute; bottom:0px; right:10px; z-index:9; text-align:right; }
.sy-focus1 .sy-pager li{ width: 1.5rem!important; height: 2.5rem; margin-right:0px!important; }
.sy-focus1 .sy-pager li a { width: 1.2rem!important; height: 1.2rem!important; border-radius: 1px!important; text-indent: 999px; }
.sy-focus1 .sy-pager li.sy-active a { width: 20px; height: 10px; border-radius: 1px; background-color:#ff0039!important; }
.sy-focus1 .s_item{ display:block; position: relative; }
.sy-focus1 .s_item img{ display:block; width:100%; }
.sy-focus1 .s_item h1{ background: rgba(0, 0, 0, .6); position:absolute; bottom:0px; left:0px; right:0px; text-align:center; color:#fff; font-size:1.5rem; line-height:4rem; padding:0px 2rem; overflow: hidden; }
/*图片鼠标放大css*/
.imgon img{ -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out; }
.imgon:hover img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
/*底部导航 radial-gradient(circle at 64.58333333333334% 98.33333333333333%, #28acf4 0%, 20%, rgba(0, 87, 225, 0) 40%), radial-gradient(circle at 18.75% 100%, #005995 0%, 25%, rgba(0, 87, 225, 0) 50%), radial-gradient(circle at 9.166666666666666% 43.333333333333336%, #F3F3F3 0%, 42%, rgba(243, 243, 243, 0) 70%), radial-gradient(circle at 87.08333333333333% 41.66666666666667%, #F3F3F3 0%, 42%, rgba(243, 243, 243, 0) 70%), radial-gradient(circle at 48.9013671875% 49.521484375%, #FFFFFF 0%, 100%, rgba(255, 255, 255, 0) 100%)*/
.footer_con{ width: 1200px; margin:0px auto; position:relative; overflow: hidden; text-align:center; font-size:14px; line-height:2; color:#333; }
.footer_con a{ color: #333; text-decoration: underline; }
.footer_con dl{ width: 80%; text-align: left; margin:0px; }
.footer_con dl dt{ color:#333; font-size:16px; }
.footer_con dl dd{ color:#333; font-size:16px; }
.footer_con ul{ width: 19%; text-align: right; }
.footer_con ul li{ margin-top: 70px; font-size: 16px; line-height: 30px; position: relative; }
.footer_con ul li span{ font-size: 18px; line-height: 30px; position: absolute; right: 60px; top: -3px; }
:root {
--primary-color: #024274;
--secondary-color: #00a8cc;
--accent-color: #f0ad4e;
--text-dark: #333333;
--text-light: #666666;
--bg-white: #ffffff;
--bg-light: #f8f9fa;
--bg-gradient: linear-gradient(135deg, #024274 0%, #2bd2d7 100%);
}
/* Topics Section */
html,body{ font-size: 16px; }
/*页面css*/
* {margin:0;padding:0;box-sizing:border-box;}
body {text-align:justify;line-height:1.8;}
/* public-css*/.w-1200 {width:1200px;margin:0 auto;margin-bottom:0rem;}
.public_bg {background:#fff;}
.clear {clear:both;}
a {text-decoration:none;}
.public_bgc {background:#ffb901;}
.public_c {color:#2f3faf;}
.public_title {display:flex;align-items:center; position: relative;}
.public_title h3{ text-align: center; margin:0 auto; padding-left: 0px!important; font-size: 2.2rem; padding-bottom: 15px; text-transform: uppercase; color: #2bd2d7; }
p { font-family:arial;/*word-break:break-all;*/; margin: 0 0 0px;}
ul,li,ol li {list-style:none;padding:0rem;}
/* page-css*/
.nav {height:6.875rem;width:100%;color:#FFFFFF;position:sticky;top:0px;left:0px;z-index:9999; border-bottom: 1px solid #e2e8f0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }
.nav .logo {line-height:6.875rem;font-size:1.8125rem;}
.nav .logo img{ height: 66px; display: block; }
.nav ul {display:flex; background:#024274; }
.nav ul li {line-height:6.89rem;}
.nav ul li a {font-size:1rem;font-weight:600;padding:0rem 12px 0rem;display:block; color:#2bd2d7;line-height:6.89rem;}
.nav ul li a.active,.nav ul li a:hover {text-decoration:none;background:#2bd2d7; color:#fff; }
.nav .open>a{ background: #2bd2d7; color: #fff; }
.nav .open .dropdown-menu>li>a{ color: #fff; }
.navkk {position:relative;display:flex;align-items:center;justify-content:space-between;}
.contact {width:8.4375rem;display:block;text-align:center;line-height:2.875rem;background-color:#f5a32a;color:#FFFFFF;border-radius:2.875rem;font-weight:600;}
.contact:hover {color:#212c42 !important;}
/* Banner*/
/* banner*/
.c-banner {width:100%;position:relative;overflow: hidden;}
.c-banner img {width:100%;}
.c-banner .banner ul {list-style:none;padding-left:0px;margin-bottom:0px;}
.c-banner .banner ul li { display:none;opacity:0; position:relative; }
.c-banner .banner ul li:nth-child(1) {opacity:1;display:block;}
.c-banner .banner ul li img {width:100%;}
.c-banner .banner ul li:first-child img {position:relative;}
.c-banner .nexImg {padding:25px 10px 25px 10px;position:absolute;top:50%;margin-top:-55px;background:#000000 url('../images/nexImg.png') no-repeat center center;opacity:0.5;border-radius:3px;z-index:10;width:50px;height:110px;}
.c-banner .preImg {padding:25px 10px 25px 10px;position:absolute;top:50%;margin-top:-55px;background:#000000 url('../images/preImg.png') no-repeat center center;opacity:0.5;border-radius:3px;z-index:10;width:50px;height:110px;}
.c-banner .nexImg:hover,.c-banner .preImg:hover {opacity:0.8;}
.c-banner .nexImg {right:0px;}
.c-banner .jumpBtn {width:100%;position:absolute;bottom:20px;text-align:center;}
.c-banner .jumpBtn ul {margin-bottom:0px;padding:0px;}
.c-banner .jumpBtn ul li {width:30px;height:30px;border-radius:50%;display:inline-block;background-color:white;opacity:0.9;margin-left:10px;}
.c-banner .jumpBtn ul li:first-child {margin-left:0px;}
@media screen and (max-width:768px) {
.c-banner {width:100%;height:345px;overflow:hidden;}
.c-banner .banner ul li img {width:768px;height:345px;left:50%;margin-left:-384px;}
}
.b-title {width:50rem;height:14rem;position:absolute;left:25%;top:22%;color:#FFFFFF;text-align:left;}
.b-title h2 {font-weight:600;margin-bottom:20px;}
.b-title h4 {font-size:1.5rem;margin-bottom:40px;}
.b-title span {display:inline-block;width:0.4375rem;height:5rem;margin-left:-1.9375rem;}
.b-title h4 span {height:auto;width:auto;margin-left:1em;}
.b-title a {width:10em;text-align:center;display:block;padding:0.9375rem;color:#212c42;font-size:1.5rem;letter-spacing:0.125rem;}
.b-title a:hover {color:#212c42;background:#FFF;}
/* About*/.about h3 {display:inline-block;line-height:2.625rem;height:2.6875rem;}
/* Announcements*/.announcements {display:flex;justify-content:space-between;}
.announcements .announcements_l {width:65%;}
.announcements .announcements_l .title {font-size:1.25rem;text-transform:uppercase;}
.announcements .announcements_l ul {display:flex;flex-wrap:wrap;}
.announcements .announcements_l ul li {width:50%;margin-top:1.75rem;}
.announcements .announcements_l ul li p {width:80%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.announcements .announcements_l ul li a {display:inline-block;color:#2f3faf;}
.announcements .announcements_l ul li a:hover {display:inline-block;color:#007bff !important;}
.announcements_r {width:390px;position:relative;padding-left:20px;padding-right:40px;}
.announcements_r>img {display:block;width:360px;position:absolute;top:0;right:0;z-index:2;}
.announcements_r::before {content:'';position:absolute;left:0;top:50px;display:block;z-index:1;width:95%;height:calc(100% - 50px);border:solid 4px #feb800;}
.announcements_r .publication {position:relative;z-index:3;margin-top:240px;}
.announcements_r .publication .publication_c {padding-bottom:1.5em;}
.announcements_r .publication a {transform:rotate(90deg);-ms-transform:rotate(90deg);/* Internet Explorer*/ -moz-transform:rotate(90deg);/* Firefox*/ -webkit-transform:rotate(90deg);/* Safari 和 Chrome*/ -o-transform:rotate(90deg);/* Opera*/ display:block;position:absolute;bottom:2em;right:-6rem;}
.publication a:hover {color:#007bff !important;}
.time {width:100%;background:url(../img/tiem_bg.jpg) no-repeat center;}
.time ul {display:flex;justify-content:space-between;}
.time ul li.line {width:1px;background:#e1e1e1;}
.time ul li {width:30%;text-align:center;padding:20px 0;color:#FFFFFF;}
.time ul li h3 {margin:0;}
.time ul li span {display:inline-block;text-align:center;width:2rem;height:0.125rem;}
.time ul li p {margin:0;}
/* news-list*/.news-list li {margin-bottom:1.25rem;display:flex;justify-content:space-between;}
.news-list .data {width:105px;height:105px;background:#f6f6f6;flex-shrink:0;margin-right:10px;display:flex;align-items:center;justify-content:center;text-align:center;}
.news-list .data p {text-align:center;font-size:1.5rem;font-weight:bold;line-height:1;}
.news-list .text {display:block;width:100%;border:1px solid #e1e1e1;color:#333333;padding:13px 15px 0 15px;}
.news-list .text .info {overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;opacity:.8;line-height:1.5;font-size:14px;margin-top:10px;}
.news-list .text:hover {background-color:#f5a32a;color:#FFFFFF;border:1px solid #f5a32a;}
.news-list .text:hover p {color:#FFFFFF;}
/* Speakers_bg*/.speakers_bg {width:100%;height:300px;background-image:url(../img/speakers_bg.jpg);}
.Box {position:relative;}
.Box .content {width:1200px;margin:0 auto;}
.Box h2 {text-align:center;margin-bottom:35px;padding-top:250px;}
.Box .Box_con {position:relative;}
.Box .Box_con .btnl {position:absolute;}
.Box .Box_con .btn {display:block;width:41px;height:41px;position:absolute;top:80px;cursor:pointer;}
.Box .Box_con .btnl {background:url(../img/jtl02.png) no-repeat center;left:-72px;}
.Box .Box_con .btnr {background:url(../img/jtr02.png) no-repeat center;right:-72px;}
.Box .Box_con .btnl:hover {background:url(../img/jtl03.png) no-repeat center;}
.Box .Box_con .btnr:hover {background:url(../img/jtr03.png) no-repeat center;}
.Box .Box_con .conbox {position:relative;overflow:hidden;padding-top:30px;}
.Box .Box_con .conbox ul {position:relative;list-style:none;}
.Box .Box_con .conbox ul li {float:left;width:167px;height:250px;margin-left:20px;overflow:hidden;position:relative;margin-left:124px;}
.Box .Box_con .conbox ul li h5 {position:absolute;bottom:0;width:100%;text-align:center;color:#ffffff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.Box .Box_con .conbox ul li:first-child {margin-left:85px;}
.Box .Box_con .conbox ul li img {display:block;width:167px;height:200px;transition:all 0.5s;border-radius:0.625rem;}
.Box .Box_con .conbox ul li:hover img {transform:scale(1.1);}
.Box .BoxSwitch {margin-top:30px;text-align:center;}
.Box .BoxSwitch span {display:inline-block;*display:inline;*zoom:1;vertical-align:middle;width:30px;height:3px;background:#ccc;margin:0 5px;cursor:pointer;}
.Box .BoxSwitch span.cur {background:red;}
/* Sponsors*/
.sponsors-list {display:flex;flex-wrap:wrap;margin-bottom:1rem;}
.sponsors-list li {margin-right:15px;margin-bottom:15px;}
.sponsors-list li img {height:80px;display:block;}
/* footer*/
.footer {margin-top:4rem;line-height:5rem;color:#FFFFFF;font-size:1.1rem;background:#2bd2d7; }
/* banner_ny*/
.banner_ny {background-repeat:no-repeat;background-position:center;height:172px;width:100%;}
/* main*/
.main {display:flex;justify-content:space-between;}
.page_left {width:30%;}
.page_left ul li {list-style-type:disc;line-height:2.25rem;font-size:20px;margin-left:1.25rem;}
.page_left ul li a {font-size:14px;color:#2f3faf;text-decoration:underline;}
.page_left h4 {font-size:18px;}
.page_right {width:70%;}
.position {background-color:#f2f2f2;height:3.125rem;padding-left:20px;}
.position a {line-height:3.125rem;}
.speakers_list li {display:flex;}
.speakers_list li~li {padding-top:2rem;padding-bottom:2rem;border-bottom:1px solid #d7d7d7;}
.speakers_list li img {border-radius:0.625rem;width:200px;display:block;flex-shrink:0;margin-right:20px;}
.speakers_list li .text {width:100%;}
.speakers_list li .info {margin-top:5px;}
.Submission {display:inline-block;color:#fff !important;padding:0 1.2em;border-radius:1.8rem;background-image:linear-gradient(to bottom,#21bcd9,#0b599d);}
.page_left>p {margin-bottom:0;margin-top:20px;}
.content .title {margin-bottom:25px;}
.page-text table td {padding:10px;border:solid 1px #666;line-height:1.5;}
.float-left { float: left !important; }
.font-weight-bold {
font-weight: 700 !important;
}
.mt-4, .my-4 {
margin-top: 1.5rem !important
}
.mt-5, .my-5 {
margin-top: 3rem !important;
}
.pt-3, .py-3 {
padding-top: 1rem !important;
}
.pl-4, .px-4 {
padding-left: 1.5rem !important;
}
.pt-5, .py-5 {
padding-top: 3rem !important;
}
.h5, h5 {
font-size: 1.25rem; font-weight: bold;
}
.pt-4, .py-4 {
padding-top: 1.5rem !important;
}
/* Topics Section*/
#topics {margin-top:15px;}
.topics-grid {display:grid;grid-template-columns:1fr;gap:10px;}
@media (min-width:768px) {.topics-grid {grid-template-columns:repeat(2,1fr);}
;}
.topic-card {background:var(--bg-white);padding:30px;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.05);transition:all 0.3s ease;border-left:4px solid var(--primary-color);}
.topic-card:hover {transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,0.1);}
.topic-card h3 {color:var(--primary-color);font-size:20px;display:flex;align-items:center;gap:10px;font-weight:bold;text-align:left;margin-top:15px;line-height:1.2;margin-bottom:20px;padding-bottom:15px;}
.topic-card h3::before {content:'';width:0px;height:0px;background:var(--secondary-color);border-radius:50%;}
.topic-card ul {list-style:none;padding:0; grid-template-columns: repeat(1, 1fr); display: grid; }
.topic-card li {padding:8px 0;padding-left:20px;position:relative;color:var(--text-light);font-size:14px;}
.topic-card li::before {content:'›';position:absolute;left:0;color:var(--secondary-color);font-weight:bold;}
.public_title h3:after {content:'';position:absolute;bottom:-6px;left:0;right:0;margin:0 auto;width:60px;height:4px;background:#2bd2d7;border-radius:4px;}
/* 组委会*/.committee-wrapper {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;}
.committee-card {background:white;border-radius:20px;padding:24px 20px;text-align:center;box-shadow:0 6px 14px rgba(0,0,0,0.02);border:1px solid #eef2f8;}
.committee-card h4 {font-size:1.2rem;font-weight:700;}
.committee-card p {color:#4b6b7a;font-size:0.85rem;margin-top:6px;}
.navbar-default .navbar-toggle .bar1, .navbar-default .navbar-toggle .bar2, .navbar-default .navbar-toggle .bar3 {
-webkit-transition: 0.4s;
transition: 0.4s;
}
body.nav-active .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 12px);
-ms-transform: rotate(-45deg) translate(-9px, 12px);
transform: rotate(-45deg) translate(-9px, 12px);
}
body.nav-active .bar2 {
opacity: 0;
}
body.nav-active .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -12px);
-ms-transform: rotate(45deg) translate(-8px, -12px);
transform: rotate(45deg) translate(-8px, -12px);
}
.navbar-default .navbar-toggle .icon-bar {
width: 41px;
height: 8px;
border-radius: 0;
margin: 0 0 7px;
}
.navbar-nav>li>.dropdown-menu{ background: #06A5AB; }
.navbar-nav>li>.dropdown-menu li a{ line-height: 3.89rem; }
.navbar-nav>li>.dropdown-menu li a:hover{ color: #fff; }
.layui-nav .layui-this a {color: #fff; background:#2bd2d7; border-radius: 12px; }
.nav ul li a{ line-height: 60px; color: #fff; font-weight: normal; }
.nav .open>a:hover{ background: #06A5AB; color: #fff; }
@media (max-width: 768px) {
.dropdown-menu {
position: relative;
top: 100%;
left: 0;
z-index: 1000;
float: none;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 16px;
text-align: left;
background-color: #F1F1F1;
border: 0px solid #ccc;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display: block;
}
.dropdown-toggle-2 .caret{ display: none; }
.dropdown-menu-level-2{ margin-left: 15px; }
.dropdown-menu>li>a{ line-height:3; border-bottom: 1px solid #ccc; padding: 0px; margin:3px 20px; }
}
:root {
--primary: #f8f8f8;
--accent: #4E66FF;
--accent2: #7b2fff;
--gold: #f0c060;
--surface: #024274;
--surface-light: #085fa2;
--text: #333;
--text-muted: #a0b4d0;
--border: rgba(255, 255, 255, 0.08);
--glow: 0 0 30px rgba(0, 198, 255, 0.25);
--glow-purple: 0 0 30px rgba(123, 47, 255, 0.25);
--radius: 14px;
--radius-sm: 8px;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
background: var(--primary);
color: var(--text);
line-height: 1.7;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ============ ANIMATED BACKGROUND ============ */
.bg-mesh {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.bg-mesh::before {
content: '';
position: absolute;
top: -40%;
left: -20%;
width: 80%;
height: 120%;
background: radial-gradient(ellipse at 30% 40%, rgba(0, 180, 255, 0.06) 0%, transparent 70%);
animation: floatGlow 12s ease-in-out infinite;
}
.bg-mesh::after {
content: '';
position: absolute;
bottom: -30%;
right: -15%;
width: 70%;
height: 100%;
background: radial-gradient(ellipse at 60% 50%, rgba(120, 40, 255, 0.05) 0%, transparent 70%);
animation: floatGlow 16s ease-in-out infinite reverse;
}
@keyframes floatGlow {
0%,
100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(40px, -30px) scale(1.08);
}
66% {
transform: translate(-25px, 20px) scale(0.94);
}
}
.particles {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.particle {
position: absolute;
border-radius: 50%;
background: var(--accent);
opacity: 0;
animation: particleFloat 8s ease-in-out infinite;
}
.particle:nth-child(1) {
width: 3px;
height: 3px;
left: 10%;
top: 60%;
animation-delay: 0s;
background: #00c6ff;
}
.particle:nth-child(2) {
width: 2px;
height: 2px;
left: 25%;
top: 30%;
animation-delay: 2s;
background: #7b2fff;
}
.particle:nth-child(3) {
width: 4px;
height: 4px;
left: 55%;
top: 70%;
animation-delay: 4s;
background: #00c6ff;
}
.particle:nth-child(4) {
width: 2px;
height: 2px;
left: 75%;
top: 20%;
animation-delay: 1.5s;
background: #f0c060;
}
.particle:nth-child(5) {
width: 3px;
height: 3px;
left: 85%;
top: 55%;
animation-delay: 5s;
background: #7b2fff;
}
.particle:nth-child(6) {
width: 2px;
height: 2px;
left: 40%;
top: 85%;
animation-delay: 3s;
background: #00c6ff;
}
@keyframes particleFloat {
0%,
100% {
opacity: 0;
transform: translateY(0) scale(0.5);
}
15% {
opacity: 0.7;
transform: translateY(-60px) scale(1.4);
}
30% {
opacity: 0.2;
transform: translateY(-120px) scale(0.6);
}
45% {
opacity: 0.55;
transform: translateY(-180px) scale(1.1);
}
60% {
opacity: 0.05;
transform: translateY(-240px) scale(0.3);
}
100% {
opacity: 0;
transform: translateY(-300px) scale(0);
}
}
/* ============ LAYOUT ============ */
.container {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 0 28px;
}
.section {
padding: 70px 0;
position: relative;
}
.section-label {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
background: rgba(0, 198, 255, 0.08);
padding: 6px 16px;
border-radius: 50px;
margin-bottom: 18px;
border: 1px solid rgba(0, 198, 255, 0.2);
}
.section-title {
font-size: 2.3rem;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 16px;
background: linear-gradient(135deg, #333 0%, #c8daf0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
font-size: 1.05rem;
color: var(--text-muted);
max-width: 650px;
margin-bottom: 40px;
font-weight: 400;
}
/* ============ HEADER / HERO ============ */
.hero {
display: flex;
align-items: center;
position: relative;
z-index: 1;
padding-top: 70px;
}
.hero-content {
width: 100%;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
border-radius: 50px;
padding: 8px 20px;
font-size: 1.2rem;
font-weight: 600;
color: var(--accent);
margin-bottom: 28px;
backdrop-filter: blur(10px);
animation: fadeInUp 0.8s ease-out;
}
.hero-badge .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 12px var(--accent);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
box-shadow: 0 0 8px var(--accent);
}
50% {
box-shadow: 0 0 22px var(--accent), 0 0 40px rgba(0, 198, 255, 0.4);
}
}
.hero-title {
font-size: clamp(2.6rem, 5.5vw, 4rem);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.15;
margin-bottom: 22px;
animation: fadeInUp 0.8s ease-out 0.1s both;
}
.hero-title .gradient-text {
background: linear-gradient(135deg, #00c6ff 0%, #7b2fff 50%, #f0c060 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-desc {
font-size: 1.15rem;
color: var(--text-muted);
margin-bottom: 36px;
animation: fadeInUp 0.8s ease-out 0.2s both;
line-height: 1.8;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
animation: fadeInUp 0.8s ease-out 0.3s both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 50px;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.03em;
cursor: pointer;
text-decoration: none;
transition: var(--transition);
border: none;
white-space: nowrap;
}
.btn-primary {
background: linear-gradient(135deg, #00c6ff 0%, #0078ff 100%);
color: #fff;
box-shadow: 0 8px 30px rgba(0, 150, 255, 0.35);
}
.btn-primary:hover {
box-shadow: 0 14px 40px rgba(0, 180, 255, 0.5);
transform: translateY(-2px);
}
.btn-outline {
background: #074179;
color: #fff;
border: 0px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(6px);
}
.btn-outline:hover {
border-color: #fff;
background: ;
transform: translateY(-2px);
}
.hero-visual {
position: absolute;
right: -60px;
top: 50%;
transform: translateY(-50%);
width: 380px;
height: 380px;
pointer-events: none;
z-index: 0;
opacity: 0.7;
}
.hero-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
}
.hero-orb.orb1 {
width: 260px;
height: 260px;
background: rgba(0, 180, 255, 0.2);
top: 0;
right: 30px;
animation: orbFloat 7s ease-in-out infinite;
}
.hero-orb.orb2 {
width: 180px;
height: 180px;
background: rgba(123, 47, 255, 0.22);
bottom: 20px;
right: 90px;
animation: orbFloat 9s ease-in-out infinite reverse;
}
.hero-orb.orb3 {
width: 100px;
height: 100px;
background: rgba(240, 192, 96, 0.18);
top: 100px;
right: 150px;
animation: orbFloat 8s ease-in-out infinite 1s;
}
@keyframes orbFloat {
0%,
100% {
transform: translate(0, 0);
}
33% {
transform: translate(25px, -20px);
}
66% {
transform: translate(-18px, 15px);
}
}
/* ============ NAVBAR ============ */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
padding: 16px 0;
transition: var(--transition);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(10, 26, 58, 0.7);
border-bottom: 1px solid transparent;
}
.navbar.scrolled {
background: rgba(10, 26, 58, 0.92);
border-bottom: 1px solid var(--border);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}
.navbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 0 28px;
}
.nav-logo {
font-weight: 800;
font-size: 1.3rem;
letter-spacing: -0.02em;
color: #fff;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
}
.nav-logo .icon {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, #00c6ff, #7b2fff);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.nav-links {
display: flex;
gap: 32px;
list-style: none;
align-items: center;
}
.nav-links a {
color: var(--text-muted);
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
transition: var(--transition);
letter-spacing: 0.02em;
position: relative;
}
.nav-links a:hover,
.nav-links a.active {
color: #fff;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
width: 0;
height: 2px;
background: var(--accent);
transition: var(--transition);
border-radius: 2px;
}
.nav-links a:hover::after,
.nav-links a.active::after {
width: 100%;
}
.nav-cta {
padding: 10px 20px;
border-radius: 50px;
background: var(--accent);
color: #000 !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
transition: var(--transition);
}
.nav-cta:hover {
box-shadow: 0 6px 22px rgba(0, 198, 255, 0.45);
transform: translateY(-1px);
}
.nav-cta::after {
display: none !important;
}
/* ============ TOPICS GRID ============ */
.topics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 24px;
}
.topic-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px 28px;
transition: var(--transition);
position: relative;
overflow: hidden;
cursor: default;
}
.topic-card:hover {
border-color: rgba(255, 255, 255, 0.2);
box-shadow: var(--glow);
transform: translateY(-3px);
background: var(--surface-light);
}
.topic-card::before {
content: '';
position: absolute;
top: -30px;
right: -30px;
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--accent);
opacity: 0.04;
transition: var(--transition);
pointer-events: none;
}
.topic-card:hover::before {
opacity: 0.1;
transform: scale(2.5);
}
.topic-card:nth-child(2)::before {
background: #7b2fff;
}
.topic-card:nth-child(3)::before {
background: #f0c060;
}
.topic-card:nth-child(4)::before {
background: #00e5a0;
}
.topic-number {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.15em;
color: var(--accent);
margin-bottom: 8px;
}
.topic-card:nth-child(2) .topic-number {
color: #9b6dff;
}
.topic-card:nth-child(3) .topic-number {
color: #f0c060;
}
.topic-card:nth-child(4) .topic-number {
color: #00e5a0;
}
.topic-card h3 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 16px;
color: #fff;
letter-spacing: -0.01em;
}
.topic-card ul {
list-style: none;
padding: 0;
}
.topic-card ul li {
font-size: 0.88rem;
color: var(--text-muted);
padding: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
display: flex;
align-items: flex-start;
gap: 10px;
transition: var(--transition);
}
.topic-card ul li:last-child {
border-bottom: none;
}
.topic-card ul li:hover {
color: #fff;
}
.topic-card ul li .bullet {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
margin-top: 7px;
opacity: 0.6;
}
.topic-card:nth-child(2) ul li .bullet {
background: #9b6dff;
}
.topic-card:nth-child(3) ul li .bullet {
background: #f0c060;
}
.topic-card:nth-child(4) ul li .bullet {
background: #00e5a0;
}
/* ============ DATES TABLE ============ */
.dates-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.date-item {
flex: 1 1 200px;
min-width: 180px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px 20px;
text-align: center;
transition: var(--transition);
}
.date-item:hover {
border-color: var(--accent);
box-shadow: var(--glow);
transform: translateY(-3px);
}
.date-item .date-label {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 8px;
}
.date-item .date-value {
font-size: 1.3rem;
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
}
.date-item.highlight {
border-color: var(--accent);
background: rgba(0, 198, 255, 0.06);
box-shadow: var(--glow);
}
.date-item.highlight .date-value {
color: var(--accent);
}
/* ============ INFO CARDS ============ */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.info-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 30px;
transition: var(--transition);
}
.info-card:hover {
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
transform: translateY(-2px);
}
.info-card .icon-circle {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
margin-bottom: 16px;
background: rgba(0, 198, 255, 0.1);
color: var(--accent);
}
.info-card h4 {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 8px;
color: #fff;
}
.info-card p {
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.7;
}
/* ============ FOOTER ============ */
.footer {
border-top: 1px solid var(--border);
padding: 40px 0;
text-align: center;
position: relative;
z-index: 1;
background: rgba(0, 0, 0, 0.2);
}
.footer p {
color: var(--text-muted);
font-size: 0.85rem;
margin: 6px 0;
}
.footer .footer-links {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 12px;
}
.footer .footer-links a {
color: var(--text-muted);
text-decoration: none;
font-size: 0.85rem;
transition: var(--transition);
}
.footer .footer-links a:hover {
color: #fff;
}
/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
.hero-visual {
display: none;
}
.nav-links {
display: none;
}
.hero-title {
font-size: 2rem;
}
.section-title {
font-size: 1.7rem;
}
.topics-grid {
grid-template-columns: 1fr;
}
.container {
padding: 0 18px;
}
.navbar-inner {
padding: 0 18px;
}
.hero {
min-height: auto;
padding: 100px 0 60px;
}
}
@media (max-width: 500px) {
.hero-title {
font-size: 1.6rem;
}
.hero-actions {
flex-direction: column;
}
.btn {
justify-content: center;
text-align: center;
}
.date-item {
flex: 1 1 100%;
}
}
/* ============ MOBILE NAV TOGGLE (simple) ============ */
.mobile-menu-btn {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
z-index: 1000;
}
.mobile-menu-btn span {
display: block;
width: 26px;
height: 2.5px;
background: #fff;
margin: 6px 0;
border-radius: 3px;
transition: var(--transition);
}
@media (max-width: 900px) {
.mobile-menu-btn {
display: block;
}
.nav-links {
display: none;
position: absolute;
top: 70px;
left: 0;
right: 0;
background: rgba(10, 26, 58, 0.97);
flex-direction: column;
padding: 28px;
gap: 20px;
border-bottom: 1px solid var(--border);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 0 0 16px 16px;
}
.nav-links.open {
display: flex;
}
}
/* ============================================================
CDC-style official redesign — merged override layer (2026-09)
Loaded last; only adds/overrides, never removes base classes.
============================================================ */
/* ============================================================
Brand refresh (v=20260913e)
Palette sampled from the conference logo:
navy globe + wordmark / teal globe / medical-orange cross
============================================================ */
:root {
/* primary: deep navy (logo globe dark segments + HDSMPI type) */
--gov-navy: #0a3d7c;
--gov-navy-dark: #072b5c;
--gov-navy-tint: #e9f0f8;
/* secondary: teal (logo globe light segments) */
--gov-teal: #17a9b4;
--gov-teal-bright: #22bcc8;
--gov-teal-deep: #0c7480;
/* accent: medical orange (logo cross) */
--gov-orange: #f58220;
--gov-orange-dark: #d96a10;
--gov-orange-tint: #fdeee0;
/* legacy aliases mapped onto the new system */
--gov-blue: #0c7480;
--gov-blue-dark: #08545e;
--gov-blue-tint: #e5f4f5;
/* neutrals */
--gov-ink: #1c2b3a;
--gov-muted: #5a6b7b;
--gov-line: #dde6ee;
--gov-bg: #eef5f9;
/* effects */
--gov-radius: 10px;
--gov-radius-lg: 18px;
--gov-shadow-sm: 0 2px 10px rgba(7, 43, 92, .06);
--gov-shadow-md: 0 12px 32px rgba(7, 43, 92, .10);
--gov-shadow-lg: 0 20px 48px rgba(7, 43, 92, .15);
--gov-shadow-teal: 0 12px 28px rgba(23, 169, 180, .26);
--gov-shadow-orange: 0 12px 26px rgba(245, 130, 32, .26);
--grad-brand: linear-gradient(135deg, #0a3d7c 0%, #17a9b4 100%);
--grad-cta: linear-gradient(135deg, #f58220 0%, #f7a731 100%);
--bg-gradient: linear-gradient(135deg, #072b5c 0%, #0a3d7c 55%, #0e6178 100%);
}
/* ---------- Base ---------- */
body {
background-image: none;
background-color: #f2f7fa;
color: var(--gov-ink);
text-align: left;
font-family: 'Open Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
line-height: 1.7;
overflow-x: hidden;
}
::selection { background: rgba(23, 169, 180, .22); }
p { font-family: inherit; color: inherit; }
a { color: var(--gov-teal-deep); }
a:hover, a:focus { color: var(--gov-navy); text-decoration: none; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid rgba(23, 169, 180, .55);
outline-offset: 2px;
border-radius: 2px;
}
.w-1200 { width: 100%; max-width: 1200px; padding-left: 24px; padding-right: 24px; }
@media (min-width: 1200px) {
.container { padding-left: 24px; padding-right: 24px; }
}
/* ============================================================
1. Header / Navigation
============================================================ */
header.nav {
height: auto;
min-height: 76px;
background: #fff;
border-bottom: 1px solid var(--gov-line);
box-shadow: none;
transition: box-shadow .25s ease;
}
header.nav.is-scrolled {
box-shadow: 0 2px 10px rgba(10, 40, 70, .08);
}
/* center the whole logo + nav group as one unit */
.navkk { gap: 24px; padding: 8px 0; justify-content: center; }
.nav .logo {
display: flex;
align-items: center;
margin: 0 !important;
color: var(--gov-navy) !important;
line-height: 1;
cursor: default;
user-select: none;
}
.nav .logo img { height: 68px; width: auto; display: block; }
#main-menu {
height: auto !important;
line-height: normal !important;
margin: 0 !important;
border-radius: 0;
background: transparent;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 2px;
}
#main-menu > li > a,
#main-menu .dropdown-toggle {
color: var(--gov-navy);
line-height: 1.5 !important;
padding: 10px 11px;
font-size: .92rem;
font-weight: 600;
letter-spacing: .02em;
border-radius: var(--gov-radius);
white-space: nowrap;
}
#main-menu > li > a:hover,
#main-menu .dropdown-toggle:hover,
#main-menu .open > a,
#main-menu .open > a:hover {
background: var(--gov-blue-tint) !important;
color: var(--gov-blue-dark) !important;
text-decoration: none;
}
#main-menu .caret { border-top-color: currentColor; margin-left: 5px; }
.layui-nav .layui-this > a,
.layui-nav .layui-this > a:hover {
background: var(--gov-blue-tint) !important;
color: var(--gov-blue-dark) !important;
border-radius: var(--gov-radius);
}
/* Dropdown panel — flush against the trigger so moving the mouse
from "CALLS" to its items never crosses a hover-killing gap */
#main-menu .dropdown-menu {
background: #fff;
border: 1px solid var(--gov-line);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(10, 40, 70, .14);
padding: 6px 0;
min-width: 230px;
margin-top: 0;
z-index: 1000;
}
#main-menu .dropdown-menu li a {
color: var(--gov-ink) !important;
background: transparent !important;
border-radius: 4px;
line-height: 1.5 !important;
padding: 9px 20px !important;
font-size: .92rem;
font-weight: 400;
border-bottom: 0 !important;
white-space: normal;
}
#main-menu .dropdown-menu li a:hover,
#main-menu .dropdown-menu li a:focus,
#main-menu .dropdown-menu li a:active,
#main-menu .dropdown-menu li.layui-this > a {
background: var(--gov-blue-tint) !important;
color: var(--gov-blue-dark) !important;
}
@media (min-width: 992px) {
/* desktop: hover / open / keyboard-focus all keep the panel shown */
#main-menu li.dropdown:hover > .dropdown-menu,
#main-menu li.dropdown.open > .dropdown-menu,
#main-menu li.dropdown:focus-within > .dropdown-menu {
display: block;
}
}
/* ============================================================
2. Banner slider — full-bleed cover + redesigned arrows
============================================================ */
.sy-slider1 { width: 100%; background: var(--gov-blue-tint); }
#home-slider li > div {
height: 500px !important;
/* override the hardcoded http://127.0.0.41 URL so the banner
loads on every host / domain / local preview */
background-image: url('/themes/default/public/assets/images/banner1.jpg') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
/* keep slippry's measured wrapper from collapsing between slides */
.sy-slider1 .sy-box,
.sy-slider1 .sy-slides-wrap,
.sy-slider1 .sy-slides-crop { width: 100%; min-height: 500px; }
@media (max-width: 767px) {
.sy-slider1 .sy-box,
.sy-slider1 .sy-slides-wrap,
.sy-slider1 .sy-slides-crop { min-height: 300px; }
}
/* prev / next arrows: replace the cropped sprite PNG with clean
inline SVG chevrons on a translucent navy circle */
.sy-slider1 .sy-controls li.sy-prev a::after,
.sy-slider1 .sy-controls li.sy-next a::after {
width: 46px;
height: 46px;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: rgba(2, 44, 86, .55);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: center;
line-height: 1;
text-indent: 0;
color: transparent;
transition: background-color .2s ease;
}
.sy-slider1 .sy-controls li.sy-prev a::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}
.sy-slider1 .sy-controls li.sy-next a::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
.sy-slider1 .sy-controls li a:link,
.sy-slider1 .sy-controls li a:visited { opacity: 1; }
.sy-slider1 .sy-controls li a:hover::after,
.sy-slider1 .sy-controls li a:focus::after { background-color: rgba(2, 44, 86, .85); }
@media (max-width: 600px) {
.sy-slider1 .sy-controls li { min-width: 3em; }
.sy-slider1 .sy-controls li.sy-prev a::after,
.sy-slider1 .sy-controls li.sy-next a::after {
width: 36px;
height: 36px;
background-size: 16px 16px;
}
}
/* prev / next arrows hidden (autoplay + pager remain) */
.sy-slider1 .sy-controls { display: none !important; }
/* pager: navy active bar */
.sy-slider1 .sy-pager li.sy-active a { background-color: var(--gov-blue) !important; }
/* ============================================================
3. Hero
============================================================ */
.hero {
display: block;
position: relative;
overflow: hidden;
background:
radial-gradient(560px 320px at 92% -12%, rgba(34, 188, 200, .16), transparent 62%),
radial-gradient(460px 300px at 6% 112%, rgba(10, 61, 124, .10), transparent 60%),
linear-gradient(180deg, #ffffff 0%, #f1f8fb 100%);
padding: 92px 0 80px;
}
.hero-content { max-width: 1040px; margin: 0 auto; position: relative; z-index: 1; text-align: center; }
.hero-visual {
display: block;
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.hero-orb {
position: absolute;
border-radius: 50%;
filter: blur(46px);
opacity: .5;
}
.hero-orb.orb1 {
width: 260px; height: 260px;
right: -60px; top: -70px;
background: radial-gradient(circle, rgba(34,188,200,.5), transparent 70%);
animation: orbFloat 9s ease-in-out infinite;
}
.hero-orb.orb2 {
width: 200px; height: 200px;
right: 220px; bottom: -80px;
background: radial-gradient(circle, rgba(245,130,32,.22), transparent 70%);
animation: orbFloat 11s ease-in-out infinite reverse;
}
.hero-orb.orb3 { display: none; }
@keyframes orbFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-18px); }
}
.hero-badge {
display: inline-block;
background: #fff;
border: 1px solid #cfe7e9;
border-radius: 999px;
padding: 9px 18px;
margin-bottom: 26px;
font-size: .92rem;
font-weight: 600;
color: var(--gov-teal-deep);
letter-spacing: .01em;
box-shadow: var(--gov-shadow-sm);
animation: none;
backdrop-filter: none;
}
.hero-badge .dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--gov-orange);
margin-right: 8px;
box-shadow: 0 0 0 4px rgba(245, 130, 32, .18);
animation: dotPulse 2.2s ease-out infinite;
}
@keyframes dotPulse {
0% { box-shadow: 0 0 0 0 rgba(245, 130, 32, .35); }
70% { box-shadow: 0 0 0 8px rgba(245, 130, 32, 0); }
100% { box-shadow: 0 0 0 0 rgba(245, 130, 32, 0); }
}
.hero-title {
color: var(--gov-navy);
font-size: clamp(2.1rem, 3.8vw, 3.1rem);
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.2;
margin-bottom: 22px;
animation: none;
}
.hero-title .gradient-text {
background: linear-gradient(100deg, #17a9b4 10%, #0a3d7c 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.hero-desc {
color: #40515f;
font-size: 1.05rem;
line-height: 1.9;
max-width: 880px;
margin: 0 auto 34px;
text-align: justify;
text-justify: inter-word;
hyphens: auto;
animation: none;
}
.hero-desc p { margin: 0; }
.hero-actions { animation: none; gap: 14px; display: flex; flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px) {
.hero-content { text-align: center; }
.hero-desc { text-align: left; }
}
.btn {
border-radius: 999px;
padding: 13px 30px;
font-weight: 600;
font-size: .98rem;
letter-spacing: .02em;
transition: transform .22s ease, box-shadow .22s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-primary {
background: var(--grad-brand);
border: 0;
color: #fff;
box-shadow: var(--gov-shadow-teal);
}
.btn-primary:hover,
.btn-primary:focus {
background: linear-gradient(135deg, #08346b 0%, #12949e 100%);
box-shadow: 0 16px 34px rgba(10, 61, 124, .30);
transform: translateY(-2px);
color: #fff;
}
.btn-outline {
background: #fff;
color: var(--gov-navy);
border: 2px solid var(--gov-navy);
backdrop-filter: none;
}
.btn-outline:hover,
.btn-outline:focus {
background: var(--gov-navy-tint);
border-color: var(--gov-navy);
color: var(--gov-navy);
transform: translateY(-2px);
}
/* ============================================================
4. Generic section headings + Important Dates
============================================================ */
.section { padding: 92px 0; }
.section-label {
display: inline-block;
width: auto;
background: var(--gov-blue-tint);
border: 1px solid #c3e4e6;
border-radius: 999px;
padding: 5px 14px;
margin-bottom: 14px;
font-size: .78rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gov-teal-deep);
}
.section-title {
font-size: 2.1rem;
font-weight: 700;
letter-spacing: -.01em;
color: var(--gov-navy);
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: currentColor;
margin-bottom: 14px;
position: relative;
}
.section-title::after {
content: '';
display: block;
width: 58px;
height: 4px;
border-radius: 2px;
margin-top: 14px;
background: var(--grad-brand);
}
.section-subtitle {
color: var(--gov-muted);
font-size: 1.05rem;
max-width: 760px;
margin-bottom: 44px;
}
/* Important Dates — full-bleed tinted band with elevated milestone cards */
#dates.section {
background: #edf5f9 !important;
box-shadow: 0 0 0 100vmax #edf5f9;
clip-path: inset(0 -100vmax);
}
.dates-container { gap: 16px; flex-wrap: nowrap; }
#dates .container { max-width: 1400px; }
.date-item {
position: relative;
overflow: hidden;
flex: 1 1 0;
min-width: 0;
background: #fff;
border: 1px solid #e4edf3;
border-radius: var(--gov-radius-lg);
padding: 26px 20px 22px;
text-align: left;
box-shadow: var(--gov-shadow-sm);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.date-item::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
background: var(--grad-brand);
}
.date-item::after {
content: '';
position: absolute;
top: 26px;
right: 10px;
width: 18px;
height: 18px;
opacity: .5;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317a9b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.date-item:hover {
border-color: #bfe0e2;
box-shadow: var(--gov-shadow-md);
transform: translateY(-6px);
}
.date-item .date-label {
color: var(--gov-muted);
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 12px;
padding-right: 34px;
min-height: 20px;
white-space: nowrap;
}
.date-item .date-value {
color: var(--gov-navy);
font-size: 1.26rem;
font-weight: 700;
line-height: 1.35;
}
/* the conference date (last milestone) carries the logo-orange accent */
.date-item:last-child {
background: linear-gradient(160deg, #fff7ef 0%, #fff 70%);
border-color: #f6d4b4;
}
.date-item:last-child::before { background: var(--grad-cta); }
.date-item:last-child::after {
opacity: .65;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d96a10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.date-item:last-child .date-value { color: var(--gov-orange-dark); }
.date-item.highlight {
border-color: var(--gov-teal);
background: var(--gov-blue-tint);
box-shadow: var(--gov-shadow-sm);
}
.date-item.highlight .date-value { color: var(--gov-teal-deep); }
/* ============================================================
5. Content blocks (Call for Papers / Publication)
============================================================ */
/* Each homepage content module (Call for Papers / Publication /
Organizer) becomes one consistent elevated card */
.about.mt-5 { margin-top: 72px !important; }
.about.mt-4 { margin-top: 48px !important; }
.announcements.mt-5 { margin-top: 72px !important; }
.about {
background: #fff;
border: 1px solid #e3ecf2;
border-radius: var(--gov-radius-lg);
box-shadow: var(--gov-shadow-sm);
padding: 44px 48px;
margin-left: auto;
margin-right: auto;
transition: box-shadow .25s ease, transform .25s ease;
}
.about:hover { box-shadow: var(--gov-shadow-md); }
.public_title { justify-content: flex-start; margin-bottom: 18px; }
.public_title .public_span {
width: 6px;
height: 32px;
border-radius: 3px;
background: var(--grad-brand) !important;
margin-right: 14px;
align-self: center;
}
.public_title h3 {
position: relative;
margin: 0;
color: var(--gov-navy);
font-size: 1.55rem;
font-weight: 700;
text-transform: none;
letter-spacing: -.01em;
padding-bottom: 14px !important;
}
.public_title h3::after {
left: 0;
right: auto;
margin: 0;
width: 48px;
height: 3px;
border-radius: 2px;
background: var(--grad-brand);
}
.page-text {
color: var(--gov-ink);
font-size: 1.0625rem;
line-height: 1.75;
}
.page-text p { margin-bottom: 14px; }
#topics { margin-top: 32px; }
#topics .container { width: 100%; padding: 0; }
/* ============================================================
6. Cards (topic cards / organizer cards)
============================================================ */
.topics-grid { gap: 26px; counter-reset: topic; }
.topic-card {
position: relative;
overflow: hidden;
background: #fff;
border: 1px solid #e3ecf2;
border-radius: var(--gov-radius-lg);
padding: 34px 30px 30px;
box-shadow: var(--gov-shadow-sm);
counter-increment: topic;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.topics-grid .topic-card::before {
content: '';
display: block;
position: absolute;
top: 0; left: 0; right: 0;
width: auto;
height: 5px;
border-radius: 0;
opacity: 1;
background: var(--grad-brand);
transform: none;
pointer-events: none;
}
.topic-card::after {
content: counter(topic, decimal-leading-zero);
position: absolute;
top: 20px;
right: 24px;
font-size: 1.5rem;
font-weight: 800;
color: rgba(23, 169, 180, .55);
letter-spacing: -.02em;
transition: color .25s ease;
}
.topic-card:hover {
border-color: #bfe0e2;
background: #fff;
box-shadow: var(--gov-shadow-md);
transform: translateY(-6px);
}
.topic-card:hover::after { color: var(--gov-teal-deep); }
.topic-card h3 {
color: var(--gov-navy);
font-size: 1.12rem;
font-weight: 700;
margin: 0 44px 14px 0;
padding-bottom: 14px;
border-bottom: 1px solid #e4ebf1;
line-height: 1.4;
}
.topic-card h3::before { display: none; }
.topics-grid .topic-card ul li {
position: relative;
display: block;
color: #33424f;
font-size: .96rem;
font-weight: 500;
line-height: 1.6;
padding: 9px 0 9px 20px;
border-bottom: 0;
gap: 0;
}
.topics-grid .topic-card ul li:hover { color: var(--gov-navy); }
.topics-grid .topic-card ul li::before {
content: '';
position: absolute;
left: 2px;
top: 16px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--gov-teal);
opacity: 1;
}
.topic-card li p { margin: 0; color: inherit; }
.committee-wrapper { gap: 28px; }
.committee-card {
background: #fff;
border: 1px solid #e3ecf2;
border-radius: var(--gov-radius-lg);
padding: 34px 26px;
box-shadow: var(--gov-shadow-sm);
text-align: center;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.committee-card:hover {
border-color: #bfe0e2;
box-shadow: var(--gov-shadow-md);
transform: translateY(-5px);
}
.committee-card img {
max-width: 100%;
max-height: 86px;
height: auto;
background: #f2f7fa;
padding: 14px 18px;
border-radius: 12px;
}
.committee-card p {
color: var(--gov-muted);
font-size: .95rem;
line-height: 1.6;
margin-top: 12px;
}
/* ============================================================
7. Submission guide band + action buttons
============================================================ */
.announcements {
display: block;
background: #e7f4f6;
padding: 72px 24px;
box-shadow: 0 0 0 100vmax #e7f4f6;
clip-path: inset(0 -100vmax);
}
/* white inner card sitting on the tinted band */
.announcements > div {
background: #fff;
border-radius: var(--gov-radius-lg);
box-shadow: var(--gov-shadow-md);
padding: 46px 48px;
max-width: 1200px;
margin: 0 auto;
}
.announcements h5 {
color: var(--gov-navy);
font-weight: 600;
}
.announcements h5 a { color: var(--gov-orange-dark); font-weight: 700; }
.downloadmb {
width: 100% !important;
max-width: 560px;
margin-top: 28px !important;
}
.downloadmb li {
display: block;
width: 100% !important;
margin-bottom: 14px;
}
.downloadmb li a {
width: 100% !important;
max-width: 380px;
height: auto !important;
line-height: 1.5 !important;
padding: 15px 32px !important;
border-radius: 999px !important;
background: var(--grad-cta) !important;
color: #fff !important;
font-weight: 700;
letter-spacing: .02em;
box-shadow: var(--gov-shadow-orange) !important;
transition: transform .22s ease, box-shadow .22s ease, filter .2s ease;
}
.downloadmb li a:hover,
.downloadmb li a:focus {
filter: brightness(1.04);
transform: translateY(-2px);
box-shadow: 0 16px 32px rgba(217, 106, 16, .32) !important;
color: #fff !important;
text-decoration: none;
}
/* ============================================================
8. Footer
============================================================ */
footer {
position: relative;
background:
radial-gradient(720px 240px at 50% -120px, rgba(34, 188, 200, .22), transparent 70%),
linear-gradient(135deg, #072b5c 0%, #0a3d7c 55%, #0e6178 100%) !important;
color: #c7dcea !important;
padding: 64px 0 46px !important;
margin-top: 96px !important;
text-align: center;
font-size: .92rem;
line-height: 1.8;
overflow: hidden;
}
footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, #17a9b4, #f58220 55%, #17a9b4);
}
footer p { margin-bottom: 8px; }
footer a { color: #8fe0e8 !important; }
footer a:hover { color: #fff !important; text-decoration: underline; }
/* ============================================================
9. Scroll reveal (toggled by merged site JS, no-JS safe)
============================================================ */
.reveal-ready .fade-in,
.reveal-ready .date-item,
.reveal-ready .committee-card {
opacity: 0;
transform: translateY(18px);
transition: opacity .6s ease, transform .6s ease;
}
.reveal-ready .topic-card:nth-child(2) { transition-delay: .08s; }
.reveal-ready .topic-card:nth-child(3) { transition-delay: .16s; }
.reveal-ready .topic-card:nth-child(4) { transition-delay: .24s; }
.reveal-ready .fade-in.is-visible,
.reveal-ready .date-item.is-visible,
.reveal-ready .committee-card.is-visible {
opacity: 1;
transform: none;
}
/* ============================================================
10. Responsive
============================================================ */
@media (max-width: 991px) {
header.nav { position: static; }
.navkk { flex-direction: column; gap: 8px; padding: 12px 0; }
.nav .logo { margin: 0 !important; }
.nav .logo img { height: 60px; }
#main-menu { justify-content: center; }
}
@media (max-width: 767px) {
#home-slider li > div { height: 300px !important; }
.sy-slider1 { height: 300px !important; }
.hero { padding: 60px 0 52px; }
.section { padding: 64px 0; }
.about.mt-5, .announcements.mt-5 { margin-top: 64px !important; }
.announcements { padding: 60px 24px; }
footer { margin-top: 72px !important; }
#main-menu .dropdown-menu {
position: static;
float: none;
width: 100%;
min-width: 0;
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
margin: 0;
}
#main-menu .dropdown-menu li a {
padding-left: 26px !important;
color: #33475b !important;
}
}
@media (max-width: 560px) {
#main-menu { gap: 0; }
#main-menu > li > a,
#main-menu .dropdown-toggle { padding: 8px 9px; font-size: .84rem; }
.topics-grid { grid-template-columns: 1fr; }
.date-item { flex: 1 1 100%; }
.hero-actions .btn { width: 100%; justify-content: center; }
}
/* ============================================================
11. Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
.reveal-ready .fade-in,
.reveal-ready .date-item,
.reveal-ready .committee-card { opacity: 1 !important; transform: none !important; }
html { scroll-behavior: auto; }
}
/* ============================================================
12. Inner pages — shared visual system (v=20260913e)
page.html / article.html / list.html / contact.html
============================================================ */
/* ---- visual banner + breadcrumb (article/list/contact) ---- */
.visual-area { padding: 0 0 34px !important; margin: 0 0 36px !important; }
.visual-holder { position: relative; }
.visual-holder > div {
height: 300px;
background-image: url('/themes/default/public/assets/images/banner1.jpg') !important;
background-size: cover !important;
background-position: center !important;
}
.visual-holder::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7,43,92,.08) 35%, rgba(7,43,92,.55));
pointer-events: none;
}
.breadcrumb-area {
background: var(--grad-brand) !important;
padding: 14px 0 !important;
}
.breadcrumb {
background: transparent !important;
border-radius: 0;
margin-bottom: 0 !important;
padding: 0 !important;
font-size: .85rem;
}
.breadcrumb > li { color: rgba(255,255,255,.75); }
.breadcrumb > li + li::before {
content: '\00a0/\00a0';
color: rgba(255,255,255,.55);
padding: 0;
}
.breadcrumb > li a span,
.breadcrumb > li a { color: #fff !important; font-weight: 600; }
.breadcrumb > li.active span { color: #9fe3e6; }
/* ---- page headings across inner templates ---- */
h1, .h1, .news-holder h2 { color: var(--gov-navy) !important; letter-spacing: -.01em; }
/* ---- sidebar sub navigation ---- */
.sub-nav-holder .sub-nav-area {
border: 1px solid #e3ecf2 !important;
border-top: 1px solid #e3ecf2 !important;
border-radius: var(--gov-radius-lg);
overflow: hidden;
background: #fff;
box-shadow: var(--gov-shadow-sm);
}
.sub-nav-holder .sub-nav-area > li { border-bottom: 1px solid #eef3f7 !important; }
.sub-nav-holder .sub-nav-area > li:last-child { border-bottom: 0 !important; }
.sub-nav-holder .sub-nav-area > li > a {
color: var(--gov-ink) !important;
padding: 16px 26px !important;
transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
}
.sub-nav-holder .sub-nav-area > li > a:hover,
.sub-nav-holder .sub-nav-area > li.active > a {
background: var(--gov-blue-tint);
color: var(--gov-teal-deep) !important;
padding-left: 32px !important;
}
.sub-nav-holder .sub-nav-area > li.active > a {
font-weight: 700;
box-shadow: inset 4px 0 0 var(--gov-teal);
}
/* ---- news list cards ---- */
.news-holder .news-block {
background: #fff;
border: 1px solid #e3ecf2 !important;
border-bottom: 1px solid #e3ecf2 !important;
border-radius: var(--gov-radius-lg);
box-shadow: var(--gov-shadow-sm);
padding: 22px;
transition: transform .25s ease, box-shadow .25s ease;
}
.news-holder .news-block:hover {
transform: translateY(-4px);
box-shadow: var(--gov-shadow-md);
}
.news-holder .image-frame { border-radius: 12px; }
.news-holder .image-frame img { border-radius: 12px; }
.news-holder time {
color: var(--gov-teal-deep) !important;
font-weight: 600;
font-size: .8rem !important;
letter-spacing: .04em;
}
.news-holder h3 a { color: var(--gov-navy) !important; }
.news-holder h3 a:hover { color: var(--gov-teal-deep) !important; }
.news-holder .more-link { color: var(--gov-teal-deep); }
.more-link::after {
background: none !important;
content: '\203A' !important;
width: auto !important;
font-size: 1.2em;
color: var(--gov-orange);
font-weight: 700;
margin-left: 4px;
}
.news-holder hr { border-color: #eef3f7; margin: 28px 0; }
.news-holder hr + .container a { color: var(--gov-teal-deep); font-weight: 600; }
/* ---- pagination ---- */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 30px; }
.pagination > li > a,
.pagination > li > span {
border: 1px solid #dde7ee !important;
border-radius: 10px !important;
color: var(--gov-navy) !important;
padding: 8px 15px !important;
margin: 0 !important;
background: #fff;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pagination > li > a:hover {
background: var(--gov-blue-tint) !important;
border-color: #bfe0e2 !important;
color: var(--gov-teal-deep) !important;
}
.pagination > .active > span,
.pagination > .active > a,
.pagination > .active > a:hover {
background: var(--grad-brand) !important;
border-color: transparent !important;
color: #fff !important;
}
/* ---- page.html: breadcrumb pill + content card ---- */
.main .position {
height: auto;
min-height: 0;
padding: 0;
margin: 0 0 26px;
background: transparent;
line-height: normal;
}
.main .position p {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
background: #fff;
border: 1px solid #e3ecf2;
border-radius: 999px;
padding: 10px 22px;
font-size: .84rem;
line-height: 1.5;
box-shadow: var(--gov-shadow-sm);
}
.main .position a { color: var(--gov-teal-deep); font-weight: 600; line-height: 1.5; }
.main .page.page-text {
background: #fff;
border: 1px solid #e3ecf2;
border-radius: var(--gov-radius-lg);
box-shadow: var(--gov-shadow-sm);
padding: 44px 48px;
margin-top: 0;
}
/* ---- rich content typography (inner pages only) ---- */
.main .page-text h1,
.main .page-text h2,
.main .page-text h3,
.main .page-text h4,
#article_content h1,
#article_content h2,
#article_content h3,
#article_content h4 {
color: var(--gov-navy);
font-weight: 700;
line-height: 1.35;
margin: 28px 0 14px;
}
.main .page-text h2,
#article_content h2 {
padding-left: 14px;
border-left: 5px solid var(--gov-teal);
font-size: 1.5rem;
}
.main .page-text h3,
#article_content h3 {
padding-left: 12px;
border-left: 4px solid var(--gov-orange);
font-size: 1.22rem;
}
.main .page-text img,
#article_content img {
border-radius: 12px;
box-shadow: var(--gov-shadow-sm);
}
.main .page-text ul:not([class]) > li,
#article_content ul:not([class]) > li {
position: relative;
padding-left: 22px;
margin: 8px 0;
}
.main .page-text ul:not([class]) > li::before,
#article_content ul:not([class]) > li::before {
content: '';
position: absolute;
left: 3px;
top: .72em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--gov-teal);
}
.main .page-text ol,
#article_content ol { counter-reset: item; padding-left: 8px; }
.main .page-text ol > li,
#article_content ol > li {
position: relative;
padding-left: 30px;
margin: 8px 0;
list-style: none;
counter-increment: item;
}
.main .page-text ol > li::before,
#article_content ol > li::before {
content: counter(item);
position: absolute;
left: 0;
top: .18em;
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--gov-blue-tint);
color: var(--gov-teal-deep);
font-size: .75rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.main .page-text blockquote,
#article_content blockquote {
margin: 20px 0;
padding: 16px 22px;
background: var(--gov-blue-tint);
border-left: 5px solid var(--gov-teal);
border-radius: 0 12px 12px 0;
color: var(--gov-navy);
}
/* ---- CMS content tables (high-contrast brand redesign) ----
NOTE: CMS tables use | (not | ) for headers; the header row
always carries class "firstRow" and inline blue bg + white text. */
.main .page-text table,
#article_content table,
.sy_box table {
width: 100%;
max-width: 100%;
border-collapse: separate !important;
border-spacing: 0;
border: 1px solid #d5e2ec !important;
border-radius: 14px;
overflow: hidden;
margin: 24px auto;
background: #fff;
box-shadow: var(--gov-shadow-sm);
font-size: .97rem;
}
.main .page-text table td,
#article_content table td,
.sy_box table td {
padding: 14px 18px !important;
background: #fff !important;
color: #22324a !important;
border: 0 !important;
border-bottom: 1px solid #d5e2ec !important;
vertical-align: middle;
line-height: 1.65;
word-break: normal;
}
.main .page-text table td p,
#article_content table td p,
.sy_box table td p { margin: 0; line-height: 1.65; color: inherit !important; }
.main .page-text table td span,
#article_content table td span,
.sy_box table td span,
.main .page-text table td div,
#article_content table td div,
.sy_box table td div { color: inherit !important; }
/* paired banding: body rows start at tr:nth-child(2) (firstRow is the
header), so rows 2-3 / 6-7 / ... share one soft band. For rowspan tables
(e.g. Registration, 2 sub-rows per fee group) each fee group reads as
one gentle band; for plain tables it reads as pair striping. */
.main .page-text table tbody tr:nth-child(4n+2) td,
.main .page-text table tbody tr:nth-child(4n+3) td,
#article_content table tbody tr:nth-child(4n+2) td,
#article_content table tbody tr:nth-child(4n+3) td,
.sy_box table tbody tr:nth-child(4n+2) td,
.sy_box table tbody tr:nth-child(4n+3) td { background: #f7fbfd !important; }
/* soft divider on top of each rowspan group (skip first body row) */
.main .page-text table tbody tr:nth-child(n+4):has(td[rowspan]) td,
#article_content table tbody tr:nth-child(n+4):has(td[rowspan]) td,
.sy_box table tbody tr:nth-child(n+4):has(td[rowspan]) td { border-top: 1px solid #d5e2ec !important; }
/* subtle hover on body rows only — header row never reacts */
.main .page-text table tbody tr:not(.firstRow):hover td,
#article_content table tbody tr:not(.firstRow):hover td,
.sy_box table tbody tr:not(.firstRow):hover td { background: #eef7fa !important; }
.main .page-text table tbody td,
#article_content table tbody td,
.sy_box table tbody td { transition: background-color .18s ease; }
/* gentle vertical column separators */
.main .page-text table td + td,
#article_content table td + td,
.sy_box table td + td { box-shadow: inset 1px 0 0 #eaf1f6; }
.main .page-text table tbody tr:last-child td,
#article_content table tbody tr:last-child td,
.sy_box table tbody tr:last-child td { border-bottom: 0 !important; }
/* header row: vertical brand gradient is seamless across cells */
.main .page-text table tr.firstRow td,
#article_content table tr.firstRow td,
.sy_box table tr.firstRow td,
.main .page-text table thead th,
#article_content table thead th,
.sy_box table thead th {
background: linear-gradient(180deg, #0f4d96 0%, #0a3d7c 100%) !important;
color: #fff !important;
font-size: 1rem !important;
font-weight: 700 !important;
letter-spacing: .02em;
text-align: center;
padding: 16px 18px !important;
border: 0 !important;
border-bottom: 3px solid var(--gov-teal) !important;
vertical-align: middle;
}
.main .page-text table tr.firstRow td *,
#article_content table tr.firstRow td *,
.sy_box table tr.firstRow td *,
.main .page-text table thead th *,
#article_content table thead th *,
.sy_box table thead th * { color: #fff !important; }
.main .page-text table tr.firstRow td + td,
#article_content table tr.firstRow td + td,
.sy_box table tr.firstRow td + td,
.main .page-text table thead th + th,
#article_content table thead th + th,
.sy_box table thead th + th { box-shadow: inset 1px 0 0 rgba(255,255,255,.18); }
/* decorative full-width dotted divider images from CMS: quiet them down */
.main .page-text img[style*="width:100%"],
.main .page-text img[style*="width: 100%"] {
border-radius: 0;
box-shadow: none;
opacity: .5;
margin: 8px auto 16px;
display: block;
}
@media (max-width: 640px) {
.main .page-text table,
#article_content table,
.sy_box table { font-size: .85rem; }
.main .page-text table td,
#article_content table td,
.sy_box table td,
.main .page-text table tr.firstRow td,
#article_content table tr.firstRow td,
.sy_box table tr.firstRow td { padding: 10px 11px !important; }
}
.main .page-text a:not(.btn),
#article_content a:not(.btn) { font-weight: 600; }
/* ---- contact form ---- */
.form-control {
border: 1px solid #cdd9e2 !important;
border-radius: 10px !important;
box-shadow: none !important;
padding: 11px 15px;
transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus {
border-color: var(--gov-teal) !important;
box-shadow: 0 0 0 4px rgba(23,169,180,.15) !important;
outline: none;
}
#gj-form #guestbook-submit.btn-primary,
.btn-primary.powermail_submit {
width: auto !important;
min-width: 150px;
height: auto !important;
padding: 12px 36px !important;
border: 0 !important;
border-radius: 999px !important;
background: var(--grad-brand) !important;
color: #fff !important;
font-weight: 700 !important;
box-shadow: var(--gov-shadow-teal) !important;
transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
#gj-form #guestbook-submit.btn-primary:hover,
.btn-primary.powermail_submit:hover {
transform: translateY(-2px);
filter: brightness(1.05);
box-shadow: 0 16px 34px rgba(10,61,124,.30) !important;
}
/* ---- back to top ---- */
.totop {
background: var(--grad-brand) !important;
border-radius: 50% !important;
box-shadow: var(--gov-shadow-md) !important;
}
/* ---- responsive (inner + module cards) ---- */
@media (max-width: 991px) {
.about,
.announcements > div,
.main .page.page-text { padding: 32px 26px; }
.visual-holder > div { height: 220px; }
#content { margin-left: 0 !important; }
}
@media (max-width: 560px) {
.about,
.announcements > div,
.main .page.page-text { padding: 24px 18px; }
.public_title h3 { font-size: 1.3rem; }
.news-holder .news-block { padding: 16px; }
} |