/*/////////////////////////////////////////////////공통부분//////////////////////////////////////////////////////////*/ #wrapper .main_wrap .main_content_wrap .latest_span{display:block;float:right;width:22%;text-align:right;margin-right:2px;} /*/////////////////////////////////////////////////pc버전이에요//////////////////////////////////////////////////////////*/ @media all and (min-width:769px){ /*/////////////////////메인페이지의 텍스트//////////////////////////*/ #featured_project {width:100%;margin-top:-100px;z-index:9999999}/*높이위치 조절 */ #featured_project .control { position:relative; z-index:10; margin:0 auto; max-width:1000px; min-width:680px; } #featured_project .control h2 { letter-spacing:-0.04em; position:absolute; right:0; top:0px; font-size:20px; font-weight:bold; color:#333; } /* #featured_project .control .thumb_nav { position:absolute; top:0px; right:0; } #featured_project .control .thumb_nav a { float:left; display:block; text-indent:-9999px; padding:0 1px; width:13px; height:13px; background:url('../img/nav_off.png') no-repeat 0 0; } #featured_project .control .thumb_nav a.on { background-image:url('../img/nav_on.png'); } */ #featured_project div.list {margin-top:-100px;overflow:hidden; max-width:1000px; min-width:680px; height:200px; position:relative; margin:0 auto; background: url('../img/visual_point.png') repeat-x 0 100%; } #featured_project ul.list { height:200px; position:absolute; top:0; left:0; } #featured_project ul.list li { position:absolute; top:0; left:0; max-width:1000px; min-width:750px; width:100%; height:200px; overflow:hidden; } #featured_project ul.list li dl.cont { position:absolute; right:-300px; top:0px; text-align:right; } #featured_project ul.list li dl.cont dt.client { font-size:20px; color:#000; font-weight:bold; letter-spacing:-0.03em;padding:15px 0 } #featured_project ul.list li dl.cont dt.client .icon { vertical-align:middle; } #featured_project ul.list li dl.cont dt.name { margin-bottom:10px; font-size:40px; font-family:NanumGothicBold; color:#fff; letter-spacing:-0.05em; } #featured_project ul.list li dl.cont dd.explan { line-height:1.5; color:#fff; font-size:14px;font-weight:600;text-align:right;margin:5px 0 } /* #featured_project ul.list li dl.cont dd.btns { margin-top:30px; } #featured_project ul.list li dl.cont dd.btns a { margin:0 2px; font-size:11px; color:#fff; text-decoration:none; display:inline-block; padding:2px 23px; font-weight:bold; } #featured_project ul.list li dl.cont dd.btns a.detail { background:#ff8800; } #featured_project ul.list li dl.cont dd.btns a.link { background:#000; } #featured_project ul.list li dl.cont dd.btns a:hover { text-decoration:underline; } */ /*///////////////////////////메인페이지의 텍스트 끝////////////////////////////////*/ /* 중간 레이아웃 */ .main_img{width:100%;height:auto;min-height:150px;margin:0 auto;padding:140px 0;background-repeat:repeat;background:url('/V1/mobile_smarthome/img/main_img02.jpg')top center;overflow:hidden} .main_img .ment{width:1000px;margin:-70px auto;text-align:right;} .main_img .ment p{text-shadow:2px 2px 2px #000;color:#fff;font-weight:600;font-size:30px;} .main_img .ment ul{width:100%;margin:0;padding:0} .main_img .ment ul li{color:#fff;text-shadow:2px 2px 2px #000;font-size:18px;font-weight:600} /* 2018.02.27 메인스크롤링 형식을 변경 -> 자동으로 넘어가게.... -----------------------------------------------------------------------------*/ .animation_canvas { overflow:hidden; position:relative; width: 100%; padding:0 0; z-index:-1;} .slider_panel { width: 100%; padding:0;padding-bottom:25%;min-height: 100%; position:relative; } .slider_image { position: absolute; left:0; top:0; width: 100%; min-height: 100%;padding-bottom:0% opacity:0; background:#ccc} .slider_panel .img1 { background:url(/V1/mobile_smarthome/img/img1_pc.jpg) no-repeat center top;background-size:100% } .slider_panel .img2 { background:url(/V1/mobile_smarthome/img/img2_pc.jpg) no-repeat center top;background-size:100% } .slider_panel .img3 { background:url(/V1/mobile_smarthome/img/img3_pc.jpg) no-repeat center top;background-size:100% } .control_panel { position:absolute; margin-top: -2%; left: 50%; width:200px; height: 20px; overflow:hidden; } .control_panel .control_button { width:10px; height:10px; position:relative; float:left; cursor:pointer; display:inline-block; background:url(http://kisvan.co.kr/image/main/point.png) no-repeat center top; margin: 5px 5px 0 0; } .control_panel .control_button.active { background-position: center bottom; } .control_panel .first { margin: 5px 5px 0 7px; } /* 2018.02.27 메인스크롤링 형식을 변경 -> 자동으로 넘어가게.... */ #wrapper {margin:0 auto;clear:both;width:1200px;height:auto;background:#fff;z-index:99999;} #wrapper:after {display:block;visibility:hidden;clear:both;content:""} #wrapper .main_wrap{width:100%;margin:0 auto;height:auto} #wrapper .main_wrap .main_content_wrap{margin:0 auto;width:98%;} #wrapper .main_wrap .main_content_wrap .main_content_01{clear:both;float:left;width:49%;margin:15px 0;border-radius:10px;border:1px solid #ddd;height:auto;padding-bottom:10px} #wrapper .main_wrap .main_content_wrap .main_content_03{float:right;width:49%;margin:15px 0;border-radius:10px;border:1px solid #ddd;height:auto;padding-bottom:10px} #wrapper .main_wrap .main_content_wrap .main_content_02{clear:both;width:100%;margin:15px 0;} #wrapper .main_wrap .main_content_wrap .main_content_04{float:right;width:49%;margin:15px 0;border-radius:10px;border:1px solid #ddd;height:auto;padding-bottom:10px;text-align:center} #wrapper .main_wrap .main_content_wrap .main_content_04 textarea{height:80px;border-radius:5px;width:92%;margin:0 auto;border:1px solid #ddd;padding:5px} #wrapper .main_wrap .main_content_wrap .main_content_04 .sms_div {width:95%;text-align:left;margin:0 auto} #wrapper .main_wrap .main_content_wrap .main_content_04 .sms_div input[type="text"]{width:65%} #wrapper .main_wrap .main_content_wrap .main_content_04 .sms_div input[type="submit"]{margin:0;background:#4b545e;padding:6px 0;width:100px;color:#fff;border:1px solid #444;vertical-align:middle;border-radius:2px} /* 최근게시물 스킨 (latest) */ #wrapper .main_wrap .main_content_wrap .lt {clear:both;margin:0 auto;padding:0;width:97%;height:auto;} #wrapper .main_wrap .main_content_wrap .lt p{padding:0 0 0 10px;margin:0;height:40px;border-bottom:1px solid #efefef} #wrapper .main_wrap .main_content_wrap .lt a {display:block;padding:5px 0;color:#000;text-decoration:none} #wrapper .main_wrap .main_content_wrap .lt a.lt_title{display:inline-block;padding:10px 0;font-weight:600;font-size:16px} #wrapper .main_wrap .main_content_wrap .lt ul {clear:both;margin:0;padding:0;list-style:none;width:100%} #wrapper .main_wrap .main_content_wrap .lt ul li{clear:both;width:100%;height:auto;vertical-align:middle} #wrapper .main_wrap .main_content_wrap .lt ul li.li_line{clear:both;border-bottom:1px solid #efefef;vertical-align:middle;height:33px} #wrapper .main_wrap .main_content_wrap .lt ul li.li_line a{display:block;width:70%;float:left;} #wrapper .main_wrap .main_content_wrap .lt ul li.li_line a span.cnt_cmt{clear:both;display:inline;vertical-align:middle;font-size:9px} #wrapper .main_wrap .main_content_wrap .lt ul li.li_line button{display:block;float:right;vertical-align:middle;margin:4px 0} #wrapper .main_wrap .main_content_wrap .lt ul li.li_line button.color1{padding:3px 0;width:60px;background:#069;border-radius:2px;border:1px solid #065;color:#fff} #wrapper .main_wrap .main_content_wrap .lt ul li.li_line button.color2{padding:3px 0;width:60px;background:#f60;border-radius:2px;border:1px solid #f40;color:#fff} #wrapper .main_wrap .main_content_wrap .lt ul li.li_line button.color3{padding:3px 0;width:60px;background:#096;border-radius:2px;border:1px solid #094;color:#fff} #wrapper .main_wrap .main_content_wrap .lt .lt_more {clear:both;width:100%;text-align:right} #wrapper .main_wrap .main_content_wrap .lt .lt_more a{color:#888;font-weight:600} #wrapper .main_wrap .main_content_wrap .lt .cnt_cmt {display:inline-block;margin:0 0 0 3px;font-weight:bold} /*최근게시물의 구성원*/ #wrapper .main_wrap .main_content_wrap .lt_img {clear:both;margin:0 auto;padding:0;width:100%;height:auto;overflow:hidden;} #wrapper .main_wrap .main_content_wrap .lt_img p{padding:0 0 0 10px;margin:0;text-align:center;height:40px;border-bottom:1px solid #efefef} #wrapper .main_wrap .main_content_wrap .lt_img a {display:block;padding:5px 0;color:#000;text-decoration:none} #wrapper .main_wrap .main_content_wrap .lt_img a.lt_title{display:inline-block;padding:10px 0;font-weight:600;font-size:16px} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_img {position:relative;clear:both;margin:0;padding:0;list-style:none;height:auto} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_img:after {clear:both} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_img li{position:relative;float:left;width:25%;margin:0 auto;text-align:center;padding:0;height:auto;overflow:hidden ;} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_img li span{position:absolute;overflow:hidden;display:block;width:98%;padding:1% 0;height:auto;left:1%;bottom:8px;background:#182b55;margin:0 auto;z-index:9999;color:#fff;opacity:0.95} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_img li img{width:98%;margin:0 auto;padding:0;cursor:pointer;height:auto;overflow:hidden ;} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_img li img:hover{opacity:0.75} /* 최근게시물의 구성원 끝*/ /*최근게시물의 이미지갤러리*/ #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_gallery {position:relative;clear:both;margin:0;padding:0;list-style:none;height:auto} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_gallery:after {clear:both} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_gallery li{position:relative;float:left;width:25%;margin:0 auto;text-align:center;padding:0;height:auto} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_gallery li span{position:absolute;overflow:hidden;display:block;width:98%;padding:1% 0;height:auto;left:1%;bottom:8px;background:#444;margin:0 auto;z-index:9999;color:#fff;opacity:0.8} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_gallery li img{width:98%;margin:0 auto;padding:0;cursor:pointer;height:auto} /*최근게시물의 이미지갤러리 끝*/ /*최근게시물의 이미지갤러리2*/ #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_gallery2 {position:relative;clear:both;margin:0;padding:0;list-style:none;height:auto} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_gallery2:after {clear:both} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_gallery2 li:nth-child(odd){position:relative;float:left;width:20%;margin:0 auto;text-align:center;padding:0;height:auto} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_gallery2 li:nth-child(even){position:relative;float:left;width:30%;margin:0 auto;text-align:left;padding:0;height:auto} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_gallery2 li:nth-child(even):after{clear:both} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_gallery2 li span{position:absolute;overflow:hidden;display:block;width:25%;padding:1% 0;height:auto;left:1%;bottom:8px;background:#444;margin:0 auto;z-index:9999;color:#fff;opacity:0.8} #wrapper .main_wrap .main_content_wrap .lt_img ul.ul_gallery2 li img{width:98%;margin:0 auto;padding:0;cursor:pointer;height:auto} /*최근게시물의 이미지갤러리2 끝*/ } /*/////////////////////////////////////////////////모바일버전이에요//////////////////////////////////////////////////////////*/ @media all and (max-width:768px){ .main_img{width:100%;height:auto;min-height:300px;padding:30px 0;margin:0 auto;background:url('/V1/mobile_smarthome/img/main_img01.jpg')no-repeat top center;} .main_img .ment{width:340px;margin:150px auto;text-align:right;} .main_img .ment p{text-shadow:2px 2px 2px #000;color:#fff;font-weight:600;font-size:30px;} .main_img .ment ul{width:100%;margin:0;padding:0} .main_img .ment ul li{color:#fff;text-shadow:2px 2px 2px #000;font-size:18px;font-weight:600} /* 2018.02.27 메인스크롤링 형식을 변경 -> 자동으로 넘어가게.... -----------------------------------------------------------------------------*/ .animation_canvas { overflow:hidden; position:relative; width: 100%; padding:0 0; z-index:-1; } .slider_panel { width: 100%; padding:0;padding-bottom:100%;min-height: 200%; position:relative; } .slider_image { position: absolute; left:0; top:0; width: 100%; min-height: 200%;padding-bottom:85% opacity:0; background:#ccc} .slider_panel .img1 { background:url(/V1/mobile_smarthome/img/img1.jpg) no-repeat center top;background-size:100% } .slider_panel .img2 { background:url(/V1/mobile_smarthome/img/img2.jpg) no-repeat center top;background-size:100% } .slider_panel .img3 { background:url(/V1/mobile_smarthome/img/img3.jpg) no-repeat center top;background-size:100% } .control_panel { position:absolute; margin-top: -7%; left: 38%; width:200px; height: 20px; overflow:hidden; } .control_panel .control_button { width:10px; height:10px; position:relative; float:left; cursor:pointer; display:inline-block; background:url(http://kisvan.co.kr/image/main/point.png) no-repeat center top; margin: 5px 5px 0 0; } .control_panel .control_button.active { background-position: center bottom; } .control_panel .first { margin: 5px 5px 0 7px; } /* 2018.02.27 메인스크롤링 형식을 변경 -> 자동으로 넘어가게.... */ /*/////////////////////메인페이지의 텍스트//////////////////////////*/ #featured_project {width:100%;margin-top:-100px;z-index:9999999}/*높이위치 조절 */ #featured_project .control { position:relative; z-index:10; margin:0 auto; max-width:550px; min-width:300px; } #featured_project .control h2 { letter-spacing:-0.04em; position:absolute; right:0; top:0px; font-size:20px; font-weight:bold; color:#333; } /* #featured_project .control .thumb_nav { position:absolute; top:0px; right:0; } #featured_project .control .thumb_nav a { float:left; display:block; text-indent:-9999px; padding:0 1px; width:13px; height:13px; background:url('../img/nav_off.png') no-repeat 0 0; } #featured_project .control .thumb_nav a.on { background-image:url('../img/nav_on.png'); } */ #featured_project div.list {overflow:hidden; max-width:550px; min-width:300px; height:180px; position:relative; margin:0 auto; background: url('../img/visual_point.png') repeat-x 0 100%; } #featured_project ul.list { height:180px; position:absolute; top:0; left:0; } #featured_project ul.list li { position:absolute; top:0; left:0; max-width:550px; min-width:300px; width:100%; height:180px; overflow:hidden; } #featured_project ul.list li dl.cont { position:absolute; right:-300px; top:0px; text-align:right; } #featured_project ul.list li dl.cont dt.client { font-size:18px; color:#000; font-weight:bold; letter-spacing:-0.03em;padding:15px 0 } #featured_project ul.list li dl.cont dt.client .icon { vertical-align:middle; } #featured_project ul.list li dl.cont dt.name { margin-bottom:10px; font-size:22px; font-family:NanumGothicBold; color:#fff; letter-spacing:-0.05em; } #featured_project ul.list li dl.cont dd.explan { line-height:1.5; color:#fff; font-size:12px;font-weight:600;text-align:right;margin:5px 0 } /* #featured_project ul.list li dl.cont dd.btns { margin-top:30px; } #featured_project ul.list li dl.cont dd.btns a { margin:0 2px; font-size:11px; color:#fff; text-decoration:none; display:inline-block; padding:2px 23px; font-weight:bold; } #featured_project ul.list li dl.cont dd.btns a.detail { background:#ff8800; } #featured_project ul.list li dl.cont dd.btns a.link { background:#000; } #featured_project ul.list li dl.cont dd.btns a:hover { text-decoration:underline; } */ /*///////////////////////////메인페이지의 텍스트 끝////////////////////////////////*/ /* 중간 레이아웃 */ #wrapper {margin:0 auto;clear:both;width:100%;height:auto;background:#fff;z-index:99999;} #wrapper:after {display:block;visibility:hidden;clear:both;content:""} #wrapper .main_wrap{width:100%;height:auto} #wrapper .main_wrap .main_content_01{width:96%;margin:15px auto;border-radius:10px;border:1px solid #ddd;height:auto;padding-bottom:10px} #wrapper .main_wrap .main_content_02{width:100%;margin:15px auto;} #wrapper .main_wrap .main_content_03{width:96%;margin:15px auto;border-radius:10px;border:1px solid #ddd;height:auto;padding-bottom:10px} #wrapper .main_wrap .main_content_04{width:96%;margin:15px auto;border-radius:10px;border:1px solid #ddd;height:auto;padding-bottom:10px;text-align:center} #wrapper .main_wrap .main_content_04 textarea{height:80px;border-radius:5px;width:92%;margin:0 auto;border:1px solid #ddd;padding:5px} #wrapper .main_wrap .main_content_04 .sms_div {width:95%;text-align:left;margin:0 auto} #wrapper .main_wrap .main_content_04 .sms_div input[type="text"]{width:65%} #wrapper .main_wrap .main_content_04 .sms_div input[type="submit"]{margin:0;background:#4b545e;padding:6px 0;width:100px;color:#fff;border:1px solid #444;vertical-align:middle;border-radius:2px} /* 최근게시물 스킨 (latest) */ #wrapper .main_wrap .lt {clear:both;margin:0 auto;padding:0;width:97%;height:auto;} #wrapper .main_wrap .lt p{padding:0 0 0 10px;margin:0;height:40px;border-bottom:1px solid #efefef} #wrapper .main_wrap .lt a {display:block;padding:5px 0;color:#000;text-decoration:none} #wrapper .main_wrap .lt a.lt_title{display:inline-block;padding:10px 0;font-weight:600;font-size:16px} #wrapper .main_wrap .lt ul {clear:both;margin:0;padding:0;list-style:none;width:100%} #wrapper .main_wrap .lt ul li{clear:both;width:100%;height:auto;vertical-align:middle} #wrapper .main_wrap .lt ul li.li_line{clear:both;border-bottom:1px solid #efefef;vertical-align:middle;height:33px} #wrapper .main_wrap .lt ul li.li_line a{display:block;width:70%;float:left;} #wrapper .main_wrap .lt ul li.li_line a span.cnt_cmt{clear:both;display:inline;vertical-align:middle;font-size:9px} #wrapper .main_wrap .lt ul li.li_line button{display:block;float:right;vertical-align:middle;margin:4px 0} #wrapper .main_wrap .lt ul li.li_line button.color1{padding:3px 0;width:60px;background:#069;border-radius:2px;border:1px solid #065;color:#fff} #wrapper .main_wrap .lt ul li.li_line button.color2{padding:3px 0;width:60px;background:#f60;border-radius:2px;border:1px solid #f40;color:#fff} #wrapper .main_wrap .lt ul li.li_line button.color3{padding:3px 0;width:60px;background:#096;border-radius:2px;border:1px solid #094;color:#fff} #wrapper .main_wrap .lt .lt_more {clear:both;width:100%;text-align:right} #wrapper .main_wrap .lt .lt_more a{color:#888;font-weight:600} #wrapper .main_wrap .lt .cnt_cmt {display:inline-block;margin:0 0 0 3px;font-weight:bold} /*최근게시물의 구성원*/ #wrapper .main_wrap .lt_img {clear:both;margin:0 auto;padding:0;width:97%;height:auto;overflow:hidden;} #wrapper .main_wrap .lt_img p{padding:0 0 0 10px;margin:0;height:40px;border-bottom:1px solid #efefef} #wrapper .main_wrap .lt_img a {display:block;padding:5px 0;color:#000;text-decoration:none} #wrapper .main_wrap .lt_img a.lt_title{display:inline-block;padding:10px 0;font-weight:600;font-size:16px} #wrapper .main_wrap .lt_img ul.ul_img {position:relative;clear:both;margin:0;padding:0;list-style:none;height:auto} #wrapper .main_wrap .lt_img ul.ul_img:after {clear:both} #wrapper .main_wrap .lt_img ul.ul_img li{position:relative;float:left;width:50%;margin:0 auto;text-align:center;padding:0;height:auto} #wrapper .main_wrap .lt_img ul.ul_img li span{position:absolute;overflow:hidden;display:block;width:98%;padding:1% 0;height:auto;left:1%;bottom:8px;background:#182b55;margin:0 auto;z-index:9999;color:#fff;opacity:0.95} #wrapper .main_wrap .lt_img ul.ul_img li img{width:98%;margin:0 auto;padding:0;cursor:pointer;height:auto} #wrapper .main_wrap .lt_img ul.ul_img li img:hover{opacity:0.75} /* 최근게시물의 구성원 끝*/ /*최근게시물의 이미지갤러리*/ #wrapper .main_wrap .lt_img ul.ul_gallery {position:relative;clear:both;margin:0;padding:0;list-style:none;height:auto} #wrapper .main_wrap .lt_img ul.ul_gallery:after {clear:both} #wrapper .main_wrap .lt_img ul.ul_gallery li{position:relative;float:left;width:50%;margin:0 auto;text-align:center;padding:0;height:auto} #wrapper .main_wrap .lt_img ul.ul_gallery li span{position:absolute;overflow:hidden;display:block;width:98%;padding:1% 0;height:auto;left:1%;bottom:8px;background:#444;margin:0 auto;z-index:9999;color:#fff;opacity:0.8} #wrapper .main_wrap .lt_img ul.ul_gallery li img{width:98%;margin:0 auto;padding:0;cursor:pointer;height:auto} /*최근게시물의 이미지갤러리 끝*/ /*최근게시물의 이미지갤러리2*/ #wrapper .main_wrap .lt_img ul.ul_gallery2 {clear:both;position:relative;clear:both;margin:0;padding:0;list-style:none;height:auto;overflow:hidden} #wrapper .main_wrap .lt_img ul.ul_gallery2:after {clear:both} #wrapper .main_wrap .lt_img ul.ul_gallery2 li:nth-child(odd){clear:both;position:relative;float:left;width:40%;margin:0 auto;text-align:center;padding:0;height:auto;overflow:hidden} #wrapper .main_wrap .lt_img ul.ul_gallery2 li:nth-child(even){position:relative;float:right;width:58.5%;margin:0 auto;text-align:left;padding:0;height:auto;overflow:hidden} #wrapper .main_wrap .lt_img ul.ul_gallery2 li:nth-child(even):after{clear:both} #wrapper .main_wrap .lt_img ul.ul_gallery2 li img{width:98%;margin:0 auto;padding:0;cursor:pointer;height:auto;padding-right:10px} /*최근게시물의 이미지갤러리2 끝*/ }