/* --------------------------------------
	사이트맵 고정
---------------------------------------- */
.contentWrap{width:auto !important;}
body.no-scroll{
    overflow:hidden
}
.new_gnb-wrap{
    position: sticky !important;
}
.new_gnb-wrap.active{
    z-index: 1402;
}
.menu-list.active{
    overflow-y: scroll !important;
    height: calc(100dvh - 150px);
    top:0;
}
.new_gnb-wrap{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    z-index: 1400;
}
.new_footer{
    position: relative;
    z-index: 1400;
}
.subHead{
    position: fixed;
    z-index:10;
}

/* --------------------------------------
	혜택모아보기 메인
---------------------------------------- */
#benefit{
    font-family:Pretendard;
}
.scroll-section {
    position: relative;
    height: calc(100vh - 125px);
    overflow: hidden;
}

.txt {
    position: absolute;
    top: 50%;
    left: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transform: translate(-50%, -50%);
    font-size: 64px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    color:rgba(22,17,33,1);
    line-height:74px;
    letter-spacing:-2px;
}

#benefit .item1 .t1_img {
    display:inline-block;
    margin:0 17px;
    width:154px;
    transform:rotate(1.76deg);
}
#benefit .item1 .t2_img {
    display:inline-block;
    margin:0 17px;
    width:132px;
}
#benefit .item1 .t3_img {
    display:inline-block;
    margin:0 17px;
    width:116px;
    transform:rotate(5.73deg);
}
#benefit .item1 .t4_img {
    display:inline-block;
    margin:0 17px;
    width:122px;
}
#benefit .item1_bg {
    position:fixed;
    bottom:0;
    width:100%;
    height:50%;
    z-index:10;
    transition:opacity 0.3s ease;
}
#benefit .item1_bg.bg1 {
    background:linear-gradient(180deg,rgba(153,51,255,0) 0%,rgba(153,51,255,0.21) 100%);
    opacity:0;
}
#benefit .item1_bg.bg2 {
    background:linear-gradient(180deg,rgba(66,96,255,0) 0%,rgba(66,96,255,0.2) 100%);
    opacity:0;
}

.item1_bg.active {
    opacity: 1 !important;
}

.item2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 20;
}

.item2-inner {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 48px 48px 0 0;
    transform: translateY(100%);
    will-change: transform, border-radius;
    background:#000 url('../images/benefit/img_kv_background.png') no-repeat;
    background-size: cover;
    z-index: 1;
}

.donut-img {
    position: absolute;
    top: 150%;
    left: 50%;
    /*transform: translate(-50%, -50%) translateZ(0);*/
     transform: translate(-50%, -35%) translateZ(0); 
    width: 400px;
    will-change: top;
    z-index: 2;
    mix-blend-mode:difference;
}

.item2 .text {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translate(-50%, -50%); */
     transform: translate(-50%, 0%); 
    font-size: 64px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    text-align: center;
    z-index: 10;
    letter-spacing: -2px;
    mix-blend-mode:difference;
}

.dim-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background 0.3s ease;
    z-index: 15;
    display:none
}

.dim-overlay.dimmed {
    background: rgba(0, 0, 0, 0.5); /* 어두운 처리 */
    display:block;
}

.item3 {
    position: relative;
    z-index: 20;
    visibility: hidden;
}

.item3.active .item3-cover {
    transform: translateY(0%);
}
.item3-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #fff;
    border-radius: 48px 48px 0 0;
    margin-top: -100vh; /* 커버와 이어지게 만들기 */
    padding-top: 1px;
}

#benefit .item3 .info-text {
	color:#000;
	font-size:48px;
	font-weight:600;
	line-height:56px;
	letter-spacing:-1.5px;
	text-align:center;
	margin:120px 0 60px;
	z-index:30;;
}
#benefit .card-wrap {
	z-index:30;
}
#benefit .card-wrap ul {
	display:flex;
	justify-content:space-between;
	align-content:center;
	flex-wrap:wrap;
	max-width:1140px;
	margin:0 auto 120px;
}
#benefit .card-wrap ul li {
	position:relative;
	overflow:hidden;
	width:372px;
	height:456px;
	margin-bottom:12px;
	border-radius:24px;
	transition:transform 0.3s ease,box-shadow 0.3s ease;
	/* 부드러운 이동 효과 */flex-shrink:0;
	will-change:transform;
}
#benefit .card-wrap ul li:nth-child(1) {
	background:rgba(0,0,0,1);
}
#benefit .card-wrap ul li:nth-child(1) .info-img {
	position:absolute;
	top:187px;
	left:55px;
}
#benefit .card-wrap ul li:nth-child(1) .info-img img {
	width:262.5598084722255px;
}
#benefit .card-wrap ul li:nth-child(1) .benefit-link {
	background:rgba(255,255,255,1);
}
#benefit .card-wrap ul li:nth-child(2) {
	background:linear-gradient(180deg,#10D6B5 0%,#5837FF 103.51%),linear-gradient(0deg,rgba(0,0,0,0.02),rgba(0,0,0,0.02));
}
#benefit .card-wrap ul li:nth-child(2) a .badge span{background: rgba(0, 0, 0, 0.15);}
#benefit .card-wrap ul li:nth-child(2) .info-img {
	position:absolute;
    top: 174px;
    left: 58px; 
}
#benefit .card-wrap ul li:nth-child(2) .info-img img {
	width:258.48px;
}
#benefit .card-wrap ul li:nth-child(3) {
	background:linear-gradient(360deg,#E6007E 0%,#9933FF 100%);
}
#benefit .card-wrap ul li:nth-child(3) a .badge span{background: rgba(0, 0, 0, 0.15);}
#benefit .card-wrap ul li:nth-child(3) a .text {
	font-size:30px
}
#benefit .card-wrap ul li:nth-child(3) .info-img {
	position:absolute;
	top:203px;
	left:79px;
}
#benefit .card-wrap ul li:nth-child(3) .info-img img {
	width:187.33px;
}
#benefit .card-wrap ul li:nth-child(4) {
	background:rgba(0,0,0,1);
}
#benefit .card-wrap ul li:nth-child(4) .info-img {
	position:absolute;
	top:232px;
	left:54.18px;
}
#benefit .card-wrap ul li:nth-child(4) .info-img img {
	width:269.64px;
}
#benefit .card-wrap ul li:nth-child(4) .benefit-link {
	background:rgba(255,255,255,1);
	z-index:2;
}
#benefit .card-wrap ul li:nth-child(4) a::after {
	content:'';
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:100px;
	background:linear-gradient(0deg,#000000 0%,rgba(0,0,0,0) 100%);
	z-index:1;
}
#benefit .card-wrap ul li:nth-child(5) {
	background:linear-gradient(180deg,#9933FF 0%,#4260FF 100%);
}
#benefit .card-wrap ul li:nth-child(5) a .badge span{background: rgba(0, 0, 0, 0.15);}
#benefit .card-wrap ul li:nth-child(5) .info-img {
	position:absolute;
	top:209.29px;
	left:43.18px;
}
#benefit .card-wrap ul li:nth-child(5) .info-img img {
	width: 281.5px;
}
#benefit .card-wrap ul li:nth-child(6) {
	background:rgba(0,0,0,1);
}
#benefit .card-wrap ul li:nth-child(6) .info-img {
	position:absolute;
	top: 189px;
    left: 26px;
}
#benefit .card-wrap ul li:nth-child(6) .info-img img {
	width:320px;
}
#benefit .card-wrap ul li:nth-child(6) .benefit-link {
	background:rgba(255,255,255,1);
	z-index:2;
}
#benefit .card-wrap ul li:nth-child(6) a::after {
	content:'';
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:100px;
	background:linear-gradient(0deg,#000000 0%,rgba(0,0,0,0) 100%);
	z-index:1;
}
#benefit .card-wrap ul li:hover {
	transform:translateY(-20px);
	box-shadow:0px 20px 48px 0px rgba(0,0,0,0.3);
}
#benefit .card-wrap ul li .benefit-link {
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:356px;
	left:272px;
	width:80px;
	height:80px;
	border-radius:50%;
	background:rgba(0,0,0,1);
	opacity:0;
	transition:opacity 0.5s ease
}
#benefit .card-wrap ul li .benefit-link img {
	width:21px;
	height:21px
}
#benefit .card-wrap ul li:hover .benefit-link {
	opacity:1;
}
#benefit .card-wrap ul li:hover .benefit-link img {
	width:21px;
	height:21px
}
#benefit .card-wrap ul li a {
	position:relative;
	display:block;
	width:100%;
	height:100%;
	padding:36px 32px;
    box-sizing: border-box;
}
#benefit .card-wrap ul li a .badge span {
	top:36px;
	left:32px;
	gap:10px;
	color:#fff;
	font-weight:500;
	font-size:16px;
	line-height:22px;
	letter-spacing:-0.5px;
	border-radius:17px;
	padding-top:6px;
	padding-right:12px;
	padding-bottom:6px;
	padding-left:12px;
	background:rgba(255,255,255,0.15);
	backdrop-filter:blur(12px);
	margin-right:4px
}
#benefit .card-wrap ul li a .text {
	color:#fff;
	font-weight:600;
	font-size:32px;
	line-height:130%;
	letter-spacing:-1px;
	margin-top:16px
}
#benefit .card-wrap ul li a .text span {
	display:block;
	color:rgba(255,255,255,0.6);
}
#benefit .customer-benefit {
	z-index:30;;
	margin-bottom:120px;
	min-width:1140px;
}
#benefit .customer-benefit h3 {
	font-weight:600;
	font-size:48px;
	line-height:56px;
	letter-spacing:-1.5px;
	text-align:center;
	color:#000;
	margin-bottom:20px
}
#benefit .customer-benefit p {
	font-weight:400;
	font-size:26px;
	line-height:34px;
	letter-spacing:-0.8px;
	text-align:center;
	color:#000;
	margin-bottom:50px
}
#benefit .customer-benefit p span {
	background:linear-gradient(90deg,#9933FF 0%,#6955FF 67.43%);
	color:transparent;
	-webkit-text-fill-color:transparent;
	background-clip:text;
	-webkit-background-clip:text;
}
#benefit .customer-benefit ul {
	display:flex;
	justify-content:space-between;
	align-content:center;
	flex-wrap:wrap;
}
#benefit .customer-benefit ul li {
	position:relative;
	width:566px;
	height:215px;
	background:none;
	background:rgba(246,247,248,1);
	border-radius:24px;
	transition:transform 0.3s ease,box-shadow 0.3s ease;
}
#benefit .customer-benefit ul li a {
	display:inline-block;
	width:100%;
	height:100%;
	padding:30px;
}
#benefit .customer-benefit ul li a p {
	text-align:left;
	font-weight:600;
	font-size:26px;
	line-height:125%;
	letter-spacing:-1.04px;
	color:#000
}
#benefit .customer-benefit ul li:first-child img {
	position:absolute;
	top:33px;
	left:305.45px;
	width:241.06px;
}
#benefit .customer-benefit ul li:last-child img {
	position:absolute;
	top:17.83px;
	left:316px;
	width:236.7px;
}
#benefit .customer-benefit ul li:hover {
	transform:translateY(-10px);
	background:rgba(246,247,248,1);
	box-shadow:0px 20px 48px 0px rgba(0,0,0,0.15);
}
#benefit .customer-benefit ul li:hover a p {
	width:fit-content;
	background:linear-gradient(90deg,#9C39FF 0%,#6955FF 67.43%,#6788FF 100%);;
	color:transparent;
	-webkit-text-fill-color:transparent;
	background-clip:text;
	-webkit-background-clip: text;
}
#benefit .customer-benefit ul{
    opacity: 0;
    transform: translateY(100px); /* 기존 40px보다 더 아래에서 시작 */
    transition: all 0.8s ease-out;
}
#benefit .customer-benefit ul.fade-up {
    opacity: 1;
    transform: translateY(0);
}

.benefit-sub-location li a, .benefit-sub-location li strong{color:#fff !important}
.benefit-sub-location li a {
    background: url(/web/images/global/ico-arr-right-xs2-white.png) no-repeat 100% center !important;
    background-size: 16px !important;
}

/* --------------------------------------------------------------
	혜택모아보기 상세페이지 : 상단 비주얼 영역
---------------------------------------------------------------- */
    .visual-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        z-index: 1;
        transition: opacity 0.4s ease, filter 0.4s ease;
        font-family: Pretendard;
    }
    .visual-wrap.benefitDaemyungBg{background: linear-gradient(180deg, #10D6B5 0%, #5837FF 120%);}
    .visual-wrap.benefitUplusBg{background: linear-gradient(360deg, #E6007E 0%, #9933FF 100%);}
    .visual-wrap .visual-img, .visual-wrap .visual-tit, .visual-wrap .visual-desc {
        will-change: transform, opacity, filter;
        backface-visibility: hidden;
        transform: translateZ(0); /* GPU 강제 활성화 */
    }
    .visual-wrap .visual-img{
        animation: floatY 2.5s ease-in-out infinite;
        width:309px;
        margin-bottom:27px;
        margin-top: 150px;
    }
    @keyframes floatY {
        0%   { transform: translateY(0); }
        50%  { transform: translateY(-10px); }
        100% { transform: translateY(0); }
    }
    .visual-wrap .visual-tit{
        font-size:22px;
        font-weight: 600;
        line-height:28px;
        letter-spacing: -0.8px;
        margin: 0 0 24px;
    }
    .visual-wrap .visual-desc{
        font-size:56px;
        font-weight: 600;
        line-height:120%;
        letter-spacing: -1.5px;
        text-align: center;
        color:#fff;
        margin:0
    }
   
/* --------------------------------------
	혜택모아보기 상세페이지
---------------------------------------- */
.benefit-container * {font-family:Pretendard; color:#000;}
.benefit-container {position: relative; margin-top: 100dvh; z-index: 1400; font-family: Pretendard;}
.benefit-body {background: #fff; min-height:100dvh;}
.fixed {position:fixed; top:0; left:0; z-index:9;}

/* 탭 */
.benefit-nav {background:rgba(255,255,255,1); width:100%; padding:20px 0;   z-index: 10; border-top-left-radius:48px ; border-top-right-radius:48px ;}
.benefit-nav.shadow {box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.12);} 
.benefit-nav .tab {display:flex; justify-content:center; gap:16px; position:relative; width:100%; counter-reset:liCount;}
.benefit-nav .tab li {counter-increment:liCount;}
.benefit-nav .tab li button {position:relative; display:block; width:276px; height:52px; padding:15px 16px 15px 52px; font-weight:500; font-size:16px; line-height:22px; letter-spacing:-0.5px; text-align:center; border-radius:50px; background:#F0F2F3; color:#969898;}
.benefit-nav .tab li button::before {content:counter(liCount); display:block; position:absolute; top:4px; left:4px; font-family:outfit; font-size:18px; line-height:44px; font-weight:600; width:44px; height:44px; border-radius:50px; background:#fff; color:#969898; text-align:center;}
.benefit-nav .tab li button:hover,
.benefit-nav .tab li button.on {background:#000; color:#fff;}
.benefit-nav .tab li button:hover::before,
.benefit-nav .tab li button.on::before {background:#4260FF; color:#fff;}

/* contents common */
.benefit-body > div > div,
.benefit-body > div > div > .inner_wrap {width:1142px; margin:0 auto;}
.benefit-body > div > div {padding:96px 0;}
.benefit-body .bg_gray {background: #F6F7F8; width:100%;}
.benefit-body .bg_black {background: #000; width:100%;}
.benefit-body .bg_gradient {background:linear-gradient(90deg, #9933FF 0%, #6955FF 67.43%);}
.benefit-body strong {font-weight:inherit;}

.benefit-body h2.header_group {padding-bottom:48px; text-align: center;}
.benefit-body h2.header_group span {display: block;}
.benefit-body h2.header_group .sub {font-weight:600; font-size:24px; line-height: 150%; letter-spacing: -0.75px; color:#666769; margin-bottom: 20px;}
.benefit-body h2.header_group .main {font-weight:600; font-size:48px; line-height: 56px; letter-spacing: -1.5px;}
.benefit-body .bg_black h2.header_group .sub {color:#969898;}
.benefit-body .bg_black h2.header_group .main {color:#fff;}

.benefit-body h3.header_group {margin-bottom:32px; font-weight:600; font-size:40px; line-height: 52px; letter-spacing: -1.2px;  position:relative; padding-left:58px;}
.benefit-body h3.header_group::before {content:''; display:block; position:absolute; left:0; background-repeat:no-repeat; background-size:cover;}
.benefit-body h3.header_group.check::before {width:44.64px; height:44px; background-image:url('/web/images/benefit/ico_h3_check.png'); top:4px;}
.benefit-body h3.header_group.gift::before {width:47.6px; height:49px; background-image:url('/web/images/benefit/ico_h3_gift.png'); top:2px;}

.benefit-body .col_group {display:flex; justify-content:space-between; gap:12px;}
.benefit-body .txt_group span {display:block;}

.benefit-body .txt_gradient {background:linear-gradient(90deg, #9933FF 0%, #6955FF 67.43%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.benefit-body .bg_black .txt_gradient {background:linear-gradient(90deg, #9C39FF 0%, #6955FF 67.43%, #6788FF 100%),
linear-gradient(0deg, rgba(224, 201, 255, 0.1), rgba(224, 201, 255, 0.1)); background-clip:text; -webkit-background-clip:text;}
.benefit-body .txt_ref {font-weight:500; font-size:14px; line-height:22px; letter-spacing:-0.5px; color:#bdbdbd;}

.benefit-body .btn {width:297px; height:64px; padding:18px 0; border-radius:50px; box-sizing:border-box; font-weight:600; font-size:20px; line-height:140%; letter-spacing:-0.75px; color:#fff; text-align:center; background: transparent;}
.benefit-body .btn_arrow {position:relative; padding:18px 0 18px 26px; text-align:left;}
.benefit-body .btn_arrow::after {content:''; display:block; width:15px; height:15px; position:absolute; top:25px; right:26px; background:url(/web/images/benefit/ico_arrow_btn.png) no-repeat 0 0;}
.benefit-body .btn_gradient {background:linear-gradient(90deg, #9933FF 0%, #6955FF 67.43%); position:relative;}
.benefit-body .btn_gradient:hover {background: linear-gradient(90deg, #9C39FF 0%, #6955FF 67.43%, #6788FF 100%);}
.benefit-body .btn_gradient span {display:block; width:100%; height:100%; position:absolute; top:0; left:0;  color:#fff; padding:18px 0 18px 26px; border-radius:50px; box-sizing:border-box; font-weight:600; font-size:20px; line-height:140%; letter-spacing:-0.75px;}
.benefit-body .btn_gradient:hover span {background:linear-gradient(0deg, rgba(22, 23, 38, 0.4), rgba(22, 23, 38, 0.4));}
.benefit-body .btn_black {background:rgba(0,0,0,1);}
.benefit-body .btn_black:hover {background:rgba(0,0,0,0.75);}
.benefit-body .btn_opacity {border:1px solid rgba(255,255,255,0.3);}
.benefit-body .btn_opacity:hover {background:rgba(255,255,255,0.1);}
.benefit-body .btn_white {background:#F0F2F3; color:#666769; width:154px;}
.benefit-body .btn_white:hover {background:#E0E4E8;}
.benefit-body .btn_txt_gradient {font-weight:500; font-size:16px; line-height:24px; letter-spacing:-0.5px; background: linear-gradient(90deg, #9435FF 0%, #6854FF 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}

.benefit-body .balloon {position:relative; border-radius:50px; background:linear-gradient(90deg, #9933FF 0%, #6955FF 67.43%); padding:5px 10px; font-weight:600; font-size:16px; line-height:22px; letter-spacing:-0.5px; color:#f6f7f8;}
.benefit-body .balloon::after {content:''; position:absolute; bottom:0; left:0; display:block; width:11px; height:8px; background:url('/web/images/benefit/ico_bubble_tail.png');}

.benefit-body .balloon.black {background:#000; padding:8px 14px; font-size:18px; line-height:24px; letter-spacing:-0.8px; color:#f6f7f8;}
.benefit-body .balloon.black::after {background:url('/web/images/benefit/ico_bubble_tail_black.png');}

.benefit-body .balloon_big {position:relative; margin-top:37px; padding:25px 0 23px 50px; box-sizing: border-box; border-radius:100px;}
.benefit-body .balloon_big::after {content: ''; display: block; width: 0; height: 0; border: 15px solid transparent; position: absolute; top: -32px; right:122px;}
.benefit-body .balloon_big.gradient {background: linear-gradient(90deg, #9933FF 0%, #6955FF 67.43%);}
.benefit-body .balloon_big.gradient::after {border-bottom: 24px solid #6955FF;}
.benefit-body .balloon_big.gradient p {font-weight:500; font-size:16px; line-height:24px; letter-spacing:-0.8px; color:#f0f2f3;}
.benefit-body .balloon_big.gradient .btn {top: 24px; right: 30px; width:326px;}
.benefit-body .balloon_big.black {background:#000;}
.benefit-body .balloon_big.black::after {border-bottom: 24px solid #000;}
.benefit-body .balloon_big h3 {margin-bottom:6px; font-weight:600; font-size:26px; line-height:34px; letter-spacing:-0.8px; color:#fff;}
.benefit-body .balloon_big .btn {position: absolute;}

/* commn : 회색박스 */
.benefit-body .box_group {display:flex; justify-content:space-between; gap:12px;}
.benefit-body .box {width:100%; border-radius:24px; background:#F6F7F8; position:relative; box-sizing:border-box;}
.benefit-body .box .tit > span,
.benefit-body .box .desc > span {display:block;}
.benefit-body .box .tit {margin-bottom:17px; font-weight:600; font-size:26px; line-height:125%; letter-spacing:-1.15px; }
.benefit-body .box .desc {font-weight:500; font-size:16px; line-height:22px; letter-spacing:-0.5px; color:#666769;}
.benefit-body .box::after {content:''; display:block; position:absolute; background-repeat:no-repeat; background-size:cover;}

.benefit-body .box_ref {border-radius:20px; background:#F0F2F3; padding:16px 0; box-sizing:border-box; text-align:center; font-weight:500; font-size:16px; line-height:22px; letter-spacing:-0.5px;}
.benefit-body .box_ref li {color:#969898;}

/* common : 소개 */
.benefit-body .about .box {width:100%; background:#F6F7F8; border-radius:24px; padding:40px 38px; position: relative;}
.benefit-body .about .box::after {content:''; position:absolute; display:block; background-size:cover; background-repeat:no-repeat; background-position:0 0;}
.benefit-body .about .box p {font-weight:400; font-size:16px; line-height:24px; letter-spacing:-0.5px; color:#666769;}
.benefit-body .about .box p strong {font-weight:600; }

/* common : 혜택 */
.benefit-body .benefits .col_group .col {width:100%; border-radius:24px; background:#fff; box-shadow:0px 0px 28px 0px rgba(0, 0, 0, 0.12); padding:40px 38px 38px; box-sizing:border-box; position:relative;}
.benefit-body .benefits .col_group .col::after {content:''; display:block; width:52px; height:52px;  position:absolute; top:220px; right:-34px; background:url('/web/images/benefit/ico_arrow_benefits.png') no-repeat 0 0; background-size:cover; z-index:1;}

.benefit-body .benefits .row_group {width:100%; display: flex; flex-flow: column; gap: 12px;}
.benefit-body .benefits .col_group .row {height:158px; border-radius:24px; background:#fff; box-shadow:0px 0px 28px 0px rgba(0, 0, 0, 0.12); padding:28px 0 0 40px; box-sizing:border-box; position:relative;}
.benefit-body .benefits .col_group .row_group.middle .row::before {content:''; display:block; width:52px; height:52px;  position:absolute; top:53px; left:-33px; background:url('/web/images/benefit/ico_arrow_benefits.png') no-repeat -62px 0; background-size:cover; z-index:1;}
.benefit-body .benefits .col_group .row_group.middle .row::after {content:''; display:block; width:52px; height:52px;  position:absolute; top:53px; right:-32px; background:url('/web/images/benefit/ico_arrow_benefits.png') no-repeat -124px 0; background-size:cover; z-index:1;}

.benefit-body .benefits .txt_group.underline {border-bottom:1px dashed rgba(0,0,0,0.2); padding-bottom:40px; margin-bottom:40px;}
.benefit-body .benefits .txt_group sub {display:block; font-weight:600; font-size:16px; line-height:22px; letter-spacing:-0.5px; color:#969898; margin-bottom:20px;}
.benefit-body .benefits .txt_group h3 {font-weight:600; font-size:30px; line-height:125%; letter-spacing:-0.75px; }
.benefit-body .benefits .txt_group p {font-weight:600; font-size:16px; line-height:22px; letter-spacing:-0.5px; color:#666769;}
.benefit-body .benefits .col_group .col h3 {margin-bottom:17px;}
.benefit-body .benefits .col_group .col:nth-child(1) h3 {margin-bottom:0;}

.benefit-body .benefits_detail > div {margin-bottom:93px;}
.benefit-body .benefits_detail > div:last-child {margin-bottom:0;}

/* common : 검정색 박스 */
.benefit-body .col_group .col.white {background: #fff;}
.benefit-body .col_group .col.black {background:#000; position:relative; display:flex; justify-content: space-between; flex-flow:column;}
.benefit-body .col_group .col.black .txt_group h3 {color:#fff;}
.benefit-body .col_group .col.black .txt_group p {color:#969898;}
.benefit-body .col_group .col.black .txt_group p strong {color:#fff;}

/* common : 신청방법 */
.benefit-body .how_to_apply .col_group {gap:13px;}
.benefit-body .how_to_apply .col_group .col {width:100%; height:336px; border-radius:24px; background: #fff; position:relative;}
.benefit-body .how_to_apply .col_group .col::after {content:''; display:block; width:48px; height:48px;  position:absolute; top:143px; right:-29px; background:url('/web/images/benefit/ico_arrow_howto.png') no-repeat 0 0; background-size:cover; z-index:1;}
.benefit-body .how_to_apply .col_group .col:last-child::after {content:none;}
.benefit-body .how_to_apply .col_group .col .icon {position:absolute; bottom:0; left:0; width:100%; height:50%; overflow: hidden;}
.benefit-body .how_to_apply .col_group .col .icon::before {content:''; width:100%; height:92px; display:block; position:absolute; bottom:0; left:0; border-radius:0 0 24px 24px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); z-index:1;}
.benefit-body .how_to_apply .col_group .col .icon::after {content:''; display:block; position:absolute; background-repeat:no-repeat; background-size:cover;}
.benefit-body .how_to_apply .col_group .col:nth-child(4) .icon::before {content:none;}
.benefit-body .how_to_apply .col_group .col.black {background: rgba(66, 67, 75, 0.3); border: 1px solid rgba(255,255,255,0.15);}
.benefit-body .how_to_apply .txt_group {margin:34px 22px 0 32px;}
.benefit-body .how_to_apply .txt_group h3 {margin-bottom:12px; font-weight:600; font-size:26px; line-height:125%; letter-spacing:-1.15px; }
.benefit-body .how_to_apply .txt_group p {font-weight:500; font-size:16px; line-height:24px; letter-spacing:-0.5px; color:#666769;}

/*  common : FAQ */
.benefit-body .faq dl {display:flex; flex-flow: column; gap:12px;}
.benefit-body .faq dl > div {border-radius:24px; background:#fff; box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.12); position:relative;}
.benefit-body .faq dl dt {padding:26px 68px 26px 62px; font-weight:600; font-size:20px; line-height:26px; letter-spacing:-0.8px; position:relative; cursor:pointer;}
.benefit-body .faq dl dt::before {content:'Q.'; color:#CDCFD0; position:absolute; left:32px;}
.benefit-body .faq dl dd {font-weight:500; font-size:16px; line-height:24px; letter-spacing:-0.5px;  display:none; padding:0 68px 26px 62px;}
.benefit-body .faq dl > div.on dt {background: linear-gradient(90deg, #9933FF 0%, #6955FF 67.43%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.benefit-body .faq dl dt:hover,
.benefit-body .faq dl > div.on dt::before {color:#9933FF; -webkit-text-fill-color: #9933FF;}
.benefit-body .faq dl dt::after {content: ''; display: block; width: 26px; height: 26px; position: absolute; top: 26px; right: 32px; background: url('/web/images/benefit/ico_faq.png') no-repeat -36px 0;}
.benefit-body .faq dl > div.on dt::after {background-position-x:0;}
.benefit-body .faq dl dd ul.dot li {position:relative; padding-left:10px;}
.benefit-body .faq dl dd ul.dot li:before {content:"•"; position:absolute; left:0; top:0px;}

.benefit-body .customer {position:relative; overflow:hidden; width:1142px; height:140px; border-radius:24px; margin-top:64px;}
.benefit-body .customer::before {content:''; position:absolute; bottom:-108px; left:59px; display:block; width:257px; height:257px; background:url('/web/images/benefit/daemyung/ico_call.png') no-repeat 0 0; background-size:cover;}
.benefit-body .customer .balloon {position:absolute; top:24px; left:244px;}
.benefit-body .customer .txt_group {display:flex; align-items:center; justify-content:right; height:100%; margin-right:70px;}
.benefit-body .customer .txt_group span:nth-child(1) {font-weight:600; font-size:20px; line-height:26px; letter-spacing:-0.8px; color:#fff; opacity:80%; margin-right:21px;}
.benefit-body .customer .txt_group span:nth-child(2) {font-weight:600; font-size:40px; line-height:120%; letter-spacing:0; color:#fff; font-family:Outfit;}

/* common : 유의사항 */
.benefit-body .event_view_wrap {padding:80px 0;}
.benefit-body .event_view_wrap h2 {font-weight:600; font-size:22px; line-height:28px; letter-spacing:-0.8px; margin-bottom:24px;}
.benefit-body .event_view_wrap .noticeWrapNew .viewNotice {margin-bottom:0;}
.benefit-body .event_view_wrap .noticeWrapNew .viewNotice dd * {color:#555;}
.benefit-body .event_view_wrap .noticeWrapNew .viewNotice dd strong {font-weight:600;}
.benefit-body .event_view_wrap .noticeWrapNew .viewNotice dd strong.txt_red {color:#F12F22;}
.benefit-body .event_view_wrap .noticeWrapNew .viewNotice dd table.uplus_rate_list {width:300px; border-top:1px solid #000; border-left:1px solid #000;}
.benefit-body .event_view_wrap .noticeWrapNew .viewNotice dd table.uplus_rate_list th {background:#D9D9D9;}
.benefit-body .event_view_wrap .noticeWrapNew .viewNotice dd table.uplus_rate_list th,
.benefit-body .event_view_wrap .noticeWrapNew .viewNotice dd table.uplus_rate_list td {border-bottom:1px solid #000; border-right:1px solid #000; padding:3px; text-align:center;}

/*  common : 아이콘 롤링 */
.benefit-body .rolling {width: 373px; height: 132px; overflow: hidden;}
.benefit-body .rolling_track {display: flex; width: 710px; animation: rolling 26s linear infinite; }
.benefit-body .rolling_track img {width: 132px; height: 132px; object-fit: cover; margin-right:10px;}
@keyframes rolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(-1278px); }
}

/* contents : 상조할인 */
.benefit-container.daemyung .benefit-body .about .box::after {background-image:url('/web/images/benefit/daemyung/ico_about.png'); width:272.22px; height:268.64px; top:-80px; right:32.78px;}
.benefit-container.daemyung .benefit-body .benefits .balloon {display:inline-block; margin-bottom:15px;}
.benefit-container.daemyung .benefit-body .benefits .rolling {margin:26px -38px 52px;}
.benefit-container.daemyung .benefit-body .benefits .txt_group sub {margin-bottom:9px;}

.benefit-container.daemyung .benefit-body .benefits .col_group .col:last-child::after {width:161.31px; height:158px; top:auto; bottom:44px; right:37.85px; background:url('/web/images/benefit/daemyung/ico_benefits_02.png'); background-size:cover;}

.benefit-container.daemyung .benefit-body .benefits .balloon_big {padding:28px 0 0 51px; height:141px;}
.benefit-container.daemyung .benefit-body .benefits .balloon_big.black p {font-weight:500; font-size:16px; line-height:22px; letter-spacing:-0.5px;}
.benefit-container.daemyung .benefit-body .benefits .balloon_big.black p span {color:#969898;}
.benefit-container.daemyung .benefit-body .benefits .balloon_big.black p strong {color:#fff;}
.benefit-container.daemyung .benefit-body .benefits .balloon_big.black .btn {top: 37px; right: 39px;}

.benefit-container.daemyung .benefit-body .benefits_detail .benefit_a .box {padding:36px 38px 34px;}
.benefit-container.daemyung .benefit-body .benefits_detail .benefit_a .box:nth-child(1)::after {background-image:url('/web/images/benefit/daemyung/ico_benefits_03.png'); width:188px; height:185px; bottom:-1px; right:38px;}
.benefit-container.daemyung .benefit-body .benefits_detail .benefit_a .box:nth-child(2)::after {background-image:url('/web/images/benefit/daemyung/ico_benefits_04.png'); width:197px; height:188px; bottom:0; right:32px;}
.benefit-container.daemyung .benefit-body .benefits_detail .benefit_b ul {display:flex; justify-content:space-between; gap:12px;}
.benefit-container.daemyung .benefit-body .benefits_detail .benefit_b ul li {position:relative; width:100%;}
.benefit-container.daemyung .benefit-body .benefits_detail .benefit_b ul li .txt_group {position:absolute; top:36px; left:38px; font-weight:600; font-size:26px; line-height:125%; letter-spacing:-1.15px; color:#fff;}
.benefit-container.daemyung .benefit-body .benefits_detail .benefit_b ul li img {border-radius:24px; width:100%;}
.benefit-container.daemyung .benefit-body .benefits_detail .benefit_c .box_group {gap:12.82px;}
.benefit-container.daemyung .benefit-body .benefits_detail .benefit_c .box {height:249px; padding:34px 33px;}
.benefit-container.daemyung .benefit-body .benefits_detail .benefit_c .box:nth-child(1)::after {background-image:url('/web/images/benefit/daemyung/ico_benefits_05.png'); width:122px; height:122px; bottom:7px; right:44.76px;}
.benefit-container.daemyung .benefit-body .benefits_detail .benefit_c .box:nth-child(2)::after {background-image:url('/web/images/benefit/daemyung/ico_benefits_06.png'); width:114px; height:114px; bottom:9px; right:29.42px;}
.benefit-container.daemyung .benefit-body .benefits_detail .benefit_c .box:nth-child(3)::after {background-image:url('/web/images/benefit/daemyung/ico_benefits_07.png'); width:132px; height:111px; bottom:20px; right:35px;}
.benefit-container.daemyung .benefit-body .benefits_detail .txt_ref {margin-top:26px;}

.benefit-container.daemyung .benefit-body .how_to_apply .col_group .col:nth-child(2) .icon::after {background-image:url('/web/images/benefit/daemyung/ico_howto_01.png'); width:217px; height:217px; bottom:-54px; left:25px;}
.benefit-container.daemyung .benefit-body .how_to_apply .col_group .col:nth-child(3) .icon::after {background-image:url('/web/images/benefit/daemyung/ico_howto_02.png'); width:183.5px; height:183.5px; bottom:-29px; left:37px;}
.benefit-container.daemyung .benefit-body .how_to_apply .col_group .col:nth-child(4) .icon::after {background-image:url('/web/images/benefit/daemyung/ico_howto_03.png'); width:240.5px; height:212.5px; bottom:-52px; left:20px;}
.benefit-container.daemyung .benefit-body .how_to_apply .col .btn {width:228px; margin:0 24px 28px 24px;}

.benefit-container.daemyung .benefit-body .faq h2.header_group {padding-bottom:64px;}

/* contents : U+결합할인 */
.benefit-container.uplus .tab li button:hover::before,
.benefit-container.uplus .tab li button.on::before {background-color:#9933FF;}

.benefit-container.uplus .benefit-body .about .box {height:194px; overflow:hidden; padding:37px 38px 40px;}
.benefit-container.uplus .benefit-body .about .box:nth-child(1)::after {background-image:url('/web/images/benefit/uplus/ico_about_01.png'); width:199px; height:185.6px; bottom:-18.6px; right:12px;}
.benefit-container.uplus .benefit-body .about .box:nth-child(2)::after {background-image:url('/web/images/benefit/uplus/ico_about_02.png'); width:179px; height:179px; bottom:-8px; right:0;}
.benefit-container.uplus .benefit-body .about .box h3 {font-weight:600; font-size:26px; line-height:125%; letter-spacing:-1.15px; margin-bottom:16px;}

.benefit-container.uplus .benefit-body .benefits .col_group .col::after {content:none;}
.benefit-container.uplus .benefit-body .benefits .col_group .col.black::after {content:''; display:block; width:203px; height:199px; position:absolute; top:196px; right:22px; background:url('/web/images/benefit/uplus/ico_benefits_01.png') no-repeat 0 0; background-size:cover;}
.benefit-container.uplus .benefit-body .benefits .col_group .col.black .btn {margin-top:197px;}

.benefit-container.uplus .benefit-body .benefits .txt_group sub {margin-bottom:12px;}
.benefit-container.uplus .benefit-body .benefits .txt_group.bg_gradient sub {opacity:70%;}
.benefit-container.uplus .benefit-body .benefits .col.black .txt_group sub {margin-bottom:20px;}
.benefit-container.uplus .benefit-body .benefits .txt_group h3 {margin-bottom:2px; letter-spacing:-1.15px;}
.benefit-container.uplus .benefit-body .benefits .txt_group h3 span.txt_gradient {background: linear-gradient(90deg, #E6007E 0%, #9933FF 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:inline-block;}
.benefit-container.uplus .benefit-body .col_group .col.black .txt_group h3 span {color:#fff;}
.benefit-container.uplus .benefit-body .benefits .txt_group p {font-weight:600; font-size:18px; line-height:24px; letter-spacing:-0.8px; color:#000;}
.benefit-container.uplus .benefit-body .benefits .row_group .bg_gradient {background: linear-gradient(90deg, #E6007E 0%, #9933FF 100%); position:relative; overflow:hidden;}
.benefit-container.uplus .benefit-body .benefits .row_group .bg_gradient:nth-child(2) {background: linear-gradient(90deg, #9933FF 0%, #E6007E 100%);}
.benefit-container.uplus .benefit-body .benefits .row_group .bg_gradient::after {content:''; display:block; width:189.44px; height:195px; position:absolute; bottom:-57px; right:-4.4px; background:url('/web/images/benefit/uplus/ico_benefits_02.png') no-repeat 0 0; background-size:cover; mix-blend-mode:color-burn;}
.benefit-container.uplus .benefit-body .benefits .row_group .bg_gradient * {color:#fff;}
.benefit-container.uplus .benefit-body .box_ref {margin:48px 0;}

.benefit-container.uplus .benefit-body .how_to_apply .col_group .col:nth-child(2) .icon::after {background-image:url('/web/images/benefit/uplus/ico_howto_01.png'); width:217px; height:217px; bottom:-54px; left:25px;}
.benefit-container.uplus .benefit-body .how_to_apply .col_group .col:nth-child(3) .icon::after {background-image:url('/web/images/benefit/uplus/ico_howto_02.png'); width:228px; height:228px; bottom:-70px; left:24px;}
.benefit-container.uplus .benefit-body .how_to_apply .col_group .col:nth-child(4) .icon::after {background-image:url('/web/images/benefit/uplus/ico_howto_03.png'); width:276.95px; height:276.95px; bottom:-83.94px; left:10px;}
.benefit-container.uplus .benefit-body .how_to_apply .col .btn {width:228px; margin:0 24px 28px 24px;}
.benefit-container.uplus .benefit-body .how_to_apply .balloon_big.gradient .btn {width:247px;}

.benefit-container.uplus .benefit-body .faq dl div.rate dd img {display:block; margin:24px 0;}
.benefit-container.uplus .benefit-body .faq dl div.rate dd .box {border-radius:20px; padding:24px 30px 24px 33px; display:flex; justify-content:space-between;}
.benefit-container.uplus .benefit-body .faq dl div.rate dd .txt_group strong {display:block; font-weight:600; font-size:20px; line-height:26px; letter-spacing:-0.8px; margin-bottom:4px;}
.benefit-container.uplus .benefit-body .faq dl div.rate dd .txt_group span {font-weight:500; font-size:16px; line-height:24px; letter-spacing:-0.5px; color:#363636;}
.benefit-container.uplus .benefit-body .faq .btn_txt_gradient {vertical-align:baseline;}
.benefit-container.uplus .benefit-body .faq .btn.btn_gradient {width:247px; height:56px;}
.benefit-container.uplus .benefit-body .faq .btn.btn_gradient span {font-size:18px; line-height:24px; padding:16px 0 0 24px;}
.benefit-container.uplus .benefit-body .faq .btn.btn_gradient.btn_arrow::after {top:20px;}

/* modal popup*/
.layer_mask {background: rgba(0,0,0,0.5); z-index: 9999; width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: none;}
.popupArea {display: none; z-index: 99999; position: absolute; width: 100%; left: 50%; transform: translateX(-50%); box-sizing: border-box; border-radius: 24px; color: #000; background: #fff; font-family:Pretendard; color:#000;}
.popupArea * {font-family:Pretendard;}
.popupArea .popup_wrap .popClose {position: absolute; top: 24px; right: 20px; display: block; width: 24px; height: 24px; background: url('https://direct.lghellovision.net/web/images/mgm2021/cont/renew02/2025/renew/btn_pop_close.png') no-repeat 0 0; font-size: 1px; text-indent: -9999px; z-index: 9;}
.popupArea .uplus_rate_list {padding:0 32px 46px; position:relative;}
.popupArea .uplus_rate_list::before {content:''; display:block; width:100%; height:38px; position:absolute; top:72px; left:0; background:#f6f7f8; z-index:1;}
.popupArea .uplus_rate_list .rate_tab_area {display:flex; height:72px; padding:23px 0; box-sizing:border-box;}
.popupArea .uplus_rate_list .rate_tab_area h2 {margin-right:20px; font-weight:600; font-size:20px; line-height:26px; letter-spacing:-0.8px;}
.popupArea .uplus_rate_list .rate_tab {display:flex;}
.popupArea .uplus_rate_list .rate_tab button {border:1px solid #D9D9D9; border-radius:10px; height:29px; padding:7px 16px; box-sizing:border-box; font-weight:500; font-size:15px; line-height:15px; letter-spacing:-1.0px; background:#fff; color:#D9D9D9; margin-right:10px;}
.popupArea .uplus_rate_list .rate_tab button.on {border-color:#000; color:#000;}
.popupArea .uplus_rate_list table {width:100%}
.popupArea .uplus_rate_list table thead {display:table; width: 100%;}
.popupArea .uplus_rate_list table tbody tr {display:table; width: 100%;}
.popupArea .uplus_rate_list table tbody td {table-layout: fixed;}
.popupArea .uplus_rate_list tbody {display:block; height:440px; overflow-y:auto;}
.popupArea .uplus_rate_list table th:nth-child(1) {width:20%;}
.popupArea .uplus_rate_list table th:nth-child(2) {width:34%;}
.popupArea .uplus_rate_list table th:nth-child(4) {width:14%;}
.popupArea .uplus_rate_list table td:nth-child(1) {width:12%;}
.popupArea .uplus_rate_list table td:nth-child(2) {width:8.5%;}
.popupArea .uplus_rate_list table td:nth-child(3) {width:35%; color:#000;}
.popupArea .uplus_rate_list table td:nth-child(5) {width:12%;}
.popupArea .uplus_rate_list table th {background:#F6F7F8; font-weight:500; font-size:14px; line-height:20px; letter-spacing:-0.5px; color:#969898; padding:9px 0; text-align:left;}
.popupArea .uplus_rate_list table td {background:#fff; font-weight:500; font-size:16px; line-height:24px; letter-spacing:-0.5px; color:#969898; padding:17px 0 13px; text-align:left; border-bottom: 1px solid #F0F2F3;}
.popupArea .uplus_rate_list table td span {font-weight:600; font-size:14px; line-height:18px; letter-spacing:-0.5px; border-radius:23px; height:26px; display:block; padding:4px 9px; box-sizing:border-box; text-align:center;}
.popupArea .uplus_rate_list table td span.rate_type_a {color:#9933FF; background: rgba(153, 51, 255, 0.1); width:77px; padding:4px 7px;}
.popupArea .uplus_rate_list table td span.rate_type_lte {color:#4260FF; background: rgba(66, 96, 255, 0.1);
width:41px;}
.popupArea .uplus_rate_list table td span.rate_type_5g {color:#EB5757; background: rgba(66, 96, 255, 0.1);
width:41px;}
.popupArea .uplus_rate_list .rate_content {position:relative; z-index:9;}

