/*
 * Reset Css
 */

html ,body, div, ul, li, h1, h2, h3, h4, h5, h6, img, p {
	margin: 0;
	padding:0;
	font-family: 'Nanum Gothic', sans-serif;
	font-weight: 300;
	line-height: 1.4;
	border: none;
}

ul, li {
	list-style: none;
}

a {text-decoration: none; color:#323232;}
a:link {text-decoration: none;color:#323232;}
a:hover {text-decoration: none; color:#676767 !important;}
a:visited {text-decoration: none; color:#000;}
a:active {text-decoration: none; }

/*
 * Common
 */
#wide-container {
	width: 100%;
	height: 385px;
	background: #f2f2f2;
	clear: both;
}

#container {
	width: 1000px;
	margin: 0 auto;
	clear:both;
	padding-bottom: 80px;
}


h1 img {
 	width: 210px;
 	padding-top: 25px;
	display: block;
}

h2 {
 	font-size: 24px;
	font-weight: 700;
	text-align: left;
	font-family: 'Nanum Gothic', sans-serif;
}
h4 {
 	font-size: 18px;
 	font-weight: 700;
 	display: inline-block;
 	padding: 20px 0 5px;
 	clear: both;
}

h5 {
 	font-size: 18px;
 	font-weight: 700;
 	display: block;
 	padding: 0 0 0 10px;
 	margin: 0 0 10px 0;
 	clear: both;
 	border-left: 4px solid #4ebd56;
}

h6 {
	font-size: 15px;
 	font-weight: 700;
 	display: inline-block;
 	margin: 0 10px;
  	padding: 0 0 15px 0;
 	margin: 0;
}

.br {
 	display: none;
}

.br2 {
	display: block;
}

/*
 * header
 */
header {
	height: 94px;
	border-bottom: 4px solid #4ebd56;
}

header h1 {
	float: left;
	width: 210px;
	height: 30px;
	line-height: 94px;
}

header #gnb {
	float: right;
}

header #gnb li {
	float: left;
}
header #gnb li a {
	width: 125px;
	height: 94px;
	font-size: 18px;
	font-weight: 700;
	color:#000;
	display: block;
	line-height: 94px;
}

.lang-selector {
	float: right;
	height: 64px;
	padding: 30px 0 0 0;
	line-height: 32px;
}

.lang-selector span {
	width: 108px;
	height: 33px;
	border:1px solid #dedede;
	display: block;
	background: url(/assets/images/lang-bg.png) no-repeat;
	background-size: 108px;
	font-weight: 300;
	padding: 0 0 0 10px;	
	cursor: pointer;
}
.lang-selector ul {
	display: none;
	position: absolute;
	z-index: 100;
}
.lang-selector li {
	width: 108px;
	height: 33px;
	line-height: 33px;
	background: #fff;
	padding: 0 0 0 10px;
	border-right: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
	border-left: 1px solid #dedede;
	float: none;
	cursor: pointer;
}
.lang-selector li:hover {
	background: #e6e6e6;
}
.m-lang-selector {
	display: none;
	float: right;
	margin: 10px 0px;
}

.m-lang-selector span {
	width: 45px;
	height: 33px;
	line-height: 28px;
	border:1px solid #dedede;
	display: block;
	background: url(/assets/images/lang-bg.png) no-repeat top right;
	background-size: cover;
	font-weight: 300;
	padding: 0 0 0 10px;	
	cursor: pointer;
}
.m-lang-selector ul {
	display: none;
	position: absolute;
	z-index: 9999;
}
.m-lang-selector li {
	width: 45px;
	height: 33px;
	line-height: 33px;
	background: #fff;
	padding: 0 0 0 10px;
	border-right: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
	border-left: 1px solid #dedede;
	float: none;
	cursor: pointer;
}
#m-menu {
	display: none;
}

#m-submenu {
	display: none;
}

/*
 * Main-cont
 */

#main-slide {
	background:url(/assets/images/slide-bg.jpg) no-repeat;
	background-size: cover;
}
#main-slide .ch1 div{
	max-width: 1000px;
	margin: 0 auto;
}

#main-slide .ch3 h1 {
   	max-width: 1000px;
    color:#000;
    text-align: left;
    margin: 0 auto;
}

#main-slide .ch3 p {
   	width: 1000px;
    display: inline-block;
    color: #000;
    text-align: left;
    margin: 0 auto;
    padding: 50px 0 0 0;
}

.btn-scrolltop {
	display: none;
	position: fixed;
	right: 10%;
	bottom: 10%;
	z-index: 300;
	transition:display 0.5s;
	cursor: pointer;
}
.btn-scrolltop img{
	width: 50px;
}

.products {
	width: 1000px;
	height: 783px;
	text-align: center;
}

.products h2{
	padding: 70px 0 30px;
}

.products li{
	width: 250px;
	height: 330px;
	float: left;
	color: #000;
}
.products li:hover a{
	color: #fff;
}

.products a{
	width: 250px;
	height: 130px;
    padding: 200px 0 0;
	display: block;
	color:#000;

}

.products a:hover{
	color:#fff !important;

}

.product01 a {
	background: url(/assets/images/icon-products-sprite.png) no-repeat;
	background-size: 320px auto;
	background-position: center 0px;
}
.product02 a {
	background: url(/assets/images/icon-products-sprite.png) no-repeat;
	background-size: 320px auto;
	background-position: center -358px;
}
.product03 a {
	background: url(/assets/images/icon-products-sprite.png) no-repeat;
	background-size: 320px auto;
	background-position: center -716px;
}
.product04 a {
	background: url(/assets/images/icon-products-sprite.png) no-repeat;
	background-size: 320px auto;
	background-position: center -1074px;
}
.product05 a {
	background: url(/assets/images/icon-products-sprite.png) no-repeat;
	background-size: 320px auto;
	background-position: center -1432px;
}
.product06 a {
	background: url(/assets/images/icon-products-sprite.png) no-repeat;
	background-size: 320px auto;
	background-position: center -1790px;
}
.product07 a {
	background: url(/assets/images/icon-products-sprite.png) no-repeat;
	background-size: 320px auto;
	background-position: center -2148px;
}
.product08 a {
	background: url(/assets/images/icon-products-sprite.png) no-repeat;
	background-size: 320px auto;
	background-position: center -2506px;
}



.product01:hover a {
	background: url(/assets/images/icon-products-hover-sprite.png);
	background-size: 320px auto;
	background-position: center 0px;
}
.product02:hover a {
	background: url(/assets/images/icon-products-hover-sprite.png);
	background-size: 320px auto;
	background-position: center -358px;
}
.product03:hover a {
	background: url(/assets/images/icon-products-hover-sprite.png);
	background-size: 320px auto;
	background-position: center -716px;
}
.product04:hover a {
	background: url(/assets/images/icon-products-hover-sprite.png);
	background-size: 320px auto;
	background-position: center -1074px;
}
.product05:hover a {
	background: url(/assets/images/icon-products-hover-sprite.png);
	background-size: 320px auto;
	background-position: center -1432px;
}
.product06:hover a {
	background: url(/assets/images/icon-products-hover-sprite.png);
	background-size: 320px auto;
	background-position: center -1790px;
}
.product07:hover a {
	background: url(/assets/images/icon-products-hover-sprite.png);
	background-size: 320px auto;
	background-position: center -2148px;
}
.product08:hover a {
	background: url(/assets/images/icon-products-hover-sprite.png);
	background-size: 320px auto;
	background-position: center -2506px;
}

.products p{
	max-width: 216px;
	font-size: 14px;
	font-weight: 300;
	display: block;
	margin: 0 auto;
}

.blind-rivet-by-size {
	width: 350px;
	background: #000;
	color:#fff;
	margin: 0 auto 30px;
	padding: 10px 20px;
	cursor: pointer;
	text-align: center;
}

.blind-rivet-by-size:hover {
	background: #aaa;
}

.boards {
	width: 1000px;
	clear: both;
}

.boards h5 {
	width: 100%;
	padding: 45px 0 20px;
	background: #f2f2f2;
}

.boards li{
	height: 345px;
	padding-top: 20px;
	float:left;
}

.boards img {
	width: 320px;
	height: 220px;
	display: block;
}
.board-no {width: 5%;}
.board-category {width: 15%;}
.board-title {width: 50%;}
.board-author {width: 10%;}
.board-date {width: 10%;}
.board-display {width: 10%;}
.btn-board-list {
	display:inline-block; 
	float: right;
	text-align:center; 
	width:110px; 
	height:35px; 
	background:#acacac; 
	color:#fff !important;
	line-height: 35px;
	margin-top: 15px;
}

.cs {
	width: 1000px;
	height: 450px;
	clear: both;
}

.cs h2 {
	padding: 60px 0 38px;
}

.cs li {
	height: 260px;
	float: left;
}

.cs img {
	width: 320px;
	height: 220px;
	display: block;
}

.list-center {
	margin: 0 17px;
}

.list-box {
	height: 258px;
	border: 1px solid #dedede;
	background: #fff;
}

.list-box h6 {
    padding: 8px !important;
    display: block;
    background: url(/assets/images/btn-cross.png) no-repeat;
    background-position: right;
    background-size: contain;
}

/*
 * Footer
 */

footer {
	clear: both;
	width: 100%;
	background: #000;
	font-size: 12px;
	color: #fff;
}

#sitemap-area {
	width: 845px;
	float: left;
	padding-bottom:25px;
}

.sitemap-list {
	width: 150px;
	padding: 0 15px 0 0;
	float:left;
	line-height: 1.5;
}

.sitemap-list a {
	color:#fff;
}

.sitemap-list h2 {
	font-size: 12px;
	font-weight: 900;
	padding:50px 0 25px;
}

#extra-btn-area {
	width: 155px;
	padding-top: 55px;
	float: left;
}

.btn-contact {
	width: 150px;
	height: 40px;
	border-radius: 5px;
	background: #5eb357;
	display: block;
	text-align: center;
	color: #fff !important;
	line-height: 40px;
	margin-bottom: 15px;
}
.btn-map {
	width: 148px;
	height: 38px;
	border-radius: 5px;
	border: 1px solid #999;
	display: block;
	text-align: center;
	color: #fff !important;
	line-height: 38px;
}
.btn-contact:hover {
	background: #4ebc54;
	color: #fff !important;
}
.btn-map:hover { 
	background: #fff;
	border: 1px solid #fff;
}
.copyright {
	text-align: right;
	clear: both;
	border-top: 1px solid #343434;
	padding: 35px 0 75px;
}

.copyright a {
	color: #fff;
}
.copyright .br {
	display: none;
}


/*
 *Subpage layout
 */

#visual-container {
	text-align: center;
	height: 298px;
}

#visual-container h2 {
    padding-top: 170px;
    padding-bottom: 39px;
    text-shadow: 1px 1px #323232;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.4);
    transition:background 1s, color 1s;
   
}
#visual-container h2 span {
   	font-size:40px;
}

#visual-container.vc-company {
	background-image:url(/assets/images/slide-img2-2.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
#visual-container.vc-product {
	background-image:url(/assets/images/vc-product.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
#visual-container.vc-cs {
	background-image:url(/assets/images/vc-cs.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

#visual-container.vc-pr {
	background-image:url(/assets/images/vc-pr2.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

#submenu-container {
 	width: 100%;
	height: 40px;
	border-bottom: 1px solid #dedede;
	overflow: hidden;
}
#submenu-container li {
  	width: 20%;
   	height: 38px;
  	font-weight: 800;
  	text-align: center;
  	float: left;
	transition:width 0.1s;
}
#submenu-container a{
  	width: 100%;
  	height: 100%;
	line-height: 36px;
  	text-align: center;
  	font-weight: 800;
	display: block !important;
	transition:width 0.1s;
}

#submenu-container li a:hover{
  	width: 100%;
  	height: 38px;
  	text-align: center;
  	font-weight: 800;
	display: block;
	border-bottom: 4px solid #ccc;
}

#submenu-container li a.selected{
  	width: 100%;
  	height: 38px;
  	text-align: center;
  	font-weight: 800;
	display: block;
	border-bottom: 4px solid #000;
}
#submenu-container .product-sub li{width: 14.28%;}
#submenu-container .cs-sub li{width: 16.66%;}

/* Cont Area */

.w100{width: 100%;}
.w90 {width: 90%; float: left;}
.w80 {width: 80%; float: left;}
.w70 {width: 70%; float: left;}
.w50 {width: 50%; float: left;}
.w30 {width: 30%; float: left;}
.w20 {width: 20%; float: left;}
.w50 span {display: block; padding: 40px 20px 50px 0;}

.contbox {
	background: #f2f2f2;
	padding:10px 10px;
	margin: 0 0 40px 0;
}

.contbox img {
	width: 80%;
	margin: 10px auto;
	display: block;
}

.contbox table {
	width: 100%;
	margin: 10px 0;
	border-collapse: collapse;
}

.contbox table th {
	height: 35px;
	background: #519A6C;
	color: #fff;
	border-collapse: collapse;
}

.contbox table td {
	height: 35px;
	background: #fff;
	border-bottom:1px solid #dedede;
	font-size: 15px;
	padding:10px 0;
	border-collapse: collapse;
}

.contbox ul {
	clear: both;
}

.contbox ul li {
	float: left;
}

.contbox ol li {
	list-style-type: decimal;
	padding:5px 0;
}

.contbox.sht {
	height: 600px;
}

.contbox.sht li {
	width: 16.66% !important;
	text-align: center;
}

.contbox.sht img{
	width: 100%;
}

.contbox.sdt th {
	width: 16.66% !important;
	text-align: center;
}

.contbox.stt th{
	width: 20% !important;
	text-align: center;
}

.certification-container li {
	float: left;
	width: 25%;
	margin-bottom: 80px;
	text-align: center;
}

.certification-container img{
	width: 100%;
	display: block;
	cursor: pointer;
}

.title {
	text-align: center;
	padding:50px 0 35px;
	clear: both;
}
.title h2 {
	text-align: center;
	padding-bottom: 5px;
	font-size: 34px;
	font-weight: 800;
}
.title img {
	width: 93px;
	text-align: center;
	padding-bottom: 5px;
}

.cont-visual {
	height: 500px;
}


.ceo {
	background:url(/assets/images/ceo-default.jpg); 
	background-size:cover;
	transition:background 0.8s;
}

.ceo:hover {
	background:url(/assets/images/ceo.jpg); 
	background-size:100% auto;
}

.ceo .ment {
	width:48%; 
	float:right; 
	font-size:30px; 
	display:block; 
	font-weight:800; 
	padding:120px 0 0 0;
}

.ceo-name {
	display:block; 
	text-align:right; 
	font-weight:800; 
	padding:0;
}

.box-shadow {
	background:url(/assets/images/box-shadow.jpg) no-repeat; 
	background-size:100% auto;
	height: 30px;
	margin-bottom: 20px;
}
.box-shadow2 {
	background:url(/assets/images/box-shadow2.jpg) no-repeat; 
	background-size:100%;
	height: 60px;
}

.tabmenu li{
	float:left;
	width: 316px;
	background: url(/assets/images/tab-bg.jpg);
	cursor: pointer;
	font-size: 15px;
	font-weight: 800;
}
.tabmenu li div {
	padding: 15px 0 20px 15px;
	border-bottom: 1px solid #acacac;
}

.tabmenu li:hover{
	background: #acacac;
}
.tabmenu li div span{
	font-size: 24px; 
	font-weight: 800;
	display: block;
}

.tabcont {
	margin: 40px 0;
	clear:both;
}

.tabmenu li.active div{
	padding: 14px 0 20px 14px;
	border-top:1px solid #acacac;
	border-left:1px solid #acacac;
	border-right:1px solid #acacac;
	border-bottom: none;
	background: #fff;
	cursor: pointer;
}

.hisbox li{
	display: block;
	padding:30px 20px;
	font-size:18px;
	border-bottom: 1px solid #dedede;
	transition:background 0.5s, padding 0.5s;
}

.hisbox li:hover {
	padding:45px 20px;
	background: #4ebd56;
	color:#fff;
	font-weight: 400;
	border-bottom: none;
}

.hisbox span{
	font-weight: 800;
	padding: 0 20px 0 0;
	display: inline-block;
	float: left;
}
.hisbox p {
	display: block;
	padding: 0 0 0 10%;
	margin: 0;
}

.history2 {display: none}
.history1 {display: none;}

.condition-info {
	height: 134px;
}

.condition-info li{
	width: 33.33%;
	height: 90px;
	float:left;
	text-align: center;
	border-top:2px solid #acacac;
	border-bottom:2px solid #acacac;
	padding: 30px 0 10px;
}

.condition-info li span{
	font-size: 24px;
	font-weight: 800;
}

.condition {
	height: 280px;
	padding: 40px 0;
	border-top:1px solid #dedede;
	border-bottom:1px solid #dedede;
	margin-bottom: 80px;
}

.condition li{
	width: 33.33%;
	float:left;
	text-align: center;
	padding: 40px 0;
	transition:background 0.5s;
}

.condition li:hover{
	background:  #4ebd56;
	color:#fff;
}

.condition li span{
	font-size: 21px;
	font-weight: 400;
}

.map {
	margin-bottom: 40px;
}

.head-number {
	height: 100px;
	padding:35px 20px 0;
	border:1px solid #acacac;
	font-size:21px;
	text-align:center;
	transition:background 0.5s;
}

.head-number div {
	width: 50%;
	float: left;
}

.head-number span {
	font-weight: 800;
	padding-right: 10px;
}

.head-number .fax {
	font-weight: 300;
	font-size: 16px;
	color: #ccc;
}
.head-number .fax a {
	font-weight: 300;
	font-size: 16px;
	color: #ccc;
}

.head-number:hover {
	background: #4ebd56;
	color:#fff;
}

.head-number:hover  a {
    color: #fff !important;
}
.bar {
	display: inline-block;
	width:5%;
}

.phonebox {
	margin-bottom: 80px;
}

.phonebox table{
	width: 95%;
	text-align: center;
}

.phonebox th {
	background: #f2f2f2;
	font-weight: 900;
}

.phonebox td {
	height: 50px;
	padding:0 10px;
	border-bottom: 1px solid #dedede;
}

.phonebox .team-list {
	width: 20%;
}

.phonebox .working-part {
	width: 26%;
}
.phonebox span {
	color: #ccc;
	padding: 0;
}

.brocher-container {
	min-height: 400px;
}

.brocher-box {
	width: 33.33%;
	text-align: center;
	float: left;
}

.brocher-table {
	width: 100%;
	padding-bottom: 41px;
	background: url(/assets/images/brocher-table.jpg) no-repeat;
	background-size: 100% auto;
	background-position: center bottom;
	text-align: center;
}

.brocher-box img {
	width: 50%; 
}

.video-container {
	text-align: center;
}

.video {
	height: 500px;
	background: #323232;
	color: #fff;
}

.condition-container ol {
	border:1px solid #acacac;
	margin: 0;

}
.condition-container ol li {
	list-style-type: decimal;
	padding:10px 20px 10px 0;
	transition:background 0.5s;
}

.condition-container ol li:hover {
	list-style-type: decimal;
	padding:10px 10px 10px 0;
	background: #4ebd56;
	color:#fff;
}
.stock-container ul {
	padding:10px;
}

.stock-container li a{
	padding:20px 30px;
	margin: 10px 0;
	border:1px solid #acacac;
	font-weight: 800;
	display: block;
}
.stock-container li a:hover{
	background: #4ebd56;
	color:#fff !important;
	padding:20px 30px;
	margin: 10px 0;
	border:1px solid #acacac;
	font-weight: 900;
	cursor:pointer;
}
.stocklist li{
	float: left;
	border:1px solid #e6e6e6;
	padding:5px;
	margin: 5px;
	font-size: 0.8em;
}
.btn-stocklist {
	width: 100px;
	text-align: center;
	background: #343434;
	color: #fff !important;
	padding:5px 10px;
	margin: 0 auto 20px;
	display: block;
	
}
.stock-cont{
	padding:0 10px;
}
.stock-cont li {
	padding:5px 0;
}
.qna-container {
	margin-bottom: 80px;
}

.qna-container dt{
	padding:20px 30px;
	margin: 10px 0;
	border:1px solid #acacac;
	font-weight: 900;
}

.qna-container dt:hover{
	background: #4ebd56;
	color:#fff;
	padding:20px 30px;
	margin: 10px 0;
	border:1px solid #acacac;
	font-weight: 900;
	cursor:pointer;
}

.qna-container dd {
	background: #f2f2f2;
	padding:10px 10px 30px;
	display: none;
	line-height: 1.5;
}

.mail-container {
	border:1px solid #e6e6e6;
	padding:30px 30px;
	margin-bottom: 80px;
	text-align: center;
}

.mail-container table {
	width: 100%;
}

.mail-container .table-label {
	width: 30%;
	text-align: left;
	font-weight: 900;
	background: #f2f2f2;
	padding:0 0 0 20px;
}

.mail-container input {
	width: 100%;
	height: 35px;
	margin-bottom: 10px;
	font-size: 14px;
	border:none;
}

.mail-container textarea {
	width: 100%;
	margin-bottom: 10px;
	border:none;
	font-size: 14px;
}

.mail-container .submit {
	background:#4ebd56;
	font-weight:800;
	color: #fff;
	margin-top: 15px;
}

.board-container {
	margin-bottom: 80px;
}

.board-container table{
	width: 100%;
	text-align: center;
}

.board-container th{
	height: 40px;
	background: #f2f2f2;
	border-top: 1px solid #acacac;
}

.board-container td{
	height: 35px;
	background: #fff;
	border-bottom: 1px solid #dedede;
}

.recruit-days {
	width: 25%;
}

.recruit1 {
	padding-top: 40px;
}

.recruit1 div{
	clear: both;
}


.talent li {
	width: 33.33%;
	float: left;
	text-align: center;
	color: #000;
	font-weight: 300;
	margin-bottom: 20px;
}

.talent strong {
	font-size: 21px;
	color:#000;
	margin-bottom: 10px;
	display: inline-block;
}

.talent img {
	width: 80%;
}

.talent br {
	display: block;
}

.motto li {
	width: 33.33%;
	background: url("/assets/images/motto-bg.png");
	background-size: cover;
	padding:60px 0;
	font-size: 21px;
	font-weight: 800;
	float: left;
	text-align: center;
}

.principle li{
	width: 33.33%;
	padding:60px 0;
	background: url("/assets/images/motto-bg.png");
	background-size: cover;
	font-size: 21px;
	font-weight: 800;
	float: left;
	text-align: center;
}
.recruit2 {
	display: none;
	padding-top: 40px;
	clear: both;
}

.recruit2 dl {
	width: 100%;
	padding-bottom: 60px;
}

.recruit2 h6 {
	padding-top:15px; 
}

.recruit2 dt {
	font-weight: 900;
	width: 120px;
	float: left;
	display: block;
}
.recruit2 dd {
	width: 75%;
	margin: 0;
	padding-bottom: 40px;
	float: left;
	display: block;
}

.recruit2 img {
	width: 100px;
}

.recruit2 .w50 {
	padding-bottom: 100px;
}

.recruit3 {display: none; padding-top: 40px;}
.recruit3 table {
	width: 100%;
	text-align: center;
}
.recruit3 th{
	height: 40px;
	background: #f2f2f2;
	border-top: 1px solid #acacac;
}

.recruit3 td{
	height: 35px;
	background: #fff;
	border-bottom: 1px solid #dedede;
}

.tabcont {
	padding-top: 40px;
}

.product1{
	padding-top: 40px;
}
.product2{
	display: none;
	padding-top: 40px;
}
.product3{
	display: none;
	padding-top: 40px;
}
.product4{
	display: none;
	padding-top: 40px;
}


.product-box {
	height: 220px;
	clear: both;
	margin-bottom: 45px;

}

.product-info {
	width: 309px;
	height: 220px;
	border-right:1px solid #dedede;
	float: left;
}

.product-info h6 {
	line-height: 1.5em;
	border-top: 4px solid #19385c;
	padding-top: 1px;
}

.sds .product-info h6 {border-top: 4px solid #19385c;}
.type17 .product-info h6 {border-top: 4px solid #b3a3c6;}
.blindrivet .product-info h6 {border-top: 4px solid #1aaf54;}
.tapping .product-info h6 {border-top: 4px solid #1eb1ed;}

.product-info span {
	padding-top: 30px;
	font-size: 14px;
	display: block;
}
.product-info span strong{
	font-weight: bold
}

.product-img {
	width: 350px;
	float: left;
	text-align: center;
	padding-top: 60px;
}

.product-img img{
	width: 250px;
}

.product-list {
	width: 335px;
	height: 100%;
	overflow-y: auto;
	float: left;
	font-size: 14px !important;
}

.product-list span {
	min-width: 120px;
	display: inline-block;
	padding-right: 20px;
	font-weight: 800;
	display: inline-block; 
}

.product-list.sdsbh625 span {
	float: left;
}
.product-list.sdsbh625 p{
	padding-left: 140px;
	margin: 2px 0;
}

.tabcont .caution {
	text-align: center;
    padding: 0 0 50px 0;
    line-height: 1.8;
    font-weight: bold;
}

/* Borad */

.empty-div {
	height: 400px;
}

.pagination li {
	display: inline-block;
	padding: 5px;
}

.pagination .active {
	font-weight: bold;
}

#content {
	max-width: 700px;
	margin: 0 auto;
	text-align: left;
}

#content img {
	width: 100% !important;
}

/* DIM -LAYER */
.dim-layer {
	width: 100%;
	position:absolute;
	top: 0%;
	left:50%;
	margin-left: -50%;
	text-align: center;
	padding:30px 0;
	background-color: #fff;
}
.dim-close {
	width: 60px;
	position: fixed;
	right: 0;
	margin-top: 10px;
	margin-right: 10%;
}

.dim-box {
	width: 100%;
	overflow: scroll;
}

.dim-layer-for-br {
    width: 100%;    
    position: absolute;
    top: 0%;
    left:50%;
    margin-left: -50%;
    text-align: center;
    padding:40px 0;
	background:rgba(0,0,0,0.7);    
}
.dim-layer-for-br .view-box {
	max-width: 1000px;
	margin: 0 auto;
	padding-top: 30px;
	background: #fff;
}

.dim-layer-for-br h2 {
    font-size: 18px;
    text-align: center;    
    padding-bottom: 40px;
}
.dim-layer-for-br .dim-close {
    width: 30px;
    position: fixed;
    right: 0px !important;
    top: 0px !important;
    cursor: pointer;
}
.dim-layer-for-br div img {
    width: 70%;
    cursor: pointer;
    display: block;
    float: left;
    cursor: pointer;
}
.dim-layer-for-br ul{
	margin: 0 auto;
}

.dim-layer-for-br li{
	width: 33.33%;
    float: left;
    height: 120px;
	background: #fff;
}

.dim-layer-for-br span {
	font-weight: bold;
	display: block;
    width: 30%;
    float: left;
    padding: 15px 0 0 0;
}


.carousel{
	width: 100%;
	position: relative;
	padding-top: 610px;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
}

.inner{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
	-webkit-overflow-scrolling: touch;
}

/**
 * ==========================
 * Animation styles
 * 
 * Notes:
 * 1. We use z-index to position active slides in-front 
 * of non-active slides
 * 2. We set right:0 and left:0 on .slide to provide us with
 * a default positioning on both sides of the slide. This allows 
 * us to trigger JS and CSS3 animations easily
 *
 */
.slide{
	width: 100%;
	height: 100%;
	background:url(/assets/images/slide-bg.jpg) no-repeat;
	background-size: cover;
	position: absolute;
	top:0;
	right:0;
	left:0;
	z-index: 1;
	opacity: 0;
	padding-top:125px;
}

.slide.active,
.slide.left,
.slide.right{
	z-index: 2;
	opacity: 1;
}

/**
 * ==========================
 * JS animation styles
 * 
 * We use jQuery.animate to control the sliding animations
 * when CSS3 animations are not available. In order for
 * the next slide to slide in from the right, we need
 * to change the left:0 property of the slide to left:auto
 *
 */

.js-reset-left{left:auto}

/**
 * ==========================
 * CSS animation styles
 * 
 * .slide.left and .slide.right set-up
 * the to-be-animated slide so that it can slide
 * into view. For example, a slide that is about 
 * to slide in from the right will:
 * 1. Be positioned to the right of the viewport (right:-100%)
 * 2. Slide in when the style is superseded with a more specific style (right:0%)
 *
 */
.slide.left{
	left:-100%;
	right:0;
}

.slide.right{
	right:-100%;
	left: auto;
}

.transition .slide.left{left:0%}
.transition .slide.right{right:0%}

/**
 * The following classes slide the previously active
 * slide out of view before positioning behind the 
 * currently active slide
 *
 */
.transition .slide.shift-right{right: 100%;left:auto}
.transition .slide.shift-left{left: 100%;right:auto}

/**
 * This sets the CSS properties that will animate. We set the
 * transition-duration property dynamically via JS.
 * We use the browser's default transition-timing-function
 * for simplicity's sake
 * 
 * It is important to note that we are using CodePen's inbuilt
 * CSS3 property prefixer. For your own projects, you will need
 * to prefix the transition and transform properties here to ensure
 * reliable support across browsers
 *
 */
.transition .slide{
	transition-property: right, left, margin;
}

/**
 * ==========================
 * Indicators
 *
 */
.indicators{
  width:100%;
  position: absolute;
  bottom:0;
  z-index: 4;
  padding:0 0 36px;
  text-align: center;
}

.indicators li{
	width: 8px;
	height: 8px;
	display: inline-block;
	margin: 5px;
	background: #fff;
	list-style-type: none;
	border-radius: 50%;
  	cursor:pointer;
  	transition:background 0.3s ease-out;
  	border: 1px solid #fff;
}

.indicators li.active{background:#000; border: 2px solid #fff;}

.indicators li:hover{background-color:#fff }

/**
 * ==========================
 * Arrows 
 *
 */
.arrow{
  width: 40px;
  height:85px; 
  position:absolute;
  top:45%;
  z-index:5;
  cursor:pointer;
  transition:border-color 0.3s ease-out;
}

.arrow-left{
  left:150px;
  background: url(/assets/images/arrow-sprite.png) no-repeat;
  background-size: 80px auto;
  background-position: 0;
  transition: background 0.5s;
}

.arrow-right{
  right:150px;
  background: url(/assets/images/arrow-sprite.png) no-repeat;
  background-size: 80px auto;
  background-position: -41px 0;
  transition: background 0.5s;
}
.arrow-left:hover{
  background: url(/assets/images/arrow-hover-sprite.png) no-repeat;
  background-size: 80px auto;
  background-position:0;
}
.arrow-right:hover{
  background: url(/assets/images/arrow-hover-sprite.png) no-repeat;
  background-size: 80px auto;
  background-position: -41px 0;

}


/**
 * ==========================
 * For demo purposes only
 * 
 * Please note that the styles below are used
 * for the purposes of this demo only. There is no need
 * to use these in any of your own projects
 *
 */
.slide{
	text-align:center;
	padding-top:100px;
	background-size:cover;
}

#main-slide h1{
	width:auto;
  	height:100px;
	margin:auto;
  	line-height:1.2;
	color:#000;
	font-size:2.5em;
}

#main-slide h1 span {
	font-weight: 600;
}

#main-slide p {
	margin:10px !important;
	font-size:18px;
}

.slide.ch1 p span {
	background:#4ebd56; 
	color:#fff;
}

.slide.ch1 div{
	max-width: 1000px;
	height: 100%;
	margin: 0 auto;
	background-image:url(/assets/images/slide-img1-2.png);
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
 }

.slide.ch2{
	background-image:url(/assets/images/slide-img2-2.jpg);
	background-position:  right top;
	background-size: cover;
	background-repeat: no-repeat;
}

.slide.ch3{
	background-image:url(/assets/images/slide-img3-2.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
 }

  /* 모바일 Device : 0 ~ 640 */
}
@media all and (max-width: 640px){
	.carousel{
	padding-top: 100%;
	}

	.slide{
		padding-top:30px !important;
	}

    .slide.ch1{
		background-image:url(/assets/images/slide-img1.jpg);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
 	}
	.slide.ch2{
		background-image:url(/assets/images/slide-img2.jpg);
		background-position: right;
		background-size: cover;
		background-repeat: no-repeat;
 	}
 	.slide.ch3{
		background-image:url(/assets/images/slide-img3-2.jpg);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
 	}

 	#main-slide h1{
		width:90% !important;
		height:40px !important;
		padding:20px 0 !important;
		margin:auto;
		line-height:1.2 !important;
		color:#000;
		font-size:1.8em !important;
	}
    .arrow-left{
      	left: 5% !important;
	  	background-size: 40px auto !important;
	}
	.arrow-right{
		right: 5%;
	  	background-size: 40px auto !important;
	}
	.arrow-left:hover{
	  	background-size: 40px auto !important;
	}
	.arrow-right:hover{
	  	background-size: 40px auto !important;
	}
	.arrow{
	  	width: 20px;
		height: 42px;
		top:83%;
	}

	.indicators{
		padding-bottom:10%;

	}
}


/* Tablet Device : 641 ~ 768 */
@media all and (min-width:641px){
    .arrow{
	  	width: 40px;
		height: 84px;
		top:45%;
	}
    .arrow-left{
      	left: 5%;
	  	background-size: 80px auto;
		}
	.arrow-right{
		right: 5%;
	  	background-size: 80px auto;
	  	background-position: -41px 0;
	}
}

/* Desktop Device : 1024 이상 */
@media all and (min-width:1024px){

}
/* Desktop Device : 1024 이상 */
@media all and (min-width:1024px){
     #container {
        width: 1000px;
        clear:both;
    }

    #submenu-container {
        display: block;
    }

 
}
 
 /* 모바일 Device : 0 ~ 768 */
@media all and (max-width: 1023px){

    #container {
        width: 100%;
        clear:both;
        overflow: hidden;
        padding:0;
    }

    header {
        height: 60px;
    }
    
    header ul {
        float: none;
        display: none;
    }
    header ul li {
        float: none;
    }

    h1 img {
        width: 170px;
        padding: 12px 0 0 10px;
    }
    
    header h1 {
        width: 170px;
    } 
    .boards h4 {
        font-size: 24px;
        font-weight: 600;
        padding: 10px 0 10px 10px;
     }

    h5 {
        font-size: 18px;
        font-weight: 600;
        display: block;
        padding: 0 0 0 5px;
        margin: 20px 10px 5px 5px;
        clear: both;
    }

    h6 {
        font-size: 16px;
        padding-left: 10px;
    }
    
    .br {
        display: block;
    }

    .br2 {
        display: none;
    }

    #m-menu {
        display: block;
        float: right;
        padding:10px 10px 0;
        cursor: pointer;
    }
    #m-menu img {
        width: 35px;
    }

    #m-submenu {
        display: block;
        position: absolute;
        right: 20px;
        top:65px;
        padding:10px 0;
        cursor: pointer;
    }
    
    #sitemap-area {
        width: 100%;
        float: none;

        position: absolute;
        top:64px;
        left: 0;
        z-index: 200;
        background: #000;
        overflow: hidden;
    }

    .sitemap-list {
        width: 100%;
        padding: 0 15px 0 0;
        float:none;
        line-height: 1.5;

    }

    .sitemap-list a {
        color:#fff;
    }

    .sitemap-list h2 {
        font-size: 16px;
        font-weight: 500;
        padding:10px 0 10px 20px;
    }

    .sitemap-list ul {
        display:none;
    }

    .sitemap-list ul li {
        width: 100% !important;
        background: #343434;
        padding: 5px 0 5px 20px;
        border-top: 1px solid #454545;
        border-bottom: 1px solid #454545;
    }

    .sitemap-list ul li a {
        width: 100%;
        display: block;
        font-size: 14px;
    }

    .products {
        width: 100%;
    }

    .products h2{
        padding: 40px 0 30px 10px;
    }

    .products li{
        width: 50%;
        float: left;
        display: block;
    }

    .products .last {
        width: 100%
    }
    
    .products a {
        width: 100%;
        display: block;
    }

    .boards {
        width: 100%;
    }

    .boards li {
        height: auto;
        padding-top: 0;
        float: none;
    }
    .boards h5 {
        width: 100%;
        padding:0;
        border-bottom: 1px solid #fff;
    }
    .boards h5 a{
        display: block;
        width: 100%;
        font-size: 24px;
        padding:10px 0  10px 10px;
    }
    .boards li div {
        display: none;
    } 

    .btn-board-list {
        display:inline-block; 
        float: none;
    }

    .cs {
        width: 100%;
        height: auto;
        background:#f2f2f2;
    }
    .cs h2 {
        padding:0;
        border-bottom: 1px solid #fff;
    }
    .cs h2 a {
        width: 100%;
        display: block;
        padding:10px 0 10px 10px;
    }
    .cs ul li {
        display: none;
    }

    #sitemap-area {
        display: none;
    } 
    
    .copyright {
        text-align: center;
        clear: both;
        border-top: 1px solid #343434;
        padding: 35px 0 75px;
    }

    #extra-btn-area {
        width: 155px;
        padding: 30px 0;
        float: none;
        margin:0 auto;
    }

    
    .lang-selector span {
        display: none;
    }
    .m-lang-selector {
        display: block;
    }

    #wide-container {
        height: auto;
        background: #f2f2f2;
        clear: both;
    }

    .list-center {
        margin:0;
    }
    .copyright .br {
        display: block;
    }

    

    .carousel{
    padding-top: 100%;
    }

    .slide.ch1{

    }
    .slide.ch2{
    background-image:url(/assets/images/m-slide-img2.jpg);
    background-position: right top;
    background-size: cover;
    background-repeat: no-repeat;
    }
    .slide.ch3{
    background-image:url(/assets/images/m-slide-img3-2.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    }
    .products li {
        height: 310px;
    }
    .products a {
        padding-top: 170px; 
    }

    .product01 a {
        background: url(/assets/images/icon-products01.png) no-repeat;
        background-size: cover;
        background-position: center top;
    }
    .product02 a {
        background: url(/assets/images/icon-products02.png) no-repeat;
        background-size: cover;
        background-position: center top;
    }
    .product02 h4 {
        margin-top:-5px;
    }
    .product03 a {
        background: url(/assets/images/icon-products03.png) no-repeat;
        background-size: cover;
        background-position: center top;
    }
    .product04 a {
        background: url(/assets/images/icon-products04.png) no-repeat;
        background-size: cover;
        background-position: center top;
    }
    .product05 a {
        background: url(/assets/images/icon-products05.png) no-repeat;
        background-size: cover;
        background-position: center top;
    }
    .product06 a {
        background: url(/assets/images/icon-products06.png) no-repeat;
        background-size: cover;
        background-position: center top;
    }
    .product07 a {
        background: url(/assets/images/icon-products07.png) no-repeat;
        background-size: cover;
        background-position: center top;
    }
    .product08 a {
        background: url(/assets/images/icon-products08.png) no-repeat;
        background-size: cover;
        background-position: center top;
    }

    .product01:hover a {
        background: url(/assets/images/icon-products01-hover.png);
        background-size: cover;
        background-position: center top;
    }
    .product02:hover a {
        background: url(/assets/images/icon-products02-hover.png);
        background-size: cover;
        background-position: center top;
    }
    .product03:hover a {
        background: url(/assets/images/icon-products03-hover.png);
        background-size: cover;
        background-position: center top;
    }
    .product04:hover a {
        background: url(/assets/images/icon-products04-hover.png);
        background-size: cover;
        background-position: center top;
    }
    .product05:hover a {
        background: url(/assets/images/icon-products05-hover.png);
        background-size: cover;
        background-position: center top;
    }
    .product06:hover a {
        background: url(/assets/images/icon-products06-hover.png);
        background-size: cover;
        background-position: center top;
    }
    .product07:hover a {
        background: url(/assets/images/icon-products07-hover.png);
        background-size: cover;
        background-position: center top;
    }
    .product08:hover a {
        background: url(/assets/images/icon-products08-hover.png);
        background-size: cover;
        background-position: center top;
    }

    #main-slide h1{
        width:80%;
        height:40px;
        padding:20px 0;
        margin:auto;
        line-height:1.2;
        color:#000;
        font-size:1.5em;
    }
    #main-slide .ch3 h1 {
        color:#000 ;
    }
    #main-slide .ch3 p {
        display: none;

    }

    .slide {
        padding-top:8%; 
    }   

    .slide p {
        font-size:1em !important; 
    }   

    .slide.ch1 div {
        background-position: center bottom;
        background-size: contain;    
    }

    .slide.ch2 p {
        padding-top: 20px;  
    }

    #main-slide {
        background-size: cover;
    }

    .arrow-left{
        left: 5% !important;
        background-size: 40px auto !important;
    }
    .arrow-right{
        right: 5%;
        background-size: 40px auto !important;
        background-position: -21px 0;
    }
    .arrow-left:hover{
        background-size: 40px auto !important;
    }
    .arrow-right:hover{
        background-size: 40px auto !important;
        background-position: -21px 0;
    }
    .arrow{
        width: 20px;
        height: 42px;
        top:83%;
    }

    .indicators{
        padding-bottom:7%;
    }
    
    .title {
        width: 85%;
        margin: 0 auto;
        padding: 25px 0 25px;
    }

    .cont-visual {
        width: 100%;
        height: auto;
    }
    
    .ceo .ment {
    display: none;
    }

    span.ceo-name {
        width: 200px;
        display:block; 
        text-align: center; 
        font-weight:600; 
        padding:0;
        margin: 0 auto 40px;
    }

    .tabmenu li{
        float:left;
        width: 100%;
        background: #f2f2f2;
        cursor: pointer;
        font-size: 1em;
        font-weight: 600;
    }
    .tabmenu li div {
        padding: 10px;
    }
    .tabmenu li span{
        width: auto;
        font-size: 1em !important; 
        font-weight: 600;
        display: block !important;
    }

    .tabmenu li.active div{
        padding: 10px;
        background: #4ebd56;
        border: none;
        color:#fff;
        cursor: pointer;
    }

    .hisbox li{
        display: block;
        padding:5px 10px;
        font-size:1em;
        border-bottom: 1px solid #dedede;
    }
    
    .hisbox span{
        font-weight: 600;
        float: left;
    }
    
    .hisbox p {
        display: block;
        padding: 0 0 0 25%;
        margin: 0;
    }

    .w50 {width: 100%; }
    .w50 span {display: block; padding: 10px 20px;}

    .condition-info {
        height: 129px;
        font-size: 1em;
    }

    
    .condition-info li {
        height: 85px;
    }

    .condition-info li span {
        font-size: 12px !important;
        padding-top: 5px !important;
        display: block;
    }

    .condition {
        height: 180px;
        padding:0;
    }

    .condition li {
        height: 90px;
        padding:20px 0 0 0;
        background: #f2f2f2;
    }

    .condition span {
        font-size: 14px !important;
        padding-top: 15px;
    }
    #visual-container{
        height: 44px;
        background: none !important;
        border-bottom: 1px solid #e6e6e6;
    }
    #visual-container h2 {
        padding: 10px 0 ;
        text-shadow:none;
        font-weight: 300;
        font-size: 18px !important;
        text-align: left;
        color: #323232 !important;
        background: rgba(0,0,0,0);
        cursor: pointer;
    }

    #visual-container br {
        display: none;
    }

    #visual-container span {
        font-size: 18px !important;
        padding: 0 5px 0 10px;
        text-shadow:none;
        font-weight: 400;
        font-size: 18px !important;
    }

    #submenu-container {
        display: none;
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    #submenu-container ul {
        width: 100%;
    }
    
    #submenu-container li {
        width: 100% !important;
        height: 35px;
        background: #f2f2f2;
        font-weight: 600;
        text-align: left;
        float: none;
        transition:width 0.1s;
        border-bottom: 1px solid #e6e6e6;
    }
    #submenu-container a{
        height: 100%;
        padding-left: 10px;
        line-height: 35px;
        text-align: left;
        font-weight: 600;
        display: block !important;
        transition:width 0.1s;
    }

    #submenu-container li a:hover{
        width: 100%;
        height: 35px;
        text-align: left;
        font-weight: 600;
        display: block;
        border-bottom: none;
    }

    #submenu-container li a.selected{
        width: 100%;
        height: 35px;
        text-align: left;
        font-weight: 600;
        display: block;
        border: none;
        border-left: 4px solid #323232;
    }

    .product-info {
        width: auto;
        height: auto; 
        float: none;
        border-right: none;
        border-bottom: 1px solid #dedede;
        padding:20px 10px;
    }

    .product-info h6 {
        font-size: 21px;
    }
    .product-info span {
        padding-top: 10px;
        color: #999;
    }

    .product-info h6 {
        line-height: 1.5em;
        padding: 1px 0 0 0;
    }
    
    .product-img {
        width:100%;
        padding:30px 0;
    }
    
    .product-list {
        width: 100%;
        height: 50%;
        border-top: 1px solid #dedede;
        padding-top: 5px;
        margin:0 10px 30px 0;
        float: right;
    }

    .product-list li{
        display: block;
        padding: 0 10px 0 20px;        
    }
    
    .product-list span {
        display: inline;
        width: auto;
        min-width: auto;
        font-weight: bold;
        padding-right: 0;
    }

    .product1 {padding-top: 10px;}
    .product2 {padding-top: 10px;}
    .product3 {padding-top: 10px;}
    .product4 {padding-top: 10px;}
    .board-display {
        display: none;
    }

    .board-container {
        margin: 10px 10px 40px;
        text-align: center;

    }

    .contbox {
        font-size: 0.9em;
    }

    .board-container table {
        width: 100%;
        font-size: 0.9em;
    }
    
    .board-container {

    }

    #content img{
        width: 100% !important;
        height: auto;
    }

    .mail-container {
        border:1px solid #e6e6e6;
        padding:10px 10px;
        margin-bottom: 80px;
        text-align: center;
    }

    .mail-container .table-label {
        display: none;
    }
    .phonebox {
        margin-bottom: 40px;
    }
    .phonebox table{
        width: 100%;
        text-align: center;
    }
    .head-number {
        padding:15px 10px 30px;
    }


    .head-number span {
        display: block;
        padding: 5px 0 0 0;
    }

    .head-number .br {
        display: block;
    }
    .bar {
        display: none;
    }

    #map_view {
        height: 350px !important;
    }


    .certification-container li {
        float: none;
        width: 100%;
        margin-bottom: 40px;
    }
    
    .stock-container li a{
        padding: 10px 15px;
    }
    
    .stock-container li a:hover{
        padding: 10px 15px;
    }

    .qna-container {
        margin: 10px 10px 40px;
    }
    
    .qna-container dt {
        padding:10px 15px;
    }
    
    .qna-container dt:hover {
        padding:10px 15px;
    }

    .qna-container dd {
        margin: 0px;
        padding:5px 15px;
    }

    .mail-container table td:before {
        content: attr(data-th);
        display: block;
        font-weight: 600;
        text-align: left;
    }


    .condition-container {
        width: 95%;
        margin: 0 auto;
    }
    .brocher-box {
        width: 50%;
        margin-bottom: 40px;
    }
    .brocher-table {
        width: 100%;
        background: none;
    }

    .talent li {
        width: 100%;
        float: left;
        text-align: center;
        margin-bottom: 0px;
    }
    .motto ul{
        background: url(/assets/images/motto-bg.png) ;
        background-size: cover;
    } 
    .motto li{
        width: 100%; 
        float:none;
        padding:10px 0;
        background: none;
    }

    .principle ul {
        background: url(/assets/images/motto-bg.png) ;
        background-size: cover;
    }

    .principle li{
        width: 100%; 
        float:none;
        padding:10px 0;
        background:none;
    }
    .recruit1 {padding-top:10px;}
    .recruit2 {padding-top:10px;}
    .recruit3 {padding-top:10px;}

    .recruit2 h6{
        height: 0px;
        padding-left: 0;
    }
    .recruit2 dl {margin: 0;padding-bottom: 10px;}
    .recruit2 div{margin: 0;}
    .recruit2 dt {
        width: 100%;
        float: none;
        display:block;
        text-align: center;
    }
    .recruit2 dt img {
        margin: 0 auto;
    }
    .recruit2 .w50 {
        padding:0;
    } 
    .recruit2 dd {
        width: 100%;
        margin: 0;
        padding-bottom: 10px;
        float: none;
        display: inline-block;
        text-align: center;
    }
    .recruit3 table {
        width: 95%;
        margin:0 10px;
    }
    .recruit3 table thead {display: none;}
    .recruit3 table td:before {
        content: attr(data-th);
        width: 25%;
        display: inline-block;
        font-weight: 600;
        text-align: left;
    }
    .recruit3 table td {
        width: auto;
        height: auto;
        display: block;
        text-align: left;
        border: none;
        padding: 0px 5px;
    }
    .recruit3 table tbody tr {
        display: block;
        margin-bottom: 20px;
        padding: 10px 0;
        border:1px solid #e6e6e6;
    }

    .video-container {
        text-align: center;
    }
    
    .video {
        margin: 0 10px; 
        height: 200px;
        background: #323232;
        color: #fff;
    }
    
    .btn-scrolltop {
        display: none;
        position: fixed;
        right: 5%;
        bottom: 5%;
        z-index: 300;
        transition:display 0.5s;
        cursor: pointer;
    }

    /* DIM -LAYER */
    .dim-layer {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0%;
        left:50%;
        margin-left: -50%;
        text-align: center;
        padding:40px 0 0;
        background-color: #fff;
    }
    .dim-layer .dim-close {
        width: 30px;
        position: absolute;
        left: 50%;
        bottom: 15%;
        margin-left: -15px;
    }
    .dim-layer img {
        max-width: 100%;
        cursor: pointer;
    }

    .dim-layer-for-br {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0%;
        left:50%;
        margin-left: -50%;
        text-align: center;
        padding:40px 0 0;
        background-color: #fff;
    }
    .dim-layer-for-br h2 {
        font-size: 18px;
        text-align: center;    
        padding-bottom:30px;
    }
    .dim-layer-for-br .dim-close {
        width: 30px;
        position: fixed;
        right: 0px;
        top: 0px;
        margin: 0;
    }
    .dim-layer-for-br div img {
        max-width: 80%;
        cursor: pointer;
    }

    .blind-rivet-by-size {
        width: 80%;
        background: #000;
        color:#fff;
        margin: 0 auto 20px;
        padding: 10px 20px;
        cursor: pointer;
        text-align: center;
    }

    .dim-layer-for-br .view-box {
        padding-top: 0;
    }

    .box-shadow2 {
        display: none;
    }


    .dim-layer-for-br li{
        width: 100%;
        float: none;
        height: 60px;
        background: #fff;
    }


}

/* Tablet Device : 641 ~ 1000 */
@media all and (min-width: 641px) and (max-width: 1023px){
    #container {
        width: 100%;
        clear:both;
    }

    header #gnb li a {
        width: 100px;
    }

    header ul {
        float: none;
        display: none;
    }
    header ul li {
        float: none;
    }

    .lang-selector {
        position: absolute;
        right: 50px;
    }
    
    .carousel {
        padding-top: 610px;
    }

    #main-slide h1{
        width:auto;
        height:100px;
        margin:auto;
        line-height:1.2;
        color:#000;
        font-size:2.5em;
    }

    .products {
        width:100%;
    }
    .products li{
        width: 25%;
        float: left;
        display: block;
    }
    .products a {
        width: 100%;
        display: block;
    }
    
    .boards {
        width: 100%;
    }

    .boards li {
        height: auto;
        padding-top: 0;
        float: none;
    }
    .boards h5 {
        width: 100%;
        padding:0;
        border-bottom: 1px solid #fff;
    }
    .boards h5 a{
        display: block;
        width: 100%;
        font-size: 24px;
        padding:10px 0  10px 10px;
    }
    .boards li div {
        display: none;
    } 

    .btn-board-list {
        display:inline-block; 
        float: none;
    }

    .products h2 {
        padding:70px 2.5% 30px; 
    }

    h6 {
        width: 100%;
        height: 35px;
        overflow: hidden;
        padding-left: 10px;
    }
    
    .list-box {
        height: auto;
    }

    /*회사소개*/
    .hisbox p {
        padding: 0 0 0 10%;
    }

    /*고객지원*/
    .certification-container li {
        float: left;
        width: 50%;
        margin-bottom: 80px;
        text-align: center;
    }

    .dim-layer img {
        max-width: 50%;
        cursor: pointer;
    }

    /*홍보*/
    .talent li {
        width: 33.33%;
        float: left;
        text-align: center;
        color: #000;
        font-weight: 300;
        margin-bottom: 20px;
    }

    .recruit2 h6 {
        height: 10px;
    }
}