/* common */ .lb-dataContainer { position:relative; position:absolute; top:-40px; left:50%; transform:translateX(-50%);} .lb-data .lb-close { } #subWrap{} #sv{ position:relative; height:573px;} #sv .inner{ height:100%;} #sv .inner dl{ position:relative; top:50%; text-align:center; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } #sv .inner dl dt{ font-size:72px; color:#fff; font-weight:700; font-family:'Lato',sans-serif; margin-bottom:14px; text-transform:uppercase;} #sv .inner dl dd{ font-size:24px; color:#fff; letter-spacing:-0.05em;} .sv1{ background:url('/img/sub/sv2.jpg') no-repeat center; background-size:cover;} .sv2{ background:url('/img/sub/sv2.jpg') no-repeat center; background-size:cover;} .sv3{ background:url('/img/sub/sv2.jpg') no-repeat center; background-size:cover;} .sv4{ background:url('/img/sub/sv2.jpg') no-repeat center; background-size:cover;} .sv5{ background:url('/img/sub/sv2.jpg') no-repeat center; background-size:cover;} .sv6{ background:url('/img/sub/sv2.jpg') no-repeat center; background-size:cover;} .sv7{ background:url('/img/sub/sv2.jpg') no-repeat center; background-size:cover;} #sv #lnb{ background-color:rgba(0,0,0,0.8); position:absolute; bottom:0; left:0; width:100%;} #sv #lnb .inner{ position:relative; max-width:1200px; margin:0 auto;} #sv #lnb .inner:after{ display:block; content:''; clear:both;} #sv #lnb .inner > div{ float:left; max-width:320px; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #sv #lnb .inner .lnb_Tit{} #sv #lnb .inner .lnb_Tit p{ font-size:18px; background-color:#ec7f23; color:#fff; text-align:center; padding:31px 0;} #sv #lnb .inner .lnb_list{ max-width:900px; width:100%;} #sv #lnb .inner .lnb_list ul{ font-size:0; display:flex;} #sv #lnb .inner .lnb_list ul > li{ position:relative; display:inline-block; max-width:180px; width:100%; border-right:1px solid rgba(255,255,255,0.2); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} /*#sv #lnb .inner .lnb_list ul > li*/ #sv #lnb .inner .lnb_list ul > li > a{ position:relative; display:block; font-size:16px; color:#fff; font-weight:350; padding:32px 0; text-align:center;} #sv #lnb .inner .lnb_list ul > li.on a{ color:#e96404;} #sv #lnb .inner .lnb_depth{ position:relative; border-right:1px solid rgba(255,255,255,0.2)} #sv #lnb .inner .lnb_depth > a{ position:relative; display:block; font-size:16px; color:#ec7f23; font-weight:350; padding:32px 0 32px 40px;} #sv #lnb .inner .lnb_depth > a:after{ content:url('/img/sub/lnb_arrow.png'); position:absolute; top:50%; right:20px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } #sv #lnb .inner .lnb_depth ul{ position:absolute; top:80px; width:100%; background-color:#FFF; z-index:10; display:none; border:1px solid #d7d7d7;} #sv #lnb .inner .lnb_depth ul li{ border-bottom:1px solid #d7d7d7;} #sv #lnb .inner .lnb_depth ul li:last-child{ border-bottom:0;} #sv #lnb .inner .lnb_depth ul li a{ position:relative; display:block; padding:17px; font-size:16px; color:#222;} #sv #lnb .inner .lnb_depth ul li:hover a{ color:#ec7f23;} #subContents{} #subContents .pageTit{ text-align:center; border-bottom:1px solid #e1e1e1;} #subContents .pageTit p{ font-size:45px; color:#222; font-weight:700; padding:85px 0;} #subContents .pageTit .stxt { margin-top:-70px; margin-bottom:80px; font-size:22px; color:#222; font-weight:300; display:block } .customer_common{ margin-bottom:200px;} /* 회사소개 */ /* 인사말 */ #greeting{} #greeting .con_wrap{} #greeting .con_wrap .con_tit{ text-align:center; padding:120px 0 125px 0;} #greeting .con_wrap .con_tit dl{} #greeting .con_wrap .con_tit dl dt{ font-size:60px; color:#222; font-family: 'Lato', sans-serif; margin-bottom:40px;} #greeting .con_wrap .con_tit dl dd{ font-size:18px; color:#666; font-weight:300; letter-spacing:-0.025em; line-height:1.6;} #greeting .con_wrap .con_tit dl dd span{ display:block;} #greeting .con_wrap .con{ position:relative; overflow:hidden;} #greeting .con_wrap .con1{ background:url('/img/sub/company/greeting/img1.jpg') no-repeat center; background-size:cover; height:700px;} #greeting .con_wrap .con1:after{ content:''; width:1px; height:232px; background-color:rgba(255,255,255,0.3); position:absolute; bottom:0; left:50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); } #greeting .con_wrap .con1 .txt{ position:relative; top:210px; text-align:center; /* -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); */ } #greeting .con_wrap .con1 .txt dl{} #greeting .con_wrap .con1 .txt dl dt, #greeting .con_wrap .con1 .txt dl dd{ position:relative; color:#fff; letter-spacing:-0.025em;} #greeting .con_wrap .con1 .txt dl dt{ font-size:40px; font-weight:500; margin-bottom:10px;} #greeting .con_wrap .con1 .txt dl dt:before{ content:url('/img/sub/company/greeting/icon.png'); display:block; margin-bottom:54px;} #greeting .con_wrap .con1 .txt dl dd{ font-size:24px; font-weight:300;} #greeting .con_wrap .con2{ padding:185px 0 240px 0;} #greeting .con_wrap .con2{} #greeting .con_wrap .con2 .inner{} #greeting .con_wrap .con2 .inner:after{ display:block; content:''; clear:both;} #greeting .con_wrap .con2 .inner .tit, #greeting .con_wrap .con2 .inner .content{ float:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #greeting .con_wrap .con2 .inner .tit{ width:490px; padding-left:100px;} #greeting .con_wrap .con2 .inner .tit p{ font-size:60px; color:#222; font-family: 'Lato', sans-serif;} #greeting .con_wrap .con2 .inner .tit p span{ display:block;} #greeting .con_wrap .con2 .inner .content{ width:calc(100% - 490px);} #greeting .con_wrap .con2 .inner .content p{ font-size:18px; color:#666; font-weight:300; letter-spacing:-0.025em; margin-bottom:35px; line-height:1.6;} #greeting .con_wrap .con2 .inner .content p:last-child{ margin-bottom:0;} #greeting .con_wrap .con2 .inner .content p b{ font-size:30px; font-weight:300;} #greeting .con_wrap .con2 .inner .content p span{ display:block;} /* 주요사업범위 */ #vision{} #vision > img{} #vision .mobile_vision{ display:none; background:url('/img/sub/company/vision/bg.png') no-repeat; margin-bottom:100px;} #vision .mobile_vision .listBox{ padding-top:414px; padding-left:37px; max-width:420px; margin:0 auto;} #vision .mobile_vision .listBox .list{ position:relative; margin-bottom:10px; font-size:0;} #vision .mobile_vision .listBox .list:last-child{ margin-bottom:0;} #vision .mobile_vision .listBox .list .icon, #vision .mobile_vision .listBox .list .txt{ display:inline-block; vertical-align:top;} #vision .mobile_vision .listBox .list .icon{ position:relative; width:145px; height:145px; border:10px solid #e1e1e1; background-color:#FFF; border-radius:100%; border-radius:200px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #vision .mobile_vision .listBox .list .icon:before{ content:''; width:1px; height:10px; background-color:#ccc; position:absolute; top:-20px; left:50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); } #vision .mobile_vision .listBox .list .icon img{ position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } #vision .mobile_vision .listBox .list .txt{ position:relative; padding-left:97px; padding-top:35px;} #vision .mobile_vision .listBox .list .txt:before{ content:url('/img/sub/company/vision/line.png'); position:absolute; left:-15px; top:40px; z-index:5;} #vision .mobile_vision .listBox .list .txt p{ position:relative; font-size:24px; color:#e96404; font-weight:700; letter-spacing:-0.025em; margin-bottom:12px;} #vision .mobile_vision .listBox .list .txt h3{ font-size:16px; color:#222; font-weight:350; letter-spacing:-0.025em; line-height:1.4;} #vision .mobile_vision .listBox .list .txt h3 span{ display:block;} /* 회사연혁 */ #history{} #history .con_wrap{ margin-bottom:110px;} #history .con_wrap .inner{ background:url('/img/sub/company/history/bg.png') no-repeat center bottom; height:1807px;} #history .con_wrap .inner .con_tit{ text-align:center; padding:100px 0 75px 0;} #history .con_wrap .inner .con_tit dl{} #history .con_wrap .inner .con_tit dl dt{ font-size:60px; color:#222; font-family: 'Lato', sans-serif; margin-bottom:40px;} #history .con_wrap .inner .con_tit dl dd{ font-size:18px; color:#666; font-weight:300; letter-spacing:-0.025em; line-height:1.6;} #history .con_wrap .inner .content{ position:relative;} #history .con_wrap .inner .content:before{ content:''; width:42px; height:42px; background-color:#e96404; border-radius:100%; border-radius:100px; position:absolute; top:0; left:50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); } #history .con_wrap .inner .content .wrap{ padding-top:73px;} #history .con_wrap .inner .content .wrap:before{ content:''; width:1px; height:87%; background-color:#dadada; position:absolute; top:42px; left:50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); } #history .con_wrap .inner .content .wrap:after{ display:block; content:''; clear:both;} #history .con_wrap .inner .content .wrap .con{ position:relative; clear:both; width:50%;} #history .con_wrap .inner .content .wrap .con:after{ display:block; content:''; clear:both;} #history .con_wrap .inner .content .wrap .con .year p{ position:relative; font-size:36px; color:#e96404; font-family:'Lato',sans-serif; padding-bottom:10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-weight:900;} #history .con_wrap .inner .content .wrap .con .year p:before{ content:''; width:18px; height:18px; border-radius:100%; border-radius:100px; background-color:#e96404; position:absolute; z-index:1; top:35px;} #history .con_wrap .inner .content .wrap .con .year p:after{ content:''; height:1px; background-color:#e96404; position:absolute; bottom:0; left:0;} #history .con_wrap .inner .content .wrap .con.right .year p:after{ width:206px;} #history .con_wrap .inner .content .wrap .con.left .year p:after{ width:183px;} #history .con_wrap .inner .content .wrap .con.right .year p{ width:206px; padding-left:90px;} #history .con_wrap .inner .content .wrap .con.left .year p{ width:183px; padding-left:28px;} #history .con_wrap .inner .content .wrap .con.right .year p:before{ left:-9px;} #history .con_wrap .inner .content .wrap .con.left .year p:before{ right:-9px;} #history .con_wrap .inner .content .wrap .con ul.txt{ border:5px solid #f5f5f5; border-radius:10px; padding:26px 0 26px 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; background-color:#FFF;} #history .con_wrap .inner .content .wrap .con.right ul.txt{ width:calc(100% - 206px);} #history .con_wrap .inner .content .wrap .con.left ul.txt{ width:calc(100% - 183px);} #history .con_wrap .inner .content .wrap .con ul.txt li{ margin-bottom:12px;} #history .con_wrap .inner .content .wrap .con ul.txt li:last-child{ margin-bottom:0;} #history .con_wrap .inner .content .wrap .con ul.txt li p, #history .con_wrap .inner .content .wrap .con ul.txt li span{ display:inline-block; letter-spacing:-0.025em; vertical-align:top;} #history .con_wrap .inner .content .wrap .con ul.txt li p{ font-size:18px; color:#e96404; padding-right:24px; padding-left:26px; font-family:'Lato',sans-serif; font-weight:900; width:70px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #history .con_wrap .inner .content .wrap .con ul.txt li span{ font-size:16px; color:#666; font-weight:350; width:calc(100% - 74px);} #history .con_wrap .inner .content .wrap .con ul.txt li span em{ display:block; padding-top:2px;} #history .con_wrap .inner .content .wrap .con2018{ margin-top:-89px;} #history .con_wrap .inner .content .wrap .con2016{ margin-top:-119px;} #history .con_wrap .inner .content .wrap .con2014{ margin-top:-16px;} #history .con_wrap .inner .content .wrap .con2012{ margin-top:-17px;} #history .con_wrap .inner .content .wrap .con2011{ margin-top:-120px;} #history .con_wrap .inner .content .wrap .con2003{ margin-top:-16px;} /* 조직도 */ #organization{} #organization .con_wrap{ margin-top:90px; margin-bottom:500px;} #organization .con_wrap .con{ position:relative; border-radius:100%; border-radius:200px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; margin:0 auto;} #organization .con_wrap .con .txt{ text-align:center; border-radius:100%; border-radius:200px; position:absolute; top:50%; left:50%; width:100%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } #organization .con_wrap .con .txt .icon{ margin-bottom:21px;} #organization .con_wrap .con .txt p{ font-size:20px; color:#222; font-weight:700;} #organization .con_wrap .con1{ border:10px solid #e1e1e1; width:198px; height:198px;} #organization .con_wrap .con1:after{ content:''; width:1px; height:67px; background-color:#e1e1e1; display:block; position:absolute; left:50%;} #organization .con_wrap .con1 .wrap{ height:0; padding-top:96%; position:relative; background-color:#f0f0f0; border:5px solid #fff; border-radius:100%; border-radius:200px;} #organization .con_wrap .con2{ margin-top:60px; width:141px; height:141px; background-color:#f0f0f0;} #organization .con_wrap .con2:after{ content:''; width:1px; height:50px; background-color:#e1e1e1; position:absolute; top:100%; left:47%;} #organization .con_wrap .listBox{ position:relative; margin-top:50px; padding-top:50px; font-size:0;} #organization .con_wrap .listBox:before{ content:''; width:1050px; height:1px; background-color:#e1e1e1; position:absolute; top:0; left:70px;} #organization .con_wrap .listBox > .list{ position:relative; display:inline-block; margin-right:34px; vertical-align:top; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s; } #organization .con_wrap .listBox > .list:last-child{ margin-right:0;} #organization .con_wrap .listBox > .list .part{ position:relative; width:141px; height:141px; background-color:#f0f0f0; border-radius:100%; border-radius:200px;} #organization .con_wrap .listBox > .list .part:before{ content:''; width:1px; height:50px; background-color:#e1e1e1; position:absolute; bottom:100%; left:50%;} #organization .con_wrap .listBox > .list .part:after{ content:''; width:1px; height:40px; background-color:#e1e1e1; position:absolute; top:100%; left:50%;} #organization .con_wrap .listBox > .list3 .part:after, #organization .con_wrap .listBox > .list4 .part:after, #organization .con_wrap .listBox > .list5 .part:after, #organization .con_wrap .listBox > .list6 .part:after, #organization .con_wrap .listBox > .list7 .part:after{ display:none;} #organization .con_wrap .listBox > .list .part .txt{ text-align:center; position:absolute; top:50%; left:50%; width:100%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } #organization .con_wrap .listBox > .list .part .txt .icon{ margin-bottom:17px;} #organization .con_wrap .listBox > .list .part .txt p{ font-size:18px; color:#e96404; font-weight:500; letter-spacing:-0.05em;} #organization .con_wrap .listBox > .list .team{ position:absolute; padding-top:40px;} #organization .con_wrap .listBox > .list .team .list{ position:relative; width:148px; height:51px; padding:17px 0; text-align:center; border-radius:10px; background-color:#f0f0f0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; margin-bottom:9px;} #organization .con_wrap .listBox > .list .team .list p{ font-size:18px; color:#e96404; letter-spacing:-0.05em;} #organization .con_wrap .listBox > .list4 .team{ width:303px; left:50%; font-size:0; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); } #organization .con_wrap .listBox > .list4 .team .list{ display:inline-block;} #organization .con_wrap .listBox > .list4 .team .list:first-child{ margin-right:7px;} #organization .con_wrap .listBox > .list4 .team .list:last-child{} #organization .con_wrap .listBox > .list4 .team .list:first-child p:before{ content:url('/img/sub/company/organ/list4_line1.png'); position:absolute; top:-84px; left:51%;} #organization .con_wrap .listBox > .list4 .team .list:last-child p:before{ content:url('/img/sub/company/organ/list4_line2.png'); position:absolute; top:-84px; left:42%;} #organization .con_wrap .listBox > .list4 .team .list p{} /* 오시는길 */ #location{ padding-top:100px;} #location .con_wrap{} #location .con_wrap .con{} #location .con_wrap .con .listBox{} #location .con_wrap .con .listBox:after{ display:block; content:''; clear:both;} #location .con_wrap .con .listBox .list{ position:relative; float:left; width:24.16666666667%; margin-right:1.11111111111%;} #location .con_wrap .con .listBox .list:last-child{ margin-right:0;} #location .con_wrap .con1{ margin-bottom:127px;} #location .con_wrap .con1 .listBox{} #location .con_wrap .con1 .listBox .list{ background-color:#f5f5f5; height:400px;} #location .con_wrap .con1 .txt{ position:absolute; top:50%; left:50%; width:100%; text-align:center; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } #location .con_wrap .con1 .txt .tit{} #location .con_wrap .con1 .txt .tit p{ font-size:24px; color:#222; font-weight:700; letter-spacing:-0.025em; margin-bottom:34px;} #location .con_wrap .con1 .txt .icon{ position:relative; width:116px; height:116px; border-radius:150px; background-color:#FFF; margin:0 auto 40px;} #location .con_wrap .con1 .txt .icon img{ position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } #location .con_wrap .con1 .txt .content{} #location .con_wrap .con1 .txt .content p{ font-size:16px; color:#222; font-weight:350; letter-spacing:-0.025em; line-height:1.5;} #location .con_wrap .con1 .txt .content p span{ display:block;} #location .con_wrap .con2{ margin-bottom:125px;} #location .con_wrap .con2 .txt{} #location .con_wrap .con2 .txt .icon{ position:relative; width:150px; height:150px; background-color:#e96404; border-radius:150px; margin:0 auto 28px;} #location .con_wrap .con2 .txt .icon img{ position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } #location .con_wrap .con2 .txt dl{} #location .con_wrap .con2 .txt dl dt, #location .con_wrap .con2 .txt dl dd{ letter-spacing:-0.025em; font-family:'Lato',sans-serif; text-align:center;} #location .con_wrap .con2 .txt dl dt{ font-size:18px; color:#e96404; margin-bottom:16px; font-weight:700;} #location .con_wrap .con2 .txt dl dd{ font-size:24px; color:#222; } #location .con_wrap .con2 .txt dl dd span{ display:block;} #location .con_wrap .map{} #location .con_wrap .map iframe{ width:100%; height:720px;} /* 제품소개 */ #pd_list{} #pd_list .listBox{ margin-bottom:47px;} #pd_list .listBox:after{ display:block; content:''; clear:both;} #pd_list .listBox .list{ float:left; width:25%; border:1px solid #e1e1e1; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s; } #pd_list .listBox .list a{ position:relative; display:block; font-size:16px; color:#222; font-weight:350; text-align:center; padding:20px 0; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s; } #pd_list .listBox .list:hover{ border-color:#e96404} #pd_list .listBox .list:hover a{ color:#e96404;} #pd_list .aboutBox{ margin-bottom:85px;} #pd_list .aboutBox .txt, #pd_list .aboutBox .img{ position:relative; width:50%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #pd_list .aboutBox .txt{ background-color:#f0f0f0; padding:122px 0 92px 100px; height:476px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #pd_list .aboutBox .txt .inner{} #pd_list .aboutBox .txt .inner dl{ margin-bottom:120px;} #pd_list .aboutBox .txt .inner dl dt{ font-size:24px; color:#e96404; font-weight:700; letter-spacing:-0.025em; margin-bottom:24px;} #pd_list .aboutBox .txt .inner dl dd{ font-size:35px; color:#222; font-weight:700;} #pd_list .aboutBox .txt .inner button{ border:1px solid #e1e1e1; background-color:#FFF; width:250px; height:55px; line-height:55px; font-size:14px; text-align:left; border-radius:7px; font-family:'Lato',sans-serif; font-weight:900; padding-left:36px; text-transform:uppercase; letter-spacing:-0.025em; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #pd_list .aboutBox .txt .inner button span{ display:inline-block; margin-left:45px;} #pd_list .aboutBox .txt .inner button span img{ vertical-align:middle; position:relative; top:-2px;} #pd_list .aboutBox .img{ height:476px; border:1px solid #f0f0f0; overflow:hidden;} #pd_list .aboutBox .img img{ position:absolute; top:50%; left:50%; max-width:95%; max-height:95%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } #pd_list .aboutBox .img .icon{ position:absolute; right:0; bottom:0;} #pd_list .aboutBox .img .icon a{ position:relative; display:block; background-color:#f0f0f0; width:70px; height:70px;} #pd_list .aboutBox .img .icon a img{ position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } #pd_list .detailBox{ margin-bottom:170px;} #pd_list .detailBox > .tit{ text-align:center; margin-bottom:145px;} #pd_list .detailBox > .tit p{ position:relative; font-size:14px; font-family:'Lato',sans-serif; font-weight:700; letter-spacing:1em; font-size:14px; color:#e96404; text-transform:uppercase;} #pd_list .detailBox > .tit p:before, #pd_list .detailBox > .tit p:after{ content:''; max-width:400px; width:100%; height:1px; background-color:#e96404; position:absolute; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } #pd_list .detailBox > .tit p:before{ left:0;} #pd_list .detailBox > .tit p:after{ right:0;} #pd_list .detailBox .con{} #pd_list .detailBox .con .con_tit, #pd_list .detailBox .con .content{ position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #pd_list .detailBox .con .con_tit{ width:526px; padding-left:95px; padding-top:116px;} #pd_list .detailBox .con .con_tit:before{ content:''; width:190px; height:24px; background-color:#eee; position:absolute; left:0; top:0;} #pd_list .detailBox .con .con_tit:after{ content:''; width:24px; height:220px; background-color:#eee; position:absolute; top:0; left:0;} #pd_list .detailBox .con .con_tit p{ font-size:30px; color:#e96404; font-family:'Lato',sans-serif; font-weight:900; letter-spacing:-0.025em; line-height:1.3; margin-bottom:17px; text-transform:uppercase;} #pd_list .detailBox .con .con_tit p span{ display:block;} #pd_list .detailBox .con .con_tit h3{ font-size:18px; color:#222; letter-spacing:-0.025em;} #pd_list .detailBox .con .content{ width:calc(100% - 526px);} #pd_list .detailBox .con1{ margin-bottom:124px;} #pd_list .detailBox .con1 .txt{ margin-bottom:16px;} #pd_list .detailBox .con1 .txt:last-child{ margin-bottom:0;} #pd_list .detailBox .con1 .txt h3{ position:relative; font-size:18px; color:#222; letter-spacing:-0.025em; font-weight:900; padding-left:33px; margin-bottom:7px;} #pd_list .detailBox .con1 .txt h3:before{ content:''; width:10px; height:10px; border-radius:10px; background-color:#222; position:absolute; left:0; top:4px} #pd_list .detailBox .con1 .txt p{ position:relative; font-size:16px; color:#666; letter-spacing:-0.025em; padding-left:45px; line-height:1.6;} #pd_list .detailBox .con1 .txt p:before{ content:''; width:8px; height:1px; background-color:#666; position:absolute; top:50%; left:33px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } #pd_list .detailBox .con2{} #pd_list .detailBox .con2 table{ border:1px solid #ddd; border-top:1px solid #666; width:100%;} #pd_list .detailBox .con2 table tr{ border-bottom:1px solid #ddd;} #pd_list .detailBox .con2 table tr:last-child{ border-bottom:none;} #pd_list .detailBox .con2 table tr th, #pd_list .detailBox .con2 table tr td{ color:#353535; letter-spacing:-0.035em; padding:16px 0 16px 30px; border-right:1px solid #ddd; text-align:left;} #pd_list .detailBox .con2 table tr th{ background-color:#f9f9f9; font-weight:500; font-size:17px; width:34.07407407407%;} #pd_list .detailBox .con2 table tr td{ font-size:16px;} /* popup */ #pd_popup{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:999; opacity:0; visibility:hidden; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s; } #pd_popup.on{ visibility:visible; opacity:1;} #pd_popup .pop_bg{ position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4);opacity:0; visibility:hidden; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s; } #pd_popup .pop_bg.on{ visibility:visible; opacity:1;} #pd_popup .pop_content{ position:absolute; top:50%; left:50%; background-color:#FFF; max-width:550px; width:95%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } #pd_popup .pop_content .inner{ position:relative; height:550px; overflow:hidden;} #pd_popup .pop_content .inner .closeBtn{ position:absolute; top:15px; right:15px;} #pd_popup .pop_content .inner .closeBtn a{ position:relative; display:block; width:24px; height:24px;} #pd_popup .pop_content .inner img{ position:absolute; top:50%; left:50%; max-width:95%; max-height:95%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } #pd_list .pt_cont { padding:0 0 170px 0; } #pd_list .plumbing_list { margin:85px 0 0 0; } #pd_list .plumbing_list:after {content:""; display:block; visibility:hidden; clear:both; height:0; } #pd_list .plumbing_list .title_box { position:relative; float:left; width:404px; padding:45px 0 0 0; } #pd_list .plumbing_list .title_box:before { content: "";display:block; width:80px; height:10px; background-color:#eeeeee; position:absolute; top:0; left:0; } #pd_list .plumbing_list .title_box strong { color:#e96404; font-size:34px; line-height:34px; font-weight:800; text-transform:uppercase; letter-spacing:-0.5px; font-family:'Lato',sans-serif;} #pd_list .plumbing_list .title_box strong span { display:block; } #pd_list .plumbing_list .title_box span.stxt { margin:3px 0 0 0; display:block; color:#222; font-size:18px; line-height:36px; } #pd_list .plumbing_list .info_box { float:right; width:796px; } #pd_list .plumbing_list .info_box .img_box:after {content:""; display:block; visibility:hidden; clear:both; height:0; } #pd_list .plumbing_list .info_box .img_box > div { position:relative; float:left; width:390px; text-align:center; background-color:#f5f5f5; } #pd_list .plumbing_list .info_box .img_box > div.rbox { float:right; } #pd_list .plumbing_list .info_box .datatable { margin:35px 0 0 0; border-top:1px solid #222; overflow:hidden; } #pd_list .plumbing_list .info_box .datatable table { width:100%; border:none; font-family: 'Noto Sans KR'; border-collapse:collapse; background-color:#fff; margin-left:-1px; } #pd_list .plumbing_list .info_box .datatable thead th { padding:16px 0; color:#353535; font-size:17px; font-weight:500; text-align:center; border:none; border-bottom:1px solid #ddd; border-left:1px solid #ddd; background-color:#f5f5f5; } #pd_list .plumbing_list .info_box .datatable tbody td { padding:17px 5px; color:#353535; font-size:17px; font-weight:400; text-align:center; border:none; border:1px solid #ddd; border-width:0 0 1px 1px; } #pd_list #tabs{ } #pd_list #tabs ul{ width:100%: height:auto; overflow:hidden; text-align:center; } #pd_list #tabs ul li{ position:relative; z-index:1; display:inline-block; width:25%; margin:0 -2px; margin:0 -2px 0 -3px\0; font-size:16px; color:#222; font-weight:350; text-align:center; padding:20px 0; cursor:pointer; border:1px solid #e1e1e1; background-color:#fff; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s; } #pd_list #tabs ul li:hover, #pd_list #tabs ul li.on{ position:relative; z-index:9; border-color:#e96404; color:#e96404; } #pd_list #tabs .pt_cont{ width:100%; height:auto; display:none; } #pd_list #tabs .pt_cont.on{ display:block; } /*firefox only hack*/ #pd_list #tabs ul li a { display:flex; align-items:center; justify-content:center; height:100%; padding:20px 0;} #pd_list #tabs.type2 ul li { padding:0;} @-moz-document url-prefix() { #pd_list #tabs ul li { margin:0 -2px 0 -3px } } /* 시공사례 */ /* 실적 common */ /* listBox공통 */ .case .listBox1{} .case .listBox1:after{ display:block; content:''; clear:both;} .case .listBox1 .list{ position:relative; float:left; width:31.33333333333%; margin-right:3%; margin-bottom:48px;} .case .listBox1 .list:nth-child( n+10){ margin-bottom;0;} .case .listBox1 .list:nth-child(3n){ margin-right:0;} .case .listBox1 .list a{ position:relative; display:block;} .case .listBox1 .list a .imgBox{ position:relative; height:376px; overflow:hidden;} .case .listBox1 .list a .imgBox img{ position:absolute; top:0; left:0; width:100%; height:100%; -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; transition:all .5s; } .case .listBox1 .list a:hover .imgBox img{ transform:scale(1.1);} .case .listBox1 .list a .txtBox{ position:relative; padding:33px 0 28px 24px; background-color:#f9f9f9; border-bottom:1px solid #666;} .case .listBox1 .list a .txtBox .plus_icon{ background:url('/img/sub/case/main/plus_icon_off.png'); position:absolute; right:20px; top:50%; width:50px; height:50px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; transition:all .5s; } .case .listBox1 .list a:hover .txtBox .plus_icon{ background:url('/img/sub/case/main/plus_icon_on.png');} .case .listBox1 .list a .txtBox dl{} .case .listBox1 .list a .txtBox dl dt{ font-size:16px; color:#333; font-weight:300; margin-bottom:10px;} .case .listBox1 .list a .txtBox dl dd{ font-size:20px; color:#222; font-weight:500; letter-spacing:-0.025em; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; max-width:260px;} /* 년도별실적 & 용도별실적 탭리스트 */ .case .tab_listBox{ background-color:#f5f5f5; text-align:center; font-size:0; border:1px solid #e1e1e1; margin-bottom:65px;} .case .tab_listBox .list{ display:inline-block; margin-right:30px;} .case .tab_listBox .list:last-child{ margin-right:0;} .case .tab_listBox .list a{ position:relative; display:block; font-size:20px; color:#222; font-family:'Lato',sans-serif; font-weight:700; padding:40px 0;} .case .tab_listBox .list a:hover, .case .tab_listBox .list.on a{ color:#e96404;} .case .tab_listBox .list.on a:after{ content:url('/img/sub/case/year/list_on_icon.png'); position:absolute; bottom:-2px; left:50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); } .case .tab_content{} .case .tab_content .con{ display:none;} .case .tab_content .con.on{ display:block;} .case .tab_content .con table{ border-top:2px solid #e96404;} .case .tab_content .con table thead{} .case .tab_content .con table thead tr{ border-bottom:1px solid #e1e1e1;} .case .tab_content .con table thead tr th{ font-size:18px; color:#fff; font-weight:350; letter-spacing:-0.025em; background-color:#666; border-right:1px solid #e1e1e1; padding:20px 0;} .case .tab_content .con table thead tr th:last-child{ border-right:none;} .case .tab_content .con table thead tr th:first-child{ width:63.75%;} .case .tab_content .con table tbody{} .case .tab_content .con table tbody tr{ border-bottom:1px solid #e1e1e1;} .case .tab_content .con table tbody tr:hover{ background-color:#f4f4f4; cursor:pointer;} .case .tab_content .con table tbody tr td{ text-align:center; font-size:16px; color:#777; font-weight:300; letter-spacing:-0.025em; padding:22px 10px; border-right:1px solid #e1e1e1;/* text-overflow:ellipsis; overflow:hidden; white-space:nowrap; */} .case .tab_content .con table tbody tr td:first-child{ text-align:left; padding-left:40px;} .case .tab_content .con table tbody tr td:last-child{ border-right:none;} /* 페이지번호 */ .case .page_num{ font-size:0; text-align:center; padding:87px 0 80px 0;} .case .page_num .list{ position:relative; display:inline-block; margin:0 3px; vertical-align:top;} .case .page_num .list.prev, .case .page_num .list.next{ text-indent:-9999px;} .case .page_num .list a{ position:relative; display:block; font-size:15px; color:#555; width:37px; height:33px; line-height:33px; border:1px solid #ebebeb; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-family: 'Play', sans-serif;} .case .page_num .list a img{ position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } .case .page_num .list a:hover{ background-color:#333; color:#fff;} /* 주요실적 */ #main_case{ padding-top:65px;} /* product */ #pd_7{} .txt-box{ max-width:296px; margin: -1% auto 4%;} .txt-box p, .txt-box span { font-size:17px; text-align:center; color: #ec7f23; border:1px solid #ec7f23; letter-spacing:-0.025em; font-weight:700; padding: 17px 0; display:block;}