@charset "utf-8";
@import url("/Library/Css/user_layout.css?ver=1");


/*메인*/

/*###########################################*/
#mContainer {width: 100%; margin-top: 245px;}
#mContainer #Container {width: 1200px; margin: 0 auto;}

.mConBox1 {width:100%;}
.mConBox1:after {content: ""; display: block; clear: both; z-index: 1;}

.mConBox1 .m_slider {width:100%; height:auto; overflow:hidden;}
/*메인 롤링 배너*/
.m_slider{position:relative;width:100%; height:420px; }
.m_slider .frame {overflow: hidden; position: relative;}
.m_slider .frame ul {list-style: none; margin: 0; padding: 0; position: absolute;}
.m_slider ul li{width:100%; float: left; !important;}
.m_slider .frame ul li { float: left; margin: 0 1px 0 0; padding: 0; cursor: pointer; }
.m_slider img{width:100%;}
.m_slider .frame ul li.active { color: #fff; background: #a03232; }
.m_slider .bx-controls {position:absolute; width:100%; height:16px; bottom:20px; left: 0; z-index:100; }
.m_slider .bx-pager {display:table; margin:0 auto;}
.m_slider .bx-pager .bx-pager-item {float:left;}
.m_slider .bx-controls-direction {display:none;}
.m_slider .Rbtn1{position:absolute; left:-17px; top:248px; z-index:100;}
.m_slider .Rbtn2{position:absolute; right:-17px; top:248px; z-index:100;}
.m_slider .over_bg{background:url(/image/main/banner_over.png) bottom center no-repeat;width:100%; height:570px;}

.m_slider .bx-pager a {
    background: #646464;
    display: block;
    width: 14px;
    height: 14px;
    text-indent: -9999px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}

.m_slider .bx-pager a.active {
    background: #59637b;
}


h2.TitName{ font-size:35px; line-height:30px; font-family:"휴먼엑스포";}


/*dflexA*/
.w1200{width:1200px; margin:0 auto;}
.dflexA{display:flex; justify-content:space-between; align-items:center;}

/* 차이나는 길잡이 */
.mCont1{ margin-top: 50px; background-color:#2f4858;}
.mCont1 h2{width:478px; margin:0 auto; padding-top:40px; text-align:center;   overflow:hidden;}
.mCont1 h2 p{font-family:"휴먼엑스포"; font-size:36px; color:#fff; background:url('/image/main/h2Title.png') no-repeat;}
.mCont1 > div{padding:30px;}
.mCont1 ul{flex-wrap:wrap;}
.mCont1 li{width:186px; margin-bottom:10px; overflow:hidden; height:50px; border:1px solid #707070;}
.mCont1 li a{display:flex; align-items:center; width:100%; height:100%;}
.mCont1 li:hover{filter: brightness(10);}

/* 대행절차 */
.mCont2{width: 1200px; margin: 0 auto; margin-top: 50px;}
.mCont2 h2{margin-bottom:40px;}
.tab {position: relative; width: 100%;}
.tab .search-de {position: absolute; top: 5px; right: 0;}
.tab .search-de span {display: inline-block;}
.tab .search-de span.in-de {margin-left: 20px;}
.tab .stepTab .menu_tab ul {width:auto; margin-bottom:40px;}
.tab .stepTab .menu_tab ul:after {content:""; display: block; clear: both; z-index: 1;}
.tab .stepTab .menu_tab ul li {float: left; width: 160px; margin-right:20px; height:40px; line-height: 40px; background: #82858e; text-align: center; vertical-align: middle;
font-size: 14px; border-radius:20px;}
.tab .stepTab .menu_tab ul li a{color:#fff; font-weight:600;}
.tab .stepTab .menu_tab ul li:last-child {border-right: none;}
.tab .stepTab .menu_tab ul li.active {background: #1a3163;; font-weight: bold;}
.tab .stepTab .menu_tab ul li.active a {color: #fff;}
.tab .stepTab .menu_tab ul li:hover{background-color:#000;}
.stepTab div[class^="menu_tab0"] {text-align: center;}
.tab img{width:100%;}

/*배송신청, 엑셀,구매 배너*/
.mCont3 {height:auto; background:url("/image/main/bgImg.png") repeat; background-size: cover; overflow:hidden; margin-top:50px;}
.mCont3 ul{height:auto; margin:0 auto; display:flex; flex-flow:wrap; justify-content:space-between;}
.mCont3 li{width:19%; height:auto; background-color:#B4DDF9; padding:50px 0; border-radius:10px;}
.mCont3 li:hover{background-color:#2a9fef;}
.mCont3 li:last-child{margin-right:0;}
.mCont3 li span , .mCont3 li strong{display:block;}
.mCont3 li .redColor{text-align:center; font-size:31px; color:#f00; margin-top:45px; height:40px; line-height:40px;}
.mCont3 li .iconImg{margin:0 auto; padding:0 0 30px; height:106px; overflow:hidden;}
.mCont3 li .iconImg img{text-align:center; display:block; margin:0 auto; height:100%;}
.mCont3 li strong{text-align:center; font-size:24px; font-weight:400; color:#2276CE; display:block; font-family:"휴먼엑스포";}
.mCont3 li:hover strong{color:#fff;}

.mCont4 {height:auto; margin:0 auto; margin-top:50px;}
.mCont4:after {content: ""; display: block; clear: both; z-index: 1;}
.mCont4 .info-btn{width:100%;}
.mCont4 .info-btn ul{width:100%; flex-flow: wrap; justify-content:space-between; display:flex;}
.mCont4 ul li {float: left;  width:30%; box-sizing: border-box; text-align:center; margin-bottom:20px;}
.mCont4 ul li a{display:block; width:100%; height:auto; background-color:#5fadff; border-radius:13px; overflow:hidden;}
.mCont4 ul li a img{transform:scale(1); transition:transform 0.3s linear; width:100%;}
/*.mCont4 ul li a:hover{background-color:#a3daff;}*/
.mCont4 ul li a img:hover{transform:scale(0.95);}
.mCont4 ul li:nth-child(3) , .mCont4 ul li:last-child{margin-right:0;}

.mCont6 {background-color:#f9f9f9; margin-top:50px;}

.mCont6 h4{margin:30px 0; color:#F55650; font-size:20px; font-family:"휴먼엑스포" }
.mCont6 .search-ma {width: 100%; margin-top: 16px; padding: 30px 0 0; box-sizing: border-box;}

.mCont6 .search-ma ul {width:100%; margin: 0 auto; display:flex; flex-flow:wrap; justify-content:space-between; overflow:hidden;}
.mCont6 .search-ma ul:after {content: ""; display: block; clear: both; z-index: 1;}
.mCont6 .search-ma ul li {width: 23%; margin-right:2.1%;}
.mCont6 .search-ma ul li:nth-child(4) {margin-right: 0;}
.mCont6 .search-ma ul li span {display: block;   font-size:16px; line-height:25px;}
.mCont6 .search-ma ul li span img{width:100%; height:240px;}
.mCont6 .search-ma ul li span.num-page {margin-top: 20px;}
.mCont6 .search-ma > p, .mConBox5 .flArea > p{ width:120px; margin:40px auto 0;}
a.morebtn{color:#fff; background-color:#0661C2;  font-weight:900; display:inline-block; width:120px; height:40px; line-height:40px; position:relative;
text-align:center; font-size:14px; border-radius:22px;}
a.morebtn:hover{background-color:#F55650;}
a.morebtn > span{line-height:40px;}

.mConBox5 {background-color: #f9f9f9;margin-top:50px;}

.mConBox5 h2 {width:100%;font-size: 35px;font-weight: 400;font-family: '휴먼엑스포';margin-bottom: 15px;line-height: 30px; text-align:center;}
.mConBox5 h2 > span {color:#000; font-weight:600;}
.mConBox5 > p {color:#000; font-size:16px; font-weight: 300; color:#909090; text-align:center;}

/*hot deal*/

.mConBox4 {width: 1200px; margin: 0 auto; margin-top: 50px;}

.mConBox4 h2 {width:100%; font-size: 28px; font-weight: bold; font-family: 'naum barungothic', 나눔바른고딕; text-align: center; /*background: url(/image/main/hot_hr.gif) repeat-x left 50%;*/ margin-bottom: 50px;}
.mConBox4 h2 span {color:#ed1c24;}

.hot-deal ul {width: 100%; text-align: center;}
.hot-deal ul:after {content: ""; display: block; clear: both; z-index: 1;}

.hot-deal ul li a{display:block; width:190px; height:190px; overflow:hidden;}
.hot-deal ul li a img{width:100%; height:100%; border-radius:10px;}
.hot-deal ul li span {display: block;}
.hot-deal ul li span.Hname {font-size: 13px; color: #616161; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 15px;}
.hot-deal ul li span.Hprice {font-size: 16px; font-weight: bold; color: #010101; margin-top: 7px;}


@media all and (min-width:768px) and (max-width:1920px){
.hot-deal ul li{float:left; width:190px; margin-right:30px;}

}

@media all and (min-width:768px) and (max-width:1200px){
.hot-deal ul li{float:left;  margin-right:1%; }
}

@media all and (min-width:681px) and (max-width:768px){
.hot-deal ul li{float:left;  margin-right:1.5%; }
}
@media all and (min-width:600px) and (max-width:680px){
.hot-deal ul li{float:left;  margin-right:2%; }
}
@media all and (min-width:470px) and (max-width:599px){
.hot-deal ul li{float:left;  margin-right:3%; }
}

@media all and (min-width:421px) and (max-width:469px){
.hot-deal ul li{float:left;  margin-right:5%; }
}
@media all and (min-width:100px) and (max-width:420px){
.hot-deal ul li{float:left;  margin-right:6%; }
}

/*BEST 쇼핑몰*/

.mCont5 {width:100%; height:360px; background:url("/image/main/bestBg.png") repeat; background-size:cover; margin-top:40px;}
.flArea{width: 1200px; margin:0 auto; padding:50px 0;}
.mCont5 .flArea{padding-top:90px;}
.Bshop {position: relative; width: 100%; height: auto; padding: 30px 0; box-sizing: border-box;}
.Bshop li{margin-right:10px;}
.Bshop li a{display:block; height:100px; overflow:hidden;}
.m_slider2{100%;}
.m_slider2 #slider2-B {position:absolute; left:0; top:35%; z-index:100;}
.m_slider2 #slider2-N {position:absolute; right: 0; top:35%; z-index:100;}


@media (max-width:1920px){
.Bshop ul li{float:left;  }
}
@media (max-width:767px){

.popUpArea{display:none;}
}
@media (max-width:481px){
.popUpArea{display:none;}
}


/* 하단정보배너 */

.mCont7 {width: 1200px; margin: 0 auto; margin-top:80px;}
.mCont7 .na-name{margin:10px 0 20px;}
.FlexAr{display:flex; justify-content:space-between; padding-bottom:30px; border-bottom:1px solid #ddd;}
.FlexAr1{border:none; padding-top:30px;}
.mCont7 .cs-info {width:50%; border-right:1px solid #ddd;}
.mCont7 .cs-info p{display:flex; flex-direction:column;}
.mCont7 .cs-info p a{display:block; border:3px solid #92C0F6; border-radius:50px; width:200px; height:40px; line-height:40px; text-align:center;
font-size:18px; font-family:"휴먼엑스포"; margin-left:56%; filter: drop-shadow(2px 4px 6px #ccc1c1);}
.mCont7 .cs-info p a:hover{background-color:#0661C2; color:#fff;}

.main-notice {width:45%;}
.main-notice .na-name{margin-bottom:20px; display:inline-block;}
.main-notice a.morebtn{height:30px; width:100px; text-align:center;}
.main-notice a.morebtn > span{line-height:30px;}
.main-notice > span{float:right; margin-top:10px;}
.main-notice ul {width:100%; height:auto; box-sizing: border-box;}
.main-notice ul li {position: relative; width: 100%; line-height:42px;}
.main-notice ul li i{display:inline-block; font-style:normal;}
.main-notice ul li a {position: relative; display:flex;  font-size:20px; overflow: hidden;}
.main-notice ul li a > span{display:inline-block;width:80%; margin-left:2%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.main-notice ul li a > strong{min-width:65px;}

.mCont7 .bank-info {width:50%; border-right:1px solid #ccc;}

.mCont7 .top-rate{width:45%;}
.mCont7 .top-rate .na-name {
	width:100%;
	height: 40px;
	line-height: 40px;
	color: #fbfbfb;
	font-size:18px;
	
}
.mCont7 .top-rate .rate-con {
	width: 198px;
	height: 40px;
	line-height: 40px;
	border: 1px solid #3f4253;
	border-top: none;
	text-align: center;
	vertical-align: middle;
	font-size: 13px;
}
.mCont7 .top-rate .rate-con span {
	font-size: 15px;
	font-weight: bold;
	color: #333;
}


/*고시환율*/
.mCont7 .top-rate .exch{width:100%;}
.mCont7 .top-rate h3{margin:15px 0; color: #000; font-size:18px;}
.mCont7 .top-rate .exch ul{display:flex; flex-direction:column;}
.mCont7 .top-rate .exch ul li{height: 35px; color:#f5615b; font-size:30px; line-height:35px;font-weight:900;}
.mCont7 .top-rate .exch ul li span{font-size:18px;}
.mCont7 .top-rate .exch ul li:last-child{margin-left:36%;}




@media (max-width:1450px){
#floating , #floating2{display:none;}
}

/*팝업*/
/*#full{width:100%; height:100%; background-color:rgba(0,0,0,0.5); position:fixed; left:0; top:0;}*/
.LayerPopArea{width:auto; height:auto;
display:flex;flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center;}
.popBody{width:100%; height:100%;}
@media (max-width:768px){
.LayerPopArea{background:rgba(0,0,0,0.7); }
}


/*#############################################*/
@media (max-width:1280px){
#mContainer{margin:0 auto;}
#container{margin:87px auto 0;}
.w1200{width:96%;}
.mCont1 li{width:24%;}
.mCont6{margin-top:40px;}
.mConBox1 .m_slider{width:100%; float:none; height:auto; border:none; outline:1px solid #e1e1e1;}

.mCont3 li{padding:30px 0; width:32%; }
.mCont3 li:nth-child(4) , .mCont3 li:last-child{width:48.5%; margin-top:10px;}
.mCont3 li strong{font-size:20px;}
.mCont4{width:96%;}

.mCont4 ul li{margin-bottom:10px;}
.info-btn li{width:32%;}

.flArea , .mConBox4 , .mCont2 , .mCont7, .mConBox5{width:96%;}

.mCont6 .search-ma ul li span img{width:100%;}
.mCont6 .search-ma ul li span.num-page{margin-top:10px;}
.mCont6 .search-ma ul li span{font-size:14px;}

.mConBox4 .flArea{padding:0;}

.hot-deal ul li a{ height:200px;}

.Bshop{margin:0 auto;}
.m_slider2 .bx-wrapper{width:96%;}
.Bshop li a{display:block; overflow:hidden;}

.mCont7.top-rate .exch ul li {font-size:24px;}
.main-notice ul li a{font-size:16px;}
.mCont7 .cs-info p a{margin:10px 0 0 40%;}
}
@media (max-width:1000px){
#mContainer{margin:0 auto;}
h2.TitName, {font-size:28px;}
.mCont1 h2 p{font-size:28px; background-size:contain;}
.mCont3 li .redColor{font-size:20px; margin-top:30px; height:25px; line-height:25px;}
.mCont3 li .iconImg{height:60px; padding:20px 0;}
.mCont3 li strong{font-size:20px; height:25px; line-height:25px;}

.hot-deal ul li{margin-right:50px;}
.hot-deal ul li a{width:200px;}
.Bshop li{margin-right:1.5%;}
.Bshop li a{overflow:visible;}
.m_slider2 #slider2-B img , .m_slider2 #slider2-N img{width:35px;}

.mCont1 , .mCont3 , .mCont4 , .mCont6 , .mCont7, .mConBox5{margin-top:30px;}
.mCont5{margin-top:20px;}
.mCont1 li{width:32%;}
.mCont2{display:none;}
.mCont3 ul{margin:0 auto;}
.mCont5{height:auto;}
.mCont5 .flArea{padding:50px 0;}
.mCont7 .top-rate .exch ul li{font-size:26px;}

}

@media (max-width:890px){
.mCont7 .top-rate .exch ul li span{font-size:14px;}
}
@media (max-width:855px){
.mCont7 .top-rate .exch ul li{font-size:22px;}
}
@media (max-width:840px){
.hot-deal ul li{margin-right:100px;}
.Bshop li{margin-right:2%;}
}
@media (max-width:794px){
.mCont7 .top-rate .exch ul li{font-size:20px;}
.Bshop li{margin-right:2.5%;}
}
@media (max-width:700px){
.mCont1 li{width:32%;}
.mCont1 li a img{width:100%;}
}
@media (max-width:550px){
.mCont1{width:100%;}
.mCont1 > div{padding:30px 0; width:96%; margin:0 auto;;}
.mCont1 li{width:48%;}
.mCont1 li a img{margin:0 auto;}
}

@media (max-width:560px){
.hot-deal ul li{margin-right:150px;}
}
@media (max-width:768px){
.mCont1 h2{width:300px;}
.mCont1 h2 p img{height:20px;}
.mCont1 , .mCont3, .mCont4, .mCont6 , .mCont7, .mConBox5{margin-top:20px;}
.mCont5{margin-top:10px;}
.m_slider .bx-pager a{width:10px; height:10px;}
.mCont4 ul li{width:48%; margin-right:2%;}
.mCont4 ul li:nth-child(3){margin-right:2%;}
.mCont4 ul li:nth-child(2), .mCont4 ul li:nth-child(4), .mCont4 ul li:nth-child(6){margin-right:0;}
.mCont3 li{padding:10px 0 20px; border-radius:10px;}
.mCont3 li:first-child , .mCont3 li:nth-child(2){margin-bottom:8px;}
.mCont3 li .redColor{font-size:14px;}
.mCont3 li .iconImg{height:45px; padding:15px 0;}
.mCont3 li strong{font-size:16px;}

h2.TitName{font-size:20px;}
.mCont6 h4 {font-size:16px;}
.flArea{padding:20px 0;}

.mCont6 .search-ma ul li span{font-size:14px;}
a.morebtn{width:90px; height:30px; font-size:12px;}
a.morebtn > span{line-height:30px;}
.main-notice a.morebtn{width:90px;}
.mCont5 .flArea{padding:20px 0;}
.mCont6 .search-ma{padding:10px 0;}
.mCont6 h4{margin:10px 0;}
.mCont6 .search-ma ul li{width:32%; margin-right:2%;}
.mCont6 .search-ma ul li span{font-size:14px;}
.mCont6 .search-ma ul li span img{width:100%; height:180px;}
.mCont6 .search-ma ul li:nth-child(3){margin-right:0;}
.mCont6 .search-ma ul li:nth-child(4){display:none;}
.mCont6 .search-ma > p{margin:20px auto 0;}
.hot-deal ul li span.Hname{font-size:13px; margin-top:10px; display:block; width:200%;}
.hot-deal ul li span.Hprice {font-size:14px; margin-top:5px;}
.FlexAr{flex-flow: column; }
.mCont7 .cs-info , .mCont7 .bank-info{border-right:none; width:100%;}
.main-notice{width:100%; margin-top:20px;}
.mCont7 .top-rate{width:100%; margin-top:30px;}
.mCont7 .na-name{margin:0 0 20px;}
.mCont7 .top-rate .exch ul li{font-size:23px;}
.mCont7 .FlexAr{padding-bottom:0; border-bottom:none;}
.mCont7 .top-rate .exch ul li:last-child{margin-left:120px;}
}
@media (max-width:730px){
.Bshop li{margin-right:2.8%;}
}
@media (max-width:711px){
.Bshop li{margin-right:3.3%;}
}
@media (max-width:650px){
.Bshop li{margin-right:4%;}

#footer .copyright .BlockSpan{display:block;}
}


@media (max-width:600px){

.mConBox1 .m_slider{width:100%; float:none; height:auto;}
.Bshop li{margin-right:4.8%;}
.mCont6 .search-ma ul li{width:48%; margin-right:2%;}
.mCont6 .search-ma ul li:nth-child(2){margin-right:0;}
.mCont6 .search-ma ul li:nth-child(3){display:none;}
}

@media (max-width:500px){

.mCont6 .search-ma ul li span{font-size:12px;}

}


@media (max-width:482px){
.mCont1 h2 {width:240px;}
.mCont1 h2 p{font-size:24px;}
.mCont3 li strong{font-size:13px;}
.mConBox4 h2 , .mCont5 h2 {margin-top:10px; }
.mConBox4 h2{margin-bottom:20px;}
.m_slider .bx-controls{bottom:5px;}
.mCont4 ul li{width:49%; margin-right:1%; margin-bottom:5px;}
.main-notice ul li a{font-size:15px;}
.main-notice ul li a > span{width:78%;}
}
@media (max-width:440px){
.Bshop li{margin:0 3.5%;}
}
@media (max-width:400px){
.Bshop li{margin:0; margin-right:8%;}
}
@media (max-width:390px){
.mCont7 .top-rate .exch ul li{font-size:22px;}
}


@media (max-width:1280px){
#floating , #floating2{display:none;}
}

/*팝업*/
/*#full{width:100%; height:100%; background-color:rgba(0,0,0,0.5); position:fixed; left:0; top:0;}*/
.LayerPopArea{width:auto; height:auto;
display:flex;flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center;}
.popBody{width:100%; height:100%;}
@media (max-width:768px){
.LayerPopArea{background:rgba(0,0,0,0.7); }
}

/*팝업*/
/*#full{width:100%; height:100%; background-color:rgba(0,0,0,0.5); position:fixed; left:0; top:0;}*/
.LayerPopArea{width:auto; height:auto;
display:flex;flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center;}
.popBody{width:100%; height:100%;}
@media (max-width:768px){
.LayerPopArea{background:rgba(0,0,0,0.7); }
}


.h2Tit{display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center;}
.h2Tit span.more{position:relative;}
.h2Tit span.more a{display: block;width: 20px;height: 20px;border-radius :13%;background:#ffffff;border:1px solid #8f8f8f;transition: all 0.4s;cursor:pointer;}
.h2Tit span.more a:hover {transform: rotate( 90deg ); background-color:#007bd3; border:1px solid #007bd3;}
.h2Tit span.more a:before{ display: block; content: ''; width: 12px; height: 2px; background: #8f8f8f; position: absolute; top: 50%; left: 50%;
transform: translate( -50%, -50% );}
.h2Tit span.more a:after { display: block;content: '';  width: 2px; height: 12px; background: #8f8f8f; position: absolute; top: 50%; left: 50%;
transform: translate( -50%, -50% );}
.h2Tit span.more a:hover:before , .h2Tit span.more a:hover:after{background-color:#fff;}