/*reset CSS*/ * { margin:0; padding:0; } li { list-style:none; } a { text-decoration:none; color:#000; } img { border:none; } body { font-family:'Domine'; } /*HEADER(상단부)**********************************************************************************************************************************************************HEADER입니다:)*/ header { width:100%; height:80px; position:relative; background-color:#1d1b17; } /*#header_wrap-메인로고와 상단메뉴를 가운데 놓기위한 상위묶음을 설정*/ #header_wrap { width:1200px; height:100%; position:absolute; left:50%; margin-left:-600px; } /*#logo-메인로고 설정*/ #logo { width:150px; position:absolute; top:10px; left:5%; } #logo img { width:100%; } /*검색*/ #search { width:18.5%; height:30px; position:absolute; top:40px; left:20%; } input:-ms-input-placeholder { color:#0e1b3b; } input::-webkit-input-placeholder { color:#0e1b3b; } input::-moz-placeholder { color:#0e1b3b; } #search input { width:170px; height:100%; padding:10px; border:0; border-radius:7px; outline:none; font-size:14px; float:left; } #search button { width:50px; height:36px; border:0; border-radius:7px; background-color:#0e68ab; outline:none; float:right; color:#fff; } /*#gnb-상단메뉴 설정*/ #gnb { width:450px; height:40px; position:absolute; right:30px; bottom:5px; } #gnb> ul> li { float:left; margin-right:20px; line-height:30px; padding:5px; } #gnb> ul> li:first-child { margin-left:20px; } #gnb> ul> li:last-child { margin-right:0; } #gnb> ul> li:nth-child(3) { position:relative; transition:0.5s; } #gnb> ul> li> a { font-size:1.2em; color:darkgrey; text-decoration:none; transition:0.5s; } /*#gnb-상단메뉴에 마우스 오버했을때 설정*/ #gnb> ul> li:hover> a { color:white; border:none; } /*gnb-상단메뉴 PRODUCTS 하위 메뉴 설정*/ #gnb> ul> li:nth-child(3)>ul { width:150px; position:absolute; left:-20px; text-align:center; background-color:rgba(0, 0, 0, 0.8); z-index:999; } #gnb> ul> li:nth-child(3)>ul> li { margin-bottom:10px; } #gnb> ul> li:nth-child(3)>ul> li:first-child { margin-top:10px; } #gnb> ul> li:nth-child(3)> ul> li> a { color:#555; display:block; transition:0.5s; text-decoration:none; } /*gnb-상단메뉴 PRODUCTS 하위 메뉴 마우스오버*/ #gnb> ul> li:nth-child(3)> ul> li:hover> a { color:white; } /*SUB_gnb설정*/ #menubtn { position:relative; z-index:99999; cursor:pointer; } #menubtn i { width:50px; height:50px; position:absolute; top:5px; right:10px; text-align:center; line-height:50px; font-size:2.5em; color:#808080; } #menubtn i:nth-child(1) { display:none; } #menubtn i:nth-child(2) { display:none; } #sub_gnb { width:100%; height:800px; position:absolute; top:60px; right:0; background-color:rgba(222, 222, 222, 0.8); z-index:99999; display:none; } #sub_gnb> ul { width:80%; margin:150px auto 0 auto; border:5px solid #555; box-sizing:border-box; } #sub_gnb> ul> li { margin-bottom:20px; text-align:center; font-size:1.5em; } #sub_gnb> ul> li:first-child { margin-top:20px; } #sub_gnb> ul> li> a { color:#000; font-weight:bold; text-decoration:none; transition:0.5s; } /*모바일 _검색*/ #m_search { width:70%; height:50px; position:absolute; top:95px; left:15%; } input:-ms-input-placeholder { color:#0e1b3b; } input::-webkit-input-placeholder { color:#0e1b3b; } input::-moz-placeholder { color:#0e1b3b; } #m_search input { width:82%; height:45px; padding:10px; border:0; border-radius:7px; outline:none; font-size:14px; float:left; } #m_search button { width:18%; height:45px; border:0; border-radius:7px; background-color:#0e68ab; outline:none; float:right; color:#fff; } /*SUB_gnb 마우스오버*/ #sub_gnb> ul> li:hover> a { color:#14496c; } /*SECTION(본문부)*********************************************************************************************************************************************************SECTION입니다:)*/ section { width:100%; height:1840px; position:relative; top:0.1px; background-color:#555; } /*메뉴시작!*/ #main_menu { width:12%; height:100%; position:absolute; top:0.1px; left:21.7%; background-color:#1d1b17; } #nav> li { padding-left:20px; padding-bottom:10px; padding-top:10px; font-size:1.1em; } #nav> li> a { text-decoration:none; color:#efefef; transition:0.5s; } #nav> li> a> i { color:#fff; } #nav> li> ul> li { padding-left:20px; padding-bottom:5px; padding-top:8px; font-size:0.9em; } #nav> li> ul> li> a { color:#cecece; } /*마우스오버*/ #nav> li:hover> a { color:#808080; } /*모바일에서 나올 메뉴*/ #m_menu { width:75%; height:100%; position:absolute; top:0; left:-75%; z-index:99999; background-color:#1d1b17; display:none; } #m_menu> ul> li { padding-left:8px; font-size:1.2em; border-bottom:1px solid #363636; box-sizing:border-box; } #m_menu> ul> li:first-child { border-top:1px solid #363636; box-sizing:border-box; } #m_menu> ul> li> a { display:block; padding:15px; color:#efefef; } #m_menu> ul> li> ul> li { padding-left:12px; } #m_menu> ul> li> ul> li> a { display:block; padding:8px; color:#808080; } /*모바일 열고닫는 버튼*/ .s_icon { width:100px; position:fixed; left:3%; top:9.5%; z-index:999; cursor:pointer; color:#fff; padding:2px; display:none; } .s_icon strong { float:left; } .s_icon strong i { color:#ffff00; } .s_icon span { float:right; } .s_icon.select { width:25px; height:55px; position:fixed; top:60px; left:75%; font-size:1.5em; line-height:54px; background-color:#1d1b17; border-top:1px solid #363636; box-sizing:border-box; } /*제품 IMG*/ #img { width:44%; position:absolute; right:22.3%; } #img h2 { position:absolute; top:380px; right:30px; color:#808080; } #img img { width:100%; } /*제품 txt와 왼쪽 오른쪽을 감싸고 있는 WRAP*/ #con_wrap { width:44%; height:1370px; position:absolute; top:470px; right:22.3%; background-color:white; } /*Lightbox내에 도광판 라이트패널*/ #light { width:100%; height:406px; border-bottom:3px solid #808080; box-sizing:border-box; } #light> strong { width:100%; background-color:#111c3c; font-size:1.5em; color:#fff; display:block; padding-left:5px; padding-top:8px; padding-bottom:8px; } .penal { width:25%; height:360px; float:left; text-align:center; border:1px solid #808080; box-sizing:border-box; } .penal a strong { transition:0.5s; } .penal img { width:100%; } .penal a { text-decoration:none; color:#000; } .penal span { font-weight:bold; color:blue; } /*마우스오버*/ .penal a:hover strong { color:#0e68ab; } /*Lightbox내에 패브릭 라이트 박스*/ #fabric { width:100%; height:406px; border-bottom:3px solid #808080; box-sizing:border-box; } #fabric> strong { width:100%; background-color:#111c3c; font-size:1.5em; color:#fff; display:block; padding-left:5px; padding-top:8px; padding-bottom:8px; } .fab { width:25%; height:360px; float:left; text-align:center; border:1px solid #808080; box-sizing:border-box; } .fab a strong { transition:0.5s; } .fab img { width:100%; } .fab a { text-decoration:none; color:#000; } .fab span { font-weight:bold; color:blue; } /*마우스오버*/ .fab a:hover strong { color:#0e68ab; } /*시공사진*/ #s_img { width:100%; } #s_img img { width:100%; } /*FOOTER(푸터부)*********************************************************************************************************************************************************FOOTER입니다:)*/ footer { width:100%; height:300px; position:relative; background-color:#1d1b17; } /*내용 전체를 가운데 놓을 수 있도록 묶음*/ #footer_wrap { width:1100px; height:250px; position:absolute; top:30px; left:50%; margin-left:-550px; } /*FOOTER LOGO설정*/ #footer_logo { width:100px; height:100px; position:absolute; top:50%; left:20px; margin-top:-50px; } #footer_logo img { width:100%; height:100%; } /*ADRESS,TEL,FAX 설정*/ #footer_wrap p { width:500px; position:absolute; top:20%; left:12%; text-align:center; color:#555; } /*SITE MAP 설정*/ #footer_wrap figure { width:150px; position:absolute; top:20%; right:28.5%; } #footer_wrap figure h3 { margin-top:-1px; font-weight:bold; color:#808080; } #footer_wrap figure li { font-size:1.1em; } #footer_wrap figure li a { text-decoration:none; color:#eee; transition:0.5s; } /*SITE MAP 마우스오버*/ #footer_wrap figure li:hover a { color:#808080; } /*COPYRIGHT*/ #footer_wrap span { width:39%; position:absolute; bottom:0; left:50%; margin-left:-17%; color:#303030; } #footer_wrap span strong { color:#555; } /*TOP BTN*/ #top_btn { position:absolute; top:20%; right:15%; font-size:1.2em; } #top_btn a { color:#5f5f5f; display:block; transition:0.5s; } /*TOP BTN 마우스오버*/ #top_btn a:hover { color:#000; } /*미디어쿼리 입니다. -- 미디어쿼리 입니다.*/ /*HD급*/ @media screen and (min-width:1281px) and (max-width:1600px){ /*HEADER(상단부)*/ header { height:70px; } /*#header_wrap-메인로고와 상단메뉴를 가운데 놓기위한 상위묶음을 설정*/ #header_wrap { width:100%; left:0; margin-left:0; } /*#logo-메인로고 설정*/ #logo { width:125px; position:absolute; top:10px; left:5%; } #logo img { width:100%; } /*검색*/ #search { width:17%; height:40px; position:absolute; top:25px; left:20%; } /*SECTION(본문부)*/ section { width:100%; height:1600px; position:relative; top:0.1px; background-color:#555; } /*메뉴시작!*/ #main_menu { width:18%; height:100%; position:absolute; top:0.1px; left:16.7%; background-color:#1d1b17; } #nav> li { padding-left:20px; padding-bottom:10px; padding-top:10px; font-size:1em; } #nav> li> a { text-decoration:none; color:#efefef; transition:0.5s; } #nav> li> a> i { color:#fff; } #nav> li> ul> li { padding-left:20px; padding-bottom:5px; padding-top:8px; font-size:0.8em; } /*모바일에서 나올 메뉴*/ #m_menu { width:75%; height:100%; position:absolute; top:0; left:-75%; z-index:99999; background-color:#1d1b17; display:none; } #m_menu> ul> li { padding-left:8px; font-size:1.2em; border-bottom:1px solid #363636; box-sizing:border-box; } #m_menu> ul> li:first-child { border-top:1px solid #363636; box-sizing:border-box; } #m_menu> ul> li> a { display:block; padding:15px; color:#efefef; } #m_menu> ul> li> ul> li { padding-left:12px; } #m_menu> ul> li> ul> li> a { display:block; padding:8px; color:#808080; } /*모바일 열고닫는 버튼*/ .s_icon { width:100px; position:fixed; left:3%; top:9.5%; z-index:999; cursor:pointer; color:#000; padding:2px; display:none; } .s_icon strong { float:left; } .s_icon strong i { color:#ffff00; } .s_icon span { float:right; } .s_icon.select { width:25px; height:55px; position:fixed; top:60px; left:75%; font-size:1.5em; line-height:54px; background-color:#1d1b17; border-top:1px solid #363636; box-sizing:border-box; } /*제품 IMG*/ #img { width:44%; height:355px; position:absolute; right:22.3%; text-align:center; } #img h2 { position:absolute; top:342px; right:15px; color:#efefef; } #img img { width:100%; } /*제품 txt와 왼쪽 오른쪽을 감싸고 있는 WRAP*/ #con_wrap { width:44%; height:1460px; position:absolute; top:25%; right:22.3%; background-color:white; } /*FOOTER(푸터부)*/ footer { width:100%; height:350px; } /*내용 전체를 가운데 놓을 수 있도록 묶음*/ #footer_wrap { width:1100px; height:250px; position:absolute; top:30px; left:50%; margin-left:-550px; } } /*태블릿*/ @media screen and (min-width:769px) and (max-width:1280px) { /*HEADER(상단부)*/ header { height:70px; } /*#header_wrap-메인로고와 상단메뉴를 가운데 놓기위한 상위묶음을 설정*/ #header_wrap { width:100%; left:0; margin-left:0; } /*#logo-메인로고 설정*/ #logo { width:125px; position:absolute; top:10px; left:5%; } #logo img { width:100%; } /*검색*/ #search { display:none; } /*#gnb-상단메뉴 설정*/ #gnb { display:none; } #menubtn i:nth-child(1) { display:inline; top:12px; } #sub_gnb { top:70px; } /*모바일 _검색*/ #m_search { width:60%; height:50px; position:absolute; top:95px; left:50%; margin-left:-30%; } input:-ms-input-placeholder { color:#0e1b3b; } input::-webkit-input-placeholder { color:#0e1b3b; } input::-moz-placeholder { color:#0e1b3b; } #m_search input { width:84%; height:45px; padding:10px; border:0; border-radius:7px; outline:none; font-size:14px; float:left; } #m_search button { width:15%; height:45px; border:0; border-radius:7px; background-color:#0e68ab; outline:none; float:right; color:#fff; } /*SECTION(본문부) -- SECTION입니다:)*/ section { height:2250px; margin-bottom:10px; background-color:initial; overflow:hidden; } /*메뉴시작!*/ #main_menu { width:70%; height:100%; left:0; display:none; } /*모바일에나올메뉴*/ #m_menu { display:block; } .s_icon { display:block; } .s_icon.select { top:70px; } /*제품 IMG*/ #img { width:100%; height:470px; right:0; } #img h2 { top:660px; right:15px; font-size:2em; color:#efefef; } #img img { width:100%; } /*제품 txt와 왼쪽 오른쪽을 감싸고 있는 WRAP*/ #con_wrap { width:100%; height:1320px; top:32%; left:0; background-color:white; } /*Lightbox내에 도광판 라이트패널*/ #light { width:100%; height:468px; } .penal { width:25%; height:420px; } /*Lightbox내에 패브릭 라이트 박스*/ #fabric { width:100%; height:468px; } .fab { width:25%; height:420px; } /*FOOTER(푸터부)*/ footer { height:400px; } /*내용 전체를 가운데 놓을 수 있도록 묶음*/ #footer_wrap { width:100%; height:350px; top:30px; left:0; margin-left:0; } /*FOOTER LOGO설정*/ #footer_logo { width:70px; height:70px; top:60px; left:50%; margin-left:-35px; } #footer_logo img { width:100%; height:100%; } /*ADRESS,TEL,FAX 설정*/ #footer_wrap p { width:320px; top:100px; left:50%; margin-left:-160px; font-size:0.85em; } /*SITE MAP 설정*/ #footer_wrap figure { width:330px; position:absolute; top:240px; right:50%; margin-right:-165px; font-size:0.8em; } #footer_wrap figure h3 { margin-top:10px; font-size:1.5em; text-align:center; font-weight:bold; color:#808080; } #footer_wrap figure li { float:left; margin-right:5px; font-size:1.1em; } #footer_wrap figure li:last-child { margin-right:0; } #footer_wrap figure li a { text-decoration:none; color:#eee; transition:0.5s; } /*COPYRIGHT*/ #footer_wrap span { width:90%; position:absolute; bottom:0; left:50%; margin-left:-45%; padding-left:5px; color:#303030; font-size:0.4em; text-align:center; } #footer_wrap span strong { color:#555; } /*TOP BTN*/ #top_btn { top:300px; right:12%; } } /*모바일*/ @media screen and (max-width:768px){ /*HEADER(상단부)*********************************************************************************************HEADER입니다:)*/ header { height:60px; } /*#header_wrap-메인로고와 상단메뉴를 가운데 놓기위한 상위묶음을 설정*/ #header_wrap { width:100%; left:0; margin-left:0; } /*#logo-메인로고 설정*/ #logo { width:100px; position:absolute; top:10px; left:5%; } #logo img { width:100%; } /*검색*/ #search { display:none; } /*#gnb-상단메뉴 설정*/ #gnb { display:none; } #menubtn i:nth-child(1) { display:inline; } /*SECTION(본문부) -- SECTION입니다:)*/ section { height:1850px; margin-bottom:0; background-color:initial; overflow:hidden; } /*메뉴시작!*/ #main_menu { width:70%; height:100%; left:0; display:none; } /*모바일에나올메뉴*/ #m_menu { display:block; } .s_icon { display:block; } /*제품 IMG*/ #img { width:100%; height:200px; right:0; } #img h2 { top:220px; right:15px; font-size:2em; color:brown } /*제품 txt와 왼쪽 오른쪽을 감싸고 있는 WRAP*/ #con_wrap { width:100%; height:1365px; top:280px; left:0; background-color:white; } /*Showcase Lighting내에 Tower조명*/ #light { width:100%; height:708px; } .penal { width:50%; height:330px; } /*Shocase Lighting내에 Ceiling조명*/ #fabric { width:100%; height:378px; } .fab { width:50%; height:330px; } /*시공사진*/ #s_img { width:100%; } /*FOOTER(푸터부) -- FOOTER입니다:)*/ footer { height:400px; } /*내용 전체를 가운데 놓을 수 있도록 묶음*/ #footer_wrap { width:100%; height:350px; top:30px; left:0; margin-left:0; } /*FOOTER LOGO설정*/ #footer_logo { width:70px; height:70px; top:50px; left:50%; margin-left:-35px; } #footer_logo img { width:100%; height:100%; } /*ADRESS,TEL,FAX 설정*/ #footer_wrap p { width:320px; top:100px; left:50%; margin-left:-160px; font-size:0.7em; } /*SITE MAP 설정*/ #footer_wrap figure { width:325px; position:absolute; top:230px; right:50%; margin-right:-160px; font-size:0.8em; } #footer_wrap figure h3 { margin-top:10px; font-size:1.5em; text-align:center; font-weight:bold; color:#808080; } #footer_wrap figure li { float:left; margin-right:5px; font-size:1.1em; } #footer_wrap figure li:last-child { margin-right:0; } #footer_wrap figure li a { text-decoration:none; color:#eee; transition:0.5s; } /*COPYRIGHT*/ #footer_wrap span { width:90%; position:absolute; bottom:0; left:50%; margin-left:-45%; padding-left:5px; color:#303030; font-size:0.4em; text-align:center; } #footer_wrap span strong { color:#555; } /*TOP BTN*/ #top_btn { top:295px; right:12%; } }