@charset "UTF-8";
/* CSS Document */

* {margin:0px; padding:0px;}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap');

@font-face {font-family:'FakePearl-EL'; src: url(webfont/FakePearl-ExtraLight.woff2) format("woff2"), url(webfont/FakePearl-ExtraLight.woff) format("woff");}
@font-face {font-family:'FakePearl-L'; src: url(webfont/FakePearl-Light.woff2) format("woff2"), url(webfont/FakePearl-Light.woff) format("woff");}
@font-face {font-family:'FakePearl-M'; src: url(webfont/FakePearl-Medium.woff2) format("woff2"), url(webfont/FakePearl-Medium.woff) format("woff");}
@font-face {font-family:'FakePearl-R'; src: url(webfont/FakePearl-Regular.woff2) format("woff2"), url(webfont/FakePearl-Regular.woff) format("woff");}
@font-face {font-family:'FakePearl-B'; src: url(webfont/FakePearl-SemiBold.woff2) format("woff2"), url(webfont/FakePearl-SemiBold.woff) format("woff");}


body, html {font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-size:18px; line-height:24px; font-weight:400; position:relative;}
a, input, button {text-decoration:none; outline:none !important;}
a:hover, a:focus, a:active {text-decoration:none; cursor:pointer !important; outline:none !important;}
ul, li {list-style:none;}

.cleardiv {clear:both;}

/* loading */
.se-pre-con {position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:9999; background: #ffd522;}
.se-pre-con .img {position:fixed; left:calc(50% - 100px); top:calc(50% - 100px);width: 200px; margin:0 auto;}
.se-pre-con .img img {width:100%;}
/*Loading Bar*/
#progress{ height:3px; background:#fff; position:absolute; width:0; bottom:-50px; }
#progstat{ font-size:0.7em; letter-spacing: 3px;  position:absolute;bottom:-30px; margin-top:-40px; width:100%;text-align:center; color:#000;}


/* --- 大標題 --- */
.beer_title_a {display:table; margin:30px auto; font-size:40px; line-height:50px; font-family:'FakePearl-L'; font-weight:normal; background:#ffd522; position:relative; padding:12px 120px; border-radius:30px; border:3px solid black;}
.beer_title_a::before {background-image:url('../images/h1_icon_1.png'); content:""; width:120px; height:120px; position:absolute; top:50%; left:0%; transform:translate(-50%,-50%);}
.beer_title_a::after {background-image:url('../images/h1_icon_2.png'); content:""; width:120px; height:120px; position:absolute; top:50%; left:97.5%; transform:translate(-50%,-50%);}

.beer_title_b {display:table; margin:30px auto; font-size:40px; line-height:50px; font-family:'FakePearl-L'; font-weight:normal; background:#ffffd4; position:relative; padding:12px 120px; border-radius:30px; border:3px solid black;}
.beer_title_b::before {background-image:url('../images/h1_icon_1.png'); content:""; width:120px; height:120px; position:absolute; top:50%; left:0%; transform:translate(-50%,-50%);}
.beer_title_b::after {background-image:url('../images/h1_icon_2.png'); content:""; width:120px; height:120px; position:absolute; top:50%; left:97.5%; transform:translate(-50%,-50%);}

.beer_title_a .mbbr, .beer_title_b .mbbr {display:none;}


/* --- 按鈕 --- */
.btn_y {display:table; position:relative; margin:30px auto 60px auto;}
.btn_y .hat {position:absolute; right:8px; top:-19px; z-index:3; opacity:0;}
.btn_y span {display:table; position:relative; font-size:26px; font-family:'FakePearl-M'; text-align:center; color:#3c2f27; padding:15px 30px; background:#ffd522; border-radius:50px; border:3px solid black; z-index:2;}
.btn_y:before {content:""; width:100%; height:calc(100% + 12px); box-sizing:border-box; position:absolute; top:0px; left:0px; z-index:1; background:#db9d14; border:3px solid black; border-radius:35px;}
.btn_y:after {content:""; width:calc(100% + 14px); height:calc(100% + 13px); box-sizing:border-box; position:absolute; top:8px; left:-7px; z-index:0; background:white; border:3px solid black; border-radius:50px;}

.btn_g {display:table; position:relative; margin:30px auto 60px auto;}
.btn_g .hat {position:absolute; right:8px; top:-19px; z-index:3; opacity:0;}
.btn_g span {display:table; position:relative; font-size:26px; font-family:'FakePearl-L'; text-align:center; color:white; padding:15px 30px; background:#52cc8c; border-radius:50px; border:3px solid black; z-index:2;}
.btn_g:before {content:""; width:100%; height:calc(100% + 12px); box-sizing:border-box; position:absolute; top:0px; left:0px; z-index:1; background:#30995f; border:3px solid black; border-radius:30px;}
.btn_g:after {content:""; width:calc(100% + 14px); height:calc(100% + 11px); box-sizing:border-box; position:absolute; top:10px; left:-7px; z-index:0; background:white; border:3px solid black; border-radius:50px;}

.btn_y:hover .hat ,.btn_g:hover .hat {opacity:1;}

.btn_y:active span ,.btn_g:active span {top:5px;}
.btn_y:active:before ,.btn_g:active:before {height:calc(100% + 7px); top:5px;}
.btn_y:active .hat ,.btn_g:active .hat {opacity:1; top:-14px;}



/*------------ header ------------*/
header {display:block; width:100%; height:80px; position:fixed; top:0px; background:#ffd522; z-index:999;}
header .hd_logo {display:block; height:30px; width:160px; margin-top:25px; margin-left:15px; position:relative;}
header .hd_logo img {display:block; height:100%; width:auto;}
header .nav {display:block; position:absolute; right:15px; top:0px; height:80px;}
header .nav .ab_logo_pc {height:80px; width:auto;}
header .nav li {display:inline-block; vertical-align:top; position:relative; height:80px; padding:0px 15px; overflow:visible;}
header .nav li:hover {background:#ffe783;}
header .nav li a {display:block; font-size:20px; line-height:80px; text-align:center; font-family:'FakePearl-L', '微軟正黑體', 'Microsoft Jhenghei', sans-serif; color:black; text-decoration:none;}
header .nav li a:hover {background:none;}
header .nav .sub {display:block; position:absolute; top:80px; left:0px; /*left:50%; transform:translate(-50%, 0%); -moz-transform:translate(-50%,0%); -webkit-transform:translate(-50%,0%);*/ padding:15px; background:white;}
header .nav .sub li {height:40px; padding:0px 15px;}
header .nav .sub a {display:block; min-width:180px; font-size:16px; text-align:left; color:black; line-height:40px;}
header .nav .sub2 a {min-width:206px;}

header .nav .arrow {display:none;}

header #mbmnu {display:none;}


.nav > li > a {padding:0px;}


/*------------ footer ------------*/
footer {display:block; position:fixed; left:0px; bottom:0px; z-index:999; width:100%; height:10vh; background-color:black; background-image:url(../images/footer_1920.jpg); background-size:98% auto; background-repeat:no-repeat; background-position:center center;}

@media screen and (max-width: 1910px) { footer {background-image:url(../images/footer_1680.jpg);} }
@media screen and (max-width: 1200px) { footer {background-image:url(../images/footer_1140.jpg);} }
@media screen and (max-width: 991px) { footer {background-image:url(../images/footer_mobile.jpg); background-size:98% 90%;} }



/*------------ error404 ------------*/

.errorpage{min-height:calc(90vh - 100px);padding-top: 80px;}
.errorpage .inner{max-width: 1100px; margin: 0 auto;padding-top: 100px;}
.errorpage .box{width: 360px;height: 360px;margin: 0 auto;border-radius: 50%;background: #FFD522;display: flex;flex-direction:column;align-items:center;justify-content: center;}
.errorpage h1{font-size:80px;line-height:1.5;font-weight: bold; text-align: center;margin-bottom: 10px;}
.errorpage h2{font-size:20px;line-height:1.5;font-weight: bold;  text-align: center;}
.errorpage .item_center{position: relative;margin:0 auto;}
.errorpage .chef_lt {position: absolute;left: 100px;bottom: 0px;}
.errorpage .chef_rt {position: absolute;right:100px;bottom: 0px;}
.errorpage .fix_bg{position: fixed;bottom: 9vh; right:0;left:0}
.errorpage .dn_bg {position:relative; width:100%; margin-bottom:0;}
.errorpage .dn_bg .wave {width:100%; height:auto;}
.errorpage .dn_bg .lt {width:15%; position:absolute; bottom:0; left:2%;}
.errorpage .dn_bg .rt {width:15%; position:absolute; bottom:0; right:2%;}
@media screen and (max-width: 768px){
	.errorpage .box{width: 88vw;height: 88vw;max-width: 360px;max-height: 360px;}
	.errorpage .chef_lt ,.errorpage .chef_rt {display: none;}
}
/*------------ mobile ------------*/

@media screen and (max-width: 768px) {

    .beer_title_a, .beer_title_b {max-width:85%; box-sizing:content-box; text-align:center; font-size:28px; line-height:28px; padding:10px 40px; border:2px solid black;}
    .beer_title_a::before, .beer_title_a::after,
    .beer_title_b::before, .beer_title_b::after {width:70px; height:70px; background-size:cover;}

    .beer_title_a .mbbr, .beer_title_b .mbbr {display:block;}

    .btn_y span {font-size:18px; padding:10px 30px;}
    .btn_g span {font-size:18px; padding:10px 30px;}
    .btn_y:before {border-radius:30px;}
    .btn_g:before {border-radius:26px;}
    
    
    header {height:50px; background:#ffd522; width:100%;}

	header .nav {display:none; background:#ffd522; width:100vw; height:100vh; top:50px; right:0px; padding-top:25px;}
	header .nav li {display:block; width:100%; position:relative; padding:0px; height:auto;}
	header .nav li a {display:block; width:80%; margin:auto; font-size:18px; line-height:60px; text-align:left; border-bottom:1px solid black;}
	header .nav li:last-child {border-bottom:0px;}
	
	header .nav .sub {position:relative; top:0; left:0; transform:translate(0,0); padding:0px; width:100%;}
	header .nav .sub li {height:auto; padding:0px;}
	header .nav .sub a {height:auto; line-height:30px; border-bottom:0px;}
	header .nav .sub2 a {height:auto;}
	header .nav .sub a, header .nav .sub2 a {min-width:80%; margin:auto; padding:8px 0px;}
	
	header .hd_logo {margin-top:10px; margin-left:10px;}
	
	header .nav .arrow {
		width: 15px;
		height: 15px;
		display: inline-block;
		position: absolute;
		top:22px;
		right:10%;
	}
	header .nav .arrow span {
		top: 8px;
		position: absolute;
		width: 9px;
		height: 2px;
		background-color: black;
		display: inline-block;
		-webkit-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
	header .nav .arrow span:first-of-type {
		left: 0;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	header .nav .arrow span:last-of-type {
		right: 0;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	header .nav .arrow.active span:first-of-type {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	header .nav .arrow.active span:last-of-type {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	header #mbmnu {display:block; position:absolute; right:17px; top:13px; width:30px; height:25px;}
	header #mbmnu span {display:block; width:30px; height:3px; background:black;}
	header #mbmnu span:first-child {position:absolute; top:2px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
	header #mbmnu span:nth-child(2) {position:absolute; top:11px; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;}
	header #mbmnu span:nth-child(3) {position:absolute; top:20px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

	header #mbmnu.open span:first-child {top:13px; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
	header #mbmnu.open span:nth-child(2) {display:none;}
	header #mbmnu.open span:nth-child(3) {top:13px; -webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}



}