/* 
#F56400
#FFCB11
#53E882
#1F71F4
#f4c900
#559AF8
*/



/* -------------
     共用 start
------------*/
* {
  padding: 0;
  margin: 0;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  min-width: 100%;
  min-height: 100vh;
  position: relative;
  font-weight: 300;
  overflow-x: hidden;
  font-size: 18px;
  line-height: 1.8;
  color: #333;
  font-family: 'Noto Sans', 'Noto Sans TC', Helvetica, '微軟正黑體', '新細明體', Arial, sans-serif;
}

@media (max-width: 768px) {
  body {
    min-height: 100%;
  }
}


h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: 20px 0 10px;
  line-height: 1.6;
  font-weight: 500;
}

h1 {
  font-size: 52px;
}

h2 {
  font-size: 42px;
}

h3 {
  font-size: 36px;
}

h4 {
  font-size: 28px;
}

h5 {
  font-size: 22px;
}

h6 {
  font-size: 20px;
  font-weight: 400;
  margin: 10px 0;
}

.lead {
  margin: 10px 0 5px;
  font-weight: bold;
}

strong {
  font-weight: 700;
}

i.fa,
i.fas {
  min-width: 20px;
  min-height: 20px;
  display: inline;
}

p,
.p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 1rem;
}

p.smaller,
.p.smaller {
  font-size: 87.5%;
  line-height: 1.5;
}

.hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-top: 1px solid #dddddd;
}

.breadcrumb-head {
  color: #dfdfdf;
  font-weight: 500;
  margin: -1% -4% 3% 0;
  letter-spacing: -2px;
}

ul {
  list-style: none;
  line-height: 1.9em;
}

ul.disc-list {
  list-style: disc;
}

ol {
  margin-left: 1.5rem;
  line-height: 1.9em;
}


.list ul, .list ol {
  margin-left: 1.5rem;
}
.list ul > li {
  list-style: disc;
}
.list ol > li {
  list-style: decimal;
}



a {
  transition: all .3s ease;
  color: var(--link);
  cursor: pointer;
}

a:hover,
a:focus,
a:active {
  color: var(--linkHover);
  text-decoration: none;
}

@media (min-width: 480px) and (max-width: 767px) {
  body {
    line-height: 1.4;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 20px 0 10px;
    line-height: 1.2;
  }

  h1 {
    font-size: 2.2rem;
    line-height: 1.3;
  }

  h2 {
    font-size: 1.9rem;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.7rem;
    line-height: 1.3;
  }

  h4 {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  h5 {
    font-size: 1.5rem;
    font-weight: 600;
  }

  h6 {
    font-size: 1rem;
    font-weight: 700;
    margin: 10px 0;
    line-height: 1.3;
  }

  ul {
    line-height: 1.8;
  }

  ol {
    margin-left: 20px;
  }

  button,
  .btn,
  .btn--default {
    font-size: 18px;
  }
}

@media screen and (max-width: 480px) {
  body {
    line-height: 1.4;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    margin: 20px 0 10px;
    line-height: 1.3;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.7rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.4rem;
    line-height: 1.4;
  }

  h5 {
    font-size: 1.2rem;
    font-weight: 600;
  }

  h6 {
    font-size: 1rem;
    font-weight: 700;
    margin: 10px 0;
  }

  p {
    line-height: 1.4;
  }

  ul {
    line-height: 1.8;
  }

  ol {
    margin-left: 20px;
  }

  button,
  .btn,
  .btn--default {
    font-size: 18px;
    width: 90%;
  }
}

/**************
  btn 共用 start
 **************/
 button,
 .btn {
   color: #ffffff;
   transition: all .3s ease;
   font-size: 16px;
   line-height: 1.4;
   border: none;
   outline: none;
   font-family: "微軟正黑體", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 button:focus,
 button:hover,
 .btn:focus,
 .btn:hover {
   color: #ffffff;
   outline: none;
 }
 
 .btn-inline {
   color: #333;
   transition: all .3s ease;
   font-size: 16px;
   line-height: 1.4;
   border: none;
   outline: none;
   font-family: "微軟正黑體", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .btn-inline:focus,
 .btn-inline:hover {
   color: #333;
   outline: none;
 }
 
 .btn-block {
   display: block;
   width: 90%;
   max-width: 350px;
   margin: 1% auto 2%;
   padding: 15px;
   font-size: 18px;
   letter-spacing: 1px;
   box-shadow: 0px 4px 4px 0px #00000040;
   background-color: var(--theme-feat);
 }

.btn-default {
  font-size: 18px;
  letter-spacing: 3px;
  display: inline-block;
  color: #fff;
  background-color: var(--theme);
  border-radius: 10px;
  padding: 0.8rem 0;
  width: 30%;
}

.btn-default:focus,
.btn-default:hover,
.btn-default:active {
  color: #fff;
  background: #050c5c;
}

.btn-line {
  font-size: 18px;
  letter-spacing: 3px;
  display: inline-block;
  border-radius: 10px;
  padding: 0.8rem 0;
  width: 30%;
  border-radius: 0;
  background: #fff;
  color: #066999;
  border: 1px solid #d4d4d4;
}

.btn-line:focus,
.btn-line:hover,
.btn-line:active {
  color: #088bca;
  background-color: #fff;
}

.btn-line-s {
  letter-spacing: 3px;
  display: inline-block;
  padding: 1px 8px 0px;
  border-radius: 5px;
  color: var(--theme-hit);
  border: 1px solid var(--theme-hit);
  font-size: 90%;
  margin: 0 3px;
}

.btn-line-s:focus,
.btn-line-s:hover,
.btn-line-s:active {
  background-color: var(--theme-hit);
  color: var(--theme);
}

.btn-outline {
  color: var(--link);
  border: 1px solid var(--link);
}

.btn-outline:focus,
.btn-outline:hover {
  background: var(--linkHover);
  border-color: var(--linkHover);
  color: #fff;
}

.more {
  text-align: right;
  float: right;
}

.more::after {
  content: '';
  clear: right;
}

/**************
  btn 共用 end
 **************/


 a {
  color: #F56400;
}

a:hover {
  color: #1F71F4;
  text-decoration: none;
}

section{
  padding: 3% 0 5%;
}

@media (max-width: 767px) {
  section {
    padding: 20px 15px;
    /* overflow: hidden; */
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.sec_head {
  z-index: 1;
}
.sec-title {
  margin: 10px 0 70px;
  line-height: 1;
  position: relative;
}
.sec-title::after {
  content: '';
  /* display: block; */
  position: absolute;
  background: linear-gradient(#F56400 0%,#F56400 30%,transparent 31%,transparent 35%,#FFCB11 36%,#FFCB11 66%,transparent 67%,transparent 71%,#53E882 72%);
  width: 20px;
  top: 35px;
  left: calc(50% - 15px);
  height: 70px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);

}
.sec-title span {
  color: #F56400;
}
.sec-title-top {}


.imgbox img {
  width: 100%;
}
/* -------------
     共用 end
------------*/






/* ---------------
         Navbar
   --------------- */
.navbar {
  padding: 10px 15px 15px 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  transition: background-color 0.5s ease 0s;
}

.navbar-brand {
  position: relative;
  left: -3%;
}

.navbar-brand img {
  height: 2rem; 
}
.navbar .bg-deco {
  position: absolute;
  background-color: #02c0e8;
  width: 100%;
  height: 230%;
  -webkit-transform: skew(36deg, -6deg) rotate(2deg);
  transform: skew(36deg, -5deg) rotate(2deg);
  top: -100%;
  left: -7%;
  z-index: -1;
}
.navbar .bg-deco::before {
  content: '';
  position: absolute;
  background-color: #00758d;
  width: 102%;
  height: 130%;
  -webkit-transform: skew(-30deg, 2deg);
  transform: skew(-30deg, 2deg);
  left: 2%;
  top: -8%;
}

.navbar-container {
  position: relative;
  justify-content: flex-end;
  width: 80%;
  left: 0;
}

.navbar .svg-inline--fa.fa-w-14 {
  color: #FFF;
  font-size: 1.6rem;
}

.navbar button:focus {
  outline: 1px dotted;
}

.navbar-list {
  
}
.navbar-list .nav-item {
  padding-right: 6px;
  display: block;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
}
.navbar-list .nav-item.signup {
  position: absolute;
  right: -15%;
  top: 100%;
  background-color: #00758d;
  border-radius: 20px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px; 
  border-bottom: 6px #bfeff9 solid;
}

.nav-item.signup:hover {
   background-color: #ea6300;
   border-bottom: 6px #fff196 solid;
}

.navbar-list .nav-item.signup i {
  font-size: 14px;

}

.navbar-list .nav-link {
  color: #fff;
  padding-top: 0.8rem;
  font-weight: normal;
}

.navbar-list .nav-link.active,
.navbar-list .nav-link:hover {
  color: #fff196;
  transition: all 0.3s ease;
}
/* .navbar.solid {
  background: rgba(255, 203, 71, 0.9) !important;
  transition: background-color 0.7s ease 0s;
} */
.navbar i.fas.fa-bars {
  color: #FFF;
  font-size: 30px;
}

.btn-hamburguer {
  background-color: #005d70;
  padding: 10px 15px;
}
@media (max-width: 1300px) {
  .navbar-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  .navbar .bg-deco {
    width: 85%;
    left: 0;
  }
  .navbar .bg-deco::before {
    width: 100%;
  }
  .navbar-list {
    width: 100%;
  }
  .navbar-list .nav-link {
    padding-top: 0.5rem;
  }
  .navbar-list .nav-item.signup {
    position: relative;
    padding: 0 5px;
    right: 0%;
    width: 15%;
    box-shadow: 0 0 0 3px #fff;
  }
  .navbar-list .nav-item.signup i {
    font-size: 16px;
  }
}
@media (max-width: 991px) {
  .navbar {
    background-color: #005d70;
  }
  .navbar .bg-deco {
     /*width: 90%; */
    display: none;
  }
  .navbar-container {
    max-width: 100%;
  }
  .navbar-list .nav-item {
    background-color: #005d70;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #F56400;
  }
  .navbar-list .nav-item.signup {
    background-color: #005d70;
    width: 100%;
    text-align: center;
    border-radius: 0px;
    box-shadow: none;
  }
  .navbar-list .nav-link {
    
  }
}



/* ---------------
         Navbar end
   --------------- */


.btn-main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 15px 38px;
  border-radius: 6px;
  border: 1px solid transparent;
  color: #FFFFFF;
  background-color: #F56400;
  font-size: 1.4rem;
  letter-spacing: 1px;
  transition: all 0.15s linear;
}

.btn-main:hover {
  background-color: #ffffff;
  border-color: #F56400;
  color: #F56400;
  transform: translateY(-5px) scale(1.05);
}

.btn-main:active {
  background-color: transparent;
  border-color: #F56400;
  color: #F56400;
  transform: translateY(5px) scale(0.95);
}

.btn-main:disabled {
  background-color: rgba(255, 255, 255, 0.16);
  color: #8E8E93;
  border-color: #8E8E93;
}

.btn-sub {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 15px 38px;
  border-radius: 6px;
  border: 2px solid #559AF8;
  color: #559AF8;
  background-color: #ffffff;
  font-size: 1.4rem;
  letter-spacing: 1px;
  transition: all 0.15s linear;
}

.btn-sub:hover {
  background-color: #559AF8;
  color: #ffffff;
  transform: translateY(-5px) scale(1.05);
}

.btn-sub:active {
  background-color: transparent;
  border-color: #559AF8;
  color: #559AF8;
  transform: translateY(5px) scale(0.95);
}




/* index kv */
.kv {
  min-height: 65vh;
  padding: 0px 10px;
}
.kv .kv-bgbox {
  position: relative;
}
.kv .kv-bgbox .kv-bg {
  position: absolute;
  top: -100px;
  right: -25%;
  width: 120%;
}
.kv .kv-txtbox {
  padding-left: 16%;
  padding-top: 10%;
  text-align: center;
}
.kv .kv-txtbox .kv-txt {
  width: 100%;
}
.kv .kv-txtbox .loaction {
  font-size: 20px;
  font-weight: 500;
}

@media (max-width: 1366px) {
  .kv {
    min-height: 50vh;
  }
  .kv .kv-bgbox .kv-bg {
    
  }
  .kv .kv-txtbox {
    padding-top: 10%;
    padding-left: 8%;
  }
}
@media (max-width: 991px) {
  .kv {
    min-height: fit-content;
  }
  .kv .kv-bgbox .kv-bg {
    position: relative;
    top: -15%;
    right: -10%;
    left: 0;
    width: 120%;
  }
  .kv .kv-txtbox {
    padding-right: 0;
    padding-left: 2%;
    padding-right: 2%;
  }
  .navbar-list .nav-item:hover,.navbar-list .nav-item:focus {
    background-color: #ff9247;
  }
  .navbar-list .nav-item.signup {
    background-color: #f1a40c;
  }
  .navbar-list .nav-item.signup:hover, .navbar-list .nav-item.signup:focus {
    background-color: #f5b637;
  }
  .navbar-list .nav-item.signup .nav-link {
    color: #333;
  }
}
@media (max-width: 767px) {
  .kv {
    min-height: 40vh;
  }
  .kv .kv-bgbox {
    margin-bottom: -80px;
  }
  .kv .kv-bgbox .kv-bg {
    position: relative;
    top: -80px;
    right: 0%;
    left: 10%;
    width: 110%;
  }
  
  .navbar-list .nav-item.signup {
    position: relative;
  }
}



/* forword */
.sec_foreword {
  padding: 3% 1% 4%;
  text-align: justify;
  border-top: 6px #00c0e8 solid;
  /*border-bottom: 6px #00c0e8 solid;*/
}

.sec_foreword2 {
  padding: 3% 1% 4%;
  background-color: #eee;

}
.main-title{
  font-size: 2.2rem;
  margin: 0;
  font-weight: 600;
  color: #006378;
  position: relative;
  padding: 30px 0 16px;
}
/*.main-title::after {
  content: '';
  position: absolute;
  left: -200px;
  bottom: 0px;
  background: url('../img/deco-title.svg')no-repeat center center /100%;
  width: 180px;
  height: 80px;
}
*/
.sec_foreword span {
  font-size: 22px;
  font-weight: 400;
  color: #444;
}

.sub-title {
  font-size: 20px;
  padding: 14px 16px;
  line-height: 1.5;
  color: #666;
  letter-spacing: 0.5px;
}

.sub-title:hover {
  background-color: #00abce;
  color: #fff;
  border-radius: 16px;
}

/* 嚴選主軸 */
.sec_feat {
  background: url('../img/photo.jpg')no-repeat center center /100%;
  padding: 5%;
}
.sec_feat .sec_head {}
.sec_feat .sec-title-top {
  color: #00c0e8;
}
.sec_feat .sec-title {}
.feat-item {
  
}
.feat-item .item-imgbox {
  text-align: center;
}
.feat-item .item-imgbox::before,.feat-item .item-imgbox::after {
  display: inline-block;
  color: #FF6B00;
  text-shadow: 0 0 0 1px #000;
  font-size: 8rem;
  font-weight: 800;
  text-shadow: 3px 3px 0 #333,-3px 3px 0 #333,3px -3px 0 #333,-3px -3px 0 #333;
  position: absolute;
  top: 30px;
  transition: .3s ease;
}
.feat-item .item-imgbox::before {
  content: '[';
  left: 0;
}
.feat-item .item-imgbox::after {
  content: ']';
  right: 0;
}

.feat-item-poster .item-imgbox::before,.feat-item-poster .item-imgbox::after {
  color: #fee100;
}
.feat-item-clock .item-imgbox::before,.feat-item-clock .item-imgbox::after {
  color: #3f8bc1;
}

.feat-item .item-imgbox {
  min-height: 250px;
}
.feat-item .item-imgbox img {
  width: 80%;
}
/* hover */
.feat-item .item-imgbox:hover img {
  transition: .3s ease;
  width: 68%;
}
.feat-item .item-imgbox:hover::before, .feat-item .item-imgbox:hover::after {
  text-shadow: 0px 0px 0 #333;
}

.item-txtbox {
  background-color: #ffffff;
  padding: 18px 32px 40px;
  opacity: 0.95;
  font-size: 16px;
  text-align: justify;
  border-radius: 8px;
  box-shadow: 2px 2px 5px #333;

}
.feat-item .feat-title {
  text-align: center;
  border-bottom: 2px dotted #aaa;
  padding: 10px 0;
  color: #0095c0;
  font-weight: 700;
}

/* Quote carousel */
.sec_quote {}
.quote-slide-group {
  background-color: #F5F5F5;
  border-radius: 20px;
  padding: 20px 10px;
}
.carouselQuote {}
.carouselQuote .carousel-control-prev, .carousel-control-next {
  color: #333;
  font-size: 3rem;
  width: 8%;
}
.carouselQuote .carousel-control-prev:hover,
.carouselQuote .carousel-control-prev:focus,
.carouselQuote .carousel-control-next:hover,
.carouselQuote .carousel-control-next:focus {
  color: #333;
}
.carouselQuote .carousel-inner {
  width: 80%;
  margin: 0 auto;
}
.carouselQuote .carouselQuote-item {
  min-height: 400px;
}
.carouselQuote-item .small {
  color: #38618F;
  text-align: right;
}

.quote-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #04437e;
}

.quote-txt {
  font-size: 16px;
  text-align: justify;
}

.quote-number {
  font-size: 50px;
  font-weight: 700;
  text-align: center;
  color: #04437e;
}

.point-title {
  font-size: 22px;
  line-height: 1.4;
  border-bottom: 2px #ddd dotted;
  padding-bottom: 1em;
  color: #5cbadc;
  font-weight: 700;
}




.deco-poster01 {
  position: absolute;
  left: -2%;
  top: -50px;
  background-color: #F56400;
  width: 200px;
  height: 180px;
  transform: skew(-9deg, 8deg);
  box-shadow: 10px 10px 0 #00000030;
  z-index: 1;
}
.deco-poster02 {
  position: absolute;
  right: -5%;
  bottom: -150px;
  background-color: #FFCB11;
  width: 200px;
  height: 180px;
  transform: skew(9deg, -8deg);
  box-shadow: 10px 10px 0 #00000030;
  z-index: 1;
}
@media (max-width: 767px) {
  .deco-poster01,.deco-poster02 {
    z-index: 0;
  }
}



/* ---------------
     News
 ------------- */
.sec_news {
  background: #00c0e8;
  color: #fff;
  position: relative;
  margin: 10% 0;
}
.sec_news::before {
  content: '';
  position: absolute;
  top: -99px;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom right, #fff 0%, #fff 50%, rgba(0,192,232) 50.5%, rgba(0,192,232) 100%);
  z-index: -1;
}
.sec_news::after {
  content: '';
  position: absolute;
  bottom: -99px;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to top left, #fff 0%, #fff 50%, rgba(0,192,232) 50.5%, rgba(0,192,232) 100%);
  z-index: -1;
}
.sec_news .sec_head {}
.sec_news .sec-title {}
.news-item-cover {
  padding: 5% 1%;
}
.news-item {
  padding: 20px;
  background-color: #fff;
  border-radius: 20px;
  color: #333;

}
.news-item a {
  color: #333;
}
.news-item:hover {
  box-shadow: 2px 2px 4px #666;
  cursor: default;
}

.news-item-imgbox {
  border-radius: 20px;
}

.news-item-imgbox img {
  width: 80%;
  border-radius: 50%;
}

.news-item-title {
  font-weight: 700;
}

.news-item-txt p{
  font-size: 14px;
  color: #666;
  line-height: 1.3;
  padding: 1em 0em 0.2em;
}

.news-sub-card {
  background-color: #00667d;
  color: #fff;
  font-size: 16px;
  border-radius: 10px;
  margin: 10px 3px;
  padding: 8px 14px;
}


.news-sub-card:hover {
  cursor: default;
  background-color: #087d95;
}



@media (max-width: 767px) {
  .sec_news .sec-title span {
    color: #fff;
  }
}






/* -------------
    Speaker
  ------------- */
.sec_speaker {}
.sec_speaker .sec_head {}
.sec_speaker .sec-title {}
.speaker-item-group {
  padding-top: 20px;
}
.speaker-item {
  width: 90%;
  margin: 2% auto;
}
.speaker-item:hover {
  
}
.speaker-item::before {
  content: '';
  background: url('../img/deco-line.svg') no-repeat center center /100%;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 50px;
  position: absolute;
  transition: 1s ease;
  z-index: -1;
  opacity: 0;
}
.speaker-item:hover::before {
  opacity: 1;
}
.speaker-item .imgbox {
  position: relative;  
}
.speaker-item .imgbox img {
  box-shadow: 0 0 2px #888;
  border-radius: 8px;
  transition: .3s ease;
}
.speaker-item.keynote .imgbox::after {
  content: 'KEYNOTE';
  position: absolute;
  left: -20px;
  bottom: 10px;
  background-color: #F56400;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
}
.speaker-item .imgbox {}
.speaker-txtbox {
  padding: 10px 32px;
  color: #333;
}
.speaker-name {
  margin: 10px 0;
  word-break: break-word;
  line-height: 1.4;
  border-bottom: 2px #ccc dotted;
  padding-bottom: 12px;
}
.speaker-title {
  margin: 0px 0 20px;
  color: #666;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
}








/* ---------------
         ticket
   --------------- */
.sec_ticket {
  background: url('../img/bg.jpg')no-repeat center center /100%;
  color: #fff;
}
.sec_ticket .sec_head {}
.sec_ticket .sec_head .sec-title {
  color: #fff;
}
.ticket-intro-stripe-group {}
.ticket-intro-stripe-group label {}
.ticket-intro-stripe-group .ticket-intro-stripe {}
.ticket-intro-stripe-group .ticket-intro-stripe a {
  color: #FFCB11;
}
.ticket-intro {
  padding: 10px 10px 30px;
}
.ticket-intro label {
  font-weight: 500;
}
.ticket-item-group {
  padding: 10px 0px 30px;
}
.ticket-item-cover {
  padding-bottom: 2%;
}
.ticket-item {
  text-align: center;
}

/*.ticket-item:hover{
  opacity: 0.75;
  cursor: pointer;
}*/

.ticket-head {
  padding: 10px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  min-height: 100px;
}
.ticket-head .ticket-title {
  margin: 0;
  font-size: 18px;
  padding: 8px;
}
.ticket-head .small {}
.ticket-head [data-toggle="tooltip"]{
  width: auto;
  height: auto;
  padding: 0 4px;
}

.ticket-item.ep01 .ticket-head {
  background-color: #FF005C;
}
.ticket-item.ep02 .ticket-head {
  background-color: #ca3c08;
}
.ticket-item.ep03 .ticket-head {
  background-color: #4a2693;
}
.ticket-item.ep04 .ticket-head {
  background-color: #208875;
}
.ticket-item.ep05 .ticket-head {
  background-color: #596971;
}

.ticket-pricebox {
  background-color: #fff;
  padding: 30px 20px 10px;
  color: #333;
  min-height: 300px;
}

.ticket-pricebox:hover {
}

.ticket-pricebox .price {
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.ticket-pricebox .price span {
  font-size: 1rem;
}
.btn-buy {
  display: block;
  color: #1F71F4;
  text-align: right;
  font-weight: 500;
  width: 100%;
  font-size: 18px;
}

.btn-buy:hover{
  opacity: 0.7;
}

.ticket-pricebox .disabled {
  color: #888 !important;
  text-decoration: none;
  cursor: not-allowed;
}
.ticket-pricebox .btn-buy i {}
.ticket-notebox {}
.ticket-notebox .disc-list li {
  font-size: 16px;
  letter-spacing: 0.5px;
}





/* ---------------
         footer
   --------------- */
.footer {
  position: relative;
  padding: 20px 20px 30px;
  width: 100%;
  background-color: #FFF;
  width: 100%;
  color: #111;
  font-size: 16px;
  border-top: 6px #00c0e8 solid;
}

.footer a {
  color: #333;
}

.footer a:hover {
  color: #00a7ca;
}

.footer ul {
  list-style-type: square;
}

.footer-year {
  margin: 30px;
}

.footer-bottom {
  font-size: 16px;
  letter-spacing: 2px;
  padding-top: 15px;
  border-top: 1px solid #ffffff;
}

/*sidebar*/
#sidebarReg .register {
  background-color: #f4c900;
  color: #333;
  position: fixed;
  bottom: 15%;
  right: 0;
  border: none;
  display: block;
  font-weight: bold;
  font-size: 20px;
  writing-mode: vertical-lr;
  padding: 25px 10px;
  z-index: 10;
  border-radius: 10px 0 0 10px;
  box-shadow: 2px 3px 8px 0px rgba(58, 15, 228, 0.32);
}

#sidebarReg .register:hover {
  background-color: #c7b2ea;
  color: #fff;
}


#gotopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #888;
  color: #fff;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 18px;
  opacity: 0.7;
  transition: 0.2s;
}

#gotopBtn:hover {
  background-color: #F56400;
  opacity: 1;
}

.gift {
  padding-top: 30px;
}

.gift p{
  font-size: 16px;
  color: #333;
  padding-top: 10px;
}

.gift img{
  width: 150px;
}

.check-box {
  width:18px;
  height: 18px;
  margin: 8px;
}

.form-style label {
  font-weight: 700;
}

.btn-primary {
  background-color: #00c0e8;
  padding: 1em 2em;
  font-size: 24px;
  margin-top: 26px;
  font-weight: 700;
  letter-spacing: 5px;
}