@import url("reset.css");

/* 팝업 스타일 Begin */
.layer_pop { position:absolute; width:95%; left:50%; top:15%; margin: auto; z-index:999; box-sizing: content-box; transform:translateX(-50%)}
.layer_pop .top_bar { display: block; width: 100%; height: 50px; background-color: #2b4671; }
.layer_pop .top_bar img { display: inline-block; position: absolute; top: 0; left: 0; right: 0; margin: auto; height: 50px; }
.popContents { position: relative; 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; background: #d4d4d4; }
.popBtns input { vertical-align:top; margin-right:5px; height: auto; }
.popBtns span { display:block; position:absolute; }
.popBtns span.checkBox { padding: 9px; }
.popBtns span.closePop { padding:7px; right:10px; }
.layer_pop_container_bg { background: rgba(0,0,0,0.4); position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 8; }
/* 팝업 스타일 End */

/*우선분양 현재접수현황*/
.popContents .pop_box{position:absolute; display: flex; width: 90%; top: 19%;  background: #231f59;  padding: 25px 30px;  box-sizing: border-box;  margin: 10px 15px;  border-radius: 10px;}
.popContents .pop_box li{flex: 1; font-size: 24px;  color: #fff;  font-weight: 500;}
.popContents .pop_box li:last-child{ text-align: right;}

@media (max-width:480px){
	.popContents .pop_box{padding:20px 30px;}
	.popContents .pop_box li{ font-size: 20px;}
}

@media (max-width:390px){
	.popContents .pop_box{padding:15px 25px; margin: 10px; }
	.popContents .pop_box li{ font-size: 16px;}
}

@media (max-width:290px){
	.popContents .pop_box{padding:10px 20px; margin: 7px; }
}


/*header*/
.hide { display:none !important; }
.clear:after {content: ""; clear: both; display: table;}
#wrap{position:relative;  min-width:320px; max-width:730px; margin:0 auto; width:100%; text-align: left; overflow:hidden;}

header{position: relative; text-align: center; z-index: 99;}
header .top{position: relative; height: 80px; background:#fff; border-bottom:1px solid #ddd;}
header .logo{ margin: 0 auto; }
header .logo img {display: block;  max-width: 100%; margin:0 auto; width:300px; position: relative; top:5px;}

header .tel{position: absolute; right:5%; top:25px;}
header .tel img{height: 30px; }

header .quick {position:fixed; right:4.6875%; bottom:5%;}
header .quick img {margin-top:10px; height:50px; }

header .menu_btn{position: absolute; left:4.6875%; top:25px; }
header .menu_btn img{width:30px;}
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: 80px; width:100%; background-color: #1d2058; 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; margin-top: 30px; }
.gnb>ul>li{ position: relative; width:100%; }
.gnb>ul>li>a{height:45px; line-height:45px; display:block; font-size:15px; 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>ul{ padding:0; background: #8384a1; }
.gnb>ul>li>ul>li>a{height:35px; line-height:35px; text-indent: 10px; display:block; font-size:13px; color:#fff;}
.gnb>ul>li>ul>li#subon > a{color:red;}

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

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


/*--------responsible : logo---------*/
@media screen and (max-width:430px){
	header .logo img { width:230px;  top:12px;}
}

/*footer*/
#footer { position: relative; width: 100%; color: #a4a4a4; background: #313131; }
.footerWrap { width: 84.375%; position: relative; margin: 0 auto; padding-top: 35px; padding-bottom: 20px; text-align: left; }
.footerWrap p { font-size:13px; margin-bottom: 7px; font-weight:400; line-height: 120%; }

.f_top p span{color:#fff; font-weight:500;}
.f_top { position: relative; margin-bottom: 25px; }
	.footerWrap .builder {  }
	.footerWrap .ci {  }
	.footerWrap .tel { position: absolute; right: 0; top: 11px; }
.f_bottom { position: relative; }

.footerWrap  a.pc_version{color:#fff; display:block;width:100%; border-radius:5px; -webkit-border-radius:5px; background:#000 ;height:40px; line-height:40px; text-align:center;margin-top:20px;}


/*서브 공통 탭*/
/*서브탭*/
.tab_box{ padding:50px 0;}
.tab_box ul{width: 100%; display:flex; align-items:center; justify-content: space-between; flex-wrap:wrap}
.tab_box ul li{flex:1 0 49%; background:#fff; border:1px solid #272154;  height:45px; text-align: center; margin:2px; border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
}
.tab_box ul li a{display:block; font-size:15px; color:#272154; line-height:45px;}
.tab_box ul li.active{background:#272154;}
.tab_box ul li.active a{color:#fff;}

/***********서브탭 변경***********/
/*tab content*/
.tab_content{margin: 0 auto; width:100%; text-align:center;}
.tab_content .depth02{display:flex; align-items:center; justify-content: space-between; flex-wrap:wrap; margin-bottom:30px;}
.tab_content .depth02 li{flex:1 0 49%; margin:1px; /* padding:5px 0;*/ background:#aaa; display: table;  height: 40px;   position: relative;}
.tab_content .depth02 li a{/*display:block;*/ color:#fff;     display: table-cell; vertical-align: middle; width: 100%; height: 100%;  font-size: 14px;} 
.tab_content .depth02 li.active{background:#272154;}
@media screen and (max-width:480px){
	.tab_content .depth02 li a{font-size:12px;} 
}

/*서브 공통 타이틀*/
.title{text-align:center; text-transform:uppercase;}
.title p{font-size:21px; color:#898989; font-weight:400; margin-bottom:20px;}
.title h2{font-size:27px; color:#231f59;line-height:110%; letter-spacing:-3px;margin-bottom:70px; font-weight:300;}
.title h2 span{font-size:37px; display:block; font-weight:600; margin-top:15px; line-height:110%;}

.title h2.title_mg{margin-bottom:15px !important;}
.title p.title_min{font-size:20px; font-weight:300; color:#232323; margin-bottom:70px;}

@media screen and (max-width:560px){
	.title p{font-size:18px;}
	.title h2{font-size:23px;}
	.title h2 span{font-size:32px;}
}
@media screen and (max-width:430px){
	.title p{font-size:16px;}
	.title h2{font-size:20px;}
	.title h2 span{font-size:27px;}
}


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

-------------------------------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%;}

.mt80 {margin-top:80px;}

/* sub page location */
.sub_top {height: 75px; position: relative; /*background-image: url(/mobile/images/sub/top.jpg); background-size: cover; background-position: center;*/ background: #413c3b; width: 100%; }
.sub_top .title { position: absolute; letter-spacing: -1.5px; font-size: 22px; color: #fff; text-align: center; width: 100%; line-height: 75px; font-weight: normal; }
/*좌우버튼*/
.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(/mobile/images/sub/prev.png) no-repeat; background-position: center; background-size:60%;}
.sub_top ol li.next a { background: url(/mobile/images/sub/next.png) no-repeat; background-position: center; background-size:60%;}
@media screen and (max-width: 640px) {
	.sub_top .title { font-size: 5vw; }
}
/*돋보기*/
.view_more { position: absolute; text-indent: -9999px; background: rgba(0,0,0,0); }
.view_more > img { display: block; width:40px;}
.pop { position: relative; width: 100%; margin: 0 auto; }
.pop > img { width: 100%; }
.pop .view_more {    width: 10%; top: 0; right: 0; }

/*오리발*/
.note { font-size: 12px; line-height:160%; text-align: left; color: #898989; width: 100%; padding:20px 10px; margin: 10px auto 50px auto; border: 1px solid #eee; font-weight: 400; word-break: keep-all;}

/********************************************************************
TAB & BUTTON
*********************************************************************/
/*tab content*/
.tab_content { width: 100%; margin: 0 auto; /*padding-top: 40px;*/}
.tab_content ul.btns { position: relative; overflow: hidden; text-align: center; width: 90%; margin: 0 auto; margin-bottom: 8%; }
.tab_content ul.btns li { position: relative; text-align: center; cursor: pointer; padding: 0; float: left; height: 40px; display: table; padding-right: 1px;
	-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.last { padding-right: 0; }
.tab_content ul.btns.btns1 li { width: 100%; }
.tab_content ul.btns.btns2 li { width: 50%; }
.tab_content ul.btns.btns3 li { width: 33%; margin-bottom: 1px; }
.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.btns7 li { width: 14%; }
.tab_content ul.btns.btns3.mb5 li {margin-bottom:1px;}
.tab_content ul.btns.btns4.mb8 li { width: 25%; margin-bottom:1px; padding-right: 1px; height:50px;}


.tab_content ul.btns li a { color: #fff; background-color: #1a2239; 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 a,
.tab_content ul.btns li.active a{ color: #fff; font-weight: bold; }
.tab_content ul.btns li:hover a.clr01,
.tab_content ul.btns li.active a.clr01 {background-color: #b18f76; }

.tab_content .btn_container { /*width: 100%;*/ width: 90%; margin: 0 auto; position: relative; }
.tab_content .btn_container .btn_content > img { display: block; width: 100%; }
.tab_content .btn_container .btn_content .note { width: 100%; }

.tab_content .btn_container .btn_content{position:relative}
.tab_content .btn_container .btn_content > span{position:absolute; right:0; top:340px;}
.tab_content .btn_container .btn_content > span a{display:block; width:180px; height:45px; line-height:45px; background:#ddd; color:#1a2239; text-align:center; font-weight:400; font-size:15px;}
.tab_content .btn_container .btn_content > img { 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: 76.25%; height: 0; /*line-height: 0;*/ background-color: #fff;}
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*버튼 공통*/
.link_btn_wrap { position: relative; /*width: 84.375%;*/width: 100%; margin: 30px auto; overflow: hidden; text-align: center; }
.link_btn_wrap > div { display: inline-block; width: 100%; }
.link_btn { position: relative; display: table; width: 100%; height: 40px; padding: 0 5px; text-align: center; background: #000; }
		.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_wrap.count2 > div { width: 48%; }
.link_btn_wrap > div:nth-child(2n+1) { float: left; }
.link_btn_wrap > div:nth-child(2n) { float: right; }

.tab_content .btn_container .btn_content{position:relative}
.tab_content .btn_container .btn_content .link_btn_wrap2{position:absolute; padding-left:66%; top:14%;}
.tab_content .btn_container .btn_content .link_btn_wrap2 > div{width:180px;}
.tab_content .btn_container .btn_content .link_btn_wrap2 .link_btn{position: relative; display: table; width: 100%; height: 40px; text-align: center; background: #ddd; color:#000; font-weight:400; font-size:15px;}
.tab_content .btn_container .btn_content .link_btn_wrap2 .link_btn .btn_text { position: relative; width: 100%; display: table-cell; vertical-align: middle; font-size: 15px; font-weight: 300; z-index: 1; color: #000; }
.tab_content .btn_container .btn_content .link_btn_wrap2 .link_btn:hover .btn_text { font-weight: 300; color: #000; }


/*영상 탭 공통*/
.pr { width: 84.375%; margin: 0 auto; margin-bottom: 100px; }
.pr ul { width: 100%; margin: 0 auto 100px auto; overflow: hidden; }
.pr ul li { width: 33.3%; padding: 5px; margin-top: 10px;float: left; opacity: 0.7; filter: alpha(opacity=70); }
.pr ul li::after {content: ""; clear: both; display: table;}
.pr ul li div { width: 100%; margin: 0 auto; position: relative; padding-bottom: 88.25%; height: 0; line-height: 0; overflow: hidden; }
.pr ul li div a img { display: block; width: 100%; }
.pr ul li div a span {display:block;width: 100%;font-size: 14px; color: #000; height: 30px; line-height: 30px; text-align: center; background-color: #eee;}
.pr ul li.active,
.pr ul li:hover { cursor:pointer; opacity: 1; }
.pr ul li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; font-size: 18px; text-shadow: 0 0 1px rgba(0,0,0,0.2); }

.pr_size ul li {width:50%;}



/*관심고객등록*/
input {
	-webkit-border-radius: 0;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}
input[type='checkbox'] { -webkit-appearance: checkbox; }
input:checked[type='checkbox'] { background-color: #ccc; -webkit-appearance: checkbox; }
input[type='radio'] { -webkit-appearance: radio; }
input[type='button'] { -webkit-border-radius: 0; }

.inner.interest {text-align: left; padding: 0 5%; }
.agree_btn .notice { position: relative !important; left: 0 !important; margin-top: 20px !important; }
.table2 th { text-align: center; }
.table2 td { padding-left: 7px !important; }
.table2 td .input_txt1 { width: auto !important; }
.table2 td .input_txt3 { width: 95% !important; }
span.block { display: inline-block; margin-right: 10px; }
.table2 td textarea { width: 95% !important; }

.table3 td textarea { position: relative !important; left: auto !important; height: 70px !important; }




/*popBtns*/
@media screen and (max-width:580px){
   .tab_content .btn_container .btn_content .link_btn_wrap2{padding-left:60%; top:13.5%;}
}

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

   .tab_content .btn_container .btn_content .link_btn_wrap2 > div{width:170px;}
   .tab_content .btn_container .btn_content .link_btn_wrap2{padding-left:56%; top:13%;}
	.map_tit {margin:60px 0 40px;}
}

@media screen and (max-width:430px){
   .tab_content .btn_container .btn_content .link_btn_wrap2 > div{width:160px;}
   .tab_content .btn_container .btn_content .link_btn_wrap2{padding-left:54%; top:12.5%;}
}

@media screen and (max-width:395px){
   .tab_content .btn_container .btn_content .link_btn_wrap2 > div{width:155px; }
   .tab_content .btn_container .btn_content .link_btn_wrap2{padding-left:50%; top:12%;}
}

@media screen and (max-width:350px){
   .tab_content .btn_container .btn_content .link_btn_wrap2 > div{width:150px;}
   .tab_content .btn_container .btn_content .link_btn_wrap2{padding-left:46%;}
}


/*event*/
.event .event_view{text-align:center;}
.event .event_view p:first-child{cursor:pointer;}
.event .event_view a{display:block; background:#0d1f36; color:#fff; height:45px; line-height:50px; text-align:center; width:93%; margin:20px auto 0; font-size:15px; font-weight:400;
 box-shadow: 5px 5px 15px -5px rgba(0,0,0,0.5);
}
.event .event_view a:hover{background:#222; color:#fff; transition:all 0.4s ease-in;
   box-shadow: 30px 30px 24px -5px rgba(0,0,0,0.7);}

.event .event_view .event_title{text-align:center; width:100%; background:#e5e5e5; margin: 0 auto; padding:30px 0}
.event .event_view .event_title h2{font-size:36px; color:#241f59; padding:30px 0}
.event .event_view .event_title h2 span{font-weight: 600; font-size:50px; }
.event .event_view .event_title p:first-child{margin-bottom:0px;}


/*vr*/
.event_title{position:relative;}
.event_title .inner_vr{position:relative; box-sizing:border-box; width:100%; margin: 0 auto; background: #272154;}
.event_title .inner_vr #myVideo{
    box-sizing:border-box;
    padding:10px;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	width: 100%;
	height: auto;
	background-size: 100% 100%;
	background-color: #272154;
	background-image: /* our video */;
	background-position: center center;
	background-size: contain;
	object-fit: cover;
	z-index:3;
}


.win_event{background:#fff; padding:30px; width:100%; margin:0 auto;}
.win_event h2{font-size:27px; font-weight:400; color:#272154; letter-spacing:-2px; margin-bottom:20px;}
.win_event h2 span{font-weight:600}

.win_event ul li{display:flex; flex-direction:row; align-items:center; justify-content:center; margin-bottom:10px;}
.win_event ul li input[type="text"]{border:0; height:50px; width:100% !important; padding:0 10px;
box-sizing:border-box; background: #f5f5f5;
}

.win_event ul li.ofi,
.win_event ul li.store{
 box-shadow: 5px 5px 15px -5px rgba(0,0,0,0.5);
}

.win_event ul li.ofi{margin-top:20px; background:#272154}
.win_event ul li.ofi > p,
.win_event ul li.ofi > div{
box-sizing:border-box;
}
.win_event ul li.ofi > div{background:#272154; padding:15px 0;}
.win_event ul li.ofi > p{color:#fff; font-weight:400; padding-right:10px;}
.win_event ul li.ofi > div .txtInp{height:40px; width:40px !important; border:1px solid rgba(255,255,255,0.5); color:#272154; background:#fff; padding:5px;text-align:center;}

.win_event ul li.store {background:#c34870}
.win_event ul li.store > p{color:#272154; font-weight:400; padding-left:10px;}
.win_event ul li.store > p,
.win_event ul li.store > div{
box-sizing:border-box;
}
.win_event ul li.store > div{background:#c34870; padding:15px 0;}
.win_event ul li.store > div .txtInp{height:40px; width:40px !important; border:1px solid rgba(255,255,255,0.5); color:#fff; background:#c34870; padding:5px;text-align:center;}

.win_event .terms{margin-bottom:30px; background:#f5f5f5; height:200px; padding:15px; overflow-y:auto; text-align:left}
.win_event .terms pre,
.win_event .terms div{font-size:12px;  font-family:'Noto Sans KR'; line-height:18px;}
.win_event .terms h3{font-size:15px; font-weight:500; color:#000}
.win_event .terms h4{font-size:13px; font-weight:400; color:#000}
.win_event .terms h5{font-size:12px; font-weight:400; color:#212121}

.win_event .btn_wrap{display:flex; flex-direction:row; align-items:center; justify-content:center;}
.win_event .btn_wrap a{display:block; width:40%; background:#333; line-height:40px; height:40px; color:#fff; font-weight:300; font-size:15px}
.win_event .btn_wrap a + a{width:60%; background:#ee266b}

@media screen and (max-width:430px){
  .win_event{padding:30px 15px;}
  .win_event h2{font-size:21px;}
  .win_event ul li{flex-direction:column;}
  .win_event ul li.ofi,
  .win_event ul li.store{padding:15px 0 !important;}
  .win_event .terms{height:150px;}
}

/*분양일정*/
.calendar { width: 95%; margin:0 auto; position:relative; color: #464646; }
.calendar h2{font-size:25px; font-weight:400; color:#e2b48f; width:100%; background:#00294e; padding:30px 0;}
/*.calendar caption { display: none; }*/
.calendar table { width: 100%; border-collapse: separate; /**border-collapse: collapse;*/ table-layout:fixed; border-top: 1px solid #ddd; }
.calendar tbody { border-left: 1px solid #ddd; }
.calendar td { text-align: left; border-bottom: 1px solid #ddd; padding: 15px; }
.calendar .line { border-right: 1px solid #ddd; }
.calendar td span,
.calendar td a { display: block; }
.calendar .date { text-align: center; background-color: #00294e; padding: 15px 5px; }
.calendar .date b,
.calendar .date span { display: block; }
.calendar .date b { font-size: 18px; margin-bottom: 5px; color: #fff; font-weight: 400; }
.calendar .date span { font-size: 14px; color: #fff;}
.calendar .event { font-weight: 500; font-size: 20px; }
.calendar .link { font-size:13px; padding: 10px 10px 0 0; }
.calendar .tag { font-size:13px; padding: 10px 10px 0 0 }
.calendar .clr1 { color: #c5967c; }
.calendar .clr2 { color: #00294e; }
.calendar .clr3 { color: #a34991; }
.calendar .clr4 { color: #ee7700; }
.calendar .clr5 { color: #ed1450; }
.calendar .clr6 { color: #f58351; }
.calendar .clr6_1 { color: rgba(146,18,18,0.6); }
.calendar .clr7 { color: #777eb4; }
.calendar .clr7_1 { color:#663a84; }
.calendar .clr8 { color: #005891; }