.benefit_wrap * {padding: 0; margin: 0; border:0;}
.benefit_wrap img {width: 100%; }
input:focus {outline:none;}
a { text-decoration:none }
a:hover{text-decoration:none;}
li { list-style: none;}
.benefit_wrap a {width: 100%; display: block;}

/* °ψΕλ */
.benefit_wrap {position: relative; overflow: hidden;}
.benefit_wrap::after  {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 620px; background: #00152A; z-index: -1;}
.benefit_wrap .inner {max-width: 750px; margin: 0 auto; display: block; position: relative; padding: 0 15px; box-sizing: border-box;}
.benefit_wrap h2 {font-weight: normal; color:#fff; font-size:27px; font-family:Noto-B; margin: 5px 0 15px;}
.benefit_wrap h3 {font-weight: normal;}
.benefit_wrap .txt_bl {color: #1C8FED;}
.benefit_wrap .txt_w {color: #fff;}
.benefit_wrap .txt_g {color: #949494; letter-spacing: -0.45px;}
.benefit_wrap .txt_mg {color: #6c6c6c; letter-spacing: -0.45px;}
.benefit_wrap .txt_dg {color: #3A3A3A;} 
.benefit_wrap .flex {display: flex;}
.benefit_wrap .flex_col {display: flex; flex-direction: column; gap: 15px; align-items: center;}
.benefit_wrap .sec {width: 100%; height: auto; padding: 40px 0 40px; box-sizing: border-box;}
.benefit_wrap .sec .tit {text-align: center;}
.benefit_wrap .sec .tit p {margin-top: 5px;}
.benefit_wrap .sec .cont ul{margin-top: 20px;}

.goto {position: absolute; top: -100px; left: 50%; transform: translateX(-50%); border-radius: 15px; background: #fff;  box-shadow: 0px 10px 20px #00000029; box-sizing: border-box; width: calc(100% - 15px); z-index: 99; padding: 7px;}
.goto ul {gap: 10px;}
.goto ul li {width: 100%; height: 40px; line-height: 40px; text-align: center; border-radius: 10px; transition: all 0.3s;}
.goto ul li.on {background: #1A1A1A;}
.goto ul li.on p {color: #fff ;}
.goto.fixed {position: fixed; top: 60px;} 

.sec1 {width: 100%; margin: 0 auto;  height: 500px; background: url('//image5.compuzone.co.kr/img/images/pay_benefit/m_sec1_bg.png') center center/cover no-repeat;}
.sec1  .inner {padding: 0; }
.sec1 .tit_wrap{padding-top: 50px; box-sizing: border-box; animation: tranY 0.5s 0.5s ease-in-out forwards; opacity: 0; transform: translateY(30px); text-align: center;}
.sec1 .obj_wrap {width: 375px; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.sec1 .obj_wrap span {position: absolute;  transform: scale(0); transform-origin: center center;}
.sec1 .obj_wrap span:nth-child(1) {top: 204px; left: 35px; animation: sca 0.4s 0.8s ease-in-out forwards; width: 312px;}
.sec1 .obj_wrap span:nth-child(2) {top: 358px; left: 35px; width: 75px;  animation: sca 0.4s 0.9s ease-in-out forwards, flo 2s 1.5s ease-in-out forwards infinite;}
.sec1 .obj_wrap span:nth-child(3) {top: 274px; left: 204px; width: 124px; animation: sca 0.4s 0.9s ease-in-out forwards, flo 2s 1.5s ease-in-out forwards infinite;}
@keyframes tranY {
    0% {transform: translateY(30px); opacity: 0;}
    100% {transform: translateY(0px); opacity: 1;}
}
@keyframes sca {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}
@keyframes flo {
    0% {transform: translateY(0px);}
    50% {transform: translateY(20px);}
    100% {transform: translateY(0px);}
}

.sec2 {border-radius: 75px 0px 0px 0px; background: #fff;}
.sec2 .card_wrap li{width: 100%; height: auto; background: #F9F9F9; border-radius: 15px; overflow: hidden; position: relative;}
.sec2 .card_wrap .bt {width: 100%; height: 100px; }
.sec2 .card_wrap .card {width: calc(100% - 20px); max-width: 260px; height: 100px; border-radius: 10px 10px 0px 0px; position: relative; animation: gradient 8s ease infinite;  margin: 0 auto;}
.sec2 .card_wrap .card > div {width: 165px; position: absolute; top: 20px; left: 20px; z-index: 1;} 
.sec2 .card_wrap .card::before {content: '';width: calc(100% - 10px); max-width: 250px; height: 96px; backdrop-filter: brightness(120%) blur(30px); -webkit-backdrop-filter: brightness(120%) blur(30px); position: absolute; top: 5px; left: 5px;border-radius: 8px 8px 0px 0px;}
.sec2 .card_wrap .card::after {content: ''; width: 33px; height: 30px; position: absolute; top: 45px; right: 20px; background: url('//image5.compuzone.co.kr/img/images/pay_benefit/m_card_obj.png') top center/contain no-repeat;}
@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 0%;}
	100% {background-position: 0% 50%;} 
}
.sec2 .card_wrap .card1 {background: radial-gradient(#F33E50,#F23F8D,#F33E50,#F23F8D); background-size: 300% 300%; box-shadow: 10px 20px 24px rgb(243, 62, 80, 0.16);}
.sec2 .card_wrap .card2 {background: radial-gradient(#FFB200,#FF5E00,#FFB200,#FF5E00); background-size: 300% 300%; box-shadow: 10px 20px 24px rgb(255,178,0, 0.16);}
.sec2 .card_wrap .card3 {background: radial-gradient(#1B50D9,#1A90D9,#1B50D9,#1A90D9); background-size: 300% 300%; box-shadow: 10px 20px 24px rgb(27,80,217, 0.16);}
.sec2 .card_wrap .card4 {background: radial-gradient(#2090FF,#21DAFF,#2090FF,#21DAFF); background-size: 300% 300%; box-shadow: 10px 20px 24px rgb(32,144,255, 0.16);}
.sec2 .card_wrap .card5 {background: radial-gradient(#FF5759,#FF5792,#FF5759,#FF5792); background-size: 300% 300%; box-shadow: 10px 20px 24px rgb(255,87,89, 0.16);}
.sec2 .card_wrap .card6 {background: radial-gradient(#0066B3,#00A1B3,#0066B3,#00A1B3); background-size: 300% 300%; box-shadow: 10px 20px 24px rgb(0,102,179, 0.16);}
.sec2 .card_wrap .card7 {background: radial-gradient(#009376,#009445,#009376,#009445); background-size: 300% 300%; box-shadow: 10px 20px 24px rgb(0,147,118, 0.16);}
.sec2 .card_wrap .card8 {background: radial-gradient(#000000,#4D4D4D,#000000,#4D4D4D); background-size: 300% 300%; box-shadow: 10px 20px 24px rgb(0,0,0, 0.16);}
.sec2 .card_wrap .card9 {background: radial-gradient(#0067AC,#009FAB,#0067AC,#009FAB); background-size: 300% 300%; box-shadow: 10px 20px 24px rgb(0,103,172, 0.16);}
.sec2 .card_wrap .card_m {width: 100%;width: 345px; height: 100px; margin: 0 auto;}

.badge_list {gap: 5px; justify-content: center; margin-bottom: 10px;}
.badge_list span {width: auto; height: 24px; line-height: 24px; padding: 0 8px; box-sizing: border-box; background: #1A1A1A; border-radius: 50px; font-size: 12px; font-family: 'noto-M'; color: #fff;} 
.sec2 .cont .txt_wrap {text-align: center;  padding: 20px 20px 0; box-sizing: border-box;}
.sec2 .cont .txt_wrap .main_tit {font-size: 17px; font-family: 'noto-B'; color: #3A3A3A; margin: 0;}
.sec2 .cont .txt_wrap .txt_dg {margin-top: 2px;}
.sec2 .cont .txt_wrap .txt_mg {margin: 5px 0 20px;}

.sec3 {background: #f9f9f9;}
.sec3.on {background: #fff; border-radius: 75px 0px 0px 0px;}
.sec3 .cont ul li {width: 100%;}
.sec3 .cont ul li a{width: 100%; min-height: 140px; border: 1px solid #D8D8D8; background: #fff; border-radius: 15px; padding: 20px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; }
.sec3 .cont ul li a > span {width: 80px; height: 80px;}
.sec3 .cont .txt_wrap {width: calc(100% - 90px);}
.sec3 .cont .txt_wrap p {letter-spacing: -0.55px;}
.sec3 .cont .txt_wrap p.txt_mg { margin-top: 4px;}
.sec3 .cont .badge_list {justify-content: flex-start; flex-wrap: wrap;}

.sec4 {background: #00152A; padding: 100px 0; box-sizing: border-box; overflow: hidden; position: relative;}

.sec4::before {content: ''; width: 140px; height: 140px; position: absolute; top: 50px; left: -72px; background: url('//image5.compuzone.co.kr/img/images/pay_benefit/sec4_obj1.png') center center/contain no-repeat; opacity: 0.4;}
.sec4::after {content: ''; width: 342px; height: 318px; position: absolute; bottom: -270px; right: -100px; background: url('//image5.compuzone.co.kr/img/images/pay_benefit/sec4_obj2.png') center center/contain no-repeat; opacity: 0.4;}
.sec4 .inner {z-index: 1;}
.sec4 .tit {margin-bottom: 20px;}
.sec4 .tit p {color: #d8d8d8}
.sec4 .tab {width: 100%; border-radius: 28px; background: rgb(255, 255, 255, 0.4); margin-bottom: 15px;}
.sec4 .tab li{padding: 10px 0; box-sizing: border-box; border-radius: 28px; width: 100%; height: 45px;}
.sec4 .tab li p{font-family: 'noto-M'; font-size: 17px; color: #fff; opacity: 0.4; text-align: center;}
.sec4 .tab li.on {background: #0D6DE3; border: 1px solid transparent;}
.sec4 .tab li.on p {opacity: 1;}
.sec4_box {width: 100%; border-radius: 15px; background: #fff; padding: 20px 15px; box-sizing: border-box;  display: none;}
.sec4_box.on {display: block;}
.sec4_box .tab {gap: 10px;}
.sec4_box .tab li {width: max-content; padding: 0 15px; height: 38px; line-height: 38px; border-radius: 500px; border: 1px solid #D8D8D8;}
.sec4_box .tab li p {font-family: 'noto-R'; font-size: 14px; color: #3A3A3A; opacity: 1;}
.sec4 .tab li.on p {color: #fff;}
.sec4_box .tabcon {display: none; max-height: 405px; overflow: hidden; position: relative; transition: all 0.3s;}
.sec4_box .tabcon.on {display: block;}
.sec4_box .tabcon .plus {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background:transparent linear-gradient(180deg, transparent 70%, #FFFFFF 100%); text-align: center; }
.sec4_box .tabcon .plus span {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px;}
.sec4_box .tabcon .plus i {display: inline-block; width: 24px; height: 24px; background: url('//image5.compuzone.co.kr/img/images/pay_benefit/arrow.png') center center/contain no-repeat; transition: all 0.3s;}
.sec4_box .tabcon .plus.on {height: 24px; background: transparent; top: unset; bottom: 0;}
.sec4_box .tabcon .plus.on i {transform: rotate(180deg);}
.sec4table {width: 100%; overflow-x: scroll; transition: all 0.3s;}
.sec4table table {width: 100%;}
.sec4table th{background: #F9F9F9; color: #3A3A3A; font-family: 'noto-M'; font-size: 14px; font-weight: normal; height: 40px; border-top: 1px solid #E8E8E8; border-bottom: 1px solid #E8E8E8;}
.sec4table td {border-bottom: 1px solid #E8E8E8; background: #fff; text-align: center; font-family: 'noto-R'; font-size: 14px; color: #3A3A3A; padding: 10px; box-sizing: border-box; white-space: nowrap;}
.sec4table td.line{border: none;}
.sec4table.textL td:last-child {text-align: left;}
.sec4table td p {color: #949494;}
.sec4table td.card img {display: block; width:fit-content; height:25px; margin:0 auto;}
.sec4table .card span {display: flex; align-items: center; justify-content: center;}
.sec4table::-webkit-scrollbar{display: none;}
.sec4 .noti_list {flex-direction: column; gap: 4px; margin-top: 15px;}
.sec4 .noti_list p { font-family: 'noto-R'; font-size: 13px; color: #6c6c6c;}

.sec5 .inner {padding: 0;}
.sec5 ul {padding: 0 15px; gap: 10px; overflow-x: scroll; box-sizing: border-box;}
.sec5 ul li a{width: 323px;}
.sec5 ul::-webkit-scrollbar{display: none;}