@charset "utf-8";
@media screen and (max-width: 670px){
.footer {
	background-color: #cea0de;
	background-image: url(../images/bg-line-01.png);
	background-repeat: repeat;
	background-position: center center;
	float: left;
	height: auto;
	width: 100%;
	padding-top: 8%;
	padding-bottom: 8%;
	font-weight: normal;
}
.box-title-footer {
	float: left;
	height: auto;
	width: 100%;
}
.icon-cat {
	float: left;
	height: auto;
	width: 20%;
	z-index: 9;
	position: relative;
}

.icon-cat img {
    height: auto;
    width: 100%;
    display: block;             /* ป้องกันช่องว่างด้านล่างรูป */
    animation: moveContinuous 4s ease-in-out infinite;
}

@keyframes moveContinuous {
    0% {
        transform: translateX(0); /* จุดเริ่มต้น */
    }
    50% {
        transform: translateX(5px); /* ขยับไปทางขวา 10px (ปรับระยะได้) */
    }
    100% {
        transform: translateX(0); /* กลับมาที่จุดเดิม */
    }
}
.text-title-footer {
	font-family: "FC Lamoon Bold";
	font-size: 2rem;
	color: #FFF;
	background-color: #e26cb4;
	float: left;
	height: auto;
	width: 80%;
	text-align: center;
	border-radius: 15px;
	margin-top: 3%;
	margin-left: -5%;
	z-index: 8;
	position: relative;
	padding: 2%;
}
.box-contact-footer {
	float: left;
	height: auto;
	width: 90%;
	margin-top: 3%;
	margin-bottom: 2%;
	margin-left: 5%;
}
.contact-footer-01 {
	font-family: serithairegular;
	font-size: 1rem;
	line-height: 120%;
	color: #333;
	background-image: url(../images/icon-footer-01.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 15%;
	float: left;
	height: auto;
	width: 50%;
	padding-top: 5%;
	padding-bottom: 5%;
	padding-left: 50px;
	padding-right: 50px;
	margin-top: 2%;
	margin-bottom: 1%;
}
.contact-footer-01 a {
	color: #333;
	text-decoration: none;
}

.contact-footer-02 {
	font-family: serithairegular;
	font-size: 1rem;
	line-height: 120%;
	color: #333;
	background-image: url(../images/icon-footer-02.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 15%;
	float: left;
	height: auto;
	width: 50%;
	padding-top: 5%;
	padding-bottom: 5%;
	padding-left: 50px;
	padding-right: 50px;
	margin-top: 2%;
	margin-bottom: 1%;
}
.title-social-footer {
	float: left;
	height: auto;
	width: auto;
	padding-top: 2%;
	padding-right: 4%;
	padding-bottom: 2%;
	padding-left: 4%;
	border: 1px solid #92278f;
	border-radius: 15px;
	font-family: "FC Lamoon";
	font-size: 1.5rem;
	color: #333;
	margin-top: 4%;
	margin-bottom: 6%;
}
.box-social-footer {
	float: left;
	height: auto;
	width: 100%;
	
}
.box-social-footer img:hover {
	/* ขยายใหญ่ขึ้น 10% (1.1) */
    transform: scale(1.1);
}
.box-social-footer img:active {
	transform: scale(0.98);
}
.box-social-footer img {
	float: left;
	height: auto;
	width: 40px;
	margin-right: 10%;
	transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ปรับให้ขยายนุ่มนวล */
    cursor: pointer; /* เปลี่ยนเมาส์เป็นรูปมือเมื่อชี้ */
}
.box-menu-footer {
	float: left;
	height: auto;
	width: 100%;
	margin-top: 5%;
}
.box-menu-footer ul {
}
.box-menu-footer ul li {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	height: auto;
	width: auto;
	margin-bottom: 5%;
	list-style-position: inside;
	background-image: url(../images/icon-footer-07.png);
	padding-left: 8%;
	list-style-type: none;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 3%;	
	
}
/* 1. กำหนดสถานะปกติ (ตัวหลัก) */
.box-menu-footer ul li a {
	display: inline-block;    /* สำคัญ: เพื่อให้ margin ทำงานได้เต็มประสิทธิภาพ */
	color: #333;             /* สีปกติก่อน hover */
	text-decoration: none;
	margin-left: 0;          /* ค่าเริ่มต้น */
	transition: all 0.3s ease; /* กำหนดความเร็ว 0.3 วินาที และความนุ่มนวล (ease) */
}

/* 2. กำหนดสถานะเมื่อเอาเมาส์วาง (Hover) */
.box-menu-footer ul li a:hover {
    color: #333;
    margin-left: 10px;       /* ขยับไปทางขวา 10px (ปรับระยะได้ตามใจชอบ) */
}


.img-footer {
	float: right;
	height: auto;
	width: 50%;
	margin-top: -160px;
}
.img-footer img {
	height: auto;
	width: 100%;
}
.copy {
	font-family: serithairegular;
	font-size: 0.8rem;
	color: #333;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 3%;
	margin-bottom: 20%;
	padding-top: 3%;
	padding-bottom: 3%;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #92278f;
	border-bottom-color: #92278f;
	text-align: center;
}
}