:root {
  --body-color: linear-gradient(#f9f4f1,#e8d3c7,#f9f4f1);
  --main-color: #e8d3c7; /* var(--main-color) */
  --lightmain-color: #f9f4f1; 
  --white-color: #ffffff; /* var(--white-color) */
  --whitesmoke-color: #fbfbfb; /* var(--whitesmoke-color) */
  --darkgray-color: #333333; /* var(--darkgray-color) */
  --darkpink-color: #ea553a; /* var(--darkpink-color) cd5c5c*/
  --lightpink-color: #e18470; /* var(--lightpink-color) */
  --gold-color: #ffd700; /* var(--gold-color) */
  --blue-color: #87ceeb; /* var(--blue-color) */
  --darkblue-color: #19448e; /* var(--darkblue-color) */
  --purple-color: #dda0dd; /* var(--purple-color) */
  --darkpurple-color: #4b0082; /* var(--darkpurple-color) */
  --turquoise-color: #59b9c6; /* var(--turquoise-color) */
  --darkturquoise-color: #20b2aa; /* var(--darkturquoise-color) */
}

/*background*/
.bg-lightpink{ background-color: var(--lightpink-color); color: var(--white-color);}
a.bg-lightpink:hover{ background-color: var(--darkpink-color); color: var(--white-color);}

/*text color*/
.darkpink-color{ color: var(--darkpink-color);}
.darkblue-color{ color: var(--darkblue-color);}

html, body{
  font-family: "Microsoft JhengHei", 微軟正黑體, sans-serif;
  font-size: 14px;
  background: var(--body-color);
}

a{
  text-decoration: none;
}

a:hover{
  color: var(--darkgray-color);
}

header .nav-link{
  color: var(--darkgray-color);
  padding: 1rem 0;
  font-size: 1.1rem;
}

.nav-link{
  color: var(--darkgray-color);
  font-size: 1.1rem;
}

header .nav-item{
  position: relative;
}

header .nav-item:hover a:after{
  content: "";
  display: block;
  position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
  margin: auto;
  width: 100%;
  border: 1px solid var(--gold-color);
}

.nav-link:hover{
  color: var(--darkpink-color);
}

.navbar-light .navbar-nav .nav-link:hover{
  color: var(--darkpink-color);
}

.offcanvas{
  background-color: var(--darkgray-color);
}

/* 主視覺 */
header{
  width: 100%;
  height: 100%;
  background: url(../img/bg_header.png) no-repeat bottom left;
  background-size: cover;
}

#site-landing {
  position: relative;
  height: 100%;
  width: 100%;
}

.form-group {
  color: black; 
}

canvas{
  max-width: 100%;
}

.key-vision {
  height: calc(100vh - 70px);
  width: 100%;
  margin-top: 70px;
  overflow: visible;
}

.vision-wrap{
  position: relative;
  z-index: 900;
  width: 100%;
}

.vision-front-1{
  position: absolute;
    top: unset;
    right: unset;
    bottom: 32%;
    left: 13%;
  z-index: 910;
  -webkit-animation: shake-vertical 4s cubic-bezier(0.455, 0.130, 0.415, 0.955) infinite both;
          animation: shake-vertical 4s cubic-bezier(0.455, 0.130, 0.415, 0.955) infinite  both;
  width: 13%;
}

.vision-front-2{
  position: absolute;
    top: 10px;
    right: unset;
    bottom: unset;
    left: unset;
  z-index: -1;
  -webkit-animation: float-x ease-in-out 2.5s infinite alternate ;
          animation: float-x ease-in-out 2.5s infinite alternate ;
  max-width: 40%;
}

.vision-front-3{
  position: absolute;
    top: 20vh;
    right: 0;
    bottom: unset;
    left: unset;
  z-index: 930;
  width: 20%;
  -webkit-animation: float-y 3s infinite, lighting 3s infinite;
          animation: float-y 3s infinite, lighting 3s infinite;
}

.vision-front-4{
  position: absolute;
    top: unset;
    right: 15%;
    bottom: 22%;
    left: unset;
  z-index: 900;
  max-width: 15%;
  -webkit-animation: float-x-2 ease-in-out 3s infinite alternate ;
          animation: float-x-2 ease-in-out 3s infinite alternate ;
}

.vision-front-5{
  position: absolute;
    top: 53%;
    right: 50%;
    bottom: unset;
    left: unset;
  z-index: 910;
  width: 10%;
  -webkit-animation: float-bevel 4s ease-out infinite;
          animation: float-bevel 4s ease-out infinite;
}

.shadow-jump{
  position: absolute;
    bottom: 29%;
    left: 17%;
    width: 18px;
    height: 4px;
    border-radius: 100%;
    background: black;
    opacity: 0.2;
    filter: blur(1px);
    animation: shadow 4s infinite;
}

.vision-title-wrap{
  position: absolute;
    top: unset;
    right: 0;
    bottom: 20px;
    left: 0;
  z-index: 950;
  width: 100%;
  max-height: 40%;
}

.vision-title-1{
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
}

.vision-title-1 img{
  width: 95%;
}

.vision-title-2{
  width: 100%;
  text-align: center;
}

.vision-title-2 a{
  margin: 0 auto;
  padding: .5rem 2rem;
  font-size: 1.1rem;
  font-weight: bold;
}

/* Nav Menu */
header .navbar{
  background-color: var(--lightmain-color);
}

@media (min-width : 992px) {
  .offcanvas {
    visibility      : visible;
    position        : relative;
    background      : none;
    border          : none;
    justify-content : end;
  }
}

@media (max-width : 991px) {
  .offcanvas {
    width : 250px !important;
  }
  .offcanvas-start-lg {
    top          : 0;
    left         : 0;
    border-right : 1px solid rgba(0, 0, 0, .2);
    transform    : translateX(-100%);
    background-color: #000000;
  }
  .navbar-nav li a {
    color: white !important;
  }
  .navbar-nav li a:hover {
    color: var(--gold-color)!important;
  }
}

/* 計畫介紹 */
.about-content {
  min-height: 300px;
}

/* 甄選時程 */
#schedule{
  background: url(../img/chart_timeSchedule_bg.png) no-repeat;
  background-color: var(--lightmain-color);
  background-position: left top;
  min-height: 350px;
  background-size: auto;
}

#schedule img{
  width: 60%;
}

.jump-wrap{
  position: relative;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 20px;
  min-height: 60px;
}

.ico_arrow_right{
  position:absolute;
  width:0;
  height:0;
  border-radius:2px;
  border-style:solid;
  border-width: 10px 0 10px 17.3px;
  border-color: transparent transparent transparent var(--darkpink-color);
  animation:jump .7s infinite ; 
  -webkit-animation:jump .7s infinite ; 
  -moz-animation:jump .7s infinite ; 
}

.ico_arrow_down{
  position:absolute;
  width:0;
  height:0;
  border-radius:2px;
  border-style:solid;
  border-width: 17.3px 10px 0 10px;
  border-color: var(--darkpink-color) transparent transparent transparent;
  animation:jump .7s infinite ; 
  -webkit-animation:jump .7s infinite ; 
  -moz-animation:jump .7s infinite ; 
}

/* Side Bar */
.sidebar {
  width: 1.5rem;
  background-color: transparent;
  position: absolute;
  right: 0;
  z-index: 99999;
  transition: all 350ms ease-in-out;
}

.sidebar-collapse {
  padding: 5px;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 24px;
}

.sidebar.active .sidebar-list {
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 99999;
}

.sidebar.active {
  width: 120px;
}

.sidebar-close-block{
  background-color: var(--turquoise-color);
  color: var(--white-color);
}

/* Carousel */
.carousel-item-default {
  display: none;
}

.carousel-item > div{
  position: relative;
  cursor: pointer;
  width: 98%;
  height: 100%;
  margin: 0 1%;
}

.carousel-item img {
  max-width: 100%;
}

.coverimg{
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: none;
}

.carousel-item > div:hover .coverimg{
  display: block;
}

.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
  transform: translateX(100%);
}

.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
  transform: translateX(-100%);
}

.carousel-indicators {
  bottom: -60px;
}

.carousel-indicators button {
  background-color: #a25768 !important;
  border-radius: 50%;
  width: 10px !important;
  height: 10px !important;
}

.carousel-control-prev-icon {
  background: url(../img/ico_prev.svg) no-repeat center;
  width: 40px;
  height: 40px;
}

.carousel-control-next-icon {
  background: url(../img/ico_next.svg) no-repeat center;
  width: 40px;
  height: 40px;
}

.modal-body .close-btn-block {
  padding: 0;
  display: flex;
  display: -webkit-flex;
  max-width: 24px;
}

/* Links */
.link-area {
  padding: 30px 10px;
  display: flex;
  flex-direction: column;
  width: 40%;
}

.link-area img {
  max-width: 100px;
}

.link-icon {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
}

@media (max-width: 767px) {
  .carousel-inner .carousel-item > div {
    display: none;
  }
  .carousel-inner .carousel-item > div:first-child {
    display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
  display: -webkit-flex;
}

.carousel-inner {
  width: 80%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .vision-title-wrap{
    padding: 0 12%;
  }
  .vision-title-1{
    width: 100%;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .vision-title-2 a{
    padding: 1rem 2rem;
    font-size: 1.5rem;
  }

  .master-vision:first-child {
    display: flex;
    display: -webkit-flex;
  }

  /*甄選時程*/
  #schedule{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
  }
  
  #schedule img{
    width: 80%;
  }

  #schedule > div{
  width: 90%;
  }

  .tab-forms-block {
    flex-direction: row;
  }

  /*carousel*/
  .carousel-item button {
    max-width: 33.33%;
  }

  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(33.33%);
  }

  .carousel-inner .carousel-item-start.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-33.33%);
  }

  .form-block {
    padding: 5px;
    min-width: 50%;
  }

  .form-block:nth-child(2n + 1) {
    padding-left: 0;
  }

  .form-block:nth-child(2n) {
    padding-right: 0;
  }

  .link-area-block {
    width: 33.333%;
  }

  .link-area {
    width: 33.333%;
  }
}

@media screen and (min-width: 960px) and (orientation:landscape){
  header .navbar .nav-item .nav-link{
    padding: 0.5rem .9rem;
    font-weight: bold;
  }

  header .nav-item:hover a:after{
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    
    margin: auto;
    width: 50%;
    border: 1px solid var(--darkpink-color);
  }

  /*主視覺*/
  .key-vision{
    display: flex;
    display: -webkit-flex;
		flex-direction: row-reverse;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: flex-start;
  }

  .vision-wrap{
    flex: 1;
  }

  .vision-title-wrap{
    position: relative;
      top: 0;
    width: 43%;
    max-height: unset;

    padding: 0;
  }
  
  .title-flex{
    display: flex;
    display: -webkit-flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
    margin-top: 10%;
  }

  .vision-title-2 a{
    padding: .7rem 1.2rem;
    font-size: 1.3rem;
  }

  /*EYE*/
  .vr-wrap{
    display: block;
  }

  /*甄選時程*/
  #schedule img{
    width: 100%;
  }

  .sidebar .collapseContent,
  .sidebar .collapseLeft {
    display: block;
  }

  .sidebar .collapseRight,
  .sidebar .sidebar-list {
    display: none;
  }
    
  .sidebar.active .collapseContent,
  .sidebar.active .collapseLeft {
    display: none;
  }

  .sidebar.active .collapseRight,
  .sidebar.active .sidebar-list {
    display: block;
  }

} 

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
  transform: translateX(0);
}


/* ----------------------------------------------
 * Generated by Animista on 2022-1-20 17:18:18
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/* Animation-Scroll */
.zoom-in {
  position: relative;
  opacity: 0;
  -webkit-transition: 1s all ease;
          /*transform: scale(0) translateY(50%);*/
          transition: 1s all ease;
}

.zoom-in-10 { 
  -webkit-transform: scale(0) translateY(110%);
          transform: scale(0) translateY(110%);
}
.zoom-in-20 { 
  -webkit-transform: scale(0) translateY(120%);
          transform: scale(0) translateY(120%);
}
.zoom-in-30 { 
  -webkit-transform: scale(0) translateY(130%);
          transform: scale(0) translateY(130%);
}
.zoom-in-40 { 
  -webkit-transform: scale(0) translateY(140%);
          transform: scale(0) translateY(140%);
}
.zoom-in-50 { 
  -webkit-transform: scale(0) translateY(150%);
          transform: scale(0) translateY(150%);
}
.zoom-in-60 { 
  -webkit-transform: scale(0) translateY(160%);
          transform: scale(0) translateY(160%);
}
.zoom-in-70 { 
  -webkit-transform: scale(0) translateY(170%);
          transform: scale(0) translateY(170%);
}
.zoom-in-80 { 
  -webkit-transform: scale(0) translateY(180%);
  transform: scale(0) translateY(180%);
}
.zoom-in-90 { 
  -webkit-transform: scale(0) translateY(190%);
          transform: scale(0) translateY(190%);
}
.zoom-in.active {
  -webkit-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Animation-zoom-in */
@keyframes zoom-in {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.zoom-in-500 { 
  -webkit-animation: zoom-in 500ms; 
          animation: zoom-in 500ms;
}
.zoom-in-1000 { 
  -webkit-animation: zoom-in 1s; 
          animation: zoom-in 1s;
}
.zoom-in-1500 { 
  -webkit-animation: zoom-in 1.5s; 
          animation: zoom-in 1.5s;
}
.zoom-in-2000 { 
  -webkit-animation: zoom-in 2s; 
          animation: zoom-in 2s;
}

/* Animation-rotate */
@keyframes rotate {
  0% {
    -webkit-transform: scale(0) rotate(0deg);
    -webkit-animation-duration: 50ms;

    transform: scale(0) rotate(0deg);
    animation-duration: 50ms;
  }
  100% {
    -webkit-transform: scale(1) rotate(360deg);
    -webkit-animation-duration: 50ms;

    transform: scale(1) rotate(360deg);
    animation-duration: 50ms;
  }
}

.rotate-500 { -webkit-animation: rotate 500ms; animation: rotate 500ms;}
.rotate-1000 { -webkit-animation: rotate 500ms; animation: rotate 1s;}
.rotate-1500 { -webkit-animation: rotate 500ms; animation: rotate 1.5s;}
.rotate-2000 { -webkit-animation: rotate 500ms; animation: rotate 2s;}

/* Animation-float */
@keyframes float-x {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
            right: 90%;
            opacity: .9;
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
            right: 0%;
            opacity: 1;
  }
}

@keyframes float-x-2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(20%);
            transform: translateX(20%);
  }
}

@keyframes float-bevel {
  0% {
    -webkit-transform: translateY(1rem) translateX(1.8rem);
            transform: translateY(1rem) translateX(1.8rem);
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
  }
}

@keyframes float-y {
  0% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
  50% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
}

@keyframes shake-vertical {
  0%{
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  
  50%{
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  
  100%{
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
  }
}

@keyframes shadow{
  0%{
  -webkit-transform:scale(1,1);
          transform:scale(1,1);
  }

  50%{
  -webkit-transform:scale(2,2);
          transform:scale(2,2);
  }
  
  100%{
  -webkit-transform:scale(1,1);
          transform:scale(1,1);
  }
}

@keyframes lighting {
  0% {
    -webkit-filter: drop-shadow(0 0 8px rgba(255,255,255,1));
            filter: drop-shadow(0 0 8px rgba(255,255,255,1));
  }
  25% {
    -webkit-filter: drop-shadow(0 0 20px rgba(255,255,255,.2));
            filter: drop-shadow(0 0 20px rgba(255,255,255,.2));
  }
  75% {
    -webkit-filter: drop-shadow(0 0 8px rgba(255,255,255,1));
            filter: drop-shadow(0 0 8px rgba(255,255,255,1));
  }
  100% {
    -webkit-filter: drop-shadow(0 0 20px rgba(255,255,255,.2));
            filter: drop-shadow(0 0 20px rgba(255,255,255,.2));
  }
}

/* Animation-jump */
@keyframes jump{
  0%{
    top:40%;
  }
  20%{
    border-radius:2px;
  }
  50%{
    top:50%; 
    border-bottom-right-radius:25px;
  }
  80%{
    border-radius:2px;
  }
  100%{
    top:40%;
  }
}

/* Animation-slidein 從左到右 */
.slidein_left{
	position: relative;
	-webkit-animation-name: slidein_left;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode: ease-out;
  -webkit-animation-timing-function:ease-out;
  -webkit-transform: translate Y(-45px);
          animation-name: slidein_left;
          animation-duration: 1s;  
          animation-fill-mode: forwards;
	        animation-timing-function:ease-out;
          transform: translate Y(-45px);
}

@-webkit-keyframes slidein_left {
	from {left: -850px;}
	to {left: 0; }
	0%{opacity:0;}
	50%{opacity:0;}
	100%{opacity:1;}
}

@keyframes slidein_left {
	from {left: -850px;}
	to {left: 0px;}
	0%{opacity:0;}
	50%{opacity:0;}
	100%{opacity:1;}
}

/* Animation-bounce */
.bounce{
	-webkit-animation-name: bounce; 
	-webkit-animation-duration: 1s;
	
	animation-name: bounce;
	animation-duration: 1s;  
	animation-fill-mode: forwards;
}

@keyframes bounce {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
            transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
            transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes eye-move 
{
  0%   { left: .3rem; }
  100% { left: .7rem; }
}

/* ----------------------------------------------
 * 廣達共創營
* ---------------------------------------------- */
@keyframes camp{
  0%{
    transform:translateY(0px);
  }
  100%{
    transform:translateY(-8px);
  }
}
@-webkit-keyframes camp{
  0%{
    transform:translateY(0px);
  }
  100%{
    transform:translateY(-8px);
  }
}

@keyframes camp2 {
  0% {
    -webkit-box-shadow: 0px 0px 10px 1px rgba(252,252,252,1);
    box-shadow: 0px 0px 10px 1px rgba(252,252,252,1);
  }

  100% {
    -webkit-box-shadow: 0px 0px 10px 1px rgba(252,252,252,0.5);
            box-shadow: 0px 0px 10px 1px rgba(252,252,252,0.5);
  }
}

.newcamp {
          animation: camp 1s infinite alternate, camp2 5s infinite;
  -webkit-animation: camp 1s infinite alternate, camp2 5s infinite;
}

.campWrap{
  position: relative; 
}
.campWrap img,a{
  display: block;
}

.campWrap a{
  position: relative;
  font-size: 4px;
}

.campWrap img{
  width: 150px;
}

span.icon_red{
  background: #ea553a;
  border-radius: 1rem;
  color: #ffffff;
  font-size: 8px;
  font-weight: bold;
  padding: 1px 2px;
  position: absolute;
  top: 0;
  right: -10px;  
}