﻿#box-1{background: url(../image/sgy_box1_bj.png) no-repeat center center;background-size: cover;}
#box-1 .title_img{width: 35vw;max-width: 526px;margin-top: 20px;}
#box-1 .block01{position: relative;margin-top: -20px;padding: 145px 0;}

#box-1 .box1{width: 100%;height: 100%;position: absolute;z-index: 2;left: 0;top: 0;}
#box-1 .box1 ul{position: absolute;width: 100%;transform: none!important;}
#box-1 .box1 li{position: absolute;width: 21%;cursor: pointer;height: auto;max-width: 320px;}
#box-1 .box1 li:nth-child(1){left: 7%;top: 0%;}
#box-1 .box1 li:nth-child(2){right: 7%;top: 0%;}
#box-1 .box1 li:nth-child(3){left: 2%;top: 35%;}
#box-1 .box1 li:nth-child(4){right: 2%;top: 35%;}
#box-1 .box1 li:nth-child(5){left: 7%;bottom: 0%;}
#box-1 .box1 li:nth-child(6){right: 7%;bottom: 0%;}

#box-1 .block02{width: 35.5vw;height: 35.5vw;position: relative;margin: auto;z-index: 2;}
#box-1 .block02::before{content: '';width: 100%;height: 100%;border: 1px dashed #d03233;position: absolute;top: 0;left: 0;border-radius:50%;pointer-events: none;animation: rotate 60s infinite linear;}
#box-1 .box2 {overflow: hidden;border-radius:50%;width: 86%;-webkit-transform: translate3d(0, 0, 0);}
#box-1 .box2 li>div{position: relative;overflow: hidden;/* border-radius: 50%;-webkit-transform: translate3d(0, 0, 0); */}
@keyframes rotate{
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}
#box-1 .block02::after{content: '';width: 106%;height: 106%;position: absolute;top: -3%;left: -3%;pointer-events: none;background:url(../image/sgy_box1_num.jpg) no-repeat center center;background-size: contain;}




@media (min-width:1500px) and (max-width:1800px){
	#box-1 .box1 li{width: 20%;}
	#box-1 .box1 li:nth-child(3) ,#box-1 .box1 li:nth-child(4) {top: 33.5%;}
}
@media (min-width:1199px) and (max-width:1500px){
	#box-1 .box1 li:nth-child(3) ,#box-1 .box1 li:nth-child(4) {top: 33.5%;}
}


@media (min-width:767px) and (max-width:1199px){
	#box-1 .title_img{margin-top: 10px;}
	#box-1 .block01{padding: 90px 0;margin-top: -15px;}
	#box-1 .box1 li{width: 20%;}
	#box-1 .box1 li:nth-child(3) ,#box-1 .box1 li:nth-child(4) {top: 34.5%;}
	#box-1 .block02 {width: 37.5vw;height: 37.5vw;}
}
@media (min-width:767px) and (max-width:850px){
	#box-1 .title_img{margin-top: 0px;width: 40vw;}
	#box-1 .block01{padding: 65px 0;margin-top: -10px;}
}
@media (max-width:767px){
	#box-1 .title_img {width: 53vw;margin-top: 0px;}
	#box-1 .block01 {margin: 10px -2% 0 -2%;padding: 33px 0;}
	#box-1 .box1 li{width: 20%;}
	#box-1 .box1 li:nth-child(3) ,#box-1 .box1 li:nth-child(4) {top: 34.5%;}
	#box-1 .block02 {width: 43vw;height: 43vw;}
	#box-1 .block02::before{animation: rotate 30s infinite linear;}
}