body { background-color: #fffdfb; background-repeat: no-repeat; background-position: center top; background-size: 100%; }

.banner { width: 100%;height: auto; margin: 0px; padding: 0;  }
.banner img { width:100%; height:auto; vertical-align:top; margin:0px; padding:0px}

.main { margin-top: 15px; margin-bottom: 100px; 
}

.main .card { border: 0; margin-bottom: 15px; 
}

.main .card .card-header {
	background: none;
	border: 0;
	display: flex;
	align-items: center;
}

.main .card .card-header .title-icon {
	width: 25px;
}

.main .card .card-header .title-icon img {
	width: 100%;
}

.main .card .card-header .title-text {
	font-size: 18px;
	font-weight: bold;
	margin-left: 5px;
}

.main .card .card-body {
	padding: .25rem 1rem;
}

.main .btn-icon {
	margin-bottom: 0px;
}

.main .btn-icon .btn-item { padding: 4% 1% 3% 3%; text-align: left; width: 48%; margin:3% 0%; border-radius: 20px;}
.main .btn-icon .btn-item:nth-child(2n) { margin-left:3.5%}
.icon_1 {background: linear-gradient(135deg, rgb(177,233,208) 0%,rgb(206,243,229) 100%); box-shadow:0px 0px 8px #cef3e5;}
.icon_1 a {color:#53a068;}
.icon_2 {background: linear-gradient(135deg, rgb(170,214,253) 0%,rgb(196,228,253) 100%); box-shadow:0px 0px 8px #acd8fd; }
.icon_2 a {color:#4c75cd; }
.icon_3 {background: linear-gradient(135deg, rgb(247,227,114) 0%,rgb(255,250,221) 100%); box-shadow:0px 0px 8px #f6e476; }
.icon_3 a {color:#dab42f;}
.icon_4 {background: linear-gradient(135deg, rgb(222,194,252) 0%,rgb(232,227,247) 100%); box-shadow:0px 0px 8px #dec2fc;  }
.icon_4 a {color:#7f4cd5;}

.main .btn-icon .btn-item .icon {margin:0px;width: 40%;height: auto;overflow: hidden;float:left}
.main .btn-icon .btn-item .icon img {padding: 0px;width: 100%;}

.main .btn-icon .btn-item .name {float:left; line-height:16px; padding-top:3%}
.main .btn-icon .btn-item .name p.eng { text-transform: uppercase; font-size: 12px; margin-bottom: 5px }
.main .btn-icon .btn-item .name p.title { font-size:1.2rem; font-weight:bold;margin-bottom:10px}
.main .btn-icon .btn-item .name p.img { width:30%; height:auto; overflow:hidden}
.main .btn-icon .btn-item .name p.img img { width:100%; height:auto}


@media (min-width:640px) {
.main .btn-icon .btn-item .name {padding-top:5%;}	
.main .btn-icon .btn-item .name p.eng {font-size: 14px; margin-bottom:10px}
.main .btn-icon .btn-item .name p.title { font-size:1.4rem; font-weight:bold;margin-bottom:20px}
}

@media (min-width:960px) {
.main .btn-icon .btn-item { padding:4% 1% 2% 3%;}
.main .btn-icon .btn-item .name {padding-top:4%; margin-left:2%}	
.main .btn-icon .btn-item .name p.eng {font-size: 16px; margin-bottom:15px}
.main .btn-icon .btn-item .name p.title { font-size:1.8rem; font-weight:bold;margin-bottom:30px}
}

@media (max-width:320px) {
.main .btn-icon .btn-item { padding:5% 1% 1% 3%;}
.main .btn-icon .btn-item .icon {width:38%;}

.main .btn-icon .btn-item .name {float:left; line-height:16px; padding-top:3%}
.main .btn-icon .btn-item .name p.title { font-size:1rem; font-weight:bold;margin-bottom:10px}
	
}

.main .links {
	display: flex;
}

.main .links .link-img {
	width: 100%;
}

.main .links .link-img img {
	border-radius: 5px;
}

.main .links .link-btn {
	width: 90px;
	height: 50px;
	margin-top: 25px;
	margin-left: -100px;
}

.main .links .link-btn .btn {
	font-size: 14px;
	background-color: #fff266;
	border: 0;
	border-radius: 20px;
	color: #333;
}