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



/**************************************************
	PC, 테블릿 가로 ( 769px 이상 해상도 )
**************************************************/

/* 서브 비주얼 및 타이틀 이미지 */
#container.sub01 .sub-visual{background:url(../images/sub/sub_visual01.jpg) no-repeat center;background-position: 80% 90%;}
#container.sub01 #content .tit-box{background:url(../images/sub/sub01_titimg.jpg) no-repeat right center #e8eef4;}
#container.sub02 .sub-visual{background:url(../images/sub/sub_visual02.jpg) no-repeat center}
#container.sub02 #content .tit-box{background: url(../images/sub/sub02_titimg.jpg) no-repeat right center #ede8e4;}
#container.sub03 .sub-visual{background:url(../images/sub/sub_visual03.jpg) no-repeat center}
#container.sub03 #content .tit-box{background:url(../images/sub/sub03_titimg.jpg) no-repeat right center #edf3f7;}
#container.sub04 .sub-visual{background:url(../images/sub/sub_visual04.jpg) no-repeat center}
#container.sub04 #content .tit-box{background:url(../images/sub/sub04_titimg.jpg) no-repeat right center #d9e4e7;}
#container.sub05 .sub-visual{background:url(../images/sub/sub_visual05.jpg) no-repeat center}
#container.sub05 #content .tit-box{background:url(../images/sub/sub05_titimg.jpg) no-repeat right center #f7f0ea;}

/* 숫자형 리스트 */
#content ul.dash li, #content ul.dot li {position: relative;padding-left: 10px !important;}
#content ul.number li, #content .note {position: relative;padding-left: 20px;}
#content ul.number > li:before { position: absolute;left: 0;}
#content ul.number > li:first-child:before {content: '①';}
#content ul.number > li:first-child+li:before { content: '②';}
#content ul.number > li:first-child+li+li:before { content: '③';}
#content ul.number > li:first-child+li+li+li:before { content: '④';}
#content ul.number > li:first-child+li+li+li+li:before { content: '⑤';}
#content ul.number > li:first-child+li+li+li+li+li:before { content: '⑥';}

/* dash형 리스트 */
#content ul.dash li:before {content: '-' !important;position: absolute;left: 0;}

/* dot형 리스트 */
#content ul.dot li:before {content: '·' !important;position: absolute;left: 0;}

/* 주의 문구 */
#content .note {display: block;color: #2172ba;}
#content .note:before {content: '';width: 16px;height: 24px;background: url(../images/sub/note.png) no-repeat left center;left: 0;position: absolute;}

/* 공통 테이블 */
#content table.cmmntb {border-top: 1px solid #000;table-layout: fixed;}
#content table.cmmntb th, #content table.cmmntb td {border-bottom: 1px solid #e1e1e1;padding: 20px;vertical-align: middle;word-break: break-word;}
#content table.cmmntb th { color: #333; font-weight: 400; }
#content table.cmmntb.th-gray th { background: #fafafa; }

/* 테이블형 리스트박스 */
#content ul.tb-type {border-top: 1px solid #000;display: flex;margin-top:30px;overflow:hidden;}
#content ul.tb-type > li {border-bottom: 1px solid #e1e1e1;border-left: 1px solid #e1e1e1;float: left;}
#content ul.tb-type > li:first-child { border-left: 0; }
#content ul.tb-type.p4 > li { width: 25%; *width: 24.9%; width: 24.94%\0/IE8; }
#content ul.tb-type.p3 > li { width: 33.3%; width: 33.28%\0/IE8; }
#content ul.tb-type.p2 > li { width: 50%; *width: 49.9%; width: 49.96%\0/IE8;}
#content ul.tb-type.p4 img { max-width: 188px; }
#content ul.tb-type.p2 img { max-width: 358px; }
#content ul.tb-type > li dl dt, ul.tb-type > li dl dd { padding: 20px; text-align: -webkit-center; }
#content ul.tb-type > li dl dt {background: #fafafa;border-bottom: 1px solid #e1e1e1;color: #333 !important;font-weight: 400;}

/* 이미지 박스 */
#content .img-box {margin:30px 0;border: 1px solid #e1e1e1;padding: 50px 20px;text-align: center;}
#content .img-box img {width: auto; max-width: 100%;}

/* 탭 */
#content ul.tab {border-top: 1px solid #e1e1e1;overflow: hidden;margin-top:30px;}
#content ul.tab li {border: 1px solid #e1e1e1;border-collapse: collapse;display: table;float: left;height: 80px;margin-right: -1px;margin-top: -1px;}
#content ul.tab li a {display: table-cell;font-size: 1.5rem !important;font-weight: 500;padding: 28px;text-align: center;vertical-align: middle;}
#content ul.tab li.on a, #content ul.tab li a:hover { background: #2172ba; color: #fff !important; }
#content ul.tab.two li { width: 50%; *width: 24.9%;}
#content ul.tab.four li { width: 25%; *width: 24.9%;}
#content .tab-total .tab-con {display: none;}
#content .tab-total.on .tab-con, #content .tab-total .tab-con.on { animation: fadeEffect 1s; display: block; webkit-animation: fadeEffect 1s;}
#content .tab-total .tab-con:first-of-type, #content .tab-total .tab-con.on, #content .tab-total .tab-con.on > div:first-of-type{border:none;}

/* 공통 버튼 */
#content .cmmnbtn {margin: 0 auto;color: #000 !important;font-size: 1.25rem !important;font-weight: 500;width: 294px;border: 1px solid #000;padding: 18px 0;text-align: center;}

/* 회사개요 */
#content table.cmmntb.company th{width:200px}

/* 연혁 */
#content .tab-total .tab-con h1.year {color: #333 !important;font-size: 3.125rem !important;font-weight: bold;line-height: 2.8rem;}
#content .tab-total .tab-con table.cmmntb th{width: 10%;}
#content .tab-total .tab-con table.cmmntb th + td{ width: 20%;}

/* 오시는 길 */
#content #map{height:565px; border:1px solid #e1e1e1}
#content #map h2 {color: #333 !important;font-weight: 500;}
#content .location { overflow: hidden; }
#content .location h2.tit {font-size: 1.25rem !important; margin: 0 0 20px; font-weight: 500;}
#content .location .con-box { float: left; width: 48%; }
#content .location .con-box:first-of-type { margin-right: 3%; }
#content .location .con-box table.cmmntb tr { height: 89px; }
#content .location .con-box table.cmmntb th { color: #000 !important; font-weight: 500; }

/* 연구개발팀*/
#content .front-end th:first-of-type+th{width: 20% !important;}
#content .front-end th:first-of-type+th+th{width: 70% !important;}

/* 사업분야 */
#content table.cmmntb.vtl th, #content table.cmmntb.vtl td{border-left:1px solid #e1e1e1;}
#content table.cmmntb.vtl th:first-child, #content table.cmmntb.vtl td:first-child {border-left: 0;}
#content table.cmmntb.vtl th br{display:none;}

/* 채용안내 */
#content .resume { overflow: hidden; }
#content .resume button { font-size: 1.25rem !important; font-weight: 500; height: 58px; padding: 0 30px; text-align: left; width: 294px; }
#content .resume button.down-w { border: 1px solid #000; color: #2a2a2a !important; }
#content .resume button.down-w span { background: url(../images/sub/down-ic-b.png) no-repeat right center; }
#content .resume button.down-b { background: #2172ba; color: #fff !important; margin-left: 20px; }
#content .resume button.down-b span { background: url(../images/sub/down-ic-w.png) no-repeat right center; }
#content .resume button span {color: transparent !important;right: 10px;position: absolute;background-size: 14px !important;}

/* 공지사항 */
/* List */
#board-list table.cmmntb .no{width:10%}
#board-list table.cmmntb .date{width: 13%;}
#board-list table.cmmntb .subject a{text-overflow: ellipsis;white-space: nowrap;overflow:hidden;width: 100%;}
#board-list table.cmmntb .subject a:hover{text-decoration:underline;color:#000;}
#board-list .paginate{text-align:center;margin-top: 50px;}
#board-list .paginate ul, #board-list .paginate ul li {display:inline;}
#board-list .paginate ul li{margin-left: 8px; }
#board-list .paginate ul li:first-child { margin-left: 0; }
#board-list .paginate ul li.current a, #board-list .paginate ul li a:hover { background: #2172ba !important; color: #fff !important; }
#board-list .paginate ul li a {height: 28px; width: 28px; display:inline-block;}
/* View */
#board-view table.cmmntb th { width: 160px; }
#board-view .content { border-bottom: 1px solid #e1e1e1; padding: 50px 30px 100px; }
#board-view .next-prev a { border-bottom: 1px solid #e1e1e1; cursor:pointer;}
#board-view .next-prev a:hover { background: #fafafa; }
#board-view .next-prev dl { display: flex;  overflow:hidden;}
#board-view .next-prev dl dt { color: #333 !important; font-weight: 400; padding: 20px 30px; width: 160px; float:left}
#board-view .next-prev dl dt:after { content: ''; display: inline-block; height: 10px; margin-left: 18px; width: 16px; }
#board-view .next-prev dl.next dt:after { background: url(../images/sub/board-next.png) no-repeat right center; }
#board-view .next-prev dl.prev dt:after { background: url(../images/sub/board-prev.png) no-repeat right center; }
#board-view .next-prev dl dd { padding: 20px; width: 88%; float:left; *width:79.7%; width:79.6%\0/IE8;}

/* 문의처 */
#content .contact-num{background:#f8f8f8;}
#content .contact-num ul{overflow:hidden; max-width:760px; margin:0 auto; padding:35px 0;}
#content .contact-num ul li{float:left;border-left:1px solid #e1e1e1;padding: 0 25px;}
#content .contact-num ul li:first-child{border-left:none;background:url(../images/sub/contact-ic01.png) no-repeat left center;padding-left:60px;}
#content .contact-num ul li:first-child+li+li{background: url(../images/sub/contact-ic02.png) no-repeat 25px center;padding:0 0 0 90px;}
#content .contact-num ul li dl dd, #content .contact-btn ul li a h3{color:#000 !important; font-size:1.5rem !important; font-weight:bold; margin-top:2px}
/* 문의처 하단 버튼 */
#content .contact-btn ul{overflow:hidden; margin-top:26px}
#content .contact-btn ul li{width:25%; float:left;}
#content .contact-btn ul li:first-child a{margin-left:0;}
#content .contact-btn ul li a{text-align:center;margin-left:7%;border:1px solid #e1e1e1;padding: 45px 10px;max-height:316px;}
#content .contact-btn ul li a p{max-width:140px; margin:0 auto}
#content .contact-btn ul li a h3{margin:28px 0 8px}
/* 840 이하 해상도에서 넘침 제어*/
@media screen and (max-width:841px) {
#content .contact-num, #content .contact-btn{width: 115%; margin-left: -6%; transition: all 0.3s 0s ease-in-out;}
}



/**************************************************
	Tablet / Mobile ( 768px 이하 해상도 )
**************************************************/

@media screen and (max-width: 768px){
/* 서브 비주얼 및 타이틀 이미지 */
#container.sub01 .sub-visual{background-position: 85% 0;background-size: auto 115%;}
#container.sub01 #content .tit-box{background:#e8eef4;}
#container.sub02 .sub-visual{background-position: 35% 110%;background-size: auto 80%;}
#container.sub02 #content .tit-box{ background: #ede8e4;}
#container.sub03 .sub-visual, #container.sub04 .sub-visual, #container.sub05 .sub-visual{background-position: 46% 110%;background-size: auto 80%;}
#container.sub03 #content .tit-box{background:#E9F3FB}
#container.sub04 #content .tit-box{background:#D9E4E7}
#container.sub05 #content .tit-box{background:#F7F0EA}

/* 공통 테이블 */
#content table.cmmntb{border-top: 2px solid #000; margin:30px auto 0 !important}
#content table.cmmntb th, #content table.cmmntb td{font-size:0.8125rem;}
#content table.cmmntb th{font-weight: 500 !important;padding:20px 12px;}

/* 공통 버튼 */
#content .cmmnbtn{font-size:0.8125rem !important;padding: 9px 0;width: 162px;}

/* 이미지 박스 */
#content .img-box{margin: 20px auto !important;padding: 30px 15px;}

/* 탭 */
#content ul.tab{width: 100%;margin: 0 0 0 0 ;}
#content ul.tab li{height:40px;width: 25% !important; margin:0 0 0 0}
#content ul.tab li:first-child{margin-left:0;}
#content ul.tab li a{font-size: 0.8125rem !important;padding: 0;}
#content ul.tab.two li { width: 50%; *width: 24.9%;}
#content ul.tab.four li { width: 25%; *width: 24.9%;}

/* 연혁 */
#content table.cmmntb.company th{width: 91px;}
#content .tab-total .tab-con h1.year{font-size: 1.875rem !important;line-height: 1.875rem;margin-top: 30px;}
#content .tab-total .tab-con table.cmmntb th{width: 14%;}
#content .tab-total .tab-con table.cmmntb th + td{width: 32%;}

/* 오시는 길 */
#content #map{height: 260px;margin: 20px auto 0;max-width: 375px !important;width: 90%;}
#content .location .con-box{float:none; width:100%}

/* 연구개발팀 */
/* 화면 슬라이드 */
#content .tb-type-wrap{border-bottom:1px solid #e1e1e1;position:relative;margin-top: 20px !important;}
#content .tb-type-wrap .bx-wrapper{width:100%;}
#content .tb-type-wrap .bx-controls{position:absolute;top: 22px;width: 100%;}
#content .tb-type-wrap .bx-controls a{ position: absolute; color: transparent;}
#content .tb-type-wrap .bx-controls a.bx-prev{ left: 12px;  background: url(../images/sub/tbtype-slide-l.png) no-repeat left center;}
#content .tb-type-wrap .bx-controls a.bx-next{ right: 12px;  background: url(../images/sub/tbtype-slide-r.png) no-repeat right center;}
#content .tb-type-wrap .bx-pager{display:none;}
#content ul.tb-type{display: block;max-width: 4215% !important;border-top: 2px solid #000;margin-top: 0;}
#content ul.tb-type > li{border-left: 0; border-bottom:0;}
/* 테이블 변형 */
#content .front-end tbody tr{border-top:2px solid #000;margin-top: 10px;display: block;}
#content .front-end tbody tr:first-of-type{margin-top:0}
#content .front-end th{display:none;}
#content .front-end td{border-bottom: 1px solid #D7D7D7;position: relative;padding-left: 110px !important;display: block;}
#content .front-end td:before {position: absolute;top: 0;	left: 0;	width: 94px;white-space: nowrap;	padding: 20px 12px;font-weight: 500;	color: #000;background: #FAFAFA;	height: 100%;	}
#content .front-end td:nth-of-type(1):before{content: "구분";}
#content .front-end td:nth-of-type(2):before{content: "항목";}
#content .front-end td:nth-of-type(3):before{content: "내용";}
#content .abc th:nth-of-type(2){width:25% !important;}
#content .abc td:last-of-type, .abc th:last-of-type{display:none;}
/* 리스트박스 변형 */
#content ul.tb-type.m1 > li{width:100%;    border-bottom: 1px solid #e1e1e1;}
#content ul.tb-type.m1 > li dl dt, ul.tb-type.m1 > li dl dd{padding:12px;}
#content ul.tb-type.m2 > li{width:100%;     border-bottom: 1px solid #e1e1e1;}
#content ul.tb-type.m2 > li dl{overflow:hidden; display:flex}
#content ul.tb-type.m2 > li dt{width:28%;float:left;padding: 21px 15px;border-bottom:0;text-align: left;}
#content ul.tb-type.m2 > li dd{float:left;width:72%;}

/* 사업분야 */
#content table.cmmntb.vtl th br{display:block;}

/* 채용안내 */
#content .img-box .note{padding: 0 !important;}
#content .img-box .note:before{display:none;}
#content .resume button{width: 48%;float:left;font-size: 0.8125rem !important;padding: 9px 14px;height: 40px;position: relative;}
#content .resume button.down-b{margin-left: 10px;}

/* 공지사항 */
/* List */
#board-list table.cmmntb td{padding:20px 10px}
#board-list table.cmmntb .date{width: 110px;}
#board-list table.cmmntb .no{display:none;}
#board-list .paginate ul li a{padding: 4px 0;}
/* View */
#board-view table.cmmntb th{width: 80px;}
#board-view .content{ padding: 20px;}
#board-view .next-prev dl dt{width:100px; padding: 20px 15px;}
#board-view .next-prev dl dt:after{background-size: 8px !important;width: 8px;margin-left: 10px;}
#board-view .next-prev dl dd{padding:20px 6px;}

/* 문의처 */
#content .contact-num ul li{background-size:26px !important;border-left: 0;float: none;padding: 0 0 0 67px !important;background-position: 20px center !important;margin-bottom: 20px;}
#content .contact-num ul li dl dd, #content .contact-btn ul li a h3{font-size:1.25rem !important;font-weight:500;margin: 2px 0 8px 0;}
#content .contact-num ul li:first-child+li+li{margin-bottom:0;padding: 20px 0 0 67px !important;position:relative;background-position: 20px 34px !important;}
#content .contact-num ul li:first-child+li+li:before{content:'';width: 90%;height: 2px;background: #e1e1e1;position: absolute;top: 0;left: 5%;}
/* 4개 버튼 */
#content .contact-btn ul li{float:none;width:100%;}
#content .contact-btn ul li a{text-align:left;margin: 10px 0 0 0;padding: 34px 0 34px 40%;background-position: 14.5% center !important;background-size: 23.5% !important;}
#content .contact-btn ul li a p{display:none;}
#content .contact-btn ul li a h3, #content .contact-btn ul li a span{width: 130px;display: block;}
#content .contact-btn ul li:first-child a{background: url(../images/sub/contact-btn01.png) no-repeat;}
#content .contact-btn ul li:nth-child(2) a{background: url(../images/sub/contact-btn02.png) no-repeat;}
#content .contact-btn ul li:nth-child(3) a{background: url(../images/sub/contact-btn03.png) no-repeat;}
#content .contact-btn ul li:nth-child(4) a{background: url(../images/sub/contact-btn04.png) no-repeat;}
}

/* Tablet / Mobile ( 640px 이상  768px 이하 해상도 )  */
@media screen and (min-width:640px) and (max-width:768px){
#content #map{max-width:480px !important;}
/* 문의처 */
#content .contact-num ul{overflow:hidden;}
#content .contact-num ul li:first-child, #content .contact-num ul li:first-child+li{width: 40%;float:left;}
#content .contact-num ul li:first-child+li+li{clear:both;}
/* 4개버튼 */
#content .contact-btn ul li{float: left; width: 50%;}
#content .contact-btn ul li:first-child a h3{padding-top:0}
#content .contact-btn ul li a{min-height: 225px;background:none !important;margin-left:10px;padding: 20px 0;text-align: center;}
#content .contact-btn ul li:first-child a, #content .contact-btn ul li:nth-child(3) a{margin-left:0}
#content .contact-btn ul li a p{display:block; max-width: 100px;}
#content .contact-btn ul li a h3{margin: 15px auto 8px !important;}
#content .contact-btn ul li a p, #content .contact-btn ul li a h3, #content .contact-btn ul li a span{margin: 0 auto;}
}