@import url("../../css/reset.css");

html { -webkit-text-size-adjust: 100%;}
body{background-color:#fff;text-align:center;*word-break:break-all;-ms-word-break:break-all;}
body, h1, h2, h3, h4, input, button {font-size: 13px; line-height: 160%; color: #666; margin: 0; padding: 0; letter-spacing: -1px;}
img { vertical-align: top; }
button{margin:0;padding:0}
a{color:#666;text-decoration:none}
a:hover{color:#666;}
input { margin: 0; }
input::-ms-clear { display: none; }
iframe { border: 0; margin: 0; padding: 0; }
input, select { vertical-align: middle; }
caption, legend { overflow: hidden; position: absolute !important; top: -999px; left: -9990px; width: 1px; height: 1px; line-height: 0; font-size: 0 }
i,em,address{font-style:normal}
label,button{cursor:pointer}
sup { vertical-align: super; font-size: smaller; }
input{ color: #666; height: 32px; line-height: 32px; font-size: 1.0em; border: 1px solid #e2e2e2; }
textarea{ color: #666; padding:10px; font-size: 1.0em; border: 1px solid #e2e2e2; }
select{ color: #666; border:1px solid #e2e2e2; height:27px; padding:1px;}
input[type="checkbox"], input[type="radio"] { color: #666;  border:none; vertical-align:middle;margin:2px 4px 4px 4px;}



/* 팝업 스타일 Begin */
.layer_pop { position:absolute; background:#efefef; z-index:9; border: 1px solid #b3b3b3; box-sizing: content-box; }
.popContents { width:100%; height:100%; }
.popContents a { display: block; position: absolute; margin: auto; text-indent: -9999px; background: rgba(0,0,0,0); }
.popContents img { width: 100%; }
.popBtns { width:100%; font-size:12px; padding-bottom: 30px; }
.popBtns input { vertical-align:top; margin-right:5px; height: auto; }
.popBtns span { display:block; position:absolute; }
.popBtns span.checkBox { padding: 1.5%; }
.popBtns span.closeWin { padding:7px; right:10px; }
/* 팝업 스타일 End */



#wrap{position:relative;  min-width:320px; max-width:640px; margin:0 auto; width:100%; text-align: left; overflow:hidden;}

header{position:relative; text-align:center; z-index: 99;}
header .top{position:relative; height:60px; background-color: #000; }
header .logo{padding-top: 16px; margin: 0 auto; }
header .logo img{ width: 96px }
header .tel{position:absolute; right: 75px; top: 20px; }
header .tel img{ height: 24px; }
header .kakao_link{ position:absolute; right:0; top: 0; }
header .kakao_link img{  }
header .menu_btn{position:absolute; left:4.6875%; top:20px; }
header .menu_btn img{width:24px;}
header .menu_btn a{position:absolute; top:0; left:0;}
header .menu_btn a.close_btn{/*left:-60px; top:-2px;*/opacity: 0; z-index: -1}

.gnb{ display:none; position:absolute; top: 60px; width:100%; background-color: #ca6f5b; height:100%; z-index: 9999;}
.gnbBg { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.6); z-index:88; }
.gnb>ul{padding:0; width: 76.5625%; margin: 0 auto; overflow: hidden; }
.gnb>ul>li{ position: relative; width:100%; }
.gnb>ul>li>a{height:50px; line-height:50px; display:block; font-size:20px; color: #fff; border-bottom: 1px solid #dfdfdf;}
		.gnb>ul>li>a::after {content: url(../images/common/menu_arrow.png); position: absolute; right: 5px; top: 5px }
		.gnb>ul>li>a.on::after {content: url(../images/common/menu_arrow.png); position: absolute; right: 13px;
			-ms-transform: rotate(90deg);
			-ms-transform-origin: 50% 50%;
			-webkit-transform: rotate(90deg);
			-webkit-transform-origin: 50% 50%;
			transform: rotate(90deg);
			transform-origin: 50% 50%;

			-ms-transition: all 0.2s;
			-webkit-transition: all 0.2s;
			transition: all 0.2s;
			}
/*.gnb>ul>li:last-child>a{border-bottom: 1px solid #05203E;}*/
.gnb>ul>li>a#gnbon{color: #fff; font-weight: 600; }
.gnb>ul>li>ul{ padding: 15px 0; background: #82493c }
.gnb>ul>li>ul>li>a{ height:35px; line-height:35px; text-indent: 15px; display:block; font-size:18px; color:#ccc;}
.gnb>ul>li>ul>li#subon > a{color:red;}

.menu_title { position: relative; width: 76.5625%; max-width: 485px; margin: 80px auto 30px auto; text-align: center; }
.menu_title img { width: 100%; }

.gnb .quick { position: relative; width: 76.5625%; margin: 50px auto 0; }
.gnb .quick ul { position: absolute; left: 0; width: 100%; }
.gnb .quick li { float: left; width: 25%;}
.gnb .quick li a { display: block; text-indent: -9999px; background: rgba(0,0,0,0); padding-bottom: 50%; }
.gnb .quick img { width: 100% }



/*footer*/
#footer { position: relative; width: 100%; /*padding: 4.6875%;*/ }
#footer img { width: 100%; }
#footer div { position: absolute; top: 42%; width: 46%; right: 5%; }
#footer div a { position: absolute; text-indent: -9999px; background: rgba(0,0,0,0); width: 50%; height: 40px; }
#footer div a.link2 { right: 0; }







/******************************************************************

main

*******************************************************************/
.open { width: 100%; position: absolute; z-index: 7; top: 80px; }
.open a { display: block; position: absolute; right: 20px; }
.open a img { width: 100%; }

/**/
.banner_schedule { position: relative; margin-bottom: 21%; }
.banner_schedule img { width: 100%; }
/**/
.main_brand { position: relative; }
.main_brand img { width: 100%; }
.main_brand a { position: absolute; display: block; left: 0; bottom:5%; width: 100%; height: 30%; text-indent: -999999px; background: rgba(0,0,0,0); }

/**/
.main_quick { position: relative; text-align: center; margin: 17% 0; }
.main_quick img { width: 100%; }
.main_quick a { position: absolute; display: inline-block; width: 33%; height: auto; padding-bottom: 17%; text-indent: -999999px; background: rgba(0,0,0,0); }
.main_quick .link1 { left: 0; }
.main_quick .link2 { left: 0; right: 0; margin: auto; }
.main_quick .link3 { right: 0; }
.main_quick .link4 { bottom: 0; left: 0; }
.main_quick .link5 { bottom: 0; left: 0; right: 0; margin: auto; }
.main_quick .link6 { bottom: 0; right: 0; }


.main_visual{position:relative; width:100%;}

/* visual slide */
.main_visual .visualSlide {position:relative; width:100%;}
.main_visual .visualSlide img{width:100%;}
.main_visual .visualSlide ul li {list-style: none; }
.main_visual .visualSlide ul li:first-child {display:block;}
ol.visual_control { display: none;
	margin:0 auto;
	text-align: center;
	width: 100%;
	padding:0;
	position: absolute;
	z-index: 8;
	top: 94%;
	line-height: 0;
}
ol.visual_control li {
	display: inline-block;
	width: 32px;
	height: 6px;
	margin: 0 3px;
	background:url('../images/main/visual_dot0.png') no-repeat;
	cursor:pointer;
	text-indent:-99999px;
	font-size:0;
}
ol.visual_control li.flex-active {
	 background:url('../images/main/visual_dot1.png') no-repeat;
}

.visualSlide .flex-direction-nav{ display: block; position: absolute; top: 0; }
.visualSlide .flex-nav-prev a { display: block; font-size: 0; background: url(../images/main/prev.png) no-repeat 0 0; width: 60px; height: 60px; }
.visualSlide .flex-nav-next { display: none; }


/* premium slide */
.flexslider {
	position: relative;
	width:100%;
	background-size: 100%;
	overflow: hidden;
}
.flexslider img {
	width:100%;
}
.flex-direction-nav{ display: block; width: 97%; height: 30px; z-index: 2; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0 }
		.flex-direction-nav li { width: 30px; height: 100%; display: inline-block; background-size: 100%; background-repeat: no-repeat; }
		.flex-direction-nav li a { text-indent: -10000%; display: block; }
		.flex-direction-nav .flex-nav-prev { background-image: url(/image/main/premium/prev.png); }
		.flex-direction-nav .flex-nav-next { float: right; background-image: url(/image/main/premium/next.png); }

.flex-viewport .slides{position: relative; padding:0; margin: }
.flexslider-controls{ display: none;
	position:absolute;
	width:100%;
	z-index: 999;
	top: 0;
}
.flex-control-nav{ display: none;
	position: absolute;
	z-index: 999;
	right: 7.8125%;
	line-height: 0;
}
.flex-control-nav li {
	display: inline-block;
	width: 2px;
	height: 15px;
	margin-left: 15px;
	background:url('../images/main/dot0.png') no-repeat;
	cursor:pointer;
	text-indent:-99999px;
}
.flex-control-nav .flex-active {
	background: url('../images/main/dot1.png') no-repeat;
}


/******************************************************************

sub

*******************************************************************/
.container .contents_wrap{text-align: center; position:relative; margin-bottom: 80px;}
.container .contents_wrap.mb0 { margin-bottom: 0; }
.container .contents_wrap .inner { position: relative; }
.container .contents_wrap .inner img { width: 100%; }
.container .contents_wrap > img{width:100%;}

/* sub page location */
.sub_top {height: 110px; position: relative; /*background-image: url(../images/sub/top.jpg); background-size: cover; background-position: center;*/ background-color: #676b6e; width: 100%; }
.sub_top .title { position: absolute; letter-spacing: -1.5px; font-size: 36px; color: #fff; text-align: center; width: 100%; line-height: 110px; font-weight: bolder; }
/*좌우버튼*/
.sub_top ol { height: 100% }
.sub_top ol li { height: 100%; padding: 0 3%;}
.sub_top ol li.prev { float: left; }
.sub_top ol li.next { float: right; }
.sub_top ol li a { display: block; position: relative; text-indent: -100000%; width: 23px; height: 100%; }
.sub_top ol li.prev a { background: url(../images/sub/prev.png) no-repeat; background-position: center;}
.sub_top ol li.next a { background: url(../images/sub/next.png) no-repeat; background-position: center;}
@media screen and (max-width: 640px) {
	.sub_top .title { font-size: 7vw; }
}
/*돋보기*/.view { position: absolute; text-indent: -9999px; background: rgba(0,0,0,0); }
/*오리발*/.note { font-size: 11px; line-height: 14px; text-align: left; color: #898989; width: 84.375%; margin: 50px auto 50px auto; padding: 10px; border: 1px solid #e6e5e5; }

/********************************************************************
TAB & BUTTON
*********************************************************************/
.sub_tabs{ width: 90.625%; margin: 0 auto; margin-bottom: 40px; }
.tabs_inner { width: 100%; height: 60px; margin: 0 auto; }
.sub_tabs li { float: left; position:relative; text-align:center; cursor:pointer; padding:0; height:60px; }
.sub_tabs li a { font-size: 20px; color:#000; background-color: #eee; border-bottom: 3px solid #000; width: 100%; height: 100%; display: inline-block; padding-top: 20px;}
		.sub_tabs .tabs1 li {width: 100%;}
		.sub_tabs .tabs2 li {width:50%;}
		.sub_tabs .tabs3 li {width:33.3333%;}
		/*.sub_tabs .tabs3 li:last-child { float: right; }*/
		.sub_tabs .tabs4 li {width:25%;}
		.sub_tabs .tabs5 li {width:20%;}
		.sub_tabs .tabs6 li {width:16.6666%;}
		/*.sub_tabs .tabs6 li:last-child { float: right; }*/
.sub_tabs li:hover a{ font-weight: bold; color: #000; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; }
.sub_tabs li.active a{font-weight: bold; color: #000; background-color: #fff; border: 3px solid #000; border-bottom-color: #fff;}

/*tab content*/
.tab_content { width: 100%; margin: 0 auto; padding-top: 40px; }
.tab_content ul.btns { position: relative; overflow: hidden; text-align: center; width: 84.375%; margin: 0 auto;  }
.tab_content ul.btns li { position: relative; text-align: center; cursor: pointer; padding: 0; float: left; height: 50px; background-color: #eee; border: 1px solid #c9caca; border-right: none; display: table;
	-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s;
}
		.tab_content ul.btns li.active { border-color: #000; }
.tab_content ul.btns li.last { border-right: 1px solid #c9caca; }
.tab_content ul.btns.btns2 li { width: 50%; }
.tab_content ul.btns.btns3 li { width: 33.33%; margin-bottom: 5px;}
		/*.tab_content ul.btns.btns3 li:nth-child(3n) { border-right: none; }*/
.tab_content ul.btns.btns4 li { width: 25%; }
.tab_content ul.btns.btns5 li { width: 20%; }
.tab_content ul.btns.btns6 li { width: 16.5%; }

.tab_content ul.btns li span { color: #959595; display: table-cell; vertical-align: middle; font-size: 12px; width: 100%; height: 100%;
	-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s;
}
		.tab_content ul.btns li:hover span,
		.tab_content ul.btns li.active span{ color: #fff; font-weight: bold; }
		.tab_content ul.btns li:hover span.clr01,
		.tab_content ul.btns li.active span.clr01 {background-color: #000; }

.tab_content .btn_container { width: 100%; }
.tab_content .btn_container .btn_content img { display: block; width: 100%; }
/*tab content(e)*/
/********************************************************************
TAB & BUTTON (e)
*********************************************************************/

/*
영상 공통
*/
.videoWrap { width: 84.375%; margin: 30px auto; }
.videoWrap ul li { margin-bottom: 100px; }
.videoWrap ul li p { font-size: 20px; margin-bottom: 10px; }
.video { width: 100%; margin: 0 auto; position: relative; padding-bottom: 56.25%; height: 0; line-height: 0; background-color: #eee;}
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*
버튼 공통
*/
.link_btn { position: relative; display: table; background: #000; width: 49%; height: 40px; text-align: center; }
		.link_btn .btn_text { position: relative; width: 100%; display: table-cell; vertical-align: middle; font-size: 15px; font-weight: 100; color: #fff; z-index: 1; }
.link_btn.nth_01 { float: left; }
.link_btn.nth_02 { float: right; }

/*입지*/
.site .view { top: 16%; width: 200px; height: 20%; right: 0; }
/*오시는 길*/
.location .view.v1 { width: 100%; height: 120px; bottom: 0; }
/*분양 일정*/

/*청약 안내*/
.subscription .view.v1 { width: 100%; height: 10%; top: 11%; }
/*단지조경*/
.plan .view { width: 30%; height: 10%; top: 22%; left: 0; }
/*동호수배치도*/
.chart .view { width: 100%; height: 15%; top: 2%; }



/*E 모델하우스*/
.e_house {}
.vr { width: 100%; margin: 0 auto; position: relative; padding-bottom: 75.25%; height: 0; line-height: 0; overflow: hidden; background: #fff; margin-top: 30px; }
.vr iframe { position: absolute; top: -60px; left: 0; right: 0; margin: auto; width: 84.375%; height: 120%; }

.e_house .buttonArea { position: relative; padding-bottom: 20px; overflow: hidden; }
.modal_trigger { background: #ca705b; margin: 0 auto; margin-bottom: 10px; cursor: pointer; }
		.modal_trigger .btn_text { letter-spacing: 3px; }
		/*마감재 리스트, 전시상품 리스트*/
		.modal_wrap { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5); }
		.modal_content { position: fixed; background: #fff; width: 90%; padding: 15px; height: 96%; z-index: 10000; margin: auto; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; }
				.modal_content .tab_content { position: relative; height: 76%; overflow: hidden; padding: 0; }
				.modal_content .tab_content ul.btns { width: 100% }
				.modal_content .tab_content ul.btns li { height: 50px; }
				.modal_content .tab_content ul.btns3 li { width: 33.33%; }
				.modal_content .tab_content ul.btns5 li { width: 20%; }
				.modal_content .tab_content ul.btns6 li { width: 16.6666%; }
				.modal_content .tab_content ul.btns li.active { background: #000; }
				.modal_content .tab_content .btn_container { position: relative; height: 80%; overflow-y: auto; margin-top: 20px; }
		.closeLayer { position: absolute; top: 14px; right: 15px; color: #000; font-size: 45px; }
				.closeLayer:hover, .closeLayer:focus { color: #666; text-decoration: none; cursor: pointer; }
		.modal_content .tab_title { text-align: center; padding-top: 20px; padding-bottom: 20px; }
		.modal_content .tab_title h3 { font-size: 18px; font-weight: 500; letter-spacing: -2px; }
		.modal_content .tab_title h3 b { font-size: 28px; font-weight: 500; }
		.modal_content .tab_title p { font-size: 20px; padding-top: 15px; letter-spacing: -1px; }
		.modal_content .note { position: relative; width: 100%; margin: 10px auto; padding: 0; background: none; border: none; }

@media screen and (min-width: 400px) {
	.vr { padding-bottom: 85.25%; }
}





/*관심고객등록*/
form.form_width { width: 94%; margin-top: 40px; text-align: left; }
.agree_btn .notice { position: relative; left: 0 }
.table2 th { font-size: 14px; padding: 5px; }
.table2 td { font-size: 12px; padding: 5px; }
.table2 td .btn_style1 { font-size: 13px;  }
.btn_style2 { padding: 0 20px; }
.btn_style3 { padding: 0 20px; }