@charset "UTF-8";
/*
    [제목] 마스 팝업 CSS
    [생성일] 2024-12
    [내용] 마스 팝업 레이아웃 스타일을 포함하고 있음.
    [비고] CSS 작성시 핀업 디자인팀 내부에 규정하고 있는 CSS 작성 규칙를 준수하여 작성할 것.
*/

/*네트워크메뉴 > 알림*/
.popup_network_alarm { display:none; position:absolute; top:44px; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); width:300px; max-height:350px; padding:10px; border:1px solid #ededed; border-radius:10px; background:#fff;  }
.popup_network_alarm ul{ height:100%; max-height:310px; overflow:hidden; overflow-y:auto; }
.popup_network_alarm ul::-webkit-scrollbar { width:6px; }
.popup_network_alarm ul::-webkit-scrollbar-thumb { height:30%; border-radius:10px; background:#ccc; }
.popup_network_alarm ul::-webkit-scrollbar-track  { background:#ededed; border-radius:10px; }

.popup_network_alarm:before { display:block; content:''; position:absolute; top:-10px; left:calc(50% - 10px); transform:translateX(-50%); -webkit-transform:translateX(-50%); transform-origin:center center; width:16px; height:16px; border-top:1px solid #ededed; border-left:1px solid #ededed; background:#fff; transform:rotate(45deg); z-index:1000; }
.popup_network_alarm .list_cont { display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; gap:0 20px; width:100%; padding:10px; align-items:center; }
.popup_network_alarm .list_cont .btn_del { display:block !important; width:18px !important; height:18px !important; background:url('/images/regular-xmark-s.png') no-repeat !important; }
.popup_network_alarm .list_cont .box_txt { -webkit-flex:0 0 calc(100% - 38px); -ms-flex:0 0 calc(100% - 38px); flex:0 0 calc(100% - 38px); }
.popup_network_alarm .list_cont .box_txt .cm_smtxt { width:100%; white-space:normal; margin-top:2px; }
.popup_network_alarm .list_cont .box_txt .cm_xsmtxt { display:-webkit-box; display:-ms-flexbox; display:flex; gap:0 5px; align-items:center; }
.popup_network_alarm .list_cont .box_txt .cm_xsmtxt .dot { display:block; width:6px; height:6px; border-radius:50%; background:#bfa004; }
.popup_network_alarm .non_list { display:-webkit-box; display:-ms-flexbox; display:flex; height:58px !important; border-radius:5px; background:#f8f8f8; justify-content:center; align-items:center; }


/*네트워크메뉴 > 언어*/
.popup_network_language { display:none; position:absolute; top:52px; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); width:auto; min-width:150px; max-height:350px; padding:10px; border:1px solid #ededed; border-radius:10px; background:#fff;  }
.popup_network_language:before { display:block; content:''; position:absolute; top:-10px; left:calc(50% - 10px); transform:translateX(-50%); -webkit-transform:translateX(-50%); transform-origin:center center; width:16px; height:16px; border-top:1px solid #ededed; border-left:1px solid #ededed; background:#fff; transform:rotate(45deg); z-index:1000; }
.popup_network_language li { display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; gap:0 10px; min-width:135px; padding:10px; border-radius:5px; font-size:13px; line-height:20px; align-items:center; cursor:pointer; }
.popup_network_language li.on { background:#65a60319; }
.popup_network_language li:hover { background:#f8f8f8; }
.popup_network_language li .ic_flag { display:block; width:34px; height:23px; }
.popup_network_language li .ic_flag.flag_ko { background:url(/images/flag-ko.png) no-repeat; }
.popup_network_language li .ic_flag.flag_us { background:url(/images/flag-us.png) no-repeat; }


/*네트워크메뉴 > 자동완성 검색*/
.popup_network_search { position:absolute; top:60px; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); display:-webkit-box; display:-ms-flexbox; display:flex; flex-direction:column; width:100%; padding:10px; border:1px solid #ededed; border-radius:10px; background:#fff; z-index:99; }
.popup_network_search li { }
.popup_network_search li a { display:-webkit-box; display:-ms-flexbox; display:flex; gap:0 20px; padding:15px 10px; border-radius:5px; align-items:center; font-size:15px; line-height:22px; }
.popup_network_search li a.hover { background:#fcfcfc; }
.popup_network_search li .ic_flag { width:34px; height:23px; }
.popup_network_search li .ic_flag.flag_ko { background:url(/images/flag-ko.png) no-repeat; }
.popup_network_search li .ic_flag.flag_us { background:url(/images/flag-us.png) no-repeat; }
.popup_network_search .non_list { display:-webkit-box; display:-ms-flexbox; display:flex; height:58px !important; border-radius:5px; background:#f8f8f8; justify-content:center; align-items:center; }
/* 인트로 종목 검색 자동완성 */
.popup_network_search_intro { position: absolute; top: calc(100% + 5px); left: 0; width: 100%; padding: 10px; border: 1px solid #ededed; border-radius: 10px; background: #fff; z-index: 999; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.popup_network_search_intro li { }
.popup_network_search_intro li a { display:-webkit-box; display:-ms-flexbox; display:flex; gap:0 20px; padding:15px 10px; border-radius:5px; align-items:center; font-size:15px; line-height:22px; }
.popup_network_search_intro li a.hover { background:#fcfcfc; }
.popup_network_search_intro li .ic_flag { width:34px; height:23px; }
.popup_network_search_intro li .ic_flag.flag_ko { background:url(/images/flag-ko.png) no-repeat; }
.popup_network_search_intro li .ic_flag.flag_us { background:url(/images/flag-us.png) no-repeat; }
.popup_network_search_intro .non_list { display:-webkit-box; display:-ms-flexbox; display:flex; height:58px !important; border-radius:5px; background:#f8f8f8; justify-content:center; align-items:center; }


/*결제*/
.popup_subscribe_pay .popup_desc { display:-webkit-box; display:-ms-flexbox; display:flex; gap:20px 0; flex-direction:column; border-bottom:1px solid #ededed; }
.popup_subscribe_pay .popup_desc .subscribe_info li { display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; gap:0 10px; padding:20px; align-items:center; justify-content:space-between; }
.popup_subscribe_pay .popup_desc .subscribe_info li .value { text-align:right; }
.popup_subscribe_pay .popup_desc .subscribe_info .box_price { display:-webkit-box; display:-ms-flexbox; display:flex; gap:5px 0; flex-direction:column; padding:20px; border-top:1px solid #ededed; border-bottom:1px solid #ededed; }
.popup_subscribe_pay .popup_desc .subscribe_info .box_price li { padding:0; }
.popup_subscribe_pay .popup_desc .subscribe_info .box_way li { border-bottom:1px solid #ededed; }
.popup_subscribe_pay .popup_btn { justify-content:flex-end !important; }


/*구독 완료,구독 해지*/
/*.popup_subscribe_info .popup_desc { display:-webkit-box; display:-ms-flexbox; display:flex; flex-direction:column; justify-content:center; align-items:center; border-bottom:1px solid #ededed; }*/
/*구독 팝업 무료 기간에만 사용 - 2025-03-08*/
.popup_subscribe_info .popup_desc { display:-webkit-box; display:-ms-flexbox; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.popup_subscribe_info .popup_desc .ic { width:160px; height:160px; border-radius:30px; }
.popup_subscribe_info .popup_desc .ic.pro {background:url('/images/img-pro.png'); }
.popup_subscribe_info .popup_desc .ic.plus {background:url('/images/img-plus.png'); }
.popup_subscribe_info .popup_desc .ic.premium {background:url('/images/img-premium.png'); }
.popup_subscribe_info .popup_desc .box_txt { display:-webkit-box; display:-ms-flexbox; display:flex; flex-direction:column; gap:10px 0; }
.popup_subscribe_info .popup_btn .cm_btn { margin-left:auto; }


/*구독 내역*/
.popup_subscribe_list .popup_wrap { width:860px; }
.popup_subscribe_list .popup_wrap .popup_desc { min-height:612px; }
.popup_subscribe_list .list_wrap .list_cont { width:100%; }
.popup_subscribe_list .list_wrap .list_cont > span { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; padding:10px 5px; }
.popup_subscribe_list .list_wrap .list_cont > span:last-child { padding:10px; }
.popup_subscribe_list .list_wrap .list_cont .cell_01 { -webkit-flex:0 0 100px; -ms-flex:0 0 100px; flex:0 0 100px; width:100px; padding:10px; }
.popup_subscribe_list .list_wrap .list_cont .cell_02 { -webkit-flex:0 0 80px; -ms-flex:0 0 80px; flex:0 0 80px; width:80px; }
.popup_subscribe_list .list_wrap .list_cont .cell_03 { -webkit-flex:0 0 180px; -ms-flex:0 0 180px; flex:0 0 180px; width:180px; }
.popup_subscribe_list .list_wrap .list_cont .cell_04 { -webkit-flex:0 0 160px; -ms-flex:0 0 160px; flex:0 0 160px; width:160px; }

.popup_subscribe_list .btn_more { position:relative; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); display:-webkit-box; display:-ms-flexbox; display:inline-flex; gap:0 10px; padding:10px 15px; margin:0 auto; align-items:center; }
.popup_subscribe_list .btn_more .ic { display:block; width:12px; height:12px;  background:url('/images/regular-chevron-down-xs.png') no-repeat center center; }


/*문의 내역*/
.popup_ask_detail .popup_wrap { width:860px; }
.popup_ask_detail .popup_wrap .popup_desc { min-height:612px; }

.popup_ask_detail .list_wrap .list_cont { width:100%; }
.popup_ask_detail .list_wrap .list_cont > span { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; padding:15px 10px; }
 
.popup_ask_detail .list_wrap .list_cont .cell_01 { -webkit-flex:0 0 100px; -ms-flex:0 0 100px; flex:0 0 100px; width:100px; }
.popup_ask_detail .list_wrap .list_cont .cell_02 { -webkit-flex:0 0 435px; -ms-flex:0 0 435px; flex:0 0 435px; width:435px; }
.popup_ask_detail .list_wrap .list_cont .cell_03 { -webkit-flex:0 0 125px; -ms-flex:0 0 125px; flex:0 0 125px; width:125px; }

.popup_ask_detail .list_wrap .list_cont.horizon03 { display:block;} 
.popup_ask_detail .list_wrap .list_cont.horizon03 .cell_01 { padding:10px; }
.popup_ask_detail .list_wrap .list_cont.horizon03 .box_tit { display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; width:100%; padding:0; align-items:center; cursor:pointer; }
.popup_ask_detail .list_wrap .list_cont.horizon03 .box_tit * { font-size:13px; line-height:20px;  }
.popup_ask_detail .list_wrap .list_cont.horizon03 .box_tit > * { padding:15px 10px; text-align:left; align-self:center }

.popup_ask_detail .list_wrap .list_cont.horizon03 .cell_03 { position:relative; padding-right:45px; }
.popup_ask_detail .list_wrap .list_cont.horizon03 .cell_03 .ic { display:block; position:absolute; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); right:15px; width:12px; height:12px; background:url('/images/regular-chevron-down-xs.png') no-repeat; }

.popup_ask_detail .list_wrap .box_desc { display:none; padding:20px; border-radius:10px; background:#f8f8f8; }
.popup_ask_detail .list_wrap .box_desc .inquiry { padding-bottom:20px; border-bottom:1px solid #ededed; }
.popup_ask_detail .list_wrap .box_desc .answer{ padding-top:20px; }

.popup_ask_detail .list_wrap .list_cont.horizon03:hover { background:#f8f8f8; }

.popup_ask_detail .list_wrap .list_cont.horizon03.on { margin-bottom:10px; }
.popup_ask_detail .list_wrap .list_cont.horizon03.on .cell_02 { font-weight:700; }
.popup_ask_detail .list_wrap .list_cont.horizon03.on .cell_02 { font-weight:700; }
.popup_ask_detail .list_wrap .list_cont.horizon03.on .cell_03 .ic {  background:url('/images/regular-chevron-up-xs.png') no-repeat; }
.popup_ask_detail .list_wrap .list_cont.horizon03.on .box_desc { display:block; }

.popup_ask_detail .btn_more { position:relative; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); display:-webkit-box; display:-ms-flexbox; display:inline-flex; gap:0 10px; padding:10px 15px; margin:0 auto; align-items:center; }
.popup_ask_detail .btn_more .ic { display:block; width:12px; height:12px;  background:url('/images/regular-chevron-down-xs.png') no-repeat center center; }


/*관련 뉴스 모달*/
.popup_news_list .popup_wrap { width:860px; }
.popup_news_list .popup_wrap .popup_desc { min-height:612px; }

.popup_news_list .list_wrap {gap:20px 0; }
.popup_news_list .list_wrap .list_cont.horizon05 { width:100%; cursor:pointer; }
.popup_news_list .list_wrap .list_cont.horizon05:hover .cm_txt{ font-weight:700; }

.popup_news_list .btn_more { position:relative; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); display:-webkit-box; display:-ms-flexbox; display:inline-flex; gap:0 10px; padding:10px 15px; margin:0 auto; align-items:center; }
.popup_news_list .btn_more .ic { display:block; width:12px; height:12px;  background:url('/images/regular-chevron-down-xs.png') no-repeat center center; }


/*친구 초대*/
.popup_recomend .popup_desc { border-bottom:1px solid #ededed; }
.popup_recomend .box_info { padding:10px 20px; border-top:1px solid #ededed; border-bottom:1px solid #ededed;  }
.popup_recomend .box_info li { position:relative; padding:10px; padding-left:20px; color:#777; font-size:15px; line-height:22px; }
.popup_recomend .box_info li:before { display:block; content:''; position:absolute; top:20px; left:0; width:3px; height:3px; border-radius:50%; background:#777; }
.popup_recomend .btn_url { display:block; width:143px; height:40px; margin:0 auto; border-radius:5px; font-size:18px; }
.popup_recomend .popup_btn .cm_btn { margin-left:auto; }


/*회원가입/로그인*/
.popup_account .popup_desc { display:-webkit-box; display:-ms-flexbox; display:flex; flex-direction:column; justify-content:center; align-items:center; border-bottom:1px solid #ededed;  }
.popup_account .popup_desc .cm_input { width:540px; }
.popup_account .popup_desc .ic { width:160px; height:160px; border-radius:30px; background:url('/images/img-box-logo.png') no-repeat; }
.popup_account .btn_login { display:block; width:100px; height:40px; margin:0 auto; border-radius:5px; font-size:18px; }
.popup_account .popup_btn .cm_btn { margin-left:auto; }


/*회원가입*/
.popup_join_agree .popup_desc { border-bottom:1px solid #ededed; }
.popup_join_agree .box_agree { padding:10px 20px; border-top:1px solid #ededed; border-bottom:1px solid #ededed; }
.popup_join_agree .box_agree li { display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; padding:10px 0; justify-content:space-between; }
.popup_join_agree .box_agree li .btn_link { width:12px; height:12px; background:url('/images/regular-chevron-right-xs.png') no-repeat; }
.popup_join_agree .popup_btn .cm_btn { margin-left:auto; }


/*회원가입 인증*/
.popup_join_confirm .popup_desc { display:-webkit-box; display:-ms-flexbox; display:flex; flex-direction:column; justify-content:center; align-items:center; border-bottom:1px solid #ededed; }
.popup_join_confirm .popup_desc .ic { width:160px; height:160px; border-radius:30px; background:url('/images/img-box-logo.png') no-repeat; }
.popup_join_confirm .popup_btn .cm_btn { margin-left:auto; }


/*회원가입 마케팅동의*/
.popup_marketing wrap { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); }
.popup_marketing table { margin:20px 0; }
.popup_marketing table td { margin:20px 0; padding:10px 15px; font-size:13px; line-height:20px; border:1px solid #ededed; border-collapse:collapse; }



/*회원가입 완료*/
.popup_join_finish .popup_desc { border-bottom:1px solid #ededed; }
.popup_join_finish .box_info { padding:10px 20px; border-top:1px solid #ededed; border-bottom:1px solid #ededed; }
.popup_join_finish .box_info li { position:relative; padding:10px; padding-left:20px; color:#777; font-size:15px; line-height:22px; }
.popup_join_finish .box_info li:before { display:block; content:''; position:absolute; top:20px; left:0; width:3px; height:3px; border-radius:50%; background:#777; }
.popup_join_finish .popup_btn { justify-content:flex-end }


/*달력*/
.popup_calendar .popup_top { display:-webkit-box; display:-ms-flexbox; display:flex; justify-content:space-between; align-items:center; padding:0 !important; }
.popup_calendar .popup_top .box_btn { display:-webkit-box; display:-ms-flexbox; display:flex; gap:0 20px; height:24px; }
.popup_calendar .popup_top .box_btn .btn_arrow { display:block; width:24px; height:24px; }
.popup_calendar .popup_top .box_btn .btn_arrow.btn_prev { background:url('/images/bold-chevron-left-l.png') no-repeat; }
.popup_calendar .popup_top .box_btn .btn_arrow.btn_next { background:url('/images/bold-chevron-right-l.png') no-repeat; }
.popup_calendar .popup_desc { padding:10px 0; border-top:1px solid #ededed; border-bottom:1px solid #ededed; }

.popup_calendar .popup_desc .box_calendar { display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; }
.popup_calendar .popup_desc .box_calendar.box_dailey { margin-top:15px; flex-wrap:wrap; gap:15px 0; }
.popup_calendar .popup_desc .box_calendar li { position:relative; width:80px; height:40px; font-size:13px;line-height:40px; text-align:center; }
.popup_calendar .popup_desc .box_calendar li span { display:block; width:40px; height:40px; margin:0 auto; border-radius:50%; z-index:2; cursor:pointer; }
.popup_calendar .popup_desc .box_calendar .op span { opacity:0.3; } 
.popup_calendar .popup_desc .box_calendar .holiday span { color:#e8373d; } 
.popup_calendar .popup_desc .box_calendar li:nth-child(7n-6) { width:70px; padding-right:10px; color:#e8373d }
.popup_calendar .popup_desc .box_calendar li:nth-child(7n) { width:70px; padding-left:10px; color:#373fe8 }
.popup_calendar .popup_desc .box_calendar .select span { background:#65a603; color:#fff; }
.popup_calendar .popup_desc .box_calendar .select_start span { background:#65a603; color:#fff; }
.popup_calendar .popup_desc .box_calendar .select_start::before { display:block; content:''; position:absolute; top:0; right:0; width:50%; height:100%; background:#f8f8f8; z-index:-1; }
.popup_calendar .popup_desc .box_calendar .select_end span { background:#65a603; color:#fff; }
.popup_calendar .popup_desc .box_calendar .select_end::before { display:block; content:''; position:absolute; top:0; left:0; width:50%; height:100%; background:#f8f8f8; z-index:-1; }
.popup_calendar .popup_desc .box_calendar .bg { background:#f8f8f8; }

.popup_calendar .popup_btn { justify-content:flex-end }

/*약관*/
.popup_provision .popup_wrap { width:860px !important; }
.popup_provision .popup_wrap .popup_desc {  display:-webkit-box; display:-ms-flexbox; display:flex; flex-direction:column; gap:20px 0; width:100%; }
.popup_provision .popup_wrap .popup_desc .box_cont { display:-webkit-box; display:-ms-flexbox; display:flex; flex-direction:column; gap:5px 0; }

.popup_provision .popup_wrap .popup_btn { justify-content:center; }
.popup_provision .popup_wrap .popup_btn .cm_btn { width:200px; }


/*무료체험 기간 안내*/
.popup_free_period .popup_desc { border-bottom:1px solid #ededed; }
.popup_free_period .box_info { padding:10px 20px; border-top:1px solid #ededed; border-bottom:1px solid #ededed;  }
.popup_free_period .box_info li { position:relative; padding:10px; padding-left:20px; color:#777; font-size:15px; line-height:22px; }
.popup_free_period .box_info li:before { display:block; content:''; position:absolute; top:20px; left:0; width:3px; height:3px; border-radius:50%; background:#777; }

.popup_free_period .box_noti { display:-webkit-box; display:-ms-flexbox; display:flex; flex-direction:column; gap:5px 0; }

.popup_free_period .btn_url { display:block; width:143px; height:40px; margin:0 auto; border-radius:5px; font-size:18px; }
.popup_free_period .popup_btn .cm_btn { margin-left:auto; }