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


/*메인*/

#mContainer {width: 100%; margin-top: 20px;}
#mContainer #Container {width: 1390px; margin: 0 auto;}

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

.mConBox1 .m_slider {float: left;}
/*메인 롤링 배너*/
.m_slider{position:relative; /*width:810px;*/width:100%; height:auto; }
.m_slider .frame {overflow: hidden; position: relative;}
.m_slider .frame ul {list-style: none; margin: 0 auto; 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 .frame ul li 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-pager .bx-pager-item .active {}
.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: #ff5419;
    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;
}


/*mConBox2*/
.w1390{width:1390px; margin:50px auto 0;}
.mConBox2 {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; flex-flow:wrap;}
/*왼쪽 배너*/
.leftBtn{width:72%;}
.leftBtn .topUl{overflow:hidden;}
.leftBtn .topUl li{width:50%; height:360px;float:left; background-image:url('/image/main/lbg2.png'); background-size:cover; position:relative;}
.leftBtn .topUl li:first-child{background-image:url('/image/main/lbg1.png'); background-size:cover;}
.leftBtn .topUl li > div{margin:30% auto;}
.leftBtn .topUl li h3{font-size:34px; font-family:'Noto Sans CJK KR'; color:#fff;  width:100%; text-align:center; }
.leftBtn .topUl li a{color:#fff; display:block; text-align:center; width:160px; border:2px solid #fff; line-height:40px; font-size:16px; 
margin:40px auto 0;transition:.4s linear;}
.leftBtn .topUl li a:hover{border-color:#ccc; color:#57A8CA; background-color:#fff; font-weight:900;}

.leftBtn .btUl{display:flex; justify-content:space-between;}
.leftBtn .btUl li{width:32%; background-color:#0067A3; height:240px; position:relative;}
.leftBtn .btUl li.anImg{background-image:url('/image/main/lbg4.png'); width:36%; background-size:cover;}
.leftBtn .btUl li > div{position:absolute; top:35%; width:100%;}

.leftBtn .btUl li h4{font-size:24px; font-family:'Noto Sans CJK KR'; color:#fff; width:100%; text-align:center;}

.leftBtn .btUl li img{position:absolute; left:26%; top:15%;}
.rightBtn li:hover{background-color:#0678ba;}
.leftBtn .btUl li a{color: #fff;display:block;text-align:center;width:100px;border: 2px solid #C8E9D2;line-height: 24px;font-size: 10px;
transition:.4s linear; margin:40px auto 0; font-weight:900;}

.leftBtn .btUl li a:hover{background-color:#fff; color:#0067A3; }
.leftBtn .btUl li:nth-child(2) h4 , .leftBtn .btUl li:nth-child(2) a{color:#1A3163; border-color:#1A3163;}

/*엑셀대량등록 모바일*/
.hide-li{display:none; background-image:url('/image/main/lbg4.png'); height:150px; width:100%; background-size:cover; overflow:hidden; margin-top:5px;
border-radius:10px;}
.hide-li h4{font-size:15px; text-align:center; margin-top:50px; font-weight:900; color:#0067a3;}
.hide-li a{color: #fff;display:block;text-align:center;width:100px;border: 2px solid #C8E9D2;line-height: 24px;font-size: 10px;
transition:.4s linear; margin:20px auto 0; font-weight:900; background-color:#fff; color:#0067A3;}

.rightBtn{width:25%;}
.rightBtn ul{display:flex; flex-flow:wrap; justify-content:space-between;}
.rightBtn li{background-color:#0067A3; width:47%; margin-bottom:7%; height:132px; }
.rightBtn li.Bg1{background-color:#25BCE6;}
.rightBtn li.Bg1:hover{background-color:#2fd2ff;}
.rightBtn li.mb0{margin-bottom:0;}
.rightBtn li a{display:block; width:80%; margin:10% auto 0; height:75%; position:relative;}
.rightBtn li a p{color:#fff; position:absolute; font-size:14px; font-weight:600; top:25%;}
.rightBtn li a p span{display:block;}
.rightBtn li a img{position:absolute; bottom:0; right:0;}

/*mConBox3*/
.mConBox3{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; height:480px;}
/*공지사항*/
.main-notice{width:30%; height:100%; background-color:#0067a3;}
.main-notice > div.mbg{margin:15px; background-color:#fff; height:94%;}
.main-notice .mbg div{padding:5% 7%;}
.main-notice div h2{font-size:28px; margin-top:50px; position:relative; font-family:'Noto Sans CJK KR';}
.main-notice h2 > a.more{
    display: block;
    width: 30px;
    height: 30px;
    border-radius : 50%;
    position: absolute;
    top: 0;
    right: 0;
    background: #007CB0;
    transition: all 0.4s;
}
/*more plus 버튼*/
h2 > a.more:hover {transform: rotate( 90deg );}
h2 > a.more:before{display: block;content: ''; width: 14px; height: 2px; background: #fff; position: absolute; top: 50%; left: 50%;
transform: translate( -50%, -50% );}
h2 > a.more:after{display: block;content: ''; width: 2px; height: 14px; background: #fff; position: absolute; top: 50%; left: 50%; 
transform: translate( -50%, -50% );}


.main-notice ul {margin-top:50px; border-box;}
.main-notice ul li {position: relative; width: 100%; line-height:50px; }
.main-notice ul li a {position: relative; display: block; width:80%; font-size: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.main-notice ul li span {position: absolute; right: 0; top: 0; font-size:14px;}

/* 대행절차 */
.prog-step{width:70%; height:100%; background-image:url('/image/main/tr.png'); background-size:cover;}
.prog-step .stepTab{padding:7%; display:flex; justify-content:space-between;}
.stepTab .menu_tab ul li{margin-top:30px; width:110px;}
.stepTab .menu_tab ul li:nth-child(2){margin-top:160px;}
.stepTab .menu_tab ul li a {color: #B3B7BA; font-size:12px; font-weight:900;}
.stepTab .menu_tab ul li.active a {color: #fff; font-size:14px;}

/*주인을 찾습니다.*/
.mConBox4 {width:100%; margin-top:100px; background-color:#E9F0F4;}
.mConBox4 .w1390{margin:0 auto; overflow:hidden; padding:50px 0;}
.mConBox4 h2{font-size:28px; color:#007CB0; font-weight:600; position:relative; font-family:'Noto Sans CJK KR';}
.mConBox4 h2 > a.more{
    display: block;
    width: 30px;
    height: 30px;
    border-radius : 50%;
    position: absolute;
    top: 0;
    right: 0;
    background: #007CB0;
    transition: all 0.4s;
}
.mConBox4 .search-ma {width: 100%; padding-top:50px; box-sizing: border-box;}

.mConBox4 .search-ma ul {width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;}

.mConBox4 .search-ma ul li {width:22%;}

.mConBox4 .search-ma ul li img {border: 1px solid #dbdbdb; width:100%;}
.mConBox4 .search-ma ul li span {display: block; overflow: hidden; text-align:center; font-size:14px;}
.mConBox4 .search-ma ul li span.num-page {margin:20px 0 10px; font-size:19px; font-weight:600;}



/*hot deal*/

.mConBox5 {margin-top:100px;}

h2.h-tit{width:100%; font-size: 28px; font-weight: bold; display:flex; align-items:center; justify-content:space-between; 
font-family: 'naum barungothic', 나눔바른고딕; text-align: center;}
h2.h-tit em{color:#007CB0; font-size:36px; width:100%; width:33%; height:1px; background-color:#007CB0;}
h2.h-tit span{color:#007CB0; font-size:36px;}


.hot-deal ul {width: 100%;  display:flex; justify-content:space-between; flex-flow:wrap; margin-top:80px;}
.hot-deal ul li{width:23%;}
.hot-deal ul li a{display:block; width:100%; height:300px; overflow:hidden; border:1px solid #E1E1E1; overflow:hidden;}
.hot-deal ul li a img{width:100%; height:100%;}
.hot-deal ul li span {display: block;}
.hot-deal ul li span.Hname {font-size: 22px; color: #616161;  margin-top:20px; line-height:1;}
.hot-deal ul li span.Hprice {font-size: 18px; font-weight: bold; color: #D20000; margin:10px 0 50px;}

.mConBox5 .moreA{display:none; width: 60px;height: 60px; margin: 30px auto 0;border-radius : 50%;  cursor:pointer; background: #007CB0; transition: all 0.4s; position:relative;}
.mConBox5 .moreA > a{background: #fff; position: absolute; top: 50%; left: 50%;}
.mConBox5 .moreA:hover {transform: rotate( 90deg );}
.mConBox5 .moreA:before{display: block;content: ''; width: 20px; height: 2px; background: #fff; position: absolute; top: 50%; left: 50%;
transform: translate( -50%, -50% );}
.mConBox5 .moreA:after{display: block;content: ''; width: 2px; height: 20px; background: #fff; position: absolute; top: 50%; left: 50%; 
transform: translate( -50%, -50% );}

/*BEST 쇼핑몰*/

.mConBox6 {width:100%; margin: 0 auto 50px; margin-top:80px;}
.mConBox6 h2{width:1390px; margin:0 auto 80px;}

.mConBox6 .bgA{background-color:#ECEEEC; overflow:hidden; padding-bottom:50px;}

.Bshop {position: relative; width: 100%; height: auto; padding: 30px 0; box-sizing: border-box;}

.Bshop .m_slider2{width:100%; margin:0 auto;}
.Bshop ul li{margin-right:50px;}
/*.Bshop .m_slider2 li{width:103px; height:103px; background-color:#fff; border-radius:100px;overflow:hidden;}*/
.Bshop .m_slider2 #slider2-B {position:absolute; left: 0; top:40%; z-index:100;}
.Bshop .m_slider2 #slider2-N {position:absolute; right: 0px; top:40%; z-index:100;}


.infoA h2{font-family:'gothic'; font-size:20px; margin-bottom:20px; font-weight:900; color:#007cb0;}


/* Main menu */

#menu li{padding-bottom: 10px;position: relative;}
#menu li > ul > li:hover a{color: #fff;}
#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: linear-gradient(#6ac1e5, #eee); -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;}

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

#menu ul li{float: none;text-align:left;  margin: 0;padding: 0 3px;display: block; border-bottom:1px solid #fff;}

#menu ul li:last-child{ -moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;    }

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

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

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

#menu ul a:hover{background: #fff;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);}

#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:after{ content: '';position: absolute; left: 30px;top: -8px; width: 0; height: 0; border-left: 5px solid transparent;  border-right: 5px solid transparent;
border-bottom: 8px solid #444;}

#menu ul ul li:first-child a:after{ left: -8px;top: 12px; width: 0; height: 0; border-left: 0;	 border-bottom: 5px solid transparent;border-top: 5px solid transparent;
border-right: 8px solid #444;}

#menu ul li:first-child a:hover:after{border-bottom-color: #04acec; }

#menu ul ul li:first-child a:hover:after{border-right-color: #04acec;   border-bottom-color: transparent; 	}
#menu ul li:last-child > a
{ -moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}

/* Clear floated elements */
#menu:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}

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

ul#topnav {margin: 0; padding: 0;float: left;width: 970px;list-style: none;position: relative;font-size: 1.2em;
background:url(images/topnav_s.gif) repeat-x;}
ul#topnav li {float: left;margin: 0; padding: 0;border-right: 1px solid #555;}
ul#topnav li a {padding: 10px 15px;display: block;color: #f0f0f0;text-decoration: none;}
ul#topnav li:hover { background: #1376c9 url (images/topnav_a.gif) repeat-x; }
ul#topnav li span {float: left;	padding: 15px 0;position: absolute;left: 0; top:35px;display: none;width: 970px;background: #1376c9;color: #fff;
-moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}

@media (max-width:1450px){
.mConBox1{width:100%;}
.mConBox1 .m_slider{float:none;}
.m_slider .bxslider li a img{width:100%;}

.w1390 , .mConBox6 h2 , .Bshop .m_slider2{width:95%;}
.mConBox6 h2 {margin:0 auto 40px;}
.mConBox3{height: auto; flex-direction: column;}
.main-notice{width:100%;}
.main-notice .mbg div{padding:3%;}
.main-notice div h2{margin-top:0;}
.main-notice ul{margin-top:20px;}
.prog-step{width:100%; margin-top:20px;}

.mConBox4 , .mConBox5 , .mConBox6{margin-top:40px;}
.hot-deal ul li a{height:200px;}
.hot-deal ul li span.Hname{font-size:16px;}
.hot-deal ul li span.Hprice{font-size:14px; margin:5px 0 20px;}
}
@media (max-width:1250px){
.mConBox2{flex-flow:column;}
.leftBtn{width:100%;}
.leftBtn .topUl li{height:auto;}
.leftBtn .topUl li > h3{font-size:30px;}
.leftBtn .btUl li > h4{font-size:20px;}
.rightBtn{width:100%; margin-top:10px;}
.rightBtn li{width:24%; margin-bottom:10px; }
.rightBtn li a{height:70%;}
.rightBtn li a img{height:40px;}
.Bshop .m_slider2{width:90%;}
.Bshop ul li{float:left;  margin:0 0.5%; }

}
@media (max-width:1000px){
#mContainer {margin-top:5px;}
.prog-step .stepTab{padding:5% 3%;}
.mTs img{width:100%;}
h2.h-tit span{font-size:30px;}
.hot-deal ul{margin-top:50px;}
.hot-deal ul li{width:33%;}
.hot-deal ul li a{height:auto;}
.hot-deal ul li:nth-child(7) , .hot-deal ul li:nth-child(8){display:none;}

.mConBox4 .search-ma ul li {width:32%;}
.mConBox4 .search-ma ul li:nth-child(4), .mConBox4 .search-ma ul li:nth-child(5){display:none;}
.mConBox4 .search-ma ul li span.num-page{font-size:14px; margin:10px 0 0;}
.mConBox4 .search-ma ul li span.date-add{font-size:12px;}
.hot-deal ul li span.Hname{font-size:14px;}

}
@media (max-width:900px){
.leftBtn .btUl li h4{font-size:20px;}
}

@media (max-width:768px){
.w1390{margin:20px auto 0;}
.leftBtn .topUl li{height:180px;}
.leftBtn .topUl li > div{margin:15% auto;}
.leftBtn .topUl li h3{font-size:20px;}
.leftBtn .topUl li a{font-size:14px; line-height:30px; width:130px;}
.leftBtn .btUl li{width:50%; height:150px;}
.leftBtn .btUl li h4{font-size:15px;}
/*.leftBtn .btUl li.anImg{display:none;}*/
.leftBtn .btUl li.bgLi{background-color:#333;}
.leftBtn .btUl li img{left:35%; top:15%; width:100px;}

.leftBtn .btUl li a{margin:20px auto 0;}
/*.hide-li{display:block;}*/
.rightBtn li{width:33%; margin-bottom:5px; height:120px;}
.rightBtn li a p{font-size:12px;}
.rightBtn li.mb0{width:49.5%;}

.rightBtn li a{height:60%; margin:8% auto;}
.main-notice div h2, {font-size:20px;}
.main-notice h2 > a.more , .mConBox4 h2 > a.more{width:20px; height:20px;}
.main-notice h2 > a.more:before , h2 > a.more:before{width:8px;}
.main-notice h2 > a.more:after , h2 > a.more:after{height:8px;}
.main-notice ul li{line-height:30px;}
.main-notice ul li a{font-size:14px;}
.main-notice ul li span{font-size:12px;}
.prog-step .stepTab{flex-direction:column;}
.menu_tab ul{display:flex; margin-bottom:15px;}
.stepTab .menu_tab ul li{margin-top:0; margin-right:20px;}
.stepTab .menu_tab ul li:nth-child(2){margin-top:0;}

.mConBox4{margin-top:20px;}
.mConBox5{margin-top:40px;}
.mConBox6{margin:40px auto 20px;}

.mConBox4 .w1390{padding:20px 0;}
.mConBox4 h2{font-size:20px;}
.mConBox4 .search-ma{padding-top:20px;}
.hot-deal ul{margin-top:40px;}
h2.h-tit em{width:27%;}
h2.h-tit span{font-size:24px;}
.mConBox6 h2{margin:0 auto 40px;}
.mConBox6 .bgA{padding-bottom:10px;}
.Bshop ul li{margin:0 1%; }
.popUpArea{display:none;}
.Bshop .m_slider2 #slider2-B img , .Bshop .m_slider2 #slider2-N img{height:20px;}
}
@media (max-width:600px){
.leftBtn .topUl li{width:50%; height:auto;}
.leftBtn .topUl li > div{margin:18% auto;}
.leftBtn .topUl li h3{font-size:16px;}
.leftBtn .topUl li a{margin:10px auto 0; font-size:10px; line-height:18px; width:90px;}
.leftBtn .btUl li{height:90px; width:33%;}
.leftBtn .btUl li h4{font-size:10px;}
.leftBtn .btUl li a{width:80px; line-height:15px; font-size:8px; margin:10px auto 0;}
/*.leftBtn .btUl li:nth-child(2) h4, .leftBtn .btUl li:nth-child(2) a{color:#25bce6; border-color:#0067a3;}*/
.leftBtn .btUl li > div{top:27%;}
.leftBtn .btUl li img{width:50px;}

.rightBtn li{width:49.8%; margin-bottom:1px; height:80px;}
.rightBtn li.mb0{width:49.8%;}
.rightBtn li a{height:60%; margin:8% auto;}
.rightBtn li a img{height:30px;}

.main-notice div h2{font-size:20px;}
.main-notice ul{margin-top:10px;}

.Bshop ul li{margin:0 1% 0 0.9%; }
}
@media (max-width:482px){
.mConBox4 h2 , .mConBox5 h2 {margin-top:20px; }
.m_slider .bx-controls{bottom:5px;}
.m_slider .bx-pager a{width:10px; height:10px;}
.leftBtn .topUl li h3 {font-size:12px;}
.leftBtn .btUl li.anImg{background-size:contain;}
.main-notice > div.mbg {margin:8px;}
.mConBox4 .search-ma ul li{width:48%;}
.mConBox4 .search-ma ul li:nth-child(3){display:none;}
h2.h-tit span{font-size:20px;}
.mConBox5{margin-top:20px;}
.mConBox6{margin:20px auto 0;}
.mConBox6 h2{margin:0 auto 20px;}
.hot-deal ul li{width:48%;}
.hot-deal ul li:nth-child(5) ,  .hot-deal ul li:nth-child(6){display:none;}
.hot-deal ul li span.Hname{font-size:14px;}
.hot-deal ul li span.Hprice{font-size:12px; margin:5px 0 10px;}
.Bshop ul li{margin-left:22px; }
.popUpArea{display:none;}
}







@media all and (min-width:100px) and (max-width:1600px){
#floating , #floating2{display:none;}
}