@charset "utf-8";
/* CSS Document */
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
*{font-family: 'Noto Sans TC',Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";background-repeat:no-repeat;background-position:center;outline:none;}
div,h1,section{background-repeat: no-repeat; background-size:100%;position:relative;}
a{transition:all 0.4s ease;}
.outer{ width:1024px; margin:0 auto; z-index:1;}
/*scroll bar*/
body::-webkit-scrollbar { width:5px; height:5px; background-color:#fff;}
body::-webkit-scrollbar-track {background-color:#fff;}
body::-webkit-scrollbar-thumb {background: #eee;}

/*colorbox*/
#cboxOverlay{z-index:999999;background-color:rgba(0,0,0,0.75);}
#cboxClose{
  background-image:url('../img/btn_close.png');
  background-repeat:no-repeat;
  width:41px;
  height:41px;
  outline: none; /* for Firefox Google Chrome  */
  behavior:expression(this.onFocus=this.blur()); /* for IE */
}
#cboxClose:hover{transform:scale(0.9);}
@media (max-width:765px) {
  #cboxClose{width:0.8rem;height:0.8rem;right:0;}
  #cboxWrapper{
    margin-top:0.5rem;
    padding-top:0;
  }
}

/*layout*/
html,body{
 width:100%;
 min-width:1200px;
 height:auto;
 margin:0 auto;
 padding:0;
}
html{ overflow-x:hidden;}
body{ background-color:#fff;}
@media (max-width:1200px){
  html{
    overflow-x:scroll;
  }
  .outer{width:100%;}
}
@media (max-width:765px){
  html,body{
    width:100%;
    min-width:100%;
    overflow-x:hidden;
  }
}
/*layout*/
.wrapper{
  width:100%;
  position:relative;
  margin:35px auto 0 auto;
  text-align:center;
}
/*content_01*/
.content_01{
  display:block;
  position:relative;
  margin:0 auto;
  width:100%;
  background-image:url('../img/kv.jpg');
  background-position:center top;
  background-size:1920px;
  color:#fff;
}
.btn_top{
  text-align:right;
  box-sizing:border-box;
  padding:20px;
  font-size:0;
}
.hamburger{display:none;}
div.btn_top > a{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  margin-right:5px;
  height:40px;
  background-size:auto 100%;
}
div.btn_top > a:hover{
  filter:brightness(1.1);
}
.signup{
  width:175px;
  background-color:#D73E15;
  font-size:20px;
  font-weight:500;
  text-align:center;
  line-height:40px;
}
.signup.for-m{
  display:none;
}
a.signup.for-c{
  margin-bottom:5px;
  background-color:transparent;
  background-image:url('../img/btn_signup.png');
}
.download{
  width:40px;
  background-color:#480A0A;
  background-image:url(../img/icon_download.png);
}
.baha{
  width:40px;
  background-image:url(../img/icon_baha.png);
}
.fb{
  width:40px;
  background-image:url(../img/icon_fb.png);
}
.btn_left{
  position:fixed;
  width:90px;
  top:100px;
  left:20px;
  z-index:88;
}
div.btn_left > a{
  display:block;
  width:90px;
  height:90px;
  background-size:auto 100%;
  overflow:hidden;
  line-height:1000;
}
.btn_more{
  position:fixed;
  width: 90px;
  height:300px;
  top:390px;
  z-index:88;
  left:20px;
}
.btn_more > a{
  width:100%;
  height:90px;
  display:block;
  font-size:16px;
  line-height:1.3;
  font-weight:500;
  background-color:#33a7ea;
  border-radius:100%;
  box-sizing:border-box;
  padding:21px;
  border:5px solid #fff;
  margin-bottom:5px;
}
.btn_more > a:nth-child(3){
  padding:21px 15px;
}
div.btn_left > a:hover,.btn_more > a:hover{
  filter:brightness(1.1);
}
.login{
  background-image:url('../img/btn_login.png');
}
.logout{
  background-image:url('../img/btn_logout.png');
}
.top{
  background-image:url('../img/btn_top.png');
  margin-top:5px;
}
.logo,h1{
  display:block;
  overflow:hidden;
  text-indent:-300%;
}
.logo{
  width:142px;
  height:93px;
  background-image:url('../img/logo.png');
  margin:55px auto 0 auto;
  background-size:100%;
  position:relative;
  z-index:1;
}
.center{
  width:500px;
  margin:0 auto;
}
h1{
  width:297px;
  height:235px;
  background-image:url('../img/title.png');
  background-size:auto;
  background-position:0 center;
  margin:20px auto 8px auto;
}
.mouse{
  width:34px;
  height:70px;
  display:block;
  background-size:100%;
  background-image:url('../img/icon_mouse.png');
  margin:0 auto;
  animation:m_move 0.4s infinite ease-in-out;
  animation-direction:alternate;
  -webkit-animation-direction:alternate;
}
@keyframes m_move{
  from {
    background-position:center;
  }
  to {
    background-position:center bottom;
  }
}
.content_01 > h3{
  display:block;
  width:889px;
  height:78px;
  background-image:url('../img/text.png');
  overflow:hidden;
  text-indent:-1000%;
  margin:55px auto 30px auto;
}
.content_01 > span{
  display:block;
  width:100%;
  background-color:#3a589e;
  font-size:24px;
  font-weight:600;
  letter-spacing:6.6px;
  padding:24px 0;
}
@media (max-width:765px){
.wrapper{
	margin:0 auto;
}
.content_01{
  width:100%;
  background-image:url('../img/kv_m.jpg');
  background-position:center 0.97rem;
  background-size:100%;
  padding-top: 1rem;
}
.btn_top{
  padding:0;
  text-align:left;
  position:fixed;
  top:0;
  z-index:50;
}
div.btn_top > a{
  margin-right:0;
  height:1rem;
  background-size:auto 80%;
}
.signup{
  width:5rem;
}
.signup{
  line-height: 1rem;
  font-size:0.45rem;
}
.signup.for-m{
  display:inline-block;
}
.signup.for-c{
  display:none;
}
.baha,.fb,.download,.hamburger{
  width:1.25rem;
}
.hamburger{
  position:absolute;
  background-color:#480A0A;
}
.hamburger > span{
  display:inline-block;
  position:absolute;
  width:60%;
  height: 0.05rem;
  background-color:rgba(225,225,225,0.8);
  left:20%;
  transition:0.3s ease;
}
.hamburger > span:nth-child(1){
  top:0.25rem;
}
.hamburger > span:nth-child(2){
  top:0.44rem;
}
.hamburger > span:nth-child(3){
  top:0.65rem;
}
.hamburger.after > span:nth-child(1){
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   transform: rotate(45deg);
   top:0.45rem;
}
.hamburger.after > span:nth-child(2){
  width:0;
}
.hamburger.after  > span:nth-child(3){
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top:0.45rem;
}
.fb{
  background-color:#3a589e;
}
.baha{
  background-color:#2a8492;
  margin-left:-0.1px;
}
.btn_left{
	top:auto;
	margin-top:0;
	bottom:0;
	left:0;
	width:100%;
	height:1.2rem;
	font-size:0;
}
div.btn_left > a{
  display:inline-block;
  height:100%;
  color:#fff;
  line-height:1.2rem;
  font-size:0.45rem;
  font-weight:500;
  float:left;
}
div.btn_left > a.login,div.btn_left > a.logout{
  width:80%;
  background-color:#D73E15;
  background-image:none;
}
div.btn_left > a.logout
{
  background-color:#e77b1c;
}
div.btn_left > a.top{
  background-image:none;
  margin-top:0;
  width:20%;
  background-color:#2BB9EF;
}
.logo{
  width:1.8rem;
  height:1.4rem;
  margin:1.8em auto 0.08rem auto;
}
.center{
  width:100%;
}
h1{
  width:3.1rem;
  background-size:auto 100%;
  height:2.5rem;
  background-position:0 center;
  margin:0 auto;
}
.center:hover > h1{
  animation:none;
}
.mouse{
  width:0.7rem;
  height:1.4rem;
  margin:1.6rem auto 0.8rem auto;
}
.content_01 > h3{
  width:85%;
  height:1.8rem;
  margin:0rem auto 0.8rem auto;
  background-size:100%;
  background-image:url('../img/text_m.png');
}
.content_01 > span{
  box-sizing:border-box;
  font-size:0.35rem;
  letter-spacing:0.04rem;
  padding:0.5rem;
  font-weight:500;
  line-height:1.5;
}
.btn_more{
  position:fixed;
  width:100%;
  text-align:center;
  z-index:40;
  top:-5rem;
  left:0;
  opacity:0.95;
  transition:0.3s ease;
}
.btn_more.after{
  top:1rem;
}
.btn_more > a{
  width:100%;
  padding:0;
  border-radius:0;
  height:1.5rem;
  line-height:1.5rem;
  font-size:0.4rem;
  background-color:#480A0A;
  border:0;
  margin-bottom:0;
  border-bottom:1px solid #000;
}
.btn_more > a:nth-child(3){
  padding:0;
}
.btn_more > a:hover{
  background-color:#000;
}
}
/*content_02*/
.content_02,.notice{
  background-image:url('../img/bg_02.jpg');
  color:#fff;
  background-size:cover;
}
.content_02,.content_03{
  background-size:cover;
  font-size:24px;
  margin-top:-1px;
  padding:20px 0;
}
.text_box{
  width:1024px;
  display:block;
  background-color:#fff;
  padding:5px;
  margin:80px auto;
  box-sizing:border-box;
}
.text,.list{
  border:3px solid #365394;
}
.text > h3{
  width:100%;
  height:80px;
  position:relative;
  margin-top:0;
  line-height:80px;
  font-size:40px;
  font-weight:800;
  color:#FFFF33;
  background-color:#365394;
}
.text > p{
  width:100%;
  font-size:20px;
  color:#3a589e;
  padding:35px;
  box-sizing:border-box;
  font-weight:500;
  margin:-40px 0 0 0;
  position:relative;
  line-height:1.8;
}
.text > p >em{
  font-style:normal;
  background-color:#FFFF33;
}
.btn_join,.btn_search{
  display:inline-block;
  width:465px;
  height:144px;
  text-indent:-400%;
}
.btn_join:hover,.btn_search:hover{
  background-position:center 2px;
}
.btn_join{
  background-image:url('../img/btn_join.png');
}
.btn_search{
  background-image:url('../img/btn_search.png');
  margin-left:82px;
}
.content_02 > h3{
  margin-top:80px;
  font-size:40px;
  font-weight:800;
  color:#FFFF33;
}
.content_02 > h3::before,.content_02 > h3::after{
  display:inline-block;
  background-color:#FFFF33;
  width:50px;
  height:3px;
  content:'';
  vertical-align:middle;
  margin:0 20px;
}
.content_02 > p{
  line-height:1.5;
  margin:-20px auto 80px auto;
}
@media (max-width:765px){
.content_02,.content_03{
  padding:0.3rem 0;
}
.text_box{
  width:95%;
  padding:0.1rem;
  margin:1.2rem auto;
}
.text,.list{
  border:0.05rem solid #365394;
}
.text > h3{
  height:1rem;
  line-height:1rem;
  font-size:0.5rem;
}
.text > p{
  font-size:0.35rem;
  padding:0.6rem 0.65rem;
  margin:-0.6rem 0 0 0;
}
.btn_join,.btn_search{
  width:46%;
  height:1.5rem;
  background-size:100%;
  vertical-align:top;
  margin-top:-0.6rem;
}
.btn_join:hover,.btn_search:hover{
  background-position:center 0.1rem;
}
.btn_search{
  margin-left:1.6%;
}
.content_02 > h3{
  margin-top:1.5rem;
  font-size:1rem;
}
.content_02 > h3::before,.content_02 > h3::after{
  width:1.5rem;
  height:0.08rem;
  margin:0 0.5rem;
}
.content_02 > p{
  width:85%;
  font-size:0.45rem;
  margin:-0.3rem auto 1.2rem auto;
}
}
/*event*/
.event_outer{
  width:1040px;
  margin:0 auto 80px auto;
}
.event{
  display:inline-block;
  width:340px;
  height:auto;
  margin-bottom:44px;
  background-image:url('../img/bg_05.png');
  background-repeat:repeat-y;
  vertical-align:top;
  font-size:16px;
  font-weight:500;
  line-height:1.5;
}
.event > span{
  position:relative;
  margin:0 auto;
  width:127px;
  height:56px;
  line-height:50px;
  font-size:20px;
  font-weight:800;
  display:block;
  background-image:url('../img/bg_04.png');
}
.event > span.sss{
  color:#1e2f53;
  background-image:url('../img/bg_03.png');
}
.event > h4{
  font-size:36px;
  height:100px;
  line-height:100px;
  font-weight:800;
  position:relative;
  margin:0;
  letter-spacing:2px;
  text-shadow: rgb(30, 47, 83) 0px 1px 0px,rgb(30, 47, 83) 0px 4px 0px,rgb(30, 47, 83) 0px 4px 5px,rgb(30, 47, 83) 2px 1px 0px,rgb(30, 47, 83) -2px 0px 0px;
}
.event > img{
  position:relative;
  margin-top:-20px;
}
.event > p{
  width:268px;
  margin:0 auto 23px auto;
  text-align:center;
}
.event > em{
  display:block;
  width:100%;
  height:70px;
  line-height:70px;
  font-size:24px;
  font-style:normal;
  color:#FFFF33;
  background-color: #1e2f53;
}
.upload{
  width:200px;
  height:50px;
  line-height:50px;
  display:inline-block;
  margin:0 auto 23px;
  background-color:#1e2f53;
}
.upload:hover{
 font-size:1.1em;
 background-color:#22355d;
}
@media (max-width:765px){
.event_outer{
  width:90%;
  margin:0 auto 1rem auto;
}
.event{
  display:inline-block;
  width:100%;
  margin-bottom:0.6rem;
  font-size:0.35rem;
}
.event > span{
  width:3rem;
  background-size:100%;
  height:1.3rem;
  line-height:1.2rem;
  font-size:0.5rem;
  font-weight:600;
 }
.event > h4{
  font-size:0.8rem;
  height:1.5rem;
  line-height:1.5rem;
  letter-spacing:0.02rem;
}
.event > img{
  width:60%;
  margin-top:-0.2rem;
}
.event > p{
  width:70%;
  margin:0 auto 0.4rem auto;
 }
.event > em{
  height:1.5rem;
  line-height:1.5rem;
  font-size:0.5rem;
}
.upload{
  width:60%;
  font-size:0.45rem;
  height:1.5rem;
  line-height:1.5rem;
  margin:0 auto 0.5rem;
}
.upload:hover{
 font-size:0.48rem;
}
}
/*content_03*/
.content_03{
  background-image:url('../img/bg_03.jpg');
}
.list_box{
  width:1024px;
  box-sizing:border-box;
  padding:5px;
  background-color:#fff;
  margin:0 auto 150px auto;
  z-index:5;
}
.list{
  background-color:#fff;
  z-index:20;
}
.list > ul{
  display:table;
  width:100%;
  font-size:0;
}
.list> ul> li{
  display:table-cell;
  vertical-align:middle;
}
.list> ul> li >img{
 margin-left:-0.01%;
 width:20%;
 display:inline-block;
 vertical-align:top;
}
.list > ul > li:nth-child(1){
  width:25%;
  font-size:40px;
  font-weight:600;
  color:#5682ea;
  background-color:#f2f2f3;
}
.list > ul > li:nth-child(1).bg-deep{
  background-color:#e8e8e8;
}
.list > ul > li:nth-child(1).gift-plus{
 color:#fb827c;
}
.list > ul> li:nth-child(2){
  width:75%;
  border-left:3px solid #3a589e;
  text-align:left;
}
.list > ul> li:nth-child(2).item-big > img{
  width:25%;
}
.list > ul.table_title > li{
  font-size:24px;
  font-weight:600;
  height:67px;
  line-height:67px;
  color:#fff;
  background-color:#5682ea;
  text-align:center;
}
.ch_01,.ch_02{
  position:absolute;
  display:block;
  background-size:100%;
  margin-top:-820px;
}
.ch_01{
  width:500px;
  height:721px;
  background-image:url('../img/ch_02.png');
  left:-350px;
  z-index:1;
}
.ch_02{
  width:450px;
  height:700px;
  background-image:url('../img/ch_01.png');
  right:-330px;
  z-index:1;
}
@media (max-width:1440px){
  .ch_01,.ch_02{
    display:none;
  }
}
@media (max-width:765px){
.list_box{
  width:95%;
  padding:0.1rem;
  margin:-0.8rem auto 1rem auto;
}
.list{
  overflow:hidden;
}
.list > ul > li:nth-child(1){
  font-size:0.4rem;
}
.list > ul.table_title > li{
  font-size:0.28rem;
  height:0.8rem;
  line-height:0.8rem;
}
}
/*notice*/
.notice{
  margin-top:-1px;
  padding:60px 0;
  color:#fff;
  text-align:left;
}
.notice > span{
  width:1000px;
  display:block;
  margin:0 auto;
  color:#FFFF33;
  font-size:30px;
  font-weight:700;
}
.notice > ul{
  width:1000px;
  display:block;
  position:relative;
  margin:10px auto;
  line-height:1.8;
}
.notice > ul > li{
  font-size:14px;
  font-weight:normal;
  letter-spacing:1px;
  counter-increment:list-no;
}
.notice > ul > li::before{
  content:counter(list-no);
  display:inline-block;
  vertical-align:middle;
  background-color:#3a589e;
  width:20px;
  height:20px;
  border-radius:20px;
  line-height:20px;
  margin-right:10px;
  text-align:center;
  color:#fff;
  font-size:10px;
  font-family: Helvetica;
}
@media (max-width:765px){
.notice{
  padding:0.8rem 0;
}
.notice > span{
  width:90%;
  font-size:0.6rem;
  text-align:center;
}
.notice > ul{
  width:90%;
  margin:0.4rem auto;
}
.notice > ul > li{
  font-size:0.3rem;
  margin-left:0.55rem;
  letter-spacing:0.005rem;
}
.notice > ul > li::before{
  width:0.4rem;
  height:0.4rem;
  border-radius:0.4rem;
  line-height:0.4rem;
  margin-right:0.15rem;
  font-size:0.15rem;
  transform:scale(0.9);
  margin-left:-0.55rem;
}
}
/*footer*/
footer{background-color:#fff; z-index:15;}
@media (max-width:765px){
	footer{padding-bottom:0.6rem; }
}