@charset "utf-8";

/* reset */
:root{--font-family: -apple-system, BlinkMacSystemFont, "SF UI Display", "Apple SD Gothic Neo", Roboto, "Noto Sans KR", notosans, sans-serif ;}
html, body, form, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, fieldset, a, button, input, textarea, table, th, td, figure, hr, i, b, header, footer, section, article {margin: 0; padding: 0; font-weight: 400; -webkit-text-size-adjust: none; font-family: var(--font-family); font-style: normal; box-sizing:border-box}
*:before,
*:after {box-sizing: border-box;}
body { overflow-x: hidden; color: #000; line-height: 1.4; word-break: keep-all; background: #fff; height: 100%;  margin: 0; padding: 0;}
html,
body {width: 100%;}
caption, legend { display: none;}
button { line-height: 1.4; letter-spacing: -0.03em; border: none; background-color: transparent;}
a { text-decoration: none;}
ul li {list-style: none;}
img {display: inline-block; width: 100%; height: 100%; vertical-align:top}

.stw-blind{position:absolute !important; width:1px; height:1px; margin:-1px; clip:rect(0,0,0,0); overflow:hidden; color:transparent;}
*:has(.stw-blind){position:relative;}

.skip-navi, 
.skip_navi { width: 100%; position: absolute;  top: -36px;}
.skip-navi a, 
.skip_navi a {width:100%; font-size: 14px; line-height: 36px; text-align: center; font-weight: 700; position: absolute; top: 0; left: 0; color: #fff; background: #004880; z-index: -1;}
.skip-navi a:active, 
.skip-navi a:focus, 
.skip-navi a:hover, 
.skip_navi a:active, 
.skip_navi a:focus, 
.skip_navi a:hover {z-index: 100000; top: 36px;}

/* layout */
.cs-bg{background-color:#F0F5FF}
.stw-cs-header{padding:0 20px; display:flex; align-items:center; justify-content: space-between; max-width:var(--max-width, 720px); margin:0 auto; position:sticky; left:0; top:0; z-index:3; height:56px; }
.stw-cs-header .header-left{display:flex; align-items:center; gap:10px; }
.stw-cs-header .goto-tworld{display:inline-block; width:24px; aspect-ratio: 1/1; background:url('../img/logo.png') no-repeat center /100%;; }
.stw-cs-header .page-tit{font-size:18px; font-weight:700; letter-spacing: -.72px;}
.stw-cs-header .close-btn{width:24px; height:24px; background:url('../img/close.svg') no-repeat center / 100%}

.stw-cs-footer{background:#2D313C; padding:20px; font-size:11px; line-height:18px; letter-spacing: -0.22px; color:#9397A5; max-width:var(--max-width, 720px); margin:0 auto}
.stw-cs-footer .footer-text{max-width:var(--max-width, 720px); }

.stw-cs-wrap{
    --max-width:720px;
    --primary-color :#4130DF ;
    --font-family: -apple-system, BlinkMacSystemFont, "SF UI Display", "Apple SD Gothic Neo", Roboto, "Noto Sans KR", notosans, sans-serif ;
    margin: 0 auto; max-width: 768px; box-sizing:border-box; display: flex; flex-direction: column; height:100%; font-family:var(--font-family);max-width:var(--max-width, 720px)
}
.stw-cs-wrap :is(div, a, button, em, p, section, article, strong){font-family:var(--font-family)}
.stw-cs-wrap .benefit-cont-wrap .page-head{padding:20px 20px 100px; position:relative;}
.stw-cs-wrap .benefit-cont-wrap .page-head::after{content:''; display:inline-block; width:117px; aspect-ratio: 1/1; background:url('../img/key-visual.png') no-repeat center / 100%; position:absolute; right:20px; bottom:-12px; }
.stw-cs-wrap .benefit-cont-wrap .page-head .page-tit{font-size:20px; line-height:28px; font-weight:700; letter-spacing: -0.4px;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container{display:grid; gap:60px; grid-template-columns: 1fr; }
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article{padding:20px 20px 0}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .article-tit{font-size:16px; letter-spacing:-0.32px; line-height:19px; font-weight:700; margin-bottom:24px}

.stw-cs-wrap .bottom-btn-area{padding:30px 20px 40px; background:#fff; }
.stw-cs-wrap  .bottom-comment{font-size:15px; font-weight:700; line-height:21px; color:#000; text-align:center; padding-bottom:30px; border-bottom:1px solid #EFEFEF; margin-bottom:30px }
.stw-cs-wrap .bottom-btn-area .bottom-guide-text{font-size:13px; line-height: 18px; letter-spacing: -0.26px;  color:#000; padding-left:34px; position:relative; margin-bottom:24px;}
.stw-cs-wrap .bottom-btn-area .bottom-guide-text::before{content:''; display:inline-block; width:24px; height:24px; position:absolute; background:url('../img/comment-icon.png') no-repeat center/100%; left:0; top:50%; margin-top:-12px; }
.stw-cs-wrap .bottom-btn-area .bottom-btn-container{display:flex;  flex-direction: column; gap:12px;}

/* 공통요소 : list */
.stw-cs-wrap .list{
    --font-size:13px;
    --color:#666;
    --gap: 8px;
    --padding-left : 7px; 
    --bullet-color:#444;
    --line-height:18px;
    --letter-spacing:-0.26px;
}

.stw-cs-wrap .list[data-type] .item{padding-left:var(--padding-left); position:relative;}
.stw-cs-wrap .list[data-type *= 'dot'] .item::before{content:''; display:inline-block; width:2px; height:2px; border-radius:50%; background-color:var(--bullet-color); position:absolute; left:0; top:8px;}
.stw-cs-wrap .list[data-type *= 'hypen']{--padding-left : 9px; }
.stw-cs-wrap .list[data-type *= 'hypen'] .item::before{content:''; display:inline-block; width:4px; height:1px;  background-color:var(--bullet-color); position:absolute; left:0; top:8px; }
.stw-cs-wrap .list .item > .list{margin-top:4px; --gap:4px;}
.stw-cs-wrap .list .item:not(:last-child){margin-bottom:var(--gap)}
.stw-cs-wrap .list .item{color:var(--color); font-size:var(--font-size); line-height:var(--line-height); letter-spacing:var(--letter-spacing)}
.stw-cs-wrap .list .item:has(:is(.item-tit, .item-cont)){display:flex; }
.stw-cs-wrap .list .item > span{display:inline-block; vertical-align:top; }
.stw-cs-wrap .list .item .item-tit{flex-shrink:0; min-width:24px;}
.stw-cs-wrap .list .item .item-cont{flex-grow:1; margin-left:4px; position:relative; margin-left:4px; padding-left:8px;}
.stw-cs-wrap .list .item .item-cont::before{content:':'; position: absolute; left:0; top:0; }
.stw-cs-wrap .list .item.flex-none{display:block; }
.stw-cs-wrap .list .item a{color:inherit; line-height: inherit; font-size:inherit; text-decoration: underline; text-underline-offset: 2px; font-weight:inherit}
.stw-cs-wrap .list .item.em{color:var(--primary-color); --bullet-color:var(var(--primary-color))}

/* 공통요소 : 버튼 */
.stw-cs-wrap .btn{
    --width:100%;
    --height:36px;      
    --background:#fff;
    display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:var(--width); height:var(--height); font-size:var(--font-size); line-height:var(--line-height); color:var(--color); border:var(--border); padding:var(--padding); border-radius:var(--border-radius); background:var(--background); 
}
.stw-cs-wrap .btn.mid{--height:42px; --font-size:14px; --color:var(--primary-color); --border:none; --padding:0; --border-radius:8px; --background:#EFEEFD; --line-height:15px;}
.stw-cs-wrap .btn.lar{--height:45px; --font-size:14px; --color:#fff; --border:none; --padding:0; --border-radius:6px; --background:var(--primary-color)}
.stw-cs-wrap .btn.text{--width:fit-content; --height:auto; --font-size:13px; --letter-spacing:-.26px; --color:#888; --border:none; --border-radius:0; --background:transparent; --padding:0; text-decoration: underline; text-underline-offset: 2px; }
.stw-cs-wrap .btn.text.caution-guide{padding-left:18px; position:relative; } 
.stw-cs-wrap .btn.text.caution-guide::before{content:''; display:inline-block; width:15px; aspect-ratio: 1/1; background:url('../img/caution-mark.svg') no-repeat center / 100%; position:absolute; left:0; top:2px}
.stw-cs-wrap .list + .caution-guide{margin-top:18px;}

/* 공통요소 : 아코디언의 공통 요소만 정의 */
.stw-cs-wrap .acc-list .acc-item .acc-linker{width:100%; position:relative; text-align:left; vertical-align:top; display:flex; align-items:center; }
.stw-cs-wrap .acc-list .acc-item .acc-linker::after{content: ''; display:inline-block; width:20px; height:20px;  background: url('../img/ico-arrow-up.svg') no-repeat center / 100%; transform: translateY(-50%); position: absolute; right:16px; top:50% }
.stw-cs-wrap .acc-list .acc-item .acc-expander{display:grid; grid-template-rows:0fr; overflow:hidden; transition:all 0.25s ease-in-out} 
.stw-cs-wrap .acc-list .acc-item .acc-expander .acc-cont{min-height:0}
.stw-cs-wrap .acc-list .acc-item.is-opened .acc-linker::after{transform: translateY(-50%)  rotate(-180deg)}
.stw-cs-wrap .acc-list .acc-item.is-opened .acc-expander{grid-template-rows:1fr}

/* pg-acc */
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc {display:flex; flex-direction: column; gap:14px}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-item{background:#fff; border-radius:10px; box-shadow:0px 6px 12px 0px rgba(220, 226, 242, 0.60);}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-linker{padding:30px 42px 28px 16px; justify-content: space-between; color:#000}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-text-area{flex-grow:1}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-text-area .flag{position:absolute; top:-2px; left:10px;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-text-area .acc-linker-tit{font-size:16px; font-weight:700; letter-spacing:-0.32px; }
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-text-area .acc-linker-cont{font-size:13px; letter-spacing: -0.26px; line-height:18px; }
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-text-area .acc-linker-tit +  .acc-linker-cont{margin-top:8px;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-ico{display:inline-block; width:62px; aspect-ratio: 1/1; flex-shrink:0  }
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-ico img{width:100%; height:auto; vertical-align: top;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-cont .acc-inner-cont{padding:24px 16px 28px; position:relative;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-cont .acc-inner-cont::before{content:''; display:inline-block; position:absolute; left:16px; right:16px; top:0; height:1px; background:#E9EDF6}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-cont .acc-inner-cont .acc-inner-cont-row + .acc-inner-cont-row{margin-top:20px;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .btn-area{margin-top:26px;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-cont .acc-inner-cont .row-tit{color:#000; font-size:13px; letter-spacing: -0.26px; margin-bottom:8px;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-cont .acc-inner-cont-row + .caution-guide{margin-top:13px}

/* coming-soon */
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-item:has(.coming-soon-text){position:relative; overflow:hidden;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-item:has(.coming-soon-text) .acc-linker{pointer-events: none;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .coming-soon-text{position:absolute; inset:0; background:rgba(138, 155, 200, 0.90); z-index:2;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .coming-soon-text span{color:#fff; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); font-size:18px; font-weight:700; padding-left:30px; line-height:20px;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .coming-soon-text span::before{content:''; display:inline-block; width:20px; height:20px; background:url('../img/coming-soon-icon.svg') no-repeat center /100%; position:absolute; left:0; top:0;  }

.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-item.coming-soon{pointer-events: none;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-item.coming-soon .acc-linker{padding-right:24px;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article .pg-acc .acc-item.coming-soon .acc-linker::after{content:none;}


/* welcome-back */
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article.welcome-back .article-tit{margin-bottom:32px;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article.welcome-back{background:#ECE8FC; padding-block:40px 28px; position:relative;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article.welcome-back::before{content:''; display:inline-block; width:30px; aspect-ratio:1/1; background:url('../img/plus-icon.svg') no-repeat center / 100%; position:absolute; top:-15px; left:calc(50% - 15px); }
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article.welcome-back .pg-acc .acc-item{background:unset; border-radius:unset; box-shadow: unset;;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article.welcome-back .pg-acc .acc-item .acc-linker{flex-direction: column; padding:0 0 32px; text-align:center; gap:12px; }
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article.welcome-back .pg-acc .acc-item .acc-linker .list{--color:#000; }
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article.welcome-back .pg-acc .acc-item .acc-linker::after{right:50%; bottom:0; top:auto; transform:translateX(50%) }
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article.welcome-back .pg-acc .acc-item.is-opened .acc-linker::after{transform:translateX(50%) rotate(-180deg) }
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article.welcome-back .pg-acc .acc-item .acc-text-area{order:2; padding-bottom:50px;}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article.welcome-back .pg-acc .acc-item .acc-ico{width:100px; height:100px; order:1}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article.welcome-back .pg-acc .acc-cont .acc-inner-cont{margin-top:12px; padding:24px 0 0}
.stw-cs-wrap .benefit-cont-wrap .benefit-inner-container .benefit-article.welcome-back .pg-acc .acc-cont .acc-inner-cont::before{background:#D9D5E9; left:0; right:0}

/* 공통요소 : flag */
.stw-cs-wrap .flag{display:inline-block; text-align:center; vertical-align:top; width:53px; height:21px;  background-color:var(--background); }
.stw-cs-wrap .flag .flag-text{display:inline-block; vertical-align: top; line-height:15px; font-size:11px; letter-spacing:-.22px; color:var(--color);  padding-top:2px; font-weight:600}
.stw-cs-wrap .flag.purple{ --color:#4E3CFF; background:url('../img/flag01.svg') no-repeat center / 100%}
.stw-cs-wrap .flag.gray{ --color:#585858; background:url('../img/flag02.svg') no-repeat center / 100%}

/* cs modal */
body.no-scroll{overflow:hidden; overflow:clip; height:100%;  touch-action: none; overscroll-behavior: none; }
.stw-cs-modal-wrap{position:fixed; inset:0; background:rgba(00,00,00,0.7); display:grid; place-items: center; grid-template-columns: 1fr; grid-template-rows: 1fr; z-index:5}
.stw-cs-modal-wrap .modal{ background:#fff; width:calc(100% - 20px - 20px) ; border-radius:5px; position:relative; max-height:calc(100vh - 60px - 60px); display:flex; flex-direction: column; animation: modal-fade-in 0.3s; max-width:calc(var(--max-width, 720px) - 20px - 20px)}
.stw-cs-modal-wrap .modal .modal-header{padding:18px 24px 9px; flex-shrink:0}
.stw-cs-modal-wrap .modal .modal-header .modal-tit{font-size:17px; line-height:26px; letter-spacing:-0.34px; color:#000; font-weight:700;}
.stw-cs-modal-wrap .modal .modal-content{padding:9px 24px 27px; flex-grow:1; overflow-x:hidden; overflow-y:auto; overscroll-behavior: none;}
.stw-cs-modal-wrap .modal .modal-footer{padding:16px 24px; border-top:1px solid #f5f5f5; display:flex; flex-shrink:0;}
.stw-cs-modal-wrap .modal .modal-footer .modal-btn{font-size:15px; letter-spacing: -0.3px; margin-left:auto; font-weight:700; color:#000}
.stw-cs-wrap .stw-cs-modal-wrap .list{--color:#202020; --font-size:14px; --line-height:20px; }
.stw-cs-wrap .stw-cs-modal-wrap .list em{font-weight:700; font-style:normal}
/* 250715 [MOZOP002-42831] 추가 */
.stw-cs-modal-wrap .modal .modal-content .modal-cont-tit {font-size: 15px; font-weight: 700;}
.stw-cs-wrap .stw-cs-modal-wrap .astra {margin-top: 12px; display: flex; font-size: 13px; color: #666; align-items: flex-start;}
.stw-cs-wrap .stw-cs-modal-wrap .astra::before {content:'*'; display: block; width: 8px; margin-top: 2px; flex-shrink: 0;}
/* //250715 [MOZOP002-42831] 추가 */

.stw-cs-modal-wrap .modal-close-btn{width:26px; height:26px; position:absolute; top:18px; right:18px; }
.stw-cs-modal-wrap .modal-close-btn::before{content:''; width:24px; height:24px; background:url('../img/close.svg') no-repeat center / 100%; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); }

@keyframes modal-fade-in {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.stw-cs-wrap .rejoin-wrap{position:relative}
.stw-cs-wrap .btn-rejoin{display:inline-block; color: var(--primary-color); text-align: center; font-size: 13px; line-height: 16px; letter-spacing: -0.26px; margin-top:12px; border-radius: 99px; border: 1px solid #4130DF; padding:9px 14px; position: absolute; bottom: 30px; left: 50%; white-space: nowrap;    transform: translateX(-50%);}