:root {
  --main-color: #000000;
  --main-lightblue: #46FAFF;
  --main-deepblue: #046286;
  --main-white: #ffffff;
  --main-orange: #FA582D; /*#FF5300*/
  --main-yellow: #ffec65;
  --act-b: #00D1FF;
  --act-c: #F39302;
  --hover: #ff8d00;
}

._color_main{
  color: var(--main-color);
}
._color_main-orange{
  color: var(--main-orange) !important;
}
._bg_black{
  position: relative;
  background-color: #000;
}
/*預載*/
#preload{
  display: none;
}
#preload *{
  width: 0;
  height: 0;
  display: block;
}
/*************************************/
header{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
  margin: 0 auto;
  z-index: 4;
  background-image: url('../images/bg_header.png');
  background-position:center;
  background-repeat: no-repeat;
  background-size: cover;
}
/***/
.icon_mouse_column{
  position: absolute;
  top: calc(100% - 40px);
  left: calc(50% - 62.5px);
  width: 26px;
  margin: 0 auto;
  z-index: 3;
}
.icon_mouse_column .mouse_body{
  position: absolute;
  z-index: 10;
  /*border: 2px solid #0E0147;*/ /*00E55C*/
  /*background-color: #0E0147;*/
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgODAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1MCA4MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6IzBFMDE0Nzt9DQo8L3N0eWxlPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTEyNSwwLjNjLTY0LjUsMC01NC44LDc5LjUtMTI1LDc5LjVoMTI1aDEyNUMxNzkuNyw3OS43LDE4OS40LDAuMywxMjUsMC4zeiIvPg0KPC9zdmc+DQo=');
  background-image: url('../images/mouse_body.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  width:125px;
  height:40px;
}
.icon_mouse_column .mouse_scroll{
  position: absolute;
  top:0px;
  left: calc(50% + 28px);
  z-index: 11;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiMwMEU1NUM7c3Ryb2tlLXdpZHRoOjM7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgY2xhc3M9InN0MCIgcG9pbnRzPSIxMC4xLDIyLjMgMjAsMjggMjkuOSwyMi4zICIvPg0KPGxpbmUgY2xhc3M9InN0MCIgeDE9IjIwIiB5MT0iMjgiIHgyPSIyMCIgeTI9IjguNyIvPg0KPC9zdmc+DQo=');
  background-image: url('../images/mouse_scroll.svg');
  width:40px;
  height:40px;
  border-radius: 50%;
  animation:mousescroll 2s infinite;
  -webkit-animation:mousescroll 2s infinite;
}
@keyframes mousescroll{
  0%{top:0px;}
  50%{top:6px;}
}
@-webkit-keyframes mousescroll{
  0%{top:0px;}
  50%{top:6px;}
}
/***/
header nav{
  position: relative;
  position: fixed;
  display: block;
  width: 100%;
  padding: 2em 4% 0 4%;
  background-color: #00000000;
  color: #ffffff;
  margin: 0 auto;
  top: 0;
  z-index: 9;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}
header nav .column{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: block;
  z-index:1;
  transition: height 0.3s ease;
  -webkit-transition: height 0.3s ease;
}
header nav .column .column_logo {
  float: left;
  margin-top: -15px;
}
header nav .column .column_logo .box{
  display: inline-block;
  height: 38px;
  padding:0 1em;
}
header nav .column .column_logo .box.first{
  padding-left: 0;
}
header nav .column .column_logo .box:last-child{
  border-right: none;
}
header nav .column .column_logo .box img{
  height: 70px;
}
header nav .column .column_logo .box img.to{
  height: 26px;
}
header nav .column .column_logo .box img.intel{
  height: 66px;
}
header nav .column .column_logo_formobilemenu{
  display: none;
  text-align: center;
  padding: 3em 10px 1em 10px;
}
header nav .column .column_logo_formobilemenu .box{
  display: inline-block;
  border-right: 1px solid rgba(255,255,255,0.7);
  height: 38px;
  padding:0 10px;
  margin: 0 auto 1em auto;
}
header nav .column .column_logo_formobilemenu .box:last-child{
  border-right: none;
}
header nav .column .column_logo_formobilemenu .box img{
  width: 100%;
  max-width: 150px;
}
/***/
header nav .column .column_menu{
  float: right;
  height: 100%;
  margin: 0;
  font-weight: 400;
}
header nav .column .column_menu ul{
  list-style: none;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  font-weight: 400;
  letter-spacing: -4px;
  font-size: 0.9em;
}
header nav .column .column_menu ul li{
  cursor: pointer;
  letter-spacing: 0.1em;
}
header nav .column .column_menu ul li.menu{
  display: inline-block;
  font-weight: 400;
  line-height: 20px;
  padding: 0 16px;
  /*border-right: 1px solid #ffffff;*/
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
}
header nav .column .column_menu ul li.menu:hover{
  color: var(--hover);
}
header nav .column .column_menu ul li.menu.last{
  border-right: none;
}
header nav .column .column_menu ul li.button{
  display: inline-block;
  line-height: 40px;
  letter-spacing: 0.1em;
  padding: 0 30px 0 20px;
  background-color: var(--main-orange);
  border-radius: 5px;
  color: #fff;
  background-image: url('../images/icon_cta.svg');
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) 13px;
  transition: background-color 0.3s ease;
  -webkit-transition: background-color 0.3s ease;
}
header nav .column .column_menu ul li.button:hover{
  background-color: var(--hover);
  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.15);
}
header nav .column .column_menu ul li._mobilemenu{
  display: none;
}
header nav .column .column_menu ul li._mobilemenu.lebel{
  font-size: 0.8em;
  color: #999;
}
/***/
header .kvtitle{
  width: 100%;
  margin: 0 auto;
  padding: 10% 0;
  z-index: 4;
}
header .kvtitle .column{
  position: relative;
  z-index: 4;
  text-align: center;
}
/***/
header .kvtitle .column .column_logo {
 display: none;
 text-align: center;
 margin: 0 0 2em 0;
}
header .kvtitle .column .column_logo .box{
  display: inline-block;
  height: fit-content;
  height: -moz-fit-content;
  line-height: 0;
  margin: 0 0.5em;
}
header .kvtitle .column .column_logo .box:first-child{
  padding-left: 0;
}
header .kvtitle .column .column_logo .box:last-child{
  border-right: none;
  padding-right: 0;
}
header .kvtitle .column .column_logo .box img{
  height: 60px;
  width: 100%;
  max-width: 160px;
}
/***/
header .kvtitle .column .kv_title_small{
  margin: 0 auto;
  margin-bottom: 0.5em;
  width: calc(100% - 30px);
  font-weight: 700;
  font-size: 2em;
  /*filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4)); */
}
header .kvtitle .column .kv_title h1{
  margin: 0 auto;
  margin-bottom: 0.5em;
  width: calc(100% - 30px);
  font-weight: 800;
  font-size: 4em;
  line-height: 1.25em;
}
header .kvtitle .column .kv_info{
  margin: 0 auto;
  margin-bottom: 0.75em;
  width: calc(100% - 30px);
  font-weight: 600;
  font-size: 1.8em;
  color: #FEFFD3;
}
header .kvtitle .column .kv_label{
  margin: 0 auto;
  width: calc(100% - 30px);
}
header .kvtitle .column .kv_label .box{
  display: inline-block;
  border-radius: 0.3em;
  border: 1px solid #ffffff;
  padding: 0.2em 0.5em 0.25em 0.5em;
  font-weight: 400;
  font-size: 1em;
  margin: 0 0.25em 0.65em 0.25em;
}
/*************************************/
article{
  position: relative;
  clear: both;
  width: 100%;
  padding: 0 8%;
  z-index: 3;
  overflow: hidden;
}
section{
  clear: both;
  display: block;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
/*************************************/
section h2.title{
  position: relative;
  z-index: 3;
  width: fit-content;
  width: -moz-fit-content;
  margin: 1.5em auto;
  padding-bottom: 0.3em;
  display: block;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-align: center;
  font-weight: 400;
  font-size: 1.8em;
  color: var(--main-white);
}
section h2.title.small{
  position: relative;
  font-size: 1.5em;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
section h2.title span{
  position: relative;
  z-index: 3;
  display: block;
  color: #ffffff;
  padding: 0 0.3em;
}
section h2.title::before{
  content: "";
  position: absolute;
  left: 0%;
  top: 50%;
  z-index: 1;
  width: 85%;
  height: 0.8em;
  background-color: #e500d666;
  background: linear-gradient(-90deg, #04708c66, #e500d666);
  transform: skewX(-21deg);
}
section h2.title::after{
  /*content: "";*/
  position: absolute;
  left: 84%;
  top: calc(100% - 0.19em);
  z-index: 1;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50px;
  border: 0.1em solid #00E55C;
}
section h2.title span.line{
  position: absolute;
  right: 0%;
  top: 50%;
  z-index: 1;
  width: calc(15% - 0.38em);
  height: 0.8em;
  background-color: #e500d666;
  transform: skewX(-21deg);
}
section .infotext{
  position: relative;
  text-align: justify;
  /*word-break: break-all;*/
  width: 100%;
  font-size: 0.9em;
  line-height: 1.8em;
  font-weight: 300;
}
/*************************************/
article .bg_area_1{
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  left: 0;
  bottom: 0;
  opacity: 1;
  background-color: #0E0147;
  /*background: linear-gradient(to bottom, #0E0147 43%, #0E0147 100%);*/
}
article .bg_area_1b{
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  left: 0;
  bottom: 0;
  opacity: 1;
}
section.area_1{
  position: relative;
  width: 100%;
  max-width: 1030px;
  margin: 3em auto 2em auto;
  z-index: 3;
}
/*************************************/
/*************************************/
.column_points{
  position: relative;
  margin: 3em auto 1em auto;
  text-align: center;
  z-index: 3;
  display: block;
  max-width: 1300px;
}
.column_points h2.title{

}
.column_points h2.title span.en{
  position: relative;
  top: 0.125em;
  font-family: "Rubik", sans-serif;
  font-size: 1.6em;
  font-weight: bold;
  color: #ffa29d;
}
.column_points .box{
  display: inline-block;
  margin: 0 0px 1.5em 0px;
  padding: 0px 40px;
  width: calc(32% - 6px);
  max-width: 380px;
  vertical-align: top;
}
.column_points .box .border{
  position: relative;
  width: 100%;
  padding: 25px 0px 30px 0px;
}
.column_points .box .border .border_{
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1px solid #98e0ff63;
  display: none;
}

.column_points .box .border .morphing_circle {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 240px;
  margin: auto;
  /*background-color: #21d4fd;*/
  /*background-image: linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);*/
  /*border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;*/
  background-image: url("../images/icon_points_bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  opacity: 0.55;
  z-index: -1;
}
.column_points .box .border .morphing_circle2{
  background-image: url("../images/icon_points_bg2.png");
}
.column_points .box .border .border_.lt{
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}
.column_points .box .border .border_.rt{
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}
.column_points .box .border .border_.lb{
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}
.column_points .box .border .border_.rb{
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}
.column_points .box .title{
  font-size: 0.9em;
  font-weight: bold;
}
.column_points .box .title .title1{
  display: block;
  font-weight: 400;
  font-size: 1.2em;
  margin-bottom: 0.6em;
  min-height: 3em;
}
.column_points .box .title .title2{
  display: block;
  font-weight: 300;
  text-align: left;
}
.column_points .box .icon{
  position: relative;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  transition: all 0.5s linear; -webkit-transition: all 0.5s linear;
}
.column_points .box .icon .pic{
  position: absolute;
  display: block;
  top: -10px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 62%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}
.column_points .box .icon .icon1{
  background-image: url(../images/icon_points_1.png);
}
.column_points .box .icon .icon2{
  background-image: url(../images/icon_points_2.png);
}
.column_points .box .icon .icon3{
  background-image: url(../images/icon_points_3.png);
}

.column_points .box .icon .icon_in {
  text-align: center;
  background-size: 500%;
  border-radius: 50%;
}
.column_points .box .icon .icon_in {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  margin: 0px 0 10px 0;
  display: block;
  z-index: -1;
  filter: blur(8px);
  opacity: 1;
}
/***/
.subject_list{
  /*text-align: center;*/
  width: 100%;
  display: block;
  margin: 1em auto 2em auto;
  font-size: 1.1em;
}
.subject_list div{
  margin-bottom: 1em;
}
/***/
.subject_list .box{
  display: block;
  width: 100%;
  position: relative;
  /*padding-left: 2em;*/
}
/* HTML: <div class="triangle"></div> */
.subject_list .box__after {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0.5em;
  width: 1em;
  height: 1em;
  background-image: url('../images/icon_right_arrow.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
/*************************************/
article .bg_area_2{
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  left: 0;
  bottom: 0;
  opacity: 1;
  background-image: url("../images/bg_area2.jpg");
  background-size: 100% auto;
  background-position:top center;
  background-repeat: repeat-y;
  /*filter: blur(2px);*/
}
article .bg_area_2::after{
  content: "";
  position: absolute;
  bottom: -1px;
  right: 0;
  width: 110%;
  height: 2em;
  background-color: #F7F7F7;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
section.area_2{
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 3em auto 5em auto;
  z-index: 2;
}
/***/
.grid2{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2,1fr);
}
.column_agenda{
  width: 100%;
  margin: 2em auto 0 auto;
  display: block;
  padding: 0;
  font-size: 0.9em;
  /*background-color: #ffffff;
  color: #000000;*/
}
.column_agenda.trackB{
  display: none;
}
.column_agenda .sn{
  background-color: #0a97b6;
  font-weight: 600;
  text-align: center;
  color: #ffffff;
  padding: 0.35em 0.5em 0.35em 110px;
}
.column_agenda .box_sn{
  width: 100%;
  margin-bottom: 5px;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  gap: 5px;
  color: #0E0147;
  font-size: 1em;
  font-weight: 600;
  /*background: linear-gradient(to right,  #39DAFF 30%, #00E55C 100%);*/
}
.column_agenda .box_sn .time{
  -webkit-flex: initial;
          flex: initial;
  width: 160px;
  min-width: 100px;
  padding: 0.25em;
}
.column_agenda .box_sn .info{
  -webkit-flex: 1;
          flex: 1;
  padding: 0.25em;
  text-align: center;
}
.column_agenda .box_sn .info.info_a{
  background-color: #39DAFF;
}
.column_agenda .box_sn .info.info_b{
  background-color: #00E55C;
}
.column_agenda .box_sn .info span{
  background-color: #0e0147;
  color: #ffffff;
  padding: 0 5px;
  display: inline-block;
  border-radius: 5px;
  margin-right: 10px;
}
/***/
.column_agenda .box{
  width: 100%;
  margin-bottom: 5px;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  gap: 5px;
}
.column_agenda .box._nomargin{
  margin: 0;
}
.column_agenda .box .time{
  width: 110px;
  min-width: 80px;
  /*color: #ea8001;*/
  color: #ffcf95;
  background-color: #ffffff10;
  padding: 0.5em;
  text-align: center;
  font-weight: 400;
  font-size: 0.82em;
  display: -webkit-flex;
  display:         flex;
  /*flex-direction: column;*/
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.column_agenda .box .time .dash{
  padding: 0 0.1em;
}
.column_agenda .box .time._nopadding{
  padding: 0;
}
.column_agenda .box:nth-child(even) .time{
  /*color: #de9578;*/
}
.column_agenda .box .time span{
  display: inline-block;
}
.column_agenda .box .time.time_b{
  display: none;
}
.column_agenda .box .info{
  -webkit-flex: 1;
          flex: 1;
  padding: 0.5em;
  background-color: #ffffff10;
  /*background-color: #2117172b;*/
}
.column_agenda .box .info._nopadding{
  padding: 0;
}
.column_agenda .box .info .column2{
  display: grid;
  gap: 0px;
  grid-template-columns: repeat(2,1fr);
}
.column_agenda .box .info .column3{
  display: grid;
  gap: 0px;
  grid-template-columns: repeat(3,1fr);
}
/***/
.column_agenda .box .info ._room_subject{
  text-align: center;
  color: #000;
  background-color: #f2f2f2;
  font-weight: 500;
  padding: 0.5em 0.25em;
  font-size: 0.9em;
}
.column_agenda .box .info ._room_subject._A{
  background-color: #ffeefcdd;
  color: #a7002eff;
}
.column_agenda .box .info ._room_subject._B{
  background-color: #ffc4eddd;
  color: #a7002eff;
}
.column_agenda .box .info ._room_subject._C{
  background-color: #f2d3e3dd;
  color: #a7002eff;
}
.column_agenda .box .info ._room_subject._1{
  background-color: #d7eeffdd;
  color: #051c68ff;
}
.column_agenda .box .info ._room_subject._2{
  background-color: #b3dfffdd;
  color: #051c68ff;
}
/***/
.column_agenda .box .info ._room{
  /*background-color: #07042745;*/
  /*background-color: #ffffff1a;*/
  padding: 0.5em 0.5em;
}
.column_agenda .box .info ._room:last-child{
  margin-bottom: 0;
}
.column_agenda .box .info ._room .title{
  color: #000000;
}
.column_agenda .box .info.info_a{
  background-color: #ffffff18;
}
.column_agenda .box.breaktime .time,
.column_agenda .box.breaktime .info{
  background-color: #ffffff00 !important;
  padding: 0.2em 0.5em;
}
.column_agenda .box.breaktime .info{
  /*color: #ffffff99;*/
}
.column_agenda .box .info .label{
  font-size: 0.8em;
  display: none;
}
.column_agenda .box .info ._room._A{
  /*border-left: 6px solid #ffeefc;*/
  background-color: #ffeefc;
}
.column_agenda .box .info ._room._B{
  /*border-left: 6px solid #ffc4ed;*/
  background-color: #ffc4ed;
}
.column_agenda .box .info ._room._C{
  /*border-left: 6px solid #f2d3e3;*/
  background-color: #f2d3e3;
}
.column_agenda .box .info ._room._1{
  /*border-left: 6px solid #d7eeff;*/
  background-color: #d7eeff;
}
.column_agenda .box .info ._room._2{
  /*border-left: 6px solid #b3dfff;*/
  background-color: #b3dfff;
}
.column_agenda .box .info ._room .label::before{
  padding: 0 0.25em;
  margin-left: -0.25em;
  color: #a7002eb0;
  font-weight: 500;
  width: calc(100% - 0.5em);
  display: block;
}
.column_agenda .box .info ._room._1 .label::before,
.column_agenda .box .info ._room._2 .label::before{
  color: #051c68b0;
}
.column_agenda .box .info ._room._A .label::before{
  /*content: "教室 A - 製程管理與能源優化";*/
  content: "教室 A";
}
.column_agenda .box .info ._room._B .label::before{
  /*content: "教室 B - 數位創新 OEM 機械更智慧";*/
  content: "教室 B";
}
.column_agenda .box .info ._room._C .label::before{
  /*content: "教室 C - 分析關鍵數據拉升營運效率";*/
  content: "教室 C";
}
.column_agenda .box .info ._room._1 .label::before{
  content: "實作教室 1 (名額有限)";
}
.column_agenda .box .info ._room._2 .label::before{
  content: "實作教室 2 (名額有限)";
}
.column_agenda .box .info .title{
  font-size: 0.9em;
  font-weight: 500;
}
.column_agenda .box .info .title .column{
  display: inline-block;
  vertical-align: top;
}
.column_agenda .box .info .lecturer{
  margin-top: 5px;
  font-size: 0.78em;
}
.column_agenda .box .info .lecturer .column{
  display: inline-block;
  vertical-align: top;
}
.column_agenda .box .info .lecturer .jobtitle{
  color: #4d4162;
  font-weight: 400;
}
.column_agenda .box .info .lecturer .name{
  /*font-style: italic;*/
}
/***/

/*************************************/
section.area_3{
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 3em auto 3em auto;
  z-index: 2;
}
/***/
.column_lecturer{
  width: 100%;
  margin: 0 auto;
  display: grid;
  gap: 40px 20px;
  grid-template-columns: repeat(4,1fr);
}
/***/
.box_lecturer{
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: center;
}
.box_lecturer .column_pic{
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 0.5em;
}
.box_lecturer .column_pic .pic{
  position: relative;
  width: 160px;
  height: 160px;
  padding: 0;
  display: block;
  background-image: url("../images/bg_lecturer_pic.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto;
}
.box_lecturer .column_pic .pic .photo{
  position: relative;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background-color: transparent;
  border-radius: 50%;
  border: 0px solid #74c8ee;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.box_lecturer .column_pic .pic .photo.pic1{background-image: url("../images/lecturer1.jpg");}
.box_lecturer .column_pic .pic .photo.pic2{background-image: url("../images/lecturer2.jpg");}
.box_lecturer .column_pic .pic .photo.pic3{background-image: url("../images/lecturer3.jpg");}
.box_lecturer .column_pic .pic .photo.pic4{background-image: url("../images/lecturer4.jpg");}
.box_lecturer .column_pic .pic .photo.pic5{background-image: url("../images/lecturer5.jpg");}
.box_lecturer .column_pic .pic .photo.pic6{background-image: url("../images/lecturer6.jpg");}
.box_lecturer .column_pic .pic .photo.pic7{background-image: url("../images/lecturer7.jpg");}
.box_lecturer .column_pic .pic .photo.pic8{background-image: url("../images/lecturer8.jpg");}
.box_lecturer .column_pic .pic .photo.pic9{background-image: url("../images/lecturer9.jpg");}
.box_lecturer .column_pic .pic .photo.pic10{background-image: url("../images/lecturer10.jpg");}
.box_lecturer .column_pic .pic .photo.pic11{background-image: url("../images/lecturer11.jpg");}
.box_lecturer .column_pic .pic .photo.pic12{background-image: url("../images/lecturer12.jpg");}
.box_lecturer .column_pic .pic .photo.pic13{background-image: url("../images/lecturer13.jpg");}
.box_lecturer .column_pic .pic .photo.pic14{background-image: url("../images/lecturer14.jpg");}
.box_lecturer .column_pic .pic .photo.pic15{background-image: url("../images/lecturer15.jpg");}
.box_lecturer .column_pic .pic .photo.pic16{background-image: url("../images/lecturer16.jpg");}
.box_lecturer .column_pic .pic .photo.pic17{background-image: url("../images/lecturer17.jpg");}
.box_lecturer .column_pic .pic .photo.pic18{background-image: url("../images/lecturer18.jpg");}
.box_lecturer .column_pic .pic .photo.pic19{background-image: url("../images/lecturer19.jpg");}
.box_lecturer .column_pic .pic .photo.pic20{background-image: url("../images/lecturer20.jpg");}
.box_lecturer .column_pic .pic .photo.pic21{background-image: url("../images/lecturer21.jpg");}
.box_lecturer .column_pic .pic .photo.pic22{background-image: url("../images/lecturer22.jpg");}
.box_lecturer .column_pic .pic .photo.pic23{background-image: url("../images/lecturer23.jpg");}
/***/
.box_lecturer .column_info{
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  margin-bottom: 1.2em;
}
.box_lecturer .column_info .ch{
  width: 100%;
  text-align: center;
  vertical-align: top;
}
.box_lecturer .column_info .en{
  width: 100%;
  text-align: left;
  font-family: 'Oswald', cursive;
  color: var(--main-yellow);
  white-space: nowrap;
  vertical-align: top;
}
.box_lecturer .column_info .ch .jobtitle,
.box_lecturer .column_info .en .jobtitle{
  font-size: 0.82em;
  color: #a7f7ff;
}
.box_lecturer .column_info .ch .jobtitle{
  position: relative;
  top: 1px;
}
/*************************************/
/*************************************/
/*活動好禮*/
article .bg_gift{
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  left: 0;
  bottom: 0;
  background-image: url("../images/bg_gift.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*filter: blur(2px);*/
}
article.gift{
  position: relative;
  display: block;
  background-color: #F6F6F6;
  padding-bottom: 2em;
}
article.gift .bg_gift{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
article.gift .bg_gift img{
  width: 100%;
  height: 100%;
}
article.gift section{
  position: relative;
  z-index: 3;
  padding-top: 2em;
}
article.gift section h2.title.small{
  color: #222;
}
article.gift section h2.title span{
  position: relative;
  z-index: 3;
  color: #222;
}
article.gift section h2.title::before{
  display: none;
  content: "";
  position: absolute;
  left: -3%;
  bottom: 0;
  z-index: 1;
  width: 106%;
  height: 0.8em;
  background-color: #FFE60044;
  transform: skewX(-45deg);
}
article.gift section h2.title::after{
  display: none;
  content: "";
  position: absolute;
  left: 0%;
  bottom: -2px;
  z-index: 2;
  width: 90px;
  height: 5px;
  background-color: #46FAFF88;
  transform: skewX(-45deg);
}
article.gift p.infotext{
  color: #000;
  text-align: center;
}
article.gift p.infotext b{
  font-weight: 500;
  background: linear-gradient(transparent 70%, #FFE60044 0);
}
article.gift div.infotext{
  color: #000;
  text-align: left;
  line-height: 1em;
}
article.gift div.infotext ol{
  font-size: 0.8em;
}
.note_column{
  width: 100%;
  max-width: 656px;
  margin: 0 auto;
  padding: 10px;
  font-size: 0.9em;
  margin-top: 2em;
  color: #000000;
}
.note_column .title{
  font-size: 1em;
  font-weight: 500;
  margin-top: 10px;
  width: fit-content;
  width: -moz-fit-content;
}
.note_column ul.infotext{
  line-height: 1.3em;
  padding-left: 2em;
}
.note_column ul.infotext li{
  margin-bottom: 6px;
}
/***/
.column_gift{
  width: 100%;
  max-width: 1200px;
  margin:  auto;
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3,1fr);
  margin-bottom: 40px;
  margin-top: 2em;
}
.column_gift.column_gift2{
  width: 96%;
  max-width: 720px;
  grid-template-columns: repeat(2,1fr);
}
.column_gift .box{
  width: 100%;
  display: block;
  text-align: center;
  vertical-align: top;
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  max-width: 330px;
  margin: 0 auto;
  border-radius: 10px;
}
.column_gift .box .pic_border{
  position: relative;
  display: block;
}
.column_gift .box .pic_border .pic{
  position: relative;
  width: 100%;
  padding-bottom: 90%;
  background-color: #ffffff;
  background-position: center;
  background-size: cover;
}
.column_gift .box .pic_border .pic.pic1{
  background-image: url("../images/gift1.jpg");
}
.column_gift .box .pic_border .pic.pic2{
  background-image: url("../images/gift2.jpg");
}
.column_gift .box .pic_border .pic.pic3{
  background-image: url("../images/gift3.jpg");
}
.column_gift .box .pic_border .label{
  position: absolute;
  right: -20px;
  bottom: 0px;
  border-radius: 50%;
  background-color: #ff205e; /*var(--light-blue);*/
  width: 76px;
  height: 76px;
  text-align: center;
  vertical-align: middle;
  font-size: 0.82em;
  line-height: 1em;
  letter-spacing: 0;
  color: #fff;
  box-shadow: 2px 2px 2px #00000022;
  display: -webkit-flex;
  display:         flex;
  /*flex-direction: column;*/
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.column_gift .box .pic_border .label .number{
  position: relative;
  font-size: 1.2rem;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
}
.column_gift .box .type{
  position: relative;
  display: block;
  padding: 0.25em;
  font-weight: 500;
  margin-bottom: 10px;
  font-size: 1em;
  color: #ffffff;
  background: linear-gradient(135deg, #8b2583 0%, #550e8d 100%);
  z-index: 2;
  border-radius: 5px;
}
.column_gift .box .title{
  font-weight: 400;
  font-size: 0.82em;
  line-height: 24px;
  color: #222;
  text-align: center;
  width: fit-content;
  width: -moz-fit-content;
  margin: 10px auto;
  display: block;
}
.column_gift .box .desc{
  font-weight: 300;
  text-align: center;
  padding-bottom: 10px;
}
.column_hr_gift{
  position: relative;
  width: 100%;
  display: block;
  border-bottom: 1px dashed rgba(255,255,255,0.33);
  margin: 40px 0 60px 0;
}
.column_hr_gift .text{
  position: absolute;
  text-align: center;
  background-color: var(--main-color);
  color: var(--main-yellow);
  width: 190px;
  height: 40px;
  font-weight: 500;
  font-size: 1.5em;
  line-height: 40px;
  top: -22px;
  left: calc(50% - 95px);
  z-index: 1;
}
.area_gift h2.desc{
  text-align: center;
  color: #ffffff;
  font-weight: 300;
  font-size: 1.5em;
  line-height: 36px;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.area_gift h2.desc span.cube{
  position: relative;
  top: -2px;
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background-color: #ffffff;
  color: var(--main-color);
  vertical-align: middle;
  line-height: 19px;
  font-size: 1.2em;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0;
}
.area_gift .info_desc{
  background-color: #ffffff;
  border-radius: 3px;
  padding: 20px;
  margin: 0 auto 40px auto;
  max-width: 1200px;
  height: 350px;
  overflow-y: auto;
}
.area_gift .info_desc h3{
  text-align: center;
  font-weight: 500;
}
.area_gift .info_desc li{
  margin-bottom: 10px;
}
.info_desc ul{
  margin: 0;
  padding: 0 10px 0 24px;
}
.info_desc ul ul{
  margin: 0;
  padding: 0 10px 0 22px;
}
.info_desc ol li ul{
  margin: 0;
  padding: 0 10px 0 25px;
}
.info_desc ol li ul.disc{
  list-style: disc;
}
/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*單位*/
article.area_5{
  padding: 0 2%;
  background: linear-gradient(to bottom,  #0D0040 0%,#0A0029 100%);
}
.unit{
  display: block;
  text-align: center;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background-color: #ffffff;
}
.unit.first{
  border-radius: 0.25em 0.25em 0 0;
}
.unit.last{
  border-radius: 0 0 0.25em 0.25em;
}
.unit .box{
  display: inline-block;
  margin: 0 auto;
  padding-top: 20px;
  vertical-align: top;
  letter-spacing: -4px;
  width: 100%;
  padding: 0 1em;
}
.unit .box .title{
  width: 100%;
  font-weight: 400;
  font-size: 0.8em;
  line-height: 36px;
  text-align: center;
  letter-spacing: 0.08em;
  margin: 0 0 35px 0;
  letter-spacing: 0.2em;
  color: #000000;
  border-top: 1px solid #ccc;
  padding-top: 1em;
}
.unit.first .box .title{
  border-top: none;
}
.unit .box img{
  display: inline-block;
  height: 36px;
  max-width: 100%;
  padding: 0 20px;
  margin-bottom: 2em;
}
.unit .box img._x15{
  height: 40px;
}
.unit .box img._x18{
  height: 45px;
}
.unit .box img._x20{
  height: 66px;
}
.unit .box img:last-child{
  border: none;
}
/*************************************/
section.area_6{
  position: relative;
  width: 100%;
  max-width: 1240px;
  z-index: 2;
  margin: 3em auto 0 auto;
}
/*************************************/
html {
  margin: 0;
  padding: 0;
  font-size: 1.3em;
  font-weight: 300;
  font-family: 'Noto Sans TC','Microsoft JhengHei','Arial';
  letter-spacing: 0.05em;
  overflow-x: hidden;
  width: 100%;
}
body{
  overflow: hidden;
  /*position: relative;*/
  width: 100%;
  max-width: 2560px;
  margin: 0 auto;
  padding: 0;
  color: #ffffff;
  cursor: default !important;
  background-color: #0E0147;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a * {
  cursor: inherit;
  text-decoration: none;
}
*{
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
}
noscript{
  width: 100%;
  display: block;
  padding: 20px;
  text-align: center;
  color: #c00;
}
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0
}
button:disabled {
  cursor: auto
}
button * {
  pointer-events: none
}
fieldset {
  border: none;
  margin: 0;
  padding: 0
}
img {
  vertical-align: middle
}
/*************************************/
/*************************************/
footer {
  position: relative;
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 10px;
  z-index: 3;
  background-color: #0A0029;
}
footer .container{
  display: block;
  width: 100%;
  padding: 20px 00px;
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0px;
  transform: scale(1);
}
footer .container span.copyright{
  display: inline-block;
  margin: 0 20px;
}
footer .container ul{
  display: inline-block;
  margin: 0;
  padding: 0 20px;
  list-style: none;
}
footer .container ul li{
  display: inline-block;
}
footer .container ul li:not(:last-child):after {
  content: "|";
  margin-left: .5em;
  margin-right: .5em
}
footer .container ul li a:hover{
  text-decoration: underline;
}
/*************************************/
.err{
  display: inline-block;
  font-size: 0.8em;
  color: #00efff; /*#ffaeae*/
  margin: 0 0 0 10px;
}
.err_info{
  display: none;
  width: 100%;
  text-align: center;
  font-size: 0.8em;
  padding: 0 0.5em;
  color: #00efff;
}
.err_info_apimsg{
  width: 100%;
  text-align: center;
  font-size: 0.9em;
  padding: 0 0.5em;
  font-weight: 300;
  color: #00efff;
}
/*************************************/
/**彈出活動框 **/
.float_column_active{
  display: none;
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 99;
  transform: scale(0);
}
.float_column_open{
  animation: effect_float_column_open 0.3s 1 alternate forwards;
  -webkit-animation: effect_float_column_open 0.3s 1 alternate forwards;
}
.float_column_active .active_window{
  line-height: 20pt;
  position: relative;
  display: inline-block;
  -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.6); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.6); box-shadow: 0 1px 5px rgba(0,0,0,0.6);
  background: #fff;
  padding:36px 20px;
  width: 80%;
  max-width: 660px;
  max-height: 600px;
  overflow: auto;
}
@-webkit-keyframes effect_float_column_open {
  0%{transform: scale(0);}
  100%{transform: scale(1);}
}
@keyframes effect_float_column_open {
  0%{transform: scale(0);}
  100%{transform: scale(1);}
}
.float_column_active .button_reset{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: 3px solid #fff;
  border-radius:50%;
  background: url('../images/icon_reset.svg') #999;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: transform 0.3s; -webkit-transition: transform 0.3s;
  z-index: 9
}
.float_column_active .button_reset:hover{
  transform: rotate(0.5turn);
}
.float_column_active .button_close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius:50%;
  background-image: url('../images/icon_close.svg');
  cursor: pointer;
  transition: transform 0.3s; -webkit-transition: transform 0.3s;
  z-index: 9
}
.float_column_active .button_close:hover{
  transform: rotate(0.5turn);
}
.float_column_active .active_window .info{
  width: 100%;
  text-align: left;
  color: #222;
  word-break: break-all;
}
.float_column_active .active_window .info h3{
  font-weight: bold;
  font-size: 1.5em;
  line-height: 115%;
  text-align: center;
  letter-spacing: 0.035em;
  margin: 20px auto 20px auto;
  color: var(--main-orange);
}
.float_column_active .active_window .info .button_confirm{
  display: block;
  margin: 0 auto;
}
.float_column_active .active_window .info .button_confirm a{
  display: block;
  text-decoration: none;
}
.float_column_active .active_window .info .button_confirm span{
  display: block;
  font-weight: 500;
  font-size: 1em;
  line-height: 50px;
  text-align: center;
  color: #FFFFFF;
  height: 50px;
  width: 100%;
  max-width: 200px;
  background-color: var(--main-orange);
  cursor: pointer;
  transition: all 0.3s; -webkit-transition: all 0.3s;
  border-radius: 5px;
  margin: 10px auto;
}
.float_column_active .active_window .info .button_confirm span:hover{
  background-color: var(--hover);
  text-decoration: unset;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.55); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.55); box-shadow: 0 1px 5px rgba(0,0,0,0.55);
}
.float_column_active .active_window .info ul{
  margin-top: 2em;
  padding: 0 0 0 1em;
}
.float_column_active .active_window .info li{
  margin-bottom: 0.3em;
}
/*******************************************/
#mask{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  transition:background-color 2s;
  -webkit-transition: background-color 2s;
  background-color: rgba(0, 0, 0, 0.66);
  /*background-image: url('../images/loading_black.gif');*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50px;
}
#maskheader{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  transition:background-color 2s;
  -webkit-transition: background-color 2s;
  background-color: rgba(0, 0, 0, 0.22);
}
#masksubmit{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 11;
  transition:background-color 2s;
  -webkit-transition: background-color 2s;
  background-color: rgba(0, 0, 0, 0.66);
  background-image: url('../images/loading_black.gif');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50px;
}
#storemask{
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  transition:background-color 2s;
  -webkit-transition: background-color 2s;
  background-color: rgba(0, 0, 0, 0.9);
}
/*******************************************/
/*******************************************/
.flow_button{
  position: fixed;
  left: 0;
  bottom: -60px;
  width: 100%;
  padding: 0 10px;
  color: #fff;
  background-color: #111;
  text-align: center;
  font-weight: 400;
  font-size: 1em;
  align-items: center;
  text-align: center;
  height: 60px;
  cursor: pointer;
  z-index: 9;
  transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;
  -webkit-box-shadow: 0 0px 5px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 0px 5px rgba(0,0,0,0.4);
  box-shadow: 0 0px 5px rgba(0,0,0,0.4);
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.flow_button a{
  width: 100%;
  height: 100%;
  display: block;
}
.flow_button .desc{
  font-size: 0.8em;
  margin: 0 8px 0 0;
}
.flow_button .CTA_m{
  display: inline-block;
  font-size: 0.9em;
  padding: 6px 10px;
  border-radius: 5px;
  text-align: center;
  background-color: var(--main-orange);
  transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;
  white-space: nowrap;
}
.flow_button .CTA_m img{
  height: 12px;
  position: relative;
  top: -1.5px;
  margin: 0 0 0 2px;
}
.flow_button:hover{
  background-color: #080812;
}
.flow_button:hover .CTA_m{
  background-color: var(--hover);
  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.15);
}
/*******************************************/
._float_right{
  float: right;
}
._float_left{
  float: left;
}
._br{
  display: block;
}
._center{
  text-align: center !important;
}
._mb5{
  margin-bottom: 5px;
}
._mb10{
  margin-bottom: 10px;
}
._mb15{
  margin-bottom: 15px;
}
._mb20{
  margin-bottom: 20px;
}
._color_orange{
  color: var(--main-orange);
}
._color_yellow{
  color: var(--main-yellow);
}
._font_bold{
  font-weight: bold;
}
._displaynone{
  display: none;
}
._displaymobile{
  display: none;
}
._displayblock{
  display: block;
}
._inlineblock{
  display: inline-block;
}
._rotate180{
 transform: rotate(2turn);
}
._opacity0{
  opacity: 0;
}
._text_light{
  background: linear-gradient(transparent 55%, #fff1707d 0);
}
a._link {
  color: #1967D2;
  border-bottom: 1px dashed #1967D2;
  text-decoration: none;
}
a._link:hover{
  text-decoration: none;
}
._bg_agenda_orange{
  background-color: #fef4f0a6;
}
._maxw1100{max-width: 1100px !important; margin: 0 auto;}
/*************************************/
/*************************************/
/*************************************/
input {
  border-radius: 0;
  border: none;
  font-size: 1em;
  line-height: normal;
  outline: none;
  font-family: 'Noto Sans TC','Microsoft JhengHei','Arial';
}

input[type=date],
input[type=email],
input[type=search],
input[type=tel],
input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #222;
  background-color: #fff;
  padding-left: .5em;
  padding-right: .5em
}

input[type=radio] {
  position: relative;
  top:1px;
  background-color: #ddd;
  border-radius: 10px;
  border: #aaa 1px solid;
  height: 15px;
  width: 15px;
  margin:0;
  -webkit-appearance: none;
}
input[type=radio]:checked {
  background-color: var(--main-orange);
  background-image: url('../images/icon-radio-selected.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80%;
  border: var(--main-color) 1px solid;
  -webkit-box-shadow: rgba(0,0,0,.1) 0 0 2px, rgba(0,0,0,.1) 0 0 8px;
}

input[type=checkbox]{
  position: relative;
  top:6px;
  background-color: #fff;
  border: #aaa 1px solid;
  border-radius: 5px;
  width: 26px;
  height: 26px;
  margin:0;
  -webkit-appearance:none;
}
input[type=checkbox]:checked {
  background-color: var(--main-orange);
  background-image: url('../images/icon-check.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  -webkit-box-shadow: rgba(0,0,0,.1) 0 0 2px, rgba(0,0,0,.1) 0 0 8px;
}

input[type=checkbox]:disabled,
input[type=radio]:disabled {
  cursor: default
}
select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border-radius: 0;
  border: none;
  cursor: pointer;
  outline: none;
  font-size: 1em;
  padding-left: .5em;
  padding-right: 2em;
  font-family: 'Noto Sans TC','Microsoft JhengHei','Arial';
}
select:disabled {
  cursor: default;
  opacity: 1
}
select.country_code{
  font-size: 0.9em !important;
}
/***/
article.area_6{
  position: relative;
  background: linear-gradient(to bottom, #46094b 0%, #061245 100%);
}
article.area_6 .bg_area6{
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 110%;
  height: 2em;
  background-color: #F7F7F7;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
article.area_6 .infotext {
  padding: 0;
  margin: 0 auto 2em auto;
  max-width: 840px;
}
article.area_6 .infotext ul{
  margin-left: -1em;
}
article.area_6 ul.infotext {
  padding-left: 5px;
  line-height: 1.6em;
}
article.area_6 ul.infotext li{
  margin-bottom: 6px;
}
article.area_6 ul.infotext.note {
  padding-left: 5px;
  line-height: 1.5em;
  font-size: 0.76em;
  margin-bottom: 0;
}
article.area_6 .infotext b {
  font-weight: 300;
  color: #fff596;
}
/***/
.personal-information {
  padding: 0 0 3em 0;
}
.personal-information.actcheckbox{
  padding:0 0 40px 0;
}
.personal-information .container{
  width: 100%;
  margin: 0 auto;
}
.personal-information .fields {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  max-width: 840px;
  margin: 0 auto;
}
.personal-information .fields_1 {
  grid-template-columns: repeat(1, 1fr)
}
.personal-information .fields:not(:last-of-type) {
  margin-bottom: 20px
}

.personal-information .fields .field {
  position: relative;
  font-size: 0.8em;
}
.personal-information .fields .field input[type=email],
.personal-information .fields .field input[type=tel],
.personal-information .fields .field input[type=text] {
  width: 100%;
  font-size: 1em;
  /*padding: 6px 12px;*/
  height: 36px;
  background-color: #fff;
  border-radius: 5px;
  border: #aaa 1px solid;
  -webkit-transition: backgruond-color .2s, border-color .2s, color .2s;
  -o-transition: backgruond-color .2s, border-color .2s, color .2s;
  transition: backgruond-color .2s, border-color .2s, color .2s
}

.personal-information .fields .field input[type=email]::-webkit-input-placeholder,
.personal-information .fields .field input[type=tel]::-webkit-input-placeholder,
.personal-information .fields .field input[type=text]::-webkit-input-placeholder {
  color: #a9a9a9;
}

.personal-information .fields .field input[type=email]::-moz-placeholder,
.personal-information .fields .field input[type=tel]::-moz-placeholder,
.personal-information .fields .field input[type=text]::-moz-placeholder {
  color: #a9a9a9;
}

.personal-information .fields .field input[type=email]::-ms-input-placeholder,
.personal-information .fields .field input[type=tel]::-ms-input-placeholder,
.personal-information .fields .field input[type=text]::-ms-input-placeholder {
  color: #a9a9a9;
}

.personal-information .fields .field input[type=email]::placeholder,
.personal-information .fields .field input[type=tel]::placeholder,
.personal-information .fields .field input[type=text]::placeholder {
  color: #a9a9a9;
}

.personal-information .fields .field input[type=email]:focus,
.personal-information .fields .field input[type=tel]:focus,
.personal-information .fields .field input[type=text]:focus{
  outline: #ffd516 solid 3px;
}

.personal-information .fields .field input[type=email]:disabled,
.personal-information .fields .field input[type=tel]:disabled,
.personal-information .fields .field input[type=text]:disabled {
  background-color: #dedede;
  color: #7e7e7e
}

.personal-information .fields .field input[type=text]:disabled {
  border: none;
}

.personal-information .fields .field label {
  display: block;
  margin-bottom: 2px;
  font-size: 1em;
}

.personal-information .fields .field select {
  font-size: 1em;
  /*padding: 0px 12px;*/
  height: 36px;
  background-image: url(../images/icon_dropdown.png);
  background-position: right .5em center;
  background-repeat: no-repeat;
  background-size: 10px;
  border-radius: 5px;
  border: #aaa 1px solid;
  width: 100%;
  -webkit-transition: background-color .2s, color .2s;
  -o-transition: background-color .2s, color .2s;
  transition: background-color .2s, color .2s
}
.personal-information .fields .field select:focus {
  outline: #ffd516 solid 3px;
}
.personal-information .fields .field select:invalid {
  color: #727272
}

.personal-information .fields .field select:disabled {
  background-color: #dedede;
  border-color: #b4b4b4;
  color: #7e7e7e
}
.personal-information .submit {
  text-align: center;
  margin:40px auto 0 auto;
  color: var(--act-a);
  font-size: 0.9em;
}
.personal-information .submit button{
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  letter-spacing: 1.8px;
  text-indent: 1.8px;
  height: 50px;
  width: 200px;
  background-color: var(--main-orange);
  -webkit-transition: background-color .2s;
  -o-transition: background-color .2s;
  transition: background-color .2s;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none; 
  appearance: none;
  transition: all 0.3s; -webkit-transition: all 0.3s;
  border-radius: 5px;
}
.personal-information .submit button:disabled{
  background-color: #a9a9a9
}
.personal-information .submit button:hover{
  background-color: var(--hover);
  box-shadow: 0px 0px 4px 2px rgb(0 0 0 / 15%);
}
/***/
.personal-information .fields .field .last_name{
  width: calc(50% - 3px);
  float: left;
}
.personal-information .fields .field .first_name{
  width: calc(50% - 3px);
  float: right;
}
.personal-information .fields .field select.country_code{
  width: 36%;
  float: left;
}
.personal-information .fields .field input.phone_number{
  width: calc(64% - 6px);
  float: right;
}
.personal-information .fields .field input.co_postalcode{
  width: calc(20% - 3px);
  float: left;
}
.personal-information .fields .field input.co_address{
  width: calc(80% - 3px);
  float: right;
}
.personal-information .fields .field select.industry,
.personal-information .fields .field select.department,
.personal-information .fields .field select.jobtitle{
  width: calc(50% - 3px);
  float: left;
  width: 100%;
  transition: all 0.3s; -webkit-transition: all 0.3s;
}
.personal-information .fields .field input.industry_other,
.personal-information .fields .field input.department_other,
.personal-information .fields .field input.jobtitle_other{
  width: calc(50% - 3px);
  float: right;
  width: 0;
  padding: 6px 0;
  transition: all 0.3s; -webkit-transition: all 0.3s;
}
.personal-information .fields .field select.industry._show,
.personal-information .fields .field select.department._show,
.personal-information .fields .field select.jobtitle._show{
  width: calc(30% - 3px);
  padding: 6px 12px;
}
.personal-information .fields .field input.industry_other._show,
.personal-information .fields .field input.department_other._show,
.personal-information .fields .field input.jobtitle_other._show{
  width: calc(70% - 3px);
  padding: 6px 12px;
}
.personal-information .fields .field .desc{
  width: 100%;
  /*text-align: right;*/
  font-size: 0.9em;
  color: #d9fcff;
  margin: 5px auto;
  padding-left: 2px;
  font-weight: 400;
}
.personal-information .fields .field .desc img.icon_attention{
  display: inline-block;
  width: 15px;
  height: 15px;
  position: relative;
  top: -1.5px;
  margin: 0 3px 0 0;
}
/***/
.column_private{
  margin: 0px auto 40px auto;
  display: block;
  text-align: center;
}
.column_private ._inlineblock{
  font-size: 0.85em;
  display: inline-block;
}
.column_private .checkboxlabel{
  font-size: 0.85em;
  display: inline-block;
}
#ted_private_rule{
  text-decoration: none;
  border-bottom: 1px solid #000;
}
#ted_private_rule:hover{
  border-bottom: 1px solid #ffffff;
}
.err_forcheckbox {
  display: inline-block;
  font-size: 0.6em;
  color: #00efff;
  width: 100%;
  text-align: center;
}
/*************************************/
/*************************************/
.fadeIn {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
.fadeOut {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}
@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}
/*************************************/
.column_link{
  display: block;
  margin: 10px auto;
  white-space: nowrap;
  text-align: center;
  grid-template-columns: repeat(3,1fr);
  display: grid;
  gap: 30px;
}
.column_link a.box{
  display: block;
  background: #ff0066;
  border-radius: 5px;
  padding: 3px 10px 4px 10px;
  margin: 0 auto;
  color: #ffffff;
  margin-bottom: 4px;
  width: calc(100% - 0px);
  max-width: 320px;
  font-size: 0.9em;
  -webkit-transition: background-color .2s;
  -o-transition: background-color .2s;
  transition: background-color .2s;
}
.column_link a.box:hover{
  text-decoration: unset;
  background-color: var(--hover);
}
.column_link a.box::after{
  content: "";
  display: inline-block;
  background-image: url("../images/icon_button_link.svg");
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  position: relative;
  top: 2px;
  margin: 0 0 0 5px;
}
/*******************************************/
.questionnaire{
  margin: 2em auto 1em auto;
}
.questionnaire .questions {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.questionnaire .questions .sessions{
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 0.2em;
  font-size: 0.9em;
  color: #ffcf95;
  font-weight: 500;
}

.questionnaire .questions>li {
  border: 2px solid #ffffff22;
  border-radius: 5px;
  padding: 1em;
}

.questionnaire .questions>li:not(:last-child) {
  margin-bottom: 40px
}

.questionnaire .questions>li p {
  color: var(--main-white);
  font-size: 0.9em;
  font-weight: 400;
  padding: 0;
  margin: 0 auto 1em auto;
}

.questionnaire .questions>li .title{
  position: relative;
  margin: 0 auto;
  width: fit-content;
  width: -moz-fit-content;
  padding: 0;
  font-weight: 500;
  text-align: center;
}
.questionnaire .questions>li .title small{
  font-size: 0.8em;
  color: #fff596;
  margin: 0 0 0 14px;
}
.questionnaire .questions>li .notice{
  color: var(--main-yellow);
  text-align: center;
  margin: 1em;
}
.questionnaire .options {
  display: grid;
  grid-gap: 0.2em;
  grid-template-columns: repeat(1,1fr);
  list-style-type: none;
  margin: 0 0 0.3em 0;
  padding: 0;
  /*border-left: 3px solid #ffcf95;
  padding: 0 0 0 5px;*/
}
.questionnaire .options._column2 {
  grid-template-columns: repeat(2,1fr);
}
.questionnaire .options._column2_for_3 {
  grid-template-columns: repeat(2,1fr);
}
.questionnaire .options._column3 {
  grid-template-columns: repeat(3,1fr);
}
/***/
.questionnaire .options>li label div ._room{
  position: relative;
  font-size: 0.8em;
  display: block;
  width: 100%;
  font-weight: 300;
}
.questionnaire .options>li label div ._room::before{
  padding: 0 0.25em;
  margin-left: -0.25em;
  color: #a7002eb0;
  font-weight: 500;
  width: calc(100% - 0.5em);
  display: block;
}
.questionnaire .options>li label div ._room._1::before,
.questionnaire .options>li label div ._room._2::before{
  color: #051c68b0;
}
.questionnaire .options>li label div ._room._A::before{
  content: "教室 A - 製程管理與能源優化";
}
.questionnaire .options>li label div ._room._B::before{
  content: "教室 B - 數位創新 OEM 機械更智慧";
}
.questionnaire .options>li label div ._room._C::before{
  content: "教室 C - 分析關鍵數據拉升營運效率";
}
.questionnaire .options>li label div ._room._1::before{
  content: "實作教室 1 (名額有限)";
}
.questionnaire .options>li label div ._room._2::before{
  content: "實作教室 2 (名額有限)";
}
/***/
.questionnaire .options>li label input[type=checkbox],
.questionnaire .options>li label input[type=radio] {
  display: none;
}

.questionnaire .options>li label input[type=checkbox]:checked~div,
.questionnaire .options>li label input[type=radio]:checked~div{
  background-color: #fff680;
  color: #000000;
}
.questionnaire .options>li label input[type=radio]:checked~div ._room::before {
  color: #000000;
}

.questionnaire .options>li label input[type=checkbox][disabled]:checked~div,
.questionnaire .options>li label input[type=radio][disabled]:checked~div {
  background-color: #fff680;
  color: #000000;
}
.questionnaire .options>li label input[type=radio][disabled]:checked~div ._room::before {
  color: #000000;
}

.questionnaire .options>li label input[type=checkbox][disabled]~div,
.questionnaire .options>li label input[type=radio][disabled]~div {
  background-color: #d3d3d3;
  color: #999;
  cursor: unset;
}
.questionnaire .options>li label input[type=radio][disabled]~div ._room::before {
  color: #999;
}
/***/
.questionnaire .options>li label div ._room::after{
  position: absolute;
  top: -0.5em;
  right: 0px;
  content: "";
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  background-color: #ffffff;
  border-radius: 50%;
  border: 1px solid #00000033;
}
.questionnaire .options>li label input[type=radio]:checked~div ._room::after {
  background-color: #fa582d;
  border: 1px solid #fa582d;
  background-image: url('../images/icon-check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/***/

.questionnaire .options>li label div {
  display: block;
  color: #000000;
  font-size: 0.86em;
  font-weight: 400;
  letter-spacing: 1px;
  text-indent: 1px;
  width: 100%;
  height: 100%;
  background-color: #ffeefc;
  border-radius: 3px;
  cursor: pointer;
  padding: 18px 10px;
  -webkit-transition: background-color .2s;
  -o-transition: background-color .2s;
  transition: background-color .2s;
}
.questionnaire .options._column3>li label div{
  background-color: #fff0fa;
}
.questionnaire .options._column3>li:nth-of-type(2) label div{
  background-color: #ffd2ef;
}
.questionnaire .options._column3>li:nth-of-type(3) label div{
  background-color: #ffe1eb;
}

.questionnaire .options>li label div._div2{
  background-color: #ffd2ef;
}
.questionnaire .options>li label div._div3{
  background-color: #ffe1eb;
}

.questionnaire .options._column2>li label div{
  background-color: #d7eeff;
}
.questionnaire .options._column2>li:nth-of-type(2) label div{
  background-color: #bce2ff;
}
.questionnaire .options>li label div ._title{
  display: block;
  width: 100%;
}
/***/
.questionnaire .options>li label.disabled div {
  position: relative;
  background-color: #d3d3d3 !important;
  color: #999 !important;
}
.questionnaire .options>li label.disabled div ._room::before{
  color: #999 !important;
}
.questionnaire .options>li label.disabled div::after {
  position: absolute;
  top: 8px;
  right: 8px;
  content: "已額滿";
  background-color: #474747;
  color: #ffffff;
  padding: 4px 14px;
  border-radius: 19px;
  font-size: 0.8em;
  transform: rotate(0deg);
}
/**************************/
._button_confirm{
  display: block;
  font-weight: 500;
  font-size: 1em;
  line-height: 50px;
  text-align: center;
  color: #FFFFFF;
  height: 50px;
  width: 100%;
  max-width: 200px;
  background-color: var(--main-orange);
  cursor: pointer;
  transition: all 0.3s; -webkit-transition: all 0.3s;
  border-radius: 5px;
  margin: 10px auto;
}
._button_confirm:hover{
  background-color: var(--hover);
  text-decoration: unset;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.55); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.55); box-shadow: 0 1px 5px rgba(0,0,0,0.55);
}
/*************************************/
.opacity_0 {
  opacity: 0;
}
.fadeInUp {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUp {
  from {
    top: 50px;
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    top: 0px;
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    top: 80px;
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    top: 0px;
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*************************************/