@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
body {
	font-family:Roboto, 'Noto Sans TC', sans-serif;
    margin: 0;
    padding: 0;
}

body, .button {
    color: rgba(0, 0, 0, .9);
}


.cta {
    margin-top: 100px;
}

.buttons {
    margin-top: 100px;
}

.button { 
    display: inline-block;
    text-decoration: none;
    background: #fff;
    border: 2px solid rgba(0, 0, 0, .9);;
    height: 50px;
    line-height: 50px;
    padding-left: 32px;
    padding-right: 32px;
    transition: all, .4s;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;

}

.button:hover {
    
    background-color: rgba(0, 0, 0, .9);;
    color: #fff;
    
}

.avatar {
    margin-top: 40px;
}

.hamburger__icon, 
.hamburger__icon:before, 
.hamburger__icon:after {
    background-color: #666;
}

.text-center {
    text-align: center;
}


.fat-nav{display: none;}

.fat-nav,.hamburger__icon,.hamburger__icon:after,.hamburger__icon:before{-moz-transition-duration:.4s;-o-transition-duration:.4s;-webkit-transition-duration:.4s}

.hamburger{
	display:none;
	width:48px;
	height:48px;
	position: fixed;
	top:10px;
	right:10px;
	z-index:10000;
	padding: 10px 9px;
	background-color: rgba(15, 9, 74,.85);
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-tap-highlight-color:transparent;
	-ms-touch-action:manipulation;
	touch-action:manipulation;
border-radius: 3rem;
}


.hamburger__icon{position:relative;margin-top:12px;margin-bottom:18px;}/*漢堡選單上下間距*/

.hamburger__icon,.hamburger__icon:after,.hamburger__icon:before{display:block;width:30px;height:4px;background-color:#fff; border-radius:5px;  -moz-transition-property:background-color,-moz-transform;-o-transition-property:background-color,-o-transform;-webkit-transition-property:background-color,-webkit-transform;transition-property:background-color,transform;transition-duration:.4s}

.hamburger__icon:after,.hamburger__icon:before{position:absolute;content:""}

.hamburger__icon:before{top:-10px}

.hamburger__icon:after{top:10px}

.hamburger.active .hamburger__icon{background-color:transparent;}

.hamburger.active .hamburger__icon:after,.hamburger.active .hamburger__icon:before{background-color:#fff;}

.hamburger.active .hamburger__icon:before{-moz-transform:translateY(10px)rotate(45deg);-ms-transform:translateY(10px)rotate(45deg);-webkit-transform:translateY(10px)rotate(45deg);transform:translateY(10px)rotate(45deg)}

.hamburger.active .hamburger__icon:after{-moz-transform:translateY(-10px)rotate(-45deg);-ms-transform:translateY(-10px)rotate(-45deg);-webkit-transform:translateY(-10px)rotate(-45deg);transform:translateY(-10px)rotate(-45deg)}

.fat-nav{top:0;left:0;z-index:9999;position:fixed;display:none;width:100%;height:100%; background: rgba(48, 16, 62, 0.92);-moz-transform:scale(1.4);-ms-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4);-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-webkit-transition-property:-webkit-transform;transition-property:transform;transition-duration:.4s;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}

.fat-nav__wrapper{ width:100%; height:100%; display:table; table-layout:fixed;}

.fat-nav.active{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}

.fat-nav ul{display:table-cell;vertical-align:middle;margin:0;padding:0;}

.fat-nav li {
  list-style-type: none;
  text-align: center;
  padding: 15px;
  font-size: 20px;
  letter-spacing: 2px;
}

.fat-nav li,.fat-nav li a{
	color:#fff;
	font-weight: 500;
	text-decoration:none;
}
.fat-nav li a:hover{
	color:#9afffd;
	text-decoration:none;
}

.fat-nav li span {font-size: 24px;
    margin-left: .25rem;
	padding-top: .25rem;
	font-weight: 700;}

.fat-nav li i {
    font-size:20px; margin-right:8px; color:#28d9d6;
}

.fat-nav li img {
    max-width: 200px;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(255,255,255,.35);
}

.nologin{ display:none;}
.fat-nav li small a {
  font-size: 15px;
	font-weight: 300;
}

@media screen and (max-width:820px){
.hamburger{
	display:block;
	}
	
}