@charset "utf-8";
#contents img{max-width:100%}
#contents .btn_page02 { position:absolute; right:0; top:16%; }
#contents .btn_page02 li { float:left; line-height:15px; }
#contents .btn_page02 li a { display:block; text-indent:-5000px; transition:all .3s ease; background-position:center; }
#contents .btn_page02 li.prev a { background:url(/safety/images/main/btn_prev.gif) no-repeat; }
#contents .btn_page02 li.next a { background:url(/safety/images/main/btn_next.gif) no-repeat; }
#contents .btn_page02 li.prev a:hover { background:url(/safety/images/main/btn_prev_hover.gif) no-repeat; }
#contents .btn_page02 li.next a:hover { background:url(/safety/images/main/btn_next_hover.gif) no-repeat; }

.visual {position:relative; width:100%; height:500px; margin-bottom:20px; background:url(/safety/images/main/visual.jpg) center top no-repeat;}
.visual .slogan {position:absolute; top:15%;}
.visual .visual_quick {position:absolute; top:50%; overflow:hidden;}
.visual .visual_quick li {float:left; width:32.3%; margin:0 .5%; text-align:center;}
.visual .visual_quick a {display:block; overflow:hidden; width:133px; height:133px; margin:0 auto; padding:7px; background-color:rgba(225,225,225,.5); background-position:center 35px; background-repeat:no-repeat; border-radius:140px; font-weight:bold; color:#000;}
.visual .visual_quick li.visual_quick01 a {background-image:url(/safety/images/main/visual_quick01_off.png);}
.visual .visual_quick li.visual_quick02 a {background-image:url(/safety/images/main/visual_quick02_off.png);}
.visual .visual_quick li.visual_quick03 a {background-image:url(/safety/images/main/visual_quick03_off.png);}
.visual .visual_quick a span {line-height:180px;}
.visual .visual_quick a:hover {padding:0; border:7px solid #106bbf; background-color:#fff; background-position:center 28px;}
.visual .visual_quick li.visual_quick01 a:hover {background-image:url(/safety/images/main/visual_quick01_on.png);}
.visual .visual_quick li.visual_quick02 a:hover {background-image:url(/safety/images/main/visual_quick02_on.png);}
.visual .visual_quick li.visual_quick03 a:hover {background-image:url(/safety/images/main/visual_quick03_on.png);}
.board {position:relative;}
.board h3 {position:absolute; top:0;}
.board .notice h3 {left:0;}
.board .data h3 {left:97px;}
.board h3 a {display:block; width:95px; padding-top:5px; padding-bottom:5px; border:1px solid #d1d0ce; font-weight:normal; text-align:center;}
.board h3.select a {border:1px solid #4b4b4b; background:#4b4b4b; font-weight:bold; color:#ffdd20;}
.board .con {display:none; padding-top:35px;}
.board .con ul {padding:18px 25px; border:1px solid #e5e5e5;}
.board .con li {position:relative;}
.board .con li:after {position:absolute; left:0; top:50%; width:3px; height:3px; margin-top:-1.5px; background:#5f5f5f; content:"";}
.board .con li a {overflow:hidden; display:block; padding-left:10px; font-size:14px; color:#222 ; letter-spacing:-0.5px; text-overflow:ellipsis; white-space:nowrap;}
.board .btn_more a {position:absolute; right:0; top:8px; display:block; padding-right:10px; background:url(/safety/images/main/btn_more.gif) right center no-repeat; font-size:13px; color:#878787;}

.quick { position:relative; }
.quick>div, .headquarters>div, .call>div, .act>div, .relate>div {padding:20px 30px; border:1px solid #e5e5e5;}
.quick>div h3, .headquarters>div h3, .call>div h3, .relate>div h3 {padding-bottom:20px; font-size:22px; color:#222;}
.quick ul {overflow:hidden;}
.quick li {float:left;}
.quick li a {display:block; padding:6px 0 6px 35px; font-weight:bold; letter-spacing:-.5px;}
.quick li.quick01 a {background:url(/safety/images/main/ic_quick01.gif) left center no-repeat;}
.quick li.quick02 a {background:url(/safety/images/main/ic_quick02.gif) left center no-repeat;}
.quick li.quick03 a {background:url(/safety/images/main/ic_quick03.gif) left center no-repeat;}
.quick li.quick04 a {background:url(/safety/images/main/ic_quick04.gif) left center no-repeat;}
.quick li.quick05 a {padding-left:40px; background:url(/safety/images/main/ic_quick05.gif) left center no-repeat;}
.quick li.quick06 a {padding-left:40px; background:url(/safety/images/main/ic_quick06.gif) left center no-repeat;}

.quick div.list ul { overflow:hidden; display:none; }
.quick div.list ul:first-child { display:block; }
.quick div.list ul li a { display:table-cell; vertical-align:middle; padding-left:40px; line-height:21px; font-size:14px; }
.quick div.list ul { height:73px; }
.quick div.list ul li.quick01 a {background:url(/safety/images/main/ic_quick01.gif) left center no-repeat;}
.quick div.list ul li.quick02 a {background:url(/safety/images/main/ic_quick02.gif) left center no-repeat;}
.quick div.list ul li.quick03 a {background:url(/safety/images/main/ic_quick03.gif) left center no-repeat;}
.quick div.list ul li.quick04 a {background:url(/safety/images/main/ic_quick04.gif) left center no-repeat;}
.quick div.list ul li.quick05 a {padding-left:40px; background:url(/safety/images/main/ic_quick05.gif) left center no-repeat;}
.quick div.list ul li.quick06 a {padding-left:40px; background:url(/safety/images/main/ic_quick06.gif) left center no-repeat;}
.quick div.list ul li.quick07 a {padding-left:40px; background:url(/safety/images/main/ic_quick07.gif) left center no-repeat;}
.quick div.list ul li.quick08 a {padding-left:40px; background:url(/safety/images/main/ic_quick08.gif) left center no-repeat;}
.quick div.list ul li a:hover { font-weight:bold; color:#263cb7; }
.headquarters>div {background:url(/safety/images/main/headquarters_bg.gif) 90% 80% no-repeat;}
.headquarters li {position:relative;}
.headquarters li:after {position:absolute; left:0; top:50%; width:3px; height:3px; margin-top:-1.5px; background:#5f5f5f; content:"";}
.headquarters li a {padding-left:10px; font-size:14px; font-weight:bold; color:#222 ; letter-spacing:-0.5px;}
.headquarters li a:hover {color:#3e70cf;}
.call {background:#fafafa url(/safety/images/main/call_bg.gif) 90% 20% no-repeat;}
.call p {display:block; font-weight:bold; color:#222;}
.call p span {display:block; font-size:30px; color:#017480; line-height:26px; letter-spacing:-2px;}
.call p.yeonsu {margin-top:10px; padding-top:10px; padding-bottom:5px; padding-left:55px; border-top:1px solid #c8c8c8; background:url(/safety/images/main/call_yeonsu.gif) left bottom no-repeat;}
.call p.yeonsu span {color:#df665b;}
.act div {overflow:hidden; background:url(/safety/images/main/act_bg.gif) 93% 8% no-repeat;}
.act h3 {font-size:22px; color:#222;}
.act p {padding-bottom:20px; font-weight:bold;}
.act li {float:left; width:25%; padding:5px 0;}
.act li.last {width:50%;}
.act li a {padding-left:20px; background:url(/safety/images/main/act_blet.gif) left 2px no-repeat;  font-weight:bold; color:#757575;}
.act li a:hover {color:#3e70cf;}
.relate select {width:75%; height:35px; margin-top:10px; border:1px solid #ddd; font-size:15px;}
.relate select#guLink, .relate  input.GuLink[type=button] {margin-top:0;}
.relate input[type=button] {width:20%; height:35px; margin-top:10px; margin-left:1%; border:1px solid #3e70cf; background:#3e70cf; font-size:15px; color:#fff;}

@media screen and (min-width:1900px){
	.visual {background-size:100%;}
}
@media screen and (max-width:1100px){
	.quick a {font-size:13px;}
}
@media screen and (max-width:980px){
	.visual {background-position:65% top;}
	.board .btn_more a {top:100%;}
	.headquarters>div, .call, .call p.yeonsu {background:none;}
	.call p.yeonsu {padding-left:0;}
	.act li {width:33.3%;}
	.quick div.list ul { height:100px; }
}
@media screen and (min-width:768px){
	#contents {overflow:hidden;}
	#contents>.wrapper>section {float:left;}
	.visual .visual_quick {width:500px;}
	.board, .call {width:25%; margin-right:2%;}
	.quick, .act {width:46%;}
	.quick li {width:33.3%;}
	.headquarters, .relate {width:25%; margin-left:2%; margin-bottom:25px;}
	.call, .act, .relate {margin-top:2%;}
}
@media screen and (max-width:767px){
	#contents>.wrapper {margin:0 2%;}
	#contents>.wrapper>section {width:100%; margin-bottom:2%;}
	#contents .btn_page02 li.prev a { margin-left:30px; }
	.visual {height:400px; background-position:left top;}
	.visual .slogan {width:90%; margin-left:5%;}
	.visual .visual_quick {width:100%;}
	.visual .visual_quick a {width:120px; height:120px;}
	.quick li {width:50%;}
	.board .btn_more a {top:3px;}
	.headquarters {margin-bottom:0;}
	.headquarters>div {background:url(/safety/images/main/safety_bg.gif) 90% 80% no-repeat;}
	.call {background:#fafafa url(/safety/images/main/call_bg.gif) 90% 20% no-repeat;}
	.call p.yeonsu {padding-left:55px;  background:url(/safety/images/main/call_yeonsu.gif) left bottom no-repeat;}
}
@media screen and (max-width:430px){
	.visual .visual_quick a {width:100px; height:100px; background-position:center 20px; font-size:11px;}
	.visual .visual_quick a span {line-height:160px;}
}