/* top-footer */
.top-footer-wrap{padding:47px 0;border-bottom:10px solid #ffa200;background:url(../img/main/bg-top-footer01.gif) no-repeat 50% 50% / cover;}
.top-footer-box{margin:0 auto;max-width:1280px;}
.footer-quick-box > ul{display:flex;align-items:center;flex-wrap:wrap;}
.footer-quick-box > ul > li:nth-of-type(n){position:relative;margin: 0 20px 0 0;padding: 0 20px 0 0;display: inline-block;width:calc(20% - 32px);}
.footer-quick-box > ul > li:nth-of-type(5n){margin:0;padding:0;}
.footer-quick-box > ul > li:last-of-type{margin:0;padding:0;}
.footer-quick-box > ul > li:nth-of-type(n):after{content:'';display:block;position:absolute;top:50%;right:0;width:1px;height:68px;background:url(../img/main/img-dotted02.png) repeat-y 0 0;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);}
.footer-quick-box > ul > li:nth-of-type(5n):after{display:none;}
.footer-quick-box > ul > li:last-of-type:after{display:none;}
.footer-quick-box > ul > li > a{display:block;position:relative;padding: 50px 0 50px 90px;font-size:18px;line-height:26px;color:#fff;text-align:right;}
.footer-quick-box > ul > li > a:before{content:'';display:block;position:absolute;top:50%;left:0;width: 80px;height: 80px;border-radius:123px;background:#ececec;opacity:0.2;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);}
.footer-quick-box > ul > li > a:after{content:'';display:block;position:absolute;top:50%;left:0;width: 80px;height: 80px;border-radius:123px;background-repeat:no-repeat;background-position:50% 50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);background-size: 50%;}
.footer-quick-box > ul > li > a.play:after{background-image:url(../img/main/ico-foot-link01.png);}
.footer-quick-box > ul > li > a.book:after{background-image:url(../img/main/ico-foot-link04.png);}
.footer-quick-box > ul > li > a.school:after{background-image:url(../img/main/ico-foot-link03.png);}
.footer-quick-box > ul > li > a.face:after{background-image:url(../img/main/ico-foot-link02.png);}
.footer-quick-box > ul > li > a:hover:before{background:#ffa200;opacity:1;}
.footer-quick-box > ul > li > a.play:hover:after{background-image:url(../img/main/ico-foot-link01-on.png);}
.footer-quick-box > ul > li > a.book:hover:after{background-image:url(../img/main/ico-foot-link04-on.png);}
.footer-quick-box > ul > li > a.school:hover:after{background-image:url(../img/main/ico-foot-link03-on.png);}
.footer-quick-box > ul > li > a.face:hover:after{background-image:url(../img/main/ico-foot-link02-on.png);}
.footer-quick-box > ul > li > a span{position:relative;display: inline-block;padding:0 0 0 10px;text-align: left;word-break: keep-all;}
.footer-quick-box > ul > li > a span:before{content:'';display:block;position:absolute;top: 10px;left:0;width:5px;height:5px;border-radius:10px;background:#ffa200;}

@media screen and (max-width: 1280px) {
	/* top-footer */
	.footer-quick-box > ul > li:nth-of-type(n){margin:0 20px 0 0;padding:0 20px 0 0;width:calc(25% - 40px);}
	.footer-quick-box > ul > li:nth-of-type(4n){margin:0;padding:0;}
	.footer-quick-box > ul > li:last-of-type{margin:0;padding:0;}
	.footer-quick-box > ul > li:nth-of-type(n):after{content:'';display:block;position:absolute;top:50%;right:0;width:1px;height:68px;background:url(../img/main/img-dotted02.png) repeat-y 0 0;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);}
	.footer-quick-box > ul > li:nth-of-type(4n):after{display:none;}
	.footer-quick-box > ul > li:last-of-type:after{display:none;}

	.footer-quick-box > ul > li > a{padding:50px 0 50px 96px;}
	.footer-quick-box > ul > li > a{text-align:right;}
}
@media screen and (max-width: 1024px) {
	/* top-footer */
	.top-footer-wrap{padding:0;}
	.footer-quick-box > ul > li:nth-of-type(n){margin:0;padding:35px 0 0;width:50%;float: left;box-sizing:border-box;}
	.footer-quick-box > ul > li:last-of-type{padding:35px 0 0;}
	.footer-quick-box > ul > li:nth-of-type(n):after{display:none;}
	.footer-quick-box > ul > li:first-of-type:after{display:block;top: 150%;height: 400px;}
	.footer-quick-box > ul{position:relative;}
	.footer-quick-box > ul:before{content:'';display:block;position:absolute;top: 33%;left:50%;width: 60%;height:1px;background:url(../img/main/img-dotted03.png) repeat-x 0 0;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:transform:translate(-50%,-50%);}
	.footer-quick-box > ul > li > a{padding:138px 0 35px 0;font-size:16px;line-height:24px;text-align:center;}
	.footer-quick-box > ul > li > a:before{top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);}
	.footer-quick-box > ul > li > a:after{top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);}

	.footer-quick-box{position:relative}
	.footer-quick-box:before {content: '';display: block;position: absolute;top: 67%;left: 50%;width: 60%;height: 1px;background: url(../img/main/img-dotted03.png) repeat-x 0 0;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}
	.footer-quick-box > ul > li > a{padding: 90px 0 35px 0;font-size:16px;line-height:24px;text-align:center;}
	.footer-quick-box > ul > li > a:before{top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);}
	.footer-quick-box > ul > li > a:after{top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);}
}
@media screen and (max-width: 768px) {
	/* top-footer*/
	.footer-quick-box > ul > li{padding:20px 0 0;}
	.footer-quick-box > ul > li:last-of-type{padding:20px 0 0;}
	.footer-quick-box > ul > li > a{padding:90px 0 20px 0;}
	.footer-quick-box > ul > li > a{min-height:44px;font-size:14px;line-height:22px;}
	.footer-quick-box > ul > li > a:before{width:80px;height:80px;border-radius:80px;}
	.footer-quick-box > ul > li > a:after{width:80px;height:80px;border-radius:80px;}
	.footer-quick-box > ul > li > a.play:after{background-size:40px;}
	.footer-quick-box > ul > li > a.book:after{background-size:40px;}
	.footer-quick-box > ul > li > a.school:after{background-size:40px;}
	.footer-quick-box > ul > li > a.face:after{background-size:40px;}
	.footer-quick-box > ul > li > a.play:hover:after{background-size:40px;}
	.footer-quick-box > ul > li > a.book:hover:after{background-size:40px;}
	.footer-quick-box > ul > li > a.school:hover:after{background-size:40px;}
	.footer-quick-box > ul > li > a.face:hover:after{background-size:40px;}
	.footer-quick-box > ul > li > a span:before{top:9px;width:4px;height:4px;}
}