@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700");
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);

body {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans','NanumBarunGothic','NanumGothic','malgun gothic','dotum','sans-serif';
}

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {
	margin: 0; padding: 0;
}
fieldset,img {
	border: 0 none;
}
dl,ul,ol,menu,li {
	list-style:none;
}
img {
	border: 0;
	max-width: 100%;
}

/* common */
.ml10 {
	margin-left: 10px;
}
.mt50 {
	margin-top: 50px;
}
.pd-none {
	padding: 0;
}
/* index */
.btn-main {
	position: absolute;
	top: 480px;
	right: 70px;
}
.btn-main > a.btn {
	display: inline-block;
	margin: 0 4px;
	padding: 6px 2%;
	width: 170px;
	text-align: left;
	border-radius: 5px;
	background:url(../images/main_btn_bg.png) 0 0 repeat-x;
}
.btn-main > a.btn:hover {
	background:url(../images/main_btn_on_bg.png) 0 0 repeat-x;
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	-o-transition: all 0.7s;
	transition: all 0.7s;
}
.btn-main p {
	margin: 5px 0 0 36%;
	text-align: left;
	color: #e5e5e5;
	font-size: 12px;
}
.btn-main p > strong {
	display: block;
	color: #fff;
	font-size: 14px;
}

.btn-main.btm {
	position: absolute;
	top: 480px;
	left: 40px;
}

.guide-border {
	display: block;
	width: 50px;
	height: 4px;
	margin-bottom: 5px;
	background: #000;
}

/* visual */
.textContL {
	position: absolute;
	top: 350px;
	left: 50px;
	text-align: left;
	letter-spacing: -0.05em;
	color: #000;
	font-weight: 300;
	font-size: 2.6em;
	line-height: 50px;
	z-index: 10;
}
.textContS {
	position: absolute;
	top: 530px;
	left: 50px;
	text-align: left;
	letter-spacing: -0.05em;
	color: #000;
	font-weight: 300;
	font-size: 1.3em;
	line-height: 28px;
	z-index: 10;
}
.mobile {
	position: relative;
}

/* visual position */
.img-posi {
	position: absolute;
}
.intro-01, .intro-02, .intro-03,
.second-01, .second-02, .second-03,
.third-01, .third-02, .third-03,
.fourth-01, .fourth-02, .fourth-03 {
	top: 250px; left: 410px;
}
.fifth-01 {
	top: 250px; left: 510px;
}
.fifth-02, .fifth-03 {
	top: 250px; left: 410px;
}
.sixth-01 {
	top: 248px; left: 410px;
}
.sixth-02 {
	top: 638px; left: 382px;
}
.sixth-03 {
	top: 302px; left: 572px;
}
.sixth-04 {
	top: 525px; left: 550px;
}

/* nav-dot */
#nav-dot {
	position: fixed;
	right: 30px;
	top: 38%;
	z-index: 10;
}
#nav-dot li span {
	border-radius: 30px;
	margin-bottom: 16px;
	width: 16px;
	height: 16px;
	display:block;
	background-color: #e1e1e1;
}
#nav-dot li span:hover {
	background-color: #149896;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
#nav-dot li.active span {
	background-color: #2c2e31;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

/* intro */
#intro, #second, #third, #fourth, #fifth, #sixth, #seventh {
	position: relative;
	width: 100%;
	height: 1030px;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	z-index: 3;
	color: #fff;
}
#intro {
	background:url(../images/bg_first.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}
#second {
	background: url(../images/bg_second.jpg) 50% 0 repeat-y fixed;
	background-size: cover;
}
#second .bg02_01 {
	background: url(../images/second_bg01.png) 50% 0 no-repeat fixed;
	height: 1300px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 100%;
}
#third {
	background: url(../images/bg_third.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}
#fourth {
	background: url(../images/bg_fourth.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}
#fourth .bg04_01 {
	background: url(../images/fourth_bg01.png) 50% 0 no-repeat fixed;
	height: 1300px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 100%;
}
#fifth {
	background: url(../images/bg_fifth.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}
#sixth {
	background: url(../images/bg_sixth.jpg) 50% 0 no-repeat fixed;
}
#seventh {
	background: url(../images/bg_seventh.jpg) 50% 0 no-repeat fixed;
}

.story {
	margin: 0 auto;
	overflow: hidden;
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
}

/* slide_banner */
#banner_wrap {
	float: left;
	width: 400px;
	height: 22px;
	margin-top: -1px;
	line-height: 22px;
	overflow: hidden;
	color: #eaac41;
	font-size: 12px;
	text-align: right;
}

/* header */
.top-menu-wrap {
	position: relative;
	padding: 9px;
	background-color: #303640;
	border-bottom: 1px solid #26282b;
}
.top-menu {
	float: right;
}
.top-menu a {
	color: #b9b9b8;
	padding: 5px 10px;
	margin: 0 2px;
	border: 1px solid #7d7d7d;
	background-color: #2a2c36;
	text-decoration: none;
	font-size: 11px;
	text-align: center;
}
.top-menu a:hover {
	color: #fff;
	border: 1px solid #389796;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
#slidemenu i {
	color: #149896;
	margin-left: 8px;
	font-size: 20px;
	vertical-align: top;
}
#slidemenu li.active i {
	color: #ddd;
}

/* footer */
#footer {
	width: 100%;
	position: absolute;
	bottom: 0;
	z-index: 100;
}
#footer .address {
    font-size: 11px;
	color: #fff;
}
#footer .copyright {
	margin-top: 3px;
	font-size: 12px;
	color: #737373;
}
.section-bottom {
	width: 100%;
	padding: 25px 20px 50px 20px;
	background: rgba(54,55,59,0.9);
}
.section-footer {
	width: 100%;
	padding: 20px;
	background: #18171c;
}
.policy-link ul {
	float: left;
	margin: 0 15px;
}
.policy-link ul li {
	padding: 10px 4px;
	font-size: 12px;
	color: #fff;
	border-bottom: 1px dashed #8b8c90;
}
.footer-list {
	text-align: left;
}
.footer-list strong {
	font-size: 17px;
	display: block;
	margin: 4px 0 3px 0;
	color: #fff;
}
.footer-list a, .footer-list p {
	color: #c7c7c7;
	font-size: 14px;
}
.footer-list span {
	margin-right: 20px;
}
.sub-footer {
	position: relative !important;
}

/* sub */
#sub-introduce {
	position: relative;
	width: 100%;
	height: 270px;
	margin: 0 auto;
	padding: 0;
}
#sub-introduce {
	background: url(../images/bg_first.jpg) 50% 0% no-repeat;
	background-size: cover;
	-webkit-animation: animate_background 20s linear;
	-moz-animation: animate_background 20s linear;
	-o-animation: animate_background 20s linear;
	animation: animate_background 20s linear;
}

/* media */
@media all and (min-width: 768px) {
	.story {
		width: 1170px;
	}
}

@media all and (min-width:0px) and (max-width:767px) {
	/* index */
	.btn-main {
		position: relative;
		top: 450px;
		left: 3%;
	}
	.btn-main > a.btn {
		width: 45%;
	}
	.btn-main > a.btn img {
		 width: 90%;
	 }
	.btn-main.btm {
		position: relative;
		top: 245px;
		left: 3%;
	}
	/* visual */
	.textContL {
		top: 170px;
		left: 5%;
		font-size: 1.5em;
		line-height: 30px;
	}
	.textContS {
		top: 280px;
		left: 5%;
		font-size: 1em;
		line-height: 22px;
	}

	/* visual position */
	.intro-01, .intro-02, .intro-03,
	.second-01, .second-02, .second-03,
	.third-01, .third-02, .third-03,
	.fourth-01, .fourth-02, .fourth-03 {
		top: 150px; left: 60%;
		width: 30%;
		max-width: 140px;
	}
	.fifth-01, .fifth-02, .fifth-03 {
		width: 30%;
		max-width: 140px;
	}
	.fifth-01 {
		top: 150px; left: 60%;
	}
	.fifth-02, .fifth-03 {
		top: 150px; left: 50%;
	}
	.sixth-01 {
		top: 160px; left: 55%;
		width: 30%;
		max-width: 140px;
	}
	.sixth-02 {
		display: none;
	}
	.sixth-03 {
		top: 200px; left: 65%;
		width: 60%;
		max-width: 250px;
	}
	.sixth-04 {
		display: none;
	}

	/* nav-dot */
	#nav-dot {
		right: 4%;
		top: 35%;
	}
	#nav-dot li span {
		width: 12px;
		height: 12px;
	}

	/* intro */
	#intro, #second, #third, #fourth, #fifth, #sixth, #seventh {
		height: 700px;
	}
	#second {
		background: url(../images/bg_second.jpg) 0 0 no-repeat;
	}
	#second .bg02_01 {
		display: none;
	}
	#third {
		background: url(../images/bg_third.jpg) 0 0 no-repeat;
	}
	#fourth {
		background: url(../images/bg_fourth.jpg) 50% 0 no-repeat;
	}
	#fourth .bg04_01 {
		display: none;
	}
	#fifth {
		background: url(../images/bg_fifth.jpg) 50% 0 no-repeat;
	}
	#sixth {
		background: url(../images/bg_sixth.jpg) 50% 0 no-repeat;
	}
	#seventh {
		background: url(../images/bg_seventh.jpg) 50% 0 no-repeat;
	}

	/* footer */
	.section-bottom {
		width: 100%;
		padding: 0;
	}
	.footer-list span {
		width: 20%;
	}
}

@media all and (min-width:768px) and (max-width:991px) {
	.navbar .container {
		padding-right: 0;
		padding-left: 0;
		width: 790px;
	}

	/* index */
	.btn-main {
		position: relative;
		top: 650px;
		left: 3%;
	}
}