body {
	font-family: adobe-thai, serif;
	font-style: normal;
	font-weight: 600;
	margin: 0;
	padding: 0;

}

a {
	color: #572f00;
	text-decoration: none;
	transition: 0.3s;
}
a:hover {
	color: #fff;
	transition: 0.3s;
}
.wrap-content {
	background: url(../images/bg.jpg) no-repeat top center;
	background-size:contain;
	width: 38%;
	height: 100vh;
	margin: 0 auto;
}
.content {
	padding: 2%;
}
.box-menu {

}
.box-menu ul {
	margin: 10px;
	padding: 0;
}
.box-menu ul li {
	margin: 0;
	padding: 0 0 5px 0;
	display: inline-block;
	list-style: none;
	width: 49%;
	position: relative;
	
	text-shadow: 0  10px 10px rgba(160, 112, 44, 0.6); 
	font-size: 20px;
}
.box-menu ul li a {
	text-shadow: 0 1px 0 #000;
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 0 0 0 0;
	vertical-align: middle;

}
.box-menu ul li:before {
	content: '';
	width: 20px;
	height: 20px;
	background: #f48d45;
	border-radius: 100%;
	display: inline-block;
	margin: 0 10px 0 0;
	vertical-align: middle;
	box-shadow: 0  2px 0px #000; 
	position: relative;
	z-index: 1;
}
.box-menu ul li:after {
	content: '';
	background: rgba(235, 242, 47, 0.3);
	filter: blur(10px);
	width: 100%;
	height: 100%;
	display:block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	border-radius: 20px;
}



.box-menu ul li:nth-of-type(1):after {
	width: 65%;
}
.box-menu ul li:nth-of-type(2):after {
	width:90%;
}

.box-menu ul li:nth-of-type(3):after {
	width:40%;
}

.box-menu ul li:nth-of-type(4):after {
	width:75%;
}
.box-menu ul li:nth-of-type(5):after {
	width:80%;
}

.box-menu ul li:nth-of-type(6):after {
	width:50%;
}
.box-menu ul li:nth-of-type(7):after {
	width:50%;
}
.box-menu ul li:nth-of-type(8):after {
	width:70%;
}
.box-menu ul li:nth-of-type(9):after {
	width:80%;
}
.box-menu ul li:nth-of-type(10):after {
	width:70%;
}

.box-icon {
	margin: 35px 0 0 15px;
}
.box-icon ul {
	margin: 0;
	padding: 0;
}
.box-icon ul li {
	margin: 0 40px 0 0;
	padding: 0;
	list-style: none;
	width: 60px;
	display: inline-block;
}
.box-icon ul li img {
	width: 100%;
	transition: 0.3s;
}
.box-icon ul li:hover img {
	transform: scale(1.1);
	transition: 0.3s;
}



@media screen and (max-width: 2880px) {

.box-menu ul li {
	font-size: 32px;

}
 @media screen and (max-width: 1920px) {

.box-menu ul li {
	font-size: 20px;

}
@media screen and (max-width: 1536px) {
	.box-menu ul li {
	font-size: 16px;
}
.box-icon ul li {
    margin: 0 34px 0 0;
  
    width: 50px;
    display: inline-block;
}



}
@media screen and (max-width:1440px) {




}
@media screen and (max-width:1366px) {
.box-menu ul li {
    font-size: 15px;
}

.wrap-content {
 
    background-size: cover;
    width: 56%;
}


}

@media screen and (max-width: 1280px) {
		.box-menu ul li {
	font-size: 14px;
}
	.box-menu ul li a {
    text-shadow: 0 0.5px 0 #000;

  }
  .box-menu ul li:before {
    width: 14px;
    height: 14px;
    margin: 0 6px 0 0;

  }
  .box-icon ul li {
  	width: 40px;
  }

}

@media screen and (max-width: 1024px) {
.wrap-content {
	width: 100%;
}
.box-menu ul li {
    font-size: 28px;
}
.box-menu ul li:before {
    width: 23px;
    height: 23px;
    margin: 0 14px 0 0;
}
.box-icon ul li {
    width: 83px;
    margin: 0 66px 0 0;
}
.box-icon {
    margin: 46px 0 0 15px;

}

 


@media screen and (max-width: 946px) {
	.box-menu ul li {
    font-size: 22px;
}
.box-icon ul li {
    width: 68px;
    margin: 0 43px 0 0;
}
.wrap-content {background-size: cover;}
}

@media screen and (max-width: 640px) {


.box-menu ul li {
    font-size: 17px;
}

}

@media screen and (max-width: 430px) {
	.wrap-content {
		width: 100%;
		
	}
.box-menu ul li:before {
    width: 14px;
    height: 14px;
    margin: 0 6px 0 0;
}
	.box-menu ul li {
    font-size: 12px;
}
.box-icon ul li {
    width: 46px;
    margin: 0 28px 0 0;
}
.box-icon {
    margin: 26px 0 0 9px;
}

}

@media screen and (max-width: 390px) {
.box-icon ul li {
    width: 39px;
    margin: 0 15px 0 0;
}

.box-menu ul li {
    font-size: 10px;
}
.box-menu ul li:before {
    width: 14px;
    height: 14px;
    margin: 0 6px 0 0;
}
}


@media screen and (max-width: 320px) {
.box-menu ul li {
    font-size: 9px;
}

}