@charset "utf-8";

#visual {
    position: relative;
    overflow: hidden;
    background: radial-gradient(
            ellipse farthest-corner at 90% 0%,
            #dbdbdb,
            #fafafa 70%
    );
}

#visual .inner {
    position: relative;
    margin: 0 auto;
    max-width: 1400px;
    min-width: 1200px;
    height: 680px;
    display: flex;
    justify-content: space-between;
}

#visual .slogan_box {
    position: relative;
    flex: 1 40%;
    padding: 13% 0 0 50px;
    box-sizing: border-box;
}

#visual .slogan_box .logo {
    width: 58px;
    height: 26px;
    background: url(../images/logo_basic.svg) no-repeat;
    text-indent: -9999em;
    overflow: hidden;
    margin-bottom: 30px;
}

#visual .slogan_box .slogan {
    font-size: 4em;
    font-family: 'JejuMyeongjo', serif;
    font-weight: 100;
    line-height: 1.2em;
    margin-bottom: 15px;
}

#visual .slogan_box .exp {
    font-size: 1.1em;
    color: #747474;
    margin-bottom: 60px;
}

#visual .slogan_box .go_lnk {
    display: inline-block;
    position: relative;
    font-size: 1.4em;
    font-weight: 600;
    padding-right: 60px;
}

#visual .slogan_box .go_lnk::after {
    content: '';
    display: block;
    background: #f9ca43;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0 -25px -10px 0;
    transition: transform ease .3s
}

#visual .slogan_box .go_lnk i {
    position: absolute;
    right: 0;
    bottom: 4px;
    display: inline-block;
    width: 45px;
    height: 18px;
    z-index: 1;
}

#visual .slogan_box .go_lnk i::after {
    content: '';
    width: 100%;
    height: 2px;
    background: #000;
    position: absolute;
    left: 0;
    bottom: 0;
}

#visual .slogan_box .go_lnk i::before {
    content: '';
    width: 20px;
    height: 2px;
    background: #000;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(45deg);
    margin: 0 -2px 7px 0;
}

#visual .slogan_box .go_lnk:hover::after,
#visual .slogan_box .go_lnk:focus::after {
    transform: scale(1.4);
}

#visual .library_box {
    position: relative;
    flex: 1 60%;
    background: url(../images/bg_light_logout.png) no-repeat 50% 80px;
    z-index: 1;
    box-sizing: border-box;
}

#visual .library_box .bookshelf {
    position: absolute;
    left: 50%;
    top: 300px;
    width: 866px;
    height: 294px;
    margin: 0 0 0 -433px;
    background: url(../images/bg_bookshelf.png) no-repeat 50%;
}

#visual .library_box .bookshelf figure {
    position: absolute;
    bottom: 87px;
    width: 151px;
}

#visual .library_box .bookshelf figure figcaption {
    display: none;
}

#visual .library_box .bookshelf figure img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

#visual .library_box .bookshelf figure:nth-child(1) {
    left: 131px;
}

#visual .library_box .bookshelf figure:nth-child(2) {
    left: 357px;
}

#visual .library_box .bookshelf figure:nth-child(3) {
    left: 584px;
}

#visual .library_box .bookshelf figure .btn_edit {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity ease .3s;
}

#visual .library_box .bookshelf figure .btn_edit span {
    display: block;
    width: 50px;
    height: 28px;
    line-height: 28px;
    background: #fff;
    border-radius: 14px;
    font-family: 'JejuMyeongjo', serif;
    font-style: italic;
    font-size: 0.9em;
    position: absolute;
    left: 50%;
    top: 0;
    margin: -14px 0 0 -25px;
    text-align: center;
    opacity: 0;
    transition: all ease .3s;
}

#visual .library_box .bookshelf figure:hover .btn_edit {
    opacity: 1;
}

#visual .library_box .bookshelf figure:hover .btn_edit span {
    opacity: 1;
    top: 50%;
}

#visual .my_info .library_box {
    background: url(../images/bg_light_login.png) no-repeat 50% 80px;
}

#visual .my_info .user_info {
    position: absolute;
    width: 100%;
    top: 170px;
    text-align: center;
}

#visual .my_info .user {
    margin-bottom: 5px;
    font-family: 'JejuMyeongjo', serif;
    font-size: 2.6em;
    font-weight: 300;
}

#visual .my_info .user strong {
    display: inline-block;
    position: relative;
    background: #ffcb37;
    font-weight: 700;
    line-height: 40px;
    font-style: italic;
    padding: 0 5px;
}

#visual .my_info .user strong::after {
    content: '';
    display: block;
    width: 26px;
    height: 27px;
    background: url(../images/logo_star.svg) no-repeat 50%;
    position: absolute;
    left: -24px;
    top: -10px;
}

#visual .my_info .follow {
    color: #747474;
    font-style: italic;
}

#visual .my_info .follow strong {
    color: #000;
    font-size: 1.2em;
}

#visual .my_info .user_status {
    display: flex;
    justify-content: space-around;
    position: relative;
    top: 580px;
}

#visual .my_info .user_status dl {
    position: relative;
    width: 30%;
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
    font-weight: 700;
}

#visual .my_info .user_status dt {
    color: #747474;
}

#visual .my_info .user_status dd {
    font-family: 'JejuMyeongjo', serif;
    font-size: 3em;
}

#visual .my_info .user_status dl::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin: -30px 0 0;
    width: 1px;
    height: 60px;
    background: #e5e5e5;
}

#visual .my_info .user_status dl:first-child::after {
    display: none;
}

#visual .scroll_info {
    position: relative;
    padding-top: 42px;
    text-align: center;
    color: #909090;
    font-style: italic;
}

#visual .scroll_info i {
    position: absolute;
    left: 50%;
    top: 0;
    margin: 0 0 0 -11px;
    width: 22px;
    height: 36px;
    background: #c7c7c7;
    border-radius: 11px;
}

#visual .scroll_info i::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 6px;
    width: 6px;
    height: 6px;
    margin: 0 0 0 -3px;
    border-radius: 50%;
    background: #fafafa;
    animation: mouse_ani 2s linear infinite;
}

@keyframes mouse_ani {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(12px);
    }
    100% {
        opacity: 0;
        transform: translateY(12px);
    }
}

.cont_tit {
    width: 300px;
}

.cont_tit .tit {
    font-size: 3em;
    font-family: 'JejuMyeongjo', serif;
    font-weight: 300;
    line-height: 1.2em
}

.cont_tit .tit strong {
    position: relative;
    font-weight: 700;
}

.cont_tit .tit strong::after {
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -6px;
    background: #000;
}

.cont_tit p {
    margin-top: 10px;
    opacity: .8
}

#note {
    position: relative;
    margin: 50px 0;
    padding: 0 50px;
    box-sizing: border-box;
    min-width: 1200px
}

#note .inner {
    background: #222;
    padding: 140px 0;
    min-width: 1200px
}

#note .cont_tit {
    text-align: right;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 120px;
    margin: 0 0 0 -600px;
    z-index: 1
}

#note .cont_tit .tit {
    margin-bottom: 20px;
}

#note .cont_tit .tit strong {
}

.cont_tit .tit strong::after {
    background: #fff;
}

#note .cont_tit p {
}

.slider_note {
    min-width: 1200px;
}

.slider_note .slick-prev,
.slider_note .slick-next {
    position: absolute;
    top: 200px;
    width: 50px;
    height: 50px;
    background: none;
    text-indent: -9999em;
    overflow: hidden;
    text-align: left;
    z-index: 1;
    opacity: .5;
    transition: opacity ease .3s
}

.slider_note .slick-disabled {
    opacity: .05
}

.slider_note .slick-prev {
    left: calc(50% - 260px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 30 30' viewBox='0 0 30 30'%3E%3Cpath d='M0 15c0 8.3 6.7 15 15 15s15-6.7 15-15S23.3 0 15 0 0 6.7 0 15zm15-1.5h6v3h-6V21l-6-6 6-6v4.5z' style='fill:%23fff'/%3E%3C/svg%3E");

}

.slider_note .slick-next {
    left: calc(50% + 560px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 30 30' viewBox='0 0 30 30'%3E%3Cpath d='M30 15c0-8.3-6.7-15-15-15S0 6.7 0 15s6.7 15 15 15 15-6.7 15-15zm-15 1.5H9v-3h6V9l6 6-6 6v-4.5z' style='fill:%23fff'/%3E%3C/svg%3E");
}

.slider_note .slick-prev:hover,
.slider_note .slick-next:hover {
    opacity: 1
}

.slider_note .slick-disabled:hover {
    opacity: .05
}

.slider_note .slick-track {
    transition: transform ease .2s
}

.slider_note .slick-list {
    padding: 0 0 0 340px !important
}

.slider_note .slick-slide {
    margin: 0 30px;
    color: #fff;
    width: 300px;
    opacity: .15;
}

.slider_note .slick-slide .item {
}

.slider_note .slick-slide .thumb_book {
    display: block;
    margin-bottom: 20px;
}

.slider_note .slick-slide .thumb_book img {
    width: 180px;
    filter: grayscale(100%);
}

.slider_note .slick-slide .info {
    display: block;
    width: 250px;
}

.slider_note .slick-slide .tit_box {
    display: none;
    padding: 15px 0 40px;
}

.slider_note .slick-slide .tit_box .sort {
    display: block;
    margin-bottom: 10px;
    opacity: 0.8;
    font-size: 0.85em
}

.slider_note .slick-slide .tit_box .writer {
    display: block;
    margin-top: 8px;
    opacity: 0.8;
    font-size: 0.85em
}

.slider_note .slick-slide .tit_box .tit {
    font-size: 1.8em;
    letter-spacing: -1px
}

.slider_note .slick-slide .user_box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    position: relative;
}

.slider_note .slick-slide .user_box .user_photo {
    display: none;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
}

.slider_note .slick-slide .user_box .user_photo img {
    width: 100%;
}

.slider_note .slick-slide .user_box .btn_favorite .count {
    color: #fff
}

.slider_note .slick-slide .note_cont {
    font-family: 'JejuMyeongjo', serif;
    width: 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.8em
}

.slider_note .slick-slide {
}

.slider_note .slick-slide.slick-center {
    width: 650px;
    margin: 0 30px;
    opacity: 1;
}

.slider_note .slick-track {
}

.slider_note .slick-slide.slick-center .item {
    display: flex !important;
}

.slider_note .slick-slide.slick-center .thumb_book {
    flex-shrink: 0;
    width: 320px;
    margin: 0;
}

.slider_note .slick-slide.slick-center .thumb_book img {
    filter: unset;
    width: 100%;
    height: auto;
}

.slider_note .slick-slide.slick-center .info {
    flex-shrink: 0;
    width: 330px;
    padding-left: 40px;
}

.slider_note .slick-slide.slick-center .tit_box {
    display: block;
}

.slider_note .slick-slide.slick-center .user_box .user_photo {
    display: block;
}

.slider_note .slick-slide.slick-center .user_box {
    padding-left: 34px;
}

.slider_note .slick-slide.slick-center .note_cont {
    white-space: unset;
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: unset;
}

#interview {
}

#interview .inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 140px 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-content: center;
}

#interview .inner .inner_cont {
    box-sizing: border-box;
    margin-right: 80px;
}

#interview .inner .inner_thumb {
    width: 360px;
}

#interview .inner .inner_cont h2 {
    color: #a4a4a4;
    font-size: 1.1em;
    margin-bottom: 20px;
}

#interview .inner .inner_cont .inter_header {
    margin-bottom: 30px;
}

#interview .inner .inner_cont .inter_header h3 {
    margin-bottom: 20px;
    font-size: 3em;
    font-family: 'JejuMyeongjo', serif;
}

#interview .inner .inner_cont .inter_header h3 .writer {
}

#interview .inner .inner_cont .inter_header h3 .book_tit {
    position: relative;
    padding-left: 20px;
    color: #fca816
}

#interview .inner .inner_cont .inter_header h3 .book_tit::after {
    content: '*';
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    text-align: center
}

#interview .inner .inner_cont .inter_header .inter_tit {
}

#interview .inner .inner_cont .inter_header .inter_tit p {
    margin-bottom: 3px;
    font-size: 1.4em;
    font-weight: 800
}

#interview .inner .inner_cont .inter_header .inter_tit time {
    font-size: 1em;
}

#interview .inner .inner_cont .preview {
    font-size: 1.1em;
    line-height: 1.6em;
    margin-bottom: 60px;
    width: 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

#interview .inner .inner_cont .preview p {
    margin-top: 10px;
}

#interview .inner .inner_cont .preview p:first-child {
    margin-top: 0
}

#interview .inner .inner_cont .preview .content_desc {
    font-size: 0.8em;
    color: #a4a4a4;
    font-style: italic;
}

#interview .inner .inner_cont .go_lnk {
    display: inline-block;
    position: relative;
    font-size: 1.4em;
    font-weight: 600;
    padding-right: 60px;
}

#interview .inner .inner_cont .go_lnk::after {
    content: '';
    display: block;
    background: #e8e8e8;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0 -25px -10px 0;
    transition: transform ease .3s
}

#interview .inner .inner_cont .go_lnk i {
    position: absolute;
    right: 0;
    bottom: 4px;
    display: inline-block;
    width: 45px;
    height: 18px;
    z-index: 1;
}

#interview .inner .inner_cont .go_lnk i::after {
    content: '';
    width: 100%;
    height: 2px;
    background: #000;
    position: absolute;
    left: 0;
    bottom: 0;
}

#interview .inner .inner_cont .go_lnk i::before {
    content: '';
    width: 20px;
    height: 2px;
    background: #000;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(45deg);
    margin: 0 -2px 7px 0;
}

#interview .inner .inner_cont .go_lnk:hover::after,
#interview .inner .inner_cont .go_lnk:focus::after {
    transform: scale(1.4);
}

#interview .inner .inner_thumb {
}

#interview .inner .inner_thumb .thumb_box {
    position: relative;
}

#interview .inner .inner_thumb .writer_pic {
    display: block;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    overflow: hidden;
}

#interview .inner .inner_thumb .writer_pic img {
    min-width: 100%;
    min-height: 100%;
}

#interview .inner .inner_thumb .book_sign {
    display: block;
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 110px;
}

#interview .inner .inner_thumb .book_sign img {
    width: 100%;
    position: relative;
    z-index: 1
}

#interview .inner .inner_thumb .book_sign::after {
    content: '';
    display: block;
    background: url(../images/bg_interview_book.png) no-repeat 50%;
    width: 165px;
    height: 38px;
    position: absolute;
    left: 0;
    bottom: -10px;
}

#neighbor {
    width: 100%;
    padding: 70px 0 50px;
    background: #f6f2ef;
}

#neighbor .cont_tit {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

#neighbor .cont_tit .tit {
    font-size: 2.6em;
}

#neighbor .cont_tit .tit span {
    position: relative;
    font-weight: 300;
}

#neighbor .cont_tit .tit span::after {
    content: '';
    display: inline-block;
    width: 26px;
    height: 27px;
    background: url(../images/logo_star.svg) no-repeat 50%;
    position: absolute;
    left: -24px;
    top: -10px;
}

#neighbor .cont_tit .tit strong::after {
    display: none;
}

#neighbor .cont_tit p {
    font-style: italic;
}

.slider_neighbor .thumb {
    display: block;
    text-align: center;
}

.slider_neighbor .thumb .user_pic {
    margin: 0 auto 10px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #f6f2ef;
    transition: border ease .3s
}

.slider_neighbor .thumb .user_pic:hover,
.slider_neighbor .thumb .user_pic:focus {
    border: 4px solid #fca816
}

.slider_neighbor .thumb .user_nickname {
    font-style: italic;
    font-family: 'JejuMyeongjo', serif;
    font-size: 0.9em
}

.slider_neighbor .thumb .user_nickname strong {
    display: inline-block;
    font-weight: 300;
    max-width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    vertical-align: top
}

.slider_neighbor .thumb .user_nickname::after {
    content: '님';
    display: inline-block;
    vertical-align: top
}

/*.slider_neighbor .slick-list{padding-left:calc( 25% - 190px );}*/
.slider_neighbor .slick-slide {
    opacity: .1;
    width: 120px;
}

.slider_neighbor .slick-slide.slick-active {
    opacity: 1;
}

.slider_neighbor .slick-prev,
.slider_neighbor .slick-next {
    position: absolute;
    width: 58px;
    height: 58px;
    top: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    text-indent: -9999em;
    overflow: hidden;
    text-align: left;
    z-index: 1
}

.slider_neighbor .slick-prev {
    left: 50%;
    margin-left: -560px
}

.slider_neighbor .slick-next {
    right: 50%;
    margin-right: -560px
}

.slider_neighbor .slick-prev::after,
.slider_neighbor .slick-next::after {
    content: '';
    width: 12px;
    height: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -10px 0 0 -6px;
}

.slider_neighbor .slick-prev::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 12 20' viewBox='0 0 12 20'%3E%3Cpath d='M12 1.8 10.2 0 0 10l10.2 10 1.8-1.8L3.6 10 12 1.8z'/%3E%3C/svg%3E");
}

.slider_neighbor .slick-next::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 12 20' viewBox='0 0 12 20'%3E%3Cpath d='M0 18.2 1.8 20 12 10 1.8 0 0 1.8 8.4 10 0 18.2z'/%3E%3C/svg%3E");
}

#sentence {
    padding: 140px 50px 100px;
    background: #fff;
}

#sentence .inner {
    position: relative;
    max-width: 1400px;
    min-width: 1200px;
    margin: 0 auto;
}

#sentence .cont_tit {
    position: absolute;
    left: 0;
    top: 50px;
}

#sentence .cont_tit .tit strong::after {
    background: #000;
}

.slider_sentence {
    padding-left: calc(50% - 160px);
    box-sizing: border-box;
}

.slider_sentence .innner_slide {
    display: flex;
    min-height: 600px;
}

.slider_sentence .book_box {
    margin-right: 100px;
}

.slider_sentence .book_box .user_info {
    position: relative;
    font-style: italic;
    padding-left: 29px;
    line-height: 25px;
    margin-bottom: 10px;
}

.slider_sentence .book_box .user_info .user_photo {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0
}

.slider_sentence .book_box .user_info .user_photo img {
    width: 100%;
    height: 100%;
}

.slider_sentence .book_box .user_info .nickname {
}

.slider_sentence .book_box .user_info .count {
}

.slider_sentence .book_box .thumb_book {
    width: 320px;
}

.slider_sentence .book_box .thumb_book figure {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
    border: 1px solid #e6e6e6
}

.slider_sentence .book_box .thumb_book figure .rank {
    width: 40px;
    height: 50px;
    padding-top: 12px;
    font-weight: 700;
    text-align: center;
    font-size: 1.1em;
    box-sizing: border-box;
    position: absolute;
    left: 5px;
    top: -5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 40 50' viewBox='0 0 40 50'%3E%3Cpath d='M0 0h40v50L19.8 40 0 50V0z' style='fill-rule:evenodd;clip-rule:evenodd;fill:%23fca816'/%3E%3C/svg%3E");
}

.slider_sentence .book_box .thumb_book img {
    width: 100%;
    vertical-align: bottom
}

.slider_sentence .book_box .thumb_book .tit_box {
}

.slider_sentence .book_box .thumb_book .tit_box .tit {
    font-size: 1.8em;
    word-break: break-all;
    letter-spacing: -1px
}

.slider_sentence .book_box .thumb_book .tit_box .sort {
    display: block;
    margin-bottom: 10px;
    color: #747474;
    font-size: 0.85em
}

.slider_sentence .book_box .thumb_book .tit_box .writer {
    display: block;
    margin-top: 8px;
    color: #747474;
    font-size: 0.85em
}

.slider_sentence .slick-prev,
.slider_sentence .slick-next {
    position: absolute;
    top: 40%;
    width: 50px;
    height: 50px;
    background: none;
    text-indent: -9999em;
    overflow: hidden;
    text-align: left;
    z-index: 1;
    opacity: .5;
    transition: opacity ease .3s
}

.slider_sentence .slick-prev:hover,
.slider_sentence .slick-next:hover {
    opacity: 1
}

.slider_sentence .slick-disabled {
    opacity: .05
}

.slider_sentence .slick-prev {
    left: calc(50% - 220px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 30 30' viewBox='0 0 30 30'%3E%3Cpath d='M0 15c0 8.3 6.7 15 15 15s15-6.7 15-15S23.3 0 15 0 0 6.7 0 15zm15-1.5h6v3h-6V21l-6-6 6-6v4.5z' style='fill:%23000'/%3E%3C/svg%3E");
}

.slider_sentence .slick-next {
    left: calc(50% + 172px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 30 30' viewBox='0 0 30 30'%3E%3Cpath d='M30 15c0-8.3-6.7-15-15-15S0 6.7 0 15s6.7 15 15 15 15-6.7 15-15zm-15 1.5H9v-3h6V9l6 6-6 6v-4.5z' style='fill:%23000'/%3E%3C/svg%3E");
}

.lst_sentence {
    padding: 0 30px;
    width: 100%;
    max-height: 600px;
    overflow-y: auto;
}

.lst_sentence::-webkit-scrollbar {
    width: 10px;
}

.lst_sentence::-webkit-scrollbar-thumb {
    background-color: #d1d1d1;
    border-radius: 10px;
}

.lst_sentence::-webkit-scrollbar-thumb:hover {
    background-color: #bababa;
    border-radius: 10px;
}

.lst_sentence::-webkit-scrollbar-track {
    background-color: #efefef;
    border-radius: 10px;
}

.lst_sentence .item {
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-top: 1px solid #e5e5e5;
    height: 100%
}

.lst_sentence .item:first-child {
    border-top: 0
}

.lst_sentence .item .item_in {
}

.lst_sentence .txt_box {
    margin-bottom: 30px;
    font-family: 'JejuMyeongjo', serif;
    line-height: 1.8em
}

.lst_sentence .txt_box .txt {
    position: relative;
    padding-top: 35px;
    font-size: 1.2em;
    margin-bottom: 15px;
}

.lst_sentence .txt_box .txt::after {
    content: '';
    display: block;
    width: 26px;
    height: 23px;
    position: absolute;
    left: 50%;
    top: 0;
    margin: 0 0 0 -13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 26 23' viewBox='0 0 26 23'%3E%3Cpath d='M7.3 11.9c1.6.4 2.7 1 3.4 1.9.7.9 1 2 1 3.4 0 1.5-.5 2.8-1.6 3.8s-2.4 1.5-4 1.5S3 22 1.8 20.8C.6 19.6 0 17.7 0 15.2c0-2.8.7-5.5 2.1-8.1C3.5 4.5 5.7 2.3 8.7.5c.9-.4 1.6-.2 1.9.6.4.9.1 1.6-.7 2.1C8.9 3.8 8 4.7 7.1 6c-.8 1.2-1.4 2.4-1.6 3.5-.2.8-.1 1.4.3 1.8.4.3.9.6 1.5.6zm14.3 0c1.6.4 2.8 1 3.4 1.9.6.9.9 2 .9 3.4 0 1.5-.5 2.8-1.5 3.8s-2.4 1.5-4 1.5-3-.6-4.2-1.8c-1.2-1.2-1.8-3.1-1.8-5.6 0-2.8.7-5.5 2.1-8.1 1.4-2.6 3.6-4.8 6.5-6.6.9-.4 1.6-.2 2 .6.4.8.2 1.5-.7 2.1-1 .6-1.9 1.5-2.8 2.7-.9 1.2-1.4 2.4-1.7 3.5-.2.8-.1 1.4.3 1.8.5.5 1 .8 1.5.8z' style='fill:%23e9e9e9'/%3E%3C/svg%3E");
}

.lst_sentence .txt_box .page {
    font-size: 0.9em
}

.lst_sentence .user_box {
    display: block;
    margin-bottom: 15px;
}

.lst_sentence .user_box .user_info {
    display: inline-block;
    padding-left: 29px;
    position: relative;
}

.lst_sentence .user_box .user_photo {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
}

.lst_sentence .user_box .user_photo img {
    width: 100%;
}

.lst_sentence .user_box .btn_box {
    position: relative;
    display: inline-block;
    padding-left: 11px;
    margin-left: 10px;
}

.lst_sentence .user_box .btn_box::after {
    content: '';
    display: block;
    width: 1px;
    height: 12px;
    background: #cecece;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -6px;
}

.slider_nav {
    position: absolute;
    left: 0;
    top: 220px;
    width: 320px;
    z-index: 1;
}

.slider_nav ol {
}

.slider_nav ol li {
    padding: 15px 5px;
    border-top: 1px solid #e5e5e5;
    text-align: center;
}

.slider_nav ol li:first-child {
    border-top: 0;
}

.slider_nav ol li a {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.slider_nav ol li a:hover .tit {
    text-decoration: underline;
}

.slider_nav ol li .rank_num {
    font-style: italic;
    font-family: 'JejuMyeongjo', serif;
    font-size: 0.9em;
    color: #6e6e6e;
    width: 30px;
}

.slider_nav ol li .tit {
    padding: 0 15px;
}

.slider_nav ol li a.active .tit {
    font-weight: 700
}

.slider_nav ol li .rank_var {
    width: 30px;
}

.slider_nav ol li .rank_var i {
    display: inline-block;
    text-indent: -9999em;
    overflow: hidden;
    vertical-align: top;
}

.slider_nav ol li .rank_var span {
    display: inline-block;
    vertical-align: top;
}

.slider_nav ol li .rank_var.up {
    color: #ff2e2e
}

.slider_nav ol li .rank_var.down {
    color: #0047ba
}

.slider_nav ol li .rank_var.new {
    color: #d50057;
}

.slider_nav ol li .rank_var.up i {
    margin-right: 4px;
    width: 7px;
    height: 100%;
    background: url(../images/ico_rank_up.png) no-repeat 50%;
}

.slider_nav ol li .rank_var.down i {
    margin-right: 4px;
    width: 7px;
    height: 100%;
    background: url(../images/ico_rank_down.png) no-repeat 50%;
}

.slider_nav ol li .rank_var.new i {
    text-indent: 0;
    overflow: visible;
    font-weight: 700;
    font-style: normal;
    font-size: 0.85em
}

.slider_nav ol li .rank_var.new .num {
    display: none;
}

.slider_nav ol li .rank_var.no_c i {
    width: 9px;
    height: 100%;
    background: url(../images/ico_rank_no.png) no-repeat 50%;
}

.slider_nav ol li .rank_var.no_c .num {
    display: none;
}

#recommend {
    padding: 140px 0 140px 0;
    overflow: hidden;
}

#recommend .inner {
    position: relative;
    max-width: 1400px;
    min-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    overflow: visible;
}

#recommend .inner_l {
    display: flex;
    align-items: stretch;
    width: 120px;
}

#recommend .inner_r {
    width: calc(100% - 120px);
    padding-left: 80px;
    box-sizing: border-box;
}

#recommend .cont_tit {
    writing-mode: vertical-lr;
    padding-top: 60px
}

#recommend .cont_tit .tit {
    position: relative;
    align-items: stretch;
}

#recommend .cont_tit .tit::after {
    content: '';
    display: block;
    width: 26px;
    height: 27px;
    background: url(../images/logo_star.svg) no-repeat 50%;
    position: absolute;
    right: -5px;
    top: -30px;
}

#recommend .cont_tit .tit strong::after {
    display: none;
}

#recommend .cont_tit p {
    margin-top: 0;
}

#recommend .tab_box {
    padding: 50px 0;
    position: relative;
    display: inline-block;
}

#recommend .tab_box::after {
}

#recommend .tab_box ul {
    position: relative;
    z-index: 1;
}

#recommend .tab_box ul::after {
    content: '';
    width: 1px;
    height: 50px;
    background: #c7c7c7;
    position: absolute;
    left: 50%;
    bottom: -50px;
}

#recommend .tab_box ul::before {
    content: '';
    width: 1px;
    height: 50px;
    background: #c7c7c7;
    position: absolute;
    left: 50%;
    top: -50px;
}

#recommend .tab_box li a {
    writing-mode: vertical-lr;
}

#recommend .tab_box li a.active {
    font-weight: bold;
}

#recommend .tab_box li {
    position: relative;
    padding: 12px 0 10px;
}

#recommend .tab_box li::after {
    content: '';
    display: block;
    width: 2px;
    height: 2px;
    background: #c7c7c7;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -1px;
}

#recommend .tab_box li:first-child::after {
    display: none
}


.slider_recommend .slick-list {
    overflow: hidden;
}

.slider_recommend .slick-slide {
}

.slider_recommend .slick-slide > div {
    height: auto;
    margin: 0 10px;
}

/*.slider_recommend .slick-slide > div:hover{box-shadow: 0 0 20px rgba(0, 0, 0, .15);}*/
.slider_recommend .slick-slide > div:first-child {
    margin-bottom: 20px;
}

.slider_recommend .slick-slide a {
    display: block;
    width: 100%;
}

.slider_recommend .slick-slide a img {
    width: 100%;
    filter: grayscale(100%);
}

.slider_recommend .slick-slide a:hover {
}

.slider_recommend .slick-slide a:hover img {
    filter: unset;
}

.slider_recommend .slick-prev,
.slider_recommend .slick-next {
    position: absolute;
    width: 58px;
    height: 58px;
    top: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    text-indent: -9999em;
    overflow: hidden;
    text-align: left;
    z-index: 1
}

.slider_recommend .slick-prev {
    left: 0;
    top: 50%;
    margin: -29px 0 0 -24px;
}

.slider_recommend .slick-next {
    right: 0;
    top: 50%;
    margin: -29px -24px 0 0;
}

.slider_recommend .slick-prev::after,
.slider_recommend .slick-next::after {
    content: '';
    width: 12px;
    height: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -10px 0 0 -6px;
}

.slider_recommend .slick-prev::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 12 20' viewBox='0 0 12 20'%3E%3Cpath d='M12 1.8 10.2 0 0 10l10.2 10 1.8-1.8L3.6 10 12 1.8z'/%3E%3C/svg%3E");
}

.slider_recommend .slick-next::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 12 20' viewBox='0 0 12 20'%3E%3Cpath d='M0 18.2 1.8 20 12 10 1.8 0 0 1.8 8.4 10 0 18.2z'/%3E%3C/svg%3E");
}

@media screen and (max-width: 1200px) {
    #note {
        padding: 0;
    }

    #note .inner {
        background: #fff;
    }

    #sentence .cont_tit,
    .slider_nav {
        left: 50px;
    }

    .lst_sentence {
        padding: 0 30px 0 0;
    }

    #recommend .cont_tit {
        padding-left: 50px;
    }

    .slider_recommend .slick-next {
        margin: -29px 0 0 0 !important
    }

    #sentence {
        padding: 140px 0 100px;
    }
}