.demo{
  position: fixed;
  left: 0;
  top:0;
  background-color: rgba(255,255,255,0.4);
  font-size: 10px;
  z-index: 9999;
  word-break: break-all;
  display: none;
}
:root {
  --main-color: #000000;
  --main-lightblue: #46FAFF;
  --main-deepblue: #046286;
  --main-white: #ffffff;
  --main-orange: #FA582D; /*#FF5300*/
  --main-yellow: #FA582D;
  --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;
}
header .bg_header{
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  /*background-image: url('../images/bg_header.jpg');*/
  background-position:bottom center;
  background-repeat: no-repeat;
  background-size: cover;
}
header .bg_header_a{
  position: absolute;
  right: -1px;
  bottom: 0;
  display: block;
  width: 100%;
  max-width: 800px;
  height: 100%;
  background-image: url('../images/bg_header_a.png');
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
}
header .bg_header_b{
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 5%;
  background: linear-gradient(#00003400 0%, #000034ff 100%);
}
/***/
.icon_mouse_column{
  position: absolute;
  top:calc(100% - 55px);
  left: calc(50% - 13px);
  width: 26px;
  margin: 0 auto;
  z-index: 5;
}
.icon_mouse_column .mouse_body{
  position: absolute;
  z-index: 10;
  border-radius: 50%;
  width:30px;
  height:30px;
  background-size: cover;
}
.icon_mouse_column .mouse_scroll{
  position: absolute;
  top:0px;
  opacity: 1;
  left: calc(50% - 15px);
  z-index: 11;
  width:30px;
  height:15px;
  background-image: url('../images/icon_arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
.icon_mouse_column .mouse_scroll.m1{
  top:0px;
  opacity: 0;
  animation:mousescrollm1 2s infinite;
}
.icon_mouse_column .mouse_scroll.m2{
  top:8px;
  opacity: 0;
  animation:mousescrollm2 2s infinite;
}
.icon_mouse_column .mouse_scroll.m3{
  top:16px;
  opacity: 0;
  animation:mousescrollm3 2s infinite;
}
@keyframes mousescrollm1{
  0%{opacity: 0;}
  20%{opacity: 1;}
  40%{opacity: 0;}
  100%{opacity: 0;}
}
@keyframes mousescrollm2{
  0%{opacity: 0;}
  10%{opacity: 0;}
  40%{opacity: 1;}
  60%{opacity: 0;}
  100%{opacity: 0;}
}
@keyframes mousescrollm3{
  0%{opacity: 0;}
  30%{opacity: 0;}
  60%{opacity: 1;}
  80%{opacity: 0;}
  100%{opacity: 0;}
}
@keyframes mousescroll{
  0%{top:0px; opacity: 1;}
  32.9999%{top:0px; opacity: 1;}
  33%{top:8px; opacity: 1;}
  65.9999%{top:8px; opacity: 1;}
  66%{top:16px; opacity: 1;}
  99.9999%{top:16px; opacity: 1;}
  100%{top:0px; opacity: 1;}
}
/***/
header nav{
  position: relative;
  position: fixed;
  display: block;
  width: 100%;
  max-width: 2560px;
  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 {
  display: none;
  float: left;
  margin-top: 2px;
}
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: 40px;
}
header nav .column .column_logo .box img.to{
  height: 26px;
}
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{
  height: 28px;
  max-width: 100%;
}
/***/
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 12px;
  /*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;
  margin-left: 0.5em;
  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{
  position: absolute;
  bottom: 10%;
  left: 0%;
  width: 100%;
  margin: 0 auto;
  z-index: 4;
}
header .kvtitle .column{
  position: relative;
  z-index: 4;
  /*text-align: center;*/
  width: 100%;
  padding: 2em 5%;
}
/***/
header .kvtitle .column .column_logo {
 /*display: none;*/
}
header .kvtitle .column .column_logo .box{
  display: inline-block;
  height: fit-content;
  height: -moz-fit-content;
  line-height: 0;
}
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;
  max-width: 100%;
}
/***/
header .kvtitle .column .column_title{
  position: relative;
  display: block;
  width: fit-content;
  width: -moz-fit-content;
  max-width: 1920px;
}
header .kvtitle .column .column_title h1{
  opacity: 0;
  width: 0;
  height: 0;
  font-size: 0;
}
header .kvtitle .column img{
  width: 100%;
  margin: 0 auto;
  /*filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));*/
}
header .kvtitle .column .kv_title{
  /*margin: 0 auto*/;
  /*margin-bottom: 1em;*/
  /*margin-top: 2.2em;*/
}
header .kvtitle .column .kv_title img{
  width: 62%;
  max-width: 800px;
}
header .kvtitle .column .kv_slogan{
  margin: 0 auto;
  width: 58%;
  min-width: 900px;
  padding: 0 20px;
}
header .kvtitle .column .kv_slogan img{
  font-size: 2em;
}
header .kvtitle .column .kv_info{
  margin: 0 auto;
  width: 100%;
  font-weight: 400;
  font-size: 1.8em;
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
  padding: 1em 0 0 0;
  letter-spacing: 0.2em;
}
header .kvtitle .column .kv_info span{
  display: block;
}
header .kvtitle .column .kv_info span._date{
  margin-top: 0.5em;
  font-weight: 600;
  color: #FFFCC7;
  /*letter-spacing: 0.24em;*/
}
header .kvtitle .column .kv_info span._date small{
  font-size: 0.72em;
}
header .kvtitle .column .kv_info span span._space{
  display: inline-block;
  width: 0em;
}
/*************************************/
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: 100%;
  z-index: 1;
  width: 85%;
  height: 0.05em;
  /*background: linear-gradient(-90deg, #B8FCFF, #417ed0);*/
  background-color: #B8FCFF;
}
section h2.title::after{
  content: "";
  position: absolute;
  left: calc(100% - 5.2em);
  top: calc(100% - 0.09em);
  z-index: 1;
  width: 3.5em;
  height: 0.2em;
  transform: skewX(-45deg);
  background-color: #B8FCFF;
}
section h2.title span.line{
  position: absolute;
  right: 0%;
  top: 100%;
  z-index: 1;
  padding: 0;
  width: calc(15% - 0.38em);
  height: 0.05em;
  background-color: #B8FCFF;
}
section ul.point{
  margin: 1em 0;
  padding-left: 0px;
  list-style: none;
}
section ul li.point{
  margin-bottom: 0.5em;
  width: fit-content;
  width: -moz-fit-content;
  font-weight: 500;
  list-style: none;
  color: #ffde95;
  /*background-color: #ffe99a;*/
  background-image: url(../images/check-box.svg);
  background-repeat: no-repeat;
  background-position: 0 0.05em;
  background-size: 1.4em;
  padding: 0 5px 1px 1.8em;
}
section .infotext{
  position: relative;
  /*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: linear-gradient(to bottom,  #041334 43%,#132D66 100%);
}
article .bg_area_1b{
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  left: 0;
  bottom: 0;
  opacity: 1;
  background-image: url("../images/bg_area1b.jpg");
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  /*filter: blur(2px);*/
}
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{
  font-size: 1.2em;
}
.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{
  opacity: 0;
  display: inline-block;
  margin: 0 0px 1.5em 0px;
  padding: 20px;
  width: calc(33% - 6px);
  max-width: 500px;
  vertical-align: top;
}
.column_points .box .border{
  position: relative;
  width: 100%;
  padding: 15px 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: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  margin: auto;
  background-color: #21d4fd;
  background-image: linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  animation: morphing 10s infinite;
  overflow: hidden;
  opacity: 0.12;
  z-index: -1;
}
.column_points .box .border .morphing_circle.m1 {
  animation: morphing 10s infinite;
}
.column_points .box .border .morphing_circle.m2 {
  animation: morphing 9s infinite reverse;
  transform: rotate(180deg);
}
.column_points .box .border .morphing_circle.m3 {
  animation: morphing 11s infinite;
}
@-moz-keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  }
  25% {
    border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
  }
  75% {
    border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
  }
}
@-webkit-keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  }
  25% {
    border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
  }
  75% {
    border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
  }
}
@-o-keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  }
  25% {
    border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
  }
  75% {
    border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
  }
}
@keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  }
  25% {
    border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
  }
  75% {
    border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
  }
}
.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: 1em;
  max-width: 300px;
  margin: 0 auto;
}
.column_points .box .title .title2{
  display: block;
  font-weight: 300;
}
.column_points .box .icon{
  position: relative;
  display: block;
  margin: 0 auto;
  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: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 80%;
  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;
}
/*************************************/
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);*/
}
section.area_2{
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 3em auto 5em auto;
  z-index: 2;
}
/***/
.column_day{
  width: 100%;
  max-width: 1000px;
  margin: 2em auto 0 auto;
  display: block;
  padding: 0;
}
/***/
.column_table{
  position: relative;
  width: 100%;
  margin-bottom: 1em;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

.column_table .group_th{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  width: 100%;
  text-align: center;
  font-weight: normal;
  padding: 0.5em 0;
  color: #ffffff;
}
.column_table .group_th .ch{
  display: block;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  white-space: nowrap;
}
.column_table .group_th .en{
  display: block;
  letter-spacing: 0;
  font-size: 0.82em;
}
.column_table .group_th .th_time{
  flex-grow: 1;
  max-width: 20%;
}
.column_table .group_th .th_subject{
  flex-grow: 2;
  max-width: 80%;
}
.column_table .group_th .th_lecturer{
  flex-grow: 2;
  max-width: 0%;
}
.column_table .group_tr{
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -webkit-align-items: stretch;
          align-items: stretch;
  -webkit-justify-content: center;
          justify-content: center;
  width: 100%;
  text-align: center;
  line-height: 20px;
  order: 2;
  padding: 2px 0;
}
.column_table .group_tr .desc{
  position: relative;
  text-align: justify;
  width: 100%;
  font-size: 0.9em;
  padding: 15px 15px 0 15px;
  text-align: left;
}
.column_table .group_tr.noborder{
  border: none;
}
.column_table .group_tr:nth-child(odd){
  /*background-color: #f6f6f6;*/
}
.column_table .group_tr .td_time{
  padding: 10px 5px;
  flex-grow: 1;
  width: 20%;
  background-color: #d8ebee15;
  border-radius: 5px;
  color: #ffffff;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.column_table .group_tr.break .td_time{
  background-color: #fff7da22;
}
.column_table .group_tr .td_time span{
  display: inline-block;
  white-space: nowrap;
}
.column_table .group_tr .td_time span.dash{
  margin: 0 3px;
}
.column_table .group_tr .td_subject_lecturer{
  padding: 15px 15px;
  margin-left: 5px;
  flex-grow: 2;
  width: 80%;
  border-radius: 5px;
  background-color: #ffffff15;
  color: #fff999;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-justify-content: center;
          justify-content: center;
}
.column_table .group_tr.break .td_subject_lecturer{
  background-color: #fff7da22;
}
.column_table .group_tr .td_subject .ch{
  display: block;
  font-weight: 500;
  font-size: 1.05em;
  line-height: 1.4em;
  margin: 0;
  padding: 0;
  color: #0a36a0;
  color: #d5f8ff;
  text-align: left;
}
.column_table .group_tr.break .td_subject .ch{
  color: #ffffff;
}
.column_table .group_tr .td_subject .en{
  display: block;
  font-weight: 400;
  font-size: 0.86em;
  line-height: 1.4em;
  letter-spacing: 0.04em;
  margin: 0;
  padding: 0;
  color: #888;
  text-align: left;
}
.column_table .group_tr .td_lecturer{
  padding: 5px 0 0 0px;
  text-align: left;
  max-width: 100%;
}
.column_table .group_tr .td_lecturer .ch{
  display: inline-block;
  font-weight: 300;
  font-size: 0.8em;
  margin: 0 6px 0 0;
  padding: 0;
  text-align: left;
}
.column_table .group_tr .td_lecturer .en{
  display: inline-block;
  font-weight: 300;
  font-size: 0.8em;
  line-height: 1.4em;
  letter-spacing: 0.04em;
  margin: 0;
  padding: 0;
  text-align: left;
  color: #ffffff;
}
.column_table .group_tr .td_lecturer.special .主持人::before{
  width: fit-content;
  display: block;
  content: "主持人";
  background-color: #e0f9ff;
  padding: 0px 8px;
  border-radius: 5px;
  position: relative;
  font-size: 0.8em;
}
.column_table .group_tr .td_lecturer.special .與談人::before{
  width: fit-content;
  display: block;
  content: "與談人";
  background-color: #e0f9ff;
  padding: 0px 8px;
  border-radius: 5px;
  position: relative;
  font-size: 0.8em;
}
/***/
.column_table .group_tr .td_subject .option_column{
  width: 100%;
  display: block;
  text-align: left;
  margin: 0.6em 0 1em 0;
}
.column_table .group_tr .td_subject .option_column a.icon{
  display: inline-block;
  padding: 8px 15px 8px 32px;
  line-height: 1em;
  border-radius: 3px;
  font-size: 0.9em;
  text-decoration: none;
  background-size: 22px;
  background-position: 10px center;
  background-repeat: no-repeat;
  border: 1px solid #00000066;
  transition: background-color 0.3s; -webkit-transition: background-color 0.3s;
  margin-bottom: 0.5em;
}
.column_table .group_tr .td_subject .option_column a.icon._video{
  background-image: url("../images/icon_video.svg");
  background-color: #fff;
}
.column_table .group_tr .td_subject .option_column a.icon._paper{
  background-image: url("../images/icon_paper.svg");
  background-color: var(--main-color);
  color: #fff;
}
.column_table .group_tr .td_subject .option_column a.icon._video:hover{
  background-color: #FF0000;
  background-image: url("../images/icon_video_w.svg");
  color: #fff;
}
.column_table .group_tr .td_subject .option_column a.icon._paper:hover{
  background-color: var(--light-blue);
}
/*************************************/
section.area_3{
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 3em auto 3em auto;
  z-index: 2;
}
/***/
.column_lecturer{
  width: 100%;
  display: block;
  text-align: center;
}
/***/
.box_lecturer{
  position: relative;
  display: inline-block;
  width: calc(33% - 10px);
  min-width: 240px;
  text-align: center;
  margin-bottom: 30px;
  vertical-align: top;
}
.box_lecturer .column_pic{
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 1em;
}
.box_lecturer .column_pic .pic{
  position: relative;
  width: 180px;
  height: 180px;
  padding: 0;
  display: block;
  background-image: url("../images/bg_lecturer_pic.png");
  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/lecturer1b.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/lecturer6a.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/lecturer9a.jpg");}
.box_lecturer .column_pic .pic .photo.pic10{background-image: url("../images/lecturer10.jpg");}
/***/
.box_lecturer .column_info{
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  margin-bottom: 1.2em;
  padding: 0 10px;
}
.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: #fff999;
}
.box_lecturer .column_info .ch .jobtitle{
  position: relative;
  top: 1px;
}
/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*************************************/
/*單位*/
article.area_5{
  position: relative;
  background: linear-gradient(to bottom, #031939, #000);
}
section.area_5{
  position: relative;
  width: 100%;
  max-width: 1200px;
  z-index: 2;
}
.unit{
  display: block;
  text-align: center;
  width: 100%;
}
.unit .box{
  display: block;
  padding: 20px 0px;
  text-align: center;
}
.unit .box .title{
  width: 100%;
  color: #ffffff; 
  font-weight: 400;
  line-height: 36px;
  text-align: center;
  letter-spacing: 0.08em;
  margin: 0 0 20px 0;
}
.unit .box .column_grid_logo{
  font-size: 0.6em;
  text-align: center;
}
.unit .box .column_grid_logo ._logo{
  display: inline-block;
  margin: 0px 20px 20px 20px;
}
.unit .box img,
.unit .box .column_grid_logo ._logo img{
  display: block;
  width: 160px;
  background-color: #ffffff;
  border-radius: 5px;
}
.unit .box .column_grid_logo ._logo img.other{
  width: 160px;
}
.unit .column_grid2{
  display: block;
  text-align: center;
}
.unit .column_grid2 .box{
  display: inline-block;
}
/*************************************/
section.area_6{
  position: relative;
  width: 100%;
  max-width: 880px;
  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: #262F60;
}
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: #000410;
}
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: #fff700;
  margin: 0 0 0 10px;
}
.err_info{
  display: none;
  width: 100%;
  text-align: center;
  font-size: 0.8em;
  padding: 0 0.5em;
  color: #fff700;
}
.err_info_apimsg{
  width: 100%;
  text-align: center;
  font-size: 0.9em;
  padding: 0 0.5em;
  font-weight: 300;
  color: #fff700;
}
/*************************************/
/**彈出活動框 **/
.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: justify;
  color: #222;
}
.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;
}
._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;
  -moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; 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.8em !important;
}
/***/
article.area_6{
  position: relative;
  background-color: #031939;
}
article.area_6 .infotext {
  padding: 0 1em;
  margin: 0 auto 2em auto;
}
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: 500;
  color: #fff596;
}
/***/
.personal-information {
  padding: 0 0 3em 0;
}
.personal-information.actcheckbox{
  padding:0 0 40px 0;
}
.personal-information .container{
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
}
.personal-information .fields {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(2, 1fr)
}
.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: 0.9em;
}

.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;
  max-width: 200px;
  width: 100%;
  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.phone_co_no{
  width: calc(65% - 3px);
  float: left;
}
.personal-information .fields .field input.phone_co_ext{
  width: calc(35% - 3px);
  float: right;
}
.personal-information .fields .field select.industry,
.personal-information .fields .field select.department,
.personal-information .fields .field select.jobtitle,
.personal-information .fields .field select.location{
  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,
.personal-information .fields .field input.location_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,
.personal-information .fields .field select.location._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,
.personal-information .fields .field input.location_other._show{
  width: calc(70% - 3px);
  padding: 6px 12px;
}
.personal-information .fields .field .desc{
  width: 100%;
  /*text-align: right;*/
  font-size: 0.9em;
  color: #69e3ff;
  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{
  color: #69e3ff;
  border-bottom: 1px solid #69e3ff;
}
.err_forcheckbox {
  display: inline-block;
  font-size: 0.6em;
  color: #fff700;
  width: 100%;
  text-align: center;
}
/*************************************/
/*store_column start*/
.store_column{
  position: fixed;
  z-index: 999991;
  padding: 0px;
  top:0%;
  left: 0%;
  border:3px solid var(--theme_blue);
  border-radius: 0px;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0);
}
.store_column .info_column{
  position: relative;
  height: 100%;
  margin: 0 auto;
  z-index: 10;
  overflow-y: auto;
  overflow-x: hidden;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.store_column .info_column::-webkit-scrollbar {
  width:3px;
  background: #eee;
}
.store_column .info_column::-webkit-scrollbar-thumb {
  background: #ccc;
}
.store_column .info_column .appendHTML{
  margin: 0 auto;
  position: relative;
}
.store_column .info_column .appendHTML .button_close{
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  top: -36px;
  right:  2px;
  z-index: 11;
  cursor: pointer;
  background-image: url("../images/button_x_white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/*store_column end*/
/***light YT***/
.youtube-player {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background-color: #000;
  background-image: url('../images/loading_black.gif');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50px;
  border-radius: 8px;
}
.youtube-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background: transparent;
}
.youtube-player img {
  object-fit: cover;
  display: block;
  left: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  height: auto;
  cursor: pointer;
  -webkit-transition: 0.4s all;
  -moz-transition: 0.4s all;
  transition: 0.4s all;
}
.youtube-player img:hover {
  -webkit-filter: brightness(75%);
  -moz-filter: brightness(75%);
  filter: brightness(75%);
}
.youtube-player .play {
  height: 64px;
  width: 64px;
  left: 50%;
  top: 50%;
  margin-left: -32px;
  margin-top: -32px;
  position: absolute;
  background: url("../images/icon_play.svg") no-repeat;
  opacity: 1;
  cursor: pointer;
}
/*************************************/
/*************************************/
#reset{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999999;
  background-color: #fff;
}
/*************************************/
/*************************************/
.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;}
}
.fadeInUp {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
  }

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 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;
}
/*******************************************/
/**************************/
._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);
}
/*************************************/
/*活動好禮*/
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: calc(100%);
  max-width: 840px;
  margin: 0 auto;
  font-size: 0.9em;
  margin-top: 2em;
}
.note_column .title{
  font-size: 1em;
  font-weight: 500;
  margin-top: 10px;
  color: #fff596;
}
.note_column ul.infotext{
  line-height: 1.3em;
  padding-left: 2em;
}
.note_column ul.infotext li{
  margin-bottom: 6px;
}
/***/
.note_column.gift{
  width: calc(100%);
  max-width: 640px;
  margin: 0 auto;
  padding: 10px;
  font-size: 0.9em;
  margin-top: 2em;
  color: #000000;
}
.note_column.gift .title{
  font-size: 1em;
  font-weight: 500;
  margin-top: 10px;
  width: fit-content;
  width: -moz-fit-content;
  color: #000000;
}
.note_column.gift ul.infotext{
  line-height: 1.3em;
  padding-left: 2em;
}
.note_column.gift 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: 360px;
  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: #20a9ff; /*var(--light-blue);*/
  width: 76px;
  height: 76px;
  text-align: center;
  font-weight: 400;
  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: 2em;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  padding-right: 3px;
}
.column_gift .box .type{
  position: relative;
  display: block;
  padding: 0.25em;
  font-weight: 500;
  margin-bottom: 10px;
  font-size: 1em;
  color: #000;
  background: linear-gradient(135deg, #ffcbfa 0%, #92f2ff 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;
  padding: 10px;
  font-size: 0.82em;
  text-align: left;
  color: #666;
  text-align: justify;
}
.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;
}
/*************************************/