/* common */ #subVisual { width: 100%; height: 465px; text-align: center; position: relative; color: #fff; } #subVisual > img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; min-width: 100%; min-height: 100%; z-index:-1;} #subVisual h2 { font-size:50px; font-weight: 700; padding-top: 185px; } #subVisual p { font-size:20px; margin-top: 15px; } #lnb { position: absolute; bottom: 0; left: 0; width: 100%; height: 75px; background:rgba(12,77,162,.85); z-index:5; overflow: hidden;} #lnb > a { display: none; } #lnb .menu { max-width:1360px; width: 100%; height: 100%; overflow: hidden; margin:0 auto; box-sizing:border-box; border-right:1px solid rgba(85,123,174,.7); } #lnb .menu li { float: left; height: 75px; box-sizing:border-box; border-left:1px solid rgba(85,123,174,.7); } .li2 li { width: 50%; } .li3 li { width: 33.33%; } .li4 li { width: 25%; } .li5 li { width: 20%; } #lnb .menu li a { display: table; width: 100%; height: 100%; font-size:18px; font-weight: 700; color: #fff; } #lnb .menu li a span { display: table-cell; vertical-align: middle; line-height: 120%; } #lnb .menu li.on a { background: #fff; color: #060a15; } #lnb .menu_m { display: none; } .subCont { width: 100%; /* max-width:1360px; */ margin: 90px auto 0; overflow: hidden; } .subCont h2 { text-align: center; overflow: hidden; color: #060a15; font-size:40px; line-height: 120%; font-weight: 900; } .subCont h2:after { content: ""; display: block; width: 45px; height: 5px; background: #0c4da2; margin:35px auto 0; } .subCont > article { margin: 55px auto 0; width:100%; max-width:1360px; overflow: hidden; padding-bottom: 100px; letter-spacing: -.5px; } .subCont > article.safetyPolicyCon { overflow: revert; } .subCont > article.wid { max-width:100%; } .btBn { width: 100%; height: 300px; background: url(/img/sub/bg_btBn.jpg) no-repeat center; background-size:cover; text-align: center; box-sizing:border-box; display: table; position: relative; } .btBn:before { content: ""; display: block; width: 2px; height: 55px; background: #0c4da2; position: absolute; top: -28px; left: 50%; margin-left:-1px; } .btBn dl { display: table-cell; vertical-align: middle; color: #fff; } .btBn dt { font-size:36px; font-weight: 700; line-height: 110%; } .btBn dd { font-size:20px; margin-top: 15px; line-height: 130%; } .tabMenu.sub { width: 100%; overflow: hidden; border:1px solid #ddd; box-sizing:border-box; } .tabMenu.sub li { float: left; border-left:1px solid #ddd; width: 20%; height:70px; display: table; box-sizing:border-box; cursor:pointer; text-align: center; font-size:18px; color: #84878d; } .tabMenu.tm2 li {width:50%;} .tabMenu.sub li:first-child { border-left:none; } .tabMenu.sub li a { display: table; width: 100%; height: 100%; } .tabMenu.sub li span { display: table-cell; vertical-align: middle; } .tabMenu.sub li.on { color: #333;background:#f6f6f6;font-weight:500;} .tabMenu.sub + .tabContent { margin-top: 50px; overflow: hidden; } /* tabFilter */ .tabFilter{ margin-bottom: 50px; } .tabFilter ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: -20px; } .tabFilter ul li{ position: relative; } .tabFilter ul li::before{ content: ""; width: 1px; height: 15px; background: #DDD; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .tabFilter ul li:first-of-type::before{ display: none; } .tabFilter ul li > *{ display: inline-flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 500; color: #888; line-height: 1.2; padding: 20px; } .tabFilter ul li.on > *{ color: #0C4DA2; } /* secBox */ .secBox section:not(:last-of-type){ margin-bottom: 70px; } @media screen and (max-width:1200px) { /* common */ .subCont > article { box-sizing:border-box; padding:0 15px 100px; } .btBn { height: 250px; box-sizing:border-box; padding:0 15px; } } @media screen and (max-width:650px) { /* common */ #subVisual { height: auto; padding:15% 15px; box-sizing:border-box; } #subVisual > img { height: 100%;} #subVisual h2 { font-size:40px; padding-top:30px; } #subVisual p { font-size:15px; margin-top: 10px; } #lnb { position: relative; width: 100%; height: 50px; background:rgba(12,77,162,1); overflow: visible; } #lnb > a { display: block; width: 100%; height: 50px; line-height: 50px; text-indent:10px; color: #fff; font-size:16px; position: relative; } #lnb > a:after { content: ""; display: block; width: 0; height: 0; position: absolute; top: 20px; right: 15px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #fff; } #lnb .menu { display: none; } #lnb .menu_m { display: none; width: 100%; overflow: hidden; border:1px solid #ddd; background: #fff; position: absolute; top: 50px; left: 0; z-index:100; } #lnb .menu_m li { float: none; width: 100%; height: 45px; border:none; border-top:1px solid #ddd; } #lnb .menu_m li:first-child { border-top:none; } #lnb .menu_m li a { display: block; font-size:15px; font-weight: 500; color: #444; width: 100%; height:100%; text-indent:10px; line-height: 45px; } .subCont { margin: 45px auto 0; } .subCont h2 { font-size:35px; } .subCont h2:after { margin-top: 20px; } .subCont > article { margin-top: 35px; padding-bottom:50px; } .btBn { height:auto; padding:15% 15px; } .btBn:before { height: 40px; top: -20px; } .btBn dt { font-size:25px; } .btBn dd { font-size:15px; margin-top: 10px; } /* tabFilter */ .tabFilter{ margin-bottom: 35px; } .tabFilter ul{ margin: -15px; } .tabFilter ul li::before{ height: 13px; } .tabFilter ul li > *{ font-size: 17px; padding: 15px; } /* secBox */ .secBox section:not(:last-of-type){ margin-bottom: 50px; } } /*******************************************************************/ .titDot { padding-left: 30px; overflow: hidden; position: relative; color: #060a15; font-size:28px; line-height:120%; font-weight: 700; } .titDot:before { content: ""; width:18px; height: 18px; box-sizing:border-box; border:5px solid #6a6e79; border-radius:50%; position: absolute; top: 8px; left: 0; } /* 기업소개 - 스템코 소개 */ .introCon .top { width: 100%; overflow: hidden; position: relative; } .introCon .top:before { content: "+"; display: block; width: 70px; height: 70px; line-height: 65px; text-align: center; font-size:40px; font-weight: 700; position: absolute; top: 0; left: 50%; margin-left: -35px; z-index:5; color: #fff; } .introCon .top:after { content: ""; display: block; width: 50px; height: 50px; background: #0c4da2; position: absolute; top: 10px; left: 50%; margin-left:-25px; transform:rotate(45deg); -webkit-transform:rotate(45deg); } .introCon .top p { float: left; width: 50%; height:70px; background: #6384b0; position: relative; } .introCon .top p:first-child { background: #8694a7; } .introCon .top p img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; } .introCon .tit { overflow: hidden; position: relative; padding-top: 30px; text-align: center; } .introCon .tit:before { content: ""; display: block; width: 2px; height: 10px; background: #e3e4e8; position: absolute; top: 0; left: 50%; margin-left:-1px; } .introCon .tit:after { content: ""; display: block; width: 18px; height: 18px; background: #fff; border:5px solid #d3d6db; box-sizing:border-box; border-radius:50%; position: absolute; top: 10px; left: 50%; margin-left:-9px;} .introCon .tit dt { color: #060a15; font-size:34px; line-height: 120%; } .introCon .tit dt span { display: block; color: #6a6e79; font-family: "Montserrat"; font-size:20px; margin-bottom: 5px; font-weight: 300; } .introCon .tit dd { margin-top: 20px; } .introCon .imgBox { overflow: hidden; margin-top: 60px; } .introCon .imgBox article { margin-top: 75px; overflow: hidden; position: relative; } .introCon .imgBox article > div { width: 50%; background: #fff; height: 310px; overflow: hidden; position: absolute; top: 0; box-sizing:border-box; padding:0 70px; } .introCon .imgBox i { display: block; font-style:normal; font-size:120px; line-height: 80%; font-weight: 900; font-family: "Montserrat"; color: #f3f3f4; position: absolute; top: 0; } .introCon .imgBox .txt { display: table; width: 100%; height: 100%; } .introCon .imgBox dl { display: table-cell; vertical-align: middle; } .introCon .imgBox dt { font-size:20px; font-weight: 700; line-height: 120%; } .introCon .imgBox dt em { display: block; color: #060a15; font-size:28px; line-height: 120%; margin-bottom: 20px; } .introCon .imgBox dd { margin-top: 15px; font-size:16px; line-height: 160%; } .introCon .imgBox dd span { display: block; } .introCon .imgBox article:first-child { margin-top: 0; } .introCon .imgBox article:nth-child(odd) img { float: left; } .introCon .imgBox article:nth-child(odd) > div { right: 0; } .introCon .imgBox article:nth-child(odd) i { right: 0; } .introCon .imgBox article:nth-child(even) img { float: right; } .introCon .imgBox article:nth-child(even) > div { left: 0; text-align: right; } .introCon .imgBox article:nth-child(even) i { left: 0; } .introCon .top_newbox * { box-sizing:border-box; font-family: "Noto Sans KR";} .introCon .top_newbox { position: relative; height: 260px; } .introCon .top_newbox:before { content: ""; display: block; width: 366px; height: 260px; position: absolute; top: 0; left: 50%; transform:translateX(-50%); z-index:5; background:url(/img/sub/bg_cpn_top.png) no-repeat;} .introCon .top_newbox:after {content:""; display:block; visibility:hidden; clear:both; height:0; } .introCon .top_newbox > div { position: relative; float:left; width:calc(50% - 60px); } .introCon .top_newbox .l_box { background-color:#112c51; height:70px; margin-top:28px; } .introCon .top_newbox .r_box { float:right; background-color:#6384b0; height:70px; margin-top:139px; } .introCon .top_newbox .txt_1 { width:474px; height:100%; display:flex; align-items: center; justify-content: center; color:#fff; font-weight:700; font-size:30px; letter-spacing:0.02em; } .introCon .top_newbox .txt_1 span { font-family: "Montserrat"; } .introCon .top_newbox .txt_2 { position: absolute; top: 0; right:60px; width:150px; height:100%; display:flex; align-items: center; justify-content: center; text-align:center; color:#fff; font-weight:400; font-size:18px; line-height:130%; } .introCon .top_newbox .txt_3 { display:none; height:0; width:0; } .introCon .top_newbox .r_box .txt_1 { float:right; } .introCon .top_newbox .r_box .txt_2 { left:60px; right:auto; } /*오시는길*/ .mapCon section:not(:last-of-type){ margin-bottom: 150px; } .mapCon dl { overflow: hidden; /* margin-top: 150px; */ } .mapCon dl:first-child { margin-top: 0; } .mapCon dt { float: left; padding-left:28px; position: relative; color: #060a15; font-size:28px; line-height:120%; font-weight: 700; display: inline-block; } .mapCon dt:before { content: ""; display: block; width: 18px; height: 18px; box-sizing:border-box; border-radius:50%; position: absolute; top: 8px; left: 0; border:5px solid #6a6e79; } .mapCon dd { float: left; margin-top:10px; color: #6a6e79; font-size:18px; font-family: "Montserrat", "Noto Sans KR"; position: relative; } .mapCon dd:before { content: ""; display: block; width: 1px; height: 18px; background: #cfd1d5; float: left; margin:0 15px; } .mapCon dt+dd { margin-left: 30px; } .mapCon dt+dd:before { display: none; } .mapCon section > article { margin-top: 25px; overflow: hidden; } .mapCon iframe { width: 100%; height:520px; } .mapCon .iconList { margin-top: 55px; overflow: hidden; } .mapCon .iconList li { float: left; width:33.3%; text-align: center; position: relative; box-sizing:border-box; padding:0 10px; } .mapCon .iconList li:before { content: ""; display: block; width: 1px; height: 235px; background: #dadcdd; position: absolute; top: 0; left: 0; } .mapCon .iconList li:first-child:before { display: none; } .mapCon .iconList li h3 { margin-top: 10px; color: #060a15; font-size:20px; font-weight: 700; line-height:120%; } .mapCon .iconList li p { margin-top: 15px; overflow: hidden; font-size:16px; color: #6a6e79; line-height:130%; } /*인사말*/ .greeCon .tit { width: 100%; overflow: hidden; display: block; position: relative; } .greeCon .tit:before { content: ""; display: block; width: 100%; height:336px; position: absolute; top: 40px; left: 0; background:url(/img/sub/bg_gree.gif) no-repeat; z-index:-1; } .greeCon .tit > img { float: left; margin-left: 157px; } .greeCon .tit > dl { margin:130px 0 0 55px; } .greeCon .tit dt { font-size:40px; color: #060a15; font-weight: 700; line-height:120%; } .greeCon .tit dt span { display: block; font-size:46px; margin-top: 10px; } .greeCon .tit dt span img { display: inline-block; vertical-align: top; margin-right: 10px; } .greeCon .tit dd { margin-top: 20px; color: #6a737f; font-size:22px; font-weight: 700; line-height:130%; } .greeCon .tit dd:last-child { font-size:18px; font-weight: 500; } .greeCon h3 { margin-top: 50px; color: #3c3d41; font-size:24px; line-height:140%; font-weight: 700; font-family: "Montserrat", "Noto Sans KR"; } .greeCon h3 span { color: #0c4da2; } .greeCon p { margin-top: 35px; color: #565961; font-size:17px; line-height:160%; } .greeCon p.point { margin-top: 50px; color: #060a15; font-size:22px; font-weight: 700; line-height:150%; } /*비전*/ .vsCon { overflow: hidden; } .vsCon .tit { overflow: hidden; text-align: center; } .vsCon .tit dt { color: #060a15; font-size:34px; line-height:120%; font-weight: 700; } .vsCon .tit dd { margin-top: 20px; color: #6a6e79; font-size:20px; line-height:120%; letter-spacing: -.5px; } .vsCon > article { margin-top: 35px; width: 100%; background:url(/img/sub/bg_vision.gif) no-repeat center top; overflow: hidden; padding-bottom: 100px; } .vsCon .visionBox { width: 1360px; margin: 0 auto; overflow: hidden; position: relative; padding-bottom: 160px; } .vsCon .visionBox:before { content: ""; display: block; width: 100%; height: 100%; background:url(/img/sub/bg_vsLine.png) no-repeat center 175px; position:absolute; top: 0; left: 0; z-index:5; } .vsCon .visionBox h3 { background:url(/img/sub/tit_vision.png) no-repeat center top; height: 711px; text-align: center; overflow: hidden; transform: scale(0.5); transition: transform 700ms; } .vsCon .visionBox h3 img { margin-top: 295px; } .vsCon .visionBox h3 p { margin-top: 10px; color: #060a15; font-size:32px; line-height:120%; font-weight: 700; } .vsCon .visionBox > div { position: absolute; z-index:10; transition: transform 700ms; } .visionBox > div i { display: block; width: 120px; height: 120px; border-radius:50%; position: relative; } .visionBox > div i img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; } .visionBox dt { font-size:28px; line-height:120%; font-weight: 700; letter-spacing: -.5px; } .visionBox dd { position: relative; padding-left: 15px; font-size:18px; line-height:150%; color: #060a15; } .visionBox dd:before { content: ""; display: block; width: 7px; height: 7px; border-radius:50%; position: absolute; top: 10px; left: 0; background: #bfbfc0; } .vs1Txt { top: 110px; left: 0; transform: translateX(-100px); } .vs1Txt i { background: #3e94ce; float: right; margin-left: 95px; } .vs1Txt dl { float: left; margin:50px 0 0 85px; } .vs1Txt dt { color: #3e94ce; margin-bottom: 10px; } .vs2Txt { top: 110px; right: 80px; transform: translateX(100px); } .vs2Txt i { background: #3eaace; float: left; } .vs2Txt dl { float: left; margin:50px 0 0 85px; } .vs2Txt dt { color: #3eaace; margin-bottom: 10px; } .vs3Txt { bottom: 60px; left: 50%; margin-left: -60px; transform: translateX(100px); } .vs3Txt i { background: #5b8dca; float: left; } .vs3Txt dl { float: left; position: relative; padding-left:190px; margin-top: 45px; } .vs3Txt dt { color: #5b8dca; top: 0; left: 95px; position: absolute; } .aos-animate .visionBox h3{ transform: scale(1); } .aos-animate .visionBox > div{ transform: translate(0, 0) !important; } /*.vsCon > article{ background:url(/img/sub/bg_vision.jpg) no-repeat center bottom; margin-top: 35px; width: 100%;overflow: hidden; padding-bottom:100px } .vsCon{ padding-bottom:0 !important; } .vsCon .visionBox{ margin:100px auto 0; width: 1360px; overflow: hidden; position: relative; padding-bottom: 160px; } .vsCon .visionBox h3{ background:url(/img/sub/vision_circle_bg.png) no-repeat center top; height:646px; text-align: center; overflow: hidden; line-height:1; } .vsCon .visionBox h3 img{ margin-top:200px; } .vsCon .visionBox h3 p{ font-size:34px; color:#060a15; font-weight:400; margin-top:30px; } .vsCon .visionBox h3 p span{ font-weight:700; color:#0c4da2; } .vsCon .visionBox > div { position: absolute; z-index:10; } .visionBox > div i { display: block; width: 120px; height: 120px; border-radius:50%; position: relative; } .visionBox > div i img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; } .visionBox dt { font-size:28px; line-height:120%; font-weight: 700; letter-spacing: -.5px; } .visionBox dd { position: relative; padding-left: 15px; font-size:18px; line-height:150%; color: #060a15; } .visionBox dd:before { content: ""; display: block; width: 7px; height: 7px; border-radius:50%; position: absolute; top: 10px; left: 0; background: #bfbfc0; } .vsCon .visionBox .vs1Txt{ top:80px; left:75px; } .vsCon .visionBox .vs2Txt{ top:80px; right:30px; } .vsCon .visionBox .vs3Txt{ bottom:284px; left:30px; margin-left:0; } .vsCon .visionBox .vs4Txt{ bottom:285px; right:95px; } .vsCon .visionBox .vs5Txt{ bottom:0px; left:594px; } .vsCon .visionBox .vs3Txt dl{ float:none; padding-left:0; margin-top:0; } .vsCon .visionBox dl.right *{ text-align:right; } .vsCon .visionBox dl.left *{ text-align:left; } .vsCon .visionBox dt{ font-size:22px; font-weight:700; } .vsCon .visionBox .vs1Txt dt{ color:#0c4a9f; } .vsCon .visionBox .vs2Txt dt{ color:#3b8ec9; } .vsCon .visionBox .vs3Txt dt{ color:#3cbdc8; position:static; } .vsCon .visionBox .vs4Txt dt{ color:#ac7da3; } .vsCon .visionBox .vs5Txt dt{ color:#5a8bc8; } .vsCon .visionBox dd{ font-size:17px; font-weight:300; color:#5b606d; padding-left:0; margin-top:20px; } .vsCon .visionBox dd:before{ display:none; } */ /*미션*/ .subCont > article.msCon{max-width:100%;background:url(/img/sub/bg_mission.jpg) no-repeat center bottom;padding-bottom:435px;} .msCon { overflow: hidden; } .msCon h3 { color: #6a6e79; font-size:20px; line-height:120%; text-align: center; } .msCon h3 span { display: block; color: #060a15; font-size:34px; line-height:120%; font-weight: 700; margin-top: 5px; } .msCon p.img100{text-align:center;} .msCon > article { margin-top: 30px; } .msCon > article dl:before{content:"";width:1px;height:68px;position:absolute;top:0;background:#a6a8af;} .msCon > article dl {position:relative; overflow: hidden; /*background: #f3f3f4;*/text-align: center; padding:90px 0 50px; font-family: "Montserrat"; } .msCon > article dt { color: #0c4da2; font-size:70px; line-height:100%; font-weight: 700; } .msCon > article dd { color: #060a15; font-size:18px; line-height:120%; margin-top: 10px; font-weight: 400; } .msCon ul { overflow: hidden; } .msCon ul li { float: left; width:25%; overflow: hidden; position: relative; } .msCon ul li img { width: 100%; } .msCon ul li p { position: absolute; bottom: 0; left: 0; width: 100%; height:60px; background: rgba(29,29,33,.7); line-height:60px; color: #fff; text-align: center; font-size:19px; font-weight: 700; } .msCon .conBx{ width:1270px; margin:100px auto 0; } .msCon .conBx .tit{ text-align:center; color:#060a15; font-size:34px; font-weight:700; position:relative; } .msCon .conBx .tit:before{ content:''; display:block; width:100%; height:1px; background:#a6a8af; position:absolute; left:0; top:50%; } .msCon .conBx .tit span{ display:inline-block; background:#fff; padding:0 50px; position:relative; z-index:2; } .msCon .conBx > div{ margin-top:30px; border:1px solid #e0e3ea; box-sizing:border-box; background:#fff; padding:25px; position:relative; } .msCon .conBx > div:before{ content:''; display:block; width:35px; height:35px; border-radius:50%; background:#fff; box-sizing:border-box; border:5px solid #dce1e7; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; } /* IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .msCon .conBx > div:before{ margin-top:-13px; margin-left:-1px; } } .msCon .conBx > div:after{ content:''; display:block; clear:both; } .msCon .conBx > div > div{ float:left; width:50%; } .msCon .conBx dl{ min-height:300px; box-sizing:border-box; position:relative; } .msCon .conBx dl:before{ } .msCon .conBx .ms1Txt dl{ padding:40px 0 0 30px; border-right:1px solid #e0e3ea; border-bottom:1px solid #e0e3ea; background:url(/img/sub/msCon_txt1.png) no-repeat 99.5% 96.7%; } .msCon .conBx .ms2Txt dl{ padding:40px 0 0 220px; border-bottom:1px solid #e0e3ea; background:url(/img/sub/msCon_txt2.png) no-repeat 1% 96.7%; } .msCon .conBx .ms3Txt dl{ padding:60px 0 0 30px; border-right:1px solid #e0e3ea; background:url(/img/sub/msCon_txt3.png) no-repeat 99.3% 3.3%; } .msCon .conBx .ms4Txt dl{ padding:60px 0 0 220px; background:url(/img/sub/msCon_txt4.png) no-repeat 1% 3.3%; } .msCon .conBx dl dt{ font-size:20px; font-weight:700; color:#333; } .msCon .conBx dl dt em{ font-family: 'Montserrat', sans-serif; font-size:40px; display:inline-block; margin-right:25px; } .msCon .conBx .ms1Txt dl dt em{ color:#093d86 } .msCon .conBx .ms2Txt dl dt em{ color:#5381bf } .msCon .conBx .ms3Txt dl dt em{ color:#389cc0 } .msCon .conBx .ms4Txt dl dt em{ color:#3887bf } .msCon .conBx dl dd{ margin-top:35px; } .msCon .conBx dl dd p{ font-size:16px; color:#6a6e79; letter-spacing:0; margin-bottom:25px; padding-left:20px; box-sizing:border-box; position:relative; } .msCon .conBx dl dd p:before{ content:''; display:block; width:5px; height:5px; border-radius:50%; background:#6a6e79; position:absolute; left:0; top:7px; } @media screen and (max-width:1200px){ .msCon .conBx{ width:100%; } .msCon .conBx > div:before{ display:none; } .msCon .conBx dl{ background-size:20% !important; } .msCon .conBx .ms2Txt dl, .msCon .conBx .ms4Txt dl{ padding-left:17%; } .msCon .conBx .ms1Txt dl{ background-position:right bottom; } .msCon .conBx .ms2Txt dl{ background-position:left bottom; } .msCon .conBx .ms3Txt dl{ background-position:right top; } .msCon .conBx .ms4Txt dl{ background-position:left top; } } @media screen and (max-width:960px){ .msCon .conBx > div{ border:none; } .msCon .conBx > div > div{ float:none; width:100%; border:1px solid #e0e3ea; margin:10px 0; } .msCon .conBx .ms1Txt dl{ border-right:none; border-bottom:none; } .msCon .conBx .ms2Txt dl{ border-bottom:none; } .msCon .conBx .ms3Txt dl{ border-right:none; } } @media screen and (max-width:650px){ .msCon .conBx dl{ padding:14% 0 0 30px !important; } .msCon .conBx dl dt em{ font-size:30px; margin-right:10px; } } /*연혁*/ .hisCon > nav { width: 100%; height:100px; background: #888c96; overflow: hidden; opacity:.9999; } .hisCon .tabMenu { overflow: hidden; text-align: center; margin-top: 25px; font-size:0; font-family: "Montserrat"; position: relative; } .hisCon .tabMenu:before { content: ""; display: block; width: 80%; height: 1px; background: #fff; position: absolute; top: 37px; left: 10%; } .hisCon .tabMenu li { display: inline-block; vertical-align: top; margin:0 48px; color: #fff; font-size:20px; font-weight: 400; min-width:120px; position:relative; padding-bottom: 30px; cursor:pointer; } .hisCon .tabMenu li:before { content: ""; display: block; width: 8px; height: 8px; border-radius:50%; background: #fff; position: absolute; bottom: 6px; left: 50%; margin-left: -4px; } .hisCon .tabMenu li:after { content: ""; display: none; width: 20px; height: 20px; box-sizing:border-box; border-radius:50%; border:1px solid #fff; position: absolute; bottom: 0; left: 50%; margin-left:-10px; } .hisCon .tabMenu li.on:after { display: block; } .hisCon .tit { width: 100%; height:265px; display: table; background: url(/img/sub/bg_history.jpg) no-repeat center; background-size:cover; text-align: center; position: relative; z-index:-1; } .hisCon .tit h3 { display: table-cell; vertical-align: middle; color: #fff; font-family: "Montserrat"; font-size:60px; font-weight: 700; line-height:120%; } .hisCon .listBox { box-sizing:border-box; width: 100%; position: relative; } .hisCon .listBox:before { content: ""; display: block; width: 1px; height: calc(100% + 70px); background: #cfcfcf; position: absolute; top: -70px; left: 50%; margin-left:-.5px; z-index:-1; } .hisCon .listBox:after { content: ""; display: block; clear:both; } .hisCon .listBox > div { float: left; overflow: hidden; margin-top: 110px; } .hisCon .listBox > div p{ } .hisCon .listBox > div p:nth-child(odd) { margin-bottom:60px; } .hisCon .listBox > div p:nth-child(even) { margin:60px 0 60px; } .hisCon .listBox > div p img{ max-width:100%; } .hisCon .listBox ul { float: right; width:calc(50% + 10px); overflow: hidden; margin-top: 100px; } .hisCon .listBox li { overflow: hidden; position: relative; margin-top: 50px; } .hisCon .listBox li:first-child { margin-top: 0; } .hisCon .listBox li:before { content: ""; display: block; width: 10px; height: 10px; background: #cfcfcf; position: absolute; top: 21px; left: 5px; } .hisCon .listBox li:after { content: ""; display: none; width: 16px; height: 16px; border:1px solid #0c4da2; position: absolute; top: 17px; left: 1px; } .hisCon .listBox dl { padding-left:100px; position: relative; } .hisCon .listBox dl:before { content: ""; display: block; width: 70px; height: 1px; background: #cfcfcf; position: absolute; top: 25px; left: 10px; } .hisCon .listBox dt { font-family: "Montserrat"; color: #060a15; font-size:40px; font-weight: 700; line-height:120%; } .hisCon .listBox dt+dd { margin-top: 20px; } .hisCon .listBox dd { overflow: hidden; width: 100%; display: table; margin-top: 10px; } .hisCon .listBox dd em { display: table-cell; vertical-align: top; font-family: "Montserrat"; font-size:16px; font-weight: 300; width:35px; color: #060a15; line-height:1.3; } .hisCon .listBox dd span { display: table-cell; vertical-align: top; font-size:16px; color: #6a6e79; line-height:1.3; } .hisCon .listBox li:first-child:before, .hisCon .listBox li:first-child dl:before { background: #0c4da2; } .hisCon .listBox li:first-child:after { display: block; } /*응용제품*/ .appCon > p { text-align: center; font-size:20px; line-height:130%; color: #6a6e79; } .appCon ul { margin-top: 80px; overflow: hidden; } .appCon li { float: left; width:48%; margin:0 0 50px 4%; text-align: center; } .appCon li:nth-child(odd) { margin-left: 0; } .appCon li img { width: 100%; } .appCon li p { margin-top:15px; font-size:20px; color: #6a6e79; line-height:120%; } /*제품소개*/ .pdCon { overflow: hidden; } .pdCon .secBox section:not(:last-of-type){ margin-bottom: 90px; } /* .pdCon h3 { margin-top: 90px; } */ .pdCon h3:first-child { margin-top: 0; } .pdCon .secBox article, .pdCon > article { overflow: hidden; margin-top: 10px; position: relative; font-size:16px; } .pdCon .img { width:840px; height:370px; box-sizing:border-box; border:1px solid #ddd; z-index:-1; position: absolute; top: 0; right: 0; overflow: hidden; } .pdCon .img img { float: right; margin:60px 40px 0 0; } .pdCon .img.img01 { border:none; } .pdCon .img.img01 img { float: right; margin:0; } .pdCon .grayTxt { margin:100px 0 0 15px; width:680px; height:330px; background: #f7f7f7; box-sizing:border-box; } .pdCon .grayTxt dl { overflow: hidden; margin-left:-7px; } .pdCon .grayTxt dt { margin-top: 25px; position: relative; overflow: hidden; width:100%; box-sizing:border-box; padding-left:50px; color: #060a15; line-height:140%; padding-right:10px; letter-spacing:-0.05em; } .pdCon .grayTxt dt:first-child { margin-top: 60px; } .pdCon .grayTxt dt:before { content: ""; display: block; width: 14px; height: 14px; border-radius:50%; background: #0c4da2; position: absolute; top: 5px; left: 0; } .pdCon .grayTxt dt:after { content: ""; display: block; width: 35px; height: 1px; background: #0c4da2; position: absolute; top: 12px; left: 0; } .pdCon .grayTxt dt+dd { margin-top: 25px; } .pdCon .grayTxt dd { margin:0 0 12px 65px; color: #6a6e79; font-weight: 300; line-height:120%; position: relative; padding-left:15px; } .pdCon .grayTxt dd:before { content: ""; display: block; width: 6px; height: 6px; background:#666; border-radius:50%; position: absolute; top: 6px; left: 0; } .pdCon .grayTxt dd.list { padding:0; } .pdCon .grayTxt dd.list:before { display:none; } .pdCon .grayTxt dd.list li { position: relative; margin:10px 0 0 0; padding-left:15px; color:#6a6e79; font-weight:300; letter-spacing:-0.05em; font-size:16px; line-height:160%; } .pdCon .grayTxt dd.list li span { font-size:15px; } .pdCon .grayTxt dd.list li:first-child { margin:-10px 0 0 0; } .pdCon .grayTxt dd.list li:before { content: ""; display: block; width: 6px; height: 6px; background:#666; border-radius:50%; position: absolute; top: 10px; left: 0; } .pdCon .productTxt p{ padding:10px 30px; color:#6a6e79; font-weight:500; letter-spacing:-0.05em; font-size:18px; line-height:150%; } .pdCon .productTxt p span { color:#858995; font-weight:400; letter-spacing:-0.05em; font-size:16px; line-height:150%;} .pdCon .productTxt ul{ padding:0 30px; } .pdCon .productTxt li { position: relative; margin:2px 0 0 0; padding:0 0 0 20px; color:#858995; font-weight:400; letter-spacing:-0.05em; font-size:16px; line-height:170%; } .pdCon .productTxt li:before { content: ""; display: block; width: 5px; height: 5px; background: #c2c4ca; position: absolute; top: 10px; left: 0; } .btn_inquiry { text-align:center; margin:90px 0 0 0; } .btn_inquiry a { display:inline-block; width:200px; padding:18px 0; text-align:center; color:#fff; font-weight:700; letter-spacing:-0.02em; font-size:20px; background-color:#0c4da2; } .subtabmenu ul { text-align:center; margin:60px auto 100px; display: flex; justify-content: center; align-items: stretch; /* border-right:1px solid #e0e0e0;*/ /* max-width:1000px; */ max-width:750px; border-top:1px solid #e0e0e0;} .subtabmenu li { width:250px; border:1px solid #e0e0e0; box-sizing:border-box; /* border-right:none; */ border-left:none; border-top:none;} .subtabmenu li:first-child { border-left:1px solid #e0e0e0; } .subtabmenu li a { background-color:#fff; display: block; width: 100%; padding: 12px 10px; color: #999; font-size: 18px; font-weight: 400; background-color: #fff; display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 100%;} .subtabmenu li.on a { color:#fff; background-color:#0c4da2; border:1px solid #0c4da2; } .dataTable { margin:25px 0 0 0; border-top:1px solid #0c4da2; } .dataTable dl { display:table; width:100%; border-bottom:1px solid #e0e0e0; } .dataTable dt { display:table-cell; width:195px; vertical-align:middle; color:#333; font-size:18px; font-weight:500; letter-spacing:-0.05em; padding:0 0 0 36px; box-sizing:border-box; } .dataTable dd { display:table-cell; width:calc(100% - 195px); padding:20px 32px; color:#6a6e79; font-size:16px; line-height:160%; font-weight:400; letter-spacing:-0.05em; border-left:1px solid #e0e0e0; box-sizing:border-box; } .dataTable dd .imgbox { margin:20px 0 0 0; } .dataTable dd .imgbox li { display:inline-block; vertical-align:top; text-align:center; font-weight:400; margin:0 0 0 30px; } .dataTable dd .imgbox li:first-child { margin:0 0 0 0; } .dataTable dd .imgbox li span { display:block; margin:10px 0 0 0; } .dataTable dd .imgbox li.img { padding:76px 0 0 0; } /*환경보고서*/ .rpCon { overflow: hidden; text-align: center; } .rpCon dl { overflow: hidden; } .rpCon dl dt { font-size:34px; line-height:130%; color: #060a15; font-weight: 700; } .rpCon dl dt span { display: block; } .rpCon dl dd { margin-top: 20px; color: #6a6e79; font-size:20px; line-height:120%; } .rpCon .img { margin-top: 60px; overflow: hidden; } .rpCon .img li { float: left; width:50%; overflow: hidden; } .rpCon .img li img { width: 100%; } .rpCon .btn { margin-top: 70px; text-align: center; } .rpCon .btn li { display: inline-block; vertical-align: top; width:345px; margin:0 20px; } .rpCon .btn li a { display: block; width: 100%; height:75px; text-align: center; line-height:75px; color: #fff; font-size:24px; font-weight: 700; background: #252525; border-radius:7px; } .rpCon .btn li:first-child a { background: #0c4da2; } .rpCon .btn li a img { display: inline-block; vertical-align: top; margin:19px 0 0 25px; } /*분쟁지역 광물 사용지침*/ .guideCon { position: relative; letter-spacing: -.5px; } .guideCon:before { content: ""; display: block; width: 100%; height:calc(100% - 265px); background: url(/img/sub/bg_guide.gif) no-repeat center; background-size:cover; position: absolute; bottom: 0; left: 0; z-index:-1; } .guideCon > article { width: 1360px; margin: 0 auto; } .guideCon h3 { text-align: center; color: #060a15; font-size:34px; font-weight: 700; line-height:120%; } .guideCon h3 span { color: #0c4da2; font-size:30px; } .mineral { margin-top: 85px; overflow: hidden; padding-top: 5px; } .mineral li { float:left; width:178px; height:178px; margin:0 8px; box-sizing:border-box; border-radius:50%; background: #0c4da2; position: relative; border:10px solid #fff; display: table; box-shadow:0 0 5px rgba(0,0,0,.2); } .mineral li p { display: table-cell; vertical-align: middle; color: #fff; font-size:30px; font-weight: 700; text-align: center; line-height:100%; } .mineral li p span { display: block; font-size:24px; font-weight: 500; line-height:120%; margin-top: 4px; } .guideCon h4 { margin-top: 130px; color: #fff; font-size:34px; line-height:120%; font-weight: 700; } .guideCon h4 span { color: #5182c2; font-weight: 500; } .guideCon .list { padding:50px 0 245px; overflow: hidden; } .guideCon .list li { overflow: hidden; margin-top: 70px; } .guideCon .list li:first-child { margin-top: 0; } .guideCon .list i { float: left; width:77px; height:77px; border-radius:50%; border:1px solid rgba(255,255,255,.5); box-sizing:border-box; text-align: center; line-height:75px; color: #fff; font-family: "Montserrat"; font-size:30px; font-weight: 700; font-style:normal; } .guideCon .list dl { float: right; width:calc(100% - 115px); overflow: hidden; font-size:20px; margin-top: 10px; } .guideCon .list dt { color: #fff; font-weight: 300; line-height:120%; } .guideCon .list dd { color: #9097a4; font-weight: 300; line-height:140%; margin-top: 8px; } /*환경안전 방침*/ .planCon { position: relative; } .planCon:before { content: ""; display: block; width: 1146px; height:462px; background: url(/img/sub/dot_plan.png) no-repeat; position: absolute; top: 137px; left: 50%; margin-left: -573px; z-index:1; } .planCon .tit { width: 639px; height: 737px; background: url(/img/sub/tit_plan.gif) no-repeat top center; margin: 0 auto 100px; overflow: hidden; text-align: center; display: table; opacity:.9999; transform: scale(0.5); transition: transform 700ms; } .planCon .tit h3 { display: table-cell; vertical-align: middle; color: #060a15; font-size:28px; line-height:130%; } .planCon .tit h3 span { display: block; font-size:34px; line-height:120%; font-weight: 700; text-transform: uppercase; } .planCon > article { position: absolute; width: 100%; height:100%; top: 0; left: 0; } .planCon > article > div { position: absolute; z-index:5; } .planCon i { display: block; width:110px; height:110px; border-radius:50%; background: #0c4da2; position: relative; } .planCon i img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; } .planCon dl { clear:both; padding-top: 20px; } .planCon dt { color: #0c4da2; font-size:28px; line-height:120%; font-weight: 700; } .planCon dt+dd { margin-top: 15px; } .planCon dd { color: #6a6e79; font-size:16px; line-height:120%; position: relative; text-align: left; margin-top: 5px; padding-left:15px; } .planCon dd:before { content: ""; display: block; width: 6px; height: 6px; border-radius:50%; background: #6a6e79; position: absolute; top: 6px; left: 0; } .planCon .box{ transition: transform 700ms; } .planCon .box1 { top: 80px; left: 0; transform: translateX(-100px); } .planCon .box2 { top: 540px; left: 0; transform: translateX(-100px); } .planCon .box3 { top: 80px; right: 0; text-align: right; transform: translateX(100px); } .planCon .box4 { top: 540px; right: 0; text-align: right; transform: translateX(100px); } .planCon .box3 i, .planCon .box4 i { float: right; } .planCon .aos-animate .tit{ transform: scale(1); } .planCon .aos-animate .box{ transform: translate(0, 0) !important; } /*안전 보건 현황*/ .safetyCon { overflow: hidden; } .safetyCon h3 { margin-top: 30px; } .safetyCon h3:first-child { margin-top: 0; } .safetyCon > article { margin-top: 25px; overflow: hidden; position: relative; min-height:460px; } .safetyCon > article > img { position: absolute; top: 0; z-index:-1; } .safetyCon > article > ul { margin-top: 60px; width:680px; box-sizing:border-box; position: relative; opacity:.9999; padding:60px 0; } .safetyCon > article.box > ul { min-height:600px; } .safetyCon > article > ul:before { content: ""; display: block; width: calc(100% - 15px); height: 100%; background: #f7f7f7; position: absolute; top: 0; left: 15px; z-index:-1; } .safetyCon > article > ul:after { content: ""; display: block; width: 136px; height: 100%; background: #fff; position: absolute; top: 0; left: 70px; z-index:-1; } .safetyCon li { width: 100%; overflow: hidden; margin-top: 20px; } .safetyCon li i { font-style:normal; display: block; width: 30px; height: 30px; box-sizing:border-box; border-radius:50%; background: #0c4da2; color: #e4e8f3; line-height:30px; text-align: center; font-family: "Montserrat"; font-size:16px; font-weight: 700; position: relative; float: left; } .safetyCon li i:after { content: ""; display: block; width: 28px; height: 1px; background: #0c4da2; position: absolute; top: 15px; right: -28px; } .safetyCon li img { float: left; margin:10px 0 0 60px; } .safetyCon li dl { float: left; margin:10px 0 0 60px; overflow: hidden; width: calc(100% - 275px); } .safetyCon li dt { color: #060a15; font-size:24px; line-height:120%; font-weight: 700; margin-bottom: 10px; } .safetyCon li dt span {color: #6a6e79; font-size:16px; font-weight: 400; } .safetyCon li dd { font-size:16px; color: #6a6e79; line-height:150%; position: relative; padding-left:45px; font-weight: 300; word-break:keep-all } .safetyCon li dd em { color: #0c4da2; font-weight: 700; display: block; position: absolute; top: 0; left: 0; } .safetyCon li .dot dd { padding-left:12px; } .safetyCon li .dot dd:before { content: ""; display: block; width: 6px; height: 6px; border-radius:50%; background: #666; position: absolute; top: 10px; left: 0; } .safetyCon > .left > img { left: 0; } .safetyCon > .right > img { right: 0;} .safetyCon > .left > ul { float: right; } .safetyCon > .right > ul { float: left; } /*경영방침*/ .mqCon { width: 100%; background: url(/img/sub/bg_mq.gif) no-repeat center; background-size:cover; } .subCont > article.mqCon{ padding-bottom:250px; } .mqCon > article { width: 1360px; margin: 0 auto; position: relative; } .mqCon .tit { margin: 25px auto 0; width:698px; height: 646px; overflow: hidden; background: url(/img/sub/mana_bg.png) no-repeat; text-align: center; transform: scale(0.5); transition: transform 700ms; } .mqCon .tit h3 { margin-top: 210px; } .mqCon .tit h3 img { height:32px; } .mqCon .tit dl { margin-top: 20px; } .mqCon .tit dd { font-size:34px; font-weight: 400; color: #060a15; line-height:130%; } .mqCon .tit dd em { color: #0c4da2; font-weight: 700; } .mqCon .listBox dl { position: absolute; transition: transform 700ms; } .mqCon .listBox dt { font-size:22px; font-weight: 700; line-height:120%; } .mqCon .listBox dd { margin-top: 20px; color: #5b606d; font-size:17px; font-weight: 300; line-height:150%; } .mqCon .li1 { top: 83px; left: 95px; text-align: right; padding-right: 30px; transform: translateX(-100px); } .mqCon .li1 dt { color: #0c4a9f; } .mqCon .li2 { top: 80px; right: 35px; padding-left: 30px; transform: translateX(100px); } .mqCon .li2 dt { color: #3b8ec9; } .mqCon .li3 { bottom: 122px; left: 42px; text-align: right; padding-right: 30px; transform: translateX(-100px); } .mqCon .li3 dt { color: #3ca8cc; } .mqCon .li4 { bottom: 100px; right: 30px; padding-left: 30px; transform: translateX(100px); } .mqCon .li4 dt { color: #ac7da3; } .mqCon .li5 { bottom:-145px; left:595px; transform: translateY(100px); } .mqCon .li5 dt { color:#5a8bc8; } .mqCon .aos-animate .tit{ transform: scale(1); } .mqCon .aos-animate .listBox dl{ transform: translate(0, 0) !important; } /*품질방침*/ .mq2Con { width: 100%; overflow: hidden; background: url(/img/sub/bg_mq2.gif) no-repeat center; background-size:cover; } .mq2Con > article { width: 1360px; height: 650px; margin: 0 auto; overflow: hidden; background:url(/img/sub/img_mq2.png) no-repeat center 40px; position: relative; } .mq2Con .tit { width:286px; height:286px; background: #0c4da2; border-radius:50%; margin: 180px auto 0; overflow: hidden; text-align: center; transform: scale(0.5); transition: transform 700ms; } .mq2Con .tit h3 { margin-top: 100px; } .mq2Con .tit p { color: #fff; margin-top: 15px; font-size:23px; font-weight: 700; line-height:120%; } .mq2Con .listBox div { position: absolute; z-index:5; transition: transform 700ms; } .mq2Con .listBox p { float: left; width: 163px; height: 163px; border-radius:50%; overflow: hidden; text-align: center; box-shadow:-5px 3px 3px rgba(0,0,0,.2); } .mq2Con .listBox p img { margin: 40px auto 0; } .mq2Con .listBox p span { display: block; margin-top: 8px; font-size:18px; font-family: "Montserrat"; font-weight: 800; text-transform: uppercase; color: #fff; } .mq2Con .listBox dl { float: left; margin:30px 0 0 45px; } .mq2Con .listBox dt { font-size:22px; font-weight: 700; line-height:120%; } .mq2Con .listBox dd { margin-top: 15px; color: #5b606d; font-size:17px; line-height:150%; } .mq2Con .icon1 { top: 50px; right: 130px; transform: translateX(100px); } .mq2Con .icon1 p { background: #3c90ca; } .mq2Con .icon1 dt { color: #3b8ec9; } .mq2Con .icon2 { top: 245px; left: 40px; transform: translateX(-100px); } .mq2Con .listBox .icon2 p { background: #3ca7cc; float: right; } .mq2Con .listBox .icon2 dl { margin:30px 45px 0 0; text-align: right; } .mq2Con .icon2 dt { color: #3ca8cc; } .mq2Con .icon3 { bottom: 50px; right: 130px; transform: translateX(100px); } .mq2Con .icon3 p { background: #5687c7; } .mq2Con .icon3 dt { color: #598ac9; } .mq2Con .aos-animate .tit{ transform: scale(1); } .mq2Con .aos-animate .listBox div{ transform: translate(0, 0); } /*윤리경영*/ .eth1Con .tit { text-align: center; } .eth1Con .tit dt { color: #060a15; font-size:34px; font-weight: 700; line-height:120%; } .eth1Con .tit dd { margin-top: 25px; line-height:130%; color: #6a6e79; font-size:20px; } .eth1Con .tit dd span { display: block; } .eth1Con .process { margin-top: 70px; overflow: hidden; padding-bottom:140px; background: url(/img/sub/bg_eth1.gif) no-repeat center bottom; text-align: center; } .eth1Con .process li { display: inline-block; vertical-align: top; padding:10px; margin:0 18px; } .eth1Con .process li > div { width:188px; height:188px; display: table; box-sizing:border-box; border-radius:50%; box-shadow:0 5px 5px rgba(0,0,0,.2); } .eth1Con .process li > div > div { display: table-cell; vertical-align: middle; } .eth1Con .process li > div p { margin-top: 10px; color: #fff; font-size:18px; font-weight: 700; line-height:120%; } .eth1Con .icon1 { background: #0c4da2; } .eth1Con .icon2 { background: #5687c7; } .eth1Con .icon3 { background: #3ca7cc; } .eth1Con .icon4 { background: #3c90ca; } .eth1Con aside { width: 735px; height: 110px; box-sizing:border-box; background: #9ea9b9; border-radius:30px; margin: 10px auto 0; box-shadow:0 5px 5px rgba(0,0,0,.2); overflow: hidden; } .eth1Con aside i { display: block; float: left; margin:20px 0 0 135px; } .eth1Con aside p { float: left; color: #fff; font-size:18px; line-height:150%; font-weight: 700; margin:30px 0 0 25px; } /*윤리규정*/ .eth2Con > article { overflow: hidden; margin-top: 90px; } .eth2Con > article:first-child { margin-top: 0; } .eth2Con .txt { float: left; overflow: hidden; width: 795px; } .eth2Con .txt > div { margin:20px 0 0 30px; overflow: hidden; } .eth2Con .txt p { color: #6a6e79; font-size:18px; line-height:150%; font-weight: 500; } .eth2Con .txt ul { margin-top: 35px; overflow: hidden; } .eth2Con .txt li { color: #858995; font-size:16px; line-height:130%; position: relative; padding-left:25px; margin-bottom: 10px; } .eth2Con .txt li:before { content: ""; display: block; width: 5px; height: 5px; background: #c2c4ca; position: absolute; top: 9px; left: 0; } .eth2Con .txt dt { margin: 35px 0 10px; overflow: hidden; color: #757882; font-size:18px; font-weight: 500; line-height:120%; position: relative; padding-left:25px; } .eth2Con .txt dt:before { content: ""; display: block; width: 5px; height: 5px; background: #c2c4ca; position: absolute; top: 9px; left: 0; } .eth2Con .txt dd { margin-left:25px; overflow: hidden; color: #858995; font-size:16px; line-height:160%; } .eth2Con .img { float: right; width:478px; } .eth2Con .img p { margin-top: 45px; } .eth2Con .img p:first-child { margin-top: 0; } /* 사회공헌 */ .socialCon dl dd{ line-height: 1.5; } .socialCon .flex-box{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 70px 0 -70px; } .socialCon .flex-box > *{ width: calc((100% - 60px) / 2); margin-bottom: 70px; } .socialCon .item figure{ display: block; margin: 0; } .socialCon .item figure img{ width: 100%; } .socialCon .item .text{ margin-top: 20px; } .socialCon .item .text strong{ display: block; font-size: 24px; font-weight: 600; color: #060A15; line-height: 120%; } .socialCon .item .text p{ font-size: 18px; font-weight: 300; color: #6A6E79; line-height: 150%; margin-top: 10px; } /*상담 및 제보*/ .eth3Con .img, .eth3Con .img img { width: 100%; } .eth3Con h3 { margin-top: 50px; position: relative; color: #060a15; font-size:28px; line-height:120%; font-weight: 700; padding-left:25px; } .eth3Con h3:before { content: ""; display: block; width: 8px; height: 8px; border-radius:50%; background: #6a6e79; position: absolute; top: 14px; left: 0; } .eth3Con h3+p { color: #6a6e79; font-size:18px; line-height:150%; margin:10px 0 0 25px; } .eth3Con .process { margin: 25px 0 0 25px; overflow: hidden; } .eth3Con .process li { float: left; width: 302px; margin-left: 35px; } .eth3Con .process li:first-child { margin-left: 0; } .eth3Con .process li div { } .eth3Con .process li dl { background: #f3f3f3; height:100px; overflow: hidden; } .eth3Con .process li dt { float: left; width: 100px; height: 100%; position: relative; } .eth3Con .process li dt img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; } .eth3Con .process li dd { float: left; width:calc(100% - 100px); height:100%; overflow: hidden; box-sizing:border-box; padding:20px; color:#5d5e60; font-size:16px; line-height:120%; word-break:keep-all; } .eth3Con .process li:first-child dt { background: #0c4da2; } .eth3Con .process li:nth-child(2) dt { background: #3ca7cc; } .eth3Con .process li:nth-child(3) dt { background: #5687c7; } .eth3Con .process li:last-child dt { background: #3c90ca; } .eth3Con .box:after { content:''; display:block; clear:both; } .eth3Con .box ul { float: left; width:auto; margin:20px 0 0 25px; } .eth3Con .box li { color: #6a6e79; font-size:18px; font-weight: 500; line-height:120%; position: relative; padding-left:20px; margin-bottom: 10px; } .eth3Con .box li:before { content: ""; display: block; width: 7px; height: 1px; background: #888b94; position: absolute; top: 12px; left: 0; } .eth3Con .box dl { float: right; margin-top: -20px; width:500px; /*height:170px;*/ background: #9ea9b9; overflow: hidden; box-sizing:border-box; padding:30px 40px; color: #fff; } .eth3Con .box dt { font-size:26px; font-weight: 700; line-height: 120%; } .eth3Con .box dd { font-size:16px; line-height:120%; margin-top: 10px; padding-left:25px; position: relative; } .eth3Con .box dt+dd { margin-top: 20px; } .eth3Con .box dd img { position: absolute; top: 3px; left: 0; } .eth3Con .box .openPop { margin-top: 20px; padding: 0; } .eth3Con .box .openPop a { display: block; line-height: 51px; font-size: 20px; font-weight: 700; text-align: center; color: #fff; background: #0c4da2; border-radius: 5px; } /*제보팝업*/ #popWrap { padding: 35px 4.65%; letter-spacing: -0.05em; } #popWrap h1 { padding-bottom: 15px; font-size: 32px; color: #060a15; letter-spacing: -0.03em; font-weight: 700; border-bottom: 1px solid #e2e3e3; } #popWrap h1 span { display: inline-block; font-weight: 400; } #popWrap .txt { margin: 18px 0 15px; font-size: 16px; color: #6a6e79; line-height: 1.6em; } #popWrap .privacy { height: 425px; padding: 27px 20px 17px 30px; background: #f4f4f4; overflow-y: scroll; box-sizing: border-box; } #popWrap .privacy h2 { margin-bottom: 15px; font-size: 19px; } #popWrap .privacy dl { padding-bottom: 15px; } #popWrap .privacy dt { padding-bottom: 10px; font-size: 16px; color: #060a15; font-weight: 400; } #popWrap .privacy dd { line-height: 1.46em; color: #6a6e79; font-weight: 100; } #popWrap .agree { padding: 20px 0; margin-bottom: 24px; font-size: 18px; color: #060a15; border-bottom: 1px solid #e2e3e3; } #popWrap .agree:after { content: ''; display: block; clear: both; } #popWrap .agree div { float: right; font-size: 15px; color: #6a6e79; } #popWrap .agree label { display: inline-block; } #popWrap .agree label:first-child { margin-right: 16px; } #popWrap .star { color: #f00; } #popWrap .tbl_top { margin-bottom: 5px; text-align: right; font-size: 14px; color: #060a15; font-weight: 300; } .form_tbl { border-top: 2px solid #060a15; } .form_tbl th, .form_tbl td { height: 54px; padding: 7px 9px; border-bottom: 1px solid #a9b6c6; box-sizing: border-box; } .form_tbl th { width: 125px; font-size: 17px; color: #060a15; text-align: center; font-weight: 700; background: #f0f2f5; } .form_tbl .input, .form_tbl textarea { display:block; width: 100%; height: 40px; line-height: 40px; padding: 0 15px; font-size: 14px; letter-spacing: -0.05em; font-weight: 300; color: #6a6e79; border: 1px solid #d1d6dd; border-radius: 5px; box-sizing: border-box; } .form_tbl textarea { height: 150px; padding: 10px 15px; line-height: 1.5em; } .form_tbl .info { float: right; line-height: 22px; font-size: 14px; color: #666972; } .form_tbl .name { max-width: 200px; } .form_tbl .phone { float: left; width: 30%; } .form_tbl .phone + span { float: left; width: 5%; line-height: 37px; font-size: 14px; font-weight: 300; color: #6a6e79; text-align: center; } #popWrap .box { padding: 20px; margin: 10px 0 15px; font-size: 16px; line-height:1.3em; color: #fff; background: #a9b6c6; } #popWrap .box p + p { margin-top: 3px; } #popWrap .btns { text-align: center; } #popWrap .btns .btn { display: inline-block; width: 126px; height: 51px; line-height: 51px; font-size: 20px; font-weight: 700; color: #fff; vertical-align: middle; border: none; background: #c3c4c6; border-radius: 5px; -webkit-appearance: none; cursor:pointer; } #popWrap .btns .btn:first-child { margin-right: 7px; } #popWrap .btns .btn.btn_submit { background: #5687c7; } @media screen and (max-width:640px) { #popWrap { padding: 30px 10px; } #popWrap h1 { font-size: 25px; } #popWrap .txt { font-size: 14px; } #popWrap .privacy { height: 300px; padding: 20px 10px; } #popWrap .privacy h2 { font-size: 17px; } #popWrap .privacy dt, #popWrap .privacy dd { font-size: 14px; } #popWrap .agree { margin-bottom: 20px; font-size: 16px; } #popWrap .agree div { width: 100%; margin-top: 10px; } #popWrap .tbl_top { font-size: 12px; } .form_tbl th, .form_tbl td { height: 45px; padding: 5px; } .form_tbl th { width: 90px; padding: 5px 0; font-size: 14px; } .form_tbl .input { height: 35px; padding: 0 10px; font-size:12px; } .form_tbl textarea { padding: 10px; font-size:12px; } .form_tbl .info { width: 100%; margin-top: 5px; text-align: right; font-size: 13px; } .form_tbl .phone + span { line-height: 33px; } #popWrap .box { padding: 10px; font-size: 14px; } #popWrap .btns .btn { width: 100px; height: 45px; line-height: 45px; font-size: 18px; } } /*환경영향*/ .enviCon .tabMenu { width: 100%; max-width:1360px; height: 75px; margin: 0 auto; overflow: hidden; box-sizing:border-box; border:1px solid #d4d4d4; } .enviCon .tabMenu li { float: left; width:20%; height:100%; box-sizing:border-box; border-left:1px solid #d4d4d4; position: relative; display: table; text-align: center; color: #060a15; font-size:18px; cursor:pointer; } .enviCon .tabMenu li:first-child { border-left:none; } .enviCon .tabMenu li span { display: table-cell; vertical-align: middle; } .enviCon .tabMenu li.on { background: #0c4da2; color: #fff; font-weight: 700; } .enviCon .tabMenu li.on:before { content: ""; display: block; width: 2px; height: 15px; background: #fff; position: absolute; bottom: 0; left:50%; margin-left:-1px; } .enviCon .tabContent { margin-top: 70px; overflow: hidden; color: #6a6e79; } .enviCon h3 { width: 100%; max-width:1360px; margin: 80px auto 0; } .enviCon article > h3:first-child { margin-top: 0; } .enviCon .box_wid { position: relative; overflow: hidden; } .enviCon .box_wid > img { position: absolute; top: 100px; left: 50%; margin-left: 200px; z-index:-1; } /* 200409 추가 */ .enviCon .box_wid > .img2 { position: absolute; transform:translateY(-50%); top:58%; right: -10px; left: auto; z-index:-1; } .enviCon .box_wid > .img2.img2-1{ display:none; } .enviCon .box_wid > article { width: 100%; max-width:1360px; margin: 40px auto 0; } .enviCon .box_wid ul { float: left; } .enviCon .box_wid li { float: left; margin-right: 30px; width:290px; position: relative; } .enviCon .box_wid li i { display: block; width: 135px; height: 135px; border-radius:50%; background: #f2f2f2; position: relative; margin: 0 auto; } .enviCon .box_wid li i img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; } .enviCon .box_wid li:before { content: ""; display: block; box-sizing:border-box; border:1px solid #dbdbdb; position: absolute; bottom: 0; left: 0; width: 100%; height:calc(100% - 60px); } .enviCon .box_wid li div { width: 100%; height:190px; overflow: hidden; position: relative; } .enviCon .box_wid li div img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; height: 100%; } .enviCon .box_wid li dl { margin-top:50px; height: 190px; box-sizing:border-box; padding:0 20px; } .enviCon .box_wid li dt { color: #0c4da2; font-size:24px; font-weight: 500; line-height:120%; } .enviCon .box_wid li dt span { display: block; color: #333; font-weight: 500; text-transform: uppercase; font-size:14px; } .enviCon .box_wid li dd { margin-top: 20px; font-size:16px; line-height:130%; } .enviCon .box_wid .rightS { float: right; width:680px; height:380px; background: #376fb9; margin-top:120px; box-sizing:border-box; padding:50px 70px; color: #fff; } /* 200409 추가 */ .enviCon .box_wid .rightS_2 { position: absolute; transform: translateY(-50%); top: 58%; right: -10px; width:365px; height:380px; background: #376fb9; box-sizing:border-box; padding:50px 40px; color: #fff; } .enviCon .box_wid .rightS_2 dt, .enviCon .box_wid2 .rightS_2 dt{ font-size:28px; line-height:120%; color: #fff; font-weight: 700; padding-left: 30px; position: relative; } .enviCon .box_wid .rightS_2 dt:before, .enviCon .box_wid2 .rightS_2 dt:before{ content: ""; display: block; width: 18px; height: 18px; box-sizing:border-box; border:5px solid #fff; border-radius:50%; position: absolute; top: 10px; left: 0; } .enviCon .box_wid .rightS_2 dt+dd, .enviCon .box_wid2 .rightS_2 dt+dd{ margin-top: 30px; } .enviCon .box_wid .rightS_2 dd, .enviCon .box_wid2 .rightS_2 dd{ margin-top: 25px; font-size:16px; padding-left:30px; min-height:22px; position: relative; vertical-align: bottom; } .enviCon .box_wid .rightS_2 dd i, .enviCon .box_wid2 .rightS_2 dd i{ display: block; width:22px; height:22px; border-radius:50%; background: #fff; color: #376fb9; font-size:16px; vertical-align: bottom; line-height:135%; font-style:normal; text-align: center; position: absolute; top: -3px; left: 0; } .enviCon .box_wid .rightS dt, .enviCon .box_wid2 .rightS dt{ font-size:28px; line-height:120%; color: #fff; font-weight: 700; padding-left: 30px; position: relative; } .enviCon .box_wid .rightS dt:before, .enviCon .box_wid2 .rightS dt:before{ content: ""; display: block; width: 18px; height: 18px; box-sizing:border-box; border:5px solid #fff; border-radius:50%; position: absolute; top: 10px; left: 0; } .enviCon .box_wid .rightS dt+dd, .enviCon .box_wid2 .rightS dt+dd{ margin-top: 30px; } .enviCon .box_wid .rightS dd, .enviCon .box_wid2 .rightS dd{ margin-top: 25px; font-size:16px; padding-left:30px; min-height:22px; position: relative; vertical-align: bottom; } .enviCon .box_wid .rightS dd i, .enviCon .box_wid2 .rightS dd i{ display: block; width:22px; height:22px; border-radius:50%; background: #fff; color: #376fb9; font-size:16px; vertical-align: bottom; line-height:135%; font-style:normal; text-align: center; position: absolute; top: -3px; left: 0; } .enviCon .box { overflow: hidden; width: 100%; max-width:1360px; margin:40px auto 0; } .enviCon .box.process { box-sizing:border-box; border:1px solid #dadcdd; background: #f7f8f8; padding:90px 0; text-align: center; } .enviCon .graph img { float: left; } .enviCon .graph table { float: right; width: 640px; border-top:2px solid #0c4da2; text-align: center; font-size:20px; } .enviCon .graph th { height: 65px; border-bottom:1px solid #cfd5dd; border-left:1px solid #cfd5dd; background: #e6edf6; color: #060a15; font-weight: 500; } .enviCon .graph td { border-bottom:1px solid #e5e5e5; border-left:1px solid #e5e5e5; color: #585656; } .enviCon .graph th:first-child { border-left:none; } .enviCon .graph table.ver tbody th, .enviCon .graph table.ver tbody td { height:40px; } .enviCon .box.m4 { margin-top: 0; } .enviCon .box.m4 > p { font-size:20px; line-height:150%; letter-spacing: -.5px; } .enviCon .box.m4 h3+img { margin-top: 40px; width: 100%; } .enviCon .box.m4 ul { margin-top: 85px; width: 100%; height:80px; background: #0c4da2; text-align: center; font-size:0; } .enviCon .box.m4 li { display: inline-block; vertical-align: top; color: #fff; font-size:20px; line-height:80px; cursor:pointer; } .enviCon .box.m4 li:before { content: ""; display: inline-block; width:1px; height:12px; background: #fff; margin: 0 15px; } .enviCon .box.m4 li:first-child:before { display: none; } .enviCon .box.m4 article { width: 100%; overflow: hidden; background: #e9e9e9; text-align: center; padding:80px 0; } .enviCon .box.m4 article img { box-shadow:5px 5px 10px rgba(0,0,0,.5); } .enviCon .box_wid2 { width: 100%; position: relative; overflow: hidden; color:#fff; } .enviCon .box_wid2 > img { position: absolute; top: 0; right: 50%; margin-right: -30px; z-index:-1; } .enviCon .box_wid2 > article { width: 100%; max-width:1360px; margin: 0 auto; position: relative; } .enviCon .box_wid2 > article > div { width: 680px; height: 415px; background: #0c4da2; float: right; margin-top: 20px; display: table; padding:0 40px; box-sizing:border-box; } .enviCon .box_wid2 > article > div:before { content: ""; width: 0; height: 0; border-bottom:20px solid #0b2a52; border-left: 30px solid transparent; position: absolute; top: 0; left: 50%; } .enviCon .box_wid2 > article > div p { color: #fff; font-size:16px; line-height:180%; display: table-cell; vertical-align: middle; } .enviCon .box.m5 h4 { margin-top: 60px; width: 100%; height: 65px; background: #0c4da2; line-height:65px; text-align: center; color: #fff; font-size:20px; font-weight: 500; position: relative; } .enviCon .box.m5 h4:first-child { margin-top: 0; } .enviCon .box.m5 h4 span { position: absolute; top: 0; right: 25px; color: #b9c5dd; font-size:18px; } .enviCon .box.m5 table { width: 100%; font-size:20px; } .enviCon .box.m5 thead th { height: 65px; border-bottom:1px solid #cfd5dd; border-left:1px solid #cfd5dd; background: #e6edf6; color: #060a15; font-weight: 500; } .enviCon .box.m5 tbody th { border-bottom:1px solid #e5e5e5; color: #060a15; font-weight: 500; } .enviCon .box.m5 tbody td { border-bottom:1px solid #e5e5e5; border-left:1px solid #e5e5e5; text-align: center; height: 65px; } /* 200408 추가 */ .enviCon #m3 .box_wid2 .rightS{ padding:90px 70px 0; } /* TCP 개론 */ /* .tcpCon h3 { margin-top: 70px; } */ .tcpCon h3:first-child { margin-top: 0; } .tcpCon p { margin:15px 0 0 30px; color: #6a6e79; font-size:18px; line-height:150%; font-weight: 500; } .tcpCon dl { margin:15px 0 0 30px; } .tcpCon dt { color: #6a6e79; font-size:18px; line-height:150%; font-weight: 500; } .tcpCon dd { position: relative; margin-top:25px; padding-left:15px; color: #858995; font-size:16px; line-height:150%; letter-spacing: -.8px; } .tcpCon dd:before { content: ""; display: block; width: 5px; height: 5px; background: #c2c4ca; position: absolute; top: 9px; left: 0; } .tcpCon .secBox div { margin-top: 40px; width: 100%; overflow: hidden; box-sizing:border-box; border:1px solid #d9d9d9; text-align: center; padding:40px; } .tcpCon .secBox div img { max-width:910px; width: 100%; } /* 스템코 보유기술 */ /* .keepCon h3 { margin-top: 70px; } */ .keepCon h3:first-child { margin-top: 0; } .keepCon .box { margin:25px 0 0 30px; overflow: hidden; } .keepCon .box > p { color: #6a6e79; font-size:18px; line-height:120%; font-weight: 500; } .keepCon .box > img { width: 100%; margin-top: 20px; } .keepCon .box ul { margin-top: 20px; } .keepCon .box li { float: left; width: 49%; margin-left: 2%; text-align: center; } .keepCon .box li:first-child { margin-left: 0; } .keepCon .box li img { width: 100%; } .keepCon .box li p { margin-top: 30px; color: #3e3e3e; font-size:20px; font-weight: 700; line-height:120%; } /* .keepCon > article { margin-top: 100px; overflow: hidden; } .keepCon > article > div { float: left; overflow: hidden; width: 40%; } .keepCon > article dl { float: left; margin:25px 0 0 30px; padding-right:30px; display: inline-block; width:auto; } .keepCon > article dt { color: #414245; font-size:20px; line-height:120%; font-weight: 500; margin-bottom: 10px; } .keepCon > article dd { color: #6e6f72; font-size:18px; line-height:180%; text-indent:10px; } .keepCon > article > img { float: right; } */ .keepCon .box2 { margin:25px 0 0 30px; overflow: hidden; text-align: center; } .keepCon .box2 div { width:707px; overflow: hidden; margin: 30px auto 0; } .keepCon .box2 div dl { float: left; margin-top: 50px; text-align: left; } .keepCon .box2 dt { color: #414245; font-size:20px; line-height:120%; font-weight: 500; margin-bottom: 10px; } .keepCon .box2 dd { color: #6e6f72; font-size:18px; line-height:180%; text-indent:10px; } .keepCon .box2 div img { float: right; } /*Supply chain */ .chainCon { width: 100%; background:url(/img/sub/bg_chain.gif) no-repeat center; background-size:cover; } .chainCon h3 { text-align: center; margin-top: 120px; width: 100%; height: 178px; overflow: hidden; position: relative; } .chainCon h3 img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; } .chainCon .text-box { display: flex; gap: 5px 20px; width: calc(100% - 30px); max-width: 1300px; margin: 20px auto 0; } .chainCon .text-box > span { font-size: 16px; } .chainCon > article { width: 1360px; margin: 0 auto; overflow: hidden; } .chainCon > article div { border:1px solid #c0c2c6; float: right; position: relative; margin-top: 70px; } .chainCon > article div:before { content: ""; display: block; width:1px; height:75px; border-right:2px dashed #0c4ca3; position: absolute; top: -70px; left: 60%; } .chainCon > article div:after { content: ""; display: block; width: 11px; height: 11px; border-radius:50%; background: #0c4ca3; position: absolute; top: -5px; right: 245px; } /* 고객문의 */ .inquiryBox { margin:0; } .inquiryBox .tit { font-size:30px; line-height:140%; font-weight:700; color:#060a15; letter-spacing:-0.025em; } .inquiryBox .ipbox { margin:60px 0 0 0; } .inquiryBox .ipbox table, .inquiryBox .ipbox th, .inquiryBox .ipbox td { border:none; } .inquiryBox .ipbox table { border-top:1px solid #333; } .inquiryBox .ipbox tbody th { text-align:left; font-size:16px; font-weight:400; color:#333; letter-spacing:-0.025em; border-bottom:1px solid #e0e0e0; } .inquiryBox .ipbox tbody th span { color:#0c4da2; } .inquiryBox .ipbox tbody td { text-align:left; padding:10px 0; font-size:16px; font-weight:400; color:#333; letter-spacing:-0.025em; border-bottom:1px solid #e0e0e0; } .inquiryBox .ipbox tbody td .radiobox label { display:inline-block; margin:0 0 0 29px; font-size:15px; font-weight:300; color:#666; letter-spacing:-0.025em; } .inquiryBox .ipbox tbody td .radiobox label:nth-child(1) { margin:0; } .inquiryBox .ipbox tbody td .radiobox label input { margin:-2px 6px 0 0; } .inquiryBox .ipbox tbody td .stxt { margin:10px 0 0 0; font-size:13px; font-weight:300; color:#999; letter-spacing:-0.025em; } .inquiryBox .ipbox tbody td input[type="text"], .inquiryBox .ipbox tbody td input[type="password"] { display:inline-block; text-align:left; vertical-align:middle; width:170px; padding:0 15px; line-height:40px; height:40px; border:1px solid #e0e0e0; outline:none; font-size:14px; font-weight:400; color:#666; box-sizing:border-box; background-color:#fbfbfb; border-radius:0; } .inquiryBox .ipbox tbody td input.ip01 { width:590px; } .inquiryBox .ipbox tbody td input.ip02 { width:180px; } .inquiryBox .ipbox tbody td input.ip03 { width:100%; } .inquiryBox .ipbox tbody td input.ip04 { width:375px !important; } .inquiryBox .ipbox tbody td input[type="file"] { display:block; text-align:left; vertical-align:middle; width:100%; margin:5px 0; padding:0; line-height:40px; height:40px; border:1px solid #e0e0e0; outline:none; font-size:14px; font-weight:400; color:#666; box-sizing:border-box; background-color:#fbfbfb; border-radius:0; } .inquiryBox .ipbox tbody td textarea { text-align:left; width:100%; padding:30px 15px; line-height:28px; height:225px; border:1px solid #d7d7d7; outline:none; font-size:14px; font-weight:400; color:#666; box-sizing:border-box; background-color:#fbfbfb; border-radius:0; } .inquiryBox .ipbox tbody td select { display:inline-block; text-align:left; vertical-align:middle; width:180px; padding:0 15px; line-height:40px; height:40px; border:1px solid #e0e0e0; outline:none; font-size:14px; font-weight:400; color:#666; box-sizing:border-box; background-color:#fbfbfb; border-radius:0; } .inquiryBox .ipbox tbody td select { -webkit-appearance:none; -moz-appearance:none; appearance:none; background:#fbfbfb url(/img/sub/icon_select_down.png) right center no-repeat; } .inquiryBox .ipbox tbody td select::-ms-expand { display:none; } .inquiryBox .ipbox tbody td select.sel01 { margin:0 10px 0 -2px; } .inquiryBox .ipbox tbody td .bar { display:inline-block; width:23px; margin:0 -2px; text-align:center; font-size:13px; font-weight:300; color:#999; letter-spacing:-0.025em; } .inquiryBox .privacyBox { margin:65px 0 0 0; } .inquiryBox .privacyBox .txtbox { margin:35px 0 0 0; padding:0 20px 20px; height:250px; overflow:auto; border:1px solid #e0e0e0; border-top:1px solid #333; box-sizing:border-box; } .inquiryBox .privacyBox .txtbox li { margin:20px 0 0 0; font-size:15px; font-weight:300; color:#666; letter-spacing:-0.025em; line-height:160%; } .inquiryBox .privacyBox .txtbox li strong { font-weight:400; color:#333; } .inquiryBox .privacyBox .ch { margin:15px 0 0 0; } .inquiryBox .privacyBox .ch label { display:inline-block; margin:0 0 0 18px; font-size:15px; font-weight:300; color:#666; letter-spacing:-0.025em; } .inquiryBox .privacyBox .ch label:nth-child(1) { margin:0; } .inquiryBox .privacyBox .ch label input { margin:-2px 6px 0 0; } .inquiryBox .btn_confirm { text-align:center; margin:90px 0 0 0; } .inquiryBox .btn_confirm button { cursor:pointer; display:inline-block; width:200px; padding:18px 0; text-align:center; color:#fff; font-weight:700; letter-spacing:-0.02em; font-size:20px; border:none; outline:none; background-color:#0c4da2; } /* 22.06.17 */ /* 안전 보건 방침 */ .safetyPolicyCon { } .safetyPolicyCon::before { display: none; } .safetyPolicyCon .title { text-align: center; } .safetyPolicyCon .title h4 { color: #060a15; font-size: 35px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 15px; } .safetyPolicyCon .title p { color: #6a6e79; font-size: 20px; letter-spacing: -0.025em; line-height: 1.6; } .safetyPolicyCon > article { position: relative; width: 690px; height: 690px; margin: 60px auto 25px; } .safetyPolicyCon .list { width: 100%; height: 100%; top: 0; } .safetyPolicyCon .tit { width: 100%; height: 100%; display: block; position: relative; background: url("/img/sub/tit_policy.png") no-repeat center center / 100%; display: flex; align-items: center; justify-content: center; } .safetyPolicyCon .box { display: flex; gap: 0 26px; position: absolute; width: 90%; } .safetyPolicyCon .box:not(.box3) { align-items: center; } .safetyPolicyCon .box1, .safetyPolicyCon .box2 { flex-direction: row-reverse; text-align: right; right: 77.5%; left: auto; } .safetyPolicyCon .box3, .safetyPolicyCon .box4 { left: 77.5%; } .safetyPolicyCon .box1, .safetyPolicyCon .box3 { top: 40px; } .safetyPolicyCon .box2, .safetyPolicyCon .box4 { bottom: 40px; } .safetyPolicyCon .box1 dd, .safetyPolicyCon .box2 dd { justify-content: flex-end; text-align: right; } .safetyPolicyCon .box3, .safetyPolicyCon .box4 { text-align: left; } .safetyPolicyCon i, .safetyPolicyCon dl { flex-shrink: 0; } .safetyPolicyCon dl { width: calc(100% - 136px); padding-top: 0; } .safetyPolicyCon dd { display: flex; padding-left: 0; align-items: center; width: 100%; line-height: 1.4; } .safetyPolicyCon dd:before { display: inline-block; width: 2px; height: 2px; margin: 0 6px 0 0; position: inherit; top: auto; left: auto; } .safetyPolicyCon .list1 dl { } .safetyPolicyCon .list1 dd:before { display: none; } /* 2022-12-07 증명서 발급 */ .tcpCon.issue *{ letter-spacing: -0.025em; box-sizing: border-box; } .tcpCon.issue .titDot::before{ border: 5px solid #0c4da2; } .tcpCon.issue > div{ border: none; padding: 0; margin: 0; } .tcpCon.issue .step ul::after{ display: none; } .tcpCon.issue p{ margin: 0; } .tcpCon.issue .step{ padding: 65px 120px 50px; } .tcpCon.issue .step ul { display: flex; justify-content: space-between; align-items: flex-start; } .tcpCon.issue .step ul li{ width: calc((100% - 309px) / 4); display: flex; flex-direction: column; align-items: center; position: relative; } .tcpCon.issue .step ul li .image{ width: 200px; height: 200px; border-radius: 50%; border: 1px solid #a9b6c6; display: flex; justify-content: center; align-items: center; } .tcpCon.issue .step ul li::after{ content: ""; width: 36px; height: 25px; position: absolute; top: 35%; right: -35%; transform: translateY(-50%); background: url("/img/sub/issue_arrow.png") no-repeat; } .tcpCon.issue .step ul li:last-of-type::after{ display: none; } .tcpCon.issue .step ul li .image img{ width: auto; } .tcpCon.issue .step ul li span{ font-size: 16px; font-weight: 600; color: #0b4da1; margin: 27px 0 5px; } .tcpCon.issue .step ul li p{ font-size: 16px; font-weight: 600; color: #060a15; text-align: center; line-height: 1.5; } .tcpCon.issue .formBox{ margin-top: 60px; } .tcpCon.issue .formBox table{ border-top: 2px solid #060a15; margin-bottom: 18px; } .tcpCon.issue .formBox table tr{ border-bottom: 1px solid #a9b6c6; } .tcpCon.issue .formBox table th{ width: 245px; background-color: #f0f2f5; font-size: 18px; font-weight: 600; color: #060a15; line-height: 1.25; word-break: keep-all; } .tcpCon.issue .formBox table td{ padding: 16px 18px; text-align: left; box-sizing: border-box; } .tcpCon.issue .formBox input[type="text"]{ border: 1px solid #d1d6dd; box-sizing: border-box; padding: 14px 20px; border-radius: 5px; font-size: 16px; font-weight: 400; color: #333; line-height: 1.3; } .tcpCon.issue .formBox input[type="text"]::placeholder{ color: #6a6e79; } .tcpCon.issue .formBox select{ border: 1px solid #d1d6dd; box-sizing: border-box; padding: 14px 15px 14px 20px; border-radius: 5px; font-size: 16px; font-weight: 400; color: #6a6e79; line-height: 1.3; appearance: none; -moz-appearance: none; -webkit-appearance: none; position: relative; background: url("/img/sub/issue_select.png") no-repeat center right 15px; cursor: pointer; } .tcpCon.issue .formBox input[type="checkbox"], .tcpCon.issue .formBox input[type="radio"]{ display: none; } .tcpCon.issue .formBox label{ font-size: 16px; font-weight: 400; color: #6a6e79; padding-left: 20px; position: relative; cursor: pointer; } .tcpCon.issue .formBox input[type="checkbox"] + label::before, .tcpCon.issue .formBox input[type="radio"] + label::before{ content: ""; width: 12px; height: 12px; border: 1px solid #d1d6dd; position: absolute; top: 58%; left: 0; transform: translateY(-50%); } .tcpCon.issue .formBox input[type="checkbox"]:checked + label::after, .tcpCon.issue .formBox input[type="radio"]:checked + label::after{ content: ""; width: 18px; height: 13px; position: absolute; top: 42%; left: -1px; z-index: 3; transform: translateY(-50%); background: url("/img/sub/issue_check.png") no-repeat center bottom; } .tcpCon.issue .formBox td span{ font-size: 16px; font-weight: 400; color: #6a6e79; margin: 0 5px; } .tcpCon.issue .formBox td ul{ display: flex; align-items: center; } .tcpCon.issue .formBox td ul li{ display: flex; align-items: center; } .tcpCon.issue .formBox td ul li:not(:last-of-type){ margin-right: 25px; } .tcpCon.issue .formBox td ul li span{ font-size: 14px; font-weight: 400; color: #9c9fa8; margin: 0 0 0 5px; } .tcpCon.issue .formBox textarea{ width: 950px; border: 1px solid #d1d6dd; border-radius: 5px; font-size: 14px; font-weight: 400; color: #333; padding: 20px; } .tcpCon.issue .formBox textarea::placeholder{ color: #9c9fa8; } .tcpCon.issue .formBox .line1 input[type="text"], .tcpCon.issue .formBox .line2 input[type="text"], .tcpCon.issue .formBox .line5 input[type="text"]{ width: 350px; } .tcpCon.issue .formBox .line3 select, .tcpCon.issue .formBox .line3 input[type="text"]{ width: 155px; } .tcpCon.issue .formBox .line6 input[type="text"]{ width: 215px; } .tcpCon.issue .formBox .line6 select{ width: 215px; margin-left: 4px; } .tcpCon.issue .formBox .line9 input[type="text"]{ width: 415px; } .tcpCon.issue .formBox .line9 input[type="text"]::placeholder{ font-size: 14px; color: #9c9fa8; } .tcpCon.issue .formBox dl{ text-align: left; margin: 0 0 0 27px; } .tcpCon.issue .formBox dl:not(:first-of-type){ margin-top: 32px; } .tcpCon.issue .formBox dt{ font-size: 16px; font-weight: 400; color: #9c9fa8; margin: 0; line-height: 1.625; position: relative; padding-left: 15px; } .tcpCon.issue .formBox dt::before{ content: ""; width: 6px; height: 6px; background-color: #9c9fa8; border-radius: 50%; position: absolute; top: 56%; left: 0; transform: translateY(-50%); } .tcpCon.issue .formBox dd{ font-size: 16px; font-weight: 400; color: #9c9fa8; margin: 0; line-height: 1.625; padding: 0; } .tcpCon.issue .formBox dd::before{ display: none; } .tcpCon.issue .formBox .check dd{ padding-left: 15px; } .tcpCon.issue .formBox .check dd:last-of-type{ display: flex; } .tcpCon.issue .formBox .check dd label{ font-size: 16px; font-weight: 400; color: #9c9fa8; padding: 0 20px 0 15px; } .tcpCon.issue .formBox .check dd label::before{ top: 55%; left: auto; right: 0; } .tcpCon.issue .formBox .check dd input[type="checkbox"]:checked + label::after{ top: 43%; left: auto; right: -3px; } .tcpCon.issue .formBox input[type="submit"]{ width: 335px; height: 80px; background-color: #0c4da2; font-size: 22px; font-weight: 600; color: #fff; border: none; margin-top: 58px; margin-bottom: 189px; cursor: pointer; } @media screen and (max-width:1800px) { /* 230414 추가 */ .enviCon .box_wid li{ width: 250px;} /* 24.02.02 */ .safetyPolicyCon .box { width: 80%; } .safetyPolicyCon .box br { display: none; } } @media screen and (max-width:1600px) { /* 230414 추가 */ .enviCon .box_wid .rightS_2{ width: 320px; } .enviCon .box_wid > .img2 { right: -3%; } /* 24.02.02 */ .safetyPolicyCon .box { width: 65%; } } @media screen and (max-width:1400px) { /* 230414 추가 */ .enviCon .box_wid > article{ display:flex; flex-direction:column; } .enviCon #m3 .box_wid ul{ display:flex; flex-wrap:wrap; gap: 20px; } .enviCon #m3 .box_wid2 .rightS{ padding:30px;} .enviCon #m3 .box_wid li{ width: calc((100% - 20px) / 2); margin: 0; } .enviCon .box_wid > .img2{ position:relative; transform:none; left: 0; margin-left:0; } .enviCon .box_wid > .img2.img2-1{ display:block; } .enviCon .box_wid > .img2.img2-2{ display:none; } .enviCon .box_wid .rightS_2{ position:relative; transform:none; left: 0; width:100%; margin:20px 0 0 0; } /* 24.02.02 */ .safetyPolicyCon .box1, .safetyPolicyCon .box2 { right: 67.5%; } .safetyPolicyCon .box3, .safetyPolicyCon .box4 { left: 67.5%; } } @media screen and (max-width:1200px) { /* 기업소개 - 스템코 소개 */ .introCon .imgBox article img { width: 100%; } .introCon .imgBox article > div { width: 100%; height: auto; position: static; padding:0; text-align: left !important; } .introCon .imgBox i { opacity:.5; } .introCon .imgBox .txt { display: block; box-sizing:border-box; padding:15px 0; } .introCon .imgBox dd { line-height: 140%; } .introCon .imgBox dd span { display: inline; margin-left: 4px; } .introCon .top_newbox .txt_1 { width:calc(100% - 160px); } /*오시는길*/ .mapCon section:not(:last-of-type){ margin-bottom: 50px; } /* .mapCon dl { margin-top: 50px; } */ .mapCon dt { float: none; width: 100%;} .mapCon dd { margin-top:5px; line-height:110%; } .mapCon .iconList { margin-top: 25px; } /*인사말*/ .greeCon .tit > img { float: none; margin: 0 auto; width:360px; display: block; } .greeCon .tit > dl { margin:20px 0; } .greeCon p br { display: none; } /*비전*/ .vsCon > article { background:none; } .vsCon .visionBox { width: 100%; padding: 0; } .vsCon .visionBox:before { display: none; } .vsCon .visionBox h3 { width: 100%; background-position:top center; background-size:auto 630px; height: 630px; } .vsCon .visionBox h3 img { margin-top: 250px; height: 30px; } .vsCon .visionBox h3 p { margin-top: 10px; color: #060a15; font-size:32px; line-height:120%; font-weight: 700; } .vsCon .visionBox > div { position: static; float: left; width:33%; text-align: center; margin: 0; } .visionBox > div i { float: none; margin: 0 auto; } .visionBox dl { float: none; margin: 25px auto 0; padding: 0; width:120px; } .visionBox dt { margin-bottom: 10px; position: static; } .visionBox dd { text-align: left; } /*미션*/ .msCon ul li { width:50%; } .msCon ul li:nth-child(3) { float: right; } .msCon ul li:last-child { margin-top: -15.5%; } .subCont > article.msCon{background:url(/img/sub/bg_mission.jpg) no-repeat center bottom;padding-bottom:20%;background-size:100%;} .msCon p.img100{text-align:center;} .msCon p.img100 img{width:100%;} .msCon > article dl:before{content:"";width:1px;height:30px;position:absolute;top:0;background:#a6a8af;} /*연혁*/ .hisCon > nav { height:80px; } .hisCon .tabMenu:before { width: 700px; left: 50%; margin-left: -350px; } .hisCon .tabMenu li { margin:0 10px; } .hisCon .listBox:before { height:100%; top: 0; left: 10px; margin-left:0; } .hisCon .listBox > div { display: none; } .hisCon .listBox ul { float: none; width:100%; margin-top: 0; padding-top: 50px; } .hisCon .listBox dl { padding-left:60px; } .hisCon .listBox dl:before { width: 40px; } /*제품소개*/ .pdCon .secBox section:not(:last-of-type){ margin-bottom: 50px; } /* .pdCon h3 { margin-top: 50px; } */ .pdCon .img { width:100%; height:50vw; max-height:350px; position: relative; } .pdCon .img img { float: none; position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; max-width: 90%; max-height: 90%; } .pdCon .grayTxt { margin:20px 0 0 0; width:100%; height:auto; box-sizing:border-box; padding:10px; } .pdCon .grayTxt dt:first-child { margin-top: 0; } .pdCon .grayTxt dt br { display:none; } .pdCon .grayTxt dd { margin:0 0 12px 50px; } .subtabmenu { margin:50px 0 80px 0; padding:0 15px; } .subtabmenu ul { flex-wrap:wrap; justify-content: left; } .subtabmenu li { width:50%; margin:0;} .subtabmenu li:last-child { border-left: 1px solid #e0e0e0; } .subtabmenu li a { font-size:16px; } .dataTable dt { display:block; width:100%; font-size:18px; padding:30px 10px 0 10px; } .dataTable dd { display:block; width:100%; padding:20px 10px; font-size:16px; border-left:none; } /*환경보고서*/ .rpCon dl dt span { display: inline; margin-left: 4px; } .rpCon .btn li { width: 280px; margin:0 10px; } .rpCon .btn li a img { margin-left: 15px; } /*분쟁지역 광물 사용지침*/ .guideCon:before { height:calc(100% - 185px); } .guideCon > article { width: 100%; box-sizing:border-box; } .mineral { margin: 40px auto 0; width: 600px; } .mineral li { width:180px; height:180px; margin:0 10px 10px; } .guideCon h4 { margin-top: 80px; } .guideCon .list { padding:50px 0 150px; } .guideCon .list li { margin-top: 50px; } .guideCon .list dl { width:calc(100% - 95px); } /*환경안전 방침*/ .planCon:before { display: none; } .planCon .tit { margin: 0 auto; background-size:100%; width:500px; height: 577px; } .planCon > article { position: static; overflow: hidden; } .planCon > article > div { position: static; float: left; width:45%; margin:0 2.5%; overflow: hidden; text-align: left !important; } .planCon i { float: none !important; } .planCon dl { height: 180px; } /* 22.06.17 */ /* 안전 보건 방침 */ .safetyPolicyCon .title h4 { font-size: 30px; } .safetyPolicyCon .title p { font-size: 17px; } .safetyPolicyCon > article { width: 100%; height: 100%; } .safetyPolicyCon .tit { width: 560px; height: 560px; left: 50%; transform: translateX(-50%); } .safetyPolicyCon .tit h3 { text-align: center; } .safetyPolicyCon > article > div, .safetyPolicyCon .box { position: inherit; top: auto; left: auto; right: auto; bottom: auto; } .safetyPolicyCon > article > div { width: 100%; margin: 0; clear: both; display: flex; flex-wrap: wrap; margin: 24px 0 0; } .safetyPolicyCon .box { flex-direction: column; width: 45%; margin: 0 2.5%; } .safetyPolicyCon .box:not(.box3) { align-items: flex-start; } .safetyPolicyCon .box1, .safetyPolicyCon .box2 { text-align: left; } .safetyPolicyCon .box1 dd, .safetyPolicyCon .box2 dd { justify-content: flex-start; } .safetyPolicyCon .box dl { padding-top: 20px; } /* 24.02.02 */ .safetyPolicyCon .box1 dd, .safetyPolicyCon .box2 dd { text-align: left; } .safetyPolicyCon dl { width: 100%; } /*안전 보건 현황*/ .safetyCon > article { min-height:auto; } .safetyCon > article > img { position: static; width: 100%; } .safetyCon > article > ul { float: none !important; margin-top: 0; width:100%; padding:30px 0; } .safetyCon > article.box > ul { min-height:auto; } /*경영방침*/ .subCont > article.mqCon{ padding-bottom:10%; } .mqCon { background:none; } .mqCon > article { width: 100%; background:none; } .mqCon .tit{ width:554px; height:554px; background-image:url(/img/sub/mana_bg2.png); } .mqCon .listBox { overflow: hidden; margin-top: 20px; } .mqCon .listBox dl { position: relative; top: inherit !important; left: inherit !important; right: inherit !important; bottom:inherit !important; text-align: left !important; padding:0 0 0 20px !important; float: left; width:50%; box-sizing:border-box; overflow: hidden !important; height: 135px; } .mqCon .listBox dl:before { left: 0; !important right: inherit !important; } .mqCon .listBox dd { margin-top: 10px; overflow: hidden; } /*품질방침*/ .mq2Con { background:none; } .mq2Con > article { width: 100%; height: auto; background:none; } .mq2Con .tit { margin: 0 auto; } .mq2Con .listBox div { margin-top: 20px; position: static; float: left; overflow: hidden; width:30%; margin-left: 5%; } .mq2Con .listBox div:first-child { margin-left: 0; } .mq2Con .listBox p { float: none !important; margin: 0 auto; } .mq2Con .listBox dl { float: none; margin:20px auto 0 !important; text-align: center !important; } /*윤리경영*/ .eth1Con .process { margin-top: 30px; position: relative; padding-bottom: 20px; background:none; } .eth1Con aside { width:100%; max-width: 735px; } .eth1Con aside i { margin-left:10%; } /*윤리규정*/ .eth2Con > article { margin-top: 40px; } .eth2Con .txt { width: 60%; } .eth2Con .img { width:38%; } .eth2Con .img p { margin-top: 25px; } .eth2Con .img img { width: 100%; } /* 사회공헌 */ .socialCon .flex-box > *{ width: calc((100% - 30px) / 2); } /*상담 및 제보*/ .eth3Con .process li { width: 49%; margin:0 0 20px 2%; } .eth3Con .process li:nth-child(odd) { margin-left: 0; } .eth3Con .process li div { width: 100%; height:auto; padding-bottom: 80%; position: relative; overflow: hidden;} .eth3Con .process li div img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; width:100%; } .eth3Con .box ul { float: none; } .eth3Con .box dl { float: none; margin: 20px auto 0; } /*환경영향*/ .enviCon .box_wid > img { position: static; margin-left: 0; width: 100%;} .enviCon .box_wid ul { float: none; width: 100%; overflow: hidden;} .enviCon .box_wid li { margin-right: 4%; width:48%; } .enviCon .box_wid li:last-child { margin-right: 0; } .enviCon .box_wid li div { height:auto; } .enviCon .box_wid li div img { position: static; height: auto; width:100%; } .enviCon .box_wid .rightS { float: none; margin-top: 20px; width:100%; height:auto; padding:30px; overflow: hidden; } .enviCon .box_wid .rightS dt { font-size:28px; line-height:120%; color: #fff; font-weight: 700; padding-left: 30px; position: relative; } .enviCon .box_wid .rightS dt:before { content: ""; display: block; width: 18px; height: 18px; box-sizing:border-box; border:5px solid #fff; border-radius:50%; position: absolute; top: 10px; left: 0; } .enviCon .box.process { padding:30px; } .enviCon .box.process img { width:100%; } .enviCon .graph img { float: none; width: 100%; } .enviCon .graph table { float: none; width: 100%; margin-top:30px; } .enviCon .box.m4 ul { height:auto; padding:10px 0; } .enviCon .box.m4 li { line-height:140%; } .enviCon .box.m4 article { box-sizing:border-box; padding:30px; } .enviCon .box.m4 article img { width: 100%; } .enviCon .box_wid2 > img { position: static; width: 100%; } .enviCon .box_wid2 > article > div { width: 100%; height: auto; float: none; margin-top: 0; padding:20px; } .enviCon .box_wid2 > article > div:before { display: none; } /* 스템코 보유기술 */ .keepCon > article > div { float: none; width: 100%; overflow: hidden; } .keepCon > article > img { float: none; margin: 30px auto 0; max-width:700px; width:100%; display: block; } .keepCon .box2 { margin:25px 0 0 0; } .keepCon .box2 > img { width:100%; max-width:600px; } .keepCon .box2 div { width:100%; max-width:600px; } .keepCon .box2 div dl { float: none; margin-top: 20px; } .keepCon .box2 div img { float: none; width:300px; margin:20px auto 0; } /*Supply chain */ .chainCon h3 { margin-top: 0; height: auto; padding-bottom: 15%; } .chainCon h3 img { width: 130%; left: -10%; right: 0; } .chainCon > article { width: 100%; } .chainCon > article div { margin-top: 40px; } .chainCon > article div:before { height:40px; top: -40px; left: 85%; } .chainCon > article div:after { display: none; } .chainCon > article div img { width: 100%; } .inquiryBox .ipbox tbody td .stxt { display:block; } /* 2022-12-07 증명서 발급 */ .tcpCon.issue .step{ padding: 30px 0 50px; } .tcpCon.issue .step ul{ gap: 0 40px; } .tcpCon.issue .step ul li{ width: calc((100% - 120px) / 4); } .tcpCon.issue .step ul li::after{ right: -18%; } .tcpCon.issue .step ul li .image{ width: 180px; height: 180px; } .tcpCon.issue .formBox{ margin-top: 30px; } .tcpCon.issue .formBox textarea{ width: 100%; } .tcpCon.issue .formBox input[type="submit"]{ margin-bottom: 0; } } @media screen and (max-width: 1024px){ /* 사회공헌 */ .socialCon br{ display: none; } } @media screen and (max-width: 1010px){ .tcpCon.issue .formBox .line6 input[type="text"], .tcpCon.issue .formBox .line6 select{ width: calc((100% - 40px) / 3); } .tcpCon.issue .formBox td ul{ flex-wrap: wrap; } .tcpCon.issue .formBox td ul li:not(:last-of-type){ margin-bottom: 10px; } .tcpCon.issue .formBox td ul li:last-of-type{ width: 100%; } .tcpCon.issue .formBox td ul li span{ margin: 0; } } @media screen and (max-width:960px) { .chainCon .text-box { flex-direction:column; } .chainCon .text-box > span { font-size: 14px; } .safetyPolicyCon .title p br { display: none; } /* 2022-12-07 증명서 발급 */ .tcpCon.issue .step ul{ gap: 40px; flex-wrap: wrap; justify-content: center; } .tcpCon.issue .step ul li{ width: calc((100% - 40px) / 2); } .tcpCon.issue .step ul li:nth-of-type(2)::after{ display: none; } .tcpCon.issue .step ul li::after{ right: -7%; } .tcpCon.issue .formBox table th{ width: 25%; } } @media screen and (max-width:860px) { /* 기업소개 - 스템코 소개 */ .introCon .top_newbox { height:auto; overflow:auto; padding-top:60px;} .introCon .top_newbox:before { top: 60px; background:url(/img/sub/bg_cpn_top_m.png) center center no-repeat;} .introCon .top_newbox > div { width:100%; padding:0 10% } .introCon .top_newbox .l_box { background-color:#112c51; height:70px; margin-top:-60px; } .introCon .top_newbox .r_box { float:right; background-color:#6384b0; height:70px; margin-top:240px; } .introCon .top_newbox .txt_1 { width:50%; font-size:24px; } .introCon .top_newbox .txt_2 { right:5%; width:50%; font-size:14px; } .introCon .top_newbox .r_box .txt_2 { left:5%; right:auto; } .inquiryBox .ipbox .col1 { width:90px !important; } .inquiryBox .ipbox tbody td .radiobox label { margin:0 0 0 15px; } .inquiryBox .ipbox tbody td input.ip01 { width:100%; } .inquiryBox .ipbox tbody td input.ip02 { width:calc(33.333% - 19px); } .inquiryBox .ipbox tbody td input.ip03 { width:100%; } .inquiryBox .ipbox tbody td input.ip04 { width:calc(100% - 223px) !important; } .inquiryBox .ipbox tbody td select { width:calc(33.333% - 19px); } /*연혁*/ .hisCon > nav { position: relative;height:auto; } .hisCon > nav:before { content: ""; display: block; height: 1px; background: #fff; width: 50%; position: absolute; top: 235px; left: 25%; } .hisCon .tabMenu:before { width: 50%; top: 56px; left: 25%; margin-left: 0; } .hisCon .tabMenu:after { content: ""; display: block; height: 1px; background: #fff; width: 50%; position: absolute; top: 133px; left: 25%; } .hisCon .tabMenu li { display: block; margin:20px 0 10px; float: left; width:50%; } /* 2022-12-07 증명서 발급 */ .tcpCon.issue .step{ padding: 30px 0; } .tcpCon.issue .step ul li::after{ right: -10%; } .tcpCon.issue .formBox .line1 input[type="text"], .tcpCon.issue .formBox .line2 input[type="text"], .tcpCon.issue .formBox .line5 input[type="text"]{ width: 100%; } .tcpCon.issue .formBox .line3 select{ width: 100%; margin-bottom: 10px; } .tcpCon.issue .formBox .line3 input[type="text"]:first-of-type{ width: 100%; margin-bottom: 10px; } .tcpCon.issue .formBox .line3 input[type="text"]{ width: calc((100% - 21px) / 2); } .tcpCon.issue .formBox .line3 span:first-of-type{ display: none; } .tcpCon.issue .formBox .line6 input[type="text"]{ width: calc((100% - 31px) / 2); } .tcpCon.issue .formBox .line6 select{ width: 100%; margin: 10px 0 0 0; } .tcpCon.issue .formBox .line9 input[type="text"]{ width: 100%; } .tcpCon.issue .formBox input[type="submit"]{ width: 250px; height: 70px; font-size: 20px; } } @media screen and (max-width:750px) { .dataTable dd .imgbox li { width:100%; margin:20px 0 0 0; text-align:center; } .dataTable dd .imgbox li img { max-width:100%; } .dataTable dd .imgbox li.img { padding:0 0 0 0; } /* 2022-12-07 증명서 발급 */ .tcpCon.issue .step ul li::after{ right: -12%; } .tcpCon.issue .formBox table th{ width: 35%; } .tcpCon.issue .formBox dl{ margin-left: 0; } .tcpCon.issue .formBox dl:not(:first-of-type){ margin-top: 20px; } /* 사회공헌 */ .socialCon .flex-box > *{ width: 100%; } } @media screen and (max-width:650px) { /* 기업소개 - 스템코 소개 */ .introCon .top { width: 100%; overflow: hidden; position: relative; } .introCon .top:before { width: 50px; height: 50px; line-height: 50px; top: 50%; left: 50%; margin: -25px 0 0 -25px; } .introCon .top:after { display: none; } .introCon .top p { float: none; width: 100%; } .introCon .tit { padding-top: 50px; } .introCon .tit dt { font-size:25px; } .introCon .tit dt span { font-size:18px; } .introCon .tit dd { margin-top: 15px; } .introCon .tit dd img { height: 40px; } .introCon .imgBox article { margin-top: 40px; } .introCon .imgBox i { font-size:70px; top: 5px; } .introCon .imgBox article:nth-child(odd) i { right: 5px; } .introCon .imgBox article:nth-child(even) i { left: unset; right: 5px; } .introCon .imgBox dt { font-size:20px; } .introCon .imgBox dt em { font-size:25px; margin-bottom: 10px; } .introCon .imgBox dd { margin-top: 10px; font-size:15px; line-height: 140%; } /*오시는길*/ .mapCon dt { padding-left:25px; font-size:22px; } .mapCon dt:before { top: 5px; left: 0; } .mapCon dd { font-size:15px; float: none; margin-left: 25px !important; font-weight: 300; } .mapCon dd:before { display: none; } .mapCon section > article iframe { height:70vw; } .mapCon .iconList li { float: none; width:100%; padding:20px 10px; border-top:1px solid #dadcdd; } .mapCon .iconList li:before { display: none; } .mapCon .iconList li p { margin-top: 10px; font-size:15px; } /*인사말*/ .greeCon .tit:before { height:265px; } .greeCon .tit > img { width:290px; } .greeCon .tit > dl { margin:20px 0; } .greeCon .tit dt { font-size:25px; } .greeCon .tit dt span { font-size:33px; } .greeCon .tit dt span img { height:33px; margin-right: 5px; } .greeCon .tit dd { margin-top: 20px; font-size:18px; } .greeCon h3 { margin-top: 30px; font-size:18px; } .greeCon p { margin-top: 15px; font-size:15px; } .greeCon p.point { margin-top: 30px; font-size:18px; } /*비전*/ .vsCon .tit dt { font-size:28px; } .vsCon .tit dd { margin-top: 15px; font-size:16px; } .vsCon > article { margin-top:25px; padding-bottom: 50px; } .vsCon .visionBox { padding-bottom: 0; } .vsCon .visionBox h3 { background-size:auto 500px; height: 400px; background-position:center -50px; } .vsCon .visionBox h3 img { margin-top: 145px; } .vsCon .visionBox h3 p { font-size:25px; } .vsCon .visionBox > div { float: none; width:100%; text-align: center; margin-top: 25px; } .visionBox > div i { width: 100px; height: 100px; } .visionBox dl { margin: 15px auto 0; } .visionBox dt { font-size:25px; } /*미션*/ .msCon h3 span { font-size:30px; } .msCon > article dl { padding:30px 0 15px; } .msCon > article dt { font-size:40px; } .msCon > article dd { font-size:16px;} .msCon ul li { float: none !important; width:100%; margin-top:0 !important; } .msCon ul li img { width: 100%; } .msCon ul li p { height:50px; line-height:50px; font-size:16px; } /*연혁*/ .hisCon > nav { height:auto; } .hisCon > nav:before { top: 210px; } .hisCon .tabMenu { margin-top: 0; } .hisCon .tabMenu:before { width: 50%; top: 56px; left: 25%; margin-left: 0; } .hisCon .tabMenu:after { content: ""; display: block; height: 1px; background: #fff; width: 50%; position: absolute; top: 135px; left: 25%; } .hisCon .tabMenu li { display: block; margin:20px 0 10px; float: left; width:50%; } .hisCon .tit { height:200px; } .hisCon .tit h3 { font-size:45px; } .hisCon .listBox ul { padding-top: 30px; } .hisCon .listBox li {margin-top: 30px; } .hisCon .listBox li:before { top: 18px; } .hisCon .listBox li:after { top: 14px; } .hisCon .listBox dl:before { top: 23px; } .hisCon .listBox dt { font-size:35px; } .hisCon .listBox dt+dd { margin-top: 15px; } .hisCon .listBox dd { margin-top: 5px; } .hisCon .listBox dd em { font-size:15px; width:25px; } .hisCon .listBox dd span { font-size:15px; } /*응용제품*/ .appCon > p { font-size:16px; } .appCon ul { margin-top: 30px; } .appCon li { width:49%; margin:0 0 20px 2%; } .appCon li p { margin-top:5px; font-size:16px; } .subtabmenu li a { font-size:14px; } /*환경보고서*/ .rpCon dl dt { font-size:25px; } .rpCon dl dd { font-size:16px; } .rpCon .img { margin-top: 20px; } .rpCon .img li { float: none; width:100%; } .rpCon .btn { margin-top: 20px; } .rpCon .btn li { width: 140px; margin:0 5px; } .rpCon .btn li a { height:50px; line-height:50px; font-size:16px; } .rpCon .btn li a img { display: none; } /*분쟁지역 광물 사용지침*/ .guideCon h3 { font-size:30px; } .guideCon h3 span { display: block; font-size:28px; } .mineral { margin: 20px auto 0; width: 100%; } .mineral li { width: calc(50% - 20px); height: 40vw; border-width:6px; } .mineral li p { font-size:6vw; } .mineral li p span { font-size:16px; } .guideCon h4 { font-size:28px; margin-top: 40px; } .guideCon h4 span { display: block; font-size:25px; } .guideCon .list { padding:20px 0 100px; } .guideCon .list li { margin-top: 20px; } .guideCon .list dl { width:calc(100% - 95px); } .guideCon .list dl { font-size:16px; } /*환경안전 방침*/ .planCon .tit { width:100%; height: 440px; background-size:380px; } .planCon .tit h3 { font-size:23px; } .planCon .tit h3 span { font-size:25px; } .planCon > article { padding-bottom: 50px; } .planCon > article > div { float: none; width:100%; margin:0 0 20px; } .planCon i { margin: 0 auto; } .planCon dl { height:auto; text-align: center; } .planCon dt { font-size:25px; } .planCon dd { display: inline-block; min-width:280px; letter-spacing: -.8px; padding-left:10px; } /* 22.06.17 */ /* 안전 보건 방침 */ .safetyPolicyCon > article { margin: 35px auto 25px; } .safetyPolicyCon .title h4 { font-size: 24px; } .safetyPolicyCon .title p { font-size: 16px; } .safetyPolicyCon .tit h3 { font-size: 21px; } .safetyPolicyCon .tit h3 span { font-size: 23px; } .safetyPolicyCon > article > div { flex-direction: column; gap: 20px 0; } .safetyPolicyCon .box { width: 100%; margin: 0; } .safetyPolicyCon .box dl { width: 100%; } .safetyPolicyCon dd { display: inline-flex; text-align: center; min-width: 320px; /* 24.02.02 */ box-sizing: border-box; } .safetyPolicyCon .box1 dd, .safetyPolicyCon .box2 dd { text-align: center; } /*안전 보건 현황*/ .safetyCon > article > ul:after { width: 85px; } .safetyCon li img { margin:10px 0 0 45px; height:65px; } .safetyCon li dl { margin:10px 0 0 20px; width: calc(100% - 200px); } .safetyCon li dt { font-size:20px; } .safetyCon li dd { line-height:140%; } /*경영방침*/ .mqCon .tit { margin: 0 auto; width:100%; height: 385px; background-size:auto 385px; background-position:top center; } .mqCon .tit h3 { margin-top: 150px; } .mqCon .tit h3 img { height:25px; } .mqCon .tit dl { margin-top: 10px; } .mqCon .tit dt { font-size:25px; } .mqCon .tit dt span { display: block; } .mqCon .tit dd { margin-top: 10px; font-size:17px; font-weight: 300; color: #5b606d; line-height:130%; text-shadow:0 0 2px 2px rgba(255,255,255,.8); } .mqCon .tit dd em { color: #0b479b; font-size:20px; font-weight: 700; } .mqCon .listBox dl { float: none; width: 100%; height:auto; margin-bottom: 20px; } .mqCon .listBox dt { font-size:20px; } .mqCon .listBox dd { margin-top: 5px; font-size:15px; } /*품질방침*/ .mq2Con .listBox { padding-bottom: 50px; } .mq2Con .listBox div { float: none; width:100%; margin:20px 0 0; } .mq2Con .listBox p { float: none !important; margin: 0 auto; } .mq2Con .listBox p { width: 130px; height: 130px; } .mq2Con .listBox p img { margin-top:30px; height: 45px; } .mq2Con .listBox p span { font-weight: 700; } .mq2Con .listBox dl { margin:10px auto 0 !important; } .mq2Con .listBox dt { font-size:20px; } .mq2Con .listBox dd { margin-top: 10px; font-size:15px; } /*윤리경영*/ .eth1Con .tit dt { font-size:28px; } .eth1Con .tit dd { margin-top: 20px; font-size:17px; } .eth1Con .tit dd span { display: inline; margin-left: 4px; } .eth1Con .process li { display: block; margin:5px auto; } .eth1Con .process li > div { width:140px; height:140px; margin: 0 auto; } .eth1Con .process li > div img { height: 45px; } .eth1Con .process li > div p { font-size:16px; } .eth1Con aside { width:100%; height:auto; padding:15px; } .eth1Con aside i { margin:0; } .eth1Con aside p { font-size:16px; margin:5px 0 5px 20px; width:calc(100% - 80px); } .eth1Con aside p br { display: none; } /*윤리규정*/ .eth2Con > article { margin-top: 20px; } .eth2Con .txt { width: 100%; padding-bottom: 20px; } .eth2Con .txt > div { margin:20px 0 0 0; } .eth2Con .txt p br { display: none; } .eth2Con .txt ul { margin-top: 25px; } .eth2Con .txt li { padding-left:15px; } .eth2Con .txt dt { margin: 25px 0 10px; padding-left:15px; } .eth2Con .txt dd { margin-left:15px; } .eth2Con .txt dd br { display: none; } .eth2Con .img { width:100%; } /* 사회공헌 */ .socialCon .item .text{ margin-top: 15px; } .socialCon .item .text strong{ font-size: 20px; } .socialCon .item .text p{ font-size: 15px; } /*상담 및 제보*/ .eth3Con .img { width: 100%; padding-bottom: 40%; position: relative; overflow: hidden; } .eth3Con .img img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; max-height: 100%; width:auto; } .eth3Con h3 { margin-top: 30px; padding-left:20px; font-size:25px; } .eth3Con h3:before { top: 10px; } .eth3Con h3+p { font-size:16px; margin:10px 0 0 20px; } .eth3Con .process { margin: 25px 0 0 0; } .eth3Con .process li { width: 100%; margin:0 0 20px; } .eth3Con .process li div { padding-bottom: 50%; } .eth3Con .process li dl { height:80px; } .eth3Con .process li dt { width: 80px; height: 100%; } .eth3Con .process li dt img { height:45px; } .eth3Con .process li dd { width:calc(100% - 80px); padding:15px; font-size:15px; } .eth3Con .box ul { float: none; margin:15px 0 0 15px; } .eth3Con .box li { font-size:16px; padding-left:15px; margin-bottom: 5px; } .eth3Con .box li:before { top: 10px; } .eth3Con .box dl { width: 100%; height:auto; padding:25px; } .eth3Con .box dt { font-size:25px; } /*환경영향*/ .enviCon .tabMenu { height: auto; } .enviCon .tabMenu li { width:50%; height:55px; border-bottom:1px solid #d4d4d4; border-right:1px solid #d4d4d4; border-left:none; } .enviCon .tabMenu li:nth-child(even) { border-right:none; } .enviCon .tabMenu li:last-child { border-bottom:none; } .enviCon .tabContent { margin-top: 40px; } .enviCon h3 { margin-top:40px; } .enviCon .box_wid li i { width: 125px; height: 125px; } .enviCon .box_wid li dl { margin-top:20px; height: 210px; padding:0 10px; } .enviCon #m3 .box_wid li dl{ height: 150px; } .enviCon .box_wid .rightS { padding:20px; } .enviCon .graph table { font-size:16px; } .enviCon .graph th { height: 45px; } .enviCon .box.m4 > p { font-size:16px; } .enviCon .box.m4 li { font-size:18px; } .enviCon .box.m4 li:before { margin: 0 10px; } .enviCon .box_wid2 > article > div p { line-height:140%; } .enviCon .box.m5 h4 { margin-top: 40px; height: 45px; line-height:45px; font-size:18px; padding-bottom: 20px; } .enviCon .box.m5 h4 span { top: 25px; right: 10px; font-size:15px; } .enviCon .box.m5 table { font-size:16px; } .enviCon .box.m5 thead th { height: 45px; } .enviCon .box.m5 tbody td { height: 45px; } /* TCP 개론 */ /* .tcpCon h3 { margin-top: 40px; } */ .tcpCon p { margin:15px 0 0 0; font-size:16px; } .tcpCon dl { margin:15px 0 0 0; } .tcpCon dt { font-size:16px; } .tcpCon dd { margin-top:15px; } .tcpCon .secBox div { padding:20px; } /* 스템코 보유기술 */ /* .keepCon h3 { margin-top: 50px; } */ .keepCon .box { margin:25px 0 0 0; } .keepCon .box > p { font-size:16px; } .keepCon .box li { float: none; width: 100%; margin:0 0 25px 0; } .keepCon .box li p { margin-top: 15px; font-size:16px; } .keepCon > article { margin-top: 50px; } .keepCon > article dl { float: none; margin:15px 0 0 0; } .keepCon > article dt { font-size:18px; } .keepCon > article dd { font-size:16px; } .inquiryBox .ipbox tbody td input.ip02 { width:calc(50% - 13px); } .inquiryBox .ipbox tbody td input.ip03 { width:100%; } .inquiryBox .ipbox tbody td input.ip04 { width:100% !important; margin:4px 0 0 0; } .inquiryBox .ipbox tbody td select.sel01 { width:100%; margin:5px 0 0 0 !important; } .inquiryBox .ipbox tbody td select.sel02 { width:100%; margin:0 0 5px 0 !important; } .inquiryBox .ipbox tbody td .bar-s { display:none; } /* 2022-12-07 증명서 발급 */ .tcpCon.issue .step ul li::after{ right: -20%; } .tcpCon.issue .step ul li .image{ width: 160px; height: 160px; } }