@charset "utf-8";


/* 비용계산기 시작 */
body{min-width:auto;}
#cost_calculator{width:644px; /*height:800px;*/ overflow: hidden; /* outline: 1px solid red; */}
#cost_calculator .select{display:block;}/*선택 탭*/

/* 램프 탭 메뉴*/
.cost_calculator_tab{border-bottom:1px solid #363636; clear: both; overflow: hidden;}
.cost_calculator_tab li{float:left;}
.cost_calculator_tab li a{display: block; width:129px; height:65px; line-height:65px; font-size: 16px; text-align: center; color:#131313; background-color: #fff;}
.cost_calculator_tab li:last-child a{width:128px;}
.cost_calculator_tab li a.select{color:#ffffff; background-color:#363636;}
/************************************************************************/
.contents{display: none;}
.contents.select_con{display: block;}/*선택 탭 내용 보여주기*/

.cost_arrival_tab{border-top:3px solid #e81d1d; clear: both; overflow: hidden; }
.cost_arrival_tab li{float:left;}
.cost_arrival_tab li a{display: block; width:129px; height:65px; line-height:65px; font-size: 16px; text-align: center; color:#131313; background-color: #fff;}
.cost_arrival_tab li:last-child a{width:128px;}
.cost_arrival_tab li a.select{color:#ffffff; background-color:#363636;}/* 센터 도착 탭 메뉴*/

/*거점 탭*/
/* .contents .state_choice{width:590px;  height:90px;  line-height:30px; text-align:center; color:#32394c; font-weight:bold; background:#FFF; margin:15px auto; font-size:11px; border-top:1px solid #ededed;border-left:1px solid #ededed; } */
.contents .state_choice{width:590px;  height:60px;  line-height:30px; text-align:center; color:#32394c; font-weight:bold; background:#FFF; margin:15px auto; font-size:11px; border-top:1px solid #ededed;border-left:1px solid #ededed; }
.contents .state_choice li{float:left; border-bottom:1px solid #ededed; border-right:1px solid #ededed;}
.contents .state_choice li a{display:block; width:146.5px; height:29.9px; color:#666666;}
.contents .state_choice li a:hover{background:#919191; color:#FFF;}
.contents .state_choice li a.select{ background-color: #919191; color:#FFF;}


/*계산기 컨텐츠 시작*/
.calculator_con{width:100%; /* height:735px; */ margin:0 auto;  overflow: hidden;}

.delivery_charge_estimate{width:590px; height:180px; margin:15px auto; border:1px solid #f8f7f7; border-right: 0;}
.delivery_charge_estimate th{ height:40px; background:#fafcfc; border-bottom:1px solid #f1f0f0;}
.delivery_charge_estimate td{border-bottom:1px solid #f1f0f0; padding:0 10px; border-right:1px solid #f8f7f7; clear: both; overflow: hidden;}
.delivery_charge_estimate td >div{float:left; margin-right:5px;}
.delivery_charge_estimate td >div:last-child{margin-right:0;}
.delivery_charge_estimate td select{height:25px; border:1px solid #d7d6d3;}
.delivery_charge_estimate td input{height:25px; border:1px solid #d7d6d3;}

.calculator_con .calculator_con_result{ width:590px; margin:5px auto;  background:#FFF; border-radius:5px; overflow:hidden; }
.calculator_con .calculator_con_result table{ width:590px; height:100%; border:1px solid #dfdddd; margin:30px auto; margin-top:15px; border-spacing:0;}
.calculator_con .calculator_con_result table th{width:38%; height:40px; background:#f8f7f7; border-bottom:1px solid #dfdddd; text-align:left;  padding-left:2%;}
.calculator_con .calculator_con_result table td{width:58%; height:40px; border-bottom:1px solid #dfdddd; padding-left:2%; color:#ff0000;}

.calculator_con .btn_charge{width:590px; margin:0 auto; clear: both; overflow: hidden;}
.calculator_con .btn_charge a{display:block; float:right; padding:8px 24px; font-size: 14px; background: #e21e2c; color:#FFF; cursor: pointer; text-align: center;}
.calculator_con .btn_charge a:hover{background: #cc0c1a; }

/* 주의 사항 시작 */
.calculator_con .explain{width:590px; padding:20px;margin-top:30px; color:#666666; background-color: #fafafa;}
.calculator_con .explain h3{margin-bottom:10px;}
.calculator_con .explain li{padding-left:10px; margin-bottom:5px; line-height: 18px;}

/************************************************************************/


/* 국제 배송료 시작 */
.shipping_calculator{width:100%; /* height: 735px; */ margin:0 auto;  overflow-y:auto; overflow-x:hidden; position:relative;}
.shipping_charge_list{ width:590px; margin:10px auto 30px;  background:#FFF; border-radius:5px;}
.shipping_charge_list_title{clear: both;}
.shipping_charge_list_title h4{display: inline-block; line-height:40px;}
.shipping_charge_list_title span{display: inline-block; margin-left:10px; line-height:20px;}
.shipping_charge_list_title span.shipping_charge_list_title_link{border-bottom:1px solid #e21e2c;}
.shipping_charge_list_title span a{color: #e21e2c; cursor: pointer;}
.shipping_charge_list_title .align_right{float: right; line-height:40px; text-align: right;}

.shipping_charge_list .charge_con{ width:590px; height:auto; }
.shipping_charge_list table{width:570px; height:auto; border:1px solid #f8f7f7;  border-spacing:0;}
.shipping_charge_list table th{height:30px;  background:#f8f7f7; border-bottom:1px solid #f8f7f7;  border-right:1px solid #f8f7f7;}
.shipping_charge_list table td{height:30px; border-bottom:1px solid #f8f7f7; border-right:1px solid #f8f7f7; text-align:center;}

/*더보기 버튼*/
.shipping_charge_list .charge_con p{position:absolute; top:160px; right:25px; width:20px; height:60px;line-height:20px; color:#FFF; font-size:11px; font-weight:bold; background:#bcbebf; text-align:center; }
.shipping_charge_list .charge_con p span{display:block;}
.shipping_charge_list .charge_con p a{display:block; color:#FFF; }

/************************************************************************/


/*환율 컨텐츠 시작*/
.exchange_rate{width:100%; height:auto; margin:0 auto; padding-bottom:30px; overflow-y:auto; overflow-x:hidden;}
.exchange_rate h2{height:40px; text-align:center; margin-top:30px; font-size:18px; font-weight:500; color:#4d7cab;}

/* 금주의 과세 환율 보기 */
.exchange_rate .exchange_rate_a{width:590px; height:135px;  margin:0 auto; overflow-y:auto; border-spacing:0; text-align:center; border:1px solid #f8f7f7; }
.exchange_rate_a th{height:35px;  border-bottom:1px solid #f8f7f7;  border-right:1px solid #dfdddd; background:#efefef;}
.exchange_rate_a td{ height:35px;  border-bottom:1px solid #f8f7f7; border-right:1px solid #f8f7f7; color:#c90f00; }
.exchange_rate_a td:last-child{border-right:0;}
.exchange_rate_a td.up{ font-weight:bold;}
.exchange_rate_a td.down{color:#6d67e3; font-weight:bold;}
.exchange_rate_a td span{font-size:11px; padding-left:5px;}

.exchange_rate .exchange_rate_b{width:590px; height:70px; margin:15px auto; border:1px solid #f8f7f7; }

.exchange_rate .exchange_rate_b th{width:50%;height:50px; text-align:center; border-right:1px solid #f8f7f7;  border-top:1px solid #f8f7f7; background:#fafcfc; }


.exchange_rate .exchange_rate_b td{width:50%;height:50px; text-align:center; border-right:1px solid #f8f7f7;  border-top:1px solid #f8f7f7; }

.exchange_rate .exchange_rate_b th select{width:280px; height:30px;border:1px solid #d7d6d3;}
.exchange_rate .exchange_rate_b td input{width:280px; height:30px;border:1px solid #d7d6d3;}
.exchange_rate ul{width:590px; margin:10px auto; color:#666666;}
.exchange_rate ul li{margin-bottom:10px;}

/************************************************************************/


/* 사이즈 변환 컨텐츠 시작 */
.size_exchange{width:100%; height:auto; margin:0 auto; padding-bottom:30px;}

.size_exchange .option_choice{width:590px; height:30px; margin:20px auto 15px;}
.size_exchange .option_choice li{float:left; margin-right:10px;}
.size_exchange .option_choice li:last-child{margin-right:0;}
.size_exchange .option_choice li select{width:190px; height:30px; border:1px solid #d7d6d3;}

.size_exchange table{width:100%; height:135px;  border-spacing:0; margin:0 auto;}

.size_exchange table th{height:44px; background:#f8f7f7;}
.size_exchange table td{height:45px; border-bottom:1px solid #f8f7f7; border-right:1px solid #f8f7f7; padding-left:10px; }

/* 주의 사항 시작 */
.size_exchange .explain{width:590px; margin:10px auto; color:#666666;}
.size_exchange .explain li{margin-bottom:10px;}

/************************************************************************/


/* 무게변환 시작 */
.weight{width:100%; height:auto; margin:0 auto; padding-bottom:30px;}


/*무게 변환*/
.weight .weight_search{width:590px; margin:30px auto 0; }
.weight h4{font-size:13px;margin-bottom:10px; color:#222; margin-top:10px;} 

.weight table{clear:both; width:590px; border:1px solid #e3dddf; margin:0 auto; background:#f8f7f7; border-radius:5px; padding-top:10px; padding-bottom:10px;}
.weight table td{width:50%; height:30px; padding-top:5px; padding-bottom:5px;}

.weight table th{text-align:left;  height:30px;  padding-left:13px;}
.weight table input{margin-left:5px; width:95%; height:25px; background:#FFF; border:1px solid #cccccc;}
.weight table select{margin-left:5px; width:95%; height:25px;}

input[type="checkbox"] + label {
    display: inline-block;
    width: 32px;
    height: 32px;
    /* border: 1px solid #767676; */
    cursor: pointer;
    border-radius: 100%;
    background: url(/images/renew/center_arrival_check_btn2.jpg)center no-repeat;
    background-position: center;
    position: relative;
    /* overflow: hidden; */
}

.search_btn a{
	display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    background: #e21e2c;
    color: #fff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    width: 100px;
    height: 40px;
}

.progress-bar-container {
    width: 100%;
    height: 30px; /* 높이는 고정 */
    line-height: 30px;
    background-color: #e0e0e0;
    border-radius: 25px;
    padding: 3px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    position: relative; /* 자식 요소의 절대 위치 기준 */
    min-width: 30px;
    min-height: 30px;
}

.progress-bar {
    height: 30px;
    border-radius: 20px;
    background: linear-gradient(to right, #ab22ff, #6414da);
    text-align: center;
    line-height: 30px;
    color: white;
    font-weight: bold;
    position: relative; /* 아이콘 배치를 위한 기준 위치 */
    display: grid;
    align-items: center;
    justify-content: flex-end;
	padding-left: 0px;
}

.progress-icon {
    width: 30px; /* 아이콘의 너비 */
    height: 30px; /* 아이콘의 높이 */
    background-image: url("/images/renew/bar_icon.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 0px;
    top: 50%; /* 가운데 정렬 */
    transform: translateY(-50%); /* 정확히 가운데 배치 */
    z-index: 1; /* 아이콘이 프로그레스 바 위에 오도록 설정 */
}

.nation_slide{
	opacity: 0.3;
}
.active{
	opacity: 1;
}