@charset "utf-8"; @import url('reset.css'); @import url('common.css'); #wrap {width:100%;} /* header */ #header {position:relative; width:100%; height:110px;} .Inner { position: relative; width: 100%; height: 28px; background-image: url(../img/include/top_bg.gif); background-repeat: repeat; } .Inner2 { position: relative; width: 1280px; height: 28px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } .util { position: absolute; top: 0px; right: 20px; width: auto; } .util li { display: inline-block; float: left; padding-top: 6px; padding-right: 20px; padding-bottom: 8px; padding-left: 20px; border-right-width: 1px; border-right-style: solid; border-right-color: #c7c7c7; } .util li a { color: #fff; font-size: 1em; } .util li a:hover { color: #fff; text-decoration: underline } .util li:first-child { border-left-width: 1px; border-left-style: solid; border-left-color: #c7c7c7; } #header_wrap { position: relative; width: 100%; z-index: 999999;} #header_wrap h1 { position: absolute; float: left; top: 40px; margin-left: -610px; z-index:9999; left: 50%; } #header .subLine { position:absolute; left:0; bottom:0; z-index:2; display:block; width:100%; height:0px;} /* 스크립트 추가영역 */ #header .gnbWrap { position: relative; width:100%; overflow: hidden; background: url("../img/include/header_bg.png") 50% 110px repeat-x; } #header .gnbWrap .subLine { position:absolute; left:0; top:110px; z-index:2; display:block; width:100%; height:0px; } /* 스크립트 추가영역 */ #header .gnb { display:block; width:800px; height:110px; overflow:hidden; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding-left: 500px; } #header .gnb strong { display:block;} #header .gnb strong a { display:block; height:20px; padding:45px 0 0 0; font-size:16px; } #header .gnb .active strong a, #header .gnb strong a:hover, #header .gnb strong a:focus { height:20px;} #header .gnb li.g1 strong a { width:150px; color: #666; } #header .gnb li.g2 strong a { width:150px; color: #666; } #header .gnb li.g3 strong a { width:150px; color: #666; } #header .gnb li.g4 strong a { width:150px; color: #666; } #header .gnb li.g5 strong a { width:150px; color: #666; } #header .gnb li.g1.active strong a {color: #006cd9;} #header .gnb li.g2.active strong a {color: #006cd9;} #header .gnb li.g3.active strong a {color: #006cd9;} #header .gnb li.g4.active strong a {color: #006cd9;} #header .gnb li.g5.active strong a {color: #006cd9;} #header .gnb > li { display:none; float:left; padding:0px 0px 50px 0px; } #header .gnb > li:first-child { margin-left:0; padding-left:0; } #header .gnb li.g1, #header .gnb li.g2, #header .gnb li.g3, #header .gnb li.g4, #header .gnb li.g5{ display:block; } #header .gnb .dep2 { display:block; height:243px; padding-top: 55px; padding-right: 0; padding-bottom: 0px; } #header .gnb .dep2 a > { background:#eee;} #header .gnb .dep2 > li { margin:10px 0 10px 0px;} #header .gnb .dep2 > li a { color:#CCC; font-size:13px; line-height:1.3em; letter-spacing:-.07em; } #header .gnb .dep2 a:hover { color:#FFF !important; } #header .gnb li.g1 .dep2 {width:150px; } #header .gnb li.g2 .dep2 {width:150px;} #header .gnb li.g3 .dep2 {width:150px;} #header .gnb li.g4 .dep2 {width:150px;} #header .gnb li.g5 .dep2 {width:150px;} .dr_m a { position: relative; float: left; width: 199px; height: 115px; border-left: 1px solid #f4f4f4 } .dr_m02 a { position: relative; float: left; width: 198px; height: 115px; border-left: 1px solid #f4f4f4; border-right: 1px solid #f4f4f4 } .ico_img { position: absolute; top: 28px; left: 20px; width: 45px; height: 45px; text-align: center; vertical-align: bottom } .dr_tit { position: absolute; top: 28px; left: 70px; width: 120px; font-size: 1.20em; font-weight: bold; } .dr_exp { position: absolute; top: 52px; left: 70px; width: 120px; font-family: Dotum; font-size: 11px; line-height: 14px; color: #888 } /* footer */ .foot_wrap { position: relative; float: left; width: 100%; height: 170px; background-color: #4f4f4f; } #foot { position: relative; width: 1240px; height: 170px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #foot .add { position: absolute; top: 28px; width: 800px; color: #a9a9a9; line-height: 1.6em; margin-left: 300px; font-size: 13px; } #foot .copy { position: absolute; top:75px; width: 800px; color: #999; margin-left: 300px; } #foot .b_logo { position: absolute; left: 0px; top: 25px; } #foot .ban { position: absolute; top: 25px; width: 200px; margin-left: 1000px; } /* main */ #container { width: 100%; position:relative; z-index:50; } #container .inner_container {width: 1280px; margin: 0 auto; overflow:hidden; position:relative; } .main #header {border-bottom: solid 0px #fff; position:absolute; left:0px; top:0px; z-index:100;} .main #header .inner_header {z-index:1; } .main #container {background:none;} #main1 .slider { position:relative; width:100%; } #slider_content {position:relative;width:100%; height:555px; background-color:#fff;} #slider_content>div {position:absolute;top:0;left:0;width:100%;height:100%; overflow:hidden;} #slider_content div.s{display:block; width:100%; height:100%;} #slider_content div.img1 {background: url('../img/main/main1.jpg') center center no-repeat;background-size:auto 100%;opacity:0;} #slider_content div.img2 {background: url('../img/main/main2.jpg') center center no-repeat;background-size:auto 100%;opacity:0;} #slider_content div.img3 {background: url('../img/main/main3.jpg') center center no-repeat;background-size:auto 100%;opacity:0;} #slider_content div.img4 {background: url('../img/main/main4.jpg') center center no-repeat;background-size:auto 100%;opacity:0;} #slider_content div.img5 {background: url('../img/main/main5.jpg') center center no-repeat;background-size:auto 100%;opacity:0;} #slider_content div.img6 {background: url('../img/main/main6.jpg') center center no-repeat;background-size:auto 100%;opacity:0;} #slider_content div.img7 {background: url('../img/main/main7.jpg') center center no-repeat;background-size:auto 100%;opacity:0;} #main_box { height: 620px; width: 1200px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } .main_box1 { float: left; height: 231px; width: 388px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #dcdcdc; border-right-color: #dcdcdc; border-bottom-color: #dcdcdc; border-left-color: #dcdcdc; } .main_box2 { height: 233px; width: 390px; float: left; } .main_box3 { width: 1200px; float: left; } /* subpage */ #sub_top { position: relative; width: 100%; height: 150px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #dad8e5; border-bottom-color: #dad8e5; background-image: url(../img/include/sub_bg.jpg); background-repeat: repeat; } .sub_topimg { position: relative; float: left; width: 100%; text-align: center; height: 150px; } .sub_topimg1 { position: relative; width: 100%; height: 150px; background-image: url(../img/include/sub_top1.jpg); background-repeat: repeat-x; background-position: center; } .sub_topimg2 { position: relative; width: 100%; height: 150px; background-image: url(../img/include/sub_top2.jpg); background-repeat: repeat-x; background-position: center; } .sub_topimg3 { position: relative; width: 100%; height: 150px; background-image: url(../img/include/sub_top3.jpg); background-repeat: repeat-x; background-position: center; } .sub_topimg4 { position: relative; width: 100%; height: 150px; background-image: url(../img/include/sub_top4.jpg); background-repeat: repeat-x; background-position: center; } .sub_topimg5 { position: relative; width: 100%; height: 150px; background-image: url(../img/include/sub_top5.jpg); background-repeat: repeat-x; background-position: center; } .content { position: relative; width: 1170px; padding: 0; border: 0px solid #f00; margin-top: 0px; margin-right: auto; margin-bottom: 0; margin-left: auto; } /* page인식 */ #page01 #lnb a.menu1, #page02 #lnb a.menu2, #page03 #lnb a.menu3, #page04 #lnb a.menu4, #page05 #lnb a.menu5, #page06 #lnb a.menu6, #page07 #lnb a.menu7, #page08 #lnb a.menu8, #page09 #lnb a.menu9, #page10 #lnb a.menu10 { position: relative; float: left; width: 202px; height: 38px; background: url(../img/sub/menu.png) no-repeat 0 0px; color: #FFF; } #subNav { position: relative; float: left; width: 202px; margin-top: 50px; margin-right: 0; margin-bottom: 0px; margin-left: 0; background-image: url(../img/sub/left_bg.gif); background-repeat: repeat-y; } #subNav .subtit { position: relative; float: left; width: 202px; color: #333; font-size: 2em; letter-spacing: -0.05em; line-height: 1.3em; clear: both; margin-right: 0; margin-left: 0; font-weight: bold; } #lnb { position: relative; width: 202px; border-top-width: 1px; border-top-style: solid; border-top-color: #7f7f7f; float: left; } #lnb ul { float: left; border-bottom: 1px solid #d2d2d2 } #lnb ul li { display: block; float: left; width: 200px; height: 38px; margin: 0; padding: 0; border-top: 1px solid #e6e6e6; } #lnb ul li:first-child { border: 0 } #lnb ul li a { display: block; float: left; width: 202px; height: 38px; margin: 0; padding: 0; background: url(../img/sub/menu.png) no-repeat 0 -38px; color: #8b9ca5; } #lnb ul li a:hover { display: block; float: left; width: 202px; height: 38px; background: url(../img/sub/menu.png) no-repeat 0 0px; color: #FFF; } .txt_style1 { float: left; clear: both; width: 160px; text-align: left; font-size: 1.20em; margin-top: 10px; margin-right: 0; margin-bottom: 0; margin-left: 28px; } /* 서브내용 */ .sub_contents { position: relative; float: right; width: 910px; margin-top: 30px; margin-right: 0; margin-left: 0; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCC; } .location { position: absolute; right: 0; top: 0px; width: 100%; } .location ul { float: right; } .location ul li { display: block; float: left; color: #8c8c8c; width: auto; background: url(../img/sub/r_arrow.gif) no-repeat 0 5px; padding-top: 0; padding-right: 10px; padding-bottom: 0; padding-left: 0px; } .location ul li:first-child { background: none; } .location ul li:last-child { color: #333 } .subTitle1 { position: relative; float: left; width: auto; margin-top: 15px; color: #333; font-size: 2.4em; line-height: 1.6em; letter-spacing: -.02em; margin-bottom: 10px; } #sub_cont { position: relative; float: right; width: 910px; margin-top: 50px; margin-right: 0; margin-bottom: 150px; margin-left: 0; }/* 높이수정 */ #sub_cont ul { } /*.companyMap .mapArea {border:1px solid #e1e1e1; margin-bottom:40px;}*/ .companyMap .mapArea {margin-bottom:40px;} .companyMap dl {border-top:2px solid #222; border-bottom:1px solid #c6c6c6; padding:23px 0 30px 4px; color:#666;} .companyMap dl dt {font:12px NanumGothicBold; margin-bottom:20px;} .companyMap dl dd span {display:inline-block; margin:0 5px; color:#b5b5b5; margin-bottom:5px;} #wrap #contents .sub_visual{height:175px;border-bottom:1px solid #ccc;} #wrap #contents .sub_cont{} #wrap #contents .sub_cont .inn_wrap{background:#fff url(http://www.jkplastic.com/images/bg_leftmenu_repeat.gif) 0 0 repeat-y;} #wrap #contents .sub_cont .left_menu{width:201px;margin-left:1px;position:absolute;top:-49px;left:0;z-index:25;} #wrap #contents .sub_cont .left_menu h3{height:34px;padding:15px 0 0 25px;color:#fff;font-weight:bold;font-size:18px;letter-spacing:-.75px;background:#83b2d2;} #wrap #contents .sub_cont .left_menu>ul>li{} #wrap #contents .sub_cont .left_menu>ul>li>a{display:block;height:26px;padding:12px 0 0 18px;border-bottom:1px solid #d2d2d2;} #wrap #contents .sub_cont .left_menu>ul>li>a span{padding-left:10px;color:#545454;font-size:13px;font-weight:bold;letter-spacing:-.75px;background:url(http://www.jkplastic.com/images/blt_leftmenu.gif) 0 6px no-repeat;} #wrap #contents .sub_cont .left_menu>ul>li>a.on span{background-image:url(http://www.jkplastic.com/images/blt_leftmenu_active.gif);color:#71acd5;} #wrap #contents .sub_cont .left_menu.member h3{background:#505050;} #wrap #contents .sub_cont .left_menu.member>ul>li>a span{color:#999;background-image:url(http://www.jkplastic.com/images/blt_leftmenu_mb.gif);} #wrap #contents .sub_cont .left_menu.member>ul>li>a.on span{color:#545454;background-image:url(http://www.jkplastic.com/images/blt_leftmenu_mb_active.gif);} #wrap #contents .sub_cont .left_menu.center h3{background:#006cd9;} #wrap #contents .sub_cont .left_menu.center_hair h3{background:#914272;} #wrap #contents .sub_cont .left_menu.center_hair>ul>li>a.on span{color:#a03b78;background-image:url(http://www.jkplastic.com/images/blt_leftmenu_ct_br_active.gif);} #wrap #contents .sub_cont .left_menu.center>ul>li>a span{color:#545454;background-image:url(../images/blt_leftmenu_ct.gif);} #wrap #contents .sub_cont .left_menu.center>ul>li>a.on span{color:#84663a;background-image:url(http://www.jkplastic.com/images/blt_leftmenu_ct_active.gif);} #wrap #contents .sub_cont .left_menu .depth2{padding:17px 0 17px 25px;border-bottom:1px solid #d2d2d2;background:#f8f0e6;} #wrap #contents .sub_cont .left_menu.center_hair .depth2{background:#f8e6f4;} #wrap #contents .sub_cont .left_menu .depth2 li{margin-bottom:12px;} #wrap #contents .sub_cont .left_menu .depth2 li a{padding-left:12px;color:#8c7d66;display:inline-block;background:url(http://www.jkplastic.com/images/bg_line_sublf.gif) 0 5px no-repeat;font-weight:bold;} #wrap #contents .sub_cont .left_menu .depth2 li a:hover, #wrap #contents .sub_cont .left_menu .depth2 li a.on{color:#403525;background-image:url(.http://www.jkplastic.com/images/bg_line_sublf_on.gif);} #wrap #contents .sub_cont .left_menu .depth2.center_hair li a{color:#c282a7;background-image:url(http://www.jkplastic.com/images/bg_line_sublf_hair.gif);} #wrap #contents .sub_cont .left_menu.center_hair .depth2 li a:hover, #wrap #contents .sub_cont .left_menu.center_hair .depth2 li a.on{color:#6e1f4f;background-image:url(http://www.jkplastic.com/images/bg_line_sublf_on.gif);} #wrap #contents .sub_cont .left_menu .depth2 li.last{margin-bottom:0;} .depth2 { background-color: #ebeff3; padding-top: 22px; padding-bottom: 20px; width: 175px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #d2d2d2; border-left-color: #d2d2d2; padding-left: 25px; float: left; border-top-width: 1px; border-top-style: solid; border-top-color: #d2d2d2; } .depth2 p { height: 25px; background-image: url(../img/sub/ico_lnb.gif); background-repeat: no-repeat; background-position: 0px 6px; padding-left: 12px; } .depth2 p a { font-size: 12px; color: #798d97; } .depth2 p a:hover { color: #4b545a; } #main1 { width: 100%; height: 550px; background-image: url(../img/main/main.jpg); background-repeat: repeat-x; background-position: center; } #main2 { width: 100%; height: 670px; text-align: center; background-image: url(../img/main/main_bg.png); } #main3 { width: 100%; padding-top: 50px; height: 620px; background-image: url(../img/main/main_bg.png); } #main4 { width: 1250px; margin:0 auto; } #main4 .sec4 { margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; height: 150px; padding-bottom: 70px; width: 611px; clear: none; float: right; } #main4 .sec4 ul li { display: inline; float: left; } #notice { width: 318px; float: left; background-color: #FFF; padding-top: 15px; padding-right: 35px; padding-bottom: 30px; padding-left: 35px; } #notice h4 { font-family: "나눔고딕"; font-size: 24px; color: #333; line-height: 60px; } #notice ul li a { font-size: 14px; line-height: 25px; color: #555; } #notice ul li a:hover { color: #999; } #notice ul li span { font-size: 12px; color: #999; float: right; } .sec1 { width: 1260px; } .sec2 { width: 1260px; border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #afafaf; } .sec3 { width: 1260px; height: 150px; } .tab_sty1 { border-top:1px solid #e2e2e2; position:relative; padding-bottom:40px; width: 450px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } .tab_sty1 li {position:absolute; top:-40px; border:1px solid #e2e2e2; width:149px; height:38px;} .tab_sty1 li a { display:block; color:#777777; text-align:center; font-family: NanumGothicbold; font-size: 13px; line-height: 38px; } .tab_sty1 li a:hover {color:#555; background:#e2e2e2;} .tab_sty1 li span {display:none; width:11px; height:6px; background:url('../img/sub/bg_tab_ico1.gif') 0 0 no-repeat; position:absolute; bottom:-6px; left:50%; margin-left:-5px;} .tab_sty1 li.active {border-color:#5188c4;} .tab_sty1 li.active a {color:#fff; background:#66a0e0;} .tab_sty1 li.active a:hover {color:#fff; background:#5188c4;} .tab_sty1 li.active span {display:block;} .tab_sty1 li.m1 {left:0;} .tab_sty1 li.m2 {left:150px;} .tab_sty1 li.m3 {left:300px;} .tab_sty1 li.m4 {left:450px;} .tab_sty1 li.m5 {left:600px;} .tab_sty2 { border-top:1px solid #e2e2e2; position:relative; padding-bottom:40px; width: 600px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } .tab_sty2 li {position:absolute; top:-40px; border:1px solid #e2e2e2; width:149px; height:38px;} .tab_sty2 li a { display:block; color:#777777; text-align:center; font-family: NanumGothicbold; font-size: 13px; line-height: 38px; } .tab_sty2 li a:hover {color:#555; background:#e2e2e2;} .tab_sty2 li span {display:none; width:11px; height:6px; background:url('../img/sub/bg_tab_ico1.gif') 0 0 no-repeat; position:absolute; bottom:-6px; left:50%; margin-left:-5px;} .tab_sty2 li.active {border-color:#5188c4;} .tab_sty2 li.active a {color:#fff; background:#66a0e0;} .tab_sty2 li.active a:hover {color:#fff; background:#5188c4;} .tab_sty2 li.active span {display:block;} .tab_sty2 li.m1 {left:0;} .tab_sty2 li.m2 {left:150px;} .tab_sty2 li.m3 {left:300px;} .tab_sty2 li.m4 {left:450px;} .tab_sty2 li.m5 {left:600px;} .tab_sty3 { border-top:1px solid #e2e2e2; position:relative; padding-bottom:40px; width: 750px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } .tab_sty3 li {position:absolute; top:-40px; border:1px solid #e2e2e2; width:149px; height:38px;} .tab_sty3 li a { display:block; color:#777777; text-align:center; font-family: NanumGothicbold; font-size: 13px; line-height: 38px; } .tab_sty3 li a:hover {color:#555; background:#e2e2e2;} .tab_sty3 li span {display:none; width:11px; height:6px; background:url('../img/sub/bg_tab_ico1.gif') 0 0 no-repeat; position:absolute; bottom:-6px; left:50%; margin-left:-5px;} .tab_sty3 li.active {border-color:#5188c4;} .tab_sty3 li.active a {color:#fff; background:#66a0e0;} .tab_sty3 li.active a:hover {color:#fff; background:#5188c4;} .tab_sty3 li.active span {display:block;} .tab_sty3 li.m1 {left:0;} .tab_sty3 li.m2 {left:150px;} .tab_sty3 li.m3 {left:300px;} .tab_sty3 li.m4 {left:450px;} .tab_sty3 li.m5 {left:600px;} .tab_sty4 { border-top:1px solid #e2e2e2; position:relative; padding-bottom:40px; width: 300px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } .tab_sty4 li {position:absolute; top:-40px; border:1px solid #e2e2e2; width:149px; height:38px;} .tab_sty4 li a { display:block; color:#777777; text-align:center; font-family: NanumGothicbold; font-size: 13px; line-height: 38px; } .tab_sty4 li a:hover {color:#555; background:#e2e2e2;} .tab_sty4 li span {display:none; width:11px; height:6px; background:url('../img/sub/bg_tab_ico1.gif') 0 0 no-repeat; position:absolute; bottom:-6px; left:50%; margin-left:-5px;} .tab_sty4 li.active {border-color:#5188c4;} .tab_sty4 li.active a {color:#fff; background:#66a0e0;} .tab_sty4 li.active a:hover {color:#fff; background:#5188c4;} .tab_sty4 li.active span {display:block;} .tab_sty4 li.m1 {left:0;} .tab_sty4 li.m2 {left:150px;} .tab_sty4 li.m3 {left:300px;} .tab_sty4 li.m4 {left:450px;} .tab_sty4 li.m5 {left:600px;} #img_div { display: inline-block; margin:30px 0 50px 0; width:700px; text-align: center; } #pro_img { float: left; margin: 0; padding: 0; width: 505px; border:5px solid #DADADA; } #pro_img2 { float: left; margin: 0; padding: 0; border:5px solid #DADADA; } #pro_img img { width:450px; height:400px; margin: 10px 0; padding: 0; } #pro_img2 img { width:450px; height:400px; margin: 10px 0; padding: 0; } #thum_img { float: left; padding-left:10px; width:95px; } #thum_img2 { float: left; padding-left:10px; width:95px; } #thum_img2 p { float: left; width: 95px; height: 77px; margin: 7px 0 0 5px; background:url(../img/pro01/thum_img_bg.gif) no-repeat 0 0; } #thum_img p { width: 95px; height: 77px; margin: 7px 0 0 0; background:url(../img/pro01/thum_img_bg.gif) no-repeat 0 0; } #thum_img2 img { text-align: center; width: 80px; height: 62px; margin: 8px; padding:0; } #thum_img img { width: 80px; height: 62px; margin: 8px; padding:0; } #certificate { width: 100%; float: left; } .certificate_list { float: left; width: 910px;} .certificate_list ul { float: left; height: 370px;} .certificate_list ul li { float: left; height: 297px; width: 210px; margin-right: 7px; margin-left: 7px; background-color: #FFF; text-align: left; border: 1px solid #dadada; margin-bottom: 20px; } .certificate_list ul li a { font-size: 13px; color: #555; display: block; } .certificate_list ul li a img { padding-bottom: 15px; height: 297px; width: 210px; white-space: nowrap; display: block; } .certificate_list ul li a .subject { padding-bottom: 20px; display: block; text-align: center; } .certificate_list ul li .conten { font-size: 12px; color: #777777; padding-right: 25px; padding-left: 25px; display: block; line-height: 20px; } #wowslider-container1 p { float: left; } #product_box { width: 100%; border: 1px solid #d9d9d9; padding-top: 20px; }