.main-box{
width:420px;
margin:0 auto;
text-align:center;
}


.ai-info{
position:relative;
top:-118px;
background:rgba(0,0,0,0.5);
width:420px;
margin:0 0 0 5px;
text-align:left;
color:white;
text-shadow:1px 1px black;
font-size:6px;
}

.ai-info p::before{
content:"AI";
font-size:20px;
margin-left:10px;
}

.ai-info p{
border-bottom:1px solid white;
position:relative;
top:-3px;
}

li{
list-style-type:none;
position:relative;
top:-5px;
left:-20px;
}

.explanation{
font-weight:700;
position:relative;
top:-8px;
font-size:7px;
margin-left:5px;
}

.name{
width:420px;
display:block;
background:rgba(0,0,0,0.5);
font-size:35px;
font-weight:700;
padding:10px 0 10px 0;
color:white;
}

.sub-img img{
width:90px;
}

#subarea0{
top:-100px;
position:relative;
}

.sub-img{
margin:0 auto;
width:420px;
float:left;
white-space:nowrap;
overflow:scroll;
height:140px;
transition:1s;
}

.slide img{
margin:0 auto;
top:0px; 
left:0px; 
transition:1s;
width:150px;
}

.subimg0{
opacity:1;
}

.subimg1{
opacity:0.5;
}

.subimg2{
opacity:0.5;
}

.subimg3{
opacity:0.5;
}

.subimg4{
opacity:0.5;
}

.subimg5{
opacity:0.5;
}

.subimg6{
opacity:0.5;
}

.subimg7{
opacity:0.5;
}

.subimg8{
opacity:0.5;
}

.subimg9{
opacity:0.5;
}

.subimg0:hover{
opacity:1 ! important;
}

.subimg1:hover{
opacity:1 ! important;
}

.subimg2:hover{
opacity:1 ! important;
}

.subimg3:hover{
opacity:1 ! important;
}

.subimg4:hover{
opacity:1 ! important;
}

.subimg5:hover{
opacity:1 ! important;
}

.subimg6:hover{
opacity:1 ! important;
}

.subimg7:hover{
opacity:1 ! important;
}

.subimg8:hover{
opacity:1 ! important;
}

.subimg9:hover{
opacity:1 ! important;
}

.selectint0:hover{
opacity:1 ! important;
}

.selectint1{
opacity:0.5;
}

.selectint1:hover{
opacity:1 ! important;
}

.selectdiv{
position:relative;
top:12px;
}

.selectdiv span{
color:blue;
}

.slide{
transition-duration:0.3s;
position:relative;
width:150px;
margin:0 auto;
}

#subarea1{
position:absolute; 
top:-100px; 
left:0px;
}