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


/*메인*/

#mContainer {width: 100%;}
#mContainer #Container {width:100%; 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; 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:1882px;}
.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 img{width:100%;}
.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;
}

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

/*################## mConBox2 #########################*/
.mConBox2 {width:100%; background-color:#eaeaea;}
.mConBox2 ul{height:100%; margin:0 auto; padding:20px 0; flex-wrap:nowrap;}
.mConBox2 li a{display:flex; flex-wrap:nowrap; align-items:center;}
.mConBox2 li a:after{content:"|"; display:inline-block; border:1px solid #000;  height:26px; margin:0 40px;}
.mConBox2 li a:last-child:after{display:none;}

/*.mConBox2 ul:after{display:block; content:""; clear:both;}*/

/*배송대행신청 구매대행 신청버튼*/
/* PC Layout */
.mConBox3 {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}

.mConBox3 div {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

.mConBox3 .dflexA {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mConBox3 li {
  height: 100%;
  padding: 0 10px;
  color: #CDCDCD;
}

/* Mobile Layout */
@media screen and (max-width: 768px) {
  .mConBox3 div {
    padding: 40px 0;
  }
  
  .mConBox3 .dflexA {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Each service item + divider takes 50% width to create 2 items per row */
  .mConBox3 .dflexA li {
    width: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
  }
  
  /* Control the image height */
  .mConBox3 .dflexA li img {
    max-height: 150px;
    width: auto;
  }
  
  /* Control divider image height specifically */
  .mConBox3 .dflexA li:nth-child(2) img,
  .mConBox3 .dflexA li:nth-child(6) img {
    max-height: 70px;
    width: auto;
  }
  
  /* Hide all dividers initially */
  .mConBox3 .dflexA li:nth-child(2n) {
    display: none;
  }
  
  /* But show the first divider (after first item) */
  .mConBox3 .dflexA li:nth-child(2) {
    display: flex;
    height: 150px;
  }
  
  /* And show the third divider (after third item) */
  .mConBox3 .dflexA li:nth-child(6) {
    display: flex;
    height: 150px;
  }
  
  /* For odd-numbered items (actual service items) */
  .mConBox3 .dflexA li:nth-child(odd) {
    width: 40%;
    display: flex;
    height: 150px;
  }
  
  /* For each row's divider */
  .mConBox3 .dflexA li:nth-child(2),
  .mConBox3 .dflexA li:nth-child(6) {
    width: 10%;
  }
  
  /* Adjust margins to achieve the 2-column layout */
  .mConBox3 .dflexA li:nth-child(1),
  .mConBox3 .dflexA li:nth-child(2),
  .mConBox3 .dflexA li:nth-child(3) {
    margin-bottom: 20px;
  }
}

/* Small mobile screens */
@media screen and (max-width: 480px) {
  .mConBox3 div {
    padding: 30px 0;
  }
  
  .mConBox3 li {
    padding: 10px;
  }
  
  .mConBox3 .dflexA li:nth-child(odd) {
    width: 42%;
  }
  
  .mConBox3 .dflexA li:nth-child(2),
  .mConBox3 .dflexA li:nth-child(6) {
    width: 8%;
  }
}
/* 대행절차 */

.mConBox4 {width:100%; margin:50px auto 0;  background-color:#eaeaea;}

.tab {position: relative; width: 100%; padding:30px 0;}
.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: 500px; margin:0 auto 30px;}
.tab .stepTab .menu_tab ul:after {content:""; display: block; clear: both; z-index: 1;}
.tab .stepTab .menu_tab ul li {float: left;width: 150px;height: 40px;line-height: 40px;border:1px solid #dbdbdb;background: #eee;text-align: center;vertical-align: middle;font-size: 14px;border-radius: 35px;}
.tab .stepTab .menu_tab ul li {margin-left:14px;}
.tab .stepTab .menu_tab ul li.active {background: #FEEE6B;font-weight: bold;color: #000000;}
.tab .stepTab .menu_tab ul li.active a {color: #000000;}

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



.mConBox5 {width:100; margin:50px auto 0;}
.mConBox5 h2 strong {position: relative; padding-left:10px; font-size:24px; font-family: ''Noto Sans CJK KR''; font-weight: bold; color: #333; 
border-left: 5px solid #FEEE6B;}

.mConBox5 h2 span.more{display:inline-block;width:100px; line-height:24px; font-size:14px; border:2px solid #3A5491; text-align:center;
font-weight:400; border-radius:20px;}
.mConBox5 h2 span.more:hover{background-color:#3A5491;}
.mConBox5 h2 span.more:hover a{ color:#fff;}
.mConBox5 .search-ma {width: 100%; padding: 30px 0; box-sizing: border-box;}

.mConBox5 .search-ma ul {width:/*fit-content*/100%; margin: 0 auto;}
.mConBox5 .search-ma ul li {width:18%; text-align:center;}
.mConBox5 .search-ma ul li a {border: 1px solid #dbdbdb; display:block; margin-bottom:20px; overflow:hidden;}
.mConBox5 .search-ma ul li span {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 
font-family:'Noto Sans CJK KR'; font-size:16px;}
.mConBox5 .search-ma ul li span.date-add {margin-top:10px; font-size:12px; font-family:'Noto Sans CJK KR DemiLight';}


.mConBox6{width:100%; margin:10px 0 0; background-color:#fff; padding:20px 0 20px;}
.mConBox6 h2{color:#FEEE6B; font-size:24px; font-weight:400; font-family:'Noto Sans CJK KR'; margin-bottom:30px;}
.mConBox6 .w1200 > div > ul{background-color:#fff;}
.mConBox6 .w1200 > div.cs-info p img{border-top:1px solid #FEEE6B;}

.main-notice {width:37%;}
.mConBox6 h2 strong{font-weight:400;}
.mConBox6 h2 span.more{display:inline-block;width:80px; line-height:18px; font-size:12px; border:1px solid #FEEE6B; text-align:center;
font-weight:400; border-radius:20px;}
.mConBox6 h2 span.more a{color:#fff;}
.mConBox6 h2 span.more:hover{background-color:#fff; border-color:#fff;}
.mConBox6 h2 span.more:hover a{color:#233046; font-weight:900;}
.main-notice ul {width:100%; height:229px; border-top: 1px solid #feee6b; padding: 25px 26px; box-sizing: border-box;}
.main-notice ul li {position: relative; width: 100%; line-height:35px;}
.main-notice ul li a {position: relative; display: block; width: 80%; font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

/*고시환율*/
.mConBox6 .top-rate{width:19%;}
.mConBox6 .top-rate .exch{width:100%; background-color:#fff; height:231px; border-top:1px solid #feee6b;}
.mConBox6 .top-rate .exch div{width:80%; margin:25px auto;}
.mConBox6 .top-rate .exch div > strong{font-family:'돋움체'; font-size:12px; font-weight:400;}
.mConBox6 .top-rate .exch div > p{padding:30px 0 20px; font-size:20px; font-family:'돋움체';}
.mConBox6 .top-rate .exch div > span{display:block; width:95%; padding-top:30px; border-top:1px solid #D6D6D6; font-family:'돋움체'; 
text-align:center; font-size:24px; color:red;}

/*BEST 쇼핑몰*/

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

.mConBox7 h2 {width:100%; font-size: 24px; font-weight: bold; font-family: 'naum barungothic', 나눔바른고딕; margin-bottom: 15px;}
.mConBox7 h2 span {color:#ed1c24;}
.mConBox7 h2 span.snail {color:#000; font-size: 13px; font-weight: 300;}

.Bshop {width: 100%; height: auto; padding:30px 0; position:relative;}
.Bshop .m_slider2{width:97%; margin:0 auto;}
.Bshop li{margin-right:70px;}
.m_slider2 #slider2-B {position:absolute; left: 0; top: 40%; z-index:100;}
.m_slider2 #slider2-N {position:absolute; right: 0px; top: 40%; z-index:100;}


	
/*###################### mConBox7 ############################*/
.mConBox8{margin:50px auto 0; overflow:hidden;}
.mConBox8 .dflexA{align-items:flex-start;}
.mConBox8 .dflexA > div{width:48%;}

.mConBox8 .dflexA > div h2{font-size:24px; font-family:'Noto Sans CJK KR'; color:#585858; margin-bottom:30px;}
.mConBox8 .first_box .title_tx .circle_btn{width:80px;}
.mConBox8 .first_box .img_box{display:flex; flex-wrap:nowrap; justify-content:space-between;}
.mConBox8 .first_box .img_box li{width:30%; padding-left:0; float:left;}
.mConBox8 span{display:block;}
.mConBox8 .first_box .img_box span{text-align:center;}
.mConBox8 span.Hname{margin-top:10px;}
/*.mConBox8 span.Btx{max-height:40px; overflow:hidden;}*/
/* 텍스트 줄바꿈 처리 */
.mConBox8 span.Btx {
    max-height: 40px; 
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.4;
    text-overflow: ellipsis;
    width: 100%;             /* 부모 컨테이너 전체 너비 사용 */
}
.mConBox8 .tx_box{padding-left:40px; width:600px; padding-right:0;}
.mConBox8 .tx_box .Best_tx{width:100%; height:100%;}
.Best_tx li{width:100%; height:120px; display:flex; flex-wrap:nowrap;padding-bottom:30px;}
.Best_tx .small_Img{width:240px; height:100%; float:left;}
.Best_tx .small_Img span{width:100px; height:100px; border-radius:10px;}
.Best_tx p img{margin:0 auto;}
.Best_tx .Bdate{padding-bottom:8px;}
.Best_tx .Bdate strong{display:inline-block; width:60px; margin-left:15px;
border-radius:20px; background-color:#E42337; color:#fff; text-align:center;}

.Best_tx div{float:left; font-size: 14px; padding-left: 10px;}



@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%; }
}


@media all and (min-width:482px) and (max-width:767px){

.popUpArea{display:none;}
}
@media (max-width:481px){
.Bshop ul li{margin-right:100px; }
.popUpArea{display:none;}
}



/* Main menu */


@media all and (min-width:100px) and (max-width:1000px){
#mContainer {margin-top:0;}
}

@media (max-width:1250px){

.mConBox1{width:100%;}
.mConBox5, .mConBox4, .mConBox5, .mConBox6, .mConBox8{margin:40px auto 0;}
.w1200{width:96%;}
.m_slider .bxslider li a img{width:100%;}
.mConBox3 div{padding:50px 0;}
.stepTab img{width:100%; display:block;}
.mConBox5 .search-ma ul li{width:23%;}
.mConBox5 .search-ma ul li:nth-child(5){display:none;}

.main-notice {order:1; width:100%; margin-top:20px;}
.main-notice ul{height:auto;}
.mConBox6 .top-rate{width:40%;}

.Best_tx .small_Img{width:100px;}
}

@media (max-width:1100px){
.mConBox8 .first_box .img_box li{width:45%;}
.mConBox8 .first_box .img_box li:nth-child(3){display:none;}
.mConBox8 .first_box .img_box li a{display:block; text-align:center;}
.mConBox8 .tx_box{padding-left:0;}
}

@media (max-width:950px){
.mConBox2 ul{flex-wrap:wrap;}
.mConBox2 ul li{width:33%;}
.mConBox2 ul li img{margin:5px auto; display:block;}
.mConBox4{display:none;}
.mConBox5{margin:0 auto;}
.mConBox8 .dflexA > div{width:100%; margin-bottom:20px;}
.mConBox8 .first_box .img_box li:nth-child(3){display:block;}
.mConBox8 .tx_box .Best_tx{display:flex; flex-wrap:nowrap; justify-content:space-between;}
.Best_tx li{width:49%;}
}

@media(max-width:860px){
.mConBox5 .search-ma ul li{width:31%; }
.mConBox5 .search-ma ul li:nth-child(4){display:none;}
}
@media(max-width:768px){

.mConBox8 .first_box .img_box li a img{max-width:150px;}
.mConBox8 .tx_box .Best_tx{flex-wrap:wrap;}
.Best_tx li{width:100%;}
}
@media(max-width:700px){
.mConBox6 .cs-info{width:100%; margin-bottom:20px;}
.mConBox6 .top-rate{width:367px;}
}

@media(max-width:580px){
.mConBox2 ul li{width:50%;}
.mConBox5 .search-ma ul li{width:47%;}
.mConBox5 .search-ma ul li:nth-child(3), .mConBox5 .search-ma ul li:nth-child(4){display:none;}
.mConBox5 .search-ma ul li img{width:100%;}

}
@media (max-width:482px){
.mConBox2 , .mConBox5, .mConBox6 , .mConBox7, .mConBox8{width:96%; margin:20px auto 0;}
.mConBox5 h2 strong{font-size:18px;}
.mConBox5 h2 span.more{font-size:12px;}

.mConBox5 .search-ma ul li span{font-size:14px;}
.mConBox5 .search-ma ul li span.date-add{margin-top:5px;}
.m_slider .bx-controls{bottom:5px;}
.m_slider .bx-pager a{width:10px; height:10px;}

.main-notice ul li{line-height:30px;}
.main-notice ul li a{font-size:13px;}

.mConBox8 .first_box .img_box li:nth-child(3){display:none;}
}

@media (max-width:420px){
.mConBox6 .cs-info img{width:100%;}
.mConBox6 .top-rate{width:100%;}

}


#floating , #floating2 , #floating3 , #floating4{display:none;}

@media (max-width:1450px){
#floating , #floating2 , #floating3 , #floating4{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); }
}


   .mConBox6 {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .section {
      flex: 1;
      min-width: 300px;
      position: relative;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .section-header {
      padding: 15px 20px;
      font-size: 18px;
      font-weight: bold;
      color: white;
    }
    
    .section-content {
      background-color: white;
      padding: 20px;
      min-height: 200px;
    }
    
    /* 고객센터 섹션 */
    .customer-service {
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
    }
    
    .customer-service .section-header {
      background-color: #4267B2;
    }
    
    .customer-service .info-row {
      display: flex;
      margin-bottom: 30px;
    }
    
    .customer-service .info-label {
      width: 100px;
      font-weight: bold;
	  font-size: 20px;

    }
    
    .customer-service .info-value {
      flex: 1;
	  font-size: 15px;
    }
    
    .customer-service .bank-detail {
      font-size: 14px;
      color: blue;
      margin-top: 5px;
    }
    
    /* 공지사항 섹션 */
    .notice .section-header {
      background-color: #4267B2;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .notice .detail-btn {
      background-color: white;
      border: none;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 12px;
      cursor: pointer;
    }
    
    .notice .notice-list {
      list-style: none;
    }
    
    .notice .notice-item {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid #eee;
    }
    
    .notice .notice-title {
      flex: 1;
    }
    
    .notice .notice-date {
      color: #666;
      font-size: 14px;
    }
    
    /* 환율정보 섹션 */
    .exchange-rate .section-header {
      background-color: #E53935;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .exchange-rate .date-range {
      text-align: center;
      padding: 15px 0;
      color: #333;
      font-size: 14px;
    }
    
    .exchange-rate .currency-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 0;
      border-bottom: 1px solid #eee;
    }
    
    .exchange-rate .currency-flag {
      width: 24px;
      height: 16px;
      margin-right: 10px;
    }
    
    .exchange-rate .currency-info {
      display: flex;
      align-items: center;
    }
    
    .exchange-rate .currency-value {
      font-weight: bold;
	  font-size:24px;
	  color:red; 
      text-align: right;
    }
    
    .exchange-rate .equals-sign {
      margin: 0 10px;
      color: #666;
    }
      .exchange-rate .detail-btn {
      background-color: white;
      border: none;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 12px;
      cursor: pointer;
    }  
    @media (max-width: 768px) {
      .section {
        flex: 100%;
      }
    }