@import url('https://fonts.googleapis.com/earlyaccess/cwtexyen.css');
@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:60px;
	height:60px;
	position: fixed;
	top:-5px;
	right:0;
	z-index:10000;
	padding:12px;
	background-color: rgba(255, 255, 255,.7);
	-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;
}


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

.hamburger__icon,.hamburger__icon:after,.hamburger__icon:before{display:block;width:36px;height:4px;background-color:rgba(23, 155, 181, 1);-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:rgba(23, 155, 181, 1);}

.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(23, 155, 181, 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: 1px;
}
.fat-nav li small{
	display: block;
    text-align: center;
    padding-top: 8px;
    font-size: 14px;
	letter-spacing: 1px;
	color: rgba(255,255,255,.85);
}

.fat-nav li,.fat-nav li a{color:#fff;
	font-weight: 300;text-decoration:none;}

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

.fat-nav li a i {
    font-size:20px; margin-right:8px; /*color:#f0a926;*/
}

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

.nologin{ display:none;}


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