@charset "utf-8";
*{user-select: none;}

@keyframes up_down{
	0%{bottom: 100px;}
	50%{bottom: 80px;}
	100%{bottom: 100px;}
}

@keyframes jello-horizontal {
  0% {transform: scale3d(1, 1, 1);}
  30% {transform: scale3d(1.25, 0.75, 1);}
  40% {transform: scale3d(0.75, 1.25, 1);}
  50% {transform: scale3d(1.15, 0.85, 1);}
  65% {transform: scale3d(0.95, 1.05, 1);}
  75% {transform: scale3d(1.05, 0.95, 1);}
  100% {transform: scale3d(1, 1, 1);}
}

@keyframes swing{
	0% {
    transform: rotate(6deg);
	}
	20% {
		transform: rotate(-4deg);
	}
	40% {
		transform: rotate(4deg);
	}
	60% {
		transform: rotate(-2deg);
	}
	80% {
		transform: rotate(2deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

#container{min-width: 1280px; background: #0a357e;}

.tabcontent{display: none;}
.tabcontent.current{display: block;}

/*top*/
.top{width: 100%;}
.top div.top_in{position: relative; z-index: 999; width: 1280px; margin: 0 auto;}
.top div.top_in a.lh_logo{position: absolute; top: 40px; display: block; width: 157px; height: 79px; background: url('../images/fh_logo.png') no-repeat;}
.top div.top_in a.btn_home{position: absolute; top: 60px; right: 45px; display: block; width: 40px; height: 40px; background: url('../images/btn_home.png') no-repeat;}
.top div.top_in a.btn_home:hover{background: url('../images/btn_home_on.png') no-repeat;}
.top div.top_in a.btn_close{position: absolute; top: 60px; right: 0; display: block; width: 40px; height: 40px; background: url('../images/btn_close.png') no-repeat;}
.top div.top_in a.btn_close:hover{background: url('../images/btn_close_on.png') no-repeat;}

/*intro*/
#intro{position: relative; height: 979px; background: url('../images/intro_bg.jpg') center 0 no-repeat;}
#intro div.scroll_down{position: absolute; bottom: 100px; left: 50%; margin-left: -82px; width: 164px; height: 78px; background: url('../images/scroll_down.png') no-repeat;
	animation: up_down 1s infinite;}

/*tabs*/
#tabs{position: absolute; top: 1004px; left: 50%; z-index: 999; margin-left: -510px; width: 1020px;}
#tabs.mo{margin-left: -35px;}
#tabs div{display: block; width: fit-content; margin: 0 auto; margin-bottom: 10px;}
#tabs li{display: inline-block; width: 246px; height: 96px; cursor: pointer;}
#tabs li.tab1{background: url('../images/tab01.png') no-repeat;}
#tabs li.tab1:hover,
#tabs li.tab1.current{background: url('../images/tab01_on.png') no-repeat;}
#tabs li.tab2{background: url('../images/tab02.png') no-repeat;}
#tabs li.tab2:hover,
#tabs li.tab2.current{background: url('../images/tab02_on.png') no-repeat;}
#tabs li.tab3{background: url('../images/tab03.png') no-repeat;}
#tabs li.tab3:hover,
#tabs li.tab3.current{background: url('../images/tab03_on.png') no-repeat;}
#tabs li.tab4{background: url('../images/tab04.png') no-repeat;}
#tabs li.tab4:hover,
#tabs li.tab4.current{background: url('../images/tab04_on.png') no-repeat;}
#tabs li.tab5{background: url('../images/tab05.png') no-repeat;}
#tabs li.tab5:hover,
#tabs li.tab5.current{background: url('../images/tab05_on.png') no-repeat;}
#tabs li.tab6{background: url('../images/tab06.png') no-repeat;}
#tabs li.tab6:hover,
#tabs li.tab6.current{background: url('../images/tab06_on.png') no-repeat;}
#tabs li.tab7{background: url('../images/tab07.png') no-repeat;}
#tabs li.tab7:hover,
#tabs li.tab7.current{background: url('../images/tab07_on.png') no-repeat;}

#sub_tabs{display: none; position: fixed; top: 200px; left: 50px; z-index: 999; height: 322px; background: url('../images/sub_menu_bar.png') 18px 0 no-repeat;}
#sub_tabs li{width: 228px; height: 37px; cursor: pointer;}
#sub_tabs li.tab1{background: url('../images/left_menu01.png') no-repeat; margin-top: 28px;}
#sub_tabs li.tab1:hover,
#sub_tabs li.tab1.current{background: url('../images/left_menu01_on.png') no-repeat;}
#sub_tabs li.tab2{background: url('../images/left_menu02.png') no-repeat;}
#sub_tabs li.tab2:hover,
#sub_tabs li.tab2.current{background: url('../images/left_menu02_on.png') no-repeat;}
#sub_tabs li.tab3{background: url('../images/left_menu03.png') no-repeat;}
#sub_tabs li.tab3:hover,
#sub_tabs li.tab3.current{background: url('../images/left_menu03_on.png') no-repeat;}
#sub_tabs li.tab4{background: url('../images/left_menu04.png') no-repeat;}
#sub_tabs li.tab4:hover,
#sub_tabs li.tab4.current{background: url('../images/left_menu04_on.png') no-repeat;}
#sub_tabs li.tab5{background: url('../images/left_menu05.png') no-repeat;}
#sub_tabs li.tab5:hover,
#sub_tabs li.tab5.current{background: url('../images/left_menu05_on.png') no-repeat;}
#sub_tabs li.tab6{background: url('../images/left_menu06.png') no-repeat;}
#sub_tabs li.tab6:hover,
#sub_tabs li.tab6.current{background: url('../images/left_menu06_on.png') no-repeat;}
#sub_tabs li.tab7{background: url('../images/left_menu07.png') no-repeat;}
#sub_tabs li.tab7:hover,
#sub_tabs li.tab7.current{background: url('../images/left_menu07_on.png') no-repeat;}

/*event*/
#event01{height: 2502px; background: url('../images/event01_bg.jpg') center 0 no-repeat;}
#event02{position: relative; height: 2643px; background: url('../images/event02_bg.jpg') center 0 no-repeat;}
#event02 div.coin{position: absolute; top: 910px; left: 50%; margin-left: -475px; width: 930px; height: 295px; background: url('../images/coin.gif') no-repeat;}

#event03{position: relative; height: 1769px; background: url('../images/event03_bg.jpg') center 0 no-repeat;}
#event03 div.img{position: absolute; top: 908px; left: 50%; width: 159px; height: 164px;}
#event03 div.img01{margin-left: -438px; background: url('../images/box01.png') no-repeat;
	animation: jello-horizontal 1.5s infinite both;}
#event03 div.img02{margin-left: 260px; background: url('../images/box02.png') no-repeat;
	animation: jello-horizontal 1.5s infinite 0.2s both;}

#event04{height: 1817px; background: url('../images/event04_bg.jpg') center 0 no-repeat;}
#event05{position: relative; height: 2144px; background: url('../images/event05_bg.jpg') center 0 no-repeat;}
#event05 div.step01{}
#event05 div.step01 p.img{position: absolute; top: 830px; left: 50%; margin-left: -324px; z-index: 3; width: 22px; height: 44px; background: url('../images/img.png') no-repeat;}
#event05 div.step01 p.step_img{position: absolute; top: 830px; left: 50%; margin-left: -528px; width: 446px; height: 436px; background: url('../images/step01.png') no-repeat; transform-origin: center -20px;}
#event05.current div.step01 p.step_img{animation: swing 3s 0.1s both;}
#event05 div.step02{}
#event05 div.step02 p.img{position: absolute; top: 830px; left: 50%; margin-left: 224px; z-index: 3; width: 22px; height: 44px; background: url('../images/img.png') no-repeat;}
#event05 div.step02 p.step_img{position: absolute; top: 830px; left: 50%; margin-left: -86px; width: 655px; height: 436px; background: url('../images/step02.png') no-repeat; transform-origin: center -20px;}
#event05.current div.step02 p.step_img{animation: swing 3s 0.3s both;}

#event06{height: 2640px; background: url('../images/event06_bg.jpg') center 0 no-repeat;}
#event07{height: 3632px; background: url('../images/event07_bg.jpg') center 0 no-repeat;}

p.btn_top{display: none; position: fixed; bottom: 100px; right: 30px; width: 60px; height: 60px; background: url('../images/btn_top.png') no-repeat; cursor: pointer;}