@charset "utf-8";

/* ---------------------------------------
 COMMON
--------------------------------------- */
.blind { overflow: hidden; position: absolute; z-index: -1; width: 1px; height: 1px; border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);}
#wrap {} 
#visual { position: relative; width: 100%; height: 355px; overflow: hidden; } 
.event-visual { height: 355px; background: url('../images/mob/event_cards/event_bg.jpg') no-repeat center top / auto 100%; } 
.event-visual .img { position: absolute; left: 50%; bottom: 10%; transform: translate(-50%,0); width: 179px;}
.best-visual { background: url('../images/mob/best_bg.png') no-repeat center / cover; padding-bottom: 50px;} 
/* .shopping-visual { background: url('../images/mob/shopping_bg.png') no-repeat center top / cover; }  */
.shopping-visual { background-image: url(../images/mob/shopping_bg.png); background-position: center bottom, center center; background-size:  100% 100%; background-repeat: no-repeat, no-repeat;} 
.shopping-visual::before { content: ''; display: block; position: absolute; left: 50%; bottom: 0; z-index: 10; width: 100%; max-width: 720px; height: 100%; background: url(../images/mob/shopping_obj.png) no-repeat center bottom / 390px auto; transform: translateX(-50%);}
.oiling-visual { background-color: #f0f1f1;} 
.oiling-visual::before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(../images/mob/oiling_obj.png?ver=250312); background-position: left calc(50% - 40px) bottom -75px; background-size:475px auto; background-repeat: no-repeat; pointer-events: none;} 
/* .id-visual { background: url('../images/mob/id_bg.png') no-repeat center bottom / cover; }  */
/* .tap-visual { background: url('../images/mob/tab_bg_emoji01.png') no-repeat top -60px left -60px / 177px auto, url('../images/mob/tab_bg_emoji02.png') no-repeat bottom -20px right -20px / 90px auto, #8B2DCD; }  */
/* .centur-visual { background: url('../images/mob/centur_bg02.png') no-repeat center bottom / 360px auto, url('../images/mob/centur_bg.png') no-repeat center / cover; }  */
.biz-visual { background: url('../images/mob/biz_bg.png') no-repeat center bottom / cover; } 
.theid-visual { background: url('../images/mob/theid_bg.png') no-repeat center bottom / cover; } 
.travel-visual { background: url('../images/mob/travel_bg.png') no-repeat center top / cover; } 

/* visual title */
#visual .visual-wrap { width: 100%; min-width: 320px; max-width: 720px; padding-top: 40px; margin: 0 auto; text-align: center; overflow: hidden; } 
#visual .visual-wrap h1 img { width: 25%; max-width: 90px; margin: 0 auto; } 
#visual .visual-wrap h2 { max-width: 133px; margin: 20px auto 0; } 
#visual .visual-wrap .inner ul { position: relative; display: flex; flex-wrap: wrap; width: fit-content; margin:0 auto; } 
#visual .visual-wrap .inner img { margin:0 auto; }

/* aside nav */
.aside { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; background: #fff; box-shadow: -5px -5px 10px rgba(0,0,0,0.05); } 
.aside ul { display: flex;flex-wrap: wrap; justify-content: space-between; width: 100%; height: 58px; margin: 0 auto; } 
.aside li { width: 20%; box-sizing: border-box; border-left: 1px solid #e5e5e5; } 
.aside li:nth-of-type(1) { border-left: 0; } 
.aside li a { display: flex; width: 100%; height: 100%; border-top: 2px solid #fff; flex-direction: column; align-items: center; justify-content: center; opacity: 0.5; } 
.aside li a.view-page { border-color: #000; opacity: 1; }
.aside li a img { display: block; height: 18px; margin-bottom: 6px; } 
.aside li a span { color: #000; font-size: 12px; line-height: 1em; letter-spacing: -0.06em; font-family: "NanumSquare", Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }

/* contents */
#contents { background: #fff; }

.section01 .card_box_list { display: flex; flex-direction: column; gap: 47px; align-items: center; padding-bottom: 50px;}
.section01 .card_box { width: 310px; margin: 0 auto; padding: 22px 0 31px; border-radius: 10px; box-shadow: 0 3px 14px rgba(0,0,0,0.15);}
.section01 .card_box .btn-wrap { display: flex; gap: 5px; margin-top: 16px; padding: 0 16px;}
.section01 .card_box .btn-wrap a { display: block; flex: 1; position: relative; border-radius: 3px;}
.section01 .card_box .btn-wrap a::before { content: ''; display: block; width: 100%; padding-top: calc(83 / 278 * 100%); background-position: center center; background-size: auto 14px; background-repeat: no-repeat;}
.section01 .card_box .btn-wrap a.txt_read_more_white::before { background-image: url('../images/mob/txt_read_more_white.png');}
.section01 .card_box .btn-wrap a.txt_read_more_black::before { background-image: url('../images/mob/txt_read_more_black.png');}
.section01 .card_box .btn-wrap a.txt_read_more_gold::before { background-image: url('../images/mob/txt_read_more_gold.png');}
.section01 .card_box .btn-wrap a.txt_quick_issue_white::before { background-image: url('../images/mob/txt_quick_issue_white.png');}
.section01 .card_box .btn-wrap a.txt_quick_issue_black::before { background-image: url('../images/mob/txt_quick_issue_black.png');}
.section01 .card_box .btn-wrap a.txt_quick_issue_gold::before { background-image: url('../images/mob/txt_quick_issue_gold.png');}

.bg_deeppurple { background-color: #302977 !important;}
.bg_blue { background-color: #302977 !important;}
.bg_blue { background-color: #436bff !important;}
.bg_mediumblue { background-color: #233272 !important;}
.bg_darkblue { background-color: #072c5a !important;}
.bg_navy { background-color: #111941 !important;}
.bg_indigo { background-color: #382278 !important;}
.bg_orange { background-color: #f5c64d !important;}
.bg_darkorange { background-color: #fe7300 !important;}
.bg_lime { background-color: #55e762 !important;}
.bg_limegreen { background-color: #7cdc00 !important;}
.bg_darkred { background-color: #692d2d !important;}
.bg_pink { background-color: #e94569 !important;}
.bg_gray { background-color: #8a8a8a !important;}
.bg_lightgrey { background-color: #4f5050 !important;} 
.bg_darkgray { background-color: #404040 !important;} 
.bg_dimgray { background-color: #414245 !important;} 
.bg_black { background-color: #1c1c1b !important;}
.bg_firered { background-color: #ec0700 !important;}
.bg_oceanblue { background-color: #0096a9 !important;}
.bg_green_blue { background: rgb(138,222,33); background: linear-gradient(90deg, rgba(138,222,33,1) 0%, rgba(1,138,214,1) 100%);}

.bg_light::after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url('../images/mob/light.png'); background-position: center center; background-size: 155px auto; background-repeat: no-repeat; pointer-events: none;}

/* notice */
.notice { margin:0 auto; font-family: "NanumSquare", Verdana, Arial, Helvetica, sans-serif; letter-spacing: -0.06em; }

.notice .inner { max-width: 310px; min-width: auto; margin: 0 auto; padding: 0 0 50px;}
.notice .title h2 { font-size:14px; color:#333; font-weight:800; line-height:1; }
.notice .content { margin: 10px 0 0; }
.notice .content ul li { position:relative; padding-left:10px; font-size:17px; line-height:25.5px;}
.notice .content ul li:before { content:'-'; position:absolute; left:0; display:inline-block; }
.notice .content ul li.dot { padding-left: 20px;}
.notice .content ul li.dot:before { content:'·'; left: 10px;}

/* ---------------------------------------
    EVENT
--------------------------------------- */
#wrap.page_event { margin: 0 auto; background-color: #fff;}
#wrap.page_event #event { position: relative; background-color: #468bea;}
#wrap.page_event #event .ttl { position: absolute; left: 50%; top: calc(40 / 212 * 100%); transform: translateX(-50%);}
#wrap.page_event #event .ttl .img { width: 157px;}
#wrap.page_event #contents { padding-bottom: 0;}
#wrap.page_event .section01 { min-width: auto; padding-top: 0; padding: 0;}

.event_card_list { display: flex; flex-direction: column; gap: 30px; align-items: center; max-width: 343px; margin: -26px auto 43px;}
.event_card_list .event_card_item { display: flex; align-items: center; width: 100%; margin-bottom: 0; padding: 23px 0px 23px 8px; border-radius: 5px; box-shadow: rgba(99, 99, 99, 0.4) 3px 3px 4px 1px;}
.event_card_list .event_card_item.vertical { padding: 17px 0px 17px 15px;}
.event_card_list .event_card_item .event_card_box { display: flex; gap: 8px;}
.event_card_list .event_card_item.vertical .event_card_box { gap: 15px;}
.event_card_list .event_card_item .event_card_box img { margin-bottom: 0;}
.event_card_list .event_card_item .event_card_box .event_card .card { width: 153px;}
.event_card_list .event_card_item.vertical .event_card_box .event_card .card { width: 139px;}
.event_card_list .event_card_item .event_card_box .event_info {display: flex; flex-direction: column; justify-content: center; flex: 1;}
.event_card_list .event_card_item .event_card_box .event_info .info { width: 100%; max-width: 155px;}
.event_card_list .event_card_item .event_card_box .event_info .cta_btn { display: block; margin-top: 10px;}
.event_card_list .event_card_item .event_card_box .event_info .cta_btn .img { margin: 0; width: 95px;}
.event_card_list .event_card_item .event_card_box .event_info .date { margin-top: 8px; padding-left: 4px; font-family: 'Pretendard','NotoSansKR', Helvetica, AppleGothic, Sans-serif; font-size: 15px; line-height: 1; letter-spacing: -0.04em; color: #000;}

@media screen and (max-width: 360px) {
    .event_card_list { gap: 8.3333vw; max-width: 95.2778vw; margin: -7.2222vw auto 11.9444vw;}
    .event_card_list .event_card_item { width: 100%; margin-bottom: 0; padding: 6.3889vw 0.0000vw 6.3889vw 2.2222vw; border-radius: 1.3889vw; box-shadow: rgba(99, 99, 99, 0.4) 0.8333vw 0.8333vw 1.1111vw 0.2778vw;}
    .event_card_list .event_card_item.vertical { padding: 4.7222vw 0.0000vw 4.7222vw 4.1667vw;}
    .event_card_list .event_card_item .event_card_box { gap: 2.2222vw;}
    .event_card_list .event_card_item.vertical .event_card_box { gap: 4.1667vw;}
    .event_card_list .event_card_item .event_card_box img { margin-bottom: 0;}
    .event_card_list .event_card_item .event_card_box .event_card .card { width: 42.5000vw;}
    .event_card_list .event_card_item.vertical .event_card_box .event_card .card { width: 38.6111vw;}
    .event_card_list .event_card_item .event_card_box .event_info .info { width: 155px; max-width: 90%;}
    .event_card_list .event_card_item .event_card_box .event_info .cta_btn { margin-top: 2.7778vw;}
    .event_card_list .event_card_item .event_card_box .event_info .cta_btn .img { margin: 0; width: 26.3889vw;}
    .event_card_list .event_card_item .event_card_box .event_info .date { margin-top: 2.2222vw; padding-left: 1.1111vw; font-size: 4.1667vw;}


    .section01 .card_box_list { gap: 13.0556vw; align-items: center; padding-bottom: 13.8889vw;}
    .section01 .card_box { width: 86.1111vw; margin: 0 auto; padding: 6.1111vw 0 8.6111vw; border-radius: 2.7778vw; box-shadow: 0 0.8333vw 3.8889vw rgba(0,0,0,0.15);}
    .section01 .card_box .btn-wrap {  gap: 1.3889vw; margin-top: 4.4444vw; padding: 0 4.4444vw;}
    .section01 .card_box .btn-wrap a { flex: 1; border-radius: 0.8333vw;}
    .section01 .card_box .btn-wrap a::before { width: 100%; padding-top: calc(83 / 278 * 100%);  background-size: auto 3.8889vw; }

    .notice .inner { max-width: 86.1111vw; min-width: auto; margin: 0 auto; padding: 0 0 13.8889vw;}
    .notice .title h2 { font-size:3.8889vw; line-height:1; }
    .notice .content { margin: 2.7778vw 0 0; }
    .notice .content ul li {  padding-left:2.7778vw; font-size:4.7222vw; line-height:7.0833vw;}
    .notice .content ul li:before {   left:0;  }
    .notice .content ul li.dot { padding-left: 5.5556vw;}
    .notice .content ul li.dot:before { content:'·'; left: 2.7778vw;}

}

.gnb_pannel { position: sticky; top: 0; z-index: 100; margin: 20px 0 40px; background: #fff;}
.gnb_pannel .pin-spacer,
.gnb_pannel .pin-spacer .gnb_area { width: 100% !important; max-width: 100% !important; }
.gnb_area { position: relative; z-index: 400; padding: 10px 0; background-color: #fff;}
.gnb_list { display: flex; justify-content: center; gap: 8px 5px; flex-wrap: wrap; max-width: 360px; margin: 0 auto;}
.gnb_list .gnb_link { display: block; position: relative; border-radius: 100px;}
.gnb_list .gnb_link img { border-radius: 100px;}
.gnb_list .gnb_link .off { height: 29px;}
.gnb_list .gnb_link .on { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: none; height: 34px; border-radius: 100px;}
.gnb_list .gnb_link.active .on { display: block;}

@media screen and (max-width: 360px) {
    .gnb_pannel { overflow-x: hidden; margin: 4.0000vw 0 11.1111vw;}

    /* #wrap.page_event { margin: 0 auto; }
    #wrap.page_event #event {  height: 58.8889vw; background-size: 266.6667vw auto; }
    #wrap.page_event #event .ttl .img { width: 43.6111vw;}
    #wrap.page_event #contents { padding-bottom: 0;} */

    .gnb_list {position: relative; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100vw; gap: 2.2222vw 1.3889vw;}
    .gnb_list .gnb_link .off { height: 8.0556vw;}
    .gnb_list .gnb_link .on { height: 9.4444vw;}

    #wrap.page_event #contents .notice .inner { padding: 0 6.3889vw;}
}

/* ---------------------------------------
    BEST 3
--------------------------------------- */
#visual .visual-wrap .best-inner { width: 100%; max-width: 210px; margin: 40px auto 0; } 
#visual .visual-wrap .best-inner ul { display: block; width: 100%; height: 150px; } 
#visual .visual-wrap .best-inner ul li:nth-of-type(1) { position: absolute; width: 76px; top: 5px; left: 0; animation: flip-left 2s .5s ease forwards; opacity: 0; z-index: 1; } 
#visual .visual-wrap .best-inner ul li:nth-of-type(2) { position: relative; width: 86px; margin: 0 auto; z-index: 2; } 
#visual .visual-wrap .best-inner ul li:nth-of-type(3) { position: absolute; width: 76px; top: 5px; right: 0; animation: flip-right 2s .5s ease forwards; opacity: 0; z-index: 1; } 

/* best-inner animation */
@keyframes flip-right {
    from { transform: rotateY(65deg); right: 60px; opacity: 1; } 
    to { transform: rotateY(0); right: 0; opacity: 1; } 
}

@keyframes flip-left {
    from { transform: rotateY(295deg); left: 60px; opacity: 1; } 
    to { transform: rotateY(360deg); left: 0; opacity: 1; } 
}

/* ---------------------------------------
    shopping
--------------------------------------- */
#visual.shopping-visual .visual-wrap h2 { max-width: 312px; margin: -45px auto -47px;}
#visual .visual-wrap .shopping-inner { margin: 0 auto 70px;}
#visual .visual-wrap .shopping-inner ul li:nth-of-type(1) { width: 105px;}
#visual .visual-wrap .shopping-inner ul li:nth-of-type(2) { width: 105px; margin-top: 4px; margin-left: -25px;}
#visual .visual-wrap .shopping-inner ul li:nth-of-type(3) { position: relative; left: -30px; z-index: 15; width: 110px; margin-top: 58px;}

/* ---------------------------------------
    oiling
--------------------------------------- */
#visual .visual-wrap .oiling-inner { margin: 20px auto 50px;}
#visual .visual-wrap .oiling-inner ul li {position: relative;left: 2px;top: -11px;}
#visual .visual-wrap .oiling-inner ul li:nth-of-type(1) { width:61px;}
#visual .visual-wrap .oiling-inner ul li:nth-of-type(2) {width: 63px;margin-top: 74px;margin-left: -11px;}
#visual .visual-wrap .oiling-inner ul li:nth-of-type(3) {width: 68px;margin-left: 15px;margin-top: 20px;}

/* ---------------------------------------
    ID
--------------------------------------- */
#visual .visual-wrap .id-inner { width: 100%; max-width: 320px; margin: 20px auto 0; } 
#visual .visual-wrap .id-inner ul li { width: 79px; transform: translateY(12px); } 
#visual .visual-wrap .id-inner ul li:nth-of-type(1) { } 
#visual .visual-wrap .id-inner ul li:nth-of-type(2) { margin: 0 16px; } 
#visual .visual-wrap .id-inner ul li:nth-of-type(3) {  } 


/* ---------------------------------------
    BIZ
--------------------------------------- */
#visual.biz-visual .visual-wrap h2 { max-width: 190px;}
#visual .visual-wrap .biz-inner ul { position:relative; width: 100%; max-width: 414px; margin: 85px auto; padding: 0 24px; box-sizing: border-box; } 

#visual .visual-wrap .biz-inner ul li:nth-of-type(1) { width: 76px; } 
#visual .visual-wrap .biz-inner ul li:nth-of-type(2) { width: 80px; margin-left: -10px;} 
#visual .visual-wrap .biz-inner ul li:nth-of-type(3) { position: absolute; right: 30px; bottom: -20px; width: 90px; }

/* ---------------------------------------
    THE iD
--------------------------------------- */
#visual.theid-visual .visual-wrap h2 { max-width: 190px;}
#visual .visual-wrap .theid-inner ul { margin: 60px auto 50px; }
#visual .visual-wrap .theid-inner ul li { width: 76px; margin: 0 10px; } 

.theid-visual + #contents .card_box:nth-child(1) .card_img_wrap .card_img_link { top: 27.5%;}
.theid-visual + #contents .card_box:nth-child(1) .card_img_wrap .card_img_link .ft_link { left: 50%; transform: translateX(-50%); width: 65%;}
.theid-visual + #contents .card_box:nth-child(2) .card_img_wrap .card_img_link { top: 27%;}
.theid-visual + #contents .card_box:nth-child(2) .card_img_wrap .card_img_link .ft_link { left: 50%; transform: translateX(-50%); width: 65%;}

/* ---------------------------------------
    oiling
--------------------------------------- */
#visual.oiling-visual .visual-wrap h2 { max-width: 190px;}

/* ---------------------------------------
    travel
--------------------------------------- */
#visual.travel-visual .visual-wrap h2 { max-width: 305px; margin: -45px auto -65px;}
#visual .visual-wrap .travel-inner { margin: 30px auto 70px;}
#visual .visual-wrap .travel-inner ul li { width: 77px; margin: 0 7px; transform: rotate(12.45deg);}


/* 마일리지 버튼 */
.card_img_wrap { position: relative; z-index: 20;}
.card_img_wrap .card_img_link { position: absolute; left: 5%; width: 90%; padding-top: 8.5%;}
.card_img_wrap .card_img_link .ft_link { position: absolute; top: 0; height: 100%; width: 49%; border-radius: 100px;}
.card_img_wrap .card_img_link .ft_link:first-child { left: 0;}
.card_img_wrap .card_img_link .ft_link:last-child { right: 0;}