@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";  color:#333; font-size:15px }

/* div위치조절 */
#wrap{width:100%; overflow:hidden; text-align:left; min-width:1200px; position:relative; background:#ffffff}
#middle_wrap{width:100%; overflow:hidden; position:relative; background-color: #fefdf9;}
#bottom_wrap{width:100%; overflow:hidden; height:150px;}


/* header */
.blind { display: none;  }
.top_wrap{ width:100%; height:35px; position:relative; background:#20B2AA; z-index:1000}
.top_total{ width:1200px; margin:0 auto; overflow:hidden}
.bank{ float:left; color:#ffffff; font-family:"Nanum Gothic"; letter-spacing:-0.025em; font-size:15px; line-height:35px;}
.bank span{ font-weight:600}



#login{ float:right; line-height:35px;}
#login ul {list-style-type:none;}
#login li {float:right; list-style-type:none; margin-left:20px;}
#login li a{display:block;  font-size:12px; color:#ffffff;font-family:"Nanum Gothic"; font-weight:400; letter-spacing:-0.25px}
#login li a:hover{color:#ffffff; background:none;font-weight:600;}

#header { position:fixed; top: 0; left: 0; z-index: 501; width: 100%; /*transition: all 0.5s ease;*/ background:#fff url('../images/dep_bg.png') no-repeat center 125px;  }
#header.absOn {position: absolute; top: 290px;}
.gnb_nav:hover #gnb { padding-bottom: 0px; }


#header::before { content: '';  position: absolute; top:125px; width: 100%; border-bottom: 1px solid #ccc; }
.header_area { width:100%; margin: 0 auto; color: #111; z-index:100; }
.header_area h1 { display: inline-block; position: absolute; top: 10px; left:43%; margin-left:-600px; width: 185px; height: 76px; background: url(../images/log.png) no-repeat; text-indent: -9999px; overflow: hidden; z-index: 503; }

.header_area h1 a { display: block; height: 45px; }
.scroll .header_area h1, .header_area h1 {}

#gnb { position: relative;  text-align: center;  min-width:1200px; width:100%;  }
#gnb:hover{box-shadow: 0px 0px 20px rgba(0,0,0,.5)}

#gnb .gnb_nav {  text-align:center; display:inline-block;}
#gnb .gnb_nav > li { float: left;}
#gnb .gnb_nav::after { display: inline-block; width: 0; height: 0; font-size: 0; content:''; clear: both; }
#gnb .gnb_nav > li > a { position: relative; display: block; color: #111; padding: 0 46px; font-weight: 600;  box-sizing: border-box; line-height:90px; font-size:16px; letter-spacing:-0.05em; font-family:"Nanum Gothic" }
#gnb .gnb_nav > li > a:hover{ color:#20B2AA; }



#gnb .gnb_nav > li > a::after { content:''; display: block; position: absolute; height: 2px; width: 0; bottom: 0px; left: 50%; background:#fff; transition: all 0.5s ease; margin-left: 0;}
#gnb .gnb_nav > li.active > a::after { content:''; display: block; position: absolute; height: 2px; width:0; bottom: 0px; left: 50%; background:#fff; transition: all 0.5s ease; margin-left: 0;}
#gnb .gnb_nav > li > a:hover::after { margin-left:-50%;width:100%;transition:all 0.5s; background:#20B2AA; }
#gnb .gnb_nav > li.active > a::after { margin-left:-50%; width:100%; transition:all 0.5s; background:#20B2AA;}


#gnb .gnb_nav .dep2 { display: none; height:305px; }
#gnb .gnb_nav .dep2 > ul { padding-top: 25px; }
#gnb .gnb_nav .dep2 > .li_dep > li > a { position: relative; display: block; line-height: 35px; font-size: 15px; font-weight: 400; color:#444; letter-spacing:-0.05em}
#gnb .gnb_nav .dep2 > .li_dep > li > a:hover {  font-weight: 600;color: #000;}
#gnb .gnb_nav a.dep_m2:hover { color: #000; font-weight:600 }
#gnb .gnb_nav > li:hover > a{ color:#20B2AA; }


/*sub코딩*/
#sub_img{ margin:125px auto 0; width:100%; height:250px; overflow:hidden; background:url(../images/subbg.jpg) no-repeat center top; position:relative}
#sub_txt {
  margin: 110px auto 0;
  overflow: hidden;
  width: 1200px;
  height: 51px;
  font-size: 35px;
 font-family: 'NanumSonPyeonji', sans-serif;
  text-align: center;
  animation: changeTextColor 4s infinite alternate;
}

@keyframes changeTextColor {
  0%   { color: #c0b8b8; } /* 빨강 */
  25%  { color: #45545f; } /* 초록 */
  50%  { color: #5d9bb8; } /* 파랑 */
  75%  { color: #406e59; } /* 노랑 */
  100% { color: #ffffff; } /* 분홍 */
}


#middle_total{margin:0 auto; width:1200px;}
#left_total{float:left; width:220px; overflow:hidden; margin:40px 0 50px 0;}
#left_title{float:left; width:100%; height:100px; margin-bottom:1px; background:#30832e}
.left_txt1{width:100%; text-align:center; font-family:"Nanum Gothic"; font-size:22px; color:#fff; font-weight:600; letter-spacing:-0.05em; margin-top:30px;}
.left_txt2{width:100%; text-align:center; font-family:"Nanum Gothic"; font-size:12px;  color:#fff; font-weight:400; letter-spacing:-0.025em; line-height:20px}
#left_nav{float:left; width:100%; overflow:hidden; margin-bottom:15px}
#left_nav ul li{list-style-type:none; width:100%; overflow:hidden;}
#left_nav ul li a{display:block; width:220px; overflow:hidden; padding-left:20px; font-family:"Nanum Gothic"; font-size:14px; line-height:45px; color:#333333; font-weight:600; border-bottom:1px solid #ddd; background:#ffffff;border-left:1px solid #ddd;border-right:1px solid #ddd; height:45px; letter-spacing:-0.05em}
#left_nav ul li a:hover{color:#30832e;background:#f1f1f1;text-decoration:none}
#left_nav ul li.on a{color:#30832e; background:url(../images/left_hover.png) #f1f1f1;font-family:"Nanum Gothic"}
#left_customer{ width:220px; overflow:hidden; margin-top:10px;}



#con_total{float:right; width:930px; overflow:hidden;margin-bottom:100px;}
#con_title{width:930px; height:100px; margin:40px 0 45px 0; border-bottom:1px solid #ddd; position:relative}


#title_aa{ overflow:hidden; width:933px; height:106px;  text-align:left; float:left; background:url(../images/right_title_bg.jpg) no-repeat left top}
#title_a{float:left; width:930px; text-align:left; margin:25px 0 0 50px; font-family:"Nanum Gothic"; font-size:25px; color:#222222;font-weight:600; letter-spacing:-0.05em}
#title_b{ float:left; font-size:14px; color:#777777; letter-spacing:-0.05em; font-family:"Nanum Gothic"; margin-top:10px; font-family:"Nanum Gothic"; margin-left:50px;}


#title_c{ float:right; font-size:13px; color:#111111; letter-spacing:-0.05em; font-family:"Nanum Gothic"; margin-top:65px; font-family:"Nanum Gothic"}



/*이미지슬라이드 css소스*/
.clear{overflow: hidden; width: 1200px; margin:0 auto;}
.dn {display: none;}
#main_slide{ position:relative; margin-top:125px; width:100%; height:655px;}
.wrap_box{position:relative;  width:100%; overflow:hidden; height:655px; margin:0 auto ;}
.wrap_box .visual{ position: absolute; left:50%; top:0; margin-top: 0px; width:1920px; margin-left:-960px;
height:655px;}
.wrap_box .box {position:relative; width:100%; height:100%;; margin:0 auto }
.wrap_box .visual .pht {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    animation: floatImage 5s ease-in-out infinite;
}

@keyframes floatImage {
    0% { transform: translateX(0); }
    50% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}
.wrap_box .visual .control{float:left; position:absolute; bottom:175px; left:50%; margin-left:-600px; width:85px;}
.wrap_box .visual .control .fl{float:left; margin-right:8px; 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:250px; font-family:"Nanum Gothic" }
#main_ment_total {
    position: absolute;
    left: 47%;
    top: 90px;
    margin-left: 308px;
    background: url('../images/main_character.png') no-repeat left top;
    width: 1200px;
    height: 521px;
    text-align: left;
    overflow: hidden;

    animation: floatUpDown 4s ease-in-out infinite;
}

/* 위아래로 둥둥 떠다니는 애니메이션 */
@keyframes floatUpDown {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-30px); }
    100% { transform: translateY(0px); }
}

#main_ment_b1 {
    position: absolute;
    left: 48%;
    top: 134px;
    margin-left: 193px;
    background: url('../images/main_b1.png') no-repeat left top;
    width: 1200px;
    height: 521px;
    text-align: left;
    overflow: hidden;

    animation: floatUpDown 7s ease-in-out infinite;
}

/* 위아래로 둥둥 떠다니는 애니메이션 */
@keyframes floatUpDown {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-50px); }
    100% { transform: translateY(0px); }
}

#main_ment_b2 {
    position: absolute;
    left: 43%;
    top: 359px;
    margin-left: 301px;
    background: url('../images/main_b2.png') no-repeat left top;
    width: 1200px;
    height: 521px;
    text-align: left;
    overflow: hidden;

    animation: floatUpDown 8s ease-in-out infinite;
}

/* 위아래로 둥둥 떠다니는 애니메이션 */
@keyframes floatUpDown {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-40px); }
    100% { transform: translateY(0px); }
}

.main_middle_wrap1{ width:100%; height:140px; position:relative; background:#20B2AA;}
.main_middle_total1{ width:1200px; height:140px; position:relative;overflow:hidden; margin:0 auto;  }
#quick_con{  width:100%; height:140px; overflow:hidden; position:relative; }
#quick_con li{ float:left; width:240px; height:140px; background:url(../images/quick_bg2.png) no-repeat center top;}
#quick_con li a{ text-indent:-5000px; display:block; width:240px; height:140px;}
#quick_con li#q01{  background-position:0 0; }
#quick_con li#q02{  background-position:-240px 0; }
#quick_con li#q03{  background-position:-480px 0; }
#quick_con li#q04{  background-position:-720px 0; }
#quick_con li#q05{  background-position:-960px 0; }

#quick_con li#q01:hover{  background-position:0 -140px; }
#quick_con li#q02:hover{  background-position:-240px -140px; }
#quick_con li#q03:hover{  background-position:-480px -140px; }
#quick_con li#q04:hover{  background-position:-720px -140px; }
#quick_con li#q05:hover{  background-position:-960px -140px; }

.main_middle_wrap2{ width:100%; height:380px; position:relative; background:#fff;}
.main_middle_total2{ width:1200px; height:380px; position:relative;overflow:hidden; margin:0 auto; padding:70px 0  }
.gallery_title{     width: 1200px;
    text-align: center;
    height: 60px;
    margin-bottom: 30px;
    font-size: 34px;
    font-weight: bold;
    font-family: 'Nanum Gothic';
    color: #3a5c7a; }

.main_middle_wrap3{ width:100%; height:440px; background:url(../images/maincon_bg.jpg) no-repeat center top; position:relative}
.main_middle_total3{ width:1200px; height:440px; position:relative;overflow:hidden; margin:0 auto; padding:0px 0  }
.main_middle_total3_con{     width: 947px;
    height: 359px;
    float: right;
    margin-top: 108px;
    overflow: hidden;
  }

.customer{ float:left; width:340px; height:220px; border-left:1px solid #dddddd; border-right:1px solid #dddddd; border-bottom:1px solid #dddddd; border-top:3px solid #777777; background:#ffffff80;}
.notice{ float:left; width:690px; height:220px; border-left:1px solid #dddddd; border-right:1px solid #dddddd; border-bottom:1px solid #dddddd; border-top:3px solid #777777; background:#ffffff80; margin-left:10px;}
.notice_title{ width:690px; height:70px; position:relative;}
.notice_title>a{ position:absolute; top:0; right:2px;}


.main_middle_wrap4{ width:100%; position:relative; background:#fff;}
.main_middle_total4{     width: 1259px;
    height: 357px;
    /* position: relative; */
    overflow: hidden;
    /* margin: 0 auto; */
    top: 107px; }
#quick_con2{  width:1200px; height:95px; overflow:hidden; position:relative; margin:60px auto; }
#quick_con2 li{ float:left; width:600px; height:95px; background:url(../images/quick_bg3.png) no-repeat center top;}
#quick_con2 li a{ text-indent:-5000px; display:block; width:600px; height:95px;}
#quick_con2 li#q06{  background-position:0 0; }
#quick_con2 li#q07{  background-position:-600px 0; }

#quick_con2 li#q06:hover{  background-position:0 -95px; }
#quick_con2 li#q07:hover{  background-position:-600px -95px; }


/* 탭네비 */
#tab_nav_sub{ background:#fefdf9;padding:0; width:930px; display:block; margin:0 auto 40px;}

#tab_nav_sub ul{ overflow:hidden; margin:0 auto; display:table}
#tab_nav_sub ul li{float:left; overflow:hidden; }
#tab_nav_sub ul li a{display:block;line-height:50px; width:156px; text-align:center;font-size:15px; font-weight:600; color:#444444; letter-spacing:-0.05em; border:2px solid #ccc; margin-right:10px; font-family:"Nanum Gothic"}
#tab_nav_sub ul li a:hover{color:#30832e;font-weight:600;border:2px solid #30832e}
#tab_nav_sub ul li.on a{color:#30832e;font-weight:600;border:2px solid #30832e}












/* bottom div위치조절 */
#bottom_wrap1{ width:100%; height:50px; margin:0 auto; background:#222222; border-bottom:1px solid #444444; animation: bgPulse 4s infinite alternate;}
@keyframes bgPulse {
  0% {
    background: #5f3f89;
  }
  50% {
    background: #8a64c1;
  }
  100% {
    background: #3e2a61;
  }
}
#bottom_total1{ width:1200px; margin:0 auto; overflow:hidden}
.ftt1{ float:left; overflow:hidden;}
.ftt1 a{font-size:13px; color:#bbbbbb; font-family:"Nanum Gothic"; letter-spacing:-0.25px; text-align:right; line-height:50px; }
.ftt1 a:hover{ font-weight:600; color:#fff}

#bottom_wrap2{ width:100%; height:100px; margin:0 auto; background:#222222; animation: bgPulse 4s infinite alternate;}
@keyframes bgPulse {
  0% {
    background: #5f3f89;
  }
  50% {
    background: #8a64c1;
  }
  100% {
    background: #3e2a61;
  }
}
#bottom_total2{ width:1200px; margin:0 auto; overflow:hidden}

.bottom_logobox{ float:left; margin-top:9px;}
#copy1{ margin:30px 0 0 40px; font-family:"Nanum Gothic"; font-size:13px; color:#bbbbbb; line-height:22px; letter-spacing:-0.25px; float:left}