@import url('https://fonts.googleapis.com/css2?family=Huninn&family=Noto+Sans+TC&display=swap');
@font-face {
  font-family: 'Huninn';
  src: url('Huninn-Regular.ttf') format("truetype");
  font-style: normal;
  font-weight: 400;
}
div, p,h1,h4 {
  transition: all 0.1s linear;
	font-family: 'Huninn';
}
a, a:active, a:hover {
  text-decoration: none;
  color: aqua;
}
body {
  background-color: #000;
  font-family: "Huninn", sans-serif, ;
}
.bt {
  text-indent: -999px;
  overflow: hidden;
  cursor: pointer;
}
[v-cloak] {
  display: none;
}
/*scrollbar優化*/
::-webkit-scrollbar { width: 0px;} 
::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.3); height:5px;} /* 滑軌背景色 */
::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.5);} /* 滑塊顏色 */
::-webkit-scrollbar-button { background-color: rgba(0,0,0,0.3);} /* 滑軌兩頭監聽按鈕色 */
::-webkit-scrollbar-corner { background-color: black;} /* 橫向滾動條和縱向滾動條相交處尖角的顏色*/

/********************* load *********************/
.loadbg {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    background: url(../img/loadbg.jpg) no-repeat center top;
    z-index: 9999;
    position: absolute;
}
.pageheader .loadbg{top: 0;}
.loading {
  width: 20%;
}
.loading p {
    color: #fdcb4c;
    font: normal 400 3.5rem / 2 'Huninn', Noto Sans TC, Microsoft JhengHei, Heiti TC, sans-serif;
    text-align: center;
}
.loadseer {
  width: 117px;
  height: 168px;
  background-image: url(../img/loadpic.png);
  position: relative;
  margin: 0 auto 5%;
  animation-name: oxxo;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
}
@keyframes oxxo {
  0% {
    background-position: 0px 0;
  }
  12.5% {
    background-position: 117px 0;
  }
  25% {
    background-position: 234px 0;
  }
  37.5% {
    background-position: 351px 0;
  }
  50% {
    background-position: 468px 0;
  }
  62.5% {
    background-position: 585px 0;
  }
  75% {
    background-position: 702px 0;
  }
  87.5% {
    background-position: 819px 0;
  }
  100% {
    background-position: 936px 0;
  }
}
.progress {
  height: 2rem;
  border-radius: 1rem;
}
/********************* loade *********************/
/*********************scroll*********************/
.web-scroll {
    position: relative;
    margin: 0 auto;
    width: 7%;
    height: 4vh;
    bottom: 10%;
    background: url(../img/scroll.png) no-repeat center top;
    background-size: contain;
    animation: sdrop 2s ease-out infinite;
}
@keyframes sdrop {
  0% {
    opacity: 0;
    transform: translate(0px, 0px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0px, 20px);
  }
}
/********************* 影片全螢幕 *********************/
.video-background {
  background: #000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -99;
}

.video-foreground, .video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
video {
    width: 100vw;
    height: 100vh;
    transform: scale(1.13);
}
@media (min-aspect-ratio: 16/9) {
  .video-foreground {
    height: auto;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground {
    width: 100%; /*left: -100%;*/
  }
}
/*rwdvideo*/
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/********************************背景********************************/
.page00_bg, .page01_bg, .page02_bg, .page03_bg, .page04_bg, .page05_bg, .page06_bg {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background-position: center center;
  z-index: 1;
  background-size: cover;
  padding: 2% 16%;
}
.page01_bg {
  padding: 0%;
}
/*.page01_bg {background:url(../img/bg_areakv.jpg) top center; background-size: cover;}*/
.page02_bg {
  background: url(../img/bg02.jpg) top center;
  background-size: cover;
}
.page03_bg {
  background: url(../img/bg03.jpg) top center;
  background-size: cover;
}
.page04_bg {
  background: url(../img/bg04.jpg) top center;
  background-size: cover;
}
.page05_bg {
  background: url(../img/bg05.jpg) top center;
  background-size: cover;
}
.page06_bg {
  background: url(../img/bg06.jpg) top center;
  background-size: cover;
}
.footer {
  background: url(../img/footer.jpg) top center;
  background-size: cover;
}
#footer.active {
  -webkit-animation: none;
}
button, button:active, button:focus, button:focus-visible {
  background-color: unset;
  border: unset;
}
/********************************nav********************************/
#fp-nav ul li a span, .fp-slidesNav ul li a span {
  background: #fff0;
}
/*nav_top*/
.navsite {
  width: 881px;
  margin: 0 auto;
  position: relative;
}
.navup {
  width: 760px;
  margin: 20px auto 0;
  height: 30px;
  padding: 0 45px;
  z-index: 999;
  position: relative;
  background-color: rgba(0, 0, 0, 0.45);
}
.navup .btn {
  font: normal 400 18px/1 'Huninn', Noto Sans TC, Microsoft JhengHei, Heiti TC, sans-serif;
  left: 0;
  color: rgba(255, 255, 255, 1);
  margin: 0px 15px;
  float: left;
  letter-spacing: 9px;
  text-shadow: 0em 0em 2px #000000, 0em 0em 4px #000000, 0em 0em 6px #000000;
}
.navup .btn:hover {
  color: #f6da7b;
  text-shadow: 0em 0em 2px #000000, 0em 0em 4px #000000, 0em 0em 6px #000000;
  cursor: pointer
}
.navbar-toggler{border: none;}

.navbar>.container-fluid{justify-content: flex-end;}

.nav-link{color: #ffffff;}
.nav-link:focus, .nav-link:hover {
    color: #ffc107;
}
/*nav right*/
.navarea_right {
  position: fixed;
  bottom: 3%;
  right: 1%;
  z-index: 999;
  font: normal bold 16px/1 'Huninn', Noto Sans TC, Microsoft JhengHei, Heiti TC, sans-serif;
  text-align: center;
  color: #ffffff;
  letter-spacing: 2px;
  transform: scale(.93);
  filter: drop-shadow(10px 10px 0px rgba(0, 0, 0, 0.15));
}
.navpre, .nav, .navs, .gotop {
  cursor: pointer;
  padding: 10px;
}
.navpre {
  width: 140px;
  height: 133px;
  background: url(../img/navs_nono.png) no-repeat top center;
  background-size: 100%;
  bottom: 200px;
  right: 2px;
  position: absolute;
  z-index: -1;
  -webkit-animation: movenavpre .8s infinite;
}
@-webkit-keyframes movenavpre {
  0% {
    bottom: 180px;
  }
  50% {
    bottom: 190px;
    transform: scaleY(0.96);
    transform-origin: 100% 10%;
  }
  100% {
    bottom: 180px;
  }
}
.navarea_right a {
  text-decoration: none;
}
.navs_mo, .navs_pc, .navs_se {
  width: 138px;
  height: 41px;
  margin-bottom: 3%;
}
.navs_mo {  background: url(../img/navs_mo.png) no-repeat top center; background-size: 100%;}
.navs_pc {  background: url(../img/navs_pc.png) no-repeat top center; background-size: 100%;}
.navs_se {  background: url(../img/navs_se.png) no-repeat top center; background-size: 100%;}

.navicon {
  float: left;
  margin: 2px;
  cursor: pointer;
  transform: scale(.9);
}
.navs_mo:hover, .navs_pc:hover, .navs_se:hover, .navicon:hover {
  transform: scale(1.08);
  cursor: pointer;
}
.nav {
  margin: 0 auto;
  color: #a14d33;
  letter-spacing: 1px;
  font: normal 400 16px/0.8 'Huninn', Noto Sans TC, Microsoft JhengHei, Heiti TC, sans-serif;
}
.nav:hover {
  letter-spacing: 0px;
  color: #ff4900;
}

.offcanvas-end {
  width: 100%;
}
.navbar-toggler-icon {
  width: 5em;
  height: 5em;
  margin: 1rem;
}
.nav-item {
  font-size: 4rem;
  text-align: center;
}
.navbar.navbar-dark.bg-dark {
  background-color: rgb(33 37 41 / 0%) !important;
  font-family: 'Huninn';
}
.offcanvas-header .btn-close {
    opacity: .5;
    margin: 2% 0 0 2%;
    transform: scale(3);
    filter: invert(1);
}
.nav-link .svg {
    width: 8rem;
    filter: invert(1);
    opacity: .5;
    margin: 3% 1%;
}
/******************************** page01 ********************************/
.logo {
    background: url(../img/logo.png) no-repeat center top;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    position: relative;
    margin: 0% auto;
    transform: scale(.85);
	cursor: pointer;
	
}
.page01_bg .dwbtn {
    background: url(../img/btn.png) no-repeat center top;
    background-size: contain;
    width: 12vw;
    height: 10vh;
    margin: 0px auto 2%;
    position: relative;
}
.page01_bg .content {
	    width: 100vw;
    height: 100vh;
}
.btn:hover {
  transform: scale(.96);
}
.btn p {
  font: normal 500 5.2rem / 1 "Huninn", sans-serif;
  color: #ffffff;
  position: relative;
  text-shadow: 0 0 15px #0d6efd, 0 0 30px #000;
}
/******************************** page02 ********************************/
.bar {
  height: auto;
  display: flow;
  top: -10%;
  position: relative;
  overflow: visible;
}
.carousel-control { opacity: 1;}

.carousel-control-next, .carousel-control-prev{ 
	opacity: 1;
	width: 6%;
}

.carousel-control-next-icon{
	width: 2rem;
	height: 2rem;
  background: url(../img/caret-right-fill.svg) no-repeat center top;
	filter: invert(1);
  animation: moven 3s ease-out infinite;
}
.carousel-control-prev-icon {
	width: 2rem;
	height: 2rem;
  background: url(../img/caret-left-fill.svg) no-repeat center top;
  filter: invert(1);
  animation: movep 3s ease-out infinite;
	
}
@keyframes moven {
  0% {
    opacity: 0;
    transform: translate(-10px, 0px) scale(2.5);
  }
  50%{ opacity: 1;}
  100% {
    opacity: 0;
    transform: translate(0px, 0px) scale(2.5);
  }
}
@keyframes movep {
  0% {
    opacity: 0;
    transform: translate(10px, 0px) scale(2.5);
  }
  50%{ opacity: 1;}
  100% {
    opacity: 0;
    transform: translate(0px, 0px) scale(2.5);
  }
}

.page02_bg .t02 {
  margin: 0 auto;
  width: 47vw;
  height: 14vh;
  background: url(../img/t02.png) no-repeat center top;
  background-size: contain;
}
.postarea {
    top: 29%;
    width: 50%;
    height: auto;
    position: relative;
    background: #fff url(../img/box01bg.jpg) repeat center;
    z-index: 999;
    float: right;
}
.page02_bg .bar{top: -6.5%;}
.page02_bg .fp-slides{
	    width: 48%;
    float: left;
}
.class {
  background: #142343;
  width: 100%;
  background-size: contain;
  text-align: left;
}
.class .btn {
    font: normal 500 20px / 1 'Huninn', Noto Sans TC, Microsoft JhengHei, Heiti TC, sans-serif;
    color: #FFF;
    padding: 10px 20px;
}
.class .btn:hover, .class .btn.active {
  background-color: #f8c72d;
  color: #152242;
  border-radius: 0;
  padding-left: 12px;
  padding: 10px 20px;
}
.box01 {
    padding: 2.7% 4%;
    display: flex;
}
.box01 p {
    font: normal 400 1vw / 1.8 'Huninn', Noto Sans TC, Microsoft JhengHei, Heiti TC, sans-serif;
    text-align: justify;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666666;
}
.news {  width: 100%;  float: left;}
.date { float: right;}

.a02_01 {
    background: url(../img/a02_01.png) no-repeat center top;
    background-size: contain;
    width: 37vw;
    height: 50%;
    left: 14%;
    top: 0%;
    position: absolute;
    z-index: -1;
    filter: drop-shadow(0px 0px 20px rgba(38, 75, 255, 0.8));
}
.a02_02 {
    background: url(../img/a02_02.png) no-repeat center top;
    background-size: contain;
    width: 14vw;
    height: 40%;
    right: 27%;
    top: 10%;
    position: absolute;
    z-index: -2;
    filter: drop-shadow(0px 0px 20px rgba(38, 75, 255, 0.8));
}
/******************************** page02e ********************************/
/******************************** page03 ********************************/
.page03_bg .t03 {
  margin: 0 auto;
	width: 47vw;
	height: 14vh;
  background: url(../img/t03.png) no-repeat center top;
  background-size: contain;
}
.a03_01 {
  background: url(../img/a03_01.png) no-repeat center top;
  background-size: contain;
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: -1;
  top: 2%;
  right: 0;
}
.page03_bg .bar {
    top: -2%;
    position: relative;
    width: 62%;
    margin: 0 auto;
}
/******************************** page03e ********************************/
/******************************** page04 ********************************/
.page04_bg .t04 {
  margin: 0 auto;
  width: 47vw;
  height: 14vh;
  background: url(../img/t04.png) no-repeat center top;
  background-size: contain;
}
.page04_bg .carousel-inner {
  overflow: visible;
}
.page04_bg .carousel-indicators {
    margin: 0 auto;
    top: 94%;
    width: 100%;
}
.page04_bg .bar {
    top: -49%;
    z-index: 0;
    height: fit-content;
    transform: scale(.43);
}
.carousel-indicators .pt_01s, .carousel-indicators .pt_02s, .carousel-indicators .pt_03s, .carousel-indicators .pt_04s, .carousel-indicators .pt_05s, .carousel-indicators .pt_06s, .carousel-indicators .pt_07s, .carousel-indicators .pt_08s, .carousel-indicators .pt_09s, .carousel-indicators .pt_10s, .carousel-indicators .pt_11s {
  width: 150px;
  height: 150px;
  opacity: 1;
  margin: -13px;
}
.carousel-indicators .pt_01s {
  background: url(../img/pt_01s.png) no-repeat center top;
}
.carousel-indicators .pt_01s.active {
  background: url(../img/pt_01a.png) no-repeat center top;
}
.carousel-indicators .pt_02s {
  background: url(../img/pt_02s.png) no-repeat center top;
}
.carousel-indicators .pt_02s.active {
  background: url(../img/pt_02a.png) no-repeat center top;
}
.carousel-indicators .pt_03s {
  background: url(../img/pt_03s.png) no-repeat center top;
}
.carousel-indicators .pt_03s.active {
  background: url(../img/pt_03a.png) no-repeat center top;
}
.carousel-indicators .pt_04s {
  background: url(../img/pt_04s.png) no-repeat center top;
}
.carousel-indicators .pt_04s.active {
  background: url(../img/pt_04a.png) no-repeat center top;
}
.carousel-indicators .pt_05s {
  background: url(../img/pt_05s.png) no-repeat center top;
}
.carousel-indicators .pt_05s.active {
  background: url(../img/pt_05a.png) no-repeat center top;
}
.carousel-indicators .pt_06s {
  background: url(../img/pt_06s.png) no-repeat center top;
}
.carousel-indicators .pt_06s.active {
  background: url(../img/pt_06a.png) no-repeat center top;
}
.carousel-indicators .pt_07s {
  background: url(../img/pt_07s.png) no-repeat center top;
}
.carousel-indicators .pt_07s.active {
  background: url(../img/pt_07a.png) no-repeat center top;
}
.carousel-indicators .pt_08s {
  background: url(../img/pt_08s.png) no-repeat center top;
}
.carousel-indicators .pt_08s.active {
  background: url(../img/pt_08a.png) no-repeat center top;
}
.carousel-indicators .pt_09s {
  background: url(../img/pt_09s.png) no-repeat center top;
}
.carousel-indicators .pt_09s.active {
  background: url(../img/pt_09a.png) no-repeat center top;
}
.carousel-indicators .pt_10s {
  background: url(../img/pt_10s.png) no-repeat center top;
}
.carousel-indicators .pt_10s.active {
  background: url(../img/pt_10a.png) no-repeat center top;
}
.carousel-indicators .pt_11s {
  background: url(../img/pt_11s.png) no-repeat center top;
}
.carousel-indicators .pt_11s.active {
  background: url(../img/pt_11a.png) no-repeat center top;
}
.a04_01 {
    background: url(../img/a04_01.png) no-repeat center top;
    background-size: contain;
    width: 16%;
    height: 47%;
    left: 16%;
    bottom: 4%;
    position: absolute;
}
.a04_02 {
    background: url(../img/a04_02.png) no-repeat center top;
    background-size: contain;
    width: 19%;
    height: 35%;
    right: 13%;
    top: 2%;
    position: absolute;
    z-index: 1;
    filter: drop-shadow(0px 20px 0px rgba(0, 0, 0, .5));
}
.a04_03 {
	background: url(../img/a04_03.png) no-repeat center top;
	background-size: contain;
	width: 13%;
	height: 24%;
	right: 16%;
	bottom: 5%;
	position: absolute;
	animation: move04_03 4s ease-out infinite;
}
@keyframes move04_03 {
  0%  { bottom: 5%;}
  50% { bottom: 7%;}
  100%{ bottom: 5%;}
}
/******************************** page04e ********************************/

/******************************** page05 ********************************/
.page05_bg .bar {
    top: 0%;
    height: fit-content;
    width: 100%;
    padding: 6%;
}
.page05_bg .t05 {
  margin: 0 auto;
  width: 47vw;
  height: 14vh;
  background: url(../img/t05.png) no-repeat center top;
  background-size: contain;
}
.a05_01 {
    background: url(../img/a05_01.png) no-repeat center top;
    background-size: contain;
    width: 21%;
    height: 35%;
    left: 6%;
    top: 4%;
    position: absolute;
    z-index: -1;
}
.a05_02 {
    background: url(../img/a05_02.png) no-repeat center top;
    background-size: contain;
    /* background-color: aliceblue; */
    width: 17%;
    height: 45%;
    right: 4%;
    top: 28%;
    position: absolute;
    z-index: -1;
    /*filter: drop-shadow(0px 20px 0px rgba(0, 0, 0, .5));*/
}
.page05_bg .carousel-item{
	padding: 3%;
}
.page05_bg .card {
	margin: 0% .5% 1%;
	width: 32.3%;
	float: left;
	cursor: pointer;
}
.page05_bg .card:hover {
    filter: drop-shadow(0px 0px 10px rgba(255, 240, 0, 0.8));
}
.page05_bg .carousel-indicators {
    transform: scale(1.5);
    bottom: -5rem;
}
/******************************** page05e ********************************/

/******************************** page06 ********************************/
.page06_bg .t06 {
    margin: 0 auto 1%;
    width: 30vw;
    height: 24vh;
    background: url(../img/t06.png) no-repeat left top;
    background-size: contain;
}
.page06_bg .row-cols-3 > * {
  margin: 0 auto 2%;
}
.page06_bg .container,.page06_bg .container-md,.page06_bg .container-sm {
padding: 0px 15% 0;
}
.page06_bg .btn {
    padding: 0.4rem 0rem;
    border: unset;
}
.page06_bg .row.row-cols-5{ 
	max-height: 50vh;
  overflow-y: scroll;
}


.row.row-cols-5 .col{width: 96%;}
.page06_bg .blockquote {
    font: normal 500 1.8rem / 1 'Huninn', Noto Sans TC, Microsoft JhengHei, Heiti TC, sans-serif;
    color: #8c735f;
}
.a06_01 {
    background: url(../img/a06_01.png) no-repeat center top;
    background-size: 100%;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
    position: relative;
}

/******************************** page06e ********************************/

/******************************** footer ********************************/
#section7{background-color: #111926;}
.footer {
    background: url(../img/footer.jpg) top center no-repeat;
    background-size: auto;
    height: 50vh;
    width: 100vw;
    z-index: 99;
    top: 0%;
    position: absolute;
    background-color: #111926;
}
.copyfight {
  margin: 0 auto;
  position: relative;
}
/******************************** footer ********************************/

/******************************** lightbox ********************************/
/*.modal{ background-color: rgba(0, 0, 0, 0.2);}*/
.form-group {
  background-color: #fff0;
  margin-bottom: 5px;
}
.modal-backdrop.in {
  filter: alpha(opacity=75);
  opacity: .8;
}
.modal-content {
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0);
}
.modal-content {
  position: relative;
  background-color: #fff0;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 0px solid #999;
  border: 0px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0);
}
.modal-header {
  border-bottom: 0px solid #e5e5e5;
}
.close{
    background: url(../img/x-lg.svg) no-repeat;
    filter: invert(1);
    width: 2rem;
    height: 2rem;
    top: 0;
    right: 0%;
    position: absolute;
    transform: scale(2.5);
    opacity: .6;
}

#artmodal .modal-dialog {
	margin-top: 4%;
	max-width: 90%;
}
#artmodal .figure-caption {
font-size: 1.1em;  color: #feffed;
}
#artmodal .carousel-control-next-icon,#artmodal .carousel-control-prev-icon{
  top: -5%; position: relative;
}
#artmodal .modal-content .close {
    background: url(../img/x-lg.svg) no-repeat;
    filter: invert(1);
    width: 2rem;
    height: 2rem;
    top: -3%;
    right: 0;
    position: absolute;
    transform: scale(1.5);
    opacity: .6;
}
.modal-backdrop.show {
    opacity: .75;
}
.modal-content {
  position: relative;
  background-color: #fff0;
  background-clip: padding-box;
  border: 0px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  box-shadow: 0 3px 9px rgb(0 0 0 / 0%);
}

.figure-caption {
    font-size: 1em;
    color: #d7d7d7;
    letter-spacing: .1em;
}

/********************************lightboxe********************************/

/********************************page********************************/
.pagination > li > a, .pagination > li > span {
    color: #919191;
    border: 0px solid #ddd;
    padding: 3px 10px;
    font: normal 500 1vw / 1.5 'Huninn', Noto Sans TC, Microsoft JhengHei, Heiti TC, sans-serif;
    background-color: #ececec00;
}
.kv_page{
    background: url(../img/kv_page.png) no-repeat;
    width: 840px;
    height: 202px;
    background-size: 100%;
    position: absolute;
}
.pagination > li > a:hover, .pagination > li > span:hover
.pagination .active{
	background-color: #ee9d4e;
	color: white;
}
.page-item.disabled .page-link {
    background-color: #ececec00;
    border-color: #ececec00;
}
.page-item.active .page-link {
  background-color: #ee9d4e;
  border-color: #ee9d4e;
}

.pageheader{
    background: #11141e url(../img/bg_page.jpg) center top no-repeat;
    background-size: 100%;
    background-attachment: fixed;	
}
.btnback {
    background-color: #0a58ca;
    display: inline-block;
    position: relative;
    font: normal 400 4rem / 1 'Huninn', Noto Sans TC, Microsoft JhengHei, Heiti TC, sans-serif;
    color: white;
    padding: 1.8rem 2rem;
    letter-spacing: 2px;
    filter: drop-shadow(0px 6px 0px rgba(252, 162, 30, 1));
    right: -67%;
    margin: 28% 0 17%;
}

.page {
    width: 840px;
    margin: 0% auto 0;
    z-index: 2;
    position: relative;
    height: auto;
}
.content.left {
    display: inline-block;
    z-index: 9;
    position: relative;
    width: 100%;
    top: 200px;
    background-color: #ffffff;
	margin: 0 0 35vh;
}
.content.left .footer{
	  background-position-x: 0;
    width: inherit;
    bottom: auto;
}
.content .tittlebg {
	width: 100%;
	top: 0;
	position: relative;
	display: block;
	background-color: #142343;
	padding: 2.5%;
}
.tittlebg h1 {
    font: normal 400 24px / 1 'Noto Sans TC', Microsoft JhengHei, Heiti TC, sans-serif;
    color: #fff;
    text-align: center;
    padding: 0 0 1%;
}
.tittlebg h4 {
    font: normal 400 12px / 1 'Noto Sans TC', Microsoft JhengHei, Heiti TC, sans-serif;
    color: #fff;
    text-align: center;
    letter-spacing: 1px;
}
.articlebox {
    padding: 4% 6%;
    background-color: #ffffff;
}
.articlebox p {
    font: normal 400 16px / 1.6 'Noto Sans TC', Microsoft JhengHei, Heiti TC, sans-serif;
    color: #5a5a5a;
    text-align: justify;
}
.articlebox .pic {
    max-width: 100%;
    height: auto;
    margin: 4% 0;
    overflow: hidden;
}
.justify-content-center{
    margin: 3% 0;	
}

.content .more.tittlebg h1, .content .more.tittlebg h4 {
    color: #656565;
}
.content .more.tittlebg:nth-child(even) {
    background: #ececec; border: unset;
}
.content .more.tittlebg:nth-child(odd) {
    background: #FFF; border: unset;
}

/********************************page_e********************************/


/******************************** rwd ********************************/
/*-- media width: 18000px--*/
@media (max-width: 1920px) {}
@media (min-width: 1280px) and (max-width: 1600px) {
/*  .kvc_bg01 {
    transform: scale(.93) translateY(-3%)
  }
  .kv_01 {
    width: 46%;
    top: 0%;
    left: -6%;
  }
  .kv_02 {
    width: 45%;
    top: -4%;
    right: -6%;
  }
  .kv_03, .kv_04 {
    transform: scale(.8) translateY(70px);
  }
  .kv_04 {
    right: -5%
  }
  .kvc_bg02 {
    transform: scale(.8) translateY(-11%);
  }
  .kv_05 img {
    transform: scale(.9) translateY(70px) translateX(-3%);
  }
  .kv_06 img {
    transform: scale(.9) translateY(20px) translateX(7%);
  }
  .active .kvc_bg03 {
    transform: scale(.86);
    margin: 30px auto;
  }
  #section3 .rwd {
    transform: scale(.83) translateY(-90px);
  }
  .active .tittle .img-responsive {
    transform: scale(.92);
  }
  .kvc_bg04 {
    transform: scale(.88) translateY(-5%);
  }
  .navarea_right {
    transform: scale(.9);
  }
}
*/