@charset "utf-8";



.story-article {
	left: 0;
	top: 0;
	width: 100%;

	-webkit-transition-property: -webkit-transform;
	        transition-property:         transform;
	-webkit-transition-duration: 0.8s;
	        transition-duration: 0.8s;
	-webkit-transition-timing-function: cubic-bezier( .65, .05, .35, .95 );
	        transition-timing-function: cubic-bezier( .65, .05, .35, .95 );
}

.story-article.up {
	-webkit-transform: translate3d( 0, -100%, 1px );
	        transform: translate3d( 0, -100%, 1px );
}
.story-article.down {
	-webkit-transform: translate3d( 0, 100%, 1px );
	        transform: translate3d( 0, 100%, 1px );
}
.story-article.center {
	z-index: 1;
}

.story-foreground {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d( 0, 0, 1px );
	        transform: translate3d( 0, 0, 1px );
}

.story-background {
	height: 100%;
	background-color: #fff;
}

.story-background img {
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}



.story-background .shade {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	opacity: 0.4;

	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
	-webkit-transform: translate3d( 0, 0, 1px );
	        transform: translate3d( 0, 0, 1px );
}

.story-headcopy {
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
	color: #fff;
}

.story-headcopy > p {
	margin: 0 0 0.4em 0;
	font-weight:400;
	font-family: "Noto Sans CJK KR", "Noto Sans KR", Sans-Serif;
	font-size: 50px;
	line-height: 1.08em;
}

html[class^='chrome_49'] .story-headcopy > p,
html[class^='chrome_5'] .story-headcopy > p {font-family:'Noto Sans',Arial,"Noto Sans CJK KR","Noto Sans KR",NanumBarunGothic,'Malgun Gothic','Nanum Barun Gothic',Sans-Serif;}

.story-headcopy .bar {
	display: inline-block;
	position: relative;
}

.story-headcopy .bar > span:first-child {
	position: absolute;
	left: 0.07em;
	top: -0.35em;
	width: 0.75em;
	height: 5px;
	overflow: hidden;
	background-color: #fff;
	content: ' ';
}

.story-headcopy > em {
	font-weight: 300;
	font-size: 1.11em;
	letter-spacing: -0.1em;
}

#ui_foot,
#mobile_go-link { display: none; }

#main_indicator {
   
	position: fixed; 
	z-index:1;
	width:100%;
	height:600px;
	padding-top:5%; 
	font-size: 0px;
	line-height: 1em;
	letter-spacing: 0;
}

#main_indicator ul {
right:0
}

#main_indicator li {
	height: 50px;
	padding: 10px 0 0 0;
	
}

#main_indicator li a {
	display: block;
	height: 40px;
	background-image: url( /new2021/img/map_main.png );
	background-repeat: no-repeat;
	background-position: 98% -10px;
	background-size: 50px auto;
	letter-spacing: 0;
	color: #fff;
}

.no-background-size #main_indicator li a { background-image: url( /new2021/img/map_main.png ); }

#main_indicator.black-skin li a { background-position: 50% -60px; }

#main_indicator li.on { text-indent: 0; }
#main_indicator li.on a { background-position:98% -110px; }

#main_story1 .story-headcopy { top: 50%;margin-top:-11.11em; }


/* 등장모션 */

#main_story1 .story-headcopy {
	
	-webkit-transition-property: opacity, -webkit-transform;
	        transition-property: opacity,         transform;
	-webkit-transition-timing-function: ease-out;
	        transition-timing-function: ease-out;
	-webkit-transition-delay: 200ms;
	        transition-delay: 200ms;
}

#main_story1 .story-headcopy {
	-webkit-transform: translate3d( 0, -30px, 1px );
	        transform: translate3d( 0, -30px, 1px );
}




#main_story1.appear .story-headcopy {
	opacity:1;
	-webkit-transform: none;
	        transform: none;
	-webkit-transition-duration: 500ms;
	        transition-duration: 500ms;
}

/* /////////////////////////////////////////////////// */
#main_cont1 .story-headcopy {top:0;margin-top:5.5em;}

/* 등장모션 */
#main_cont1 .story-headcopy { 
	
	-webkit-transform: translate3d( 0, -30px, 1px );
	        transform: translate3d( 0, -30px, 1px );
	-webkit-transition-property: opacity, -webkit-transform;
	        transition-property: opacity,         transform;
	-webkit-transition-timing-function: ease-out;
	        transition-timing-function: ease-out;
	-webkit-transition-delay: 200ms;
	        transition-delay: 200ms;
}
#main_cont1.appear .story-headcopy {
	opacity:1;
	-webkit-transform: none;
	        transform: none;
	-webkit-transition-duration: 500ms;
	        transition-duration: 500ms;
}





/* //////////////////main_cont2//////////////////////// */

#main_cont2 .story-headcopy {width:1300px; margin:0 auto; text-align:center }


#main_cont2 .story-headcopy { 
	
	-webkit-transform: translate3d( 0, -30px, 1px );
	        transform: translate3d( 0, -30px, 1px );
	-webkit-transition-property: opacity, -webkit-transform;
	        transition-property: opacity,         transform;
	-webkit-transition-timing-function: ease-out;
	        transition-timing-function: ease-out;
	-webkit-transition-delay: 200ms;
	        transition-delay: 200ms;
}
#main_cont2.appear .story-headcopy {
	opacity:1;
	-webkit-transform: none;
	        transform: none;
	-webkit-transition-duration: 500ms;
	        transition-duration: 500ms;
}


/* //////////////////main_cont2//////////////////////// */

#main_cont3 .story-headcopy { }

#main_cont3 .story-headcopy { 
	
	-webkit-transform: translate3d( 0, -30px, 1px );
	        transform: translate3d( 0, -30px, 1px );
	-webkit-transition-property: opacity, -webkit-transform;
	        transition-property: opacity,         transform;
	-webkit-transition-timing-function: ease-out;
	        transition-timing-function: ease-out;
	-webkit-transition-delay: 200ms;
	        transition-delay: 200ms;
}
#main_cont3.appear .story-headcopy {
	opacity:1;
	-webkit-transform: none;
	        transform: none;
	-webkit-transition-duration: 500ms;
	        transition-duration: 500ms;
}

/* //////////////////main_cont4//////////////////////// */
#main_cont4 {background:url(/new2021/img/main_bg4.jpg) top center}
#main_cont4 .story-headcopy {top:0;margin-top:12em;}
#main_cont4 .cont_back{width:2000px; height:920px; position:relative; margin-left:-1000px; }

#main_values {
	position: absolute;
	left: 50%;
	bottom:15em;
	width: 1332px;
	margin: 0 0 0 -666px;
	text-align: center;
	font-weight: 100;
	color: #fff;
}

#main_cont4 #main_values .values {
	float: left;
	width: 197px;
	padding:12px
}


#main_values .values > p {
	margin: 0;
}

#main_values .values > p a {display:block}

#main_cont4 .story-headcopy {
	
	-webkit-transform: translate3d( 0, -30px, 1px );
	        transform: translate3d( 0, -30px, 1px );
	-webkit-transition-property: opacity, -webkit-transform;
	        transition-property: opacity,         transform;
	-webkit-transition-timing-function: ease-out;
	        transition-timing-function: ease-out;
	-webkit-transition-delay: 200ms;
	        transition-delay: 200ms;
}

#main_cont4.appear .story-headcopy {
	opacity:1;
	-webkit-transform: none;
	        transform: none;
	-webkit-transition-duration: 500ms;
	        transition-duration: 500ms;
}

#main_values .values {
	
	-webkit-transform: translate3d( 0, 50px, 1px );
	        transform: translate3d( 0, 50px, 1px );
	-webkit-transition-property: -webkit-transform, opacity;
	        transition-property:         transform, opacity;
	-webkit-transition-timing-function: ease-out;
	        transition-timing-function: ease-out;
}

.appear #main_values .values {
	opacity: 1;
	-webkit-transform: none;
	        transform: none;
	-webkit-transition-duration: 500ms;
	        transition-duration: 500ms;
}


.appear #main_values1 {
	-webkit-transition-delay: 700ms;
	        transition-delay: 700ms;
}

.appear #main_values2 {
	-webkit-transition-delay: 800ms;
	        transition-delay: 800ms;
}

.appear #main_values3 {
	-webkit-transition-delay: 900ms;
	        transition-delay: 900ms;
}

.appear #main_values4 {
	-webkit-transition-delay: 1000ms;
	        transition-delay: 1000ms;
}

.appear #main_values5 {
	-webkit-transition-delay: 1100ms;
	        transition-delay: 1100ms;
}

.appear #main_values6 {
	-webkit-transition-delay: 1200ms;
	        transition-delay: 1200ms;
}

.appear #main_values7 {
	-webkit-transition-delay: 300ms;
	        transition-delay: 300ms;
}

.appear #main_values8 {
	-webkit-transition-delay: 400ms;
	        transition-delay: 400ms;
}

.appear #main_values9 {
	-webkit-transition-delay: 500ms;
	        transition-delay: 500ms;
}






.appear #main_values .divline {
	opacity: 1;
	-webkit-transition-duration: 500ms;
	        transition-duration: 500ms;
	-webkit-transition-delay: 1200ms;
	        transition-delay: 1200ms;
}


/* //////////////////main_cont5//////////////////////// */
/* /////////////////////////////////////////////////// */
#main_cont5{}
#main_cont5 .story-headcopy {top:0;margin-top:5.5em;}
#main_cont5 .story-headcopy p{position:absolute; width:2000px; left:0; margin-left:-1000px}
#main_cont5 .story-headcopy p img{}

/* 등장모션 */
#main_cont5 .story-headcopy { 
	
	-webkit-transform: translate3d( 0, -30px, 1px );
	        transform: translate3d( 0, -30px, 1px );
	-webkit-transition-property: opacity, -webkit-transform;
	        transition-property: opacity,         transform;
	-webkit-transition-timing-function: ease-out;
	        transition-timing-function: ease-out;
	-webkit-transition-delay: 200ms;
	        transition-delay: 200ms;
}
#main_cont5.appear .story-headcopy {
	opacity:1;
	-webkit-transform: none;
	        transform: none;
	-webkit-transition-duration: 500ms;
	        transition-duration: 500ms;
}




/* //////////////////main_cont6//////////////////////// */

#main_cont6 .story-headcopy {width:1300px; position:relative; margin:0 auto; text-align:center}


#main_cont6 #main_values {
	position: absolute;
	left: 50%;
	width:1308px;
	margin: 0 0 0 -650px;
	text-align: center;
	font-weight: 100;
	color: #fff;
}

#main_cont6 #main_values .values {
	float: left;
	width: 100%;
	
}

#main_cont6 #main_values .values p{float:left;padding:0 5px}




/* //////////////////main_cont7//////////////////////// */




/* //////////////////main_cont8//////////////////////// */

#main_cont8 {background-color:#f3f3f3;}
#main_cont8 .story-headcopy {top:0;margin-top:5.5em;color:#fff; font-weight:600}
#main_cont8 .story-headcopy .bar > span:first-child {background-color:#ecc892;}

#main_cont8 #main_man{
	position: absolute;
	left:50%;
	top: 52%;
	width:1290px;
	margin: -10em 0 0 -645px;
}

#main_cont8 #main_man li{float:left}



/* //////////////////main_cont9//////////////////////// */

#main_cont9 {background-color:#122331}
#main_cont9 .story-headcopy {top:0;margin-top:5.5em;color:#fff; font-weight:600}
#main_cont9 .story-headcopy p {color:#fff}

#main_cont9 #main_map{
	position: absolute;
	left:50%;
	top:47%;
	width:1300px;
	margin: -10em 0 0 -650px;
}

/*footer*/

#main_cont9 #main_footer_wrap{
	position: absolute;
	left:50%;
	width:1300px;
	margin-left:-650px;
	bottom:20px
}


#main_footer_wrap #main_footer {width:1300px; margin:0 auto; overflow:hidden;}
#main_footer address { width:100%; text-align:center; font-weight:400; font-style:normal; color:#fff;}
#main_footer address .line {padding:0 7px; color:#acafb2; vertical-align: baseline;}
#main_footer .copyright {padding-top: 14px; display:block; color:#acafb2; font-weight: 400; font-size: 18px; text-align:center; /*text-transform:uppercase; */padding-bottom:24px;}