article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  font-family: 'Quicksand','Noto Sans TC', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;    font-weight: 400;
  position: relative;
  background-color: var(--black-color);
}

img {
  max-width: 100%;
  height: auto;
}
button:focus,
a:focus {  outline: none;}
a {   color: var(--sub-color); }
a:hover {   color: var(--sub-color); text-decoration: none;}
ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

:root {
  --main-color: #2a2a2a;
  --sub-color:#B32823;
  --pink-color:#FAD4D1;
  --gray-color: #F6F6F6;
  --black-color:#000000;
}

.w1400 {
  max-width: 1366px;
  height: 100%;
}

.content_block {
  max-width: 1920px;
  margin: auto;
  overflow: hidden;
  position: relative;
  padding-top: 58px;
  
}
.gotop{position: fixed;right: 1%;
  bottom: 90px;width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 998;
  justify-content: center;
  border-radius: 50%;
  color: var(--white);
  background-color: var(--sub-color);
  transition: all .5s;
  animation: 2s arrowTop ease-out infinite;
}
@keyframes arrowTop {

  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  40% {
    transform: translateY(-20%)
  }

  60% {
    transform: translateY(-10%)
  }
}

/* 共用標題 */
.title-box {
  position: relative;
  font-size: 1.65rem;
  margin-bottom: 1.8rem;
  font-weight: 700;
  font-family: 'Cairo' ,Arial;
  text-align: center;
}
.main-title{padding: 0 10px;margin: auto;text-align: center;background: var(--white);display: inline;position: relative;z-index: 1;}
.title-box:before{
  content:'';display: block; position: absolute; 
  left: 0;
  width: 100%;height: 1px; background-color: var(--dark);top: 0;bottom: 0; margin: auto;
}

.title-box span {
  font-weight: 100;
  display: block;
  font-size: 1rem;
}
/* 共用按鈕 */

.submitBox{margin: 1rem 0;}
.submitbtn{width: 200px;}
.main-btn,.sendbtn{color: var(--white); border:1px solid var(--white);}
.main-btn{background-color: var(--black-color);}
.sendbtn{background-color: var(--sub-color);}
.main-btn:hover,.sendbtn:hover{ color:var(--white)}

@media (min-width: 992px) {
  .w1400 {
    margin: auto;
  }
 
  .title-box{
    font-size: 1.8rem;
  }
  .title-box span {
    font-size: 1.125rem;
  } 
 
}
@media (min-width: 1440px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1680px) {
  .container {
    max-width: 1440px;
  }
}
.text-red{color: var(--sub-color);}

/* 手機漢堡選單 */

.menu-icon__cheeckbox {
  display: none;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
  position: absolute;
  opacity: 0;
}
.menu-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  cursor: pointer;
  display: none;
  margin-bottom: 0;
}

.menu-icon div {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 25px;
  height: 12px;
}
.menu-icon span {
  position: absolute;
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--white);
  border-radius: 1px;
  transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
}

.menu-icon span:first-of-type {
  top: 0;
}

.menu-icon span:last-of-type {
  bottom: 0;
}

.menu-icon__cheeckbox:checked~.menu-icon div span:first-of-type {
  transform: rotate(45deg);
  top: 4px;
}

.menu-icon__cheeckbox:checked~.menu-icon div span:last-of-type {
  transform: rotate(-45deg);
  bottom: 5px;
}

/* 手機漢堡選單end */
/* 主選單開始 */
.navbar {
  padding: .5rem 0 .5rem;
  width: 100%;
  min-height: 4.5rem;
  position: fixed;
  background: var(--black-color);
  z-index: 100;
}
.content_block{padding-top: 4.5rem;}
.navbar-header{width: 100%;}
.navbar-header .logo a{height: 3.6rem; margin: auto; background-repeat: no-repeat; background-position: center; display: block; background-size: contain; }
.navbar-header .navbar-collapse {
  display: flex;
  flex-direction: column; 
  flex-wrap: wrap;
}
.navbar-header .navbar-collapse ul{padding: 0;align-items: flex-end; justify-content: center;}
.logo {
  margin: auto;
}

.nav li.logo a{
  padding:.5rem 1rem;margin: 5px;
  display: block;}

.nav li{flex:0 0 100%}
.nav li a{ color: var(--white); padding:.5rem 2.5rem;display: block;transition: all .5s ease;text-transform:uppercase;position: relative;}
.nav li a:hover:after{
  content:''; color: var(--white);
  width: 100%;height: 3px;background-color: var(--sub-color);position: absolute;
  left: 0;bottom: -6px;
}
.nav li a.home_menu:hover:after{display: none;}
.nav li a.join_menu{background-color: var(--sub-color);color: var(--white);}
.nav li a:hover{text-decoration: none;
}

.lang{display: flex;justify-content: center;margin-top: 1rem;}
.lang a{text-align: center; width: 32px;height: 32px;line-height:32px;display: block; border: 1px solid #cccccc;color:var(--white); border-radius: 5px;margin-right: 5px;background: var(--black-color);font-size: 14px;padding: 0;}
.lang  a.active{background: var(--sub-color);color: var(--white); }


@media (min-width: 992px) {
  .navbar{padding: 2rem 0 .5rem;}
  .navbar.sticky .navbar-header {    border-bottom:none;    }
  .navbar-nav {    flex-direction: row;  }
  .lang{  width: 100%;position: absolute; right: 2rem;top:1rem;justify-content: flex-end;margin-top: 0;}
  .nav li{flex:0 0 auto}
  .nav li a.home_menu{min-height:69px;padding-left: 1rem;padding-right: 1rem; width: 180px; background-size: cover;}
  
  .navbar-header .navbar-collapse{
    justify-content: space-between;
    flex-direction:row;
  }
  .content_block {
    padding-top: 110px;
  }


}

@media (max-width: 991px) {
  .menu-icon {
    display: block;
  }
  .navbar-collapse {
    overflow-y: auto;
    background-color: var(--black-color);
    height: 100vh;
    text-align: center;
    position: absolute;
    top: 0px;
    left: -100%;
    z-index: -1;
    width: 100%;
    padding:82px 1rem 1rem;
    opacity: .5;
    transition: all .5s ease;
  }
   #menu-link:checked~.navbar-collapse {
     opacity: 1;
     left: 0;
     visibility: visible;
   }
}
/* 主選單結束 */
footer {
  padding: 1rem 0 ;
  background-color: var(--black-color);
}

footer  ul.footer-link{margin-bottom: 0; display: flex;flex-wrap: wrap;justify-content: center;}
footer  ul  li{flex:0 0 50%;text-align: center;margin-bottom: 5px;}
footer  ul  li a{ padding:.5rem 1.25rem ; color: var(--white);display: block;}

footer .text{border-top: 1px solid #747474;padding: 0.5rem;}
footer .text p{color: #747474;margin-bottom: 0;}
@media (min-width: 992px) {
  footer  ul  li {flex:0 0 auto}
}


/* 首頁大圖內容 */
.box-home-banner {
  position: relative;
  width: 100%;
  
}
.box-home-banner .img-content{
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: cover;
  position: relative;
  width: 100%;
  left: 0;top: 0;
}
.box-home-banner .text-box{
  position: relative;
  padding:2rem 1.6rem;
  background-color: rgb(192, 26, 48);
  color: var(--white);
}
.box-home-banner .text-box .title{margin-bottom: 1rem;}

.box-home-banner .text-box .note{
  font-size: 1.25rem;line-height: 1.5;
}
@media (min-width: 992px) {
  
  .box-home-banner .img-content{ 
    padding-bottom:40%;
  }
  .box-home-banner .text-box{
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: min(40%);
    background: transparent;
    padding:1.5rem 1rem;  
  }
}



/* 首頁內容 介紹1*/

.box-home-content{padding: 2rem 0;background-color: var(--black-color); color: var(--white);}
.box-home-content .text-box{text-align: center; padding: 1rem 0;}
/* 首頁內容 step*/
.box-home-step{
  background-repeat: no-repeat ;
  background-position: center;
  background-size: cover;
  padding: 4rem 0;
}
.box-home-step .text-box{text-align: center;margin-bottom: 2rem;}
.box-home-step .text-box .title span{ color: var(--sub-color);}
.box-home-step .home_step{display: flex; flex-wrap: wrap; justify-content: center;}
.box-home-step .home_step li{ background-color: var(--white);flex:0 0 98%; margin: 0 1% 2rem;border-radius: 1.5rem;padding:1.5rem 1rem;border:1px solid #cccccc;text-align: center;font-size: 1.125rem;}
.home_step .text h3{width: 200px;height: 200px;line-height:200px;margin: auto; border-radius: 50%;border:1px solid #cccccc; font-size: 2rem;font-weight: 700;margin-bottom: 1.5rem;}
/* 首頁Getting Started*/
.box-home-start{
  background-repeat: no-repeat;padding: 4rem 0;
  background-position: 100% bottom;
  background-size: cover;
}
.box-home-start .text-box{text-align: center;margin-bottom: 2rem;}
.box-home-start  .text-box .title{color: var(--white);margin-bottom: 1rem;}
.box-home-start  .text-box .title span{ color: var(--sub-color);}
.box-home-start .home_start{display: flex; flex-wrap: wrap; justify-content: center;}
.box-home-start .home_start li{flex:0 0 46%;margin: 0 2% 1rem; text-align: center; color: var(--white);}
.box-home-start .home_start .img{width: 140px;height: 140px;border-radius: 50%;border:1px solid var(--white);padding: 45px;margin:0 auto 1rem;display: block;}
.box-home-start .home_start .img img{width: 100%;}
/* 首頁Getting Started*/
.box-home-dating{
  background-position: 100% center;
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 80%;
  position: relative;
}
.box-home-dating .text-box{position: absolute;left: 10%;bottom: 10%;width: 100%;color: var(--white);
}
.box-home-contact{background-color: var(--black-color);padding: 4rem 0; text-align: center;color: var(--white);}
.box-home-contact a.link{text-decoration: underline;}
@media (min-width: 992px) {
  .box-home-step .home_step li{
    flex:0 0 30.33%;
    margin: 0 1.5%;
  }
  .box-home-start{padding: 8rem 0;}
  .box-home-start .home_start li{flex:0 0 23%;margin: 0 1%;}
  .box-home-start  .text-box .title{margin-bottom: 3rem;}
  .box-home-dating{
    padding-bottom: 30%;
    background-position: 100% bottom;
  }
  .box-home-dating .text-box{bottom: 50%;width: 50%;transform: translateY(50%);}
}



/* 內頁開始 */
/* 聯絡我們 */
.main-content{background-color: var(--gray-color); position: relative;min-height: 65vh;}
.main-content .mark{
  width: 100%;
  font-size:12vw;
  padding: 0;
  display: flex;
  justify-content: center;
  text-align: center;
  line-height:.8;
  text-transform:uppercase;
  color:var(--gray-color);
  background-color: transparent;
  font-weight: 700;
  -webkit-text-stroke:.5px  var(--pink-color);
  font-family:'Noto Sans TC',Arial;
  position: absolute;
  top: 0;
  
}
.main-content .contact-box{position:relative; z-index:1;padding: 2rem 0 4rem;}
.main-content .brand{display: flex; flex-wrap: wrap;justify-content: flex-end;}
.main-content .brand a{padding: 5px; color: var(--black-color);}
.main-content .brand li:not(:last-child):after{content:'/'}
.main-content .brand li:last-child a{color: var(--sub-color);}
.main-content .contact-box .title{font-size: 2.3rem;font-weight: 600;margin-bottom:.5rem;margin-top: .5rem; text-transform: uppercase;}
.content{ background-color: var(--white); box-shadow: 0 0 1rem rgba(0,0,0,.1);padding: 2rem 15px;}
.main-content .contact-box  .content{display: flex;flex-wrap: wrap; font-family: 'Noto Sans TC';}
.main-content .contact-box  .text-red{font-size: 85%;}
.cerify-code-panel{ display: flex; flex-wrap:wrap;justify-content: space-between; width: 100%;}
.verify-code{flex:0 0 49%; width: 49%;}
.verify-input-area{width: 100%;}
.verify-code-area{display: flex; align-items: center; flex:1 0 49%;order:-1}
.verify-change-area a{margin-left: 5px; width: 50px;display: inline-flex; font-size: 14px;}

/* Q&A */
.qa-content .card{background-color: transparent;border: none;}
.qa-content .card-header{background-color: transparent; padding: 0;}
.qa-content  .accordion-button{border: none;background-color: transparent;display: block;width: 100%;text-align: left; font-size: 1.25rem; 
  border-bottom: 1px solid #ccc; padding:1rem .5rem;    position: relative;}
.accordionQA .card-header button::after {
  content: '\f068';
  font-family: "fontawesome";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--black-color);
  color: var(--white);
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 12px;
}
.accordionQA .card-header button.collapsed::after {
  content: '\f067';
}
@media (min-width: 992px) {
  .main-content .mark{
    top: -1rem;
    -webkit-text-stroke:.8px  var(--pink-color);
  }
  .main-content .contact-box .title{font-size: 3rem;margin-bottom:1rem;margin-top: 3rem;}
}
@media (min-width: 1960px) {
  .main-content .mark{font-size:6vw;}
}


/* 最新消息 */
.goback{display: flex;justify-content: center;}
.goback a,.goback p{padding: 5px;}
.goback .prev,.goback .next,.goback p{margin: 0 5px;}
.newsitems li a{display: flex;flex-wrap: wrap;margin-bottom: 2.5rem; box-shadow: 0 0 15px rgba(0,0,0,.2); border-radius: 15px 0 15px 0;overflow: hidden;}
.newsitems .img{background-position: center; background-size: cover;flex:0 0 100%;padding-bottom:60%;}
.newsitems li .text-box{flex:0 0 100%;padding: 1rem;}
.newsitems li .text-box .title-box{ display: flex;flex-wrap: wrap; justify-content: space-between;margin-bottom: .5rem; align-items: center;}
.newsitems li .text-box .title-box:before{ display: none;}
.newsitems li .text-box .title-box .date{font-size: 14px; color: var(--sub-color);}
.newsitems li .text-box .title-box .date i svg{width: 22px;}
.newsitems li .text-box .title{padding-bottom: 0; font-size: 1.25rem;margin-bottom: 0;font-weight: 400;text-align: left;}
@media (min-width: 992px) {
  .newsitems .img{flex:0 0 30%;padding-bottom: 25%;}
  .newsitems li .text-box{flex:0 0 70%;}
}

/* 行銷專區 */
.marketing-box ul{display: flex;flex-wrap: wrap; justify-content: space-between;}
.marketing-box ul li{flex:0 0 100%; margin-bottom: 1.5rem;}
.marketing-box ul li a{border-radius: 20px 5px 0 0; overflow: hidden;display: block;}
.marketing-box ul li .img{padding-bottom: 80%; background-position: center;background-repeat: no-repeat; background-size: cover;margin-bottom: 15px;border-radius: 0 0 5px 5px;}
.marketing-box ul li .text-box p{font-size: 16px; font-weight: 400; color: var(--black-color);text-align: center;}
@media (min-width: 992px) {
  .marketing-box ul li{flex:0 0 33.33%;padding: 0 1%;}
  .marketing-box ul li .img{padding-bottom: 70%; }
}
.encyclopedia-box .main_items{
  display: flex;flex-wrap: wrap;padding-bottom: .8rem;
}
.encyclopedia-box .main_items li{ flex:0 0 100%;width: 100%;}

.encyclopedia-box .main_items li a{padding:  .5rem .8rem;display: block; border: 1px solid #eaeaea;margin-bottom: 1rem;background: url(../images/bg_ins_press.jpg);}