* {
    box-sizing: border-box;
}
body.fixed {
    overflow: hidden;
}
main {
    padding: 7rem 1.5rem 11rem;
    background: url(../img/background.png) no-repeat center/cover;
    min-height: 100vh;
}
main.no_footer {
    padding: 7rem 1.5rem 3rem;
    min-height: 100vh;
}
#indexLoadImg {
    position: relative;
    background: #F5F6F5;
    min-height: 100vh;
}
#indexLoadImg .logo {
    position: absolute;
    display: block;
    height: 15rem;
    left: 50%; top: 20%;
    transform: translateX(-50%);
}
#indexLoadImg .img {
    display: block;
    position: absolute;
    left: 50%; bottom: 15%;
    transform: translateX(-50%);
    height: 8rem;
}

/* header */
header {
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 6rem;
    z-index: 999;
    background: url(../img/background.png) no-repeat center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
header a {
    display: block;
    height: 2.3rem;
}
header a img {
    display: block;
    height: 100%;
}
header.chart p {
    font-size: 2.1rem;
}
header.chart .chart_back {
    position: absolute;
    display: block;
    width: 2rem; height: 2rem;
    background: url(../img/arrow-1.png) no-repeat center/contain;
    left: 1.5rem; top: 50%;
    transform: translateY(-50%);
}

/* sub_header */
header.sub .date_txt {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #384739;
}
header.sub .date_txt .date_ico {
    display: block;
    width: 1.5rem; height: 1.5rem;
    background: url(../img/sub-icon-1.png) no-repeat center/contain;
}
header.sub .back {
    position: absolute;
    left: 1.5rem; top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 1.7rem; height: 1.7rem;
    background: url(../img/arrow-1.png) no-repeat center/contain;
}

/* footer */
footer {
    position: fixed;
    left: 0; bottom: 0;
    width: 100%; height: 8.5rem;
    border-top: .1rem solid #BAC0C9;
    background: #F2F2F2;
    z-index: 999;
}
footer ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
footer ul li {
    width: calc(100% / 4);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
footer ul li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    height: 100%;
    width: 100%;
}
footer ul li a img {
    width: 2.7rem;
    height: 2.7rem;
    object-fit: contain;
}
footer ul li a span {
    font-size: 1.9rem;
    color: #BDBDBD;
    font-weight: 700;
}
footer ul li.on a span {
    color: #2E2E2E;
    font-weight: 700;
}

/* home */
.main_info {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.main_info .left_ico {
    display: block;
    width: 6rem; height: 6rem;
    background: url(../img/emotional-1.png) no-repeat center/contain;
}
.main_info p {
    background: url(../img/main-img-1.png) no-repeat center/contain;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    width: 23rem; height: 7rem;
    padding: .9rem 0 0 2.7rem;
}
.main_info p span {
    font-size: 1.7rem;
    color: #646464;
}
/* 캘린더 */

main .calendar .dateWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4rem 0 1.5rem;
    position: relative;
}
main .calendar .dateWrap .date {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    font-weight: 700;
    gap: 1rem;
    padding-bottom: 1.2rem;
    background: url(../img/main-line.png) no-repeat 100% 100% /contain;
}
main .calendar .dateWrap .date span{
    font-size: 2.5rem;
    display: inline-block;
    padding-right: .5rem;
}
main .calendar .dateWrap .date i {
    display: block;
    width: 1.7rem; height: 1.7rem;
    background: url(../img/arrow-3.png) no-repeat center/contain;
}
main .calendar .dateWrap .date_more_ico {
    display: block;
    width: 1.5rem; height: 1.5rem;
    background: url(../img/toggle_open1.png) no-repeat center/contain;
}
main .calendar table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    table-layout: fixed;
}
main .calendar table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}
main .calendar table thead tr th {
    font-size: 1.7rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #CFD4DD;
    width: calc(100% / 7);
}
main .calendar table tbody {
    display: block;
    overflow-y: scroll;
    width: 100%;
}
main .calendar table tbody tr {
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    width: 100%;
    table-layout: fixed;
}
main .calendar table tbody tr:last-child {
    border: none;
}
main .calendar table tbody tr td {
    width: calc(100% / 7);
    padding-top: 0.5rem;
    height: 8rem;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    box-sizing: border-box;
    gap: 1.3rem;
}
main .calendar table tbody tr td img {
    display: block;
    width: 4rem; height: 4rem;
    object-fit: contain;
}
main .calendar table tbody tr td.today > span {
    background: url(../img/mark.png) no-repeat 50% 10%/contain;
    display: inline-block;
    width: 3rem; height: 2rem;
}
main .calendar table tbody tr td > span {
    font-size: 1.7rem;
    display: inline-block;
    font-weight: 700;
    width: 3rem; height: 2rem;
}
main .calendar table tbody tr td.prev-month > span,
main .calendar table tbody tr td.next-month > span {
    color: #909090;
    font-weight: 300;
}
main .calendar table tbody tr td .work-info {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end;
    gap: 0.5rem;
    height: 100%;
    width: 100%;
    position: relative;
}
main .calendar table tbody tr td .work-info span {
    border-radius: 0.1rem;
    padding: 0.1rem 0;
    width: 100%;
}
main .calendar table tbody tr td .work-info img {
    width: 2.5rem;
    position: absolute;
    bottom: 0;
    right: 0;
}
.dateSelBg {
    display: none;
    position: fixed;
    left: 50%; top: 23rem;
    transform: translateX(-50%);
    background: #fff;
    z-index: 999;
    width: 93%; height: 20rem;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 10px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    border-radius: 1.3rem;
    padding: 2rem 0;
}
.dateSel .yearWrap{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
.yearWrap button img {
    display: block;
    width: 1.5rem; height: 1.5rem;
    object-fit: contain;
}
#selectedYear {
    font-size: 2.2rem;
    font-weight: 700;
}
#monthWrap {
    padding: 4rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}
#monthWrap p {
    width: calc(100% / 6 - 1.5rem);
    font-size: 1.9rem;
    text-align: center;
}
#monthWrap p:nth-child(n+7) {
    margin-top: 2rem;
}
#monthWrap p.selected {
    background: url(../img/mark.png) no-repeat center/contain;
}
.yearWrap .close_ico {
    display: block;
    position: absolute;
    right: 2rem; top: 50%;
    transform: translateY(-50%);
    width: 1.7rem; height: 1.7rem;
    background: url(../img/cancel-1.png) no-repeat center/contain;
}


.planWrap {
    display: none;
}
main .calendar table tbody tr td.no_click span{
    color: #909090;
    font-weight: 300;
}
#monthWrap p.no_click {
    color: #909090;
    font-weight: 300;
}
.today_diary_btn {
    display: block;
    position: fixed;
    right: 1.5rem; bottom: 10rem;
    background-image: url(../img/main-icon-1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2.8rem;
    width: 6rem; height: 6rem;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
    border: .1rem solid #B7BEC7;
}

/* free_diary */
.free_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 3rem;
    border-bottom: .1rem solid #DEE2E6;
}
.free_top p {
    font-size: 2rem;
    font-weight: 700;
    color: #495249;
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 56%;
    line-height: 1.3;
}
.free_top p i.ico {
    display: block;
    width: 2.3rem; height: 2.3rem;
    background: url(../img/keywore-1.png) no-repeat center/contain;
}
.free_top .tabs {
    display: flex;
    align-items: center;
    border: .1rem solid #D5DADE;
    padding: .6rem;
    background: #fff;
    border-radius: 3rem;
    max-width: 42%;
    width: 100%;
}
.free_top .tabs li {
    width: calc(50%);
}
.free_top .tabs li a {
    display: block;
    width: 100%;
    font-size: 1.9rem;
    text-align: center;
    padding: 1rem 0;
}
.free_top .tabs li a.on {
    background: #88B789;
    color: #fff;
    border-radius: 3rem;
}
#diary_sec {
    padding-top: 3rem;
}
#diary_sec .title {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}
#diary_sec .title .left {
    display: block;
    width: 6rem; height: 6rem;
}
#diary_sec .title .left img {
    display: block;
    width: 100%; height: 100%;
    object-fit: contain;
}
#diary_sec .title label {
    position: relative;
    display: block;
    width: 80%; height: 6.5rem;
}
#diary_sec .title label img {
    display: block;
    width: 100%; height: 100%;
}
#diary_sec .title label input {
    position: absolute;
    display: block;
    background: transparent;
    color: #A9A9A9;
    font-size: 1.9rem;
    font-weight: 700;
    width: 90%;
    padding: 1.5rem 1rem;
    left: 2.5rem; top: 48%;
    transform: translateY(-50%);
}
#diary_sec .title label input::placeholder {
    color: #9B9B9B;
}
#diary_sec .title label input:focus {
    outline: none;
}
#free_diary_text {
    background: transparent;
    width: 100%;
    height: 35rem;
    border: none;
    resize: none;
    color: #9B9B9B;
    border-radius: 1.3rem;
    padding: 1.5rem 0;
    font-size: 1.8rem;
    line-height: 1.4;
}
#free_diary_text:focus {
    outline: none;
}
#free_diary_text::placeholder {
    color: #A9A9A9;
}
.diary_keyword {
    margin: 2.5rem 0 5rem;
}
.diary_keyword .left {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.diary_keyword .left .left_tit {
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    color: #475047;
    gap: .7rem;
}
.diary_keyword .left span .ico {
    display: block;
    width: 2.5rem; height: 2.5rem;
    background: url(../img/keywore-2.png) no-repeat center/contain;
    margin-top: .3rem;
}
.diary_keyword .right {
    font-size: 1.8rem;
    color: #7D7D7D;
    font-weight: 700;
}
.diary_keyword b {
    font-size: 1.8rem;
    color: #858586;
    display: block;
    margin-top: 1.5rem;
}
.btn_box {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 2rem;
}
.btn_box .submit {
    font-size: 2.2rem;
    color: #B6B5B6;
    border: .1rem solid #B9C0C9;
    display: inline-block;
    padding: 1.7rem 2rem;
    border-radius: 1.3rem;
    font-weight: 700;
}
.btn_box .submit.success {
    background: #fff;
    color: #354436;
    border-color: #BBC1CA;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}
.btn_box .delete_btn {
    font-size: 2.2rem;
    color: #707B86;
    border: .1rem solid #B9C0C9;
    display: inline-block;
    padding: 1.7rem 2rem;
    border-radius: 1.3rem;
    font-weight: 700;
    background: #fff;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}
.sticker_choice {
    display: none;
    padding: 0 1.5rem;
    border-radius: 1.3rem;
    position: fixed;
    left: 50%; top: 25%;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 10px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    width: 95%; height: 28rem;
    border: .1rem solid #D1D5DA;
}
.sticker_choice .top {
    position: relative;
    font-size: 2rem;
    text-align: center;
    padding: 2rem 0;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.sticker_choice .top .close_ico {
    position: absolute;
    display: block;
    width: 1.7rem; height: 1.7rem;
    background: url(../img/cancel-2.png) no-repeat center/contain;
    right: 0; top: 50%;
    transform: translateY(-50%);
}
.sticker_sec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.sticker_sec li {
    width: calc(100% / 5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 3rem;
}
.sticker_sec li img {
    display: block;
    width: 4.5rem; height: 4.5rem;
    object-fit: contain;
}
.sticker_sec li p {
    font-size: 1.7rem;
    font-weight: 700;
}
.sticker_sec li:nth-child(1) p {
    color: #7DB07E;
}
.sticker_sec li:nth-child(2) p {
    color: #EEC96D;
}
.sticker_sec li:nth-child(3) p {
    color: #EE8B49;
}
.sticker_sec li:nth-child(4) p {
    color: #4B6279;
}
.sticker_sec li:nth-child(5) p {
    color: #6FAE9D;
}
.sticker_sec li:nth-child(6) p {
    color: #C58BDB;
}
.sticker_sec li:nth-child(7) p {
    color: #55AEC9;
}
.sticker_sec li:nth-child(8) p {
    color: #FF767A;
}
.sticker_sec li:nth-child(9) p {
    color: #F172A6;
}
.sticker_sec li:nth-child(10) p {
    color: #B0B0B0;
}
.btn_box.sticker {
    text-align: center;
}
.btn_box.sticker .success {
    font-size: 1.8rem;
    color: #fff;
    background: #929292;
    padding: 1.5rem 0;
    border-radius: 1.3rem;
    width: 70%;
}
.keyword_box {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    gap: 1.7rem;
    flex-wrap: wrap;
}
.keyword_box li {
    font-size: 1.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.keyword_box li .circle_ico {
    display: block;
    width: 2.5rem; height: 2.5rem;
}
.keyword_box li.basic {
    color: #595F63;
}
.keyword_box li.happy {
    color: #517951;
}
.keyword_box li.cry {
    color: #4D6278;
}
.keyword_box li.angry {
    color: #E87C32;
}
.keyword_box li.scare {
    color: #1A8A9D;
}
.keyword_box li.etc {
    color: #F2579D;
}
.keyword_box li.basic .circle_ico {
    background: url(../img/keywore-10.png) no-repeat center/contain;
}
.keyword_box li.happy .circle_ico {
    background: url(../img/keywore-1.png) no-repeat center/contain;
}
.keyword_box li.cry .circle_ico {
    background: url(../img/keywore-4.png) no-repeat center/contain;
}
.keyword_box li.angry .circle_ico {
    background: url(../img/keywore-3.png) no-repeat center/contain;
}
.keyword_box li.scare .circle_ico {
    background: url(../img/keywore-7.png) no-repeat center/contain;
}
.keyword_box li.etc .circle_ico {
    background: url(../img/keywore-9.png) no-repeat center/contain;
}
.black_back {
    display: none;
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
}
.modal {
    display: none;
    position: fixed;
    left: 50%; top: 35%;
    transform: translateX(-50%);
    width: 93%; height: 19rem;
    background: #fff;
    z-index: 1001;
    border-radius: 2rem;
    padding: 2.5rem 1.5rem;
}
.modal p {
    font-size: 1.9rem;
    font-weight: 700;
    text-align: center;
    padding: 1rem 0;
}
.modal span {
    display: block;
    text-align: center;
    font-size: 1.6rem;
    color: #888888;
    margin-bottom: 2.5rem;
}
.modal .btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal .btns li {
    width: calc(50% - 1rem);
    text-align: center;
    font-size: 2rem;
    padding: 1.5rem 0;
    border-radius: 1.5rem;
    font-weight: 700;
}
.modal .btns li.yes {
    border: .1rem solid #BCC3CB;
    color: #5A655A;
}
.modal .btns li.no {
    border: .1rem solid #638C63;
    background: #88B789;
    color: #fff;
    font-weight: 300;
}



/* keyword */
.keyword_sec {
    display: none;
    position: fixed;
    left: 0; top: 0;
    width: 100%; min-height: 100vh;
    height: 100%;
    background: url(../img/background.png) no-repeat center/cover;
    z-index: 9990;
    padding: 0 1.5rem 20rem;
    overflow-y: scroll;
}
.keyword_sec .top {
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 6rem;
    background: url(../img/background.png) no-repeat center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.keyword_sec .top p {
    font-size: 2.2rem;
    font-weight: 700;
    color: #374638;
}
.keyword_sec .top .keyword_close {
    position: absolute;
    top: 50%; right: 1.5rem;
    transform: translateY(-50%);
    display: block;
    width: 2rem; height: 2rem;
    background: url(../img/cancel-1.png) no-repeat center/contain;
}
.keyword_sec .top_tit {
    position: relative;
    margin: 8rem 0 1rem;
    text-align: center;
    width: 100%; height: 10.5rem;
}
.keyword_sec .top_tit img {
    width: 90%; height: 100%;
}
.keyword_sec .top_tit .text_box {
    position: absolute;
    left: 50%; top: 1.7rem;
    transform: translateX(-50%);
    width: 90%;
}
.keyword_sec .top_tit .text_box p {
    font-size: 1.9rem;
    font-weight: 700;
    color: #4B544B;
    width: 100%;
    margin-bottom: 1rem;
}
.keyword_sec .top_tit .text_box span {
    font-size: 1.8rem;
    color: #818681;
}
.keyword_list .box {
    padding: 3rem 0;
    border-bottom: .1rem solid #D2D5D9;
}
.keyword_list .box.etc {
    border-bottom: none
}
.keyword_list .box .tit {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.keyword_list .box.open .tit {
    margin-bottom: 2rem;
}
.keyword_list .box .tit .ico {
    display: block;
    width: 3.5rem; height: 3.5rem;
}
.keyword_list .box.basic .tit .ico {
    background: url(../img/emotional-10.png) no-repeat center/contain;
}
.keyword_list .box.happy .tit .ico {
    background: url(../img/emotional-1.png) no-repeat center/contain;
}
.keyword_list .box.cry .tit .ico {
    background: url(../img/emotional-4.png) no-repeat center/contain;
}
.keyword_list .box.angry .tit .ico {
    background: url(../img/emotional-3.png) no-repeat center/contain;
}
.keyword_list .box.scare .tit .ico {
    background: url(../img/emotional-7.png) no-repeat center/contain;
}
.keyword_list .box.etc .tit .ico {
    background: url(../img/emotional-9.png) no-repeat center/contain;
}
.keyword_list .box .tit p {
    font-size: 2.3rem;
    font-weight: 700;
    color: #666F78;
}
.keyword_list .box.happy .tit p {
    color: #487248;
}
.keyword_list .box.cry .tit p {
    color: #4F657C;
}
.keyword_list .box.angry .tit p {
    color: #EA7D34;
}
.keyword_list .box.scare .tit p {
    color: #108599;
}
.keyword_list .box.etc .tit p {
    color: #F2589E;
}
.keyword_list .box .tit .arrow {
    margin-top: .3rem;
    display: block;
    width: 1.3rem; height: 1.3rem;
    background: url(../img/arrow-3.png) no-repeat center/contain;
}
.keyword_list .box.open .tit .arrow {
    background-image: url(../img/arrow-2.png);
}
.keyword_sub {
    display: none;
    /* justify-content: space-between; */
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.keyword_list .box.open .keyword_sub {
    display: flex;
}
.keyword_sub li {
    font-size: 1.8rem;
    width: fit-content;
    font-weight: 700;
    padding: 1rem 1.5rem;
    color: #979897;
    border: .1rem solid #BBC3CC;
    /* margin-bottom: 1rem; */
    border-radius: 1.5rem;
}
.box.basic .keyword_sub li.selected {
    background: #DDDDDD;
    border-color: #B5B5B5;
    color: #555B5F;
}
.box.happy .keyword_sub li.selected {
    background: #DDF2DD;
    border-color: #7BAF7C;
    color: #517A51;
}
.box.cry .keyword_sub li.selected {
    background: #CADDED;
    border-color: #5E7286;
    color: #52687D;
}
.box.angry .keyword_sub li.selected {
    background: #FFE4D2;
    border-color: #E87B31;
    color: #EE8A46;
}
.box.scare .keyword_sub li.selected {
    background: #D9EFF4;
    border-color: #128599;
    color: #1D8B9E;
}
.box.etc .keyword_sub li.selected {
    background: #F9E8F0;
    border-color: #F271A6;
    color: #F2529A;
}
.keyword_btm {
    position: fixed;
    left: 0; bottom: 0;
    width: 100%; height: fit-content;
    background: #F2F2F2;
    border-top: .1rem solid #CDD2D6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 1.5rem;
    box-shadow: 0px -3px 7px -2px rgba(0, 0, 0, 0.1);
}
.keyword_btm p {
    color: #989998;
    font-size: 1.9rem;
    font-weight: 700;
}
.keyword_btm p.selected {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 75%;
    gap: 1rem;
}
.keyword_btm p.selected span {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.2rem 1.5rem;
    border: .1rem solid #B5B5B5;
    background: #DDDDDD;
    color: #555B5F;
    font-size: 1.8rem;
    border-radius: 1.5rem;
    font-weight: 700;
}
.keyword_btm p.selected span.happy {
    background: #DDF2DD;
    border-color: #7BAF7C;
    color: #517A51;
}
.keyword_btm p.selected span.cry {
    background: #CADDED;
    border-color: #5E7286;
    color: #52687D;
}
.keyword_btm p.selected span.angry {
    background: #FFE4D2;
    border-color: #E87B31;
    color: #EE8A46;
}
.keyword_btm p.selected span.scare {
    background: #D9EFF4;
    border-color: #128599;
    color: #1D8B9E;
}
.keyword_btm p.selected span.etc {
    background: #F9E8F0;
    border-color: #F271A6;
    color: #F2529A;
}
.keyword_btm p.selected span .delete {
    display: block;
    width: 1.5rem; height: 1.5rem;
    background: url(../img/cancel-2.png) no-repeat center/contain;
    margin-top: .1rem;
}
.keyword_btm p.selected span.happy .delete {
    background-image: url(../img/cancel-3.png);
}
.keyword_btm p.selected span.cry .delete {
    background-image: url(../img/cancel-4.png);
}
.keyword_btm p.selected span.angry .delete {
    background-image: url(../img/cancel-5.png);
}
.keyword_btm p.selected span.scare .delete {
    background-image: url(../img/cancel-6.png);
}
.keyword_btm p.selected span.etc .delete {
    background-image: url(../img/cancel-7.png);
}
.keyword_btm .submit {
    border: .1rem solid #D2D6DB;
    color: #B7B7B7;
    padding: 1.5rem 1.6rem;
    font-size: 1.9rem;
    font-weight: 700;
    border-radius: 1.6rem;
}
.keyword_btm .submit.on {
    background: #fff;
    color: #354436;
    border-color: #BBC1CA;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}

/* question_diary */
textarea {
    background: transparent;
    width: 100%;
    height: 35rem;
    border: none;
    resize: none;
    border-radius: 1.3rem;
    padding: 1.5rem 0;
    font-size: 1.8rem;
    color: #A9A9A9;
    line-height: 1.4;
}
textarea:focus {
    outline: none;
}
textarea.question {
    height: 15rem;
    padding: 0 0 1.5rem;
}
textarea.question::placeholder {
    color: #A1A1A1;
}
.cont.today {
    margin-top: 4rem;
}
.cont.today .cont_tit,
.cont.today_emo_text .cont_tit,
.cont.memories_text .cont_tit,
.cont.memo_text .cont_tit {
    font-size: 2rem;
    font-weight: 700;
    color: #4D574D;
    margin-bottom: 1rem;
}

/* view_free_diary */
.modify_btn {
    display: block;
    font-size: 1.9rem;
    color: #818181;
    position: fixed;
    right: 1.5rem; top: 2rem;
    z-index: 1000;
}
#view_sec .title {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}
#view_sec .title .left {
    display: block;
    width: 6rem; height: 6rem;
}
#view_sec .title .left img {
    display: block;
    width: 100%; height: 100%;
    object-fit: contain;
}
#view_sec .title label {
    position: relative;
    display: block;
    width: 80%; height: 6.5rem;
}
#view_sec .title label img {
    display: block;
    width: 100%; height: 100%;
}
#view_sec .title label input {
    position: absolute;
    display: block;
    background: transparent;
    color: #9B9B9B;
    font-size: 1.9rem;
    font-weight: 700;
    width: 90%;
    padding: 1.5rem 1rem;
    left: 2.5rem; top: 48%;
    transform: translateY(-50%);
}
#view_sec .title label input:focus {
    outline: none;
}

/* diary_list */
.list_top {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 1rem;
    background: url(../img/sub-line.png) no-repeat 100% 100% / contain;
}
.list_top li {
    display: flex;
    align-items: center;
    gap: .7rem;
}
.list_top li.right {
    justify-content: flex-end;
}
.list_top li img {
    display: block;
    width: 5rem; height: 5rem;
    object-fit: contain;
}
.list_top li.left .top_left {
    background: url(../img/main-img-1.png) no-repeat center / contain;
    width: 21rem;
    height: 7rem;
    padding: 1.4rem 0 0 2.7rem;
}
.list_top li.right .top_left {
    display: block;
    background: url(../img/sub-img-3.png) no-repeat center / contain;
    width: 21rem;
    height: 7rem;
    padding: 1.4rem 0 0 1.3rem;
}
.list_top li .top_left h2 {
    font-size: 1.9rem;
    font-weight: 700;
    color: #383838;
    margin-bottom: .5rem;
}
.list_top li.right .top_left h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.list_top li.right .top_left h2 .arrow {
    display: block;
    width: 1.3rem; height: 1.3rem;
    background: url(../img/arrow-4.png) no-repeat center/contain;
    transform: rotate(180deg);
    margin-top: .2rem;
}
.list_top li .top_left p {
    font-size: 1.7rem;
    color: #6E6E6E;
}
.list_result {
    padding-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.list_result li {
    display: flex;
    justify-content: space-between;
}
.list_result li img {
    display: block;
    width: 6rem; height: 6rem;
    object-fit: contain;
    margin-top: .5rem;
}
.list_result li .right {
    position: relative;
    width: 78%; height: 12rem;
    background-image: url(../img/sub-img-4.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    padding: 1.6rem 0 1.5rem 3rem;
}
.list_result li .right img {
    width: 100%; height: 100%;
    object-fit: contain;
}
.list_result li .right .box {
    position: relative;
    width: 93%;
}
.list_result li .right .box p {
    font-size: 1.8rem;
    color: #6C6C6C;
    margin-bottom: .7rem;
}
.list_result li .right .box h3 {
    font-size: 2rem;
    font-weight: 700;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    width: 80%; 
}
.list_result li .right .box .view_diary {
    position: absolute;
    width: 3rem; height: 3rem;
    background: url(../img/sub-icon-3.png) no-repeat center/contain;
    right: 0; top: 0;
}
.list_result li .right .keyword_box {
    margin-top: 1.2rem;
    display: block;
}
.list_result li.none {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 0 8rem;
}
.list_result li.none img {
    width: 10rem; height: 10rem;
    margin-bottom: 4rem;
}
.list_result li.none p {
    font-size: 2.3rem;
    color: #5E6367;
    font-weight: 700;
    margin-bottom: 1rem;
}
.list_result li.none span {
    font-size: 1.7rem;
    color: #5E6367;
}
.swiper-container.keyword_box {
    overflow: hidden;
}
.keyword_box .swiper-slide {
    font-size: 1.7rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: fit-content;
    gap: .5rem;
}
.keyword_box .swiper-slide .circle_ico {
    display: block;
    width: 2.5rem; height: 2.5rem;
    margin-top: .4rem;
}
.keyword_box .swiper-slide.basic {
    color: #595F63;
}
.keyword_box .swiper-slide.happy {
    color: #517951;
}
.keyword_box .swiper-slide.cry {
    color: #4D6278;
}
.keyword_box .swiper-slide.angry {
    color: #E87C32;
}
.keyword_box .swiper-slide.scare {
    color: #1A8A9D;
}
.keyword_box .swiper-slide.etc {
    color: #F2579D;
}
.keyword_box .swiper-slide.basic .circle_ico {
    background: url(../img/keywore-10.png) no-repeat center/contain;
}
.keyword_box .swiper-slide.happy .circle_ico {
    background: url(../img/keywore-1.png) no-repeat center/contain;
}
.keyword_box .swiper-slide.cry .circle_ico {
    background: url(../img/keywore-4.png) no-repeat center/contain;
}
.keyword_box .swiper-slide.angry .circle_ico {
    background: url(../img/keywore-3.png) no-repeat center/contain;
}
.keyword_box .swiper-slide.scare .circle_ico {
    background: url(../img/keywore-7.png) no-repeat center/contain;
}
.keyword_box .swiper-slide.etc .circle_ico {
    background: url(../img/keywore-9.png) no-repeat center/contain;
}

/* diary_chart */
.chart_top {
    text-align: center;
    max-width: 90%;
    width: 100%; height: 10rem;
    margin: 0 auto;
    background: url(../img/sub-img-2.png) no-repeat 0 0/100% 100%;
    padding-top: 1.6rem;
    margin-bottom: 3rem;
}
.chart_top h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: .7rem;
    color: #555E55;
}
.chart_top p {
    font-size: 1.7rem;
    color: #8E928E;
}
#myPieChart {
    width: 27rem;
    margin: 0 auto 3rem;
}
.chart_percent {
    padding: 2rem 1.5rem 3rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    background: url(../img/sub-line.png) no-repeat 100% 100% / contain;
}
.chart_percent.none {
    display: block;
}
.chart_percent li {
    width: calc(100% / 4 - 1rem);
    font-size: 1.9rem;
    color: #5A6F84;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
}
.chart_percent li.none {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 0 8rem;
}
.chart_percent li.none img {
    width: 10rem; height: 10rem;
    margin-bottom: 4rem;
}
.chart_percent li.none p {
    font-size: 2.3rem;
    color: #5E6367;
    font-weight: 700;
    margin-bottom: 1rem;
}
.chart_percent li.none span {
    font-size: 1.7rem;
    color: #5E6367;
}
.chart_percent li .circle_ico {
    display: block;
    width: 2.5rem; height: 2.5rem;
}
.chart_percent li.shy .circle_ico {
    background: url(../img/keywore-8.png) no-repeat center/contain;
}
.chart_percent li.joyful .circle_ico {
    background: url(../img/keywore-2.png) no-repeat center/contain;
}
.chart_percent li.happy .circle_ico {
    background: url(../img/keywore-1.png) no-repeat center/contain;
}
.chart_percent li.angry .circle_ico {
    background: url(../img/keywore-3.png) no-repeat center/contain;
}
.chart_percent li.anxiety .circle_ico {
    background: url(../img/keywore-5.png) no-repeat center/contain;
}
.chart_percent li.sad .circle_ico {
    background: url(../img/keywore-6.png) no-repeat center/contain;
}
.chart_percent li.scare .circle_ico {
    background: url(../img/keywore-7.png) no-repeat center/contain;
}
.chart_percent li.confused .circle_ico {
    background: url(../img/keywore-9.png) no-repeat center/contain;
}
.chart_percent li.normal .circle_ico {
    background: url(../img/keywore-10.png) no-repeat center/contain;
}
.chart_percent li.cry .circle_ico {
    background: url(../img/keywore-4.png) no-repeat center/contain;
}
.chart_emoji {
    padding: 3rem 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.chart_emoji li {
    width: calc(100% / 5 - 1rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.chart_emoji li img {
    display: block;
    width: 5.5rem; height: 5.5rem;
    object-fit: contain;
}
.chart_emoji li p {
    font-size: 1.9rem;
    font-weight: 700;
}
.chart_emoji li.happy p {
    color: #7FB280;
}
.chart_emoji li.joyful p {
    color: #EFCA6D;
}
.chart_emoji li.angry p {
    color: #EF843E;
}
.chart_emoji li.cry p {
    color: #486077;
}
.chart_emoji li.anxiety p {
    color: #73B0A0;
}
.chart_emoji li.sad p {
    color: #C587DB;
}
.chart_emoji li.scare p {
    color: #5AB1CC;
}
.chart_emoji li.shy p {
    color: #FF8588;
}
.chart_emoji li.confused p {
    color: #F270A6;
}
.chart_emoji li.normal p {
    color: #B2B1B2;
}

/* diary_search */
.search_top {
    border: .1rem solid #D0D4D8;
    background-color: #fff;
    padding: 0 2rem;
    border-radius: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 1.5rem;
}
.search_top input {
    display: block;
    width: 90%;
    padding: 1.5rem 0;
    font-size: 1.8rem;
    font-weight: 700;
    border-radius: 2.5rem;
}
.search_top input:focus {
    outline: none;
}
.search_top input::placeholder {
    font-size: 1.8rem;
    font-weight: 700;
    color: #B0B0B0;
}
.search_top .search {
    position: relative;
    display: block;
    width: 2.2rem; height: 2.2rem;
    background: url(../img/search.png) no-repeat center/contain;
}
.search_top .search::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 4rem; height: 4rem;
    background: transparent;
}
.searchSwiper {
    margin: 0 0 4rem;
    background: #fff;
    padding: 1.5rem 0 1.5rem 1.5rem !important;
}
.searchSwiper .swiper-slide {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}
.searchSwiper .swiper-slide img {
    display: block;
    width: 4rem; height: 4rem;
    object-fit: contain;
}
.searchSwiper .swiper-slide p {
    font-size: 1.9rem;
    color: #B5B5B5;
    font-weight: 700;
}
.searchSwiper .swiper-slide.happy.on p {
    color: #7FB280;
}
.searchSwiper .swiper-slide.joyful.on p {
    color: #EFCA6D;
}
.searchSwiper .swiper-slide.angry.on p {
    color: #EF843E;
}
.searchSwiper .swiper-slide.cry.on p {
    color: #486077;
}
.searchSwiper .swiper-slide.anxiety.on p {
    color: #73B0A0;
}
.searchSwiper .swiper-slide.sad.on p {
    color: #C587DB;
}
.searchSwiper .swiper-slide.scare.on p {
    color: #5AB1CC;
}
.searchSwiper .swiper-slide.shy.on p {
    color: #FF8588;
}
.searchSwiper .swiper-slide.confused.on p {
    color: #F270A6;
}
.searchSwiper .swiper-slide.normal.on p {
    color: #B2B1B2;
}
.search_none {
    text-align: center;
    padding-top: 7rem;
}
.search_none p {
    font-size: 2.1rem;
    font-weight: 700;
    color: #7E858B;
    line-height: 1.4;
    letter-spacing: .5px;
}
.list_result.search {
    padding: 0 1.5rem;
}
.filter_none {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 0 8rem;
}
.filter_none img {
    width: 10rem; height: 10rem;
    margin-bottom: 4rem;
}
.filter_none p {
    font-size: 2.3rem;
    color: #5E6367;
    font-weight: 700;
    margin-bottom: 1rem;
}
.filter_none span {
    font-size: 1.7rem;
    color: #5E6367;
}

/* famous */
.main_info.famous {
    padding-bottom: 3rem;
    background: url(../img/sub-line.png) no-repeat 100% 100% /100%;
}
.main_info.famous .left_ico {
    background-image: url(../img/emotional-4.png);
}
.main_info.famous p {
    line-height: 1.3;
    color: #373637;
    padding: .8rem 0 0 3rem;
}
.famous_list {
    padding-top: 3rem;
}
.famous_list li {
    background: #fff;
    margin-bottom: 2rem;
    border-radius: 1.5rem;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}
.famous_list li .top {
    font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .7rem;
}
.famous_list li.happy .top {
    color: #487448;
}
.famous_list li.joyful .top {
    color: #EFCA6D;
}
.famous_list li.angry .top {
    color: #EF843E;
}
.famous_list li.cry .top {
    color: #4C6279;
}
.famous_list li.anxiety .top {
    color: #54A69A;
}
.famous_list li.sad .top {
    color: #C587DB;
}
.famous_list li.scare .top {
    color: #2F8DA4;
}
.famous_list li.shy .top {
    color: #FF8588;
}
.famous_list li.confused .top {
    color: #F270A6;
}
.famous_list li .top .circle {
    display: block;
    width: 2.5rem; height: 2.5rem;
    background: url(../img/keywore-1.png) no-repeat center/contain;
}
.famous_list li.joyful .top .circle {
    background-image: url(../img/keywore-2.png);
}
.famous_list li.angry .top .circle {
    background-image: url(../img/keywore-3.png);
}
.famous_list li.cry .top .circle {
    background-image: url(../img/keywore-4.png);
}
.famous_list li.anxiety .top .circle {
    background-image: url(../img/keywore-5.png);
}
.famous_list li.sad .top .circle {
    background-image: url(../img/keywore-6.png);
}
.famous_list li.scare .top .circle {
    background-image: url(../img/keywore-7.png);
}
.famous_list li.shy .top .circle {
    background-image: url(../img/keywore-8.png);
}
.famous_list li.confused .top .circle {
    background-image: url(../img/keywore-9.png);
}
.famous_list li .cont {
    display: flex;
    justify-content: center;
}
.famous_list li .cont i {
    display: block;
    width: 1.2rem; height: 1.2rem;
}
.famous_list li .deco_left {
    background: url(../img/deco-1.png) no-repeat center/contain;
}
.famous_list li .deco_right {
    background: url(../img/deco-2.png) no-repeat center/contain;
}
.famous_list li .cont p {
    font-size: 1.9rem;
    width: fit-content;
    max-width: 80%;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: #343434;
}
.famous_list li .writer {
    font-size: 1.8rem;
    color: #959595;
}
.famous_info {
    text-align: right;
    font-size: 1.6rem;
    color: #999997;
    letter-spacing: -1px;
}