@charset "utf-8"; /* CSS Document */ /* * File : sub.css * Author : ITBIZ (SUNMI) * * Dependency : css/reset.css * Dependency : css/common.css * * SUMMARY: * 01) SUB VISUAL * 02) SUB CONTANT */ #sub-Container {clear: both; position: relative;margin: 0 auto; width: 100%;} #subContainer{ width:100%; position:relative;} /*서브 탭 area*/ .tab-list{ width:100%; position:relative;} .tab-list li.select a{background:#004fa3;color: #fff;border: 1px solid #004fa3;} .tab-content > article{ display:none; position:relative; width:100%; box-sizing:border-box;} .mt10{ margin-top:10px!important} .mt20{ margin-top:20px!important} .mt30{ margin-top:30px!important} .mt40{ margin-top:40px!important} .mt50{ margin-top:50px!important} .mt60{ margin-top:60px!important} @media screen and (min-width: 1100px) { #subContainer{ background:url(../images/con_bg.png) repeat-x} /* **************************************** * * SUB VISUAL * **************************************** */ #sub-visual {height:103px; width: 100%; position:relative;} #sub-visual.sub-visual01 {background: url(../images/sub_visual01.png) no-repeat center top;} #sub-visual.sub-visual02 {background: url(../images/sub_visual02.png) no-repeat center top;} #sub-visual.sub-visual03 {background: url(../images/sub_visual03.png) no-repeat center top;} #sub-visual.sub-visual04 {background: url(../images/sub_visual04.png) no-repeat center top;} #sub-visual.sub-visual05 {background: url(../images/sub_visual05.png) no-repeat center top;} #sub-visual .right_txt { position:absolute; right:0; top:0;} #sub-visual .right_txt p {display: block; margin: 0 auto;text-align: right;font-size:28px;color: #fff; line-height:103px;font-weight: 600;} #sub-visual .visual_tit{width: 235px;height:103px; display:table; box-sizing:border-box;} #sub-visual h2 {font-size:25px; color:#fff;background:#004fa3;font-weight:500;padding:0px 0; display:table-cell; vertical-align:middle; box-sizing:border-box;width:100%; padding-left:20px;} #sub-visual h2 span{display:block; font-size:14px; color:rgba(255,255,255,0.7); line-height:26px; padding-top:5px} /* **************************************** * * SUB LEFT MENU * **************************************** */ #lnb {float:left;*zoom:1;display:block;width:235px;margin:0 0px 0 0; position:relative;} #lnb:after {content:"";display:block;clear:both} #lnb > ul {border:1px solid #cdcdcd;margin-bottom:10px;border-bottom:none;} #lnb .left_menu-area li a, #lnb .left_menu-area li{ display:block; position:relative;} #lnb .left_menu-area > li {} #lnb .left_menu-area > li> a {display:block;padding:0 0 0 20px; line-height:50px;border-bottom:1px solid #cdcdcd;color:#484848;font-size:14px;} #lnb li.left-depth1.on >a {background:#009fe0 url(../images/left_menu-active.png) no-repeat 90% center;color:#fff; position:relative;} #lnb li .left-depth2{/*display: none;*/background:#f7f7f7;border-bottom: 1px solid #dbdbdb; } #lnb li > .left-depth2 > li{overflow: hidden;box-sizing: border-box;background: #f2f2f2;} #lnb li > .left-depth2 > li > a{display:block; margin:0 18px; line-height:50px;color:#484848;font-size:14px; background: #f2f2f2; border-bottom:1px solid #ddd;} #lnb li > .left-depth2 > li > a:before{ content:""; display:inline-block; background:url(../images/add_icon.png) no-repeat center;width:7px; height:7px;margin-right: 5px;position: relative;top: -1px;} #lnb li > .left-depth2 > li:last-child > a, #lnb li > .left-depth2 > li.on> a{ border-bottom:0;} #lnb li > .left-depth3{width: 100%;overflow: hidden;padding: 8px 8px 15px 18px; box-sizing:border-box; background:#f9f9f9;} #lnb li > .left-depth3 > li > a{ color: #888;font-size: 14px; display:table;width:100%; height:40px;} #lnb li > .left-depth3 > li > a > span{ display:block; width:85%; word-break:break-all; display:table-cell; vertical-align:middle; line-height:1.3; font-size:13.5px; letter-spacing:-0.2px} #lnb li > .left-depth4 { width:100%; overflow:hidden; padding:0 10px 5px 10px; box-sizing:border-box;} #lnb li > .left-depth4 > li > a{ line-height:1.7; color:#666; } #lnb .left_menu-area .left-depth3 li a:hover{ text-decoration:underline;} #lnb li > .left-depth3 li.on > a > span, #lnb li > .left-depth3 li.on .left-depth4 li.on a > span{ color:#222; font-weight:500;} .left-depth3 li.on .left-depth4 li.on a > span{ text-decoration:underline;} #lnb li > .left-depth2 > li.on, #lnb li > .left-depth2 > li.on > a{ background:#e8f2fb; color:#498cc3} #lnb li > .left-depth2 > li.on > a:before{background: url(../images/on_add_icon.png) no-repeat center;} /*하위메뉴 arrow*/ #lnb li > .left-depth3 > li >a:after{ right:10px;} #lnb li > .left-depth3.none > li >a:after, #lnb li > .left-depth3 > li.none > a:after, #lnb li > .left-depth2.none > li >a:after{display:none} #lnb .app_tab-box p, #lnb .app_tab-box div {margin:0px 0 0 0;border:1px solid #cdcdcd;line-height:58px;font-size:15px;color:#484848;font-weight:400;margin-top:-1px; } #lnb .app_tab-box p.lnb1 {background:#f7f7f7 url(../images/lnb_bg1.png) no-repeat right top} #lnb .app_tab-box p.lnb2 {background:#f7f7f7 url(../images/lnb_bg2.png) no-repeat right top} #lnb .app_tab-box div.lnb3 {background:#f7f7f7 url(../images/lnb_bg3.png) no-repeat right top} #lnb .app_tab-box p a, #lnb .app_tab-box div a{ display:block; padding-left:22px;} /*제품 left 메뉴 open*/ #lnb .left-depth2, #lnb .left-depth3{display:none; overflow:hidden;} .sliding.tool2{background: #fff;border: 1px solid #cdcdcd;width: 100%; margin-left: -1px; position: relative;z-index: 2;} .sliding.tool2 li a{display: block; padding: 0 18px;line-height: 39px;color: #484848;font-size:13px; background: #fff;border-bottom: 1px solid #ddd; position:relative;} .sliding.tool2 li a:after{ content:""; display:block; background: url(../images/left_arrow.png) no-repeat center; width:6px; height:3px; position:absolute; right:18px; top:50%; margin-top:-1px; transform: rotate(90deg);} .sliding.tool2 li:last-child a{ border-bottom:0;} .sliding.tool2 li:hover a{ background: #009fe0;color: #fff;} .sliding.tool2 li:hover a:after{background: url(../images/left_arrow_on.png) no-repeat center; } /* **************************************** * * SUB RIGHT CONTENT common * **************************************** */ .sub-contents {float:right;margin:0px 0 0 0px;padding-bottom:30px;position:relative;width:800px;} .tit-sec {clear:both;position:relative; height:103px;} .tit-sec h3 {font-size:32px;color:#303030;font-weight:600;padding:0 0 13px 0; letter-spacing:-1.5px;padding-top: 21px;} .tit-sec .nav {color:#8c8c8c; position:absolute; top:65%; left:0} .tit-sec .nav > ul li a img{ display:inline-block; position:relative; top:-1px} .tit-sec .nav > ul li{ float:left; position:relative; padding-right:17px; margin-right:7px; font-size:13px} .tit-sec .nav > ul li a{display:block;} .tit-sec .nav > ul li:after{ content:""; display:block; width:10px; height:13px; background:url(../images/arrow_icons.png) no-repeat;background-position: -49px -1px; position:absolute; right:0; top:0;} .tit-sec .nav > ul li:last-child:after{display:none} .cont-default{ margin-top:32px;} .tab-list li{ float:left; width:calc( 25% - 8px); margin:0 4px; text-align:center;} .tab-list.type2 li{width:calc( 50% - 8px);} .tab-list.type3 li{width:calc( 33.333% - 8px);} .tab-list.type5 li{width:calc( 20% - 8px);} .tab-list.type6 li{width:calc( 16.65% - 8px);} .tab-list li a{display: block;background: #f4f4f4;border: 1px solid #cccccc;font-size:16px;padding: 16px 0;text-align: center;color: #474747; font-weight:400;} .sub-tbl {width: 100%; border-top: 1px solid #222; table-layout: fixed;} .sub-tbl tr th, .sub-tbl tr td{ border-bottom:1px solid #ddd; font-size:15px; color:#222; } .sub-tbl01 tbody th {background-color: #f5f5f5;padding: 0 20px;text-align: left;font-weight: 400;} .sub-tbl01 tbody td {padding: 14px 20px;color: #666;} .inner_tab{ border-bottom:1px solid #ddd} .inner_tab p{ position:relative; display:inline-block; width:49%; box-sizing:border-box;} .inner_tab p a{display:block; width:100%; height:50px; line-height: 50px;font-size: 16px;color: #666;text-align: center; border-bottom: 2px solid transparent; background-color: #fff; } .inner_tab p.active a{color: #333;border-bottom: 2px solid #333; font-weight:500} .inner_tab p:after{position: absolute;bottom: -7px;left: 50%;transform: translate(-50%, 0);display: block;content: ""; width: 0; height: 0;border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #000;} .link_box {width:100%; box-sizing:border-box; margin-top:25px;} .link_box a{font-size:12px; text-align:center; height:35px; position:relative; overflow:hidden; width:130px; line-height:30px; box-sizing:border-box;display: inline-block;zoom: 1;*display: inline; vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em;-moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);color: #d9eef7;border: solid 1px #007dcd; background-color: #5d89e8; background-image: -webkit-gradient(linear, left top, left bottom, from(#5d89e8), to(#044bd9)); background-image: -webkit-linear-gradient(top, #5d89e8, #0446c0); background-image: -moz-linear-gradient(top, #5d89e8, #0446c0); background-image: -ms-linear-gradient(top, #5d89e8, #0446c0); background-image: -o-linear-gradient(top, #5d89e8, #0446c0); background-image: linear-gradient(top, #5d89e8, #0446c0); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5d89e8', EndColorStr='#0446c0'); } .link_box a:hover{ background-color: #007ead; background-image: -webkit-gradient(linear, left top, left bottom, from(#2f6fef), to(#05338d)); background-image: -webkit-linear-gradient(top, #2f6fef, #05338d); background-image: -moz-linear-gradient(top, #2f6fef, #05338d); background-image: -ms-linear-gradient(top, #2f6fef, #05338d); background-image: -o-linear-gradient(top, #2f6fef, #05338d); background-image: linear-gradient(top, #2f6fef, #05338d); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2f6fef', EndColorStr='#05338d'); } .link_box a:active { color: #a6c1f8; background-color: #007ead; background-image: -webkit-gradient(linear, left top, left bottom, from(#0d53de), to(#2f6fef)); background-image: -webkit-linear-gradient(top, #0d53de, #2f6fef); background-image: -moz-linear-gradient(top, #0d53de, #2f6fef); background-image: -ms-linear-gradient(top, #0d53de, #2f6fef); background-image: -o-linear-gradient(top, #0d53de, #2f6fef); background-image: linear-gradient(top, #0d53de, #2f6fef); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#0d53de', EndColorStr='#2f6fef'); } .link_box a span{display: block;width: 100%;height: 100%;position: relative; top: 0; -webkit-transition: top 0.4s;-moz-transition: top 0.4s;-o-transition: top 0.4s;-ms-transition: top 0.4s;transition: top 0.4s; background: url(../images/pdf_down_ic.png) no-repeat 85% 47%;background-size: 13px;box-sizing: border-box;text-align: left;padding-left: 15%;} /* **************************************** * * SUB RIGHT product_list * **************************************** */ .cont-default .prod-search-box{width: 100%;background: #f7f7f7;border: 1px solid #cfcfcf;padding: 20px 40px; box-sizing:border-box;} .cont-default .prod-search-box select, .cont-default .prod-search-box input{background-color: #fff;border: 1px solid #d2d2d2;font-size: 14px;vertical-align: middle;height: 35px;width:100%; font-size:13px; box-sizing:border-box; padding-left:10px} .cont-default .prod-search-box span{display:inline-block;} .cont-default .prod-search-box span > input{ font-size:13px; text-align:center;display:inline-block; padding:0 25px; background:#004fa3; color:#fff; height:34px; box-sizing:border-box; line-height:32px; width:100%;} .cont-default .prod-search-box input{ width: 57%;margin-right: 5px;} .cont-default .prod-search-box .prod-search-inner-box.box-bottom{ margin-top:10px} .cont-default .prod-search-box .prod-search-inner-box .sel_box{ float:left;width: calc( 30.333% - 7px); margin-right:10px;} .cont-default .prod-search-box .prod-search-inner-box .sel_box:last-child{ margin-right:0;} .cont-default .prod-search-box .prod-search-inner-box .sel_box select{width:100%;} .cont-default .product_List-area{ margin-top:15px} .cont-default .product_List-area ul{width:100%; position:relative;} .cont-default .product_List-area ul li { float:left; position:relative;width: calc(25% - 10px); height:223px;margin:15px 13.3px 0 0; box-sizing:border-box;} .cont-default .product_List-area ul li:nth-child(4n){ margin-right:0;} .cont-default .product_List-area ul li > a{ display:block; width:100%; box-sizing:border-box; text-align:center; border:1px solid #ddd; height:100%;} .cont-default .product_List-area ul li > a >div{ width:100%; height:calc(100% - 51px); box-sizing:border-box;} .cont-default .product_List-area ul li > a >div > figure{ width:100%; height:100%; overflow:hidden; box-sizing:border-box; display:table;} .cont-default .product_List-area ul li > a .pro_img{overflow:hidden; width:100%!important; display:table-cell; vertical-align:middle; margin: 0 auto;} .cont-default .product_List-area ul li > a .pro_img img{ width:100%;} .cont-default .product_List-area ul li > a .pro_info{ width:100%; height:51px; min-height:51px; max-height:51px; box-sizing:border-box;} .cont-default .product_List-area ul li > a .pro_info p{ font-size:13px; color:#333; font-weight:400; display:table; width:100%; height:100%;} .cont-default .product_List-area ul li > a .pro_info p span{display:table-cell; vertical-align:middle; width:100%; height:100%;} .cont-default .product_List-area ul li:hover .over{display:block;} .cont-default .product_List-area ul li .over{ position:absolute; left:0; top:0;width:100%; display:none} .cont-default .product_List-area ul li .over .over_inner{ position:relative;width:100%;} .cont-default .product_List-area ul li .over .over_inner > div .arrow{ position:absolute; left:50%; top:50%; margin:-35.5px 0 0 -17.5px} .cont-default .product_List-area ul li:hover a p{ color:#004fa3} /* **************************************** * * SUB RIGHT product_view * **************************************** */ #productView{ position:relative; width:100%; margin-top:40px;} #productView .top_area{} #productView .top_area .top_sec > div{ float:left; position:relative;} #productView .top_area .top_sec > div.view_img{ border:1px solid #ddd; text-align:center; width:320px; height:320px; box-sizing:border-box; margin-right:40px; overflow:hidden;} #productView .top_area .top_sec > div.view_img .inner_table{width:100%; height:100%; display:table; text-align:center;} #productView .top_area .top_sec > div.view_img .inner_table figure{ display:table-cell; vertical-align:middle; width:100%; height:100%} #productView .top_area .top_sec > div.view_img .inner_table figure > img{ width:100%; height:auto;} #productView .top_area .top_sec > div.view_info{width:440px;} #productView .top_area .top_sec > div.view_info .view_info-title{ border-bottom:1px solid #aaa} #productView .top_area .top_sec > div.view_info .view_info-title h2{ color:#101010; font-size:25px; padding:15px 0; font-weight:500;} #productView .top_area .top_sec > div.view_info .view_info-title h2 span{ color:#fff; display:inline-block; padding:8px 15px; font-size:12px; background:#004b9a; margin-bottom:8px;} #productView .top_area .top_sec > div.view_info .feature-txt{box-sizing:border-box; width:100%; padding:15px 0 0 10px} #productView .top_area .top_sec > div.view_info .feature-txt dl dt{ font-size:18px; color:#111; position:relative; padding-left:30px; background:url(../images/prd_view_comm_tit_icon01.jpg) no-repeat left center; padding:15px 0 15px 45px; background-size:30px; font-weight:500; margin-bottom:10px} #productView .top_area .top_sec > div.view_info .feature-txt dl dd span{ display:block;font-size:14px; margin-bottom:8px; line-height:1.4; position:relative; color:#555; letter-spacing:-0.5px; word-break:keep-all; } /*#productView .top_area .top_sec > div.view_info .feature-txt dl dd span:before{ content:""; display:block; position:absolute; left:0; top:10px; width:3px; height:3px; background:#555;}*/ #productView .top_area .top_sec > div.view_info .feature-txt .link_box {width:100%; box-sizing:border-box; margin-top:25px; text-align:center;} #productView .top_area .top_sec > div.view_info .feature-txt .link_box a{font-size:14px; text-align:center; height:35px; position:relative; overflow:hidden; width:130px; line-height:30px; box-sizing:border-box;display: inline-block;zoom: 1;*display: inline; vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em;-moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);color: #d9eef7;border: solid 1px #007dcd; background-color: #5d89e8; background-image: -webkit-gradient(linear, left top, left bottom, from(#5d89e8), to(#044bd9)); background-image: -webkit-linear-gradient(top, #5d89e8, #0446c0); background-image: -moz-linear-gradient(top, #5d89e8, #0446c0); background-image: -ms-linear-gradient(top, #5d89e8, #0446c0); background-image: -o-linear-gradient(top, #5d89e8, #0446c0); background-image: linear-gradient(top, #5d89e8, #0446c0); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5d89e8', EndColorStr='#0446c0'); } #productView .top_area .top_sec > div.view_info .feature-txt .link_box a:hover{ background-color: #007ead; background-image: -webkit-gradient(linear, left top, left bottom, from(#2f6fef), to(#05338d)); background-image: -webkit-linear-gradient(top, #2f6fef, #05338d); background-image: -moz-linear-gradient(top, #2f6fef, #05338d); background-image: -ms-linear-gradient(top, #2f6fef, #05338d); background-image: -o-linear-gradient(top, #2f6fef, #05338d); background-image: linear-gradient(top, #2f6fef, #05338d); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2f6fef', EndColorStr='#05338d'); } #productView .top_area .top_sec > div.view_info .feature-txt .link_box a:active { color: #a6c1f8; background-color: #007ead; background-image: -webkit-gradient(linear, left top, left bottom, from(#0d53de), to(#2f6fef)); background-image: -webkit-linear-gradient(top, #0d53de, #2f6fef); background-image: -moz-linear-gradient(top, #0d53de, #2f6fef); background-image: -ms-linear-gradient(top, #0d53de, #2f6fef); background-image: -o-linear-gradient(top, #0d53de, #2f6fef); background-image: linear-gradient(top, #0d53de, #2f6fef); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#0d53de', EndColorStr='#2f6fef'); } #productView .top_area .top_sec > div.view_info .feature-txt .link_box a:last-child{ color: #e9e9e9; border: solid 1px #555; background-color: #6e6e6e; background-image: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); background-image: -webkit-linear-gradient(top, #888, #575757); background-image: -moz-linear-gradient(top, #888, #575757); background-image: -ms-linear-gradient(top, #888, #575757); background-image: -o-linear-gradient(top, #888, #575757); background-image: linear-gradient(top, #888, #575757); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#888', EndColorStr='#575757'); } #productView .top_area .top_sec > div.view_info .feature-txt .link_box a:last-child:hover{ background-color: #616161; background-image: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b)); background-image: -webkit-linear-gradient(top, #757575, #4b4b4b); background-image: -moz-linear-gradient(top, #757575, #4b4b4b); background-image: -ms-linear-gradient(top, #757575, #4b4b4b); background-image: -o-linear-gradient(top, #757575, #4b4b4b); background-image: linear-gradient(top, #757575, #4b4b4b); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#757575', EndColorStr='#4b4b4b'); } #productView .top_area .top_sec > div.view_info .feature-txt .link_box a:last-child:active{ color: #afafaf; background-color: #575757; background-image: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888)); background-image: -webkit-linear-gradient(top, #575757, #888); background-image: -moz-linear-gradient(top, #575757, #888); background-image: -ms-linear-gradient(top, #575757, #888); background-image: -o-linear-gradient(top, #575757, #888); background-image: linear-gradient(top, #575757, #888); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#575757', EndColorStr='#888'); } #productView .top_area .top_sec > div.view_info .feature-txt .link_box a span{display: block;width: 100%;height: 100%;position: relative; top: 0; -webkit-transition: top 0.4s;-moz-transition: top 0.4s;-o-transition: top 0.4s;-ms-transition: top 0.4s;transition: top 0.4s; background: url(../images/pdf_down_ic.png) no-repeat 80% 47%;background-size: 13px;box-sizing: border-box;text-align: left;padding-left: 24%;} /* #productView .top_area .top_sec > div.view_info .feature-txt .link_box a:hover span.over, #productView .top_area .top_sec > div.view_info .feature-txt .link_box a:focus span.over, #productView .top_area .top_sec > div.view_info .feature-txt .link_box a:hover span.out, #productView .top_area .top_sec > div.view_info .feature-txt .link_box a:focus span.out{top:-35px;} */ #productView .top_area .arrac_files{ width:100%; margin-top:20px; background:#f7f7f7} #productView .top_area .arrac_files .files_inner{ display:table; width:100%; position:relative; height:60px;} #productView .top_area .arrac_files h4, #productView .top_area .arrac_files ul{ display:table-cell; vertical-align:middle} #productView .top_area .arrac_files h4{ width:20%; text-align:center; color:#fff; background:#999; font-size:18px} #productView .top_area .arrac_files ul{ width:80%; padding-left:15px} #productView .top_area .arrac_files ul li { float:left; padding:0 15px;} #productView .top_area .arrac_files ul li a{ font-size:14px; color:#444; font-weight:500} #productView .top_area .arrac_files ul li a, #productView .top_area .arrac_files ul li a span{display:block;} #productView .top_area .arrac_files ul li a span i{ display:inline-block; width:30px; height:23px; background:url(../images/icon-file.png) no-repeat; background-position:0 -180px; vertical-align:middle;} /* #productView .top_area .arrac_files ul li:nth-child(2) a span i{ background-position:-180px -180px} #productView .top_area .arrac_files ul li:nth-child(3) a span i{ background-position:-300px -180px} #productView .top_area .arrac_files ul li:nth-child(4) a span i{ background-position:-360px -180px} */ #productView .top_area .arrac_files ul li a:hover{ color:#004b9a} #productView .editor_area { margin-top:60px;} #productView .editor_area .editoe_tit{ border-bottom:2px solid #222;} #productView .editor_area .editoe_tit h2{ font-size:25px; color:#101010; font-weight:500; background:url(../images/prd_view_comm_tit_icon03.jpg) no-repeat left center; padding:25px 0 25px 60px;} #productView .editor_area #editor_detail{ padding:30px 0 20px; width:100%; box-sizing:border-box; font-size:14px; line-height:1.7; color:#444} #productView .editor_area #editor_detail figure{ width:100%; box-sizing:border-box; } #productView .editor_area #editor_detail figure img{ } /* **************************************** * * SUB COMPANY * **************************************** */ /*==HISTORY==*/ .history-year-box{position:relative; background:url(../images/history_line.gif) repeat-y 206px 0; margin-top:50px } .history-year-box .history-year-left-con{position:absolute; top:0px; left:0px; } .history-year-box .history-year{padding:0 10px 0 5px; margin-bottom:80px; text-align:center;padding-top:12px; border-top:2px solid #004fa3;color:#004fa3; font-size:28px;font-weight: 600;letter-spacing: -1.5px;} .history-year-box .history-year-right-con{position:relative; border-top:1px solid #000; margin-left:255px; padding:10px 13px 45px 13px;} .history-year-box .history-year-right-con:before{position:absolute; top:19px; left:-57px; content:""; width:11px; height:11px; border:3px solid #004fa3; background-color:#fff; -webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;} .history-year-box .history-year-right-con:after{content:""; position:absolute; top:26px; left:-50px; content:""; width:3px; height:3px; background-color:#004fa3; } .history-year-box .history-year-right-con > div.inner_box{border-bottom: 1px solid #aaa;padding: 20px 13px 35px 13px; position:relative;} .history-year-box .history-year-right-con > div.inner_box:first-child{ padding-top:5px} .history-year-box .history-year-right-con dl{position:relative; padding-left:110px; color:#666; font-size:15px; letter-spacing:-0.5px; line-height:1.5; margin-bottom:10px} .history-year-box .history-year-right-con dl.mar40{margin-bottom:40px;} .history-year-box .history-year-right-con dl dt{position:absolute; top:0px; left:0px; color:#222; font-size:17px; font-weight:500} .history-year-box .history-year-right-con dl dd strong, .history-year-box .history-year-right-con dl dd span{ display:block;} .history-year-box .history-year-right-con dl dd i{ font-style:normal; font-size:12px;} /*==인재상==*/ .recruit-info {width: 100%;margin-bottom:6%;border-bottom: 1px dashed #ddd;padding-bottom: 6%;} .recruit-info dt, .recruit-info dd {display:block; width:100%; text-align:center;} .recruit-info dt { width:38%; margin:0 auto 10px;} .recruit-info dt img{ width:100%;} .recruit-info dd{ margin-top:15px} .recruit-info dd > h3{font-size:30px; line-height:55px; color:#111; font-weight:300; letter-spacing:-0.75px; word-break:keep-all;} .recruit-info dd > h3 b{font-size:400;} .recruit-info dd > p{font-size:20px; line-height:24px; color:#333; font-weight:300; letter-spacing:-0.75px; word-break:keep-all;} .recruit-list-box{width:100%;} .recruit-list-box > img{max-width:100%; margin-bottom:3%;} .recruit-list-con{width:100%;} .recruit-list-con > li{float:left; width:20.5%; text-align:center;} .recruit-list-con > li.center{margin-left:6%;} .recruit-list-con > li .recruit-m-img{max-width:100%; margin:0px auto; display:none;} .recruit-list-con > li h4{font-size:27.5px; line-height:33px; color:#004fa3; font-weight:600; letter-spacing:-0.75px; margin-bottom:5%;} .recruit-list-con > li p{font-size:18px; line-height:22px; color:#111; font-weight:300; letter-spacing:-0.75px; word-break:keep-all;} /*==복리후생==*/ .welfare-page{} .welfare-tit-img .img{width: 100%; height: auto;} .welfare-tit-img .img img{width: 100%; height: 100%;} .welfare-tit-img .txt-con{width: 84%; background-color: #fff; margin: -60px auto 0; position: relative;} .welfare-tit-img .txt-con > div{text-align: center; padding: 27px 20px;} .welfare-tit-img .txt-con > div p{font-size: 18px; font-weight: 300; line-height:1.7; letter-spacing: -0.35px; color: #333;} .welfare-tit-img .txt-con > div p span{font-weight: 400; color: #004fa3;} .welfare-list-wrapper{margin-top:50px;} .welfare-list-wrapper ul{margin: -1%;} .welfare-list-wrapper ul li{width: 48%; margin: 1%; float: left;border: 1px solid #ccc;background-color: #f3f3f3; box-sizing:border-box;} .welfare-list-wrapper ul li > div{display: table; width:100%; padding: 20px 10% 20px 12%; box-sizing:border-box;} .welfare-list-wrapper ul li .txt-con{display: table-cell; vertical-align: middle; width: 77%;} .welfare-list-wrapper ul li .txt-con .tit{position: relative; font-size:20px; font-weight: 400; letter-spacing: -0.35px; color: #333;} .welfare-list-wrapper ul li .txt-con .tit:before{position: absolute; top:9px; left: -6%; content: ''; width:5px; height:5px; background:#004fa3; border-radius:50%;} .welfare-list-wrapper ul li .txt-con .txt{margin-top: 5px; height: 56px; font-size: 16px; line-height: 1.8; font-weight: 300; letter-spacing: -0.35px; color: #545454;} .welfare-list-wrapper ul li .icon-con{display: table-cell; vertical-align: middle; width: 23%; text-align: center;} .welfare-list-wrapper ul li .icon-con span{display: inline-block;height: 85px;width: 85px;border-radius: 50%;overflow: hidden;background: #fff;vertical-align: middle;text-align: center; box-sizing: border-box;padding-top: 4px;} .welfare-list-wrapper ul li .icon-con span img{height: 100%;} /*==채용정보==*/ .career-step-container{position:relative; width:100%; padding:0 22px; left:-22px; border-radius:236px; -moz-border-radius:236px; -webkit-border-radius:236px; -o-border-radius:236px; margin-bottom:60px; overflow:hidden; background:url(../images/career_step_bg.png) no-repeat center top; background-size:cover; box-sizing:border-box;} .career-step-box{display:table; width:100%;} .career-step-box > dt, .career-step-box > dd{display:table-cell; vertical-align:middle; padding:20px 0;} .career-step-box > dt{width:15%;} .career-step-txt-con{padding-left:10px;} .career-step-txt-con > h3{font-size:21px; color:#020202; font-weight:500; letter-spacing:-0.5px;} .career-step-txt-con > h3:after{display:block; content:""; width:30px; height:3px; background-color:#0063a7; margin:15px 0 0;} .career-step-txt-con > p{font-size:15px; line-height:23px; color:#2e2e2e; letter-spacing:-0.75px; opacity:0.69;filter:Alpha(opacity=69); word-break:keep-all;} .career-step-box > dd{width:85%;} .career-step-list{text-align:center;} .career-step-list > li{display:inline-block; vertical-align:top; position:relative; width:18.6%; padding-top:18.6%; margin-left:1%;} .career-step-list > li.career-step-list01{background:url(../images/career_step_list_bg01.png) no-repeat center center; background-size:cover;} .career-step-list > li.career-step-list02{background:url(../images/career_step_list_bg02.png) no-repeat center center; background-size:cover;} .career-step-list > li.career-step-list03{background:url(../images/career_step_list_bg03.png) no-repeat center center; background-size:cover;} .career-step-list > li.career-step-list04{background:url(../images/career_step_list_bg04.png) no-repeat center center; background-size:cover;} .career-step-list > li.career-step-list05{background:#004fa3; border-radius:100%; -moz-border-radius:100%; -webkit-border-radius:100%; -o-border-radius:100%; overflow:hidden;} .career-step-inner{position:absolute; top:0; left:0; bottom:0; right:0;} .career-step-inner > div{display:table; width:100%; height:100%;} .career-step-inner > div >div{ display:table-cell; width:100%; height:100%; position:relative; vertical-align:middle;} .career-step-inner > div >div > img{ width:32%; height:auto; margin:0 auto 5px;} .career-step-inner > div h3{width:100%; vertical-align:middle;} .career-step-inner > div h3 i{color:#000;} .career-step-inner > div h3 p{font-size:16px; line-height:1.5; color:#080808; font-weight:400; letter-spacing:-0.5px} .career-step-list > li.career-step-list01 .career-step-inner > div h3 i, .career-step-list > li.career-step-list01 .career-step-inner > div h3 p{color:#004fa3;} .career-step-list > li.career-step-list05 .career-step-inner > div h3 i, .career-step-list > li.career-step-list05 .career-step-inner > div h3 p{color:#fff;} .career-comm-info-container{ border-top:2px solid #222} .career-comm-info-box{display:table; width:100%; margin-bottom:17px; padding:25px 0; border-bottom:1px dashed #ddd} .career-comm-info-box:last-child{ border:0; margin-bottom:0; padding-bottom:0} .career-comm-info-box dt, .career-comm-info-box dd{display:table-cell; vertical-align:top;} .career-comm-info-box dt{width:220px; padding:0 20px; text-align:left; font-weight:400; box-sizing:border-box} .career-comm-info-box dt h3{font-size:19px; line-height:1.5; color:#222; font-weight:400; letter-spacing:-0.5px; word-break:keep-all;} .career-comm-info-box dt span{display:block; font-size:16px; color:#aaa; margin-bottom:5px} .career-comm-info-box dd{border-left:1px solid #eee; padding:4px 0 22px 30px;} .career-comm-info-box dd > p{font-size:16px; line-height:1.6; color:#666; font-weight:300; letter-spacing:-0.75px;word-break: keep-all;} .career-comm-info-box dd > .career-comm-btn{display:inline-block; padding:8px 36px; text-align:center; font-size:16px; line-height:34px; color:#fff; letter-spacing:-0.5px; background-color:#1262aa; margin-top:17px;} .career-comm-info-box.type2, .career-comm-info-box.type2 dt, .career-comm-info-box.type2 dd{display:block; width:auto;} .career-comm-info-box.type2 dt{padding-right:0; margin-bottom:35px;} .career-comm-info-box.type2 dt h3, .career-comm-info-box.type2 dt span{display:inline-block;} .career-comm-info-box.type2 dt span{margin-left:10px;} .career-comm-info-box.type2 dd{border-left:0; padding-left:0;} /*==오시는 길==*/ .location_wrap{ margin-top:40px} .location_wrap .map_bx {width: 100%;height:400px;} .location_wrap .map_info {background:#004fa3;padding: 35px 25px;} .location_wrap .map_info span {color: #fff;font-size:15px;display: inline-block;padding-left: 30px; line-height: 28px; background-repeat: no-repeat; background-position: left center;letter-spacing: -0.3px;background-size: 20px;} .location_wrap .map_info span.add {background-image: url(../images/add_i.png);} .location_wrap .map_info span.tel {background-image: url(../images/tel_i.png);} .location_wrap .map_info span.fax {background-image: url(../images/fax_i.png);margin-left:15px;} .location_wrap .subway_tt {font-size:20px; letter-spacing: -1px;padding-bottom: 20px;border-bottom: 1px solid #ddd;margin-top: 60px;} .location_wrap .subway_route {margin-top: 30px;} .location_wrap .subway_route.row_0{ margin-right:0; margin-left:0;} .location_wrap .subway_route .col-lg-6 {display: table; width: 50%; float:left;} .location_wrap .subway_route .subway_line { float: left; margin-right: 15px;width: 75px;height: 75px;line-height: 58px;box-sizing: border-box;border-radius: 50%;text-align: center;font-size:14px; font-weight: 700;letter-spacing: -0.3px;} .location_wrap .subway_route .txt {display: table-cell;vertical-align: middle;width: 100%; font-size:15px;color: #666;} .location_wrap .subway_route .txt span {font-weight: 500;color: #000;display: block; margin-bottom: 7px;font-size: 17px;} .location_wrap .subway_route .subway_line.line9 {border: 8px solid #606d00; background:url(../images/local_icon.png) no-repeat center;background-position: 18px 10px;background-size: 38px;} .location_wrap .subway_route .subway_line.line5 {border: 8px solid #395cb4;background:url(../images/local_icon.png) no-repeat center;background-position: 12px -37px;background-size: 38px;} /*==PISCO 네트워크==*/ .locationDiv, .agency_list-box, #globalNetwork{width:100%; padding: 40px 0 0px;} .locationDiv > div { float:left; position:relative; width:60%;} .locationDiv > div.img_wrap{ width:40%;} .locationDiv > div.img_wrap > img{ width:100%; max-width:100%;} .locationDiv > div.map_info{} .locationDiv > div.map_info dt{font-size:18px; color:#333; padding:0 0 10px 0px;} .locationDiv > div.map_info dd:nth-of-type(1){border-top:1px solid #333;} .locationDiv > div.map_info dd{padding:15px 0 15px 20px; border-bottom:1px solid #ddd; position:relative; box-sizing:border-box;} .locationDiv > div.map_info dd .office_name{display:inline-block;font-size:16px; color:#2c53af;padding-bottom:10px;} .locationDiv > div.map_info dd ul li{font-size:13px; color:#666; line-height:23px; letter-spacing:-0.2px} .locationDiv > div.map_info dd ul li a.location_btn{position:absolute; right:0; bottom:25px; padding:4px 35px 4px 15px; color:#333; font-size:12px; border:1px solid #bbb; background:url("../images/ico_map.png") right 13px center no-repeat;background-size: 19px;} .locationDiv > div.map_info dd ul li span:first-child{margin-left:0;} .locationDiv > div.map_info dd ul li span{position:relative; font-size:14px;color:#333; padding:0 10px 0 8px; margin-left:10px; } .locationDiv > div.map_info dd ul li span:before{ position:absolute; bottom:0; left:0px; content:''; width:10px; height:16px; background:url("../images/dot.png") 0 50% no-repeat; display:inline-block; } .net_mapImg{position: fixed; top:43%; left: 51%;background: #fff; z-index: 11;box-sizing: border-box;} .net_mapImg2{position: fixed; top:43%; left: 50.5%;background: #fff; z-index: 11;box-sizing: border-box;} /*==PISCO 네트워크 - 대리점안내==*/ .agency_list-box .arti_box.last{ margin-top:60px} .agency_list-box h2 {margin: 0;font-size: 26px;font-weight: 500;text-align: left;color: #000;margin-bottom: 40px; border-bottom:1px solid #ddd; position:relative;} .agency_list-box h2 span{display:inline-block; position:relative;padding-bottom:20px;} .agency_list-box h2 span:after{ width:100%; height:2px; background:#000; content:""; display:block; position:absolute; left:0; bottom:0} .agency_list {border-top: 1px solid #000; box-sizing:border-box; width:100%;} .tit-sub3 + .agency_list {margin-top: 18px;} .agency_list-box h3{ background:url(../images/tit_dot.png) no-repeat left center; padding-left:22px; font-size:20px; color:#222; font-weight:500; } .agency_list > li {position: relative; padding: 24px 30px;border-bottom: 1px solid rgba(53, 54, 49, 0.2); box-sizing:border-box; width:100%;} .agency_list dl {position: relative;margin: 0;} .agency_list dt {margin: 0;margin-bottom:13px;font-size: 17px;color: #000;} .agency_list dt strong{ color:#004fa3} .agency_list .btn-t2 {margin-left: 30px;font-size: 14px;color: #000;} .agency_list dd {margin: 0;font-size: 15px;color: #333; word-break:keep-all; line-height:1.5;} .agency_list dd:not(:last-child) {margin-bottom:4px;} .agency_list dd:nth-child(2) { width: 75%;} .agency_list dd:nth-child(3), .agency_list dd:nth-child(4) {display: inline-block; color: #41628e !important;} .agency_list dd:nth-child(4):not(.btn-area) {position: relative;padding-left: 17px;} .agency_list dd:nth-child(4):not(.btn-area):before {position: absolute;top: 50%;left: 0;width: 1px;height: 15px;margin-left: 7px;background: #41628e;content: '';-webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);transform: translateY(-50%);} .agency_list > li a{ color:#41628e !important} .agency_list > li a:hover{ text-decoration:underline;} .agency_list .btn-area {position: absolute;top: 50%;right: 0;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);} .agency_list .map-area {display: none; overflow: hidden;clear: both;position: relative;top: 25px;width: calc(100% + 60px);height: 490px;margin: 0 0 0 -30px;border: 1px solid #e3e3e3;background: #e3e3e3;} .agency_list > li.active .map-area{display:block;} .agency_list + .tit-sub3 {margin-top: 50px;} .agency_list .btn-t1 {display: inline-block;position: relative;height: 40px;padding: 0 23px 0 42px;border: 1px solid #000;background: transparent;font-size: 14px;font-weight: 500;line-height: 38px;text-align: center;color: #000; background:url(../images/ico_map.png) no-repeat 10% center;} .agency_list .btn-t1:hover, .agency_list .btn-t1.active{border-color:#004fa3;background-color:#004fa3;color: #fff; background-image:url(../images/ico_map_on.png);} /*글로벌 네트워크*/ .global-network-List{position: relative;max-width:100%;margin: 0 auto; height:500px;/*background-image: url(../images/busi_map2.png);*/background-repeat: no-repeat;background-size:100%; background-position: 50% 50%; background-color:#f9f9f9; width:100%;/*임시*/ background-image:url(../images/worldwide-map-img2.jpg); } #globalNetwork .global_inner {display: table-cell;vertical-align: middle; } #globalNetwork .global_inner .country-item{ position:absolute; color:#000; cursor:pointer;transition: margin 0.4s ease 0s;top: 50%; left: 50%;} #globalNetwork .global_inner .country-item:before{content: '';position: absolute; display: inline-block;top:0;left: -20px; width:12px;height:18px; background-size:12px; background-repeat:no-repeat;} #globalNetwork .global_inner .country-item .country-item-in{transform: translateX(0);position: relative;} #globalNetwork .global_inner .country-item .country-item-in:before{content: '';display: block;position: absolute;width:15px;height:23px;top:10px;right: 105%;background:url(../images/busi_loca_icon1.png) no-repeat ;opacity: 0;} #globalNetwork .global_inner .country-item .country-item-in h3{ position:relative; padding-bottom:10px} #globalNetwork .global_inner .country-item .country-item-in h3 span{ font-size:16px; font-weight:500; display:inline-block;} #globalNetwork .global_inner .country-item .country-item-in .country_list{ max-height: 0;overflow: hidden;} #globalNetwork .global_inner .country-item .country-item-in .country_list ul{} #globalNetwork .global_inner .country-item .country-item-in .country_list ul li{ margin:10px 0 5px; position:relative; width:100%;box-sizing:border-box; font-size:13px; font-weight:300; word-break:break-all; letter-spacing:0.3px} #globalNetwork .global_inner .country-item.item_korea:before {width: 37px;height: 36px;top: 20px;left: 6px; background-position: 0px -102px;margin: 0;animation-duration: 2s;animation-name: korea;animation-iteration-count: infinite; background-image:url(../images/icons.png); background-size:auto;} #globalNetwork .points{position: absolute;top:25px;left:3%;z-index: 10;} #globalNetwork .points p{padding: 2px 0 2px 20px;margin-right:15px;font-size:14px;color: #222; background-position:0 0; background-size:12px auto; background-repeat: no-repeat; font-weight:500; display:inline-block;} #globalNetwork .points p.p1{ background-image:url(../images/busi_loca_icon1.png)} #globalNetwork .points p.p2{ background-image:url(../images/busi_loca_icon4.png)} #globalNetwork .points p.p3{ background-image:url(../images/busi_loca_icon2.png);} @keyframes korea { 0% {opacity: 1;} 50% {opacity: 0.5;} 100% {opacity: 1;} } #globalNetwork .global_inner .country-item.agent:before{ background-image:url(../images/busi_loca_icon1.png);} #globalNetwork .global_inner .country-item.C_body:before{ background-image:url(../images/busi_loca_icon4.png);} #globalNetwork .global_inner .country-item.factory:before{ background-image:url(../images/busi_loca_icon2.png);} /*좌표*/ #globalNetwork .global_inner .country-item.item_europe{margin-left: -275px;margin-top: -105px;} #globalNetwork .global_inner .country-item.item_middle-east{margin-top: -45px;margin-left: -205px;} #globalNetwork .global_inner .country-item.item_asia{margin-top: -110px;margin-left: -40px;} #globalNetwork .global_inner .country-item.item_korea{margin-top: -68px;margin-left: -85px;} #globalNetwork .global_inner .country-item.item_north-america{margin-top: -55px;margin-left: 200px;} #globalNetwork .global_inner .country-item.item_south{margin-top: 85px;margin-left: 265px;} #globalNetwork .global_inner .country-item.item_aust{margin-top: 115px;margin-left: 22px;} #globalNetwork .global_inner .country-item.item_africa{margin-left: -250px;margin-top: 100px;} #globalNetwork .global_inner .country-item.item_canada{margin-left: 150px; margin-top: -80px;} #globalNetwork .global_inner .country-item.item_usa{ margin-left: 269px;margin-top: -70px;} #globalNetwork .global_inner .country-item.item_Philippines{margin-left: -52px;margin-top: 20px;} #globalNetwork .global_inner .country-item.item_japan{margin-left: -2%; margin-top: -7%;} /*active*/ #globalNetwork .global_inner .country-item.active{color: #fff; transition: color 0.3s linear 0.2s;} #globalNetwork .global_inner .country-item.active:before{width: 36px;height: 36px;margin: -14px 0 0 -14px;background-position: -264px -10px;} /*#globalNetwork .global_inner .country-item .country-item-in.active:before {background-position: -264px -10px;width: 36px;height: 36px;margin: -14px 0 0 -14px;}*/ #globalNetwork .global_inner .country-item.active .country-item-in {position: relative;transform: translateX(10px);transition: transform 0.2s linear 0s, padding 0.2s linear 0s, background-color 0.3s linear 0.3s;background-color:#004fa3;padding: 15px 25px 15px 15px;border-radius: 2px;z-index:1; min-width:125px} #globalNetwork .global_inner .country-item.active .country-item-in:before {opacity: 1;transition: opacity 0.3s linear 0.3s;} #globalNetwork .global_inner .country-item.active .country_list{display:block; max-height:1000px; transition: max-height 0.3s linear 0.3s; } #globalNetwork .global_inner .country-item.active h3{ color:#fff;} /*==사업부별 연락처 안내==*/ .contact-con{ margin-top:40px} .contact-con .img-con {float:left; width: calc(100% - 330px); height:352px; background:url("../images/contact_img.jpg") no-repeat;} .contact-con .img-con img {display:none;} .contact-con .txt-con-wrap {float:left; width:330px; height:352px; } .contact-con .txt-con { background-color: #004fa3; display:table; width:100%; height: 100%; text-align:center; } .contact-con .txt-con .txt-con-inner { display:table-cell; vertical-align:middle;} .contact-con .txt-con .txt {font-size:18px; line-height:27px; letter-spacing:-0.75px; color:rgba(255,255,255,0.7); position:relative; padding:25px 0;} .contact-con .txt-con .txt:before {content:""; display:block; width: 18px; height:3px; background-color: #009fe0; position:absolute; bottom:0; left:50%; margin-left: -9px; } .contact-con .txt-con .go-inquiry-btn {display:inline-block; width:150px; height:46px; background-color:#053f7d; margin-top: 30px; -webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;} .contact-con .txt-con .go-inquiry-btn em {font-size:14px; line-height: 46px; letter-spacing:-0.75px; color:rgba(255,255,255,0.85);} .contact-con .txt-con-wrap:hover .go-inquiry-btn {background-color: #009fe0; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;} .contact-con .tit-box{ padding:30px 0 0;} .contact-con .tit-box .job-2dep-tit {float: left;background: url(../images/tit_dot.png) no-repeat left center;padding-left: 22px;font-size: 20px;color: #222;font-weight: 500; line-height: 36px; } .contact-con .tit-box .job-1dep-tit {float: right; font-size:14px; line-height: 36px;color: #888; font-weight: 400;} /*== 제품문의 ==*/ /* 제품문의 :: 쓰기, 문의폼 :: 개인정보취급방침 */ .bbs-inquiry-agree-con{margin-bottom:50px;} .bbs-inquiry-agree-con .agree-tit{color:#464646; font-size:18px; letter-spacing:-0.3px; font-weight:500; padding-bottom:15px;} .inquiry-agreement-con{border:1px solid #ddd; height:130px; overflow-y:auto; overflow-x:hidden; padding:20px; background-color:#f6f6f6; line-height:1.6;} .bbs-inquiry-agree-con .agree-txt{padding-top:10px; font-size:15px; letter-spacing:-0.3px; color:#868686;} .inquiry-essential-txt{text-align:right; color:#373737; font-size:11px; letter-spacing:-0.3px; padding-bottom:10px;} .essential-icon{color:#cf0505;} /* 제품문의 :: 쓰기, 문의폼 :: 작성영역 */ .bbs-write-tbl{width:100%; border-top:1px solid #333;} .bbs-write-tbl th,.bbs-write-tbl td{padding:8px 10px; letter-spacing:-0.5px; border-bottom:1px solid #ddd;} .bbs-write-tbl th{color:#464646; font-size:14px; font-weight:500; text-align:left;} .bbs-write-tbl .write-input, .bbs-write-tbl .write-select, .bbs-write-tbl .write-textarea{ height:34px; border:0px; width:65%; background-color:#fff; border:1px solid #d2d2d2; font-size:14px; vertical-align:middle; } .bbs-write-tbl .write-input:focus{border-color:#333;} .bbs-write-tbl .write-input{text-indent:10px;} .bbs-write-tbl .write-select{height:38px; padding-left:2%} .bbs-write-tbl .write-textarea{width:100%; height:200px; resize:none;} .bbs-write-tbl td input[type="file"]{height:auto; padding:10px 0;text-indent:0; border:0;} .bbs-write-tbl td .write-sub-txt{color:#888; margin-left:10px; font-size:11px; color:#aaa; font-family:"돋움",dotum,sans-serif; letter-spacing:-0.5px;} .bbs-write-tbl td .write-sub-txt2{display:block; color:#888; margin-top:5px; font-size:11px; color:#aaa; font-family:"돋움",dotum,sans-serif; letter-spacing:-0.5px;} .bbs-write-tbl .hypen{display:inline-block; vertical-align:middle;width:12px; margin:0 5px; text-align:center;} /* 제품문의 :: 쓰기, 문의폼 :: 기타 */ .bbs-write-tbl .input-check{padding:10px 0;} .bbs-write-tbl .input-check span{margin-right:30px;} .bbs-write-tbl .input-check span label{vertical-align:middle; font-size:14px;} .address-fieldset .write-input{margin-top:6px;} .address-fieldset .write-input:first-child{margin-top:0;} .bbs-write-tbl .address-btn{display:inline-block; min-width:114px; padding:0 10px; height:38px; border:1px solid #464646; vertical-align:middle; text-align:center; color:#464646; font-size:14px; font-weight:400; margin-left:10px;} .bbs-write-tbl .address-btn:hover{background-color:#464646; color:#fff;} /* 제품문의 :: 버튼 */ .cm-btn-controls{overflow:hidden; text-align:center; padding-top:30px;} .cm-btn-controls.cm-btn-align-left{text-align:left;} .cm-btn-controls.cm-btn-align-right{text-align:right;} .cm-btn-controls .left-btn-controls{float:left; } .cm-btn-controls .right-btn-controls{float:right;} .cm-btn-controls input,.cm-btn-controls a{display:inline-block; width:150px; height:42px; border:0; color:#fff; background-color:#000; font-size:15px; margin:0 2px 5px 2px; cursor:pointer; vertical-align:top; text-align:center; font-weight:400; -webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;border-radius:2px; } .cm-btn-controls a{line-height:42px;} .cm-btn-controls.cm-btn-long-controls button,.cm-btn-controls.cm-btn-long-controls a{width:100%; height:50px; margin:0px; margin-bottom:5px;} .cm-btn-controls.cm-btn-long-controls a{box-sizing:border-box; line-height:42px;} .cm-btn-controls .btn-style01{background-color:#004fa3;} .cm-btn-controls .btn-style02{background-color:#212121;} .cm-btn-controls .btn-style03{box-sizing:border-box; background:#fff; border:1px solid #888; color:#222;} /*==다운로드 - 카탈로그==*/ .catal_wrap{width:100%; position:relative;} .catal_wrap ul{ width:100%;} .catal_wrap ul li{ float:left; width:calc(25% - 23px); margin-right:30px; cursor:pointer; position:relative; margin-bottom:60px} .catal_wrap ul li:nth-child(4n){margin-right:0;} .catal_wrap ul li figure{ width:100%; box-sizing:border-box; position:relative;} .catal_wrap ul li figure > img{ width:100%; height:auto; box-sizing:border-box; border:1px solid #ddd;} .catal_wrap ul li figure figcaption{font-size:16px; line-height:22px; color:#444; font-weight:400; letter-spacing:-0.5px; text-align:center; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; padding-top:10px;} .catal_wrap ul li .over-thum{position:absolute; top:-1px; left:-1px; bottom:-1px; right:-1px; border:2px solid #004fa3;opacity:0;filter:Alpha(opacity=0); visibility:hidden; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s; height:calc(100% - 35px)} .catal_wrap ul li .over-thum span{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; width:50px; height:50px; background-color:#004fa3; text-align:center; line-height:50px; color:#fff; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;} .catal_wrap ul li:hover .over-thum{opacity:1.0;filter:Alpha(opacity=100); visibility:visible;} .catal_wrap ul li .link_box{ text-align:center; margin-top:10px} /*일반 베이직 게시판 테이블 공통*/ .board_list {position: relative;} .board_list .thead {color: #333;border-top: 1px solid #414141; border-bottom: 1px solid #ccc;background: #f9f9f9; display:table; width:100%;} .board_list .thead p {height: 44px;line-height: 44px; font-weight: 500;text-align: center; color:#333; display:table-cell;} .board_list .tbody > div { display:table; width:100%;} .board_list .tbody > div p {padding: 12px 0;text-align: center;vertical-align: middle;border-bottom: 1px solid #eee; line-height:20px; display:table-cell;} .board_list .tbody > div p.tl {padding-left: 10px; text-align: left;} .board_list .tbody > div p a {overflow: hidden;display: inline-block; padding: 3px 0;font-weight: normal;color: #333;width: 82%;text-overflow: ellipsis;white-space: nowrap;} .board_list .tbody > div p.num{ width:7%} .board_list .tbody > div p.name{ width:12%} .board_list .tbody > div p.data{width:12%} .board_list .tbody > div p.hit{ width:10%;} .list-align {position:absolute;top:30px} .board_search {text-align:right;margin:10px 0 0 0;height:50px} .board_search * {vertical-align:middle} .ver select {border:1px solid #ddd; width:105px; padding:9px;} .board_search input {margin:0} .board_search input[type="text"] {border:1px solid #ddd; width:200px; padding:10px;} #ctl00_ContentPlaceHolder1_MultyBBS_txt_find_value{ width:100%; min-width:150px; height:33px; border:none; box-shadow:none; background:#fff; border: 1px solid #d6d6d6; border-radius:0;box-sizing:border-box;} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page {position:relative;padding:40px 0 0 0 ;text-align:center; display:block;} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a {display:inline-block;width:26px;height:20px;padding-top:5px;color:#777;font:11px tahoma;border:1px solid #ccc;text-align:center;text-decoration:none;vertical-align:top;background:#fff; margin:0 3px} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a.on{display: inline-block;width: 26px; height: 20px; padding-top: 5px;color: #fff;font: bold 11px tahoma;border: 1px solid #004fa3; text-align: center; background: #004fa3;vertical-align: top;} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a.on strong{ color:#fff} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a:hover {color:#333;font-weight:600;background:#f9f9f9} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a.on:hover{ color:#fff; background:#004fa3;} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a.active {display:inline-block;width:26px;height:20px;padding-top:5px;color:#fff;font:bold 11px tahoma;border:1px solid #004fa3;text-align:center;background:#004fa3;vertical-align:top} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a.btn_pn{background-image:url(../images/arrow_icons.png); background-repeat:no-repeat; font-size:0;} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a:first-child{background-position: 2px 4px;} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a:last-child{background-position: -65px 4px;} /*board-view*/ .board_view{ border-top:1px solid #333;} .board_view dl{table-layout: fixed;word-break: break-all;border-collapse: collapse; display:table; width:100%;} .board_view dl dt, .board_view dl dd{ line-height: 2.4em; display:table-cell; vertical-align:middle;} .Board-ViewLine01 {background-color: #f4f4f4; text-align: center; border-bottom-width: 1px; font-size:14px; border-bottom-style: solid; border-bottom-color: #e1e1e1;} .Board-ViewLine02 { font-size:14px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e1e1e1; padding-top: 4px; padding-bottom: 4px; padding-left: 10px;} .Link-ViewLineFile {font-size:14px;color: #5797c4; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e1e1e1; padding-top: 4px;padding-bottom: 4px; padding-left: 10px;} .board_view dl.subject dt, .board_view dl.file dt{ width:16%;} .board_view dl.info dt{width:16%;} .board_view .content_view{ border-bottom:1px solid #999; padding:25px 10px 30px; box-sizing:border-box; width:100%;} .board_view .prevnext {overflow:hidden; margin:15px 0 50px 0;font-size:12px} .board_view .prevnext p {margin:0 0 0 1px} .board_view .prevnext a {display:block; border:1px solid #ccc;min-width:40px;padding:15px;font-weight:500;text-align:center;color:#9f9f9f} .board_view .prevnext p.list a{background:#004fa3; color:#fff} .board_view .prevnext a:hover {text-decoration:none; color:#004fa3;} /*2020-10-08 수정 추가 사항*/ .cad_wrap {position: relative;box-sizing: border-box;width: 100%; } .cad_wrap > article{width:49.2%; padding-right:20px; box-sizing:border-box; display:inline-block; vertical-align:top} .cad_wrap > article:nth-child(2)~*{ margin-top:45px} .cad_wrap > article:last-child{ padding-right:0; padding-left:20px} .cad_wrap > article figure{border: 1px solid #99baed; position:relative; overflow:hidden; box-sizing:border-box; } .cad_wrap > article figure .link_box{display:block; position:absolute; left:0px; bottom:25px; z-index:1; padding-left:20px; box-sizing:border-box;} .cad_wrap > article figure a img{} .cad_wrap > article h5{ margin:45px 0 15px;font-size: 18px;font-weight: 600;color:#004fa3;} .cad_wrap > article ul.cad_list li{ line-height:1.5; font-size:15px; color:#444; width:100%; padding-left:10px; position:relative; padding-bottom:5px} .cad_wrap > article ul.cad_list li:before{ width:3px; height:3px; background:#222; position:absolute; left:0; top:10px; content:""; display:block; font-weight:300;} } /*board 공통*/ .list_wrap{position: relative;border-bottom: 1px solid #dcdcdc;padding: 4px 0 4px 0;} .list_wrap .search_img{padding: 8px 0 8px 5px;} .list_wrap .search_img a{ display:block; box-sizing:border-box; width:100%; border:1px solid #dcdcdc; text-align:center;} .list_wrap .search_img a > img{ width:115px!important; height:115px!important} .list_wrap .search_txtbox{padding:12px 0 8px 25px;} .list_wrap .search_txtbox .search_cate{ font-size: 13px;font-weight: 500;color:#222; display: block;margin-bottom:8px;} .list_wrap .search_txtbox .search_cate a{ font-weight:500} .list_wrap .search_txtbox .search_name > p{ font-size:16px; color:#222; margin-bottom:7px} .list_wrap .search_txtbox .search_name > p > b{ font-weight:500; color:#004fa3} .list_wrap .search_txtbox .search_txt p {color: #222;font-size: 14px;font-weight: 300; letter-spacing: 0; line-height:1.4; word-break:keep-all;} .list_wrap .search_txtbox .search_txt p>span > br:nth-child(2n){display:none!important} .search_title{display: block;width: 100%;margin: 0px 0px 6px 0px;font-weight: bold;font-size: 18px; color: #000; border-bottom: 2px solid #a5c2e2;padding: 6px 4px; text-align:left;} .search_title>span{font-size:13px; color:#444; font-weight:300; position:relative; display:inline-block; top:-2px;padding-left: 8px; border-left: 1px solid #aaa;margin-left: 5px;} #ctl00_ContentPlaceHolder1_lbl_findvalue, #ctl00_ContentPlaceHolder1_lbl_findvalue2{color: #004fa3!important;font-weight: 400;} #ctl00_ContentPlaceHolder1_lbl_searchCount, #ctl00_ContentPlaceHolder1_lbl_searchCount2{font-weight: 400;color: #c00;} .search_cate > a{color:#222!important;} .search_cate > a:last-child span{color: #004fa3!important;font-weight: 500!important; display:block; font-size:16px} .search_btn > a{ font-size: 14px; text-align: center; height: 35px; position: relative; overflow: hidden; width: 130px; line-height: 30px; box-sizing: border-box; display: inline-block; zoom: 1; *: ; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #d9eef7; border: solid 1px #007dcd; background-color: #5d89e8; background-image: -webkit-gradient(linear, left top, left bottom, from(#5d89e8), to(#044bd9)); background-image: -webkit-linear-gradient(top, #5d89e8, #0446c0); background-image: -moz-linear-gradient(top, #5d89e8, #0446c0); background-image: -ms-linear-gradient(top, #5d89e8, #0446c0); background-image: -o-linear-gradient(top, #5d89e8, #0446c0); background-image: linear-gradient(top, #5d89e8, #0446c0); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5d89e8', EndColorStr='#0446c0'); } .search_result{color: #222; font-size: 14px;font-weight:300;letter-spacing: 0; line-height: 1.4; word-break:keep-all;} .search_page{ margin-top:30px} .search_page a{display: inline-block;width: 26px;height: 20px;padding-top: 5px;color: #777;font: 11px tahoma;border: 1px solid #ccc;text-align: center; text-decoration: none;vertical-align: top; background: #fff;margin: 0 3px;} .search_page a:hover{ color: #333;font-weight: 600; background: #f9f9f9;} .search_page a.btn_pn{background-image: url(../images/arrow_icons.png);background-repeat: no-repeat;font-size: 0;background-position: 2px 4px;} #ctl00_ContentPlaceHolder1_lbl_page a.btn__next{background-image: url(../images/arrow_icons.png); background-repeat: no-repeat;font-size: 0;background-position: -42px 4px;} #ctl00_ContentPlaceHolder1_lbl_page a.btn__prev{background-image: url(../images/arrow_icons.png); background-repeat: no-repeat;font-size: 0;background-position: -21px 4px;} .search_page a.btn_pn:last-child{background-image: url(../images/arrow_icons.png);background-repeat: no-repeat;font-size: 0;background-position: -65px 4px;} .search_page a.on{color: #fff;border: 1px solid #004fa3;background: #004fa3;} .search_page a.on strong{color: #fff;} /* ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 1100px row ##Device = 저해상도 태블릿, 모바일(가로) 대응 ##Screen = 1100px 이하 */ @media screen and (max-width: 1099px) { /* **************************************** * * SUB VISUAL * **************************************** */ #sub-visual {height:103px; width: 100%; position:relative;background-size: auto 100%; background-repeat:no-repeat; background-position: center top;padding: 30px 3% 0 3%; box-sizing:border-box;} #sub-visual.sub-visual01 {background-image: url(../images/sub_visual01.png);} #sub-visual.sub-visual02 {background-image: url(../images/sub_visual02.png);} #sub-visual.sub-visual03 {background-image: url(../images/sub_visual03.png);} #sub-visual.sub-visual04 {background-image: url(../images/sub_visual04.png);} #sub-visual.sub-visual05 {background-image: url(../images/sub_visual05.png);} #sub-visual .right_txt {display:block;line-height: 13px;margin-top:8px;} #sub-visual .right_txt p {font-size: 14px;color: rgba(255,255,255,0.4); font-weight:400} #sub-visual .visual_tit{} #sub-visual h2 {font-size: 25px;display: inline-block;vertical-align: top;position: relative;font-weight: 800; color:#fff} #sub-visual h2 span{ font-weight:300; display:inline-block; padding-left:10px; font-size:22px} .tab-content{ margin-top:20px; padding-left:4px} .tab-list li{ float:left; width:calc( 25% - 4px); margin:0 2px; text-align:center;} .tab-list.type2 li{width:calc( 50% - 4px);} .tab-list.type3 li{width:calc( 33.33% - 4px);} .tab-list.type5 li{width:calc( 20% - 4px);} .tab-list.type6 li{width:calc( 16.65% - 4px);} .tab-list li a{display: block;background: #f4f4f4;border: 1px solid #cccccc;font-size:12px;padding:12px 0;text-align: center;color: #474747; font-weight:400;} /* **************************************** * * SUB LEFT MENU * **************************************** */ #lnb{display:none} /* **************************************** * * MOBILE NAV LOACTION & TITLE & BUTTTON * **************************************** */ .tit-sec .nav {background: #1a5bb1; padding:12px 3%; position:relative; width:100%;box-sizing: border-box;} .tit-sec .nav > ul li { font-size:12px;letter-spacing: -0.5px; line-height: 1.5;} .tit-sec .nav > ul li a img{ display:none;} .tit-sec .nav > ul li a{ color:#fff;} .tit-sec .nav > ul li{ float:left; position:relative; height:100%;} .tit-sec .nav > ul li:after{ font-size:11px; line-height:22px; padding-right:0;margin-right:4px; color:#fff; display:block; background:url(../images/navi_arrow.png) no-repeat right 50%;background-size: 5px auto; content:""; display:inline-block; width:10px; height:10px} .tit-sec .nav > ul li:last-child:after, .tit-sec .nav > ul li:first-child:after{display:none} .tit-sec .nav > ul li span{ color:#fff;} .tit-sec h3{font-size: 24px; line-height: 31px; padding:20px 0 12px; margin:0 15px 25px; border-bottom: 1px solid #e2e3e4;position: relative;font-weight: 700; color:#222;} .link_box {width:100%; box-sizing:border-box; margin-top:15px;} .link_box a{font-size:12px; text-align:center; height:35px; position:relative; overflow:hidden; width:130px; line-height:32px; box-sizing:border-box; display: inline-block; zoom: 1; *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #d9eef7; border: solid 1px #007dcd; background-color: #5d89e8; background-image: -webkit-gradient(linear, left top, left bottom, from(#5d89e8), to(#044bd9)); background-image: -webkit-linear-gradient(top, #5d89e8, #0446c0); background-image: -moz-linear-gradient(top, #5d89e8, #0446c0); background-image: -ms-linear-gradient(top, #5d89e8, #0446c0); background-image: -o-linear-gradient(top, #5d89e8, #0446c0); background-image: linear-gradient(top, #5d89e8, #0446c0); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5d89e8', EndColorStr='#0446c0'); } .link_box a span{display: block;width: 100%;height: 100%;position: relative; top: 0; background: url(../images/pdf_down_ic.png) no-repeat 75% 47%;background-size: 13px;box-sizing: border-box;text-align: left;padding-left: 26%;} /* **************************************** * * SUB RIGHT CONTENT * **************************************** */ .cont-default{width:100%; position:relative; padding:0 15px; box-sizing:border-box;} /*제품 검색필드*/ .cont-default .prod-search-box{width: 100%;background: #f7f7f7;border: 1px solid #cfcfcf;padding: 20px 3%; box-sizing:border-box;} .cont-default .prod-search-box select, .cont-default .prod-search-box input{background-color: #fff;border: 1px solid #d2d2d2;font-size: 11px;vertical-align: middle;height: 35px;width:100%; font-size:11px; box-sizing:border-box; padding-left:10px} .cont-default .prod-search-box span{width:18%; display:inline-block;} .cont-default .prod-search-box span > input{ font-size:11px; text-align:center;display:inline-block;width:100%; background:#004fa3; color:#fff; height:34px; box-sizing:border-box; line-height:31px;} .cont-default .prod-search-box input{ width: 50%;} .cont-default .prod-search-box .prod-search-inner-box.box-bottom{ margin-top:10px} .cont-default .prod-search-box .prod-search-inner-box .sel_box{ float:left; width:100%;margin-bottom:7px;} .cont-default .prod-search-box .prod-search-inner-box .sel_box:last-child{ margin-bottom:0;} .cont-default .prod-search-box .prod-search-inner-box .sel_box select{width:100%;} .sub-tbl {width: 100%; border-top: 1px solid #222; table-layout: fixed;} .sub-tbl tr th, .sub-tbl tr td{ border-bottom:1px solid #ddd; font-size:13px; color:#222; } .sub-tbl01 tbody th {background-color: #f5f5f5;padding: 0 10px;text-align: left;font-weight: 400;} .sub-tbl01 tbody td {padding: 10px 16px;color: #666;} /*제품 리스트*/ .cont-default .product_List-area{ margin-top:5px} .cont-default .product_List-area ul{width:100%; position:relative;} .cont-default .product_List-area ul li { float:left; position:relative;width: calc(50% - 6px); margin:15px 12px 0 0; box-sizing:border-box;} .cont-default .product_List-area ul li:nth-child(2n){ margin-right:0;} .cont-default .product_List-area ul li > a{ display:block; width:100%; box-sizing:border-box; text-align:center; border:1px solid #ddd} .cont-default .product_List-area ul li > a .pro_img{width:100%!important; height:auto!important; box-sizing:border-box;} .cont-default .product_List-area ul li > a .pro_img figure{ position:relative;width:100%; box-sizing:border-box;} .cont-default .product_List-area ul li > a .pro_img img{ width:85%; height:auto; margin:0 auto;} .cont-default .product_List-area ul li > a .pro_info{ width:100%;} .cont-default .product_List-area ul li > a .pro_info p{ font-size:11px; color:#333; font-weight:400;padding: 19px 10px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cont-default .product_List-area ul li .over{display:none;} .cont-default .product_List-area ul li:hover a{border-color:#004b9a} .cont-default .product_List-area ul li:hover a .pro_img figure:after{ width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.18); content:""; display:block;} .cont-default .product_List-area ul li:hover a p{ color:#004fa3} /* **************************************** * * SUB RIGHT product_view * **************************************** */ #productView{ position:relative; width:100%; margin-top:30px;} #productView .top_area{} #productView .top_area .top_sec > div{position:relative; width:100%;} #productView .top_area .top_sec > div.view_img{ border:1px solid #ddd; text-align:center; width:100%; box-sizing:border-box;} #productView .top_area .top_sec > div.view_img .inner_table{width:100%; height:100%; display:table; text-align:center;} #productView .top_area .top_sec > div.view_img .inner_table figure{ display:table-cell; vertical-align:middle;} #productView .top_area .top_sec > div.view_info{ margin-top:25px} #productView .top_area .top_sec > div.view_info .view_info-title{ border-bottom:1px solid #aaa} #productView .top_area .top_sec > div.view_info .view_info-title h2{ color:#101010; font-size:22px; padding-bottom:15px; font-weight:500;} #productView .top_area .top_sec > div.view_info .view_info-title h2 span{ color:#fff; display:inline-block; padding:8px 15px; font-size:12px; background:#004b9a; margin-bottom:8px;} #productView .top_area .top_sec > div.view_info .feature-txt{box-sizing:border-box; width:100%; padding:15px 0 0 10px} #productView .top_area .top_sec > div.view_info .feature-txt dl dt{ font-size:17px; color:#111; position:relative; padding-left:30px; background:url(../images/prd_view_comm_tit_icon01.jpg) no-repeat left center; padding:10px 0 10px 35px; background-size:25px; font-weight:500; margin-bottom:10px} #productView .top_area .top_sec > div.view_info .feature-txt dl dd span{ display:block; font-size:12px; margin-bottom:8px; line-height:1.4; position:relative; color:#555; letter-spacing:-0.5px} /*#productView .top_area .top_sec > div.view_info .feature-txt dl dd span:before{ content:""; display:block; position:absolute; left:0; top:8px; width:3px; height:3px; background:#555;}*/ #productView .top_area .top_sec > div.view_info .feature-txt .link_box {width:100%; box-sizing:border-box; margin-top:15px; text-align:center;} #productView .top_area .top_sec > div.view_info .feature-txt .link_box a{font-size:12px; text-align:center; height:35px; position:relative; overflow:hidden; width:130px; line-height:32px; box-sizing:border-box; display: inline-block; zoom: 1; *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #d9eef7; border: solid 1px #007dcd; background-color: #5d89e8; background-image: -webkit-gradient(linear, left top, left bottom, from(#5d89e8), to(#044bd9)); background-image: -webkit-linear-gradient(top, #5d89e8, #0446c0); background-image: -moz-linear-gradient(top, #5d89e8, #0446c0); background-image: -ms-linear-gradient(top, #5d89e8, #0446c0); background-image: -o-linear-gradient(top, #5d89e8, #0446c0); background-image: linear-gradient(top, #5d89e8, #0446c0); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5d89e8', EndColorStr='#0446c0'); } #productView .top_area .top_sec > div.view_info .feature-txt .link_box a:last-child{ color: #e9e9e9; border: solid 1px #555; background-color: #6e6e6e; background-image: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); background-image: -webkit-linear-gradient(top, #888, #575757); background-image: -moz-linear-gradient(top, #888, #575757); background-image: -ms-linear-gradient(top, #888, #575757); background-image: -o-linear-gradient(top, #888, #575757); background-image: linear-gradient(top, #888, #575757); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#888', EndColorStr='#575757'); } #productView .top_area .top_sec > div.view_info .feature-txt .link_box a span{display: block;width: 100%;height: 100%;position: relative; top: 0; background: url(../images/pdf_down_ic.png) no-repeat 75% 47%;background-size: 13px;box-sizing: border-box;text-align: left;padding-left: 26%;} #productView .top_area .top_sec > div.view_info .feature-txt .link_box a span.out{display:none} #productView .top_area .arrac_files{ width:100%; margin-top:20px; background:#f7f7f7;} #productView .top_area .arrac_files .files_inner{ display:table; width:100%; position:relative; height:60px;} #productView .top_area .arrac_files h4, #productView .top_area .arrac_files ul{ display:table-cell; vertical-align:middle} #productView .top_area .arrac_files h4{ width:25%; text-align:center; color:#fff; background:#999; font-size:15px} #productView .top_area .arrac_files ul{ width:75%; padding:10px 0 } #productView .top_area .arrac_files ul li { float:left; padding:0 15px; width:50%; margin:5px 0 ; box-sizing:border-box;} #productView .top_area .arrac_files ul li a{ font-size:12px; color:#444; font-weight:500} #productView .top_area .arrac_files ul li a, #productView .top_area .arrac_files ul li a span{display:block;} #productView .top_area .arrac_files ul li a span i{ display:inline-block; width:27px; height:23px; background:url(../images/icon-file.png) no-repeat; background-position:0 -180px; vertical-align:middle;} /* #productView .top_area .arrac_files ul li:nth-child(2) a span i{ background-position:-180px -180px} #productView .top_area .arrac_files ul li:nth-child(3) a span i{ background-position:-300px -180px} #productView .top_area .arrac_files ul li:nth-child(4) a span i{ background-position:-360px -180px} */ #productView .top_area .arrac_files ul li a:hover{ color:#004b9a} #productView .editor_area { margin-top:30px;} #productView .editor_area .editoe_tit{ border-bottom:2px solid #222;} #productView .editor_area .editoe_tit h2{ font-size:18px; color:#101010; font-weight:500; background:url(../images/prd_view_comm_tit_icon03.jpg) no-repeat left center; padding:25px 0 25px 40px; background-size:32px; box-sizing:border-box; width:100%;} #productView .editor_area #editor_detail{ padding:20px 0; width:100%; box-sizing:border-box; color:#444; line-height:1.6} #productView .editor_area #editor_detail figure{ width:100%; box-sizing:border-box;} #productView .editor_area #editor_detail figure img{ width:100%!important; height:auto!important;} /* **************************************** * * SUB COMPANY * **************************************** */ /*==HISTORY==*/ .history-year-box{position:relative; background:url(../images/history_line.gif) repeat-y 73px 50px; } .history-year-box:before{position:absolute; top:61px; left:68px;width:8px; height:8px; border:2px solid #1a5bb1; border-radius:3px; content:""; background-color:#fff;} .history-year-box:after{position:absolute; top:66px; left:73px; content:""; width:2px; height:2px; background-color:#1a5bb1; content:"";} .main-prd-slide-box .slick-dots li button:after{display:none; position:absolute; top:50%; left:3px; content:""; width:2px; height:2px; background-color:#fff; margin:-1px 0 0 0;} .history-year-box .history-year-left-con{padding-bottom:30px; background-color:#fff;} .history-year-box .history-year{display:inline-block; border-top:2px solid #004fa3; color:#004fa3; font-weight:500; font-size:18px; letter-spacing:-0.5px; padding-top:7px;} .history-year-box .history-year-right-con{position:relative; padding-bottom:10px; margin-bottom:15px; } .history-year-box .history-year-right-con:before{position:absolute; top:19px; left:-57px; content:""; width:11px; height:11px; border:3px solid #07b0d1; background-color:#fff; -webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;} .history-year-box .history-year-right-con:after{content:""; position:absolute; top:26px; left:-50px; content:""; width:3px; height:3px; background-color:#07b0d1; } .history-year-box .history-year-right-con .inner_box{position: relative;padding-bottom: 15px;margin-bottom: 15px; } .history-year-box .history-year-right-con .inner_box:after{ content:""; display:block; position:absolute; left:90px; bottom:0; width:75%; height:1px; background:#aaa;} .history-year-box .history-year-right-con dl{position:relative; padding-left:90px; color:#7e7e7e; font-size:13px; letter-spacing:-0.5px; line-height:20px; margin-bottom:10px} .history-year-box .history-year-right-con dl.mar40{margin-bottom:20px;} .history-year-box .history-year-right-con dl dt{position:absolute; top:0px; left:0px; color:#222; font-size:15px} .history-year-box .history-year-right-con dl dd strong, .history-year-box .history-year-right-con dl dd span{ display:block;} .history-year-box .history-year-right-con dl dd i{ font-style:normal; font-size:10px;} .history-year-box .history-year-right-con dl dd p{ position:relative;padding-left: 8px;width: 100%;box-sizing: border-box;word-break: keep-all; letter-spacing: -0.2px;} .history-year-box .history-year-right-con dl dd p:before{ width:2px; height:2px; background:#7e7e7e; content:""; display:block; position:absolute; left:0; top:8px;} .history-img{display:none;} /*==인재상==*/ .recruit-info {width: 100%;margin-bottom:6%;border-bottom: 1px dashed #ddd;padding-bottom: 6%;} .recruit-info dt, .recruit-info dd {display:block; width:100%; text-align:center;} .recruit-info dt { width:55%; margin:0 auto 15px;} .recruit-info dt img{ width:100%;} .recruit-info dd > h3{font-size:20px; line-height:30px; color:#111; font-weight:300; letter-spacing:-0.75px; word-break:keep-all;} .recruit-info dd > h3 b{font-size:400;} .recruit-info dd > p{font-size:15px; line-height:24px; color:#333; font-weight:300; letter-spacing:-0.75px; word-break:keep-all;} .recruit-list-box{width:100%;} .recruit-list-box > img{max-width:100%; margin-bottom:3%;} .recruit-list-con{width:100%;} .recruit-list-con > li{float:left; width:20.5%; text-align:center;} .recruit-list-con > li.center{margin-left:6%;} .recruit-list-con > li .recruit-m-img{max-width:100%; margin:0px auto; display:none;} .recruit-list-con > li h4{font-size:16px;color:#004fa3; font-weight:600; letter-spacing:-0.75px; margin-bottom:2%;} .recruit-list-con > li p{font-size:13px; line-height:22px; color:#111; font-weight:300; letter-spacing:-0.75px; word-break:keep-all;} /*==복리후생==*/ .welfare-page{} .welfare-tit-img .img{width: 100%; height: auto;} .welfare-tit-img .img img{width: 100%; height: 100%;} .welfare-tit-img .txt-con{width: 84%; background-color: #fff; margin: -35px auto 0; position: relative;} .welfare-tit-img .txt-con > div{text-align: center; padding:15px 10px;} .welfare-tit-img .txt-con > div p{font-size:13px; font-weight: 300; line-height:1.7; letter-spacing: -0.35px; color: #333; word-break:keep-all;} .welfare-tit-img .txt-con > div p > br{display:none} .welfare-tit-img .txt-con > div p span{font-weight: 400; color: #004fa3; display:block;} .welfare-list-wrapper{margin-top:30px;} .welfare-list-wrapper ul{} .welfare-list-wrapper ul li{width: 100%; margin-bottom:2.5%; border: 1px solid #ccc;background-color: #f3f3f3; box-sizing:border-box;} .welfare-list-wrapper ul li > div{display: table; width:100%; padding: 3% 10%; box-sizing:border-box;} .welfare-list-wrapper ul li .txt-con{display: table-cell; vertical-align: middle; width:85%;} .welfare-list-wrapper ul li .txt-con .tit{position: relative; font-size:15px; font-weight: 400; letter-spacing: -0.35px; color: #333;} .welfare-list-wrapper ul li .txt-con .tit:before{position: absolute; top:5px; left: -4%; content: ''; width:5px; height:5px; background:#004fa3; border-radius:50%;} .welfare-list-wrapper ul li .txt-con .txt{margin-top: 5px; height: 56px; font-size: 16px; line-height: 1.8; font-weight: 300; letter-spacing: -0.35px; color: #545454;} .welfare-list-wrapper ul li .icon-con{display: table-cell; vertical-align: middle; text-align: center;} .welfare-list-wrapper ul li .icon-con span{display: inline-block;height:60px;width:60px;border-radius: 50%;overflow: hidden;background: #fff;vertical-align: middle;text-align: center; box-sizing: border-box;} .welfare-list-wrapper ul li .icon-con span img{height: 100%;} /*==채용정보==*/ .career-step-container{position:relative; width:100%; margin-bottom:60px; overflow:hidden; box-sizing:border-box;} .career-step-box{display:table; width:100%;} .career-step-box > dt, .career-step-box > dd{vertical-align:middle; padding:0 0 20px 0;} .career-step-box > dt{} .career-step-txt-con > h3{font-size:21px; color:#020202; font-weight:500; letter-spacing:-0.5px;} .career-step-txt-con > h3:after{display:block; content:""; width:30px; height:3px; background-color:#0063a7; margin:15px 0 0;} .career-step-txt-con > p{font-size:15px; line-height:23px; color:#2e2e2e; letter-spacing:-0.75px; opacity:0.69;filter:Alpha(opacity=69); word-break:keep-all;} .career-step-box > dd{background: url(../images/career_step_bg.png) no-repeat center top;background-size: 120% 100%;padding: 20px 0;border-radius: 70px;} .career-step-list{text-align:center;} .career-step-list > li:first-child{ margin-left:0;} .career-step-list > li{display:inline-block; vertical-align:top; position:relative; width: calc( 20% - 10px); padding-top: calc( 20% - 10px); margin-left:5px;} .career-step-list > li.career-step-list01{background:url(../images/career_step_list_bg01.png) no-repeat center center; background-size:cover;} .career-step-list > li.career-step-list02{background:url(../images/career_step_list_bg02.png) no-repeat center center; background-size:cover;} .career-step-list > li.career-step-list03{background:url(../images/career_step_list_bg03.png) no-repeat center center; background-size:cover;} .career-step-list > li.career-step-list04{background:url(../images/career_step_list_bg04.png) no-repeat center center; background-size:cover;} .career-step-list > li.career-step-list05{background:#004fa3; border-radius:100%; -moz-border-radius:100%; -webkit-border-radius:100%; -o-border-radius:100%; overflow:hidden;} .career-step-inner{position:absolute; top:0; left:0; bottom:0; right:0;} .career-step-inner > div{display:table; width:100%; height:100%;} .career-step-inner > div >div{ display:table-cell; width:100%; height:100%; position:relative; vertical-align:middle;} .career-step-inner > div >div > img{display:none} .career-step-inner > div h3{width:100%; vertical-align:middle;} .career-step-inner > div h3 i{color:#000;} .career-step-inner > div h3 p{font-size:12px; line-height:1.3; color:#080808; font-weight:400; letter-spacing:-0.5px; word-break: keep-all;} .career-step-list > li.career-step-list01 .career-step-inner > div h3 i, .career-step-list > li.career-step-list01 .career-step-inner > div h3 p{color:#004fa3;} .career-step-list > li.career-step-list05 .career-step-inner > div h3 i, .career-step-list > li.career-step-list05 .career-step-inner > div h3 p{color:#fff;} .career-comm-info-container{ border-top:2px solid #222} .career-comm-info-box{display:table; width:100%; margin-bottom:5px; padding:20px 0; border-bottom:1px dashed #ddd} .career-comm-info-box:last-child{ border:0; margin-bottom:0; padding-bottom:0} .career-comm-info-box dt{padding:0 10px; text-align:left; font-weight:400; box-sizing:border-box} .career-comm-info-box dt h3{font-size:17px; line-height:1.5; color:#222; font-weight:400; letter-spacing:-0.5px; word-break:keep-all;} .career-comm-info-box dt span{display:block; font-size:12px; color:#aaa; margin-bottom:5px} .career-comm-info-box dd{padding:15px 0 0px 10px;} .career-comm-info-box dd > p{font-size:13px; line-height:1.6; color:#666; font-weight:300; letter-spacing:-0.75px;} .career-comm-info-box dd > .career-comm-btn{display:inline-block; padding:8px 36px; text-align:center; font-size:16px; line-height:34px; color:#fff; letter-spacing:-0.5px; background-color:#1262aa; margin-top:17px;} .career-comm-info-box.type2, .career-comm-info-box.type2 dt, .career-comm-info-box.type2 dd{display:block; width:auto;} .career-comm-info-box.type2 dt{padding-right:0; margin-bottom:35px;} .career-comm-info-box.type2 dt h3, .career-comm-info-box.type2 dt span{display:inline-block;} .career-comm-info-box.type2 dt span{margin-left:10px;} .career-comm-info-box.type2 dd{border-left:0; padding-left:0;} /*==오시는 길==*/ .location_wrap{ margin-top:30px} .location_wrap .map_bx {width: 100%;height:300px;} .location_wrap .map_info {background:#004fa3;padding:15px 15px 20px;} .location_wrap .map_info>div{float:none!important} .location_wrap .map_info span {background-size: 18px;padding-left: 26px;line-height: 20px;font-size: 13px;display: block; color:#fff;background-repeat: no-repeat;background-position: left center;margin-bottom:7px; letter-spacing:-0.3px} .location_wrap .map_info span.add {background-image: url(../images/add_i.png);} .location_wrap .map_info span.tel {background-image: url(../images/tel_i.png);} .location_wrap .map_info span.fax {background-image: url(../images/fax_i.png);} .location_wrap .subway_tt {font-size:16px; letter-spacing: -1px;padding-bottom: 15px;border-bottom: 1px solid #ddd;margin-top:40px;} .location_wrap .subway_route {margin-top: 15px;} .location_wrap .subway_route.row_0{ margin-right:0; margin-left:0;} .location_wrap .subway_route .col-lg-6 {width:100%; display:table;} .location_wrap .subway_route .subway_line { float: left;width:60px;height:60px;line-height: 58px;box-sizing: border-box;border-radius: 50%;text-align: center;font-size:14px; font-weight: 700;letter-spacing: -0.3px;margin:5px 15px 5px 0;} .location_wrap .subway_route .txt {display: table-cell;vertical-align: middle;width: 100%; font-size:12px;color: #666;} .location_wrap .subway_route .txt span {font-weight: 500;color: #000;display: block; margin-bottom: 7px;font-size:15px;} .location_wrap .subway_route .subway_line.line9 {border: 5px solid #606d00; background:url(../images/local_icon.png) no-repeat center;background-position: 15px 9px;background-size: 32px;} .location_wrap .subway_route .subway_line.line5 {border: 5px solid #395cb4;background:url(../images/local_icon.png) no-repeat center;background-position: 10px -32px;background-size: 32px;} /*==PISCO 네트워크==*/ .locationDiv, .agency_list-box, #globalNetwork{width:100%; padding: 15px 0 0px;} .locationDiv > div {position:relative; width:100%;} .locationDiv > div.img_wrap{ text-align:center;} .locationDiv > div.img_wrap > img{ width:70%} .locationDiv > div.map_info{ margin-top:20px} .locationDiv > div.map_info dt{font-size:18px; color:#333; padding:0 0 10px 0px;} .locationDiv > div.map_info dd:nth-of-type(1){border-top:1px solid #333;} .locationDiv > div.map_info dd{padding:15px 0 15px 5px; border-bottom:1px solid #ddd; position:relative; box-sizing:border-box;} .locationDiv > div.map_info dd .office_name{display:inline-block;font-size:15px; color:#2c53af;padding-bottom:6px;} .locationDiv > div.map_info dd ul li{font-size:13px; color:#666; line-height:23px; letter-spacing:-0.2px} .locationDiv > div.map_info dd ul li a.location_btn{padding:4px 25px 4px 0px; color:#333; font-size:12px; border:1px solid #bbb; background:url("../images/ico_map.png") right 42% center no-repeat;background-size: 19px; box-sizing:border-box; display:block; text-align:center; margin-top:8px} .locationDiv > div.map_info dd ul li span:first-child{margin-left:0;} .locationDiv > div.map_info dd ul li span{position:relative; font-size:13px;color:#333; padding:0 6px 0 8px; margin-left:7px; } .locationDiv > div.map_info dd ul li span:before{ position:absolute; bottom:0; left:0px; content:''; width:10px; height:16px; background:url("../images/dot.png") 0 50% no-repeat; display:inline-block; } .net_mapImg{} .net_mapImg ul{} .net_mapImg li, .net_mapImg2 li{width: 50%; margin:0 auto; position:absolute; left:50%; z-index:1;} .img_wrap map area:focus{ outline:none} .net_mapImg li:first-child, .net_mapImg2 li:first-child{ top:5%;} .net_mapImg li:nth-child(2), .net_mapImg2 li:nth-child(2){ top:8%} .net_mapImg li:nth-child(3), .net_mapImg2 li:nth-child(3){ top:10%} .net_mapImg li:nth-child(4), .net_mapImg2 li:nth-child(4){ top:15%} .net_mapImg li:last-child, .net_mapImg2 li:last-child{ top:16%; left:40%} .net_mapImg li img, .net_mapImg2 li img{ width:100%;} /* .locationDiv{width:100%; padding:15px 0 0px;} .locationDiv .mapArea{position:relative; width:100%; height:280px; background:#f6f6f6;} .locationDiv .mapArea .map{position:relative; width:100%; height:100%; margin:auto; text-align:center; background:url("../images/busi_map1_on.png") no-repeat center 0; background-size: auto 100%; max-width: 320px;} .locationDiv .mapArea .map a.m1{top:50px;left:75px;} .locationDiv .mapArea .map a.m2{top: 75px;left: 133px;} .locationDiv .mapArea .map a.m3{top: 105px;left: 85px;} .locationDiv .mapArea .map a.m4{top: 130px;left: 165px;} .locationDiv .mapArea .map a.m5{top: 150px;left: 100px;} .locationDiv .mapArea .map a{display:block; position:absolute; top:0; left:0; padding:3px 3% 4px; font-size:11px; color:#555; background:#fff; border:1px solid #ddd; border-radius:3px} .listArea{width:100%; margin:30px auto 0; overflow:hidden;} .listArea li{position:relative; width:100%; padding: 15px 5% 60px; border:1px solid #ddd;margin: 0 0 20px 0;overflow:hidden; box-sizing:border-box;} .listArea li:nth-child(2n){ margin-right:0} .listArea li .txt1{font-size:20px; color:#000; line-height:28px;} .listArea li .txt2{margin-top:15px; font-size:14px; color:#666; line-height:1.5;border-bottom: 1px solid #eee;padding-bottom: 15px;} .listArea li .phone{margin-top:20px;} .listArea li .phone > p{font-size:14px; margin-bottom:10px; padding:0px 0px 10px 25px; overflow:hidden; background:url("../images/phone_icon.png") no-repeat 0 0;} .listArea li .phone > p.fax{background:url("../images/fax_icon.png") no-repeat 0 0; background-size:20px;} .listArea li .phone span:nth-child(1){color:#222; float:left;} .listArea li .phone span:nth-child(2){color:#555; margin-left:10px} .listArea li .map_btn{ position:absolute;} .listArea li .map_btn a{display: inline-block;position: relative;height: 30px;padding: 0 20px 0 45px;border: 1px solid #000;font-size: 14px;font-weight: 500; line-height: 28px; text-align: center;color: #000; background:url(../images/ico_map.png) no-repeat 10px center; box-sizing:border-box;} .listArea li .map_btn a.roadview{ background:url(../images/ico_roadview.png) no-repeat 10px center;} .listArea li .map_btn a:hover{color: #fff;border: 1px solid #004fa3; background:#004fa3 url(../images/ico_map_on.png) no-repeat 10px center; } .listArea li .map_btn a.roadview:hover{ background:#004fa3 url(../images/ico_roadview_on.png) no-repeat 10px center;} */ /*==PISCO 네트워크 - 대리점안내==*/ .agency_list-box{ margin-top:30px} .agency_list-box .arti_box.last{ margin-top:60px} .agency_list-box h2 {margin: 0;font-size:20px;font-weight: 500;text-align: left;color: #000;margin-bottom:30px; border-bottom:1px solid #ddd; position:relative;} .agency_list-box h2 span{display:inline-block; position:relative;padding-bottom:15px;} .agency_list-box h2 span:after{ width:100%; height:2px; background:#000; content:""; display:block; position:absolute; left:0; bottom:0} .agency_list {border-top: 1px solid #000; box-sizing:border-box; width:100%;} .tit-sub3 + .agency_list {margin-top: 10px;} .agency_list-box h3{ background:url(../images/tit_dot.png) no-repeat left center; padding-left:22px; font-size:19px; color:#222; font-weight:500; } .agency_list > li {position: relative; padding: 20px 5px;;border-bottom: 1px solid rgba(53, 54, 49, 0.2); box-sizing:border-box; width:100%;} .agency_list dl {position: relative;margin: 0;} .agency_list dt {margin: 0;margin-bottom:10px;font-size: 16px;color: #000;} .agency_list dt strong{ color:#004fa3} .agency_list .btn-t2 {margin-left: 30px;font-size: 14px;color: #000;} .agency_list dd {margin: 0;font-size: 13px;color: #333; word-break:keep-all; line-height:1.5;} .agency_list dd:not(:last-child) {margin-bottom:4px;} .agency_list dd:nth-child(2) { width: 100%;} .agency_list dd:nth-child(3), .agency_list dd:nth-child(4) {display: inline-block; color: #41628e !important; font-size:12px} .agency_list dd:nth-child(4):not(.btn-area) {position: relative;padding-left: 10px;} .agency_list dd:nth-child(4):not(.btn-area):before {position: absolute;top: 50%;left: 0;width: 1px;height: 11px;margin-left: 4px;background: #41628e;content: '';-webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);transform: translateY(-50%);} .agency_list > li a{ color:#41628e !important} .agency_list > li a:hover{ text-decoration:underline;} .agency_list .btn-area {margin-top:15px; display:block!important;} .agency_list + .tit-sub3 {margin-top: 50px;} .agency_list .btn-t1 {padding: 6px 25px 6px 0px;color: #333;font-size: 12px; border: 1px solid #bbb; background: url(../images/ico_map.png) right 42% center no-repeat; background-size: 19px;box-sizing: border-box;display: block;text-align: center;margin-top: 8px;width: 100%;} .agency_list .btn-t1:hover, .agency_list .btn-t1.active{border-color:#004fa3;background-color:#004fa3;color: #fff; background-image:url(../images/ico_map_on.png);} .agency_list > li.active .map-area{ display:block;} .agency_list .map-area{display: none;overflow: hidden;clear: both; position: relative; width: 100%; height: 210px;margin-top: 25px;border: 1px solid #e3e3e3;background: #e3e3e3;} .global-network-List .map_bg{ width:100%; } .global-network-List .global_inner{ position:relative;} .global-network-List .map_bg > img{ width:100%; height:auto;} .global-network-List .wnew { width:300px; height:500px;} .global-network-List .wnew img{ width:300px; height:500px;} #globalNetwork .points{ position:relative; margin-top:20px; text-align:center; border-bottom:2px solid #000; padding-bottom:10px} #globalNetwork .points p{padding: 0px 0 2px 13px;margin-right:15px;font-size:13px;color: #222; background-position:0 0; background-size:10px auto; background-repeat: no-repeat; font-weight:500; display:inline-block; cursor:pointer;vertical-align: middle;} #globalNetwork .points p.active{ color:#004fa3} #globalNetwork .points p.p1{ background-image:url(../images/busi_loca_icon1.png)} #globalNetwork .points p.p2{ background-image:url(../images/busi_loca_icon4.png)} #globalNetwork .points p.p3{ background-image:url(../images/busi_loca_icon2.png);} #globalNetwork .item_wrap{width: 100%;box-sizing: border-box;padding: 3% 3% 6%;margin-bottom: 10px; border-bottom:1px solid #eee} #globalNetwork .country-item{ display:none} #globalNetwork .country-item.agent{display:block;} #globalNetwork .item_wrap h3{font-size: 16px;} #globalNetwork .item_wrap ul{ margin-top:10px;width: 100%; box-sizing: border-box; padding-left: 10px;} #globalNetwork .item_wrap ul li {display: inline-block;padding-left: 7px; position: relative;line-height: 1.8;width: 49%;box-sizing: border-box;font-size: 12px;} #globalNetwork .item_wrap ul li:before{ content:""; display:block; width:2px; height:2px; background:#666; position:absolute; left:0; top:11px;} /*==사업부별 연락처 안내==*/ .contact-con{ margin-top:40px} .contact-con .img-con {width:100%; height:auto;} .contact-con .img-con img {display:block; max-width:100%;} .contact-con .txt-con-wrap { width:100%; height:auto; box-sizing:border-box; display:block;} .contact-con .txt-con { width: 100%;height: auto;display: block;padding: 30px 15px;text-align:center; background-color: #004fa3; box-sizing:border-box;} .contact-con .txt-con .txt-con-inner {display:block; vertical-align:middle;} .contact-con .txt-con .icon img {max-width: 37px;} .contact-con .txt-con .txt {font-size:14px; line-height:20px; letter-spacing:-0.75px; color:rgba(255,255,255,0.7); position:relative; padding:15px 0;} .contact-con .txt-con .txt:before {content:""; display:block; width: 18px; height:3px; background-color: #009fe0; position:absolute; bottom:0; left:50%; margin-left: -9px; } .contact-con .txt-con .go-inquiry-btn {display:inline-block; width:120px; height:40px; background-color:#053f7d; margin-top:15px; -webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;} .contact-con .txt-con .go-inquiry-btn em {font-size:12px; line-height: 40px; letter-spacing:-0.75px; color:rgba(255,255,255,0.85);} .contact-con .txt-con-wrap:hover .go-inquiry-btn {background-color: #009fe0; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;} .contact-con .tit-box{ padding:25px 0 0;} .contact-con .tit-box .job-2dep-tit {float: left;background: url(../images/tit_dot.png) no-repeat left center;padding-left: 22px;font-size:19px;color: #222;font-weight: 500; line-height: 36px; } .contact-con .tit-box .job-1dep-tit {float: right; font-size:11px; line-height: 36px;color: #888; font-weight: 400;} .contact-con .contact_img img{ width:100%; height:auto;} /*==다운로드 - 카탈로그==*/ .catal_wrap{width:100%; position:relative;} .catal_wrap ul{ width:100%;} .catal_wrap ul li{ float:left; width:calc(50% - 8px); margin-right:16px; cursor:pointer; position:relative; margin-bottom:40px} .catal_wrap ul li:nth-child(2n){margin-right:0;} .catal_wrap ul li figure{ width:100%; box-sizing:border-box; position:relative;} .catal_wrap ul li figure > img{ width:100%; height:auto; box-sizing:border-box; border:1px solid #ddd;} .catal_wrap ul li figure figcaption{font-size:15px; line-height:22px; color:#444; font-weight:400; letter-spacing:-0.5px; text-align:center; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; padding-top:10px;} .catal_wrap ul li .over-thum{display:none;} .catal_wrap ul li .link_box{ text-align:center; margin-top:10px} /*== 제품문의 ==*/ /* 제품문의 :: 쓰기, 문의폼 :: 개인정보취급방침 */ .bbs-inquiry-agree-con{margin-bottom:25px;} .bbs-inquiry-agree-con .agree-tit{color:#464646; font-size:14px; letter-spacing:-0.3px; font-weight:500; padding-bottom:15px;} .inquiry-agreement-con{border:1px solid #ddd; height:100px; overflow-y:auto; overflow-x:hidden; padding:15px; background-color:#f6f6f6; line-height:1.6;} .bbs-inquiry-agree-con .agree-txt{padding-top:10px; font-size:13px; letter-spacing:-0.3px; color:#868686;} .inquiry-essential-txt{text-align:right; color:#373737; font-size:13px; letter-spacing:-0.3px; padding-bottom:15px;} .essential-icon{color:#cf0505;} .editor { font-size: 12px;line-height: 1.5; color: #333;} /* 제품문의 :: 쓰기, 문의폼 :: 작성영역 */ .inquiry-page colgroup {display: none;} .bbs-write-tbl{width:100%; border-top:1px solid #333;} .bbs-write-tbl th,.bbs-write-tbl td{padding:8px 10px; letter-spacing:-0.5px; border-bottom:1px solid #ddd;} .bbs-write-tbl tr, .bbs-write-tbl th, .bbs-write-tbl td{display: block;padding: 0;width: 100% !important;border-bottom: 0; text-indent: 0;} .bbs-write-tbl th{color:#464646; font-size:13px; font-weight:600; text-align:left; padding-top:10px} .bbs-write-tbl td{padding: 10px 0;border-bottom: 1px solid #ddd;} .bbs-write-tbl .write-input, .bbs-write-tbl .write-select, .bbs-write-tbl .write-textarea{ height:34px; border:0px; width:100%; height:auto; font-size:14px; vertical-align:middle; padding: 10px 0;border: 0; background-color: #f0f0f0;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;text-indent: 10px; } .bbs-write-tbl .write-input:focus{border-color:#333;} .bbs-write-tbl .write-input{text-indent:10px;} .bbs-write-tbl .write-select{height:38px; padding-left:2%} .bbs-write-tbl .write-textarea{width:100%; height:200px; resize:none;} .bbs-write-tbl td input[type="file"]{height:auto; padding:10px 0;text-indent:0; border:0;} .bbs-write-tbl td .write-sub-txt{color:#888; margin-left:10px; font-size:11px; color:#aaa; font-family:"돋움",dotum,sans-serif; letter-spacing:-0.5px;} .bbs-write-tbl td .write-sub-txt2{display:block; color:#888; margin-top:5px; font-size:11px; color:#aaa; font-family:"돋움",dotum,sans-serif; letter-spacing:-0.5px;} .bbs-write-tbl .hypen{display:inline-block; vertical-align:middle;width:12px; text-align:center;} .bbs-write-tbl .tel-row .write-input{ width:30%!important} .bbs-write-tbl .arrow_de.w65{ width:100%!important} .bbs-write-tbl .arrow_de.w30{width:10%!important; } .bbs-write-tbl .arrow_de.w30 select{font-size:1px} /* 제품문의 :: 쓰기, 문의폼 :: 기타 */ .bbs-write-tbl .input-check{padding:10px 0;} .bbs-write-tbl .input-check span{margin-right:30px;} .bbs-write-tbl .input-check span label{vertical-align:middle; font-size:14px;} .address-fieldset .write-input{margin-top:6px;} .address-fieldset .write-input:first-child{margin-top:0;} .bbs-write-tbl .address-btn{display:inline-block; min-width:114px; padding:0 10px; height:38px; border:1px solid #464646; vertical-align:middle; text-align:center; color:#464646; font-size:14px; font-weight:400; margin-left:10px;} .bbs-write-tbl .address-btn:hover{background-color:#464646; color:#fff;} /* 제품문의 :: 버튼 */ .cm-btn-controls{overflow:hidden; text-align:center; padding-top:30px;} .cm-btn-controls.cm-btn-align-left{text-align:left;} .cm-btn-controls.cm-btn-align-right{text-align:right;} .cm-btn-controls .left-btn-controls{float:left; } .cm-btn-controls .right-btn-controls{float:right;} .cm-btn-controls input,.cm-btn-controls a{display:inline-block; width:110px; height:36px; border:0; color:#fff; background-color:#000; font-size:13px; margin:0 2px 5px 2px; cursor:pointer; vertical-align:top; text-align:center; font-weight:400; -webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;border-radius:2px; } .cm-btn-controls a{line-height:34px;} .cm-btn-controls.cm-btn-long-controls button,.cm-btn-controls.cm-btn-long-controls a{width:100%; height:50px; margin:0px; margin-bottom:5px;} .cm-btn-controls.cm-btn-long-controls a{box-sizing:border-box; line-height:34px;} .cm-btn-controls .btn-style01{background-color:#004fa3;} .cm-btn-controls .btn-style02{background-color:#212121;} .cm-btn-controls .btn-style03{box-sizing:border-box; background:#fff; border:1px solid #888; color:#222;} /*일반 베이직 게시판 테이블 공통*/ .board_list {position: relative;border-top: 1px solid #1a5bb1;} .board_list .thead {display:none} .board_list .tbody > div {position: relative;width: 96%;padding: 15px 2%;border-bottom: 1px solid #ddd;overflow: hidden;} .board_list .tbody > div p {border-bottom: 0;text-align: left;padding: 3px 0; font-size: 12px;} .board_list .tbody > div p.tl {text-align: left;} .board_list .tbody > div p a {overflow: hidden;display: inline-block; padding: 3px 0;font-weight: normal;color: #333;width: 82%;text-overflow: ellipsis;white-space: nowrap; font-size:14px} .board_list .tbody > div p.num, .board_list .tbody > div p.hit{display:none} .board_list .tbody > div p.name, .board_list .tbody > div p.data{ display:inline-block; margin-right:10px} .board_list .tbody > div p span{padding-right: 5px;color: #aaa;} .list-align {position:absolute;top:30px} .board_search {text-align:right;margin:10px 0 0 0;height:30px} .board_search * {vertical-align:top; height:35px} .ver select {border:1px solid #ddd; width:105px; padding:9px;margin-right:5px} .board_search input {margin:0} .board_search input[type="text"] {border: 1px solid #ddd; width: 42%;padding: 10px; box-sizing: border-box; border-radius: 0; box-shadow: none;height: 35px;} #ctl00_ContentPlaceHolder1_MultyBBS_btn_find {display:block; margin-left:4px} #ctl00_ContentPlaceHolder1_MultyBBS_txt_find_value{ width:100%; min-width:150px; height:34px; border:none; box-shadow:none; background:#fff; border: 1px solid #d6d6d6; border-radius:0;box-sizing:border-box;} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page {position:relative;padding:40px 0 0 0 ;text-align:center; display:block;} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a {display:inline-block;width:26px;height:20px;padding-top:5px;color:#777;font:11px tahoma;border:1px solid #ccc;text-align:center;text-decoration:none;vertical-align:top;background:#fff; margin:0 3px} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a.on{display: inline-block;width: 26px; height: 20px; padding-top: 5px;color: #fff;font: bold 11px tahoma;border: 1px solid #004fa3; text-align: center; background: #004fa3;vertical-align: top;} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a.on strong{ color:#fff} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a:hover {color:#333;font-weight:600;background:#f9f9f9} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a.on:hover{ color:#fff; background:#004fa3;} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a.active {display:inline-block;width:26px;height:20px;padding-top:5px;color:#fff;font:bold 11px tahoma;border:1px solid #004fa3;text-align:center;background:#004fa3;vertical-align:top} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a.btn_pn{background-image:url(../images/arrow_icons.png); background-repeat:no-repeat; font-size:0;} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a:first-child{background-position: 2px 4px;} #ctl00_ContentPlaceHolder1_MultyBBS_lbl_page a:last-child{background-position: -65px 4px;} /*board-view*/ .board_view{ border-top:1px solid #333;} .board_view dl{display:block; box-sizing:border-box;} .board_view dl dt, .board_view dl dd{ line-height: 2.8em; display:inline-block; box-sizing:border-box!important;} .board_view dl dt{ width:30%;} .board_view dl dd{ width:69%;} .Board-ViewLine01 {background-color: #f4f4f4; text-align: center; border-bottom-width: 1px; font-size:14px; border-bottom-style: solid; border-bottom-color: #e1e1e1;} .Board-ViewLine02 { font-size:14px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e1e1e1; padding-left: 10px;} .Link-ViewLineFile {font-size:14px;color: #5797c4; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e1e1e1; padding-left: 10px;} .board_view .content_view{ border-bottom:1px solid #999; padding:25px 10px 30px; box-sizing:border-box; width:100%;} .board_view .prevnext {overflow:hidden; margin:15px 0 50px 0;font-size:12px} .board_view .prevnext p {margin:0 0 0 1px} .board_view .prevnext a { display: block;border: 1px solid #ccc;min-width: 40px;padding: 10px;font-weight: 500;text-align: center;font-size: 10px;color: #9f9f9f;} .board_view .prevnext p.list a{background:#004fa3; color:#fff} .board_view .prevnext a:hover {text-decoration:none; color:#004fa3;} /*2020-10-08 수정 추가 사항*/ .cad_wrap {position: relative;box-sizing: border-box;width: 100%;display:block; } .cad_wrap > article{display:inline-block;width:49%; padding-right:20px; box-sizing:border-box; vertical-align:top} .cad_wrap > article:last-child{ padding-right:0; padding-left:20px} .cad_wrap > article figure{ position:relative;} .cad_wrap > article figure img{border: 1px solid #99baed;} .cad_wrap > article figure .link_box{display:block; position:absolute; left:0; bottom:25px; z-index:1; box-sizing:border-box; padding-left:20px} .cad_wrap > article figure a img{} .cad_wrap > article h5{ margin:45px 0 15px;font-size: 18px;font-weight: 600;color:#004fa3;} .cad_wrap > article ul.cad_list li{ line-height:1.5; font-size:15px; color:#444; width:100%; padding-left:10px; position:relative; padding-bottom:5px} .cad_wrap > article ul.cad_list li:before{ width:3px; height:3px; background:#222; position:absolute; left:0; top:10px; content:""; display:block; font-weight:300;} /*2020-10-16 보드 수정*/ .search_table, .search_table thead, .search_table tbody, .search_table tr, .search_table th, .search_table td {display: block;} .list_wrap{ margin-top:15px} .list_wrap.pro_wrap .search_img{padding-left:0} .list_wrap .search_img a{display:inline-block; } .list_wrap.pro_wrap .search_img a img{ width:40%!important; height:auto!important;} .list_wrap.pro_wrap .search_txtbox {padding: 7px 0 8px 3px;} .list_wrap .search_txtbox{ padding-left:13px} .list_wrap .search_txtbox .search_cate, .list_wrap .search_txtbox .search_txt p{ font-size:13px} .list_wrap .search_txtbox .search_txt p br{display:none} .list_wrap .search_txtbox .search_cate span{line-height: 1.5; word-break: keep-all;} .list_wrap .search_txtbox .search_name > p{ font-size:15px} .search_btn > a{ font-size:12px; height: 30px; width:105px; line-height:26px} .list_wrap.pro_wrap .search_txtbox .search_cate span{background: #f5f5f5; display: block; box-sizing: border-box; padding: 4px 9px; border-radius: 5px;} .ui-menu{ padding-top:15px!important} } @media screen and (max-width: 845px) { /*2020-10-08 수정 추가 사항*/ .cad_wrap {position: relative;box-sizing: border-box;width: 100%;display:block; } .cad_wrap > article{display:block;box-sizing:border-box; margin-bottom:35px; padding:0; width:100%;} .cad_wrap > article:last-child{padding:0; margin-bottom:0;} .cad_wrap > article figure{position:relative; border:0} .cad_wrap > article figure >img{border: 1px solid #99baed; } .cad_wrap > article figure .link_box{display:block; position:absolute; left:0; bottom:25px; z-index:1; box-sizing:border-box; padding-left:20px} .cad_wrap > article figure a img{} .cad_wrap > article h5{ margin:25px 0 8px;font-size: 16px;font-weight: 600;color:#004fa3;} .cad_wrap > article ul.cad_list li{ line-height:1.5; font-size:14px; color:#444; width:100%; padding-left:10px; position:relative; padding-bottom:2px} .cad_wrap > article ul.cad_list li:before{ width:3px; height:3px; background:#222; position:absolute; left:0; top:10px; content:""; display:block; font-weight:300;} } @media screen and (max-width: 450px) { .cad_wrap > article figure >img{width:100%;} .cad_wrap > article ul.cad_list li{ font-size:13px; padding-left:6px} .cad_wrap > article ul.cad_list li:before{ width:2px; height:2px;} .list_wrap .search_img a > img{ width:90px!important; height:auto!important} .search_cate > a:last-child span,.list_wrap .search_txtbox .search_name > p{font-size: 14px;} .search_result,.list_wrap .search_txtbox .search_cate, .list_wrap .search_txtbox .search_txt p{ font-size:12px} .search_title>span{ display:block; margin:0; padding:0;margin: 10px 0 3px; border:0} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #lnb li > .left-depth3 > li > a > span{ box-sizing:border-box; padding-right:3%; word-break:normal;} } .btn-outline-secondary{ background:#c7c8c6}