/* Popup */ #popup{ display:none; } #popup2{ display:none; } #popup3{ display:none; } #popup input, #popup2 input, #popup3 input{ vertical-align:middle;position:relative;top:-1px; } /* main content ---------------------------------------------------------------*/ #content{ min-height:400px; } #wrap_b{ margin-top:50px; } /* visual ---------------------------------------------------------------*/ #visual{ width:100%;min-width:310px;height:355px;background:url('../imgs/layout/main/visual_480.jpg') no-repeat center 0; } #visual .v_div{ display:none; } #content .header{ width:100%;position:relative;border-bottom:1px solid #2c3343;margin-top:27px; } #content .header h3{ width:120px;font-weight:bold;padding-bottom:6px;border-bottom:3px solid #2c3343; padding-left:27px;color:#7f8baa;background:url('../imgs/page/main/main_bullet.png') no-repeat 4px 6%; } #content .header b{ font-size:15px;display:none; color:#5c6270;margin-left:16px;font-weight:normal;position:absolute;left:140px;top:0px; } #content .header span{ font-weight:normal;position:absolute;right:6px;top:0px; } #content .header span a{ color:#626774 } /* 컨텐츠영역 ---------------------------------------------------------------*/ /* 제품소개 */ #prod{ width:100%; } #content .content{ width:95%; height: 277px; border:1px solid #343a4b;margin:0 auto;margin-top:19px; } #prod .content{ *zoom:1;position:relative;border:none; } #prod .content:after{ content:""; display:block; width:0px; height:0px; clear:both; } #prod .content .left{ width:50%;float:left; } #prod .content .left dt{ color:#7e89a7;font-weight:bold;font-size:13px;letter-spacing:0px; } #prod .content .left dd{ color:#7b808d;font-size:12px;margin-top:10px; } #prod .content .left dd span{ display:none; } #prod .content .left .video{ position:absolute;left:0px;bottom:0px; } #prod .content .left .video div{ border:9px solid #363d4e;width:102px;height:105px; } #prod .content .left .video_btn{ position:absolute;left:128px;bottom:8px; } #prod .content .right{ width:135px;height:277px;overflow:hidden;background:#1f222c;float:right;position:relative;border: 1px solid #343a4b; } #prod .content .right .prod_box{ width:100%; } #prod .content .right ul{ width:405px;margin-top:0px;position:relative; } #prod .content .right ul li{ float:left;width:135px;margin:0 auto; } #prod .content .right .prod_btn{ position:absolute;right:9px;top:7px; display:none;} #prod .content .right .prod_btn span{ margin-left:2px; } /* 작동원리 */ #itrap .content{ background:#1f222c; } #itrap .content .itrap_img{ width:167px;margin:0 auto;margin-top:8px; } #itrap .content .itrap_txt{ font-size:15px;color:#7b808d;padding-top:6px;width:90%;margin:0 auto; } #itrap .content .itrap_txt b{ color:#9ca5bc; } /* 고객센터 */ #customer .content{ border:none;background:none;height:260px; } #customer .content .box1, #customer .content .box2{ width:100%;height:124px;background:url('../imgs/page/main/customer_box_line.gif') repeat-x 0 0; border:1px solid #343a4b;position:relative; } #customer .content .box1 .lt_pin{ position:absolute;left:6px;top:6px; } #customer .content .box1 .rb_pin{ position:absolute;right:6px;bottom:4px; } #customer .content .box1:first-child{ margin-bottom:8px; } #customer .content .box2 .lt_pin{ position:absolute;left:6px;top:6px; } #customer .content .box2 .rb_pin{ position:absolute;right:6px;bottom:4px; } #customer .content .box2:first-child{ margin-bottom:8px; } #customer .content .box1 .c_txt{ width:229px;margin:0 auto;padding-top:13px; } #customer .content .box2 .c_txt{ width:266px;margin:0 auto;padding-top:10px; } /* 물안소의 장점 */ #merit .content{ height:auto;background:url('../imgs/page/main/merit_bg_ani.gif') repeat 0 0; } #merit .container{ padding:18px 0; } #merit li{ width:90%;margin:0 auto;margin-bottom:8px;color:#7c8496;font-size:16px;padding-left:16px;background:url("../imgs/page/main/merit_bullet.png") no-repeat 0 3px; } /* 냄새발생원인 */ #smell .content{ background:none; border:none;height:auto; } #smell .img{ height:343px;overflow:hidden;background:url('../imgs/page/main/smell_320.gif') no-repeat 0 0;margin:0 auto; } #smell .txt{ background:#0d4061;color:#7fa4c6;font-size:13px;line-height:18px;margin:0 auto;margin-top:6px;border:1px solid #10354d; } #smell .txt p{ margin:12px;font-size:16px; } /* @media all and (min-width:400px){ #smell .img{ background:url('./imgs/page/main/smell_320.gif') no-repeat 0 0;border:1px solid #2e3342; } } */ .smell_flash{ display:none;width:100%;overflow:hidden; } /* 설치방법 */ #install .content{ height:auto;border:none;background:none; } #install .content .img_box1{ height:385px;border:1px solid #343a4b;position:relative;background:url('../imgs/page/main/install_img1.jpg') no-repeat center center; } #install .content .img_box2{ height:385px;border:1px solid #343a4b;position:relative;background:url('../imgs/page/main/install_img2.jpg') no-repeat center center;margin-top:7px;} #install .content .img_box3{ height:385px;border:1px solid #343a4b;position:relative;background:url('../imgs/page/main/install_img3.jpg') no-repeat center center;margin-top:7px;} #install .content .txt_box{ width:100%;height:63px;text-align:center;position:absolute;bottom:0px;left:0px;background:black; opacity: 0.85; -ms-filter: alpha(opacity=85); filter: alpha(opacity=85); } #install .content .title{ font-weight:bold;font-size:18px;color:#ebecee;margin-top:11px; } #install .content .txt{ color:#bec6da; font-size:16px; } /* 시공사례 */ #case .content{ height:auto; border:none;} #case .content ul{ *zoom:1; } #case .content ul:after{ content:""; display:block; width:0px; height:0px; clear:both; } #case .content li div img{ width:100%;height:auto; } #case .content li{ float:left;width:47%;margin:1%;text-align:center;font-size:12px; } #case .content li p{ margin-top:10px;margin-bottom:5px; } #case .content li p img{ vertical-align:middle; } #case .content li p a{ color:#555c65; } #case .content li p a:hover{ color:#888; } /* 문의글 */ #notice .content{ height:auto; border:none; background:none;position:relative; } #notice .content .board1, #notice .content .board2{ background:#21252d;border:1px solid #272c37; } #notice .content .board2{ margin-top:7px; } #notice .content .board_title{ border-bottom:2px solid #476475;position:relative;padding-top:4px;width:95%;margin:0 auto; } #notice .content .board_title h4{ font-weight:bold;font-size:16px;color:#b3bac7;line-height:33px;padding-left:7px; } #notice .content .board_title span{ font-size:13px;position:absolute; right:7px;top:10px; } #notice .content .board_title span a{ color:#c5c5c5; } #notice .content ul{ width:95%;margin:0 auto;padding-top:11px; padding-bottom:9px; } #notice .content ul li{ font-size:12px;position:relative;border-bottom:1px dotted #43474d;line-height:31px;padding-left:7px;background:url("../imgs/page/main/board_li_bullet.png") no-repeat 0 14px; } #notice .content ul li a{ color:#7d7f89; } #notice .content ul li a:hover{ color:#8c91a5; } #notice .content ul li img{ margin:0 2px;vertical-align:middle; } #notice .content ul li span{ position:absolute;right:4px;top:0px;} #notice .content ul .last-child{ border-bottom:none; } #notice .customer2{ *zoom:1;margin-top:7px;border:none; } #notice .customer2:after{ content:""; display:block; width:0px; height:0px; clear:both; } #notice .customer2 div{ width:100%;height:106px;border:1px solid #292c33;background:#21252d;text-align:center; } #notice .customer2 .call{ margin-bottom:7px; } #notice .customer2 .call img{ width:229px;height:92px;margin-top:7px; } #notice .customer2 .bank img{ width:266px;height:97px;margin-top:4px; } /* 지점안내 */ #network .content{ height:auto;border:none;background:none; } #network .content .photo li{ border:1px solid #666;margin-bottom:7px; } #network .content .photo li img{ width:100%;height:auto; } #network .map{ position:relative;width:100%;height:340px;background:url('../imgs/page/main/network_map.jpg') no-repeat center 30%; } #network .map .btn{ position:absolute; right:14px;bottom:14px; } #network .map_link{ background:#325584;padding:12px; } #network .map_link h4{ font-size:18px;font-weight:bold;color:#fff;letter-spacing:-1px; } #network .map_link h4 b{ color:#8eeb7f; } #network .map_link ul{ margin-top:14px; } #network .map_link ul li{ font-size:16px;display:inline; } #network .map_link ul li a{ color:white; } #network .map_link ul li a:hover{ color:#7db8e3; } .map_flash{ display:none; } #network .patent{ margin-top:11px; height:auto; } #network .patent ul{ *zoom:1;border:1px solid #282d39;background:#21252d;margin-bottom:4px;padding:11px 0; } #network .patent ul:after{ content:""; display:block; width:0px; height:0px; clear:both;padding-left:0.5%; } #network .patent ul li{ float:left;width:47.5%;text-align:center;margin:0 1%; } #network .patent ul li .title{ margin-top:8px; } /*---------------------------------------------------------------------------- Media Query ------------------------------------------------------------------------------*/ @media all and (min-width:320px){ #smell .img{ background:url('../imgs/page/main/smell_480.gif') no-repeat 0 0; } } @media all and (min-width:479px) { /* ----------------------------------------------------------------------------- common_layout ----------------------------------------------------------------------------- */ #header .top_nav{ right:84px; } #header .nav{ height:98px; } #header .nav li{ width:33.3%; } #header .nav .li2, #header .nav .li4{ background:url('../imgs/layout/division.gif') repeat-y right 0; } #header .nav .li3{ background:none; } #header .top_nav .li4, #header .top_nav .li5{ display:inline; } /* ----------------------------------------------------------------------------- main-content ----------------------------------------------------------------------------- */ #visual{ height:432px;background:url('../imgs/layout/main/visual_600.jpg') no-repeat center 0; } #content .header b{ display:block; } #prod .content .left{ width:62%;float:left; } #prod .content .left dd span{ display:block;margin-top:14px; } #itrap .content .itrap_img{ margin-top:12px; } #itrap .content .itrap_txt{ padding-top:11px; } #smell .img{ background:url('../imgs/page/main/smell_600.gif') no-repeat 0 0; } } @media all and (min-width:599px) { /* ----------------------------------------------------------------------------- common_layout ----------------------------------------------------------------------------- */ #header .m_list{ display:none; } #header .top_nav{ display:block;right:14px; } #header .nav{ height:49px;display:none; } #header .nav li{ width:20%; } #header .nav .li3{ background:url('../imgs/layout/division.gif') repeat-y right 0; } #header .nav .li5{ background:none; } #header .nav .li6{ display:none; } /* ----------------------------------------------------------------------------- main-content ----------------------------------------------------------------------------- */ #visual{ height:514px;background:url('../imgs/layout/main/visual_768.jpg') no-repeat center 0; } #main_content{ *zoom:1; } #main_content:after{ content:""; display:block; width:0px; height:0px; clear:both; } #prod{ width:49.5%;float:left; } #prod .header{ width:95%; } #prod .content{ width:90%; } #prod .content .left{ width:44%; } #prod .content .left .video_btn{ display:none; } #prod .content .left dd span{ display:none; } #prod .header b, #itrap .header b{ display:none; } #itrap{ width:49.5%;float:left; } #itrap .content{ width:90%; } #itrap .content .itrap_img{ margin-top:6px; } #itrap .content .itrap_txt{ font-size:15px;padding-top:0px;margin:0 auto; } #customer{ display:none; } #smell .img{ background:url('../imgs/page/main/smell_800.gif') no-repeat center 0; } #merit .container{ *zoom:1;padding-bottom:6px; } #merit .container:after{ content:""; display:block; width:0px; height:0px; clear:both; } #merit ul:first-child{ width:46%;margin-left:2%;float:left; } #merit ul{ width:46%;float:right;margin-right:2%;} #install .content { width:96%; } #install .content ul{ *zoom:1;margin:0 auto; } #install .content ul:after{ content:""; display:block; width:0px; height:0px; clear:both; } #install .content li{ width:31.3%;float:left;margin:0 1%;#margin:0 0.9%; } #install .content .img_box1{ height:285px;margin-top:0px;border:none; } #install .content .img_box2{ height:285px;margin-top:0px;border:none; } #install .content .img_box3{ height:285px; margin-top:0px;border:none; } #case .content li{ float:left;width:31.4%;margin:1%;border:none; } #notice .customer2 div{ width:50%;float:left;border:none;padding:7px 0; } #notice .customer2 .call{ margin-bottom:0px; } #notice .customer2{ border:1px solid #272c37; } #network .patent{ *zoom:1;margin-top:11px; height:auto; } #network .patent:after{ content:""; display:block; width:0px; height:0px; clear:both; } #network .patent ul{ width:50%;border:none;float:left; } #network .map_link h4{ text-align:center; } #network .map .btn{ right:20px;bottom:20px; } #network .map_link ul{ width:85%;margin:0 auto;padding-top:7px;font-size:12px; } } @media all and (min-width:639px){ #visual{ height:514px;background:url('../imgs/layout/main/visual_768.jpg') no-repeat center 0; } #case .content li{ float:left;width:31.3%;margin:1%;border:none; } #case .content .li10{ display:none; } #network .map_link ul{ width:70%; } #prod .content .left{ width:50%; } } @media all and (min-width:719px){ #visual{ height:514px;background:url('../imgs/layout/main/visual_768.jpg') no-repeat center 0; } #prod .content .left .video_btn{ display:block; } } @media all and (min-width:767px) { /* ----------------------------------------------------------------------------- common_layout ----------------------------------------------------------------------------- */ #header .h_con{ position:absolute;background:none; } #header h1{ width:146px;height:68px;background:url("../imgs/layout/logo.png") no-repeat 0 0;margin-left:10px; } #header .m_list{ display:none; } #header .top_nav{ display:block;text-align:right;line-height:2.4em;border-bottom:none;position:absolute;top:12px;right:10px; } #header .top_nav li{ display:inline;background:url('../imgs/layout/nav_division.gif') no-repeat 0 30%;font-size:14px;letter-spacing:-1px;padding-left:10px;padding-right:4px; } #header .top_nav li a:link{ color:#7d7f89; } #header .top_nav li a:hover{ color:#000; } #header .top_nav .li1, #header .top_nav .li2, #header .top_nav .li6{ display:inline; } #header .top_nav .li2{ background:url('../imgs/layout/nav_division.gif') no-repeat 0 30%; } #header .nav{ *zoom:1;background:url('../imgs/layout/nav_bg.gif') repeat-x 0 0;height:39px;border:1px solid #dbdbdb; } #header .nav{ width:100%;position:absolute;top:560px;left:0px; } #header .nav li{ line-height:35px;padding-top:4px;font-size:18px;font-weight:bold;letter-spacing:-2px;border-bottom:none; } /* ----------------------------------------------------------------------------- main-content ----------------------------------------------------------------------------- */ #content{ background:url('../imgs/page/main/main_gradient_bg.gif') no-repeat center 0;position:relative; top:20px; } #visual{ height:581px;background:url('../imgs/layout/main/visual_1024.jpg') no-repeat center 0; } #case .content li{ width:23%;margin:0.9%;border:none; } #case .content .li9, #case .content .li10{ display:none; } #prod .content .left{ width:55%; } #itrap .content{ width:93%; } #itrap .content .itrap_img{ margin-top:12px; } #itrap .content .itrap_txt{ font-size:15px;padding-top:7px;margin:0 auto; } #notice .content { *zoom:1;border:none; } #notice .content:after{ clear:both;content:""; display:block; width:0px; height:0px; } #notice .content .board1{ width:49.5%;float:left;border:1px solid #292c33; } #notice .content .board2{ width:49.5%;float:right;border:1px solid #292c33;margin-top:0px; } #notice .customer2{ display:none; } #notice .customer2 div{ margin-top:0.5%;border:1px solid #292c33; } #notice .customer2 .call{ width:49.5%;float:left; } #notice .customer2 .bank{ width:49.5%;float:right; } #network .content{ *zoom:1; } #network .content:after{ content:""; display:block; width:0px; height:0px; clear:both; } #network .content .photo { *zoom:1;border:1px solid #666;margin-bottom:1%; } #network .content .photo:after{ content:""; display:block; width:0px; height:0px; clear:both; } #network .content .photo li{ border:none;margin-bottom:0;width:50%;float:left; } #network .map{ position:relative;width:100%;height:242px;#height:228px; } #network .map_con{ width:36.2%;float:left;margin-right:0.3%;} #network .map_link ul{ width:238px;margin:0 auto; } #network .map_link li a{ font-size:12px; } #network .patent{ margin-top:0px; width:62.5%;float:right;padding:0px; border:1px solid #292c33;background:#21252d; } #network .patent .con{ width:470px;margin:0 auto;margin-top:0px; } #network .patent ul{ font-size:12px;margin:0px;width:49%; } #network .patent ul li{ width:47.5%;text-align:center;margin:0 1%; } #network .patent ul li img{ width:100%;height:auto; } } @media all and (min-width:799px) { /* ----------------------------------------------------------------------------- common_layout ----------------------------------------------------------------------------- */ #header .nav{ width:100%;position:absolute;top:560px;left:0px; } #header .top_nav li{ font-size:14px;letter-spacing:-1px; } /* ----------------------------------------------------------------------------- main-content ----------------------------------------------------------------------------- */ #visual{ height:581px;background:url('../imgs/layout/main/visual_1024.jpg') no-repeat center 0;} #smell .img{ background:url('../imgs/page/main/smell_1024.gif') no-repeat center 0; } #prod .content .left{ width:52%; } #prod .content .left dd span{ display:block; } } @media all and (min-width:1003px) { /* ----------------------------------------------------------------------------- common_layout ----------------------------------------------------------------------------- */ #popup .img{ cursor:pointer;width:400px;height:524px;background:url("../popup/popup2.jpg") no-repeat 0 0; } #popup2 .img{ cursor:pointer;width:315px;height:524px;background:url("../popup/popup3.jpg") no-repeat 0 0; } #popup3 .img{ cursor:pointer;width:400px;height:524px;background:url("../popup/popup.jpg") no-repeat 0 0; } body{ font-size:12px; color:#7d7f89;background:#171a21; } #header .nav{ width:100%;position:absolute;top:560px;left:0px;z-index:2; } #header .nav li{ font-size:19px;letter-spacing:-2.5px; } #header .top_nav li{ font-size:14px;letter-spacing:-1px; } #foot .f_logo{ display:block;margin-right:50px;#margin-right:20px;padding:0px;margin-bottom:0px; } #foot ul{ *zoom:1;width:83%;#width:60%;position:relative; } #foot ul:after{ content:""; display:block; width:0px;height:0px; clear:both; } #foot ul li{ float:left;margin-right:14px; } /* ----------------------------------------------------------------------------- main-content ----------------------------------------------------------------------------- */ #visual{ height:581px;background:url('../imgs/layout/main/visual_1024.jpg') no-repeat center 0; } #content .content{ width:98%; } #prod .content .left{ width:49%; } #case .content li{ width:18.9%;margin:0.5%;border:none; } #case .content .li9, #case .content .li10{ display:block; } #prod{ width:32%; } #prod .header{ width:100%; } #prod .content{ margin-left:2%; } #prod .content .left dd span{ display:none; } #itrap{ width:32%;margin-left:1.3%;margin-right:1.6%; } #itrap .content{ width:100%; } #itrap .content .itrap_img{ margin-top:14px; } #itrap .content .itrap_txt{ padding-top:8px;font-size:14px; } #customer{ display:block;float:left;width:32%; } #customer .header b{ display:none; } #customer .content{ width:100%; } #customer .content .box1, #customer .content .box2{ height:132px;background:url('../imgs/page/main/customer_box_line2.gif') repeat-x 0 0; } #customer .content .box1:first-child{ margin-bottom:11px; } #customer .content .box2:first-child{ margin-bottom:0px; } #customer .content .box1 .c_txt{ padding-top:18px; } #customer .content .box2 .c_txt{ padding-top:14px; } /*#smell .img{ background:none;width:1079px;100%;height:372px; } */ #smell .img{ background:url('../imgs/page/main/smell_1024.gif') no-repeat center 0; } .smell_flash{ display:block; } #merit ul{ width:35%;float:right;margin-right:6%;margin-top:8px;margin-bottom:5px; font-weight:bold; font-size:24px; } #merit ul:first-child{ width:35%;margin-left:6%;float:left; } #merit ul li{ margin-bottom:11px; } #notice .content{ width:98%;border:none; } #notice .content .board1{ width:36%;float:left; } #notice .content .board2{ width:35.5%;float:left;margin:0 0.5%; } #notice .content ul{ margin-top:4px; } #notice .customer2{ width:27%;float:left;margin-left:0%;margin-right:0px;margin-top:0px;border:none;padding:0px;display:block; } #notice .customer2 div{ margin-top:0%;border:1px solid #282d39;padding-top:7px; } #notice .customer2 .call{ width:100%;float:left;padding-top:0px;padding-bottom:0px; } #notice .customer2 .bank{ width:100%;float:left;padding-top:0px;padding-bottom:0px;margin-top:7px; } #network .map{ height:319px;height : 312px\0/IE9+10;height : 317px\0/IE8;overflow:hidden; } #network .map_link ul{ width:318px;margin:0 auto; } #network .map{ background:url('../imgs/page/main/network_map.jpg') no-repeat center 35%; } #network .patent .con{ width:597px; } } @media all and (min-width:1050px){ #smell .img{ background:url('../imgs/page/main/smell_1200.gif') no-repeat center 0;height:372px; } } @media all and (min-width:1079px){ #content{ width:1080px;margin:0 auto; } } @media all and (min-width:1119px) { /* ----------------------------------------------------------------------------- common_layout ----------------------------------------------------------------------------- */ #wrap_t .wrap, #wrap_m .wrap, #wrap_b .wrap{ width:1200px; } #header .nav{ width:100%;position:absolute;top:679px;left:0px; } #foot{ width:100%; } #foot .f_logo{ margin-right:70px; } #foot ul{ top:8px; } #foot .top_btn{ top:22px;right:44px; } /* ----------------------------------------------------------------------------- main-content ----------------------------------------------------------------------------- */ #visual{ height:700px;background:url('../imgs/layout/main/visual_1200.jpg') no-repeat center 0; } #visual .v_div{ display:block; } #content .content{ width:100%; } #prod .content{ margin-left:0%; } #prod{ width:32%; } #itrap{ width:32%;margin-left:2%;margin-right:2%;#margin-left:1.9%;#margin-right:1.9%; } #customer{ width:32%; } #content .header b{ display:block; } #prod .header span, #itrap .header span, #customer .header span{ display:none; } #prod .content .left{ width:54%; } #prod .content .left dd span{ display:block; } .map_flash{ display:block; } }