.honeycombs { position: relative; overflow: hidden; width: 100%; text-align: center;transition: all 0.3s ease 0.0s; cursor: default  }
.honeycombs .inner_span { display: block; height: 100%; width: 100%; background-color: #329BBE; font-family: sans-serif; color: #000; }
.honeycombs .inner-text { padding-top: 30%; }
.honeycombs .honeycombs-inner-wrapper { display: inline-block; overflow: hidden; width: 100%; position: relative;    }
.honeycombs .comb { position: absolute; display: inline-block; transition: all 0.3s ease 0.0s; }

.honeycombs .hex_l, .honeycombs .hex_r { overflow: hidden; position: absolute ;
/* -webkit-backface-visibility: hidden; */}
.honeycombs .hex_l { visibility: hidden; transform: rotate(60deg); }
.honeycombs .hex_r { visibility: hidden; transform: rotate(-120deg); }
.honeycombs .hex_inner { display: block; visibility: visible; transform: rotate(60deg); background-position: center; 	background-size: cover; cursor: default; }

.HoneycombsOut{  position: absolute; z-index: 1; width: 100%; }

/* media all */

@media (min-width:0px) and (max-width:430px){
.honeycombs{ width: 200%; transform-origin: top left;
transform:scale(0.47); transition: all 0.3s ease 0.0s; }
.HoneycombsOut{ width: 600px!important; position: absolute; top: 70px; left: 50%; transform: translateX(-50%); transition: all 0.3s ease 0.0s; height: 580px;}
.honeycombs div:nth-child(2){ opacity: 0;  transition: all 0.3s ease 0.0s;}
.honeycombs div:nth-child(4){ opacity: 0;  transition: all 0.3s ease 0.0s; }
.honeycombs div:nth-child(5){ opacity: 0;  transition: all 0.3s ease 0.0s; }
.honeycombs div:nth-child(11){ opacity: 0;  transition: all 0.3s ease 0.0s;}
.honeycombs div:nth-child(13){ opacity: 0; animation:fadeIn 1.7s 0.2s ease both;}
.honeycombs div:nth-child(15){ opacity: 0; animation:fadeIn 1.7s 0.2s ease both;}
}

@media (min-width:431px) and (max-width:600px){
.honeycombs{ width: 166%; transform-origin: top left;
transform:scale(0.60); transition: all 0.3s ease 0.0s; }
.HoneycombsOut{ width: 720px!important; position: absolute; top: 60px; left: 50%; transform: translateX(-50%); transition: all 0.3s ease 0.0s; height: 580px;}
.honeycombs div:nth-child(2){ opacity: 0;  transition: all 0.3s ease 0.0s;}
.honeycombs div:nth-child(4){ opacity: 0;  transition: all 0.3s ease 0.0s; }
.honeycombs div:nth-child(5){ opacity: 0;  transition: all 0.3s ease 0.0s;}
.honeycombs div:nth-child(11){ opacity: 0;  transition: all 0.3s ease 0.0s;}
.honeycombs div:nth-child(13){ opacity: 0; animation:fadeIn 1.7s 0.2s ease both;}
.honeycombs div:nth-child(15){ opacity: 0; animation:fadeIn 1.7s 0.2s ease both;}
}

@media (min-width:601px) and (max-width:800px){
.honeycombs{ width: 133.33%; transform-origin: top left;
transform:scale(0.75); transition: all 0.3s ease 0.0s; }
.HoneycombsOut{ width: 960px; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); transition: all 0.3s ease 0.0s; height: 580px;}
.honeycombs div:nth-child(2){ opacity: 1;  transition: all 0.3s ease 0.0s;}
.honeycombs div:nth-child(4){ opacity: 0;  transition: all 0.3s ease 0.0s; }
.honeycombs div:nth-child(5){ opacity: 0;  transition: all 0.3s ease 0.0s; }
.honeycombs div:nth-child(11){ opacity: 0;  transition: all 0.3s ease 0.0s;}
.honeycombs div:nth-child(13){ opacity: 0;  transition: all 0.3s ease 0.0s;}
.honeycombs div:nth-child(15){ opacity: 0;  transition: all 0.3s ease 0.0s;}
}

@media (min-width:801px) and (max-width:1000px){
.honeycombs{ width: 113.63%; transform-origin: top left;
transform:scale(0.88); transition: all 0.3s ease 0.0s; }
.HoneycombsOut{ width: 1200px!important; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); transition: all 0.3s ease 0.0s;height: 720px;  }
.honeycombs div:nth-child(2){ opacity: 1;  transition: all 0.3s ease 0.0s;}
.honeycombs div:nth-child(4){ opacity: 0;  transition: all 0.3s ease 0.0s; }
.honeycombs div:nth-child(5){ opacity: 0;  transition: all 0.3s ease 0.0s; }
.honeycombs div:nth-child(11){ opacity: 0;  transition: all 0.3s ease 0.0s; }
.honeycombs div:nth-child(13){ opacity: 0;  transition: all 0.3s ease 0.0s;}
.honeycombs div:nth-child(15){ opacity: 0; animation:fadeIn 1.7s 0.6s ease both;}
}
@media (min-width:1001px){
.honeycombs{ width: 90.909%; transform-origin: top left;
transform:scale(1.1); transition: all 0.3s ease 0.0s; }
.HoneycombsOut{ width: 1400px; position: absolute; top: -70px; left: 50%; transform: translateX(-50%);  transition: all 0.3s ease 0.0s; height: 920px;}
.honeycombs div:nth-child(2){ opacity: 0;  transition: all 0.3s ease 0.0s;}
.honeycombs div:nth-child(4){ opacity: 0;  transition: all 0.3s ease 0.0s; }
.honeycombs div:nth-child(5){ opacity: 0;  transition: all 0.3s ease 0.0s;}
.honeycombs div:nth-child(11){ opacity: 0;  transition: all 0.3s ease 0.0s;}
.honeycombs div:nth-child(13){ opacity: 0; animation:fadeIn 1.7s 0.4s ease both;}
.honeycombs div:nth-child(15){ opacity: 0; animation:fadeIn 1.7s 0.6s ease both;}
}




/*
@media (min-width:601px) and (max-width:768px){ tablet-in }
@media (min-width:769px) and (max-width:992px){ tablet-up }
@media (min-width:601px) and (max-width:992px){ medium = tablet }
@media (min-width:0px) and (max-width:992px){ mobile-tablet }
@media (min-width:993px){ lager = pc }
@media (min-width:0px) and (max-width:768px){ mobile-tablet-in }
@media (min-width:769px){ tablet-up-pc }
@media (min-width:0px) and (max-width:800px){ 800-in }
@media (min-width:801px){ 800-up }
*/