#idx_wrapper{position:fixed; top:0; left:0; right:0; height:100vh; z-index:0;}

/* 메인슬라이더 */
#visual{position:relative; width:100%; height:100vh; margin:0 auto; position:relative; overflow:hidden; visibility:hidden;}
#visual .sliderbx{ z-index:10;width:100% !important; height:100vh; position:relative;}
#visual .sliderbx li{ width:100% !important; height:100%; background-repeat:no-repeat; background-position: center top; background-size:cover;
animation: imagescale 30s ease-in-out infinite alternate;
  -webkit-animation: imagescale 30s ease-in-out infinite alternate;
  -moz-animation: imagescale 30s ease-in-out infinite alternate;
  -o-webkit-animation: imagescale 30s ease-in-out infinite alternate;
  }
#visual .sliderbx li.mv01{background-image:url(../img/main/mvisual01.jpg)}
#visual .sliderbx li.mv02{background-image:url(../img/main/mvisual02.jpg)}
#visual .sliderbx li.mv03{background-image:url(../img/main/mvisual03.jpg)}
#visual .area_txt{position:absolute; top:50%; left:50%;  width:100%; z-index:15; transform:translate(-50%, -50%); color:#fff; text-align:center; text-shadow:0px 0px 2px #000}
#visual .area_txt > h3{font-size:3.8em; font-weight:600; line-height:1.6em; text-transform:uppercase;}
#visual .area_txt > h3 span {font-size:1.15em;;}
#visual .area_txt > h2{font-size:2.5em; font-weight:600; text-transform:uppercase;}
#visual .area_txt > p{display:block; padding:20px 0 0; font-size:17px; font-weight:400; word-break:keep-all;}

#visual .bx-controls{}
#visual div.bx-pager{z-index:50; position:absolute; top:50%; right:50px; transform:translateY(-50%);}
#visual div.bx-pager div{margin:0 0 40px;}
#visual div.bx-pager div:last-child{margin:0;}
#visual div.bx-pager div a{position:relative; font-size:15px; font-weight:400; color:#fff; transition:all 0.3s ease; opacity:0.4;}
#visual div.bx-pager div a.active{opacity:1; font-weight:600;}
#visual div.bx-pager div a:after{content:''; position:absolute; left:50%; bottom:-25px; width:5px; height:5px; background:#fff; border-radius:50%; transform:translateX(-50%); opacity:0.4;}
#visual div.bx-pager div a:before{content:'0'; display:inline; width:auto; height:auto;}
#visual div.bx-pager div:last-child a:after{display:none;}

#visual .bx-controls-direction{display:none;}
.scrolldown{position:absolute; bottom:2%; left:50%; transform: translateX(-50%); width:100px; height:100px; z-index:52; background:#fff; font-weight:500; color:#fff; text-align:center; opacity: 0.8;border-radius: 50%;}
.scrolldown a{position:relative; display:block; height:100%; position:relative; box-sizing:border-box;}
.scrolldown .icon{position:absolute; top:17%; left:50%; display:inline-block; width:20px; height:30px; border:2px #111 solid; border-radius:30px; transform:translateX(-50%);}
.scrolldown .icon::after{content:''; position:absolute; top:7px; left:50%; margin-left:-2px; width:4px; height:4px; border-radius:100%; background-color:#111; -webkit-transform:translate(0, 0); -ms-transform:translate(0, 0); transform:translate(0, 0); -webkit-animation:scrollDownPointer 1.5s infinite; animation:scrollDownPointer 1.5s infinite;}
.scrolldown a > i.txt{position:relative; display:inline-block; padding-top:50px; font-style:normal; font-weight:500; font-size:12px; color:#333;}
.scrolldown a > i.txt:before{content:''; position:absolute; left:50%; bottom:-10px; background:url('../img/common/icon_scroll_arrow.svg')no-repeat center; width:9px; height:9px; background-size:cover; transform:translateX(-50%);}
.fixed_bg{position:fixed; z-index:-1; opacity:0; top:0; left:0; right:0;  width:100%; height:120vh; background:#fff; background-size:cover; transition:all 0.1s ease;}
body.on .fixed_bg{z-index:1; opacity:1;}
body.on #idx_wrapper{z-index:-1;}
body.on .scrolldown{z-index:-1;}

/* 공지사항 */
.area_notice{position:absolute; bottom:-20px; right:0; width:720px; background:#192448; z-index:50; opacity:0; transition:all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;}
.area_notice.active{bottom:0; opacity:1;}

@media screen and (max-width:1024px) {
	#visual .area_txt{width:80%;}
	#visual .area_txt > h3{font-size:2.2em;}
	#visual .area_txt > h2{font-size:1.7em;}
	#visual div.bx-pager{right:25px;}
	
	.area_notice{width:60%;}
	.area_notice .bx-wrapper li > a{overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
}

@media screen and (max-width:768px) {
	#visual .area_txt > h3{font-size:1.8em;}
	#visual .area_txt > h2{font-size:1.5em;}
	#visual .area_txt > p{padding:10px 0 0; font-size:16px;}
	.scrolldown{width:80px; height:80px;}
	.scrolldown .icon{top:12%;}
	.scrolldown a > i.txt{padding-top:40px;}
	.scrolldown a > i.txt:before{bottom:-8px;}
	.area_notice{width:calc(100% - 80px); width:-webkit-calc(100% - 80px);}
}

@media screen and (max-width:600px) {
	#visual .area_txt > h3,
	#visual .area_txt > h2{font-size:1.4em;}
	#visual .area_txt > p{padding:10px 0 0; font-size:15px;}
}

@media screen and (max-width:550px) {
	#visual .area_txt{width:70%;}
	#visual .area_txt > h3,
	#visual .area_txt > h2{font-size:1.5em;}
	#visual div.bx-pager{right:15px;}
	#visual div.bx-pager div{margin:0 0 20px;}
	#visual div.bx-pager div a:after{bottom:-15px; width:4px; height:4px;}
	#visual div.bx-pager div a{font-size:14px;}
	
	.scrolldown{width:70px; height:70px; bottom: 10%;}
	.area_notice{width:calc(100% - 70px); width:-webkit-calc(100% - 70px);}
	.scrolldown .icon{top:17%; width:18px; height:26px;}
	.scrolldown a > i.txt:before{display:none;}
	.scrolldown a > i.txt{font-size:11px;}
}
/* 마린 */
.area_marin{position:relative;padding:150px 0; z-index:1; background:#fff; background-position: right top;}
.area_marin:before{content:''; position:absolute; top:0; left:0; bottom:0; width:33%;}
.area_marin .area_img{ position: absolute; right: 0; top: 0; width:50%; margin:0 0 0 0;}
.area_marin .area_img img{width:auto; height:100%; margin: 0;}
.area_marin .area_txt{position:relative; float:left; padding:0; width:calc(100% - 565px); width:-webkit-calc(100% - 565px);}
.area_marin .area_txt h3{font-size:2.85em; font-weight:500; color:#c6d45c; line-height:1em;}
.area_marin .area_txt h3 .ecotit {color: #587a4b;}
.area_marin .area_txt h3 img {width:40px; height: auto; margin-top:-20px;}
.area_marin .area_txt h4{display:block; padding:40px 0; font-weight:500; color:#555; opacity: 0.7; line-height: 1.5em; font-size: 17px;}
.area_btn>b{font-size:15px; font-weight:500; color:#74c500; transition:all 0.3s ease;}
.area_btn i{position:relative; display:inline-block; margin:0 0 5px 10px; width:50px; height:1px; background:#74c500; transition:all 0.3s ease;}
.area_btn i:before{content:''; position:absolute; opacity:0; top:-2px; left:30%; width:5px; height:5px; background:#222; border-radius:50%; transition:all 0.3s ease;}
.area_btn:hover i:before{opacity:1; left:98%;}

@media screen and (max-width:1400px) {
    .area_marin{
        padding: 0 ;
    }
    .area_marin .area_img{
        position: relative;
        left: 0;
        bottom: 0;
        width: 100%;
        height: auto;
    }
    .area_marin .area_img img{
        width: 100%;
        height: auto;
    }
	.area_marin .area_txt{ width: 100%; background: #fff; padding: 50px 0;}
	.area_marin .area_txt h3{font-size:40px;}
}
@media screen and (max-width:1200px) {
	.area_marin:after{ bottom:20px;}
}
@media screen and (max-width:1024px) {
    
	.area_marin .area_txt p{padding:20px 0; font-size:16px;}
}
@media screen and (max-width:992px) {
.area_marin:after{background:none;}
}
@media screen and (max-width:768px) {
	.area_marin .area_img{}
	.area_marin .area_txt{ }
	.area_marin:after{width:42%; bottom:30px;}
}
@media screen and (max-width:650px) {
	.area_marin .area_img{}
	.area_marin .area_txt{ }
	.area_marin .area_txt p{font-size:16px;}
	.area_marin .area_txt p br{display:none;}
}
@media screen and (max-width:550px) {
	.area_marin .area_img{}
	.area_marin .area_txt{ }
	.area_marin .area_txt p{padding:12px 0; font-size:15px;}
	.area_marin:after{bottom:0;}
}
@media screen and (max-width:450px) {
}
@media screen and (max-width:420px) {
}
/* 사업분야 */
.area_business{position:relative; padding:150px 0; z-index:1; 
/*    height: 1000px;*/
}
.area_business:after{content:''; display:block; clear:both;}
.area_business .title{position:absolute; top:50%; float:left; width:400px; transform:translateY(-50%); transition:all 0.3s ease;}
.area_business .title.on{position:fixed;}
.area_business .title.off{position:absolute;}
.area_business .title em{font-style:normal; font-size:22px; font-weight:500; color:#fff; }
.area_business .title h2{display:block; padding:20px 0; font-size:55px; font-weight:600; color:#fff; }
.area_business .title p{font-size:16px; font-weight:300; color:#fff; line-height:1.6em; word-break:keep-all;}

.list_business{float:left; width:calc(100% - 450px); margin-left:450px;}
.list_business > li{position:relative; float:left; margin:0 70px 70px 0; width:calc((100%/2) - 35px); width:-webkit-calc((100%/2) - 35px); height:448px; box-shadow: 5px 8.66px 22.75px 12.25px rgba(0, 28, 59, 0.27); overflow:hidden; transition:all 0.3s ease;}
.list_business > li:nth-child(2n){top:0; margin:0 0 70px;}
.list_business > li:nth-child(2n-1){top:120px;}
.list_business > li > a{position:relative; display:block; width:100%; height:100%;}
.list_business > li > a .area_img{display:block; width:100%; height:100%; overflow:hidden;}
.list_business > li > a .area_img img{height:100%; transform:scale(1.0); transition:all 0.7s cubic-bezier(0.51, 0.21, 1, 1);}
.list_business > li > a .area_txt{position:absolute; left:40px; bottom:40px;}
.list_business > li > a .area_txt > em{display:block; font-style:normal; font-size:15px; font-weight:400; color:#333;}
.list_business > li > a .area_txt > span{display:block; padding:8px 0 0; font-size:22px; font-weight:500; color:#444;}
.list_business > li:nth-child(2) > a .area_txt > em{display:block; font-style:normal; font-size:15px; font-weight:400; color:#fff;}
.list_business > li:nth-child(2) > a .area_txt > span{display:block; padding:8px 0 0; font-size:22px; font-weight:500; color:#fff;}
.list_business > li:nth-child(3) > a .area_txt > em{display:block; font-style:normal; font-size:15px; font-weight:400; color:#fff;}
.list_business > li:nth-child(3) > a .area_txt > span{display:block; padding:8px 0 0; font-size:22px; font-weight:500; color:#fff;}
.list_business > li:hover{top:-30px; box-shadow: 5px 8.66px 22.75px 12.25px rgba(0, 28, 59, 1);}
.list_business > li:hover a .area_img img{transform:scale(1.05);}
.list_business > li:nth-child(2n-1):hover{top:90px;}

@media screen and (max-width:1400px) {
	.list_business{width:68%; margin-left:32%;}
	.list_business > li{margin:0 8% 8% 0; width:calc((100%/2) - 4%); width:-webkit-calc((100%/2) - 4%);}
	.list_business > li:nth-child(2n){margin:0 0 4%;}
	.area_business .title{width:32%;}
	.area_business .title.on{position:absolute;}
}

@media screen and (max-width:1300px) {
	.list_business > li{height:410px;}
}
@media screen and (max-width:1200px) {
	.area_business .title{width:29%;}
	.area_business .title p br{display:none;}
	.list_business > li{margin:0 6% 6% 0; width:calc((100%/2) - 3%); width:-webkit-calc((100%/2) - 3%); height:380px;}
	.list_business > li:nth-child(2n){margin:0 0 6%;}
	.list_business > li > a .area_txt{left:30px; bottom:30px;}
}
@media screen and (max-width:1024px) {
	.area_business .title em{font-size:20px;}
	.area_business .title p br{display:block;}
	.area_business .title h2{padding:12px 0; font-size:45px;}
	.area_business{background:url('../img/main/business_bg.jpg')repeat-y center; background-size:cover;}
	.area_business .title{position:relative; top:unset; width:100%; text-align:center; transform:translateY(0);}
	.area_business .title.on{position:relative;}
	.list_business{width:80%; margin-left:0; margin:40px 10% 0;}
	.list_business > li:nth-child(2n-1),
	.list_business > li:nth-child(2n-1):hover{top:0;}
	.list_business > li:nth-child(2n){top:40px;}
	body.on .fixed_bg{opacity:0; display:none;}
}
@media screen and (max-width:900px) {
	.list_business{width:90%; margin-left:0; margin:40px 5% 0;}
}
@media screen and (max-width:768px) {
	.area_business{padding:100px 0 120px;}
	.list_business{width:100%; margin-left:0; margin:40px 0 0;}
	.area_business .title em{font-size:20px;}
	.area_business .title h2{padding:10px 0; font-size:40px;}
	.area_business .title p{font-size:15px;}
	.list_business > li > a .area_txt{left:20px; bottom:20px;}
}
@media screen and (max-width:650px) {
	.list_business > li{height:300px;}
}
@media screen and (max-width:550px) {
	.area_business{padding:60px 0 80px;}
	.list_business > li{height:260px;}
	.area_business .title em{font-size:17px;}
	.area_business .title h2{padding:6px 0 10px; font-size:30px;}
	.area_business .title p{font-size:14px; line-height:1.5em;}
	.list_business > li{margin:0 5% 5% 0; width:calc((100%/2) - 2.5%); width:-webkit-calc((100%/2) - 2.5%);}
	.list_business > li:nth-child(2n){margin:0 0 5%;}
	.list_business > li > a .area_txt{left:15px;}
	.list_business > li > a .area_txt > em{font-size:14px;}
	.list_business > li > a .area_txt > span{padding:2px 0 0; font-size:18px;}
}
@media screen and (max-width:450px) {
	.area_business .title h2{font-size:27px;}
	.list_business{margin:30px 0 0;}
	.list_business > li{height:210px;}
	.list_business > li > a .area_txt{left:10px; bottom:10px;}
	.list_business > li > a .area_txt > em{font-size:13px;}
	.list_business > li > a .area_txt > span{font-size:16px;}
	.list_business > li:nth-child(2n){top:25px;}
}
@media screen and (max-width:420px) {
	.area_business{padding:40px 0 60px;}	
}
@media screen and (max-width:400px) {
	.list_business{margin:20px 0 0;}
	.list_business > li{height:180px;}
	.list_business > li > a .area_txt > em{font-size:11px;}
	.list_business > li > a .area_txt > span{padding:0;}
}


/* 진행사업 */
.area_work{position:relative; z-index:1; text-align:center; padding: 150px 0; background: #fff;}
.area_work .title{text-align:center;}
.area_work .title > h2{font-size:2.85em; font-weight:500; color:#222;}
.area_work .title > h2 > span{display:block; font-size:0.6em; font-weight:500; color:#444; opacity: 0.7;}


/* tab */
.tab ul{margin:0; padding:0; list-style:none;}
.tab ul.title li:first-child{margin-left:0;}
.tab ul.title li{float:left;margin-left: 0px;}
.tab ul.title li a{display:block;padding: 13px 50px;background: #eee;color: #222;}
.tab ul.title li a.show{background: #bc3232;color: #fff;}
.tab ul.title:after{content:""; display:block; clear:both;}
.tab ul.panel li{display:none;overflow:hidden;height:auto;}
.tab ul.title {
    text-align: center;
    margin-bottom: 40px;
}

.tab ul.title li {
    display: inline-block;
    float: none !important;
}

/* tab  */
.tabs{margin:40px 0 0; width:100%;}
.tabs:after{content:''; display:block; clear:both;}
.tabs li{float:left; margin:0 10px 0 0; padding:11px; min-width:150px; background:#ddd; box-sizing:border-box; border-radius:50px; transition:all 0.3s ease 0s; cursor:pointer; text-align:center;}
.tabs li span{font-size:15px; font-weight:300; line-height:1.3em;}
.tabs li.active{background:#192448; color:#fff; box-shadow: 0px 3px 7.36px 0.64px rgba(25, 36, 72, 0.32);}
.tabs li:hover{background:#192448; color:#fff;}
.tab_container{margin:20px 0 0; width:100%; background:#fff;}
.tab_content{position:relative; height:500px;}
.tab_content:after{content:''; display:block; clear:both;}
.tab_content .area_right{display:table; float:right; width:50%; height:100%;}
.tab_content .area_left{float:left; width:50%;}
.tab_content .area_right{padding:40px; box-sizing:border-box;}

.table caption{display:none;}
.area_work .area_table{display:table-cell; vertical-align:middle; height:100%;}
.work_info{margin:30px 0 0;}
.work_info > li{display:block; width:100%; }
.work_info > li:after{content:''; display:block; clear:both;}
.work_info > li > em{float:left; padding:15px; width:30%; border-top:2px solid #dc2020; box-sizing:border-box; vertical-align:top; font-size:19px; font-weight:500; color:#333; text-transform:uppercase;}
.work_info > li > .work_content{float:left; padding:18px 15px 15px; width:70%; box-sizing:border-box; border-top:2px solid #222;}
.work_info > li > .work_content p{font-size:16px; font-weight:400; color:#666; line-height:1.6em;}
.area_work .table{margin:0; border-top:2px solid #eee; border-bottom:2px solid #eee;}
.area_work .table > thead{padding:50px 0;}
.area_work .table > tbody > tr:nth-child(2n-1){background:#f9f9f9;}
.area_work .table > tbody > tr > td{padding:14px 20px; border-right:1px solid #eee !important; vertical-align:middle; font-size:16px; font-weight:400; color:#333; text-align:center; word-break:keep-all;}
.area_work .table > tbody > tr > td:first-child{font-weight:bold;}
.area_work .table > tbody > tr > td:last-child{text-align:left; border-right:none !important;}
.mob_info{display:none; margin:0 0 10px; font-size:15px; font-weight:300; color:#333;}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{border-top:1px solid #eee;}
#tab1 .area_left{height:100%; background:url(../img/main/img_work01.jpg)no-repeat center; background-size:cover;}
#tab2 .area_left{height:100%; background:url(../img/main/img_work01.jpg)no-repeat center; background-size:cover;}
.area_btn02{position:relative; z-index:1; margin:50px 0 0; text-align:center; display:inline-block; min-width:180px; padding:15px 20px; box-sizing:border-box; border-radius:6px; font-size:15px; font-weight:500; color:#333; border:3px solid #eee; transition:all 0.5s ease;}
.area_btn02:before{content:''; position:absolute; top:0; left:0; width:0; height:100%; background:#192448; z-index:-1; transition:all 0.5s ease;}
.area_btn02:hover{color:#fff;  border:3px solid #192448; box-shadow:0px 3px 7.36px 0.64px rgba(25, 36, 72, 0.32);}
.area_btn02:hover:before{width:100%;}
@media screen and (max-width:1400px) {
}
@media screen and (max-width:1020px) {
body.on .fixed_bg{opacity:0; display:none;}
}
@media screen and (max-width:850px) {
	.tab_content{height:auto;}
	.tab_content .area_left{width:100%; height:500px !important;}
	.tab_content .area_right{width:100%; height:100%;}
}
@media screen and (max-width:768px) {
	.area_work .title > h2{font-size:40px;}
	.area_work .title > p{font-size:15px;}
	.tab_content .area_left{height:0 !important; padding-bottom:75%;}
	.area_btn02{min-width:160px; background:#192448; border:none; box-shadow:0px 3px 7.36px 0.64px rgba(25, 36, 72, 0.32); color:#fff !important;}
	.area_btn02:before{display:none;}
	.area_btn02:hover{border:none;}
}
@media screen and (max-width:550px) {
	.area_work{padding:60px 0;}
	.area_work .title > h2{font-size:30px;}
	.area_work .title > p{font-size:14px;}
	.tab_content .area_right{padding:20px;}
	.tab_content .area_right{padding:15px;}
	.area_work .table > tbody > tr > td{padding:12px 10px; font-size:15px;}
	.area_btn02{margin:30px 0 0;}
}
@media screen and (max-width:450px) {
	.area_work .title > h2{font-size:27px;}
	.area_work .table > tbody > tr > td{padding:10px;}
}
@media screen and (max-width:420px) {
	.area_work{padding:40px 0;}
}



@-webkit-keyframes scrollDownPointer {
  60% {-webkit-transform: translate(0, 200%); transform: translate(0, 200%);}
  70% {opacity: 0;}
  100% {-webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@keyframes scrollDownPointer {
  60% {-webkit-transform: translate(0, 200%); transform: translate(0, 200%);}
  70% {opacity: 0;}
  100% {-webkit-transform: translate(0, 0); transform: translate(0, 0);}
}

@keyframes imagescale {
  0% {
    transform: scale(1)  rotate(.001deg);;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
  }

  100% {
    transform: scale(1.3)  rotate(.001deg);;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
  }
}

/*directions*/
.direct_wrap { overflow:hidden; margin-top:0px; }
.direct_wrap .map_box { float: left; width:600px; height:500px; transition: all 0.5s;}
.direct_wrap .direct_box { float: right; width:600px; height:500px; background:url(../img/main/blushaak.png) no-repeat right bottom #fff; transition: all 0.5s;}
.direct_wrap .direct_box .direct_ul { padding:100px 50px; text-align: left;}
.direct_wrap .direct_box .direct_ul li { color: #555; list-style: none; line-height: 32px; margin-bottom:5px; font-size: 1.20em;}
.direct_wrap .direct_box .direct_ul li img { margin-right: 18px;}
.direct_wrap .direct_box .direct_ul li .bg1 { padding: 5px 7px; border-radius: 10px; background: #2ea7ec; margin: 12px 5px 0 0; color:#fff !important}
.direct_wrap .direct_box .direct_ul li .bg2 { padding: 5px 7px; border-radius: 10px; background: #2e4078; margin: 5px 5px 0 0; color:#fff !important}

.direct_wrap02 { overflow:hidden; margin-top:50px; width:1200px;}
.direct_wrap02 .map_box02 { float: right; width:50%; height:500px; transition: all 0.5s;}
.direct_wrap02 .direct_box02 { float: left; width:50%; height:500px; background:url(../img/main/blushaak.png) no-repeat right bottom #f1f1f1; transition: all 0.5s;}
.direct_wrap02 .direct_box02 .direct_ul02 { padding:100px 50px; text-align: left;}
.direct_wrap02 .direct_box02 .direct_ul02 li { color: #555; list-style: none; line-height: 32px; margin-bottom:5px; font-size: 1.20em;}
.direct_wrap02 .direct_box02 .direct_ul02 li img { margin-right: 18px;}
.direct_wrap02 .direct_box02 .direct_ul02 li .bg1 { padding: 5px 7px; border-radius: 10px; background: #74c500; margin: 12px 5px 0 0; color:#fff !important}
.direct_wrap02 .direct_box02 .direct_ul02 li .bg2 { padding: 5px 7px; border-radius: 10px; background: #2e4078; margin: 5px 5px 0 0; color:#fff !important}

@media screen and (max-width:1199px) {
.direct_wrap { overflow:hidden; margin-top:0px; }
.direct_wrap .root_daum_roughmap .wrap_map { height: 300px!important}
.direct_wrap .map_box { float: none; width:100%; height:auto; transition: all 0.5s;}
.direct_wrap .direct_box { float: none; width:100%; height:auto; transition: all 0.5s;}
.direct_wrap .direct_box .direct_ul { padding:30px 5%; margin:0 !important}
.direct_wrap .direct_box .direct_ul li { color: #555; list-style: none; line-height: 32px; margin-top:0px;}
.direct_wrap .direct_box .direct_ul li img { margin-right: 18px;}
.direct_wrap .direct_box .direct_ul li .bg1 { padding: 5px 7px; border-radius: 10px; background: #2ea7ec;}
.direct_wrap .direct_box .direct_ul li .bg2 { padding: 5px 7px; border-radius: 10px; background: #2e4078;}

.direct_wrap02 { overflow:hidden; margin-top:50px; width:100%}
.direct_wrap02 .root_daum_roughmap .wrap_map { height: 300px!important}
.direct_wrap02 .map_box02 { float: none; width:100%; height:auto; transition: all 0.5s;}
.direct_wrap02 .direct_box02 { float: none; width:100%; height:auto; transition: all 0.5s;}
.direct_wrap02 .direct_box02 .direct_ul02 { padding:30px 5%; margin:0 !important}
.direct_wrap02 .direct_box02 .direct_ul02 li { color: #555; list-style: none; line-height: 32px; margin-top:0px; font-size: 1em;}
.direct_wrap02 .direct_box02 .direct_ul02 li img { margin-right: 18px;}
.direct_wrap02 .direct_box02 .direct_ul02 li .bg1 { padding: 5px 7px; border-radius: 10px; background: #74c500;}
.direct_wrap02 .direct_box02 .direct_ul02 li .bg2 { padding: 5px 7px; border-radius: 10px; background: #2e4078;}
#ft_totop { display: none;}	
}


@media (max-width: 1279px) {
#m_content01{ width:100%; min-width:auto; margin:0px auto 90px; padding:0}
.cont{ width:100%; margin:0px auto}
#m_content03{ width:100%; min-width:auto;}
#m_content03 .area{ width:100%;}
    
#m_content05{ width:100%; margin:0px auto}
}
@media (max-width: 992px) {
#m_content01{ margin:0}
#m_content01 header h3{font-size:1.50em; font-weight:400; line-height:1.60em}
#m_content01 header h3 span{ color:#0d7e3e}
#m_content01 header p{ font-size:1.15em; font-weight:400; opacity:.8}
#m_content01 header p.eng{ font-size:1.0em; font-weight:400; opacity:1 !important; text-transform: uppercase;}
#m_treat ul li{ float:none; width:100%; padding:40px 30px; transition: all 0.5s;}
#m_content02{ background:#5e5958; height:auto; padding:50px 0}
#m_treat ul li:nth-child(3){ text-align:center; padding:30px 20px 20px !important}
.m_treat .treat_banner li{ padding:20px 20px 20px 70px; min-height:146px}
.m_treat .treat_banner li:nth-child(5){ padding:20px; min-height:auto}
.m_introduce{ width:100%; float:none; text-align:center; transition: all 0.5s; padding:0 0 50px}
.m_introduce h3{font-size:1.80em; font-weight:400; line-height:1.60em; color:#fff}
.m_introduce p{font-size:1.15em; font-weight:400; line-height:1.6em; color:rgba(255,255,255,.85); width:100%; transition: all 0.5s;}
.m_treat_icon{ text-align:center; display:inline-block; justify-content:center}
.m_treat_icon div{ margin:0px; float:left; width:33.333%}
.m_treat{ width:100%; float:none; transition: all 0.5s;}
.m_treat .treat_time{ background:url(../img/main/treat_time_icon.png) no-repeat 95% 0; margin:50px 0 0; padding:0 30px}
#m_content03 header h3{font-size:1.50em; font-weight:400; line-height:1.60em}
#m_content03 header h3 span{ color:#e08500}
#m_content03 header p{ font-size:1.15em; font-weight:400; opacity:.8}
#m_content03 header p.eng{ font-size:1.0em; font-weight:400; opacity:1 !important; text-transform: uppercase;}


    
    
}


@media (max-width: 800px) {
#m_treat ul li > dl > dt{ color:#fff; font-size:1.7em; font-weight:500}
#m_treat ul li > dl > dt span{ display:block; opacity:.8; font-size:.45em; font-weight:300 !important; letter-spacing:0}
#m_treat ul li > dl > dd{ color:rgba(255,255,255,.89); margin:18px 0 0; font-size:1.05em}
#m_content03{ padding:0 0 150px}
.doctors .imgWidth{ width:100%}
#m_content03 header{padding:120px 0 100px;}
}
@media (max-width: 700px) {
}
@media (max-width: 500px) {
.m_introduce .imgWidth{ width:80%}
#m_content03 header{padding:120px 0 0;}
}


/* 카달로그 */
.catalog {width: 100%; height: 250px;
    box-sizing: border-box;
    background: url(../img/main/mss.jpg);
    z-index: 1;
    position: relative;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    text-align: center;
    }
.catalog a {text-align: center; margin-left: 70%; display: block;}
.catalog h3 {color: #fff; font-size: 2.85em; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.catalog h3 span {display: block; color: #fff; font-size: 15px; opacity: 0.7; padding-top: 10px;}


/* 메인 제품소개 */
section.product {
    padding-top: 0px;
    overflow: hidden;
    width: 100%;
/*    height: 1100px;*/
    background: #fff;
}
section.product .left_box {
    width: 990px;
    box-sizing: border-box;
    padding-left: 382px;
    padding-top: 30px;
    padding-bottom: 39px;
    background: #74c500;
    position: relative;
    margin-left: -960px;
    left: 50%;
}
section.product .left_box h5 {
    font-size: 1em;
    text-transform: uppercase;
    line-height: 1em;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
}
section.product .left_box h3 {
    display: inline-block;
    position: relative;
    padding-top: 25px;
    font-size: 2.85em;
    text-transform: uppercase;
    line-height: 34px;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 1);
    font-weight: 500;
}

section.product .left_box h3::after {
    content: "";
    top: 0px;
    right: 0px;
    display: block;
    position: absolute;
    width: 150px;
    height: 15px;
    background: url(../img/main/dots.png);
}

section.product .product_list {
    vertical-align: top;
    text-align: center;
    position: relative;
    font-size: 0px;
}
section.product .product_list .item {
    position: relative;
    display: inline-block;
    width: 273px;
    height: auto;
    margin: 0px 30px;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    vertical-align: top;
}
.opacity.sc-event {opacity: 1 !important;}

.dir_bottom.sc-event, .dir_top.sc-event, .dir_left.sc-event, .dir_right.sc-event {
    opacity: 1;
    top: 0px !important;
    left: 0px !important;
    transition: all 1s ease;
}


/* 놎낮이 */
section.product .product_list .item01 {padding-top: 215px;padding-bottom: 80px;}
section.product .product_list .item02 {padding-top: 295px;}
section.product .product_list .item03 {padding-top: 90px;padding-bottom: 207px;}
section.product .product_list .item04 {padding-top: 160px;padding-bottom: 136px;}
section.product .product_list .item05 {padding-top: 215px;padding-bottom: 80px;}
section.product .product_list .item06 {padding-top: 295px;}
section.product .product_list .item07 {padding-top: 90px;padding-bottom: 207px;}
section.product .product_list .item08 {padding-top: 160px;padding-bottom: 136px;}
section.product .product_list .item09 {padding-top: 215px;padding-bottom: 80px;}
section.product .product_list .item10 {padding-top: 295px;}
section.product .product_list .item11 {padding-top: 90px;padding-bottom: 207px;}
section.product .product_list .item12 {padding-top: 160px;padding-bottom: 136px;}

section.product .product_list .item a {
    position: relative;
    display: block;
    width: 273px;
    height: 500px;
    background: #999;
}

section.product .product_list .item a::before {
    position: absolute;
    text-transform: uppercase;
    content: "JEIL FILTER&CARBON";
    display: block;
    top: 95px;
    right: -22px;
    transform-origin: right top;
    transform: rotate(
90deg
);
    font-size: 13px;
    letter-spacing: 0.03em;
    font-weight: 300;
}

section.product .product_list .item a h4 {
    padding-top: 75px;
    padding-left: 35px;
    font-size: 28px;
    line-height: 34px;
    font-weight: 500;
    text-align: left;
    text-transform: uppercase;
    color: #fff;
    position: relative;
    z-index: 2;
}
section.product .product_list .item a .bg {
    position: absolute;
    left: 0px;
    top: 0px;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: box-shadow .5s ease;
}
section.product .product_list .item a .bg::after {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
     filter: grayscale(1); 
    transition: transform .5s ease, filter .5s ease;
    background-position: center center;
}
section.product .product_list .item a .bg1:after {background-image: url(../img/main/product_item_bg1.jpg);}
section.product .product_list .item a .bg2:after {background-image: url(../img/main/product_item_bg2.jpg);}
section.product .product_list .item a .bg3:after {background-image: url(../img/main/product_item_bg3.jpg);}
section.product .product_list .item a .bg4:after {background-image: url(../img/main/product_item_bg4.jpg);}
section.product .product_list .item a .bg5:after {background-image: url(../img/main/product_item_bg5.jpg);}
section.product .product_list .item a .bg6:after {background-image: url(../img/main/product_item_bg6.jpg);}
section.product .product_list .item a .bg7:after {background-image: url(../img/main/product_item_bg7.jpg);}
section.product .product_list .item a .bg8:after {background-image: url(../img/main/product_item_bg8.jpg);}
section.product .product_list .item a .bg9:after {background-image: url(../img/main/product_item_bg9.jpg);}
section.product .product_list .item a .bg10:after {background-image: url(../img/main/product_item_bg10.jpg);}
section.product .product_list .item a .bg11:after {background-image: url(../img/main/product_item_bg11.jpg);}
section.product .product_list .item a .bg12:after {background-image: url(../img/main/product_item_bg12.jpg);}

section.product .product_list .item a:hover .bg1:after {background-image: url(../img/main/product_item_bg1_hover.jpg);}
section.product .product_list .item a:hover .bg2:after {background-image: url(../img/main/product_item_bg2_hover.jpg);}
section.product .product_list .item a:hover .bg3:after {background-image: url(../img/main/product_item_bg3_hover.jpg);}
section.product .product_list .item a:hover .bg4:after {background-image: url(../img/main/product_item_bg4_hover.jpg);}
section.product .product_list .item a:hover .bg5:after {background-image: url(../img/main/product_item_bg5_hover.jpg);}
section.product .product_list .item a:hover .bg6:after {background-image: url(../img/main/product_item_bg6_hover.jpg);}
section.product .product_list .item a:hover .bg7:after {background-image: url(../img/main/product_item_bg7_hover.jpg);}
section.product .product_list .item a:hover .bg8:after {background-image: url(../img/main/product_item_bg8_hover.jpg);}
section.product .product_list .item a:hover .bg9:after {background-image: url(../img/main/product_item_bg9_hover.jpg);}
section.product .product_list .item a:hover .bg10:after {background-image: url(../img/main/product_item_bg10_hover.jpg);}
section.product .product_list .item a:hover .bg11:after {background-image: url(../img/main/product_item_bg11_hover.jpg);}
section.product .product_list .item a:hover .bg12:after {background-image: url(../img/main/product_item_bg12_hover.jpg);}

section.product .product_list .item a:hover .bg {
    box-shadow: 0px 20px 30px rgba(0, 0, 0, .5);
}

section.product .product_list .item a:hover .bg::after {
    transform: scale(1.1) rotate(0.01deg);
    filter: grayscale(0);
}

section.product .product_list .item a::after {
    position: absolute;
    display: block;
    top: -25px;
    left: 10px;
    font-size: 18px;
}

section.product .product_list .desc {
    font-size: 18px;
    color: #fff;
    transform: rotate(
270deg
);
    text-transform: uppercase;
    bottom: 50px;
    left: -23px;
}

section.product .product_list .desc:after {
    display: block;
    content: '';
    clear: both;
    position: absolute;
    width: 1px;
    height: 300px;
    background: #fff;
    transform: rotate(270deg);
    top: -141px;
    left: 250px;
}

section.product .product_list img {
    bottom: 25px;
    right: 30px;

}

section.product .product_list .item a:hover .desc,
section.product .product_list .item a:hover img {
    opacity: 1;
}


section.product .product_list .desc{
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: all 1s ease;
}
section.product .product_list item .arroww_img img{
    position: absolute;
    z-index: 1;
    opacity: 1;
    transition: all 1s ease;
    width: 35%;}
    


section.product .product_list .item:nth-of-type(2) {
    padding-top: 295px;
}

section.product .product_list .item:nth-of-type(3) {
    padding-top: 90px;
    padding-bottom: 207px;
}
section.product .product_list .item:nth-of-type(4) {
    padding-top: 160px;
    padding-bottom: 136px;
}
@media (max-width: 1279px) {
    section.product .left_box {margin-left: -860px;}
    section.product .product_list .item {width: 220px;}
    section.product .product_list .item a {width: 220px;}
    .catalog {height: 200px;}
    .catalog a {margin-left: 50%;}
    .catalog a h3 {padding: 60px 0 10px 0;}
    .catalog h3 {font-size: 30px;}
}

@media (max-width: 992px) {
    section.product .left_box {margin-left: -700px;}
    section.product .product_list .item {width: 200px;}
    section.product .product_list .item a {width: 200px;height: 400px;}

    
}

@media (max-width: 800px) {
     
    section.product .left_box {margin-left: -650px;}
    .catalog {height: 150px;}
    .catalog a {margin-left: 40%;}
    .catalog a h3 {padding: 35px 0 10px 0;}
}

@media (max-width: 700px) {
    section.product .left_box {margin-left: -600px;}
    section.product .product_list .item {width: 160px;}
    section.product .product_list .item a {width: 160px;height: 300px;}
    section.product .product_list .item a h4 {padding-left: 10px;}
    .catalog a {margin-left: 20%;}
    
    .news_text {width: 100%;}
}

@media (max-width: 500px) {
    section.product .left_box {margin-left: -550px;}
    section.product .left_box h3 {font-size: 28px;}
    section.product .product_list .item a {height: 200px;}
    .catalog a {margin-left: 5%;}
    .catalog a p {font-size: 18px;}
    
}


#m_content04{ padding:100px 0; text-align:center; position: relative; z-index: 1; background: #eee;}
#m_content04 .area{ width:1280px; height:auto; margin:0px auto; }
#m_content04 ul{ display:flex}
#m_content04 ul > li:nth-child(1){ width:20%; margin:0 5% 0 0; text-align:left}
#m_content04 ul > li:nth-child(2){ width:75%; margin:0 0 0 5%}
#m_content04 li h3{ font-size:2.85em; font-weight:500; color:#444}
#m_content04 li h3 span{ display:block; font-size:.60em; opacity:.7}
#m_content04 li div.more:before{display: inline-block; content: "+"; font-size:1.50em;  color: #fff !important; font-weight: 400; position: relative; top: 50%; left:50%; transform: translate(-50%,-50%);}
#m_content04 li div.more{ width:40px; height:40px; background:#74c500; margin:20px 0 0}
#m_content04 li div.more a{ color:#fff !important}

@media (max-width: 1279px) {
#m_content04{ padding:50px 0; text-align:center}
#m_content04 .area{ width:90%; height:auto; margin:0px auto; }
}
@media (max-width: 992px) {
    #m_content04 .area{
        
    }
#m_content04 ul{ display:block}
#m_content04 ul > li:nth-child(1){ display:none}
#m_content04 ul > li:nth-child(2){ width:100%; margin:0}
}
@media (max-width: 800px) {
#m_content04{ padding: 30px 0;}
}