@media (max-width:960px){

html {font-size: 100%;}
.inr-c {margin-left: 5%; margin-right: 5%;}



.mb40 {margin-bottom: 25px !important;}
.mt60 {margin-top: 30px !important;}


.hide-m {display: none !important;}

#container {min-height:500px;}


#footer {padding:30px 0 30px;}
#footer p {font-size: 12px; margin: 3px 0;}
#footer .foo_logo {margin-bottom: 20px;}
#footer .foo_logo img {height: 22px; opacity:.6;}
#footer .foo_logo > div {margin-right: 20px;}
#footer .foo_logo a {font-size: 12px; margin-left: 8px;}


#footer .foo_txt .r {position: static; display: flex; margin-top: 10px;}
#footer .foo_txt .r .btn-pk {flex:1; min-width:auto; margin-left: 10px;}
#footer .foo_txt .r .btn-pk:first-child {margin-left: 0;}
#footer .copy {margin-top: 20px; padding-top: 10px; font-size: 12px;}

.i-aft.i_rangs {padding-left: 18px;}
.i-aft.i_rangs:after {background-size: 10px auto; background-position: 0 center;}
.i-aft.i_arr1:after {background-size: 4px auto; background-position: 0 center;}
.i-aft.i_arr2:after {background-size: 4px auto; background-position: 0 center;}

#header {z-index: 10; position: fixed; left: 0; top: 0; width: 100%;}


.logo {float: none; line-height: 60px; height: auto; display: block; text-align: center; width: auto; text-align: left;}
.logo a {width: 30%;}
.logo img {height: 24px;}


.btn_gnb {display: block; text-align: right; right: 0;}

#header .gnbbox {margin-left: 0;}
.gnbbox {margin: 0; text-align: left; position: fixed; left:-100%; top: 0; width: 80%; max-width:400px; height: 100vh; background-color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s;}
.gnbbox > a {position: absolute; left: 0; top: 10px; border: 0; color: #000;}
.gnb {font-size: 0; display: block; margin-top: 60px; border-top: 1px solid #f5f5f5;}
.gnb > li {display: block; border-bottom: 1px solid #f5f5f5; }
.gnb > li > a {font-size: 15px; line-height: 1.2; padding: 15px 20px; color: #000; text-align: left;}
.gnb > li > a > span {padding: 0; min-width:auto;}
.gnb > li > a > span:after {content:none;}



.gnb .depth2 {position: static; opacity:0; visibility: visible; transform: translateY(0); height: 0; border-top: 1px solid rgba(255,255,255,.1);}
.gnb .depth2 ul {padding: 10px 0;}
.gnb .depth2 li a {padding: 7px 20px; font-size: 13px; text-align: left;}

.gnb > li.on > a {background-color: #38a0ff; color: #fff;}
.gnb > li.on .depth2 {z-index:1; visibility: visible; opacity:1; height: auto;}



#header .rgh {right: 50px; top: 14px;}

.btn_rangs {width: 80px; height: 34px; padding: 5px 10px; font-size: 13px;}
.btn_rangs:after {right: 10px; background-size: 6px auto;}

.btn_contact {width: 80px; height: 34px; padding: 5px 0;}


.lst_rangs {width: 80px;}
#header .rgh ul {padding: 5px 0 ;}
#header .rgh li a{font-size: 12px;}


#header.scroll .logo {background-size: auto 24px;}
#header.scroll .btn_gnb span ,
#header.scroll .btn_gnb span:after, 
#header.scroll .btn_gnb span:before {background-color: #000;}
#header.scroll .gnb > li:hover > a,
#header.scroll .gnb > li.on > a {color: #38a0ff;}

#header.open {}
#header.open .gnbbox {left: 0; z-index: 11;}
#header.open .gnb_dim {display: block;}
.gnb_dim {z-index: 10; display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.7);}


body.modal {overflow:hidden;}


.btn_gnb_close {
	z-index:10; display: block;
	position: absolute; right: 10px; top: 10px;
	width: 40px; height: 40px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: right;
}
.btn_gnb_close span {
	position: absolute;
	top: 50%;
	display: block;
	width: 90%;
	height: 2px;
	margin-top: -1.5px;
	background: none;
}
.btn_gnb_close span:after,
.btn_gnb_close span:before {
	content: "";
	position: absolute; left:10%;
	width: 80%;
	height: 100%;
	background-color: #000;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.btn_gnb_close span:after {-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.btn_gnb_close span:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}





.tab.ty1 li p, .tab.ty1 li a {font-size: 14px;}
.tab.ty1 li a span {padding: 10px 15px;}












.bxMain {height: 400px; }
.bxMain .item {height: 400px;}
.bxMain .cont {bottom: 50px; }


.owl-dots {bottom: 20px; width: 90%; margin-left: 0; left: 5%;}


.thumb_img ul {width: 100%;}
.thumb_img li {position: relative; width: 20%; margin-right: 0;}
.thumb_img a {display: block;}
.thumb_img a span {display: block; font-size: 12px; position: absolute; left: 50%; top: 50%; width: 100%; transform:translate(-50%,-50%);}
.thumb_img a i {margin-top: 5px; width: 18px; height: 18px; border-width: 1px;}
.thumb_img a i:after {font-size: 12px; line-height: 17px;}


.txt_st1 {}
.txt_st1 .tit1 {padding-bottom: 10px; margin-bottom: 10px; font-size: 20px; }
.txt_st1 .tit1:after {content:none;}
.txt_st1 .txt {font-size: 12px;}


.txt_st2 {font-size: 13px;}
.txt_st2 .tit1 {font-size: 20px; margin-bottom: 20px;}



.tit_st1 {}
.tit_st1 .ico {margin-bottom: 0; font-size: 11px;}
.tit_st1 .tit1 {font-size: 16px; padding-bottom: 10px; margin-bottom: 10px;}
.tit_st1 .tit2 {font-size: 15px; margin-bottom: 10px;}
.tit_st1 .txt {font-size: 12px; line-height: 1.5;}



.hd_tit1 {margin-bottom: 15px; font-size: 13px;}
.hd_tit1 .h_tit1 {font-size: 20px; }
.hd_tit1 .rgh {top: 5px;}
.hd_tit1 .rgh a {font-size: 13px;}



.h_tit1 {font-size: 16px; margin-bottom: 10px;}

.i-txt {font-weight: 300; font-size: 12px; height: 20px; line-height: 20px; padding: 0 7px;}
.i-txt.black {border-color: #000; color: #000;}
.i-txt.red {border-color: #DC3C32; color: #DC3C32;}



.area_notice {padding: 15px 0; font-size: 12px;}
.area_notice a {padding-left: 15px; margin-left: 10px;}
.area_notice a + a {display: none;}
.area_notice .rgh {position: absolute; right: 0; top: 50%; margin-top: -8px;}



.main_cont .a_link {top: 2px; font-size: 12px;}
.main_cont .a_link span:after {background-size: auto 6px;}

.main_cont.area1 {padding-top: 40px; padding-bottom: 40px;}


.lst_prd1 {width: 100%; margin-bottom: 10px;}
.lst_prd1 .col {padding-right: 0;}
.lst_prd1 .col .cont {padding: 10px 0; width: 100%; position: static;}


.main_cont.area2 {background-attachment: scroll; padding-top: 40px; padding-bottom: 40px; }
.main_cont.area2 p {font-size: 13px;}


.lst_bind {font-size: 12px;}
.lst_bind > .col {display: block; margin-right: 0;}
.lst_bind > .col:first-child {margin-bottom: 20px;}
.lst_bind > .col p {margin-bottom: 10px; font-size: 13px;}



.lst_dot1 {}
.lst_dot1 li {position: relative; padding-left: 10px; font-size: 14px; margin-bottom: 10px;}
.lst_dot1 li:after {content:""; position: absolute; left: 0; top: 7px; width: 3px; height: 3px; background-color: #6f6f6f; border-radius: 50%;}


.lst_dot1 li {font-size: 12px;}
.lst_dot1 li:after {top: 5px;}




.main_cont.area3 {padding-top: 40px; padding-bottom: 40px;}
.main_cont.area3 .imgs {right: 0;}

.main_cont.area3 .list {}
.main_cont.area3 .list ul {width: 100%;}
.main_cont.area3 .list li {overflow:hidden; width: 100%; height: 120px; margin-right: 0; margin-bottom: 3%; padding-right: 40%; box-sizing:border-box; background-color: #fff;}
.main_cont.area3 .list li .img {position: relative; height: 100%;}
.main_cont.area3 .list li .img img {position: absolute; left: 0; top: 50%; width: 100%; transform:translateY(-50%);}
.main_cont.area3 .list li .txt {position: absolute; left: 60%; bottom: 0; width: 40%; height: 100%; padding: 0; font-size: 12px; border-top: 0; border-left: 1px solid #38a0ff;}
.main_cont.area3 .list li .txt p {position: relative; bottom: 0; display: table; width: 100%; height: 100%; font-size: 14px; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main_cont.area3 .list li .txt p span {display: table-cell; vertical-align: middle;}
.main_cont.area3 .list li .txt p strong {font-size: 12px; margin-bottom: 5px;}

.main_cont.area4 {position: relative; height: 280px;}
.main_cont.area4 .bg {background-attachment: scroll; background-attachment: scroll; background-position: 81% center; background-size: auto 100%;}
.main_cont.area4 .bg:after {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.2);}
.main_cont.area4 .inr-c2 > div {padding-top: 50px;}
.main_cont.area4 .btns {margin-top: 15px;}
.main_cont.area4 .txt br {display: none;}
.main_cont.area4 .txt_st1 {padding: 0 5%;} 


.btn-pk.b {padding: 14px 10px; font-size: 14px;}
.btn-pk.n {padding: 10px 10px; font-size: 13px;}



.i-aft.i_arr3 {padding-right: 40px;}
.i-aft.i_arr3:after {background-size: 15px auto; background-position: right center;}





.main_cont.area5 {padding-top: 40px; padding-bottom: 40px;}
.main_cont.area5 .tab {margin-bottom: 30px;}
.main_cont.area5 .owl-nav  {display: none;}


.owl-nav > * {width: 40px; height: 40px; margin-top: -20px;}


.lst_news {padding: 0;}
.lst_news .item {padding: 0;}
.lst_news .txt {padding-bottom: 10px;}
.lst_news .txt .icon {margin-bottom: 5px;}
.lst_news .txt .h1 {height: 66px; font-size: 15px; line-height: 22px;}
.lst_news .txt .t1 {height:54px; font-size: 12px; line-height: 18px; }
.lst_news .botm {height: 30px;}
.lst_news .botm p {font-size: 12px; line-height: 30px; background-size: 10px auto;}




/******************************************************************************/
#container.sub {padding-bottom: 60px;}

.spot {margin-bottom: 20px; height: 230px;}
.spot .txt {bottom: 20px;}
.spot .txt .tit1 {margin-bottom: 10px; font-size: 19px;}
.spot .txt li {margin-right: 10px;}
.spot .txt li a {font-size: 12px;}

.sub_tit {padding: 30px 0 20px;}
.sub_tit .tit1 {margin-bottom: 20px; font-size: 21px;}


.tab.ty2 ul {display: flex;}
.tab.ty2 li {flex:1;}
.tab.ty2 li a {padding: 12px 0; font-size: 14px; display: table; width: 100%; height: 100%; box-sizing:border-box;}
.tab.ty2 li a > span {display: table-cell; vertical-align: middle;}
.sub_tit .tab.ty2 .n3 li {min-width:auto;}



.area_idea .lft {float: none; width: 100%;}
.area_idea .lft .txt {left: 20px; bottom: 20px; font-size: 13px; width: 60%;}
.area_idea .lft .h1 {font-size: 16px;}
.area_idea .rgh {float: none; width: 100%; font-size: 14px;}
.area_idea .rgh .h1 {padding: 20px 0; margin-bottom: 20px; font-size: 18px; line-height: 1.3;}


.area_contact .map {height: 200px; margin-bottom: 40px;}
.area_contact .cont .tit .h1 {font-size: 20px;}
.area_contact .cont .tit .h1 span {padding-left: 34px;}
.area_contact .cont .tit .h1 span:after {background-size: 24px auto;}
.area_contact .cont .tit {padding-bottom: 15px; margin-bottom: 15px;}
.area_contact .cont .tit .rgh {bottom: 15px; max-width:55%; text-align: right;}
.area_contact .cont .tit .rgh p {margin-left: 10px; font-size: 12px;}
.area_contact .cont .tit .rgh p:first-child {margin-left: 0;}
.area_contact .cont .txt {padding: 0; font-size: 14px;}
.area_contact .cont .txt strong {font-size: 16px; margin-bottom: 0;}
.area_contact .cont .txt p span:first-child {float: none;}



.area_history .slider_btn {left: auto; right:0; top: -32px; font-size: 0;}
.area_history.area_idea .rgh .h1 {padding-bottom: 10px;}
.area_history .r1 {margin-bottom: 15px;}
.area_history .r1 span:first-child {font-size: 15px;}
.area_history .r1 span:last-child {margin-left: 10px;}




.hd_tit1 .h_tit2 {margin-bottom: 10px; font-size: 18px;}

.box_bind {margin-top: 40px;}
.box_bind li {display: table; margin: 0; width: 100%; margin-bottom: 15px;}
.box_bind li > * {display: table-cell; vertical-align: middle;}
.box_bind li .img {width: 30%; padding-bottom: 30%;}
.box_bind li .img p {width: 100px; margin: 0 auto;}
.box_bind li .img img {width: 30px;}
.box_bind li > p {text-align: left; padding-left: 20px; font-size: 14px;}

.box_bind ul.ty1 li > div {display: table-cell; vertical-align: middle;}
.box_bind ul.ty1 li .img {width: 30%; }
.box_bind ul.ty1 li .img img {width: 70%;}
.box_bind ul.ty1 li .img p {font-size: 12px; margin-top: 10px;}
.box_bind ul.ty1 li .t {text-align: left; font-size: 12px;}
.box_bind ul.ty1 li p.h1 {margin-bottom: 5px; font-size: 14px;}

.box_bind ul.ty2 li .img p {font-size: 14px; margin-top: 5px;}
.box_bind ul.ty2 li .img p.t2 {max-width:80px; font-size: 11px; font-weight: 400; white-space: inherit; line-height: 1.2;}


.box_txt {height: auto; min-height:150px; margin-bottom: 20px; display: table; width: 92%; padding: 0 4%;}
.box_txt .inr-c2 {display: table-cell; vertical-align: bottom;}
.box_txt .inr-c2 .txt {position: static; margin-top: 30px; padding: 20px 15px 10px; display: block;}
.box_txt .txt .h1 {display: block; width: auto; padding: 0 0 10px; font-size: 15px;}
.box_txt .txt .t1 {display: block; font-size: 12px;}


.bind_n2 {padding: 20px 0; width: 100%;}
.bind_n2.line-bot {border-bottom: 1px solid #eee;}
.bind_n2.line-bot:after {content:none;}
.bind_n2 .col {display: block; margin-right: 0; width: 100%; padding-top: 20px;}
.bind_n2 .col:nth-of-type(1) {padding-top: 0;}


.bind_n3 {padding: 20px 0; width: 100%;}
.bind_n3.line-bot {border-bottom: 1px solid #eee;}
.bind_n3.line-bot:after {content:none;}
.bind_n3 .col {display: block; margin-right: 0; width: 100%; padding-top: 20px;}
.bind_n3 .col:nth-of-type(1) {padding-top: 0;}


.h_tit0 {font-size: 15px; margin-bottom: 15px;}
.h_tit2 {margin-bottom: 10px; font-size: 15px;}


.tbl_basic table {font-size: 13px;}
.tbl_basic th,
.tbl_basic td {padding: 5px; font-size: 12px;}

.tbl_basic td.subject {height: 30px; padding-left: 10px;}


.tbl_basic col.num {width: auto;}
.tbl_basic col.day {width: 100px;}

.pr-mb1 {margin-bottom: 40px;}


.area_rnd ul {width: 100%;}
.area_rnd li { width: 100%; height: auto; padding: 20px 0; margin-right: 0; margin-bottom: 10px;}
.area_rnd li > div {}
.area_rnd li > div:first-child {margin: 0 auto; width: 100px;}
.area_rnd li .icon {text-align: center; margin-bottom: 20px;}

.area_rnd li .h1 {padding: 15px 0 10px; margin-bottom: 10px; font-size: 16px;}
.area_rnd li .h1:after {margin-left: -15px; height: 2px; width: 30px;}
.area_rnd li .t1 {font-size: 0; margin: 0 10%; text-align: left;}

.area_rnd .t1 a {display: inline-block; margin: 1%; min-width:48%}
.area_rnd .t1 a span {display: block; max-width:none; font-size: 12px; padding: 5px 0; text-align: center;}
.area_rnd .t1 a.big {width: 98%;}



.lst_system li > div.img {width: 70px; padding-right: 10px;}
.lst_system li > div.tx {padding-left: 25px; font-size: 13px;}
.lst_system li > div.tx .h1 {margin-bottom: 5px;}
.lst_system li > div.tx .h1 span {font-size: 1.2em; margin-right: 5px;}


.pb50 {padding-bottom: 20px !important;}


.lst_welfare li {width: 49%;}
.lst_welfare li > div {height: 75px; padding-left: 15px; padding-right: 10px;}
.lst_welfare li .img {width: 40px; padding-right: 10px;}
.lst_welfare li p {font-size: 14px;}




.lst_step ul {padding-left: 0; padding-right: 10px;}
.lst_step li {width: 50%; }
.lst_step li > div {height: 180px; padding: 15px 15px; border-width: 3px; font-size: 12px; border-radius: 20px;}
.lst_step .bg {right: -5px; top: auto; bottom: -5px; border-radius: 20px; box-sizing: inherit; padding: 3px;}
.lst_step li .ico {padding-top: 5px; margin-bottom: 10px;}
.lst_step li .ico img {height: 24px;}
.lst_step li .h1 {margin-bottom: 10px;}
.lst_step li .h1 span {margin-bottom: 0; font-size: 16px; }

.lst_step li:nth-child(n+4) {top: 0;}


.lst_step li:after {right: -15px; margin-top: -20px; width: 30px; height: 30px; background-size: 10px auto; border-width: 2px;}
.lst_step li:before {width: 15px; height: 34px; border-width: 3px; right: -18px; margin-top: -23px;}



/*안전보건환경*/
.area_safe1 {padding-bottom: 50px;}

.lst_number {}
.lst_number li {padding-left: 30px; padding-top: 5px; padding-bottom: 5px; margin-bottom: 7px; font-size: 14px;}
.lst_number li span {margin-top: -11px; width: 22px; height: 22px; font-size: 12px; line-height: 22px;}


.area_safe2 {padding: 50px 0;}
.area_safe2 .tab {margin-bottom: 30px;}

.box_safe1 {margin-bottom: 30px;}
.box_safe1 .txt {left: 5%; width: 90%; padding: 10px 15px; font-size: 13px;}


.hd_tit1.pb20 {padding-bottom: 10px !important;}

.lst_safe1 ul {}
.lst_safe1 > ul > li {width: 100%; margin-bottom: 20px;}
.lst_safe1 > ul > li:first-child {margin-right: 0;}

.lst_safe1 > ul.ty2 > li {width: 49%;}
.lst_safe1 > ul.ty2 > li:first-child {margin-right: 2%;}


.lst_safe1 li .img {margin-bottom: 20px;}
.lst_safe1 li .img p {font-size: 13px; margin-top: 10px;}
.lst_safe1 li .txt {}
.lst_safe1 li .h1 {padding-bottom: 10px; margin-bottom: 10px; font-size: 16px;}
.lst_safe1 li .h1 span {padding-left: 25px; background: url(../images/sub/ico_try.png) 0 center no-repeat; background-size: auto 15px;}


.lst_safe2 li {display: block;}
.lst_safe2 li > div {display: block; padding-left: 0;}
.lst_safe2 li > div:first-child {padding-right: 0; padding-left: 0;}
.lst_safe2 li .h1 {margin-top: 15px; font-size: 15px; margin-bottom: 10px;}
.lst_safe2 img {max-width:100% !important;}

.lst_safe2.ty2 li > div:first-child {width: 100%; margin-bottom: 30px;}
.lst_safe2.ty2 .img span {font-size: 12px; }
.lst_safe2.ty2 .txt:first-child {margin-bottom: 30px;}
.lst_safe2.ty2 .txt .h1 {padding-bottom: 10px; margin-bottom: 10px; font-size: 16px;}




.area_safe2 .tab.ty2 ul {flex-direction: row; flex-wrap: wrap;}
.area_safe2 .tab.ty2 li {width: 32%; background-color: #fff;}
.area_safe2 .tab.ty2 li a {padding-left: 0; padding-right: 0;}
.area_safe2 .tab.ty2 li:nth-child(n+4) {width: 48.5%;}



/**/
.bbs_view .tit {padding: 12px 15px;}
.bbs_view .tit .h1 {font-size: 14px; margin-bottom: 7px;}
.bbs_view .cont {padding: 15px; font-size: 12px; min-height:150px;}
.bbs_view .botm > div {padding: 10px 15px; font-size: 12px;}
.bbs_view .botm > div > span.h {width: 50px; -webkit-background-size: 8px auto; background-size: 8px auto;}
.bbs_view .botm > div > span.t {margin-left: 70px;}

.btn-bot {margin-top: 20px;}
.mw100p {width: 100%;}


.pagenation {padding-top: 20px;}
.pagenation li {font-size: 12px;}
.pagenation li a {width: 25px; line-height: 25px; padding: 0;}



.scrollTopBtn {width: 35px; height: 35px; right: 20px; bottom: 20px; background-size: 15px auto;}



/**/
.area_contact .col {margin-bottom: 10px;}
.area_contact .col p {margin-bottom: 5px; font-size: 12px;}
.area_contact .col.c2 {display: block; margin-bottom: 0;}
.area_contact .col.c2 > div {margin-left: 0; margin-bottom: 10px;}
.area_contact .inp_txt {height: 40px; padding: 5px; font-size: 13px;}
.area_contact .textarea1 {height: 140px; padding: 10px 5px; font-size: 13px;}


.tbl_photo li {width: 47%; margin-bottom: 20px;}
.tbl_photo .h1 {height: 20px; font-size: 14px; margin-bottom: 5px;}
.tbl_photo .t1 {font-size: 12px;}
.tbl_photo .txt {padding-top: 10px;}


}