@charset "utf-8";

@font-face {
  font-family: 'Noto Sans KR L';
  font-style: normal;
  font-weight: 300;
  src: url(./font/NotoSansKR-Light.woff) format('woff'),
       url(./font/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR R';
   font-style: normal;
   font-weight: 400;
   src: url(./font/NotoSansKR-Regular.woff) format('woff'),
        url(./font/NotoSansKR-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR M';
   font-style: normal;
   font-weight: 500;
   src: url(./font/NotoSansKR-Medium.woff) format('woff'),
        url(./font/NotoSansKR-Medium.otf) format('opentype');
 }

/***************************************************************************************/
/*                                     Animation                                       */
/***************************************************************************************/
/*원 애니메이션 01*/
@-webkit-keyframes circle_ani01 {
    0% { -webkit-transform: translate3d(0,4rem,0) rotate(80deg) scale(1); }
    50% { -webkit-transform: translate3d(5rem,0,0) rotate(0deg) scale(0.8); }
    100% { -webkit-transform: translate3d(0,4rem,0) rotate(80deg) scale(1); }
}
@-moz-keyframes circle_ani01 {
    0% { -moz-transform: translate3d(0,4rem,0) rotate(80deg) scale(1); }
    50% { -moz-transform: translate3d(5rem,0,0) rotate(0deg) scale(0.8); }
    100% { -moz-transform: translate3d(0,4rem,0) rotate(80deg) scale(1); }
}
@-ms-keyframes circle_ani01 {
    0% { -ms-transform: translate3d(0,4rem,0) rotate(80deg) scale(1); }
    50% { -ms-transform: translate3d(5rem,0,0) rotate(0deg) scale(0.8); }
    100% { -ms-transform: translate3d(0,4rem,0) rotate(80deg) scale(1); }
}
@-o-keyframes circle_ani01 {
    0% { -o-transform: translate3d(0,4rem,0) rotate(80deg) scale(1); }
    50% { -o-transform: translate3d(5rem,0,0) rotate(0deg) scale(0.8); }
    100% { -o-transform: translate3d(0,4rem,0) rotate(80deg) scale(1); }
}
@keyframes circle_ani01 {
    0% { transform: translate3d(0,4rem,0) rotate(80deg) scale(1); }
    50% { transform: translate3d(5rem,0,0) rotate(0deg) scale(0.8); }
    100% { transform: translate3d(0,4rem,0) rotate(80deg) scale(1); }
}


/*원 애니메이션 02*/
@-webkit-keyframes circle_ani02 {
    0% { -webkit-transform: translate3d(0rem,0rem,0) rotate(-270deg) scale(1); }
    50% { -webkit-transform: translate3d(-1rem,-2rem,0) rotate(0deg) scale(0.5); }
    100% { -webkit-transform: translate3d(0rem,0rem,0) rotate(-270deg) scale(1); }
}
@-moz-keyframes circle_ani02 {
    0% { -moz-transform: translate3d(0rem,0rem,0) rotate(-270deg) scale(1); }
    50% { -moz-transform: translate3d(-1rem,-2rem,0) rotate(0deg) scale(0.5); }
    100% { -moz-transform: translate3d(0rem,0rem,0) rotate(-270deg) scale(1); }
}
@-ms-keyframes circle_ani02 {
    0% { -ms-transform: translate3d(0rem,0rem,0) rotate(-270deg) scale(1); }
    50% { -ms-transform: translate3d(-1rem,-2rem,0) rotate(0deg) scale(0.5); }
    100% { -ms-transform: translate3d(0rem,0rem,0) rotate(-270deg) scale(1); }
}
@-o-keyframes circle_ani02 {
    0% { -o-transform: translate3d(0rem,0rem,0) rotate(-270deg) scale(1); }
    50% { -o-transform: translate3d(-1rem,-2rem,0) rotate(0deg) scale(0.5); }
    100% { -o-transform: translate3d(0rem,0rem,0) rotate(-270deg) scale(1); }
}
@keyframes circle_ani02 {
    0% { transform: translate3d(0rem,0rem,0) rotate(-270deg) scale(1); }
    50% { transform: translate3d(-1rem,-2rem,0) rotate(0deg) scale(0.5); }
    100% { transform: translate3d(0rem,0rem,0) rotate(-270deg) scale(1); }
}


/*원 확대 애니메이션 (페이지 전환 시)*/
@-webkit-keyframes bigger_ani {
    0% { -webkit-transform: scale(1); }
    20% { -webkit-transform: scale(12); }
    80% { -webkit-transform: scale(12); }
    100% { -webkit-transform: scale(1); }
}
@-moz-keyframes bigger_ani {
    0% { -moz-transform: scale(1); }
    20% { -moz-transform: scale(12); }
    80% { -moz-transform: scale(12); }
    100% { -moz-transform: scale(1); }
}
@-ms-keyframes bigger_ani {
    0% { -ms-transform: scale(1); }
    20% { -ms-transform: scale(12); }
    80% { -ms-transform: scale(12); }
    100% { -ms-transform: scale(1); }
}
@-o-keyframes bigger_ani {
    0% { -o-transform: scale(1); }
    20% { -o-transform: scale(12); }
    80% { -o-transform: scale(12); }
    100% { -o-transform: scale(1); }
}
@keyframes bigger_ani {
    0% { transform: scale(1); }
    20% { transform: scale(12); }
    80% { transform: scale(12); }
    100% { transform: scale(1); }
}



/***************************************************************************************/
/*                                     Reset CSS                                       */
/***************************************************************************************/
* { margin: 0; padding: 0; font-family:'Noto Sans CJK'; font-weight: normal; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
a { text-decoration: none; color: black;  font-family:'Noto Sans CJK'; font-weight: normal;  }
li { list-style: none; }
img { border: none; }
body { background-color: #f5f5f5; }

/*
.show { left: 0 !important; z-index: 10 !important; }
.prev { left: -100% !important; z-index: -1 !important; }
.next { left: 100% !important; z-index: -1 !important; }
.hide { display: none !important; }
*/

/***************************************************************************************/
/*                                      기본 설정                                       */
/***************************************************************************************/
.page { width: 100%; height: 100%; position: absolute; top: 0; left: 0%; z-index: 0; transition: 0.5s;}


/***************************************************************************************/
/*                                    메인 페이지                                       */
/***************************************************************************************/
.p_main { overflow: hidden; position: fixed; top: 0; left: 0; background-color: #000; color: #fff;
  background-image: url(../img/img_santafe02.jpg); background-size: 120%; background-position: 50% 120%; background-repeat: no-repeat; }
.p_main::after { content : ""; display: block; width: 100%; height: 30%; position: absolute; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); }

/*로고*/
.logo { width: 100%; height: 2.5rem; position: relative; top: 13%; text-align: center; }
.logo img { height: 100%; }

/*자동차 이미지 영역*/
.imgArea { width: 100%; height: 40%; position: relative; top: 14%; background-image: url(../img/img_santafe01.jpg);
  background-size: 125%; background-position: center; background-repeat: no-repeat;
  /*animation: mainBg_ani 15s linear infinite;*/ }

/*버튼*/
.mainBtnArea { width: 100%; height: auto; position: absolute; bottom: 16%; left: 0; padding: 0 1.8rem; box-sizing: border-box; z-index: 2; }
.mainBtn_inner { width: 100%; text-align: center; border: 0.075rem solid #fff; box-sizing: border-box; opacity: 0.8; }
.mainBtn_inner div { color: #fff; font-size: 1.05rem; line-height: 1.05rem; font-weight: 600; letter-spacing: -0.05rem; padding: 0.8rem 0; box-sizing: border-box; display: block; }
.btn_point { margin-bottom: 0.8rem; }

/*에코스 텍스트*/
.echossTxt { width: 100%; position: absolute; bottom: 3%; left: 0; text-align: center; font-size: 0.75rem; line-height: 0.75rem; opacity: 0.8; z-index: 2; }


/*파란원*/
.blueCircle { position: absolute; background-image: url(../img/icon_bluecircles.png);
  background-size: 100%; background-position: center; background-repeat: no-repeat; z-index: 1; }
.blueCircle_big { width: 24rem; height: 24rem; bottom: -6rem; left: -12.5rem;
  -webkit-animation: circle_ani01 3s linear infinite;
  -moz-animation: circle_ani01 3s linear infinite;
  -ms-animation: circle_ani01 3s linear infinite;
  -o-animation: circle_ani01 3s linear infinite;
  animation: circle_ani01 3s linear infinite;  }
.blueCircle_small { width: 7.5rem; height: 7.5rem; top: 3.5rem; right: -5rem; transform: rotate(100deg); position: fixed; z-index: 11; transform: scale(0);
  -webkit-animation: circle_ani02 3s linear infinite;
  -moz-animation: circle_ani02 3s linear infinite;
  -ms-animation: circle_ani02 3s linear infinite;
  -o-animation: circle_ani02 3s linear infinite;
  animation: circle_ani02 3s linear infinite; }

/*클래스추가*/
.blueCircle.bigger { z-index: 3; transition: 0.5s;
  -webkit-animation: bigger_ani 2s ease-out;
  -moz-animation: bigger_ani 2s ease-out;
  -ms-animation: bigger_ani 2s ease-out;
  -o-animation: bigger_ani 2s ease-out;
  animation: bigger_ani 2s ease-out; }

/***************************************************************************************/
/*                             1-1.자격할인쿠폰_쿠폰목록                                 */
/***************************************************************************************/
.p_pointList { height: auto; background-color: #f5f5f5; }

/*뒤로가기 버튼*/
.btn_back { width: 2.5rem; height: 2.5rem; position: absolute; top: 0.25rem; left: 0.25rem; z-index: 1;
  background-image: url(../img/icon_back.png); background-size: 50%; background-position: center; background-repeat: no-repeat; }

.btn_back.blue { background-image: url(../img/icon_back_blue.png); }

/*상단 텍스트 영역*/
.titArea { width: 100%; height: auto; min-height: 10.5rem; position: relative; padding: 1rem 1.8rem; padding-bottom: 0;
  display: flex; justify-content: flex-start; align-items: center; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; box-sizing: border-box; }
.titArea::after { content : ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;
  background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }

.pointList_titArea { background-image: url(../img/img_pointBg.png); }
.pointList_titArea::after { background-image: url(../img/bg_blueTop.png); }


.tit_wrap { display: inline-block; z-index: 1; color: #fff; }

.top_tit { display: block; font-size: 1.15rem; line-height: 1.15rem; font-weight: 600; margin-bottom: 0.75rem; }
.top_txt { display: block; font-size: 0.75rem; line-height: 0.9rem; font-weight: 100; letter-spacing: -0.01rem; }


/*하단 쿠폰 영역*/
.couponArea { width: 100%; height: auto; padding: 1.2rem 0; box-sizing: border-box; }

.point_coupon { width: 100%; height: 11rem; position: relative; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 1rem; }
.point_coupon:last-child { margin-bottom: 0; }


/*이미지 영역*/
.pointCpn_imgArea { width: 55%; height: 100%; padding: 0.5rem 0; display: inline-block; box-sizing: border-box; background-color: #fff; box-shadow: 0 0 0.5rem rgba(0,0,0,0.16); }
.pointCpn_img { width: 100%; height: 100%; }
.pointCpn_img.coupon1 { background-image: url(../img/img_plazacc.png); background-size: cover; background-position: center; background-repeat: no-repeat; }
.pointCpn_img.coupon2 { background-image: url(../img/img_coffee.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; }
.pointCpn_img.coupon3 { background-image: url(../img/img_meal.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; }

/*텍스트 영역*/
.pointCpn_txtArea { width: auto; height: 100%; position: relative; display: inline-block; box-sizing: border-box;
  display: flex; justify-content: center; align-items: center;  background-color: #fff; }
.pointList_couponArea .pointCpn_txtArea { width: 34%; padding: 0 1.75rem 0 1rem; border-radius: 0 0.75rem 0.75rem 0; box-shadow: 0 0 0.5rem rgba(0,0,0,0.16); }
.pointList_couponArea .pointCpn_txtArea::after { content : ""; display: inline-block; width: 1rem; height: 1rem; position: absolute; top: 0; left: 0;
background-image: url(../img/icon_cpnEdge.png); background-position: center; background-size: 290%; background-color: #f5f5f5; }
.pointCpn_txt_wrap { width: 100%; display: inline-block; }

.store_txt { color: #6D6D6D; display: block; font-size: 0.7rem; line-height: 0.7rem; font-weight: normal; letter-spacing: -0.05rem; margin-bottom: 0.3rem; }
.point_num { color: #138AF2; display: block; font-size: 1.2rem; line-height: 1.2rem; font-weight: 600; letter-spacing: -0.05rem; margin-bottom: 0.1rem; }
.point_txt { color: #000; display: block; font-size: 0.9rem; line-height: 0.9rem; font-weight: 600; letter-spacing: -0.06rem; }


/*버튼 영역*/
.btn_go { width: 1.4rem; height: 1.4rem; position: relative; left: -0.6rem; border-radius: 50%; background-color: #000; z-index: 1; transform: rotate(180deg);
  background-image: url(../img/icon_back.png); background-size: 60%; background-position: center; background-repeat: no-repeat; }



/***************************************************************************************/
/*                             1-2.자격할인쿠폰_쿠폰상세                                 */
/***************************************************************************************/
.p_pointDetail { position: relative; width: 100%; height: 100%; padding: 0 0.75rem; padding-top: 3rem; box-sizing: border-box; background-image: url(../img/img_plazacc.png);
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.p_pointDetail::after { content : ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(1,76,141,0.6); }

/*상세쿠폰*/
.cpn_detail { width: 100%; height: auto; margin-bottom: 40px; position: relative; overflow: hidden; z-index: 1; background-color: rgba(256,256,256,1); border-radius: 1rem; box-shadow: 0 0 1rem rgba(0,0,0,0.22); }

/*타이틀부*/
.detail_tit { width: 100%; height: auto; text-align: center; padding: 1.7rem 0 1.5rem 0; box-sizing: border-box; border-bottom: 0.05rem solid #CACACA; }
.detail_tit .store_txt { font-size: 1rem; line-height: 1rem; margin-bottom: 0.15rem; }
.detail_tit .point_num { display: inline-block; font-size: 1.7rem; line-height: 1.7rem; letter-spacing: -0.1rem; }
.detail_tit .point_txt { display: inline-block; font-size: 1.5rem; line-height: 1.7rem; font-weight: normal; letter-spacing: -0.2rem; }

/*본문부*/
.detail_contents { width: 100%; height: auto; padding: 1.3rem 0 1.4rem 0; box-sizing: border-box; text-align: center; background-color: #EEF4F9; }
.detail_contents .pointCpn_img { width: 11.5rem; height: 9rem; margin: 0 auto; margin-bottom: 0.9rem; }
.detail_txt { font-size: 0.75rem; line-height: 1rem; color: #676767; letter-spacing: -0.05rem; }

/*도장부*/
.detail_stamp { width: 100%; height: auto; padding: 1.2rem 0; box-sizing: border-box; text-align: center; }
.stamp_img { width: 5rem; height: 5rem; margin: 0 auto; margin-bottom: 0.4rem; background-image: url(../img/icon_stamp.png);
  background-size: 100%; background-position: center; background-repeat: no-repeat;}
.stamp_txt { font-size: 0.75rem; line-height: 0.8rem; color: #2F3B42; letter-spacing: -0.05rem; opacity: 0.8; }


/***************************************************************************************/
/*                            2-1.포인트구매쿠폰_상품목록                                */
/***************************************************************************************/
.p_packageList { min-height: 100%; height: auto; background-color: #f5f5f5; }

.packageList_titArea { background-image: url(../img/img_packageBg.png); }
.packageList_titArea::after { background-image: url(../img/bg_orangeTop.png); }


/*쿠폰*/
.package_coupon { width: 100%; height: 11rem; position: relative; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 1rem;
  background-color: #fff; box-shadow: 0 0 1rem rgba(0,0,0,0.16); }
.package_coupon:last-child { margin-bottom: 0; }

/*이미지 영역*/
.package_imgArea { width: auto; height: 100%; padding: 0 1.2rem; box-sizing: border-box; display: flex; justify-content: center; align-items: center; }
.package_imgArea .pointCpn_img { width: 6rem; height: 6rem; border-radius: 50%; overflow: hidden; }

/*텍스트 영역*/
.packageList_couponArea .pointCpn_txtArea { padding: 0 0.5rem; }
.packageList_couponArea .store_txt { font-size: 0.77rem; line-height: 0.77rem; margin-bottom: 0.5rem; }
.packageList_couponArea .point_num { font-size: 1.4rem; line-height: 1.4rem; margin-bottom: 0.2rem; }
.packageList_couponArea .point_txt { font-size: 1.05rem; line-height: 1.1rem; font-weight: 600; letter-spacing: -0.06rem; }


.package_string { width: 2.5rem; height: 100%; position: absolute; top: 0; right: 0; background-color: #fff; box-shadow: -0.05rem 0 0.5rem rgba(0,0,0,0.1); }

.package_string::before { content : ""; width: 4.2rem; height: 100%; position: absolute; top: 0; right: 0.4rem;
  background-image: url(../img/icon_string.png); background-size: 100%; background-position: 50% 56%; background-repeat: no-repeat; }


/***************************************************************************************/
/*                            2-2.포인트구매쿠폰_상품상세                                */
/***************************************************************************************/
.p_packageDetail { width: 100%; height: 100%; padding: 0 0.7rem; padding-top: 3rem; box-sizing: border-box; }

.p_packageDetail .cpn_detail { border-radius: 1rem 1rem 0 0; min-height: 100%; padding-bottom: 3rem; box-sizing: border-box;
    min-height: calc(100% - 3rem);
    min-height: -moz-calc(100% - 3rem);
    min-height: -webkit-calc(100% - 3rem);
}
.p_packageDetail .point_num { margin-right: 0.3rem; }

/*본문부*/
.detail_list { width: 100%; display: flex; justify-content: flex-start; align-items: center; border-bottom: 0.05rem solid #CECECE; padding: 0.45rem 1.1rem; box-sizing: border-box; }
.detail_list_img { width: 2.5rem; height: 2.5rem; margin-right: 2.2rem; border: 0.05rem solid #ddd; display: inline-block; border-radius: 50%; background-size: cover; background-position:center; background-repeat: no-repeat;  }
.detail_list_txt { display: inline-block; font-size: 0.95rem; line-height: 0.95rem; letter-spacing: -0.05rem; }

/*텍스트부*/
.p_packageDetail .detail_txt { width: 100%; padding: 1.5rem; box-sizing: border-box; font-size: 0.8rem; line-height: 1.1rem; letter-spacing: -0.05rem; }
.p_packageDetail .detail_txt strong { font-weight: bold; font-size: 0.85rem; }


/*구매하기 버튼*/
.btn_buy { width: 100%; height: 3rem; position: fixed; bottom: 0; left: 0; z-index: 1; background-color: #138AF2; color: #fff; display: flex; justify-content: center; align-items: center;
  font-size: 1.1rem; line-height: 1.1rem; letter-spacing: -0.01rem; font-weight: 500; }



/***************************************************************************************/
/*                          2-4.포인트구매쿠폰_구매상품목록                              */
/***************************************************************************************/
.p_orderList { height: auto; }

/*상단부*/
.order_tit { width: 100%; height: 18.5rem; position: relative; display: flex; justify-content: flex-start; align-items: flex-end;
  background-image: url(../img/img_plazacc.png); background-size: cover; background-position: center; background-repeat: no-repeat; }
.order_tit::after { content : ""; display: block; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background-color: rgba(0,0,0,0.30); }

.order_tit .detail_tit { position: relative; text-align: left; z-index: 1; border: none; padding: 2.5rem 1.75rem; padding-top: 3rem; }

.p_orderList .store_txt { color: #fff; font-size: 1rem; line-height: 1rem; letter-spacing: -0.02rem; margin-bottom: 0.5rem; }
.p_orderList .point_num { color: #fff; font-size: 1.5rem; line-height: 1.5rem; margin-bottom: 0.2rem; }
.p_orderList .point_txt { color: #fff; font-size: 1.5rem; line-height: 1.5rem; font-weight: 500; margin-bottom: 1rem; }

.order_txt { display: block; color: #fff; font-size: 0.8rem; line-height: 1.05rem; letter-spacing: -0.02rem; }


/*하단부*/
.order_list_wrap { width: 100%; height: auto; position: relative; padding-bottom: 0.75rem; }
.order_list { width: 100%; position: relative; display: flex; justify-content: flex-start; align-items: center; border-bottom: 0.05rem solid #CECECE;
  background-color: #fff; margin-top: 0.4rem; box-shadow: 0 0 0.5rem rgba(0,0,0,0.16); padding: 0.85rem 1rem; box-sizing: border-box; }

  /*클래스추가*/
  .order_list.used::after { content : ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(256,256,256,0.7); }
  .order_list.used .btn_go { width: 4.5rem !important; height: 1.4rem; left: initial !important; right: 0.9rem; border-radius: 1.5rem; background-image: none; background-color: #138AF2; }
  .order_list.used .btn_go::before { content : "사용완료"; width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; color: #fff;
  position: absolute; top: 0; left: 0; font-size: 0.7rem; line-height: 0.7rem; letter-spacing: -0.05rem; transform: rotate(180deg) !important; padding-left: 0.5rem; padding-right: 1.3rem; box-sizing: border-box; }
  .order_list.used .btn_go::after { content : ""; width: 1.2rem; height: 100%; position: absolute; left:0; top: 0; background-image: url(../img/icon_check.png); background-size: 100%; background-position: center; background-repeat: no-repeat; transform: rotate(180deg) !important; }


.p_orderList .detail_list_img { width: 3.2rem; height: 3.2rem; }
.p_orderList .detail_list_store { color: #6D6D6D; font-size: 0.75rem; line-height: 0.75rem; letter-spacing: -0.02rem; margin-bottom: 0.1rem; }
.p_orderList .detail_list_txt { color: #000; font-size: 1.1rem; line-height: 1.1rem; letter-spacing: -0.02rem; font-weight: bold; }


.p_orderList .btn_go_wrap { width: 3rem; height: 100%; position: absolute; top: 0; right: 0;  display: flex; justify-content: center; align-items: center; border-left: 0.05rem solid #F1F1F1; box-sizing: border-box; }
.p_orderList .btn_go { width: 1.2rem; height: 1.2rem; position: absolute; left: initial !important; right: 0.9rem !important; top: 50%; margin-top: -0.6rem; }


/***************************************************************************************/
/*                          2-5.포인트구매쿠폰_구매상품상세                              */
/***************************************************************************************/
.p_orderDetail { position: relative; width: 100%; height: 100%; padding: 0 0.75rem; padding-top: 3rem; box-sizing: border-box; background-image: url(../img/img_plazacc.png);
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.p_orderDetail::after { content : ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(1,76,141,0.6); }

.p_orderDetail .point_num { letter-spacing: -0.2rem; }



/***************************************************************************************/
/*                                   팝업 페이지                                        */
/***************************************************************************************/
/*Alert 페이지*/
.popup { width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(0,0,0,0.7); z-index:1; }
.alertArea:before { content : ""; width: 3rem; height: 3rem; position: absolute; top: -1.5rem; left: 50%; margin-left: -1.5rem; background-image: url(../img/icon_check.png); background-size: 100%; background-position: center; background-repeat: no-repeat; }

.alertArea { width: 12rem; height: auto; position: relative; padding: 0 1.7rem; padding-top: 2.7rem; border-radius: 0.7rem;
  font-size: 0.9rem; line-height: 1.15rem; letter-spacing: -0.06rem; text-align: center; background-color: #fff; font-weight: normal; }

.btn_ok { width: 100%; padding: 0.6rem 0; border-radius: 0.3rem; color: #fff; background-color: #138AF2;
  font-size: 0.95rem; line-height: 0.95rem; letter-spacing: 0.05rem; font-weight: 500; margin-top: 1.5rem; margin-bottom: 1.2rem; }

/*Used 페이지*/
.icon_used { width: 100%; height: 10.5rem; position: relative; background-image: url(../img/icon_used.png); background-size: contain; background-position: center; background-repeat: no-repeat; }
.btn_close { width: 2.5rem; height: 2.5rem; position: absolute; top: 1rem; right: 0.75rem; background-image: url(../img/icon_close.png); background-size: 55%; background-position: center; background-repeat: no-repeat; }

#alert_popup_contents_div { display: flex; }


  /************************************media query***********************************/
  @media only screen and (min-width: 320px){
      html { font-size: 100% !important; }
  }
  @media only screen and (min-width: 340px){
      html { font-size: 106.25% !important; }
  }
  @media only screen and (min-width: 360px){
      html { font-size: 112.5% !important; }
  }
  @media only screen and (min-width: 375px){
      html { font-size: 117.19% !important; }
  }
  @media only screen and (min-width: 400px){
      html { font-size: 125% !important; }
  }
  @media only screen and (min-width: 440px){
      html { font-size: 137.5% !important; }
  }
  @media only screen and (min-width: 480px){
      html { font-size: 150% !important; }
  }
  @media only screen and (min-width: 520px){
      html { font-size: 162.5% !important; }
  }
  @media only screen and (min-width: 560px){
      html { font-size: 175% !important; }
  }
  @media only screen and (min-width: 600px){
      html { font-size: 187.5% !important; }
  }
  @media only screen and (min-width: 640px){
      html { font-size: 200% !important;
  }
  @media only screen and (min-width: 680px){
      html { font-size: 212.5% !important; }
  }
  @media only screen and (min-width: 720px){
      html { font-size: 220% !important; }
  }
  @media only screen and (min-width: 760px){
     html { font-size: 225% !important; }
  }
  @media only screen and (min-width: 800px){
     html { font-size: 230% !important; }
  }
  @media only screen and (min-width: 960px){
     html { font-size: 260% !important; }
  }
  @media only screen and (min-width: 1242px){
     html { font-size: 280% !important; }
  }