/*
    [제목] 핀업 팝업 CSS
    [생성일] 2020-10-14
    [내용] 핀업 내에 사용되고 있는 모든 팝업의 스타일.
           * 예외, 메인 플로우팅 팝업, 리스트나 상세에 속한 툴팁팝업 등은 해당 파일에 작성한다.
    [비고] CSS 작성시 핀업 디자인팀 내부에 규정하고 있는 CSS 작성 규칙를 준수하여 작성할 것.
*/

/*상세 검색*/
.popup_fillter_list.pay .popup_desc { height:auto; max-height:calc(100vh - 320px) }
.popup_fillter_list.funding .popup_desc { height:auto; max-height:calc(100vh - 320px) }

.popup_fillter_list .box_desc { overflow:hidden; }
.popup_fillter_list .box_desc .cm_btn_line { float:left; width:calc(33.33% - 7px); height:35px; margin-right:10px; line-height:35px;  }
.popup_fillter_list .box_desc .cm_btn_line:last-of-type { margin-right:0; }
.popup_fillter_list .box_desc .cm_btn_line:focus { border:1px solid #222; }
.popup_fillter_list .box_desc .cm_btn_line.gray.active { border:1px solid #222; }
.popup_fillter_list .box_desc .cm_form.select { width:100%; }
.popup_fillter_list .box_desc .cm_form.text01 { width:100%; }


/*로그아웃*/
.popup_logout .popup_desc .tit { text-align:center; }
.popup_logout .popup_desc .txt { text-align:center; }


/*가입혜택*/
.popup_joinbenefit .popup_wrap { top:30px; }
.popup_joinbenefit .popup_desc { position:relative; height:auto; max-height:calc(100vh - 230px); }
.popup_joinbenefit .popup_desc .btn_move { display:inline-block; height:30px; padding:0 15px; margin-top:10px; margin-bottom:5px; border-radius:15px; border:1px solid #ddd; color:#222; font-size:80%; line-height:32px; text-align:center; overflow:hidden; }
.popup_joinbenefit .popup_desc .btn_move .im { margin:0 0 0 3px; font-size:90%; vertical-align:middle; }
.popup_joinbenefit .popup_desc .list_wrap { overflow:hidden; }
.popup_joinbenefit .popup_desc .list_wrap .coupon_list { padding:10px 15px; margin-top:10px;  background-color:#f8f8f8; }
.popup_joinbenefit .popup_desc .list_wrap .coupon_list:first-of-type { margin-top:0; }
.popup_joinbenefit .popup_desc .list_wrap .coupon_list .box_tit { display:block; padding:0 0 5px 0; margin-bottom:8px; border-bottom:1px dashed #ddd; font: normal 95%/22px 'BMJUA'; }
.popup_joinbenefit .popup_desc .list_wrap .coupon_list .box_desc { font-size:75%; line-height:18px; }
.popup_joinbenefit .popup_desc .list_wrap .coupon_list .box_desc .cm_color_bk { font-weight:600; }

.popup_joinbenefit .popup_desc .list_wrap.small .coupon_list { float:left; width:calc(50% - 5px); padding:10px 15px; margin-right:10px; margin-top:10px; border:1px dashed #ddd;  background-color:#f8f8f8; }
.popup_joinbenefit .popup_desc .list_wrap.small .coupon_list:nth-child(1) { margin-top:0; }
.popup_joinbenefit .popup_desc .list_wrap.small .coupon_list:nth-child(2) { margin-top:0; }
.popup_joinbenefit .popup_desc .list_wrap.small .coupon_list:nth-child(2n) { margin-right:0; }
.popup_joinbenefit .popup_desc .list_wrap.small .coupon_list .box_tit { padding:0; margin-bottom:0; border-bottom:0; word-break:keep-all; font: normal 80%/20px 'BMJUA'; }
.popup_joinbenefit .popup_desc .list_wrap.small .coupon_list .box_tit .cm_color_or { font: normal 125%/22px 'BMJUA'; }

.popup_joinbenefit .box_noti { padding-top:20px; margin-top:20px; border-top:1px solid #ddd; color:#999; font-size:70%; line-height:16px; }


/*계정 연동 안내*/
.popup_account_interlock span { display:block; }
.popup_account_interlock .user { font-size:115%; line-height:26px; vertical-align:middle; }


/*마케팅 수신동의*/
.popup_marketing_agree .btn_marketing { position:relative; padding:15px; padding-right:40px; margin-top:10px; border:1px solid #ddd; background-color:#f4f5fa; font-size:95%; line-height:22px; overflow:hidden; }
.popup_marketing_agree .btn_marketing small { display:block; font-size:85%; }
.popup_marketing_agree .btn_marketing .im { position:absolute; right:15px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); color:#999; font-size:100%; }


/*챌린저 정보*/
.popup_challenger_info .popup_desc { height:auto; max-height:calc(100vh - 230px); }
.popup_challenger_info .cm_table_wrap th { padding:10px; border-right:1px solid #ddd; border-bottom:1px solid #ddd; background:#f4f5fa; font-weight:500; font-size:80%; line-height:20px; vertical-align:top;  }
.popup_challenger_info .cm_table_wrap th + td { font-size:80%; line-height:20px; text-align:left; }


/*My멘토 변경 안내 팝업*/
.popup_mymentor_info .box_info { padding:10px 15px; margin-top:10px; border:1px solid #ddd; background:#f4f5fa; }
.popup_mymentor_info .box_info span { display:block; margin-top:5px; }
.popup_mymentor_info .box_noti { padding:0 15px; }


/*My멘토 선택 팝업*/
.popup_mymentor_choice .popup_desc { position:relative; height:auto; max-height:calc(100vh - 230px); }
.popup_mymentor_choice .box_txt { margin-bottom:10px; font-size:95%; line-height:22px; }
.popup_mymentor_choice .box_mymentor .list_wrap { min-height:47px; padding:10px 15px; border-radius:10px; background-color:#f8f8f8; text-align:left; }
.popup_mymentor_choice .box_mymentor .list_wrap .mymentor { display:inline-block; position:relative; padding-right:18px; }
.popup_mymentor_choice .box_mymentor .list_wrap .mymentor:before { display:block; content:''; position:absolute; top:50%; right:7px; transform:translateY(-50%); -webkit-transform:translateY(-50%); width:1px; height:10px; background-color:#ddd; }
.popup_mymentor_choice .box_mymentor .list_wrap .mymentor:nth-child(3){ padding:0; }
.popup_mymentor_choice .box_mymentor .list_wrap .mymentor:nth-child(3):before { display:none; }
.popup_mymentor_choice .box_mymentor .list_wrap .non_mymentor { font-size:105%; font-family:'BMJUA'; line-height:22px; }
.popup_mymentor_choice .box_mymentor + .btn_choice { display:block; width:100%; height:40px; margin-top:10px; border-radius:0; font-weight:600;font-size:95%; line-height:40px; text-align:center; }

.popup_mymentor_choice .list_cont.vertical04 .cm_mentor_name { display:block; }
.popup_mymentor_choice .list_cont.vertical04 .cm_info_desc { float:left; width:calc(100% - 120px); margin-top:20px; } 
.popup_mymentor_choice .list_cont.vertical04 .cm_info_desc .info_desc_txt { float:left; display:block; height:auto; margin-bottom:4px; } 
.popup_mymentor_choice .list_cont.vertical04 .tit { display:inline-block; width:70%; height:auto; margin:0 !important; line-height:22px; } 
.popup_mymentor_choice .list_cont.vertical04 .txt { display:inline-block; width:30%; height:auto; margin:0 !important; font-size:105%; line-height:22px; text-align:right; } 


/*서비스 해지 방어*/
.popup_cancel_defense .box_desc { padding:10px; border:1px solid #ddd; background:#f4f5fa; }
.popup_cancel_defense .box_desc strong { font-family:'BMJUA'; font-size:125%; height:26px; }


/*서비스 해지 설문 팝업*/
.popup_cancel_survey .popup_desc { position:relative; height:auto; max-height:calc(100vh - 330px); }
.popup_cancel_survey .box_input { padding:10px; border:1px solid #ddd; }
.popup_cancel_survey .box_input input { margin-bottom:5px; vertical-align:middle; margin-right:6px; }
.popup_cancel_survey .box_input label { font-size:90%; line-height:22px; vertical-align:middle; }
.popup_cancel_survey .box_input .cm_form.textarea { height:80px; margin-top:10px; width:100%; padding:8px; border:1px solid #ddd; color:#999; font-size:95%; line-height:22px; box-sizing:border-box; }


/*만족도 평가*/
.popup_satisfaction .popup_desc { position:relative; height:auto; max-height:calc(100vh - 300px); }
.popup_satisfaction .box_txt { margin-top:25px; font-size:95%; line-height:22px; text-align:center; }
.popup_satisfaction .box_txt b { font-size:115%; line-height:26px; }
.popup_satisfaction .box_txt strong { display:inline-block; margin-top:10px; font-size:115%; line-height:26px; }
.popup_satisfaction .list_wrap { overflow:hidden; border:1px solid #ddd; overflow:hidden; }
.popup_satisfaction .list_wrap .list_cont { float:left; position:relative; width:33.33%; height:110px; padding:10px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; color:#777; }
.popup_satisfaction .list_wrap .list_cont:nth-child(3n) { border-right:0; border-bottom:1px solid #ddd }
.popup_satisfaction .list_wrap .list_cont:nth-child(4) { border-bottom:0;}
.popup_satisfaction .list_wrap .list_cont:nth-child(5) { border-bottom:0;}
.popup_satisfaction .list_wrap .list_cont .score { display:block; margin-top:40px; font-size:95%; font-family:'BMJUA'; line-height:20px; }
.popup_satisfaction .list_wrap .list_cont .txt { display:block; margin-top:5px; font-size:80%; line-height:20px; }
.popup_satisfaction .list_wrap .list_cont .im { position:absolute; top:10px; right:10px; color:#999; font-size:15px;}
.popup_satisfaction .list_wrap .list_cont.on { color:#222; }
.popup_satisfaction .list_wrap .list_cont.on .im { color:#222; }

.popup_satisfaction .box_add { display:block; position:relative; padding:10px; padding-right:45px; border:1px solid #ddd; background:#f4f5fa; }
.popup_satisfaction .box_add .im { position:absolute; right:10px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); font-size:80%; }


/*AS 종목*/
.popup_as_stock .popup_desc { position:relative; height:auto; max-height:calc(100vh - 200px); }
.popup_as_stock .box_info { width:100%; height:auto; padding:4px 15px; margin-top:25px; margin-bottom:20px; border-radius:10px; background:#f8f8f8; line-height:30px; box-sizing:border-box; overflow:hidden; }
.popup_as_stock .box_info .stock { float:left; font-size:95%; line-height:22px; }
.popup_as_stock .box_info .data { float:right; font:normal 105%/22px 'BMJUA' }
.popup_as_stock .list_wrap .list_cont{ border:1px solid #ddd; border-top:0; border-bottom:0; }
.popup_as_stock .list_wrap .list_cont:first-child { border-top:1px solid #ddd; }
.popup_as_stock .list_wrap .list_cont .box_tit { position:relative; padding:15px; border-bottom:1px solid #ddd; color:#777; font-size:95%; line-height:22px; }
.popup_as_stock .list_wrap .list_cont .box_tit .im { margin-right:3px; font-size:80%; vertical-align:middle; }
.popup_as_stock .list_wrap .list_cont .box_tit .box_btn { position:absolute; right:15px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); }
.popup_as_stock .list_wrap .list_cont .box_tit .box_btn .im { font-size:95%; }
.popup_as_stock .list_wrap .list_cont .box_desc { display:none; padding:10px 15px; border-bottom:1px solid #ddd; background:#f4f5fa; font-size:95%; line-height:22px; }


/*구독 팝업*/
.popup_subscribe .popup_desc { position:relative; height:auto; max-height:calc(100vh - 330px); }
.popup_subscribe .cm_subtit b { font-size:115%; line-height:26px; vertical-align:middle; }
.popup_subscribe .box_noti { padding:10px; margin-top:20px; background-color:#f2f4f7; }
.popup_subscribe .box_noti .cm_txt { margin-bottom:5px; }
.popup_subscribe .box_noti .cm_smtxt.cm_color_red { margin-top:10px; }

.popup_subscribe .popup_desc .price_list > li { margin-bottom:8px; list-style:none; overflow:hidden; }
.popup_subscribe .popup_desc .price_list > li:last-child { margin-bottom:0; }
.popup_subscribe .popup_desc .price_list li > span { display:block; float:left; font-size:95%; line-height:22px; text-align:left; vertical-align:middle; }
.popup_subscribe .popup_desc .price_list li .txt { width:112px; color:#777; font-size:95%; font-weight:500; }
.popup_subscribe .popup_desc .price_list li .value { width:calc(100% - 112px); color:#222; font-weight:500; vertical-align:middle; }

.popup_subscribe .popup_desc .price_list li.pay_info .value { font-size:105%; font-family:'BMJUA'; }

.popup_subscribe .popup_desc .price_list li .box_detail { float:left; width:100%; padding:15px; margin-top:5px; border:1px solid #ddd; overflow:hidden; clear:both; }
.popup_subscribe .popup_desc .price_list li .box_detail.bg { padding:10px; background:#f2f4f7; }
.popup_subscribe .popup_desc .price_list li .box_detail .txt { width:101px; font-size:70%; line-height:16px; }
.popup_subscribe .popup_desc .price_list li .box_detail .value { width:calc(100% - 101px); font-size:80%; line-height:16px; }

.popup_subscribe .popup_desc .price_list li .box_detail input[type=radio] { display:none; }
.popup_subscribe .popup_desc .price_list li .box_detail input[type=radio] + label { display:block; position:relative;  padding-left:28px; font-size:95%; line-height:18px; vertical-align:middle; box-sizing:border-box; }
.popup_subscribe .popup_desc .price_list li .box_detail input[type=radio] + label.wide { max-width:100%; }
.popup_subscribe .popup_desc .price_list li .box_detail input[type=radio] + label:before { display:block; content:''; position:absolute; top:0; left:0; width:18px; height:18px; background:url('/images/common/ic_radio.png') no-repeat 0 0; background-size:100% auto; }
.popup_subscribe .popup_desc .price_list li .box_detail input[type=radio]:checked + label:before { background-position:0 -18px; }

.popup_subscribe .popup_desc .price_list li .box_detail + .cm_xsmtxt { float:left; }

.popup_subscribe .popup_desc .price_list li.pay_total .txt { color:#222; font-size:115%; line-height:22px; }
.popup_subscribe .popup_desc .price_list li.pay_total .value { font-size:100%; }
.popup_subscribe .popup_desc .price_list li.pay_total .value .cm_color_red{ display:inline-block; font-size:120%; line-height:22px; vertical-align:middle; font-family:'BMJUA'; vertical-align:middle; }
.popup_subscribe .popup_desc .price_list li.pay_total .value .cm_color_bl{ display:inline-block; font-size:120%; line-height:22px; vertical-align:middle; font-family:'BMJUA'; vertical-align:middle; }
.popup_subscribe .popup_desc .price_list li.pay_total .value .cm_color_lg{ display:inline-block; font-size:80%; line-height:22px; font-family:'Noto Sans KR'; vertical-align:middle; }

/*동의하기 체크*/
.popup_subscribe .popup_desc .box_agree { padding:15px; border:1px solid #ddd; }
.popup_subscribe .popup_desc .box_agree li { margin-bottom:10px; }
.popup_subscribe .popup_desc .box_agree li { margin-bottom:10px; }
.popup_subscribe .popup_desc .box_agree li:last-child { margin-bottom:0; }

.popup_subscribe .popup_desc input[type=checkbox] { display:none; }
.popup_subscribe .popup_desc input[type=checkbox] + label { display:inline-block; position:relative; padding-left:28px; font-size:95%; line-height:18px; vertical-align:middle; box-sizing:border-box; }
.popup_subscribe .popup_desc input[type=checkbox] + label.wide { max-width:100%; }
.popup_subscribe .popup_desc input[type=checkbox] + label:before { display:block; content:''; position:absolute; top:0; left:0; width:18px; height:18px; background:url('/images/common/ic_checkbox.jpg') no-repeat 0 0; background-size:100% auto; }
.popup_subscribe .popup_desc input[type=checkbox]:checked + label:before { background-position:0 -18px; }

/*쿠폰선택*/
.popup_subscribe .popup_desc .box_coupon .cm_tab { overflow:hidden; }
.popup_subscribe .popup_desc .box_coupon .cm_tab:before { display:none;}
.popup_subscribe .popup_desc .box_coupon .cm_tab li { float:left; width:50%; padding:10px 0; background:#f4f5fa; font-size:80%; line-height:20px; text-align:center; overflow:hidden }
.popup_subscribe .popup_desc .box_coupon .cm_tab li.on { background:#222; color:#fff; }
.popup_subscribe .popup_desc .box_coupon .cm_tab li strong { display:inline-block; margin-left:3px; font-family:'BMJUA'; font-size:110%; line-height:20px; vertical-align:middle; }

.popup_subscribe .popup_desc .box_coupon .coupon_list { padding:10px; border:1px solid #ddd; box-sizing:border-box; overflow:hidden; }
.popup_subscribe .popup_desc .box_coupon .coupon_list .tit { margin:0 0 10px 0; font-size:80%; line-height:20px; }
.popup_subscribe .popup_desc .box_coupon .coupon_list .box_quantity { overflow:hidden; }
.popup_subscribe .popup_desc .box_coupon .coupon_list .box_quantity .txt_quantity { display:inline-block; color:#ff7500; font-family:'BMJUA'; font-size:95%; line-height:30px; vertical-align:middle; }
.popup_subscribe .popup_desc .box_coupon .coupon_list .box_quantity .box_count { float:right; overflow:hidden; }
.popup_subscribe .popup_desc .box_coupon .coupon_list .box_quantity .box_count input { display:block; float:left; width:30px; height:30px; border:1px solid #ddd; background:#fff; font-size:95%; line-height:30px; text-align:center; }
.popup_subscribe .popup_desc .box_coupon .coupon_list .box_quantity .box_count input[type=text] { min-width:60px; border-right:0; border-left:0;  }
.popup_subscribe .box_coupon + .price_list { margin-top:17px; }


/*청약 철회 및 계약 해지 안내*/
.popup_contract_cancel p.cm_smtxt { color:#777; }


/*레이더 무료이용 혜택*/
.popup_themerada .popup_desc { position:relative; height:auto; max-height:calc(100vh - 330px); }
.popup_themerada .box_benefit{ padding:10px; border:1px solid #ddd; background-color:#f4f5fa;}
.popup_themerada .cm_form_wrap { width:100%; }
.popup_themerada .cm_form_wrap .cm_form.text02 { float:left; width:calc(100% - 68px); }
.popup_themerada .cm_form_wrap .cm_btn_bg { float:left; margin-left:10px; width:58px; height:35px; font-size:95%; line-height:35px;}
.popup_themerada .box_noti { padding:10px; margin-top:20px; background-color:#f2f4f7; }


/*포인트 충전 팝업*/
.popup_point_charge .popup_desc { position:relative; height:auto; max-height:calc(100vh - 330px); }
.popup_point_charge .popup_desc .contents01 { padding:0; text-align:center; }
.popup_point_charge .popup_desc .logo img { display:block; width:auto; height:34px; margin:0 auto; }
.popup_point_charge .popup_desc .cm_txt { margin-top:10px; }
.popup_point_charge .popup_desc .cm_txt + .cm_xsmtxt { margin-bottom:21px; word-break:keep-all; }
.popup_point_charge .popup_desc .value .cm_color_red { margin-right:8px; }
.popup_point_charge .popup_desc .value small { display:inline-block; margin-left:0 !important; }

/*펀딩 배송지 변경 팝업*/
.popup_delivery .popup_desc { height:auto; max-height:calc(100vh - 320px) }


/*펀딩 주소 검색*/
.popup_address_search { height:auto; max-height:calc(100vh - 320px) }


/*핀업 펀딩 결제 수단 변경 팝업*/
.popup_funding_payment .popup_desc { height:auto; max-height:calc(100vh - 320px); }
.popup_funding_payment .popup_desc table { width:100%; padding:15px; margin-top:25px; text-align:left;}
.popup_funding_payment .popup_desc table tr > * { padding:6px 10px; font-weight:500; color:#777; font-size:90%; line-height:16px; vertical-align:middle; }
.popup_funding_payment .popup_desc table tr td { text-align:right; color:#222; font-family:'BMJUA' }
.popup_funding_payment .popup_desc table tbody tr:last-of-type > * { padding-bottom:10px; }
.popup_funding_payment .popup_desc table tfoot tr > * { padding-top:10px; color:#222; font-size:100%; }
.popup_funding_payment .popup_desc table tfoot tr > td { font-size:115%; }


/* 핀업크루 소개 */
.popup_character .popup_wrap { top:30px; height:70%; max-height:452px; padding:20px 15px 25px 15px; box-sizing:border-box; box-shadow:3px 0px 10px rgba(000,000,000,0.5); }
.popup_character .popup_wrap .popup_top { border-bottom:0; }
.popup_character .popup_wrap .cm_tab { position:relative; width:100%; height:40px; margin:0 auto; background:#fff; border-bottom:1px solid #ddd; overflow:hidden; z-index:10;}
.popup_character .popup_wrap .cm_tab:before{ display:block; content:''; position:absolute; top:2px; right:0; width:2px; height:36px; z-index:2; }
.popup_character .popup_wrap .cm_tab .cm_tab_menu { float:left; position:relative; height:40px; border-top:1px solid #ddd; border-right:0; background:#fff !important; color:#999; font:500 90%/38px 'Noto Sans KR'; box-sizing:border-box; text-align:center; cursor:pointer; }
.popup_character .popup_wrap .cm_tab .cm_tab_menu.on { border-top:2px solid #ff7500; color:#222; font-weight:600; line-height:37px; box-sizing:border-box; }
.popup_character .popup_wrap .cm_tab .cm_tab_menu:before { display:block; content:''; position:absolute; top:50%; right:0; transform:translateY(-50%); -webkit-transform:translateY(-50%); width:1px; height:17px; background:#ddd; }
.popup_character .popup_wrap .cm_tab .cm_tab_menu:last-child:before { display:none; }
.popup_character .popup_wrap .cm_tab .cm_tab_menu a { display:block; width:100%; height:100%; }

.popup_character .popup_wrap .box_detail { display:block; height:calc(100% - 95px); margin-top:15px; padding:0; overflow:hidden; overflow-y:scroll; }
.popup_character .popup_wrap .box_detail > li { display:none; text-align:left; }
.popup_character .popup_wrap .box_detail > li.on { display:block; }
.popup_character .popup_wrap .box_detail > li .character_name { display:block; width:50%; height:auto; }
.popup_character .popup_wrap .box_detail > li .character_name img { display:block; width:100%; height:auto; }
.popup_character .popup_wrap .box_detail > li .tit { display:block; height:auto; font-size:90%; line-height:23px; margin:15px 0 10px 0; }
.popup_character .popup_wrap .box_detail > li .txt { display:block;  font-size:90%; line-height:23px; text-align:left; word-break:break-all; word-wrap:break-word; }

.popup_character .popup_wrap .box_detail > li:nth-child(2) { height:100%; }
.popup_character .popup_wrap .box_detail > li:nth-child(2) .box_character { height:auto; overflow:hidden; }
.popup_character .popup_wrap .box_character li { float:left; width:33.33%; height:auto; box-sizing:border-box; overflow:hidden; }
.popup_character .popup_wrap .box_character li img { width:100%; height:auto; }

/*핀업 광고팝업(다시보지않기)*/
.popup_event { z-index:9999; position:absolute; top:15%; box-shadow:0 0 10px rgba(0,0,0,0.5); overflow:hidden; }
.popup_event .popup_close { position:relative; padding:0 10px; margin-top:-6px; background:#333; line-height:45px; vertical-align:middle; font-size:15px; color:#fff; }
.popup_event .popup_close input[type=checkbox] { width:20px; height:20px; background:#666; border:1px solid #fff; vertical-align:middle; }
.popup_event .popup_close label { margin:0 0 3px 5px; vertical-align:middle; }
.popup_event .popup_close button { position:absolute; right:0; height:46px; padding:0 20px; background:#222; border:1px solid #222; font-size:15px; color:#fff; }