@import url("menu_all.css");


/* Header */
.large-header {
	position: relative;
	width: 100%;
	/* background: #333; */
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	z-index: 1;
}

.demo-2 .large-header1 {
	background-image: url('../../../images/new_storysom/main/visual_01.jpg');
	background-size: cover;
	background-position: center center;
}
.demo-2 .large-header2 {
	background-image: url('../../../images/new_storysom/main/visual_02.jpg');
	background-size: cover;
	background-position: center center;
}
.demo-2 .large-header3 {
	background-image: url('../../../images/new_storysom/main/visual_03.jpg');
	background-size: cover;
	background-position: center center;
}
.demo-2 .large-header4 {
	background-image: url('../../../images/new_storysom/main/visual_04.jpg');
	background-size: cover;
	background-position: center center;
}
.demo-2 .large-header5 {
	background-image: url('../../../images/new_storysom/main/visual_05.jpg');
	background-size: cover;
	background-position: center center;
}

.login-area {
	position: absolute;
	margin: 0;
	padding: 0;
	/* color: #f9f1e9; */
	text-align: center;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
	border:0px solid red;
}

.demo-2 .login-area {
	/* font-family: 'Clicker Script', cursive;
	font-size: 8em;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	padding-left: 10px;  */
	font-weight: normal;
	border:0px solid red;
	/* width:100%; */
}

.demo-2 .login-area::before {
	content: '';
	width: 20vw;
	height: 20vw;
	/* min-width: 3.5em;
	min-height: 3.5em;
	border-radius: 50%;
	background: url(../img/deco.svg) no-repeat center center; */
	background-size: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

.login-area .thin {
	font-weight: 200;
}

/*
@media only screen and (max-width : 768px) {
	.demo-2 .login-area {
		font-size: 4em;
	}
}
*/

/* 메인 하단 문구&버튼 */
.page-down { 
	position: absolute;
	left: 50%;
	bottom: 7%;
	margin-left: -118px;
	border:0px solid yellow;
}
.page-down > p { text-align:center; }
.page-down .eng { font-size:20px; font-weight:bold; color:#00a1e9; letter-spacing:1px; text-transform:uppercase; }
.page-down .kor { font-size:15px; font-weight:normal; color:#303030; }
.page-down .arrow { padding-top:40px; }


/*	버튼*/

/* General button style (reset) */
.btn-login {
	border: none;
	font-size: 20px;
	color: inherit;
	background: none;
	cursor: pointer;
	padding: 6px 16px;
	display: inline-block;
	margin: 23px 0 0 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	outline: none;
	position: relative;
	border-radius:10px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

@media screen and (max-width:640px) {

.btn-login {
	border: none;
	font-size: 20px;
	color: inherit;
	background: none;
	cursor: pointer;
	padding: 10px 50px;
	display: inline-block;
	margin: 23px 0 0 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	outline: none;
	position: relative;
	border-radius:10px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}


}

.btn-login:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

/* Button 1 */
.btn-1 {
	width:73px;
	border: 1px solid #fff;
	color: #fff;
}
.btn-2 {
	width:133px;
	border: 1px solid #9d9d9d;
	color: #9d9d9d;
	text-align:center;
	letter-spacing:-1px;
	margin:0;
}
	@media screen and (max-width:1100px) {
		.btn-2:first-child { margin-bottom:20px; }
	}

/* Button 1a */
.btn-1a:hover,
.btn-1a:active {
	color: #fff;
	background: #28ade9;
	border: 1px solid #28ade9;
}

/* Button 1b */
.btn-1b:after {
	width: 100%;
	height: 0;
	top: 0;
	left: 0;
	border-radius:10px;
	background: #f0c648;
}

.btn-1b:hover,
.btn-1b:active {
	color: #fff;
}

.btn-1b:hover:after,
.btn-1b:active:after {
	height: 100%;
}

/* Button 1c */
.btn-1c:after {
	width: 0%;
	height: 100%;
	top: 0;
	left: 0;
	background: #000;
}

.btn-1c:hover,
.btn-1c:active {
	color: #2f2f34;
	border: 1px solid #2f2f34;
}

.btn-1c:hover:after,
.btn-1c:active:after {
	width: 100%;
}