@charset "utf-8";

/* structrue
==========================================*/
#contents {
	min-width: 1100px;
}

#mainContent {
	width: 1100px;
}
.animeready #mainContent {
	opacity: 0;
}

.wrap > div {
	position: relative;
}

.wrap img {
	position: absolute;
}

/* b1
==========================================*/
.b1 {
	height: 550px;
	background: #fe9a2c url(/sports/vaam/han/vaamdiet/images/b1_bg.png);
	z-index: 2;
}

.b1 img:nth-of-type(1) { top: 8px; left: 113px; }
.b1 img:nth-of-type(2) { top: 130px; left: 512px; }
.b1 img:nth-of-type(3) { top: 392px; left: 798px; }

.scene0 .b1 img { opacity: 0; }
.scene1 .b1 img { opacity: 1; }
.scene1 .b1 img:nth-of-type(1) { transition: all 1.5s .4s; }
.scene1 .b1 img:nth-of-type(2) { transition: all 1.5s .8s; }
.scene1 .b1 img:nth-of-type(3) { transition: all 1.5s 1.2s; }

.b2 {
	height: 687px;
	background: #fff5f2;
}

.b2 img:nth-of-type(1) { top: 0; left: 0; }
.b2 img:nth-of-type(2) { top: 171px; left: 77px; }
.b2 img:nth-of-type(3) { top: 442px; left: 185px; }
.b2 img:nth-of-type(4) { top: 444px; left: 589px; }
.b2 img:nth-of-type(5) { top: 173px; left: 770px; }

.scene0 .b2 img:nth-of-type(n+2) {
	opacity: 0;
	transform: scale(.1);
}
.scene2 .b2 img:nth-of-type(n+2) {
	opacity: 1;
	transform: scale(1);
}
.scene2 .b2 img:nth-of-type(2) { transition: all .5s 0s; }
.scene2 .b2 img:nth-of-type(3) { transition: all .5s .3s; }
.scene2 .b2 img:nth-of-type(4) { transition: all .5s .6s; }
.scene2 .b2 img:nth-of-type(5) { transition: all .5s .9s; }

.b3 {
	height: 1305px;
	background: #ffe8d5 url(/sports/vaam/han/vaamdiet/images/b3_bg.png) left top;
}

.b3 p {
	width: 847px;
	position: absolute;
	top: 59px;
	left: 231px;
}

.b3 p img {
	float: left;
	position: static;
}

.scene0 .b3 p img {
	opacity: 0;
	transform: scale(.1);
}
.scene3 .b3 p img:nth-of-type(1)  { animation: b3P .4s linear  .4s forwards; }
.scene3 .b3 p img:nth-of-type(2)  { animation: b3P .4s linear 1.6s forwards; }
.scene3 .b3 p img:nth-of-type(3)  { animation: b3P .4s linear  .7s forwards;}
.scene3 .b3 p img:nth-of-type(4)  { animation: b3P .4s linear  .2s forwards; }
.scene3 .b3 p img:nth-of-type(5)  { animation: b3P .4s linear   1s forwards; }
.scene3 .b3 p img:nth-of-type(6)  { animation: b3P .4s linear 1.2s forwards; }
.scene3 .b3 p img:nth-of-type(7)  { animation: b3P .4s linear  .5s forwards; }
.scene3 .b3 p img:nth-of-type(8)  { animation: b3P .4s linear 1.5s forwards; }
.scene3 .b3 p img:nth-of-type(9)  { animation: b3P .4s linear  .8s forwards; }
.scene3 .b3 p img:nth-of-type(10) { animation: b3P .4s linear 1.7s forwards; }

@keyframes b3P {
	  0% { opacity: 0; transform: scale(.1); }
	 80% { opacity: 1; transform: scale(2.5); }
	 99% { opacity: 1; transform: scale(1); }
	100% { opacity: 1; transform: scale(1); }
}

.b3 > img:nth-of-type(1) { top: 151px; left: 497px; }
.b3 > img:nth-of-type(2) { top: 222px; left: 75px; }

.scene0 .b3 > img:nth-of-type(1) {
	opacity: 0;
}
.scene3 .b3 > img:nth-of-type(1) {
	opacity: 1;
	transition: all .8s 2s;
}

.b4 {
	height: 1800px;
	background: #fff1ec url(/sports/vaam/han/vaamdiet/images/b4_bg.png) left top;
}
.b4:before {
	content: url(/sports/vaam/han/vaamdiet/images/b4_0.png);
	position: absolute;
	top: -42px;
	left: 470px;
}

.b4 > img:nth-of-type(1) { top: 65px; left: 322px; }
.b4 > img:nth-of-type(2) { top: 207px; left: 303px; }
.b4 > img:nth-of-type(3) { top: 620px; left: 75px; }
.b4 > img:nth-of-type(4) { top: 1648px; left: 95px; }

.b4 div {
	width: 951px;
	height: 665px;
	position: absolute;
	top: 953px;
	left: 75px;
}

.b4 div img:nth-of-type(1) { top: 0; left: 0; }
.b4 div img:nth-of-type(2) { top: -103px; left: 4px; }
.b4 div img:nth-of-type(3) { top: 17px; left: 94px; }
.b4 div img:nth-of-type(4) { top: 226px; left: 399px; }
.b4 div img:nth-of-type(5) { top: -118px; left: 445px; }

.scene0 .b4 div img:nth-of-type(n+2) { opacity: 0; }
.scene0 .b4 div img:nth-of-type(5) { transform: translate(300px, -150px); }
.scene4 .b4 div img:nth-of-type(2) { opacity: 1; transition: all .8s 0s; }
.scene4 .b4 div img:nth-of-type(3) { opacity: 1; transition: all .8s .4s; }
.scene4 .b4 div img:nth-of-type(4) { opacity: 1; transition: all .3s .8s; }
.scene4 .b4 div img:nth-of-type(5) { opacity: 1; transform: translate(0,0); transition: all .3s 1.2s; }

.b5 {
	height: 3266px;
	background: #fe942f url(/sports/vaam/han/vaamdiet/images/b5_bg.png);
}
.b5:before {
	content: url(/sports/vaam/han/vaamdiet/images/b5_0.png);
	position: absolute;
	top: -42px;
	left: 470px;
}

.b5 > img {
	top: 40px;
	left: 229px;
}

.b5 > div {
	width: 950px;
	position: absolute;
	top: 441px;
	left: 74px;
}

.b5 div > img {
	position: static;
}

.b5 div > div {
	position: absolute;
}
.b5 .p1 {
	width: 721px;
	top: 274px;
	left: 115px;
}
.b5 .p2 {
	width: 785px;
	height: 120px;
	top: 1329px;
	left: 83px;
}

.b5 div > div img {
	float: left;
}
.b5 .p1 img:nth-of-type(1) { margin-right: 25px; }
.b5 .p2 img:nth-of-type(1) { margin-left: 40px;}
.b5 .p2 img:nth-of-type(4) { margin-left: 85px;; margin-top:27px; }


.scene0 .b5 .p1 img,
.scene0 .b5 .p2 img { opacity: 0; }
.scene5 .b5 .p1 img { opacity: 1; }
.scene6 .b5 .p2 img { opacity: 1; }
.scene5 .b5 .p1 img:nth-of-type(1)  { transition: all 1.1s 1s; }
.scene5 .b5 .p1 img:nth-of-type(2)  { transition: all .5s .1s; }
.scene5 .b5 .p1 img:nth-of-type(3)  { transition: all .5s .2s; }
.scene5 .b5 .p1 img:nth-of-type(4)  { transition: all .5s .3s; }
.scene5 .b5 .p1 img:nth-of-type(5)  { transition: all .5s .4s; }
.scene5 .b5 .p1 img:nth-of-type(6)  { transition: all .5s .5s; }
.scene5 .b5 .p1 img:nth-of-type(7)  { transition: all .5s .6s; }
.scene5 .b5 .p1 img:nth-of-type(8)  { transition: all .5s .7s; }
.scene5 .b5 .p1 img:nth-of-type(9)  { transition: all .5s .8s; }
.scene5 .b5 .p1 img:nth-of-type(10) { transition: all .5s .9s; }
.scene5 .b5 .p1 img:nth-of-type(11) { transition: all .5s  1s; }

.scene6 .b5 .p2 img:nth-of-type(1)  { transition: all .5s  0s; }
.scene6 .b5 .p2 img:nth-of-type(2)  { transition: all .5s .3s; }
.scene6 .b5 .p2 img:nth-of-type(3)  { transition: all .5s .6s; }
.scene6 .b5 .p2 img:nth-of-type(4)  { transition: all .5s .9s;}


.b5 img[src$="b5_5.png"] {
	position: absolute;
	top: 2220px;
	left: 632px;
}

.scene0 .b5 img[src$="b5_5.png"] {
	opacity: 0;
	transform: scale(.01);
}
.scene7 .b5 img[src$="b5_5.png"] {
	opacity: 1;
	transform: scale(1);
	transition: all .6s 0s;
}

.b6 {
	height: 1233px;
	background: #fea742 url(/sports/vaam/han/vaamdiet/images/b6_bg.png);
}

.b6:before {
	content: url(/sports/vaam/han/vaamdiet/images/b6_0.png);
	position: absolute;
	top: -42px;
	left: 470px;
}

.b7 {
	height: 863px;
	background: #fe942f url(/sports/vaam/han/vaamdiet/images/b5_bg.png);
}

.b7 > img:nth-of-type(1) { top: 51px; left: 335px; }
.b7 > img:nth-of-type(2) { top: 153px; left: 109px; }

.b7 div {
	width: 882px;
	height: 6277px;
	position: absolute;
	top: 153px;
	left: 109px;
}

.scene0 .b7 div {
	animation: b7Div 1.5s linear 0s infinite;
}
@keyframes b7Div {
	  0% { transform: translate(   0,0); }
	  2% { transform: translate(-3px,0); }
	  6% { transform: translate( 3px,0); }
	 10% { transform: translate(-3px,0); }
	 16% { transform: translate( 3px,0); }
	 20% { transform: translate(-3px,0); }
	 26% { transform: translate( 3px,0); }
	 29% { transform: translate(   0,0); }
	100% { transform: translate(   0,0); }
}

.b7 div img:nth-of-type(1) { top: 249px; left: 157px; }
.b7 div img:nth-of-type(2) { top: 250px; left: 174px; }
.b7 div img:nth-of-type(3) { top: 240px; left: 750px; }
.b7 div img:nth-of-type(4) { top: 245px; left: 790px; }
.b7 div img:nth-of-type(5) { top: 439px; left: 334px; }
.b7 div img:nth-of-type(6) { top: 444px; left: 374px; }
.b7 div img:nth-of-type(7) { top: 439px; left: 424px; }
.b7 div img:nth-of-type(8) { top: 442px; left: 446px; }

.b8 {
    margin: 20px auto;
    height: 120px;
    width: 688px;
}



/* debug
==========================================*/
.debugBox {
	display: none;
}

.debugBox > div {
	height: 0;
	width: 100%;
	position: absolute;
	left: 0;
}
.debugBox .posi { z-index: 100; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.debugBox .fire { z-index: 101; border-bottom: 1px solid rgba(255, 0, 0, .5); }

.debugBox > div span {
	color: #333;
	font-size: 10px;
	line-height: 1;
	font-family: monospace;
	position: absolute;
	left: 0;
	bottom: -6px;
	display: inline-block;
	height: 12px;
	padding: 0 5px;
}
.debugBox .posi span { background-color: rgba(0, 0, 0, .1); }
.debugBox .fire span { background-color: rgba(255, 0, 0, 1); }

.scene11 {
  position: relative;
  padding-top: 0px;
}

.scene11 .plus_btn_list {
  position: absolute;
  left: 0;
  top: 0;

}
.scene11 .plus_btn_list .btn1 {
  left: 194px;
  top: 672px;
z-index:100;
text-indent:-9999px;
}
.scene11 .plus_btn_list .btn2 {
  left: 649px;
  top: 672px;
z-index:100;
text-indent:-9999px;
}
.scene11 .popup_list {
  z-index: 1;
}
.scene11 .popup_list .popup1 {
  left: 224px;
  top: 210px;
}
.scene11 .popup_list .popup2 {
  left: 224px;
  top: 210px;
}
.scene11 .popup_list .btn_close {
  right: -640px;
  top: 0px;
}

.scene12 {
  position: relative;
  padding-top: 0px;
}

.scene12 .plus_btn_list {
  position: absolute;
  left: 0;
  top: 0;
}
.scene12 .plus_btn_list .btn1 {
  left: 194px;
  top: 1138px;

text-indent:-9999px;
}
.scene12 .plus_btn_list .btn2 {
  left: 649px;
  top: 1138px;

text-indent:-9999px;
}
.scene12 .popup_list {
  z-index: 1;
}
.scene12 .popup_list .popup1 {
	/*
  left: 212px;
  */
  left: 224px;
  top: 760px;
  z-index:500;
}
.scene12 .popup_list .popup2 {
  left: 224px;
  top: 760px;
  z-index:500;
}
.scene12 .popup_list .btn_close {
  right: -640px;
  top: 0px;
}

.plus_btn {
  position: absolute;
  background: url('../images/btn_plus.png') 0 0 no-repeat;
  width: 352px;
  height: 48px;
  display: block;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-indent:-9999px;
  text-align: left;
}
.plus_btn:hover {
  opacity: 0.75;
}

.btn_close {
  position: absolute;
  background: url('../images/btn_close.png') 0 0 no-repeat;
  width: 55px;
  height: 64px;
  display: block;
  cursor: pointer;
}
.btn_close:hover {
  opacity: 0.75;
}

.popup_list {
  position: absolute;
  left: 0;
  top: 0;
}

.popup_list .popup {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

.menuContent01{
width:870px;
height:570px;
overflow:hidden;
position:absolute;
left:115px;
top:155px;
}

.menuContent01 .menuCol01L{
width:415px;
height:570px;
float:left;
}

.menuContent01 .menuCol01R{
width:415px;
height:570px;
float:right;
}

.menuContent02{
width:870px;
height:426px;
overflow:hidden;
position:absolute;
left:115px;
top:766px;
}

.menuContent02 .menuCol02L{
width:415px;
height:426px;
float:left;
}

.menuContent02 .menuCol02R{
width:415px;
height:426px;
float:right;
}

/*	headArea
------------------------------------------------*/
#headArea{
width:1100px;
height:50px;
margin:0 auto;
}
#headArea #logo{
float:left;
}
#headArea #topInbound{
padding-top:10px;
float:right;
padding-right:16px;
}
#headArea #Language{
padding-top:10px;
float:right;
}
#headArea #Language ul li{
width:75px;
height:30px;
display:inline-block;
}
#headArea #Language ul li a:hover img{
opacity:1;
}

/*	footer
------------------------------------------------*/
body div#footer div#footer-inner{
width:1100px;
}