@font-face {font-family: 'SUIT'; font-weight: 400; src: url('font/SUIT-Regular.woff2') format('woff2');}
@font-face {font-family: 'SUIT'; font-weight: 500; src: url('font/SUIT-Medium.woff2') format('woff2');}
@font-face {font-family: 'SUIT'; font-weight: 600; src: url('font/SUIT-SemiBold.woff2') format('woff2');}
@font-face {font-family: 'SUIT'; font-weight: 700; src: url('font/SUIT-Bold.woff2') format('woff2');}
@font-face {font-family: 'SUIT'; font-weight: 800; src: url('font/SUIT-ExtraBold.woff2') format('woff2');}
@font-face {font-family: 'SUIT'; font-weight: 900; src: url('font/SUIT-Heavy.woff2') format('woff2');}

html.desktop .wrapper {min-width: 1440px; max-width: 100%; margin: 0 auto;}
.wrapper>div {position: relative;}
.wrapper>div.modal {position: fixed;}
.inner {width: 1440px; margin: 0 auto;}
.modal .inner {width: 100%;}
.wrapper {font-family: 'SUIT', "Noto Sans KR", sans-serif; font-weight: 500;}

.scroll-progress {position: fixed !important; top: 0; left: 0; height: 5px; width: 0%; background: #ff7703; /* 색상은 원하는 대로 */ z-index: 99999; transition: width 0.1s linear; z-index: 9999;}

.first_visual {background: #333 url(/img/first-time/renewal/top.jpg) no-repeat center bottom;}
.rich_visual {background: #333 url(/img/rich/renewal/top.jpg) no-repeat center bottom;}

.visual_box {width: 100%; height: 320px; padding-top: 5px; font-size: 50px; color: #fff; }
.visual_box .inner {padding-top: 80px; line-height: 150%; background: url(/img/first-time/renewal/logo_w.png) no-repeat right 24px;}
.visual_box strong {font-weight: 700;}
.visual_box p {font-weight: 700; font-size: 74px; color: #ff7703;}

.video_left_box.first {width: 100%; height: 824px; background: url(/img/first-time/renewal/s1.jpg) no-repeat center top;}
.video_left_box.rich {width: 100%; height: 848px; background: url(/img/rich/renewal/s1.jpg) no-repeat center top;}
.video_left_box h2, .video_left_box p, .video_left_box ul {width: 950px; margin: 0 auto;}
.video_left_box h2 {padding-top: 120px; font-size: 50px; font-weight: 900; text-align: center;}
.video_left_box h2 span {color: #ff7703;}
.video_left_box ul {padding: 40px 0 80px; font-size: 24px; overflow: hidden;}
.video_left_box ul li {float: left; height: 40px; padding-left: 13px; background: url(/img/first-time/renewal/icon_dot.gif) no-repeat left 10px;}
.video_left_box ul li:nth-child(2) {float: right;}
.video_left_box ul li span {padding: 0 5px; color: #a0a5a8; font-weight: bold;}
.video_left_box ul li strong {font-weight: bold;}
.video_left_box p {padding: 120px 0 80px 577px; font-size: 48px; border-top: 1px solid #dbdbdb; box-sizing: border-box;}
.video_left_box p strong {font-size: 52px; line-height: 150%; color: #003c78; font-weight: 900;}
.video_left_box p span {display: block; margin: 10px 0 30px; font-size: 16px; color: #6c6c6c;}
.video_left_box p a {display: block; width: 145px; height: 52px; margin-top: 20px; line-height: 52px; text-align: center; color: #fff; font-size: 19px; background: #003c78 url(/img/first-time/renewal/btn_arrow.gif) no-repeat 87% 20px; padding-right: 8px; box-sizing: border-box; border-radius: 5px;}

.video_right_box.first {width: 100%; height: 704px; background: url(/img/first-time/renewal/s2.jpg) no-repeat center top;}
.video_right_box.rich {width: 100%; height: 609px; background: url(/img/rich/renewal/s2.jpg) no-repeat center top;}
.video_right_box h2, .video_right_box ul, .video_right_box p {width: 950px; margin: 0 auto;}
.video_right_box h2 {padding-top: 145px; font-size: 40px; line-height: 140%;}
.video_right_box h2 strong {display: block; padding-top: 5px; font-size: 52px; color: #0e0e0e; font-weight: 900;}
.video_right_box h2 span {color: #003c78;}
.video_right_box ul {padding: 40px 0 40px; font-size: 24px; overflow: hidden;}
.video_right_box ul li {height: 40px; line-height: 120%; text-indent: -70px; padding-left: 83px; background: url(/img/first-time/renewal/icon_dot.gif) no-repeat left 10px;}
.video_right_box ul li span {padding: 0 5px; color: #a0a5a8; font-weight: bold;}
.video_right_box ul li strong {font-weight: bold;}
.video_right_box p span {display: block; margin: 10px 0 30px; font-size: 16px; color: #6c6c6c;}
.video_right_box a {display: block; width: 145px; height: 52px; line-height: 52px; text-align: center; color: #fff; font-size: 19px; background: #003c78 url(/img/first-time/renewal/btn_arrow.gif) no-repeat 87% 20px; padding-right: 8px; box-sizing: border-box; border-radius: 5px;}

.swiper_box {width: 100%; height: 881px; background: #f5f5f7; box-sizing: border-box;}
.swiper_box>h2, .swiper_box>p, .swiper_box>ul {width: 950px; margin: 0 auto;}
.swiper_box h2 {padding: 140px 0 70px; font-size: 50px; font-weight: 900; text-align: center;}
.swiper_box h2 span {color: #ff7703;}
.swiper_box .swiper-container {width: 950px; margin: 0 auto; height: 490px;}
.swiper_box .swiper-slide {position: relative; height: 410px; text-align: center; padding: 40px 0 24px; background: #fff; border-radius: 30px; cursor: pointer; box-sizing: border-box;}
.swiper_box .swiper-slide h3 {padding-bottom: 10px; font-size: 28px; font-weight: 800;}
.swiper_box .swiper-slide p {font-size: 20px; line-height: 25px;}
.swiper_box .swiper-slide p span {font-weight: 700;}
.swiper_box .swiper-slide>img {display: block; margin: 14px auto 10px;}
.swiper_box .swiper-slide a {float: right; width: 30px; height: 30px; margin-right: 30px; text-indent: -9999px; background: url(/img/first-time/renewal/btn_slide_off.jpg) no-repeat left top; transition: all 0.1s ease;}
.swiper_box .swiper-slide:hover a {display: block; text-indent: 0; width: 160px; height: 30px; line-height: 30px; color: #fff; font-size: 14px; text-align: center; background: #000; border-radius: 15px;}
.swiper_box .pause, .play {position: absolute; left: 50%; top: 767px; margin-left: 74px; font-size: 0; width: 30px; height: 31px; border: 0; cursor: pointer; z-index: 1;}
.swiper_box .pause {background: url(/img/rich/renewal/btn_p.gif) no-repeat left top;}
.swiper_box .play {display: none; background: url(/img/rich/renewal/btn_s.gif) no-repeat left top;}
.swiper_box .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {position: relative; width: 12px; height: 12px; opacity: 1; background: #ccc8c2; border-radius: 6px; opacity: 0.5; transition: width 0.01s ease, background-color 2s ease;}
.swiper_box .swiper-pagination-bullet::before {content: ''; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: #0e0e0e !important; border-radius: 6px; transition: inherit;}
.swiper_box .swiper-pagination-bullet-active {width: 30px !important;}
.swiper_box .swiper-pagination-bullet-active::before {width: 100%; transition: width 3s ease;}

/* rich_content */
.rich_content {width: 100%; padding: 30px 0; background: #fff6eb; box-sizing: border-box;}
.rich_content>h2, .rich_content>p, .rich_content>ul {width: 950px; margin: 0 auto;}
.rich_content h2 {padding: 0 0 70px; font-size: 50px; font-weight: 900; text-align: center;}
.rich_content h2 span {color: #ff7703;}
.rich_content dl {background:#fff; border-radius: 30px; padding: 40px; box-sizing: border-box;}
.rich_content dl dt {font-size: 34px; font-weight: 800; color:#0e0e0e;}
.rich_content dl dd {padding-top: 17px; font-size: 21px; line-height: 25px; color:#313131;}
.rich_content dl dd strong {font-weight: 800;}
.rich_content dl dd span {font-size: 16px; color: #6c6c6c;}

.rich_content .box_1 {padding: 100px 0 100px; overflow: hidden; border-bottom: 1px solid #fde4c9; background: url(/img/rich/renewal/s3_img.jpg) no-repeat left 50%;}
.rich_content .box_1 dl {float: right; width: 814px; padding: 50px 50px 50px 200px; margin: 8px 0}
.rich_content .box_1 dl:first-child {background: #fff url(/img/rich/renewal/s3_icon_1.jpg) no-repeat 37px 50%;}
.rich_content .box_1 dl:nth-child(2) {background: #fff url(/img/rich/renewal/s3_icon_2.jpg) no-repeat 37px 50%;}
.rich_content .box_1 dl:nth-child(3) {background: #fff url(/img/rich/renewal/s3_icon_3.jpg) no-repeat 37px 50%;}

.rich_content .box_2 {padding: 100px 0; overflow: hidden;}
.rich_content .box_2 div {display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;}
.rich_content .box_2 dl {height: 250px; padding: 40px;}
.rich_content .box_2 dl dt {font-size: 24px; padding-bottom: 10px;}
.rich_content .box_2 dl dd {padding: 0; font-size: 20px; color:#737373; padding-left: 10px; text-indent: -10px;}
.rich_content .box_2 dl:first-child {background: #fff url(/img/rich/renewal/s3_icon_4.jpg) no-repeat 93% 85%}
.rich_content .box_2 dl:nth-child(2) {background: #fff url(/img/rich/renewal/s3_icon_5.jpg) no-repeat 93% 85%}
.rich_content .box_2 dl:nth-child(3) {background: #fff url(/img/rich/renewal/s3_icon_6.jpg) no-repeat 93% 85%}


/* video */
.v1_area {position: absolute; left: 50%; top: 400px; margin-left: -490px;}
.v2_area {position: absolute; left: 50%; top: 80px; margin-left: 86px;}
.v3_area {position: absolute; left: 50%; top: -10px; margin-left: -560px;}

.section-notice .notice h4 {font-size: 26px; font-weight: 800; color: #000000;}
.section-notice .notice li {padding-left: 10px; text-indent: -10px;}
.section-notice .notice li>strong {display: block; padding: 5px 0 2px; color: #000; font-size: 14px; font-weight: 500;}

/* 하단 float 메뉴 */
.float_menu {position: fixed !important; left: 50%; bottom: 40px; transform: translateX(-50%); width: 150px; height: 90px; background: #fff; border-radius: 45px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); z-index: 99;}
.float_menu>a {display: flex; justify-content: center; align-items: center; padding-top: 17px; height: 92px; font-size: 14px; background: url(/img/event/menu_icon.gif) no-repeat center 17px; font-weight: 600;}
.float_menu .speech_box {display: block; left: -50%; margin-left: 10px; padding: 30px; position: absolute; bottom: 110px; width: 280px; background: #ffffff; border-radius: 18px; box-shadow: 0 12px 24px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.08); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; pointer-events: none;}
.float_menu.on .speech_box {opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;}
/* 말풍선 꼬리 */
.float_menu .speech_box::after {content: ""; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 14px solid #ffffff; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.15));}
.float_menu .speech_box li {position: relative; height: 32px; line-height: 27px; margin: 0 0 6px; overflow: hidden; padding-left: 40px; display: flex; align-items: center; background: url(/img/event/menu_icon_bg.gif) no-repeat left 0px;}
.float_menu .speech_box li:nth-child(2) {background-position: left -39px;}
.float_menu .speech_box li:nth-child(3) {background-position: left -79px;}
.float_menu .speech_box li:nth-child(4) {background-position: left -119px; padding-bottom: 13px; margin-bottom: 10px;}
.float_menu .speech_box li:nth-child(5) {background-position: left -177px;}
.float_menu .speech_box li:nth-child(6) {background-position: left -217px;}
.float_menu .speech_box li:nth-child(7) {background-position: left bottom;}
.float_menu .speech_box li a {display: block; width: 100%; letter-spacing: -0.1em; background: url(/img/event/menu_arrow.gif) no-repeat right 9px;}
.float_menu .speech_box li:nth-child(4)::after {content: ''; display: block; width: 100%; height: 10px; border-bottom: 2px solid #e0e0e0; position: absolute; bottom: 0; left: 0;}
.btn_float_right {position: fixed; bottom: 40px; right: 76px; z-index: 99;}

.bottom_fade {position: fixed; left: 0; right: 0; bottom: 0; height: 200px; /* 그라데이션 높이 */ pointer-events: none; /* 클릭 방해 안 함 */ z-index: 98; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0.4) 100%);}

/* pcMstockDownloadModal */
#pcMstockDownloadModal .title-area h3.pcmstock-modal__title {font-size: 36px; font-weight: 700; line-height: 48px; letter-spacing: -0.005em; text-align: center; color: #000; padding: 10px 0 0;}
#pcMstockDownloadModal .title-area h2.pcmstock-modal__subtitle {font-size: 25px; font-weight: 500; line-height: 25px; text-align: center; padding: 10px 0 40px; color: #000;}
#pcMstockDownloadModal .pcmstock-modal__qr {text-align: center;}
#pcMstockDownloadModal .pcmstock-modal__type {padding-top: 0; border-top: 0;}
#pcMstockDownloadModal .pcmstock-modal__box {display: block; width: 100%; height: auto; margin: 0; padding: 20px; background: #ECEFF4; box-sizing: border-box;}
#pcMstockDownloadModal .pcmstock-modal__row {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; height: auto; margin: 0; padding: 0; box-sizing: border-box;}
#pcMstockDownloadModal .pcmstock-modal__text {flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: auto; height: auto; margin: 0; padding: 0; box-sizing: border-box;}
#pcMstockDownloadModal .pcmstock-modal__eyebrow {font-size: 18px; font-weight: 500; line-height: 25px; text-align: left; color: #000;}
#pcMstockDownloadModal .pcmstock-modal__cta {font-size: 25px; font-weight: 500; line-height: 35px; text-align: left; color: #F58220;}
#pcMstockDownloadModal .pcmstock-modal__qr-box {flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: auto; height: auto; margin: 0; padding: 0; box-sizing: border-box;}

/* event notice modals (from desktop.css) */
#eventNoticeModal1, #eventNoticeModal2 {position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; z-index: -1; transition: all 400ms; overflow: auto;}
#eventNoticeModal1.active, #eventNoticeModal2.active {z-index: 9999999; opacity: 1; visibility: visible;}
#eventNoticeModal1 .inner, #eventNoticeModal2 .inner {background: rgba(0, 0, 0, 0.8); position: relative; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; box-sizing: border-box;}
#eventNoticeModal1 .modal-box, #eventNoticeModal2 .modal-box {margin-left: auto; margin-right: auto; margin-bottom: 20px; background: #FFFFFF; width: 100%; box-sizing: border-box; max-width: max-content;}
#eventNoticeModal1 .close, #eventNoticeModal2 .close {display: block; width: 60px; min-width: 60px; height: 60px; min-height: 60px; background: url(/img/icon/x.svg) no-repeat 50% 50%; text-indent: -999em; overflow: hidden; border-radius: 50%;}

.event-notice__title {height: 52px; padding: 35px 45px 0; font-size: 24px; font-weight: 800; color: #0b4a78; border-bottom: 1px solid #d9d9d9; letter-spacing: -0.3px;}
.event-notice__content {padding: 30px 40px; font-size: 16px;}
.event-notice__content h3 {margin: 0; padding: 0; font-size: 18px; font-weight: 700; color: #7f7f7f; line-height: 28px;}
.event-notice__content ul {margin: 0; padding: 0; line-height: 28px; color: #666;}
.event-notice__content ul li {margin: 0; padding: 0; line-height: 28px; text-indent: -10px; padding-left: 10px;}