@charset "utf-8"; #container {min-height: 1100px; } /* 서브 이미지 (공통) */ #container > .inner img.img_tab, #container > .inner img.img_mob {display:none} /* 회사소개 */ #container > .inner .greeting > ul {clear:both} #container > .inner .greeting > ul > li {position:relative; float:left} #container > .inner .greeting > ul > li.list1 {width:45%} #container > .inner .greeting > ul > li.list2 {width:50%} #container > .inner .greeting > ul > li.right {float:right} #container > .inner .greeting > ul > li img {display:block; width:100%} #container > .inner .greeting > ul > li .text_effect {float:left; width:50%} #container > .inner .greeting > ul > li .full {width:100% !important; margin-bottom:40px} #container > .inner .greeting > ul > li .text_effect > li > .txt {display:inline-block; font-size:26px; color:#c60000} #container > .inner .greeting > ul > li .text_effect > li > .txt p {position:relative; margin-bottom:10px; height:1px; background:#ffdcdc} #container > .inner .greeting > ul > li .text_effect > li > .txt p span {position:absolute; display:inline-block; width:100%; height:1px} #container > .inner .greeting > ul > li .text_effect > li > .txt p span.color1 {background:#c60000} #container > .inner .greeting > ul > li .text_effect > li > .txt p span.color2 {background:#ffdcdc} #container > .inner .greeting .txt_box {float:right; width:47%} #container > .inner .greeting .txt_box p.desc {font-size:12px; line-height:1.7; letter-spacing:-0.5px; text-align:justify; margin-bottom:30px} #container > .inner .greeting .txt_box.full {float:none; width:100% !important} /* 연혁 */ #container > .inner .history {text-align:justify} #container > .inner .history:after {display:inline-block; width:100%; height:0; content:''} #container > .inner .history > .history_box {display:inline-block; width:48%; margin-bottom:35px; overflow:hidden} #container > .inner .history > .history_box h3 {font-size:24px; font-weight:600; color:#c60000; padding-bottom:15px; border-bottom:1px solid #dedede; margin-bottom:20px} #container > .inner .history > .history_box dl {margin:0; padding:0; overflow:hidden} #container > .inner .history > .history_box dl dt {float:left; color:#999; width:70px; line-height:1.6; padding:5px 0} #container > .inner .history > .history_box dl dd {color:#555; margin-left:80px; padding:5px 0; line-height:1.6} #container > .inner .history > .history_box dl span.white {color:#fff !important} #container > .inner .history > .con_box {clear:both; padding:30px 50px 10px 50px; border:3px solid #ccc; overflow:hidden} #container > .inner .history > .con_box .left {float:left; width:50%} #container > .inner .history > .con_box .right {float:right; width:50%} #container > .inner .history > .con_box dl {position:relative; margin-bottom:15px; overflow:hidden} #container > .inner .history > .con_box dl dt {clear:left; float:left; width:100px; color:#666} #container > .inner .history > .con_box dl dd {margin-left:100px; padding-right:20px; color:#888} /* 레이어 팝업 */ #img_popup_wrap {position:fixed; top:0; left:0; width:100%; height:100%; z-index:990; visibility:hidden} #mask {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity='80')} #imgPopup {position:fixed; top:50%; left:50%; width:60%; background:#fff; z-index:1000} #imgPopup .img_wrap {position:relative; height:100%} #imgPopup .img_wrap ul {} #imgPopup .img_wrap ul li {display:none} #imgPopup .img_wrap ul li.on {display:block} #imgPopup .img_wrap ul li img {display:block; width:100%} #imgPopup .img_wrap p.tit {clear:both; line-height:50px; padding:0 30px} #img_popup_wrap a {position:absolute; z-index:1010} #img_popup_wrap a.pop_close {top:20px; right:10%} #img_popup_wrap a.pop_prev {top:50%; left:10%} #img_popup_wrap a.pop_next {top:50%; right:10%} /* 찾아오시는 길 */ #mask_pop {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity='80')} #container > .inner .company .photo_slide {} #container > .inner .company .photo_slide .slide_wrap {position:relative; margin-bottom:30px} #container > .inner .company .photo_slide .slide_wrap .tit_box {position:absolute; width:140px; padding:20px; top:0; right:0; color:#fff; background:#c60000; z-index:50} #container > .inner .company .photo_slide .slide_wrap .tit_box h2 {font-size:18px; line-height:1.2; margin-bottom:10px} #container > .inner .company .photo_slide .slide_wrap .photo_list {overflow:hidden} #container > .inner .company .photo_slide .slide_wrap .photo_list li {position:relative; float:left; cursor:pointer} #container > .inner .company .photo_slide .slide_wrap .photo_list li.p_1 {width:52.6%} #container > .inner .company .photo_slide .slide_wrap .photo_list li.p_2 {width:47.4%} #container > .inner .company .photo_slide .slide_wrap .photo_list li.p_3, #container > .inner .company .photo_slide .slide_wrap .photo_list li.p_4 {width:23.7%} #container > .inner .company .photo_slide .slide_wrap .photo_list li > img {display:block; width:100%} #container > .inner .company .photo_slide .slide_wrap .photo_list li a {display:none; position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; z-index:10} #container > .inner .company .photo_slide .slide_wrap .photo_list li a .mask {display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:20} #container > .inner .company .photo_slide .slide_wrap .photo_list li a img {display:inline-block; position:relative; text-align:center; z-index:30} #container > .inner .company .photo_slide .photo_swipe {display:none; position:relative; overflow:hidden} #container > .inner .company .photo_slide .photo_swipe ul {position:relative; width:1000%} #container > .inner .company .photo_slide .photo_swipe ul li {position:relative; float:left} #container > .inner .company .photo_slide .photo_swipe ul li img {display:block; width:100%} #container > .inner .company .photo_slide .photo_swipe ul li p {position:absolute; display:inline-block; bottom:0; left:0; padding:15px 25px; color:#333; background:#fff} #container > .inner .company .photo_slide .paging {clear:both; margin:30px 0 100px 0; font-size:28px; color:#bbb; text-align:right} #container > .inner .company .photo_slide .paging a {display:inline-block} #container > .inner .company .photo_slide .paging a img {vertical-align:-3px} #container > .inner .company .photo_slide .paging span.current {color:#c60000} #container > .inner .company .photo_slide .paging_m {clear:both; display:none; margin:30px 0 100px 0; font-size:28px; color:#bbb; text-align:center} #container > .inner .company .photo_slide .paging_m a {display:inline-block} #container > .inner .company .photo_slide .paging_m a img {vertical-align:-3px} #container > .inner .company .photo_slide .paging_m span.current {color:#c60000} #container > .inner .company .map_list .map_list_wrap {padding-bottom:15px; border-bottom:1px solid #eee; cursor:pointer} #container > .inner .company .map_list li.map {display:none; width:100%; margin-top:30px} #container > .inner .company .map_list li.map .map_area {position:relative; width:100%; height:500px; overflow:hidden} #container > .inner .company .map_list li.map .map_area #map {height:100%} #container > .inner .company .map_list li .map_list_wrap h3 {font-size:18px; font-weight:400; color:#444; margin-bottom:20px} #container > .inner .company .map_list li .map_list_wrap p {color:#777} #container > .inner .company .map_list li .map_list_wrap p.new {margin-bottom:5px} #container > .inner .company .map_list li .map_list_wrap p.old {margin-bottom:50px} #container > .inner .company .map_list li .map_list_wrap p.tel {margin-bottom:15px; padding-left:45px; background:url(../../img/map_phone.png) left center no-repeat} #container > .inner .company .map_list li .map_list_wrap p.fax {padding-left:45px; background:url(../../img/map_printer.png) left center no-repeat} #container > .inner .company .map_list li:hover p.tel, #container > .inner .company .map_list li.on p.tel {background:url(../../img/map_phone_c.png) left center no-repeat} #container > .inner .company .map_list li:hover p.fax, #container > .inner .company .map_list li.on p.fax {background:url(../../img/map_printer_c.png) left center no-repeat} #container > .inner .company .map_list li:hover h3, #container > .inner .company .map_list li .map_list_wrap:hover p, #container > .inner .company .map_list li.on h3, #container > .inner .company .map_list li.on p, #container > .inner .company .map_list li:hover a, #container > .inner .company .map_list li.on a {color:#c60000 !important} #container > .inner .company .map_list li .map_list_wrap a.pointer {display:block; position:absolute; right:0; bottom:15px} /* 사업소개 */ #container > .inner .business ul.tpl_list {margin-bottom:100px} #container > .inner .business ul.tpl_list li {position:relative; height:300px; vertical-align:top} #container > .inner .business ul.tpl_list li .allocation_inner h3 {font-size:16px; margin-bottom:20px} #container > .inner .business ul.tpl_list li .allocation_inner p.txt {color:#777; line-height:1.6} #container > .inner .business ul.tpl_list li .allocation_inner p.img {position:absolute; bottom:0; left:0} #container > .inner .business ul.tpl_list li .allocation_inner p.img img {display:block; width:100%} #container > .inner .business p.main_desc {color:#777; line-height:2; text-align:justify; margin-bottom:80px} #container > .inner .business .process_box {padding:30px; border:3px solid #ccc} #container > .inner .business .process_box ul.prcs_list li {text-align:center; background:url(../../img/process_arrow.png) right 10px center no-repeat} #container > .inner .business .process_box ul.prcs_list li.last {background:none} #container > .inner .business .process_box ul.prcs_list li p.img {height:70px; margin-bottom:10px} #container > .inner .business .process_box ul.prcs_list li p.txt {font-weight:600; font-size:12px; line-height:1.5} #container > .inner .business .wrap_type1 {margin-top:100px; border:1px solid #dedede; overflow:hidden} #container > .inner .business .wrap_type1 .left {float:left; width:45%} #container > .inner .business .wrap_type1 img {display:block; width:100%} #container > .inner .business .wrap_type1 .center {float:left; width:30%; padding-top:50px} #container > .inner .business .wrap_type1 .center ul.text_effect {padding-left:15%} #container > .inner .business .wrap_type1 .center ul.text_effect li {float:none !important} #container > .inner .business .wrap_type1 .center ul.text_effect li .txt {display:inline-block; font-size:28px; color:#c60000; line-height:1.4} #container > .inner .business .wrap_type1 .center ul.text_effect li .txt p {position:relative; margin-bottom:10px; height:1px; background:#ffdcdc} #container > .inner .business .wrap_type1 .center ul.text_effect li .txt p span {position:absolute; display:inline-block; height:1px} #container > .inner .business .wrap_type1 .center ul.text_effect li .txt p span.color1 {background:#c60000} #container > .inner .business .wrap_type1 .center ul.text_effect li .txt p span.color2 {background:#ffdcdc} #container > .inner .business .wrap_type1 .center p.desc {color:#777; line-height:1.6; text-align:justify; margin-top:30px; padding-left:15%} #container > .inner .business .wrap_type1 .right {float:right; width:22%; border-left:1px solid #dedede} #container > .inner .business .wrap_type1 .right p.img {margin-bottom:70px} #container > .inner .business .wrap_type1 .right p.img img {width:100%} #container > .inner .business .wrap_type1 .right h3 {line-height:1; margin-bottom:34px; padding:0 30px} #container > .inner .business .wrap_type1 .right h3 p {font-size:26px; color:#000; line-height:inherit; transition:all 0.5s ease} #container > .inner .business .wrap_type1 .right h3 p:after {clear:both; display:block; content:''} #container > .inner .business .wrap_type1 .right h3 p.tit2 {width:105%; margin-left:-5px} #container > .inner .business .wrap_type1 .right h3 p.tit3 {width:110%; margin-left:-5px} #container > .inner .business .wrap_type1 .right h3 p span {display:block; float:left; width:16%; text-align:center} #container > .inner .business .wrap_type1 .right h3 p span.blind {display:none} /* 우측 배너 */ #aside .latest_box {background:#fff !important; box-shadow:1px 1px 2px 0 rgba(0,0,0,0.12)} /* 게시판 에디터 깨짐 방지 */ table.seLayout td {padding:0 !important} /* 게시판 스타일 (2017-08-08 추가) */ .brd_photo_list .hoverBox {position:absolute; display:block; top:0; left:0; width:100%; height:100%; padding:32% 30px 0 30px; text-align:center; background:rgba(0,0,0,.8); opacity:0; transition:all .5s ease} .brd_photo_list .hoverBox .inner {} .brd_photo_list .hoverBox .inner h3 {font-size:24px; font-weight:600; color:#fff; line-height:1.2} .brd_photo_list .hoverBox .inner h3:after {display:block; width:40px; height:1px; margin:20px auto; content:''; background:#fff; opacity:.5} .brd_photo_list .hoverBox .inner p {display:-webkit-box; color:#fff; max-height:69px; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; text-overflow:ellipsis} .brd_photo_list .bbsnewf5:hover .hoverBox {opacity:1} .bbsnewf5 {position:relative; overflow:hidden} /* 게시판 카테고리 탭 */ .cate_select {display:none !important} .board_tab {position:relative; margin-bottom:50px} .board_tab > a {display:none} .board_tab ul {border-bottom:1px solid #e0e0e0} .board_tab ul > li {float:left; margin-bottom:-1px; margin-left:-1px} .board_tab ul > li:first-child {margin-left:0} .board_tab ul > li > a {display:block; padding:12px 30px; color:#999; border:1px solid #e0e0e0; background:#f4f4f4} .board_tab ul > li.on > a {position:relative; color:#333; border-color:#aaa; border-bottom-color:#fff; background:#fff; z-index:10} /* 미디어 쿼리 */ @media screen and (max-width:1740px) { #aside {display:none !important} } @media screen and (max-width:1366px) { #container > .inner .greeting > ul > li .text_effect {width:45%} #container > .inner .greeting > ul > li .text_effect > li > .txt {font-size:18px; font-weight:600} #container > .inner .greeting .txt_box {width:52%} } @media screen and (max-width:1280px) { #container > .inner .greeting > ul > li {clear:both; float:none; width:100% !important} #container > .inner .greeting > ul > li.list1 {margin-bottom:45px} #container > .inner .greeting > ul > li .text_effect {float:none; width:100%} #container > .inner .greeting > ul > li .text_effect > li > .txt {font-size:36px; font-weight:400} #container > .inner .greeting .txt_box {float:none; width:100%; margin-top:45px; font-size:13px} #container > .inner .greeting .txt_box p.desc {margin-bottom:15px} #container > .inner .business .wrap_type1 {margin-top:0; border:none} #container > .inner .business .wrap_type1 .left {float:none; width:100%} #container > .inner .business .wrap_type1 .center {float:none; width:100%; margin-bottom:50px} #container > .inner .business .wrap_type1 .center ul.text_effect {padding-left:0} #container > .inner .business .wrap_type1 .center ul.text_effect li .txt {font-size:30px} #container > .inner .business .wrap_type1 .center ul.text_effect li .txt p {margin-bottom:0} #container > .inner .business .wrap_type1 .center p.desc {padding-left:0 !important} #container > .inner .business .wrap_type1 .right {float:none; width:100%; border:none} #container > .inner .business .wrap_type1 .right h3 {margin-bottom:25px; padding:0 !important} #container > .inner .business .wrap_type1 .right h3 p {font-size:44px; width:inherit !important; margin-left:0 !important} #container > .inner .business .wrap_type1 .right h3 p.tit2 {display:none} #container > .inner .business .wrap_type1 .right h3 p span {display:inline; float:none; width:inherit; padding-bottom:0 !important} #container > .inner .business .wrap_type1 .right h3 p span.blind {display:inline !important} .brd_photo_list .hoverBox {padding-top:25%} } @media screen and (max-width:1024px) { #container > .inner .company .map_list li {width:100% !important; margin-bottom:50px; border-bottom:1px solid #eee} #container > .inner .company .map_list li.map {margin-top:0; padding:0 !important} #container > .inner .company .map_list li.map .map_area {height:200px} #container > .inner .company .map_list li .map_list_wrap h3 {font-size:34px} #container > .inner .company .map_list li .map_list_wrap p {font-size:24px} #container > .inner .business ul.tpl_list {padding-top:30px} #container > .inner .business ul.tpl_list li {width:48% !important; height:380px; margin-bottom:50px} .brd_photo_list .hoverBox {padding-top:20%} .brd_photo_list .hoverBox .inner h3 {font-size:18px} .brd_photo_list .hoverBox .inner p {font-size:12px; max-height:63px} /* 게시판 카테고리 탭 */ .cate_select {display:none !important} .board_tab {margin:auto auto 50px auto} .board_tab > a {position:relative; display:block !important; width:100%; height:50px; padding-left:15px; font-size:16px; line-height:50px; border:1px solid #e0e0e0} .board_tab > a:after {position:absolute; font-family:'FontAwesome'; font-size:18px; color:#333; right:20px; content:'\f107'} .board_tab > a.open:after {content:'\f106'} .board_tab ul {display:none; position:absolute; top:49px; width:100%; margin:0; border:1px solid #e8e8e8; border-top:none; background:#fff; z-index:30} .board_tab ul > li {float:none; display:block; margin:0} .board_tab ul > li > a {display:block; padding:12px 15px; font-size:16px; color:#999; border:none; border-top:1px solid #f0f0f0; background:none} .board_tab ul > li.on > a {color:#333; border-color:#f0f0f0} } @media screen and (max-width:768px) { #container > .inner .company .photo_slide .slide_wrap .tit_box {display:none} #container > .inner .company .photo_slide .slide_wrap .photo_list {display:none} #container > .inner .company .photo_slide .paging {display:none} #container > .inner .company .photo_slide .photo_swipe {display:block !important} #container > .inner .company .photo_slide .paging_m {display:block !important} .brd_photo_list .hoverBox {padding:25% 20px 0 20px} } @media screen and (max-width:640px) { #container > .inner .section {padding-bottom:35px !important} #container > .inner .section h2.sub_tit {font-size:20px; margin-bottom:15px} #container > .inner .section h2.sub_tit:after {width:30px} #container > .inner .greeting > ul > li .text_effect > li > .txt {font-size:24px !important} #container > .inner .greeting .txt_box {margin-top:35px !important} #container > .inner .greeting .txt_box p.desc {font-size:13px} #container > .inner .history > .history_box {display:block; width:100% !important} #container > .inner .history > .history_box h3 {font-size:20px !important} #container > .inner .history > .con_box {padding:15px 25px} #container > .inner .history > .con_box .left, #container > .inner .history > .con_box .right {float:none; width:100% !important} #container > .inner .history > .con_box dl dt, #container > .inner .history > .con_box dl dd {font-size:12px} #container > .inner .company .map_list li .map_list_wrap {padding-bottom:25px} #container > .inner .company .map_list li .map_list_wrap h3 {font-size:17px !important; margin-bottom:10px} #container > .inner .company .map_list li .map_list_wrap p {font-size:15px !important} #container > .inner .company .map_list li .map_list_wrap p.old {margin-bottom:10px} #container > .inner .company .map_list li .map_list_wrap p.tel, #container > .inner .company .map_list li .map_list_wrap p.fax {font-size:13px !important} #container > .inner .company .map_list li .map_list_wrap a.pointer {bottom:20px; right:0} #container > .inner .business ul.tpl_list {margin-bottom:30px} #container > .inner .business ul.tpl_list li {width:100% !important; height:initial} #container > .inner .business ul.tpl_list li p.img {position:static !important; margin-top:30px} #container > .inner .business .process_box {padding:30px 0} #container > .inner .business .process_box ul.prcs_list li {background:url(../../img/process_arrow.png) right center no-repeat; background-size:16px} #container > .inner .business .wrap_type1 .center ul.text_effect li .txt {font-size:24px} #container > .inner .business .wrap_type1 .right p.img {margin-bottom:25px} #container > .inner .business .wrap_type1 .right h3 p {font-size:inherit} #container > .inner .business .wrap_type1 .right h3 p span {font-size:24px} #container > .inner img.img_mob {display:block !important} #container > .inner img.img_pc {display:none !important} .brd_photo_list .hoverBox {padding-top:32%} }