@charset "UTF-8";

@font-face {
  font-family:'spo';
  font-style: normal;
  font-weight: 400;
  src:url('~@/assets/font/SpoqaHanSansRegular.woff2') format('woff2'),
  url('~@/assets/font/SpoqaHanSansRegular.woff') format('woff'),
  url('~@/assets/font/SpoqaHanSansRegular.ttf') format('truetype');
}
@font-face {
  font-family:'spo';
  font-style: normal;
  font-weight: 700;
  src:url('~@/assets/font/SpoqaHanSansBold.woff2') format('woff2'),
  url('~@/assets/font/SpoqaHanSansBold.woff') format('woff'),
  url('~@/assets/font/SpoqaHanSansBold.ttf') format('truetype');
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,textarea,p,th,td,input,select,textarea,button{margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;font-family:spo,-apple-system,"Apple SD Gothic Neo",system,sans-serif}
body{background-color:#fff;font-size:14px;color:#333;-webkit-text-size-adjust:none;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none}
fieldset,img{border:0 none;vertical-align:top}
img{border:0;outline:0;vertical-align:top}
dl,ul,ol,menu,li{list-style:none}
button{overflow:visible;border:0 none;background-color:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
input, button, select{-webkit-appearance:none;border-radius:0;border:0;font-family:spo,-apple-system,"Apple SD Gothic Neo",system,sans-serif;outline-style:none}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
input[disabled]{opacity:1}
input[type='checkbox'],input[type='radio']{width:0;height:0;-webkit-appearance:none;visibility:hidden}
input[type='text']::-ms-clear{display:none}
input[type='text'],input[type='password']{display:block;position:relative;z-index:1;width:100%;border:none;box-sizing:border-box;background-color:transparent;-webkit-appearance:none}
label{cursor:text}
select{background:#fff}
button::-moz-focus-inner{padding:0;border:0}
address,caption,em{font-style:normal}
a,a:focus,a:active,a:hover{text-decoration:none;outline:0}
table{border-collapse:collapse;border-spacing:0}
hr{display:none}
input{-webkit-user-modify:read-write-plaintext-only}
button[disabled],input[type="text"][disabled]{opacity:0.4}
textarea{resize:none;-moz-appearance:none;-webkit-appearance:none;font-family:spo,-apple-system,"Apple SD Gothic Neo",system,arial,sans-serif}
p{word-wrap:break-word;word-break:keep-all}
.blind,legend{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;clip:rect(0 0 0 0)}
caption{overflow:hidden;width:1px;height:1px;margin:-1px;font-size:1px;line-height:200px;color:transparent}

.off_scroll{overflow:hidden}

/* 스프라이트 */
.sp{display:inline-block;background:url('~@/assets/img/premium/sp2.png') no-repeat;background-size:56px auto;vertical-align:top}
.sp.ico_mark2{width:14px;height:14px;background-position:-26px 0}
.sp.ico_mark{width:14px;height:14px;background-position:-42px 0}
.sp.ico_mark2_s{width:9px;height:9px;background-position:-26px -16px}
.sp.ico_mark_s{width:9px;height:9px;background-position:-37px -16px}
.sp.ico_calendar{width:19px;height:19px;background-position:-26px -27px}
.sp.ico_arr{width:7px;height:11px;background-position:-48px -16px}
.sp.ico_question{width:24px;height:24px;background-position:0 0}
.sp.ico_close{width:24px;height:24px;background-position:0 -26px}
.sp.ico_gift{width:17px;height:19px;background-position:0 -52px}
.sp.ico_check{width:21px;height:21px;background-position:0 -73px}
input:checked + .lb_chk .ico_check{background-position:-23px -73px}

/* 공통 */
.pd_img img{width:100%}

/* 기록 공유 */
.wrap_calendar_share{
  --wrap-side-padding:22px;
  --main-color:#f93f5a;
}

.wrap_calendar_share .section{padding:0 var(--wrap-side-padding)}
.wrap_calendar_share .footer{padding:35px var(--wrap-side-padding) 40px;background-color:#f8f8f8;font-size:12px;line-height:20px;color:rgba(0,0,0,0.3)}
.wrap_calendar_share .footer .btn_footer{display:block;font-size:14px;color:rgba(0,0,0,0.8);text-decoration:underline}
.wrap_calendar_share .footer .link_lst{margin:25px 0 15px -9px;font-size:0}
.wrap_calendar_share .footer .link_lst .ea_link{display:inline-block}
.wrap_calendar_share .footer .ico_bar{display:inline-block;width:1px;height:9px;background-color:#b2b2b2;vertical-align:middle}
.wrap_calendar_share .footer .btn_link{display:inline-block;padding:0 9px;font-size:12px;line-height:20px;color:rgba(0,0,0,0.3);vertical-align:middle}
.wrap_calendar_share .footer .address{margin-bottom:20px}
.wrap_calendar_share .footer .copyright{padding-top:5px}

/* 달력 */
.section.calendar{position:relative;padding:36px var(--wrap-side-padding) 65px;background-color:#fcfaff}
.section.calendar:after{position:absolute;bottom:0;left:0;width:100%;height:50px;background:linear-gradient(to top, #fff 0%, #fcfaff 50%);content:''}
.section.calendar .head_calendar{position:relative;padding:0 34px}
.section.calendar .head_calendar .btn_help{position:absolute;right:-10px;top:-10px;padding:10px}
.section.calendar .tit_calendar{font-size:20px;font-weight:700;line-height:25px;color:#493c5d;text-align:center}
.spot_calendar{margin:21px 0 17px;padding:15px 15px 16px;border-radius:10px;background-color:#fff;line-height:20px;color:#222;box-shadow:0 0 20px 0 rgba(33,26,144,0.1)}
.spot_calendar .ico_calendar{margin:0 7px 0 0}
.section.calendar .desc{font-size:12px;line-height:15px;color:#888}
.section.calendar .desc + .desc{padding-top:19px}
.section.calendar .desc .txt{padding-right:18px}
.section.calendar .desc .sp{margin-right:3px}
.section.calendar .desc .btn_txt{margin-top:5px;font-size:12px;color:#6285f2;text-decoration:underline}
.tbl_calendar{overflow:hidden;margin-bottom:17px;border-radius:10px;background-color:#fff;box-shadow:0 0 20px 0 rgba(33,26,144,0.1)}
.tbl_calendar .tbl_head{padding:18px 0 11px}
.tbl_calendar .tbl_head .month{font-size:17px;font-weight:700;color:#493c5d;text-align:center}
.tbl_calendar table{width:100%;border-collapse:collapse;table-layout:fixed}
.tbl_calendar th{padding:4px 0;border-bottom:1px solid #eee;font-size:9px;font-weight:700;color:#ccc}
.tbl_calendar th:first-child{color:#fa8f9f}
.tbl_calendar td{position:relative;height:48px;padding:12px 3px 0;border:1px solid #f7f2f3;font-size:12px;line-height:12px;color:#999;vertical-align:middle;box-sizing:border-box}
.tbl_calendar td:first-child{border-left:0}
.tbl_calendar td:last-child{border-right:0}
.tbl_calendar td.today{z-index:1}
.tbl_calendar td.today:after{position:absolute;top:-1px;right:-1px;left:-1px;height:100%;border:1px solid var(--main-color);content:''}
.tbl_calendar td.today .date{font-weight:700;color:#000}
.tbl_calendar td:first-child.today:after{left:0}
.tbl_calendar td:last-child.today:after{right:0}
.tbl_calendar tr:last-child td{border-bottom-color:transparent}
.tbl_calendar tr:last-child td.today:first-child:after{border-radius:0 0 0 10px}
.tbl_calendar tr:last-child td.today:last-child:after{border-radius:0 0 10px 0}
.tbl_calendar td:first-child .date{color:var(--main-color)}
.tbl_calendar td .date{position:absolute;top:2px;left:3px}
.tbl_calendar td .ico_mark_s,.tbl_calendar td .ico_mark2_s{position:absolute;top:3px;right:3px}
.tbl_calendar td.priod{background-color:#fff3f5}
.tbl_calendar tr:last-child td.priod{border-bottom-color:#fff3f5}
.tbl_calendar td.priod .day_info{color:var(--main-color)}
.tbl_calendar .day_info{font-size:10px;font-weight:700;line-height:12px;text-align:center}

/* 선물하기 */
.bx_gift{padding:35px 0 20px;font-size:15px;text-align:center}
.bx_gift .tit_gift{margin-bottom:9px;font-size:21px}
.bx_gift .pd_img{width:220px;margin:25px auto 0}
.bx_gift .pd_img img{width:100%}
.bx_gift .btn_gift_txt{display:inline-block;margin-top:19px;padding:6px 14px 7px;border:1px solid #d9d9d9;border-radius:27px;font-size:15px;line-height:22px;color:#222;vertical-align:top}
.bx_gift .btn_gift_txt .ico_gift{margin:1px 6px 0 0}
.bx_gift .btn_full{display:block;}
.bx_gift .btn_full .pd_img{width:auto}

/* 랜덤 컨텐츠 */
.section .tit_sec{font-size:17px}
.section.random_content{padding:0;background-color:#f0f9ff}
.section.random_content:before,.section.random_content:after{display:block;width:100%;height:65px;background:linear-gradient(to bottom, #fff 17%, #f0f9ff);content:''}
.section.random_content:after{background:linear-gradient(to top, #fff 17%, #f0f9ff)}
.section.random_content .inner_random{position:relative;margin:0 var(--wrap-side-padding);padding:17px 0 22px}
.section.random_content .inner_random .btn_random{position:absolute;top:0;right:0;bottom:0;left:0}
.section.random_content .tit_random{font-size:17px;font-weight:700;line-height:22px}
.section.random_content .tit_random .type_random{display:block;padding-bottom:4px;font-size:16px;color:#247cb1;letter-spacing:-0.22px}
.section.random_content .pd_img{overflow:hidden;margin-top:11px;border-radius:6px}

/* 당신을 위한 추천글 */
.section.recommend{padding-top:30px}
.recommend_lst{padding-bottom:40px}
.recommend_lst .unit_info:first-child{padding-top:24px}
.unit_info{display:flex;align-items:center;position:relative;padding:30px 0;font-size:0;white-space:nowrap}
.unit_info + .unit_info{border-top:1px solid #e5e5e5}
.unit_info .btn_link{position:absolute;top:0;left:0;width:100%;height:100%}
.unit_info .pd_img{flex-shrink:0;overflow:hidden;width:100px;height:100px;border-radius:6px}
.unit_info .inner_info{min-width:0;padding-left:15px}
.unit_info .inner_info .txt{display:block;font-size:14px;line-height:22px;color:#333;word-break:break-all;white-space:normal}
.unit_info .inner_info .txt.main{overflow:hidden;padding-bottom:5px;font-size:17px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.unit_info .inner_info .txt.detail{display:-webkit-box;overflow:hidden;max-height:66px;-webkit-line-clamp:3;-webkit-box-orient:vertical}

/* 레이어 */
.wrap_layer{position:fixed;top:0;left:0;bottom:0;right:0;z-index:1;margin:20px}
.wrap_layer:before{position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,0.4);content:''}
.wrap_layer .inner_layer{position:absolute;top:50%;left:50%;display:-ms-flexbox;display:flex;flex-direction:column;min-width:336px;max-height:100%;padding-top:30px;background-color:#fff;transform:translate(-50%,-50%);box-sizing:border-box}
.wrap_layer .inner_layer .btn_close{position:absolute;top:18px;right:18px}
.wrap_layer .btn_layer{width:100%;min-height:53px;padding:16px 0 17px;background-color:var(--main-color);font-size:15px;font-weight:700;line-height:20px;color:#fff}
.head_layer{padding-bottom:15px}
.head_layer .tit_layer{font-size:20px;font-weight:700;text-align:center}
.head_layer .tit_layer2{padding:0 19px;font-size:15px;font-weight:700}
.cont_layer{overflow-y:auto;padding:0 19px 25px}
.cont_layer .desc{line-height:22px}
.cont_layer .desc + .desc{padding-top:9px}
.cont_layer .desc.center{text-align:center}
.cont_layer .type_desc{display:block;padding:20px 0 5px;font-weight:700;color:var(--main-color)}
.cont_layer .type_desc:first-child{padding-top:0}

/* 공유동의 체크박스 */
.cont_layer .desc.point{font-weight:700}
.cont_layer .bx_chk{margin-top:15px}
.cont_layer .bx_chk .lb_chk{display:block;position:relative;padding:14px 40px 18px 16px;border-radius:2px;background-color:#f6f6f6;cursor:pointer}
.cont_layer .bx_chk .txt_lb{display:inline-block;padding-top:1px;line-height:21px;vertical-align:top}
.cont_layer .bx_chk .lb_chk .ico_check{position:absolute;top:16px;right:16px}

/* 만료된 페이지 */
.wrap_expire{position:fixed;top:50%;left:0;width:100%;text-align:center;transform:translateY(-50%)}
.wrap_expire .area_txt .txt +.txt{padding-top:7px}
.wrap_expire .area_txt .txt.point{font-size:21px;font-weight:700;color:#000}
.wrap_expire .pd_img{width:125px;margin:48px auto 0}


/* 친구 연결 관련 동의 페이지 */
.friend .sp{display:inline-block;background:url('~@/assets/img/premium/sp.png') no-repeat;background-size:44px auto;vertical-align:top}
.friend .sp.ico_close{width:24px;height:24px;background-position:0 0}
.friend .sp.ico_check{width:21px;height:21px;background-position:0 -26px}
.friend .bx_chk input:checked + .lb_chk .ico_check{background-position:-23px -26px}

.friend .wrap_layer{position:fixed;top:0;left:0;bottom:0;right:0;margin:20px;}
.friend .wrap_layer:before{position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,0.4);content:''}
.friend .wrap_layer .inner_layer{position:absolute;top:50%;left:50%;display:-ms-flexbox;display:flex;flex-direction:column;min-width:336px;max-height:100%;padding-top:30px;background-color:#fff;transform:translate(-50%,-50%);box-sizing:border-box}
.friend .wrap_layer .inner_layer .btn_close{position:absolute;top:18px;right:18px}
.friend .wrap_layer .btn_layer{width:100%;min-height:53px;padding:16px 0 17px;background-color:#f93f5a;font-size:15px;font-weight:700;line-height:20px;color:#fff}
.friend .head_layer{padding-bottom:15px}
.friend .head_layer .tit_layer{font-size:20px;font-weight:700;text-align:center}
.friend .cont_layer{overflow-y:auto;padding:0 19px 25px}
.friend .cont_layer .desc{line-height:22px}
.friend .cont_layer .desc + .desc{padding-top:9px}
.friend .cont_layer .desc.point{font-weight:700}
.friend .cont_layer .bx_chk{margin-top:15px}
.friend .cont_layer .bx_chk .lb_chk{display:block;position:relative;padding:15px 40px 17px 16px;border-radius:2px;background-color:#f6f6f6;cursor:pointer}
.friend .cont_layer .bx_chk .txt_lb{display:inline-block;padding-top:1px;line-height:21px;vertical-align:top}
.friend .cont_layer .bx_chk .lb_chk .ico_check{position:absolute;top:15px;right:16px}

.friend .wrap_service_agree{padding:35px 25px 25px;}
.friend .wrap_service_agree .head_agree{padding-bottom:25px}
.friend .wrap_service_agree .head_agree .h_title{font-size:20px;font-weight:700;text-align:center;color:#000}
.friend .cont_agree .desc{line-height:22px}
.friend .cont_agree .desc + .desc{margin-top:9px}
.friend .cont_agree .desc.point{margin-top:3px;font-weight:700}
.friend .cont_agree .bx_chk{margin-top:25px}
.friend .cont_agree .bx_chk .lb_chk{display:block;position:relative;padding:14px 16px 18px;border-radius:2px;background-color:#f6f6f6;cursor:pointer}
.friend .cont_agree .bx_chk .txt_lb{display:inline-block;padding-top:1px;line-height:21px;vertical-align:top}
.friend .cont_agree .bx_chk .lb_chk .ico_check{position:absolute;top:16px;right:16px}

.friend .btn_foot{display:table;table-layout:fixed;width:100%;height:53px;margin-top:25px}
.friend .btn_foot .btn{display:table-cell;height:auto;padding:14px 0 17px;font-size:15px;font-weight:700;text-align:center;vertical-align:middle}
.friend .btn_full{width:100%;border-radius:5px;color:#fff;background-color:#f93f5a}