.indexOne{width: 100vw;height: 100vh;background: url(../images/idx1bg.jpg) center no-repeat;background-size: cover;position: relative;overflow: hidden;}
.logo{padding:1.5% 0 0 1.5%;}
.drUl{width: 644px; position: absolute;top: 50%;transform: translateY(-50%);right: 16%;flex-wrap: wrap;}
.drUl li{margin-left: 4px;width: calc(50% - 4px);transition: 0.3s;position: relative;}
.drUl li:nth-child(1){background: rgba(255,164,77,0.95);margin-bottom: 4px;}
.drUl li:nth-child(2){background: rgba(159,145,250,0.95);margin-bottom: 4px;}
.drUl li:nth-child(3){background: rgba(112,193,231,0.95);}
.drUl li:nth-child(4){background: rgba(70,134,243,0.95);}
.drUl li a.link {padding: 1.3rem 0;}
.drUl li a.link span{color: #fff;}
.drUl li a.link span em{margin-top: 0.5rem; text-transform: uppercase; display: inline-block; background: url(../images/right.svg) right center no-repeat;padding-right: 1rem;}
.drUl li a.link:hover img{transform: translateY(-5px);}
.drUl li a.link:hover em{padding-right: 0.8rem;}
.drUl li .add{font-family: "OPPOSans-B";position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.drUl li .add dt{position: relative;line-height: 20px;color: #fff;padding-left: 1.3rem;margin: 0.8rem 0;}
.drUl li .add img{position: absolute;top: 0px;left: 0;}
.drUl li .add{padding: 0.5rem  0.88rem 0;opacity: 0.85;}
.drUl li:hover{box-shadow: 0 0 15px rgba(0,0,0,0.4);}
.copy{position: absolute;left: 1.5%;bottom: 2%;color: #fff;}
.copy span{margin-right: 0.5rem;}



@media screen and (max-width:1280px){
	.drUl{width:510px; right: 12%;}
	.drUl li a.link{padding: 1rem 0;}
}
@media screen and (max-width:991px){
	.drUl{width: 500px;}
	.drUl li a.link{padding: 1rem 0;}
	.drUl li a.link span img{height: 50px;}
	.drUl li .add dt{margin: 0.5rem 0;}
}
@media screen and (max-width:640px){
	.drUl{width: 90%;right: 5%}
	.logo{box-sizing: border-box;width: 98.5%;}
	.logo img,.copy{width: 100%;}
	.drUl li:nth-child(2),.drUl li:nth-child(3),.drUl li:nth-child(1){width: calc(33% - 4px);}
	.drUl li .add dt:first-child{margin-top: 0;}
	.drUl li:nth-child(4){width: calc(100% - 8px);}
	.drUl li a.link span em{background: none; padding-right: 0;}
	.copy span{text-align: center;display: inline-block;}
	.copy{text-align: center;}
	.drUl li .add{position: inherit;transform: inherit;top: auto;}
	.drUl li:nth-child(3){margin-bottom: 4px;}
	.drUl li a.link span img{height: 30px;}
}