@charset "utf-8";

/* 구글 폰트 API 웹 다이렉트 링크 */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,700&subset=korean');
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&subset=korean');
@import url('https://fonts.googleapis.com/css?family=Do+Hyeon');
@import url('https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap');

html{
	height : 100%;
	padding : 0;
	margin : 0;
	font-family : 'Noto Sans KR', sans-serif, 'MalgunGothic';
}
body{
	height : 100%;
	padding : 0;
	margin : 0;
}

a{
	color : inherit;
	text-decoration : none;
}

.WRAPPER{
	width : 1024px;
	margin : 0 auto;
}

header{
	position : fixed;
	top : 0;
	right : 0;
	left : 0;
	height : 100px;
	background-image : linear-gradient( to bottom, rgba(0,0,0,.75), rgba(0,0,0,0) );
	z-index : 1000;
	overflow : hidden;
}
header > .WRAPPER > .MAINLOGO{
	float : left;
	display : block;
	height : 62px;
	margin : 14px 0;
}
header > .WRAPPER > nav{
	float : right;
	margin : 20px 0;
	font-size : 0;
}
header > .WRAPPER > nav > a{
	display : inline-block;
	height : 60px;
	margin-left : 16px;
	color : #FFF;
	line-height : 60px;
	font-family : 'Noto Sans KR', sans-serif;
	font-weight : normal;
	font-size : 16px;
}

.PAGE {
	position: relative;
	width : 100%;
	height : 100%;
	padding : 0;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	box-sizing : border-box;
	overflow : hidden;
}
.PAGE > .PAGE-CONTENT{
	position : relative;
	width : auto;
	height : 100%;
	padding : 164px 0 128px 0;
	margin : 0 auto;
	box-sizing : border-box;
	z-index : 200;
}
.PAGE > .NEXT-PAGE{
	position : absolute;
	bottom : 24px;
	left : 50%;
	width : 60px;
	height : 32px;
	margin-left : -30px;
	border : 0;
	outline : 0;
	background-color : transparent;
	background-image : url("/images/main-page-next.png");
	background-repeat : no-repeat;
	background-size : cover;
	background-position : center;
	font-size : 0;
	z-index : 990;
	cursor : pointer;
	opacity : .5;
	transition :
		bottom .25s ease-in-out,
		opacity .25s ease-in-out
}
.PAGE > .NEXT-PAGE:hover{
	bottom : 16px;
	opacity : 1
}

.PAGE[data-page="1"]{}
.PAGE[data-page="1"] > .PAGE-CONTENT{
	position : absolute;
	top : 50%;
	width : 100%;
	height : 480px;
	padding : 0;
	margin-top : -290px;
	text-align : center;
}
.PAGE[data-page="1"] > .PAGE-CONTENT img{
	height : 100%;
}

.PAGE[data-page="2"]{
	background-image : url("/images/background-page2.jpg");
}
.PAGE[data-page="2"] > .PAGE-CONTENT{
	text-align : center;
}
.PAGE[data-page="2"] > .PAGE-CONTENT > h2{
	margin-bottom : 48px;
	color : #FFF;
	font-family : 'Noto Sans KR';
	font-weight : 400;
	font-size : 24px;
}
.PAGE[data-page="2"] > .PAGE-CONTENT > a{
	display : inline-block;
	width : 192px;
	margin : 0 24px;
	padding : 16px 32px;
	border : solid 1px #FFF;
	color : #FFF;
	font-family : 'Noto Sans KR';
	font-weight : 400;
	font-size : 16px;
	cursor : pointer;
}
.PAGE[data-page="2"] > .PAGE-CONTENT > div > img{
	max-height : 100%;
}
.PAGE[data-page="2"] > .PAGE-CONTENT > div.MOB{
	display : none;
}

.PAGE[data-page="3"]{
	height : 85%;
	background-image : url("/images/background-page3.jpg");
}
.PAGE[data-page="3"] > .PAGE-CONTENT{
	height : 90%;
	text-align : center;
}
.PAGE[data-page="3"] > .PAGE-CONTENT img{
	max-height : 100%;
}
.PAGE[data-page="3"] > .PAGE-CONTENT img.MOB{
	display : none
}


.MAIN-SLIDE{
	position : absolute;
	top : 0;
	right : 0;
	bottom : 0;
	left : 0;
	overflow : hidden;
	z-index : 100;
}
.MAIN-SLIDE > .MAIN-SLIDE-WRAPPER{
	width : auto;
	height : 100%;
	white-space : nowrap;
	font-size : 0;
}
.MAIN-SLIDE > .MAIN-SLIDE-WRAPPER > div{
	display : inline-block;
	width : 100%;
	height : 100%;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}


footer{
	background-color : rgba(33,44,66,.75);
	/*border-top : solid 1px #EEE;*/
	overflow : hidden
}
footer > .FOOTER-INFO{
	padding : 32px 0;
	overflow : hidden
}
footer > .FOOTER-INFO > .FOOTER-LOGO{
	float : left;
	width : 349px;
	height: 160px;
	border-right : solid 1px #EEE;
	text-align : center
}
footer > .FOOTER-INFO > .FOOTER-LOGO > img{
	height : 70px
}
footer > .FOOTER-INFO > address{
	float : left;
	width : 460px;
	height: 160px;
	padding : 0 20px;
}
footer > .FOOTER-INFO > address > span{
	display : block;
	margin-bottom : 4px;
	font : normal 14px/normal 'Noto Sans KR', sans-serif;
	color : #EEE
}
footer > .FOOTER-INFO > address > span > strong{
	display : inline-block;
	width : 120px;
	margin-right : 20px;
	font-size : 16px;
	color : #FFF;
	text-align : right
}
footer > .FOOTER-INFO > .GOTO-LINKS{
	float : left;
	width : 229px;
	height: 160px;
	padding : 0 0 0 20px;
	border-left : solid 1px #EEE
}
footer > .FOOTER-INFO > .GOTO-LINKS > a{
	display : block;
	width : 150px;
	padding : 12px;
	margin-bottom : 6px;
	background-color : #263E67;
	color : #FFF;
	font : normal 12px/normal Dotum
}
footer > .COPYRIGHT{
	padding : 16px;
	background-color : #ADB7C0;
	color : #FFF;
	text-align : center;
	font : normal 13px/normal 'Noto Sans KR', sans-serif
}

@media ( max-width : 571px ){
	
	.WRAPPER{
		width : 100%;
	}
	
	header{
		height : auto;
	}
	header > .WRAPPER{
		width : 100%;
		padding : 0 1rem;
		box-sizing : border-box;
	}
	header > .WRAPPER > .MAINLOGO{
		float : left;
		display : block;
		height : 2rem;
		margin : 1.5rem 0;
	}
	header > .WRAPPER > .MAINLOGO > img{
		height : 100%;
	}
	header > .WRAPPER > nav{
		float : right;
		margin : 1rem 0;
	}
	header > .WRAPPER > nav > a{
		display : block;
		height : 1.5rem;
		margin : 0;
		line-height : 1.5rem;
		text-align : right;
		font-size : .8rem;
	}
	
	.PAGE{
		position : relative;
		height : 90%;
		padding : 5rem 0 0 0;
	}
	.PAGE > .PAGE-CONTENT{
		position : absolute;
		top : 6rem;
		right : 1rem;
		bottom : 1rem;
		left : 1rem;
		width : auto !important;
		height : auto !important;
	}
	.PAGE > .NEXT-PAGE{
		display : none;
	}
	
	.PAGE[data-page="1"] > .MAIN-SLIDE > .MAIN-SLIDE-WRAPPER > div:nth-child(1){ background-image : url("/images/mob-background-main-1.jpg") !important }
	.PAGE[data-page="1"] > .MAIN-SLIDE > .MAIN-SLIDE-WRAPPER > div:nth-child(2){ background-image : url("/images/mob-background-main-2.jpg") !important }
	.PAGE[data-page="1"] > .MAIN-SLIDE > .MAIN-SLIDE-WRAPPER > div:nth-child(3){ background-image : url("/images/mob-background-main-3.jpg") !important }
	 
	.PAGE[data-page="1"] > .PAGE-CONTENT{
		background-image : url("/images/mob-content-page-1.png");
		background-repeat : no-repeat;
		background-size : contain;
		background-position : center;
	}
	.PAGE[data-page="1"] > .PAGE-CONTENT > img{
		display : none;
	}
	
	
	.PAGE[data-page="2"] {
			background-image : url("/images/mob-background-page2.jpg");
	}
	.PAGE[data-page="2"] > .PAGE-CONTENT{
		padding : 0;
		margin : 0;
	}
	.PAGE[data-page="2"] > .PAGE-CONTENT >  h2{
		font-size : 1rem;
	}
	.PAGE[data-page="2"] > .PAGE-CONTENT > div.PC{
		display : none;
	}
	.PAGE[data-page="2"] > .PAGE-CONTENT > div.MOB{
		display : block;
		width : 100%;
		height : auto;
		text-align : center;
	}
	.PAGE[data-page="2"] > .PAGE-CONTENT > div.MOB > img{
		width : 80%
	}
	.PAGE[data-page="2"] > .PAGE-CONTENT > a{
		display : inline-block;
		margin : 1rem .5rem;
		width : 40%;
		height : 3rem;
		padding : 0;
		line-height : 3rem;
		font-size : .7rem;
		verticall-align : top;
	}
	
	.PAGE[data-page="3"] > .PAGE-CONTENT{
		padding : 0;
		margin : 0;
	}
	.PAGE[data-page="3"] > .PAGE-CONTENT > img.PC{
		display : none;
	}
	.PAGE[data-page="3"] > .PAGE-CONTENT > img.MOB{
		display : block;
		width : 80%;
		margin : 2rem auto;
	}
	
	footer > .FOOTER-INFO > .FOOTER-LOGO {
		width: 100%;
		height: 80px;
			border: none;
			text-align: center;
	}
	footer > .FOOTER-INFO > address {
			width: 95%;
			height: 120px;
	}
	footer > .FOOTER-INFO > address > span {
			font: normal 0.7rem/normal 'Noto Sans KR', sans-serif;
		display: block;
			margin-bottom: 4px;
	}
	footer > .FOOTER-INFO > address > span > strong {
			width: 100px;
			margin-right: 8px;
			font-size: 0.8rem;
	}
}