.wrap {position: relative;z-index: 10;}
.wrap h4.stitle {margin-bottom: 10px;text-transform: uppercase;font-weight: 700;font-size: 70px;color: #f27b50;font-family: 'Kanit', sans-serif;line-height: 100%;}
.wrap h2.title {margin-bottom: 30px;font-size: 22px;color: #222;}
.wrap p.more a {padding: 14px 40px;background: #f27b50;display: inline-block;color: #fff;border-radius: 50px;}
.wrap p.more a span { margin-right: 30px; }
.wrap p.more a:hover span{margin-right: 40px; }

/* productBox */
#productBox  {padding: 5vw 0 0;}
#productBox .stitle, #productBox .title {text-align: center;}
#productBox .list { position: relative; z-index: 2; }
#productBox .list .item {position: relative;margin: 0 20px;}
#productBox .list .item .photo{background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#productBox .list .item img { position: relative; width: 100%; z-index: 1; }
#productBox .list .item a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 3; }
#productBox .list .item .info {margin-top: 10px;}
#productBox .list .item .info h3 {height: auto;font-weight: normal;font-size: 20px;color: #f27b50;-webkit-line-clamp: 1;text-align: center;}
#productBox .list .item .info p {overflow: hidden;height: auto;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-top: 10px;font-size: 15px;text-align: justify;line-height: 200%;padding: 0 10px;}
#productBox .list .item .info:after{content:'';width: 35px;height: 2px;background: #f27b50;display: block;margin: 30px auto 0;position: relative;}

/* aboutBox */
#aboutBox {padding: 3vw 0 5vw;font-size: 0;background: #f8f8f8;}
#aboutBox .workframe{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#aboutBox .workframe >div {width: 40%;}
#aboutBox  .workframe .info {margin: 0;width: 55%;}
#aboutBox .info p.arts {margin-bottom: 50px;color: #585858;text-align: justify;line-height: 200%;letter-spacing: 1px;}
#aboutBox .info p.more , #aboutBox .info #SeoStarRating {margin-bottom: 15px;}

/* page-form */
#page-form{}
#page-form form,#page-form fieldset{margin:0;padding:0;border:0}
#page-form fieldset:first-child{display:flex;flex-wrap: wrap;justify-content: space-between;}
#page-form fieldset p{overflow:hidden;color:#000;font-size:16px;margin: 10px 0;width: calc(50% - 12px);}
#page-form .btn{display:flex;justify-content: center;flex-wrap: wrap;}
#page-form .btn p{width: auto;margin: 20px 10px 50px;}
#page-form label{float:left;width:100px;text-align:right;padding:5px 0}
#page-form span{display:block}
#page-form .ra span{width:auto;float:left;margin-left:10px;padding:5px 0}
#page-form input[type="text"],#page-form select{width:calc(100% - 32px);padding: 15px;border:1px solid #bdbdbd;color:#000;background: none;font-size: 15px;border-radius: 5px;}
#page-form input#Checknum{margin: 0 10px 0 0;width: calc(100% - 110px);}
#page-form select{width:calc(100% - 1px);-webkit-appearance:none;background: url(/images/33/arrow.png) no-repeat scroll 99% center transparent;background-repeat:no-repeat;background-position:97% 50%;padding: 20px 17px;border-radius: 5px;}
#page-form p.send input{background: #f27b50;color:#fff;text-align:center;padding: 14px 40px;font-size: 14px;outline:none;cursor:pointer;border-radius: 50px;border: 0;}
#page-form .btn p.phone a{background: var(--secondary);color:#fff;text-align:center;padding: 16px 40px;font-size: 16px;letter-spacing: 2px;display: flex;justify-content: center;align-items: center;}
#page-form .btn p.line a{background: #12b508;color:#fff;text-align:center;padding: 16px 40px;font-size: 16px;outline:none;cursor:pointer;letter-spacing: 2px;display: flex;justify-content: center;align-items: center;}
#page-form .btn p a svg{width:20px;height: 20px;margin-right: 10px;}
#page-form article{font-size:15px;line-height:170%}
#page-form h2 img{margin-right:5px;vertical-align:bottom}
#page-form h2 b{display:inline-block;font-size:24px;color:#353535;margin-right:10px;vertical-align:baseline}

/* customBox */
#customBox {position: relative;padding: 5vw 0;font-size: 0;z-index: 2;background: #343434;}
#customBox .workframe { z-index: 2; font-size: 0; }
#customBox .stitle, #customBox .title {text-align: center;color: #fff;}
#customBox .listBox ul{display:flex;flex-wrap: wrap;justify-content: center;margin-top: 60px;}
#customBox .listBox li{width: calc((100%/4) - 110px);background: #fff;margin: 0 20px;padding: 35px;border-radius: 15px;}
#customBox .listBox li .photo{width: 60px;margin: 0 auto 9px;}
#customBox .listBox ul li h3 {margin: 5px 0 20px;font-size: 20px;color: #f27b50;text-align: center;}
#customBox .listBox ul li article {font-size: 14px;color: #696969;text-align: center;}
#customBox .listBox .btn { text-align: right; }
#customBox .listBox .btn a { position: relative; color: #eee; text-align: center; }
#customBox .listBox .btn a#nextBtn:before { color: #6b6b78; content: "|"; }
#customBox .listBox .btn a span { position: absolute; width: 80px; height: 27px; display: block; text-align: center; line-height: 27px; top: 0; left: 0; -webkit-transform: translate(0) scale(0); transform: translate(0) scale(0); -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; }
#customBox .listBox .btn a i { text-align: center; width: 80px; height: 27px; font-size: 27px; -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; }
#customBox .youtubeBox { position: relative; }
#customBox .youtubeBox:before { position: absolute; width: 40%; height: 100%; background: url(/images/33/dote.png) 0 0; top: -2vw; left: 90%; z-index: -1; opacity: 0.4; content: ""; }
#customBox .youtubeBox iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#customBox .youtubeBox .playBtn { position: absolute; width: 100px; height: 100px; background: #ff5860; border-radius: 50%; display: block; text-align: center; line-height: 100px; top: calc((100% - 100px) / 2); left: -50px; -webkit-animation: playbtn 1s infinite alternate ease-in-out; animation: playbtn 1s infinite alternate ease-in-out; }
#customBox .youtubeBox .playBtn i { font-size: 36px; color: #fff; }
#customBox .contact { position: absolute; padding-left: calc((100% - 1300px) / 2); width: 650px; height: 110px; background: #21bcd8; line-height: 110px; bottom: 0; left: 0; z-index: 3; }
#customBox .contact a { display: inline-block; }
#customBox .contact font { text-transform: uppercase; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 40px; color: #fff; }
#customBox .contact i { margin: 10px 0 10px 30px; font-size: 30px; color: #fff; -webkit-animation: arrowright 1s infinite alternate ease-in-out; animation: arrowright 1s infinite alternate ease-in-out; }

/* NewsBox */
#NewsBox { position: relative; padding: 80px 0; }
#NewsBox .bg , #bookBox .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; opacity: .4; }
#NewsBox h4.stitle , #NewsBox h2.title { text-align: center; }
#NewsBox #newList li {margin: 0 20px;}
#NewsBox #newList li .intr{border: 1px solid #ddd;padding: 20px 30px;margin: 20px 0 30px;}
#NewsBox #newList li .intr article{overflow: hidden;height: auto;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;font-size: 15px;}
#NewsBox #newList li .img a.photo img , #bookBox ul li a.photo img { width: 100%; }
#NewsBox #newList li .info p a { margin-right: 15px; padding: 2px 15px; background: #ffd9db; display: inline-block; color: #ff5860; }
#NewsBox #newList li .info p {font-family: 'Rubik', sans-serif;color: gold;font-size: 17px;}
#NewsBox #newList li .info h3 a {height: auto;font-weight: 500;font-size: 18px;color: #434343;-webkit-line-clamp: 1;}
#NewsBox p.more , #bookBox p.more { margin-top: 60px; text-align: center; }

/* bookBox */
#bookBox { position: relative; padding: 80px 0; background: #222; }
#bookBox h2.title { text-align: center; color: #fff; }
#bookBox ul li a.photo , #bookBox ul li h3 { margin: 0 20px; background-color: #fff; }
#bookBox ul li h3 a { padding: 15px 25px; height: 32px; font-size: 19px; color: #222; -webkit-line-clamp: 1; }

@keyframes playbtn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@-webkit-keyframes playbtn { 0%, 100% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } }
@keyframes arrowright { 0%, 100% { margin: 10px 0 10px 30px; } 50% { margin: 10px 10px 10px 20px; } }
@-webkit-keyframes arrowright { 0%, 100% { margin: 10px 0 10px 30px; } 50% { margin: 10px 10px 10px 20px; } }

@media screen and (max-width:1500px) {
	#customBox .contact { padding-left: calc((100% - 1280px) / 2); width: 640px; }
}
@media screen and (max-width:1360px) {
	#customBox .contact { padding-left: calc((100% - 1160px) / 2); width: 580px; }
}
@media screen and (min-width:1281px) {
	#productBox .list .item:hover img {background: rgb(5 5 5 / 40%);}
	#customBox .listBox .btn a:hover span { -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); }
	#customBox .listBox .btn a:hover i { -webkit-transform: rotate(0) scale(0); transform: rotate(0) scale(0); }
	#customBox .youtubeBox .playBtn:hover { background: #2c2a2a; }
	#NewsBox #newList li .info p a:hover { background: #ff5860; color: #fff; }
	#bookBox ul li:hover a.photo img { background: rgba(44, 44, 44, .6); }
}
@media screen and (max-width:1280px) {
	#productBox .list .item .info { top: 0; }
}
@media screen and (max-width:1024px) {
	#aboutBox .workframe .info{width:100%;}
	#aboutBox .workframe .aboutImg {width:100%;margin-top: 30px;order: 1;}
	#aboutBox .workframe .aboutImg img{height: 400px;}
	#customBox { padding: 7vw 0; }
	#customBox:before { height: 100%; }
	#customBox .youtubeBox { margin: 10px 0 0; width: auto; }
	#customBox .contact { padding-left: 5%; width: 85%; bottom: -20px; }
	#customBox .listBox li{width: calc((100%/2) - 110px);margin: 20px;}
}
@media screen and (max-width:980px) {
	#page-form fieldset p{width:100%;}
	#productBox .bgTxt { font-size: 15vw; bottom: -12vw; }
	#aboutBox .aboutImg a.photo { height: 100%; }
	#aboutBox .info { position: relative; margin: 0; width: 100%; display: block; z-index: 2; }
}
@media screen and (max-width:640px) {
	#customBox .listBox li{width: calc((100%/1) - 80px);margin: 10px 0;}
	#productBox .list .item { margin: 0 10px 10px; }
	.wrap h4.stitle{font-size: 50px;}
}