.slideshow {
    position: relative;
}
.slideshow ul li a {
    display: block;
}
.slideshow ul, .slideshow ul li, .slideshow ul li a, .slideshow img {
    width: 100%;
    height: 100%;
}
.slideshow ul{
    position: relative;
    z-index: 1;
    overflow: hidden;
    /*animation: slider 25s infinite;*/
}
/*.slideshow ul:hover {
    -webkit-animation-play-state: paused; *//* Chrome, Safari, Opera *//*
    animation-play-state: paused;
}*/

.slideshow ul li {
    position: absolute;
    top: 0;
    left:0;
}
.slideshow ul li:first-child {
    -webkit-animation: slider01 20s infinite;
    animation: slider01 20s infinite;
    left: 0;
}
.slideshow ul li:nth-child(2) {
    -webkit-animation: slider02 20s infinite;
    animation: slider02 20s infinite;
    left: 100%;
 }
.slideshow ul li:nth-child(3) {
    -webkit-animation: slider03 20s infinite;
    animation: slider03 20s infinite;
    left: 200%;
 }
.slideshow ul li:nth-child(4) {
    -webkit-animation: slider04 20s infinite;
    animation: slider04 20s infinite;
    left: 300%;
 }
.slideshow ul li:nth-child(5) {
    -webkit-animation: slider05 20s infinite;
    animation: slider05 20s infinite;
    left: -100%;
 }

@keyframes slider01 {
    0%, 16%, 100%          {left: 0; visibility: visible}
    20%, 26%               {left: -100%; visibility: visible}
    27%                    {left: -100%; visibility: hidden}
    30%, 36%               {left: 400%; visibility: hidden}
    40%, 56%               {left: 300%; visibility: hidden}
    60%, 76%               {left: 200%; visibility: hidden}
    80%, 96%               {left: 100%; visibility: visible}
}
@keyframes slider02 {
    0%, 16%, 100%          {left: 100%; visibility: visible}
    20%, 36%               {left: 0; visibility: visible}
    40%, 46%               {left: -100%; visibility: visible}
    47%                    {left: -100%; visibility: hidden}
    50%, 56%               {left: 400%; visibility: hidden}
    60%, 70%               {left: 300%; visibility: hidden}
    80%, 96%               {left: 200%; visibility: hidden}
}
@keyframes slider03 {
    0%, 16%, 100%          {left: 200%; visibility: hidden}
    20%, 36%               {left: 100%; visibility: visible}
    40%, 56%               {left: 0; visibility: visible}
    60%, 66%               {left: -100%; visibility: visible}
    67%                    {left: -100%; visibility: hidden}
    70%, 76%               {left: 400%; visibility: hidden}
    80%, 96%               {left: 300%; visibility: hidden}
}
@keyframes slider04 {
    0%, 16%, 100%          {left: 300%; visibility: hidden}
    20%, 36%               {left: 200%; visibility: hidden}
    40%, 56%               {left: 100%; visibility: visible}
    60%, 76%               {left: 0; visibility: visible}
    80%, 86%               {left: -100%; visibility: visible}
    87%                    {left: -100%; visibility: hidden}
    90%, 96%               {left: 400%; visibility: hidden}
}
@keyframes slider05 {
    0%, 6%, 100%           {left: -100%; visibility: visible}
    7%                     {left: -100%; visibility: hidden}
    10%, 16%               {left: 400%; visibility: hidden}
    20%, 36%               {left: 300%; visibility: hidden}
    40%, 56%               {left: 200%; visibility: hidden}
    60%, 76%               {left: 100%; visibility: visible}
    80%, 96%               {left: 0; visibility: visible}
}
@-webkit-keyframes slider01 {
    0%, 16%, 100%          {left: 0; visibility: visible}
    20%, 26%               {left: -100%; visibility: visible}
    27%                    {left: -100%; visibility: hidden}
    30%, 36%               {left: 400%; visibility: hidden}
    40%, 56%               {left: 300%; visibility: hidden}
    60%, 76%               {left: 200%; visibility: hidden}
    80%, 96%               {left: 100%; visibility: visible}
}
@-webkit-keyframes slider02 {
    0%, 16%, 100%          {left: 100%; visibility: visible}
    20%, 36%               {left: 0; visibility: visible}
    40%, 46%               {left: -100%; visibility: visible}
    47%                    {left: -100%; visibility: hidden}
    50%, 56%               {left: 400%; visibility: hidden}
    60%, 70%               {left: 300%; visibility: hidden}
    80%, 96%               {left: 200%; visibility: hidden}
}
@-webkit-keyframes slider03 {
    0%, 16%, 100%          {left: 200%; visibility: hidden}
    20%, 36%               {left: 100%; visibility: visible}
    40%, 56%               {left: 0; visibility: visible}
    60%, 66%               {left: -100%; visibility: visible}
    67%                    {left: -100%; visibility: hidden}
    70%, 76%               {left: 400%; visibility: hidden}
    80%, 96%               {left: 300%; visibility: hidden}
}
@-webkit-keyframes slider04 {
    0%, 16%, 100%          {left: 300%; visibility: hidden}
    20%, 36%               {left: 200%; visibility: hidden}
    40%, 56%               {left: 100%; visibility: visible}
    60%, 76%               {left: 0; visibility: visible}
    80%, 86%               {left: -100%; visibility: visible}
    87%                    {left: -100%; visibility: hidden}
    90%, 96%               {left: 400%; visibility: hidden}
}
@-webkit-keyframes slider05 {
    0%, 6%, 100%           {left: -100%; visibility: visible}
    7%                     {left: -100%; visibility: hidden}
    10%, 16%               {left: 400%; visibility: hidden}
    20%, 36%               {left: 300%; visibility: hidden}
    40%, 56%               {left: 200%; visibility: hidden}
    60%, 76%               {left: 100%; visibility: visible}
    80%, 96%               {left: 0; visibility: visible}
}

/*@keyframes slider01 {
    0%, 12%, 100%   {transform: translate(0,0)}
    20%, 32%        {transform: translate(-100%,0)}
    40%, 52%        {transform: translate(-100%,-100%)}
    60%, 72%        {transform: translate(100%,-100%)}
    80%, 92%        {transform: translate(100%,0)}
}
@keyframes slider02 {
    0%, 12%, 100%   {transform: translate(100%,0)}
    20%, 32%        {transform: translate(0,0)}
    40%, 52%        {transform: translate(-100%,0)}
    60%, 72%        {transform: translate(-100%,-100%)}
    80%, 92%        {transform: translate(100%,-100%)}
}
@keyframes slider03 {
    0%, 12%, 100%   {transform: translate(100%,-100%)}
    20%, 32%        {transform: translate(100%,0)}
    40%, 52%        {transform: translate(0,0)}
    60%, 72%        {transform: translate(-100%,0)}
    80%, 92%        {transform: translate(-100%,-100%)}
}
@keyframes slider04 {
    0%, 12%, 100%   {transform: translate(-100%,-100%)}
    20%, 32%        {transform: translate(100%,-100%)}
    40%, 52%        {transform: translate(100%,0)}
    60%, 72%        {transform: translate(0,0)}
    80%, 92%        {transform: translate(-100%,0)}
}
@keyframes slider05 {
    0%, 12%, 100%   {transform: translate(-100%,0)}
    20%, 32%        {transform: translate(-100%,-100%)}
    40%, 52%        {transform: translate(100%,-100%)}
    60%, 72%        {transform: translate(100%,0)}
    80%, 92%        {transform: translate(0,0)}
}*/
/*slide btn*/
.sl_cm {
    display: none;
}

.slideshow .prev {
    visibility: hidden;
}
.slideshow .next {
    visibility: hidden;
}
.prev.sl5, .next.sl2{
    -webkit-animation: btn01 20s infinite;
    animation: btn01 20s infinite;
}
.prev.sl1, .next.sl3 {
    -webkit-animation: btn02 20s infinite;
    animation: btn02 20s infinite;
}
.prev.sl2, .next.sl4 {
    -webkit-animation: btn03 20s infinite;
    animation: btn03 20s infinite;
}
.prev.sl3, .next.sl5 {
    -webkit-animation: btn04 20s infinite;
    animation: btn04 20s infinite;
}
.prev.sl4, .next.sl1 {
    -webkit-animation: btn05 20s infinite;
    animation: btn05 20s infinite;
}

#sl_pause:target ~ ul li:first-child,
#sl_pause:target ~ ul li:nth-child(2),
#sl_pause:target ~ ul li:nth-child(3),
#sl_pause:target ~ ul li:nth-child(4),
#sl_pause:target ~ ul li:nth-child(5),
#sl_pause:target ~ .next.sl1,
#sl_pause:target ~ .next.sl2,
#sl_pause:target ~ .next.sl3,
#sl_pause:target ~ .next.sl4,
#sl_pause:target ~ .next.sl5,
#sl_pause:target ~ .prev.sl1,
#sl_pause:target ~ .prev.sl2,
#sl_pause:target ~ .prev.sl3,
#sl_pause:target ~ .prev.sl4,
#sl_pause:target ~ .prev.sl5 {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
#sl_1:target ~ .prev.sl5,
#sl_1:target ~ .next.sl2,
#sl_2:target ~ .prev.sl1,
#sl_2:target ~ .next.sl3,
#sl_3:target ~ .prev.sl2,
#sl_3:target ~ .next.sl4,
#sl_4:target ~ .prev.sl3,
#sl_4:target ~ .next.sl5,
#sl_5:target ~ .prev.sl4,
#sl_5:target ~ .next.sl1 {
    visibility: visible;
    -webkit-animation: none;
    animation: none;
}
#sl_1:target ~ .prev.sl1, #sl_1:target ~ .prev.sl3, #sl_1:target ~ .prev.sl4,
#sl_1:target ~ .next.sl1, #sl_1:target ~ .next.sl3, #sl_1:target ~ .next.sl4,
#sl_1:target ~ .prev.sl2, #sl_1:target ~ .next.sl5,
#sl_2:target ~ .prev.sl2, #sl_2:target ~ .prev.sl4, #sl_2:target ~ .prev.sl5,
#sl_2:target ~ .next.sl2, #sl_2:target ~ .next.sl4, #sl_2:target ~ .next.sl5,
#sl_2:target ~ .prev.sl3, #sl_2:target ~ .next.sl1,
#sl_3:target ~ .prev.sl1, #sl_3:target ~ .prev.sl3, #sl_3:target ~ .prev.sl5,
#sl_3:target ~ .next.sl1, #sl_3:target ~ .next.sl3, #sl_3:target ~ .next.sl5,
#sl_3:target ~ .prev.sl4, #sl_3:target ~ .next.sl2,
#sl_4:target ~ .prev.sl1, #sl_4:target ~ .prev.sl2, #sl_4:target ~ .prev.sl4,
#sl_4:target ~ .next.sl1, #sl_4:target ~ .next.sl2, #sl_4:target ~ .next.sl4,
#sl_4:target ~ .prev.sl5, #sl_4:target ~ .next.sl3,
#sl_5:target ~ .prev.sl2, #sl_5:target ~ .prev.sl3, #sl_5:target ~ .prev.sl5,
#sl_5:target ~ .next.sl2, #sl_5:target ~ .next.sl3, #sl_5:target ~ .next.sl5,
#sl_5:target ~ .prev.sl1, #sl_5:target ~ .next.sl4{
    visibility: hidden;
    -webkit-animation: none;
    animation: none;
}
/*#sl_1:target ~ ul li:first-child,
#sl_1:target ~ ul li:nth-child(2),
#sl_1:target ~ ul li:nth-child(3),
#sl_1:target ~ ul li:nth-child(4),
#sl_1:target ~ ul li:nth-child(5){
    *//*animation-play-state: paused*//*
}*/
#sl_1:target ~ ul li:first-child,
#sl_2:target ~ ul li:nth-child(2),
#sl_3:target ~ ul li:nth-child(3),
#sl_4:target ~ ul li:nth-child(4),
#sl_5:target ~ ul li:nth-child(5){
    -webkit-animation: none;
    animation: none;
    -webkit-transition: left 1s ease-in, visibility 0s linear 1s;
    transition: left 1s ease-in, visibility 0s linear 1s;
    left: 0;
    visibility: visible;
}
#sl_1:target ~ ul li:nth-child(2),
#sl_2:target ~ ul li:nth-child(3),
#sl_3:target ~ ul li:nth-child(4),
#sl_4:target ~ ul li:nth-child(5),
#sl_5:target ~ ul li:first-child{
    -webkit-animation: none;
    animation: none;
    -webkit-transition: left 1s ease-in, visibility 0s linear 1s;
    transition: left 1s ease-in, visibility 0s linear 1s;
    left: 100%;
    visibility: visible;
}
#sl_1:target ~ ul li:nth-child(3),
#sl_2:target ~ ul li:nth-child(4),
#sl_3:target ~ ul li:nth-child(5),
#sl_4:target ~ ul li:first-child,
#sl_5:target ~ ul li:nth-child(2){
    -webkit-animation: none;
    animation: none;
    -webkit-transition: left 1s ease-in;
    transition: left 1s ease-in;
    left: 200%;
    visibility: hidden;
}
#sl_1:target ~ ul li:nth-child(4),
#sl_2:target ~ ul li:nth-child(5),
#sl_3:target ~ ul li:first-child,
#sl_4:target ~ ul li:nth-child(2),
#sl_5:target ~ ul li:nth-child(3){
    -webkit-animation: none;
    animation: none;
    -webkit-transition: left 1s ease-in;
    transition: left 1s ease-in;
    left: 300%;
    visibility: hidden;
}
#sl_1:target ~ ul li:nth-child(5),
#sl_2:target ~ ul li:first-child,
#sl_3:target ~ ul li:nth-child(2),
#sl_4:target ~ ul li:nth-child(3),
#sl_5:target ~ ul li:nth-child(4){
    -webkit-animation: none;
    animation: none;
    -webkit-transition: left 1s ease-in, visibility 0s linear 1s;
    transition: left 1s ease-in, visibility 0s linear 1s;
    left: -100%;
    visibility: visible;
}
/*.next:hover ~ ul li:nth-child(5) {*/
    /*animation-play-state: paused;*/
/*}*/

@keyframes btn01 {
    0%, 16%, 100%           {visibility: visible}
    17%, 99%                {visibility: hidden}
}
@keyframes btn02 {
    0%, 16%, 37%, 100%      {visibility: hidden}
    17%, 36%                {visibility: visible}
}
@keyframes btn03 {
    0%, 36%, 57%, 100%      {visibility: hidden}
    37%, 56%                {visibility: visible}
}
@keyframes btn04 {
    0%, 56%, 77%, 100%      {visibility: hidden}
    57%,76%                 {visibility: visible}
}
@keyframes btn05 {
    0%, 76%, 97%, 100%      {visibility: hidden}
    77%, 96%                {visibility: visible}
}
@-webkit-keyframes btn01 {
    0%, 16%, 100%           {visibility: visible}
    17%, 99%                {visibility: hidden}
}
@-webkit-keyframes btn02 {
    0%, 16%, 37%, 100%      {visibility: hidden}
    17%, 36%                {visibility: visible}
}
@-webkit-keyframes btn03 {
    0%, 36%, 57%, 100%      {visibility: hidden}
    37%, 56%                {visibility: visible}
}
@-webkit-keyframes btn04 {
    0%, 56%, 77%, 100%      {visibility: hidden}
    57%,76%                 {visibility: visible}
}
@-webkit-keyframes btn05 {
    0%, 76%, 97%, 100%      {visibility: hidden}
    77%, 96%                {visibility: visible}
}