/* 예산 입력 */
.budget_wrap { 
bottom: 0;
transition: 0.2s;
max-width: 800px;
width: 100%;
height: 100vh;
border-radius: 20px;
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
background-color: #fff;
box-shadow: 8px 4px 8px rgba(0,0,0,0.1);
z-index: 100;
box-sizing: border-box;
border: 1px solid #ddd;
overflow-y: auto;
z-index:1000;
}
.budget_wrap .close { color:#555; top:10px; right:10px;}

.budget_con { width:1020px; max-width:100%; margin:0 auto;   display: flex;flex-direction: column;height: 100vh;overflow: hidden; }
.budget_con_heightauto {height:auto;}
.budget_con .budget_top { border-bottom:1px solid #ddd;  position:relative; padding:10px 10px 10px 10px; background-color:#e9e9e9; color:#fff!important;  z-index:1000;}
.budget_con .budget_conbody {  flex: 1; overflow-y: auto;  padding:  10px;}
.budget_con .budget_bottom { display: flex;flex-direction: column; border-top:1px solid #ddd; }


.budget_con .budget_top h4 { text-align: center; color:#555555d4; padding:0; font-family: 'GmarketSansMedium'; font-weight:normal; }
.budget_con .budget_top h4 b {font-weight:bold; color:#000;}
.budget_con .budget_top h4 em {font-size:12px; color:#6d5aff}
.budget_con  .icon ul{display:flex; gap:5px;   width:calc(100% - 20px); margin:10px auto 0 auto;}
.budget_con  .icon li { flex:1;  }
.budget_con  .icon li a{ display:block; height:55px; padding:9px 5px; font-size:14px; border-top:1px solid #ddd;  border-left:1px solid #ddd;   border-right:1px solid #ddd;   color:#aaa; text-align:center; border-radius:8px 8px 0 0;}
.budget_con  .icon li a.over {background-color:#ff38a6;  border-top:1px solid #ff38a6;  border-left:1px solid #ff38a6;   border-right:1px solid #ddd; color:#fff;}
.budget_con  .icon li a.over i { color:#fff;}
.budget_con  .icon i {font-size:20px; color:#aaa;}
 
/*.budget_conbody .list {
height: auto;  min-height:150px; max-height:250px;  
overflow: hidden;
overflow-y: auto; overflow-y: scroll;
scrollbar-width: thin;  
scrollbar-color: #aaa #f0f0f0;
}

 
.budget_conbody .list::-webkit-scrollbar {
width: 6px;  
}

.budget_conbody .list::-webkit-scrollbar-thumb {
background-color: #aaa; 
border-radius: 3px;
}

.budget_conbody .list::-webkit-scrollbar-track {
background: #f0f0f0; 
}
*/

.budget_conbody .list li {display:flex; font-size:15px; justify-content:space-between;align-items: center; border-bottom:1px solid #ddd; padding:7px 10px; font-weight:bold; color:#222;}
.budget_conbody .list li em {border-radius:5px; color:#fff; padding:4px 7px; margin-right:3px; }
.budget_conbody .list li em b{display:none;}
.budget_conbody .list li em.traffic {background-color:#3FA6FA;}
.budget_conbody .list li em.food {background-color:#F13F37;}
.budget_conbody .list li em.hotel {background-color:#23BABC;}
.budget_conbody .list li em.tour {background-color:#FFCB05;}
.budget_conbody .list li em.etc {background-color:#F37F21;}
.budget_conbody .list li em.shopping {background-color:#7963AB;}


.budget_conbody .list li span {font-weight:normal; color:#999; width: 90px;overflow: hidden;height: 22px;line-height: 23px; padding-left:3px;  text-overflow: ellipsis; -white-space: nowrap;}

.budget_conbody .price {font-weight:bold; color:#222; font-size:12px; font-family: 'GmarketSansMedium';}
.budget_conbody .price b {color:#999; font-weight:normal; font-size:10px; padding-right:3px;}
.budget_conbody .price .xi-close-circle {  background-color:#000; border:1px solid #000;   color:#fff;padding:4px ; margin-left:3px; border-radius:5px; }
.budget_conbody .price .xi-pen {  border:1px solid #222;  color:#222; padding:4px; margin-left:5px; border-radius:5px; }

.budget_bottom .btn_save {display:inline-block; background-color:#ff38a6; margin-top:10px;width:100%; box-sizing:border-box;color:#fff; padding:10px 20px; border-radius:10px; cursor:pointer}




.budget_view_detail_wrap {display:flex; flex-direction: column;    width: 96%; box-sizing: border-box;padding: 15px 0%;
max-width: 800px; height: calc(100vh - 40px);  margin: 20px auto 20px auto; overflow:hidden!important; }
.budget_view_detail_wrap #view_wrap_02 {flex:1;   overflow-y: auto; }
.budget_view_detail_wrap .abook_btn {margin-top:auto; padding-top:20px;  margin-top:auto;}
.budget_view_detail_wrap .budget_con1 {flex-grow:1; }
.budget_view_detail_wrap .diary_btn {   margin-top:0;}

.budget_view_detail_wrap .budget_conbody  {overflow:hidden;}





/* 계산기 */
#calculatordisplay {width: 100%; text-align:right; font-size: 13px; margin-bottom:3px; box-sizing:border-box; color: #fff;padding: 5px 10px;border-radius: 10px;}
#calculatordisplayResult {width: 100%;  text-align:right;   font-size: 18px; margin-bottom:10px; box-sizing:border-box; color: #fff;background: #ffffff30;padding: 12px 10px 20px 10px;border-radius: 10px;}


#calculatordisplay::placeholder {color:#gray!important;}
#calculatordisplayResult::placeholder {color:#fff!important;}

.calculator_input .input_wrap_div {width:100%;}

.calculatordisplayResult_p01 {position:absolute; right:12px; top:62px;}
.calculatordisplayResult_p01 p {font-size:11px; color:#ffffffb8!important}

.calculatordisplayResult_p02 {position:absolute; left:15px; top:47px;}
.calculatordisplayResult_p02  p {font-size:11px; color:#ffffffb5}




.calculator { width: 100%;text-align: center; border-radius: 5px; padding:10px;box-sizing:border-box;  }
.calculatordisplayResult_p {position:absolute; right:15px; top:40px;}
.calculatordisplayResult_p  p {font-size:11px; color:#ffffffb5}
.calculator .buttons {display: grid;grid-template-columns: repeat(4, 1fr);gap: 5px;}
.calculator .button {grid-column: span 1;}
.calculator .operator {grid-column: span 2;}
.calculator .span4 {grid-column: span 4; background-color:#fff2f9;}
.calculator button {padding: 15px 10px;font-size: 14px; color:#222; border: 1px solid #ccc;border-radius: 5px;cursor: pointer;background-color: #fff;}
.calculator button:hover {background-color: #fff2f9}


.calculator .back_blue:hover { color:#ff38a6!important;}



.budget_con .budget_bottom .item {display:flex; padding:0 10px; margin-bottom:20px;box-sizing:border-box; justify-content:space-between}
.budget_con .budget_bottom .input_p {width:100%; border:2px solid #ff38a6; margin-bottom:10px;  }
.budget_con .budget_bottom .item .btn_box {display:flex; align-items:center; gap:5px}
.budget_con .budget_bottom .item .btn_box a {display: block; background-color:#eee; width: 2rem; height: 2rem; overflow: hidden; text-align: center; border-radius: 100%; padding: 0.2rem; line-height: 2rem}
.budget_con .budget_bottom .item .btn_box .group01 {font-size:1.4rem}

.budget_con .budget_bottom .b_top {display:flex;   flex-direction: column; justify-content:space-between; align-items: flex-start;padding:30px 10px 40px 10px; background-color:#333; color:#fff;}
.budget_con .budget_bottom .b_top p {color:#fff; }


.budget_con .budget_bottom  .b_top a img {width:25px; height:auto; margin-right:5px;} 
.budget_con .budget_bottom  .b_top .nation_money {display:flex;} 
.budget_con .budget_bottom  .b_top .nation {display:flex; align-items:center; margin-left:45px;}
 
.budget_con .budget_bottom .b_top .icon_pay {display:flex; gap:5px;  }
.budget_con .budget_bottom .b_top .icon_pay a {border:1px solid #fff; padding:10px 20px; border-radius:5px; }
.budget_con .budget_bottom .b_top .icon_pay a.over {background-color:#fff; color:#000; font-weight:bold;}


.budget_con .budget_bottom .b_top .calculator_input {margin-top:0px; position:relative; align-items: flex-end;  flex-direction: column;  display:flex; text-align:right; justify-content: space-between; width:100%;}
.budget_con .budget_bottom .b_top .calculator_input .calculator_input_p_first  { margin-right:10px; position:relative; padding-right:10px; margin-right:10px;}
.budget_con .budget_bottom .b_top .calculator_input .calculator_input_p_first:after {position:absolute; right:0; top:3px; width:1px; height:14px; background-color:#ffffff78; content:'';}
.budget_con .budget_bottom .b_top .calculator_input p:first-child {  }
.budget_con .budget_bottom .b_top .calculator_input .calculator_input_p {  font-size:16px;}
 
.pay_select {gap:10px; display: flex;align-items: center; justify-content: space-between;width: 100%; margin-top:20px;}





  /* 국가선택 */
  .nation .flag {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 33px;
    left: 20px;
    width: 25px;
    height: 17px;
    background: url( /images/currency/bg_flag3.png) no-repeat 0 0;
    background-size: 145px 380px;
  }
  
  .nation_money .flag:after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    content: '';
  }
  
  .nation_money .flag.krw {
    background-position: 0 0;
  }
  
  .nation_money .flag.usd {
    background-position: 0 -32px;
  }
  
  .nation_money .flag.jpy {
    background-position: 0 -64px;
  }
  
  .nation_money .flag.cny {
    background-position: 0 -96px;
  }
  
  .nation_money .flag.aud {
    background-position: 0 -128px;
  }
  
  .nation_money .flag.gbp {
    background-position: 0 -160px;
  }
  
  .nation_money .flag.cad {
    background-position: 0 -192px;
  }
  
  .nation_money .flag.php {
    background-position: 0 -224px;
  }
  
  .nation_money .flag.hkd {
    background-position: 0 -256px;
  }
  
  .nation_money .flag.thb {
    background-position: 0 -288px;
  }
  
  .nation_money .flag.eur {
    background-position: 0 -320px;
  }
  
  .nation_money .flag.sgd {
    background-position: -40px 0;
  }
  
  .nation_money .flag.inr {
    background-position: -40px -32px;
  }
  
  .nation_money .flag.brl {
    background-position: -40px -64px;
  }
  
  .nation_money .flag.twd {
    background-position: -40px -96px;
  }
  
  .nation_money .flag.myr {
    background-position: -40px -128px;
  }
  
  .nation_money .flag.chf {
    background-position: -40px -160px;
  }
  
  .nation_money .flag.vnd {
    background-position: -40px -192px;
  }
  
  .nation_money .flag.rub {
    background-position: -40px -224px;
  }
  
  .nation_money .flag.idr {
    background-position: -40px -256px;
  }
  
  .nation_money .flag.bdt {
    background-position: -40px -288px;
  }
  
  .nation_money .flag.sek {
    background-position: -40px -320px;
  }
  
  .nation_money .flag.nok {
    background-position: -80px 0;
  }
  
  .nation_money .flag.huf {
    background-position: -80px -32px;
  }
  
  .nation_money .flag.mxn {
    background-position: -80px -64px;
  }
  
  .nation_money .flag.kwd {
    background-position: -80px -96px;
  }
  
  .nation_money .flag.dkk {
    background-position: -80px -128px;
  }
  
  .nation_money .flag.egp {
    background-position: -80px -160px;
  }
  
  .nation_money .flag.pln {
    background-position: -80px -192px;
  }
  
  .nation_money .flag.sar {
    background-position: -80px -224px;
  }
  
  .nation_money .flag.ils {
    background-position: -80px -256px;
  }
  
  .nation_money .flag.pkr {
    background-position: -80px -288px;
  }
  
  .nation_money .flag.bhd {
    background-position: -80px -320px;
  }
  
  .nation_money .flag.jod {
    background-position: -120px 0;
  }
  
  .nation_money .flag.bnd {
    background-position: -120px -32px;
  }
  
  .nation_money .flag.aed {
    background-position: -120px -64px;
  }
  
  .nation_money .flag.mnt {
    background-position: -120px -96px;
  }
  
  .nation_money .flag.kzt {
    background-position: -120px -128px;
  }
  
  .nation_money .flag.try {
    background-position: -120px -160px;
  }
  
  .nation_money .flag.czk {
    background-position: -120px -192px;
  }
  
  .nation_money .flag.qar {
    background-position: -120px -224px;
  }
  
  .nation_money .flag.nzd {
    background-position: -120px -256px;
  }
  
  .nation_money .flag.zar {
    background-position: -120px -288px;
  }
  
  .nation_money .flag.clp {
    background-position: 0 -352px;
  }
  
  .nation_money .flag.omr {
    background-position: -120px -320px;
  }
  
  .nation_money .flag.npr {
    background-position: -40px -352px;
  }
  
  .nation_money .flag.mop {
    background-position: -80px -352px;
  }


 


/* Mobile Device 1020 */
@media (max-width:1000px) {

.budget_view_detail_wrap { height: calc(100vh - 110px);  margin: 30px auto 80px auto;  }

}



/* Mobile Device 900 */
@media (max-width:900px) {
.budget_wrap {border-radius: 0;height:100vh;border-radius: 0;box-shadow: 0;top: 0px;left: 50%;transform: translate(-50%, -0);z-index: 1000; box-sizing:border-box; border:0;}
/* .budget_wrap {border-radius: 0;height: 100vh;border-radius: 0;box-shadow: 0;top: 70px;left: 50%;transform: translate(-50%, -0);z-index: 360; box-sizing:border-box; border:0;} */
.budget_con { width:1020px; max-width:100%; margin:0 auto;   display: flex;flex-direction: column;height: calc(100vh - 70px);overflow: hidden; }
}





/* Mobile Device 800 */
@media (max-width:800px) {

}









/* Mobile Device 최소 ~ 최대 640px */
@media (max-width:640px) {
.budget_wrap {border-radius: 0; border-radius: 0;box-shadow: 0; left: 50%;transform: translate(-50%, -0);z-index: 1000; box-sizing:border-box; border:0;}
.budget_con { width:1020px; max-width:100%; margin:0 auto;   display: flex;flex-direction: column;height: calc(100vh - 50px);overflow: hidden; }
}






/* Mobile Device 최소 ~ 최대 500px */
@media (max-width: 500px) {

}












/* Mobile Device 400 */
@media (max-width:400px) {
.budget_con .icon li a { font-size: 13px;}
}