@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
/* CSS Document */

a {	
	color:#333333;
	text-decoration:none;
	/*font-family: 'Russo One', sans-serif;
	font-family: 'Noto Sans KR', sans-serif;*/
}

a:hover {	
	text-decoration:none;
}


html, body{
	font-family: 'Noto Sans KR', sans-serif;
	overflow-x: hidden;
	width: 100%;
	-ms-overflow-style: none;
	min-width: 1400px;
}
::-webkit-scrollbar{
	display: none;
}

.none{
	display:none;
}
.abs{
	position:absolute;
}

.rel{
	position:relative;
}

.clear:after{
	content: "";
	display: block;
	clear: both;
	position: absolute;
	overflow: hidden;
	text-indent: -99px;
	height: 0;
	width: 0;
	font-size:0;
}

#wrap{
	width:100%;
	min-width: 1400px;
}


/****헤더영역****/

#header{
	position:relative;
	width: 100%;
	height: 90px;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid #d0dae1;
	transition: all .5s;
	min-width: 1440px;
}

#header .logobox{
	position: absolute;
	left: 50px;
	top: 17px;
	z-index: 5;
}

#header .tellbox{
	position: absolute;
	top: 35px;
	right: 50px;
	z-index: 5;
}


.nav{
	position: relative;
	
}

.gnb_box {
	display: flex;
	justify-content: center;
	position: relative;
	top: 32px;
	right: -15%;
	transition:all .3s;
}


.gnb_box .gnb > li {
	float:left; 
	position:relative;
}

.gnb_box .gnb > li:first-child:before {
	display:none;
}
.gnb_box .gnb > li > a {
	display:block;
	padding:0 25px 33px 25px;
	color:#050e19;
	font-size:16px;
	line-height:26px;
	font-weight:500;
	font-family: 'Noto Sans KR', sans-serif;
}
.gnb_box .gnb li:hover a{
	color: #64376f;
}


.gnb_box .gnb > li > .depth {
	position:absolute;
	top:100%;
	left:50%;
	padding:0;
	border:none;
	background:#64376f;
	transform:translateX(-50%);
	text-align:center;
	max-height:0;
	overflow:hidden;
	opacity:0;
	transition:all .3s;
	border-radius:20px;
	margin-top:-15px;
}
.gnb_box .gnb > li:hover > .depth {
	max-height:500px;
	opacity:1;
	padding:20px 40px;
	border:1px solid #e1e1e1;
}
.gnb_box .gnb > li > .depth > li {
	padding:10px;
}
.gnb_box .gnb>li>.depth>li>a {
	color:#fff;
	font-size:15px;
	line-height:15px;
	font-weight:400;
	white-space:nowrap;
	font-family: 'Noto Sans KR', sans-serif;
	position: relative;
}
.gnb_box .gnb>li>.depth>li:hover>a:before{
	content: '';
	display: block;
	position: absolute;
	height: 1px;
	width: 100%;
	bottom: -5px;
	left: 50%;
	transform:translateX(-50%);
	background-color: #fff;
}
/****헤더영역****/




/****메인영역****/
#main{
	width: 100%;
	position: relative;
	
}


#main section{
	position: relative;
}

#main .main_box{
	width: 1920px;
	left: 50%;
	margin-left: -960px;
	height: 814px;
	overflow: hidden;
}

.open{
	position: absolute;
	z-index: 10;
	left: 50px;
	top: 50px;
	transition:all .3s;
}

.mainbg{
	display: block;
	transform: scale(1.2,1.2)
}
.textbox01,
.textbox02,
.textbox03{
	position: absolute;
	z-index: 5;
	opacity: 0;
}


.textbox01{right: 270px; top: 172px;}
.textbox02{right: 270px; top: 312px;}
.textbox03{right: 270px; top: 325px;}

/****메인영역****/




/****프리미엄영역****/
#premium{
	width: 100%;
	position: relative;
}


#premium:before{
	content: "";
	display: block;
	width: 183px;
	height: 293px;
	position: absolute;
	background:url("../img/main/deco01.png") no-repeat;
	left: 0;
	top: 308px;
	
	
}

.premiumbox{
	position: relative;
	width:1920px;
	left: 50%;
	margin-left: -960px;
	overflow: hidden;
}

.premium_title{
	width: 1650px;
	height: 447px;
	background: url("../img/main/premium_title.png") no-repeat;
	background-position: center;
	margin-left: 470px;
	margin-top: 115px;
	position: relative;
	transition: all ease 1.5s;
	opacity: 0;
}

.premium_title.on{
	margin-left: 270px;
	opacity: 1;
}




.premium_sldiebox{
	width: 1380px;
	margin: 0 auto;
	position: relative;
	top: 100px;
	opacity: 0;
	transition: all ease 1.5s;
}

.premium_sldiebox.on{
	top: 0px;
	opacity: 1;
}



/* 프리미엄 슬라이드 */
.premiumslide{
	padding: 100px 0 130px 0;
	overflow: hidden;
}

/* 프리미엄 슬라이드 */

/****프리미엄영역****/





/****석세스 로케이션 및 석세스 디자인 영역****/
#location{
	width: 100%;
	position: relative;
}

#location:before{
	content: "";
	display: block;
	width: 209px;
	height: 196px;
	position: absolute;
	background:url("../img/main/deco02.png") no-repeat;
	right: 0;
	top: 308px;
	
	
}

.locationbox{
	width: 1380px;
	margin: 0 auto;
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: space-between;
}



.success_location,
.success_design{
	width: 614px;
	position: relative;
	opacity: 0;
	transition: all ease 1.5s;
}

.locationbox .success_location{top: 100px;}
.locationbox .success_design{top: -100px;}

.locationbox.on .success_location{top: 0px; opacity: 1;}
.locationbox.on .success_design{top: 0px; opacity: 1;}



.title_font{
	font-family: 'Russo One', sans-serif;
	font-size: 45px;
	color: #bfbfbf;
}

.title_font span{
	color: #64376f;
}
.success_location_st{
	font-size: 16px;
	font-family: 'Noto Sans KR', sans-serif;
	transform: skew(-0.1deg);
	padding-top: 10px;
	color: #888888;
}


.successimg_location_box{
	width: 614px;
	height: 655px;
	background: url("../img/main/success_location.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


.success_location_textbox{
	padding-bottom: 15px;
}


.success_design_textbox{
	text-align: right;
	padding-top: 15px;
}


.sclo_btn,
.scde_btn{
	position: absolute;
	z-index: 5;
	transition: all ease 0.5s;
}
.scde_btn:hover{transform: rotate( 45deg );}
.sclo_btn:hover{transform: rotate( 45deg );}




.style_aef a{
	display: block;
	width: 100%;
	height: 100%;
}


.sclo_btn{
	top: 10px;
	right: 10px;
}
.scde_btn{
	bottom: 10px;
	left: 10px;
}

.success_design_st{
	font-size: 16px;
	font-family: 'Noto Sans KR', sans-serif;
	transform: skew(-0.1deg);
	padding-top: 10px;
	color: #888888;
}

.successimg_design_box{
	width: 614px;
	height: 655px;
	background: url("../img/main/success_design.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/****석세스 로케이션 및 석세스 디자인 영역****/




/****퀵메뉴 영역****/
#qic_menu{
	width: 100%;
	padding: 80px 0 200px 0;
	overflow: hidden;
}

.qic_iconbox{
	width: 1380px;
	margin: 0 auto;
}

.qic_iconbox ul{
	display: flex;
}

.qic_iconbox>ul>li{
	position: relative;
	opacity: 0;
	transition: all ease 1.5s;
	top: 100px;
}


.qic_iconbox.on>ul>li{
	opacity: 1;
	top: 0;
}

.qic_iconbox.on>ul>li.qiclist01{transition-delay:0s}
.qic_iconbox.on>ul>li.qiclist02{transition-delay:0.4s}
.qic_iconbox.on>ul>li.qiclist03{transition-delay:0.8s}
.qic_iconbox.on>ul>li.qiclist04{transition-delay:1.2s}




.qic_title{
	text-align: center;
	padding: 50px 0 70px 0;
}
.qic_title p:nth-child(1){
	color: #707070;
	font-size: 20px;
	font-family: 'Noto Sans KR', sans-serif;
	letter-spacing: -0.5px;
}
.qic_title p:nth-child(2){
	color: #64376f;
	font-size: 45px;
	font-weight: 700;
	font-family: 'Noto Sans KR', sans-serif;
}
/****퀵메뉴 영역****/


/****푸터 영역****/

#footer{
	width: 100%;
	background-color: #333333;
	padding: 80px 0;
}


.fticon{
	text-align: center;
}

.oribox{
	padding-top: 25px;
}
.oribox p{
	text-align: center;
	line-height: 25px;
	font-size: 13px;
	color: #a4a4a4;
}

.copyright{
	text-align: center;
	line-height: 25px;
	font-size: 12px;
	color: #a4a4a4;
	padding-top: 30px;
}

.copyright a{
	color: #a4a4a4;
}
/****푸터 영역****/



/****서브페이지****/

#subhead{
	width: 100%;
	position: relative;
}

.subimgWrap{
	width: 1920px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
	height: 313px;
}


.subPage{
	width: 100%;
	padding-top: 30px;
}

.subtitle{
	text-align: center;
	font-family: 'Noto Sans KR', sans-serif;
	letter-spacing: -0.5px;
	transform : rotate(0.04deg);
	font-weight: 300;
	font-size: 35px;
	color: #414141;
	padding-top: 50px;
	padding-bottom: 25px;
	
	display: none;
}

.subarea{
	width: 1300px;
	position: relative; 
	left: 50%;
	transform: translateX(-50%);
	padding-bottom: 200px;
}

.iframbox{
	width: 1200px;
	position: relative;
	margin: 0 auto;
	padding-top: 70px;
}


/*메뉴부분 미디어쿼리*/

@media screen and (max-width: 1760px) {
	.gnb_box {
		right: -5%;
		transition:all .3s;
	}
}

@media screen and (max-width: 1820px) {
	.open {
		left: 14%;
		
	}
}

/*메뉴부분 미디어쿼리*/