/*
ChosunIlbo
NeuroAssociates
Interactive Contents

Ski Jump
CSS
*/

/* fonts */

.sdGN2_eb
{
	font-family: 'Sandoll GothicNeo3 07 Eb', sans-serif;
	font-weight: 700;
}

.sdGN2_bd
{
	font-family: 'Sandoll GothicNeo3 06 Bd', sans-serif;
	font-weight: 700;
}

@import url('https://fonts.googleapis.com/css?family=Montserrat:500');

@keyframes fadein
{
	0%{
		opacity: 0;
	}

	100%{
		opacity: 1;
	}
}

/* general */

*
{
	box-sizing: border-box;
}

html
{
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	margin: 0;
	font-family: 'Malgun Gothic', sans-serif;
	background-color: black;
}

body
{
	width: 100%;
	height: 100%;
	position: relative;
}

/* navigation & index */
#nav
{
	position: fixed;
	z-index: 100;
	top:0;
	left: 0;
	width: 100%;
	height: 40px;
	background-color: #333;
	padding: 8px 0 0 12px;
}

#nav .articletitle
{
	position: absolute;
	right: 60px;
	top: 10px;
	color: #9f9f9f;
	font-size: 10pt;
}

#nav .dropdown
{
	background: #222;
	width: 40px;
	height: 100%;
	right: 0;
	top: 0;
	position: absolute;
	background-image: url('http://image.chosun.com/interactive/skijump/stack.png');
	background-repeat: no-repeat;
	background-position: center center;
}

.next_page
{
	position: relative;
	bottom: 0;
	height: auto;
	background-color: rgba(0,0,0,0.75);
	color: #fff;
	text-align: center;
	font-size: 22pt;
	display: none;
	opacity: 0;
	padding: 30px;
	line-height: 22pt;
	overflow: auto;
	width: 60%;
	margin: 0 auto;
}

#index
{
	position: fixed;
	top: 40px;
	right: 0;
	z-index: 500;
	background-color: #343434;
/* 	border-radius: 6px; */
}

#index ul
{
	list-style-type: none;
	padding:0;
	margin:0;
}

#index li
{
	font-size: 9pt;
	color: #8c8c8c;
	padding: 15px 30px 15px 20px;
	border-bottom: 1px solid #3d3d3d;
	min-width: 300px;
}

#index li:hover
{
	cursor: pointer;
	background-color: #000;
}

#index li a
{
	color: #8c8c8c;
	cursor: pointer;
}

/* general */

section
{
	background-size: cover;
	background-position: center center;
	height: 100% !important;
	transform: all 1s;

}

.timer
{
	height: 4px;
	width: 0%;
	background-color: rgba(255,255,255,0.5);
	margin-bottom: 0;
	display: none;
	overflow: hidden;
}

.introtitle
{
	position: relative;
	width: 30%;
	padding: 15px;
	color: #fff;
	top: 24%;
	left: 8%;
}

.introtitle .title
{
	border-top: 6px solid #fff;
	border-bottom: 6px solid #fff;
	margin: 0 0 20px 0;
	padding: 20px 0;
	font-size: 44pt;
	font-weight: 700;
}

.introtitle .body
{
	font-size: 14pt;
	line-height: 161%;
	font-weight: 100;
	word-break: keep-all;
}

.sectiontitle
{
	height: 100%;
	background-color: rgba(255,255,255,0.8);
	color: #333;
	width: 30%;
	margin-left: 10%;
	padding-top: 200px;
/* 	opacity: 0; */
}

.sectiontitle h1
{
	width: 80%;
	padding: 0;
	margin: 0 auto;
	font-family: 'montserrat', sans-serif;
	font-size: 44pt;
	border-bottom: 2px solid #333;
}

.sectiontitle h1
{
	width: 80%;
	padding: 0 0 15px;
	margin: 0 auto;
}

.sectiontitle h2
{
	width: 80%;
	padding: 0;
	margin: 30px auto;
	font-size: 32pt;
	word-break: keep-all;
	line-height: 140%;
	font-weight: 600;
}

.sectionbody
{
/* 	display: inline-block; */
	width: 60%;
	padding: 30px 0;
	border-top: 6px solid #fff;
	border-bottom: 6px solid #fff;
	color: #fff;
	font-size: 40pt;
	font-weight: 700;
	line-height: 140%;
	position: relative;
	left: 10%;
	top: 35%;
	opacity: 0;
}

.sectionbody p
{
	margin: 0;
	padding: 0;
	word-break: keep-all;
}

.sectionbody p.caption
{
	font-size: 12pt;
	margin-top: 30px;
}

#seq_text p
{
	position: absolute;
	top: 25%;
	left: 55%;
	color: #fff;
	font-size: 18pt;
	line-height: 160%;
}

/* animation */

.fadein
{
/* 	transition: 0.6s ease-in-out; */
	animation: fadein 3s ease-in-out;
	animation-fill-mode: forwards;
}

.fadein-left
{
	transition: 0.6s ease-out;
	animation: fadein 3s ease-out;
	transform: translate(50px, 0);
	animation-fill-mode: forwards;
}

.fadein-bottom
{
	transition: 0.6s ease-out;
	animation: fadein 3s ease-out;
	transform: translate(0, -50px);
	animation-fill-mode: forwards;
}

.fixed
{
	position:fixed;
}

.movex
{
	transition: translate(50px, 0);
}

/* background images */
#s01
{
	background-image: url('http://image.chosun.com/interactive/skijump/sj_bg01.jpg');
	position: relative;
}

#s02
{
	background-image: url('http://image.chosun.com/interactive/skijump/sj_bg02.jpg');
	position: relative;
/* 	opacity: 0; */
}

#s03
{
	background-image: url('http://image.chosun.com/interactive/skijump/sj_bg03.jpg');
	position: relative;
/* 	opacity: 0; */
}

#s04
{
	background-image: url('http://image.chosun.com/interactive/skijump/sj_bg04.jpg');
	position: relative;
/* 	opacity: 0; */
}

#s05
{
	background-image: url('http://image.chosun.com/interactive/skijump/sj_bg05.jpg');
	position: relative;
/* 	opacity: 0; */
}

#s06
{
	background-image: url('http://image.chosun.com/interactive/skijump/sj_bg06.jpg');
	position: relative;
/* 	opacity: 0; */
}

#s07
{
	background-image: url('http://image.chosun.com/interactive/skijump/sj_bg07.jpg');
	position: relative;
/* 	opacity: 0; */
}

#s08
{
	background-image: url('http://image.chosun.com/interactive/skijump/sj_bg08.jpg');
	position: relative;
/* 	opacity: 0; */
}

#s09
{
	background-image: url('http://image.chosun.com/interactive/skijump/sj_bg09.jpg');
	position: relative;
/* 	opacity: 0; */
}

#s10
{
	background-image: url('http://image.chosun.com/interactive/skijump/sj_bg10.jpg');
	position: relative;
/* 	opacity: 0; */
}

#s11
{
	background-image: url('http://image.chosun.com/interactive/skijump/sj_bg11.jpg');
	position: relative;
/* 	opacity: 0; */
}

#s12
{
	background-image: url('http://image.chosun.com/interactive/skijump/sj_bg12.jpg');
	position: relative;
/* 	opacity: 0; */
}

#s13
{
	background-image: url('http://image.chosun.com/interactive/skijump/sj_bg13.jpg');
	position: relative;
/* 	opacity: 0; */
}

#s14, #s15
{
	background-image: url('http://image.chosun.com/interactive/skijump/sj_bg14.jpg');
	position: relative;
/* 	opacity: 0; */
}

#s16
{
	background-image: url('http://image.chosun.com/interactive/skijump/sj_bg15.jpg');
	position: relative;
/* 	opacity: 0; */
}

#s15_text1 .caption
{
	font-size: 14pt; margin-top: 50px;
}

.dyn
{
	background-image: url('http://image.chosun.com/interactive/skijump/dyn.jpg');
	background-size: cover;
	background-position: center center;
}

#dyn1
{
/* 	margin-top: 15px; */
}

#dyn1_obj1
{
	position: absolute;
	display: inline;
}

#dyn1_obj2
{
	position: absolute;
	display: inline;
}

#dyn1_cap1
{
	position: absolute;
	display: inline-block;
	font-weight: 500;
	color: #095b7b;
}

#dyn2_obj1
{
	position: absolute;
	display: inline;
}

#dyn2_obj2
{
	position: absolute;
	display: inline;
}

#dyn2_obj3
{
	position: absolute;
	display: inline;
}

#dyn2_txt1
{
	position: absolute;
	display: inline;
}

#dyn2_txt2
{
	position: absolute;
	display: inline;
}

#dyn2_txt3
{
	position: absolute;
	display: inline;
}

.dyn1_txt
{
	position: relative;
	color: #095b7b;
	width: 50%;
}

.dyn_txt .data
{
	margin:0;
	padding:0;
	font-size: 90pt;
	padding-bottom: 15px;
	border-bottom: 5px solid;
	width: 60%;
	display: inline;
}

.dyn_txt .list
{
	font-size: 24pt;
	font-weight: 600;
	margin-bottom: 40px;
}

.dyn_txt .list.caption
{
	font-size: 16pt;
	line-height: 160%;
}

.vr_video
{
	width: 100%;
	height: 100%;
}

#vr_video_m
{
	display: none;
}

#vr_video_notice
{
	position: absolute;
	left:0;
	top:40px;
	width: 100%;
	height: 100%;
	background-color: #000;
}

#vr_video_notice p
{
	position: relative;
	top: 45%;
	color: #fff;
	font-size: 20pt;
}
#vr_video_m, #vr_video{overflow:inherit !important;}
#vr_video_in{top:40px; position:absolute;}
.video_in{width:100%; height:100%; /*position:absolute; left:0; top:0;*/}

/* under 1024px */
.youtube_vr{display:none;}
@media screen and (max-width: 1024px){
	.youtube_vr{display:block;}
	#vr_video_m, #vr_video
	{
		position: relative;
		height: 0 !important;
		padding-top:56.25%;
	}
	#vr_video_in{top:0; display:none;}
	.video_in{position:absolute;left:0;top:0;right:0;bottom:0; width:100%; height:100%;}

	/* index */
	#nav{
		height: 120px;
	}

	#nav .dropdown
	{
		width: 120px;
		background-size: 30%;
	}

	#index
	{
		top: 120px;
		width: 100%;
	}

	#index li
	{
		font-size: 24pt;
		height: 90px;
		line-height: 48pt;
	}

	#nav .articletitle
	{
		display: none;
	}

	#chosun_logo
	{
		position: relative;
		width: 150px;
		height: 40px;
		top: 30px;
		left: 15px;
	}

	/* index ends */

	div.scrollmagic-pin-spacer
	{
		height: 114% !important;
	}

	section
	{
		height: 100% !important;
	}

	#introtitle
	{
		width: 80%;
		margin: 0 auto;
		left: 0;
		right: 0;
	}

	#introtitle .title
	{
		font-size: 60pt;
	}

	#introtitle .body
	{
		font-size: 30pt;
	}

	.sectiontitle
	{
		width: 100%;
		margin: 0 auto !important;
		height: auto;
		padding-bottom: 150px;
		top: 20%;
		position: relative;
		left: 0;
		right: 0;
	}

	.sectiontitle h2
	{
		font-size: 40pt;
	}

	.sectionbody
	{
		background-color: rgba(0,0,0,0.8);
		padding: 60px;
		border: 0;
	}

	#s05_text, #s06_text, #s12_text1, #s13_text1, #s15_text1
	{
		width: 80% !important;
		margin: 0 auto 0 !important;
		left:0; right: 0;
		top: 55% !important;
	}

	#s11_text1
	{
		width: 80% !important;
		margin: 0 auto 0 !important;
		left:0; right: 0;
		top: 25% !important;
	}

	#s05_text
	{
		margin-top: 10% !important;
	}

	#s05_text p, #s06_text p
	{
		font-size: 32pt;
	}

	#s08_text1, #s09_text1
	{
		top: 350px;
		width: 70% !important;
	}

	#s08_text1 p
	{
		font-size: 32pt !important;
	}

	#s08_text1 .caption
	{
		font-size: inherit !important;
	}

	#s09_text1_body
	{
		font-size: 32pt !important;
	}

	#s11_text1 p{
		font-size: 36pt !important;
	}

	#s12_text1 p{
		font-size: 36pt !important;
	}

	#s13_text1 p{
		font-size: 36pt !important;
	}

	#s15_text1 p{
		font-size: 36pt !important;
	}

	#s15_text1 .caption
	{
		font-size: 26pt; margin-top: 50px;
	}

	#s16_text1 p{
		font-size: 36pt !important;
	}

	#s03_image1, #s03_image2, #s03_image3, #s03_image4{
		background-position: center center;
	}

	#vr_video_m{
		height:auto !important;
	}

	.vr_video
	{
		/* display: none; */
	}

	#vr_video #vr_video_notice
	{
		position: relative;
		padding-top:56.25%;
	}

	#vr_video #vr_video_notice iframe
	{
		position: absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
		width:100%;
		height:100%;
	}

	#vr_video_m
	{
		display: block;
	}

	#vr_video_m_wrapper
	{
		position: relative;
		top: 30%;
	}

/*
	#s05
	{
		background-position: center center !important;
	}

	#s06
	{
		background-position: center center !important;
	}

	#s07
	{
		background-position: center center !important;
	}

	#s09
	{
		background-position: center center !important;
	}

*/
	#s11
	{
/* 		background-position: -1400px center !important; */
	}

	#s12
	{
/* 		background-position: -700px center !important; */
	}
/*

	#s13
	{
		background-position: center center !important;
	}

	#s14, #s15
	{
		background-position: center center !important;
	}

*/
	#s16_text1
	{
		width: 70%;
	}

	video
	{
		position: relative;
/* 		top: 30%; */
		height: auto;
	}
	#video0_wrapper, #video1_wrapper, #video2_wrapper, #vr_video_m
	{
		height: auto !important;
	}

	#vr_video
	{
		/* display: none; */
	}

	#vr_video_m
	{
		display: block;
	}

	#vr_video_m_wrapper
	{
		position: relative;
		top: 30%;
	}

	.vjs-big-play-button
	{
		margin: 0 auto !important;
		top: 45% !important;
		left: 48% !important;
	}

	#dyn1_obj1
	{
		position: absolute;
/* 		display: inherit; */
	}

	#dyn1_obj2
	{
		position: absolute;
/* 		display: inherit; */
	}

	.dyn_txt .list.caption
	{
		font-size: 20pt;
		line-height: 160%;
	}

	.dyn
	{
		background-image: url('http://image.chosun.com/interactive/skijump/dyn_m.jpg');
		background-position: center top;
	}


/*
	.video-js[tabindex="-1"]
	{
		width:100%;
		height: 100%;
	}

	.video-js video
	{
		width: 100% !important;
		height: 100% !important;
	}
*/

}