/******** 레이아웃 ********/ #wrap {width:100%;margin:0 auto;min-width:350px;} .inner { width:1350px; margin:0 auto; padding:0 0; } /******** 메뉴 ********/ /* 상단메뉴 */ #header{position:fixed;width:100%;height:90px;border-bottom:1px solid rgba(255,255,255,0.5);z-index:100;} #header .innercon {min-width:1350px;max-width:1600px;margin:0 auto} #header h1{float:left;margin:25px 0 20px 10px;background:url('../../img/dmedi/logo.png') no-repeat;width:250px;text-indent:-9999px;} /* 로고 */ #header h1 a {display:block;} #header .lnb{z-index:1;float:left;width:75%} #header .lnb ul{width:800px;margin:0 auto;} #header .lnb li{position:relative;float:left;width:160px;z-index:1} #header .lnb li > a{position:relative;display:block;text-align:center;font-size:17px;color:#fff;line-height:90px;height:90px} #header .lnb li > a i{position:absolute;background:#fff;height:2px;width:0%;left:50%;margin-left:0%;bottom:0;} #header .lnb li > a:hover i, #header .lnb li.on > a i{background:#22742e;width:60%;margin-left:-30%;transition:0.3s} #header .lnb li:first-child dl{border-left:0} #header .lnb .sub{padding:20px 0;position:absolute;width:100%;display:none} #header .lnb .sub dl{border-left:1px solid #ddd;height:140px;} #header .lnb .sub dd{text-align:center;padding:5px 0} #header .lnb .sub dd a{color:#777;font-size:13px} #header .lnb .sub dd a:hover{color:#223f74;font-weight:bold;} #header .lnb .bg{position:absolute;width:100%;top:90px;left:0;background:#fff;border-bottom:1px solid #ddd;height:180px;display:none} #header .lang{float:right;color:#fff; margin-right:10px;padding-top:35px;} #header .lang a{color:#fff;margin:0 5px;} #header .lang a.full_btn{display:inline-block;width:14px;height:12px;vertical-align:middle;background:url('../../img/dmedi/full_btn.png') no-repeat center;margin-left:30px;} /* on */ #header.on{background:#fff;border-bottom:1px solid #ddd;} #header.on h1{background:url('../../img/dmedi/logo_on.png') no-repeat} /* 로고ON */ #header.on .lnb li > a{color:#141414} #header.on .lang{color:#444;padding-top:35px;} #header.on .lang a{color:#141414;} #header.on .lang .full_btn{background:url('../../img/dmedi/full_btn_on.png') no-repeat center} /* 전체메뉴 */ #full{position:fixed;width:100%;min-width:1300px;height:100%;left:0;top:0;background:rgba(0,18,76,0.97);z-index:200;display:none} #full.on{display:block} #full .close{position:absolute;right:65px;top:45px;cursor:pointer} #full .inner{width:80%;margin:100px auto 0} #full .inner li > a{display:block;font-size:32px;color:#fff;line-height:90px;border-bottom:1px solid #576389} #full .inner li{float:left;width:16%;margin:0 2%} #full .inner dl{padding:20px 0 20px 20px} #full .inner dd > a{display:block;line-height:50px;color:#fff;font-size:19px;background:url('../../img/dmedi/blt_cir.png') no-repeat 0 center;padding-left:20px} #full .inner dd a:hover{color:#0091d7;background:url('../../img/dmedi/blt_cir_on.png') no-repeat 0 center} #full .inner dd .d3{padding:10px 0 10px 20px} #full .inner dd .d3 a{display:block;line-height:35px;font-size:17px;color:#fff; background:url('../../img/dmedi/blt_rect.png') no-repeat 0 center;padding-left:15px} #full .inner dd .d3 a:hover{color:#0091d7} /******** 메인이미지 ********/ #visual {position:relative;margin:0 auto 0px;background:#ffffff;} #cont .slider_container { text-align:center; margin:0 auto;overflow:hidden;background:#000; /*height:760px;*/ position:relative;} #cont .slider_container ul { margin: 0; padding: 0;} #cont .slider_container ul li {display:none; list-style:none;} #cont .slider_container ul li img { min-width:1920px; width:100%;height:auto; min-height:760px; display:block;} #cont .slider_container ul li:first-child { display: block;} #cont .slider_container .prev_slide, #cont .slider_container .next_slide {top:50%;width:40px;opacity:0.5;height:40px;cursor:pointer;background:#fff; margin-top:-13px; position:absolute; border-radius:20px;} #cont .slider_container .prev_slide i, #cont .slider_container .next_slide i {margin-top:7px;font-size: 25px;} #cont .slider_container .prev_slide .fa-angle-left, #cont .slider_container .next_slide .fa-angle-left { margin-right:4px; } #cont .slider_container .prev_slide .fa-angle-right, #cont .slider_container .next_slide .fa-angle-right { margin-left:4px; } #cont .slider_container .prev_slide {left: 16px;} #cont .slider_container .next_slide {right: 16px;} #cont .slider_container .buttons { display:none;left: 0;right: 0; bottom: 16px; text-align: center; position: absolute;} #cont .slider_container .buttons span { width:16px; height:16px; opacity:0.5;margin:0 10px;cursor:pointer;background:#fff;border-radius:8px;display:inline-block;box-sizing:border-box;} #cont .slider_container .buttons .current_slide_counter { opacity: 1; } #cont .slider_container .play_pause {top:15px;right:15px;position:absolute;} #cont .slider_container .play_pause i {color:#fff;opacity:0.5; cursor:pointer;} /* 메인 텍스트 */ .caption { position:absolute; left:50%; top: 270px; text-align: center; margin:0 0 0 -200px; padding:80px 25px; border:8px solid #fff; background: rgba(0, 0, 0, 0.5);} .caption h2, .caption h3, .caption p { text-align:center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); line-height: 1.2; margin: 0 auto 14px; color: #ffffff; text-align:center; letter-spacing:-0.5px;} .caption h2 { font-size: 45px; font-weight: bold; font-family: 'Open Sans Hebrew Condensed', sans-serif; } .caption h3 { font-size: 40px; font-weight: bold; letter-spacing:-1.5px;} .caption p { font-size: 12px; line-height: 1.4;} .caption .cd-btn:hover { background-color: #d44457; } /* 버튼 */ #arrow_btn { display:none; position:absolute; width:104px; height:90px; left:50%; bottom:70px;text-align:center; z-index:5; margin:0 0 0 -52px; cursor: pointer; } .moveimg1 { position:absolute; top:0px; left:50%; margin:0 0 0 -52px;-webkit-animation: ov_move1 5s infinite;-moz-animation: ov_move1 5s infinite;-o-animation: ov_move1 5s infinite;animation: ov_move1 5s infinite; } #arrow_btn span {display:block;height:30px;color:#fff;font-size:14px} @keyframes ov_move1 { 0% {top:-30px;} 25% {top:0px;} 50% {top:-15px;} 75% {top:0px;} 100% {top:-30px;} } /******** 메인컨텐츠 ********/ /* 메인페이지 4단배너 */ #main_banner_1 {position:relative;width:1350px;margin:0 auto;padding:70px 0 90px;overflow:hidden;} #main_banner_1 .ti {text-align:center;letter-spacing:-1;color:#000;line-height:2} #main_banner_1 h2 {font-size:45px;} #main_banner_1 p {font-size:18px;} #main_banner_1 ul li {position:relative;float:left;margin:70px 0 0 28px;width:419px;height:478px;background:rgba(0,0,0,1);overflow:hidden} #main_banner_1 ul li:first-child {margin-left:0px;} #main_banner_1 ul li a {position:absolute;display:block;text-align:center;width:419px;height:478px;top:0px;left:0px;color:#fff} #main_banner_1 ul li span {display:block;} #main_banner_1 ul li .tit {margin-top:35px;font-size:20px;line-height:2;font-weight:bold} #main_banner_1 ul li .txt {font-size:14px} #main_banner_1 ul li img {opacity: 1;-webkit-transition:0.3s ease-in-out;transition: .3s ease-in-out} #main_banner_1 ul li:hover img {opacity: .7} #main_banner_1 ul li:hover {z-index:10;} #main_banner_1 ul li:hover:before {content:"";position:absolute;bottom:0;right:0;z-index:20;border-width:0 0px 70px 70px;border-style: solid;border-color: #fff transparent} #main_banner_1 ul li .more {position:absolute; right:10px; bottom:10px; width:20px; height:20px; z-index:30;} #main_banner_1 ul li .more:before {position:absolute; left:50%; top:0; width:4px; height:100%; margin-left:-2px; background-color:#fff; content:''; transform:rotate(0deg); transition:all .2s ease;} #main_banner_1 ul li .more span {position:absolute; left:0; top:50%; width:100%; height:4px; margin-top:-2px; background-color:#fff; content:''; transform:rotate(0deg); transition:all .2s ease;} #main_banner_1 ul li:hover .more:before, #main_banner_1 ul li:hover .more:focus:before, #main_banner_1 ul li:hover .more:active:before, #main_banner_1 ul li:hover .more:hover span, #main_banner_1 ul li:hover .more:focus span, #main_banner_1 ul li:hover .more:active span, #main_banner_1 ul li:hover .more span {transform:rotate(180deg); background-color:#393939;} /* 소개 영역 */ #introduce {height:700px;font-size:0; background:url('../../img/dmedi/business_bg.jpg') center center no-repeat; padding:100px 20px 10px 20px; margin:0 auto;} #introduce h3 {color:#FFF; font-size:45px; line-height:80px; font-weight:600; padding-bottom:10px;text-align:center; } #introduce p {color:#FFF;font-size:18px;text-align:center;} #introduce .intro-box {padding-top:50px;text-align:center; } #introduce .intro-box li {display:inline-block; padding-right:60px;text-align:center; } #introduce .intro-box li:last-child {padding-right:0px;} #introduce .intro-box i {font-size:60px; padding-bottom:20px; color:#333;text-align:center; } #introduce .intro-box h4 {font-size:20px; font-weight:400;text-align:center; color:#fff;} /* 메인페이지 시공사례 */ #main_board {position:relative;width:100%;padding:120px 0 150px;overflow:hidden;background:#ececec;min-width:1350px;} #main_board .ti {text-align:center;letter-spacing:1;color:#000;line-height:2;} #main_board h2 {font-size:32px;} #main_board p {font-size:18px;} #main_board .main_review {margin-top:50px;} #main_board .board_output {text-align:center;} /* 메인페이지 뉴스 */ #main_news {position:relative;width:100%;padding:20px 0 90px;overflow:hidden; min-width:1350px;} #main_news .ti {text-align:center;letter-spacing:-1;color:#000;line-height:2;} #main_news h2 {font-size:32px;} #main_news p {font-size:18px;} #main_news .main_notice, #main_news .main_video,#main_news .main_customer {padding:30px;height:300px;float:left;margin-top:20px;} #main_news .main_notice{width:450px;margin-right:15px;border:1px solid #c1c1c1;} #main_news .main_video {width:320px;margin-right:15px;background:#555555;} #main_news .main_customer {width:320px;border:1px solid #c1c1c1;} #main_news h3 {position:relative;} #main_news h3 a {display:block;} #main_news .main_notice h3 a {border-bottom:1px solid #959595;padding-bottom:10px} #main_news .main_notice h3 a, #main_news .main_customer h3 a {position:relative;font-size:20px;margin-left:10px;color:#000} #main_news .main_notice .board_output {margin-top:20px;} #main_news .main_notice .board_output a {padding:10px;font-size:15px !important;line-height:2.5;} /* 메인페이지 동영상 및 고객센터 */ #main_news .main_video h3 a {position:relative;line-height:30px;color:#fff;font-size:20px;} #main_news .main_video iframe {margin-top:15px;} #main_news .main_customer .tel {margin:20px 0 0 -10px;} #main_news .main_customer .txt { padding:10px; font-size:12px;line-height:25px; font-family:굴림;} #main_news .main_customer .kakao {border-top:1px solid #ededed;padding:20px 0 0;} #main_news .mo_customer {display:none;} #main_news .more {position:absolute; right:0px; top:10px; width:18px; height:18px; z-index:30;} #main_news .more:before {position:absolute; left:50%; top:0; width:4px; height:100%; margin-left:-2px; background-color:#333; content:''; transform:rotate(0deg); transition:all .2s ease;} #main_news .more span {position:absolute; left:0; top:50%; width:100%; height:4px; margin-top:-2px; background-color:#333; content:''; transform:rotate(0deg); transition:all .2s ease;} #main_news a:hover .more:before, #main_news a:hover .more:focus:before, #main_news a:hover .more:active:before, #main_news a:hover .more:hover span, #main_news a:hover .more:focus span, #main_news a:hover .more:active span, #main_news a:hover .more span {transform:rotate(180deg);} #main_news .left .more:before, #main_news .left .more span {background-color:#666;} /* 메인페이지 파트너 */ #partner { padding-top:20px;padding-bottom:20px;background:#eceaea;} #partner h2 { text-align:center;font-size:40px;margin-bottom:50px} #partner h2 span {color:#145096} #partner ul {margin-left:200px;} /******** 풋터 ********/ /* 하단정보 */ footer {clear:both; width:100%; min-width:1350px; margin:0 auto; text-align:left; height:170px; background:#232323 url(../../img/footer_bg.jpg) repeat-x; } .f1 {position:relative; width:1350px; height:150px;margin: 0 auto; padding-top:15px;} .flink {position:relative;width:1350px;height:30px;margin-left:15px;} .flink a {line-height:30px;color:#c5c4c4;margin-left:7px; } .f2 {position:relative; width:1335px;float:left; height:120px;margin: 0 auto 0 15px; } footer .snsbtn {position:absolute;width:150px; height:25px;top:10px;right:0px;z-index:59;} /* 회사정보 */ .f2 h2 {width:250px;float:left; margin-top:10px;} .copy {position:relative;width:800px; float:left; height:100px; color:#c5c4c4; margin:10px 0 0; padding:0px 0;} .copy {padding:10px 5px 0 0px;font-size:12px;color:#848484;line-height:20px;} .copy a:link{padding:10px 5px 0 0px;font-size:12px;color:#848484;text-decoration:none; font-weight:bold;vertical-align:sub;} .copy a:visited{padding:10px 5px 0 0px;font-size:12px;color:#848484;text-decoration:none; font-weight:bold;vertical-align:sub;} .copy a:hover{padding:10px 5px 0 0px;font-size:12px;color:#ffffff;text-decoration:none; font-weight:bold;vertical-align:sub;} /******** 우측퀵레이어 ********/ .p_quick {position: fixed; top: 250px; width: 40px; right:3%; text-align: center; z-index: 100;} .p_quick li {position: relative;margin-bottom: 10px;} .p_quick a img {padding-top:7px;} .p_quick a {display: block; width: 40px; height: 40px; line-height: 40px; border-radius: 40px;} .p_quick a:hover:after {display: block; position: absolute; left: 50%; top: 50%; margin: -22px 0 0 -22px; width: 100%; height: 100%; border-radius: 100%; border: 2px solid #0091d7; content:""; animation: lms-circle 1s ease infinite;} .p_quick .btn {margin-top:0px;} .p_quick li a {color:#fff;background-color: #0091d7; } .p_quick li a:hover { color:#333333; background-color:#0073ab; /*transition: all 0.1s ease;*/} @keyframes lms-circle { 100% {transform: scale(1.2); opacity: 0;} } /******** 서브페이지 ********/ /* 서브메인이미지 */ #svisual01 {position:relative;width:100%;height:255px;padding:90px 0 0;margin:0px auto 0px;background:url('../../img/dmedi/svi01.jpg') no-repeat center bottom;} #svisual01 h2, #svisual01 p {text-align:center; color:#fff;} #svisual01 h2 {font-size: 40px; font-weight: bold; padding-top:65px;} #svisual01 p { font-size: 16px; line-height: 1.4;margin-top:25px;} #svisual02 {position:relative;width:100%;height:255px;padding:90px 0 0;margin:0px auto 0px;background:url('../../img/dmedi/svi02.jpg') no-repeat center bottom;} #svisual02 h2, #svisual02 p {text-align:center; color:#fff;} #svisual02 h2 {font-size: 40px; font-weight: bold; padding-top:65px;} #svisual02 p { font-size: 16px; line-height: 1.4;margin-top:25px;} #svisual03 {position:relative;width:100%;height:255px;padding:90px 0 0;margin:0px auto 0px;background:url('../../img/dmedi/svi03.jpg') no-repeat center bottom;} #svisual03 h2, #svisual03 p {text-align:center; color:#fff;} #svisual03 h2 {font-size: 40px; font-weight: bold; padding-top:65px;} #svisual03 p { font-size: 16px; line-height: 1.4;margin-top:25px;} #svisual04 {position:relative;width:100%;height:255px;padding:90px 0 0;margin:0px auto 0px;background:url('../../img/dmedi/svi04.jpg') no-repeat center bottom;} #svisual04 h2, #svisual04 p {text-align:center; color:#fff;} #svisual04 h2 {font-size: 40px; font-weight: bold; padding-top:65px;} #svisual04 p { font-size: 16px; line-height: 1.4;margin-top:25px;} #svisual05 {position:relative;width:100%;height:255px;padding:90px 0 0;margin:0px auto 0px;background:url('../../img/dmedi/svi05.jpg') no-repeat center bottom;} #svisual05 h2, #svisual05 p {text-align:center; color:#fff;} #svisual05 h2 {font-size: 40px; font-weight: bold; padding-top:65px;} #svisual05 p { font-size: 16px; line-height: 1.4;margin-top:25px;} /************************** * 서브 카테고리 버튼 추가 ***************************/ .title p{width:1280px; margin:0 auto; font-size:14px; text-align:center; padding-bottom:30px;} .btn.btn-black.btn-empty { display:inline-block; width:15%; vertical-align:top; margin:1px; padding:7px; background-color: #eee; color: #171717; border: solid 1px #eee; border-color: #eee; } .btn.btn-black:hover { color: #FFF; background-color: #444; border-color: #444; } @media screen and (max-width:1600px) { /*탭고정*/ } @media screen and (max-width:1540px) { /*탭고정*/ } @media screen and (max-width:1400px) { /* 우측 배너 영역 */ /*탭고정*/ } @media screen and (max-width:1280px) { /*탭고정*/ } @media screen and (max-width:768px) { } @media screen and (max-width:480px) { /*탭고정*/ .title p{max-width:340px; margin:0 auto;display:inline-block; font-size:13px; text-align:center; } .btn.btn-black.btn-empty {display:inline-block; width:48%;text-align:center; padding:7px 0; } } /* 레이아웃 */ .scon {width:1350px;margin:0 auto;padding:50px 0 50px;} /* 서브타이틀 */ .scon h2 {margin:0 0 10px;padding:0 0 27px;color:#000;font-size:26px;font-weight:normal;text-align:center;} /* 이동 경로 */ #route {width:100%;height:39px;background:#fff;border-bottom:1px solid #cccccc;margin:0 auto;} #route .page {position:relative;width:1350px;height:39px;margin:0 auto;border-left:1px solid #ccc;border-right:1px solid #ccc;box-sizing:border-box;} #route .page span {height:39px;width:280px;display:inline-block;background:url('../../img/dmedi/route-arrow.png') no-repeat 260px 17px;color:#777;font-size:13px;line-height:42px;border-right:1px solid #ccc;text-indent:15px;} #route .page span a {color:#777;width:100%;height:100%;display:block;} #route .page span:first-child {width:45px;background:none;} #route .page span:first-child img {margin:12px 0px;} #route .sns {display:none; position:absolute;width:130px;right:0px;top:7px;margin:0 auto;} #route .sns ul li {float:left; margin-left:10px;} #route .this {position:absolute;width:200px;left:70px;top:0px;line-height:42px;z-index:99;font-size:15px;} #route .this1 {position:absolute;width:200px;left:370px;top:0px;line-height:42px;z-index:99;font-size:15px;} /* 컨텐츠 텍스트 */ .pagecon .s1 {width:100%;line-height:40px;font-size:24px;color:#272626;font-weight:bold;letter-spacing:-1px;text-align:center;} .pagecon .s2 {width:100%;line-height:40px;font-size:17px;color:#8c8b8b;font-weight:500;letter-spacing:-1px;text-align:center; margin-bottom:30px;} .pagecon .simg {text-align:center; margin-bottom:30px; width:100%;} .pagecon .simg img {max-width:100%;} .pagecon .stext {width:96%;margin:0 2% 0 2%;line-height:190%;font-size:15px;color:#2c2c2c;font-weight:400;letter-spacing:-1px;text-align:left; margin-bottom:30px;} .pagecon .stext2 {width:96%;margin:0 2% 0 2%;line-height:2.3;font-size:17px;color:#2c2c2c;font-weight:400;text-align:left; margin-bottom:30px;} .pagecon .left {width:48%;float:left;} .pagecon .right {width:48%; float:right;} /* 갤러리게시판 */ #post_area {padding:50px 1% !important; width:98% !important; max-width:1300px; } /*********************** 해상도 1350 조절시 축소 ************************/ @media screen and (max-width:1350px){ /******** 레이아웃 ********/ #wrap { min-width:1000px;} .inner { width:100%; max-width:1000px;} .container { width:100%;} #container {width:100%; max-width:1000px; } #container > #content { width:100%;margin:0 auto;} /******** 메뉴 ********/ /* 메뉴 */ #header .innercon {width:100%; max-width:1000px;} /* 메뉴 상세 */ #header .innercon {min-width:1000px;max-width:1200px;margin:0 auto} #header .lnb ul{width:700px;} #header .lnb li{width:120px;} /* 전체메뉴 */ #full{position:fixed;width:100%;min-width:1000px;height:100%;left:0;top:0;background:rgba(0,18,76,0.97);z-index:200;display:none} #full.on{display:block} #full .close{position:absolute;right:65px;top:45px;cursor:pointer} #full .inner{width:80%;margin:100px auto 0} #full .inner li > a{display:block;font-size:32px;color:#fff;line-height:90px;border-bottom:1px solid #576389} #full .inner li{float:left;width:16%;margin:0 2%} #full .inner dl{padding:20px 0 20px 20px} #full .inner dd > a {display:block;line-height:50px;color:#fff;font-size:15px;background:url('../../img/dmedi/blt_cir.png') no-repeat 0 center;padding-left:20px} #full .inner dd a:hover{color:#0091d7;background:url('../../img/dmedi/blt_cir_on.png') no-repeat 0 center} #full .inner dd .d3{padding:10px 0 10px 20px} #full .inner dd .d3 a{display:block;line-height:35px;font-size:14px;color:#fff;background:url('../../img/dmedi/blt_rect.png') no-repeat 0 center;padding-left:10px} #full .inner dd .d3 a:hover{color:#0091d7} /* 하단정보 */ footer {clear:both; width:100%; min-width:280px; margin:0 auto;} .f1 {position:relative; width:100%; height:150px;margin: 0 auto; padding-top:15px;} .flink {position:relative;width:95%;height:30px;} .flink a {line-height:30px;color:#c5c4c4;margin-left:7px; } .f2 {position:relative; width:100%;float:left; height:120px;margin: 0 auto; } /* 회사정보 */ .f2 h2 {width:20%;float:left; margin-top:10px;margin-left:15px} .f2 h2 img {max-width:100%;} .copy {position:relative;width:70%; float:left; height:100px; color:#c5c4c4; margin:10px 0 0; padding:0px 0;} .copy {padding:10px 5px 0 0px;font-size:12px;color:#848484;line-height:20px;} .copy a:link{padding:10px 5px 0 0px;font-size:12px;color:#848484;text-decoration:none; font-weight:bold;vertical-align:sub;} .copy a:visited{padding:10px 5px 0 0px;font-size:12px;color:#848484;text-decoration:none; font-weight:bold;vertical-align:sub;} .copy a:hover{padding:10px 5px 0 0px;font-size:12px;color:#ffffff;text-decoration:none; font-weight:bold;vertical-align:sub;} /******** 메인페이지 ********/ /* 메인페이지 4단배너 */ #main_banner_1 {width:100%;max-width:1000px; padding:60px 0 70px;} #main_banner_1 ul li {width:24%;height:auto;margin:70px 0.5% 0 0.5%;background:none;} #main_banner_1 ul li a {width:100%;height:100%;} #main_banner_1 ul li img {width:100%} /* 메인페이지 회사소개 */ #main_company {width:100%; min-width:280px;} #main_company .left {width:55%;} #main_company .right {width:45%;} #main_company .right iframe {width:100%;} #main_company img {max-width:100%;} /*메인페이지 시공사례 */ #main_board {width:100%; min-width:280px; padding:60px 0 70px;} #main_board .main_review {margin-top:50px;} #main_board .main_review img {width:100%; height:auto; max-height:218px;} /* 메인페이지 NEWS */ #main_news {position:relative;width:100%;min-width:280px;padding:60px 0 70px;} #main_news .main_notice{width:78%;margin:50px auto;float:none} #main_news .main_video {width:490px;margin:15px 0px 0 0;background:#555555;} #main_news .main_customer {width:233px;border:1px solid #c1c1c1;margin-top:15px;} #main_news .vicu {width:85%; margin:0 auto; padding:0px 0; overflow:hidden;} #main_news .main_video h3 a {position:relative;line-height:30px;color:#fff;font-size:25px;} #main_news .main_video iframe {width:100%;} /******** 서브페이지 ********/ /* 레이아웃 */ .scon {width:1000px;margin:0 auto;padding:50px 0 50px;} /* 이동 경로 */ #route .page {width:1000px;} /* 서브페이지 컨텐츠이미지 */ .pagecon img {max-width:100%;} /* 갤러리게시판 */ #post_area {max-width:1000px; } } /*********************** 해상도 1024 조절시 축소 ************************/ @media screen and (max-width:1024px){ /******** 레이아웃 ********/ #wrap { min-width:280px;width:100%;} .inner { width:100%;} .container { width:100%;} #container {width:100%;} #content {width:100%;overflow:hidden;} /******** 메뉴 ********/ #header{position:fixed;width:100%;height:90px;border-bottom:1px solid rgba(255,255,255,0.5);z-index:100;transition:0.3s} #header .innercon {min-width:100%; margin:0 auto} #header h1{float:left;} #header .lnb{z-index:1;float:right;width:65%;margin:0px 0 0;} #header .lnb ul{width:100%;margin:0 auto} #header .lnb li{width:20%;} /* 메뉴 개수에 따라 % 수치를 변경해주세요. */ #header .lnb li > a{line-height:90px;height:90px} #header .lnb li > a i{position:absolute;background:#fff;height:2px;width:0%;left:50%;margin-left:0%;bottom:0;transition:0.3s} #header .lnb li > a:hover i, #header .lnb li.on > a i{background:#000;width:60%;margin-left:-30%;transition:0.3s} #header .lnb li:first-child dl{border-left:0} #header .lnb .sub{padding:20px 0;position:absolute;width:100%;display:none} #header .lnb .sub dl{border-left:1px solid #ddd;height:100px;} #header .lnb .sub dd{text-align:center;padding:5px 0} #header .lnb .sub dd a{color:#777;font-size:13px} #header .lnb .sub dd a:hover{color:#ff7357} #header .lnb .bg{position:absolute;width:100%;top:90px;left:0;background:#fff;border-bottom:1px solid #ddd;height:160px;display:none} #header .lang {} #header .lang a.full_btn{display:none;} #header.on .lang .full_btn{display:none;} /******** 메인컨텐츠 ********/ /* 메인페이지 NEWS */ #main_news {position:relative;width:100%;min-width:280px;padding:60px 0 70px;} #main_news .main_notice .board_output {margin-top:20px;} #main_news .main_notice .board_output a {padding:10px;font-size:15px !important;line-height:2.5;} #main_news .main_video h3 a {position:relative;line-height:30px;color:#fff;font-size:25px;} #main_news .main_video iframe {width:100%;} #main_news .main_customer .tel { float:left; margin:20px 0 0 -10px;} #main_news .main_customer .txt { float:left; padding:0px; margin:20px 0 0 30px; font-size:12px; line-height:15px; font-family:굴림;} #main_news .main_customer .kakao {float:left; border-top:none;padding:0px;margin:20px 0 0 30px; } #main_news .main_video {width:50%;} #main_news .main_customer {width:30%;min-width:235px;float:right} /* 소개 영역 */ #introduce {padding:60px 20px;} #introduce h3 {font-size:28px; line-height:36px; } #introduce .intro-box {padding-top:50px;} #introduce .intro-box li {display:inline-block; padding-right:30px;} #introduce .intro-box li:last-child {padding-right:0px;} #introduce .intro-box i {font-size:36px; padding-bottom:10px;} #introduce .intro-box h4 {font-size:16px;} a.intro-btn {width:140px; height:140px;} /******** 풋터 ********/ #footer .container .policy { width:500px; float:left; padding: 30px 0; font-size: 11px; line-height: 20px;} /******** 서브페이지 ********/ /* 레이아웃 */ .scon {width:100%; max-width:1000px;margin:0 auto;padding:50px 0 50px;} /* 서브타이틀 */ .scon h2 {margin:0 0 10px;padding:0 0 27px;color:#000;font-size:26px;font-weight:normal;} /* 이동 경로 */ #route {width:100%;height:39px;background:#ffff;border-bottom:1px solid #cccccc;margin:0 auto;} #route .page {position:relative;width:100%;height:39px;margin:0 auto;border-left:1px solid #ccc;border-right:1px solid #ccc;box-sizing:border-box;} #route .page span {height:39px;width:280px;display:inline-block;background:url('../../img/dmedi/route-arrow.png') no-repeat 260px 17px;color:#777;font-size:13px;line-height:42px;border-right:1px solid #ccc;text-indent:15px;} #route .page span a {color:#777;width:100%;height:100%;dispaly:block;} #route .page span:first-child {width:45px;background:none;} #route .page span:first-child img {margin:12px 0px;} #route .sns {display:none; position:absolute;width:130px;right:0px;top:7px;margin:0 auto;} #route .sns ul li { float:left; margin-left:10px;} #route .this {position:absolute;width:200px;left:70px;top:0px;line-height:42px;z-index:99;font-size:13px;} #route .this1 {position:absolute;width:200px;left:220px;top:0px;line-height:42px;z-index:99; font-size:13px;} /* 컨텐츠 텍스트 */ .pagecon .s1 {width:100%;line-height:40px;font-size:24px;color:#272626;font-weight:bold;letter-spacing:-1px;text-align:center;} .pagecon .s2 {width:100%;line-height:40px;font-size:17px;color:#8c8b8b;font-weight:500;letter-spacing:-1px;text-align:center; margin-bottom:30px;} .pagecon .simg {text-align:center; margin-bottom:30px; width:100%;} .pagecon .simg img {max-width:100%;} .pagecon .stext {width:96%;margin:0 2% 0 2%;line-height:190%;font-size:15px;color:#2c2c2c;font-weight:400;letter-spacing:-1px;text-align:left; margin-bottom:30px;} .pagecon .stext2 {width:96%;margin:0 2% 0 2%;line-height:2.3;font-size:17px;color:#2c2c2c;font-weight:400;text-align:left; margin-bottom:30px;} .pagecon .left {width:48%;float:left;} .pagecon .right {width:48%; float:right;} /* 갤러리게시판 */ #post_area {max-width:800px; } } /************************ 해상도 900 이하 메뉴 숨김포함 ************************/ @media screen and (max-width:900px){ /******** 메뉴 ********/ #header .lnb {display:none;} #header .lang a.full_btn{display:inline-block;} #header.on .lang .full_btn{display:inline-block;} /* 서브 메뉴 */ #header.sheader {position:relative;} /* 전체메뉴 */ #full{position:fixed;width:100%;min-width:280px;height:100%;left:0;top:0;background:rgba(0,18,76,0.97);z-index:200;display:none} #full.on{display:block} #full .close{position:absolute;right:10px;top:10px;cursor:pointer} #full .inner{width:90%;margin:70px auto 0} #full .inner li > a{display:block; padding:0 0 0 10px;color:#fff;line-height:2;border-bottom:1px solid #576389} #full .inner li{float:left;width:31%;margin:0 1%} #full .inner dl{padding:10px 0 10px 10px} /******** 메인컨텐츠 ********/ /*메인페이지 시공사례 */ #main_board .main_review img {width:100%; height:auto; max-height:193px;} /* 메인페이지 NEWS */ #main_news {position:relative;width:100%;min-width:280px;padding:60px 0 70px;} #main_news .main_notice .board_output {margin-top:20px;} #main_news .main_notice .board_output a {padding:10px;font-size:15px !important;line-height:2.5;} #main_news .main_video {width:40%;} /******** 서브페이지 ********/ /* 컨텐츠 텍스트 */ .pagecon .left {width:100%;float:none;} .pagecon .right {width:100%; float:none;} } /************************ 해상도 640 이하 ( 모바일 ) ************************/ @media screen and (max-width:640px){ /******** 레이아웃 ********/ #wrap { position:relative; width:100%;} #container > #content { padding:0 0 0px;} /******** 메뉴 ********/ /* 로고라인 상단 */ #header {height:70px;margin-top:-10px;} #header h1{background:url('../../img/dmedi/logo.png') no-repeat;width:180px; background-size:contain;} #header.on h1{background:url('../../img/dmedi/logo_on.png') no-repeat;width:180px; background-size:contain;} #header .lang a.full_btn{display:inline-block;width:14px;height:12px;vertical-align:middle;background:url('../../img/dmedi/full_btn.png') no-repeat center;margin-left:20px} /* 전체메뉴 */ #full{position:fixed;width:100%;min-width:280px;height:100%;left:0;top:0;background:rgba(0,18,76,0.97);z-index:200;display:none} #full.on{display:block} #full .close{position:absolute;right:10px;top:10px;cursor:pointer} #full .inner{width:90%;margin:70px auto 0} #full .inner li > a{display:block;font-size:15px;padding:0 0 0 10px;color:#fff;line-height:2;border-bottom:1px solid #576389} #full .inner li{float:left;width:31%;margin:0 1%} #full .inner dl{padding:10px 0 10px 10px} #full .inner dd > a{display:block;line-height:30px;color:#fff;font-size:12px;background:none;padding-left:0px} #full .inner dd a:hover{color:#0091d7;background:none} #full .inner dd .d3{padding:10px 0 10px 5px} #full .inner dd .d3 a{display:block;line-height:30px;font-size:11px;color:#fff;background:url('../img/dmedi/blt_rect.png') no-repeat 0 center;padding-left:5px} #full .inner dd .d3 a:hover{color:#0091d7} /******** 메인이미지 ********/ #cont .slider_container {height:100%;} #cont .slider_container ul li img { min-width:780px;width:100%;height:auto;min-height:400px;margin-left:-200px;text-align:center;} // 모바일 이미지 좌우 조정은 margin-left:의 수치를 변경하시면됩니다. #cont .slider_container .prev_slide, #cont .slider_container .next_slide {top:50%;width:40px;opacity:0.2;height:40px;cursor:pointer;background:#fff; margin-top:-13px; position:absolute; border-radius:20px;} #cont .slider_container .prev_slide i, #cont .slider_container .next_slide i {margin-top:7px;font-size: 25px;} #cont .slider_container .prev_slide .fa-angle-left, #cont .slider_container .next_slide .fa-angle-left { margin-right:4px; } #cont .slider_container .prev_slide .fa-angle-right, #cont .slider_container .next_slide .fa-angle-right { margin-left:4px; } #cont .slider_container .prev_slide {left: 16px;} #cont .slider_container .next_slide {right: 16px;} #cont .slider_container .buttons {left: 0;right: 0; bottom: 16px; text-align: center; position: absolute;} #cont .slider_container .buttons span { width:16px; height:16px; opacity:0.5;margin:0 10px;cursor:pointer;background:#fff;border-radius:8px;display:inline-block;box-sizing:border-box;} #cont .slider_container .buttons .current_slide_counter { opacity: 1; } #cont .slider_container .play_pause {top:15px;right:15px;position:absolute;} #cont .slider_container .play_pause i {color:#fff;opacity:0.5; cursor:pointer;} /* 비주얼 텍스트 */ .caption { position:absolute; left:50%; top: 180px; text-align: left; width:220px; margin-left:-120px; padding:30px 10px; border:3px solid #fff; background: rgba(0, 0, 0, 0.5);} .caption h2, .caption h3, .caption p { text-align:center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); line-height: 1.2; margin: 0 auto 14px; color: #ffffff; text-align:center; letter-spacing:-0.5px;} .caption h2 { font-size: 28px; font-weight: bold;} .caption p { font-size: 12px; line-height: 1.4;} /* 버튼 */ #arrow_btn {display:none;} /******** 메인컨텐츠 ********/ /* 메인페이지 4단배너 */ #main_banner_1 {width:100%;margin:0px auto 0;padding:60px 0 0px;} #main_banner_1 ul {margin:20px auto;width:98%;} #main_banner_1 ul li {width:100%;height:auto;margin:20px 0.5% 0 0.5%;} #main_banner_1 ul li a {width:100%;height:auto;} #main_banner_1 ul li img {width:100%} #main_banner_1 ul li:hover:before {display:none;} #main_banner_1 .ti {line-height:1.6;width:80%;margin:0 auto;} #main_banner_1 h2 {font-size:22px;} #main_banner_1 p {font-size:14px;} #main_banner_1 ul li .tit {margin-top:20px;font-size:14px;line-height:2;font-weight:bold} #main_banner_1 ul li .txt {font-size:11px} #main_banner_1 ul li .more {display:none;} /* 서비스 영역 */ #introduce {height:1500px;font-size:0; background:url('../../img/dmedi/business_bg.jpg') ;background-size:cover; padding:50px 20px 50px 20px; margin:20px auto;} #introduce h3 {font-size:20px; line-height:26px; } #introduce p {color:#FFF;font-size:15px;text-align:center;} #introduce .intro-box {padding-top:30px;} #introduce .intro-box li {display:inline-block; padding:10px !important;} #introduce .intro-box i {font-size:30px; padding-bottom:5px;} #introduce .intro-box h4 {font-size:13px;} a.intro-btn {width:120px; height:120px;} /* 메인페이지 회사소개 */ #main_company {height:650px;padding-top:50px;background:url(../../img/dmedi/main_c_bg.jpg); background-size:cover;} #main_company .left {float:none;} #main_company .ti {text-align:right;letter-spacing:-1;color:#fff;line-height:2} #main_company h2 {font-size:22px;} #main_company p {font-size:14px;} #main_company .left {margin-top:20px;} #main_company .left a {display:inline-block;padding-top:20px;padding-left:10px;} #main_company .left .bt {margin-top:0px;} #main_company img {max-width:90%;} #main_company .left .bt img { max-width:70%;} #main_company .right {float:none;} #main_company .right {margin-top:50px;} #main_company .right iframe {width:100%;height:auto;} /* 메인페이지 시공사례 */ #main_board {position:relative;width:100%;margin:60px auto 0px;overflow:hidden} #main_board h2 {font-size:22px;} #main_board p {font-size:14px;} #main_board .main_review {margin-top:20px;} #main_board .main_review li{ float:left;width:32%;text-align:center;margin-left:1%;} #main_board .main_review li:first-child {margin-left:0px} #main_board .main_review .subj {display:block;line-height:1.2;margin-top:10px;font-size:12px} #main_board .main_review li img {width:100%; height:auto; max-height:140px;} /* 메인페이지 NEWS */ #main_news {padding:10px 0 0} #main_news .main_notice { width:90%;height:200px; margin:10px auto 20px; float:none; padding:20px 3%;} #main_news .main_notice .board_output a {font-size:12px !important;} #main_news .more {display:none;} /* 메인페이지 파트너 */ #partner {margin-top:0px} #partner h2 { text-align:center;font-size:22px;margin-bottom:20px} #partner .bx-wrapper img {width:100%;} /******** 풋터 ********/ /* footer */ footer {clear:both; width:100%; min-width:280px; margin:0 auto; text-align:left; height:auto; overflow:hidden; background:#232323 url(../../img/footer_bg.jpg) repeat-x; } .f1 {position:relative; width:100%; height:150px;margin: 0 auto;} .flink {position:relative;height:30px;margin-left:0px;margin-top:10px;} .flink a {line-height:30px;color:#c5c4c4;margin-left:7px; } .f2 {position:relative; width:98%;float:left; height:auto;margin: 0 1%; } footer .snsbtn {position:relative; margin-left:5px; top:5px;} /* 회사정보 */ .f2 h2 {display:none} .copy {position:relative;width:95%; float:left; height:auto; color:#c5c4c4; margin:0px auto; padding:0px 0;} .copy {padding:10px 5px 0 0px;font-size:12px;color:#848484;line-height:20px;} .copy a:link{padding:10px 5px 0 0px;font-size:12px;color:#848484;text-decoration:none; font-weight:bold;vertical-align:sub;} .copy a:visited{padding:10px 5px 0 0px;font-size:12px;color:#848484;text-decoration:none; font-weight:bold;vertical-align:sub;} .copy a:hover{padding:10px 5px 0 0px;font-size:12px;color:#ffffff;text-decoration:none; font-weight:bold;vertical-align:sub;} /******** 우측퀵레이어 ********/ .p_quick {position: fixed; top: 300px; width: 40px; right:1%; text-align: center; z-index: 100;} /******** 서브페이지 ********/ /* 레이아웃 */ .scon {width:96%; max-width:1000px;margin:0 auto;padding:50px 2% 50px;} /* 서브메인이미지 */ #svisual01 {position:relative;width:100%;height:150px;margin:0px auto 0px;background:url('../../img/dmedi/svi01.jpg') no-repeat center; background-size:cover;} #svisual01 h2, #svisual01 p {text-align:center; color:#fff;} #svisual01 h2 {font-size: 26px; font-weight: bold; padding-top:20px;} #svisual01 p {font-size: 12px; line-height: 1.4;margin-top:10px;} #svisual02 {position:relative;width:100%;height:150px;margin:0px auto 0px;background:url('../../img/dmedi/svi02.jpg') no-repeat center; background-size:cover;} #svisual02 h2, #svisual02 p {text-align:center; color:#fff;} #svisual02 h2 {font-size: 26px; font-weight: bold; padding-top:20px;} #svisual02 p {font-size: 12px; line-height: 1.4;margin-top:10px;} #svisual03 {position:relative;width:100%;height:150px;margin:0px auto 0px;background:url('../../img/dmedi/svi03.jpg') no-repeat center; background-size:cover;} #svisual03 h2, #svisual03 p {text-align:center; color:#fff;} #svisual03 h2 {font-size: 26px; font-weight: bold; padding-top:20px;} #svisual03 p {font-size: 12px; line-height: 1.4;margin-top:10px;} #svisual04 {position:relative;width:100%;height:150px;margin:0px auto 0px;background:url('../../img/dmedi/svi04.jpg') no-repeat center; background-size:cover;} #svisual04 h2, #svisual04 p {text-align:center; color:#fff;} #svisual04 h2 {font-size: 26px; font-weight: bold; padding-top:20px;} #svisual04 p {font-size: 12px; line-height: 1.4;margin-top:10px;} #svisual05 {position:relative;width:100%;height:150px;margin:0px auto 0px;background:url('../../img/dmedi/svi05.jpg') no-repeat center; background-size:cover;} #svisual05 h2, #svisual05 p {text-align:center; color:#fff;} #svisual05 h2 {font-size: 26px; font-weight: bold; padding-top:20px;} #svisual05 p {font-size: 12px; line-height: 1.4;margin-top:10px;} #route .page span{width:150px;background:url('../../img/icon/route-arrow.png') no-repeat 150px 17px;border-right:1px solid #ccc;} /* 서브페이지 컨텐츠이미지 */ .pagecon img {max-width:100%;} /* 컨텐츠 텍스트 */ .pagecon .s1 {width:98%;margin:0 auto;line-height:30px;font-size:20px;color:#272626;font-weight:bold;letter-spacing:-1px;text-align:center;} .pagecon .s2 {width:98%;margin:0 auto;line-height:30px;font-size:16px;color:#8c8b8b;font-weight:500;letter-spacing:-1px;text-align:center; margin-bottom:30px;} .pagecon .simg {text-align:center; margin-bottom:30px; width:100%;} .pagecon .simg img {max-width:100%;} .pagecon .stext {width:96%;margin:0 2% 0 2%;line-height:190%;font-size:15px;color:#2c2c2c;font-weight:400;letter-spacing:-1px;text-align:left; margin-bottom:30px;} .pagecon .stext2 {width:96%;margin:0 2% 0 2%;line-height:190%;font-size:15px;color:#2c2c2c;font-weight:400;text-align:left; margin-bottom:30px;} /* 서브페이지 타이틀 */ .etc-page {padding:30px 0 0;} .etc-page h2 {font-size:22px; padding:0 0 0 10px;} /* 갤러리게시판 타이틀 */ .item-display .list ul li .txt a > strong {font-size:13px;} /* 고객센터 좌측메뉴 숨김 */ #side {display:none;} .txt-field {200px;} .board-sorting ul li:after {display:none;} input, textarea {max-width:260px;} } /******************************** 해상도 720 이하 ( 모바일 ) ********************************/ @media screen and (max-width:720px){ /* 메인 타이틀 텍스트크기 */ #main_banner_1 h2, #main_news h2, #main_board h2 {font-size:22px;} /* 뉴스부분 비디오 고객센터 레이아웃변경 */ #main_news .vicu {width:100%;} #main_news .main_video {width:90%; height:auto; float:none;padding:5%;} #main_news .main_video h3 a {font-size:20px;} #main_news .main_video iframe {width:100%; height:auto;} #main_news .main_customer {display:none;} #main_news .mo_customer {clear:both;display:block; margin-top:30px; text-align:center; border-bottom:1px solid #ededed;} #main_news .mo_customer h3 {margin-top:30px} #main_news .mo_customer .tel {margin:20px 0 0 0px;font-size:26px !important;} #main_news .mo_customer .txt { padding:5px 0 0; font-size:12px !important;line-height:20px; font-family:굴림;} #main_news .mo_customer .kakao {padding:10px 0 10px;} /* 갤러리게시판 */ #post_area {max-width:640px; } }