@charset "utf-8";
@import url("common.css");

#wrap { position: relative; width: 100%; height: 100%; max-width: 1920px; margin:0 auto;}
/*
body { overflow-x:hidden; }
body.small { overflow-x:auto;}
body.medium { overflow-x:hidden;}
body.large { overflow-x:hidden;}
*/
i.ico { background: url(../img/icon.png) no-repeat; text-indent: -9999em; color: transparent; font-size: 0; display: inline-block;}
i.ico.ico-login { background-position:-2px -2px; width: 19px; height: 18px;}
i.ico.ico-join {background-position:-28px -2px; width: 15px; height: 18px;}
i.ico.ico-nav-left {background-position:-101px -5px; width: 53px; height: 12px;}
i.ico.ico-nav-right {background-position:-101px -25px; width: 53px; height: 12px;}
i.ico.ico-top {background-position:-170px -5px; width: 12px; height: 22px;} 
i.ico-arrow-up {background-position:-221px -5px; width: 8px; height: 6px;}
i.ico.ico-search {background-position:-369px -5px; width: 24px; height: 21px;} 
i.ico.ico-addr{background-position:-450px -5px; width: 18px; height: 18px;}
i.ico.ico-addr02{background-position:-188px -60px; width: 18px; height: 18px;}
i.ico.ico-tel{background-position:-490px -5px; width: 19px; height: 19px;}
i.ico.ico-info{background-position:-225px -60px; width: 14px; height: 18px;}
i.ico.ico-home{background-position:-259px -60px; width: 19px; height: 17px;}
.locationWrap .pageNavi .home a .ico.ico-home {
		width: 17px;
    	height: 18px;
    	position: absolute;
    	left: 29px;
    	top: 18px;
    	background: url(../img/icon.png) no-repeat -238px -5px;
    	display: inline-block;
    	z-index: 42;
}

body.small #wrap {min-width: 1262px;}

/*HEADER*/
#head {position: absolute; top:0; left: 0; z-index: 1100; height: 70px; width: 100%;}
#head.on { height:329px; background:#042e6f;}
#head.sales_apt { top: 0;}
.headerCon {width:100%; position:relative;}
.headerCon::after {display:block; content:''; clear:both;}

/* gnb */
.gnb { width:800px; margin:0 auto;}
.gnb .gnb_line { display:block; position:absolute; top:69px; left:0; z-index:10; width:100%; height:1px; padding:0 230px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
body.small .gnb .gnb_line { padding-left:200px;}
.gnb .gnb_line:after { content:""; display:block; height:1px; background:url(../img/gnb_line.png) repeat-x 0 0;}
.gnb>ul { overflow:hidden;}
.gnb>ul>li { float:left; width:160px; text-align:center; line-height:1.2;}
.gnb>ul>li>a { display:table; position:relative; width:100%; height:70px; color:#fff; font-size:18px; font-weight:500;}
.gnb>ul>li>a:after { display:block; content:''; position:absolute; bottom:0; left:50%; z-index:15; width:0; height:2px; background-color:#fff; -webkit-transition:all .4s cubic-bezier(.25, .46, .45, 1); -moz-transition:all .4s cubic-bezier(.25, .46, .45, 1); -o-transition:all .4s cubic-bezier(.25, .46, .45, 1); transition:all .4s cubic-bezier(.25, .46, .45, 1);}
.gnb>ul>li.active>a:after, .gnb>ul>li.on>a:after, #head.on .gnb>ul>li.active.on>a:after { left:0; width:100%;}
#head.on .gnb>ul>li.active>a { color:#fff;}
#head.on .gnb>ul>li.active>a:after { left:50%; width:0;}
.gnb>ul>li>a>strong { display:table-cell; vertical-align:middle;}
.gnb .depth2 { opacity:0; filter:alpha(opacity=0); height:241px; padding-top:18px;}
.gnb .depth2>li { padding-top:13px; font-size:15px; line-height:1.5; font-weight:300;}
.gnb .depth2>li>a { display:inline-block; position:relative; padding-bottom:4px; color:#fff;}
.gnb .depth2>li a:hover, .gnb .depth2>li a:focus { color:#2fdfff;}
.gnb .depth2>li a:after { display:block; content:''; position:absolute; bottom:0; left:50%; width:0; height:2px; background-color:#1a8db7; -webkit-transition:all .4s cubic-bezier(.25, .46, .45, 1); -moz-transition:all .4s cubic-bezier(.25, .46, .45, 1); -o-transition:all .4s cubic-bezier(.25, .46, .45, 1); transition:all .4s cubic-bezier(.25, .46, .45, 1);}
.gnb .depth2>li a:hover:after, .gnb .depth2>li a:focus:after { left:0; width:100%;}
.sales_apt .gnb>ul>li>a { color:#000;}
#head.sales_apt.on .gnb>ul>li>a { color:#fff;}

/*
  .headerCon #gnb {}
	.headerCon .gnb >ul {overflow:hidden;}
	.headerCon .gnb >ul >li {float:left; width: 170px;}	
	.headerCon .gnb >ul >li:first-child {}
	.headerCon .gnb >ul >li> a {
		display:block; 
		text-align: center; 
		position: relative; 
		overflow: hidden; 
		height:90px; 		 
		color: #fff;
		font-size: 20px;
		letter-spacing: -0.5px;		
	}
	.sales_apt .headerCon .gnb >ul >li> a { color: #000;}

	.headerCon .gnb > ul > li > a > strong { position: absolute; width: 100%; display: block; top:36px; font-weight:400;}
	.headerCon .gnb > ul > li.gnbmem01 > a strong {}
	.headerCon .gnb > ul > li.gnbmem02 > a strong {}
	.headerCon .gnb > ul > li.gnbmem03 > a strong {}  
	.headerCon .gnb > ul > li.gnbmem04 > a strong {}
	.headerCon .gnb > ul > li.gnbmem05 > a strong {}
	.headerCon .gnb.main > ul > li.gnbmem01 > a strong {}
	.headerCon .gnb.main > ul > li.gnbmem02 > a strong {}
	.headerCon .gnb.main > ul > li.gnbmem03 > a strong {}  
	.headerCon .gnb.main > ul > li.gnbmem04 > a strong {}
	.headerCon .gnb.main > ul > li.gnbmem05 > a strong {}
	.headerCon .gnb > ul > li.on > a > strong {}
	.headerCon .gnb > ul > li.hover > a > strong {}
	.headerCon .gnb.main > ul > li.on > a > strong {}
	.headerCon .gnb.main > ul > li.hover > a > strong {}
	.headerCon .gnb > ul > li > div { background:#042e6f; z-index:10;}  
	.headerCon .gnb > ul > li > div > div {display:none; z-index:11; padding: 20px 0;}
	.headerCon .gnb > ul > li > div > div > ul > li:first-child {border-top:0;}
	.headerCon .gnb > ul > li > div > div > ul > li > a {
		display:block; 
		padding: 12px 0 12px 29px; 
		color:#fff; 
		text-align:left; 
		width:auto; 
		font-size:16px; 		
	}  
	.headerCon .gnb > ul > li > div > div > ul > li {position:relative;}
	.headerCon .gnb > ul > li > div > div a.hv, .headerCon .gnb > ul > li > div > div a.on { color: #60b9bc;}	
*/

	.mainContainer { height: 700px; width: 100%; position: relative;}
	.mainContainer .visualconWrap {/*position: absolute; left: 0; top: 0; z-index: 25;*/}
	.mainContainer .visualconWrap .top_util_wrap { width: 100%; position: absolute; left: 0; top: 0;}
	.mainContainer .visualconWrap .mleft_util {/*width: 50%; float: left; height: 700px; position: relative;*/}
	.mainContainer .visualconWrap .mright_util {/*width: 50%; float: left; height: 700px; position: relative;*/}
	.mainContainer .visualconWrap .mleft_util  h1 {position: absolute; top: 0; left: 30px;z-index: 1999; transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s;} 
	.mainContainer .visualconWrap .mleft_util  h1 img { vertical-align:top;}
	.mainContainer .visualconWrap .mleft_util .nav_util { position: absolute; bottom: 0; left: 55px; margin-bottom: 55px; z-index: 1320; transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s;}
	.mainContainer .visualconWrap .mleft_util .nav_util .nav_util_con {position: relative; width: 300px; text-align: center; overflow: hidden;}
	.mainContainer .visualconWrap .mleft_util .nav_util .nav_util_con * { vertical-align: middle;}
	.mainContainer .visualconWrap .mleft_util .nav_util span { display: inline-block;}
	.mainContainer .visualconWrap .mleft_util .nav_util span.nav_left { float: left;}	
	.mainContainer .visualconWrap .mleft_util .nav_util span.nav_right {float: right; margin-right: 20px;}
	.mainContainer .visualconWrap .mleft_util .nav_util span a {font-size: 0; color: transparent; text-indent: -9999em; display: block; padding: 20px;}
	.mainContainer .visualconWrap .mleft_util .nav_util span.count { line-height: 45px; color: #fff; font-size: 14px;}
	.mainContainer .visualconWrap .mleft_util .nav_util span.count .current { font-weight: 300;}
	.mainContainer .visualconWrap .mleft_util .nav_util span.count .total {font-weight: 300;}
	.mainContainer .visualconWrap .mleft_util .nav_util span.count .total:before {
		content: '/';
		margin-right: 4px;
		display: inline-block;		
	}


	.mainContainer .visualconWrap .mleft_util:before {
		content: '';
		position: absolute;
		background:#042e6f;
		width: 30px;
		height: 669px;
		left: 0;
		top: 0;
		z-index:1200;
		transition: all 0.2s ease-out 0s;
        -webkit-transition: all 0.2s ease-out 0s;
	}
	.mainContainer .visualconWrap .mleft_util:after {
		content: '';
		position: absolute;
		background:#042e6f;
		width: 50%;
		height: 31px;
		left: 0;
		top: 669px;
		z-index:1200;
		transition: all 0.2s ease-out 0s;
        -webkit-transition: all 0.2s ease-out 0s;
	}
	.mainContainer .visualconWrap .mright_util:before {
		content: '';
		position: absolute;
		background:#f2f2f2;
		width: 30px;
		height: 669px;
		right: 0;
		top: 0;
		z-index:1200;
	}	
	.mainContainer .visualconWrap .mright_util:after {
		content: '';
		position: absolute;
		background:#f2f2f2;
		width: 50%;
		height: 31px;
		right: 0;
		top: 669px;
		z-index:1200;
	}	


	.subTopCon { height: 385px; width: 100%; position: relative;}
	.subTopCon.subTopSales {height: auto; overflow: hidden; padding-top: 0;}
	.subTopCon .visualconWrap {height: 385px; width:100%;}
	.subTopCon.subTopSales .visualconWrap { background: none !important;  height: 70px; position: relative;}
	.subTopCon .visualconWrap.subImg01 {background: url(../img/sub/sub_visual_sale_1920.jpg) no-repeat center 0;}
	.subTopCon .visualconWrap.subImg02 {background: url(../img/sub/sub_visual_construction_1920.jpg) no-repeat center 0;}
	.subTopCon .visualconWrap.subImg03 {background: url(../img/sub/sub_visual_movein_1920.jpg) no-repeat center 0;}
	.subTopCon .visualconWrap.subImg04 {background: url(../img/sub/sub_visual_customer_1920.jpg) no-repeat center 0;}
	.subTopCon .visualconWrap.subImg05 {background: url(../img/sub/sub_visual_brand_1920.jpg) no-repeat center 0;}
	.subTopCon .visualconWrap.subImg06 {background: url(../img/sub/sub_visual_membership_1920.jpg) no-repeat center 0;}
	.subvisual_con {height: 330px; position: relative;}
	.subTopCon.subTopSales .subvisual_con { height: auto;}
	.subvisual_con .subtit { width: 100%; position: absolute; top: 165px; text-align: center;}
	.subvisual_con .summary {width: 100%; position: absolute; top: 227px; color: #fff; text-align: center; font-size: 16px; letter-spacing: -0.1px; font-weight: 300;}



	.subTopCon .visualconWrap .top_util_wrap { width: 100%; position: absolute; left: 0; top: 0;}
	.subTopCon .visualconWrap .mleft_util {/*width: 50%; float: left; height: 385px; position: relative;*/}
	.subTopCon .visualconWrap .mright_util {/*width: 50%; float: left; height: 385px; position: relative;*/}
	.subTopCon .visualconWrap .mleft_util h1 {position: absolute; top: 0; left: 30px;z-index: 1999; transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s;} 	
	.subTopCon .visualconWrap .mleft_util h1 img { vertical-align:top;}
	.subTopCon .visualconWrap .mleft_util:before {
		content: '';
		position: absolute;
		background: #042e6f;
		width: 30px;
		height: 329px;
		left: 0;
		top: 0;
		z-index:1200;
		transition: all 0.2s ease-out 0s;
        -webkit-transition: all 0.2s ease-out 0s;
	}
	/*
	.subTopCon .visualconWrap .mleft_util:after {
		content: '';
		position: absolute;
		background: #042e6f;
		width: 50%;
		height: 385px;
		left: 0;
		top: 0;
		transition: all 0.2s ease-out 0s;
        -webkit-transition: all 0.2s ease-out 0s;
	}
	*/
	.subTopCon .visualconWrap .mright_util:before {
		content: '';
		position: absolute;
		background: #f2f2f2;
		width: 30px;
		height: 329px;
		right: 0;
		top: 0;
		z-index:1200;
	}
	/*
	.subTopCon .visualconWrap .mright_util:after {
		content: '';
		position: absolute;
		background: #f2f2f2;
		width: 5%;
		height: 385px;
		right: 0;
		top: 0;
	}
	*/

		.visualconWrap .mright_util ul.top_util { overflow:hidden;position: absolute; right: 0; top: 0; width: 200px; z-index: 1330; background:#f2f2f2;}
		.visualconWrap .mright_util ul.top_util * { vertical-align: middle;}
		.visualconWrap .mright_util ul.top_util li {float: left; width:50%;}
		.visualconWrap .mright_util ul.top_util li:first-child a { margin-left:20px;}
		.visualconWrap .mright_util ul.top_util li a { display: block; margin-left:10px; height: 70px; line-height: 70px; font-size:12px;}
		.visualconWrap .mright_util ul.top_util li a:hover {color: #042e6f;}
		.visualconWrap .mright_util ul.top_util li a i { position:relative; top:-2px; margin-right:7px;}

.subContents { min-height: 800px; padding: 50px 0 80px;}

.ly_box { position: relative; overflow: hidden; width: 1180px; margin:0 auto;}
.ly_box h3.title {color:#222; font-size:40px; text-align:center;}
.ly_box h3.title:after {content:''; display:block; width:50px; height:1px; margin:50px auto 0; background:#aaa;}
.ly_box .title_sub {margin:45px 0 55px; color:#666; font-size:18px; line-height:30px; text-align:center;}

	
	body.small .mainContainer .visualconWrap .mleft_util h1 {left: 0;}
	body.small .mainContainer .visualconWrap .mleft_util:before { left:-30px;}
	body.small .mainContainer .visualconWrap .mleft_util .nav_util {left: 0;}	
	body.small .mainContainer .visualconWrap .mright_util:before { width:0;}
	body.small .visualconWrap .mright_util ul.top_util {right: 0;}

	body.small .subTopCon .visualconWrap .mleft_util h1 {left: 0;}
	body.small .subTopCon .visualconWrap .mleft_util:before { left:-30px;}
	body.small .subTopCon .visualconWrap .mleft_util .nav_util {left: 0;}	
	body.small .subTopCon .visualconWrap .mright_util:before { width:0;}
	body.small .subTopCon .mright_util ul.top_util {right: 0;}


.locationWrap {width:100%; height:55px; background:url(../img/sub/location_left_bg.gif) no-repeat 0 0; position: absolute; top: 329px; left: 0; z-index: 41;}
    .locationWrap .pageNavi {position:relative; max-width:1202px; height:54px; margin:0 auto; font-size:14px; color:#666; line-height:50px; border-left: 1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; background-color:#fff;}
	@media screen and (min-width:1600px){
	    .locationWrap .pageNavi { max-width:1483px;}
	}

    .locationWrap .pageNavi .home { float: left; display: block; border-right: 1px solid #dfdfdf;} 
    .locationWrap .pageNavi .home a { display: block; width: 73px; height:55px; text-indent: -9999em;}
    /*.locationWrap .pageNavi .home:after {
    	content: '';
    	width: 17px;
    	height: 18px;
    	position: absolute;
    	left: 29px;
    	top: 18px;
    	background: url(../img/icon.png) no-repeat -238px -5px;
    	display: inline-block;
    	z-index: 42;
    }*/
    .locationWrap .pageNavi .depth {float:left; position: relative;}
    .locationWrap .pageNavi .depth:after { content: ''; width: 1px; height: 55px; background: #dfdfdf; position: absolute; right: 0; top: 0;}
    .locationWrap .pageNavi .depth a {font-size: 17px;}
    .locationWrap .pageNavi .depth > a {
        display:inline-block; 
        color:#333; 
        position: relative;         
        padding-left:30px;        
        width: 210px; 
        font-weight: 400;
        height: 55px;
		line-height:54px;
    }
    .locationWrap .pageNavi .depth > a:after {           
        font: normal normal normal 14px/1 Linearicons-Free;
        content: "\e874";
        position: absolute;
        right: 20px;
        top:18px;
    }
    .locationWrap .pageNavi .depth > a.open { color: #042e6f;}    
    .locationWrap .pageNavi .depth > a.current:before {
    	content: '';
    	width: 100%;
    	height: 2px;
    	background: #042e6f;
    	position: absolute;
    	left: 0;
    	bottom: 0;
    }
    .locationWrap .pageNavi .depth > a.current.open:before {height: 1px; background: #dfdfdf;}
    .locationWrap .pageNavi .depth > a.open:after {         
        font: normal normal normal 14px/1 Linearicons-Free;
        content: "\e873";
        color: #042e6f;
        position: absolute;
        right: 20px;
        top:18px;
    }
    .locationWrap .pageNavi .depth > a.open:before {  
        content: '';     
        background: #dfdfdf; 
        position: absolute; 
        left: 0; 
        bottom: 0;
        width: 100%;
        height: 1px;
    }
    .locationWrap .pageNavi .depth ul {
        display:none; 
        position:absolute; 
        top:55px; 
        border:1px solid #dfdfdf; 
        border-top:none; 
        background:#fff; 
        margin-left: -1px; 
        overflow: hidden; 
        padding: 10px 0;
        z-index: 1001;
    }
    .locationWrap .pageNavi .depth ul li {line-height:35px; height: 35px;}
    .locationWrap .pageNavi .depth ul li a {display:block; color:#333; width: 209px; padding-left:30px;}
    .locationWrap .pageNavi .depth ul li a:hover, .pageWrap .pageNavi .depth ul li a:focus {color:#042e6f;}




.footerCon { clear: both; width: 100%; padding-top: 25px; position: relative; margin-top:-25px;}
.footerCon .go_top { position: absolute; right:0; top: -65px; z-index:50;}
.footerCon .go_top a { display: block; width: 39px; height: 49px; position: relative; background: #22a5d5; color: transparent; font-size: 0;}
.footerCon .go_top a i {position: absolute; left: 14px; top: 14px;}
	footer {width: 100%; padding: 40px 0; background: #272f3c;}
	footer .ly_box { overflow:visible;}
	footer .familysite { position: absolute; right: 0; top: 0; z-index:100;}
	footer .familysite .gofamily { border-bottom: 1px solid #7d828a; display: block;}
	footer .familysite .gofamily > a {font-size: 13px; color: #fff; padding:0 20px 0 20px; height: 30px; line-height: 30px; display: block;} 
	footer .familysite .gofamily > a i {margin:-4px 0 0 10px; vertical-align: middle;}

	footer .familysite ul {position:absolute; bottom:24px; left:0; width:100%; padding:5px 0; background:#272f3c; display: none; }	
	footer .familysite ul li a { font-size: 13px; color: #fff; display: block; padding:5px 0 10px 20px;}
	footer .familysite.on ul{display: block;}
	footer .familysite.on .gofamily > a i{transform: rotate(180deg);}

	footer .btm_link { margin-bottom:7px;}
	footer .btm_link:after {
		content: '';
		clear: both;
		display: block;
	}
	footer p.address { font-size: 13px; padding-top: 3px; color: #7c828a;}
	footer .address span { margin-right:10px; display: inline-block;}
	footer .address span.copyright {}
	footer .btm_link li {float: left; margin-right: 10px;}
	footer .btm_link li a {font-size: 13px; color: #fff;}	


/* layer popup */
.layer_pop {position:relative; width:900px; margin:0 auto; background:#fff;}
.layer_pop.register { width:1000px;}
.layer_pop .head {padding:50px 110px 50px 50px;}
.layer_pop .head h1{display:inline-block; color:#222; font-size:40px; vertical-align:middle;}
.layer_pop .head h1 em, .layer_pop .head .txt_sub em {color:#00a5e1;}
.layer_pop .head .txt_sub {display:inline-block; width:580px; margin-left:35px; vertical-align:middle;}
.layer_pop .cont {padding:0 50px 60px;}
.layer_pop .close {position:absolute; right:50px; top:50px; width:50px; height:50px; border:0; background:#00a5e1; font-size:0; cursor:pointer;}
.layer_pop .close:after {content:''; display: block; position:absolute; left:50%; top:50%; z-index:1; width:15px; height:15px; margin:-7px 0 0 -7px; background:url('../img/icon.png') no-repeat -413px -5px;}
.layer_pop button.btn.mfp-close { display:inline-block;}

.mask {display:none; position:fixed; left:0; top:0; width:100%; height:100%; z-index:999; background:rgba(0,0,0,.5);}