@import url("common.css"); #footer {top:0} #visual{position:relative; overflow:hidden; width:100%; text-align:center; padding:252px 3% 152px 3%; background-size:cover; background-position:center; background-repeat:no-repeat; background-color:#000; opacity:0; box-sizing:border-box; z-index:1} #visual .subtop{position:absolute; top:0; left:0; width:100%; height:465px; background-position:center 0; background-size:cover; background-repeat:no-repeat; background-color:#000; z-index:1; animation:animate_background 2s ease-in-out;} #visual .subtop.subtop_company {background-image:url('/img/subtop_company.jpg')} #visual .subtop.subtop_tech {background-image:url('/img/subtop_tech.jpg')} #visual .subtop.subtop_pipeline {background-image:url('/img/subtop_pipeline.jpg')} #visual .subtop.subtop_service {background-image:url('/img/subtop_service.jpg')} #visual .subtop.subtop_news {background-image:url('/img/subtop_news.jpg')} #visual .subtop.subtop_careers {background-image:url('/img/subtop_careers.jpg')} #visual .subtop.subtop_other {background-image:url('/img/subtop_other.jpg')} #visual .subtop.subtop_product {background-image:url('/img/subtop_product.jpg')} #visual .subtop.subtop_product2 {background-image:url('/img/subtop_product2.jpg')} #visual .subtop.subtop_nanomedicine {background-image:url('/img/subtop_nanomedicine.jpg')} #visual .subtop.subtop_technology {background-image:url('/img/subtop_tech.jpg')} @keyframes animate_background { 0% {transform: scale(1.12); -ms-transform: scale(1.12); -webkit-transform: scale(1.12); } 100% {transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); } } #visual .vtxt {position:relative; z-index:10} #visual h3 {line-height:1; font-weight:700; color:#fff; font-family:'Poppins', sans-serif; font-size:3.5rem; opacity:0} #visual h3 a{font-family:'Poppins', sans-serif; font-size:3.5rem; color:#fff; transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;} #visual h3 a:hover{color:#d7e5ea} #contents{overflow:hidden; position:relative; margin:0 auto;} .lnbWrap {position:Relative; background:#fff; border-bottom:1px solid #ddd; text-align:center; width: 100%;} .lnb {max-width:1280px; margin:0 auto; background:#fff; box-sizing:border-box; } .lnb ul {position:relative; text-align:center; width:auto; margin:0 auto; justify-content: center;} .lnb li {position:relative; margin:0 30px; display:inline-block; z-index:999; width: auto;} .lnb li a {font-family:'Montserrat', 'Noto Sans KR', sans-serif; position:relative; font-size:1rem; color:#666; display:block; line-height:65px; transition: all 0.3s ease-out;} .lnb li a:hover {display:block; color:#21a5de; transition: all 0.3s ease-out;} .left_linktop a {display:block; color:#21a5de !important; font-weight:700 !important; text-decoration: none !important;} .left_linktop a:after {position:absolute; left:50%; transform:translate(-50%, 0); bottom:-4px; display:block; content:""; width:7px; height:7px; border-radius:7px; background-color:#21a5de;} .lnbWrap .location {font-size:15px; color:#fff; width:100%; position:absolute; top:-295px; text-align:center} .lnbWrap .location a {font-size:15px; color:#fff; } .lnbWrap .location a:hover {color:#fff;} .lnbWrap .location img {vertical-align:middle; margin:0 12px 4px 12px;} .lnbWrap .location img:first-child {margin:0 0 4px 0} .contentArea{float:left; width:780px; overflow:hidden;} .contentArea_wide{width:100%; overflow:hidden;} #contents .tit_area{width:100%; padding:95px 0 50px 0; overflow:hidden;} #contents p.location {float:right; font-size:12px; color:#777; padding:15px 0 0 0} #contents p.location a:link, .tit_area p.location a:visited{font-size:12px; color:#777; } #contents p.location a:hover{color:#222;} #contents p.location img{vertical-align:middle; margin-bottom:2px;} #contents h3.title {color:#333; line-height:1.2; font-weight:700; font-family:'Poppins', sans-serif; font-size:2.688rem; text-align:center} #contents h3.title.blue {color:#171c61; display:inline-block;} #contents h3.title.blue:after {display:block; content:""; width:100%; height:4px; background:#171c61} .contents_in {position:relative; clear:both; margin:0 auto; *zoom:1;} /*** 공통css ***/ .point_txt{font-weight:bold; color:#333; letter-spacing:0;} .tmar_20 {margin-top:20px} .tmar_30 {margin-top:30px} .tmar_50 {margin-top:50px !important} .tmar_65 {margin-top:55px} .bmar_0 {margin-bottom:0 !important} .bmar_10 {margin-bottom:10px !important} .bmar_20 {margin-bottom:20px !important} .bmar_30 {margin-bottom:30px !important} .bmar_40 {margin-bottom:40px !important} .bmar_80 {margin-bottom:80px !important} .tpad_10{padding-top:10px} .tpad_20{padding-top:20px} .tpad_35{padding-top:35px} .bpad_5{padding-bottom:5px} .bpad_10{padding-bottom:10px} .bpad_20{padding-bottom:20px} .bpad_25{padding-bottom:25px} .bpad_30{padding-bottom:30px} .bpad_40{padding-bottom:40px} .bpad_50{padding-bottom:50px} .bpad_100{padding-bottom:100px} .btpad_100{padding:100px 0} .platform_con.btpad_100{padding-bottom:0} .con_tit{font-size:20px; line-height:24px; letter-spacing:0; color:#444; font-weight:700; padding:0 0 15px 0;} .con_tit span.thin{line-height:24px; letter-spacing:0; color:#444; font-weight:100;} .table_style{width:100%; border-collapse:separate; border-spacing:0px; border-top:1px solid #333;} .table_style th {color:#fff; font-weight:700; text-align:center; padding:25px 15px; background-color:#1a2a52; font-family:'Montserrat', sans-serif; border-right:1px solid rgba(255,255,255,0.2)} .table_style th:last-child {border-right:none} .table_style th.second {padding:10px 15px; border-top:1px solid rgba(255,255,255,0.2)} .table_style td.tit {font-weight:600; color:#333; text-align:center} .table_style td {position:relative; font-family:'Montserrat', sans-serif; padding:25px 15px; text-align:left; font-weight:300; border-right:1px solid #ddd; border-bottom:1px solid #ddd} .table_style td:last-child {border-right:none; padding:0} .table_style td.blue_bg2{color:#fff; border-color:rgba(255,255,255,.2);} .table_style.two tbody tr {background:#fff} .table_style tbody tr.blueBg {background:#f3f9ff} .table_style tbody tr.blueBg:before{display:none;} .table_style tbody tr.blueBg:after{display:none;} .table_style tbody tr.grayBg {background:#f4f4f4} .table_style .line{border-bottom:1px solid #777;} .table_style .line_mar{margin:0 0 4px; position:relative; border-bottom:1px solid #777;} .table_style .line_mar:after{content:''; display:block; width:100%; height:1px; background: #777; position:absolute; left:0; bottom:4px;} .table_style2{width:100%; border-collapse:separate; border-spacing:0px; border-top:1px solid #333; border-left:1px solid #ddd;} .table_style2 th{color:#444; font-weight:600; text-align:center; padding:14px 0 14px 0; border-bottom:1px solid #ddd; background-color:#f9f9f9; border-right:1px solid #ddd;} .table_style2 td{border-bottom:1px solid #ddd; padding:14px 0 14px 0; text-align:center; border-right:1px solid #ddd;} .black {color:#333 !important} .light {font-weight:300 !important} .left {text-align:left !important} .center {text-align:center} .sub_title {font-size:1.6rem; line-height:1.4; letter-spacing:0; color:#333; font-weight:100; text-align:center; position:relative; margin-bottom:50px} .sub_title span {font-weight:inherit; line-height:inherit; letter-spacing:inherit; font-family:inherit} .sub_title.quote:before, .sub_title.quote:after {display:inline-block; content:""; vertical-align:top; margin-right:8px; width:20px; height:17px; background:url('/eng/company/img/quote01.png') center center/100% no-repeat; line-height:inherit} .sub_title.quote:after {margin:0 0 0 8px; background-image:url('/eng/company/img/quote02.png')} .sub_title.quote.skyblue:before {background-image:url('/eng/pipeline/img/quote01_b.png')} .sub_title.quote.skyblue:after {background-image:url('/eng/pipeline/img/quote02_b.png')} .sub_stitle {font-size:1.875rem; line-height:1.4; letter-spacing:0; color:#333; font-weight:400; text-align:center; position:relative; margin-bottom:30px} .sub_stitle span {font-weight:inherit; line-height:inherit; letter-spacing:inherit; font-family:inherit} .sub_txt {letter-spacing:0; position:relative; font-size:1rem; color:#777; font-weight: 300; } .sub_txt span {letter-spacing:inherit; line-height:inherit; font-size:inherit;} .sub_txt.cen{text-align:center;} .sub_txt2 {letter-spacing:0; position:relative; font-size:1rem; color:#777; font-weight: 300; } .sub_txt2 span {letter-spacing:inherit; line-height:inherit; font-size:inherit;} .sub_txt2.cen{text-align:center;} .botit{font-size:1.375rem; font-family:'Montserrat', sans-serif; font-weight:700; color:#333; line-height:1.2; margin-bottom:10px;} .botitle{font-size:2.375rem; color:#333; font-weight:700; line-height:1.2; letter-spacing:0; margin-bottom:20px; } .bostxt{font-size:1.125rem; font-weight:300; letter-spacing:0; line-height:28px} .le0{ line-height:inherit; font-size:inherit; letter-spacing:0 !important; font-family:'Montserrat', sans-serif !important; } .dot {position:relative; overflow:hidden;} .dot p {letter-spacing:0; position:relative; font-size:1rem; color:#777; padding:0 0 3px 10px} .dot.eng p {font-family:'Montserrat', sans-serif; letter-spacing:0} .dot p:last-child {padding-bottom:0 !important} .dot p:before {display:block; content:""; width:3px; height:3px; background:#333; opacity:0.5; position:absolute; top:12px; left:0} .dot p.skyblue:before {opacity:1; background:#21a5de} .dot_title{display:inline-block; position: relative; font-size:1.875rem; color:#333; font-weight:700; letter-spacing:0; line-height:1.2} .dot_title:after{width:7px; height:7px; display:block; background:#21a5de; content: ""; border-radius: 100%; position: absolute; right: -11px; top: 0;} .dep_tit {position: relative; font-size:1.5rem; color:#333; font-weight:700; letter-spacing:0; text-align:center; margin-bottom:25px; line-height:1.5} .dep_tit2 {position: relative; font-size:1.25rem; color:#333; font-weight:700; letter-spacing:0; line-height:1.5; background:url('/img/dep_tit2.png') left 8px no-repeat; padding:0 0 8px 26px;} .imgBox {border:1px solid #ddd;} .imgBox img {width:100%} .moreBtn {display:block; margin:-30px auto 0 auto; width:190px; line-height:60px; color:#fff; letter-spacing:0; padding:0 25px; border:1px solid #21a5de; background:#21a5de url('/img/moreBtn.png') right 25px center no-repeat; border-radius:60px; transition: all 0.3s ease-out; z-index:10; position:relative;} .moreBtn:hover {color:#21a5de; background-color:#fff; background-image:url('/img/moreBtn_sb.png'); transition: all 0.3s ease-out;} #sub_tab {display: table !important; width: 100%; table-layout: fixed; text-align: center; margin-bottom: 60px;} #sub_tab.show680 {display:none !important} #sub_tab li {display: table-cell; vertical-align: middle;} #sub_tab li a {font-size:1.75rem; font-weight:700; font-family:'Montserrat', 'Noto Sans KR', sans-serif; display: flex; justify-content: center; align-items: center; height: 65px; letter-spacing:0; border-bottom: 4px solid #bababa; color:#bababa; transition: all 0.3s ease-out; } #sub_tab li a:hover {border-color:#171c61; color:#171c61} #sub_tab li a.on {border-color:#171c61; color:#171c61} .blueBox {background:#f3f9ff; padding:100px 3%} .responsive-dim{display:none;} /************* COMPANY *************/ /* OVERVIEW */ .overview_con {} .overview_con .sub_title {} .overview_con .overviewList {border:1px solid #ddd; box-sizing:border-box; position:relative; height:507px; background:url('/eng/company/img/overview_border.png') center center no-repeat} .overviewList .overview_tit {font-size:1.625rem; line-height:1.3; letter-spacing:0; color:#fff; width:300px; height:300px; border-radius:300px; background:#21a5de; border:30px solid #eef8fc; display:flex; justify-content:center; align-items:center; text-align:center; font-weight:400; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%)} .overviewList .overviewList_in {} .overviewList .overviewList_in dl {position:absolute; top:100px; left:50%; margin:0 3% 0 240px} .overviewList .overviewList_in dt {font-weight:700; font-family:'Montserrat', 'Noto Sans KR', sans-serif;letter-spacing:0; font-size:1.375rem; line-height:1.3; margin-bottom:10px; color:#333} .overviewList .overviewList_in dd {} .overviewList .overviewList_in dl:nth-child(odd) {text-align:right; left:auto; right:50%; margin:0 240px 0 3%} .overviewList .overviewList_in dl:nth-child(odd) .dot p {padding:0 10px 6px 0} .overviewList .overviewList_in dl:nth-child(odd) .dot p:before {left:auto; right:0} .overviewList .overviewList_in dl:nth-child(2) ~ dl {top:310px} .overview_result {text-align:center} .overview_result .sub_title {margin:0 0 15px 0; padding:100px 0 0 0; background:url('/eng/company/img/overview_arrow.png') center top no-repeat;} .overview_result .sub_title:before, .overview_result .sub_title:after {display:none} .overview_result .sub_txt {} .overview_con .overview_in {position:relative; overflow:hidden;} .overview_con .overview_in dl {text-align:center; float:left; width:42%; margin-right:16%; position:relative;} .overview_con .overview_in dl:last-child {margin:0; padding:0; border:none} .overview_con .overview_in dl:after {display:block; content:""; width:270px; height:270px; background:url('/eng/company/img/overviewLogo.png') center center/100% no-repeat; position:Absolute; top:329px; right:-250px; z-index:10} .overview_con .overview_in dl:last-child:after {display:none;} .overview_con .overview_in dt {color:#171c61; font-weight:700; font-size:1.25rem; font-family:'Montserrat', sans-serif; font-weight:700} .overview_con .overview_in dt img {max-width:100%; display:block; margin:0 auto 25px auto} .overview_con .overview_in dd {} .overview_con .overview_in dd h5 {margin:45px 0; line-height:60px; border-radius:60px 0 0 60px; background:#171c61; color:#fff} .overview_con .overview_in dd h5, .overview_con .overview_in dd h6 {font-size:1.625rem; font-weight:700} .overview_con .overview_in dd div {color:#777; font-weight:400} .overview_con .overview_in dd img {display:block; margin:25px auto} .overview_con .overview_in dd h6 { color:#171c61; letter-spacing:0} .overview_con .overview_in dd h6 span {} .overview_con .overview_in dl:nth-child(2) dt {color:#00abe4;} .overview_con .overview_in dl:nth-child(2) dd h5 {background:#00abe4; border-radius:0 60px 60px 0} .overview_con .overview_in dl:nth-child(2) dd h6 {color:#00abe4;} .overview_con .overview_in2 {position:relative; overflow:hidden;} .overview_con .overview_in2 dl {text-align:center; float:left; width:42%; margin-right:16%; position:relative;} .overview_con .overview_in2 dl:last-child {margin:0; padding:0; border:none} .overview_con .overview_in2 dl:after {display:block; content:""; width:270px; height:270px; background:url('/company/img/overviewLogo2_new.png') center center/100% no-repeat; position:Absolute; top:329px; right:-250px; z-index:10} .overview_con .overview_in2 dl:last-child:after {display:none;} .overview_con .overview_in2 dt {color:#00abe4; font-weight:700; font-size:1.25rem; font-family:'Montserrat', sans-serif; font-weight:700} .overview_con .overview_in2 dt img {max-width:100%; display:block; margin:0 auto 25px auto} .overview_con .overview_in2 dd {} .overview_con .overview_in2 dd h5 {margin:45px 0; line-height:60px; border-radius:60px 0 0 60px; background:#00abe4; color:#fff} .overview_con .overview_in2 dd h5, .overview_con .overview_in2 dd h6 {font-size:1.625rem; font-weight:700} .overview_con .overview_in2 dd div {color:#777; font-weight:400} .overview_con .overview_in2 dd img {display:block; margin:25px auto} .overview_con .overview_in2 dd h6 { color:#00abe4; letter-spacing:-0.5pt} .overview_con .overview_in2 dd h6 span {} .overview_con .overview_in2 dl:nth-child(2) dt {color:#171c61;} .overview_con .overview_in2 dl:nth-child(2) dd h5 {background:#171c61; border-radius:0 60px 60px 0} .overview_con .overview_in2 dl:nth-child(2) dd h6 {color:#171c61;} /* HISTORY */ .history_con {} .history_con .sub_title {line-height:1;} /* LEADERSHIP */ .leadership_con {} .leadership_con .leader_top {position:relative; overflow:hidden; background:#f3f9ff; padding:4.3% 4%; margin-bottom:60px} .leader_top > div {float:left; box-sizing:border-box;} .leader_top .leader_img {width:450px} .leader_top .leader_img img {width:100%} .leader_top .leader_txt {width:calc(100% - 450px); padding:0 0 0 5%} .leader_top .leader_tit {font-size:1.125rem; color:#333; font-weight:400; letter-spacing:0; line-height:1; position:relative; padding-left:18px; margin-bottom:25px} .leader_top .leader_tit span {display:block; color:#333; font-weight:700; letter-spacing:inherit; font-size:1.75rem; line-height:inherit; margin-top:6px} .leader_top .leader_tit:before {display:block; content:""; width:5px; height:100%; background:linear-gradient(0deg, rgba(60,161,217,1) 0%, rgba(65,207,207,1) 100%); position:absolute; top:0; left:0} .leader_top .dot p {padding-bottom:4px} .leaderList .leaderBox {float:left; margin:0 2.34% 2.34% 0; width:48.83%; border:1px solid #ddd; box-sizing:border-box; background:#fff url('/eng/company/img/leaderBg.png') right bottom no-repeat; padding:3.5%} .leaderList .leaderBox:nth-child(2n) {margin-right:0} .leaderList .leaderBox:nth-child(2n+1) {clear:both} .leaderList .leaderBox:last-child {margin-right:0} .leaderList .leaderBox dl {display:table; width:100%; border-bottom:1px solid #ddd; padding-bottom:5%; margin-bottom:5%} .leaderList .leaderBox dt {width:160px; display:table-cell; vertical-align:middle;} .leaderList .leaderBox dt img {width:100%} .leaderList .leaderBox dd {width:calc(100% - 160px); display:table-cell; vertical-align:middle; color:#333; line-height:1; box-sizing:border-box; padding:0 0 0 5%} .leaderList .leaderBox dd span {font-size:1.375rem; display:block; font-weight:700; color:#333; font-family:'Montserrat', sans-serif; letter-spacing:0; line-height:1; margin-top:10px} .leaderList .leaderBox .dot {} .leaderList .leaderBox .dot p {padding-bottom:4px} .leadership_con .leadershipList {position:relative; overflow:hidden; z-index:11} .leadershipList dl {float:left;; width:26.04%; margin-right:10.93%; text-align:center; position:relative; z-index:10} .leadershipList dl.pnone{display:none;} .leadershipList dl:last-child {margin:0} .leadershipList dt {position:relative;} .leadershipList dt img {width:100%; position:relative; z-index:11} .leadershipList dd {border-bottom:5px solid #21a5de; position:relative; overflow:hidden;} .leadershipList dd h5 {color:#fff; font-size:1.625rem; background:#21a5de; line-height:1; font-family:'Montserrat', 'Noto Sans KR', sans-serif; padding:20px 0; display:flex; justify-content:center; align-items:center;} .leadershipList dd h5 span {display:inline-block; font-weight:300; font-size:1rem; line-height:inherit; font-family:inherit;} .leadershipList dd h6 {font-weight:700; letter-spacing:0; font-family:'Montserrat', 'Noto Sans KR', sans-serif; font-size:1.25rem; color:#21a5de; border-bottom:1px solid #21a5de; border-top:1px solid #21a5de; line-height:1; padding:20px 0; display:flex; justify-content:center; align-items:center;} .leadershipList dd h6 strong {display:inline-block; font-weight:inherit; line-height:inherit; font-family:inherit;} .leadershipList dd h6 span {display:inline-block; font-weight:inherit; line-height:inherit; font-family:inherit;} .leadershipList dd div {font-weight:400; font-family:'Montserrat', 'Noto Sans KR', sans-serif; color:#777; letter-spacing:0; padding:35px 0; min-height:250px; font-size:0.882rem; letter-spacing:-0.1pt} .leadershipList dd div span {font-weight:inherit; line-height:inherit; font-family:inherit;} .leadershipList dl.two {z-index:1} .leadershipList dl.two dt {} .leadershipList dl.two dt ul {position:absolute; top:50%; transform:translate(0, -50%); left:-140px} .leadershipList dl.two dt ul li {font-size:1rem; width:140px; line-height:45px; background:#d3edf8; color:#21a5de; font-weight:700; margin-bottom:3px; font-family:'Montserrat', 'Noto Sans KR', sans-serif;} .leadershipList dl.two dt ul li:last-child {margin-bottom:0} .leadershipList dl.two dt ul.green {left:auto; right:-140px} .leadershipList dl.two dt ul.green li {background:#ccf2ec; color:#00bc9e; } .leadershipList dl.two dd {border-color:#171c61} .leadershipList dl.two dd h5 {background:#171c61;} .leadershipList dl.two dd h6 {color:#171c61; border-color:#171c61} .leadershipList dl.three {} .leadershipList dl.three dt {} .leadershipList dl.three dd {border-color:#00bc9e} .leadershipList dl.three dd h5 {background:#00bc9e;} .leadershipList dl.three dd h6 {color:#00bc9e; border-color:#00bc9e} .leadership_con2 {position:relative;overflow:hidden; } .leadership_con2 dl{position:relative;overflow:hidden; border-bottom:2px solid #555555; padding-bottom:25px;} .leadership_con2 dt{margin-bottom:25px; background:#555555; color:#fff; text-align:center; font-size:1.375rem; font-weight:700; font-weight:700; line-height:30px; padding:15px 10px } .leadership_con2 .pic img{max-width:100%} .leadership_con2 .leader_box{position:relative;overflow:hidden; } .leadership_con2 .leader_box .dot p{line-height: 24px;} .leadership_con2 .leader_box .dot p:before{top:9px} .leadership_con2 .leader_one{ margin-bottom:50px} .leadership_con2 .leader_one dl{} .leadership_con2 .leader_one dt{ background:#1a2a52;} .leadership_con2 .leader_one dd{display:table; width:100%} .leadership_con2 .leader_one .pic{display:table-cell; vertical-align: middle; width:19.53125%; } .leadership_con2 .leader_one .dot{display:table-cell; vertical-align: middle; width:42%; padding-right:3%} .leadership_con2 .leader_one .pnone{display:none;} .leadership_con2 .leader_one .mnone{display:table-cell; padding-left:3%; vertical-align: middle; } .leadership_con2 .leader_two{display:flex; flex-wrap: wrap; align-content: stretch; } .leadership_con2 .leader_two dl{width:48.828125%; margin-right:2.34375%; margin-bottom:50px; } .leadership_con2 .leader_two dl:nth-child(2n){margin-right:0} .leadership_con2 .leader_two .pic{margin-bottom:20px; } .leadership_con2 .leader_two dl.blue dt{background:#1a2a52} .leadership_con2 .leader_two dl.blue dt .le0{font-size: 1.625rem;} .leadership_con2 .leader_two dd{display:table} .leadership_con2 .leader_two .pic{display:table-cell; width:40%; vertical-align: middle;} .leadership_con2 .leader_two .dot{display:table-cell; vertical-align:middle; padding-left:30px} .leadership_con2 .leader_three{display:flex;} .leadership_con2 .leader_three dl{position:relative;overflow:hidden; float:left; width:31.71875%; margin-right:2.421875%; } .leadership_con2 .leader_three dl:nth-child(3){margin-right:0; } .leadership_con2 .leader_three dl:nth-child(3) dt span{display:block;} .leadership_con2 .leader_three .pic{text-align:center; margin-bottom:20px;} .leadership_con2 .leader_three .dot{position: relative; overflow: hidden; display: table; width: fit-content; margin: 20px auto 0 auto;} .leadership_con2 .leader_three .hebox{min-height:90px; padding-top: 29px;} /*** LEADERSHIP ***/ .leadership{} .leadership:after{content:''; display:block; clear:both;} .leadership .leadership_in{float: left; width: calc((100% - 40px)/3); margin: 0 20px 20px 0;} .leadership .leadership_in:nth-child(3n){margin-right: 0;} .leadership .leadership_in a{display: block; overflow: hidden; position: relative;} .leadership .leadership_in a .txt{border:0; position: absolute; right: 0; top:0; z-index: 3; text-align:right; box-sizing:border-box; padding:20px 25px; width: 100%;} .leadership .leadership_in a .txt strong{display: block; font-size:30px; font-weight: 600; line-height: 120%; color:#333333; font-family:'Montserrat','Noto Sans KR', sans-serif; padding: 0 0 8px;} .leadership .leadership_in a .txt h4{font-size:20px; letter-spacing: -0.5pt; font-weight: 400; color:#333; line-height: 120%; padding: 0 0 8px;} .leadership .leadership_in a .txt span{font-size:22px; font-weight: 600; color:#333; letter-spacing: 0; line-height: 120%; font-family: 'Montserrat','Noto Sans KR', sans-serif; } .leadership .leadership_in a .img{transition:all .3s linear;} .leadership .leadership_in a .img img{max-width:100%; width: 100%; background-size:cover; background-repeat:no-repeat; background-position:center; background-color: #cbcbcb;} .leadership_popup{max-width:450px; width: 100%; background-color: #fff;} .leadership_popup .leadershipPopup_in{} .leadership_popup .leadershipPopup_in .popup_img{} .leadership_popup .leadershipPopup_in .popup_img img{max-width:100%; width: 100%; background-size:cover; background-repeat:no-repeat; background-position:center; background-color: #cbcbcb;} .leadership_popup .leadershipPopup_in .popup_txt{box-sizing:border-box; padding:50px 40px;} .leadership_popup .leadershipPopup_in .popup_txt .name{padding:0 0 0 20px; box-sizing:border-box; position: relative;} .leadership_popup .leadershipPopup_in .popup_txt .name:before{content:''; display: inline-block; width: 6px; height: 100%; background-color:#61a9dc; position: absolute; left: 0; top:0;} .leadership_popup .leadershipPopup_in .popup_txt .name dt{font-family:'Montserrat', sans-serif; font-size:20px; line-height: 120%; letter-spacing:0; color:#61a9dc; font-weight: 600; padding: 0 0 10px;} .leadership_popup .leadershipPopup_in .popup_txt .name dd{} .leadership_popup .leadershipPopup_in .popup_txt .name dd strong{display: inline-block; font-size:30px; letter-spacing: -0.25pt; font-weight: 700; color:#333; line-height: 120%; font-family:'Montserrat', sans-serif;} .leadership_popup .leadershipPopup_in .popup_txt ul{padding: 40px 0 25px;} .leadership_popup .leadershipPopup_in .popup_txt ul li{font-size:16px; color:#333333; font-weight: 500; line-height: 150%; padding: 0 0 6px;} .leadership_popup .leadershipPopup_in .popup_txt ul li:last-child{padding: 0;} .leadership_popup .leadershipPopup_in .popup_txt .txtBox{font-size:16px; color:#333333;} .leadership_popup .mfp-close{font-size:0; right: 20px; top: 20px; width: 30px; height: 30px; background:url('/admin/bbs/skin/leadershipBasic/image/close.png') no-repeat center/100% auto; opacity: 0.25; transition:all .3s linear;} .leadership_popup .mfp-close:hover{opacity: 1;} /* ORGANIZATION */ .organ_con {text-align:center} .organ_con img {margin:0 auto; width:100%} /* CI */ .ci_con{position:relative; } .ci_con:after{content: ''; display: block;clear: both;} .ci_con .left_cbox .pic{border:1px solid #ddd; text-align:center; background:url('/eng/company/img/ci_bg.gif') repeat; padding:40px 0; margin-bottom:15px; position:relative;} .ci_con .left_cbox .pic img{max-width:100%} .ci_con .left_cbox .pic span {position:absolute; bottom:20px; right:20px; font-weight:600; font-family:'Poppins', sans-serif; color:#333; font-size:1.125rem} .ci_con .color_box{position:relative; overflow:hidden;} .ci_con .color_box dl{position:relative; overflow:hidden; float:left; width:31.22%; margin-right:3.17%} .ci_con .color_box dl:last-child{margin-right:0} .ci_con .color_box dt{background:#1a2a52; text-align:center; color:#fff; font-family:'Montserrat', sans-serif; font-weight:500; line-height:1.2; padding:40px 0; margin-bottom:10px; } .ci_con .color_box dl.two dt{background:#21a5de} .ci_con .color_box dl.three dt{background:#9ddcf9} .ci_con .color_box dd{position:relative; overflow:hidden; border-bottom:1px solid #ddd; box-sizing:border-box; padding:10px 0 } .ci_con .color_box dd p{font-family:'Montserrat', sans-serif; color:#333; float:left} .ci_con .color_box dd p.ctl2{color:#777; margin-left:10px} .ci_con .grd_box{position:relative; margin-top:40px} .ci_con .grd_box dl{position:relative; margin-bottom:25px} .ci_con .grd_box dl:last-child{margin-bottom:0} .ci_con .grd_box dt{width:100%; height:60px} .ci_con .grd_box dl.one dt{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#036eb8+0,171c61+100 */ background: #036eb8; /* Old browsers */ background: -moz-linear-gradient(left, #036eb8 0%, #171c61 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #036eb8 0%,#171c61 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #036eb8 0%,#171c61 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#036eb8', endColorstr='#171c61',GradientType=1 ); /* IE6-9 */} .ci_con .grd_box dl.two dt{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#37bef0+1,0097e0+100 */ background: #37bef0; /* Old browsers */ background: -moz-linear-gradient(left, #37bef0 1%, #0097e0 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #37bef0 1%,#0097e0 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #37bef0 1%,#0097e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37bef0', endColorstr='#0097e0',GradientType=1 ); /* IE6-9 */} .ci_con .grd_box dl.three dt{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00407b+1,02224d+100 */ background: #00407b; /* Old browsers */ background: -moz-linear-gradient(left, #00407b 1%, #02224d 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #00407b 1%,#02224d 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #00407b 1%,#02224d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407b', endColorstr='#02224d',GradientType=1 ); /* IE6-9 */ } .ci_con .grd_box dd{font-family: 'Montserrat', sans-serif; font-weight:500; margin-top:8px; color:#333} .left_cbox{position:relative; margin-bottom:80px;} .left_cbox:last-child{margin-bottom:0} .left_cbox:after{content: ''; display: block;clear: both;} .left_cbox .le_tit{position:relative; overflow:hidden; float:left; width:260px; margin-right:40px;} .left_cbox .le_con{position:relative; overflow:hidden; float:left; width: calc(100% - 300px);} /* CONTACT */ .contact_con {} .contact_con .location_con {} .contact_con .location_con iframe {height:400px !important} .contact_con .location_con .loca_info {text-align:center; margin:35px 0 50px 0} .contact_con .location_con .loca_info p {text-align:left; display:inline-block; vertical-align:top; position:relative; letter-spacing:0; color:#777; background:url('/eng/company/img/locaHome.png') left 5px no-repeat; margin:0 3% 10px 0; box-sizing:border-box; padding-left:26px} .contact_con .location_con .loca_info p:last-child {margin-right:0} .contact_con .location_con .loca_info span {display:inline-block; vertical-align:top; letter-spacing:inherit; font-weight:700; color:#333; margin-right:10px} .contact_con .location_con .loca_info p:nth-child(2) {background-image:url('/eng/company/img/locaTel.png')} .contact_con .location_con .locaBtn {text-align:center} .contact_con .location_con .locaBtn a {font-size:0.875rem; text-align:left; display:inline-block; vertical-align:top; width:190px; line-height:60px; font-family:'Montserrat', sans-serif; letter-spacing:0.5pt; color:#21a5de; border:1px solid #21a5de; border-radius:60px; padding:0 25px; background:url('/eng/company/img/moreBtn_blue.png') right 25px center no-repeat; margin:0 4px; box-sizing:border-box; transition: all 0.3s ease-out;} .contact_con .location_con .locaBtn a:nth-child(2) {background-image:url('/img/moreBtn.png'); background-color:#21a5de; color:#fff;} .contact_con .location_con .locaBtn a:hover {background-color:#f4f4f4; transition: all 0.3s ease-out;} .contact_con .location_con .locaBtn a:nth-child(2):hover {background-color:#1a2a52; border-color:#1a2a52;} .person_con2 {background:#f3f9ff; padding:100px 0;} .person_con2 .personList {position:relative; overflow:hidden;} .person_con2 .personList dl {float:left; display:table; margin:0 2.34375% 2.34375% 0; width:48.828125%; background:#fff; padding:4% 10%; } .person_con2 .personList dl:nth-child(2) ~ dl {margin-bottom:0} .person_con2 .personList dl:nth-child(2n+1) {clear:both} .person_con2 .personList dl:nth-child(2n) {margin-right:0} .person_con2 .personList dl:last-child {margin-right:0} .person_con2 .personList dt {display:table-cell; vertical-align:middle; box-sizing:border-box; width:75px} .person_con2 .personList dt img {} .person_con2 .personList dd {display:table-cell; vertical-align:middle; box-sizing:border-box; width:calc(100% - 75px); padding:0 0 0 8%} .person_con2 .personList dd h6 {font-weight:700; font-size:1.25rem; color:#333; line-height:1; margin:0 0 13px 0; letter-spacing:0;} .person_con2 .personList dd p {font-family:'Montserrat', 'Noto Sans KR', sans-serif; color:#777; font-weight:300; word-break:break-all; line-height:1.2} .person_con {background:#f3f9ff; padding:100px 0;} .person_con .personList {position:relative; overflow:hidden;} .person_con .personList dl {float:left; display:table; margin:0 1.7% 1.7% 0; width:32.2%; background:#fff; padding:4% 3%; } .person_con .personList dl:nth-child(3) ~ dl {margin-bottom:0} .person_con .personList dl:nth-child(3n+1) {clear:both} .person_con .personList dl:nth-child(3n) {margin-right:0} .person_con .personList dl:last-child {margin-right:0} .person_con .personList dt {display:table-cell; vertical-align:middle; box-sizing:border-box; width:75px} .person_con .personList dt img {} .person_con .personList dd {display:table-cell; vertical-align:middle; box-sizing:border-box; width:calc(100% - 75px); padding:0 0 0 8%} .person_con .personList dd h6 {font-weight:700; font-size:1.25rem; color:#333; line-height:1; margin:0 0 10px 0; letter-spacing:0;} .person_con .personList dd p {font-family:'Montserrat', 'Noto Sans KR', sans-serif; color:#777; font-weight:300; word-break:break-all} /************* TECHNOLOGY *************/ /* PLATFORM */ .platform_con {} .platform_icon {} .platform_icon .platformList {position:relative; overflow:hidden; text-align:center; width:100%} .platform_icon .platformList:after {display:block; content:""; width:80%; height:1px; background:#ddd; position:absolute; top:80px; left:50%; transform:translate(-50%, 0); z-index:1} .platform_icon .platformList dl {text-align:center; float:left; width:20%; position:relative; padding:0 1%; box-sizing:border-box; z-index:10} .platform_icon .platformList dl:first-child padding-left:0} .platform_icon .platformList dl:last-child {padding-right:0} .platform_icon .platformList dl:after {display:block; position:absolute; top:75px; right:-1%; content:""; width:11px; height:11px; background:url('/eng/tech/img/platform_dot.png') center center/100% no-repeat;} .platform_icon .platformList dl:last-child:after {display:none} .platform_icon .platformList dt {width:160px; height:160px; border-radius:160px; background:#f9f9f9; margin:0 auto 20px auto; display:flex; justify-content:center; align-items:center;} .platform_icon .platformList dt > div {width:160px; height:160px; border-radius:160px; border:5px solid #21a5de; box-sizing:border-box; background:#fff; display:flex; justify-content:center; align-items:center; margin-bottom:0} .platform_icon .platformList dd {letter-spacing:0; color:#333;} .platform_icon .platformList dd strong {display:block; font-size:0.875rem; line-height:1; font-family:'Montserrat', sans-serif; font-weight:700; color:#333; margin-bottom:10px} .platform_icon .blueBox {background:#f3f9ff; margin-top:-40px} .platform_icon .platformList.gra dt {display:block; background:none} .platform_icon .platformList.gra dd {font-weight:500; font-size:1.063rem} .platform_icon .platformList.gra .dot {border-top:1px dashed #ddd; margin-top:20px; padding-top:20px} .platform_icon .platformList.gra .dot p {text-align:left; font-weight:400; font-size:0.938rem; color:#777 } .platform_icon .sub_title.arrow {background:url('/eng/tech/img/platform_arrow.png') center top no-repeat; padding-top:130px; margin-top:80px} .platform_icon .platform_color {position:Relative; overflow:hidden; width:100%; margin:50px 0 0 0} .platform_icon .platform_color > div {font-size:1.25rem; letter-spacing:0; color:#fff; text-align:center; float:left; width:50%; background:#37aee1; height:100px; line-height:1.4; border-radius:100px 0 0 100px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; position:relative; padding:0 50px} .platform_icon .platform_color > div:last-child {background:#1a2a52; border-radius:0 100px 100px 0} .platform_icon .platform_color > div:last-child:before {display:block; content:""; width:100px; height:100px; border-radius:100px; background:#2099d0 url('/eng/tech/img/platform_plus.png') center center no-repeat; position:absolute; top:0; left:-50px} .platform_icon .platform_color > div.plus span {border-radius:100px; width:82px} .platform_img {background:#f3f9ff; position:relative; overflow:hidden; padding:100px 0} .platform_img dl {float:left; width:30.6%; margin-right:4%} .platform_img dl:last-child {margin-right:0} .platform_img dt {} .platform_img dt img {width:100%} .platform_img dd {} .platform_img dd h6 {position:relative; font-size:1.25rem; color:#333; font-weight:700; letter-spacing:0; margin:20px 0 10px 0; line-height:1.4} /* HUMAN ORGAN MODEL CHIP */ .human_con {} .human_con .sub_title {margin-bottom:65px} .human_con .human_in {padding:80px 3%; background:#f3f9ff;} .human_con .human_in .width1280 {display:table; width:100%} .human_con .human_in .width1280 > div {display:table-cell; vertical-align:middle; width:46.87%} .human_con .human_in .width1280 > div:first-child img {width:100%} .human_con .human_in .width1280 > div:last-child {width:calc(100% - 46.87%); padding-left:6.25%} .human_con .human_in .dep_tit2 {margin-top:50px} .human_con .human_in .dep_tit2:first-child {margin-top:0} /* BIOMIMETIC NANOPARTICLE */ .bio_con {} .bio_con .bio_in {padding:70px 3%; background:#f3f9ff; margin-bottom:80px} /* .bio_con .bio_in .width1280 {display:table; width:100%} .bio_con .bio_in .width1280 > div {display:table-cell; vertical-align:middle; width:50%} .bio_con .bio_in .bio_right {padding-left:5.46%; text-align:center} */ .bio_con .bio_in .width1280 {display:flex; width:100%; flex-wrap:wrap;} .bio_con .bio_in .width1280 > div {width:50%;} .bio_con .bio_in .width1280 > div .img{position: relative; right:-55px; top:29px; z-index: 9;} .bio_con .bio_in .width1280 > div .img.m{display:none;} .bio_con .bio_in .bio_body {position:relative; overflow:hidden; margin-bottom:25px} .bio_con .bio_in .bio_body dl {text-align:center; float:left; width:50%} .bio_con .bio_in .bio_body dt {} .bio_con .bio_in .bio_body dt img{} .bio_con .bio_in .bio_body dd {color:#fff; font-size:1.125rem; letter-spacing:0; font-weight:500; background:#787878; border-radius:60px 0 0 60px; height:60px; display:flex; justify-content:center; align-items:center; line-height:1.2} .bio_con .bio_in .bio_body dl:nth-child(2) dd {background:#21a5de; border-radius:0 44px 44px 0} .bio_con .bio_in .bio_right .dot {display:inline-block;} .bio_con .bio_in .bio_right .dot p {text-align:left; float:none} /* NANOMANUFACTURING */ .tech_con {} .techList {} .techList > div {margin-bottom:75px; padding-bottom:75px; border-bottom:1px dashed #ddd} .techList > div:last-child {margin:0; padding:0; border:none} /************* SERVICE *************/ /* service */ .service_con{position:relative; } .service_con .service_top{background:url('/eng/service/img/service_img01.jpg') center right no-repeat; background-size:cover; padding:140px 5.46875%; margin-bottom:30px;} .service_con .sub_txt a{position:relative; font-family:'Montserrat', 'Noto Sans KR', sans-serif; font-weight:500; display: inline-block; margin-left:10px; text-decoration: underline; transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;} .service_con .sub_txt a:hover{color:#21a5de } .service_con .sub_txt a img{margin-right:5px; vertical-align: middle;} /************* PIPELINE *************/ /* PIPELINE */ .pipeline_con{position:relative; overflow:hidden;} .pipeline_con .pipeline_box{position:relative; overflow:hidden;} .pipeline_con .pipeline_box .pi_le{position:relative; float:left; overflow:hidden; width:40.703125%; margin-right:4.609375%} .pipeline_con .pipeline_box .pic1{margin-bottom:20px;} .pipeline_con .pipeline_box .pnone{display:none;} .pipeline_con .pipeline_box .pic2{margin-left:3.45489443378%; margin-right: 24.3761996161%;} .pipeline_con .pipeline_box .pi_le .sub_txt{width:80.2303262956%; text-align:center; margin-bottom:40px;} .pipeline_con .pipeline_box .pi_ri{position:relative; float:left; overflow:hidden; width:54.6875%;} .pipeline_con .pipeline_box .pi_ri .dot_box{margin-bottom:40px;} .pipeline_con .pipeline_box .dot p{padding:0 0 3px 10px;} .pipeline_con .pipeline_box .gr_list{overflow:hidden; overflow:hidden; margin-bottom:50px;} .pipeline_con .pipeline_box .gr_list li{float:left; text-align:center;width:50%} .pipeline_con .pipeline_box .gr_list li img{max-width:100%} .pipeline_con .pipeline_box .gr_list li .botit{margin-bottom:20px;} .pipeline_con .pipeline_box .cell_box{position:relative; overflow:hidden; margin-top:50px;} .pipeline_con .pipeline_box .cell_le{position:relative; overflow:hidden; float:left; width: calc(100% - 95px);} .pipeline_con .pipeline_box .cell_le dl{position:relative; overflow:hidden; margin-bottom:20px;} .pipeline_con .pipeline_box .cell_le dl:last-child{margin-bottom:0} .pipeline_con .pipeline_box .cell_le dt{float:left; width:119px; margin-top:11px;} .pipeline_con .pipeline_box .cell_le dd{float:left; width: calc(100% - 119px);} .pipeline_con .pipeline_box .cell_le dd img{max-width:100%} .pipeline_con .pipeline_box .cell_le dd p{text-align:center; font-family: 'Montserrat', sans-serif; font-weight:700; color:#333; font-size:1rem; margin-top:20px;} .pipeline_con .pipeline_box .cell_ri{position:relative; overflow:hidden; float:right; width:85px; margin-left:10px;} .pipeline_con .pipeline_box .cell_ri dl{position:relative; overflow:hidden; margin-bottom:8px;} .pipeline_con .pipeline_box .cell_ri dl:last-child{margin-bottom:0} .pipeline_con .pipeline_box .cell_ri dd{display:inline-block; font-family:'Montserrat', sans-serif; line-height:1.2; font-size:0.8125rem; color:#333} .pipeline_con .pipeline_box .cell_ri dt{width:15px; height:11px; line-height:1.2; display:inline-block; background:#21a5de; margin-right:5px; } .pipeline_con .pipeline_box .cell_ri dl.two dt{background:#1a2a52} .pipeline_con .pipeline_box .cell_ri dl.three dt{background:#de3753} .pipeline_con .pipeline_box .cell_ri dl.four dt{background:url('/eng/pipeline/img/pipeline_bg1.png') repeat;} .pipeline_con .pipeline_box .cell_ri dl.five dt{background:url('/eng/pipeline/img/pipeline_bg2.png') repeat;} .pipeline_con .pipeline_box .cell_ri dl.six dt{background:url('/eng/pipeline/img/pipeline_bg3.png') repeat;} .pipeline_con #sub_tab li a {color:#171c61 !important; border-color:#171c61 !important} .pipeline_con #sub_tab li:last-child a {color:#21a5de !important; border-color:#21a5de !important} .pipeline_con .pipeList {position:relative; overflow:hidden} .pipeline_con .pipeList .pipeList_in {float:left; width:48.43%; margin-right:3.14%} .pipeline_con .pipeList .pipeList_in:last-child {margin-right:0} .pipeline_con .pipeList .pipeTop {position:relative; overflow:hidden; border-radius:30px} .pipeline_con .pipeList .pipeTop dt {background:#efeff4;} .pipeline_con .pipeList .pipeTop dt img {width:100%} .pipeline_con .pipeList .pipeTop dd.pipetit {font-weight:700; font-family:'Montserrat', sans-serif; color:#fff; padding:10px 20px; text-align:center; font-size:1.625rem; background:#171c61} .pipeline_con .pipeList .pipeList_in:last-child .pipeTop dd.pipetit {background:#21a5de} .pipeline_con .pipeList .pipeList_s {margin-top:7px} .pipeline_con .pipeList .pipeList_s dl {} .pipeline_con .pipeList .pipeList_s dl a {display:table; width:100%; border-bottom:1px solid #ddd; padding:3px 0; position:relative; transition: all 0.3s ease-out;} .pipeline_con .pipeList .pipeList_s dl.ing a {cursor:default} .pipeline_con .pipeList .pipeList_s dl:last-child a{border-color:#777777;} .pipeline_con .pipeList .pipeList_s dl.line a{border-color:#777777;} .pipeline_con .pipeList .pipeList_s dl.line a:after{content:''; display:block; width:100%; height:1px; background:#777; position:absolute; left:0; bottom:2px;} .pipeline_con .pipeList .pipeList_s dt {display:table-cell; vertical-align:middle; width:120px;} .pipeline_con .pipeList .pipeList_s dt img {width:100%} .pipeline_con .pipeList .pipeList_s dd {display:table-cell; vertical-align:middle; width:calc(100% - 120px); padding-left:12px; font-family:'Montserrat', 'Noto Sans KR', sans-serif; font-size:1.125rem; color:#333; font-weight:500; transition: all 0.3s ease-out;} .pipeline_con .pipeList .pipeList_s dd .more {color:#171c61; letter-spacing:0; font-size:0.938rem; font-weight:400; position:absolute; top:50%; right:20px; transform:translate(0,-50%); display:inline-block; vertical-align:middle; transition: all 0.3s ease-out;} .pipeline_con .pipeList .pipeList_s dd .more i {border:1px solid #171c61; display:inline-block; vertical-align:middle; border-radius:35px; width:35px; height:35px; background:#171c61 url('/eng/pipeline/img/p_moreBtn.png') center no-repeat; margin-left:15px; transition: all 0.3s ease-out;} .pipeline_con .pipeList .pipeList_s dd .more.ing {color:#777 !important; } .pipeline_con .pipeList .pipeList_s dd .more.ing i {border-color:#777 !important; background-color:#777 !important; background-image:url('/eng/pipeline/img/ing.png') !important} .pipeline_con .pipeList .pipeList_s dl a:hover {transition: all 0.3s ease-out;} .pipeline_con .pipeList .pipeList_s dl a:hover dd {transition: all 0.3s ease-out;} .pipeline_con .pipeList .pipeList_s dl a:hover dd .more {transition: all 0.3s ease-out;} .pipeline_con .pipeList .pipeList_s dl a:hover dd .more i {background-image:url('/eng/pipeline/img/p_moreBtn_b.png'); background-color:#fff; transition: all 0.3s ease-out;} .pipeline_con .pipeList .pipeList_s dl a:hover dd .more.ing {transition: all 0.3s ease-out;} .pipeline_con .pipeList .pipeList_s dl a:hover dd .more.ing i {transition: all 0.3s ease-out;} .pipeline_brcon{position:relative; overflow:hidden; margin-top:80px} .pipeline_brcon .brwrap{position:relative; overflow:hidden; display:table; width:100%} .pipeline_brcon .pic{vertical-align: middle; border-radius: 20px; background:#b7cad8; position: relative;overflow: hidden; display:table-cell; width:48.4375%; } .pipeline_brcon .pic img{width:100%} .pipeline_brcon .tbox{padding-left:3.125%; display:table-cell; vertical-align: middle; } .pipeline_brcon .t1{color:#21a5de; line-height:100%; padding-bottom:10px; font-size:1rem; font-weight:500 } .pipeline_brcon .t2{ line-height:30px; border-bottom:1px solid #171c61; padding-bottom:15px; margin-bottom:15px; color:#171c61; font-size:1.625rem; font-weight:700 } .pipeline_brcon .down_bt{margin-top:30px; border:1px solid #21a5de; box-sizing:border-box; border-radius: 50px; color:#fff; width:180px; height:40px; line-height:38px; display:block; font-weight:500; background:#21a5de; text-align:center; transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;} .pipeline_brcon .down_bt span{width:17px; height:15px; display:inline-block; vertical-align: middle; background:url('/pipeline/img/down_btn.png') center no-repeat; margin-left:8px; margin-top: -4px; transition: all 0.3s ease;} .pipeline_brcon .down_bt:hover{background:none; color:#21a5de;transition: all 0.3s ease; } .pipeline_brcon .down_bt:hover span{ background:url('/pipeline/img/down_btn2.png') center no-repeat; transition: all 0.3s ease;} /* MEPS_TBC */ .pipeline_con.meps_tbc {} .meps_topimg {} .meps_topimg dl {display:table; width:100%} .meps_topimg dt {display:table-cell; vertical-align:middle; text-align:right; width:50%} .meps_topimg dt img {} .meps_topimg dd {display:table-cell; vertical-align:middle; width:50%; padding-left:5.46%} .chip_con {position:relative; overflow:hidden;} .chip_con dl {float:left; width:48.43%; margin-right:3.125%} .chip_con dl:last-child {margin-right:0} .chip_con dt {text-align:center; background:#f9f9f9; border-radius:30px; border:1px solid #ddd; margin-bottom:40px} .chip_con dt img {margin:0 auto} .chip_con dd {} .chip_con dd.cen_tx{ display: table; width: fit-content; margin: 0 auto;} /* The BBB */ .pipeline_con.the_bbb {} .pipeline_con.the_bbb .sub_txt2 {margin-bottom:10px} .pipeline_con.the_bbb .pipeList .pipeTop {border-radius:0} .pipeline_con.the_bbb .pipeList .pipeTop dd.pipetit {border-radius:30px 30px 0 0} .pipeline_con.the_bbb .pipeList .pipeTop dt {border-radius:0 0 30px 0} .pipeline_con.the_bbb .cent_tx{display: table; width: fit-content; margin: 0 auto;} /* MEPS_BBB */ .meps_bbb {} .meps_bbb .human_box {background:#fff; padding:40px 0 0 0} .meps_bbb .human_box img {width:100%; padding:0 40px} .meps_bbb .human_box .human_txt {position:relative; overflow:hidden; margin:40px 0 0 0; padding:40px 40px 30px 40px; border:1px solid #ddd} .meps_bbb .human_box .human_txt p {float:none; width:100%; font-family:'Montserrat', 'Noto Sans KR', sans-serif; font-weight:400; padding-right:0} .meps_bbb .human_box .human_txt p:nth-child(2n) {padding-right:0} .meps_bbb .human_arrow {display:block; margin:65px auto 50px auto} /* MEPS-X */ .meps_con {} .meps_con .pipeline_table { } .table_width { width: 100%; overflow-y: auto; width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0;} .table_width > table {max-width:1280px} .meps_con .pipeline_table .bluebg {padding:0; position:relative;} .meps_con .pipeline_table .bluebg i {display:block; width:calc(100% + 1px); height:30px; background:#21a5de; z-index:1; position:absolute; top:50%; left:0; transform:translate(0, -50%)} .meps_con .pipeline_table .bluebg.end i:after {display:block; content:""; width:20px; height:20px; background:#21a5de; z-index:1; position:absolute; top:50%; right:-10px; transform:rotate(45deg); margin-top:-10px} .meps_con .pipeline_table .bluebg.end i {width:calc(100% - 20px)} .meps_con .pipeline_table .bluebg.seventy i {width:70%} .meps_con .pipeline_table .bluebg.fourty i {width:40%} .meps_con .pipeline_table .bluebg.thirty i {width:30%} .meps_con .pipeline_table .bluebg.twentyfive i {width:25%} .meps_con .pipeline_table .bluebg.twenty i {width:20%} .remark {color: #777; letter-spacing:0; padding:0 0 5px 0; font-size:0.875rem; display:none} .remark font {font-weight: 700; color: #1a2a52;} .rong_dot{ z-index:1; position: absolute; display: block; width: calc(290% + 0px); height:5px; background: url('/img/td_rong_dot.jpg') left center ;left: 0; margin-top: -2.5px;} .rong_dot.w1-2{width: calc(285% - 10px)} .rong_dot.w1-3{width: calc(270% - 10px)} .rong_dot.w1-4{width: calc(270% - 10px)} .rong_dot.w1-5{width: calc(240% - 10px)} .rong_dot.w1-6{width: calc(210% - 10px)} .rong_dot.w1-7{width: calc(185% - 10px)} .rong_dot.w2{width: calc(170% - 10px)} .rong_dot.w3{width: calc(140% - 5px)} .rong_dot.w3-1{width: calc(150% - 10px)} .rong_dot.w4{width: calc(130% - 10px)} .rong_dot.w5{width: calc(120% - 10px)} .rong_dot.w6{width: calc(50% - 10px); text-align: right;} .rong_dot.w7{width: calc(70% - 10px); text-align: right;} .rong_dot.w8{width: calc(40% - 10px); text-align: right;} .rong_dot.w9{width: calc(94% - 10px); text-align: right;} .rong_dot.w3-1{width: calc(150% - 10px)} .pipeline_table td.one{text-align:right;} .pipeline_table td.one-two {padding:0 2% 0 0; text-align:right;} .pipeline_table td.one-three {padding:0 4% 0 0; text-align:right;} .pipeline_table td.one-five {padding:0 9% 0 0; text-align:right;} .pipeline_table td.one-four {padding:0 0 0 9%; text-align:left;} .pipeline_table td.one-six {padding:0 0 0 15%; text-align:left;} .pipeline_table td.two{padding:0 4% 0 0; text-align:right;} .pipeline_table td.three{padding: 0 0 0 5%;} .pipeline_table td.four{padding: 0 0 0 3%;} .pipeline_table td.five{padding: 0 0 0 3.5%;} .pipeline_table td.five-one{padding: 0 0 0 4%;} .pipeline_table td.six{padding: 0 0 0 2.6%;} .pipeline_table td.seven .tadot{margin-right:0; top:-2px;} .pipeline_table td.seven2 {padding:0 0 0 8.5%} .pipeline_table td.seven2 .tadot{margin-right:0; top:-2px;} .pipeline_table td.nine {padding:0 0 0 10%} .pipeline_table td.nine .tadot{margin-right:0; top:-2px;} .tadot{position:relative; z-index:2; display: inline-block; width:10px; height:10px; margin-right: 10px;} .tadot:before{display: block; content: ""; width:10px; height:10px; background: #21a5de; border-radius: 15px; box-sizing: border-box; position: absolute; z-index: 9;} .tadot:after { width: 10px; height: 10px; content: ''; display: block; background-color: #21a5de; border-radius: 50%; position: absolute; z-index: -1; animation: dotst 1.5s ease-in-out infinite; } .blue2 .tadot:before{background: #7286aa;} .blue2 .tadot:after {background-color: #7286aa;} @keyframes dotst { 0%{ opacity: 0.5; transform: scale(1); } 100%{ opacity: 0; transform: scale(3); } } /* MG-X */ .meps_con p.su_t{color:#777; margin-top:20px; line-height: 26px; letter-spacing:0;} .mg_con{position:relative; overflow: hidden; background:#f3f9ff; padding:100px 0 130px 0} .mg_con .sub_title{font-weight:700} .mg_con img{max-width:100%} .mg_con .one{position:relative; overflow: hidden; float:left; width:62.65625%} .mg_con .two{position:relative; overflow: hidden; float:right; width:32.734375%;} .mg_con dl{position:relative; overflow: hidden; display: table; width: fit-content; margin:20px auto 0 auto; } .mg_con dt{text-align:center; color:#ed1f24; font-weight:700; font-size:1.25rem; letter-spacing:0; line-height:1.2; margin-bottom:10px;} .mg_con .box1{ float:left; position: relative; overflow: hidden; width:54.1147132170%; margin-left:3.61596009975%} .mg_con .box2{ float:left; position: relative; overflow: hidden; width:39.6508728180%; margin-left:2.49376558604%} /************* SERVICE *************/ /* service */ .service_con{position:relative; } .service_con .service_top{background:url('/eng/service/img/service_img01.jpg') center right no-repeat; background-size:cover; padding:100px 5.46875%; margin-bottom:30px;} .service_con .sub_txt a{position:relative; font-family:'Montserrat', 'Noto Sans KR', sans-serif; font-weight:500; display: inline-block; text-decoration: underline; transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;} .service_con .sub_txt a:hover{color:#21a5de } .service_con .sub_txt a img{margin-right:5px; vertical-align: middle;} .service_con .service_cbox{position:relative; margin-top:100px} .service_con.equipment_cont .service_cbox{margin-top:0;} .service_con .service_cbox .sub_title{color:#21a5de; font-weight:700; margin-bottom:40px } .service_con .service_cbox dl{margin-bottom:20px; display:table;border-radius:30px; width:100%; position: relative; overflow: hidden; border:1px solid #ddd; box-sizing:border-box; } .service_con .service_cbox dl:last-child{margin-bottom:0} .service_con .service_cbox dt{display:table-cell; width:360px; position: relative; overflow: hidden; ;border-radius:30px 0 0 30px; background:#f0eff4; } .service_con .service_cbox dd{display:table-cell; padding:20px 50px 20px 50px; vertical-align: middle;} .service_con2{position:relative; } .service_con2 .mimg{display:none;} .service_con2 .in{position:relative; background:url('/eng/service/img/service_bg2.jpg') left center no-repeat, #f3f9ff;} .service_con2 .sub_title{font-weight:700; margin-bottom:30px} .service_con2 .se_box{position:relative; overflow: hidden; max-width:1280px; margin:0 auto; padding:90px 0} .service_con2 ul{position:relative; overflow: hidden; margin-left:45% } .service_con2 li{position:relative; overflow: hidden; margin-bottom:15px; } .service_con2 li:last-child{margin-bottom:0} .service_con2 li .num{position:relative; overflow: hidden; float:left; font-weight:700; line-height:22px; color:#21a5de; font-family: 'Montserrat', sans-serif; width:30px} .service_con2 li .tx{position:relative; overflow: hidden; float:left; color:#777; line-height:22px; letter-spacing:0; width: calc(100% - 30px);} .se_ti{font-size:1.5rem; color:#37aee1; font-weight:700; font-family: 'Montserrat', sans-serif; line-height:28px; margin-bottom:10px} .se_ti2{font-size:0.9375rem; font-weight:700; font-family: 'Montserrat', sans-serif; color:#333; line-height:18px; margin-bottom:20px} /* 이용약관, 개인정보취급방침 */ .policy_con{position:relative; overflow:hidden;} .cont_title{font-size:24px; color:#333; padding-bottom:18px; letter-spacing:-1.2pt; font-weight:600;} p.cont_tit {display:block; font-size:1.2em !important; padding-bottom:10px; font-weight:600; color:#333 !important;} .cont_txt {padding:0px 0px 35px 0;} .cont_txt2 {padding-bottom:35px;} .cont_box {border:1px soild #a0a0a0; padding:20px; background:#f4f4f4; margin:7px 0px 10px 0px; display:block; } .privacy_list {width:91%; overflow:hidden; clear:both; *zoom:1; padding:4% 4% 3% 4%; border:1px dashed #ddd; margin-bottom:30px;} .privacy_list li {width:49%; float:left; padding-bottom:1%;} .privacy_list li a {font-weight:bold;} /* 천명호추가(2016-07-20) */ .pay_add_tit {font-size: 11px; color: #555;} .pay_add_tit2 {font-size: 11px; color: #ee2d7a;} /* 준비중 */ .ready_cont{text-align:Center; padding:150px 0; background:#f9f9f9; margin-bottom:150px} .ready_cont dt{font-family: 'Montserrat', sans-serif; font-weight:700; line-height:120%; font-size:55px; padding-bottom:20px; color:#21a5de} .ready_cont dt span{color:#444; line-height:120%; font-family: 'Montserrat', sans-serif; font-weight:300; } .ready_cont dd{letter-spacing:0; line-height:130%; color:#888; font-size:14px;} /* gray */ .grayscale { /* Firefox 10-34 */ filter: url("data:image/svg+xml;utf8,#grayscale"); /* Chrome 19+, Safari 6+, Safari 6+ iOS, Opera 15+ */ -webkit-filter: grayscale(1); /* Firefox 35+ */ filter: grayscale(1); /* IE 6-9 */ filter: gray; } .grayscale.grayscale-fade { transition: filter .5s; } /* Webkit hack until filter is unprefixed */ @media screen and (-webkit-min-device-pixel-ratio: 0) { .grayscale.grayscale-fade { -webkit-transition: -webkit-filter .5s; transition: -webkit-filter .5s; } } .grayscale.grayscale-off, .grayscale.grayscale-fade:hover { -webkit-filter: grayscale(0); filter: grayscale(0); } /* Background element */ .grayscale.grayscale-replaced { -webkit-filter: none; filter: none; } .grayscale.grayscale-replaced > svg { -webkit-transition: opacity .5s ease; transition: opacity .5s ease; opacity: 1; } .grayscale.grayscale-replaced.grayscale-off > svg, .grayscale.grayscale-replaced.grayscale-fade:hover > svg { opacity: 0; } /******************************************************************************* @media 1024px~1310px *******************************************************************************/ @media all and (max-width:1310px){ .lnbWrap .location {top:-250px} .lnb {padding:0 3%} .lnb ul {display: block; white-space: nowrap; text-align: center; font-size: 0;} .lnb li {padding:0 15px; margin:0} .sub_title br {display:none} .blueBox .width1280 {width:100%} /************* COMPANY *************/ /* OVERVIEW */ .overview_con {} .overview_con .sub_title {} .overview_con .overviewList {background-size:370px;} .overviewList .overview_tit {font-size:1.4rem; width:260px; height:260px; border-width:25px} .overviewList .overviewList_in {} .overviewList .overviewList_in dl {margin:0 3% 0 200px} .overviewList .overviewList_in dt {} .overviewList .overviewList_in dd {} .overviewList .overviewList_in dl:nth-child(odd) {margin:0 200px 0 3%} .overviewList .overviewList_in dl:nth-child(odd) .dot p {} .overviewList .overviewList_in dl:nth-child(odd) .dot p:before {} .overviewList .overviewList_in dl:nth-child(2) ~ dl {} .overview_result {} .overview_result .sub_title {} .overview_result .sub_title:before, .overview_result .sub_title:after {} .overview_result .sub_txt {} .overview_con .overview_in dl:after {right:-230px; top:256px} .overview_con .overview_in dt img {width:350px} .overview_con .overview_in2 dl:after {right:-230px; top:256px} .overview_con .overview_in2 dt img {width:350px} /* LEADERSHIP */ .leadership_con {} .leadership_con .leader_top {} .leader_top .leader_img {width:38.15%} .leader_top .leader_txt {width:calc(100% - 38.15%);} .leaderList .leaderBox dt {width:30%} .leaderList .leaderBox dd {width:calc(100% - 30%)} .leadershipList dl {float:none; width:100%; margin:0 0 96px 0; display:table;} .leadershipList dt {display:table-cell; vertical-align:middle; width:320px;} .leadershipList dd {display:table-cell; vertical-align:middle; width:calc(100% - 320px)} .leadershipList dd h5 {float:left; width:50%; height:65px; padding:0; display:flex; justify-content:center; align-items:center;} .leadershipList dd h6 {float:left; width:50%; height:65px; padding:0; display:flex; justify-content:center; align-items:center;} .leadershipList dd div {clear:both; min-height:auto; padding:27px 0; min-height:250px} .leadershipList dl.two dt ul {top:-97px; transform:translate(-50%,0); left:50% !important} .leadershipList dl.two dt ul.green {right:auto; top:auto; bottom:-97px} .leadershipList dl.two dt ul li {padding:12px 0; width:200px; line-height:1.3;} .leadershipList dl.two dd h6 {border-color:#171c61} .leadershipList dl.two dd div {} .leadershipList dl.tree dd h6 {border-color:#00bc9e} .leadership_con2 dt{font-size:1.2rem} /************* TECHNOLOGY *************/ /* PLATFORM */ .platform_con {} .platform_icon .platformList:after {top:60px} .platform_icon .platformList dt {width:130px; height:130px; } .platform_icon .platformList dt > div {width:130px; height:130px;} .platform_icon .platformList dt img {width:60px} .platform_icon .platformList dl:after {right:-2%; top:55px} .platform_icon .platformList dd br {display:none} .bio_con .bio_in .width1280 > div img {width:100%} .meps_topimg dt img {width:100%} /* CONTACT */ .person_con2 .personList dl{padding:4% 8%} /************* SERVICE *************/ /* service */ .service_con2 .se_box{width:94%; } } /******************************************************************************* @media 1280px *******************************************************************************/ @media all and (max-width:1280px){ /*** LEADERSHIP ***/ .leadership .leadership_in a .txt strong{font-size:26px;} .leadership .leadership_in a .txt h4{font-size:18px;} .leadership .leadership_in a .txt span{font-size:20px;} } /******************************************************************************* @media 980~1024px *******************************************************************************/ @media all and (max-width:1024px){ /************* COMPANY *************/ /* OVERVIEW */ .overview_con {} .overview_con .overview_in dl:after {width:200px; height:200px; right:-190px; top:224px} .overview_con .overview_in dt img {width:250px} .overview_con .overview_in2 dl:after {width:200px; height:200px; right:-190px; top:224px} .overview_con .overview_in2 dt img {width:250px} /* LEADERSHIP */ .leadership_con2 .leader_two dl.blue dt .le0{display:block; } .leadership_con2 dt{font-size:1.1rem} /* CONTACT */ .person_con2 .personList dl{padding:4% 4%} /************* PIPELINE *************/ /* PIPELINE */ .pipeline_brcon .sub_txt br{display:none;} .pipeline_brcon .tbox{padding-top:30px; padding-bottom:30px} } /******************************************************************************* @media 768~980px *******************************************************************************/ @media all and (max-width:980px){ #visual{padding:180px 3% 100px 3%;} #visual .subtop{height:335px} #visual h3 {font-size:3.2rem} #visual h3 a{font-size:3.2rem} .lnb {position:relative; overflow:visible !important; top:0; width:100%; margin:0 !important; box-sizing:border-box; } /*.lnb ul {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox; display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform; transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}*/ /*.lnb:after{position:absolute; display:block; content:""; overflow:hidden; right:0; top:0; width:55px; height:100%; z-index:999; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ffffff', endColorstr='#ffffff',GradientType=0 ); }*/ /*.lnb li {margin:0; padding:0 15px; -webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;display:inline-block; -webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}*/ /*.lnb li:first-child{padding:0 9px 0 3%;}*/ /*.lnb li:last-child{padding:0 40px 0 9px;}*/ #contents .tit_area {padding:75px 0 35px 0} #contents h3.title {font-size:2.2rem} .tmar_30 {margin-top:20px} .tmar_50 {margin-top:40px !important} .bmar_30 {margin-bottom:20px !important} .bmar_40 {margin-bottom:30px !important} .bmar_80 {margin-bottom:40px !important} .bpad_100{padding-bottom:80px} .btpad_100{padding:80px 0} .botitle{font-size:1.765rem} .moreBtn {width:170px; line-height:55px} #sub_tab {margin-bottom:45px} #sub_tab li {} #sub_tab li a {font-size:1.5rem; height:58px} .blueBox {padding:80px 3%} /* .table_width {width:100%; overflow-x:scroll}*/ .table_width > .table_style {width:990px} .remark{display:block;} /************* COMPANY *************/ /* OVERVIEW */ .overview_con {} .overview_con .sub_title {} .overview_con .overviewList {background:none; padding:30px; height:auto} .overviewList .overview_tit {font-size:1.4rem; width:100%; height:auto; padding:25px 20px; border-width:20px; position:relative; top:auto; left:auto; transform:translate(0,0)} .overviewList .overview_tit br {display:none;} .overviewList .overviewList_in {position:relative; overflow:hidden;} .overviewList .overviewList_in dl {position:relative; left:auto; top:auto; margin:30px 0 0 0 !important; width:50%; float:left; box-sizing:border-box; padding:0 3% 0 0} .overviewList .overviewList_in dt {} .overviewList .overviewList_in dd {} .overviewList .overviewList_in dl:nth-child(odd) {right:auto; text-align:left;} .overviewList .overviewList_in dl:nth-child(odd) .dot p {padding:0 0 6px 10px} .overviewList .overviewList_in dl:nth-child(odd) .dot p:before {left:0; right:auto;} .overviewList .overviewList_in dl:nth-child(2) ~ dl {top:auto;} .overviewList .overviewList_in dl:nth-child(2n) {padding:0} .overviewList .overviewList_in dl:nth-child(2n+1) {clear:both} .overview_result {} .overview_result .sub_title {} .overview_result .sub_title:before, .overview_result .sub_title:after {} .overview_result .sub_txt {} .overview_con .overview_in dl {float:none; width:100%; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #ddd} .overview_con .overview_in dl:after {width:150px; height:150px; top:auto; bottom:0; right:50%; transform:translate(-50%,0); background-image:url('/eng/company/img/overviewLogo2.png'); display:none;} .overview_con .overview_in dt img {width:450px} .overview_con .overview_in dd h5 {border-radius:60px !important; line-height:50px; margin:30px 0} .overview_con .overview_in dd h5, .overview_con .overview_in dd h6 {font-size:1.4rem} .overview_con .overview_in dd img {margin:20px auto} .overview_con .overview_in2 dl {float:none; width:100%; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #ddd} .overview_con .overview_in2 dl:after {width:150px; height:150px; top:auto; bottom:0; right:50%; transform:translate(-50%,0); background-image:url('/company/img/overviewLogo2.png'); display:none;} .overview_con .overview_in2 dt img {width:450px} .overview_con .overview_in2 dd h5 {border-radius:60px !important; line-height:50px; margin:30px 0} .overview_con .overview_in2 dd h5, .overview_con .overview_in dd h6 {font-size:1.4rem} .overview_con .overview_in2 dd img {margin:20px auto} /* LEADERSHIP */ .leadership_con {} .leadership_con .leader_top {margin-bottom:40px} .leaderList .leaderBox {padding:30px} .leaderList .leaderBox dl {padding-bottom:25px; margin-bottom:25px} .leaderList .leaderBox dt {width:40%;} .leaderList .leaderBox dd {width:calc(100% - 40%)} .leadershipList dl {margin:0 0 92px 0;} .leadershipList dt {width:280px;} .leadershipList dd {width:calc(100% - 280px)} .leadershipList dd h5 {font-size:1.1rem; height:55px;} .leadershipList dd h6 {height:55px; font-size:1rem;} .leadershipList dd h6 strong {display:none} .leadershipList dd div { padding:22px 0; min-height:220px} .leadershipList dl.two dt ul {top:-93px;} .leadershipList dl.two dt ul.green {bottom:-93px} .leadershipList dl.two dt ul li {width:150px;} .leadership_con2 dt{font-size:1.05rem; line-height: 22px; padding:12px 5px} .leadership_con2 .pic img{width:200px} .leadership_con2 .leader_one{margin-bottom:40px;} .leadership_con2 .leader_one dd{display:block; } .leadership_con2 .leader_one .pic{display:block; width:100%; text-align:center; margin-bottom:30px} .leadership_con2 .leader_one .dot{display:block; padding-left:0;} .leadership_con2 .leader_one .dot p{width:100%; margin-right:0} .leadership_con2 .leader_one .dot p br{display:none;} .leadership_con2 .leader_one .mnone{display:none;} .leadership_con2 .leader_one .pnone{display: table; width: fit-content; margin: 0 auto; padding-right:0 } .leadership_con2 .leader_two{} .leadership_con2 .leader_two dl{margin-bottom:40px} .leadership_con2 .leader_two dl.blue dt .le0{font-size:1.375rem} .leadership_con2 .leader_two dd{display:block;} .leadership_con2 .leader_two .pic{display:block; width:100%; text-align:center;} .leadership_con2 .leader_two .dot{position: relative; overflow: hidden; padding-left:0; display: table;width: fit-content; margin: 0 auto;} .leadership_con2 .leader_three .hebox{padding-top:24px; min-height:68px} /*** LEADERSHIP ***/ .leadership{} .leadership .leadership_in a .txt{padding:18px 20px;} .leadership .leadership_in a .txt strong{font-size:22px;} .leadership .leadership_in a .txt h4{font-size:16px;} .leadership .leadership_in a .txt span{font-size:18px;} .leadership_popup{} .leadership_popup .leadershipPopup_in .popup_txt{padding:35px 30px;} .leadership_popup .leadershipPopup_in .popup_txt .name{padding:0 0 0 15px;} .leadership_popup .leadershipPopup_in .popup_txt .name:before{width: 4px;} .leadership_popup .leadershipPopup_in .popup_txt .name dt{font-size:18px; padding: 0 0 8px;} .leadership_popup .leadershipPopup_in .popup_txt .name dd{font-size:16px;} .leadership_popup .leadershipPopup_in .popup_txt .name dd strong{font-size:24px; margin-right: 10px;} .leadership_popup .leadershipPopup_in .popup_txt ul{padding: 30px 0 20px;} .leadership_popup .leadershipPopup_in .popup_txt ul li{font-size:14px; padding: 0 0 4px;} .leadership_popup .leadershipPopup_in .popup_txt .txtBox{font-size:14px;} .leadership_popup .mfp-close{right: 20px; top: 20px; width: 24px; height: 24px;} /* CI */ .ci_con{} .ci_con .left_cbox .pic{padding:30px 0} .ci_con .left_cbox .pic img{width:300px;} .ci_con .left_cbox .pic span {right:15px; bottom:15px; font-size:1rem} .left_cbox .le_tit{float:none; margin-right:0; width:100%; margin-bottom:15px;} .left_cbox .le_con{float:none; width:100%} /* CONTACT */ .contact_con {} .contact_con .location_con .loca_info {margin:30px 0 50px 0} .contact_con .location_con .loca_info p {margin:0 0 6px 0; display:block; background-size:auto 16px; background-position:left 4px; padding:0 0 0 100px} .contact_con .location_con .loca_info p:last-child {margin-bottom:0} .contact_con .location_con .loca_info span {position:absolute; top:0; left:22px} .person_con {padding:80px 0} .person_con .personList {} .person_con .personList dl {width:49.15%} .person_con .personList dl:nth-child(3n) {margin-right:1.7%} .person_con .personList dl:nth-child(2n) {margin-right:0} .person_con .personList dl:nth-child(3n+1) {clear:none} .person_con .personList dl:nth-child(2n+1) {clear:both} .person_con .personList dl:last-child {} .person_con .personList dt {} .person_con .personList dt img {} .person_con .personList dd {} .person_con .personList dd h6 {} .person_con .personList dd p {} /************* TECHNOLOGY *************/ /* PLATFORM */ .platform_con {} .platform_icon .platformList:after {top:50px} .platform_icon .platformList dt {width:100px; height:100px; } .platform_icon .platformList dt > div {width:100px; height:100px} .platform_icon .platformList dt img {width:50px} .platform_icon .platformList dl:after {width:7px; height:7px; top:47px} .platform_icon .platformList dd {} .platform_icon .sub_title.arrow {padding-top:110px; margin-top:50px} .platform_icon .platform_color {} .platform_icon .platform_color > div {font-size:1.1rem; height:70px; padding:0 35px} .platform_icon .platform_color > div:last-child {} .platform_icon .platform_color > div:last-child:before {width:70px; height:70px; left:-35px} .platform_img {padding:60px 0} .platform_img dl {float:left; width:48.5%; margin:3% 3% 0 0} .platform_img dl:nth-child(2n) {margin-right:0;} .platform_img dl:last-child {margin-bottom:0} .platform_img dt {} .platform_img dt img {} .platform_img dd {} .platform_img dd h6 {} .platform_icon .platformList:after {width:1px; height:100%; left:50px; transform:translate(0,0); display:none} .platform_icon .platformList dl {float:none; width:100%; padding:0 0 10px 0; display:table;} .platform_icon .platformList dl:first-child {padding-top:0} .platform_icon .platformList dl:last-child {padding-bottom:0} .platform_icon .platformList dl:after {display:none} .platform_icon .platformList dt {display:table-cell !important; vertical-align:middle;} .platform_icon .platformList dt img {} .platform_icon .platformList dd {display:table-cell; vertical-align:middle; width:calc(100% - 80px); padding-left:15px; box-sizing:border-box; text-align:left} .platform_icon .platformList dd strong {margin-bottom:6px} /* HUMAN ORGAN MODEL CHIP */ .human_con {} .human_con .sub_title {margin-bottom:35px} .human_con .human_in {padding:50px 3%;} .human_con .human_in .width1280 > div:last-child {padding-left:5%} .human_con .human_in .dep_tit2 {margin-top:40px} /* BIOMIMETIC NANOPARTICLE */ .bio_con {} .bio_con .bio_in {padding:50px 3%; margin-bottom:50px} .bio_con .bio_in .bio_right {padding-left:1%} /* NANOMANUFACTURING */ .tech_con {} .techList {} .techList > div {margin-bottom:45px; padding-bottom:45px;} /************* PIPELINE *************/ /* PIPELINE */ .pipeline_con{} .pipeline_con .pipeline_box .pi_le{float:none; width:100%} .pipeline_con .pipeline_box .pi_le .sub_txt{width:100%; margin-bottom:0} .pipeline_con .pipeline_box .bor_box{text-align:center; border:1px solid #ddd; padding:30px; margin-bottom:0} .pipeline_con .pipeline_box .pi_le .dot_box{background:#f3f9ff; padding:30px; margin-bottom:30px;} .pipeline_con .pipeline_box .mnone{display:none;} .pipeline_con .pipeline_box .pnone{display:block; margin: 0 auto;} .pipeline_con .pipeline_box .pic2{margin:0; text-align:center; border:1px solid #ddd; padding:30px; margin-bottom:30px;} .pipeline_con .pipeline_box .pic2 img{} .pipeline_con .pipeline_box .pi_ri{float:none; width:100%} .pipeline_con .pipeline_box .cell_le{float:none; width:100%} .pipeline_con .pipeline_box .cell_le dd img{width:100%} .pipeline_con .pipeline_box .cell_ri{padding:15px; float:none; width:100%; margin-left:0; background: #f3f9ff; text-align:center; margin-top:20px;} .pipeline_con .pipeline_box .cell_ri dl{display:inline-block; margin-bottom:0; margin-right:10px; } .pipeline_con .pipeline_box .cell_ri dl:last-child{margin-right:0} .pipeline_con .pipeList .pipeTop dd.pipetit {font-size:1.3rem} .pipeline_con .pipeList .pipeList_s dt {width:80px} .pipeline_con .pipeList .pipeList_s dd {width:calc(100% - 80px); font-size:1.1rem; padding:0} .pipeline_con .pipeList .pipeList_s dd .more {right:10px} .pipeline_con .pipeList .pipeList_s dd .more i {width:30px; height:30px; margin-left:10px} .pipeline_brcon{margin-top:60px;} .pipeline_brcon .t1{padding-bottom:5px} .pipeline_brcon .t2{font-size:1.375rem; line-height:26px; } .pipeline_brcon .sub_txt{line-height:22px} /* MEPS_BBB */ .meps_bbb {} .meps_bbb .human_box {padding:30px 0 0 0} .meps_bbb .human_box img {padding:0 30px} .meps_bbb .human_box .human_txt {margin-top:30px; padding:30px} .meps_bbb .human_box .human_txt p {float:none; width:100%} .meps_bbb .human_box .human_txt p:last-child {padding-bottom:0} .meps_bbb .human_arrow {margin:40px auto} /* MEPS_TBC */ .chip_con dt {margin-bottom:30px} /************* service *************/ /* service */ .service_con .service_top{padding:5rem 5.46875%; background-position: 40%;} .service_con .service_cbox dt{width:300px} .service_con .service_cbox dd{padding:10px 30px 10px 30px} .service_con2 .se_box{padding:0} .service_con2 ul{margin:20px 0 100px 0} .service_con2 .mimg{display:block;} .service_con2 .sub_title{margin-bottom:30px} .service_con2 .in{background:none;} /* CONTACT */ .person_con2 {padding:80px 0} .person_con2 .personList {} .person_con2 .personList dl {} .person_con2 .personList dt {} .person_con2 .personList dt img {} .person_con2 .personList dd {} .person_con2 .personList dd h6 {} .person_con2 .personList dd p {} /* MG-X */ .mg_con{padding:80px 0 100px 0} } /******************************************************************************* @media 640~768px *******************************************************************************/ @media all and (max-width:768px){ .table_width > .table_style {width:850px} /* LEADERSHIP */ .leadership_con {} .leadershipList dl {margin:0 0 81px 0;} .leadershipList dt {display:block; width:100%; position:static} .leadershipList dd {display:block; width:100%;} .leadershipList dd h5 {height:50px;} .leadershipList dd h6 { height:50px; border-top:none} .leadershipList dd div { padding:20px 0 !important} .leadershipList dl dt ul{display:none;} .leadershipList dl.two dt ul {top:-81px; width:100%;} .leadershipList dl.two dt ul.green {bottom:-81px} .leadershipList dl.two dt ul li {width:100%; padding:10px 0} .leadershipList dl.pnone{display:block;} .leadershipList dl.mnone{display:none;} .leadershipList dd div{min-height:auto} .leadership_con2 dt{padding:10px; font-size:1.25rem} .leadership_con2 .leader_two dl.blue dt .le0{font-size:1.25rem;} .leadership_con2 .leader_three{flex-wrap:wrap;} .leadership_con2 .leader_three dl{width:48.828125%; margin-right:2.34375%; margin-bottom:30px} .leadership_con2 .leader_three dl:nth-child(2){margin-right:0} .leadership_con2 .leader_three dl:last-child{width:100%; margin-bottom:0} .leadership_con2 .leader_three .hebox{min-height:auto; padding-top:10px} .leadership_con2 .leader_three .dot{} .leadership_con2 .leader_three dl:last-child .dot{display: table; width: fit-content;} /*** LEADERSHIP ***/ .leadership{} .leadership .leadership_in{width: calc((100% - 20px)/2); margin: 0 20px 20px 0;} .leadership .leadership_in:nth-child(3n){margin-right: 20px;} .leadership .leadership_in:nth-child(2n){margin-right: 0;} .leadership .leadership_in a{} .leadership .leadership_in a .txt strong{font-size:20px; padding: 0 0 6px;} .leadership .leadership_in a .txt h4{font-size:14px; padding: 0 0 6px;} .leadership .leadership_in a .txt span{font-size:16px;} /************* TECHNOLOGY *************/ /* PLATFORM */ .platform_con {} .dot p{line-height:20px} /************* service *************/ /* service */ .service_con .service_cbox{margin-top:60px} .service_con .service_cbox .sub_title{margin-bottom:25px} .service_con .service_cbox dt{width:280px} .service_con .service_cbox dd .dot p{word-break: break-all;} .service_con2 li{margin-bottom:10px} /* MG-X */ .mg_con .one{float:none; width:100%} .mg_con .two{float:none; width:100%; margin-top:50px} .mg_con .two img{width:100%} /* 준비중 */ .ready_cont{padding:100px 0;margin-bottom:80px;} .ready_cont dt{font-size:32px} .ready_cont dd{font-size:13px;} } /******************************************************************************* @media ~680px *******************************************************************************/ @media all and (max-width:680px){ #visual{padding:140px 3% 80px 3%;} #visual .subtop{height:285px} #visual .subtop.subtop_careers{background-position: 68%;} #visual h3 {font-size:3rem} #visual h3 a{font-size:3rem} .lnb ul {} .lnb li a {line-height:50px;} .lnb li a:after {bottom:-3px; height:5px; width:5px;} #contents .tit_area {padding:50px 0 20px 0} #contents h3.title {font-size:1.765rem} .tmar_50 {margin-top:20px !important} .bmar_20 {margin-bottom:10px !important} .bmar_40 {margin-bottom:20px !important} .bmar_80 {margin-bottom:30px !important} .bpad_100{padding-bottom:60px} .btpad_100 {padding:60px 0} .sub_title {font-size:1.471rem; margin-bottom:30px; font-weight:400} .sub_title.quote:before, .sub_title.quote:after {width:15px; height:13px} .sub_stitle {font-size:1.4rem; margin-bottom:20px} .botitle{font-size:1.75rem; margin-bottom:15px;} .botit{font-size:1.125rem} .dot p {} .dot p:last-child {} .dot p:before {top:9px} .dot_title{font-size:1.625rem; letter-spacing:0} .dot_title:after{width:5px; height:5px; right: -8px;} .dep_tit {margin-bottom:20px; font-size:1.35rem} .dep_tit br {display:none} .dep_tit2 {font-size:1.1rem; background-size:12px; padding-left:20px; background-position:left 5px} .sub_txt {font-weight:400} .sub_txt2 {font-weight:400} .moreBtn {width:130px; line-height:45px; padding:0 15px; background-position:right 15px center} #sub_tab {margin-bottom:35px} #sub_tab.none680 {display:none !important} #sub_tab.show680 {display:table !important} #sub_tab li a {font-size:1.4rem; height:50px} .blueBox {padding:60px 3%} /*.table_width > .table_style {width:700px}*/ .table_style th {padding:10px 10px} .table_style td {padding:10px 10px; font-weight:400} /************* COMPANY *************/ /* OVERVIEW */ .overview_con {} .overview_con .overviewList {padding:20px} .overviewList .overview_tit {padding:15px; border-width:15px} .overviewList .overviewList_in dl { margin:20px 0 0 0 !important; float:none; width:100%; padding:0} .overviewList .overviewList_in dl:nth-child(odd) .dot p {padding:0 0 6px 10px} .overviewList .overviewList_in dl:nth-child(2n+1) {clear:none} .overview_result {} .overview_result .sub_title {background-size:220px; padding:65px 0 0 0; margin:0 0 10px 0} .overview_result .sub_title:before, .overview_result .sub_title:after {} .overview_result .sub_txt {} .overview_con .overview_in dt img {width:300px} .overview_con .overview_in dd h5 {margin:20px 0} .overview_con .overview_in dd img {width:15px; margin:15px auto} .overview_con .overview_in2 dt img {width:300px} .overview_con .overview_in2 dd h5 {margin:20px 0} .overview_con .overview_in2 dd img {width:15px; margin:15px auto} /* LEADERSHIP */ .leadership_con {} .leadership_con .leader_top {padding:20px} .leader_top > div {float:none; width:100%} .leader_top .leader_img {width:200px; margin:0 auto 20px auto} .leader_top .leader_img img {} .leader_top .leader_txt {padding:0; width:100%} .leader_top .leader_tit {margin-bottom:15px} .leader_top .leader_tit span {font-size:1.3rem} .leader_top .leader_tit:before {} .leader_top .dot p {} .leadership_con .leaderList {} .leaderList .leaderBox {float:none; width:100%; margin-right:0; padding:20px; background-size:150px} .leaderList .leaderBox:nth-child(2n) {} .leaderList .leaderBox:nth-child(2n+1) {} .leaderList .leaderBox:last-child {} .leaderList .leaderBox dl {padding-bottom:20px; margin-bottom:20px} .leaderList .leaderBox dt {width:100px} .leaderList .leaderBox dd {padding-left:20px; width:calc(100% - 100px)} .leaderList .leaderBox dd span {font-size:1.2rem} .leaderList .leaderBox .dot {} .leaderList .leaderBox .dot p {} .leadership_con2 dt{margin-bottom:15px; padding:5px; line-height:24px;} .leadership_con2 .pic img{width:150px;} .leadership_con2 .leader_box .dot p{line-height:20px;} .leadership_con2 .leader_box .dot p:before{top:8px;} .leadership_con2 .leader_one{margin-bottom:30px; } .leadership_con2 .leader_one .pic{margin-bottom:20px;} .leadership_con2 .leader_two dl{margin-bottom:30px;} .leadership_con2 .leader_three .hebox{padding-top:5px} /* CI */ .ci_con{} .ci_con .left_cbox .pic{padding:23px 0} .ci_con .left_cbox .pic img{width:200px;} .ci_con .left_cbox .pic span {right:10px; bottom:5px} .ci_con .color_box dt{padding:25px 0; margin-bottom:5px;} .ci_con .color_box dd{padding:8px 0} .left_cbox{margin-bottom:50px;} /* ORGANIZATION */ .organ_con{} .organ_box{position: relative; overflow-x: auto;} .organ_box .in{width:680px;} .responsive-dim{position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6);z-index: 2; display:block;} .responsive-dim p{position: absolute;top: 50%; left: 0;right: 0; text-align: center; transform: translate(0,-50%);} .responsive-dim span{display: block; margin-top: 10px;color: #fff; font-weight: 600; font-size: 14px; letter-spacing: -0.3pt;} .responsive-dim img{width:40px;} /* CONTACT */ .contact_con .location_con {} .contact_con .location_con iframe {height:300px !important} .contact_con .location_con .loca_info {margin:20px 0 20px 0} .contact_con .location_con .locaBtn a {font-size:1rem; width:100%; display:block; line-height:43px; padding:0 15px; background-position:right 15px center; margin:0;} .contact_con .location_con .locaBtn a.printBtn {display:none} .contact_con {} .person_con {padding:60px 0} .person_con .personList {} .person_con .personList dl {padding:20px 15px; margin:0 0 10px 0; width:100%} .person_con .personList dl:nth-child(3) ~ dl {margin-bottom:10px} .person_con .personList dl:last-child {margin-bottom:0} .person_con .personList dt {width:45px; } .person_con .personList dd {width:calc(100% - 45px); padding-left:20px} .person_con .personList dd h6 {margin:0 0 5px 0; font-size:1.1rem} .person_con .personList dd p {font-weight:400} /************* TECHNOLOGY *************/ /* PLATFORM */ .platform_con {} .platform_icon .blueBox {margin-top:-20px} .platform_icon .platformList.gra .dot {margin-top:10px; padding-top:10px} .platform_icon .sub_title.arrow {background-size:200px; padding-top:70px; margin-top:20px; margin-bottom:0} .platform_icon .platform_color {margin-top:30px} .platform_icon .platform_color > div {font-size:1.1rem; float:none; width:100%; border-radius:100px; height:60px; padding:0 3%} .platform_icon .platform_color > div:last-child {border-radius:100px; margin-top:20px} .platform_icon .platform_color > div:last-child:before {width:40px; height:40px; left:50%; margin-left:-20px; background-size:10px; top:-30px} .platform_icon .platformList.gra .dot {margin-top:10px; padding-top:10px} .platform_img {padding:40px 0} .platform_img dl {} .platform_img dl:nth-child(2n) {} .platform_img dl:last-child {} .platform_img dt {} .platform_img dt img {} .platform_img dd {} .platform_img dd h6 {} /* HUMAN ORGAN MODEL CHIP */ .human_con {} .human_con .sub_title {margin-bottom:20px} .human_con .human_in {padding:30px 3%;} .human_con .human_in .width1280 > div {display:block; width:100% !important} .human_con .human_in .width1280 > div:last-child {padding:30px 0 0 0} .human_con .human_in .dep_tit2 {margin-top:20px} /* BIOMIMETIC NANOPARTICLE */ .bio_con {} .bio_con .bio_in {padding:30px 3%; margin-bottom:30px} .bio_con .bio_in .width1280 > div .img{right:auto; top:auto;} .bio_con .bio_in .width1280 > div .img.pc{display:none;} .bio_con .bio_in .width1280 > div .img.m{display:block;} .bio_con .bio_in .width1280 > div {display:block; width:100%} .bio_con .bio_in .bio_right {padding-top:20px} .bio_con .bio_in .bio_body {margin-bottom:20px} .bio_con .bio_in .bio_body dd {height:40px} /* NANOMANUFACTURING */ .tech_con {} .techList {} .techList > div {margin-bottom:30px; padding-bottom:30px} /************* PIPELINE *************/ /* PIPELINE */ .pipeline_con{} .pipeline_con .pipeline_box .cell_le dl{margin-bottom:15px;} .pipeline_con .pipeline_box .cell_le dt{width:85px; margin-right:10px;} .pipeline_con .pipeline_box .cell_le dd{width:calc(100% - 95px); } .pipeline_con .pipeline_box .cell_ri{text-align:left; padding:15px 10px;} .pipeline_con .pipeline_box .cell_ri dl{display:block; text-align:center; width:33.33%; float:left; margin-right:0; margin-bottom:6px;} .pipeline_con .pipeline_box .cell_ri dl:nth-child(4), .pipeline_con .pipeline_box .cell_ri dl:nth-child(5), .pipeline_con .pipeline_box .cell_ri dl:nth-child(6){margin-bottom:0} .pipeline_con .pipeList .pipeList_in {float:none; width:100%; margin:0 0 40px 0} .pipeline_con .pipeList .pipeTop dd.pipetit {} .pipeline_con .pipeList .pipeList_s dl a {padding:5px 0} .pipeline_con .pipeList .pipeList_s dt {width:60px} .pipeline_con .pipeList .pipeList_s dd {width:calc(100% - 60px); font-size:1.1rem} .pipeline_con .pipeList .pipeList_s dd .more {right:10px} .pipeline_con .pipeList .pipeList_s dd .more i {width:30px; height:30px; margin-left:10px} .pipeline_brcon{margin-top:0} .pipeline_brcon .brwrap{display:block;} .pipeline_brcon .pic{display:block; width:100%} .pipeline_brcon .tbox{display:block; padding-left:0; padding-bottom:0; padding-top:15px } .pipeline_brcon .t1{text-align:center;} .pipeline_brcon .t2{text-align:center; padding-bottom:10px; margin-bottom:10px} .pipeline_brcon .sub_txt{text-align:center;} .pipeline_brcon .down_bt{margin:20px auto 0 auto} .pipeline_brcon .down_bt span{background-size:13px; width:13px; height:11px;} .pipeline_brcon .down_bt:hover span{background-size:13px;} /* MEPS_BBB */ .meps_bbb {} .meps_bbb .human_box {padding:20px 0 0 0} .meps_bbb .human_box img {padding:0 20px} .meps_bbb .human_box img {padding:0 20px} .meps_bbb .human_box .human_txt {margin-top:20px; padding:20px} .meps_bbb .human_arrow {width:200px; margin:25px auto} /* MEPS_TBC */ .pipeline_con.meps_tbc {} .meps_topimg {} .meps_topimg dl {display:block;} .meps_topimg dt {display:block; text-align:center; width:100%} .meps_topimg dt img {} .meps_topimg dd {display:block; width:100%; padding:20px 0 0 0} .chip_con dl {float:none; width:100%; margin:0 0 40px 0} .chip_con dl:last-child {margin:0} .chip_con dt {padding:20px; margin-bottom:20px} .chip_con dd.cen_tx{display:block; width:auto} /* MEPS-X */ .meps_con {} .meps_con .pipeline_table .bluebg i {height:20px} .meps_con .pipeline_table .bluebg.end i:after {width:14px; height:14px; margin-top:-7px; right:-7px} .dot p:before{top:7px} /************* service *************/ /* service */ .service_con .service_cbox dl{display:block; } .service_con .service_cbox dt{width:100%; display:block; border-radius: 30px 30px 0 0;} .service_con .service_cbox dt img{width:100%} .service_con .service_cbox dd{display:block; padding:20px 30px } .service_con2 li{margin-bottom:6px} .se_ti{line-height:24px} .se_ti2{margin-bottom:15px} /* CONTACT */ .person_con2 {padding:60px 0} .person_con2 .personList {} .person_con2 .personList dl {padding:20px 15px; margin:0 0 10px 0; width:100%; margin-bottom:10px !important} .person_con2 .personList dl:last-child {margin-bottom:0 !important} .person_con2 .personList dt {width:45px; } .person_con2 .personList dd {width:calc(100% - 45px); padding-left:20px} .person_con2 .personList dd h6 {margin:0 0 5px 0; font-size:1.1rem} .person_con2 .personList dd p {font-weight:400} /* MG-X */ .mg_con{padding:60px 0 80px 0} .mg_con dt{line-height:20px; text-align:left; word-break: initial;} .mg_con dl{display: block; width: auto;} .mg_con .two{margin-top:30px} } /******************************************************************************* @media ~480px *******************************************************************************/ @media all and (max-width:480px){ #visual .subtop.subtop_pipeline{height: 260px; background-position:74% center} #visual h3 {font-size:2.5rem} #visual h3 a{font-size:2.5rem} #contents h3.title {font-size:1.8rem} .dot_title{font-size:1.375rem; letter-spacing:0} .bostxt{line-height:20px; letter-spacing:0;} .botit{} /* LEADERSHIP */ .leadership_con2 .leader_one .dot{ display: table;width: fit-content; margin: 0 auto;} .leadership_con2 .leader_one .dot p{float:none; width:100%; margin-right:0} .leadership_con2 .leader_two{display:block;} .leadership_con2 .leader_two dl{width:100%; margin-right:0 } .leadership_con2 .leader_two dl.blue dt .le0{display:inline-block} .leadership_con2 .leader_three{display:block;} .leadership_con2 .leader_three dl{float:none; width:100%; margin-bottom:30px; } .leadership_con2 .leader_three dl:last-child{margin-bottom:0} .leadership_con2 .leader_three .dot p br{display:none;} .leadership_con2 .leader_three dl:last-child .dot{} /*** LEADERSHIP ***/ .leadership{} .leadership .leadership_in{width: 100%; margin: 0 0 20px 0;} .leadership .leadership_in:nth-child(3n){margin-right: 0;} .leadership .leadership_in:nth-child(2n){margin-right: 0;} .leadership_popup{} .leadership_popup .leadershipPopup_in .popup_txt{padding:20px 15px;} .leadership_popup .leadershipPopup_in .popup_txt .name{padding:0 0 0 10px;} .leadership_popup .leadershipPopup_in .popup_txt .name:before{width: 2px;} .leadership_popup .leadershipPopup_in .popup_txt .name dt{font-size:16px; padding: 0 0 6px;} .leadership_popup .leadershipPopup_in .popup_txt .name dd{font-size:14px;} .leadership_popup .leadershipPopup_in .popup_txt .name dd strong{font-size:20px; margin-right: 7px;} .leadership_popup .leadershipPopup_in .popup_txt ul{padding: 20px 0 15px;} .leadership_popup .leadershipPopup_in .popup_txt ul li{font-size:13px; padding: 0 0 4px;} .leadership_popup .leadershipPopup_in .popup_txt .txtBox{font-size:13px;} .leadership_popup .mfp-close{width: 20px; height: 20px;} /************* TECHNOLOGY *************/ /* PLATFORM */ .platform_con {} .platform_icon {} .platform_img {} .platform_img dl {float:none; width:100%; margin-bottom:30px} .platform_img dl:nth-child(2n) {} .platform_img dl:last-child {} .platform_img dt {} .platform_img dt img {} .platform_img dd {} .platform_img dd h6 {} /* CI */ .ci_con{} .ci_con .left_cbox .pic{padding:21px 0} .ci_con .left_cbox .pic img{width:170px;} .ci_con .color_box dl {float:none; width:100%; margin:0 0 20px 0} .ci_con .color_box dl:last-child{margin-bottom:0} .ci_con .color_box dt br {display:none !important} /************* service *************/ /* service */ .service_con .service_top{padding: 30px 20px 210px 20px; margin-bottom:20px; text-align:center; background:url('/eng/service/img/service_img01_m.jpg') no-repeat; background-size: cover; } .service_con .sub_txt a{} /************* PIPELINE *************/ /* PIPELINE */ .pipeline_con{} .pipeline_con .pipeline_box .cell_le dt{margin-top:5px;} .pipeline_con .pipeline_box .cell_le dd p{margin-top:10px} /************* service *************/ /* service */ .service_con .service_top{padding: 30px 20px 210px 20px; margin-bottom:20px; text-align:center; background:url('/eng/service/img/service_img01_m.jpg') no-repeat; background-size: cover; } .service_con .sub_txt a{} .service_con .service_cbox .sub_title{margin-bottom:20px} .service_con .service_cbox dl{border-radius:20px} .service_con .service_cbox dt{border-radius:20px 20px 0 0} .service_con .service_cbox dd{padding:20px} .service_con2 ul{margin:20px 0 60px 0} .service_con2 li .num{line-height:18px} .service_con2 li .tx{line-height:18px;} /* 준비중 */ .ready_cont{padding:60px 0;margin-bottom:60px;} .ready_cont dt{font-size:28px; padding-bottom:13px;} } /******************************************************************************* @media ~400px *******************************************************************************/ @media all and (max-width:400px){ #visual .subtop.subtop_pipeline{background-position:73% center} /************* TECHNOLOGY *************/ .left_cbox{margin-bottom:40px} /* BIOMIMETIC NANOPARTICLE */ .bio_con {} .bio_con .bio_in .bio_right .dot p:nth-child(2n+1) {width:auto; float:none;} } /******************************************************************************* @media ~320px *******************************************************************************/ @media all and (max-width:320px){ /* LEADERSHIP */ .leadership_con2 .leader_two dl.blue dt .le0{display:block;} }