@charset "utf-8";
/* CSS Document */

@import url('https://static.heraldcorp.com/wbazic/basic/css/fonts.css');

/* ====== common ======================================================================================================= */
.ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap}
.ellipsis2, .ellipsis3{display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-box-orient:vertical; word-wrap:break-word}
.ellipsis2{-webkit-line-clamp:2}
.ellipsis3{-webkit-line-clamp:3}
input, button, select, textarea{-webkit-appearance:none; border-radius:0}
select::-ms-expand{display:none}
select{background:transparent}
input::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color:#aaa; font-weight:300; font-size:15px; letter-spacing:-0.5px}
input:-ms-input-placeholder, select:-ms-input-placeholder, textarea:-ms-input-placeholder{color:#aaa; font-weight:300; font-size:15px; letter-spacing:-0.5px}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}


/* ====== main ======================================================================================================= */
.language{position:relative; text-align:right; padding:15px; margin:30px auto 0; display:inline-block}
.language_earth{width:16px; height:16px; fill:#7F7F7F; display:inline-block; vertical-align:middle; margin-top:1px}
.sub_top .language{font-size:0; line-height:1.5; position:absolute; top:0; right:0; margin: 0; display: block}
.language_select{position:relative; width:auto; height:20px; display:inline-block; vertical-align:middle}
.language_select select{width:100%; height:100%; padding:0 10px 0 5px; font-size:12px; font-weight:300; color:#555; line-height:20px; letter-spacing:-0.5px;}
.language_select svg{position:absolute; top:7px; right:0; width:7px; height:7px; fill:#999}
.main{text-align:center; font-size:0; line-height:1.5}
.main_logo{display:block; width:170px; height:34px; margin:10px auto 0}
.main_logo svg{width:100%; height:100%; fill:#000}
.main_logo_col{fill:#1ba2da}
.main_logo_title{font-size:21px; font-weight:500; letter-spacing:-1.5px; margin:40px 0 50px}
.main_form{width:calc(100% - 80px); margin:0 auto 30px; max-width:400px}
.main_form input{border:1px solid #ccc; display:block; height:46px; font-size:15px; font-weight:300; letter-spacing:-0.5px; width:calc(100% - 42px); margin:0 auto -1px; padding:0 20px}
.main_form input:focus{border-color:#1ba2da; border-width:2px; width:calc(100% - 42px); height:44px; padding:0 19px; position:relative}
.main_form_error{font-size:13px; color:#fa113d; text-align:left; letter-spacing:-0.5px; word-break:keep-all; font-weight:300; margin-top:15px}
.main_form_btn{display:block; width:100%; height:48px; background:#1ba2da; margin:40px auto 20px; border-radius:4px; font-size:16px; font-weight:400; color:#fff;}
.main_form_chk{text-align:left}
.main_form_chk input[type="checkbox"], .main_form_chk input[type="radio"]{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.main_form_chk input[type="checkbox"] + label, .main_form_chk input[type="radio"] + label{display:block; position:relative; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none}
.main_form_chk_icon{position:relative; width:15px; height:15px; display:inline-block; vertical-align:middle; border-radius:50%; border:1px solid #c4c4c4; margin-right:5px}
.main_form_chk_icon svg{position:absolute; top:50%; left:50%; width:10px; height:10px; margin:-5px 0 0 -5px; fill:#c4c4c4}
.main_form_chk span{font-size:13px; display:inline-block; vertical-align:middle; letter-spacing:-0.8px; color:#999; font-weight:300}
.main_form_chk input[type="checkbox"]:checked + label .main_form_chk_icon, .main_form_chk input[type="radio"]:checked + label .main_form_chk_icon{background:#1ba2da; border-color:#1ba2da}
.main_form_chk input[type="checkbox"]:checked + label .main_form_chk_icon svg, .main_form_chk input[type="radio"]:checked + label .main_form_chk_icon svg{fill:#fff}
.main_join{margin-bottom:50px}
.main_join li, .main_join li a{display:inline-block; vertical-align:middle}
.main_join li:after{display:inline-block; vertical-align:middle; content:"｜"; margin:2px 5px 0; font-size:10px; font-weight:100; color:#ccc; line-height:10px}
.main_join li:last-child:after{display:none}
.main_join li a{font-size:14px; color:#999; font-weight:300; letter-spacing:-0.5px; line-height:16px}
.main_sns_title{font-size:21px; font-weight:500; letter-spacing:-1.5px; margin-bottom:40px}
.main_sns{padding-bottom:40px; border-bottom:1px solid #e9e9e9; margin:0 auto;max-width:400px; width:calc(100% - 80px)}
.main_sns li{display:inline-block; vertical-align:top; margin:0 10px 10px}
.main_sns li a{position:relative; display:block; width:50px; height:50px; border-radius:50%}
.main_sns li a svg{position:absolute; top:50%; left:50%; width:26px; height:26px; transform:translate(-50%,-50%); transition:.2s}
.main_sns li a:hover svg{transform:translate(-50%,-50%) scale(1.1)}
.main_sns_naver{background:#19ce60; fill:#fff}
.main_sns_kakao{background:#ffe500}
.main_sns_facebook{background:#1778f2; fill:#fff}
.main_sns_google{background:#eee}
.main_sns_google_col1{fill:#3E82F1}
.main_sns_google_col2{fill:#32A753}
.main_sns_google_col3{fill:#F9BB00}
.main_sns_google_col4{fill:#E74133}
.main_sns_apple{background:#eee}
.main .family_site{max-width:500px; margin:0px auto 100px; padding:0 20px}

/* ====== footer ======================================================================================================= */
.footer{text-align:center; border-top:1px solid #eee; padding:15px 20px; font-size:0; line-height:1.5}
.footer_li{margin-bottom:10px}
.footer_li li{position:relative; display:inline-block; padding-right:10px; vertical-align:top}
.footer_li li + li{padding-left:9px}
.footer_li li:after{position:absolute; top:50%; right:0; width:1px; height:10px; margin-top:-4px; content:""; background:#ccc}
.footer_li li:last-child{padding-right:0}
.footer_li li:last-child:after{display:none}
.footer_li li a{display:block; font-size:12px; font-weight:300; letter-spacing:-0.5px; color:#999}
.footer_li li a.on{font-weight:400; color:#555}
.footer_copy{font-size:11px; font-weight:300; color:#999; letter-spacing:-0.2px; line-height:1.3}
/* footer_log_li */
.footer_log_li{text-align:center; margin-bottom:10px}
.footer_log_li li{display:inline-block; vertical-align:middle; margin:0 5px}
.footer_log_li_logout{display:block; font-size:12px; font-weight:300; line-height:20px; letter-spacing:-0.5px; color:#555; padding:0 10px}
.footer_log_li .language{padding:0}

/* ====== join ======================================================================================================= */
/* join */
.join_agree_form{margin:30px 20px 50px 45px; font-size:0}
.join_agree_all{position:relative; padding-bottom:25px; border-bottom:1px solid #ddd}
.join_agree{padding-top:20px}
.join_agree li{position:relative}
.join_agree li + li{margin-top:12px}
.join_agree_form .main_form_chk{margin-left:-25px}
.join_agree_form .main_form_chk_icon{margin:7px 8px 0 0; vertical-align:top}
.join_agree_form .main_form_chk span{font-size:15px; color:#000; line-height:22px; max-width:calc(100% - 50px); padding:4px 0}
.join_agree_txt{font-size:12px; color:#999; line-height:18px; letter-spacing:-0.5px; font-weight:300; padding:7px 20px 0 0}
.join_agree_arrow{position:absolute; top:0; right:-10px; width:30px; height:30px}
.join_agree_arrow svg{width:10px; height:10px; fill:#aaa; margin:10px 0 0 10px}
.join_agree_arrow.join_agree_arrow_sns{top:50%; transform:translate(0,-50%)}
/* join_sns */
.join_sns{margin:0 20px; word-break:keep-all; padding-top:100px}
.join_sns .sub_title_t1{padding-right:24%;}
.join_sns .sub_title_t2{padding-right:24%; padding-bottom:38px}
.join_sns_li li{margin:0 0 15px; text-align:center}
.join_sns_li li a{display:block; padding:14px 0 13px; border-radius:4px}
.join_sns_li li a svg, .join_sns_li li a span{display:inline-block; vertical-align:top; line-height:20px}
.join_sns_li li a svg{position:relative; width:20px; height:20px; margin-right:10px; transition:.2s;}
.join_sns_li li a span{font-size:14px; font-weight:300; color:#fff; letter-spacing:-0.5px}
.join_sns_li li a .join_sns_li_col_black{color:#000}
.join_sns_li li a:hover svg{width:24px; height:24px; margin-top:-2px; margin-bottom:-2px; margin-right:8px}
.content + .content .sub_title1{padding-top:0}
/* leave */
.leave_agree_form{font-size:0}
.leave_agree{position:relative; padding:0 0 25px 25px; border-bottom:1px solid #ddd}
.leave_agree_form .main_form_chk{margin-left:-25px}
.leave_agree_form .main_form_chk_icon{margin:7px 8px 0 0; vertical-align:top}
.leave_agree_form .main_form_chk span{font-size:15px; color:#000; line-height:22px; max-width:calc(100% - 50px); padding:4px 0}
.leave_agree_txt{font-size:12px; color:#999; line-height:18px; letter-spacing:-0.5px; font-weight:300; padding:7px 20px 0 0}
.leave_agree_arrow{position:absolute; top:0; right:-10px; width:30px; height:30px}
.leave_agree_arrow svg{width:10px; height:10px; fill:#aaa; margin:10px 0 0 10px}
/* provision */
.provision_li{display:table; margin:81px auto 30px; width:calc(100% - 41px)}
.provision_li li{display:table-cell; vertical-align:middle; width:33.33%; position:relative; z-index:0}
.provision_li li:after{position:absolute; content:""; top:0; left:-1px; right:0; bottom:0; border:1px solid #ddd; z-index:-1}
.provision_li li a{display:block; text-align:center; font-size:12px; line-height:18px; font-weight:300; color:#888; padding:12px 0; letter-spacing:-0.7px}
.provision_li li.on{background:#333; z-index:1}
.provision_li li.on:after{border-color:#333}
.provision_li li.on a{font-weight:400; color:#fff}
.provision{margin:0 20px; font-size:13px; line-height:1.7; font-weight:300; letter-spacing:-0.5px; color:#888}
.provision b{font-weight:400; color:#333}
.provision a{color:#333}
.provision a:hover{text-decoration:underline;}
.provision table{width:100%}
.provision table th, .provision table td{border:1px solid #ddd; padding:5px; font-size:11px; line-height:1.5; vertical-align:middle; letter-spacing:-0.5px;}
.provision table th{font-weight:400; background:#f3f3f3; color:#333}
.provision table td{font-weight:300}
.provision.info_sec_provision{ overflow-y:auto; height:100px; margin:0; padding:10px 15px; font-size:12px; border:1px solid #ddd}
.info_sec_provision_form .main_form_chk span{max-width:calc(100% - 28px); line-height:1.5}


/* ====== sub ======================================================================================================= */
.sub_top_bg{position:fixed; top:0; left:0; width:100%; background:#fff; z-index:10}
.sub_top_language_select{position:absolute; top:0; right:0; width:50px; height:50px; z-index:1; font-size:0}
.sub_top_language_earth{position:absolute; top:50%; left:50%; width:46%; height:46%; transform:translate(-50%,-50%); fill:#7F7F7F; z-index:-1}
.sub_top_language_select select{width:100%; height:100%; z-index:1; cursor:pointer; font-size:0}
.sub_top_language_select select option{font-size:12px; font-weight:300; color:#555; line-height:20px; letter-spacing:-0.5px}
.sub_top{border-bottom:1px solid #ddd; text-align:center; line-height:50px; height:50px; font-size:17px; letter-spacing:-0.7px; font-weight:400; color:#000; position:relative}
.sub_top_logo{position:absolute; top:0; left:0; width:50px; height:50px}
.sub_top_logo svg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:50%; height:50%; fill:#1ba2da}
.sub_top_my{position:absolute; top:0; right:0; width:50px; height:50px}
.sub_top_my svg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46%; height:46%; fill:#000}
.sub_top_cate{font-size:0}
.sub_top_cate_li{border-bottom:1px solid #ddd}
.sub_top_cate_li li{display:inline-block; vertical-align:top; width:33.33%}
.sub_top_cate_li li a{font-size:15px; font-weight:300; line-height:44px; color:#222; letter-spacing:-0.5px; display:block; text-align:center; position:relative}
.sub_top_cate_li li a.on{font-weight:400; color:#000}
.sub_top_cate_li li a.on:after{position:absolute; content:""; left:0; bottom:-1px; right:0; height:2px; background:#000}
/* sub_title */
.sub_title1{padding:100px 24% 38px 20px; word-break:keep-all; margin:0 auto}
.sub_title2{padding:145px 24% 38px 20px; word-break:keep-all; margin:0 auto}
@media (min-width:600px) {
.sub_title1, .sub_title2{max-width:560px; padding-right:20px}
}
.sub_title_t1{font-size:28px; line-height:40px; letter-spacing:-2px; font-weight:300; color:#000}
.sub_title_t1 b{font-weight:300; color:#23a5db}
.sub_title_t2{font-size:14px; line-height:21px; letter-spacing:-0.8px; font-weight:300; margin-top:15px; color:#999}
.join_navi1, .join_navi2{width:60px; height:4px; background:#e5e5e5; border-radius:2px; margin-bottom:10px; font-size:0}
.join_navi_bar{height:4px; border-radius:2px; background:#23a5db}
.join_navi_bar_step1{width:20px}
.join_navi_bar_step2{width:40px}
.join_navi_bar_step3{width:60px}
.join_navi2 .join_navi_bar_step1{width:30px}
.join_navi2 .join_navi_bar_step2{width:60px}
/* content */
.content{position:relative; max-width:600px; margin:0 auto 70px}


/* ====== info ======================================================================================================= */
/* info */
.info{margin:30px 20px 50px; font-size:0}
.info.info_type2{margin-bottom:20px}
.info_title{padding:0 20px 12px; font-size:18px; font-weight:400; line-height:32px; letter-spacing:-1px; border-bottom:1px solid #000;}
.info_sec{margin:20px 0}
.info_sec_title{font-size:14px; line-height:21px; letter-spacing:-0.3px; font-weight:300; color:#999; padding:0 0}
.info_intype_bg, .info_text{position:relative}
.info_intype, .info_text, .info_intype_birth2 select, .info_intype_birth4 select{font-size:17px; font-weight:300; color:#000}
.info_intype{display:inline-block; vertical-align:top}
.info_intype1{width:calc(100% - 32px); line-height:46px; padding:0 15px; border:1px solid #ddd}/* 테두리 인풋 */
.info_intype2, .info_intype2_w, .info_intype_birth1, .info_intype_birth2, .info_intype_birth3, .info_intype_birth4{line-height:56px; border-bottom:1px solid #ddd}/* 언더라인 인풋 공통 */
.info_intype2{width:calc(100% - 90px); padding-right:90px}/* 우측버튼 */
.info_intype2_w{width:100%}/* 우측버튼없음 */
.info_intype3{width:calc(100% - 42px); border:1px solid #ddd; padding:10px 20px; line-height:26px; height:100px;}/* textarea */
.info_intype_birth1{width:40%}
.info_intype_birth2, .info_intype_birth3{width:calc(30% - 20px)}
.info_intype_birth2{position:relative; z-index:0; margin:0 20px}
.info_intype_birth4{position:relative; z-index:0; width:100%}
.info_intype_birth2 select{width:100%; line-height:56px}
.info_intype_birth4 select{width:100%; line-height:56px; padding-right:30px}
.info_intype_birth2 svg, .info_intype_birth4 svg{position:absolute; top:50%; right:10px; width:10px; height:10px; margin-top:-4px; z-index:-1}
.info_intype:focus{border-bottom-color:#1ba2da}
.info_intype1:focus{background:#f3f3f3}
.info_intype3:focus{border-color:#1ba2da}
.info_text{line-height:26px; border-bottom:1px solid #ddd; padding:15px 0; overflow:hidden; word-break:break-all}
.info_text_btn1{padding-right:65px}
.info_text_btn2{padding-right:90px}
/* .info_text.info_text_btn2 .info_chk_item */
.info_text.info_text_btn2 .info_chk_item{position:absolute; top:50%; right:0; margin:-15px 0 0 0; padding:0; font-size:0}
.info_text.info_text_btn2 .info_chk_item label{width:44px; height:26px; border-radius:13px}
.info_text.info_text_btn2 .info_chk_item label:after{width:22px; height:22px}
.info_text.info_text_btn2 .info_chk_item input[type="checkbox"]:checked + label:after{left:calc(100% - 24px)}
.info_text.info_text_btn2 .info_tip{margin-top:6px; color:#888; font-size:13px; line-height:1.3; font-weight:300}
.info_text.info_text_btn2 .info_date{margin-top:5px; color:#1ba2da; font-size:12px; line-height:1.2; font-weight:400}
/* .info_sec_address */
.info_sec_address{word-break:keep-all}
.info_sec_address span{display:block}
.info_sec_company{margin-top:-20px}
.info_sec_company li{display:table; width:100%}
.info_sec_company .info_sec_title, .info_sec_company .info_text{display:table-cell; vertical-align:middle; padding:10px 0;}
.info_sec_company .info_sec_title{width:80px}
.info_sec_company .info_text{border:none}
.info_sec_cap{position:relative; margin-top:-1px; padding-top:11px; font-size:13px; color:#999; letter-spacing:-0.5px; font-weight:300; line-height:18px; word-break:keep-all}
.info_sec_cap.error{color:#fa113d; border-top:1px solid #fa113d}
.info_sec_cap b{font-weight:400; color:#333;}
.info_sec_cap.info_sec_cap_btn_bg{padding-right:90px}
.info_sec_cap .info_sec_cap_btn1{position:absolute; top:50%; right:0; margin-top:-4px; color:#666}
.info_sec_cap .info_sec_cap_btn1 span{color:#1ba2da}
.info_sec_btn1{position:absolute; display:block; top:50%; right:0; margin-top:-16px; padding:0 15px; line-height:30px; font-weight:300; border:1px solid #bbb; text-align:center; border-radius:6px; font-size:13px; transition:.2s; box-shadow:0 3px 5px rgba(0,0,0,.04)}
.info_sec_btn1:hover{border-color:#000}
.info_sec_btn2{position:absolute; display:block; top:50%; right:0; margin-top:-16px; padding:0 15px; line-height:30px; font-weight:300; border:1px solid #23a5db; text-align:center; border-radius:6px; color:#fff; font-size:13px; background:#23a5db; transition:.2s; box-shadow:0 3px 5px rgba(0,0,0,.04)}
.info_sec_btn3{position:absolute; display:block; top:50%; right:0; margin-top:-16px; padding:0 15px; line-height:30px; font-weight:300; border:1px solid #23a5db; text-align:center; border-radius:6px; color:#1893c6; font-size:13px; transition:.2s; box-shadow:0 3px 5px rgba(0,0,0,.04)}
.info_sec_btn2:hover{border-color:#1280ae; background:#1280ae;}
.info_sec_btn3:hover{color:#1280ae; border-color: #1280ae}
.info_sec_chk li{display:inline-block; vertical-align:middle; margin-right:15px}
.info_sec_chk li .main_form_chk span{color:inherit; font-size:inherit; letter-spacing:inherit}
.info .info_sec:last-child .info_text{border:none}
/* info_sec_subsc */
.info_sec_subsc li{font-size:0}
.info_sec_subsc_title, .info_sec_subsc_con, .info_sec_subsc_con_intype, .info_sec_subsc_con_number{display:inline-block; vertical-align:middle}
.info_sec_subsc_title{width:140px; font-size:17px; line-height:26px; font-weight:300; color:#000}
.info_sec_subsc_con{width:calc(100% - 140px)}
.info_sec_subsc_con_intype{width:calc(100% - 40px); font-size:17px; font-weight:300; color:#000; line-height:56px; border-bottom:1px solid #ddd; text-align:center}
.info_sec_subsc_con_intype:focus{border-bottom-color:#1ba2da}
.info_sec_subsc_con_number{width:40px; font-size:17px; line-height:26px; font-weight:300; color:#000; text-align:center}
/* info_chk */
.info_chk{margin-top:20px; font-size:0}
.info_chk_item, .info_chk_item span, .info_chk_item label{display:inline-block; vertical-align:middle}
.info_chk_item{margin-right:40px; padding:5px 0}
.info_chk_item:last-child{margin:0}
.info_chk_item span{font-size:14px; line-height:24px; margin-right:15px}
.info_chk_item input[type="checkbox"]{position:absolute; left:-1000%; font-size:0}
.info_chk_item label{position:relative; width:50px; height:30px; background:#e9e9ea; border-radius:25px; transition:.2s; cursor:pointer}
.info_chk_item label:after{content:""; position:absolute; left:2px; top:50%; width:26px; height:26px; border-radius:50%; background:#fff; transform:translateY(-50%); box-shadow:1px 1px 4px rgba(0,0,0,0.1); transition:.2s}
.info_chk_item input[type="checkbox"]:checked + label{background:#1ba2da}
.info_chk_item input[type="checkbox"]:checked + label:after{left:calc(100% - 28px)}
/* info_sec_sns_login */
.info_sec .info_sec_sns_login{display:inline-block; vertical-align:middle; position:relative; width:30px; height:30px; margin-right:10px; border-radius:4px}
.info_sec .info_sec_sns_login svg{position:absolute; top:50%; left:50%; width:20px; height:20px; transform:translate(-50%,-50%); transition:.2s}
.info_sec:hover .info_sec_sns_login svg{transform:translate(-50%,-50%) scale(1.1)}
.info_sec_sns_login_txt{display:inline-block; vertical-align:middle}
/* btn */
.btn_bg{text-align:center; font-size:0; padding:0 15px;}
.btn{display: inline-block; vertical-align:top; line-height:16px; font-size:15px; font-weight:300; letter-spacing:-0.5px; padding:14px 0 15px; border-radius:4px; margin:0 5px; transition:.2s}
.btn_1{border:1px solid #bbb; color:#000}
.btn_2{border:1px solid #23a5db; color:#fff; background:#23a5db}
.btn_1:hover{border-color:#000}
.btn_2:hover{background:#0083ba; border-color:#0083ba}
.btn_bg_1 .btn{width:calc(100% - 12px)}
.btn_bg_2 .btn{width:calc(50% - 12px)}
.info .btn_bg{padding:0; margin:0 -5px}
/* info_main_li */
.info_main_li{margin:30px 20px 50px}
.info_main_li li{border-bottom:1px solid #ddd; transition:.2s;}
.info_main_li li a{font-size:0;display:block; padding:25px 0;}
.info_main_li_icon_bg, .info_main_li_txt_bg, .info_main_li_arrow{display:inline-block; vertical-align:middle}
.info_main_li_icon_bg{position:relative; width:50px; height:50px; background:#23a5db; border-radius:50%; margin:0 20px; transition:.2s}
.info_main_li_icon{position:absolute; top:50%; left:50%; width:26px; height:26px; transform:translate(-50%,-50%); fill:#fff; transition:.2s}
.info_main_li_txt_bg{width:calc(100% - 146px)}
.info_main_li_t1{font-size:17px; line-height:24px; font-weight:400; letter-spacing:-1px; color:#000}
.info_main_li_t2{font-size:14px; line-height:22px; font-weight:300; letter-spacing:-0.5px; color:#999; margin-top:8px; word-break:keep-all}
.info_main_li_arrow{width:16px; height:16px; margin:0 20px; fill:#ddd; transition:.2s}
.info_bottom1{position:relative; margin:-25px 20px 20px}
.info_bottom2{position:relative; margin:25px 20px 20px}
.info_bottom_txt{display:inline-block; vertical-align:middle; font-size:14px; font-weight:300; letter-spacing:-0.4px; color:#999; line-height:20px; padding:10px 10px 10px 0}
.info_bottom1 .info_sec_btn1, .info_bottom2 .info_sec_btn1{position:relative; top:inherit; right:inherit; display:inline-block; vertical-align:middle; margin:0}
.info_main_li li:hover{background:#f6f6f6}
.info_main_li li:hover .info_main_li_arrow{margin-right:10px; margin-left:30px; fill:#888}
.info_main_li li:hover .info_main_li_icon_bg{background:#1280ae}
.info_main_li li:hover .info_main_li_icon{transform:translate(-50%,-50%) scale(1.1);}
/* family_site */
.family_site{margin:50px 20px 100px; text-align:center}
.family_site .main_sns_title{line-height:1.5}
.family_site_li{font-size:0; max-width:400px; margin:0 auto}
.family_site_li li{display:inline-block; vertical-align:middle; width:50%}
.family_site_li li a{display:block; padding:15px}
/*
.family_site_li li a img{max-width:89%; max-height:20px; transition:.2s}
*/
.family_site_li li a img{max-width:100%; max-height:19px; transition:.2s}
.family_site_li li:hover a img{transform:scale(1.1)}
/* info_bnn */
.info_bnn{margin:50px 20px}
.info_bnn a{position:relative; display:block; padding-bottom:18.6%}
.info_bnn a img, .info_bnn a iframe{position:absolute; display:block; top:0; left:0; width:100%; height:100%}/* 1170x218 */
/* datepicker */
.ui-datepicker{padding:0 !important}
.ui-widget-header{border:none !important; background:none !important}
.ui-datepicker .ui-datepicker-header{padding:0 !important}
.ui-datepicker .ui-datepicker-title{margin:0 !important; line-height:40px !important; font-size:15px; font-weight:500; color:#000; letter-spacing:-0.5px;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{top:0 !important; width:60px !important; height:40px !important; border-radius:0 !important;}
.ui-datepicker .ui-datepicker-prev{left:0 !important}
.ui-datepicker .ui-datepicker-next{right:0 !important}
.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus,.ui-button:hover, .ui-button:focus{border:none !important; background:#f2f2f2 !important; font-weight:400 !important; color:#000 !important}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited,a.ui-button:hover,a.ui-button:focus{color:#000 !important}
.ui-datepicker table{margin:0 !important; color:#000}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span{position:relative !important; left:inherit !important; top:inherit !important; margin:0 !important; width:100%; height:40px; line-height:40px; background:none; font-size:11px; font-weight:300; text-indent:0; text-align:center;}
.ui-datepicker.ui-widget.ui-widget-content{border-radius:4px; border:1px solid #ddd; box-shadow:1px 2px 8px rgb(0,0,0,.07); padding:5px !important;}
.ui-datepicker td{padding:0 !important}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active
{border:none !important; color:inherit !important; padding:10px 0; font-size:12px; font-weight:300 !important; line-height:20px; text-align:center; background:none !important;}
.ui-datepicker th{padding:5px 0 !important; font-weight:400 !important; font-size:12px; line-height:20px}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{background:#f2f2f2 !important}
.ui-datepicker-week-end{color:#fa113d}
.ui-datepicker-week-end:last-child{color:#23a5db}
/* subs_detail */
#mask, .subs_detail{position:fixed}
#mask{background:rgba(0,0,0,0.7); left:0; top:0; width:100%; height:100%; z-index:11}
.subs_detail{display:none; z-index:12; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:calc(90% - 40px); max-width:560px; padding:20px 20px 25px; background:#fff; color:#000; max-height:70%}
.subs_detail_title{font-size:20px; line-height:30px; letter-spacing:-0.5px; font-weight:400; text-align:center; margin-bottom:20px}
.subs_detail_close{position:absolute; width:30px; height:30px; top:-35px; right:0}
.subs_detail_close svg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:70%; height:70%; fill:#fff}
.subs_detail_tb_title{font-size:15px; line-height:22px; letter-spacing:-0.5px; font-weight:300; margin-bottom:15px; text-align:center}
.subs_detail_tb_title b{color:#23a5db; font-weight:300}
.subs_detail_tb_bg{max-height:41vh;/*55vh*/ overflow-y:scroll; min-height:74px}
.subs_detail_tb{width:100%}
.subs_detail_tb li, .subs_detail_tb li a{display:table; width:100%}
.subs_detail_tb li{position:relative}
.subs_detail_tb li a{transition:.2s}
.subs_detail_tb li a:hover{background:rgba(0,0,0,.05)}
.subs_detail_tb_th, .subs_detail_tb_td{display:table-cell; font-size:12px; line-height:22px; text-align:center; border-bottom:1px solid #ddd; vertical-align:middle;}
.subs_detail_tb_th{border-top:1px solid #ddd; background:#f9f9f9; font-weight:400; color:#000; padding:5px 0}
.subs_detail_tb_td{font-weight:300; color:#555; padding:8px 0}
.subs_detail_tb_th_1, .subs_detail_tb_td_1{width:18%}
.subs_detail_tb_th_2, .subs_detail_tb_td_2{}
.subs_detail_tb_th_3, .subs_detail_tb_td_3{width:32%}
.subs_detail_tb_th_4, .subs_detail_tb_td_4{width:32%}
.subs_detail_tb_td_5{padding:5px 15px; background:#f6f6f6; border-bottom:1px solid #ddd}
.subs_detail_tb_more{width:100%}
.subs_detail_tb_more th, .subs_detail_tb_more td{font-size:11px; line-height:17px; font-weight:300; color:#555; padding:8px; border-bottom:1px solid rgba(0,0,0,.05); vertical-align:middle;}
.subs_detail_tb_more th{font-weight:300; /*width:60px;*/ width:36%; color:#222}
.subs_detail_tb_more td{word-break:keep-all}
.subs_detail_tb_more tr:last-child th, .subs_detail_tb_more tr:last-child td{border:none}
.sub_provision{overflow-y:auto; height:300px; margin:0; padding:10px 15px; font-weight:300; color:#888; font-size:12px; line-height:1.7; letter-spacing:-.5px; border:1px solid #ddd}
.sub_provision b{font-weight:400; color:#333}
/* ombuds */
.provision_li_ombuds{margin-top:0}
.ombuds{margin:30px 0}
.ombuds_man{border:1px solid #ddd; background:#f3f3f3; margin:30px 20px; padding:17px 20px; font-size:13px; line-height:1.7; font-weight:300; color:#333; letter-spacing:-0.5px}
.ombuds_man span{font-size:30px; font-weight:100; font-style:italic; letter-spacing:-0.2px; color:#bbb; margin-right:5px; line-height:1}
.ombuds_man_person img{width:50%; display:block; margin:0 auto 10px; max-width:500px}
.ombuds_man_person_name{font-size:13px; line-height:1.5; font-weight:300; color:#888; text-align:center; }
.ombuds_sub_title{font-size:15px; font-weight:400; color:#000; line-height:1.7; letter-spacing:-0.5px; margin:0 20px 10px}
.ombuds_step_li{margin:0 20px}
.ombuds_step_li li{margin-bottom:15px}
.ombuds_step_li_tb{display:table; width:calc(100% - 2px); font-size:0; min-height:65px; border:1px solid #ddd; border-radius:6px; transition:.2s}
.ombuds_step_li_tc{display:table-cell; vertical-align:middle; text-align:center; padding:10px 0; word-break:keep-all}
.ombuds_step_li_tc1{width:80px; font-size:30px; font-weight:100; color:#ccc; line-height:30px; letter-spacing:-0.2px; font-style:italic}
.ombuds_step_li_tc2{width:calc(100% - 80px); font-size:15px; font-weight:400; color:#000; line-height:25px; letter-spacing:-0.5px; padding-right:50px}
.ombuds_step_li_tc2 svg{width:14px; height:14px; display:inline-block; vertical-align:middle; margin:-2px 0 0 10px; fill:#333}
.ombuds_step_li_tc2 span{font-size:12px; font-weight:300; color:#999; line-height:20px; display:block}
.ombuds_step_li li > a:hover{border-color:#333}
.info_sec.info_sec_ombuds{margin:0}
.info_sec.info_sec_ombuds .info_text{font-size:14px; line-height:20px; color:#999; letter-spacing:-0.4px; border:none}
.info_sec.info_sec_ombuds .info_sec_btn1{color:#000}
.ombuds_email{margin-bottom:-10px}
.ombuds_man_copy{border:1px solid #ddd; padding:20px; line-height:1.7}

/* refers */
.refers{background:#f6f6f6; text-align:center; padding:30px 20px; margin-bottom:50px}
.refers_code{font-size:30px; font-weight:700; line-height:1.5; color:#1d9bf0; padding:10px 0; word-break:break-all; margin-bottom:20px}
.refers .info_sec_btn1{position:relative; background:#fff; margin:0 auto; max-width:220px}
/* pop_share_wrap */
.pop_share_wrap{padding:30px 0; text-align:center; max-width:230px; margin:0 auto; font-size:0}
.pop_share_wrap li{position:relative; display:inline-block; vertical-align:top}
.pop_share_wrap .btn_share_item, .pop_share_list li .toast_pop svg{width:40px; height:40px; border-radius:50%}
.pop_share_wrap .btn_share_item svg{width:30px; height:30px; fill:#fff; transition:.2s}
.pop_share_list li .btn_share_item, .pop_share_list li .toast_pop{background:#666}
.pop_share_list li .btn_share_item{position:relative; display:block; margin:8px 10px}
.pop_share_list li .btn_share_item.btn_kakao{background:#fae102}
.pop_share_list li .btn_share_item.btn_kakao svg{fill:#323232}
.pop_share_list li .btn_share_item.btn_facebook{background:#0866ff}
.pop_share_list li .btn_share_item.btn_twitter{background:#171717}
.pop_share_list li .btn_share_item.btn_linked{background:#0073b1}
.pop_share_list li .btn_share_item.btn_reddit {background:#ff4500}
.pop_share_list li .btn_share_item:hover svg{transform:scale(1.2)}
.pop_share_list li .toast_pop{display:none; position:absolute; top:8px; left:50%; transform:translate(-50%, 0); border-radius:50%}
.pop_share_list li .toast_pop .toast_text{position:absolute; top:44px; left:50%; width:80px; margin-left:-40px; color:#fff; font-size:12px; line-height:22px; background:rgba(0,0,0,.5)}
.pop_share_list li .toast_pop .link_copied{animation:0.34s cubic-bezier(0.65, 0, 1, 1) 0.1s forwards copied; stroke-dasharray:0, 75px; stroke-linecap:round; stroke-linejoin:round; stroke:#FFF}
@keyframes copied{
    from{stroke-dasharray:0, 75px}
    to{stroke-dasharray:75px, 75px}
}