/************************************* section2 *************************************/

/*banner下面的選單*/


.section2 {
    display: none;
    position: relative;
    z-index: 3;
/*    margin-top: -15px;*/
}


.section2 .navs {
    background-color: #e7e7e7;
    text-align: center;
    font-size: 0px;
}


/*banner下面的選單的一個選單*/
.section2 .navs .oneNav {
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    width: 33.33%;
    cursor: pointer;
    background-color: #e7e7e7;
    padding-top: 15px;
    padding-bottom: 15px;
}

.section2 .navs .oneNav span {
    display: none;
}

.section2 .navs .oneNav:hover,
.section2 .navs .oneNav.focus {
    background-color: #111f97;
    color: #fff;
}

/*banner下面的選單的一個展開的區塊*/
.section2 .oneNavContent {
    background-size: cover;
    background-position: center center;
    color: #fff;
}


.section2 .oneNavContent .bgImg {
    background-color: rgba(0, 72, 174, 0.8);
}

.section2 .oneNavContent h4 {
    border-bottom: 2px solid #fff;
    padding: 15px;
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
}

.section2 .oneNavContent ul {
    z-index: 1;
    padding: 0px;
    padding-bottom: 15px;
}

.section2 .oneNavContent ul a li {
    list-style-type: none;
    color: #fff;
    margin-bottom: 10px;
}

.section2 .oneNavContent ul a:hover li {
    text-decoration: underline;
}

/* 三個按鈕 */
.section2 a .section2ThreeBtn {
    background-color: #111f98;
    color: #fff;
    padding: 15px 0px;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 15px;
}

.section2 a .section2ThreeBtn:hover {
    opacity: 0.7;
}

.section2 a .section2ThreeBtn img {
    position: relative;
    margin-right: 10px;
    height: 40px;
}

/************************************* section3 *************************************/
/*榮耀肯定*/

.section3 {
    margin-top: 30px;
    margin-bottom: 60px;
}

.section3 .moreAfterTitle {
    text-align: right;
}

.section3 a .moreBtn {
    position: relative;
    top: -5px;
    color: #252a38;
}

.section3 a .moreBtn img {
    height: 9px;
    position: relative;
    top: -2px;
    margin-left: 5px;
}

.section3 a:hover .moreBtn {
    opacity: 0.7;
}

.section3 .forHonors {
    border: 1px solid #e7e7e7;
}


.section3 .fourHonors .oneHonor {
    position: relative;
    height: 165px;
    width: 100%;
    color: #252a38;
}

.section3 .fourHonors a .oneHonor .moreBtn {
    font-size: 16px;
    display: none;
    margin-top: 5px;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-name: fadeIn;
}

.section3 .fourHonors a:hover .oneHonor .moreBtn {
    display: none;
}


.section3 .fourHonors .oneHonor h6 {
    font-size: 18px;
    line-height: 1.3;
}


.section3 .fourHonors .oneHonor .imgArea {
    position: relative;
    float: left;
    width: 50%;
    height: 100%;
    background-color: #111f98;
}

.section3 .fourHonors .oneHonor .imgArea .bg {
    width: 100%;
    height: 100%;
    
    background-size: cover;
    animation-duration: 1s;
    background-position: center center;
}

.section3 .fourHonors a:hover .oneHonor .imgArea .bg {

    animation-name: fadeOut06_bigger120;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}


.section3 .fourHonors .oneHonor .textArea {
    float: right;
    width: 50%;
    height: 100%;
    padding: 22px;
    text-align: left;
}

.section3 .fourHonors .oneHonor.oneHonor1 .textArea,
.section3 .fourHonors .oneHonor.oneHonor3 .textArea {
    background-color: #fff;
}

.section3 .fourHonors .oneHonor.oneHonor2 .textArea,
.section3 .fourHonors .oneHonor.oneHonor4 .textArea {
    background-color: #eee;
}

/*左右交錯開始*/
.section3 .fourHonors .oneHonor.oneHonor1 .imgArea,
.section3 .fourHonors .oneHonor.oneHonor3 .imgArea {
    float: left;
}

.section3 .fourHonors .oneHonor.oneHonor1 .textArea,
.section3 .fourHonors .oneHonor.oneHonor3 .textArea {
    float: right;
}

.section3 .fourHonors .oneHonor.oneHonor2 .imgArea,
.section3 .fourHonors .oneHonor.oneHonor4 .imgArea {
    float: right;
}

.section3 .fourHonors .oneHonor.oneHonor2 .textArea,
.section3 .fourHonors .oneHonor.oneHonor4 .textArea {
    float: left;
}


/************************************* section4 *************************************/
/*焦點新聞*/

.section4 .moreAfterTitle {
    text-align: right;
}

.section4 a .moreBtn {
    position: relative;
    top: -5px;
    color: #252a38;
}

.section4 a .moreBtn img {
    height: 9px;
    position: relative;
    top: -2px;
    margin-left: 5px;
}

.section4 a:hover .moreBtn {
    opacity: 0.7;
}

/*下面的淡藍色*/
.section4 .lightBlueBg {
    background-color: #d9e5ee;
    padding-top: 15px;
    padding-bottom: 370px;
}

/*焦點新聞的輪播*/
.section4 #carouselForNews .carousel-inner {
    width: 100%;
}

.section4 #carouselForNews .carousel-inner .carousel-item a .oneNew {
    position: relative;
    margin: 0 auto;
    width: 250px;
    height: auto;
    margin-bottom: 15px;
}

.section4 #carouselForNews .carousel-inner .carousel-item a .oneNew {
    color: #252a38;
    text-align: left;
    margin-bottom: 30px;
}

.section4 #carouselForNews .carousel-inner .carousel-item a .oneNew .imgArea {
    position: relative;
    height: 160px;
    margin-bottom: 10px;
    background-color: #fff;
}

.section4 #carouselForNews .carousel-inner .carousel-item a .oneNew .imgArea .bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
}



.section4 #carouselForNews .carousel-inner .carousel-item a:hover .oneNew .imgArea .bg {
    animation-name: fadeOut06_bigger120;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

.section4 #carouselForNews .carousel-inner .carousel-item a .oneNew .imgArea .plusBtn {
    width: 35px;
    height: 35px;
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.section4 #carouselForNews .carousel-inner .carousel-item a .oneNew h6 {
    font-size: 18px;
    line-height: 1.3;
}

.section4 #carouselForNews .carousel-inner .carousel-item a .oneNew .date {
    color: #666;
}

/*箭頭*/
.section4 #carouselForNews .section4LeftArrow,
.section4 #carouselForNews .section4RightArrow {
    width: 30px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0px;
    margin-top: -38px;
    cursor: pointer;
}

.section4 #carouselForNews .section4LeftArrow:hover,
.section4 #carouselForNews .section4RightArrow:hover {
    opacity: 0.7;
}

.section4 #carouselForNews .section4RightArrow {
    left: inherit;
    right: 0px;
}



/************************************* section5 *************************************/
/*校園公告*/

.section5 {
    position: relative;
    margin-bottom: 60px;
}

.section5 .whiteContainer {
    background-color: #fff;
    margin-top: -350px;
    text-align: left;
    padding: 15px;
}

.section5 .whiteContainer .h2Title {
    padding-left: 0px;
    border-left: none;
    display: inline-block;
    /*    font-size: 36px;*/
    margin-bottom: 15px;
}

.section5 .whiteContainer a .moreBtn {
    position: relative;
    top: -4px;
    font-size: 12px;
    margin-left: 15px;
    padding: 2px 10px;
    background-color: #111f98;
    color: #fff;
    display: inline-block;
}

.section5 .whiteContainer a:hover .moreBtn {
    opacity: 0.7;
}

/*捲定的區塊*/
.section5 .whiteContainer .scrollArea {
    height: 280px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.section5 .whiteContainer .imgArea {
    position: relative;
    height: 175px;
    margin-bottom: 15px;
    background-color: #fff;
}

.section5 .whiteContainer .imgArea .bg {
    width: 100%;
    height: 100%;
    
    background-size: cover;
    background-position: center center;
}

/*一則新聞*/
.section5 .whiteContainer a .oneNew {
    margin-bottom: 15px;
}

.section5 .whiteContainer a:hover .oneNew {
    opacity: 0.7;
}

.section5 .whiteContainer a .oneNew .date {
    font-size: 12px;
    margin-bottom: 2px;
    color: #111f98;
}

.section5 .whiteContainer a .oneNew p {
    font-size: 18px;
    color: #252a38;
    margin-bottom: 0px;
    line-height: 1.4;
}


/************************************* section6 *************************************/
/*風雲人物*/

.section6 {
    margin-bottom: 60px;
}

.section6 .moreAfterTitle {
    text-align: right;
}

.section6 a .moreBtn {
    position: relative;
    top: -5px;
    color: #252a38;
}

.section6 a .moreBtn img {
    height: 9px;
    position: relative;
    top: -2px;
    margin-left: 5px;
}

.section6 a:hover .moreBtn {
    opacity: 0.7;
}

/*輪播區塊*/

.section6 #carouselForPersons{
    display: inherit;
}
.section6 #carouselForPersonsD{
    display: none;
}


.section6 #carouselForPersons .carousel-inner,
.section6 #carouselForPersonsD .carousel-inner{
    width: 100%;
}

.section6 #carouselForPersons .carousel-inner .carousel-item a .onePerson,
.section6 #carouselForPersonsD .carousel-inner .carousel-item a .onePerson{
    position: relative;
    margin: 0 auto;
    width: 250px;
    height: 250px;
    margin-bottom: 15px;
    background-color: #111f98;
    border: 3px #d9e5ee solid;
    color: #fff;
    text-align: left;
}

.section6 #carouselForPersons .carousel-inner .carousel-item a .onePerson h6,
.section6 #carouselForPersonsD .carousel-inner .carousel-item a .onePerson h6{
    font-size: 18px;
}

.section6 #carouselForPersons .carousel-inner .carousel-item a .onePerson p,
.section6 #carouselForPersonsD .carousel-inner .carousel-item a .onePerson p{
    display: none;
    animation-name: fadeIn;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

.section6 #carouselForPersons .carousel-inner .carousel-item a:hover .onePerson p,
.section6 #carouselForPersonsD .carousel-inner .carousel-item a:hover .onePerson p{
    display: inherit;
}


.section6 #carouselForPersons .carousel-inner .carousel-item a .onePerson .textArea,
.section6 #carouselForPersonsD .carousel-inner .carousel-item a .onePerson .textArea{
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.section6 #carouselForPersons .carousel-inner .carousel-item a .onePerson .bg,
.section6 #carouselForPersonsD .carousel-inner .carousel-item a .onePerson .bg{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
}

.section6 #carouselForPersons .carousel-inner .carousel-item a:hover .onePerson .bg,
.section6 #carouselForPersonsD .carousel-inner .carousel-item a:hover .onePerson .bg{
    animation-name: fadeOut06_bigger120;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

.section6 #carouselForPersons .section6LeftArrow,
.section6 #carouselForPersons .section6RightArrow,
.section6 #carouselForPersonsD .section6LeftArrow,
.section6 #carouselForPersonsD .section6RightArrow {
    width: 30px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0px;
    margin-top: -38px;
    cursor: pointer;
}

.section6 #carouselForPersons .section6LeftArrow:hover,
.section6 #carouselForPersons .section6RightArrow:hover,
.section6 #carouselForPersonsD .section6LeftArrow:hover,
.section6 #carouselForPersonsD .section6RightArrow:hover{
    opacity: 0.7;
}

.section6 #carouselForPersons .section6RightArrow,
.section6 #carouselForPersonsD .section6RightArrow{
    left: inherit;
    right: 0px;
}


/************************************* section7 *************************************/
/*德明影音*/

.section7 {
    position: relative;
    text-align: left;
    margin-bottom: 120px;
}

.section7 .h2Title {
    padding-left: 0px;
    border-left: none;
    display: inline-block;
    /*    font-size: 36px;*/
    margin-bottom: 15px;
}

.section7 a .moreBtn {
    position: relative;
    top: -4px;
    font-size: 12px;
    margin-left: 15px;
    padding: 2px 10px;
    background-color: #111f98;
    color: #fff;
    display: inline-block;
}

.section7 a:hover .moreBtn {
    opacity: 0.7;
}

.blueCubeBgContainer {
    position: relative;
}

.blueCubeBg {
    z-index: -1;
    background-color: #111f98;
    position: absolute;
    top: 180px;
    left: 0px;
    width: 100%;
    height: 190px;
    height: 220px;
}

.section7 .date {
    font-size: 12px;
    color: #fff;
    margin-bottom: 5px;
}

.section7 h6 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 5px;
}

.section7 a {
    color: #fff;
    text-decoration: underline;
}

.section7 a:hover {
    text-decoration: none;
}


/************************************* section8 *************************************/
/*活動訊息*/

.section8 {
    position: relative;
    margin-bottom: 60px;
}

.section8 .h2Title {
    padding-left: 0px;
    border-left: none;
    display: inline-block;
    /*    font-size: 36px;*/
    margin-bottom: 15px;
}

.section8 a .moreBtn {
    position: relative;
    top: -4px;
    font-size: 12px;
    margin-left: 15px;
    padding: 2px 10px;
    background-color: #111f98;
    color: #fff;
    display: inline-block;
}

.section8 a:hover .moreBtn {
    opacity: 0.7;
}

.section8 .section9Text {
    position: relative;
    top: 3px;
}

.section8 .marquee {
    background-color: #e7e7e7;
    padding: 15px;
}


.section8 .marquee a .oneMessage {
    font-size: 18px;
    color: #252a38;
    line-height: 1.5;
    padding: 10px 0px;
    border-bottom: 1px #7b7b7b solid;
}

.section8 .marquee a:hover .oneMessage {
    opacity: 0.7;
}

.section8 .marquee a:first-child .oneMessage {
    padding-top: 0px;
}


.section8 .marquee a:last-child .oneMessage {
    padding-bottom: 0px;
    border-bottom: none;
}

.section8 .marquee a .oneMessage p {
    margin-bottom: 0px;
}

.section8 .marquee a .oneMessage .date {
    font-size: 12px;
    margin-bottom: 0px;
}

/*跑馬燈*/
.marquee {
  width: 100%;
    height: 345px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee .marqueeMoveArea {
  display: inline-block;
    width: 100%;
  height: max-content;

  padding-top: 300px;
  /* show the marquee just outside the paragraph */
  will-change: transform;
  animation: marquee 35s linear infinite;
}

.marquee .marqueeMoveArea:hover {
  animation-play-state: paused
}


@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(0, -100%); }
}