/* 페이지 상단 배너 */ .topBanner {position:relative; width:100%; height:140px; background:#000; overflow:hidden; z-index:50} .topBanner .swiper-slide{width:100%; height:140px;} .topBanner .swiper-slide p{opacity:0} .topBanner .xbt{position:absolute; width:1170px; bottom:16px; left:0; right:0; text-align:right; margin:auto; z-index:10} .topBanner .check{display:inline-block; vertical-align:top;} .topBanner .check input[type="checkbox"]{display:inline-block; width:18px; height:18px; vertical-align:middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius:0; border:0; margin:0; margin-right:5px; padding:0; cursor:pointer; background:url("/templates/BFPC/images/nottoday_check.png") no-repeat 0 0;} .topBanner .check input[type="checkbox"]:checked{background:url("/templates/BFPC/images/nottoday_check_on.png") no-repeat 0 0;} .topBanner .check label{font-size:16px; color:#fff; vertical-align:middle} .topBanner .xbt a{display:inline-block; vertical-align:top; margin-left:10px;} .topBanner .swiper-button-next, .topBanner .swiper-container-rtl .swiper-button-prev{right:40px; width:23px; height:44px; background:url("/templates/BFPC/images/mainpopban_right.png") no-repeat 0 0;} .topBanner .swiper-button-prev, .topBanner .swiper-container-rtl .swiper-button-next{left:40px; width:23px; height:44px; background:url("/templates/BFPC/images/mainpopban_left.png") no-repeat 0 0;} /* 메인 */ .mainVis {position:fixed; top:0; left:0; width:100%; min-height:700px; overflow:hidden; background:#262626; z-index:0;} .mainVis .rollArea {position:relative; width:100%; height:100%; overflow:hidden;} .mainVis .rollArea .roll {position:absolute; top:0; right:0; width:0; height:100%; text-align:center; color:#fff; overflow:hidden;} .mainVis .rollArea .roll:first-child {left:0; width:100%;} .mainVis .rollArea .roll .bg {position:absolute; top:0; right:0; width:100%; height:100%; background:url("/templates/BFPC/images/mainvis_bg1.jpg") no-repeat 50% 50%; background-size:cover;} .mainVis .rollArea .roll .bg.bg2 {background:url("/templates/BFPC/images/mainvis_bg2.jpg") no-repeat 50% 50%; background-size:cover;} .mainVis .rollArea .roll .bg.bg3 {background:url("/templates/BFPC/images/mainvis_bg3.jpg") no-repeat 50% 50%; background-size:cover;} .mainVis .rollArea .roll .txtArea {position:absolute; top:25%; left:0; width:100%;} .mainVis .rollArea .roll .txtArea .tit {position:relative; top:-100px; opacity:0; font-family:'Proxima-Extrabold', sans-serif; font-weight:normal; font-size:84px; line-height:1;} .mainVis .rollArea .roll .txtArea .txt {position:relative; top:-100px; opacity:0; font-size:18px; line-height:1; word-break:keep-all; margin-top:22px;} .mainVis .rollArea .roll .txtArea .btn {position:relative; left:100px; opacity:0; margin-top:50px;} .mainVis .rollArea .roll .txtArea .btn a {display:inline-block; padding:19px 97px 19px 30px; border:2px solid #fff; font-size:18px; font-weight:bold; line-height:1; color:#fff; background:url("/templates/BFPC/images/mainvis_btn_icon.png") no-repeat right 30px top 50%; border-radius:3px;} .mainVis .rollArea .roll .txtArea .btn.type2 a {padding:19px 72px 19px 30px;} .mainVis .rollArea .roll .txtArea .btn a:hover, .mainVis .rollArea .roll .txtArea .btn a:focus {color:#000; background:#fff url("/templates/BFPC/images/mainvis_btn_icon_on.png") no-repeat right 30px top 50%;} .mainVis .rollArea .roll .dimd {display:none;position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); opacity:0;} .mainVis .indiArea {position:absolute; bottom:0; right:90px; width:100%; height:90px; margin-left:-45px; text-align:right; background:rgba(0,0,0,0.3); -ms-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); -ms-transform-origin:100% 100%; -webkit-transform-origin:100% 100%; transform-origin:100% 100%; z-index:5;} .mainVis .indiArea .indi {padding:0 130px; height:100%;display: none;} .mainVis .indiArea .indi a {display:inline-block; padding:0 20px; height:90px; font-family:'Proxima-Bold', sans-serif; font-weight:normal; font-size:15px; line-height:90px; color:rgba(255,255,255,0.4)} .mainVis .indiArea .indi a.on {position:absolute; top:0; left:50%; height:88px; font-size:18px; line-height:88px; color:rgba(255,255,255,1); border-top:2px solid #fff; -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); transform:translate(-50%, 0);} .mainVis .autoBtn {position:absolute; bottom:0; right:0; width:90px; height:90px; background:url("/templates/BFPC/images/main_auto_btn.png") no-repeat 50% 50%; z-index:5;} .mainVis .autoBtn.on {background:url("/templates/BFPC/images/main_auto_btn_on.png") no-repeat 50% 50%;} .mainVis .scroll {position:absolute; bottom:-90px; left:50%; padding-bottom:80px; font-family:'Proxima-Bold', sans-serif; font-weight:normal; font-size:14px; line-height:1; color:#fff; -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); transform:translate(-50%, 0); opacity:0; z-index:5;} .mainVis .scroll:after {content:''; position:absolute; bottom:0; left:50%; margin-left:-1px; width:2px; height:50px; background:#fff;} .mainVis .indiArea.roll0 {text-align:right;} .mainVis .indiArea.roll1 {text-align:left;} .mainVis .indiArea.roll1 .indi a:last-child {float:right;} .mainVis .indiArea.roll2 {text-align:left;} .mainVis .roll_btm{width: 100%;height: 60px;background: rgba(0,0,0,.2);line-height: 60px;position: absolute;bottom: 0px;color: #fff;text-align: center;z-index: 3;} .mainVis .roll_btm img{display: inline-block;vertical-align: middle;margin-right: 5px;} .mainVis .roll_btm span{display: inline-block;} .mainConWrap {position:relative; background:#fff;} .mainCon1 {position:relative; padding:100px 0 220px;} .mainCon1 > .txt {position:relative; top:150px; opacity:0; font-size:18px; color:#555; line-height:32px; text-align:center;} .mainCon1 > .conArea {position:relative; width:1200px; margin:90px auto 0;} .mainCon1 > .conArea .txtImg1 {position:absolute; top:-74px; right:50%; opacity:0;} .mainCon1 > .conArea .txtImg2 {position:absolute; bottom:-74px; left:50%; opacity:0;} .mainCon1 > .conArea .boxArea {padding-bottom:100px;} .mainCon1 > .conArea .boxArea:after {content:''; display:block; clear:both;} .mainCon1 > .conArea .boxArea .box {position:relative; top:100px; opacity:0; float:left; width:50%; height:430px;} .mainCon1 > .conArea .boxArea .box .hoverBg {display:none; opacity:0;} .mainCon1 > .conArea .boxArea .box.box1{top:200px; background:url("/templates/BFPC/images/maincon1_bg1.jpg") no-repeat 50% 50%; background-size:100% 100%;} .mainCon1 > .conArea .boxArea .box.box1 .hoverBg {position:relative; top:0; left:0; width:100%; height:100%; background:url("/templates/BFPC/images/maincon1_bg1_hover.jpg") no-repeat 50% 50%; background-size:100% 100%;} .mainCon1 > .conArea .boxArea .box.box2{float:right; background:url("/templates/BFPC/images/maincon1_bg2.jpg") no-repeat 50% 50%; background-size:100% 100%;} .mainCon1 > .conArea .boxArea .box.box2 .hoverBg {position:relative; top:0; left:0; width:100%; height:100%; background:url("/templates/BFPC/images/maincon1_bg2_hover.jpg") no-repeat 50% 50%; background-size:100% 100%;} .mainCon1 > .conArea .boxArea .box.box3{top:200px; background:url("/templates/BFPC/images/maincon1_bg3.jpg") no-repeat 50% 50%; background-size:100% 100%;} .mainCon1 > .conArea .boxArea .box.box3 .hoverBg {position:relative; top:0; left:0; width:100%; height:100%; background:url("/templates/BFPC/images/maincon1_bg3_hover.jpg") no-repeat 50% 50%; background-size:100% 100%;} .mainCon1 > .conArea .boxArea .box.box4{float:right; background:url("/templates/BFPC/images/maincon1_bg4.jpg") no-repeat 50% 50%; background-size:100% 100%;} .mainCon1 > .conArea .boxArea .box.box4 .hoverBg {position:relative; top:0; left:0; width:100%; height:100%; background:url("/templates/BFPC/images/maincon1_bg4_hover.jpg") no-repeat 50% 50%; background-size:100% 100%;} .mainCon1 > .conArea .boxArea .box a {display:block; padding:80px 50px; box-sizing:border-box; position:absolute; top:0; left:0; width:100%; height:100%; transition:0.3s} .mainCon1 > .conArea .boxArea .box a .tit {font-size:30px; color:#fff; line-height:1.2;} .mainCon1 > .conArea .boxArea .box a .tit span {display:block; font-weight:bold;} .mainCon1 > .conArea .boxArea .box a .txt {font-size:18px; color:#fff; line-height:2; margin-top:30px; opacity:0;} .mainCon1 > .conArea .boxArea .box a .arrow {display:none; position:absolute; bottom:50px; left:50px;} .mainCon1 > .conArea .boxArea .box a .tit2 {display:inline-block; position:absolute; bottom:30px; right:45px; font-family:'Proxima-Bold', sans-serif; font-weight:normal; font-size:18px; line-height:1; color:rgba(255,255,255,0.4); -ms-transform:rotate(90deg); -ms-transform-origin:100% 100%; -webkit-transform:rotate(90deg); -webkit-transform-origin:100% 100%; transform:rotate(90deg); transform-origin:100% 100%;} .mainCon1 > .conArea .boxArea .box a:hover, .mainCon1 > .conArea .boxArea .box a:focus {z-index:2; box-shadow:40px 40px 50px 0px rgba(0,0,0,0.5); transition:0.3s} .mainCon1 > .conArea .boxArea .box a:hover .tit2, .mainCon1 > .conArea .boxArea .box a:focus .tit2 {color:rgba(255,255,255,0.9);} .mainCon1 > .conArea .boxArea .box a:hover .txt, .mainCon1 > .conArea .boxArea .box a:focus .txt {opacity:1;} .mainCon1 > .conArea .boxArea .box a:hover .arrow, .mainCon1 > .conArea .boxArea .box a:focus .arrow {display:block;} .mainCon2 {position:relative; padding:100px 0 109px; background:url("/templates/BFPC/images/thre_bg.png") no-repeat 50% 100%;} .mainCon2 .img {position:absolute; top:0; left:110%; margin-left:-103px; overflow:hidden; opacity:0;} .mainCon2 .txtArea {width:1200px; margin:0 auto;} .mainCon2 .txtArea > .tit {position:relative; top:150px; opacity:0; font-family:'Proxima-Extrabold', sans-serif; font-weight:normal; font-size:70px; color:#000; line-height:1;} .mainCon2 .txtArea .txt {position:relative; top:150px; opacity:0; font-size:18px; color:#3b3b3b; line-height:30px; margin-top:20px;} .mainCon2 .txtArea .btns {position:relative; top:150px; opacity:0; width:220px; margin-top:40px;} .mainCon2 .txtArea .btns a {position:relative; display:block; padding:20px 0 21px; font-size:18px; font-weight:bold; color:#000; border-bottom:1px solid #c4c4c4; background:url("/templates/BFPC/images/maincon2_icon.png") no-repeat 100% 50%; box-sizing:border-box;} .mainCon2 .txtArea .btns a:hover, .mainCon2 .txtArea .btns a:focus {color:#8cc63e; background:url("/templates/BFPC/images/maincon2_icon_on.png") no-repeat 100% 50%; border-bottom:2px solid #8cc63e;} .mainCon2 .txtArea .downBtns {position:relative; top:100px; opacity:0; overflow:hidden; margin-top:40px; width:450px;} .mainCon2 .txtArea .downBtns p {float:left; width:220px; margin-left:10px; margin-top:10px; } .mainCon2 .txtArea .downBtns p:nth-child(2n-2) {margin-left:0;} .mainCon2 .txtArea .downBtns .tit {margin:0 0 15px 0; float:none; font-size:18px; line-height:1.3; color:#000; font-weight:bold; width:auto; text-align:left;} .mainCon2 .txtArea .downBtns a {position:relative; display:block; font-size:16px; color:#555; line-height:1.4; text-align:center; padding:18px 0; background:none; border-radius:3px; } .mainCon2 .txtArea .downBtns a span {display:block; text-align:left; padding:0 20px; background:url("/templates/BFPC/images/maincon2_down.png") no-repeat right 20px center;} /*.mainCon2 .txtArea .downBtns a:hover, .mainCon2 .txtArea .downBtns a:focus {background:#8cc63e; color:#fff;}*/ /*.mainCon2 .txtArea .downBtns a:hover span, .mainCon2 .txtArea .downBtns a:focus span {background-image:url("/templates/BFPC/images/maincon2_down_on.png");}*/ .mainCon3 {position:relative; padding:80px 0 250px; background:url("/templates/BFPC/images/maincon3_bg.jpg") no-repeat 100% 100%;} .mainCon3 .topArea {position:relative; padding-bottom:120px; overflow:hidden;} .mainCon3 .topArea > div {float:left; width:33.3%; text-align:center;} .mainCon3 .topArea > div:first-child {width:33.4%;} .mainCon3 .topArea > div .txt1 {font-size:20px; color:#000; margin-top:30px;} .mainCon3 .topArea > div .txt1 .counter {font-family:'Proxima-Bold', sans-serif; font-weight:bold; font-size:80px; color:#000;} .mainCon3 .topArea > div .txt2 {font-weight:bold; font-size:20px; color:#000; /*margin-top:25px;*/} .mainCon3 .topArea .year {position:absolute; top:234px; right:0; font-size:15px; color:#555;} .mainCon3 .bottomArea {position:relative; top:150px; opacity:0; height:340px;text-align:center;} .mainCon3 .bottomArea:after {content:''; display:block; clear:both;} .mainCon3 .bottomArea .box {position:relative; float:left; width:257px; height:338px; background:#fff; border:1px solid #e0e0e0; border-left:0;} .mainCon3 .bottomArea .box:before {content:''; position:absolute; bottom:50px; left:50%; width:40px; height:2px; background:#034874; margin-left:-20px;} .mainCon3 .bottomArea .box:first-child {width:258px; border-left:1px solid #e0e0e0;} .mainCon3 .bottomArea .box:last-child {width:258px;} .mainCon3 .bottomArea .box a {position:relative; display:block; width:100%; height:100%;} .mainCon3 .bottomArea .box a > .icon {padding-top:80px;} .mainCon3 .bottomArea .box a > .tit {font-size:18px; color:#3e3e3e; line-height:1; margin-top:40px;} .mainCon3 .bottomArea .box.on {top:-51px; height:442px; border:0; box-shadow:40px 40px 50px 0px rgba(0,0,0,0.5); z-index:2;} .mainCon3 .bottomArea .box:first-child.on {border-left:1px solid rgba(255,255,255,0);} .mainCon3 .bottomArea .box .hover {display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:url("/templates/BFPC/images/four_iconbg01.png") no-repeat 50% 50%; background-size:cover;} .mainCon3 .bottomArea .box:first-child .hover {display:block;} .mainCon3 .bottomArea .box.box2 .hover {background:url("/templates/BFPC/images/four_iconbg.png") no-repeat 50% 50%; background-size:cover;} .mainCon3 .bottomArea .box.box3 .hover {background:url("/templates/BFPC/images/four_iconbg02.png") no-repeat 50% 50%; background-size:cover;} .mainCon3 .bottomArea .box.box4 .hover {background:url("/templates/BFPC/images/four_iconbg03.png") no-repeat 50% 50%; background-size:cover;} .mainCon3 .bottomArea .box.box5 .hover {background:url("/templates/BFPC/images/four_iconbg.png") no-repeat 50% 50%; background-size:cover;} .mainCon3 .bottomArea .box .hover .icon {padding-top:60px;} .mainCon3 .bottomArea .box .hover .tit {font-size:26px; color:#fff; line-height:1; margin-top:30px;} .mainCon3 .bottomArea .box .hover .txt {font-size:17px; color:#fff; line-height:1.5; margin-top:20px;} .mainCon3 .bottomArea .box .hover .more {display:none; font-size:18px; color:#fff; line-height:34px; height:34px; padding-right:50px; background:url(/templates/BFPC/images/four_more.png) no-repeat right 1px top 0; margin-top:35px;} .mainCon3 .bottomArea .box.on .hover .more {display:inline-block;} .mainCon4 {position:relative; padding:70px 0 128px; background:#f4f4f4;} .mainCon4 .inner > .tit {position:relative; left:150px; opacity:0; font-family:'Proxima-Extrabold', sans-serif; font-weight:normal; font-size:50px; line-height:1; color:#000;} .mainCon4 .newsRoll {position:relative; top:150px; opacity:0; margin-top:40px;} .mainCon4 .newsRoll a {display:block; width:452px; margin-right:22px;} .mainCon4 .newsRoll .img {position:relative; display:block; width:100%; height:290px; overflow:hidden;} .mainCon4 .newsRoll .img img {position:relative; top:50%; left:50%; min-width:100%; height:100%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%);} .mainCon4 .newsRoll .img .label {position:absolute; top:0; left:0; display:table; width:60px; height:60px;} .mainCon4 .newsRoll .img .label span {display:table-cell; width:100%; height:100%; vertical-align:middle; text-align:center; font-size:16px; color:#fff; line-height:20px; background:url(/templates/BFPC/images/six_lbg.jpg) no-repeat center;} .mainCon4 .newsRoll .tit {display:block; overflow:hidden; font-weight:bold; font-size:18px; color:#000; line-height:1.6; word-break:keep-all; margin-top:23px;} .mainCon4 .newsRoll a:hover .tit, .mainCon4 .newsRoll a:focus .tit {text-decoration:underline;} .mainCon4 .newsRoll .date {display:block; font-size:16px; color:#777; line-height:1; margin-top:23px;} .mainCon4 .newsRoll .btns {position:absolute; top:-74px; right:0;} .mainCon4 .newsRoll .btns .swiper-button-prev {position:relative; left:auto; right:auto; float:left; width:9px; height:16px; margin-top:0; background:url("/templates/BFPC/images/main_news_prev.png") no-repeat 50% 50%; z-index:5;} .mainCon4 .newsRoll .btns .swiper-button-next {position:relative; left:auto; right:auto; float:left; width:9px; height:16px; margin-top:0; background:url("/templates/BFPC/images/main_news_next.png") no-repeat 50% 50%; z-index:5; margin-left:40px;} .mainCon5 {position:relative; padding:0 0 120px;} .mainCon5 .boxArea {position:relative; top:150px; opacity:0; background:#fff; border:1px solid #e0e0e0; overflow:hidden; margin-top:-78px;} .mainCon5 .boxArea .box {position:relative; float:left; padding:39px; width:451px; box-sizing:border-box; margin-left:22px;} .mainCon5 .boxArea .box:first-child {margin-left:0;} .mainCon5 .boxArea .box.box2 {width:452px;} .mainCon5 .boxArea .box .tit {font-size:18px; font-weight:bold; color:#000; line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:355px;} .mainCon5 .boxArea .box .list {padding-top:21px; border-top:1px solid #e0e0e0; margin-top:20px;} .mainCon5 .boxArea .box .list li {position:relative; padding-left:18px; margin-top:10px;} .mainCon5 .boxArea .box .list li:before {content:''; position:absolute; top:50%; left:0; width:3px; height:3px; background:#8cc63e;} .mainCon5 .boxArea .box .list li:first-child {margin-top:0;} .mainCon5 .boxArea .box .list li a {display:block; overflow:hidden;} .mainCon5 .boxArea .box .list li a .tit {color:#7e7e7e;display:inline-block; float:left; max-width:95%; font-size:16px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .mainCon5 .boxArea .box .list li a .date {display:inline-block; float:right; font-size:16px; color:#555; line-height:1.5;} .mainCon5 .boxArea .box .list li a:hover .tit, .mainCon5 .boxArea .box .list li a:focus .tit {text-decoration:underline;} .mainCon5 .boxArea .box .stockDiv {padding:36px 0; background:#f4f4f4; overflow:hidden; margin-top:20px;} .mainCon5 .boxArea .box .stockDiv .left {float:left; width:50%; font-size:30px; font-weight:bold; color:#034874; line-height:38px; text-align:center; box-sizing:border-box;} .mainCon5 .boxArea .box .stockDiv .right {float:left; width:50%; padding-left:25px; border-left:1px solid #e0e0e0; box-sizing:border-box; text-align:center;} .mainCon5 .boxArea .box .stockDiv .right > div {display:inline-block; text-align:left;} .mainCon5 .boxArea .box .stockDiv .right p {font-size:16px; color:#555; margin-top:10px;} .mainCon5 .boxArea .box .stockDiv .right p:first-child {margin-top:0;} .mainCon5 .boxArea .box .stockDiv .right p .up {color:#ee0000;} .mainCon5 .boxArea .box .stockDiv .right p .down {color:#000;} .mainCon5 .boxArea .box .moreBtn {position:absolute; top:41px; right:40px; display:inline-block; vertical-align:top;} /* 연혁 */ .historyArea {position:relative; overflow:hidden; text-align:center; padding-bottom:68px; margin-top:80px;} .historyArea:before {content:''; position:absolute; top:0; left:50%; width:1px; height:calc(100% - 15px); background:#e0e0e0; margin-left:-1px;} .historyArea:after {content:''; position:absolute; bottom:0; left:50%; width:33px; height:33px; margin-left:-16.5px; background:url("/templates/BFPC/images/history_end_icon.png") no-repeat 50% 50%;} .historyArea > .historyTit {position:relative; display:inline-block; width:140px; height:155px;} .historyArea > .historyTit p {display:table; table-layout:fixed; width:100%; height:100%;} .historyArea > .historyTit p span {display:table-cell; font-family:'Proxima-Bold', sans-serif; font-weight:normal; font-size:24px; color:#fff; text-align:center; vertical-align:middle; background:url("/templates/BFPC/images/history_year_bg.png") no-repeat 50% 50%;} .historyArea .historyCon {position:relative; overflow:hidden; margin-top:75px;} .historyArea .history {position:relative; left:150px; margin-left:50%; width:50%; padding:45px 0; padding-left:79px; box-sizing:border-box; text-align:left; opacity:0;} .historyArea .history:first-child {padding-top:0;} .historyArea .history .year {position:relative; font-family:'Proxima-Bold', sans-serif; font-weight:normal; font-size:30px; color:#000; margin-bottom:30px;} .historyArea .history .year:before {content:''; position:absolute; top:6px; left:-88px; width:67px; height:17px; background:url("/templates/BFPC/images/history_year_icon.png") no-repeat 0 50%;} .historyArea .history dd {overflow:hidden;} .historyArea .history .month {float:left; display:inline-block; width:40px; height:45px;} .historyArea .history .month > span {display:table; table-layout:fixed; width:100%; height:100%;} .historyArea .history .month > span > span {display:table-cell; font-family:'Proxima-Bold', sans-serif; font-weight:normal; font-size:18px; color:#000; vertical-align:middle; text-align:center; background:url("/templates/BFPC/images/history_mon_bg.png") no-repeat 50% 50%;} .historyArea .history .txt {float:left; display:inline-block; max-width:calc(100% - 60px); font-size:18px; color:#555; line-height:45px; word-break:keep-all; margin-left:20px;} .historyArea .history .img {padding-left:60px; margin-top:30px;} .historyArea .history .img > img {max-width:100%;} .historyArea .history.left {left:-150px; margin-left:0; padding-left:0; padding-right:79px; text-align:right;} .historyArea .history.left .year:before {content:''; position:absolute; top:6px; left:auto; right:-87px; width:67px; height:17px; background:url("/templates/BFPC/images/history_year_icon2.png") no-repeat 100% 50%;} .historyArea .history.left .month {float:right;} .historyArea .history.left .txt {float:right; margin-left:0; margin-right:20px;} .historyArea .history.left .img {padding-left:0; padding-right:60px;} /* 사업장 */ .busiArea {position:relative; /*margin-top:60px;*/} .busiArea .tabBtn {margin-top:80px;} .busiArea .mapArea {position:relative; padding:0 5%; text-align:center; background:#f6f7f7;} .busiArea .mapArea img {max-width:100%;} .busiArea .mapArea img.mobile {display:none;} .busiArea .mapArea .koreaMap {opacity:0; position:absolute; top:0; left:0; z-index:-1; width:100%; background:#f6f7f7; text-align:center;} .busiArea .mapArea .koreaMap img {max-width:96%;} .busiArea .mapArea .koreaMap .backBtn {position:absolute; top:50%; left:30px; display:block; width:59px; height:59px; background:url("/templates/BFPC/images/busi_back_btn.png") no-repeat 50% 50%; margin-top:-29.5px;} .busiArea .mapArea .txtArea {position:absolute; top:50px; right:50px;} .busiArea .mapArea .txtArea p {padding-left:30px; font-weight:bold; font-size:16px; color:#000; line-height:25px; text-align:left; background:url("/templates/BFPC/images/busi_map_icon1.png") no-repeat 0 0; margin-top:15px;} .busiArea .mapArea .txtArea p:first-child {margin-top:0;} .busiArea .mapArea .txtArea .icon2 {background:url("/templates/BFPC/images/busi_map_icon2.png") no-repeat 0 0;} .busiArea .mapArea .txtArea .icon3 {background:url("/templates/BFPC/images/busi_map_icon3.png") no-repeat 0 0;} .busiArea .busiTab {display:table; table-layout:fixed; width:100%; margin-top:60px;} .busiArea .busiTab a {display:table-cell; padding-bottom:24px; font-size:16px; color:#555; text-align:center; border-bottom:1px solid #e0e0e0;} .busiArea .busiTab a.on {padding-bottom:23px; border-bottom:2px solid #8bbf45; font-weight:bold; color:#8bbf45;} .busiArea .busiTabCon {position:relative; margin-top:60px;} .busiArea .busiTabCon .tabCon {display:none;} .busiArea .busiTabCon .tabCon:first-child {display:block;} .busiArea .busiTabCon .tabCon > div {display:table; table-layout:fixed; width:100%;} .busiArea .busiTabCon .imgArea {display:table-cell; width:600px; vertical-align:top;} .busiArea .busiTabCon .imgArea img {max-width:100%;} .busiArea .busiTabCon .txtArea {display:table-cell; padding-top:40px; padding-left:50px;} .busiArea .busiTabCon .txtArea.onlyTxt {padding-left:0; padding-top:0; width:100%;} .busiArea .busiTabCon .txtArea .tit {font-weight:bold; font-size:26px; color:#000;} .busiArea .busiTabCon .txtArea .txt {font-size:16px; color:#555; line-height:28px; word-break:keep-all; margin-top:25px;} .busiArea .busiTabCon .txtArea ul {margin-top:35px;} .busiArea .busiTabCon .txtArea ul li {position:relative; padding-left:15px; font-size:16px; color:#555; margin-top:10px;} .busiArea .busiTabCon .txtArea ul li:first-child {margin-top:0;} .busiArea .busiTabCon .txtArea ul li:before {content:''; position:absolute; top:8px; left:0; width:4px; height:4px; background:#8bbf45; border-radius:2px;} .busiArea .busiTabCon .txtArea ul li span {display:inline-block; vertical-align:top; margin-right:16px; font-weight:bold; color:#000;} .busiMapArea {position:relative; width:100%; overflow:hidden; margin-top:100px;} .busiMapArea .map {display:none; height:460px; background:url("/templates/BFPC/images/busimap_img1.jpg") no-repeat 50% 50%; background-size:auto 100%;} .busiMapArea .map:first-child {display:block;} .busiMapArea .map.map2 {background:url("/templates/BFPC/images/busimap_img2.jpg") no-repeat 50% 50%; background-size:auto 100%;} .busiMapArea .map.map3 {background:url("/templates/BFPC/images/busimap_img3.jpg") no-repeat 50% 50%; background-size:auto 100%;} .busiMapArea .map.map4 {background:url("/templates/BFPC/images/busimap_img4.jpg") no-repeat 50% 50%; background-size:auto 100%;} .busiMapArea .map.map5 {background:url("/templates/BFPC/images/busimap_img5.jpg") no-repeat 50% 50%; background-size:auto 100%;} .busiMapArea .map.map6 {background:url("/templates/BFPC/images/busimap_img6.jpg") no-repeat 50% 50%; background-size:auto 100%;} .busiMapArea .map.map7 {background:url("/templates/BFPC/images/busimap_img7.jpg") no-repeat 50% 50%; background-size:auto 100%;} .busiMapArea .map.map8 {background:url("/templates/BFPC/images/busimap_img8.jpg") no-repeat 50% 50%; background-size:auto 100%;} .busiMapArea .map.map9 {background:url("/templates/BFPC/images/busimap_img9.jpg") no-repeat 50% 50%; background-size:auto 100%;}/* 대구수처리공장 */ .busiMapArea .map img.mobile {display:none;} .busiArea .busiTabCon .busiTit {font-weight:bold; font-size:24px; color:#000; margin-top:60px;} .busiArea .busiTabCon .busiTit:first-child {margin-top:0;} .busiArea .busiTabCon .busiList {border-top:2px solid #000; margin-top:30px;} .busiArea .busiTabCon .busiList li {position:relative; padding:50px 0; border-bottom:1px solid #e0e0e0; overflow:hidden;} .busiArea .busiTabCon .busiList li .txtArea {position:relative; padding:0 170px 0 30px; display:block; margin-top:0;} .busiArea .busiTabCon .busiList li .txtArea .txt1 {font-weight:bold; font-size:20px; color:#000;} .busiArea .busiTabCon .busiList li .txtArea .txt1 span {position:relative; display:inline-block; padding-left:18px; color:#8bbf45; margin-left:18px;} .busiArea .busiTabCon .busiList li .txtArea .txt1 span:before {content:''; position:absolute; top:50%; left:0; width:1px; height:16px; background:#e0e0e0; margin-top:-7px;} .busiArea .busiTabCon .busiList li .txtArea .txt2 {margin-top:20px;} .busiArea .busiTabCon .busiList li .txtArea .txt2 p {font-size:16px; color:#555; margin-top:10px;} .busiArea .busiTabCon .busiList li .txtArea .txt2 p:first-child {margin-top:0;} .busiArea .busiTabCon .busiList li .txtArea .txt2 p span {display:inline-block; vertical-align:top; font-weight:bold; color:#000; margin-right:17px} .busiArea .busiTabCon .busiList li .txtArea a {display:block; position:absolute; top:50%; right:30px; padding:9px 31px 11px; border:2px solid #d9d9d9; font-weight:bold; font-size:16px; color:#555; margin-top:-20px;} .busiArea .busiTabCon .busiList li .txtArea a:hover, .busiArea .busiTabCon .busiList li .txtArea a:focus {border:2px solid #8bbf45; color:#fff; background:#8bbf45;} .busiArea .busiTabCon .busiList li .mapArea {display:none; position:relative; padding:40px 0 0; width:100%; overflow:hidden; background:none;} .busiArea .busiTabCon .busiList li .mapArea img {max-width:100%;} /* 생활속의 롯데케미칼 */ #lifeMenu {display:none; position:fixed; top:50%; right:40px; margin-top:-115px; z-index:5;} #lifeMenu li {margin-bottom:10px;} #lifeMenu li:first-child, #lifeMenu li:last-child {margin-bottom:0;} #lifeMenu li a {position:relative; display:block; min-height:20px; padding-right:50px; font-family:'Proxima-Bold', sans-serif; font-weight:normal; font-size:20px; color:#fff; text-align:right; line-height:1;} #lifeMenu li a span {display:none;} #lifeMenu li a:before {content:''; position:absolute; top:50%; right:0; width:16px; height:2px; background:#fff; margin-top:-2px;} #lifeMenu li.active a:before {width:35px; background:#8dc63f;} #lifeMenu li:first-child a:before {display:none;} #lifeMenu li.active span {display:block;} .lifeArea {position:relative; width:100%; background:#000;} .lifeArea .intro {text-align:center; background:url("/templates/BFPC/images/life_intro_bg.jpg") no-repeat 50% 50%; background-size:cover;} .lifeArea .intro .introCon {position:relative; width:100%; height:100%; overflow:hidden;} .lifeArea .intro .timeArea {position:relative; top:50%; -ms-transform:translate(0, -50%); -webkit-transform:translate(0, -50%); transform:translate(0, -50%); display:inline-block; vertical-align:top; width:730px; height:730px; text-align:center;} .lifeArea .intro .timeArea .timeBg {position:absolute; top:0; left:0; width:100%; height:100%; background:url("/templates/BFPC/images/life_time_bg.png") no-repeat 50% 50%; background-size:100% 100%; opacity:0;} .lifeArea .intro .timeArea .time {position:absolute; top:0; left:0; width:100%; height:100%; background:url("/templates/BFPC/images/life_time_icon.png") no-repeat 50% 50%; background-size:100% 100%; opacity:0;} .lifeArea .intro .timeArea .txtArea {position:absolute; top:50%; left:0; width:100%; -webkit-transform:translate(0,-50%); transform:translate(0,-50%);} .lifeArea .intro .timeArea .tit {position:relative; top:100px; opacity:0; font-weight:bold; font-size:56px; color:#fff; line-height:64px; word-break:keep-all;} .lifeArea .intro .timeArea .txt {position:relative; top:100px; opacity:0; font-size:18px; color:#fff; line-height:30px; word-break:keep-all; margin-top:40px;} .lifeArea .bottomBt {position:absolute; bottom:-94px; left:50%; opacity:0;display:block; width:60px; padding-bottom:80px; font-family:'Proxima-Bold', sans-serif; font-weight:normal; font-size:14px; color:#fff; line-height:1; text-align:center; margin-left:-30px;} .lifeArea .bottomBt:after {content:''; position:absolute; bottom:0; left:50%; width:2px; height:50px; background:#fff; margin-left:-1px;} .lifeArea .section .lifeCon {position:relative; width:100%; overflow:hidden;} .lifeArea .section .lifeCon.mobile {display:none;} .lifeArea .section .img {position:relative; width:100%; height:100%; min-height:1080px; background:url("/templates/BFPC/images/life_img1.jpg") no-repeat 100% 50%; background-size:auto 100%;} .lifeArea .section.sec2 .img {background:url("/templates/BFPC/images/life_img2.jpg") no-repeat 100% 50%; background-size:auto 100%;} .lifeArea .section.sec3 .img {background:url("/templates/BFPC/images/life_img3.jpg") no-repeat 100% 50%; background-size:auto 100%;} .lifeArea .section.sec4 .img {background:url("/templates/BFPC/images/life_img4.jpg") no-repeat 100% 50%; background-size:auto 100%;} .lifeArea .section.sec5 .img {background:url("/templates/BFPC/images/life_img5.jpg") no-repeat 100% 50%; background-size:auto 100%;} .lifeArea .section.sec6 .img {background:url("/templates/BFPC/images/life_img6.jpg") no-repeat 100% 50%; background-size:auto 100%;} .lifeArea .section.sec7 .img {background:url("/templates/BFPC/images/life_img7.jpg") no-repeat 100% 50%; background-size:auto 100%;} .lifeArea .section.sec8 .img {background:url("/templates/BFPC/images/life_img8.jpg") no-repeat 100% 50%; background-size:auto 100%;} .lifeArea .section .lifeCon .txtArea {position:absolute; top:50%; left:50%; width:1400px; margin-left:-700px; color:#fff; -webkit-transform:translate(0,-50%); transform:translate(0,-50%);} .lifeArea .section .lifeCon .txtArea .time {font-family:'Proxima-Bold', sans-serif; font-weight:normal; font-size:90px; color:#fff; line-height:1;} .lifeArea .section .lifeCon .txtArea .time span {font-size:20px;} .lifeArea .section .lifeCon .txtArea .tit {font-size:38px; color:#fff; line-height:1; margin-top:10px;} .lifeArea .section .lifeCon .txtArea .txt {font-size:18px; color:#fff; line-height:28px; margin-top:40px;} .lifeArea .section .lifeCon .txtArea .btns {margin-top:50px;} .lifeArea .section .lifeCon .txtArea .btns a {position:relative; display:inline-block; width:23px; height:12px; background:url("/templates/BFPC/images/life_next_btn.png") no-repeat 0 0; background-size:100% auto;} .lifeArea .section .lifeCon .txtArea .btns .next:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url("/templates/BFPC/images/life_next_btn_hover.png") no-repeat 0 0; background-size:100% auto; opacity:0; transition:0.3s;} .lifeArea .section .lifeCon .txtArea .btns .next:hover:before, .lifeArea .section .lifeCon .txtArea .btns .next:focus:before {opacity:1; transition:0.3s;} .lifeArea .section .lifeCon .txtArea .btns .prev {background:url("/templates/BFPC/images/life_prev_btn.png") no-repeat 0 0; background-size:100% auto; margin-left:25px;} .lifeArea .section .lifeCon .txtArea .btns .prev:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url("/templates/BFPC/images/life_prev_btn_hover.png") no-repeat 0 0; background-size:100% auto; opacity:0; transition:0.3s;} .lifeArea .section .lifeCon .txtArea .btns .prev:hover:before, .lifeArea .section .lifeCon .txtArea .btns .prev:focus:before {opacity:1; transition:0.3s;} .lifeArea .section .lifeCon .focus {position:absolute; top:0; right:0; height:100%;} .lifeArea .section .lifeCon .focus li {position:absolute; top:191px; right:595px;} .lifeArea .section .lifeCon .focus li .openBt {position:relative; display:block; width:60px; height:60px; background:url("/templates/BFPC/images/life_pop_btn.png") no-repeat 0 0; background-size:100% auto;} .lifeArea .section .lifeCon .focus li .openBt:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url("/templates/BFPC/images/life_pop_btn_hover.png") no-repeat 0 0; background-size:100% 100%; opacity:0; transition:0.3s;} .lifeArea .section .lifeCon .focus li .openBt:hover:before, .lifeArea .section .lifeCon .focus li .openBt:focus:before {opacity:1; transition:0.3s;} .lifeArea .section .lifeCon .focus li .conPop {display:none; position:absolute; top:0; right:0; padding:60px 40px 40px; width:475px; height:auto; background:#8bbf45; z-index:50;} .lifeArea .section .lifeCon .focus li .conPop.bottom {top:auto; bottom:0;} .lifeArea .section .lifeCon .focus li .conPop.left {left:0; right:auto;} .lifeArea .section .lifeCon .focus li .conPop .tit {font-weight:bold; font-size:24px; color:#fff; line-height:1; word-break:keep-all;} .lifeArea .section .lifeCon .focus li .conPop .txt {font-size:16px; color:#fff; line-height:28px; word-break:keep-all; margin-top:20px;} .lifeArea .section .lifeCon .focus li .conPop .closeBt {position:absolute; top:30px; right:30px; width:24px; height:24px; background:url("/templates/BFPC/images/life_pop_close.png") no-repeat 0 0; background-size:100% auto;} /* 06:00 하루의 시작 */ .lifeArea .section.sec1 .lifeCon .focus .f1 {top:191px; right:595px;} .lifeArea .section.sec1 .lifeCon .focus .f2 {top:282px; right:545px;} .lifeArea .section.sec1 .lifeCon .focus .f3 {top:692px; right:463px;} .lifeArea .section.sec1 .lifeCon .focus .f4 {top:780px; right:576px;} /* 08:00 출근길 */ .lifeArea .section.sec2 .lifeCon .focus .f1 {top:341px; right:161px;} .lifeArea .section.sec2 .lifeCon .focus .f2 {top:255px; right:381px;} .lifeArea .section.sec2 .lifeCon .focus .f3 {top:800px; right:622px;} .lifeArea .section.sec2 .lifeCon .focus .f4 {top:855px; right:720px;} /* 10:00 회의중 */ .lifeArea .section.sec3 .lifeCon .focus .f1 {top:284px; right:229px;} .lifeArea .section.sec3 .lifeCon .focus .f2 {top:303px; right:448px;} .lifeArea .section.sec3 .lifeCon .focus .f3 {top:832px; right:284px;} /* 12:00 식사 시간 */ .lifeArea .section.sec4 .lifeCon .focus .f1 {top:760px; right:680px;} .lifeArea .section.sec4 .lifeCon .focus .f2 {top:854px; right:521px;} .lifeArea .section.sec4 .lifeCon .focus .f3 {top:488px; right:316px;} /* 15:00 외근 */ .lifeArea .section.sec5 .lifeCon .focus .f1 {top:343px; right:747px;} .lifeArea .section.sec5 .lifeCon .focus .f2 {top:297px; right:352px;} .lifeArea .section.sec5 .lifeCon .focus .f3 {top:327px; right:646px;} .lifeArea .section.sec5 .lifeCon .focus .f4 {top:539px; right:545px;} /* 18:00 저녁 */ .lifeArea .section.sec6 .lifeCon .focus .f1 {top:750px; right:275px;} .lifeArea .section.sec6 .lifeCon .focus .f2 {top:868px; right:610px;} .lifeArea .section.sec6 .lifeCon .focus .f3 {top:867px; right:185px;} /* 20:00 세면 */ .lifeArea .section.sec7 .lifeCon .focus .f1 {top:609px; right:662px;} .lifeArea .section.sec7 .lifeCon .focus .f2 {top:875px; right:928px;} .lifeArea .section.sec7 .lifeCon .focus .f3 {top:780px; right:626px;} /* 21:00 퇴근 후 휴식 */ .lifeArea .section.sec8 .lifeCon .focus .f1 {top:335px; right:821px;} .lifeArea .section.sec8 .lifeCon .focus .f2 {top:549px; right:915px;} .lifeArea .section.sec8 .lifeCon .focus .f3 {top:707px; right:637px;} /* 지속가능경영_지속가능경영쳬계 */ .manage1 > .tit {padding-left:32px; font-weight:bold; font-size:24px; color:#000; background:url("/templates/BFPC/images/manage6_tit_icon.png") no-repeat 0 4px; margin-top:80px;} .manage1 .tit2 {font-weight:bold; font-size:22px; color:#000; text-align:center;} .manage1 > .txt {font-size:16px; color:#555; line-height:30px; word-break:keep-all; margin-top:20px;} .manage1 .con1 {position:relative; text-align:center; margin-top:80px;} .manage1 .con1 .boxArea {text-align:center; overflow:hidden; margin-top:30px;} .manage1 .con1 .boxArea .box {float:left; width:20%;} .manage1 .con1 .boxArea .box .img img {max-width:100%;} .manage1 .con1 .boxArea .box .txtArea {padding:45px 5px; min-height:124px; border-left:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0;} .manage1 .con1 .boxArea .box:last-child .txtArea {border-right:1px solid #e0e0e0;} .manage1 .con1 .boxArea .box .txtArea .tit {font-weight:bold; font-size:20px; color:#000;} .manage1 .con1 .boxArea .box .txtArea .txt {font-size:16px; color:#555; line-height:26px; word-break:keep-all; margin-top:25px} .manage1 .con2 {padding:190px 0 150px; text-align:center; background:url("/templates/BFPC/images/manage1_bg1.png") no-repeat 50% 40px, url("/common/images/icon/manage1_bg2.png") no-repeat 50% 100%;} .manage1 .con2 ul {display:inline-block; vertical-align:top; padding:44px 0; width:1040px; max-width:1040px; border:2px solid #8cc63e; background:#fff; text-align:center; overflow:hidden; border-radius:185px; margin-top:30px;} .manage1 .con2 ul li {display:inline-block; vertical-align:top; margin-left:45px;} .manage1 .con2 ul li:first-child {margin-left:0;} .manage1 .con2 ul li .img img {max-width:100%;} .manage1 .con2 ul li .txt {font-size:16px; color:#555; line-height:26px; word-break:keep-all; margin-top:20px;} .manage1 .con3 {text-align:center; margin-top:40px;} .manage1 .con3 .txt {font-weight:bold; font-size:32px; color:#000; line-height:46px; word-break:keep-all; margin-top:15px;} .manage1 .con3 .txt span {color:#8cc63e} .manage1 .con3 .img > img {max-width:100%;} .manage1 .reportList li {display:table; table-layout:fixed; width:100%; padding:30px 0; height:60px; border-bottom:1px solid #e0e0e0; overflow:hidden;} .manage1 .reportList li .year {display:table-cell; width:113px; vertical-align:middle; text-align:center; font-weight:bold; font-size:18px; color:#8bbf45;} .manage1 .reportList li .tit {display:table-cell; vertical-align:middle; padding-left:70px; font-weight:bold; font-size:18px; color:#000; line-height:1.5; word-break:break-all;} .manage1 .reportList li .btns {display:table-cell; vertical-align:middle; padding:0 30px; width:402px;} .manage1 .reportList li .btns a {display:inline-block; padding:10px 44px 10px 18px; border:2px solid #e0e0e0; font-weight:bold; font-size:16px; color:#555; background:url("/templates/BFPC/images/down_icon1.png") no-repeat right 18px top 50%; margin-left:10px;} .manage1 .reportList li .btns a:first-child {margin-left:0;} .manage1 .reportList li .btns a:hover, .manage1 .reportList li .btns a:focus {color:#fff; border:2px solid #8bbf45; background:#8bbf45 url("/templates/BFPC/images/down_icon1_on.png") no-repeat right 18px top 50%;} .manage1Report {padding:74px 0; background:#f4f4f4;} .manage1Report .inner {overflow:hidden;} .manage1Report .txtArea {float:left;} .manage1Report .txtArea .tit {font-weight:bold; font-size:24px; color:#000; line-height:36px;} .manage1Report .txtArea .tit > span {display:inline-block; vertical-align:top; padding:0 25px; font-size:16px; color:#fff; background:#8cc63e; border-radius:18px; margin-right:30px} .manage1Report .txtArea .txt {font-size:16px; color:#555; line-height:30px; word-break:keep-all; margin-top:20px;} .manage1Report .txtArea .btns {margin-top:60px;} .manage1Report .txtArea .btns a {display:inline-block; padding:10px 44px 10px 18px; border:2px solid #e0e0e0; font-weight:bold; font-size:16px; color:#555; background:url("/templates/BFPC/images/down_icon1.png") no-repeat right 18px top 50%; margin-left:10px;} .manage1Report .txtArea .btns a:first-child {margin-left:0;} .manage1Report .txtArea .btns a:hover, .manage1Report .txtArea .btns a:focus {color:#fff; border:2px solid #8bbf45; background:#8bbf45 url("/templates/BFPC/images/down_icon1_on.png") no-repeat right 18px top 50%;} .manage1Report .imgArea {float:right; padding-right:97px} .manage1Report .imgArea img {max-width:100%;} /* 지속가능경영_지속가능경영쳬계_지속가능발전목표 */ .manage1.type2 {padding-bottom:140px;} .manage1 .sdgsArea {position:relative; overflow:hidden; margin-top:80px;} .manage1 .sdgsArea .top {text-align:center;} .manage1 .sdgsArea .top img {max-width:80%;} .manage1 .sdgsArea .sdgsList {position:relative; margin:60px auto 0;} .manage1 .sdgsArea .sdgsList li {width:215px; text-align:center;} .manage1 .sdgsArea .sdgsList li .img {width:100%} .manage1 .sdgsArea .sdgsList li .img img {width:100%;} .manage1 .sdgsArea .sdgsList li .txt {padding:15px 5px 40px; font-size:16px; color:#555; line-height:26px; word-break:keep-all;} .manage1 .sdgsArea .sdgsList li.gutter-sizer {width:22px;} .manage1 .dotLIst {margin-top:25px;} .manage1 .dotLIst li {position:relative; padding-left:16px; font-size:16px; color:#555; line-height:30px;} .manage1 .dotLIst li:before {content:''; position:absolute; top:13px; left:0; width:4px; height:4px; background:#8bbf45; border-radius:2px;} /* 지속가능경영_지속가능경영쳬계_팝업 */ .layerPop.surveyPop .popBody {padding:30px 30px 60px;} .surveyArea .txt1 {font-weight:bold; font-size:22px; color:#000; text-align:center; line-height:1.5; word-break:keep-all;} .surveyArea .txt2 {font-size:16px; color:#555; text-align:center; line-height:1.5; word-break:keep-all; margin-top:20px;} .surveyArea .surveyList {border-top:2px solid #000; margin-top:35px;} .surveyArea .surveyList > li {padding:20px 30px 23px; border-bottom:1px solid #e0e0e0; overflow:hidden;} .surveyArea .surveyList > li .tit {font-size:18px; color:#000; line-height:1.5; word-break:keep-all;} .surveyArea .surveyList > li ul {overflow:hidden; margin-top:15px;} .surveyArea .surveyList > li ul li {float:left; min-width:176px; height:34px; overflow:hidden;} .surveyArea .surveyList > li .type4 {min-width:220px;} .surveyArea .surveyList > li .type4 li {min-width:220px;} .surveyArea .surveyList > li ul li > div {display:inline-block; vertical-align:top; height:34px; line-height:30px;} .surveyArea .surveyList > li ul li.etc > div {display:inline-block; vertical-align:top; margin-left:5px;} .surveyArea .surveyList > li ul li.etc > div:first-child {margin-left:0;} .surveyArea .surveyList > li ul li.etc .textInput {display:inline-block; vertical-align:top;} .surveyArea .surveyList > li ul li.etc .textInput input {width:218px; height:26px; vertical-align:top;} /* 지속가능경영_컴플라이언스 경영 */ .manage2 {position:relative; overflow:hidden;} .manage2 > .tit1 {padding-left:32px; font-weight:bold; font-size:24px; color:#000; background:url("/templates/BFPC/images/manage6_tit_icon.png") no-repeat 0 4px; margin-top:80px;} .manage2 > .tit1:first-child {margin-top:0;} .manage2 > .txt1 {font-size:16px; line-height:30px; word-break:keep-all; margin-top:20px;} .manage2 .system {position:relative; padding:80px 0; text-align:center; border:1px solid #e0e0e0; overflow:hidden; margin-top:30px;} .manage2 .system > img {max-width:100%;} .manage2 .system > img.mobile {display:none;} .manage2 .system .mobileTxt {display:none;} .manage2 .accoArea {border:1px solid #e0e0e0; margin-top:100px;} .manage2 .grayBox {padding:79px 66px; background:#f4f4f4; border:1px solid #e0e0e0; margin-top:30px;} .manage2 .grayBox .txt1 {font-weight:bold; font-size:18px; color:#000; line-height:30px; text-align:center; word-break:keep-all;} .manage2 .grayBox .txt2 {font-size:16px; color:#555; line-height:30px; word-break:keep-all; margin-top:60px;} .manage2 .grayBox .txt2 p {margin-top:45px;} .manage2 .grayBox .txt2 p:first-child {margin-top:0;} .manage2 .grayBox .txt3 {text-align:center; margin-top:95px} .manage2 .grayBox .txt3 .name {font-size:18px; color:#000;} /* 지속가능경영_윤리경영 */ .manage3Txt {font-size:18px; color:#555; line-height:32px; text-align:center; word-break:keep-all; margin-top:100px;} .manage3 {padding-top:80px; border-top:1px solid #e0e0e0; margin-top:80px;} .manage3 > .tit1 {padding-left:32px; font-weight:bold; font-size:24px; color:#000; background:url("/templates/BFPC/images/manage6_tit_icon.png") no-repeat 0 4px; margin-top:80px;} .manage3 > .tit1:first-child {margin-top:0;} .manage3 > .txt {font-size:16px; color:#666; line-height:1.5; word-break:keep-all; margin-top:25px;} .manage3 > .img {text-align:center; margin-top:80px;} .manage3 > .img img {max-width:100%;} .manage3 > .img img.mobile {display:none;} .manage3 > .img .mobileTxt {display:none;} .manage3 .grayBox {padding:80px 55px; background:#f4f4f4; text-align:center; overflow:hidden; margin-top:30px;} .manage3 .grayBox li {float:left; display:inline-block; vertical-align:top; width:230px; margin-left:35px;} .manage3 .grayBox li:first-child {margin-left:0;} .manage3 .grayBox li .tit {position:relative; padding:8px 8px 38px; background:url("/templates/BFPC/images/manage3_tit_bg.png") no-repeat 0 0;} .manage3 .grayBox li .tit:before {content:''; position:absolute; bottom:0; left:50%; width:1px; height:30px; background:#e0e0e0; z-index:0;} .manage3 .grayBox li .tit:after {content:''; position:absolute; bottom:0; left:50%; width:7px; height:7px; margin-left:-3px; background:url("/templates/BFPC/images/manage3_tit_icon.png") no-repeat 0 0; background-size:100% auto;} .manage3 .grayBox li .tit > span {position:relative; display:table; table-layout:fixed; width:214px; height:214px;} .manage3 .grayBox li .tit > span span {display:table-cell; text-align:center; vertical-align:middle; font-weight:bold; font-size:20px; color:#8cc63e; line-height:32px;} .manage3 .grayBox li .txt {font-size:16px; color:#555; line-height:28px; margin-top:10px;} .manage3 .grayBox li:nth-child(even) .tit {background:url("/templates/BFPC/images/manage3_tit_bg2.png") no-repeat 0 0;} .manage3 .grayBox li:nth-child(even) .tit:after {background:url("/templates/BFPC/images/manage3_tit_icon2.png") no-repeat 0 0; background-size:100% auto;} .manage3 .grayBox li:nth-child(even) .tit > span span {color:#034874;} .manage3 .btnArea {text-align:center; margin-top:50px;} .manage3 .btnArea a {margin-left:10px; margin-top:0;} .manage3 .btnArea a:first-child {margin-left:0;} /* 지속가능경영_실천규범 */ .manage3.type2 {padding-top:0; border-top:0;} .manage3.type2 > .txt1 {font-size:16px; color:#555; line-height:30px; word-break:keep-all; margin-top:30px;} .manage3.type2 > .tit2 {font-weight:bold; font-size:22px; color:#000; word-break:keep-all; margin-top:40px;} .manage3.type2 > .tit3 {font-weight:bold; font-size:18px; color:#90c24e; margin-top:40px;} .manage3.type2 .txtBox {border:1px solid #e0e0e0; max-height:298px; overflow-y:auto; margin-top:50px;} .manage3.type2 .txtBox > div {padding:40px 30px;} .manage3.type2 .txtBox > div .tit {font-weight:bold; font-size:18px; color:#000; margin:40px 0;} .manage3.type2 .txtBox > div .tit:first-child {margin-top:0;} .manage3.type2 .txtBox > div .tit2 {font-weight:bold; font-size:16px; color:#000; line-height:30px; word-break:keep-all;} .manage3.type2 .txtBox > div .txt {font-size:16px; color:#555; line-height:30px; word-break:keep-all;} .manage3.type2 .grayBox2 {padding:80px 0; background:#f4f4f4; text-align:center; margin-top:30px;} .manage3.type2 .grayBox2 ul {display:inline-block; vertical-align:top; overflow:hidden;} .manage3.type2 .grayBox2 ul li {float:left; position:relative; margin:0 45px; width:222px; height:249px; background:url("/templates/BFPC/images/graybox2_bg1.png") no-repeat 50% 50%; font-weight:bold; font-size:18px; color:#000; line-height:30px;} .manage3.type2 .grayBox2 ul li:after {content:''; position:absolute; top:50%; right:-60px; width:30px; height:28px; margin-top:-14px; background:url("/templates/BFPC/images/graybox2_icon.png") no-repeat 50% 50%;} .manage3.type2 .grayBox2 ul li:last-child:after {display:none;} .manage3.type2 .grayBox2 ul li.bg2 {background:url("/templates/BFPC/images/graybox2_bg2.png") no-repeat 50% 50%;} .manage3.type2 .grayBox2 ul li.bg3 {background:url("/templates/BFPC/images/graybox2_bg3.png") no-repeat 50% 50%;} .manage3.type2 .grayBox2 ul li.bg4 {background:url("/templates/BFPC/images/graybox2_bg4.png") no-repeat 50% 50%;} .manage3.type2 .grayBox2 ul li div {display:table; table-layout:fixed; width:100%; height:100%;} .manage3.type2 .grayBox2 ul li div p {display:table-cell; width:100%; height:100%; text-align:center; vertical-align:middle;} .manage3.type2 .grayBox2 ul li span {display:inline-block; font-weight:normal; font-size:16px; color:#555; line-height:26px;} /* 지속가능경영_환경안전 */ .manage4Top {position:relative; text-align:center; margin-top:80px;} .manage4Top .txt1 > span {position:relative; display:inline-block; padding:10px 45px; font-family:'Proxima-Extrabold', sans-serif; font-weight:normal; font-size:40px; color:#8bbf45;} .manage4Top .txt1 > span:before {content:''; position:absolute; top:0; left:0; width:25px; height:19px; background:url("/templates/BFPC/images/manage4_icon1.gif") no-repeat 0 0;} .manage4Top .txt1 > span:after {content:''; position:absolute; bottom:0; right:0; width:25px; height:19px; background:url("/templates/BFPC/images/manage4_icon2.gif") no-repeat 0 0;} .manage4Top .txt2 {font-weight:bold; font-size:24px; color:#000; margin-top:15px;} .manage4Top .txt3 {font-size:18px; color:#555; line-height:32px; word-break:keep-all; margin-top:50px;} .manage4Top .imgTxt {position:relative; margin-top:70px;} .manage4Top .imgTxt > img {max-width:100%;} .manage4Top .imgTxt > img.mobile {display:none;} .manage4 {padding-top:80px; border-top:1px solid #e0e0e0; margin-top:80px;} .manage4.green {padding-top:0; border-top:0;} .manage4 .tit1 {padding-left:32px; font-weight:bold; font-size:24px; color:#000; background:url("/templates/BFPC/images/manage6_tit_icon.png") no-repeat 0 4px; margin-top:80px;} .manage4 .tit1:first-child {margin-top:0;} .manage4 > .tit2 {font-weight:bold; font-size:22px; color:#000; margin-top:50px;} .manage4 > .halfArea {position:relative; overflow:hidden;} .manage4 > .halfArea > div {float:left; width:50%; box-sizing:border-box;} .manage4 > .halfArea .left {padding-right:50px;} .manage4 > .halfArea .right {padding-left:50px;} .manage4 .imgList1 {overflow:hidden; margin-top:30px;} .manage4 .imgList1 li {float:left; position:relative; width:314px; text-align:center; margin-top:22px; margin-right:22px;} .manage4 .imgList1 li:first-child, .manage4 .imgList1 li:nth-child(2) {margin-top:0;} .manage4 .imgList1 li:nth-child(2n) {margin-right:0;} .manage4 .imgList1 li .img {position:relative; width:100%;} .manage4 .imgList1 li .img > img {width:100%;} .manage4 .imgList1 li .img > span {position:absolute; top:20px; left:20px; width:33px; height:33px; line-height:33px; font-family:'Proxima-Bold', sans-serif; font-weight:normal; font-size:16px; color:#fff; background:#8bbf45; border-radius:17px;} .manage4 .imgList1 li .txt {position:absolute; bottom:0; left:0; width:100%; padding:18px 0; font-size:18px; color:#fff; line-height:1; background:rgba(0,0,0,0.6); margin-top:0;} .manage4 .imgList2 {overflow:hidden; margin-top:30px;} .manage4 .imgList2 li {position:relative; float:left; width:314px; margin-top:22px; margin-right:22px;} .manage4 .imgList2 li:first-child, .manage4 .imgList2 li:nth-child(2) {margin-top:0;} .manage4 .imgList2 li:nth-child(2n) {margin-right:0;} .manage4 .imgList2 li > img {width:100%;} .manage4 .txt {font-size:16px; color:#555; line-height:30px; word-break:keep-all; margin-top:25px;} .manage4 .grayBox {padding:60px 0; text-align:center; background:#f4f4f4; margin-top:30px;} .manage4 .grayBox > div {display:inline-block; vertical-align:top; text-align:center;} .manage4 .grayBox > div .img {float:left; } .manage4 .grayBox > div ul {float:left; padding-top:45px; margin-left:100px; text-align:left;} .manage4 .grayBox > div ul li {position:relative; padding-left:16px; font-size:18px; color:#555; margin-top:15px;} .manage4 .grayBox > div ul li:before {content:''; position:absolute; top:9px; left:0; width:4px; height:4px; background:#8bbf45; border-radius:2px;} .manage4 .grayBox > div ul li:first-child {margin-top:0;} .manage4 .dotLIst {margin-top:25px;} .manage4 .dotLIst li {position:relative; padding-left:16px; font-size:16px; color:#555; line-height:1.5; margin-top:10px;} .manage4 .dotLIst li:before {content:''; position:absolute; top:11px; left:0; width:4px; height:4px; background:#8bbf45; border-radius:2px;} .manage4 .dotLIst li:first-child {margin-top:0;} .manage4 .greenImgList {overflow:hidden; margin-top:50px;} .manage4 .greenImgList > li {float:left; width:452px; margin-left:22px;} .manage4 .greenImgList > li:first-child {margin-left:0;} .manage4 .greenImgList > li .img img {max-width:100%;} .manage4 .greenImgList > li .tit {font-weight:bold; font-size:22px; color:#000; line-height:30px; word-break:keep-all; margin-top:20px;} .manage4 .greenImgList > li ul {margin-top:20px;} .manage4 .greenImgList > li ul li {position:relative; padding-left:15px; font-size:16px; color:#555; word-break:keep-all; line-height:26px;} .manage4 .greenImgList > li ul li:before {content:''; position:absolute; top:12px; left:0; width:4px; height:4px; background:#8bbf45; border-radius:2px;} .manage4 .greenList {overflow:hidden;} .manage4 .greenList > li {float:left; width:calc(50% - 13px); min-height:349px; border:1px solid #e0e0e0; text-align:center; margin-right:22px; margin-top:122px;} .manage4 .greenList > li:nth-child(2n) {margin-right:0;} .manage4 .greenList > li .icon {margin-top:-73px;} .manage4 .greenList > li .tit {font-weight:bold; font-size:22px; color:#000; margin-top:40px;} .manage4 .greenList > li ul {display:inline-block; padding:0 15px; vertical-align:top; text-align:left; margin-top:20px;} .manage4 .greenList > li ul {margin-top:20px;} .manage4 .greenList > li ul li {position:relative; padding-left:15px; font-size:16px; color:#555; line-height:26px; word-break:keep-all;} .manage4 .greenList > li ul li:before {content:''; position:absolute; top:12px; left:0; width:4px; height:4px; background:#8bbf45; border-radius:2px;} .manage4 .greenImg {text-align:center; padding-bottom:20px; margin-top:80px;} .manage4 .greenImg img {max-width:100%;} .manage4 .greenImg img.mobile {display:none;} /* 지속가능경영_CSR - 추진체계 */ .csrArea1 {position:relative; text-align:center; margin:80px auto 0;} .csrArea1 .txt1 {font-weight:bold; font-size:30px; color:#000; word-break:keep-all;} .csrArea1 .txt1 > span {position:relative; display:inline-block; color:#034874;} .csrArea1 .txt1 > img {display:inline-block; margin-top:3px;} .csrArea1 .txt2 {font-size:18px; color:#555; line-height:32px; word-break:keep-all; margin-top:35px;} .csrArea1 .imgArea {position:relative; width:100%; overflow:hidden; margin-top:80px;} .csrArea1 .imgArea img {max-width:100%;} .csrArea1 .imgArea img.mobile {display:none;} /* 지속가능경영_CSR - CSR활동 */ .csrArea2 {position:relative; width:100%; overflow:hidden; margin-top:80px;} .csrArea2 .csrTab {text-align:center;} .csrArea2 .csrTab > div {display:inline-block; vertical-align:top; width:600px; max-width:100%;} .csrArea2 .csrTab > div a {float:left; display:inline-block; width:25%; padding-bottom:17px; border-bottom:3px solid #e0e0e0; font-size:18px; color:#555;} .csrArea2 .csrTab > div a.on {font-weight:bold; color:#8bbf45; border-bottom:3px solid #8bbf45;} .csrArea2 .csrTit {font-family:'Proxima-Bold', sans-serif; font-weight:normal; font-size:40px; color:#555; text-align:center; margin-top:70px;} .csrArea2 .csrTit span {color:#8bbf45;} .csrArea2 .csrTxt {font-size:18px; color:#555; text-align:center; margin-top:30px;} .csrArea2 .csrBox {position:relative; width:100%; overflow:hidden; margin-top:40px;} .csrArea2 .csrBox > div {width:100%; height:450px; overflow:hidden;} .csrArea2 .csrBox > div .imgBox {float:left; position:relative; width:50%; height:100%; background:#eaeaea;} .csrArea2 .csrBox > div .imgBox .swiper-container {width:100%; height:100%;} .csrArea2 .csrBox > div .imgBox .swiper-button-prev {width:42px; height:42px; margin-top:-21px; background:url("/templates/BFPC/images/csr2_prev.png") no-repeat 0 0;} .csrArea2 .csrBox > div .imgBox .swiper-button-next {width:42px; height:42px; margin-top:-21px; background:url("/templates/BFPC/images/csr2_next.png") no-repeat 0 0;} .csrArea2 .csrBox > div .imgBox .img {width:100%; height:100%; overflow:hidden;} .csrArea2 .csrBox > div .imgBox .img img {position:absolute; top:50%; left:50%; width:100%; min-height:100%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%);} .csrArea2 .csrBox > div .imgBox .txtArea {position:absolute; bottom:0; left:0; width:calc(100% - 60px); padding:36px 30px; background:rgba(0,0,0,0.6);} .csrArea2 .csrBox > div .imgBox .txtArea .tit {font-size:18px; color:#fff;} .csrArea2 .csrBox > div .imgBox .txtArea .date {font-size:16px; color:rgba(255,255,255,0.5); margin-top:14px;} .csrArea2 .csrBox > div .txtBox {float:right; width:50%; height:100%;} .csrArea2 .csrBox > div .txtBox > div {display:table; table-layout:fixed; width:100%; height:100%;} .csrArea2 .csrBox > div .txtBox > div > div {display:table-cell; vertical-align:middle; padding:50px; background:url("/templates/BFPC/images/csr2_bg1.jpg") no-repeat 50% 50%; background-size:cover;} .csrArea2 .csrBox > div .txtBox.bg2 > div > div {background:url("/templates/BFPC/images/csr2_bg2.jpg") no-repeat 50% 50%; background-size:cover;} .csrArea2 .csrBox > div .txtBox.bg3 > div > div {background:url("/templates/BFPC/images/csr2_bg3.jpg") no-repeat 50% 50%; background-size:cover;} .csrArea2 .csrBox > div .txtBox.bg4 > div > div {background:url("/templates/BFPC/images/csr2_bg4.jpg") no-repeat 50% 50%; background-size:cover;} .csrArea2 .csrBox > div .txtBox.bg5 > div > div {background:url("/templates/BFPC/images/csr2_bg5.jpg") no-repeat 50% 50%; background-size:cover;} .csrArea2 .csrBox > div .txtBox.bg6 > div > div {background:url("/templates/BFPC/images/csr2_bg6.jpg") no-repeat 50% 50%; background-size:cover;} .csrArea2 .csrBox > div .txtBox.bg7 > div > div {background:url("/templates/BFPC/images/csr2_bg7.jpg") no-repeat 50% 50%; background-size:cover;} .csrArea2 .csrBox > div .txtBox.bg8 > div > div {background:url("/templates/BFPC/images/csr2_bg8.jpg") no-repeat 50% 50%; background-size:cover;} .csrArea2 .csrBox > div .txtBox.bg9 > div > div {background:url("/templates/BFPC/images/csr2_bg9.jpg") no-repeat 50% 50%; background-size:cover;} .csrArea2 .csrBox > div .txtBox > div > div .tit {font-weight:bold; font-size:22px; color:#000;} .csrArea2 .csrBox > div .txtBox > div > div .txt {font-size:16px; color:#555; line-height:28px; margin-top:20px;} .csrArea2 .csrBox > div.type2 .imgBox {float:right;} .csrArea2 .csrBox > div.type2 .txtBox {float:left;} /* 지속가능경영_동반성장 */ .manage6 {position:relative;} .manage6 > .txt1 {font-weight:bold; font-size:24px; color:#000; line-height:34px; text-align:center; word-break:keep-all;} .manage6 > .txt1 span {color:#8cc63e;} .manage6 > .txt2 {font-size:18px; color:#555; line-height:32px; text-align:center; word-break:keep-all; margin-top:25px;} .manage6 > .tit1 {padding-left:32px; font-weight:bold; font-size:24px; color:#000; background:url("/templates/BFPC/images/manage6_tit_icon.png") no-repeat 0 4px; margin-top:80px;} .manage6 .imgBox {position:relative; border:1px solid #e0e0e0; overflow:hidden; text-align:center; margin-top:30px;} .manage6 .imgBox img {max-width:100%;} .manage6 .imgBox img.mobile {display:none;} .manage6 .activity {overflow:hidden;margin-top:30px;} .manage6 .activity .boxArea {float:left; padding:30px 40px 0; width:384px; margin-left:4px; background:#f4f4f4;} .manage6 .activity .boxArea:first-child {margin-left:0;} .manage6 .activity .boxArea .tit2 {padding-bottom:29px; font-weight:bold; font-size:22px; color:#000; border-bottom:1px solid #000;} .manage6 .activity .boxArea > div {display:table; table-layout:fixed; width:100%;} .manage6 .activity .boxArea > div .box {display:table-row; height:161px;} .manage6 .activity .boxArea > div .box:first-child {border-top:0;} .manage6 .activity .boxArea > div .box .icon {display:table-cell; width:76px; vertical-align:middle; text-align:center; border-top:1px solid #e0e0e0;} .manage6 .activity .boxArea > div .box .txtArea {display:table-cell; padding-left:14px; vertical-align:middle; border-top:1px solid #e0e0e0;} .manage6 .activity .boxArea > div .box:first-child .icon {border-top:0;} .manage6 .activity .boxArea > div .box:first-child .txtArea {border-top:0;} .manage6 .activity .boxArea > div .box .txtArea .tit {font-weight:bold; font-size:20px; color:#000; line-height:28px;} .manage6 .activity .boxArea > div .box .txtArea ul {margin-top:10px;} .manage6 .activity .boxArea > div .box .txtArea ul li {font-size:16px; color:#555; line-height:26px;} .manage6 .btnArea {margin-top:40px;} .manage6 .btnArea .top a {margin-left:10px; margin-top:10px;} .manage6 .btnArea .top a:first-child {margin-left:0;} .manage6 .btnArea .bottom {margin-top:80px;} .manage6 .btnArea .bottom a {display:inline-block; padding:9px 0; width:289px; border:1px solid #e0e0e0; text-align:center; margin-left:10px;} .manage6 .btnArea .bottom a:first-child {margin-left:0;} .manage6 .adList {position:relative; padding:20px 0; border-top:2px solid #000; border-bottom:2px solid #e0e0e0; margin-top:30px;} .manage6 .adList li {position:relative; padding:40px 0; border-top:1px solid #e0e0e0; overflow:hidden;} .manage6 .adList li:first-child {border-top:0;} .manage6 .adList li > div {display:table; table-layout:fixed; width:100%;} .manage6 .adList li .video {display:table-cell; width:624px; height:350px;} .manage6 .adList li .video iframe {width:100%; height:100%; vertical-align:top;} .manage6 .adList li .txtArea {display:table-cell; padding:0 50px; text-align:left; vertical-align:middle; font-size:16px; color:#555; line-height:28px; word-break:keep-all;} .manage6 .adList li .txtArea .tit {font-weight:bold; font-size:26px; color:#000; line-height:1; margin-bottom:25px;} /* FAQ */ .srchInput {position:relative; text-align:center; margin-top:40px;} .srchInput > div {position:relative; display:inline-block; vertical-align:top; border:2px solid #8bbf45; width:516px; text-align:left;} .srchInput > div input {border:0; padding:3px 20px; width:380px; height:56px; font-size:16px; color:#000;} .srchInput > div input[type=text]::-ms-clear {display:none; width:0; height:0;} .srchInput > div .resetBtn {position:absolute; top:50%; right:61px; margin-top:-13px; width:26px; height:26px; background:url("/templates/BFPC/images/reset_btn.png") no-repeat 50% 50%;} .srchInput > div .srchBtn {position:absolute; top:50%; right:19px; margin-top:-13px; width:26px; height:26px; background:url("/templates/BFPC/images/srch_btn.png") no-repeat 50% 50%;} .faqList {position:relative; border-top:2px solid #000; margin-top:60px;} .faqList > li {border-bottom:1px solid #e0e0e0;} .faqList > li .titArea {position:relative;} .faqList > li .titArea a {position:relative; display:table; table-layout:fixed; vertical-align:middle; padding:18px 0; width:100%; background:url("/templates/BFPC/images/faq_icon.png") no-repeat right 30px top 50%;} .faqList > li .titArea a.on {background:url("/templates/BFPC/images/faq_icon_on.png") no-repeat right 30px top 50%;} .faqList > li .titArea a .label {display:table-cell; vertical-align:middle; padding:0 16px 0 30px; width:44px;} .faqList > li .titArea a .label > span {display:block; width:43px; height:43px; border:1px solid #e0e0e0; background:#fff; font-weight:bold; font-size:18px; color:#8bbf45; text-align:center; line-height:40px; border-radius:22px;} .faqList > li .titArea a.on .label > span {border:1px solid #8bbf45; background:#8bbf45; color:#fff;} .faqList > li .titArea a .gubun {display:table-cell; width:70px; text-align:left; vertical-align:middle; } .faqList > li .titArea a .tit {display:table-cell; text-align:left; vertical-align:middle; padding-right:78px; font-size:18px; color:#000; line-height:28px; word-break:break-all;} .faqList > li .titArea a.on .tit {font-weight:bold;} .faqList > li .txtArea {display:none; position:relative; padding:24px 78px 44px 160px; background:#f7f7f7; border-top:1px solid #e0e0e0;} .faqList > li .txtArea .label {position:absolute; top:30px; left:90px; display:block; width:44px; height:44px; background:#034874; font-weight:bold; font-size:18px; color:#fff; text-align:center; line-height:42px; border-radius:22px;} .faqList > li .txtArea .txt {font-size:16px; color:#555; line-height:28px; word-break:keep-all;} /* 개인정보처리방침 */ .policySelect {position:relative; text-align:right; margin-top:40px;} .policySelect select {width:400px; height:54px;} .policySelect a {display:inline-block; vertical-align:top; width:89px; height:54px; line-height:54px; margin-left:5px; font-weight:bold; font-size:16px; color:#fff; text-align:center; background:#545a66; border-radius:3px;} .policyArea {position:relative; border-top:2px solid #000; padding:50px 30px 0; font-size:16px; color:#555; line-height:30px; word-break:keep-all; margin-top:30px;} .policyArea .tit {font-weight:bold; font-size:18px; color:#000; margin-top:30px;} .policyArea .underL {text-decoration:underline; font-size:18px; line-height:32px;} .policyArea .pl20 {padding-left:20px;} .policyArea .barList {padding-left:10px;} .policyArea .barList li {padding-left:80px; text-indent:-80px;} .policyArea .numList {margin-top:30px;} .policyArea .policyTable {display:table; table-layout:fixed; width:100%; text-align:center; vertical-align:middle; border-top:2px solid #000; margin-top:55px;} .policyArea .policyTable .tr {display:table-row;} .policyArea .policyTable .cell {display:table-cell; width:33.3%; padding:12px 0; border-bottom:1px solid #e0e0e0; border-left:1px solid #e0e0e0; text-align:center; vertical-align:middle;} .policyArea .policyTable .cell:first-child {border-left:0;} .policyArea .policyTable .th .cell {font-weight:bold; font-size:18px; color:#000;} .policyArea a {display:inline-block; vertical-align:top;} /* 신규파트너사 정보등록 */ .partnerArea {position:relative; overflow:hidden;} .partnerArea .txt1 {font-weight:bold; font-size:24px; color:#000; text-align:center; line-height:36px; word-break:keep-all;} .partnerArea .txt1 span {color:#8bbf45;} .partnerArea .txt2 {font-size:18px; color:#555; text-align:center; line-height:32px; word-break:keep-all; margin-top:20px;} .partnerArea .tit {padding-left:32px; font-weight:bold; font-size:24px; color:#000; background:url("/templates/BFPC/images/manage6_tit_icon.png") no-repeat 0 4px; margin-top:80px;} .partnerArea .partnerList {overflow:hidden; margin-top:25px;} .partnerArea .partnerList > li {float:left; width:333px; height:603px; text-align:center; background:#f4f4f4; margin-left:22px;} .partnerArea .partnerList > li:first-child {margin-left:0;} .partnerArea .partnerList > li .imgArea {padding:80px 0 40px; text-align:center; vertical-align:middle;} .partnerArea .partnerList > li .txtArea {padding:0 30px; word-break:keep-all;} .partnerArea .partnerList > li .txtArea p {font-weight:bold; font-size:20px; color:#000; line-height:34px;} .partnerArea .partnerList > li .txtArea .step {font-family:'Proxima-Extrabold', sans-serif; font-weight:normal; font-size:20px; color:#12547a; margin-bottom:10px;} .partnerArea .partnerList > li .txtArea p span {display:block; color:#555;} .partnerArea .partnerList > li .txtArea ul {float:left; width:100%; margin-top:10px;} .partnerArea .partnerList > li .txtArea ul li {font-size:16px; color:#555; line-height:26px; text-align:left; text-indent:-12px; margin-left:12px;} /* 통합검색 */ .allSrchArea {position:relative; border-top:1px solid #ddd; background:#fafafa;} .allSrchArea .inner {position:relative; padding:100px 0 90px;} .allSrchArea h3 {margin-top:0 !important;} .allSrchArea .printBtn {position:absolute; top:40px; right:40px; width:50px; height:50px; background:url("/templates/BFPC/images/print_btn.png") no-repeat 0 0;} .allSrchArea .allSrch {position:relative; width:755px; padding-right:45px; padding-bottom:17px; border-bottom:2px solid #000; margin:70px auto 0;} .allSrchArea .allSrch input {padding-left:0; width:calc(100% - 10px); height:20px; font-size:18px; color:#000; border:0; background:none;} .allSrchArea .allSrch a {position:absolute; top:0; right:20px; display:inline-block; width:23px; height:24px; background:url("/templates/BFPC/images/allsrch_btn.png") no-repeat 0 0;} .allSrchArea .txt {font-size:18px; color:#555; text-align:center; margin-top:60px;} .allSrchArea .txt span {font-weight:bold; color:#004174;} .allSrchArea .noData {border-top:0; border-bottom:0; margin-top:0; padding-bottom:110px;} .allSrchArea .noData .txt {font-size:18px; color:#555; line-height:31px; margin-top:0;} .allSrchArea .noData .txt span {font-weight:bold; color:#004174;} .allSrchResult {padding:80px 0 140px;} .allSrchResult .inner > .tit {position:relative; font-weight:bold; font-size:24px; color:#000;margin-top:80px;} .allSrchResult .inner > .tit:first-child {margin-top:0;} .allSrchResult .inner > .tit .moreBtn {position:absolute; top:4px; right:0; display:block; padding-right:37px; font-weight:bold; font-size:17px; color:#333; background:url("/templates/BFPC/images/allsrch_more_icon.png") no-repeat 100% 50%;} .allSrchResult .allSrchList {border-top:2px solid #000; margin-top:30px;} .allSrchResult .allSrchList li {border-bottom:1px solid #e0e0e0;} .allSrchResult .allSrchList li > a {display:block; padding:38px 30px 36px;} .allSrchResult .allSrchList li .tit {font-weight:bold; font-size:20px; color:#000;} .allSrchResult .allSrchList li .tit span {position:relative; display:inline-block; vertical-align:top; padding-left:23px; margin-left:17px;} .allSrchResult .allSrchList li .tit span:before {content:''; position:absolute; top:50%; left:0; width:7px; height:10px; margin-top:-5px; background:url("/templates/BFPC/images/allsrch_icon.gif") no-repeat 0 0; background-size:100% 100%;} .allSrchResult .allSrchList li .tit span:first-child {padding-left:0; margin-left:0;} .allSrchResult .allSrchList li .tit span:first-child:before {display:none;} .allSrchResult .allSrchList li .txt {font-size:16px; color:#555; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:25px;} .allSrchResult .faqList {border-top:0; margin-top:0;} /* 에러페이지 */ .errorDiv {position:relative; display:table; width:100%; height:100%; text-align:center; background:#f4f4f4;} .errorDiv .errorCon {display:table-cell; padding:30px; width:100%; height:100%; text-align:center; vertical-align:middle;} .errorDiv .logo {} .errorDiv .logo a {display:inline-block; vertical-align:top;} .errorDiv .box {padding:60px 100px; width:558px; background:#fff; margin:30px auto 0;} .errorDiv .box.type2 {width:600px;} .errorDiv .box .txt1 {font-weight:bold; font-size:34px; color:#000; margin-top:35px;} .errorDiv .box .txt2 {font-size:16px; color:#555; line-height:24px; margin-top:25px;} .errorDiv .box ul {padding:30px 79px; border:1px solid #e0e0e0; background:#f6f6f6; margin-top:36px;} .errorDiv .box ul li {position:relative; padding-left:16px; font-size:16px; color:#000; text-align:left; margin-top:20px;} .errorDiv .box ul li:first-child {margin-top:0;} .errorDiv .box ul li:before {content:''; position:absolute; top:7px; left:0; width:4px; height:4px; background:#8bbf43; border-radius:2px;} .errorDiv .box ul li span {font-weight:bold;} /* 제품생산능력 */ .capacityArea {position:relative; margin-top:80px;} .capacityArea .unit {position:absolute; top:50px; right:50px; font-size:16px; color:#555; line-height:19px;} .capacityArea .label {position:absolute; top:47px; left:0; width:100%; text-align:center;} .capacityArea .label li {position:relative; display:inline-block; vertical-align:top; padding-left:35px; margin:3px 20px; font-weight:bold; font-size:16px; color:#555; line-height:19px;} .capacityArea .label li:before {content:''; width:20px; height:20px; position:absolute; top:0; left:0; background:#9ccb5c;} .capacityArea .label li.label2:before {background:#93a7cf;} .capacityArea .label li.label3:before {background:#5cb5dd;} .capacityArea .label li.label4:before {background:#276189;} .capacityArea .label li.label5:before {background:#93a0ae;} .capacityArea .scrollArea {width:100%; overflow-x:auto; overflow-y:visible;} .capacityArea .scrollArea::-webkit-scrollbar {height:2px;} .capacityArea .scrollArea::-webkit-scrollbar-thumb {background:#a9a9a9;} .capacityArea .box {padding:169px 64px 150px; width:1270px; border:1px solid #e0e0e0;} .capacityArea .box > div {position:relative;} .capacityArea .capPop {display:none; position:absolute; top:0; left:0; width:136px; padding:30px; background:#fff; border:2px solid #9ccb5c; border-radius:3px; box-shadow:15px 15px 50px 0px rgba(0,0,0,0.2); z-index:10; -ms-transform:translate(0,-50%); -webkit-transform:translate(0,-50%); transform:translate(0,-50%);} .capacityArea .capPop:after {content:''; position:absolute; top:50%; left:-12px; width:12px; height:12px; margin-top:-6px; background:url("/templates/BFPC/images/cappop_arrow1.png") no-repeat 0 0;} .capacityArea .capPop.type2 {border:2px solid #5cb5dd;} .capacityArea .capPop.type2:after {background:url("/templates/BFPC/images/cappop_arrow2.png") no-repeat 0 0;} .capacityArea .capPop.type2.left:after {left:auto; right:-12px; background:url("/templates/BFPC/images/cappop_arrow2_2.png") no-repeat 0 0;} .capacityArea .capPop.type3 {border:2px solid #276189;} .capacityArea .capPop.type3:after {background:url("/templates/BFPC/images/cappop_arrow3.png") no-repeat 0 0;} .capacityArea .capPop.type4 {border:2px solid #93a0ae;} .capacityArea .capPop.type4:after {background:url("/templates/BFPC/images/cappop_arrow4.png") no-repeat 0 0;} .capacityArea .capPop.type5 {border:2px solid #6dc8b4;} .capacityArea .capPop.type5:after {background:url("/templates/BFPC/images/cappop_arrow5.png") no-repeat 0 0;} .capacityArea .capPop.type6 {border:2px solid #93a7cf;} .capacityArea .capPop.type6:after {background:url("/templates/BFPC/images/cappop_arrow6.png") no-repeat 0 0;} .capacityArea .capPop .tit {font-weight:bold; font-size:20px; color:#000; line-height:1; margin-bottom:15px;} .capacityArea .capPop .tit.mb0 {margin-bottom:0;} .capacityArea .capPop .txt1 {font-weight:bold; font-size:16px; color:#000; line-height:24px;} .capacityArea .capPop .txt2 {font-weight:bold; font-size:16px; color:#000; line-height:24px;} .capacityArea .capPop .txt3 {font-size:16px; color:#555; line-height:24px;} .capacityArea .capPop .txt4 {font-weight:bold; font-size:16px; color:#000; line-height:24px;} .capacityArea .capPop .closeBt {position:absolute; top:15px; right:15px; display:none; width:20px; height:20px; background:url("/templates/BFPC/images/cappop_close.png") no-repeat 50% 50%; background-size:100% 100%;} /* 미디어쿼리 시작 */ @media screen and (max-width:1480px) {/* 작은 웹, 태블릿가로 */ .topBanner .xbt {width:90%; padding:0 5%;} .mainVis .rollArea .roll .txtArea .tit {padding:0 5%;} .mainVis .rollArea .roll .txtArea .txt {padding:0 5%;} .mainVis .indiArea {right:75px; height:75px;} .mainVis .indiArea .indi {padding:0 100px;display: none;} .mainVis .indiArea .indi a {padding:0 10px; height:75px; line-height:75px;} .mainVis .indiArea .indi a.on {padding:0; height:73px; line-height:73px;} .mainVis .autoBtn {width:75px; height:75px;} .mainCon1 {padding:80px 0 200px;} .mainCon1 > .txt {padding:0 5%;} .mainCon1 > .conArea {width:auto; padding:0 5%; margin:70px auto 0;} .mainCon1 > .conArea .boxArea .box {height:350px} .mainCon1 > .conArea .boxArea .box a .tit {font-size:28px;} .mainCon1 > .conArea .boxArea .box a .txt {font-size:16px; word-break:keep-all;} .mainCon1 > .conArea .boxArea .box a .txt br {display:none;} .mainCon1 > .conArea .boxArea .box a .tit2 {right:30px;} .mainCon1 > .conArea .boxArea .box a .arrow {bottom:30px;} .mainCon2 {padding:50px 0 110px; background-size:auto 600px;} .mainCon2 .txtArea {width:auto; padding:0 5%;} .mainCon2 .txtArea .tit {font-size:68px;} .mainCon2 .txtArea .txt {font-size:16px; line-height:1.5;} .mainCon2 .img {margin-left:-53px;} .mainCon2 .img img {height:520px;} .mainCon2 .txtArea .btns {width:185px;} .mainCon2 .txtArea .btns a {font-size:16px;} .mainCon2 .txtArea .downBtns {width:380px;} .mainCon2 .txtArea .downBtns p {width:185px;} .mainCon2 .txtArea .downBtns a {font-size:14px; padding:15px 0;} .mainCon2 .txtArea .downBtns a span {padding:0 15px; background-position:right 15px center;} .mainCon3 {padding:60px 0 150px;} .mainCon3 .topArea {padding-bottom:150px;} .mainCon3 .topArea > div .txt1 {font-size:18px;} .mainCon3 .topArea > div .txt1 .counter {font-size:65px;} .mainCon3 .topArea > div .txt2 {font-size:18px;} .mainCon3 .topArea .year {top:220px;} .mainCon3 .bottomArea .box {width:20%; height:340px; box-sizing:border-box;} .mainCon3 .bottomArea .box:first-child {width:20%;} .mainCon3 .bottomArea .box:last-child {width:20%;} .mainCon3 .bottomArea .box.on {width:20%; height:340px; top:0; border:1px solid #e0e0e0; border-left:0; box-shadow:none;} .mainCon3 .bottomArea .box:first-child.on {width:20%; border-left:1px solid #e0e0e0;} .mainCon3 .bottomArea .box .hover {display:none !important;} .mainCon4 .newsRoll .img {height:230px;} .mainCon5 {padding-bottom:100px;} .mainCon5 .boxArea .box {padding:39px 30px 39px 15px; width:33.3%; margin-left:0;} .mainCon5 .boxArea .box.box1 {padding:39px 15px 39px 30px;} .mainCon5 .boxArea .box.box2 {padding:39px 15px; width:33.4%;} .mainCon5 .boxArea .box .stockDiv .left {width:45%;} .mainCon5 .boxArea .box .stockDiv .right {padding-left:3%; width:55%;} .mainCon5 .boxArea .box .moreBtn {right:15px;} .mainCon5 .boxArea .box.box3 .moreBtn {right:30px;} /* 사업장 */ .busiArea .busiTab a {font-size:14px;} .busiArea .busiTabCon .imgArea {width:50%;} .busiArea .busiTabCon .txtArea {padding-top:20px; padding-left:25px;} .busiArea .busiTabCon .txtArea ul li {line-height:1.5;} .busiArea .busiTabCon .txtArea ul li:before {top:10px;} .busiArea .busiTabCon .txtArea ul li span {display:block; margin-right:0;} .busiArea .busiTabCon .busiList li {padding:30px 0;} .busiArea .busiTabCon .busiList li .txtArea .txt2 p {line-height:1.5;} .busiArea .busiTabCon .busiList li .txtArea .txt2 p span {display:block; margin-right:0;} /* 생활속의 롯데케미칼*/ #lifeMenu {right:20px;} .lifeArea .intro .timeArea {width:550px; height:550px;} .lifeArea .intro .timeArea .tit {font-size:40px; line-height:1.3;} .lifeArea .intro .timeArea .txt {padding:0 40px; font-size:16px; line-height:1.5; margin-top:25px;} .lifeArea .intro .timeArea .txt br {display:none;} .lifeArea .bottomBt {padding-bottom:50px;} .lifeArea .bottomBt:after {height:40px;} .lifeArea .section .lifeCon .txtArea {position:absolute; left:20px; width:100%; margin-left:0;} .lifeArea .section .lifeCon .txtArea .time {font-size:80px;} .lifeArea .section .lifeCon .txtArea .tit {font-size:28px; margin-top:0;} .lifeArea .section .lifeCon .txtArea .txt {font-size:16px; line-height:1.5; margin-top:20px;} .lifeArea .section .lifeCon .txtArea .btns {margin-top:30px;} .lifeArea .section .lifeCon .txtArea .btns .prev {margin-left:20px;} .lifeArea .section .lifeCon .focus li .conPop {padding:40px 20px 25px; width:340px;} .lifeArea .section .lifeCon .focus li .conPop .tit {font-size:20px;} .lifeArea .section .lifeCon .focus li .conPop .txt {font-size:14px; line-height:1.5; margin-top:15px;} .lifeArea .section .lifeCon .focus li .conPop .closeBt {top:20px; right:20px; width:20px; height:20px; background-size:100% auto;} .lifeArea .section.sec5 .lifeCon .focus .f4 .conPop {right:auto; left:0;} .lifeArea .section.sec7 .img {background:url("/templates/BFPC/images/life_img7.jpg") no-repeat right -180px top 50%;} .lifeArea .section.sec7 .lifeCon .focus .f1 {top:609px; right:487px;} .lifeArea .section.sec7 .lifeCon .focus .f2 {top:882px; right:728px;} .lifeArea .section.sec7 .lifeCon .focus .f3 {top:780px; right:447px;} .lifeArea .section.sec8 .img {background:url("/templates/BFPC/images/life_img8.jpg") no-repeat right -300px top 50%;} .lifeArea .section.sec8 .lifeCon .focus .f1 {right:521px;} .lifeArea .section.sec8 .lifeCon .focus .f2 {right:615px;} .lifeArea .section.sec8 .lifeCon .focus .f3 {right:337px;} .lifeArea .section.sec8 .lifeCon .focus .f3 .conPop {left:auto; right:0;} /* 지속가능경영_지속가능경영쳬계 */ .manage1 .con1 .boxArea .box .txtArea {padding:35px 5px; min-height:110px;} .manage1 .con1 .boxArea .box .txtArea .tit {font-size:18px;} .manage1 .con1 .boxArea .box .txtArea .txt {font-size:14px; line-height:1.5; margin-top:20px;} .manage1 .con2 ul {width:100%;} .manage1 .con2 ul li .img {display:inline-block; vertical-align:top; width:180px;} .manage1 .con2 ul li .txt {font-size:15px; line-height:1.5;} .manage1 .reportList li .tit {padding-left:30px;} .manage1Report .txtArea .txt {font-size:15px; line-height:1.5;} .manage1Report .imgArea {width:250px; padding-right:0;} /* 지속가능경영_지속가능경영쳬계_지속가능발전목표 */ .manage1.type2 {padding-bottom:120px;} /* 지속가능경영_지속가능경영쳬계_팝업 */ .surveyArea {max-height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;} /* 지속가능경영_컴플라이언스 */ .manage2 > .txt1 br {display:none;} .manage2 .grayBox .txt1 br {display:none;} /* 지속가능경영_윤리경영 */ .manage3Txt p br {display:none;} .manage3 .grayBox {padding:65px 5%; text-align:center;} .manage3 .grayBox li {float:none; margin:15px; min-height:340px;} .manage3 .grayBox li:first-child {margin-left:15px;} /* 지속가능경영_실천규범 */ .manage3.type2 > .txt1 p br {display:none;} .manage3.type2 .grayBox2 {padding:70px 0;} .manage3.type2 .grayBox2 ul {padding-right:50px; width:calc(100% - 50px); text-align:center;} .manage3.type2 .grayBox2 ul li {float:none; display:inline-block; margin:15px 50px;} /* 지속가능경영_환경안전 */ .manage4 .txt br {display:none;} .manage4 .greenImgList > li {width:calc(33% - 12px);} .manage4 > .halfArea .left {padding-right:20px;} .manage4 > .halfArea .right {padding-left:20px;} .manage4 .imgList1 li {width:calc(50% - 9px); margin-right:18px; margin-top:18px;} .manage4 .imgList1 li .txt {padding:12px 0; font-size:16px;} .manage4 .imgList2 li {width:calc(50% - 9px); margin-right:18px; margin-top:18px;} /* 지속가능경영_CSR - CSR활동 */ .csrArea2 .csrBox > div {height:400px;} .csrArea2 .csrBox > div .txtBox > div > div .txt br {display:none;} /* 지속가능경영_동반성장 */ .manage6 .activity .boxArea {padding:30px 20px 0; width:calc(33% - 2px); box-sizing:border-box; margin-left:3px;} .manage6 .activity .boxArea > div .box .txtArea .tit {font-size:19px;} .manage6 .activity .boxArea > div .box .txtArea ul li {font-size:15px;} .manage6 .adList li .video {width:45%; height:300px;} /* 신규파트너사 정보등록 */ .partnerArea .partnerList > li {display:table; table-layout:fixed; width:100%; height:auto; text-align:left; background:#f4f4f4; margin-left:0; margin-top:10px;} .partnerArea .partnerList > li:first-child {margin-top:0;} .partnerArea .partnerList > li .imgArea {display:table-cell; width:270px; padding:54px 0; text-align:center; vertical-align:middle;} .partnerArea .partnerList > li .txtArea {display:table-cell; vertical-align:middle; padding:20px 30px 20px 0; word-break:keep-all;} .partnerArea .partnerList > li .txtArea p {float:left; font-weight:bold; font-size:20px; color:#000; line-height:34px;} .partnerArea .partnerList > li .txtArea .step {font-family:'Proxima-Extrabold', sans-serif; font-weight:normal; font-size:20px; color:#12547a; margin-right:20px;} .partnerArea .partnerList > li .txtArea p span {display:inline; color:#555} .partnerArea .partnerList > li .txtArea ul {float:left; width:100%; margin-top:10px;} .partnerArea .partnerList > li .txtArea ul li {font-size:16px; color:#555; line-height:26px;} /* 통합검색 */ .allSrchArea .inner {padding:100px 5% 90px;} .allSrchArea .printBtn {right:5%;} .allSrchArea .allSrch {width:100%; box-sizing:border-box;} /* 제품생산능력 */ .capacityArea .unit {top:110px; right:50px;} .capacityArea .box {width:1187px;} .capacityArea .box img {width:1187px;} .capacityArea .capPop {position:fixed; top:50% !important; left:50% !important; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);} .capacityArea .capPop:after {display:none;} .capacityArea .capPop .closeBt {display:block;} } @media screen and (max-height:830px) { .lifeArea .section .img {min-height:830px} .lifeArea .section .lifeCon .focus li .openBt {width:40px; height:40px;} /* 06:00 하루의 시작 */ .lifeArea .section.sec1 .lifeCon .focus .f1 {top:156px; right:460px;} .lifeArea .section.sec1 .lifeCon .focus .f2 {top:211px; right:421px;} .lifeArea .section.sec1 .lifeCon .focus .f3 {top:500px; right:380px;} .lifeArea .section.sec1 .lifeCon .focus .f4 {top:577px; right:454px;} /* 08:00 출근길 */ .lifeArea .section.sec2 .lifeCon .focus .f1 {top:159px; right:149px;} .lifeArea .section.sec2 .lifeCon .focus .f2 {top:204px; right:289px;} .lifeArea .section.sec2 .lifeCon .focus .f3 {top:609px; right:461px;} .lifeArea .section.sec2 .lifeCon .focus .f4 {top:675px; right:557px;} /* 10:00 회의중 */ .lifeArea .section.sec3 .lifeCon .focus .f1 {top:214px; right:192px;} .lifeArea .section.sec3 .lifeCon .focus .f2 {top:244px; right:398px;} .lifeArea .section.sec3 .lifeCon .focus .f3 {top:492px; right:214px;} /* 12:00 식사 시간 */ .lifeArea .section.sec4 .lifeCon .focus .f1 {top:588px; right:548px;} .lifeArea .section.sec4 .lifeCon .focus .f2 {top:666px; right:412px;} .lifeArea .section.sec4 .lifeCon .focus .f3 {top:386px; right:244px;} /* 15:00 외근 */ .lifeArea .section.sec5 .lifeCon .focus .f1 {top:263px; right:576px;} .lifeArea .section.sec5 .lifeCon .focus .f2 {top:242px; right:273px;} .lifeArea .section.sec5 .lifeCon .focus .f3 {top:256px; right:499px;} .lifeArea .section.sec5 .lifeCon .focus .f4 {top:416px; right:477px;} /* 18:00 저녁 */ .lifeArea .section.sec6 .lifeCon .focus .f1 {top:573px; right:181px;} .lifeArea .section.sec6 .lifeCon .focus .f2 {top:627px; right:460px;} .lifeArea .section.sec6 .lifeCon .focus .f3 {top:682px; right:201px;} /* 20:00 세면 */ .lifeArea .section.sec7 .lifeCon .focus .f1 {top:492px; right:495px;} .lifeArea .section.sec7 .lifeCon .focus .f2 {top:691px; right:578px;} .lifeArea .section.sec7 .lifeCon .focus .f3 {top:667px; right:459px;} /* 21:00 퇴근 후 휴식 */ .lifeArea .section.sec8 .lifeCon .focus .f1 {top:245px; right:479px;} .lifeArea .section.sec8 .lifeCon .focus .f2 {top:435px; right:623px;} .lifeArea .section.sec8 .lifeCon .focus .f3 {top:569px; right:267px;} } @media screen and (max-width:1023px) {/* 태블릿 세로 */ .mainVis .indiArea .indi a.on {padding:0;} .mainCon1 > .conArea .boxArea .box {height:295px} .mainCon1 > .conArea .boxArea .box a .txt {display:none;} .mainCon2 .img {margin-left:17px;} .mainCon2 .img img {position:relative; left:-20%} .mainCon2 .txtArea .downBtns {width:350px;} .mainCon2 .txtArea .downBtns .tit {font-size:16px;} .mainCon2 .txtArea .downBtns p {width:170px;} .mainCon2 .txtArea .downBtns a {font-size:13px;} .mainCon2 .txtArea .downBtns a span {padding:0 10px; background-position:right 10px center;} .mainCon3 .topArea > div .txt1 {font-size:16px; margin-top:25px;} .mainCon3 .topArea > div .txt1 .counter {font-size:47px;} .mainCon3 .topArea > div .txt2 {font-size:16px; margin-top:20px;} .mainCon3 .topArea .year {top:190px;} .mainCon3 .bottomArea .box a > .tit {font-size:17px; line-height:1.3;} .mainCon4 .newsRoll .img {height:190px;} .mainCon4 .newsRoll .img .label {width:50px; height:50px;} .mainCon4 .newsRoll .img .label span {font-size:14px; line-height:18px;} .mainCon4 .newsRoll .tit {height:48px; font-size:16px; line-height:1.5;} .mainCon5 .boxArea .box {margin-left:0} .mainCon5 .boxArea .box .list li:before {top:12px;} .mainCon5 .boxArea .box .list li a .tit {width:100%; max-width:100%;} .mainCon5 .boxArea .box .list li a .date {float:none;} .mainCon5 .boxArea .box .stockDiv {padding:38px 0 30px;} .mainCon5 .boxArea .box .stockDiv .left {float:none; width:100%;} .mainCon5 .boxArea .box .stockDiv .right {float:none; width:100%; padding:0; border:0; margin-top:38px;} /* 사업장 */ .busiArea .mapArea {padding:20px 5%;} .busiArea .mapArea.map2 {padding:60px 10px 20px;} .busiArea .mapArea .koreaMap .mapArea {padding:60px 10px 20px;} .busiArea .mapArea .txtArea {top:30px; right:0; width:100%; text-align:center;} .busiArea .mapArea .txtArea p {float:none; display:inline-block; vertical-align:top; padding-left:25px; margin-left:20px; margin-top:0;} .busiArea .mapArea .txtArea p br {display:none;} .busiArea .mapArea .txtArea p:first-child {margin-left:0;} .busiArea .busiTab {display:block; overflow:hidden; margin-top:20px;} .busiArea .busiTab a {float:left; display:inline-block; padding:10px 0; width:33.3%; margin-top:10px;} .busiArea .busiTab a.on {padding:10px 0; border-bottom:1px solid #8bbf45;} .busiArea .busiTabCon .tabCon > div {display:block;} .busiArea .busiTabCon .imgArea {display:block; width:auto; text-align:center;} .busiArea .busiTabCon .txtArea {display:block; width:auto; padding-left:0; padding-top:0; margin-top:30px;} .busiArea .busiTabCon .busiList li .txtArea {padding:0 170px 0 5%;} .busiArea .busiTabCon .busiList li .txtArea .txt1 {line-height:1.5;} .busiArea .busiTabCon .busiList li .txtArea .txt1 span {display:block; padding-left:0; margin-left:0;} .busiArea .busiTabCon .busiList li .txtArea .txt1 span:before {display:none;} .busiArea .busiTabCon .busiList li .txtArea a {right:5%;} .busiMapArea {margin-top:70px;} /* 연혁 */ .historyArea .history {left:50px; padding-left:59px;} .historyArea .history .year:before {left:-67px; width:47px;} .historyArea .history.left {left:-50px; padding-right:59px;} .historyArea .history.left .year:before {right:-67px; width:47px;} /* 생활속의 롯데케미칼*/ #lifeMenu {display:none !important;} .lifeArea .section .lifeCon .txtArea {position:absolute; top:auto; bottom:15%; left:20px; width:100%; -webkit-transform: translate(0,0); transform: translate(0,0); margin-left:0;} .lifeArea .section .lifeCon .focus li .conPop {width:270px;} .lifeArea .section.sec1 .lifeCon .focus .conPop {right:auto; left:0;} .lifeArea .section.sec5 .lifeCon .focus .conPop {right:auto; left:0;} .lifeArea .section.sec1 .img {background:url("/templates/BFPC/images/life_img1.jpg") no-repeat right -250px top 50%;} .lifeArea .section.sec1 .lifeCon .focus .f1 {right:325px;} .lifeArea .section.sec1 .lifeCon .focus .f2 {right:300px;} .lifeArea .section.sec1 .lifeCon .focus .f3 {right:213px;} .lifeArea .section.sec1 .lifeCon .focus .f3 .conPop {left:auto; right:0;} .lifeArea .section.sec1 .lifeCon .focus .f4 {right:325px;} .lifeArea .section.sec2 .img {background:url("/templates/BFPC/images/life_img2.jpg") no-repeat right -180px top 50%;} .lifeArea .section.sec2 .lifeCon .focus .f1 {right:40px;} .lifeArea .section.sec2 .lifeCon .focus .f2 {right:220px;} .lifeArea .section.sec2 .lifeCon .focus .f3 {right:337px;} .lifeArea .section.sec2 .lifeCon .focus .f4 {right:538px;} .lifeArea .section.sec4 .img {background:url("/templates/BFPC/images/life_img4.jpg") no-repeat right -300px top 50%;} .lifeArea .section.sec4 .lifeCon .focus .f1 {top:760px; right:360px;} .lifeArea .section.sec4 .lifeCon .focus .f2 {top:846px; right:255px;} .lifeArea .section.sec4 .lifeCon .focus .f3 {top:488px; right:26px;} .lifeArea .section.sec5 .img {background:url("/templates/BFPC/images/life_img5.jpg") no-repeat right -300px top 50%;} .lifeArea .section.sec5 .lifeCon .focus .f1 {right:447px;} .lifeArea .section.sec5 .lifeCon .focus .f2 {right:52px;} .lifeArea .section.sec5 .lifeCon .focus .f2 .conPop {left:auto; right:0;} .lifeArea .section.sec5 .lifeCon .focus .f3 {right:346px;} .lifeArea .section.sec5 .lifeCon .focus .f4 {right:245px;} .lifeArea .section.sec6 .img {background:url("/templates/BFPC/images/life_img6.jpg") no-repeat right -200px top 50%;} .lifeArea .section.sec6 .lifeCon .focus .f1 {right:85px;} .lifeArea .section.sec6 .lifeCon .focus .f2 {top:828px; right:310px;} .lifeArea .section.sec6 .lifeCon .focus .f3 {top:897px; right:95px;} .lifeArea .section.sec7 .img {background:url("/templates/BFPC/images/life_img7.jpg") no-repeat right -360px top 50%;} .lifeArea .section.sec7 .lifeCon .focus .f1 {top:609px; right:307px;} .lifeArea .section.sec7 .lifeCon .focus .f2 {top:882px; right:398px;} .lifeArea .section.sec7 .lifeCon .focus .f3 {top:780px; right:267px;} .lifeArea .section.sec8 .img {background:url("/templates/BFPC/images/life_img8.jpg") no-repeat right -300px top 50%;} .lifeArea .section.sec8 .lifeCon .focus .f1 {right:521px;} .lifeArea .section.sec8 .lifeCon .focus .f2 {right:615px;} .lifeArea .section.sec8 .lifeCon .focus .f3 {right:337px;} /* 지속가능경영_지속가능경영쳬계 */ .manage1 .con1 .boxArea .box {float:none; display:inline-block; vertical-align:top; width:40%; margin:10px 2.5px 0;} .manage1 .con1 .boxArea .box:first-child {margin:0 90px 0;} .manage1 .con1 .boxArea .box .img img {width:100%;} .manage1 .con1 .boxArea .box .txtArea {min-height:105px; border:1px solid #e0e0e0; border-top:0;} .manage1 .con2 ul {width:auto; padding:44px 70px;} .manage1 .con2 ul li {margin:15px;} .manage1 .con2 ul li:first-child {margin:15px;} .manage1 .con3 .img > img {width:80%;} .manage1 .reportList li .btns {width:197px;} .manage1 .reportList li .btns a {margin-top:10px; margin-left:0;} .manage1 .reportList li .btns a:first-child {margin-top:0;} .manage1Report .txtArea {float:none;} .manage1Report .txtArea .btns {margin-top:40px;} .manage1Report .imgArea {float:none; width:auto; margin-top:40px;} /* 지속가능경영_컴플라이언스 경영 */ .manage2 .system {padding:0; border:0;} .manage2 .system > img.pc {display:none;} .manage2 .system > img.mobile {display:inline-block; max-width:400px; width:100%;} .manage2 .system .mobileTxt {display:block; text-align:left; margin-top:60px;} .manage2 .system .mobileTxt .tit {position:relative; font-weight:bold; font-size:20px; color:#8bbf45; word-break:keep-all; margin-top:30px;} .manage2 .system .mobileTxt .tit:first-child {margin-top:0;} .manage2 .system .mobileTxt .tit.type2 {color:#034874;} .manage2 .system .mobileTxt ul {margin-top:15px;} .manage2 .system .mobileTxt ul li {position:relative; padding-left:15px; font-size:16px; color:#555; line-height:30px; word-break:keep-all;} .manage2 .system .mobileTxt ul li:before {content:''; position:absolute; top:13px; left:0; width:4px; height:4px; background:#8bbf45; border-radius:2px;} .manage2 .system .mobileTxt ul li.type2:before {background:#034874;} /* 지속가능경영_환경안전 */ .manage4 .greenImgList > li {float:none; display:block; width:auto; margin-left:0; margin-top:50px;} .manage4 .greenImgList > li:first-child {margin-top:0;} .manage4 .greenImgList > li .img {text-align:center;} .manage4 .greenList > li {float:none; width:calc(100% - 2px); min-height:0; padding-bottom:50px; margin-right:0;} .manage4 > .halfArea .left {float:none; width:auto; padding-right:0;} .manage4 > .halfArea .right {float:none; width:auto; padding-left:0; margin-top:80px;} .manage4 .imgList1 li {width:calc(50% - 11px); margin-right:22px; margin-top:22px;} .manage4 .imgList2 li {width:calc(50% - 11px); margin-right:22px; margin-top:22px;} .manage4 .grayBox > div .img {float:none; display:block;} .manage4 .grayBox > div ul {float:none; padding-top:40px; margin-left:0;} /* 지속가능경영_CSR - CSR활동 */ .csrArea2 .csrBox > div {height:auto;} .csrArea2 .csrBox > div .imgBox {float:none; width:auto; height:400px;} .csrArea2 .csrBox > div.type2 .imgBox {float:none;} .csrArea2 .csrBox > div .txtBox {float:none; width:auto; height:auto;} /* 지속가능경영_동반성장 */ .manage6 > .txt2 br {display:none;} .manage6 .imgBox img.pc {display:none;} .manage6 .imgBox img.mobile {display:inline-block;} .manage6 .activity .boxArea {float:none; width:auto; margin-left:0; margin-top:15px;} .manage6 .activity .boxArea:first-child {margin-top:0;} .manage6 .btnArea .top a {margin-left:5px;} .manage6 .btnArea .bottom a {width:32%; margin-left:5px;} .manage6 .btnArea .bottom a img {height:38px;} .manage6 .adList li {padding:40px 0 30px;} .manage6 .adList li > div {display:block;} .manage6 .adList li .video {display:block; position:relative; width:100%; height:0; padding-bottom:56.25%;} .manage6 .adList li .video iframe {position:absolute; top:0; left:0; width:100%; height:100%;} .manage6 .adList li .txtArea {display:block; padding:30px 0 0 0;} /* 신규파트너사 정보등록 */ .partnerArea .partnerList > li .imgArea {width:190px;} .partnerArea .partnerList > li .txtArea p {float:none;} .partnerArea .partnerList > li .txtArea ul {float:none;} /* FAQ */ .faqList > li .titArea a .label > span {line-height:43px;} .faqList > li .txtArea .label {line-height:43px;} /* 통합검색 */ .allSrchArea .printBtn {display:none;} } @media screen and (max-width:758px) {/* 모바일 */ /* 페이지 상단 배너 */ .topBanner {height:120px;} .topBanner .swiper-slide{width:100%; height:120px;} .topBanner .xbt{width:94%; bottom:5px;} .topBanner .check input[type="checkbox"]{width:15px; height:15px; background-size:15px;} .topBanner .check input[type="checkbox"]:checked{background-size:15px;} .topBanner .check label{font-size:12px;} .topBanner .swiper-button-next, .topBanner .swiper-container-rtl .swiper-button-prev{right:3%; width:15px; height:27px; background-size:15px 27px;} .topBanner .swiper-button-prev, .topBanner .swiper-container-rtl .swiper-button-next{left:3%; width:15px; height:27px; background-size:15px 27px;} /* 메인 */ .mainVis {min-height:400px;} .mainVis .rollArea .roll .txtArea {min-width:320px; width:100%;} .mainVis .rollArea .roll .txtArea .tit {padding:0 3%; font-size:46px;} .mainVis .rollArea .roll .txtArea .txt {padding:0 3%; font-size:13px; line-height:1.5; margin-top:20px;} .mainVis .rollArea .roll .txtArea .btn {margin-top:25px;} .mainVis .rollArea .roll .txtArea .btn a {padding:11px 50px 9px 15px; font-size:13px; border:1px solid #fff; background:url("/templates/BFPC/images/mainvis_btn_icon.png") no-repeat right 15px top 50%; background-size:auto 6px;} .mainVis .rollArea .roll .txtArea .btn.type2 a {padding:11px 50px 9px 15px;} .mainVis .rollArea .roll .txtArea .btn a:hover, .mainVis .rollArea .roll .txtArea .btn a:focus {background:#fff url("/templates/BFPC/images/mainvis_btn_icon_on.png") no-repeat right 15px top 50%; background-size:auto 6px;} .mainVis .indiArea {width:100% !important; height:auto; padding:0; margin:0; bottom:0; right:auto; left:0; -ms-transform:none; -webkit-transform:none; transform:none; text-align:center !important;} .mainVis .indiArea .indi {padding:0; overflow:hidden;} .mainVis .indiArea .indi a {float:left; width:33.3%; height:45px; font-size:10px; line-height:45px; padding:0;} .mainVis .indiArea .indi a:first-child {width:33.4%;} .mainVis .indiArea .indi a.on {position:relative !important; top:0 !important; left:0 !important; margin:0 !important; height:43px; font-size:12px; line-height:43px; -ms-transform:none; -webkit-transform:none; transform:none;} .mainVis .autoBtn {display:none;} .mainVis .scroll {display:none;} .mainCon1 {padding:40px 0 60px;} .mainCon1 > .txt {padding:0 3%; font-size:13px; line-height:1.5; word-break:keep-all;} .mainCon1 > .txt br {display:none;} .mainCon1 > .conArea {margin:40px auto 0;} .mainCon1 > .conArea .txtImg1 {display:none;} .mainCon1 > .conArea .txtImg2 {display:none;} .mainCon1 > .conArea .boxArea {padding-bottom:0;} .mainCon1 > .conArea .boxArea .box {top:0 !important; width:calc(100% - 30px); height:200px;} .mainCon1 > .conArea .boxArea .box.box1 {top:0 !important; float:left;} .mainCon1 > .conArea .boxArea .box.box2 {float:left;} .mainCon1 > .conArea .boxArea .box.box3 {top:0 !important; float:right;} .mainCon1 > .conArea .boxArea .box.box4 {float:right;} .mainCon1 > .conArea .boxArea .box .hoverBg {display:none !important;} .mainCon1 > .conArea .boxArea .box a {padding:20px;} .mainCon1 > .conArea .boxArea .box a .tit {font-size:17px;} .mainCon1 > .conArea .boxArea .box a .arrow {bottom:15px; left:20px;} .mainCon1 > .conArea .boxArea .box a .arrow img {height:6px;} .mainCon1 > .conArea .boxArea .box a .tit2 {right:25px; bottom:15px; font-size:11px;} .mainCon2 {padding:0 0 46px; background:none;} .mainCon2:before {content:''; position:absolute; bottom:0; left:0; width:100%; height:calc(100% - 44px); background:#f4f4f4;} .mainCon2 .txtArea {padding:0 3%;} .mainCon2 .txtArea .tit {font-size:39px;} .mainCon2 .txtArea .txt {font-size:13px; margin-top:20px;} .mainCon2 .img {position:relative; width:106%; margin-left:-50%; margin-top:25px;} .mainCon2 .img img {left:0; width:100%; height:auto;} .mainCon2 .txtArea .btns {top:0 !important; width:100%; margin-top:13px;} .mainCon2 .txtArea .btns a {padding:10px 0; font-size:13px; background-size:auto 6px;} .mainCon2 .txtArea .btns a:hover, .mainCon2 .txtArea .btns a:focus {background-size:auto 6px;} .mainCon2 .txtArea .downBtns {text-align:center; margin-top:20px; width:100%;} .mainCon2 .txtArea .downBtns .tit {font-size:13px; margin:0 0 5px 0} .mainCon2 .txtArea .downBtns p {width:49%; margin-left:2%;} .mainCon2 .txtArea .downBtns a {font-size:11px; padding:10px 0} .mainCon2 .txtArea .downBtns a span {background-size:10px auto;} .mainCon3 {padding:25px 0 60px; background-size:100% auto;} .mainCon3 .topArea {padding-bottom:60px;} .mainCon3 .topArea > div {float:none; display:table; table-layout:fixed; width:100%; border-top:1px solid #e0e0e0; text-align:left; overflow:hidden;} .mainCon3 .topArea > div:first-child {width:100%; border-top:0;} .mainCon3 .topArea > div .icon {float:none; display:table-cell; vertical-align:middle; text-align:center; width:88px;} .mainCon3 .topArea > div .icon img {height:30px;} .mainCon3 .topArea > div div {float:none; display:table-cell; padding:15px 0 20px; text-align:left; vertical-align:middle;} .mainCon3 .topArea > div .txt1 {font-size:12px; font-weight:bold; margin-top:0;} .mainCon3 .topArea > div .txt1 .counter {font-weight:normal; font-size:40px;} .mainCon3 .topArea > div .txt2 {font-size:12px; margin-top:5px;} .mainCon3 .topArea .year {top:270px; font-size:12px;} .mainCon3 .bottomArea {height:auto; overflow:hidden;} .mainCon3 .bottomArea .box {width:50%; height:auto;} .mainCon3 .bottomArea .box:before {bottom:25px; width:20px; height:1px; margin-left:-10px;} .mainCon3 .bottomArea .box.on {width:50%; height:auto;} .mainCon3 .bottomArea .box:first-child {width:100%;} .mainCon3 .bottomArea .box:first-child.on {width:100%;} .mainCon3 .bottomArea .box:last-child {width:50%;} .mainCon3 .bottomArea .box2, .mainCon3 .bottomArea .box3 {border-top:0 !important; border-bottom:0 !important;} .mainCon3 .bottomArea .box2, .mainCon3 .bottomArea .box4 {border-left:1px solid #e0e0e0 !important;} .mainCon3 .bottomArea .box a {padding:30px 0 60px;} .mainCon3 .bottomArea .box a > .icon {padding-top:0;} .mainCon3 .bottomArea .box a > .icon img {height:30px;} .mainCon3 .bottomArea .box a > .tit {font-size:14px; line-height:1; margin-top:20px;} .mainCon4 {padding:40px 0 65px;} .mainCon4 .inner > .tit {font-size:29px;} .mainCon4 .newsRoll {margin-top:20px;} .mainCon4 .newsRoll a {margin-right:0;} .mainCon4 .newsRoll .img {height:auto; max-height:350px;} .mainCon4 .newsRoll .img img {width:100%; height:auto; top:0; left:0; -ms-transform:translate(0, 0); -webkit-transform:translate(0, 0); transform:translate(0, 0);} .mainCon4 .newsRoll .img .label {width:40px; height:40px;} .mainCon4 .newsRoll .img .label span {font-size:12px; line-height:13px;} .mainCon4 .newsRoll .tit {height:40px; font-size:13px; line-height:1.5; margin-top:15px;} .mainCon4 .newsRoll .date {font-size:12px; margin-top:15px;} .mainCon4 .newsRoll .btns {top:-38px;} .mainCon4 .newsRoll .btns .swiper-button-prev {width:6px; height:10px; background-size:100% 100%;} .mainCon4 .newsRoll .btns .swiper-button-next {width:6px; height:10px; background-size:100% 100%; margin-left:20px;} .mainCon5 {padding-bottom:40px;} .mainCon5 .boxArea {margin-top:-43px;} .mainCon5 .boxArea .box {padding:19px; width:100%; border-top:1px solid #e0e0e0;} .mainCon5 .boxArea .box.box1 {padding:19px; border-top:0;} .mainCon5 .boxArea .box.box2 {padding:19px; width:100%;} .mainCon5 .boxArea .box .tit {font-size:13px;} .mainCon5 .boxArea .box .list {padding-top:10px; margin-top:10px;} .mainCon5 .boxArea .box .list li {padding-left:10px;} .mainCon5 .boxArea .box .list li:before {width:2px; height:2px; top:50%;} .mainCon5 .boxArea .box .list li a .tit {float:left; max-width:70%; font-size:12px;} .mainCon5 .boxArea .box .list li a .date {float:right; font-size:12px;} .mainCon5 .boxArea .box .stockDiv {padding:18px 0; margin-top:10px;} .mainCon5 .boxArea .box .stockDiv .left {float:left; width:50%; height:29px; line-height:29px; font-size:19px; border-right:1px solid #e0e0e0;} .mainCon5 .boxArea .box .stockDiv .right {float:left; width:50%; height:29px; font-size:12px; margin:0;} .mainCon5 .boxArea .box .stockDiv .right p {font-size:11px; margin-top:5px;} .mainCon5 .boxArea .box .moreBtn {top:19px; right:19px;} .mainCon5 .boxArea .box .moreBtn img {height:13px;} .mainCon5 .boxArea .box.box3 .moreBtn {right:19px;} /* 사업장 */ .busiArea .tabBtn {margin-top:40px;} .busiArea .mapArea {padding:50px 3%;} .busiArea .mapArea.map2 {padding:50px 3% 0;} .busiArea .mapArea img.pc {display:none;} .busiArea .mapArea img.mobile {display:inline-block; vertical-align:top;} .busiArea .mapArea .txtArea {top:25px;} .busiArea .mapArea .txtArea p {padding-left:15px; height:15px; font-size:10px; line-height:16px; margin-left:15px; background:url("/templates/BFPC/images/busi_map_icon1.png") no-repeat 0 0; background-size:auto 15px;} .busiArea .mapArea .txtArea .icon2 {background:url("/templates/BFPC/images/busi_map_icon2.png") no-repeat 0 0; background-size:auto 15px;} .busiArea .mapArea .txtArea .icon3 {background:url("/templates/BFPC/images/busi_map_icon3.png") no-repeat 0 0; background-size:auto 15px;} .busiArea .mapArea .koreaMap .mapArea {padding:50px 3% 0;} .busiArea .mapArea .koreaMap .backBtn {top:auto; bottom:15px; left:3%; width:40px; height:40px; margin-top:0; background:url("/templates/BFPC/images/busi_back_btn.png") no-repeat 50% 50%; background-size:100% 100%;} .busiArea .busiTab {display:block; overflow:hidden; margin-top:10px;} .busiArea .busiTab a {float:left; display:inline-block; padding:10px 0; width:33.3%; font-size:13px; margin-top:10px;} .busiArea .busiTab a.on {padding:10px 0; font-size:13px; border-bottom:1px solid #8bbf45;} .busiArea .busiTabCon {margin-top:30px;} .busiArea .busiTabCon .txtArea {margin-top:15px;} .busiArea .busiTabCon .txtArea .tit {font-size:16px;} .busiArea .busiTabCon .txtArea .txt {font-size:13px; line-height:1.5; margin-top:10px;} .busiArea .busiTabCon .txtArea ul {margin-top:15px;} .busiArea .busiTabCon .txtArea ul li {padding-left:10px; font-size:13px;} .busiArea .busiTabCon .txtArea ul li:before {top:8px;} .busiArea .busiTabCon .busiTit {font-size:18px; margin-top:30px;} .busiArea .busiTabCon .busiList {margin-top:15px;} .busiArea .busiTabCon .busiList li {padding:10px 0 15px;} .busiArea .busiTabCon .busiList li .txtArea {padding:0 3%;} .busiArea .busiTabCon .busiList li .txtArea .txt1 {font-size:14px;} .busiArea .busiTabCon .busiList li .txtArea .txt2 {margin-top:10px;} .busiArea .busiTabCon .busiList li .txtArea .txt2 p {font-size:13px; margin-top:10px;} .busiArea .busiTabCon .busiList li .txtArea a {position:relative; top:0; left:0; padding:5px 15px 5px; display:inline-block; font-size:13px; border:1px solid #d9d9d9; margin-top:15px;} .busiArea .busiTabCon .busiList li .txtArea a:hover, .busiArea .busiTabCon .busiList li .txtArea a:focus {border:1px solid #8bbf45; background:#8bbf45;} .busiArea .busiTabCon .busiList li .mapArea {padding:20px 0 0;} .busiMapArea {margin-top:30px;} .busiMapArea .map {height:auto;} .busiMapArea .map img.mobile {display:inline-block; width:100%;} /* 연혁 */ .historyArea {padding-bottom:20px; text-align:left; margin-top:40px;} .historyArea:before {left:39px; height:calc(100% - 10px); margin-left:0;} .historyArea:after {left:31.8px; margin-left:0; width:16px; height:16px; background:url("/templates/BFPC/images/history_end_icon.png") no-repeat 50% 50%; background-size:100% 100%;} .historyArea .historyCon {margin-top:35px;} .historyArea > .historyTit {width:80px; height:89px;} .historyArea > .historyTit p span {font-size:18px; background:url("/templates/BFPC/images/history_year_bg.png") no-repeat 50% 50%; background-size:100% 100%;} .historyArea .history {left:0; width:100%; padding:25px 0; padding-left:60px; margin-left:0;} .historyArea .history .year {font-size:20px; margin-bottom:15px;} .historyArea .history .year:before {top:4px; left:-25px; width:18px; height:10px; background:url("/templates/BFPC/images/history_year_icon.png") no-repeat 0 50%; background-size:auto 100%;} .historyArea .history .month {width:30px; height:32px;} .historyArea .history .month > span > span {font-size:14px; background:url("/templates/BFPC/images/history_mon_bg.png") no-repeat 50% 50%; background-size:100% 100%;} .historyArea .history .txt {font-size:13px; line-height:32px; margin-left:10px; max-width:calc(100% - 50px);} .historyArea .history .img {padding-left:40px; margin-top:10px;} .historyArea .history.left {left:0; padding-right:0; padding-left:60px;text-align:left;} .historyArea .history.left .year:before {top:4px; left:-25px; width:18px; height:10px; background:url("/templates/BFPC/images/history_year_icon.png") no-repeat 0 50%; background-size:auto 100%;} .historyArea .history.left .month {float:left;} .historyArea .history.left .txt {float:left; margin-left:10px; margin-right:0;} .historyArea .history.left .img {padding-left:40px; padding-right:0;} /* 생활속의 롯데케미칼 */ .lifeArea .intro {background:url("/templates/BFPC/images/m_life_intro_bg.jpg") no-repeat 50% 50%; background-size:cover;} .lifeArea .intro .timeArea {width:290px; height:290px;} .lifeArea .intro .timeArea .tit {font-size:28px;} .lifeArea .intro .timeArea .txt {padding:0 40px; font-size:12px; margin-top:10px;} .lifeArea .intro .timeArea .txt br {display:none;} .lifeArea .bottomBt {padding-bottom:42px; font-size:10px;} .lifeArea .bottomBt:after {height:27px;} .lifeArea .section .lifeCon {display:none;} .lifeArea .section .lifeCon.mobile {display:block; height:100%;} .lifeArea .section .lifeCon.mobile .img {display:block; height:100%; min-height:0;} .lifeArea .section.sec1 .lifeCon.mobile .img {background:url("/templates/BFPC/images/m_life_img1.jpg") no-repeat 50% 80%; background-size:cover;} .lifeArea .section.sec2 .lifeCon.mobile .img {background:url("/templates/BFPC/images/m_life_img2.jpg") no-repeat 50% 80%; background-size:cover;} .lifeArea .section.sec3 .lifeCon.mobile .img {background:url("/templates/BFPC/images/m_life_img3.jpg") no-repeat 50% 80%; background-size:cover;} .lifeArea .section.sec4 .lifeCon.mobile .img {background:url("/templates/BFPC/images/m_life_img4.jpg") no-repeat 50% 80%; background-size:cover;} .lifeArea .section.sec5 .lifeCon.mobile .img {background:url("/templates/BFPC/images/m_life_img5.jpg") no-repeat 50% 80%; background-size:cover;} .lifeArea .section.sec6 .lifeCon.mobile .img {background:url("/templates/BFPC/images/m_life_img6.jpg") no-repeat 50% 80%; background-size:cover;} .lifeArea .section.sec7 .lifeCon.mobile .img {background:url("/templates/BFPC/images/m_life_img7.jpg") no-repeat 50% 80%; background-size:cover;} .lifeArea .section.sec8 .lifeCon.mobile .img {background:url("/templates/BFPC/images/m_life_img8.jpg") no-repeat 50% 80%; background-size:cover;} .lifeArea .section .lifeCon .txtArea {top:75px; bottom:auto; left:0; padding:0 30px; width:100%; box-sizing:border-box;} .lifeArea .section .lifeCon .txtArea .time {font-size:40px;} .lifeArea .section .lifeCon .txtArea .time span {display:inline-block; font-size:10px; margin-left:7px;} .lifeArea .section .lifeCon .txtArea .tit {font-size:19px; margin-top:5px;} .lifeArea .section .lifeCon .txtArea .txt {font-size:12px; word-break:keep-all; margin-top:15px;} .lifeArea .section .lifeCon .txtArea .btns {position:absolute; top:0; right:30px; margin-top:0; width:23px;} .lifeArea .section .lifeCon .txtArea .btns .prev {width:23px; height:12px; margin-left:0;} .lifeArea .section .lifeCon .txtArea .btns .next {width:23px; height:12px; margin-top:15px;} .lifeArea .section .lifeCon .popBt {display:inline-block; position:absolute; bottom:20px; left:15px; font-weight:bold; font-size:13px; color:#fff; line-height:1.5; padding-right:16px; border-bottom:1px solid #fff; background:url("/templates/BFPC/images/m_life_pop_icon.png") no-repeat right 0 top 43%; background-size:5px auto;} /* 생활속의 롯데케미칼 모바일 팝업 */ .lifePop {display:none; position:fixed; top:0; left:0; width:100%; height:100%; padding:50px 15px 0; box-sizing:border-box; background:#81b141; z-index:9999;} .lifePop > div {max-height:100%; overflow-y:auto;} .lifePop .tit {font-weight:bold; font-size:16px; color:#fff; line-height:1; word-break:keep-all; margin-top:30px;} .lifePop .tit:first-child {margin-top:0;} .lifePop .txt {font-size:12px; color:#fff; line-height:1.5; word-break:keep-all; margin-top:15px;} .lifePop .txt:last-child {padding-bottom:50px;} .lifePop .closeBt {position:absolute; top:17.5px; right:15px; width:15px; height:15px; background:url("/templates/BFPC/images/life_pop_close.png") no-repeat 0 0; background-size:100% auto;} /* 지속가능경영_지속가능경영쳬계 */ .manage1 > .tit {padding-left:20px; font-size:16px; background:url("/templates/BFPC/images/manage6_tit_icon.png") no-repeat 0 50%; background-size:13px; margin-top:40px;} .manage1 > .txt {font-size:13px; line-height:1.5; margin-top:10px;} .manage1 .tit2 {font-size:15px;} .manage1 .con1 {margin-top:40px;} .manage1 .con1 .boxArea {margin-top:15px;} .manage1 .con1 .boxArea .box {display:block; width:auto; margin:5px 0 0;} .manage1 .con1 .boxArea .box:first-child {margin:0;} .manage1 .con1 .boxArea .box .txtArea {padding:15px 3%; min-height:0;} .manage1 .con1 .boxArea .box .txtArea .tit {font-size:14px;} .manage1 .con1 .boxArea .box .txtArea .txt {font-size:13px; margin-top:10px;} .manage1 .con2 {padding:90px 0 70px; background:url("/templates/BFPC/images/manage1_bg1.png") no-repeat 50% 20px, url("/common/images/icon/manage1_bg2.png") no-repeat 50% 100%; background-size:auto 54px, auto 54px;} .manage1 .con2 ul {padding:22px 3%; border-radius:150px; margin-top:15px;} .manage1 .con2 ul li .img img {width:70%;} .manage1 .con2 ul li .txt {font-size:13px; margin-top:10px;} .manage1 .con3 {margin-top:20px;} .manage1 .con3 .txt {font-size:18px; line-height:1.5; margin-top:10px;} .manage1 .con3 .txt br {display:none;} .manage1 .con3 .img {margin-top:25px;} .manage1 .reportList li {display:block; padding:15px 3%; width:auto; height:auto;} .manage1 .reportList li .year {display:block; width:auto; font-size:14px; text-align:left;} .manage1 .reportList li .tit {display:block; padding-left:0; font-size:14px; margin-top:5px;} .manage1 .reportList li .btns {display:block; width:auto; padding:0; margin-top:8px;} .manage1 .reportList li .btns a {padding:6px 25px 5px 9px; border:1px solid #e0e0e0; font-size:13px; background:url("/templates/BFPC/images/down_icon1.png") no-repeat right 9px top 50%; background-size:8px auto; margin-top:2px; margin-right:2px;} .manage1 .reportList li .btns a:first-child {margin:0; margin-right:2px;} .manage1 .reportList li .btns a:hover, .manage1 .reportList li .btns a:focus {border:1px solid #8bbf45; background:#8bbf45 url("/templates/BFPC/images/down_icon1_on.png") no-repeat right 9px top 50%; background-size:8px auto;} .manage1Report {padding:35px 0;} .manage1Report .txtArea .tit {font-size:18px; line-height:20px;} .manage1Report .txtArea .tit > span {display:block; padding:0 13px; width:40px; font-size:13px; text-align:center; margin:0 0 10px;} .manage1Report .txtArea .txt {font-size:13px; line-height:1.5; margin-top:10px;} .manage1Report .imgArea {margin-top:20px;} .manage1Report .imgArea img {max-width:50%;} .manage1Report .txtArea .btns {margin-top:20px;} .manage1Report .txtArea .btns a {padding:6px 25px 5px 9px; border:1px solid #e0e0e0; font-size:13px; background:url("/templates/BFPC/images/down_icon1.png") no-repeat right 9px top 50%; background-size:8px auto; margin-top:2px; margin-right:2px; margin-left:0;} .manage1Report .txtArea .btns a:hover, .manage1Report .txtArea .btns a:focus {border:1px solid #8bbf45; background:#8bbf45 url("/templates/BFPC/images/down_icon1_on.png") no-repeat right 9px top 50%; background-size:8px auto;} /* 지속가능경영_지속가능경영쳬계_지속가능발전목표 */ .manage1.type2 {padding-bottom:88px;} .manage1 .sdgsArea {margin-top:40px;} .manage1 .sdgsArea .sdgsList {margin:30px auto 0;} .manage1 .sdgsArea .sdgsList li {width:125px; height:205px;} .manage1 .sdgsArea .sdgsList li .txt {padding:7px 0 15px; font-size:12px; line-height:1.5;} .manage1 .sdgsArea .sdgsList li .txt br {display:none;} .manage1 .sdgsArea .sdgsList li.gutter-sizer {width:10px;} .manage1 .dotLIst {margin-top:15px;} .manage1 .dotLIst li {padding-left:10px; font-size:13px; line-height:1.5; word-break:keep-all; margin-top:5px;} .manage1 .dotLIst li:before {top:9px;} /* 지속가능경영_지속가능경영쳬계_팝업 */ .layerPop.surveyPop .popBody {padding:15px 3% 30px; height:calc(100% - 91px)} .surveyArea .txt1 {font-size:16px;} .surveyArea .txt2 {font-size:13px; margin-top:10px;} .surveyArea .surveyList {margin-top:15px;} .surveyArea .surveyList > li {padding:10px 3% 10px;} .surveyArea .surveyList > li .tit {font-size:14px;} .surveyArea .surveyList > li ul {margin-top:5px;} .surveyArea .surveyList > li ul li {min-width:170px; height:auto;} .surveyArea .surveyList > li .type4 li {min-width:170px;} .surveyArea .surveyList > li ul li > div {height:30px; line-height:30px;} .surveyArea .surveyList > li ul li.etc .textInput input {width:178px; height:22px; font-size:13px;} /* 지속가능경영_컴플라이언스 */ .manage2 > .tit1 {padding-left:20px; font-size:16px; background:url("/templates/BFPC/images/manage6_tit_icon.png") no-repeat 0 50%; background-size:13px; margin-top:40px;} .manage2 > .txt1 {font-size:13px; line-height:1.5; margin-top:10px;} .manage2 .system {padding:15px 0; margin-top:15px;}.manage2 .system .mobileTxt {display:block; text-align:left; margin-top:80px;} .manage2 .system > img.mobile {width:80%;} .manage2 .system .mobileTxt {margin-top:40px;} .manage2 .system .mobileTxt .tit {font-size:16px; margin-top:20px;} .manage2 .system .mobileTxt ul {margin-top:10px;} .manage2 .system .mobileTxt ul li {padding-left:10px; font-size:13px; line-height:1.5;} .manage2 .system .mobileTxt ul li:before {top:7px; left:0; width:4px; height:4px; border-radius:2px;} .manage2 .accoArea {margin-top:50px;} .manage2 .grayBox {padding:30px 3%; margin-top:15px;} .manage2 .grayBox .txt1 {font-size:15px; line-height:1.5;} .manage2 .grayBox .txt2 {font-size:13px; line-height:1.5; margin-top:30px;} .manage2 .grayBox .txt2 p {margin-top:20px;} .manage2 .grayBox .txt3 {margin-top:40px;} .manage2 .grayBox .txt3 .name {font-size:15px;} /* 지속가능경영_윤리경영 */ .manage3Txt {font-size:15px; line-height:1.5; margin-top:50px;} .manage3 {padding-top:40px; margin-top:40px;} .manage3 > .tit1 {padding-left:20px; font-size:16px; background:url("/templates/BFPC/images/manage6_tit_icon.png") no-repeat 0 50%; background-size:13px; margin-top:40px;} .manage3 > .txt {font-size:13px;margin-top:15px;} .manage3 > .img {margin-top:40px;} .manage3 > .img img.pc {display:none;} .manage3 > .img img.mobile {display:inline-block; max-width:400px; width:100%;} .manage3 > .img .mobileTxt {display:block; text-align:left;} .manage3 > .img .mobileTxt .tit {font-weight:bold; font-size:16px; color:#8bbf45;margin-top:20px;} .manage3 > .img .mobileTxt .tit.type2 {color:#034874;} .manage3 > .img .mobileTxt .txt {font-size:13px; line-height:1.5; margin-top:10px;} .manage3 .grayBox {padding:25px 3%; margin-top:15px;} .manage3 .grayBox li {margin:7px 5px; width:auto; min-height:0;} .manage3 .grayBox li:first-child {margin-left:5px;} .manage3 .grayBox li .tit {padding:10px 10px 35px; background:url("/templates/BFPC/images/manage3_tit_bg.png") no-repeat 0 0; background-size:100% auto;} .manage3 .grayBox li .tit:before {height:25px;} .manage3 .grayBox li .tit span {width:150px; height:150px;} .manage3 .grayBox li .tit span span {font-size:16px; line-height:1.5;} .manage3 .grayBox li .txt {font-size:13px; line-height:1.5;} .manage3 .grayBox li:nth-child(2n) .tit {background:url("/templates/BFPC/images/manage3_tit_bg2.png") no-repeat 0 0; background-size:100% auto;} .manage3 .btnArea {margin-top:25px;} .manage3 .btnArea a {display:block; margin-top:5px; margin-left:0;} .manage3 .btnArea a:first-child {margin-top:0;} /* 지속가능경영_실천규범 */ .manage3.type2 > .tit2 {font-size:15px; margin-top:20px;} .manage3.type2 > .tit3 {font-size:15px; margin-top:20px;} .manage3.type2 > .txt1 {font-size:13px; line-height:1.5; margin-top:15px;} .manage3.type2 .txtBox {max-height:200px; margin-top:25px;} .manage3.type2 .txtBox > div {padding:20px 3%;} .manage3.type2 .txtBox > div .tit {font-size:15px; margin:20px 0;} .manage3.type2 .txtBox > div .tit2 {font-size:14px; line-height:1.5;} .manage3.type2 .txtBox > div .tit2.mt40 {margin-top:20px !important;} .manage3.type2 .txtBox > div .txt {font-size:13px; line-height:1.5;} .manage3.type2 .grayBox2 {padding:20px 0; margin-top:15px;} .manage3.type2 .grayBox2 ul {padding-right:0;} .manage3.type2 .grayBox2 ul li {width:160px; height:190px; font-size:14px; line-height:1.5; margin:5px; background:url("/templates/BFPC/images/graybox2_bg1.png") no-repeat 50% 50%; background-size:100% auto;} .manage3.type2 .grayBox2 ul li.bg2 {background:url("/templates/BFPC/images/graybox2_bg2.png") no-repeat 50% 50%; background-size:100% auto;} .manage3.type2 .grayBox2 ul li.bg3 {background:url("/templates/BFPC/images/graybox2_bg3.png") no-repeat 50% 50%; background-size:100% auto;} .manage3.type2 .grayBox2 ul li.bg4 {background:url("/templates/BFPC/images/graybox2_bg4.png") no-repeat 50% 50%; background-size:100% auto;} .manage3.type2 .grayBox2 ul li:after {display:none;} .manage3.type2 .grayBox2 ul li span {font-size:13px; line-height:1.5;} /* 지속가능경영_환경안전 */ .manage4Top {margin-top:40px;} .manage4Top .txt1 > span {padding:6px 15px; font-size:20px;} .manage4Top .txt1 > span:before {width:13px; height:10px; background:url("/templates/BFPC/images/manage4_icon1.gif") no-repeat 0 0; background-size:13px auto;} .manage4Top .txt1 > span:after {width:13px; height:10px; background:url("/templates/BFPC/images/manage4_icon2.gif") no-repeat 0 0; background-size:13px auto;} .manage4Top .txt2 {font-size:16px; line-height:1.5; word-break:keep-all; margin-top:10px;} .manage4Top .txt3 {font-size:14px; line-height:1.5; margin-top:20px;} .manage4Top .imgTxt {margin-top:30px;} .manage4Top .imgTxt > img.pc {display:none;} .manage4Top .imgTxt > img.mobile {display:inline-block; vertical-align:top;} .manage4 {padding-top:40px; margin-top:40px;} .manage4 .tit1 {padding-left:20px; font-size:16px; background:url("/templates/BFPC/images/manage6_tit_icon.png") no-repeat 0 50%; background-size:13px auto; margin-top:40px;} .manage4 > .tit2 {font-size:16px; margin-top:25px;} .manage4 .txt {font-size:13px; line-height:1.5; margin-top:10px;} .manage4 .greenImgList {margin-top:25px;} .manage4 .greenImgList > li {margin-top:25px;} .manage4 .greenImgList > li .tit {font-size:16px; line-height:1.5; margin-top:10px;} .manage4 .greenImgList > li ul {margin-top:5px;} .manage4 .greenImgList > li ul li {padding-left:10px; font-size:13px; line-height:1.5;} .manage4 .greenImgList > li ul li:before {top:7px;} .manage4 .greenList > li {padding-bottom:20px; margin-top:55px;} .manage4 .greenList > li .icon {margin-top:-38px;} .manage4 .greenList > li .icon img {height:73px;} .manage4 .greenList > li .tit {font-size:16px; margin-top:20px;} .manage4 .greenList > li ul {padding:0 3%; margin-top:10px;} .manage4 .greenList > li ul li {padding-left:10px; font-size:13px; line-height:1.5;} .manage4 .greenList > li ul li:before {top:8px;} .manage4 > .halfArea .right {margin-top:40px;} .manage4 .imgList1 {max-width:450px; text-align:center; margin:15px auto 0;} .manage4 .imgList1 li {float:none; display:inline-block; vertical-align:top; width:auto; margin:10px 0 0;} .manage4 .imgList1 li:first-child {margin-top:0;} .manage4 .imgList1 li:nth-child(2n) {margin-right:0; margin-top:10px;} .manage4 .imgList1 li img {max-width:100%;} .manage4 .imgList1 li .txt {font-size:14px; margin-top:0;} .manage4 .imgList2 {max-width:450px; text-align:center; margin:15px auto 0;} .manage4 .imgList2 li {float:none; display:inline-block; vertical-align:top; width:auto; text-align:center; margin:10px 0 0;} .manage4 .imgList2 li:first-child {margin-top:0;} .manage4 .imgList2 li:nth-child(2n) {margin-right:0; margin-top:10px;} .manage4 .imgList2 li img {max-width:100%;} .manage4 .grayBox {padding:20px 3%; margin-top:15px;} .manage4 .grayBox > div .img img {height:80px;} .manage4 .grayBox > div ul {padding-top:15px;} .manage4 .grayBox > div ul li {padding-left:10px; font-size:14px; line-height:1.5; word-break:keep-all; margin-top:0;} .manage4 .grayBox > div ul li:before {top:8px;} .manage4 .dotLIst {margin-top:15px;} .manage4 .dotLIst li {padding-left:10px; font-size:13px; word-break:keep-all; margin-top:5px;} .manage4 .dotLIst li:before {top:7px;} .manage4 .greenImg {margin-top:40px; padding-bottom:10px;} .manage4 .greenImg img.pc {display:none;} .manage4 .greenImg img.mobile {display:inline-block; width:300px;} /* 지속가능경영_CSR - 추진체계 */ .csrArea1 {margin:40px auto 0;} .csrArea1 .txt1 {font-size:20px; line-height:1.5;} .csrArea1 .txt1 > img {height:18px; margin-top:6px;} .csrArea1 .txt2 {font-size:14px; line-height:1.5; margin-top:15px;} .csrArea1 .imgArea {margin-top:40px;} .csrArea1 .imgArea img.pc {display:none;} .csrArea1 .imgArea img.mobile {display:inline-block;} /* 지속가능경영_CSR - CSR활동 */ .csrArea2 {margin-top:20px;} .csrArea2 .csrTab > div {overflow:hidden;} .csrArea2 .csrTab > div a {float:left; width:50%; padding-top:10px; padding-bottom:10px; font-size:13px; border-bottom:2px solid #e0e0e0; margin-top:10px;} .csrArea2 .csrTab > div a.on {border-bottom:2px solid #8bbf45;} .csrArea2 .csrTit {font-size:20px; margin-top:30px;} .csrArea2 .csrTxt {font-size:14px; line-height:1.5; margin-top:15px;} .csrArea2 .csrBox {margin-top:20px;} .csrArea2 .csrBox > div .imgBox {height:250px;} .csrArea2 .csrBox > div .imgBox .swiper-button-prev {width:28px; height:28px; margin-top:-14px; background:url("/templates/BFPC/images/csr2_prev.png") no-repeat 0 0; background-size:100% 100%;} .csrArea2 .csrBox > div .imgBox .swiper-button-next {width:28px; height:28px; margin-top:-14px; background:url("/templates/BFPC/images/csr2_next.png") no-repeat 0 0; background-size:100% 100%;} .csrArea2 .csrBox > div .imgBox .txtArea {padding:10px 3%; width: calc(100% - 6%);} .csrArea2 .csrBox > div .imgBox .txtArea .tit {font-size:14px;} .csrArea2 .csrBox > div .imgBox .txtArea .date {font-size:13px; margin-top:5px;} .csrArea2 .csrBox > div .txtBox > div > div {padding:20px 3%;} .csrArea2 .csrBox > div .txtBox > div > div .tit {font-size:18px; word-break:keep-all;} .csrArea2 .csrBox > div .txtBox > div > div .txt {font-size:14px; word-break:keep-all; line-height:1.5; margin-top:15px;} /* 지속가능경영_동반성장 */ .manage6 {} .manage6 > .txt1 {font-size:18px; line-height:1.5;} .manage6 > .txt2 {font-size:14px; line-height:1.5; margin-top:15px;} .manage6 > .tit1 {padding-left:20px; font-size:16px; background:url("/templates/BFPC/images/manage6_tit_icon.png") no-repeat 0 50%; background-size:13px; margin-top:40px;} .manage6 .imgBox {text-align:center; margin-top:15px;} .manage6 .activity {margin-top:20px;} .manage6 .activity .boxArea {padding:20px 10px 0; margin-top:10px;} .manage6 .activity .boxArea .tit2 {font-size:16px; padding-bottom:20px;} .manage6 .activity .boxArea > div .box {height:70px;} .manage6 .activity .boxArea > div .box .icon {width:60px;} .manage6 .activity .boxArea > div .box .icon img {height:25px;} .manage6 .activity .boxArea > div .box .txtArea {padding:10px 0; } .manage6 .activity .boxArea > div .box .txtArea .tit {font-size:16px; line-height:1.5;} .manage6 .activity .boxArea > div .box .txtArea ul {margin-top:5px} .manage6 .activity .boxArea > div .box .txtArea ul li {font-size:13px; line-height:1.5;} .manage6 .btnArea {margin-top:22px;} .manage6 .btnArea .top a {margin-left:0; margin:3px;} .manage6 .btnArea .top a:first-child {margin:3px;} .manage6 .btnArea .bottom {margin-top:22px;} .manage6 .btnArea .bottom a {padding:2px; width:205px; margin-left:0; margin:3px;} .manage6 .btnArea .bottom a img {height:25px;} .manage6 .btnArea .bottom a:first-child {margin:3px;} .manage6 .adList {padding:0; margin-top:15px;} .manage6 .adList li {padding:20px 0 15px;} .manage6 .adList li .txtArea {padding:15px 0 0 0; font-size:13px; line-height:1.5;} .manage6 .adList li .txtArea .tit {font-size:18px; margin-bottom:15px;} /* faq */ .srchInput {margin-top:25px;} .srchInput > div {display:block; width:auto;} .srchInput > div input {padding:3px 50px 3px 10px; width:calc(100% - 62px); height:30px; font-size:14px;} .srchInput > div .resetBtn {right:35px; width:16px; height:16px; margin-top:-8px; background:url("/templates/BFPC/images/reset_btn.png") no-repeat 0 0; background-size:100% 100%;} .srchInput > div .srchBtn {right:9px; width:16px; height:16px; margin-top:-8px; background:url("/templates/BFPC/images/srch_btn.png") no-repeat 0 0; background-size:100% 100%;} .faqList {margin-top:30px;} .faqList > li .titArea a {display:block; padding:10px 30px 10px 10px; width:auto; overflow:hidden; background:url("/templates/BFPC/images/faq_icon.png") no-repeat right 10px top 50%; background-size:9px 5px;} .faqList > li .titArea a.on {background:url("/templates/BFPC/images/faq_icon_on.png") no-repeat right 10px top 50%; background-size:9px 5px;} .faqList > li .titArea a .label {float:left; display:block; padding:0; width:auto;} .faqList > li .titArea a .label > span {width:28px; height:28px; font-size:14px; line-height:28px;} .faqList > li .titArea a .gubun {float:left; display:block; width:auto; padding-left:10px; font-size:13px; line-height:30px;} .faqList > li .titArea a .tit {float:left; display:block; width:100%; padding-right:0; font-size:14px; line-height:1.5; margin-top:10px;} .faqList > li .txtArea {padding:14px 14px 14px 50px;} .faqList > li .txtArea .label {top:9px; left:9px; width:30px; height:30px; font-size:14px; line-height:30px;} .faqList > li .txtArea .txt {font-size:13px; line-height:1.5;} /* 개인정보처리방침 */ .policySelect {text-align:left; overflow:hidden; margin-top:20px;} .policySelect select {float:left; padding:5px 9% 5px 3%; width:calc(100% - 65px); height:35px; font-size:13px;} .policySelect a {float:left; width:60px; height:35px; line-height:35px; font-size:14px; margin-left:5px;} .policyArea {padding:25px 3% 0; font-size:13px; line-height:1.5; margin-top:15px;} .policyArea .mt30 {margin-top:15px !important;} .policyArea .mt50 {margin-top:25px !important;} .policyArea .tit {font-size:15px; margin-top:15px;} .policyArea .underL {font-size:14px; line-height:1.5;} .policyArea .underL.mt30 {margin-top:14px !important;} .policyArea .pl20 {padding-left:15px;} .policyArea .barList {padding-left:5px;} .policyArea .barList li {padding-left:63px; text-indent:-63px;} .policyArea .numList {margin-top:15px;} .policyArea .policyTable {margin-top:25px;} .policyArea .policyTable .th .cell {font-size:14px;} .policyArea .policyTable .cell {padding:10px 5px; word-break:break-all;} /* 신규파트너사 정보등록 */ .partnerArea .txt1 {font-size:16px; line-height:1.5;} .partnerArea .txt2 {font-size:13px; line-height:1.5; margin-top:10px;} .partnerArea .tit {padding-left:20px; font-size:16px; background:url("/templates/BFPC/images/manage6_tit_icon.png") no-repeat 0 50%; background-size:13px; margin-top:40px;} .partnerArea .partnerList {margin-top:15px;} .partnerArea .partnerList > li {display:block;} .partnerArea .partnerList > li .imgArea {display:block; width:auto; padding:15px 3% 5px;} .partnerArea .partnerList > li .imgArea > img {height:74px;} .partnerArea .partnerList > li .txtArea {display:block; padding:5px 3% 15px;} .partnerArea .partnerList > li .txtArea p {font-size:14px; line-height:1.5;} .partnerArea .partnerList > li .txtArea p br {display:none;} .partnerArea .partnerList > li .txtArea .step {margin:0; font-size:14px;} .partnerArea .partnerList > li .txtArea ul {margin-top:5px;} .partnerArea .partnerList > li .txtArea ul li {font-size:13px; line-height:1.5; text-indent:-9px; margin-left:9px;} .partnerArea .btnArea {margin-top:38px;} .partnerArea .btnArea a {margin:2px;} /* 통합검색 */ .allSrchArea .inner {padding:50px 3% 45px;} .allSrchArea .printBtn {display:none;} .allSrchArea .allSrch {padding-bottom:10px; padding-right:30px; width:calc(100% - 45px); margin-top:35px;} .allSrchArea .allSrch input {height:16px; font-size:14px;} .allSrchArea .allSrch a {right:10px; width:19px; height:20px; background:url("/templates/BFPC/images/allsrch_btn.png") no-repeat 0 0; background-size:100% 100%;} .allSrchArea .txt {font-size:14px; margin-top:30px;} .allSrchResult {padding:40px 0 70px;} .allSrchResult .inner > .tit {font-size:18px; margin-top:40px;} .allSrchResult .inner > .tit .moreBtn {top:2px; padding-right:15px; font-size:14px; line-height:1; background:url("/templates/BFPC/images/allsrch_more_icon.png") no-repeat 100% 2px; background-size:8px 8px;} .allSrchResult .allSrchList {margin-top:15px;} .allSrchResult .allSrchList li > a {padding:18px 3% 20px;} .allSrchResult .allSrchList li .tit {font-size:16px; line-height:1.5;} .allSrchResult .allSrchList li .tit span {padding-left:10px; margin-left:7px;} .allSrchResult .allSrchList li .tit span:before {width:5px; height:7px; margin-top:-3.5px;} .allSrchResult .allSrchList li .txt {font-size:14px; margin-top:15px;} .allSrchArea .noData .txt {font-size:13px; line-height:1.5;} /* 에러페이지 */ .errorDiv .errorCon {padding:15px 3%;} .errorDiv .logo a {height:25px;} .errorDiv .logo a img {height:25px;} .errorDiv .box {padding:30px 3%; width:auto;} .errorDiv .box.type2 {width:auto;} .errorDiv .box .icon img {height:42px;} .errorDiv .box .txt1 {font-size:20px; margin-top:20px;} .errorDiv .box .txt2 {font-size:14px; line-height:1.5; word-break:keep-all; margin-top:15px;} .errorDiv .box ul {padding:15px 3%; margin-top:20px;} .errorDiv .box ul li {padding-left:12px; font-size:14px; line-height:1.5; margin-top:10px;} .errorDiv .box ul li:before {top:5px;} /* 제품생산능력 */ .capacityArea {margin-top:40px;} .capacityArea .unit {top:90px; right:19px; font-size:12px; line-height:14px;} .capacityArea .label {top:25px; text-align:left;} .capacityArea .label li {padding-left:25px; font-size:12px; line-height:14px;} .capacityArea .label li:before {width:15px; height:15px;} .capacityArea .box {padding:120px 19px 30px; width:750px;} .capacityArea .box img {width:750px;} .capacityArea .capPop {padding:30px 25px 25px;} .capacityArea .capPop .tit {font-size:16px; margin-bottom:5px;} .capacityArea .capPop .txt1 {font-size:12px; line-height:1.5;} .capacityArea .capPop .txt2 {font-size:12px; line-height:1.5;} .capacityArea .capPop .txt3 {font-size:12px; line-height:1.5;} .capacityArea .capPop .txt4 {font-size:12px; line-height:1.5;} .capacityArea .capPop .closeBt {top:10px; right:10px; width:15px; height:15px;} } @media screen and (max-width:450px) { } @media all and (max-width:350px) { }