﻿



/* === 메인슬라이드 === */
.slider {
	margin: 160px auto 0;
	max-width:100%;
	position:relative;
	z-index:1;
}
.slide_viewer {
	/* height: 840px; */
	height: 700px; /* 20190104 : 선차장 요구사항 반영 */
	overflow: hidden;
	position: relative;
}
.slide_group {
	height: 100%;
	position: relative;
	width: 100%;
}
.slide {	
	display: none;
	height: 100%;
	position: absolute;
	width: 100%;
}
.slide:first-child {
	display: block;
}
.slide:nth-of-type(1) {
	background: url('../image/main_banner01.jpg') no-repeat;
}
.slide:nth-of-type(2) {
	background: url('../image/main_banner02.jpg') no-repeat;
}
.slide_buttons {
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
	display:none;
}
a.slide_btn {
	color: #474544;
	font-size: 42px;
	margin: 0 0.175em;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.slide_btn.active, .slide_btn:hover {
	color: #428CC6;
	cursor: pointer;
}
.directional_nav {
	/* height: 840px; */
	margin: 0 auto;
	width:100%;
	position: relative;
	top: -415px;
	z-index:2;
}
.previous_btn {
	bottom: 0;
	left: 90px;
	margin: auto;
	position: absolute;
	top: 0;
}
.next_btn {
	bottom: 0;
	margin: auto;
	position: absolute;
	right: 90px;
	top: 0;
}
.previous_btn, .next_btn {
	cursor: pointer;
	/* height: 65px;  */
	/* 20190104 : 선차장 요구사항 반영 */
	opacity: 0.6;
	-webkit-transition: opacity 0.4s ease-in-out;
	-moz-transition: opacity 0.4s ease-in-out;
	-ms-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
	width: 65px;
}
.previous_btn svg, .next_btn svg{width:50px; /*height:50px;*/ height:100px; /* 20190104 : 선차장 요구사항 반영 */ }
.previous_btn svg path:first-of-type, .next_btn svg path:first-of-type{fill:rgba(255,255,255,.3);}
.previous_btn svg path:nth-of-type(2), .next_btn svg path:nth-of-type(2){ /*fill:rgba(255,255,255); 20190104 : 선차장 요구사항 반영 */ fill:rgb(140, 139, 148);}
.previous_btn:hover, .next_btn:hover {
	opacity: 1;
}
.breadcrumb a{
	color: #fff;
}
.previous_btn:hover svg path:first-of-type, .next_btn:hover svg path:first-of-type{fill:rgba(255,255,255);}

/* 메인슬라이드 - 텍스트영역 */
.slide .txt_area{
	color:#fff;
	width: 880px;
	height: 840px;
	/*background-color: rgba(37,37,37,.1);
	background-image: -webkit-linear-gradient(bottom, rgba(31,32,138,.4), rgba(255,134,205,.1));
	background-image: -moz-linear-gradient(bottom, rgba(31,32,138,.4), rgba(255,134,205,.1));
	background-image: -o-linear-gradient(bottom, rgba(31,32,138,.4), rgba(255,134,205,.1));
	background-image: -ms-linear-gradient(bottom, rgba(31,32,138,.4), rgba(255,134,205,.1));
	background-image: linear-gradient(to top, rgba(31,32,138,.4), rgba(255,134,205,.1));*/
	position:relative;
}
.slide .txt_area .txt_box{
	position:absolute;
	top:50%; left:380px;
	transform:translateY(-50%)
}
.slide .txt_area .txt_box .slide_tit{
	font-size:50px;
	font-weight:400;
	line-height:50px;
	margin-bottom:40px
}
.slide .txt_area .txt_box .slide_stit{
	font-size:20px;
	font-weight:300;
	line-height:30px;
	margin-bottom:80px;
}
.slide .txt_area .txt_box .slide_btn{
	font-size:16px;
	font-weight:400;
	width:170px;
	height:60px;
	line-height:60px;
	text-align:center;
	border:1px solid #b7b7b7;
	border-radius:5px;
}

/* MSDS, 시험성적서, 규격서 - search 영역 */
.search{
	position:relative;
	top:50px;
	z-index:3;
	margin-bottom:100px
}
.search ul li{
	display:inline-block;
	vertical-align:top;
	width:396px;
	height:230px;
	background-color:#000151;
	margin-right:15px;
	position:relative;
	cursor:pointer
}
.search ul li:last-child{
	margin-right:0
}
.search ul li .search_off{
	position:absolute;
	top:50%; left:50%;
	transform:translate(-50%, -50%);
	text-align:center;
	width:100%; height:100%;
	background-color:rgba(255,255,255,0.1);
}
.search ul li .search_off .off_box{
	position:absolute;
	top:50%;left:50%;
	transform:translate(-50%, -50%);
}
.search ul li .search_off img{
	margin-bottom:10px
}
.search ul li .search_off .off_box p{
	color:#fff
}
.search ul li .search_on{
	width:100%; height:100%;
	text-align:center;
	padding:35px 30px 50px 30px;
	position:relative;
	background-color: #000151;
	
	/* 초기값 */
	display:none;
}
.search ul li .search_on .on_tit{
	margin-bottom:25px
}
.search ul li .search_on .on_tit img,
.search ul li .search_on .on_tit span{
	display:inline-block;
	vertical-align:middle
}
.search ul li .search_on .on_tit span{
	font-size:21px;
	color:#fff;
	padding-left:10px
}
.search ul li .search_on .link_box{
	position:absolute;
	top:50%; left:50%;
	transform:translate(-50%,-50%)
}
.search ul li .search_on .link_box a{
	display:block;
	width:340px; height:45px;
	background-color:#fff;
	color:#fff;
	line-height:45px
}
.search ul li .search_on .link_box a img{
	margin-right:10px;
	position:relative;
	top:2px
}
.search ul li .search_on .link_box a span{
	color:#282828
}
.search ul li .search_on .link_box .search_box{
	margin-bottom:10px
}
.search ul li .search_on .link_box .search_box select{
	width:100px;
	height:40px;
	border:1px solid #cccccc;
	margin-right:10px
} 
.search ul li .search_on .link_box .search_box input{
	height:40px;
	border:1px solid #cccccc;
	width:340px;
	padding:10px;
	box-sizing:border-box
}
.search ul li:first-child .search_on .link_box .search_box input{
	width:227px
}

#spec_keyword {
	width:227px
}

#msds_keyword {
	width:340px
}




/* business 영역 */
.business{
	overflow:hidden
}
.business>div{
	float:left;
	margin-right:10px
}
.business .business_two{
	position:relative;
	top:-50px
}
.business .business_one ul li:nth-child(1){height:450px}
.business .business_one ul li:nth-child(2){height:490px}
.business .business_two ul li:nth-child(1){height:390px}
.business .business_two ul li:nth-child(2){height:350px}
.business .business_two ul li:nth-child(3){height:350px}
.business .business_three ul li:nth-child(1){height:410px}
.business .business_three ul li:nth-child(2){height:480px}
.business>div>ul li{

	position:relative;
	margin-bottom:10px;
	overflow:hidden;
}
.business>div>ul li img{
	height:100%
}
.business>div>ul li .text_box{
	position:absolute;
	bottom:0; left:0;
	width:100%; height:200px;
	background-color:rgba(0,0,0,0.5);
	color:#fff;
	transition:all 0.5s;
}
.business>div>ul li:hover .text_box{
	height:100%
}
.business>div>ul li .text_box dl{
	position:absolute;
	bottom:-10px; left:30px;
	transition:all 0.5s;
    right: 30px;
}
.business>div>ul li:hover .text_box dl{
	bottom:80px;
}
.business>div>ul li .text_box dl dt{
	font-size:25px;
	font-weight:400;
	margin-bottom:8px
}
.business>div>ul li .text_box dl dd{
	font-size:14px;
	font-weight:300
}
.business>div>ul li .text_box .more{
	border-bottom:1px solid #ffa200;
	margin-top:30px;
	opacity:0;
	transition:all 0.3s;
	display:inline-block;
}
.business>div>ul li:hover .text_box .more{
	opacity:1;
}
.business .right_text{
	float:right;
	position:relative;
	top:0px
}

/* duksan_news 영역 */
.duksan_news{
	background:#f2f2f2;
	padding:10px 0 100px;
}
.duksan_news h4{
	text-align:center;
	font-size:150px;
	color:#e4e4e4;
	cursor:default;
}
.duksan_news .news{
	font-size:20px;
	color:#959595;
}
.duksan_news .news img{
	margin-left:20px
}
.duksan_news .news::after{
	display:block;
	content:'';
	width:50px; height:1px;
	background-color:#1f208a;
	margin:5px 0 40px;
}
.duksan_news ul li{
	display:inline-block;
	width:45%;
    margin-bottom: 40px;/* 영업부 요청사항-메인페이지 덕산뉴스 추가(20190226) */
}
.duksan_news ul li:first-child{
	/*margin-right:4%  영업부 요청사항-메인페이지 덕산뉴스 추가(20190226)*/
}

.duksan_news ul li:nth-child(2n-1){
	margin-right: 8%;	/* 영업부 요청사항-메인페이지 덕산뉴스 추가(20190226) */
}
.duksan_news ul li dl dt{
	font-size:19px;
	color:#636363;
	margin-bottom:15px
}

.duksan_news ul li dl dt:hover{
	color:#bdbdbd;
}
.duksan_news ul li dl dd{
	font-size:13px;
	color:#707070;
	/*margin-bottom:40px;  영업부 요청사항-메인페이지 덕산뉴스 추가(20190226)*/
	margin-bottom:20px;
	line-height:26px
}
.duksan_news ul li dl p{
	font-size:14px;
	color:#b7b7b7
}

/* help 영역 */
.help{
	background-color:#363636;
	padding:40px 0
}
.help ul li{
	display:inline-block;
	/*margin-right:94px*/
	margin-right:84px;
}
.help p{
	display:inline-block
}
.help .tit{
	font-size:19px;
	color:#fff;
	margin-right:20px
}
.help .desc{
	font-size:20px;
	font-weight:700;
	color:#a1a1a1
}

/* footer 영역 */
footer{
	background-color:#464646;
	float: left;
	width: 100%;
}
footer .info ul{
	padding:13px 0
}
footer .info ul li{
	display:inline-block;
	font-size:13px;
	padding:0 20px;
	background:url('../image/info_line.jpg') no-repeat center left
}
footer .info ul li:first-child{
	background-image:none;
	padding-left:0
}
footer .info ul li a{
	color:#d7d7d7
}
footer .line{
	text-indent:-999px;
	width:100%; height:1px;
	background-color:#6f6f6f
}
footer .foot_down{
	overflow:hidden;
	padding:60px 0 35px 0;
	color:#b7b7b7
}
footer .foot_logo{
	float:left;
	margin-right:100px
}
footer .address{
	float:left
}
footer .address li:last-child{
	color:#757575
}
footer .right{
	float:right;
	text-align:right;
	color:#898989
}
footer .right .familysite{
	display:inline-block;
	border:1px solid #898989;
	padding: 10px 76px 10px 18px;
	margin-bottom:20px;
	background:url(../image/familysite_down.png) no-repeat 130px center
}


