@import url('/new_haema/css/common.css');

@media screen and (min-width:1200px) {
	.visual {width:100%; margin-bottom:45px; overflow:hidden; position:relative;}
	.visual ul {list-style:none;}
	.visual .slides li {width:100%; height:520px; background-position:50% 50%; background-repeat:no-repeat; background-size:auto 100%;}
	/*.visual .slides li:hover {background-size:auto 102%;}*/
	.visual .slides li .visual_txt {margin-top:256px; padding:50px 0 80px; color:#fff; font-size:19px; line-height:28px; background-color:rgba(0,0,0,0.50); text-align:center;}
	.visual .slides li .visual_txt .main_copy {margin-bottom:50px; font-size:39px; display:block;}
	.visual .flex-control-nav {bottom:38px;}
	.visual .flex-control-nav.flex-control-paging {z-index:2;}
	.visual .flex-control-nav.flex-control-paging li {width:15px;}
	.visual .flex-control-paging li a {display:block; width:15px; height:15px; background:transparent; border:2px solid #fff; cursor:pointer; text-indent:-9999px; -webkit-border-radius:30px; -moz-border-radius:30px; -o-border-radius:30px; border-radius:30px; box-sizing:border-box;}
	.visual .flex-control-paging li a:hover {background:#fff; }
	.visual .flex-control-paging li a.flex-active {background:#fff; cursor:default;}
	
	.visual .flex-direction-nav a  {width:28px; height:54px; margin-top:-27px; font-size:0; background-image:url('/new_haema/images/btn_icon/icon_btn.png'); background-repeat:no-repeat; opacity: 0; cursor: pointer; position:absolute; top:50%; z-index:2; display:block; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
	.visual .flex-direction-nav .flex-prev { left: -50px; }
	.visual .flex-direction-nav .flex-next {background-position:-38px 0; right: -50px; text-align: right; }
	.visual .flexslider:hover .flex-prev {opacity:1; left: 10px; }
	.visual .flexslider:hover .flex-next {opacity:1; right: 10px; }
	.visual .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
	.visual .flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
	
	#container {padding-bottom:100px;} /* 20170619 add */
	#container .content {width:1100px; margin:0 auto;}
	
	/* 사업소개 */
	.business ul {margin-bottom:45px; list-style:none;}
	.business ul:after {clear:both; content:''; display:block;}
	.business li {width:14.285%; padding-top:12px; padding-bottom:23px; border-left:1px solid #e8e8e8; box-sizing:border-box; text-align:center; float:left;}
	.business li:first-child {border-left:0;}
	.business li a {height:100%; color:#333; font-size:13px; display:block;}
	.business li a:before {width:71px; height:71px; margin:0 auto 25px auto; background-image:url('/new_haema/images/main/icon_construction01.png'); background-repeat:no-repeat; background-size:cover; content:''; display:block;}
	.business li:nth-child(2) a:before {background-image:url('/new_haema/images/main/icon_construction02.png');}
	.business li:nth-child(3) a:before {background-image:url('/new_haema/images/main/icon_construction03.png');}
	.business li:nth-child(4) a:before {background-image:url('/new_haema/images/main/icon_construction04.png');}
	.business li:nth-child(5) a:before {background-image:url('/new_haema/images/main/icon_construction05.png');}
	.business li:nth-child(6) a:before {background-image:url('/new_haema/images/main/icon_construction06.png');}
	.business li:nth-child(7) a:before {background-image:url('/new_haema/images/main/icon_construction07.png');}
	
	/* 공법소개 */
	.contruction {height:207px; margin-bottom:60px; border-bottom:1px solid #ddd; position:relative;}
	.contruction ul.slides {height:207px; list-style:none;}
	.contruction ul.slides li {box-sizing:border-box;}
	.contruction ul.slides li div {padding:0 118px; box-sizing:border-box;}
	.contruction strong.title {padding-top:35px; margin-bottom:12px; color:#222; font-size:24px; display:block;}
	.contruction span.explain {color:#7e7e7e; font-size:14px; line-height:24px;}
	.contruction ol {bottom:38px; left:118px; text-align:left;}
	.contruction ol li a {width:8px; height:8px; background-color:#fff !important; border:1px solid #222; border-radius:50%; box-sizing:border-box; display:inline-block;}
	.contruction ol li a.flex-active {background-color:#222 !important;}
	.contruction ul.flex-direction-nav a {width:28px; height:54px; margin-top:-27px; font-size:0; background-image:url('/new_haema/images/btn_icon/icon_btn.png'); background-repeat:no-repeat; position:absolute; top:50%; z-index:1; display:block;}
	.contruction ul.flex-direction-nav a.flex-prev {background-position:0 0; left:10px;}
	.contruction ul.flex-direction-nav a.flex-next {background-position:-38px 0; right:10px;}

	/* 공사실적, 오시는길, 해마소식 */
	.work_update, .visit_map, .news {height:204px; padding:0 25px; border-left:1px solid #eee; box-sizing:border-box; float:left; position:relative;}
	.work_update {width:375px; padding-left:0; border-left:0;}
	.visit_map {width:403px;}
	.visit_map p {height:152px;}
    .visit_map p img {width:100%; height:100%; object-fit:contain;}
	.news {width:322px; margin-bottom:30px; padding-right:0;}
	.work_update h2, .visit_map h2, .news h2 {margin-top:3px; margin-bottom:27px; font-size:22px; line-height:22px; letter-spacing:-0.25px;}
	.work_update .more, .visit_map .more, .news .more {padding-right:23px; color:#656565; font-size:11px; line-height:11px; position:absolute; top:11px; right:25px; display:inline-block;}
	.news .more {right:0;}
	.work_update .more:after, .visit_map .more:after, .news .more:after {width:13px; height:13px; background:url('/new_haema/images/common/icon_element.png') -50px 0 no-repeat; content:''; position:absolute; bottom:0; right:0; display:block;}
	.work_update ul, .visit_map ul, .news ul {list-style:none;}

	.work_update ul, .news ul {margin-top:-9px;}
	.work_update li a, .news li a {width:100%; height:34px; color:#656565; font-size:12px; line-height:34px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; display:block;}
}

@media screen and (max-width:1199px) and (min-width:768px) {
	.visual {width:100%; margin-bottom:45px; overflow:hidden; position:relative;}
	.visual ul {list-style:none;}
	.visual .slides li {width:100%; height:520px; background-position:50% 50%; background-repeat:no-repeat; background-size:auto 100%;}
	/*.visual .slides li:hover {background-size:auto 102%;}*/
	.visual .slides li .visual_txt {margin-top:256px; padding:50px 0 80px; color:#fff; font-size:19px; line-height:28px; background-color:rgba(0,0,0,0.50); text-align:center;}
	.visual .slides li .visual_txt .main_copy {margin-bottom:50px; font-size:39px; display:block;}
	.visual .flex-control-nav {bottom:38px;}
	.visual .flex-control-nav.flex-control-paging {z-index:2;}
	.visual .flex-control-nav.flex-control-paging li {width:15px;}
	.visual .flex-control-paging li a {display:block; width:15px; height:15px; background:transparent; border:2px solid #fff; cursor:pointer; text-indent:-9999px; -webkit-border-radius:30px; -moz-border-radius:30px; -o-border-radius:30px; border-radius:30px; box-sizing:border-box;}
	.visual .flex-control-paging li a:hover {background:#fff; }
	.visual .flex-control-paging li a.flex-active {background:#fff; cursor:default;}
	
	.visual .flex-direction-nav a  {width:28px; height:54px; margin-top:-27px; font-size:0; background-image:url('/new_haema/images/btn_icon/icon_btn.png'); background-repeat:no-repeat; opacity: 0; cursor: pointer; position:absolute; top:50%; z-index:2; display:block; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
	.visual .flex-direction-nav .flex-prev { left: -50px; }
	.visual .flex-direction-nav .flex-next {background-position:-38px 0; right: -50px; text-align: right; }
	.visual .flexslider:hover .flex-prev {opacity:1; left: 10px; }
	.visual .flexslider:hover .flex-next {opacity:1; right: 10px; }
	.visual .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
	.visual .flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
	
	#container {padding-bottom:100px;} /* 20170619 add */
	#container .content {width:100%; margin:0 auto;}
	
	/* 사업소개 */
	.business ul {margin-bottom:45px; list-style:none;}
	.business ul:after {clear:both; content:''; display:block;}
	.business li {width:25%; padding-top:12px; padding-bottom:23px; border-left:1px solid #e8e8e8; box-sizing:border-box; text-align:center; float:left;}
	.business li:first-child {border-left:0;}
	.business li a {height:100%; color:#333; font-size:13px; display:block;}
	.business li a:before {width:71px; height:71px; margin:0 auto 25px auto; background-image:url('/new_haema/images/main/icon_construction01.png'); background-repeat:no-repeat; background-size:cover; content:''; display:block;}
	.business li:nth-child(2) a:before {background-image:url('/new_haema/images/main/icon_construction02.png');}
	.business li:nth-child(3) a:before {background-image:url('/new_haema/images/main/icon_construction03.png');}
	.business li:nth-child(4) a:before {background-image:url('/new_haema/images/main/icon_construction04.png');}
	.business li:nth-child(5) a:before {background-image:url('/new_haema/images/main/icon_construction05.png');}
	.business li:nth-child(6) a:before {background-image:url('/new_haema/images/main/icon_construction06.png');}
	.business li:nth-child(7) a:before {background-image:url('/new_haema/images/main/icon_construction07.png');}
	
	/* 공법소개 */
	.contruction {height:207px; margin-bottom:60px; border-bottom:1px solid #ddd; overflow:hidden; position:relative;}
	.contruction ul.slides {height:207px; list-style:none;}
	.contruction ul.slides li {box-sizing:border-box;}
	.contruction ul.slides li div {padding:0 80px; box-sizing:border-box;}
	.contruction strong.title {padding-top:35px; margin-bottom:12px; color:#222; font-size:24px; display:block;}
	.contruction span.explain {color:#7e7e7e; font-size:14px; line-height:24px;}
	.contruction ol {bottom:38px; left:118px; text-align:left;}
	.contruction ol li a {width:8px; height:8px; background-color:#fff !important; border:1px solid #222; border-radius:50%; box-sizing:border-box; display:inline-block;}
	.contruction ol li a.flex-active {background-color:#222 !important;}
	.contruction ul.flex-direction-nav a {width:28px; height:54px; margin-top:-27px; font-size:0; background-image:url('/new_haema/images/btn_icon/icon_btn.png'); background-repeat:no-repeat; position:absolute; top:50%; z-index:1; display:block;}
	.contruction ul.flex-direction-nav a.flex-prev {background-position:0 0; left:10px;}
	.contruction ul.flex-direction-nav a.flex-next {background-position:-38px 0; right:10px;}

	/* 공사실적, 오시는길, 해마소식 */
	.work_update, .visit_map, .news {height:204px; padding:0 25px; border-left:1px solid #eee; box-sizing:border-box; position:relative;}
	.work_update {width:50%; border-left:0; float:left;}
	.visit_map {width:100%; margin-top:20px; float:left;}
	.visit_map p {height:152px;}
    .visit_map p img {width:100%; height:100%; object-fit:cover;}
	.news {width:50%; margin-top:-428px; margin-bottom:30px; float:right;}
	.work_update h2, .visit_map h2, .news h2 {margin-top:3px; margin-bottom:27px; font-size:22px; line-height:22px; letter-spacing:-0.25px;}
	.work_update .more, .visit_map .more, .news .more {padding-right:23px; color:#656565; font-size:11px; line-height:11px; position:absolute; top:11px; right:25px; display:inline-block;}
	.work_update .more:after, .visit_map .more:after, .news .more:after {width:13px; height:13px; background:url('/new_haema/images/common/icon_element.png') -50px 0 no-repeat; content:''; position:absolute; bottom:0; right:0; display:block;}
	.work_update ul, .visit_map ul, .news ul {list-style:none;}

	.work_update ul, .news ul {margin-top:-9px;}
	.work_update li a, .news li a {width:100%; height:34px; color:#656565; font-size:12px; line-height:34px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; display:block;}
}

@media screen and (max-width:767px){
	.visual {width:100%; margin-bottom:25px; overflow:hidden; position:relative;}
	.visual ul {list-style:none;}
	.visual .slides li {width:100%; height:350px; background-position:50% 50%; background-repeat:no-repeat; background-size:auto 100%;}
	/*.visual .slides li:hover {background-size:auto 102%;}*/
	.visual .slides li .visual_txt {padding:30px; color:#fff; font-size:16px; line-height:1.5; background-color:rgba(0,0,0,0.50); text-align:justify; position:absolute; bottom:0}
	.visual .slides li .visual_txt br {display:none;}
	.visual .slides li .visual_txt .main_copy {margin-bottom:20px; font-size:28px; display:block;}
	.visual .flex-control-nav {bottom:7px;}
	.visual .flex-control-nav.flex-control-paging {z-index:2;}
	.visual .flex-control-nav.flex-control-paging li {width:10px;}
	.visual .flex-control-paging li a {display:block; width:10px; height:10px; background:transparent; border:2px solid #fff; cursor:pointer; text-indent:-9999px; -webkit-border-radius:30px; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; box-sizing:border-box;}
	.visual .flex-control-paging li a:hover {background:#fff; }
	.visual .flex-control-paging li a.flex-active {background:#fff; cursor:default;}
	
	.visual .flex-direction-nav a  {width:15px; height:54px; margin-top:-27px; font-size:0; background-image:url('/new_haema/images/btn_icon/icon_btn.png'); background-repeat:no-repeat; opacity: 0; cursor: pointer; position:absolute; top:50%; z-index:2; display:block; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
	.visual .flex-direction-nav .flex-prev { left: -50px; }
	.visual .flex-direction-nav .flex-next {background-position:-51px 0; right: -50px; text-align: right; }
	.visual .flexslider:hover .flex-prev {opacity:1; left: 10px; }
	.visual .flexslider:hover .flex-next {opacity:1; right: 10px; }
	.visual .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
	.visual .flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
	
	#container {padding-bottom:70px;} /* 20170619 add */

	.content {padding:0 15px; box-sizing:border-box;}
	.content > div {box-sizing:border-box; position:relative;}
	.content h2 {margin-top:20px; margin-bottom:10px; font-size:14px; line-height:18px; letter-spacing:-0.25px;}
	.content .more {padding-right:23px; color:#656565; font-size:11px; line-height:11px; position:absolute; top:9px; right:15px; display:inline-block;}
	.content .more:after {width:13px; height:13px; background:url('/new_haema/images/common/icon_element.png') -50px 0 no-repeat; content:''; position:absolute; bottom:0; right:0; display:block;}
	.content ul {list-style:none;}
	.work_update, .visit_map, .news {width:100%; box-sizing:border-box; position:relative;}
	.visit_map p {height:230px; border:1px solid #d4d9df;}
    .visit_map p img {width:100%; height:100%; object-fit:cover;}
	.work_update li a, .news li a {padding:5px 0; color:#656565; font-size:13px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; display:block;}

	/* 사업소개 */
	.business ul {margin-bottom:20px; list-style:none;}
	.business ul:after {clear:both; content:''; display:block;}
	.business li {width:33.333%; padding-bottom:15px; box-sizing:border-box; float:left;}
	.business li:first-child {border-left:0;}
	.business li a {height:100%; color:#333; font-size:13px; box-sizing:border-box; text-align:center; display:block;}
	.business li a:before {width:50px; height:50px; margin:10px auto; background-image:url('/new_haema/images/main/icon_construction01.png'); background-color:#f7f7f7; background-repeat:no-repeat; background-size:cover; border-radius:50%; content:''; vertical-align:middle; display:block;}
	.business li:nth-child(2) a:before {background-image:url('/new_haema/images/main/icon_construction02.png');}
	.business li:nth-child(3) a:before {background-image:url('/new_haema/images/main/icon_construction03.png');}
	.business li:nth-child(4) a:before {background-image:url('/new_haema/images/main/icon_construction04.png');}
	.business li:nth-child(5) a:before {background-image:url('/new_haema/images/main/icon_construction05.png');}
	.business li:nth-child(6) a:before {background-image:url('/new_haema/images/main/icon_construction06.png');}
	.business li:nth-child(7) a:before {background-image:url('/new_haema/images/main/icon_construction07.png');}

	/* 공법소개 */
	.contruction {margin-bottom:30px; border-bottom:1px solid #ddd; position:relative;}
	.contruction ul.slides {margin-bottom:30px; list-style:none;}
	.contruction ul.slides li div {padding:0 50px; box-sizing:border-box;}
	.contruction strong.title {margin-top:15px; margin-bottom:12px; padding-left:10px; color:#222; font-size:24px; border-left:2px solid #ed1b24; line-height:25px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; display:block;}
	.contruction span.explain {max-height:67px; color:#7e7e7e; font-size:14px; line-height:24px; overflow:hidden; display:inline-block;}
	.contruction span.explain br {display:none;}
	.contruction ol {bottom:10px;}
	.contruction ol li a {width:8px; height:8px; background-color:#fff !important; border:1px solid #222; border-radius:50%; box-sizing:border-box; display:inline-block;}
	.contruction ol li a.flex-active {background-color:#222 !important;}
	.contruction ul.flex-direction-nav a {width:14px; height:27px; margin-top:-14px; font-size:0; background-image:url('/new_haema/images/btn_icon/icon_btn.png'); background-repeat:no-repeat; background-size:auto 50px; position:absolute; top:50%; z-index:1; display:block;}
	.contruction ul.flex-direction-nav a.flex-prev {background-position:0 0; left:0;}
	.contruction ul.flex-direction-nav a.flex-next {background-position:-19px 0; right:0;}
}