@charset "utf-8";
/*reset*/
.main_image{ height:600px; border-bottom: solid 5px #A79476; border-top: solid 5px #A79476;}
.bnr { width:100%; float:left; margin:40px 0 0;}
.bnr a { display:block;}
.bnr a img { max-width:100%; height:auto;}
.bnr span{ width:49%; display:inline;}
.bnr .left{ float:left;}
.bnr .right{ float:right;}

@media screen and (max-width: 960px) {
.main_image{ height:550px;}
.bnr { width:96%; float:left; margin:10px 2% 0;}
}
@media screen and (max-width: 640px) {
.main_image{ border:none;}
.bnr span{ width:100%; margin-bottom:10px;}
}
@media screen and (max-width: 481px) {
}
/*-------------------
 background
---------------------*/
.event_bk {position:absolute;	width:100%; height:600px;	overflow:hidden;	z-index:1;}
.event_bk .imgBK { width: 100%; height: 100%; position: absolute; top: 0px; background-size: cover; background-repeat: none; opacity: 1; z-index: 80;}
.event_bk div{ background-position:25% 50% !important;}
.event_bk div.top1 { background:url("../../img/event_sl/top1.jpg") no-repeat #CADBF2;}
.event_bk div.top2 { background:url("../../img/event_sl/top2.jpg") repeat-x; background-size:cover;}
.event_bk div.top3 { background:url("../../img/event_sl/top3.jpg") no-repeat #FFE482;}
.event_bk div.top4 { background:url("../../img/event_sl/top4.jpg") no-repeat #E0F1F5;}
.event_bk div.top5 { background:url("../../img/event_sl/top5.jpg") no-repeat #FCFAF6;}
.event_bk div.top6 { background:url("../../img/event_sl/top6.jpg") no-repeat #2C353A; *background:url("../../img/event_sl/top1.jpg") no-repeat #CADBF2;  background:url("../../img/event_sl/top1.jpg") no-repeat #CADBF2\9;}
.event_bk div.top6 {} 
@media screen and (max-width: 1100px) {
.event_bk div{ background-position: 45% 50% !important;}
}
@media screen and (max-width: 960px) {
.event_bk {height:550px;}
}
@media screen and (max-width: 640px) {
.event_bk div.top1 { background:url("../../img/event_sl/01s.jpg") no-repeat; background-size:cover;}
.event_bk div.top2 { background:url("../../img/event_sl/02s.jpg") no-repeat; background-size:cover;}
.event_bk div.top3 { background:url("../../img/event_sl/03s.jpg") no-repeat; background-size:cover;}
.event_bk div.top4 { background:url("../../img/event_sl/04s.jpg") no-repeat; background-size:cover;}
.event_bk div.top5 { background:url("../../img/event_sl/05s.jpg") no-repeat; background-size:cover;}
.event_bk div.top6 { background:url("../../img/event_sl/06s.jpg") no-repeat; background-size:cover;}
}
@media screen and (max-width: 481px) {
.main_image, .event_bk {height:400px;}
}
/*-------------------
 Text
---------------------*/
.infoBox { width:30%; min-width:400px; height:600px; position:absolute; z-index:120; right:0; top:0;}
.infoBox .text-box { width:100%; height:100%; float:left; position:relative;}
@media screen and (max-width: 960px) {
.infoBox {height:220px; width:100%; min-width:1px; top:auto; bottom:0;}
}
@media screen and (max-width: 481px) {
.infoBox {height:400px;}
}
/* animation
------------------------*/
.infoBox .text-box #animation { width:340px; height:120px; position:absolute; top:230px; left:50%; margin: 0 0 0 -170px; z-index:150;}
@media screen and (max-width: 960px) {
.infoBox .text-box #animation { top:auto; bottom:30%; margin:0; left:auto; right:90px;}
}
@media screen and (max-width: 700px) {
.infoBox .text-box #animation {right:1%;}
}
@media screen and (max-width: 481px) {
.infoBox .text-box #animation { width:170px !important; height:60px !important; background-size:170px auto !important; top:64%; right:45%; margin-right:-85px;}
.infoBox .text-box #animation {
animation: animation 3s ease-in forwards;
-o-animation: animation 3s ease-in forwards;
-ms-animation: animation 3s ease-in forwards;
-moz-animation: animation 3s ease-in forwards;
-webkit-animation: animation 3s ease-in forwards;
}
@keyframes animation{
0%{ opacity: 0; filter: alpha(opacity=0);}
99%{ opacity: 0; filter: alpha(opacity=0);}
100%{ opacity: 1; filter: alpha(opacity=100);}
}
@-o-keyframes animation{
0%{ opacity: 0; filter: alpha(opacity=0);}
99%{ opacity: 0; filter: alpha(opacity=0);}
100%{ opacity: 1; filter: alpha(opacity=100);}
}
@-ms-keyframes animation{
0%{ opacity: 0; filter: alpha(opacity=0);}
99%{ opacity: 0; filter: alpha(opacity=0);}
100%{ opacity: 1; filter: alpha(opacity=100);}
}
@-moz-keyframes animation{
0%{ opacity: 0; filter: alpha(opacity=0);}
99%{ opacity: 0; filter: alpha(opacity=0);}
100%{ opacity: 1; filter: alpha(opacity=100);}
}
@-webkit-keyframes animation{
0%{ opacity: 0; filter: alpha(opacity=0);}
99%{ opacity: 0; filter: alpha(opacity=0);}
100%{ opacity: 1; filter: alpha(opacity=100);}
}
}
/* a link
------------------------*/
.infoBox .text-box .link { width:100%; height:100%; position:absolute; z-index:200;}
.infoBox .text-box .link a { width:100%; height:100%; float:left; display:block; position:relative;}
.infoBox .text-box .link a span { width:280px; height:30px; line-height:30px; font-size:14px; text-align:center; letter-spacing:3px; color:#000; position:absolute; left:50%; top:430px; margin-left:-170px; background:url("../../img/event_sl/link.png") 5% 50% no-repeat #A79476; border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; -webkit-border-radius:6px; }
.infoBox .text-box .link a span {
-webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
opacity: 0; filter: alpha(opacity=0);
animation: textKey 4s ease-in 1s forwards;
-o-animation: textKey 4s ease-in 1s forwards;
-ms-animation: textKey 4s ease-in 1s forwards;
-moz-animation: textKey 4s ease-in 1s forwards;
-webkit-animation: textKey 4s ease-in 1s forwards;
}
.infoBox .text-box .link a:hover span{ width:320px; box-shadow:1px 2px 3px #333;}
@media screen and (max-width: 960px) {
.infoBox .text-box .link a span { top:170px; left:auto; right:20%;}
}
@media screen and (max-width: 700px) {
.infoBox .text-box .link a span {right:5%;}
}

@media screen and (max-width: 481px) {
.infoBox .text-box .link { height:60%; bottom:0;}
.infoBox .text-box .link a span { width:80%; height:22px; line-height:22px; font-size:12px; left:10%; right:auto; top:auto; bottom:15px; margin-left:0;der-radius:6px; background-size: 5px auto;}
}
/* DAY
------------------------*/
.infoBox .text-box .day{ width:150px; height:150px; position:absolute; top:80px; left:50%; margin:0 0 0 -250px; z-index:130;}
.infoBox .text-box .day2{ width:100px; height:100px; position:absolute; top:80px; left:50%; margin:0 0 0 -250px; z-index:129; opacity: 0; filter: alpha(opacity=0);}
.infoBox .text-box .day2{-webkit-transition: 1s ease-in-out 3s; -moz-transition: 1s ease-in-out 3s; -o-transition: 1s ease-in-out 3s; transition: 1s ease-in-out 3s;}
.rslides1_on .infoBox .text-box .day2{ width:150px; height:150px; top:40px; margin:0 0 0 -120px; opacity: 1; filter: alpha(opacity=100);}

.infoBox .text-box .day span {
position:absolute;
width:150px; height:150px;
left:0; top:0;
opacity: 0; filter: alpha(opacity=0);
z-index:120;
background:#A79476;
display:block;
*display:none; display:none\9;
border-radius:100%;
-moz-border-radius:100%;
-ms-border-radius:100%;
-o-border-radius:100%;
-webkit-border-radius:100%;
animation: day-span 3s ease-in forwards;
-o-animation: day-span 3s ease-in forwards;
-ms-animation: day-span 3s ease-in forwards;
-moz-animation: day-span 3s ease-in forwards;
-webkit-animation: day-span 3s ease-in forwards;
}
@keyframes day-span{
0%{ opacity: 0; filter: alpha(opacity=0); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
40%{ opacity: 1; filter: alpha(opacity=100); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
60%{ opacity: 1; filter: alpha(opacity=100); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
100%{ opacity: 0; filter: alpha(opacity=0); transform:scale( 1, 1); -o-transform:rotate(0deg) scale(1); -ms-transform:scale( 1, 1); -moz-transform:scale( 1, 1); -webkit-transform:scale( 1, 1); filter:	flipv(); -ms-filter:flipv();}
}
@-o-keyframes day-span{
0%{ opacity: 0; filter: alpha(opacity=0); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
40%{ opacity: 1; filter: alpha(opacity=100); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
60%{ opacity: 1; filter: alpha(opacity=100); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
100%{ opacity: 0; filter: alpha(opacity=0); transform:scale( 1, 1); -o-transform:rotate(0deg) scale(1); -ms-transform:scale( 1, 1); -moz-transform:scale( 1, 1); -webkit-transform:scale( 1, 1); filter:	flipv(); -ms-filter:flipv();}
}
@-ms-keyframes day-span{
0%{ opacity: 0; filter: alpha(opacity=0); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
40%{ opacity: 1; filter: alpha(opacity=100); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
60%{ opacity: 1; filter: alpha(opacity=100); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
100%{ opacity: 0; filter: alpha(opacity=0); transform:scale( 1, 1); -o-transform:rotate(0deg) scale(1); -ms-transform:scale( 1, 1); -moz-transform:scale( 1, 1); -webkit-transform:scale( 1, 1); filter:	flipv(); -ms-filter:flipv();}
}
@-moz-keyframes day-span{
0%{ opacity: 0; filter: alpha(opacity=0); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
40%{ opacity: 1; filter: alpha(opacity=100); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
60%{ opacity: 1; filter: alpha(opacity=100); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
100%{ opacity: 0; filter: alpha(opacity=0); transform:scale( 1, 1); -o-transform:rotate(0deg) scale(1); -ms-transform:scale( 1, 1); -moz-transform:scale( 1, 1); -webkit-transform:scale( 1, 1); filter:	flipv(); -ms-filter:flipv();}
}
@-webkit-keyframes day-span{
0%{ opacity: 0; filter: alpha(opacity=0); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
40%{ opacity: 1; filter: alpha(opacity=100); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
60%{ opacity: 1; filter: alpha(opacity=100); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
100%{ opacity: 0; filter: alpha(opacity=0); transform:scale( 1, 1); -o-transform:rotate(0deg) scale(1); -ms-transform:scale( 1, 1); -moz-transform:scale( 1, 1); -webkit-transform:scale( 1, 1); filter:	flipv(); -ms-filter:flipv();}
}
/**/
.infoBox .text-box .day img{
*opacity: 1; *filter: alpha(opacity=100);
opacity: 1\9; filter: alpha(opacity=100)\9;
animation: day-img 3s ease-in;
-o-animation: day-img 3s ease-in;
-ms-animation: day-img 3s ease-in;
-moz-animation: day-img 3s ease-in;
-webkit-animation: day-img 3s ease-in;
}
@keyframes day-img{
0%{ opacity: 0; filter: alpha(opacity=0); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
59%{ opacity: 0; filter: alpha(opacity=0); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
60%{ opacity: 1; filter: alpha(opacity=100); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
100%{ opacity: 1; filter: alpha(opacity=100); transform:scale( 1, 1); -o-transform:rotate(0deg) scale(1); -ms-transform:scale( 1, 1); -moz-transform:scale( 1, 1); -webkit-transform:scale( 1, 1); filter:	flipv(); -ms-filter:flipv();}
}
@-o-keyframes day-img{
0%{ opacity: 0; filter: alpha(opacity=0); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
59%{ opacity: 0; filter: alpha(opacity=0); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
60%{ opacity: 1; filter: alpha(opacity=100); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
100%{ opacity: 1; filter: alpha(opacity=100); transform:scale( 1, 1); -o-transform:rotate(0deg) scale(1); -ms-transform:scale( 1, 1); -moz-transform:scale( 1, 1); -webkit-transform:scale( 1, 1); filter:	flipv(); -ms-filter:flipv();}
}
@-ms-keyframes day-img{
0%{ opacity: 0; filter: alpha(opacity=0); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
59%{ opacity: 0; filter: alpha(opacity=0); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
60%{ opacity: 1; filter: alpha(opacity=100); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
100%{ opacity: 1; filter: alpha(opacity=100); transform:scale( 1, 1); -o-transform:rotate(0deg) scale(1); -ms-transform:scale( 1, 1); -moz-transform:scale( 1, 1); -webkit-transform:scale( 1, 1); filter:	flipv(); -ms-filter:flipv();}
}
@-moz-keyframes day-img{
0%{ opacity: 0; filter: alpha(opacity=0); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
59%{ opacity: 0; filter: alpha(opacity=0); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
60%{ opacity: 1; filter: alpha(opacity=100); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
100%{ opacity: 1; filter: alpha(opacity=100); transform:scale( 1, 1); -o-transform:rotate(0deg) scale(1); -ms-transform:scale( 1, 1); -moz-transform:scale( 1, 1); -webkit-transform:scale( 1, 1); filter:	flipv(); -ms-filter:flipv();}
}
@-webkit-keyframes day-img{
0%{ opacity: 0; filter: alpha(opacity=0); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
59%{ opacity: 0; filter: alpha(opacity=0); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
60%{ opacity: 1; filter: alpha(opacity=100); transform:scale( -1, 1); -o-transform:rotate(180deg) scale(-1); -ms-transform:scale( -1, 1); -moz-transform:scale( -1, 1); -webkit-transform:scale( -1, 1); filter:	flipv(); -ms-filter:flipv();}
100%{ opacity: 1; filter: alpha(opacity=100); transform:scale( 1, 1); -o-transform:rotate(0deg) scale(1); -ms-transform:scale( 1, 1); -moz-transform:scale( 1, 1); -webkit-transform:scale( 1, 1); filter:	flipv(); -ms-filter:flipv();}
}
@media screen and (max-width: 960px) {
.infoBox .text-box .day{ position:absolute; top:25px; left:auto; right:570px; margin:0;}
.infoBox .text-box .day2{top:25px; left:auto; margin:0; right:570px;}
.rslides1_on .infoBox .text-box .day2{top:25px; right:430px; margin:0; }
}
@media screen and (max-width: 700px) {
.infoBox .text-box .day{ left:-20px; right:auto;}
.infoBox .text-box .day2{ left:-20px; right:auto;}
.rslides1_on .infoBox .text-box .day2{ left:110px; margin:0;}
}
@media screen and (max-width: 481px) {
.infoBox .text-box .day{ width:75px; height:75px; top:62%; left:2%; }
.infoBox .text-box .day span, 
.infoBox .text-box .day img {width:75px; height:75px;}

.infoBox .text-box .day2{ width:75px; height:75px; top:62%; left:2%; }
.infoBox .text-box .day2 img {width:75px; height:75px;}

.rslides1_on .infoBox .text-box .day2{top:62%; left:3%; margin-top:-65px;}

}
/*  title / 2
------------------------*/
.infoBox .text-box .en-txt, 
.infoBox .text-box .hawaii-pg { width:340px; position:absolute; left:50%; margin-left:-170px; z-index:130;}
.infoBox .text-box .en-txt { height:58px; top:360px;}
.infoBox .text-box .hawaii-pg { height:21px; top:200px;}
.infoBox .text-box .hawaii-pg img {
opacity: 0; filter: alpha(opacity=0);
animation: textKey 2s ease-in 2s forwards;
-o-animation: textKey 2s ease-in 2s forwards;
-ms-animation: textKey 2s ease-in 2s forwards;
-moz-animation: textKey 2s ease-in 2s forwards;
-webkit-animation: textKey 2s ease-in 2s forwards;
}
.infoBox .text-box .en-txt img {
opacity: 0; filter: alpha(opacity=0);
animation: textKey 2s ease-in 3.5s forwards;
-o-animation: textKey 2s ease-in 3.5s forwards;
-ms-animation: textKey 2s ease-in 3.5s forwards;
-moz-animation: textKey 2s ease-in 3.5s forwards;
-webkit-animation: textKey 2s ease-in 3.5s forwards;
}
@keyframes textKey{
0%{opacity: 0; filter: alpha(opacity=0);}
100%{opacity: 1; filter: alpha(opacity=100);}
}
@-o-keyframes textKey{
0%{opacity: 0; filter: alpha(opacity=0);}
100%{opacity: 1; filter: alpha(opacity=100);}
}
@-ms-keyframes textKey{
0%{opacity: 0; filter: alpha(opacity=0);}
100%{opacity: 1; filter: alpha(opacity=100);}
}
@-moz-keyframes textKey{
0%{opacity: 0; filter: alpha(opacity=0);}
100%{opacity: 1; filter: alpha(opacity=100);}
}
@-webkit-keyframes textKey{
0%{opacity: 0; filter: alpha(opacity=0);}
100%{opacity: 1; filter: alpha(opacity=100);}
}
@media screen and (max-width: 960px) {
.infoBox .text-box .en-txt { display:none;}
.infoBox .text-box .hawaii-pg { top:10px; margin:0; left:auto; right:90px;}
}
@media screen and (max-width: 700px) {
.infoBox .text-box .hawaii-pg { right:1%;}
}
@media screen and (max-width: 481px) {
.infoBox .text-box .en-txt, 
.infoBox .text-box .hawaii-pg { width:170px; display:block; left:auto; right:45%; margin-right:-85px;}
.infoBox .text-box .en-txt img, 
.infoBox .text-box .hawaii-pg img{ width:100%; height:auto;}
.infoBox .text-box .hawaii-pg { height:29px; top:56%;}
.infoBox .text-box .en-txt { height:11px; top:auto; bottom:62px;}
}
/* back
------------------------*/
.infoBox .text-box .back-line { width:100%; height:100%; position:absolute; z-index:120; background-size:cover;}
.infoBox .text-box .back-line.back1 { background:url("../../img/event_sl/back1.png") right top no-repeat;}
.infoBox .text-box .back-line.back2 { background:url("../../img/event_sl/back2.png") right top no-repeat; opacity: 0; filter: alpha(opacity=0);}
.infoBox .text-box .back-line.back3 { background:url("../../img/event_sl/back3.png") right top no-repeat; opacity: 0; filter: alpha(opacity=0);}
.infoBox .back-line.back1 {
animation: back1 6s ease-in infinite;
-o-animation: back1 6s ease-in infinite;
-ms-animation: back1 6s ease-in infinite;
-moz-animation: back1 6s ease-in infinite;
-webkit-animation: back1 6s ease-in infinite;
}
@keyframes back1{
0%{opacity: 1; filter: alpha(opacity=100);}
50%{opacity: 0.5; filter: alpha(opacity=50);}
100%{opacity: 1; filter: alpha(opacity=100);}
}
@-o-keyframes back1{
0%{opacity: 1; filter: alpha(opacity=100);}
50%{opacity: 0.5; filter: alpha(opacity=50);}
100%{opacity: 1; filter: alpha(opacity=100);}
}
@-ms-keyframes back1{
0%{opacity: 1; filter: alpha(opacity=100);}
50%{opacity: 0.5; filter: alpha(opacity=50);}
100%{opacity: 1; filter: alpha(opacity=100);}
}
@-moz-keyframes back1{
0%{opacity: 1; filter: alpha(opacity=100);}
50%{opacity: 0.5; filter: alpha(opacity=50);}
100%{opacity: 1; filter: alpha(opacity=100);}
}
@-webkit-keyframes back1{
0%{opacity: 1; filter: alpha(opacity=100);}
50%{opacity: 0.5; filter: alpha(opacity=50);}
100%{opacity: 1; filter: alpha(opacity=100);}
}
/**/
.infoBox .back-line.back2 {
animation: back2 6s ease-in infinite;
-o-animation: back2 6s ease-in infinite;
-ms-animation: back2 6s ease-in infinite;
-moz-animation: back2 6s ease-in infinite;
-webkit-animation: back2 6s ease-in infinite;
}
@keyframes back2{
0%{opacity: 0.5; filter: alpha(opacity=50);}
50%{opacity: 1; filter: alpha(opacity=100);}
100%{opacity: 0.5; filter: alpha(opacity=50);}
}
@-o-keyframes back2{
0%{opacity: 0.5; filter: alpha(opacity=50);}
50%{opacity: 1; filter: alpha(opacity=100);}
100%{opacity: 0.5; filter: alpha(opacity=50);}
}
@-ms-keyframes back2{
0%{opacity: 0.5; filter: alpha(opacity=50);}
50%{opacity: 1; filter: alpha(opacity=100);}
100%{opacity: 0.5; filter: alpha(opacity=50);}
}
@-moz-keyframes back2{
0%{opacity: 0.5; filter: alpha(opacity=50);}
50%{opacity: 1; filter: alpha(opacity=100);}
100%{opacity: 0.5; filter: alpha(opacity=50);}
}
@-webkit-keyframes back2{
0%{opacity: 0.5; filter: alpha(opacity=50);}
50%{opacity: 1; filter: alpha(opacity=100);}
100%{opacity: 0.5; filter: alpha(opacity=50);}
}
/**/
.infoBox .back-line.back3 {
animation: back3 6s ease-in 2s infinite;
-o-animation: back3 6s ease-in 2s infinite;
-ms-animation: back3 6s ease-in 2s infinite;
-moz-animation: back3 6s ease-in 2s infinite;
-webkit-animation: back3 6s ease-in 2s infinite;
}
@keyframes back3{
0%{opacity: 0.5; filter: alpha(opacity=50);}
50%{opacity: 1; filter: alpha(opacity=100);}
100%{opacity: 0.5; filter: alpha(opacity=50);}
}
@-o-keyframes back3{
0%{opacity: 0.5; filter: alpha(opacity=50);}
50%{opacity: 1; filter: alpha(opacity=100);}
100%{opacity: 0.5; filter: alpha(opacity=50);}
}
@-ms-keyframes back2{
0%{opacity: 0.5; filter: alpha(opacity=50);}
50%{opacity: 1; filter: alpha(opacity=100);}
100%{opacity: 0.5; filter: alpha(opacity=50);}
}
@-moz-keyframes back3{
0%{opacity: 0.5; filter: alpha(opacity=50);}
50%{opacity: 1; filter: alpha(opacity=100);}
100%{opacity: 0.5; filter: alpha(opacity=50);}
}
@-webkit-keyframes back3{
0%{opacity: 0.5; filter: alpha(opacity=50);}
50%{opacity: 1; filter: alpha(opacity=100);}
100%{opacity: 0.5; filter: alpha(opacity=50);}
}
@media screen and (max-width: 960px) {
.infoBox .text-box .back-line { left:20%;}
}
@media screen and (max-width: 481px) {
.infoBox .text-box .back-line { width:120%; height:45%; bottom:0; left:-10%;}
}
/*スライダー版で追加*/
.infoBox .text-box .day {transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out;}
.rslides1_on .infoBox .text-box .day {transform: scale(1.0); -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); -webkit-transform: scale(1.0);}
.main_image .event_bk {transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out;}
.rslides1_on .main_image .event_bk {transform: scale(1.0); -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); -webkit-transform: scale(1.0);}