@charset "utf-8";

html{font-size:10px;}
.oh{overflow:hidden;}
.container {width:100%; margin:0 auto; max-width:1000px; position:relative;}
.cf:after{content:''; display: block; clear:both; visibility:hidden; height:0px;}
.eventName {max-width:2560px;margin:0 auto;text-align:center;letter-spacing:-0.5px;line-height:1.5;background:#f6f6f6;}
.eventName .container {max-width:1000px; height:100%; margin:0 auto; position:relative; height:100%}
.eventName .content {padding: 8% 0; text-align: center;}



.con01 {position:relative; height:800px; background:url('images_hk/con01_bg.jpg') center top / cover}
.con02 {position:relative; height:2379px; background:url('images_hk/con02_bg.jpg') center top / cover}
.con03 {position:relative; height:1108px; background:url('images_hk/con03_bg.jpg') center top / cover}
.con04 {position:relative; height:1976px; background:url('images_hk/con04_bg.jpg') center top / cover}
.con05 {position:relative; height:1058px; background:url('images_hk/con05_bg.jpg') center top / cover}
.con06 {position:relative; height:7203px; background:url('images_hk/con06_bg.jpg') center top / cover}
.con07 {position:relative; height:4221px; background:url('images_hk/con07_bg.jpg') center top / cover}

.con01 h2 {position:absolute; top:-9999px; left:-9999px; font-size:0;}

/* float_banner */
.float_banner{position:fixed; right:0; top:150px; width:150px; z-index:1}
.float_btn{position:fixed; right:0; top:150px; display:inline-block; font-size:0; z-index:1}
.float_btn img{width:120px; display:block}
.float_btn a{position:absolute; left:60%; width:50%; height:15%; text-indent:-9999px;}
.float_btn a.link01{top:56%}
.float_btn a.link02{top:73%; left:57%}
/* video */
.con_video {position:relative; padding-top: 9%;}
.video_wrap {position:relative; max-width: 986px; margin:auto}
.video_wrap > div {padding-top:56.25%;}
.video_wrap > div iframe{width:100%; height:100%; position:absolute; left:0; top:0}
/* link */
.link01{position: absolute; width:32%; height:1.5%; left:50%; top:14.7%; transform: translateX(-50%); text-indent:-9999px;}
.link02{position: absolute; width:32%; height:1.5%; left:50%; top:32.4%; transform: translateX(-50%); text-indent:-9999px;}
.link03{position: absolute; width: 87%; height: 2%; left: 50%; bottom: 1.2%; transform: translateX(-50%); text-indent: -9999px;}
.link04{position: absolute; width: 42%; height: 2.5%; left: 50%; top: 22.5%; transform: translateX(-50%); text-indent: -9999px;}


/* gif */
.gif01{position:absolute; left:50%; top:3.8%; transform:translateX(-50%); width:71%;}
.gif02{position:absolute; left:50%; top:65.5%; transform:translateX(-50%); width:72%}



@media screen and (max-width: 1000px){
	html {font-size:8px;}
	
	.eventName .container{width:100%; height:100%; position:absolute; left:0; top:0}
	
	.con01{height:auto; padding:35% 0;}
	.con02{height:auto; padding:100% 0;}
	.con03{height:auto; padding:48% 0;}
	.con04{height:auto; padding:91% 0;}
	.con05{height:auto; padding:49% 0;}
	.con06{height:auto; padding:309% 0;}
	.con07{height:auto; padding:180% 0;}
	
	.float_btn {top:70px}
	
	.con_video {position:relative; padding-top: 9%; width:84%; margin:auto; }

	.gif01{width:62%}
	.gif02{width:66%}
	
}
	

@media screen and (max-width: 768px){
	.float_btn{width:50px; top:80px;}
	.link01{width:20%;}
	.link02{width:20%;}
}