/*********************************
    css/common.css
*********************************/

* {
	margin			: 0;
	padding			: 0;
	font-family		: 'Nanum Gothic', sans-serif;
	border			: 0;
}

ul, img{
	font-size		: 0;
}

li {
	list-style		: none;
}

a {
	text-decoration	: none;
	color			: #000;
}

html,
body {
	width			: 100vw;
	font-size		: 14px;
	overflow-x		: hidden;
}


#bodyWrap{
	font-size		: 14px;
}

/***********************
	fullImg 
************************/
.fullImg {
	width			: 100%;
	min-height		: 100%;
} 

/***********************
	각페이지 topSlogan
************************/
.topSlogan {
	width				: 100%;
	left				: 0;
	top					: 0;
}

/**********************
	헤더
********************* */
.headerWrap{
/*	position		: fixed;*/
/*	top				: 0;*/
/*	left			: 0;*/
/*	width			: 100%;*/
/*	height			: 50px;*/
/*	z-index			: 2000;*/
}

/***********************
	logWrap 
************************/
#logWrap{
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translate(-50%, -50%);
	-webkit-transform	: translate(-50%, -50%);
	z-index				: 9999999;
	animation			: logWrap 3s;
	animation-fill-mode	: forwards;
	width				: 0;
	height				: 0;
}

@keyframes logWrap {
	0%{
		width		: 0;
		height		: 0;
		opacity		: 0;
	}
	100% {
		width		: 700px;
		height		: 715px;
		opacity		: 1;
	}
}


#menuLogo {
	position			: absolute;
	top					: 50%;
	-webkit-transform	: translateY(-50%);
	transform			: translateY(-50%);
	left				: 1%;
	z-index				: 9999999;
}

/***********************
	mainMenuWrap 
************************/
#mainMenuWrap{
	position			: fixed;
	top					: 0;
	left				: 0;
	width				: 100%;
	height				: 65px;
	z-index				: 100;
	background-color	: #f0f2f5;
}

#mainMenu{
	display				: inline-block;
	width				: auto;
	height				: 100%;
	font-size			: 0;
	position			: relative;
	left				: 50%;
	-webkit-transform	: translateX(-50%);
	transform			: translateX(-50%);

}

#mainMenu:after {
	content				: '';
	display				: block;
	clear				: both;
}

#mainMenu > li{
	font-size			: 14px;
	padding				: 0 30px;
	height				: auto;
	text-align			: center;
	float				: left;
	cursor				: pointer;
	position			: relative;
}

#mainMenu #centerLogo {
	padding				: 0 60px;
	position			: relative;
	position			: relative;
}

#centerLogo img {
	position			: absolute;
	top					: 50%;
	left				: 50%;
	-webkit-transform	: translate(-50%, -50%);
	transform			: translate(-50%, -50%);
}


#mainMenu li > a{
	display				: block;
	width				: 100%;
	color				: #4a4a4a;
	line-height			: 65px;
}

#mainMenu > li ul {
	position			: absolute;
	top					: 100%;
	left				: 50%;
	height				: auto; 
	-webkit-transform	: translateX(-50%);
	transform			: translateX(-50%);
	display				: none; 
	/* width				: 100%; */
	background-color	: rgba(148,186,199,0.9);
}

#mainMenu > li ul li {
	color				: #fff;
}

#mainMenu > li ul li a{
	display				: block;
	padding				: 18px 40px;
	white-space			: nowrap;
	color				: #fff;
	font-size			: 14px;
	line-height			: 0;
	text-align			: center;
	width				: auto;
}
/* room pre */
#mainMenu > li #roomPre {
	width				: 670px;
	height				: 200px;
	background-color	: rgba(148,186,199,0.9);
	position			: absolute;
	top					: 100%;
	left				: 50%;
	height				: auto; 
	-webkit-transform	: translateX(-50%);
	transform			: translateX(-50%);
	display				: none;
}

#mainMenu > li #roomPre ul {
	width				: 335px;
	height				: 200px;
	top					: 0;
	left				: 0;
	-webkit-transform	: translateX(0);
	transform			: translateX(0);
	display				: block;
	padding				: 25px 0 25px 30px;
	box-sizing			: border-box;
	background-color	: transparent;
}

#mainMenu > li #roomPre ul a {
	background-color	: transparent;
	padding				: 18px 0;
	text-align			: left;
}

#mainMenu > li #roomPre ul:after {
	display				: block;
	clear				: both;
	content				: '';
}

#mainMenu > li #roomPre ul li {
	width				: 50%;
	float				: left;
}

#roomPre:after {
	display				: block;
	clear				: both;
	content				: '';
}

#roomPre > div {
	width				: 335px;
	height				: 200px;
	float				: right;
	position			: relative;
}

#roomPre > div > img {
	position			: absolute;
	width				: 80%;
	top					: 50%;
	left				: 50%;
	-webkit-transform	: translate(-50%, -50%);
	transform			: translate(-50%, -50%);
	box-shadow			: 1px 2px 3px rgba(74, 78, 77, 0.8);
}


/***********************
	etcMenuWrap 
************************/
#etcMenuWrap{
	position			: fixed;
	top					: 0 !important;
	right				: 0 !important;
	width				: auto !important;
	height				: 65px !important;
	z-index				: 101 !important;
	-webkit-transform	: translateY(0);
	transform			: translateY(0);
}

#etcMenuWrap:after {
	content				: '';
	clear				: both;
	display				: block;
}

#etcMenuWrap > * {
	float				: left !important;
	width				: 65px !important;
	height				: 100% !important;
	background-color	: #fff !important;

}

#etcMenuWrap a {
	line-height			: 65px !important;
	text-align			: center !important;
	display				: block !important;
	width				: 100% !important;
	height				: 100% !important;
	font-size			: 21px !important;
}

#etcMenu {
	background-color	: #5e7b82 !important;
}





/*
 pull page 스크롤 스타일
*/

#main_menu {
	position			: fixed;
	top					: 50%;
	-webkit-transform		: translateY(-50%);
	transform			: translateY(-50%);
	/* left				: calc(100vw - 68px); */
	left				: 0;
	z-index				: 1000;
	width				: 40px;
}

#main_menu > li {
	width				: 25px;
	height				: 1px;
	margin-top			: 8px;
	transition			: all 0.3s;
	background			: #fff;
}

#main_menu > li.active {
	width				: 40px;
	background			: #000;
}

#main_menu > li > a {
	display				: block;
	width				: 100%;
	height				: 100%;
}



/*
	전화면 다 채우는 레이어
*/
.infoPlusInfo{
	z-index				: 50;
	position			: absolute;
	top					: 50%;
	left				: 5%;
	transform			: translateY(-50%);
	-webkit-transform			: translateY(-50%);
	cursor				: pointer;
}

.infoMinusInfo{
	z-index				: 1050;
	position			: absolute;
	top					: 50%;
	right				: 5%;
	transform			: translateY(-50%);
	cursor				: pointer;
}

.infoWrap{
	z-index				: 1000;
	position			: absolute;
	left				: -100%;
	width				: 100%;
	height				: 100%;
	background-color	: rgba(255, 255,255, 0.9);
}

.infoContentsWrap{
	z-index				: 1050;
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translate(-50%, -50%);
}

.infoTitleWrap{
	font-size			: 30px;
	color				: #4b4b4b;
	font-weight			: 700;
	text-align			: center;
	margin-bottom		: 50px;
}

.infoImgWrap{
	z-index				: 1050;
	width				: 18vw;
	height				: 18vw;
	min-width			: 12vh;
	min-height			: 12vh;
	border-radius		: 50%;
	background-position	: center;
	background-size		: cover;
	margin				: auto;
}

.infoContentWrap{
	width				: 50vw;
	height				: 25vh;
	overflow-y			: auto;
	margin-top			: 50px;
}



/**********************
	이미지 슬라이드 좌우 화살표
********************* */
.fp-controlArrow {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    height: 59px;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.fp-controlArrow.fp-prev {
	left				: 15px;
    width				: 260px;
	background-image	:url(/main/images/common/icon/arrow_prev.png);
}
.fp-controlArrow.fp-next {
	right				: 90px;
    width				: 235px;
	background-image	:url(/main/images/common/icon/arrow_next.png);
}

/* 메인페이지 슬로건 */
.mainSlogan {
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translate(-50%, -50%);
	-webkit-transform	: translate(-50%, -50%);
	z-index				: 3;
}

.mainSlogan.mainSlogan0 {
	animation			: logWrap 3s forwards; /*logoWrap 에 keyframes있음*/
	width				: 0;
	height				: 0;
}

.mainSlogan1 {
	top					: 70%;
}

/* scroll */
#scroll {
	position			: fixed;
	bottom				: 3%;
	left				: 50%;
	transform			: translateX(-50%);
	-webkit-transform	: translateX(-50%);
	z-index				: 5;
}

/***********************
	media 
************************/
@media screen and (max-width: 1400px) {


	#mainMenu li {
		padding: 0 20px; 
	}

}