﻿@charset "utf-8";
.clear{ clear: both;}
html{overflow-y: scroll; overflow-x:hidden;}
/*******************************************************************************
						머리말(header) 시작
********************************************************************************/
body{
	background-color: #0c1f4a;/*#f5f5f5*/
	font-family:'나눔고딕', Nanum, "돋움", Dotum;/* '나눔고딕 bold', NanumBold,'나눔고딕 ExtraBold', NanumEX,*/
}

/* 탑이동 버튼 */
.mtop{
	position: fixed;
	display: none;
	right: 10px;
	bottom: 10px;
}
/*
.mtop > a{
	display: block;
	width: 20px;
	height: 20px;
	background: #00ff00;
}
*/

/* heaer */
#header{
	position: relative;
	z-index: 5;
	background: url(../images/common/bg/header_bg.png) repeat-x;
}
.navBg{
	display: none;
	position: absolute;
	top: 86px; left: 0;
	width: 100%;
	height:252px;/*height: 227px;*/
	z-index: 3;
	border-bottom: 1px solid #d2d2d2;
	background-color: #f5f5f5;
}
#header > .innerHeader{
	position: relative;
	margin: 0 auto;
	padding: 25px 19px 0 0;
	width: 1004px;
	height: 70px;
}

/* 로고 */
#header > .innerHeader > .logo{padding-left: 34px;}	

/* HOME SITEMAP CONTATCT US ENGLISH*/
#header > .innerHeader > .top_gnb{
	position: absolute;
	font-size: 11px;/* 2015_02_13 font-size: 10px -> 11px 로 수정 */
	top: 7px; right: 29px;
}
#header > .innerHeader > .top_gnb > li{
	display: inline;
	margin: 0 -5px 0 14px;
}

/******** 주메뉴 ********/
/*상단 메뉴*/
#navWrap{ position: relative; margin-top: -5px; margin-left: 249px}
#navWrap > .main_gnb{
	position:absolute; 
	width: 750px;
	top:0; left: 73px;
	font-family: '나눔고딕 bold', NanumBold;
}
#navWrap > .main_gnb > li{position: relative; float: left; }
#navWrap > .main_gnb > li.first{ width: 133px;}
#navWrap > .main_gnb > li.first > span{width: 133px;}
#navWrap > .main_gnb > li.second{width: 124px;}
#navWrap > .main_gnb > li.second > span{width: 124px;}
#navWrap > .main_gnb > li.third{width: 106px; }
#navWrap > .main_gnb > li.third > span{width: 106px;}
#navWrap > .main_gnb > li.fourth{width: 159px;}
#navWrap > .main_gnb > li.fourth > span{width: 159px;}
#navWrap > .main_gnb > li.fifth{width: 179px;}
#navWrap > .main_gnb > li.fifth > span{width: 179px;}
#navWrap > .main_gnb > li.sixth{margin-right: 0; width: 130px;}
#navWrap > .main_gnb > li > a{display: block; color: #3e3e3e; letter-spacing: -1px; font-size: 18px; text-align: center;}
/* 위 화살표 아이콘 : 해당 메뉴 on일때 실행*/
#navWrap > .main_gnb > li > span{display: none; margin: 11px 0 0 0; height: 9px; background: url(../images/common/icon/arrow_ver_icon.png) no-repeat 50% 0;}
#navWrap > .main_gnb > li > span.on{display: block;}
/* 하단 메뉴 */
#navWrap > .main_gnb > li > div { display: none; position: absolute; top: 40px; /*left: -30px;*/ width: 133px; height: 272px; border-right: 1px solid #e0e0e0}
#navWrap > .main_gnb > li > div.sub02{width: 124px;}
#navWrap > .main_gnb > li > div.sub03{width: 106px;}
#navWrap > .main_gnb > li > div.sub04{width: 159px;}
#navWrap > .main_gnb > li > div.sub05{width: 179px; border-right: none;}
#navWrap > .main_gnb > li > div.sub06{left: -25px; border-right: none;}
#navWrap > .main_gnb > li > div.on{background-color: #646e85;} /* 해당 메뉴 on일때 */
#navWrap > .main_gnb > li > div.on > ul > li > a{color: #fff;}
#navWrap > .main_gnb > li > div > ul{padding-top: 17px; }
#navWrap > .main_gnb > li > div > ul > li{margin-bottom: 2px;}
#navWrap > .main_gnb > li > div > ul > li > a{ display: block; padding: 2px 0 2px 18px; font-size: 13px; letter-spacing: -0.5px;}
#navWrap > .main_gnb > li > div > ul > li > a:hover{ background-color: #f10000;}
/*******************************************************************************
						머리말(header) 끝
********************************************************************************/

/*******************************************************************************
					   	본문(contents) 시작
********************************************************************************/

/************************************
			index.php
*************************************/
#contents{
	#position: relative; /*ie 7 */
	margin-top: -9px; 
	#margin-top: 0px; /*ie 7 */
	#top:-9px; /*ie 7 */
	min-width: 1004px;

	background-color: #fff;
}

/*************************
	display (슬라이드)
**************************/
#contents.index > .displayContents{position: relative;}
#contents.index > .displayContents > .contentsWrap {
	position: relative; /* 익스 7에는 position:relative 기입*/;
	overflow: hidden;
	height: 495px;
}
#contents.index > .displayContents > .contentsWrap > .content-box{
	position: relative;
	overflow: hidden;
	height: 495px; /* 486px + 9px(헤더그림자) */
}
/*
#contents.index > .displayContents > .contentsWrap > .content-box > .content-bg{
	position: absolute;
	display: block;
	left: 0; top: 0;
	bottom: 0;
	width: 100%;
}
#contents.index > .displayContents > .contentsWrap > .content-box > .content-bg > img{width: 100%; height: 495px;}
*/
#contents.index > .displayContents > .contentsWrap > .content-box > .subsWrap{
	position: relative;
	width: 1004px;
	height: 495px;
	z-index: 1;
	margin: 0 auto;
	/*overflow: hidden;*/
}

#contents.index > .displayContents > .contentsWrap > .content-box > .subsWrap > .txt_mt{
	position: absolute;
	overflow: hidden;
}

/* 각 텍스트의 위치 지정*/
#contents.index > .displayContents > .contentsWrap > .content-box.first  > .subsWrap > .txt_mt { 
	width: 427px;
	height: 107px;
	top: 91px; left: 30px;
}
#contents.index > .displayContents > .contentsWrap > .content-box.second > .subsWrap > .txt_mt { 
	width: 548px;
	height: 185px;
	top: 80px; right:5px;
}

#contents.index > .displayContents > .contentsWrap > .content-box > .subsWrap > .txt_mt > p{position: relative;}

/* 세로 전체  컨트롤 블릿버튼 */
#contents.index > .displayContents > .btn-control-wrap { 
	position: absolute;
	overflow: hidden;
	margin-top: -24px;
	right: 10px; top: 231px; 
	width: 31px; height: 68px;
	z-index: 2;
}

#contents.index > .displayContents > .btn-control-wrap > .btn-control{
	margin-bottom: 5px;
	width: 31px;
	height: 33px;
	cursor: pointer;
	background: url(../images/common/btn/A_UpnDown.png) no-repeat;
}
#contents.index > .displayContents > .btn-control-wrap > .btn-control.first:hover{
	background: url(../images/common/btn/A_UpnDown_rollover.png) no-repeat;
	background-position: 0 0;
}

/***** 버튼 *****/
#contents.index > .displayContents > .btn-control-wrap > .btn-control.second{background-position: 0 -35px;}
#contents.index > .displayContents > .btn-control-wrap > .btn-control.second:hover{
	background: url(../images/common/btn/A_UpnDown_rollover.png) no-repeat;
	background-position: 0 -35px;
}

/* 각 부품의 위치 설정 */

/* 첫번째 컨텐츠 */
#contents.index > .displayContents > .contentsWrap > .content-box.first {background:url(../images/common/bg/bg_product.png) repeat-x;}
#contents.index > .displayContents > .contentsWrap > .content-box.first > .subsWrap{ background: url(../images/common/bg/bg_highlight.png) no-repeat;}
#contents.index > .displayContents > .contentsWrap > .content-box.first > .subsWrap > .imgWrap{
	position: relative;
	/*margin-left: 35px;*/
	width: 1500px;   /* 이크기에 따라 이미지 정렬이 됨 */
}

#contents.index > .displayContents > .contentsWrap > .content-box.first > .subsWrap > .imgWrap > .componet > li{
	position: relative;
	padding-top: 10px;
	float: left;
}

#contents.index > .displayContents > .contentsWrap > .content-box.first > .subsWrap > .imgWrap >.componet >  li > a{
	position: absolute;
	display: block;
	top:314px; left: 34px;
	width: 218px; height: 105px;
	z-index: 15;
	background: url(common.css); /* 익스 11 이하에서는 내용이 없으면 공백으로 취급함 그래서 background: url(common.css)이것을 사용함*/
	text-indent: -999em;
}
/* 첫번째 컨텐츠 끝 */

/* 두번째 컨텐츠*/
#contents.index > .displayContents > .contentsWrap > .content-box.second{ background:url(../images/common/bg/main2_bg.jpg) repeat-x;}
#contents.index > .displayContents > .contentsWrap > .content-box.second > .subsWrap > .componet{
	position: absolute;
	top:79px; left: 30px;
}
/* 두번째 컨텐츠 끝 */

/* circle 블릿버튼 */
#contents.index > .displayContents > .contentsWrap > .content-box > .subsWrap > .imgWrap > .bullet {
	position: absolute;
	top: 244px; left: 35px;
	height: 14px;
}

#contents.index > .displayContents > .contentsWrap > .content-box > .subsWrap > .imgWrap > .bullet > .swiper-pagination-switch{
	float: left;
	margin-right: 5px;
	cursor: pointer;
	width: 14px; height: 14px;
	background: url(../images/common/btn/circle_bullet_btn.png) no-repeat;
	background-position: 0 -16px;
}

#contents.index > .displayContents > .contentsWrap > .content-box > .subsWrap > .imgWrap > .bullet > .swiper-active-switch { background-position: 0 0; }
/* 부분 컨트롤 블릿버튼 끝*/

/**********************************************************
	Quality Certification, Measurement Facilities, notice
***********************************************************/
#contents.index >.boardContents{
	padding:27px 0 0 0;
	color: #fffefe;
	background-color: #0c1f4a;
}
#contents.index >.boardContents > .innerBoard{
	overflow: hidden;
	margin: 0 auto;
	padding: 0 21px 0 17px;
	width: 966px;
}
#contents.index >.boardContents > .innerBoard > .section{position: relative; float: left;}
#contents.index >.boardContents > .innerBoard > .section.third{ float: right;}
#contents.index >.boardContents > .innerBoard > .section > h3{ font-size: 1.4em;/*17px;*/ letter-spacing: -0.5px; font-family: '나눔고딕 bold', NanumBold;}
#contents.index >.boardContents > .innerBoard > .section > .figure{
	overflow: hidden;
	margin-top:14px;
	color: #b0bbd4;
	line-height: 1.6;
}
#contents.index >.boardContents > .innerBoard > .section > .figure > img{ float: left;}

#contents.index >.boardContents > .innerBoard > .section > a{ 
	position: absolute;
	display: block;
	padding-right: 10px;
	font-size: 0.8em; /*10px; */
	color: #5cb0e5; 
	background: url(../images/common/icon/arrow_icon.png) no-repeat right 1px;
}

/* Quality Certification */
#contents.index >.boardContents > .innerBoard > .section.first{width: 329px;}
#contents.index >.boardContents > .innerBoard > .section.first > .figure >.figureCaption{ padding: 0 36px 0 112px;}
#contents.index >.boardContents > .innerBoard > .section.first > .figure >.figureCaption > ul{
	margin-top: 11px;
	padding-left: 2px;
	color: #d4d4d4;
}
#contents.index >.boardContents > .innerBoard > .section.first > .figure >.figureCaption > ul > li{
	padding-left: 9px;
	background: url(../images/common/icon/rect_bullet_icon.gif) no-repeat left center;
}
#contents.index >.boardContents > .innerBoard > .section.first > a{top:8px; right: 141px;}

/* Measurement Facilities */
#contents.index >.boardContents > .innerBoard > .section.second{width: 390px;}
#contents.index >.boardContents > .innerBoard > .section.second > .figure >.figureCaption{ padding: 0 33px 0 180px;}
#contents.index >.boardContents > .innerBoard > .section.second > .figure >.figureCaption > ul > li {
	padding-left: 9px;
	background: url(../images/common/icon/rect_bullet_icon.gif) no-repeat left center;
}
#contents.index >.boardContents > .innerBoard > .section.second > .figure >.figureCaption > ul > li.first{ background-position: left 8px;}
#contents.index >.boardContents > .innerBoard > .section.second > .figure >.figureCaption > ul > li.first > em {padding-right: 10px;}
#contents.index >.boardContents > .innerBoard > .section.second > .figure >.figureCaption > ul > li > em{ font-family: '나눔고딕 ExtraBold', NanumEX;}
#contents.index >.boardContents > .innerBoard > .section.second > .figure >.figureCaption > ul > li > span{
	display: block; 
	text-indent: -11px;
}
#contents.index >.boardContents > .innerBoard > .section.second > .figure > img{border:1px solid #0a193b;}
#contents.index >.boardContents > .innerBoard > .section.second > h3{letter-spacing: -0.8px;}
#contents.index >.boardContents > .innerBoard > .section.second > a{top:8px; right: 186px;}

/* notice */
#contents.index >.boardContents > .innerBoard > .section.third > h3,#contents.index >.boardContents > .innerBoard > .section.third > .notice{ float: left;}
#contents.index >.boardContents > .innerBoard > .section.third > .notice{padding: 5px 0 0 12px;}
#contents.index >.boardContents > .innerBoard > .section.third > .notice > li{
	padding-left: 8px;
	background: url(../images/common/icon/rect_bullet_icon.gif) no-repeat left center;
}
#contents.index >.boardContents > .innerBoard > .section.third > .notice > li > a {color: #d4d4d4;}
#contents.index >.boardContents > .innerBoard > .section.third > .recruit{ margin-top: 7px;}
#contents.index >.boardContents > .innerBoard > .section.third > .recruit > li{ margin-top: 3px;}

/*************************************************************************************
					   				본문(contents) 끝
**************************************************************************************/

/*********************************
		꼬리말(footer)
**********************************/
#footer{
	#margin-top: -9px;
	padding: 45px 0 70px 0;
	background-color: #0c1f4a;
}

.innerFooter{
	position: relative;
	padding-right: 103px;
	color: #9d9d9d;
	margin: 0 auto;
	width: 901px;
}


.innerFooter > address{
	text-align: right;
}

.innerFooter > .copyright{
	padding: 5px 0 0 0;
	text-align: right;
	font-weight: bold;
	text-transform:uppercase;
}

.innerFooter > img{
	position: absolute;
	top:1px; right: 27px;
	opacity: 0.3;
}

#footer.subfooter{
	background-color: #f5f5f5; border-top: 1px solid #d4d5d8;
}
#footer.subfooter address{
	letter-spacing: -0.5px;
	color: #666666;
}
#footer.subfooter .copyright{
	padding: 5px 0 0 0;
	font-size: 11px;
	font-weight: normal;
	color: #666666;
}

/****************************************************************
    		    서브 layout 설정
****************************************************************/
/* background 공통*/
#contents > .left-wing{
	/*
	position: absolute;
	left: 0; top:0;
	width: 100%;
	*/
	margin-bottom: -137px;
	height: 137px;
	background: url(../images/common/bg/sub_left_wing_bg.gif) repeat-x;
}

#contents > .right-wing{
	/*
	position: absolute;
	left: 0; top:0;
	width: 100%;
	*/
	margin-bottom: -137px;
	margin-left:50%; /*900px*/
	height: 137px;
	background: url(../images/common/bg/sub_right_wing_bg.gif) repeat-x;
}

/* 서브 layout */
.innerContents{overflow: hidden;}

/* 왼쪽 메뉴 */
.innerContents > .aside{ float: left;}

.innerContents > .aside > h2{
	width: 202px;
	padding: 21px 0 16px 0;
	/*line-height: 102px;*/
	height: 65px;
	text-align: center;
	color: #fff;
	font-size: 27px;
	font-family: '나눔고딕 bold', NanumBold;
	background: url(../images/common/bg/aside_h2_bg.jpg) no-repeat;
}
.innerContents > .aside > .h2_tit{padding: 39px 0 41px 0; height: 22px;}
.innerContents > .aside > ul{ font-family: '나눔고딕 bold', NanumBold;}
.innerContents > .aside > ul > li{ border-bottom: 1px solid #d4d5d8;}
.innerContents > .aside > ul > li > a{ display: block; padding: 9px 0 8px 30px; font-size: 15px; color: #666666; border: 1px solid #d4d5d8; border-top: none; border-bottom: none; letter-spacing: -0.025em; /* 2014. 12. 15 추가 */}
.innerContents > .aside > ul > li > a:hover{ color: #fff; color: #ff0000;}

/* 메뉴 선택 */
.innerContents > .aside > ul > li > a.on{ color: #fff; border: none; padding: 9px 0 8px 30px; background: url(../images/common/btn/aside_btn_bg.gif) no-repeat; background-color: #ff0000;}

/* aside 빈공간(세로) 테두리 설정 */
.innerContents > .aside > .aside-blank{
	/*padding-bottom: 579px;*/
	#width: 200px; /* ie7 width값을 줘야됨 */
	border: 1px solid #d4d5d8;
	border-top: none; border-bottom: none;
}


/* 본문 내용*/
.innerContents{
	/*position: relative;*/
	margin: 0 auto;
	padding: 35px 18px 0 18px;
	width: 1004px;
	/*z-index: 1;*/
}

.innerContents > .section{ float: left; /*padding: 0 0 0 35px;*/ width: 784px;}

.innerContents > .section > .section-title{
	padding-left: 40px;
	height: 102px;
}

.innerContents > .section > .section-title > h3{
	padding: 22px 0 0 0;
	font-size: 28px;
	color: #363a46;
	font-family: '나눔고딕 bold', NanumBold;
}
.innerContents > .section > .section-title > p{
	padding: 6px 0 0 0;
	color: #777777;
}

/* section-body  */
.innerContents > .section > .section-body{ padding: 79px 18px 103px 35px; }

.innerContents > .section > .section-body h4{
	color: #213f6c;
	letter-spacing: -1.5px;
	font-family: '나눔고딕 bold', NanumBold;
}

/*************************************
		사이트맵(sitemap.asp)
**************************************/
.sitemap{background: url(../images/sub/bg/customer_visual_bg.jpg) no-repeat; font-family: '나눔고딕 bold', NanumBold;}
.site-map strong{
	display: inline-block; 
	margin-bottom: 25px;
	width: 238px; height: 36px; 
	font-size: 16px;
	color: #213f6c;
	text-align: center;
	line-height: 39px;
	border-top: 2px solid #8ab9d6; 
	border-bottom: 1px solid #c4cde0; 
	background-color: #f5f7f8;
}
.site-map > ul {overflow: hidden;}
.site-map > ul > li {float: left; margin-left: 5px; padding-bottom: 20px;}
.site-map > ul > li.first{margin-left: 0;}
.site-map > ul > li > ul{
	padding-left: 12px;
	line-height: 1.6;
	font-size: 14px;
	color: #666666;
}
.site-map > ul > li > ul > li:before{
	display: inline-block; 
	margin-right: 5px; 
	width: 3px; height: 3px; 
	background-color: #77aedb; content: '';
}
.site-map > ul > li > ul > li > ul{
	padding: 4px 0 4px 8px;
	font-size: 13px;
	color: #777777;
	font-family:'나눔고딕', Nanum; 
}
