/* tile import start */ .tile{margin-inline-start:auto;margin-inline-end:auto;--sk-tile-box-shadow:initial;--sk-tile-background:rgb(255,255,255);--sk-tile-button-background:rgba(210,210,215,0.64);--sk-tile-button-background-hover:rgba(223,223,227,0.6976);--sk-tile-button-background-active:rgba(193,193,198,0.6544);--sk-tile-button-icon-color:rgba(0,0,0,0.56);--sk-tile-button-icon-color-hover:rgba(0,0,0,0.64);box-sizing:border-box;height:100%;position:relative;overflow:hidden;background:var(--sk-tile-background);box-shadow:var(--sk-tile-box-shadow)}.tile-content{--sk-tile-padding-large:var(--sk-tile-padding,60px 8.3333333333%);--sk-tile-padding-xlarge:var(--sk-tile-padding,var(--sk-tile-padding-large));--sk-tile-padding-medium:var(--sk-tile-padding,var(--sk-tile-padding-large));--sk-tile-padding-small:var(--sk-tile-padding,var(--sk-tile-padding-large));padding:var(--sk-tile-padding-large)}@media(min-width:1441px){.tile-content{padding:var(--sk-tile-padding-xlarge)}}@media(max-width:1068px){.tile-content{padding:var(--sk-tile-padding-medium)}}@media(max-width:734px){.tile-content{padding:var(--sk-tile-padding-small)}}.tile-button-wrapper{width:44px;height:44px;bottom:16px;cursor:pointer;display:flex;justify-content:center;align-items:center;position:absolute}@media(max-width:1068px){.tile-button-wrapper{bottom:13px}}html:not([dir=rtl]) .tile-button-wrapper{right:16px}@media(max-width:1068px){html:not([dir=rtl]) .tile-button-wrapper{right:13px}}html[dir=rtl] .tile-button-wrapper{left:16px}@media(max-width:1068px){html[dir=rtl] .tile-button-wrapper{left:13px}}.tile-button-wrapper:focus-visible{outline:none}.tile-button-wrapper:focus-visible .tile-button{outline:2px solid var(--sk-focus-color,#0071e3);outline-offset:var(--sk-focus-offset-container,3px)}.tile-button{width:36px;height:36px;border-radius:50%;display:flex;justify-content:center;align-items:center;position:relative;transition:background-color 100ms linear;background:var(--sk-tile-button-background);color:var(--sk-tile-button-icon-color)}.tile-button:hover{background:var(--sk-tile-button-background-hover);color:var(--sk-tile-button-icon-color-hover)}.tile-button:active{background:var(--sk-tile-button-background-active)}.tile-button-solid{--sk-tile-button-icon-color:rgba(0,0,0,0.56);--sk-tile-button-icon-color-hover:rgba(0,0,0,0.64);--sk-tile-button-background:rgb(232,232,237);--sk-tile-button-background-hover:#ececf0;--sk-tile-button-background-active:#dfdfe4}.tile-button-high-contrast{--sk-tile-button-icon-color:rgb(255,255,255);--sk-tile-button-icon-color-hover:rgb(255,255,255);--sk-tile-button-background:rgb(29,29,31);--sk-tile-button-background-hover:#272729;--sk-tile-button-background-active:#18181A}.tile-icon{fill:currentColor;position:absolute;inset-inline-start:50%;width:20px;height:20px}html:not([dir=rtl]) .tile-icon{transform:translateX(-50%)}html[dir=rtl] .tile-icon{transform:translateX(50%)}.tile-rounded{--sk-tile-border-radius-large:var(--sk-tile-border-radius,18px);--sk-tile-border-radius-xlarge:var(--sk-tile-border-radius,var(--sk-tile-border-radius-large));--sk-tile-border-radius-medium:var(--sk-tile-border-radius,var(--sk-tile-border-radius-large));--sk-tile-border-radius-small:var(--sk-tile-border-radius,var(--sk-tile-border-radius-large));border-radius:var(--sk-tile-border-radius-large)}@media(min-width:1441px){.tile-rounded{border-radius:var(--sk-tile-border-radius-xlarge)}}@media(max-width:1068px){.tile-rounded{border-radius:var(--sk-tile-border-radius-medium)}}@media(max-width:734px){.tile-rounded{border-radius:var(--sk-tile-border-radius-small)}}.tile-shadow{--sk-tile-box-shadow:8px 8px 16px 0 rgba(0,0,0,0.08)}.tile-dark{--sk-tile-background:rgb(0,0,0);--sk-tile-button-icon-color:rgba(255,255,255,0.8);--sk-tile-button-background:rgba(66,66,69,0.72);--sk-tile-button-icon-color-hover:rgb(255,255,255);--sk-tile-button-background-hover:rgba(73,73,76,0.7256);--sk-tile-button-background-active:rgba(57,57,60,0.7424)}.theme-dark .tile-button-solid,.tile-dark .tile-button-solid{--sk-tile-button-icon-color:rgba(255,255,255,0.8);--sk-tile-button-background:rgb(51,51,54);--sk-tile-button-icon-color-hover:rgb(255,255,255);--sk-tile-button-background-hover:#37373a;--sk-tile-button-background-active:#2f2f32}.theme-dark .tile-button-high-contrast,.tile-dark .tile-button-high-contrast{--sk-tile-button-icon-color:rgb(0,0,0);--sk-tile-button-icon-color-hover:rgb(0,0,0);--sk-tile-button-background:rgb(245,245,247);--sk-tile-button-background-hover:rgb(255,255,255);--sk-tile-button-background-active:#EDEDF2}.theme-light .tile.tile-dark{--sk-tile-background:rgb(0,0,0);--sk-tile-button-icon-color:rgba(255,255,255,0.8);--sk-tile-button-background:rgba(66,66,69,0.72);--sk-tile-button-icon-color-hover:rgb(255,255,255);--sk-tile-button-background-hover:rgba(73,73,76,0.7256);--sk-tile-button-background-active:rgba(57,57,60,0.7424)}.tile-light{--sk-tile-background:rgb(255,255,255);--sk-tile-button-icon-color:rgba(0,0,0,0.56);--sk-tile-button-background:rgba(210,210,215,0.64);--sk-tile-button-icon-color-hover:rgba(0,0,0,0.64);--sk-tile-button-background-hover:rgba(223,223,227,0.6976);--sk-tile-button-background-active:rgba(193,193,198,0.6544)}.tile-light .tile-button-high-contrast{--sk-tile-button-icon-color:rgb(255,255,255);--sk-tile-button-icon-color-hover:rgb(255,255,255);--sk-tile-button-background:rgb(29,29,31);--sk-tile-button-background-hover:#272729;--sk-tile-button-background-active:#18181A}.theme-dark .tile.tile-light{--sk-tile-background:rgb(255,255,255);--sk-tile-button-icon-color:rgba(0,0,0,0.56);--sk-tile-button-background:rgba(210,210,215,0.64);--sk-tile-button-icon-color-hover:rgba(0,0,0,0.64);--sk-tile-button-background-hover:rgba(223,223,227,0.6976);--sk-tile-button-background-active:rgba(193,193,198,0.6544)} /* tile import end */ /* anim lazy load image snippets */ html.js [data-anim-lazy-image], html.js [data-anim-lazy-image] * { background-image: none !important; -webkit-mask-image: none !important; mask-image: none !important; } /* style variable */ :root { --apply-pay-blue: #0079FF; --key-color-1: #00CCFF; --key-color-2: #5BFFA5; --white: #FFFFFF; --light-grey: #F2F2F6; } /* Hero Screen animation start */ .section-hero.is-enhanced .hero-device-container { --f-width: 371px; --f-height: 768px; } @media only screen and (max-width: 1068px) { .section-hero.is-enhanced .hero-device-container { --f-width: 334px; --f-height: 692px; } } @media only screen and (max-width: 734px) { .section-hero.is-enhanced .hero-device-container { --f-width: 249px; --f-height: 516px; } } #overview-hero-iphone-background-1 { width: var(--f-width); height: var(--f-height); pointer-events: none; background-color: transparent; } .hero-device-container * { font-size: 0; will-change: transform; transform: translate3d(0, 0, 0); } .section-hero.is-enhanced .hero-device-container .hero-device-content { width: calc(var(--f-width) - 6px); height: var(--f-height); left: 50%; top: 0; bottom: unset; right: unset; transform: translateX(-50%); display: flex; justify-content: center; } .section-hero .hero-device-content .hero-device-screen { width: var(--f-width); height: var(--f-height); display: flex; justify-content: center; align-items: center; } .section-hero .hero-device-content .hero-device-screen figure.hero-device-screen-animation { --spa-width: 23744px; --spa-height: 768px; width: var(--f-width); height: var(--f-height); background-size: var(--spa-width) var(--spa-height); background-image:url(/kr/apple-pay/transit/images/overview/hero/iphone_background__cszqrz7ofdsi_large.jpg); background-repeat: no-repeat; outline: none; border: none; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) { .section-hero .hero-device-content .hero-device-screen figure.hero-device-screen-animation { background-image:url(/kr/apple-pay/transit/images/overview/hero/iphone_background__cszqrz7ofdsi_large_2x.jpg); } } @media only screen and (max-width: 1068px) { .section-hero .hero-device-content .hero-device-screen figure.hero-device-screen-animation { --spa-width: 21376px; --spa-height: 692px; background-image:url(/kr/apple-pay/transit/images/overview/hero/iphone_background__cszqrz7ofdsi_medium.jpg) } } @media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) { .section-hero .hero-device-content .hero-device-screen figure.hero-device-screen-animation { background-image:url(/kr/apple-pay/transit/images/overview/hero/iphone_background__cszqrz7ofdsi_medium_2x.jpg) } } @media only screen and (max-width: 734px) { .section-hero .hero-device-content .hero-device-screen figure.hero-device-screen-animation { --spa-width: 15936px; --spa-height: 516px; background-image:url(/kr/apple-pay/transit/images/overview/hero/iphone_background__cszqrz7ofdsi_small.jpg) } } @media only screen and (max-width: 734px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px) and (min-resolution: 1.5dppx), only screen and (max-width: 734px) and (min-resolution: 144dpi) { .section-hero .hero-device-content .hero-device-screen figure.hero-device-screen-animation { background-image:url(/kr/apple-pay/transit/images/overview/hero/iphone_background__cszqrz7ofdsi_small_2x.jpg) } } @keyframes hero-device-screen-animation { from { background-position: 0px 0; } to { background-position: calc(0px - var(--spa-width) + var(--f-width)) 0; } } .section-hero .hero-device-content .hero-device-screen.active figure.hero-device-screen-animation { animation: hero-device-screen-animation 2300ms steps(63) forwards; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) { .section-hero.hero-1x-anim .hero-device-content .hero-device-screen figure.hero-device-screen-animation { background-image:url(/kr/apple-pay/transit/images/overview/hero/iphone_background__cszqrz7ofdsi_large.jpg); } } @media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) { .section-hero.hero-1x-anim .hero-device-content .hero-device-screen figure.hero-device-screen-animation { background-image:url(/kr/apple-pay/transit/images/overview/hero/iphone_background__cszqrz7ofdsi_medium.jpg) } } @media only screen and (max-width: 734px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px) and (min-resolution: 1.5dppx), only screen and (max-width: 734px) and (min-resolution: 144dpi) { .section-hero.hero-1x-anim .hero-device-content .hero-device-screen figure.hero-device-screen-animation { background-image:url(/kr/apple-pay/transit/images/overview/hero/iphone_background__cszqrz7ofdsi_small.jpg) } } /* Hero Screen animation end */ /* Hero blue start */ .section-hero { background-color: var(--apply-pay-blue); } .section-hero.is-enhanced .hero-express-container .hero-rings circle { fill: var(--apply-pay-blue); } /* Hero blue end */ /* Hero ding text start */ @media only screen and (max-width: 400px) { .section-hero .hero-ding-container .hero-ding { font-size: max(125px, 35vw); } } /* Hero ding text end */ /* icon alignment start */ .icon-wrapper .icon, .icon-wrapper .icon-after:after, .icon-wrapper .icon-before:before, .icon-wrapper .more:not(.icon-before):after { position: relative; top: -0.04em; } /* icon alignment end */ /* ko-kr line-height start */ .typography-set-up-steps:lang(ko) { line-height: 1.28333333337; } .grid-item.overseas .typography-headline+.typography-intro { line-height: 1.15; } .typography-router-copy:lang(ko) { line-height: 1.28333333337; } @media only screen and (max-width: 1068px) { .typography-set-up-steps:lang(ko) { line-height: 1.30952380955; } } @media only screen and (max-width: 734px) { .typography-set-up-steps:lang(ko) { line-height: 1.44736842107; } .typography-router-copy:lang(ko) { line-height: 1.30952380955; } } /* fallback */ .typography-set-up-headline:lang(ko) { line-height: 1.27743035486; } @media only screen and (max-width: 1068px) { .typography-set-up-headline:lang(ko) { line-height: 1.25714285719; } } /* ko-kr line-height end */ /* set up toggle buttons start */ html[dir=rtl] .section-set-up .steps-buttons-container .toggle-wrap { right: 50%; } .section-set-up .steps-buttons-container .toggle-wrap:before { transition:transform .75s cubic-bezier(0.69, 0, 0.26, 1), width .75s cubic-bezier(0.69, 0, 0.26, 1); } .section-set-up .steps-buttons-container .toggle-wrap .toggle-button.selected { color:#fff } .section-set-up .steps-buttons-container .toggle-wrap { position: relative; background-color: var(--white); display: inline-block; z-index: 1; width: -moz-fit-content; width:fit-content } .section-set-up .steps-buttons-container .toggle-wrap, .section-set-up .steps-buttons-container .toggle-wrap:before { border-radius: 10em; } .section-set-up .steps-buttons-container .toggle-wrap:before { --bubble-padding: 6px; content: ""; top: var(--bubble-padding); left: var(--bubble-padding); position: absolute; background-color: var(--apply-pay-blue); height: calc(100% - var(--bubble-padding) * 2); width: calc(var(--toggle-width) - var(--bubble-padding) * 2); transform: translateX(var(--toggle-position)); } @media (max-width: 734px) { .section-set-up .steps-buttons-container .toggle-wrap:before { --bubble-padding:4px } } .section-set-up .steps-buttons-container .toggle-wrap .toggle-button { position: relative; padding: 25px 35px; outline: none; transition:color .75s cubic-bezier(0.69, 0, 0.26, 1); min-width: 80px; text-align: center; font-weight: 600; } @media (max-width: 734px) { .section-set-up .steps-buttons-container .toggle-wrap .toggle-button { padding:13px 20px } } .section-set-up .steps-buttons-container .toggle-wrap .toggle-button[data-focus-method=key]:focus { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: var(--sk-focus-offset, 1px); border-radius:10em } .section-set-up .steps-buttons-container .toggle-wrap .toggle-button.selected { pointer-events:none } /* set up toggle buttons end */ /* set up steps start */ .section-set-up { padding: 200px 0; } @media only screen and (max-width: 734px) { .section-set-up { padding: 100px 0; } } .section-set-up .steps-headline-typography { font-size: 80px; } @media only screen and (max-width: 1068px) { .section-set-up .steps-headline-typography { font-size: 64px; } } @media only screen and (max-width: 734px) { .section-set-up .steps-headline-typography { font-size: 48px; } } .section-set-up .section-content .steps-container .steps-content { position: relative; min-height: 658px; transition: opacity .75s cubic-bezier(0.69, 0, 0.26, 1); display: flex; flex-direction: column; justify-content: center; width: 100%; background-color: #f5f5f7; } @media only screen and (max-width: 1068px) { .section-set-up .section-content .steps-container .steps-content { min-height: 568px; } } @media only screen and (max-width: 734px) { .section-set-up .section-content .steps-container .steps-content { min-height: auto; } } .section-set-up .section-content .steps-toggle-buttons[data-toggle=toggle-0]+.steps-container .steps-content.steps-iphone { opacity: 1; z-index: 1; pointer-events: auto; position: relative; left: unset; top: unset; } .section-set-up .section-content .steps-toggle-buttons[data-toggle=toggle-0]+.steps-container .steps-content.steps-apple-watch { opacity: 0; z-index: 0; pointer-events: none; position: absolute; left: 0; top: 0; } .section-set-up .section-content .steps-toggle-buttons[data-toggle=toggle-1]+.steps-container .steps-content.steps-iphone { opacity: 0; z-index: 0; pointer-events: none; position: absolute; left: 0; top: 0; } .section-set-up .section-content .steps-toggle-buttons[data-toggle=toggle-1]+.steps-container .steps-content.steps-apple-watch { opacity: 1; z-index: 1; pointer-events: auto; position: relative; left: unset; top: unset; } .section-set-up .section-content .steps-buttons-container { padding: 50px 0; display: flex; justify-content: center; align-items: center; } .section-set-up .section-content .steps-container .steps-main-title { display: none; } .section-set-up .section-content .steps-container .setup-image { text-align: center; position: absolute; margin-left: 49px; opacity: 1; top:0; } @media only screen and (max-width: 1068px) { .section-set-up .section-content .steps-container .setup-image { margin-top: 0px; margin-left:29px } } @media only screen and (max-width: 734px) { .section-set-up .section-content .steps-container .setup-image { position: relative; top: 0; transform: none; display: block; margin: 0; height: auto; } } .section-set-up .section-content .steps-container .setup-steps { background: #fff; padding: 36px 40px; margin-top: 0; margin-bottom: 20px; border-radius: 9px; } .section-set-up .section-content .steps-container .setup-steps h3 { color: #0074ff; margin-bottom:7px } .section-set-up .section-content .steps-container .setup-steps p { margin-top:0 } @media only screen and (max-width: 1068px) { .section-set-up .section-content .steps-container .setup-steps { padding:26px 31px } } @media only screen and (max-width: 734px) { .section-set-up .section-content .steps-container .setup-steps { margin: 62px auto 0; padding: 18px 24px; width:auto } } .section-set-up.is-base .sticky-content { padding-top: 163px; padding-bottom:163px } @media only screen and (max-width: 1068px) { .section-set-up.is-base .sticky-content { padding-top: 182px; padding-bottom:182px } } @media only screen and (max-width: 734px) { .section-set-up.is-base .sticky-content { padding-top: 108px; padding-bottom: 68px; max-width: 382px; margin:0 auto } } .section-set-up.is-base .steps-container { position:relative } @media only screen and (max-width: 734px) { .section-set-up.is-base .steps-container { top:10% } } @media only screen and (max-width: 734px) { .section-set-up.is-base .steps-container .setup-steps { margin:22px auto 0 } } @media only screen and (max-width: 1068px) { .section-set-up.is-base .steps-container .setup-image { top:0 } } .section-set-up.is-base .steps-container .setup-image-base { opacity:1 } @media only screen and (max-width: 734px) { .section-set-up.is-base .steps-container .setup-image-base { height:auto } } .section-set-up.is-enhanced .section-content { position: relative; height: 405vh; padding-top: calc(529px - 50vh); padding-bottom:calc(529px - 50vh) } @media only screen and (max-width: 1068px) { .section-set-up.is-enhanced .section-content { padding-top: calc(434px - 50vh); padding-bottom:calc(434px - 50vh) } } @media only screen and (max-width: 734px) { .section-set-up.is-enhanced .section-content { padding-top: 0; padding-bottom:0 } } .section-set-up.is-enhanced .section-content .sticky-content { position: sticky; top: 0px; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction:column } .section-set-up.is-enhanced .section-content .steps-container { min-height: 658px; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width:100% } @media only screen and (max-width: 1068px) { .section-set-up.is-enhanced .section-content .steps-container { min-height:568px } } @media only screen and (max-width: 734px) { .section-set-up.is-enhanced .section-content .steps-container { min-height: 373px; min-height:534px } } @media only screen and (max-width: 734px) { .section-set-up.is-enhanced .section-content .step-container { position: absolute; top: 0%; max-width:382px } } .section-set-up.is-enhanced .section-content .step-container .setup-steps { opacity: .25; transition:opacity .2s linear } @media only screen and (max-width: 734px) { .section-set-up.is-enhanced .section-content .step-container .setup-steps { opacity:0 } } .section-set-up.is-enhanced .section-content .step-container .setup-image { top: 50.5%; transform: translateY(-50%); transition:opacity .2s linear } @media only screen and (max-width: 1068px) { .section-set-up.is-enhanced .section-content .step-container .setup-image { top:51% } } .section-set-up.is-enhanced .section-content .step-container .setup-image-base { display:none } .section-set-up.is-enhanced .section-content #setup-first-step .setup-image { z-index: 1; opacity:1 } .section-set-up.is-enhanced .section-content #setup-step3 .setup-steps { margin-bottom:0 } /* set up steps end */ /* section bentos start */ .tile-rounded { border-radius: 25px; } .grid-item.have-backcard .typography-headline{ padding-bottom: 32px; } @media only screen and (max-width: 1068px) { .grid-item.have-backcard .typography-headline { padding-block: 20px 0; } } @media only screen and (max-width: 734px) { .grid-item.have-backcard .typography-headline { padding-block: 0 20px; } } /* transit card */ .grid-item.transit{ position: relative; } .grid-item.transit .tile{ background-color: var(--white); } .grid-item.transit .typography-headline{ position: relative; color: #fff; z-index: 1; } .grid-item.transit .inline-media-outer-container{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } .grid-item.transit .inline-media-container{ width: 100%; height: 100%; position: relative; } .inline-media-container .start-frame, .grid-item.transit .inline-media-container .end-frame, .grid-item.transit .inline-media-container video{ width: 100%; object-fit: contain; object-position: center; background-position: 50%; } .grid-item.transit .inline-media-container video{ position: absolute; display: block; top: 50%; left: 0; transform: translateY(-50%); min-height: 846px; aspect-ratio: 9/ 16; } @media only screen and (max-width: 1068px) { .grid-item.transit .inline-media-container video{ min-height: 594px; } } @media only screen and (max-width: 734px) { .grid-item.transit .inline-media-container video{ min-height: unset; top: 0; transform: none; } } .inline-media-container .start-frame, .inline-media-container .end-frame { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; pointer-events: none; } .inline-media-container:not(.loading-error):not(.loading-disabled) .start-frame { opacity: 1; pointer-events: all; } .inline-media-container.playing:not(.loading-error):not(.loading-disabled) .start-frame { opacity: 0; pointer-events: none; } .inline-media-container.ended .end-frame { opacity: 1; pointer-events: all; } /* small viewport fix */ @media only screen and (max-width: 734px) { .section-bentos .grid .grid-item.transit .tile-content { padding: 0; } .section-bentos .grid .grid-item.transit .inline-media-outer-container, .section-bentos .grid .grid-item.transit .inline-media-container video { position: relative; } } .grid-item.transit .inline-media-container .end-frame { background-repeat: no-repeat; background-color: var(--white); background-image:url(/kr/apple-pay/transit/images/overview/bentos/howtoride_fallback__dyqi4ry9ajsm_large.jpg) } @media (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) { .grid-item.transit .inline-media-container .end-frame { background-image:url(/kr/apple-pay/transit/images/overview/bentos/howtoride_fallback__dyqi4ry9ajsm_large_2x.jpg) } } @media only screen and (max-width: 1068px) { .grid-item.transit .inline-media-container .end-frame { background-repeat: no-repeat; background-image:url(/kr/apple-pay/transit/images/overview/bentos/howtoride_fallback__dyqi4ry9ajsm_medium.jpg) } } @media only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) { .grid-item.transit .inline-media-container .end-frame { background-image:url(/kr/apple-pay/transit/images/overview/bentos/howtoride_fallback__dyqi4ry9ajsm_medium_2x.jpg) } } @media only screen and (max-width: 734px) { .grid-item.transit .inline-media-container .end-frame { background-repeat: no-repeat; background-image:url(/kr/apple-pay/transit/images/overview/bentos/howtoride_fallback__dyqi4ry9ajsm_small.jpg) } } @media only screen and (max-width: 734px) and (min-resolution: 1.5dppx), only screen and (max-width: 734px) and (min-resolution: 144dpi) { .grid-item.transit .inline-media-container .end-frame { background-image:url(/kr/apple-pay/transit/images/overview/bentos/howtoride_fallback__dyqi4ry9ajsm_small_2x.jpg) } } .grid-item.transit .inline-media-container .start-frame { background-repeat: no-repeat; background-color: var(--white); background-image:url(/kr/apple-pay/transit/images/overview/bentos/howtoride_fallback__dyqi4ry9ajsm_large.jpg) } @media (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) { .grid-item.transit .inline-media-container .start-frame { background-image:url(/kr/apple-pay/transit/images/overview/bentos/howtoride_fallback__dyqi4ry9ajsm_large_2x.jpg) } } @media only screen and (max-width: 1068px) { .grid-item.transit .inline-media-container .start-frame { background-repeat: no-repeat; background-image:url(/kr/apple-pay/transit/images/overview/bentos/howtoride_fallback__dyqi4ry9ajsm_medium.jpg) } } @media only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) { .grid-item.transit .inline-media-container .start-frame { background-image:url(/kr/apple-pay/transit/images/overview/bentos/howtoride_fallback__dyqi4ry9ajsm_medium_2x.jpg) } } @media only screen and (max-width: 734px) { .grid-item.transit .inline-media-container .start-frame { background-repeat: no-repeat; background-image:url(/kr/apple-pay/transit/images/overview/bentos/howtoride_fallback__dyqi4ry9ajsm_small.jpg) } } @media only screen and (max-width: 734px) and (min-resolution: 1.5dppx), only screen and (max-width: 734px) and (min-resolution: 144dpi) { .grid-item.transit .inline-media-container .start-frame { background-image:url(/kr/apple-pay/transit/images/overview/bentos/howtoride_fallback__dyqi4ry9ajsm_small_2x.jpg) } } .inline-media-container .inline-media-ui{ display: flex; position: absolute; width: 100%; height: 100%; justify-content: flex-end; top: 0; } .inline-media-container .play-pause-button{ position: relative; display: flex; justify-self: flex-end; align-self: flex-end; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; margin: 0; border: none; background-color: transparent; background-repeat: no-repeat; opacity: 1; transition: opacity 100ms linear,transform .2s ease; cursor: pointer; pointer-events: all; } .inline-media-container .play-pause-button::before { content: ""; width: 36px; height: 36px; border-radius: 50%; background-color: rgb(39, 39, 41); position: absolute; } .inline-media-container .play-pause-button::after{ content: ""; -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0ibTE0IDIyLjU4Njh2LTkuMTY3NWMwLS45MzQyLjU2MzEtMS40MjQ4IDEuMjYwOS0xLjQyNDguMzg0OSAwIC42MjY2LjA2NDMuOTY2LjI3MjhsNy40NjgzIDQuNDAyM2MuNjYxNy4zOTAzIDEuMDE5MS43MDc3IDEuMDE5MSAxLjMyNDUgMCAuNjE3Ni0uMzU3NC45MzUtMS4wMTkxIDEuMzI1M2wtNy40NjgzIDQuNDAyM2MtLjMzOTQuMjA4NC0uNTgxMS4yNzI4LS45NjYuMjcyOC0uNjk3NyAwLTEuMjYwOS0uNDcyNy0xLjI2MDktMS40MDc3Ii8+PC9zdmc+"); mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0ibTE0IDIyLjU4Njh2LTkuMTY3NWMwLS45MzQyLjU2MzEtMS40MjQ4IDEuMjYwOS0xLjQyNDguMzg0OSAwIC42MjY2LjA2NDMuOTY2LjI3MjhsNy40NjgzIDQuNDAyM2MuNjYxNy4zOTAzIDEuMDE5MS43MDc3IDEuMDE5MSAxLjMyNDUgMCAuNjE3Ni0uMzU3NC45MzUtMS4wMTkxIDEuMzI1M2wtNy40NjgzIDQuNDAyM2MtLjMzOTQuMjA4NC0uNTgxMS4yNzI4LS45NjYuMjcyOC0uNjk3NyAwLTEuMjYwOS0uNDcyNy0xLjI2MDktMS40MDc3Ii8+PC9zdmc+"); -webkit-mask-size: cover; mask-size: cover; display: inline-block; width: 36px; height: 36px; position: absolute; background-color: rgb(255, 255, 255); z-index: 1; } .inline-media-container .play-pause-button::before, .inline-media-container .play-pause-button::after { right: 20px; bottom: 20px; } @media only screen and (max-width: 1068px) { .inline-media-container .play-pause-button::before, .inline-media-container .play-pause-button::after { right: 17px; bottom: 17px; } } .inline-media-container.loaded.playing .play-pause-button::after{ -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0ibTIzLjUgMTIuODkyOHYxMC4yMTQzYzAgLjc2ODktLjU5NzQgMS4zOTI5LTEuMzMzNCAxLjM5MjloLTEuMzMzM2MtLjczNiAwLTEuMzMzNC0uNjI0LTEuMzMzNC0xLjM5Mjl2LTEwLjIxNDNjMC0uNzY4OS41OTc0LTEuMzkyOCAxLjMzMzQtMS4zOTI4aDEuMzMzM2MuNzM2IDAgMS4zMzM0LjYyNCAxLjMzMzQgMS4zOTI4em0tOC4zMzM0LTEuMzkyOGgtMS4zMzMzYy0uNzM2IDAtMS4zMzM0LjYyNC0xLjMzMzQgMS4zOTI4djEwLjIxNDNjMCAuNzY4OS41OTc0IDEuMzkyOSAxLjMzMzQgMS4zOTI5aDEuMzMzM2MuNzM2IDAgMS4zMzM0LS42MjQgMS4zMzM0LTEuMzkyOXYtMTAuMjE0M2MwLS43Njg5LS41OTc0LTEuMzkyOC0xLjMzMzQtMS4zOTI4eiIvPjwvc3ZnPg=="); mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0ibTIzLjUgMTIuODkyOHYxMC4yMTQzYzAgLjc2ODktLjU5NzQgMS4zOTI5LTEuMzMzNCAxLjM5MjloLTEuMzMzM2MtLjczNiAwLTEuMzMzNC0uNjI0LTEuMzMzNC0xLjM5Mjl2LTEwLjIxNDNjMC0uNzY4OS41OTc0LTEuMzkyOCAxLjMzMzQtMS4zOTI4aDEuMzMzM2MuNzM2IDAgMS4zMzM0LjYyNCAxLjMzMzQgMS4zOTI4em0tOC4zMzM0LTEuMzkyOGgtMS4zMzMzYy0uNzM2IDAtMS4zMzM0LjYyNC0xLjMzMzQgMS4zOTI4djEwLjIxNDNjMCAuNzY4OS41OTc0IDEuMzkyOSAxLjMzMzQgMS4zOTI5aDEuMzMzM2MuNzM2IDAgMS4zMzM0LS42MjQgMS4zMzM0LTEuMzkyOXYtMTAuMjE0M2MwLS43Njg5LS41OTc0LTEuMzkyOC0xLjMzMzQtMS4zOTI4eiIvPjwvc3ZnPg=="); } .inline-media-container.loaded.ended .play-pause-button::after { -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTIzLjUgMTYuNUExLjUgMS41IDAgMDAyMiAxOGMwIDIuMjA2LTEuNzk0IDQtNCA0cy00LTEuNzk0LTQtNGMwLTEuOTkgMS40NjQtMy42MyAzLjM2OS0zLjkzNmwtLjM3Ni4zNzVhMS41IDEuNSAwIDEwMi4xMjEgMi4xMjJsMi45MjktMi45M2ExLjUgMS41IDAgMDAwLTIuMTJsLTMuMDcxLTMuMDcyYTEuNSAxLjUgMCAxMC0yLjEyMSAyLjEyMmwuNDczLjQ3M0MxMy43OCAxMS4zNzUgMTEgMTQuMzY4IDExIDE4YzAgMy44NiAzLjE0IDcgNyA3czctMy4xNCA3LTdhMS41IDEuNSAwIDAwLTEuNS0xLjV6Ii8+PC9zdmc+"); mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTIzLjUgMTYuNUExLjUgMS41IDAgMDAyMiAxOGMwIDIuMjA2LTEuNzk0IDQtNCA0cy00LTEuNzk0LTQtNGMwLTEuOTkgMS40NjQtMy42MyAzLjM2OS0zLjkzNmwtLjM3Ni4zNzVhMS41IDEuNSAwIDEwMi4xMjEgMi4xMjJsMi45MjktMi45M2ExLjUgMS41IDAgMDAwLTIuMTJsLTMuMDcxLTMuMDcyYTEuNSAxLjUgMCAxMC0yLjEyMSAyLjEyMmwuNDczLjQ3M0MxMy43OCAxMS4zNzUgMTEgMTQuMzY4IDExIDE4YzAgMy44NiAzLjE0IDcgNyA3czctMy4xNCA3LTdhMS41IDEuNSAwIDAwLTEuNS0xLjV6Ii8+PC9zdmc+") } /* top-up card */ .grid-item.top-up .tile { transition: background-color .66s cubic-bezier(0.66,0,0.01,1); } .grid-item.top-up .feature-image{ display: flex; justify-content: center; } @media only screen and (max-width: 734px) { .grid-item.top-up .feature-image { padding-block-end: 7px; } } .grid-top-up-image { width: auto; height: auto; } @media only screen and (min-width: 1069px) { .grid-top-up-image { padding-block-end: 10px; } } @media only screen and (min-width: 735px) and (max-width: 1068px) { .grid-top-up-image { padding-block: 20px 24px; } } .grid-top-up-image img{ width: 100%; height: 100%; } .grid-item.top-up .tile-overlay-content { background-color: var(--key-color-1); } .grid-item.top-up .tile:has(.tile-overlay-toggle:checked) { background-color: var(--key-color-1); } @media only screen and (min-width: 1069px) { .grid-item.top-up .tile-content { padding: 70px 40px; } } @media only screen and (min-width: 735px) and (max-width: 1068px) { .grid-item.top-up .tile-content { padding-block: 35.5px; } } /* power card */ .section-bentos .bento-power { justify-content: center; } @media only screen and (min-width: 735px) and (max-width: 1068px) { .section-bentos .bento-power { min-height: 583px; } } .section-bentos .bento-power .bento-feature-container { padding-block-start: 0; padding-top: 0; } @media only screen and (min-width: 735px) and (max-width: 1068px) { .section-bentos .bento-power .bento-feature-container { padding-inline: 30px; } } /* overseas card */ .grid-item.overseas .typography-headline+.typography-intro{ margin-top: unset; font-size: 42px; font-weight: 500; } @media only screen and (max-width:1068px){ .grid-item.overseas .typography-headline+.typography-intro{ padding-block-start: 35px; font-size: 36px; } } @media only screen and (max-width: 734px) { .grid-item.overseas .typography-headline+.typography-intro { padding-block-start: 14px; } } .grid-item.overseas .tile { background-color: #000; transition: background-color 2s cubic-bezier(0.66,0,0.01,1); } @media only screen and (min-width: 735px) and (max-width: 1068px) { .grid-item.overseas .tile-content { padding: 30px; } } @media only screen and (min-width: 1069px) { .grid-item.overseas .tile-content { padding-inline: 50px; } } @media only screen and (max-width: 734px) { .grid-item.overseas .tile-content { padding-inline: 40px; } } .grid-item.overseas .tile-overlay-content { background-color: var(--key-color-2); } .grid-item.overseas .tile:has(.tile-overlay-toggle:checked) { background-color: var(--key-color-2); transition: background-color .66s cubic-bezier(0.66,0,0.01,1); } .grid-item.overseas .tile .tile-content h2.typography-headline { color: #fff; } .grid-item.overseas .tile-overlay-headline, .grid-item.overseas .tile-overlay-copy { color: #000; } .grid-item.overseas .tile-button-wrapper .tile-button { background: #fff; color: rgb(39, 39, 41); } .grid-item.overseas .tile-overlay-toggle:checked~.tile-overlay .tile-button-wrapper .tile-button { background: rgb(39, 39, 41); color: #fff; } .key-color-1 { color: var(--key-color-1); } .key-color-2 { color: var(--key-color-2); } /* tile-overlay */ .section-bentos .bento-journeys{ overflow: hidden; } .tile-overlay-toggle{ display: none; } .tile-overlay-content{ box-sizing: border-box; display: flex; flex-direction: column; background-color: #0074ff; flex: 1; position: absolute; width: 100%; height: 100%; padding: 30px; top: 0; left: 0; opacity: 0; visibility: hidden; transition: opacity .66s cubic-bezier(0.66,0,0.01,1) .66s,visibility 0s linear 1.32s; } .tile-overlay-body{ display: flex; flex-direction: column; justify-content: center; flex: 1; height: 100%; } @media only screen and (max-width:1068px){ .tile-overlay-body{ overflow-y: auto; height: 100%; display: flex; } .tile-overlay-body::-webkit-scrollbar{ display: none; } } .tile-overlay-header{ opacity: 0; transition: all .66s cubic-bezier(0.66,0,0.2,1); } .tile-overlay-copy{ opacity: 0; transform: translateY(-20px); transition: all .66s cubic-bezier(0.66,0,0.2,1); } .tile-overlay-headline{ font-size: 21px; letter-spacing: .011em; color: #fff; } .tile-overlay-copy{ font-size: 19px; font-weight: 600; letter-spacing: .012em; color: #fff; } .tile-button-wrapper{ z-index: 3; opacity: .92; transition: transform .66s cubic-bezier(0.66,0,0.2,1),opacity 100ms linear; } .tile-button-wrapper .tile-button{ background: rgb(39, 39, 41); color: rgb(255, 255, 255); transition: all .66s cubic-bezier(0.66,0,0.2,1); } .tile-icon-alt{ fill: currentColor; width: 50%; height: 50%; position: absolute; left: 50%; transform: translateX(-50%); } .tile-overlay-toggle:checked~.tile-overlay .tile-overlay-content{ opacity: 1; visibility: visible; transition-delay: 0s; } .tile-overlay-toggle:checked~.tile-overlay .bento-feature-container{ visibility: hidden; transition: visibility 0s linear .66s; } .tile-overlay-toggle:checked~.tile-overlay .tile-overlay-header{ opacity: 1; transition-delay: .66s; } .tile-overlay-toggle:checked~.tile-overlay .tile-overlay-copy{ opacity: 1; transform: translateY(0); transition-delay: .66s; } .tile-overlay-toggle:checked~.tile-overlay .tile-button-wrapper{ transform: rotate(45deg); transition-delay: 0s; } .tile-overlay-toggle:checked~.tile-overlay .tile-button-wrapper .tile-button{ background: rgb(255, 255, 255); color: rgb(39, 39, 41); } .tile-overlay-toggle:checked~.tile-button-cover { display: none; } .tile-button-cover { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .tile-button-cover:hover { cursor: pointer; } /* section bentos end */ /* additional fixes start */ br.br-360 { display: block; } @media only screen and (max-width: 360px) { br.br-360 { display: none; } } br.br-500 { display: block; } @media only screen and (max-width: 500px) { br.br-500 { display: none; } } @media only screen and (max-width: 734px) { .section-hero .hero-body .column { max-width: initial; } } @media only screen and (max-width: 414px) { .section-hero .hero-body .column { max-width: 325px; } } .typography-hero-ding, .typography-hero-body-headline { font-weight: 600; } .typography-hero-ding { font-size: 350px; } @media only screen and (max-width: 1068px) { .typography-hero-ding { font-size: 250px; } } @media only screen and (max-width: 734px) { .typography-hero-ding { font-size: 150px; } } .section.section-wallet.section-router .typography-router-copy.router-cta { position: relative; } @media only screen and (min-width: 1069px) { .section-hero.is-enhanced .hero-express-container .hero-headline { margin: -60px auto 3px; } } .section-hero.is-enhanced .hero-device-container { margin-top: -61px; } @media only screen and (max-width: 1068px) { .section-hero.is-enhanced .hero-device-container { } } @media only screen and (max-width: 734px) { .section-hero.is-enhanced .hero-device-container { margin-top: 16px; } } @media only screen and (max-width: 1068px) { .section-hero.is-enhanced .hero-express-container .hero-headline { max-width: unset; margin-bottom: 0; } } @media only screen and (min-width: 735px) and (max-width: 900px) { .section-hero.is-enhanced .hero-express-container .hero-headline img { width: 89.048%; } } @media only screen and (max-width: 500px) { .section-hero.is-enhanced .hero-express-container .hero-headline img { width: 89.048%; } } .accordion-button:focus:after { outline: none; } .tile-button-wrapper:focus .tile-button[data-focus-method=mouse]:not(input):not(textarea):not(select), .tile-button-wrapper:focus .tile-button[data-focus-method=touch]:not(input):not(textarea):not(select), .tile-button-wrapper:focus[data-focus-method=mouse]:not(input):not(textarea):not(select) .tile-button, .tile-button-wrapper:focus[data-focus-method=touch]:not(input):not(textarea):not(select) .tile-button { box-shadow: none; } .tile-overlay-toggle:checked~.tile-overlay .tile-button-wrapper:focus .tile-button { box-shadow: none; outline: none; } /* additional fixes end */ /* no-js start */ /* set up headline */ html.no-js .section-set-up .steps-headline-container { padding-bottom: 100px; } /* set up toggle button */ html.no-js .section-set-up .steps-buttons-container { display: none; } /* set up steps main title */ html.no-js .section-set-up .section-content .steps-container .steps-main-title { display: block; margin-bottom: 60px; width: 370px; position:relative } @media only screen and (max-width: 1068px) { html.no-js .section-set-up .section-content .steps-container .steps-main-title { margin-top: 0; margin-bottom: 40px; width:100% } } @media only screen and (max-width: 734px) { html.no-js .section-set-up .section-content .steps-container .steps-main-title { margin: 0 0 40px; opacity: 1; text-align:center } } /* set up apple watch steps */ html.no-js .section-set-up .section-content .steps-container .steps-content.steps-apple-watch { position: relative; margin-top: 200px; } @media only screen and (max-width: 734px) { html.no-js .section-set-up .section-content .steps-container .steps-content.steps-apple-watch { margin-top: 100px; } } html.no-js video[data-inline-media] { display: none; } html.no-js .inline-media-ui { display: none; } /* bentos tile video */ html.no-js .inline-media-container .static-frame { opacity: 1; } /* no-js end */ /* new tile video start */ [playing] #tileVideo1, [paused] #tileVideo1 { z-index: 999; } [playing] #tileVideo1::-webkit-media-controls-panel, [paused] #tileVideo1::-webkit-media-controls-panel { visibility: visible; z-index: 99999999; } video::-webkit-media-controls-panel { z-index: -99999999; visibility: hidden; } .play-button { height: 36px; width: 36px; line-height: 1.2em; border-radius: 100%; border: none; font-size: 7em; background-color: rgb(255 255 255 / 79%); color: black; display: block; position: absolute; cursor: pointer; opacity: 0.8; transition: opacity 0.1s; -webkit-transition: opacity 0.1s; outline: none; right: 24px; bottom: 24px; pointer-events: none; } @media only screen and (max-width: 1068px) { .play-button { right: 21px; bottom: 21px; } } .play-button:hover { opacity: 1; } .icon-placeholder { font-size: 1em; line-height: 1.2em; } .icon-placeholder::before { display: block; position: absolute; content: ""; bottom: 50%; left: 50%; width: 0; height: 0; border: 15px solid transparent; border-width: 8px 0px 8px 13px; border-radius: 0; border-left-color: rgb(39, 39, 41); transform: translate(-5px, 50%); } .controls { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; width: 100%; height: 100%; } [playing].inline-media-container .inline-media-thumbnail, [paused].inline-media-container .inline-media-thumbnail, [playing] .play-button, [paused] .play-button { display: none; } .inline-media-container .inline-media-thumbnail { width: 100%; height: 100%; background-color: var(--apply-pay-blue); position: absolute; left: 0; top: 0; } .inline-media-container .inline-media-thumbnail h2 { padding: 70px 50px; } @media only screen and (min-width: 735px) and (max-width: 1068px) { .inline-media-container .inline-media-thumbnail h2 { padding: 60px 30px; } } @media only screen and (max-width: 734px) { .inline-media-container .inline-media-thumbnail h2 { padding: 60px 40px; } } .inline-media-container .inline-media-thumbnail h2 em { color: #000; } /* new tile video end */ /* dark theme color fix start */ .theme-dark .section-set-up, .theme-dark .section-set-up h1, .theme-dark .section-set-up h2, .theme-dark .section-set-up h3, .theme-dark .section-set-up h4, .theme-dark .section-set-up h5, .theme-dark .section-set-up h6, .theme-dark .section-bentos, .theme-dark .section-bentos h1, .theme-dark .section-bentos h2, .theme-dark .section-faqs, .theme-dark .section-faqs h1, .theme-dark .section-faqs h2, .theme-dark .section-faqs h3, .theme-dark .section-faqs h4, .theme-dark .section-faqs h5, .theme-dark .section-faqs h6, .theme-dark .section-wallet, .theme-dark .section-wallet h1, .theme-dark .section-wallet h2, .theme-dark .section-wallet h3, .theme-dark .section-wallet h4, .theme-dark .section-wallet h5, .theme-dark .section-wallet h6 { color: #1d1d1f; } .theme-dark .section-bentos .grid-item.top-up .tile { background-color: var(--white); } .theme-dark .section-wallet .tile { background-color: unset; } .theme-dark .link, .theme-dark a { color: #06c; } .theme-dark.accordion .accordion-item, .theme-dark .accordion .accordion-item { --accordion-border-color: #d2d2d7; border-color: var(--accordion-border-color); } /* dark theme color fix end */