@charset "utf-8"; @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); /* Layout */ #wrap {position:relative; width:100%;z-index:10;} #header{position: fixed;width: 100%;top: 0;left: 0;right: 0;z-index: 1000;height: auto;background:url('../images/common/h_bg.png') no-repeat center 100%;} #header .pc_area {background:#008fd5 url('../images/common/h_bg.png') no-repeat center bottom; background-size:100% 5px;} #footer{overflow:hidden;position:relative;width:100%;background:#fff;z-index:100} /* Main Page */ .page-main{position:relative;margin-left:0;width:100%;margin-top:116px;z-index:1;overflow: hidden;} #home{overflow:hidden; position:relative; width:100%; padding:0; border:0;} #home-slider {border:0; margin:0; /*height:100%;*/ height:calc(100vh - 116px);} #home-slider .slides {display:block; overflow:hidden; width:100%; /*height:960px;*/ height:100%;} #home-slider .slides .slider {overflow:hidden; float:left; position:relative; width:100%; /*height:100%;*/ height:calc(100vh - 116px);} #home-slider .slides .slider .imgBox {width:100%; height:100%; transition:all 6s ease-in-out; transform:scale(1.4); background-position:50%; background-repeat:no-repeat;} #home-slider .slides .slider .txtBox {position:absolute; top:33%; left:50%; z-index:1; width:790px; margin-left:-395px; text-align:left; color:#fff;} #home-slider .slides .slider .txtBox .txt01 {display:block; position:relative; left:-200px; font-family:arial; font-size:66px; font-weight:bold; line-height:1em; text-transform:uppercase; opacity:0; transition:all 2s ease-in-out;} #home-slider .slides .slider .txtBox .txt02 {display:block; position:relative; left:200px; margin-top:25px; font-size:20px; line-height:1.5em; opacity:0; transition:all 2s ease-in-out;} #home-slider .slides .slider .imgBox.on {transform:scale(1);} #home-slider .slides .slider .txtBox .txt01.on {left:0; opacity:1;} #home-slider .slides .slider .txtBox .txt02.on {left:0; opacity:1;} #home .mainMenu {position:absolute; top:0; left:0; z-index:1000; width:100%; text-align:right; color:#fff;} #home .mainMenu ul {} #home .mainMenu ul li {position:relative; width:100%; height:240px; border-top:1px solid rgba(255,255,255,0.2);} #home .mainMenu ul li:first-child {border-top:1px solid rgba(255,255,255,0);} #home .mainMenu ul li a {display:block; width:100%; height:100%;} #home .mainMenu ul li a .menuTxt {display:block; position:absolute; top:50%; left:0; z-index:1001; width:100%; padding:0 94px 0 0; margin-top:-13px; box-sizing:border-box; vertical-align:middle; font-size:24px; line-height:27px; color:#fff; transition:all 1s ease-out; -webkit-transition:all 0.3s ease-out;} #home .mainMenu ul li a .menuTxt:before {content:""; display:inline-block; width:27px; height:27px; margin-right:94px; vertical-align:top; background:url(../images/common/mainMenuIcon.png) no-repeat center center;} /* 20180607 혁민 수정 - start */ #home .mainMenu ul li a .menuBg {display:table; table-layout:fixed; opacity:0; width:100%; height:100%; background:#fff url(../images/mainMenuVis01.jpg) no-repeat 85% center; background-size:auto 100%; transform:scaleY(0); -webkit-transform:scaleY(0); transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} #home .mainMenu ul li a .menuBg .tblCell {display:table-cell; vertical-align:middle; text-align:left; font-size:0; text-shadow: 1px 1px rgba(255,255,255,0.6);} #home .mainMenu ul li a .menuBg .tblCell span {display:block; width:100%; max-width:1140px; padding:0 30px; margin:0 auto; font-size:24px; line-height:1.5em; color:#333;} #home .mainMenu ul li a .menuBg .tblCell span em {font-weight:bold; color:#008acb;} #home .mainMenu ul li:nth-child(1) a .menuBg {background:#fff url(../images/mainMenuVis01.jpg) no-repeat 85% center; background-size:auto 100%;} #home .mainMenu ul li:nth-child(2) a .menuBg {background:#fff url(../images/mainMenuVis02.jpg) no-repeat right center; background-size:auto 100%;} #home .mainMenu ul li:nth-child(3) a .menuBg {background:#fff url(../images/mainMenuVis03.jpg) no-repeat right center; background-size:auto 100%;} #home .mainMenu ul li:nth-child(4) a .menuBg {background:#fff url(../images/mainMenuVis04.jpg) no-repeat 85% center; background-size:auto 100%;} /* 20180607 혁민 수정 - end */ #home .mainMenu ul li a.active .menuTxt {color:#333;} #home .mainMenu ul li a.active .menuTxt:before {background:url(../images/common/mainMenuIcon_on.png) no-repeat center center;} #home .mainMenu ul li a.active .menuBg {opacity:1; transform:scaleY(1); -webkit-transform:scaleY(1);} .slick-dots {position:absolute; bottom:40px; right:0; left:0; z-index:1001; margin:auto; text-align:center; font-size:0;} .slick-dots > li {display:inline-block; text-align:center;} .slick-dots > li > button {display:block; z-index:1000; width:12px; height:12px; padding:0; margin:0 5px; outline:0; text-indent:-9999px; cursor:pointer; background:#fff;} .slick-dots > li > button:hover {background:#94c93d;} .slick-dots > li.slick-active > button {width:62px; background:#94c93d;} /* 서브 공통 */ #navi {position:relative; width:100%; height:298px; margin-top:117px; background:#fff;} #navi .subVisual {overflow:hidden; position:relative; width:100%; height:240px;} /*#navi .subVisual h2 {position:absolute; top:50%; left:0; z-index:87; width:100%; padding:0; margin-top:-25px; text-align:center; font-size:38px; font-weight:bold; line-height:50px; letter-spacing:-1px; color:#fff;}*/ #navi .subVisual h2 {width:96%; max-width:1140px; padding:0; margin:180px auto 0; text-align:left; font-size:38px; font-weight:bold; line-height:50px; letter-spacing:-1px; color:#fff;} #navi .subVisual.visual01 {background:url("../images/sub/subVisual01a.png") no-repeat center top; background-size:cover;} /* #navi .subVisual.visual02 {background:url("../images/sub/subVisual02.jpg") no-repeat center top; background-size:cover;} */ #navi .subVisual.visual02 {background:url("../images/sub/nsuv02.png") no-repeat center top; background-size:cover;} #navi .subVisual.visual03 {background:url("../images/sub/subVisual03.jpg") no-repeat center top; background-size:cover;} #navi .subVisual.visual04 {background:url("../images/sub/subVisual04.jpg") no-repeat center top; background-size:cover;} #navi .subVisual.visual05 {background:url("../images/sub/subVisual05.jpg") no-repeat center top; background-size:cover;} /* #navi .subVisual.visual06 {background:url("../images/subVisual01n.png") no-repeat center top; background-size:cover;} */ #navi .subVisual.visual06 {background:url("../images/sub/nsuv01.png") no-repeat center top; background-size:cover;} #navi .root {width:100%; height:58px; border-bottom:1px solid #ddd; background:#fff;} #navi .root.fixed {position:fixed; top:117px; left:0; z-index:101;} #navi .root .root-area {width:100%; max-width:1140px; margin:0 auto;} #navi .root .root-area a, #navi .root .root-area .n-subject {display:inline-block; height:57px; padding:0 40px; border-right:1px solid #ddd; vertical-align:top; text-align:center; font-size:15px; line-height:57px; color:#111;} #navi .root .root-area a {padding:0 30px;} #navi .root .root-area .current {font-weight:bold;} .subContainer {position:relative; width:100%; max-width:1140px; margin:0 auto;} .subContainer .page-title {z-index:50; width:100%; max-width:1140px; padding:61px 0 55px 0; margin:0; font-size:36px; font-weight:bold; text-indent:0; color:#333; background:#fff;} .subContainer .page-title.fixed {position:fixed; top:175px;} /*.subContainer .page-title:before {content:""; display:block; width:9px; height:9px; margin-left:-15px; background:#94c93d;}*/ .subContainer .page-title.btnType {position:relative;} .subContainer .page-title.btnType a.btnMovie {display:block; position:absolute; top:67px; right:0; z-index:1; height:42px; padding:0 20px 0 45px; border:1px solid #ddd; border-radius:21px; font-size:15px; line-height:40px; color:#111; background:url(../images/sub/iconPlayMovie.png) no-repeat 8px center;} .subContainer ul.lnb-ho, .subContainer ul.lnb-ho1 {display:block; overflow:hidden; z-index:50; width:100%; max-width:1140px; padding:1px 0 0; margin:0;} .subContainer ul.lnb-ho.fixed, .subContainer ul.lnb-ho1.fixed {position:fixed; top:334px; width:96%;} .subContainer ul.lnb-ho li, .subContainer ul.lnb-ho1 li{margin-top:-1px; text-align:center;font-size:15px;background: #fff;padding: 0;border-collapse: collapse;} .subContainer ul.lnb-ho li:hover, .subContainer ul.lnb-ho1 li:hover{background: rgb(153,202,60);border-color: #94c33a;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;color:#fff;} .subContainer ul.lnb-ho li a, .subContainer ul.lnb-ho1 li a{display: block;height: auto;padding: 10px 0;text-decoration:none;border: 1px solid #e9e9e9;color:#999;} .subContainer ul.lnb-ho li a:hover, .subContainer ul.lnb-ho1 li a:hover{color:#fff;} .subContainer ul.lnb-ho li.active, .subContainer ul.lnb-ho1 li.active{background:#008fd4;color:#fff;} .subContainer ul.lnb-ho li.active a, .subContainer ul.lnb-ho1 li.active a{color:#fff} .subContainer ul.lnb-ho li a.active, .subContainer ul.lnb-ho1 li a.active{background:#008fd4;color:#fff;border: 1px solid #008fd4;} .subContainer .tab-content {display:none; margin-top:0;} .subContainer .tab-content.fixed {margin-top:207px;} .subContainer .tab-content.active {display:block;} .subContainer .head-title-area{position: relative;margin-top: 20px;margin-bottom: 30px;} .subContainer .main-tit, .subContainer .main-tit-t{padding:40px 0; text-align:center; font-size:25px; font-weight:bold;} .subContainer .main-tit:before{width: 60px;transition:0.3s;-webkit-transition-delay:1.1s;transition-delay:1.1s;-webkit-transition-timing-function:cubic-bezier(0.52, 0.42, 0, 1.01);transition-timing-function:cubic-bezier(0.52, 0.42, 0, 1.01);} .subContainer .btnWrap {overflow:hidden; text-align:center; font-size:0;} .subContainer .btnWrap li {display:inline-block; padding:5px; vertical-align:top;} .subContainer .btnWrap li a {display:inline-block; width:auto; height:60px; padding:0 30px; border-radius:30px; vertical-align:top; text-align:center; font-size:15px; line-height:58px;} .subContainer .btnWrap li a i {display:inline-block; height:58px; margin-right:10px; vertical-align:top;} .subContainer .btnWrap li a i.download {width:20px; background:url(../images/sub/iconDownload01.png) no-repeat left center;} .subContainer .btnWrap li a i.view {width:18px; background:url(../images/sub/iconview01.png) no-repeat left center;} .subContainer .btnWrap li a.btnType01 {border:1px solid #333; color:#111; background:#fff; border-radius:0px;} .subContainer .btnWrap li a.btnType02 {border-radius:0; border-color:#038fd5; font-size:20px; color:#fff; background:#038fd5;} .subContainer section .conTit {position:relative; margin:50px 0 20px; font-size:28px; font-weight:bold; color:#111;} .subContainer section .conTit a {display:block; position:absolute; top:0; right:0; z-index:1; font-size:14px; line-height:26px; color:#666;} .subContainer section h5 {margin:30px 0 20px; font-size:20px; font-weight:bold;} .subContainer section p {font-size:16px; line-height:1.8em; color:#111;} .subContainer section p.guideTxt01 {height:21px; padding-left:32px; margin-top:20px; font-size:14px; line-height:21px; background:url(../images/sub/iconGuide01.png) no-repeat left top;} .subContainer section .imgBox img {width:100%; height:auto; vertical-align:top;} .subContainer section ul.halfBox {overflow:hidden; border-bottom:1px solid #f5f5f5;} .subContainer section ul.halfBox > li {float:left; width:50%; padding:0 0 50px;} .subContainer section ul.halfBox > li ul li {font-size:16px;} .subContainer section .txtBoxType01 .decoLine {display:block; width:28px; height:4px; margin:50px auto 40px; background:#000;} .subContainer section .txtBoxType01 p {text-align:center; color:#111;} .subContainer section .txtBoxType01 p span {display:block;} .subContainer section .txtBoxType01 .txt01 {font-size:28px; font-weight:bold;} .subContainer section .txtBoxType01 .txt02 {font-size:16px;}.subContainer section ul.halfBox {overflow:hidden;} .subContainer section .txtBoxType02 .decoLine {display:block; width:28px; height:4px; margin:50px 0 40px; background:#000;} .subContainer section .txtBoxType02 p {text-align:left; color:#111;} .subContainer section .txtBoxType02 p span {display:block;} .subContainer section .txtBoxType02 .txt01 {font-size:16px; font-weight:bold;} .subContainer section .txtBoxType02 .txt02 {font-size:16px;} .subContainer section .txtBoxType03 .decoLine {display:block; width:28px; height:4px; margin:50px 0 40px; background:#000;} .subContainer section .txtBoxType03 p {text-align:left; color:#111;} .subContainer section .txtBoxType03 p span {display:block;} .subContainer section .txtBoxType03 .txt01 {font-size:24px; font-weight:bold; line-height:1.4em;} .subContainer section .txtBoxType03 .txt02 {font-size:16px;} .subContainer section .tblType01 {/* table-layout:fixed; */ position:relative; width:100%; border-collapse:collapse; border-top:none;} .subContainer section .tblType01 caption {display:block; position:absolute; top:-30px; right:0; z-index:1; font-size:12px; color:#666;} .subContainer section .tblType01 thead th {height:50px; border:1px solid #ddd; border-bottom:0; vertical-align:middle; text-align:center; font-size:15px; word-wrap:break-word; color:#111; background:#eee;} .subContainer section .tblType01 thead th.gray {baword-wrap:break-word; ckground:#f6f6f6;} .subContainer section .tblType01 tbody th, .subContainer section .tblType01 tbody td {height:40px; padding:0 15px; border:1px solid #ddd; vertical-align:middle; text-align:center; font-size:15px; word-wrap:break-word; color:#333; background:#fff;} .subContainer section .tblType01 tbody tr.gray th, .subContainer section .tblType01 tbody tr.gray td, .subContainer section .tblType01 tbody tr .gray {background:#f6f6f6;} .subContainer section .tblType01 tfoot th, .subContainer section .tblType01 tfoot td {height:40px; padding:0 25px; border:1px solid #ddd; vertical-align:middle; text-align:center; font-size:15px; font-weight:bold; word-wrap:break-word; color:#333; background:#f6f6f6;} .subContainer section .tblType01 td span {display:inline-block; width:100%; line-height:26px;} .subContainer section .tblType01 .txtL {text-align:left;} /* 1. 회사소개 */ #sub_company {} #sub_company .fullBox {width:200%; margin-left:-50%;} #sub_company .fullBox .inner {overflow:hidden; width:48%; max-width:1140px; padding:50px 0 80px; margin:0 auto; text-align:center;} #sub_company .fullBox .inner img {width:100%; height:auto; vertical-align:top;} #con-vision .fullBox {background:url(../images/sub/sub0101_visionImg01.jpg) no-repeat center top; background-size:cover;} #con-product .fullBox {background:url(../images/sub/sub0101_prdImg03.jpg) no-repeat center top; background-size:cover;} #con-product .fullBox .inner {padding:113px 0;} #con-product .fullBox .inner .tit {margin:0; font-size:24px; line-height:30px; color:#fff;} #con-product .fullBox .boxLeft {/*float:left;*/ width:65%; height:410px; /*padding-right:80px;*/ margin:0 auto; text-align:left;} #con-product .fullBox .boxLeft ul.portfolioGraph {overflow:hidden; margin-top:30px; border-top:1px solid #fff; border-bottom:1px solid #fff;} #con-product .fullBox .boxLeft ul.portfolioGraph li {float:left; width:25%; padding:20px 0 30px; text-align:center;} #con-product .fullBox .boxLeft ul.portfolioGraph li em {display:block; height:50px; font-size:20px; line-height:35px; color:#fff;} #con-product .fullBox .boxLeft ul.portfolioGraph li .bar {display:block; position:relative; width:50px; height:180px; margin:25px auto;} #con-product .fullBox .boxLeft ul.portfolioGraph li .bar > span {display:block; position:absolute; left:0; bottom:0; z-index:1; width:100%;} #con-product .fullBox .boxLeft ul.portfolioGraph li .bar.bar01 > span {background:#009eed;} #con-product .fullBox .boxLeft ul.portfolioGraph li .bar.bar02 > span {background:#99ca3a;} #con-product .fullBox .boxLeft ul.portfolioGraph li .bar.bar03 > span {background:#c96b3d;} #con-product .fullBox .boxLeft ul.portfolioGraph li .bar.bar04 > span {background:#fffd7b;} #con-product .fullBox .boxLeft ul.portfolioGraph li strong {display:block; font-size:28px; color:#fff;} /*#con-product .fullBox .boxRight {float:left; width:42%; height:410px; text-align:left;} #con-product .fullBox .boxRight ul.staffCount {overflow:hidden;} #con-product .fullBox .boxRight ul.staffCount li {float:left; width:50%; padding:350px 35px 0; text-align:center; font-size:20px; line-height:30px; color:#fff;} #con-product .fullBox .boxRight ul.staffCount li:nth-child(1) {background:url(../images/sub/iconPersonSmall.png) no-repeat center center;} #con-product .fullBox .boxRight ul.staffCount li:nth-child(2) {background:url(../images/sub/iconPersonBig.png) no-repeat center center;}*/ #con-life ul.lifeCategory {overflow:hidden; margin:0 -10px;} #con-life ul.lifeCategory li {float:left; width:25%; padding:0 10px;} #con-life ul.lifeCategory li .bgBox {height:472px; padding:25px;} #con-life ul.lifeCategory li:nth-child(1) .bgBox {background:#f5f7f8 url(../images/sub/sub0101_lifeImg01.jpg) no-repeat center bottom; background-size:contain;} #con-life ul.lifeCategory li:nth-child(2) .bgBox {background:#f5f7f8 url(../images/sub/sub0101_lifeImg02.jpg) no-repeat center bottom; background-size:contain;} #con-life ul.lifeCategory li:nth-child(3) .bgBox {background:#f5f7f8 url(../images/sub/sub0101_lifeImg03.jpg) no-repeat center bottom; background-size:contain;} #con-life ul.lifeCategory li:nth-child(4) .bgBox {background:#f5f7f8 url(../images/sub/sub0101_lifeImg04.jpg) no-repeat center bottom; background-size:contain;} #con-life ul.lifeCategory li strong {display:block; font-size:24px;} #con-life ul.lifeCategory li span {display:block; margin-top:10px; font-size:14px;} .productConBox {overflow:hidden; padding:60px;} .productConBox .prdName {display:table; table-layout:fixed; float:left; width:45%; height:170px;} .productConBox .prdName .inner {display:table-cell; vertical-align:middle; text-align:center; font-size:26px; color:#fff;} .productConBox .prdInfo {float:left; width:55%; height:170px;} .productConBox .prdInfo ul {padding:25px 0;} .productConBox .prdInfo ul li {padding-left:55px;} .productConBox .prdInfo ul li span {display:inline-block; width:60%; vertical-align:top; text-align:left; font-size:16px; line-height:30px; color:#fff;} .productConBox .prdInfo ul li em {display:inline-block; width:40%; vertical-align:top; text-align:left; font-size:16px; line-height:30px; color:#fff;} .productConBox.prd01 {background:url(../images/sub/sub0101_prdImg01.jpg) no-repeat center top; background-size:cover;} .productConBox.prd01 .prdInfo {background:rgba(0,119,194,0.8);} .productConBox.prd02 {background:url(../images/sub/sub0101_prdImg02.jpg) no-repeat center top; background-size:cover;} .productConBox.prd02 .prdInfo {background:rgba(153,202,58,0.8);} .subContainer ul.newTab {display:block; overflow:hidden; z-index:50; width:100%; max-width:1140px; padding:0; margin:0;} .subContainer ul.newTab.fixed {position:fixed; top:334px; width:96%;} .subContainer ul.newTab li {padding:0; text-align:center;} .subContainer ul.newTab li a {display:block; padding:10px 0; border-bottom:2px solid #ddd; font-size:18px; text-decoration:none; color:#999; background:#fff;} .subContainer ul.newTab li a.active {border-color:#008fd4; color:#111; color:#008fd4;} .subContainer ul.newTab.lnb-ho {padding:1px 0 0;} .subContainer ul.newTab.lnb-ho.fixed {position:fixed; top:334px; width:96%;} .subContainer ul.newTab.lnb-ho li a {border-bottom:1px solid #e9e9e9;font-size:15px;} .subContainer ul.newTab.lnb-ho li a.active {color:#fff;} .subContainer ul.newTab2 {display:block; overflow:hidden; z-index:50; width:100%; max-width:1140px; padding:0; margin:0;} .subContainer ul.newTab2.fixed {position:fixed; top:334px; width:96%;} .subContainer ul.newTab2 li {padding:0; text-align:center;} .subContainer ul.newTab2 li a {display:block; padding:10px 0; border-bottom:2px solid #ddd; font-size:18px; text-decoration:none; color:#999; background:#fff;} .subContainer ul.newTab2 li a.active {border-color:#008fd4; color:#111; color:#008fd4;} .subContainer ul.newTab2.lnb-ho {padding:1px 0 0;} .subContainer ul.newTab2.lnb-ho.fixed {position:fixed; top:334px; width:96%;} .subContainer ul.newTab2.lnb-ho li a {border-bottom:1px solid #e9e9e9;font-size:15px;} .subContainer ul.newTab2.lnb-ho li a.active {color:#fff;} .subContainer ul.sjTab {display:block; overflow:hidden; z-index:50; width:100%; max-width:1140px; padding:0; margin:0;} .subContainer ul.sjTab.fixed {position:fixed; top:334px; width:96%;} .subContainer ul.sjTab li {padding:0; text-align:center;} .subContainer ul.sjTab li a {display:block; padding:10px 0; border-bottom:2px solid #ddd; font-size:18px; text-decoration:none; color:#999; background:#fff;} .subContainer ul.sjTab li a.active {border-color:#008fd4; color:#111;} .historyWrap {overflow:hidden;} .historyWrap .infoBox {float:left; width:48%;} .historyWrap .infoBox .inner {padding:0 0 0 25px;} .historyWrap .infoBox .inner p span {display:block;} .historyWrap .infoBox .inner .txt01 {font-size:51px; font-weight:bold; line-height:1em;} .historyWrap .infoBox .inner .txt02 {font-size:18px; line-height:1.6em;} .historyWrap .infoBox .inner img {width:95%; max-width:468px; height:auto; vertical-align:top;} .historyWrap ul.timelineList {float:left; width:52%;} .historyWrap ul.timelineList > li {overflow:visible; padding-bottom:40px; margin-left:5px; background:url(../images/sub/borderLine_ddd.gif) no-repeat left top; background-size:1px 100%;} .historyWrap ul.timelineList > li:first-child {background-position:left 6px;} .historyWrap ul.timelineList > li:last-child {background-size:1px 6px;} .historyWrap ul.timelineList > li .yearTxt {position:relative; padding-left:65px; margin-left:-5px; text-align:left; font-size:21px; line-height:22px; color:#0082d4;} .historyWrap ul.timelineList > li .yearTxt:before {content:""; display:inline-block; overflow:hidden; position:absolute; top:50%; left:0; z-index:1; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:#0082d4;} .historyWrap ul.timelineList > li ul {padding-left:65px; margin-left:-5px;} .historyWrap ul.timelineList > li ul li {text-align:left; font-size:16px; line-height:2em;} .historyWrap ul.timelineList > li ul li em {font-weight:bold;} ul.opList {margin-top:10px; border-top:4px solid #0082d4;} ul.opList li {overflow:hidden; padding:30px 35px 15px; border-bottom:1px solid #ddd; background:#f5f7f8;} ul.opList li:last-child {border-bottom:0;} ul.opList li .thm {float:left; width:166px; height:216px; padding:0 16px 16px 0; background:url(../images/sub/sub0103_opThmBg.png) no-repeat left top; background-size:cover;} ul.opList li .thm img {width:100%; height:auto; vertical-align:top;} ul.opList li .infoBox {float:left; padding-left:30px;} ul.opList li .infoBox h4 {padding-bottom:15px; font-size:18px; font-weight:bold;} ul.opList li .infoBox p {font-size:15px;} ul.opList.ceo {margin-top:50px; border-top:0;} ul.opList.ceo li {overflow:hidden; padding:0; border-bottom:0; background:#fff;} ul.opList.ceo li .thm {float:left; width:216px; height:252px; padding:0 16px 16px 0; background:url(../images/sub/sub0103_opCeoBg.png) no-repeat left top; background-size:cover;} ul.opList.ceo li .infoBox {float:left; padding-left:15px;} ul.opList.ceo li .infoBox h4 {font-size:22px;} .greeting {overflow:hidden;} .greeting .txt01 {float:left; width:30%;} .greeting .txt02 {float:left; width:70%;} .greeting .txt01 p {font-size:24px; line-height:1.4em;} .greeting .txt02 p {padding-bottom:40px; font-size:15px;} .greeting .txt02 p.signiture {font-size:15px;} .greeting .txt02 p.signiture strong {padding-left:10px; font-size:28px; letter-spacing:10px;} ul.familyList {margin-top:50px;} ul.familyList li {overflow:hidden;} ul.familyList li:nth-child(2) {margin-top:40px;} ul.familyList li .imgBox {float:left; width:36%; max-width:400px; border:1px solid #ddd; text-align:center; background:#fff;} ul.familyList li .imgBox img {width:100%; height:auto; vertical-align:top;} ul.familyList li .infoBox {float:left; width:64%; padding-left:40px; text-align:left;} ul.familyList li .infoBox h4 {font-size:24px; font-weight:bold; line-height:1.8em; color:#111;} ul.familyList li .infoBox p {margin-top:20px; font-size:15px; color:#333;} .companyMap p.mapTit {margin-top:40px; font-size:22px; font-weight:bold;} .companyMap ul {overflow:hidden; border-top:1px solid #ddd;} .companyMap ul.first {border-top:0;} .companyMap ul li {float:left; width:50%; padding-top:40px;} .companyMap ul li:nth-child(odd) {padding-right:40px;} .companyMap ul li:nth-child(even) {padding-left:40px;} .companyMap ul li .mapBox {} .companyMap ul li .mapBox img {width:100%; height:auto; vertical-align:top;} .companyMap ul li .txtBox {overflow:hidden; padding:30px 0 40px;} .companyMap ul li .txtBox dl {overflow:hidden; margin:0;} .companyMap ul li .txtBox dl dt {margin-bottom:15px; font-size:18px; font-weight:bold;} .companyMap ul li .txtBox dl dd {font-size:15px; line-height:30px;} .companyMap ul li .txtBox dl dd span {padding-right:15px;} .companyMap.mainMap {border-top:2px solid #000;} .companyMap.mainMap ul li {float:none; width:100%; padding:40px 0 0;} .companyMap.mainMap ul li .txtBox dl dt {float:left; width:15%; font-size:22px;} .companyMap.mainMap ul li .txtBox dl dd {float:left; width:85%;} .companyMap.map01 {border-top:1px solid #ddd;} .companyMap.map02 {margin-top:30px; border-top:2px solid #000;} .opInfoBox {overflow:hidden;} .opInfoBox .info01 {float:left; width:48%; padding:20px; background:#f5f5f5;} .opInfoBox .info01 .imgBox {max-width:84px; margin:0 auto;} .opInfoBox .info01 .tBox {padding:16px; margin-top:10px; font-size:16px; color:#fff; background:#99ca3c;} .opInfoBox .info01 .tBox strong {display:block; font-size:20px; font-weight:normal; line-height:24px;} .opInfoBox .info01 .tBox span {font-size:16px; display:block; line-height:22px;} .opInfoBox .info01 .tBox ul {margin-top:10px;} .opInfoBox .info01 .tBox ul li {font-size:16px; line-height:21px;} .opInfoBox .info02 {float:left; width:52%;} .opInfoBox .info02 ul.history {margin-left:60px;} .opInfoBox .info02 ul.history > li {overflow:hidden; display:flex; flex-direction: row;} .opInfoBox .info02 ul.history > li .yearTxt {width:100px; text-align:left; font-size:21px; font-weight:bold; line-height:26px; color:#0082d4;} .opInfoBox .info02 ul.history > li ul {flex:1,0,0;} .opInfoBox .info02 ul.history > li ul li {padding-bottom:30px; text-align:left; font-size:16px; line-height:26px;} .opInfoBox .info02 ul.history > li ul li em {padding-right:5px; font-weight:bold;} .txtImgBox {overflow:hidden;} .txtImgBox .tBox {float:left; width:80%; padding:0; font-size:16px;} .txtImgBox .tBox p.subTit {font-size:16px; font-weight:bold; color:#111;} .txtImgBox .tBox p {font-size:16px; line-height:30px; color:#333;} .txtImgBox .tBox ul li {font-size:16px; line-height:30px; color:#333;} .txtImgBox .iBox {float:left; width:20%; padding:8px; text-align:center; background:#f5f5f5;} .txtImgBox .iBox img {width:100%;} .opInfoBox.typeD .info01 {padding:0;} .opInfoBox.typeD .info01 .imgBox {max-width:100%;} .opInfoBox.typeD .info02 ul {margin-left:85px;} .opInfoBox.typeD .info02 ul > li {overflow:hidden; position:relative; padding:0 0 30px 80px;} .opInfoBox.typeD .info02 ul > li strong {display:block; position:absolute; top:0; left:0; z-index:1; width:80px; text-align:left; font-size:21px; font-weight:bold; line-height:26px; color:#0082d4;} .opInfoBox.typeD .info02 ul > li span {display:block; float:left; text-align:left; font-size:16px; line-height:26px;} ul.volunteer {overflow:hidden;} ul.volunteer > li {overflow:hidden; padding-bottom:30px;} ul.volunteer > li .imgBox {float:left; width:22%; text-align:left;} ul.volunteer > li .imgBox img {width:100%; max-width:250px; height:auto; vertical-align:top;} ul.volunteer > li .infoBox {float:left; width:78%; padding-left:30px; text-align:left;} ul.volunteer > li .infoBox strong {display:block; font-size:16px; line-height:30px;} ul.volunteer > li .infoBox span {display:block; font-size:16px; line-height:30px;} ul.volunteer > li .infoBox ul li {font-size:16px; line-height:30px;} /* 2. 사업소개 */ #sub_business {} #sub_business .studyList01 {overflow:hidden;} #sub_business .studyList01 li {float:left; width:50%; height:132px; padding:10px 0; border-right:1px solid #ddd; text-align:center;} #sub_business .studyList01 li:first-child {border-left:1px solid #ddd;} #sub_business .studyList01 li strong {display:block; font-size:30px; color:#ccc;} #sub_business .studyList01 li span {display:block; margin-top:5px; font-size:16px; color:#111;} #sub_business .studyList01 li a {display:inline-block; height:28px; padding:0 10px; margin-top:15px; border:1px solid #ddd; font-size:14px; line-height:28px;} #sub_business .studyList01 li a:after {content:""; display:inline-block; width:4px; height:28px; margin-left:10px; vertical-align:top; background:url(../images/common/iconBtnArrow01.png) no-repeat center center;} #sub_business section ul.halfBox > li ul li strong {display:block;} #sub_business section ul.halfBox > li ul li span {display:block; padding-left:7px;} #sub_business .manager {margin-top:30px;} #sub_business .manager dl {overflow:hidden; margin-bottom:10px; font-size:0;} #sub_business .manager dl dt, #sub_business .manager dl dd {display:inline-block; vertical-align:top; font-size:16px; line-height:1.8em; color:#111;} #sub_business .manager dl dt {padding-right:10px; font-weight:bold;} /* 3. 투자정보 */ #sub_invest {} #sub_invest p.guideTxt {font-size:13px; line-height:20px; color:#666;} #sub_invest .txt_box{padding:30px;border:1px solid #ddd;background:#fafafa;} #sub_invest .txt_box p.tit{font-size:18px;} #con-counsile section .tblType01 th {height:80px;} #con-counsile section .tblType01 td {height:auto; padding:20px 0;} #con-stockInfo02 section .stockDivBox > div {padding:0;} #con-stockInfo02 section .stockGraph {text-align:center;} #con-stockInfo02 section .stockGraph img {width:96%; max-width:348px; height:auto;} /* 4. 채용안내 */ #sub_career {} #sub_career .btnWrap {margin-top:80px;} #sub_career .fullBox {width:200%; margin-left:-50%; background:#94c93d;} #sub_career .fullBox .inner {width:48%; max-width:1140px; padding:45px 0; margin:0 auto;} #sub_career .fullBox .inner strong {display:block; text-align:center; font-size:60px; color:#fff;} #sub_career .fullBox .inner span {display:block; text-align:center; font-size:16px; color:#fff;} #sub_career ul.talent_conList {overflow:hidden;} #sub_career ul.talent_conList > li {overflow:hidden; padding:64px 0; border-top:1px solid #ddd;} #sub_career ul.talent_conList > li:first-child {border-top:0;} #sub_career ul.talent_conList > li .imgBox {float:left; width:380px; height:240px;} #sub_career ul.talent_conList > li .txtBox {float:left; width:760px; padding-left:70px;} #sub_career ul.talent_conList > li .txtBox .subTit {font-size:24px; font-weight:bold; line-height:28px;} #sub_career ul.talent_conList > li .txtBox ul {margin-top:20px;} #sub_career ul.talent_conList > li .txtBox ul li {font-size:16px; line-height:1.6em;} #sub_career ul.talent_conList > li .txtBox dl {margin-top:20px;} #sub_career ul.talent_conList > li .txtBox dl dt {margin-bottom:10px; font-size:16px; font-weight:bold; line-height:1.6em;} #sub_career ul.talent_conList > li .txtBox dl dd {font-size:16px; line-height:1.6em;} #sub_career .notiBox {position:relative; padding-left:114px; background:#0082d4 url(../images/sub/sub0401_ImgNotice.jpg) no-repeat left center;} #sub_career .notiBox .inner {padding:30px; background:#f5f5f5;} #sub_career .notiBox .inner strong {display:block; text-align:left; font-size:20px; color:#333;} #sub_career .notiBox .inner span {display:block; margin-top:10px; text-align:left; font-size:16px; color:#111;} #sub_career .dlType01 {margin:0; font-size:0;} #sub_career .dlType01 dt {display:inline-block; vertical-align:top; font-size:16px; font-weight:bold; line-height:1.8em;} #sub_career .dlType01 dd {display:inline-block; padding-left:5px; vertical-align:top; font-size:16px; line-height:1.8em;} #sub_career p.guideTxt01 {padding-left:72px; background:url(../images/sub/iconGuide01.png) no-repeat 40px top;} /* 5. 홍보센터 */ #sub_promotion {} #sub_promotion section .txtBoxType01 .ciImgBox {text-align:center;} #sub_promotion section .txtBoxType01 .ciImgBox img {width:100%; max-width:260px; height:auto;} #sub_promotion section ul.halfBox {border-top:1px solid #ddd; border-bottom:none;} #sub_promotion section ul.halfBox > li {padding:0;} #sub_promotion section ul.halfBox > li:nth-child(odd) {padding-right:25px;} #sub_promotion section ul.halfBox > li:nth-child(even) {padding-left:25px;} #sub_promotion section ul.halfBox > li p {min-height:180px;} #sub_promotion section ul.halfBox > li p.guideTxt {min-height:auto; margin-top:10px; font-size:14px; font-weight:bold; line-height:26px; color:#0091de;} /* 이수홍보영상 Ticker */ #fp-nav {display:none; position:fixed; top:50%; left:20px; z-index:100; width:111px;} #fp-nav .isuMovie {width: 136px;height: 117px;background:#99ca3b;padding:2px;} #fp-nav .isuMovie a {display:block;} #fp-nav .isuMovie .w1 {margin-top:1px;display:block;color:#ffffff;font-size:14px;line-height: 22px;text-align:center; padding-bottom:2px;} #fp-nav .isuMovie .w2 {/* margin-top:4px; */display:block;width: 132px;height: 88px;position:relative;} #fp-nav .isuMovie .w2 img {display:block;width: 132px;height: 88px;} #fp-nav .isuMovie .w2 .e1 {position:absolute; top:50%; left:50%; width:32px; height:32px; margin-top:-16px; margin-left:-16px; background:url(/images/hongbo_view02.png) no-repeat;} #fp-nav .isuMovie a:hover .w2 .e1 {background-position:0 -110px;} /* 사이트맵 팝업 */ #f-snb{position: relative;width: 100%;padding: 0;overflow: hidden;} #f-snb .container{width:100%} #f-snb .row{padding:20px 0;border-bottom: 1px solid #ddd;} #f-snb .tit{font-weight: bold;text-align: center;font-size: 20px;} #f-snb img{display: inline-block;width: auto;margin: 0 auto;} #f-snb .snb-desc{text-align: center;} #f-snb ul.menu-box{margin-top: 10px;} #f-snb ul.menu-box li{margin-bottom: 10px;} #f-snb ul.menu-box li .s-tit{display: block; font-size: 16px; /* float: left; */ font-weight: bold; width: 190px; text-align: left; padding-bottom: 10px;} #f-snb ul.menu-box li a{color: #4c4c4c;} #f-snb ul.menu-box li a:after{content:'|';margin: 0 10px;} #f-snb ul.menu-box li a:last-child:after{content:''} /* 생산공정 팝업 */ @keyframes aniArrow { 0% {opacity:0;} 50%{opacity:1;} 100%{opacity:0;} } .modal.factorial_layer .modal-header {border-bottom:0;} .modal.factorial_layer .modal-header h4.modal-title {float:none;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab {margin-top:11px; text-align:center; font-size:0;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li {display:inline-block; padding:0 20px; vertical-align:top; background:#00558a;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li > a {display:inline-block; height:50px; padding:0 10px; font-size:18px; line-height:50px; color:#fff;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li > ul {display:none; vertical-align:top;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li.active {color:#000; background:#fff;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li.active > a {color:#000;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li.active > ul {display:inline-block;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li > ul li {display:inline-block;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li > ul li a {display:inline-block; height:50px; padding:0 10px; font-size:13px; line-height:50px; color:#666; background:#fff;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li > ul li.active a {color:#0082d4;} .modal.factorial_layer .modal-body .factorialCon {position:relative; height:530px; padding-top:30px;} .modal.factorial_layer .modal-body .factorialCon .tabCon {display:none;} .modal.factorial_layer .modal-body .factorialCon .tabCon.active {display:block; overflow:hidden;} .modal.factorial_layer .modal-body .factorialCon .tabCon > img {opacity:0; transform:scale(0.9); transition:all 0.5s ease-out; -webkit-transition:all 0.5s ease-out;} .modal.factorial_layer .modal-body .factorialCon .tabCon > img.ani {opacity:1; transform:scale(1);} .modal.factorial_layer .modal-body .factorialCon h5 {position:absolute; top:0px; left:20px; z-index:1; text-align:left;} .modal.factorial_layer .modal-body .factorialCon h5 b {font-size:26px; font-weight:bold; color:#000;} .modal.factorial_layer .modal-body .factorialCon h5 span {opacity:0.5; padding-left:15px; font-size:13px; font-weight:bold; color:#000;} .modal.factorial_layer .modal-body .factorialCon .txtBox {position:absolute; bottom:25px; left:20px; z-index:1; width:50%; text-align:left;} .modal.factorial_layer .modal-body .factorialCon .txtBox .txt01 {font-size:20px; font-weight:bold; color:#00558a;} .modal.factorial_layer .modal-body .factorialCon .txtBox ul {margin-top:10px;} .modal.factorial_layer .modal-body .factorialCon .txtBox ul li {font-size:14px; line-height:20px; color:#666;} .modal.factorial_layer .modal-body .factorialCon .popMenu li {opacity:0; transform:scale(0.5); margin-top:30px; position:absolute; top:300px; left:100px; z-index:1; padding-bottom:13px; text-align:left; background:url(../images/sub/popLayerTicker.png) no-repeat left bottom; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out;} .modal.factorial_layer .modal-body .factorialCon .popMenu li.ani {opacity:1; transform:scale(1); margin-top:0;} .modal.factorial_layer .modal-body .factorialCon .popMenu li a {display:inline-block; height:30px; padding:0 10px; font-size:13px; line-height:30px; text-transform:uppercase; color:#fff; background:#99ca3b;} .modal.factorial_layer .modal-body .factorialCon .popLayer {display:none; position:absolute; top:50%; left:50%; z-index:1; width:524px; height:264px; margin:-132px 0 0 -262px; background:#002135;} .modal.factorial_layer .modal-body .factorialCon .popLayer .inBox {overflow:hidden; padding:10px;} .modal.factorial_layer .modal-body .factorialCon .popLayer .inBox .popClose {position:absolute; top:10px; right:15px; z-index:1;} .modal.factorial_layer .modal-body .factorialCon .popLayer .inBox > img {float:left; padding-right:20px;} .modal.factorial_layer .modal-body .factorialCon .popLayer .inBox p {opacity:0.5; text-align:left; font-size:14px; color:#fff;} .modal.factorial_layer .modal-body .factorialCon .popLayer .inBox p.popTit {opacity:1; padding-right:30px; font-size:22px; font-weight:bold;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow li {opacity:0; position:absolute; top:300px; left:100px; z-index:1; text-align:left;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow.ani li {opacity:1; transition:all 1s ease-in-out 0.8s; -webkit-transition:all 1s ease-in-out 0.8s;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow.ani li:nth-child(2) {transition:all 1s ease-in-out 1s; -webkit-transition:all 1s ease-in-out 1s;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow.ani li:nth-child(3) {transition:all 1s ease-in-out 1.2s; -webkit-transition:all 1s ease-in-out 1.2s;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow.ani li:nth-child(4) {transition:all 1s ease-in-out 1.4s; -webkit-transition:all 1s ease-in-out 1.4s;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow li i {display:inline-block; width:18px; height:9px; margin-left:-4px; vertical-align:top; animation:aniArrow 1s ease-in-out 0s infinite; -webkit-animation:aniArrow 1s ease-in-out 0s infinite;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow li i:nth-child(2) {margin-top:6px; animation:aniArrow 1s ease-in-out 0.1s infinite; -webkit-animation:aniArrow 1s ease-in-out 0.1s infinite;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow li i:nth-child(3) {margin-top:12px; animation:aniArrow 1s ease-in-out 0.2s infinite; -webkit-animation:aniArrow 1s ease-in-out 0.2s infinite;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow li i:nth-child(4) {margin-top:18px; animation:aniArrow 1s ease-in-out 0.3s infinite; -webkit-animation:aniArrow 1s ease-in-out 0.3s infinite;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow li i:nth-child(5) {margin-top:24px; animation:aniArrow 1s ease-in-out 0.4s infinite; -webkit-animation:aniArrow 1s ease-in-out 0.4s infinite;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow li i:nth-child(6) {margin-top:30px; animation:aniArrow 1s ease-in-out 0.5s infinite; -webkit-animation:aniArrow 1s ease-in-out 0.5s infinite;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow li.arrow01 i {background:url(../images/sub/factorial_arrow01.png) no-repeat center center;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow li.arrow02 i {background:url(../images/sub/factorial_arrow02.png) no-repeat center center;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow li.arrow02 i:nth-child(1) {margin-top:12px;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow li.arrow02 i:nth-child(2) {margin-top:6px;} .modal.factorial_layer .modal-body .factorialCon .aniContents .arrow li.arrow02 i:nth-child(3) {margin-top:0px;} .modal.factorial_layer .modal-body .factorialCon .aniContents .car li {position:absolute; z-index:1;} .modal.factorial_layer .modal-body .factorialCon .aniContents .car li i {display:inline-block; width:46px; height:35px; vertical-align:top;} .modal.factorial_layer .modal-body .factorialCon .aniContents .car li.car01 i {background:url(../images/sub/factorial_car01.png) no-repeat center center;} .modal.factorial_layer .modal-body .factorialCon .aniContents .car li.car02 i {background:url(../images/sub/factorial_car02.png) no-repeat center center;} @keyframes aniCar01 { /* np,bab */ 0% {top:242px; left:147px;} 20%{top:282px; left:239px;} 50%{top:282px; left:239px;} 70%{top:242px; left:147px;} 100%{top:242px; left:147px;} } @keyframes aniCar02 { /* ss,tdm,ipa */ 0% {opacity:0; top:272px; left:51px;} 20%{opacity:1; top:309px; left:138px;} 60%{opacity:1; top:309px; left:138px;} 80%{opacity:1; top:346px; left:225px;} 90%{opacity:0; top:346px; left:225px;} 100%{opacity:0; top:346px; left:225px;} } @keyframes aniCar03 { /* lab */ 0% {top:220px; left:95px;} 20%{top:266px; left:209px;} 50%{top:266px; left:209px;} 70%{top:220px; left:95px;} 100%{top:220px; left:95px;} } @keyframes aniCar04 { /* lab */ 0% {opacity:0; top:299px; left:185px;} 20%{opacity:1; top:307px; left:168px;} 60%{opacity:1; top:307px; left:168px;} 80%{opacity:1; top:323px; left:134px;} 90%{opacity:0; top:323px; left:134px;} 100%{opacity:0; top:323px; left:134px;} } #flayer-np .aniContents .car li.car01 {opacity:0; transition:all 1s ease-in-out 1s; -webkit-transition:all 1s ease-in-out 1s;} #flayer-np .aniContents .car.ani li.car01 {opacity:1; animation:aniCar01 8s ease-in-out 1s infinite; -webkit-animation:aniCar01 8s ease-in-out 1s infinite;} #flayer-ss .aniContents .car li:nth-child(1).car01 {opacity:0; top:256px; left:79px; transition:all 1s ease-in-out 0.8s; -webkit-transition:all 1s ease-in-out 0.8s;} #flayer-ss .aniContents .car li:nth-child(2).car01 {opacity:0; top:264px; left:65px; transition:all 1s ease-in-out 1s; -webkit-transition:all 1s ease-in-out 1s;} #flayer-ss .aniContents .car li:nth-child(3).car01 {opacity:0; top:272px; left:51px; transition:all 1s ease-in-out 1.4s; -webkit-transition:all 1s ease-in-out 1.4s;} #flayer-ss .aniContents .car.ani li:nth-child(1).car01 {opacity:1; top:296px; left:171px;} #flayer-ss .aniContents .car.ani li:nth-child(2).car01 {opacity:1; top:304px; left:157px;} #flayer-ss .aniContents .car.ani li:nth-child(3).car01 {opacity:1; animation:aniCar02 7s ease-in-out 1.4s infinite; -webkit-animation:aniCar02 7s ease-in-out 1.4s infinite;} #flayer-ss .aniContents .arrow li:nth-child(1) {top:253px; left:254px; transition:all 1s ease-in-out 0.8s; -webkit-transition:all 1s ease-in-out 0.8s;} #flayer-ss .aniContents .arrow li:nth-child(2) {top:328px; left:421px; transition:all 1s ease-in-out 1s; -webkit-transition:all 1s ease-in-out 1s;} #flayer-ss .aniContents .arrow li:nth-child(3) {top:338px; left:491px; transition:all 1s ease-in-out 1.4s; -webkit-transition:all 1s ease-in-out 1.4s;} #flayer-ss .aniContents .arrow li:nth-child(4) {top:351px; left:558px; transition:all 1s ease-in-out 1.4s; -webkit-transition:all 1s ease-in-out 1.4s;} #flayer-tdm .aniContents .car li:nth-child(1).car01 {opacity:0; top:256px; left:79px; transition:all 1s ease-in-out 0.8s; -webkit-transition:all 1s ease-in-out 0.8s;} #flayer-tdm .aniContents .car li:nth-child(2).car01 {opacity:0; top:264px; left:65px; transition:all 1s ease-in-out 1s; -webkit-transition:all 1s ease-in-out 1s;} #flayer-tdm .aniContents .car li:nth-child(3).car01 {opacity:0; top:272px; left:51px; transition:all 1s ease-in-out 1.4s; -webkit-transition:all 1s ease-in-out 1.4s;} #flayer-tdm .aniContents .car.ani li:nth-child(1).car01 {opacity:1; top:296px; left:171px;} #flayer-tdm .aniContents .car.ani li:nth-child(2).car01 {opacity:1; top:304px; left:157px;} #flayer-tdm .aniContents .car.ani li:nth-child(3).car01 {opacity:1; animation:aniCar02 7s ease-in-out 1.4s infinite; -webkit-animation:aniCar02 7s ease-in-out 1.4s infinite;} #flayer-tdm .aniContents .arrow li:nth-child(1) {top:253px; left:254px; transition:all 1s ease-in-out 0.8s; -webkit-transition:all 1s ease-in-out 0.8s;} #flayer-tdm .aniContents .arrow li:nth-child(2) {top:328px; left:421px; transition:all 1s ease-in-out 1s; -webkit-transition:all 1s ease-in-out 1s;} #flayer-tdm .aniContents .arrow li:nth-child(3) {top:338px; left:491px; transition:all 1s ease-in-out 1.4s; -webkit-transition:all 1s ease-in-out 1.4s;} #flayer-tdm .aniContents .arrow li:nth-child(4) {top:351px; left:558px; transition:all 1s ease-in-out 1.4s; -webkit-transition:all 1s ease-in-out 1.4s;} #flayer-ipa .aniContents .car li:nth-child(1).car01 {opacity:0; top:256px; left:79px; transition:all 1s ease-in-out 0.8s; -webkit-transition:all 1s ease-in-out 0.8s;} #flayer-ipa .aniContents .car li:nth-child(2).car01 {opacity:0; top:264px; left:65px; transition:all 1s ease-in-out 1s; -webkit-transition:all 1s ease-in-out 1s;} #flayer-ipa .aniContents .car li:nth-child(3).car01 {opacity:0; top:272px; left:51px; transition:all 1s ease-in-out 1.4s; -webkit-transition:all 1s ease-in-out 1.4s;} #flayer-ipa .aniContents .car.ani li:nth-child(1).car01 {opacity:1; top:296px; left:171px;} #flayer-ipa .aniContents .car.ani li:nth-child(2).car01 {opacity:1; top:304px; left:157px;} #flayer-ipa .aniContents .car.ani li:nth-child(3).car01 {opacity:1; animation:aniCar02 7s ease-in-out 1.4s infinite; -webkit-animation:aniCar02 7s ease-in-out 1.4s infinite;} #flayer-ipa .aniContents .arrow li:nth-child(1) {top:253px; left:254px; transition:all 1s ease-in-out 0.8s; -webkit-transition:all 1s ease-in-out 0.8s;} #flayer-ipa .aniContents .arrow li:nth-child(2) {top:328px; left:421px; transition:all 1s ease-in-out 1s; -webkit-transition:all 1s ease-in-out 1s;} #flayer-ipa .aniContents .arrow li:nth-child(3) {top:338px; left:491px; transition:all 1s ease-in-out 1.4s; -webkit-transition:all 1s ease-in-out 1.4s;} #flayer-ipa .aniContents .arrow li:nth-child(4) {top:351px; left:558px; transition:all 1s ease-in-out 1.4s; -webkit-transition:all 1s ease-in-out 1.4s;} #flayer-lab .aniContents .car li:nth-child(1).car01 {opacity:0; transition:all 1s ease-in-out 0.8s; -webkit-transition:all 1s ease-in-out 0.8s;} #flayer-lab .aniContents .car li:nth-child(2).car02 {opacity:0; top:294px; left:167px; transition:all 0.5s ease-in-out 1.4s; -webkit-transition:all 0.5s ease-in-out 1.4s;} #flayer-lab .aniContents .car li:nth-child(3).car02 {opacity:0; top:299px; left:185px; transition:all 0.5s ease-in-out 1.5s; -webkit-transition:all 0.5s ease-in-out 1.5s;} #flayer-lab .aniContents .car.ani li:nth-child(1).car01 {opacity:1; animation:aniCar03 8s ease-in-out 1s infinite; -webkit-animation:aniCar03 8s ease-in-out 1s infinite;} #flayer-lab .aniContents .car.ani li:nth-child(2).car02 {opacity:1; top:302px; left:152px;} #flayer-lab .aniContents .car.ani li:nth-child(3).car02 {opacity:1; animation:aniCar04 5s ease-in-out 1.5s infinite; -webkit-animation:aniCar04 5s ease-in-out 1.5s infinite;} #flayer-lab .aniContents .arrow li:nth-child(1) {top:245px; left:225px; transition:all 1s ease-in-out 0.8s; -webkit-transition:all 1s ease-in-out 0.8s;} #flayer-lab .aniContents .arrow li:nth-child(2) {top:316px; left:389px; transition:all 1s ease-in-out 1s; -webkit-transition:all 1s ease-in-out 1s;} #flayer-lab .aniContents .arrow li:nth-child(3) {top:338px; left:491px; transition:all 1s ease-in-out 1.2s; -webkit-transition:all 1s ease-in-out 1.2s;} #flayer-lab .aniContents .arrow li:nth-child(4) {top:351px; left:558px; transition:all 1s ease-in-out 1.4s; -webkit-transition:all 1s ease-in-out 1.4s;} #flayer-bab .aniContents .car li.car01 {opacity:0; top:242px; left:147px; transition:all 1s ease-in-out 1s; -webkit-transition:all 1s ease-in-out 1s;} #flayer-bab .aniContents .car.ani li.car01 {opacity:1; animation:aniCar01 8s ease-in-out 1s infinite; -webkit-animation:aniCar01 8s ease-in-out 1s infinite;} #flayer-bab .aniContents .arrow li:nth-child(1) {top:253px; left:254px; transition:all 1s ease-in-out 0.8s; -webkit-transition:all 1s ease-in-out 0.8s;} #flayer-bab .aniContents .arrow li:nth-child(2) {top:328px; left:421px; transition:all 1s ease-in-out 1s; -webkit-transition:all 1s ease-in-out 1s;} #flayer-bab .aniContents .arrow li:nth-child(3) {top:338px; left:491px; transition:all 1s ease-in-out 1.2s; -webkit-transition:all 1s ease-in-out 1.2s;} #flayer-bab .aniContents .arrow li:nth-child(4) {top:351px; left:558px; transition:all 1s ease-in-out 1.4s; -webkit-transition:all 1s ease-in-out 1.4s;} #flayer-np .popMenu li:nth-child(1) {top:145px; left:190px;} #flayer-np .popMenu li:nth-child(2) {top:95px; left:310px;} #flayer-np .popMenu li:nth-child(3) {top:180px; left:430px;} #flayer-np .popMenu li:nth-child(4) {top:105px; left:550px;} #flayer-np .popMenu li:nth-child(5) {top:250px; left:575px;} #flayer-np .popMenu li:nth-child(6) {top:170px; left:645px;} #flayer-np .popMenu li:nth-child(7) {top:105px; left:745px;} #flayer-ss .popMenu li:nth-child(1) {top:185px; left:225px;} #flayer-ss .popMenu li:nth-child(2) {top:210px; left:390px;} #flayer-ss .popMenu li:nth-child(3) {top:200px; left:655px;} #flayer-tdm .popMenu li:nth-child(1) {top:185px; left:225px;} #flayer-tdm .popMenu li:nth-child(2) {top:210px; left:390px;} #flayer-tdm .popMenu li:nth-child(3) {top:200px; left:655px;} #flayer-ipa .popMenu li:nth-child(1) {top:185px; left:225px;} #flayer-ipa .popMenu li:nth-child(2) {top:210px; left:390px;} #flayer-ipa .popMenu li:nth-child(3) {top:200px; left:655px;} #flayer-lab .popMenu li:nth-child(1) {top:145px; left:190px;} #flayer-lab .popMenu li:nth-child(2) {top:205px; left:325px;} #flayer-lab .popMenu li:nth-child(3) {top:180px; left:460px;} #flayer-lab .popMenu li:nth-child(4) {top:180px; left:665px;} #flayer-lab .popMenu li:nth-child(5) {top:240px; left:790px;} #flayer-bab .popMenu li:nth-child(1) {top:185px; left:225px;} #flayer-bab .popMenu li:nth-child(2) {top:145px; left:390px;} #flayer-bab .popMenu li:nth-child(3) {top:185px; left:655px;} /* 검색 */ .search_area{width:50%;margin: 0 auto;padding-top:30px;text-align:center;} /* === 게시판 공통스타일 === */ .board_top{overflow:hidden; padding-bottom:15px;} .board_top p{float:left; color:#1e1e1e; font-size:16px; line-height:17px;} .board_top div{float:right; overflow:hidden;} .board_top div select{float:left; border:1px solid #c3c3c3; width:78px; height:30px; line-height:30px;} .board_top div input{float:left; margin-left:4px; border:1px solid #c3c3c3; width:176px; height:30px; line-height:26px;} .board_top div a{float:left; margin-left:4px;} /* 게시판_리스트 */ .board_list{width:100%; border-top:1px solid #2a2a2a;} .board_list table{width:100%;} .board_list table thead th{background:#f5f5f5; border-bottom:1px solid #b4b4b4; font-size:14px; color:#222; line-height:43px; font-weight:700; text-align:center;} .board_list table tbody td{border-bottom:1px solid #dcdcdc; color:#888; line-height:20px; text-align:center; padding:10px 0} .board_list table tbody td.num{color:#666} .board_list table tbody td a{color:#444;} .board_list table tbody td a.new{background:url('../images/icon/icon_new.gif') no-repeat 100% 0; padding-right:20px;} .board_list table tbody td img{vertical-align:middle} /* 게시판_상세보기 */ .table-view{} .table-view .subject{padding-top:15px;padding-bottom:10px;} .table-view .port_title{font-size:18px;color:#008fd4;font-weight: 600;margin: 0;} .table-view .regdate{padding-bottom:15px;border-bottom: 1px solid #b4b4b4;} .table-view .regdate img{} .table-view .file{padding-top:10px;padding-bottom:10px;border-bottom: 1px solid #ddd;} .table-view .file a{color: #008fd4;} .table-view .content-area{min-height: 200px;} .table-view .content-area p{} .table-view .content-area p.img{margin-bottom: 20px;} .table-view .content-area .sm-tit{font-size: 18px;} .table-view .content-area .desc-txt{font-size: 18px;} .table-view .content-area .con-txt{font-size:16px} .table-view .content-area .con_v{text-align:left;font-size:14px} .table-btn{padding-bottom:10px} .table-btn .btn{transition: all 0.4s ease-in-out;font-weight: 700;} .table-btn .btn:hover{color:#fff} /* 게시판_글쓰기 */ .board_write{width:100%; border-top:1px solid #2a2a2a; margin-bottom:20px;} .board_write table{width:100%;} .board_write table tbody th{background:#f1f1f1; color:#222; border-bottom:1px solid #cacaca; font-weight:700; line-height:14px; padding:11px 0 11px 2%; vertical-align:middle; text-align:left;} .board_write table tbody th em{color:#c9274d;} .board_write table tbody td{border-bottom:1px solid #cacaca; word-break:break-all; line-height:14px; padding:11px 0 11px 10px;} .board_write table tbody td input[type=text]{width:97%; border:1px solid #d2d2d2; height:28px; line-height:28px;} .board_write table tbody td textarea{width:98%; border:1px solid #d2d2d2; height:100px} .board_write table tbody td.keyword{} .board_write table tbody td .keyword_01{display:inline-block; width:40%; overflow:hidden;} .board_write table tbody td .keyword_01 input{width:80%; float:left;} .board_write table tbody td .keyword_01 a{margin-left:3px; float:left; display:inline-block; background:#999 url('../images/icon/icon_close.png') no-repeat 50% 50%; text-indent:-999px; width:32px; height:32px} .board_write table tbody td .keyword_02{display:inline-block; width:39%; text-align:left;} .board_write table tbody td .keyword_02 .popOpen{margin-left:3px; float:left; display:inline-block; background:#3b81c3 url('../images/icon/icon_01.png') no-repeat 10px 50%; line-height:30px; height:30px; border:1px solid #276aaa; color:#fff; padding:0 10px 0 30px} .board_write .resi_date{border:none !important;} .board_write .file_upload{width:100%; overflow:hidden;} .board_write .file_upload img{float:left; padding-left:10px;} .board_write #file_sub{width:200px; border:1px solid #d2d2d2; background:#fff; float:left; vertical-align:top; margin-top:1px;} .board_write #real_file{display:none; float:left;} /* 이전글,다음글 */ .page_sec{width:100%; margin-bottom:20px; border-top:1px solid #b4b4b4; border-bottom:1px solid #b4b4b4;} .page_sec dl{width:100%;margin: 0;} .page_sec dl dt{border-top:1px solid #dcdcdc;background:#f1f1f1;line-height:22px;padding:10px 19px;color:#222;font-weight:700;text-align:left;vertical-align:middle;} .page_sec dl dt label{margin:0} .page_sec dl dd{border-top:1px solid #dcdcdc;line-height: 44px;padding: 0 21px;vertical-align:middle;} .page_sec dl dd a{color:#333} /* 페이징 */ .page_no{width:100%; height:32px; padding-top:30px; text-align:center;} .page_no a{display:inline-block; min-width:30px; height:30px; line-height:30px; text-align:center; margin:0; vertical-align:middle; border:1px solid #ccc; font-size:11px;} .page_no a.on{background-color:#777; border: 1px solid #777; color:#fff;} .page_no a:hover{background-color:#777; border:1px solid #777; color:#fff;} .page_no .pageBtn:hover{border:1px solid #dcdcdc; background:none;} /* 이하 반응형 미디어 쿼리 영역입니다..... */ @media all and (min-width: 769px) and (max-width: 1199px) { .subContainer ul.lnb-ho,.subContainer ul.lnb-ho1 {padding:1px 0 0;} #home-slider .slides {display:block; overflow:hidden; width:100%;} #home-slider .slides .slider {overflow:hidden; float:left; position:relative; width:100%;} #home-slider .slides .slider img {width:100%; height:auto; vertical-align:top;} #home-slider .slides .slider .txtBox {position:absolute; left:50%; z-index:1; width:395px; margin-left:-197px; text-align:left; color:#fff;} #home-slider .slides .slider .txtBox .txt01 {display:block; font-family:arial; font-size:38px; font-weight:bold; line-height:1em; text-transform:uppercase;} #home-slider .slides .slider .txtBox .txt02 {display:block; margin-top:15px; font-size:15px; line-height:1.5em;} #home .mainMenu {position:absolute; top:0; left:0; z-index:1000; width:100%; text-align:right; color:#fff;} #home .mainMenu ul li {position:relative; width:100%; height:120px; border-top:1px solid rgba(255,255,255,0.2);} #home .mainMenu ul li:first-child {border-top:1px solid rgba(255,255,255,0);} #home .mainMenu ul li a {display:block; width:100%; height:100%;} #home .mainMenu ul li a .menuTxt {padding:0 47px 0 0; font-size:18px;} #home .mainMenu ul li a .menuTxt:before {content:""; display:inline-block; width:27px; height:27px; margin-right:40px; vertical-align:top; background:url(../images/common/mainMenuIcon.png) no-repeat center center;} /* 20180607 혁민 수정 - start */ #home .mainMenu ul li a .menuBg {background:#fff url(../images/mainMenuVis01.jpg) no-repeat right center; background-size:auto 100%;} #home .mainMenu ul li:nth-child(1) a .menuBg {background:#fff url(../images/mainMenuVis01.jpg) no-repeat right center; background-size:auto 100%;} #home .mainMenu ul li:nth-child(2) a .menuBg {background:#fff url(../images/mainMenuVis02.jpg) no-repeat right center; background-size:auto 100%;} #home .mainMenu ul li:nth-child(3) a .menuBg {background:#fff url(../images/mainMenuVis03.jpg) no-repeat right center; background-size:auto 100%;} #home .mainMenu ul li:nth-child(4) a .menuBg {background:#fff url(../images/mainMenuVis04.jpg) no-repeat right center; background-size:auto 100%;} /* 20180607 혁민 수정 - end */ #home .mainMenu ul li a.active .menuTxt {color:#333;} #home .mainMenu ul li a.active .menuTxt:before {background:url(../images/common/mainMenuIcon_on.png) no-repeat center center;} #home .mainMenu ul li a.active .menuBg {opacity:1;} .productConBox {padding:30px;} .productConBox .prdName {width:30%;} .productConBox .prdInfo {width:70%;} } @media all and (max-width:768px){ /* iPad 세로모드 이하 (모바일 포함) */ .search_area{width:100%;margin: 0 auto;padding-top:30px;text-align:center;} #home-slider .slides {display:block; overflow:hidden; width:100%;} #home-slider .slides .slider {overflow:hidden; float:left; position:relative; width:100%; height:calc(100vh - 250px);} #home-slider .slides .slider img {width:auto; min-width:auto; vertical-align:top;} #home-slider .slides .slider .txtBox {position:absolute; left:20px; z-index:1; width:60%; margin-left:0; text-align:left; color:#fff;} #home-slider .slides .slider .txtBox .txt01 {display:block; font-family:arial; font-size:22px; font-weight:bold; line-height:1em; text-transform:uppercase;} #home-slider .slides .slider .txtBox .txt02 {display:block; margin-top:15px; font-size:16px; line-height:1.5em;} #home .mainMenu {position:absolute; top:0; left:0; z-index:1000; width:100%; text-align:right; color:#fff;} #home .mainMenu ul li {position:relative; width:100%; height:120px; border-top:1px solid rgba(255,255,255,0.2);} #home .mainMenu ul li:first-child {border-top:1px solid rgba(255,255,255,0);} #home .mainMenu ul li a {display:block; width:100%; height:100%;} #home .mainMenu ul li a .menuTxt {padding:0 10px 0 0; font-size:16px; line-height:20px;} #home .mainMenu ul li a .menuTxt:before {content:""; display:inline-block; width:20px; height:20px; margin-right:10px; background:url(../images/common/mainMenuIcon.png) no-repeat center center; background-size:cover;} /* 20180607 혁민 수정 - start */ #home .mainMenu ul li a .menuBg {background:#fff url(../images/mainMenuVis01.jpg) no-repeat 110% center; } #home .mainMenu ul li a .menuBg .tblCell span {max-width:100%; padding:0 20px; font-size:18px;} #home .mainMenu ul li:nth-child(1) a .menuBg {background:#fff url(../images/mainMenuVis01.jpg) no-repeat right center; background-size:auto 100%; background-position:150% bottom;} #home .mainMenu ul li:nth-child(2) a .menuBg {background:#fff url(../images/mainMenuVis02.jpg) no-repeat right center; background-size:auto 100%; background-position:150% bottom;} #home .mainMenu ul li:nth-child(3) a .menuBg {background:#fff url(../images/mainMenuVis03.jpg) no-repeat right center; background-size:auto 100%; background-position:150% bottom;} #home .mainMenu ul li:nth-child(4) a .menuBg {background:#fff url(../images/mainMenuVis04.jpg) no-repeat right center; background-size:auto 100%; background-position:150% bottom;} /* 20180607 혁민 수정 - end */ #home .mainMenu ul li a.active .menuTxt {color:#333;} #home .mainMenu ul li a.active .menuTxt:before {background:url(../images/common/mainMenuIcon_on.png) no-repeat center center;} #home .mainMenu ul li a.active .menuBg {opacity:1;} #content-page.subContainer {padding-bottom:50px;} .subContainer section p {font-size:14px; line-height:1.5em;} .subContainer .page-title.btnType a.btnMovie {top:20px; height:32px; padding:0 10px 0 15px; border-radius:15px; font-size:13px; line-height:30px; background:url(../images/sub/iconPlayMovie.png) no-repeat 8px center; background-size:16px;} .subContainer section .txtBoxType01 .decoLine {margin:20px auto 10px;} .subContainer section .txtBoxType02 .decoLine, .subContainer section .txtBoxType03 .decoLine {margin:20px 0 10px;} .subContainer section .txtBoxType01 .txt01 {font-size:22px;} .subContainer section .txtBoxType01 .txt02 {font-size:14px;} .subContainer section .txtBoxType02 .txt01 {font-size:14px; font-weight:bold;} .subContainer section .txtBoxType02 .txt02 {font-size:14px;} .subContainer section .txtBoxType03 .txt01 {font-size:20px;} .subContainer section .txtBoxType03 .txt02 {font-size:14px;} .subContainer section .conTit {margin:30px 0 15px; font-size:22px;} .subContainer section .tblType01 thead th {height:30px; font-size:13px;} .subContainer section .tblType01 tbody th, .subContainer section .tblType01 tbody td {height:30px; padding:0 5px; font-size:12px;} .subContainer section .tblType01 tfoot th, .subContainer section .tblType01 tfoot td {height:30px; padding:0 5px; font-size:12px;} .subContainer section .tblType01 td span {display:inline-block; width:100%; line-height:26px;} .subContainer section .tblType01 .txtL {text-align:left;} .subContainer .btnWrap li a {height:40px; padding:0 20px; border-radius:20px; font-size:14px; line-height:38px;} .subContainer .btnWrap li a i {height:38px;} .subContainer .btnWrap li a.btnType02 {font-size:18px;} #sub_company .fullBox {width:100%; margin-left:0;} #sub_company .fullBox .inner {width:96%;} .productConBox {padding:10px;} .productConBox .prdName {width:100%; height:auto;} .productConBox .prdName .inner {font-size:20px;} .productConBox .prdInfo {width:100%; height:auto;} .productConBox .prdInfo ul {padding:10px 0;} .productConBox .prdInfo ul li {padding:0 10px;} .productConBox .prdInfo ul li span {width:70%; font-size:14px;} .productConBox .prdInfo ul li em {width:30%; font-size:14px;} #con-product .fullBox .inner {padding:50px 0;} #con-product .fullBox .inner .tit {font-size:20px;} #con-product .fullBox .boxLeft {width:96%; height:auto;} #con-product .fullBox .boxLeft ul.portfolioGraph {margin-top:10px;} #con-product .fullBox .boxLeft ul.portfolioGraph li {padding:10px 0 15px;} #con-product .fullBox .boxLeft ul.portfolioGraph li em {height:36px; font-size:14px; line-height:18px;} #con-product .fullBox .boxLeft ul.portfolioGraph li .bar {height:100px; margin:15px auto;} #con-product .fullBox .boxLeft ul.portfolioGraph li strong {display:block; font-size:20px; color:#fff;} #con-life ul.lifeCategory li {width:25%; padding:0 5px;} #con-life ul.lifeCategory li .bgBox {height:350px; padding:10px;} #con-life ul.lifeCategory li:nth-child(1) .bgBox {background:#f5f7f8 url(../images/sub/sub0101_lifeImg01.jpg) no-repeat center bottom; background-size:contain;} #con-life ul.lifeCategory li:nth-child(2) .bgBox {background:#f5f7f8 url(../images/sub/sub0101_lifeImg02.jpg) no-repeat center bottom; background-size:contain;} #con-life ul.lifeCategory li:nth-child(3) .bgBox {background:#f5f7f8 url(../images/sub/sub0101_lifeImg03.jpg) no-repeat center bottom; background-size:contain;} #con-life ul.lifeCategory li:nth-child(4) .bgBox {background:#f5f7f8 url(../images/sub/sub0101_lifeImg04.jpg) no-repeat center bottom; background-size:contain;} #con-life ul.lifeCategory li strong {font-size:16px;} #con-life ul.lifeCategory li span {font-size:12px;} .historyWrap .infoBox .inner {padding:0 0 0 10px;} .historyWrap .infoBox .inner .txt01 {font-size:28px;} .historyWrap .infoBox .inner .txt02 {font-size:14px;} .historyWrap ul.timelineList > li {overflow:visible; padding-bottom:20px;} .historyWrap ul.timelineList > li .yearTxt {padding-left:20px; font-size:15px;} .historyWrap ul.timelineList > li ul {padding-left:20px;} .historyWrap ul.timelineList > li ul li {font-size:12px;} .greeting .txt01 {width:30%;} .greeting .txt02 {width:70%;} .greeting .txt01 p {font-size:16px;} .greeting .txt02 p {padding-bottom:20px; font-size:12px;} .greeting .txt02 p.signiture {font-size:12px;} .greeting .txt02 p.signiture strong {font-size:20px;} ul.opList {margin-top:10px; border-top:2px solid #0082d4;} ul.opList li {padding:15px 10px 5px;} ul.opList li .infoBox {padding-left:0;} ul.opList li .infoBox h4 {font-size:16px;} ul.opList li .infoBox p {font-size:13px;} ul.opList.ceo {margin-top:20px;} ul.opList.ceo li .infoBox {padding-left:0;} ul.opList.ceo li .infoBox h4 {font-size:16px;} .companyMap p.mapTit {margin-top:20px; font-size:18px;} .companyMap ul li {padding-top:20px;} .companyMap ul li:nth-child(odd) {padding-right:10px;} .companyMap ul li:nth-child(even) {padding-left:10px;} .companyMap ul li .txtBox {overflow:hidden; padding:20px 0;} .companyMap ul li .txtBox dl dt {font-size:14px;} .companyMap ul li .txtBox dl dd {font-size:13px; line-height:20px;} .companyMap ul li .txtBox dl dd span {padding-right:10px;} .companyMap.mainMap ul li {padding:20px 0 0;} .companyMap.mainMap ul li .txtBox dl dt {font-size:18px;} .companyMap.map02 {margin-top:15px; border-top:2px solid #000;} .opInfoBox .info01 {padding:10px; float:none; width:100%;} .opInfoBox .info01 .tBox {padding:10px; margin-top:10px; font-size:14px;} .opInfoBox .info01 .tBox strong {font-size:16px; line-height:20px;} .opInfoBox .info01 .tBox span {font-size:15px; line-height:20px;} .opInfoBox .info01 .tBox ul {margin-top:5px;} .opInfoBox .info01 .tBox ul li {font-size:15px; line-height:20px;} .opInfoBox .info02 {float:none; width:100%;} .opInfoBox .info02 ul.history {margin-top:20px; margin-left:0px;} .opInfoBox .info02 ul.history > li .yearTxt {width:60px; font-size:16px;} .opInfoBox .info02 ul.history > li ul li {padding-bottom:10px; font-size:14px;} .txtImgBox .tBox {float:none; width:100%;} .txtImgBox .tBox p {font-size:14px; line-height:22px;} .txtImgBox .tBox .subTit {margin-top:10px;} .txtImgBox .tBox ul li {font-size:14px; line-height:22px;} .txtImgBox .iBox {margin-top:10px; padding:8px; box-sizing:border-box; width:100%; float:none;} .txtImgBox img + img {margin-top:10px;} .opInfoBox.typeD .info02 ul {margin-left:10px;} .opInfoBox.typeD .info02 ul > li {padding:0 0 20px 40px;} .opInfoBox.typeD .info02 ul > li strong {font-size:16px;} .opInfoBox.typeD .info02 ul > li span {font-size:14px;} ul.volunteer > li {padding-bottom:20px;} ul.volunteer > li .imgBox {width:100%;} ul.volunteer > li .imgBox img {max-width:125px;} ul.volunteer > li .infoBox {width:100%; padding-left:0;} ul.volunteer > li .infoBox strong {display:block; font-size:14px; line-height:22px;} ul.volunteer > li .infoBox span {display:block; font-size:14px; line-height:22px;} ul.volunteer > li .infoBox ul li {font-size:14px; line-height:22px;} #sub_business .studyList01 li strong {font-size:20px;} #sub_business .studyList01 li span {height:42px; font-size:14px; line-height:21px;} #sub_business .studyList01 li a {height:23px; margin-top:10px; font-size:12px; line-height:23px;} #sub_business .studyList01 li a:after {height:23px; margin-left:5px;} #sub_business section ul.halfBox > li ul li strong {} #sub_business section ul.halfBox > li ul li span {padding-left:7px;} /* #sub_business .btnWrap li a.btnType01[data-target='.factorial_layer'] {display:none;} */ #con-stockInfo02 section .stockGraph {margin-top:20px;} #sub_career .fullBox {width:100%; margin-left:0;} #sub_career .fullBox .inner {width:96%; padding:20px 0;} #sub_career .fullBox .inner strong {font-size:24px;} #sub_career .fullBox .inner span {font-size:14px;} #sub_career ul.talent_conList > li {padding:20px 0;} #sub_career ul.talent_conList > li .imgBox {width:100%; height:auto;} #sub_career ul.talent_conList > li .txtBox {width:100%; height:auto; padding-left:0; margin-top:20px;} #sub_career ul.talent_conList > li .txtBox .subTit {font-size:18px;} #sub_career ul.talent_conList > li .txtBox ul {margin-top:10px;} #sub_career ul.talent_conList > li .txtBox ul li {font-size:14px;} #sub_career ul.talent_conList > li .txtBox dl dd {font-size:14px;} #sub_career .notiBox {padding-left:57px; background:#0082d4 url(../images/sub/sub0401_ImgNotice.jpg) no-repeat left center; background-size:57px;} #sub_career .notiBox .inner {padding:10px;} #sub_career .notiBox .inner strong {font-size:14px;} #sub_career .notiBox .inner span {margin-top:10px; font-size:12px;} #sub_career .btnWrap {margin-top:30px;} #sub_career .dlType01 dt {font-size:14px; line-height:1.5em;} #sub_career .dlType01 dd {font-size:14px; line-height:1.5em;} #sub_career p.guideTxt01 {height:auto; padding-left:32px; margin-top:10px; background:url(../images/sub/iconGuide01.png) no-repeat 0 top;} #sub_promotion section ul.halfBox > li:nth-child(odd) {padding-right:0;} #sub_promotion section ul.halfBox > li:nth-child(even) {padding-left:0;} #sub_promotion section ul.halfBox > li p {min-height:auto;} /* 레이어 팝업 */ .modal-open .modal.factorial_layer {overflow:auto; -webkit-overflow-scrolling:auto;} .modal .modal-header h4.modal-title b {font-size:18px;} .modal.valuechain_all .modal-body img {width:100%; min-width:570px;} } .modal-dialog {margin-left:auto !important; margin-right:auto !important;} .factorial_layer .modal-dialog {margin-top:10%;} .factorial_layer .modal-content {margin:0 auto;} @media all and (max-width:415px){ /* iPhone 6 Plus 이하 */ #footer {margin-top: 0;} #bottom-image {display:none;} #home-slider .slides .slider .imgBox {scale:(1.2);} .greeting .txt01 {float:none; width:100%;} .greeting .txt02 {float:none; width:100%; margin-top:20px;} .subContainer section ul.halfBox {border-bottom:0;} .subContainer section ul.halfBox > li {width:100%; padding:0 0 20px; border-bottom:1px solid #f5f5f5;} .subContainer section ul.halfBox > li ul li {font-size:14px;} .slick-dots {bottom:20px;} .slick-dots > li > button {width:8px; height:8px;} .slick-dots > li.slick-active > button {width:62px;} /* 20180607 혁민 수정 - start */ #home .mainMenu ul li a .menuBg .tblCell span {max-width:70%; padding:0 10px; margin:0; font-size:13px;} #home .mainMenu ul li:nth-child(1) a .menuBg {background:#fff url(../images/mainMenuVis01_m.jpg) no-repeat right center; background-size:auto 100%;} #home .mainMenu ul li:nth-child(2) a .menuBg {background:#fff url(../images/mainMenuVis02_m.jpg) no-repeat right center; background-size:auto 100%;} #home .mainMenu ul li:nth-child(3) a .menuBg {background:#fff url(../images/mainMenuVis03_m.jpg) no-repeat right center; background-size:auto 100%;} #home .mainMenu ul li:nth-child(4) a .menuBg {background:#fff url(../images/mainMenuVis04_m.jpg) no-repeat right center; background-size:auto 100%;} /* 20180607 혁민 수정 - end */ #con-life ul.lifeCategory li {width:100%; padding:5px;} #con-life ul.lifeCategory li .bgBox {height:auto; padding:10px;} #con-life ul.lifeCategory li:nth-child(1) .bgBox {background:#f5f7f8;} #con-life ul.lifeCategory li:nth-child(2) .bgBox {background:#f5f7f8;} #con-life ul.lifeCategory li:nth-child(3) .bgBox {background:#f5f7f8;} #con-life ul.lifeCategory li:nth-child(4) .bgBox {background:#f5f7f8;} #con-life ul.lifeCategory li strong {font-size:16px;} #con-life ul.lifeCategory li span {font-size:12px;} ul.familyList {margin-top:20px;} ul.familyList li:nth-child(2) {margin-top:10px;} ul.familyList li .imgBox {width:100%;} ul.familyList li .imgBox img {width:100%; max-width:200px; height:auto; vertical-align:top;} ul.familyList li .infoBox {width:100%; padding-left:0;} ul.familyList li .infoBox h4 {font-size:18px; font-weight:bold; line-height:1.8em; color:#111;} ul.familyList li .infoBox p {margin-top:0; font-size:12px; color:#333;} .opInfoBox .info01 {width:100%;} .opInfoBox .info02 {width:100%; margin-top:10px;} .opInfoBox .info02 ul.history > li .yearTxt {width:100%;} .txtImgBox .tBox {width:100%;} .txtImgBox .iBox {width:100%; padding:20px; margin-top:10px;} #sub_business .studyList01 li {width:100%;height: auto;border:0;border-bottom:1px solid #ddd;} #sub_business .studyList01 li:first-child {border:0; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} #sub_business .studyList01 li strong {font-size:20px; line-height:21px;} #sub_business .studyList01 li span {height: auto;} #sub_business .studyList01 li a {margin-top:5px;} /* #sub_business .btnWrap li a.btnType01[data-target='.factorial_layer'] {display:none;} */ .modal.factorial_layer .modal-header {border-bottom:0; padding-left:5px; height:94px;} .modal.factorial_layer .modal-header h4.modal-title {float:none;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab {margin-top:5px;text-align: left;font-size:0;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li {display:inline-block;padding:0 0px;vertical-align:top;background:#00558a;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li > a {display:inline-block;height:42px;padding: 0 5px;font-size:16px;line-height:42px;color:#fff;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li > ul {display:none; vertical-align:top;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li.active {color:#000; background:#fff; width:200px;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li.active > a {color:#000;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li.active > ul {display:block;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li > ul li {display:inline-block;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li > ul li a {display:inline-block;height:42px;padding: 0 2px;font-size:13px;line-height:42px;color:#666;background:#fff;} .modal.factorial_layer .modal-header h4.modal-title ul.factorialTab > li > ul li.active a {color:#0082d4;} .modal.factorial_layer .modal-body .factorialCon .popLayer {display:none;position:absolute;top:50%;left:50%;z-index:1;width: 300px;height:264px;margin:-132px 0 0 10px;background:#002135;} .modal.factorial_layer .modal-body .factorialCon .popLayer .inBox {overflow:hidden; padding:10px;} .modal.factorial_layer .modal-body .factorialCon .popLayer .inBox .popClose {position:absolute; top:10px; right:15px; z-index:1;} .modal.factorial_layer .modal-body .factorialCon .popLayer .inBox > img {float:none; padding-right:0px; height:75px;} .modal.factorial_layer .modal-body .factorialCon .popLayer .inBox p {opacity:0.5; text-align:left; font-size:13px; color:#fff;} .modal.factorial_layer .modal-body .factorialCon .popLayer .inBox p.popTit {opacity:1; padding-right:20px; font-size:16px; font-weight:bold;} .modal.factorial_layer .modal-header button.close {float:left; margin-right:5px; margin-top:5px;} .modal.factorial_layer .modal-header button.close img {width:36px;} .modal.factorial_layer .modal-dialog {margin-top:10px !important;} .modal.factorial_layer .modal-body .factorialCon h5 b {font-size:20px;} .modal.factorial_layer .modal-body .factorialCon .txtBox .txt01 {font-size:16px;} .modal.factorial_layer .modal-body .factorialCon .txtBox ul li {font-size:13px;} .modal.factorial_layer .modal-body .factorialCon .txtBox {width:300px; left:10px;} .modal.factorial_layer .modal-dialog {transition:none !important;} .sj_modal_open {height:100%; overflow:hidden;} } .sub_content .bt-sabo { position: relative; padding: 15px 50px; font-size: 23px; display:inline-block; margin-bottom: 1px; } .recr_btn_wrap {display:none;} @media all and (max-width:768px){ .recr_btn_wrap {display:block;} .recr_rt_btn_wrap {display:none;} } .recr_rt_btn_wrap {position: fixed; top: 50%; right: 20px; z-index: 100; width: 150px;} /*이수그룹소개 */ .company_logo{margin:50px 0;text-align:center;} .company_logo img{width:100%; max-width:547px} .box_group{background:#f7fafb;overflow:hidden;padding:30px 15px 20px 15px;} .box_group .area{float:left;width:16.66%;min-width:180px;padding:0 10px;min-height:265px;} .box_group .area > h4 span.txt{position:absolute;top:1px; margin-left:7px; } .box_group .area > p{margin-top:12px;} .box_group .area > p > img{width:100%;} .box_group .area > ul{margin-top:15px} .box_group .area > ul li{width:100%;} .box_group .area > ul li a i.more {display:block; position:absolute; top:8px; right:0px; z-index:1; width:14px; height:14px; background:url(../images/company/group_ico01.png) no-repeat center -42px; background-size:14px auto;} .box_group .area > ul li a:hover i.more {background-image:url(../images/company/group_ico01.png); background-position:center top; background-size:14px auto;} .box_group .area > ul li a{position:relative;} .box_group .area > ul li a:hover{color:#008fd5} @media (min-width: 768px) { .box_group .area > h4{font-size:15px;color:#333;font-weight:700;line-height:24px;position:relative} .box_group .area > h4 span.bg{display:inline-block;width:20px;height:20px;line-height:20px;font-size:12px;font-weight:900;letter-spacing:0px;color:#fff;background:#008fd5;text-align:center;} .box_group .area > ul li a{display:inline-block;padding:7px 5px;width:100%;font-size:14px;color:#666;font-weight:600;letter-spacing:-1px;line-height:18px;} } @media (max-width: 767px) { .box_group .area > h4{font-size:14px;color:#333;font-weight:700;line-height:24px;position:relative} .box_group .area > h4 span.bg{display:inline-block;width:24px;height:24px;line-height:22px;font-size:12px;font-weight:900;letter-spacing:0px;color:#fff;background:#008fd5;text-align:center;margin-right:4px;} .box_group .area{clear:both;width:100%;margin-bottom:30px;min-height:1px;padding-left:15px;;padding-right:15px;} .box_group .area > ul li a{display:inline-block;padding:7px 5px;width:100%;font-size:13px;color:#666;font-weight:700;letter-spacing:-1px;line-height:18px;} } .box_business{min-height:308px;overflow:hidden;padding:40px;background:url("../images/company/bg_box_business.jpg") 0 0 repeat;margin-top:40px;font-size:18px;color:#fff;font-weight:700;line-height:30px;letter-spacing:-1px;} /* // 이수그룹소개 */ @media (max-width: 767px) { /* 계열사 */ /*.familySite{background:#8ccbf2;}*/ body .familySite{background:#eee} body .allMenu_On{display:none; width:100%; margin:0 auto; padding:15px 0} body .allMenu_On ul{width:94%;overflow:hidden;margin:0 3%;} body .allMenu_On ul li{float:left; width:50%; padding-bottom:6px; background:transparent;} body .allMenu_On ul li a{color:#3b4145; font-size:14px; font-weight:500; display:block; line-height:40px; text-align:right;margin-right:7px;margin-left:7px;} body .allMenu_On ul li.posi_right a{margin:0;} /*#98d4fa*/ body .allMenu_On ul li#allMenu_bg01 a{background:#fff url('../images/common/allMenu_bg01.png') no-repeat 15px 10px; padding-left:0 !important;padding-right:15px;} body .allMenu_On ul li#allMenu_bg02 a{background:#fff url('../images/common/allMenu_bg02.png') no-repeat 27px 6px; padding-left:0 !important;padding-right:15px;} body .allMenu_On ul li#allMenu_bg03 a{background:#fff url('../images/common/allMenu_bg03.png') no-repeat 18px 6px; padding-left:0 !important;padding-right:15px;} body .allMenu_On ul li#allMenu_bg04 a{background:#fff url('../images/common/allMenu_bg04.png') no-repeat 22px 6px; padding-left:0 !important;padding-right:15px;} body .allMenu_On ul li#allMenu_bg05 a{background:#fff url('../images/common/allMenu_bg05.png') no-repeat 20px 5px; padding-left:0 !important;padding-right:15px;} body .allMenu_On ul li#allMenu_bg06 a{background:#fff url('../images/common/allMenu_bg06.png') no-repeat 23px 5px; padding-left:0 !important;padding-right:15px;} body .allMenu_On ul li#allMenu_bg07 a{background:#fff url('../images/common/allMenu_bg07.png') no-repeat 23px 6px; padding-left:0 !important;padding-right:15px;} body .allMenu_On ul li#allMenu_bg08 a{background:#fff url('../images/common/allMenu_bg08.png') no-repeat 23px 7px; padding-left:0 !important;padding-right:15px;} body .allMenu_On ul li#allMenu_bg09 a{background:#fff url('../images/common/allMenu_bg09.png') no-repeat 20px 6px; padding-left:0 !important;padding-right:15px;} body .allMenu_On ul li#allMenu_bg10 a{background:#fff url('../images/common/allMenu_bg10.png') no-repeat 25px 8px; padding-left:0 !important;padding-right:15px;} body .allMenu_On ul li#allMenu_bg11 a{background:#fff url('../images/common/allMenu_bg11.png') no-repeat 20px 7px; padding-left:0 !important;padding-right:15px;} body .allMenu_On ul li#allMenu_bg12 a{background:#fff url('../images/common/allMenu_bg12.png') no-repeat 23px 7px; padding-left:0 !important;padding-right:15px;} body .allMenu_On ul li#allMenu_bg13 a{background:#fff url('../images/common/allMenu_bg13.png') no-repeat 17px 7px; padding-left:0 !important;padding-right:15px;} } .com_movie_wrap {position:relative;} .com_movie_wrap img {display:block; width:100%;} .com_movie_wrap .play {background:url(../images/sub/mov_play_btn01.png) no-repeat; width:82px; height:82px; position:absolute; top:50%; left:50%; margin-top:-41px; margin-left:-41px;} .com_movie_wrap .play .blind {position:absolute; overflow:hidden; width:0px; height:0px; font-size:0; line-height:0;} @media (min-width: 768px) { .subContainer section .content_txt01{font-size:83px;color:#99cc33;font-weight:300;letter-spacing:2px;line-height:83px;margin-top:50px} .subContainer section .txt-sub{margin:40px 0 0 0;font-size:20px;color:#202020;letter-spacing:0;line-height:28px} } @media (max-width: 767px) { .subContainer section .content_txt01{font-size:46px;color:#99cc33;font-weight:300;letter-spacing:2px;line-height:60px;margin-top:30px} .subContainer section .txt-sub{margin:20px 0 0 0;font-size:15px;color:#202020;letter-spacing:0;line-height:1.4} .table-company tr th, .table-company tr td {font-size:13px;} } .table-company {margin-top:40px;} .table-company .name {color:#008acb; font-weight:bold;} .gloComImgTit {text-align:center; margin-top:70px;} .gloComImgTit img {display:inline-block; height:82px;} @media (max-width: 768px) { .gloComImgTit {margin-top:30px;} .gloComImgTit img {height:auto; width:240px;} } /* 홍보센터 > 소식알림 */ .brdTopLogoBox {float:right; padding-right:5px; text-align:right;} .brdTopLogoBox.viewType {float:none; width:100%;} .brdTopLogoBox a {display:inline-block; padding:15px 0; vertical-align:top;} .brdTopLogoBox a img {width:auto; height:18px; vertical-align:top;} .minfo01 {margin-top:10px !important; } .minfo01 p {font-size:15px !important; color:#666666 !important;} .minfo02 {margin-top:50px; margin-bottom:30px;} .minfo02 .p01 {font-size: 28px; font-weight: bold; color: #111;} .minfo02 .p02 {font-size:18px; } .mng01 {} .mng01 .mbg01:after {content:""; display:block; clear:both;} .mng01 .mbg01 img {display:block;} .mng01 .mbg01 .w1 {float:left;} .mng01 .mbg01 .w2 {float:right;} .mng01 .mbg01 .w1 img {width:80px;} .mng01 .mbg01 .w2 img {width:54px;} .mng01 ul li .bx01{border:1px solid #cccccc; } .mng01 ul li .bx01_in {padding:20px;} .mng01 ul li {float:left; padding: 20px; width:33.33%;} .mng01 ul {margin:-20px;} .mng01 ul:after {content:""; display:block; clear:both;} .mbg02 img {display:block; width:100%;} .mbg02 {height:20px; background:url('/img/mif_img03.png') no-repeat center 100%} .mng_txt01 .w1 {font-size:20px; line-height:28px; font-weight:bold; margin-bottom:16px;} .mng_txt01 dl {margin-top:8px; display:flex; flex-direction:row; margin-bottom:0px;} .mng_txt01 dl dt {font-size:14px; width:80px; flex-shrink:1;} .mng_txt01 dl dd {font-size:16px; flex-grow:1;} @media (max-width: 768px) { .minfo02 {margin-bottom:20px;} .mng01 ul {margin:-10px;} .mng01 ul li {width:50%; padding:10px;} .minfo02 .p01 {font-size:22px;} .minfo02 .p02 {font-size:15px;} } @media (max-width: 480px) { .mng01 ul {margin:-10px;} .mng01 ul li {width:100%; padding:10px;} }