﻿@charset "utf-8";
/* CSS Document */
/* main_image */
.main_visual{height:300px; overflow:hidden;position:relative;}
.main_image{height:300px; overflow:hidden;position:relative;}
.main_image ul{width:9999px;height:300px;overflow:hidden;position:absolute;top:0;left:0}
.main_image li{float:left; width:100%; height:300px; background:url(img/zzbg.png) center center no-repeat;}
.main_image li div{ padding-top:40px; padding-left:97px;}

div.flicking_con{position:absolute;top:260px;left:50%;z-index:999;width:300px;height:21px;margin:0 0 0 -50px;}
div.flicking_con a{float:left;width:21px;height:21px;margin:0;padding:0;background:url('../images/btn_main_img.png') 0 0 no-repeat;display:block;text-indent:-1000px}
div.flicking_con a.on{background-position:0 -21px}
#btn_prev,#btn_next{z-index:11111;position:absolute;display:block;width:73px!important;height:74px!important;top:50%;margin-top:-37px;display:none;}
#btn_prev{ left:0px;}
#btn_next{ right:0px;}
.main_image li{
animation:main_image 2s linear infinite alternate ;
-webkit-animation:main_image 2s linear infinite alternate ; 
-moz-animation:main_image 2s linear infinite alternate ; 
-o-animation:main_image 2s linear infinite alternate ;}
@keyframes main_image
{0% {
transform: rotate(-2deg);
-ms-transform: rotate(-2deg);		
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
100%{
transform: rotate(2deg);
-ms-transform: rotate(2deg);		
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}}
@-webkit-keyframes main_image
{0% {
transform: rotate(-2deg);
-ms-transform: rotate(-2deg);		
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
100%{
transform: rotate(2deg);
-ms-transform: rotate(2deg);		
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}}
@-moz-keyframes main_image
{0% {
transform: rotate(-2deg);
-ms-transform: rotate(-2deg);		
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
100%{
transform: rotate(2deg);
-ms-transform: rotate(2deg);		
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}}
@-o-keyframes main_image
{0% {
transform: rotate(-2deg);
-ms-transform: rotate(-2deg);		
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
100%{
transform: rotate(2deg);
-ms-transform: rotate(2deg);		
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}}


.main_visual2{height:379px;border-top:1px solid #d7d7d7;overflow:hidden;position:relative;}
.main_image2{height:379px;overflow:hidden;position:relative;}
.main_image2 ul{width:9999px;height:379px;overflow:hidden;position:absolute;top:0;left:0}
.main_image2 li{float:left;width:100%;height:379px;}
.main_image2 li a{display:block;width:100%;height:379px;}

div.flicking_con2{position:absolute;top:340px;left:50%;z-index:999;width:1240px;height:21px;margin:0 0 0 -620px;}
div.flicking_con2 a{float:left;width:14px;height:14px;margin:0;padding:0; border:2px solid #FFF; margin:0 3px; display:block;text-indent:-1000px; -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
div.flicking_con2 a.on{background:#fff;}
#btn_prev2,#btn_next2{z-index:11111;position:absolute;display:block;width:73px!important;height:74px!important;top:50%;margin-top:-37px;display:none;}
#btn_prev2{background:url(../images/hover_left.png) no-repeat left top;left:100px;}
#btn_next2{background:url(../images/hover_right.png) no-repeat right top;right:100px;}

