@charset "UTF-8";
/*內容區塊定義範例 可自行調整
-------------------------------------------------- */
/* ------------------

主內容區塊 START

------------------- */
.site-main-wrapper {
  /*主內容100%背景設定*/
  background: #fff;
}

.site-main-wrapper img {
  vertical-align: bottom;
}

.site-main-wrapper .main-pic {
  width: 100%;
}

.site-main-wrapper .main-pic-m {
  width: 100%;
  display: none;
}

.banner-box-l{
  background: #1d1d1d url( ../images/events/banner-l.jpg) top center no-repeat;
  width: 100%;
  background-size: auto 100%,auto;
}

.banner-box-l2{
  background: url( ../images/events/banner-l2.png) top center no-repeat;
  width: 100%;
  background-size: auto 100%,auto;
}

.banner-box-l3{
  background: url( ../images/events/banner-l3.png) top center no-repeat;
  width: 100%;
  background-size: auto 100%,auto;
}

.banner-box-l img, .banner-box-l2 img, .banner-box-l3 img{
  width: 100%;
  height: auto;
}

.li-st{
  list-style-type: decimal !important;
}

.mb10{
  margin-bottom: 10px;
}

.txtc{text-align: center;}

.align_c{text-align: center;}
.bg-yellow-l {background:#e9e1d7 !important;}
.bg-yellow-l2{background:#02070a !important;}
.bg-cloth {background: url(../images/events/cloth.png) repeat;}
.bg-blue{background: url(../images/events/bg-blue.png) repeat;}
.green{color: #588c3f;}
.green:hover{text-decoration: underline;}
.red{color:red;}
.white{color:white !important;}

.content-threeimg > li a{ display: block; margin-bottom: 5px;}

.st-imgst{
  padding: 2%;
}

.st-imgst img{
  width: 100%;
  height: auto;
}

.bod_tb table{
  width: 100%;
  margin-bottom: 50px;
  margin-top: 40px;
}
.bod_tb td{
  margin: 0 auto
}

.bod_tb td:nth-child(1){
  border-right: 1px dashed #555;
  padding-right: 20px;
}

.bod_tb td:nth-child(2){
  padding: 0 20px;
}

.con-box-in:before{content:''; display:table;}
.interests{width:50%; display: table-cell; vertical-align: middle;}
.interestes{width:50%; display: table-cell; vertical-align: middle;}
.intstimg{width:50%; display: table-cell; vertical-align: middle; text-align: center; line-height: 0 !important;}
.no_interests{vertical-align: middle; text-align: center;}
.bg_gray{background-color: #f2f3f5;}
.ap01{background: url(../images/events/ap01bg.jpg) no-repeat; background-size: cover;}
.no_interests h3.content-title{margin-top:50px;}
.no_interests img, .no_interests img.ap02{width:100%;}
.no_interests img.ap02{max-width: 896px;}
.pimpt{display:inline-block; text-align:left;}
.pimpt .hatch{font-size: 20px; margin-bottom:15px;}
.pimpt .center{text-align: center;}
.pimpt img{margin-bottom: 30px;}
.content-threeimg{margin-bottom: 30px;}

.cb-anchor{
  position: absolute;
  top: 0px;
}
.content-des b.das{font-size: 24px !important;}
.site-content .stp_ciont{display: inline-block; margin: 0 auto; text-align: left; padding:0 20px 30px;}
.lnp{padding-left: 0;}
.site-content .stp_ciont img.stp01{width:100%; margin-bottom: 20px;}
.route{counter-increment: step-counter;}
.route::before{
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: #F00;
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}
.site-content .main_space{width:100%; display: table;}

.site-content .main_space a.setting, .site-content .content-twoimg .pimpt a.punch, a.setting{
    display: inline-block; padding: 0 30px;
    border-radius: 4px;
    line-height: 45px;
    height:45px;
    border:#fff 1px solid;
    transition: transform 0.3s, opacity 0.3s;
    color: #fff;
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
    -webkit-transform: scale(1);
    font-size: 18px;   
}

.site-content .content-twoimg .pimpt a.punch{
    border:#0D64CD 2px solid;
    color:#0D64CD;
    font-weight: bold;
    margin-bottom: 20px;
}
.site-content .main_space a.setting:hover, .site-content .content-twoimg .pimpt a.punch:hover, a.setting:hover{
    color: #fff;
    transition: transform 0.1s, opacity 0.1s;
    transform: scale(1.1);
    -webkit-transition: -webkit-transform 0.1s ease, opacity 0.1s ease;
    -webkit-transform: scale(1.1);
    text-decoration: none;
    background-color: rgb(21, 113, 185);
}
.goset{padding-left: 46px; margin-top: 30px;}

.site-content .interests .main_topic{ font-size: 70px; letter-spacing: 2px; margin-bottom: 30px;}
.site-content .interests .main_subt{ font-size: 35px; letter-spacing: 4px; margin-bottom: 30px;}
.site-content .interests .main_subscrb{font-size: 18px; letter-spacing: 4px; line-height: 28px; margin-bottom: 30px;}
.fin{padding:0 6%; text-align: left;}


@media (max-width: 768px) {
  .site-main-wrapper .main-pic {
    display: none;
  }
  .site-main-wrapper .main-pic-m {
    display: block;
  }
  .interests{display: block; width:100%; vertical-align: middle;}
  .intstimg{ display: block; width:100%; vertical-align: middle; text-align: center;}
  .intstimg img{width:100%;}
  .no_interests{vertical-align: middle; text-align: center;}
  .interests h3.content-title, .no_interests h3.content-title {margin: 30px 0 15px; font-size:28px; text-align: center;}
  .interests h3.lkk{font-size: 40px;}
  .content-threeimg{margin-bottom:0px;}

  .cb-anchor{
    position: absolute;
    top: -55px;
  }
  .content-des b.das {
    font-size: 20px !important;
  }
  .pimp{padding-top: 30px;}
  .banner-box-l2{
    background: url(../images/events/cloth.png) repeat;
    width: 100%;
    background-size: auto 100%,auto;
  }
  .site-content .stp_ciont .stp_ciont{padding:0 20px 30px; display: inline-block; margin: 0 auto; text-align: left;}
  .banner-box-l{
    background: #1d1d1d url( ../images/events/banner-m.jpg) top center no-repeat;
    width: 100%;    
  }
  .site-content .interests .main_topic{font-size: 60px; letter-spacing: 2px; margin-top: 40px; margin-bottom: 20px; text-align: center;}
  .site-content .interests .main_subt{font-size: 26px; letter-spacing: 4px; margin-bottom: 30px; text-align: center;}
  .site-content .interests .main_subscrb{font-size: 18px; letter-spacing: 2px; line-height: 28px; margin-bottom: 30px; text-align: center;}
  .fin {text-align: center;}
  .pimpt .hatch{font-size: 18px; margin-bottom:5px;}
}

@media (max-width: 568px) {
  .interests h3.content-title, .no_interests h3.content-title {margin: 15px 0 15px; font-size:28px; text-align: center;}
  .cb-anchor{position: absolute;top: -50px;}
}


@media only screen and (min-width: 769px){
  .site-content .interests .main_topic{font-size: 55px; letter-spacing: 2px; margin-top: 40px; margin-bottom: 20px; text-align: left;}
  .banner-box-l{height: 700px;}
   .banner-box-l2{height: 700px;}
   img.mainpic{width:auto; height: 700px;}
}


@media only screen and (min-width: 940px){
   .site-content .interests .main_topic{font-size: 55px; padding-left:30px;  letter-spacing: 2px; margin-top: 40px; margin-bottom: 20px; text-align: left;}
   .site-content .interests .main_subt{ font-size: 28px; padding-left:30px; letter-spacing: 4px; margin-bottom: 30px;}
   .site-content .interests .main_subscrb{font-size: 18px; padding-left:30px; letter-spacing: 4px; line-height: 28px; margin-bottom: 30px;}
   .site-content .main_space a.setting{margin-left: 30px;}
   .banner-box-l{height: 750px;}
   .banner-box-l2, .banner-box-l3{height: 460px;}
   img.mainpic{width:auto; height: 750px;}
}

@media only screen and (min-width: 1170px){
   .site-content .interests .main_topic{ font-size: 70px; letter-spacing: 2px; margin-bottom: 30px;}
   .site-content .interests .main_subt{ font-size: 35px; letter-spacing: 4px; margin-bottom: 30px;}
   .site-content .interests .main_subscrb{font-size: 18px; letter-spacing: 4px; line-height: 28px; margin-bottom: 30px;}
   .banner-box-l{height: 875px;}
   .banner-box-l2, .banner-box-l3{height: 490px;}
   img.mainpic{width:auto; height: 874px;}
}

/*-- 內容區塊模組2 (不需要可移除)--*/
.sm-content2 {
  background: #046c7c;
}

.sm-content2 {
  zoom: 1;
}

.sm-content2:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.sm-content2 .smc-row {
  display: flex;
  align-items: center;
}

.sm-content2 .page-title2 {
  width: 34.1%;
  float: left;
  display: block;
  padding: 0 20px;
  font-weight: bold;
  text-align: center;
  color: white;
  line-height: 1.3;
}

.sm-content2 .page-title2 h1 {
  font-size: 30px;
  margin-bottom: 10px;
}

.sm-content2 .page-title2 h2 {
  font-size: 22px;
}

.sm-content2 .site-main-pic {
  width: 66%;
  float: right;
}

@media (max-width: 768px) {
  .sm-content2 .smc-row {display: block;}
  .sm-content2 .page-title2 {width: 100%; float: none; padding: 65px 15px 30px;}
  .sm-content2 .site-main-pic {width: 100%; float: none;}
  .content-threeimg li .pimpt{display:inline-block; text-align:center; margin-bottom: 30px;}
  img.mainpic{width:auto; height: 500px;}
}

/*-- 內容區塊模組2 END --*/
/*--主內容區塊 END

-------------------------------------------------- */
/* ------------------

頁面導覽 START (不需要可移除)

------------------- */
.main-nav {
  background: #3C651C;
  /*頁面導覽100%背景*/
}

.main-nav .container {
  background: #3C651C;
  /*頁面導覽最寬1170px背景*/
}

.main-nav .main-nav-pc li, .main-nav .main-nav-pc li a {
  color: white;
  /*頁面導覽 文字顏色*/
}

.main-nav .main-nav-pc li a.on-touch, .main-nav .main-nav-pc li a.active {
  background: #588f2d;
  /*頁面導覽 hover和觸控顏色、運行中顏色*/
}

/*--頁面導覽 END

-------------------------------------------------- */
/* ------------------

詳細內容區塊 START

------------------- */
.site-content-wrapper {
  
}

.site-content-wrapper .content-title {
  height: 50px;
  line-height: 50px;
  font-size: 40px;
  font-weight: normal;
  margin-top: 0px;
  color: #000;
  margin-bottom: 30px;
}

.content-title{
  letter-spacing :1px;
  padding-left: 45px;
}

.site-content-wrapper .alittle{margin-bottom:40px;}

.ic_a{
  background: url(../images/events/icon-1.png) no-repeat left center;
}

.ic_b{
  background: url(../images/events/icon-2.png) no-repeat left center;
}

.ic_c{
  background: url(../images/events/icon-3.png) no-repeat left center;
}

.ic_d{
  background: url(../images/events/icon-4.png) no-repeat left center;
}

.ic_e{
  background: url(../images/events/icon-5.png) no-repeat left center;
}

.bt_box{
  width: 100%;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 0px;
}

.bt_box a{
  width: 40%;
  padding: 10px;
  font-size: 26px;
  line-height: 36px;
  background-color: #000;
  color: #fff;
  font-weight: bold;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  transition: 0.4s;
}

.bt_box a:hover{
  color:#999;
  width: 42%;
  font-size: 36px;
  transition: 0.2s;
}

.site-content-wrapper a.but-st{
  background: #3C651C;
  border-radius: 10px;
  padding: 2px 10px 5px 10px;
  font-size: 14px; 
  color: #fff;
  margin-left: 20px;
  vertical-align: 4px;
  transition: 0.4s;
  line-height: 20px;
  display: inline-block;
}

.site-content-wrapper a:hover.but-st{
  background: #588f2d;
}


.site-content-wrapper .content-des {
  font-size: 16px;
  color: #000;
  padding-left: 46px;
  line-height: 28px;
  margin-bottom: 12px;
}
.site-content-wrapper .lnp{padding-left: 0;}

.site-content-wrapper .inscript li > ul{margin-left:24px;}
.site-content-wrapper .inscript li > ul > li{list-style: disc; margin-bottom: 5px;}
.site-content-wrapper ol{padding-left: 10px;  margin: 20px 0 0 0;  padding-right: 0; list-style-type: none; display: inline-block;}
.site-content-wrapper ol li{counter-increment:step-counter; margin-bottom: 5px; line-height: 30px; display: inline-block;}
.site-content-wrapper ol li::before{
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: #F00;
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}


@media (max-width: 768px) {
  .site-content-wrapper .content-des {
    padding-left: 12px;
  }
  .content-title{
    padding:0;
  }
  .alittle{
    margin-top: 20px !important;
  }
  .pimpt .hatch{margin-bottom: 10px;}
  .pimpt img {margin-bottom: 20px;}  
}

@media (max-width: 1170px) {
  .site-content-wrapper, .banner-box-l  {
    padding: 0px 2.5%;
  }
  .intstimg img{max-width:500px;}
}

.site-content-wrapper .content-list {
  font-size: 17px;
  color: #000;
  line-height: 1.7;
  padding-left: 36px;
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 10px;
}

.site-content-wrapper .content-list li {
  margin-bottom: 5px;
}

.site-content-wrapper .content-list ol {
  list-style-type: decimal;
  list-style-position: inside;
  padding-left: 22px;
}

@media (max-width: 1170px) {
  .site-content-wrapper .content-list {
    padding: 0 2.5% 0 2.5%;
    margin-left: 28px;
  }
}

@media (max-width: 768px) {
  .site-content-wrapper .content-list {
    padding: 0 3% 0 3%;
    margin-left: 26px;
  }
  .site-content-wrapper a.but-st{
    margin-left: 2.5%;
    margin-bottom: 3.5%;
    padding: 2px 10px;
  }
  .bt_box a{
    width: 80%;
    font-size: 22px;
    margin-bottom: 0px;
    line-height: 27px;
  }
  .bt_box a:hover{
    width: 80%;
    font-size: 25px;
  }
  .site-content-wrapper .inscript {
    padding-left: 30px;
  }
}

.site-content-wrapper .social-share {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 15px;
}

.site-content-wrapper .social-share li {
  display: inline-block;
  margin-left: 10px;
  vertical-align: top;
}

@media (max-width: 768px) {
  .site-content-wrapper .social-share {
    display: none;
  }
  .goset{padding: 0; text-align: center; margin-bottom: 30px;}
}

/*--詳細內容區塊 END

-------------------------------------------------- */
/* ------------------

註冊步驟 START (不需要可移除)

------------------- */
.step-content {
  width: 100%;
  max-width: 1170px;
  height: auto;
  margin: 0 auto;
  padding: 15px 0 0px;
  position: relative;
}

.step-content {
  zoom: 1;
}

.step-content:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.step-content .step-wrap {
  width: 30%;
  float: left;
  margin: 0px auto 20px;
}

.step-content .ic-arrow-r {
  width: 5%;
  float: left;
  display: inline-block;
  text-align: center;
  padding-top: 150px;
}

.step-content .ic-arrow-r.icon-arrow_r {
  font-size: 40px;
  /*--箭頭尺寸--*/
  color: #AAA;
  /*--箭頭顏色--*/
}

.step-content .step-header {
  text-align: center;
  margin-bottom: 5px;
  color: #333;
}

.step-content .step-header p {
  line-height: 1.5;
  font-weight: bold;
}

.step-content .step-num {
  font-size: 28px;
  color: #00b9c5;
  font-weight: bold;
  margin-bottom: 5px;
}

.step-content .step-num sub {
  margin-right: 5px;
  position: relative;
  top: -8px;
  border-bottom: 1px solid #00b9c5;
  font-size: 12px;
  font-weight: bold;
}

.step-content .step-img {
  width: 210px;
  height: 200px;
  margin: 0 auto;
  background-image: url(../images/events/member-step.png);
  -webkit-background-size: 210px 1190px;
  -o-background-size: 210px 1190px;
  background-size: 210px 1190px;
}

.step-content .step-first {
  background-position: 0 7px;
}

.step-content .step-second {
  background-position: 0 -190px;
}

.step-content .step-third {
  background-position: 0 -388px;
}

.step-content .step-forth {
  background-position: 0 -587px;
}

.step-content .step-fixth {
  background-position: 0 -784px;
}

.step-content .step-sixth {
  background-position: 0 -982px;
}

.pb20{
  padding-bottom: 20px !important;
}

.mb20{
  margin-bottom: 20px !important;
}

.mb30{
  margin-bottom: 30px !important;
}

.mt30{
  margin-top: 30px !important;
}

.mt20{
  margin-top: 20px !important;
}

.ml20{
  margin-left: 20px !important;
}


@media (max-width: 768px) {
  .step-content .step-wrap {
    float: none;
    width: 100%;
    text-align: center;
  }
  .step-content .ic-arrow-r {
    display: none;
  }
  .step-content .step-img {
    width: 250px;
    height: 230px;
    margin: 0 auto;
    background-image: url(../images/events/member-step.png);
    -webkit-background-size: 250px 1408px;
    -o-background-size: 250px 1408px;
    background-size: 250px 1408px;
  }
  .step-content .step-first {
    background-position: 0 5px;
  }
  .step-content .step-second {
    background-position: 0 -228px;
  }
  .step-content .step-third {
    background-position: 0 -460px;
  }
  .step-content .step-forth {
    background-position: 0 -697px;
  }
  .step-content .step-fixth {
    background-position: 0 -932px;
  }
  .step-content .step-sixth {
    background-position: 0 -1165px;
  }
}

/*--註冊步驟 END

-------------------------------------------------- */
/* ------------------

詳細內容區塊 多圖排列  START (不需要可移除)

------------------- */
.content-twoimg {
  width: 100%;
}

.content-twoimg {
  zoom: 1;
}

.content-twoimg:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.content-twoimg li {
  float: left;
  width: 49%;
  margin-right: 2%;
  text-align: center;
}

.content-twoimg li:last-child {
  margin-right: 0;
}

.content-twoimg img {
  width: 100%;
  vertical-align: bottom;
}

@media (max-width: 1170px) {
  .content-twoimg {
    padding: 0 2.5%;
  }
}

@media (max-width: 568px) {
  .content-twoimg li {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
}

.content-threeimg {
  width: 100%;
}

.content-threeimg {
  zoom: 1;
}

.content-threeimg:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.content-threeimg li {
  float: left;
  width: 32%;
  margin-right: 2%;
  text-align: center;
}

.content-threeimg.fourthimg li {
  width: 23%;
}

.content-threeimg li:last-child {
  margin-right: 0;
}

.content-threeimg img {
  /* width: 100%; */
  vertical-align: bottom;
}

@media (max-width: 1170px) {
  .content-threeimg {
    padding: 0 2.5%;
  }
}

@media (max-width: 568px) {
  .content-threeimg li {
    float: none;
    width: 32%;
    margin-right: 0;
    margin-bottom: 20px;
    display: inline-block;
  }

  .content-threeimg.fourthimg li {
  width: 23%;
  }

  .content-threeimg li img {
    width: auto;
    max-width: 70%;
  }
  .intstimg img {
    width: 100%;
    height:auto;
  }
  img.mainpic{ width:261px;}

  .site-content .interests .main_topic {
    font-size: 50px;
  }
  .site-content .interests .main_subt {
    font-size: 26px;
    letter-spacing: 2px;
  }
}

/*--詳細內容區塊 多圖排列 END

-------------------------------------------------- */
/* ------------------

浮動選單 顏色調整 START (不需要可移除)

------------------- */
.nav-float ul {
  background: rgba(17, 17, 17, 0.96);
  /*浮動選單展開背景色*/
}

.nav-float li a {
  border-bottom: 1px solid #2b2b2b;
  /*浮動選單展開底線色*/
  color: #EEE;
  /*浮動選單展開文字色*/
}

.nav-float-trigger {
  background: rgba(17, 17, 17, 0.96);
  /*浮動選單收合背景色*/
}

.nav-float-trigger span {
  background: #EEE;
  /*浮動選單icon顏色*/
}

.nav-float-trigger.menu-nf-open span {
  background: rgba(238, 238, 238, 0);
  /*浮動選單icon顏色*/
}

.nav-float-trigger.menu-nf-open span::before, .nav-float-trigger.menu-nf-open span::after {
  background: #eeeeee;
  /*浮動選單icon顏色*/
}

/*--浮動選單顏色 END

-------------------------------------------------- */
.pc{
  display:block;
}

.mobile{
  display: none;
}




@media (max-width: 768px) {

  .pc{
    display: none;
  }

  .mobile{
    display: block;
  }
}

/*--頁籤--*/
.swiper-pagination-bullet {
  background: #000;
  opacity: 0.2;
}

.swiper-pagination-bullet-active {
  background: #FFF;
  opacity: 1;
}

/*--箭頭--*/
.swiper-button-prev,
.swiper-button-next {
  width: 50px;
  height: 50px;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next,
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: none;
  font-size: 50px;
  /*--箭頭大小--*/
  color: white;
  /*--箭頭顏色--*/
}

/*--圖片輪播 END

-------------------------------------------------- */
@media (max-width: 768px) {
  content: '';
  /*樣式可移除*/
}

@media (max-width: 568px) {
  content: '';
  /*樣式可移除*/
}

@media (max-width: 320px) {
  content: '';
  /*樣式可移除*/
}