/* media max-width(766) */ /* all */ body {font-size:13px;} /* input */ textarea {height:168px;} .fileWrap input[type="text"] {width:calc(100% - 92px);} .fileWrap p {float:none; clear:both; width:100%; font-size:11px;} .btnWrap { margin-left: 0; } /* header */ .headerContainer {height:64px;} .headerContainer.active {top:-64px;} .headerContainer .header {height:64px; padding:0 16px;} .header .logoWrap {margin-top:18px;} .header .logoWrap .logo_purecell {display:inline-block; margin-top:7px; } .header .gnbWrap {display:none;} .header .gnbWrap > ul.gnb > li > p { font-size:20px;} .menuopen .header .gnbWrap {width:272px; } .header .gnbContainer .close {right:280px;} .header .servicesWrap {margin-top:19px;} .header .servicesWrap .selectForm {display:none;} .header .servicesWrap .searchWrap .searchContainer {top:63px;} .header .servicesWrap .searchWrap .searchContainer.on {height:85px;} .header .servicesWrap .searchWrap .searchContainer .inputWrap {margin:21px auto;} /*footer */ .footerContainer {margin-top:65px;} .footerContainer .footer {padding:0 16px;} .footerContainer .footer .footerMenuWrap {/*overflow:hidden;*/ height:auto;} .footerContainer .footer .footerMenuWrap > ul {padding:36px 0 31px;} .footerContainer .footer .footerMenuWrap > ul li {margin:0; margin-right:20px;} .footerContainer .footer .footerMenuWrap > ul li a {line-height:1; padding:9px 0;} .footerContainer .footer .footerMenuWrap .familysiteWrap {height:39px; margin-bottom:20px;} .footerContainer .footer .logoWrap {padding:20px 0; line-height:35px;} .footer .logoWrap > img {margin-top: 12px;} /*quickmenu */ .quickmenu .quickWrap{ width:36px; } .quickmenu.on .quickWrap{ width:36px; } .quickmenu li p { display: none; } .quickmenu li { height:36px; line-height:36px; width:36px; } .viewWrap {} .viewWrap .titleWrap {padding:28px 20px 24px;} .viewWrap .titleWrap p {margin-bottom:10px;} .viewWrap .titleWrap span {font-size:10px;} .viewWrap .viewContents .view {font-size:13px; margin:35px 0 43px;} .viewWrap .viewContents .view .imgContents {margin:40px auto;} .viewWrap .viewContents .view .imgContents p {font-size:14px; margin-top:15px;} .viewWrap .viewContents .file {width:100%;} .viewWrap .boardList {} .viewWrap .boardList li {font-size:13px; padding:15px 0; height:42px;} .viewWrap .boardList li:first-child {} .viewWrap .boardList a {width:calc(100% - 40px); margin-top:0px;} .viewWrap .boardList img {margin:-2px 14px 0 16px;} .viewWrap .boardList li:last-child img {margin-top:-8px;} .viewWrap .btnWrap {margin-top:20px;} .titleWrap {} .titleWrap > p {} .imgDeviceWrap li.deviceT { display:none; } .imgDeviceWrap li.deviceP { display:block; } /* content */ .contentsContainer {padding-top:64px;} .contentsContainer .keyvisualWrap {height:240px;} .contentsContainer .keyvisual h1 {padding-top:85px;} .contentsContainer .menuContainer {} .contentsContainer .menuContainer li.swiper-slide {margin:0 12px;} .contentsContainer .menuContainer li a {font-size:13px; padding:20px 0 16px;} .contentsWrap {padding:0 16px;} .contentsWrap .contents {} .contentsWrap .contents:first-child {margin-top:50px;} p.information {font-size:15px;} p.information + dl.information {margin-top:50px;} .tab + p.information {font-size:14px;} div.information h2 {margin:50px 0 20px;line-height:1.6;} div.information .infoWrap {line-height:1.6;} div.information .infoWrap table {margin-top:16px;} div.information .infoWrap table thead th {font-size:14px; padding:12px 10px;} div.information .infoWrap table tbody td {font-size:14px; padding:12px 10px; } .header .servicesWrap .searchWrap{ margin-right: 22px;} .tableWrap {} .tableWrap .inputContainer {float:none; width:100%; text-align:left; margin-bottom:30px;} .tableWrap .inputContainer .selectWrap {width:calc(38% - 22px); margin-right:22px;} .tableWrap .inputContainer .selectWrap select {height:39px;} .tableWrap .inputContainer .inputWrap {width:58%;} .tableWrap .inputContainer .inputWrap input[type="text"] {width:calc(100% - 39px); height:39px;} .tableWrap .inputContainer .inputWrap a {width:39px;} .tableWrap table td.left {padding:0 10px;} .tableWrap3 {overflow-x:auto; overflow-y:auto;} .tableWrap3 table {width:766px;} /** 기술/제품 > 연료전지란 > 두산퓨얼셀 기술 **/ .tech0101 {} .tech0101 .techWrap {background:url("../images/img_tech0101_02.png") 50% 0% no-repeat; background-size:217px; padding-top:267px; margin-top:75px;} .tech0101 .techWrap li {width:100%; height:auto;margin-bottom:50px;} .tech0101 .techWrap li:nth-child(odd) {float:none; clear:both; padding:0;} .tech0101 .techWrap li:nth-child(even) {float:none; clear:both; padding:0;} .prod .prodContainer .prodWrap .plus li:nth-child(3){bottom: -100px;} .prod .prodContainer .prodWrap .plus li:last-child{bottom: -100px;} /** 기술/제품 > 연료전지란 > 두산퓨얼셀 기술 **/ .tech0102 {} .tech0102 .techWrap {width:100%; height:87vw;} .tech0102 .techWrap .product li img {width:100%; margin-top:0;} .tech0102 .techWrap .product li p {top:70vw;} .tech0102 .techBtn {position:static;margin-top:15px;} .tech0102 .techBtn li {width:25%; float:left; height:auto; padding-top:24vw; margin-top:30px;margin-bottom:0;} .tech0102 .techBtn li:nth-child(-n + 2) {margin-bottom:0;} .tech0102 .techBtn li:nth-child(odd) {clear:none; float:left;} .tech0102 .techBtn li:nth-child(even) {float:left;} .tech0102 .techBtn li p {font-size:14px;} .tech0102 .techWrap .plus li {width:7px; height:7px;} .tech0102 .techWrap .plus li:after {width:7px; height:1px; margin-top:-4px;} .tech0102 .techWrap .plus li:before {width:1px; height:7px; margin-left:3px;} /** 기술/제품 > 고객가치 > 친환경 에너지 **/ .tech0201 {} .tech0201 .graphContainer thead tr:nth-child(2) th:last-child {display:none;} .tech0201 .graphContainer tbody tr td:last-child {width:0; display:none;} .tech0201 .graphContainer tbody tr:nth-child(2) td:last-child {display:table-cell;} .tech0201 .graphContainer {text-align:center;} .tech0201 .graphContainer table + ul {font-size:14px; font-weight:300; margin-left:0; margin-top:30px; display:inline-block; text-align:center;} .tech0201 .graphContainer table + ul li {margin-right:1em;} .tech0201 .graphContainer table + ul li:last-child {margin-right:0;} .tech0201 .graphContainer table.title thead tr th p {font-size:15px; padding:4px 0;} .tech0201 .graphContainer table.title thead tr th:first-child {width:25%;} .tech0201 .graphContainer table.title thead tr th:nth-child(2) {width:50%;} .tech0201 .graphContainer table.title thead tr th:nth-child(3) {width:25%;} .tech0201 .graphContainer table.title thead tr th:nth-child(4) {display: none;} .tech0201 .graphContainer table.title thead tr th:nth-child(2) p {margin:0 6px;} .tech0201 .graphContainer table.title thead tr th:nth-child(3) p {margin:0 6px;} .tech0201 .graphContainer th,.tech0201 .graphContainer td {width:25%;} .tech0201 .graphContainer thead tr th:first-child, .tech0201 .graphContainer tbody th {width:25%;} .tech0201 .graphContainer thead tr:first-child th:nth-child(2) {width:25%;} .tech0201 .graphContainer thead tr:first-child th:nth-child(3) {width:25%;} .tech0201 .graphContainer thead tr th:nth-child(4), .tech0201 .graphContainer tbody td:nth-child(4) {width:25%;} .tech0201 .graphContainer thead tr:first-child th:last-child {width:calc((100% - 190px) / 4);} .tech0201 .graphContainer table + table thead th br {display:block;} .tech0201 .graphContainer table + table thead tr th p {font-size:14px; padding:13px 0; margin-bottom:10px;} .tech0201 .graphContainer table + table thead tr th:nth-child(2) p, .tech0201 .graphContainer table + table thead tr th:nth-child(3) p, .tech0201 .graphContainer table + table thead tr th:nth-child(4) p {margin-left:6px; margin-right:6px; font-size:11px; } .tech0201 .graphContainer table + table thead tr th:last-child {display:none;} .tech0201 .graphContainer tbody th, .tech0201 .graphContainer tbody td {font-size:14px;} .tech0201 .graphContainer tbody th img {margin:25px auto 0;} .tech0201 .graphContainer tbody th .headWrap {margin-right:0; text-align:center;} .tech0201 .graphContainer tbody th .headWrap p { top:100px; background-color:rgba(255, 255, 255, 0.5);} .tech0201 .graphContainer tbody th p {position:absolute; right:auto; left:0; top:10px;} .tech0201 .graphContainer tbody td .graphWrap {padding:2px 0 2px 1px;} .tech0201 .graphContainer tbody td .graphWrap .graphBox {width:100%; height:130px; font-size:14px; position:relative;} .tech0201 .graphContainer tbody tr:first-child td .graphWrap .graphBox {background:none;} .tech0201 .graphContainer tbody tr:nth-child(2) td .graphWrap .graphBox {background:none;} .tech0201 .graphContainer tbody tr:first-child td:nth-child(4) .graphWrap .graphBox {background:none;} .tech0201 .graphContainer tbody tr:nth-child(2) td:nth-child(4) .graphWrap .graphBox {background:none;} .tech0201 .graphContainer tbody tr td .graphWrap {border-left:none;} .tech0201 .graphContainer tbody tr:first-child td .graphWrap {border-top:none;} .tech0201 .graphContainer tbody tr td:nth-child(2) .graphWrap {margin-right:6px;margin-left:6px;} .tech0201 .graphContainer tbody tr td:nth-child(3) .graphWrap {margin-left:6px; margin-right:6px;} .tech0201 .graphContainer tbody tr td:nth-child(4) .graphWrap {margin-left:6px;} .tech0201 .graphContainer tbody tr td .graphWrap span {margin-bottom:5px; width:40px; position:absolute; bottom:0; left:50%; margin-left:-20px;} .tech0201 .graphContainer tbody tr td .graphWrap .graph {margin-top:0; margin-left:-8px; width:16px !important;height:0; position:absolute; bottom:0; left:50%; } .tech0201 .graphContainer tbody tr:first-child td:nth-child(4) .graphWrap .graphBox span {bottom:13%;} .tech0201 .graphContainer tbody tr:nth-child(2) td:nth-child(2) .graphWrap .graphBox span {bottom:1%;} .tech0201 .graphContainer tbody tr:nth-child(2) td:nth-child(3) .graphWrap .graphBox span {bottom:45.3%;} .tech0201 .graphContainer tbody tr:nth-child(2) td:nth-child(4) .graphWrap .graphBox span {bottom:13%;} .tech0201 .graphContainer tbody tr:nth-child(3) td:nth-child(2) .graphWrap .graphBox span {bottom:36%;} .tech0201 .graphContainer tbody tr:nth-child(3) td:nth-child(3) .graphWrap .graphBox span {bottom:67.9%;} .tech0201 .graphContainer tbody tr:nth-child(3) td:nth-child(4) .graphWrap .graphBox span {bottom:14%;} .tech0201 .graphContainer tbody tr:nth-child(4) td:nth-child(2) .graphWrap .graphBox span {bottom:72%;} .tech0201 .graphContainer tbody tr:nth-child(4) td:nth-child(3) .graphWrap .graphBox span {bottom:52.5%;} .tech0201 .graphContainer tbody tr:nth-child(4) td:nth-child(4) .graphWrap .graphBox span {bottom:16%;} .tech0201 .graphContainer tbody tr:first-child td:nth-child(4) .graphWrap .graphBox .graph {height:0%;} .tech0201 .graphContainer tbody tr:nth-child(2) td:nth-child(2) .graphWrap .graphBox .graph {height:0%;} .tech0201 .graphContainer tbody tr:nth-child(2) td:nth-child(3) .graphWrap .graphBox .graph {height:0%;} .tech0201 .graphContainer tbody tr:nth-child(2) td:nth-child(4) .graphWrap .graphBox .graph {height:0%;} .tech0201 .graphContainer tbody tr:nth-child(3) td:nth-child(2) .graphWrap .graphBox .graph {height:0%;} .tech0201 .graphContainer tbody tr:nth-child(3) td:nth-child(3) .graphWrap .graphBox .graph {height:0%;} .tech0201 .graphContainer tbody tr:nth-child(3) td:nth-child(4) .graphWrap .graphBox .graph {height:0%;} .tech0201 .graphContainer tbody tr:nth-child(4) td:nth-child(2) .graphWrap .graphBox .graph {height:0%;} .tech0201 .graphContainer tbody tr:nth-child(4) td:nth-child(3) .graphWrap .graphBox .graph {height:0%;} .tech0201 .graphContainer tbody tr:nth-child(4) td:nth-child(4) .graphWrap .graphBox .graph {height:0%;} .tech0201 .graphContainer.on tbody tr:first-child td:nth-child(4) .graphWrap .graphBox .graph {height:13%;} .tech0201 .graphContainer.on tbody tr:nth-child(2) td:nth-child(2) .graphWrap .graphBox .graph {height:1%;} .tech0201 .graphContainer.on tbody tr:nth-child(2) td:nth-child(3) .graphWrap .graphBox .graph {height:45.3%;} .tech0201 .graphContainer.on tbody tr:nth-child(2) td:nth-child(4) .graphWrap .graphBox .graph {height:13%;} .tech0201 .graphContainer.on tbody tr:nth-child(3) td:nth-child(2) .graphWrap .graphBox .graph {height:36%;} .tech0201 .graphContainer.on tbody tr:nth-child(3) td:nth-child(3) .graphWrap .graphBox .graph {height:67.9%;} .tech0201 .graphContainer.on tbody tr:nth-child(3) td:nth-child(4) .graphWrap .graphBox .graph {height:14%;} .tech0201 .graphContainer.on tbody tr:nth-child(4) td:nth-child(2) .graphWrap .graphBox .graph {height:72%;} .tech0201 .graphContainer.on tbody tr:nth-child(4) td:nth-child(3) .graphWrap .graphBox .graph {height:52.5%;} .tech0201 .graphContainer.on tbody tr:nth-child(4) td:nth-child(4) .graphWrap .graphBox .graph {height:16%;} /** 기술/제품 > 고객가치 > 안전한 기술 **/ .tech0202 {} .tech0202 .contents > ul > li {width:100%; clear:both; float:none;margin-bottom:40px; } .tech0202 .contents > ul > li:nth-child(even) {margin-left:0;} .tech0202 .contents > ul > li:nth-child(-n + 2) {margin-bottom:40px;} .tech0202 .contents > ul > li:nth-child(n + 3) .imgWrap {vertical-align:top;} .tech0202 .contents > ul > li .imgWrap {width:104px;float:left; display:inline-block;} .tech0202 .contents > ul > li:last-child .imgWrap {width:104px;padding-bottom:0;} .tech0202 .contents > ul > li:last-child .imgWrap li:nth-child(-n + 5) {margin-bottom:0;} .tech0202 .contents > ul > li .textWrap {float:left; padding-left:10px;width:calc(100% - 104px);margin-top:0;} .tech0202 .contents > ul > li .textWrap p {font-size:13px;} .tech0202 .contents > ul > li .textWrap span {font-size:14px;} .tech0202 .contents > ul > li .imgWrap ul li {width:33.3%;} /** 기술/제품 > 고객가치 > 고효율 발전 **/ .tech0203 {} .tech0203 .contents > ul > li {margin-top:70px;} .tech0203 .contents > ul > li .titleWrap p {font-size:15px;} .tech0203 .contents > ul > li:first-child .tableContainer {padding:15px 33px 0 0;} .tech0203 .contents > ul > li:first-child .tableContainer .icon {position:relative; width:50%; height:36px; float:right;} .tech0203 .contents > ul > li:first-child .tableContainer .icon:before {content:""; width:100%; background:#c9caca; height:1px; display:block; top:50%; position:absolute;} .tech0203 .contents > ul > li:first-child .tableContainer .icon li {z-index:1; top:0 !important; width:50%; height:auto; text-align:center;} .tech0203 .contents > ul > li:first-child .tableContainer .icon li img {width:36px; margin:0 auto;} .tech0203 .contents > ul > li:first-child .tableContainer .icon li span {margin:0; width:22px;position:absolute; top:0;left:calc(50% - 11px);} .tech0203 .contents > ul > li:first-child .tableContainer .icon li:first-child {left:0;} .tech0203 .contents > ul > li:first-child .tableContainer .icon li:nth-child(2) {left:50%;} .tech0203 .contents > ul > li:first-child .tableContainer .icon li:first-child span { margin-left:-60px;} .tech0203 .contents > ul > li:first-child .tableContainer .icon li:nth-child(2) span {/*left:50%;*/ margin-left:30px;} .tech0203 .contents > ul > li:first-child .title {padding:0; float:left; width:50%; } .tech0203 .contents > ul > li:first-child .title li {float:none; width:100%; padding:0;height:92px; margin-bottom:25px;} .tech0203 .contents > ul > li:first-child .title li img {width:60%; height:auto;} .tech0203 .contents > ul > li:first-child .title li .headWrap p { font-size:14px; bottom:unset; display:block;} .tech0203 .contents > ul > li:first-child .title li:nth-child(1) .headWrap p { bottom:unset; display:block; } .tech0203 .contents > ul > li:first-child .graphContainer {clear:both; padding:0; width:50%; float:right;} .tech0203 .contents > ul > li:first-child .graphContainer > li {clear:both; width:100%;height:92px; margin-bottom:25px;} .tech0203 .contents > ul > li:first-child .graphContainer > li p {margin-bottom:0; top:0 !important; bottom:auto !important;} .tech0203 .contents > ul > li:first-child .graphContainer > li ul {height:100px; margin-top:-10px;} .tech0203 .contents > ul > li:first-child .graphContainer > li > ul > li {} .tech0203 .contents > ul > li:first-child .graphContainer > li li:first-child .graphWrap {left:25%;} .tech0203 .contents > ul > li:first-child .graphContainer > li li:nth-child(2) .graphWrap {left:75%; margin-bottom:0; bottom:0 !important;} .tech0203 .contents > ul > li:first-child .graphContainer > li li .graphWrap {display:block;} .tech0203 .contents > ul > li:first-child .graphContainer > li li .graphWrap span {margin-left:-8px; margin-top:-14px; display:block;width:30px;text-align:center;} .tech0203 .contents > ul > li:first-child .graphContainer > li:first-child li:first-child .graphWrap {height:0%;} .tech0203 .contents > ul > li:first-child .graphContainer > li:first-child li:nth-child(2) .graphWrap {height:0%;} .tech0203 .contents > ul > li:first-child .graphContainer > li:nth-child(2) li:first-child .graphWrap {height:0%;} .tech0203 .contents > ul > li:first-child .graphContainer > li:nth-child(2) li:nth-child(2) .graphWrap {height:0%;} .tech0203 .contents > ul > li:first-child .graphContainer > li:nth-child(3) li:first-child .graphWrap {height:0%;} .tech0203 .contents > ul > li:first-child .graphContainer > li:nth-child(3) li:nth-child(2) .graphWrap {height:0%;} .tech0203 .contents > ul > li:first-child .graphContainer.on > li:first-child li:first-child .graphWrap {height:43%;} .tech0203 .contents > ul > li:first-child .graphContainer.on > li:first-child li:nth-child(2) .graphWrap {height:47%;} .tech0203 .contents > ul > li:first-child .graphContainer.on > li:nth-child(2) li:first-child .graphWrap {height:37%;} .tech0203 .contents > ul > li:first-child .graphContainer.on > li:nth-child(2) li:nth-child(2) .graphWrap {height:51%;} .tech0203 .contents > ul > li:first-child .graphContainer.on > li:nth-child(3) li:first-child .graphWrap {height:31%;} .tech0203 .contents > ul > li:first-child .graphContainer.on > li:nth-child(3) li:nth-child(2) .graphWrap {height:39%;} .tech0203 .contents > ul > li:nth-child(2) {} .tech0203 .contents > ul > li:nth-child(2) > ul > li {margin-top:40px; display:block;} .tech0203 .contents > ul > li:nth-child(2) > ul > li .imgDeviceWrap {float:none; width:100%; margin-left:0; margin-top:10px;} .tech0203 .contents > ul > li:nth-child(2) > ul > li:first-child .imgDeviceWrap {margin-top:0;} .tech0203 .contents > ul > li:nth-child(2) > ul > li p {float:none; margin:0 auto; font-weight:400;} .tech0203 .contents > ul > li:nth-child(3) {text-align:center;} .tech0203 .contents > ul > li:nth-child(3) .titleWrap span br {display:block;} .tech0203 .contents > ul > li:nth-child(3) > ul:nth-of-type(1) {/*overflow:hidden;*/} .tech0203 .contents > ul > li:nth-child(3) > ul:nth-of-type(1) > li {width:calc((100% - 28px) / 2); margin:0 7px;margin-bottom:1em;} .tech0203 .contents > ul > li:nth-child(3) > ul:nth-of-type(1) > li img {margin-bottom:0.8em;} .tech0203 .contents > ul > li:nth-child(3) > ul:nth-of-type(1) > li:first-child {margin-left:7px;} .tech0203 .contents > ul > li:nth-child(3) > ul:nth-of-type(2) {margin:0;display:inline-block;} .tech0203 .contents > ul > li:nth-child(3) > ul:nth-of-type(2) > li {float:none; width:100%;margin:0; margin-top:10px; padding:0; clear:both; overflow:hidden;} .tech0203 .contents > ul > li:nth-child(3) > ul:nth-of-type(2) > li:first-child {margin-left:0; display:flex; -webkit-align-items: center; align-items: center; justify-content:center;} .tech0203 .contents > ul > li:nth-child(3) > ul:nth-of-type(2) > li:first-child img {float:left; width:159px;} .tech0203 .contents > ul > li:nth-child(3) > ul:nth-of-type(2) > li:first-child span {float:left;width:15px; margin:0 10px; transform: rotate(0deg);} .tech0203 .contents > ul > li:nth-child(3) > ul:nth-of-type(2) > li:first-child p {float:left;} .tech0203 .contents > ul > li:nth-child(3) > ul:nth-of-type(2) > li .headWrap {float:right;margin-bottom:0;} .tech0203 .contents > ul > li:nth-child(3) > ul:nth-of-type(2) > li .headWrap img {width:auto; height:100px;} .tech0203 .contents > ul > li:nth-child(3) > ul:nth-of-type(2) > li .headWrap span { font-size:13px; right:0; bottom:0;} .tech0203 .contents > ul > li:nth-child(3) > ul:nth-of-type(2) > li .imgWrap {float:left; margin-right:15px;} .tech0203 .contents > ul > li:nth-child(3) > ul:nth-of-type(2) > li .imgWrap img {width:auto; height:100px;} /** 기술/제품 > 고객가치 > 높은 신뢰성 **/ .tech0204 {} .tech0204 .contents > ul > li {margin-top:45px;} .tech0204 .contents > ul > li .titleWrap p {font-size:13px;} .tech0204 .dataWrap{padding:30px 0;} .tech0204 .dataWrap .imgContainer li {float:none; width:165px; height:100px;} .tech0204 .dataWrap .imgContainer li .title {padding:6px 30px; border-top:0; border-right:1px solid #c9caca;} .tech0204 .dataWrap .imgContainer li .title img { width: 80%; margin: 0 auto; } .tech0204 .dataWrap .imgContainer li .title span {bottom:unset; left:unset; font-size:14px;display: block;} .tech0204 .dataWrap .imgContainer li:nth-child(1) .title span {left:30px;} .tech0204 .dataWrap .graphContainer {top:30px; left:165px;} .tech0204 .dataWrap .graphContainer li {float:none; width:calc(100% - 195px); height:100px;} .tech0204 .dataWrap .graphContainer li .graphWrap span {position:absolute; right:-30px; margin-top:-1px;} .tech0204 .dataWrap .graphContainer li .graphWrap {top:50%; width:135px; height:8px; left:0; margin-top: -4px; margin-left:0;} .tech0204 .dataWrap .graphContainer li .graphWrap {height:8px !important; width:0;} .tech0204 .dataWrap .graphContainer li:first-child .graphWrap {background:#00ad83;} .tech0204 .dataWrap .graphContainer.on li:first-child .graphWrap {width:95%;} .tech0204 .dataWrap .graphContainer.on li:nth-child(2) .graphWrap {width:90%} .tech0204 .dataWrap .graphContainer.on li:nth-child(3) .graphWrap {width:85%} .tech0204 .dataWrap .graphContainer.on li:nth-child(4) .graphWrap {width:17%} .tech0204 .dataWrap .graphContainer.on li:last-child .graphWrap {width:26%} /** 기술/제품 > PureCell Model400 **/ .prod .prodWrap {width:100%;} .prod .prodContainer {clear:both;width:100%; margin:0;} .prod .prodContainer .prodWrap {width:100%; height:64vw; padding:0;margin-bottom:0px;} .prod .prodInfo {width:100%; clear:both; margin-top:40px;} .prod .prodInfo ul {position:relative; overflow:hidden;} .prod .prodInfo ul:after {content:""; width:1px; height:100%; position:absolute; top:0; left:50%; background:#bfbfbf;} .prod .prodInfo ul li {float:left; width:calc(50% - 5px); height:85px; border:none; background-position:0% 50%; border-bottom:1px solid #bfbfbf; padding-top:15px;} .prod .prodInfo ul li:last-child {border-bottom:none; height:110px; background-size:45%;} .prod .prodInfo ul li:nth-child(even) {float:right;} .prod .prodInfo ul li dl {font-size:14px; padding-left:46%;} .prod .prodInfo ul li dt {} .prod .prodInfo ul li dd {font-size:13px;} .prod .prodInfo ul li dd span { width:32px;} .prod0103 .prodInfo ul li dd span { width:29px;} .prod .prodInfo ul li:before {display:none;} .prod .prodContainer .prodWrap .plus li {width:7px; height:7px;} .prod .prodContainer .prodWrap .plus li:after {width:7px; height:1px; margin-top:-4px;} .prod .prodContainer .prodWrap .plus li:before {width:1px; height:7px; margin-left:3px;} /* 회사소개 > CEO 메시지 */ .intr0101 {} .intr0101 .titleWrap > p {line-height:1.5; margin-top: -5px;} .intr0101 .titleWrap > p br {display:none;} .intr0101 .imgWrap {height:295px; margin:32px auto 21px; background-position: 100% 50%;} .intr0101 .contents > p {font-size:14px;} .intr0101 .contents > p span {font-size:13px;text-align: right;} .intr0101 .contents > p span img {height:35px; margin-top:6px; margin-left:0px;} /* 회사소개 > 비전 */ .intr0201 {} .intr0201 .motionContainer .logo {padding-top:25px;} .intr0201 .motionContainer.on .logo {padding:0 0 25px;} .intr0201 .motionContainer .logo img {height:52px;} .intr0201 .motionContainer ul {} .intr0201 .motionContainer ul:after {} .intr0201 .motionContainer.on ul:after {} .intr0201 .motionContainer li {font-size:17px;} .intr0201 .motionContainer li:nth-child(2) {} .intr0201 .motionContainer li:nth-child(3) {} .intr0201 .motionContainer li:nth-child(3) img {} .intr0201 .motionContainer li:nth-child(4) {} .intr0201 .motionContainer li:last-child {} .intr0201 .motionContainer li:last-child span {} .intr0201 .motionContainer.on li:nth-child(2) {} .intr0201 .motionContainer.on li:nth-child(3) {} .intr0201 .motionContainer.on li:nth-child(3) img {} .intr0201 .motionContainer.on li:nth-child(4) {top:calc(50% - 1.3em); height:1.3em;} .intr0201 .motionContainer.on li:last-child {height:1.4em;} .intr0201 .motionContainer.on li:last-child span {height:1.1em;} .intr0201 .contents > ul {} .intr0201 .contents > ul:before {width:22px; margin:50px auto 59px;} .intr0201 .contents > ul li {float:none; width:100%; margin-left:0; margin-top:1px; padding-top:19px;} .intr0201 .contents > ul li .title {width:79px; height:79px; margin:0 auto 19px; padding:0;} .intr0201 .contents > ul li p {font-size:14px; padding:13px 0; } .intr0201 .contents > ul li p span {font-size:13px; margin-bottom:3px;} .intr0201 .contents > ul li p span br {display:none;} .intr0301 .graphContainer .historyGraph .leftGrapth { position:relative; float: none; width:100%; margin-top:calc(72% + 50px); } .intr0301 .graphContainer .historyGraph .rightGrapth { position: absolute; float: none; top: calc((72% + 50px) * -1); width: 100%; height: 72%; padding-top:0; } .intr0301 .graphContainer .historyGraph .rightGrapth .rate-number { top: calc(23% + 21%); left: calc(50% - 74px); font-size: 135px; color: #00ad83; line-height:0.7; } /* 회사소개 > CI */ /* .intr0501 {} .intr0501 .downWrap {text-align:center;} .intr0501 .downWrap a {font-size:14px; } .intr0501 dl.information dt {text-align:center;margin-bottom:5px;} .intr0501 dl dd .tableWrap {width:100%;} .intr0501 dl dd .tableWrap table { font-size:14px;} .intr0501 dl dd .tableWrap th p {width:70px; height:70px;} .intr0501 dl dd .tableWrap tr:first-child th p {top:10px; left:11px;} .intr0501 dl dd .tableWrap tr:nth-child(7) th p {top:4px; left:5px;} .intr0501 dl dd .tableWrap tr:nth-child(13) th p {top:5px; left:5px;} .intr0501 dl dd .tableWrap th {padding-bottom:0.3em;} .intr0501 dl dd .tableWrap td {padding: 0.3em 0;} .intr0501 dl dd .tableWrap th.right span {left: 46px; bottom: 0.3em;} .intr05 .contentsWrap.wide {width:100%; margin-top:50px; margin-left:0; padding:0;} .intr05 .contentsWrap.wide a {height:115px; font-size:14px; padding:80px 16px 0;} */ /* .intr0501 .ci2022_img3_txt, .intr0501 .ci2022_img4_txt {font-weight: 500;} */ /* 회사소개 > 윤리경영 > 윤리규범 */ .intr0601 {} .intr0601 dl.information dt p {display:inline-block; margin-left:0.5em;} .intr0601 dl.information dt br {display:none;} .intr0601 dl.information dt span {display:inline-block;} .intr0601 dl.information dt:nth-child(5) {font-size:20px;} /* 회사소개 > 윤리경영 > 사이버 신고센터 */ /* 회사소개 > EHS */ .contentsWrap[class*="intr07"] {} .contentsWrap[class*="intr07"] .ehsWrap {font-size:13px;} .contentsWrap[class*="intr07"] .ehsWrap li:after {height:30px; left:50%; top:-37px;} .contentsWrap[class*="intr07"] .ehsWrap li:first-child:after {display:none;} .contentsWrap[class*="intr07"] .ehsWrap li {height:auto; max-height:none; display:block; position:relative; margin-bottom:80px; text-align:center;} .contentsWrap[class*="intr07"] .ehsWrap li:first-child {align-items:flex-start;} .contentsWrap[class*="intr07"] .ehsWrap li:last-child {align-items:flex-end; margin-bottom:0;} .contentsWrap[class*="intr07"] .ehsWrap li p.num {position:static; display:block; width:100%; text-align:center; margin-top:0; font-size:19px; padding-bottom:140px;} .contentsWrap[class*="intr07"] .ehsWrap li div.text {width:100%; text-align:center; margin:0; padding:0;} .contentsWrap[class*="intr07"] .ehsWrap li:nth-child(odd) div.text,.contentsWrap[class*="intr07"] .ehsWrap li:nth-child(even) div.text {margin:0; padding:0;text-align:center; } .contentsWrap[class*="intr07"] .ehsWrap li:nth-child(odd) p.num,.contentsWrap[class*="intr07"] .ehsWrap li:nth-child(even) p.num {top:auto; bottom:auto; left:auto; right:auto;} .contentsWrap[class*="intr07"] .ehsWrap li div.text p {padding-bottom:0.6em; margin-bottom:20px;} .contentsWrap[class*="intr07"] .ehsWrap li div.text p:after {content:""; width:100%; height:1px; background:#00ad83; position:absolute; left:0; bottom:0;} .contentsWrap[class*="intr07"] .ehsWrap li div.text span {font-size:14px; font-weight:300; line-height:1.6;} .contentsWrap[class*="intr07"] .ehsWrap li {background-position:50% 27px; background-size:100px;} .contentsWrap[class*="intr07"] .ehsWrap + p span {margin-top:10px} /* 투자정보 공통 */ .container.inve .contentsWrap[class*="inve"] {} .container.inve .contentsWrap[class*="inve"] div.title { float:unset; width:100%; text-align:center; } .container.inve .contentsWrap[class*="inve"] div.title br { display:none; } .container.inve .contentsWrap[class*="inve"] div.title + div { float:none; width:100%; padding-left: 0; } .container.inve .contentsWrap[class*="inve"] div.title + div.tableWrap2 > p { /*text-align:center;*/ margin-bottom:35px; margin-top:20px; } .container.inve .contentsWrap[class*="inve"] div.title + div.tableWrap2 table td a { margin:0 auto; } .container.inve .contentsWrap[class*="inve"] div.title + div.tableWrap3 > p { text-align:center; margin-bottom:35px; margin-top:20px; } .container.inve .contentsWrap[class*="inve"] div.title + div.tableWrap3 table td a { margin:0 auto; } .container.inve .contentsWrap[class*="inve"] div.title + div.tableWrap2 table td a img {margin-left:0.2em; margin-right:0.3em; height:0.9em;} .container.inve .contentsWrap[class*="inve"] div.title .tableWrap .inputContainer {margin:40px 0} .container.inve .contentsWrap[class*="inve"] div.title + div.tableWrap table td a {margin:0 10px;} .container.inve .contentsWrap[class*="inve"] .contents > ul > li {margin-top:70px;} .container.inve .contentsWrap[class*="inve"] div.title + div.tableWrap table + p,.container.inve .contentsWrap[class*="inve"] div.title + div.tableWrap img + p {margin-top:20px;} .container.inve .contentsWrap[class*="inve"] div.title + div.tableWrap > p {margin-bottom:20px;} /*.tableWrap .inputContainer .selectWrap {width:110px;}*/ .inve0201 #content .ico_drag {display:block;position:relative;z-index:1;} .inve0201 #content .ico_drag img { width: 68px;position: absolute;left: 50%;padding-top:146px; transform: translate3d(-64px, 0, 0); animation:guide 1.3s ease-in-out infinite; -ms-animation:guide 1.3s ease-in-out infinite; -webkit-animation-delay:1s; -moz-animation-delay:1s; -o-animation-delay:1s; animation-delay:0.5s; animation-direction: alternate; } /* 투자정보 > 거버넌스 > 이사회 */ #table-inve-0202 th:nth-child(1) { width:25%; } #table-inve-0202 th:nth-child(2) { width:25%; } #table-inve-0202 th:nth-child(3) { width:25%; } #table-inve-0202 th:nth-child(4) { width:25%; } /* 투자정보 > 거버넌스 > 감사기구 */ .inve0203 {} .inve0203 .listWrap ul {} .inve0203 .listWrap ul li {font-size:13px; line-height:21px;} .inve0203 .listWrap ul li > p {width:36%; margin-top:12px;} .inve0203 .listWrap ul li ul {float:right; width:50%;} .inve0203 .listWrap ul li ul li {display:block;border-left:none;} .inve0203 .listWrap ul li ul li:first-child {width:100%;border-left:none; line-height: 18px; padding-bottom: 10px;} .inve0203 .listWrap ul li ul li:last-child {border-top: 1px solid #bfbfbf;border-left:none; width:100%; line-height: 18px; padding-top: 10px;} .inve0203 .listWrap > ul > li {background-position:10% 50%; height:153px; padding:15px 0; margin-top:82px} .inve0203 .listWrap > ul > li:after {width:100%; left:0%;} .container.inve .contentsWrap[class*="inve"] div.title p{font-size:21px; line-height:28px; padding-bottom:20px;} /* 투자정보 > 공시 */ .inve0401 #content .ico_drag {display:block;position:relative;z-index:1;} .inve0401 #content .ico_drag img { width: 68px;position: absolute;left: 50%;padding-top:146px; transform: translate3d(-64px, 0, 0); animation:guide 1.3s ease-in-out infinite; -ms-animation:guide 1.3s ease-in-out infinite; -webkit-animation-delay:1s; -moz-animation-delay:1s; -o-animation-delay:1s; animation-delay:0.5s; animation-direction: alternate; } /* 투자정보 > 전자공고 */ .inve0501 {} .inve0501 .tableWrap table th:last-child, .inve0501 .tableWrap table td:last-child {width:120px;} /* 채용 */ .recr {} .recr .recrWrap li {float:none; colear:both; width:100%; margin:0; margin-bottom:45px;} .recr .recrWrap li:nth-child(even) {margin-left:0;} .recr .recrWrap li p {font-size:14px;} .recr .recrWrap li p.title {font-size:13px; margin:10px 0 10px;} .recr .contentsWrap.wide {width:100%; margin:30px 0 0; height:200px; } .recr .contentsWrap.wide .btnWrap > img {height:39px; margin:55px auto 18px;} .recr .contentsWrap.wide .btnWrap a img {} /* 미디어센터 > 뉴스 */ .medi0101 .viewWrap {} .medi0101 .viewWrap .viewContents {padding:0;} .medi0101 .viewWrap .viewContents .view { margin:35px 0 43px; padding-top:0; width:96%} .medi0101 .viewWrap .viewContents .view p img{margin-bottom:5px;} .medi0101 .viewWrap .viewContents .summary { padding:0 0 35px 0; font-size:13px; } /* 미디어센터 > 카달로그 */ .medi0201 {} .medi0201 .title { margin-bottom:40px;} .medi0201 .catalogWrap > ul > li {width:calc(50% - 6px); margin-left:12px;padding:21px 17px;} .medi0201 .catalogWrap li > img {width:100%; height:auto;} .medi0201 li > p {position:static; margin:15px 0 30px;} .medi0201 .catalogWrap li ul {position:static;} .medi0201 .catalogWrap li ul li {margin-left:8px;} .medi0201 .catalogWrap li ul li a {font-size:14px; line-height:12px;} .medi0201 .catalogWrap li ul li img {height:12px; margin-left:0.6em} /* Contact Us */ .serv0101 .contantWrap p.title {width:89px; font-size:14px; padding-left:12px;} .serv0101 .contantWrap p.title + div {width:calc(100% - 89px);} .serv0101 .contantWrap > ul > li:first-child,.serv0101 .contantWrap > ul > li:nth-child(3) {float:none; width:100%; padding-right:0;} .serv0101 .contantWrap > ul > li:nth-child(2),.serv0101 .contantWrap > ul > li:nth-child(4) {float:none; width:100%;} .serv0101 .mailWrap {} .serv0101 .mailWrap input[type="text"] {width:calc(100% - 23px);} .serv0101 .mailWrap input[type="text"]:first-child {width:100%; margin-bottom:6px;} .serv0101 .mailWrap span.mail {font-size:14px; width:23px;} .serv0101 .agreeWrap {padding-top:20px;} .serv0101 .agreeWrap p.title {font-size:15px; margin:35px 0 15px;line-height:1.4;} .serv0101 .agreeWrap .scrollWrap {height:280px; padding:16px 12px;} .serv0101 .agreeWrap .checkWrap {margin-top:15px; padding-bottom:0} .serv0101 .agreeWrap .checkWrap p {font-size:11px; line-height:1.6;margin-bottom:15px;} .serv0101 .agreeWrap .checkWrap p.inputWrap {margin-bottom:15px;} .serv0101 .agreeWrap .checkWrap.all {margin:45px 0 5px;} .serv0101 .btnWrap {padding-top:20px;} /* 사업장 위치 */ .serv0201 {} .serv0201 .contents {} .serv0201 .contents ul {width:100%; margin:0 auto 30px;} .serv0201 .contents ul li a {font-size:14px; line-height:35px;} .serv0201 .contents dl {line-height:20px;} .serv0201 .contents dt { width: 22%; } .serv0201 .contents dd { width: 76%; text-align: left;} .serv0201 .mapWrap {height:173px;} /* 법적고지 */ .serv0301 dl.information {} .serv0301 dl.information dt {margin-right:0;} .serv0301 dl.information dd {width:100%;} /* 이용약관 */ .serv0401 dl.information {} .serv0401 dl.information dt {margin-right:0;} .serv0401 dl.information dd {width:100%;} .serv0401 .btnWrap { margin-left: 0; } /* 개인정보 처리방침 > 영상정보처리기기 운영 · 관리방침 */ .serv0502 div.information .infoWrap table thead th:nth-child(2) {width: 49%;} /*지속가능경영*/ #MESSEGE_FROM_THE_CHAIRMAN.intr0101 .contents > p.sign {font-size: 16px;} #MESSEGE_FROM_THE_CHAIRMAN.intr0101 .titleWrap > p {font-size: 18px;font-weight: 400;} .contentsWrap[class*="intr07"] .ehsWrap {padding-bottom: 0;} .contentsWrap[class*="intr07"] .ehsWrap li:nth-child(5) div.text span {padding-top: 0;} .contentsWrap.sus_linebox.sust0701 .list .item ul li {padding: 42px 0 0 15px;} .contentsWrap.sus_linebox.sust0701 .list .item p {width: 180px;} .contentsWrap.sus_linebox.sust0701 .list .item {height: 110px;} .contentsWrap.sus_linebox.sust0701 a.btnset.btn-download {min-width: auto;} .contentsWrap.sus_linebox.sust0504 dl.information dd ul li em {width: auto;} .assessment-process-flow > .parent > .proc-row > .box > span { font-size: 10px; max-width: 60px; min-width: 60px; padding: 0 2px; } .self-check-list > ul.self-check-list-form > li.body > div.img-box > p.title { font-size: 14px; min-height: 80px; } .self-check-list > ul.self-check-list-form > li > div.count { font-size: 11px; } .self-check-list > ul.self-check-list-form > li > div.count > p { font-size: 13px; } .self-check-list > ul.self-check-list-form > li.head > div.img-box:first-child { height: 24.3%; } .self-check-list > ul.self-check-list-form > li.head > div.count > p { word-break: break-all; line-height: 1.5; } .self-check-list > ul.self-check-list-form > li.head { padding: 0; } .self-check-list > ul.self-check-list-form > li.head > div.count { height: 12%; } /* 사이트맵 */ .sitemap > li { padding:30px 0; } .sitemap > li > ul > li { height: 190px; } .sitemap > li > ul > li.min-height { height:70px; } .sitemap > li > ul > li > p > a { font-size:16px; padding-bottom: 12px; } .sitemap > li > ul > li > ul > li > a { font-size:14px; }