@charset "utf-8"; 
/*나눔고딕*/
@import url(./fonts/NanumGothic/NanumGothic.css);

/*본고딕*/
@import url(./fonts/NotoSans/NotoSansKR.css);

/* base */
html{overflow-y:scroll; overflow-x:hidden;}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, input{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6{font-weight:normal;font-size:100%;}
a{text-decoration:none;}
ul, ol, li{list-style:none;}
img{border:none; vertical-align:middle;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{display:block;}
table, td, tr{font-family:"Nanum Gothic"; font-size:13px; color:#333; font-weight:228;}

/* div위치조절 */
#wrap{width:100%; overflow:hidden; text-align:left; min-width:1100px; position:relative; background:#fff}
#top_wrap{ position:relative; width:100%; height:160px; background:url(../images/top_bg.jpg) no-repeat top }
#middle_wrap{width:1100px; margin:0 auto; overflow:hidden; position:relative;}
#bottom_wrap{width:100%; overflow:hidden; height:156px;; background-color:#ffffff;}

/* top div위치조절 */
#top_total{ margin:0 auto; width:1100px; height:160px; }
#top_total01{ margin:0 auto; width:1100px; height:120px; overflow:hidden}
#top_total02{ margin:0 auto; width:1100px; height:40px; background:url(../images/menu_bg.jpg) no-repeat top }


/* 로고 */
#logo{ float:left; overflow:hidden; margin-top:15px}
#logo2{ float:right;  overflow:hidden; margin-top:15px;}

/* div위치조절 */
/* Header */
div#commonGnb{float:left; position:relative;color:#333333;font-family:"Nanum Gothic"; width:1100px; height:40px;}
div#commonGnb div.gnbWrap ul.gnbLayer{ display:table; margin:0}
div#commonGnb div.gnbWrap ul.gnbLayer li{float:left;  position:relative; z-index:999;  zoom:1; }
div#commonGnb div.gnbWrap ul.gnbLayer li.first{border:0;}



div#commonGnb ul.gnbLayer li a{display:block;  text-align:center; font-weight:600; font-size:15px;  color:#fff; font-family:"Nanum Gothic"; font-weight:600;width:220px; padding:12px 0 14px;}
div#commonGnb ul.gnbLayer li:hover>a{ background:url(../images/menu_hover.jpg) no-repeat top;}
div#commonGnb ul.gnbLayer li dl {position:absolute; left:50%; top:40px; margin-left:-110px; display:none;font-size:0;background:#444444; opacity:0.9; width:220px; line-height:40px}
div#commonGnb ul.gnbLayer li dd {display:block; padding:0; margin:0;  }

div#commonGnb ul.gnbLayer li:hover dd a {font-family:"Nanum Gothic"; display:block; width:100%; height:40px; padding:0; font-size:13px; line-height:40px; color:#fff; font-weight:600; text-align:center; }

div#commonGnb ul.gnbLayer li dd a:hover { font-weight:600;text-decoration:none;font-family:"Nanum Gothic"; color:#fff}
div#commonGnb ul.gnbLayer li:hover dd a:hover{ background-color:#005aa6; opacity:0.9; font-weight:600;font-family:"Nanum Gothic"; color:#ffffff;}

/* 메인콘텐츠 */
.middletop_wrap{ width:100%; height:455px; margin:0 auto 50px; position:relative}
.middletop_total1{ width:1100px; height:260px; margin:0 auto 50px; overflow:hidden}
.customer{ float:left; width:240px; height:260px; }
.product{ float:right; width:820px; height:260px; }
.customer_con, .product_con{ margin-top:30px}
.middle_total2{ width:1100px; height:145px; margin:0 auto; overflow:hidden}
.notice{ float:left; width:240px; height:145px; overflow:hidden}
.notice_title{ width:240px; height:30px; position:relative}
.notice_title a{ font-size:22px; color:#111; font-weight:600; position:absolute; top:5px; right:0; font-family:"Nanum Gothic"}

.quicka{ width:400px; height:145px; margin-left:40px; float:left; overflow:hidden}
.quicka .q1{ width:193px; height:70px;  float:left; border:1px solid #ccc}
.quicka .q2{width:204px; height:70px;  float:left; border-top:1px solid #ccc; border-right:1px solid #ccc;border-bottom:1px solid #ccc;  }
.quicka .q3{width:193px; height:71px;  float:left;border-right:1px solid #ccc ;border-left:1px solid #ccc; border-bottom:1px solid  #ccc}
.quicka .q4{width:204px; height:71px;  float:left;border-right:1px solid #ccc;border-bottom:1px solid #ccc}

.quicka .q1:hover{ background-color:#f1f1f1}
.quicka .q2:hover{ background-color:#f1f1f1}
.quicka .q3:hover{ background-color:#f1f1f1}
.quicka .q4:hover{ background-color:#f1f1f1}

.quickb{width:400px; height:145px; overflow:hidden; margin-left:20px; float:left}



/* bottom div위치조절 */
.bottom_total{ width:1100px; margin:0 auto; height:155px; overflow:hidden; border-top:1px solid #ccc}
.bottom_total_left{ float:left; width:255px; height:155px;}
.bottom_logobox{ width:153px; height:76px; float:left; margin:25px}
.bottom_total_right{ width:845px; height:155px; float:right}

.ftt1{width:845px; height:15px;  margin-top:30px;}
.ftt1 a{font-size:14px; color:#111; margin-right:15px; font-family:"Nanum Gothic"; font-weight:600; }
.ftt1 a:hover{text-decoration:underline; color:#000}
.copybox{ width:845px; height:109px; }
#copy1{ font-family:12px; color:#444; font-family:"Nanum Gothic"; line-height:20px; margin-top:20px;}


/* sub_body div위치조절 */
#sub_img{ margin:20px auto 35px; width:1100px; height:160px; overflow:hidden; background:url(../images/subbg.jpg) no-repeat center top}
#sub_txt{ margin: 50px auto 0; width:744px; height:60px; text-align:center}
#middle_total{margin:0 auto; width:1100px;}

/* 레프트메뉴 */

#left_total{float:left; width:200px;  margin:0 auto 20px}
#left_title{float:left; width:100%; background:#fff; height:105px; background:url(../images/lefttitle_bg.jpg) no-repeat top}
.left_txt1{ font-size:25px; color:#fff; font-family:"Nanum Gothic"; text-align:center; font-weight:600; margin:35px auto 7px}
.left_txt2{ font-size:11px; font-family:"Nanum Gothic"; color:#fff; margin:0 auto; text-align:center}
#left_nav{float:left; width:100%; overflow:hidden; }
#left_nav ul li{list-style-type:none; width:100%; overflow:hidden;}
#left_nav ul li a{display:block; width:200px; overflow:hidden; padding:12px 0 12px 20px; font-family:"Nanum Gothic"; font-size:14px;  color:#333333; font-weight:600; border-bottom:1px solid #ccc;border-left:1px solid #ccc;border-right:1px solid #ccc}
#left_nav ul li a:hover{color:#fff;background:#555555;text-decoration:none}
#left_nav ul li.on a{color:#fff;background:#555555;text-decoration:none}
.left_customer{ width:200px; height:230px; overflow:hidden; margin-bottom:20px; position:relative; top:20px; left:0}

.left_quick{ width:200px; height:500px; overflow:hidden; position:relative}
.q001{ position:absolute; top:20px; left:0}
.q002{ position:absolute; top:100px; left:0}
.q003{ position:absolute; top:180px; left:0}
.q004{ position:absolute; top:260px;; left:0}


/* con 메뉴 */

#con_total{float:right; width:860px; overflow:hidden; }
#con_title{width:860px; height:105px; margin:0 0 40px 0; border-bottom:1px solid #444; position:relative}
#title_a{float:left; text-align:left; border-top:5px solid #004172; font-family:"Nanum Gothic"; font-size:30px;  color:#2;font-weight:600; line-height:60px; margin:25px 0 30px}
#title_b{ position:absolute; bottom:30px; right:0; text-align:right; margin:0; font-family:"Nanum Gothic"; font-size:14px; line-height:30px; font-weight:400; color:#000000;}
#title_b b{ color:#094fb9}

#con{width:860px; min-height:500px; overflow:hidden; margin:0 0 80px 0;}

/*이미지슬라이드 css소스*/
.clear{overflow: hidden; width: 1100px; margin:0 auto;}
.dn {display: none;}

.wrap_box{position:relative;  width:1100px; overflow:hidden; height:400px; margin:40px auto}
.wrap_box .visual{ position: absolute; left:50%; top:0; margin-top: 0px; width:1100px; margin-left:-550px;
height:400px;}
.wrap_box .box {position:relative; width:100%; height:400px;;; margin:0 auto }
.wrap_box .visual .pht{position:absolute; top:0; left:0; width:100%; height:400px;}
.wrap_box .visual .prev {position: absolute; top:100px; left:50%; margin-left:-700px; cursor: pointer; z-index:12}
.wrap_box .visual .next {position: absolute; top:100px; right:50%; margin-right:-700px; cursor: pointer;}
.wrap_box .visual .control{float:left; position:absolute; bottom:20px; left:50%; margin-left:-44px; width:88px;}
.wrap_box .visual .control .fl{float:left; margin-right:10px; cursor: pointer;}
.wrap_box .visual .control .fl:nth-child(4){margin-right:0px;}

#main_ment_wrap{position: absolute;   left:0px; top:0; width:100%; height:120px;
;font-family:"Nanum Gothic" }
#main_ment_total{margin:135px 0 0 45px;
background:url('../images/main_ment.png') no-repeat center; width:544px; height:119px; }


/* 퀵메뉴 */
/*메인 퀵메뉴 버튼설정*/
#main_qmenu{margin:0 auto; width:820px; overflow:hidden;  height:200px;}
#main_qmenu li{float:left;}
#main_qmenu li a{display:block; width:205px; height:200px;}
#qmenu_button01{background:url('../images/quick01.jpg') no-repeat 0 0; width:205px; height:200px; }
#qmenu_button01 img{opacity:0;
    -webkit-transition: transition: all .5s;
    -o-transition:transition: all .5s;
    transition: all .5s;
}
#qmenu_button01:hover img{opacity:1;}

#qmenu_button02{background:url('../images/quick02.jpg') no-repeat 0 0; width:205px; height:200px; }
#qmenu_button02 img{opacity:0;
    -webkit-transition: transition: all .5s;
    -o-transition:transition: all .5s;
    transition: all .5s;
}
#qmenu_button02:hover img{opacity:1;}


#qmenu_button03{background:url('../images/quick03.jpg') no-repeat 0 0; width:205px; height:200px; }
#qmenu_button03 img{opacity:0;
    -webkit-transition: transition: all .5s;
    -o-transition:transition: all .5s;
    transition: all .5s;
}
#qmenu_button03:hover img{opacity:1;}


#qmenu_button04{background:url('../images/quick04.jpg') no-repeat 0 0; width:205px; height:200px; }
#qmenu_button04 img{opacity:0;
    -webkit-transition: transition: all .5s;
    -o-transition:transition: all .5s;
    transition: all .5s;
}
#qmenu_button04:hover img{opacity:1;}

#tab_nav_sub{ width:100%; overflow:hidden; margin-bottom:30px}

#tab_nav_sub ul{ overflow:hidden; width:100%}
#tab_nav_sub ul li{float:left; overflow:hidden; width:286px}
#tab_nav_sub ul li a{display:block; height:45px; border:1px solid #ccc;  font-size:14px; line-height:45px; font-weight:600;color:#333;background:#d9d9d9; text-align:center; font-family:"Nanum Gothic";}
#tab_nav_sub ul li a:hover{background:#ffffff;color:#005aab; font-family:"Nanum Gothic";}
#tab_nav_sub ul li.on a{background:#ffffff;color:#005aab;border:1px solid #005aab; font-family:"Nanum Gothic";}