/*
color palette
1. rgb(161,70,39) / #a14627: wine red
*/

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

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

	100%{
		opacity: 1;
	}
}

/* general */

*
{
	box-sizing: border-box;
}

div, p, span, h1, h2, h3, h4, h5 {
	word-break: keep-all;
}

html
{
	height: 100%;
	min-width: 100%;
/* 	overflow: hidden; */
	margin: 0;
	padding:0;
	font-family: sans-serif;
	background-color: black;
}

body
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
}

#nav
{
	position: fixed;
	z-index: 100;
	top:0;
	width: 100%;
	height: 40px;
	background-color: #333;
}

section
{
	background-size: cover;
	background-position: center center;
	height: 100%;
	overflow: auto;
}

video
{
	width: 100%;
}

#intro_movie{
	position: relative !important;
	overflow:hidden;
}

#introimage
{
	/* background-size: cover;
	background-image: url('../images/intro/0.jpg'); */
	position: relative;
	overflow: hidden;
}

#sequence_intro
{
	display: none; color: #fff; text-align: center; width: 70%; margin: 30% auto 0; font-size: 30pt; line-height: 150%;
}

/*
---2017.12.11---
*/
#s01{position:relative;}
#sequence_intro2_wrap{width:100%; height:100%; position:absolute; left:0; top:0; background:#000;}
#sequence_intro2
{
	color: #fff; text-align: center; width: 70%; margin: 30% auto 0; font-size: 30pt; line-height: 150%; background:#000;
}


#intro_wrapper
{
	width: 100%;
	height: 100%;
	margin: 0 auto 0;
	color: #fff;
	overflow: hidden;
/* 	background-color: rgba(161,70,39,0.5); */
	background-color: rgba(255,141,0,0.2);
	padding: 0 50px;
/* 	animation: fadein 1.5s ease-out; */
}

#introtitle1
{
/*
/* 	float: left; */
margin-top: 20%;
font-size: 60pt;
line-height: 130%;
text-align: center;
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 10px;
text-shadow: 0px 4px 20px rgba(0,0,0,0.3);
*/
}

#introtitle2
{
	/* 	float: right; */
	text-align: center;
	font-size: 35pt;
	font-weight: 100;
	margin-top: 50px;
	letter-spacing: 0.15em;
	text-shadow: 0px 4px 20px rgba(0,0,0,0.3);
}

#introtitle2:after
{
	clear:both;
}

.section_box
{
	position: relative;
/* 	background-color: rgba(161,70,39, 0.5); */
	background-color: rgba(255,153,51,0.7);
	color: #fff;
	padding: 30px 50px;
}

.section_number
{
	padding:0 0 25px 0;
	margin: 0;
	font-family: 'montserrat', sans-serif;
	font-size: 33pt;
	border-bottom: 2px solid;
	text-shadow: 0px 2px 15px rgba(0,0,0,0.3);
}

.section_body
{
	font-size: 20pt;
	line-height: 160%;
	word-break: keep-all;
	text-shadow: 0px 2px 15px rgba(0,0,0,0.3);
}

.section_box.bg_blue
{
	background-color: rgba(32,178,170, 0.8);
}

.bodyhead
{
	font-weight: 700;
	font-size: 24pt;
	display: block;
	margin-bottom: 20px;
}

#s05_img1
{
	position: absolute;
	top: 15%;
	left: 20%;
}

#s05_img2
{
	position: absolute;
	top: 30%;
	left: 10%;
}

#outro_wrapper
{
	width: 80%;
	border-top: 8px solid;
	border-bottom: 8px solid;
	margin: 15% auto 0;
	color: #fff;
	font-size: 40pt;
	font-weight: 700;
	line-height: 150%;
	overflow: auto;
/* 	background-color: rgba(161,70,39,0.5); */
	padding: 0 25px;
/* 	animation: fadein 2s ease-out; */
	text-align: center;
}

.spacer
{
	display: block;
	height: 15px;
}

/* 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/cross/s01_bg.jpg');
}

#s02
{
	background-image: url('http://image.chosun.com/interactive/cross/s02_bg.jpg');
}

#s03
{
	background-image: url('http://image.chosun.com/interactive/cross/s03_bg.jpg');
}

#s04
{
	background-image: url('http://image.chosun.com/interactive/cross/s04_bg.jpg');
}

#s05
{
	background-color: rgb(223,112,74);
	position: relative;
}

#s06
{
	background-image: url('http://image.chosun.com/interactive/cross/s06_bg.jpg');
}

#s07
{
	background-image: url('http://image.chosun.com/interactive/cross/s07_bg.jpg');
}

#s08
{
	background-image: url('http://image.chosun.com/interactive/cross/s08_bg.jpg');
}

#s09
{
	background-image: url('http://image.chosun.com/interactive/cross/s09_bg.jpg');
}

#s10
{
	background-image: url('http://image.chosun.com/interactive/cross/s10_bg5.jpg');
}

#s11
{
	background-image: url('http://image.chosun.com/interactive/cross/s11_bg.jpg');
}

#s12
{
	background-image: url('http://image.chosun.com/interactive/cross/s12_bg.jpg');
}

#s13
{
	background-image: url('http://image.chosun.com/interactive/cross/s13_bg.jpg');
}

#s14
{
	background-image: url('http://image.chosun.com/interactive/cross/s14_bg.jpg');
}

#s15
{
	background-image: url('http://image.chosun.com/interactive/cross/s15_bg.jpg');
}

#s16
{
	background-image: url('http://image.chosun.com/interactive/cross/s16_bg.jpg');
}

#s17
{
	background-image: url('http://image.chosun.com/interactive/cross/s17_bg.jpg');
}

#s18
{
	background-image: url('http://image.chosun.com/interactive/cross/s18_bg.jpg');
}

#s19
{
	background-image: url('http://image.chosun.com/interactive/cross/s19_bg.jpg');
}

/* Do you know? */

.dyn
{
	background-image: url('http://image.chosun.com/interactive/cross/dyn_bg.jpg');
	position: relative;
}

.dyn_txt
{
	width: auto;
	position: absolute;
}

.dyn_txt, .dyn_txt p
{
	color: #531e0b;
	margin:0;
}

.dyn_txt .data
{
	font-weight: 700;
	border-bottom: 4px solid;
	padding-bottom: 5px;
	margin-bottom: 15px;
}

.dyn_txt .desc
{
	font-weight: 700;
	font-size: 26pt;
}

/* 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/cross/stack.png');
	background-repeat: no-repeat;
	background-position: center center;
}

#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;
}

.caption
{
	font-size: 16pt;
	margin-top: 15px !important;
	line-height: 140%;
}

/* iphone 6, 7 */

@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait)
{
	/* 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;
	}

	.spacer
	{
		height: 10px !important;
	}

	#intro_wrapper
	{
		margin-top: 0;
	}

	.section_box
	{
		margin: 0 auto;
		left: 0 !important;
		right: 0 !important;
		width: 90% !important;
		max-width: 100% !important;
	}

	.section_number
	{
		font-size: 60pt;
	}

	.section_body
	{
		font-size: 36pt;
	}

	.bodyhead
	{
		font-size: 40pt;
	}

	#s01
	{
		background-image: url('http://image.chosun.com/interactive/cross/s01_1024_bg.jpg');
	}

	#s02
	{
		background-position: -300px center !important;
	}

	#s19
	{
		background-image: url('http://image.chosun.com/interactive/cross/s01_1024_bg_2.jpg');
	}

	#s03_box1
	{
		margin-top: 30% !important;
	}

	#s04_box1
	{
		margin: 10% auto !important;
/* 		top: 10%; */
	}

	#s05_box1
	{
		margin: 45% auto !important;
/* 		top: 25%; */
	}

	#s05_img1
	{
		top: 5%;
		left: 40%;
	}

	#s05_img2
	{
		top: 13%;
		left: 22%;
	}

	#s06
	{
		background-position: -100px center;
	}

	#s07
	{
		background-position: 0px center;
	}

	#s07_box1
	{
		margin: 30% auto !important;
/* 		top: 15%; */
	}

	#s08_box1
	{
		margin: 15% auto !important;
/* 		top: 15%; */
	}

	#s09
	{
		background-position: -1200px center;
	}

	#s09_box1
	{
		margin: 500px auto !important;
	}

	#s10
	{
		background-size: 350%;
		background-repeat: no-repeat;
	}

	#s10.larger
	{
		transition: all 2s;
		background-size: auto 200%;
	}

	#s10_box1
	{
		margin: 15% auto !important;
	}

	#s11_box1
	{
		margin: 35% auto !important;
	}

	#s12_box1
	{
		margin: 25% auto !important;
	}

	#s13_box1
	{
		margin: 35% auto !important;
	}

	#s14_box1
	{
		margin: 25% auto !important;
	}

	#s15
	{
		background-position: -1200px center !important;
	}

	#s15_box1
	{
		margin: 20% auto !important;
	}

	#s16
	{
		background-image:url('http://image.chosun.com/interactive/cross/s16_1024_bg.jpg');
	}

	#s16_box1
	{
/* 		margin: 10% auto !important; */
/* 		top: 10%; */
	}

	#s17_box1
	{
		margin: 10% auto !important;
/* 		top: 20%; */
	}

	#s18
	{
		background-position: -1300px center !important;
	}

	#s18_box1
	{
		margin: 35% auto !important;
/* 		top: 35%; */
	}

	#outro_wrapper
	{
		margin: 250px auto !important;
	}

	section
	{
/* 		height: 100% !important; */
	}

	video
	{
		position: relative;
/* 		top: 30%; */
	}

	.dyn
	{
		background-image: url('http://image.chosun.com/interactive/cross/dyn_bg_m.jpg');
	}
}

/* galaxy S6 */
@media screen
  and (device-width: 360px)
  and (-webkit-min-device-pixel-ratio : 4)
  and (-webkit-device-pixel-ratio : 4)
  and (orientation: portrait)
{

	/* 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 */

	section
	{
		height: 100%;
		overflow: hidden;
	}

	.bodyhead
	{
		font-size: 14pt;
	}

	.section_box
	{
		width: 80% !important;
		margin: 20% auto !important;
		left: 0 !important;
		top: 0 !important;
		max-width: inherit !important;
		max-height: inherit !important;
	}

	.section_number
	{
		font-size: 60pt;
	}

	.section_body
	{
		font-size: 32pt;
		line-height: 180%;
	}

	.bodyhead
	{
		font-size: 40pt;
	}

	video
	{
/* 		margin-top: 50%; */
	}

	.spacer
	{
		height: 25px !important;
	}

	#s03_box1
	{
		margin-top: 30% !important;
	}

	#s05_img1
	{
		top: 5%;
		left: 40%;
	}

	#s05_img2
	{
		top: 13%;
		left: 22%;
	}

	#s05_box1
	{
		margin: 55% auto !important;
/* 		top: 5% !important; */
	}

	#s06
	{
		background-position-x: -100px;
	}

	#s07
	{
		background-position-x: -100px;
	}

	#s07_box1
	{
		margin-top: 30% !important;
	}

	#s09_box1
	{
/* 		top: 20%; */
		margin-top: 50% !important;
	}

	#s10
	{
		background-size: 350%;
		background-repeat: no-repeat;
	}

	#s11_box1
	{
		margin: 35% auto !important;
	}

	#s12_box1
	{
		top: 20% !important;
	}

	#s13_box1
	{
		margin: 35% auto !important;
	}

	#s15
	{
		background-position-x: -1200px;
	}

	#s16
	{
		background-position-x: -120px;
	}

	#s17_box1
	{
		top: 30% !important;
	}

	#s01
	{
		background-image: url('http://image.chosun.com/interactive/cross/s01_1024_bg.jpg');
	}

	#s19
	{
		background-image: url('http://image.chosun.com/interactive/cross/s01_1024_bg_2.jpg');
	}

	#outro_wrapper
	{
		margin-top: 30% !important;
	}

	#intro_wrapper
	{
		margin-top: 0 !important;
	}

	.dyn
	{
		background-image: url('http://image.chosun.com/interactive/cross/dyn_bg_m.jpg');
	}

}

/* galaxy s8 */
@media only screen and (min-width: 360px) and (max-device-width: 740px) and (orientation: portrait)
{

/* 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 */

	section
	{
		height: 100%;
		overflow: hidden;
	}

	.bodyhead
	{
		font-size: 14pt;
	}

	.section_box
	{
		width: 80% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		left: 0 !important;
		top: 0 !important;
		max-width: inherit !important;
		max-height: inherit !important;
	}

	.section_number
	{
		font-size: 60pt;
	}

	.section_body
	{
		font-size: 32pt;
		line-height: 180%;
	}

	.bodyhead
	{
		font-size: 40pt;
	}

	video
	{
/* 		margin-top: 50%; */
	}

	.spacer
	{
		height: 25px !important;
	}

	#s03_box1
	{
		margin-top: 30% !important;
	}

	#s05_img1
	{
		top: 5%;
		left: 40%;
	}

	#s05_img2
	{
		top: 13%;
		left: 22%;
	}

	#s05_box1
	{
		margin: 50% auto !important;
/* 		top: 5% !important; */
	}

	#s06
	{
		background-position-x: -100px;
	}

	#s07
	{
		background-position-x: -100px;
	}

	#s07_box1
	{
		margin-top: 30%;
	}

	#s09_box1
	{
/* 		top: 20%; */
		margin-top: 50% !important;
	}

	#s10
	{
		background-size: 350%;
		background-repeat: no-repeat;
	}

	#s11_box1
	{
		margin: 45% auto;
	}

	#s12_box1
	{
		top: 20% !important;
	}

	#s13_box1
	{
		margin: 45% auto ;
	}

	#s15
	{
		background-position-x: -1200px;
	}

	#s16
	{
		background-position-x: -120px;
	}

	#s17_box1
	{
		top: 30% !important;
	}

	#s01
	{
		background-image: url('http://image.chosun.com/interactive/cross/s01_1024_bg.jpg');
	}

	#s19
	{
		background-image: url('http://image.chosun.com/interactive/cross/s01_1024_bg_2.jpg');
	}

	#outro_wrapper
	{
		margin-top: 60% !important;
	}

	#intro_wrapper
	{
		margin-top: 0 !important;
	    background-color: rgba(255,141,0,0.5);
	}

	#introtitle1
	{
		margin-top: 70%;
		text-shadow: 0px 4px 20px rgba(0,0,0,0.3);
	}

	#introtitle2
	{
/* 		margin-top: 70%; */
		text-shadow: 0px 4px 20px rgba(0,0,0,0.3);
	}

	.dyn
	{
		background-image: url('http://image.chosun.com/interactive/cross/dyn_bg_m.jpg');
	}

	#video0, #video1, #video2, #video3, #video4, #video5
	{
		height: auto;
		margin: 0 !important;
		top: 0 !important;
	}

	#video0{margin-top:120px !important;}

	.caption
	{
		font-size: 18pt;
		margin-top: 15px !important;
		line-height: 140%;
	}

	#sequence_intro
	{
		margin-top: 60%;
		font-size: 50pt;
	}

}