/** * biz003 css * 작성자 : 김여은 * 완료일 : 2016-00-00 */ @charset "utf-8"; /* 공통 */ html { overflow-y: scroll; overflow-x: hidden; } html, body { } html, body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, li, ol, table, th, td, p, blockquote, img, form, fieldset, legend, object, input, select, textarea, button, header, nav, footer, address, section, article, figure, figcaption { margin: 0; padding: 0; font-size: 1em; color: #666; } body, h1, h2, h3, h4, h5, h6, input, select, textarea, a { line-height: 1.25em; color: #555; font-family: 'nanum-barun-gothic-regular','맑은고딕','돋움', 'AppleGothic', 'Helvetica',sans-serif; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } img, fieldset,button { border: 0 none; } img { vertical-align: middle; margin: 0; padding: 0; } ul,li { list-style: none; } hr, caption, legend { display: none; } a { color: #666; text-decoration: none; } a img { border: none; } button { overflow: hidden; cursor: pointer; background: #FFF; } button, input, select, textarea, a { vertical-align: middle; } input:focus { outline: none; } table { /* width: 100%; */ border-collapse: collapse; border-spacing: 0; word-wrap: break-word; word-break: keep-all; } /* 링크 */ a:link, a:visited, a:active { font-family: 'nanum-barun-gothic-regular', '돋움', 'AppleGothic', 'Helvetica', sans-serif; text-decoration: none; } a:hover { font-family: 'nanum-barun-gothic-regular', '돋움', 'AppleGothic', 'Helvetica', sans-serif; text-decoration: none; } a:active { selector-dummy:expression(this.hideFocus = true); } /* 클릭시 점선 안생기게 함 */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #topWrapr > .Wrap > ul li a , #mainCon #business a, #mainCon #call-menu-infoWrap #info li p, #mainCon #call-menu-infoWrap #info li a, #logo-gnb > .Wrap > ul li a, #mainCon > div p { font-family: '돋움', 'AppleGothic', 'Helvetica', sans-serif; text-decoration: none; } #footer .admin, .btn_go, #mainCall strong, #aside .subcall > strong { font-family: 'AppleGothic', 'Helvetica', sans-serif !important; text-decoration: none; } #Container { width: 100%; } .Wrap { width: 1060px; min-width: 1060px; position: relative; overflow: hidden; margin: 0 auto; } #header { } #header h1 { text-align: left; margin-top: 25px; position: relative; z-index: 9997; } #topWrap { background: #c02628; } #topWrap > .Wrap { height: 44px; } #topWrap > .Wrap > p { color: #fff; padding-top: 12px; font-size: 0.9em; position: relative; width: 41%; } #topWrap > .Wrap > p span { font-size: 1.6em; display: block; position: absolute; right: 0; top: 13px; } #logo-gnb > .Wrap > ul { position: absolute; right: 0; top: 43px; z-index: 9999; } #logo-gnb > .Wrap > ul li { float: left; } #logo-gnb > .Wrap > ul li a { color: #585858; font-size: 12px; display: inline-block; } #logo-gnb > .Wrap > ul li a:hover { text-decoration: underline; } #logo-gnb > .Wrap > ul li:after { content: "| "; color: #ededed; padding-left: 5px; padding-right: 5px; display: inline-block; font-size:12px; vertical-align: middle; } #logo-gnb > .Wrap > ul li:last-child:after { content: ""; padding: 0;} /* gnbWrap */ #logo-gnb { height: 85px; position: relative; } #gnbWrap { width: 100%; position: relative; z-index: 9998; background: #b73539;} .gnb { width: 1060px; margin: 0 auto; position: relative; } .gnb ul { display: table; width:100%; } .gnb > ul > li { display: table-cell; position:relative; z-index:9000;border-left: 1px solid #ee474c; width: 24.8%; height: 50px; vertical-align: middle; } .gnb > ul > li:last-child { border-right: 1px solid #ee474c; } .gnb > ul > li > a { color:#fff; font-size:1.2em; display:block; text-align:center; } .gnb .twoD > li > a > img { vertical-align: middle !important; padding-right: 10px; } .gnb ul li.select, .gnb .on, .gnb .category_menu .on > a { color: #fff; background: #85191c; height: 50px; line-height: 50px; } /* 마우스오버시 색변화 */ .gnb ul .m01 { /* width:140px; */ } .gnb .category_menu .deps2 { display:none; position:absolute; top:50px; left:-1px; z-index:11 ;border:1px solid #434343; border-top: none; padding: 20px 0 10px 0; background: #fff;} /* top추가 */ .gnb .category_menu .deps2 li { display:block; background:#fff; padding-left: 25px; line-height: 20px !important; height: 30px !important; } .gnb .category_menu .deps2 li a:hover { color:#fa221e; } .gnb .category_menu .deps2 li.line{ margin:0 10px;} .gnb .lifloat > li { float: left; width: 45%;} .gnb .m02 .deps2 { /* width: 347px !important; */} /* 추가 */ /* search */ #searchWrap { width: 354px; left: 50%; margin-left: 170px; position: absolute; top: 139px; background: #fff; height: 31px; z-index: 9999; } #searchWrap input { width: 87%; line-height: 31px; border: none; padding-left: 10px; } #searchWrap button { background: url(../img/btn_search.gif) no-repeat 0 0; width: 31px; height: 31px; text-indent: -999em; } /* 메인이미지 */ #mainImgWrap { width: 100%; z-index: 10; background: url(../img/bg_con.gif) repeat-x; position: relative; } #mainImg, #mainCon { float: left; } #mainImg { width: 732px; } #mainCon { width:328px; } #mainCon #businessArea { background: url(../img/main_banner_img01.jpg) no-repeat; height: 332px; padding-left: 26px; } #mainCon #businessArea h3 { font-size: 1.4em; color: #6a5036; padding: 32px 0 0; } #mainCon #businessArea p { font-size: 11px; color: #8d8277; letter-spacing: -0.06em; } #mainCon #businessArea ul { overflow: hidden; width: 266px; margin-top: 17px; } #mainCon #businessArea ul li { float: left; width: 47%; margin: 0 0 6px 6px; background: #fcf8f4; } #mainCon #businessArea ul li a { height:32px; line-height:32px; display: block; text-align: center; } #mainCon #businessArea ul li a:hover { background: #7f3b3d; color: #fff; transition:all .4s; -webkit-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s; -ms-transition: all .4s; } #bannerRoll { } #mainContents { border: 1px solid #d5d5d5; border-top: none; } #mainContents h3 { font-size: 1.3em; } #mainContents h3 span { font-size: 0.65em; display: inline-block; margin-left: 10px; } #mainContents > div { display: table; width: 100%;} #mainContents > div > div { display: table-cell; } #mainGallery { width: 697px; border: 1px solid #d5d5d5; border-left: none; border-top: none; padding: 35px 0px 35px 35px; background: #ffffe1; } #mainCall { width: 297px; padding: 35px 0px 35px 30px; border-bottom: 1px solid #d5d5d5; background: #e8e1d7;} #mainCall h3 { color: #584e41; margin-bottom: 10px; } #mainCall p { font-size: 0.9em; letter-spacing:-0.06em; } #mainCall h3 + p { color: #824040; font-size: 1.0em; } #mainCall strong { font-size: 2.3em; color: #b73539; margin-top: 20px; display: block; } #notice-banner { } #notice-banner > div { border-right: 1px solid #d5d5d5; width: 33.3%; padding: 35px 0 30px 30px; position: relative;} #notice-banner > div:first-child { width: 35.8%; } #notice-banner > div:last-child { border:none; } #notice-banner h3 { margin-bottom: 10px; color: #004a64; } #notice-banner > div:first-child h3 { color: #333; } #notice-banner p { font-size: 0.9em; letter-spacing:-0.06em; } #notice-banner > div > a { position: absolute; top: 0; right:0; width: 23px; height: 22px; background: #797e88; font-size: 1.4em; color: #fff; text-align: center; line-height: 1.1em; } #notice-banner > div > a:hover { background: #b73539; transition:all .4s; -webkit-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s; -ms-transition: all .4s; } #notice-banner > div + div { background: url(../img/main_link_banner01.jpg) no-repeat; } #notice-banner > div + div + div { background: url(../img/main_link_banner02.jpg) no-repeat; } .main_btn { position: absolute; right: 176px; bottom: 86px; } .main_btn a { padding-right: 10px; } .main_txt { position: absolute; top: 100px; left: 0px; z-index: 9999; width:100%; } .main_txt p { color: #fff; line-height: 1.5em; font-size: 1.4em; width: 62%; } .main_txt p:nth-of-type(1) { font-size: 3.7em; } /* 서브이미지 */ #subCon { position: relative; } #subImg { position: relative; width: 100%; background: url(../img/sub_img01.jpg) no-repeat center 0; height: 305px; } #subImg .Wrap { height: 443px; } #subImg .Wrap > img, #subImg .Wrap > p { position: absolute; } #subImg .Wrap > img { top: 0; right: 9px;} #subImg .Wrap > p { top: 130px; left: 0; } .sibImgWrap { position: relative; height: 331px; } .sibImgWrap > div { width: 2000px; margin-left: -500px; left: 50%; position: absolute; padding-top: 40px;} #mainGallery ul li { position: relative; } #mainGallery .boxslider_gallery { margin-top: 15px; } .over { position: absolute; width: 246px; height: 387px; border: 2px solid #e0293a; z-index: 10000; top: 0px; left: 0px; display: none; } #subImg > div > p:nth-of-type(1) { color: #e0f0ff; font-size: 1.4em; padding-bottom: 15px; padding-top: 50px;} #subImg > div { padding-bottom: 2px; } #subImg > div > p:nth-of-type(2) { color: #094288; font-size: 1.9em; line-height: 1.2em; padding-bottom: 10px;} #subImg > div > p:nth-of-type(3) { color: #3f6a9e; font-size: 1.15em; } /* 서브 */ #sub-centents { min-height: 600px; margin-bottom: 100px; } #contentWrap { } #contentWrap .Wrap { min-height: 700px; /* background: url(../img/bg_sub_line.gif) repeat-y; */ display: table; } #aside, #subContent { display: table-cell; vertical-align: top; } #aside { width: 221px; border-right: 1px solid #e4e4e4; } #subContent { background: #fff; padding-left: 37px; } .subtxt { font-size: 1.2em; letter-spacing: -0.05em; } .subtxt span { color: #d83c13; display: inline-block; padding-left: 10px; letter-spacing: 0; margin-bottom: 20px;} /* lnb */ #aside .lnbWrap > div { width: 100%; height: 103px; background: url(../img/bg_left_tit.jpg) no-repeat; } #aside .lnbWrap > div > h2, #aside .lnbWrap > div > p { color: #fff; padding-left: 10px; } #aside .lnbWrap > div > h2 { font-size: 1.9em; text-transform: uppercase; padding-top: 41px; font-weight: normal; text-align: center; } #aside .lnbWrap > div > p { font-size: 1.2em; } .lnb { overflow: hidden; } .lnb > li a { padding: 0 20px ; line-height: 45px; height: 45px; display: block; border-bottom: 1px solid #dfdfdf; } .lnb > li a:hover { color: #fff; background: #354e87 url(../img/left_lnb_arrow.png) no-repeat 190px center;} .lnb > li.active a { color: #d21010; } .lnb > li a.oneD.on, .lnb > li a.oneD:hover { color: #fff; opacity: 1;} .lnb a.on, .lnb a:hover { color: #fff; opacity: 1; background: #354e87 url(../img/left_lnb_arrow.png) no-repeat 190px center; } #aside .subcall { margin-top: 30px; background: url(../img/icon_call.jpg) no-repeat 30px bottom; height: 260px; } #aside .subcall > h3, #aside .subcall > p { font-size: 0.9em; color: #666; letter-spacing: -0.05em; width: 93%; } #aside .subcall > h3 + p { margin-top:10px; color: #7c4648; font-size: 1.0em;} #aside .subcall > strong { font-size: 1.9em; color: #d83c13; display: block; margin-top: 15px;} #aside .subcall > h3 { font-size: 1.2em; color: #333; text-transform: uppercase; padding-bottom: 0px; } #subContent { padding-bottom: 130px;} #subContent .con-header { position: relative; margin-bottom: 50px; margin-top: 38px; padding-bottom: 24px; border-bottom: 1px solid #e3e3e3;} #subContent .con-header > h2 { font-size: 2.1em; color: #000; } #subContent .con-header > span { position: absolute; top: 20px; right: 0; font-size: 0.9em; color: #989898; } #subContent .content { min-height: 400px; } /* footer */ #footer { position: relative; } #fMenu { background: #4f4f4f; border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; } #fMenu li { float: left; line-height:47px; height: 47px; } #fMenu li a { color: #fff; } #fMenu li a:hover { color: #fff; text-decoration: underline; } #fMenu li:after { content: "|"; padding: 0 10px; color: #999; } #fMenu li:last-child:after { content: ""; } #footer .Wrap { } #footer #addWrap { padding: 25px 0; } #footer .Wrap > address, #footer .Wrap > p { color: #666; font-style: normal; font-size: 0.9em; line-height: 1.4em; padding-top: 6px; line-height: 1.5em; text-align: left; } #footer span { padding: 0 10px; color: #999; } #footer .admin { background: #000; padding: 3px 7px 3px; text-transform: uppercase; border-radius: 3px; font-size: 10px; margin-top: 0px; display: inline-block; margin-left: 10px; position: absolute; top: 15px; right: 0; color: #c7c7c7;} #footer .admin:hover { color: #fff; } /* 인사말 */ .info01 { background: url(../img/bg_info01_img.jpg) no-repeat right 0; } .info01 h3 { margin-bottom: 35px; } .info01 p { width: 58%; line-height: 1.6em; margin-bottom: 20px; } .info01 h3 + p { color: #b73539; } .info01 p:last-child { color: #000; } /* 오시는길 */ .info02 { width: 95%; margin: 0 auto; } .root_daum_roughmap { margin: 0 auto !important; } .info02 > ul { margin-top: 30px; } .info02 > ul li { margin-bottom: 10px; } .info02 > ul li span { display: inline-block; } .info02 > ul li span > img { margin-right: 5px; } .info02 > ul li span:after { content: " : "; } .info02 > ul li strong { font-weight: normal; } /* 추출 갤러리 */ .galleryList { overflow: hidden; } .galleryList > ul > li { float: left; width: 254px; border: 1px solid #e3e3e3; margin-right: 8px; padding-bottom: 20px; } .galleryList > ul > li:last-child { margin-right: 0; } .galleryList > ul > li > a img { width: 100%; } .galleryList .subject, .galleryList p { padding: 0 20px; } .galleryList li h3 a { font-size: 1.2em !important; display: block; line-height: 1.5em; color: #333; margin: 20px 0 10px; } .galleryList li h3 a:hover { color: #f45c2d; } .galleryList p { font-size: 1.0em; } /* 추출게시판 */ .boardList a { font-size: 0.9em; width: 67%; display: inline-block; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; line-height: 1.6em;} .boardList > li > a > span:before { content: ""; } .boardList > li > a:hover { text-decoration: underline; } /* 갤러리 게시판 리스트 */ .galleryList_1 { overflow: hidden; } .galleryList_1 > ul > li { float: left; width: 48%; margin-right: 30px; padding-bottom: 50px; } .galleryList_1 > ul > li:nth-of-type(even) { margin-right: 0; } .galleryList_1 > ul > li > a { height: 264px; overflow: hidden; display: block; } .galleryList_1 > ul > li > a img { width: 100%;} .galleryList_1 .subject, .galleryList_1 p { padding: 0 10px 0 0; } .galleryList_1 li h3 a { font-size: 1.3em !important; display: inline-block; line-height: 1.5Em; color: #f20b0b; margin: 20px 0 10px; } .galleryList_1 p.price { font-size: 1.0em; margin-top: 20px; color: #000; } /* 갤러리 view 페이지 */ .gallery_view { border: none !important; } .gallery_view td { border-bottom: none !important; } .view_subject { font-size: 1.3em !important; display: inline-block; line-height: 1.5Em; color: #f20b0b !important; margin: 20px 0 10px; } .view_price { font-size: 1.0em; margin-top: 20px; color: #000 !important; } .bmenu { overflow: hidden; } .bmenu h4 a { font-size: 1.1em; padding: 20px 0 10px; display: block; color: #000; } .bmenu h4 a:hover { text-decoration: underline; color: #cb4d4d;} .bmenu { padding: 0 10px 0 0; } .bmenu li { padding-bottom: 20px; float: left; margin-right: 8px; width: 24.2%; border: 1px solid #dcdcdc; position: relative; } .bmenu li:last-child { margin-right: 0; } .bmenu li > a { height: 209px; overflow: hidden; display: block; } .bmenu li > a img { width: 100%; } .bmenu li > p, .bmenu li > h4 { padding: 0 20px; } .bmenu li > p { color: #533232; font-size: 0.9em; letter-spacing: -1px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; white-space : normal; width: 90%; height: 40px; } .bmenu li > p:nth-of-type(2) { color: #533232; font-size: 1.1em; margin-top: 10px;} /* .bmenu .aLink { position: absolute; top: 40px; left: 100px; opacity: 0; display: block; } */ .bmenu .aLink { position: absolute; top: 0; left: 0; display: none; width: 100%; height: 210px; background: #000; opacity: 0.7; } .bmenu .aLink a { display: block; text-align: center; margin-top: 80px; } /* .bmenu .aLink a img { max-width:100%; max-height:100%; display: block; border:1px dotted red; } */ /* margin */ .mt_10 { margin-top: 10px; } .Mt_15 { margin-top: 15px; } .mt_20 { margin-top: 20px; } .mt_30 { margin-top: 30px; } .mt_40 { margin-top: 40px; } .mt_50 { margin-top: 50px; } #listWrap { width: 760px; padding-top: 30px; } #listWrap .item { width: 210px; margin-bottom: 30px; margin-left: 20px; min-height: 100px; float:left; } #listWrap .item img { max-width: 100%; } #listWrap .g_list { text-align: center; } #listWrap .g_list .l_suj { line-height: 1.5em; padding: 7px 0; } #listWrap .big { width: 464px; } #listWrap .big img { max-width: 464px; height: 100%; }