/* #region 常量相关 */

/* 通用常量定义 */
:root {

    /* #region 高度相关 */

    /* 主区域高度 */
    --HeightMainDiv: 9.385rem;

    /* 标题区域高度 */
    --HeightMainCaption: 1.42rem;

    /* 导航栏高度 */
    --HeightNavigationBar: 0.3rem;

    /* 内容区域高度 */
    --HeightMainContent: 9.38rem;

    /* 分栏区域高度 */
    --HeightTableRow: 7.4rem;

    /* Banner图片区域高度 */
    --HeightBannerPicture: 2.8rem;

    /* Banner图片高度 */
    --HeightBannerImage: 2.45rem;

    /* Banner标题高度 */
    --HeightBannerCaption: 0.3rem;

    /* 作品展示区域高度 */
    --HeightWorksShow: 2.92rem;

    /* 作品展示图片高度 */
    --HeightWorksShowImage: 2.15rem;

    /* 竞赛入口区域高度 */
    --HeightCompetition: 1.51rem;

    /* 新闻区域高度 */
    --HeightNews: 2.8rem;

    /* 新闻区域行高度 */
    --HeightNewsRow: 0.5rem;

    /* 新闻区域行高度--新 */
    --HeightNewsRowBig: 0.56rem;

    /* 新闻区域行高度--日 */
    --HeightNewsRowDay: 0.3rem;

    /* 新闻区域行高度--年月 */
    --HeightNewsRowYearMonth: 0.2rem;

    /* 通知区域高度 */
    --HeightNotice: 4.48rem;

    /* 友情链接高度 */
    --HeightLinks: 1.8rem;

    /* 友情链接内容行高度 */
    --HeightLinksRow: 1.66rem;

    /* 友情链接图标高度 */
    --HeightLinksIcon: 0.996rem;

    /* 友情链接文字高度 */
    --HeightLinksCaption: 0.3rem;

    /* 区域标题栏高度 */
    --HeightCaptionArea: 0.4rem;

    /* 区域标题栏竖线高度 */
    --HeightCaptionFlag: 0.3rem;

    /* 区域标题栏横线高度 */
    --HeightCaptionLine: 0.05rem;

    /* 底部信息栏高度 */
    --HeightFooterBar: 0.3rem;

    /* #endregion */

    /*#region 图片相关 */

    /* 主标题背景 */
    --BackgroundMainCaption: url('../images/MainCaptionBackground.jpg');

    /* 主标题 */
    --ImageMainCaption: url('../images/MainCaption.png');

    /* Banner图片 */
    --ImageBanner: url('../images/BannerImage.jpg');

    /* 作品展示图片 */
    --ImageWoksShow: url('../images/WorksShow.png');

    /* 区域标题竖线 */
    --BackgroundCaptionFlag: url('../images/CaptionFlag.jpg');

    /* 区域标题横线粗 */
    --BackgroundCaptionBottomLineWide: url('../images/BottomLineWide.png');

    /* 区域标题横线细 */
    --BackgroundCaptionBottomLineThin: url('../images/BottomLineThin.png');

    /* 竞赛图标 */
    --LogoCompetition: url('../images/LogoCompetition.png');

    /* 清华大学logo */
    --LogoQHDX: url('../images/QHDX.png');

    /* 北京邮电大学logo */
    --LogoBJYDDX: url('../images/BJYDDX.png');

    /* 北京航空航天大学logo */
    --LogoBJHKHTDX: url('../images/BJHKHTDX.png');

    /*#endregion*/

    /*#region 颜色相关 */
    
    /* 导航栏背景颜色 */
    --ColorBackgroundNavigation: #00873b;

    /* 导航栏鼠标悬浮背景颜色 */
    --ColorNavigationBarHover: #2bc344;

    /* 导航栏文字颜色 */
    --ColorForeNavigation: #ffffff;

    /* 页面底纹灰色 */
    --ColorBackgroundMainContent: #ffffff;

    /* 显示内容背景颜色 */
    --ColorBackgroundMainTable: #ffffff;

    /* 分割线颜色 */
    --ColorBorderLine: #d1d1d1;
    
    /* 底部信息栏背景颜色 */
    --ColorBackgroundFooter: #00873b;

    /* 底部信息栏文字颜色 */
    --ColorForeFooter: #ffffff;

    /* 正文颜色 */
    --ColorMainText: #686868;

    /* 日期背景框颜色 */
    --ColorDateBackground: #00873b;

    /* 日期日颜色 */
    --ColorDay: #00873b;

    /* 日期年月颜色 */
    --ColorYearMonth: #00873b;

    /* 区域标题文字颜色 */
    --ColorAreaCaption: #00873b;

    /* 友情链接文字颜色 */
    --ColorForeLinks: #4a4a4a;
    
    /*#endregion*/

}

/* #endregion */

/*#region 内容样式 */

/* 超链接颜色 */
a:link {
    color:var(--ColorMainText);
}

/* 超链接访问颜色 */
a:visited {
    color:var(--ColorMainText);
}

/* 主区域 */
.MainDiv {
    position: relative;
    width: 100%;
    height: var(--HeightMainDiv);
}

/* 标题区域 */
.MainCaption {
    position: relative;
    width: 100%;
    height: var(--HeightMainCaption);
    background-image: var(--BackgroundMainCaption);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

/* 标题内容 */
.LogoCaption {
    position: relative;
    width: 100%;
    height: var(--HeightMainCaption);
    background-image: var(--ImageMainCaption);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

/* 导航栏 */
.NavigationBar {
    position: relative;
    width: 100%;
    height: var(--HeightNavigationBar);
    background-color: var(--ColorBackgroundNavigation);
}

/* 导航栏按钮组 */
.NavigationBarGroup {
    display: flex;
    position: relative;
    margin-left: 15%;
    width: 70%;
    height: var(--HeightNavigationBar);
}

/* 导航按钮 */
.NavigationBarCell {
    position: relative;
    width: 16%;
    height: var(--HeightNavigationBar);
    color: var(--ColorForeNavigation);
    font-family: 微软雅黑;
    font-size: 0.15rem;
    text-align: center;
    line-height: var(--HeightNavigationBar);
}

/* 导航按钮鼠标悬浮 */
.NavigationBarCell:hover {
    background-color: var(--ColorNavigationBarHover);
}

/* 导航间距 */
.NavigationBarEmpty {
    position: relative;
    width: 2%;
    height: var(--HeightNavigationBar);
}

/* 主内容区域 */
.MainContent {
    width: 100%;
    height: var(--HeightMainContent);
    background-color: var(--ColorBackgroundMainContent);
}

/* 主信息区域 */
.MainTable {
    position: relative;
    margin-left: 15%;
    width: 70%;
    height: var(--HeightMainContent);
    background-color: var(--ColorBackgroundMainTable);
}

/* 主信息区域行 */
.MainTableRow{
    display: flex;
    width: 100%;
    height: var(--HeightTableRow);
}

/* 左侧区域 */
.LeftArea {
    position: relative;
    width: 35%;
    height: var(--HeightMainContent);
}

/* 右侧区域 */
.RightArea {
    position: relative;
    margin-left: -1%;
    width: 67%;
    height: var(--HeightMainContent);
}

/* Banner区域 */
.BannerPicture {
    position: relative;
    width: 96%;
    height: var(--HeightBannerPicture);
    margin-left: 2%;
    margin-top: 0.05rem;
    border: 1px solid var(--ColorBorderLine);
}

/* Banner图片 */
.BannerImage {
    display: none;
    position: relative;
    width: 97%;
    height: var(--HeightBannerImage);
    margin-left: 1.5%;
    margin-top: 0.05rem;
}

/* Banner图片 */
.BannerImage:first-child {    
    display: block;
    position: relative;
    width: 97%;
    height: var(--HeightBannerImage);
    margin-left: 1.5%;
    margin-top: 0.05rem;
} 

/* Banner标题 */
.BannerCaption {
    position: relative;
    width: 98%;
    height: var(--HeightBannerCaption);
    margin-left: 1%;
    color: var(--ColorMainText);
    font-family: 微软雅黑;
    font-size: 0.15rem;
    font-weight: bold;
    text-align: center;
    line-height: var(--HeightBannerCaption);
}

/* 作品展示区域 */
.WorksShow {
    position: relative;
    width: 96%;
    height: var(--HeightWorksShow);
    margin-left: 2%;
    margin-top: 0.05rem;
    border: 1px solid var(--ColorBorderLine);
}

/* 作品展示图片 */
.WorksShowImage {
    position: relative;
    width: 97%;
    height: var(--HeightWorksShowImage);
    margin-left: 1.5%;
    margin-top: 0.05rem;
    background-image: var(--ImageWoksShow);
    background-repeat: no-repeat;
    background-size: 100% auto;
    border: none;
}

/* 竞赛入口区域 */
.Competition {
    position: relative;
    width: 96%;
    height: var(--HeightCompetition);
    margin-left: 2%;
    margin-top: 0.05rem;
    border: 1px solid var(--ColorBorderLine);
}

/* 新闻区域 */
.News {
    position: relative;
    width: 96%;
    height: var(--HeightNews);
    margin-left: 2%;
    margin-top: 0.05rem;
    border: 1px solid var(--ColorBorderLine);
}

/* 列表行 */
.DetailsRowLong {
    display: flex;
    position: relative;
    width: 94%;
    height: var(--HeightNewsRow);
    margin-left: 3%;
    margin-top: 0.02rem;
    font-size: 0.13rem;
    font-family: 微软雅黑;
    font-weight: 200;
    text-align: left;
    color: var(--ColorMainText);
    line-height: var(--HeightNewsRow);
}

/* 新列表行 */
.DetailsRowHigh{
    display: flex;
    position: relative;
    width: 94%;
    height: var(--HeightNewsRowBig);
    margin-left: 3%;
    margin-top: 0.03rem;
    font-size: 0.13rem;
    font-family: 微软雅黑;
    font-weight: 200;
    text-align: left;
    color: var(--ColorMainText);
    line-height: var(--HeightNewsRowBig);
}

/* 新列表行左侧日期 */
.DetailsRowHighLeft {
    position: relative;
    width: 8%;
    height: var(--HeightNewsRowBig);
}

/* 新列表行左侧日期背景框 */
.DetailsDateFrame {
    position: relative;
    margin-left: 10%;
    margin-top: 5%;
    width: 80%;
    height: 80%;
    /* background-color: var(--ColorDateBackground); */
    border-radius: 0.08rem;
    border: 1px solid var(--ColorDateBackground);
}

/* 新列表行左侧日期--日 */
.DetailsRowHighDay {
    position: relative;
    width: 100%;
    height: var(--HeightNewsRowDay);
    font-size: 0.18rem;
    font-family: 微软雅黑;
    font-weight: bold;
    text-align: center;
    color: var(--ColorDay);
    line-height: var(--HeightNewsRowDay);
}

/* 新列表行左侧日期--年月 */
.DetailsRowHighYearMonth {
    position: relative;
    width: 100%;
    height: var(--HeightNewsRowYearMonth);
    font-size: 0.08rem;
    font-family: 微软雅黑;
    font-weight: 400;
    text-align: center;
    color: var(--ColorYearMonth);
    line-height: 0.06rem;
}

/* 新列表行右侧标题 */
.DetailsRowHighRight {
    position: relative;
    margin-left: 2%;
    width: 90%;
    height: var(--HeightNewsRowBig);
    font-size: 0.13rem;
    font-family: 微软雅黑;
    font-weight: bold;
    text-align: left;
    color: var(--ColorMainText);
    line-height: var(--HeightNewsRowBig);
}

/* 分隔行 */
.DetailsSplit {    
    border-bottom: 1px solid var(--ColorBorderLine);
}

/* 列表图标 */
.DetailsLogo {
    position: relative;
    margin-top: 2.5%;
    width: 5%;
    height: var(--HeightNewsRow);
    background-image: var(--LogoCompetition);
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin-top: 0.16rem;
}

/* 列表标题列 */
.DetailsCaption {
    position: relative;
    width: 85%;
    height: var(--HeightNewsRow);
    margin-left: 0.1rem;
}

/* 列表日期列 */
.DetailsDate {
    position: relative;
    width: 15%;
    height: var(--HeightNewsRow);
}

/* 通知区域 */
.Notice {
    position: relative;
    width: 96%;
    height: var(--HeightNotice);
    margin-left: 2%;
    margin-top: 0.05rem;
    border: 1px solid var(--ColorBorderLine);
}

/* 友情链接 */
.Links {    
    position: relative;
    width: 98%;
    height: var(--HeightLinks);
    margin-left: 0.7%;
    margin-top: 0.05rem;
    border: 1px solid var(--ColorBorderLine);
}

/* 友情链接行 */
.LinksRow {
    display: flex;
    position: relative;
    margin-left: 1%;
    width: 98%;
    height: var(--HeightLinksRow);
}

/* 友情链接单元格 */
.LinksDetails {
    position: relative;
    width: 12.5%;
    height: 100%;
}

/* 友情链接图标 */
.LinksIcon {
    position: relative;
    margin-left: 10%;
    margin-top: 15%;
    width: 80%;
    height: var(--HeightLinksIcon);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

/* 清华大学logo */
.LinksIconQHDX {    
    background-image: var(--LogoQHDX);
}

/* 北京邮电大学logo */
.LinksIconBJYDDX {    
    background-image: var(--LogoBJYDDX);
}

/* 北京航空航天大学logo */
.LinksIconBJHKHTDX {    
    background-image: var(--LogoBJHKHTDX);
}

/* 友情链接文字 */
.LinksCaption {
    position: relative;
    width: 100%;
    height: var(--HeightLinksCaption);    
    color: var(--ColorForeLinks);
    font-family: 微软雅黑;
    font-size: 0.12rem;
    text-align: center;
    line-height: var(--HeightLinksCaption);
}

/* 区域标题栏 */
.CaptionArea {
    position: relative;
    width: 100%;
    height: var(--HeightCaptionArea);
    /* border: 1px solid red; */
}

/* 区域标题文字栏 */
.CaptionTextArea {
    display: flex;
    position: relative;
    width: 100%;
    height: var(--HeightCaptionFlag);
}

/* 区域标题栏竖线 */
.CaptionFlag {
    position: relative;
    margin-left: 0.05rem;
    margin-top: 0.05rem;
    width: 0.06rem;
    height: var(--HeightCaptionFlag);
    background-image: var(--BackgroundCaptionFlag);
    background-repeat: no-repeat;
    background-size: 100% 60%;
}

/* 区域标题栏文字--短 */
.CaptionTextShort {
    position: relative;
    margin-left: 0.03rem;
    width: 3.1rem;
    height: var(--HeightCaptionFlag);
    font-family: 微软雅黑;
    font-size: 0.15rem;
    font-weight: bold;
    line-height: var(--HeightCaptionFlag);
    text-align: left;
    letter-spacing: 0.01rem;
    color: var(--ColorAreaCaption);
}

/* 区域标题栏文字--中 */
.CaptionTextMedium {
    position: relative;
    margin-left: 0.03rem;
    width: 6.46rem;
    height: var(--HeightCaptionFlag);
    font-family: 微软雅黑;
    font-size: 0.15rem;
    font-weight: bold;
    line-height: var(--HeightCaptionFlag);
    text-align: left;
    letter-spacing: 0.01rem;
    color: var(--ColorAreaCaption);
}

/* 区域标题栏文字--长 */
.CaptionTextLong {
    position: relative;
    margin-left: 0.03rem;
    width: 10.3rem;
    height: var(--HeightCaptionFlag);
    font-family: 微软雅黑;
    font-size: 0.15rem;
    font-weight: bold;
    line-height: var(--HeightCaptionFlag);
    text-align: left;
    letter-spacing: 0.01rem;
    color: var(--ColorAreaCaption);
}

/* 区域标题栏更多文字 */
.More {
    position: relative;
    width: 0.4rem;
    height: var(--HeightCaptionFlag);
    font-family: 微软雅黑;
    font-size: 0.1rem;
    line-height: var(--HeightCaptionFlag);
    text-align: left;
    letter-spacing: 0.01rem;
    color: var(--ColorForeLinks);
}

/* 区域标题栏底边线 */
.CaptionBottomLineShort {
    display: flex;
    position: relative;
    margin-left: 0.05rem;
    margin-top: -0.01rem;
    width: 98%;
    height: var(--HeightCaptionLine);
}

/* 区域标题栏底边线 */
.CaptionBottomLineMedium {
    display: flex;
    position: relative;
    margin-left: 0.05rem;
    margin-top: -0.01rem;
    width: 98%;
    height: var(--HeightCaptionLine);
}

/* 区域标题栏底边线 */
.CaptionBottomLineLong {
    display: flex;
    position: relative;
    margin-left: 0.05rem;
    margin-top: -0.01rem;
    width: 99%;
    height: var(--HeightCaptionLine);
}

/* 区域标题栏底边粗线 */
.CaptionBottomLineWide {
    position: relative;
    width: 0.8rem;
    height: var(--HeightCaptionLine);
    background-image: var(--BackgroundCaptionBottomLineWide);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

/* 区域标题栏底边细线-短 */
.CaptionBottomLineThinShort {
    position: relative;
    width: 77%;
    height: var(--HeightCaptionLine);
    background-image: var(--BackgroundCaptionBottomLineThin);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

/* 区域标题栏底边细线-中 */
.CaptionBottomLineThinMedium {
    position: relative;
    width: 90%;
    height: var(--HeightCaptionLine);
    background-image: var(--BackgroundCaptionBottomLineThin);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

/* 区域标题栏底边细线-长 */
.CaptionBottomLineThinLong {
    position: relative;
    width: 100%;
    height: var(--HeightCaptionLine);
    background-image: var(--BackgroundCaptionBottomLineThin);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

/* 底部信息栏 */
.FooterBar {
    position: relative;
    width: 100%;
    height: var(--HeightFooterBar);
    background-color: var(--ColorBackgroundFooter);
    color: var(--ColorForeFooter);
    font-family: 微软雅黑;
    font-size: 0.12rem;
    text-align: center;
    line-height: var(--HeightFooterBar);
}

/*#endregion*/