@font-face {font-family: 'SUIT'; font-weight: 400; src: url('../css/font/SUIT-Regular.woff2') format('woff2');}
@font-face {font-family: 'SUIT'; font-weight: 500; src: url('../css/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('../css/font/SUIT-Bold.woff2') format('woff2');}
@font-face {font-family: 'SUIT'; font-weight: 800; src: url('../css/font/SUIT-ExtraBold.woff2') format('woff2');}
@font-face {font-family: 'SUIT'; font-weight: 900; src: url('../css/font/SUIT-Heavy.woff2') format('woff2');}

.pb-0 {padding-bottom: 0 !important;}

.intro_page {overflow: auto;background: #fff;}

.rich-pledge-table {
    width: 100%;
    max-width: 100%;
    margin: 8px auto 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    table-layout: fixed;
    box-sizing: border-box;
  }
  .rich-pledge-table th {
    background: #002c61;
    color: #fff;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    padding: 10px 10px;
    border-bottom: 1px solid #e0e0e0;
  }
  .rich-pledge-table th:first-child {
    width: 36%;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
  }
  .rich-pledge-table th:last-child {
    width: 64%;
  }
  .rich-pledge-table td {
    background: #fff;
    color: #000;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    padding: 10px 10px;
    border-bottom: 1px solid #e0e0e0;
  }
  .rich-pledge-table td:first-child {
    border-right: 1px solid #e0e0e0;
  }
  .rich-pledge-table tr:last-child td {
    border-bottom: none;
  }

/* 화면에는 보이지 않음, 스크린 리더만 읽음 */
.visually-hidden {position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;}

.row_border {margin: 0 40px; border-top: 1px solid #e0e0e0; background: none;}

#intro {width: 82.64%; min-height: 100vh; margin: 0 auto; padding-top: 120px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative; box-sizing: border-box; background: #fff;}
    #intro h1 {position: absolute; right: -10px; top: 20px; align-self: flex-end; }
    #intro .intro_box_wrap {align-self: stretch;}
    #intro .intro_box_wrap h2 {line-height: 120%; font-size: min(10.5vw, 45px); font-weight: 900; text-align: center; color: #010101; margin-bottom: 35px;}
    #intro .intro_box_wrap h2 span {color: #004489;}
    #intro .intro_box_wrap ul {display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 40px; list-style: none; margin: 0; padding: 0;}
    #intro .intro_box_wrap ul li {flex: 0 0 auto; width: auto; padding-bottom: 60px; margin-bottom: 20px; max-width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; border-bottom: 1px solid #f0f0f0;}
    #intro .intro_box_wrap ul li:last-child {border-right: none;}
    #intro .intro_box_wrap ul li a {display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit;}
    #intro .intro_box_wrap ul li a img {width: 100%; height: auto; display: block; vertical-align: top;}
    #intro .intro_box_wrap ul li a .intro_btn {display: flex; align-items: center; justify-content: center; gap: 8px; width: 60%; height: 57px; margin-top: 32px; box-sizing: border-box; color: #fff; background: #2f2f2f; font-size: min(6vw, 22px); line-height: 98%; font-weight: 700; text-decoration: none; border-radius: 25px;}
    #intro .intro_box_wrap ul li a .intro_btn::after {content: ''; display: inline-block; width: 10px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3L20 12L8 21'/%3E%3C/svg%3E") no-repeat center; background-size: contain;}

    #intro .intro_txt {font-size: 12px; color: #6c6c6c; text-align: center; margin-bottom: 20px;}

.wrapper {margin: 0 auto; padding-bottom: 60px;}
.wrapper>div {position: relative;}
.wrapper>div.sticky-bottom-cta, .wrapper>div.modal {position: fixed;}
.inner {width: 100%; padding: 0 30px; box-sizing: border-box;}
.modal .inner, .sticky-bottom-cta .inner {width: 100%; padding: 0;}
.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; /* 색상은 원하는 대로 */ transition: width 0.1s linear; z-index: 9999;}

.first_visual {background: #333 url(/m/img/first-time/m_260605_top.jpg) no-repeat center bottom;}
.rich_visual {background: #333 url(/m/img/rich/renewal/m_260605_top.jpg) no-repeat center bottom;}
.isa_visual {background: #333 url(/m/img/isa/renewal/top_new.jpg) no-repeat center bottom;}
.personal-pension_visual {background: #333 url(/m/img/personal-pension/renewal/top.jpg) no-repeat center bottom;}
.government_visual {background: #333 url(/m/img/government-bond/renewal/top.jpg) no-repeat center bottom;}
.public_visual {background: #333 url(/m/img/public-offering/renewal/top.jpg) no-repeat center bottom;}
.maps_visual_m {background: #f9690a url(/m/img/maps/top_mo.jpg) no-repeat center bottom; background-size: cover;}

.public_visual h1 span {margin-top: -6px;}

.tabmenu {margin-bottom: -1px;}
.tabmenu ul {display: flex; width: 99.6%; padding-top: 25px; margin: 0 auto; justify-content: center; align-items: center;}
.tabmenu ul li {padding: 15px 0; flex: 1 1 calc(100% / 3); font-size: min(4.7vw, 20px); color: #a5a5a5; text-align: center; border-bottom: 3px solid #b2b2b2;}
.tabmenu ul li.on {font-weight: 900; color: #ff7703; border-bottom: 3px solid #ff7703;}

.government_wrap h3 {padding: 55px 0 50px; font-size:  min(7.5vw, 38px); color: #043b72; line-height: 150%; /*background: url(/img/government-bond/renewal/tab1_img.jpg) no-repeat 270px 107px;*/ text-align: center;}
.government_wrap h3 strong {font-size: min(8vw, 38px); color: #0e0e0e; font-weight: 900;}
.government_wrap h3 span {display: block; padding-top: 10px; font-size: min(3.2vw, 17px); color: #858585; font-weight: 400; line-height: 120%;}

.government_wrap.government2 h3, .government_wrap.government3 h3 {font-size:  min(5.5vw, 30px); font-weight: 900;}
.government_wrap.government2 h3 img, .government_wrap.government3 h3 img {margin: 20px 0}
.government_wrap.government2 h3 strong, .government_wrap.government3 h3 strong {font-size:  min(7.8vw, 40px);}
.government_wrap.government2 h3 span, .government_wrap.government3 h3 span {text-align: left; padding-left: 10px; text-indent: -10px; word-break: break-word;}

.government_wrap.government3 h3 em {display: block; padding-top: 40px; font-size:  min(7.8vw, 40px);}
.government_wrap.government3 h3 i {display: block; font-size:  min(3.5vw, 20px); color: #0e0e0e}

.government_wrap h4 {padding: 80px 0 30px; text-align: center;  font-size: min(9vw, 38px); color: #003c78; font-weight: 900;}
.government_wrap h4 em {display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; margin-right: 3px; font-size: min(7vw, 28px); font-weight: 900; color:#fff; font-weight: 900; background: #003c78; border-radius: 100%; vertical-align: 4px;}
.government_wrap h4:first-of-type {padding-top: 0;}

.government_wrap .government_box {display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; margin: 0 auto; padding: 30px 0 30px; background: #f4f5f9; box-sizing: border-box; border: 1px solid #ececec;}
.government_wrap .government_box p {display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: min(6vw, 27px); line-height: 120%;}
.government_wrap .government_box p strong {display: block; font-size: min(6.8vw, 30px); font-weight: 900; color:#043b72}
.government_wrap .government_box p strong.ac {color: #ff7703}
.government_wrap .government_box span {display: flex; flex-direction: column; justify-content: center; align-items: center;  width: 230px; height: 109px; margin: 20px 0; padding-bottom: 20px; line-height: 130%; font-size: min(7.5vw, 25px); color: #fff; background: url(/m/img/government-bond/renewal/arrow_img.jpg) no-repeat center center; background-size: contain;}
.government_wrap .government_box span strong {display: block; font-size: min(8.0vw, 30px); font-weight: 900;}

.government_wrap .government_box p img,
.government_wrap .government_box p strong {display: block; margin: 0 auto;}
.government_wrap .government_box p img {margin-bottom: 10px;}

.government_wrap .government_box2 {position: relative; width: 950px; height: 326px; margin: 0 auto; background: url(/img/government-bond/renewal/tab2_box.jpg) no-repeat left top;}
.government_wrap .government_box2 dl {position: absolute; width: 475px; height: 326px; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
.government_wrap .government_box2 dl dt {padding: 10px 25px; font-size: 25px; font-weight: bold; color: #fff; background: #043b72; border-radius: 25px;}
.government_wrap .government_box2 dl dd {padding-top: 10px; font-size: 30px; line-height: 40px; color: #848484}
.government_wrap .government_box2 dl dd strong {font-weight: 800;}
.government_wrap .government_box2 dl dd.txt {padding-top: 0px; font-size: 15px; color: #7f7f7f}
.government_wrap .government_box2 dl.ac {left: 475px;}
.government_wrap .government_box2 dl.ac dt {font-size: 32px;}
.government_wrap .government_box2 dl.ac dd {font-size: 42px; line-height: 50px; color:#fff;}
.government_wrap .government_box2 dl.ac dd.txt {font-size: 20px; color:#fff;}

.government_wrap .government_box3 {text-align: center;}
.government_wrap .government_box3 h4 span {display: block; padding-top: 20px; color:#0e0e0e; font-size: 22px; font-weight: normal;}
.government_wrap .government_box3 p {width: fit-content; padding-top: 25px; margin: 0 auto;text-align: left; font-size: 17px; line-height: 24px; color: #7f7f7f;}

.government_box_1 {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 99.6%; margin: 0 auto; padding: 30px 0; background: #f3f5f9; box-sizing: border-box;}
.government_box_1> p {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 160px; height: 94px; color: #fff; font-size: 20px; color: #fff; line-height: 130%; background: #1547a0}
.government_box_1> p strong {display: block; font-size: 28px; font-weight: 900;}
.government_box_1> div {position: relative; display: flex; flex-direction: row; align-items: ; margin-left: 0; width: 90%;}
.government_box_1> div p {flex: 1 1 18%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between; color:#19191a; padding-right: 34px; font-size: 25px; line-height: 220%; font-weight: bold;}
.government_box_1> div p:first-of-type {padding-left: 41px;}
.government_box_1> div p span {color: #888}
.government_box_1> div p em {position: absolute; right: 52px; bottom: -36px; color: #ff7703; font-size: 30px; font-weight: 900;}
.government_box_1> div img {width: 100%; height: fit-content; margin-top: 30px;}

.government_wrap .comment {display: block; padding-top: 10px; text-align: center; font-size: min(3vw, 15px); color: #858585; font-weight: 400;}

.video_box_top h2, .video_box_top p, .video_box_top ul {width: 100%; margin: 0 auto;}
.video_box_top h2 {padding-top: 70px; font-size: min(6vw, 32px); font-weight: 900; text-align: center; line-height: 130%;}
.video_box_top h2 span {color: #ff7703;}
.video_box_top h2 span.sm {font-size: 36px; color:#0e0e0e; font-weight: 400;}
.video_box_top h2 em {font-weight: 700;}
.video_box_top h2 strong {font-weight: 800;}

.video_box_top ul {padding: 40px 0 80px; font-size: 24px; overflow: hidden; border-bottom: 1px solid #dbdbdb;}
.video_box_top ul li {float: left; height: 40px; padding-left: 13px; background: url(/img/first-time/renewal/icon_dot.gif) no-repeat left 10px;}
.video_box_top ul li:nth-child(2) {float: right;}
.video_box_top ul li span {padding: 0 5px; color: #a0a5a8; font-weight: bold;}
.video_box_top ul li strong {font-weight: bold;}
.video_box_top ul li em {color: #a4a4a4; font-size: 20px;}
.video_box_top ul li.indent {padding-left: 83px; text-indent: -70px; line-height: 125%;}
.video_box_top ul li.btnarea {padding-left: 0; background: none}

.video_box_top ul.ty1 {width: auto; border-bottom: 0;}
.video_box_top ul.ty1 li {float: none; height: auto; margin-bottom: 20px; border-bottom: 0;}
.video_box_top ul.ty1 li span.ac {font-size: 20px; color:#083a6c;}

.visual_box {width: 100%; height: 405px; padding-top: 5px; font-size: min(10.5vw, 45px); text-align: center; color: #fff;}
.visual_box .inner {padding-top: 100px; line-height: 140%; background: url(/img/first-time/renewal/logo_w.png) no-repeat 27px 24px; background-size: 115px auto;}
.visual_box h1 strong {font-weight: 700;}
.visual_box h1 span {display: block; font-weight: 800; font-size: min(11vw, 50px); color: #ff7703;}
.visual_box.rich_visual h1 {font-size: min(7.5vw, 40px);}
.visual_box.rich_visual h1 span {font-size: min(9.5vw, 47px); color: #ff7703;}
.visual_box.isa_visual .inner {padding-top: 85px; line-height: 120%;}
.visual_box.isa_visual h1 {font-size: min(6.5vw, 35px);}
.visual_box.isa_visual h1 span {font-size: min(8.1vw, 40px); color: #ff7703;}
.visual_box.personal-pension_visual h1 {font-size: min(6.5vw, 35px); line-height: 135%;}
.visual_box.personal-pension_visual h1 span {font-size: min(8.1vw, 40px); color: #ff7703;}
.visual_box.government_visual h1 {font-size: min(6.5vw, 35px); line-height: 135%;}
.visual_box.government_visual h1 span {font-size: min(8.1vw, 40px); color: #ff7703;}

.video_box_1 {width: 100%; padding-bottom: 80px;}
.video_box_1 h2, .video_box_1 p, .video_box_1 ul {width: 100%; margin: 0 auto;}
.video_box_1 h2 {padding-top: 80px; font-size: min(10vw, 40px); font-weight: 900; line-height: 120%; text-align: center;}
.video_box_1 h2 strong {font-weight: 900;}
.video_box_1 h2 span {color: #ff7703;}
.video_box_1 h2 span.sm {display: block; padding-top: 10px; color: #0e0e0e; font-size: min(5vw, 24px); line-height: 120%; font-weight: 500;}
.video_box_1 h2 em.sm {display: block; padding-top: 10px; font-size: min(7vw, 30px); line-height: 120%; font-weight: 500;}
.video_box_1 ul {width: fit-content; margin: 0 auto; padding: 40px 0 80px; font-size: 15px; overflow:hidden;}
.video_box_1 ul li {margin: 5px 0; line-height: 140%; padding-left: 58px; text-indent: -48px; background: url(/img/first-time/renewal/icon_dot.gif) no-repeat left 9px; background-size: 3px auto;}
.video_box_1 ul li span {padding: 0 5px; color:#a0a5a8; font-weight: bold;}
.video_box_1 ul li strong {font-weight: bold;}
.video_box_1 ul li em {color: #a4a4a4;}
.video_box_1 ul li em.ac {color: #043b72;}
.video_box_1 p {padding: 0; font-size: min(8vw, 35px); box-sizing: border-box; text-align: center;}
.video_box_1 p strong {font-size: min(10vw, 40px); line-height: 150%; color: #003c78; font-weight: 900;}
.video_box_1 p a, .video_box_2 a {display: block; width: 70%; margin: 0 auto; 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.png) no-repeat 87% 20px; padding-right: 8px; box-sizing: border-box; border-radius: 5px;}
.video_box_1 p a.ac, .video_box_2 a.ac {background-color: #017eff;}
.video_box_1 p a.ac1, .video_box_2 a.ac1 {background-color: #002951;}
.video_box_1 p span {font-size: 14px; color: #6c6c6c;}

.video_box_2 {width: 100%; padding-bottom: 80px;}
.video_box_2 h2, .video_box_2 ul, .video_box_2 p {width: 100%; margin: 0 auto;}

.video_box_2 h2 {text-align: center; font-size: min(8vw, 35px); line-height: 130%;}
.video_box_2 h2.sm {font-size: min(6vw, 25px); }
.video_box_2 h2 strong {display: block; padding-top: 5px; line-height: 130%; font-size: min(10vw, 40px); color:#0e0e0e; font-weight: 900;}
.video_box_2 h2 span {color: #003c78;}
.video_box_2 ul {width: 280px; margin: 0 auto; padding: 20px 0 30px; font-size: 15px; overflow:hidden;}
.video_box_2 ul li {line-height: 140%; padding-left: 58px; text-indent: -48px; background: url(/img/first-time/renewal/icon_dot.gif) no-repeat left 9px; background-size: 3px auto;}
.video_box_2 ul li span {padding: 0 5px; color:#a0a5a8; font-weight: bold;}
.video_box_2 ul li strong {font-weight: bold;}
.video_box_2 p span {display: block; margin: 15px 0 35px;font-size: 14px; color: #6c6c6c; text-align: center;}
.video_box_2 div.txt_box {text-align: center;}
.video_box_2 div.txt_box>span {display: block; margin: 30px 0 30px; font-size: 16px; color: #6c6c6c; box-sizing: border-box;}
.video_box_2 div.txt_box>ul {padding: 0;}
.video_box_2 div.txt_box>ul li {background: none; padding-left: 0; text-indent: 0;}

/* 공모주 */
.public_top {padding: 10% 0 0; text-align: center}
.public_top h2 {display: inline-block; padding: 10% 0; margin-bottom: 10%; border-bottom: 1px solid #dbdbdb;}
.public_top h2 strong {display: inline-block; padding: 3% 8%; font-size: min(7vw, 30px); font-weight: 900; color: #fff; background: #f58220; border-radius: 50px;}
.public_top h2 p {padding-top: 10%; text-align: center; color: #1b1b1b;}
.public_top h2 p span {font-size: min(5.3vw, 30px); color: #1b1b1b; font-weight: 700;}
.public_top h2 p em {display: inline-block; padding: 0 10px; color: #b2b2b2; font-size: min(5vw, 28px); font-weight: 400;}
.public_top span.notice {font-size: min(4vw, 20px); color: #333333; opacity: 0.5;}

.public_step {position: relative; padding: 20% 0 20%; text-align: center;}
.public_step h3 {padding: 0 0 10%; font-size: min(9vw, 40px); color: #0e0e0e; font-weight: 800;}
.public_step h3 strong {color: #ff7703;}
.public_step ul {position: relative; display: flex; margin: 0 auto; flex-direction: row; text-align: center; justify-content: center; gap: 20px; z-index: 1}
.public_step .row_bar {display: block; position: absolute; border: 3px solid #f5f5f7; width: 80%; top: 49%; left: 10%; z-index: 0}
.public_step ul li h4 {padding: 10% 0; font-size: min(3vw, 15px); font-weight: bold; color: #9c9c9c}
.public_step ul li p {font-size: min(4vw, 22px); color: #0e0e0e; line-height: 120%;}
.public_step ul li img {width: 100%}
.public_step ul li p strong {display: block; color: #043b72; font-weight: 800;}

.btn_area {padding: 30px 0 50px; text-align: center;}
.btn_area a, .btn_area a {display: inline-block; width: fit-content; height: 52px; margin: 20px 10px 0 0; line-height: 52px; text-align: center; color: #fff; font-size: 20px; background: #003c78 url(/img/government-bond/renewal/icn_more.gif) no-repeat 87% 17px; padding: 0 60px 0 40px; box-sizing: border-box; border-radius: 5px;}
.btn_area a.ac {background-color: #017eff;}

.swiper_box {width: 100%; background: #f5f5f7; box-sizing: border-box;}
.swiper_box>h2, .swiper_box>p, .swiper_box>ul {width: 100%; margin: 0 auto;}
.swiper_box h2 {padding-top: 80px; font-size: min(8.5vw, 35px); font-weight: 900; line-height: 120%; text-align: center;}
.swiper_box h2 span {color: #ff7703;}
.swiper_box .swiper-container {width: 100%; margin: 20px auto 0; padding-bottom: 100px;}
.swiper_box .swiper-slide {position: relative; min-height: 332px; 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: 18px; font-weight: 800; letter-spacing: -0.1em;}
.swiper_box .swiper-slide p {font-size: 12px; line-height: 20px;}
.swiper_box .swiper-slide p span {font-weight: 700}
.swiper_box .swiper-slide>img {display: block; margin: 14px auto 10px; width: 100%}
/* .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;} */
.swiper_box .swiper-slide a {display: block; text-indent: 0; margin: 0 auto; width: 90%; height: 30px; line-height: 30px; color:#fff; font-size: 12px; text-align:center; background:#000; border-radius: 15px;}
.swiper_box .pause, .play {position: absolute; left: 54%; bottom: 52px; 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; bottom: 50px; border-radius: 6px; opacity: 0.5; transition: width 0.3s 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 40px; font-size: min(9.5vw, 45px); font-weight: 900; text-align: center;}
.rich_content h2 span {color: #ff7703;}
.rich_content dl {background:#fff; border-radius: 20px; padding: 25px; margin: 10px 0; box-sizing: border-box;}
.rich_content dl dt {font-size: 20px; font-weight: 800; color:#0e0e0e;}
.rich_content dl dd {padding-top: 8px; font-size: 13px; line-height: 16px; color:#313131;}
.rich_content dl dd strong {font-weight: 800;}
.rich_content dl dd span {font-size: 11px; color: #6c6c6c;}

.rich_content .box_1 {margin: 0 -20px; padding: 0 0 80px; overflow: hidden; border-bottom: 1px solid #fde4c9; background-size: 50% auto;}
.rich_content .box_1 dl {width: 100%; padding: 25px 10px 25px 105px; letter-spacing: -0.2em;}
.rich_content .box_1 dl:first-child {background: #fff url(/img/rich/renewal/s3_icon_1.jpg) no-repeat 17px 50%; background-size: 80px auto;}
.rich_content .box_1 dl:nth-child(2) {background: #fff url(/img/rich/renewal/s3_icon_2.jpg) no-repeat 20px 50%; background-size: 80px auto;}
.rich_content .box_1 dl:nth-child(3) {background: #fff url(/img/rich/renewal/s3_icon_3.jpg) no-repeat 17px 50%; background-size: 80px auto;}

.rich_content .box_2 {margin: 0 -20px; padding: 80px 0 50px; overflow: hidden;}
.rich_content .box_2 dl {height: 150px;}
.rich_content .box_2 dl dt {font-size: 22px; padding-bottom: 10px;}
.rich_content .box_2 dl dd {padding: 0; font-size: 14px; color:#737373; line-height: 20px;}
.rich_content .box_2 dl:first-child {background: #fff url(/img/rich/renewal/s3_icon_4.jpg) no-repeat 93% 85%; background-size: 60px auto;}
.rich_content .box_2 dl:nth-child(2) {background: #fff url(/img/rich/renewal/s3_icon_5.jpg) no-repeat 93% 85%; background-size: 60px auto;}
.rich_content .box_2 dl:nth-child(3) {background: #fff url(/img/rich/renewal/s3_icon_6.jpg) no-repeat 93% 85%; background-size: 60px auto;}

/* isa_content */
.isa_content {width: 100%; padding: 30px 0; box-sizing: border-box;}
.isa_content h2 {padding-top: 60px; font-size: min(8vw, 40px); font-weight: 900; text-align: center; line-height: 130%;}
.isa_content h2 span {color: #ff7703;}
.isa_content h2 span.ac {color: #003c78;}
.isa_content h2 em.sm {font-size: 30px; font-weight: 900;}

.box_area {display: flex; flex-wrap: wrap; gap: 20px; width: 100%; margin: 40px auto 0;}
.box_area .box {flex: 1 0 48%; border-radius: 30px; padding: 30px; box-sizing: border-box;}

.box_area.box1 dl.box:first-child {background: #f8f8f8 url(/img/isa/renewal/isa_box1_1.gif) no-repeat calc(100% - 10px) calc(100% - 5px); background-size: 50% auto;}
.box_area.box1 dl.box:nth-of-type(2) {background: #f8f8f8 url(/img/isa/renewal/isa_box1_2.gif) no-repeat calc(100% - 10px) calc(100% - 5px); background-size: 50% auto;}

.box_area.box2 dl.box:first-child {background: #f8f8f8 url(/img/isa/renewal/isa_box2_1.gif) no-repeat center 40px; background-size: 48% auto;}
.box_area.box2 dl.box:nth-of-type(2) {background: #f8f8f8 url(/img/isa/renewal/isa_box2_2.gif) no-repeat center 40px; background-size: 48% auto;}
.box_area.box2 dl.box:nth-of-type(3) {background: #f8f8f8 url(/img/isa/renewal/isa_box2_3.gif) no-repeat center 40px; background-size: 48% auto;}
.box_area.box2 dl.box:nth-of-type(4) {background: #f8f8f8 url(/img/isa/renewal/isa_box2_4.gif) no-repeat center 40px; background-size: 48% auto;}

.box_area.box3 dl {background: #f8f8f8}

.box_area.box1 dl {padding-bottom: 55%;}
.box_area.box1 dl dt {padding-bottom: 20px; font-size: min(8vw, 40px); line-height: 125%; font-weight: 900;}
.box_area.box1 dl dt span {color: #043b72;}
.box_area.box1 dl dd {font-size: min(5.6vw, 28px); line-height: 125%; color:#0e0e0e;}
.box_area.box1 dl dd strong {display: block; font-weight: 800;}

.box_area.box2 {}
.box_area.box2 dl { padding: 20px; padding-top: 155px; display: flex; flex-direction: column;}
.box_area.box2 dl.box {position: relative; flex: 1 1 calc(50% - 10px); max-width: calc(50% - 10px); min-width: 0; box-sizing: border-box;}
.box_area.box2 dl dt {padding-bottom: 10px; font-size: min(4.5vw, 20px); line-height: 125%; font-weight: 900;}
.box_area.box2 dl dt span {color: #ff7703; letter-spacing: -0.08em;}
.box_area.box2 dl dt span.sm {color: #212121; font-size: 15px;}
.box_area.box2 dl dd {display: flex; justify-content: flex-end; margin: 0;}
.box_area.box2 dl dd a {position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #043b72; color: transparent; font-size: 0; line-height: 0; overflow: hidden;}
.box_area.box2 dl dd a::after {content: ""; position: absolute; inset: 9px; background: linear-gradient(#fff, #fff) center/100% 2px no-repeat, linear-gradient(#fff, #fff) center/2px 100% no-repeat;}

.box_area.box3 {padding-top: 10px;}
.box_area.box3 dl {position: relative; overflow: hidden;}
.box_area.box3 dl dt {width: 100%; margin: 25px auto 55px; border-bottom: 1px solid #e0e0e0; padding-bottom: 35px; font-size: min(5.8vw, 25px); line-height: 125%; text-align: center; font-weight: 500;}
.box_area.box3 dl dt strong {font-size: min(6.3vw, 28px); font-weight: 800;}
.box_area.box3 dl dt strong span {color: #ff7703; font-weight: 900;}
.box_area.box3 dl dd.graph {width: 100%; margin: 0 auto;}
.box_area.box3 dl dd.graph p {position: relative; width: 50%;  height: 220px; float: left;}
.box_area.box3 dl dd.graph p>span, .box_area.box3 dl dd.graph p>em {position: absolute;}
.box_area.box3 dl dd.graph p>span {left: 107px; top: 15px; font-size: 40px; color:#ffffff; font-weight: 700; letter-spacing: -0.05em;}
.box_area.box3 dl dd.graph p:nth-of-type(2)>span{left: 169px; top: 21px; font-size: 30px; color:#8c8c8c}
.box_area.box3 dl dd.graph p>span i {display: inline-block; padding-left: 2px;font-size: 30px;}
.box_area.box3 dl dd.graph p>em {left: 132px; top: 133px; font-size: 25px; color:#043b72; font-weight: 700;}
.box_area.box3 dl dd.graph p:nth-of-type(2)>em {left: 203px; color:#8c8c8c;}
.box_area.box3 dl dd.txt {position: absolute; bottom: 0; left: 0; width: 100%; height: 67px; font-size: min(4vw, 13px); background: #f2f2f2; display: flex; justify-content: center; align-items: center; text-align: center;}

.isa_content a.ac {display: block; width: fit-content; margin: 2em auto 0; text-align: center; color: #fff; font-size: min(4vw, 20px); background: #003c78; padding: 1em 45px 1em 25px; box-sizing: border-box; border-radius: 5px; position: relative; font-weight: 800;}
.isa_content a.ac::after {content: "+"; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); color: #fff; font-size: min(4vw, 20px); font-weight: 400; line-height: 1;}

/* personal_pension */
.personal_pension_benefits {width: 100%; padding: 0 0 30px; box-sizing: border-box;}
.personal_pension_benefits .inner {display: flex; justify-content: center;}
.personal_pension_benefits .pp_benefits_panel {width: 100%; margin: 0 auto; padding: 48px 40px 44px; text-align: center; background: #fafafa; border: 1px solid #dbdbdb; border-radius: 0; box-sizing: border-box;}
.personal_pension_benefits .pp_benefits_badge {display: inline-block; padding: 10px 36px; margin: 0 0 28px; font-size: 26px; font-weight: 800; color: #fff; letter-spacing: 0.12em; background: #ff7703; border-radius: 999px;}
.personal_pension_benefits .pp_benefits_line {margin: 0 0 12px; font-size: min(5.5vw, 25px); font-weight: 600; line-height: 140%; color: #0e0e0e; letter-spacing: -0.02em;}
.personal_pension_benefits .pp_benefits_line + .pp_benefits_line {margin-bottom: 20px;}
.personal_pension_benefits .pp_benefits_highlight {color: #ff7703; font-weight: 800;}
.personal_pension_benefits .pp_benefits_note {margin: 0 0 32px; font-size: min(4.5vw, 20px); line-height: 150%; color: #6c6c6c;}

.commnon_table {width: 100%; margin: 0 auto; border-collapse: separate; border-spacing: 0; border: 1px solid #e0e0e0; border-right: 0; overflow: hidden; table-layout: fixed; box-sizing: border-box;}
.commnon_table th {width: fit-content; background: #002c61; color: #fff; font-size: min(3.6vw, 16px); font-weight: 700; text-align: center; vertical-align: middle; padding: 10px 5px; border-bottom: 1px solid #e0e0e0; border-right: 1px solid rgba(255, 255, 255, 0.22); word-break: keep-all;}
.commnon_table td {background: #fff; color: #043b72; font-size: min(3.6vw, 16px); line-height: 120%; font-weight: 600; text-align: center; vertical-align: middle; padding: 10px 8px; border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; word-break: keep-all;}
.commnon_table tr:last-child th,
.commnon_table tr:last-child td {border-bottom: none;}
.commnon_table tr th.ac {background: #ff7703 !important; color: #fff;}
.commnon_table tr td.ac {color: #ff7703;}
.commnon_table tr.row th, .commnon_table tr.row td {background: #f8f9fc !important;}

.table_comment {padding: 20px 0 0 !important; font-size: min(3vw, 15px) !important; line-height: 120% !important; color: #7f7f7f; text-align: center;  word-break: keep-all;}

.infobox {height: auto; margin-top: 30px; padding: 50% 0 10%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;  font-size: min(6.0vw, 30px); color: #0e0e0e; font-weight: 900; background: #fff7ed url(/img/personal-pension/renewal/img2.jpg) no-repeat center 18%;}
.infobox strong {display: inline-block; margin-bottom: 20px; padding: 8px 24px 5px; font-size: min(4.5vw, 25px); font-weight: 500; border: 1px solid #21201f; border-radius: 20px;}
.infobox span {color: #ff7703;}

.event-notice__faq {line-height: 125%; margin: -20px 0 20px;}
.event-notice__faq dt {margin-top: 20px; padding: 15px 22px 15px 50px; text-indent: -28px; color: #043b72; font-weight: 900; background: #f8f9fc;}
.event-notice__faq dt em {color: #ff7703}
.event-notice__faq dd {padding: 0 0 20px 53px; background: #f8f9fc;}

/* video */
.v1_area, .v2_area, .v3_area {text-align: center; background-color: #fff;}
.v1_area {border-top: 1px solid #dbdbdb;}
.v1_area video, .v2_area video, .v3_area video {width: 100%; height: auto; display: block; transform: translateZ(0); clip-path: inset(1px); background-color: transparent;}

.section-notice .notice h4 {font-size: 15px; 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: 13px; font-weight: 500;}

/* 하단 float 메뉴 */
.float_menu {position: fixed !important; left: 50%; bottom: 80px; 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.first-time {background: url(/img/event/menu_icon_bg.gif) no-repeat left 0px;}
.float_menu .speech_box li.rich {background-position: left -39px;}
.float_menu .speech_box li.government-bond {background-position: left -177px;}
.float_menu .speech_box li.cospi {background-position: left -119px;}
/* .float_menu .speech_box li.personal-pension {background-position: left -177px;} */
.float_menu .speech_box li.isa {background-position: left -217px;}
.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.row {padding-top: 10px; margin-top: 13px; height: 0; border-top: 1px solid #e0e0e0; background: none;}

.float_menu .speech_box li.IMA {background: url(/img/event/menu_icon_ima.gif) no-repeat left 0px;}
.float_menu .speech_box li.RIA {background: url(/img/event/menu_icon_ria.gif) no-repeat left 0px;}
.float_menu .speech_box li.personal-pension {background: url(/img/event/menu_icon_personal.gif) no-repeat left 0px; background-size: auto 32px;}

.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%);}

/* 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: 42px; padding: 25px 35px 0; font-size: 18px; font-weight: 800; color: #0b4a78; border-bottom: 1px solid #d9d9d9; letter-spacing: -0.3px;}
.event-notice__content {padding: 20px 30px; font-size: 14px;}
.event-notice__content h3 {margin: 0; padding: 0; font-size: 14px; font-weight: 700; color: #7f7f7f; line-height: 28px;}
.event-notice__content ul {margin: 0; padding: 0; line-height: 22px; color: #666;}
.event-notice__content ul li {margin: 0; padding: 0; line-height: 22px; text-indent: -10px; padding-left: 10px;}

.sticky-bottom-cta a {font-size: 20px; background-color: #f16a10;}
.app_link_mo img {height: 24px; width: auto; vertical-align: -5px; margin-right: 8px;}

.sticky-bottom-cta.personal_pension_btn a {float: left; width: 50%;}
.sticky-bottom-cta.personal_pension_btn a:last-child {background: #4d2a13}

/* end */
#end {position: relative; width: 100%; height: 100%; text-align: center; background: #f5f5f7;}
#end .end_top {text-align: right; padding: 17px; background: #043b73; box-sizing: border-box;}
#end .end_img {margin: 0 0 -50px; padding-top: 80px;}

#end .swiper_box .pause, #end .swiper_box .play  {bottom: 52px; top: auto;}