/* nav */
#header
{height : 80px; text-align : center; background:white;}
#header .inner
{width : 100%; padding : 0; display : inline-block; max-width : 1750px;}
#header .inner h1
{width : 163px; padding-top : 30px;}

#gnb_wrap
{width : 1138px; text-align : center; position : absolute; float:right; right:320px;}
#gnb
{position : relative;width : 100%; display : inline-block;}
#gnb > li
{width : 284px;}
#gnb > li > a
{padding-top : 25px; font-family : 'Work Sans' , 'notokr';}
#gnb > li > a > span
{font-size: 18px; color : #4e4c4c; font-weight:500;}
#gnb > li > a > span:before
{background:#013c96;}


#gnb > li > ul.submnu
{left:30px; min-width : 224px;}
#gnb > li > ul.submnu li a
{font-size:14px color : #7b7b7b;}
#gnb > li > ul.submnu >li:before
{background:#013c96;}

#header.scroll
{background:white;}


.top_menu
{float: right; margin-top : 30px;}
.top_menu > .login
{display : inline-block; margin-right : 15px;}
.top_menu > .login > .lock
{background:url('main/lock_open.png') no-repeat center; width : 13px; height : 17px; display : inline-block;}
.top_menu > .join
{display : inline-block;}
.top_menu > .join > .mem
{background:url('main/member_ico.png') no-repeat center; width : 13px; height : 17px; display : inline-block;}
.top-menu a
{font-size:14px; color:#666666;}

@media screen and (max-width : 1750px){
    #header .inner
    {max-width : 1300px;}
    #gnb_wrap
    {width : 800px;}
    #gnb > li
    {width : 200px;}
    #gnb > li > ul.submnu
    {left:-15px;}
}

@media screen and (max-width : 1300px){
    #header .inner
    {max-width:1200px;}
    #gnb_wrap
    {width : 600px;}
    #gnb > li
    {width:150px;}
    #gnb > li > ul.submnu
    {left:-45px;}

    

}
@media screen and (max-width : 1024px){
    #gnb_wrap a.gnb_top
    {background:#00439b;}
    #header .inner h1
    {position : absolute; left:50px;}
    #gnb_wrap
    {width : 250px; position : fixed; right:-270px;}
    #gnb
    {left:0px;}
    #gnb > li
    {width : 100%;}
    .top_menu
    {display : none;}
}

@media screen and (max-width:450px){
    
    #header .inner h1
    {padding-top : 20px; left:20px;}
}



/*sub*/
#leftBar
{padding-bottom:50px;}
#leftBar .title
{background:#063290;}
#lnb li.on a
{background:#0062b2;}
#lnb li:hover a
{background:#1b7ac7;}

.tbl_board thead td
{background:#3167a0 !important;}
.tbl_contact .contact_line
{background:#3167a0 !important;}

#sub_visual > .imgList
{height:200px;}
#sub_visual > .imgList > li
{height : 100%;}
#sub_visual > .imgList > li > p
{text-align: center; padding-top : 70px; font-size:36px; color: white;}

#sub_visual > .imgList > li.m01
{background:url('top_img01.jpg') no-repeat center;}
#sub_visual > .imgList > li.m02
{background:url('top_img02.jpg') no-repeat center;}
#sub_visual > .imgList > li.m03
{background:url('top_img03.jpg') no-repeat center;}
#sub_visual > .imgList > li.m04
{background:url('top_img04.jpg') no-repeat center;}




#container > .inner .content:before
{border:none;}


.brd_photo_list > table
{width : 33.0% !important;}


#container .inner .content .title h2
{margin-bottom:0px;}

.product .sul_menu
{padding-bottom:20px; border-bottom:1px solid #e5e5e5;}
.product .sul_menu a
{padding : 10px 17px; border : 1px solid #9c9c9c; font-family:'Work Sans','notokr'; }
.product .sul_menu a:hover
{color : #063290;}
.product .sul_menu a font
{font-size:14px !important; color:#333 !important;}
.product .sul_menu a:hover font
{color:#063290 !important;}


/*기업개요*/
.content .greeting .info_box dl:nth-child(6) dt
{padding-bottom : 20px; padding-top :17px;}
/* 연혁*/
.content .history .history_box
{margin-bottom:0px;}
.content .history .history_box:after
{display : inline-block; content:none;}
.content .history .history_box .his_tit
{margin-bottom: 20px; padding-bottom : 20px;}

@media screen and (max-width : 640px){
    #sub_visual > .imgList > li > p
    {font-size:28px; padding-top : 60px;}
    #leftBar a.dropdown
    {background : #00439b;}
    #lnb li.on a span
    {border : none; color : white;}
    #lnb li:hover a
    {color : white;}
}

/* slider */

#mainSlider ul.imgList li.img1
{background:url("main/slider_img1.jpg") center no-repeat;}
#mainSlider ul.imgList li.img2
{background:url("main/slider_img2.jpg") center no-repeat;}
#mainSlider ul.imgList li.img3
{background:url("main/slider_img3.jpg") center no-repeat;}
#mainSlider ul.imgList li
{height : 614px;}

#mainSlider ul.imgList li .caption
{ max-width : 610px; margin-left : 960px; padding : 0px; top : 30%;}
#mainSlider ul.imgList li .caption > h2
{color : white; font-size:30px; font-weight : 100;}
#mainSlider ul.imgList li .caption > p
{max-width : 100%; font-size:48px; color : white; line-height:100%; margin-top : 20px; font-weight : 300;}
#mainSlider ul.imgList li .caption > p > span
{font-weight : 400; display : inline-block;}
#mainSlider ul.imgList li .caption > span
{font-size:17px; color : white; margin-top : 30px; display : block; font-weight : 100;}


#mainSlider ul.imgList li .caption h2:after
{content : none;}

#container .mainSection .inner
{width : 100%; max-width : 1138px; padding : 0px;}


#mainSlider ul.pagination li.active
{background:white;}
#mainSlider ul.pagination li
{border-color : white;}

@media screen and (max-width : 1580px){
    #mainSlider ul.imgList li .caption
    {margin-left:770px;}
}

@media screen and (max-width : 1400px){
    #mainSlider ul.imgList li .caption
    {margin-left:670px;}
    #mainSlider ul.imgList li .caption > h2
    {font-size:24px;}
    #mainSlider ul.imgList li .caption > p
    {font-size:42px;}


}

@media screen and (max-width : 1200px){
    #mainSlider ul.imgList li .caption
    {margin-left:600px;}
}

@media screen and (max-width : 1024px){
    #mainSlider ul.imgList li
    {height:474px;}
    #mainSlider ul.imgList li .caption
    {margin-left:500px; top : 20%;}
}

@media screen and (max-width : 840px){
    #mainSlider ul.imgList li
    {height:400px;}
    #mainSlider ul.imgList li .caption
    {margin-left:430px;}
    #mainSlider ul.imgList li .caption > h2
    {font-size:22px;}
    #mainSlider ul.imgList li .caption > p
    {font-size:36px; margin-top : 20px;}
    #mainSlider ul.imgList li .caption > span
    {font-size:15px; margin-top : 20px;}
}


@media screen and (max-width : 750px){
    #mainSlider ul.imgList li
    {height:330px;}
    #mainSlider ul.imgList li .caption
    {margin-left:360px;}
    #mainSlider ul.imgList li .caption > h2
    {font-size:26px;}
    #mainSlider ul.imgList li .caption > p
    {font-size:32px;}
    #mainSlider ul.imgList li .caption > span
    {display : none;}
}


@media screen and (max-width : 450px){
    #mainSlider ul.pagination
    {bottom:10px;}
    #mainSlider ul.imgList li
    {height:200px;}
    #mainSlider ul.imgList li .caption
    {margin-left:0px; float:right; padding-right:10px;}
    #mainSlider ul.imgList li .caption > h2
    {font-size:18px;}
    #mainSlider ul.imgList li .caption > p
    {font-size:24px;}
    #mainSlider ul.imgList li .caption > p > span
    {font-weight:600;background:#333;}
    #mainSlider ul.pagination li
    {width : 13px;height:13px;}

}
@media screen and (max-width : 410px){
    #mainSlider ul.imgList li
    {height:180px;}


    #mainSlider ul.imgList li .caption > h2
    {font-size:16px;}
    #mainSlider ul.imgList li .caption > p
    {font-size:22px; margin-top : 10px;}

    
}

@media screen and (max-width : 360px){
    #mainSlider ul.pagination
    {bottom : 0px;}
}





/* section01 */
#container .mainSection .inner .title h2
{font-size:46px; font-weight: 600; color : #2e2e2e; text-transform :uppercase; letter-spacing:-2px; margin-bottom : 10px; }
#container .mainSection .inner .title span
{font-size:17px; color : #777777;}
#container .mainSection .inner .title h2::after
{content:none;}
#container .section1 table.board_output > tbody > tr > td > table > tbody > tr > td
{width : 270px; display : inline-block; margin-right:19px;}
#container .section1 table.board_output > tbody > tr > td > table > tbody > tr > td:nth-child(4)
{margin-right:0px;}
#container .section1 table.board_output > tbody > tr td tr:nth-child(2)
{text-align : center;}


@media screen and (max-width : 1138px){
    #container .mainSection .inner
    {max-width : 800px; padding : 0 30px;}
    
    #container .section1 table.board_output > tbody > tr > td > table > tbody
    {text-align : center;}
    #container .section1 table.board_output > tbody > tr > td > table > tbody > tr > td:nth-child(4)
    {margin-right:19px;}
}

@media screen and (max-width : 450px){
    #container .mainSection .inner .title h2
    {font-size:36px;}
    #container .mainSection .inner .title span
    {font-size:14px;}

    #container .section1 table.board_output > tbody > tr > td > table > tbody > tr > td
    {margin : 0px;}
}

/* sectuib02 */
.mainSection.section2
{background:url('main/m_about_bg.jpg') center top no-repeat; background:cover; padding : 85px 0 !important;}
.mainSection.section2 .inner h2
{margin-bottom : 10px; color : white; font-weight : 600; font-size: 46px;}
.mainSection.section2 .inner span
{background : none; padding : 0px;  font-size: 17px; font-weight : 100; display : block; padding-bottom : 54px;}
.mainSection.section2 .inner:hover span
{color : white; background : none;}

.mainSection.section2 .inner .content 
{width : 238px; height : 238px; display : inline-block; margin-right: 57px;}
.mainSection.section2 .inner #con04
{margin:0px;}

.mainSection.section2 .inner #con01
{ background:url('main/m_about_con01.png') no-repeat center;}
.mainSection.section2 .inner #con02 
{ background:url('main/m_about_con02.png') no-repeat center;}
.mainSection.section2 .inner #con03 
{ background:url('main/m_about_con03.png') no-repeat center;}
.mainSection.section2 .inner #con04 
{ background:url('main/m_about_con04.png') no-repeat center;}

.mainSection.section2 .inner .content:hover
{transform : scale(1.01, 1.01);}

.mainSection.section2 .inner .content p
{padding-top : 164px; font-size:16px;}

@media screen and (max-width : 1138px){
    .mainSection.section2
    {background-size:cover;}
    .mainSection.section2 .inner .content
    {margin-top : 30px;}
    .mainSection.section2 .inner #con02
    {margin-right:0px;}
  
}

@media screen and (max-width : 537px){
    .mainSection.section2 .inner .content
    {margin-right:0px;}
    .mainSection.section2 .inner #con04
    {margin-top : 30px;}
}

@media screen and (max-width : 450px){
    .mainSection.section2 .inner h2
    {font-size:36px;}
    .mainSection.section2 .inner span
    {font-size:14px; padding-bottom :30px;}

    .mainSection.section2 .inner .content 
    {width : 188px;height:188px;}
    .mainSection.section2 .inner #con01 , .mainSection.section2 .inner #con02 , .mainSection.section2 .inner #con03, .mainSection.section2 .inner #con04
    {background-size:cover;}
    .mainSection.section2 .inner .content p
    {padding-top : 134px;}
}



.mainSection.section4 .inner > div .tit h3
{font-size:26px; color : #333333;}
.mainSection.section4 .inner .latestBox:nth-child(2)
{width:240px;}
.mainSection.section4 .inner .latestBox .sec04_box
{width : 231px; height: 74px; display : inline-block; margin-bottom : 10px;}
.mainSection.section4 .inner .latestBox .sec04_box p
{padding : 23px 37px 0; font-size:16px; color : #4e4e4e;}

.mainSection.section4 .inner .latestBox #cs_con01
{background:url('main/m_cs_con01.png') no-repeat center;}
.mainSection.section4 .inner .latestBox #cs_con02
{background:url('main/m_cs_con02.png') no-repeat center;}



.mainSection.section4 .inner .latestBox #cs_con01:hover p, .mainSection.section4 .inner .latestBox #cs_con02:hover p
{transform:scale(1.03, 1.03);}

.mainSection.section4 .inner .customerBox
{float:right; margin-left : 0px;}
.mainSection.section4 .inner .customerBox .sec04_customer
{background:url('main/m_cs_img.jpg') no-repeat center; width : 388px; height : 155px; }

.mainSection.section4 .inner .customerBox #mobile
{display : none;}

@media screen and (max-width : 1138px){
    .mainSection.section4 .inner .latestBox
    {clear:both; width : 100%; margin-bottom: 30px; }
    .mainSection.section4 .inner .latestBox:nth-child(2)
    {width : 100%; text-align: center; margin-left:0px;}
    .mainSection.section4 .inner .latestBox:nth-child(2) a
    {text-align: left;}
    .mainSection.section4 .inner .customerBox
    {float:none;; text-align: center;}
    .mainSection.section4 .inner .customerBox .sec04_customer
    {display : inline-block;}


}

@media screen and (max-width : 450px){
    .mainSection.section4 .inner .customerBox .sec04_customer
    {width : 338px; background-size:cover;}
    .mainSection.section4 .inner .customerBox #mobile
{display : inline-block}
.mainSection.section4 .inner .customerBox #computer
{display : none;}

}

@media screen and (max-width:410px){
    #container .mainSection .inner
    {padding : 0 10px;}
}

@media screen and (max-width : 370px){
    #container .mainSection .inner
    {padding:0px;}
    .mainSection.section4 .inner .latestBox:first-child
    {padding:0 10px;}

}