@charset "utf-8";

/* webfont */
@font-face {
  font-family: 'NEXON Lv2 Gothic';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* reset css */
html, body, div, span, applet, object, iframe,
p, blockquote, pre, h1, h2, h3, h4, h5, h6, /* strong, b, i, sup,*/
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, tt, var, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
address, caption, strong, em, cite {
  font-weight:normal;
  font-style:normal;
}
table caption {
  width: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
}
a {
  text-decoration: none;
  color: #000;
}
fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
legend {
  display: none;
}
button {
  background: none;
  border: none;
  cursor: pointer;
}
button:focus {
  outline: none;
}
input:focus {
  outline: none;
}
select:focus {
  outline: none;
}
textarea {
  -webkit-appearance: none;
}
textarea:focus {
  outline: none;
}
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-break: keep-all;
  /*font-family: "NEXON Lv2 Gothic";*/
}

/* scroll */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track { 
  background-color: #F4F4F4; 
}
::-webkit-scrollbar-thumb { 
  background-color: #D8DBE2;
}

/* layout */
.dflex {
  display: flex;
}
.aic {
  align-items: center;
}

/* TBEX Car Style */
html, body {
  height: 100%;
}
html {
  font-size: 10px;
}
body {
  color: #111111;
  font-family: "NEXON Lv2 Gothic", "Noto Sans KR", 'Malgun Gothic', '맑은고딕', gulim, '굴림', dotum, '돋움', AppleGothic, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.3px;
}
.TBEX_bd {
  background-color: #EEEEEE;
}
.wrapper {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 75px;
  background-color: #fff;
} 

/* header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  padding: 0 15px;
}
.tbex_logo img {
  width: 134px;
}
.top_menu {
  display: flex;
}
.top_menu li {
  width: 30px;
  margin-left: 16px;
  text-align: center;
}
.top_menu li img {
  width: 18px;
}
.top_menu li p {
  color: #999999;
  font-size: 0.8rem;
}

/* 5단계 패키지 선택 */
.package_prod {
  padding: 10px 15px 40px;
}
.package_tit_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* input checkbox */
.label_check {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.form_check {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  visibility: hidden;
  opacity: 0;
}
.check_mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid #EEEEEE;
  border-radius: 4px;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}
.check_mark:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  width: 4px;
  height: 8px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}
.form_check:checked ~ .check_mark {
  background-color: #2E82FF;
  border-color: #2E82FF;
}
.form_check:checked ~ .check_mark:after {
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
}
.package_tit_row h2 {
  font-size: 1.5rem;
}
.package_tit_row h2 span {
  color: #D22F27;
  font-weight: 600;
}
.package_box {
  position: relative;
  margin-top: 20px;
  padding: 16px 96px 13px 14px;
  border-radius: 6px 6px 0 0;
  background-color: #CCFF00;
  font-size: 0.73rem;
  line-height: 1.5;  
}
.package_box:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 11px;
  width: 78px;
  height: 77px;
  background: url(/resources/axproject/img/renewal/img_person1.png) no-repeat left top/cover;
}
.package_box2 {
  padding: 11px 11px 11px 11px;
  background-color: #2B2B2B;
  border-radius: 0 0 6px 6px;
  color: #fff;
  font-size: 0.73rem;
  line-height: 1.5; 
}
.package_box2 p {
  position: relative;
  padding-left: 8px;
}
.package_box2 p:nth-child(2) {
  margin-top: 5px;
}
.package_box2 p:before {
  content: '*';
  position: absolute;
  top: 0;
  left: 0;
}
.package_box2 p:nth-child(2):before {
  top: 2px;
}
.package_box2 span {
  color: #CCFF00;
  font-weight: 600;
}
.package_box2 .ico_detail {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(/resources/axproject/img/renewal/ico_detail.png) no-repeat left top/cover;
  vertical-align: -5px;
}
.package_list {
  margin-top: 15px;
}
.package_list>li {
  position: relative;
  margin-top: 15px;
  padding: 0 12px 60px;
  box-shadow: 0px 2px 6px #E6E6E67E;
  border: 1px solid #EEEEEE;
  border-radius: 6px;  
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.package_list>li:first-child {
  margin-top: 0;
}
.package_list>li.active {
  border: 1.5px solid #2E82FF;
  box-shadow: 0px 2px 4px #2E82FF55;
}
.package_list>li.hot:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: -5px;
  right: 10px;
  width: 33px;
  height: 22px;
  background: url(/resources/axproject/img/renewal/ico_hot.png) no-repeat left top/cover;
}
.package_list>li.disabled {
  background-color: #eee;
}
.package_list>li.disabled .select_result_box {
  background-color: #B7B7B7;
  border-radius: 0 0 6px 6px;
}
.package_list>li.disabled .check_mark {
  border-color: #B7B7B7;
}
.package_tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 20px 0 25px;
  font-size: 1.5rem;
  font-weight: 600;
}
.btn_click_check {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 42px;
  z-index: 1;
}
.package_list>li.active .check {
  background: url(/resources/axproject/img/renewal/ico_check.png) no-repeat left top/cover;
  border-color: #2E82FF;
}
.sale_info {
  position: relative;
  color: #2E82FF;
  font-size: 0.938rem;
  font-weight: 600;
}
.sale_info:before {
  content: '';
  position: absolute;
  top: 1px;
  left: -21px;
  width: 17px;
  height: 17px;
  background: url(/resources/axproject/img/renewal/ico_arrow_sale.png) no-repeat left top/cover;
}
.package_cont_new {
  display: none;
  padding-bottom: 30px;
}
.package_box3 {
  padding: 9px 20px 9px 98px;
  background: #111 url(/resources/axproject/img/renewal/ico_present.png) no-repeat 10px center/79px;
  border-radius: 4px;
  color: #fff;
  font-size: 0.73rem;
  font-weight: 900;
  line-height: 1.5;
}
.package_box3 span {
  color: #CCFF00;
}
.pkg_service_nm {
  position: relative;
  margin-top: 18px;
  padding: 2px 0 3px 30px;
  font-size: 0.8rem;
  font-weight: 600;
}
.pkg_service_nm span {
  color: #2E82FF;
  font-size: 0.73rem;
}
.pkg_service_nm:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
}
.blackbox:before {
  background: url(/resources/axproject/img/renewal/ico_blackbox.png) no-repeat left top/cover;
}
.car:before {
  background: url(/resources/axproject/img/renewal/ico_car.png) no-repeat left top/cover;
}
.ppf_pkg:before {
  background: url(/resources/axproject/img/renewal/ico_car2.png) no-repeat left top/cover;
}
.glass:before {
  background: url(/resources/axproject/img/renewal/ico_glass.png) no-repeat left top/cover;
}
.interior:before {
  background: url(/resources/axproject/img/renewal/ico_interior.png) no-repeat left top/cover;
}
.pkg_coating:before {
  background: url(/resources/axproject/img/renewal/ico_sitcoating.png) no-repeat left top/cover;
}
.pkg_prod_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 12px;
}
.pkg_prod_list li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 48%;
  min-height: 102px;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid #EEE;
  border-radius: 4px;  
}
.pkg_prod_list li.one {
  width: 100%;
}
.pkg_prod_list li.selected {
  box-sizing: border-box;
  background-color: #EEF6FF;
  border: 1.5px solid #2E82FF;
}
.pkg_prod_char {
  display: inline-block;
  padding: 0px 7px;
  background-color: #B7B7B7;
  border-radius: 2px;
  color: #fff;
  font-size: 0.63rem;
}
.pkg_prod_list li.selected .pkg_prod_char {
  background-color: #2E82FF;
}
.pkg_prod_nm {
  margin-top: 6px;
  color: #666;
  font-size: 0.73rem;
  line-height: 1.5;
}
.pkg_prod_list li.selected .pkg_prod_nm {
  color: #2E82FF;
  font-weight: 600;
}
.pkg_prod_price {
  color: #666;
  font-size: 0.73rem;
  font-weight: 600;
  text-align: right;
}
.pkg_prod_list li.selected .pkg_prod_price {
  color: #2E82FF;
}
.btn_package_info {
  width: 100%;
  height: 46px;
  margin-top: 30px;
  border: 1px solid #2E82FF;
  border-radius: 4px;
  color: #2E82FF;
  font-size: 0.983rem;
  font-weight: 600;
}
.select_result_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  padding: 0 14px;
  background-color: #EEF6FF;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.package_list>li.active .select_result_box {
  background-color: #2E82FF;
}
.btn_open {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0px 3px 6px #2E82FF4D;
  cursor: pointer;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.btn_open img {
  width: 39px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.package_list>li.active .btn_open img {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.select_prod {
  color: #505153;
  font-size: 0.73rem;
  font-weight: 500;
  line-height: 1.5;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.package_list>li.active .select_prod {
  color: #fff;
}
.select_price {
  text-align: right;
}
.pkg_price_ori {
  visibility: hidden;
  color: #ACCFFF;
  font-size: 0.73rem;
  text-decoration: line-through;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.package_list>li.active .pkg_price_ori {
  visibility: visible;
}
.pkg_price {
  /*margin-top: 5px;*/
}
.percent {
  visibility: hidden;
  position: relative;
  color: #CCFF00;
  font-size: 0.7rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.package_list>li.active .percent {
  visibility: visible;
}
.percent:before {
  content: '';
  position: absolute;
  left: -15px;
  top: 5px;
  width: 11px;
  height: 11px;
  background: url(/resources/axproject/img/renewal/ico_arrow_sale2.png) no-repeat left top/cover;
}
.price_num {
  margin-left: 4px;
  color: #505153;
  font-size: 0.8rem;
  font-weight: 600;
}
.package_list>li.active .price_num {
  color: #fff;
}
.price_num b {
  font-size: 0.9rem;
  font-weight: bolder;
}
.pkg_prod_nm.mt0 {
  margin-top: 0;
}
.pkg_prod_char2 {
  margin-top: 5px;
  color: #2E82FF;
  font-size: 0.63rem;
  line-height: 1.4;
}

/* 개별 상품 구매 */
.indiv_prod {
  padding: 50px 15px;
  border-top: 20px solid #eee;
}
.section_tit {
  font-size: 1.2rem;
  font-weight: 600;
}
.indiv_box {
  margin-top: 15px;
  padding: 25px 11px 22px 96px  ;
  background: #eee url(/resources/axproject/img/renewal/img_person2.png) no-repeat 15px 10px/69px;
  border-radius: 6px;
  font-size: 0.73rem;
  line-height: 1.6;
}
.service_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 10px;
  background-color: #fff;
  z-index: 30;
}
.service_list li {
  position: relative;
  width: 32.1212%;
  margin-bottom: 6px;
}
.service_list li a {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  height: 33px;
  border: 1px solid #EEEEEE;
  border-radius: 6px;
  color: #505153;
  font-size: 0.73rem;
  text-align: center;
  line-height: 33px;
}
.service {
  margin-top: 35px;
}
.service_tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.service_nm {
  position: relative;
  padding: 13px 0 9px 45px;
  font-weight: 600;
}
.service_nm:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
}
.indiv_prod .select_info {
  position: relative;
  top: 3px;
}
.service_nm.battery:before {
  background: url(/resources/axproject/img/renewal/ico_battery.png) no-repeat left top/cover;
}
.service_nm.hud:before {
  background: url(/resources/axproject/img/renewal/ico_HUD.png) no-repeat left top/cover;
}
.service_nm.ppf:before {
  background: url(/resources/axproject/img/renewal/ico_ppf.png) no-repeat left top/cover;
}
.coating:before {
  background: url(/resources/axproject/img/renewal/ico_coating.png) no-repeat left top/cover;
}
.service_nm.leather:before {
  background: url(/resources/axproject/img/renewal/ico_leather.png) no-repeat left top/cover;
}
.select_info {
  color: #2E82FF;
  font-size: 0.7rem;
}
.prod_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 10px;
}
.prod_list li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 48.4848%;
  height: 148px;
  margin-bottom: 12px;
  padding: 20px 15px 15px;
  border: 1px solid #EEEEEE;
  border-radius: 10px;
}
.prod_list li.hot:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: -5px;
  right: 10px;
  width: 33px;
  height: 22px;
  background: url(/resources/axproject/img/renewal/ico_hot.png) no-repeat left top/cover;
}
.prod_list li.selected {
  border: 1.5px solid #2E82FF;
  box-shadow: 0px 0px 4px #2E82FF45;
}
.prod_com {
  color: #000;
  font-size: 0.66rem;
}
.prod_nm {
  margin-top: 0px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.6;
}
.prod_list li.selected .prod_com,
.prod_list li.selected .prod_nm {
  color: #2E82FF;
  font-weight: 600;
}
.prod_char {
  display: inline-block;
  margin-top: 3px;
  padding: 0px 10px;
  background-color: #505153;
  border-radius: 6px;
  color: #fff;
  font-size: 0.63rem;
}
.prod_list li.selected .prod_char {
  background-color: #2E82FF;
}
.prod_price {
  display: flex;
  align-items: center;
  color: #333;
  font-size: 0.66rem;
  line-height: 0.66rem;
  margin-top: 4px;
}
.prod_price span:nth-child(1) {
  margin-right: 5px;
  color: #2E82FF;
  font-weight: 700;
}
.prod_price_ori {
  margin-top: 5px;
  color: #999;
  font-size: 0.63rem;
  line-height: 0.63rem;
  text-decoration: line-through;
}
.view_detail {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 24px;
  height: 24px;
  background: url(/resources/axproject/img/renewal/ico_detail.png) no-repeat left top/cover;
  border-radius: 8px;
}
.prod_list li.selected .view_detail {
  background-image: url(/resources/axproject/img/renewal/ico_detail_blue.png);
  box-shadow: 0px 0px 4px #2E82FF45;
}
.info_box {
  margin: 16px 0;
  padding: 15px;
  background-color: #F3F3F3;
  border-radius: 6px;
  color: #D22F27;
  font-size: 0.73rem;
  line-height: 1.6;
}
.info_box p {
  position: relative;
  padding-left: 18px;
}
.info_box p:before {
  content: '※';
  position: absolute;
  top: 0;
  left: 0;
}
.info_box .ico_detail {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(/resources/axproject/img/renewal/ico_detail.png) no-repeat left top/cover;
  vertical-align: -5px;
}
.view_detail_txt {
  display: flex;
  justify-content: end;
  align-items: center;
  position: relative;
  margin: 23px 0 12px;
  color: #505153;
  font-size: 0.73rem;
  font-weight: 600;
  text-align: right;
}
.btn_comment {
  margin-left: 10px;
}
.btn_comment img {
  width: 18px;
}
.prod_char2 {
  margin-top: 8px;
  color: #2E82FF;
  font-size: 0.66rem;
}
.detail_info {
  position: absolute;
  top: 38px;
  right: 0;
  width: 280px;
  visibility: hidden;
  opacity: 1;
  padding: 20px 15px;
  background-color: rgba(0,0,0,0.89);
  border-radius: 10px;
  color: #fff;
  text-align: center;
  z-index: 10;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.detail_info:before {
  content: '';
  position: absolute;
  top: -19px;
  right: 10px;
  width: 31px;
  height: 34px;
  background: url(/resources/axproject/img/renewal/comment_arr.png) no-repeat left top/cover;
  opacity: 0.85;
}
.detail_info.view {
  visibility: visible;
  opacity: 1;
}
.detail_tit {
  display: inline-block;
  height: 34px;
  padding: 0 30px;
  border: 1px solid #FFFFFF;
  border-radius: 17px;
  font-weight: 500;
  line-height: 34px;
}
.detail_list {
  margin-top: 20px;
}
.detail_list li {
  padding: 10px 0;
  border-bottom: 1px solid #5A5A5A;
  text-align: left;
  line-height: 1.7;
}
.detail_list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.detail_list li p:nth-child(1) {
  font-size: 0.73rem;
  font-weight: 600;
}
.detail_list li p span {
  color: #A3E6FF;
}
.detail_list li p:nth-child(2) {
  padding-left: 13px;
  font-size: 0.66rem;
  font-weight: 500;
}
.fixed_area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  z-index: 50;
}
.fixed_price {
  display: flex;
  height: 54px;
  background-color: #fff;
  border-radius: 15px 15px 0 0;
  box-shadow: 0px 0px 20px #00000029;
  font-size: 0.73rem;
}
.fixed_price>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  padding: 0 15px;
}
.fixed_origin {
  color: #666666;
}
.fixed_origin p:nth-child(2) {
  color: #999999;
  text-decoration: line-through;
}
.fixed_sale {
  position: relative;
  color: #333333;
}
.fixed_sale:before {
  content: '';
  position: absolute;
  top: 15px;
  left: 0;
  width: 1px;
  height: 20px;
  background-color: #DDDDDD;
}
.fixed_btn_row {
  display: flex;
}
.fixed_btn_row button {
  width: 50%;
  height: 54px;
  color: #fff;
  font-size: 0.983rem;
}
.btn_prev {
  background-color: #505153;
}
.btn_next {
  background-color: #2E82FF;
}
.fixed_sum {
  color: #2E82FF;
  font-weight: 600;
}

.step_tit_new{
	margin-bottom: 0px;
	color: #111;
    line-height: 1.063rem;
    font-size: 0.938rem;
    font-weight: 600;
}

.step_tit_new_normal{
	margin-bottom: 0px;
	color: #111111 !important;
    line-height: 1.063rem;
    font-size: 0.938rem;
    font-weight: 400 !important;
}

/* 2024 5월 꾸미기 데칼 스티커 */
.wrapper.step7_wrapper {
  padding-bottom: 0;
}
.decal_wrap {
  background: url(/resources/axproject/img/20240505/bg_sticker.jpg) repeat-y center top/100%;
  padding: 20px 15px 40px;
  color: #fff;
}
.decal_wrap .inner {
  position: relative;
}
.decal_info {
  display: inline-block;
  position: relative;
  padding: 5px 38px 5px 10px;
  border: 1.5px solid #fff;
  border-radius: 15px;
  color: #fff;
  font-size: 0.8rem;
}
.decal_info:after {
  content: '';
  position: absolute;
  top: 3px;
  right: 5px;
  width: 17px;
  height: 17px;
  background: url(/resources/axproject/img/20240505/ico_question2.png) no-repeat center center/cover;
}
.decal_area {
  position: relative;
}
.tit_area {
  margin-top: 38px;
  font-size: 1.0rem;
  font-weight: 600;
}
.tit_area span {
  margin-left: 4px;
  color: #2E82FF;
  font-size: 0.9rem;
  font-weight: 400;
}
.decal_list {
  margin-top: 20px;
}
.decal_list li {
  display: flex;
  position: relative;
  height: 180px;
  overflow: hidden;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 10px;
}
.decal_list li:first-child {
  margin-top: 0;
}
.decal_list li:before {
  content: '';
  position: absolute;
  top: 18px;
  right: 18px;
  width: 26px;
  height: 26px;
  background-color: #fff;
  border: 1px solid #000;
}
.decal_list li.butter:before {
  background-color: #FFF2AB;
}
.decal_list li.peach:before {
  background-color: #FFADAD;
}
.decal_list li.cookie:before {
  background-color: #111;
}
.decal_list li.speed_black:before {
  background-color: #111;
}
.decal_list li.manhattan_black:before {
  background-color: #111;
}
.decal_img {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 45%;
}
.butter .decal_img {
  background-color: #FFFADE;
}
.peach .decal_img {
  background-color: #FFE2E2;
}
.milk .decal_img {
  background-color: #F5F5F5;
}
.cookie .decal_img {
  background-color: #D8D8D8;
}
.speed_black .decal_img {
  background-color: #F5F5F5;
}
.speed_white .decal_img {
  background-color: #F5F5F5;
}
.manhattan_black .decal_img {
  background-color: #F5F5F5;
}
.manhattan_white .decal_img {
  background-color: #F5F5F5;
}
.decal_img img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}
.decal_desc {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  width: 55%;
  padding: 16px 0 16px 14px;
  color: #111;
}
.decal_desc>div {
  width: 100%;
}
.decal_desc1 {
  font-size: 0.9rem;
  font-weight: 500;
}
.decal_desc2 {
  margin-top: 8px;
  font-size: 1.2rem;
  font-weight: 700;
}
.decal_desc3 {
  margin-top: 8px;
  color: #2E82FF;
  font-size: 0.75rem;
  font-weight: 500;
}
.decal_price {
  display: flex;
  align-items: center;
  padding-bottom: 11px;
  color: #999;
  font-size: 0.9rem;
}
.decal_price .num {
  margin-left: 8px;
  color: #111;
}
.decal_price .num span {
  font-family: 'NEXON Lv2 Gothic Bold';
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -1px;
}
.view_detail2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: url(/resources/axproject/img/20240505/ico_detail2.png) no-repeat left top/cover;
  border-radius: 8px;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}
.img_cat {
  position: absolute;
  top: 21px;
  right: 10px;
  width: 180px;
}
.img_cat img {
  width: 100%;
}
.decal_list li.selected:after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid #2E82FF;
  border-radius: 10px;
}
.decal_list li.selected .decal_desc,
.decal_list li.selected .decal_price,
.decal_list li.selected .decal_price .num {
  color: #2E82FF;
}
.decal_list li.selected .view_detail2 {
  background-image: url(/resources/axproject/img/20240505/ico_detail2_blue.png);
}
.decal_list li.unselected,
.decal_list li.unselected .decal_img {
  background-color: #D3D3D3;
}
.decal_list li.unselected .view_detail2 {
  background-image: url(/resources/axproject/img/20240505/ico_detail2_disabled.png);
}
.decal_list li.unselected:before {
  opacity: 0.2;
}
.point_wrap {
  background: url(/resources/axproject/img/20240505/bg_point.jpg) repeat-y center top/100%;
  padding: 40px 15px 180px;
  color: #111;
}
.point_wrap .inner {
  position: relative;
}
.point_list {
  margin-top: 20px;
}
.point_list li {
  display: flex;
  position: relative;
  height: 180px;
  overflow: hidden;
  margin-top: 20px;
  background-color: #fff;
  border: 1px solid #0A0A0A;
  border-radius: 10px;
}
.point_list li:first-child {
  margin-top: 0;
}
.point_list li:before {
  content: '';
  position: absolute;
  top: 18px;
  right: 18px;
  width: 26px;
  height: 26px;
  background-color: #fff;
  border: 1px solid #000;
}
.point_list li:nth-child(1):before {
  background-color: #B20011;
}
.point_list li:nth-child(2):before {
  background-color: #FFAE2A;
}
.point_list li:nth-child(3):before {
  background-color: #7CC2EE;
}
.point_list li:nth-child(4):before {
  background-color: #111;
}
.point_list li:nth-child(5):before {
  background-color: #E02D25;
}
.point_list li:nth-child(6):before {
  background-color: #111;
}
.point_list li .decal_img {
  background-color: #F5F5F5;
}

.point_list li.selected {
  border-color: transparent;
}
.point_list li.selected:after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid #2E82FF;
  border-radius: 10px;
}
.point_list li.selected .decal_desc,
.point_list li.selected .decal_price,
.point_list li.selected .decal_price .num {
  color: #2E82FF;
}
.point_list li.selected .view_detail2 {
  background-image: url(/resources/axproject/img/20240505/ico_detail2_blue.png);
}
.point_list li.unselected .view_detail2 {
  background-image: url(/resources/axproject/img/20240505/ico_detail2_disabled.png);
}
.point_list li.unselected,
.point_list li.unselected .decal_img {
  background-color: #D3D3D3;
}
.point_list li.unselected:before {
  opacity: 0.2;
}
.img_cat2 {
  position: absolute;
  top: -58px;
  right: -14px;
  width: 180px;
}
.img_cat2 img {
  width: 100%;
}

/* 240507 추가 */
.decal_info {
  width: 78px;
  height: 28px;
  background: url(/resources/axproject/img/20240505/btn_decal.png) no-repeat center center/100%;
  border: none;
  font-size: 0;
  top: 10px;
}
.decal_info:after {
  display: none;
}
.decal_list li.unselected .decal_img,
.point_list li.unselected .decal_img {
  opacity: 0.5;
}
.decal_list li.butter.selected .decal_desc {
  background: url(/resources/axproject/img/20240505/bg_butter_click.png) no-repeat right center/cover;
}
.decal_list li.peach.selected .decal_desc {
  background: url(/resources/axproject/img/20240505/bg_peach_click.png) no-repeat right center/cover;
}
.decal_list li.milk.selected .decal_desc {
  background: url(/resources/axproject/img/20240505/bg_milk_click.png) no-repeat right center/cover;
}
.decal_list li.cookie.selected .decal_desc {
  background: url(/resources/axproject/img/20240505/bg_cookie_click.png) no-repeat right center/cover;
}
.decal_list li.speed_black.selected .decal_desc,
.decal_list li.speed_white.selected .decal_desc {
  background: url(/resources/axproject/img/20240505/bg_speed_click.png) no-repeat right center/cover;
}
.decal_list li.manhattan_black.selected .decal_desc,
.decal_list li.manhattan_white.selected .decal_desc {
  background: url(/resources/axproject/img/20240505/bg_manhattan_click.png) no-repeat right center/cover;
}

/* modal */
.modal_decal_wrap {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  background-color:rgba(0,0,0,0.7);
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 500;        
}
.modal_decal_cont {
  position: relative;
  width: 100%;
  max-width: 960px;
  height: 100vh;
  margin: 0 auto;
  padding: 0 16px;
}
.decal_info_comment {
  position: absolute;
  top: 102px;
  right: 16px;
  width: 279px;
  height: 204px;
  padding: 30px 20px 20px;
  background: url(/resources/axproject/img/20240505/bg_comment.png) no-repeat center center/100%;
  color: #111;
  z-index: 10;
}
.decal_info_desc1 {
  font-size: 14px;
  font-weight: 600;
}
.decal_info_desc1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.decal_info_desc1 span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 158px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 32px;
}
.decal_info_desc2 {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
}
.decal_info_desc3 {
  position: relative;
  margin-top: 12px;
  padding: 12px 0 0 12px;
  border-top: 1px solid #111;
  color: #2E82FF;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
}
.decal_info_desc3:before {
  content: '*';
  position: absolute;
  top: 14px;
  left: 2px;
}
.modal_banner_wrap {
  position: fixed;
  left: 0;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  visibility: visible;
  opacity: 1;
  width: 100%; 
  height: 100%;
  padding-top: 80px;
  background-color:rgba(0,0,0,0.7);
  z-index: 500;    
  -webkit-transition: all 0.2s ease-in-out;    
  transition: all 0.2s ease-in-out;    
}
.modal_banner_cont {
  width: 100%;
  max-width: 960px;
  height: 100vh;
  margin: 0 auto;
  padding: 0 16px;
}
.banner {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
}
.banner img {
  width: 100%;
}

@media (max-width: 600px) {
  .tit_area {
    font-size: 15px;
  }
  .tit_area span {
    font-size: 12px;
  }
  .decal_list li.butter.selected .decal_desc {
    background: url(/resources/axproject/img/20240505/bg_butter_click.png) no-repeat right center/80%;
  }
  .decal_list li.peach.selected .decal_desc {
    background: url(/resources/axproject/img/20240505/bg_peach_click.png) no-repeat right top/80%;
  }
  .decal_list li.milk.selected .decal_desc {
    background: url(/resources/axproject/img/20240505/bg_milk_click.png) no-repeat right center/70%;
  }
  .decal_list li.cookie.selected .decal_desc {
    background: url(/resources/axproject/img/20240505/bg_cookie_click.png) no-repeat right center/70%;
  }
  .decal_list li:before {
    top: 14px;
    right: 14px;
    width: 16px;
    height: 16px;
  }
  .point_list li:before {
    top: 14px;
    right: 14px;
    width: 16px;
    height: 16px;
  }
}

/* 240527 상품 품절 추가 */
.pkg_prod_list li.soldout {
  position: relative;
}
.pkg_prod_list li.soldout:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
  border-radius: 4px;
}
.pkg_prod_list li.soldout:after {
	content: '품절';
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 54px;
    height: 34px;
    background-color: #b93535;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 26px;
}


.prod_list li.soldout {
  position: relative;
}
.prod_list li.soldout:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
  border-radius: 4px;
}
.prod_list li.soldout:after {
	content: '품절';
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 54px;
    height: 34px;
    background-color: #b93535;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 26px;
}

.decal_list li.soldout {
  position: relative;
}
.decal_list li.soldout:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
  border-radius: 4px;
  z-index: 20;
}
.decal_list li.soldout:after {
	content: '품절';
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 54px;
    height: 34px;
    background-color: #b93535;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 26px;
  	z-index: 20;
}