@charset "utf-8";
@font-face {
    font-family: "Pretendard Variable";
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
src: local("Pretendard Variable"), url("../font/PretendardVariable.woff2") format("woff2-variations");
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Thin.woff") format("woff");
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Light.woff") format("woff");
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Regular.woff") format("woff");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Medium.woff") format("woff");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-SemiBold.woff") format("woff");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Bold.woff") format("woff");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Black.woff") format("woff");
    font-weight: 900;
    font-display: swap;
}
@font-face {
    font-family: "YouandiModernHB";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url(../font/YouandiNewKrTitleBold.eot);
    src: url(../font/YouandiNewKrTitleBold.eot?#iefix) format("embedded-opentype");
    src: url(../font/YouandiNewKrTitleBold.woff) format("woff");
    src: url(../font/YouandiNewKrTitleBold.woff2) format("woff2");
}
@font-face {
    font-family: "YouandiNewTitleBold";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url(../font/YouandiNewKrTitleBold.eot);
    src: url(../font/YouandiNewKrTitleBold.eot?#iefix) format("embedded-opentype");
    src: url(../font/YouandiNewKrTitleBold.woff) format("woff");
}
@font-face {
    font-family: 'YouandiModernHR';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url(../font/YouandiNewKrTitle-Regular.eot);
    src: url(../font/YouandiNewKrTitle-Regular.eot?#iefix) format('embedded-opentype'), ;
    src: url(../font/YouandiNewKrTitle-Regular.woff) format('woff');
}
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
/* reset */
* { -webkit-touch-callout:none; /* 이미지 길게 터치 방지 */ -webkit-tap-highlight-color:transparent; /* a 클릭시 배경색 제거 */ font-family: "YouandiModernHR", "AppleSDGothicNeo-regular", "Malgun Gothic", "맑은 고딕", sans-serif;font-weight: 400;-webkit-box-sizing: border-box;box-sizing: border-box;word-break: keep-all;}
html, body { font-size: 16px; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, 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%; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; background-color: transparent; }
a { text-decoration: none; }
img { max-width: 100%; }
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; }
textarea { resize: none; }
input::-webkit-input-placeholder { font-size: 0.5rem; color: #676767; }
input::-moz-placeholder { font-size: 0.5rem; color: #676767; }
input:-ms-input-placeholder { font-size: 0.5rem; color: #676767; }
input::-ms-input-placeholder { font-size: 0.5rem; color: #676767; }
input::placeholder { font-size: 0.5rem; color: #676767; }
input:focus::-webkit-input-placeholder { color: #ffffff; }
input:focus::-moz-placeholder { color: #ffffff; }
input:focus:-ms-input-placeholder { color: #ffffff; }
input:focus::-ms-input-placeholder { color: #ffffff; }
input:focus::placeholder { color: #ffffff; }
img { vertical-align: top; }
body { font-size: 16px; }
strong { font-family: "YouandiNewTitleBold", sans-serif; font-weight: 900; letter-spacing: -1px; }
.mo_view { display: none !important; }
.pc_view { display: block !important; }
/* .text-left { text-align: left !important; } */
/* .text-center { text-align: center; } */
.event_wrap { max-width: 46.875rem; margin: 0 auto;}
.event_wrap .event-header { position: relative; }
.event_wrap .event-header .promotion-date { position: absolute; top: 26.25rem; left: 0; display: block; width: 100%; text-align: center; font-size: 2rem; letter-spacing: -0.125rem; padding: 0 15.96875rem; }
.event_wrap .event-header .logos { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;     -ms-flex-align: center;         align-items: center; -webkit-box-pack: justify;     -ms-flex-pack: justify;         justify-content: space-between; align-items: center; top: 0; left: 0; padding: 1.25rem; width: 100%; }
.event_wrap .event-header .logos .logo-mirae-asset { max-width: 8.875rem; }
.event_wrap .event-header .logos .logo-hyundai { max-width: 7.6875rem; }
.event_wrap .event-title { border-radius: 3.125rem; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin: 0 auto; color: #fc5614; border: 0.125rem solid #fc5614; padding: 0.9375rem 2.5rem; }
.event_wrap .event-title .event { font-size: 1.625rem; font-family: "YouandiNewTitleBold", sans-serif; font-weight: 900; text-decoration: underline; -ms-flex-item-align: end;     align-self: flex-end; line-height: 1; }
.event_wrap .event-title .desc { font-size: 2rem; font-family: "YouandiNewTitleBold", sans-serif; font-weight: 900; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; }
.event_wrap .event-title .desc span { font-size: 2rem; font-family: "YouandiNewTitleBold", sans-serif; font-weight: 900; }
.event_wrap .event-title .desc .under { padding: 0 0.3125rem; margin: 0 0.3125rem; position: relative; z-index: 1; }
.event_wrap .event-title .desc .under::after { content: ""; width: 100%; height: 1.25rem; position: absolute; left: 0; bottom: -0.3125rem; background-color: #ffd0bd; z-index: -1; }
.event_wrap .event-desc .target { padding: 2.5rem 0 2.5rem; /* 2024-02-23 Q20016 상단 여백 수정 */ text-align: center; font-size: 2rem; letter-spacing: -1px; }
.event_wrap .event-desc .target .event_color { /* 2024-02-21 Q20016 추가 */ color: #fc5614; font-size: 2.5rem; }
.event_wrap .event-desc .target strong { font-family: "YouandiNewTitleBold", sans-serif; font-weight: 900; letter-spacing: -1px; }
.event_wrap .event-desc .wrap-box { position: relative; padding: 3.5rem 3.4375rem 3.75rem; text-align: center; background:url(../img/bg_event2404_01_mid.png) left top repeat-y;background-size: 100%;text-align: left;}
.event_wrap .event-desc .wrap_top{width:100%;height:17.25rem;margin-bottom: -1px;}
.event_wrap .event-desc .wrap_bot{width:100%;height:0.5625rem;}
.event_wrap .event-desc .wrap-box .content { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1.8125rem; padding-top: 2.1875rem; line-height: 1.5; letter-spacing: 0.03125rem; }



  @-webkit-keyframes motion { 
      0% {-webkit-transform: scale(0.9); transform: scale(0.9); }
      50% {-webkit-transform: scale(1); transform: scale(1); }
      100% {-webkit-transform: scale(0.9); transform: scale(0.9); }
  }
  @keyframes motion { 
      0% {-webkit-transform: scale(0.9); transform: scale(0.9); }
      50% {-webkit-transform: scale(1); transform: scale(1); }
      100% {-webkit-transform: scale(0.9); transform: scale(0.9); }
  }
  @media (max-width: 750px) { 
      .event_wrap .emphasis-image img {max-width: 76%; }
      .mo_view {display: block !important; }
      .pc_view {display: none !important; }
  }

    /* Q11817 코스트코 리워드 6월 */
    .event_wrap .event-desc {position: relative; width: 43.375rem; margin: 0px auto 8.5rem auto; font-size: 1.875rem; line-height: 1.5; }    
    .event_wrap.event202506 {background:url(/costco/m/img/bg_reward_202506.png) left top no-repeat;background-size: 100%;}
    .event_wrap.event202506 .content-box {width: 43.375rem;text-align: center;}
    .event_wrap.event202506 .content-box h4 {font-family: "Pretendard", sans-serif; font-size: 1.7rem; padding: 1.25rem 0; line-height: 1.8rem;border-radius: 0.9375rem 0.9375rem 0 0;font-weight: 700;color: #fff;background-color: #c9010b;}
    .event_wrap.event202506 .content-box p { font-family: "Pretendard", sans-serif; font-size: 1.625rem; padding: 1.875rem; line-height: 1.8rem; border-radius: 0 0 0.9375rem 0.9375rem; background-color: #fff;}
    .reward-content {margin: 0 1.75rem;}
    .reward-content + .reward-content {margin-top: 5.625rem;}
    .reward-content h2 {font-family: "YouandiNewTitleBold"; text-align: center; font-size: 3.5rem; font-weight: 700; margin-bottom: 3rem;}
    .reward-content .reward-list li { display: flex; align-items: center; padding: 1.875rem 0 1.875rem 2.4rem; background: #f4f6f9; border: 1px solid #cfd5e3; border-radius: 0.9375rem;}
    .reward-content .reward-list li + li { margin-top: 1.5625rem;}
    .reward-content .reward-list li p { font-family: 'Pretendard'; font-size: 1.875rem; line-height: 2.625rem;}
    .reward-content .list-title { font-family: 'Pretendard'; font-size: 1.875rem; font-weight: bold; color: #000;}
    .reward-content .list-title + .list-cont { font-family: 'Pretendard'; font-size: 1.625rem; color: #686d76;  margin-top: 1rem; line-height: 2.125rem;}
    .reward-content .reward-list li img { height: 7.625rem !important; margin-right: 2.4rem;}
    .line { border-top: 1px solid #cfd5e3; margin-top: 5.75rem;}
    .reward-content.type2 { padding: 5.625rem 0 0; margin: 0 3.5rem;}
    .reward-content .text-list li {display: flex;}
    .reward-content .text-list li p {font-family: 'Pretendard'; font-size: 1.375rem; line-height: 2.125rem; color: #686d76; }
    .reward-content .text-list li + li { margin-top: 3.25rem;}
    .reward-content .text-list li span {font-size: 1.75rem; line-height: 1.8rem; width: 10rem; margin-right: 2rem; color: #686d76; }
    .step-list {position: relative; counter-reset: step-counter; list-style-type: none; padding-left: 0;}
    .step-list::before { content: ''; display: inline-block; position: absolute; width: 0.15rem; height: 96%; left: 3rem; top: 0rem; background: url(/costco/m/img/bg-line2506.png) left top no-repeat; background-size: 100%;  }
    .step-list>li { position: relative; font-size: 14px; padding-left: 11.25rem; color: #000; counter-increment: step-counter;   }
    .step-list>li::before {position: absolute; left: 0; display: block; content: "STEP " counter(step-counter); color: #fff; background: #000; padding: 0.625rem 1.125rem; border-radius: 60px; font-size: 1.125rem; font-weight: 700; }
    .step-list li+h4 { margin-bottom: 8px; }
    .step-list>li+li { margin-top: 48px !important; }
    .reward-button { color: #fff; font-size: 1.75rem; font-weight: 700; font-family: 'Pretendard';align-items: center; display: flex; justify-content: center;}
    .reward-button.red { background: url(/costco/m/img/reward_button_red.png) left top no-repeat; background-size: 100%; width: 100%; height: 6.125rem; }
    .reward-button.blk {background: url(/costco/m/img/reward_button_blk.png) left top no-repeat; background-size: 100%; width: 100%; height: 6.125rem;}
    .bul_list li {font-family: 'Pretendard'; font-size: 1.375rem; line-height: 1.875rem; padding-left: 0.75rem; position: relative; color: #686d76;}
    .bul_list li::before {content: "·"; position: absolute; display: inline-block; left: 0;}
    .dash_list li::before {content: "-"; position: absolute; display: inline-block; left: 0;}
    .fw_bold{font-weight: 700 !important;}
    .lh40{line-height: 2.5rem !important;}
    .notice.type2 { font-family: "Pretendard", sans-serif; }
    .notice.type2 .btn-accordian { font-family: "Pretendard", sans-serif; font-weight: 700; border: 0; width: 100%; height: 6.875rem; background-color: #000; }
    .notice.type2 .btn-accordian span { color: #fff; font-family: "YouandiNewTitleBold", sans-serif;  position: relative; font-size: 2.5rem; }
    .notice.type2 .content { padding: 3.75rem 1.875rem 3.75rem; background-color: #2d2d2d; color: #eee; display: none; }
    .notice.type2 .content.active { display: block; }
    .notice.type2 .content .notice-title { font-size: 2.25rem; font-family: "Pretendard", sans-serif; font-weight: 600; color:#fff }
    .notice.type2 .content .notice-sub { font-size: 1.5rem; font-family: "Pretendard", sans-serif; font-weight: 600; color:#fff }
    .notice.type2 .content .notice-title + .notice-list { margin-top: 2.1875rem; }
    .notice.type2 .content .notice-list + .notice-title { margin-top: 3.125rem; }
    .notice.type2 .content .notice-list strong { font-family: "Pretendard", sans-serif; font-weight: 700; letter-spacing: 0px; }
    .notice.type2 .content .notice-list > li { padding-left: 0.9375rem; position: relative; line-height: 2.75rem; font-family: "Pretendard", sans-serif; font-weight: 400; font-size: 1.5rem; }
    .notice.type2 .content .notice-list > li::before { content: "·"; position: absolute; left: 0; top: 0; }
    .notice.type2 .content .notice-list > li.red-point { color: #f72525; }
    .notice.type2 .content .notice-list > li > ul > li { padding-left: 0.9375rem; position: relative; line-height: 2.75rem; font-family: "Pretendard", sans-serif; font-weight: 400; font-size: 1.5rem; }
    .notice.type2 .content .notice-list > li > ul > li::before { content: "-"; position: absolute; left: 0; top: 0; }
    .pdf-button a { font-family: "Pretendard", sans-serif; color: #ffe00d; font-size: 1.625rem;}


    /* 코스트코 리워드 Ed2 7월 연회비 캐시백 */
    .event_wrap.cashback2507 { padding-bottom: 10.5rem; }
    .event_wrap.cashback2507 .cashback-btn-area { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; width: 100%; max-width: 750px; margin: 0 auto; }
    .event_wrap.cashback2507 .cashback-btn-area .btn-check { font-family: 'Pretendard';background-color: #d90108;}
    .event_wrap.cashback2507 .cashback-btn-area a { flex: 1; font-family: 'YouandiNewTitleBold'; font-size: 2.1875rem; text-align: center; color: #fff; padding: 1.75rem }
    .event_wrap.cashback2507 .cashback-btn-area a span { font-size: 4.875rem; }
    .event_wrap.cashback2507 .event-content {margin: 4.5rem 3rem 0 3rem;}
    .event_wrap.cashback2507 .event-content .content-title {text-align: center; color: #d90108; font-size: 4.5rem;}
    .event_wrap.cashback2507 .event-content .content-desc {text-align: center; font-size: 2.5rem; line-height: 2.75rem; }
    .event_wrap.cashback2507 .box_cont { padding-left: 1.75rem;}
    .event_wrap.cashback2507 .box_cont + .box_cont{ margin-top: 3.75rem;} 
    .event_wrap.cashback2507 .box_cont .cont_subtit{ font-size: 1.875rem; font-weight: 700; color: #fff; padding: 0.75rem 0; width: 10.75rem; border-radius: 1.625rem; background-color: #000; text-align: center; margin-bottom: 1.25rem;} 
    .event_wrap.cashback2507 .box_cont .cont_subtit + p { font-family: 'Pretendard'; font-size: 1.875rem; line-height: 2.5rem; padding-left: 1rem; } 
    .event_wrap.cashback2507 .num_list {padding-left: 1rem;  }
    .event_wrap.cashback2507 .num_list li { font-family: 'Pretendard'; font-size: 1.875rem; line-height: 2.5rem; }
    .event_wrap.cashback2507 .box_cont .desc { font-family: 'Pretendard'; color: #666; font-size: 1.375rem; padding-left: 16px; text-indent: -8px; line-height: 2rem;}
    .event_wrap.cashback2507 .reward-button.red { font-size: 2.75rem; font-family: 'YouandiNewTitleBold';}
    .event_wrap.cashback2507 .reward-button.blk { font-family: 'YouandiNewTitleBold'; font-size: 1.75rem !important; width: 41.25rem; height: 5.85rem; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
    .event_wrap.cashback2507 .event-bottom { position: relative; background: url(/costco/m/img/img_costco_content_bottom.png) left top no-repeat; background-size: 100%; width: 100%; height: 15rem;}
    .event_wrap.cashback2507 .event-bottom p {position: absolute; top: 2.5rem; font-family: 'Pretendard'; font-size: 1.375rem; line-height: 2rem; color: #4f4f4f;}
    .event_wrap.cashback2507 .apple_wrap{padding: 4.5rem 0; text-align:center; background-color: #000;}
    .event_wrap.cashback2507 .apple_wrap .ap_icon03{width:22.1875rem; margin:0 auto;}
    .event_wrap.cashback2507 .apple_wrap .ap_tit{font-size:2.8125rem; font-family:'YouandiNewTitleBold'; line-height:3rem; color: #fff;}
    .event_wrap.cashback2507 .apple_wrap .ap_txt{font-size:1.75rem; color: #fff;}
    .event_wrap.cashback2507 .apple_wrap .ap_txt2{font-size:1.375rem; color: #898989; line-height: 1.75rem;}
    
    .mt0{margin-top: 0 !important;}
    .mt16{margin-top: 1rem !important; }
    .mt20{margin-top:1.25rem !important}
    .mt24{margin-top:1.5rem !important}
    .mt32{margin-top: 2rem !important; }
    
    .mt45{margin-top: 2.8125rem !important; }
    .mt60{margin-top:3.75rem !important}
    .mt80{margin-top:5rem !important}
    .mt90{margin-top: 5.625rem !important; }
    .mt100{margin-top: 6.25rem !important;}
    .mb40{margin-bottom:2.5rem !important;}
    .mx100{margin: 6.25rem 0 !important;}
    .pt60{padding-top:3.75rem!important}
    .pb0{padding-bottom: 0 !important;}
    .pl60{padding-left: 3.75rem;}