@charset "utf-8";

/* typography */
@font-face{font-weight:300;font-style:normal;
    font-family:'Noto Sans Korean';
    src:url(//script.mysmilepay.com/fonts/NotoSansKR-DemiLight-Hestia.eot),
    url(//script.mysmilepay.com/fonts/NotoSansKR-DemiLight-Hestia.eot?#iefix) format('embedded-opentype');
    src:local('Noto Sans DemiLight'),local('NotoSans-DemiLight'),
    url(//script.mysmilepay.com/fonts/NotoSansKR-DemiLight-Hestia.woff) format('woff'),
    url(//script.mysmilepay.com/fonts/NotoSansKR-DemiLight-Hestia.otf) format('opentype');
}
@font-face{font-weight:400;font-style:normal;
    font-family:'Noto Sans Korean';
    src:url(//script.mysmilepay.com/fonts/NotoSansKR-Regular-Hestia.eot),
    url(//script.mysmilepay.com/fonts/NotoSansKR-Regular-Hestia.eot?#iefix) format('embedded-opentype');
    src:local('Noto Sans Regular'),local('NotoSans-Regular'),
    url(//script.mysmilepay.com/fonts/NotoSansKR-Regular-Hestia.woff) format('woff'),
    url(//script.mysmilepay.com/fonts/NotoSansKR-Regular-Hestia.otf) format('opentype');
}
@font-face{font-weight:500;font-style:normal;
    font-family:'Noto Sans Korean';
    src:url(//script.mysmilepay.com/fonts/NotoSansKR-Medium-Hestia.eot),
    url(//script.mysmilepay.com/fonts/NotoSansKR-Medium-Hestia.eot?#iefix) format('embedded-opentype');
    src:local('Noto Sans Medium'),local('NotoSans-Medium'),
    url(//script.mysmilepay.com/fonts/NotoSansKR-Medium-Hestia.woff) format('woff'),
    url(//script.mysmilepay.com/fonts/NotoSansKR-Medium-Hestia.otf) format('opentype');
}
@font-face{font-weight:700;font-style:normal;
    font-family:'Noto Sans Korean';
    src:url(//script.mysmilepay.com/fonts/NotoSansKR-Bold-Hestia.eot),
    url(//script.mysmilepay.com/fonts/NotoSansKR-Bold-Hestia.eot?#iefix) format('embedded-opentype');
    src:local('Noto Sans Bold'),local('NotoSans-Bold'),
    url(//script.mysmilepay.com/fonts/NotoSansKR-Bold-Hestia.woff) format('woff'),
    url(//script.mysmilepay.com/fonts/NotoSansKR-Bold-Hestia.otf) format('opentype');
}

@font-face {    font-weight:700;   font-style:normal;
	font-family:'Gmarket Sans';
	src:local('Gmarket Sans Bold'), local('GmarketSans-Bold'),
	url('//script.mysmilepay.com/fonts/GmarketSansBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('//script.mysmilepay.com/fonts/GmarketSansBold.woff') format('woff');/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {    font-weight:500;   font-style:normal;
	font-family:'Gmarket Sans';
	src:local('Gmarket Sans Medium'), local('GmarketSans-Medium'),
	url('//script.mysmilepay.com/fonts/GmarketSansMedium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('//script.mysmilepay.com/fonts/GmarketSansMedium.woff') format('woff');/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {    font-weight:300;   font-style:normal;
	font-family:'Gmarket Sans';
	src:local('Gmarket Sans Light'), local('GmarketSans-Light'),
	url('//script.mysmilepay.com/fonts/GmarketSansLight.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('//script.mysmilepay.com/fonts/GmarketSansLight.woff') format('woff');/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html{height:100%}
body{height:100%;background:#FFFFFF;overflow-x:hidden;-webkit-text-size-adjust:none}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td,legend,button{margin:0;padding:0;font-size:14px;font-weight:400;font-family:-apple-system, BlinkMacSystemFont, Apple SD Gothic Neo, Roboto, Noto Sans CJK KR, Tahoma, 'Noto Sans Korean','Gmarket Sans', sans-serif;color:#333;line-height:1.25em;-webkit-text-size-adjust:none}
button,form,fieldset,img{border:0}
table{border-spacing:0;border-collapse:collapse}
hr,legend,caption{display:none}
img,fieldset,button{border:0 none}
ul,ol,li{list-style:none outside}
img,input,select,textarea{vertical-align:middle}
textarea{-webkit-border-radius:0;-webkit-appearance:none}
select{padding:0 0 0 6px;-webkit-border-radius:0;letter-spacing:0;-webkit-appearance:none}
button{background-color:transparent}
a{color:#3b3b3b;text-decoration:none}
a:link,a:visited,a:hover,a:active{text-decoration:none}
li,p,dt,dd,div,span{word-break:break-all}
.skip-navigation{visibility:hidden;overflow:hidden;position:absolute;top:-10000px;width:0;height:0;font-size:0;line-height:0}
.for-a11y, .forA11y{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0)}
input[type='text'], input[type='number']{border:1px solid #aaa;border-radius:0;-webkit-border-radius:0;font-size:0.81em;color:#656565;-webkit-appearance:none;box-shadow:none}
input[type='password']{border:1px solid #aaa;border-radius:0;-webkit-border-radius:0;font-size:0.81em;color:#656565;-webkit-appearance:none;box-shadow:none}
input[type='tel']{border:1px solid #aaa;border-radius:0;-webkit-border-radius:0;font-size:0.81em;color:#656565;-webkit-appearance:none;box-shadow:none}

#box__wrapp{min-width:320px;margin:0 auto}

/* sprite image */
.sprite__plcc,
.sprite__plcc--before:before,
.sprite__plcc--after:after{display:inline-block;background:url(//pics.mysmilepay.com/smilecard/plcc/sprite__smilecard-plcc-edtion3.png) no-repeat;background-size:500px auto}
.sprite__plcc--before:before,
.sprite__plcc--after:after{content:''}

/* 헤더 */
.box__header{display:none;position:fixed;top:0;left:0;z-index:200;width:100%;height:96px;background:#fff}
.box__header .box__inner{width:1440px;margin:0 auto}
.box__header .box__logo{position:absolute;right:50%;height:100%;margin-right:318px}
.box__header .image__logo{display:block;width:180px;height:35px;margin:30px 0;background-position:0 0}
.box__header .box__detail-view {position:absolute;top:23px;left:50%;width:212px;height:50px;margin-left:299px}
.box__header .link__detail-view{display:block;padding:0;border-radius:8px;font-size:14px;font-weight:500;font-family:'Gmarket Sans',serif;color:#313191;line-height:50px;text-align:center;background-color:#FFD200}
.box__header .image__smile-bubble {position:absolute;top:-18px;right:-50px;width:180px;height:35px;background-position:0 -211px}
@media screen and (max-width:919px){
    .box__header{display:block;height:48px}
    .box__header .box__logo{right:auto;left:50%;margin-right:0;transform:translateX(-50%)}
    .box__header .image__logo{width:110px;height:21px;margin:13px 0;background-position:-185px 0}
    .box__header .box__detail-view {display:none}
	.box__header .button__closed{position:absolute;top:1px;right:0;width:45px;height:45px}
	.box__header .button__closed::after{width:22px;height:22px;margin:0 auto;background-position:-478px 0}
}

/* 인트로 */
.section__intro{position:relative;height:447px}
.section__intro .box__video {position:relative;width:50%;height:100%}
.section__intro .box__video-intro{position:absolute;top:8px;right:40px;width:350px;height:403px;}
.section__intro .box__video video{width:100%;height:100%}
.section__intro .image__intro-card{display:none}
.section__intro .box__intro-info{position:absolute;top:80px;left:50%;z-index:20;width:50%;padding-left:5px;text-align:left}
.section__intro .image__logo{display:block;width:180px;height:35px;background-position:0 0}
.section__intro .image__title{width:313px;height:71px;margin-top:25px;background-position:0 -40px}
.section__intro .text__title-benefit{margin-top:20px;font-size:22px;font-weight:700;font-family:'Gmarket Sans';font-weight:400;color:#222;line-height:26px;text-align:left}

.section__intro .text__main-title{margin-top:20px;text-align:left;font-family:'Gmarket Sans';font-size: 30px;font-style: normal;font-weight:700;background:linear-gradient(34deg, #27B2ED -10%, #8C31D4 99%);background-clip:text;-webkit-background-clip:text;color:transparent;}
.section__intro .text__main-title .text__title-upper{display: block;line-height:36px;}
.section__intro .text__main-title .text__title-lower{display: block;font-size:38px;line-height:30px;margin-top:8px;}
.section__intro .list__benefit-slide {margin-top:35px}
.section__intro .list__benefit-slide .list-item{display:inline-block;width:120px;height:120px;border-radius:50%;font-size:0;font-size:16px;vertical-align:top}
.section__intro .list__benefit-slide .list-item+.list-item{margin-left:-18px}
.section__intro .list__benefit-slide .list-item__dsicount{background-position:0 -371px}
.section__intro .list__benefit-slide .list-item__first{background-position:-122px -371px}
.section__intro .list__benefit-slide .list-item__cashback{background-position:-244px -371px}
.section__intro .list__benefit-slide .list-item__univers{background-position:-366px -371px}
.section__intro  .box__detail-view{display:inline-block;position:relative;margin-top:26px}
.section__intro .box__detail-view .image__smile-bubble {position:absolute;top:-18px;right:-26px;width:180px;height:35px;background-position:0 -211px}
.section__intro .link__detail-view {display:inline-block;width:100%;width:330px;height:60px;border-radius:8px;font-size:18px;font-weight:500;font-family:'Gmarket Sans',serif;color:#313191;line-height:60px;text-align:center;background-color:#FFD200}

.section__notice .box__notice .list__information{margin-top:15px;list-style:none;}
.section__notice .box__notice .list__information .ist-item{list-style:none; padding-left:0;}
.section__notice .box__notice .text__information{margin-top:15px;}

.section__intro.section__intro-v2 {width: 740px;height: 520px;margin: 0 auto;display: flex;flex-direction: row-reverse;}
.section__intro.section__intro-v2 .text__title-benefit .text__subtitle{display: block;margin-bottom: 30px;color: #222;font-family:'Gmarket Sans';font-size: 30px;font-weight: 500;}
.section__intro.section__intro-v2 .text__title-benefit .box__cell{display: block;line-height: 1.5;}
.section__intro.section__intro-v2 .box__intro-info{width: 740px;transform: translateX(-50%);}
.section__intro.section__intro-v2 .box__video-intro{top: 50%;right: -50px;transform: translateY(-50%);}



@media screen and (max-width:919px){
    .section__intro {overflow:hidden;max-width:100%;height:378px;margin-top:48px}
    .section__intro .box__intro-info{position:static;width:100%;padding-top:20px}
    .section__intro .image__logo{display:none}
    .section__intro .image__title{display:block;position:relative;width:299px;height:70px;margin:0 auto;background-position:0 -125px}
    .section__intro.js-box__effect .image__title{opacity:0;animation:fadeIn .4s ease-in-out forwards .1s}
    .section__intro .text__title-benefit{position:relative;margin-top:14px;;text-align:center}
    
    .section__intro.js-box__effect .text__title-benefit{opacity:0;animation:fadeIn .4s ease-in-out forwards .1s}
    .section__intro .box__video{position:absolute;left:0;width:100%}
    .section__intro .box__video-intro{display:block;position:static;width:84px;height:133px;margin:204px auto 0;}
    .section__intro .video__intro-card{display:none}
    .section__intro .image__intro-card{display:block;position:relative;left:102px;height:316px}
    .section__intro.js-box__effect .image__intro-card{width:100%;height:100%;left:0;top:160px;opacity:0;animation:fadeInSlide2 1.4s ease-in-out forwards}
    .section__intro .list__benefit-slide{position:absolute;top:186px;left:50%;margin-top:0;margin-left:-150px}
    .section__intro .list__benefit-slide .list-item{display:block;position:relative}
    .section__intro .list__benefit-slide .list-item+.list-item{margin-top:-25px;margin-left:0}
	
    .section__intro .text__main-title{text-align:center;font-size:24px;background:linear-gradient(103deg, #27B2ED -2%, #8C31D4 160%);background-clip:text;-webkit-background-clip:text;color:transparent;}
    .section__intro .text__main-title .text__title-upper{line-height:36px;}
    .section__intro .text__main-title .text__title-lower{font-size:30px;line-height:40px;letter-spacing: -0.9px;margin-top:0;}
    .section__intro.js-box__effect .list__benefit-slide .list-item{opacity:0;animation:fadeInTop 1.5s ease-in-out forwards 0.1s}
    .section__intro.js-box__effect .list__benefit-slide .list-item:nth-child(1){animation-delay:0.1s}
    .section__intro.js-box__effect .list__benefit-slide .list-item:nth-child(2){animation-delay:0.2s}
    .section__intro.js-box__effect .list__benefit-slide .list-item:nth-child(3){animation-delay:0.3s}
    .section__intro.js-box__effect .list__benefit-slide .list-item:nth-child(4){animation-delay:0.4s}
    .section__intro .box__detail-view {position:fixed;bottom:0;left:0;z-index:1000;box-sizing:border-box;width:100%;height:64px;padding:8px 16px;padding:8px 16px;border-radius:0;background-color:#fff;box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.2)}
    .section__intro .box__detail-view .image__smile-bubble {top:-16px;left:23px;width:181px;height:34px;background-position:0 -262px}
    .section__intro .link__detail-view{width:100%;height:48px;margin-top:0;font-size:16px;line-height:48px}
    .section__notice .box__content{padding:0 22px;}
    .box__line{display: block;}

	
    .section__intro.section__intro-v2 {height: 348px;display: block;margin-top: 48px;}
	.section__intro.section__intro-v2 .text__main-title{margin-top: 0;}
    .section__intro.section__intro-v2 .box__intro-info{width: 100%;transform: none;}
    .section__intro.section__intro-v2 .text__title-benefit {width: 280px;margin: 90px auto 0;padding: 0 50px;text-align: left;font-size: 16px;line-height: 24px;}
	.section__intro.section__intro-v2 .text__title-benefit .text__subtitle{position: absolute;top: -80px;left: 0;width: 100%;font-size: 24px;text-align: center;}
	.section__intro.section__intro-v2 .text__title-benefit .box__cell{line-height: unset;}
    .section__intro.section__intro-v2 .text__title-benefit .box__cell + .box__cell{margin-top: 16px;}
    .section__intro.section__intro-v2 .text__title-benefit .box__cell strong{font-size: 22px;}
    .section__intro.section__intro-v2 .text__title-benefit .box__cell .text__empty{display: block;}
    .section__intro.section__intro-v2 .box__video-intro {top: unset;right: unset;transform: none;width: 99px;height: 164px;margin: 164px auto 0;}
    .section__intro.section__intro-v2 .box__video-intro .image__intro-card{margin-left: 80px}

}
@keyframes fadeIn {
    0%, 40% {opacity:0;top:20px}
    100% {opacity:1;top:0}
}
@keyframes fadeInSlide {
    0%, 15% {opacity:0;top:20px;left:0px}
    40%, 60%  {opacity:1;top:0px;left:0px}
    85%, 100% {opacity:1;top:0px;left:102px}
}
@keyframes fadeInTop {
    0%, 75% {opacity:0;top:80px}
    100% {opacity:1;top:0}
}
@keyframes fadeInSlide2 {
	0% {opacity:0;top:160px;left:0;}
	20%, 40%  {opacity:1;top:160px;left:0;}
	85%, 100% {opacity:1;top:0px;left:0;}
}

/* 혜택1 */
.section__benefit1{width:100%;padding-bottom:80px;background:linear-gradient(131deg, #68bbff -8%, #706ff7 100%)}
.section__benefit1 .box__content{height:1131px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/image__benefit1.png) no-repeat 50% 0 /720px}
.section__benefit1 .link__event{display:block;width:328px;margin:0 auto;margin-top:32px; border-radius:8px;background:#123bb8;font-size:20px;font-weight:500;font-family:'Gmarket Sans',serif;color:#fff;line-height:60px;text-align:center}
@media screen and (max-width:919px){
    .section__benefit1{padding:0 0 40px 0}
    .section__benefit1 .box__content{height:813px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/m-image__benefit1.png) no-repeat 50% 0 /360px}
    .section__benefit1 .link__event{display:block;width:232px;margin:0 auto;margin-top:32px;font-size:16px;line-height:48px}
}

/* 혜택2 */
.section__benefit2{width:100%;padding-bottom:80px;background:#eef7ff}
.section__benefit2 .box__content{height:489px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/image__benefit2.png) no-repeat 50% 0 /610px}
@media screen and (max-width:919px){
    .section__benefit2{padding-bottom:40px}
    .section__benefit2 .box__content{height:319px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/m-image__benefit2.png) no-repeat 50% 0 /360px}
}

/* 혜택3 */
.section__benefit3{width:100%;padding-bottom:80px;background:#fff}
.section__benefit3 .box__content{height:663px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/image__benefit3.png) no-repeat 50% 0 /600px}
@media screen and (max-width:919px){
    .section__benefit3{padding-bottom:40px}
    .section__benefit3 .box__content{height:427px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/m-image__benefit3.png) no-repeat 50% 0 /359px}
}

/* 혜택4 */
.section__benefit4{width:100%;padding-bottom:80px;background:#000}
.section__benefit4 .box__content{height:1050px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/image__benefit4.png) no-repeat 50% 0 /865px}
@media screen and (max-width:919px){
    .section__benefit4{padding-bottom:40px}
    .section__benefit4 .box__content{height:775px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/m-image__benefit4.png) no-repeat 50% 0 /360px}
}

/* 적립혜택 */
.section__reword{width:100%;padding-bottom:80px;background:#eef7ff}
.section__reword .box__reword{height:667px;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2024/1q/image__reword.png) no-repeat 50% 0 /770px}
.section__reword .box__reword-info{width:580px;margin:20px auto 0}
.section__reword .box__reword-info .text__info{padding-left:8px;font-size:16px;font-weight:500;font-family:'Noto Sans Korean';color:#424242;line-height:16px;text-indent:-8px}
.section__reword .box__reword-info .text__info+.text__info{margin-top:8px}
.section__reword .box__reword-info .text__info.text__info-add{margin-top:25px;padding-top:25px;border-top:1px solid #e0e0e0}
.section__reword .box__reword-info .text__info-detail{display:block;padding-left:8px;font-size:14px;font-weight:400;font-family:'Noto Sans Korean';color:#757575;line-height:20px;text-indent:-8px}
.section__reword .box__reword-info .text__info-detail+.text__info-detail{margin-top:4px}
.section__reword .box__reword-info .text__info-detail:first-child{margin-top:10px}
.section__reword .box__tip{height:767px;margin:30px auto 0;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/image__tip.png) no-repeat 50% 0 /580px}
.section__reword .box__tip-info {width:580px;margin:30px auto 0}
.section__reword .box__tip-info .text__info{font-size:16px;font-weight:500;font-family:'Noto Sans Korean';color:#424242;line-height:16px}
.section__reword .box__tip-info  .text__info-detail{display:block;margin-top:10px;font-size:14px;font-weight:400;font-family:'Noto Sans Korean';color:#757575;line-height:22px}
.section__reword .box__tip-info .text__emphasis{font-weight:600}
@media screen and (max-width:919px){
    .section__reword{padding-bottom:40px}
    .section__reword .box__reword{height:426px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/m-image__reword.png) no-repeat 50% 0/360px}
    .section__reword .box__tip{height:628px;margin:30px auto 0;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/m-image__tip.png) no-repeat 50% 0/312px}
    .section__reword .box__reword-info, 
    .section__reword .box__tip-info{box-sizing:border-box;max-width:360px;width:100%;padding:0 24px}
    .section__reword .box__reword-info .text__info{font-size:13px;line-height:16px}
    .section__reword .box__reword-info .text__info+.text__info{margin-top:4px}
    .section__reword .box__reword-info .text__info.text__info-add{margin-top:20px}
    .section__reword .box__reword-info .text__info-detail{font-size:13px}
    .section__reword .box__tip-info .text__info-detail{letter-spacing:-0.5px}
}

/* 유의사항*/
.button__notice{display:block;width:221px;height:24px;margin:0 auto;cursor:pointer;background-position:0 -315px}
.section__notice{padding:80px 0}
.section__notice .box__content{ box-sizing:border-box;max-width:1129px;margin:0 auto;padding:0 40px}
.section__notice .text__notice{padding-bottom:35px;font-size:26px;font-weight:700;border-bottom:1px solid #424242}
.section__notice .box__notice{border-bottom:1px solid #e0e0e0}
.section__notice .box__notice-universeclub+.box__notice-universeclub{margin-top:30px}
.section__notice .box__notice .button__notice-toggle{position:relative;width:100%;font-size:20px;font-weight:700; color:#222;line-height:88px;text-align:left;cursor:pointer}
.section__notice .box__notice .button__notice-toggle::after{position:absolute;top:calc(50% - 12px);right:0;width:24px;height:24px;background-position:-185px -341px;}
.section__notice .box__notice .button__notice-toggle.button--active::after {background-position:-150px -341px}
.section__notice .box__notice .box__notice-layer{display:none;overflow:hidden;height:auto;margin-bottom:50px;transition-duration:.4s}
.section__notice .box__notice .button__notice-toggle.button--active+.box__notice-layer{display: block;}
.section__notice .box__notice .text__notice-sub-title{margin-bottom:30px;font-size:16px;font-weight:700;font-family:'Noto Sans Korean';color:#424242;line-height:24px}
.section__notice .box__notice .list__notice .list-item__title{font-size:16px;font-weight:500;font-family:'Noto Sans Korean';color:#424242;line-height:24px}
.section__notice .box__notice .list__notice .list-item{padding-left:10px;font-size:14px;font-family:'Noto Sans Korean';color:#757575;line-height:22px;text-indent:-10px;word-break:keep-all;}
.section__notice .box__notice .list__notice .list-item::before{display:inline-block;content:"";width:2px;height:2px;margin-right:6px;background:#757575;vertical-align:middle}
.section__notice .box__notice .list__notice .list-item__title+.list-item{margin-top:6px}
.section__notice .box__notice .list__notice .list-item+.list-item__title{margin-top:15px}
.section__notice .box__notice .list__notice .list-item--emphasis{font-weight:700}
.section__notice .box__notice .text__information{margin-top:22px;font-size:14px;font-weight:700;font-family:'Noto Sans Korean';color:#757575;line-height:22px}
.section__notice .box__notice .list__information{margin-top:22px;list-style:none;}
.section__notice .box__notice .list__information .list-item{font-size:14px;font-weight:700;font-family:'Noto Sans Korean';color:#757575;line-height:22px}
.section__notice .box__notice .list__information .list-item+.list-item{margin-top:6px}
@media screen and (max-width:919px){
    .button__notice{width:147px;height:18px;background-position:0 -340px}
    .section__notice{padding:40px 0 0}
    .section__notice .text__notice{padding-bottom:24px}
    .section__notice .text__notice{font-size:18px;line-height:20px}
    .section__notice .box__notice .box__notice-layer{margin-bottom:5px;}
    .section__notice .box__content .box__notice:last-of-type .box__notice-layer{margin-bottom:30px;}
    .section__notice .box__notice .button__notice-toggle{font-size:16px;line-height:60px}
    .section__notice .box__notice .text__notice-sub-title{font-size:13px;line-height:16px}
    .section__notice .box__notice .list__notice .list-item__title{font-size:13px;line-height:16px}
    .section__notice .box__notice .list__notice .list-item{font-size:13px;line-height:20px}
    .section__notice .box__notice .list__notice .list-item +.list-item{margin-top:8px}
    .section__notice .box__notice .list__notice .list-item__title+.list-item{margin-top:8px;}
}

/* 하단 유의사항(꼭알아두세요!) */
.section__information{padding:40px 0;background-color:#f7f9fa}
.section__information .box__inner{box-sizing:border-box;max-width:1129px;margin:0 auto;padding:0 40px;text-align:left}
.section__information .text__title{font-size:16px;font-weight:700;font-family:'Noto Sans Korean';color:#2c2c2c;line-height:20px}
.section__information .box__information{margin-top:8px}
.section__information .list__information{margin-top:10px}
.section__information .list__information .list-item{font-size:18px;font-weight:400;font-family:'Noto Sans Korean';color:#616161;line-height:26px}
.section__information  .list__information--emphasis .list-item{font-weight:600}
.text__reviewed{margin-top:10px;font-size:18px;font-weight:400;font-family:'Noto Sans Korean';color:#616161;line-height:26px}
@media screen and (max-width:919px){
    .section__information .box__inner{width:100%;padding:0 32px 60px 32px}
    .section__information .list__information .list-item{letter-spacing:-1px}
}
/* 유의사항 update */
.section__notice .box__notice .list__notice .list-item+.list-item{margin-top:6px;}
.section__notice .box__notice .list__information .list-item{font-weight:normal;}
.section__notice .box__notice .box__line-web{display: block;}
.section__notice .box__notice .list__notice .item-benefit + .item-benefit{margin-top:4px;}
.section__notice .box__notice .item-benefit::before{display: none;}
@media screen and (max-width:919px){
    .section__notice .box__notice{padding:0 0 20px 0;}
    .section__notice .box__notice .box__notice-layer{margin-bottom:0;}
    .section__notice .box__notice .list__information .list-item{font-size:13px;line-height:20px;}
    .section__notice .box__notice .list__information .list-item+.list-item{margin-top:8px;}
    #anchor__notice-living .list__notice .item-benefit:before{display:none;}
    .section__notice .box__notice .box__line-web{display: inline;}
}

/* 공통 유의사항 */
@media screen and (max-width:919px){
    .benefitbox--mar #anchor_common-notice .list__notice .list-item +.list-item{margin-top:15px;}
}

/* 자세히 보기 팝업(현대카드사이트) */
.smile_card_view, .smile_card_view body {overflow:hidden}
#layer_smile_card {position:fixed;top:0;left:0;z-index:3000;width:100%;height:100%}
.layer_smile_card {position:absolute;top:50px;left:50%;z-index:200;width:1200px;height:calc(100% - 50px) !important;min-height:500px;margin-left:-600px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}
iframe.layer_smile_card {height:calc(100% - 50px) !important}
iframe.layer_smile_card:focus {outline:none}
#layer_smile_card .box__dimmed {opacity:0.55;position:fixed;top:0;left:0;z-index:199;width:100%;height:100%;background:#000}


/***************************/
/**** 25년 04월 ****/
/***************************/
/* 혜택1 */
.benefitbox--apr .section__benefit1{width:100%;background:#eef7ff;padding-bottom:0;}
.benefitbox--apr .section__benefit1 .box__content{position: relative;width:900px;height:461px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/03/image__dec_benefit1_1_2.png) no-repeat 50% 0 /900px}
.benefitbox--apr .section__benefit1 .button__notice{position: absolute;top:368px;right:323px; display: block;width:90px;height:26px;text-indent: -999em;overflow: hidden;background-color: transparent;}
@media screen and (max-width:919px){
    .benefitbox--apr .section__benefit1{padding-bottom:0}
	.benefitbox--apr .section__benefit1 .box__content{width:360px;height:383px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/03/image__dec_benefit1_1_2_mo.png) no-repeat 50% 0 /360px}
    .benefitbox--apr .section__benefit1 .button__notice{top:307px;right:98px;width:67px;height:18px;}
}

/* 혜택2(이달의 혜택) */
.benefitbox--apr .section__benefit2{width:100%;background-image: linear-gradient(133deg, #27b2ed -21%, #8c31d4 135%, #8b33d5 135%);}
.benefitbox--apr .section__benefit2 .box__content{height:1170px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/04/image__dec_benefit2_1.png) no-repeat 50% 0 /900px}
.benefitbox--apr .section__benefit2 .button__notice{background-position:0 -499px;opacity:0.5;}
@media screen and (max-width:919px){
    .benefitbox--apr .section__benefit2{padding-bottom:40px;background-image: linear-gradient(95deg, #52bfee 2%, #8058ff 90%);}
    .benefitbox--apr .section__benefit2 .box__content{width:360px;height:1305px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/04/image__dec_benefit2_1_mo.png) no-repeat 50% 0 /360px}
    .benefitbox--apr .section__benefit2 .button__notice{margin-top:20px;opacity:0.65;background-position:0 -525px}
    .benefitbox--apr #anchor__notice-applepay .button__notice-toggle,
    .benefitbox--apr #anchor__notice-living .button__notice-toggle,
    .benefitbox--apr #anchor__notice-membership .button__notice-toggle{padding:18px 0;line-height:20px;}
}

/* 혜택3(추가 혜택) */
.benefitbox--apr .section__benefit3{position: relative;width:100%;padding-bottom:80px;background:#fff}
.benefitbox--apr .section__benefit3 .icon__plus{width:80px;height:80px;position: absolute;top:-40px;left:50%;transform: translateX(-50%);background-position:-226px -500px;}
.benefitbox--apr .section__benefit3 .box__content{height:708px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2024/3q/image__benefit3_ver2.png) no-repeat 50% 0 /1440px}
@media screen and (max-width:919px){
    .benefitbox--apr .section__benefit3{padding-bottom:80px}
    .benefitbox--apr .section__benefit3 .icon__plus{display: none;}
    .benefitbox--apr .section__benefit3 .box__content{width:360px;height:563px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2024/3q/m-image__benefit3_ver2.png) no-repeat 50% 0 /360px}
}

/* 적립혜택 */
.benefitbox--apr .section__reword .box__reword{height:613px;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2024/3q/image__rewards.png) no-repeat 50%  0 /770px}
.benefitbox--apr .section__reword .box__tip{height:724px;margin:30px auto 0;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2024/3q/image__tip.png) no-repeat 50% 0 /580px}
.benefitbox--apr .section__reword .box__reword-info{width:584px;}
.benefitbox--apr .section__reword .box__reword-info .text__info.text__info-add{margin-top:20px;padding-top:0;border-top:0;}
@media screen and (max-width:919px){
    .benefitbox--apr .section__reword .box__reword{height:383px;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2024/3q/m-image__rewards.png) no-repeat 50% 0 /360px}
    .benefitbox--apr .section__reword .box__tip{height:625px;margin:20px auto 0;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2024/3q/m-image__tip.png) no-repeat 50% 0 /313px}
}

/***************************/
/**** 25년 05월 ****/
/***************************/
/* 혜택1 */
.benefitbox--may .section__benefit1{width:100%;background:#eef7ff;padding-bottom:0;}
.benefitbox--may .section__benefit1 .box__content{position: relative;width:900px;height:461px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/03/image__dec_benefit1_1_2.png) no-repeat 50% 0 /900px}
.benefitbox--may .section__benefit1 .button__notice{position: absolute;top:368px;right:323px; display: block;width:90px;height:26px;text-indent: -999em;overflow: hidden;background-color: transparent;}
@media screen and (max-width:919px){
    .benefitbox--may .section__benefit1{padding-bottom:0}
	.benefitbox--may .section__benefit1 .box__content{width:360px;height:383px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/03/image__dec_benefit1_1_2_mo.png) no-repeat 50% 0 /360px}
    .benefitbox--may .section__benefit1 .button__notice{top:307px;right:98px;width:67px;height:18px;}
}

/* 혜택2(이달의 혜택) */
.benefitbox--may .section__benefit2{width:100%;background-image: linear-gradient(133deg, #27b2ed -21%, #8c31d4 135%, #8b33d5 135%);}
.benefitbox--may .section__benefit2 .box__content{height:1170px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/04/image__dec_benefit2_1.png) no-repeat 50% 0 /900px}
.benefitbox--may .section__benefit2 .button__notice{background-position:0 -499px;opacity:0.5;}
@media screen and (max-width:919px){
    .benefitbox--may .section__benefit2{padding-bottom:40px;background-image: linear-gradient(95deg, #52bfee 2%, #8058ff 90%);}
    .benefitbox--may .section__benefit2 .box__content{width:360px;height:1305px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/04/image__dec_benefit2_1_mo.png) no-repeat 50% 0 /360px}
    .benefitbox--may .section__benefit2 .button__notice{margin-top:20px;opacity:0.65;background-position:0 -525px}
    .benefitbox--may #anchor__notice-applepay .button__notice-toggle,
    .benefitbox--may #anchor__notice-living .button__notice-toggle,
    .benefitbox--may #anchor__notice-membership .button__notice-toggle{padding:18px 0;line-height:20px;}
}

/* 혜택3(추가 혜택) */
.benefitbox--may .section__benefit3{position: relative;width:100%;padding-bottom:80px;background:#fff}
.benefitbox--may .section__benefit3 .icon__plus{width:80px;height:80px;position: absolute;top:-40px;left:50%;transform: translateX(-50%);background-position:-226px -500px;}
.benefitbox--may .section__benefit3 .box__content{height:708px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2024/3q/image__benefit3_ver2.png) no-repeat 50% 0 /1440px}
@media screen and (max-width:919px){
    .benefitbox--may .section__benefit3{padding-bottom:80px}
    .benefitbox--may .section__benefit3 .icon__plus{display: none;}
    .benefitbox--may .section__benefit3 .box__content{width:360px;height:563px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2024/3q/m-image__benefit3_ver2.png) no-repeat 50% 0 /360px}
}

/* 적립혜택 */
.benefitbox--may .section__reword .box__reword{height:613px;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2024/3q/image__rewards.png) no-repeat 50%  0 /770px}
.benefitbox--may .section__reword .box__tip{height:724px;margin:30px auto 0;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2024/3q/image__tip.png) no-repeat 50% 0 /580px}
.benefitbox--may .section__reword .box__reword-info{width:584px;}
.benefitbox--may .section__reword .box__reword-info .text__info.text__info-add{margin-top:20px;padding-top:0;border-top:0;}
@media screen and (max-width:919px){
    .benefitbox--may .section__reword .box__reword{height:383px;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2024/3q/m-image__rewards.png) no-repeat 50% 0 /360px}
    .benefitbox--may .section__reword .box__tip{height:625px;margin:20px auto 0;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2024/3q/m-image__tip.png) no-repeat 50% 0 /313px}
}


/***************************/
/**** 25년 06월 ****/
/***************************/

/* 혜택1 */
.benefitbox--jun .section__benefit1{width:100%;background:#E4F2FF;padding-bottom:0;}
.benefitbox--jun .section__benefit1 .box__content{position: relative;width:100%;height:835px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/06/image__benefit-event.png) no-repeat 50% 0 /1440px}
@media screen and (max-width:919px){
    .benefitbox--jun .section__benefit1{padding-bottom:0}
	.benefitbox--jun .section__benefit1 .box__content{width:360px;height:664px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/06/image__benefit-event_mo.png) no-repeat 50% 0 /360px}
}


/* 혜택2(이달의 혜택) */
.benefitbox--jun .section__benefit2{width:100%;padding-bottom:80px;background: linear-gradient(100deg, #27B2ED -12.33%, #8C31D4 120.8%, #8B33D5 120.8%);}
.benefitbox--jun .section__benefit2 .text__benefit-title{padding: 80px 0 40px;text-align: center;color: #FFF;font-family: "Gmarket Sans";font-size: 46px;font-weight: 700;line-height: 55px;}
.benefitbox--jun .section__benefit2 .box__content{height:590px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/06/image_benefit-monthly.png) no-repeat 50% 0 /1440px}
.benefitbox--jun .section__benefit2 .button__notice{margin-top: 40px;background-position: 0 -499px;opacity: 0.5;}
@media screen and (max-width:919px){
    .benefitbox--jun .section__benefit2{padding:0 0 40px 0}
	.benefitbox--jun .section__benefit2 .text__benefit-title{padding: 50px 0 30px;font-size: 28px;line-height: 30px;}
    .benefitbox--jun .section__benefit2 .box__content{height:1485px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/06/image_benefit-monthly_mo.png) no-repeat 50% 0 /360px}
    .benefitbox--jun .section__benefit2 .button__notice {margin-top: 20px;opacity: 0.65;background-position: 0 -525px;}
}


/* 혜택3(추가 혜택) */
.benefitbox--jun .section__benefit3{position: relative;width:100%;padding-bottom:80px;background:#fff}
.benefitbox--jun .section__benefit3 .icon__plus{width:80px;height:80px;position: absolute;top:-40px;left:50%;margin-left: -40px;background-position:-226px -500px;}
.benefitbox--jun .section__benefit3 .box__content{height:1050px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/06/image__benefit3.png) no-repeat 50% 0 /1440px}
@media screen and (max-width:919px){
    .benefitbox--jun .section__benefit3{padding-bottom:50px}
    .benefitbox--jun .section__benefit3 .icon__plus{transform: scale(.75);} /* 60x60 */
    .benefitbox--jun .section__benefit3 .box__content{width:360px;height:1030px;margin:0 auto;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/06/image__benefit3_mo.png) no-repeat 50% 0 /360px}
}

/* 적립혜택 */
.benefitbox--jun .section__reword .box__reword{height:994px;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/06/image__rewards.png) no-repeat 50%  0 /770px}
.benefitbox--jun .section__reword .box__tip{height:734px;margin:30px auto 0;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/06/image__tip.png) no-repeat 50% 0 /600px}
.benefitbox--jun .section__reword .box__reword-info{width:584px;}
.benefitbox--jun .section__reword .box__reword-info .text__info.text__info-add{margin-top:20px;padding-top:0;border-top:0;}
@media screen and (max-width:919px){
    .benefitbox--jun .section__reword .box__reword{height:685px;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/06/image__rewards_mo.png) no-repeat 50% 0 /360px}
    .benefitbox--jun .section__reword .box__tip{height:675px;margin:20px auto 0;background:url(//pics.mysmilepay.com/smilecard/plcc/edition3/2025/06/image__tip_mo.png) no-repeat 50% 0 /320px}
}