@charset "utf-8";
/* CSS Document */
#wrap {background:rgb(238, 241, 245) url("../_Image/main/Main_Design_02.jpg") no-repeat left top; height: 100%; overflow: hidden; position: relative;min-height: 100%; background-size: cover; background-position:center; }

#Main_Wrap { margin: auto; width: 100%; height: 100%; position: absolute; min-width: 320px; }
#Main_Wrap:after { content:''; display:block ; clear:both }



#sub_Wrap { float:left; margin: auto; width: 100%; height: 100%; position: absolute; min-width: 320px; }
#sub_Wrap:after { content:''; display:block ; clear:both }

.contWarp {padding: 0px; width: 100%; height: 100%; text-align: left;}
#header { margin: 0px auto; background:#33343b; top: 0px; left: 0px; width: 215px; height: 100vh; position: fixed; z-index: 100; float: left; min-height: 100%;}


#MainContant { position: relative; left:215px; width: calc(100% - 215px); margin-top:0;}
#MContant { position: relative; left:215px; width: 1044px; margin-top:0;}

/*글로벌메뉴*/
#tgnb {float:right; background:#b2b7bc; height:34px; width:100%}
#tgnb ul{ float:right;}
#tgnb li { float:left; padding:0 7px; background:url(../_Image/Common/tgnbline.gif) no-repeat left 60%; color: #FFF; font-size: 0.75em; font-weight: 600; line-height:30px }
#tgnb li a {color: #FFF;}
#tgnb li a:hover {color: #000000}

.popup_close { background-color: #f5f5f5; padding: .5rem 1rem}
.popup_close a { float: right; font-weight:bold;}
.pop_title { display: none; color: #242427; font-size: 2.4rem; margin-bottom: 2.5rem }
.pop_close { display: none; position: absolute; right: 3rem; top: 3rem; font-size: 2.5rem; color: #242427 }

.layer_pop {top:20px; left:220px; position:absolute; z-index:999999;}

.banner_right {position:absolute; top:0; right:0; width:236px;}
.banner_icon {position:relative; margin:0 auto; text-align:center; top:320px; width:100%}

/*모바일메뉴*/
#header_m {width: 100%; display: none;}
#header_m h1 {text-align: center; background: rgb(255, 255, 255); height:45px; padding-top:8px;}
#header_m h2.seem {background:url("../_Image/Common/btn_gnb.gif") no-repeat left center; left: 10px; top: 12px; width: 32px; height: 30px; display: block; position: absolute; cursor: pointer;}
#header_m h2.seem span {margin: 4px 0px 0px 60px; text-align: left; color: rgb(47, 47, 47); line-height: 13px; letter-spacing: 0.05em; font-size: 11px; display: none;}
#header_m .gnbw {background: #33343b; left: -100%; top: 0px; width: 100%; position: absolute; z-index: 20;}
#header_m #gnb_m {margin: 0px; padding: 100px 0px 0px; width: 100%; height: 10000px;}
#header_m #gnb_m li.dep1 {margin: 0px; padding: 15px 0px 15px 20px; color: #fff; border-bottom-color: #444450; border-bottom-width: 1px; border-bottom-style: solid;}
#header_m #gnb_m li.on.dep1 {padding-bottom: 0px; margin-top: 0px;  background:#52a1db}
#header_m #gnb_m li.dep1 a.d1 {color: #fff; padding-left: 10px; font-size: 16px; font-weight:500; display:block;}
#header_m #gnb_m li.on.dep1 a.d1 {color: #FFF; font-size: 16px; font-weight:500}
#header_m #gnb_m li.dep1 ul {background: #fff; margin: 12px 0px 0px -20px; padding: 0px 17px 3px 28px; display: none; color: #575757}
#header_m #gnb_m li.dep1 ul li.dep2 {padding: 11px 0px 6px; color: #575757; font-weight:600;border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; position: relative;}
#header_m #gnb_m li.dep1 ul li.dep2 ul { margin: 12px 0px 0px -20px; padding: 0px 17px 3px 20px; width: 110px; display: block;}
#header_m #gnb_m li.dep1 ul li.dep2 ul li.dep3 {padding: 11px 0px 6px; color: rgb(47, 47, 47); font-size: 12px; border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; position: relative;}
#header_m #gnb_m li.dep1 ul li.bold.dep2 {font-weight: 500;}
#header_m #gnb_m li.dep1 ul li.dep2 a {color: #575757; display:block;}
#header_m #gnb_m li.dep1 ul li.on.dep2 a {color: #52a1db;}
#header_m #gnb_m li.dep1 ul li.bold.dep2 ul li.dep3 {font-weight: 500;}
#header_m #gnb_m li.dep1 ul li.dep2 ul li.dep3 a {color: #52a1db; font-weight: normal;}
#header_m #gnb_m li.dep1 ul li.on.dep2 ul li.dep3 a {color: rgb(255, 222, 57);}
#header_m .g_close {top: 35px; right: 18px; display: block; position: absolute;}


.main_img {width:100%; height:662px; background:url("../_Image/main/Main_Design_01.jpg") no-repeat left top; background-size: 100% 100%; background-size: cover; background-position:center}
.copy {position: absolute; top: 200px; padding:10px 0px; width: calc(100% - 236px); text-align:center;}
.copy .title { font-size:32px; font-weight:bold; color:#333333; margin-bottom:15px;}
.copy .s_title { font-size:18px; color:#222;}

.main_img ul { width: calc(100% - 236px);  /*margin: 60px auto; position: absolute; left: 40px; top: 320px;*/}
.main_img ul li{ display:inline; padding:0 2px}
.main_img_m {width:100%; height:440px; display:none; background:url("../_Image/main/Main_Design_01.jpg") no-repeat left top; background-size: 100% 100%; background-size: cover;}
.main_img_m ul { margin: 60px auto; position: absolute; left: 14px; top: 20px;}
.main_img_m ul li{ display:inline; padding:0 5px}


.Slider {float: left; width: 328px; margin-right:20px;}

/*대표전화*/
.m_customer {float: left; padding:20px; background:#51515a; position: relative; width:196px; height:215px; margin-top:20px;}
.m_customer h2 {width:100%; height:22px; font-size: 18px; color: #ffffff; margin-bottom:10px; font-weight:500;}
.m_customer dl { background:url(../_Image/Main/customerbg.png) no-repeat right bottom; height:150px}
.m_customer dt { display: block; font-size:27px;color:#ffffff; font-weight:600; padding-bottom:10px; line-height:20px}
.m_customer dd { color:#ffffff; font-weight:600; line-height:16px}

/*환율정보*/
.m_exchange {float: left; padding:20px 20px 10px 20px; background:#6399d9; position: relative; width:196px; height:165px;}
.m_exchange h2 {width:100%; height:22px; font-size: 18px; color: #ffffff; margin-bottom:10px; font-weight:500;}
.m_exchange .more {top: 17px; right: 20px; position: absolute;}
.m_exchange ul { background:url(../_Image/Main/exchangebg.png) no-repeat right bottom; height:144px; font-weight:600; }
.m_exchange ul li { display: block; color:#ffffff; }
.m_exchange ul li span { color:#ffffff}

/*hs코드검색*/
.m_hs {float: left; padding:20px; background:#6c748d;  position: relative; width:196px; height:152px; }
.m_hs h2 {width:100%; height:22px; font-size: 18px; color: #ffffff; margin-bottom:10px; font-weight:500;}
.m_hs .hs dt { float:left; display: inline; width:40%}
.m_hs .hs dt input { border:1px solid #d5d5d5; font-size:12px; padding:4px 2px; line-height:14px;}
.m_hs .hs dd { float:right; font-size: 12px;color:#575757; font-weight:600; line-height:16px; padding-bottom:10px}
.btgo {clear:both; float:left ; width:100%; border-top: 1px dashed #a29c71; line-height:18px; padding :10px 0}
.btgo .l50 { float:left ;width:35%; padding-right:20px}
.btgo .r50 { float:left ;width:47%}

/*정보조회*/
.m_business {float: left; padding:30px; background:url(../_Image/Main/boxicon.gif) no-repeat left top; margin-bottom:5px; width:45%; border-left:none ; padding-bottom:14px}
*:first-child+html .m_business {padding-bottom:20px}
.m_business h2 {width:100%; height:22px; font-size: 18px; color: #333333; margin-bottom:10px; font-weight:600;}
.m_business ul {  width:100%; margin:0 auto}
.business {float: left; width:100%;}
.business ul { margin:0 auto}
.business ul li { width:25%; float: left; overflow:hidden; cursor: pointer;text-align:right; margin:1%; padding:15px 5%; text-align:left; padding-right:0}
.business ul li a { font-size: 14px; font-weight:500; letter-spacing:-1px; padding-left:20px}
.business .bu_memu01 { background:#fff url("../_Image/Main/main_business01.png") no-repeat 3% 20%; border:1px solid #cdcdcd;}
.business .bu_memu01:hover { background: #fff url("../_Image/Main/main_business01.png") no-repeat 3% 20%; color:#fff; border:1px solid #33343b;}
.business .bu_memu02 { background:#fff url("../_Image/Main/main_business02.png") no-repeat 3% 20%; border:1px solid #cdcdcd;}
.business .bu_memu02:hover { background: #fff url("../_Image/Main/main_business02.png") no-repeat 3% 20%; color:#fff; border:1px solid #33343b;}
.business .bu_memu03 { background:#fff url("../_Image/Main/main_business03.png") no-repeat 3% 20%; border:1px solid #cdcdcd;}
.business .bu_memu03:hover { background: #fff url("../_Image/Main/main_business03.png") no-repeat 3% 20%; color:#fff; border:1px solid #33343b;}
.business .bu_memu04 { background:#fff url("../_Image/Main/main_business04.png") no-repeat 3% 20%; border:1px solid #cdcdcd;}
.business .bu_memu04:hover { background: #fff url("../_Image/Main/main_business04.png") no-repeat 3% 20%; color:#fff; border:1px solid #33343b;}
.business .bu_memu05 { background:#fff url("../_Image/Main/main_business05.png") no-repeat 3% 20%; border:1px solid #cdcdcd;}
.business .bu_memu05:hover { background: #fff url("../_Image/Main/main_business05.png") no-repeat 3% 20%; color:#fff; border:1px solid #33343b;}
.business .bu_memu06 { background:#fff url("../_Image/Main/main_business06.png") no-repeat 3% 20%; border:1px solid #cdcdcd;}
.business .bu_memu06:hover { background: #fff url("../_Image/Main/main_business06.png") no-repeat 3% 20%; color:#fff; border:1px solid #33343b;}

/*공지사항*/
.m_notice {float: left; padding:30px 0px 30px 30px; background:url(../_Image/Main/boxicon.gif) no-repeat left top;  position: relative; margin-bottom:5px; width:45%; border-left:none}
.m_notice h2 {width:100%; height:22px; font-size: 18px; color: #333333; margin-bottom:7px; font-weight:600;}
.m_notice .more {top: 25px; right: 0px; position: absolute;}
.m_notice dl {clear:both}
.m_notice dl a {font-size: 14px;}
.m_notice dl a:hover {font-size: 14px;color:#000000}
.m_notice dt { display: inline; background:url(../_Image/Main/notice_icon.gif) no-repeat left 12px; line-height:28px; float:left ; padding-left:10px }
.m_notice dd { display: inline; float:right; line-height:30px;}
*:first-child+html .m_notice dt { display: inline; background:url(../_Image/Main/notice_icon.gif) no-repeat left 50%; line-height:21px; float:left ; padding-left:10px }
*:first-child+html .m_notice dd { display: inline; float:right; line-height:21px;}

/*배너*/
.m_banner {width:100%; border-left:none; overflow:hidden}
.m_banner dl { padding-left:30px;}
.m_banner dt { width:100%; height:22px; font-size: 18px; color: #333333; margin-bottom:7px; font-weight:600;}
.m_banner dd { display: inline-block; /*padding-right:10px; padding-bottom:5px; */width:12%}
.m_banner .imgnone {background:none}


.table_ex {width: 100%;}
.table_ex th {padding: 2px 7px; text-align: center; color:#333333; font-weight:600; background:#fff; font-size: 12px; border: 1px solid #fff; border-bottom:1px solid #fff; white-space:nowrap;}
.table_ex td {padding: 2px 7px; text-align: center; color:#fff; font-size: 12px;  white-space:nowrap;}
.table_ex td a {color: rgb(78, 84, 90);}
.table_ex td.no {color: rgb(140, 144, 148);}
.table_ex .gray {color: rgb(78, 84, 90);}
.table_ex .blue {color: rgb(69, 138, 207);}
.table_ex .red {color: rgb(188, 32, 39);}
.table_ex .alignL {text-align: left;}
.table_ex .alignR {text-align: right;}
.table_ex .txtB {font-weight:600;}


/*카피라이터*/
#footers { float:left; width:100%; border-top:1px solid #e5e5e5; padding:20px 0; position: relative; z-index: 15; background:#FFF; }
#footers .copy_logo {width: 260px; float:left; text-align:center; margin-top:20px; }
#footers .copy_text {line-height: 15px; font-size: 12px; margin-bottom: 10px;}
#footers .copy_text li {line-height: 22px; padding-right: 10px;}
#footers .copy_text li a {padding:0px 5px; }
#footers .copy_text .text_orange {color: rgb(255, 125, 0); font-size: 12px;}



@media all and (max-width:1260px) and (min-width:850px) {
.copy {position: absolute; left: 0px; top: 100px; width:100%;}
.copy .title { font-size:32px; font-weight:bold; color:#333333; margin-bottom:15px;}
.copy .s_title { font-size:18px; color:#222;}

.banner_right {position: relative; width:100%;}
.banner_icon {position:relative; margin:0 auto; text-align:center; top:240px; width:100%}

.main_img {height:456px;}
.main_img ul { width:100%}
.main_img ul li{ display:inline; padding:0 5px}

.m_customer {width: 30%; margin-top:0px;}



/*업무안내*/
.m_business {float: left; padding:30px; background:url(../_Image/Main/boxicon.gif) no-repeat left top; margin-bottom:5px; width:94%; border-left:none }
.business ul li { width:24%; float: left; overflow:hidden; cursor: pointer;text-align:right; margin:1%; padding:15px 7%; text-align:left; padding-right:0}

/*공지사항*/
.m_notice {float: left; padding:0px 30px 30px 30px; background:url(../_Image/Main/boxicon.gif) no-repeat left top;  position: relative; margin-bottom:5px; width:94%; border-left:none}
.m_notice .more {top: 5px; right:30px; position: absolute;}
/*배너*/
.m_banner {float: left; width:100%; border-left:none ;}
.m_banner dd { margin-top:20px; padding-bottom:20px; }
/*환율정보*/
.m_exchange {float: left; padding:20px; background:#6399d9; position: relative; width:30%; height:215px;}

/*hs코드검색*/
.m_hs {float: left; padding:20px; background:#6c748d;  position: relative; width:25%; height:215px; }

#footers .copy_text {float:left;}
#footers .copy_banner {width: 500px; float:left;}

}
@media all and (max-width:850px) and (min-width:530px) {

#MContant { width:540px;}
.copy {position: absolute; left: 0px; top: 100px; width:100%}
.copy .title { font-size:30px; font-weight:bold; color:#333333; margin-bottom:15px;}
.copy .s_title { font-size:18px; color:#222;}

.banner_right {position: relative; width:100%;}
.banner_icon {position:relative; margin:0 auto; text-align:center; top:180px; width:100%}


.main_img {width:100%; height:456px;}
.main_img ul { width:auto;}
.main_img ul li{ display:inline; padding:0 5px}

.layer_pop {top:20px; left:0px; position:absolute; z-index:999999;}
.layer_pop img {width:100%; height:auto; text-align:center; margin:0 auto;}

/*대표전화*/
.m_customer {float: left; padding:20px; position: relative; width:235px; height:215px; margin-top:0px;}

/*환율정보*/
.m_exchange {float: left; padding:20px; background:#6399d9; position: relative; width:235px; height:215px;}

/*hs코드검색*/
.m_hs {float: left; padding:20px; background:#6c748d;  position: relative; width:510px; height:165px; }
.m_hs .hs dt input { border:1px solid #d5d5d5; font-size:12px; padding:4px 2px; line-height:14px; width:430px}
.btgo .l50 { float:left ;width:40%; padding-right:45px}
.btgo .r50 { float:left ;width:45%}

/*공지사항*/
.m_notice {float: left; padding:20px; background:url(../_Image/Main/boxicon.gif) no-repeat left top;  position: relative; margin-bottom:5px; width:510px; border-left:none}
.m_notice .more {top: 25px; right:30px; position: absolute;}

/*업무안내*/
.m_business { width:510px; padding:20px;}


/*배너*/
.m_banner {width:100%; border-left:none ;}
.m_banner dl {padding-left: 20px; padding-right: 20px;}
.m_banner dd {width: auto; padding-right:10px; padding-bottom:5px;}

#footers .copy_text { width:100%;}
#footers .copy_banner {padding-left:30px; float:left;}
#footers .footer_util ul {padding-left:30px;}
#footers .copy_text ul {padding-left:30px;}

}
@media all and (max-width:530px) and (min-width:0px) {

.banner_right {position: relative; width:100%;}
.banner_icon {position:relative; margin:0 auto; text-align:center; top:180px; width:100%}

#MainContant { width:100%; height:100%; position:static; margin-top:0px; margin-left:0px;}
#MContant { width:100%; height:100%; position:static; margin-top:0px; margin-left:0px;}

#Main_Wrap {background-position-y: -100px;}
.layer_pop {top:50px; left:0px; position:absolute; z-index:999999;}
.layer_pop img {width:100%; height:auto; text-align:center; margin:0 auto;}

.main_img { width:100%; display:none;}
.main_img_m ul { position:relative; left:0px; top:20px; margin: 0px auto; text-align:center;}

/*대표전화*/
.m_customer {float: none; padding:20px 10px; position: relative; width: auto; height: auto; margin-top:0px; overflow:hidden;}

/*환율정보*/
.m_exchange {float: none; padding:20px 10px; background:#6399d9; position: relative; width: auto; height: auto; overflow:hidden;}
.m_exchange .more {right: 10px;}

/*hs코드검색*/
.m_hs {float: none; padding:20px 10px; background:#6c748d; position: relative; width: auto; height: auto; overflow:hidden;}

.m_hs .hs dt { float:left; display: inline; width:80%}
.m_hs .hs dt input { border:1px solid #d5d5d5; font-size:12px; padding:4px 2px; line-height:14px; width:100%}
.btgo .l50 { float:left ;width:47%; padding-right:20px}
.btgo .r50 { float:left ;width:42%}

/*업무안내*/
.m_business {float: none; padding:20px 10px; width: auto; border-left:none; overflow:hidden;}
.m_business h2 {width:100%; height:22px; font-size: 18px; color: #333333; margin-bottom:10px; font-weight:600;}
.m_business ul {  width:100%; margin:0 auto}
.business {float: left; width:100%;}
.business ul { margin:0 auto}
.business ul li { width:41%; float: left; overflow:hidden; cursor: pointer;text-align:right; margin:1%; padding:15px 6%; text-align:left; padding-right:0}
.business ul li a { font-weight:600; letter-spacing:-1px; padding-left:35px}


/*공지사항*/
.m_notice {float: none; padding:0px 10px 20px 10px; position: relative; width: auto; border-left:none; overflow:hidden;}
.m_notice dt { display: inline; font-size: 12px; background:url(../_Image/Main/notice_icon.gif) no-repeat left 7px; line-height:18px; float:left ; padding-left:10px; padding-bottom:5px; width:70% }
.m_notice dd { display: inline; font-size: 12px; float:right; line-height:18px; padding-bottom:5px;}
.m_notice .more {top: 0px; right:20px; position: absolute;}

.m_banner { width:100%; border-left:none; margin-bottom:20px;}
.m_banner dl {padding:0px 10px;}
.m_banner dd {width: auto; padding-right:10px; padding-bottom:5px;}


#footers .footer_util ul {padding-left:10px;}
#footers .copy_text {float:left; width:100%}
#footers .copy_text ul {padding-left:10px;}
#footers .copy_banner ul {padding-left:10px;}
}