@charset "utf-8";

/*
================================================================================
LAYOUT
================================================================================
*/

/* 상단팝업 */
#toppop {position:relative;width:100%;z-index:3000;background:#0d121c;min-width:320px; height:135px;}
#toppop #toppop-cont {position:relative;max-width:1080px;text-align:left;margin:0 auto;background: url('../images/main/bg_pop.jpg') center 100%;height: 100%;}
.popups {position:relative;z-index:2000;max-width:1080px;margin:0 auto;}
.toppop .wpop-list {overflow:hidden;padding: 110px 0 0 35px;}
.toppop .wpop-list li {float:left;}
.popups .wpcont {width:550px;height:140px;overflow:hidden;position:absolute;top: 8px;left:50%;margin-left:-230px;z-index:10;}
.popups .wpcont img {width:auto;display:block;}
#toppop.on { height:135px;}

/* 제어버튼 */
.toppop .wpop-ctrl-btns {position:relative;;z-index:5010;font-size:11px;line-height:1.3em; margin: 0 10px}
.toppop .wpop-go-btns * {vertical-align:top;}
.wpop-ctrl-btns button {border:0;cursor:pointer;background:url('https://www.hesol365.com/images/main/w_ctrl_btns.png') no-repeat;width:18px;height:39px;text-indent:-9999px;position:absolute;bottom:0;}
.wpop-ctrl-btns .btn-prev {left:0;bottom:40px;background-position:0 0;}
.wpop-ctrl-btns .btn-next {right:0;bottom:40px;background-position:-49px 0;}
.wpop-ctrl-btns .btn-stop {bottom:-5px;left:0;background-position:-28px -64px;width:20px;height:20px;}
.wpop-ctrl-btns .btn-play {bottom:-5px;left:0;background-position:0 -64px;width:20px;height:20px;}
.toppop .wpop-list li .nicon {position:relative;background:url('https://www.hesol365.com/images/main/w_ctrl_btns.png') no-repeat -89px -70px;width:12px;height:11px;display:block;text-indent:-9999px;margin:0 3px;z-index:200;}
.toppop .wpop-list li .nicon.over {background:url('https://www.hesol365.com/images/main/w_ctrl_btns.png') no-repeat -57px -70px;width:26px;}
.toppop .close-btns {position:absolute;bottom:10px;right:10px;z-index:5030;/* width:150px; */}
.toppop .close-btns * {vertical-align:middle;}
.toppop .close-btns label {color:#fff;font-size:11px;padding:0 30px 0 5px;}
.toppop .close-btn {position:absolute;bottom:0;right:0;border:0;width:20px;height:20px;cursor:pointer;overflow:visible;background:url('https://www.hesol365.com/images/main/w_ctrl_btns.png') no-repeat -98px 0;}


@media only screen and (max-width:1024px){
	.toppop .popups {height:120px;}
	.popups .wpcont {width:100%;height:120px;text-align:center;left:0;margin-left:0; }
	.popups .wpcont img {height:auto;width:100%;display:inline-block;max-width:550px;}	

}

/* header */
#wrap {min-width:1080px; position:relative;}
#header {width:100%;height: 130px ;position:absolute;left:0;top:0;background: #303030 url('../images/common/bg_header.png') repeat-x 100% 45px;z-index:400;}
.headerWrap {position:relative;width:1080px;height: 85px;margin:0 auto;}
.topGroup{height:45px;background: #fff;}
#header .temp {height: 85px ; width:100%; margin:0 auto;}
.topBox{ display:none;}

/* othersite */
.othersite {position:relative;bottom:0;float:left; height:45px;overflow:hidden;}
.othersite li{ float:left; margin-right:1px;-webkit-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out;}
.othersite li a{display:block;height:45px;line-height:45px;padding: 0 20px; font-size: 0.87em;background:#eae9e8;color:#414141;}
.othersite li:first-child{ margin-right:0;}
.othersite li:first-child a{ background:#4f4e4f; color:#fff;}
.othersite li:hover{ margin-top:0px;}

/* home-sitemap */
.home-sitemap{position:absolute; top:0; right:0; font-family:'malgun Gothic'; z-index:11;}
.home-sitemap li{float:left;height: 45px;}
.home-sitemap li a,
.home-sitemap li button{display: inline-block;padding: 0 10px;color: #646363; background:#fff;line-height: 45px;font-size: 0.84em;position:relative;}
.home-sitemap li a:after,
.home-sitemap li button:after{content:'';position:absolute;left:0;top:18px;width:1px;height:13px;border-left: 1px solid #ededed;}
.home-sitemap li:first-child a:after{ display:none;}
.home-sitemap li a:hover{ color:#000;}
.home-sitemap li a img{filter: alpha(opacity=60); opacity: 0.6;  -webkit-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out}
.home-sitemap li a:hover img{filter: alpha(opacity=100); opacity: 1;}
.home-sitemap li .popBn{ display:block; background:url('https://www.hesol365.com/images/common/btn_pop_colse.png') no-repeat 85% 55%; padding-right:30px;}
.home-sitemap li .popBn.on{ background-image:url('https://www.hesol365.com/images/common/btn_pop_open.png'); }
/*.home-sitemap li:last-child { border:1px solid #ededed; border-width:0 1px 0 1px;}
.lang li{ float:none;}
.lang li a{ width:100%; box-sizing:border-box; border-top:1px solid #ededed;}
.lang a.bn{background: url('../images/common/ico_lang.png') no-repeat 17px 50%;padding: 0 31px 0 37px;}
*/
.lang{border:1px solid #ededed;border-width:0 1px 0;overflow: hidden;}
.lang .bn{ display:none;}
.lang ul { display:block !important;}
.lang li{ float:left;}
.lang li a{ background-repeat:no-repeat; background-position:50% 50%; width:45px; height:45px; font-size:0; padding:0; vertical-align: top;}
.lang li a:after{ top:0; height:100%;}
.lang li:nth-child(1) a{ background-image:url('../images/common/lang_ko.png'); }
.lang li:nth-child(2) a{ background-image:url('../images/common/lang_en.png'); }
.lang li:nth-child(3) a{ background-image:url('../images/common/lang_cn.png'); }

.home-sitemap .lang > a:after{content:'';display: inline-block;left: inherit;right: 17px;top: 22px;width: 7px !important;height: 5px !important;background: url('https://www.hesol365.com/images/common/arrow_lang.png') no-repeat 0 0;border: 0;}

/* language */
.language {float:left; position:relative; height:35px; z-index:9999;}
.language .lang {overflow:hidden; height:17px !important; margin-top: 8px;}
.language .lang.on img {margin-top:-17px;}
.language ul {display:none; position:absolute; top:35px; left:0; width:86px; background:#464646;border-top: 1px solid #6b6b6b;}
.language ul li {border-top:1px solid #6e6e6e; float: none !important;}
.language ul li:first-child {border-top:0;}
.language ul li a {display:block; height:29px !important; font-size: 0.87em; color:#fff; line-height:29px; text-align:center;}

/* logo */
.headerWrap .logo {position:absolute;top: 25px;left: 0;font-size:0;text-indent:-10000px;line-height:0;width: 155px;height:38px;background:url('../images/common/ci.png') no-repeat left 10px center;}
.headerWrap .logo a {display:block;width: 155px;height:38px;box-sizing:border-box;}

/* gnb menu */
.bn_siteMap{display:block;position:absolute;right:0px;top: 18px;width:50px;height:50px;background:url('../images/common/btn_siteMap.png') no-repeat 100% 50%;font-size:0;filter: alpha(opacity=80);opacity: 0.8;-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.bn_siteMap:hover{filter: alpha(opacity=100); opacity: 1;}
.bn_siteMap:before{content:'';display:block;background:#ccc;height:20px;width: 1px;margin: 15px 0 0 10px;}

/* gnb 메뉴 */
#gnb { float:right; padding-right:60px;} /*메뉴위치*/
#gnb:after {display:block; content:""; clear:both;}
#gnb > li { text-align:center; float:left; }
#gnb > li:nth-child(7),
#gnb > li:nth-child(8){ display:none;}
#gnb > li .tit{ position:relative;}
#gnb > li .tit > a {color: #fff;font-size: 1.16em;font-weight: 500;padding:0;display:block;width: 110px;line-height: 85px;letter-spacing:-0.03em;font-family:'나눔스퀘어','Nanum Square';}
#gnb > li:nth-child(1) .tit > a{ width:120px;} 
#gnb > li:nth-child(2) .tit > a{ width:170px;} 
#gnb > li:nth-child(3) .tit > a{ width:120px;} 
#gnb > li:nth-child(4) .tit > a{ width:120px;} 
#gnb > li:nth-child(5) .tit > a { width:110px;} 
#gnb > li:nth-child(6) .tit > a{ width:100px;} 

#gnb > li .tit a:hover,
#gnb > li .tit a:focus,
#gnb > li .tit a:active,
#gnb > li .tit a.on {color:#2cc6cc;}
#gnb > li.over .tit a{color: #2cc6cc !important; font-weight:700;}
#gnb > li.over .tit a::after{opacity: 1;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);transform: translateY(0px);}

/* 하위메뉴 bg height:165px;-- 높이값 */
#gnb > li > div {display: none;height: 220px;width:1080px;position:absolute;left: 0;box-sizing:border-box;box-shadow:none;}
#gnb > li.over > div {background: #303030; z-index:10;}
#gnb > li.over .depth2{ display:block;}
#gnb .depth2{height:100%;width: 850px;float:right;padding: 35px 0 0 0;box-sizing:border-box;position:relative;}
#gnb .depth2 li{position:relative;}
#gnb .depth2 li:before{content:"";display:block;position:absolute;background: rgba(255,255,255,0.5);width:1px;height: 160px;left:0;top:0px;}
	
#gnb > li > div > ul > li {float:left;padding:0;background:none;font-size:0.95em;letter-spacing:-0.05em;text-align:left;font-weight:300;width: 25%;}

#gnb > li > div .sTit{float:left;padding: 55px 0 10px 30px;width: 230px;text-align: left;font-size: 22px;color:#fff;line-height: 1em; letter-spacing:-0.05em;background: url("../images/common/bg_stit.png") no-repeat 0px 40px;}
#gnb > li > div > ul > li:first-child {margin-top:0;}
#gnb > li > div > ul > li > a {display:block;color:#fff;font-size: 1em;padding: 12px 2px 12px 20px;border:1px solid rgba(255,255,255,0.5);margin: 0 18px;letter-spacing: -0.04em;}

#gnb > li > .ulWrap > ul > li > a:focus,
#gnb > li > .ulWrap > ul > li > a:active,
#gnb > li > .ulWrap > ul > li > a:hover{ background:#369b9f; border-color:#369b9f;}
#gnb > li > .ulWrap > ul > li.target a:after{content:'';display:inline-block;margin: 0 10px;background:url('https://www.hesol365.com/images/common/ic_blank.gif') no-repeat 0 0;width:14px;height:14px;vertical-align: top;}
#gnb > li > .ulWrap > ul > li.target > a:focus,
#gnb > li > .ulWrap > ul > li.target > a:active,	
#gnb > li > .ulWrap > ul > li.target > a:hover{ background:none;}
#gnb > li > .ulWrap > ul > li.target a:hover:after {margin-top: 5px}

/* depth3 오픈메뉴*/
#gnb > li > div > ul > li > ul{margin: 10px 25px 0 38px; display:block !important;}
#gnb > li > div > ul > li > ul > li {margin-bottom: 5px;}
#gnb > li > div > ul > li > ul > li > a{ color:#fff; font-weight: 300; font-size: .95em}
#gnb > li > div > ul > li > ul > li > a:hover{ text-decoration:underline;}
#gnb > li > div > ul > li > ul > li:before{ display:none !important;}

/* util */
.util{position:absolute; top:33px; right:40px; z-index:1;}
.util li{float:left; height:35px }
.util li a{ display: inline-block; padding:0 10px 0 0px; color:#fff; line-height:35px; font-size: 0.87em;}
.util li a:hover{ color:#ec1744;}
.util li a:hover:before{color:#fff;}
.util li a:before{ content:'/'; display:inline-block; padding-right:10px; font-size:0.9em;}
.util li:first-child a:before{ display:none;}

/* container */
#container { padding-top:130px;}
#container:after {display:block; content:""; clear:both;}

/* footer */
#footer{position:relative; padding:0 0 0px 0; background:#222222; min-height: 216px}
#footer:after{ content:''; display:block; background:#29292a; position:absolute; top:0; width:100%; height:65px;}
#footer .guide{ position:relative; margin:0 auto; width:1080px; height:65px; margin-bottom:35px; z-index:1;}
#footer .foot_util{ float:left;}
#footer .foot_util li{ float:left; position:relative;line-height:65px;padding:0 18px; }
#footer .foot_util li:first-child a{padding-left:0;}
#footer .foot_util li:first-child a:before{ background:none;}
#footer .foot_util li a{ color:#9f9fa0; display: block}
#footer .foot_util li a:hover{ text-decoration:underline;}

#footer .foot_sns{  position:absolute; left: 50%; top:0; width:280px; z-index: 10;margin-left: 275px}
#footer .foot_sns li{ float:left; border-right:1px solid #212122;} 
#footer .foot_sns li:first-child{ border-left:1px solid #212122;}
#footer .foot_sns li a{ display:block; width:65px; height:65px; font-size:0; background:url('../images/common/foot_sns.png') no-repeat 0 0; transition-duration:0.4s; }
#footer .foot_sns li:nth-child(1) a{ background-position-x:0;}
#footer .foot_sns li:nth-child(2) a{ background-position-x:-65px;}
#footer .foot_sns li:nth-child(3) a{ background-position-x:-130px;}
#footer .foot_sns li:nth-child(4) a{ background-position-x:-195px;}
#footer .foot_sns li:nth-child(1) a:hover,
#footer .foot_sns li:nth-child(2) a:hover,
#footer .foot_sns li:nth-child(3) a:hover,
#footer .foot_sns li:nth-child(4) a:hover{ background-image:url('../images/common/foot_sns_on.png');}

.footerBox {position:relative; width:1080px; margin:0px auto; background:url("../images/common/foot_ci.png") no-repeat 0 0; box-sizing:border-box;  padding-left:230px; }
.info { margin-bottom:5px;}
.info address{ display:inline-block; color:#828282; font-style:normal;}
.info address span{display: block;float: left;margin-right: 12px;padding-right: 12px;border-right:1px solid #424242;line-height:1;margin-bottom: 10px;}
.info address span:last-child,
.info address span:nth-child(4),
.info address .tit{  border-right:0; padding-right:0; }
.footerBox p.copyright {color:#828282;clear:both;font-size:.9em;font-weight: 100; line-height:1em;}


/* 콘텐츠 상단으로 이동 */
footer .btn-top {width:60px;height:65px;overflow:hidden;background:rgba(55, 169, 177, 0.9) url('../images/common/toTop.png') center center no-repeat;display:block;position:fixed;bottom: 20px;right:-85px;z-index:300;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}
footer .btn-top.on {right: 20px; background-color:rgba(55, 169, 177, 0.9);}
footer .btn-top:hover{background-color:rgba(55, 169, 177, 0.9);}


@media screen and (max-width:1024px) {	
	body{ font-size:15px;}
	
	#wrap,
	#header .headerWrap,
	#container,
	#footer .footerBox {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
	
	#header .temp,
	#header .headerWrap,
	#footer .guide,
	#footer .footerBox{width:100%; max-width:815px; min-width:300px; margin:0px auto;}
	
	#wrap{width:100%; min-width:300px; margin:0 auto; background:#fff;}
	#header {position:absolute;padding-top:0;min-width:300px;height:auto;background-position-y: 35px;}
	#header .headerWrap{height: 60px;}		
	#header .temp { height:auto;}
	
	/* othersite */
	#header .topGroup .headerWrap,
	#header .topGroup,
	.othersite,
	.othersite li a{ height:35px;}
	.othersite li a{ line-height:35px;}	
	
	/* home-sitemap */
	.home-sitemap{padding-right: 20px;}
	.home-sitemap li:first-child,
	.home-sitemap li:last-child,
	.bn_siteMap{ display:none;}		
	.home-sitemap li, .home-sitemap li .popBn{height:35px;}
	.home-sitemap li a, .home-sitemap li .popBn{ line-height:35px;}
	.home-sitemap li a:after, .home-sitemap li button:after{ top:13px;}	
	.home-sitemap li .popBn{ background-position-x:100%; padding-right:20px;}
		
	/* logo */
	.headerWrap .logo {top: 13px;width: 122px;left: 20px;height: 33px;background-size: 122px 33px;-moz-background-size: 122px 33px;-webkit-background-size: 122px 33px;background-position-x: 0;}
	.headerWrap .logo a{width: 122px;height: 35px;top:0;}
	
	/* mGnb */
	#mGnb {position:absolute;right:0;top: 0px;z-index: 999;overflow:hidden;width: 60px;height: 60px;font-size:0;text-indent:-10000px;}		
	#mGnb a{display: block;width:100%;position: relative;height: 60px;}
	#mGnb span{position:absolute;right:20px;display: block;height: 2px;width: 30px;border-bottom: 2px solid #ffffff;transition: 0.3s all ease;-webkit-transition: 0.3s all ease;-moz-transition: 0.3s all ease;-ms-transition: 0.3s all ease;-o-transition: 0.3s all ease;}
	#mGnb span:nth-child(1){ top:21px;}
	#mGnb span:nth-child(2){top:29px;}
	#mGnb span:nth-child(3){top:37px;}
	#mGnb.mGnbOn{position:fixed; top:35px;}
	#mGnb.mGnbOn span{ border-color:#fff;top: 29px;}	
	#mGnb.mGnbOn span:nth-child(1){-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);transform: rotate(45deg);}
	#mGnb.mGnbOn span:nth-child(2){ display:none;}		
	#mGnb.mGnbOn span:nth-child(3){ -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
	
	/* topBox */
	.topBox{ display:block;overflow: hidden; background: #222;color:#fff;height:60px;}
	.topBox .home{border-right:1px solid rgba(0,0,0,0.4);width: 60px;background:url('../images/common/ico_home.png') no-repeat 50% 50%;font-size:0;margin-right: 15px;}
	.topBox li{ float:left;}
	.topBox li:nth-child(2) a{ padding-left:0;}
	.topBox li a{display:block;padding:0 5px;line-height: 60px;font-weight:500;color:rgba(255,255,255,0.5);}
	.topBox li.on a,
	.topBox li a:hover{ color:#fff;}	
	.topBox li a:after{ content:'/'; display:inline-block; padding-left:10px; font-size:0.9em; font-weight:100; color:rgba(255,255,255,0.5) !important;}
	.topBox li:last-child a:after{ display:none;}	
				
	/* gnb menu */
	.gnb_wrap {position:fixed;right:-280px;top: 35px;width:280px;height:100%;z-index:200;display:none;}
	.gnb_wrap .gnbIn {position:relative; height:100%;}
	.gnb_wrap nav {position:relative;width:auto;height:100%;background: #fff;overflow:hidden;overflow-y:auto;z-index:3;}
	
	#gnb {position:static; float:none; padding-right:inherit;}
	#gnb > li {position:static;margin:0;padding:0;background:none;text-align:left;float:none;width:auto;border-bottom: 1px solid #ccc;border-right:none;}
	#gnb > li > div .sTit{ display:none;}	
	#gnb > li:nth-child(7),
	#gnb > li:nth-child(8){ display: block;}
	
	#gnb > li .tit > a {display:block;color: #282828;height: 55px;line-height: 55px;padding: 0px 0 0px 20px;border:none;width:auto !important;position:relative;background: url('../images/common/arrow_depth.png') no-repeat 89% center;}
	#gnb > li .tit > a:hover, 
	#gnb > li .tit > a:focus,
	#gnb > li .tit > a:active {color:#45b0b3 !important;}
	#gnb > li .tit > a:after{ display:none;}
		
	#gnb > li > div {width:auto !important;position:static;left:inherit;margin:0;padding: 0px 0;border:0;height:auto;background-color: #ffffff;}
	#gnb > li > div > ul > li {margin:0;width:auto; float:none;}
	#gnb > li > div > ul > li:before{ display:none;}		
	
	/*하위메뉴*/
	#gnb > li.over .depth2{ display:block;}
	#gnb .depth2{ background:#f7f7f7; border-left:none;  height:auto;  width:100%; float:none; padding:0;}
	#gnb .depth2 li:first-child:after,
	#gnb .depth2 li:first-child:before{ display:none;}	
	#gnb > li > div > ul > li > a {display:block; margin:0;color: #555;border-top: 1px solid #e2e2e2;}	
	#gnb > li > div > ul > li > a:hover,
	#gnb > li > div > ul > li > a:focus,
	#gnb > li > div > ul > li > a:active{ color:#000 !important; text-decoration:underline;}	
	#gnb > li > .ulWrap > ul > li > a:hover{ background:none;}		

	
	/* depth3 */
	#gnb > li > div > ul > li > ul{background: #fff;padding: 8px 20px;margin: 0;font-size:1em;border-top: 1px solid #ebebeb;display:none;letter-spacing:-0.05em;height: 100%;}
	#gnb > li > div > ul > li > ul li{line-height:24px;/* padding-left:6px; */position:relative;margin-bottom: 0;}
	#gnb > li > div > ul > li > ul li a {color: #555;font-size: 1em;display: block;padding: 2px 0 2px 10px;position:relative;}
	#gnb > li > div > ul > li > ul li a:before{content:'';display:block;background: #abadb3;width:5px;height:1px;position:absolute;top:15px;left:0;}
	#gnb > li > div > ul > li > ul li a:hover, 
	#gnb > li > div > ul > li > ul li a:active{ color:#555; text-decoration:underline;}
	#gnb > li > .ulWrap > ul > .arrow > ul li a:hover,
	#gnb > li > .ulWrap > ul > .arrow.on > ul li a:hover{ background:none;}
	#gnb > li > div > ul > li > ul li a:hover:before, 
	#gnb > li > div > ul > li > ul li a:active:before{background:#555; }
	#gnb .depth3 li:first-child:before,
	#gnb .depth3 li:first-child:after{ display:none !important;}		
	
	/* mobileblock */	
	#mobileblock{position:fixed; z-index:50; top:0px; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); display:none;}
	
	/* footer */		
	footer .btn-top{bottom: 20px;width:50px;height:55px;}	
	#footer,
	#footer.intro{padding: 0px 0px 40px 0px;}
	#footer:before{ display:none;}
	#footer:after{ height:50px;}
	#footer .guide{ height:50px; margin-bottom:20px; width:95%;}
	#footer .foot_util{ background:#29292a; text-align:center;line-height:50px;padding:0 7px;}	
	#footer .foot_util li {line-height: 50px;  padding: 0 10px;}
	#footer .foot_sns{ width:205px; margin-left: 202px}
	#footer .foot_sns li{ vertical-align:top;}
	#footer .foot_sns li a{height: 50px;width: 50px;background-position: -12px -6px;}
	#footer .foot_sns li:nth-child(1) a{background-position-x:-9px;}
	#footer .foot_sns li:nth-child(2) a{ background-position-x:-73px;}
	#footer .foot_sns li:nth-child(3) a{ background-position-x:-138px;}
	#footer .foot_sns li:nth-child(4) a{ background-position-x:-202px;}
	#footer .footerBox {margin: 25px auto 10px}
	.footerBox{clear:both;background-position: center 0px;background-size: 150px;padding: 50px 0 0 0px; }
	.info { margin:0 auto; width:95%; text-align:center;}	
	.info address{ margin-bottom:5px;}
	.info address span{ float:none; display:inline-block; margin-right: 5px; margin-bottom:5px; padding-right: 10px;}
}

@media screen and (max-width:640px) {	
	body{ font-size:14px;}
	
	#header{ background-position-y: 30px; }

	#header .headerWrap{ height:50px;}
		
	/* othersite */
	#header .topGroup .headerWrap,
	#header .topGroup,
	.othersite,
	.othersite li a{ height:30px;}
	.othersite li a{ line-height:30px;}		
	.othersite li a{ padding:0 13px;}	
	
	/* home-sitemap */
	.home-sitemap{ padding-right:10px;}
	.home-sitemap li a, .home-sitemap li button{  padding:0 7px;}
	.home-sitemap li, .home-sitemap li .popBn{height:30px;}
	.home-sitemap li a, .home-sitemap li .popBn{ line-height:30px;}
	.home-sitemap li a:after, .home-sitemap li button:after{top:11px; height:11px;}
	.home-sitemap li a:after{ display:none;}
	.home-sitemap li:nth-child(3){ display:none;}
	
	/* logo */
	.headerWrap .logo {top: 10px;width: 103px;left: 10px;height: 30px;background-size: 103px 28px;-moz-background-size: 103px 28px;-webkit-background-size: 103px 28px;}
	.headerWrap .logo a{width: 103px;height: 30px;}	

	/* mGnb */
	#mGnb{ width:50px; height:50px;}
	#mGnb span{right:15px; width:25px;}
	#mGnb a{ height:50px; }
	#mGnb span:nth-child(1){top: 18px;}
	#mGnb span:nth-child(2){top: 25px;}
	#mGnb span:nth-child(3){top: 32px;}
	#mGnb.mGnbOn { top:31px;}
	#mGnb.mGnbOn span{ top:24px; }
	
	/* topBox */
	.topBox{ height:50px;}
	.topBox .home{ width:50px; margin-right:10px;}
	.topBox li a{ line-height:50px;}
	.topBox li a:after{padding-left: 7px;}	
	
	/* Gnb */
	.gnb_wrap{ top:30px; width: 260px;}		
	#gnb > li .tit > a{ height:45px; line-height:45px; padding-left:15px; background-position-x:92%;}
	#gnb > li > div > ul > li > a{ padding:9px 0 9px 15px;}
	#gnb > li > div > ul > li > ul{padding: 6px 15px;}
	
	/* footer */		
	footer .btn-top{ bottom:10px; width:45px; height:50px;}	
	footer .btn-top.on{ right:10px;}
	#footer,
	#footer.intro{padding: 0px 0px 30px 0px;}
	#footer:before,
	#footer:after{ display:none;}
	#footer .guide{height:inherit; width:auto; margin-bottom:0;}
	#footer .foot_util{ float:none; text-align: center}
	#footer .foot_util li{ float:none; display:inline-block;line-height: 30px}
	
	#footer .foot_sns{  position:relative; left: inherit; top:inherit; width:inherit;margin-left:0}
	#footer .foot_sns{ text-align:center; float:none; }
	#footer .foot_sns li{ float:none; display:inline-block; vertical-align:top; border:0 !important;}
	#footer .foot_sns li a{height: 40px;width: 40px;background-position: -13px -12px;}
	#footer .foot_sns li:nth-child(1) a{background-position-x:-13px;}
	#footer .foot_sns li:nth-child(2) a{ background-position-x:-78px;}
	#footer .foot_sns li:nth-child(3) a{ background-position-x:-143px;}
	#footer .foot_sns li:nth-child(4) a{ background-position-x:-208px;}
	.footerBox{padding: 40px 0 0 0px;background-size: 120px;}
	.info{ width:inherit; padding:0 10px;}
	.info address span{ border:0;line-height: 1.2; margin-bottom:2px;}
}

@media screen and (max-width:480px) {	
	#footer .foot_util{overflow: hidden;padding:0px;}
	#footer .foot_util li{ float:left; width: 50%; }	
	
}



/*
================================================================================
SUB LAYOUT
================================================================================
*/
/* 왼쪽메뉴 */
#menu {position:relative;width: 100%;height: 50px;margin: -50px 0 0 0;text-align: center;background: rgba(255,255,255,0.9);}
#menu .tit{ display:none;}
#menu .lnb {margin:0 auto;width: 1080px;}
#menu .lnb > li{display: inline-block;}
#menu .lnb > li:first-child{border-top:0;}
#menu .lnb > li > a {display:block;padding:0 50px;font-size:1.15em;font-weight:400;color:#636363;line-height: 50px;height:50px;box-sizing: border-box; letter-spacing:-0.08em; position:relative;}
#menu .lnb > li.arrow > a,
#menu .lnb > li.arrow.on > a{}
#menu .lnb > li.arrow > a:hover,
#menu .lnb > li.arrow > a:focus,
#menu .lnb > li.arrow > a:active{}
#menu .lnb > li.on > a, 
#menu .lnb > li > a:hover, 
#menu .lnb > li > a:focus, 
#menu .lnb > li > a:active {color:#000; font-weight:500; }
/*#menu .lnb > li.on > a:after,
#menu .lnb > li > a:hover:after, 
#menu .lnb > li > a:focus:after, 
#menu .lnb > li > a:active:after{ content:''; display:block; width:50%; height:3px; position:absolute; bottom:0; left:25%; background:#333;}*/


#menu .subLnb {display:none !important;}

/* visual_area */
.visual_area{height:270px; background:#bfc0c2 url('https://www.hesol365.com/Images/sub/sub_visual_01.jpg') 50% 0 no-repeat;}
.visual_area .txtBox{display:block;width:1080px;margin:0 auto;padding-top: 0;}
.visual_area .txtBox p{ text-align:center; color:#fff; font-size: 2.35em; padding-top:90px;text-transform: uppercase;font-weight:700; font-family:'나눔스퀘어','Nanum Square';letter-spacing:-0.03em;}
.visual_area.top_img01{ background:#bfc0c2 url('https://www.hesol365.com/images/sub/sub_visual_01.jpg') 50% 0 no-repeat;}
.visual_area.top_img02{ background:#3d3c3a url('../images/sub/sub_visual_02.jpg') 50% 0 no-repeat;}
.visual_area.top_img03{ background:#7e736e url('../images/sub/sub_visual_03.jpg') 50% 0 no-repeat;}
.visual_area.top_img04{ background:#87766c url('../images/sub/sub_visual_04.jpg') 50% 0 no-repeat;}
.visual_area.top_img05{ background:#878888 url('../images/sub/sub_visual_05.jpg') 50% 0 no-repeat;}
.visual_area.top_img06{ background:#b6b9bb url('../images/sub/sub_visual_06.jpg') 50% 0 no-repeat;}
.visual_area.top_img07{ background:#878680 url('../images/sub/sub_visual_07.jpg') 50% 0 no-repeat;}
.visual_area.top_img08{ background:#66514a url('../images/sub/sub_visual_08.jpg') 50% 0 no-repeat;}
.visual_area.top_img04,
.visual_area.top_img07,
.visual_area.top_img08{ background-size:cover;}


/* title_area */
#sub_content .title_area{ margin-bottom:40px}	
.title_area h2{ font-size:2.45em; font-weight:700; line-height:1em; color: #333; text-align:center;}
.title_area h2 span { color:#919191; font-size: 0.4em; display:block; margin:15px 0 20px 0; line-height:1em; font-weight:300; font-family: 'Malgun Gothic', '맑은 고딕'}
.title_area h2:after{ content:''; display:block; background:#c7c7c7; width:48px; height:3px; margin:0 auto;}

/*** menu_tab ***/
.menu_tab { position:relative; padding:0; margin:40px 0;}
.menu_tab ul{ margin: 0 auto; text-align:center;} 
.menu_tab li { display:inline-block; box-sizing:border-box; width:170px; margin: 0 -3px;}
.menu_tab li:last-child {padding:0px; border-left:0;}
.menu_tab li a{display:block; padding:0; height:50px; line-height:50px; font-size:15px; color:#888;text-decoration:none; border: 1px solid #c7c7c7; margin:-1px 0 0 -1px; box-sizing:border-box;background: #fff;}
.menu_tab li a:hover,.menu_tab li a:focus,.menu_tab li a:active{color:#44acb3;}
.menu_tab li.on a{color:#fff; border:1px solid #44acb3; background: #44acb3; }


/* quickmenu */
.quickmenu{position: fixed;right: 20px;top: 300px;width: 200px;overflow:hidden;z-index:1;}
.quickmenu > ul{ position:relative; float:right;}
.quickmenu > ul > li{/* width: 90px; */padding:0;margin:0;/* position: relative; */}
.quickmenu > ul > li > a{position: relative;display:block;width: 90px;height: 75px;text-align:center;box-sizing:border-box;padding-top:48px;background: #fff url('../images/common/ico_quickmenu.png') no-repeat 0 0;transition-duration:0.4s;border:1px solid #dededb;border-width:0 1px 1px 1px;letter-spacing: -0.06em;line-height:1.2;font-size: 12.5px;}
.quickmenu > ul > li:nth-child(1) > a{height:100px;color:#fff !important;border:none;padding-top:18px;font-size:15.5px;background-color: rgba(0,0,0,0);}
.quickmenu > ul > li:nth-child(1) > a > span{ font-size:11.5px; display:block; color:#747b98; letter-spacing:0;}
.quickmenu > ul > li:nth-child(2) > a{background-position-y: -105px;}
.quickmenu > ul > li:nth-child(3) > a{background-position-y: -185px;}
.quickmenu > ul > li:nth-child(4) > a{background-position-y: -265px;}
.quickmenu > ul > li:nth-child(5) > a{background-position-y: -345px;}
.quickmenu > ul > li:nth-child(6) > a{background-position-y: -415px;height:90px;letter-spacing:-0.05em;font-size: 0.8em;}
.quickmenu > ul > li:nth-child(7) > a{background-position-y: -495px;height:90px;letter-spacing:-0.05em;font-size: 0.8em;}
.quickmenu > ul > li:nth-child(1) > a:hover,
.quickmenu > ul > li:nth-child(2) > a:hover,
.quickmenu > ul > li:nth-child(3) > a:hover,
.quickmenu > ul > li:nth-child(4) > a:hover,
.quickmenu > ul > li:nth-child(5) > a:hover,
.quickmenu > ul > li:nth-child(6) > a:hover,
.quickmenu > ul > li:nth-child(7) > a:hover{background-image: url('../images/common/ico_quickmenu_on.png'); color:#45b0b3;}
.quickmenu.on{ top:10px;}

.quickmenu .depth2{position:absolute;right: 89px;bottom: 0;width: 110px;z-index: 1;border: 1px solid #45b0b3;background-color: #fff;display:none;}
.quickmenu .depth2 ul{ position:relative; padding:10px;}
.quickmenu .depth2 ul > li > a{display:block;font-size:0.85em;padding:5px 0 5px 7px;line-height:1.2em;letter-spacing: -0.07em; position:relative;}
.quickmenu .depth2 ul > li > a:before{ content:''; display:block; width:2px; height:2px; background:#747b98; position:absolute; left:0; top:13px;}
.quickmenu .depth2 ul > li > a:hover{ color:#45b0b3; text-decoration:underline;}
.quickmenu .depth2 ul > li > a:hover:before{ background:#45b0b3;}
.quickmenu > ul > li.bn07.on > a{background-image: url('../images/common/ico_quickmenu_on.png'); color:#45b0b3;}
.quickmenu > ul > li.bn07.on .depth2,
.quickmenu > ul > li.bn07:focus > a + div.depth2,
.quickmenu > ul > li.bn07:hover > a + div.depth2{display:block;}
.quickmenu > ul > li.bn07:hover > a:before{content:'';display:block;width:13px;height:23px;background: url('https://www.hesol365.com/images/common/ico_quick_arrow.png') no-repeat 0 50%;position:absolute;left: -1px;top: 50%;margin-top: -16px; z-index: 2;}


/* content */
#sub_content{position:relative; padding:80px 0 0 0; margin:0 auto;}
#page{clear:both; min-height:600px;  word-break: keep-all;}
#page table p{ margin-bottom:0;}

.fixWidth{position:relative; width:1080px; margin:0 auto; margin-bottom:50px}

/* wildBox */
.wildBox{ width:100%; padding:0; box-sizing:border-box; overflow:hidden; background:#b8b3b0;}
.wildBox .inner{ /*width:1080px; */margin:0 auto; padding:50px 0; position:relative; text-align:center; overflow:hidden; }


/* sectionBox ttl */
.sectionBox{ margin:75px auto 65px auto; position:relative; overflow:hidden; word-break: keep-all;}
.sectionBox .con{ width:715px; float:right;}
.sectionBox .con .ttl02:first-child{ margin-top:0;}
.sectionBox p{ margin-bottom:0px;}
.sectionBox p + p {margin-top:10px;}
.sectionBox p + ul, .sectionBox p + ol {margin-top:10px;}
.sectionBox .ttl01{ float:left; clear: both;font-size:2.5em;color:#2e2d2d;line-height: 1.1em;position:relative; max-width:350px;}
.sectionBox .ttl01 span{display:block;font-size:0.63em;color:#959595;line-height: 1.2em;font-weight:300;margin-top:  10px;}

.ttl01{ font-size:1.67em; color:#050505; position:relative; line-height:1.1em; margin: 60px 0 30px;}
.ttl01:before{ content:''; display:block; position:absolute; top:-15px; left:0; background:#44acb3; width:60px; height:3px;}

.ttl02.style1{font-size:1.35em;padding-left:13px;color:#333;margin:50px 0 15px 0;font-weight:500;position:relative;background:url('https://www.hesol365.com/images/sub/bul_01.gif') no-repeat 0px 2px;}
.ttl02, .ttl02.style2{font-size:1.55em;color:#44acb3;margin:40px 0 15px 0;font-weight:500; line-height:1em;}
.ttl02.style1 span { color: #44adb3}
.ttl02  span { font-size: .65em;color: coral; font-weight: 300;}

.ttl01 em{ display:block;}

.ttl03{ color:#515151; font-size:1.2em; position:relative; padding-left:20px; margin:35px 0 8px 0 ;}
.ttl03:before{content:'';display: block;position: absolute;left: 0px;top: 9px;background:#fff;width: 6px;height: 6px; border-radius:50%; border:3px solid #b1b1b1;}
.ttl03 span{ color:#ed6e4a; font-size:0.89em;}

.ttl04{clear: both;font-size:1.1em;color:#6b6b6b;margin: 20px 0 5px;position: relative;padding-left: 20px;}
.ttl04:before{content:'';display: block;position: absolute;left: 4px;top: 8px;background:#6b6b6b;width: 6px;height: 6px;border-radius: 50%;}

.ttl01:first-child,
.ttl02:first-child,
.ttl03:first-child{ margin-top:0}
.ttl01 + .ttl02 { margin-top: 0}
.ttl02 + .ttl03 { margin-top: 0}

@media screen and (max-width:1024px) {
	
	/* container */
	#container { width:100%;min-width: 320px; padding-top:95px;}
	
	/* content */	
	#sub_content {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
	#sub_content{ margin:0 auto;float: none;padding: 40px 0 0 0;}
	.fixWidth{width:100%;max-width: 815px; margin:0 auto 35px auto;}
	.wildBox .inner{width:100%;max-width: 815px;margin:0 auto;padding: 40px 0; }
	
	#page{ min-height:450px;}	
	
	/* visual_area */	
	.visual_area{ height:200px;}
	.visual_area .txtBox{ width:auto;}
	.visual_area .txtBox p{ padding-top:50px;}
	
	/* 왼쪽메뉴 */	
	#menu{}
	#menu .lnb{ width:auto;}
	#menu .lnb > li > a{ padding:0 20px;}	
	
	
	/* tltle */
	#sub_content .title_area{ padding-top:35px; margin-bottom:40px;}
	
	.sectionBox{margin: 45px auto 30px auto; padding-top:15px}
	.sectionBox .ttl01,
	.sectionBox .con{ float:none; max-width:inherit; width:auto;}
	.sectionBox .ttl01 span{ display:inline-block; margin-top:0px; font-size: 17px; color: #888; font-weight: 400}
	.sectionBox em{ display:inline;}
	.sectionBox .con{ float:none;}
	.sectionBox .ttl01{ line-height:1em;  font-size: 2.3em;}
	.ttl01{ margin:40px 0 25px 0;}
	.ttl02,
	.ttl02.style1,.ttl02.style2{ margin:35px 0 12px 0}
	.ttl03{ margin:25px 0 10px 0}
	.ttl04{ margin:20px 0 10px 0}
	.ttl02.style1{ background-size:4.5px}
	.ttl03:before{top: 5px;}	
	
	.quickmenu{ display:none;}
}
@media screen and (max-width:860px) {
.fixWidth{padding:0 20px; margin-bottom:20px;}
}

@media screen and (max-width:640px) {
	
	#page{ min-height:300px;}
	#container{ padding-top:80px;}
	/* content */	
	#sub_content {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
	#sub_content{padding:45px 0px 0;}	
	.fixWidth{padding:0 15px;}
	.wildBox .inner{width:100%;max-width: 815px;margin:0 auto;padding: 30px 0; }
	
	/* visual_area */	
	.visual_area{height:150px;display: table; width: 100%;}
	.visual_area .txtBox{width:auto;display: table-cell;vertical-align: middle;}
	.visual_area .txtBox p{padding-top: 0;line-height: 1.2em;}
	
	
	/* 왼쪽메뉴 */
	.menu_tab{ display:none;}
	#menu {position:static;width:auto;float:none;margin:0;display:block;background: none;}
	#menu .tit {display:block;position:relative;width:100%;height:50px;line-height:50px;margin-bottom:0;color: #45b0b3;cursor:pointer;font-size:1.32em; font-weight:700;background: #f2f4f5 url("https://www.hesol365.com/Images/common/bgLnbDepth.png") no-repeat 96% -65px;padding: 0;border: 1px solid #CCC;border-width:0 0 1px 0;}
	#menu .tit.on{color:#fff;background: #45b0b3 url("https://www.hesol365.com/Images/common/bgLnbDepth.png") no-repeat 96% 16px;}	
	#menu nav{display:none;position:relative;z-index: 1; box-shadow: 0px 5px 10px rgba(0,0,0,0.2);}
	
	#menu .lnb{border-width:0 0 1px 0;width:100%;margin-top:-1px;}
	#menu .lnb > li{float:none;display:block;}
	#menu .lnb > li > a {background: #f7f7f7;border-bottom: 1px solid #ddd;font-size: 1.3em;}	
	#menu .lnb > li.arrow > a,
	#menu .lnb > li.arrow.on > a{background-position: 95.5% center;}
	#menu .lnb > li.arrow > a:hover,
	#menu .lnb > li.arrow > a:focus,
	#menu .lnb > li.arrow > a:active{background-position: 95.5% center;}	
	#menu .lnb > li.on > a, 
	#menu .lnb > li > a:hover, 
	#menu .lnb > li > a:focus, 
	#menu .lnb > li > a:active { background:#fff url('https://www.hesol365.com/Images/common/ico_lnb_on2.png') no-repeat right 20px  center; font-weight:700;}		
	#menu .lnb > li.on > a:after,
	#menu .lnb > li > a:hover:after, 
	#menu .lnb > li > a:focus:after, 
	#menu .lnb > li > a:active:after{ display:none;}
	#menu .lnb > li.arrow > a, #menu .lnb > li.arrow.on > a{ background-position: 95.5% center;}
	#menu .lnb > li.arrow.on > a{ background-color:#fff;}
	
	#menu .subLnb{ display: block !important;background-color: #fff;padding:10px 0;border-bottom: 1px solid #ddd;}
	#menu .subLnb li a {display:block; color:#5d5d5d; position:relative; padding: 4px 10px;}
	
	#menu .subLnb li a:before{ content:''; display: inline-block; background:#afb6bb; width:3px; height:3px;margin-right: 5px; vertical-align: middle;}
	#menu .subLnb li a:hover, 
	#menu .subLnb li a:focus, 
	#menu .subLnb li a:active, 
	#menu .subLnb li.on a {text-decoration:underline; color: #45b0b3;}
	
	
	
	/* tltle */
	#sub_content .title_area{ padding-top:0;  margin-bottom:30px;}

	.ttl02.style1{ background-position-y:2px;}
	.ttl03:before{ width:5px; height:5px;}	
	.ttl01{ margin:30px 0 18px 0;}
	.ttl02,
	.ttl02.style1,.ttl02.style2{ margin:30px 0 12px 0}
	.ttl03{ margin:20px 0 10px 0; padding-left:15px;}
	.ttl04{ margin:20px 0 10px 0}
	.sectionBox .ttl01 {font-size: 2em;}
	.sectionBox .ttl01 span{ display:block; margin-top:5px; font-size: 15px;}
	
	.menu_tab{ overflow:hidden; border:1px solid #c7c7c7; margin:20px 0 10px 0;} 
	.menu_tab li { display:block; float:left; width:50%; margin:0;}
	.menu_tab li a{ margin:-1px -1px -1px -1px; font-size: 1em; letter-spacing:-0.03em;}
}

@media screen and (max-width:480px) {
		.fixWidth{padding:0 10px;}
}

@media screen and (max-width:320px) {
	.visual_area .txtBox p {font-size: 2em;}
	.title_area h2 { font-size: 2em}	
	.title_area h2 span {font-size: 0.5em;  margin: 5px 0 10px 0;}
	
	.sectionBox .ttl01 {  font-size: 1.8em;}
	.ttl02, .ttl02.style2 {font-size: 1.3em;}
}