/* ---------------- reset ------------------ */
section .inner{width: auto; padding: 0;}
#footer .fnb,
#footer .info ul:last-child,
#footer .right,
.btn_go_top,
.site_wrap{display: none;}
/* ---------------- //reset ------------------ */


/* ---------------- common ------------------ */
html.ofy_hidden,
html.ofy_hidden body{overscroll-behavior: none; touch-action: none;}
html,body{font-size: 16px;}
body{font-family: 'NanumSquare Neo', 'NanumSquare Neo Variable', sans-serif; color: #222;}
#container{padding-top: 2rem; background-color: #f8f8f8; overflow: hidden;}
.page_container{max-width: 360px; margin: 0 auto;}
section .inner{max-width: 328px;}
footer{padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));}

:root {
    --bd: 2px solid #222;
}

/* button */
.btn_wrap [class*="btn_"]{padding: 0.75rem 1.5rem; background-color: #222; color: #fff; font-size: 0.875rem; font-weight: 700; line-height: 136%; display: flex; align-items: center; justify-content: center;}
/* ---------------- //common ------------------ */


/* ---------------- 시작페이지 start ------------------ */
.start_page{opacity: 0; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 999; background-color: #f8f8f8; transition: opacity 0.6s ease;}
.start_page.show {opacity: 1;}
.start_page .inner{border: var(--bd); margin: auto 0; width: 328px;}
.start_page .tit_wrap{width: 100%; display: flex; flex-direction: column; font-size: 2.875rem; font-weight: 700; line-height: 130%; text-align: center; background-color: #fff;}
.start_page .tit_wrap >div{height: 5rem; border-bottom: var(--bd); width: 100%; display: flex; align-items: center;}
.start_page .tit{flex: 0 0 50%; height: 100%; padding: 1rem; text-align: left; background-color: #B1F2EC; font-size: 1.125rem; line-height: 136%; border-right: var(--bd);}
.start_page .txt_start{flex: 1;}

/* slot text */
.start_page .sentence{flex: 0 0 80%; height: 100%; padding: 1rem; background-color: #FDE789; border-right: var(--bd);}
.start_page .sentence .slot_window{width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; perspective: 1000px;}
.start_page .sentence .slot_reel {width: 100%; height: 100%; position: relative; transform-style: preserve-3d;}
.start_page .sentence .slot_reel_inner {position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 4s cubic-bezier(.07, .01, .4, 1); display: flex; justify-content: center; align-items: center;}
.start_page .sentence .slot_face {position: absolute; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; left: 0; font-size: 2.7rem; white-space: nowrap;}

.start_page .txt_post{flex: 1;}
.start_page .txt_end{flex: 0 0 60%; border-right: var(--bd); display: flex; align-items: center; justify-content: center; height: 100%;}
.start_page .logo{flex: 1; height: 100%; background: url("/static/images/wiki/bank_logo.svg") no-repeat center/5.625rem 2.063rem; margin: 0 auto;}

.start_page .visuals{width: 100%; height: 0; padding-bottom: calc((364 / 360) * 100%); background-color: #B1F2EC; position: relative; overflow: hidden;}
.start_page .visuals::before{content: ""; position: absolute; inset: 0; background: url("/static/images/wiki/visual_bg.png") no-repeat center/100% 100%; mix-blend-mode: luminosity; z-index: 0;}
.start_page .char1{width: 60%; height: 19.938rem; aspect-ratio: 227/314; background: url("/static/images/wiki/char2.svg") no-repeat center/100% auto; position: absolute; left: -1.875rem; bottom: 3.375rem; z-index: 2; animation: tilt2 1.5s cubic-bezier(.25,.1,.25,1) infinite; transform-origin: bottom center;}
.start_page .char1 span{width: 1.625rem; height: 1.625rem; background: url("/static/images/wiki/char2_top.svg") no-repeat center/100% auto; position: absolute; left: 3.875rem; top: 0.938rem; animation: sweatUp 1.2s ease-out infinite;}
.start_page .char2{width: 85%; height: 17.75rem; aspect-ratio: 314/284; background: url("/static/images/wiki/char1.svg") no-repeat center/100% auto; position: absolute; right: -6.75rem; bottom: 6.188rem; z-index: 2; animation: tilt 1.5s cubic-bezier(.25,.1,.25,1) infinite; transform-origin: bottom center;}
.start_page .bg{width: 24.438rem; height: 18.938rem; background: url("/static/images/wiki/char_bg.svg") no-repeat center/100% auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; animation: scale 1.5s cubic-bezier(.25,.1,.25,1) infinite; transform-origin: left center;}

.start_page .btn_wrap{background-color: #222;}
.start_page .btn_cta{width: 100%; padding: 1.25rem 1.5rem; justify-content: space-between; font-family: 'NanumSquare Neo', 'NanumSquare Neo Variable', sans-serif; font-size: 1.125rem;}
.start_page .btn_cta i{display: inline-block; width: 1.5rem; height: 1.5rem; background: url("/static/images/wiki/next_arrow.svg") no-repeat center/100% auto; position: relative;}
.start_page .btn_cta i::before{content: ""; display: block; width: 7px; height: 2px; background: #fff; position: absolute; top: 11px; right: 6px; transform-origin: right center; animation: widthPulse 1.5s ease-in-out infinite;}
/* ---------------- 시작페이지 end ------------------ */


/* ---------------- 본문페이지 start ------------------ */
.cont_page{display: none;}
.sec_bg{height: 100%; background: url("/static/images/wiki/visual_bg.png") no-repeat center bottom/100% 847px; background-blend-mode: soft-light; opacity: 0.6; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;}
.star{position: relative;}
.star::before,
.star::after{content: ""; display: block; width: 1.5rem; height: 1.5rem; background: url("/static/images/wiki/star_bk.svg") no-repeat center/100% auto; position: absolute; top: 50%; transform: translateY(-50%);}

/* ------- section1 ------- */
.sec_01 .row1,
.sec_01 .row2,
.sec_01 .row3{display: flex; align-items: center; border-bottom: var(--bd); text-align: center; font-weight: 700;}

.sec_01 .sec_head{border: var(--bd); background-color: #fff;}
.sec_01 .sec_head h2{width: 100%; background-color: #222; color: #fff; font-size: 1.875rem; line-height: 130%; border-bottom: var(--bd); padding: 0.625rem 0 0.625rem 0.625rem; text-align: left; font-weight: 700;}
.sec_01 .sec_head .row2 .today{flex: 0 0 80%; background-color: #B1F2EC; border-right: var(--bd); padding: 0.625rem 1rem; font-size: 1.375rem; line-height: 134%;}
.sec_01 .sec_head .row2 .star::before,
.sec_01 .sec_head .row2 .star::after{width: 1.25rem; height: 1.25rem;}
.sec_01 .sec_head .row2 .star::before{left: 0.625rem;}
.sec_01 .sec_head .row2 .star::after{right: 0.625rem;}
.sec_01 .sec_head .row2 span{flex: 1;}
.sec_01 .sec_head .row3 p{flex: 0 0 auto; background-color: #FDE789; border-right: var(--bd); padding: 0.625rem 1rem; font-size: 1.125rem; line-height: 134%;}
.sec_01 .sec_head .row3 span{flex: 1;}
.sec_01 .sec_head figure{width: 100%;height: 16.25rem;padding: 1.188rem 2.563rem;background-repeat: no-repeat;background-position: center;background-size: 17.75rem 15.063rem;}

/* 오늘의 단어 */
.sec_01 .word_trigger{margin-top: 2rem; border: var(--bd); line-height: 130%; font-size: 2.125rem; background-color: #fff;}
.sec_01 .word_trigger .row1 p{flex: 0 0 40%; border-right: var(--bd); padding: 0.625rem 0;}
.sec_01 .word_trigger .row1 span{flex: 1;}
.sec_01 .word_trigger .row2 >div{flex: 0 0 auto; border-right: var(--bd); position: relative;}
.sec_01 .word_trigger .row2 .topic{padding: 0.625rem 1rem; background-color: #FDE789; white-space: nowrap;}
.sec_01 .word_trigger .row2 >div button{position: absolute; right: -1.063rem; top: -0.938rem; width: 2rem; height: 2rem; background: url("/static/images/wiki/ico_info.svg") no-repeat right bottom/100% auto; animation: scale2 1.5s ease-in-out infinite;}
.sec_01 .word_trigger .row2 >p{flex: 1; text-align: left;margin-left: 0.5rem;}
.sec_01 .word_trigger .row3{border-bottom: 0;}
.sec_01 .word_trigger .row3 p{flex: 0 0 60%; border-right: var(--bd); padding: 0.625rem 0;}
.sec_01 .word_trigger .row3 span{flex: 1; position: relative;}
.sec_01 .word_trigger .row3 span::after{content: ""; display: block; width: 7.5rem; height: 6.5rem; background: url("/static/images/wiki/word_char.svg") no-repeat center/100% auto; position: absolute; right: -15px; bottom: -47px;}

/* 종이 */
.sec_01 .encyclopedia{margin-top: 2rem; }
.sec_01 .paper_bg{position: relative; width: 100%; height: 100%;}
.sec_01 .piece{border: var(--bd); background-color: #E5E5E5; width: 18.125rem; height: 21.875rem; position: absolute; left: 1rem; opacity: 0; pointer-events: none;}
.sec_01 .piece:nth-child(1) { --x: -300%; --y: -150%;}
.sec_01 .piece:nth-child(2) { --x: 250%;  --y: -200%;}
.sec_01 .piece:nth-child(3) { --x: -200%; --y: 250%;}
.sec_01 .piece:nth-child(4) { --x: 200%;  --y: 300%;}
.sec_01.on .piece{animation: flyIn 1.4s cubic-bezier(0.45, 0, 0.55, 1) forwards;}
.sec_01.on .swiper_container{animation: flyIn2 1.4s cubic-bezier(0.45, 0, 0.55, 1) forwards;}

/* 스와이퍼 */
.sec_01 .swiper_container{opacity: 0; --x: -300%; --y: -150%; position: relative; width: 19.125rem; height: 22.875rem; margin: 0 auto;}
.sec_01 .swiper_container::after{content: ""; display: block; border: var(--bd); background-color: #E5E5E5; width: 18.125rem; height: 21.875rem; position: absolute; bottom: 0; right: 0; z-index: 0;}
.sec_01 .swiper{border: var(--bd); background-color: #fff; position: relative; width: 18.125rem; height: 21.875rem; z-index: 1; overflow: hidden;}
.sec_01 .swiper-wrapper{height: 100%;}
.sec_01 .swiper-slide{padding: 2.625rem 1.5rem 5rem; position: relative;}
.sec_01 .swiper-slide::after{content: ""; display: block; width: 100%; height: 100%; background: url("/static/images/wiki/underline.svg") no-repeat center/100% auto; position: absolute; left: 0; top: -1.25rem;}
.sec_01 .swiper-slide p{width: 100%; height: 100%; overflow: hidden; font-size: 1rem; font-weight: 600; line-height: 200%;}
.sec_01 .swiper-slide p b,
.sec_01 .swiper-slide p strong {font-weight: 700; color: #000; display: inline-block;}
.sec_01 .swiper_control{width: 15.125rem; height: 2.5rem; position: absolute; bottom: 2.5rem; left: 1.563rem; z-index: 2; display: flex; align-items: center; justify-content: space-between;}
.sec_01 .swiper-button-prev,
.sec_01 .swiper-button-next{all: unset; background: url("/static/images/wiki/prev.svg") no-repeat center/12px 12px; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid #c2c2c2; box-sizing: border-box;}
.sec_01 .swiper-button-next{transform: rotate(180deg); position: relative;}
.sec_01 .swiper-button-next::before{content: ""; display: none; width: 7px; height: 2px; background: #fff; position: absolute; top: 18px; right: 14px; transform-origin: right center; animation: widthPulse 1.4s ease-in-out infinite;}

.sec_01 .swiper-button-prev.on,
.sec_01 .swiper-button-next.on{background-image: url("/static/images/wiki/ico_arrow_wh.svg"); background-size: 16px 16px; border: 1px solid #222; background-color: #222;}
.sec_01 .swiper-button-prev.on{transform: rotate(-180deg);}
.sec_01 .swiper-button-next.on{background-image: url("/static/images/wiki/next_arrow.svg"); transform: rotate(0);}
.sec_01 .swiper-button-next.on::before{display: block;}

.sec_01 .info{margin-top: 2rem; padding-bottom: 3.5rem; text-align: center;}
.sec_01 .info .top{background-color: #222; padding: 1rem; position: relative; color: #fff; font-size: 1.125rem; font-weight: 700; line-height: 136%;}
.sec_01 .info .star::before,
.sec_01 .info .star::after{background-image: url("/static/images/wiki/star_wh.svg");}
.sec_01 .info .star::before{left: 3.438rem;}
.sec_01 .info .star::after{right: 3.438rem;}
.sec_01 .info .btm{padding: 1.25rem 1.5rem; background-color: #fff; font-size: 0.875rem; font-weight: 700; line-height: 160%; border: var(--bd);}
/* ------- //section1 ------- */


/* ------- section2 ------- */
.sec_02{position: relative; left: 50%; width: 100vw; margin-left: -50vw;}
.sec_02 .inner{max-width: unset;}
.sec_02 .hotline_guide{border-top: var(--bd); border-bottom: var(--bd); padding: 1.25rem 1.5rem; background-color: #B1F2EC; display: flex; justify-content: space-between; align-items: center;}
.sec_02 .hotline_guide p{font-size: 1rem; font-weight: 700; line-height: 136%;}
.sec_02 .hotline_guide figure{width: 3.5rem; height: 3.5rem; background: url("/static/images/wiki/siren.svg") no-repeat center/100% auto;}

.sec_02 .hotline_item{display: flex; align-items: center; background-color: #fff; border-bottom: var(--bd);}
.sec_02 .hotline_item figure{width: 6.25rem; height: 6.125rem; background: url("/static/images/wiki/hotline1.svg") no-repeat center/4rem 4rem; border-right: var(--bd);}
.sec_02 .hotline_item:nth-of-type(2) figure{background-image: url("/static/images/wiki/hotline2.svg")}
.sec_02 .hotline_item >div{flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem 1rem 1.25rem;}
.sec_02 .hotline_txt{display: flex; flex-direction: column; justify-content: space-between; font-weight: 700;}
.sec_02 .hotline_org{font-size: 1rem; line-height: 136%;}
.sec_02 .hotline_num{font-size: 2.125rem; line-height: 130%;}
.sec_02 .btn_call{width: 3rem; height: 3rem; background: #222 url("/static/images/wiki/call.svg") no-repeat center/1.75rem 1.75rem; border-radius: 50%;}
/* ------- //section2 ------- */


/* 섹션3~5 배경 */
.sec_wrap{background-color: #FDE789; width: 100vw; position: relative; left: 50%; margin-left: -50vw;}
.sec_wrap .sec_bg{background: #FDE789 url("/static/images/wiki/visual_bg.png") no-repeat center bottom/100% 700px; opacity: 0.7; background-blend-mode: luminosity;}
.sec_wrap .sec_bg::after {content: ""; position: absolute; left: 0; bottom: 570px; width: 100%; height: 130px; background: linear-gradient(to top, rgba(253,231,137,0) 0, #FDE789 100%);}
.sec_wrap .sec_04,
.sec_wrap .sec_05{max-width: 360px; margin: 2.5rem auto 0; position: relative; z-index: 1;}
.sec_wrap .sec_04 .inner,
.sec_wrap .sec_05 .inner{max-width: 328px;}


/* ------- section3 ------- */
.sec_03{padding-top: 2rem; text-align: center;}
.sec_03 h3{padding: 1rem; font-size: 1.125rem; font-weight: 700; line-height: 136%;}
.sec_03 .star::before{left: 4.375rem;}
.sec_03 .star::after{right: 4.375rem;}

.sec_03 .marquee_wrap{width: 100vw; left: 50%; margin-left: -50vw; margin-top: 0.5rem; overflow: hidden; position: relative; pointer-events: none; transform: translateZ(0);}
.sec_03 .marquee_track{display: flex; gap: 0.5rem; align-items: center; justify-content: flex-start; will-change: transform; white-space: nowrap; transform: translate3d(0, 0, 0); backface-visibility: hidden; position: relative;}
.sec_03 .marquee_track > * {flex-shrink: 0;}
.sec_03 .marquee_track:nth-of-type(2){margin-top: 0.5rem;}
.sec_03 .marquee_img{border: var(--bd);}
.sec_03 .marquee_img img{display: block; width: 8.75rem; height: 12.5rem;}

.sec_03 .ebook_guide{padding-top: 2.5rem;}
.sec_03 .guide_txt .logo{display: inline-block; width: 5.625rem; height: 2.063rem; margin-right: 0.25rem; vertical-align: sub; background: url("/static/images/wiki/bank_logo.svg") no-repeat center/100% auto;}
.sec_03 .guide_txt p{font-size: 0.875rem; font-weight: 700; line-height: 160%;}
.sec_03 .guide_txt p:nth-of-type(2){margin-top: 0.5rem;}
.sec_03 .guide_txt .hl{font-weight: 700; position: relative; z-index: 0;}
.sec_03 .guide_txt .hl::after{content: ""; display: block; background: #FEF3C4; width: 100%; height: 0.688rem; position: absolute; left: 0; bottom: 0; z-index: -1;}
.sec_03 .btn_wrap{margin: 1.25rem 0;}
.sec_03 .btn_dwl{gap: 0.125rem;}
.sec_03 .btn_dwl i{display: inline-block; width: 1.25rem; height: 1.25rem; background: url("/static/images/wiki/ico_dwl.svg") no-repeat center/100% auto;}
.sec_03 .info{color: #8F8456; font-size: 0.688rem; font-weight: 400; line-height: 140%; font-family: 'Pretendard', sans-serif;}
/* ------- //section3 ------- */


/* ------- section4 ------- */
.sec_04 .event_wrap{border: var(--bd); background-color: #fff;}
.sec_04 .event_inner{padding: 2.5rem 1.4rem;}
.sec_04 .tit_wrap{font-weight: 800; text-align: center;}
.sec_04 .tit_wrap .star{font-size: 0.75rem; font-weight: 700;}
.sec_04 .tit_wrap .star::before,
.sec_04 .tit_wrap .star::after{width: 0.75rem; height: 0.75rem; margin-top: -1px;}
.sec_04 .tit_wrap .star::before{left: 0.25rem;}
.sec_04 .tit_wrap .star::after{right: 0.25rem;}
.sec_04 .tit_wrap p{font-size: 1.25rem; line-height: 136%; margin-top: 0.5rem;}
.sec_04 .tit_wrap [class*="hl_"]{position: relative; z-index: 0;}
.sec_04 .tit_wrap [class*="hl_"]::after {content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; z-index: -1;}
.sec_04 .tit_wrap .hl_yellow::after{background: #FDE789;}
.sec_04 .tit_wrap .hl_blue::after{background: #B1F2EC;}

.sec_04 .prize{margin-top: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid #222;}

.sec_04 .event_list{margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem;}
.sec_04 .event_list h4{margin-bottom: 0.5rem; display: inline-block; font-size: 0.75rem; font-weight: 700; line-height: 120%; padding: 0.375rem; border: 1px solid #222; background-color: #B1F2EC;}
.sec_04 .event_list .steps >li:not(:first-child){margin-top: 0.5rem;}
.sec_04 .event_list .steps >li i{margin-top: 2px; width: 1rem; height: 1rem; border: 1px solid #222; border-radius: 50%; background-color: #FDE789; display: flex; align-items: center; justify-content: center; font-size: 0.5rem; font-weight: 800; line-height: 160%;}
.sec_04 .event_list .step_item{display: flex; gap: 0.375rem;}
.sec_04 .event_list p{font-size: 0.75rem; font-weight: 600; line-height: 160%; flex: 1 0 0;}
.sec_04 .event_list p b{font-weight: 800;}
.sec_04 .event_list p.tip{color: #1FA99C; line-height: 140%; margin-top: 0.25rem;}
/* 캐릭터 */
.sec_04 .event_list >li:nth-child(3){position: relative;}
.sec_04 .event_list >li:nth-child(3)::after{position: absolute; right: -0.5rem; top: -1.563rem; content: ""; display: block; width: 6.063rem; height: 4.75rem; background: url("/static/images/wiki/event_char.svg") no-repeat center/100% auto;}

.sec_04 .event_list .prize_list{margin-top: 0.25rem; border: 1px solid #222; background-color: #FEF3C4; padding: 0.75rem; position: relative;}
.sec_04 .event_list .prize_list::after{content: ""; display: block; position: absolute; bottom: -0.813rem; right: -0.813rem; width: 4.875rem; height: 4.125rem; background: url("/static/images/wiki/event_box.svg") no-repeat center/100% auto;}
.sec_04 .event_list .prize_list li,
.sec_04 .event_list .note_list li{list-style: square; margin-left: 0.75rem;}

.sec_04 .event_list .btn_apply{width: 100%;}

.sec_04 .event_list .note_list{font-size: 0.75rem; font-weight: 500; line-height: 140%;}
.sec_04 .event_list .note_list li{word-break: keep-all;}
.sec_04 .event_list .note_list li:not(:first-child){margin-top: 0.25rem;}
/* ------- //section4 ------- */


/* ------- section5 ------- */
.sec_05{padding-bottom: 2.5rem;}
.sec_05 a{border: var(--bd); background-color: #fff; display: block; padding: 1.875rem 1rem 1rem 1rem;}
.sec_05 .app_promo{display: flex; align-items: center; justify-content: center; gap: 1.25rem;}
.sec_05 .promo_img{width: 5rem; height: 5rem; border-radius: 1.688rem; background: #0547E0 url("/static/images/wiki/bankit_1.svg") no-repeat center/3.75rem 3.75rem;}
.sec_05 .app_txt{display: flex; flex-direction: column; gap: 0.5rem;}
.sec_05 .app_txt .bankit_logo{width: 5.625rem; height: 1.125rem; background: url("/static/images/wiki/bankit_2.svg") no-repeat center/100% auto;}
.sec_05 .app_txt p{font-size: 0.875rem; font-weight: 700; line-height: 160%;}
.sec_05 .cta{width: 100%; margin-top: 1.25rem; background-color: #222; color: #fff; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.125rem; font-size: 0.875rem; font-weight: 700; line-height: 136%;}
.sec_05 .cta i{display: inline-block; width: 1.25rem; height: 1.25rem; background: url("/static/images/wiki/ico_dwl.svg") no-repeat center/100% auto;}
/* ------- //section5 ------- */
/* ---------------- 본문페이지 end ------------------ */


#footer{display: none; background-color: #222; padding: 2rem 1rem 2.5rem; font-family: 'NanumSquare Neo', 'NanumSquare Neo Variable', sans-serif;}
#footer .info {margin-bottom: 1rem;}
#footer .info ul{flex-direction: column; gap: 0.25rem;}
#footer .info ul li.ul_title{margin-bottom: 0.5rem; color: #fff; font-weight: 700; font-size: 0.875rem; line-height: 136%;}
#footer .info ul li{line-height: 150%; color: #aaa;}
#footer .info ul li b{font-weight: 600; color: #eee; margin-right: 0.5rem;}
#footer .info ul li:last-child b{display: inline-block;}
#footer .copyright{color: #888888;}


/* ---------------- popup ------------------ */
#popup_all .popup{height: 100%; height: 100dvh;}
#popup_all .btn_wrap{margin-top: 1.5rem;}
#popup_all .btn_wrap [class^="btn_"]{all: unset;}
#popup_all .pop_word .btn_wrap [class^="btn_"].close{border: var(--bd); padding: 0.75rem 1.5rem; text-align: center; font-size: 0.875rem; line-height: 136%; font-weight: 700;}
#popup_all .popup[data-layout="popupE"] .popup_inner{max-width: 312px; position: relative; border-radius: 0; padding: 3.5rem 1.5rem 1.5rem 1.5rem;}
#popup_all .popup[data-layout="popupE"] .cont_wrap{padding: 0;}
.pop_word .popup_inner{border: var(--bd);}
.pop_word .btn_x{width: 2rem; height: 2rem; background: url("/static/images/wiki/x.svg") no-repeat center/100% auto; position: absolute; top: 1rem; right: 0.5rem;}
.pop_word .cont_wrap{overflow-y: scroll; text-align: left; word-break: break-all;}
.pop_word .tit{font-size: 1.125rem; font-weight: 700; line-height: 177%; white-space: nowrap;}
.pop_word .cont_txt{font-weight: 600; line-height: 200%; font-size: 1rem;}
.pop_word .cont_txt p{text-underline-offset: 7px; text-decoration: underline; text-decoration-color: #eee; text-decoration-thickness: 2px;}
.pop_word .cont_txt p:not(:first-child){margin-top: 1.875rem;}
/* ---------------- //popup ------------------ */






/* animation */
@keyframes widthPulse {
    0% {
        width: 7px;
    }
    50% {
        width: 15px;
    }
    100% {
        width: 7px;
    }
}
@keyframes flyIn {
    0% {
        transform: translate(var(--x, -200%), var(--y, -200%)) scale(0.8);
        opacity: 0;
    }
    60% {
        transform: translate(0, 0) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
}
@keyframes flyIn2 {
    0% {
        transform: translate(var(--x, -200%), var(--y, -200%)) scale(0.8);
        opacity: 0;
    }
    60% {
        transform: translate(0, 0) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
}
@keyframes scale {
    0% {
        transform: scale(0.8) translate(-50%,-50%);
    }
    50% {
        transform: scale(1) translate(-50%,-50%);
    }
    100% {
        transform: scale(0.8) translate(-50%,-50%);
    }
}
@keyframes scale2 {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.8);
    }
}
@keyframes tilt {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-5deg); }
}
@keyframes tilt2 {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(5deg); }
}
@keyframes sweatUp {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: translateY(-1rem) scale(1);
        opacity: 0;
    }
}