@charset "utf-8";

@import url('common.css');

/* main-banner */

.main-banner {padding:50px 0 120px 0;}
.main-banner .wrapper {width:1080px;}
.main-banner .txt-box {margin-bottom:50px; text-align:center;}
.main-banner .txt-box span {color:var(--blue-color); font-size:50px; font-weight:300; letter-spacing:0.6rem;}
.main-banner .txt-box h3 {font-size:80px; font-weight:800; letter-spacing:1.4rem;}
.main-banner .txt-box h3 strong {display:inline-block; margin-left:180px; font-weight:800;}

.main-banner .img-box {position:relative; width:100%; height:300px; background-image:url(../images/pic/pic_main_banner_back.webp); background-repeat:no-repeat; background-position:center; background-size:cover;}
.main-banner .img-box .phone {position:absolute; z-index:1; top:-100px; left:calc(50% + 85px); transform:translateX(-50%); width:600px; animation:floating02 1s ease-in-out alternate infinite;}
.main-banner .img-box .phone img {display:block; width:100%; height:100%;}

.main-banner .img-box .ani-box {position:absolute; z-index:2; top:50%; left:120px; transform:translateY(-50%); min-width:250px;}
.main-banner .img-box .ani-box .ani li {position:relative; transform:translateY(100px); opacity:0; transition:all 0.3s ease; border-radius: 40px;}
.main-banner .img-box .ani-box .ani li.no-trans {transition:none !important;}
.main-banner .img-box .ani-box .ani li + li {margin-top:10px;}
.main-banner .img-box .ani-box .ani li div {display:flex; align-items:center; position:relative; box-sizing:border-box; overflow:hidden; width:42px; height:42px; margin:0 auto; border-radius:100px; background-color:#fff; transition:border-radius .2s ease}
.main-banner .img-box .ani-box .ani li div img {display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:28px; padding:17px 0;}
.main-banner .img-box .ani-box .ani li div strong {position: relative; z-index: 2; display:inline-block; padding-left:62px; font-size:18px; font-weight:700; white-space:nowrap;}
.main-banner .img-box .ani-box .ani li > strong {display:inline-block; padding:9px 25px; font-size:18px; font-weight:700; border-radius:42px; background-color:#fff;}

.main-banner .img-box .ani-box .ani li.step01.on {transform:translateY(100px); opacity:1;}
.main-banner .img-box .ani-box .ani li.step01.on.active div {border-radius: 40px;}
.main-banner .img-box .ani-box .ani li.step01.on.active div .k-motion {left:21px; transform:translateY(-50%);}
.main-banner .img-box .ani-box .ani li.step03.on {opacity:1; transform:translateY(60px);}
.main-banner .img-box .ani-box .ani li.step04.on {opacity:1; transform:translateY(10px);}
.main-banner .img-box .ani-box .ani li.step05.on {opacity:1; transform:translateY(-30px);}

.main-banner .img-box .ani-box .ani li.step01.end {opacity: 0;}
.main-banner .img-box .ani-box .ani li.step03.end {opacity: 0;}
.main-banner .img-box .ani-box .ani li.step04.end {opacity: 0;}
.main-banner .img-box .ani-box .ani li.step05.end {opacity: 0;}

.main-banner .btn-box {display:flex; justify-content:space-between; align-items:center; margin-top:80px;}
.main-banner .btn-box .left {margin-right:24px;}
.main-banner .btn-box .left strong {color:var(--blue-color); font-size:28px; letter-spacing:-0.03rem;}
.main-banner .btn-box .left p {font-size:26px; font-weight:300; letter-spacing:-0.05rem;}

.main-banner .btn-box .right {display:flex;}
.main-banner .btn-box .right a {display:block; width:220px; margin-right:20px; padding:12px; font-size:26px; font-weight:700; text-align:center;}
.main-banner .btn-box .right a:last-of-type {margin-right:0;}
.main-banner .btn-box .right a.inquiry {border:1px solid #202643; background-color:var(--white-color);}
.main-banner .btn-box .right a.intro {color:#fff; background-color:var(--blue-color);}


.k-motion {position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 35px; height: 35px; overflow: hidden;border-radius: 100px;}
.k-motion i {position: relative; z-index: 2; width: 35px; height: 35px; display: inline-block; background: url(../images/ico/ico_main_banner.svg) no-repeat center/cover;}
.k-motion em {position: absolute; z-index: 1; display: inline-block; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(0); width: 33px; height: 33px; animation: rotation 1.5s linear infinite; background: url(../images/pic/pic_main_banner_gra.webp) no-repeat center/cover; border-radius: 50px;}

@keyframes rotation {
	0% {transform: translate(-50%,-50%) rotate(0);}
	100% {transform: translate(-50%,-50%) rotate(360deg);}
}
/* brand-pay */
.brand-pay .brandpay-swiper .swiper-slide {flex:1; align-items:stretch; position:relative; height:auto; margin-right:30px; padding:25px 38px 50px; border-radius:20px; background-color:#fff;}
.brand-pay .brandpay-swiper .swiper-slide:last-of-type {margin-right:0;}
 
.brand-pay .brandpay-swiper .swiper-slide .img {max-width:192px; margin:0 auto;}
.brand-pay .brandpay-swiper .swiper-slide .img img {display:block; width:100%; height:100%;}

.brand-pay .brandpay-swiper .swiper-slide .txt {margin-top:10px; text-align:center;}
.brand-pay .brandpay-swiper .swiper-slide .txt strong {display:block; font-size:24px; font-weight:700;}
.brand-pay .brandpay-swiper .swiper-slide .txt p {margin-top:10px; font-size:18px; word-break:keep-all;}

/* why-brandpay */
.why-brandpay .why-cont {display:flex; justify-content:center; align-items:center;}
.why-brandpay .why-cont::after {display:none;}
.why-brandpay .why-cont li {display:flex; justify-content:center; align-items:center; width:280px; height:280px; margin-right:30px; text-align:center; border-radius:50%; background-color:#F7F7F7;}
.why-brandpay .why-cont li:last-of-type {margin-right:0;}
.why-brandpay .why-cont li .txt strong {color:var(--blue-color); font-size:60px; font-weight:400;}
.why-brandpay .why-cont li .txt strong span {margin-bottom:4px; font-weight:700;}
.why-brandpay .why-cont li .txt p {margin-top:-9px; font-size:24px; font-weight:400;}

/* differ-brandpay */
.differ-brandpay .differ-cont {display:flex; justify-content:center; align-items:stretch;}
.differ-brandpay .differ-cont > div {width:100%; padding:46px 36px; border-radius:20px;}

.differ-brandpay .differ-cont .top {margin-bottom:20px; text-align:center;}
.differ-brandpay .differ-cont .top span {font-size:21px;}
.differ-brandpay .differ-cont .top strong {display:block; margin-bottom:10px; font-size:32px; font-weight:700;}
.differ-brandpay .differ-cont .top p {font-size:18px;}

.differ-brandpay .differ-cont .con {border-top:1px solid #202643; border-bottom:1px solid #202643;}
.differ-brandpay .differ-cont .con li {position:relative; padding:11px 0 11px 32px; font-size:18px;}
.differ-brandpay .differ-cont .con li + li {border-top:1px solid rgba(32,38,67,.4);}
.differ-brandpay .differ-cont .con li::before {content:''; position:absolute; z-index:1; left:0; width:22px; height:22px; border-radius:50%; background-color:rgba(32,38,67,.1);}

.differ-brandpay .differ-cont .brandpay-pay {position:relative; background-color:var(--blue-color);}
.differ-brandpay .differ-cont .brandpay-pay .top > * {color:#fff;}
.differ-brandpay .differ-cont .brandpay-pay .con {border-color:#fff;}
.differ-brandpay .differ-cont .brandpay-pay .con > * {color:#fff;}
.differ-brandpay .differ-cont .brandpay-pay .con li {padding-left:34px;}
.differ-brandpay .differ-cont .brandpay-pay .con li + li {border-color:rgba(255,255,255,.4);}
.differ-brandpay .differ-cont .brandpay-pay .con li::before {background-color:rgba(59,64,90,.3);}
.differ-brandpay .differ-cont .brandpay-pay .con li::after {content:''; position:absolute; z-index:2; top:12px; left:7px; width:16px; height:12px; background:url(../images/ico/ico_differ_brandpay_check.svg) no-repeat; background-size:100%;}

@keyframes floatCrown {
    0% { transform: translate3d(0, var(--differ-scroll-y, 0px), 0); }
    100% { transform: translate3d(0, calc(var(--differ-scroll-y, 0px) - 25px), 0); }
}
.differ-brandpay .differ-cont .brandpay-pay .obj {position:absolute; right:-64px; bottom:100px; --differ-scroll-y:0px; transform:translate3d(0, var(--differ-scroll-y), 0); width:120px; height:111px; background:url(../images/pic/pic_differ_brandpay_crown.webp) no-repeat; background-size:100%; animation: floatCrown 1.2s ease-in-out infinite alternate; will-change:transform;}

/* brandpay-solution */
.brandpay-solution {position:relative; height:100vh;}
.brandpay-solution .txt-box {position:absolute; z-index:1; top:calc(50% - 60px); left:50%; transform:translate3d(-50%, -45%, 0); width:100%; padding-left:var(--wrap-para); padding-right:var(--wrap-para); text-align:center; opacity:0; will-change:transform, opacity;}
.brandpay-solution .txt-box strong {font-size:60px; font-weight:700;}
.brandpay-solution .txt-box strong span {color:var(--blue-color);}
.brandpay-solution .txt-box p {margin-top:24px; font-size:32px; font-weight:700;}

/* top-up */
.top-up {width: 100%; height: 850px; position: relative; clip-path: inset(0 0 0 0);}
.top-up > .wrapper {display:flex; justify-content:space-between; align-items:center;}

.top-up .txt-box {position: relative; z-index: 2; color: #202643;}
.top-up .txt-box .keywords {display:flex; flex-wrap:wrap; align-items:center; margin:-5px;}
.top-up .txt-box .keywords li {margin:5px; padding:12px 20px 12px 60px; font-size:22px; border-radius:100px; background-repeat:no-repeat; background-size:36px; background-position:left 20px center;}
.top-up .txt-box .keywords li:last-of-type {margin-right:0;}

.top-up .img-box {position: absolute; z-index: 1; left: 50%; top: 200px; transform: translate3d(-40px, 0, 0); width:700px; margin-left:30px; will-change:transform;}
.top-up .img-box.on {position: fixed;}
.top-up .img-box img {display:block; width:100%; height:100%;}


/* store-scan.top-up */
.store-scan .txt-box .keywords li {border:1px solid #D9D9D9;}
.store-scan .txt-box .keywords li.i-clock {background-image:url(../images/ico/ico_topup_clock.webp);}
.store-scan .txt-box .keywords li.i-cash {background-image:url(../images/ico/ico_topup_cash.webp);}
.store-scan .txt-box .keywords li.i-infra {background-image:url(../images/ico/ico_topup_infra.webp);}

/* brand-extension.top-up */
.brand-extension .txt-box .keywords li {background-color:#fff;}
.brand-extension .txt-box .keywords li.i-card {background-image:url(../images/ico/ico_topup_card.webp);}
.brand-extension .txt-box .keywords li.i-control {background-image:url(../images/ico/ico_topup_control.webp);}

/* flow-brandpay */
.flow-brandpay {position:relative; height:350px;}
.flow-brandpay div {position:absolute; z-index:3; top:50%; left:0; transform:translateY(-50%); overflow:hidden; white-space:nowrap; box-sizing:border-box;}
.flow-brandpay div span {display:inline-block; animation:marqueeAnim 40s linear infinite; font-size:160px; font-weight:700; color:#ECECEC; line-height:1;}

/* galaxy-store */
.galaxy-store {position:relative; padding-top:100px; padding-bottom:310px;}
.galaxy-store .wrapper {display:block;}

.galaxy-store .txt-box {max-width:750px;}

.galaxy-store .btn-box {border-bottom: 1px solid #E5E5E5;;}
.galaxy-store .btn-box .btn-swiper {display: block; overflow: hidden; height: 85px;}
.galaxy-store .btn-box .swiper-slide {position:relative;}
.galaxy-store .btn-box .swiper-slide a {display:block; padding: 0 0 25px; color:#FF3000; font-size:50px; font-weight:600;}

.galaxy-store .galaxy-swiper .fix-swiper {position:absolute; z-index:10; top:calc(50% - 40px); left:calc(50% + 25px); transform:translateY(-50%); width:330px; border-radius:40px; overflow:hidden; box-shadow: 14px 34px 58px rgba(0, 0, 0, 0.18);}
.galaxy-store .galaxy-swiper .fix-swiper::before {content:''; position:absolute; z-index:12; top:50%; left:-2px; transform:translateY(-50%); width:334px; height:680px; border-radius:40px; background:url(../images/pic/pic_galaxy_phone.webp) no-repeat; background-size:100%;}
.galaxy-store .galaxy-swiper .fix-swiper .swiper-slide {width:100% !important; height:680px;}
.galaxy-store .galaxy-swiper .fix-swiper .swiper-slide img {display:block; width:100%; height:100%;}
.galaxy-store .galaxy-swiper .fixtop-swiper {position:absolute; z-index:10; top:calc(50% - 40px); left:calc(50% + 36px); margin-top: -296px; transform:translateY(-50%); width:305px; border-radius:28px 28px 0 0; overflow:hidden;}
.galaxy-store .galaxy-swiper .fixtop-swiper .swiper-slide {width:100% !important;}
.galaxy-store .galaxy-swiper .fixtop-swiper .swiper-slide img {display:block; width:100%;}
.galaxy-store .galaxy-swiper .nofix-swiper {position:absolute; z-index:1; top:calc(50% - 40px); left:50%; transform:translateY(-50%); width:100%; overflow:hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%); mask-image: linear-gradient(to bottom, transparent 0%, black 22%);}
/*.galaxy-store .galaxy-swiper .nofix-swiper::before {content: ''; position: absolute; z-index: 5; top: 0; left: 0; width: 50px; height: 100%; background:#f7f7f7}*/
.galaxy-store .galaxy-swiper .nofix-swiper .swiper-slide {width:324px !important; height:676px; margin:30px; border-radius:40px; box-shadow:0 8px 18px rgba(0,0,0,.08); overflow: hidden;transition: opacity .3s ease, box-shadow .3s ease; opacity: 0.5;}
.galaxy-store .galaxy-swiper .nofix-swiper .swiper-slide:before {content:''; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 68px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, #F7F7F7 100%);}
.galaxy-store .galaxy-swiper .nofix-swiper .swiper-slide.swiper-slide-prev {opacity:0;}
.galaxy-store .galaxy-swiper .nofix-swiper .swiper-slide.swiper-slide-visible.swiper-slide-active {opacity: 1; box-shadow:none;}
/* .galaxy-store .galaxy-swiper .nofix-swiper .swiper-slide:first-of-type {display:none;} */

/* freq_question */
.freq-question {max-width:1080px; margin:0 auto;}
.freq-question .ques-cont li {padding:50px 100px; background-color:#F7F7F7;}
.freq-question .ques-cont li + li {margin-top:30px;}
.freq-question .ques-cont li strong {display:block; margin-bottom:10px; font-size:30px; font-weight:400;}
.freq-question .ques-cont li p {color:#888; font-size:24px; word-break:keep-all;}

@media all and (max-width:1359px) {
    /* main-banner */
    .main-banner .txt-box span {font-size:50px;}
    .main-banner .txt-box h3 {font-size:80px;}

    .main-banner .img-box .phone {width:650px;}

    /* top-up */ 
	.top-up > .wrapper {align-items:start; padding-left:var(--wrap-para); padding-right:var(--wrap-para);}

    .top-up .txt-box {flex-shrink:0; width:480px;}

    /* flow-brandpay */
    .flow-brandpay div span {font-size:120px;}

    /* galaxy-store */
    .galaxy-store .txt-box {width:100%;}

    .galaxy-store .btn-box .swiper-slide a  {font-size:42px;}
}

@media all and (max-width:1199px) {
    /* brand-pay */
    .brand-pay .brandpay-swiper .swiper-slide {padding:33px 30px 60px;}

    /* why-brandpay */
    .differ-brandpay .differ-cont > div { padding:60px 36px;}

    .why-brandpay .why-cont li {width:260px; height:260px;}
    .why-brandpay .why-cont li .txt strong {font-size:50px;}
    .why-brandpay .why-cont li .txt p {font-size:22px;}

    /* differ-brandpay */
    .differ-brandpay .differ-cont .top span {font-size:28px;}
    .differ-brandpay .differ-cont .top strong {font-size:40px;}
    .differ-brandpay .differ-cont .top p {font-size:22px;}

    .differ-brandpay .differ-cont .con li {font-size:22px;}

    /* brandpay-solution */
    .brandpay-solution .txt-box strong {font-size:50px;}
    .brandpay-solution .txt-box p {font-size:28px;}

    /* top-up */
    .top-up .txt-box {width:430px;}

    .top-up .txt-box .keywords li {font-size:20px;}

    /* galaxy-store */
    .galaxy-store {padding-bottom:280px;}
    .galaxy-store .txt-box {width:440px;}

    .galaxy-store .galaxy-swiper .fix-swiper {left:50%;}
    .galaxy-store .galaxy-swiper .fixtop-swiper {left:calc(50% + 12px);}
	

    .galaxy-store .galaxy-swiper .nofix-swiper {left:48%;}
    .galaxy-store .galaxy-swiper .nofix-swiper .swiper-slide {width:323px !important; height:674px;}
}

@media all and (max-width:1080px) {
    .notice-pg.sub-pg,
    .notice-view-pg.sub-pg {padding-top:30px;}

    /* main-banner */
    .main-banner {padding:120px 0; background-color:#fff;}
    .main-banner .wrapper {width:100%;}

    .main-banner .txt-box {margin-bottom:100px;}
    .main-banner .txt-box span {font-size:40px;}
    .main-banner .txt-box h3 {margin-top:14px; font-size:60px;}
    .main-banner .txt-box h3 strong {margin-left:100px;}

    .main-banner .img-box {height:350px; background-image:url(../images/pic/pic_main_banner_back_mo.webp);}
    .main-banner .img-box .phone {top:-160px; left:calc(50% + 80px); transform:translateX(-50%); width:600px;}

    .main-banner .img-box .ani-box {display:none;}

    .main-banner .btn-box {display:block; width:100%; margin-top:80px;}
    .main-banner .btn-box .left {margin-right:0; text-align:center;}
    .main-banner .btn-box .left strong {font-size:24px;}
    .main-banner .btn-box .left p {margin-top:5px; font-size:22px;}

    .main-banner .btn-box .right {display:flex; position:fixed; z-index:8000; left:0; bottom:0; width:100%; background-color:var(--bg-blue-clr);}
    .main-banner .btn-box .right a {flex:1; position:relative; width:100%; margin-right:0; padding:16px; color:#fff; font-size:24px;}
    .main-banner .btn-box .right a::after {content:''; position:absolute; z-index:1; top:50%; right:0; transform:translateY(-50%); width:1px; height:24px; background-color:#fff;}
    .main-banner .btn-box .right a:last-of-type:after {display:none;}
    .main-banner .btn-box .right a.inquiry {border:none; background-color:transparent;}
    .main-banner .btn-box .right a.intro {background-color:transparent;}

    /* brand-pay */
    .brand-pay .brandpay-swiper .swiper-slide {padding:33px 20px 60px;}

    .brand-pay .brandpay-swiper .swiper-slide .txt strong {font-size:22px;}
    .brand-pay .brandpay-swiper .swiper-slide .txt p {font-size:18px;}

    /* why-brandpay */
    .why-brandpay .why-cont li {display:flex; width:220px; height:220px; margin-right:20px;}

    /* differ-brandpay */
    .differ-brandpay .differ-cont {max-width:768px; margin:0 auto;}
    .differ-brandpay .differ-cont > div {padding:60px 30px;}

    .differ-brandpay .differ-cont .top span {font-size:26px;}
    .differ-brandpay .differ-cont .top strong {font-size:36px;}
    .differ-brandpay .differ-cont .top p {font-size:20px;}

    .differ-brandpay .differ-cont .con li {padding:16px 0 16px 32px; font-size:20px;}
    .differ-brandpay .differ-cont .brandpay-pay .con li::after {top:19px; left:7px;}
    .differ-brandpay .differ-cont .brandpay-pay .obj {width:120px; height:112px;}

    /* brandpay-solution */
    .brandpay-solution .txt-box strong {font-size:42px;}
    .brandpay-solution .txt-box p {font-size:24px;}

    /* top-up */
    .top-up {height: auto;}
    .top-up > .wrapper {display:block;}

    .top-up .txt-box {width:100%; margin-bottom:52px;}
    .top-up .txt-box .tit-box {margin-bottom:40px; text-align:center;}
    .top-up .txt-box .keywords {justify-content:center;}
    .top-up .txt-box .keywords li {font-size:18px; background-size:32px;}

    .top-up .img-box {position: static; left: auto; top: auto; transform: none; max-width:700px; width:100%; margin:0 auto;}

    /* flow-brandpay */
    .flow-brandpay {display:none;}

    /* galaxy-store */
    .galaxy-store {padding-top:160px; padding-bottom:160px;}
    .galaxy-store .txt-box {width:100%; margin:0 auto;}

    .galaxy-store .btn-box .swiper-slide a {font-size:36px; text-align:center;}
    .galaxy-store .btn-box {border-bottom: 0;}

    .galaxy-store .galaxy-swiper {position:relative; margin-top:50px;}
    .galaxy-store .galaxy-swiper .fix-swiper {position:relative; top:auto; left:auto; transform:none; width:300px; margin:0 auto;box-shadow: 14px 40px 80px rgba(0, 0, 0, 0.2);}
    .galaxy-store .galaxy-swiper .fix-swiper::before {left:-2px; width:304px; height:624px;}
    .galaxy-store .galaxy-swiper .fix-swiper .swiper-slide {height:619px;}
	.galaxy-store .galaxy-swiper .fixtop-swiper {top: 10px; margin-top: 0; left: 50%; width: 282px; transform: translateX(-50%);}

    .galaxy-store .galaxy-swiper .nofix-swiper {top:auto; bottom:-23px; left:calc(50% - 169px); transform:none; width:800px;}
    .galaxy-store .galaxy-swiper .nofix-swiper .swiper-slide {width:294px !important; height:613px; margin:25px;}

    /* freq_question */
    .freq-question {max-width:100%; padding-left:var(--wrap-para); padding-right:var(--wrap-para);}
    .freq-question .ques-cont li {padding:50px 80px;}
    .freq-question .ques-cont li strong {font-size:26px;}
    .freq-question .ques-cont li p {font-size:22px;}
}

@media all and (max-width:768px) {
    /* main-banner */
    .main-banner {padding:80px 0;}

    .main-banner .txt-box {margin-bottom:60px;}
    .main-banner .txt-box span {font-size:30px; letter-spacing:0.4rem;}
    .main-banner .txt-box h3 {font-size:50px;}
    .main-banner .txt-box h3 strong {margin-left:80px;}

    .main-banner .img-box {height:320px;}
    .main-banner .img-box .phone {top:-100px; left:calc(50% + 50px); width:480px; animation-duration: 1.8s}

    .main-banner .btn-box {margin-top:40px;}
    .main-banner .btn-box .left strong {font-size:20px;}
    .main-banner .btn-box .left p {font-size:16px;}

    .main-banner .btn-box .right a {font-size:22px;}
    .main-banner .btn-box .right a::after {height:22px;}

    /* brand-pay */
    .brand-pay .brandpay-swiper .swiper-slide {flex:none; width:250px; margin-right:0;}

    .brand-pay .brandpay-swiper .swiper-slide .txt strong {font-size:20px;}
    .brand-pay .brandpay-swiper .swiper-slide .txt p {font-size:16px;}

    /* why-brandpay */
    .why-brandpay .why-cont {display:block;}
    .why-brandpay .why-cont li {width:220px; height:220px; margin:0 auto;}
    .why-brandpay .why-cont li:last-of-type {margin:20px auto 0;}
    .why-brandpay .why-cont li + li {margin-top:20px;}
    .why-brandpay .why-cont li .txt strong {font-size:42px;}
    .why-brandpay .why-cont li .txt p {margin-top:-5px; font-size:20px;}

    /* differ-brandpay */
    .differ-brandpay .differ-cont {display:block;}
    .differ-brandpay .differ-cont > div {max-width:500px; margin:0 auto; padding:40px 20px;}

    .differ-brandpay .differ-cont .top span {font-size:26px;}
    .differ-brandpay .differ-cont .top strong {font-size:30px;}
    .differ-brandpay .differ-cont .top p {font-size:18px;}

    .differ-brandpay .differ-cont .con li {font-size:18px;}

    .differ-brandpay .differ-cont .general-pay {display:none;}

    .differ-brandpay .differ-cont .brandpay-pay .obj {display:none;}

    /* brandpay-solution */
    .brandpay-solution {height:600px;}
    .brandpay-solution .txt-box {top:50%;}
    .brandpay-solution .txt-box strong {font-size:36px;}
    .brandpay-solution .txt-box p {font-size:20px;}

    /* top-up */
    .top-up .txt-box .tit-box {margin-bottom:24px;}
    .top-up .txt-box .keywords {margin:-2px;}
    .top-up .txt-box .keywords li {margin:2px; padding:9px 14px 9px 38px; font-size:16px; background-size:24px; background-position:left 9px center;}

    /* galaxy-store */
    .galaxy-store {padding-top:120px; padding-bottom:120px;}
    .galaxy-store .txt-box .tit-box {margin-bottom:0;}

    .galaxy-store .btn-box .btn-swiper {height: 36px; margin: 24px 0;}
    .galaxy-store .btn-box .swiper-slide a {padding: 0; font-size:30px;}

    .galaxy-store .galaxy-swiper {margin-top:30px;}
    .galaxy-store .galaxy-swiper .fix-swiper {width:247px; border-radius:30px;}
    .galaxy-store .galaxy-swiper .fix-swiper::before {left:-2px; width:251px; height:514px; border-radius:30px;}
    .galaxy-store .galaxy-swiper .fix-swiper .swiper-slide {height:510px;}
	.galaxy-store .galaxy-swiper .fixtop-swiper {top: 8px; width: 231px; border-radius: 20px 20px 0 0;}

    .galaxy-store .galaxy-swiper .nofix-swiper {position:absolute; bottom:-20px; left:calc(50% - 140px);}
    .galaxy-store .galaxy-swiper .nofix-swiper .swiper-slide {width:241px !important; height:503px; margin:22px; border-radius:30px; box-shadow:0 0 20px rgba(0,0,0,.12)}

    /* freq_question */
    .freq-question .ques-cont li {padding:50px;}
    .freq-question .ques-cont li + li {margin-top:25px;}
    .freq-question .ques-cont li strong {margin-bottom:20px; font-size:22px; font-weight:400;}
    .freq-question .ques-cont li p {font-size:22px;}
}

@media all and (max-width:640px) {
    /* main-banner */
    .main-banner {padding:50px 0;}

    .main-banner .txt-box {margin-bottom:40px;}
    .main-banner .txt-box span {font-size:24px;}
    .main-banner .txt-box h3 {font-size:40px;}
    .main-banner .txt-box h3 strong {margin-left:70px;}

    .main-banner .img-box {height:280px;}
    .main-banner .img-box .phone {top:-80px; width:400px;}

    .main-banner .btn-box {margin-top:16px;}
    .main-banner .btn-box .left strong {font-size:18px;}
    .main-banner .btn-box .left p {font-size:14px;}

    /* why-brandpay */
    .why-brandpay .why-cont li {width:200px; height:200px;}
    .why-brandpay .why-cont li .txt strong {font-size:40px;}
    .why-brandpay .why-cont li .txt p {margin-top:-10px;}

    /* brandpay-solution */
    .brandpay-solution {height:534px;}
    .brandpay-solution .txt-box strong {font-size:30px;}
    .brandpay-solution .txt-box p {font-size:16px;}

    /* galaxy-store */
    .galaxy-store {padding-top:80px; padding-bottom:80px;}

    .galaxy-store .galaxy-swiper {margin-top:16px;}

    /* freq_question */
    .freq-question .ques-cont li {padding:30px;}
    .freq-question .ques-cont li strong {font-size:20px;}
    .freq-question .ques-cont li p {font-size:20px;}
}

@media all and (max-width:480px) {
    /* main-banner */
    .main-banner {padding:50px 0;}

    .main-banner .txt-box {margin-bottom:60px;}
    .main-banner .txt-box span {font-size:24px; letter-spacing:0.3rem;}
    .main-banner .txt-box h3 {margin-top:10px; font-size:40px;letter-spacing: 0.3rem;}
    .main-banner .txt-box h3 strong {margin-left:52px;}

    .main-banner .img-box {height:180px;}
    .main-banner .img-box .phone {top:-90px; left:calc(50% + 22px); width:306px;}

    .main-banner .btn-box .left strong {font-size:16px;}
    .main-banner .btn-box .left p {margin-top:3px; font-size:12px;}

    /* galaxy-store */
    .galaxy-store {padding-top:50px; padding-bottom:80px;}
}

@media all and (max-width:375px) {
       /* main-banner */
    .main-banner .txt-box {margin-bottom:28px;}
    .main-banner .txt-box span {font-size:20px;}
    .main-banner .txt-box h3 {font-size:40px;}
    .main-banner .txt-box h3 strong {margin-left:48px;}

    .main-banner .img-box {height:150px;}
    .main-banner .img-box .phone {top:-55px; width:240px;}

    .main-banner .btn-box .right a {font-size:18px;}
    .main-banner .btn-box .right a::after {height:18px;}

    /* brand-pay */
    .brand-pay .brandpay-swiper .swiper-slide {padding:28px 16px 50px; border-radius:16px;}
    
    .brand-pay .brandpay-swiper .swiper-slide .img {max-width:140px;}

    .brand-pay .brandpay-swiper .swiper-slide .txt strong {font-size:18px;}
    .brand-pay .brandpay-swiper .swiper-slide .txt p {font-size:14px;}

    /* why-brandpay */
    .why-brandpay .why-cont li {width:180px; height:180px;}
    .why-brandpay .why-cont li .txt strong {font-size:36px;}
    .why-brandpay .why-cont li .txt strong span {margin-bottom:2px;}
    .why-brandpay .why-cont li .txt p {margin-top:-5px; font-size:18px;}

    /* differ-brandpay */
    .differ-brandpay .differ-cont > div {padding:30px 16px; border-radius:16px;}

    .differ-brandpay .differ-cont .top {margin-bottom:24px;}
    .differ-brandpay .differ-cont .top span {font-size:22px;}
    .differ-brandpay .differ-cont .top strong {font-size:26px;}
    .differ-brandpay .differ-cont .top p {font-size:16px;}

    .differ-brandpay .differ-cont .con li {padding:14px 0 14px 28px; font-size:16px;}
    .differ-brandpay .differ-cont .con li::before {top:13px; width:18px; height:18px;}

    .differ-brandpay .differ-cont .brandpay-pay .con li {padding-left:30px;}
    .differ-brandpay .differ-cont .brandpay-pay .con li::after {top:16px; left:7px; width:12px; height:10px;}

    /* brandpay-solution */
    .brandpay-solution {height:500px;}
    .brandpay-solution .txt-box strong {font-size:24px;}
    .brandpay-solution .txt-box p {margin-top:20px; font-size:16px;}

    /* top-up */
    .top-up .txt-box .keywords li {padding:8px 9px 8px 30px; font-size:14px; background-size:20px; background-position:left 8px center;}

    /* galaxy-store */
    .galaxy-store .btn-box .swiper-slide a {font-size:24px;}

    .galaxy-store .galaxy-swiper .fix-swiper {width:215px;}
    .galaxy-store .galaxy-swiper .fix-swiper::before {width:218px; height:450px;}
    .galaxy-store .galaxy-swiper .fix-swiper .swiper-slide {height:444px;}

    .galaxy-store .galaxy-swiper .nofix-swiper {bottom:-15px; left:calc(50% - 122px);}
    .galaxy-store .galaxy-swiper .nofix-swiper .swiper-slide {width:212px !important; height:442px; margin:15px; box-shadow:0 0 15px rgba(0,0,0,.12)}

    /* freq_question */
    .freq-question .ques-cont li {padding:24px;}
    .freq-question .ques-cont li strong {margin-bottom:16px; font-size:16px;}
    .freq-question .ques-cont li p {font-size:16px;}
}

/* 20260410 추가 */
/* =========================================
   도입 문의 팝업
========================================= */

/* 1) 팝업 레이아웃 (공통 / PC) */
.inquiry-modal-wrap {position:fixed; z-index:9999; top:0; left:0; width:100%; height:100%; display:none;}
.inquiry-modal-wrap.is-open {display:block;}
.inquiry-dim {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
.inquiry-modal {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:600px; max-width:90%; background:#fff; padding:40px; border-radius:0; max-height:100vh; overflow-y:auto;}
.inquiry-modal .btn-close {position:absolute; top:40px; right:40px; width:40px; height:40px; background:var(--bg-blue-clr); color:#fff; border:none; font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center;}

/* 2) 팝업 내부 UI (공통 / PC) */
.inquiry-modal .modal-header {margin-bottom:20px;}
.inquiry-modal .modal-header h2 {font-size:28px; font-weight:700; color:#202643; margin-bottom:5px;}
.inquiry-modal .modal-header p {font-size:15px; color:#666; margin-bottom:0;}

.inquiry-modal .input-group {margin-bottom:8px;}
.inquiry-modal .input-group input,
.inquiry-modal .input-group textarea {width:100%; border:1px solid #ddd; background:#fff; padding:10px 15px; font-size:15px; font-family:inherit; color:#333; height:42px;}
.inquiry-modal .input-group input:focus, 
.inquiry-modal .input-group textarea:focus {border-color:var(--bg-blue-clr); outline:none;}
.inquiry-modal .input-group textarea {height:130px; resize:none; padding-top:14px;}

.inquiry-modal .privacy-section {margin-top:20px; margin-bottom:15px;}
.inquiry-modal .privacy-section strong {display:block; font-size:15px; margin-bottom:10px; color:#202643; font-weight:700;}
.inquiry-modal .privacy-table {width:100%; border-top:1px solid #ddd; border-left:1px solid #ddd;}
.inquiry-modal .privacy-table table {width:100%; border-collapse:collapse; table-layout:fixed;}
.inquiry-modal .privacy-table th, 
.inquiry-modal .privacy-table td {border-right:1px solid #ddd; border-bottom:1px solid #ddd; padding:8px 5px; font-size:12px; text-align:center; word-break:keep-all;}
.inquiry-modal .privacy-table th {background:#f9f9f9; color:#333; font-weight:400;}
.inquiry-modal .privacy-table td {color:#666;}

.inquiry-modal .agree-group {margin-bottom:24px; display:flex; align-items:center; cursor:pointer;}
.inquiry-modal .agree-group input[type="checkbox"] {display:none;}
.inquiry-modal .agree-group label {display:flex; align-items:center; font-size:15px; color:#333; cursor:pointer;}
.inquiry-modal .agree-group i.chk-icon {display:inline-block; width:20px; height:20px; border:1px solid #ccc; border-radius:50%; margin-right:8px; position:relative; background-color: #fff;}
.inquiry-modal .agree-group input[type="checkbox"]:checked + label i.chk-icon {background:var(--bg-blue-clr); border-color:var(--bg-blue-clr);}
.inquiry-modal .agree-group input[type="checkbox"]:checked + label i.chk-icon::after {content:''; position:absolute; left:5px; top:2px; width:7px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}

.inquiry-modal .btn-submit {display:block; width:100%; height:50px; background:var(--bg-blue-clr); color:#fff; font-size:18px; font-weight:700; border:none; cursor:pointer; text-align:center; transition:opacity 0.3s;}
.inquiry-modal .btn-submit:disabled {opacity:0.4; cursor:not-allowed;}

/* 3) 팝업 반응형 구조 (768px 이하) */
@media all and (max-width:768px) {
    .inquiry-modal {position:fixed; width:100%; max-width:none; height:100vh; max-height:100vh; top:0; left:0; transform:none; border-radius:0; padding:60px 20px 100px; overflow-y:auto;}
    .inquiry-modal .btn-close {top:15px; right:20px;}
    .inquiry-modal .btn-submit {position:fixed; bottom:0; left:0; width:100%; z-index:10;}
}

/* =========================================
   공지사항 (Notice & Notice View)
========================================= */

/* 레이아웃 & 공통 (PC) */
.sub-pg.bg-clr02 {background-color:#F7F7F7;}
.sub-pg {padding:0 0 56px;}
.sub-tit {text-align:center; margin-bottom:24px;}
.sub-tit h2 {font-size:32px; font-weight:800; color:#202643;}
.sub-tit p {margin-top:8px; font-size:15px; font-weight:500; color:#8A99AA;}

/* 공지사항 목록 */
.notice-list-wrap {max-width:1080px; margin:0 auto; background:#fff; padding:0 30px; border-top:2px solid #202643;}
.notice-list-wrap .notice-state,
.notice-view-wrap .notice-state {padding:40px 20px; color:#666; font-size:16px; text-align:center;}
.notice-list-wrap .notice-state--error,
.notice-view-wrap .notice-state--error {color:#C0392B;}
.notice-list-head {display:flex; align-items:center; padding:18px 20px; background:#F8FAFC; border-bottom:1px solid #EBEBEB; font-size:16px; font-weight:700; color:#333; text-align:center;}
.notice-list-head .no,
ul.notice-list li .no {width:70px; flex:0 0 70px; text-align:center; margin-right: 80px;}
.notice-list-head .tit,
ul.notice-list li .tit {flex:1 1 auto;}
.notice-list-head .date,
ul.notice-list li .date {width:150px; flex:0 0 150px; text-align:center;}
ul.notice-list li {border-bottom:1px solid #EBEBEB;}
ul.notice-list li a {display:flex; justify-content:space-between; align-items:center; padding:20px 20px;}
ul.notice-list li a:hover {background-color:#fafafa;}
ul.notice-list li .tit {font-size:17px; color:#333; line-height:1.4; word-break:keep-all;}
ul.notice-list li .no {font-size:16px; color:#8A99AA; font-weight:600;}
ul.notice-list li .date {font-size:15px; color:#999; white-space:nowrap;}

/* 페이지네이션 */
.pagination {display:flex; justify-content:center; align-items:center; padding:22px 0; gap:8px;}
.pagination a {display:flex; justify-content:center; align-items:center; width:34px; height:34px; font-size:16px; color:#666; font-weight:400;}
.pagination a.active {color:#202643; font-weight:700; border-bottom:2px solid #202643;}
.pagination a:hover {color:#202643;}

/* 공지사항 상세 */
.notice-view-wrap {max-width:1080px; margin:0 auto; background:#fff;}
.notice-view-wrap .view-header {padding:22px 40px; border-top:2px solid #202643; border-bottom:1px solid #EBEBEB;}
.notice-view-wrap .view-header .tit {font-size:28px; font-weight:700; color:#202643; margin-bottom:16px; line-height:1.4; word-break:keep-all;}
.notice-view-wrap .view-header .date {display:block; font-size:15px; color:#999;}

.notice-view-wrap .view-body {padding:28px 40px; min-height:150px; font-size:16px; color:#333; line-height:1.8; border-bottom:1px solid #EBEBEB;}

/* 첨부파일 영역 */
.notice-view-wrap .view-attach {padding:25px 50px;}
.notice-view-wrap .view-attach li + li {margin-top:10px;}
.notice-view-wrap .view-attach .file-link {position:relative; display:inline-block; padding-left:26px; font-size:15px; color:var(--bg-blue-clr);}
.notice-view-wrap .view-attach a.file-link {cursor:pointer;}
.notice-view-wrap .view-attach .file-link::before {content:''; position:absolute; left:0; top:50%; width:18px; height:20px; background:url('../images/ico/ico_file_attach.svg') no-repeat center / contain; transform:translateY(-50%);}

/* 버튼 그룹 */
.btn-group.center {text-align:center; margin-top:20px;}
.btn-group .btn-list {display:inline-block; padding:0 50px; height:50px; line-height:50px; background-color:#202643; color:#fff; font-size:16px; font-weight:700;}

/* =========================================
   공지사항 모바일 반응형 (768px 이하)
========================================= */
@media all and (max-width:768px) {
    /* 공통 넓은 상단 여백 확보 (풀사이즈 모바일 헤더 등에 타이틀이 가리지 않도록) */
    .sub-pg {padding:30px 0 100px;}
    .sub-pg .wrapper {padding:0 20px;}
    
    /* 모바일 페이지 타이틀 자연스럽게 보정 */
    .sub-tit {margin-bottom:30px;}
    .sub-tit h2 {font-size:28px;}
    .sub-tit p {margin-top:12px; font-size:15px;}

    /* 목록 페이지 */
    .notice-list-wrap {padding:0; border-top:2px solid #202643;}
    .notice-list-head {display:none;}
    ul.notice-list li a {display:block; padding:24px 20px;}
    ul.notice-list li .no {display:none;}
    ul.notice-list li .tit {display:block; font-size:16px; margin-bottom:12px; line-height:1.5;}
    ul.notice-list li .date {display:block; width:auto; flex:auto; margin-left:0; font-size:14px; text-align:right;}

    /* 페이징 모바일 터치 간격 확보 */
    .pagination {padding:30px 0; gap:4px;}
    .pagination a {width:30px; height:30px; font-size:15px;}

    /* 상세 페이지 */
    .notice-view-wrap .view-header {display:block; position:relative; padding:30px 20px; background:#fff; border-top:2px solid #202643; border-bottom:1px solid #EBEBEB;}
    .notice-view-wrap .view-header .tit {display:block; margin-bottom:12px; overflow:visible; color:#202643; font-size:22px; line-height:1.45; word-break:keep-all; white-space:normal;}
    .notice-view-wrap .view-header .date {display:block; font-size:14px;}

    /* 본문 가독성 확보 */
    .notice-view-wrap .view-body {padding:40px 20px; font-size:15px; line-height:1.7;}
    
    .notice-view-wrap .view-attach {padding:20px;}
    
    /* 하단 버튼 누르기 쉽게 폭 전체 사용 */
    .btn-group.center {margin-top:40px;}
    .btn-group .btn-list {width:100%; height:54px; line-height:54px; font-size:16px; box-sizing:border-box;}
    /* 20260410 추가 끝 */
}