@import url('https://fonts.googleapis.com/css2?family=UoqMunThenKhung&family=Zen+Kurenaido&display=swap');





html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,a,em,img,b,u,i,dl,dt,dd,ol,ul,li,form,label,article,aside,nav {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

}



article,aside,footer,header,menu,nav {

  display: block;

}



body {

  line-height: 1;

}



ol,

ul {

  list-style: none;

}



blockquote,

q {

  quotes: none;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



body {

  font-family: "微軟正黑體" !important;

}



.clearfix {

  clear: both;

}



.wrap {

  overflow: hidden;

}



header {

  background: url(../images/header.png) no-repeat;

  width: 100%;

  padding-bottom: 50%;

  background-size: cover;

  background-position: center;

  position: relative;

}



.bannertopimg img {

  position: absolute;

  width: 14%;

  right: 476px;

  top: 111px;

}



/* 愛心動畫 */

.bannerlove img:nth-child(1) {

  position: absolute;

  right: 180px;

  top: 20px;

  animation: floating-translate 2s ease-in infinite alternate;

}



.bannerlove img:nth-child(2) {

  position: absolute;

  left: 80px;

  bottom: 700px;

  animation: floating-translate 2s ease-in infinite alternate-reverse;

}



/* .bannerlove img:nth-child(3) {

  position: absolute;

  left: 400px;

  top: 150px;

  animation: floating-translate 2s ease-in infinite alternate-reverse;

}



.bannerlove img:nth-child(4) {

  position: absolute;

  right: 380px;

  top: 30px;

  animation: floating-translate 2s ease-in infinite alternate;

} */



/*手機版摺疊選單*/

.nav-mune {

  display: none;

}



/*桌機置頂選單*/

.top {

  margin: 0;

  padding: 0;

  width: 100%;

  height: 60px;

  line-height: 60px;

  background-color: #e8548f;

  font-size: 1.1em;

  font-weight: 900;

  color: #fff;

  position: sticky;

  /* 固定上方 */

  z-index: 999;

  top: 0;

  text-align: center;

}



.top a {

  box-sizing: border-box;

  text-decoration: none;

  color: #fff;

  padding: 5px 10px;

}



.top a:hover {

  background-color: #FCEBC1;

  color: #3E3A39;

  border-radius: 50px;

}



/* 輪播頒獎照片標題 */

.carouseltitle h2 {

  font-size: 3rem;

  color: #04322f;

  background: #e7e534;

  font-weight: 900;

  line-height: 1.5;

  text-align: center;

}



.carouseltitle h4 {

  font-size: 1.5rem;

  color: #04322f;

  background: #e7e534;

  font-weight: 900;

  line-height: 1.2;

  text-align: center;

}



/* 輪播頒獎照片標題 */



/* 輪播頒獎照片 */

.slideWrap {

  background: #e7e534;

  box-sizing: border-box;

  padding: 8em calc((100% - 1400px) / 2);

  position: relative;

  height: 28vw;

}



.slideWrap .slideCon {

  position: absolute;

  left: calc((100% - 1300px) / 2);

  overflow: hidden;

}



.slideWrap .slideCon {

  width: 1305px;

  margin: 0 auto;

  text-align: center;

  transform: translateY(-25%);

}



.slideWrap .slick-prev {

  left: 20px;

  z-index: 990;

}



.slideWrap .slick-next {

  right: 30px;

  z-index: 990;

}



.slideWrap .slick-prev:before {

  content: "\f0a8";

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  font-size: 35px;

  color: #000;

}



.slideWrap .slick-next:before {

  content: "\f0a9";

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  font-size: 35px;

  color: #000;

}



.slideWrap .slick-slide .slide_item {

  display: flex !important;

  justify-content: center;

  -webkit-filter: opacity(0.5);

}



.slideWrap .slick-slide .slide_item img {

  transform: scale(0.7);

  margin: 20px 0;

  border: 5px solid #fff;

  border-radius: 15px;

  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

  width: 100%;

  position: relative;

  z-index: 0;

  transform: translateY(25%);

  transition: all 0.8s;

}



.slideWrap .slick-center .slide_item {

  -webkit-filter: opacity(1);

  position: relative;

  z-index: 5;

}



.slideWrap .slick-center .slide_item img {

  transform: scale(1);

  position: relative;

  z-index: 1;

  width: 150%;

  transform: translateY(0);

}



.slideWrap .slick-list {

  overflow: unset;

  padding: 0 !important;

}



/* 輪播頒獎照片 */



/* 莘莘向榮獎助學金申請開跑 */

.application {

  box-sizing: border-box;

  padding: 100px calc((100% - 1200px) / 2);

  background: #FDF0EC;

}



.application h2 {

  font-size: 3rem;

  font-weight: 900;

  color: #3E3A39;

  line-height: 1.2;

  text-align: center;

  padding: 0px 0px 50px 0px;

}



.application h2 span {

  color: #e8548f;

}



.banner {

  display: flex;

  justify-content: center;

  margin-top: 5vh;

}



.applicationimg {

  margin-left: 3vw;

}



.application .banner {

  text-align: center;

}



.application .banner .applicationimg {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

}



.application .banner .applicationimg img:nth-child(1) {

  animation: movepoint 2.5s infinite;

}



.application .banner .applicationimg img:nth-child(2) {

  animation: movepoint 2.5s infinite alternate-reverse;

}



@keyframes movepoint {

  0% {

    transform: translate(0px, 0px);

  }



  50% {

    transform: translate(0px, -30px);

  }



  100% {

    transform: translate(0px, 0px);

  }

}



.application .banner .applicationbtn {

  display: inline-block;

  background: #000;

  border-radius: 50px;

  display: inline-block;

  padding: 15px 70px;

  margin: 20px 0 30px;

  transition: 0.3s linear 0s;

}



.application .banner .applicationbtn a {

  font-size: 30px;

  color: #fdf6b9;

  text-decoration: none;

}



.application .banner .applicationbtn a i {

  animation: UpDown 1s linear infinite;

}



.application .banner .applicationbtn:hover {

  background: #D74F50;

}



.application .content {

  background: #fff;

  display: flex;

  justify-content: space-between;

  box-sizing: border-box;

  padding: 55px 35px;

  border-radius: 15px;

  margin: 0px 0px 20px 0px;

  outline: #4784a5 1px dashed;

}



.application .content .method {

  width: 51%;

}



.application .content .tit {

  display: inline-block;

  color: #ffffff;

  font-size: 1.5rem;

  font-weight: 900;

  background: #e8548f;

  padding: 10px 22px;

  border-radius: 0px 50px 50px 0px;

  margin-bottom: 20px;

}



.application .content .qualifications {

  width: 45%;

}



.application .content p {

  text-align: justify;

  color: #333333;

  font-size: 1.2rem;

  line-height: 1.8;

}



.application .content p a {

  color: #D74F50;

  font-weight: bold;

}



.application .content .method p span {

  font-size: 1rem;

  display: block;

  padding: 0px 0px 30px 0px;

  color: #D74F50;

}



.application .tip {

  text-align: center;

  font-weight: bolder;

  font-size: 1rem;

}



/* 莘莘向榮獎助學金申請 */



/* 堅持讓我們更有力量 */

.card {

  box-sizing: border-box;

  padding: 80px calc((100% - 1280px) / 2);

  background: #2d907d;

}



.card .content {

  display: flex;

  justify-content: space-between;

  border-radius: 15px;

  background: #fff;

  overflow: hidden;

}



.card .content .cardimg img {

  width: 100%;

  height: 100%;

}



.card .content .cardimg .object-fit_cover {

  object-fit: cover;

  object-position: 50% 50%;

}



.card .content .cardtext {

  padding: 28px 28px 28px 40px;

}



.card .content .cardtext h3 {

  font-size: 3rem;

  color: #fdf6b9;

  background: #1f7f6d;

  font-weight: 900;

  display: inline-block;

  padding: 15px 40px;

  box-sizing: border-box;

  border-radius: 50px;

}



.card .content .cardtext p {

  margin: 28px 0px 0px 0px;

  text-align: justify;

  font-size: 1.2rem;

  line-height: 1.5;

  color: rgb(114, 113, 113);

}



.card .content .cardtext p span {

  color: #4784a5;

  font-weight: bold;

}



.card .desc {

  font-size: 22px;

  color: #ffffff;

  line-height: 1.6;

}



.card .portrait {

  width: 50%;

  text-align: center;

}



/* 堅持讓我們更有力量 */



/* 志光慈善會  堅持助學路 */

.message {

  padding: 10px calc((100% - 1700px) / 2) 60px calc((100% - 1700px) / 2);

  overflow: hidden;

}



.message h2 {

  font-size: 1.5rem;

  font-weight: 900;

  color: #00937d;

  text-align: center;

  margin-bottom: 10px;

}



.message p {

  font-size: 1.2rem;

  text-align: center;

  line-height: 1.5;

}



.message .slick-list {

  margin: 0px 52px;

  padding: 0 !important;

}



.message .slick-prev {

  left: 0;

}



.message .slick-next {

  right: 30px;

}



.message .slick-prev:before,

.message .slick-next:before {

  z-index: 99;

  color: #045c21;

  font-size: 35px;

  left: unset;

  right: unset;

}



.message .message_item {

  padding: 30px 30px;

  box-sizing: border-box;

  position: relative;

  height: 100%;

}



.message li {

  border: 3px solid #ffd97a;

  border-radius: 15px;

  font-size: 20px;

  line-height: 1.6;

  box-sizing: border-box;

  position: relative;

  height: 100%;

}



.message .message_item>div span {

  color: #3e915d;

  font-weight: bold;

}



.message .slick-slide>div {

  height: 100%;

  width: 95%;

  align-items: center;

}



.message .message_item img {

  margin: 0px auto 10px;

}



.message_item {

  background-color: white;

  border-radius: 10px;



}



/* 志光慈善會  堅持助學路 */



/* 各地學子的得獎感言 */

.message {

  background-color: #FCEBC1;

  background-image: linear-gradient(#ffffff 0.6000000000000001px,

      transparent 0.6000000000000001px),

    linear-gradient(to right,

      #ffffff 0.6000000000000001px,

      #FCEBC1 0.6000000000000001px);

  background-size: 12px 12px;

}



.message-title h2 {

  font-size: 3rem;

  font-weight: 900;

  color: #1C6D5E;

  line-height: 1.2;

  text-align: center;

  padding: 50px 0px 50px 0px;

}



/* 各地學子的得獎感言 */



/* 畢業就是要選擇自己喜歡的工作 */

.win {

  overflow: hidden;

}



.win .wintop {

  padding: 80px calc((100% - 1400px) / 2);

  position: relative;

}



/* 六角形動畫 */

.win .wintop .hex-1 {

  position: absolute;

  top: 3%;

  left: 3%;

  display: block;

  animation: floating-translate 2s ease-in infinite alternate;

  z-index: -999;

}



.win .wintop .hex-2 {

  position: absolute;

  bottom: 13%;

  right: 15%;

  display: block;

  animation: floating-translate 2s ease-in infinite alternate-reverse;

  z-index: -999;

}



.win .wintop .hex-3 {

  position: absolute;

  top: 3%;

  right: 6%;

  opacity: 0.3;

  display: block;

  animation: floating-translate 2s ease-in infinite alternate-reverse;

  z-index: -999;

}



@keyframes floating-translate {

  0% {

    transform: rotate(50deg);

  }



  100% {

    transform: translateY(120px) rotate(360deg);

  }

}



.win .topContent {

  text-align: center;

}



.win .wintop h2 {

  font-size: 5rem;

  line-height: 1.2;

  color: #4784a5;

}



.win .wintop p {

  padding: 80px 0px;

  font-size: 1.5rem;

  line-height: 1.8;

  color: #727171;

}



.win .wintop h3 {

  color: #eeaea3;

  font-size: 4rem;

}



.win .wintop h3 span {

  font-size: 1.5rem;

}



.win .arrow {

  display: none;

}



.win ul {

  background-color: #F2E8D7;

}



.win ul li {

  position: relative;

  overflow: hidden;

  width: 25%;

  background-color: #F2E8D7;

}



.win ul a {

  text-decoration: none;

}



.win ul img {

  width: 100%;

  display: block;

}



.win ul .nickname {

  transition: 0.8s;

  position: absolute;

  bottom: 0;

  left: 0;

  color: #fff;

  box-sizing: border-box;

  padding: 20px;

  width: 100%;

  font-size: 24px;

  height: 100px;

  line-height: 1.3;

}



.win ul a:hover .nickname {

  opacity: 0;

}



.win ul li.nickname-1 .nickname {

  background: #d97272;

}



.win ul li.nickname-2 .nickname {

  background: #0ca498;

}



.win ul li.nickname-3 .nickname {

  background: #da690f;

}



.win ul li.nickname-4 .nickname {

  background: #448aca;

}



.win ul li.nickname-1 .down,

.win ul li.nickname-1 .down::after {

  background: #d97272;

}



.win ul li.nickname-2 .down,

.win ul li.nickname-2 .down::after {

  background: #0ca498;

}



.win ul li.nickname-3 .down,

.win ul li.nickname-3 .down::after {

  background: #da690f;

}



.win ul li.nickname-4 .down,

.win ul li.nickname-4 .down::after {

  background: #448aca;

}



.win ul .down {

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  width: 100%;

  transition: all 0.8s;

  opacity: 0;

  box-sizing: border-box;

  padding: 8vw 20px 20px 20px;

  color: #fff;

  line-height: 1.6;

}



.win ul .down::after {

  content: "";

  position: absolute;

  top: 0;

}



.win ul .down>p {

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 5;

}



.win ul li a:hover .down {

  opacity: 0.8;

}



.win ul .down .name {

  font-size: 24px;

  font-weight: bold;

}

.win ul .down .p1 {

  font-size: 20px;

  font-weight: bold;

  color: #f7ff8a;

}



.win ul .down p:nth-child(2) {

  font-size: 20px;

  font-weight: bold;

}



.win ul li .down>span {

  background: #ffffff;

  color: #bc2813;

  font-weight: bold;

  display: inline-block;

  font-size: 20px;

  padding: 0 15px;

  border-radius: 50px;

  margin: 10px 0;

}



.win .slick-prev {

  left: 20px;

  z-index: 99;

  width: 50px;

  height: 50px;

}



.win .slick-prev::before {

  color: #000000;

  font-size: 35px;

  opacity: 1;

}



.win .slick-next {

  right: 20px;

  z-index: 99;

  width: 50px;

  height: 50px;

}



.win .slick-next::before {

  color: #000000;

  font-size: 35px;

  opacity: 1;

}



/* 畢業就是要選擇自己喜歡的工作 */



/* 大學生各科系 出路指南 */

.know {

  background-image: url(../images/knowbg.jpg);

  background-position: center;

  background-size: cover;

  padding: 100px calc((100% - 1200px) / 2);

}



.know .content {

  text-align: center;

}



.know .content h2 {

  font-size: 5rem;

  line-height: 1.2;

}



.know .content h2 br {

  display: none;

}



.know .content h2 span:nth-child(2) {

  color: #5f95d3;

}



.know .content h2 span:nth-child(3) {

  color: #fbb03b;

}



.know .content h2 span:nth-child(4) {

  color: #f77d9a;

}



.know .content p {

  padding: 80px 0px;

  text-align: center;

  font-size: 1.5rem;

  line-height: 1.8;

  color: #727171;

}



.know .content .tit {

  background: #000;

  border-radius: 50px;

  display: inline-block;

  padding: 15px 70px;

  margin: 20px 0 30px;

  transition: 0.3s linear 0s;

}



.know .content .tit a {

  font-size: 30px;

  color: #fdf6b9;

  text-decoration: none;

}



.know .content .tit a i {

  animation: UpDown 1s linear infinite;

}



@keyframes UpDown {

  0% {

    transform: translateY(0%);

  }



  25% {

    transform: translateY(-15%);

  }



  75% {

    transform: translateY(15%);

  }



  100% {

    transform: translateY(0%);

  }

}



.know .tit:hover {

  background: #4784a5;

}



/* 大學生各科系 出路指南 */



/* 寒扶員夢助學 */

.detailed {

  background: url(../images/detailedbkg.png) no-repeat;

  background-size: cover;

  width: 100%;

  box-sizing: border-box;

  padding: 65px 0 65px calc((100% - 1050px) / 2);

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.detailed h2 {

  background: #2d907d;

  color: #fff;

  display: inline-block;

  font-size: 39px;

  padding: 10px 40px;

  border-radius: 50px;

  margin-bottom: 20px;

}





.detailed .content>p {

  text-align: justify;

  font-size: 1.5rem;

  line-height: 1.8;

  color: #727171;

  margin: 35px 0;

}



.detailed .content>a {

  display: inline-flex;

  color: #2d907d;

  text-align: justify;

  font-size: 1.5rem;

  line-height: 1.8;

  text-decoration: none;

  transition: 0.3s linear 0s;

}



.detailed .content>a:hover {

  font-weight: bolder;

  color: #2d907d;

}



.detailed .content a .arrow {

  display: flex;

  align-items: center;

  margin: 0px 0px 0px 10px;

  z-index: 99;

}



.detailed .arrow i {

  font-size: 20px;

}



.detailed .arrow i::after {

  content: "\f054";

  color: #2d907d;

  font-family: "Font Awesome 5 Free";

  display: inline-block;

  font-weight: 900;

  animation: leftRight 1.5s linear infinite;

}



.detailed .arrow i:nth-child(1)::after {

  animation-delay: 0;

}



.detailed .arrow i:nth-child(2)::after {

  animation-delay: 0.2s;

}



.detailed .arrow i:nth-child(3)::after {

  animation-delay: 0.4s;

}



@keyframes leftRight {

  0% {

    transform: translateX(-5px);

    opacity: 0;

  }



  50% {

    transform: translateX(0px);

    opacity: 1;

  }



  100% {

    transform: translateX(5px);

    opacity: 0;

  }

}



.detailed .hand {

  width: 50%;

}



.detailed .hand img {

  width: 100%;

  

}



/* 寒扶員夢助學 */



footer {

  background: #2d907d;

  box-sizing: border-box;

  padding: 20px;

}



footer p {

  font-size: 1rem;

  line-height: 1.5;

  color: #fff;

  text-align: center;

}



/* other */

@media (max-width: 1600px) {



  /* header */

  .bannertopimg img {

    width: 14%;

    right: 366px;

    top: 96px;

  }



  /* header */



  /* 輪播頒獎照片 */

  .slideWrap {

    height: 30vw;

  }



  /* 輪播頒獎照片 */



  /* 莘莘向榮獎助學金申請開跑 */

  .application {

    padding: 80px 5%;

  }



  /* 莘莘向榮獎助學金申請開跑 */



  /* 堅持讓我們更有力量 */

  .card {

    padding: 80px 5%;

  }



  /* 堅持讓我們更有力量 */



  /* 各地學子的感動留言 */

  .info {

    padding: 80px 5% 40px;

  }



  .list {

    padding: 0px 5% 80px;

  }



  .list ul li img {

    top: 15%;

  }



  .list ul li h3 {

    margin: 120px 0px 0px 0px;

  }



  .list ul li h4 {

    font-size: 2.5rem;

  }



  /* 各地學子的感動留言 */



  /* 畢業就是要選擇自己喜歡的工作 */

  .win .wintop {

    padding: 80px 5%;

  }



  .win ul .down {

    padding: 20px 15px;

  }



  .win ul .down>p {

    -webkit-line-clamp: 4;

  }



  .win ul .down p:nth-child(2) {

    font-size: 18px;

  }



  .win ul li .down>span {

    padding: 0 8px;

  }



  .win ul .nickname {

    font-size: 1.5vw;

  }



  .win ul .down .mhide {

    display: none;

  }



  /* 畢業就是要選擇自己喜歡的工作 */



  /* 大學生各科系 出路指南 */

  .know {

    padding: 80px 5%;

  }



  /* 大學生各科系 出路指南 */



  /* 寒扶圓夢助學 */

  .detailed {

    padding: 80px 0px 80px 5%;

  }

}



@media (max-width: 1280px) {



  /* header */

  header {

    padding-bottom: 65%;

}



  .bannertopimg img {

    width: 18%;

    right: 202px;

    top: 89px;

  }



  .bannerlove img:nth-child(1) {

    right: 50px;

    top: 0px;

  }



  .bannerlove img:nth-child(2) {

    left: 80px;

  }



  .bannerlove img:nth-child(3) {

    left: 100px;

    top: 30px;

  }



  .bannerlove img:nth-child(4) {

    right: 100px;

    top: 0px;

  }



  /* header */



  /* 輪播頒獎照片 */





  .slideWrap .slideCon {

    width: 90%;

    left: 5%;

  }



  .slideWrap .slick-prev,

  .slideWrap .slick-next {

    width: 50px;

    height: 50px;

  }



  .slideWrap .slick-prev:before,

  .slideWrap .slick-next:before {

    font-size: 50px;

    opacity: 1;

  }



  .slideWrap .slick-slide .slide_item img {

    margin: 0px 0;

  }



  /* 輪播頒獎照片 */



  /* 莘莘向榮獎助學金申請 */

  .application .content {

    padding: 40px 30px;

  }



  .application .content .tit {

    margin-bottom: 20px;

    padding: 8px 15px;

  }



  .application .content .method {

    width: 53%;

  }



  .application .content .qualifications {

    width: 44%;

  }



  /* 莘莘向榮獎助學金申請開跑 */



  /* 志光慈善會  堅持助學路 */

  /* .message {

    padding: 110px 1% 70px 1%;

  }

  .message .slick-prev,

  .message .slick-next {

    width: 50px;

    height: 50px;

  }

  .message .slick-prev:before,

  .message .slick-next:before {

    font-size: 50px;

    opacity: 1;

  } */

  /* 志光慈善會  堅持助學路 */



  /* 各地學子的感動留言 */

  .list ul li img {

    top: 14%;

  }



  .list ul li h3 {

    margin: 100px 0px 0px 0px;

    font-size: 0.7rem;

  }



  .list ul li h4 {

    font-size: 1.7rem;

  }



  .list ul li p {

    font-size: 0.8rem;

    line-height: 1.5;

  }



  .lightWrap .lightContent {

    width: 58%;

  }



  /* 各地學子的感動留言 */



  /* 畢業就是要選擇自己喜歡的工作 */

  .winList {

    display: flex;

    flex-wrap: wrap;

  }



  .win .topText span {

    display: inline-block;

    font-size: 22px;

  }



  .win .topText p {

    margin: 10px 0 0 0;

    font-size: 20px;

  }



  .win .topText img {

    width: 200px;

  }



  .win ul .nickname {

    font-size: 2vw;

  }



  .win ul .down .mhide {

    display: none;

  }



  .win .slick-prev::before {

    color: #fff;

    font-size: 30px;

    opacity: 1;

  }



  .win .slick-next::before {

    color: #fff;

    font-size: 30px;

    opacity: 1;

  }



  /* 畢業就是要選擇自己喜歡的工作 */

}



@media (max-width: 1024px) {

  .bannertopimg img {

    width: 21%;

    right: 128px;

    top: 61px;

  }

  .slideWrap {

    padding: 6em calc((100% - 1400px) / 2);

}

  /* 莘莘向榮獎助學金申請開跑 */

  .application .content .method {

    width: 49%;

  }



  .application .content .qualifications {

    width: 47%;

  }



  .application .content .tit {

    font-size: 1.3rem;

  }



  .application .content p {

    font-size: 1rem;

    line-height: 1.8;

  }



  /* 莘莘向榮獎助學金申請開跑 */



  /* 讓我們更有力量 */

  .card .content .cardtext h3 {

    font-size: 2rem;

  }



  .card .content .cardtext p {

    font-size: 1.1rem;

    line-height: 1.7;

  }



  /* 讓我們更有力量 */



  /* 寒扶圓夢助學 */

  .detailed .content>img {

    width: 60%;

  }



  /* 寒扶圓夢助學 */

}



@media (max-width: 912px) {

  header {

    padding-bottom: 80%;

}



  /* 各地學子的感動留言 */

  .list ul {

    justify-content: center;

  }



  .list ul li {

    margin: 10px 5px;

    width: 23.5%;

  }



  .list ul li h3 {

    padding: 10px 12px;

  }



  .list ul li p {

    font-size: 1rem;

  }



  .lightWrap .lightContent {

    width: 46%;

  }



  /* 各地學子的感動留言 */



  /* 大學生各科系 出路指南 */

  .know {

    background-image: url(../images/knowbg_tablet.jpg);

  }



  .know .content p {

    padding: 40px 0px 280px;

  }



  /* 大學生各科系 出路指南 */

}



@media (max-width: 820px) {



  /* 莘莘向榮獎助學金申請開跑 */

  .application h2 {

    font-size: 2.5rem;

    padding: 0px 0px 40px 0px;

  }



  .application .content .method {

    width: 52%;

  }



  .application .content .qualifications {

    width: 44%;

  }



  /* 莘莘向榮獎助學金申請開跑 */



  /* 堅持讓我們更有力量 */

  .card .content {

    flex-wrap: wrap;

  }



  /* 堅持讓我們更有力量 */



  /* 各地學子的感動留言 */

  .info h2 {

    font-size: 3rem;

  }



  .list ul li p {

    font-size: 0.9rem;

  }



  /* 各地學子的感動留言 */



  /* 畢業就是要選擇自己喜歡的工作 */

  .win .wintop h2 {

    font-size: 3rem;

  }



  .win .wintop p {

    padding: 40px 0px;

    font-size: 1.2rem;

  }



  .win .wintop h3 {

    font-size: 2.6rem;

  }



  /* 畢業就是要選擇自己喜歡的工作 */



  /* 大學生各科系 出路指南 */

  .know .content h2 {

    font-size: 3rem;

  }



  /* 大學生各科系 出路指南 */



  /* 寒扶圓夢助學 */

  .detailed .content>p {

    font-size: 1.4rem;

  }



  /* 寒扶圓夢助學 */



  footer {

    padding: 20px 40px;

  }

}



@media screen and (max-width: 768px) and (min-width: 600px) {



  /*手機版摺疊選單*/

  .nav-mune {

    display: block;

    width: 100%;

    background-color: #e8548f;

    position: fixed;

    z-index: 999;

    top: 0;

  }



  .nav-mune .top-mune {

    padding: 10px 2%;

    position: relative;

    text-align: right;

  }



  .nav-mune .top-mune .navA {

    text-decoration: none;

    color: #fff;

  }



  .nav-mune .top-mune .navA::after {

    content: "\f0c9";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    padding: 0;

    font-size: 26px;

  }



  .nav-mune .top-mune ul {

    position: absolute;

    width: 100%;

    top: 100%;

    left: 0;

    z-index: 999;

    display: block;

    display: none;

    background-color: rgba(0, 0, 0, 0.5);

    text-align: center;

  }



  .nav-mune .top-mune ul li {

    margin: 0;

    padding: 0;

    border-bottom: 1px dashed #000;

  }



  .nav-mune .top-mune ul li>a {

    display: block;

    text-decoration: none;

    box-sizing: border-box;

    padding: 10px 0;

    font-size: 16px;

    color: #fff;

  }



  .nav-mune .top-mune ul li:last-child {

    border-bottom: 0px;

  }



  .nav-mune .top-mune ul li>a:hover {

    color: #fecb4a;

  }



  /*置頂選單*/

  .top {

    display: none;

  }



  /* header */

  .bannertopimg img {

    width: 22%;

    right: 91px;

    top: 75px;

  }



  /* header */





  .carouseltitle h2 {

    font-size: 2.2rem;

  }



  /* 莘莘向榮獎助學金申請開跑 */

  .application .content {

    padding: 30px 20px;

  }



  .application .qualifications {

    width: 56%;

  }



  .application .method {

    width: 40%;

  }



  /* 莘莘向榮獎助學金申請開跑 */



  /* .message .slick-prev {

    z-index: 9;

  }

  .message .slick-list {

    margin: 0;

  } */



  /* 各地學子的感動留言 */

  .list ul li img {

    top: 17%;

  }



  .list ul li h3 {

    padding: 10px 5px;

  }



  .list ul li h4 {

    font-size: 1.7rem;

  }



  .list ul li p {

    display: none;

  }



  /* 各地學子的感動留言 */



  /* 畢業就是要選擇自己喜歡的工作 */

  .win .topText img {

    width: 170px;

  }



  .win ul .down {

    position: static;

    opacity: 1;

    text-decoration: none;

    padding: 10px 20px;

    height: 350px;

  }



  .win ul .nickname {

    position: static;

    height: auto;

    font-size: 3vw;

    padding: 20px;

    height: 100px;

    font-weight: bold;

  }



  .win ul li.nickname-1 .nickname {

    background: #c93636;

  }



  .win ul li.nickname-2 .nickname {

    background: #09776d;

  }



  .win ul li.nickname-3 .nickname {

    background: #ac540c;

  }



  .win ul li.nickname-4 .nickname {

    background: #2e6ba3;

  }



  .win ul .numberOne {

    opacity: 1;

    top: unset;

    left: unset;

    justify-content: flex-end;

  }



  .win ul .numberOne div {

    height: 50px;

    margin: 0 10px 0 0;

  }



  .win ul li a:hover .nickname {

    opacity: unset;

  }



  .win ul li a:hover .down {

    opacity: unset;

  }



  .win ul li a:hover .numberOne {

    opacity: unset;

  }



  .win .arrow {

    display: block;

    position: absolute;

    bottom: 10px;

    right: 10px;

    z-index: 99;

    display: flex;

  }



  .win .arrow i {

    font-size: 20px;

  }



  .win .arrow i::after {

    content: "\f054";

    color: #000;

    font-family: "Font Awesome 5 Free";

    display: inline-block;

    font-weight: 900;

    animation: leftRight 1.5s linear infinite;

  }



  .win .arrow i:nth-child(1)::after {

    animation-delay: 0;

  }



  .win .arrow i:nth-child(2)::after {

    animation-delay: 0.2s;

  }



  .win .arrow i:nth-child(3)::after {

    animation-delay: 0.4s;

  }



  @keyframes leftRight {

    0% {

      transform: translateX(-5px);

      opacity: 0;

    }



    50% {

      transform: translateX(0px);

      opacity: 1;

    }



    100% {

      transform: translateX(5px);

      opacity: 0;

    }

  }



  /* 畢業就是要選擇自己喜歡的工作 */



  /* 寒扶圓夢助學 */

  .detailed {

    padding: 80px 5%;

    position: relative;

  }



  .detailed .content {

    display: flex;

    flex-flow: column;

    align-items: flex-start;

    padding: 0px 0px 150px 0px;

  }



  .detailed .content>img {

    width: 100%;

  }



  .detailed .content>p {

    margin: 20px 0;

  }



  .detailed .content>p br {

    display: none;

  }



  .detailed .hand {

    position: absolute;

    right: 0;

    bottom: 0px;

  }





  /* 寒扶圓夢助學 */

}



@media (max-width: 600px) {



  /*手機版摺疊選單*/

  .nav-mune {

    display: block;

    width: 100%;

    background-color: #e8548f;

    position: fixed;

    z-index: 999;

    top: 0;

  }



  .nav-mune .top-mune {

    padding: 10px 2%;

    position: relative;

    text-align: right;

  }



  .nav-mune .top-mune .navA {

    text-decoration: none;

    color: #fff;

  }



  .nav-mune .top-mune .navA::after {

    content: "\f0c9";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    padding: 0;

    font-size: 26px;

  }



  .nav-mune .top-mune ul {

    position: absolute;

    width: 100%;

    top: 100%;

    left: 0;

    z-index: 999;

    display: block;

    display: none;

    background-color: rgba(0, 0, 0, 0.5);

    text-align: center;

  }



  .nav-mune .top-mune ul li {

    margin: 0;

    padding: 0;

    border-bottom: 1px dashed #000;

  }



  .nav-mune .top-mune ul li>a {

    display: block;

    text-decoration: none;

    box-sizing: border-box;

    padding: 10px 0;

    font-size: 16px;

    color: #fff;

  }



  .nav-mune .top-mune ul li:last-child {

    border-bottom: 0px;

  }



  .nav-mune .top-mune ul li>a:hover {

    color: #fecb4a;

  }



  /*置頂選單*/

  .top {

    display: none;

  }



  /* header */

  header {

    background: url(../images/header-mobile.png) no-repeat;

    padding-bottom: 130%;

    background-size: cover;

  }





  .bannertopimg img {

    display: none;

  }



  .bannerlove img:nth-child(2) {

    left: 320px;

    bottom: 100px;

    max-width: 60px;

  }



  .bannerlove img:nth-child(3) {

    left: 30px;

    top: 10px;

  }



  .bannerlove img:nth-child(4) {

    right: 420px;

    top: 30px;

  }



  /* header */

  .carouseltitle h2 {

    font-size: 2rem;

}





  /* 輪播頒獎照片 */



  .slideWrap {

    padding: 1em calc((100% - 1400px) / 2);

    height: auto;

  }



  .slideWrap .slideCon {

    margin: 0 auto;

    position: static;

    overflow: unset;

    width: 100%;

    text-align: center;

    transform: translateY(0);

    width: 90%;

  }



  .slideWrap .slick-slide .slide_item {

    display: flex !important;

    justify-content: center;

    -webkit-filter: opacity(1);

    transform: scale(0.9);

  }



  .slideWrap .slick-slide .slide_item img {

    transform: translateY(0);

    width: 100%;

  }



  .slideWrap .slick-prev {

    width: 20px;

    height: 20px;

    left: -5px;

  }



  .slideWrap .slick-next {

    width: 20px;

    height: 20px;

    right: 5px;

  }



  .slideWrap .slick-prev:before,

  .slideWrap .slick-next:before {

    font-size: 35px;

  }



  /* 輪播頒獎照片 */



  /* 莘莘向榮獎助學金申請開跑 */

  .banner {

    display: block;

    margin-top: 0vh;

  }

  .application {

    padding: 35px 5%;

}

  .application h2 {

    font-size: 2.9rem;

    padding: 0px 0px 0px 0px;

  }



  .applicationimg {

    margin-left: 0vw;

  }

  



  .application .banner .applicationimg img {

    max-width: 150px;

  }



  .application .content {

    flex-wrap: wrap;

    padding: 20px;

  }



  .application .content .method {

    width: 100%;

  }



  .application .content .qualifications {

    width: 100%;

    margin: 20px 0px 0px 0px;

  }



  .application .content p {

    font-size: 1rem;

  }



  .application .content p span {

    margin-bottom: 0px;

  }



  .application .tip {

    font-size: 0.85rem;

    line-height: 1.5;

  }



  /* 莘莘向榮獎助學金申請開跑 */



  /* 堅持讓我們更有力量 */

  .card {

    padding: 45px 5%;

}



  .card .content .cardtext p {

    font-size: 1rem;

  }



  /* 堅持讓我們更有力量 */



  /* .message {

    padding: 70px 1%;

  }

  .message h2 {

    font-size: 30px;

    margin-bottom: 20px;

  }



  .message .slick-prev:before,

  .message .slick-next:before {

    font-size: 35px;

  } */



  /* 各地學子的感動留言 */

  .list ul {

    justify-content: space-between;

    align-items: center;

  }



  .list ul li {

    width: 48%;

    margin: 0px 0px 30px 0px;

  }



  .list ul li img {

    top: 22.5%;

  }



  .list ul li h3 {

    margin: 130px 0px 0px 0px;

    font-size: 1rem;

  }



  .list ul li p {

    display: none;

  }



  .lightWrap .lightContent {

    width: 55%;

  }



  /* 各地學子的感動留言 */



  /* 畢業就是要選擇自己喜歡的工作 */

  .win .wintop h2 {

    font-size: 2.9rem;

  }



  .win .wintop p {

    font-size: 1rem;

  }



  .win ul .nickname {

    font-size: 1rem;

  }



  /* 畢業就是要選擇自己喜歡的工作 */



  /* 大學生各科系 出路指南 */

  .know .content {

    order: 1;

  }



  .know .content h2 {

    font-size: 2.9rem;

  }



  .know .content p {

    font-size: 1rem;

    padding: 40px 0px 150px;

  }



  /* 大學生各科系 出路指南 */



  /* 寒扶圓夢助學 */

  .detailed {

    padding: 80px 5%;

    position: relative;

  }



  .detailed .content {

    display: flex;

    flex-flow: column;

    align-items: flex-start;

    padding: 0px 0px 80px 0px;

  }

  





  .detailed h2 {

    font-size: 30px;

}

  .detailed .content>p {

    margin: 20px 0;

    font-size: 1rem;

  }



  .detailed .content>p br {

    display: none;

  }



  .detailed .hand {

    position: absolute;

    right: 0;

    bottom: 0px;

      width: 60%;

  }



  .detailed img {

    width: 100%;

  }



  /* 寒扶圓夢助學 */

  footer {

    padding: 11px 20px;

}

  footer p {

    font-size: .8rem;

  }

}



@media (max-width: 430px) {



  



  .bannerlove img:nth-child(1) {

    right: 30px;

    top: 50px;

    max-width: 50px;

  }



  .bannerlove img:nth-child(2) {

    left: 20px;

    bottom: 200px;

  }



  .bannerlove img:nth-child(4) {

    right: 320px;

    top: 300px;

    max-width: 50px;

  }



  .slideWrap .slick-center .slide_item img {

    transform: scale(1);

    position: relative;

    z-index: 1;

    width: 110%;

    transform: translateY(0);

  }



  .slideWrap {

    box-sizing: border-box;

    padding: 0em calc((100% - 1400px) / 2);

    position: relative;

    height: 70vw;

  }



  /* header */

  .carouseltitle h2 {

    font-size: 1.5rem;

  }



  .carouseltitle h4 {

    font-size: 1rem;

  }



  /* 莘莘向榮獎助學金申請開跑 */

  .application h2 {

    font-size: 2rem;

  }



  .application .banner .applicationbtn {

    padding: 15px 40px;

  }



  .application .banner .applicationbtn a {

    font-size: 1.25rem;

  }



  .application .content .tit {

    font-size: 1rem;

  }



  .application .content p {

    font-size: 0.83rem;

  }



  .application .content .method p span {

    font-size: 0.6rem;

  }



  /* 莘莘向榮獎助學金申請開跑 */



  /* 堅持讓我們更有力量 */

  .card .content .cardtext h3 {

    display: block;

    text-align: center;

    padding: 15px 20px;

    font-size: 1.5rem;

  }



  /* 堅持讓我們更有力量 */



  /* 各地學子的感動留言 */

  .info h2 {

    font-size: 2.3rem;

  }



  .list ul li {

    padding: 15px;

  }



  .list ul li img {

    top: 19%;

  }



  .list ul li h3 {

    margin: 100px 0px 0px 0px;

    font-size: 0.7rem;

  }



  .lightWrap .lightContent p {

    font-size: 1rem;

  }



  .message h2 {

    font-size: 1rem;

    font-weight: 900;

    margin-bottom: 10px;

  }



  .message-title h2 {

    font-size: 2rem;

    padding: 20px 0px 20px 0px;

  }



  .message_item img {

    width: 80px;

  }



  /* 各地學子的感動留言 */



  /* 畢業就是要選擇自己喜歡的工作 */

  .win .wintop h2 {

    font-size: 2.3rem;

  }



  .win .wintop h3 {

    font-size: 2rem;

  }



  /* 畢業就是要選擇自己喜歡的工作 */



  /* 大學生各科系 出路指南 */

  .know .content h2 {

    font-size: 2.3rem;

  }



  .know .content h2 br {

    display: block;

  }



  .know .content .tit {

    padding: 15px 40px;

  }



  .know .content .tit a {

    font-size: 1.25rem;

  }



  /* 大學生各科系 出路指南 */

}



@media (max-width: 360px) {





  /* 莘莘向榮獎助學金申請開跑 */

  .application .content p {

    font-size: 0.95rem;

  }



  /* 莘莘向榮獎助學金申請開跑 */



  /* 各地學子的感動留言 */

  .list ul li img {

    top: 18%;

  }



  .list ul li h3 {

    margin: 100px 0px 0px 0px;

    font-size: 0.7rem;

  }



  .lightWrap .lightContent {

    padding: 45px;

    width: 56%;

  }



  /* 各地學子的感動留言 */

}





#gst {

  background:#f6c6c6 url(../images/bg.jpg) center;

  background-size: 100%;

  padding: 15vh 5vw;

  margin: auto;

  line-height: 1.8;

  position: relative;

  text-align: left;



}



#gst section>div {

  width: 68%;

  margin: auto;

  margin-left:1vw;

  text-align: left;

  color: #000000;

  font-size: 1.3em;

  font-weight: 400;

  

}

#gst img {

  width: 48%;

  border: solid 12px #fff;

  box-shadow: 1px 1px 5px rgba(0, 140, 254, 0.435);

  top: -3vh;

  right: 3vw;

  -moz-transform:rotate(1deg);

  -webkit-transform:rotate(1deg);

  -o-transform:rotate(1deg);

  -ms-transform:rotate(1deg);

  transform:rotate(1deg);

  border-radius: 1em;

  position: absolute;

  z-index: 100;

}

#gst strong {

  font-size: 122%;

  line-height: 1.5;

    margin-bottom: 2vh;

   display: block;

   color: #0d8e56d7;

}

#gst mark {

  color: #fff;

    background: #1f7f6d;

    font-weight: 900;

    padding: 8px 20px;

    box-sizing: border-box;

    border-radius: 50px;

   

}



    #gst .typewriter {

      border-right: 2px solid #fff;

      white-space: nowrap;

      overflow: hidden;

      animation: typing 3s steps(40, end) forwards, blink 0.7s step-end infinite;

      

    }

 .line1 {

      opacity: 0;

      transform: translateY(20px);

      animation: fadeInUp 0.8s forwards;

    }

    /* 打字動畫 */

    @keyframes typing {

      from { width: 0; }

      to { width: 100%; }

    }



    /* 游標閃爍動畫 */

    @keyframes blink {

      50% { border-color: transparent; }

    }



    /* 每句話的延遲時間 */

    .line1 { animation-delay: 1.2s; margin-bottom:2vh;}



    /* 響應式設定 */

    @media (max-width: 600px) {

      .typewriter {

        display: block;

        font-size: 1rem;

        white-space: normal;

        width: 100%;

      }

      @keyframes typing {

        from { width: 0; }

        to { width: 100%; }

      }

    }

    @media screen and (max-width:80em) {

          #gst section>div {

            width:68%;

            margin: auto;

            margin-left: -1vw;

            font-size: 1.23em;

            text-align: left;

            

    }

#gst img {

  width:42%;

  border: solid 8px #fff;

  box-shadow: 1px 1px 5px rgba(0, 140, 254, 0.435);

  top: -8vh;

  right:2vw;

  z-index: 100;

}

    }

        @media screen and (max-width:75em) {

                    #gst section>div {

            width:50%;

            margin: auto;

            margin-left: -1vw;

            font-size: 1.23em;

            text-align: left;

            

    }



#gst img {

  width:46%;

  border: solid 8px #fff;

  box-shadow: 1px 1px 5px rgba(0, 140, 254, 0.435);

  top: -8vh;

  right:2vw;

  z-index: 100;

}

    }

    @media screen and (max-width:55em) {

      #gst {

      background:#f6c6c6 url(../images/bg.jpg) center;

      background-size: cover;

      padding: 5vh 8vw 25vh;

      margin: auto;

      position: relative;

      text-align: center;

    }

    #gst section>div {

      width: 100%;

      margin: auto;

      font-size: 1em;

      text-align: left;

    }

#gst img {

  width: 98%;

  border: solid 8px #fff;

  box-shadow: 1px 1px 5px rgba(0, 140, 254, 0.435);

  top: -8vh;

  right:auto;

  position: relative;

  z-index: 100;

}

#gst strong {

  font-size:100%;

}



    }