@charset "utf-8";
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	Basic	

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
html,body{height:100%}
body{
	opacity:0;
	font-size:16px;
	transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,button{margin:0;padding:0;}
body,h1,h2,h3,h4,h5,h6,th,td,input,select,textarea{margin:0;padding:0;color:#2d2d2d;font-family:'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",AppleGothic,Dotum,arial,sans-serif;}
ul,ol,dl,dt,dd{margin:0;padding:0;list-style:none}
p{text-align:left}
img{max-width:100%; border:none;vertical-align:top;}
img.ui-datepicker-trigger{margin:0px 5px; vertical-align:middle}
hr{display:none}
fieldset{border:none}
legend{display:none}
li p, dd p{margin-left:0}
table{table-layout:fixed;border-collapse:collapse;border-spacing:0}
table caption{overflow:hidden; position:relative; line-height:1px; font-size:1px; text-indent:-30000px;}

/* 초기 한글사용(한글 및 중국, 일본 사이트용) */
html[lang="ko"] input[type="text"],
html[lang="ko"] input[type="password"],
html[lang="ko"] textarea{ime-mode:active;}

/* 초기 영문사용(영문사이트용) */
html:not([lang="ko"]) input[type="text"],
html:not([lang="ko"]) input[type="password"],
html:not([lang="ko"]) textarea{ime-mode:inactive;}

* {
	-webkit-text-size-adjust:none;
	text-size-adjust:none;
	word-wrap: break-word;
	word-break: keep-all;
	box-sizing: border-box;
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	Form

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
input[type="text"],
input[type="password"],
input[type="submit"], button {
	-webkit-appearance: none; /*Safari/Chrome*/
	-moz-appearance: none; /*Firefox*/
	-ms-appearance: none; /*IE*/
	-o-appearance: none; /*Opera*/
	appearance:none;
}
input[type="text"],
input[type="password"],
textarea,
select{width:100%; padding:0.6em 1.1em; margin:1px 0; vertical-align:top; text-align:left; font-size:0.95em; border:1px solid #ddd; color:#797979; box-sizing:border-box;}
select{
	min-width:6.2em; width:auto; padding-right:2em;
	-webkit-appearance:none;
	appearance:none;
	background:url(../../images/happy/prog/select_bul.png) no-repeat calc(100% - 0.95em) center;
}
select::-ms-expand {display:none;}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	Link

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
a{text-decoration:none;}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	Skip
	
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
#skip {position:absolute; left:0; top:0; width:100%; margin:0 auto; z-index:999;}
#skip a{
	display:block; position:absolute; left:0; padding:10px; color:#fff; background-color:#000;
	border-radius:5px;
	-webkit-border-radius:5px;
}
#skip a:link,
#skip a:visited,
#skip a:active{top:-10000px;}
#skip a:hover,
#skip a:focus{top:0;}
.hidden{line-height:1px; font-size:1px; position:absolute; left:-10000px; top:0; overflow:hidden; text-indent:-30000px;}



/* Layout */
body{overflow-x:hidden; font-size:16px;}
body:before{content:""; display:block; position:fixed; left:0; top:0; z-index:1; width:100%; height:100%; background-image:url(../img/bg.jpg); background-repeat:no-repeat; background-position:center center; background-size:cover;}
body#time:before{background-image:url(../img/bg2.jpg);}

#wrap{position:relative; z-index:10; height:100%; padding:0 3em; color:#fff;}
#wrap #header{position:absolute; left:0; top:0; z-index:100; width:calc(100% - 4em); height:4.6em; margin:0 2em;}
#wrap #header h1{display:inline-block; position:relative; z-index:30; vertical-align:top; padding-top:0.7em;}
#wrap #header h1 a{
	display:none; position:relative; line-height:1.6em; padding-right:1.3em; font-family:"Play", sans-serif; font-size:0.8em; color:#fff;
	text-shadow:1px 1px 1px rgba(0,0,0,0.3);
	-webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.3);
}
#wrap #header h1 a:before,
#wrap #header h1 a:after{
	content:""; display:block; position:absolute; left:100%; width:1.1em; height:2px; background-color:#fff;
	box-shadow:1px 1px 1px rgba(0,0,0,0.3);
	-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.3);
}
#wrap #header h1 a:before{top:calc(50% - 1px - 4px); width:0.7em;}
#wrap #header h1 a:after{top:calc(50% - 1px + 4px);}
#wrap #header h1 a:before{
	animation-name:logo_befoer;
	animation-fill-mode:forwards;
	animation-duration:0.5s;
	animation-iteration-count:infinite;
}
#wrap #header h1 a:after{
	animation-name:logo_after;
	animation-fill-mode:forwards;
	animation-duration:0.5s;
	animation-delay:0.25s;
	animation-iteration-count:infinite;
}
@keyframes logo_befoer {
	0%,100%{width:0.7em;}
	50%{width:0.5em;}
}
@-webkit-keyframes logo_befoer {
	0%,100%{width:0.7em;}
	50%{width:0.5em;}
}
@keyframes logo_after {
	0%,100%{width:1.1em;}
	50%{width:0.9em;}
}
@-webkit-keyframes logo_after {
	0%,100%{width:1.1em;}
	50%{width:0.9em;}
}
#wrap #header .logo{overflow:hidden; position:absolute; right:0; top:1.5em; z-index:30; width:5.438em; height:1.875em; text-indent:-1000px; background-image:url(../img/logo.png); background-repeat:no-repeat; background-position:center center; background-size:100% auto;}
#wrap #header>ul{position:absolute; right:calc(5.438em + 2em); top:1.5em; z-index:30;}
#wrap #header>ul:after{content:""; display:block; clear:both;}
#wrap #header>ul li{float:left; line-height:1.5em;}
#wrap #header>ul li:not(:nth-child(1)){position:relative; padding-left:2em;}
#wrap #header>ul li:not(:nth-child(1)):before{content:""; display:block; position:absolute; left:1em; top:calc(50% - 0.25em); width:1px; height:0.5em; background-color:#fff;}
#wrap #header>ul li a{
	display:block; font-family:"Play", sans-serif; font-weight:600; font-size:0.8em; color:rgba(255,255,255,0.2);
	text-shadow:1px 1px 1px rgba(0,0,0,0.3);
	-webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.3);
}
body#story #wrap #header h1 a.btn_story,
body#time #wrap #header h1 a.btn_time{display:block;}
body#story #wrap #header>ul li:nth-child(1) a,
body#time #wrap #header>ul li:nth-child(2) a{color:rgba(255,255,255,1);}

#wrap #footer{position:absolute; left:0; bottom:0; z-index:100; width:100%; height:3.4em; line-height:3.4em;}
#wrap #footer address{display:table; width:100%; height:100%; text-align:center; font-family:"Play", sans-serif; font-style:normal; font-size:0.3em; color:rgba(255,255,255,0.2);}
#wrap #footer address span{display:table-cell; width:100%; height:100%; line-height:1.2em; text-align:center; vertical-align:middle;}

@media all and (max-width: 1300px) {
	#wrap #header{width:calc(100% - 3em); margin:0 1.5em}
}
@media all and (max-width: 1000px) {
	#wrap{font-size:12px;}
}
@media all and (max-width: 500px) {
	#wrap #header{width:calc(100% - 2em); margin:0 1em;}
	#wrap #header .logo{display:none;}
	#wrap #header>ul{right:0; top:2em;}
}
@media all and (max-width: 340px) {
	#wrap #header h1 a{padding-right:0;}
	#wrap #header h1 a:before,
	#wrap #header h1 a:after{display:none;}
}



/* STORYLINE */
body#story #wrap #container .time,
body#story #wrap #header #searchbox{display:none !important;}
/* list */
body#story:not([class*="view"]) #wrap{padding:4.6em 1em 3.4em 1em;}
body#story:not([class*="view"]) #wrap #container{position:relative; z-index:0; height:100%;}
body#story:not([class*="view"]) #wrap #container .story{overflow:auto; position:relative; width:100%; height:100%;}
body#story:not([class*="view"]) #wrap #container .story ul{position:absolute; left:0; top:0; width:100%; height:100%;}
body#story:not([class*="view"]) #wrap #container .story ul:after{content:""; display:block; clear:both;}
body#story:not([class*="view"]) #wrap #container .story ul li{float:left; width:25%; height:50%; padding:1em; box-sizing:border-box;}
body#story:not([class*="view"]) #wrap #container .story ul li a{overflow:hidden; display:block; position:relative; width:100%; height:100%; background-color:#0d151b;}
body#story:not([class*="view"]) #wrap #container .story ul li a .bg{
	opacity:0.6; display:block; position:absolute; left:0; top:0; z-index:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;
	transition:transform 1.2s linear;
	-webkit-transition:transform 1.2s linear;
}
body#story:not([class*="view"]) #wrap #container .story ul li a .bg img{display:none;}
body#story:not([class*="view"]) #wrap #container .story ul li a .lay{
	display:block; position:relative; z-index:10; width:100%; height:100%; font-size:2em; background-color:rgba(0,76,152,0);
	transition:background 0.2s linear;
	-webkit-transition:background 0.2s linear;
}
body#story:not([class*="view"]) #wrap #container .story ul li a .lay .head{
	display:block; position:absolute; left:0; bottom:1.5em; z-index:10; width:100%; text-align:center; color:#fff;
	transition:bottom 0.5s ease;
	-webkit-transition:bottom 0.5s ease;
}
body#story:not([class*="view"]) #wrap #container .story ul li a .lay .head em{display:block; text-align:center; font-style:normal; font-weight:400; font-size:0.50em;}
body#story:not([class*="view"]) #wrap #container .story ul li a .lay .head strong{display:block;/* max-width:8.5em; */margin:0.8em auto 0 auto;font-family:"Play", sans-serif;font-weight:500;font-size:0.8em;}
body#story:not([class*="view"]) #wrap #container .story ul li a .lay .head strong:before{
	content:""; display:block; position:absolute; left:50%; top:calc(100% + 0.5em); width:1px; height:0; background-color:#fff;
	transition:height 0.2s ease 0.2s;
	-webkit-transition:height 0.2s ease 0.2s;
}
body#story:not([class*="view"]) #wrap #container .story ul li a .lay .head span{
	opacity:0; display:inline-block; position:absolute; left:calc(50% - 3.8em); top:calc(100% + 5.5em); width:7.6em; margin:0 auto; padding:0.5em 0; font-family:"Play", sans-serif; font-weight:200; font-size:0.4em; color:#191a1a; background-color:#fff;
	transition:opacity 0.3s ease 0.3s;
	-webkit-transition:opacity 0.3s ease 0.3s;
}

body#story:not([class*="view"]) #wrap #container .video{display:none; color:#fff;}


body#story:not([class*="view"]) #wrap #container .story ul li.on a .bg,
body#story:not([class*="view"]) #wrap #container .story ul li a:hover .bg{
	transform:scale(1.2);
	-webkit-transform:scale(1.2);
}
body#story:not([class*="view"]) #wrap #container .story ul li.on a .lay,
body#story:not([class*="view"]) #wrap #container .story ul li a:hover .lay{background-color:rgba(0,76,152,0.83);}
body#story:not([class*="view"]) #wrap #container .story ul li.on a .lay .head,
body#story:not([class*="view"]) #wrap #container .story ul li a:hover .lay .head{bottom:6em;}
body#story:not([class*="view"]) #wrap #container .story ul li.on a .lay .head strong:before,
body#story:not([class*="view"]) #wrap #container .story ul li a:hover .lay .head strong:before{height:1.7em;}
body#story:not([class*="view"]) #wrap #container .story ul li.on a .lay .head span,
body#story:not([class*="view"]) #wrap #container .story ul li a:hover .lay .head span{opacity:1;}

body#story:not([class*="view"]) #wrap #container .btn_close{display:none;}

@media all and (max-width: 1300px) {
	body#story:not([class*="view"]) #wrap #container .story ul li{width:25%; padding:0.5em;}
}
@media all and (max-width: 1000px) {
	body#story:not([class*="view"]) #wrap #container .story ul li{width:calc(100% / 3);}
}
@media all and (max-width: 800px) {
	body#story:not([class*="view"]) #wrap #container .story ul li{height:calc(100% / 3);}
}
@media all and (max-width: 600px) {
	body#story:not([class*="view"]) #wrap #container{font-size:0.8em;}
}
@media all and (max-width: 500px) {
	body#story:not([class*="view"]) #wrap #container{font-size:0.6em;}
	body#story:not([class*="view"]) #wrap #container .story ul li{height:auto; padding:0;}
	body#story:not([class*="view"]) #wrap #container .story ul li a .bg{position:relative;}
	body#story:not([class*="view"]) #wrap #container .story ul li a .bg img{display:block; width:100%;}
	body#story:not([class*="view"]) #wrap #container .story ul li a .lay{position:absolute; left:0; top:0;}
}
@media all and (max-width: 450px) {
	body#story:not([class*="view"]) #wrap #container{font-size:0.4em;}
}
@media all and (max-width: 400px) {
	body#story:not([class*="view"]) #wrap #container .story ul li{width:50%;}
}



/* view */
body#story.view #wrap{padding:3.125em 0 0 0;}
body#story.view #wrap #header{width:calc(100% - 2em); height:3.125em; margin:0 1em;}
body#story.view #wrap #header:after{
	content:""; display:block; position:absolute; left:calc(50% - 100%); bottom:0; z-index:0; width:200%; height:100%; border-bottom:1px solid rgba(255,255,255,0.2); box-sizing:border-box;
	box-shadow:inset 0 2em 2em rgba(0,0,0,0.2);
	-webkit-box-shadow:inset 0 2em 2em rgba(0,0,0,0.2);
}
body#story.view #wrap #header h1{padding-top:0.15em;}
body#story.view #wrap #header .logo,
body#story.view #wrap #header>ul{top:0.7em;}

body#story.view #wrap #container{overflow-y:hidden; position:relative; height:100%;}
body#story.view #wrap #container:after{content:attr(data-text); display:block; position:absolute; left:0; top:calc(50% - 1em); z-index:0; width:100%; height:2em; line-height:2em; text-align:center; font-family:"Play", sans-serif; font-size:2em; color:#fff;}
body#story.view #wrap #container .story{
	position:absolute; left:0; top:0; z-index:100; width:13.6em; height:100%; background-color:rgba(0,0,0,0.3);
	transition:left 0.3s ease;
	-webkit-transition:left 0.3s ease;
}
body#story.view #wrap #container .story.off{left:-13.6em;}
body#story.view #wrap #container .story ul{overflow:auto; position:absolute; left:0; top:0; width:100%; height:100%; padding:0.5em 1em;}
body#story.view #wrap #container .story ul li{float:none; width:100%; height:6.5em; padding:0.5em 0;}
body#story.view #wrap #container .story ul li a{display:block; position:relative; width:100%; height:100%; background-color:#0d151b;}
body#story.view #wrap #container .story ul li a .bg{
	opacity:0.6; display:block; position:absolute; left:0; top:0; z-index:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center 25%; background-size:cover;
	transition:transform 1.2s linear;
	-webkit-transition:transform 1.2s linear;
}
body#story.view #wrap #container .story ul li a .bg:before,
body#story.view #wrap #container .story ul li a .bg:after{
	transition:opacity 0.3s ease;
	-webkit-transition:opacity 0.3s ease;
}
body#story.view #wrap #container .story ul li a .bg:before{opacity:0; content:""; display:block; position:absolute; left:0; top:0; z-index:100; width:100%; height:100%; border:1px solid rgba(20,118,216,0.73); background-color:rgba(0,76,152,0.73); box-sizing:border-box;}
body#story.view #wrap #container .story ul li a .bg:after{opacity:0; content:""; display:block; position:absolute; right:-1em; top:0; z-index:100; width:1px; height:100%; background-color:#1476d8;}
body#story.view #wrap #container .story ul li a .bg img{display:none;}
body#story.view #wrap #container .story ul li a .lay{display:block; position:relative; z-index:10; width:100%; height:100%; padding:1em; font-size:0.8em; color:rgba(255,255,255,0.5);}
body#story.view #wrap #container .story ul li a .lay .head em,
body#story.view #wrap #container .story ul li a .lay .head strong{
	text-shadow:1px 1px 1px rgba(0,0,0,0.2);
	-webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.2);
}
body#story.view #wrap #container .story ul li a .lay .head em{position:absolute; left:1em; bottom:1em; font-style:normal;}
body#story.view #wrap #container .story ul li a .lay .head strong{display:block; line-height:1.3em; font-size:1em; font-weight:normal;}
body#story.view #wrap #container .story ul li a .lay .head span{display:none;}
body#story.view #wrap #container .story ul li.on a .bg:before,
body#story.view #wrap #container .story ul li.on a .bg:after{opacity:1;}


body#story.view #wrap #container .video{
	display:block; position:fixed; left:0; bottom:90px; z-index:10; width:100%; height:100%; background-color:#fff;
	transform:scale(1.1);
	-webkit-transform:scale(1.1);
}
body#story.view #wrap #container .video:before{content:""; display:block; position:absolute; left:0; top:0; z-index:-1; width:100%; height:100%; background-color:transparent;}
body#story.view #wrap #container .video iframe{position:relative; z-index:0;}

body#story.view #wrap #container .story .btn_close{overflow:hidden; display:block; position:absolute; left:100%; top:calc(50% - (2.891em / 2)); width:2.891em; height:2.891em; padding:0; text-indent:-1000px; font-size:0.8em; color:#fff; background-color:rgba(0,0,0,0.3);}
body#story.view #wrap #container .story .btn_close:before{
	content:""; display:block; position:absolute; left:calc(50% - 0.3em + 1px); top:calc(50% - 0.3em); width:0.6em; height:0.6em; border:1px solid #fff; border-right-color:transparent; border-top-color:transparent; box-sizing:border-box;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}
body#story.view #wrap #container .story.off .btn_close{}
body#story.view #wrap #container .story.off .btn_close:before{
	left:calc(50% - 0.3em - 1px);
	transform:rotate(225deg);
	-webkit-transform:rotate(225deg);
}
body#story.view #wrap #footer{display:none;}
@media all and (max-width: 500px) {
	body#story.view #wrap #header>ul{right:0; top:1em;}
}




/* TIMELINE */
body#time #wrap{padding:0 2em;}
body#time #wrap #container{position:relative; z-index:0; height:100%;}
body#time #wrap #container .story,
body#time #wrap #container .video,
body#time #wrap #footer{display:none !important;}
body#time #wrap #header{position:fixed;}

body#time #wrap #header>ul{right:calc(5.438em + 2em + 15em);}
body#time #wrap #header #searchbox{display:block; position:absolute; right:calc(5.438em + 2em); top:1em; z-index:30;}
body#time #wrap #header #searchbox select{
	width: em;
	font-size: 0.83em;
	vertical-align:top;
	border:none;
	border-bottom: 1px solid #c8cbd0;
	color:#fff;
	background-repeat:no-repeat;
	background-position:calc(100% - 0.5em) 1em;
	background-color:transparent;
	border-radius:0;
	-webkit-border-radius:0;
}
body#time #wrap #header #searchbox select:nth-child(1){background-image:url(../img/select_icon_1.png);}
body#time #wrap #header #searchbox select:nth-child(2){width:8em; background-image:url(../img/select_icon_2.png);}
body#time #wrap #header #searchbox select option{color: #fff;background: #73bdff;padding: 5px 0;border: #73bdff;}
body#time #wrap #header #searchbox input[type="submit"]{overflow:hidden; width:1.35em; height:1.35em; margin:1em 0 0 1em; text-indent:-1000px; vertical-align:top; border:none; background:url(../img/search_icon.png) no-repeat center center; background-size:100% auto;}

body#time #wrap #container .time{position:relative; width:100%; height:100%; font-size:16px;}
body#time #wrap #container .time>ul{position:relative; z-index:0;}
body#time #wrap #container .time>ul>li{position:relative; padding-top:4.6em;}
body#time #wrap #container .time>ul>li:before{content:""; display:block; position:absolute; left:50%; top:calc(4.6em + 5em); width:2px; height:calc(100% - 5em); background-color:rgba(255,255,255,0.3);}
body#time #wrap #container .time>ul>li>strong{display:block; position:relative; height:5em; line-height:5em; text-align:center;}
body#time #wrap #container .time>ul>li>strong span{font-family:"Play", sans-serif; font-size:2.5em; color:#fff;}
body#time #wrap #container .time>ul>li:first-child>strong:before{content:""; display:block; position:absolute; left:50%; bottom:100%; width:2px; height:2000px; background-color:rgba(255,255,255,0.3);}
body#time #wrap #container .time>ul>li>ul{padding-top:10em;padding-bottom: 12em;}
body#time #wrap #container .time>ul>li>ul:after{content:""; display:block; clear:both;}
body#time #wrap #container .time>ul>li>ul>li{float:left; position:relative; width:calc(50% - 5em); max-width:600px; margin-top:-6em !important;}
body#time #wrap #container .time>ul>li>ul>li:not(:last-child){}
body#time #wrap #container .time>ul>li>ul>li:nth-child(2n+1){margin: 0 4em 2em 50%;padding: 2em 0em 2em 6em;text-align:left;}
body#time #wrap #container .time>ul>li>ul>li:nth-child(2n+1){}
body#time #wrap #container .time>ul>li>ul>li:nth-child(2n+2){float:right;margin:0 50% 0 5em;padding: 2em 6em 12em 0;text-align:right;}
body#time #wrap #container .time>ul>li>ul>li:before{
	content:"";
	display:block;
	position:absolute;
	right:calc(100% - 0.4em);
	top:calc(2em + 0.38em);
	z-index:20;
	width:0.8em;
	height:0.8em;
	background-color:#6197ff;
	border-radius:50%;
	-webkit-border-radius:50%;
}
body#time #wrap #container .time>ul>li>ul>li:nth-child(2n+2):before{right:-0.4em; top:calc(2em + 0.4em);}
body#time #wrap #container .time>ul>li>ul>li em,
body#time #wrap #container .time>ul>li>ul>li strong,
body#time #wrap #container .time>ul>li>ul>li div,
body#time #wrap #container .time>ul>li>ul>li span{
	opacity:1;
	transition:opacity 0.3s ease;
	-webkit-transition:opacity 0.3s ease;
}
body#time #wrap #container .time>ul>li>ul>li.off em,
body#time #wrap #container .time>ul>li>ul>li.off strong,
body#time #wrap #container .time>ul>li>ul>li.off div,
body#time #wrap #container .time>ul>li>ul>li.off span{opacity:0;}
body#time #wrap #container .time>ul>li>ul>li>em{display:block; position:relative; z-index:0; font-family:"Play", sans-serif; font-weight:600; font-style:normal; font-size:1.5em; color:#93b8ff;}
body#time #wrap #container .time>ul>li>ul>li>em:before{content:""; display:block; position:absolute; right:calc(100% + 0.5em); top:50%; width:3.5em; height:1px; background-color:#93b8ff;}
body#time #wrap #container .time>ul>li>ul>li:nth-child(2n+2)>em:before{right:auto; left:calc(100% + 0.5em);}
body#time #wrap #container .time>ul>li>ul>li>strong{display:block;padding:0.3em 0;font-weight:300;font-size: 2em;}
body#time #wrap #container .time>ul>li>ul>li>div{font-size: 1em;font-weight:200;color:rgba(255,255,255,1);}
body#time #wrap #container .time>ul>li>ul>li>span{display:block;position:relative;min-height: 3em;margin-top:1.5em;}
body#time #wrap #container .time>ul>li>ul>li>span img{display:inline-block;position:absolute;left:0;top:0;max-width:100%;max-height: 15em;vertical-align:top;}
body#time #wrap #container .time>ul>li>ul>li:nth-child(2n+2)>span img{left:auto; right:0;}

body#time #wrap #container .time>.controll{
	position:fixed; left:2em; top:50%; z-index:300; width:1px;
	background: rgba(255,255,255,0.2);
	background: -webkit-linear-gradient(to top, transparent 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.2) 80%, transparent 100%);
	background: linear-gradient(to top, transparent 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.2) 80%, transparent 100%);
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
}
body#time #wrap #container .time>.controll ul{padding:3.5em 0;}
body#time #wrap #container .time>.controll ul li{position:relative;}
body#time #wrap #container .time>.controll ul li:not(:last-child){padding-bottom:3em;}
body#time #wrap #container .time>.controll ul li:not(:last-child):before{
	opacity:0; content:""; display:block; position:absolute; left:0; top:0; width:1px; height:0; background-color:#4e8bff;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
body#time #wrap #container .time>.controll ul li a{display:block; position:relative; line-height:1em; position:relative; padding-left:0.5em; font-size:0.9em;}
body#time #wrap #container .time>.controll ul li a:before{
	content:""; display:block; position:absolute; left:-2px; top:calc(50% - 2.5px); z-index:10; width:5px; height:5px; background-color:#4d5153;
	border-radius:50%;
	-webkit-border-radius:50%;
}
body#time #wrap #container .time>.controll ul li a span{
	display:block; position:absolute; left:12px; top:calc(50% - 0.5em); line-height:1em; font-family:"Play", sans-serif; font-size:1em; vertical-align:top; color:rgba(255,255,255,0.3);
	transition:all 0.1s linear;
	-webkit-transition:all 0.1s linear;
}

body#time #wrap #container .time>.controll ul li:not(:last-child).on:before{opacity:1; height:100%;}
body#time #wrap #container .time>.controll ul li.on a:before,
body#time #wrap #container .time>.controll ul li a:hover:before{background-color:#4e8bff;}
body#time #wrap #container .time>.controll ul li.on a span,
body#time #wrap #container .time>.controll ul li a:hover span{top:calc(50% - 0.5em); font-weight:600; font-size:1.4em; color:#4e8bff;}
@media all and (max-width: 1200px) {
	body#time #wrap #container .time{font-size:14px;}
}
@media all and (max-width: 1100px) {
	body#time #wrap #container .time{padding:0 2em; font-size:12px;}
	body#time #wrap #container .time>.controll{font-size:14px;}
}
@media all and (max-width: 1000px) {
	body#time #wrap #header #searchbox{right:calc(5.438em + 1em);}
	body#time #wrap #header #searchbox input[type="submit"]{margin:0.5em 0 0 0.5em;}
	body#time #wrap #container .time{font-size:10px;}
}
@media all and (max-width: 800px) {
	body#time #wrap #container .time>.controll{font-size:10px;}
}
@media all and (max-width: 750px) {
	body#time #wrap #container .time>ul>li:before{left:0;}
	body#time #wrap #container .time>ul>li>strong{margin-left:-2.8em; text-align:left;}
	body#time #wrap #container .time>ul>li:first-child>strong:before{display:none; left:0;}
	body#time #wrap #container .time>ul>li>ul{padding-top:2em;}
	body#time #wrap #container .time>ul>li>ul>li{width:calc(100% - 2em); margin-top:0 !important;}
	body#time #wrap #container .time>ul>li>ul>li>em:before{width:2.3em;}
	body#time #wrap #container .time>ul>li>ul>li:nth-child(2n+1){position:relative; margin:0; padding:2em 0 2em 4em;}
	body#time #wrap #container .time>ul>li>ul>li:nth-child(2n+2){float:left; margin:0; padding:2em 0 2em 4em; text-align:left;}
	body#time #wrap #container .time>ul>li>ul>li:nth-child(2n+2):before{right:calc(100% - 0.4em); top:calc(2em + 0.38em);}
	body#time #wrap #container .time>ul>li>ul>li:nth-child(2n+2)>em:before{left:auto; right:calc(100% + 0.5em);}
	body#time #wrap #container .time>ul>li>ul>li>span{min-height:10px;}
	body#time #wrap #container .time>ul>li>ul>li>span img{position:relative;}

	body#time #wrap #container .time>.controll{
		left:auto; right:2em;
	}
	body#time #wrap #container .time>.controll ul li a span{left:auto; right:12px;}
}
@media all and (max-width: 600px) {
	body#time #wrap #header>ul{right:calc(5.438em + 2em);}
	body#time #wrap #header #searchbox{right:0; top:4em;}
}
@media all and (max-width: 500px) {
	body#time #wrap #header>ul{right:0;}
}