@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

/*default*/
html { scroll-behavior: smooth; -webkit-scroll-behavior: smooth;}
img { max-width: 100%; border: 0;}
img a { outline : none;}
a:focus { outline: 0;}
body {
	width: 100%;
	height: auto;
	margin: 0 auto;
	font-family: 'Noto Serif TC', 'Noto Sans TC', '微軟正黑體', Helvetica, Arial, sans-serif !important;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	background-image:url("../images/bg.jpg");
	position:relative;
   /* background-size:contain;*/
}
#full-video {
    background: center top;
    position: absolute;
    width: 1920px;
    margin: 0 calc(50% - 960px);
}
.wrapper {
	width: 100vw;
	overflow: hidden;
	position: relative;
}
.sec_wrapper {
	max-width: 1920px;
	/*width: 1200px;*/
	margin: 0 auto;
	text-align: center;
}
.sec_title {
	margin:  0 auto;
	text-align: center;
	background: #000;
}
.clear { clear: both;}



/*header*/
.header {
	width: 100%;
	height: 105vh;
	margin: 0 auto;
    background: url('../images/01header_bg.png') top center no-repeat;
	position: relative;
	background-size: cover;
	padding-bottom: 3%;
}
.header .top_menu {
	margin: 0 auto;
    display: inline-block;
    width: 100%;
    position: fixed;
    padding: 0.5% 0;
    background: rgb(0 0 0 / 100%);
    text-align: center;
    z-index: 9999;
    top: 0;
}
.header .sec_wrapper {
	display: flex;
    justify-content: center;
    align-items: center;
}
.header .top_menu ul {
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
}
.header .bottom_menu {
    margin: 0 auto;
    display: inline-block;
    width: 100%;
    position: fixed;
    padding: 0.5% 0;
    background: rgb(0 0 0 / 100%);
    text-align: center;
    z-index: 9999;
    bottom: 0;
}
.header .bottom_menu ul {
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
}
.header .header_wrap {
	width: 100%;
	height: 105vh;
	position: relative;
	background: url('../images/01header_char.png') top center no-repeat;
	background-size: cover;
}
.header_wrap .head_title {
	width: 1200px;
	height: 100vh;
	margin: 0 auto;
	text-align: center;
}
.header .logo {
    position:absolute;
	margin: 5vw 45vw 0 auto;
}

#event_pv {
	width:1029px;
	height:470px;
	padding-top: 75px;
	padding-left: 1px;
}

.header .slogan {
	width: 70%;
    margin:18vw  auto 0 auto;
	position: relative;
	display: none;
}

.header_m { display: none;}

/*sroll icon*/
@keyframes scroll_2 {
  0%   { transform: translateY(0); opacity: 1; }
  25%  { opacity: 1; }
  75%  { transform: translateY(.75em); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}



/*news*/
.news{
	width: 100%;
	height: auto;
	margin:-7vw  auto;
	background: url('../images/02news_bg.png') top center no-repeat;
	/*background-size: contain; */
    padding-bottom: 5%;
    margin-top: 57%;
	position: relative;
}
.news_wrapper {
    max-width: 385px;
    width: 100%;
	height:auto;
    margin: 0 auto;
	z-index: 99;
	margin-top: -53%;
	background: #000;
    padding: 10px 10px;
}
.news .sec_title {
display: none;
}
.fb300 {
    display: none;
}

/*prize*/
.prize {
	width: 100%;
	height: auto;
	margin: 0 auto;
	background: url('../images/05prize_bg.png') top center no-repeat;
	padding-top: 7%;
	padding-bottom: 12%;
	position: relative;
	z-index: 9;
	margin-top: 8%;
}
.prize .sec_wrapper {
    max-width: 1920px;
    /*width: 1200px;*/
    margin: -2% auto;
    text-align: center;
}

.accordion {
  width: 100%;
  max-width:800px;
  height: 500px;
  overflow: hidden;
  margin:4% auto;
	background-color: #000000db;
    padding-top: 2%;
    padding-bottom: 3%;
    padding-right: 3%;
    padding-left: 3%;
}
.accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}
.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 16.666%;
  height: 250px;
  background-repeat: no-repeat;
  background-position:left;
  transition: all 500ms ease;
}
.accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
}
.accordion ul li div a {
  display: block;
  height: 500px;
  width: 100%;
  position: relative;
  z-index: 3;
  vertical-align: bottom;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  font-family: Open Sans, sans-serif;
  transition: all 200ms ease;
}
.accordion ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  text-overflow: ellipsis;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
}

.accordion ul li:nth-child(1) {
  background-image:url("../images/1000x1000_1.png");
}
.accordion ul li:nth-child(2) {
  background-image:url("../images/1000x1000_2.png");
}
.accordion ul li:nth-child(3) {
  background-image:url("../images/1000x1000_3.png");
}
.accordion ul li:nth-child(4) {
  background-image:url("../images/1000x1000_4.png");
}
.accordion ul li:nth-child(5) {
  background-image:url("../images/1000x1000_5.png");
}
/*.accordion ul li:nth-child(6) {
  background-image: url("http://michael-ferry.com/assets/accordion6.jpg");
}*/
.accordion ul:hover li, .accordion ul:focus-within li {
  width: 2%;
}
.accordion ul li:focus {
  outline: none;
}
.accordion ul:hover li:hover,
.accordion ul li:focus, .accordion ul:focus-within li:focus {
  width: 100%;
}
.accordion ul:hover li:hover a,
.accordion ul li:focus a, .accordion ul:focus-within li:focus a {
  background: rgba(0, 0, 0, 0);
}
.accordion ul:hover li:hover a *,
.accordion ul li:focus a *, .accordion ul:focus-within li:focus a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.accordion ul:hover li {
  width: 5.5% !important;
}
.accordion ul:hover li a * {
  opacity: 0 !important;
}
.accordion ul:hover li:hover {
  width: 100% !important;
}
.accordion ul:hover li:hover a {
  background: rgba(0, 0, 0, 0);
}
.accordion ul:hover li:hover a * {
  opacity: 1 !important;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

#main {display: none;}
.main_frame {
    margin: 0 auto;
    max-width:100%;
    margin-top: 1%;
	padding-bottom: 2%;
    background-color: #000;
    padding-top: 2%;
}

	ul, li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.abgne_tab {
		clear: left;
		width: 100%;
		margin: 10px 0;
	}
    .abgne_tab2 {
		clear: left;
		width: 100%;
		margin: 10px 0;
	}
	ul.tabs {
		width: 100%;
		height:auto;
		display: inline-block;
	}

	ul.tabs li {
    display: inline-block;
    width: 15%;
    height: auto;
    line-height: 70px;
    overflow: hidden;
    position: relative;
    margin-bottom: -1px;
    border-left: none;
}
	ul.tabs li a {
		display: block;
		color: #fff;
		/*border: 1px solid #fff;*/
		text-decoration: none;
	}
	ul.tabs li a:hover {
		background-image: url("../img/tab.png");
		background-size: contain;
		
	}
	ul.tabs li.active  {
		background-image: url("../img/tab.png");
		background-size: contain;
	}
	ul.tabs li.active a:hover {
		background-image: url("../img/tab.png");
		background-size: contain;
	}
	
	div.tab_container {
		clear: left;
		width: 100%;
		/*border: 1px solid #b19242;*/
		border-top: none;
		
	}
	div.tab_container .tab_content {
		/*padding: 20px;*/
		display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
	}
	div.tab_container .tab_content h2 {
		margin: 0 0 20px;
	}
div.tab_container2 {
		clear: left;
		width: 100%;
		/*border: 1px solid #b19242;*/
		border-top: none;
		
	}
	div.tab_container2 .tab_content2 {
		/*padding: 20px;*/
		display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
	}
	div.tab_container2 .tab_content2 h2 {
		margin: 0 0 20px;
	}
/*infor*/
.infor {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding-top:10%;
	position: relative;
	z-index:99;
	background: url('../images/06infor_bg_N.png') bottom center no-repeat;
}
.infor .sec_wrapper {
    max-width: 1920px;
    /*width: 1200px;*/
    margin: 0 auto;
    text-align: inherit;
}

.infor .sec_title {
	display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -9%;
	background: #0000;
}
.infor  .sec_title2 {
    margin: 0 auto;
    text-align: center;
}
.infor .infor_special {
	width: 100%;
	position: relative;
	display: block;
	margin: 0% auto 40% auto;
}
.swiper_content .swiper-container {
	width:55%;
	height: auto;
	margin:0 auto;
	overflow:hidden;
	position:relative
}
.swiper_content .swiper-container .swiper-slide {
	width: 100% !important;
	margin: 0 auto;
	text-align: center;
}

.swiper_content .swiper-container .swiper-button-next {
	right: 0;
	background-image: url('../images/06infor_rightbtn.png');
	
}
.swiper_content .swiper-container .swiper-button-prev {
	left: 0;
	background-image: url('../images/06infor_leftbtn.png');
}
.swiper_content .swiper-container .swiper-button-next,
.swiper_content .swiper-container .swiper-button-prev {
	display: inline-block;
	position: absolute;
	width: 49px;
	height: 95px;
	background-size: 49px 95px;
	transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
}
.swiper_content .swiper-container .swiper-button-next:hover,
.swiper_content .swiper-container .swiper-button-prev:hover {
	-webkit-filter:brightness(.5);
	filter: brightness(.5);
}

.infor .top {
    width: 18%;
    margin: -17% auto 0 79%;
}

/*footer*/
.footer {
	width: 100%;
	background: #0c0c0c;
	font-family: 'Noto Sans TC', '微軟正黑體';
	font-weight: 300;
	position: relative;
}
.footer_wrapper {
    margin: 0 auto;
    padding: 1.2% 0;
	padding-bottom: 6%;
}
.footer .copyright {
	margin: 0 auto;
	display: flex;
    justify-content: center;
    align-items: center;
}
.copyright .logo {
	width: 55%;
}
.copyright .logo a{
  padding-left: 40%;
}
.copyright .copyright_txt {
	color: #fff;
    font-size: 0.4em;
    width: 26%;
    line-height: 3em;
}
.copyright .grade {
	width: 5%;
}
.footer .warning {
	color: #fff;
    font-size: 0.75em;
    margin-top: 15px;
	text-align: center;
    line-height: 2em;
}
.footer .warning a {
	color: #fff;
}
.footer .warning a:hover {
	color: #16f1ff;
}


/*----------------------------------------4K---------------------------------------------------*/
@media screen and (min-width:2200px) {
	
	
	.header { height: 77vh;}
	.header .header_wrap { height: 77vh;}
	.invite { padding-top: 2%; padding-bottom: 9%;}
	.invite .invite_bonus { left: 10vw;}
	.infor { padding-top: 3%; padding-bottom: 3%;}
	.prize .drink_warning p { font-size: 5.6rem;}
	.prize .drink_warning img { top: 1.6rem;}
	
}
/*----------------------------------------Mac book---------------------------------------------------*/
@media screen and (max-width:1440px) {
	
	.header .reservation {  margin: 35vw auto 0 auto;}
	
	.invite { padding-bottom: 18%;}
	.invite .invite_bonus { left: -1vw; width: 62vw;}
	.invite .invite_receive { width: 40vw; left: 42vw;}
	.invite_receive .count h3 { font-size: 2.2rem;}
	.invite_receive .receive_box .box_row { width: 85%; margin: 0 auto;}

	.prize .drink_warning p { font-size: 3.5rem;}
	.prize .drink_warning img { top: 0.8rem;}
	
	.infor {padding-bottom: 1.5%;}
	
    .infor .top { width: 18%;margin: -17% auto -20px 77%;}
}
/*----------------------------------------小尺寸筆電---------------------------------------------------*/
@media screen and (max-width:1280px) and (min-width:1025px) {
	.header .reservation {margin: 40vw auto 0 auto;}

	.invite .invite_receive { left: 47vw;}

	.prize .drink_warning p { font-size: 3rem;}
	.prize .sec_wrapper {margin: 0% auto;}
	/*.infor .infor_special {margin: -15% auto 14% auto;}*/
	.infor { padding-bottom:21px;}
	.infor .swiper_content { width: 90%; margin: 0 auto;}
	
}
/*----------------------------------------ipad pro-----------------------------------------*/
@media screen and (max-width:1024px) {
	#full-video {display: none;}
	.header .logo {margin:0vw 71vw 0 2vw;}
	.sec_wrapper { width: 100%;}
	.sec_title {width: 100%;margin-top:0%;}
	
	.header .top_menu { display: none;}
	.header_m { display: block;}
	.header_m .logo { margin: 10px;}
	.header .slogan { width: 100%;margin:38vw auto 0 auto;}
	.header { margin-top: -4%; height: auto;}
	.header .header_wrap {background: url(../images/01header_charM.png) top center no-repeat;height: auto;background-size:cover;padding-bottom: 131%;margin-top: 9%;}
	.header_wrap .head_title {width: 100%;height: auto;padding-bottom: 0vw;}
	.head_title .h_title {  margin-top: 5vh; top: 0;}
	.header .h_prize { padding-top: 2vw;}
	.header .promo { width: 100%; top: -90px; right: -8px;}
	.header .promo img { width: 12%;}
	.header .reservation { margin: 83vw auto 0 auto;}

    .accordion {background-color:#000000ad;padding-left:11%;}

	.invite { padding-bottom: 7%;}
	.invite .invite_receive { width: 48vw; left: 48vw; margin-top: 6%;}
	.invite_receive .receive_box { padding: 10% 0 0 0;}
	.invite_receive .receive_box .box_row { margin-bottom: 6%;}
	.invite_receive .hint { font-size: 12px; line-height: 1.2rem;}

	.swiper_content .swiper-container {width: 90%;}

	.infor .sec_wrapper {width: 100%;}
	.infor .swiper_content { width: 100%; margin: 0 auto;}
	.infor .sec_title {margin-right: 0;}
	
	
	/*.swiper_content .swiper-container { width: 100%;}*/
	.swiper_content .swiper-container .swiper-button-next { right: 2%; margin-top: -44px;}
	.swiper_content .swiper-container .swiper-button-prev { left: 2%; margin-top: -44px;}
	
	/*.footer_wrapper { width: 145%; padding: 5% 0;}*/
	.copyright .logo { width: 35%;}
	.copyright .copyright_txt { width: 50%;}


/*----------------------------------------ipad-----------------------------------------*/
@media screen and (max-width:1020px) {
	
	.header { margin-top:-2%;height: 105vh;}
	.header .h_prize img { width: 60%;}
	.header .slogan {margin: 58vw auto 0 auto;}
	.header .promo { top: -65px;}
	.header .app img { width: 40%;}
	.header .reservation { margin: 81vw auto 0 auto; width: 100%;height: 80px;}




	.prize {margin-top: -10%;padding-top: 30%;}
	.prize .sec_wrapper {width: 100%;margin: 15% auto;}
	.prize .sec_title {width: 100%;margin-top: -33%;}
	.prize .reservation {margin: -13vw auto 0 auto; padding-bottom: 8%;text-align: -webkit-center;}
	.prize .realprizes {margin: -6% auto;padding-bottom: 20%;}
	
	.accordion {padding-left:0%;}
	.swiper_content .swiper-container {width: 90%;}
	.infor .top {margin: -28% auto 0 79%;}
	
	.footer_wrapper {width: 90%;padding-bottom:0%;}
	.copyright .logo img { width: 100%;}
	.copyright .copyright_txt { font-size: 12px; width: 60%; line-height: 16px;}
	.copyright .logo {width: 95%;}
	.footer .warning { font-size: 12px; line-height: 24px;}
	.copyright .logo { display: grid; background: url(../images/copyright_logoM_N.png)top center no-repeat; width: 100%;height:auto;background-size:contain;margin: 0vw auto 0 auto;}
	.copyright .copyright_txt {display: none}
	.copyright .logo img {display: none;}
	.copyright .logo a {vertical-align: bottom;margin: 0 auto;padding: 27% 0%;}
}
/*----------------------------------------------------------------------------------------------------*/
@media screen and (max-width:767px) {
	
	.header_m .logo img { width: 25%;}
	
	.header { margin-top: 11%;padding-bottom: 25%;}
	.header .slogan {}
	.header .logo {margin: 1vw 73vw 0 3vw;}
	.header .slogan img {display: none;}
    .header .slogan  { background: url(../images/01header_sloganM.png)top center no-repeat;width: 100%;height: auto;padding-bottom: 46%;background-size: cover;margin: 47vw auto 0 auto;}
	.header .reservation {margin: 88vw auto 0 auto;}
	
	#event_pv { width: 100%; height: auto;}
	#event_pv iframe { width: 100%; height: auto;}
	
	.header {height: 63vh;}
	.header .header_wrap {padding-bottom: 155%;}  
	
	.news .sec_title {display: contents;}
	.news { background: url(../images/02news_bgm.png) top center no-repeat;    margin-top: 20%;padding-top: 53%;padding-bottom: 15%;background-size: cover;}
	.news_wrapper { max-width: 300px;padding: 10px 10px;}
	.fb385 {display: none;}
	.fb300 { display: block;}
	
	.prize {  background:none; }
	
    .accordion {display: none;}
	#main {display: block;width: 100%;max-width: 1000px;overflow: hidden; margin: 0 auto;text-align: center;box-sizing: border-box;padding: 16px 0px;}

	.prize .p01 {width: 17%;}
	.prize .p02 {width: 17%;}
	.prize .p03 {width: 17%;}
	.prize .p04 {width: 17%;}
	.prize .p05 {width: 17%;}
	.prize .realprizes {margin: -16% auto;padding-bottom: 35%;}
	
	.infor {padding-bottom: 0%;background-size: 431%;}
	.infor .sec_title {width: 100%;}
	.infor .swiper_content { width: 100%;  padding-bottom: 26%;}
	.swiper_content .swiper-container {width: 100%;}
	.swiper_content .swiper-container .swiper-button-next,
	.swiper_content .swiper-container .swiper-button-prev { width: 7%; background-size: 100%;margin-top: -9%;}
	.infor .messages { width: 80%; margin: 6% auto 0 13%;}
	.infor .messages ul li { font-size: 12px; line-height: 1.6rem;}
	.infor .sec_title2 img{margin-top:0%;}
	.infor .top {margin: -17% auto 0 40%;}
	
	
	.copyright .logo a {vertical-align: bottom; margin: 0 auto;padding: 27% 0%;}
	.copyright .logo img { width: 80%; margin: 3% 0;}
	.copyright .copyright_txt {  width: 50%; margin-right: 5%;}
	.copyright .grade { width: 15%;}
	.footer .warning { line-height: 20px;}


}
/*----------------------------------------------------------------------------------------------------*/
@media screen and (max-width:320px){
	.header .reservation { margin: 102vw auto 0 auto;}
	.input_check{margin-top: 0%;}

	.prize .reservation {width: 100%;}
	.infor .swiper_content {padding-bottom:17%;}
	ul.tabs li {width: 18%;}
}

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