/* surround */
.page_surround_main{ position: absolute; top:50px; bottom: 50px; width: 100%; background: rgba(255,255,255,0.5);}
.surround_container{ position: relative; margin: 0 auto; width: 320px; height: 320px; text-align:center;}
.surround_content_container{ height: 20px; font-size: 16px;}
.surround_main{ position: absolute; top:0; width: 100%; height: 100%; }
.surround_item{ position: absolute; right: 50%; bottom: 50%; width: 50px; height: 27%; }
.surround_item_inner{ position: absolute; width: 50px; height: 50px; border: 2px solid #fff; border-radius: 50%;}

.surround_main[num="2"] .surround_item.acting:nth-child(1){ -webkit-transform: rotate(330deg) skew(60deg); }
.surround_main[num="2"] .surround_item.acting:nth-child(2){ -webkit-transform: rotate(510deg) skew(60deg); }
.surround_main[num="2"] .surround_item.acting:nth-child(1) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(030deg); }
.surround_main[num="2"] .surround_item.acting:nth-child(2) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(210deg); }

.surround_main[num="3"] .surround_item.acting:nth-child(1){ -webkit-transform: rotate(420deg) skew(60deg); }
.surround_main[num="3"] .surround_item.acting:nth-child(2){ -webkit-transform: rotate(540deg) skew(60deg); }
.surround_main[num="3"] .surround_item.acting:nth-child(3){ -webkit-transform: rotate(660deg) skew(60deg); }
.surround_main[num="3"] .surround_item.acting:nth-child(1) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-060deg); }
.surround_main[num="3"] .surround_item.acting:nth-child(2) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-180deg); }
.surround_main[num="3"] .surround_item.acting:nth-child(3) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-300deg); }

.surround_main[num="4"] .surround_item.acting:nth-child(1){ -webkit-transform: rotate(420deg) skew(60deg); }
.surround_main[num="4"] .surround_item.acting:nth-child(2){ -webkit-transform: rotate(510deg) skew(60deg); }
.surround_main[num="4"] .surround_item.acting:nth-child(3){ -webkit-transform: rotate(600deg) skew(60deg); }
.surround_main[num="4"] .surround_item.acting:nth-child(4){ -webkit-transform: rotate(690deg) skew(60deg); }
.surround_main[num="4"] .surround_item.acting:nth-child(1) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-060deg); }
.surround_main[num="4"] .surround_item.acting:nth-child(2) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-150deg); }
.surround_main[num="4"] .surround_item.acting:nth-child(3) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-240deg); }
.surround_main[num="4"] .surround_item.acting:nth-child(4) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-330deg); }

.surround_main[num="5"] .surround_item.acting:nth-child(1){ -webkit-transform: rotate(420deg) skew(60deg); }
.surround_main[num="5"] .surround_item.acting:nth-child(2){ -webkit-transform: rotate(491deg) skew(60deg); }
.surround_main[num="5"] .surround_item.acting:nth-child(3){ -webkit-transform: rotate(561deg) skew(60deg); }
.surround_main[num="5"] .surround_item.acting:nth-child(4){ -webkit-transform: rotate(631deg) skew(60deg); }
.surround_main[num="5"] .surround_item.acting:nth-child(5){ -webkit-transform: rotate(701deg) skew(60deg); }
.surround_main[num="5"] .surround_item.acting:nth-child(1) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-060deg); }
.surround_main[num="5"] .surround_item.acting:nth-child(2) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-131deg); }
.surround_main[num="5"] .surround_item.acting:nth-child(3) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-201deg); }
.surround_main[num="5"] .surround_item.acting:nth-child(4) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-271deg); }
.surround_main[num="5"] .surround_item.acting:nth-child(5) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-341deg); }

.surround_main[num="6"] .surround_item.acting:nth-child(1){ -webkit-transform: rotate(420deg) skew(60deg); }
.surround_main[num="6"] .surround_item.acting:nth-child(2){ -webkit-transform: rotate(480deg) skew(60deg); }
.surround_main[num="6"] .surround_item.acting:nth-child(3){ -webkit-transform: rotate(540deg) skew(60deg); }
.surround_main[num="6"] .surround_item.acting:nth-child(4){ -webkit-transform: rotate(600deg) skew(60deg); }
.surround_main[num="6"] .surround_item.acting:nth-child(5){ -webkit-transform: rotate(660deg) skew(60deg); }
.surround_main[num="6"] .surround_item.acting:nth-child(6){ -webkit-transform: rotate(360deg) skew(60deg); }
.surround_main[num="6"] .surround_item.acting:nth-child(1) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-060deg); }
.surround_main[num="6"] .surround_item.acting:nth-child(2) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-120deg); }
.surround_main[num="6"] .surround_item.acting:nth-child(3) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-180deg); }
.surround_main[num="6"] .surround_item.acting:nth-child(4) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-240deg); }
.surround_main[num="6"] .surround_item.acting:nth-child(5) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-300deg); }
.surround_main[num="6"] .surround_item.acting:nth-child(6) .surround_item_inner{ -webkit-transform: skew(-60deg) rotate(-000deg); }

.surround_item.acting{ -webkit-transform-origin: 100% 100%; transition: all 2.3s ease;}
.surround_item.acting .surround_item_inner{transition: all 2.3s ease;}
/*
.surround_item:nth-child(1){ transform: rotate(60deg) skew(60deg);}
.surround_item:nth-child(2){ transform: rotate(120deg) skew(60deg);}
.surround_item:nth-child(3){ transform: rotate(180deg) skew(60deg);}
.surround_item:nth-child(4){ transform: rotate(240deg) skew(60deg);}
.surround_item:nth-child(5){ transform: rotate(300deg) skew(60deg);}
.surround_item:nth-child(6){ transform: rotate(0deg) skew(60deg);}
.surround_item:nth-child(1) .surround_item_inner{ transform: skew(-60deg) rotate(-60deg);}
.surround_item:nth-child(2) .surround_item_inner{ transform: skew(-60deg) rotate(-120deg);}
.surround_item:nth-child(3) .surround_item_inner{ transform: skew(-60deg) rotate(-180deg);}
.surround_item:nth-child(4) .surround_item_inner{ transform: skew(-60deg) rotate(-240deg);}
.surround_item:nth-child(5) .surround_item_inner{ transform: skew(-60deg) rotate(-300deg);}
.surround_item:nth-child(6) .surround_item_inner{ transform: skew(-60deg) rotate(-0deg);}
*/

/* swipe */
.main_absolute{ overflow: hidden;}
.page_swipe_horizontal{ height: 50px;}
.page_swiper, .page_swipe_vertical{ height: 200px;}
.page_slidedown{ font-size: 36px; text-align:center;}
.page_slidedown:nth-child(6n+1){ background: rgba(255,000,000,0.5);}
.page_slidedown:nth-child(6n+2){ background: rgba(000,255,000,0.5);}
.page_slidedown:nth-child(6n+3){ background: rgba(000,000,255,0.5);}
.page_slidedown:nth-child(6n+4){ background: rgba(255,255,000,0.5);}
.page_slidedown:nth-child(6n+5){ background: rgba(000,255,255,0.5);}
.page_slidedown:nth-child(6n+6){ background: rgba(255,000,255,0.5);}