@charset "utf-8";

 #wrap{min-width:320px; overflow-x:hidden;}

body{opacity:0; position:relative; transition:0.5s ease-out 0s; -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}
body.active{opacity:1;}

#header{height:110px;}
#header .inr{position:relative; max-width:1780px; margin:0 auto; width: unset;}
#header h1{position:absolute; top:35px; left:0;}
#header h1 a{display:block;}
#header .area_util{position:absolute; top:0; right:0; width:190px; height:50px; padding:30px 0 30px 30px; background:#004f90;}
#header .area_util span a{position:relative; display:block; padding-left:45px; font-size:16px; color:#fff; font-weight:200;}
#header .area_util span a:before{content:''; display:block; position:absolute; top:5px; left:0; width:40px; height:40px; background:url(/images/common/icon_call.png)no-repeat 50% 50%; background-size:contain;}
#header .area_util a{padding-left:45px; line-height:1; font-size:22px; font-weight:500; font-family: 'Titillium Web', sans-serif; color:#fff;}
#header nav .gnb{text-align:center; font-size:0;}
#header nav .gnb > li{display:inline-block; vertical-align:top;}
#header nav .gnb > li > a{display:block; height:110px; line-height:110px; padding:0 50px; font-size:18px; transition:all 0.3s ease 0s;}
#header nav .gnb > li > .gnb_area{position:absolute; top:110px; left:50%; z-index:30; width:70%; height:0; margin-left:-35%; border:1px solid #ddd; box-sizing:border-box; background-color:#fff;}
#header nav .gnb > li > .gnb_area > .menu_tit{position:relative; width:50%; height:100%; float:left; background-color:#f4f9ff; text-align:left;}
#header nav .gnb > li > .gnb_area > .menu_tit:before{content:''; display:block; position:absolute; top:0; right:0; width:600px; height:360px; background:url(/images/common/img_menutit_bg.png)no-repeat 50% 50%; background:cover;}
#header nav .gnb > li > .gnb_area > .menu_tit span{display:block; padding:45px 0 0 50px; font-size:30px;}
#header nav .gnb > li > .gnb_area > .menu_tit p{padding-left:50px; font-size:14px;}
#header nav .gnb > li > .gnb_area > .menu_tit em{display:block; width:80px; height:74px; margin-top:30px; padding-left:50px;}
#header nav .gnb > li > .gnb_area > .menu_tit em.icon01{background:url(/images/common/icon_menu01.png)no-repeat 100% 50%; background-size:contain;}
#header nav .gnb > li > .gnb_area > .menu_tit em.icon02{background:url(/images/common/icon_menu02.png)no-repeat 100% 50%; background-size:contain;}
#header nav .gnb > li > .gnb_area > .menu_tit em.icon03{background:url(/images/common/icon_menu03.png)no-repeat 100% 50%; background-size:contain;}
#header nav .gnb > li > .gnb_area > .menu_tit em.icon04{background:url(/images/common/icon_menu04.png)no-repeat 100% 50%; background-size:contain;}
#header nav .gnb > li > .gnb_area > .sub_menu{display:block; width:50%; padding-top:35px; float:left; text-align:left;}
#header nav .gnb > li > .gnb_area > .sub_menu li{display:block;}
#header nav .gnb > li > .gnb_area > .sub_menu li a{display:block; line-height:1; padding:15px 50px; font-size:16px; color:#666; font-weight:300; transition:all 0.3s ease 0s;}
#header nav .gnb > li > .gnb_area > .sub_menu li a:hover{color:#004f90; transition:all 0.3s ease 0s;}
#header.web nav .gnb > li > .gnb_area{opacity:0; visibility:hidden;}
#header.web nav .gnb > li > a:hover{color:#004f90; transition:all 0.3s ease 0s;}
#header.web nav .gnb > li > a:hover ~ .gnb_area{opacity:1; visibility:visible; z-index:31; height:300px;}
#header.web nav .gnb > li > .gnb_area:hover{opacity:1; visibility:visible; z-index:31; height:300px;}
#company + .gnb_area ul > li{width:50%; float:left;}
#header .mobile_open{display:none; position:absolute; top:40px; right:0; width:30px; height:24px; background:url(/images/common/icon_menu.png)no-repeat 50% 50%; background-size:contain; font-size:0px; transition:all 0.3s ease 0s;}
#header .mobile_open.active{background:url(/images/common/icon_menu_close.png)no-repeat 50% 50%; background-size:contain; transition:all 0.3s ease 0s;}
#header.mob nav .gnb > li > .gnb_area{display:none;}

#header .easehome {position: absolute; top: 50%; right: 260px; transform: translateY(-50%);}
#header .easehome_m {display: none;}

#footer{position:relative; padding:80px 0 160px; background:#082034;}
#footer .notice{position:absolute; top:-80px; right:0; width:500px; height:190px; padding:150px 340px 80px 40px; background:url(/images/main/img_notice_bg.jpg)no-repeat 50% 50%; background-size:cover; z-index:1;}
#footer .notice h3{line-height:1; font-size:40px; color:#fff; font-family: 'Titillium Web', sans-serif; font-weight:200;}
#footer .notice h3 > span{font-weight:400;}
#footer .notice > span{display:block; margin:25px 0 20px; font-size:24px; color:#fff;}
#footer .notice p{color:#fff; font-size:16px; font-weight:200; word-break:keep-all;}
#footer .notice a{display:block; width:20px; height:20px; float:right; background:url(/images/main/icon_notice_plus.png)no-repeat 50% 50%; background-size:contain;}
#footer h4{margin-bottom:20px; color:#dedfe1; font-size:22px; font-weight:400;}
#footer > .inr{position:relative; width:100%; max-width:1200px; margin:0 auto;}
#footer > .inr:before{content:''; display:block; position:absolute; top:-178px; left:0px; width:720px; height:98px; background:url(/images/main/img_footer_deco.png)no-repeat 50% 50%; background-size:cover;}
#footer .inr > span{display:block; color:#dedfe1; font-size:16px; font-weight:300;}
#footer .inr > span a{color:#dedfe1; font-size:16px; font-weight:300;}
#footer .inr .marginB20{margin-bottom:20px;}
#footer .inr p{color:rgba(255,255,255,0.5); font-size:14px; font-weight:300; word-break:keep-all;}
#footer .inr p .mrginR15{margin-right:15px;}
#footer .inr ul li{padding-bottom:5px;}
#footer .inr .marginR15{margin-right:15px;}

#footer .inr .support{margin-top: 10px;}
#footer .inr .support ul{overflow:hidden;}
#footer .inr .support ul li{float:left; margin-right: 14px;}

.animate-in{transition:all 0.6s ease-out 0s;}
.fadein{opacity:0; top:80px;}
.fadeinLeft{opacity:0; left:-80px;}
.fadeinRight{opacity:0; right:-80px;}
.animate-in{opacity:1; top:0;}
.animate-in-left{opacity:1; left:0;}
.animate-in-right{opacity:1; right:0;}

@media all and (max-width:1780px) {
    #header .inr {margin: 0 0 0 30px;}
}

@media all and (max-width:1400px){
    #header h1 {top: 38px;}
    #header h1 img {width: 200px;}
    #footer .notice{width:40%; padding:150px 10% 80px 40px;}
}
@media all and (max-width:1280px) {
    #header nav .gnb > li > a {padding: 0 36px;}
    #header .area_util {padding: 30px 0 30px 15px; width: 170px;}
    #header .easehome {right: 210px;}
}
@media all and (max-width:1200px){
    #header h1{left:0;}
    #header .area_util{right:0;}

    #footer > .inr{width:94%;}
}

@media all and (max-width:1080px){
    #header .area_util{opacity:0; position:fixed; left:50%; width:100%;}
    #header .area_util.active{opacity:1; z-index:20;}
    #header .gnb{opacity:0; position:fixed; right:-50%; width:50%; height:100%; background:#fff; transition:all 0.5s ease 0s;}
    #header .mobile_open{display:block; z-index:20; right: 30px;}
    /* #header nav .gnb > li > a:hover ~ .gnb_area{display:inherit; height:0px; }
    #header nav .gnb > li > .gnb_area:hover{display:inherit;}*/
	#header nav .gnb > li > .gnb_area{position:static; height:auto; margin-left:0; width:auto;}
    #header nav .gnb > li > .gnb_area > .sub_menu li a{padding:20px 50px;}
    #nav{opacity:0; position:fixed; width:100%; height:100%; transition:all 0.2s ease 0s;}
    #nav:before{opacity:0; position:absolute; content:''; display:block; left:-100%; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.8); transition:all 0.3s ease 0s; z-index:99;}
    #nav.active{opacity:1; left:0; transition:all 0.3s ease 0s; z-index:10;}
    #nav.active:before{opacity:1; left:0; z-index:0; transition:all 0.3s ease 0s;}
    #nav.active .gnb{opacity:1; display:block; right:0; transition:all 0.5s ease 0s; text-align:left;}
    /* #nav.active .gnb li .gnb_area.active{display:block;}*/
    #nav .gnb{padding-top:110px;}
    #nav .gnb li{width:100%;}
    #header .mobile_open.active a{position:fixed; right:2%; background:url(/images/common/icon_menu_close.png)no-repeat 50% 50%; background-size:contain;}
	#header nav .gnb{overflow-y:auto;}
    #header nav .gnb > li > a{padding:20px 30px; height:auto; border-bottom:1px solid #ddd; line-height:inherit;}
	#header nav .gnb > li > .gnb_area{border:0px; border-bottom:1px solid #ddd;}
    #header nav .gnb > li > .gnb_area > .menu_tit{display:none;}
    #header nav .gnb > li > .gnb_area > .sub_menu{float:none; width:100%; padding-top:0px;}
	#company + .gnb_area ul > li{float:none; width:100%;}
    
    #header .easehome {top: 26px; right: 107px; transform: unset;}
    #header .easehome_m {display: table; margin-left: auto; padding: 15px 15px 0 0;}
    #header .easehome_m img {width: 170px;}
}

@media all and (max-width:900px){
    #footer{padding:180px 0 80px;}
    #footer > .inr:before{display:none;}
    #footer .notice{width:94%; padding:50px 3% 0;}
}

@media all and (max-width:680px){
    #header{height:80px;}
    #header .inr {margin: 0 0 0 15px;}
    #header h1{top:25px;}
    #header h1 a img{width:80%;}
    #header .mobile_open{top:25px; right: 15px;}
    #header .easehome {top: 13px; right: 87px;}
    #header .easehome img {width: 38px;}
}

@media all and (max-width:620px){
    #footer{padding:200px 0 80px;}
    #footer .notice{width:94%; padding:50px 3% 20px;}
	#header .area_util{left:20%;}
	#header .gnb{width:80%;}
}

@media all and (max-width:480px){
    #footer .inr .support ul li {float: none;}
    #footer .notice > span{font-size:20px;}
    #footer .notice p{font-size:14px;}
    #header .easehome {display: none;}

    #footer .inr p .mrginR15.ty2 {display: block; padding-top: 5px;}
}