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


html {width:100%; height:100%;}
body {width:100%; height:100%; background:#000;}
#M-wrap {width:100%; height:100%;}
#M-wrap .main_bg {width:100%; max-width:1500px; max-height:100%; margin:0 auto; overflow:hidden}
#M-wrap .main_bg img {width:100%; max-width:1500px; height:auto;}
#M-wrap .wrap-inner {position:relative; width:1500px; height:100%; max-height:100%; margin:0 auto; overflow:hidden;}


/* 탑유틸메뉴*/
#M-wrap .M-top-util {position:absolute; right:150px; top:65px;}
#M-wrap .M-top-util ul li {float:left; margin-right:18px; color:#ededed;}
#M-wrap .M-top-util ul li a {font-size:13px; color:#ededed;}
#M-wrap .M-top-util ul li a:hover {color:#FF0;}
#M-wrap .M-top-util ul li span {color:#ededed;}



/* 탑로고단*/
#M-wrap .logo-sec {position:absolute; left:150px; top:85px; width:1200px; margin:0 auto;}
#M-wrap .logo-sec h1 {margin-bottom:50px;}
#M-wrap .logo-sec ul li {margin-bottom:13px;}
#M-wrap .logo-sec ul li a {font-size:13px; color:#ededed;}
#M-wrap .logo-sec ul li a:hover {color:#FF0;}
#M-wrap .logo-sec .gnb .cs-bn {margin-top:45px;}


.bx-controls {position:absolute; height:16px; bottom:340px; left: 145px; z-index:100; }
.bx-pager {display:table; margin:0 auto;}
.bx-pager .bx-pager-item {float:left;}
.bx-pager .bx-pager-item .active {}
.bx-controls-direction {display:none;}
.bx-pager a {
    background: #eb0215;
    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;
}
.bx-pager a.active {background: #FFFF00;}


/* 풋터*/

#M-footer {position:absolute; left:0; bottom:0; width:100%; height:150px; padding-left:150px; padding-top:30px; background-color:rgba(0,0,0,0.5); box-sizing:border-box;}
#M-footer .f-util {margin-bottom:17px;}
#M-footer .f-util:after {content:""; display:block; clear:both; z-index:1;}
#M-footer .f-util ul li {float:left; margin-right:20px;}
#M-footer .f-util ul li a {color:#b0b0b0; font-size:13px; font-weight:bold;}
#M-footer .copy {color:#b0b0b0;}


/* Layer Popup */
.indexcon {position:fixed;top:0;bottom:0;left:0;right:0;z-index:100001;width:99%;height:99%;background-color: hsla(120, 100%, 0%, 0.3);}
.indexcon .Box {margin:0 auto;width:40%;height:99%;padding:30px;padding-top:20px;background:#fff;left:50%;border:1px solid #000;}
.indexcon .Box .ConClose {width:100%;text-align:right;height:40px;}
.indexcon .Box .Cont {width:100%;height:90%;overflow-y:auto;padding-top:0px;}


/* Main menu */

#menu {}

#menu li
{
	padding-bottom: 10px;
	position: relative;
}

#menu ul ul a 
{
	float: left;
	height: 25px;
	padding: 0 25px;
	color: #ffffff;
	text-transform: uppercase;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}

#menu li:hover > a
{
	color: #ffgff;
}

*html #menu li a:hover /* IE6 */
{
	color: #fafafa;
}

#menu li:hover > ul
{
	display: block;
}

/* Sub-menu */

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 50px;
    left: calc(width - 50%);
    z-index: 99999;    
    background: #fbfbfb;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);	
    background: -ms-linear-gradient(#444, #111);	
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);	
    -moz-border-radius: 5px;
    border-radius: 5px;
	border-right:1px solid #e2e2e2; 
    border-left:1px solid #e2e2e2; 
}

#menu ul ul
{
  top: 0;
  left: 150px;

}

#menu ul li
{
    float: none;
	text-align:left;
    margin: 0;
    padding: 0 3px;
    display: block; 

}

#menu ul li:first-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
	border-top:1px solid #e2e2e2; 

}
#menu ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
	border-bottom:1px solid #e2e2e2; 
}

#menu ul a
{    
	font-size:13px;
	font-weight:300;
    padding: 10px;
	height: 10px;
	width: 130px;
	height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
	text-transform: none;
}

*html #menu ul a /* IE6 */
{    
	height: 10px;
}

*:first-child+html #menu ul a /* IE7 */
{    
	height: 10px;
}

#menu ul a:hover
{
    background: #0186ba;
	background: -moz-linear-gradient(#04acec,  #0186ba);	
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background: -webkit-linear-gradient(#04acec,  #0186ba);
	background: -o-linear-gradient(#04acec,  #0186ba);
	background: -ms-linear-gradient(#04acec,  #0186ba);
	background: linear-gradient(#04acec,  #0186ba);
	font-weight: bold; 
}

#menu ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;	
}



#menu ul li:first-child a:hover:after
{
	font-weight: bold; 
	font-size: 15px;
	color:#000;
}

#menu ul ul li:first-child a:hover:after
{
	font-weight: bold;
		font-size: 15px;
	color:#000;
}


#menu ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}



* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

/* New Index */
#mContainer{width:1200px; margin:50px auto;}
.dFlexA{display:flex; flex-wrap:nowrap; justify-content:space-between;}
.mConBox1 .m_slider {float: left; position:relative;}

.mConBox1 .m_slider .bx-controls {position:absolute; height:16px; bottom:10%; left: 50%; z-index:100; }
.mConBox1 .m_slider .bx-pager a { background: #ffb3b3; display: block; width: 14px; height: 14px;  text-indent: -9999px;margin: 0 5px;
-moz-border-radius: 7px; -webkit-border-radius: 7px;border-radius: 7px;}
.mConBox1 .m_slider .bx-pager a.active { background: #d34c4c; width:40px;}



h2.TitName{font-family:'휴먼엑스포'; font-size:30px; line-height:30px; text-align:center;}
.mConBox1 .Rbox {position: relative; width:29%; box-sizing: border-box; }
.mConBox1 .Rbox .login-box {margin:0 auto;border: 1px solid #e1e1e1; padding: 20px 5%;}
.mConBox1 .Rbox .login-box .input-sec{display:flex;}
.mConBox1 .Rbox .login-box input[type="text"], .mConBox1 .Rbox .login-box input[type="password"] {padding: 10px; box-sizing: border-box; background: #f9fafc;}

.mConBox1 .Rbox .login-box h2 {position: relative; width: 100%; height: 34px; line-height: 34px; font-size: 13px;  background: #000; color: #fbfbfb; padding: 0 15px; box-sizing: border-box;}
.mConBox1 .Rbox .login-box h2 span.out {position: absolute; top: 3px; right: 10px;}
.mConBox1 .Rbox .login-box h2 span.out a {font-size: 11px; font-weight: 300; color: #FF0;}
.mConBox1 .Rbox .login-box .logout {border: 1px solid #dbdbdb; box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);}
.mConBox1 .Rbox .login-box .logout ul li {width: 100%; box-sizing: border-box; line-height: 15px; font-size: 13px; padding:14px 15px;}

.mConBox1 .Rbox .login-util:after {content: ""; display: block; clear: both; z-index: 1;}
.mConBox1 .Rbox .login-util ul li {float: left; margin-right: 10px; padding-right: 12px;  background: url(/image/main/Login_UtilLine.gif) no-repeat right 50%;
font-size:14px;  margin-top:16px;}
.mConBox1 .Rbox .login-util ul li:last-child {margin-right: 0; padding-right: 0; background: none;}

.mConBox1 .Rbox .login-snsA{margin-top:10px;}
.mConBox1 .Rbox .btn-box{margin:10px 0;}

.mConBox2{margin-top:50px;}

.mConBox2 > div {width:47%;position:relative;}
.mConBox2 ul {width:100%; border-top:1px solid #C7C7C7; box-sizing: border-box;}
.mConBox2 ul li {position: relative; padding:0 10px; border-bottom:1px solid #c7c7c7;}
.mConBox2 ul li a {position: relative; display: block; width:90%; font-size: 18px; padding:15px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.mConBox2 ul li span {position: absolute;right: 10px; top: 15px;font-size: 14px;font-family: georgia;}


h2.h2Icon{
	position: relative;
	margin-bottom:30px;
	line-height:30px;
    padding-left: 28px;
    font-size: 20px;
    font-family: '나눔고딕';
    font-weight: bold;
    color: #333;
    background: url("/image/main/titIcon.png") no-repeat left 50%;
}
h2.h2Icon span {position: absolute; top: 3px; right: 10px;}

h2.h2Icon > a.more{
    display: block;
    width: 30px;
    height: 30px;
    border-radius : 50%;
    position: absolute;
    top: -5px;
    right: 10px;
    background: #FFB3B3;
    transition: all 0.4s;
	cursor:pointer;
}
h2.h2Icon >  a.more:hover{transform: rotate( 90deg );}

h2.h2Icon > a.more:before{
    display: block;
    content: '';
    width: 14px;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate( -50%, -50% );
}
h2.h2Icon > a.more:after {
    display: block;
    content: '';
    width: 2px;
    height: 14px;
    background: #fff;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate( -50%, -50% );
}

.mConBox3{margin-top:50px;}

.mConBox3 > div.nodataBox{width:70%;}
.mConBox3 .nodataBox ul{border:1px solid #E2E2E1; padding:25px 30px; height:228px;}
.mConBox3 .nodataBox ul li{width:23%;}
.mConBox3 .nodataBox ul li p{height:170px; text-align:center;}
.mConBox3 .nodataBox ul li span{display:block; text-align:center;}
.mConBox3 .nodataBox .num-page{font-size:16px; font-weight:600; margin:10px 0 0;}
.mConBox3 .nodataBox .date-add{font-size:12px;}

.mConBox3 > .trkBox h2.h2Icon{background: url(/image/main/trkIcon.png) no-repeat left 50%; padding-left:47px;}
.mConBox3 > div.trkBox > div{width:256px; border:1px solid #E2E2E1; padding:30px; height:218px;}
.mConBox3 .trkBox h3{color:#DB4954; font-size:18px; font-weight:900;}
.mConBox3 .trkBox ul{margin-top:30px;}
.mConBox3 .trkBox p{margin:10px 0; line-height:30px; font-size:16px; font-weight:900;}
.mConBox3 .trkBox .trkInput{width:80%; height:30px; /*background:#f5f5f5;*/ border:1px solid #d4d4d4; 
padding-left:5px; color:#313131; vertical-align: top; box-sizing: border-box;}

/* 게시판 */
.board_list input { vertical-align:middle; }
.board_list thead th {padding:10px 5px;text-align:left;line-height:12px;}
.board_list thead th {color:#636363;font-weight:bold;border-top:1px solid #979797;border-bottom:1px solid #c5c5c5;background:#fafafa; line-height: 110%; vertical-align:middle;}
.board_list tbody td {padding:10px 5px;text-align:left;color:#313131;border-bottom:1px solid #dbdbdb;letter-spacing: -0.05em;}


.mConBox4{margin-top:50px;}
.tab {position: relative; width: 100%; height:auto;}
.tab .stepTab{height:auto;}
.tab .stepTab .menu_tab ul {width:100%;  border-bottom: none; margin-bottom:40px;}
.tab .stepTab .menu_tab ul:after {content:""; display: block; clear: both; z-index: 1;}
.tab .stepTab .menu_tab ul li {margin-right:20px;float: left; width:180px; height:50px; line-height: 50px; border-radius:50px; background:#fff; 
outline:2px solid #ffb3b3; text-align: center; vertical-align: middle; font-size: 14px; color:#000;}
.tab .stepTab .menu_tab ul li:last-child {border-right: none;}
.tab .stepTab .menu_tab ul li.active {background:#ffb3b3; font-weight: bold; color: #000; margin-right:20px;}
.tab .stepTab .menu_tab ul li.active a {color: #000;}

.stepTab div[class^="menu_tab0"] {height:208px; text-align: center;}

.mConBox5{margin:80px 0; position:relative;}

.m_slider2{width:95%; margin:0 auto;}
.m_slider2 #slider2-B {position:absolute; left: 0; top: 45%; z-index:100;}
.m_slider2 #slider2-N {position:absolute; right: 0px; top: 45%; z-index:100;}
.m_slider2 .bxslider2 li img{width:100%; height:121px;}
.slider2-B img , .slider2-N img{width:41px;}

/*고시환율*/
.mConBox6 .top-rate .exch{width:100%;height:228px; /*outline:1px solid #38b6ff;border-top:2px solid #38b6ff; */float:left;}
.mConBox6 .top-rate .exch div{/*padding:43px 10px;*/ text-align:center;}
.mConBox6 .top-rate h3{text-align:center; margin:8px 0; color: #000; font-weight:500; font-size: 14px; text-align:left;}
.mConBox6 .top-rate .exch div > p{width:100%; border-bottom:1px solid #d6d6d6; padding:20px 0 30px; font-size:28px; margin:0 auto;}
.mConBox6 .top-rate .exch div > span{color:#DE2910; font-size:28px; margin-top:30px; display:inline-block;}
/* Main menu */

/*HOTDEAL*/

.mConBox7 {width: 1260px; margin:0 auto; margin-top:40px;}

.mConBox7 h2 {width:100%;font-size: 30px;font-weight: 400;font-family: 'Noto Sans CJK KR';margin-bottom: 15px;line-height: 72px; text-align:center;}
.mConBox7 h2 > span {color:#000; font-weight:600;}
.mConBox7 > p {color:#000; font-size:16px; font-weight: 300; color:#909090; text-align:center;}
.hot-deal{margin:50px 0;}
.hot-deal .bx-wrapper{max-width:100%; }
.hot-deal ul {width: 100%; text-align: center;}
.hot-deal ul:after {content: ""; display: block; clear: both; z-index: 1;}

.hot-deal ul li{margin-right:44px;}
.hot-deal ul li a{display:flex; width:100%; height:207px; overflow:hidden; border:1px solid #ddd; align-items:center; justify-content:space-around;}

.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;}