@font-face {
    font-family: 'DFGyoSho-W7';
    src: url('../assets/fonts/DFGyoSho-W7-WIN-RKSJ-H.woff2') format('woff2'),
        url('../assets/fonts/DFGyoSho-W7-WIN-RKSJ-H.woff') format('woff'),
        url('../assets/fonts/DFGyoSho-W7-WIN-RKSJ-H.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



html {
	font-family: 'Microsoft JhengHei', '微軟正黑體', sans-serif;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	height: 100%
}

body {
	margin: 0;
	font-family: 'Microsoft JhengHei', '微軟正黑體', sans-serif;
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: left;
	background-color: rgb(253, 252, 249);
	height: 100%;
	padding-top: 0;
	color: #6c757d;

	
	background-repeat: repeat;
	background-position: top left;
	background-attachment: fixed;

}


@media print {
	body {
		padding-top: 0;
		padding-left: 0
	}
}

.btn-primary {
	color: #fff;
	background-color: #5A3C28;
	border-color: #5A3C28
}

.btn-primary:hover {
	color: #fff;
	background-color: #9f4e2f;
	border-color: #964a2c
}

.btn-primary.focus,
.btn-primary:focus {
	color: #fff;
	background-color: #9f4e2f;
	border-color: #964a2c;
	box-shadow: 0 0 0 .2rem rgba(199, 117, 86, .5)
}

.btn-primary.disabled,
.btn-primary:disabled {
	color: #fff;
	background-color: #5A3C28;
	border-color: #5A3C28
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
	color: #fff;
	background-color: #964a2c;
	border-color: #8c4529
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 .2rem rgba(199, 117, 86, .5)
}


.btn-outline-primary {
	color: #5A3C28;
	border-color: #5A3C28
}

.btn-outline-primary:hover {
	color: #fff;
	background-color: #5A3C28;
	border-color: #5A3C28
}

.btn-outline-primary.focus,
.btn-outline-primary:focus {
	box-shadow: 0 0 0 .2rem rgba(189, 93, 56, .5)
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
	color: #5A3C28;
	background-color: transparent
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle {
	color: #fff;
	background-color: #5A3C28;
	border-color: #5A3C28
}

.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 .2rem rgba(189, 93, 56, .5)
}


.bg-primary {
	background-color: #5A3C28!important
}

a.bg-primary:focus,
a.bg-primary:hover,
button.bg-primary:focus,
button.bg-primary:hover {
	background-color: #964a2c!important
}

.border-primary {
	border-color: #5A3C28!important
}

.text-primary {
	color: #5A3C28!important
}

a.text-primary:focus,
a.text-primary:hover {
	color: #824027!important
}


.nav {
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none
}

.nav-link {
	display: block;
	padding: .5rem 1rem
}

@media (min-width:992px) {
	.nav-link {
		padding: .1rem 1rem
	}
}

.nav-link:focus,
.nav-link:hover {
	text-decoration: none
}

.nav-link.disabled {
	color: #6c757d;
	pointer-events: none;
	cursor: default
}

.nav-tabs {
	border-bottom: 1px solid #dee2e6
}

.nav-tabs .nav-item {
	margin-bottom: -1px
}

.nav-tabs .nav-link {
	border: 1px solid transparent;
	border-top-left-radius: .25rem;
	border-top-right-radius: .25rem
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
	border-color: #e9ecef #e9ecef #dee2e6
}

.nav-tabs .nav-link.disabled {
	color: #6c757d;
	background-color: transparent;
	border-color: transparent
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	color: #495057;
	background-color: #fff;
	border-color: #dee2e6 #dee2e6 #fff
}

.nav-tabs .dropdown-menu {
	margin-top: -1px;
	border-top-left-radius: 0;
	border-top-right-radius: 0
}

.nav-pills .nav-link {
	border-radius: .25rem
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
	color: #fff;
	background-color: #5A3C28
}

.nav-fill .nav-item,
.nav-fill>.nav-link {
	flex: 1 1 auto;
	text-align: center
}

.nav-justified .nav-item,
.nav-justified>.nav-link {
	flex-basis: 0;
	flex-grow: 1;
	text-align: center
}

.tab-content>.tab-pane {
	display: none
}

.tab-content>.active {
	display: block
}

.navbar {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: .5rem 1rem
}

.navbar .container,
.navbar .container-fluid,
.navbar .container-lg,
.navbar .container-md,
.navbar .container-sm,
.navbar .container-xl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between
}

.navbar-brand {
	display: inline-block;
	padding-top: 0rem;
	padding-bottom: 0rem;
	margin-right: 1rem;
	font-size: 1.25rem;
	line-height: inherit;
	white-space: nowrap
}

.navbar-brand img {
	height: 3rem;
}

.navbar-brand:focus,
.navbar-brand:hover {
	text-decoration: none
}

.navbar-nav {
	display: flex;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none
}

.navbar-nav .nav-link {
	padding-right: 0;
	padding-left: 0
}

.navbar-nav .dropdown-menu {
	position: static;
	float: none
}

.navbar-text {
	display: inline-block;
	padding-top: .5rem;
	padding-bottom: .5rem
}

.navbar-collapse {
	flex-basis: 100%;
	flex-grow: 1;
	align-items: center
}

.navbar-toggler {
	padding: .25rem .75rem;
	font-size: 1.25rem;
	line-height: 1;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: .25rem
}

.navbar-toggler:focus,
.navbar-toggler:hover {
	text-decoration: none
}

.navbar-toggler-icon {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	content: "";
	background: no-repeat center center;
	background-size: 100% 100%
}

@media (max-width:575.98px) {
	.navbar-expand-sm>.container,
	.navbar-expand-sm>.container-fluid,
	.navbar-expand-sm>.container-lg,
	.navbar-expand-sm>.container-md,
	.navbar-expand-sm>.container-sm,
	.navbar-expand-sm>.container-xl {
		padding-right: 0;
		padding-left: 0
	}
}

@media (min-width:576px) {
	.navbar-expand-sm {
		flex-flow: row nowrap;
		justify-content: flex-start
	}
	.navbar-expand-sm .navbar-nav {
		flex-direction: row
	}
	.navbar-expand-sm .navbar-nav .dropdown-menu {
		position: absolute
	}
	.navbar-expand-sm .navbar-nav .nav-link {
		padding-right: .5rem;
		padding-left: .5rem
	}
	.navbar-expand-sm>.container,
	.navbar-expand-sm>.container-fluid,
	.navbar-expand-sm>.container-lg,
	.navbar-expand-sm>.container-md,
	.navbar-expand-sm>.container-sm,
	.navbar-expand-sm>.container-xl {
		flex-wrap: nowrap
	}
	.navbar-expand-sm .navbar-collapse {
		display: flex!important;
		flex-basis: auto
	}
	.navbar-expand-sm .navbar-toggler {
		display: none
	}
}

@media (max-width:767.98px) {
	.navbar-expand-md>.container,
	.navbar-expand-md>.container-fluid,
	.navbar-expand-md>.container-lg,
	.navbar-expand-md>.container-md,
	.navbar-expand-md>.container-sm,
	.navbar-expand-md>.container-xl {
		padding-right: 0;
		padding-left: 0
	}
}

@media (min-width:768px) {
	.navbar-expand-md {
		flex-flow: row nowrap;
		justify-content: flex-start
	}
	.navbar-expand-md .navbar-nav {
		flex-direction: row
	}
	.navbar-expand-md .navbar-nav .dropdown-menu {
		position: absolute
	}
	.navbar-expand-md .navbar-nav .nav-link {
		padding-right: .5rem;
		padding-left: .5rem
	}
	.navbar-expand-md>.container,
	.navbar-expand-md>.container-fluid,
	.navbar-expand-md>.container-lg,
	.navbar-expand-md>.container-md,
	.navbar-expand-md>.container-sm,
	.navbar-expand-md>.container-xl {
		flex-wrap: nowrap
	}
	.navbar-expand-md .navbar-collapse {
		display: flex!important;
		flex-basis: auto
	}
	.navbar-expand-md .navbar-toggler {
		display: none
	}
}

@media (max-width:991.98px) {
	.navbar-expand-lg>.container,
	.navbar-expand-lg>.container-fluid,
	.navbar-expand-lg>.container-lg,
	.navbar-expand-lg>.container-md,
	.navbar-expand-lg>.container-sm,
	.navbar-expand-lg>.container-xl {
		padding-right: 0;
		padding-left: 0
	}
}

@media (min-width:992px) {
	.navbar-expand-lg {
		flex-flow: row nowrap;
		justify-content: flex-start
	}
	.navbar-expand-lg .navbar-nav {
		flex-direction: row
	}
	.navbar-expand-lg .navbar-nav .dropdown-menu {
		position: absolute
	}
	.navbar-expand-lg .navbar-nav .nav-link {
		padding-right: .5rem;
		padding-left: .5rem
	}
	.navbar-expand-lg>.container,
	.navbar-expand-lg>.container-fluid,
	.navbar-expand-lg>.container-lg,
	.navbar-expand-lg>.container-md,
	.navbar-expand-lg>.container-sm,
	.navbar-expand-lg>.container-xl {
		flex-wrap: nowrap
	}
	.navbar-expand-lg .navbar-collapse {
		display: flex!important;
		flex-basis: auto
	}
	.navbar-expand-lg .navbar-toggler {
		display: none
	}
}

@media (max-width:1199.98px) {
	.navbar-expand-xl>.container,
	.navbar-expand-xl>.container-fluid,
	.navbar-expand-xl>.container-lg,
	.navbar-expand-xl>.container-md,
	.navbar-expand-xl>.container-sm,
	.navbar-expand-xl>.container-xl {
		padding-right: 0;
		padding-left: 0
	}
}

@media (min-width:1200px) {
	.navbar-expand-xl {
		flex-flow: row nowrap;
		justify-content: flex-start
	}
	.navbar-expand-xl .navbar-nav {
		flex-direction: row
	}
	.navbar-expand-xl .navbar-nav .dropdown-menu {
		position: absolute
	}
	.navbar-expand-xl .navbar-nav .nav-link {
		padding-right: .5rem;
		padding-left: .5rem
	}
	.navbar-expand-xl>.container,
	.navbar-expand-xl>.container-fluid,
	.navbar-expand-xl>.container-lg,
	.navbar-expand-xl>.container-md,
	.navbar-expand-xl>.container-sm,
	.navbar-expand-xl>.container-xl {
		flex-wrap: nowrap
	}
	.navbar-expand-xl .navbar-collapse {
		display: flex!important;
		flex-basis: auto
	}
	.navbar-expand-xl .navbar-toggler {
		display: none
	}
}

.navbar-expand {
	flex-flow: row nowrap;
	justify-content: flex-start
}

.navbar-expand>.container,
.navbar-expand>.container-fluid,
.navbar-expand>.container-lg,
.navbar-expand>.container-md,
.navbar-expand>.container-sm,
.navbar-expand>.container-xl {
	padding-right: 0;
	padding-left: 0
}

.navbar-expand .navbar-nav {
	flex-direction: row
}

.navbar-expand .navbar-nav .dropdown-menu {
	position: absolute
}

.navbar-expand .navbar-nav .nav-link {
	padding-right: .5rem;
	padding-left: .5rem
}

.navbar-expand>.container,
.navbar-expand>.container-fluid,
.navbar-expand>.container-lg,
.navbar-expand>.container-md,
.navbar-expand>.container-sm,
.navbar-expand>.container-xl {
	flex-wrap: nowrap
}

.navbar-expand .navbar-collapse {
	display: flex!important;
	flex-basis: auto
}

.navbar-expand .navbar-toggler {
	display: none
}

.navbar-light .navbar-brand {
	color: rgba(0, 0, 0, .9)
}

.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover {
	color: rgba(0, 0, 0, .9)
}

.navbar-light .navbar-nav .nav-link {
	color: rgba(0, 0, 0, .5)
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
	color: rgba(0, 0, 0, .7)
}

.navbar-light .navbar-nav .nav-link.disabled {
	color: rgba(0, 0, 0, .3)
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
	color: rgba(0, 0, 0, .9)
}

.navbar-light .navbar-toggler {
	color: rgba(0, 0, 0, .5);
	border-color: rgba(0, 0, 0, .1)
}

.navbar-light .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.navbar-light .navbar-text {
	color: rgba(0, 0, 0, .5)
}

.navbar-light .navbar-text a {
	color: rgba(0, 0, 0, .9)
}

.navbar-light .navbar-text a:focus,
.navbar-light .navbar-text a:hover {
	color: rgba(0, 0, 0, .9)
}

.navbar-dark .navbar-brand {
	color: #fff
}

.navbar-dark .navbar-brand:focus,
.navbar-dark .navbar-brand:hover {
	color: #fff
}

.navbar-dark .navbar-nav .nav-link {
	color: rgba(255, 255, 255, .75)
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
	color: rgba(255, 255, 255, .95)
}

.navbar-dark .navbar-nav .nav-link.disabled {
	color: rgba(255, 255, 255, .25)
}

.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link {
	color: #fff
}

.navbar-dark .navbar-toggler {
	color: rgba(255, 255, 255, .9);
	border-color: rgba(255, 255, 255, .75)
}

.navbar-dark .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.navbar-dark .navbar-text {
	color: rgba(255, 255, 255, .5)
}

.navbar-dark .navbar-text a {
	color: #fff
}

.navbar-dark .navbar-text a:focus,
.navbar-dark .navbar-text a:hover {
	color: #fff
}


h1,
h2,
h3,
h4,
h5,
h6 {
	text-transform: uppercase
}

h1 {
	line-height: 1
}

p.lead {
	font-size: 1.15rem;
	font-weight: 400
}

.subheading {
	font-family: inherit;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 1.5rem
}

#sideNav .navbar-nav .nav-item .nav-link {
	/* font-weight: 800; */
	letter-spacing: .05rem;
	text-transform: uppercase
}

#sideNav .navbar-toggler:focus {
	outline-color: #d48a6e
}

.social-icons .social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.5rem;
	width: 2.5rem;
	background-color: #495057;
	color: #fff;
	border-radius: 100%;
	font-size: 1.5rem;
	margin-right: .5rem
}

.social-icons .social-icon:last-child {
	margin-right: 0
}

.social-icons .social-icon:hover {
	background-color: #5A3C28
}

.dev-icons {
	font-size: 3rem
}

section.resume-section {
	display: flex;
	align-items: center;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 5rem;
	padding-bottom: 5rem;
	max-width: 75rem
}

section.resume-section .resume-section-content {
	width: 100%
}

@media (min-width:768px) {
	section.resume-section {
		min-height: 100vh
	}
}

@media (min-width:992px) {
	section.resume-section {
		padding-left: 3rem;
		padding-right: 3rem;
		padding-top: 5rem;
		padding-bottom: 5rem
	}
}

.cobox {
	background-color: rgba(255, 255, 255, .75);
	border-radius: .25rem
}

#whatsapptop {
	color: #6c6c6c;
	height: auto;
	position: fixed;
	bottom: 40px;
	right: 40px;
	margin: 0;
	z-index: 10000
}

#whatsapptop>img {
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-decoration: none;
	-o-border-radius: 60px;
	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	border-radius: 60px;
	border: 2px solid #fff;
	background-color: #fff;
	box-shadow: 0 0 18px rgba(33, 33, 33, .73);
	text-align: center;
	position: relative;
	display: inline-block
}

.btn-warning2 {
	color: #fff;
	background-color: #f79324;
	border-color: #f79324
}

.btn-warning2:hover {
	color: #fff;
	background-color: #d67b16;
	border-color: #d67b16
}

.btn-warning2.focus,
.btn-warning2:focus {
	color: #fff;
	background-color: #d67b16;
	border-color: #d67b16;
	box-shadow: 0 0 0 .2rem rgba(255, 202, 44, .5)
}

.btn-danger2 {
	color: #fff;
	background-color: #f15a2f;
	border-color: #f15a2f
}

.btn-danger2:hover {
	color: #fff;
	background-color: #dc491f;
	border-color: #dc491f
}

.btn-danger2.focus,
.btn-danger2:focus {
	color: #fff;
	background-color: #dc491f;
	border-color: #dc491f;
	box-shadow: 0 0 0 .2rem rgba(255, 202, 44, .5)
}

.f80 {
	font-size: 80%
}

.f75 {
	font-size: 75%
}

.f70,
.feng {
	font-size: 70%
}

.f65 {
	font-size: 65%
}

.f60 {
	font-size: 60%
}

#sideNav .sub-navbar-nav {
	border-left:1px solid rgba(255, 255, 255, 0.808);
	list-style: none;
	margin-left: 0.5rem;
	padding-left: 1rem;
	opacity: 1;
	transition: opacity .4s ease-in-out;
}

@media (min-width:992px) {
	#sideNav .navbar-collapse .navbar-nav .nav-item
	{
		position:relative;
	}
	#sideNav .sub-navbar-nav {
		display:none;
		position: absolute;
		padding: .1rem 1rem;
		top: 0;
		opacity: 0;
		margin-left: 7rem;
		width: 50rem;
		border-left:1px solid white;
	}

	#sideNav .navbar-collapse .navbar-nav .nav-item .sub-navbar-nav > .nav-item {
		display: inline-block;
		margin-right:.7rem;
		margin-left:.7rem;
	}

	#sideNav .navbar-collapse .navbar-nav .nav-item .sub-navbar-nav > .nav-item .nav-link {
		padding:0;
	}

	body.menushow #sideNav {
		width: 50rem;
	}

	body.menushow #sideNav .navbar-collapse .navbar-nav {
		width: 50rem;
	}

	#sideNav .sub-navbar-nav.menushow {
		display:block;
		opacity: 1;
	}
}



.pagination {
	display: inline-block;
	padding-left: 0;
	margin: 20px 0;
	border-radius: 4px;
}

.pagination > li {
	display: inline;
}

.pagination > li > a, 
.pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #5A3C28;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}

@media screen and (max-width: 600px) {
.pagination > li > a, 
.pagination > li > span {
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1.5;
}
}

.pagination > li:first-child > a, 
.pagination > li:first-child > span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

@media screen and (max-width: 600px) {
.pagination > li:first-child > a, 
.pagination > li:first-child > span {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}

.pagination>li:last-child>a, 
.pagination>li:last-child>span {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

.pagination > li > a, 
.pagination > li > span {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
}

.pagination>li>a:focus, 
.pagination>li>a:hover, 
.pagination>li>span:focus, 
.pagination>li>span:hover {
z-index: 2;
color: #5A3C28;
background-color: #eee;
border-color: #ddd;
}

.pagination>.active>a,
.pagination>.active>a:focus, 
.pagination>.active>a:hover, 
.pagination>.active>span, 
.pagination>.active>span:focus, 
.pagination>.active>span:hover {
z-index: 3;
color: #fff;
cursor: default;
background-color: #5A3C28;
border-color: #5A3C28;
}

.pagination > .disabled > a, 
.pagination>.disabled>a:focus, 
.pagination>.disabled>a:hover, 
.pagination>.disabled>span, 
.pagination>.disabled>span:focus, 
.pagination>.disabled>span:hover {
color: #777;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd;
}

.page-item.active .page-link {
z-index: 1;
color: #fff;
background-color: #5A3C28;
border-color: #5A3C28;
}

.form-required {
	color: #cd201f;
}

.card-header {
	background: none;
	padding: 0.5rem 1.5rem;
	display: -ms-flexbox;
	display: flex;
	min-height: 3.5rem;
	-ms-flex-align: center;
	align-items: center;
}

.card-header .card-title {
	margin-bottom: 0;
}

.card-title:only-child {
	margin-bottom: 0;
}

.card-title {
	font-size: 1.125rem;
	line-height: 1.2;
	font-weight: 400;
	margin-bottom: 1.5rem;
}



.colorinput {
	margin: 0;
	position: relative;
	cursor: pointer;
  }
  
  .colorinput-input {
	position: absolute;
	z-index: -1;
	opacity: 0;
  }
  
  .colorinput-color {
	display: inline-block;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 3px;
	border: 1px solid rgba(0, 40, 100, 0.12);
	color: #fff;
	background-color: #fff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }
  
  .colorinput-color:before {
	content: '';
	opacity: 0;
	position: absolute;
	top: .25rem;
	left: .25rem;
	height: 1.25rem;
	width: 1.25rem;
	transition: .3s opacity;
	background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") no-repeat center center/50% 50%;
  }
  
  .colorinput-input:checked ~ .colorinput-color {
	background-color: #467fcf;
  }

  .colorinput-input:checked ~ .colorinput-color:before {
	opacity: 1;
  }
  
  .colorinput-input:focus ~ .colorinput-color {
	border-color: #467fcf;
	box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
  }

.bg-blue {
	background-color: #467fcf !important;
  }
  
  a.bg-blue:hover, a.bg-blue:focus,
  button.bg-blue:hover,
  button.bg-blue:focus {
	background-color: #2f66b3 !important;
  }
  
  .text-blue {
	color: #467fcf !important;
  }
  
  .bg-indigo {
	background-color: #6574cd !important;
  }
  
  a.bg-indigo:hover, a.bg-indigo:focus,
  button.bg-indigo:hover,
  button.bg-indigo:focus {
	background-color: #3f51c1 !important;
  }
  
  .text-indigo {
	color: #6574cd !important;
  }
  
  .bg-purple {
	background-color: #a55eea !important;
  }
  
  a.bg-purple:hover, a.bg-purple:focus,
  button.bg-purple:hover,
  button.bg-purple:focus {
	background-color: #8c31e4 !important;
  }
  
  .text-purple {
	color: #a55eea !important;
  }
  
  .bg-pink {
	background-color: #f66d9b !important;
  }
  
  a.bg-pink:hover, a.bg-pink:focus,
  button.bg-pink:hover,
  button.bg-pink:focus {
	background-color: #f33d7a !important;
  }
  
  .text-pink {
	color: #f66d9b !important;
  }
  
  .bg-red {
	background-color: #cd201f !important;
  }
  
  a.bg-red:hover, a.bg-red:focus,
  button.bg-red:hover,
  button.bg-red:focus {
	background-color: #a11918 !important;
  }
  
  .text-red {
	color: #cd201f !important;
  }
  
  .bg-orange {
	background-color: #fd9644 !important;
  }
  
  a.bg-orange:hover, a.bg-orange:focus,
  button.bg-orange:hover,
  button.bg-orange:focus {
	background-color: #fc7a12 !important;
  }
  
  .text-orange {
	color: #fd9644 !important;
  }
  
  .bg-yellow {
	background-color: #f1c40f !important;
  }
  
  a.bg-yellow:hover, a.bg-yellow:focus,
  button.bg-yellow:hover,
  button.bg-yellow:focus {
	background-color: #c29d0b !important;
  }
  
  .text-yellow {
	color: #f1c40f !important;
  }
  
  .bg-green {
	background-color: #5eba00 !important;
  }
  
  a.bg-green:hover, a.bg-green:focus,
  button.bg-green:hover,
  button.bg-green:focus {
	background-color: #448700 !important;
  }
  
  .text-green {
	color: #5eba00 !important;
  }
  
  .bg-teal {
	background-color: #2bcbba !important;
  }
  
  a.bg-teal:hover, a.bg-teal:focus,
  button.bg-teal:hover,
  button.bg-teal:focus {
	background-color: #22a193 !important;
  }
  
  .text-teal {
	color: #2bcbba !important;
  }
  
  .bg-cyan {
	background-color: #17a2b8 !important;
  }
  
  a.bg-cyan:hover, a.bg-cyan:focus,
  button.bg-cyan:hover,
  button.bg-cyan:focus {
	background-color: #117a8b !important;
  }
  
  .text-cyan {
	color: #17a2b8 !important;
  }
  
  .bg-white {
	background-color: #fff !important;
  }
  
  a.bg-white:hover, a.bg-white:focus,
  button.bg-white:hover,
  button.bg-white:focus {
	background-color: #e6e5e5 !important;
  }
  
  .text-white {
	color: #fff !important;
  }
  
  .bg-gray {
	background-color: #868e96 !important;
  }
  
  a.bg-gray:hover, a.bg-gray:focus,
  button.bg-gray:hover,
  button.bg-gray:focus {
	background-color: #6c757d !important;
  }
  
  .text-gray {
	color: #868e96 !important;
  }
  
  .bg-gray-dark {
	background-color: #343a40 !important;
  }
  
  a.bg-gray-dark:hover, a.bg-gray-dark:focus,
  button.bg-gray-dark:hover,
  button.bg-gray-dark:focus {
	background-color: #1d2124 !important;
  }
  
  .text-gray-dark {
	color: #343a40 !important;
  }
  
  .bg-azure {
	background-color: #45aaf2 !important;
  }
  
  a.bg-azure:hover, a.bg-azure:focus,
  button.bg-azure:hover,
  button.bg-azure:focus {
	background-color: #1594ef !important;
  }
  
  .text-azure {
	color: #45aaf2 !important;
  }
  
  .bg-lime {
	background-color: #7bd235 !important;
  }
  
  a.bg-lime:hover, a.bg-lime:focus,
  button.bg-lime:hover,
  button.bg-lime:focus {
	background-color: #63ad27 !important;
  }
  
.text-lime {
	color: #7bd235 !important;
}

.form-fieldset {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	padding: 0.5rem;
	border-radius: 3px;
	margin-bottom: 1rem;
}



.selectgroup {
	display: -ms-inline-flexbox;
	display: inline-flex;
}

.selectgroup-item {
	-ms-flex-positive: 1;
	flex-grow: 1;
	position: relative;
}

.selectgroup-item + .selectgroup-item {
	margin-left: -1px;
}

.selectgroup-item:not(:first-child) .selectgroup-button {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.selectgroup-item:not(:last-child) .selectgroup-button {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.selectgroup-input {
	opacity: 0;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
}

.selectgroup-button {
	display: block;
	border: 1px solid rgba(0, 40, 100, 0.12);
	text-align: center;
	padding: 0.375rem 1rem;
	position: relative;
	cursor: pointer;
	border-radius: 3px;
	color: #9aa0ac;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-size: 0.9375rem;
	line-height: 1.5rem;
	min-width: 2.375rem;
	background-color: white;
}

.selectgroup-input:checked + .selectgroup-button {
	border-color: #8c4529;
	z-index: 1;
	color: #8c4529;
	background: #fed3ca;
}

.selectgroup-input:focus + .selectgroup-button {
	border-color: #8c4529;
	z-index: 2;
	color: #8c4529;
	box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
}

.footer .mediabar {
	position: absolute; 
	right: 0px; top: 0px; 
	height: 100%;
}

@media (max-width:992px) {
	.footer .mediabar {
		position: relative; 
		right: 0px; top: 0px; 
		height: auto;
		justify-content: center;
	}
}

.font-1 {
	font-family: 'DFGyoSho-W7',"Microsoft JhengHei", 微軟正黑體, sans-serif;
}

.header-mf-logo {
	height:150px;
}

@media (max-width:992px) {
	.header-mf-logo {
		height:75px;
	}

	.header-mf-title {
		font-size: 1.2rem;
	}
}

.event-submit-content {
	text-align:left; 
	width:70%;
}


@media (max-width:992px) {
	.event-submit-content {
		width:auto;
	}
	
}

.input-group-text, .form-control {
	font-size: 1.1rem;
}

#my-turnstile {
  display: inline-block;
}