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


/*메인*/

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

.mConBox1 {width:100%; margin: 0 auto; position:relative;}

/*메인 롤링 배너*/
.m_slider{position:relative; 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:8%; 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-viewport .bxslider{width:100%; height:auto;}
.m_slider .bx-viewport .bxslider a{display:block; width:100%; height:100%;}
.m_slider .bx-viewport .bxslider a img{display:block; width:100%; height:100%;}
.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: #ccc;
    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: #9ce5b2;
	width:50px;
}


/*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:#000; background-color:#fff; font-weight:900;}

.leftBtn .btUl{display:flex; justify-content:space-between;}
.leftBtn .btUl li{width:32%; background-color:#262626; 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:#000;}
.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:nth-child(2) a{color:#C8FFC7;}
.leftBtn .btUl li a:hover{background-color:#fff; color:#000; }
/*.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:#262626; width:47%; margin-bottom:7%; height:132px; }
.rightBtn li:hover{background-color:#ccc;}
.rightBtn li:hover p{color:#528762;}
.rightBtn li:nth-child(7) , .rightBtn li:nth-child(8){margin-bottom:0;}
.rightBtn li:nth-child(2) , .rightBtn li:nth-child(3) , .rightBtn li:nth-child(6) , .rightBtn li:nth-child(7){background-color:#5FA173;}
.rightBtn li:nth-child(2):hover , .rightBtn li:nth-child(3):hover , .rightBtn li:nth-child(6):hover , .rightBtn li:nth-child(7):hover{background-color:#4c865e;}
.rightBtn li:nth-child(2):hover p, .rightBtn li:nth-child(3):hover p, .rightBtn li:nth-child(6):hover p, .rightBtn li:nth-child(7):hover p{color:#fff;}
.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:#405747;}
.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'; color:#05062E;}
.main-notice h2 > a.more{
    display: block;
    width: 30px;
    height: 30px;
    border-radius : 50%;
    position: absolute;
    top: 0;
    right: 0;
    background: #5fa173;
    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: #f8f8f8; position: absolute; top: 50%; left: 50%;
transform: translate( -50%, -50% );}
h2 > a.more:after{display: block;content: ''; width: 2px; height: 14px; background: #f8f8f8; 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:38px; }
.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:#ebeeec;}
.mConBox4 .w1390{margin:0 auto; overflow:hidden; padding:63px 0 70px;}
.mConBox4 h2.TitName{ font-size:30px; line-height:30px; text-align:center; font-family:"NanumSquareEB";}
.mConBox4 h4{margin:30px 0 0; text-align:center; color:#F55650; font-size:20px; }
.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:23%;}
.mConBox4 .search-ma ul li span.NodataImgBox {border: 1px solid #dbdbdb; height:240px; overflow:hidden;}
.mConBox4 .search-ma ul li span.NodataImgBox img{width:100%;}
.mConBox4 .search-ma ul li span {display: block; overflow: hidden; font-size:19px; font-family:"NanumSquareB"; line-height:26px;}
.mConBox4 .search-ma ul li span.num-page {margin:20px 0 10px; font-size:19px;}
.mConBox4 .search-ma > p{margin:60px auto 0; text-align:center;}
p a.morebtn{color:#fff; background-color:#5FA173;  display:inline-block; padding:0 20px; height:40px; line-height:40px;  border-radius:22px;}
p a.morebtn:hover{background-color:#405747;}
p a.morebtn > span{line-height:36px; font-size:20px; font-family:"NanumSquareB";}


/*BEST 쇼핑몰*/

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

.mConBox6 .bgA{background-color:#bfd9c7; 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:#c8e9d2;}


/*hot deal*/

.mConBox5 {margin-top:70px;}
h2.h-tit{width:100%; font-size: 28px; font-weight: bold; display:flex; align-items:center; justify-content:space-between; line-height:30px;
font-family: 'naum barungothic', 나눔바른고딕; text-align: center;}
h2.h-tit em{color:#5fa173; font-size:36px; width:33%; height:1px; background-color:#5fa173;}
h2.h-tit span{color:#5fa173; font-size:36px; font-family:"Noto Sans CJK KR";}

.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; outline: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{width:60px;height:60px; margin: 30px auto 0;border-radius : 50%;  cursor:pointer; border:1px solid #5FA173 ;
background-color:#5FA173; transition: all 0.4s; position:relative;}
.mConBox5 .moreA > a{background: #fff; position: absolute; top: 50%; left: 50%;}
.mConBox5 .moreA:hover {transform: rotate( 90deg ); background-color:#000;}
.mConBox5 .moreA:before{display: block;content: ''; width: 30px; height: 3px; background: #fff; position: absolute; top: 50%; left: 50%;
transform: translate( -50%, -50% );}
.mConBox5 .moreA:after{display: block;content: ''; width:3px; height: 30px; background: #fff; position: absolute; top: 50%; left: 50%; 
transform: translate( -50%, -50% );}

@media (max-width:1450px){
.mConBox1{width:100%;}
.mConBox1 .m_slider{float:none; height:auto;}
.m_slider .bxslider li a img{width:100%;}
.mConBox2{margin-top:40px;}
.w1390{margin:30px auto 0;}
.w1390 , .mConBox6 h2 , .Bshop .m_slider2{width:96%;}
.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:50px;}
.hot-deal ul{height:auto;}
.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){
#mContainer{margin-top:102px; padding-top:0;}
.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){
.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:nth-child(4), .hot-deal ul li:nth-child(7){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:12px; margin:8px 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:25px;}
.mConBox4 .search-ma ul li span.NodataImgBox{height:180px;}
.mConBox4 .search-ma ul li span.NodataImgBox img{height:100%;}
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{height:280px; overflow:hidden;}
.hot-deal ul li{width:48%;}
.hot-deal ul li:nth-child(3){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;}
}
#floating{display:none;}
@media(max-width:1600px){
#floating , #floating2{display:none;}
}

@media (max-width:1450px){
.m_slider .bx-pager a.active{width:40px;}
.m_slider .bx-pager a{height:10px;}
}
@media (max-width:1100px){
.mConBox1{position:static;}
.mConBox2{margin-top:30px;}
.mConBox5 .moreA{width:40px; height:40px;}
.mConBox5 .moreA:before{width:22px; height:2px;}
.mConBox5 .moreA:after{width:2px; height:22px;}
}
@media (max-width:768px){
.m_slider .bx-pager a.active{width:25px;}
.m_slider .bx-pager a{height:5px;}
.mConBox2{margin-top:20px;}
.mConBox5 .moreA{width:30px; height:30px;}
.mConBox5 .moreA:before{width:13px; height:2px;}
.mConBox5 .moreA:after{width:2px; height:13px;}
.mConBox4 h2.TitName{font-size:18px; line-height:1rem;}
.mConBox4 .search-ma ul li span{line-height:1rem;}
.mConBox4 h4{margin:10px 0 0; font-size:14px;}
.mConBox4 .search-ma > p{margin:35px auto 0;}
p a.morebtn{height:30px; line-height:30px;}
p a.morebtn > span{line-height:30px;}
.mConBox5 .moreA{width:35px; height:35px;}
.mConBox5 .moreA:before{width:18px; height:2px;}
.mConBox5 .moreA:after{width:2px; height:18px;}
}