@charset "utf-8";
/* CSS Document */

a.link{color:#005ddc !important;}
a:hover.link{ text-decoration:underline;}

.red{color:#C00 !important;}
.blue{color:#0470F2 !important;}
.green{color:#390 !important;}
.gray{color:#999 !important;}
.orange{color:#ff9c00 !important;}

.bgRed{background:#C00 !important; color:#fff !important; border-radius:3px!important; padding:4px 8px !important;}
.bgBlue{background:#0470F2 !important; color:#fff !important; border-radius:3px!important; padding:4px 8px !important;}
.bgGreen{background:#390 !important; color:#fff !important; border-radius:3px!important; padding:4px 8px !important;}
.bgGray{background:#999 !important; color:#fff !important; border-radius:3px!important; padding:4px 8px !important;}

.bglightGray{background:#f7f7f7 !important;}
.bglightBlue{background:#effcff !important;}
.bglightYellow{background:#fffdef !important;}




/* 메인 - 비주얼 */
.main_visual {width: 100%; height: 100%; z-index: -1;}
.main_silde {height: 100%;} 
/* .main_silde .bg1 {background: url('/img/visual_img_01.jpg') no-repeat center center/cover;} 
.main_silde .bg2 {background: url('/img/visual_img_02.jpg') no-repeat center center/cover;} 
.main_silde .bg3 {background: url('/img/visual_img_03.jpg') no-repeat center center/cover;} */
.main_silde .swiper-slide > div {width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.main_silde .swiper-slide .mo {display: none;}
.main_silde .main_next {right: 50; width: 13px; height: 24px; background: url('/img/visual_next.png') no-repeat;}
.main_silde .main_prev {left: 50; width: 13px; height: 24px; background: url('/img/visual_prev.png') no-repeat;}
.main_visual .main_pagination {width: auto; /* width: 100%; max-width: 1280px; */ left: 50%; bottom: 65px; margin-left: -640px; text-align: left;}
.main_visual .main_pagination .swiper-pagination-bullet {width: 100px; height: 3px; margin: 0 5px; border-radius: 0; background: #fff;}
.main_visual .scroll_btn {position: absolute; display: block; bottom: 45px; left: 50%; margin-left: -14px; width: 29px; height: 41px; text-align: center; z-index: 1;}


/* 메인 - 타이틀 */
h2.main_tit {position: relative; display: inline-block; font-size: 24px; font-weight: 700; font-family: 'Raleway', sans-serif;}
h2.main_tit:after {content: ''; position: absolute; top: 50%; right: -95px; margin-top: 2px; width: 80px; height: 2px; background: #006BA8;}
h2.main_tit b {color: #006BA8;}


/* 메인 - 콘텐츠1 */
.main .cont1 {padding: 70px 0 150px;}
.main .cont1 .left {float: left; width: 50%;}
.main .cont1 .right {float: right; width: 50%; }
.main .cont1 .info {padding-top: 85px; box-sizing: border-box;}
.main .cont1 .info i {font-size: 13px; font-weight: 500; letter-spacing: 2px; color: #0086cb; font-style: normal; font-family: 'Raleway', sans-serif;}
.main .cont1 .info p {margin-top: 15px; font-size: 55px; line-height: 1; font-weight: 300;}
.main .cont1 .info p b {font-weight: 900;}
.main .cont1 .info span {display: inline-block; margin-top: 20px; min-height: 38px; line-height: 1.2; font-size: 16px; font-weight: 300; color: #444; word-break: keep-all;}
.main .cont1 .silde {position: relative; margin-top: 30px; height: 220px; padding-bottom: 45px; box-sizing: border-box;}
.main .cont1 .business_top {position: static; height: 100%;}
.main .cont1 .business_btm {position: static; height: 100%;}
.main .cont1 .swiper-wrapper {position: static;}
.main .cont1 .swiper-slide div {width: 100%; height: 100%; border: 1px solid #ddd; box-sizing: border-box;}
/* 메인 색상 박스 */
.main .cont1 .top {position: relative; margin-top: 10px;}
.main .cont1 .top:after {content: ''; position: absolute; top: 20px; left: 51%; width: 100%; height: 450px; background: #FCEBFF; z-index: -1;}
.main .cont1 .top .info {position: relative; padding-left: 80px;}
.main .cont1 .top .info:after {content: 'Future of Secondary Battery'; position: absolute; top: -45px; left: 15px; font-size: 40px; font-weight: 700; color: #B57BD1; letter-spacing: -.5px; white-space: nowrap; text-transform: uppercase; font-family: 'Raleway', sans-serif;}
.main .cont1 .btm {position: relative; margin-top: 150px;}
.main .cont1 .btm:after {content: ''; position: absolute; top: 20px; right: 51%; width: 100%; height: 450px; background: #D9FFFE; z-index: -1;}
.main .cont1 .btm .info {position: relative; padding-right: 80px; text-align: right;}
.main .cont1 .btm .info:after {content: 'Future of the customer'; position: absolute; top: -45px; right: 15px; font-size: 40px; font-weight: 700; color: #6ABBFC; letter-spacing: -.5px; white-space: nowrap; text-transform: uppercase; font-family: 'Raleway', sans-serif;}
.main .cont1 .btm .right {text-align: right; padding-top: 50px;}

.main .cont2 {padding-top: 90px; height: 850px; background: url('/img/main_bg_00.jpg') no-repeat center center/cover; box-sizing: border-box;}
.main .cont2 h2.main_tit {color: #fff;}
.main .cont2 .inner {width: 100%; max-width: 1070px; margin: 0 auto;}
.main .cont2 ul {margin-top: 95px; width: 105%; margin-left: -5%;}
.main .cont2 ul li {float: left; width: 28.33333%; height: 500px; margin-left: 5%; border: 1px solid #c1c1c1; background: rgba(255,255,255,.1); text-align: center; box-sizing: border-box; }
.main .cont2 ul li:hover .on {box-shadow: 0px 0px 30px 0px rgba(3, 3, 3, 0.26);}
.main .cont2 ul li .off {height: 100%; padding: 200px 0; font-size: 64px; font-weight: 700; color: #A9E8FC; letter-spacing: -1.5px; font-family: 'Raleway', sans-serif; box-sizing: border-box;}
.main .cont2 ul li .off i {display: inline-block; margin: 0 8px;font-size: 29px; font-weight: 400; color: #acb1b7; font-style: normal;}
.main .cont2 ul li .on {display: none; position: relative; height: 100%; max-height: 500px; padding: 108px 50px; background: rgba(255,525,255,.7) url('/img/rnd_ico.png') no-repeat 80% 89%; box-sizing: border-box; transition: all .4s;}
.main .cont2 ul li.fir .on {background: rgba(255,525,255,.7) url('/img/rnd_ico_01.png') no-repeat 80% 89%;}
.main .cont2 ul li.las .on {background: rgba(255,525,255,.7) url('/img/rnd_ico_03.png') no-repeat 80% 89%;}

.main .cont2 ul li .on {height: 100%;}
.main .cont2 ul li .on .top {padding-bottom: 50px;}
.main .cont2 ul li .on .top > b {font-size: 75px; font-weight: 700; line-height: 0; color: #0b74df; font-family: 'Raleway', sans-serif; letter-spacing: -0.05em;}
.main .cont2 ul li .on .top > p {font-size: 34px; font-weight: 300;}
.main .cont2 ul li .on .top > p b {font-weight: 900;}
.main .cont2 ul li .on .btm {padding-top: 50px; border-top: 1px solid #a7abb1; box-sizing: border-box;}
.main .cont2 ul li .on .btm span {font-size: 18px; font-weight: 300; color: #333; line-height: 1.4;}
.main .cont2 ul li .on i {display: inline-block; margin: 0;font-size: 29px; font-weight: 400; color: #0b74df; font-style: normal;}
.main .cont2 ul li.las .on .top > b{font-size: 68px; padding-bottom: 20px; display: block;}

.main .cont3 {padding: 90px 0 100px; }
.main .cont3 .inner {margin-top: 50px;}
.main .cont3 .left {float: left; width: 100%; max-width: 786px;}
.main .cont3 .left ul {width: 103%; max-width: 735px; margin-left: -3%;}
.main .cont3 .left ul li {float: left; width: 47%; height: 236px; margin-left: 3%; border: 1px solid #ddd; text-align: center; box-sizing: border-box;}
.main .cont3 .left ul li span {font-size: 56px; font-weight: 500; color: #666; transition: all .2s; font-family: 'Raleway', sans-serif;}
.main .cont3 .left ul li:hover {box-shadow: 8px 6px 7px 0px rgba(3, 3, 3, 0.03);}
.main .cont3 .left ul li:hover span {font-weight: 700; color: #000;}
.main .cont3 .left ul li.li1:hover {border: 2px solid #008fe0;}
.main .cont3 .left ul li.li2:hover {border: 2px solid #2aa889;}
.main .cont3 .left ul li.li1 {background: url('/img/nsk_bg.png') no-repeat left center;}
.main .cont3 .left ul li.li2 {background: url('/img/nfm_bg.png') no-repeat left center;}
.main .cont3 .right {float: left; width: calc(100% - 786px);}
.main .cont3 .right b {display: block; margin-top: 20px; font-size: 45px; font-weight: 900; line-height: 1;}
.main .cont3 .right span {font-size: 24px; font-weight: 300; color: #444;}
.main .cont3 .right p {min-height: 120px; margin-top: 15px; font-size: 16px; line-height: 1.5; font-weight: 300; color: #444; word-break: keep-all;}
.main .cont3 .right ul li.nsk b {color: #0086cb;} 
.main .cont3 .right ul li.nfm {display: none;}
.main .cont3 .right ul li.nfm b {color: #2aa889;} 



.main .cont4 {position: relative; padding-bottom: 170px; }
.main .cont4:after {content: ''; position: absolute; top: -45%; right: 5%; width: 305px; height: 423px; background: url('/img/main_bg_02.png') no-repeat 50% 100%; z-index: -1;}
.main .cont4 .top h2 {float: left;}
.main .cont4 .top a {display: inline-block; float: right;}
.main .cont4 .left {float: left; width: 50%; padding-right: 40px; box-sizing: border-box;}
.main .cont4 .left .inner {margin-top: 15px;}
.main .cont4 .left a.more_btn {width: 70px; height: 30px; line-height: 30px; font-size: 12px; font-weight: 500; color: #fff; border-radius: 5px; background: #000 url('/img/more_ico.png') no-repeat 85% 30%; text-align: center;}
.main .cont4 .left ul {border-top: 2px solid #000; border-bottom: 1px solid #7f7f7f; }
.main .cont4 .left ul li {padding: 0 15px; line-height: 61px; border-top: 1px solid #ccc; box-sizing: border-box;}
.main .cont4 .left ul li:first-child {border-top: 0;}
.main .cont4 .left ul li a {display: block; font-size: 16px; font-weight: 300;}
.main .cont4 .left ul li p {float: left; width: calc(100% - 90px); color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main .cont4 .left ul li span {float: right; display: inline-block;  width: 67px; color: #999;}
.main .cont4 .right {float: left; width: 50%;} 
.main .cont4 .right .inner {margin-top: 15px; height: 315px; padding: 0 5px; box-sizing: border-box;}
.main .cont4 .patent_slide {padding: 30px 30px; background: #c6dce7; box-sizing: border-box;}
.main .cont4 .arr {position: relative; float: right; width: 66px; height: 36px;}
.main .cont4 .arr:after {content: ''; position: absolute; top: 50%; left: 50%; margin-top: -10px; width: 1px; height: 20px; background: #ddd;}
.main .cont4 .patent_next {top: 0; right: 0; margin-top: 0; width: 33px; height: 100%; background: url('/img/patent_next.png') no-repeat center center; }
.main .cont4 .patent_prev {top: 0; left: 0; margin-top: 0; width: 33px; height: 100%; background: url('/img/patent_prev.png') no-repeat center center; }
 


.main .cont5 .left {float: left; width: 50%; height: 300px; background: #093c6c url('/img/main_bg_01.png') no-repeat -8% -440%;}
.main .cont5 .right {float: left; width: 50%; height: 270px; margin-top: 30px; background: url('/img/main_bg_03.jpg') no-repeat center center/cover; box-sizing: border-box;}
.main .cont5 .txt {width: 100%; max-width: 640px; color: #fff; text-align: center; box-sizing: border-box;}
.main .cont5 .txt span {display: inline-block; padding: 3px 20px 5px; font-size: 16px; line-height: 1; font-weight: 700; color: #2daced; border: 1px solid #2daced; border-radius: 10px;}
.main .cont5 .txt p {margin-top: 10px; font-size: 30px; font-weight: 300; line-height: 1.3; word-break: keep-all;}
.main .cont5 .txt p b {font-weight: 700;}
.main .cont5 .txt a {display: inline-block; margin-top: 20px; width: 230px; height: 45px; line-height: 45px; font-size: 19px; font-weight: 700; border-radius: 5px; text-align: center; font-family: 'Raleway', sans-serif;}
.main .cont5 .left .txt {float: right; padding-top: 55px;}
.main .cont5 .left .txt a {background: #0086cb;}
.main .cont5 .right .txt {float: left; padding-top: 45px;}
.main .cont5 .right .txt a {color: #0086cb; background: #fff;}


/* 서브 - 비주얼 */
.sub .sub_visual {background-repeat: no-repeat; background-size: cover; background-position: center center;}
.sub .sub_visual .tb {height: 590px;}
.sub .sub_visual .main_txt {text-align: center; padding-top: 80px; box-sizing: border-box;}
.sub .sub_visual .main_txt span {font-size: 18px; font-weight: 300; color: rgba(255,255,255,.5); letter-spacing: 4px; font-family: 'Raleway', sans-serif; text-transform: uppercase;}
.sub .sub_visual .main_txt > h2 {margin-top: 15px; font-size: 45px; line-height: 1; color: #fff; font-weight: 700; letter-spacing: 0; text-transform: uppercase;}
.sub .sub_visual .main_txt .navi {margin-top: 50px; font-size: 13px; color: #fff; letter-spacing: -.5px; text-transform: uppercase;}
.sub .sub_visual .main_txt .navi img {display: inline-block; margin-top: -4px;}
.sub .sub_visual .main_txt .navi a {font-weight: 100;}
.sub .sub_visual .main_txt .navi i {display: inline-block; margin: 0 10px; font-style: normal;}



/* 서브 - 타이틀 */
.sub_tit.st1 {padding-bottom: 22px;}
.sub_tit.st1 b {position: relative; font-size: 19px; line-height: 1; font-weight: 700; color: #333; font-family: 'Raleway', sans-serif; z-index:2; display:inline-block;}
.sub_tit.st1 b:after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 7px; background: #c4dbef; z-index:-1; display:block; clear:both;}
.sub_tit.st1 h3 {margin-top: 5px; font-size: 30px; line-height: 1; font-weight: 700; color: #008fe0;}
.sub_tit.st1 h3 > span {font-weight: 300;}
.sub_tit.st1 h3 > em {font-size: 30px; line-height: 1; font-weight: 300; color: #008fe0;}
.sub_tit.st1 span {display: inline-block; margin-top: 5px; font-size: 14px; font-weight: 500; color: #999; letter-spacing: 0; font-family: 'Raleway', sans-serif;}

.sub_tit.st1.pic b {color: #fff;}
.sub_tit.st1.pic b:after {background: #929495;}
.sub_tit.st1.pic h3 {color: #fff;}

.sub_tit.st1.pic2 b:after {background: #3095cb;}

.sub_tit.st2 {padding: 70px 0 55px; text-align:center;}
.sub_tit.st2 .size {position: relative;}
.sub_tit.st2 b {position: absolute; top: -58px; left: 50%; margin-left: -77px; display: inline-block; font-size: 76px; font-weight: 900; letter-spacing: -2px; color: #efefef; font-family: 'Raleway', sans-serif; z-index: -1;}
.sub_tit.st2 h3 {font-size: 45px; line-height: 1.1; font-weight: 900; color: #333; font-family: 'Raleway', sans-serif;}
.sub_tit.st2 span {font-size: 16px; font-weight: 300; color: #333; letter-spacing: -.3px;}

.sub_tit.st3 {position: relative; display: block; padding-left: 18px; font-size: 20px; font-weight: 700; box-sizing: border-box;}
.sub_tit.st3:before {content: ''; position: absolute; top: 50%; left: 0; margin-top: -5px; width: 10px; height: 10px; background: url('/img/ico_01.png') no-repeat;}

/* 서브 - 3depth */
.lnb {margin-top: -51px;}
.lnb ul li {float: left; width: 50%; height: 50px; line-height: 50px;}
.lnb ul li a {display: block; font-size: 18px; font-weight: 300; color: #aaa; text-align: center; background: #fff; border-bottom: 1px solid #aaa; box-sizing: border-box;}
.lnb ul li.on a {position: relative; color: #0086cb; border-bottom: 0; }
.lnb ul li.on a:after {content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: #0086cb;}


.sub .section {padding-top: 60px;}
p.tit1 {margin-top: 15px; font-size: 40px; font-weight: 300; line-height: 1.4; color: #333; letter-spacing: -1.5px; text-align: center;}
p.tit1 b {font-weight: 900;}
.pic1 {display: block; font-size: 16px; color: #333; text-align: center;}


/* 테이블 */
.sub table.st1 thead {border-top: 1px solid #0086cb; box-sizing: border-box;}
.sub table.st1 tbody {border-bottom: 1px solid #aaa;}
.sub table.st1 thead tr th {height: 40px; font-size: 15px; font-weight: 500; color: #555; background: #eee;}
.sub table.st1 tbody tr td {padding: 20px; font-size: 16px; font-weight: 300; color: #696969; line-height: 1.4; border-left: 1px solid #eee; border-top: 1px solid #eee; text-align: center; word-break: keep-all; box-sizing: border-box;}
.sub table.st1 tbody tr td:first-child {border-left: 0;}
.sub table.st1 tbody tr td.pic {font-weight: 400;}


/* company - about */
.sub .about .cont1 {text-align: center;} 
.sub .about .cont1 p.tit1 em.dpb {display: inline-block;}
.sub .about .cont1 span.tit2 {position: relative; display: inline-block; margin-top: 30px; width: 100%; max-width: 520px; height: 50px; line-height: 50px; font-size: 20px; color: #0273d3; border-radius: 8px; background: #d4e7f8; font-family: 'Raleway', sans-serif;}
.sub .about .cont1 span.tit2:after {content: ''; position: absolute; bottom: -13px; left: 50%; margin-left: -7.5px; width: 15px; height: 13px; background: url('/img/span_ico.png') no-repeat;}
.sub .about .cont1 span.tit2 b {position: relative; display: inline-block; padding-left: 30px; font-weight: 900; text-transform: uppercase; }
.sub .about .cont1 span.tit2 b:before {content: ''; position: absolute; top: 50%; left: 10px; margin-top: -2.5px; width: 5px; height: 5px; border-radius: 5px; background: #0273d3;}
.sub .about .cont1 ul {width: 102%; margin-left: -2%; margin-top: 50px;}
.sub .about .cont1 ul li {position: relative; float: left; width: 23%; margin-left: 2%;}
.sub .about .cont1 ul li img {display: block; width: 100%;}
.sub .about .cont1 ul li span {position: absolute; bottom: 0; right: 0; display: inline-block; padding: 0 12px; height: 30px; line-height: 28px; font-size: 15px; font-weight: 300; color: #fff; background: #000; box-sizing: border-box;}
.sub .about .cont2 {margin-top: -120px; padding: 190px 0 55px; background: #f5f5f5;}
.sub .about .cont2 .inner {text-align: center;}
.sub .about .cont2 img {display: inline-block; width: 100%; max-width: 1243px;}
.sub .about .cont2 img.mo {display: none;}
.sub .about .cont3 {padding: 140px 0; text-align: center;}
.sub .about .cont3 img {display: inline-block; max-width: 100%;}
.sub .about .cont3 img.mo {display: none; width: 100%; max-width: 490px;}
/*.sub .about .cont3 ul {width: 102%; margin-left: -2%; margin-top: -2%;}
.sub .about .cont3 ul li {float: left; width: 14.66666%; margin-left: 2%; margin-top: 2%; box-sizing: border-box;}*/
.sub .about .cont3 ul {width: 102%;margin-left: -2%;margin-top: -5%;padding-left: 8%;}
.sub .about .cont3 ul li {float: left;width: 20%;margin-left: 1.5%;margin-top: 2%;box-sizing: border-box;max-width: 200px;}
.sub .about .cont3 ul li p {height: 50px; line-height: 50px; font-size: 16px; font-weight: 300; color: #555; border-top: 1px solid #c0d1da; box-sizing: border-box;}
.sub .about .cont3 ul li p:first-child {border-top: 0;}
.sub .about .cont3 ul li p:last-child{border-bottom: 1px solid #008fe0;}
.sub .about .cont3 ul li p.tit {font-size: 18px; font-weight: 500; color: #fff; background: #008fe0;}
.sub .about .cont4 {padding: 60px 0 80px;background: url('/img/about_bg.png') no-repeat center center/cover;}
.sub .about .cont4 .sub_tit b {color: #fff;}
.sub .about .cont4 .sub_tit span {color: #b0b0b0;}
.sub .about .cont4 ul {padding-top: 30px; width: 102%; margin-left: -2%; margin-top: -2%;}
.sub .about .cont4 ul li {float: left; width: 14.66666%; margin-left: 2%; margin-top: 2%; color: #fff; text-align: center;}
.sub .about .cont4 .top {padding: 15px 0; background: rgba(0,0,0,.4);}
.sub .about .cont4 .top b {display: block; font-size: 18px; font-weight: 700; word-break: keep-all;}
.sub .about .cont4 .top span {font-size: 16px; font-weight: 300; color: #bcbdbe;}
.sub .about .cont4 .btm {padding: 15px 0; border-top: 1px solid rgba(255,255,255,.3); border-bottom: 2px solid rgba(53,176,246,.7);  background: rgba(0,0,0,.4);}
.sub .about .cont4 .btm p {font-size: 15px; color: #bcbdbd;}

/* company - ceo */
.sub .ceo {padding-bottom: 100px;}
.sub .ceo .cont1 .size {height: 310px; background: url('/img/ceo_bg_01.png') no-repeat center center/cover;}
.sub .ceo .cont1 b {display: block;}
.sub .ceo .cont2 .box {float: left; width: 50%; height: 300px; box-sizing: border-box;}
.sub .ceo .cont2 .left {padding: 55px 50px 50px; background: #eef5f9;}
.sub .ceo .cont2 .left p {margin-top: 25px; font-size: 16px; font-weight: 300; color: #333; line-height: 1.5; word-break: keep-all;}
.sub .ceo .cont2 .left p:first-child {margin-top: 0;}
.sub .ceo .cont2 .right {display: table; padding: 0 50px 45px; background: url('/img/ceo_bg_02.jpg') no-repeat center center/cover; box-sizing: border-box;}
.sub .ceo .cont2 .right .inner {display: table-cell; vertical-align: bottom; color: #fff;}
.sub .ceo .cont2 .right .inner span {display: block; font-size: 15px; font-weight: 300;}
.sub .ceo .cont2 .right .inner b {display: block; font-size: 15px; font-weight: 700;}
.sub .ceo .cont2 .right .inner img {display: inline-block; margin-top: 15px;}

/* company - vision */
.sub .vision .cont1 {padding-bottom: 60px;}
.sub .vision .cont1 ul {width: 103%; margin-left: -3%; margin-top: -2%; padding-top: 60px;}
.sub .vision .cont1 ul li {float: left; width: 30.33333%; height: 450px; margin-left: 3%; margin-top: 2%; padding: 65px 45px; color: #fff; text-align: center; box-sizing: border-box;}
.sub .vision .cont1 ul li b {position: relative; display: block; padding-bottom:  25px; font-size: 24px; font-weight: 700;}
.sub .vision .cont1 ul li b:after {content: ''; position: absolute; left: 50%; bottom: 12px; margin-left: -15px; width: 30px; height: 1px; background: rgba(255,255,255,.3);}
.sub .vision .cont1 ul li span {font-size: 16px; font-weight: 300; line-height: 1.5;}
.sub .vision .cont1 ul li.bg1 {background: url('/img/vision_bg_01.jpg') no-repeat center center/100%;}
.sub .vision .cont1 ul li.bg2 {background: url('/img/vision_bg_02.jpg') no-repeat center center/100%;}
.sub .vision .cont1 ul li.bg3 {background: url('/img/vision_bg_03.jpg') no-repeat center center/100%;}
.sub .vision .cont2 {padding: 60px 75px; background: #eef5f9;}
.sub .vision .cont2 span.pic1 {display: block; margin-top: 20px;}


/* company - 경영이념/핵심가치 */
.sub .core{}
.sub .core .top_wrap{position:relative; z-index:1}
.sub .core .top_wrap .p_wrap{background-image:url('/img/core_bg.png');min-height:550px; background-size:auto; background-position:center bottom; background-repeat:no-repeat;text-align:center;}
.sub .core .top_wrap p.tit1{padding-top: 70px; margin-top: 0;}
.sub .core .top_wrap span.pic1{font-size: 18px; font-weight: 300;}
.sub .core .top_wrap em.dpb {display: inline;}
.sub .core .bottom_wrap {padding:170px 0 120px;background:#f9f9f9;margin-top:-130px; position:relative;}
.sub .core .bottom_wrap ul{font-size:0;margin-left:-15px; width:calc(100% + 15px)}
.sub .core .bottom_wrap ul li{width:calc(20% - 15px);margin-left:15px;padding:55px 30px 15px;min-height:310px;display:inline-block;vertical-align:middle;background:#fff;border:1px solid #ccc;box-sizing:border-box;}
.sub .core .bottom_wrap ul li span{font-size:70px; line-height:1; font-weight:900; letter-spacing:-.75px;color:#d5ebf9;display:block}
.sub .core .bottom_wrap ul li span.df{color:#e0f5f0}
.sub .core .bottom_wrap ul li b{font-size:30px; font-weight:900;display:block; line-height:1;margin-top:-24px;color:#333;letter-spacing:-.5px;word-break: keep-all;}
.sub .core .bottom_wrap ul li p{padding-top:25px; margin-top:30px; border-top:1px solid #eee;;font-size:16px;color:#696a6c;word-break:keep-all;letter-spacing:-.5px;}

/* company - history */
.sub .history .cont1 {padding: 60px 0 300px;}

.scroll_bg {position: relative;}
.scroll_bg:before {content: ''; position: absolute; top: 0; right: -1px; width: 213px; height: 285px; background: url('/img/scroll_bg.png') no-repeat 50% 50%; z-index: 5;}
.scroll_wrapper { width: 100%; max-width: 1360px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;}
.scroll_wrapper::-webkit-scrollbar {display: none;}
.scroll_wrapper .inner {width: 400%;}
.scroll_wrapper .item {float: left; width: 100%; max-width: 1360px;}
.sub .history .cont1 .thumb {float: left; width: 100%; max-width: 342px;}
.sub .history .cont1 .thumb span.img {display: inline-block; width: 100%; height: 257px; background-image: url('/img/history_img.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.sub .history .cont1 .thumb span.img img {display: inline-block; width: 100%; max-width: 100%;}
.sub .history .cont1 .thumb em {display: block;font-size: 16px; color: #999;}
.sub .history .cont1 .info {float: left; width: calc(100% - 342px); padding-top: 17px; padding-left: 20px; box-sizing: border-box;}
.sub .history .cont1 .info b {display: block; font-size: 30px; line-height: 1.3; font-weight: 900;}
.sub .history .cont1 .info span {position: relative; display: inline-block; font-size: 24px; font-weight: 300; color: #333;}
.sub .history .cont1 .info span:after {content: ''; position: absolute; bottom: 0; left: -2px; width: 101%; height: 20px; background: #e5f1fb; z-index: -1;}
.sub .history .cont1 .info ul {margin-top: 40px; padding-top: 25px; border-top: 1px solid #ddd;}
.sub .history .cont1 .info ul li {position: relative; float: left; width: 80%; margin-left: 3%; box-sizing: border-box;}
.sub .history .cont1 .info ul li:before {content: ''; position: absolute; top: -31px; left: 5px; width: 11px; height: 11px; background: url('/img/mark_ico.png') no-repeat; }
.sub .history .cont1 .info ul li em {display: inline-block; padding: 5px; font-size: 20px; line-height: 1; font-weight: 700; color: #fff; border-radius: 5px; background: #4db3e7; box-sizing: border-box;}
.sub .history .cont1 .info ul li p {margin-top: 10px; font-size: 16px; font-weight: 300; color: #666; keep-all;}
.sub .history .cont1 .info ul li dd {font-size: 16px; font-weight: 300; color: #666; word-break: keep-all;}


.sub .history .cont1 .item1 .info ul li {width: 22%;}
.sub .history .cont1 .item2 .info ul li {width: 17%;}


.sub .history .cont2 {position: relative; padding: 50px 0 70px;}
.sub .history .cont2:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 300px; background: #eef5f9; z-index: -2;}
.sub .history .cont2 ul {width: 102%; margin-left: -2%; margin-top: -2%;}
.sub .history .cont2 ul li {float: left; width: 18%; margin-left: 2%; margin-top: 2%; box-shadow: 2px 3px 5px 0px rgba(170, 170, 170, 0.2);}


/* company - network */
.sub .network {}
.sub .network .cont1 {padding: 60px 0;}
.sub .network .cont1 ul  {width: 102%; margin-left: -2%; margin-top: -2%;}
.sub .network .cont1 ul li {float: left; width: 31.33333%; height: 200px; margin-left: 2%; margin-top: 2%; border: 1px solid #e3e9ec; text-align: center; box-sizing: border-box; transition: all .4s;}
.sub .network .cont1 ul li:hover {box-shadow: 2px 4px 10px 0px rgba(0, 0, 0, 0.07);}
.sub .network .cont2 {padding: 60px 0;background: #f3f3f3;}
.sub .network .cont2 .left {float: left; width: 400px;}
.sub .network .cont2 .left img {display: inline-block; width: 100%;}
.sub .network .cont2 .right {float: left; width: calc(100% - 400px); padding-left: 65px; box-sizing: border-box;}
.sub .network .cont2 .right ul {width: 103%; margin-left: -3%; margin-top: -3%;}
.sub .network .cont2 .right ul li {float: left; width: 47%; margin-left: 3%; margin-top: 3%;}
.sub .network .cont2 .right ul li.pic {float: none;}
.sub .network .cont2 .right ul li p img {display: inline-block; width: 100%;}
.sub .network .cont2 .right ul li div {height: 65px; padding: 0 15px; background: #fff; box-sizing: border-box;}
.sub .network .cont2 .right ul li b {display: block; font-size: 16px; font-weight: 700; color: #333;}
.sub .network .cont2 .right ul li span {font-size: 15px; font-weight: 300; color: #666; word-break: keep-all;}
.sub .network .cont3 {padding: 60px 0; background: url('/img/group_bg.jpg') no-repeat center center/cover; }
.sub .network .cont3 ul {width: 102%; margin-left: -2%; margin-top: -2%;}
.sub .network .cont3 ul li {float: left; width: 18%; margin-left: 2%; margin-top: 2%;}
.sub .network .cont3 ul li a {display: block;}
.sub .network .cont3 ul li p.tb {height: 120px; border: 1px solid #ddd; text-align:center; background: #fff; box-sizing: border-box; transition: all .4s;}
.sub .network .cont3 ul li:hover p.tb {box-shadow: 2px 4px 10px 0px rgba(0, 0, 0, 0.07);}
.sub .network .cont3 ul li div.info {padding: 5px 0;}
.sub .network .cont3 ul li div.info b {display: block; font-size: 16px; font-weight: 500; color: #333;}
.sub .network .cont3 ul li div.info span {display: block; margin-top: 3px; font-size: 14px; color: #777; word-break: keep-all;}


/* company - partner */
.sub .partner ul.pro_list {width: 103%; margin-left: -3%; margin-top: -3%;}
.sub .partner ul.pro_list li {float: left; width: 30.33333%; margin-left: 3%; margin-top: 3%; border: 1px solid #e5e9ec; background: #fff; box-sizing: border-box;}
.sub .partner ul.pro_list li i {display: inline-block; padding: 0 15px; height: 30px; line-height: 30px; font-size: 16px; font-weight: 400; color: #fff; background: #000; font-style: normal;}
.sub .partner ul.pro_list li p.tb {height: 295px; text-align: center;}
.sub .partner ul.pro_list li span.tbc {padding: 0 20px;}
.sub .partner ul.pro_list li img {display: inline-block; max-height: 100%; max-width: 100%;}
.sub .partner ul.pro_list li > span {position: relative; display: block; padding: 0 25px; height: 35px; line-height: 35px; font-size: 14px; color: #777; letter-spacing: -.5px; box-sizing: border-box;}
.sub .partner ul.pro_list li > span:before {content: ''; position: absolute; top: 50%; left: 13px; margin-top: -2px; width: 4px; height: 4px; border-radius: 4px; background: #35b0f6;}
.sub .partner ul.pro_list li.pic img {height: 100%;}
.sub .partner .contents {position: relative; top: -175px;}
.sub .partner .contents .size {max-width: 2000px; overflow: hidden;}
.sub .partner .contents .inner {width: 100%; max-width: 1360px; margin: 0 auto;}
.sub .partner .contents .left {position: relative; float: left; padding-top: 220px; width: 100%; max-width: 468px; height: 655px; box-sizing: border-box;}
.sub .partner .contents .left:after {content: ''; position: absolute; top: 0; right: 0; width: 790px; height: 100%; background: url('/img/nsk_bg_01.jpg') no-repeat right center/cover; z-index: -1;}
.sub .partner .contents .left p {position: relative; padding: 80px 0 0 60px; font-size: 26px; font-weight: 300; color: #fff; line-height: 1.3; letter-spacing: -.5px; background: url('/img/nsk_ico.png') no-repeat 0 20px/134px 114px; word-break: keep-all; box-sizing: border-box;}
.sub .partner .contents .left b {font-weight: 900; word-break: keep-all;}
.sub .partner .contents .right {position: relative; float: left; padding-top: 250px; width: calc(100% - 468px); height: 655px; box-sizing: border-box;}
.sub .partner .contents .right:after {content: ''; position: absolute; top: 0; left: 0; width: 1210px; height: 100%; background: #eef5f9; z-index: -1;}
.sub .partner .contents .right ul {padding-left: 100px; width: 103%; margin-left: -3%; margin-top: -3%; box-sizing: border-box;}
.sub .partner .contents .right ul li {position: relative; float: left; width: 30.33333%; margin-left: 3%; margin-top: 3%; border-radius: 5px; overflow: hidden;}
.sub .partner .contents .right ul li img {display: block; width: 100%;}
.sub .partner .contents .right ul li span {position: absolute; bottom: 0; left: 0; display: inline-block; padding: 0 7px; height: 27px; line-height: 27px; font-size: 15px; color: #ccc; background: rgba(0,0,0,.5);}
.sub .partner .contents .sub_tit.st1 b {color: #fff;}


/* company - partner - nsk */
.sub .nsk {max-height: 1056px;}
.sub .nsk .cont3 {margin-top: -175px; padding: 50px 0 110px;}
.sub .nsk .cont3 ul li {float: left; width: 33.33333%; text-align: center;}
.sub .nsk .cont3 ul li .img {position: relative; padding: 0 40px 15px 40px; border-bottom: 1px solid #ddd; box-sizing: border-box;}
.sub .nsk .cont3 ul li .img:after {content: ''; position: absolute; bottom: -5px; left: 50%; margin-left: -7px; width: 11px; height: 11px; background: url('/img/mark_ico.png') no-repeat;}
.sub .nsk .cont3 ul li .info {padding: 0 40px; box-sizing: border-box;}
.sub .nsk .cont3 ul li .mid {padding: 10px 0 15px;}
.sub .nsk .cont3 ul li .mid b {display: inline-block; padding: 0 6px; height: 20px; line-height: 18px; font-size: 16px; font-weight: 700; color: #fff; border-radius: 5px;}
.sub .nsk .cont3 ul li .mid p {margin-top: 8px; font-size: 18px; line-height: 1.3; font-weight: 700; color: #333;}
.sub .nsk .cont3 ul li .mid span {font-size: 16px; font-weight: 300; color: #777;}
.sub .nsk .cont3 ul li .btm {padding: 23px; height: 145px; border-radius: 5px; background: #f3f3f3; text-align: left; box-sizing: border-box;}
.sub .nsk .cont3 ul li .btm p {position: relative; padding-left: 12px; font-size: 16px; box-sizing: border-box;}
.sub .nsk .cont3 ul li .btm p:before {content: ''; position: absolute; top: 6px; left: 0; width: 2px; height: 12px; background: #ccc;}
.sub .nsk .cont3 ul li .btm b {float: left; display: block; width: 65px; padding-right: 10px; color: #333; box-sizing: border-box;}
.sub .nsk .cont3 ul li .btm span {float: left; display: block; width: calc(100% - 65px); color: #555;}

.sub .nsk .cont3 ul li.li1 .img {padding-right: 60px;}
.sub .nsk .cont3 ul li.li1 .img:after {margin-left: -27px;}
.sub .nsk .cont3 ul li.li3 .img {padding-left: 60px;}
.sub .nsk .cont3 ul li.li3 .img:after {margin-left: 14px;}

.sub .nsk .cont3 ul li.li1 .info {padding-right: 60px;}
.sub .nsk .cont3 ul li.li2 .info {padding: 0 50px;}
.sub .nsk .cont3 ul li.li3 .info {padding-left: 60px;}

.sub .nsk .cont3 ul li.li1 .mid b {background: #4db3e7;}
.sub .nsk .cont3 ul li.li2 .mid b {background: #6acbe5;}
.sub .nsk .cont3 ul li.li3 .mid b {background: #89e3e3;}

/* company - partner - nfm */
.sub .nfm {max-height: 1027px;}
.sub .nfm .cont1 .size {max-width: 920px;}
.sub .nfm ul.pro_list li {width: 47%;}
.sub .nfm .contents .right {padding-left: 75px; padding-top: 270px; box-sizing: border-box;}
.sub .nfm .contents .right .img_box {width: 106%; margin-left: -6%;}
.sub .nfm .contents .right .img_box p {position: relative; float: left; width: 44%; margin-left: 6%;}
.sub .nfm .contents .right .img_box p span {position: absolute; bottom: 0; left: 0; display: inline-block; padding: 0 10px; height: 26px; line-height: 24px; font-size: 15px; color: #ccc; background: rgba(0,0,0,.5); box-sizing: border-box;} 
.sub .nfm .contents .right .img_box p img {display: block; width: 100%;}
.sub .nfm .contents .right .txt_box .tit {position: relative; padding: 20px 0 15px; border-bottom: 1px solid #ccc;}
.sub .nfm .contents .right .txt_box .tit em {display: block; padding-left: 15px; font-size: 16px; line-height: 1; font-weight: 500; color: #333; box-sizing: border-box;}
.sub .nfm .contents .right .txt_box .tit em:before {content: ''; position: absolute; top: 50%; left: 0; display: block; margin-top: 3px; width: 6px; height: 6px; border-radius: 6px; background: #35b0f6;}
.sub .nfm .contents .right .txt_box .txt {padding-top: 10px;}
.sub .nfm .contents .right .txt_box .txt p {position: relative; padding-left: 15px; font-size: 16px; font-weight: 300; color: #333; box-sizing: border-box;}
.sub .nfm .contents .right .txt_box .txt p:before {content: '-'; position: absolute; top: 50%; left: 0; margin-top: -12px; font-size: 16px; color: #333;}


/* .sub .nfm .contents .right ul {width: 100%; margin-left: 0; margin-top: 0; padding-right: 40px;}
.sub .nfm .contents .right ul li {float: none; width: 100%; margin-left: 0; margin-top: 10px; border-radius: 0;}
.sub .nfm .contents .right ul li div {float: left; padding: ; box-sizing: border-box;}
.sub .nfm .contents .right ul li div.tit {width: 100%; max-width: 200px; padding: 20px 15px; font-size: 16px; color: #fff; font-weight: 300; box-sizing: border-box;}
.sub .nfm .contents .right ul li div.txt {width: calc(100% - 200px); padding: 20px 15px; border-bottom: 1px solid #ccc; box-sizing: border-box;}
.sub .nfm .contents .right ul li div.txt p {position: relative; padding-left: 15px; font-size: 16px; font-weight: 300; color: #333; box-sizing: border-box;}
.sub .nfm .contents .right ul li div.txt p:before {content: '-'; position: absolute; top: 50%; left: 0; margin-top: -12px; font-size: 16px; color: #333;} */


.sub .nfm .contents .right ul li.li1 div.tit {height: 66px; background: #0086cb; }
.sub .nfm .contents .right ul li.li1 div.txt {height: 66px; border-top: 1px solid #1b3440;}
.sub .nfm .contents .right ul li.li2 div.tit {height: 120px; background: #1b3440;}
.sub .nfm .contents .right ul li.li2 div.txt {height: 120px; border-top: 1px solid #1b3440;}
.sub .nfm .contents .right ul li.li3 div.tit {height: 115px; background: #1b3440; }
.sub .nfm .contents .right ul li.li3 div.txt {height: 115px; border-top: 1px solid #1b3440;}






/* business - index */
.sub .lnb.busi {margin-top: -51px;}
.sub .lnb.busi ul li {width: 20%;}


.sub .business {padding-bottom: 120px;}
.sub .business ul.pro_list {width: 104%; margin-left: -4%; margin-top: -4%;}
.sub .business ul.pro_list li {position: relative; float: left; width: 29.33333%; margin-left: 4%; margin-top: 4%; border: 1px solid #e5e9ec; box-sizing: border-box;}
.sub .business ul.pro_list li div.on {display: none; position: absolute; top: 0; left: 0; padding: 40px; width: 100%; height: 100%; color: #fff; background: rgba(0,134,203,.8); text-align: center; box-sizing: border-box;}
.sub .business ul.pro_list li div.on p {font-size: 26px; font-weight: 700; word-break: keep-all;}
.sub .business ul.pro_list li div.on a.view {display: inline-block; margin-top: 10px; width: 60px; height: 25px; line-height: 26px; text-indent: -5px; font-weight: 300; border: 1px solid #fff; border-radius: 5px; background: url('/img/view_ico.png') no-repeat 84% 30%; text-align: center;}


/* business - view */
.sub .business.view {padding-bottom: 110px;}
.sub .business.view .tit {margin-bottom: 20px; color: #0086cb;}
.sub .business.view .tit b {font-size: 40px; font-weight: 900; }
.sub .business.view .tit span {display: inline-block; margin-left: 3px; font-size: 26px; font-weight: 300;}
.sub .business.view ul {width: 103%; margin-left: -3%; margin-top: -3%;}
.sub .business.view ul li {float: left; width: 47%; margin-left: 3%; margin-top: 3%; border: 1px solid #e5e9ec; box-sizing: border-box;}
.sub .business.view table.info {margin-top: 35px; border-top: 1px solid #0086cb;}
.sub .business.view table.info tr {border-bottom: 1px solid #eaeaea;}
.sub .business.view table.info tr th {padding: 20px; font-size: 15px; font-weight: 700; color: #696969; background: #f8f8f8; text-align: left; box-sizing: border-box;}
.sub .business.view table.info tr td {padding: 20px; font-size: 15px; font-weight: 300; color: #696969; box-sizing: border-box;}
.sub .business.view table.info tr.pic th {vertical-align: top;}
.sub .business.view .btm_btn {margin-top: 60px; text-align: center;}
.sub .business.view .btm_btn a {display: inline-block; width: 100px; height: 40px; line-height: 38px; font-size: 16px; font-weight: 500; border: 0; border-radius: 5px; color: #fff; background: #000; cursor: pointer;}

/* business - 제품소개 */
.sub .product .rnd_cmm {padding: 60px 0 20px;} 
.sub .product .rnd_cmm .txt p {position: relative; padding-left: 15px; font-size: 16px; font-weight: 300; word-break: keep-all; box-sizing: border-box;}
.sub .product .rnd_cmm .txt p:before {content: '-'; position: absolute; top: 0; left: 0; color: #000;}
.sub .product .rnd_cmm .top {margin: 25px 0 35px;}
.sub .product .rnd_cmm .top .left {float: left; width: 67%; max-width: 890px;}
.sub .product .rnd_cmm .top .right {float: left; width: 30%; margin-left: 3%; box-sizing: border-box;}
.sub .product .rnd_cmm .top .box {background: #f7f7f7; }
.sub .product .rnd_cmm .top .box .tb {padding: 0 30px 30px 30px; text-align: right; box-sizing: border-box; }
.sub .product .rnd_cmm .top .box i {display: inline-block; padding: 0 15px; height: 30px; line-height: 28px; font-size: 16px; font-weight: 400; color: #fff; background: #000; font-style: normal;}
.sub .product .rnd_cmm .top .box img {display: inline-block; max-width: 100%;}
.sub .product .rnd_cmm .btm {padding-top: 30px; border-top: 1px solid #aaa;}
.sub .product .rnd_cmm .btm strong {display: block; font-size: 20px; font-weight: 700; text-align: left;}
.sub .product .rnd_cmm .btm strong img {display: inline-block; margin-right: 8px;}
.sub .product .rnd_cmm .btm ul {font: 0; width: calc(100% + 42px); margin-left: -42px; margin-top: -10px; padding-bottom: 100px;}
.sub .product .rnd_cmm .btm ul li {position: relative; display: inline-block; width: calc(14.28571% - 45px); margin-left: 42px; margin-top: 50px; text-align: center;}
/* .sub .product .rnd_cmm .btm ul li .off {display: inline-block;} */
.sub .product .rnd_cmm .btm ul li .off .box {position: relative; width: 158px; height: 158px; background: url('/img/border_01.png') no-repeat center center/cover;}
.sub .product .rnd_cmm .btm ul li .off .box:before {content: ''; position: absolute; top: 50%; right: -35px; margin-top: -14px; width: 28px; height: 28px; background: url('/img/rnd_next.png') no-repeat;}
.sub .product .rnd_cmm .btm ul li .off .box.pic:before {display: none;} 
.sub .product .rnd_cmm .btm ul li .off span {display: inline-block; padding: 0 6px; line-height: 15px; font-size: 10px; color: #fff; border-radius: 5px; background: #008fe0; letter-spacing: 0; box-sizing: border-box;}
.sub .product .rnd_cmm .btm ul li .off em {display: block; margin: 5px 0 10px; font-size: 19px; font-weight: 500; color: #333;}
.sub .product .rnd_cmm .btm ul li .on {display: none; position: absolute; top: 0; left: 0; /* margin-left: 79px; */}
.sub .product .rnd_cmm .btm ul li .on .box {position: relative; width: 158px; height: 158px; border: 2px solid #018fe0; border-radius: 158px;  box-sizing: border-box;}
.sub .product .rnd_cmm .btm ul li .on .box:after {content: ''; position: absolute; bottom: -9px; left: 50%; margin-left: -11px; width: 17px; height: 9px; background: url('/img/border_ico.png') no-repeat;}
.sub .product .rnd_cmm .btm ul li .on em {display: inline-block; margin-top: 15px; font-size: 16px; color: #008fe0;}
.sub .product .rnd_cmm .btm ul .li1 .off .box {background: url('/img/border_01.png') no-repeat center center/cover;}
.sub .product .rnd_cmm .btm ul .li2 .off .box {background: url('/img/border_02.png') no-repeat center center/cover;}
.sub .product .rnd_cmm .btm ul .li3 .off .box {background: url('/img/border_03.png') no-repeat center center/cover;}
.sub .product .rnd_cmm .btm ul .li4 .off .box {background: url('/img/border_04.png') no-repeat center center/cover;}
.sub .product .rnd_cmm .btm ul .li5 .off .box {background: url('/img/border_05.png') no-repeat center center/cover;}
.sub .product .rnd_cmm .btm ul .li6 .off .box {background: url('/img/border_06.png') no-repeat center center/cover;}
.sub .product .rnd_cmm .btm ul .li7 .off .box {background: url('/img/border_07.png') no-repeat center center/cover;}
.sub .product .rnd_cmm.cont2 .btm ul .li1 .off .box {background: url('/img/border_02.png') no-repeat center center/cover;}
.sub .product .rnd_cmm.cont2 .btm ul .li2 .off .box {background: url('/img/border_04.png') no-repeat center center/cover;}
.sub .product .rnd_cmm.cont2 .btm ul .li7 .off .box {background: url('/img/border_07.png') no-repeat center center/cover;}

.sub .product .cont2 {}
.sub .product .cont2 .top .box {background: #f5f5f5;}
.sub .product .cont2 .btm ul .li1 .on .box {background: url('/img/rnd2_step_01.jpg') no-repeat center center/cover;}
.sub .product .cont2 .btm ul .li2 .on .box {background: url('/img/rnd2_step2_02.jpg') no-repeat center center/cover;}
.sub .product .cont2 .btm ul .li3 .on .box {background: url('/img/rnd2_step2_03.jpg') no-repeat center center/cover;}
.sub .product .cont2 .btm ul .li4 .on .box {background: url('/img/rnd2_step2_04.jpg') no-repeat center center/cover;}
.sub .product .cont2 .btm ul .li5 .on .box {background: url('/img/rnd2_step2_05.jpg') no-repeat center center/cover;}
.sub .product .cont2 .btm ul .li6 .on .box {background: url('/img/rnd2_step2_06.jpg') no-repeat center center/cover;}
.sub .product .cont2 .btm ul .li7 .on .box {background: url('/img/rnd2_step2_07.jpg') no-repeat center center/cover;}

.sub .product .cont3 {background: #f7f7f7;}
.sub .product .cont3 .top .box {background: #fff;}
.sub .product .cont3 .right .box .tb {padding-right: 50px; height: 265px;}
.sub .product .cont3 .right .box .mo {display: none;}
.sub .product .cont3 .btm ul .li1 .on .box {background: url('/img/rnd2_step_01.jpg') no-repeat center center/cover;}
.sub .product .cont3 .btm ul .li2 .on .box {background: url('/img/rnd2_step_02.jpg') no-repeat center center/cover;}
.sub .product .cont3 .btm ul .li3 .on .box {background: url('/img/rnd2_step_03.jpg') no-repeat center center/cover;}
.sub .product .cont3 .btm ul .li4 .on .box {background: url('/img/rnd2_step_04.jpg') no-repeat center center/cover;}
.sub .product .cont3 .btm ul .li5 .on .box {background: url('/img/rnd2_step_05.jpg') no-repeat center center/cover;}
.sub .product .cont3 .btm ul .li6 .on .box {background: url('/img/rnd2_step_06.jpg') no-repeat center center/cover;}
.sub .product .cont3 .btm ul .li7 .on .box {background: url('/img/rnd2_step_07.jpg') no-repeat center center/cover;}


/* business - 설비 */
.sub .system .cont1 ul {width: calc(100% + 40px); margin-left: -40px; margin-top: 0; padding-bottom: 50px;}
.sub .system .cont1 ul li {float: left; width: calc(25% - 40px); margin-left: 40px; margin-top: 3%;}
.sub .system .cont1 ul li .img {position: relative; width: 100%; height: 175px; color: #fff; text-align: center;}
.sub .system .cont1 ul li .img:before {content: ''; position: absolute; top: 50%; left: -35px; margin-top: -14px; width: 28px; height: 28px; background: url('/img/rnd_next.png') no-repeat;}
.sub .system .cont1 ul li:first-child .img:before {display: none;} 
.sub .system .cont1 ul li .img p {font-size: 24px; font-weight: 700; text-transform: uppercase;}
.sub .system .cont1 ul li .img span {display: block; font-size: 18px; font-weight: 300;}
.sub .system .cont1 ul li .txt {margin-top: 20px; padding: 0 10px; text-align: left; box-sizing: border-box;}
.sub .system .cont1 ul li .txt p {position: relative; padding-left: 15px; font-size: 16px; font-weight: 300; color: #333; box-sizing: border-box;}
.sub .system .cont1 ul li .txt p:before {content: '-'; position: absolute; top: 0; left: 0;}
.sub .system .cont1 ul .li1 .img {background: url('/img/system_01.jpg') no-repeat center center/cover;}
.sub .system .cont1 ul .li2 .img {background: url('/img/system_02.jpg') no-repeat center center/cover;}
.sub .system .cont1 ul .li3 .img {background: url('/img/system_03.jpg') no-repeat center center/cover;}
.sub .system .cont1 ul .li4 .img {background: url('/img/system_04.jpg') no-repeat center center/cover;}
.sub .system .sys_cmm {padding: 60px 0; box-sizing: border-box;}
.sub .system .sys_cmm .inner {margin-top: 35px;}
.sub .system .sys_cmm .inner table {margin-top: 20px;}
.sub .system .sys_cmm .img p {text-align: center;}
.sub .system .sys_cmm .img p > img {display: inline-block; width: 100%;}
.sub .system .sys_cmm .img p > img.mo {display: none; width: 100%; max-width: 420px;}
.sub .system .cont2 {background: #f9f9f9;}
.sub .system .cont4 {padding: 60px 0 90px; background: #f9f9f9;}


/* r&d - r&d */
.sub .rnd1 .cont1 {padding: 60px 0 100px;}
.sub .rnd1 ul {width: 103%; margin-left: -3%; margin-top: -3%;}
.sub .rnd1 ul li {position: relative; float: left; padding: 80px 20px; width: 30.33333%; height: 450px; margin-left: 3%; margin-top: 3%; color: #fff; text-align: center; box-sizing: border-box;}
.sub .rnd1 ul li:after {content: ''; position: absolute; bottom: 30px; right: 30px;}
.sub .rnd1 ul li strong {position: relative; display: block; padding-bottom: 10px; font-size: 24px; font-weight: 700; color: #fff;}
.sub .rnd1 ul li strong:after {content: ''; position: absolute; bottom: 0; left: 50%; margin-left: -15px; width: 30px; height: 1px; background: rgba(255,255,255,.3);}
.sub .rnd1 ul li b {display: block; font-size: 53px; font-weight: 700;}
.sub .rnd1 ul li span {font-size: 16px; font-weight: 300; line-height: 1.7; word-break: keep-all;}
.sub .rnd1 ul li i {display: inline-block; padding: 0 5px; font-size: 25px; font-style: normal; color: #24bbb7;}

.sub .rnd1 ul li.li1 {background: url('/img/rnd_bg_01.jpg') no-repeat center center/cover;}
.sub .rnd1 ul li.li2 {background: url('/img/rnd_bg_02.jpg') no-repeat center center/cover;}
.sub .rnd1 ul li.li3 {background: url('/img/rnd_bg_03.jpg') no-repeat center center/cover;}

.sub .rnd1 ul li.li1:after {width: 76px; height: 102px; background: url('/img/rnd_ico_01.png') no-repeat;}
.sub .rnd1 ul li.li2:after {width: 96px; height: 95px; background: url('/img/rnd_ico.png') no-repeat;}
.sub .rnd1 ul li.li3:after {width: 94px; height: 98px; background: url('/img/rnd_ico_03.png') no-repeat;}

.sub .rnd1 ul li.li1 b {color: #49b7fe;}
.sub .rnd1 ul li.li2 b {color: #36cef5;}
.sub .rnd1 ul li.li3 b {color: #23e4e1;}


/* r&d - r&d2 */
.sub .rnd .cont1 {padding-bottom: 60px;}
.sub .rnd .cont1 .tit1 em.dpb.pic {display: inline-block;}
/* .sub .rnd .cont1 span.pic1 {margin-top: 20px;} */
.sub .rnd .cont1 ul {width: 100%; max-width: 940px; margin: 50px auto 0;}
.sub .rnd .cont1 ul li {float: left; width: 25%; padding: 0 20px; text-align: center; box-sizing: border-box;}
.sub .rnd .cont1 ul li p.img {display: table; width: 100%; height: 147px; }
.sub .rnd .cont1 ul li p.img span {display: table-cell; vertical-align: bottom;}
.sub .rnd .cont1 ul li i {display: block; margin-top: 15px; font-size: 12px; font-weight: 300; color: #999; letter-spacing: 0; font-style: normal;}
.sub .rnd .cont1 ul li b {display: block; font-size: 16px; font-weight: 500; color: #13648e; word-break: keep-all;}

/* rnd - 보유 기술 */
.sub .tech .tech_cmm {padding: 60px 0;}
.sub .tech .tech_cmm .img {float: left; width: 100%; max-width: 470px; height: 620px;}
.sub .tech .tech_cmm .img em {font-size: 18px; font-weight: 900; color: #4db3e7;}
.sub .tech .tech_cmm .img p {margin-top: 30px; font-size: 26px; font-weight: 300; color: #fff; line-height: 1.3;}
.sub .tech .tech_cmm .img p b {font-weight: 700;}
.sub .tech .tech_cmm .img .bg {padding: 50px 45px; height: 100%; box-sizing: border-box;}
.sub .tech .tech_cmm .info {position: relative; float: left; padding-top: 60px; padding-left: 2.5%; width: calc(100% - 470px); box-sizing: border-box;}
.sub .tech .tech_cmm .info .btm {margin-top: 20px;}
.sub .tech .tech_cmm .info .btm ul {width: 100%;}
.sub .tech .tech_cmm .info .btm ul li {display: none; top: 0; left: 0; width: 100%; text-align: center; background: #f9f9f9;}
.sub .tech .tech_cmm .info .btm ul li.on {display: block;}
.sub .tech .tech_cmm .info .btm .img_box img {display:inline-block; max-width: 100%; height: 100%;}
.sub .tech .tech_cmm .info .btm .txt {position: absolute; top: 0; left: 0;}
.sub .tech .tech_cmm .info .btm .txt b {display: block; font-size: 32px; font-weight: 700; color: #333; line-height: 1.4; text-align: left;}
/* .sub .tech .tech_cmm .info .top .txt p {font-size: 20px; font-weight: 300; color: #666; text-align: left;}
.sub .tech .tech_cmm .info .top .txt p em {font-weight: 700; color: #008fe0;} */
.sub .tech .tech_cmm .info .top ul {}
.sub .tech .tech_cmm .info .top ul li {position: relative; float: left; padding-top: 5px; width: 25%; height: 160px; border-top: 2px solid #eee; box-sizing: border-box; cursor: pointer; overflow: hidden; filter: grayscale(100%); opacity: .4; }
/* .sub .tech .tech_cmm .info .top ul li:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.7);} */
/* .sub .tech .tech_cmm .info .top ul.tech_list li{padding: 10px;} */
.sub .tech .tech_cmm .info .top ul li.on {border-color: #008fe0; filter: none; opacity: 1;}
.sub .tech .tech_cmm .info .top ul li.on:before {opacity: 0;}
.sub .tech .tech_cmm .info .top ul li img {display: block;  width: 100%; max-width: 100%; height: 100%;}

.sub .tech .cont2 {background: #f9f9f9;}
.sub .tech .cont2 .info .btm .txt {position: absolute; top: 0; left: 3.5%;}
.sub .tech .cont2 .bg1 {background: url('/img/tech_bg_01.jpg') no-repeat center center/cover;}
.sub .tech .cont2 .info {padding-top: 0;}
.sub .tech .cont2 .info .top {margin-top: 20px;}
.sub .tech .cont2 .info .top ul li {width: 25%;}
.sub .tech .cont2 .info .btm ul li img {display: inline-block; max-width: 100%; min-height: 420px; }


.sub .tech .cont3 .img {float: right;}
.sub .tech .cont3 .info {float: left; width: calc(100% - 470px); padding-left: 0; padding-right: 2.5%;}
.sub .tech .cont3 .bg2 {background: url('/img/tech_bg_02.jpg') no-repeat center center/cover;}





/* rnd - patent */
.sub .patent .cont1 {background: url('/img/patent_bg.png') no-repeat 50% -5%/cover;}
.sub .patent .cont1 .top{position: relative;}
.sub .patent .cont1 .top h3 {float: left; line-height: 1; font-size: 40px; font-weight: 900; color: #333;}
.sub .patent .swiper-container {padding: 30px 5px 50px;}
.sub .patent .swiper-slide {position: relative; padding: 10px; box-shadow: 0px 0px 5px 0px rgba(170, 170, 170, 0.4); background: #fff; box-sizing: border-box;}
.sub .patent .swiper-slide:before {opacity: 0; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.5); transition: all .4s;}
.sub .patent .swiper-slide a {display: none; position: absolute; top: 50%; left: 50%; margin-top: -24px; margin-left: -24px; width: 48px; height: 48px; line-height: 48px; border-radius: 8px; text-align: center; background: #008fe0; transition: all .4s;}
.sub .patent .swiper-slide:hover:before {opacity: 1;}
.sub .patent .swiper-slide:hover a {display: block;}
.sub .patent .swiper-slide .border {padding: 10px; border: 1px solid #d7d1c6; box-sizing: border-box;}
.sub .patent .arr {position: relative; float: right; width: 90px; }
.sub .patent .update_next {top: 0; right: 0; margin-top: 0; width: 44px; height: 44px; background: #008fe0 url('/img/update_next.png') no-repeat center center; }
.sub .patent .update_prev {top: 0; left: 0; margin-top: 0; width: 44px; height: 44px; background: #008fe0 url('/img/update_prev.png') no-repeat center center; }

.sub .patent .cont2 {padding: 60px 0 85px; border-top: 1px solid #b9c8d1; background: #edf5fa;}
.sub .patent .cont2 ul {width: 102%; margin-left: -2%; margin-top: -2%;}
.sub .patent .cont2 ul li {position: relative; float: left; width: 18%; margin-left: 2%; margin-top: 2%; border: 1px solid #cdd7dd; box-sizing: border-box; transition: all .4s;}
.sub .patent .cont2 ul li:before {opacity: 1; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.5); transition: all .4s;}
.sub .patent .cont2 ul li a {display: none; position: absolute; top: 50%; left: 50%; margin-top: -24px; margin-left: -24px; width: 48px; height: 48px; line-height: 48px; border-radius: 8px; text-align: center; background: #50575a; transition: all .4s;}
.sub .patent .cont2 ul li:hover {transform: translateY(-20px); box-shadow: 2px 2px 7px 0px rgba(102, 102, 102, 0.2);}
.sub .patent .cont2 ul li:hover:before {opacity: 0;}
.sub .patent .cont2 ul li:hover a {display: block;}

/* rnd - patent - popup */
.patent_pop {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 100;}
.patent_pop .cont {position: absolute; top: 50%; left: 50%; margin-top: -337px; margin-left: -255px; padding: 20px; width: 100%; max-width: 510px; height: 715px; background: #fff; box-sizing: border-box;}
.patent_pop .inner {width: 100%; height: 100%; padding: 20px; border: 1px solid #d7d1c6; box-sizing: border-box;}
.patent_pop .pop_close {position: absolute; top: -40px; right: 0; display: block; width: 25px; height: 25px;}







/* hr - 인재상 */
.sub .hr .cont1 {position: relative; padding: 50px 0 120px; text-align: center;}
.sub .hr .cont1:after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 412px; background: #f9f9f9; z-index: -1;}
.sub .hr .cont1 p.img {width: 100%; max-width: 810px; margin: 0 auto;}
.sub .hr .cont1 p.img img {display: inline-block; width: 100%;}
.sub .hr .cont1 p.img .mo {display: none;}
.sub .hr .cont1 .mo_list {display: none;}
.sub .hr .cont1 .mo_list img {display: inline-block; max-width: 100%;}

/* hr - incruit */
.sub .incruit .cont1 {padding-bottom: 50px;}
.sub .incruit .cont1 .inner {margin-top: 15px; padding: 0 20px; background: url('/img/inc_bg.png') no-repeat 50% 115px; box-sizing: border-box;}
.sub .incruit .cont1 ul {font-size: 0; text-align: center; margin-top: -4%;}
.sub .incruit .cont1 ul li {float: left; display: inline-block; width: 20%; margin-top: 4%; padding: 0 18px; text-align: center; box-sizing: border-box; vertical-align: top;}
.sub .incruit .cont1 ul li strong {display: inline-block; padding: 15px 0; font-size: 18px; font-weight: 500; color: #333;}
.sub .incruit .cont1 ul li div.info {padding: 25px; font-size: 16px; border: 1px solid #c4d1d9; border-radius: 10px; text-align: left; box-sizing: border-box;}
.sub .incruit .cont1 ul li div.info b {display: block; margin-top: 15px; font-weight: 400; color: #333; word-break: keep-all;}
.sub .incruit .cont1 ul li div.info b:first-child {margin-top: 0;}
.sub .incruit .cont1 ul li div.info span {position: relative; display: block; padding-left: 15px; font-weight: 300; color: #666; word-break: keep-all; box-sizing: border-box;}
.sub .incruit .cont1 ul li div.info span:before {content: '-'; position: absolute; top: 0; left: 0; color: #333;}

.sub .incruit .cont2 .size {padding-top: 50px; border-top: 1px solid #ddd;}
.sub .incruit .cont2 ul li {width: 16.66666%;}

.sub .incruit .cont3 {padding: 55px 0; background: url('/img/incuit_bg.jpg') no-repeat center center/cover;}
.sub .incruit .cont3 ul {width: 104%; margin-left: -4%; margin-top: -2%;}
.sub .incruit .cont3 ul li {position: relative; float: left; width: 46%; margin-left: 4%; margin-top: 5%; padding: 60px 0; border-radius: 0 0 20px 0; background: #fff; box-shadow: 0px 5px 24px 0px rgba(0, 0, 0, 0.2);}
.sub .incruit .cont3 ul li > span {position: absolute; top: 0; left: 0; display: block; width: 106px; height: 42px; line-height: 40px; font-size: 20px; font-weight: 700; color: #fff; text-align: center; background: #008fe0;}
.sub .incruit .cont3 ul li p {width: 100%; max-width: 375px; margin: 15px auto; font-size: 16px; color: #333333;}
.sub .incruit .cont3 ul li p em {float: left; display: block; padding: 0 10px; font-weight: 700; line-height: 1.1; box-sizing: border-box;}
.sub .incruit .cont3 ul li p span {position: relative; float: left; display: block; padding: 0 10px; line-height: 1.1; box-sizing: border-box;}
.sub .incruit .cont3 ul li p span:before {content: ''; position: absolute; top: 50%; left: 0; display: block; margin-top: -7px; width: 1px; height: 17px; background: #ddd;}
.sub .incruit .cont3 .btn_box {margin-top: 40px; text-align: center;}
.sub .incruit .cont3 .btn_box a {display: inline-block; width: 100%; max-width: 250px; height: 55px; line-height: 53px; font-size: 18px; color: #fff; border-radius: 55px; border: 1px solid #fff; text-align: center; transition: all .4s;}
.sub .incruit .cont3 .btn_box a b {font-weight: 700;}
.sub .incruit .cont3 .btn_box a:hover {background: #333; border-color: #333;}
 

.sub .incruit .cont4 {padding-bottom: 110px;}
.sub .incruit .cont4 .size {padding-top: 40px;}
.sub .incruit .cont4 ul {width: 102%; margin-left: -2%; margin-top: -2%;}
.sub .incruit .cont4 ul li {float: left; padding: 25px 22px; width: 23%; min-height: 200px; margin-left: 2%; margin-top: 2%; background: #f9f9f9; box-sizing: border-box; }
.sub .incruit .cont4 ul li .top {padding-bottom: 20px; border-bottom: 1px solid #ddd;}
.sub .incruit .cont4 ul li .top span {display: inline-block; margin-right: 10px; width: 60px; height: 60px; line-height: 60px; border-radius: 60px; background: #fff; text-align: center; box-shadow: 0px 0px 11px 0px rgba(170, 170, 170, 0.1);}
.sub .incruit .cont4 ul li .top b {font-size: 18px; font-weight: 700; color: #333;}
.sub .incruit .cont4 ul li .btm {padding-top: 20px; min-height: 38px; font-size: 16px; border-top: 1px solid #ddd;}
.sub .incruit .cont4 ul li .btm b {display: block;font-weight: 300; word-break: keep-all;}
.sub .incruit .cont4 ul li .btm span {position: relative; display: inline-block; padding-left: 10px; font-weight: 300; color: #666; word-break: keep-all; box-sizing: border-box;}
.sub .incruit .cont4 ul li .btm span:before {content: '-'; position: absolute; top: 0; left: 0; color: #333;}

/* management - manage */
.sub .manage .cont1 {margin-top: 20px;}
.sub .manage .cont1 .bg {height: 237px; text-align: right; background: url('/img/manage2_bg.jpg') no-repeat center center/cover;}
.sub .manage .cont1 .inner {display: inline-block; width: 100%; max-width: 1075px;}
.sub .manage .cont1 .inner p.img {float: left; width: 100%; max-width: 219px; margin-top: -29px; box-shadow: 0px 0px 11px 0px rgba(3, 3, 3, 0.15);}
.sub .manage .cont1 .inner p.img img {display: inline-block; width: 100%;}
.sub .manage .cont1 .inner div.txt {float: left; width: 100%; max-width: calc(100% - 219px); padding-top: 55px; text-align: left; box-sizing: border-box;}
.sub .manage .cont1 .inner div.txt p.tit {position: relative; display: inline-block; margin-left: 30px; padding: 0 5px; font-size: 24px; font-weight: 100; color: #fff; letter-spacing: 0px; box-sizing: border-box; z-index: 1;}
.sub .manage .cont1 .inner div.txt p.tit:after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 15px; background: #2d6e92; z-index: -1;}
.sub .manage .cont1 .inner div.txt p.tit b {font-weight: 900;}
.sub .manage .cont1 .inner div.txt p.tit em.dpb {display: inline-block;}
.sub .manage .cont1 .inner div.txt > span {display: inline-block; margin-top: 8px; margin-left: 30px; line-height: 1.4; font-size: 16px; font-weight: 300; color: #ddd; word-break: keep-all;}
.sub .manage .cont1 p.btm {margin-top: 45px; padding: 0 30px; line-height: 46px; font-size: 14px; color: #aaaaaa; border-top: 1px solid #aaa; box-sizing: border-box;}
.sub .manage .cont1 p.btm b {position: relative; display: inline-block; padding-left: 10px;font-weight: 500; box-sizing: border-box;}
.sub .manage .cont1 p.btm b:after {content: ''; position: absolute; top: 50%; left: 0; margin-top: -2px; width: 3px; height: 3px; background: #aaa;}
.sub .manage .cont1 p.btm span {position: relative; display: inline-block; padding: 0 10px;}
.sub .manage .cont1 p.btm span:after {content: ''; position: absolute; top: 50%; left: 0; margin-top: -5px; width: 1px; height: 10px; background: #aaa;}
.sub .manage .cont1 p.btm span.pic:after {display: none;}

.sub .manage .cont2 {position: relative; padding-bottom: 65px;}
.sub .manage .cont2:after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; background: #f5f5f5; z-index: -1;}
.sub .manage .cont2 ul {width: 103%; margin-left: -3%; margin-top: -3%;}
.sub .manage .cont2 ul li {float: left; width: 30.33333%; height: 350px; padding: 0 30px; margin-left: 3%; margin-top: 3%; border-radius: 25px; background: #fff; text-align: center; box-sizing: border-box;}
.sub .manage .cont2 ul li i {display: inline-block; font-size: 55px; line-height: 1; font-weight: 900; color: #e4f5fe; z-index: -1;}
.sub .manage .cont2 ul li b {display: block; margin-top: -12px; font-size: 18px; font-weight: 700; color: #333;}
.sub .manage .cont2 ul li img {display: inline-block; padding: 15px 0 25px;}
.sub .manage .cont2 ul li span {font-size: 16px; font-weight: 300; color: #666; line-height: 1.4; word-break: keep-all;}

.sub .manage .cont3 {padding: 50px 0 115px;}
.sub .manage .cont3 .sub_tit.st1 {padding-bottom: 30px;}


/* management - manage2 */
.sub .manage2 .cont1 p.btm {margin-top: 31px;}


/* service - 온라인 문의 */
.sub .contact .cont1 {padding: 70px 0 50px; background: #f9f9f9;}
.sub .contact .cont1 .sub_tit {font-size: 24px; color: #333;}
.sub .contact .cont1 .agree_con {padding: 20px; height: 180px; border: 1px solid #c3cfd6; border-top: 1px solid #666;}
.sub .contact .cont1 .agree p.agreeCheck {text-align: left;}
.sub .contact .cont2 {padding: 40px 0 90px;}
.sub .contact .cont2 .sub_tit {font-size: 24px; color: #333;}
.sub .contact .cont2 table {border-top: 1px solid #666; border-bottom: 1px solid #ddd;}
.sub .contact .cont2 table tr {}
.sub .contact .cont2 table tr th {padding: 10px; font-size: 16px; font-weight: 300; color: #333; border-bottom: 1px solid #eee; box-sizing: border-box;}
.sub .contact .cont2 table tr td {padding: 10px 10px; border-bottom: 1px solid #eee; box-sizing: border-box;}
.sub .contact .cont2 table tr th.pic {border-left: 1px solid #eee;}
.sub .contact .cont2 input[type=text] {width: 100%; max-width: 250px; height: 45px; font-size: 16px; color: #333; border-radius: 5px; border-color: #c3cfd6;}
.sub .contact .cont2 input[type=text]::placeholder {color: #b7c2c9; font-weight: 300;}
.sub .contact .cont2 table {margin-top: 12px;}
.sub .contact .cont2 table tr td.tit input[type=text] {max-width: none; box-sizing: border-box;}
.sub .contact .cont2 table tr td.txt textarea {resize: none; padding: 10px; width: 100%; height: 180px; font-size: 16px; color: #333; border-color: #c3cfd6; border-radius: 5px; box-sizing: border-box;}
.sub .contact .cont2 table tr td.txt textarea::placeholder {color: #b7c2c9; font-weight: 300;}
.sub .contact .cont2 .btm_btn {margin-top: 20px; text-align: center;}
.sub .contact .cont2 .btm_btn input {display: inline-block; width: 100px; height: 40px; line-height: 38px; font-size: 16px; font-weight: 500; border: 0; border-radius: 5px; color: #fff; cursor: pointer;}
.sub .contact .cont2 .btm_btn input[type=reset] {background: #ddd;}
.sub .contact .cont2 .btm_btn input[type=submit] {margin-left: 5px; background: #000;}



/* 갤러리 */
.bbsSearch .srchSelect select {width: 120px; height: 45px; font-size: 15px; color: #666; appearance: none; background: url('/img/select_ico.png') no-repeat 90% 50%;}
.bbsSearch input[type='text'] {padding: 0 60px 0 15px; height: 45px; font-size: 15px; border-color: #d1d1d1; box-sizing: border-box;}
.bbsSearch input[type='text']::placeholder {color: #ccc;}
.bbsSearch input[type='button'] {right: 0; width: 45px; height: 45px; background: url('/img/search_ico.png') no-repeat center center/cover; }
.bbs {margin-top: 70px;}
.bbs .gallery {padding: 0; border: 0;}
.bbs .gallery > ul {width: 102%; margin-left: -2%; margin-top: -2%;}
.bbs .gallery > ul > li {width: 23%; margin-left: 2%; margin-top: 2%; padding: 0; border-color: #eee;}
.bbs .gallery > ul > li:hover .img:before {opacity: 1;}
.bbs .gallery > ul > li:hover .img:after {opacity: 1;}
.bbs .gallery .img {position: relative;}
.bbs .gallery .img:before {opacity: 0; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(77,179,231); background: linear-gradient(145deg, rgba(77,179,231,1) 0%, rgba(137,227,227,1) 100%); transition: all .4s;}
.bbs .gallery .img:after {opacity: 0; content: ''; position: absolute; top: 50%; left: 50%; margin-top: -23px; margin-left: -72px; width: 145px; height: 47px; background: url('/img/FooterLogo.png') no-repeat; transition: all .4s;}
.bbs .gallery .txt {padding: 20px; box-sizing: border-box; overflow: hidden;}
.bbs .gallery .txt p {font-size: 15px;}
.bbs .gallery .txt p em {font-weight: 700; color: #008fe0;}
i.top {display: inline-block; width: 30px; height: 20px; line-height: 18px; font-size: 14px; font-weight: 700; color: #fff; background: #008fe0; border-radius: 3px; text-align: center; font-style: normal; vertical-align: middle;}
.bbs .gallery .txt p span {position: relative; display: inline-block; padding-left: 16px; font-weight: 300; color: #666; vertical-align: middle;}
.bbs .gallery .txt p span:before {content: ''; position: absolute; top: 50%; left: 8px; margin-top: -5px; width: 1px; height: 12px; background: #ddd;}
.bbs .gallery .txt b.title {margin-top: 3px; display: block; height: 27px; font-size: 18px; font-weight: 700; color: #333;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 
.bbs .gallery .txt .cont {height: 45px; margin-top: 5px; font-size: 15px; color: #333; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; word-break: keep-all; overflow: hidden;}
.notice .pagenate {margin: 40px 0 100px;}

/* 페이징 */
.pagenate {width:100%; clear:both;}
.pagenate {text-align:center; margin: 40px auto 0;}
.pagenate li {display:inline-block; margin: 0 3px;}
.pagenate li:first-child { margin-left:0px; }
.pagenate li a{display:inline-block; text-decoration:none; padding:0; width: 30px; height: 30px; line-height: 27px; border-radius: 5px; border:1px solid #ebf3f8; background: #ebf3f8; color: #a6b7c1; font-size: 12px; box-sizing:border-box; margin-left:-1px; vertical-align:middle;}
.pagenate li a:hover{background:#f6f6f6; font-weight:bold; text-decoration:none !important;}
/* .pagenate li a.board.first {background: url('/img/ico_first.png') no-repeat center center; border: 0;} */
.pagenate li a.board.prev { background: url('/img/board_prev.png') no-repeat center center; border: 1px solid #96bbd2;}
.pagenate li a.board.next {background: url('/img/board_next.png') no-repeat center center; border: 1px solid #96bbd2;}
/* .pagenate li a.board.last {background: url('/img/ico_last.png') no-repeat center center;  border: 0;} */
.pagenate li a.current {color:#fff; background-color:#96bbd2; font-weight:bold;  border:1px solid #96bbd2;}


/* 갤러리 - 뷰페이지 */
.bbs .view {border-top: 0;}
.bbs .view .title > dl {border-bottom: 0; padding: 15px 0; background: none; box-sizing: border-box;}
.bbs .view .title > dl > dt {float: left; width: calc(100% - 100px); font-size: 24px; font-weight: 700; color: #333;}
.bbs .view .title > dl > dt em {position: relative; display: inline-block; padding-right: 25px; font-size: 18px; font-weight: 700; color: #008fe0; box-sizing: border-box;}
.bbs .view .title > dl > dt em:after {content: ''; position: absolute; top: 50%; right: 12px; margin-top: -7px; width: 1px; height: 14px; background: #ddd;}
.bbs .view .title > dl > dd.date {float: left; padding-right: 1px; width: 100px; font-size: 15px; font-weight: 300; color: #666; text-align: right; box-sizing: border-box;}
/* 첨부파일 */
.bbs .view .file {padding: 15px; font-size: 16px; background: #eaf2f7;}
.bbs .view .file dt {width: 70px; color: #215474; font-weight: 500;}
.bbs .view .file dd { text-decoration: none !important;}
.bbs .view .file dd a {color: #33627f;}

.bbs .view .cont { font-weight: 300; color: #333; border-top:1px solid #e4e4e4; box-sizing: border-box;/* font-size: 16px; */}
.bbs .view .cont img {display: inline-block; width: 100%; max-width: 830px;}

.btnSet {position: relative; padding: 20px 0 80px;}
.btnSet a {display: inline-block; width:  100px; height: 40px; line-height: 40px; font-size: 16px; font-weight: 700; color: #fff; border-radius: 5px; text-align: center; font-family: 'Raleway', sans-serif;}
.btnSet a.view_next, .btnSet a.view_prev { background: #ddd; transition: all .3s;}
.btnSet a.view_prev {position: absolute; top: 0; left: 0;}
.btnSet a.view_next {position: absolute; top: 0; right: 0;}
.btnSet a.view_next:hover ,.btnSet a.view_prev:hover {background: #7a98ad;}
.btnSet a.view_list {background: #000 url(/img/more_ico.png) no-repeat 75% 28%; transition: all .3s;}
.btnSet a.view_list:hover {background-color: #008fe0;}