/* base */
/*html,body,.container{
	width: 100vw;
	min-width: 1200px;
}
@media screen and (max-width: 991px){
	html,body,.container{
		width: 100%;
	}
	.navbar-nav{
		flex-direction: row;
	}
}*/
.bg-sy-primary{
	background-color: #f6eedb;
}
.bg-sy-secondary{
	background-color: #aca199;
}
.text-sy-dark{
	color: #4b4f56;
}
.btn-sy{
    color: #fff;
    border: none;
    border-radius: 1000px;
    background-color: rgb(120,107,97);
    background: rgb(120,107,97);
	background: linear-gradient(267deg, rgba(120,107,97,1) 0%, rgba(172,161,153,1) 100%);
    border-color: #0d6efd;
}
.btn-sy:hover{
	color: #ffffff;
	background: linear-gradient(145deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%), linear-gradient(267deg, rgba(120,107,97,1) 0%, rgba(172,161,153,1) 100%);
}
.btn-sy span{
	display: block;
	font-size: 0.6em;
	line-height: 0.6;
	padding-bottom: 8px;
}
/* navbar */
.navbar-brand img{
	width: 250px;
}
.sy-nav .nav-item .nav-link{
	padding: 0 20px;
	font-size: 20px;
	line-height: 2;
}
.sy-nav .nav-item .nav-link,
.sy-nav .nav-item .nav-link span{	
	color: red;
}
.sy-nav .nav-item .nav-link.active,
.sy-nav .nav-item .nav-link.active span,
.sy-nav .nav-item .nav-link:hover,
.sy-nav .nav-item .nav-link:hover span{
	color: maroon;
}
.sy-nav .nav-item span{
	display: inline-block;
	transform: scale(0.5) translateX(-40%);
}	
@media screen and (min-width: 992px){
	.sy-nav .nav-item .nav-link{
		line-height: 1.5;
	}
	.sy-nav .nav-item span{
		display: block;
		text-align: center;
		transform: scale(0.6) translateY(-10px);
	}	
}

/* menu */
.sy-menu{
	box-shadow: 0 5px 5px #dddddd;
	position: relative;
	z-index: 1;
}
.sy-menu [class^="col-"]{
	display: flex;
	justify-content: center;
}
.sy-menu a{
	background-image: none;
	display: block;
	text-align: center;
	text-decoration: none;
	color: #786b61;
	width: 250px;
	margin: 10px 0;
	font-size: 1rem;
	line-height: auto;
	opacity: .35;
	transition: opacity .5s;
}
.sy-menu a:hover,
.sy-menu a.active{
	opacity: 1;
	position: relative;
}
.sy-menu a.active::after,
.sy-menu a:hover::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -10px;
	width: 100%;
	height: 5px;
	background-color: #f00;

}
@media screen and (min-width: 992px){
	.sy-menu a{		
		font-size: 1.5rem;
		line-height: 110px;
		margin: 20px 0 30px;
		background-image: url(../img/btn-1_250x110.jpg);
		background-size: contain;
		background-position: top center;
		background-repeat: no-repeat;
	}
	.sy-menu [class^="col-"]:nth-child(2) a{
		background-image: url(../img/btn-2_250x110.jpg);
	}
	.sy-menu [class^="col-"]:nth-child(3) a{
		background-image: url(../img/btn-3_250x110.jpg);
	}
	.sy-menu [class^="col-"]:nth-child(4) a{
		background-image: url(../img/btn-4_250x110.jpg);
	}
	.sy-menu a.active::after,
	.sy-menu a:hover::after{
		content: "";
		display: block;
		position: absolute;
		bottom: -30px;
		width: 100%;
		height: 5px;
		background-color: #f00;

	}
}
/* step1 */
/* dept */
.sy-content.sy-dept a{
	opacity: 0.8;
	transition: opacity .3s;
}
.sy-content.sy-dept a:hover{
	opacity: 1;
}

/* step2 */
/* table */
.table-sy-primary{
    --bs-table-bg: #eeeeee;
    --bs-table-striped-bg: #ffffff;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bacbe6;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #f6eedb;
    --bs-table-hover-color: #000;
    color: #808080;
    border: 3px solid #ffffff;
}
.table-sy-primary>:not(:last-child)>:last-child>* {
     border-bottom-color: #ffffff; 
}
.table-sy-primary th{
	background-color: #ccc;
	border: 1px solid #ffffff;
}
.table-sy-primary th{
	background-color: #ccc;
}

.sy-content table{
	border: 3px solid #ffffff;
}
.sy-content table td{
	color: #786b61;
}

/* step3 */
/* table */
@media screen and (max-width: 768px){
	.table.table-rwd>thead{
	    display: none;
	}
	.table.table-rwd>tbody>tr{
	    display: flex;
	    flex-wrap: wrap;
	}
	.table.table-rwd>tbody>tr>td{
		width: 50%;
		flex-grow: 1;
		text-align: left;
		border-bottom: 1px dotted #cccccc;
	}
	.table.table-rwd>tbody>tr>td>.btn{
		margin-left: 0;
	}
	.table.table-rwd>tbody>tr>td:nth-child(-n+3){
		width: 33.33333%;
	}
	.table.table-rwd>tbody>tr>td:nth-child(1){
		width: 100%;
	}
	.table.table-rwd>tbody>tr>td:nth-child(n+6){
		border-bottom: none;
	}
	.table.table-rwd>tbody>tr>td:before{
		content: attr(abbr);
		font-size: .8em;
		font-weight: bold;
		margin-right: 10px;
	}
}
/* footer */
.sy-foooter .logo img{
	width: 100px;
}